diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 2a5a19f702aa..de2e21c8cbc7 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -30,7 +30,7 @@ Cargo.toml
 /build.sbt @4e6 @jaroslavtulach @hubertp @Akirathan
 /distribution/ @4e6 @jdunkerley @radeusgd @GregoryTravis @AdRiley @marthasharkey
 /engine/ @4e6 @jaroslavtulach @hubertp @Akirathan
-/project/ @4e6 @jaroslavtulach @hubertp
+/project/ @4e6 @jaroslavtulach @hubertp @Akirathan
 /tools/ @4e6 @jaroslavtulach @radeusgd @hubertp
 
 # Enso Libraries
diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index 1357173a3141..a5cd19cdc646 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -20,7 +20,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/.github/workflows/engine-benchmark.yml b/.github/workflows/engine-benchmark.yml
index dc808eca5aa5..66d65fb7a37a 100644
--- a/.github/workflows/engine-benchmark.yml
+++ b/.github/workflows/engine-benchmark.yml
@@ -22,7 +22,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/.github/workflows/engine-nightly.yml b/.github/workflows/engine-nightly.yml
index 5997a095d712..bf58c73dc75e 100644
--- a/.github/workflows/engine-nightly.yml
+++ b/.github/workflows/engine-nightly.yml
@@ -23,7 +23,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -69,7 +69,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -113,7 +113,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -158,7 +158,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -203,7 +203,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -248,7 +248,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -305,7 +305,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -360,7 +360,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -416,7 +416,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -472,7 +472,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -528,7 +528,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -588,7 +588,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -646,7 +646,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -705,7 +705,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -764,7 +764,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/.github/workflows/extra-nightly-tests.yml b/.github/workflows/extra-nightly-tests.yml
index e0696b442e77..2b8a471fc19b 100644
--- a/.github/workflows/extra-nightly-tests.yml
+++ b/.github/workflows/extra-nightly-tests.yml
@@ -23,7 +23,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -84,7 +84,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/.github/workflows/gui-tests.yml b/.github/workflows/gui-tests.yml
index b12694f05afa..8e6ce1d61755 100644
--- a/.github/workflows/gui-tests.yml
+++ b/.github/workflows/gui-tests.yml
@@ -37,7 +37,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -80,7 +80,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -123,7 +123,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -166,7 +166,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/.github/workflows/gui.yml b/.github/workflows/gui.yml
index 2ec74a1d5353..c9c7c862f636 100644
--- a/.github/workflows/gui.yml
+++ b/.github/workflows/gui.yml
@@ -25,7 +25,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -67,7 +67,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -110,7 +110,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -165,7 +165,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -219,7 +219,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -274,7 +274,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -331,7 +331,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -350,7 +350,7 @@ jobs:
         run: ./run git-clean
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: ./run ide build --backend-source current-ci-run --gui-upload-artifact false
+      - run: ./run ide build --backend-source current-ci-run --gui-upload-artifact false --gui-sign-artifacts false
         env:
           ENSO_CLOUD_API_URL: ${{ vars.ENSO_CLOUD_API_URL }}
           ENSO_CLOUD_CHAT_URL: ${{ vars.ENSO_CLOUD_CHAT_URL }}
@@ -387,7 +387,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -406,7 +406,7 @@ jobs:
         run: ./run git-clean
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: ./run ide build --backend-source current-ci-run --gui-upload-artifact false
+      - run: ./run ide build --backend-source current-ci-run --gui-upload-artifact false --gui-sign-artifacts false
         env:
           APPLEID: ${{ secrets.APPLE_NOTARIZATION_USERNAME }}
           APPLEIDPASS: ${{ secrets.APPLE_NOTARIZATION_PASSWORD }}
@@ -451,7 +451,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -470,7 +470,7 @@ jobs:
         run: ./run git-clean
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: ./run ide build --backend-source current-ci-run --gui-upload-artifact false
+      - run: ./run ide build --backend-source current-ci-run --gui-upload-artifact false --gui-sign-artifacts false
         env:
           ENSO_CLOUD_API_URL: ${{ vars.ENSO_CLOUD_API_URL }}
           ENSO_CLOUD_CHAT_URL: ${{ vars.ENSO_CLOUD_CHAT_URL }}
diff --git a/.github/workflows/promote.yml b/.github/workflows/promote.yml
index 5fbbfbd21a1b..c6cd484cfb98 100644
--- a/.github/workflows/promote.yml
+++ b/.github/workflows/promote.yml
@@ -31,7 +31,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 9336bc045592..49ae23e4bd15 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -26,7 +26,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -60,7 +60,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -112,7 +112,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -161,7 +161,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -208,7 +208,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -256,7 +256,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -309,7 +309,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -361,7 +361,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -423,7 +423,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -490,7 +490,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -558,7 +558,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/.github/workflows/scala-new.yml b/.github/workflows/scala-new.yml
index ef44a17fb088..d0694d9c1ad4 100644
--- a/.github/workflows/scala-new.yml
+++ b/.github/workflows/scala-new.yml
@@ -37,7 +37,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -81,7 +81,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -126,7 +126,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -171,7 +171,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -226,7 +226,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -282,7 +282,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -338,7 +338,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -396,7 +396,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -455,7 +455,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
@@ -514,7 +514,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/.github/workflows/std-libs-benchmark.yml b/.github/workflows/std-libs-benchmark.yml
index dbac651715c2..1c94146c09db 100644
--- a/.github/workflows/std-libs-benchmark.yml
+++ b/.github/workflows/std-libs-benchmark.yml
@@ -22,7 +22,7 @@ jobs:
         name: Installing wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
         with:
-          version: v0.10.2
+          version: v0.12.1
       - name: Expose Artifact API and context information.
         uses: actions/github-script@v7
         with:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5f4df9ef33e..7b3c37979e0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 #### Enso IDE
 
+- [Rows and Columns may be now removed in Table Input Widget][11151]. The option
+  is available in right-click context menu.
+
+[11151]: https://github.com/enso-org/enso/pull/11151
+
+# Enso 2024.4
+
+#### Enso IDE
+
 - [Table Editor Widget][10774] displayed in `Table.new` component.
 - [New design of Component Browser][10814] - the component list is under the
   input and shown only in the initial "component browsing" mode - in this mode
@@ -14,6 +23,14 @@
   updated actual code][10857]
 - [Added fullscreen modes to documentation editor and code editor][10876]
 - [Fixed issue with node name assignment when uploading multiple files.][10979]
+- [Cloud file browser inserts `enso:` paths][11001]
+- [Fixed issue where drag'n'dropped files were not uploaded in cloud
+  projects.][11014]
+- [Fixed files associations not properly registered on Windows][11030]
+- [Fixed "rename project" button being broken after not changing project
+  name][11103]
+- [Numbers starting with dot (`.5`) are accepted in Numeric Widget][11108]
+- [Add support for interacting with graph editor using touch devices.][11056]
 
 [10774]: https://github.com/enso-org/enso/pull/10774
 [10814]: https://github.com/enso-org/enso/pull/10814
@@ -21,6 +38,12 @@
 [10857]: https://github.com/enso-org/enso/pull/10857
 [10876]: https://github.com/enso-org/enso/pull/10876
 [10979]: https://github.com/enso-org/enso/pull/10979
+[11001]: https://github.com/enso-org/enso/pull/11001
+[11014]: https://github.com/enso-org/enso/pull/11014
+[11030]: https://github.com/enso-org/enso/pull/11030
+[11103]: https://github.com/enso-org/enso/pull/11103
+[11108]: https://github.com/enso-org/enso/pull/11108
+[11056]: https://github.com/enso-org/enso/pull/11056
 
 #### Enso Standard Library
 
diff --git a/app/dashboard/e2e/actions.ts b/app/dashboard/e2e/actions.ts
index aaf4830d39cb..96b415d85a3d 100644
--- a/app/dashboard/e2e/actions.ts
+++ b/app/dashboard/e2e/actions.ts
@@ -347,12 +347,6 @@ export function locateCollapsibleDirectories(page: test.Page) {
   return locateAssetRows(page).filter({ has: page.locator('[aria-label=Collapse]') })
 }
 
-/** Find a "confirm delete" modal (if any) on the current page. */
-export function locateConfirmDeleteModal(page: test.Page) {
-  // This has no identifying features.
-  return page.getByTestId('confirm-delete-modal')
-}
-
 /** Find a "new label" modal (if any) on the current page. */
 export function locateNewLabelModal(page: test.Page) {
   // This has no identifying features.
@@ -365,12 +359,6 @@ export function locateUpsertSecretModal(page: test.Page) {
   return page.getByTestId('upsert-secret-modal')
 }
 
-/** Find a "new user group" modal (if any) on the current page. */
-export function locateNewUserGroupModal(page: test.Page) {
-  // This has no identifying features.
-  return page.getByTestId('new-user-group-modal')
-}
-
 /** Find a user menu (if any) on the current page. */
 export function locateUserMenu(page: test.Page) {
   return page.getByAltText('User Settings').locator('visible=true')
diff --git a/app/dashboard/e2e/actions/DrivePageActions.ts b/app/dashboard/e2e/actions/DrivePageActions.ts
index f6062dd512cb..50f13cad484a 100644
--- a/app/dashboard/e2e/actions/DrivePageActions.ts
+++ b/app/dashboard/e2e/actions/DrivePageActions.ts
@@ -62,7 +62,7 @@ export default class DrivePageActions extends PageActions {
       cloud() {
         return self.step('Go to "Cloud" category', (page) =>
           page
-            .getByRole('button', { name: TEXT.cloudCategory })
+            .getByRole('button', { name: TEXT.cloudCategory, exact: true })
             .getByText(TEXT.cloudCategory)
             .click(),
         )
@@ -71,7 +71,7 @@ export default class DrivePageActions extends PageActions {
       local() {
         return self.step('Go to "Local" category', (page) =>
           page
-            .getByRole('button', { name: TEXT.localCategory })
+            .getByRole('button', { name: TEXT.localCategory, exact: true })
             .getByText(TEXT.localCategory)
             .click(),
         )
@@ -80,7 +80,7 @@ export default class DrivePageActions extends PageActions {
       recent() {
         return self.step('Go to "Recent" category', (page) =>
           page
-            .getByRole('button', { name: TEXT.recentCategory })
+            .getByRole('button', { name: TEXT.recentCategory, exact: true })
             .getByText(TEXT.recentCategory)
             .click(),
         )
@@ -88,10 +88,7 @@ export default class DrivePageActions extends PageActions {
       /** Switch to the "trash" category. */
       trash() {
         return self.step('Go to "Trash" category', (page) =>
-          page
-            .getByRole('button', { name: TEXT.trashCategory })
-            .getByText(TEXT.trashCategory)
-            .click(),
+          page.getByRole('button', { name: TEXT.trashCategory, exact: true }).click(),
         )
       },
     }
@@ -241,7 +238,7 @@ export default class DrivePageActions extends PageActions {
   /** Create a new empty project. */
   newEmptyProject() {
     return this.step('Create empty project', (page) =>
-      page.getByText(TEXT.newEmptyProject).click(),
+      page.getByText(TEXT.newEmptyProject, { exact: true }).click(),
     ).into(EditorPageActions)
   }
 
@@ -252,9 +249,12 @@ export default class DrivePageActions extends PageActions {
 
   /** Create a new folder using the icon in the Drive Bar. */
   createFolder() {
-    return this.step('Create folder', (page) =>
-      page.getByRole('button', { name: TEXT.newFolder, exact: true }).click(),
-    )
+    return this.step('Create folder', async (page) => {
+      await page.getByRole('button', { name: TEXT.newFolder, exact: true }).click()
+      // eslint-disable-next-line no-restricted-properties
+      await test.expect(page.locator('input:focus')).toBeVisible()
+      await page.keyboard.press('Escape')
+    })
   }
 
   /** Upload a file using the icon in the Drive Bar. */
diff --git a/app/dashboard/e2e/actions/contextMenuActions.ts b/app/dashboard/e2e/actions/contextMenuActions.ts
index e87bd8f50e6c..47de5ea5d854 100644
--- a/app/dashboard/e2e/actions/contextMenuActions.ts
+++ b/app/dashboard/e2e/actions/contextMenuActions.ts
@@ -1,4 +1,5 @@
 /** @file Actions for the context menu. */
+import { TEXT } from '../actions'
 import type * as baseActions from './BaseActions'
 import type BaseActions from './BaseActions'
 import EditorPageActions from './EditorPageActions'
@@ -13,7 +14,8 @@ export interface ContextMenuActions<T extends BaseActions> {
   readonly uploadToCloud: () => T
   readonly rename: () => T
   readonly snapshot: () => T
-  readonly moveToTrash: () => T
+  readonly moveNonFolderToTrash: () => T
+  readonly moveFolderToTrash: () => T
   readonly moveAllToTrash: () => T
   readonly restoreFromTrash: () => T
   readonly restoreAllFromTrash: () => T
@@ -43,97 +45,153 @@ export function contextMenuActions<T extends BaseActions>(
   return {
     open: () =>
       step('Open (context menu)', (page) =>
-        page.getByRole('button', { name: 'Open' }).getByText('Open').click(),
+        page.getByRole('button', { name: TEXT.openShortcut }).getByText(TEXT.openShortcut).click(),
       ),
     uploadToCloud: () =>
       step('Upload to cloud (context menu)', (page) =>
-        page.getByRole('button', { name: 'Upload To Cloud' }).getByText('Upload To Cloud').click(),
+        page
+          .getByRole('button', { name: TEXT.uploadToCloudShortcut })
+          .getByText(TEXT.uploadToCloudShortcut)
+          .click(),
       ),
     rename: () =>
       step('Rename (context menu)', (page) =>
-        page.getByRole('button', { name: 'Rename' }).getByText('Rename').click(),
+        page
+          .getByRole('button', { name: TEXT.renameShortcut })
+          .getByText(TEXT.renameShortcut)
+          .click(),
       ),
     snapshot: () =>
       step('Snapshot (context menu)', (page) =>
-        page.getByRole('button', { name: 'Snapshot' }).getByText('Snapshot').click(),
+        page
+          .getByRole('button', { name: TEXT.snapshotShortcut })
+          .getByText(TEXT.snapshotShortcut)
+          .click(),
       ),
-    moveToTrash: () =>
+    moveNonFolderToTrash: () =>
       step('Move to trash (context menu)', (page) =>
-        page.getByRole('button', { name: 'Move To Trash' }).getByText('Move To Trash').click(),
+        page
+          .getByRole('button', { name: TEXT.moveToTrashShortcut })
+          .getByText(TEXT.moveToTrashShortcut)
+          .click(),
       ),
+    moveFolderToTrash: () =>
+      step('Move folder to trash (context menu)', async (page) => {
+        await page
+          .getByRole('button', { name: TEXT.moveToTrashShortcut })
+          .getByText(TEXT.moveToTrashShortcut)
+          .click()
+        await page.getByRole('button', { name: TEXT.delete }).getByText(TEXT.delete).click()
+      }),
     moveAllToTrash: () =>
       step('Move all to trash (context menu)', (page) =>
         page
-          .getByRole('button', { name: 'Move All To Trash' })
-          .getByText('Move All To Trash')
+          .getByRole('button', { name: TEXT.moveAllToTrashShortcut })
+          .getByText(TEXT.moveAllToTrashShortcut)
           .click(),
       ),
     restoreFromTrash: () =>
       step('Restore from trash (context menu)', (page) =>
         page
-          .getByRole('button', { name: 'Restore From Trash' })
-          .getByText('Restore From Trash')
+          .getByRole('button', { name: TEXT.restoreFromTrashShortcut })
+          .getByText(TEXT.restoreFromTrashShortcut)
           .click(),
       ),
     restoreAllFromTrash: () =>
       step('Restore all from trash (context menu)', (page) =>
         page
-          .getByRole('button', { name: 'Restore All From Trash' })
-          .getByText('Restore All From Trash')
+          .getByRole('button', { name: TEXT.restoreAllFromTrashShortcut })
+          .getByText(TEXT.restoreAllFromTrashShortcut)
           .click(),
       ),
     share: () =>
       step('Share (context menu)', (page) =>
-        page.getByRole('button', { name: 'Share' }).getByText('Share').click(),
+        page
+          .getByRole('button', { name: TEXT.shareShortcut })
+          .getByText(TEXT.shareShortcut)
+          .click(),
       ),
     label: () =>
       step('Label (context menu)', (page) =>
-        page.getByRole('button', { name: 'Label' }).getByText('Label').click(),
+        page
+          .getByRole('button', { name: TEXT.labelShortcut })
+          .getByText(TEXT.labelShortcut)
+          .click(),
       ),
     duplicate: () =>
       step('Duplicate (context menu)', (page) =>
-        page.getByRole('button', { name: 'Duplicate' }).getByText('Duplicate').click(),
+        page
+          .getByRole('button', { name: TEXT.duplicateShortcut })
+          .getByText(TEXT.duplicateShortcut)
+          .click(),
       ),
     duplicateProject: () =>
       step('Duplicate project (context menu)', (page) =>
-        page.getByRole('button', { name: 'Duplicate' }).getByText('Duplicate').click(),
+        page
+          .getByRole('button', { name: TEXT.duplicateShortcut })
+          .getByText(TEXT.duplicateShortcut)
+          .click(),
       ).into(EditorPageActions),
     copy: () =>
       step('Copy (context menu)', (page) =>
-        page.getByRole('button', { name: 'Copy' }).getByText('Copy', { exact: true }).click(),
+        page
+          .getByRole('button', { name: TEXT.copyShortcut })
+          .getByText(TEXT.copyShortcut, { exact: true })
+          .click(),
       ),
     cut: () =>
       step('Cut (context menu)', (page) =>
-        page.getByRole('button', { name: 'Cut' }).getByText('Cut').click(),
+        page.getByRole('button', { name: TEXT.cutShortcut }).getByText(TEXT.cutShortcut).click(),
       ),
     paste: () =>
       step('Paste (context menu)', (page) =>
-        page.getByRole('button', { name: 'Paste' }).getByText('Paste').click(),
+        page
+          .getByRole('button', { name: TEXT.pasteShortcut })
+          .getByText(TEXT.pasteShortcut)
+          .click(),
       ),
     copyAsPath: () =>
       step('Copy as path (context menu)', (page) =>
-        page.getByRole('button', { name: 'Copy As Path' }).getByText('Copy As Path').click(),
+        page
+          .getByRole('button', { name: TEXT.copyAsPathShortcut })
+          .getByText(TEXT.copyAsPathShortcut)
+          .click(),
       ),
     download: () =>
       step('Download (context menu)', (page) =>
-        page.getByRole('button', { name: 'Download' }).getByText('Download').click(),
+        page
+          .getByRole('button', { name: TEXT.downloadShortcut })
+          .getByText(TEXT.downloadShortcut)
+          .click(),
       ),
     // TODO: Specify the files in parameters.
     uploadFiles: () =>
       step('Upload files (context menu)', (page) =>
-        page.getByRole('button', { name: 'Upload Files' }).getByText('Upload Files').click(),
+        page
+          .getByRole('button', { name: TEXT.uploadFilesShortcut })
+          .getByText(TEXT.uploadFilesShortcut)
+          .click(),
       ),
     newFolder: () =>
       step('New folder (context menu)', (page) =>
-        page.getByRole('button', { name: 'New Folder' }).getByText('New Folder').click(),
+        page
+          .getByRole('button', { name: TEXT.newFolderShortcut })
+          .getByText(TEXT.newFolderShortcut)
+          .click(),
       ),
     newSecret: () =>
       step('New secret (context menu)', (page) =>
-        page.getByRole('button', { name: 'New Secret' }).getByText('New Secret').click(),
+        page
+          .getByRole('button', { name: TEXT.newSecretShortcut })
+          .getByText(TEXT.newSecretShortcut)
+          .click(),
       ),
     newDataLink: () =>
       step('New Data Link (context menu)', (page) =>
-        page.getByRole('button', { name: 'New Data Link' }).getByText('New Data Link').click(),
+        page
+          .getByRole('button', { name: TEXT.newDatalinkShortcut })
+          .getByText(TEXT.newDatalinkShortcut)
+          .click(),
       ),
   }
 }
diff --git a/app/dashboard/e2e/api.ts b/app/dashboard/e2e/api.ts
index a9ccef283cf8..d527bad76ae6 100644
--- a/app/dashboard/e2e/api.ts
+++ b/app/dashboard/e2e/api.ts
@@ -704,7 +704,12 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
         new URL(request.url()).searchParams.entries(),
       ) as never
 
-      const file = addFile(searchParams.file_name)
+      const file = addFile(
+        searchParams.file_name,
+        searchParams.parent_directory_id == null ?
+          {}
+        : { parentId: searchParams.parent_directory_id },
+      )
 
       return { path: '', id: file.id, project: null } satisfies backend.FileInfo
     })
@@ -900,8 +905,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
       const body: backend.CreateDirectoryRequestBody = request.postDataJSON()
       const title = body.title
       const id = backend.DirectoryId(`directory-${uniqueString.uniqueString()}`)
-      const parentId =
-        body.parentId ?? backend.DirectoryId(`directory-${uniqueString.uniqueString()}`)
+      const parentId = body.parentId ?? defaultDirectoryId
       const json: backend.CreatedDirectory = { title, id, parentId }
       addDirectory(title, {
         description: null,
diff --git a/app/dashboard/e2e/delete.spec.ts b/app/dashboard/e2e/delete.spec.ts
index d445f9a186e3..67eec35feaeb 100644
--- a/app/dashboard/e2e/delete.spec.ts
+++ b/app/dashboard/e2e/delete.spec.ts
@@ -1,17 +1,16 @@
 /** @file Test copying, moving, cutting and pasting. */
 import * as test from '@playwright/test'
 
-import * as actions from './actions'
+import { mockAllAndLogin, TEXT } from './actions'
 
 test.test('delete and restore', ({ page }) =>
-  actions
-    .mockAllAndLogin({ page })
+  mockAllAndLogin({ page })
     .createFolder()
     .driveTable.withRows(async (rows) => {
       await test.expect(rows).toHaveCount(1)
     })
     .driveTable.rightClickRow(0)
-    .contextMenu.moveToTrash()
+    .contextMenu.moveFolderToTrash()
     .driveTable.expectPlaceholderRow()
     .goToCategory.trash()
     .driveTable.withRows(async (rows) => {
@@ -27,14 +26,16 @@ test.test('delete and restore', ({ page }) =>
 )
 
 test.test('delete and restore (keyboard)', ({ page }) =>
-  actions
-    .mockAllAndLogin({ page })
+  mockAllAndLogin({ page })
     .createFolder()
     .driveTable.withRows(async (rows) => {
       await test.expect(rows).toHaveCount(1)
     })
     .driveTable.clickRow(0)
     .press('Delete')
+    .do(async (thePage) => {
+      await thePage.getByRole('button', { name: TEXT.delete }).getByText(TEXT.delete).click()
+    })
     .driveTable.expectPlaceholderRow()
     .goToCategory.trash()
     .driveTable.withRows(async (rows) => {
diff --git a/app/dashboard/e2e/driveView.spec.ts b/app/dashboard/e2e/driveView.spec.ts
index bdb80e765f8a..7b65bf794977 100644
--- a/app/dashboard/e2e/driveView.spec.ts
+++ b/app/dashboard/e2e/driveView.spec.ts
@@ -37,7 +37,7 @@ test.test('drive view', ({ page }) =>
     })
     // Project context menu
     .driveTable.rightClickRow(0)
-    .contextMenu.moveToTrash()
+    .contextMenu.moveNonFolderToTrash()
     .driveTable.withRows(async (rows) => {
       await test.expect(rows).toHaveCount(1)
     }),
diff --git a/app/dashboard/e2e/editAssetName.spec.ts b/app/dashboard/e2e/editAssetName.spec.ts
index 42cf6ce06213..09eaa8ec09a5 100644
--- a/app/dashboard/e2e/editAssetName.spec.ts
+++ b/app/dashboard/e2e/editAssetName.spec.ts
@@ -7,12 +7,12 @@ test.test.beforeEach(({ page }) => actions.mockAllAndLogin({ page }))
 
 test.test('edit name', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
-  const mod = await actions.modModifier(page)
   const row = assetRows.nth(0)
   const newName = 'foo bar baz'
 
   await actions.locateNewFolderIcon(page).click()
-  await actions.locateAssetRowName(row).click({ modifiers: [mod] })
+  await actions.locateAssetRowName(row).click()
+  await actions.locateAssetRowName(row).click()
   await actions.locateAssetRowName(row).fill(newName)
   await actions.locateEditingTick(row).click()
   await test.expect(row).toHaveText(new RegExp('^' + newName))
@@ -33,13 +33,14 @@ test.test('edit name (keyboard)', async ({ page }) => {
 
 test.test('cancel editing name', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
-  const mod = await actions.modModifier(page)
   const row = assetRows.nth(0)
   const newName = 'foo bar baz'
 
   await actions.locateNewFolderIcon(page).click()
   const oldName = (await actions.locateAssetRowName(row).textContent()) ?? ''
-  await actions.locateAssetRowName(row).click({ modifiers: [mod] })
+  await actions.locateAssetRowName(row).click()
+  await actions.locateAssetRowName(row).click()
+
   await actions.locateAssetRowName(row).fill(newName)
   await actions.locateEditingCross(row).click()
   await test.expect(row).toHaveText(new RegExp('^' + oldName))
@@ -61,12 +62,12 @@ test.test('cancel editing name (keyboard)', async ({ page }) => {
 
 test.test('change to blank name', async ({ page }) => {
   const assetRows = actions.locateAssetRows(page)
-  const mod = await actions.modModifier(page)
   const row = assetRows.nth(0)
 
   await actions.locateNewFolderIcon(page).click()
   const oldName = (await actions.locateAssetRowName(row).textContent()) ?? ''
-  await actions.locateAssetRowName(row).click({ modifiers: [mod] })
+  await actions.locateAssetRowName(row).click()
+  await actions.locateAssetRowName(row).click()
   await actions.locateAssetRowName(row).fill('')
   await test.expect(actions.locateEditingTick(row)).not.toBeVisible()
   await actions.locateEditingCross(row).click()
diff --git a/app/dashboard/e2e/labelsPanel.spec.ts b/app/dashboard/e2e/labelsPanel.spec.ts
index 24350aa7907b..1249f05d7fb7 100644
--- a/app/dashboard/e2e/labelsPanel.spec.ts
+++ b/app/dashboard/e2e/labelsPanel.spec.ts
@@ -59,6 +59,6 @@ test.test('labels', async ({ page }) => {
 
   const labelsPanel = locateLabelsPanel(page)
   await labelsPanel.getByRole('button').and(labelsPanel.getByLabel(TEXT.delete)).click()
-  await page.getByRole('button', { name: 'Delete' }).getByText('Delete').click()
+  await page.getByRole('button', { name: TEXT.delete }).getByText(TEXT.delete).click()
   test.expect(await locateLabelsPanelLabels(page).count()).toBeGreaterThanOrEqual(1)
 })
diff --git a/app/dashboard/package.json b/app/dashboard/package.json
index 03d89cebc9e4..3e0073e87135 100644
--- a/app/dashboard/package.json
+++ b/app/dashboard/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@aws-amplify/auth": "5.6.5",
+    "amazon-cognito-identity-js": "6.3.6",
     "@aws-amplify/core": "5.8.5",
     "@hookform/resolvers": "^3.4.0",
     "@internationalized/date": "^3.5.5",
@@ -60,7 +61,9 @@
     "ts-results": "^3.3.0",
     "validator": "^13.12.0",
     "zod": "^3.23.8",
-    "zustand": "^4.5.4"
+    "zustand": "^4.5.4",
+    "input-otp": "1.2.4",
+    "qrcode.react": "3.1.0"
   },
   "devDependencies": {
     "@fast-check/vitest": "^0.0.8",
diff --git a/app/dashboard/src/App.tsx b/app/dashboard/src/App.tsx
index 1c72ad17f972..bf09c66b140a 100644
--- a/app/dashboard/src/App.tsx
+++ b/app/dashboard/src/App.tsx
@@ -346,6 +346,7 @@ function AppRouter(props: AppRouterProps) {
       },
     }
   }, [localStorage, inputBindingsRaw])
+
   const mainPageUrl = getMainPageUrl()
 
   // Subscribe to `localStorage` updates to trigger a rerender when the terms of service
@@ -354,10 +355,10 @@ function AppRouter(props: AppRouterProps) {
   localStorageProvider.useLocalStorageState('privacyPolicy')
 
   const authService = useInitAuthService(props)
-  const userSession = authService?.cognito.userSession.bind(authService.cognito) ?? null
-  const refreshUserSession =
-    authService?.cognito.refreshUserSession.bind(authService.cognito) ?? null
-  const registerAuthEventListener = authService?.registerAuthEventListener ?? null
+
+  const userSession = authService.cognito.userSession.bind(authService.cognito)
+  const refreshUserSession = authService.cognito.refreshUserSession.bind(authService.cognito)
+  const registerAuthEventListener = authService.registerAuthEventListener
 
   React.useEffect(() => {
     if ('menuApi' in window) {
@@ -490,7 +491,7 @@ function AppRouter(props: AppRouterProps) {
     <FeatureFlagsProvider>
       <RouterProvider navigate={navigate}>
         <SessionProvider
-          saveAccessToken={authService?.cognito.saveAccessToken.bind(authService.cognito) ?? null}
+          saveAccessToken={authService.cognito.saveAccessToken.bind(authService.cognito)}
           mainPageUrl={mainPageUrl}
           userSession={userSession}
           registerAuthEventListener={registerAuthEventListener}
diff --git a/app/dashboard/src/appUtils.tsx b/app/dashboard/src/appUtils.tsx
index ab4ce9d94224..aa7c6f924b49 100644
--- a/app/dashboard/src/appUtils.tsx
+++ b/app/dashboard/src/appUtils.tsx
@@ -14,6 +14,7 @@ export const LOGIN_PATH = '/login'
 export const REGISTRATION_PATH = '/registration'
 /** Path to the confirm registration page. */
 export const CONFIRM_REGISTRATION_PATH = '/confirmation'
+
 export const SETUP_PATH = '/setup'
 /** Path to the page in which a user can restore their account after it has been
  * marked for deletion. */
diff --git a/app/dashboard/src/assets/ReadAndFilter.png b/app/dashboard/src/assets/ReadAndFilter.png
new file mode 100644
index 000000000000..b95966b171f1
Binary files /dev/null and b/app/dashboard/src/assets/ReadAndFilter.png differ
diff --git a/app/dashboard/src/assets/aggregate.png b/app/dashboard/src/assets/aggregate.png
new file mode 100644
index 000000000000..465918d20f80
Binary files /dev/null and b/app/dashboard/src/assets/aggregate.png differ
diff --git a/app/dashboard/src/assets/blankProject.png b/app/dashboard/src/assets/blankProject.png
new file mode 100644
index 000000000000..257b9c57619a
Binary files /dev/null and b/app/dashboard/src/assets/blankProject.png differ
diff --git a/app/dashboard/src/assets/book.png b/app/dashboard/src/assets/book.png
new file mode 100644
index 000000000000..4635abd90051
Binary files /dev/null and b/app/dashboard/src/assets/book.png differ
diff --git a/app/dashboard/src/assets/cleansing.png b/app/dashboard/src/assets/cleansing.png
new file mode 100644
index 000000000000..63b1e5945d8c
Binary files /dev/null and b/app/dashboard/src/assets/cleansing.png differ
diff --git a/app/dashboard/src/assets/covid.png b/app/dashboard/src/assets/covid.png
new file mode 100644
index 000000000000..eff3b1a73384
Binary files /dev/null and b/app/dashboard/src/assets/covid.png differ
diff --git a/app/dashboard/src/assets/enso_logo_large.svg b/app/dashboard/src/assets/enso_logo_large.svg
new file mode 100644
index 000000000000..3967417a715e
--- /dev/null
+++ b/app/dashboard/src/assets/enso_logo_large.svg
@@ -0,0 +1,6 @@
+<svg width="80" height="80" viewBox="0.4 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8.4" cy="8" r="7" stroke="white" stroke-width="2" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12.02 10.8112C12.3647 10.4101 12.573 9.88852 12.573 9.31828C12.573 8.05263 11.5469 7.02661 10.2813 7.02661C9.49094 7.02661 8.79404 7.4267 8.38207 8.0354C7.79798 8.82866 6.85752 9.34336 5.79686 9.34336C5.07403 9.34336 4.40704 9.10432 3.87061 8.70098L3.87076 8.70196C3.98182 9.41859 4.26135 10.0986 4.68636 10.6862C5.11138 11.2738 5.66976 11.7522 6.31561 12.082C6.96147 12.4118 7.67636 12.5836 8.40155 12.5834C9.12673 12.5831 9.84151 12.4108 10.4871 12.0806C11.0855 11.7745 11.6086 11.3409 12.02 10.8112Z"
+        fill="white" />
+</svg>
\ No newline at end of file
diff --git a/app/dashboard/src/assets/joining.png b/app/dashboard/src/assets/joining.png
new file mode 100644
index 000000000000..7b9cfad33bdc
Binary files /dev/null and b/app/dashboard/src/assets/joining.png differ
diff --git a/app/dashboard/src/assets/kmeans.png b/app/dashboard/src/assets/kmeans.png
new file mode 100644
index 000000000000..aaef5a2cbdf5
Binary files /dev/null and b/app/dashboard/src/assets/kmeans.png differ
diff --git a/app/dashboard/src/assets/monthSales.png b/app/dashboard/src/assets/monthSales.png
new file mode 100644
index 000000000000..7c8f4d221979
Binary files /dev/null and b/app/dashboard/src/assets/monthSales.png differ
diff --git a/app/dashboard/src/assets/nasdaq.png b/app/dashboard/src/assets/nasdaq.png
new file mode 100644
index 000000000000..36cfaadf3ed4
Binary files /dev/null and b/app/dashboard/src/assets/nasdaq.png differ
diff --git a/app/dashboard/src/assets/shield_break.svg b/app/dashboard/src/assets/shield_break.svg
new file mode 100644
index 000000000000..dbdaf22f2e52
--- /dev/null
+++ b/app/dashboard/src/assets/shield_break.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6.08122L0.59375 4.15622L1.84314 2.59448L23.4049 19.8439L22.1555 21.4056L18.8887 18.7922C17.2377 20.7536 14.7644 22 12 22C7.02944 22 3 17.9705 3 13V6.08122ZM17.3263 17.5423C16.0424 19.0463 14.1326 20 12 20C8.13401 20 5 16.866 5 13V7.68122L17.3263 17.5423Z" fill="black"/>
+<path d="M19 13C19 13.2454 18.9874 13.4879 18.9627 13.7268L20.7416 15.1499C20.9105 14.461 21 13.7409 21 13V5.34595L12 1.40845L6.54694 3.79416L8.31101 5.20541L12 3.59148L19 6.65398V13Z" fill="black"/>
+</svg>
diff --git a/app/dashboard/src/assets/shield_check.svg b/app/dashboard/src/assets/shield_check.svg
new file mode 100644
index 000000000000..dcc2e7d24ae7
--- /dev/null
+++ b/app/dashboard/src/assets/shield_check.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 11.75L11 13.25L14.5 9.75M12 3L20 5.75V11.9123C20 16.8848 16 19 12 21.1579C8 19 4 16.8848 4 11.9123V5.75L12 3Z" stroke="black" stroke-width="2" stroke-linecap="square"/>
+</svg>
diff --git a/app/dashboard/src/assets/shield_crossed.svg b/app/dashboard/src/assets/shield_crossed.svg
new file mode 100644
index 000000000000..03270c29cb7c
--- /dev/null
+++ b/app/dashboard/src/assets/shield_crossed.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 13.5L12 11.5M12 11.5L10 9.5M12 11.5L14 9.5M12 11.5L10 13.5M12 3L20 5.75V11.9123C20 16.8848 16 19 12 21.1579C8 19 4 16.8848 4 11.9123V5.75L12 3Z" stroke="black" stroke-width="2" stroke-linecap="square"/>
+</svg>
diff --git a/app/dashboard/src/assets/un_fa.svg b/app/dashboard/src/assets/un_fa.svg
new file mode 100644
index 000000000000..73b74efe8466
--- /dev/null
+++ b/app/dashboard/src/assets/un_fa.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 5.75L12 3L4 5.75V11.9123C4 16.8848 8 19 12 21.1579C16 19 20 16.8848 20 11.9123V5.75Z" stroke="black" stroke-width="2" stroke-linecap="square"/>
+</svg>
diff --git a/app/dashboard/src/assets/weather.png b/app/dashboard/src/assets/weather.png
new file mode 100644
index 000000000000..9286d7183d5e
Binary files /dev/null and b/app/dashboard/src/assets/weather.png differ
diff --git a/app/dashboard/src/authentication/cognito.mock.ts b/app/dashboard/src/authentication/cognito.mock.ts
index 9f379103c9b1..f293b78d9b35 100644
--- a/app/dashboard/src/authentication/cognito.mock.ts
+++ b/app/dashboard/src/authentication/cognito.mock.ts
@@ -283,6 +283,13 @@ export class Cognito {
   async refreshUserSession() {
     return Promise.resolve(results.Ok(null))
   }
+
+  /**
+   * Returns MFA preference for the current user.
+   */
+  async getMFAPreference() {
+    return Promise.resolve(results.Ok('NOMFA'))
+  }
 }
 
 // ===================
diff --git a/app/dashboard/src/authentication/cognito.ts b/app/dashboard/src/authentication/cognito.ts
index 989e61dedd92..595c6355e1d9 100644
--- a/app/dashboard/src/authentication/cognito.ts
+++ b/app/dashboard/src/authentication/cognito.ts
@@ -30,7 +30,7 @@
  * `kind` field provides a unique string that can be used to brand the error in place of the
  * `internalCode`, when rethrowing the error. */
 import * as amplify from '@aws-amplify/auth'
-import type * as cognito from 'amazon-cognito-identity-js'
+import * as cognito from 'amazon-cognito-identity-js'
 import * as results from 'ts-results'
 
 import * as detect from 'enso-common/src/detect'
@@ -70,6 +70,18 @@ interface UserAttributes {
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 
+/**
+ * The type of multi-factor authentication (MFA) that the user has set up.
+ */
+export type MfaType = 'NOMFA' | 'SMS_MFA' | 'SOFTWARE_TOKEN_MFA' | 'TOTP'
+
+/**
+ * The type of challenge that the user is currently facing after signing in.
+ *
+ * The `NO_CHALLENGE` value is used when the user is not currently facing any challenge.
+ */
+export type UserSessionChallenge = cognito.ChallengeName | 'NO_CHALLENGE'
+
 /** User information returned from {@link amplify.Auth.currentUserInfo}. */
 interface UserInfo {
   readonly username: string
@@ -214,6 +226,16 @@ export class Cognito {
     return userInfo.attributes['custom:organizationId'] ?? null
   }
 
+  /**
+   * Gets user email from cognito
+   */
+  async email() {
+    // This `any` comes from a third-party API and cannot be avoided.
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const userInfo: UserInfo = await amplify.Auth.currentUserInfo()
+    return userInfo.attributes.email
+  }
+
   /** Sign up with username and password.
    *
    * Does not rely on federated identity providers (e.g., Google or GitHub). */
@@ -268,7 +290,20 @@ export class Cognito {
    * Does not rely on external identity providers (e.g., Google or GitHub). */
   async signInWithPassword(username: string, password: string) {
     const result = await results.Result.wrapAsync(async () => {
-      await amplify.Auth.signIn(username, password)
+      // This `any` comes from a third-party API and cannot be avoided.
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const maybeUser = await amplify.Auth.signIn(username, password)
+
+      if (maybeUser instanceof cognito.CognitoUser) {
+        return maybeUser
+      } else {
+        // eslint-disable-next-line no-restricted-properties
+        console.error(
+          'Unknown result from signIn, expected CognitoUser, got ' + typeof maybeUser,
+          JSON.stringify(maybeUser),
+        )
+        throw new Error('Unknown response from the server, please try again later ')
+      }
     })
 
     return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoSignInWithPasswordErrorOrThrow)
@@ -363,6 +398,112 @@ export class Cognito {
     }
   }
 
+  /**
+   * Start the TOTP setup process. Returns the secret and the URL to scan the QR code.
+   */
+  async setupTOTP() {
+    const email = await this.email()
+    const cognitoUserResult = await currentAuthenticatedUser()
+    if (cognitoUserResult.ok) {
+      const cognitoUser = cognitoUserResult.unwrap()
+
+      const result = (
+        await results.Result.wrapAsync(() => amplify.Auth.setupTOTP(cognitoUser))
+      ).map((data) => {
+        const str = 'otpauth://totp/AWSCognito:' + email + '?secret=' + data + '&issuer=' + 'Enso'
+
+        return { secret: data, url: str } as const
+      })
+
+      return result.mapErr(intoAmplifyErrorOrThrow)
+    } else {
+      return results.Err(cognitoUserResult.val)
+    }
+  }
+
+  /**
+   * Verify the TOTP token during the setup process.
+   * Use it *only* during the setup process.
+   */
+  async verifyTotpSetup(totpToken: string) {
+    const cognitoUserResult = await currentAuthenticatedUser()
+    if (cognitoUserResult.ok) {
+      const cognitoUser = cognitoUserResult.unwrap()
+      const result = await results.Result.wrapAsync(async () => {
+        await amplify.Auth.verifyTotpToken(cognitoUser, totpToken)
+      })
+      return result.mapErr(intoAmplifyErrorOrThrow)
+    } else {
+      return results.Err(cognitoUserResult.val)
+    }
+  }
+
+  /**
+   * Set the user's preferred MFA method.
+   */
+  async updateMFAPreference(mfaMethod: MfaType) {
+    const cognitoUserResult = await currentAuthenticatedUser()
+    if (cognitoUserResult.ok) {
+      const cognitoUser = cognitoUserResult.unwrap()
+      const result = await results.Result.wrapAsync(
+        async () => await amplify.Auth.setPreferredMFA(cognitoUser, mfaMethod),
+      )
+      return result.mapErr(intoAmplifyErrorOrThrow)
+    } else {
+      return results.Err(cognitoUserResult.val)
+    }
+  }
+
+  /**
+   * Get the user's preferred MFA method.
+   */
+  async getMFAPreference() {
+    const cognitoUserResult = await currentAuthenticatedUser()
+    if (cognitoUserResult.ok) {
+      const cognitoUser = cognitoUserResult.unwrap()
+      const result = await results.Result.wrapAsync(async () => {
+        // eslint-disable-next-line no-restricted-syntax
+        return (await amplify.Auth.getPreferredMFA(cognitoUser)) as MfaType
+      })
+      return result.mapErr(intoAmplifyErrorOrThrow)
+    } else {
+      return results.Err(cognitoUserResult.val)
+    }
+  }
+
+  /**
+   * Verify the TOTP token.
+   * Returns the user session if the token is valid.
+   */
+  async verifyTotpToken(totpToken: string) {
+    const cognitoUserResult = await currentAuthenticatedUser()
+
+    if (cognitoUserResult.ok) {
+      const cognitoUser = cognitoUserResult.unwrap()
+
+      return (
+        await results.Result.wrapAsync(() => amplify.Auth.verifyTotpToken(cognitoUser, totpToken))
+      ).mapErr(intoAmplifyErrorOrThrow)
+    } else {
+      return results.Err(cognitoUserResult.val)
+    }
+  }
+
+  /**
+   * Confirm the sign in with the MFA token.
+   */
+  async confirmSignIn(
+    user: amplify.CognitoUser,
+    confirmationCode: string,
+    mfaType: 'SMS_MFA' | 'SOFTWARE_TOKEN_MFA',
+  ) {
+    const result = await results.Result.wrapAsync(() =>
+      amplify.Auth.confirmSignIn(user, confirmationCode, mfaType),
+    )
+
+    return result.mapErr(intoAmplifyErrorOrThrow)
+  }
+
   /** We want to signal to Amplify to fire a "custom state change" event when the user is
    * redirected back to the application after signing in via an external identity provider. This
    * is done so we get a chance to fix the location history. The location history is the history
@@ -707,3 +848,4 @@ async function currentAuthenticatedUser() {
   )
   return result.mapErr(intoAmplifyErrorOrThrow)
 }
+export { CognitoUser } from '@aws-amplify/auth'
diff --git a/app/dashboard/src/authentication/service.ts b/app/dashboard/src/authentication/service.ts
index a72f2b3d83d5..e4caeafab38e 100644
--- a/app/dashboard/src/authentication/service.ts
+++ b/app/dashboard/src/authentication/service.ts
@@ -116,20 +116,17 @@ export interface AuthService {
  *
  * This hook should only be called in a single place, as it performs global configuration of the
  * Amplify library. */
-export function useInitAuthService(authConfig: AuthConfig): AuthService | null {
+export function useInitAuthService(authConfig: AuthConfig): AuthService {
   const { supportsDeepLinks } = authConfig
+
   const logger = useLogger()
   const navigate = useNavigate()
+
   return React.useMemo(() => {
     const amplifyConfig = loadAmplifyConfig(logger, supportsDeepLinks, navigate)
-    const cognito =
-      amplifyConfig == null ? null : (
-        new cognitoModule.Cognito(logger, supportsDeepLinks, amplifyConfig)
-      )
+    const cognito = new cognitoModule.Cognito(logger, supportsDeepLinks, amplifyConfig)
 
-    return cognito == null ? null : (
-        { cognito, registerAuthEventListener: listen.registerAuthEventListener }
-      )
+    return { cognito, registerAuthEventListener: listen.registerAuthEventListener }
   }, [logger, navigate, supportsDeepLinks])
 }
 
@@ -138,7 +135,7 @@ function loadAmplifyConfig(
   logger: Logger,
   supportsDeepLinks: boolean,
   navigate: (url: string) => void,
-): AmplifyConfig | null {
+): AmplifyConfig {
   let urlOpener: ((url: string) => void) | null = null
   let saveAccessToken: ((accessToken: saveAccessTokenModule.AccessToken | null) => void) | null =
     null
@@ -175,25 +172,18 @@ function loadAmplifyConfig(
 
   /** Load the platform-specific Amplify configuration. */
   const signInOutRedirect = supportsDeepLinks ? `${common.DEEP_LINK_SCHEME}://auth` : redirectUrl
-  return (
-      process.env.ENSO_CLOUD_COGNITO_USER_POOL_ID == null ||
-        process.env.ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID == null ||
-        process.env.ENSO_CLOUD_COGNITO_DOMAIN == null ||
-        process.env.ENSO_CLOUD_COGNITO_REGION == null
-    ) ?
-      null
-    : {
-        userPoolId: process.env.ENSO_CLOUD_COGNITO_USER_POOL_ID,
-        userPoolWebClientId: process.env.ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID,
-        domain: process.env.ENSO_CLOUD_COGNITO_DOMAIN,
-        region: process.env.ENSO_CLOUD_COGNITO_REGION,
-        redirectSignIn: signInOutRedirect,
-        redirectSignOut: signInOutRedirect,
-        scope: ['email', 'openid', 'aws.cognito.signin.user.admin'],
-        responseType: 'code',
-        urlOpener,
-        saveAccessToken,
-      }
+  return {
+    userPoolId: process.env.ENSO_CLOUD_COGNITO_USER_POOL_ID,
+    userPoolWebClientId: process.env.ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID,
+    domain: process.env.ENSO_CLOUD_COGNITO_DOMAIN,
+    region: process.env.ENSO_CLOUD_COGNITO_REGION,
+    redirectSignIn: signInOutRedirect,
+    redirectSignOut: signInOutRedirect,
+    scope: ['email', 'openid', 'aws.cognito.signin.user.admin'],
+    responseType: 'code',
+    urlOpener,
+    saveAccessToken,
+  }
 }
 
 /** Set the callback that will be invoked when a deep link to the application is opened.
diff --git a/app/dashboard/src/components/AriaComponents/Alert/Alert.tsx b/app/dashboard/src/components/AriaComponents/Alert/Alert.tsx
index 000b705fe40a..40c06b173656 100644
--- a/app/dashboard/src/components/AriaComponents/Alert/Alert.tsx
+++ b/app/dashboard/src/components/AriaComponents/Alert/Alert.tsx
@@ -1,6 +1,8 @@
 /** @file Alert component. */
 import { type ForwardedRef, type HTMLAttributes, type PropsWithChildren } from 'react'
 
+import SvgMask from '#/components/SvgMask'
+
 import { forwardRef } from '#/utilities/react'
 import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 
@@ -9,7 +11,7 @@ import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 // =================
 
 export const ALERT_STYLES = tv({
-  base: 'flex flex-col items-stretch',
+  base: 'flex items-stretch gap-2',
   variants: {
     fullWidth: { true: 'w-full' },
     variant: {
@@ -37,6 +39,11 @@ export const ALERT_STYLES = tv({
       large: 'px-4 pt-2 pb-2',
     },
   },
+  slots: {
+    iconContainer: 'flex items-center justify-center w-6 h-6',
+    children: 'flex flex-col items-stretch',
+    icon: 'flex items-center justify-center w-6 h-6 mr-2',
+  },
   defaultVariants: {
     fullWidth: true,
     variant: 'error',
@@ -53,7 +60,12 @@ export const ALERT_STYLES = tv({
 export interface AlertProps
   extends PropsWithChildren,
     VariantProps<typeof ALERT_STYLES>,
-    HTMLAttributes<HTMLDivElement> {}
+    HTMLAttributes<HTMLDivElement> {
+  /**
+   * The icon to display in the Alert
+   */
+  readonly icon?: React.ReactElement | string | null | undefined
+}
 
 /** Alert component. */
 // eslint-disable-next-line no-restricted-syntax
@@ -61,20 +73,45 @@ export const Alert = forwardRef(function Alert(
   props: AlertProps,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const { children, className, variant, size, rounded, fullWidth, ...containerProps } = props
+  const {
+    children,
+    className,
+    variant,
+    size,
+    rounded,
+    fullWidth,
+    icon,
+    variants = ALERT_STYLES,
+    ...containerProps
+  } = props
 
   if (variant === 'error') {
     containerProps.tabIndex = -1
     containerProps.role = 'alert'
   }
 
+  const classes = variants({
+    variant,
+    size,
+    rounded,
+    fullWidth,
+  })
+
   return (
-    <div
-      className={ALERT_STYLES({ variant, size, className, rounded, fullWidth })}
-      ref={ref}
-      {...containerProps}
-    >
-      {children}
+    <div className={classes.base({ className })} ref={ref} {...containerProps}>
+      {icon != null &&
+        (() => {
+          if (typeof icon === 'string') {
+            // eslint-disable-next-line no-restricted-syntax
+            return (
+              <div className={classes.iconContainer()}>
+                <SvgMask src={icon} />
+              </div>
+            )
+          }
+          return <div className={classes.iconContainer()}>{icon}</div>
+        })()}
+      <div className={classes.children()}>{children}</div>
     </div>
   )
 })
diff --git a/app/dashboard/src/components/AriaComponents/Checkbox/CheckboxGroup.tsx b/app/dashboard/src/components/AriaComponents/Checkbox/CheckboxGroup.tsx
index c8859460edbc..710cfba95713 100644
--- a/app/dashboard/src/components/AriaComponents/Checkbox/CheckboxGroup.tsx
+++ b/app/dashboard/src/components/AriaComponents/Checkbox/CheckboxGroup.tsx
@@ -72,6 +72,7 @@ export const CheckboxGroup = forwardRef(
     return (
       <Form.Controller
         name={name}
+        control={formInstance.control}
         {...(defaultValueOverride != null && { defaultValue: defaultValueOverride })}
         render={({ field, fieldState }) => {
           const defaultValue = defaultValueOverride ?? formInstance.control._defaultValues[name]
diff --git a/app/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx b/app/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
index 434744036892..59fd6464f267 100644
--- a/app/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
+++ b/app/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
@@ -9,13 +9,14 @@ import * as portal from '#/components/Portal'
 import * as suspense from '#/components/Suspense'
 
 import * as mergeRefs from '#/utilities/mergeRefs'
-import * as twv from '#/utilities/tailwindVariants'
 
+import type { VariantProps } from '#/utilities/tailwindVariants'
+import { tv } from '#/utilities/tailwindVariants'
 import * as dialogProvider from './DialogProvider'
 import * as dialogStackProvider from './DialogStackProvider'
 import type * as types from './types'
 import * as utlities from './utilities'
-import * as variants from './variants'
+import { DIALOG_BACKGROUND } from './variants'
 
 // =================
 // === Constants ===
@@ -25,10 +26,10 @@ import * as variants from './variants'
  */
 export interface DialogProps
   extends types.DialogProps,
-    Omit<twv.VariantProps<typeof DIALOG_STYLES>, 'scrolledToTop'> {}
+    Omit<VariantProps<typeof DIALOG_STYLES>, 'scrolledToTop'> {}
 
-const OVERLAY_STYLES = twv.tv({
-  base: 'fixed inset-0 isolate flex items-center justify-center bg-black/[25%]',
+const OVERLAY_STYLES = tv({
+  base: 'fixed inset-0 isolate flex items-center justify-center bg-primary/20',
   variants: {
     isEntering: { true: 'animate-in fade-in duration-200 ease-out' },
     isExiting: { true: 'animate-out fade-out duration-200 ease-in' },
@@ -36,17 +37,25 @@ const OVERLAY_STYLES = twv.tv({
   },
 })
 
-const MODAL_STYLES = twv.tv({
-  base: 'fixed inset-0 flex items-center justify-center text-center text-xs text-primary p-4',
+const MODAL_STYLES = tv({
+  base: 'fixed inset-0 flex items-center justify-center text-xs text-primary',
   variants: {
-    isEntering: { true: 'animate-in slide-in-from-top-1 ease-out duration-200' },
-    isExiting: { true: 'animate-out slide-out-to-top-1 ease-in duration-200' },
+    isEntering: { true: 'animate-in ease-out duration-200' },
+    isExiting: { true: 'animate-out ease-in duration-200' },
+    type: { modal: '', fullscreen: 'p-3.5' },
   },
+  compoundVariants: [
+    { type: 'modal', isEntering: true, class: 'slide-in-from-top-1' },
+    { type: 'modal', isExiting: true, class: 'slide-out-to-top-1' },
+    { type: 'fullscreen', isEntering: true, class: 'zoom-in-[1.015]' },
+    { type: 'fullscreen', isExiting: true, class: 'zoom-out-[1.015]' },
+  ],
 })
 
-const DIALOG_STYLES = twv.tv({
-  extend: variants.DIALOG_STYLES,
-  base: 'w-full overflow-y-auto',
+const DIALOG_STYLES = tv({
+  base: DIALOG_BACKGROUND({
+    className: 'w-full max-w-full flex flex-col text-left align-middle shadow-xl',
+  }),
   variants: {
     type: {
       modal: {
@@ -74,6 +83,16 @@ const DIALOG_STYLES = twv.tv({
         content: 'isolate',
       },
     },
+    rounded: {
+      none: { base: '' },
+      small: { base: 'rounded-sm' },
+      medium: { base: 'rounded-md' },
+      large: { base: 'rounded-lg' },
+      xlarge: { base: 'rounded-xl' },
+      xxlarge: { base: 'rounded-2xl', content: 'scroll-offset-edge-2xl' },
+      xxxlarge: { base: 'rounded-3xl', content: 'scroll-offset-edge-4xl' },
+      xxxxlarge: { base: 'rounded-4xl', content: 'scroll-offset-edge-6xl' },
+    },
     /**
      * The size of the dialog.
      * Only applies to the `modal` type.
@@ -100,10 +119,10 @@ const DIALOG_STYLES = twv.tv({
   },
   slots: {
     header:
-      'sticky top-0 grid grid-cols-[1fr_auto_1fr] items-center border-b border-primary/10 transition-[border-color] duration-150',
+      'sticky z-1 top-0 grid grid-cols-[1fr_auto_1fr] items-center border-b border-primary/10 transition-[border-color] duration-150',
     closeButton: 'col-start-1 col-end-1 mr-auto',
     heading: 'col-start-2 col-end-2 my-0 text-center',
-    content: 'relative flex-auto',
+    content: 'relative flex-auto overflow-y-auto max-h-[inherit]',
   },
   compoundVariants: [
     { type: 'modal', size: 'small', class: 'max-w-sm' },
@@ -120,6 +139,7 @@ const DIALOG_STYLES = twv.tv({
     hideCloseButton: false,
     size: 'medium',
     padding: 'medium',
+    rounded: 'xxlarge',
   },
 })
 
@@ -144,8 +164,9 @@ export function Dialog(props: DialogProps) {
     testId = 'dialog',
     size,
     rounded,
-    padding,
+    padding = type === 'modal' ? 'medium' : 'xlarge',
     fitContent,
+    variants = DIALOG_STYLES,
     ...ariaDialogProps
   } = props
 
@@ -155,11 +176,13 @@ export function Dialog(props: DialogProps) {
    * Handles the scroll event on the dialog content.
    */
   const handleScroll = (scrollTop: number) => {
-    if (scrollTop > 0) {
-      setIsScrolledToTop(false)
-    } else {
-      setIsScrolledToTop(true)
-    }
+    React.startTransition(() => {
+      if (scrollTop > 0) {
+        setIsScrolledToTop(false)
+      } else {
+        setIsScrolledToTop(true)
+      }
+    })
   }
 
   const dialogId = aria.useId()
@@ -169,7 +192,7 @@ export function Dialog(props: DialogProps) {
   const overlayState = React.useRef<aria.OverlayTriggerState | null>(null)
   const root = portal.useStrictPortalContext()
 
-  const styles = DIALOG_STYLES({
+  const styles = variants({
     className,
     type,
     rounded,
@@ -200,11 +223,7 @@ export function Dialog(props: DialogProps) {
   return (
     <aria.ModalOverlay
       className={({ isEntering, isExiting }) =>
-        OVERLAY_STYLES({
-          isEntering,
-          isExiting,
-          blockInteractions: !isDismissable,
-        })
+        OVERLAY_STYLES({ isEntering, isExiting, blockInteractions: !isDismissable })
       }
       isDismissable={isDismissable}
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
@@ -218,7 +237,7 @@ export function Dialog(props: DialogProps) {
 
         return (
           <aria.Modal
-            className={MODAL_STYLES}
+            className={({ isEntering, isExiting }) => MODAL_STYLES({ type, isEntering, isExiting })}
             isDismissable={isDismissable}
             isKeyboardDismissDisabled={isKeyboardDismissDisabled}
             UNSTABLE_portalContainer={root}
@@ -252,25 +271,23 @@ export function Dialog(props: DialogProps) {
                 {(opts) => {
                   return (
                     <dialogProvider.DialogProvider value={{ close: opts.close, dialogId }}>
-                      {((!hideCloseButton && closeButton !== 'floating') || title != null) && (
-                        <aria.Header className={styles.header({ scrolledToTop: isScrolledToTop })}>
-                          <ariaComponents.CloseButton
-                            className={styles.closeButton()}
-                            onPress={opts.close}
-                          />
+                      <aria.Header className={styles.header({ scrolledToTop: isScrolledToTop })}>
+                        <ariaComponents.CloseButton
+                          className={styles.closeButton()}
+                          onPress={opts.close}
+                        />
 
-                          {title != null && (
-                            <ariaComponents.Text.Heading
-                              id={titleId}
-                              level={2}
-                              className={styles.heading()}
-                              weight="semibold"
-                            >
-                              {title}
-                            </ariaComponents.Text.Heading>
-                          )}
-                        </aria.Header>
-                      )}
+                        {title != null && (
+                          <ariaComponents.Text.Heading
+                            id={titleId}
+                            level={2}
+                            className={styles.heading()}
+                            weight="semibold"
+                          >
+                            {title}
+                          </ariaComponents.Text.Heading>
+                        )}
+                      </aria.Header>
 
                       <div
                         ref={(ref) => {
diff --git a/app/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx b/app/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx
index f69c25dfae82..2b099e9b80e9 100644
--- a/app/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx
+++ b/app/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx
@@ -5,7 +5,8 @@ import * as modalProvider from '#/providers/ModalProvider'
 
 import * as aria from '#/components/aria'
 
-import { AnimatePresence, motion } from 'framer-motion'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useOverlayTriggerState } from 'react-stately'
 
 const PLACEHOLDER = <div />
 
@@ -13,7 +14,9 @@ const PLACEHOLDER = <div />
  * Props passed to the render function of a {@link DialogTrigger}.
  */
 export interface DialogTriggerRenderProps {
-  readonly isOpened: boolean
+  readonly isOpen: boolean
+  readonly close: () => void
+  readonly open: () => void
 }
 /**
  * Props for a {@link DialogTrigger}.
@@ -26,55 +29,54 @@ export interface DialogTriggerProps extends Omit<aria.DialogTriggerProps, 'child
     React.ReactElement,
     React.ReactElement | ((props: DialogTriggerRenderProps) => React.ReactElement),
   ]
+  readonly onOpen?: () => void
+  readonly onClose?: () => void
 }
 
 /** A DialogTrigger opens a dialog when a trigger element is pressed. */
 export function DialogTrigger(props: DialogTriggerProps) {
-  const { children, onOpenChange, ...triggerProps } = props
+  const { children, onOpenChange, onOpen = () => {}, onClose = () => {} } = props
+
+  const state = useOverlayTriggerState(props)
 
-  const [isOpened, setIsOpened] = React.useState(false)
   const { setModal, unsetModal } = modalProvider.useSetModal()
 
-  const onOpenChangeInternal = React.useCallback(
-    (opened: boolean) => {
-      if (opened) {
-        // We're using a placeholder here just to let the rest of the code know that the modal
-        // is open.
-        setModal(PLACEHOLDER)
-      } else {
-        unsetModal()
-      }
-
-      setIsOpened(opened)
-      onOpenChange?.(opened)
-    },
-    [setModal, unsetModal, onOpenChange],
-  )
+  const onOpenStableCallback = useEventCallback(onOpen)
+  const onCloseStableCallback = useEventCallback(onClose)
 
-  const renderProps = {
-    isOpened,
-  } satisfies DialogTriggerRenderProps
+  const onOpenChangeInternal = useEventCallback((opened: boolean) => {
+    if (opened) {
+      // We're using a placeholder here just to let the rest of the code know that the modal
+      // is open.
+      setModal(PLACEHOLDER)
+    } else {
+      unsetModal()
+      onCloseStableCallback()
+    }
+
+    state.setOpen(opened)
+    onOpenChange?.(opened)
+  })
+
+  React.useEffect(() => {
+    if (state.isOpen) {
+      onOpenStableCallback()
+    }
+  }, [state.isOpen, onOpenStableCallback])
 
   const [trigger, dialog] = children
 
+  const renderProps = {
+    isOpen: state.isOpen,
+    close: state.close.bind(state),
+    open: state.open.bind(state),
+  } satisfies DialogTriggerRenderProps
+
   return (
-    <aria.DialogTrigger onOpenChange={onOpenChangeInternal} {...triggerProps}>
+    <aria.DialogTrigger {...state} onOpenChange={onOpenChangeInternal}>
       {trigger}
 
-      {/* We're using AnimatePresence here to animate the dialog in and out. */}
-      <AnimatePresence>
-        {isOpened && (
-          <motion.div
-            style={{ display: 'none' }}
-            initial={{ opacity: 1 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 1 }}
-          >
-            {typeof dialog === 'function' ? dialog(renderProps) : dialog}
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {typeof dialog === 'function' ? dialog(renderProps) : dialog}
     </aria.DialogTrigger>
   )
 }
diff --git a/app/dashboard/src/components/AriaComponents/Dialog/variants.ts b/app/dashboard/src/components/AriaComponents/Dialog/variants.ts
index b803e20e6787..c8f7ea6bb3be 100644
--- a/app/dashboard/src/components/AriaComponents/Dialog/variants.ts
+++ b/app/dashboard/src/components/AriaComponents/Dialog/variants.ts
@@ -14,19 +14,4 @@ export const DIALOG_BACKGROUND = twv.tv({
 export const DIALOG_STYLES = twv.tv({
   extend: DIALOG_BACKGROUND,
   base: 'flex flex-col text-left align-middle shadow-xl',
-  variants: {
-    rounded: {
-      none: '',
-      small: 'rounded-sm',
-      medium: 'rounded-md',
-      large: 'rounded-lg',
-      xlarge: 'rounded-xl',
-      xxlarge: 'rounded-2xl',
-      xxxlarge: 'rounded-3xl',
-      xxxxlarge: 'rounded-4xl',
-    },
-  },
-  defaultVariants: {
-    rounded: 'xxlarge',
-  },
 })
diff --git a/app/dashboard/src/components/AriaComponents/Form/Form.tsx b/app/dashboard/src/components/AriaComponents/Form/Form.tsx
index ef2ebfb91e4c..babc31264157 100644
--- a/app/dashboard/src/components/AriaComponents/Form/Form.tsx
+++ b/app/dashboard/src/components/AriaComponents/Form/Form.tsx
@@ -1,18 +1,11 @@
 /** @file Form component. */
 import * as React from 'react'
 
-import * as sentry from '@sentry/react'
-import * as reactQuery from '@tanstack/react-query'
-import * as reactHookForm from 'react-hook-form'
-
-import * as offlineHooks from '#/hooks/offlineHooks'
-
 import * as textProvider from '#/providers/TextProvider'
 
 import * as aria from '#/components/aria'
 
-import * as errorUtils from '#/utilities/error'
-
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { forwardRef } from '#/utilities/react'
 import * as dialog from '../Dialog'
 import * as components from './components'
@@ -24,27 +17,25 @@ import type * as types from './types'
  * Provides better error handling and form state management and better UX out of the box. */
 // There is no way to avoid type casting here
 // eslint-disable-next-line no-restricted-syntax
-export const Form = forwardRef(function Form<Schema extends components.TSchema>(
-  props: types.FormProps<Schema>,
-  ref: React.Ref<HTMLFormElement>,
-) {
+export const Form = forwardRef(function Form<
+  Schema extends components.TSchema,
+  SubmitResult = void,
+>(props: types.FormProps<Schema, SubmitResult>, ref: React.Ref<HTMLFormElement>) {
   /** Input values for this form. */
   type FieldValues = components.FieldValues<Schema>
   const formId = React.useId()
 
   const {
     children,
-    onSubmit,
     formRef,
     form,
-    formOptions = {},
+    formOptions,
     className,
     style,
     onSubmitted = () => {},
     onSubmitSuccess = () => {},
     onSubmitFailed = () => {},
     id = formId,
-    testId,
     schema,
     defaultValues,
     gap,
@@ -55,78 +46,47 @@ export const Form = forwardRef(function Form<Schema extends components.TSchema>(
 
   const { getText } = textProvider.useText()
 
-  if (defaultValues) {
-    formOptions.defaultValues = defaultValues
-  }
-
-  const innerForm = components.useForm(form ?? { shouldFocusError: true, schema, ...formOptions })
-
-  React.useImperativeHandle(formRef, () => innerForm, [innerForm])
-
   const dialogContext = dialog.useDialogContext()
 
-  const formMutation = reactQuery.useMutation({
-    // We use template literals to make the mutation key more readable in the devtools
-    // This mutation exists only for debug purposes - React Query dev tools record the mutation,
-    // the result, and the variables(form fields).
-    // In general, prefer using object literals for the mutation key.
-    mutationKey: ['Form submission', `testId: ${testId}`, `id: ${id}`],
-    mutationFn: async (fieldValues: FieldValues) => {
-      try {
-        await onSubmit?.(fieldValues, innerForm)
-
-        if (method === 'dialog') {
-          dialogContext?.close()
-        }
-      } catch (error) {
-        const isJSError = errorUtils.isJSError(error)
-
-        if (isJSError) {
-          sentry.captureException(error, {
-            contexts: { form: { values: fieldValues } },
-          })
-        }
-
-        const message =
-          isJSError ?
-            getText('arbitraryFormErrorMessage')
-          : errorUtils.tryGetMessage(error, getText('arbitraryFormErrorMessage'))
-
-        innerForm.setError('root.submit', { message })
-
-        // We need to throw the error to make the mutation fail
-        // eslint-disable-next-line no-restricted-syntax
-        throw error
-      }
-    },
-    onError: onSubmitFailed,
-    onSuccess: onSubmitSuccess,
-    onSettled: onSubmitted,
-  })
+  const onSubmit = useEventCallback(
+    async (fieldValues: types.FieldValues<Schema>, formInstance: types.UseFormReturn<Schema>) => {
+      // This is SAFE because we're passing the result transparently, and it's typed outside
+      // eslint-disable-next-line no-restricted-syntax
+      const result = (await props.onSubmit?.(fieldValues, formInstance)) as SubmitResult
 
-  // There is no way to avoid type casting here
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any,no-restricted-syntax,@typescript-eslint/no-unsafe-argument
-  const formOnSubmit = innerForm.handleSubmit(formMutation.mutateAsync as any)
+      if (method === 'dialog') {
+        dialogContext?.close()
+      }
 
-  const { isOffline } = offlineHooks.useOffline()
+      return result
+    },
+  )
 
-  offlineHooks.useOfflineChange(
-    (offline) => {
-      if (offline) {
-        innerForm.setError('root.offline', { message: getText('unavailableOffline') })
-      } else {
-        innerForm.clearErrors('root.offline')
-      }
+  const testId = props['testId'] ?? props['data-testid'] ?? 'form'
+
+  const innerForm = components.useForm<Schema, SubmitResult>(
+    form ?? {
+      ...formOptions,
+      ...(defaultValues ? { defaultValues } : {}),
+      schema,
+      canSubmitOffline,
+      onSubmit,
+      onSubmitFailed,
+      onSubmitSuccess,
+      onSubmitted,
+      shouldFocusError: true,
+      debugName: `Form ${testId} id: ${id}`,
     },
-    { isDisabled: canSubmitOffline },
   )
 
+  React.useImperativeHandle(formRef, () => innerForm, [innerForm])
+
   const base = styles.FORM_STYLES({
     className: typeof className === 'function' ? className(innerForm) : className,
     gap,
   })
 
-  const { formState, setError } = innerForm
+  const { formState } = innerForm
 
   // eslint-disable-next-line no-restricted-syntax
   const errors = Object.fromEntries(
@@ -136,39 +96,30 @@ export const Form = forwardRef(function Form<Schema extends components.TSchema>(
     }),
   ) as Record<keyof FieldValues, string>
 
+  const values = components.useWatch({ control: innerForm.control })
+
   return (
-    <>
-      <form
-        id={id}
-        ref={ref}
-        onSubmit={(event) => {
-          event.preventDefault()
-          event.stopPropagation()
-
-          if (isOffline && !canSubmitOffline) {
-            setError('root.offline', { message: getText('unavailableOffline') })
-          } else {
-            void formOnSubmit(event)
-          }
-        }}
-        className={base}
-        style={typeof style === 'function' ? style(innerForm) : style}
-        noValidate
-        data-testid={testId}
-        {...formProps}
-      >
-        <aria.FormValidationContext.Provider value={errors}>
-          <reactHookForm.FormProvider {...innerForm}>
-            {typeof children === 'function' ?
-              children({ ...innerForm, form: innerForm })
-            : children}
-          </reactHookForm.FormProvider>
-        </aria.FormValidationContext.Provider>
-      </form>
-    </>
+    <form
+      {...formProps}
+      id={id}
+      ref={ref}
+      className={base}
+      style={typeof style === 'function' ? style(innerForm) : style}
+      noValidate
+      data-testid={testId}
+      onSubmit={innerForm.submit}
+    >
+      <aria.FormValidationContext.Provider value={errors}>
+        <components.FormProvider form={innerForm}>
+          {typeof children === 'function' ?
+            children({ ...innerForm, form: innerForm, values })
+          : children}
+        </components.FormProvider>
+      </aria.FormValidationContext.Provider>
+    </form>
   )
-}) as unknown as (<Schema extends components.TSchema>(
-  props: React.RefAttributes<HTMLFormElement> & types.FormProps<Schema>,
+}) as unknown as (<Schema extends components.TSchema, SubmitResult = void>(
+  props: React.RefAttributes<HTMLFormElement> & types.FormProps<Schema, SubmitResult>,
 ) => React.JSX.Element) & {
   /* eslint-disable @typescript-eslint/naming-convention */
   schema: typeof components.schema
@@ -183,7 +134,9 @@ export const Form = forwardRef(function Form<Schema extends components.TSchema>(
   FIELD_STYLES: typeof components.FIELD_STYLES
   useFormContext: typeof components.useFormContext
   useOptionalFormContext: typeof components.useOptionalFormContext
-  useWatch: typeof reactHookForm.useWatch
+  useWatch: typeof components.useWatch
+  useFieldRegister: typeof components.useFieldRegister
+  useFieldState: typeof components.useFieldState
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
@@ -198,5 +151,7 @@ Form.useFormContext = components.useFormContext
 Form.useOptionalFormContext = components.useOptionalFormContext
 Form.Field = components.Field
 Form.Controller = components.Controller
-Form.useWatch = reactHookForm.useWatch
+Form.useWatch = components.useWatch
 Form.FIELD_STYLES = components.FIELD_STYLES
+Form.useFieldRegister = components.useFieldRegister
+Form.useFieldState = components.useFieldState
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/Field.tsx b/app/dashboard/src/components/AriaComponents/Form/components/Field.tsx
index eeeb958e4403..f2a52394d47f 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/Field.tsx
+++ b/app/dashboard/src/components/AriaComponents/Form/components/Field.tsx
@@ -11,8 +11,8 @@ import { forwardRef } from '#/utilities/react'
 import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 import type { Path } from 'react-hook-form'
 import * as text from '../../Text'
+import { Form } from '../Form'
 import type * as types from './types'
-import * as formContext from './useFormContext'
 
 /**
  * Props for Field component
@@ -44,6 +44,7 @@ export interface FieldChildrenRenderProps {
   readonly isDirty: boolean
   readonly isTouched: boolean
   readonly isValidating: boolean
+  readonly hasError: boolean
   readonly error?: string | undefined
 }
 
@@ -73,36 +74,29 @@ export const Field = forwardRef(function Field<Schema extends types.TSchema>(
   ref: React.ForwardedRef<HTMLFieldSetElement>,
 ) {
   const {
-    // eslint-disable-next-line no-restricted-syntax
-    form = formContext.useFormContext() as unknown as types.FormInstance<Schema>,
-    isInvalid,
     children,
     className,
     label,
     description,
     fullWidth,
     error,
-    name,
     isHidden,
+    isInvalid = false,
     isRequired = false,
     variants = FIELD_STYLES,
   } = props
 
-  const fieldState = form.getFieldState(name)
-
   const labelId = React.useId()
   const descriptionId = React.useId()
   const errorId = React.useId()
 
-  const invalid = isInvalid === true || fieldState.invalid
+  const fieldState = Form.useFieldState(props)
 
-  const classes = variants({
-    fullWidth,
-    isInvalid: invalid,
-    isHidden,
-  })
+  const invalid = isInvalid || fieldState.hasError
+
+  const classes = variants({ fullWidth, isInvalid: invalid, isHidden })
 
-  const hasError = (error ?? fieldState.error?.message) != null
+  const hasError = (error ?? fieldState.error) != null
 
   return (
     <fieldset
@@ -138,7 +132,8 @@ export const Field = forwardRef(function Field<Schema extends types.TSchema>(
               isDirty: fieldState.isDirty,
               isTouched: fieldState.isTouched,
               isValidating: fieldState.isValidating,
-              error: fieldState.error?.message,
+              hasError: fieldState.hasError,
+              error: fieldState.error,
             })
           : children}
         </div>
@@ -152,7 +147,7 @@ export const Field = forwardRef(function Field<Schema extends types.TSchema>(
 
       {hasError && (
         <span data-testid="error" id={errorId} className={classes.error()}>
-          {error ?? fieldState.error?.message}
+          {error ?? fieldState.error}
         </span>
       )}
     </fieldset>
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/FormError.tsx b/app/dashboard/src/components/AriaComponents/Form/components/FormError.tsx
index 77f845153a64..9bc171964037 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/FormError.tsx
+++ b/app/dashboard/src/components/AriaComponents/Form/components/FormError.tsx
@@ -10,8 +10,8 @@ import * as textProvider from '#/providers/TextProvider'
 
 import * as reactAriaComponents from '#/components/AriaComponents'
 
+import * as formContext from './FormProvider'
 import type * as types from './types'
-import * as formContext from './useFormContext'
 
 /**
  * Props for the FormError component.
@@ -26,14 +26,9 @@ export interface FormErrorProps extends Omit<reactAriaComponents.AlertProps, 'ch
  * Form error component.
  */
 export function FormError(props: FormErrorProps) {
-  const {
-    form = formContext.useFormContext(),
-    size = 'large',
-    variant = 'error',
-    rounded = 'large',
-    ...alertProps
-  } = props
+  const { size = 'large', variant = 'error', rounded = 'large', ...alertProps } = props
 
+  const form = formContext.useFormContext(props.form)
   const { formState } = form
   const { errors } = formState
   const { getText } = textProvider.useText()
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/FormProvider.tsx b/app/dashboard/src/components/AriaComponents/Form/components/FormProvider.tsx
new file mode 100644
index 000000000000..7e7843e6990d
--- /dev/null
+++ b/app/dashboard/src/components/AriaComponents/Form/components/FormProvider.tsx
@@ -0,0 +1,72 @@
+/**
+ * @file
+ *
+ * Context that injects form instance into the component tree.
+ */
+import type { PropsWithChildren } from 'react'
+import { createContext, useContext } from 'react'
+import invariant from 'tiny-invariant'
+import type * as types from './types'
+import type { FormInstance, FormInstanceValidated } from './types'
+
+/**
+ * Context type for the form provider.
+ */
+interface FormContextType<Schema extends types.TSchema> {
+  readonly form: types.UseFormReturn<Schema>
+}
+
+// at this moment, we don't know the type of the form context
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FormContext = createContext<FormContextType<any> | null>(null)
+
+/**
+ * Provides the form instance to the component tree.
+ */
+export function FormProvider<Schema extends types.TSchema>(
+  props: FormContextType<Schema> & PropsWithChildren,
+) {
+  const { children, form } = props
+
+  return (
+    // eslint-disable-next-line no-restricted-syntax,@typescript-eslint/no-explicit-any
+    <FormContext.Provider value={{ form: form as types.UseFormReturn<any> }}>
+      {children}
+    </FormContext.Provider>
+  )
+}
+
+/**
+ * Returns the form instance from the context.
+ */
+export function useFormContext<Schema extends types.TSchema>(
+  form?: FormInstanceValidated<Schema> | undefined,
+): FormInstance<Schema> {
+  if (form != null && 'control' in form) {
+    return form
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const ctx = useContext(FormContext)
+
+    invariant(ctx, 'FormContext not found')
+
+    // This is safe, as it's we pass the value transparently and it's typed outside
+    // eslint-disable-next-line no-restricted-syntax
+    return ctx.form as unknown as types.UseFormReturn<Schema>
+  }
+}
+
+/**
+ * Returns the form instance from the context, or null if the context is not available.
+ */
+export function useOptionalFormContext<
+  Form extends FormInstanceValidated<Schema> | undefined,
+  Schema extends types.TSchema,
+>(form?: Form): Form extends undefined ? FormInstance<Schema> | null : FormInstance<Schema> {
+  try {
+    return useFormContext<Schema>(form)
+  } catch {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return null!
+  }
+}
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/Reset.tsx b/app/dashboard/src/components/AriaComponents/Form/components/Reset.tsx
index 05d10e6e80e8..67f91a82bede 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/Reset.tsx
+++ b/app/dashboard/src/components/AriaComponents/Form/components/Reset.tsx
@@ -7,8 +7,9 @@ import * as React from 'react'
 
 import * as ariaComponents from '#/components/AriaComponents'
 
+import { useText } from '#/providers/TextProvider'
+import * as formContext from './FormProvider'
 import type * as types from './types'
-import * as formContext from './useFormContext'
 
 /**
  * Props for the Reset component.
@@ -29,14 +30,16 @@ export interface ResetProps extends Omit<ariaComponents.ButtonProps, 'loading'>
  * Reset button for forms.
  */
 export function Reset(props: ResetProps): React.JSX.Element {
+  const { getText } = useText()
   const {
-    form = formContext.useFormContext(),
-    variant = 'cancel',
+    variant = 'ghost-fading',
     size = 'medium',
     testId = 'form-reset-button',
+    children = getText('reset'),
     ...buttonProps
   } = props
-  const { formState } = form
+
+  const { formState } = formContext.useFormContext(props.form)
 
   return (
     <ariaComponents.Button
@@ -48,6 +51,7 @@ export function Reset(props: ResetProps): React.JSX.Element {
       size={size}
       isDisabled={formState.isSubmitting || !formState.isDirty}
       testId={testId}
+      children={children}
     />
   )
 }
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/Submit.tsx b/app/dashboard/src/components/AriaComponents/Form/components/Submit.tsx
index a6505d85d9c5..b87b2f1ffe1a 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/Submit.tsx
+++ b/app/dashboard/src/components/AriaComponents/Form/components/Submit.tsx
@@ -10,8 +10,8 @@ import * as textProvider from '#/providers/TextProvider'
 
 import * as ariaComponents from '#/components/AriaComponents'
 
+import * as formContext from './FormProvider'
 import type * as types from './types'
-import * as formContext from './useFormContext'
 
 /**
  * Additional props for the Submit component.
@@ -48,22 +48,23 @@ export type SubmitProps = Omit<ariaComponents.ButtonProps, 'href' | 'variant'> &
  * Manages the form state and displays a loading spinner when the form is submitting.
  */
 export function Submit(props: SubmitProps): React.JSX.Element {
+  const { getText } = textProvider.useText()
+
   const {
-    form = formContext.useFormContext(),
-    variant = 'submit',
     size = 'medium',
-    testId = 'form-submit-button',
     formnovalidate = false,
     loading = false,
-    children,
+    children = formnovalidate ? getText('cancel') : getText('submit'),
+    variant = formnovalidate ? 'ghost-fading' : 'submit',
+    testId = formnovalidate ? 'form-cancel-button' : 'form-submit-button',
     ...buttonProps
   } = props
 
-  const { getText } = textProvider.useText()
   const dialogContext = ariaComponents.useDialogContext()
+  const form = formContext.useFormContext(props.form)
   const { formState } = form
 
-  const isLoading = loading || formState.isSubmitting
+  const isLoading = formnovalidate ? false : loading || formState.isSubmitting
   const type = formnovalidate || isLoading ? 'button' : 'submit'
 
   return (
@@ -82,7 +83,7 @@ export function Submit(props: SubmitProps): React.JSX.Element {
         }
       }}
     >
-      {children ?? getText('submit')}
+      {children}
     </ariaComponents.Button>
   )
 }
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/index.ts b/app/dashboard/src/components/AriaComponents/Form/components/index.ts
index 3bd2ded7df08..2ccfc60f65ab 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/index.ts
+++ b/app/dashboard/src/components/AriaComponents/Form/components/index.ts
@@ -3,14 +3,16 @@
  *
  * Barrel file for form components.
  */
-export { Controller } from 'react-hook-form'
+export { Controller, useWatch } from 'react-hook-form'
 export * from './Field'
 export * from './FormError'
+export * from './FormProvider'
 export * from './Reset'
 export * from './schema'
 export * from './Submit'
 export * from './types'
 export * from './useField'
+export * from './useFieldRegister'
+export * from './useFieldState'
 export * from './useForm'
-export * from './useFormContext'
 export * from './useFormSchema'
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/types.ts b/app/dashboard/src/components/AriaComponents/Form/components/types.ts
index 13ebc22299df..f840595faeb0 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/types.ts
+++ b/app/dashboard/src/components/AriaComponents/Form/components/types.ts
@@ -7,6 +7,7 @@ import type * as React from 'react'
 import type * as reactHookForm from 'react-hook-form'
 import type * as z from 'zod'
 
+import type { FormEvent } from 'react'
 import type * as schemaModule from './schema'
 
 /** The type of the inputs to the form, used for UI inputs. */
@@ -31,15 +32,61 @@ export type TSchema =
   | z.ZodEffects<z.AnyZodObject>
   | z.ZodEffects<z.ZodEffects<z.AnyZodObject>>
 
+/**
+ * OnSubmitCallbacks type.
+ */
+export interface OnSubmitCallbacks<Schema extends TSchema, SubmitResult = void> {
+  readonly onSubmit?:
+    | ((
+        values: FieldValues<Schema>,
+        form: UseFormReturn<Schema>,
+      ) => Promise<SubmitResult> | SubmitResult)
+    | undefined
+
+  readonly onSubmitFailed?:
+    | ((
+        error: unknown,
+        values: FieldValues<Schema>,
+        form: UseFormReturn<Schema>,
+      ) => Promise<void> | void)
+    | undefined
+  readonly onSubmitSuccess?:
+    | ((
+        data: SubmitResult,
+        values: FieldValues<Schema>,
+        form: UseFormReturn<Schema>,
+      ) => Promise<void> | void)
+    | undefined
+  readonly onSubmitted?:
+    | ((
+        data: SubmitResult | undefined,
+        error: unknown,
+        values: FieldValues<Schema>,
+        form: UseFormReturn<Schema>,
+      ) => Promise<void> | void)
+    | undefined
+}
+
 /**
  * Props for the useForm hook.
  */
-export interface UseFormProps<Schema extends TSchema>
+export interface UseFormProps<Schema extends TSchema, SubmitResult = void>
   extends Omit<
-    reactHookForm.UseFormProps<FieldValues<Schema>>,
-    'handleSubmit' | 'resetOptions' | 'resolver'
-  > {
+      reactHookForm.UseFormProps<FieldValues<Schema>>,
+      'handleSubmit' | 'resetOptions' | 'resolver'
+    >,
+    OnSubmitCallbacks<Schema, SubmitResult> {
   readonly schema: Schema | ((schema: typeof schemaModule.schema) => Schema)
+  /**
+   * Whether the form can submit offline.
+   * @default false
+   */
+  readonly canSubmitOffline?: boolean
+
+  /**
+   * Debug name for the form. Use it to identify the form in the tanstack query devtools.
+   */
+  readonly debugName?: string
 }
 
 /**
@@ -50,7 +97,6 @@ export type UseFormRegister<Schema extends TSchema> = <
 >(
   name: TFieldName,
   options?: reactHookForm.RegisterOptions<FieldValues<Schema>, TFieldName>,
-  // eslint-disable-next-line no-restricted-syntax
 ) => UseFormRegisterReturn<Schema, TFieldName>
 
 /**
@@ -64,9 +110,12 @@ export interface UseFormRegisterReturn<
   readonly onChange: <Value>(value: Value) => Promise<boolean | void>
   // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
   readonly onBlur: <Value>(value: Value) => Promise<boolean | void>
-  readonly isDisabled?: boolean
-  readonly isRequired?: boolean
-  readonly isInvalid?: boolean
+  readonly isDisabled: boolean
+  readonly isRequired: boolean
+  readonly isInvalid: boolean
+  readonly disabled: boolean
+  readonly required: boolean
+  readonly invalid: boolean
 }
 
 /**
@@ -74,8 +123,14 @@ export interface UseFormRegisterReturn<
  * @alias reactHookForm.UseFormReturn
  */
 export interface UseFormReturn<Schema extends TSchema>
-  extends reactHookForm.UseFormReturn<FieldValues<Schema>, unknown, TransformedValues<Schema>> {
+  extends Omit<
+    reactHookForm.UseFormReturn<FieldValues<Schema>, unknown, TransformedValues<Schema>>,
+    'onSubmit' | 'resetOptions' | 'resolver'
+  > {
   readonly register: UseFormRegister<Schema>
+  readonly submit: (event?: FormEvent<HTMLFormElement> | null | undefined) => Promise<void>
+  readonly schema: Schema
+  readonly setFormError: (error: string) => void
 }
 
 /**
@@ -113,6 +168,16 @@ export interface FormWithValueValidation<
     | undefined
 }
 
+/**
+ * Form instance type that has been validated.
+ * Cast validatable form type to FormInstance
+ */
+export type FormInstanceValidated<
+  Schema extends TSchema,
+  // We use any here because we want to bypass the type check for Error type as it won't be a case here
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/ban-types
+> = FormInstance<Schema> | (any[] & {})
+
 /**
  * Props for the Field component.
  */
@@ -148,3 +213,36 @@ export interface FieldProps {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   'aria-details'?: string | undefined
 }
+/**
+ * Base Props for a Form Field.
+ * @private
+ */
+export interface FormFieldProps<
+  BaseValueType,
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema>,
+> extends FormWithValueValidation<BaseValueType, Schema, TFieldName> {
+  readonly name: TFieldName
+  readonly value?: BaseValueType extends FieldValues<Schema> ? FieldValues<Schema>[TFieldName]
+  : never
+  readonly defaultValue?: FieldValues<Schema>[TFieldName] | undefined
+  readonly isDisabled?: boolean | undefined
+  readonly isRequired?: boolean | undefined
+  readonly isInvalid?: boolean | undefined
+}
+
+/**
+ * Field State Props
+ */
+export type FieldStateProps<
+  // eslint-disable-next-line no-restricted-syntax
+  BaseProps extends { value?: unknown },
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema>,
+> = FormFieldProps<BaseProps['value'], Schema, TFieldName> & {
+  // to avoid conflicts with the FormFieldProps we need to omit the FormFieldProps from the BaseProps
+  [K in keyof Omit<
+    BaseProps,
+    keyof FormFieldProps<BaseProps['value'], Schema, TFieldName>
+  >]: BaseProps[K]
+}
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/useField.ts b/app/dashboard/src/components/AriaComponents/Form/components/useField.ts
index f3bfb69d17c1..a6c8e7ced12f 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/useField.ts
+++ b/app/dashboard/src/components/AriaComponents/Form/components/useField.ts
@@ -5,8 +5,8 @@
  */
 import * as reactHookForm from 'react-hook-form'
 
+import * as formContext from './FormProvider'
 import type * as types from './types'
-import * as formContext from './useFormContext'
 
 /**
  * Options for {@link useField} hook.
@@ -29,24 +29,16 @@ export function useField<
   Schema extends types.TSchema,
   TFieldName extends types.FieldPath<Schema>,
 >(options: UseFieldOptions<BaseValueType, Schema, TFieldName>) {
-  const { form = formContext.useFormContext(), name, defaultValue, isDisabled = false } = options
+  const { name, defaultValue, isDisabled = false } = options
 
-  // This is safe, because the form is always passed either via the options or via the context.
-  // The assertion is needed because we use additional type validation for form instance and throw
-  // ts error if form does not pass the validation.
-  // eslint-disable-next-line no-restricted-syntax
-  const formInstance = form as types.FormInstance<Schema>
+  const formInstance = formContext.useFormContext(options.form)
 
   const { field, fieldState, formState } = reactHookForm.useController({
     name,
     disabled: isDisabled,
+    control: formInstance.control,
     ...(defaultValue != null ? { defaultValue } : {}),
   })
 
-  return {
-    field,
-    fieldState,
-    formState,
-    formInstance,
-  } as const
+  return { field, fieldState, formState, formInstance } as const
 }
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/useFieldRegister.ts b/app/dashboard/src/components/AriaComponents/Form/components/useFieldRegister.ts
new file mode 100644
index 000000000000..13413e2e812d
--- /dev/null
+++ b/app/dashboard/src/components/AriaComponents/Form/components/useFieldRegister.ts
@@ -0,0 +1,99 @@
+/**
+ * @file
+ *
+ * Form field registration hook.
+ * Use this hook to register a field in the form.
+ */
+import { useFormContext } from './FormProvider'
+import type {
+  FieldPath,
+  FieldValues,
+  FormFieldProps,
+  FormInstanceValidated,
+  TSchema,
+} from './types'
+
+/**
+ * Options for the useFieldRegister hook.
+ */
+export type UseFieldRegisterOptions<
+  BaseValueType extends { value?: unknown },
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema>,
+> = Omit<FormFieldProps<BaseValueType, Schema, TFieldName>, 'form'> & {
+  name: TFieldName
+  form?: FormInstanceValidated<Schema> | undefined
+  defaultValue?: FieldValues<Schema>[TFieldName] | undefined
+  min?: number | string | undefined
+  max?: number | string | undefined
+  minLength?: number | undefined
+  maxLength?: number | undefined
+  setValueAs?: ((value: unknown) => unknown) | undefined
+}
+
+/**
+ * Registers a field in the form.
+ */
+export function useFieldRegister<
+  BaseValueType extends { value?: unknown },
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema>,
+>(options: UseFieldRegisterOptions<BaseValueType, Schema, TFieldName>) {
+  const { name, min, max, minLength, maxLength, isRequired, isDisabled, form, setValueAs } = options
+
+  const formInstance = useFormContext(form)
+
+  const extractedValidationDetails = unsafe__extractValidationDetailsFromSchema<Schema, TFieldName>(
+    formInstance.schema,
+    name,
+  )
+
+  const fieldProps = formInstance.register(name, {
+    disabled: isDisabled ?? false,
+    required: isRequired ?? extractedValidationDetails?.required ?? false,
+    ...(setValueAs != null ? { setValueAs } : {}),
+    ...(extractedValidationDetails?.min != null ? { min: extractedValidationDetails.min } : {}),
+    ...(extractedValidationDetails?.max != null ? { min: extractedValidationDetails.max } : {}),
+    ...(min != null ? { min } : {}),
+    ...(max != null ? { max } : {}),
+    ...(minLength != null ? { minLength } : {}),
+    ...(maxLength != null ? { maxLength } : {}),
+  })
+
+  return { fieldProps, formInstance } as const
+}
+/**
+ * Tried to extract validation details from the schema.
+ */
+// This name is intentional to highlight that this function is unsafe and should be used with caution.
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function unsafe__extractValidationDetailsFromSchema<
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema>,
+>(schema: Schema, name: TFieldName) {
+  try {
+    if ('shape' in schema) {
+      if (name in schema.shape) {
+        // THIS is 100% unsafe, so we need to be very careful here
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
+        const fieldShape = schema.shape[name]
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+        const min: number | null = fieldShape.minLength
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+        const max: number | null = fieldShape.maxLength
+        const required = min != null && min > 0
+
+        // eslint-disable-next-line no-restricted-syntax
+        return { required, min, max } as const
+      }
+
+      // eslint-disable-next-line no-restricted-syntax
+      return null
+    }
+    // eslint-disable-next-line no-restricted-syntax
+    return null
+  } catch {
+    // eslint-disable-next-line no-restricted-syntax
+    return null
+  }
+}
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/useFieldState.ts b/app/dashboard/src/components/AriaComponents/Form/components/useFieldState.ts
new file mode 100644
index 000000000000..e1e2e74b2227
--- /dev/null
+++ b/app/dashboard/src/components/AriaComponents/Form/components/useFieldState.ts
@@ -0,0 +1,47 @@
+/**
+ * @file
+ *
+ * Hook to get the state of a field.
+ */
+import { useFormState } from 'react-hook-form'
+import { useFormContext } from './FormProvider'
+import type { FieldPath, FormInstanceValidated, TSchema } from './types'
+
+/**
+ * Options for the `useFieldState` hook.
+ */
+export interface UseFieldStateOptions<
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema>,
+> {
+  readonly name: TFieldName
+  readonly form?: FormInstanceValidated<Schema> | undefined
+}
+
+/**
+ * Hook to get the state of a field.
+ */
+export function useFieldState<Schema extends TSchema, TFieldName extends FieldPath<Schema>>(
+  options: UseFieldStateOptions<Schema, TFieldName>,
+) {
+  const { name } = options
+
+  const form = useFormContext(options.form)
+
+  const { errors, dirtyFields, isValidating, touchedFields } = useFormState({
+    control: form.control,
+    name,
+  })
+
+  const isDirty = name in dirtyFields
+  const isTouched = name in touchedFields
+  const error = errors[name]?.message?.toString()
+
+  return {
+    error,
+    isDirty,
+    isTouched,
+    isValidating,
+    hasError: error != null,
+  } as const
+}
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/useForm.ts b/app/dashboard/src/components/AriaComponents/Form/components/useForm.ts
index 5197a3b9f2cc..f1f55e94e8af 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/useForm.ts
+++ b/app/dashboard/src/components/AriaComponents/Form/components/useForm.ts
@@ -3,13 +3,18 @@
  *
  * A hook that returns a form instance.
  */
+import * as sentry from '@sentry/react'
 import * as React from 'react'
 
 import * as zodResolver from '@hookform/resolvers/zod'
 import * as reactHookForm from 'react-hook-form'
 import invariant from 'tiny-invariant'
 
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useOffline, useOfflineChange } from '#/hooks/offlineHooks'
 import { useText } from '#/providers/TextProvider'
+import * as errorUtils from '#/utilities/error'
+import { useMutation } from '@tanstack/react-query'
 import * as schemaModule from './schema'
 import type * as types from './types'
 
@@ -39,64 +44,73 @@ function mapValueOnEvent(value: unknown) {
  * But be careful, You should not switch between the two types of arguments.
  * Otherwise you'll be fired
  */
-export function useForm<Schema extends types.TSchema>(
-  optionsOrFormInstance: types.UseFormProps<Schema> | types.UseFormReturn<Schema>,
+export function useForm<Schema extends types.TSchema, SubmitResult = void>(
+  optionsOrFormInstance: types.UseFormProps<Schema, SubmitResult> | types.UseFormReturn<Schema>,
 ): types.UseFormReturn<Schema> {
   const { getText } = useText()
-  const initialTypePassed = React.useRef(getArgsType(optionsOrFormInstance))
+  const [initialTypePassed] = React.useState(() => getArgsType(optionsOrFormInstance))
 
   const argsType = getArgsType(optionsOrFormInstance)
 
   invariant(
-    initialTypePassed.current === argsType,
+    initialTypePassed === argsType,
     `
     Found a switch between form options and form instance. This is not allowed. Please use either form options or form instance and stick to it.\n\n
-    Initially passed: ${initialTypePassed.current}, Currently passed: ${argsType}.
+    Initially passed: ${initialTypePassed}, Currently passed: ${argsType}.
     `,
   )
 
   if ('formState' in optionsOrFormInstance) {
     return optionsOrFormInstance
   } else {
-    const { schema, ...options } = optionsOrFormInstance
+    const {
+      schema,
+      onSubmit,
+      canSubmitOffline = false,
+      onSubmitFailed,
+      onSubmitted,
+      onSubmitSuccess,
+      debugName,
+      ...options
+    } = optionsOrFormInstance
 
     const computedSchema = typeof schema === 'function' ? schema(schemaModule.schema) : schema
 
-    const formInstance = reactHookForm.useForm<
-      types.FieldValues<Schema>,
-      unknown,
-      types.TransformedValues<Schema>
-    >({
+    const formInstance = reactHookForm.useForm({
       ...options,
-      resolver: zodResolver.zodResolver(computedSchema, {
-        async: true,
-        errorMap: (issue) => {
-          switch (issue.code) {
-            case 'too_small':
-              if (issue.minimum === 0) {
+      resolver: zodResolver.zodResolver(
+        computedSchema,
+        {
+          async: true,
+          errorMap: (issue) => {
+            switch (issue.code) {
+              case 'too_small':
+                if (issue.minimum === 0) {
+                  return {
+                    message: getText('arbitraryFieldRequired'),
+                  }
+                } else {
+                  return {
+                    message: getText('arbitraryFieldTooSmall', issue.minimum.toString()),
+                  }
+                }
+              case 'too_big':
                 return {
-                  message: getText('arbitraryFieldRequired'),
+                  message: getText('arbitraryFieldTooLarge', issue.maximum.toString()),
                 }
-              } else {
+              case 'invalid_type':
                 return {
-                  message: getText('arbitraryFieldTooSmall', issue.minimum.toString()),
+                  message: getText('arbitraryFieldInvalid'),
                 }
-              }
-            case 'too_big':
-              return {
-                message: getText('arbitraryFieldTooLarge', issue.maximum.toString()),
-              }
-            case 'invalid_type':
-              return {
-                message: getText('arbitraryFieldInvalid'),
-              }
-            default:
-              return {
-                message: getText('arbitraryFieldInvalid'),
-              }
-          }
+              default:
+                return {
+                  message: getText('arbitraryFieldInvalid'),
+                }
+            }
+          },
         },
-      }),
+        { mode: 'async' },
+      ),
     })
 
     const register: types.UseFormRegister<Schema> = (name, opts) => {
@@ -110,9 +124,12 @@ export function useForm<Schema extends types.TSchema>(
 
       const result: types.UseFormRegisterReturn<Schema, typeof name> = {
         ...registered,
-        ...(registered.disabled != null ? { isDisabled: registered.disabled } : {}),
-        ...(registered.required != null ? { isRequired: registered.required } : {}),
+        disabled: registered.disabled ?? false,
+        isDisabled: registered.disabled ?? false,
+        invalid: !!formInstance.formState.errors[name],
         isInvalid: !!formInstance.formState.errors[name],
+        required: registered.required ?? false,
+        isRequired: registered.required ?? false,
         onChange,
         onBlur,
       }
@@ -120,19 +137,106 @@ export function useForm<Schema extends types.TSchema>(
       return result
     }
 
-    return {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const formMutation = useMutation({
+      // We use template literals to make the mutation key more readable in the devtools
+      // This mutation exists only for debug purposes - React Query dev tools record the mutation,
+      // the result, and the variables(form fields).
+      // In general, prefer using object literals for the mutation key.
+      mutationKey: ['Form submission', `debugName: ${debugName}`],
+      mutationFn: async (fieldValues: types.FieldValues<Schema>) => {
+        try {
+          // This is safe, because we transparently passing the result of the onSubmit function,
+          // and the type of the result is the same as the type of the SubmitResult.
+          // eslint-disable-next-line no-restricted-syntax
+          return (await onSubmit?.(fieldValues, form)) as SubmitResult
+        } catch (error) {
+          const isJSError = errorUtils.isJSError(error)
+
+          if (isJSError) {
+            sentry.captureException(error, {
+              contexts: { form: { values: fieldValues } },
+            })
+          }
+
+          const message =
+            isJSError ?
+              getText('arbitraryFormErrorMessage')
+            : errorUtils.tryGetMessage(error, getText('arbitraryFormErrorMessage'))
+
+          setFormError(message)
+          // We need to throw the error to make the mutation fail
+          // eslint-disable-next-line no-restricted-syntax
+          throw error
+        }
+      },
+      onError: (error, values) => onSubmitFailed?.(error, values, form),
+      onSuccess: (data, values) => onSubmitSuccess?.(data, values, form),
+      onSettled: (data, error, values) => onSubmitted?.(data, error, values, form),
+    })
+
+    // There is no way to avoid type casting here
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,no-restricted-syntax,@typescript-eslint/no-unsafe-argument
+    const formOnSubmit = formInstance.handleSubmit(formMutation.mutateAsync as any)
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { isOffline } = useOffline()
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useOfflineChange(
+      (offline) => {
+        if (offline) {
+          formInstance.setError('root.offline', { message: getText('unavailableOffline') })
+        } else {
+          formInstance.clearErrors('root.offline')
+        }
+      },
+      { isDisabled: canSubmitOffline },
+    )
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const submit = useEventCallback(
+      (event: React.FormEvent<HTMLFormElement> | null | undefined) => {
+        event?.preventDefault()
+        event?.stopPropagation()
+
+        if (isOffline && !canSubmitOffline) {
+          formInstance.setError('root.offline', { message: getText('unavailableOffline') })
+          return Promise.resolve()
+        } else {
+          if (event) {
+            return formOnSubmit(event)
+          } else {
+            return formOnSubmit()
+          }
+        }
+      },
+    )
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const setFormError = useEventCallback((error: string) => {
+      formInstance.setError('root.submit', { message: error })
+    })
+
+    const form: types.UseFormReturn<Schema> = {
       ...formInstance,
+      submit,
       control: { ...formInstance.control, register },
       register,
-    } satisfies types.UseFormReturn<Schema>
+      schema: computedSchema,
+      setFormError,
+      handleSubmit: formInstance.handleSubmit,
+    }
+
+    return form
   }
 }
 
 /**
  * Get the type of arguments passed to the useForm hook
  */
-function getArgsType<Schema extends types.TSchema>(
-  args: types.UseFormProps<Schema> | types.UseFormReturn<Schema>,
+function getArgsType<Schema extends types.TSchema, SubmitResult = void>(
+  args: types.UseFormProps<Schema, SubmitResult>,
 ) {
-  return 'formState' in args ? 'formInstance' : 'formOptions'
+  return 'formState' in args ? ('formInstance' as const) : ('formOptions' as const)
 }
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/useFormContext.tsx b/app/dashboard/src/components/AriaComponents/Form/components/useFormContext.tsx
deleted file mode 100644
index 490f7ebe738d..000000000000
--- a/app/dashboard/src/components/AriaComponents/Form/components/useFormContext.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @file
- *
- * This file is a wrapper around the react-hook-form useFormContext hook.
- */
-import * as reactHookForm from 'react-hook-form'
-
-/**
- * Returns the form instance from the context.
- */
-export function useFormContext() {
-  return reactHookForm.useFormContext()
-}
-
-/**
- * Returns the form instance from the context, or null if the context is not available.
- */
-export function useOptionalFormContext() {
-  try {
-    return useFormContext()
-  } catch {
-    return null
-  }
-}
diff --git a/app/dashboard/src/components/AriaComponents/Form/components/useFormSchema.tsx b/app/dashboard/src/components/AriaComponents/Form/components/useFormSchema.tsx
index ef5f2b47b63a..ede8698dfe12 100644
--- a/app/dashboard/src/components/AriaComponents/Form/components/useFormSchema.tsx
+++ b/app/dashboard/src/components/AriaComponents/Form/components/useFormSchema.tsx
@@ -3,8 +3,8 @@ import * as React from 'react'
 
 import * as callbackEventHooks from '#/hooks/eventCallbackHooks'
 
-import * as schemaComponent from '#/components/AriaComponents/Form/components/schema'
-import type * as types from '#/components/AriaComponents/Form/components/types'
+import * as schemaComponent from './schema'
+import type * as types from './types'
 
 // =====================
 // === useFormSchema ===
diff --git a/app/dashboard/src/components/AriaComponents/Form/types.ts b/app/dashboard/src/components/AriaComponents/Form/types.ts
index 28fe075b093e..30b767e3a02c 100644
--- a/app/dashboard/src/components/AriaComponents/Form/types.ts
+++ b/app/dashboard/src/components/AriaComponents/Form/types.ts
@@ -7,6 +7,8 @@ import type * as React from 'react'
 
 import type * as reactHookForm from 'react-hook-form'
 
+import type { DeepPartialSkipArrayKey } from 'react-hook-form'
+import type { TestIdProps } from '../types'
 import type * as components from './components'
 import type * as styles from './styles'
 
@@ -15,8 +17,11 @@ export type * from './components'
 /**
  * Props for the Form component
  */
-export type FormProps<Schema extends components.TSchema> = BaseFormProps<Schema> &
-  (FormPropsWithOptions<Schema> | FormPropsWithParentForm<Schema>)
+export type FormProps<
+  Schema extends components.TSchema,
+  SubmitResult = void,
+> = BaseFormProps<Schema> &
+  (FormPropsWithOptions<Schema, SubmitResult> | FormPropsWithParentForm<Schema>)
 
 /**
  * Base props for the Form component.
@@ -26,20 +31,8 @@ interface BaseFormProps<Schema extends components.TSchema>
       React.HTMLProps<HTMLFormElement>,
       'children' | 'className' | 'form' | 'onSubmit' | 'onSubmitCapture' | 'style'
     >,
-    styles.FormStyleProps {
-  /**
-   * The default values for the form fields
-   *
-   * __Note:__ Even though this is optional,
-   * it is recommended to provide default values and specify all fields defined in the schema.
-   * Otherwise Typescript fails to infer the correct type for the form values.
-   * This is a known limitation and we are working on a solution.
-   */
-  readonly defaultValues?: components.UseFormProps<Schema>['defaultValues']
-  readonly onSubmit?: (
-    values: components.TransformedValues<Schema>,
-    form: components.UseFormReturn<Schema>,
-  ) => unknown
+    Omit<styles.FormStyleProps, 'class' | 'className'>,
+    TestIdProps {
   readonly style?:
     | React.CSSProperties
     | ((props: components.UseFormReturn<Schema>) => React.CSSProperties)
@@ -48,17 +41,13 @@ interface BaseFormProps<Schema extends components.TSchema>
     | ((
         props: components.UseFormReturn<Schema> & {
           readonly form: components.UseFormReturn<Schema>
+          readonly values: DeepPartialSkipArrayKey<components.FieldValues<Schema>>
         },
       ) => React.ReactNode)
   readonly formRef?: React.MutableRefObject<components.UseFormReturn<Schema>>
 
   readonly className?: string | ((props: components.UseFormReturn<Schema>) => string)
 
-  readonly onSubmitFailed?: (error: unknown) => Promise<void> | void
-  readonly onSubmitSuccess?: () => Promise<void> | void
-  readonly onSubmitted?: () => Promise<void> | void
-
-  readonly testId?: string
   /**
    * When set to `dialog`, form submission will close the parent dialog on successful submission.
    */
@@ -76,16 +65,33 @@ interface FormPropsWithParentForm<Schema extends components.TSchema> {
   readonly form: components.UseFormReturn<Schema>
   readonly schema?: never
   readonly formOptions?: never
+  readonly defaultValues?: never
+  readonly onSubmit?: never
+  readonly onSubmitSuccess?: never
+  readonly onSubmitFailed?: never
+  readonly onSubmitted?: never
 }
 
 /**
  * Props for the Form component with schema and form options.
  * Creates a new form instance. This is the default way to use the form.
  */
-interface FormPropsWithOptions<Schema extends components.TSchema> {
+interface FormPropsWithOptions<Schema extends components.TSchema, SubmitResult = void>
+  extends components.OnSubmitCallbacks<Schema, SubmitResult> {
   readonly schema: Schema | ((schema: typeof components.schema) => Schema)
+  readonly formOptions?: Omit<
+    components.UseFormProps<Schema, SubmitResult>,
+    'defaultValues' | 'onSubmit' | 'onSubmitFailed' | 'onSubmitSuccess' | 'onSubmitted' | 'schema'
+  >
+  /**
+   * The default values for the form fields
+   *
+   * __Note:__ Even though this is optional,
+   * it is recommended to provide default values and specify all fields defined in the schema.
+   * Otherwise Typescript fails to infer the correct type for the form values.
+   */
+  readonly defaultValues?: components.UseFormProps<Schema>['defaultValues']
   readonly form?: never
-  readonly formOptions?: Omit<components.UseFormProps<Schema>, 'resolver' | 'schema'>
 }
 
 /**
@@ -134,38 +140,3 @@ export type FormStateRenderProps<Schema extends components.TSchema> = Pick<
   /** The form instance. */
   readonly form: components.FormInstance<Schema>
 }
-
-/**
- * Base Props for a Form Field.
- * @private
- */
-interface FormFieldProps<
-  BaseValueType,
-  Schema extends components.TSchema,
-  TFieldName extends components.FieldPath<Schema>,
-> extends components.FormWithValueValidation<BaseValueType, Schema, TFieldName> {
-  readonly name: TFieldName
-  readonly value?: BaseValueType extends components.FieldValues<Schema>[TFieldName] ?
-    components.FieldValues<Schema>[TFieldName]
-  : never
-  readonly defaultValue?: components.FieldValues<Schema>[TFieldName] | undefined
-  readonly isDisabled?: boolean
-  readonly isRequired?: boolean
-  readonly isInvalid?: boolean
-}
-
-/**
- * Field State Props
- */
-export type FieldStateProps<
-  // eslint-disable-next-line no-restricted-syntax
-  BaseProps extends { value?: unknown },
-  Schema extends components.TSchema,
-  TFieldName extends components.FieldPath<Schema>,
-> = FormFieldProps<BaseProps['value'], Schema, TFieldName> & {
-  // to avoid conflicts with the FormFieldProps we need to omit the FormFieldProps from the BaseProps
-  [K in keyof Omit<
-    BaseProps,
-    keyof FormFieldProps<BaseProps['value'], Schema, TFieldName>
-  >]: BaseProps[K]
-}
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx b/app/dashboard/src/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx
index dccfc52462d5..5acaddcd7705 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/DatePicker/DatePicker.tsx
@@ -37,8 +37,8 @@ import {
 } from '#/components/AriaComponents'
 import { useText } from '#/providers/TextProvider'
 import { forwardRef } from '#/utilities/react'
-import { Controller } from 'react-hook-form'
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from '#/utilities/tailwindVariants'
+import { tv } from '#/utilities/tailwindVariants'
 
 const DATE_PICKER_STYLES = tv({
   base: '',
@@ -109,6 +109,7 @@ export const DatePicker = forwardRef(function DatePicker<
     isRequired,
     className,
     size,
+    variants = DATE_PICKER_STYLES,
   } = props
 
   const { fieldState, formInstance } = Form.useField({
@@ -118,7 +119,7 @@ export const DatePicker = forwardRef(function DatePicker<
     defaultValue,
   })
 
-  const styles = DATE_PICKER_STYLES({ size })
+  const styles = variants({ size })
 
   return (
     <Form.Field
@@ -135,7 +136,7 @@ export const DatePicker = forwardRef(function DatePicker<
       ref={ref}
       style={props.style}
     >
-      <Controller
+      <Form.Controller
         control={formInstance.control}
         name={name}
         render={(renderProps) => {
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx b/app/dashboard/src/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx
index 683a2b530238..c3e40a96826e 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx
@@ -16,6 +16,7 @@ import { useSyncRef } from '#/hooks/syncRefHooks'
 import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
 import { tv } from '#/utilities/tailwindVariants'
+import { DIALOG_BACKGROUND } from '../../Dialog'
 
 const DROPDOWN_STYLES = tv({
   base: 'focus-child group relative flex w-max cursor-pointer flex-col items-start whitespace-nowrap rounded-input leading-cozy',
@@ -47,10 +48,12 @@ const DROPDOWN_STYLES = tv({
   slots: {
     container: 'absolute left-0 h-full w-full min-w-max',
     options:
-      'relative before:absolute before:top before:w-full before:rounded-input before:border-0.5 before:border-primary/20 before:backdrop-blur-default before:transition-colors',
+      'relative before:absolute before:top before:w-full before:rounded-input before:border-0.5 before:border-primary/20 before:transition-colors',
     optionsSpacing: 'padding relative h-6',
-    optionsContainer:
-      'relative grid max-h-dropdown-items w-full overflow-auto rounded-input transition-grid-template-rows',
+    optionsContainer: DIALOG_BACKGROUND({
+      className:
+        'relative grid max-h-dropdown-items w-full overflow-auto rounded-input transition-grid-template-rows',
+    }),
     optionsList: 'overflow-hidden',
     optionsItem:
       'flex h-6 items-center gap-dropdown-arrow rounded-input px-input-x transition-colors focus:cursor-default focus:bg-frame focus:font-bold focus:focus-ring not-focus:hover:bg-hover-bg not-selected:hover:bg-hover-bg',
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/Input/Input.tsx b/app/dashboard/src/components/AriaComponents/Inputs/Input/Input.tsx
index bd747805a004..f88667e5ab7f 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/Input/Input.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/Input/Input.tsx
@@ -27,9 +27,11 @@ import {
   type TSchema,
 } from '#/components/AriaComponents'
 import SvgMask from '#/components/SvgMask'
+import { useAutoFocus } from '#/hooks/autoFocusHooks'
 import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
 import type { ExtractFunction } from '#/utilities/tailwindVariants'
+import { omit } from 'enso-common/src/utilities/data/object'
 import { INPUT_STYLES } from '../variants'
 
 /**
@@ -62,24 +64,19 @@ export const Input = forwardRef(function Input<
 >(props: InputProps<Schema, TFieldName>, ref: ForwardedRef<HTMLFieldSetElement>) {
   const {
     name,
-    isDisabled = false,
-    form,
-    defaultValue,
     description,
     inputRef,
     addonStart,
     addonEnd,
-    label,
     size,
     rounded,
-    isRequired = false,
-    min,
-    max,
     icon,
     type = 'text',
     variant,
     variants = INPUT_STYLES,
     fieldVariants,
+    form,
+    autoFocus = false,
     ...inputProps
   } = props
 
@@ -87,32 +84,14 @@ export const Input = forwardRef(function Input<
 
   const privateInputRef = useRef<HTMLInputElement>(null)
 
-  const { fieldState, formInstance } = Form.useField({
-    name,
-    isDisabled,
+  const { fieldProps, formInstance } = Form.useFieldRegister<
+    Omit<aria.InputProps, 'children' | 'size'>,
+    Schema,
+    TFieldName
+  >({
+    ...props,
     form,
-    defaultValue,
-  })
-
-  const classes = variants({
-    variant,
-    size,
-    rounded,
-    invalid: fieldState.invalid,
-    readOnly: inputProps.readOnly,
-    disabled: isDisabled || formInstance.formState.isSubmitting,
-  })
-
-  const { ref: fieldRef, ...field } = formInstance.register(name, {
-    disabled: isDisabled,
-    required: isRequired,
-    ...(inputProps.onBlur && { onBlur: inputProps.onBlur }),
-    ...(inputProps.onChange && { onChange: inputProps.onChange }),
-    ...(inputProps.minLength != null ? { minLength: inputProps.minLength } : {}),
-    ...(inputProps.maxLength != null ? { maxLength: inputProps.maxLength } : {}),
-    ...(min != null ? { min } : {}),
-    ...(max != null ? { max } : {}),
-    setValueAs: (value) => {
+    setValueAs: (value: unknown) => {
       if (typeof value === 'string') {
         if (type === 'number') {
           return Number(value)
@@ -128,24 +107,28 @@ export const Input = forwardRef(function Input<
     },
   })
 
+  const classes = variants({
+    variant,
+    size,
+    rounded,
+    invalid: fieldProps.isInvalid,
+    readOnly: inputProps.readOnly,
+    disabled: fieldProps.disabled || formInstance.formState.isSubmitting,
+  })
+
+  useAutoFocus({ ref: privateInputRef, disabled: !autoFocus })
+
   return (
     <Form.Field
-      data-testid={testId}
-      form={formInstance}
-      name={name}
-      fullWidth
-      isHidden={inputProps.hidden}
-      label={label}
-      aria-label={props['aria-label']}
-      aria-labelledby={props['aria-labelledby']}
-      aria-describedby={props['aria-describedby']}
-      isRequired={field.required}
-      isInvalid={fieldState.invalid}
-      aria-details={props['aria-details']}
+      {...aria.mergeProps<FieldComponentProps<Schema>>()(inputProps, omit(fieldProps), {
+        isHidden: props.hidden,
+        fullWidth: true,
+        variants: fieldVariants,
+        form: formInstance,
+      })}
       ref={ref}
-      style={props.style}
-      className={props.className}
-      variants={fieldVariants}
+      name={props.name}
+      data-testid={testId}
     >
       <div
         className={classes.base()}
@@ -158,12 +141,12 @@ export const Input = forwardRef(function Input<
 
           <div className={classes.inputContainer()}>
             <aria.Input
-              ref={mergeRefs(inputRef, privateInputRef, fieldRef)}
               {...aria.mergeProps<aria.InputProps>()(
-                { className: classes.textArea(), type, name, min, max },
                 inputProps,
-                field,
+                { className: classes.textArea(), type, name },
+                omit(fieldProps, 'isInvalid', 'isRequired', 'isDisabled', 'invalid'),
               )}
+              ref={mergeRefs(inputRef, privateInputRef, fieldProps.ref)}
             />
           </div>
 
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx b/app/dashboard/src/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
index bf46f380d76c..82711703cb5a 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
@@ -22,7 +22,6 @@ import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
 import { tv } from '#/utilities/tailwindVariants'
 import { omit, unsafeRemoveUndefined } from 'enso-common/src/utilities/data/object'
-import { Controller } from 'react-hook-form'
 import { MultiSelectorOption } from './MultiSelectorOption'
 
 /** * Props for the MultiSelector component. */
@@ -141,7 +140,7 @@ export const MultiSelector = forwardRef(function MultiSelector<
         className={classes.base()}
         onClick={() => privateInputRef.current?.focus({ preventScroll: true })}
       >
-        <Controller
+        <Form.Controller
           control={formInstance.control}
           name={name}
           render={(renderProps) => {
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/MultiSelector/MultiSelectorOption.tsx b/app/dashboard/src/components/AriaComponents/Inputs/MultiSelector/MultiSelectorOption.tsx
index 76aa7fe4e5a9..b84fac5db031 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/MultiSelector/MultiSelectorOption.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/MultiSelector/MultiSelectorOption.tsx
@@ -1,9 +1,9 @@
 /** @file An option in a selector. */
 import { ListBoxItem, type ListBoxItemProps } from '#/components/aria'
 import { forwardRef } from '#/utilities/react'
+import type { VariantProps } from '#/utilities/tailwindVariants'
 import { tv } from '#/utilities/tailwindVariants'
 import * as React from 'react'
-import type { VariantProps } from 'tailwind-variants'
 import { TEXT_STYLE } from '../../Text'
 
 /** Props for a {@link MultiSelectorOption}. */
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/OTPInput/OTPInput.tsx b/app/dashboard/src/components/AriaComponents/Inputs/OTPInput/OTPInput.tsx
new file mode 100644
index 000000000000..7024e6fc088a
--- /dev/null
+++ b/app/dashboard/src/components/AriaComponents/Inputs/OTPInput/OTPInput.tsx
@@ -0,0 +1,218 @@
+/**
+ * @file
+ */
+import { mergeProps } from '#/components/aria'
+import { mergeRefs } from '#/utilities/mergeRefs'
+import type { VariantProps } from '#/utilities/tailwindVariants'
+import { tv } from '#/utilities/tailwindVariants'
+import { omit } from 'enso-common/src/utilities/data/object'
+import type { OTPInputProps } from 'input-otp'
+import { OTPInput as BaseOTPInput, type SlotProps as OTPInputSlotProps } from 'input-otp'
+import type { ForwardedRef, Ref } from 'react'
+import { forwardRef, useRef } from 'react'
+import type {
+  FieldComponentProps,
+  FieldPath,
+  FieldProps,
+  FieldStateProps,
+  FieldVariantProps,
+  TSchema,
+} from '../../Form'
+import { Form } from '../../Form'
+import { Separator } from '../../Separator'
+import { TEXT_STYLE } from '../../Text'
+import type { TestIdProps } from '../../types'
+
+/**
+ * Props for an {@link OTPInput}.
+ */
+export interface OtpInputProps<Schema extends TSchema, TFieldName extends FieldPath<Schema>>
+  extends FieldStateProps<Omit<OTPInputProps, 'children' | 'render'>, Schema, TFieldName>,
+    FieldProps,
+    FieldVariantProps,
+    Omit<VariantProps<typeof STYLES>, 'disabled' | 'invalid'>,
+    TestIdProps {
+  readonly inputRef?: Ref<HTMLInputElement>
+  readonly maxLength: number
+  readonly className?: string
+  /**
+   * Whether to submit the form when the OTP is filled.
+   * @default true
+   */
+  readonly submitOnComplete?: boolean
+  /**
+   * Callback when the OTP is filled.
+   */
+  readonly onComplete?: () => void
+}
+
+const STYLES = tv({
+  base: 'group flex overflow-hidden p-1 w-[calc(100%+8px)] -m-1 flex-1',
+  slots: {
+    slotsContainer: 'flex items-center justify-center flex-1 w-full gap-1',
+  },
+})
+
+const SLOT_STYLES = tv({
+  base: [
+    'flex-1 h-10 min-w-8 flex items-center justify-center',
+    'border border-primary rounded-xl',
+    'outline outline-1 outline-transparent -outline-offset-2',
+    'transition-[outline-offset] duration-200',
+  ],
+  variants: {
+    isActive: { true: 'relative outline-offset-0 outline-2 outline-primary' },
+    isInvalid: { true: { base: 'border-danger', char: 'text-danger' } },
+  },
+  slots: {
+    char: TEXT_STYLE({
+      variant: 'body',
+      weight: 'bold',
+      color: 'current',
+    }),
+    fakeCaret:
+      'absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink before:w-px before:h-5 before:bg-primary',
+  },
+  compoundVariants: [
+    {
+      isActive: true,
+      isInvalid: true,
+      class: { base: 'outline-danger' },
+    },
+  ],
+})
+
+/**
+ * Accessible one-time password component with copy paste functionality.
+ */
+export const OTPInput = forwardRef(function OTPInput<
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema>,
+>(props: OtpInputProps<Schema, TFieldName>, ref: ForwardedRef<HTMLFieldSetElement>) {
+  const {
+    maxLength,
+    variants = STYLES,
+    className,
+    name,
+    fieldVariants,
+    inputRef,
+    submitOnComplete = true,
+    onComplete,
+    form,
+    ...inputProps
+  } = props
+
+  const innerOtpInputRef = useRef<HTMLInputElement>(null)
+  const classes = variants({ className })
+
+  const { fieldProps, formInstance } = Form.useFieldRegister({
+    ...props,
+    form,
+  })
+
+  return (
+    <Form.Field
+      {...mergeProps<FieldComponentProps<Schema>>()(inputProps, omit(fieldProps), {
+        isHidden: props.hidden,
+        fullWidth: true,
+        variants: fieldVariants,
+        form: formInstance,
+      })}
+      ref={ref}
+      name={props.name}
+    >
+      <BaseOTPInput
+        {...mergeProps<OTPInputProps>()(
+          inputProps,
+          omit(fieldProps, 'isInvalid', 'isRequired', 'isDisabled', 'invalid'),
+          {
+            name,
+            maxLength,
+            noScriptCSSFallback: null,
+            containerClassName: classes.base(),
+            onClick: () => {
+              if (innerOtpInputRef.current) {
+                // Check if the input is not already focused
+                if (document.activeElement !== innerOtpInputRef.current) {
+                  innerOtpInputRef.current.focus()
+                }
+              }
+            },
+            onComplete: () => {
+              onComplete?.()
+
+              if (submitOnComplete) {
+                void formInstance.trigger(name).then(() => formInstance.submit())
+              }
+            },
+          },
+        )}
+        ref={mergeRefs(fieldProps.ref, inputRef, innerOtpInputRef)}
+        render={({ slots }) => {
+          const sections = (() => {
+            const items = []
+            const remainingSlots = slots.length % 3
+
+            const sectionsCount = Math.floor(slots.length / 3) + (remainingSlots > 0 ? 1 : 0)
+
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            if (slots.length < 6) {
+              items.push(slots)
+            } else {
+              for (let i = 0; i < sectionsCount; i++) {
+                const section = slots.slice(i * 3, (i + 1) * 3)
+                items.push(section)
+              }
+            }
+
+            return items
+          })()
+
+          return (
+            <div role="presentation" className="flex w-full items-center gap-2">
+              {sections.map((section, idx) => (
+                <>
+                  <div key={idx} className={classes.slotsContainer()}>
+                    {section.map((slot, key) => (
+                      <Slot isInvalid={fieldProps.isInvalid} key={key} {...slot} />
+                    ))}
+                  </div>
+
+                  {idx < sections.length - 1 && (
+                    <Separator
+                      key={idx + 'separator'}
+                      orientation="horizontal"
+                      className="w-3"
+                      size="medium"
+                    />
+                  )}
+                </>
+              ))}
+            </div>
+          )
+        }}
+      />
+    </Form.Field>
+  )
+})
+
+/**
+ * Props for a single {@link Slot}.
+ */
+interface SlotProps extends Omit<OTPInputSlotProps, 'isActive'>, VariantProps<typeof SLOT_STYLES> {}
+
+/**
+ * Slot is a component that represents a single char in the OTP input.
+ * @internal
+ */
+function Slot(props: SlotProps) {
+  const { char, isActive, hasFakeCaret, variants = SLOT_STYLES, isInvalid } = props
+  const classes = variants({ isActive, isInvalid })
+
+  return (
+    <div className={classes.base()}>
+      {char != null && <div className={classes.char()}>{char}</div>}
+      {hasFakeCaret && <div role="presentation" className={classes.fakeCaret()} />}
+    </div>
+  )
+}
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/OTPInput/index.ts b/app/dashboard/src/components/AriaComponents/Inputs/OTPInput/index.ts
new file mode 100644
index 000000000000..f623bee2a16d
--- /dev/null
+++ b/app/dashboard/src/components/AriaComponents/Inputs/OTPInput/index.ts
@@ -0,0 +1,6 @@
+/**
+ * @file
+ *
+ * Barrel export file for OTPInput
+ */
+export * from './OTPInput'
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/Password/Password.tsx b/app/dashboard/src/components/AriaComponents/Inputs/Password/Password.tsx
index f8411352819c..f5e81b5f0a6d 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/Password/Password.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/Password/Password.tsx
@@ -7,6 +7,7 @@ import EyeCrossedIcon from '#/assets/eye_crossed.svg'
 import {
   Button,
   Input,
+  type FieldPath,
   type FieldValues,
   type InputProps,
   type TSchema,
@@ -17,7 +18,7 @@ import {
 // ================
 
 /** Props for a {@link Password}. */
-export interface PasswordProps<Schema extends TSchema, TFieldName extends Path<FieldValues<Schema>>>
+export interface PasswordProps<Schema extends TSchema, TFieldName extends FieldPath<Schema>>
   extends Omit<InputProps<Schema, TFieldName>, 'type'> {}
 
 /** A component wrapping {@link Input} with the ability to show and hide password. */
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/ResizableInput/ResizableContentEditableInput.tsx b/app/dashboard/src/components/AriaComponents/Inputs/ResizableInput/ResizableContentEditableInput.tsx
index 91c2d9da3eee..7cf417c0d6b6 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/ResizableInput/ResizableContentEditableInput.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/ResizableInput/ResizableContentEditableInput.tsx
@@ -35,8 +35,10 @@ export interface ResizableContentEditableInputProps<
       VariantProps<typeof INPUT_STYLES>,
       'disabled' | 'invalid' | 'rounded' | 'size' | 'variant'
     >,
+    FieldVariantProps,
     Omit<FieldProps, 'variant'>,
     FieldVariantProps,
+    Pick<VariantProps<typeof INPUT_STYLES>, 'rounded' | 'size' | 'variant'>,
     Omit<
       VariantProps<typeof CONTENT_EDITABLE_STYLES>,
       'disabled' | 'invalid' | 'rounded' | 'size' | 'variant'
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/Selector/Selector.tsx b/app/dashboard/src/components/AriaComponents/Inputs/Selector/Selector.tsx
index 569ea018c447..9c5e1cb8d3d7 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/Selector/Selector.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/Selector/Selector.tsx
@@ -4,12 +4,14 @@ import * as React from 'react'
 import type * as twv from 'tailwind-variants'
 
 import { mergeProps, type RadioGroupProps } from '#/components/aria'
+import type { FieldComponentProps } from '#/components/AriaComponents'
 import {
+  Form,
   type FieldPath,
   type FieldProps,
   type FieldStateProps,
   type FieldValues,
-  Form,
+  type FieldVariantProps,
   type TSchema,
 } from '#/components/AriaComponents'
 
@@ -18,7 +20,6 @@ import RadioGroup from '#/components/styled/RadioGroup'
 import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
 import { tv } from '#/utilities/tailwindVariants'
-import { Controller } from 'react-hook-form'
 import { SelectorOption } from './SelectorOption'
 
 /** * Props for the Selector component. */
@@ -29,7 +30,8 @@ export interface SelectorProps<Schema extends TSchema, TFieldName extends FieldP
       TFieldName
     >,
     FieldProps,
-    Omit<twv.VariantProps<typeof SELECTOR_STYLES>, 'disabled' | 'invalid'> {
+    Omit<twv.VariantProps<typeof SELECTOR_STYLES>, 'disabled' | 'invalid'>,
+    FieldVariantProps {
   readonly items: readonly FieldValues<Schema>[TFieldName][]
   readonly children?: (item: FieldValues<Schema>[TFieldName]) => string
   readonly columns?: number
@@ -90,23 +92,20 @@ export const Selector = forwardRef(function Selector<
     isDisabled = false,
     columns,
     form,
-    defaultValue,
     inputRef,
     label,
     size,
     rounded,
     isRequired = false,
+    isInvalid = false,
+    fieldVariants,
+    defaultValue,
     ...inputProps
   } = props
 
   const privateInputRef = React.useRef<HTMLDivElement>(null)
 
-  const { fieldState, formInstance } = Form.useField({
-    name,
-    isDisabled,
-    form,
-    ...(defaultValue != null ? { defaultValue } : {}),
-  })
+  const formInstance = Form.useFormContext(form)
 
   const classes = SELECTOR_STYLES({
     size,
@@ -116,51 +115,49 @@ export const Selector = forwardRef(function Selector<
   })
 
   return (
-    <Form.Field
-      form={formInstance}
+    <Form.Controller
+      control={formInstance.control}
       name={name}
-      fullWidth
-      label={label}
-      aria-label={props['aria-label']}
-      aria-labelledby={props['aria-labelledby']}
-      aria-describedby={props['aria-describedby']}
-      isRequired={isRequired}
-      isInvalid={fieldState.invalid}
-      aria-details={props['aria-details']}
-      ref={ref}
-      style={props.style}
-      className={props.className}
-    >
-      <div
-        className={classes.base()}
-        onClick={() => privateInputRef.current?.focus({ preventScroll: true })}
-      >
-        <Controller
-          control={formInstance.control}
-          name={name}
-          render={(renderProps) => {
-            const { ref: fieldRef, value, onChange, ...field } = renderProps.field
-            return (
+      render={(renderProps) => {
+        const { value } = renderProps.field
+        return (
+          <Form.Field
+            {...mergeProps<FieldComponentProps<Schema>>()(inputProps, renderProps.field, {
+              fullWidth: true,
+              variants: fieldVariants,
+              form: formInstance,
+              label,
+              isRequired,
+            })}
+            name={props.name}
+            ref={ref}
+          >
+            <div
+              className={classes.base()}
+              onClick={() => privateInputRef.current?.focus({ preventScroll: true })}
+            >
               <RadioGroup
-                ref={mergeRefs(inputRef, privateInputRef, fieldRef)}
                 {...mergeProps<RadioGroupProps>()(
                   {
                     className: classes.radioGroup(),
                     name,
                     isRequired,
                     isDisabled,
+                    isInvalid,
                     style:
                       columns != null ? { gridTemplateColumns: `repeat(${columns}, 1fr)` } : {},
+                    ...(defaultValue != null ? { defaultValue } : {}),
                   },
                   inputProps,
-                  field,
+                  renderProps.field,
                 )}
+                ref={mergeRefs(inputRef, privateInputRef, renderProps.field.ref)}
                 // eslint-disable-next-line no-restricted-syntax
                 aria-label={props['aria-label'] ?? (typeof label === 'string' ? label : '')}
                 value={String(items.indexOf(value))}
                 onChange={(newValue) => {
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-                  onChange(items[Number(newValue)])
+                  renderProps.field.onChange(items[Number(newValue)])
                 }}
               >
                 <AnimatedBackground value={String(items.indexOf(value))}>
@@ -169,10 +166,10 @@ export const Selector = forwardRef(function Selector<
                   ))}
                 </AnimatedBackground>
               </RadioGroup>
-            )
-          }}
-        />
-      </div>
-    </Form.Field>
+            </div>
+          </Form.Field>
+        )
+      }}
+    />
   )
 })
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/Selector/SelectorOption.tsx b/app/dashboard/src/components/AriaComponents/Inputs/Selector/SelectorOption.tsx
index 9298ff2ba9a6..77225f329839 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/Selector/SelectorOption.tsx
+++ b/app/dashboard/src/components/AriaComponents/Inputs/Selector/SelectorOption.tsx
@@ -2,9 +2,9 @@
 import { AnimatedBackground } from '#/components/AnimatedBackground'
 import { Radio, type RadioProps } from '#/components/aria'
 import { forwardRef } from '#/utilities/react'
+import type { VariantProps } from '#/utilities/tailwindVariants'
 import { tv } from '#/utilities/tailwindVariants'
 import * as React from 'react'
-import type { VariantProps } from 'tailwind-variants'
 import { TEXT_STYLE } from '../../Text'
 
 /** Props for a {@link SelectorOption}. */
@@ -99,9 +99,18 @@ export const SelectorOption = forwardRef(function SelectorOption(
   props: SelectorOptionProps,
   ref: React.ForwardedRef<HTMLLabelElement>,
 ) {
-  const { label, value, size, rounded, variant, className, ...radioProps } = props
+  const {
+    label,
+    value,
+    size,
+    rounded,
+    variant,
+    className,
+    variants = SELECTOR_OPTION_STYLES,
+    ...radioProps
+  } = props
 
-  const styles = SELECTOR_OPTION_STYLES({ size, rounded, variant })
+  const styles = variants({ size, rounded, variant })
 
   return (
     <AnimatedBackground.Item
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/index.ts b/app/dashboard/src/components/AriaComponents/Inputs/index.ts
index fd6de6429cf4..d26acecdf5ee 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/index.ts
+++ b/app/dashboard/src/components/AriaComponents/Inputs/index.ts
@@ -8,6 +8,7 @@ export * from './DatePicker'
 export * from './Dropdown'
 export * from './Input'
 export * from './MultiSelector'
+export * from './OTPInput'
 export * from './Password'
 export * from './ResizableInput'
 export * from './Selector'
diff --git a/app/dashboard/src/components/AriaComponents/Inputs/variants.ts b/app/dashboard/src/components/AriaComponents/Inputs/variants.ts
index 08179c94cadf..93fc86bf9d68 100644
--- a/app/dashboard/src/components/AriaComponents/Inputs/variants.ts
+++ b/app/dashboard/src/components/AriaComponents/Inputs/variants.ts
@@ -39,7 +39,7 @@ export const INPUT_STYLES = tv({
     variant: {
       custom: {},
       outline: {
-        base: 'border-[0.5px] border-primary/20 outline-offset-2 focus-within:border-primary/50 focus-within:outline focus-within:outline-2 focus-within:outline-offset-[0.5px] focus-within:outline-primary',
+        base: 'border-[0.5px] border-primary/20 outline-offset-2 focus-within:border-primary/50 focus-within:outline focus-within:outline-2 focus-within:outline-offset-0 focus-within:outline-primary',
         textArea: 'border-transparent focus-within:border-transparent',
       },
     },
diff --git a/app/dashboard/src/components/AriaComponents/Switch/Switch.tsx b/app/dashboard/src/components/AriaComponents/Switch/Switch.tsx
index 07827c44d07d..da585f9ff961 100644
--- a/app/dashboard/src/components/AriaComponents/Switch/Switch.tsx
+++ b/app/dashboard/src/components/AriaComponents/Switch/Switch.tsx
@@ -127,6 +127,8 @@ export const Switch = forwardRef(function Switch<
         {...mergeProps<AriaSwitchProps>()(ariaSwitchProps, fieldProps, {
           defaultSelected: field.value,
           className: switchStyles(),
+          onChange: field.onChange,
+          onBlur: field.onBlur,
         })}
       >
         <div className={background()} role="presentation">
diff --git a/app/dashboard/src/components/AriaComponents/Text/Text.tsx b/app/dashboard/src/components/AriaComponents/Text/Text.tsx
index 28bb614cb834..2e7f2495401c 100644
--- a/app/dashboard/src/components/AriaComponents/Text/Text.tsx
+++ b/app/dashboard/src/components/AriaComponents/Text/Text.tsx
@@ -34,7 +34,7 @@ export const TEXT_STYLE = twv.tv({
       danger: 'text-danger',
       success: 'text-accent-dark',
       disabled: 'text-primary/30',
-      invert: 'text-white',
+      invert: 'text-invert',
       inherit: 'text-inherit',
       current: 'text-current',
     },
@@ -69,6 +69,7 @@ export const TEXT_STYLE = twv.tv({
     },
     transform: {
       none: '',
+      normal: 'normal-case',
       capitalize: 'capitalize',
       lowercase: 'lowercase',
       uppercase: 'uppercase',
@@ -89,7 +90,7 @@ export const TEXT_STYLE = twv.tv({
     },
     monospace: { true: 'font-mono' },
     italic: { true: 'italic' },
-    nowrap: { true: 'whitespace-nowrap' },
+    nowrap: { true: 'whitespace-nowrap', normal: 'whitespace-normal', false: '' },
     textSelection: {
       auto: '',
       none: 'select-none',
@@ -211,6 +212,8 @@ export const Text = forwardRef(function Text(props: TextProps, ref: React.Ref<HT
 }) as unknown as React.FC<React.RefAttributes<HTMLSpanElement> & TextProps> & {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   Heading: typeof Heading
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Group: React.FC<React.PropsWithChildren>
 }
 
 /**
@@ -233,3 +236,14 @@ const Heading = forwardRef(function Heading(
   return <Text ref={ref} elementType={`h${level}`} variant="h1" balance {...textProps} />
 })
 Text.Heading = Heading
+
+/**
+ * Text group component. It's used to visually group text elements together
+ */
+Text.Group = function TextGroup(props: React.PropsWithChildren) {
+  return (
+    <textProvider.TextProvider value={{ isInsideTextComponent: true }}>
+      {props.children}
+    </textProvider.TextProvider>
+  )
+}
diff --git a/app/dashboard/src/components/Autocomplete.tsx b/app/dashboard/src/components/Autocomplete.tsx
index 14a80f606b00..f7033219d50a 100644
--- a/app/dashboard/src/components/Autocomplete.tsx
+++ b/app/dashboard/src/components/Autocomplete.tsx
@@ -8,7 +8,7 @@ import Input from '#/components/styled/Input'
 
 import { Button, Text } from '#/components/AriaComponents'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
-import { twMerge } from 'tailwind-merge'
+import { twJoin, twMerge } from 'tailwind-merge'
 
 // =================
 // === Constants ===
@@ -100,16 +100,6 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
     }
   }, [])
 
-  React.useEffect(() => {
-    const onClick = () => {
-      setIsDropdownVisible(false)
-    }
-    document.addEventListener('click', onClick)
-    return () => {
-      document.removeEventListener('click', onClick)
-    }
-  }, [])
-
   const fallbackInputRef = React.useRef<HTMLInputElement>(null)
   const inputRef = rawInputRef ?? fallbackInputRef
 
@@ -186,7 +176,7 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
   }
 
   return (
-    <div className="relative h-6 w-full">
+    <div className={twJoin('relative isolate h-6 w-full', isDropdownVisible && 'z-1')}>
       <div
         onKeyDown={onKeyDown}
         className={twMerge(
@@ -223,7 +213,7 @@ export default function Autocomplete<T>(props: AutocompleteProps<T>) {
               />
             : <div
                 tabIndex={-1}
-                className="text grow cursor-pointer whitespace-nowrap bg-transparent px-button-x"
+                className="text w-full grow cursor-pointer overflow-auto whitespace-nowrap bg-transparent px-button-x scroll-hidden"
                 onClick={() => {
                   setIsDropdownVisible(true)
                 }}
diff --git a/app/dashboard/src/components/ContextMenus.tsx b/app/dashboard/src/components/ContextMenus.tsx
index 6a8fa106f46e..6b85f38dcd45 100644
--- a/app/dashboard/src/components/ContextMenus.tsx
+++ b/app/dashboard/src/components/ContextMenus.tsx
@@ -1,23 +1,11 @@
 /** @file A context menu. */
 import * as React from 'react'
 
-import * as detect from 'enso-common/src/detect'
-
 import Modal from '#/components/Modal'
 
 import { forwardRef } from '#/utilities/react'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
 
-// =================
-// === Constants ===
-// =================
-
-const DEFAULT_MENU_WIDTH = 256
-const MACOS_MENU_WIDTH = 230
-/** The width of a single context menu. */
-const MENU_WIDTH = detect.isOnMacOS() ? MACOS_MENU_WIDTH : DEFAULT_MENU_WIDTH
-const HALF_MENU_WIDTH = Math.floor(MENU_WIDTH / 2)
-
 // ===================
 // === ContextMenu ===
 // ===================
@@ -46,7 +34,7 @@ function ContextMenus(props: ContextMenusProps, ref: React.ForwardedRef<HTMLDivE
         <div
           data-testid="context-menus"
           ref={ref}
-          style={{ left: event.pageX - HALF_MENU_WIDTH, top: event.pageY }}
+          style={{ left: event.pageX, top: event.pageY }}
           className={tailwindMerge.twMerge(
             'pointer-events-none sticky flex w-min items-start gap-context-menus',
           )}
diff --git a/app/dashboard/src/components/Devtools/EnsoDevtools.tsx b/app/dashboard/src/components/Devtools/EnsoDevtools.tsx
index b1430c93e769..9d10f73affed 100644
--- a/app/dashboard/src/components/Devtools/EnsoDevtools.tsx
+++ b/app/dashboard/src/components/Devtools/EnsoDevtools.tsx
@@ -168,8 +168,8 @@ export function EnsoDevtools() {
 
             <ariaComponents.Form
               gap="small"
-              formOptions={{ mode: 'onChange' }}
               schema={FEATURE_FLAGS_SCHEMA}
+              formOptions={{ mode: 'onChange' }}
               defaultValues={{
                 enableMultitabs: featureFlags.enableMultitabs,
                 enableAssetsTableBackgroundRefresh: featureFlags.enableAssetsTableBackgroundRefresh,
diff --git a/app/dashboard/src/components/EditableSpan.tsx b/app/dashboard/src/components/EditableSpan.tsx
index efb7e0d22d7d..2a87130077c6 100644
--- a/app/dashboard/src/components/EditableSpan.tsx
+++ b/app/dashboard/src/components/EditableSpan.tsx
@@ -16,6 +16,8 @@ import * as eventModule from '#/utilities/event'
 import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
 
+import { useAutoFocus } from '#/hooks/autoFocusHooks'
+
 // =================
 // === Constants ===
 // =================
@@ -46,7 +48,10 @@ export default function EditableSpan(props: EditableSpanProps) {
   const { getText } = textProvider.useText()
   const inputBindings = inputBindingsProvider.useInputBindings()
   const [isSubmittable, setIsSubmittable] = React.useState(false)
+
+  const formRef = React.useRef<HTMLFormElement | null>(null)
   const inputRef = React.useRef<HTMLInputElement | null>(null)
+
   const cancelledRef = React.useRef(false)
   const checkSubmittableRef = React.useRef(checkSubmittable)
   checkSubmittableRef.current = checkSubmittable
@@ -78,21 +83,20 @@ export default function EditableSpan(props: EditableSpanProps) {
     cancelledRef.current = false
   }, [editable])
 
+  aria.useInteractOutside({
+    ref: formRef,
+    onInteractOutside: () => {
+      onCancel()
+    },
+  })
+
+  useAutoFocus({ ref: inputRef, disabled: !editable })
+
   if (editable) {
     return (
       <form
+        ref={formRef}
         className={tailwindMerge.twMerge('flex grow gap-1.5', WIDTH_CLASS_NAME)}
-        onBlur={(event) => {
-          const currentTarget = event.currentTarget
-          if (!currentTarget.contains(event.relatedTarget)) {
-            // This must run AFTER the cancel button's event handler runs.
-            setTimeout(() => {
-              if (!cancelledRef.current) {
-                currentTarget.requestSubmit()
-              }
-            })
-          }
-        }}
         onSubmit={(event) => {
           event.preventDefault()
           if (inputRef.current != null) {
@@ -109,12 +113,12 @@ export default function EditableSpan(props: EditableSpanProps) {
           className={tailwindMerge.twMerge('rounded-lg', className)}
           ref={(element) => {
             inputRef.current = element
+
             if (element) {
               element.style.width = '0'
               element.style.width = `${element.scrollWidth}px`
             }
           }}
-          autoFocus
           type="text"
           size={1}
           defaultValue={children}
diff --git a/app/dashboard/src/components/JSONSchemaInput.tsx b/app/dashboard/src/components/JSONSchemaInput.tsx
index 9b10e0c761ff..690dd743336a 100644
--- a/app/dashboard/src/components/JSONSchemaInput.tsx
+++ b/app/dashboard/src/components/JSONSchemaInput.tsx
@@ -63,7 +63,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
             children.push(
               <div
                 className={twMerge(
-                  'w-60 rounded-default border-0.5',
+                  'w-full rounded-default border-0.5',
                   getValidator(path)(value) ? 'border-primary/20' : 'border-red-700/60',
                 )}
               >
@@ -92,7 +92,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                   value={typeof value === 'string' ? value : ''}
                   size={1}
                   className={twMerge(
-                    'focus-child text w-60 grow rounded-input border-0.5 bg-transparent px-input-x read-only:read-only',
+                    'focus-child text w-full grow rounded-input border-0.5 bg-transparent px-input-x read-only:read-only',
                     getValidator(path)(value) ? 'border-primary/20' : 'border-red-700/60',
                   )}
                   placeholder={getText('enterText')}
@@ -115,7 +115,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                 value={typeof value === 'number' ? value : ''}
                 size={1}
                 className={twMerge(
-                  'focus-child text w-60 grow rounded-input border-0.5 bg-transparent px-input-x read-only:read-only',
+                  'focus-child text w-full grow rounded-input border-0.5 bg-transparent px-input-x read-only:read-only',
                   getValidator(path)(value) ? 'border-primary/20' : 'border-red-700/60',
                 )}
                 placeholder={getText('enterNumber')}
@@ -139,7 +139,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                 value={typeof value === 'number' ? value : ''}
                 size={1}
                 className={twMerge(
-                  'focus-child min-6- text40 w-60 grow rounded-input border-0.5 bg-transparent px-input-x read-only:read-only',
+                  'focus-child min-6- text40 w-full grow rounded-input border-0.5 bg-transparent px-input-x read-only:read-only',
                   getValidator(path)(value) ? 'border-primary/20' : 'border-red-700/60',
                 )}
                 placeholder={getText('enterInteger')}
@@ -177,7 +177,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
           )
           if (constantValueOfSchema(defs, schema).length !== 1) {
             children.push(
-              <div className="grid items-center gap-json-schema rounded-default border-0.5 border-primary/20 p-json-schema-object-input">
+              <div className="grid auto-cols-[max-content_auto] items-center gap-json-schema rounded-default border-0.5 border-primary/20 p-json-schema-object-input">
                 {propertyDefinitions.map((definition) => {
                   const { key, schema: childSchema } = definition
                   const isOptional = !requiredProperties.includes(key)
@@ -191,7 +191,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                           isDisabled={!isOptional}
                           isActive={!isOptional || isPresent}
                           className={twMerge(
-                            'col-start-1 inline-block whitespace-nowrap rounded-full px-button-x',
+                            'col-start-1 inline-block justify-self-start whitespace-nowrap rounded-full px-button-x',
                             isOptional && 'hover:bg-hover-bg',
                           )}
                           onPress={() => {
@@ -216,6 +216,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                         >
                           {'title' in childSchema ? String(childSchema.title) : key}
                         </Button>
+
                         {isPresent && (
                           <div className="col-start-2">
                             <JSONSchemaInput
@@ -302,7 +303,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
           readOnly={readOnly}
           items={childSchemas}
           selectedIndex={selectedChildIndex}
-          className="self-start"
+          className="w-full self-start"
           onChange={(childSchema, index) => {
             setSelectedChildIndex(index)
             const newConstantValue = constantValueOfSchema(defs, childSchema, true)
diff --git a/app/dashboard/src/components/MenuEntry.tsx b/app/dashboard/src/components/MenuEntry.tsx
index c2d028310341..fa7bcda6dfd0 100644
--- a/app/dashboard/src/components/MenuEntry.tsx
+++ b/app/dashboard/src/components/MenuEntry.tsx
@@ -75,7 +75,6 @@ export const ACTION_TO_TEXT_ID: Readonly<
   signOut: 'signOutShortcut',
   downloadApp: 'downloadAppShortcut',
   cancelCut: 'cancelCutShortcut',
-  editName: 'editNameShortcut',
   selectAdditional: 'selectAdditionalShortcut',
   selectRange: 'selectRangeShortcut',
   selectAdditionalRange: 'selectAdditionalRangeShortcut',
diff --git a/app/dashboard/src/components/Stepper/Step.tsx b/app/dashboard/src/components/Stepper/Step.tsx
new file mode 100644
index 000000000000..cb6cd8596e4d
--- /dev/null
+++ b/app/dashboard/src/components/Stepper/Step.tsx
@@ -0,0 +1,199 @@
+/**
+ * @file Step component.
+ * A step component is used to represent a single step in a stepper component.
+ */
+import * as React from 'react'
+
+import { AnimatePresence, motion } from 'framer-motion'
+import * as tvw from 'tailwind-variants'
+
+import DoneIcon from '#/assets/check_mark.svg'
+
+import * as ariaComponents from '#/components/AriaComponents'
+import SvgMask from '#/components/SvgMask'
+
+import * as stepperProvider from './StepperProvider'
+import type { RenderStepProps } from './types'
+import type * as stepperState from './useStepperState'
+
+/** A prop with the given type, or a function to produce a value of the given type. */
+type StepProp<T> = T | ((props: RenderStepProps) => T)
+
+/**
+ * Props for {@link Step} component.
+ */
+export interface StepProps extends RenderStepProps {
+  readonly className?: StepProp<string | null | undefined>
+  readonly icon?: StepProp<React.ReactElement | string | null | undefined>
+  readonly completeIcon?: StepProp<React.ReactElement | string | null | undefined>
+  readonly title?: StepProp<React.ReactElement | string | null | undefined>
+  readonly description?: StepProp<React.ReactElement | string | null | undefined>
+  readonly children?: StepProp<React.ReactNode>
+}
+
+const STEP_STYLES = tvw.tv({
+  base: 'relative flex items-center gap-2 select-none',
+  slots: {
+    icon: 'w-6 h-6 border-0.5 flex-none border-current rounded-full flex items-center justify-center transition-colors duration-200',
+    titleContainer: '-mt-1 flex flex-col items-start justify-start transition-colors duration-200',
+    content: 'flex-1',
+  },
+  variants: {
+    position: { first: 'rounded-l-full', last: 'rounded-r-full' },
+    status: {
+      completed: {
+        base: 'text-primary',
+        icon: 'bg-primary border-transparent text-invert',
+        content: 'text-primary',
+      },
+      current: { base: 'text-primary', content: 'text-primary/30' },
+      next: { base: 'text-primary/30', content: 'text-primary/30' },
+    },
+  },
+})
+
+/**
+ * A step component is used to represent a single step in a stepper component.
+ */
+export function Step(props: StepProps) {
+  const {
+    index,
+    title,
+    description,
+    isCompleted,
+    goToStep,
+    nextStep,
+    previousStep,
+    totalSteps,
+    currentStep,
+    isCurrent,
+    isLast,
+    isFirst,
+    isDisabled,
+    className,
+    children,
+    icon = (
+      <ariaComponents.Text variant="subtitle" color="current" aria-hidden>
+        {index + 1}
+      </ariaComponents.Text>
+    ),
+    completeIcon = DoneIcon,
+  } = props
+
+  const { state } = stepperProvider.useStepperContext()
+
+  const renderStepProps = {
+    isCompleted,
+    goToStep,
+    nextStep,
+    previousStep,
+    totalSteps,
+    currentStep,
+    isCurrent,
+    isLast,
+    isFirst,
+    isDisabled,
+    index,
+  } satisfies RenderStepProps
+
+  const classes = typeof className === 'function' ? className(renderStepProps) : className
+  const descriptionElement =
+    typeof description === 'function' ? description(renderStepProps) : description
+  const titleElement = typeof title === 'function' ? title(renderStepProps) : title
+  const iconElement = typeof icon === 'function' ? icon(renderStepProps) : icon
+  const doneIconElement =
+    typeof completeIcon === 'function' ? completeIcon(renderStepProps) : completeIcon
+
+  const styles = STEP_STYLES({
+    className: classes,
+    position:
+      isFirst ? 'first'
+      : isLast ? 'last'
+      : undefined,
+    status:
+      isCompleted ? 'completed'
+      : isCurrent ? 'current'
+      : 'next',
+  })
+
+  const stepAnimationRotation = 30
+  const stepAnimationScale = 0.5
+
+  return (
+    <div className={styles.base()}>
+      <AnimatePresence initial={false} mode="sync" custom={state.direction}>
+        <motion.div
+          key={isCompleted ? 'done' : 'icon'}
+          className={styles.icon()}
+          initial="enter"
+          animate="center"
+          exit="exit"
+          variants={{
+            enter: {
+              rotate:
+                state.direction === 'forward' ? -stepAnimationRotation : stepAnimationRotation,
+              scale: stepAnimationScale,
+              opacity: 0,
+              position: 'absolute',
+              top: 0,
+            },
+            center: {
+              rotate: 0,
+              scale: 1,
+              opacity: 1,
+              position: 'static',
+            },
+            exit: (direction: stepperState.StepperState['direction']) => ({
+              rotate: direction === 'back' ? -stepAnimationRotation : stepAnimationRotation,
+              scale: stepAnimationScale,
+              opacity: 0,
+              position: 'absolute',
+              top: 0,
+            }),
+          }}
+          transition={{
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            rotate: { type: 'spring', stiffness: 500, damping: 100, bounce: 0, duration: 0.2 },
+          }}
+        >
+          {(() => {
+            const renderIconElement = isCompleted ? doneIconElement : iconElement
+
+            if (renderIconElement == null) {
+              return null
+            } else if (typeof renderIconElement === 'string') {
+              return <SvgMask src={renderIconElement} />
+            } else {
+              return renderIconElement
+            }
+          })()}
+        </motion.div>
+      </AnimatePresence>
+
+      <div className={styles.titleContainer()}>
+        {titleElement != null && (
+          <div>
+            {typeof titleElement === 'string' ?
+              <ariaComponents.Text nowrap color="current">
+                {titleElement}
+              </ariaComponents.Text>
+            : titleElement}
+          </div>
+        )}
+
+        {descriptionElement != null && (
+          <div>
+            {typeof descriptionElement === 'string' ?
+              <ariaComponents.Text variant="body" color="current" truncate="2">
+                {descriptionElement}
+              </ariaComponents.Text>
+            : descriptionElement}
+          </div>
+        )}
+      </div>
+      <div className={styles.content()}>
+        {typeof children === 'function' ? children(renderStepProps) : children}
+      </div>
+    </div>
+  )
+}
diff --git a/app/dashboard/src/components/Stepper/StepContent.tsx b/app/dashboard/src/components/Stepper/StepContent.tsx
new file mode 100644
index 000000000000..3a4c98395d07
--- /dev/null
+++ b/app/dashboard/src/components/Stepper/StepContent.tsx
@@ -0,0 +1,42 @@
+/**
+ * @file
+ * Component to render the step content.
+ */
+import type { ReactElement, ReactNode } from 'react'
+import { useStepperContext } from './StepperProvider'
+import type { RenderChildrenProps } from './types'
+
+/**
+ * Props for {@link StepContent} component.
+ */
+export interface StepContentProps {
+  readonly index: number
+  readonly children: ReactNode | ((props: RenderChildrenProps) => ReactNode)
+  readonly forceRender?: boolean
+}
+
+/**
+ * Step content component. Renders the step content if the step is current or if `forceRender` is true.
+ */
+export function StepContent(props: StepContentProps): ReactElement | null {
+  const { index, children, forceRender = false } = props
+  const { currentStep, goToStep, nextStep, previousStep, totalSteps } = useStepperContext()
+
+  const isCurrent = currentStep === index
+
+  const renderProps = {
+    currentStep,
+    totalSteps,
+    isFirst: currentStep === 0,
+    isLast: currentStep === totalSteps - 1,
+    goToStep,
+    nextStep,
+    previousStep,
+  } satisfies RenderChildrenProps
+
+  if (isCurrent || forceRender) {
+    return <>{typeof children === 'function' ? children(renderProps) : children}</>
+  } else {
+    return null
+  }
+}
diff --git a/app/dashboard/src/components/Stepper/Stepper.tsx b/app/dashboard/src/components/Stepper/Stepper.tsx
index ad3198055da2..c1b657d6aa6e 100644
--- a/app/dashboard/src/components/Stepper/Stepper.tsx
+++ b/app/dashboard/src/components/Stepper/Stepper.tsx
@@ -8,62 +8,17 @@ import * as React from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import * as tvw from 'tailwind-variants'
 
-import DoneIcon from '#/assets/check_mark.svg'
-
 import * as eventCallback from '#/hooks/eventCallbackHooks'
 
-import * as ariaComponents from '#/components/AriaComponents'
 import { ErrorBoundary } from '#/components/ErrorBoundary'
 import { Suspense } from '#/components/Suspense'
-import SvgMask from '#/components/SvgMask'
 
+import { Step } from './Step'
+import { StepContent } from './StepContent'
 import * as stepperProvider from './StepperProvider'
+import type { BaseRenderProps, RenderChildrenProps, RenderStepProps } from './types'
 import * as stepperState from './useStepperState'
 
-/**
- * Render props for the stepper component.
- */
-export interface BaseRenderProps {
-  readonly goToStep: (step: number) => void
-  readonly nextStep: () => void
-  readonly previousStep: () => void
-  readonly currentStep: number
-  readonly totalSteps: number
-}
-
-/**
- * Render props for rendering children of the stepper component.
- */
-export interface RenderChildrenProps extends BaseRenderProps {
-  readonly isFirst: boolean
-  readonly isLast: boolean
-}
-
-/**
- * Render props for lazy rendering of steps.
- */
-export interface RenderStepProps extends BaseRenderProps {
-  /**
-   * The index of the step, starting from 0.
-   */
-  readonly index: number
-  readonly isCurrent: boolean
-  readonly isCompleted: boolean
-  readonly isFirst: boolean
-  readonly isLast: boolean
-  readonly isDisabled: boolean
-}
-
-/**
- * Render props for styling the stepper component.
- */
-export interface RenderStepperProps {
-  readonly currentStep: number
-  readonly totalSteps: number
-  readonly isFirst: boolean
-  readonly isLast: boolean
-}
-
 /**
  * Props for {@link Stepper} component.
  */
@@ -228,187 +183,6 @@ export function Stepper(props: StepperProps) {
   )
 }
 
-/** A prop with the given type, or a function to produce a value of the given type. */
-type StepProp<T> = T | ((props: RenderStepProps) => T)
-
-/**
- * Props for {@link Step} component.
- */
-export interface StepProps extends RenderStepProps {
-  readonly className?: StepProp<string | null | undefined>
-  readonly icon?: StepProp<React.ReactElement | string | null | undefined>
-  readonly completeIcon?: StepProp<React.ReactElement | string | null | undefined>
-  readonly title?: StepProp<React.ReactElement | string | null | undefined>
-  readonly description?: StepProp<React.ReactElement | string | null | undefined>
-  readonly children?: StepProp<React.ReactNode>
-}
-
-const STEP_STYLES = tvw.tv({
-  base: 'relative flex items-center gap-2 select-none',
-  slots: {
-    icon: 'w-6 h-6 border-0.5 flex-none border-current rounded-full flex items-center justify-center transition-colors duration-200',
-    titleContainer: '-mt-1 flex flex-col items-start justify-start transition-colors duration-200',
-    content: 'flex-1',
-  },
-  variants: {
-    position: { first: 'rounded-l-full', last: 'rounded-r-full' },
-    status: {
-      completed: {
-        base: 'text-primary',
-        icon: 'bg-primary border-transparent text-invert',
-        content: 'text-primary',
-      },
-      current: { base: 'text-primary', content: 'text-primary/30' },
-      next: { base: 'text-primary/30', content: 'text-primary/30' },
-    },
-  },
-})
-
-/**
- * A step component is used to represent a single step in a stepper component.
- */
-function Step(props: StepProps) {
-  const {
-    index,
-    title,
-    description,
-    isCompleted,
-    goToStep,
-    nextStep,
-    previousStep,
-    totalSteps,
-    currentStep,
-    isCurrent,
-    isLast,
-    isFirst,
-    isDisabled,
-    className,
-    children,
-    icon = (
-      <ariaComponents.Text variant="subtitle" color="current" aria-hidden>
-        {index + 1}
-      </ariaComponents.Text>
-    ),
-    completeIcon = DoneIcon,
-  } = props
-
-  const { state } = stepperProvider.useStepperContext()
-
-  const renderStepProps = {
-    isCompleted,
-    goToStep,
-    nextStep,
-    previousStep,
-    totalSteps,
-    currentStep,
-    isCurrent,
-    isLast,
-    isFirst,
-    isDisabled,
-    index,
-  } satisfies RenderStepProps
-
-  const classes = typeof className === 'function' ? className(renderStepProps) : className
-  const descriptionElement =
-    typeof description === 'function' ? description(renderStepProps) : description
-  const titleElement = typeof title === 'function' ? title(renderStepProps) : title
-  const iconElement = typeof icon === 'function' ? icon(renderStepProps) : icon
-  const doneIconElement =
-    typeof completeIcon === 'function' ? completeIcon(renderStepProps) : completeIcon
-
-  const styles = STEP_STYLES({
-    className: classes,
-    position:
-      isFirst ? 'first'
-      : isLast ? 'last'
-      : undefined,
-    status:
-      isCompleted ? 'completed'
-      : isCurrent ? 'current'
-      : 'next',
-  })
-
-  const stepAnimationRotation = 30
-  const stepAnimationScale = 0.5
-
-  return (
-    <div className={styles.base()}>
-      <AnimatePresence initial={false} mode="sync" custom={state.direction}>
-        <motion.div
-          key={isCompleted ? 'done' : 'icon'}
-          className={styles.icon()}
-          initial="enter"
-          animate="center"
-          exit="exit"
-          variants={{
-            enter: {
-              rotate:
-                state.direction === 'forward' ? -stepAnimationRotation : stepAnimationRotation,
-              scale: stepAnimationScale,
-              opacity: 0,
-              position: 'absolute',
-              top: 0,
-            },
-            center: {
-              rotate: 0,
-              scale: 1,
-              opacity: 1,
-              position: 'static',
-            },
-            exit: (direction: stepperState.StepperState['direction']) => ({
-              rotate: direction === 'back' ? -stepAnimationRotation : stepAnimationRotation,
-              scale: stepAnimationScale,
-              opacity: 0,
-              position: 'absolute',
-              top: 0,
-            }),
-          }}
-          transition={{
-            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-            rotate: { type: 'spring', stiffness: 500, damping: 100, bounce: 0, duration: 0.2 },
-          }}
-        >
-          {(() => {
-            const renderIconElement = isCompleted ? doneIconElement : iconElement
-
-            if (renderIconElement == null) {
-              return null
-            } else if (typeof renderIconElement === 'string') {
-              return <SvgMask src={renderIconElement} />
-            } else {
-              return renderIconElement
-            }
-          })()}
-        </motion.div>
-      </AnimatePresence>
-
-      <div className={styles.titleContainer()}>
-        {titleElement != null && (
-          <div>
-            {typeof titleElement === 'string' ?
-              <ariaComponents.Text nowrap color="current">
-                {titleElement}
-              </ariaComponents.Text>
-            : titleElement}
-          </div>
-        )}
-
-        {descriptionElement != null && (
-          <div>
-            {typeof descriptionElement === 'string' ?
-              <ariaComponents.Text variant="body" color="current" truncate="2">
-                {descriptionElement}
-              </ariaComponents.Text>
-            : descriptionElement}
-          </div>
-        )}
-      </div>
-      <div className={styles.content()}>
-        {typeof children === 'function' ? children(renderStepProps) : children}
-      </div>
-    </div>
-  )
-}
-
 Stepper.Step = Step
+Stepper.StepContent = StepContent
 Stepper.useStepperState = stepperState.useStepperState
diff --git a/app/dashboard/src/components/Stepper/types.ts b/app/dashboard/src/components/Stepper/types.ts
new file mode 100644
index 000000000000..3873571959b1
--- /dev/null
+++ b/app/dashboard/src/components/Stepper/types.ts
@@ -0,0 +1,39 @@
+/**
+ * @file
+ *
+ * Types for the stepper component.
+ */
+
+/**
+ * Render props for the stepper component.
+ */
+export interface BaseRenderProps {
+  readonly goToStep: (step: number) => void
+  readonly nextStep: () => void
+  readonly previousStep: () => void
+  readonly currentStep: number
+  readonly totalSteps: number
+}
+
+/**
+ * Render props for rendering children of the stepper component.
+ */
+export interface RenderChildrenProps extends BaseRenderProps {
+  readonly isFirst: boolean
+  readonly isLast: boolean
+}
+
+/**
+ * Render props for lazy rendering of steps.
+ */
+export interface RenderStepProps extends BaseRenderProps {
+  /**
+   * The index of the step, starting from 0.
+   */
+  readonly index: number
+  readonly isCurrent: boolean
+  readonly isCompleted: boolean
+  readonly isFirst: boolean
+  readonly isLast: boolean
+  readonly isDisabled: boolean
+}
diff --git a/app/dashboard/src/components/Stepper/useStepperState.ts b/app/dashboard/src/components/Stepper/useStepperState.ts
index 8828b2802604..72ff5412c288 100644
--- a/app/dashboard/src/components/Stepper/useStepperState.ts
+++ b/app/dashboard/src/components/Stepper/useStepperState.ts
@@ -81,19 +81,28 @@ export function useStepperState(props: StepperStateProps): UseStepperStateResult
 
   const setCurrentStep = eventCallbackHooks.useEventCallback(
     (step: number | ((current: number) => number)) => {
-      privateSetCurrentStep((current) => {
-        const nextStep = typeof step === 'function' ? step(current.current) : step
-        const direction = nextStep > current.current ? 'forward' : 'back'
-
-        if (nextStep < 0) {
-          return { current: 0, direction: 'back-none' }
-        } else if (nextStep > steps - 1) {
-          onCompletedStableCallback()
-          return { current: steps - 1, direction: 'forward-none' }
-        } else {
-          onStepChangeStableCallback(nextStep, direction)
-          return { current: nextStep, direction }
-        }
+      React.startTransition(() => {
+        privateSetCurrentStep((current) => {
+          const nextStep = typeof step === 'function' ? step(current.current) : step
+          const direction = nextStep > current.current ? 'forward' : 'back'
+
+          if (nextStep < 0) {
+            return {
+              current: 0,
+              direction: 'back-none',
+            }
+          } else if (nextStep > steps - 1) {
+            onCompletedStableCallback()
+            return {
+              current: steps - 1,
+              direction: 'forward-none',
+            }
+          } else {
+            onStepChangeStableCallback(nextStep, direction)
+
+            return { current: nextStep, direction }
+          }
+        })
       })
     },
   )
diff --git a/app/dashboard/src/components/aria.tsx b/app/dashboard/src/components/aria.tsx
index d253b1d3badc..d7217fe9e7c1 100644
--- a/app/dashboard/src/components/aria.tsx
+++ b/app/dashboard/src/components/aria.tsx
@@ -3,7 +3,6 @@ import type { Mutable } from 'enso-common/src/utilities/data/object'
 import * as aria from 'react-aria'
 
 export type * from '@react-types/shared'
-// @ts-expect-error The conflicting exports are props types ONLY.
 export * from 'react-aria'
 // @ts-expect-error The conflicting exports are props types ONLY.
 export * from 'react-aria-components'
diff --git a/app/dashboard/src/components/dashboard/AssetRow.tsx b/app/dashboard/src/components/dashboard/AssetRow.tsx
index d6656d850ee6..544aa6cb1b8f 100644
--- a/app/dashboard/src/components/dashboard/AssetRow.tsx
+++ b/app/dashboard/src/components/dashboard/AssetRow.tsx
@@ -160,9 +160,17 @@ export const AssetRow = React.memo(function AssetRow(props: AssetRowProps) {
   const grabKeyboardFocusRef = useSyncRef(grabKeyboardFocus)
   const asset = item.item
   const [insertionVisibility, setInsertionVisibility] = React.useState(Visibility.visible)
-  const [rowState, setRowState] = React.useState<assetsTable.AssetRowState>(() =>
+  const [innerRowState, setRowState] = React.useState<assetsTable.AssetRowState>(() =>
     object.merge(assetRowUtils.INITIAL_ROW_STATE, { setVisibility: setInsertionVisibility }),
   )
+
+  const isNewlyCreated = useStore(driveStore, ({ newestFolderId }) => newestFolderId === asset.id)
+  const isEditingName = innerRowState.isEditingName || isNewlyCreated
+
+  const rowState = React.useMemo(() => {
+    return object.merge(innerRowState, { isEditingName })
+  }, [isEditingName, innerRowState])
+
   const nodeParentKeysRef = React.useRef<{
     readonly nodeMap: WeakRef<ReadonlyMap<backendModule.AssetId, assetTreeNode.AnyAssetTreeNode>>
     readonly parentKeys: Map<backendModule.AssetId, backendModule.DirectoryId>
@@ -193,6 +201,7 @@ export const AssetRow = React.memo(function AssetRow(props: AssetRowProps) {
   const getDatalinkMutation = useMutation(backendMutationOptions(backend, 'getDatalink'))
   const createPermissionMutation = useMutation(backendMutationOptions(backend, 'createPermission'))
   const associateTagMutation = useMutation(backendMutationOptions(backend, 'associateTag'))
+  const editDescriptionMutation = useMutation(backendMutationOptions(backend, 'updateAsset'))
 
   const setSelected = useEventCallback((newSelected: boolean) => {
     const { selectedKeys } = driveStore.getState()
@@ -224,9 +233,11 @@ export const AssetRow = React.memo(function AssetRow(props: AssetRowProps) {
   }, [grabKeyboardFocusRef, isKeyboardSelected, item])
 
   React.useImperativeHandle(updateAssetRef, () => ({ setAsset, item }))
+
   if (updateAssetRef.current) {
     updateAssetRef.current[item.item.id] = setAsset
   }
+
   React.useEffect(() => {
     return () => {
       if (updateAssetRef.current) {
@@ -250,25 +261,25 @@ export const AssetRow = React.memo(function AssetRow(props: AssetRowProps) {
     [doDeleteRaw, item.item],
   )
 
-  const doTriggerDescriptionEdit = React.useCallback(() => {
+  const doTriggerDescriptionEdit = useEventCallback(() => {
     setModal(
       <EditAssetDescriptionModal
         doChangeDescription={async (description) => {
           if (description !== asset.description) {
             setAsset(object.merger({ description }))
 
-            await backend
-              .updateAsset(item.item.id, { parentDirectoryId: null, description }, item.item.title)
-              .catch((error) => {
-                setAsset(object.merger({ description: asset.description }))
-                throw error
-              })
+            // eslint-disable-next-line no-restricted-syntax
+            return editDescriptionMutation.mutateAsync([
+              asset.id,
+              { description, parentDirectoryId: null },
+              item.item.title,
+            ])
           }
         }}
         initialDescription={asset.description}
       />,
     )
-  }, [setModal, asset.description, setAsset, backend, item.item.id, item.item.title])
+  })
 
   const clearDragState = React.useCallback(() => {
     setIsDraggedOver(false)
@@ -331,7 +342,7 @@ export const AssetRow = React.memo(function AssetRow(props: AssetRowProps) {
           break
         }
         default: {
-          return
+          break
         }
       }
     } else {
@@ -549,18 +560,18 @@ export const AssetRow = React.memo(function AssetRow(props: AssetRowProps) {
         }
         case AssetEventType.deleteLabel: {
           setAsset((oldAsset) => {
-            // The IIFE is required to prevent TypeScript from narrowing this value.
-            let found = (() => false)()
-            const labels =
-              oldAsset.labels?.filter((label) => {
-                if (label === event.labelName) {
-                  found = true
-                  return false
-                } else {
-                  return true
-                }
-              }) ?? null
-            return found ? object.merge(oldAsset, { labels }) : oldAsset
+            const oldLabels = oldAsset.labels ?? []
+            const labels: backendModule.LabelName[] = []
+
+            for (const label of oldLabels) {
+              if (label !== event.labelName) {
+                labels.push(label)
+              }
+            }
+
+            return oldLabels.length !== labels.length ?
+                object.merge(oldAsset, { labels })
+              : oldAsset
           })
           break
         }
diff --git a/app/dashboard/src/components/dashboard/DatalinkInput.tsx b/app/dashboard/src/components/dashboard/DatalinkInput.tsx
index de2363dfffbe..f9653c30faf4 100644
--- a/app/dashboard/src/components/dashboard/DatalinkInput.tsx
+++ b/app/dashboard/src/components/dashboard/DatalinkInput.tsx
@@ -6,10 +6,9 @@ import type * as jsonSchemaInput from '#/components/JSONSchemaInput'
 import JSONSchemaInput from '#/components/JSONSchemaInput'
 
 import { FieldError } from '#/components/aria'
-import type { FieldValues, FormInstance, TSchema } from '#/components/AriaComponents'
-import { useFormContext } from '#/components/AriaComponents/Form/components/useFormContext'
+import type { FieldPath, FormInstance, TSchema } from '#/components/AriaComponents'
+import { Form } from '#/components/AriaComponents'
 import * as error from '#/utilities/error'
-import { Controller, type FieldPath } from 'react-hook-form'
 
 // =================
 // === Constants ===
@@ -52,17 +51,17 @@ export default function DatalinkInput(props: DatalinkInputProps) {
 export interface DatalinkFormInputProps<Schema extends TSchema>
   extends Omit<DatalinkInputProps, 'onChange' | 'value'> {
   readonly form?: FormInstance<Schema>
-  readonly name: FieldPath<FieldValues<Schema>>
+  readonly name: FieldPath<Schema>
 }
 
 /** A dynamic wizard for creating an arbitrary type of Datalink. */
 export function DatalinkFormInput<Schema extends TSchema>(props: DatalinkFormInputProps<Schema>) {
-  const fallbackForm = useFormContext()
-  // eslint-disable-next-line no-restricted-syntax
-  const { form = fallbackForm as unknown as FormInstance<Schema>, name, ...inputProps } = props
+  const { name, ...inputProps } = props
+
+  const form = Form.useFormContext(props.form)
 
   return (
-    <Controller
+    <Form.Controller
       control={form.control}
       name={name}
       render={({ field, fieldState }) => {
diff --git a/app/dashboard/src/components/dashboard/DatalinkNameColumn.tsx b/app/dashboard/src/components/dashboard/DatalinkNameColumn.tsx
index f4e55e99a255..f50e8742617e 100644
--- a/app/dashboard/src/components/dashboard/DatalinkNameColumn.tsx
+++ b/app/dashboard/src/components/dashboard/DatalinkNameColumn.tsx
@@ -3,8 +3,6 @@ import DatalinkIcon from '#/assets/datalink.svg'
 
 import * as setAssetHooks from '#/hooks/setAssetHooks'
 
-import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
-
 import type * as column from '#/components/dashboard/column'
 import EditableSpan from '#/components/EditableSpan'
 
@@ -15,7 +13,6 @@ import * as eventModule from '#/utilities/event'
 import * as indent from '#/utilities/indent'
 import * as object from '#/utilities/object'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
-import { isOnMacOS } from 'enso-common/src/detect'
 
 // ====================
 // === DatalinkName ===
@@ -30,7 +27,7 @@ export interface DatalinkNameColumnProps extends column.AssetColumnProps {}
 export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
   const { item, setItem, selected, rowState, setRowState, isEditable } = props
   const setIsAssetPanelTemporarilyVisible = useSetIsAssetPanelTemporarilyVisible()
-  const inputBindings = inputBindingsProvider.useInputBindings()
+
   if (item.type !== backendModule.AssetType.datalink) {
     // eslint-disable-next-line no-restricted-syntax
     throw new Error('`DatalinkNameColumn` can only display Datalinks.')
@@ -49,12 +46,6 @@ export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
   // Backend implementation is tracked here: https://github.com/enso-org/cloud-v2/issues/505.
   const doRename = () => Promise.resolve(null)
 
-  const handleClick = inputBindings.handler({
-    editName: () => {
-      setIsEditing(true)
-    },
-  })
-
   return (
     <div
       className={tailwindMerge.twMerge(
@@ -67,9 +58,7 @@ export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
         }
       }}
       onClick={(event) => {
-        if (handleClick(event)) {
-          // Already handled.
-        } else if (eventModule.isSingleClick(event) && isOnMacOS() && selected) {
+        if (eventModule.isSingleClick(event) && selected) {
           setIsEditing(true)
         } else if (eventModule.isDoubleClick(event)) {
           event.stopPropagation()
diff --git a/app/dashboard/src/components/dashboard/DirectoryNameColumn.tsx b/app/dashboard/src/components/dashboard/DirectoryNameColumn.tsx
index 0f433fa255d0..26c033f5d96e 100644
--- a/app/dashboard/src/components/dashboard/DirectoryNameColumn.tsx
+++ b/app/dashboard/src/components/dashboard/DirectoryNameColumn.tsx
@@ -9,7 +9,6 @@ import * as setAssetHooks from '#/hooks/setAssetHooks'
 import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 
 import { useDriveStore } from '#/providers/DriveProvider'
-import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as ariaComponents from '#/components/AriaComponents'
@@ -25,7 +24,6 @@ import * as object from '#/utilities/object'
 import * as string from '#/utilities/string'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
 import * as validation from '#/utilities/validation'
-import { isOnMacOS } from 'enso-common/src/detect'
 
 // =====================
 // === DirectoryName ===
@@ -43,7 +41,6 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
   const { doToggleDirectoryExpansion, expandedDirectoryIds } = state
   const toastAndLog = toastAndLogHooks.useToastAndLog()
   const { getText } = textProvider.useText()
-  const inputBindings = inputBindingsProvider.useInputBindings()
   const driveStore = useDriveStore()
 
   if (item.type !== backendModule.AssetType.directory) {
@@ -62,6 +59,10 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
     if (isEditable) {
       setRowState(object.merger({ isEditingName }))
     }
+
+    if (!isEditingName) {
+      driveStore.setState({ newestFolderId: null })
+    }
   }
 
   const doRename = async (newTitle: string) => {
@@ -73,12 +74,7 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
         const oldTitle = asset.title
         setAsset(object.merger({ title: newTitle }))
         try {
-          const updated = await updateDirectoryMutation.mutateAsync([
-            asset.id,
-            { title: newTitle },
-            asset.title,
-          ])
-          setAsset(object.merger(updated))
+          await updateDirectoryMutation.mutateAsync([asset.id, { title: newTitle }, asset.title])
         } catch (error) {
           toastAndLog('renameFolderError', error)
           setAsset(object.merger({ title: oldTitle }))
@@ -87,12 +83,6 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
     }
   }
 
-  const handleClick = inputBindings.handler({
-    editName: () => {
-      setIsEditing(true)
-    },
-  })
-
   return (
     <div
       className={tailwindMerge.twMerge(
@@ -105,11 +95,8 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
         }
       }}
       onClick={(event) => {
-        if (handleClick(event)) {
-          // Already handled.
-        } else if (
+        if (
           eventModule.isSingleClick(event) &&
-          isOnMacOS() &&
           selected &&
           driveStore.getState().selectedKeys.size === 1
         ) {
diff --git a/app/dashboard/src/components/dashboard/FileNameColumn.tsx b/app/dashboard/src/components/dashboard/FileNameColumn.tsx
index 58204839052f..2266b11a127d 100644
--- a/app/dashboard/src/components/dashboard/FileNameColumn.tsx
+++ b/app/dashboard/src/components/dashboard/FileNameColumn.tsx
@@ -5,8 +5,6 @@ import { backendMutationOptions } from '#/hooks/backendHooks'
 import * as setAssetHooks from '#/hooks/setAssetHooks'
 import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 
-import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
-
 import type * as column from '#/components/dashboard/column'
 import EditableSpan from '#/components/EditableSpan'
 import SvgMask from '#/components/SvgMask'
@@ -19,7 +17,6 @@ import * as indent from '#/utilities/indent'
 import * as object from '#/utilities/object'
 import * as string from '#/utilities/string'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
-import { isOnMacOS } from 'enso-common/src/detect'
 
 // ================
 // === FileName ===
@@ -35,7 +32,6 @@ export default function FileNameColumn(props: FileNameColumnProps) {
   const { item, setItem, selected, state, rowState, setRowState, isEditable } = props
   const { backend, nodeMap } = state
   const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const inputBindings = inputBindingsProvider.useInputBindings()
 
   if (item.type !== backendModule.AssetType.file) {
     // eslint-disable-next-line no-restricted-syntax
@@ -74,12 +70,6 @@ export default function FileNameColumn(props: FileNameColumnProps) {
     }
   }
 
-  const handleClick = inputBindings.handler({
-    editName: () => {
-      setIsEditing(true)
-    },
-  })
-
   return (
     <div
       className={tailwindMerge.twMerge(
@@ -92,9 +82,7 @@ export default function FileNameColumn(props: FileNameColumnProps) {
         }
       }}
       onClick={(event) => {
-        if (handleClick(event)) {
-          // Already handled.
-        } else if (eventModule.isSingleClick(event) && isOnMacOS() && selected) {
+        if (eventModule.isSingleClick(event) && selected) {
           if (!isCloud) {
             setIsEditing(true)
           }
diff --git a/app/dashboard/src/components/dashboard/ProjectNameColumn.tsx b/app/dashboard/src/components/dashboard/ProjectNameColumn.tsx
index e8cf48dbc1f0..baed616dde92 100644
--- a/app/dashboard/src/components/dashboard/ProjectNameColumn.tsx
+++ b/app/dashboard/src/components/dashboard/ProjectNameColumn.tsx
@@ -10,7 +10,6 @@ import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 
 import * as authProvider from '#/providers/AuthProvider'
 import { useDriveStore } from '#/providers/DriveProvider'
-import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import type * as column from '#/components/dashboard/column'
@@ -56,7 +55,6 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
   const toastAndLog = toastAndLogHooks.useToastAndLog()
   const { user } = authProvider.useFullUserSession()
   const { getText } = textProvider.useText()
-  const inputBindings = inputBindingsProvider.useInputBindings()
   const driveStore = useDriveStore()
   const doOpenProject = projectHooks.useOpenProject()
 
@@ -116,12 +114,6 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
     }
   }
 
-  const handleClick = inputBindings.handler({
-    editName: () => {
-      setIsEditing(true)
-    },
-  })
-
   return (
     <div
       className={tailwindMerge.twMerge(
@@ -136,8 +128,6 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
       onClick={(event) => {
         if (rowState.isEditingName || isOtherUserUsingProject) {
           // The project should neither be edited nor opened in these cases.
-        } else if (handleClick(event)) {
-          // Already handled.
         } else if (
           !isRunning &&
           eventModule.isSingleClick(event) &&
diff --git a/app/dashboard/src/components/dashboard/SecretNameColumn.tsx b/app/dashboard/src/components/dashboard/SecretNameColumn.tsx
index 517e90935316..ea292b0a3a6b 100644
--- a/app/dashboard/src/components/dashboard/SecretNameColumn.tsx
+++ b/app/dashboard/src/components/dashboard/SecretNameColumn.tsx
@@ -6,7 +6,6 @@ import KeyIcon from '#/assets/key.svg'
 import { backendMutationOptions } from '#/hooks/backendHooks'
 import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 
-import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
 import * as modalProvider from '#/providers/ModalProvider'
 
 import * as ariaComponents from '#/components/AriaComponents'
@@ -21,7 +20,6 @@ import * as eventModule from '#/utilities/event'
 import * as indent from '#/utilities/indent'
 import * as object from '#/utilities/object'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
-import { isOnMacOS } from 'enso-common/src/detect'
 
 // =====================
 // === ConnectorName ===
@@ -38,11 +36,12 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
   const { backend } = state
   const toastAndLog = toastAndLogHooks.useToastAndLog()
   const { setModal } = modalProvider.useSetModal()
-  const inputBindings = inputBindingsProvider.useInputBindings()
+
   if (item.type !== backendModule.AssetType.secret) {
     // eslint-disable-next-line no-restricted-syntax
     throw new Error('`SecretNameColumn` can only display secrets.')
   }
+
   const asset = item.item
 
   const updateSecretMutation = useMutation(backendMutationOptions(backend, 'updateSecret'))
@@ -53,12 +52,6 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
     }
   }
 
-  const handleClick = inputBindings.handler({
-    editName: () => {
-      setIsEditing(true)
-    },
-  })
-
   return (
     <div
       className={tailwindMerge.twMerge(
@@ -71,9 +64,7 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
         }
       }}
       onClick={(event) => {
-        if (handleClick(event)) {
-          // Already handled.
-        } else if (eventModule.isSingleClick(event) && isOnMacOS() && selected) {
+        if (eventModule.isSingleClick(event) && selected) {
           setIsEditing(true)
         } else if (eventModule.isDoubleClick(event) && isEditable) {
           event.stopPropagation()
diff --git a/app/dashboard/src/components/dashboard/TheModal.tsx b/app/dashboard/src/components/dashboard/TheModal.tsx
index 4df237732db8..12cdf9eed573 100644
--- a/app/dashboard/src/components/dashboard/TheModal.tsx
+++ b/app/dashboard/src/components/dashboard/TheModal.tsx
@@ -1,7 +1,9 @@
 /** @file A component that renders the modal instance from the modal React Context. */
 import * as React from 'react'
 
+import { DialogTrigger } from '#/components/AriaComponents'
 import * as modalProvider from '#/providers/ModalProvider'
+import { AnimatePresence, motion } from 'framer-motion'
 
 // ================
 // === TheModal ===
@@ -9,7 +11,25 @@ import * as modalProvider from '#/providers/ModalProvider'
 
 /** Renders the modal instance from the modal React Context (if any). */
 export default function TheModal() {
-  const { modal } = modalProvider.useModal()
+  const { modal, key } = modalProvider.useModal()
 
-  return <>{modal}</>
+  return (
+    <AnimatePresence>
+      {modal && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          /* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
+          exit={{ opacity: 0 }}
+          /* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
+          transition={{ duration: 0.2 }}
+        >
+          <DialogTrigger key={key} defaultOpen>
+            <></>
+            {modal}
+          </DialogTrigger>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
 }
diff --git a/app/dashboard/src/components/dashboard/column/SharedWithColumn.tsx b/app/dashboard/src/components/dashboard/column/SharedWithColumn.tsx
index ccf6a4b2af0a..f50b0eead9db 100644
--- a/app/dashboard/src/components/dashboard/column/SharedWithColumn.tsx
+++ b/app/dashboard/src/components/dashboard/column/SharedWithColumn.tsx
@@ -48,6 +48,7 @@ export default function SharedWithColumn(props: SharedWithColumnPropsInternal) {
   const dispatchAssetEvent = eventListProvider.useDispatchAssetEvent()
   const { isFeatureUnderPaywall } = billingHooks.usePaywall({ plan: user.plan })
   const isUnderPaywall = isFeatureUnderPaywall('share')
+  const assetPermissions = asset.permissions ?? []
   const { setModal } = modalProvider.useSetModal()
   const self = permissions.tryFindSelfPermission(user, asset.permissions)
   const plusButtonRef = React.useRef<HTMLButtonElement>(null)
@@ -70,7 +71,12 @@ export default function SharedWithColumn(props: SharedWithColumnPropsInternal) {
 
   return (
     <div className="group flex items-center gap-column-items">
-      {(asset.permissions ?? []).map((other, idx) => (
+      {(category.type === 'trash' ?
+        assetPermissions.filter(
+          (permission) => permission.permission === permissions.PermissionAction.own,
+        )
+      : assetPermissions
+      ).map((other, idx) => (
         <PermissionDisplay
           key={backendModule.getAssetPermissionId(other) + idx}
           action={other.permission}
diff --git a/app/dashboard/src/components/dashboard/column/columnUtils.ts b/app/dashboard/src/components/dashboard/column/columnUtils.ts
index 096ed76a3c02..659e9da16e67 100644
--- a/app/dashboard/src/components/dashboard/column/columnUtils.ts
+++ b/app/dashboard/src/components/dashboard/column/columnUtils.ts
@@ -9,6 +9,7 @@ import PeopleIcon from '#/assets/people.svg'
 import TagIcon from '#/assets/tag.svg'
 import TimeIcon from '#/assets/time.svg'
 
+import type { Category } from '#/layouts/CategorySwitcher/Category'
 import * as backend from '#/services/Backend'
 
 // =============
@@ -82,13 +83,18 @@ export const COLUMN_CSS_CLASS: Readonly<Record<Column, string>> = {
 // =====================
 
 /** Return the full list of columns given the relevant current state. */
-export function getColumnList(user: backend.User, backendType: backend.BackendType) {
+export function getColumnList(
+  user: backend.User,
+  backendType: backend.BackendType,
+  category: Category,
+) {
   const isCloud = backendType === backend.BackendType.remote
   const isEnterprise = user.plan === backend.Plan.enterprise
+  const isTrash = category.type === 'trash'
   const columns = [
     Column.name,
     Column.modified,
-    isCloud && isEnterprise && Column.sharedWith,
+    isCloud && (isEnterprise || isTrash) && Column.sharedWith,
     isCloud && Column.labels,
     isCloud && Column.accessedByProjects,
     isCloud && Column.accessedData,
diff --git a/app/dashboard/src/components/dashboard/columnHeading/SharedWithColumnHeading.tsx b/app/dashboard/src/components/dashboard/columnHeading/SharedWithColumnHeading.tsx
index ca629bc1dd26..e7e8b393c543 100644
--- a/app/dashboard/src/components/dashboard/columnHeading/SharedWithColumnHeading.tsx
+++ b/app/dashboard/src/components/dashboard/columnHeading/SharedWithColumnHeading.tsx
@@ -11,7 +11,7 @@ import { useText } from '#/providers/TextProvider'
 /** A heading for the "Shared with" column. */
 export default function SharedWithColumnHeading(props: AssetColumnHeadingProps) {
   const { state } = props
-  const { hideColumn } = state
+  const { category, hideColumn } = state
   const { getText } = useText()
 
   const { user } = useFullUserSession()
@@ -33,7 +33,11 @@ export default function SharedWithColumnHeading(props: AssetColumnHeadingProps)
       />
 
       <div className="flex items-center gap-1">
-        <Text className="text-sm font-semibold">{getText('sharedWithColumnName')}</Text>
+        <Text className="text-sm font-semibold">
+          {category.type === 'trash' ?
+            getText('rootFolderColumnName')
+          : getText('sharedWithColumnName')}
+        </Text>
 
         {isUnderPaywall && (
           <PaywallDialogButton feature="share" variant="icon" children={false} size="medium" />
diff --git a/app/dashboard/src/configurations/inputBindings.ts b/app/dashboard/src/configurations/inputBindings.ts
index e889f1dd4f4d..5a200d396863 100644
--- a/app/dashboard/src/configurations/inputBindings.ts
+++ b/app/dashboard/src/configurations/inputBindings.ts
@@ -108,7 +108,6 @@ export const BINDINGS = inputBindings.defineBindings({
   // TODO: support handlers for double click; make single click handlers not work on double click events
   // [MouseAction.open]: [mousebind(MouseAction.open, [], MouseButton.left, 2)],
   // [MouseAction.run]: [mousebind(MouseAction.run, ['Shift'], MouseButton.left, 2)],
-  editName: { name: 'Edit Name', bindings: ['Mod+PointerMain'], rebindable: false },
   selectAdditional: { name: 'Select Additional', bindings: ['Mod+PointerMain'], rebindable: false },
   selectRange: { name: 'Select Range', bindings: ['Shift+PointerMain'], rebindable: false },
   selectAdditionalRange: {
diff --git a/app/dashboard/src/globals.d.ts b/app/dashboard/src/globals.d.ts
index 6a03d16d5eb8..6c399e31ff2d 100644
--- a/app/dashboard/src/globals.d.ts
+++ b/app/dashboard/src/globals.d.ts
@@ -203,13 +203,13 @@ declare global {
       // @ts-expect-error The index signature is intentional to disallow unknown env vars.
       readonly ENSO_CLOUD_STRIPE_KEY?: string
       // @ts-expect-error The index signature is intentional to disallow unknown env vars.
-      readonly ENSO_CLOUD_COGNITO_USER_POOL_ID?: string
+      readonly ENSO_CLOUD_COGNITO_USER_POOL_ID: string
       // @ts-expect-error The index signature is intentional to disallow unknown env vars.
-      readonly ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID?: string
+      readonly ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID: string
       // @ts-expect-error The index signature is intentional to disallow unknown env vars.
-      readonly ENSO_CLOUD_COGNITO_DOMAIN?: string
+      readonly ENSO_CLOUD_COGNITO_DOMAIN: string
       // @ts-expect-error The index signature is intentional to disallow unknown env vars.
-      readonly ENSO_CLOUD_COGNITO_REGION?: string
+      readonly ENSO_CLOUD_COGNITO_REGION: string
       // @ts-expect-error The index signature is intentional to disallow unknown env vars.
       readonly ENSO_CLOUD_GOOGLE_ANALYTICS_TAG?: string
       // @ts-expect-error The index signature is intentional to disallow unknown env vars.
diff --git a/app/dashboard/src/hooks/autoFocusHooks.ts b/app/dashboard/src/hooks/autoFocusHooks.ts
new file mode 100644
index 000000000000..9244b6d45429
--- /dev/null
+++ b/app/dashboard/src/hooks/autoFocusHooks.ts
@@ -0,0 +1,110 @@
+/**
+ * @file
+ * Hooks for automatically focusing elements.
+ */
+
+import { useInteractOutside } from '#/components/aria'
+import { useEffect, useRef } from 'react'
+import { useEventCallback } from './eventCallbackHooks'
+
+/**
+ * Props for the {@link useAutoFocus} hook.
+ */
+export interface UseAutoFocusProps {
+  readonly ref: React.RefObject<HTMLElement>
+  readonly disabled?: boolean | undefined
+}
+
+const FOCUS_TRYOUT_DELAY = 300
+const FOCUS_DELAY = 100
+
+/**
+ * Hook for automatically focusing an element.
+ * Tries to focus the element for a period of time, and if it fails, it will
+ * try again in a loop.
+ * If user interacts with the page, the focus will be cancelled.
+ */
+export function useAutoFocus(props: UseAutoFocusProps) {
+  const { ref, disabled = false } = props
+
+  const shouldForceFocus = useRef(false)
+  const scheduledFocusRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useInteractOutside({
+    ref,
+    onInteractOutside: () => {
+      // If the user clicks outside of the element, we should not force focus.
+      shouldForceFocus.current = false
+      clearScheduledFocus()
+    },
+  })
+
+  const scheduleFocus = useEventCallback(() => {
+    clearScheduledFocus()
+
+    scheduledFocusRef.current = setTimeout(() => {
+      const element = ref.current
+      if (element != null) {
+        element.focus()
+      }
+
+      scheduledFocusRef.current = null
+    }, FOCUS_DELAY)
+
+    return () => {
+      clearScheduledFocus()
+    }
+  })
+
+  const clearScheduledFocus = useEventCallback(() => {
+    if (scheduledFocusRef.current != null) {
+      clearTimeout(scheduledFocusRef.current)
+      scheduledFocusRef.current = null
+    }
+  })
+
+  useEffect(() => {
+    if (!disabled) {
+      shouldForceFocus.current = true
+    }
+  }, [disabled])
+
+  useEffect(() => {
+    if (!disabled && shouldForceFocus.current) {
+      return scheduleFocus()
+    }
+  }, [disabled, scheduleFocus, clearScheduledFocus])
+
+  useEffect(() => {
+    if (disabled) {
+      return
+    }
+
+    const body = document.body
+
+    const handleFocus = () => {
+      const activeElement = document.activeElement
+      const element = ref instanceof HTMLElement ? ref : ref.current
+
+      if (element == null) {
+        return
+      }
+
+      if (activeElement !== element && shouldForceFocus.current) {
+        scheduleFocus()
+      }
+    }
+
+    const id = setTimeout(() => {
+      shouldForceFocus.current = false
+      clearScheduledFocus()
+    }, FOCUS_TRYOUT_DELAY)
+
+    body.addEventListener('focus', handleFocus, { capture: true, passive: true })
+
+    return () => {
+      body.removeEventListener('focus', handleFocus)
+      clearTimeout(id)
+    }
+  }, [disabled, scheduleFocus, ref, clearScheduledFocus])
+}
diff --git a/app/dashboard/src/hooks/backendHooks.ts b/app/dashboard/src/hooks/backendHooks.ts
index 4c7b156a5723..d5ba0aaabe94 100644
--- a/app/dashboard/src/hooks/backendHooks.ts
+++ b/app/dashboard/src/hooks/backendHooks.ts
@@ -131,6 +131,19 @@ const INVALIDATION_MAP: Partial<
   deleteTag: ['listTags'],
   acceptInvitation: [INVALIDATE_ALL_QUERIES],
   declineInvitation: ['usersMe'],
+  createProject: ['listDirectory'],
+  duplicateProject: ['listDirectory'],
+  createDirectory: ['listDirectory'],
+  createSecret: ['listDirectory'],
+  updateSecret: ['listDirectory'],
+  createDatalink: ['listDirectory'],
+  uploadFile: ['listDirectory'],
+  copyAsset: ['listDirectory', 'listAssetVersions'],
+  deleteAsset: ['listDirectory', 'listAssetVersions'],
+  undoDeleteAsset: ['listDirectory'],
+  updateAsset: ['listDirectory', 'listAssetVersions'],
+  closeProject: ['listDirectory', 'listAssetVersions'],
+  updateDirectory: ['listDirectory'],
 }
 
 export function backendMutationOptions<Method extends MutationMethod>(
diff --git a/app/dashboard/src/hooks/searchParamsStateHooks.ts b/app/dashboard/src/hooks/searchParamsStateHooks.ts
index 0d0c09c283c8..1ff3f7ba1547 100644
--- a/app/dashboard/src/hooks/searchParamsStateHooks.ts
+++ b/app/dashboard/src/hooks/searchParamsStateHooks.ts
@@ -22,9 +22,20 @@ import * as safeJsonParse from '#/utilities/safeJsonParse'
  * The return type of the `useSearchParamsState` hook.
  */
 type SearchParamsStateReturnType<T> = Readonly<
-  [value: T, setValue: (nextValue: React.SetStateAction<T>) => void, clear: () => void]
+  [
+    value: T,
+    setValue: (nextValue: React.SetStateAction<T>, params?: SearchParamsSetOptions) => void,
+    clear: (replace?: boolean) => void,
+  ]
 >
 
+/**
+ * Set options for the `set` function.
+ */
+export interface SearchParamsSetOptions {
+  readonly replace?: boolean
+}
+
 // ============================
 // === useSearchParamsState ===
 // ============================
@@ -82,18 +93,22 @@ export function useSearchParamsState<T = unknown>(
    * @param nextValue - The next value to set.
    * @returns void
    */
-  const setValue = eventCallback.useEventCallback((nextValue: React.SetStateAction<T>) => {
-    if (nextValue instanceof Function) {
-      nextValue = nextValue(value)
-    }
-
-    if (nextValue === lazyDefaultValueInitializer()) {
-      clear()
-    } else {
-      searchParams.set(prefixedKey, JSON.stringify(nextValue))
-      setSearchParams(searchParams)
-    }
-  })
+  const setValue = eventCallback.useEventCallback(
+    (nextValue: React.SetStateAction<T>, params: SearchParamsSetOptions = {}) => {
+      const { replace = false } = params
+
+      if (nextValue instanceof Function) {
+        nextValue = nextValue(value)
+      }
+
+      if (nextValue === lazyDefaultValueInitializer()) {
+        clear()
+      } else {
+        searchParams.set(prefixedKey, JSON.stringify(nextValue))
+        setSearchParams(searchParams, { replace, preventScrollReset: true })
+      }
+    },
+  )
 
   return [value, setValue, clear]
 }
diff --git a/app/dashboard/src/layouts/AssetContextMenu.tsx b/app/dashboard/src/layouts/AssetContextMenu.tsx
index f8198d9199d6..c58c45542368 100644
--- a/app/dashboard/src/layouts/AssetContextMenu.tsx
+++ b/app/dashboard/src/layouts/AssetContextMenu.tsx
@@ -320,6 +320,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
                 doAction={() => {
                   setModal(
                     <UpsertSecretModal
+                      defaultOpen
                       id={asset.id}
                       name={asset.title}
                       doCreate={async (_name, value) => {
@@ -361,8 +362,18 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
               label={isCloud ? getText('moveToTrashShortcut') : getText('deleteShortcut')}
               doAction={() => {
                 if (isCloud) {
-                  unsetModal()
-                  doDelete()
+                  if (asset.type === backendModule.AssetType.directory) {
+                    setModal(
+                      <ConfirmDeleteModal
+                        defaultOpen
+                        actionText={getText('trashTheAssetTypeTitle', asset.type, asset.title)}
+                        doDelete={doDelete}
+                      />,
+                    )
+                  } else {
+                    unsetModal()
+                    doDelete()
+                  }
                 } else {
                   setModal(
                     <ConfirmDeleteModal
@@ -451,7 +462,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
               }}
             />
           )}
-          {!isOtherUserUsingProject && (
+          {!isRunningProject && !isOtherUserUsingProject && (
             <ContextMenuEntry hidden={hidden} action="cut" doAction={doCut} />
           )}
           {(isCloud ?
diff --git a/app/dashboard/src/layouts/AssetPanel.tsx b/app/dashboard/src/layouts/AssetPanel.tsx
index 3b7831d7d5b7..73bb7351d8df 100644
--- a/app/dashboard/src/layouts/AssetPanel.tsx
+++ b/app/dashboard/src/layouts/AssetPanel.tsx
@@ -125,7 +125,7 @@ export default function AssetPanel(props: AssetPanelProps) {
       <div
         data-testid="asset-panel"
         className={tailwindMerge.twMerge(
-          'pointer-events-none absolute flex h-full w-asset-panel flex-col gap-asset-panel bg-white p-4 pl-asset-panel-l transition-[box-shadow] clip-path-left-shadow',
+          'pointer-events-none absolute flex h-full w-asset-panel flex-col gap-asset-panel bg-invert p-4 pl-asset-panel-l transition-[box-shadow] clip-path-left-shadow',
           isVisible ? 'shadow-softer' : '',
         )}
         onClick={(event) => {
@@ -184,6 +184,7 @@ export default function AssetPanel(props: AssetPanelProps) {
         : <>
             {tab === AssetPanelTab.properties && (
               <AssetProperties
+                key={item.item.id}
                 backend={backend}
                 isReadonly={isReadonly}
                 item={item}
diff --git a/app/dashboard/src/layouts/AssetProperties.tsx b/app/dashboard/src/layouts/AssetProperties.tsx
index 15ad708c8639..30eb0a9137ac 100644
--- a/app/dashboard/src/layouts/AssetProperties.tsx
+++ b/app/dashboard/src/layouts/AssetProperties.tsx
@@ -45,14 +45,13 @@ export interface AssetPropertiesProps {
 
 /** Display and modify the properties of an asset. */
 export default function AssetProperties(props: AssetPropertiesProps) {
-  const { backend, item: itemRaw, setItem: setItemRaw, category } = props
+  const { backend, item, setItem, category } = props
   const { isReadonly = false } = props
 
   const { user } = authProvider.useFullUserSession()
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
   const localBackend = backendProvider.useLocalBackend()
-  const [item, setItemInner] = React.useState(itemRaw)
   const [isEditingDescription, setIsEditingDescription] = React.useState(false)
   const [queuedDescription, setQueuedDescripion] = React.useState<string | null>(null)
   const [description, setDescription] = React.useState('')
@@ -65,13 +64,7 @@ export default function AssetProperties(props: AssetPropertiesProps) {
     () => datalinkValidator.validateDatalink(datalinkValue),
     [datalinkValue],
   )
-  const setItem = React.useCallback(
-    (valueOrUpdater: React.SetStateAction<assetTreeNode.AnyAssetTreeNode>) => {
-      setItemInner(valueOrUpdater)
-      setItemRaw(valueOrUpdater)
-    },
-    [setItemRaw],
-  )
+
   const labels = useBackendQuery(backend, 'listTags', []).data ?? []
   const self = permissions.tryFindSelfPermission(user, item.item.permissions)
   const ownsThisAsset = self?.permission === permissions.PermissionAction.own
@@ -260,6 +253,7 @@ export default function AssetProperties(props: AssetPropertiesProps) {
           </table>
         </div>
       )}
+
       {isDatalink && (
         <div className="pointer-events-auto flex flex-col items-start gap-side-panel-section">
           <aria.Heading
diff --git a/app/dashboard/src/layouts/AssetVersions/AssetVersions.tsx b/app/dashboard/src/layouts/AssetVersions/AssetVersions.tsx
index 621bc4da9229..56119af85ec3 100644
--- a/app/dashboard/src/layouts/AssetVersions/AssetVersions.tsx
+++ b/app/dashboard/src/layouts/AssetVersions/AssetVersions.tsx
@@ -48,7 +48,7 @@ export default function AssetVersions(props: AssetVersionsProps) {
     readonly backendService.S3ObjectVersion[]
   >([])
   const isCloud = backend.type === backendService.BackendType.remote
-  const queryKey = ['assetVersions', item.item.id, item.item.title]
+  const queryKey = [backend.type, 'listAssetVersions', item.item.id, item.item.title]
   const versionsQuery = useAssetVersions.useAssetVersions({
     backend,
     queryKey,
diff --git a/app/dashboard/src/layouts/AssetVersions/useAssetVersions.ts b/app/dashboard/src/layouts/AssetVersions/useAssetVersions.ts
index 879fe5964ee3..c6546ab63774 100644
--- a/app/dashboard/src/layouts/AssetVersions/useAssetVersions.ts
+++ b/app/dashboard/src/layouts/AssetVersions/useAssetVersions.ts
@@ -20,7 +20,7 @@ export interface UseAssetVersionsParams {
 /** Fetches the versions of the selected project asset. */
 export function useAssetVersions(params: UseAssetVersionsParams) {
   const { enabled = true, title, assetId, backend, onError } = params
-  const { queryKey = ['assetVersions', assetId, title] } = params
+  const { queryKey = [backend.type, 'listAssetVersions', assetId, title] } = params
 
   return reactQuery.useQuery({
     queryKey,
diff --git a/app/dashboard/src/layouts/AssetsTable.tsx b/app/dashboard/src/layouts/AssetsTable.tsx
index ff4f8d164fbb..c5aaca214278 100644
--- a/app/dashboard/src/layouts/AssetsTable.tsx
+++ b/app/dashboard/src/layouts/AssetsTable.tsx
@@ -31,8 +31,10 @@ import {
   useSetCanCreateAssets,
   useSetCanDownload,
   useSetIsAssetPanelTemporarilyVisible,
+  useSetNewestFolderId,
   useSetSelectedKeys,
   useSetSuggestions,
+  useSetTargetDirectory,
   useSetVisuallySelectedKeys,
 } from '#/providers/DriveProvider'
 import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
@@ -292,7 +294,6 @@ export interface AssetsTableProps {
   readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
   readonly category: Category
   readonly initialProjectName: string | null
-  readonly targetDirectoryNodeRef: React.MutableRefObject<assetTreeNode.AnyAssetTreeNode<backendModule.DirectoryAsset> | null>
   readonly assetManagementApiRef: React.Ref<AssetManagementApi>
 }
 
@@ -307,7 +308,7 @@ export interface AssetManagementApi {
 /** The table of project assets. */
 export default function AssetsTable(props: AssetsTableProps) {
   const { hidden, query, setQuery, category, assetManagementApiRef } = props
-  const { initialProjectName, targetDirectoryNodeRef } = props
+  const { initialProjectName } = props
 
   const openedProjects = projectsProvider.useLaunchedProjects()
   const doOpenProject = projectHooks.useOpenProject()
@@ -327,6 +328,7 @@ export default function AssetsTable(props: AssetsTableProps) {
   const dispatchAssetEvent = eventListProvider.useDispatchAssetEvent()
   const dispatchAssetListEvent = eventListProvider.useDispatchAssetListEvent()
   const setCanCreateAssets = useSetCanCreateAssets()
+  const setTargetDirectoryInStore = useSetTargetDirectory()
   const didLoadingProjectManagerFail = backendProvider.useDidLoadingProjectManagerFail()
   const reconnectToProjectManager = backendProvider.useReconnectToProjectManager()
   const [enabledColumns, setEnabledColumns] = React.useState(columnUtils.DEFAULT_ENABLED_COLUMNS)
@@ -334,11 +336,12 @@ export default function AssetsTable(props: AssetsTableProps) {
   const setAssetPanelProps = useSetAssetPanelProps()
 
   const hiddenColumns = columnUtils
-    .getColumnList(user, backend.type)
+    .getColumnList(user, backend.type, category)
     .filter((column) => !enabledColumns.has(column))
   const [sortInfo, setSortInfo] =
     React.useState<sorting.SortInfo<columnUtils.SortableColumn> | null>(null)
   const driveStore = useDriveStore()
+  const setNewestFolderId = useSetNewestFolderId()
   const setSelectedKeys = useSetSelectedKeys()
   const setVisuallySelectedKeys = useSetVisuallySelectedKeys()
   const updateAssetRef = React.useRef<
@@ -357,9 +360,6 @@ export default function AssetsTable(props: AssetsTableProps) {
 
   const organization = organizationQuery.data
 
-  const isAssetContextMenuVisible =
-    category.type !== 'cloud' || user.plan == null || user.plan === backendModule.Plan.solo
-
   const nameOfProjectToImmediatelyOpenRef = React.useRef(initialProjectName)
   const [localRootDirectory] = localStorageProvider.useLocalStorageState('localRootDirectory')
   const rootDirectoryId = React.useMemo(() => {
@@ -401,69 +401,21 @@ export default function AssetsTable(props: AssetsTableProps) {
     [expandedDirectoryIds],
   )
 
-  const createProjectMutation = useMutation(
-    backendMutationOptions(backend, 'createProject', {
-      meta: { invalidates: [['listDirectory', backend.type]] },
-    }),
-  )
-  const duplicateProjectMutation = useMutation(
-    backendMutationOptions(backend, 'duplicateProject', {
-      meta: { invalidates: [['listDirectory', backend.type]] },
-    }),
-  )
-  const createDirectoryMutation = useMutation(
-    backendMutationOptions(backend, 'createDirectory', {
-      meta: { invalidates: [['listDirectory', backend.type]] },
-    }),
-  )
-  const createSecretMutation = useMutation(
-    backendMutationOptions(backend, 'createSecret', {
-      meta: { invalidates: [['listDirectory', backend.type]] },
-    }),
-  )
-  const updateSecretMutation = useMutation(
-    backendMutationOptions(backend, 'updateSecret', {
-      meta: { invalidates: [['listDirectory', backend.type]] },
-    }),
-  )
-  const createDatalinkMutation = useMutation(
-    backendMutationOptions(backend, 'createDatalink', {
-      meta: { invalidates: [['listDirectory', backend.type]] },
-    }),
-  )
-  const uploadFileMutation = useMutation(
-    backendMutationOptions(backend, 'uploadFile', {
-      meta: { invalidates: [['assetVersions'], ['listDirectory', backend.type]] },
-    }),
-  )
+  const createProjectMutation = useMutation(backendMutationOptions(backend, 'createProject'))
+  const duplicateProjectMutation = useMutation(backendMutationOptions(backend, 'duplicateProject'))
+  const createDirectoryMutation = useMutation(backendMutationOptions(backend, 'createDirectory'))
+  const createSecretMutation = useMutation(backendMutationOptions(backend, 'createSecret'))
+  const updateSecretMutation = useMutation(backendMutationOptions(backend, 'updateSecret'))
+  const createDatalinkMutation = useMutation(backendMutationOptions(backend, 'createDatalink'))
+  const uploadFileMutation = useMutation(backendMutationOptions(backend, 'uploadFile'))
   const getProjectDetailsMutation = useMutation(
     backendMutationOptions(backend, 'getProjectDetails'),
   )
-  const copyAssetMutation = useMutation(
-    backendMutationOptions(backend, 'copyAsset', {
-      meta: { invalidates: [['assetVersions'], ['listDirectory', backend.type]] },
-    }),
-  )
-  const deleteAssetMutation = useMutation(
-    backendMutationOptions(backend, 'deleteAsset', {
-      meta: { invalidates: [['assetVersions'], ['listDirectory', backend.type]] },
-    }),
-  )
-  const undoDeleteAssetMutation = useMutation(
-    backendMutationOptions(backend, 'undoDeleteAsset', {
-      meta: { invalidates: [['listDirectory', backend.type]] },
-    }),
-  )
-  const updateAssetMutation = useMutation(
-    backendMutationOptions(backend, 'updateAsset', {
-      meta: { invalidates: [['assetVersions'], ['listDirectory', backend.type]] },
-    }),
-  )
-  const closeProjectMutation = useMutation(
-    backendMutationOptions(backend, 'closeProject', {
-      meta: { invalidates: [['assetVersions'], ['listDirectory', backend.type]] },
-    }),
-  )
+  const copyAssetMutation = useMutation(backendMutationOptions(backend, 'copyAsset'))
+  const deleteAssetMutation = useMutation(backendMutationOptions(backend, 'deleteAsset'))
+  const undoDeleteAssetMutation = useMutation(backendMutationOptions(backend, 'undoDeleteAsset'))
+  const updateAssetMutation = useMutation(backendMutationOptions(backend, 'updateAsset'))
+  const closeProjectMutation = useMutation(backendMutationOptions(backend, 'closeProject'))
 
   const directories = useQueries({
     // We query only expanded directories, as we don't want to load the data for directories that are not visible.
@@ -472,8 +424,8 @@ export default function AssetsTable(props: AssetsTableProps) {
         expandedDirectoryIds.map((directoryId) =>
           queryOptions({
             queryKey: [
-              'listDirectory',
               backend.type,
+              'listDirectory',
               directoryId,
               {
                 parentId: directoryId,
@@ -847,6 +799,8 @@ export default function AssetsTable(props: AssetsTableProps) {
   const nodeMapRef = React.useRef<
     ReadonlyMap<backendModule.AssetId, assetTreeNode.AnyAssetTreeNode>
   >(new Map<backendModule.AssetId, assetTreeNode.AnyAssetTreeNode>())
+  const isAssetContextMenuVisible =
+    category.type !== 'cloud' || user.plan == null || user.plan === backendModule.Plan.solo
 
   const queryClient = useQueryClient()
 
@@ -877,10 +831,14 @@ export default function AssetsTable(props: AssetsTableProps) {
               targetDirectorySelfPermission.permission,
             ))
       setCanCreateAssets(canCreateAssets)
-      targetDirectoryNodeRef.current = targetDirectory
+      setTargetDirectoryInStore(targetDirectory)
     },
   )
 
+  React.useEffect(() => {
+    setNewestFolderId(null)
+  }, [category, setNewestFolderId])
+
   React.useEffect(
     () =>
       driveStore.subscribe(({ selectedKeys }, { selectedKeys: oldSelectedKeys }) => {
@@ -1453,7 +1411,7 @@ export default function AssetsTable(props: AssetsTableProps) {
         break
       }
       case 'Escape': {
-        setSelectedKeys(new Set())
+        setSelectedKeys(set.EMPTY_SET)
         setMostRecentlySelectedIndex(null)
         selectionStartIndexRef.current = null
         break
@@ -1513,7 +1471,7 @@ export default function AssetsTable(props: AssetsTableProps) {
         } else {
           // The arrow key will escape this container. In that case, do not stop propagation
           // and let `navigator2D` navigate to a different container.
-          setSelectedKeys(new Set())
+          setSelectedKeys(set.EMPTY_SET)
           selectionStartIndexRef.current = null
         }
         break
@@ -1621,9 +1579,12 @@ export default function AssetsTable(props: AssetsTableProps) {
         doToggleDirectoryExpansion(event.parentId, event.parentKey, true)
         insertAssets([placeholderItem], event.parentId)
 
-        createDirectoryMutation.mutate([
-          { parentId: placeholderItem.parentId, title: placeholderItem.title },
-        ])
+        void createDirectoryMutation
+          .mutateAsync([{ parentId: placeholderItem.parentId, title: placeholderItem.title }])
+          .then(({ id }) => {
+            setNewestFolderId(id)
+            setSelectedKeys(new Set([id]))
+          })
 
         break
       }
@@ -1713,6 +1674,12 @@ export default function AssetsTable(props: AssetsTableProps) {
           userGroups ?? [],
         )
         const fileMap = new Map<backendModule.AssetId, File>()
+        const uploadedFileIds: backendModule.AssetId[] = []
+        const addIdToSelection = (id: backendModule.AssetId) => {
+          uploadedFileIds.push(id)
+          const newIds = new Set(uploadedFileIds)
+          setSelectedKeys(newIds)
+        }
 
         const doUploadFile = async (asset: backendModule.AnyAsset, method: 'new' | 'update') => {
           const file = fileMap.get(asset.id)
@@ -1727,13 +1694,10 @@ export default function AssetsTable(props: AssetsTableProps) {
 
                 const assetNode = nodeMapRef.current.get(asset.id)
 
-                if (assetNode == null) {
-                  // eslint-disable-next-line no-restricted-syntax
-                  return
-                }
-
                 if (backend.type === backendModule.BackendType.local && localBackend != null) {
-                  const directory = localBackendModule.extractTypeAndId(assetNode.directoryId).id
+                  const directory = localBackendModule.extractTypeAndId(
+                    assetNode?.directoryId ?? asset.parentId,
+                  ).id
                   let id: string
                   if (
                     'backendApi' in window &&
@@ -1761,6 +1725,7 @@ export default function AssetsTable(props: AssetsTableProps) {
                     id = await response.text()
                   }
                   const projectId = localBackendModule.newProjectId(projectManager.UUID(id))
+                  addIdToSelection(projectId)
 
                   await getProjectDetailsMutation
                     .mutateAsync([projectId, asset.parentId, file.name])
@@ -1778,6 +1743,9 @@ export default function AssetsTable(props: AssetsTableProps) {
                       },
                       file,
                     ])
+                    .then(({ id }) => {
+                      addIdToSelection(id)
+                    })
                     .catch((error) => {
                       deleteAsset(asset.id)
                       toastAndLog('uploadProjectError', error)
@@ -1787,10 +1755,14 @@ export default function AssetsTable(props: AssetsTableProps) {
                 break
               }
               case backendModule.assetIsFile(asset): {
-                uploadFileMutation.mutate([
-                  { fileId, fileName: asset.title, parentDirectoryId: asset.parentId },
-                  file,
-                ])
+                void uploadFileMutation
+                  .mutateAsync([
+                    { fileId, fileName: asset.title, parentDirectoryId: asset.parentId },
+                    file,
+                  ])
+                  .then(({ id }) => {
+                    addIdToSelection(id)
+                  })
 
                 break
               }
@@ -1877,8 +1849,20 @@ export default function AssetsTable(props: AssetsTableProps) {
               nonConflictingProjectCount={projects.length - conflictingProjects.length}
               doUpdateConflicting={(resolvedConflicts) => {
                 for (const conflict of resolvedConflicts) {
-                  fileMap.set(conflict.current.id, conflict.file)
-                  void doUploadFile(conflict.current, 'update')
+                  const isUpdating = conflict.current.title === conflict.new.title
+
+                  const asset = isUpdating ? conflict.current : conflict.new
+
+                  fileMap.set(
+                    asset.id,
+                    new File([conflict.file], asset.title, {
+                      type: conflict.file.type,
+                      lastModified: conflict.file.lastModified,
+                    }),
+                  )
+
+                  insertAssets([asset], event.parentId)
+                  void doUploadFile(asset, isUpdating ? 'update' : 'new')
                 }
               }}
               doUploadNonConflicting={() => {
@@ -2137,7 +2121,7 @@ export default function AssetsTable(props: AssetsTableProps) {
     const { selectedKeys } = driveStore.getState()
     setPasteData({ type: PasteType.move, data: selectedKeys })
     dispatchAssetEvent({ type: AssetEventType.cut, ids: selectedKeys })
-    setSelectedKeys(new Set())
+    setSelectedKeys(set.EMPTY_SET)
   })
 
   const doPaste = useEventCallback(
@@ -2221,6 +2205,7 @@ export default function AssetsTable(props: AssetsTableProps) {
   }
 
   const handleFileDrop = (event: React.DragEvent) => {
+    setIsDraggingFiles(false)
     if (event.dataTransfer.types.includes('Files')) {
       event.preventDefault()
       event.stopPropagation()
@@ -2280,6 +2265,29 @@ export default function AssetsTable(props: AssetsTableProps) {
     ],
   )
 
+  React.useEffect(() => {
+    // In some browsers, at least in Chrome 126,
+    // in some situations, when an element has a
+    // 'container-size' style, and the parent element is hidden,
+    // the browser can't calculate the element's size
+    // and thus the element doesn't appear when we unhide the parent.
+    // The only way to fix that is to force browser to recalculate styles
+    // So the trick is to change a property, trigger style recalc(`getBoundlingClientRect()`)
+    // and remove the property.
+    // since everything is happening synchronously, user won't see a broken layout during recalculation
+    if (!hidden && rootRef.current) {
+      for (let i = 0; i < rootRef.current.children.length; i++) {
+        const element = rootRef.current.children[i]
+
+        if (element instanceof HTMLElement) {
+          element.style.width = '0px'
+          element.getBoundingClientRect()
+          element.style.width = ''
+        }
+      }
+    }
+  }, [hidden])
+
   // This is required to prevent the table body from overlapping the table header, because
   // the table header is transparent.
   const updateClipPath = useOnScroll(() => {
@@ -2311,9 +2319,19 @@ export default function AssetsTable(props: AssetsTableProps) {
         {
           selectAdditional: () => {},
           selectAdditionalRange: () => {},
-          [inputBindingsModule.DEFAULT_HANDLER]: () => {
-            const { selectedKeys } = driveStore.getState()
-            if (selectedKeys.size !== 0) {
+          [inputBindingsModule.DEFAULT_HANDLER]: (event) => {
+            /** When the document is clicked, deselect the keys, but only if the clicked element
+             * is not inside a `Dialog`. To detect whether an element is a `Dialog`,
+             * we check whether it is inside the `portal-root` where all the `Dialog`s are mounted.
+             * If this check is omitted, when the user clicks inside a Datalink dialog,
+             * the keys are deselected, causing the Datalink to be added to the root directory,
+             * rather than the one that was selected when the dialog was opened.
+             */
+            const portalRoot =
+              event.target instanceof HTMLElement || event.target instanceof SVGElement ?
+                event.target.closest('.enso-portal-root')
+              : null
+            if (!portalRoot && driveStore.getState().selectedKeys.size !== 0) {
               setSelectedKeys(set.EMPTY_SET)
               setMostRecentlySelectedIndex(null)
             }
@@ -2579,10 +2597,6 @@ export default function AssetsTable(props: AssetsTableProps) {
     },
   )
 
-  const onRowDragLeave = useEventCallback(() => {
-    setIsDraggingFiles(false)
-  })
-
   const onRowDragEnd = useEventCallback(() => {
     setIsDraggingFiles(false)
     endAutoScroll()
@@ -2660,8 +2674,10 @@ export default function AssetsTable(props: AssetsTableProps) {
 
   const columns = React.useMemo(
     () =>
-      columnUtils.getColumnList(user, backend.type).filter((column) => enabledColumns.has(column)),
-    [backend.type, enabledColumns, user],
+      columnUtils
+        .getColumnList(user, backend.type, category)
+        .filter((column) => enabledColumns.has(column)),
+    [backend.type, category, enabledColumns, user],
   )
 
   const headerRow = (
@@ -2706,7 +2722,6 @@ export default function AssetsTable(props: AssetsTableProps) {
             select={selectRow}
             onDragStart={onRowDragStart}
             onDragOver={onRowDragOver}
-            onDragLeave={onRowDragLeave}
             onDragEnd={onRowDragEnd}
             onDrop={onRowDrop}
           />
@@ -2796,11 +2811,11 @@ export default function AssetsTable(props: AssetsTableProps) {
         )}
         onDragEnter={onDropzoneDragOver}
         onDragOver={onDropzoneDragOver}
-        onDragLeave={(event) => {
+        onDragLeave={() => {
           lastSelectedIdsRef.current = null
-          if (event.currentTarget === event.target) {
-            setIsDraggingFiles(false)
-          }
+        }}
+        onDragEnd={() => {
+          setIsDraggingFiles(false)
         }}
         onDrop={(event) => {
           const payload = drag.ASSET_ROWS.lookup(event)
@@ -2820,7 +2835,7 @@ export default function AssetsTable(props: AssetsTableProps) {
           handleFileDrop(event)
         }}
         onClick={() => {
-          setSelectedKeys(new Set())
+          setSelectedKeys(set.EMPTY_SET)
         }}
       >
         <aria.FileTrigger
@@ -2889,9 +2904,11 @@ export default function AssetsTable(props: AssetsTableProps) {
                     !event.currentTarget.contains(event.relatedTarget)
                   ) {
                     lastSelectedIdsRef.current = null
-                    setIsDraggingFiles(false)
                   }
                 },
+                onDragEnd: () => {
+                  setIsDraggingFiles(false)
+                },
               })}
             >
               {!hidden && hiddenContextMenu}
@@ -2950,12 +2967,9 @@ export default function AssetsTable(props: AssetsTableProps) {
         {isDraggingFiles && !isMainDropzoneVisible && (
           <div className="pointer-events-none absolute bottom-4 left-1/2 -translate-x-1/2">
             <div
-              className="flex items-center justify-center gap-3 rounded-default bg-selected-frame px-8 py-6 text-primary/50 backdrop-blur-3xl transition-all"
+              className="pointer-events-auto flex items-center justify-center gap-3 rounded-default bg-selected-frame px-8 py-6 text-primary/50 backdrop-blur-3xl transition-all"
               onDragEnter={onDropzoneDragOver}
               onDragOver={onDropzoneDragOver}
-              onDragLeave={() => {
-                setIsDraggingFiles(false)
-              }}
               onDragEnd={() => {
                 setIsDraggingFiles(false)
               }}
diff --git a/app/dashboard/src/layouts/AssetsTableContextMenu.tsx b/app/dashboard/src/layouts/AssetsTableContextMenu.tsx
index bbe4f1d4b02c..783b4f70cdad 100644
--- a/app/dashboard/src/layouts/AssetsTableContextMenu.tsx
+++ b/app/dashboard/src/layouts/AssetsTableContextMenu.tsx
@@ -70,23 +70,30 @@ export default function AssetsTableContextMenu(props: AssetsTableContextMenuProp
   // up to date.
   const ownsAllSelectedAssets =
     !isCloud ||
-    Array.from(selectedKeys, (key) => {
-      const userPermissions = nodeMapRef.current.get(key)?.item.permissions
-      const selfPermission = userPermissions?.find(
-        backendModule.isUserPermissionAnd((permission) => permission.user.userId === user.userId),
-      )
-      return selfPermission?.permission === permissions.PermissionAction.own
-    }).every((isOwner) => isOwner)
+    Array.from(selectedKeys).every(
+      (key) =>
+        permissions.tryFindSelfPermission(user, nodeMapRef.current.get(key)?.item.permissions)
+          ?.permission === permissions.PermissionAction.own,
+    )
 
   // This is not a React component even though it contains JSX.
   // eslint-disable-next-line no-restricted-syntax
   const doDeleteAll = () => {
-    if (isCloud) {
+    const deleteAll = () => {
       unsetModal()
+      setSelectedKeys(EMPTY_SET)
 
       for (const key of selectedKeys) {
         void doDelete(key, false)
       }
+    }
+    if (
+      isCloud &&
+      [...selectedKeys].every(
+        (key) => nodeMapRef.current.get(key)?.item.type !== backendModule.AssetType.directory,
+      )
+    ) {
+      deleteAll()
     } else {
       const [firstKey] = selectedKeys
       const soleAssetName =
@@ -99,13 +106,7 @@ export default function AssetsTableContextMenu(props: AssetsTableContextMenuProp
               getText('deleteSelectedAssetActionText', soleAssetName)
             : getText('deleteSelectedAssetsActionText', selectedKeys.size)
           }
-          doDelete={() => {
-            setSelectedKeys(EMPTY_SET)
-
-            for (const key of selectedKeys) {
-              void doDelete(key, false)
-            }
-          }}
+          doDelete={deleteAll}
         />,
       )
     }
diff --git a/app/dashboard/src/layouts/CategorySwitcher.tsx b/app/dashboard/src/layouts/CategorySwitcher.tsx
index 4359657c8cdb..ed262103bfc4 100644
--- a/app/dashboard/src/layouts/CategorySwitcher.tsx
+++ b/app/dashboard/src/layouts/CategorySwitcher.tsx
@@ -302,7 +302,6 @@ export default function CategorySwitcher(props: CategorySwitcherProps) {
   const [localRootDirectories, setLocalRootDirectories] =
     useLocalStorageState('localRootDirectories')
   const hasUserAndTeamSpaces = backend.userHasUserAndTeamSpaces(user)
-  const { setModal } = modalProvider.useSetModal()
 
   const localBackend = backendProvider.useLocalBackend()
   const itemProps = { currentCategory: category, setCategory, dispatchAssetEvent }
@@ -501,31 +500,27 @@ export default function CategorySwitcher(props: CategorySwitcherProps) {
                 dropZoneLabel={getText('localCategoryDropZoneLabel')}
               />
               <div className="grow" />
-              <ariaComponents.Button
-                size="medium"
-                variant="icon"
-                icon={Minus2Icon}
-                aria-label={getText('removeDirectoryFromFavorites')}
-                className="hidden group-hover:block"
-                onPress={() => {
-                  setModal(
-                    <ConfirmDeleteModal
-                      actionText={getText(
-                        'removeTheLocalDirectoryXFromFavorites',
-                        getFileName(directory),
-                      )}
-                      actionButtonLabel={getText('remove')}
-                      doDelete={() => {
-                        setLocalRootDirectories(
-                          localRootDirectories.filter(
-                            (otherDirectory) => otherDirectory !== directory,
-                          ),
-                        )
-                      }}
-                    />,
-                  )
-                }}
-              />
+              <ariaComponents.DialogTrigger>
+                <ariaComponents.Button
+                  size="medium"
+                  variant="icon"
+                  icon={Minus2Icon}
+                  aria-label={getText('removeDirectoryFromFavorites')}
+                  className="hidden group-hover:block"
+                />
+                <ConfirmDeleteModal
+                  actionText={getText(
+                    'removeTheLocalDirectoryXFromFavorites',
+                    getFileName(directory),
+                  )}
+                  actionButtonLabel={getText('remove')}
+                  doDelete={() => {
+                    setLocalRootDirectories(
+                      localRootDirectories.filter((otherDirectory) => otherDirectory !== directory),
+                    )
+                  }}
+                />
+              </ariaComponents.DialogTrigger>
             </div>
           ))}
         {localBackend && window.fileBrowserApi && (
diff --git a/app/dashboard/src/layouts/Drive.tsx b/app/dashboard/src/layouts/Drive.tsx
index 2894e5e9a6b7..4f54646a10e5 100644
--- a/app/dashboard/src/layouts/Drive.tsx
+++ b/app/dashboard/src/layouts/Drive.tsx
@@ -28,9 +28,10 @@ import * as result from '#/components/Result'
 
 import * as backendModule from '#/services/Backend'
 
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useDriveStore } from '#/providers/DriveProvider'
 import { useLocalStorageState } from '#/providers/LocalStorageProvider'
 import AssetQuery from '#/utilities/AssetQuery'
-import type AssetTreeNode from '#/utilities/AssetTreeNode'
 import * as download from '#/utilities/download'
 import * as github from '#/utilities/github'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
@@ -82,9 +83,6 @@ export default function Drive(props: DriveProps) {
       }
     }
   }, [category, backend, user, organization, localRootDirectory])
-  const targetDirectoryNodeRef = React.useRef<AssetTreeNode<backendModule.DirectoryAsset> | null>(
-    null,
-  )
   const isCloud = categoryModule.isCloudCategory(category)
   const supportLocalBackend = localBackend != null
 
@@ -93,28 +91,32 @@ export default function Drive(props: DriveProps) {
     : isCloud && !user.isEnabled ? 'not-enabled'
     : 'ok'
 
-  const doUploadFiles = React.useCallback(
-    (files: File[]) => {
-      if (isCloud && isOffline) {
-        // This should never happen, however display a nice error message in case it does.
-        toastAndLog('offlineUploadFilesError')
-      } else {
-        dispatchAssetListEvent({
-          type: AssetListEventType.uploadFiles,
-          parentKey: targetDirectoryNodeRef.current?.key ?? rootDirectoryId,
-          parentId: targetDirectoryNodeRef.current?.item.id ?? rootDirectoryId,
-          files,
-        })
-      }
-    },
-    [isCloud, rootDirectoryId, toastAndLog, isOffline, dispatchAssetListEvent],
+  const driveStore = useDriveStore()
+
+  const getTargetDirectory = React.useCallback(
+    () => driveStore.getState().targetDirectory,
+    [driveStore],
   )
 
+  const doUploadFiles = useEventCallback((files: File[]) => {
+    if (isCloud && isOffline) {
+      // This should never happen, however display a nice error message in case it does.
+      toastAndLog('offlineUploadFilesError')
+    } else {
+      dispatchAssetListEvent({
+        type: AssetListEventType.uploadFiles,
+        parentKey: getTargetDirectory()?.key ?? rootDirectoryId,
+        parentId: getTargetDirectory()?.item.id ?? rootDirectoryId,
+        files,
+      })
+    }
+  })
+
   const doEmptyTrash = React.useCallback(() => {
     dispatchAssetListEvent({ type: AssetListEventType.emptyTrash })
   }, [dispatchAssetListEvent])
 
-  const doCreateProject = React.useCallback(
+  const doCreateProject = useEventCallback(
     (
       templateId: string | null = null,
       templateName: string | null = null,
@@ -123,8 +125,8 @@ export default function Drive(props: DriveProps) {
     ) => {
       dispatchAssetListEvent({
         type: AssetListEventType.newProject,
-        parentKey: targetDirectoryNodeRef.current?.key ?? rootDirectoryId,
-        parentId: targetDirectoryNodeRef.current?.item.id ?? rootDirectoryId,
+        parentKey: getTargetDirectory()?.key ?? rootDirectoryId,
+        parentId: getTargetDirectory()?.item.id ?? rootDirectoryId,
         templateId,
         datalinkId: null,
         preferredName: templateName,
@@ -132,42 +134,35 @@ export default function Drive(props: DriveProps) {
         ...(onError ? { onError } : {}),
       })
     },
-    [rootDirectoryId, dispatchAssetListEvent],
   )
 
-  const doCreateDirectory = React.useCallback(() => {
+  const doCreateDirectory = useEventCallback(() => {
     dispatchAssetListEvent({
       type: AssetListEventType.newFolder,
-      parentKey: targetDirectoryNodeRef.current?.key ?? rootDirectoryId,
-      parentId: targetDirectoryNodeRef.current?.item.id ?? rootDirectoryId,
+      parentKey: getTargetDirectory()?.key ?? rootDirectoryId,
+      parentId: getTargetDirectory()?.item.id ?? rootDirectoryId,
     })
-  }, [rootDirectoryId, dispatchAssetListEvent])
+  })
 
-  const doCreateSecret = React.useCallback(
-    (name: string, value: string) => {
-      dispatchAssetListEvent({
-        type: AssetListEventType.newSecret,
-        parentKey: targetDirectoryNodeRef.current?.key ?? rootDirectoryId,
-        parentId: targetDirectoryNodeRef.current?.item.id ?? rootDirectoryId,
-        name,
-        value,
-      })
-    },
-    [rootDirectoryId, dispatchAssetListEvent],
-  )
+  const doCreateSecret = useEventCallback((name: string, value: string) => {
+    dispatchAssetListEvent({
+      type: AssetListEventType.newSecret,
+      parentKey: getTargetDirectory()?.key ?? rootDirectoryId,
+      parentId: getTargetDirectory()?.item.id ?? rootDirectoryId,
+      name,
+      value,
+    })
+  })
 
-  const doCreateDatalink = React.useCallback(
-    (name: string, value: unknown) => {
-      dispatchAssetListEvent({
-        type: AssetListEventType.newDatalink,
-        parentKey: targetDirectoryNodeRef.current?.key ?? rootDirectoryId,
-        parentId: targetDirectoryNodeRef.current?.item.id ?? rootDirectoryId,
-        name,
-        value,
-      })
-    },
-    [rootDirectoryId, dispatchAssetListEvent],
-  )
+  const doCreateDatalink = useEventCallback((name: string, value: unknown) => {
+    dispatchAssetListEvent({
+      type: AssetListEventType.newDatalink,
+      parentKey: getTargetDirectory()?.key ?? rootDirectoryId,
+      parentId: getTargetDirectory()?.item.id ?? rootDirectoryId,
+      name,
+      value,
+    })
+  })
 
   switch (status) {
     case 'not-enabled': {
@@ -265,7 +260,6 @@ export default function Drive(props: DriveProps) {
                   setQuery={setQuery}
                   category={category}
                   initialProjectName={initialProjectName}
-                  targetDirectoryNodeRef={targetDirectoryNodeRef}
                 />
               }
             </div>
diff --git a/app/dashboard/src/layouts/DriveBar.tsx b/app/dashboard/src/layouts/DriveBar.tsx
index 34cf8e366734..b4df6d9eea18 100644
--- a/app/dashboard/src/layouts/DriveBar.tsx
+++ b/app/dashboard/src/layouts/DriveBar.tsx
@@ -16,6 +16,7 @@ import { Button, ButtonGroup, DialogTrigger, useVisualTooltip } from '#/componen
 import AssetEventType from '#/events/AssetEventType'
 import { useOffline } from '#/hooks/offlineHooks'
 import { createGetProjectDetailsQuery } from '#/hooks/projectHooks'
+import { useSearchParamsState } from '#/hooks/searchParamsStateHooks'
 import AssetSearchBar from '#/layouts/AssetSearchBar'
 import { useDispatchAssetEvent } from '#/layouts/AssetsTable/EventListProvider'
 import { isCloudCategory, type Category } from '#/layouts/CategorySwitcher/Category'
@@ -66,6 +67,12 @@ export default function DriveBar(props: DriveBarProps) {
   const { backend, query, setQuery, category } = props
   const { doEmptyTrash, doCreateProject, doCreateDirectory } = props
   const { doCreateSecret, doCreateDatalink, doUploadFiles } = props
+
+  const [startModalDefaultOpen, , resetStartModalDefaultOpen] = useSearchParamsState(
+    'startModalDefaultOpen',
+    false,
+  )
+
   const { unsetModal } = useSetModal()
   const { getText } = useText()
   const inputBindings = useInputBindings()
@@ -202,7 +209,12 @@ export default function DriveBar(props: DriveBarProps) {
             className="grow-0"
             {...createAssetsVisualTooltip.targetProps}
           >
-            <DialogTrigger>
+            <DialogTrigger
+              defaultOpen={startModalDefaultOpen}
+              onClose={() => {
+                resetStartModalDefaultOpen(true)
+              }}
+            >
               <Button
                 size="medium"
                 variant="accent"
diff --git a/app/dashboard/src/layouts/GlobalContextMenu.tsx b/app/dashboard/src/layouts/GlobalContextMenu.tsx
index 515180101fcf..54f4be3e7b8c 100644
--- a/app/dashboard/src/layouts/GlobalContextMenu.tsx
+++ b/app/dashboard/src/layouts/GlobalContextMenu.tsx
@@ -66,7 +66,7 @@ export default function GlobalContextMenu(props: GlobalContextMenuProps) {
       )}
       <ContextMenuEntry
         hidden={hidden}
-        action={'uploadFiles'}
+        action="uploadFiles"
         doAction={() => {
           if (filesInputRef.current?.isConnected === true) {
             filesInputRef.current.click()
diff --git a/app/dashboard/src/layouts/Samples.tsx b/app/dashboard/src/layouts/Samples.tsx
index 3d80df441e5c..68d567ac7183 100644
--- a/app/dashboard/src/layouts/Samples.tsx
+++ b/app/dashboard/src/layouts/Samples.tsx
@@ -1,33 +1,21 @@
 /** @file Renders the list of templates from which a project can be created. */
 import * as React from 'react'
 
-import Logo from '#/assets/enso_logo.svg'
+import ReadAndFilterImage from '#/assets/ReadAndFilter.png'
+import AggregatingImage from '#/assets/aggregate.png'
+import BlankImage from '#/assets/blankProject.png'
+import CleansingImage from '#/assets/cleansing.png'
+import CovidImage from '#/assets/covid.png'
 import GeoImage from '#/assets/geo.svg'
-import HeartIcon from '#/assets/heart.svg'
-import OpenCountIcon from '#/assets/open_count.svg'
+import JoinImage from '#/assets/joining.png'
+import KMeansImage from '#/assets/kmeans.png'
+import MonthSalesImage from '#/assets/monthSales.png'
+import NasdaqImage from '#/assets/nasdaq.png'
 import SpreadsheetsImage from '#/assets/spreadsheets.svg'
 import VisualizeImage from '#/assets/visualize.png'
+import WeatherImage from '#/assets/weather.png'
 
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-import FocusArea from '#/components/styled/FocusArea'
-import FocusRing from '#/components/styled/FocusRing'
-import SvgMask from '#/components/SvgMask'
-
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// =================
-// === Constants ===
-// =================
-
-/** A placeholder author for a sample, for use until the backend implements an endpoint. */
-const DUMMY_AUTHOR = 'Enso Team'
-/** A placeholder number of times a sample has been opened, for use until the backend implements
- * an endpoint. */
-const DUMMY_OPEN_COUNT = 10
-/** A placeholder number of likes for a sample, for use until the backend implements an endpoint. */
-const DUMMY_LIKE_COUNT = 10
+import { Button, Text } from '#/components/AriaComponents'
 
 // =========================
 // === List of templates ===
@@ -41,42 +29,101 @@ export interface Sample {
   readonly description: string
   readonly id: string
   readonly background?: string
+  readonly group?: string
 }
 
 /** The full list of templates. */
 export const SAMPLES: Sample[] = [
   {
-    title: 'Colorado COVID',
-    id: 'Colorado_COVID',
-    description: 'Learn to glue multiple spreadsheets to analyses all your data at once.',
+    title: 'New Project',
+    id: 'Default',
+    description: '',
+    background: `url("${BlankImage}") center / cover`,
+    group: 'Get Started',
   },
   {
-    title: 'KMeans',
-    id: 'KMeans',
-    description: 'Learn where to open a coffee shop to maximize your income.',
+    title: 'Reading and Filtering Data',
+    id: 'Getting_Started_Reading',
+    description: 'Learn how to bring data into Enso.',
+    background: `url("${ReadAndFilterImage}") center / cover`,
+    group: 'Get Started',
+  },
+  {
+    title: 'Aggregating and Pivoting',
+    id: 'Getting_Started_Aggregating',
+    description: 'Learn how to group and aggregate data, and pivot.',
+    background: `url("${AggregatingImage}") center / cover`,
+    group: 'Get Started',
+  },
+  {
+    title: 'Cleaning and Parsing Data',
+    id: 'Getting_Started_Cleansing',
+    description: 'Learn how to cleanse and parse text values.',
+    background: `url("${CleansingImage}") center / cover`,
+    group: 'Get Started',
+  },
+  {
+    title: 'Selecting Columns and Joining Tables',
+    id: 'Getting_Started_Selecting',
+    description: 'Learn how to choose columns and join tables.',
+    background: `url("${JoinImage}") center / cover`,
+    group: 'Get Started',
+  },
+  {
+    title: 'Analyze GitHub stars',
+    id: 'Stargazers',
+    description: "Find out which of Enso's repositories are most popular over time.",
+    background: `url("${VisualizeImage}") center / cover`,
+    group: 'Advanced',
   },
   {
     title: 'NASDAQ Returns',
     id: 'NASDAQReturns',
     description: 'Learn how to clean your data to prepare it for advanced analysis.',
+    background: `url("${NasdaqImage}") center / cover`,
+    group: 'Advanced',
+  },
+  {
+    title: 'KMeans',
+    id: 'KMeans',
+    description: 'Learn where to open a coffee shop to maximize your income.',
+    background: `url("${KMeansImage}") center / cover`,
+    group: 'Advanced',
   },
   {
     title: 'Combine spreadsheets',
     id: 'Orders',
     description: 'Glue multiple spreadsheets together to analyse all your data at once.',
-    background: `url('${SpreadsheetsImage}') center / 50% no-repeat, rgba(255, 255, 255, 0.30)`,
+    background: `url("${SpreadsheetsImage}") center / 50% no-repeat, rgba(255, 255, 255, 0.30)`,
+    group: 'Examples',
+  },
+  {
+    title: 'Month on Month Sales',
+    id: 'Monthly_Sales',
+    description: 'Learn how to compare with previous month sales.',
+    background: `url("${MonthSalesImage}") center / cover`,
+    group: 'Examples',
+  },
+  {
+    title: 'Colorado COVID',
+    id: 'Colorado_COVID',
+    description: 'Learn to glue multiple spreadsheets to analyses all your data at once.',
+    background: `url('${CovidImage}') center / 100% no-repeat, rgba(255, 255, 255, 0.30)`,
+    group: 'Examples',
+  },
+  {
+    title: 'Web API analysis',
+    id: 'Bank_Holiday_Rain',
+    description: 'Learn whether it rains on UK Bank Holidays via REST APIs.',
+    background: `url('${WeatherImage}') center / 100% no-repeat, rgba(255, 255, 255, 0.30)`,
+    group: 'Examples',
   },
   {
     title: 'Geospatial analysis',
     id: 'Restaurants',
     description: 'Learn where to open a coffee shop to maximize your income.',
     background: `url('${GeoImage}') 50% 20% / 100% no-repeat`,
-  },
-  {
-    title: 'Analyze GitHub stars',
-    id: 'Stargazers',
-    description: "Find out which of Enso's repositories are most popular over time.",
-    background: `url("${VisualizeImage}") center / cover`,
+    group: 'Examples',
   },
 ]
 
@@ -93,61 +140,31 @@ interface InternalProjectTileProps {
 /** A button that, when clicked, creates and opens a new project based on a template. */
 function ProjectTile(props: InternalProjectTileProps) {
   const { sample, createProject } = props
-  const { getText } = textProvider.useText()
   const { id, title, description, background } = sample
-  const author = DUMMY_AUTHOR
-  const opens = DUMMY_OPEN_COUNT
-  const likes = DUMMY_LIKE_COUNT
 
   return (
-    <div className="flex flex-col gap-sample">
-      <FocusArea direction="horizontal">
-        {(innerProps) => (
-          <FocusRing placement="after">
-            <aria.Button
-              key={title}
-              className="focus-child relative flex h-sample grow cursor-pointer flex-col text-left after:pointer-events-none after:absolute after:inset after:rounded-default"
-              onPress={() => {
-                createProject(id, title)
-              }}
-              {...innerProps}
-            >
-              <div
-                style={{ background }}
-                className={tailwindMerge.twMerge(
-                  'h-sample-image w-full rounded-t-default',
-                  background == null && 'bg-frame',
-                )}
-              />
-              <div className="w-full grow rounded-b-default bg-frame px-sample-description-x pb-sample-description-b pt-sample-description-t backdrop-blur">
-                <aria.Heading className="text-header text-sm font-bold">{title}</aria.Heading>
-                <div className="text-ellipsis text-xs leading-snug">{description}</div>
-              </div>
-            </aria.Button>
-          </FocusRing>
-        )}
-      </FocusArea>
-      {/* Although this component is instantiated multiple times, it has a unique role and hence
-       * its own opacity. */}
-      {/* eslint-disable-next-line no-restricted-syntax */}
-      <div className="flex h-sample-info justify-between px-sample-description-x text-primary opacity-70">
-        <div className="flex gap-samples-icon-with-text">
-          <SvgMask src={Logo} className="size-4 self-end" />
-          <aria.Text className="self-start font-bold leading-snug">{author}</aria.Text>
-        </div>
-        {/* Normally `flex` */}
-        <div className="hidden gap-icons">
-          <div title={getText('views')} className="flex gap-samples-icon-with-text">
-            <SvgMask alt={getText('views')} src={OpenCountIcon} className="size-4 self-end" />
-            <aria.Text className="self-start font-bold leading-snug">{opens}</aria.Text>
-          </div>
-          <div title={getText('likes')} className="flex gap-samples-icon-with-text">
-            <SvgMask alt={getText('likes')} src={HeartIcon} className="size-4 self-end" />
-            <aria.Text className="self-start font-bold leading-snug">{likes}</aria.Text>
-          </div>
+    <Button
+      variant="custom"
+      size="custom"
+      rounded="xxxlarge"
+      key={title}
+      className="flex-none snap-center snap-always overflow-hidden"
+      style={{ background }}
+      onPress={() => {
+        createProject(id, title)
+      }}
+    >
+      <div className="flex aspect-[7/4] h-40 w-full flex-col justify-end bg-gradient-to-t from-primary/80 to-transparent">
+        <div className="flex w-full flex-col items-start px-4 pb-3 text-start">
+          <Text variant="subtitle" color="invert" nowrap="normal">
+            {title}
+          </Text>
+          <Text variant="body-sm" color="invert" nowrap="normal">
+            {description}
+          </Text>
         </div>
       </div>
-    </div>
+    </Button>
   )
 }
 
@@ -157,22 +174,20 @@ function ProjectTile(props: InternalProjectTileProps) {
 
 /** Props for a {@link Samples}. */
 export interface SamplesProps {
+  readonly groupName: string
   readonly createProject: (templateId?: string | null, templateName?: string | null) => void
 }
 
 /** A list of sample projects. */
 export default function Samples(props: SamplesProps) {
-  const { createProject } = props
-  const { getText } = textProvider.useText()
+  const { groupName, createProject } = props
 
   return (
-    <div data-testid="samples" className="flex flex-col gap-subheading px-[5px]">
-      <aria.Heading level={2} className="text-subheading font-normal">
-        {getText('sampleAndCommunityProjects')}
-      </aria.Heading>
+    <div data-testid="samples" className="flex w-full flex-col">
+      <Text.Heading level={2}>{groupName}</Text.Heading>
 
-      <div className="grid grid-cols-fill-samples gap-samples">
-        {SAMPLES.map((sample) => (
+      <div className="-mx-12 inline-flex snap-x snap-mandatory gap-4 overflow-x-auto px-12 py-2 scroll-offset-edge-9xl">
+        {SAMPLES.filter((s) => s.group === groupName).map((sample) => (
           <ProjectTile key={sample.id} sample={sample} createProject={createProject} />
         ))}
       </div>
diff --git a/app/dashboard/src/layouts/Settings.tsx b/app/dashboard/src/layouts/Settings.tsx
index 65e15f7e0b54..ef406b1bbe6f 100644
--- a/app/dashboard/src/layouts/Settings.tsx
+++ b/app/dashboard/src/layouts/Settings.tsx
@@ -183,7 +183,7 @@ export default function Settings() {
   }, [isQueryBlank, doesEntryMatchQuery, getText, isMatch, effectiveTab])
 
   return (
-    <div className="flex flex-1 flex-col gap-4 overflow-hidden px-page-x pt-4">
+    <div className="flex flex-1 flex-col gap-4 overflow-hidden pl-page-x pt-4">
       <aria.Heading level={1} className="flex items-center px-heading-x">
         <aria.MenuTrigger isOpen={isSidebarPopoverOpen} onOpenChange={setIsSidebarPopoverOpen}>
           <Button image={BurgerMenuIcon} buttonClassName="mr-3 sm:hidden" onPress={() => {}} />
@@ -208,13 +208,12 @@ export default function Settings() {
         <ariaComponents.Text
           variant="h1"
           truncate="1"
-          className="ml-2.5 max-w-lg rounded-full bg-white px-2.5 font-bold"
+          className="ml-2.5 mr-8 max-w-lg rounded-full bg-white px-2.5 font-bold"
           aria-hidden
         >
           {data.organizationOnly === true ? organization?.name ?? 'your organization' : user.name}
         </ariaComponents.Text>
-      </aria.Heading>
-      <div className="flex sm:ml-[222px]">
+
         <SearchBar
           data-testid="settings-search-bar"
           query={query}
@@ -222,8 +221,9 @@ export default function Settings() {
           label={getText('settingsSearchBarLabel')}
           placeholder={getText('settingsSearchBarPlaceholder')}
         />
-      </div>
-      <div className="flex flex-1 gap-6 overflow-hidden pr-0.5">
+      </aria.Heading>
+      <div className="flex sm:ml-[222px]" />
+      <div className="flex flex-1 gap-4 overflow-hidden">
         <aside className="hidden h-full shrink-0 basis-[206px] flex-col overflow-y-auto overflow-x-hidden pb-12 sm:flex">
           <SettingsSidebar
             context={context}
@@ -232,15 +232,17 @@ export default function Settings() {
             setTab={setTab}
           />
         </aside>
-        <SettingsTab
-          context={context}
-          data={data}
-          onInteracted={() => {
-            if (effectiveTab !== tab) {
-              setTab(effectiveTab)
-            }
-          }}
-        />
+        <main className="flex flex-1 flex-col overflow-y-auto pb-12 pl-1 scrollbar-gutter-stable">
+          <SettingsTab
+            context={context}
+            data={data}
+            onInteracted={() => {
+              if (effectiveTab !== tab) {
+                setTab(effectiveTab)
+              }
+            }}
+          />
+        </main>
       </div>
     </div>
   )
diff --git a/app/dashboard/src/layouts/Settings/DeleteUserAccountSettingsSection.tsx b/app/dashboard/src/layouts/Settings/DeleteUserAccountSettingsSection.tsx
index a5a714ec6e6c..303c17f778de 100644
--- a/app/dashboard/src/layouts/Settings/DeleteUserAccountSettingsSection.tsx
+++ b/app/dashboard/src/layouts/Settings/DeleteUserAccountSettingsSection.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react'
 
 import * as authProvider from '#/providers/AuthProvider'
-import * as modalProvider from '#/providers/ModalProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as aria from '#/components/aria'
@@ -18,7 +17,6 @@ import ConfirmDeleteUserModal from '#/modals/ConfirmDeleteUserModal'
 /** Settings tab for deleting the current user. */
 export default function DeleteUserAccountSettingsSection() {
   const { signOut, deleteUser } = authProvider.useAuth()
-  const { setModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
 
   return (
@@ -32,22 +30,17 @@ export default function DeleteUserAccountSettingsSection() {
             {getText('dangerZone')}
           </aria.Heading>
           <div className="flex gap-2">
-            <ariaComponents.Button
-              size="medium"
-              variant="delete"
-              onPress={() => {
-                setModal(
-                  <ConfirmDeleteUserModal
-                    doDelete={async () => {
-                      await deleteUser()
-                      await signOut()
-                    }}
-                  />,
-                )
-              }}
-            >
-              {getText('deleteUserAccountButtonLabel')}
-            </ariaComponents.Button>
+            <ariaComponents.DialogTrigger>
+              <ariaComponents.Button size="medium" variant="delete">
+                {getText('deleteUserAccountButtonLabel')}
+              </ariaComponents.Button>
+              <ConfirmDeleteUserModal
+                doDelete={async () => {
+                  await deleteUser()
+                  await signOut()
+                }}
+              />
+            </ariaComponents.DialogTrigger>
             <aria.Text className="my-auto">{getText('deleteUserAccountWarning')}</aria.Text>
           </div>
         </div>
diff --git a/app/dashboard/src/layouts/Settings/SettingsTab.tsx b/app/dashboard/src/layouts/Settings/SettingsTab.tsx
index 6cce78b86626..abbb08ba3e1b 100644
--- a/app/dashboard/src/layouts/Settings/SettingsTab.tsx
+++ b/app/dashboard/src/layouts/Settings/SettingsTab.tsx
@@ -67,20 +67,20 @@ export default function SettingsTab(props: SettingsTabProps) {
   } else {
     const content =
       columns.length === 1 ?
-        <div className="flex grow flex-col gap-settings-subsection overflow-auto" {...contentProps}>
+        <div className="flex grow flex-col gap-settings-subsection" {...contentProps}>
           {sections.map((section) => (
             <SettingsSection key={section.nameId} context={context} data={section} />
           ))}
         </div>
       : <div
-          className="flex min-h-full grow flex-col gap-settings-section overflow-auto lg:h-auto lg:flex-row"
+          className="flex min-h-full grow flex-col gap-settings-section lg:h-auto lg:flex-row"
           {...contentProps}
         >
           {columns.map((sectionsInColumn, i) => (
             <div
               key={i}
               className={tailwindMerge.twMerge(
-                'flex flex-1 flex-col gap-settings-subsection',
+                'flex h-fit flex-1 flex-col gap-settings-subsection pb-12',
                 classes[i],
               )}
             >
diff --git a/app/dashboard/src/layouts/Settings/SetupTwoFaForm.tsx b/app/dashboard/src/layouts/Settings/SetupTwoFaForm.tsx
new file mode 100644
index 000000000000..a21e462a67ee
--- /dev/null
+++ b/app/dashboard/src/layouts/Settings/SetupTwoFaForm.tsx
@@ -0,0 +1,252 @@
+/**
+ * @file
+ *
+ * 2FA Setup Settings Section. Allows users to setup, disable, and change their 2FA method.
+ */
+import ShieldCheck from '#/assets/shield_check.svg'
+import ShieldCrossed from '#/assets/shield_crossed.svg'
+import type { MfaType } from '#/authentication/cognito'
+import {
+  Alert,
+  Button,
+  ButtonGroup,
+  CopyBlock,
+  Dialog,
+  DialogTrigger,
+  Form,
+  OTPInput,
+  Selector,
+  Switch,
+  Text,
+} from '#/components/AriaComponents'
+import { ErrorBoundary } from '#/components/ErrorBoundary'
+import { Suspense } from '#/components/Suspense'
+import { useAuth } from '#/providers/AuthProvider'
+import { useText } from '#/providers/TextProvider'
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
+import { lazy } from 'react'
+
+const LazyQRCode = lazy(() =>
+  // eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/no-unsafe-assignment
+  import('qrcode.react').then(({ QRCodeCanvas }) => ({ default: QRCodeCanvas })),
+)
+
+/**
+ * 2FA Setup Settings Section.
+ *
+ * Allows users to setup, disable, and change their 2FA method.
+ */
+export function SetupTwoFaForm() {
+  const { getText } = useText()
+  const { cognito } = useAuth()
+
+  const { data } = useSuspenseQuery({
+    queryKey: ['twoFaPreference'],
+    queryFn: () =>
+      cognito.getMFAPreference().then((res) => {
+        if (res.err) {
+          throw res.val
+        } else {
+          return res.unwrap()
+        }
+      }),
+  })
+
+  const MFAEnabled = data !== 'NOMFA'
+
+  const updateMFAPreferenceMutation = useMutation({
+    mutationFn: (preference: MfaType) =>
+      cognito.updateMFAPreference(preference).then((res) => {
+        if (res.err) {
+          throw res.val
+        } else {
+          return res.unwrap()
+        }
+      }),
+    meta: { invalidates: [['twoFaPreference']] },
+  })
+
+  if (MFAEnabled) {
+    return (
+      <div className="flex w-full flex-col gap-4">
+        <Alert variant="neutral" icon={ShieldCheck}>
+          <Text.Group>
+            <Text variant="subtitle" weight="bold">
+              {getText('2FAEnabled')}
+            </Text>
+            <Text>{getText('2FAEnabledDescription')}</Text>
+          </Text.Group>
+        </Alert>
+
+        <div className="flex w-full flex-col">
+          <Text variant="subtitle" weight="bold">
+            {getText('disable2FA')}
+          </Text>
+
+          <Text color="disabled" className="mb-4">
+            {getText('disable2FADescription')}
+          </Text>
+
+          <DialogTrigger>
+            <Button variant="delete" className="self-start" icon={ShieldCrossed}>
+              {getText('disable2FA')}
+            </Button>
+
+            <Dialog title={getText('disable2FA')}>
+              <Form
+                /* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
+                schema={(z) => z.object({ otp: z.string().min(6).max(6) })}
+                formOptions={{ mode: 'onSubmit' }}
+                method="dialog"
+                onSubmit={({ otp }) =>
+                  cognito.verifyTotpToken(otp).then((res) => {
+                    if (res.ok) {
+                      return updateMFAPreferenceMutation.mutateAsync('NOMFA')
+                    } else {
+                      throw res.val
+                    }
+                  })
+                }
+              >
+                <Text>{getText('disable2FAWarning')}</Text>
+
+                <OTPInput autoFocus name="otp" maxLength={6} label={getText('verificationCode')} />
+
+                <ButtonGroup>
+                  <Form.Submit variant="delete">{getText('disable')}</Form.Submit>
+                  <Form.Submit formnovalidate>{getText('cancel')}</Form.Submit>
+                </ButtonGroup>
+
+                <Form.FormError />
+              </Form>
+            </Dialog>
+          </DialogTrigger>
+        </div>
+      </div>
+    )
+  } else {
+    return (
+      <Form
+        schema={(z) =>
+          z.object({
+            enabled: z.boolean(),
+            display: z.string(),
+            /* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
+            otp: z.string().min(6).max(6),
+          })
+        }
+        defaultValues={{ enabled: false, display: 'qr' }}
+        onSubmit={async ({ enabled, otp }) => {
+          if (enabled) {
+            return cognito.verifyTotpToken(otp).then((res) => {
+              if (res.ok) {
+                return updateMFAPreferenceMutation.mutateAsync('TOTP')
+              } else {
+                throw res.val
+              }
+            })
+          }
+        }}
+      >
+        {({ values }) => (
+          <>
+            <Switch
+              name="enabled"
+              description={getText('enable2FADescription')}
+              label={getText('enable2FA')}
+            />
+
+            <ErrorBoundary>
+              <Suspense>{values.enabled === true && <TwoFa />}</Suspense>
+            </ErrorBoundary>
+          </>
+        )}
+      </Form>
+    )
+  }
+}
+
+/**
+ * Two Factor Authentication Setup Form.
+ */
+function TwoFa() {
+  const { cognito } = useAuth()
+  const { getText } = useText()
+
+  const { data } = useSuspenseQuery({
+    queryKey: ['setupTOTP'],
+    queryFn: () =>
+      cognito.setupTOTP().then((res) => {
+        if (res.err) {
+          throw res.val
+        } else {
+          return res.unwrap()
+        }
+      }),
+  })
+
+  const { field } = Form.useField({ name: 'display' })
+
+  return (
+    <>
+      <div className="flex w-full flex-col gap-4">
+        <Selector name="display" items={['qr', 'text']} aria-label={getText('display')} />
+
+        {field.value === 'qr' && (
+          <>
+            <Alert variant="neutral" icon={ShieldCheck}>
+              <Text.Group>
+                <Text variant="subtitle" weight="bold">
+                  {getText('scanQR')}
+                </Text>
+
+                <Text>{getText('scanQRDescription')}</Text>
+              </Text.Group>
+            </Alert>
+
+            <div className="self-center">
+              <LazyQRCode
+                value={data.url}
+                bgColor="transparent"
+                fgColor="rgb(0 0 0 / 60%)"
+                size={192}
+                className="rounded-2xl border-0.5 border-primary p-4"
+              />
+            </div>
+          </>
+        )}
+
+        {field.value === 'text' && (
+          <>
+            <Alert variant="neutral" icon={ShieldCheck}>
+              <Text.Group>
+                <Text variant="subtitle" weight="bold">
+                  {getText('copyLink')}
+                </Text>
+                <Text>{getText('copyLinkDescription')}</Text>
+              </Text.Group>
+            </Alert>
+
+            <CopyBlock copyText={data.url} />
+          </>
+        )}
+
+        <OTPInput
+          className="max-w-96"
+          label={getText('verificationCode')}
+          name="otp"
+          maxLength={6}
+          description={getText('verificationCodePlaceholder')}
+        />
+      </div>
+
+      <ButtonGroup>
+        <Form.Submit>{getText('enable')}</Form.Submit>
+
+        <Form.Reset>{getText('cancel')}</Form.Reset>
+      </ButtonGroup>
+
+      <Form.FormError />
+    </>
+  )
+}
diff --git a/app/dashboard/src/layouts/Settings/settingsData.tsx b/app/dashboard/src/layouts/Settings/settingsData.tsx
index a73ef2d8eed1..a6b7faaf4bf5 100644
--- a/app/dashboard/src/layouts/Settings/settingsData.tsx
+++ b/app/dashboard/src/layouts/Settings/settingsData.tsx
@@ -42,6 +42,7 @@ import type RemoteBackend from '#/services/RemoteBackend'
 
 import { normalizePath } from '#/utilities/fileInfo'
 import * as object from '#/utilities/object'
+import { SetupTwoFaForm } from './SetupTwoFaForm'
 
 // =========================
 // === SettingsEntryType ===
@@ -124,6 +125,23 @@ export const SETTINGS_TAB_DATA: Readonly<Record<SettingsTabType, SettingsTabData
           },
         ],
       },
+      {
+        nameId: 'setup2FASettingsSection',
+        entries: [
+          {
+            type: SettingsEntryType.custom,
+            render: SetupTwoFaForm,
+            getVisible: (context) => {
+              // The shape of the JWT payload is statically known.
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              const username: string | null =
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-non-null-assertion
+                JSON.parse(atob(context.accessToken.split('.')[1]!)).username
+              return username != null ? !/^Github_|^Google_/.test(username) : false
+            },
+          },
+        ],
+      },
       {
         nameId: 'deleteUserAccountSettingsSection',
         heading: false,
diff --git a/app/dashboard/src/layouts/StartModal.tsx b/app/dashboard/src/layouts/StartModal.tsx
index b6ae5100bb7b..4310e08ae3cc 100644
--- a/app/dashboard/src/layouts/StartModal.tsx
+++ b/app/dashboard/src/layouts/StartModal.tsx
@@ -26,18 +26,26 @@ export default function StartModal(props: StartModalProps) {
     <ariaComponents.Dialog type="fullscreen" title={getText('selectTemplate')}>
       {(opts) => (
         <div className="mb-4 flex flex-1 flex-col gap-home text-xs text-primary">
-          <ariaComponents.Text
-            elementType="p"
-            variant="custom"
-            balance
-            className="mx-10 my-12 max-w-[45rem] self-center text-center text-3xl font-light leading-snug"
-          >
-            {getText('welcomeSubtitle')}
-          </ariaComponents.Text>
-
           <WhatsNew />
 
           <Samples
+            groupName="Get Started"
+            createProject={(templateId, templateName) => {
+              createProject(templateId, templateName)
+              opts.close()
+            }}
+          />
+
+          <Samples
+            groupName="Examples"
+            createProject={(templateId, templateName) => {
+              createProject(templateId, templateName)
+              opts.close()
+            }}
+          />
+
+          <Samples
+            groupName="Advanced"
             createProject={(templateId, templateName) => {
               createProject(templateId, templateName)
               opts.close()
diff --git a/app/dashboard/src/layouts/UserBar.tsx b/app/dashboard/src/layouts/UserBar.tsx
index 763e2eeb3fda..45931526b496 100644
--- a/app/dashboard/src/layouts/UserBar.tsx
+++ b/app/dashboard/src/layouts/UserBar.tsx
@@ -1,6 +1,4 @@
 /** @file A toolbar containing chat and the user menu. */
-import * as React from 'react'
-
 import ChatIcon from '#/assets/chat.svg'
 import DefaultUserIcon from '#/assets/default_user.svg'
 
@@ -20,6 +18,7 @@ import Button from '#/components/styled/Button'
 import FocusArea from '#/components/styled/FocusArea'
 
 import InviteUsersModal from '#/modals/InviteUsersModal'
+import { Plan } from '#/services/Backend'
 
 // =================
 // === Constants ===
@@ -52,10 +51,16 @@ export default function UserBar(props: UserBarProps) {
   const { getText } = textProvider.useText()
   const { isFeatureUnderPaywall } = billing.usePaywall({ plan: user.plan })
 
-  const shouldShowUpgradeButton = user.isOrganizationAdmin
-  const shouldShowPaywallButton = isFeatureUnderPaywall('inviteUser')
-  const shouldShowShareButton = onShareClick != null
-  const shouldShowInviteButton = !shouldShowShareButton && !shouldShowPaywallButton
+  const shouldShowUpgradeButton =
+    user.isOrganizationAdmin && user.plan !== Plan.enterprise && user.plan !== Plan.team
+  // eslint-disable-next-line no-restricted-syntax
+  const shouldShowPaywallButton = (false as boolean) && isFeatureUnderPaywall('inviteUser')
+  // FIXME[sb]: Re-enable when they are wanted again.
+  // eslint-disable-next-line no-restricted-syntax
+  const shouldShowShareButton = (false as boolean) && onShareClick != null
+  const shouldShowInviteButton =
+    // eslint-disable-next-line no-restricted-syntax
+    (false as boolean) && !shouldShowShareButton && !shouldShowPaywallButton
 
   return (
     <FocusArea active={!invisible} direction="horizontal">
diff --git a/app/dashboard/src/layouts/WhatsNew.tsx b/app/dashboard/src/layouts/WhatsNew.tsx
index 17f66ecec720..6b608e1a4733 100644
--- a/app/dashboard/src/layouts/WhatsNew.tsx
+++ b/app/dashboard/src/layouts/WhatsNew.tsx
@@ -1,15 +1,15 @@
 /** @file Community updates for the app. */
 import * as React from 'react'
 
-import DiscordIcon from '#/assets/discord.svg'
+import BookImage from '#/assets/book.png'
+import Logo from '#/assets/enso_logo_large.svg'
 import IntegrationsImage from '#/assets/integrations.png'
 import YoutubeIcon from '#/assets/youtube.svg'
+import { Button, Text } from '#/components/AriaComponents'
 
 import * as textProvider from '#/providers/TextProvider'
 
-import * as aria from '#/components/aria'
-import FocusArea from '#/components/styled/FocusArea'
-import FocusRing from '#/components/styled/FocusRing'
+import SvgMask from '#/components/SvgMask'
 
 // ================
 // === WhatsNew ===
@@ -20,86 +20,108 @@ export default function WhatsNew() {
   const { getText } = textProvider.useText()
 
   return (
-    <div className="flex flex-col gap-subheading px-[5px]">
-      <aria.Heading level={2} className="text-subheading font-normal">
-        {getText('discoverWhatsNew')}
-      </aria.Heading>
-      <div className="grid grid-cols-fill-news-items gap-news-items">
-        <FocusArea direction="horizontal">
-          {(innerProps) => (
-            <FocusRing>
-              <a
-                className="focus-child relative col-span-1 h-news-item rounded-default bg-v3 text-tag-text col-span-2-news-item sm:col-span-2"
-                rel="noreferrer"
-                target="_blank"
-                href="https://enso.org/"
-                style={{ background: `url(${IntegrationsImage}) top -85px right -390px / 1055px` }}
-                {...innerProps}
-              >
-                <div className="absolute bottom flex w-full flex-col p-news-item-description">
-                  <aria.Text className="text-subheading font-bold">
-                    {getText('newsItem3Beta')}
-                  </aria.Text>
-                  <aria.Text className="py-news-item-subtitle-y text-sm leading-snug">
-                    {getText('newsItem3BetaDescription')}
-                  </aria.Text>
-                </div>
-              </a>
-            </FocusRing>
-          )}
-        </FocusArea>
-        <FocusArea direction="horizontal">
-          {(innerProps) => (
-            <FocusRing>
-              <a
-                className="focus-child relative h-news-item rounded-default bg-youtube text-tag-text"
-                rel="noreferrer"
-                target="_blank"
-                href="https://www.youtube.com/c/Enso_org"
-                {...innerProps}
-              >
-                <img
-                  className="absolute left-1/2 top-6 mx-auto -translate-x-1/2"
-                  src={YoutubeIcon}
-                />
-                <div className="absolute bottom flex w-full flex-col p-news-item-description">
-                  <aria.Text className="text-subheading font-bold">
-                    {getText('newsItemWeeklyTutorials')}
-                  </aria.Text>
-                  <aria.Text className="py-news-item-subtitle-y text-sm leading-snug">
-                    {getText('newsItemWeeklyTutorialsDescription')}
-                  </aria.Text>
-                </div>
-              </a>
-            </FocusRing>
-          )}
-        </FocusArea>
-        <FocusArea direction="horizontal">
-          {(innerProps) => (
-            <FocusRing>
-              <a
-                className="focus-child relative h-news-item rounded-default bg-discord text-tag-text"
-                rel="noreferrer"
-                target="_blank"
-                href="https://discord.gg/enso"
-                {...innerProps}
-              >
-                <img
-                  className="absolute left-1/2 top-7 mx-auto -translate-x-1/2"
-                  src={DiscordIcon}
-                />
-                <div className="absolute bottom flex w-full flex-col p-news-item-description">
-                  <aria.Text className="text-subheading font-bold">
-                    {getText('newsItemCommunityServer')}
-                  </aria.Text>
-                  <aria.Text className="py-news-item-subtitle-y text-sm leading-snug">
-                    {getText('newsItemCommunityServerDescription')}
-                  </aria.Text>
-                </div>
-              </a>
-            </FocusRing>
-          )}
-        </FocusArea>
+    <div className="flex w-full flex-col">
+      <Text.Heading level={2}>{getText('discoverWhatsNew')}</Text.Heading>
+
+      <div className="-mx-12 inline-flex snap-x snap-mandatory gap-4 overflow-x-auto px-12 py-2 scroll-offset-edge-9xl">
+        <Button
+          variant="custom"
+          size="custom"
+          rounded="xxxlarge"
+          className="flex-none snap-center snap-always overflow-hidden bg-accent"
+          rel="noreferrer"
+          target="_blank"
+          href="https://help.enso.org/"
+        >
+          <SvgMask
+            src={BookImage}
+            className="absolute left-1/2 top-5 mx-auto -translate-x-1/2"
+            color="white"
+          />
+
+          <div className="flex aspect-[7/4] h-40 w-full flex-col justify-end bg-gradient-to-t from-accent-dark to-transparent">
+            <div className="flex w-full flex-col items-start px-4 pb-3 text-start">
+              <Text variant="subtitle" color="invert" nowrap="normal">
+                {getText('newsItemHelpServer')}
+              </Text>
+              <Text variant="body-sm" color="invert" nowrap="normal">
+                {getText('newsItemHelpServerDescription')}
+              </Text>
+            </div>
+          </div>
+        </Button>
+        <Button
+          variant="custom"
+          size="custom"
+          rounded="xxxlarge"
+          className="flex-none snap-center snap-always overflow-hidden bg-youtube"
+          rel="noreferrer"
+          target="_blank"
+          href="https://www.youtube.com/@Enso_Analytics/videos"
+        >
+          <SvgMask
+            src={YoutubeIcon}
+            className="absolute left-1/2 top-6 mx-auto -translate-x-1/2"
+            color="white"
+          />
+
+          <div className="from-youtube-transparent flex aspect-[7/4] h-40 w-full flex-col justify-end bg-gradient-to-t">
+            <div className="flex w-full flex-col items-start px-4 pb-3 text-start">
+              <Text variant="subtitle" color="invert" nowrap="normal">
+                {getText('newsItemWeeklyTutorials')}
+              </Text>
+              <Text variant="body-sm" color="invert" nowrap="normal">
+                {getText('newsItemWeeklyTutorialsDescription')}
+              </Text>
+            </div>
+          </div>
+        </Button>
+        <Button
+          variant="custom"
+          size="custom"
+          rounded="xxxlarge"
+          className="flex-none snap-center snap-always overflow-hidden bg-green"
+          rel="noreferrer"
+          target="_blank"
+          href="https://community.ensoanalytics.com/"
+        >
+          <SvgMask
+            src={Logo}
+            className="absolute left-1/2 top-4 mx-auto -translate-x-1/2"
+            color="white"
+          />
+          <div className="flex aspect-[7/4] h-40 w-full flex-col justify-end bg-gradient-to-t from-accent-dark to-transparent">
+            <div className="flex w-full flex-col items-start px-4 pb-3 text-start">
+              <Text variant="subtitle" color="invert" nowrap="normal">
+                {getText('newsItemCommunityServer')}
+              </Text>
+              <Text variant="body-sm" color="invert" nowrap="normal">
+                {getText('newsItemCommunityServerDescription')}
+              </Text>
+            </div>
+          </div>
+        </Button>
+        <Button
+          variant="custom"
+          size="custom"
+          rounded="xxxlarge"
+          className="flex-none snap-center snap-always overflow-hidden"
+          target="_blank"
+          href="https://community.ensoanalytics.com/c/what-is-new-in-enso/"
+          style={{ background: `url(${IntegrationsImage}) top -85px right -390px / 1055px` }}
+        >
+          <div className="flex aspect-[7/4] h-40 w-full flex-col justify-end bg-gradient-to-t from-primary to-transparent">
+            <div className="absolute bottom left right flex flex-col items-start px-4 pb-3 text-start">
+              <Text variant="subtitle" color="invert" nowrap="normal">
+                {getText('newsItem3Beta')}
+              </Text>
+
+              <Text variant="body-sm" color="invert" nowrap="normal">
+                {getText('newsItem3BetaDescription')}
+              </Text>
+            </div>
+          </div>
+        </Button>
       </div>
     </div>
   )
diff --git a/app/dashboard/src/modals/CaptureKeyboardShortcutModal.tsx b/app/dashboard/src/modals/CaptureKeyboardShortcutModal.tsx
index 7114cf4549eb..6ff805e61189 100644
--- a/app/dashboard/src/modals/CaptureKeyboardShortcutModal.tsx
+++ b/app/dashboard/src/modals/CaptureKeyboardShortcutModal.tsx
@@ -67,7 +67,6 @@ export default function CaptureKeyboardShortcutModal(props: CaptureKeyboardShort
   return (
     <Modal centered className="bg-dim">
       <form
-        data-testid="confirm-delete-modal"
         ref={(element) => {
           element?.focus()
         }}
diff --git a/app/dashboard/src/modals/ConfirmDeleteModal.tsx b/app/dashboard/src/modals/ConfirmDeleteModal.tsx
index b549e14a3785..7fa150f1ec55 100644
--- a/app/dashboard/src/modals/ConfirmDeleteModal.tsx
+++ b/app/dashboard/src/modals/ConfirmDeleteModal.tsx
@@ -1,7 +1,8 @@
 /** @file Modal for confirming delete of any type of asset. */
 import * as z from 'zod'
 
-import { Button, ButtonGroup, Dialog, Form, Text } from '#/components/AriaComponents'
+import { ButtonGroup, Dialog, Form, Text } from '#/components/AriaComponents'
+import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
 
 // ==========================
@@ -21,29 +22,25 @@ export interface ConfirmDeleteModalProps {
 /** A modal for confirming the deletion of an asset. */
 export default function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
   const { defaultOpen, actionText, actionButtonLabel = 'Delete', doDelete } = props
+
+  const { unsetModal } = useSetModal()
   const { getText } = useText()
 
   return (
     <Dialog title={getText('areYouSure')} modalProps={defaultOpen == null ? {} : { defaultOpen }}>
-      {({ close }) => (
-        <Form
-          schema={z.object({})}
-          method="dialog"
-          data-testid="confirm-delete-modal"
-          tabIndex={-1}
-          onSubmit={doDelete}
-        >
-          <Text className="relative">{getText('confirmPrompt', actionText)}</Text>
-          <ButtonGroup className="relative">
-            <Form.Submit variant="delete" className="relative">
-              {actionButtonLabel}
-            </Form.Submit>
-            <Button size="medium" variant="outline" autoFocus className="relative" onPress={close}>
-              {getText('cancel')}
-            </Button>
-          </ButtonGroup>
-        </Form>
-      )}
+      <Form schema={z.object({})} method="dialog" onSubmit={doDelete} onSubmitSuccess={unsetModal}>
+        <Text className="relative">{getText('confirmPrompt', actionText)}</Text>
+
+        <ButtonGroup>
+          <Form.Submit variant="delete" className="relative">
+            {actionButtonLabel}
+          </Form.Submit>
+
+          <Form.Submit formnovalidate variant="outline">
+            {getText('cancel')}
+          </Form.Submit>
+        </ButtonGroup>
+      </Form>
     </Dialog>
   )
 }
diff --git a/app/dashboard/src/modals/ConfirmDeleteUserModal.tsx b/app/dashboard/src/modals/ConfirmDeleteUserModal.tsx
index 15f6484f692a..bad6609058b1 100644
--- a/app/dashboard/src/modals/ConfirmDeleteUserModal.tsx
+++ b/app/dashboard/src/modals/ConfirmDeleteUserModal.tsx
@@ -1,14 +1,8 @@
 /** @file Modal for confirming delete of any type of asset. */
-import * as React from 'react'
+import * as z from 'zod'
 
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
-import Modal from '#/components/Modal'
+import { ButtonGroup, Dialog, Form, Text } from '#/components/AriaComponents'
+import { useText } from '#/providers/TextProvider'
 
 // ==============================
 // === ConfirmDeleteUserModal ===
@@ -22,53 +16,32 @@ export interface ConfirmDeleteUserModalProps {
 /** A modal for confirming the deletion of a user. */
 export default function ConfirmDeleteUserModal(props: ConfirmDeleteUserModalProps) {
   const { doDelete } = props
-  const { unsetModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-
-  const doSubmit = async () => {
-    unsetModal()
-    try {
-      await doDelete()
-    } catch (error) {
-      toastAndLog(null, error)
-    }
-  }
+  const { getText } = useText()
 
   return (
-    <Modal centered className="bg-dim">
-      <form
+    <Dialog title={getText('areYouSure')} className="items-center">
+      <Form
+        schema={z.object({})}
+        method="dialog"
         data-testid="confirm-delete-modal"
         ref={(element) => {
           element?.focus()
         }}
         tabIndex={-1}
-        className="pointer-events-auto relative flex w-confirm-delete-user-modal flex-col items-center gap-modal rounded-default p-modal-wide pt-modal before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
         onClick={(event) => {
           event.stopPropagation()
         }}
-        onSubmit={(event) => {
-          event.preventDefault()
-          void doSubmit()
-        }}
+        onSubmit={doDelete}
       >
-        <aria.Heading className="py-heading relative h-heading text-xl font-bold">
-          {getText('areYouSure')}
-        </aria.Heading>
-        <aria.Text className="relative mb-2 text-balance text-center">
+        <Text className="text-balance text-center">
           {getText('confirmDeleteUserAccountWarning')}
-        </aria.Text>
-        <ariaComponents.ButtonGroup className="relative self-center">
-          <ariaComponents.Button
-            size="custom"
-            variant="custom"
-            className="button relative bg-danger text-inversed active"
-            onPress={doSubmit}
-          >
-            <aria.Text className="text">{getText('confirmDeleteUserAccountButtonLabel')}</aria.Text>
-          </ariaComponents.Button>
-        </ariaComponents.ButtonGroup>
-      </form>
-    </Modal>
+        </Text>
+        <ButtonGroup className="w-min self-center">
+          <Form.Submit variant="delete">
+            {getText('confirmDeleteUserAccountButtonLabel')}
+          </Form.Submit>
+        </ButtonGroup>
+      </Form>
+    </Dialog>
   )
 }
diff --git a/app/dashboard/src/modals/DuplicateAssetsModal.tsx b/app/dashboard/src/modals/DuplicateAssetsModal.tsx
index 6cefadad726f..a1778b722c4e 100644
--- a/app/dashboard/src/modals/DuplicateAssetsModal.tsx
+++ b/app/dashboard/src/modals/DuplicateAssetsModal.tsx
@@ -4,11 +4,6 @@ import * as React from 'react'
 import * as modalProvider from '#/providers/ModalProvider'
 import * as textProvider from '#/providers/TextProvider'
 
-import AssetEventType from '#/events/AssetEventType'
-import AssetListEventType from '#/events/AssetListEventType'
-
-import * as eventListProvider from '#/layouts/AssetsTable/EventListProvider'
-
 import * as aria from '#/components/aria'
 import * as ariaComponents from '#/components/AriaComponents'
 import AssetSummary from '#/components/dashboard/AssetSummary'
@@ -55,15 +50,13 @@ export interface DuplicateAssetsModalProps {
 
 /** A modal for creating a new label. */
 export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
-  const { parentKey, parentId, conflictingFiles: conflictingFilesRaw } = props
+  const { conflictingFiles: conflictingFilesRaw } = props
   const { conflictingProjects: conflictingProjectsRaw, doUpdateConflicting } = props
   const { siblingFileNames: siblingFileNamesRaw } = props
   const { siblingProjectNames: siblingProjectNamesRaw } = props
   const { nonConflictingFileCount, nonConflictingProjectCount, doUploadNonConflicting } = props
   const { unsetModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
-  const dispatchAssetEvent = eventListProvider.useDispatchAssetEvent()
-  const dispatchAssetListEvent = eventListProvider.useDispatchAssetListEvent()
   const [conflictingFiles, setConflictingFiles] = React.useState(conflictingFilesRaw)
   const [conflictingProjects, setConflictingProjects] = React.useState(conflictingProjectsRaw)
   const [didUploadNonConflicting, setDidUploadNonConflicting] = React.useState(false)
@@ -128,20 +121,13 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
 
   const doRename = (toRename: ConflictingAsset[]) => {
     const clonedConflicts = structuredClone(toRename)
+
     for (const conflict of clonedConflicts) {
       // This is SAFE, as it is a shallow mutation of a freshly cloned object.
       object.unsafeMutable(conflict.new).title = findNewName(conflict)
     }
-    dispatchAssetListEvent({
-      type: AssetListEventType.insertAssets,
-      parentKey,
-      parentId,
-      assets: clonedConflicts.map((conflict) => conflict.new),
-    })
-    dispatchAssetEvent({
-      type: AssetEventType.uploadFiles,
-      files: new Map(clonedConflicts.map((conflict) => [conflict.new.id, conflict.file])),
-    })
+
+    return clonedConflicts
   }
 
   return (
@@ -270,19 +256,23 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
           <ariaComponents.Button
             variant="submit"
             onPress={() => {
-              unsetModal()
               doUploadNonConflicting()
               doUpdateConflicting([...conflictingFiles, ...conflictingProjects])
+              unsetModal()
             }}
           >
             {count === 1 ? getText('update') : getText('updateAll')}
           </ariaComponents.Button>
           <ariaComponents.Button
-            variant="submit"
+            variant="accent"
             onPress={() => {
-              unsetModal()
+              const resolved = doRename([...conflictingFiles, ...conflictingProjects])
+
               doUploadNonConflicting()
-              doRename([...conflictingFiles, ...conflictingProjects])
+
+              doUpdateConflicting(resolved)
+
+              unsetModal()
             }}
           >
             {count === 1 ?
diff --git a/app/dashboard/src/modals/InviteUsersModal/InviteUsersModal.tsx b/app/dashboard/src/modals/InviteUsersModal/InviteUsersModal.tsx
index 1a9bf20dfcd0..4987b73aebf5 100644
--- a/app/dashboard/src/modals/InviteUsersModal/InviteUsersModal.tsx
+++ b/app/dashboard/src/modals/InviteUsersModal/InviteUsersModal.tsx
@@ -79,23 +79,17 @@ function InviteUsersModalContent(props: InviteUsersModalContentProps) {
 
   return (
     <Stepper state={stepperState} renderStep={() => null}>
-      {({ currentStep }) => (
-        <>
-          {currentStep === 0 && (
-            <inviteUsersForm.InviteUsersForm
-              onSubmitted={onInviteUsersFormInviteUsersFormSubmitted}
-            />
-          )}
-
-          {currentStep === 1 && (
-            <inviteUsersSuccess.InviteUsersSuccess
-              {...props}
-              invitationLink={invitationLink}
-              emails={submittedEmails}
-            />
-          )}
-        </>
-      )}
+      <Stepper.StepContent index={0}>
+        <inviteUsersForm.InviteUsersForm onSubmitted={onInviteUsersFormInviteUsersFormSubmitted} />
+      </Stepper.StepContent>
+
+      <Stepper.StepContent index={1}>
+        <inviteUsersSuccess.InviteUsersSuccess
+          {...props}
+          invitationLink={invitationLink}
+          emails={submittedEmails}
+        />
+      </Stepper.StepContent>
     </Stepper>
   )
 }
diff --git a/app/dashboard/src/modals/NewUserGroupModal.tsx b/app/dashboard/src/modals/NewUserGroupModal.tsx
index 4bb4b62b3cb7..2114ae1500a9 100644
--- a/app/dashboard/src/modals/NewUserGroupModal.tsx
+++ b/app/dashboard/src/modals/NewUserGroupModal.tsx
@@ -74,7 +74,6 @@ export default function NewUserGroupModal(props: NewUserGroupModalProps) {
       )}
     >
       <form
-        data-testid="new-user-group-modal"
         tabIndex={-1}
         className="pointer-events-auto relative flex w-new-label-modal flex-col gap-modal rounded-default p-modal-wide pb-3 pt-modal before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
         style={positionEvent == null ? {} : { left: positionEvent.pageX, top: positionEvent.pageY }}
diff --git a/app/dashboard/src/modals/UpsertDatalinkModal.tsx b/app/dashboard/src/modals/UpsertDatalinkModal.tsx
index 89186aceb078..90cd7eb39b4a 100644
--- a/app/dashboard/src/modals/UpsertDatalinkModal.tsx
+++ b/app/dashboard/src/modals/UpsertDatalinkModal.tsx
@@ -1,7 +1,5 @@
 /** @file A modal for creating a Datalink. */
-import * as z from 'zod'
-
-import { Button, ButtonGroup, Dialog, Form, Input } from '#/components/AriaComponents'
+import { ButtonGroup, Dialog, Form, Input } from '#/components/AriaComponents'
 import { DatalinkFormInput } from '#/components/dashboard/DatalinkInput'
 import SCHEMA from '#/data/datalinkSchema.json' with { type: 'json' }
 import { validateDatalink } from '#/data/datalinkValidator'
@@ -15,11 +13,6 @@ import { constantValueOfSchema } from '#/utilities/jsonSchema'
 const DEFS: Record<string, object> = SCHEMA.$defs
 const INITIAL_DATALINK_VALUE = constantValueOfSchema(DEFS, SCHEMA.$defs.DataLink, true)[0] ?? null
 
-/** Create the schema for this form. */
-function createUpsertDatalinkSchema() {
-  return z.object({ name: z.string().min(1), value: z.unknown().refine(validateDatalink) })
-}
-
 // ===========================
 // === UpsertDataLinkModal ===
 // ===========================
@@ -32,43 +25,40 @@ export interface UpsertDatalinkModalProps {
 /** A modal for creating a Datalink. */
 export default function UpsertDatalinkModal(props: UpsertDatalinkModalProps) {
   const { doCreate } = props
+
   const { getText } = useText()
 
   return (
-    <Dialog fitContent title={getText('createDatalink')} className="min-w-max">
-      {({ close }) => (
-        <Form
-          method="dialog"
-          schema={createUpsertDatalinkSchema()}
-          defaultValues={{ value: INITIAL_DATALINK_VALUE }}
-          className="min-w-max"
-          onSubmit={async ({ name, value }) => {
-            await doCreate(name, value)
-          }}
-        >
-          {({ form }) => (
-            <>
-              <Input
-                form={form}
-                name="name"
-                autoFocus
-                label={getText('name')}
-                placeholder={getText('datalinkNamePlaceholder')}
-              />
-              <div className="relative">
-                <DatalinkFormInput form={form} name="value" dropdownTitle={getText('type')} />
-              </div>
-              <ButtonGroup className="relative">
-                <Form.Submit>{getText('create')}</Form.Submit>
-                <Button size="medium" variant="outline" onPress={close}>
-                  {getText('cancel')}
-                </Button>
-              </ButtonGroup>
-              <Form.FormError />
-            </>
-          )}
-        </Form>
-      )}
+    <Dialog size="xlarge" title={getText('createDatalink')} isDismissable={false}>
+      <Form
+        method="dialog"
+        schema={(z) =>
+          z.object({
+            name: z.string().min(1),
+            value: z.unknown().refine(validateDatalink),
+          })
+        }
+        defaultValues={{ value: INITIAL_DATALINK_VALUE }}
+        onSubmit={({ name, value }) => doCreate(name, value)}
+      >
+        <Input
+          name="name"
+          autoFocus
+          label={getText('name')}
+          placeholder={getText('datalinkNamePlaceholder')}
+        />
+
+        <div className="relative w-full">
+          <DatalinkFormInput name="value" dropdownTitle={getText('type')} />
+        </div>
+
+        <ButtonGroup>
+          <Form.Submit>{getText('create')}</Form.Submit>
+          <Form.Submit formnovalidate>{getText('cancel')}</Form.Submit>
+        </ButtonGroup>
+
+        <Form.FormError />
+      </Form>
     </Dialog>
   )
 }
diff --git a/app/dashboard/src/modals/UpsertSecretModal.tsx b/app/dashboard/src/modals/UpsertSecretModal.tsx
index bbb3ec1e769f..c006d69aa811 100644
--- a/app/dashboard/src/modals/UpsertSecretModal.tsx
+++ b/app/dashboard/src/modals/UpsertSecretModal.tsx
@@ -1,18 +1,8 @@
 /** @file Modal for confirming delete of any type of asset. */
-import * as z from 'zod'
-
-import { Button, ButtonGroup, Dialog, Form, Input, Password } from '#/components/AriaComponents'
+import { ButtonGroup, Dialog, Form, Input, Password } from '#/components/AriaComponents'
 import { useText } from '#/providers/TextProvider'
 import type { SecretId } from '#/services/Backend'
 
-/** Create the schema for this form. */
-function createUpsertSecretSchema() {
-  return z.object({
-    name: z.string().min(1),
-    value: z.string(),
-  })
-}
-
 // =========================
 // === UpsertSecretModal ===
 // =========================
@@ -21,62 +11,61 @@ function createUpsertSecretSchema() {
 export interface UpsertSecretModalProps {
   readonly id: SecretId | null
   readonly name: string | null
+  readonly defaultOpen?: boolean
   readonly doCreate: (name: string, value: string) => Promise<void> | void
 }
 
 /** A modal for creating and editing a secret. */
 export default function UpsertSecretModal(props: UpsertSecretModalProps) {
-  const { id, name: nameRaw, doCreate } = props
+  const { id, name: nameRaw, defaultOpen, doCreate } = props
   const { getText } = useText()
 
   const isCreatingSecret = id == null
   const isNameEditable = nameRaw == null
 
   return (
-    <Dialog title={isCreatingSecret ? getText('newSecret') : getText('editSecret')}>
-      {({ close }) => (
-        <Form
-          data-testid="upsert-secret-modal"
-          method="dialog"
-          schema={createUpsertSecretSchema()}
-          onSubmit={async ({ name, value }) => {
-            await doCreate(name, value)
-          }}
-        >
-          {({ form }) => (
-            <>
-              <Input
-                form={form}
-                name="name"
-                autoFocus
-                autoComplete="off"
-                disabled={!isNameEditable}
-                label={getText('name')}
-                placeholder={getText('secretNamePlaceholder')}
-                defaultValue={nameRaw ?? undefined}
-              />
-              <Password
-                form={form}
-                name="value"
-                autoFocus={!isNameEditable}
-                autoComplete="off"
-                label={getText('value')}
-                placeholder={
-                  isNameEditable ? getText('secretValuePlaceholder') : getText('secretValueHidden')
-                }
-              />
-              <ButtonGroup className="relative">
-                <Form.Submit>
-                  {isCreatingSecret ? getText('create') : getText('update')}
-                </Form.Submit>
-                <Button variant="outline" onPress={close}>
-                  {getText('cancel')}
-                </Button>
-              </ButtonGroup>
-            </>
-          )}
-        </Form>
-      )}
+    <Dialog
+      title={isCreatingSecret ? getText('newSecret') : getText('editSecret')}
+      modalProps={defaultOpen == null ? {} : { defaultOpen }}
+      isDismissable={false}
+    >
+      <Form
+        testId="upsert-secret-modal"
+        method="dialog"
+        schema={(z) => z.object({ name: z.string().min(1), value: z.string() })}
+        defaultValues={{ name: nameRaw ?? '', value: '' }}
+        onSubmit={async ({ name, value }) => {
+          await doCreate(name, value)
+        }}
+      >
+        {({ form }) => (
+          <>
+            <Input
+              form={form}
+              name="name"
+              autoFocus
+              autoComplete="off"
+              disabled={!isNameEditable}
+              label={getText('name')}
+              placeholder={getText('secretNamePlaceholder')}
+            />
+            <Password
+              form={form}
+              name="value"
+              autoFocus={!isNameEditable}
+              autoComplete="off"
+              label={getText('value')}
+              placeholder={
+                isNameEditable ? getText('secretValuePlaceholder') : getText('secretValueHidden')
+              }
+            />
+            <ButtonGroup>
+              <Form.Submit>{isCreatingSecret ? getText('create') : getText('update')}</Form.Submit>
+              <Form.Submit formnovalidate />
+            </ButtonGroup>
+          </>
+        )}
+      </Form>
     </Dialog>
   )
 }
diff --git a/app/dashboard/src/modules/payments/api/createPaymentMethod.ts b/app/dashboard/src/modules/payments/api/createPaymentMethod.ts
new file mode 100644
index 000000000000..bdda11e1182e
--- /dev/null
+++ b/app/dashboard/src/modules/payments/api/createPaymentMethod.ts
@@ -0,0 +1,38 @@
+/**
+ * @file
+ *
+ * API for creating a payment method.
+ */
+import type { Stripe, StripeCardElement } from '@stripe/stripe-js'
+import { useMutation } from '@tanstack/react-query'
+
+/**
+ * Parameters for the `createPaymentMethod` mutation.
+ */
+export interface CreatePaymentMethodMutationParams {
+  readonly cardElement?: StripeCardElement | null | undefined
+  readonly stripeInstance: Stripe
+}
+
+/**
+ * Hook for creating a payment method.
+ */
+export function useCreatePaymentMethodMutation() {
+  return useMutation({
+    mutationFn: async (params: CreatePaymentMethodMutationParams) => {
+      if (!params.cardElement) {
+        throw new Error('Unexpected error')
+      } else {
+        return params.stripeInstance
+          .createPaymentMethod({ type: 'card', card: params.cardElement })
+          .then((result) => {
+            if (result.error) {
+              throw new Error(result.error.message)
+            } else {
+              return result
+            }
+          })
+      }
+    },
+  })
+}
diff --git a/app/dashboard/src/modules/payments/api/index.ts b/app/dashboard/src/modules/payments/api/index.ts
index 010307ebb87a..335941e5232a 100644
--- a/app/dashboard/src/modules/payments/api/index.ts
+++ b/app/dashboard/src/modules/payments/api/index.ts
@@ -3,4 +3,5 @@
  *
  * Barrel file for payments api
  */
+export * from './createPaymentMethod'
 export * from './useSubscriptionPrice'
diff --git a/app/dashboard/src/modules/payments/components/AddPaymentMethodForm.tsx b/app/dashboard/src/modules/payments/components/AddPaymentMethodForm.tsx
index cf5a51d451b5..0f4024abb58a 100644
--- a/app/dashboard/src/modules/payments/components/AddPaymentMethodForm.tsx
+++ b/app/dashboard/src/modules/payments/components/AddPaymentMethodForm.tsx
@@ -7,11 +7,11 @@ import * as React from 'react'
 
 import * as stripeReact from '@stripe/react-stripe-js'
 import type * as stripeJs from '@stripe/stripe-js'
-import * as reactQuery from '@tanstack/react-query'
 
 import * as text from '#/providers/TextProvider'
 
 import * as ariaComponents from '#/components/AriaComponents'
+import { useCreatePaymentMethodMutation } from '../api/createPaymentMethod'
 
 /**
  * Props for {@link AddPaymentMethodForm}.
@@ -44,6 +44,8 @@ export const ADD_PAYMENT_METHOD_FORM_SCHEMA = ariaComponents.Form.schema.object(
       (data) => data?.error == null,
       (data) => ({ message: data?.error?.message ?? 'This field is required' }),
     ),
+  cardElement: ariaComponents.Form.schema.custom<stripeJs.StripeCardElement | null>(),
+  stripeInstance: ariaComponents.Form.schema.custom<stripeJs.Stripe>(),
 })
 
 /**
@@ -52,54 +54,33 @@ export const ADD_PAYMENT_METHOD_FORM_SCHEMA = ariaComponents.Form.schema.object(
 export function AddPaymentMethodForm<
   Schema extends typeof ADD_PAYMENT_METHOD_FORM_SCHEMA = typeof ADD_PAYMENT_METHOD_FORM_SCHEMA,
 >(props: AddPaymentMethodFormProps<Schema>) {
-  const { stripeInstance, elements, onSubmit, submitText, form } = props
+  const { stripeInstance, onSubmit, submitText, form } = props
 
   const { getText } = text.useText()
 
-  const [cardElement, setCardElement] = React.useState<stripeJs.StripeCardElement | null>(() =>
-    elements.getElement(stripeReact.CardElement),
-  )
-
   const dialogContext = ariaComponents.useDialogContext()
 
-  const createPaymentMethodMutation = reactQuery.useMutation({
-    mutationFn: async () => {
-      if (!cardElement) {
-        throw new Error('Unexpected error')
-      } else {
-        return stripeInstance
-          .createPaymentMethod({ type: 'card', card: cardElement })
-          .then((result) => {
-            if (result.error) {
-              throw new Error(result.error.message)
-            } else {
-              return result
-            }
-          })
-      }
-    },
-  })
+  const createPaymentMethodMutation = useCreatePaymentMethodMutation()
 
   // No idea if it's safe or not, but outside of the function everything is fine
   // but for some reason TypeScript fails to infer the `card` field from the schema (it should always be there)
+  // eslint-disable-next-line no-restricted-syntax
   const formInstance = ariaComponents.Form.useForm(
-    // eslint-disable-next-line no-restricted-syntax
-    (form as ariaComponents.FormInstance<typeof ADD_PAYMENT_METHOD_FORM_SCHEMA> | undefined) ?? {
+    form ?? {
       schema: ADD_PAYMENT_METHOD_FORM_SCHEMA,
+      onSubmit: ({ cardElement }) =>
+        createPaymentMethodMutation.mutateAsync({ stripeInstance, cardElement }),
+      onSubmitSuccess: ({ paymentMethod }) => onSubmit?.(paymentMethod.id),
     },
-  )
+  ) as unknown as ariaComponents.FormInstance<typeof ADD_PAYMENT_METHOD_FORM_SCHEMA>
+
+  const cardElement = ariaComponents.Form.useWatch({
+    control: formInstance.control,
+    name: 'cardElement',
+  })
 
   return (
-    <ariaComponents.Form
-      method="dialog"
-      form={formInstance}
-      onSubmit={() =>
-        createPaymentMethodMutation.mutateAsync().then(async ({ paymentMethod }) => {
-          cardElement?.clear()
-          await onSubmit?.(paymentMethod.id)
-        })
-      }
-    >
+    <ariaComponents.Form method="dialog" form={formInstance}>
       <ariaComponents.Form.Field name="card" fullWidth label={getText('bankCardLabel')}>
         <stripeReact.CardElement
           options={{
@@ -112,7 +93,8 @@ export function AddPaymentMethodForm<
           }}
           onEscape={() => dialogContext?.close()}
           onReady={(element) => {
-            setCardElement(element)
+            formInstance.setValue('cardElement', element)
+            formInstance.setValue('stripeInstance', stripeInstance)
           }}
           onChange={(event) => {
             if (event.error?.message != null) {
diff --git a/app/dashboard/src/modules/payments/components/PlanSelector/PlanSelector.tsx b/app/dashboard/src/modules/payments/components/PlanSelector/PlanSelector.tsx
index 621351490e77..4837df1151a4 100644
--- a/app/dashboard/src/modules/payments/components/PlanSelector/PlanSelector.tsx
+++ b/app/dashboard/src/modules/payments/components/PlanSelector/PlanSelector.tsx
@@ -7,6 +7,8 @@ import { useAuth } from '#/providers/AuthProvider'
 import { useRemoteBackendStrict } from '#/providers/BackendProvider'
 import { useText } from '#/providers/TextProvider'
 import { Plan, PLANS } from '#/services/Backend'
+import type { VariantProps } from '#/utilities/tailwindVariants'
+import { tv } from '#/utilities/tailwindVariants'
 import { Card } from './components'
 import { getComponentPerPlan } from './getComponentForPlan'
 
@@ -26,7 +28,7 @@ interface CreateCheckoutSessionMutation {
 /**
  * Props for {@link PlanSelector}
  */
-export interface PlanSelectorProps {
+export interface PlanSelectorProps extends VariantProps<typeof PLAN_SELECTOR_STYLES> {
   readonly showFreePlan?: boolean
   readonly hasTrial?: boolean
   readonly userPlan?: Plan | undefined
@@ -36,6 +38,26 @@ export interface PlanSelectorProps {
   readonly onSubscribeError?: (error: Error) => void
 }
 
+const PLAN_SELECTOR_STYLES = tv({
+  base: DIALOG_BACKGROUND({
+    className: 'w-full snap-x overflow-auto rounded-4xl scroll-hidden',
+  }),
+  variants: {
+    showFreePlan: {
+      true: {
+        grid: 'grid-cols-1fr md:grid-cols-2 xl:grid-cols-4',
+      },
+      false: {
+        grid: 'grid-cols-1fr md:grid-cols-3 justify-center',
+      },
+    },
+  },
+  slots: {
+    grid: 'inline-grid min-w-full gap-6 p-6',
+    card: 'min-w-64 snap-center',
+  },
+})
+
 /**
  * Plan selector component.
  * Shows the available plans and allows the user to subscribe to one.
@@ -49,6 +71,7 @@ export function PlanSelector(props: PlanSelectorProps) {
     showFreePlan = true,
     hasTrial = true,
     isOrganizationAdmin = false,
+    variants = PLAN_SELECTOR_STYLES,
   } = props
 
   const { getText } = useText()
@@ -77,13 +100,11 @@ export function PlanSelector(props: PlanSelectorProps) {
     onError: (error) => onSubscribeError?.(error),
   })
 
+  const classes = variants({ showFreePlan })
+
   return (
-    <div
-      className={DIALOG_BACKGROUND({
-        className: 'w-full snap-x overflow-auto rounded-4xl scroll-hidden',
-      })}
-    >
-      <div className="inline-flex min-w-full gap-6 p-6">
+    <div className={classes.base()}>
+      <div className={classes.grid()}>
         {PLANS.map((newPlan) => {
           const paywallLevel = getPaywallLevel(newPlan)
           const userPaywallLevel = getPaywallLevel(userPlan)
@@ -96,7 +117,7 @@ export function PlanSelector(props: PlanSelectorProps) {
             return (
               <Card
                 key={newPlan}
-                className="min-w-72 flex-1 snap-center"
+                className={classes.card()}
                 features={planProps.features}
                 subtitle={planProps.subtitle}
                 title={planProps.title}
@@ -112,6 +133,7 @@ export function PlanSelector(props: PlanSelectorProps) {
                       })
 
                       const startEpochMs = Number(new Date())
+
                       while (true) {
                         const { data: session } = await refetchSession()
                         if (session && 'user' in session && session.user.plan === newPlan) {
diff --git a/app/dashboard/src/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx b/app/dashboard/src/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
index 2aeeff7f819f..0663e5d186dc 100644
--- a/app/dashboard/src/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
+++ b/app/dashboard/src/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
@@ -27,7 +27,7 @@ import type { Plan } from '#/services/Backend'
 
 import { twMerge } from '#/utilities/tailwindMerge'
 
-import { createSubscriptionPriceQuery } from '../../../api'
+import { createSubscriptionPriceQuery, useCreatePaymentMethodMutation } from '../../../api'
 import {
   MAX_SEATS_BY_PLAN,
   PRICE_BY_PLAN,
@@ -77,6 +77,8 @@ export function PlanSelectorDialog(props: PlanSelectorDialogProps) {
   const price = PRICE_BY_PLAN[plan]
   const maxSeats = MAX_SEATS_BY_PLAN[plan]
 
+  const createPaymentMethodMutation = useCreatePaymentMethodMutation()
+
   const form = Form.useForm({
     schema: (z) =>
       ADD_PAYMENT_METHOD_FORM_SCHEMA.extend({
@@ -95,10 +97,18 @@ export function PlanSelectorDialog(props: PlanSelectorDialogProps) {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     defaultValues: { seats: 1, period: 12, agree: [] },
     mode: 'onChange',
+    onSubmit: async ({ cardElement, stripeInstance, seats, period }) => {
+      const res = await createPaymentMethodMutation.mutateAsync({
+        cardElement,
+        stripeInstance,
+      })
+
+      return onSubmit?.(res.paymentMethod.id, seats, period)
+    },
   })
 
-  const seats = form.watch('seats')
-  const period = form.watch('period')
+  const seats = Form.useWatch({ name: 'seats', control: form.control })
+  const period = Form.useWatch({ name: 'period', control: form.control })
 
   const formatter = React.useMemo(
     () => new Intl.NumberFormat(locale, { style: 'currency', currency: PRICE_CURRENCY }),
diff --git a/app/dashboard/src/modules/payments/components/PlanSelector/components/SubscribeButton.tsx b/app/dashboard/src/modules/payments/components/PlanSelector/components/SubscribeButton.tsx
index b850d532aa39..b6f609562571 100644
--- a/app/dashboard/src/modules/payments/components/PlanSelector/components/SubscribeButton.tsx
+++ b/app/dashboard/src/modules/payments/components/PlanSelector/components/SubscribeButton.tsx
@@ -69,12 +69,12 @@ export function SubscribeButton(props: SubscribeButtonProps) {
     if (isDowngrade) {
       // eslint-disable-next-line no-restricted-syntax
       return (
-        <>
-          {getText('downgradeInfo')}{' '}
+        <Text transform="none">
           <Button variant="link" href={getSalesEmail() + `?subject=Downgrade%20our%20plan`}>
             {getText('contactSales')}
-          </Button>
-        </>
+          </Button>{' '}
+          {getText('downgradeInfo')}
+        </Text>
       )
     }
 
@@ -99,30 +99,32 @@ export function SubscribeButton(props: SubscribeButtonProps) {
 
   return (
     <div className="w-full text-center">
-      <DialogTrigger
-        {...(disabled ? { defaultOpen: false }
-        : defaultOpen == null ? {}
-        : { defaultOpen })}
-      >
-        <Button fullWidth isDisabled={disabled} variant={variant} size="medium" rounded="full">
-          {buttonText}
-        </Button>
-
-        <PlanSelectorDialog
-          plan={plan}
-          planName={planName}
-          features={features}
-          onSubmit={onSubmit}
-          isTrialing={canTrial}
-          title={getText('upgradeTo', getText(plan))}
-        />
-      </DialogTrigger>
-
       {isDowngrade && (
-        <Text transform="capitalize" className="my-0.5">
+        <Text transform="normal" className="my-0.5">
           {description}
         </Text>
       )}
+
+      {!isDowngrade && (
+        <DialogTrigger
+          {...(disabled ? { defaultOpen: false }
+          : defaultOpen == null ? {}
+          : { defaultOpen })}
+        >
+          <Button fullWidth isDisabled={disabled} variant={variant} size="medium" rounded="full">
+            {buttonText}
+          </Button>
+
+          <PlanSelectorDialog
+            plan={plan}
+            planName={planName}
+            features={features}
+            onSubmit={onSubmit}
+            isTrialing={canTrial}
+            title={getText('upgradeTo', getText(plan))}
+          />
+        </DialogTrigger>
+      )}
     </div>
   )
 }
diff --git a/app/dashboard/src/pages/authentication/AuthenticationPage.tsx b/app/dashboard/src/pages/authentication/AuthenticationPage.tsx
index da254c48e7e0..23be2348e20e 100644
--- a/app/dashboard/src/pages/authentication/AuthenticationPage.tsx
+++ b/app/dashboard/src/pages/authentication/AuthenticationPage.tsx
@@ -36,8 +36,8 @@ export default function AuthenticationPage<Schema extends TSchema>(
   props: AuthenticationPageProps<Schema>,
 ) {
   const { title, children, footer, supportsOffline = false, ...formProps } = props
-  const { form, schema, onSubmit } = formProps
-  const isForm = onSubmit != null && (form != null || schema != null)
+  const { form, schema } = formProps
+  const isForm = schema != null || form != null
 
   const { getText } = useText()
   const { isOffline } = useOffline()
@@ -88,7 +88,7 @@ export default function AuthenticationPage<Schema extends TSchema>(
             : <Form
                 // This is SAFE, as the props type of this type extends `FormProps`.
                 // eslint-disable-next-line no-restricted-syntax
-                {...(formProps as FormProps<Schema>)}
+                {...(form ? { form } : (formProps as FormProps<Schema>))}
                 className={containerClasses}
               >
                 {(innerProps) => (
diff --git a/app/dashboard/src/pages/authentication/Login.tsx b/app/dashboard/src/pages/authentication/Login.tsx
index adb3e505e4cb..bc6b589d1159 100644
--- a/app/dashboard/src/pages/authentication/Login.tsx
+++ b/app/dashboard/src/pages/authentication/Login.tsx
@@ -3,15 +3,17 @@ import * as router from 'react-router-dom'
 
 import { CLOUD_DASHBOARD_DOMAIN } from 'enso-common'
 
-import { FORGOT_PASSWORD_PATH, REGISTRATION_PATH } from '#/appUtils'
+import { DASHBOARD_PATH, FORGOT_PASSWORD_PATH, REGISTRATION_PATH } from '#/appUtils'
 import ArrowRightIcon from '#/assets/arrow_right.svg'
 import AtIcon from '#/assets/at.svg'
 import CreateAccountIcon from '#/assets/create_account.svg'
 import GithubIcon from '#/assets/github_color.svg'
 import GoogleIcon from '#/assets/google_color.svg'
 import LockIcon from '#/assets/lock.svg'
-import { Button, Form, Input, Password } from '#/components/AriaComponents'
+import type { CognitoUser } from '#/authentication/cognito'
+import { Button, Form, Input, OTPInput, Password, Text } from '#/components/AriaComponents'
 import Link from '#/components/Link'
+import { Stepper } from '#/components/Stepper'
 import AuthenticationPage from '#/pages/authentication/AuthenticationPage'
 import { passwordSchema } from '#/pages/authentication/schemas'
 import { useAuth } from '#/providers/AuthProvider'
@@ -26,14 +28,52 @@ import { useState } from 'react'
 /** A form for users to log in. */
 export default function Login() {
   const location = router.useLocation()
-  const { signInWithGoogle, signInWithGitHub, signInWithPassword } = useAuth()
+  const navigate = router.useNavigate()
+  const { signInWithGoogle, signInWithGitHub, signInWithPassword, cognito } = useAuth()
   const { getText } = useText()
+
   const query = new URLSearchParams(location.search)
   const initialEmail = query.get('email') ?? ''
+
+  const form = Form.useForm({
+    schema: (z) =>
+      z.object({
+        email: z
+          .string()
+          .min(1, getText('arbitraryFieldRequired'))
+          .email(getText('invalidEmailValidationError')),
+        password: passwordSchema(getText),
+      }),
+    defaultValues: { email: initialEmail },
+    onSubmit: async ({ email, password }) => {
+      const res = await signInWithPassword(email, password)
+
+      switch (res.challenge) {
+        case 'NO_CHALLENGE':
+          navigate(DASHBOARD_PATH)
+          break
+        case 'SMS_MFA':
+        case 'SOFTWARE_TOKEN_MFA':
+          setUser(res.user)
+          nextStep()
+          break
+        default:
+          throw new Error('Unsupported challenge')
+      }
+    },
+  })
+
   const [emailInput, setEmailInput] = useState(initialEmail)
+
+  const [user, setUser] = useState<CognitoUser | null>(null)
   const localBackend = useLocalBackend()
   const supportsOffline = localBackend != null
 
+  const { nextStep, stepperState, previousStep } = Stepper.useStepperState({
+    steps: 2,
+    defaultStep: 0,
+  })
+
   return (
     <AuthenticationPage
       title={getText('loginToYourAccount')}
@@ -52,85 +92,126 @@ export default function Login() {
         />
       }
     >
-      <div className="flex flex-col gap-auth">
-        <Button
-          size="large"
-          variant="outline"
-          icon={<img src={GoogleIcon} />}
-          onPress={async () => {
-            await signInWithGoogle()
-          }}
-        >
-          {getText('signUpOrLoginWithGoogle')}
-        </Button>
-        <Button
-          size="large"
-          variant="outline"
-          icon={<img src={GithubIcon} />}
-          onPress={async () => {
-            await signInWithGitHub()
-          }}
-        >
-          {getText('signUpOrLoginWithGitHub')}
-        </Button>
-      </div>
-
-      <Form
-        schema={(z) =>
-          z.object({
-            email: z
-              .string()
-              .min(1, getText('arbitraryFieldRequired'))
-              .email(getText('invalidEmailValidationError')),
-            password: passwordSchema(getText),
-          })
-        }
-        gap="medium"
-        defaultValues={{ email: initialEmail }}
-        onSubmit={({ email, password }) => signInWithPassword(email, password)}
-      >
-        <Input
-          autoFocus
-          required
-          data-testid="email-input"
-          name="email"
-          label={getText('email')}
-          type="email"
-          autoComplete="email"
-          icon={AtIcon}
-          placeholder={getText('emailPlaceholder')}
-          onChange={(event) => {
-            setEmailInput(event.currentTarget.value)
-          }}
-        />
+      <Stepper state={stepperState} renderStep={() => null}>
+        <Stepper.StepContent index={0}>
+          {() => (
+            <div className="flex flex-col gap-auth">
+              <Button
+                size="large"
+                variant="outline"
+                icon={GoogleIcon}
+                onPress={async () => {
+                  await signInWithGoogle()
+                }}
+              >
+                {getText('signUpOrLoginWithGoogle')}
+              </Button>
+              <Button
+                size="large"
+                variant="outline"
+                icon={GithubIcon}
+                onPress={async () => {
+                  await signInWithGitHub()
+                }}
+              >
+                {getText('signUpOrLoginWithGitHub')}
+              </Button>
+
+              <Form form={form} gap="medium">
+                <Input
+                  autoFocus
+                  required
+                  data-testid="email-input"
+                  name="email"
+                  label={getText('email')}
+                  type="email"
+                  autoComplete="email"
+                  icon={AtIcon}
+                  placeholder={getText('emailPlaceholder')}
+                  onChange={(event) => {
+                    setEmailInput(event.currentTarget.value)
+                  }}
+                />
+
+                <div className="flex w-full flex-col">
+                  <Password
+                    required
+                    data-testid="password-input"
+                    name="password"
+                    label={getText('password')}
+                    autoComplete="current-password"
+                    icon={LockIcon}
+                    placeholder={getText('passwordPlaceholder')}
+                  />
+
+                  <Button
+                    variant="link"
+                    href={`${FORGOT_PASSWORD_PATH}?${new URLSearchParams({ email: emailInput }).toString()}`}
+                    size="small"
+                    className="self-end"
+                  >
+                    {getText('forgotYourPassword')}
+                  </Button>
+                </div>
+
+                <Form.Submit size="large" icon={ArrowRightIcon} iconPosition="end" fullWidth>
+                  {getText('login')}
+                </Form.Submit>
+
+                <Form.FormError />
+              </Form>
+            </div>
+          )}
+        </Stepper.StepContent>
+
+        <Stepper.StepContent index={1}>
+          {() => (
+            <Form
+              /* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
+              schema={(z) => z.object({ otp: z.string().min(6).max(6) })}
+              onSubmit={async ({ otp }, formInstance) => {
+                if (user) {
+                  const res = await cognito.confirmSignIn(user, otp, 'SOFTWARE_TOKEN_MFA')
+
+                  if (res.ok) {
+                    navigate(DASHBOARD_PATH)
+                  } else {
+                    switch (res.val.code) {
+                      case 'NotAuthorizedException':
+                        previousStep()
+                        form.setFormError(res.val.message)
+                        setUser(null)
+                        break
+                      case 'CodeMismatchException':
+                        formInstance.setError('otp', { message: res.val.message })
+                        break
+                      default:
+                        throw res.val
+                    }
+                  }
+                }
+              }}
+            >
+              <Text>{getText('enterTotp')}</Text>
+
+              <OTPInput
+                autoFocus
+                required
+                testId="otp-input"
+                name="otp"
+                label={getText('totp')}
+                maxLength={6}
+              />
+
+              <Form.Submit size="large" icon={ArrowRightIcon} iconPosition="end" fullWidth>
+                {getText('login')}
+              </Form.Submit>
 
-        <div className="flex w-full flex-col">
-          <Password
-            required
-            data-testid="password-input"
-            name="password"
-            label={getText('password')}
-            autoComplete="current-password"
-            icon={LockIcon}
-            placeholder={getText('passwordPlaceholder')}
-          />
-
-          <Button
-            variant="link"
-            href={`${FORGOT_PASSWORD_PATH}?${new URLSearchParams({ email: emailInput }).toString()}`}
-            size="small"
-            className="self-end"
-          >
-            {getText('forgotYourPassword')}
-          </Button>
-        </div>
-
-        <Form.Submit size="large" icon={ArrowRightIcon} iconPosition="end" fullWidth>
-          {getText('login')}
-        </Form.Submit>
-
-        <Form.FormError />
-      </Form>
+              <Form.FormError />
+            </Form>
+          )}
+        </Stepper.StepContent>
+      </Stepper>
     </AuthenticationPage>
   )
 }
diff --git a/app/dashboard/src/pages/authentication/Registration.tsx b/app/dashboard/src/pages/authentication/Registration.tsx
index b614c9d813a1..118275d4ef25 100644
--- a/app/dashboard/src/pages/authentication/Registration.tsx
+++ b/app/dashboard/src/pages/authentication/Registration.tsx
@@ -89,6 +89,14 @@ export default function Registration() {
             })
           }
         }),
+    onSubmit: async ({ email, password }) => {
+      localStorage.set('termsOfService', { versionHash: tosHash })
+      localStorage.set('privacyPolicy', { versionHash: privacyPolicyHash })
+
+      await signUp(email, password, organizationId)
+
+      stepperState.nextStep()
+    },
   })
 
   const { stepperState } = useStepperState({ steps: 2, defaultStep: 0 })
@@ -161,24 +169,14 @@ export default function Registration() {
               {getText('createANewAccount')}
             </Text.Heading>
 
-            <Form
-              form={signupForm}
-              onSubmit={async ({ email, password }) => {
-                localStorage.set('termsOfService', { versionHash: tosHash })
-                localStorage.set('privacyPolicy', { versionHash: privacyPolicyHash })
-
-                await signUp(email, password, organizationId)
-
-                stepperState.nextStep()
-              }}
-            >
+            <Form form={signupForm}>
               {({ form }) => (
                 <>
                   <Input
                     form={form}
                     autoFocus
                     required
-                    data-testid="email-input"
+                    testId="email-input"
                     name="email"
                     label={getText('emailLabel')}
                     type="email"
@@ -193,7 +191,7 @@ export default function Registration() {
                   <Password
                     form={form}
                     required
-                    data-testid="password-input"
+                    testId="password-input"
                     name="password"
                     label={getText('passwordLabel')}
                     autoComplete="new-password"
@@ -205,7 +203,7 @@ export default function Registration() {
                   <Password
                     form={form}
                     required
-                    data-testid="confirm-password-input"
+                    testId="confirm-password-input"
                     name="confirmPassword"
                     label={getText('confirmPasswordLabel')}
                     autoComplete="new-password"
diff --git a/app/dashboard/src/pages/authentication/Setup/Setup.tsx b/app/dashboard/src/pages/authentication/Setup/Setup.tsx
index fb914d74c22c..875097012dd8 100644
--- a/app/dashboard/src/pages/authentication/Setup/Setup.tsx
+++ b/app/dashboard/src/pages/authentication/Setup/Setup.tsx
@@ -68,6 +68,7 @@ const BASE_STEPS: Step[] = [
       const userSession = useUserSession()
       const { getText } = textProvider.useText()
 
+      const isUserCreated = userSession?.type === UserSessionType.full
       const defaultName =
         session && 'user' in session ? session.user.name : userSession?.email ?? ''
 
@@ -85,7 +86,8 @@ const BASE_STEPS: Step[] = [
           }
           defaultValues={{ username: defaultName }}
           onSubmit={({ username }) => {
-            if (username === defaultName) {
+            // If user is already created we shouldn't call `setUsername` if value wasn't changed
+            if (username === defaultName && isUserCreated) {
               goToNextStep()
               return
             } else {
@@ -352,7 +354,11 @@ const BASE_STEPS: Step[] = [
             iconPosition="end"
             onPress={() =>
               queryClient.invalidateQueries().then(() => {
-                navigate(DASHBOARD_PATH)
+                navigate(
+                  DASHBOARD_PATH +
+                    '?' +
+                    new URLSearchParams({ startModalDefaultOpen: 'true' }).toString(),
+                )
               })
             }
           >
diff --git a/app/dashboard/src/pages/dashboard/Dashboard.tsx b/app/dashboard/src/pages/dashboard/Dashboard.tsx
index b04e0a46fe7c..880d90d7f622 100644
--- a/app/dashboard/src/pages/dashboard/Dashboard.tsx
+++ b/app/dashboard/src/pages/dashboard/Dashboard.tsx
@@ -99,6 +99,27 @@ export default function Dashboard(props: DashboardProps) {
   )
 }
 
+/**
+ * Extract proper path from `file://` URL.
+ */
+function fileURLToPath(url: string): string | null {
+  if (URL.canParse(url)) {
+    const parsed = new URL(url)
+    if (parsed.protocol === 'file:') {
+      return decodeURIComponent(
+        detect.platform() === detect.Platform.windows ?
+          // On Windows, we must remove leading `/` from URL.
+          parsed.pathname.slice(1)
+        : parsed.pathname,
+      )
+    } else {
+      return null
+    }
+  } else {
+    return null
+  }
+}
+
 /** The component that contains the entire UI. */
 function DashboardInner(props: DashboardProps) {
   const { appRunner, initialProjectName: initialProjectNameRaw, ydocUrl } = props
@@ -116,9 +137,7 @@ function DashboardInner(props: DashboardProps) {
   const assetManagementApiRef = React.useRef<assetTable.AssetManagementApi | null>(null)
 
   const initialLocalProjectPath =
-    initialProjectNameRaw != null && initialProjectNameRaw.startsWith('file://') ?
-      projectManager.Path(decodeURI(new URL(initialProjectNameRaw).pathname))
-    : null
+    initialProjectNameRaw != null ? fileURLToPath(initialProjectNameRaw) : null
   const initialProjectName = initialLocalProjectPath != null ? null : initialProjectNameRaw
 
   const [category, setCategory] = searchParamsState.useSearchParamsState<categoryModule.Category>(
diff --git a/app/dashboard/src/providers/AuthProvider.tsx b/app/dashboard/src/providers/AuthProvider.tsx
index fcbed685e998..51f693e47097 100644
--- a/app/dashboard/src/providers/AuthProvider.tsx
+++ b/app/dashboard/src/providers/AuthProvider.tsx
@@ -92,7 +92,13 @@ interface AuthContextType {
   readonly setUsername: (username: string) => Promise<boolean>
   readonly signInWithGoogle: () => Promise<boolean>
   readonly signInWithGitHub: () => Promise<boolean>
-  readonly signInWithPassword: (email: string, password: string) => Promise<void>
+  readonly signInWithPassword: (
+    email: string,
+    password: string,
+  ) => Promise<{
+    readonly challenge: cognitoModule.UserSessionChallenge
+    readonly user: cognitoModule.CognitoUser
+  }>
   readonly forgotPassword: (email: string) => Promise<void>
   readonly changePassword: (oldPassword: string, newPassword: string) => Promise<boolean>
   readonly resetPassword: (email: string, code: string, password: string) => Promise<void>
@@ -116,6 +122,7 @@ interface AuthContextType {
   readonly isUserDeleted: () => boolean
   /** Return `true` if the user is soft deleted. */
   readonly isUserSoftDeleted: () => boolean
+  readonly cognito: cognitoModule.Cognito
 }
 
 const AuthContext = React.createContext<AuthContextType | null>(null)
@@ -163,7 +170,7 @@ function createUsersMeQuery(
 /** Props for an {@link AuthProvider}. */
 export interface AuthProviderProps {
   readonly shouldStartInOfflineMode: boolean
-  readonly authService: authServiceModule.AuthService | null
+  readonly authService: authServiceModule.AuthService
   /** Callback to execute once the user has authenticated successfully. */
   readonly onAuthenticated: (accessToken: string | null) => void
   readonly children: React.ReactNode
@@ -174,7 +181,7 @@ export default function AuthProvider(props: AuthProviderProps) {
   const { authService, onAuthenticated } = props
   const { children } = props
   const remoteBackend = backendProvider.useRemoteBackendStrict()
-  const { cognito } = authService ?? {}
+  const { cognito } = authService
   const { session, sessionQueryKey } = sessionProvider.useSession()
   const { localStorage } = localStorageProvider.useLocalStorage()
   const { getText } = textProvider.useText()
@@ -194,23 +201,19 @@ export default function AuthProvider(props: AuthProviderProps) {
   }, [])
 
   const performLogout = async () => {
-    if (cognito != null) {
-      await cognito.signOut()
+    await cognito.signOut()
 
-      const parentDomain = location.hostname.replace(/^[^.]*\./, '')
-      document.cookie = `logged_in=no;max-age=0;domain=${parentDomain}`
-      gtagEvent('cloud_sign_out')
-      cognito.saveAccessToken(null)
-      localStorage.clearUserSpecificEntries()
-      sentry.setUser(null)
+    const parentDomain = location.hostname.replace(/^[^.]*\./, '')
+    document.cookie = `logged_in=no;max-age=0;domain=${parentDomain}`
+    gtagEvent('cloud_sign_out')
+    cognito.saveAccessToken(null)
+    localStorage.clearUserSpecificEntries()
+    sentry.setUser(null)
 
-      await queryClient.invalidateQueries({ queryKey: sessionQueryKey })
-      await queryClient.clearWithPersister()
+    await queryClient.invalidateQueries({ queryKey: sessionQueryKey })
+    await queryClient.clearWithPersister()
 
-      return Promise.resolve()
-    } else {
-      return Promise.reject()
-    }
+    return Promise.resolve()
   }
 
   const logoutMutation = reactQuery.useMutation({
@@ -289,100 +292,91 @@ export default function AuthProvider(props: AuthProviderProps) {
 
   const signUp = useEventCallback(
     async (username: string, password: string, organizationId: string | null) => {
-      if (cognito != null) {
-        gtagEvent('cloud_sign_up')
-        const result = await cognito.signUp(username, password, organizationId)
+      gtagEvent('cloud_sign_up')
+      const result = await cognito.signUp(username, password, organizationId)
 
-        if (result.err) {
-          throw new Error(result.val.message)
-        } else {
-          return
-        }
+      if (result.err) {
+        throw new Error(result.val.message)
+      } else {
+        return
       }
     },
   )
 
   const confirmSignUp = useEventCallback(async (email: string, code: string) => {
-    if (cognito == null) {
-      throw new Error(getText('confirmSignUpError'))
-    } else {
-      gtagEvent('cloud_confirm_sign_up')
-      const result = await cognito.confirmSignUp(email, code)
+    gtagEvent('cloud_confirm_sign_up')
+    const result = await cognito.confirmSignUp(email, code)
 
-      if (result.err) {
-        switch (result.val.type) {
-          case cognitoModule.CognitoErrorType.userAlreadyConfirmed:
-          case cognitoModule.CognitoErrorType.userNotFound: {
-            return
-          }
-          default: {
-            throw new errorModule.UnreachableCaseError(result.val.type)
-          }
+    if (result.err) {
+      switch (result.val.type) {
+        case cognitoModule.CognitoErrorType.userAlreadyConfirmed:
+        case cognitoModule.CognitoErrorType.userNotFound: {
+          return
+        }
+        default: {
+          throw new errorModule.UnreachableCaseError(result.val.type)
         }
       }
     }
   })
 
   const signInWithPassword = useEventCallback(async (email: string, password: string) => {
-    if (cognito != null) {
-      gtagEvent('cloud_sign_in', { provider: 'Email' })
-      const result = await cognito.signInWithPassword(email, password)
-      if (result.ok) {
-        void queryClient.invalidateQueries({ queryKey: sessionQueryKey })
-        navigate(appUtils.DASHBOARD_PATH)
-        return
-      } else {
-        throw new Error(result.val.message)
+    gtagEvent('cloud_sign_in', { provider: 'Email' })
+
+    const result = await cognito.signInWithPassword(email, password)
+
+    if (result.ok) {
+      const user = result.unwrap()
+
+      const challenge = user.challengeName ?? 'NO_CHALLENGE'
+
+      if (['SMS_MFA', 'SOFTWARE_TOKEN_MFA'].includes(challenge)) {
+        // eslint-disable-next-line no-restricted-syntax
+        return { challenge, user } as const
       }
+
+      return queryClient
+        .invalidateQueries({ queryKey: sessionQueryKey })
+        .then(() => ({ challenge, user }) as const)
+    } else {
+      throw new Error(result.val.message)
     }
   })
 
   const setUsername = useEventCallback(async (username: string) => {
-    if (cognito == null) {
-      return false
-    } else {
-      gtagEvent('cloud_user_created')
+    gtagEvent('cloud_user_created')
 
-      if (userData?.type === UserSessionType.full) {
-        await updateUserMutation.mutateAsync({ username: username })
-      } else {
-        const organizationId = await cognito.organizationId()
-        const email = session?.email ?? ''
-
-        await createUserMutation.mutateAsync({
-          userName: username,
-          userEmail: backendModule.EmailAddress(email),
-          organizationId:
-            organizationId != null ? backendModule.OrganizationId(organizationId) : null,
-        })
-      }
-
-      return true
+    if (userData?.type === UserSessionType.full) {
+      await updateUserMutation.mutateAsync({ username: username })
+    } else {
+      const organizationId = await cognito.organizationId()
+      const email = session?.email ?? ''
+
+      await createUserMutation.mutateAsync({
+        userName: username,
+        userEmail: backendModule.EmailAddress(email),
+        organizationId:
+          organizationId != null ? backendModule.OrganizationId(organizationId) : null,
+      })
     }
+
+    return true
   })
 
   const deleteUser = useEventCallback(async () => {
-    if (cognito == null) {
-      return false
-    } else {
-      await deleteUserMutation.mutateAsync()
+    await deleteUserMutation.mutateAsync()
 
-      toastSuccess(getText('deleteUserSuccess'))
+    toastSuccess(getText('deleteUserSuccess'))
 
-      return true
-    }
+    return true
   })
 
   const restoreUser = useEventCallback(async () => {
-    if (cognito == null) {
-      return false
-    } else {
-      await restoreUserMutation.mutateAsync()
+    await restoreUserMutation.mutateAsync()
 
-      toastSuccess(getText('restoreUserSuccess'))
+    toastSuccess(getText('restoreUserSuccess'))
 
-      return true
-    }
+    return true
   })
 
   /**
@@ -402,41 +396,36 @@ export default function AuthProvider(props: AuthProviderProps) {
   })
 
   const forgotPassword = useEventCallback(async (email: string) => {
-    if (cognito != null) {
-      const result = await cognito.forgotPassword(email)
-      if (result.ok) {
-        navigate(appUtils.LOGIN_PATH)
-        return
-      } else {
-        throw new Error(result.val.message)
-      }
+    const result = await cognito.forgotPassword(email)
+    if (result.ok) {
+      navigate(appUtils.LOGIN_PATH)
+      return
+    } else {
+      throw new Error(result.val.message)
     }
   })
 
   const resetPassword = useEventCallback(async (email: string, code: string, password: string) => {
-    if (cognito != null) {
-      const result = await cognito.forgotPasswordSubmit(email, code, password)
-      if (result.ok) {
-        navigate(appUtils.LOGIN_PATH)
-        return
-      } else {
-        throw new Error(result.val.message)
-      }
+    const result = await cognito.forgotPasswordSubmit(email, code, password)
+
+    if (result.ok) {
+      navigate(appUtils.LOGIN_PATH)
+      return
+    } else {
+      throw new Error(result.val.message)
     }
   })
 
   const changePassword = useEventCallback(async (oldPassword: string, newPassword: string) => {
-    if (cognito == null) {
-      return false
+    const result = await cognito.changePassword(oldPassword, newPassword)
+
+    if (result.ok) {
+      toastSuccess(getText('changePasswordSuccess'))
     } else {
-      const result = await cognito.changePassword(oldPassword, newPassword)
-      if (result.ok) {
-        toastSuccess(getText('changePasswordSuccess'))
-      } else {
-        toastError(result.val.message)
-      }
-      return result.ok
+      toastError(result.val.message)
     }
+
+    return result.ok
   })
 
   const isUserMarkedForDeletion = useEventCallback(
@@ -503,33 +492,28 @@ export default function AuthProvider(props: AuthProviderProps) {
     isUserSoftDeleted,
     restoreUser,
     deleteUser,
+    cognito,
     signInWithGoogle: useEventCallback(() => {
-      if (cognito == null) {
-        return Promise.resolve(false)
-      } else {
-        gtagEvent('cloud_sign_in', { provider: 'Google' })
-        return cognito
-          .signInWithGoogle()
-          .then(() => queryClient.invalidateQueries({ queryKey: sessionQueryKey }))
-          .then(
-            () => true,
-            () => false,
-          )
-      }
+      gtagEvent('cloud_sign_in', { provider: 'Google' })
+
+      return cognito
+        .signInWithGoogle()
+        .then(() => queryClient.invalidateQueries({ queryKey: sessionQueryKey }))
+        .then(
+          () => true,
+          () => false,
+        )
     }),
     signInWithGitHub: useEventCallback(() => {
-      if (cognito == null) {
-        return Promise.resolve(false)
-      } else {
-        gtagEvent('cloud_sign_in', { provider: 'GitHub' })
-        return cognito
-          .signInWithGitHub()
-          .then(() => queryClient.invalidateQueries({ queryKey: sessionQueryKey }))
-          .then(
-            () => true,
-            () => false,
-          )
-      }
+      gtagEvent('cloud_sign_in', { provider: 'GitHub' })
+
+      return cognito
+        .signInWithGitHub()
+        .then(() => queryClient.invalidateQueries({ queryKey: sessionQueryKey }))
+        .then(
+          () => true,
+          () => false,
+        )
     }),
     signInWithPassword,
     forgotPassword,
diff --git a/app/dashboard/src/providers/DriveProvider.tsx b/app/dashboard/src/providers/DriveProvider.tsx
index 5e5c8bf4ad26..f4b2bafa9cdf 100644
--- a/app/dashboard/src/providers/DriveProvider.tsx
+++ b/app/dashboard/src/providers/DriveProvider.tsx
@@ -7,7 +7,9 @@ import * as zustand from 'zustand'
 import type { AssetPanelContextProps } from '#/layouts/AssetPanel'
 import type { Suggestion } from '#/layouts/AssetSearchBar'
 import { useLocalStorage } from '#/providers/LocalStorageProvider'
-import type { AssetId } from 'enso-common/src/services/Backend'
+import type AssetTreeNode from '#/utilities/AssetTreeNode'
+import { EMPTY_SET } from '#/utilities/set'
+import type { AssetId, DirectoryAsset, DirectoryId } from 'enso-common/src/services/Backend'
 import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
 
 // ==================
@@ -16,6 +18,10 @@ import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
 
 /** The state of this zustand store. */
 interface DriveStore {
+  readonly targetDirectory: AssetTreeNode<DirectoryAsset> | null
+  readonly setTargetDirectory: (targetDirectory: AssetTreeNode<DirectoryAsset> | null) => void
+  readonly newestFolderId: DirectoryId | null
+  readonly setNewestFolderId: (newestFolderId: DirectoryId | null) => void
   readonly canCreateAssets: boolean
   readonly setCanCreateAssets: (canCreateAssets: boolean) => void
   readonly canDownload: boolean
@@ -57,6 +63,14 @@ export default function DriveProvider(props: ProjectsProviderProps) {
   const { localStorage } = useLocalStorage()
   const [store] = React.useState(() =>
     zustand.createStore<DriveStore>((set, get) => ({
+      targetDirectory: null,
+      setTargetDirectory: (targetDirectory) => {
+        set({ targetDirectory })
+      },
+      newestFolderId: null,
+      setNewestFolderId: (newestFolderId) => {
+        set({ newestFolderId })
+      },
       canCreateAssets: true,
       setCanCreateAssets: (canCreateAssets) => {
         if (get().canCreateAssets !== canCreateAssets) {
@@ -69,7 +83,7 @@ export default function DriveProvider(props: ProjectsProviderProps) {
           set({ canDownload })
         }
       },
-      selectedKeys: new Set(),
+      selectedKeys: EMPTY_SET,
       setSelectedKeys: (selectedKeys) => {
         if (
           get().selectedKeys !== selectedKeys &&
@@ -130,6 +144,30 @@ export function useDriveStore() {
   return store
 }
 
+/** Get the target directory of the Asset Table selection. */
+export function useTargetDirectory() {
+  const store = useDriveStore()
+  return zustand.useStore(store, (state) => state.targetDirectory)
+}
+
+/** A function to set the target directory of the Asset Table selection. */
+export function useSetTargetDirectory() {
+  const store = useDriveStore()
+  return zustand.useStore(store, (state) => state.setTargetDirectory)
+}
+
+/** Get the ID of the most newly created folder. */
+export function useNewestFolderId() {
+  const store = useDriveStore()
+  return zustand.useStore(store, (state) => state.newestFolderId)
+}
+
+/** A function to set the ID of the most newly created folder. */
+export function useSetNewestFolderId() {
+  const store = useDriveStore()
+  return zustand.useStore(store, (state) => state.setNewestFolderId)
+}
+
 /** Whether assets can be created in the current directory. */
 export function useCanCreateAssets() {
   const store = useDriveStore()
diff --git a/app/dashboard/src/providers/ModalProvider.tsx b/app/dashboard/src/providers/ModalProvider.tsx
index f0ac80a11960..f32e268b173f 100644
--- a/app/dashboard/src/providers/ModalProvider.tsx
+++ b/app/dashboard/src/providers/ModalProvider.tsx
@@ -1,5 +1,7 @@
 /** @file The React provider for modals, along with hooks to use the provider via
  * the shared React context. */
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useSyncRef } from '#/hooks/syncRefHooks'
 import * as React from 'react'
 
 // =====================
@@ -17,10 +19,11 @@ interface ModalStaticContextType {
 
 /** State contained in a `ModalContext`. */
 interface ModalContextType {
+  readonly key: number
   readonly modal: Modal | null
 }
 
-const ModalContext = React.createContext<ModalContextType>({ modal: null })
+const ModalContext = React.createContext<ModalContextType>({ modal: null, key: 0 })
 
 const ModalStaticContext = React.createContext<ModalStaticContextType>({
   setModal: () => {
@@ -37,23 +40,30 @@ export interface ModalProviderProps extends Readonly<React.PropsWithChildren> {}
 export default function ModalProvider(props: ModalProviderProps) {
   const { children } = props
   const [modal, setModal] = React.useState<Modal | null>(null)
-  const modalRef = React.useRef(modal)
-
-  React.useEffect(() => {
-    modalRef.current = modal
-  }, [modal])
+  // We use keys to tell react to invalidate the DialogTrigger when we change the modal.
+  const [key, setKey] = React.useState(0)
+  const modalRef = useSyncRef(modal)
+
+  const setModalStableCallback = useEventCallback(
+    (nextModal: React.SetStateAction<React.JSX.Element | null>) => {
+      React.startTransition(() => {
+        setModal(nextModal)
+        setKey((currentKey) => currentKey + 1)
+      })
+    },
+  )
 
   // This is NOT for optimization purposes - this is for debugging purposes,
   // so that a change of `modal` does not trigger VDOM changes everywhere in the page.
   const setModalProvider = React.useMemo(
     () => (
-      <ModalStaticProvider setModal={setModal} modalRef={modalRef}>
+      <ModalStaticProvider setModal={setModalStableCallback} modalRef={modalRef}>
         {children}
       </ModalStaticProvider>
     ),
-    [children],
+    [children, modalRef, setModalStableCallback],
   )
-  return <ModalContext.Provider value={{ modal }}>{setModalProvider}</ModalContext.Provider>
+  return <ModalContext.Provider value={{ modal, key }}>{setModalProvider}</ModalContext.Provider>
 }
 
 /** Props for a {@link ModalStaticProvider}. */
@@ -79,8 +89,8 @@ function ModalStaticProvider(props: InternalModalStaticProviderProps) {
 
 /** A React context hook exposing the currently active modal, if one is currently visible. */
 export function useModal() {
-  const { modal } = React.useContext(ModalContext)
-  return { modal } as const
+  const { modal, key } = React.useContext(ModalContext)
+  return { modal, key } as const
 }
 
 // ===================
diff --git a/app/dashboard/src/services/LocalBackend.ts b/app/dashboard/src/services/LocalBackend.ts
index c6dbac229ebe..94e53843ad94 100644
--- a/app/dashboard/src/services/LocalBackend.ts
+++ b/app/dashboard/src/services/LocalBackend.ts
@@ -139,16 +139,12 @@ export default class LocalBackend extends Backend {
   ): Promise<readonly backend.AnyAsset[]> {
     const parentIdRaw = query.parentId == null ? null : extractTypeAndId(query.parentId).id
     const parentId = query.parentId ?? newDirectoryId(this.projectManager.rootDirectory)
-    // Check if Root Directory Exists
-    if (
-      parentIdRaw == null &&
-      !(await this.projectManager.exists(this.projectManager.rootDirectory))
-    ) {
-      await this.projectManager.createDirectory(this.projectManager.rootDirectory)
-      return []
-    } else {
+
+    // Catch the case where the directory does not exist.
+    let result: backend.AnyAsset[] = []
+    try {
       const entries = await this.projectManager.listDirectory(parentIdRaw)
-      return entries
+      result = entries
         .map((entry) => {
           switch (entry.type) {
             case projectManager.FileSystemEntryType.DirectoryEntry: {
@@ -198,7 +194,21 @@ export default class LocalBackend extends Backend {
           }
         })
         .sort(backend.compareAssets)
+    } catch (error) {
+      // Failed so check if exists
+      if (!(await this.projectManager.exists(parentIdRaw))) {
+        if (parentIdRaw === this.projectManager.rootDirectory) {
+          // Auto create the root directory
+          await this.projectManager.createDirectory(this.projectManager.rootDirectory)
+          result = []
+        } else {
+          // eslint-disable-next-line no-restricted-syntax
+          throw new Error('Directory does not exist.')
+        }
+      }
     }
+
+    return result
   }
 
   /** Return a list of projects belonging to the current user.
diff --git a/app/dashboard/src/services/RemoteBackend.ts b/app/dashboard/src/services/RemoteBackend.ts
index d33b9e1ce38f..05ae4a3b05b3 100644
--- a/app/dashboard/src/services/RemoteBackend.ts
+++ b/app/dashboard/src/services/RemoteBackend.ts
@@ -30,6 +30,8 @@ const STATUS_NOT_FOUND = 404
 const STATUS_SERVER_ERROR = 500
 /** HTTP status indicating that the request was successful, but the user is not authorized to access. */
 const STATUS_NOT_AUTHORIZED = 401
+/** HTTP status indicating that authorized user doesn't have access to the given resource */
+const STATUS_NOT_ALLOWED = 403
 
 /** The number of milliseconds in one day. */
 const ONE_DAY_MS = 86_400_000
@@ -62,7 +64,7 @@ function responseIsSuccessful(response: Response) {
 /** Whether the given directory is a special directory that cannot be written to. */
 export function isSpecialReadonlyDirectoryId(id: backend.AssetId) {
   return (
-    id !== remoteBackendPaths.USERS_DIRECTORY_ID && id !== remoteBackendPaths.TEAMS_DIRECTORY_ID
+    id === remoteBackendPaths.USERS_DIRECTORY_ID || id === remoteBackendPaths.TEAMS_DIRECTORY_ID
   )
 }
 
@@ -212,7 +214,9 @@ export default class RemoteBackend extends Backend {
   override async listUsers(): Promise<readonly backend.User[]> {
     const path = remoteBackendPaths.LIST_USERS_PATH
     const response = await this.get<ListUsersResponseBody>(path)
-    if (!responseIsSuccessful(response)) {
+    if (response.status === STATUS_NOT_ALLOWED) {
+      return []
+    } else if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'listUsersBackendError')
     } else {
       return (await response.json()).users
@@ -367,8 +371,9 @@ export default class RemoteBackend extends Backend {
   override async getOrganization(): Promise<backend.OrganizationInfo | null> {
     const path = remoteBackendPaths.GET_ORGANIZATION_PATH
     const response = await this.get<backend.OrganizationInfo>(path)
-    if (response.status === STATUS_NOT_FOUND) {
+    if ([STATUS_NOT_ALLOWED, STATUS_NOT_FOUND].includes(response.status)) {
       // Organization info has not yet been created.
+      // or the user is not eligible to create an organization.
       return null
     } else if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'getOrganizationBackendError')
@@ -1047,7 +1052,9 @@ export default class RemoteBackend extends Backend {
   override async listUserGroups(): Promise<backend.UserGroupInfo[]> {
     const path = remoteBackendPaths.LIST_USER_GROUPS_PATH
     const response = await this.get<backend.UserGroupInfo[]>(path)
-    if (!responseIsSuccessful(response)) {
+    if (response.status === STATUS_NOT_ALLOWED) {
+      return [] as const
+    } else if (!responseIsSuccessful(response)) {
       return this.throw(response, 'listUserGroupsBackendError')
     } else {
       return await response.json()
diff --git a/app/dashboard/src/tailwind.css b/app/dashboard/src/tailwind.css
index 59e2e98d942b..49aef979fa79 100644
--- a/app/dashboard/src/tailwind.css
+++ b/app/dashboard/src/tailwind.css
@@ -511,30 +511,26 @@
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 0H5V2.5C5 3.88071 3.88071 5 2.5 5V5C1.11929 5 0 3.88071 0 2.5V0Z" /></svg>'),
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 2.5C0 1.11929 1.11929 0 2.5 0V0C3.88071 0 5 1.11929 5 2.5V5H0V2.5Z"/></svg>'),
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15)" fill="currentColor" viewBox="0 0 10 100" preserveAspectRatio="none"><rect x="0" y="0" width="10" height="100" /></svg>');
+  border-top-width: var(--scrollbar-offset-edge, 0);
+  border-bottom-width: var(--scrollbar-offset-edge, 0);
+  border-right-width: 4px;
+  border-left-width: 0;
 
   /* Custom scrollbar for rounded corners */
   :where(:is([class*='rounded-xl']))& {
-    border-width: 8px;
-    border-right-width: 4px;
-    border-left-width: 0;
+    --scrollbar-offset-edge: 8px;
   }
 
   :where(:is([class*='rounded-2xl']))& {
-    border-width: 16px;
-    border-right-width: 4px;
-    border-left-width: 0;
+    --scrollbar-offset-edge: 16px;
   }
 
   :where(:is([class*='rounded-3xl']))& {
-    border-width: 24px;
-    border-right-width: 4px;
-    border-left-width: 0;
+    --scrollbar-offset-edge: 24px;
   }
 
   :where(:is([class*='rounded-4xl']))& {
-    border-width: 28px;
-    border-right-width: 4px;
-    border-left-width: 0;
+    --scrollbar-offset-edge: 28px;
   }
 
   &:hover {
@@ -558,30 +554,26 @@
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15); transform: rotate(90deg)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 0H5V2.5C5 3.88071 3.88071 5 2.5 5V5C1.11929 5 0 3.88071 0 2.5V0Z" /></svg>'),
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15); transform: rotate(90deg)" fill="currentColor" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet"><path d="M0 2.5C0 1.11929 1.11929 0 2.5 0V0C3.88071 0 5 1.11929 5 2.5V5H0V2.5Z"/></svg>'),
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="color:rgb(0 0 0 / 0.15)" fill="currentColor" viewBox="0 0 100 10" preserveAspectRatio="none"><rect x="0" y="0" width="100" height="10" /></svg>');
+  border-left-width: var(--scrollbar-offset-edge, 0);
+  border-right-width: var(--scrollbar-offset-edge, 0);
+  border-top-width: 0;
+  border-bottom-width: 4px;
 
   /* Custom scrollbar for rounded corners */
   :where(:is([class*='rounded-xl']))& {
-    border-width: 8px;
-    border-bottom-width: 4px;
-    border-top-width: 0;
+    --scrollbar-offset-edge: 8px;
   }
 
   :where(:is([class*='rounded-2xl']))& {
-    border-width: 16px;
-    border-bottom-width: 4px;
-    border-top-width: 0;
+    --scrollbar-offset-edge: 16px;
   }
 
   :where(:is([class*='rounded-3xl']))& {
-    border-width: 24px;
-    border-bottom-width: 4px;
-    border-top-width: 0;
+    --scrollbar-offset-edge: 24px;
   }
 
   :where(:is([class*='rounded-4xl']))& {
-    border-width: 28px;
-    border-bottom-width: 4px;
-    border-top-width: 0;
+    --scrollbar-offset-edge: 28px;
   }
 
   &:hover {
diff --git a/app/dashboard/src/utilities/permissions.ts b/app/dashboard/src/utilities/permissions.ts
index 67397edf8408..5bd49fa65c2f 100644
--- a/app/dashboard/src/utilities/permissions.ts
+++ b/app/dashboard/src/utilities/permissions.ts
@@ -63,7 +63,7 @@ export function tryCreateOwnerPermission(
 /** Try to find a permission belonging to the user. */
 export function tryFindSelfPermission(
   self: User,
-  otherPermissions: readonly AssetPermission[] | null,
+  otherPermissions: readonly AssetPermission[] | null | undefined,
 ) {
   let selfPermission: AssetPermission | null = null
   for (const permission of otherPermissions ?? []) {
diff --git a/app/dashboard/src/utilities/tailwindVariants.ts b/app/dashboard/src/utilities/tailwindVariants.ts
index 6f5df7cee42b..aaec9a397b9b 100644
--- a/app/dashboard/src/utilities/tailwindVariants.ts
+++ b/app/dashboard/src/utilities/tailwindVariants.ts
@@ -25,6 +25,9 @@ export type TVWithoutExtends<T> = ExtractFunction<T> & Omit<T, 'extend'>
  * Props for a component that uses `tailwind-variants`.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type VariantProps<T extends (...args: any) => any> = TvVariantProps<T> & {
+export type VariantProps<T extends (...args: any) => any> = Omit<
+  TvVariantProps<T>,
+  'class' | 'className'
+> & {
   variants?: ExtractFunction<T> | undefined
 }
diff --git a/app/dashboard/tailwind.config.js b/app/dashboard/tailwind.config.js
index ec079f31a249..abfb20f988b4 100644
--- a/app/dashboard/tailwind.config.js
+++ b/app/dashboard/tailwind.config.js
@@ -379,6 +379,7 @@ inset 0 -8px 11.4px -11.4px #00000005, inset 0 -15px 21.3px -21.3px #00000006, \
 inset 0 -36px 51px -51px #00000014`,
       },
       animation: {
+        'caret-blink': 'caret-blink 1.5s ease-out infinite',
         'spin-ease': 'spin cubic-bezier(0.67, 0.33, 0.33, 0.67) 1.5s infinite',
         'appear-delayed': 'appear-delayed 0.5s ease-in-out',
       },
@@ -420,6 +421,10 @@ inset 0 -36px 51px -51px #00000014`,
           '99%': { opacity: '0' },
           '100%': { opacity: '1' },
         },
+        'caret-blink': {
+          '0%,70%,100%': { opacity: '1' },
+          '20%,50%': { opacity: '0' },
+        },
       },
     },
   },
@@ -429,6 +434,12 @@ inset 0 -36px 51px -51px #00000014`,
     plugin(({ addVariant, addUtilities, matchUtilities, addComponents, theme }) => {
       addVariant('group-hover-2', ['.group:where([data-hovered]) &', '.group:where(:hover) &'])
 
+      addUtilities({
+        '.scrollbar-gutter-stable': {
+          scrollbarGutter: 'stable',
+        },
+      })
+
       addUtilities(
         {
           '.container-size': {
@@ -491,6 +502,46 @@ inset 0 -36px 51px -51px #00000014`,
             '@apply opacity-75 cursor-not-allowed': '',
           },
 
+          '.scroll-offset-edge-s': {
+            '--scrollbar-offset-edge': '2px',
+          },
+          '.scroll-offset-edge-m': {
+            '--scrollbar-offset-edge': '4px',
+          },
+          '.scroll-offset-edge-l': {
+            '--scrollbar-offset-edge': '6px',
+          },
+          '.scroll-offset-edge-xl': {
+            '--scrollbar-offset-edge': '8px',
+          },
+          '.scroll-offset-edge-2xl': {
+            '--scrollbar-offset-edge': '16px',
+          },
+          '.scroll-offset-edge-3xl': {
+            '--scrollbar-offset-edge': '24px',
+          },
+          '.scroll-offset-edge-4xl': {
+            '--scrollbar-offset-edge': '28px',
+          },
+          '.scroll-offset-edge-5xl': {
+            '--scrollbar-offset-edge': '32px',
+          },
+          '.scroll-offset-edge-6xl': {
+            '--scrollbar-offset-edge': '36px',
+          },
+          '.scroll-offset-edge-7xl': {
+            '--scrollbar-offset-edge': '40px',
+          },
+          '.scroll-offset-edge-8xl': {
+            '--scrollbar-offset-edge': '44px',
+          },
+          '.scroll-offset-edge-9xl': {
+            '--scrollbar-offset-edge': '48px',
+          },
+          '.scroll-offset-edge-10xl': {
+            '--scrollbar-offset-edge': '52px',
+          },
+
           // === Visbility classes ===
 
           '.visibility-visible': {},
diff --git a/app/eslint.config.mjs b/app/eslint.config.mjs
index 791c4deace84..9b77d674d081 100644
--- a/app/eslint.config.mjs
+++ b/app/eslint.config.mjs
@@ -94,11 +94,6 @@ const RESTRICTED_SYNTAXES = [
     selector: 'TSTypeAliasDeclaration > :matches(TSLiteralType)',
     message: 'No aliases to literal types',
   },
-  {
-    selector:
-      ':not(:matches(FunctionDeclaration, FunctionExpression, ArrowFunctionExpression, SwitchStatement, SwitchCase, IfStatement:has(.consequent > :matches(ReturnStatement, ThrowStatement)):has(.alternate :matches(ReturnStatement, ThrowStatement)), Program > TryStatement, Program > TryStatement > .handler, TryStatement:has(.block > :matches(ReturnStatement, ThrowStatement)):has(:matches([handler=null], .handler :matches(ReturnStatement, ThrowStatement))), TryStatement:has(.block > :matches(ReturnStatement, ThrowStatement)):has(:matches([handler=null], .handler :matches(ReturnStatement, ThrowStatement))) > .handler)) > * > :matches(ReturnStatement, ThrowStatement)',
-    message: 'No early returns',
-  },
   {
     selector:
       'TSTypeAliasDeclaration > :matches(TSBooleanKeyword, TSBigintKeyword, TSNullKeyword, TSNumberKeyword, TSObjectKeyword, TSStringKeyword, TSSymbolKeyword, TSUndefinedKeyword, TSUnknownKeyword, TSVoidKeyword)',
diff --git a/app/gui2/e2e/locate.ts b/app/gui2/e2e/locate.ts
index 505b7ca0ab99..d41174d88ce7 100644
--- a/app/gui2/e2e/locate.ts
+++ b/app/gui2/e2e/locate.ts
@@ -95,7 +95,7 @@ function componentLocator(locatorStr: string) {
 
 export const graphEditor = componentLocator('.GraphEditor')
 export const codeEditor = componentLocator('.CodeEditor')
-export const anyVisualization = componentLocator('.GraphVisualization > *')
+export const anyVisualization = componentLocator('.GraphVisualization')
 export const loadingVisualization = componentLocator('.LoadingVisualization')
 export const circularMenu = componentLocator('.CircularMenu')
 export const addNewNodeButton = componentLocator('.PlusButton')
@@ -141,15 +141,26 @@ export function bottomDock(page: Page) {
 
 export const navBreadcrumb = componentLocator('.NavBreadcrumb')
 export const componentBrowserInput = componentLocator('.ComponentEditor')
-export const jsonVisualization = componentLocator('.JSONVisualization')
-export const tableVisualization = componentLocator('.TableVisualization')
-export const scatterplotVisualization = componentLocator('.ScatterplotVisualization')
-export const histogramVisualization = componentLocator('.HistogramVisualization')
-export const heatmapVisualization = componentLocator('.HeatmapVisualization')
-export const sqlVisualization = componentLocator('.SqlVisualization')
-export const geoMapVisualization = componentLocator('.GeoMapVisualization')
-export const imageBase64Visualization = componentLocator('.ImageBase64Visualization')
-export const warningsVisualization = componentLocator('.WarningsVisualization')
+
+function visualizationLocator(visSelector: string) {
+  // Playwright pierces shadow roots, but not within a single XPath.
+  // Locate the visualization content, then locate the descendant.
+  const visLocator = componentLocator(visSelector)
+  return (page: Locator | Page, filter?: (f: Filter) => { selector: string }) => {
+    const hostLocator = page.locator('.VisualizationHostContainer')
+    return visLocator(hostLocator, filter)
+  }
+}
+
+export const jsonVisualization = visualizationLocator('.JSONVisualization')
+export const tableVisualization = visualizationLocator('.TableVisualization')
+export const scatterplotVisualization = visualizationLocator('.ScatterplotVisualization')
+export const histogramVisualization = visualizationLocator('.HistogramVisualization')
+export const heatmapVisualization = visualizationLocator('.HeatmapVisualization')
+export const sqlVisualization = visualizationLocator('.SqlVisualization')
+export const geoMapVisualization = visualizationLocator('.GeoMapVisualization')
+export const imageBase64Visualization = visualizationLocator('.ImageBase64Visualization')
+export const warningsVisualization = visualizationLocator('.WarningsVisualization')
 
 // === Edge locators ===
 
diff --git a/app/gui2/e2e/removingNodes.spec.ts b/app/gui2/e2e/removingNodes.spec.ts
new file mode 100644
index 000000000000..7ba843d70772
--- /dev/null
+++ b/app/gui2/e2e/removingNodes.spec.ts
@@ -0,0 +1,54 @@
+import { test } from '@playwright/test'
+import * as actions from './actions'
+import { expect } from './customExpect'
+import { CONTROL_KEY, DELETE_KEY } from './keyboard'
+import * as locate from './locate'
+
+test('Deleting selected node with backspace key', async ({ page }) => {
+  await actions.goToGraph(page)
+
+  const nodesCount = await locate.graphNode(page).count()
+  const deletedNode = locate.graphNodeByBinding(page, 'final')
+  await deletedNode.click()
+  await page.keyboard.press('Backspace')
+  await expect(locate.graphNode(page)).toHaveCount(nodesCount - 1)
+})
+
+test('Deleting selected node with delete key', async ({ page }) => {
+  await actions.goToGraph(page)
+
+  const nodesCount = await locate.graphNode(page).count()
+  const deletedNode = locate.graphNodeByBinding(page, 'final')
+  await deletedNode.click()
+  await page.keyboard.press('Delete')
+  await expect(locate.graphNode(page)).toHaveCount(nodesCount - 1)
+})
+
+test('Graph can be empty', async ({ page }) => {
+  await actions.goToGraph(page)
+
+  await locate.graphEditor(page).press(`${CONTROL_KEY}+A`)
+  await locate.graphEditor(page).press(`${DELETE_KEY}`)
+
+  await expect(locate.graphNode(page)).toHaveCount(0)
+
+  await locate.addNewNodeButton(page).click()
+  await expect(locate.componentBrowserInput(page)).toBeVisible()
+  await page.keyboard.insertText('foo')
+  await page.keyboard.press(`${CONTROL_KEY}+Enter`)
+  await expect(locate.graphNode(page)).toHaveCount(1)
+  await expect(locate.graphNode(page).locator('.WidgetToken')).toHaveText(['foo'])
+})
+
+test('Removing connected nodes', async ({ page }) => {
+  await actions.goToGraph(page)
+  const nodesCount = await locate.graphNode(page).count()
+  await page.keyboard.down('Shift')
+  await locate.graphNodeByBinding(page, 'five').click()
+  await expect(locate.selectedNodes(page)).toHaveCount(1)
+  await locate.graphNodeByBinding(page, 'sum').click()
+  await expect(locate.selectedNodes(page)).toHaveCount(2)
+  await page.keyboard.up('Shift')
+  await page.keyboard.press('Delete')
+  await expect(locate.graphNode(page)).toHaveCount(nodesCount - 2)
+})
diff --git a/app/gui2/e2e/selectingNodes.spec.ts b/app/gui2/e2e/selectingNodes.spec.ts
index 2bb8569db6e7..e4833bdc8693 100644
--- a/app/gui2/e2e/selectingNodes.spec.ts
+++ b/app/gui2/e2e/selectingNodes.spec.ts
@@ -68,26 +68,6 @@ test('Selecting nodes by area drag', async ({ page }) => {
   await expect(node2).toBeSelected()
 })
 
-test('Deleting selected node with backspace key', async ({ page }) => {
-  await actions.goToGraph(page)
-
-  const nodesCount = await locate.graphNode(page).count()
-  const deletedNode = locate.graphNodeByBinding(page, 'final')
-  await deletedNode.click()
-  await page.keyboard.press('Backspace')
-  await expect(locate.graphNode(page)).toHaveCount(nodesCount - 1)
-})
-
-test('Deleting selected node with delete key', async ({ page }) => {
-  await actions.goToGraph(page)
-
-  const nodesCount = await locate.graphNode(page).count()
-  const deletedNode = locate.graphNodeByBinding(page, 'final')
-  await deletedNode.click()
-  await page.keyboard.press('Delete')
-  await expect(locate.graphNode(page)).toHaveCount(nodesCount - 1)
-})
-
 test('Moving selected nodes', async ({ page }) => {
   await actions.goToGraph(page)
   const movedNode = locate.graphNodeByBinding(page, 'final')
diff --git a/app/gui2/e2e/widgets.spec.ts b/app/gui2/e2e/widgets.spec.ts
index b42381857fdf..89dc12466ea9 100644
--- a/app/gui2/e2e/widgets.spec.ts
+++ b/app/gui2/e2e/widgets.spec.ts
@@ -562,36 +562,39 @@ test('Table widget', async ({ page }) => {
   )
   const widget = node.locator('.WidgetTableEditor')
   await expect(widget).toBeVisible()
-  await expect(widget.locator('.ag-header-cell-text')).toHaveText('New Column')
-  await expect(widget.locator('.ag-header-cell-text')).toHaveClass(/(?<=^| )virtualColumn(?=$| )/)
-  // There's one empty cell, allowing creating first row and column
-  await expect(widget.locator('.ag-cell')).toHaveCount(1)
+  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'New Column'])
+  await expect(widget.locator('.ag-header-cell-text', { hasText: 'New Column' })).toHaveClass(
+    /(?<=^| )virtualColumn(?=$| )/,
+  )
+  // There are two cells, one with row number, second allowing creating first row and column
+  await expect(widget.locator('.ag-cell')).toHaveCount(2)
 
   // Putting first value
-  await widget.locator('.ag-cell').dblclick()
+  await widget.locator('.ag-cell', { hasNotText: '0' }).click()
   await page.keyboard.type('Value')
   await page.keyboard.press('Enter')
   // There will be new blank column and new blank row allowing adding new columns and rows
   // (so 4 cells in total)
-  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['New Column', 'New Column'])
-  await expect(widget.locator('.ag-cell')).toHaveText(['Value', '', '', ''])
+  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'New Column', 'New Column'])
+  await expect(widget.locator('.ag-cell')).toHaveText(['0', 'Value', '', '1', '', ''])
 
   // Renaming column
-  await widget.locator('.ag-header-cell-text').first().dblclick()
+  await widget.locator('.ag-header-cell-text', { hasText: 'New Column' }).first().click()
   await page.keyboard.type('Header')
   await page.keyboard.press('Enter')
-  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['Header', 'New Column'])
+  await expect(widget.locator('.ag-header-cell-text')).toHaveText(['#', 'Header', 'New Column'])
 
   // Switching edit between cells and headers - check we will never edit two things at once.
   await expect(widget.locator('.ag-text-field-input')).toHaveCount(0)
-  await widget.locator('.ag-header-cell-text').first().dblclick()
-  await expect(widget.locator('.ag-text-field-input')).toHaveCount(1)
-  await widget.locator('.ag-cell').first().dblclick()
+  await widget.locator('.ag-header-cell-text', { hasNotText: '#' }).first().click()
   await expect(widget.locator('.ag-text-field-input')).toHaveCount(1)
-  await widget.locator('.ag-header-cell-text').first().dblclick()
+  await widget.locator('.ag-cell', { hasNotText: /0|1/ }).first().click()
   await expect(widget.locator('.ag-text-field-input')).toHaveCount(1)
-  await widget.locator('.ag-header-cell-text').last().dblclick()
+  await widget.locator('.ag-header-cell-text', { hasNotText: '#' }).first().click()
   await expect(widget.locator('.ag-text-field-input')).toHaveCount(1)
+  // The header after click stops editing immediately. Tracked by #11150
+  // await widget.locator('.ag-header-cell-text', { hasNotText: '#' }).last().click()
+  // await expect(widget.locator('.ag-text-field-input')).toHaveCount(1)
   await page.keyboard.press('Escape')
   await expect(widget.locator('.ag-text-field-input')).toHaveCount(0)
 })
diff --git a/app/gui2/env.d.ts b/app/gui2/env.d.ts
index 321e2e395a7f..4d1947609974 100644
--- a/app/gui2/env.d.ts
+++ b/app/gui2/env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
-declare const PROJECT_MANAGER_URL: string
-declare const YDOC_SERVER_URL: string
+declare const PROJECT_MANAGER_URL: string | undefined
+declare const YDOC_SERVER_URL: string | undefined
 declare const IS_CLOUD_BUILD: boolean
 
 interface Document {
diff --git a/app/gui2/package.json b/app/gui2/package.json
index f2fc9cbff963..fc91dea69dbd 100644
--- a/app/gui2/package.json
+++ b/app/gui2/package.json
@@ -35,11 +35,11 @@
     "'ag-grid-community' is required as a peer dependency of 'ag-grid-enterprise'."
   ],
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "^30.2.0",
-    "@ag-grid-community/core": "^30.2.0",
-    "@ag-grid-community/styles": "^30.2.0",
-    "@ag-grid-enterprise/core": "^30.2.0",
-    "@ag-grid-enterprise/range-selection": "^30.2.1",
+    "@ag-grid-community/client-side-row-model": "^31.1.1",
+    "@ag-grid-community/core": "^31.1.1",
+    "@ag-grid-community/styles": "^31.1.1",
+    "@ag-grid-enterprise/core": "^31.1.1",
+    "@ag-grid-enterprise/range-selection": "^31.1.1",
     "@babel/parser": "^7.24.7",
     "@codemirror/commands": "^6.6.0",
     "@codemirror/language": "^6.10.2",
@@ -63,9 +63,10 @@
     "@noble/hashes": "^1.4.0",
     "@tanstack/vue-query": ">= 5.54.0 < 5.56.0",
     "@vueuse/core": "^10.4.1",
-    "ag-grid-community": "^30.2.1",
-    "ag-grid-enterprise": "^30.2.1",
-    "ag-grid-vue3": "^30.2.1",
+    "@vueuse/gesture": "^2.0.0",
+    "ag-grid-community": "^31.1.1",
+    "ag-grid-enterprise": "^31.1.1",
+    "ag-grid-vue3": "^31.1.1",
     "codemirror": "^6.0.1",
     "culori": "^3.2.0",
     "enso-dashboard": "workspace:*",
@@ -82,7 +83,7 @@
     "react-toastify": "^9.1.3",
     "sucrase": "^3.34.0",
     "veaury": "^2.3.18",
-    "vue": "^3.4.19",
+    "vue": "^3.5.2",
     "vue-component-type-helpers": "^2.0.29",
     "y-codemirror.next": "^0.3.2",
     "y-protocols": "^1.0.5",
diff --git a/app/gui2/playwright.config.ts b/app/gui2/playwright.config.ts
index ba778fe6eff0..31dd4fb931da 100644
--- a/app/gui2/playwright.config.ts
+++ b/app/gui2/playwright.config.ts
@@ -29,6 +29,7 @@ function checkAvailablePort(port: number) {
 
 const portFromEnv = parseInt(process.env.PLAYWRIGHT_PORT ?? '', 10)
 const PORT = Number.isFinite(portFromEnv) ? portFromEnv : await findFreePortInRange(4300, 4999)
+console.log(`Selected playwright server port: ${PORT}`)
 // Make sure to set the env to actual port that is being used. This is necessary for workers to
 // pick up the same configuration.
 process.env.PLAYWRIGHT_PORT = `${PORT}`
@@ -117,7 +118,7 @@ export default defineConfig({
         `corepack pnpm build && corepack pnpm exec vite preview --port ${PORT} --strictPort`
       : `corepack pnpm exec vite dev --port ${PORT}`,
     // Build from scratch apparently can take a while on CI machines.
-    timeout: 120 * 1000,
+    timeout: 240 * 1000,
     port: PORT,
     // We use our special, mocked version of server, thus do not want to re-use user's one.
     reuseExistingServer: false,
diff --git a/app/gui2/src/App.vue b/app/gui2/src/App.vue
index 1d3f5736059d..f590ef32e022 100644
--- a/app/gui2/src/App.vue
+++ b/app/gui2/src/App.vue
@@ -130,37 +130,30 @@ registerAutoBlurHandler()
 
 :deep(.scrollable) {
   scrollbar-color: rgba(190 190 190 / 50%) transparent;
-}
-
-:deep(.scrollable)::-webkit-scrollbar {
-  -webkit-appearance: none;
-}
-
-:deep(.scrollable)::-webkit-scrollbar-track {
-  -webkit-box-shadow: none;
-}
-
-:deep(.scrollable)::-webkit-scrollbar:vertical {
-  width: 11px;
-}
-
-:deep(.scrollable)::-webkit-scrollbar:horizontal {
-  height: 11px;
-}
-
-:deep(.scrollable)::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  border: 1px solid rgba(220, 220, 220, 0.5);
-  background-color: rgba(190, 190, 190, 0.5);
-}
-
-:deep(.scrollable)::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0);
-}
-
-:deep(.scrollable)::-webkit-scrollbar-button {
-  height: 8px;
-  width: 8px;
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: none;
+  }
+  &::-webkit-scrollbar:vertical {
+    width: 11px;
+  }
+  &::-webkit-scrollbar:horizontal {
+    height: 11px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 1px solid rgba(220, 220, 220, 0.5);
+    background-color: rgba(190, 190, 190, 0.5);
+  }
+  &::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0);
+  }
+  &::-webkit-scrollbar-button {
+    height: 8px;
+    width: 8px;
+  }
 }
 
 :deep(.draggable) {
diff --git a/app/gui2/src/components/ComponentBrowser.vue b/app/gui2/src/components/ComponentBrowser.vue
index 570107680797..1166acc486a2 100644
--- a/app/gui2/src/components/ComponentBrowser.vue
+++ b/app/gui2/src/components/ComponentBrowser.vue
@@ -277,6 +277,8 @@ const visualizationSelection = ref<Opt<VisualizationIdentifier>>(
   : undefined,
 )
 
+const isVisualizationVisible = ref(true)
+
 // === Documentation Panel ===
 
 watch(selectedSuggestionId, (id) => emit('selectedSuggestionId', id ?? null))
@@ -362,13 +364,15 @@ const handler = componentBrowserBindings.handler({
     @keydown.arrow-right.stop
   >
     <GraphVisualization
-      v-if="input.mode.mode === 'codeEditing'"
+      v-if="input.mode.mode === 'codeEditing' && isVisualizationVisible"
       class="visualization-preview"
       :nodeSize="inputSize"
       :nodePosition="nodePosition"
       :scale="1"
       :isCircularMenuVisible="false"
       :isFullscreen="false"
+      :isFullscreenAllowed="false"
+      :isResizable="false"
       :isFocused="true"
       :width="null"
       :height="null"
@@ -376,6 +380,7 @@ const handler = componentBrowserBindings.handler({
       :typename="previewedSuggestionReturnType"
       :currentType="visualizationSelection"
       @update:id="visualizationSelection = $event"
+      @update:enabled="isVisualizationVisible = $event"
     />
     <ComponentEditor
       ref="inputElement"
@@ -403,6 +408,16 @@ const handler = componentBrowserBindings.handler({
         @click.stop="applySuggestion()"
       />
     </ComponentEditor>
+    <div
+      v-if="input.mode.mode === 'codeEditing' && !isVisualizationVisible"
+      class="show-visualization"
+    >
+      <SvgButton
+        name="eye"
+        title="Show visualization"
+        @click.stop="isVisualizationVisible = true"
+      />
+    </div>
     <ComponentList
       v-if="input.mode.mode === 'componentBrowsing' && currentFiltering"
       ref="componentList"
@@ -427,6 +442,13 @@ const handler = componentBrowserBindings.handler({
   gap: 4px;
 }
 
+.show-visualization {
+  position: relative;
+  display: flex;
+  padding: 8px;
+  opacity: 30%;
+}
+
 .component-editor {
   position: relative;
 }
diff --git a/app/gui2/src/components/DropdownMenu.vue b/app/gui2/src/components/DropdownMenu.vue
index e0b07e0fa715..5d91d4a4a310 100644
--- a/app/gui2/src/components/DropdownMenu.vue
+++ b/app/gui2/src/components/DropdownMenu.vue
@@ -11,6 +11,7 @@ const open = defineModel<boolean>('open', { default: false })
 const props = defineProps<{
   title?: string | undefined
   placement?: Placement
+  alwaysShowArrow?: boolean | undefined
 }>()
 
 const rootElement = shallowRef<HTMLElement>()
@@ -42,7 +43,11 @@ const { floatingStyles } = useFloating(rootElement, floatElement, {
     >
       <slot name="button" />
     </MenuButton>
-    <SvgIcon v-if="hovered && !open" name="arrow_right_head_only" class="arrow" />
+    <SvgIcon
+      v-if="alwaysShowArrow || (hovered && !open)"
+      name="arrow_right_head_only"
+      class="arrow"
+    />
     <SizeTransition height :duration="100">
       <div v-if="open" ref="floatElement" class="DropdownMenuContent" :style="floatingStyles">
         <slot name="entries" />
diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index d82888ff5428..6c9487bc0ce5 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -279,23 +279,13 @@ useEvent(window, 'keydown', (event) => {
     (!keyboardBusy() && graphNavigator.keyboardEvents.keydown(event))
 })
 
-useEvent(
-  window,
-  'pointerdown',
-  (e) => interaction.handlePointerEvent(e, 'pointerdown', graphNavigator),
-  {
-    capture: true,
-  },
-)
+useEvent(window, 'pointerdown', (e) => interaction.handlePointerEvent(e, 'pointerdown'), {
+  capture: true,
+})
 
-useEvent(
-  window,
-  'pointerup',
-  (e) => interaction.handlePointerEvent(e, 'pointerup', graphNavigator),
-  {
-    capture: true,
-  },
-)
+useEvent(window, 'pointerup', (e) => interaction.handlePointerEvent(e, 'pointerup'), {
+  capture: true,
+})
 
 // === Keyboard/Mouse bindings ===
 
@@ -724,15 +714,7 @@ const documentationEditorFullscreen = ref(false)
     @drop.prevent="handleFileDrop($event)"
   >
     <div class="vertical">
-      <div
-        ref="viewportNode"
-        class="viewport"
-        v-on.="graphNavigator.pointerEvents"
-        v-on..="nodeSelection.events"
-        @click="handleClick"
-        @pointermove.capture="graphNavigator.pointerEventsCapture.pointermove"
-        @wheel.capture="graphNavigator.pointerEventsCapture.wheel"
-      >
+      <div ref="viewportNode" class="viewport" @click="handleClick">
         <GraphNodes
           @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
           @nodeDoubleClick="(id) => stackNavigator.enterNode(id)"
@@ -840,8 +822,10 @@ const documentationEditorFullscreen = ref(false)
 }
 
 .viewport {
+  position: relative; /* Needed for safari when using contain: layout */
   contain: layout;
   overflow: clip;
+  touch-action: none;
   --group-color-fallback: #006b8a;
   --node-color-no-type: #596b81;
   --output-node-color: #006b8a;
diff --git a/app/gui2/src/components/GraphEditor/GraphEdges.vue b/app/gui2/src/components/GraphEditor/GraphEdges.vue
index c6a813363b73..c25c7b4d8141 100644
--- a/app/gui2/src/components/GraphEditor/GraphEdges.vue
+++ b/app/gui2/src/components/GraphEditor/GraphEdges.vue
@@ -27,21 +27,20 @@ const MIN_DRAG_MOVE = 10
 const editingEdge: Interaction = {
   cancel: () => (graph.mouseEditedEdge = undefined),
   end: () => (graph.mouseEditedEdge = undefined),
-  pointerdown: (_e: PointerEvent, graphNavigator: GraphNavigator) =>
-    edgeInteractionClick(graphNavigator),
-  pointerup: (e: PointerEvent, graphNavigator: GraphNavigator) => {
+  pointerdown: edgeInteractionClick,
+  pointerup: (e: PointerEvent) => {
     const originEvent = graph.mouseEditedEdge?.event
     if (originEvent?.type === 'pointerdown') {
       const delta = new Vec2(e.screenX, e.screenY).sub(
         new Vec2(originEvent.screenX, originEvent.screenY),
       )
-      if (delta.lengthSquared() >= MIN_DRAG_MOVE ** 2) return edgeInteractionClick(graphNavigator)
+      if (delta.lengthSquared() >= MIN_DRAG_MOVE ** 2) return edgeInteractionClick()
     }
     return false
   },
 }
 
-function edgeInteractionClick(graphNavigator: GraphNavigator) {
+function edgeInteractionClick() {
   if (graph.mouseEditedEdge == null) return false
   let source: AstId | undefined
   let sourceNode: NodeId | undefined
@@ -59,7 +58,7 @@ function edgeInteractionClick(graphNavigator: GraphNavigator) {
       if (target == null) {
         if (graph.mouseEditedEdge?.disconnectedEdgeTarget != null)
           disconnectEdge(graph.mouseEditedEdge.disconnectedEdgeTarget)
-        emits('createNodeFromEdge', source, graphNavigator.sceneMousePos ?? Vec2.Zero)
+        emits('createNodeFromEdge', source, props.navigator.sceneMousePos ?? Vec2.Zero)
       } else {
         createEdge(source, target)
       }
diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index 5502a71b36ee..eab1b87efd74 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -56,6 +56,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   dragging: [offset: Vec2]
   draggingCommited: []
+  draggingCancelled: []
   delete: []
   replaceSelection: []
   outputPortClick: [event: PointerEvent, portId: AstId]
@@ -262,10 +263,14 @@ const dragPointer = usePointer(
         startEpochMs.value = Number(new Date())
         significantMove.value = false
         break
-      case 'stop': {
+      case 'stop':
         startEpochMs.value = 0
         emit('draggingCommited')
-      }
+        break
+      case 'cancel':
+        startEpochMs.value = 0
+        emit('draggingCancelled')
+        break
     }
   },
   // Pointer is captured by `target`, to make it receive the `up` and `click` event in case this
@@ -476,6 +481,8 @@ watchEffect(() => {
       :height="visualizationHeight"
       :isFocused="isOnlyOneSelected"
       :isPreview="isVisualizationPreviewed"
+      :isFullscreenAllowed="true"
+      :isResizable="true"
       @update:rect="updateVisualizationRect"
       @update:id="emit('update:visualizationId', $event)"
       @update:enabled="emit('update:visualizationEnabled', $event)"
@@ -632,8 +639,10 @@ watchEffect(() => {
   position: absolute;
   bottom: 100%;
   width: calc(max(100%, 800px));
+  max-width: max-content;
   margin-bottom: var(--node-vertical-gap);
-  left: 0;
+  /* Allow space for the input arrow. */
+  left: 24px;
   transition: left 0.1s ease-out;
 }
 .menuFull .beforeNode {
diff --git a/app/gui2/src/components/GraphEditor/GraphNodes.vue b/app/gui2/src/components/GraphEditor/GraphNodes.vue
index f4791dfd448b..9575dce1aa86 100644
--- a/app/gui2/src/components/GraphEditor/GraphNodes.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNodes.vue
@@ -38,6 +38,7 @@ const displacingWithArrows = useArrows(
     if (!oneOfMoved) return false
     dragging.startOrUpdate(oneOfMoved, pos.relative)
     if (type === 'stop') dragging.finishDrag()
+    else if (type === 'cancel') dragging.cancelDrag()
   },
   { predicate: (_) => selection.selected.size > 0 },
 )
@@ -70,6 +71,7 @@ const graphNodeSelections = shallowRef<HTMLElement>()
       @delete="graphStore.deleteNodes([id])"
       @dragging="nodeIsDragged(id, $event)"
       @draggingCommited="dragging.finishDrag()"
+      @draggingCancelled="dragging.cancelDrag()"
       @outputPortClick="(event, port) => graphStore.createEdgeFromOutput(port, event)"
       @outputPortDoubleClick="(_event, port) => emit('nodeOutputPortDoubleClick', port)"
       @doubleClick="emit('nodeDoubleClick', id)"
diff --git a/app/gui2/src/components/GraphEditor/GraphVisualization.vue b/app/gui2/src/components/GraphEditor/GraphVisualization.vue
index 38c9f82e0797..ea5416c5c5f9 100644
--- a/app/gui2/src/components/GraphEditor/GraphVisualization.vue
+++ b/app/gui2/src/components/GraphEditor/GraphVisualization.vue
@@ -1,41 +1,19 @@
 <script setup lang="ts">
 import { visualizationBindings } from '@/bindings'
-import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
-import LoadingErrorVisualization from '@/components/visualizations/LoadingErrorVisualization.vue'
-import LoadingVisualization from '@/components/visualizations/LoadingVisualization.vue'
-import { SavedSize } from '@/components/WithFullscreenMode.vue'
-import { focusIsIn, useEvent } from '@/composables/events'
-import { provideVisualizationConfig } from '@/providers/visualizationConfig'
-import { useProjectStore } from '@/stores/project'
-import { type NodeVisualizationConfiguration } from '@/stores/project/executionContext'
 import {
-  DEFAULT_VISUALIZATION_CONFIGURATION,
-  DEFAULT_VISUALIZATION_IDENTIFIER,
-  useVisualizationStore,
-  type VisualizationDataSource,
-} from '@/stores/visualization'
-import type { Visualization } from '@/stores/visualization/runtimeTypes'
-import { Ast } from '@/util/ast'
-import { toError } from '@/util/data/error'
+  RawDataSource,
+  useVisualizationData,
+} from '@/components/GraphEditor/GraphVisualization/visualizationData'
+import VisualizationToolbar from '@/components/GraphEditor/GraphVisualization/VisualizationToolbar.vue'
+import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
+import ResizeHandles from '@/components/ResizeHandles.vue'
+import WithFullscreenMode from '@/components/WithFullscreenMode.vue'
+import { focusIsIn, useEvent, useResizeObserver } from '@/composables/events'
+import { VisualizationDataSource } from '@/stores/visualization'
 import type { Opt } from '@/util/data/opt'
-import { Rect } from '@/util/data/rect'
-import type { Result } from '@/util/data/result'
-import type { URLString } from '@/util/data/urlString'
+import { type BoundsSet, Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
-import type { Icon } from '@/util/iconName'
-import { computedAsync } from '@vueuse/core'
-import {
-  computed,
-  nextTick,
-  onErrorCaptured,
-  onUnmounted,
-  ref,
-  shallowRef,
-  watch,
-  watchEffect,
-  type ShallowRef,
-} from 'vue'
-import { isIdentifier } from 'ydoc-shared/ast'
+import { computed, nextTick, onUnmounted, ref, toRef, watch, watchEffect } from 'vue'
 import { visIdentifierEquals, type VisualizationIdentifier } from 'ydoc-shared/yjsModel'
 
 /** The minimum width must be at least the total width of:
@@ -44,14 +22,12 @@ import { visIdentifierEquals, type VisualizationIdentifier } from 'ydoc-shared/y
 const MIN_WIDTH_PX = 200
 const MIN_CONTENT_HEIGHT_PX = 32
 const DEFAULT_CONTENT_HEIGHT_PX = 150
-const TOOLBAR_HEIGHT_PX = 36
-
-// Used for testing.
-type RawDataSource = { type: 'raw'; data: any }
 
 const props = defineProps<{
   currentType?: Opt<VisualizationIdentifier>
   isCircularMenuVisible: boolean
+  isFullscreenAllowed: boolean
+  isResizable: boolean
   isPreview?: boolean
   nodePosition: Vec2
   nodeSize: Vec2
@@ -72,171 +48,82 @@ const emit = defineEmits<{
   createNodes: [options: NodeCreationOptions[]]
 }>()
 
-const visPreprocessor = ref(DEFAULT_VISUALIZATION_CONFIGURATION)
-const vueError = ref<Error>()
+// ===================================
+// === Visualization-Specific Data ===
+// ===================================
+
+const {
+  effectiveVisualization,
+  effectiveVisualizationData,
+  updatePreprocessor,
+  allTypes,
+  currentType,
+  setToolbarDefinition,
+  visualizationDefinedToolbar,
+  toolbarOverlay,
+} = useVisualizationData({
+  selectedVis: toRef(props, 'currentType'),
+  dataSource: toRef(props, 'dataSource'),
+  typename: toRef(props, 'typename'),
+})
 
-const projectStore = useProjectStore()
-const visualizationStore = useVisualizationStore()
+// ===========
+// === DOM ===
+// ===========
 
-const configForGettingDefaultVisualization = computed<NodeVisualizationConfiguration | undefined>(
-  () => {
-    if (props.currentType) return
-    if (props.dataSource?.type !== 'node') return
-    return {
-      visualizationModule: 'Standard.Visualization.Helpers',
-      expression: 'a -> a.default_visualization.to_js_object.to_json',
-      expressionId: props.dataSource.nodeId,
-    }
-  },
-)
+/** Includes content and toolbars. */
+const panelElement = ref<HTMLElement>()
 
-const defaultVisualizationRaw = projectStore.useVisualizationData(
-  configForGettingDefaultVisualization,
-) as ShallowRef<Result<{ library: { name: string } | null; name: string } | undefined>>
+/** Contains only the visualization itself. */
+const contentElement = ref<HTMLElement>()
+const contentElementSize = useResizeObserver(contentElement)
 
-const defaultVisualizationForCurrentNodeSource = computed<VisualizationIdentifier | undefined>(
-  () => {
-    const raw = defaultVisualizationRaw.value
-    if (!raw?.ok || !raw.value || !raw.value.name) return
-    return {
-      name: raw.value.name,
-      module:
-        raw.value.library == null ?
-          { kind: 'Builtin' }
-        : { kind: 'Library', name: raw.value.library.name },
+// === Events ===
+
+const keydownHandler = visualizationBindings.handler({
+  nextType: () => {
+    if (props.isFocused || focusIsIn(panelElement.value)) {
+      const currentIndex = allTypes.value.findIndex((type) =>
+        visIdentifierEquals(type, currentType.value),
+      )
+      const nextIndex = (currentIndex + 1) % allTypes.value.length
+      emit('update:id', allTypes.value[nextIndex]!)
+    } else {
+      return false
+    }
+  },
+  toggleFullscreen: () => {
+    if (props.isFocused || focusIsIn(panelElement.value)) {
+      isFullscreen.value = !isFullscreen.value
+    } else {
+      return false
+    }
+  },
+  exitFullscreen: () => {
+    if (isFullscreen.value) {
+      isFullscreen.value = false
+    } else {
+      return false
     }
   },
-)
-
-const currentType = computed(() => {
-  if (props.currentType) return props.currentType
-  if (defaultVisualizationForCurrentNodeSource.value)
-    return defaultVisualizationForCurrentNodeSource.value
-  const [id] = visualizationStore.types(props.typename)
-  return id
-})
-
-const visualization = shallowRef<Visualization>()
-const icon = ref<Icon | URLString>()
-
-onErrorCaptured((error) => {
-  vueError.value = error
-  return false
 })
 
-const nodeVisualizationData = projectStore.useVisualizationData(() => {
-  if (props.dataSource?.type !== 'node') return
-  return {
-    ...visPreprocessor.value,
-    expressionId: props.dataSource.nodeId,
-  }
-})
+useEvent(window, 'keydown', keydownHandler)
 
-const expressionVisualizationData = computedAsync(() => {
-  if (props.dataSource?.type !== 'expression') return
-  if (preprocessorLoading.value) return
-  const preprocessor = visPreprocessor.value
-  const args = preprocessor.positionalArgumentsExpressions
-  const tempModule = Ast.MutableModule.Transient()
-  const preprocessorModule = Ast.parse(preprocessor.visualizationModule, tempModule)
-  // TODO[ao]: it work with builtin visualization, but does not work in general case.
-  // Tracked in https://github.com/orgs/enso-org/discussions/6832#discussioncomment-7754474.
-  if (!isIdentifier(preprocessor.expression)) {
-    console.error(`Unsupported visualization preprocessor definition`, preprocessor)
-    return
+function onWheel(event: WheelEvent) {
+  if (
+    event.currentTarget instanceof Element &&
+    (isFullscreen.value ||
+      event.currentTarget.scrollWidth > event.currentTarget.clientWidth ||
+      event.currentTarget.scrollHeight > event.currentTarget.clientHeight)
+  ) {
+    event.stopPropagation()
   }
-  const preprocessorQn = Ast.PropertyAccess.new(
-    tempModule,
-    preprocessorModule,
-    preprocessor.expression,
-  )
-  const preprocessorInvocation = Ast.App.PositionalSequence(preprocessorQn, [
-    Ast.Wildcard.new(tempModule),
-    ...args.map((arg) => Ast.Group.new(tempModule, Ast.parse(arg, tempModule))),
-  ])
-  const rhs = Ast.parse(props.dataSource.expression, tempModule)
-  const expression = Ast.OprApp.new(tempModule, preprocessorInvocation, '<|', rhs)
-  return projectStore.executeExpression(props.dataSource.contextId, expression.code())
-})
-
-const effectiveVisualizationData = computed(() => {
-  const name = currentType.value?.name
-  if (props.dataSource?.type === 'raw') return props.dataSource.data
-  if (vueError.value) return { name, error: vueError.value }
-  const visualizationData = nodeVisualizationData.value ?? expressionVisualizationData.value
-  if (!visualizationData) return
-  if (visualizationData.ok) return visualizationData.value
-  else return { name, error: new Error(`${visualizationData.error.payload}`) }
-})
-
-function updatePreprocessor(
-  visualizationModule: string,
-  expression: string,
-  ...positionalArgumentsExpressions: string[]
-) {
-  visPreprocessor.value = { visualizationModule, expression, positionalArgumentsExpressions }
 }
-// Required to work around janky Vue definitions for the type of a Visualization
-const updatePreprocessor_ = updatePreprocessor as (...args: unknown[]) => void
 
-function switchToDefaultPreprocessor() {
-  visPreprocessor.value = DEFAULT_VISUALIZATION_CONFIGURATION
-}
-
-watch(
-  () => [currentType.value, visualization.value],
-  () => (vueError.value = undefined),
-)
-
-// Flag used to prevent rendering the visualization with a stale preprocessor while the new preprocessor is being
-// prepared asynchronously.
-const preprocessorLoading = ref(false)
-watchEffect(async () => {
-  preprocessorLoading.value = true
-  if (currentType.value == null) return
-  visualization.value = undefined
-  icon.value = undefined
-  try {
-    const module = await visualizationStore.get(currentType.value).value
-    if (module) {
-      if (module.defaultPreprocessor != null) {
-        updatePreprocessor(...module.defaultPreprocessor)
-      } else {
-        switchToDefaultPreprocessor()
-      }
-      visualization.value = module.default
-      icon.value = module.icon
-    } else {
-      switch (currentType.value.module.kind) {
-        case 'Builtin': {
-          vueError.value = new Error(
-            `The builtin visualization '${currentType.value.name}' was not found.`,
-          )
-          break
-        }
-        case 'CurrentProject': {
-          vueError.value = new Error(
-            `The visualization '${currentType.value.name}' was not found in the current project.`,
-          )
-          break
-        }
-        case 'Library': {
-          vueError.value = new Error(
-            `The visualization '${currentType.value.name}' was not found in the library '${currentType.value.module.name}'.`,
-          )
-          break
-        }
-      }
-    }
-  } catch (caughtError) {
-    vueError.value = toError(caughtError)
-  }
-  preprocessorLoading.value = false
-})
-
-const isBelowToolbar = ref(false)
-
-const toolbarHeight = computed(() => (isBelowToolbar.value ? TOOLBAR_HEIGHT_PX : 0))
+// =============================
+// === Sizing and Fullscreen ===
+// =============================
 
 const rect = computed(
   () =>
@@ -245,7 +132,6 @@ const rect = computed(
       new Vec2(
         Math.max(props.width ?? MIN_WIDTH_PX, props.nodeSize.x),
         Math.max(props.height ?? DEFAULT_CONTENT_HEIGHT_PX, MIN_CONTENT_HEIGHT_PX) +
-          toolbarHeight.value +
           props.nodeSize.y,
       ),
     ),
@@ -254,150 +140,166 @@ const rect = computed(
 watchEffect(() => emit('update:rect', rect.value))
 onUnmounted(() => emit('update:rect', undefined))
 
-const allTypes = computed(() => Array.from(visualizationStore.types(props.typename)))
-
 const isFullscreen = ref(false)
-const currentSavedSize = ref<SavedSize>()
 
-provideVisualizationConfig({
-  get isFocused() {
-    return props.isFocused
-  },
-  get fullscreen() {
-    return isFullscreen.value
-  },
-  set fullscreen(value) {
-    isFullscreen.value = value
-  },
-  get savedSize() {
-    return currentSavedSize.value
-  },
-  set savedSize(value) {
-    currentSavedSize.value = value
-  },
-  get scale() {
-    return props.scale
-  },
-  get width() {
-    return rect.value.width
-  },
-  set width(value) {
-    emit('update:width', value)
-  },
-  get height() {
-    return rect.value.height - toolbarHeight.value - props.nodeSize.y
-  },
-  set height(value) {
-    emit('update:height', value)
-  },
-  get nodePosition() {
-    return props.nodePosition
-  },
-  set nodePosition(value) {
-    emit('update:nodePosition', value)
-  },
-  get isBelowToolbar() {
-    return isBelowToolbar.value
-  },
-  set isBelowToolbar(value) {
-    isBelowToolbar.value = value
-  },
-  get types() {
-    return allTypes.value
-  },
-  get isCircularMenuVisible() {
-    return props.isCircularMenuVisible
-  },
-  get nodeSize() {
-    return props.nodeSize
-  },
-  get currentType() {
-    return currentType.value ?? DEFAULT_VISUALIZATION_IDENTIFIER
-  },
-  get icon() {
-    return icon.value
-  },
-  get nodeType() {
-    return props.typename
+const containerContentSize = computed<Vec2>(
+  () => new Vec2(rect.value.width, rect.value.height - props.nodeSize.y),
+)
+
+// Because ResizeHandles are applying the screen mouse movements, the bounds must be in `screen`
+// space.
+const clientBounds = computed({
+  get() {
+    return new Rect(Vec2.Zero, containerContentSize.value.scale(props.scale))
   },
-  get isPreview() {
-    return props.isPreview ?? false
+  set(value) {
+    if (resizing.left || resizing.right) emit('update:width', value.width / props.scale)
+    if (resizing.bottom) emit('update:height', value.height / props.scale)
   },
-  hide: () => emit('update:enabled', false),
-  updateType: (id) => emit('update:id', id),
-  createNodes: (...options) => emit('createNodes', options),
 })
 
-const effectiveVisualization = computed(() => {
-  if (
-    vueError.value ||
-    (nodeVisualizationData.value && !nodeVisualizationData.value.ok) ||
-    (expressionVisualizationData.value && !expressionVisualizationData.value.ok)
-  ) {
-    return LoadingErrorVisualization
-  }
-  if (!visualization.value || effectiveVisualizationData.value == null) {
-    return LoadingVisualization
-  }
-  return visualization.value
-})
+let resizing: BoundsSet = {}
 
-const root = ref<HTMLElement>()
+watch(containerContentSize, (newVal, oldVal) => {
+  if (!resizing.left) return
+  const delta = newVal.x - oldVal.x
+  if (delta !== 0)
+    emit('update:nodePosition', new Vec2(props.nodePosition.x - delta, props.nodePosition.y))
+})
 
-const keydownHandler = visualizationBindings.handler({
-  nextType: () => {
-    if (props.isFocused || focusIsIn(root.value)) {
-      const currentIndex = allTypes.value.findIndex((type) =>
-        visIdentifierEquals(type, currentType.value),
-      )
-      const nextIndex = (currentIndex + 1) % allTypes.value.length
-      emit('update:id', allTypes.value[nextIndex]!)
-    } else {
-      return false
-    }
-  },
-  toggleFullscreen: () => {
-    if (props.isFocused || focusIsIn(root.value)) {
-      isFullscreen.value = !isFullscreen.value
-    } else {
-      return false
-    }
-  },
-  exitFullscreen: () => {
-    if (isFullscreen.value) {
-      isFullscreen.value = false
-    } else {
-      return false
-    }
-  },
+const style = computed(() => {
+  return {
+    'padding-top': `${props.nodeSize.y}px`,
+    width: `${rect.value.width}px`,
+    height: `${rect.value.height}px`,
+  }
 })
 
-useEvent(window, 'keydown', keydownHandler)
+const fullscreenAnimating = ref(false)
 
 watch(
   () => isFullscreen,
   (f) => {
-    f && nextTick(() => root.value?.focus())
+    f && nextTick(() => panelElement.value?.focus())
   },
 )
 </script>
 
+<script lang="ts">
+import VisualizationHost from '@/components/visualizations/VisualizationHost.vue'
+import { defineCustomElement } from 'vue'
+
+// ==========================
+// === Visualization Host ===
+// ==========================
+
+let definitionNumber = 0
+if (import.meta.hot) {
+  import.meta.hot.data.graphVizDefinitionNumber =
+    (import.meta.hot.data.graphVizDefinitionNumber ?? 0) + 1
+  definitionNumber = import.meta.hot.data.graphVizDefinitionNumber
+}
+const ensoVisualizationHost = `enso-visualization-host-${definitionNumber}`
+customElements.define(ensoVisualizationHost, defineCustomElement(VisualizationHost))
+</script>
+
 <template>
-  <div ref="root" class="GraphVisualization" tabindex="-1">
-    <Suspense>
-      <template #fallback><LoadingVisualization :data="{}" /></template>
-      <component
-        :is="effectiveVisualization"
-        :data="effectiveVisualizationData"
-        @update:preprocessor="updatePreprocessor_"
-      />
-    </Suspense>
+  <div class="GraphVisualization" :style="style">
+    <WithFullscreenMode :fullscreen="isFullscreen" @update:animating="fullscreenAnimating = $event">
+      <div
+        ref="panelElement"
+        class="VisualizationPanel"
+        :class="{
+          fullscreen: isFullscreen || fullscreenAnimating,
+          nonInteractive: isPreview,
+        }"
+        tabindex="-1"
+      >
+        <VisualizationToolbar
+          v-model:isFullscreen="isFullscreen"
+          :currentVis="currentType"
+          :showControls="!isPreview"
+          :hideVisualizationButton="
+            isFullscreen ? 'hide'
+            : isCircularMenuVisible ? 'invisible'
+            : 'show'
+          "
+          :isFullscreenAllowed="isFullscreenAllowed"
+          :allTypes="allTypes"
+          :visualizationDefinedToolbar="visualizationDefinedToolbar"
+          :typename="typename"
+          :class="{ overlay: toolbarOverlay }"
+          @update:currentVis="emit('update:id', $event)"
+          @hide="emit('update:enabled', false)"
+        />
+        <div
+          ref="contentElement"
+          class="VisualizationHostContainer content scrollable"
+          @wheel.passive="onWheel"
+        >
+          <component
+            :is="ensoVisualizationHost"
+            :visualization="effectiveVisualization"
+            :data="effectiveVisualizationData"
+            :size="contentElementSize"
+            :nodeType="typename"
+            @updatePreprocessor="
+              updatePreprocessor($event.detail[0], $event.detail[1], ...$event.detail.slice(2))
+            "
+            @updateToolbar="setToolbarDefinition($event.detail[0])"
+            @updateToolbarOverlay="toolbarOverlay = $event.detail[0]"
+            @createNodes="emit('createNodes', $event.detail[0])"
+          />
+        </div>
+      </div>
+    </WithFullscreenMode>
+    <ResizeHandles
+      v-if="!isPreview && isResizable"
+      v-model="clientBounds"
+      left
+      right
+      bottom
+      @update:resizing="resizing = $event"
+    />
   </div>
 </template>
 
 <style scoped>
 .GraphVisualization {
+  --resize-handle-inside: var(--visualization-resize-handle-inside);
+  --resize-handle-outside: var(--visualization-resize-handle-outside);
+  --resize-handle-radius: var(--radius-default);
+  position: absolute;
+  border-radius: var(--radius-default);
+  background: var(--color-visualization-bg);
   /** Prevent drawing on top of other UI elements (e.g. dropdown widgets). */
   isolation: isolate;
 }
+
+.VisualizationPanel {
+  --permanent-toolbar-width: 240px;
+  color: var(--color-text);
+  cursor: default;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  &.fullscreen {
+    background: var(--color-visualization-bg);
+  }
+}
+
+.content {
+  overflow: auto;
+  contain: strict;
+  height: 100%;
+}
+
+.nonInteractive {
+  pointer-events: none;
+}
+
+.overlay {
+  position: absolute;
+}
 </style>
diff --git a/app/gui2/src/components/GraphEditor/GraphVisualization/VisualizationToolbar.vue b/app/gui2/src/components/GraphEditor/GraphVisualization/VisualizationToolbar.vue
new file mode 100644
index 000000000000..4420cec19905
--- /dev/null
+++ b/app/gui2/src/components/GraphEditor/GraphVisualization/VisualizationToolbar.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import FullscreenButton from '@/components/FullscreenButton.vue'
+import SelectionDropdown from '@/components/SelectionDropdown.vue'
+import SvgButton from '@/components/SvgButton.vue'
+import ToggleIcon from '@/components/ToggleIcon.vue'
+import {
+  isActionButton,
+  isSelectionMenu,
+  isToggleButton,
+  ToolbarItem,
+} from '@/components/visualizations/toolbar'
+import VisualizationSelector from '@/components/VisualizationSelector.vue'
+import { useEvent } from '@/composables/events'
+import { provideInteractionHandler } from '@/providers/interactionHandler'
+import { isQualifiedName, qnLastSegment } from '@/util/qualifiedName'
+import { computed, toValue } from 'vue'
+import { VisualizationIdentifier } from 'ydoc-shared/yjsModel'
+
+const isFullscreen = defineModel<boolean>('isFullscreen', { required: true })
+const currentVis = defineModel<VisualizationIdentifier>('currentVis', { required: true })
+
+const props = defineProps<{
+  showControls: boolean
+  hideVisualizationButton: 'show' | 'hide' | 'invisible'
+  isFullscreenAllowed: boolean
+  allTypes: Iterable<VisualizationIdentifier>
+  visualizationDefinedToolbar: Readonly<ToolbarItem[]> | undefined
+  typename: string | undefined
+}>()
+
+const emit = defineEmits<{
+  hide: []
+}>()
+
+const UNKNOWN_TYPE = 'Unknown'
+const nodeShortType = computed(() =>
+  props.typename != null && isQualifiedName(props.typename) ?
+    qnLastSegment(props.typename)
+  : UNKNOWN_TYPE,
+)
+
+const interaction = provideInteractionHandler()
+useEvent(window, 'pointerdown', (e) => interaction.handlePointerEvent(e, 'pointerdown'), {
+  capture: true,
+})
+useEvent(window, 'pointerup', (e) => interaction.handlePointerEvent(e, 'pointerup'), {
+  capture: true,
+})
+</script>
+
+<template>
+  <div class="VisualizationToolbar">
+    <template v-if="showControls">
+      <div
+        v-if="hideVisualizationButton !== 'hide'"
+        class="toolbar"
+        :class="{ invisible: hideVisualizationButton === 'invisible' }"
+      >
+        <SvgButton name="eye" title="Hide visualization" @click.stop="emit('hide')" />
+      </div>
+      <div class="toolbar">
+        <FullscreenButton v-if="isFullscreenAllowed" v-model="isFullscreen" />
+        <VisualizationSelector v-model="currentVis" :types="allTypes" />
+      </div>
+      <div v-if="visualizationDefinedToolbar" class="visualization-defined-toolbars">
+        <div class="toolbar">
+          <template v-for="(item, index) in visualizationDefinedToolbar" :key="index">
+            <SvgButton
+              v-if="isActionButton(item)"
+              :name="item.icon"
+              :title="item.title"
+              :onClick="item.onClick"
+              :disabled="item.disabled != null ? toValue(item.disabled) : false"
+              :data-testid="item.dataTestid"
+            />
+            <ToggleIcon
+              v-else-if="isToggleButton(item)"
+              v-model="item.toggle.value"
+              :icon="item.icon"
+              :title="item.title"
+              :disabled="item.disabled != null ? toValue(item.disabled) : false"
+              :data-testid="item.dataTestid"
+            />
+            <SelectionDropdown
+              v-else-if="isSelectionMenu(item)"
+              v-model="item.selected.value"
+              :options="item.options"
+              :title="item.title"
+              alwaysShowArrow
+            />
+            <div v-else>?</div>
+          </template>
+        </div>
+      </div>
+    </template>
+    <div
+      class="after-toolbars node-type"
+      :title="props.typename ?? UNKNOWN_TYPE"
+      v-text="nodeShortType"
+    />
+  </div>
+</template>
+
+<style scoped>
+.VisualizationToolbar {
+  flex: 0;
+  transition-duration: 100ms;
+  transition-property: padding-left;
+  width: 100%;
+  user-select: none;
+  margin-top: 4px;
+  display: flex;
+  gap: 4px;
+}
+
+.after-toolbars {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-left: auto;
+  margin-right: 8px;
+  overflow: hidden;
+  width: calc(var(--node-size-x) - var(--permanent-toolbar-width));
+}
+
+.node-type {
+  font-weight: bold;
+}
+
+.toolbar {
+  position: relative;
+  display: flex;
+  border-radius: var(--radius-full);
+  gap: 12px;
+  padding: 8px;
+  z-index: 20;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    border-radius: var(--radius-full);
+    background: var(--color-app-bg);
+    backdrop-filter: var(--blur-app-bg);
+  }
+}
+
+.toolbar:not(:first-child):not(:has(> *)) {
+  display: none;
+}
+
+.toolbar > :deep(*) {
+  position: relative;
+}
+</style>
diff --git a/app/gui2/src/components/GraphEditor/GraphVisualization/visualizationData.ts b/app/gui2/src/components/GraphEditor/GraphVisualization/visualizationData.ts
new file mode 100644
index 000000000000..926ff23f00c1
--- /dev/null
+++ b/app/gui2/src/components/GraphEditor/GraphVisualization/visualizationData.ts
@@ -0,0 +1,243 @@
+import LoadingErrorVisualization from '@/components/visualizations/LoadingErrorVisualization.vue'
+import LoadingVisualization from '@/components/visualizations/LoadingVisualization.vue'
+import { ToolbarItem } from '@/components/visualizations/toolbar'
+import { useProjectStore } from '@/stores/project'
+import type { NodeVisualizationConfiguration } from '@/stores/project/executionContext'
+import {
+  DEFAULT_VISUALIZATION_CONFIGURATION,
+  DEFAULT_VISUALIZATION_IDENTIFIER,
+  useVisualizationStore,
+  VisualizationDataSource,
+} from '@/stores/visualization'
+import type { Visualization } from '@/stores/visualization/runtimeTypes'
+import { Ast } from '@/util/ast'
+import { toError } from '@/util/data/error'
+import { ToValue } from '@/util/reactivity'
+import { computedAsync } from '@vueuse/core'
+import {
+  computed,
+  onErrorCaptured,
+  ref,
+  shallowRef,
+  ShallowRef,
+  toValue,
+  watch,
+  watchEffect,
+} from 'vue'
+import { isIdentifier } from 'ydoc-shared/ast'
+import type { Opt } from 'ydoc-shared/util/data/opt'
+import type { Result } from 'ydoc-shared/util/data/result'
+import type { VisualizationIdentifier } from 'ydoc-shared/yjsModel'
+
+// Used for testing.
+export type RawDataSource = { type: 'raw'; data: any }
+
+export interface UseVisualizationDataOptions {
+  selectedVis: ToValue<Opt<VisualizationIdentifier>>
+  typename: ToValue<string | undefined>
+  dataSource: ToValue<VisualizationDataSource | RawDataSource | undefined>
+}
+
+export function useVisualizationData({
+  selectedVis,
+  dataSource,
+  typename,
+}: UseVisualizationDataOptions) {
+  const visPreprocessor = ref(DEFAULT_VISUALIZATION_CONFIGURATION)
+  const vueError = ref<Error>()
+
+  const projectStore = useProjectStore()
+  const visualizationStore = useVisualizationStore()
+
+  const configForGettingDefaultVisualization = computed<NodeVisualizationConfiguration | undefined>(
+    () => {
+      if (toValue(selectedVis)) return
+      const dataSourceValue = toValue(dataSource)
+      if (dataSourceValue?.type !== 'node') return
+      return {
+        visualizationModule: 'Standard.Visualization.Helpers',
+        expression: 'a -> a.default_visualization.to_js_object.to_json',
+        expressionId: dataSourceValue.nodeId,
+      }
+    },
+  )
+
+  const defaultVisualizationRaw = projectStore.useVisualizationData(
+    configForGettingDefaultVisualization,
+  ) as ShallowRef<Result<{ library: { name: string } | null; name: string } | undefined>>
+
+  const defaultVisualizationForCurrentNodeSource = computed<VisualizationIdentifier | undefined>(
+    () => {
+      const raw = defaultVisualizationRaw.value
+      if (!raw?.ok || !raw.value || !raw.value.name) return
+      return {
+        name: raw.value.name,
+        module:
+          raw.value.library == null ?
+            { kind: 'Builtin' }
+          : { kind: 'Library', name: raw.value.library.name },
+      }
+    },
+  )
+
+  const currentType = computed(() => {
+    const selectedTypeValue = toValue(selectedVis)
+    if (selectedTypeValue) return selectedTypeValue
+    if (defaultVisualizationForCurrentNodeSource.value)
+      return defaultVisualizationForCurrentNodeSource.value
+    const [id] = visualizationStore.types(toValue(typename))
+    return id ?? DEFAULT_VISUALIZATION_IDENTIFIER
+  })
+
+  const visualization = shallowRef<Visualization>()
+
+  onErrorCaptured((error) => {
+    vueError.value = error
+    return false
+  })
+
+  const nodeVisualizationData = projectStore.useVisualizationData(() => {
+    const dataSourceValue = toValue(dataSource)
+    if (dataSourceValue?.type !== 'node') return
+    return {
+      ...visPreprocessor.value,
+      expressionId: dataSourceValue.nodeId,
+    }
+  })
+
+  const expressionVisualizationData = computedAsync(() => {
+    const dataSourceValue = toValue(dataSource)
+    if (dataSourceValue?.type !== 'expression') return
+    if (preprocessorLoading.value) return
+    const preprocessor = visPreprocessor.value
+    const args = preprocessor.positionalArgumentsExpressions
+    const tempModule = Ast.MutableModule.Transient()
+    const preprocessorModule = Ast.parse(preprocessor.visualizationModule, tempModule)
+    // TODO[ao]: it work with builtin visualization, but does not work in general case.
+    // Tracked in https://github.com/orgs/enso-org/discussions/6832#discussioncomment-7754474.
+    if (!isIdentifier(preprocessor.expression)) {
+      console.error(`Unsupported visualization preprocessor definition`, preprocessor)
+      return
+    }
+    const preprocessorQn = Ast.PropertyAccess.new(
+      tempModule,
+      preprocessorModule,
+      preprocessor.expression,
+    )
+    const preprocessorInvocation = Ast.App.PositionalSequence(preprocessorQn, [
+      Ast.Wildcard.new(tempModule),
+      ...args.map((arg) => Ast.Group.new(tempModule, Ast.parse(arg, tempModule))),
+    ])
+    const rhs = Ast.parse(dataSourceValue.expression, tempModule)
+    const expression = Ast.OprApp.new(tempModule, preprocessorInvocation, '<|', rhs)
+    return projectStore.executeExpression(dataSourceValue.contextId, expression.code())
+  })
+
+  const effectiveVisualizationData = computed(() => {
+    const dataSourceValue = toValue(dataSource)
+    const name = currentType.value?.name
+    if (dataSourceValue?.type === 'raw') return dataSourceValue.data
+    if (vueError.value) return { name, error: vueError.value }
+    const visualizationData = nodeVisualizationData.value ?? expressionVisualizationData.value
+    if (!visualizationData) return
+    if (visualizationData.ok) return visualizationData.value
+    else return { name, error: new Error(`${visualizationData.error.payload}`) }
+  })
+
+  function updatePreprocessor(
+    visualizationModule: string,
+    expression: string,
+    ...positionalArgumentsExpressions: string[]
+  ) {
+    visPreprocessor.value = { visualizationModule, expression, positionalArgumentsExpressions }
+  }
+
+  function switchToDefaultPreprocessor() {
+    visPreprocessor.value = DEFAULT_VISUALIZATION_CONFIGURATION
+  }
+
+  watch(
+    () => [currentType.value, visualization.value],
+    () => (vueError.value = undefined),
+  )
+
+  // Flag used to prevent rendering the visualization with a stale preprocessor while the new preprocessor is being
+  // prepared asynchronously.
+  const preprocessorLoading = ref(false)
+  watchEffect(async () => {
+    preprocessorLoading.value = true
+    if (currentType.value == null) return
+    visualization.value = undefined
+    try {
+      const module = await visualizationStore.get(currentType.value).value
+      if (module) {
+        if (module.defaultPreprocessor != null) {
+          updatePreprocessor(...module.defaultPreprocessor)
+        } else {
+          switchToDefaultPreprocessor()
+        }
+        visualization.value = module.default
+      } else {
+        switch (currentType.value.module.kind) {
+          case 'Builtin': {
+            vueError.value = new Error(
+              `The builtin visualization '${currentType.value.name}' was not found.`,
+            )
+            break
+          }
+          case 'CurrentProject': {
+            vueError.value = new Error(
+              `The visualization '${currentType.value.name}' was not found in the current project.`,
+            )
+            break
+          }
+          case 'Library': {
+            vueError.value = new Error(
+              `The visualization '${currentType.value.name}' was not found in the library '${currentType.value.module.name}'.`,
+            )
+            break
+          }
+        }
+      }
+    } catch (caughtError) {
+      vueError.value = toError(caughtError)
+    }
+    preprocessorLoading.value = false
+  })
+
+  const allTypes = computed(() => Array.from(visualizationStore.types(toValue(typename))))
+
+  const effectiveVisualization = computed(() => {
+    if (
+      vueError.value ||
+      (nodeVisualizationData.value && !nodeVisualizationData.value.ok) ||
+      (expressionVisualizationData.value && !expressionVisualizationData.value.ok)
+    ) {
+      return LoadingErrorVisualization
+    }
+    if (!visualization.value || effectiveVisualizationData.value == null) {
+      return LoadingVisualization
+    }
+    return visualization.value
+  })
+
+  // Visualization-provided configuration
+  const toolbarOverlay = ref(false)
+  const toolbarDefinition = shallowRef<ToValue<Readonly<ToolbarItem[]>>>()
+  watch(effectiveVisualization, () => {
+    toolbarOverlay.value = false
+    toolbarDefinition.value = undefined
+  })
+
+  return {
+    effectiveVisualization,
+    effectiveVisualizationData,
+    updatePreprocessor,
+    allTypes,
+    currentType,
+    setToolbarDefinition: (definition: ToValue<Readonly<ToolbarItem[]>>) =>
+      (toolbarDefinition.value = definition),
+    visualizationDefinedToolbar: computed(() => toValue(toolbarDefinition.value)),
+    toolbarOverlay,
+  }
+}
diff --git a/app/gui2/src/components/GraphEditor/dragging.ts b/app/gui2/src/components/GraphEditor/dragging.ts
index 270847b9e868..2945a7c96ea4 100644
--- a/app/gui2/src/components/GraphEditor/dragging.ts
+++ b/app/gui2/src/components/GraphEditor/dragging.ts
@@ -158,6 +158,16 @@ export function useDragging() {
       this.stopPositionUpdate()
       this.updateNodesPosition()
     }
+    cancelDragging(): void {
+      console.log('cancelDragging')
+      this.stopPositionUpdate()
+      offset.value = Vec2.Zero
+      snapXTarget.value = 0
+      snapYTarget.value = 0
+      snapX.skip()
+      snapY.skip()
+      this.updateNodesPosition()
+    }
 
     createSnapGrid() {
       const nonDraggedRects = computed(() => {
@@ -198,5 +208,9 @@ export function useDragging() {
       currentDrag?.finishDragging()
       currentDrag = undefined
     },
+    cancelDrag() {
+      currentDrag?.cancelDragging()
+      currentDrag = undefined
+    },
   }
 }
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetNumber.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetNumber.vue
index b38095435704..08d85dfefad3 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetNumber.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetNumber.vue
@@ -75,6 +75,12 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
+  <!-- Do not finish edit on blur here!
+  
+  It is tempting, but it breaks the cooperation with possible drop-down widget. Blur may be done on
+  pointerdown, and if it would end the interaction, the drop down would also be hidden, making 
+  any `click` event on it impossible.
+  -->
   <NumericInputWidget
     ref="inputComponent"
     class="WidgetNumber"
@@ -84,7 +90,8 @@ export const widgetDefinition = defineWidget(
     @update:modelValue="setValue"
     @click.stop
     @focus="editHandler.start()"
-    @blur="editHandler.end()"
+    @keydown.enter.stop="editHandler.end()"
+    @keydown.tab.stop="editHandler.end()"
     @input="editHandler.edit($event)"
   />
 </template>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
index ae82c71b8e65..4c1cdffa0860 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
@@ -284,7 +284,7 @@ const isMulti = computed(() => props.input.dynamicConfig?.kind === 'Multiple_Cho
 const dropDownInteraction = WidgetEditHandler.New('WidgetSelection', props.input, {
   cancel: onClose,
   end: onClose,
-  pointerdown: (e, _) => {
+  pointerdown: (e) => {
     if (
       targetIsOutside(e, unrefElement(dropdownElement)) &&
       targetIsOutside(e, unrefElement(activityElement)) &&
@@ -467,15 +467,9 @@ declare module '@/providers/widgetRegistry' {
     @pointerout="isHovered = false"
   >
     <NodeWidget :input="innerWidgetInput" />
-    <template v-if="showArrow">
-      <!-- Arrow icon is duplicated inside Teleport and outside because the teleport `to` target
-      must be already in the DOM when the <Teleport> component is mounted.
-      So the Teleport itself can be instantiated only when `arrowLocation` is already available. -->
-      <Teleport v-if="arrowLocation" :to="arrowLocation">
-        <SvgIcon name="arrow_right_head_only" class="arrow widgetOutOfLayout" />
-      </Teleport>
-      <SvgIcon v-else name="arrow_right_head_only" class="arrow widgetOutOfLayout" />
-    </template>
+    <Teleport v-if="showArrow" defer :disabled="!arrowLocation" :to="arrowLocation">
+      <SvgIcon name="arrow_right_head_only" class="arrow widgetOutOfLayout" />
+    </Teleport>
     <Teleport v-if="tree.nodeElement" :to="tree.nodeElement">
       <div ref="dropdownElement" :style="floatingStyles" class="widgetOutOfLayout floatingElement">
         <SizeTransition height :duration="100">
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor.vue
index ffd910fa896d..a8a7ba720acd 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor.vue
@@ -7,7 +7,7 @@ import {
   type RowData,
 } from '@/components/GraphEditor/widgets/WidgetTableEditor/tableNewArgument'
 import ResizeHandles from '@/components/ResizeHandles.vue'
-import AgGridTableView from '@/components/widgets/AgGridTableView.vue'
+import AgGridTableView from '@/components/shared/AgGridTableView.vue'
 import { injectGraphNavigator } from '@/providers/graphNavigator'
 import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
 import { WidgetEditHandler } from '@/providers/widgetRegistry/editHandler'
@@ -17,8 +17,7 @@ import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import '@ag-grid-community/styles/ag-grid.css'
 import '@ag-grid-community/styles/ag-theme-alpine.css'
-import type { CellEditingStartedEvent, CellEditingStoppedEvent } from 'ag-grid-community'
-import type { Column } from 'ag-grid-enterprise'
+import type { CellEditingStartedEvent, CellEditingStoppedEvent, Column } from 'ag-grid-enterprise'
 import { computed, ref } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
index e0c465b96a08..a672e753389e 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
@@ -26,7 +26,7 @@ const props = defineProps<{
 const editing = ref(false)
 const inputElement = ref<HTMLInputElement>()
 
-watch(editing, (newVal, oldVal) => {
+watch(editing, (newVal) => {
   if (newVal) {
     props.params.onHeaderEditingStarted?.((cancel: boolean) => {
       if (cancel) editing.value = false
@@ -53,10 +53,29 @@ function acceptNewName() {
   props.params.nameSetter?.(inputElement.value.value)
   editing.value = false
 }
+
+function onMouseClick() {
+  if (!editing.value && props.params.nameSetter != null) {
+    editing.value = true
+  }
+}
+
+function onMouseRightClick(event: MouseEvent) {
+  if (!editing.value) {
+    props.params.showColumnMenuAfterMouseClick(event)
+  }
+}
 </script>
 
 <template>
-  <div class="ag-cell-label-container" role="presentation" @pointerdown.stop @click.stop>
+  <div
+    class="ag-cell-label-container"
+    role="presentation"
+    @pointerdown.stop
+    @click.stop
+    @click="onMouseClick"
+    @click.right="onMouseRightClick"
+  >
     <div class="ag-header-cell-label" role="presentation">
       <input
         v-if="editing"
@@ -73,7 +92,6 @@ function acceptNewName() {
         v-else
         class="ag-header-cell-text"
         :class="{ virtualColumn: params.virtualColumn === true }"
-        @click="editing = params.nameSetter != null"
         >{{ params.displayName }}</span
       >
     </div>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableNewArgument.test.ts b/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableNewArgument.test.ts
index 29934d4e1f17..fba4cdf1c431 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableNewArgument.test.ts
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableNewArgument.test.ts
@@ -1,4 +1,6 @@
 import {
+  MenuItem,
+  RowData,
   tableNewCallMayBeHandled,
   useTableNewArgument,
 } from '@/components/GraphEditor/widgets/WidgetTableEditor/tableNewArgument'
@@ -7,6 +9,7 @@ import { SuggestionDb } from '@/stores/suggestionDatabase'
 import { makeType } from '@/stores/suggestionDatabase/entry'
 import { assert } from '@/util/assert'
 import { Ast } from '@/util/ast'
+import { GetContextMenuItems, GetMainMenuItems } from 'ag-grid-enterprise'
 import { expect, test, vi } from 'vitest'
 
 function suggestionDbWithNothing() {
@@ -19,41 +22,43 @@ test.each([
   {
     code: 'Table.new [["a", [1, 2, 3]], ["b", [4, 5, "six"]], ["empty", [Nothing, Standard.Base.Nothing, Nothing]]]',
     expectedColumnDefs: [
+      { headerName: '#' },
       { headerName: 'a' },
       { headerName: 'b' },
       { headerName: 'empty' },
       { headerName: 'New Column' },
     ],
     expectedRows: [
-      { a: 1, b: 4, empty: null, 'New Column': null },
-      { a: 2, b: 5, empty: null, 'New Column': null },
-      { a: 3, b: 'six', empty: null, 'New Column': null },
-      { a: null, b: null, empty: null, 'New Column': null },
+      { '#': 0, a: 1, b: 4, empty: null, 'New Column': null },
+      { '#': 1, a: 2, b: 5, empty: null, 'New Column': null },
+      { '#': 2, a: 3, b: 'six', empty: null, 'New Column': null },
+      { '#': 3, a: null, b: null, empty: null, 'New Column': null },
     ],
   },
   {
     code: 'Table.new []',
-    expectedColumnDefs: [{ headerName: 'New Column' }],
-    expectedRows: [{ 'New Column': null }],
+    expectedColumnDefs: [{ headerName: '#' }, { headerName: 'New Column' }],
+    expectedRows: [{ '#': 0, 'New Column': null }],
   },
   {
     code: 'Table.new',
-    expectedColumnDefs: [{ headerName: 'New Column' }],
-    expectedRows: [{ 'New Column': null }],
+    expectedColumnDefs: [{ headerName: '#' }, { headerName: 'New Column' }],
+    expectedRows: [{ '#': 0, 'New Column': null }],
   },
   {
     code: 'Table.new _',
-    expectedColumnDefs: [{ headerName: 'New Column' }],
-    expectedRows: [{ 'New Column': null }],
+    expectedColumnDefs: [{ headerName: '#' }, { headerName: 'New Column' }],
+    expectedRows: [{ '#': 0, 'New Column': null }],
   },
   {
     code: 'Table.new [["a", []]]',
-    expectedColumnDefs: [{ headerName: 'a' }, { headerName: 'New Column' }],
-    expectedRows: [{ a: null, 'New Column': null }],
+    expectedColumnDefs: [{ headerName: '#' }, { headerName: 'a' }, { headerName: 'New Column' }],
+    expectedRows: [{ '#': 0, a: null, 'New Column': null }],
   },
   {
     code: 'Table.new [["a", [1,,2]], ["b", [3, 4,]], ["c", [, 5, 6]], ["d", [,,]]]',
     expectedColumnDefs: [
+      { headerName: '#' },
       { headerName: 'a' },
       { headerName: 'b' },
       { headerName: 'c' },
@@ -61,10 +66,10 @@ test.each([
       { headerName: 'New Column' },
     ],
     expectedRows: [
-      { a: 1, b: 3, c: null, d: null, 'New Column': null },
-      { a: null, b: 4, c: 5, d: null, 'New Column': null },
-      { a: 2, b: null, c: 6, d: null, 'New Column': null },
-      { a: null, b: null, c: null, d: null, 'New Column': null },
+      { '#': 0, a: 1, b: 3, c: null, d: null, 'New Column': null },
+      { '#': 1, a: null, b: 4, c: 5, d: null, 'New Column': null },
+      { '#': 2, a: 2, b: null, c: 6, d: null, 'New Column': null },
+      { '#': 3, a: null, b: null, c: null, d: null, 'New Column': null },
     ],
   },
 ])('Reading table from $code', ({ code, expectedColumnDefs, expectedRows }) => {
@@ -117,26 +122,26 @@ test.each([
   {
     code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
     description: 'Editing number',
-    edit: { column: 0, row: 1, value: -22 },
+    edit: { column: 1, row: 1, value: -22 },
     expected: "Table.new [['a', [1, -22, 3]], ['b', [4, 5, 6]]]",
   },
   {
     code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
     description: 'Editing string',
-    edit: { column: 0, row: 1, value: 'two' },
+    edit: { column: 1, row: 1, value: 'two' },
     expected: "Table.new [['a', [1, 'two', 3]], ['b', [4, 5, 6]]]",
   },
   {
     code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
     description: 'Putting blank value',
-    edit: { column: 1, row: 1, value: '' },
+    edit: { column: 2, row: 1, value: '' },
     expected: "Table.new [['a', [1, 2, 3]], ['b', [4, Nothing, 6]]]",
     importExpected: true,
   },
   {
     code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
     description: 'Adding new column',
-    edit: { column: 2, row: 1, value: 8 },
+    edit: { column: 3, row: 1, value: 8 },
     expected:
       "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]], ['New Column', [Nothing, 8, Nothing]]]",
     importExpected: true,
@@ -144,39 +149,39 @@ test.each([
   {
     code: 'Table.new []',
     description: 'Adding first column',
-    edit: { column: 0, row: 0, value: 8 },
+    edit: { column: 1, row: 0, value: 8 },
     expected: "Table.new [['New Column', [8]]]",
   },
   {
     code: 'Table.new',
     description: 'Adding parameter',
-    edit: { column: 0, row: 0, value: 8 },
+    edit: { column: 1, row: 0, value: 8 },
     expected: "Table.new [['New Column', [8]]]",
   },
   {
     code: 'Table.new _',
     description: 'Update parameter',
-    edit: { column: 0, row: 0, value: 8 },
+    edit: { column: 1, row: 0, value: 8 },
     expected: "Table.new [['New Column', [8]]]",
   },
   {
     code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
     description: 'Adding new row',
-    edit: { column: 0, row: 3, value: 4.5 },
+    edit: { column: 1, row: 3, value: 4.5 },
     expected: "Table.new [['a', [1, 2, 3, 4.5]], ['b', [4, 5, 6, Nothing]]]",
     importExpected: true,
   },
   {
     code: "Table.new [['a', []], ['b', []]]",
     description: 'Adding first row',
-    edit: { column: 1, row: 0, value: 'val' },
+    edit: { column: 2, row: 0, value: 'val' },
     expected: "Table.new [['a', [Nothing]], ['b', ['val']]]",
     importExpected: true,
   },
   {
     code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
     description: 'Adding new row and column (the cell in the corner)',
-    edit: { column: 2, row: 3, value: 7 },
+    edit: { column: 3, row: 3, value: 7 },
     expected:
       "Table.new [['a', [1, 2, 3, Nothing]], ['b', [4, 5, 6, Nothing]], ['New Column', [Nothing, Nothing, Nothing, 7]]]",
     importExpected: true,
@@ -184,25 +189,25 @@ test.each([
   {
     code: "Table.new [['a', [1, ,3]]]",
     description: 'Setting missing value',
-    edit: { column: 0, row: 1, value: 2 },
+    edit: { column: 1, row: 1, value: 2 },
     expected: "Table.new [['a', [1, 2 ,3]]]",
   },
   {
     code: "Table.new [['a', [, 2, 3]]]",
     description: 'Setting missing value at first row',
-    edit: { column: 0, row: 0, value: 1 },
+    edit: { column: 1, row: 0, value: 1 },
     expected: "Table.new [['a', [1, 2, 3]]]",
   },
   {
     code: "Table.new [['a', [1, 2,]]]",
     description: 'Setting missing value at last row',
-    edit: { column: 0, row: 2, value: 3 },
+    edit: { column: 1, row: 2, value: 3 },
     expected: "Table.new [['a', [1, 2, 3]]]",
   },
   {
     code: "Table.new [['a', [1, 2]], ['a', [3, 4]]]",
     description: 'Editing with duplicated column name',
-    edit: { column: 0, row: 1, value: 5 },
+    edit: { column: 1, row: 1, value: 5 },
     expected: "Table.new [['a', [1, 5]], ['a', [3, 4]]]",
   },
 ])('Editing table $code: $description', ({ code, edit, expected, importExpected }) => {
@@ -239,3 +244,118 @@ test.each([
   if (importExpected) expect(addMissingImports).toHaveBeenCalled()
   else expect(addMissingImports).not.toHaveBeenCalled()
 })
+
+function getCustomMenuItemByName(
+  name: string,
+  items:
+    | (string | MenuItem)[]
+    | GetMainMenuItems<RowData>
+    | GetContextMenuItems<RowData>
+    | undefined,
+): MenuItem | undefined {
+  if (!(items instanceof Array)) return undefined
+  const found = items.find((item) => typeof item === 'object' && item.name === name)
+  return typeof found === 'object' ? found : undefined
+}
+
+test.each([
+  {
+    code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
+    removedRowIndex: 0,
+    expected: "Table.new [['a', [ 2, 3]], ['b', [ 5, 6]]]",
+  },
+  {
+    code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
+    removedRowIndex: 1,
+    expected: "Table.new [['a', [1, 3]], ['b', [4, 6]]]",
+  },
+  {
+    code: "Table.new [['a', [1, 2, 3]], ['b', [4, 5, 6]]]",
+    removedRowIndex: 2,
+    expected: "Table.new [['a', [1, 2]], ['b', [4, 5]]]",
+  },
+  {
+    code: "Table.new [['a', [1]], ['b', [4]]]",
+    removedRowIndex: 0,
+    expected: "Table.new [['a', []], ['b', []]]",
+  },
+])('Removing $removedRowIndex row in $code', ({ code, removedRowIndex, expected }) => {
+  const ast = Ast.parseBlock(code)
+  const inputAst = [...ast.statements()][0]
+  assert(inputAst != null)
+  const addMissingImports = vi.fn()
+  const onUpdate = vi.fn((update) => {
+    const inputAst = [...update.edit.getVersion(ast).statements()][0]
+    expect(inputAst?.code()).toBe(expected)
+  })
+  const input = WidgetInput.FromAst(inputAst)
+  const tableNewArgs = useTableNewArgument(
+    input,
+    { startEdit: () => ast.module.edit(), addMissingImports },
+    new SuggestionDb(),
+    onUpdate,
+  )
+  const removedRow = tableNewArgs.rowData.value[removedRowIndex]
+  assert(removedRow != null)
+  // Context menu of all cells in given row should work (even the "virtual" columns).
+  for (const colDef of tableNewArgs.columnDefs.value) {
+    const removeAction = getCustomMenuItemByName('Remove Row', colDef.contextMenuItems)
+    assert(removeAction != null)
+    removeAction.action({ node: { data: removedRow } })
+    expect(onUpdate).toHaveBeenCalledOnce()
+    onUpdate.mockClear()
+  }
+  expect(addMissingImports).not.toHaveBeenCalled()
+})
+
+test.each([
+  {
+    code: "Table.new [['a', [1, 2]], ['b', [3, 4]], ['c', [5, 6]]]",
+    removedColIndex: 1,
+    expected: "Table.new [ ['b', [3, 4]], ['c', [5, 6]]]",
+  },
+  {
+    code: "Table.new [['a', [1, 2]], ['b', [3, 4]], ['c', [5, 6]]]",
+    removedColIndex: 2,
+    expected: "Table.new [['a', [1, 2]], ['c', [5, 6]]]",
+  },
+  {
+    code: "Table.new [['a', [1, 2]], ['b', [3, 4]], ['c', [5, 6]]]",
+    removedColIndex: 3,
+    expected: "Table.new [['a', [1, 2]], ['b', [3, 4]]]",
+  },
+  {
+    code: "Table.new [['a', [1, 2]]]",
+    removedColIndex: 1,
+    expected: 'Table.new []',
+  },
+])('Removing $removedColIndex column in $code', ({ code, removedColIndex, expected }) => {
+  const ast = Ast.parseBlock(code)
+  const inputAst = [...ast.statements()][0]
+  assert(inputAst != null)
+  const addMissingImports = vi.fn()
+  const onUpdate = vi.fn((update) => {
+    const inputAst = [...update.edit.getVersion(ast).statements()][0]
+    expect(inputAst?.code()).toBe(expected)
+  })
+  const input = WidgetInput.FromAst(inputAst)
+  const tableNewArgs = useTableNewArgument(
+    input,
+    { startEdit: () => ast.module.edit(), addMissingImports },
+    new SuggestionDb(),
+    onUpdate,
+  )
+  const removedCol = tableNewArgs.columnDefs.value[removedColIndex]
+  assert(removedCol != null)
+  const removeAction = getCustomMenuItemByName('Remove Column', removedCol.mainMenuItems)
+  assert(removeAction != null)
+  removeAction.action({ node: null })
+  expect(onUpdate).toHaveBeenCalledOnce()
+  onUpdate.mockClear()
+
+  const cellRemoveAction = getCustomMenuItemByName('Remove Column', removedCol.contextMenuItems)
+  cellRemoveAction?.action({ node: { data: tableNewArgs.rowData.value[0] } })
+  expect(onUpdate).toHaveBeenCalledOnce()
+
+  expect(addMissingImports).not.toHaveBeenCalled()
+})
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/tableNewArgument.ts b/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/tableNewArgument.ts
index 3906d334bdf6..445a5647c4ef 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/tableNewArgument.ts
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/tableNewArgument.ts
@@ -1,4 +1,3 @@
-import type { HeaderParams } from '@/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue'
 import type { WidgetInput, WidgetUpdate } from '@/providers/widgetRegistry'
 import { requiredImportsByFQN, type RequiredImport } from '@/stores/graph/imports'
 import type { SuggestionDb } from '@/stores/suggestionDatabase'
@@ -8,11 +7,13 @@ import { tryEnsoToNumber, tryNumberToEnso } from '@/util/ast/abstract'
 import { Err, Ok, transposeResult, unwrapOrWithLog, type Result } from '@/util/data/result'
 import { qnLastSegment, type QualifiedName } from '@/util/qualifiedName'
 import type { ToValue } from '@/util/reactivity'
-import type { ColDef } from 'ag-grid-community'
+import type { ColDef, MenuItemDef } from 'ag-grid-enterprise'
 import { computed, toValue } from 'vue'
 
 const NEW_COLUMN_ID = 'NewColumn'
+const ROW_INDEX_COLUMN_ID = 'RowIndex'
 const NEW_COLUMN_HEADER = 'New Column'
+const ROW_INDEX_HEADER = '#'
 const NOTHING_PATH = 'Standard.Base.Nothing.Nothing' as QualifiedName
 const NOTHING_NAME = qnLastSegment(NOTHING_PATH)
 
@@ -22,14 +23,19 @@ export type RowData = {
   cells: Record<Ast.AstId, Ast.AstId>
 }
 
+/** A more specialized version of AGGrid's `MenuItemDef` to simplify testing (the tests need to provide
+ * only values actually used by the composable) */
+export interface MenuItem extends MenuItemDef<RowData> {
+  action: (params: { node: { data: RowData | undefined } | null }) => void
+}
+
 /** A more specialized version of AGGrid's `ColDef` to simplify testing (the tests need to provide
  * only values actually used by the composable) */
-interface ColumnDef {
-  colId?: string
-  headerName: string
+export interface ColumnDef extends ColDef<RowData> {
   valueGetter: ({ data }: { data: RowData | undefined }) => any
-  valueSetter: ({ data, newValue }: { data: RowData; newValue: any }) => boolean
-  headerComponentParams?: HeaderParams
+  valueSetter?: ({ data, newValue }: { data: RowData; newValue: any }) => boolean
+  mainMenuItems: (string | MenuItem)[]
+  contextMenuItems: (string | MenuItem)[]
 }
 
 namespace cellValueConversion {
@@ -73,7 +79,9 @@ function retrieveColumnsAst(call: Ast.Ast) {
   return Err('Expected Table.new argument to be a vector of columns or placeholder')
 }
 
-function readColumn(ast: Ast.Ast): Result<{ name: Ast.TextLiteral; data: Ast.Vector }> {
+function readColumn(
+  ast: Ast.Ast,
+): Result<{ id: Ast.AstId; name: Ast.TextLiteral; data: Ast.Vector }> {
   const errormsg = () => `${ast.code} is not a vector of two elements`
   if (!(ast instanceof Ast.Vector)) return Err(errormsg())
   const elements = ast.values()
@@ -89,7 +97,7 @@ function readColumn(ast: Ast.Ast): Result<{ name: Ast.TextLiteral; data: Ast.Vec
     )
   if (!(second.value instanceof Ast.Vector))
     return Err(`Second element in column definition is ${second.value.code()} instead of a vector`)
-  return Ok({ name: first.value, data: second.value })
+  return Ok({ id: ast.id, name: first.value, data: second.value })
 }
 
 function retrieveColumnsDefinitions(columnsAst: Ast.Vector) {
@@ -168,6 +176,13 @@ export function useTableNewArgument(
     }
   }
 
+  function removeRow(edit: Ast.MutableModule, index: number) {
+    for (const column of columns.value) {
+      const editedCol = edit.getVersion(column.data)
+      editedCol.splice(index, 1)
+    }
+  }
+
   function addColumn(
     edit: Ast.MutableModule,
     name: string,
@@ -197,6 +212,41 @@ export function useTableNewArgument(
     }
   }
 
+  function removeColumn(edit: Ast.MutableModule, columnId: Ast.AstId) {
+    const editedCols = unwrapOrWithLog(columnsAst.value, undefined, errorMessagePreamble)
+    if (!editedCols) {
+      console.error(`Cannot remove column in Table Editor, because there is no column list`)
+      return
+    }
+    for (const [index, col] of editedCols.enumerate()) {
+      if (col?.id === columnId) {
+        edit.getVersion(editedCols).splice(index, 1)
+        return
+      }
+    }
+  }
+
+  const removeRowMenuItem = {
+    name: 'Remove Row',
+    action: ({ node }: { node: { data: RowData | undefined } | null }) => {
+      if (!node?.data) return
+      const edit = graph.startEdit()
+      fixColumns(edit)
+      removeRow(edit, node.data.index)
+      onUpdate({ edit })
+    },
+  }
+
+  const removeColumnMenuItem = (colId: Ast.AstId) => ({
+    name: 'Remove Column',
+    action: () => {
+      const edit = graph.startEdit()
+      fixColumns(edit)
+      removeColumn(edit, colId)
+      onUpdate({ edit })
+    },
+  })
+
   const newColumnDef = computed<ColumnDef>(() => ({
     colId: NEW_COLUMN_ID,
     headerName: NEW_COLUMN_HEADER,
@@ -219,6 +269,18 @@ export function useTableNewArgument(
       },
       virtualColumn: true,
     },
+    mainMenuItems: ['autoSizeThis', 'autoSizeAll'],
+    contextMenuItems: ['paste', 'separator', removeRowMenuItem],
+  }))
+
+  const rowIndexColumnDef = computed<ColumnDef>(() => ({
+    colId: ROW_INDEX_COLUMN_ID,
+    headerName: ROW_INDEX_HEADER,
+    valueGetter: ({ data }: { data: RowData | undefined }) => data?.index,
+    editable: false,
+    mainMenuItems: ['autoSizeThis', 'autoSizeAll'],
+    contextMenuItems: [removeRowMenuItem],
+    cellStyle: { color: 'rgba(0, 0, 0, 0.4)' },
   }))
 
   const columnDefs = computed(() => {
@@ -226,7 +288,7 @@ export function useTableNewArgument(
       columns.value,
       (col) =>
         ({
-          colId: col.data.id,
+          colId: col.id,
           headerName: col.name.rawTextContent,
           valueGetter: ({ data }: { data: RowData | undefined }) => {
             if (data == null) return undefined
@@ -263,8 +325,21 @@ export function useTableNewArgument(
               onUpdate({ edit })
             },
           },
+          mainMenuItems: ['autoSizeThis', 'autoSizeAll', removeColumnMenuItem(col.id)],
+          contextMenuItems: [
+            'cut',
+            'copy',
+            'copyWithHeaders',
+            'paste',
+            'separator',
+            removeRowMenuItem,
+            removeColumnMenuItem(col.id),
+            'separator',
+            'export',
+          ],
         }) satisfies ColDef<RowData>,
     )
+    cols.unshift(rowIndexColumnDef.value)
     cols.push(newColumnDef.value)
     return cols
   })
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetText.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetText.vue
index 7f08ac0d9a20..0e7a7ff8c5dd 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetText.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetText.vue
@@ -98,6 +98,12 @@ export const widgetDefinition = defineWidget(
 <template>
   <label ref="widgetRoot" class="WidgetText widgetRounded">
     <NodeWidget v-if="shownLiteral.open" :input="WidgetInput.FromAst(shownLiteral.open)" />
+    <!-- Do not finish edit on blur here!
+  
+    It is tempting, but it breaks the cooperation with possible drop-down widget. Blur may be done on
+    pointerdown, and if it would end the interaction, the drop down would also be hidden, making 
+    any `click` event on it impossible.
+    -->
     <AutoSizedInput
       ref="input"
       v-model="editedContents"
diff --git a/app/gui2/src/components/GraphMouse.vue b/app/gui2/src/components/GraphMouse.vue
index 3abe79375086..505307d77a46 100644
--- a/app/gui2/src/components/GraphMouse.vue
+++ b/app/gui2/src/components/GraphMouse.vue
@@ -3,15 +3,12 @@ import SelectionBrush from '@/components/SelectionBrush.vue'
 import { useEvent } from '@/composables/events'
 import { injectGraphNavigator } from '@/providers/graphNavigator'
 import { injectGraphSelection } from '@/providers/graphSelection'
-import { Vec2 } from '@/util/data/vec2'
 import { computed, ref } from 'vue'
 
 const navigator = injectGraphNavigator(true)
 const nodeSelection = injectGraphSelection(true)
-const scaledMousePos = computed(
-  () => navigator?.sceneMousePos?.scale(navigator?.scale ?? 1) ?? Vec2.Zero,
-)
 const scaledSelectionAnchor = computed(() => nodeSelection?.anchor?.scale(navigator?.scale ?? 1))
+const scaledSelectionFocus = computed(() => nodeSelection?.focus?.scale(navigator?.scale ?? 1))
 const isNativeDragging = ref(0)
 
 useEvent(
@@ -44,7 +41,7 @@ useEvent(
   <SelectionBrush
     v-if="!isNativeDragging"
     :transform="navigator?.prescaledTransform"
-    :position="scaledMousePos"
+    :position="scaledSelectionFocus"
     :anchor="scaledSelectionAnchor"
   />
 </template>
diff --git a/app/gui2/src/components/MarkdownEditor/BlockTypeMenu.vue b/app/gui2/src/components/MarkdownEditor/BlockTypeMenu.vue
index d4108d8648aa..ac3c447e3a5a 100644
--- a/app/gui2/src/components/MarkdownEditor/BlockTypeMenu.vue
+++ b/app/gui2/src/components/MarkdownEditor/BlockTypeMenu.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { blockTypeToBlockName, type BlockType } from '@/components/MarkdownEditor/formatting'
 import SelectionDropdown from '@/components/SelectionDropdown.vue'
-import SvgIcon from '@/components/SvgIcon.vue'
 import type { Icon } from '@/util/iconName'
 
 const blockType = defineModel<BlockType>({ required: true })
@@ -26,13 +25,15 @@ const blockTypesOrdered: BlockType[] = [
   'number',
   'quote',
 ]
+
+const blockTypeOptions = Object.fromEntries(
+  blockTypesOrdered.map((key) => [
+    key,
+    { icon: blockTypeIcon[key], label: blockTypeToBlockName[key] },
+  ]),
+)
 </script>
 
 <template>
-  <SelectionDropdown v-model="blockType" :values="blockTypesOrdered">
-    <template #default="{ value }">
-      <SvgIcon :name="blockTypeIcon[value]" />
-      <div class="iconLabel" v-text="blockTypeToBlockName[value]" />
-    </template>
-  </SelectionDropdown>
+  <SelectionDropdown v-model="blockType" :options="blockTypeOptions" labelButton />
 </template>
diff --git a/app/gui2/src/components/NavBreadcrumbs.vue b/app/gui2/src/components/NavBreadcrumbs.vue
index 2cc192ee7358..ac688dbcd47b 100644
--- a/app/gui2/src/components/NavBreadcrumbs.vue
+++ b/app/gui2/src/components/NavBreadcrumbs.vue
@@ -49,6 +49,7 @@ async function renameBreadcrumb(index: number, newName: string) {
           class="clickable"
           @click.stop="stackNavigator.handleBreadcrumbClick(index)"
           @update:modelValue="renameBreadcrumb(index, $event)"
+          @focusout="projectNameEdited = false"
         />
       </template>
     </div>
diff --git a/app/gui2/src/components/ResizeHandles.vue b/app/gui2/src/components/ResizeHandles.vue
index 100942d2c46c..f3d63de9c238 100644
--- a/app/gui2/src/components/ResizeHandles.vue
+++ b/app/gui2/src/components/ResizeHandles.vue
@@ -37,6 +37,10 @@ function resizeHandler(resizeX: 'left' | 'right' | false, resizeY: 'top' | 'bott
       case 'stop':
         emit('update:resizing', {})
         break
+      case 'cancel':
+        if (initialBounds) bounds.value = initialBounds
+        emit('update:resizing', {})
+        break
     }
   })
 }
diff --git a/app/gui2/src/components/ScrollBar.vue b/app/gui2/src/components/ScrollBar.vue
index e57e074cee37..4066c29ca653 100644
--- a/app/gui2/src/components/ScrollBar.vue
+++ b/app/gui2/src/components/ScrollBar.vue
@@ -78,6 +78,11 @@ function dragEventsHandler(axis: 'x' | 'y') {
         emit('scroll', { type: 'stop' })
         break
       }
+      case 'cancel': {
+        emit('scroll', { type: 'move', startOffset: Vec2.Zero })
+        emit('scroll', { type: 'stop' })
+        break
+      }
     }
     return true
   })
diff --git a/app/gui2/src/components/SelectionBrush.vue b/app/gui2/src/components/SelectionBrush.vue
index 3c8219f72c91..554102026e2e 100644
--- a/app/gui2/src/components/SelectionBrush.vue
+++ b/app/gui2/src/components/SelectionBrush.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { useApproach } from '@/composables/animation'
-import type { Vec2 } from '@/util/data/vec2'
+import { Vec2 } from '@/util/data/vec2'
 import { computed, shallowRef, watch } from 'vue'
 
 const props = defineProps<{
-  position: Vec2
+  position: Vec2 | undefined
   anchor: Vec2 | undefined
   transform: string | undefined
 }>()
 
 const hidden = computed(() => props.anchor == null)
 const lastSetAnchor = shallowRef<Vec2>()
-const lastAnchoredPosition = shallowRef<Vec2>(props.position)
+const lastAnchoredPosition = shallowRef<Vec2>(Vec2.Zero)
 watch(
   () => props.anchor,
   (anchor) => {
diff --git a/app/gui2/src/components/SelectionDropdown.vue b/app/gui2/src/components/SelectionDropdown.vue
index 6b9504290879..03ab5c62544a 100644
--- a/app/gui2/src/components/SelectionDropdown.vue
+++ b/app/gui2/src/components/SelectionDropdown.vue
@@ -1,28 +1,47 @@
-<script setup lang="ts" generic="T extends string | number | symbol">
+<script setup lang="ts">
+/** @file A dropdown menu supporting the pattern of selecting a single entry from a list. */
+
 import DropdownMenu from '@/components/DropdownMenu.vue'
 import MenuButton from '@/components/MenuButton.vue'
+import SvgIcon from '@/components/SvgIcon.vue'
+import { SelectionMenuOption } from '@/components/visualizations/toolbar'
 import { ref } from 'vue'
 
-const selected = defineModel<T>({ required: true })
-const _props = defineProps<{ values: T[] }>()
+type Key = number | string | symbol
+const selected = defineModel<Key>({ required: true })
+const _props = defineProps<{
+  options: Record<Key, SelectionMenuOption>
+  title?: string | undefined
+  labelButton?: boolean
+  alwaysShowArrow?: boolean
+}>()
 
 const open = ref(false)
 </script>
 
 <template>
-  <DropdownMenu v-model:open="open">
+  <DropdownMenu v-model:open="open" :title="title" :alwaysShowArrow="alwaysShowArrow">
     <template #button>
-      <slot :value="selected" />
+      <template v-if="options[selected]">
+        <SvgIcon :name="options[selected]!.icon" :style="options[selected]!.iconStyle" />
+        <div
+          v-if="labelButton && options[selected]!.label"
+          class="iconLabel"
+          v-text="options[selected]!.label"
+        />
+      </template>
     </template>
     <template #entries>
       <MenuButton
-        v-for="value in values"
-        :key="value"
-        :modelValue="selected === value"
-        @update:modelValue="$event && (selected = value)"
+        v-for="[key, option] in Object.entries(options)"
+        :key="key"
+        :title="option.title"
+        :modelValue="selected === key"
+        @update:modelValue="$event && (selected = key)"
         @click="open = false"
       >
-        <slot :value="value" />
+        <SvgIcon :name="option.icon" :style="option.iconStyle" :data-testid="option.dataTestid" />
+        <div v-if="option.label" class="iconLabel" v-text="option.label" />
       </MenuButton>
     </template>
   </DropdownMenu>
@@ -31,5 +50,11 @@ const open = ref(false)
 <style scoped>
 .MenuButton {
   margin: -4px;
+  justify-content: unset;
+}
+
+.iconLabel {
+  margin-left: 4px;
+  padding-right: 4px;
 }
 </style>
diff --git a/app/gui2/src/components/SvgButton.vue b/app/gui2/src/components/SvgButton.vue
index 481668c709c6..bbab27dff7d9 100644
--- a/app/gui2/src/components/SvgButton.vue
+++ b/app/gui2/src/components/SvgButton.vue
@@ -6,9 +6,9 @@ import type { Icon } from '@/util/iconName'
 
 const _props = defineProps<{
   name: Icon | URLString
-  label?: string
+  label?: string | undefined
   disabled?: boolean
-  title?: string
+  title?: string | undefined
 }>()
 </script>
 
diff --git a/app/gui2/src/components/TableVizToolbar.vue b/app/gui2/src/components/TableVizToolbar.vue
deleted file mode 100644
index fbb696c30f76..000000000000
--- a/app/gui2/src/components/TableVizToolbar.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<script setup lang="ts">
-import DropdownMenu from '@/components/DropdownMenu.vue'
-import MenuButton from '@/components/MenuButton.vue'
-import SvgButton from '@/components/SvgButton.vue'
-import SvgIcon from '@/components/SvgIcon.vue'
-import { useVisualizationConfig } from '@/providers/visualizationConfig'
-import { Ast } from '@/util/ast'
-import { Pattern } from '@/util/ast/match'
-import { computed, ref, watch } from 'vue'
-import type { NodeCreationOptions } from './GraphEditor/nodeCreation'
-import { TextFormatOptions } from './visualizations/TableVisualization.vue'
-
-type SortDirection = 'asc' | 'desc'
-export type SortModel = {
-  columnName: string
-  sortDirection: SortDirection
-  sortIndex: number
-}
-
-const props = defineProps<{
-  filterModel: {
-    [key: string]: {
-      values: any[]
-      filterType: string
-    }
-  }
-  sortModel: SortModel[]
-  isDisabled: boolean
-  isFilterSortNodeEnabled: boolean
-}>()
-
-const emit = defineEmits<{
-  changeFormat: [formatValue: TextFormatOptions]
-}>()
-
-const textFormatterSelected = ref(TextFormatOptions.Partial)
-watch(textFormatterSelected, (selected) => emit('changeFormat', selected))
-
-const config = useVisualizationConfig()
-
-const sortPatternPattern = computed(() => Pattern.parse('(..Name __ __ )'))
-
-const sortDirection = computed(() => ({
-  asc: '..Ascending',
-  desc: '..Descending',
-}))
-
-const makeSortPattern = (module: Ast.MutableModule) => {
-  const columnSortExpressions = props.sortModel
-    .filter((sort) => sort?.columnName)
-    .sort((a, b) => a.sortIndex - b.sortIndex)
-    .map((sort) =>
-      sortPatternPattern.value.instantiateCopied([
-        Ast.TextLiteral.new(sort.columnName),
-        Ast.parse(sortDirection.value[sort.sortDirection as SortDirection]),
-      ]),
-    )
-  return Ast.Vector.new(module, columnSortExpressions)
-}
-
-const filterPattern = computed(() => Pattern.parse('__ (__ __)'))
-
-const makeFilterPattern = (module: Ast.MutableModule, columnName: string, items: string[]) => {
-  if (
-    (items?.length === 1 && items.indexOf('true') != -1) ||
-    (items?.length === 1 && items.indexOf('false') != -1)
-  ) {
-    const boolToInclude = items.indexOf('false') != -1 ? Ast.parse('False') : Ast.parse('True')
-    return filterPattern.value.instantiateCopied([
-      Ast.TextLiteral.new(columnName),
-      Ast.parse('..Equal'),
-      boolToInclude,
-    ])
-  }
-  const itemList = items.map((i) => Ast.TextLiteral.new(i))
-  return filterPattern.value.instantiateCopied([
-    Ast.TextLiteral.new(columnName),
-    Ast.parse('..Is_In'),
-    Ast.Vector.new(module, itemList),
-  ])
-}
-
-function getAstPatternSort() {
-  return Pattern.new((ast) =>
-    Ast.App.positional(
-      Ast.PropertyAccess.new(ast.module, ast, Ast.identifier('sort')!),
-      makeSortPattern(ast.module),
-    ),
-  )
-}
-
-function getAstPatternFilter(columnName: string, items: string[]) {
-  return Pattern.new((ast) =>
-    Ast.App.positional(
-      Ast.PropertyAccess.new(ast.module, ast, Ast.identifier('filter')!),
-      makeFilterPattern(ast.module, columnName, items),
-    ),
-  )
-}
-
-function getAstPatternFilterAndSort(columnName: string, items: string[]) {
-  return Pattern.new((ast) =>
-    Ast.OprApp.new(
-      ast.module,
-      Ast.App.positional(
-        Ast.PropertyAccess.new(ast.module, ast, Ast.identifier('filter')!),
-        makeFilterPattern(ast.module, columnName, items),
-      ),
-      '.',
-      Ast.App.positional(
-        Ast.Ident.new(ast.module, Ast.identifier('sort')!),
-        makeSortPattern(ast.module),
-      ),
-    ),
-  )
-}
-
-const createNewNodes = () => {
-  let patterns = new Array<any>()
-  if (Object.keys(props.filterModel).length && props.sortModel.length) {
-    for (const index in Object.keys(props.filterModel)) {
-      const columnName = Object.keys(props.filterModel)[index]!
-      const items = props.filterModel[columnName || '']?.values.map((item) => `${item}`)!
-      const filterPatterns = getAstPatternFilterAndSort(columnName, items)
-      patterns.push(filterPatterns)
-    }
-  } else if (Object.keys(props.filterModel).length) {
-    for (const index in Object.keys(props.filterModel)) {
-      const columnName = Object.keys(props.filterModel)[index]!
-      const items = props.filterModel[columnName || '']?.values.map((item) => `${item}`)!
-      const filterPatterns = getAstPatternFilter(columnName, items)
-      patterns.push(filterPatterns)
-    }
-  } else if (props.sortModel.length) {
-    const patSort = getAstPatternSort()
-    patterns.push(patSort)
-  }
-  config.createNodes(
-    ...patterns.map(
-      (pattern) => ({ content: pattern, commit: true }) satisfies NodeCreationOptions,
-    ),
-  )
-}
-
-const buttonClass = computed(() => {
-  return {
-    full: isFormatOptionSelected(TextFormatOptions.On),
-    partial: isFormatOptionSelected(TextFormatOptions.Partial),
-    strikethrough: isFormatOptionSelected(TextFormatOptions.Off),
-  }
-})
-
-const isFormatOptionSelected = (option: TextFormatOptions): boolean =>
-  option === textFormatterSelected.value
-
-const open = ref(false)
-const toggleOpen = () => {
-  open.value = !open.value
-}
-
-const changeFormat = (option: TextFormatOptions) => {
-  textFormatterSelected.value = option
-  toggleOpen()
-}
-</script>
-
-<template>
-  <div class="TableVizToolbar">
-    <DropdownMenu v-model:open="open" class="TextFormattingSelector" title="Text Display Options">
-      <template #button
-        ><div :class="buttonClass">
-          <SvgIcon name="paragraph" /></div
-      ></template>
-
-      <template #entries>
-        <MenuButton
-          class="full"
-          title="Text displayed in monospace font and all whitespace characters displayed as symbols"
-          @click="() => changeFormat(TextFormatOptions.On)"
-        >
-          <SvgIcon name="paragraph" />
-          <div class="title">Full whitespace rendering</div>
-        </MenuButton>
-
-        <MenuButton
-          class="partial"
-          title="Text displayed in monospace font, only multiple spaces displayed with &#183;"
-          @click="() => changeFormat(TextFormatOptions.Partial)"
-        >
-          <SvgIcon name="paragraph" />
-          <div class="title">Partial whitespace rendering</div>
-        </MenuButton>
-
-        <MenuButton
-          class="off"
-          title="No formatting applied to text"
-          @click="() => changeFormat(TextFormatOptions.Off)"
-        >
-          <div class="strikethrough">
-            <SvgIcon name="paragraph" />
-          </div>
-          <div class="title">No whitespace rendering</div>
-        </MenuButton>
-      </template>
-    </DropdownMenu>
-  </div>
-
-  <div v-if="isFilterSortNodeEnabled" class="sortFilterNode">
-    <SvgButton
-      name="add"
-      title="Create new component(s) with the current grid's sort and filters applied to the workflow"
-      :disabled="props.isDisabled"
-      @click="createNewNodes()"
-    />
-  </div>
-</template>
-
-<style scoped>
-.TableVizToolbar {
-  display: flex;
-  flex-direction: row;
-  background: var(--color-frame-bg);
-  border-radius: 16px;
-}
-
-:deep(.DropdownMenuContent) {
-  margin-top: 10px;
-  padding: 4px;
-
-  > * {
-    display: flex;
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-}
-
-.strikethrough {
-  position: relative;
-  margin-right: 4px;
-}
-.strikethrough:before {
-  position: absolute;
-  content: '';
-  left: 0;
-  top: 50%;
-  right: 0;
-  border-top: 1px solid;
-  border-color: black;
-
-  -webkit-transform: rotate(-20deg);
-  -moz-transform: rotate(-20deg);
-  -ms-transform: rotate(-20deg);
-  -o-transform: rotate(-20deg);
-  transform: rotate(-20deg);
-}
-
-.partial {
-  stroke: grey;
-  fill: #808080;
-}
-
-.off {
-  justify-content: flex-start;
-}
-
-.full {
-  stroke: black;
-  fill: #000000;
-  justify-content: flex-start;
-}
-
-.title {
-  padding-left: 2px;
-}
-
-.sortFilterNode {
-  overflow: hidden;
-}
-</style>
diff --git a/app/gui2/src/components/ToggleIcon.vue b/app/gui2/src/components/ToggleIcon.vue
index 26ec8eb673bc..5d033111c9c7 100644
--- a/app/gui2/src/components/ToggleIcon.vue
+++ b/app/gui2/src/components/ToggleIcon.vue
@@ -8,16 +8,22 @@
 
 import MenuButton from '@/components/MenuButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
+import { URLString } from '@/util/data/urlString'
 import type { Icon } from '@/util/iconName'
 
 const toggledOn = defineModel<boolean>({ default: false })
-const props = defineProps<{ icon: Icon; label?: string; disabled?: boolean }>()
+const _props = defineProps<{
+  icon: Icon | URLString
+  title?: string | undefined
+  label?: string | undefined
+  disabled?: boolean | undefined
+}>()
 </script>
 
 <template>
-  <MenuButton v-model="toggledOn" class="ToggleIcon" :disabled="props.disabled">
+  <MenuButton v-model="toggledOn" class="ToggleIcon" :disabled="disabled" :title="title">
     <SvgIcon :name="icon" />
-    <div v-if="props.label" v-text="props.label" />
+    <div v-if="label" v-text="label" />
   </MenuButton>
 </template>
 
diff --git a/app/gui2/src/components/TopBar.vue b/app/gui2/src/components/TopBar.vue
index 6785eb966771..b3dfa693a88b 100644
--- a/app/gui2/src/components/TopBar.vue
+++ b/app/gui2/src/components/TopBar.vue
@@ -3,8 +3,6 @@ import ExtendedMenu from '@/components/ExtendedMenu.vue'
 import NavBreadcrumbs from '@/components/NavBreadcrumbs.vue'
 import RecordControl from '@/components/RecordControl.vue'
 import SelectionMenu from '@/components/SelectionMenu.vue'
-import { injectGuiConfig } from '@/providers/guiConfig'
-import { computed } from 'vue'
 
 const showColorPicker = defineModel<boolean>('showColorPicker', { required: true })
 const showCodeEditor = defineModel<boolean>('showCodeEditor', { required: true })
@@ -20,21 +18,10 @@ const emit = defineEmits<{
   collapseNodes: []
   removeNodes: []
 }>()
-
-const LEFT_PADDING_PX = 11
-
-const config = injectGuiConfig()
-
-const barStyle = computed(() => {
-  const offset = Number(config.value.window?.topBarOffset ?? '0')
-  return {
-    marginLeft: `${offset + LEFT_PADDING_PX}px`,
-  }
-})
 </script>
 
 <template>
-  <div class="TopBar" :style="barStyle">
+  <div class="TopBar">
     <NavBreadcrumbs />
     <RecordControl />
     <Transition name="selection-menu">
@@ -65,6 +52,7 @@ const barStyle = computed(() => {
   top: 8px;
   left: 0;
   right: 0;
+  margin-left: 11px;
   pointer-events: none;
   > * {
     pointer-events: auto;
diff --git a/app/gui2/src/components/VisualizationContainer.vue b/app/gui2/src/components/VisualizationContainer.vue
deleted file mode 100644
index 6d90f60dd307..000000000000
--- a/app/gui2/src/components/VisualizationContainer.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup lang="ts">
-/** @file The layout of a visualization within a node. */
-
-import ResizeHandles from '@/components/ResizeHandles.vue'
-import VisualizationPanel from '@/components/VisualizationPanel.vue'
-import { useVisualizationConfig } from '@/providers/visualizationConfig'
-import { Rect, type BoundsSet } from '@/util/data/rect'
-import { Vec2 } from '@/util/data/vec2'
-import { computed, watch, watchEffect } from 'vue'
-
-const props = defineProps<{
-  /** If true, the visualization should be `overflow: visible` instead of `overflow: auto`. */
-  overflow?: boolean
-  /** If true, the visualization should display below the node background. */
-  belowNode?: boolean
-  /** If true, the visualization should display below the toolbar buttons. */
-  belowToolbar?: boolean
-  toolbarOverflow?: boolean
-}>()
-
-const config = useVisualizationConfig()
-
-watchEffect(() => (config.isBelowToolbar = props.belowToolbar))
-
-const contentSize = computed(() => new Vec2(config.width, config.height))
-
-// Because ResizeHandles are applying the screen mouse movements, the bounds must be in `screen`
-// space.
-const clientBounds = computed({
-  get() {
-    return new Rect(Vec2.Zero, contentSize.value.scale(config.scale))
-  },
-  set(value) {
-    if (resizing.left || resizing.right) config.width = value.width / config.scale
-    if (resizing.bottom) config.height = value.height / config.scale
-  },
-})
-
-let resizing: BoundsSet = {}
-
-watch(contentSize, (newVal, oldVal) => {
-  if (!resizing.left) return
-  const delta = newVal.x - oldVal.x
-  if (delta !== 0)
-    config.nodePosition = new Vec2(config.nodePosition.x - delta, config.nodePosition.y)
-})
-
-const style = computed(() => {
-  return {
-    '--color-visualization-bg': config.background,
-    '--node-size-x': `${config.nodeSize.x}px`,
-    '--node-size-y': `${config.nodeSize.y}px`,
-    width: `${config.width}px`,
-    '--content-height': `${config.height}px`,
-  }
-})
-</script>
-
-<template>
-  <div
-    class="VisualizationContainer"
-    :class="{
-      'below-node': props.belowNode,
-      'below-toolbar': props.belowToolbar,
-    }"
-    :style="style"
-  >
-    <VisualizationPanel :overflow="overflow ?? false" :toolbarOverflow="toolbarOverflow ?? false">
-      <template v-if="$slots.toolbar" #toolbar><slot name="toolbar" /></template>
-      <template #default><slot /></template>
-    </VisualizationPanel>
-    <ResizeHandles
-      v-if="!config.isPreview"
-      v-model="clientBounds"
-      left
-      right
-      bottom
-      @update:resizing="resizing = $event"
-    />
-  </div>
-</template>
-
-<style scoped>
-.VisualizationContainer {
-  --resize-handle-inside: var(--visualization-resize-handle-inside);
-  --resize-handle-outside: var(--visualization-resize-handle-outside);
-  --resize-handle-radius: var(--radius-default);
-  --toolbar-reserved-height: 36px;
-  position: absolute;
-  border-radius: var(--radius-default);
-  background: var(--color-visualization-bg);
-}
-
-.VisualizationContainer {
-  padding-top: var(--node-size-y);
-  height: calc(var(--content-height) + var(--node-size-y));
-}
-
-.VisualizationContainer.below-node {
-  padding-top: var(--node-size-y);
-  height: calc(var(--content-height) + var(--node-size-y));
-}
-
-.VisualizationContainer.below-toolbar {
-  padding-top: var(--node-size-y);
-  height: calc(var(--content-height) + var(--node-size-y) + var(--toolbar-reserved-height));
-}
-</style>
diff --git a/app/gui2/src/components/VisualizationPanel.vue b/app/gui2/src/components/VisualizationPanel.vue
deleted file mode 100644
index 19af1b04b6fb..000000000000
--- a/app/gui2/src/components/VisualizationPanel.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script setup lang="ts">
-/** @file
- * Contains a visualization's toolbars and the visualization itself. The panel's size is determined by its enclosing
- * container (in fullscreen mode, this will be the fullscreen-container element).
- */
-
-import FullscreenButton from '@/components/FullscreenButton.vue'
-import SvgButton from '@/components/SvgButton.vue'
-import VisualizationSelector from '@/components/VisualizationSelector.vue'
-import WithFullscreenMode from '@/components/WithFullscreenMode.vue'
-import { isTriggeredByKeyboard } from '@/composables/events'
-import { useVisualizationConfig } from '@/providers/visualizationConfig'
-import { isQualifiedName, qnLastSegment } from '@/util/qualifiedName'
-import { computed, ref } from 'vue'
-
-const props = defineProps<{
-  overflow?: boolean
-  toolbarOverflow?: boolean
-}>()
-
-const config = useVisualizationConfig()
-
-function onWheel(event: WheelEvent) {
-  if (
-    event.currentTarget instanceof Element &&
-    (config.fullscreen ||
-      event.currentTarget.scrollWidth > event.currentTarget.clientWidth ||
-      event.currentTarget.scrollHeight > event.currentTarget.clientHeight)
-  ) {
-    event.stopPropagation()
-  }
-}
-
-const UNKNOWN_TYPE = 'Unknown'
-const nodeShortType = computed(() =>
-  config.nodeType != null && isQualifiedName(config.nodeType) ?
-    qnLastSegment(config.nodeType)
-  : UNKNOWN_TYPE,
-)
-
-const fullscreenAnimating = ref(false)
-
-const isSelectorVisible = ref(false)
-
-function hideSelector() {
-  requestAnimationFrame(() => (isSelectorVisible.value = false))
-}
-</script>
-
-<template>
-  <WithFullscreenMode
-    v-model:savedSize="config.savedSize"
-    :fullscreen="config.fullscreen"
-    @update:animating="fullscreenAnimating = $event"
-  >
-    <div
-      class="VisualizationPanel"
-      :class="{
-        fullscreen: config.fullscreen || fullscreenAnimating,
-        nonInteractive: config.isPreview,
-      }"
-      :style="{
-        '--color-visualization-bg': config.background,
-      }"
-    >
-      <div class="toolbars">
-        <div
-          v-if="!config.isPreview && !config.fullscreen"
-          class="toolbar"
-          :class="{ invisible: config.isCircularMenuVisible }"
-        >
-          <SvgButton name="eye" alt="Hide visualization" @click.stop="config.hide()" />
-        </div>
-        <div v-if="!config.isPreview" class="toolbar">
-          <FullscreenButton v-model="config.fullscreen" />
-          <div class="icon-container">
-            <SvgButton
-              :name="config.icon ?? 'columns_increasing'"
-              title="Visualization Selector"
-              @click.stop.prevent="
-                (!isSelectorVisible || isTriggeredByKeyboard($event)) &&
-                  (isSelectorVisible = !isSelectorVisible)
-              "
-            />
-            <Suspense>
-              <VisualizationSelector
-                v-if="isSelectorVisible"
-                :types="config.types"
-                :modelValue="config.currentType"
-                @hide="hideSelector"
-                @update:modelValue="(isSelectorVisible = false), config.updateType($event)"
-              />
-            </Suspense>
-          </div>
-        </div>
-        <div
-          v-if="$slots.toolbar && !config.isPreview"
-          class="visualization-defined-toolbars"
-          :class="{ overflow: props.toolbarOverflow }"
-        >
-          <div class="toolbar"><slot name="toolbar"></slot></div>
-        </div>
-        <div
-          class="after-toolbars node-type"
-          :title="config.nodeType ?? UNKNOWN_TYPE"
-          v-text="nodeShortType"
-        />
-      </div>
-      <div
-        class="content scrollable"
-        :class="{ overflow: props.overflow }"
-        @wheel.passive="onWheel"
-      >
-        <slot></slot>
-      </div>
-    </div>
-  </WithFullscreenMode>
-</template>
-
-<style scoped>
-.VisualizationPanel {
-  --permanent-toolbar-width: 240px;
-  color: var(--color-text);
-  cursor: default;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  &.fullscreen {
-    background: var(--color-visualization-bg);
-  }
-}
-
-.toolbars {
-  flex: 0;
-  transition-duration: 100ms;
-  transition-property: padding-left;
-}
-
-.content {
-  overflow: auto;
-  contain: strict;
-  height: 100%;
-}
-
-.toolbars {
-  width: 100%;
-  user-select: none;
-  margin-top: 4px;
-  display: flex;
-  gap: 4px;
-}
-
-.after-toolbars {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin-left: auto;
-  margin-right: 8px;
-  overflow: hidden;
-  width: calc(var(--node-size-x) - var(--permanent-toolbar-width));
-}
-
-.node-type {
-  font-weight: bold;
-}
-
-.toolbar {
-  position: relative;
-  display: flex;
-  border-radius: var(--radius-full);
-  gap: 12px;
-  padding: 8px;
-  z-index: 20;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    border-radius: var(--radius-full);
-    background: var(--color-app-bg);
-    backdrop-filter: var(--blur-app-bg);
-  }
-}
-
-.toolbar:not(:first-child):not(:has(> *)) {
-  display: none;
-}
-
-.visualization-defined-toolbars {
-  max-width: calc(100% - var(--permanent-toolbar-width));
-  overflow: hidden;
-}
-
-.toolbar > :deep(*) {
-  position: relative;
-}
-
-.overflow {
-  overflow: visible;
-}
-
-.nonInteractive {
-  pointer-events: none;
-}
-</style>
diff --git a/app/gui2/src/components/VisualizationSelector.vue b/app/gui2/src/components/VisualizationSelector.vue
index 3a11f32d465c..4dcb5319be3b 100644
--- a/app/gui2/src/components/VisualizationSelector.vue
+++ b/app/gui2/src/components/VisualizationSelector.vue
@@ -1,22 +1,17 @@
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
+import SelectionDropdown from '@/components/SelectionDropdown.vue'
 import { useVisualizationStore } from '@/stores/visualization'
-import { useAutoBlur } from '@/util/autoBlur'
-import { onMounted, ref } from 'vue'
-import { visIdentifierEquals, type VisualizationIdentifier } from 'ydoc-shared/yjsModel'
+import { computed } from 'vue'
+import { type VisualizationIdentifier } from 'ydoc-shared/yjsModel'
 
+const modelValue = defineModel<VisualizationIdentifier>({ required: true })
 const props = defineProps<{
   types: Iterable<VisualizationIdentifier>
-  modelValue: VisualizationIdentifier
 }>()
-const emit = defineEmits<{ hide: []; 'update:modelValue': [type: VisualizationIdentifier] }>()
 
 const visualizationStore = useVisualizationStore()
 
-const rootNode = ref<HTMLElement>()
-useAutoBlur(rootNode)
-
-function visIdLabel(id: VisualizationIdentifier) {
+function visLabel(id: VisualizationIdentifier) {
   switch (id.module.kind) {
     case 'Builtin':
       return id.name
@@ -27,91 +22,37 @@ function visIdLabel(id: VisualizationIdentifier) {
   }
 }
 
-function visIdKey(id: VisualizationIdentifier) {
+function visKey(id: VisualizationIdentifier) {
   const kindKey = id.module.kind === 'Library' ? `Library::${id.module.name}` : id.module.kind
   return `${kindKey}::${id.name}`
 }
 
-onMounted(() => setTimeout(() => rootNode.value?.querySelector('button')?.focus(), 1))
+const visualizationByKey = computed(() => {
+  const visualizations = new Map<string, VisualizationIdentifier>()
+  for (const type_ of props.types) visualizations.set(visKey(type_), type_)
+  return visualizations
+})
+
+const visualizationOptions = computed(() =>
+  Object.fromEntries(
+    Array.from(props.types, (vis) => [
+      visKey(vis),
+      {
+        icon: visualizationStore.icon(vis) ?? 'columns_increasing',
+        label: visLabel(vis),
+      },
+    ]),
+  ),
+)
 </script>
 
 <template>
-  <div
-    ref="rootNode"
+  <SelectionDropdown
+    :modelValue="visKey(modelValue)"
+    :options="visualizationOptions"
+    title="Visualization Selector"
     class="VisualizationSelector"
-    @focusout="$event.relatedTarget == null && emit('hide')"
-  >
-    <div class="background"></div>
-    <ul>
-      <li
-        v-for="type_ in props.types"
-        :key="visIdKey(type_)"
-        :class="{ selected: visIdentifierEquals(props.modelValue, type_) }"
-        class="clickable"
-        @click.stop="emit('update:modelValue', type_)"
-      >
-        <button>
-          <SvgIcon class="icon" :name="visualizationStore.icon(type_) ?? 'columns_increasing'" />
-          <span v-text="visIdLabel(type_)"></span>
-        </button>
-      </li>
-    </ul>
-  </div>
+    alwaysShowArrow
+    @update:modelValue="modelValue = visualizationByKey.get($event as string)!"
+  />
 </template>
-
-<style scoped>
-.VisualizationSelector {
-  /* Required for it to show above Mapbox's information button. */
-  z-index: 2;
-  user-select: none;
-  position: absolute;
-  border-radius: 16px;
-  top: 100%;
-  margin-top: 12px;
-  left: -12px;
-
-  &:before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 16px;
-    background: var(--color-app-bg);
-    backdrop-filter: var(--blur-app-bg);
-  }
-}
-
-.VisualizationSelector > * {
-  position: relative;
-}
-
-ul {
-  display: flex;
-  flex-flow: column;
-  gap: 2px;
-  list-style-type: none;
-  padding: 4px;
-}
-
-button {
-  width: 100%;
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  padding: 0 8px;
-  border-radius: 12px;
-  white-space: nowrap;
-
-  &.selected {
-    background: var(--color-menu-entry-selected-bg);
-  }
-
-  &:hover {
-    background: var(--color-menu-entry-hover-bg);
-  }
-
-  &:active {
-    background-color: var(--color-menu-entry-active-bg);
-  }
-}
-</style>
diff --git a/app/gui2/src/components/WithFullscreenMode.vue b/app/gui2/src/components/WithFullscreenMode.vue
index bd1558b35505..b9eb1490f879 100644
--- a/app/gui2/src/components/WithFullscreenMode.vue
+++ b/app/gui2/src/components/WithFullscreenMode.vue
@@ -22,8 +22,8 @@ const props = defineProps<{
  * - If the new component leaves fullscreen mode, its "return" to the dimensions of the original component will be
  *   animated.
  *
- * This approach is used when switching visualizations (which replaces the `VisualizationContainer` and its
- * `WithFullscreenMode` instance).
+ * This approach was previously used when switching visualizations (when each visualization had its own
+ * `VisualizationContainer` and `WithFullscreenMode` instance).
  */
 const savedSize = defineModel<SavedSize | undefined>('savedSize')
 const emit = defineEmits<{
@@ -99,15 +99,11 @@ export type SavedSize = Keyframe
 or used with `unrefElement`. -->
 <template>
   <div class="WithFullscreenMode fullsize">
-    <!-- Wait for the target to be ready. `Teleport` requires the target to exist before it is mounted, even if it is
-    initially `disabled`. -->
-    <template v-if="fullscreenContainer">
-      <Teleport :to="fullscreenContainer" :disabled="!active">
-        <div ref="content" class="fullsize" :class="{ active }">
-          <slot />
-        </div>
-      </Teleport>
-    </template>
+    <Teleport defer :disabled="!active" :to="fullscreenContainer">
+      <div ref="content" class="fullsize" :class="{ active }">
+        <slot />
+      </div>
+    </Teleport>
   </div>
 </template>
 
diff --git a/app/gui2/src/components/widgets/AgGridTableView.vue b/app/gui2/src/components/shared/AgGridTableView.vue
similarity index 93%
rename from app/gui2/src/components/widgets/AgGridTableView.vue
rename to app/gui2/src/components/shared/AgGridTableView.vue
index cca644b2bbeb..03531a0e2513 100644
--- a/app/gui2/src/components/widgets/AgGridTableView.vue
+++ b/app/gui2/src/components/shared/AgGridTableView.vue
@@ -8,29 +8,25 @@ import {
   tsvTableToEnsoExpression,
   writeClipboard,
 } from '@/components/GraphEditor/clipboard'
+import { TextFormatOptions } from '@/components/visualizations/TableVisualization.vue'
 import { useAutoBlur } from '@/util/autoBlur'
-import '@ag-grid-community/styles/ag-grid.css'
-import '@ag-grid-community/styles/ag-theme-alpine.css'
 import type {
   CellEditingStartedEvent,
   CellEditingStoppedEvent,
+  ColDef,
+  ColGroupDef,
   ColumnResizedEvent,
   FirstDataRenderedEvent,
+  GetRowIdFunc,
+  GridApi,
   GridReadyEvent,
   RowDataUpdatedEvent,
   RowEditingStartedEvent,
   RowEditingStoppedEvent,
-  SortChangedEvent,
-} from 'ag-grid-community'
-import type {
-  ColDef,
-  ColGroupDef,
-  GetRowIdFunc,
-  GridApi,
   RowHeightParams,
+  SortChangedEvent,
 } from 'ag-grid-enterprise'
 import { type ComponentInstance, reactive, ref, shallowRef, watch } from 'vue'
-import { TextFormatOptions } from '../visualizations/TableVisualization.vue'
 
 const DEFAULT_ROW_HEIGHT = 22
 
@@ -59,12 +55,12 @@ const gridApi = shallowRef<GridApi<TData>>()
 const popupParent = document.body
 useAutoBlur(() => grid.value?.$el)
 
-function onGridReady(event: GridReadyEvent) {
+function onGridReady(event: GridReadyEvent<TData>) {
   gridApi.value = event.api
 }
 
 function getRowHeight(params: RowHeightParams): number {
-  if (_props.textFormatOption === TextFormatOptions.Off) {
+  if (_props.textFormatOption === 'off') {
     return DEFAULT_ROW_HEIGHT
   }
   const rowData = Object.values(params.data)
@@ -94,15 +90,15 @@ watch(
 )
 
 function updateColumnWidths(event: FirstDataRenderedEvent | RowDataUpdatedEvent) {
-  if (event.columnApi == null) {
-    console.warn('AG Grid column API does not exist.')
+  if (event.api == null) {
+    console.warn('AG Grid API does not exist.')
     return
   }
-  const cols = event.columnApi.getAllGridColumns().filter((c) => {
+  const cols = event.api.getAllGridColumns().filter((c) => {
     const id = c.getColId()
     return id && !widths.has(id)
   })
-  event.columnApi.autoSizeColumns(cols)
+  event.api.autoSizeColumns(cols)
 }
 
 function lockColumnSize(e: ColumnResizedEvent) {
@@ -206,6 +202,8 @@ const { AgGridVue } = await import('ag-grid-vue3')
   />
 </template>
 
+<style src="@ag-grid-community/styles/ag-grid.css" />
+<style src="@ag-grid-community/styles/ag-theme-alpine.css" />
 <style scoped>
 .ag-theme-alpine {
   --ag-grid-size: 3px;
diff --git a/app/gui2/src/components/LoadingSpinner.vue b/app/gui2/src/components/shared/LoadingSpinner.vue
similarity index 100%
rename from app/gui2/src/components/LoadingSpinner.vue
rename to app/gui2/src/components/shared/LoadingSpinner.vue
diff --git a/app/gui2/src/components/visualizations/GeoMapVisualization.vue b/app/gui2/src/components/visualizations/GeoMapVisualization.vue
index 26a6f81bf751..73839ea40efc 100644
--- a/app/gui2/src/components/visualizations/GeoMapVisualization.vue
+++ b/app/gui2/src/components/visualizations/GeoMapVisualization.vue
@@ -88,8 +88,7 @@ declare var deck: typeof import('deck.gl')
 
 <script setup lang="ts">
 /// <reference types="@danmarshall/deckgl-typings" />
-import SvgButton from '@/components/SvgButton.vue'
-import { VisualizationContainer } from '@/util/visualizationBuiltins'
+import { useVisualizationConfig } from '@/util/visualizationBuiltins'
 import type { Deck } from 'deck.gl'
 import { computed, onUnmounted, ref, watchPostEffect } from 'vue'
 
@@ -122,6 +121,8 @@ const DEFAULT_MAP_ZOOM = 11
 const DEFAULT_MAX_MAP_ZOOM = 18
 const ACCENT_COLOR: Color = [78, 165, 253]
 
+const config = useVisualizationConfig()
+
 const dataPoints = ref<LocationWithPosition[]>([])
 const mapNode = ref<HTMLElement>()
 const latitude = ref(0)
@@ -410,18 +411,30 @@ function pushPoints(newPoints: Location[]) {
     }
   }
 }
+
+config.setToolbar([
+  {
+    icon: 'find',
+    onClick: () => {},
+  },
+  {
+    icon: 'path2',
+    onClick: () => {},
+  },
+  {
+    icon: 'geo_map_distance',
+    onClick: () => {},
+  },
+  {
+    icon: 'geo_map_pin',
+    onClick: () => {},
+  },
+])
+config.setToolbarOverlay(true)
 </script>
 
 <template>
-  <VisualizationContainer :overflow="true">
-    <template #toolbar>
-      <SvgButton name="find" />
-      <SvgButton name="path2" />
-      <SvgButton name="geo_map_distance" />
-      <SvgButton name="geo_map_pin" />
-    </template>
-    <div ref="mapNode" class="GeoMapVisualization" @pointerdown.stop @wheel.stop></div>
-  </VisualizationContainer>
+  <div ref="mapNode" class="GeoMapVisualization" @pointerdown.stop @wheel.stop></div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/HeatmapVisualization.vue b/app/gui2/src/components/visualizations/HeatmapVisualization.vue
index a9de2a758957..29f7ab8ab16c 100644
--- a/app/gui2/src/components/visualizations/HeatmapVisualization.vue
+++ b/app/gui2/src/components/visualizations/HeatmapVisualization.vue
@@ -41,7 +41,7 @@ interface Bucket {
 </script>
 
 <script setup lang="ts">
-import { VisualizationContainer, useVisualizationConfig } from '@/util/visualizationBuiltins'
+import { useVisualizationConfig } from '@/util/visualizationBuiltins'
 import { computed, ref, watchPostEffect } from 'vue'
 
 const d3 = await import('d3')
@@ -87,20 +87,8 @@ const fill = computed(() =>
     .domain([0, d3.max(buckets.value, (d) => d.value) ?? 1]),
 )
 
-const width = ref(Math.max(config.width ?? 0, config.nodeSize.x))
-watchPostEffect(() => {
-  width.value =
-    config.fullscreen ?
-      containerNode.value?.parentElement?.clientWidth ?? 0
-    : Math.max(config.width ?? 0, config.nodeSize.x)
-})
-const height = ref(config.height ?? (config.nodeSize.x * 3) / 4)
-watchPostEffect(() => {
-  height.value =
-    config.fullscreen ?
-      containerNode.value?.parentElement?.clientHeight ?? 0
-    : config.height ?? (config.nodeSize.x * 3) / 4
-})
+const width = computed(() => config.size.x)
+const height = computed(() => config.size.y)
 const boxWidth = computed(() => Math.max(0, width.value - MARGIN.left - MARGIN.right))
 const boxHeight = computed(() => Math.max(0, height.value - MARGIN.top - MARGIN.bottom))
 
@@ -212,17 +200,15 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <VisualizationContainer :belowToolbar="true">
-    <div ref="containerNode" class="HeatmapVisualization">
-      <svg :width="width" :height="height">
-        <g :transform="`translate(${MARGIN.left},${MARGIN.top})`">
-          <g ref="xAxisNode" class="label label-x" :transform="`translate(0, ${boxHeight})`"></g>
-          <g ref="yAxisNode" class="label label-y"></g>
-          <g ref="pointsNode"></g>
-        </g>
-      </svg>
-    </div>
-  </VisualizationContainer>
+  <div ref="containerNode" class="HeatmapVisualization">
+    <svg :width="width" :height="height">
+      <g :transform="`translate(${MARGIN.left},${MARGIN.top})`">
+        <g ref="xAxisNode" class="label label-x" :transform="`translate(0, ${boxHeight})`"></g>
+        <g ref="yAxisNode" class="label label-y"></g>
+        <g ref="pointsNode"></g>
+      </g>
+    </svg>
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/HistogramVisualization.vue b/app/gui2/src/components/visualizations/HistogramVisualization.vue
index a0f5149a5a84..4f4331a7adf8 100644
--- a/app/gui2/src/components/visualizations/HistogramVisualization.vue
+++ b/app/gui2/src/components/visualizations/HistogramVisualization.vue
@@ -1,9 +1,8 @@
 <script lang="ts">
-import SvgButton from '@/components/SvgButton.vue'
 import { useEvent } from '@/composables/events'
 import { getTextWidthBySizeAndFamily } from '@/util/measurement'
 import { defineKeybinds } from '@/util/shortcuts'
-import { VisualizationContainer, useVisualizationConfig } from '@/util/visualizationBuiltins'
+import { useVisualizationConfig } from '@/util/visualizationBuiltins'
 import { computed, ref, watch, watchEffect, watchPostEffect } from 'vue'
 
 export const name = 'Histogram'
@@ -246,20 +245,8 @@ const margin = computed(() => ({
   bottom: MARGIN + (axis.value?.x?.label ? AXIS_LABEL_HEIGHT : 0),
   left: MARGIN + (axis.value?.y?.label ? AXIS_LABEL_HEIGHT : 0),
 }))
-const width = ref(Math.max(config.width ?? 0, config.nodeSize.x))
-watchPostEffect(() => {
-  width.value =
-    config.fullscreen ?
-      containerNode.value?.parentElement?.clientWidth ?? 0
-    : Math.max(config.width ?? 0, config.nodeSize.x)
-})
-const height = ref(config.height ?? (config.nodeSize.x * 3) / 4)
-watchPostEffect(() => {
-  height.value =
-    config.fullscreen ?
-      containerNode.value?.parentElement?.clientHeight ?? 0
-    : config.height ?? (config.nodeSize.x * 3) / 4
-})
+const width = computed(() => config.size.x)
+const height = computed(() => config.size.y)
 const boxWidth = computed(() => Math.max(0, width.value - margin.value.left - margin.value.right))
 const boxHeight = computed(() => Math.max(0, height.value - margin.value.top - margin.value.bottom))
 const xLabelTop = computed(() => boxHeight.value + margin.value.bottom - AXIS_LABEL_HEIGHT / 2)
@@ -568,63 +555,70 @@ useEvent(document, 'click', endBrushing)
 useEvent(document, 'auxclick', endBrushing)
 useEvent(document, 'contextmenu', endBrushing)
 useEvent(document, 'scroll', endBrushing)
+
+config.setToolbar([
+  {
+    icon: 'show_all',
+    title: 'Fit All',
+    onClick: () => zoomToSelected(false),
+  },
+  {
+    icon: 'find',
+    title: 'Zoom to Selected',
+    onClick: () => zoomToSelected(true),
+  },
+])
 </script>
 
 <template>
-  <VisualizationContainer :belowToolbar="true">
-    <template #toolbar>
-      <SvgButton name="show_all" title="Fit All" @click="zoomToSelected(false)" />
-      <SvgButton name="find" title="Zoom to Selected" @click="zoomToSelected(true)" />
-    </template>
-    <div ref="containerNode" class="HistogramVisualization" @pointerdown.stop>
-      <svg :width="width" :height="height">
-        <rect
-          class="color-legend"
-          :width="COLOR_LEGEND_WIDTH"
-          :height="boxHeight"
-          :transform="`translate(${margin.left - COLOR_LEGEND_WIDTH}, ${margin.top})`"
-          :style="{ fill: 'url(#color-legend-gradient)' }"
-        />
-        <g :transform="`translate(${margin.left}, ${margin.top})`">
-          <defs>
-            <clipPath id="histogram-clip-path">
-              <rect :width="boxWidth" :height="boxHeight"></rect>
-            </clipPath>
-            <linearGradient
-              id="color-legend-gradient"
-              ref="colorLegendGradientNode"
-              x1="0%"
-              y1="100%"
-              x2="0%"
-              y2="0%"
-            ></linearGradient>
-          </defs>
-          <g ref="xAxisNode" class="axis-x" :transform="`translate(0, ${boxHeight})`"></g>
-          <g ref="yAxisNode" class="axis-y"></g>
-          <text
-            v-if="axis.x?.label"
-            class="label label-x"
-            text-anchor="end"
-            :x="xLabelLeft"
-            :y="xLabelTop"
-            v-text="axis.x?.label"
-          ></text>
-          <text
-            v-if="axis.y?.label"
-            class="label label-y"
-            text-anchor="end"
-            :x="yLabelLeft"
-            :y="yLabelTop"
-            v-text="axis.y?.label"
-          ></text>
-          <g ref="plotNode" clip-path="url(#histogram-clip-path)"></g>
-          <g ref="zoomNode" class="zoom">
-            <g ref="brushNode" class="brush"></g>
-          </g>
+  <div ref="containerNode" class="HistogramVisualization" @pointerdown.stop>
+    <svg :width="width" :height="height">
+      <rect
+        class="color-legend"
+        :width="COLOR_LEGEND_WIDTH"
+        :height="boxHeight"
+        :transform="`translate(${margin.left - COLOR_LEGEND_WIDTH}, ${margin.top})`"
+        :style="{ fill: 'url(#color-legend-gradient)' }"
+      />
+      <g :transform="`translate(${margin.left}, ${margin.top})`">
+        <defs>
+          <clipPath id="histogram-clip-path">
+            <rect :width="boxWidth" :height="boxHeight"></rect>
+          </clipPath>
+          <linearGradient
+            id="color-legend-gradient"
+            ref="colorLegendGradientNode"
+            x1="0%"
+            y1="100%"
+            x2="0%"
+            y2="0%"
+          ></linearGradient>
+        </defs>
+        <g ref="xAxisNode" class="axis-x" :transform="`translate(0, ${boxHeight})`"></g>
+        <g ref="yAxisNode" class="axis-y"></g>
+        <text
+          v-if="axis.x?.label"
+          class="label label-x"
+          text-anchor="end"
+          :x="xLabelLeft"
+          :y="xLabelTop"
+          v-text="axis.x?.label"
+        ></text>
+        <text
+          v-if="axis.y?.label"
+          class="label label-y"
+          text-anchor="end"
+          :x="yLabelLeft"
+          :y="yLabelTop"
+          v-text="axis.y?.label"
+        ></text>
+        <g ref="plotNode" clip-path="url(#histogram-clip-path)"></g>
+        <g ref="zoomNode" class="zoom">
+          <g ref="brushNode" class="brush"></g>
         </g>
-      </svg>
-    </div>
-  </VisualizationContainer>
+      </g>
+    </svg>
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/ImageBase64Visualization.vue b/app/gui2/src/components/visualizations/ImageBase64Visualization.vue
index 3fd70d8176a4..010844862fd2 100644
--- a/app/gui2/src/components/visualizations/ImageBase64Visualization.vue
+++ b/app/gui2/src/components/visualizations/ImageBase64Visualization.vue
@@ -10,7 +10,6 @@ interface Data {
 </script>
 
 <script setup lang="ts">
-import { VisualizationContainer } from '@/util/visualizationBuiltins'
 import { computed } from 'vue'
 
 const props = defineProps<{ data: Data }>()
@@ -23,11 +22,9 @@ const src = computed(
 </script>
 
 <template>
-  <VisualizationContainer :belowNode="true">
-    <div class="ImageVisualization">
-      <img :src="src" />
-    </div>
-  </VisualizationContainer>
+  <div class="ImageVisualization">
+    <img :src="src" />
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/JSONVisualization.vue b/app/gui2/src/components/visualizations/JSONVisualization.vue
index 4a4b6c7a1525..0818102eef1f 100644
--- a/app/gui2/src/components/visualizations/JSONVisualization.vue
+++ b/app/gui2/src/components/visualizations/JSONVisualization.vue
@@ -9,9 +9,10 @@ import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import JsonValueWidget from '@/components/visualizations/JSONVisualization/JsonValueWidget.vue'
 import { Ast } from '@/util/ast'
 import { Pattern } from '@/util/ast/match'
-import { useVisualizationConfig, VisualizationContainer } from '@/util/visualizationBuiltins'
+import { useVisualizationConfig } from '@/util/visualizationBuiltins'
+import { computed } from 'vue'
 
-const props = defineProps<{ data: unknown }>()
+const { data } = defineProps<{ data: unknown }>()
 
 const config = useVisualizationConfig()
 
@@ -19,7 +20,7 @@ type ConstructivePattern = (placeholder: Ast.Owned) => Ast.Owned
 
 const JSON_OBJECT_TYPE = 'Standard.Base.Data.Json.JS_Object'
 
-const isClickThroughEnabled = config.nodeType === JSON_OBJECT_TYPE
+const isClickThroughEnabled = computed(() => config.nodeType === JSON_OBJECT_TYPE)
 
 function projector(parentPattern: ConstructivePattern | undefined) {
   const style = {
@@ -55,15 +56,13 @@ function createProjection(path: (string | number)[][]) {
 </script>
 
 <template>
-  <VisualizationContainer :belowToolbar="true">
-    <div class="JSONVisualization">
-      <JsonValueWidget
-        :data="props.data"
-        :class="{ viewonly: !isClickThroughEnabled }"
-        @createProjection="createProjection"
-      />
-    </div>
-  </VisualizationContainer>
+  <div class="JSONVisualization">
+    <JsonValueWidget
+      :data="data"
+      :class="{ viewonly: !isClickThroughEnabled }"
+      @createProjection="createProjection"
+    />
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/LoadingErrorVisualization.vue b/app/gui2/src/components/visualizations/LoadingErrorVisualization.vue
index 0e3e743282dc..a360faa0051b 100644
--- a/app/gui2/src/components/visualizations/LoadingErrorVisualization.vue
+++ b/app/gui2/src/components/visualizations/LoadingErrorVisualization.vue
@@ -4,7 +4,6 @@ export const inputType = 'Any'
 </script>
 
 <script setup lang="ts">
-import { VisualizationContainer } from '@/util/visualizationBuiltins'
 import { watchEffect } from 'vue'
 
 const props = defineProps<{ data: { name: string; error: Error } }>()
@@ -13,27 +12,15 @@ watchEffect(() => console.error(props.data.error))
 </script>
 
 <template>
-  <VisualizationContainer :belowToolbar="true">
-    <div class="LoadingErrorVisualization">
-      <div>
-        <span>Could not load visualization '<span v-text="props.data.name"></span>':</span>
-        <span v-text="props.data.error.message"></span>
-      </div>
-    </div>
-  </VisualizationContainer>
+  <div class="LoadingErrorVisualization">
+    <div>Could not load visualization '<span v-text="props.data.name"></span>':</div>
+    <div v-text="props.data.error.message"></div>
+  </div>
 </template>
 
 <style scoped>
 .LoadingErrorVisualization {
   height: 100%;
-  display: grid;
-  place-items: center;
-}
-
-.LoadingErrorVisualization > div {
-  display: flex;
-  flex-flow: column;
-  place-items: center;
-  text-align: center;
+  padding: 0 1em;
 }
 </style>
diff --git a/app/gui2/src/components/visualizations/LoadingVisualization.vue b/app/gui2/src/components/visualizations/LoadingVisualization.vue
index a08bd7ecafc9..729c96cd55e9 100644
--- a/app/gui2/src/components/visualizations/LoadingVisualization.vue
+++ b/app/gui2/src/components/visualizations/LoadingVisualization.vue
@@ -1,28 +1,17 @@
-<script lang="ts">
-import LoadingSpinner from '@/components/LoadingSpinner.vue'
-import { VisualizationContainer } from '@/util/visualizationBuiltins'
-
-export const name = 'Loading'
-export const inputType = 'Any'
-</script>
-
 <script setup lang="ts">
-const _props = defineProps<{ data: unknown }>()
+import LoadingSpinner from '@/components/shared/LoadingSpinner.vue'
 </script>
 
 <template>
-  <VisualizationContainer>
-    <div class="LoadingVisualization">
-      <LoadingSpinner />
-    </div>
-  </VisualizationContainer>
+  <div class="LoadingVisualization">
+    <LoadingSpinner />
+  </div>
 </template>
 
 <style scoped>
 .LoadingVisualization {
   display: flex;
   height: 100%;
-  padding-top: 30px;
   place-content: center;
   place-items: center;
   overflow: clip;
diff --git a/app/gui2/src/components/visualizations/SQLVisualization.vue b/app/gui2/src/components/visualizations/SQLVisualization.vue
index 2293cab10aa4..3316ecf5d8d8 100644
--- a/app/gui2/src/components/visualizations/SQLVisualization.vue
+++ b/app/gui2/src/components/visualizations/SQLVisualization.vue
@@ -37,7 +37,6 @@ interface Error {
 
 <script setup lang="ts">
 import { DEFAULT_THEME, type RGBA, type Theme } from '@/components/visualizations/builtins'
-import { VisualizationContainer } from '@/util/visualizationBuiltins'
 import { computed } from 'vue'
 const sqlFormatter = await import('sql-formatter')
 
@@ -123,13 +122,11 @@ function renderRegularInterpolation(value: string, fgColor: RGBA, bgColor: RGBA)
 </script>
 
 <template>
-  <VisualizationContainer :belowToolbar="true">
-    <div class="sql-visualization scrollable">
-      <pre v-if="data.error" class="sql" v-text="data.error"></pre>
-      <!-- eslint-disable-next-line vue/no-v-html This is SAFE, beause it is not user input. -->
-      <pre v-else class="sql" v-html="formatted"></pre>
-    </div>
-  </VisualizationContainer>
+  <div class="sql-visualization scrollable">
+    <pre v-if="data.error" class="sql" v-text="data.error"></pre>
+    <!-- eslint-disable-next-line vue/no-v-html This is SAFE, beause it is not user input. -->
+    <pre v-else class="sql" v-html="formatted"></pre>
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/ScatterplotVisualization.vue b/app/gui2/src/components/visualizations/ScatterplotVisualization.vue
index 9f1afe8ac8ea..39e866004ff5 100644
--- a/app/gui2/src/components/visualizations/ScatterplotVisualization.vue
+++ b/app/gui2/src/components/visualizations/ScatterplotVisualization.vue
@@ -1,11 +1,11 @@
 <script lang="ts">
-import SvgButton from '@/components/SvgButton.vue'
 import { useEvent } from '@/composables/events'
 import { useVisualizationConfig } from '@/providers/visualizationConfig'
 import { Ast } from '@/util/ast'
 import { tryNumberToEnso } from '@/util/ast/abstract'
+import { Pattern } from '@/util/ast/match'
 import { getTextWidthBySizeAndFamily } from '@/util/measurement'
-import { VisualizationContainer, defineKeybinds } from '@/util/visualizationBuiltins'
+import { defineKeybinds } from '@/util/visualizationBuiltins'
 import { computed, ref, watch, watchEffect, watchPostEffect } from 'vue'
 
 export const name = 'Scatter Plot'
@@ -54,7 +54,10 @@ interface Data {
   focus: Focus | undefined
   points: PointsConfiguration
   data: Point[]
+  isTimeSeries: boolean
+  x_value_type: string
   is_multi_series?: boolean
+  get_row_method: string
 }
 
 interface Focus {
@@ -64,13 +67,14 @@ interface Focus {
 }
 
 interface Point {
-  x: number
+  x: number | DateObj | Date
   y: number
   label?: string
   color?: string
   shape?: string
   size?: number
   series?: string
+  row_number: number
 }
 
 interface PointsConfiguration {
@@ -80,6 +84,7 @@ interface PointsConfiguration {
 enum ScaleType {
   Linear = 'linear',
   Logarithmic = 'logarithmic',
+  Time = 'time',
 }
 
 interface AxisConfiguration {
@@ -97,15 +102,21 @@ interface Color {
   green: number
   blue: number
 }
+
+interface DateObj {
+  day?: number
+  month?: number
+  year?: number
+  hour?: number
+  minute?: number
+  second?: number
+}
 </script>
 
 <script setup lang="ts">
 const d3 = await import('d3')
 
 const props = defineProps<{ data: Partial<Data> | number[] }>()
-const emit = defineEmits<{
-  'update:preprocessor': [module: string, method: string, ...args: string[]]
-}>()
 
 const config = useVisualizationConfig()
 
@@ -132,27 +143,51 @@ const SHAPE_TO_SYMBOL: Record<string, d3.SymbolType> = {
   triangle: d3.symbolTriangle,
 }
 
-const SCALE_TO_D3_SCALE: Record<ScaleType, () => d3.ScaleContinuousNumeric<number, number>> = {
-  [ScaleType.Linear]: () => d3.scaleLinear(),
-  [ScaleType.Logarithmic]: () => d3.scaleLog(),
+const createDateTime = (x: DateObj) => {
+  const dateTime = new Date()
+  if (x.day != null) dateTime.setDate(x.day)
+  if (x.month != null) dateTime.setMonth(x.month)
+  if (x.year != null) dateTime.setFullYear(x.year)
+  if (x.hour != null) dateTime.setHours(x.hour)
+  if (x.minute != null) dateTime.setMinutes(x.minute)
+  if (x.second != null) dateTime.setSeconds(x.second)
+  return dateTime
 }
 
 const data = computed<Data>(() => {
   let rawData = props.data
   const unfilteredData =
-    Array.isArray(rawData) ? rawData.map((y, index) => ({ x: index, y })) : rawData.data ?? []
-  const data: Point[] = unfilteredData.filter(
-    (point) =>
-      typeof point.x === 'number' &&
-      !Number.isNaN(point.x) &&
-      typeof point.y === 'number' &&
-      !Number.isNaN(point.y),
-  )
+    Array.isArray(rawData) ?
+      // eslint-disable-next-line camelcase
+      rawData.map((y, index) => ({ x: index, y, row_number: index }))
+    : rawData.data ?? []
+  let data: Point[]
+  // eslint-disable-next-line camelcase
+  const isTimeSeries: boolean =
+    'x_value_type' in rawData ?
+      rawData.x_value_type === 'Time' ||
+      rawData.x_value_type === 'Date' ||
+      rawData.x_value_type === 'Date_Time'
+    : false
+  // eslint-disable-next-line camelcase
+  if (isTimeSeries) {
+    data = unfilteredData
+      .filter((point) => typeof point.y === 'number' && !Number.isNaN(point.y))
+      .map((point) => ({ ...point, x: createDateTime(point.x as DateObj) }))
+  } else {
+    data = unfilteredData.filter(
+      (point) =>
+        typeof point.x === 'number' &&
+        !Number.isNaN(point.x) &&
+        typeof point.y === 'number' &&
+        !Number.isNaN(point.y),
+    )
+  }
   if (Array.isArray(rawData)) {
     rawData = {}
   }
   const axis: AxesConfiguration = rawData.axis ?? {
-    x: { label: '', scale: ScaleType.Linear },
+    x: { label: '', scale: isTimeSeries ? ScaleType.Time : ScaleType.Linear },
     y: { label: '', scale: ScaleType.Linear },
   }
   const points = rawData.points ?? { labels: 'visible' }
@@ -160,7 +195,20 @@ const data = computed<Data>(() => {
   // eslint-disable-next-line camelcase
   const is_multi_series: boolean = !!rawData.is_multi_series
   // eslint-disable-next-line camelcase
-  return { axis, points, data, focus, is_multi_series }
+  const get_row_method: string = rawData.get_row_method || 'get_row'
+  return {
+    axis,
+    points,
+    data,
+    focus,
+    // eslint-disable-next-line camelcase
+    is_multi_series,
+    // eslint-disable-next-line camelcase
+    x_value_type: rawData.x_value_type || '',
+    // eslint-disable-next-line camelcase
+    get_row_method,
+    isTimeSeries,
+  }
 })
 
 const containerNode = ref<HTMLElement>()
@@ -183,11 +231,16 @@ const brushExtent = ref<d3.BrushSelection>()
 const limit = ref(DEFAULT_LIMIT)
 const focus = ref<Focus>()
 const shouldAnimate = ref(false)
-const xDomain = ref([0, 1])
-const yDomain = ref([0, 1])
+const xDomain = ref<number[] | Date[]>([0, 1])
+const yDomain = ref<number[] | Date[]>([0, 1])
 const selectionEnabled = ref(false)
 
 const isBrushing = computed(() => brushExtent.value != null)
+
+function axisD3Scale(axis: AxisConfiguration | undefined) {
+  return axis?.scale === ScaleType.Logarithmic ? d3.scaleLog() : d3.scaleLinear()
+}
+
 const xScale = computed(() =>
   axisD3Scale(data.value.axis.x).domain(xDomain.value).range([0, boxWidth.value]),
 )
@@ -195,6 +248,8 @@ const yScale = computed(() =>
   axisD3Scale(data.value.axis.y).domain(yDomain.value).range([boxHeight.value, 0]),
 )
 
+const xScaleTime = computed(() => d3.scaleTime().domain(xDomain.value).range([0, boxWidth.value]))
+
 const symbol: d3.Symbol<unknown, Point> = d3.symbol()
 
 const animationDuration = computed(() => (shouldAnimate.value ? ANIMATION_DURATION_MS : 0))
@@ -211,21 +266,22 @@ const margin = computed(() => {
     return { top: 10, right: 10, bottom: 35, left: 55 }
   }
 })
-const width = computed(() =>
-  config.fullscreen ?
-    containerNode.value?.parentElement?.clientWidth ?? 0
-  : Math.max(config.width ?? 0, config.nodeSize.x),
-)
-
-const height = computed(() =>
-  config.fullscreen ?
-    containerNode.value?.parentElement?.clientHeight ?? 0
-  : config.height ?? (config.nodeSize.x * 3) / 4,
-)
+const width = computed(() => config.size.x)
+const height = computed(() => config.size.y)
 
 const boxWidth = computed(() => Math.max(0, width.value - margin.value.left - margin.value.right))
 const boxHeight = computed(() => Math.max(0, height.value - margin.value.top - margin.value.bottom))
-const xTicks = computed(() => boxWidth.value / 40)
+const xTicks = computed(() => {
+  switch (data.value.x_value_type) {
+    case 'Time':
+    case 'Date':
+    case 'Date_Time':
+      return boxWidth.value / 80
+    default:
+      return boxWidth.value / 40
+  }
+})
+
 const yTicks = computed(() => boxHeight.value / 20)
 const xLabelLeft = computed(
   () =>
@@ -241,12 +297,21 @@ const yLabelLeft = computed(
 )
 const yLabelTop = computed(() => -margin.value.left + 15)
 const showYLabelText = computed(() => !data.value.is_multi_series)
+const xTickFormat = computed(() => {
+  switch (data.value.x_value_type) {
+    case 'Time':
+      return '%H:%M:%S'
+    case 'Date':
+      return '%d/%m/%Y'
+    default:
+      return '%d/%m/%Y %H:%M:%S'
+  }
+})
 
 watchEffect(() => {
   const boundsExpression =
     bounds.value != null ? Ast.Vector.tryBuild(bounds.value, tryNumberToEnso) : undefined
-  emit(
-    'update:preprocessor',
+  config.setPreprocessor(
     'Standard.Visualization.Scatter_Plot',
     'process_to_json_text',
     boundsExpression?.code() ?? 'Nothing',
@@ -272,15 +337,14 @@ const extremesAndDeltas = computed(() => {
     const allYValues = series.flatMap((s) =>
       data.value.data.map((d) => d[s as keyof Point]),
     ) as number[]
-
     yMin = Math.min(...allYValues)
     yMax = Math.max(...allYValues)
   } else {
     ;[yMin = 0, yMax = 0] = d3.extent(data.value.data, (point) => point.y)
   }
 
-  const [xMin = 0, xMax = 0] = d3.extent(data.value.data, (point) => point.x)
-  const dx = xMax - xMin
+  const [xMin = 0, xMax = 0] = d3.extent(data.value.data, (point) => point.x as number)
+  const dx = Number(xMax) - Number(xMin)
   const dy = yMax - yMin
   const paddingX = 0.1 * dx
   const paddingY = 0.1 * dy
@@ -441,16 +505,6 @@ function matchShape(d: Point) {
   return d.shape != null ? SHAPE_TO_SYMBOL[d.shape] ?? d3.symbolCircle : d3.symbolCircle
 }
 
-/** Construct either a linear or a logarithmic D3 scale.
- *
- * The scale kind is selected depending on update contents.
- *
- * @param axis Axis information as received in the visualization update.
- * @returns D3 scale. */
-function axisD3Scale(axis: AxisConfiguration | undefined) {
-  return axis?.scale != null ? SCALE_TO_D3_SCALE[axis.scale]() : d3.scaleLinear()
-}
-
 watchEffect(() => {
   // Update the axes in d3.
   const { xMin, xMax, yMin, yMax, paddingX, paddingY, dx, dy } = extremesAndDeltas.value
@@ -461,7 +515,7 @@ watchEffect(() => {
     xDomain.value = [focus_.x - newPaddingX, focus_.x + newPaddingX]
     yDomain.value = [focus_.y - newPaddingY, focus_.y + newPaddingY]
   } else {
-    xDomain.value = [xMin - paddingX, xMax + paddingX]
+    xDomain.value = [Number(xMin) - paddingX, Number(xMax) + paddingX]
     yDomain.value = [yMin - paddingY, yMax + paddingY]
   }
 })
@@ -472,12 +526,16 @@ watchEffect(() => {
 
 // === Update x axis ===
 
-watchPostEffect(() =>
-  d3XAxis.value
-    .transition()
-    .duration(animationDuration.value)
-    .call(d3.axisBottom(xScale.value).ticks(xTicks.value)),
-)
+watchPostEffect(() => {
+  const xCallVal =
+    data.value.isTimeSeries ?
+      d3
+        .axisBottom<Date>(xScaleTime.value)
+        .ticks(xTicks.value)
+        .tickFormat(d3.timeFormat(xTickFormat.value))
+    : d3.axisBottom(xScale.value).ticks(xTicks.value)
+  return d3XAxis.value.transition().duration(animationDuration.value).call(xCallVal)
+})
 
 // === Update y axis ===
 
@@ -494,6 +552,7 @@ function getPlotData(data: Data) {
     const series = Object.keys(axis).filter((s) => s != 'x')
     const transformedData = series.flatMap((s) =>
       data.data.map((d) => ({
+        ...d,
         x: d.x,
         y: d[s as keyof Point],
         series: s,
@@ -504,6 +563,42 @@ function getPlotData(data: Data) {
   return data.data
 }
 
+function getAstPattern(selector?: number, action?: string) {
+  if (action && selector != null) {
+    return Pattern.new((ast) =>
+      Ast.App.positional(
+        Ast.PropertyAccess.new(ast.module, ast, Ast.identifier(action)!),
+        Ast.tryNumberToEnso(selector, ast.module)!,
+      ),
+    )
+  }
+}
+
+function createNode(rowNumber: number) {
+  const selector = data.value.get_row_method
+  const pattern = getAstPattern(rowNumber, selector)
+  if (pattern) {
+    config.createNodes({
+      content: pattern,
+      commit: true,
+    })
+  }
+}
+
+function formatXPoint(x: Date | number | DateObj) {
+  if (data.value.isTimeSeries && x instanceof Date) {
+    switch (data.value.x_value_type) {
+      case 'Time':
+        return x.toTimeString()
+      case 'Date':
+        return x.toDateString()
+      default:
+        return x.toString()
+    }
+  }
+  return x
+}
+
 function getTooltipMessage(point: Point) {
   if (data.value.is_multi_series) {
     const axis = data.value.axis
@@ -511,15 +606,15 @@ function getTooltipMessage(point: Point) {
       point.series && point.series in axis ?
         axis[point.series as keyof AxesConfiguration].label
       : ''
-    return `${point.x}, ${point.y}, ${label}`
+    return `${formatXPoint(point.x)}, ${point.y}, ${label}- Double click to inspect point`
   }
-  return `${point.x}, ${point.y}`
+  return `${formatXPoint(point.x)}, ${point.y}- Double click to inspect point`
 }
 
 // === Update contents ===
 
 watchPostEffect(() => {
-  const xScale_ = xScale.value
+  const xScale_ = data.value.isTimeSeries ? xScaleTime.value : xScale.value
   const yScale_ = yScale.value
   const plotData = getPlotData(data.value) as Point[]
   const series = Object.keys(data.value.axis).filter((s) => s != 'x')
@@ -537,14 +632,17 @@ watchPostEffect(() => {
     .call((data) => {
       return data.append('title').text((d) => getTooltipMessage(d))
     })
+    .on('dblclick', (d) => {
+      createNode(d.srcElement.__data__.row_number)
+    })
     .transition()
     .duration(animationDuration.value)
     .attr(
       'd',
-      symbol.type(matchShape).size((d) => (d.size ?? 1.0) * SIZE_SCALE_MULTIPLER),
+      symbol.type(matchShape).size((d) => (d.size ?? 0.15) * SIZE_SCALE_MULTIPLER),
     )
     .style('fill', (d) => colorScale(d.series || ''))
-    .attr('transform', (d) => `translate(${xScale_(d.x)}, ${yScale_(d.y)})`)
+    .attr('transform', (d) => `translate(${xScale_(Number(d.x))}, ${yScale_(d.y)})`)
   if (data.value.points.labels === VISIBLE_POINTS) {
     d3Points.value
       .selectAll<SVGPathElement, unknown>('text')
@@ -553,9 +651,12 @@ watchPostEffect(() => {
       .transition()
       .duration(animationDuration.value)
       .text((d) => d.label ?? '')
-      .attr('x', (d) => xScale_(d.x) + POINT_LABEL_PADDING_X_PX)
+      .attr('x', (d) => xScale_(Number(d.x)) + POINT_LABEL_PADDING_X_PX)
       .attr('y', (d) => yScale_(d.y) + POINT_LABEL_PADDING_Y_PX)
   }
+})
+
+watchPostEffect(() => {
   if (data.value.is_multi_series) {
     const seriesLabels = Object.keys(data.value.axis)
       .filter((s) => s != 'x')
@@ -571,9 +672,10 @@ watchPostEffect(() => {
       .range(d3.schemeCategory10)
       .domain(seriesLabels)
 
-    const legend = d3Legend.value
+    d3Legend.value.selectAll('circle').remove()
+    d3Legend.value.selectAll('text').remove()
 
-    legend
+    d3Legend.value
       .selectAll('dots')
       .data(seriesLabels)
       .enter()
@@ -585,7 +687,7 @@ watchPostEffect(() => {
       .attr('r', 6)
       .style('fill', (d) => color(d) || DEFAULT_FILL_COLOR)
 
-    legend
+    d3Legend.value
       .selectAll('labels')
       .data(seriesLabels)
       .enter()
@@ -629,8 +731,8 @@ function zoomToSelected(override?: boolean) {
     bounds.value = undefined
     limit.value = DEFAULT_LIMIT
     xDomain.value = [
-      extremesAndDeltas.value.xMin - extremesAndDeltas.value.paddingX,
-      extremesAndDeltas.value.xMax + extremesAndDeltas.value.paddingX,
+      Number(extremesAndDeltas.value.xMin) - extremesAndDeltas.value.paddingX,
+      Number(extremesAndDeltas.value.xMax) + extremesAndDeltas.value.paddingX,
     ]
     yDomain.value = [
       extremesAndDeltas.value.yMin - extremesAndDeltas.value.paddingY,
@@ -658,59 +760,62 @@ function zoomToSelected(override?: boolean) {
 }
 
 useEvent(document, 'keydown', bindings.handler({ zoomToSelected: () => zoomToSelected() }))
+
+config.setToolbar([
+  {
+    icon: 'select',
+    title: 'Enable Selection',
+    toggle: selectionEnabled,
+  },
+  {
+    icon: 'show_all',
+    title: 'Fit All',
+    onClick: () => zoomToSelected(false),
+  },
+  {
+    icon: 'find',
+    title: 'Zoom to Selected',
+    disabled: () => brushExtent.value == null,
+    onClick: zoomToSelected,
+  },
+])
 </script>
 
 <template>
-  <VisualizationContainer :belowToolbar="true">
-    <template #toolbar>
-      <SvgButton
-        name="add"
-        title="Enable Selection"
-        @click="selectionEnabled = !selectionEnabled"
-      />
-      <SvgButton name="show_all" title="Fit All" @click.stop="zoomToSelected(false)" />
-      <SvgButton
-        name="zoom"
-        title="Zoom to Selected"
-        :disabled="brushExtent == null"
-        @click.stop="zoomToSelected"
-      />
-    </template>
-    <div ref="containerNode" class="ScatterplotVisualization">
-      <svg :width="width" :height="height">
-        <g ref="legendNode"></g>
-        <g :transform="`translate(${margin.left}, ${margin.top})`">
-          <defs>
-            <clipPath id="clip">
-              <rect :width="boxWidth" :height="boxHeight"></rect>
-            </clipPath>
-          </defs>
-          <g ref="xAxisNode" class="axis-x" :transform="`translate(0, ${boxHeight})`"></g>
-          <g ref="yAxisNode" class="axis-y"></g>
-          <text
-            v-if="data.axis.x.label"
-            class="label label-x"
-            text-anchor="end"
-            :x="xLabelLeft"
-            :y="xLabelTop"
-            v-text="data.axis.x.label"
-          ></text>
-          <text
-            v-if="showYLabelText"
-            class="label label-y"
-            text-anchor="end"
-            :x="yLabelLeft"
-            :y="yLabelTop"
-            v-text="data.axis.y.label"
-          ></text>
-          <g ref="pointsNode" clip-path="url(#clip)"></g>
-          <g ref="zoomNode" class="zoom" :width="boxWidth" :height="boxHeight" fill="none">
-            <g ref="brushNode" class="brush"></g>
-          </g>
+  <div ref="containerNode" class="ScatterplotVisualization">
+    <svg :width="width" :height="height">
+      <g ref="legendNode"></g>
+      <g :transform="`translate(${margin.left}, ${margin.top})`">
+        <defs>
+          <clipPath id="clip">
+            <rect :width="boxWidth" :height="boxHeight"></rect>
+          </clipPath>
+        </defs>
+        <g ref="xAxisNode" class="axis-x" :transform="`translate(0, ${boxHeight})`"></g>
+        <g ref="yAxisNode" class="axis-y"></g>
+        <text
+          v-if="data.axis.x.label"
+          class="label label-x"
+          text-anchor="end"
+          :x="xLabelLeft"
+          :y="xLabelTop"
+          v-text="data.axis.x.label"
+        ></text>
+        <text
+          v-if="showYLabelText"
+          class="label label-y"
+          text-anchor="end"
+          :x="yLabelLeft"
+          :y="yLabelTop"
+          v-text="data.axis.y.label"
+        ></text>
+        <g ref="pointsNode" clip-path="url(#clip)"></g>
+        <g ref="zoomNode" class="zoom" :width="boxWidth" :height="boxHeight" fill="none">
+          <g ref="brushNode" class="brush"></g>
         </g>
-      </svg>
-    </div>
-  </VisualizationContainer>
+      </g>
+    </svg>
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/TableVisualization.vue b/app/gui2/src/components/visualizations/TableVisualization.vue
index 2ac0b79caf0d..0e9161452fa5 100644
--- a/app/gui2/src/components/visualizations/TableVisualization.vue
+++ b/app/gui2/src/components/visualizations/TableVisualization.vue
@@ -1,19 +1,17 @@
 <script lang="ts">
 import icons from '@/assets/icons.svg'
-import { default as TableVizToolbar, type SortModel } from '@/components/TableVizToolbar.vue'
-import AgGridTableView from '@/components/widgets/AgGridTableView.vue'
+import AgGridTableView from '@/components/shared/AgGridTableView.vue'
+import { SortModel, useTableVizToolbar } from '@/components/visualizations/tableVizToolbar'
 import { Ast } from '@/util/ast'
 import { Pattern } from '@/util/ast/match'
-import { VisualizationContainer, useVisualizationConfig } from '@/util/visualizationBuiltins'
-import '@ag-grid-community/styles/ag-grid.css'
-import '@ag-grid-community/styles/ag-theme-alpine.css'
+import { useVisualizationConfig } from '@/util/visualizationBuiltins'
 import type {
   CellClassParams,
   CellClickedEvent,
+  ColDef,
   ICellRendererParams,
   SortChangedEvent,
-} from 'ag-grid-community'
-import type { ColDef } from 'ag-grid-enterprise'
+} from 'ag-grid-enterprise'
 import { computed, onMounted, ref, shallowRef, watchEffect, type Ref } from 'vue'
 
 export const name = 'Table'
@@ -83,18 +81,11 @@ interface UnknownTable {
   link_value_type: string
 }
 
-export enum TextFormatOptions {
-  Partial,
-  On,
-  Off,
-}
+export type TextFormatOptions = 'full' | 'partial' | 'off'
 </script>
 
 <script setup lang="ts">
 const props = defineProps<{ data: Data }>()
-const emit = defineEmits<{
-  'update:preprocessor': [module: string, method: string, ...args: string[]]
-}>()
 const config = useVisualizationConfig()
 
 const INDEX_FIELD_NAME = '#'
@@ -133,11 +124,7 @@ const defaultColDef: Ref<ColDef> = ref({
 const rowData = ref<Record<string, any>[]>([])
 const columnDefs: Ref<ColDef[]> = ref([])
 
-const textFormatterSelected = ref<TextFormatOptions>(TextFormatOptions.Partial)
-
-const updateTextFormat = (option: TextFormatOptions) => {
-  textFormatterSelected.value = option
-}
+const textFormatterSelected = ref<TextFormatOptions>('partial')
 
 const isRowCountSelectorVisible = computed(() => rowCount.value >= 1000)
 
@@ -223,7 +210,7 @@ function formatText(params: ICellRendererParams) {
       (url: string) => `<a href="${url}" target="_blank" class="link">${url}</a>`,
     )
 
-  if (textFormatterSelected.value === TextFormatOptions.Off) {
+  if (textFormatterSelected.value === 'off') {
     return htmlEscaped.replace(/^\s+|\s+$/g, '&nbsp;')
   }
 
@@ -239,7 +226,7 @@ function formatText(params: ICellRendererParams) {
   }
 
   const replaceSpaces =
-    textFormatterSelected.value === TextFormatOptions.On ?
+    textFormatterSelected.value === 'full' ?
       htmlEscaped.replaceAll(' ', '<span style="color: #df8800">&#183;</span>')
     : htmlEscaped.replace(/ \s+|^ +| +$/g, function (match: string) {
         return `<span style="color: #df8800">${match.replaceAll(' ', '&#183;')}</span>`
@@ -251,13 +238,12 @@ function formatText(params: ICellRendererParams) {
   )
 
   const renderOtherWhitespace = (match: string) => {
-    return textFormatterSelected.value === TextFormatOptions.On && match != ' ' ?
+    return textFormatterSelected.value === 'full' && match != ' ' ?
         '<span style="color: #df8800">&#9744;</span>'
       : match
   }
   const newString = replaceReturns.replace(/[\s]/g, function (match: string) {
-    const mapping =
-      textFormatterSelected.value === TextFormatOptions.On ? fullMappings : partialMappings
+    const mapping = textFormatterSelected.value === 'full' ? fullMappings : partialMappings
     return mapping[match as keyof typeof mapping] || renderOtherWhitespace(match)
   })
   return `<span > ${newString} <span>`
@@ -266,8 +252,7 @@ function formatText(params: ICellRendererParams) {
 function setRowLimit(newRowLimit: number) {
   if (newRowLimit !== rowLimit.value) {
     rowLimit.value = newRowLimit
-    emit(
-      'update:preprocessor',
+    config.setPreprocessor(
       'Standard.Visualization.Table.Visualization',
       'prepare_visualization',
       newRowLimit.toString(),
@@ -602,56 +587,60 @@ function checkSortAndFilter(e: SortChangedEvent) {
 onMounted(() => {
   setRowLimit(1000)
 })
+
+// ===============
+// === Toolbar ===
+// ===============
+
+config.setToolbar(
+  useTableVizToolbar({
+    textFormatterSelected,
+    filterModel,
+    sortModel,
+    isDisabled: () => !isCreateNodeEnabled.value,
+    isFilterSortNodeEnabled,
+    createNodes: config.createNodes,
+  }),
+)
 </script>
 
 <template>
-  <VisualizationContainer :belowToolbar="true" :overflow="true" :toolbarOverflow="true">
-    <template #toolbar>
-      <TableVizToolbar
-        :filterModel="filterModel"
-        :sortModel="sortModel"
-        :isDisabled="!isCreateNodeEnabled"
-        :isFilterSortNodeEnabled="isFilterSortNodeEnabled"
-        @changeFormat="(i) => updateTextFormat(i)"
-      />
-    </template>
-    <div ref="rootNode" class="TableVisualization" @wheel.stop @pointerdown.stop>
-      <div class="table-visualization-status-bar">
-        <select
-          v-if="isRowCountSelectorVisible"
-          @change="setRowLimit(Number(($event.target as HTMLOptionElement).value))"
-        >
-          <option
-            v-for="limit in selectableRowLimits"
-            :key="limit"
-            :value="limit"
-            v-text="limit"
-          ></option>
-        </select>
-        <template v-if="showRowCount">
-          <span
-            v-if="isRowCountSelectorVisible && isTruncated"
-            v-text="` of ${rowCount} rows (Sorting/Filtering disabled).`"
-          ></span>
-          <span v-else-if="isRowCountSelectorVisible" v-text="' rows.'"></span>
-          <span v-else-if="rowCount === 1" v-text="'1 row.'"></span>
-          <span v-else v-text="`${rowCount} rows.`"></span>
-        </template>
-      </div>
-      <!-- TODO[ao]: Suspence in theory is not needed here (the entire visualization is inside
-       suspense), but for some reason it causes reactivity loop - see https://github.com/enso-org/enso/issues/10782 -->
-      <Suspense>
-        <AgGridTableView
-          class="scrollable grid"
-          :columnDefs="columnDefs"
-          :rowData="rowData"
-          :defaultColDef="defaultColDef"
-          :textFormatOption="textFormatterSelected"
-          @sortOrFilterUpdated="(e) => checkSortAndFilter(e)"
-        />
-      </Suspense>
+  <div ref="rootNode" class="TableVisualization" @wheel.stop @pointerdown.stop>
+    <div class="table-visualization-status-bar">
+      <select
+        v-if="isRowCountSelectorVisible"
+        @change="setRowLimit(Number(($event.target as HTMLOptionElement).value))"
+      >
+        <option
+          v-for="limit in selectableRowLimits"
+          :key="limit"
+          :value="limit"
+          v-text="limit"
+        ></option>
+      </select>
+      <template v-if="showRowCount">
+        <span
+          v-if="isRowCountSelectorVisible && isTruncated"
+          v-text="` of ${rowCount} rows (Sorting/Filtering disabled).`"
+        ></span>
+        <span v-else-if="isRowCountSelectorVisible" v-text="' rows.'"></span>
+        <span v-else-if="rowCount === 1" v-text="'1 row.'"></span>
+        <span v-else v-text="`${rowCount} rows.`"></span>
+      </template>
     </div>
-  </VisualizationContainer>
+    <!-- TODO[ao]: Suspence in theory is not needed here (the entire visualization is inside
+     suspense), but for some reason it causes reactivity loop - see https://github.com/enso-org/enso/issues/10782 -->
+    <Suspense>
+      <AgGridTableView
+        class="scrollable grid"
+        :columnDefs="columnDefs"
+        :rowData="rowData"
+        :defaultColDef="defaultColDef"
+        :textFormatOption="textFormatterSelected"
+        @sortOrFilterUpdated="(e) => checkSortAndFilter(e)"
+      />
+    </Suspense>
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/VisualizationHost.vue b/app/gui2/src/components/visualizations/VisualizationHost.vue
new file mode 100644
index 000000000000..325ff34791ac
--- /dev/null
+++ b/app/gui2/src/components/visualizations/VisualizationHost.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
+import LoadingVisualization from '@/components/visualizations/LoadingVisualization.vue'
+import { ToolbarItem } from '@/components/visualizations/toolbar'
+import { provideVisualizationConfig } from '@/providers/visualizationConfig'
+import { Vec2 } from '@/util/data/vec2'
+import { ToValue } from '@/util/reactivity'
+
+const { visualization, data, size, nodeType } = defineProps<{
+  visualization?: string | object
+  data?: any
+  size: Vec2
+  nodeType?: string | undefined
+  overflow?: boolean
+  toolbarOverflow?: boolean
+}>()
+
+const emit = defineEmits<{
+  updatePreprocessor: [
+    visualizationModule: string,
+    expression: string,
+    ...positionalArgumentsExpressions: string[],
+  ]
+  updateToolbar: [items: ToValue<Readonly<ToolbarItem[]>>]
+  updateToolbarOverlay: [enable: boolean]
+  createNodes: [nodes: NodeCreationOptions[]]
+}>()
+
+// =========================
+// === Visualization API ===
+// =========================
+
+provideVisualizationConfig({
+  get size() {
+    return size
+  },
+  get nodeType() {
+    return nodeType
+  },
+  setPreprocessor: (
+    visualizationModule: string,
+    expression: string,
+    ...positionalArgumentsExpressions: string[]
+  ) =>
+    emit('updatePreprocessor', visualizationModule, expression, ...positionalArgumentsExpressions),
+  setToolbar: (items) => emit('updateToolbar', items),
+  setToolbarOverlay: (overlay) => emit('updateToolbarOverlay', overlay),
+  createNodes: (...nodes) => emit('createNodes', nodes),
+})
+</script>
+
+<template>
+  <Suspense>
+    <template #fallback><LoadingVisualization /></template>
+    <component :is="visualization" v-if="visualization && data" :data="data" />
+    <LoadingVisualization v-else />
+  </Suspense>
+</template>
+
+<style>
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* Base style for visualizations. */
+:host {
+  --color-text: rgb(118 118 118);
+  --font-sans: 'M PLUS 1', /* System sans-serif font stack */ system-ui, -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'DejaVu Sans Mono', /* System monospace font stack */ ui-monospace, Menlo, Monaco,
+    'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace',
+    'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-weight: 500;
+  font-size: 11.5px;
+  line-height: 20px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  pointer-events: all;
+  cursor: default;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+/* Scrollbar style definitions for textual visualizations which need support for scrolling.
+ *
+ * The 11px width/height (depending on scrollbar orientation)
+ * is set so that it resembles macOS default scrollbar.
+ */
+
+.scrollable {
+  scrollbar-color: rgba(190 190 190 / 50%) transparent;
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: none;
+  }
+  &::-webkit-scrollbar:vertical {
+    width: 11px;
+  }
+  &::-webkit-scrollbar:horizontal {
+    height: 11px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 1px solid rgba(220, 220, 220, 0.5);
+    background-color: rgba(190, 190, 190, 0.5);
+  }
+  &::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0);
+  }
+  &::-webkit-scrollbar-button {
+    height: 8px;
+    width: 8px;
+  }
+}
+
+.draggable {
+  cursor: grab;
+}
+
+.clickable {
+  cursor: pointer;
+}
+</style>
diff --git a/app/gui2/src/components/visualizations/WarningsVisualization.vue b/app/gui2/src/components/visualizations/WarningsVisualization.vue
index aba1a92d73e2..bcc7336832e8 100644
--- a/app/gui2/src/components/visualizations/WarningsVisualization.vue
+++ b/app/gui2/src/components/visualizations/WarningsVisualization.vue
@@ -1,8 +1,7 @@
 <script lang="ts">
-import SvgButton from '@/components/SvgButton.vue'
 import { Ast } from '@/util/ast'
 import { Pattern } from '@/util/ast/match'
-import { useVisualizationConfig, VisualizationContainer } from '@/util/visualizationBuiltins'
+import { useVisualizationConfig } from '@/util/visualizationBuiltins'
 import { computed } from 'vue'
 
 export const name = 'Warnings'
@@ -24,28 +23,25 @@ type Data = string[]
 const props = defineProps<{ data: Data }>()
 
 const config = useVisualizationConfig()
+
+config.setToolbar([
+  {
+    icon: 'not_exclamation',
+    title: 'Remove Warnings',
+    disabled: () => props.data.length === 0,
+    onClick: () => config.createNodes({ content: removeWarnings.value, commit: true }),
+    dataTestid: 'remove-warnings-button',
+  },
+])
 </script>
 
 <template>
-  <VisualizationContainer :belowToolbar="true">
-    <template #toolbar>
-      <SvgButton
-        name="not_exclamation"
-        data-testid="remove-warnings-button"
-        title="Remove Warnings"
-        :disabled="props.data.length === 0"
-        @click="config.createNodes({ content: removeWarnings, commit: true })"
-      />
-    </template>
-    <template #default>
-      <div class="WarningsVisualization">
-        <ul>
-          <li v-if="props.data.length === 0">There are no warnings.</li>
-          <li v-for="(warning, index) in props.data" :key="index" v-text="warning"></li>
-        </ul>
-      </div>
-    </template>
-  </VisualizationContainer>
+  <div class="WarningsVisualization">
+    <ul>
+      <li v-if="props.data.length === 0">There are no warnings.</li>
+      <li v-for="(warning, index) in props.data" :key="index" v-text="warning"></li>
+    </ul>
+  </div>
 </template>
 
 <style scoped>
diff --git a/app/gui2/src/components/visualizations/tableVizToolbar.ts b/app/gui2/src/components/visualizations/tableVizToolbar.ts
new file mode 100644
index 000000000000..f224e205ef13
--- /dev/null
+++ b/app/gui2/src/components/visualizations/tableVizToolbar.ts
@@ -0,0 +1,190 @@
+import { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
+import { TextFormatOptions } from '@/components/visualizations/TableVisualization.vue'
+import { ToolbarItem } from '@/components/visualizations/toolbar'
+import { Ast } from '@/util/ast'
+import { Pattern } from '@/util/ast/match'
+import { ToValue } from '@/util/reactivity'
+import { computed, ComputedRef, Ref, toValue } from 'vue'
+
+type SortDirection = 'asc' | 'desc'
+export type SortModel = {
+  columnName: string
+  sortDirection: SortDirection
+  sortIndex: number
+}
+
+export interface SortFilterNodesButtonOptions {
+  filterModel: ToValue<{
+    [key: string]: {
+      values: any[]
+      filterType: string
+    }
+  }>
+  sortModel: ToValue<SortModel[]>
+  isDisabled: ToValue<boolean>
+  isFilterSortNodeEnabled: ToValue<boolean>
+  createNodes: (...options: NodeCreationOptions[]) => void
+}
+
+export interface FormatMenuOptions {
+  textFormatterSelected: Ref<TextFormatOptions>
+}
+
+export interface Options extends SortFilterNodesButtonOptions, FormatMenuOptions {}
+
+function useSortFilterNodesButton({
+  filterModel,
+  sortModel,
+  isDisabled,
+  isFilterSortNodeEnabled,
+  createNodes,
+}: SortFilterNodesButtonOptions): ComputedRef<ToolbarItem | undefined> {
+  const sortPatternPattern = computed(() => Pattern.parse('(..Name __ __ )'))
+
+  const sortDirection = computed(() => ({
+    asc: '..Ascending',
+    desc: '..Descending',
+  }))
+
+  function makeSortPattern(module: Ast.MutableModule) {
+    const columnSortExpressions = toValue(sortModel)
+      .filter((sort) => sort?.columnName)
+      .sort((a, b) => a.sortIndex - b.sortIndex)
+      .map((sort) =>
+        sortPatternPattern.value.instantiateCopied([
+          Ast.TextLiteral.new(sort.columnName),
+          Ast.parse(sortDirection.value[sort.sortDirection as SortDirection]),
+        ]),
+      )
+    return Ast.Vector.new(module, columnSortExpressions)
+  }
+
+  const filterPattern = computed(() => Pattern.parse('__ (__ __)'))
+
+  function makeFilterPattern(module: Ast.MutableModule, columnName: string, items: string[]) {
+    if (
+      (items?.length === 1 && items.indexOf('true') != -1) ||
+      (items?.length === 1 && items.indexOf('false') != -1)
+    ) {
+      const boolToInclude = items.indexOf('false') != -1 ? Ast.parse('False') : Ast.parse('True')
+      return filterPattern.value.instantiateCopied([
+        Ast.TextLiteral.new(columnName),
+        Ast.parse('..Equal'),
+        boolToInclude,
+      ])
+    }
+    const itemList = items.map((i) => Ast.TextLiteral.new(i))
+    return filterPattern.value.instantiateCopied([
+      Ast.TextLiteral.new(columnName),
+      Ast.parse('..Is_In'),
+      Ast.Vector.new(module, itemList),
+    ])
+  }
+
+  function getAstPatternSort() {
+    return Pattern.new((ast) =>
+      Ast.App.positional(
+        Ast.PropertyAccess.new(ast.module, ast, Ast.identifier('sort')!),
+        makeSortPattern(ast.module),
+      ),
+    )
+  }
+
+  function getAstPatternFilter(columnName: string, items: string[]) {
+    return Pattern.new((ast) =>
+      Ast.App.positional(
+        Ast.PropertyAccess.new(ast.module, ast, Ast.identifier('filter')!),
+        makeFilterPattern(ast.module, columnName, items),
+      ),
+    )
+  }
+
+  function getAstPatternFilterAndSort(columnName: string, items: string[]) {
+    return Pattern.new((ast) =>
+      Ast.OprApp.new(
+        ast.module,
+        Ast.App.positional(
+          Ast.PropertyAccess.new(ast.module, ast, Ast.identifier('filter')!),
+          makeFilterPattern(ast.module, columnName, items),
+        ),
+        '.',
+        Ast.App.positional(
+          Ast.Ident.new(ast.module, Ast.identifier('sort')!),
+          makeSortPattern(ast.module),
+        ),
+      ),
+    )
+  }
+
+  function createNewNodes() {
+    const patterns = new Array<Pattern>()
+    const filterModelValue = toValue(filterModel)
+    const sortModelValue = toValue(sortModel)
+    if (Object.keys(filterModelValue).length) {
+      for (const [columnName, columnFilter] of Object.entries(filterModelValue)) {
+        const items = columnFilter.values.map((item) => `${item}`)
+        const filterPatterns =
+          sortModelValue.length ?
+            getAstPatternFilterAndSort(columnName, items)
+          : getAstPatternFilter(columnName, items)
+        patterns.push(filterPatterns)
+      }
+    } else if (sortModelValue.length) {
+      patterns.push(getAstPatternSort())
+    }
+    createNodes(
+      ...patterns.map(
+        (pattern) => ({ content: pattern, commit: true }) satisfies NodeCreationOptions,
+      ),
+    )
+  }
+
+  const createNodesButton: ToolbarItem = {
+    icon: 'add',
+    title:
+      "Create new component(s) with the current grid's sort and filters applied to the workflow",
+    disabled: isDisabled,
+    onClick: createNewNodes,
+  }
+
+  return computed(() => (toValue(isFilterSortNodeEnabled) ? createNodesButton : undefined))
+}
+
+function createFormatMenu({ textFormatterSelected }: FormatMenuOptions): ToolbarItem {
+  return {
+    selected: textFormatterSelected,
+    title: 'Text Display Options',
+    options: {
+      full: {
+        icon: 'paragraph',
+        iconStyle: {
+          stroke: 'black',
+          color: 'black',
+        },
+        title:
+          'Text displayed in monospace font and all whitespace characters displayed as symbols',
+        label: 'Full whitespace rendering',
+      },
+      partial: {
+        icon: 'paragraph',
+        iconStyle: {
+          stroke: 'grey',
+          color: 'grey',
+        },
+        title: 'Text displayed in monospace font, only multiple spaces displayed with "\xB7"',
+        label: 'Partial whitespace rendering',
+      },
+      off: {
+        icon: 'not_paragraph',
+        title: 'No formatting applied to text',
+        label: 'No whitespace rendering',
+      },
+    },
+  }
+}
+
+export function useTableVizToolbar(options: Options): ComputedRef<ToolbarItem[]> {
+  const createNodesButton = useSortFilterNodesButton(options)
+  const formatMenu = createFormatMenu(options)
+  return computed(() => [formatMenu, ...(createNodesButton.value ? [createNodesButton.value] : [])])
+}
diff --git a/app/gui2/src/components/visualizations/toolbar.ts b/app/gui2/src/components/visualizations/toolbar.ts
new file mode 100644
index 000000000000..5d7e9e291071
--- /dev/null
+++ b/app/gui2/src/components/visualizations/toolbar.ts
@@ -0,0 +1,45 @@
+import { URLString } from '@/util/data/urlString'
+import { Icon } from '@/util/iconName'
+import { ToValue } from '@/util/reactivity'
+import { Ref } from 'vue'
+
+export interface Button {
+  icon: Icon | URLString
+  iconStyle?: Record<string, string>
+  title?: string
+  dataTestid?: string
+}
+
+export interface ActionButton extends Button {
+  onClick: () => void
+  disabled?: ToValue<boolean>
+}
+
+export interface ToggleButton extends Button {
+  toggle: Ref<boolean>
+  disabled?: ToValue<boolean>
+}
+
+export interface SelectionMenuOption extends Button {
+  label?: string
+}
+
+export interface SelectionMenu {
+  selected: Ref<string>
+  title?: string
+  options: Record<string, SelectionMenuOption>
+}
+
+export type ToolbarItem = ActionButton | ToggleButton | SelectionMenu
+
+export function isActionButton(item: Readonly<ToolbarItem>): item is ActionButton {
+  return 'onClick' in item
+}
+
+export function isToggleButton(item: Readonly<ToolbarItem>): item is ToggleButton {
+  return 'toggle' in item
+}
+
+export function isSelectionMenu(item: Readonly<ToolbarItem>): item is SelectionMenu {
+  return 'selected' in item
+}
diff --git a/app/gui2/src/components/widgets/FileBrowserWidget.vue b/app/gui2/src/components/widgets/FileBrowserWidget.vue
index a730b95e19ec..c7bd95b9968f 100644
--- a/app/gui2/src/components/widgets/FileBrowserWidget.vue
+++ b/app/gui2/src/components/widgets/FileBrowserWidget.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LoadingSpinner from '@/components/LoadingSpinner.vue'
+import LoadingSpinner from '@/components/shared/LoadingSpinner.vue'
 import SvgButton from '@/components/SvgButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import { useBackendQuery, useBackendQueryPrefetching } from '@/composables/backend'
@@ -17,7 +17,7 @@ const emit = defineEmits<{
   pathSelected: [path: string]
 }>()
 
-const { prefetch, ensureQueryData } = useBackendQueryPrefetching()
+const { ensureQueryData } = useBackendQueryPrefetching()
 
 // === Current Directory ===
 
@@ -33,6 +33,12 @@ const directoryStack = ref<Directory[]>([
   },
 ])
 const currentDirectory = computed(() => directoryStack.value[directoryStack.value.length - 1]!)
+const currentUser = useBackendQuery('usersMe', [])
+const currentPath = computed(
+  () =>
+    currentUser.data.value &&
+    `enso://Users/${currentUser.data.value.name}${Array.from(directoryStack.value.slice(1), (frame) => '/' + frame.title).join()}`,
+)
 
 // === Directory Contents ===
 
@@ -75,15 +81,6 @@ interface File {
 
 const selectedFile = ref<File>()
 
-function getFileDetailsArgs(parameters: ToValue<File | undefined>) {
-  return computed<Parameters<Backend['getFileDetails']> | undefined>(() => {
-    const paramsValue = toValue(parameters)
-    return paramsValue ? [paramsValue.id, paramsValue.title] : undefined
-  })
-}
-
-const selectedFileDetails = useBackendQuery('getFileDetails', getFileDetailsArgs(selectedFile))
-
 // === Prefetching ===
 
 watch(directories, (directories) => {
@@ -94,11 +91,6 @@ watch(directories, (directories) => {
     ensureQueryData('listDirectory', listDirectoryArgs(directory))
 })
 
-watch(files, (files) => {
-  // Prefetch file info to avoid lag when the user makes a selection.
-  for (const file of files ?? []) prefetch('getFileDetails', getFileDetailsArgs(file))
-})
-
 // === Interactivity ===
 
 function enterDir(dir: DirectoryAsset) {
@@ -114,17 +106,22 @@ function chooseFile(file: FileAsset) {
 }
 
 const isBusy = computed(
-  () => isPending.value || (selectedFile.value && selectedFileDetails.isPending.value),
+  () => isPending.value || (selectedFile.value && currentUser.isPending.value),
 )
 
 const anyError = computed(() =>
   isError.value ? error
-  : selectedFileDetails.isError.value ? selectedFileDetails.error
+  : currentUser.isError.value ? currentUser.error
   : undefined,
 )
 
-watch(selectedFileDetails.data, (details) => {
-  if (details) emit('pathSelected', details.file.path)
+const selectedFilePath = computed(
+  () =>
+    selectedFile.value && currentPath.value && `${currentPath.value}/${selectedFile.value.title}`,
+)
+
+watch(selectedFilePath, (path) => {
+  if (path) emit('pathSelected', path)
 })
 </script>
 
diff --git a/app/gui2/src/components/widgets/NumericInputWidget.vue b/app/gui2/src/components/widgets/NumericInputWidget.vue
index 82abc9cac432..9d71ce65ccf7 100644
--- a/app/gui2/src/components/widgets/NumericInputWidget.vue
+++ b/app/gui2/src/components/widgets/NumericInputWidget.vue
@@ -28,6 +28,8 @@ const lastValidValue = ref<string>()
 watch(editedValue, (newValue) => {
   if (newValue == '' || isNumericLiteral(newValue)) {
     lastValidValue.value = newValue
+  } else if (isNumericLiteral('0' + newValue)) {
+    lastValidValue.value = '0' + newValue
   }
 })
 const valueString = computed(() => (props.modelValue != null ? props.modelValue.toString() : ''))
diff --git a/app/gui2/src/composables/__tests__/events.test.ts b/app/gui2/src/composables/__tests__/events.test.ts
index 3ecbfeda8bc3..916e1b8b5df0 100644
--- a/app/gui2/src/composables/__tests__/events.test.ts
+++ b/app/gui2/src/composables/__tests__/events.test.ts
@@ -1,6 +1,7 @@
 import { Vec2 } from '@/util/data/vec2'
+import { withSetup } from '@/util/testing'
 import { afterEach, beforeEach, expect, test, vi, type Mock, type MockInstance } from 'vitest'
-import { effectScope, nextTick } from 'vue'
+import { nextTick } from 'vue'
 import { useArrows } from '../events'
 
 let rafSpy: MockInstance
@@ -57,6 +58,7 @@ function checkCbSequence(cb: Mock, steps: CbSequenceStep[]) {
       event,
     )
   }
+  expect(cb).toHaveBeenCalledTimes(steps.length)
 }
 
 test.each`
@@ -69,8 +71,22 @@ test.each`
   ${['ArrowUp', 'ArrowLeft']}    | ${10}    | ${1000} | ${[2000, 3000]}       | ${[[-10, -10], [-20, -20]]}                     | ${[[-10, -10], [-10, -10]]}
 `(
   'useArrows with $pressedKeys keys and $velocity velocity',
-  async ({ pressedKeys, velocity, t0, t, offset, delta }) => {
-    await effectScope().run(async () => {
+  async ({
+    pressedKeys,
+    velocity,
+    t0,
+    t,
+    offset,
+    delta,
+  }: {
+    pressedKeys: string[]
+    velocity: number
+    t0: number
+    t: number[]
+    offset: [number, number][]
+    delta: [number, number][]
+  }) => {
+    await withSetup(async () => {
       const cb = vi.fn()
       const expectedSequence: CbSequenceStep[] = []
       const arrows = useArrows(cb, { velocity })
@@ -86,13 +102,13 @@ test.each`
       expect(arrows.moving.value).toBeTruthy
 
       for (let i = 0; i < t.length - 1; ++i) {
-        runFrame(t[i])
+        runFrame(t[i]!)
         await nextTick()
-        expectedSequence.push(['move', offset[i], delta[i], undefined])
+        expectedSequence.push(['move', offset[i]!, delta[i]!, undefined])
       }
 
       const keyupEvents = Array.from(pressedKeys, (key) =>
-        keyEvent('keyup', { key, timeStamp: t[t.length - 1] }),
+        keyEvent('keyup', { key, timeStamp: t[t.length - 1]! }),
       )
       for (const event of keyupEvents) {
         window.dispatchEvent(event)
@@ -100,18 +116,18 @@ test.each`
       await nextTick()
       expectedSequence.push([
         'stop',
-        offset[offset.length - 1],
-        delta[delta.length - 1],
+        offset[offset.length - 1]!,
+        delta[delta.length - 1]!,
         keyupEvents[keyupEvents.length - 1],
       ])
       expect(arrows.moving.value).toBeFalsy()
       checkCbSequence(cb, expectedSequence)
-    })
+    })[0]
   },
 )
 
 test('useArrow with non-overlaping keystrokes', async () => {
-  await effectScope().run(async () => {
+  await withSetup(async () => {
     const cb = vi.fn()
     const arrows = useArrows(cb, { velocity: 10 })
     const rightDown = keyEvent('keydown', { key: 'ArrowRight', timeStamp: 0 })
@@ -143,11 +159,11 @@ test('useArrow with non-overlaping keystrokes', async () => {
       ['move', [0, 5], [0, 5], undefined],
       ['stop', [0, 10], [0, 5], downUp],
     ])
-  })
+  })[0]
 })
 
 test('useArrow with overlaping keystrokes', async () => {
-  await effectScope().run(async () => {
+  await withSetup(async () => {
     const cb = vi.fn()
     const arrows = useArrows(cb, { velocity: 10 })
     const rightDown = keyEvent('keydown', { key: 'ArrowRight', timeStamp: 0 })
@@ -178,5 +194,5 @@ test('useArrow with overlaping keystrokes', async () => {
       ['move', [20, 15], [5, 10], undefined],
       ['stop', [20, 20], [0, 5], downUp],
     ])
-  })
+  })[0]
 })
diff --git a/app/gui2/src/composables/__tests__/selection.test.ts b/app/gui2/src/composables/__tests__/selection.test.ts
index df0faa5062fa..62891a26268a 100644
--- a/app/gui2/src/composables/__tests__/selection.test.ts
+++ b/app/gui2/src/composables/__tests__/selection.test.ts
@@ -4,19 +4,29 @@ import { assert } from '@/util/assert'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { isPointer, pointerButtonToEventInfo, type BindingInfo } from '@/util/shortcuts'
+import { withSetup } from '@/util/testing'
 import { beforeAll, expect, test, vi } from 'vitest'
-import { proxyRefs, ref, type Ref } from 'vue'
+import { nextTick, ref } from 'vue'
+import { useKeyboard } from '../keyboard'
+import { useNavigator } from '../navigator'
 
-function selectionWithMockData(sceneMousePos?: Ref<Vec2>) {
+function selectionWithMockData() {
   const rects = new Map()
   rects.set(1, Rect.FromBounds(1, 1, 10, 10))
   rects.set(2, Rect.FromBounds(20, 1, 30, 10))
   rects.set(3, Rect.FromBounds(1, 20, 10, 30))
   rects.set(4, Rect.FromBounds(20, 20, 30, 30))
-  const navigator = proxyRefs({ sceneMousePos: sceneMousePos ?? ref(Vec2.Zero), scale: 1 })
+
+  const mockDom = document.createElement('div')
+  mockDom.style.width = '500px'
+  mockDom.style.height = '300px'
+  vi.spyOn(mockDom, 'getBoundingClientRect').mockReturnValue(new DOMRect(-250, -150, 500, 300))
+
+  const navigator = useNavigator(ref(mockDom), useKeyboard())
+
   const selection = useSelection(navigator, rects)
   selection.setSelection(new Set([1, 2]))
-  return selection
+  return { selection, mockDom }
 }
 
 const bindingReplace = selectionMouseBindings.bindings.replace
@@ -39,11 +49,16 @@ test.each`
   ${3}  | ${bindingRemove}  | ${[1, 2]}
   ${1}  | ${bindingInvert}  | ${[2]}
   ${3}  | ${bindingInvert}  | ${[1, 2, 3]}
-`('Selection by single click at $click with $modifiers', ({ click, binding, expected }) => {
-  const selection = selectionWithMockData()
-  // Position is zero, because this method should not depend on click position
-  selection.handleSelectionOf(mockPointerEvent('click', Vec2.Zero, binding), new Set([click]))
-  expect([...selection.selected.value]).toEqual(expected)
+`('Selection by single click at $click', ({ click, binding, expected }) => {
+  withSetup(() => {
+    const { selection, mockDom } = selectionWithMockData()
+    // Position is zero, because this method should not depend on click position
+    selection.handleSelectionOf(
+      mockPointerEvent('click', Vec2.Zero, binding, mockDom),
+      new Set([click]),
+    )
+    expect([...selection.selected.value]).toEqual(expected)
+  })
 })
 
 const areas: Record<string, Rect> = {
@@ -83,26 +98,26 @@ test.each`
   ${'all'}    | ${bindingInvert}  | ${[3, 4]}
 `(
   'Selection by dragging $areaId area with $binding.humanReadable',
-  ({ areaId, binding, expected }) => {
+  async ({ areaId, binding, expected }) => {
     const area = areas[areaId]!
-    const dragCase = (start: Vec2, stop: Vec2) => {
-      const mousePos = ref(start)
-      const selection = selectionWithMockData(mousePos)
-
-      selection.events.pointerdown(mockPointerEvent('pointerdown', mousePos.value, binding))
-      selection.events.pointermove(mockPointerEvent('pointermove', mousePos.value, binding))
-      mousePos.value = stop
-      selection.events.pointermove(mockPointerEvent('pointermove', mousePos.value, binding))
-      expect(selection.selected.value).toEqual(new Set(expected))
-      selection.events.pointerdown(mockPointerEvent('pointerup', mousePos.value, binding))
-      expect(selection.selected.value).toEqual(new Set(expected))
+    const dragCase = async (start: Vec2, stop: Vec2) => {
+      await withSetup(async () => {
+        const { selection, mockDom } = selectionWithMockData()
+        await nextTick()
+        mockDom.dispatchEvent(mockPointerEvent('pointerdown', start, binding, mockDom))
+        mockDom.dispatchEvent(mockPointerEvent('pointermove', start, binding, mockDom))
+        mockDom.dispatchEvent(mockPointerEvent('pointermove', stop, binding, mockDom))
+        expect(selection.selected.value).toEqual(new Set(expected))
+        mockDom.dispatchEvent(mockPointerEvent('pointerup', stop, binding, mockDom))
+        expect(selection.selected.value).toEqual(new Set(expected))
+      })[0]
     }
 
     // We should select same set of nodes, regardless of drag direction
-    dragCase(new Vec2(area.left, area.top), new Vec2(area.right, area.bottom))
-    dragCase(new Vec2(area.right, area.bottom), new Vec2(area.left, area.top))
-    dragCase(new Vec2(area.left, area.bottom), new Vec2(area.right, area.top))
-    dragCase(new Vec2(area.right, area.top), new Vec2(area.left, area.bottom))
+    await dragCase(new Vec2(area.left, area.top), new Vec2(area.right, area.bottom))
+    await dragCase(new Vec2(area.right, area.bottom), new Vec2(area.left, area.top))
+    await dragCase(new Vec2(area.left, area.bottom), new Vec2(area.right, area.top))
+    await dragCase(new Vec2(area.right, area.top), new Vec2(area.left, area.bottom))
   },
 )
 
@@ -126,8 +141,13 @@ beforeAll(() => {
   ;(window as any).PointerEvent = MockPointerEvent
 })
 
-const graphRootMock = document.createElement('div')
-function mockPointerEvent(type: string, pos: Vec2, binding: BindingInfo): PointerEvent {
+let lastEventTimestamp = 0
+function mockPointerEvent(
+  type: string,
+  pos: Vec2,
+  binding: BindingInfo,
+  target: Element,
+): PointerEvent {
   const modifiersSet = new Set(binding.modifiers)
   assert(isPointer(binding.key))
   const { button, buttons } = pointerButtonToEventInfo(binding.key)
@@ -140,8 +160,13 @@ function mockPointerEvent(type: string, pos: Vec2, binding: BindingInfo): Pointe
     clientY: pos.y,
     button,
     buttons,
-    target: graphRootMock,
-    currentTarget: graphRootMock,
+    target: target,
+    currentTarget: target,
   }) as PointerEvent
+  // Ensure that events sent during testing are not deduplicated
+  if (event.timeStamp === lastEventTimestamp)
+    Object.defineProperty(event, 'timeStamp', { value: event.timeStamp + 1 })
+  lastEventTimestamp = event.timeStamp
+
   return event
 }
diff --git a/app/gui2/src/composables/events.ts b/app/gui2/src/composables/events.ts
index 999364e0e599..68d57142308e 100644
--- a/app/gui2/src/composables/events.ts
+++ b/app/gui2/src/composables/events.ts
@@ -296,7 +296,7 @@ export interface EventPosition {
   delta: Vec2
 }
 
-type PointerEventType = 'start' | 'move' | 'stop'
+type PointerEventType = 'start' | 'move' | 'stop' | 'cancel'
 
 /**
  * A mask of all available pointer buttons. The values are compatible with DOM's `PointerEvent.buttons` value. The mask values
@@ -359,12 +359,12 @@ export function usePointer(
 
   const dragging = computed(() => dragState.value != null)
 
-  function doStop(e: PointerEvent) {
+  function doStop(e: PointerEvent, eventType: PointerEventType = 'stop') {
     if (dragState.value?.trackedPointer !== e.pointerId) return
     const { trackedElement, trackedPointer, initialGrabPos, lastPos } = dragState.value
     trackedElement?.releasePointerCapture(trackedPointer)
 
-    if (handler(computePosition(e, initialGrabPos, lastPos), e, 'stop') !== false) {
+    if (handler(computePosition(e, initialGrabPos, lastPos), e, eventType) !== false) {
       e.stopImmediatePropagation()
     }
 
@@ -410,6 +410,7 @@ export function usePointer(
       }
     },
     pointerup(e: PointerEvent) {
+      if (dragState.value?.trackedPointer !== e.pointerId) return
       doStop(e)
     },
     pointermove(e: PointerEvent) {
@@ -420,6 +421,10 @@ export function usePointer(
         doStop(e)
       }
     },
+    pointercancel(e: PointerEvent) {
+      if (dragState.value?.trackedPointer !== e.pointerId) return
+      doStop(e, 'cancel')
+    },
   }
 
   return proxyRefs({
diff --git a/app/gui2/src/composables/navigator.ts b/app/gui2/src/composables/navigator.ts
index 736174f57754..5ad3ee5f8767 100644
--- a/app/gui2/src/composables/navigator.ts
+++ b/app/gui2/src/composables/navigator.ts
@@ -4,15 +4,25 @@ import { useApproach, useApproachVec } from '@/composables/animation'
 import {
   PointerButtonMask,
   useArrows,
-  useEvent,
-  usePointer,
   useResizeObserver,
   useWheelActions,
 } from '@/composables/events'
 import type { KeyboardComposable } from '@/composables/keyboard'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
-import { computed, proxyRefs, readonly, shallowRef, toRef, watch, type Ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { Handler, useGesture } from '@vueuse/gesture'
+import {
+  computed,
+  onScopeDispose,
+  proxyRefs,
+  readonly,
+  ref,
+  shallowRef,
+  toRef,
+  watch,
+  type Ref,
+} from 'vue'
 
 type ScaleRange = readonly [number, number]
 const PAN_AND_ZOOM_DEFAULT_SCALE_RANGE: ScaleRange = [0.1, 1]
@@ -26,6 +36,8 @@ const ZOOM_LEVELS_REVERSED = [...ZOOM_LEVELS].reverse()
  * to avoid small unnoticeable changes to zoom. */
 const ZOOM_SKIP_THRESHOLD = 0.05
 const WHEEL_CAPTURE_DURATION_MS = 250
+const LONGPRESS_TIMEOUT = 500
+const LONGPRESS_MAX_SLIDE = 10
 
 function elemRect(target: Element | undefined): Rect {
   if (target != null && target instanceof Element)
@@ -40,7 +52,7 @@ export interface NavigatorOptions {
 
 export type NavigatorComposable = ReturnType<typeof useNavigator>
 export function useNavigator(
-  viewportNode: Ref<Element | undefined>,
+  viewportNode: Ref<HTMLElement | undefined>,
   keyboard: KeyboardComposable,
   options: NavigatorOptions = {},
 ) {
@@ -54,18 +66,140 @@ export function useNavigator(
     viewportRect.value = elemRect(viewportNode.value)
   }
 
-  watch(size, updateViewportRect, { immediate: true })
+  const dragPredicate = (e: PointerEvent) => e.target === e.currentTarget && predicate(e)
 
-  const targetScale = shallowRef(1)
-  const scale = useApproach(targetScale)
-  const panPointer = usePointer(
-    (pos) => scrollTo(center.value.addScaled(pos.delta, -1 / scale.value)),
+  function eventIsTouch(e: Event) {
+    return e.type.startsWith('touch') || (e instanceof PointerEvent && e.pointerType === 'touch')
+  }
+
+  const holdDragListeners: Array<Handler<'drag'>> = []
+  function callHoldDragListeners(...params: Parameters<Handler<'drag'>>) {
+    holdDragListeners.forEach((f) => f(...params))
+  }
+
+  let gesturePivot = Vec2.Zero
+  let pinchScaleRatio = 1
+  let lastPinchOrigin = Vec2.Zero
+  let holdDragStarted = false
+
+  type DragState = Parameters<Handler<'drag', PointerEvent>>[0]
+
+  function handleDragPanning(state: DragState) {
+    if (Vec2.FromTuple(state.movement).length() > LONGPRESS_MAX_SLIDE) cancelLongpress()
+    scrollTo(center.value.addScaled(Vec2.FromTuple(state.delta), -1 / scale.value))
+    state.event.stopImmediatePropagation()
+  }
+
+  function handleDragZooming(state: DragState) {
+    const prevScale = scale.value
+    updateScale((oldValue) => oldValue * Math.exp(-state.delta[1] / 100))
+    scrollTo(center.value.scaleAround(prevScale / scale.value, gesturePivot))
+  }
+
+  function handleDragHolding(state: DragState) {
+    callHoldDragListeners({
+      ...state,
+      first: holdDragStarted === false,
+      dragging: state.dragging || !state.last,
+    })
+    holdDragStarted = true
+  }
+
+  let longpressTimer: ReturnType<typeof setTimeout> | null = null
+  function startTouchLongpressTimer(state: DragState) {
+    state.event.preventDefault()
+    cancelLongpress()
+    longpressTimer = setTimeout(() => {
+      longpressTimer = null
+      if (navigator.vibrate) navigator.vibrate(20)
+      handleDragHolding(state)
+    }, LONGPRESS_TIMEOUT)
+  }
+
+  function cancelLongpress() {
+    if (longpressTimer) clearTimeout(longpressTimer)
+    longpressTimer = null
+  }
+
+  useGesture(
     {
-      requiredButtonMask: PointerButtonMask.Auxiliary,
-      predicate: (e) => e.target === e.currentTarget && predicate(e),
+      onMove(state) {
+        eventMousePos.value = Vec2.FromTuple(state.xy)
+      },
+      onDrag(state) {
+        if (state.first) {
+          gesturePivot = clientToScenePos(Vec2.FromTuple(state.initial))
+          holdDragStarted = false
+        }
+
+        if (!dragPredicate(state.event) || state.pinching) return
+        const isTouch = eventIsTouch(state.event)
+        const mainDown = (state.buttons & PointerButtonMask.Main) != 0
+        const secondaryDown = (state.buttons & PointerButtonMask.Secondary) != 0
+        const auxDown = (state.buttons & PointerButtonMask.Auxiliary) != 0
+
+        if (isTouch && state.first) startTouchLongpressTimer(state)
+
+        if (!holdDragStarted && (isTouch || auxDown)) handleDragPanning(state)
+        else if (!isTouch && secondaryDown) handleDragZooming(state)
+        else if (state.tap || holdDragStarted || (!isTouch && mainDown)) handleDragHolding(state)
+
+        if (state.last && longpressTimer) cancelLongpress()
+        if (state.last && holdDragStarted) holdDragStarted = false
+      },
+      onPinch(state) {
+        // A started longpress touch can transform into pinch without warning, make sure to clear the timeout.
+        cancelLongpress()
+
+        if (state.ctrlKey) return // We do our own touchpad handling below
+
+        const currentOrigin = Vec2.FromTuple(state.origin)
+        gesturePivot = clientToScenePos(currentOrigin)
+        if (state.first) {
+          pinchScaleRatio = scale.value / state.da[0]
+          lastPinchOrigin = currentOrigin
+        }
+
+        const originDelta = currentOrigin.sub(lastPinchOrigin)
+        lastPinchOrigin = currentOrigin
+
+        const prevScale = scale.value
+        updateScale((_) => pinchScaleRatio * state.da[0])
+        scrollTo(
+          center.value
+            .scaleAround(prevScale / scale.value, gesturePivot)
+            .addScaled(originDelta, -1 / scale.value),
+        )
+      },
+      onWheel(state) {
+        if (state.ctrlKey) return
+        const delta = Vec2.FromTuple(state.delta)
+        scrollTo(center.value.addScaled(delta, 1 / scale.value))
+      },
+    },
+    {
+      domTarget: viewportNode,
+      eventOptions: {
+        passive: false,
+      },
+      drag: {
+        enabled: true,
+        useTouch: 'ontouchstart' in document.documentElement && navigator.maxTouchPoints > 0,
+      },
+      pinch: {
+        enabled: true,
+      },
+      wheel: {
+        enabled: true,
+      },
     },
   )
 
+  watch(size, updateViewportRect, { immediate: true })
+
+  const targetScale = ref(1)
+  const scale = useApproach(targetScale)
+
   const panArrows = useArrows(
     (pos) => scrollTo(center.value.addScaled(pos.delta, 1 / scale.value)),
     { predicate, velocity: 1000 },
@@ -183,28 +317,6 @@ export function useNavigator(
     center.skip()
   }
 
-  let zoomPivot = Vec2.Zero
-  const zoomPointer = usePointer(
-    (pos, _event, ty) => {
-      if (ty === 'start') {
-        zoomPivot = clientToScenePos(pos.initial)
-      }
-
-      const prevScale = scale.value
-      updateScale((oldValue) => oldValue * Math.exp(-pos.delta.y / 100))
-      scrollTo(
-        center.value
-          .sub(zoomPivot)
-          .scale(prevScale / scale.value)
-          .add(zoomPivot),
-      )
-    },
-    {
-      requiredButtonMask: PointerButtonMask.Secondary,
-      predicate: (e) => e.target === e.currentTarget && predicate(e),
-    },
-  )
-
   const viewport = computed(() => {
     const nodeSize = size.value
     const { x, y } = center.value
@@ -236,55 +348,17 @@ export function useNavigator(
     () => `translate(${translate.value.x * scale.value}px, ${translate.value.y * scale.value}px)`,
   )
 
-  let isPointerDown = false
-  let scrolledThisFrame = false
   const eventMousePos = shallowRef<Vec2 | null>(null)
-  let eventTargetScrollPos: Vec2 | null = null
   const sceneMousePos = computed(() =>
     eventMousePos.value ? clientToScenePos(eventMousePos.value) : null,
   )
 
-  useEvent(
-    window,
-    'scroll',
-    (e) => {
-      if (
-        !isPointerDown ||
-        scrolledThisFrame ||
-        !eventMousePos.value ||
-        !(e.target instanceof Element)
-      )
-        return
-      scrolledThisFrame = true
-      requestAnimationFrame(() => (scrolledThisFrame = false))
-      if (!(e.target instanceof Element)) return
-      const newScrollPos = new Vec2(e.target.scrollLeft, e.target.scrollTop)
-      if (eventTargetScrollPos !== null) {
-        const delta = newScrollPos.sub(eventTargetScrollPos)
-        const mouseDelta = new Vec2(
-          (delta.x * e.target.clientWidth) / e.target.scrollWidth,
-          (delta.y * e.target.clientHeight) / e.target.scrollHeight,
-        )
-        eventMousePos.value = eventMousePos.value?.add(mouseDelta) ?? null
-      }
-      eventTargetScrollPos = newScrollPos
-    },
-    { capture: true },
-  )
-
-  useEvent(
-    window,
-    'scrollend',
-    () => {
-      eventTargetScrollPos = null
-    },
-    { capture: true },
-  )
-
   /** Clamp the value to the given bounds, except if it is already outside the bounds allow the new value to be less
    *  outside the bounds. */
   function directedClamp(oldValue: number, newValue: number, [min, max]: ScaleRange): number {
-    if (newValue > oldValue) return Math.min(max, newValue)
+    if (!Number.isFinite(newValue)) return oldValue
+    else if (!Number.isFinite(oldValue)) return Math.max(min, Math.min(newValue, max))
+    else if (newValue > oldValue) return Math.min(max, newValue)
     else return Math.max(min, newValue)
   }
 
@@ -350,38 +424,11 @@ export function useNavigator(
     },
   )
 
+  useEventListener(viewportNode, 'wheel', wheelEvents.wheel)
+  useEventListener(viewportNode, 'wheel', wheelEventsCapture.wheel, { capture: true })
+  useEventListener(viewportNode, 'pointermove', wheelEventsCapture.pointermove, { capture: true })
+
   return proxyRefs({
-    pointerEvents: {
-      dragover(e: DragEvent) {
-        eventMousePos.value = eventScreenPos(e)
-      },
-      dragleave() {
-        eventMousePos.value = null
-      },
-      pointermove(e: PointerEvent) {
-        eventMousePos.value = eventScreenPos(e)
-        panPointer.events.pointermove(e)
-        zoomPointer.events.pointermove(e)
-      },
-      pointerleave() {
-        eventMousePos.value = null
-      },
-      pointerup(e: PointerEvent) {
-        isPointerDown = false
-        panPointer.events.pointerup(e)
-        zoomPointer.events.pointerup(e)
-      },
-      pointerdown(e: PointerEvent) {
-        isPointerDown = true
-        panPointer.events.pointerdown(e)
-        zoomPointer.events.pointerdown(e)
-      },
-      contextmenu(e: Event) {
-        e.preventDefault()
-      },
-      wheel: wheelEvents.wheel,
-    },
-    pointerEventsCapture: wheelEventsCapture,
     keyboardEvents: panArrows.events,
     translate: readonly(translate),
     targetCenter: readonly(targetCenter),
@@ -389,6 +436,15 @@ export function useNavigator(
     scale: readonly(toRef(scale, 'value')),
     viewBox: readonly(viewBox),
     transform: readonly(transform),
+    /**
+     * Add handler for "hold" events - a drag action that doesn't move the navigator viewport, but
+     * is supposed to represent holding the viewport contents itself. For desktop, this is the
+     * left mouse button drag. For touch input, it is a long-press and drag.
+     */
+    addHoldDragListener(listener: Handler<'drag'>) {
+      holdDragListeners.push(listener)
+      onScopeDispose(() => holdDragListeners.splice(holdDragListeners.indexOf(listener), 1))
+    },
     /** Use this transform instead, if the element should not be scaled. */
     prescaledTransform,
     sceneMousePos,
diff --git a/app/gui2/src/composables/selection.ts b/app/gui2/src/composables/selection.ts
index 5bfe4117ea65..2634b7b009c1 100644
--- a/app/gui2/src/composables/selection.ts
+++ b/app/gui2/src/composables/selection.ts
@@ -1,16 +1,17 @@
 /** @file A Vue composable for keeping track of selected DOM elements. */
 import { selectionMouseBindings } from '@/bindings'
-import { useEvent, usePointer } from '@/composables/events'
+import { useEvent } from '@/composables/events'
 import type { PortId } from '@/providers/portInfo.ts'
 import { type NodeId } from '@/stores/graph'
 import { filter, filterDefined, map } from '@/util/data/iterable'
 import type { Rect } from '@/util/data/rect'
 import { intersectionSize } from '@/util/data/set'
-import type { Vec2 } from '@/util/data/vec2'
+import { Vec2 } from '@/util/data/vec2'
 import { dataAttribute, elementHierarchy } from '@/util/dom'
 import * as set from 'lib0/set'
 import { computed, ref, shallowReactive, shallowRef } from 'vue'
 import { Err, Ok, type Result } from 'ydoc-shared/util/data/result'
+import { NavigatorComposable } from './navigator'
 
 interface BaseSelectionOptions<T> {
   margin?: number
@@ -35,17 +36,17 @@ export type SelectionOptions<T, PackedT> =
   | (BaseSelectionOptions<T> & SelectionPackingOptions<T, PackedT>)
 
 export function useSelection<T>(
-  navigator: { sceneMousePos: Vec2 | null; scale: number },
+  navigator: NavigatorComposable,
   elementRects: Map<T, Rect>,
   options?: BaseSelectionOptions<T>,
 ): UseSelection<T, T>
 export function useSelection<T, PackedT>(
-  navigator: { sceneMousePos: Vec2 | null; scale: number },
+  navigator: NavigatorComposable,
   elementRects: Map<T, Rect>,
   options: BaseSelectionOptions<T> & SelectionPackingOptions<T, PackedT>,
 ): UseSelection<T, PackedT>
 export function useSelection<T, PackedT>(
-  navigator: { sceneMousePos: Vec2 | null; scale: number },
+  navigator: NavigatorComposable,
   elementRects: Map<T, Rect>,
   options: SelectionOptions<T, PackedT> = {},
 ): UseSelection<T, PackedT> {
@@ -71,12 +72,13 @@ export function useSelection<T, PackedT>(
 
 type UseSelection<T, PackedT> = ReturnType<typeof useSelectionImpl<T, PackedT>>
 function useSelectionImpl<T, PackedT>(
-  navigator: { sceneMousePos: Vec2 | null; scale: number },
+  navigator: NavigatorComposable,
   elementRects: Map<T, Rect>,
   { margin, isValid, onSelected, onDeselected }: Required<BaseSelectionOptions<T>>,
   { pack, unpack }: SelectionPackingOptions<T, PackedT>,
 ) {
   const anchor = shallowRef<Vec2>()
+  const focus = shallowRef<Vec2>()
   let initiallySelected = new Set<T>()
   // Selection, including elements that do not (currently) pass `isValid`.
   const rawSelected = shallowReactive(new Set<PackedT>())
@@ -153,13 +155,15 @@ function useSelectionImpl<T, PackedT>(
     },
   })
 
+  const dragging = ref(false)
+
   const intersectingElements = computed<Set<T>>(() => {
-    if (!pointer.dragging || anchor.value == null || navigator.sceneMousePos == null) {
+    if (!dragging.value || anchor.value == null || focus.value == null) {
       return new Set()
     }
     const navigatorSpaceMargin = margin / navigator.scale
 
-    const a = navigator.sceneMousePos
+    const a = focus.value
     const b = anchor.value
 
     const left = Math.min(a.x, b.x) - navigatorSpaceMargin
@@ -189,27 +193,30 @@ function useSelectionImpl<T, PackedT>(
     overrideElemsToSelect.value = undefined
   }
 
-  const pointer = usePointer(
-    (_pos, event, eventType) => {
-      if (eventType === 'start') {
-        readInitiallySelected()
-      } else if (eventType === 'stop') {
-        if (anchor.value == null) {
-          // If there was no drag, we want to handle "clicking-off" selected nodes.
-          selectionEventHandler(event)
-        } else {
-          anchor.value = undefined
-        }
-        initiallySelected.clear()
-      } else if (pointer.dragging) {
-        if (anchor.value == null) {
-          anchor.value = navigator.sceneMousePos?.copy()
-        }
-        selectionEventHandler(event)
+  navigator.addHoldDragListener((state) => {
+    dragging.value = state.dragging
+
+    const eventPosition = navigator.clientToScenePos(Vec2.FromTuple(state.xy))
+
+    if (state.first) {
+      readInitiallySelected()
+    }
+    if (state.last) {
+      if (anchor.value == null) {
+        // If there was no drag, we want to handle "clicking-off" selected nodes.
+        selectionEventHandler(state.event)
       }
-    },
-    { predicate: (e) => e.target === e.currentTarget },
-  )
+      anchor.value = undefined
+      focus.value = undefined
+      initiallySelected.clear()
+    } else if (state.dragging) {
+      if (anchor.value == null) {
+        anchor.value = eventPosition
+      }
+      focus.value = eventPosition
+      selectionEventHandler(state.event)
+    }
+  })
 
   return {
     // === Selected nodes ===
@@ -230,10 +237,10 @@ function useSelectionImpl<T, PackedT>(
     tryGetSoleSelection,
     // === Selection changes ===
     anchor,
+    focus,
     isChanging,
     // === Mouse events ===
     handleSelectionOf,
-    events: pointer.events,
   }
 }
 
diff --git a/app/gui2/src/entrypoint.ts b/app/gui2/src/entrypoint.ts
index 60061fb743e6..30ed84331f5c 100644
--- a/app/gui2/src/entrypoint.ts
+++ b/app/gui2/src/entrypoint.ts
@@ -69,11 +69,15 @@ function main() {
     localStorage.setItem(INITIAL_URL_KEY, location.href)
   }
 
+  const resolveEnvUrl = (url: string | undefined) =>
+    url?.replace('__HOSTNAME__', window.location.hostname)
+
   const config = configValue(mergeConfig(baseConfig, urlParams()))
   const supportsVibrancy = config.window.vibrancy
   const shouldUseAuthentication = config.authentication.enabled
-  const projectManagerUrl = config.engine.projectManagerUrl || PROJECT_MANAGER_URL
-  const ydocUrl = config.engine.ydocUrl === '' ? YDOC_SERVER_URL : config.engine.ydocUrl
+  const projectManagerUrl =
+    (config.engine.projectManagerUrl || resolveEnvUrl(PROJECT_MANAGER_URL)) ?? null
+  const ydocUrl = (config.engine.ydocUrl || resolveEnvUrl(YDOC_SERVER_URL)) ?? null
   const initialProjectName = config.startup.project || null
   const urlWithoutStartupProject = new URL(location.toString())
   urlWithoutStartupProject.searchParams.delete('startup.project')
diff --git a/app/gui2/src/providers/appClass.ts b/app/gui2/src/providers/appClass.ts
index d0dcef6b01f6..9453da5780af 100644
--- a/app/gui2/src/providers/appClass.ts
+++ b/app/gui2/src/providers/appClass.ts
@@ -3,7 +3,7 @@ import type { Opt } from '@/util/data/opt'
 import { reactive, watch, type WatchSource } from 'vue'
 
 export { provideFn as provideAppClassSet }
-const { provideFn, injectFn: injectAppClassSet } = createContextStore('Port info', () => {
+const { provideFn, injectFn: injectAppClassSet } = createContextStore('App Class Set', () => {
   return reactive(new Map<string, number>())
 })
 
diff --git a/app/gui2/src/providers/interactionHandler.ts b/app/gui2/src/providers/interactionHandler.ts
index 73868293540a..a8e535c75589 100644
--- a/app/gui2/src/providers/interactionHandler.ts
+++ b/app/gui2/src/providers/interactionHandler.ts
@@ -1,5 +1,4 @@
 import { createContextStore } from '@/providers'
-import type { GraphNavigator } from '@/providers/graphNavigator'
 import { shallowRef, watch, type WatchSource } from 'vue'
 
 export { injectFn as injectInteractionHandler, provideFn as provideInteractionHandler }
@@ -69,12 +68,11 @@ export class InteractionHandler {
     event: PointerEvent,
     handlerName: Interaction[HandlerName] extends InteractionEventHandler | undefined ? HandlerName
     : never,
-    graphNavigator: GraphNavigator,
   ): boolean {
     if (!this.currentInteraction.value) return false
     const handler = this.currentInteraction.value[handlerName]
     if (!handler) return false
-    const handled = handler.bind(this.currentInteraction.value)(event, graphNavigator) !== false
+    const handled = handler.bind(this.currentInteraction.value)(event) !== false
     if (handled) {
       event.stopImmediatePropagation()
       event.preventDefault()
@@ -83,7 +81,7 @@ export class InteractionHandler {
   }
 }
 
-type InteractionEventHandler = (event: PointerEvent, navigator: GraphNavigator) => boolean | void
+type InteractionEventHandler = (event: PointerEvent) => boolean | void
 
 export interface Interaction {
   /** Called when the interaction is explicitly canceled, e.g. with the `Esc` key. */
diff --git a/app/gui2/src/providers/visualizationConfig.ts b/app/gui2/src/providers/visualizationConfig.ts
index 1ba921c6c014..3512602ad211 100644
--- a/app/gui2/src/providers/visualizationConfig.ts
+++ b/app/gui2/src/providers/visualizationConfig.ts
@@ -1,33 +1,30 @@
-import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
-import { SavedSize } from '@/components/WithFullscreenMode.vue'
+import { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
+import { ToolbarItem } from '@/components/visualizations/toolbar'
 import { createContextStore } from '@/providers'
-import type { URLString } from '@/util/data/urlString'
 import { Vec2 } from '@/util/data/vec2'
-import type { Icon } from '@/util/iconName'
+import { ToValue } from '@/util/reactivity'
 import { reactive } from 'vue'
-import type { VisualizationIdentifier } from 'ydoc-shared/yjsModel'
 
 export interface VisualizationConfig {
-  background?: string
-  /** Possible visualization types that can be switched to. */
-  readonly types: Iterable<VisualizationIdentifier>
-  readonly currentType: VisualizationIdentifier
-  readonly icon: Icon | URLString | undefined
-  readonly isCircularMenuVisible: boolean
-  readonly nodeSize: Vec2
-  readonly scale: number
-  readonly isFocused: boolean
+  /** The Enso type of the data being visualized. */
   readonly nodeType: string | undefined
-  readonly isPreview: boolean
-  isBelowToolbar: boolean
-  width: number
-  height: number
-  nodePosition: Vec2
-  fullscreen: boolean
-  savedSize: SavedSize | undefined
-  hide: () => void
-  updateType: (type: VisualizationIdentifier) => void
+  /** The size of the area available for the visualization to draw its content. */
+  readonly size: Vec2
+  /** Create graph nodes. */
   createNodes: (...options: NodeCreationOptions[]) => void
+  /** Set the preprocessor that prepares the visualization data on the backend. */
+  setPreprocessor: (
+    visualizationModule: string,
+    expression: string,
+    ...positionalArgumentsExpressions: string[]
+  ) => void
+  /** Provide a toolbar definition. */
+  setToolbar: (toolbar: ToValue<Readonly<ToolbarItem[]>>) => void
+  /**
+   * If set to `true`, the toolbar will be overlayed on top of the visualization, instead of in a space reserved above
+   * it. By default, this is `false`.
+   */
+  setToolbarOverlay: (enableOverlay: boolean) => void
 }
 
 export { provideFn as provideVisualizationConfig }
diff --git a/app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts b/app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts
index 47a406e04853..6b8e125bcc25 100644
--- a/app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts
+++ b/app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts
@@ -1,4 +1,3 @@
-import type { GraphNavigator } from '@/providers/graphNavigator'
 import { InteractionHandler } from '@/providers/interactionHandler'
 import type { PortId } from '@/providers/portInfo'
 import { useCurrentEdit, type CurrentEdit } from '@/providers/widgetTree'
@@ -130,7 +129,6 @@ test.each`
   'Handling clicks in WidgetEditHandlers case $name',
   ({ widgets, edited, propagatingHandlers, nonPropagatingHandlers, expectedHandlerCalls }) => {
     const event = new MouseEvent('pointerdown') as PointerEvent
-    const navigator = {} as GraphNavigator
     const interactionHandler = new InteractionHandler()
     const widgetTree = proxyRefs(useCurrentEdit())
 
@@ -144,24 +142,22 @@ test.each`
       (id) =>
         propagatingHandlersSet.has(id) ?
           {
-            pointerdown: vi.fn((e, nav) => {
+            pointerdown: vi.fn((e) => {
               expect(e).toBe(event)
-              expect(nav).toBe(navigator)
               return false
             }),
           }
         : nonPropagatingHandlersSet.has(id) ?
           {
-            pointerdown: vi.fn((e, nav) => {
+            pointerdown: vi.fn((e) => {
               expect(e).toBe(event)
-              expect(nav).toBe(navigator)
             }),
           }
         : {},
       widgetTree,
     )
     handlers.get(edited)?.handler.start()
-    interactionHandler.handlePointerEvent(event, 'pointerdown', navigator)
+    interactionHandler.handlePointerEvent(event, 'pointerdown')
     const handlersCalled = new Set<string>()
     for (const [id, { interaction }] of handlers)
       if ((interaction.pointerdown as Mock | undefined)?.mock.lastCall) handlersCalled.add(id)
diff --git a/app/gui2/src/providers/widgetRegistry/configuration.ts b/app/gui2/src/providers/widgetRegistry/configuration.ts
index 323b939e7b0d..84cc30d71cea 100644
--- a/app/gui2/src/providers/widgetRegistry/configuration.ts
+++ b/app/gui2/src/providers/widgetRegistry/configuration.ts
@@ -202,7 +202,7 @@ export function functionCallConfiguration(
 ): FunctionCall {
   const parametersMap = new Map(inherited?.parameters)
   for (const [name, param] of parameters) {
-    parametersMap.set(name, param)
+    parametersMap.set(name, parametersMap.get(name) ?? param)
   }
   return {
     kind: 'FunctionCall',
diff --git a/app/gui2/src/providers/widgetRegistry/editHandler.ts b/app/gui2/src/providers/widgetRegistry/editHandler.ts
index 3a6f4c1b49c6..ea3f34b57705 100644
--- a/app/gui2/src/providers/widgetRegistry/editHandler.ts
+++ b/app/gui2/src/providers/widgetRegistry/editHandler.ts
@@ -1,4 +1,3 @@
-import type { GraphNavigator } from '@/providers/graphNavigator'
 import type { Interaction, InteractionHandler } from '@/providers/interactionHandler'
 import { injectInteractionHandler } from '@/providers/interactionHandler'
 import type { PortId } from '@/providers/portInfo'
@@ -69,10 +68,9 @@ export abstract class WidgetEditHandlerParent {
     return this.hooks.addItem?.() ?? this.parent?.addItem() ?? false
   }
 
-  protected pointerdown(event: PointerEvent, navigator: GraphNavigator): boolean | void {
-    if (this.hooks.pointerdown && this.hooks.pointerdown(event, navigator) !== false) return true
-    else
-      return this.activeChild.value ? this.activeChild.value.pointerdown(event, navigator) : false
+  protected pointerdown(event: PointerEvent): boolean | void {
+    if (this.hooks.pointerdown && this.hooks.pointerdown(event) !== false) return true
+    else return this.activeChild.value ? this.activeChild.value.pointerdown(event) : false
   }
 
   isActive() {
@@ -165,8 +163,8 @@ export class WidgetEditHandlerRoot extends WidgetEditHandlerParent implements In
     this.onEnd()
   }
 
-  override pointerdown(event: PointerEvent, navigator: GraphNavigator) {
-    return super.pointerdown(event, navigator)
+  override pointerdown(event: PointerEvent) {
+    return super.pointerdown(event)
   }
 
   protected override root() {
diff --git a/app/gui2/src/util/__tests__/reactivity.test.ts b/app/gui2/src/util/__tests__/reactivity.test.ts
index 7f59ae51f6fd..7a3024ee1e69 100644
--- a/app/gui2/src/util/__tests__/reactivity.test.ts
+++ b/app/gui2/src/util/__tests__/reactivity.test.ts
@@ -1,7 +1,7 @@
-import { LazySyncEffectSet, syncSet } from '@/util/reactivity'
+import { LazySyncEffectSet, syncSet, useWatchContext } from '@/util/reactivity'
 import { fc, test } from '@fast-check/vitest'
-import { expect, vi } from 'vitest'
-import { nextTick, reactive, ref } from 'vue'
+import { describe, expect, vi } from 'vitest'
+import { nextTick, reactive, ref, watchEffect, WatchStopHandle } from 'vue'
 
 test('LazySyncEffectSet', async () => {
   const lazySet = new LazySyncEffectSet()
@@ -75,9 +75,6 @@ test('LazySyncEffectSet', async () => {
   key2.value = 104
   lazySet.lazyEffect((onCleanup) => {
     const currentValue = key1.value
-    console.log('currentValue', currentValue)
-    console.log('lazilyUpdatedMap', lazilyUpdatedMap)
-
     lazilyUpdatedMap.set(currentValue, 'c' + runCount++)
     onCleanup(() => lazilyUpdatedMap.delete(currentValue))
   })
@@ -154,3 +151,30 @@ test.prop({
   syncSet(target, newState)
   expect([...target].sort()).toEqual([...newState].sort())
 })
+
+describe('Stopping WatchEffect prevents already scheduled effects:', () => {
+  async function testProper(watchEffect: (f: () => void) => WatchStopHandle) {
+    const dep = ref(false)
+    const f = vi.fn()
+    const stop = watchEffect(() => {
+      if (dep.value) {
+        f()
+      }
+    })
+    expect(f).not.toHaveBeenCalled()
+    dep.value = true
+    stop()
+    await nextTick()
+    expect(f).not.toHaveBeenCalled()
+  }
+
+  test('from useWatchContext', async () => {
+    const ctx = useWatchContext()
+    await testProper(ctx.watchEffect)
+  })
+
+  // We check if we're consistent with Vue API.
+  test('original from Vue', async () => {
+    await testProper(watchEffect)
+  })
+})
diff --git a/app/gui2/src/util/ast/__tests__/abstract.test.ts b/app/gui2/src/util/ast/__tests__/abstract.test.ts
index 7a662660478d..ef60d49544b9 100644
--- a/app/gui2/src/util/ast/__tests__/abstract.test.ts
+++ b/app/gui2/src/util/ast/__tests__/abstract.test.ts
@@ -1152,6 +1152,22 @@ test.each`
   expect(vector.code()).toBe(expectedVector)
 })
 
+// TODO[ao]: Fix cases where expected spacing feels odd.
+test.each`
+  initial        | start | deletedCount | expectedVector
+  ${'[1, 2, 3]'} | ${1}  | ${1}         | ${'[1, 3]'}
+  ${'[1, 2, 3]'} | ${0}  | ${1}         | ${'[ 2, 3]'}
+  ${'[1, 2, 3]'} | ${0}  | ${2}         | ${'[ 3]'}
+  ${'[1, 2, 3]'} | ${0}  | ${3}         | ${'[]'}
+  ${'[3]'}       | ${0}  | ${1}         | ${'[]'}
+  ${'[1, 2, 3]'} | ${2}  | ${1}         | ${'[1, 2]'}
+`('Splicing elements from vector $initial', ({ initial, start, deletedCount, expectedVector }) => {
+  const vector = Ast.Vector.tryParse(initial)
+  assertDefined(vector)
+  vector.splice(start, deletedCount)
+  expect(vector.code()).toBe(expectedVector)
+})
+
 test.each`
   initial        | index | value  | expected
   ${'[1, 2, 3]'} | ${0}  | ${'4'} | ${'[4, 2, 3]'}
diff --git a/app/gui2/src/util/ast/__tests__/aliasAnalysis.test.ts b/app/gui2/src/util/ast/__tests__/aliasAnalysis.test.ts
index 120f150c67b8..b1c40e15b395 100644
--- a/app/gui2/src/util/ast/__tests__/aliasAnalysis.test.ts
+++ b/app/gui2/src/util/ast/__tests__/aliasAnalysis.test.ts
@@ -76,8 +76,6 @@ function parseAnnotations(annotatedCode: string): {
       usageName: string | undefined,
       offset: number,
     ) => {
-      console.log(`Processing annotated identifier ${match}.`)
-
       // Sanity check: either both binding prefix and name are present, or both usage prefix and name are present.
       // Otherwise, we have an internal error in the regex.
       expect(bindingPrefix != null).toBe(bindingName != null)
@@ -137,7 +135,6 @@ class TestCase {
           `Duplicate binding with id ${annotation.id} at [${range}].`,
         ).toBe(false)
         prefixBindings.set(annotation.id, range)
-        console.debug(`Binding ${annotation.id}@[${range}]`)
         testCase.expectedAliases.set(range, [])
       }
     }
@@ -173,15 +170,12 @@ class TestCase {
     for (const [source, targets] of this.expectedAliases) {
       const foundTargets = analyzer.aliases.get(source)
       assertDefined(foundTargets, `Expected binding ${this.prettyPrint(source)} not found.`)
-      console.log(`Found expected binding ${this.prettyPrint(source)}`)
-
       for (const target of targets) {
         const foundConnection = foundTargets.has(target)
         // assert(foundConnection, `Expected connection [${source}] -> [${target}] not found.`)
         expect(foundConnection, `Expected connection [${source}] -> [${target}] not found.`).toBe(
           true,
         )
-        console.log(`Found expected connection [${source}] -> [${target}]`)
       }
     }
 
@@ -190,9 +184,6 @@ class TestCase {
         analyzer.unresolvedSymbols.has(unresolvedSymbol),
         `Expected unresolved symbol usage ${this.prettyPrint(unresolvedSymbol)} not observed.`,
       ).toBe(true)
-      console.log(
-        `Found expected unresolved symbol usage at ${this.prettyPrint(unresolvedSymbol)}.`,
-      )
     }
 
     expect(this.expectedUnresolvedSymbols.size, 'Unresolved symbols count mismatch.').toBe(
diff --git a/app/gui2/src/util/autoBlur.ts b/app/gui2/src/util/autoBlur.ts
index 8a520788dceb..3a09ec714a38 100644
--- a/app/gui2/src/util/autoBlur.ts
+++ b/app/gui2/src/util/autoBlur.ts
@@ -118,12 +118,12 @@ function handleClick(
   const chainedPointerdown = interaction.pointerdown
   const wrappedInteraction: Interaction = {
     ...interaction,
-    pointerdown: (e: PointerEvent, ...args) => {
+    pointerdown: (e: PointerEvent) => {
       if (condition(e)) {
         handler(wrappedInteraction)
         return false
       }
-      return chainedPointerdown ? chainedPointerdown(e, ...args) : false
+      return chainedPointerdown ? chainedPointerdown(e) : false
     },
   }
   return wrappedInteraction
diff --git a/app/gui2/src/util/data/vec2.ts b/app/gui2/src/util/data/vec2.ts
index 502bcdcf3cd9..58aa38b0aaed 100644
--- a/app/gui2/src/util/data/vec2.ts
+++ b/app/gui2/src/util/data/vec2.ts
@@ -11,6 +11,10 @@ export class Vec2 {
 
   static Zero: Vec2
 
+  static FromTuple(point: [x: number, y: number]): Vec2 {
+    return new Vec2(point[0], point[1])
+  }
+
   static FromXY(point: Readonly<{ x: number; y: number }>): Vec2 {
     return new Vec2(point.x, point.y)
   }
@@ -57,6 +61,10 @@ export class Vec2 {
     return new Vec2(this.x * scalar, this.y * scalar)
   }
 
+  scaleAround(scalar: number, pivotPoint: Vec2): Vec2 {
+    return this.sub(pivotPoint).scale(scalar).add(pivotPoint)
+  }
+
   distanceSquared(other: Vec2): number {
     const dx = this.x - other.x
     const dy = this.y - other.y
diff --git a/app/gui2/src/util/net.ts b/app/gui2/src/util/net.ts
index 3f4fb1a849f1..688d4af79ece 100644
--- a/app/gui2/src/util/net.ts
+++ b/app/gui2/src/util/net.ts
@@ -8,12 +8,17 @@ import {
 
 export { AbortScope, MockWebSocketTransport }
 
+const WS_OPTIONS = {
+  // We do not want to enqueue any messages, because after reconnecting we have to initProtocol again.
+  maxEnqueuedMessages: 0,
+}
+
 export function createRpcTransport(url: string): ReconnectingWebSocketTransport {
   if (url.startsWith('mock://')) {
     const mockName = url.slice('mock://'.length)
     return new MockWebSocketTransport(mockName)
   } else {
-    const transport = new ReconnectingWebSocketTransport(url)
+    const transport = new ReconnectingWebSocketTransport(url, WS_OPTIONS)
     return transport
   }
 }
@@ -24,7 +29,7 @@ export function createDataWebsocket(url: string, binaryType: 'arraybuffer' | 'bl
     mockWs.binaryType = binaryType
     return mockWs
   } else {
-    const websocket = new ReconnectingWebSocket(url)
+    const websocket = new ReconnectingWebSocket(url, undefined, WS_OPTIONS)
     websocket.binaryType = binaryType
     return websocket as WebSocket
   }
diff --git a/app/gui2/src/util/net/dataServer.ts b/app/gui2/src/util/net/dataServer.ts
index 48fa452b1ff3..9d1807ac13d2 100644
--- a/app/gui2/src/util/net/dataServer.ts
+++ b/app/gui2/src/util/net/dataServer.ts
@@ -98,7 +98,8 @@ export class DataServer extends ObservableV2<DataServerEvents> {
       this.scheduleInitializationAfterConnect()
     })
 
-    this.initialized = this.initialize()
+    if (websocket.readyState === WebSocket.OPEN) this.initialized = this.initialize()
+    else this.initialized = this.scheduleInitializationAfterConnect()
   }
 
   dispose() {
diff --git a/app/gui2/src/util/reactivity.ts b/app/gui2/src/util/reactivity.ts
index bb90195f9a87..f970be642511 100644
--- a/app/gui2/src/util/reactivity.ts
+++ b/app/gui2/src/util/reactivity.ts
@@ -14,6 +14,9 @@ import {
   MaybeRefOrGetter,
   queuePostFlushCb,
   reactive,
+  ReactiveEffect,
+  ReactiveEffectOptions,
+  ReactiveEffectRunner,
   Ref,
   shallowReactive,
   shallowRef,
@@ -35,6 +38,26 @@ export function evalWatchSource<T>(src: WatchSource<T>): T {
   return isRef(src) ? src.value : src()
 }
 
+/**
+ * Create a `ReactiveEffect`. This is similar to the `effect` function, but doesn't immediately run the created effect.
+ */
+export function lazyEffect<T = any>(
+  fn: () => T,
+  options?: ReactiveEffectOptions,
+): ReactiveEffectRunner<T> {
+  if ((fn as ReactiveEffectRunner).effect instanceof ReactiveEffect) {
+    fn = (fn as ReactiveEffectRunner).effect.fn
+  }
+
+  const e = new ReactiveEffect(fn)
+  if (options) {
+    Object.assign(e, options)
+  }
+  const runner = e.run.bind(e) as ReactiveEffectRunner
+  runner.effect = e
+  return runner
+}
+
 export type OnCleanup = (fn: () => void) => void
 export type StopEffect = () => void
 
@@ -71,13 +94,12 @@ export class LazySyncEffectSet {
           cleanup = fn
         }
 
-        const runner = effect(
+        const runner = lazyEffect(
           () => {
             callCleanup()
             fn(onCleanup)
           },
           {
-            lazy: true,
             scheduler: () => {
               if (this._dirtyRunners.size === 0) queuePostFlushCb(this._boundFlush)
               this._dirtyRunners.add(runner)
@@ -130,8 +152,10 @@ export function useWatchContext(): { watchEffect: (f: () => void) => WatchStopHa
   watch(jobs, () => {
     while (jobs.length > 0) {
       const job = jobs.pop()!
-      queued.delete(job)
-      job()
+      // Do not run scheduled job if it's stopped. It's consistent with vue's "watchEffect" (checked in tests)
+      if (queued.delete(job)) {
+        job()
+      }
     }
   })
   function watchEffect(f: () => void) {
@@ -144,7 +168,10 @@ export function useWatchContext(): { watchEffect: (f: () => void) => WatchStopHa
       },
       allowRecurse: true,
     })
-    return runner.effect.stop.bind(runner.effect)
+    return () => {
+      runner.effect.stop()
+      queued.delete(runner)
+    }
   }
   return { watchEffect }
 }
diff --git a/app/gui2/src/util/shortcuts.ts b/app/gui2/src/util/shortcuts.ts
index f2a662028d5b..8a2f9d147e00 100644
--- a/app/gui2/src/util/shortcuts.ts
+++ b/app/gui2/src/util/shortcuts.ts
@@ -83,7 +83,9 @@ const flagsOfButtonField = [
   POINTER_BUTTON_FLAG.PointerForward,
 ]
 
-function buttonFlagsForEvent(event: MouseEvent): PointerButtonFlags {
+function buttonFlagsForEvent(event: MouseEvent | TouchEvent | PointerEvent): PointerButtonFlags {
+  if ('TouchEvent' in window && event instanceof TouchEvent) return POINTER_BUTTON_FLAG.PointerMain
+  DEV: assert(event instanceof MouseEvent || event instanceof PointerEvent)
   // event.buttons keeps information about buttons being pressed, but in case of `click` or
   // `pointerup` events we also want to know what buttons were just released.
   return (event.buttons | (flagsOfButtonField[event.button] ?? 0)) as PointerButtonFlags
@@ -386,7 +388,7 @@ export function defineKeybinds<
     }
   }
 
-  function handler<Event_ extends KeyboardEvent | MouseEvent | PointerEvent>(
+  function handler<Event_ extends KeyboardEvent | MouseEvent | PointerEvent | TouchEvent>(
     handlers: Partial<
       Record<BindingName | typeof DefaultHandler, (event: Event_) => boolean | void>
     >,
diff --git a/app/gui2/src/util/visualizationBuiltins.ts b/app/gui2/src/util/visualizationBuiltins.ts
index 1692b90217d5..9d83d28e62f3 100644
--- a/app/gui2/src/util/visualizationBuiltins.ts
+++ b/app/gui2/src/util/visualizationBuiltins.ts
@@ -1,3 +1,2 @@
-export { default as VisualizationContainer } from '@/components/VisualizationContainer.vue'
 export { useVisualizationConfig } from '@/providers/visualizationConfig'
 export { defineKeybinds } from '@/util/shortcuts'
diff --git a/app/gui2/stories/SelectionBrushWrapper.vue b/app/gui2/stories/SelectionBrushWrapper.vue
index 739a09df8c79..d1edb9093b5f 100644
--- a/app/gui2/stories/SelectionBrushWrapper.vue
+++ b/app/gui2/stories/SelectionBrushWrapper.vue
@@ -26,12 +26,7 @@ const scaledSelectionAnchor = computed(() => selectionAnchor.value?.scale(naviga
 </script>
 
 <template>
-  <div
-    ref="viewportNode"
-    style="cursor: none; height: 100%"
-    v-on.="navigator.pointerEvents"
-    v-on..="selection.events"
-  >
+  <div ref="viewportNode" style="cursor: none; height: 100%" v-on="selection.events">
     <slot
       :scaledMousePos="scaledMousePos"
       :scaledSelectionAnchor="scaledSelectionAnchor"
diff --git a/app/gui2/stories/UserDefinedVisualization.story.vue b/app/gui2/stories/UserDefinedVisualization.story.vue
index f8c44b79e75e..b518162cbb0a 100644
--- a/app/gui2/stories/UserDefinedVisualization.story.vue
+++ b/app/gui2/stories/UserDefinedVisualization.story.vue
@@ -28,14 +28,11 @@ export const inputType = 'Any'
 \x3c/script>
 
 \x3cscript setup lang="ts">
-import { VisualizationContainer } from 'builtins'
 const props = defineProps<{ data: unknown }>()
 \x3c/script>
 
 \x3ctemplate>
-  <VisualizationContainer :belowToolbar="true">
-    <pre><code class="green-text" v-text="props.data"></code></pre>
-  </VisualizationContainer>
+  <pre><code class="green-text" v-text="props.data"></code></pre>
 \x3c/template>
 
 \x3cstyle scoped>
@@ -91,6 +88,8 @@ const mockFsWrapperProps = computed(() => ({
           :nodeSize="nodeSize"
           :isFocused="true"
           :isFullscreen="false"
+          :isFullscreenAllowed="true"
+          :isResizable="true"
           :isCircularMenuVisible="isCircularMenuVisible"
           @setVisualizationId="$event.module.kind === 'CurrentProject' && (type = $event.name)"
         />
diff --git a/app/gui2/stories/histoire/HstWrapper.vue b/app/gui2/stories/histoire/HstWrapper.vue
index a320b9436655..979470fca528 100644
--- a/app/gui2/stories/histoire/HstWrapper.vue
+++ b/app/gui2/stories/histoire/HstWrapper.vue
@@ -30,18 +30,11 @@ export default {
 
 <script lang="ts" setup>
 import { VTooltip as vTooltip } from 'floating-vue'
-import { withDefaults } from 'vue'
 
-withDefaults(
-  defineProps<{
-    title?: string
-    tag?: string
-  }>(),
-  {
-    title: undefined!,
-    tag: 'label',
-  },
-)
+const { title = undefined!, tag = 'label' } = defineProps<{
+  title?: string
+  tag?: string
+}>()
 </script>
 
 <template>
diff --git a/app/gui2/stories/setup.ts b/app/gui2/stories/setup.ts
index 5f42859f36a2..a0aec98952ed 100644
--- a/app/gui2/stories/setup.ts
+++ b/app/gui2/stories/setup.ts
@@ -102,40 +102,12 @@ export const setupVue3 = defineSetupVue3(({ app, addWrapper }) => {
   // Required for visualization stories.
   provideVisualizationConfig._mock(
     {
-      fullscreen: false,
-      savedSize: undefined,
-      scale: 1,
-      width: 200,
-      height: 150,
-      hide() {},
-      isCircularMenuVisible: false,
-      isBelowToolbar: false,
-      nodeSize: new Vec2(200, 150),
-      currentType: {
-        module: { kind: 'Builtin' },
-        name: 'Current Type',
-      },
-      icon: 'braces',
-      types: [
-        {
-          module: { kind: 'Builtin' },
-          name: 'Example',
-        },
-        {
-          module: { kind: 'Builtin' },
-          name: 'Types',
-        },
-        {
-          module: { kind: 'Builtin' },
-          name: 'Here',
-        },
-      ],
-      updateType() {},
+      size: new Vec2(200, 150),
       createNodes() {},
-      isFocused: false,
-      isPreview: false,
-      nodePosition: Vec2.Zero,
       nodeType: 'component',
+      setPreprocessor: () => {},
+      setToolbar: () => {},
+      setToolbarOverlay: () => {},
     },
     app,
   )
diff --git a/app/gui2/stories/story.css b/app/gui2/stories/story.css
index 4e7bda0d2246..8d111d1a04dd 100644
--- a/app/gui2/stories/story.css
+++ b/app/gui2/stories/story.css
@@ -20,7 +20,7 @@
   cursor: pointer !important;
 }
 
-.VisualizationContainer {
+.GraphVisualization {
   z-index: 0 !important;
   min-width: 0 !important;
 }
diff --git a/app/gui2/templates/visualization.vue b/app/gui2/templates/visualization.vue
index 39a4fcca4bc1..521ebc9a4ee1 100644
--- a/app/gui2/templates/visualization.vue
+++ b/app/gui2/templates/visualization.vue
@@ -16,7 +16,6 @@ interface Data {
 <script setup lang="ts">
 import { onMounted } from 'vue'
 
-import { VisualizationContainer } from 'builtins'
 // Optional: add your own external dependencies.
 // import dependency from 'https://<js dependency here>'
 //
@@ -43,10 +42,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <VisualizationContainer>
-    <!-- <content here> -->
-    {{ props.data }}
-  </VisualizationContainer>
+  <!-- <content here> -->
+  {{ props.data }}
 </template>
 
 <style scoped>
diff --git a/app/gui2/vite.config.ts b/app/gui2/vite.config.ts
index 81d65dc0d523..340a783fe560 100644
--- a/app/gui2/vite.config.ts
+++ b/app/gui2/vite.config.ts
@@ -11,13 +11,14 @@ import tailwindcssNesting from 'tailwindcss/nesting'
 import { defineConfig, type Plugin } from 'vite'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import wasm from 'vite-plugin-wasm'
-const projectManagerUrl =
-  process.env.E2E === 'true' ? 'ws://127.0.0.1:30536' : 'ws://127.0.0.1:30535'
 
+const dynHostnameWsUrl = (port: number) => JSON.stringify(`ws://__HOSTNAME__:${port}`)
+const projectManagerUrl = dynHostnameWsUrl(process.env.E2E === 'true' ? 30536 : 30535)
 const IS_CLOUD_BUILD = process.env.CLOUD_BUILD === 'true'
 const YDOC_SERVER_URL =
-  process.env.ENSO_POLYGLOT_YDOC_SERVER ??
-  (process.env.NODE_ENV === 'development' ? 'ws://localhost:5976' : undefined)
+  process.env.ENSO_POLYGLOT_YDOC_SERVER ? JSON.stringify(process.env.ENSO_POLYGLOT_YDOC_SERVER)
+  : process.env.NODE_ENV === 'development' ? dynHostnameWsUrl(5976)
+  : undefined
 
 await readEnvironmentFromFile()
 
@@ -31,8 +32,15 @@ export default defineConfig({
   envDir: fileURLToPath(new URL('.', import.meta.url)),
   plugins: [
     wasm(),
-    VueDevTools(),
-    vue(),
+    ...(process.env.NODE_ENV === 'development' ? [await VueDevTools()] : []),
+    vue({
+      customElement: ['**/components/visualizations/**', '**/components/shared/**'],
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith('enso-'),
+        },
+      },
+    }),
     react({
       include: fileURLToPath(new URL('../dashboard/**/*.tsx', import.meta.url)),
       babel: { plugins: ['@babel/plugin-syntax-import-attributes'] },
@@ -47,6 +55,7 @@ export default defineConfig({
       'Cross-Origin-Opener-Policy': 'same-origin',
       'Cross-Origin-Resource-Policy': 'same-origin',
     },
+    ...(process.env.GUI_HOSTNAME ? { host: process.env.GUI_HOSTNAME } : {}),
   },
   resolve: {
     conditions: ['source'],
@@ -59,8 +68,8 @@ export default defineConfig({
   define: {
     ...getDefines(),
     IS_CLOUD_BUILD: JSON.stringify(IS_CLOUD_BUILD),
-    PROJECT_MANAGER_URL: JSON.stringify(projectManagerUrl),
-    YDOC_SERVER_URL: JSON.stringify(YDOC_SERVER_URL),
+    PROJECT_MANAGER_URL: projectManagerUrl,
+    YDOC_SERVER_URL: YDOC_SERVER_URL,
     'import.meta.vitest': false,
     // Single hardcoded usage of `global` in aws-amplify.
     'global.TYPED_ARRAY_SUPPORT': true,
diff --git a/app/gui2/vitest.config.ts b/app/gui2/vitest.config.ts
index e85c2271f6e7..d9a8f57426d8 100644
--- a/app/gui2/vitest.config.ts
+++ b/app/gui2/vitest.config.ts
@@ -7,7 +7,7 @@ const config = mergeConfig(
   defineConfig({
     test: {
       environment: 'jsdom',
-      includeSource: ['./{src,shared,ydoc-server}/**/*.{ts,vue}'],
+      includeSource: ['./src/**/*.{ts,vue}'],
       exclude: [...configDefaults.exclude, 'e2e/*'],
       root: fileURLToPath(new URL('./', import.meta.url)),
       restoreMocks: true,
diff --git a/app/ide-desktop/client/electron-builder-config.ts b/app/ide-desktop/client/electron-builder-config.ts
index 5943adecca87..6d720fb42745 100644
--- a/app/ide-desktop/client/electron-builder-config.ts
+++ b/app/ide-desktop/client/electron-builder-config.ts
@@ -37,6 +37,7 @@ export interface Arguments {
   readonly ideDist: string
   readonly projectManagerDist: string
   readonly platform: electronBuilder.Platform
+  readonly sign: boolean
 }
 
 /** File association configuration, extended with information needed by the `enso-installer`. */
@@ -100,6 +101,12 @@ export const args: Arguments = await yargs(process.argv.slice(2))
       type: 'string',
       description: 'Overwrite the platform-default target',
     },
+    sign: {
+      type: 'boolean',
+      description: 'Should signing/notarization be performed (defaults to true)',
+      default: true,
+      coerce: (p: string) => p === 'true',
+    },
   }).argv
 
 // ======================================
@@ -109,7 +116,7 @@ export const args: Arguments = await yargs(process.argv.slice(2))
 /** File associations for the IDE. */
 export const EXTENDED_FILE_ASSOCIATIONS = [
   {
-    ext: fileAssociations.SOURCE_FILE_EXTENSION,
+    ext: `.${fileAssociations.SOURCE_FILE_EXTENSION}`,
     name: `${common.PRODUCT_NAME} Source File`,
     role: 'Editor',
     // Note that MIME type is used on Windows by the enso-installer to register the file association.
@@ -118,7 +125,7 @@ export const EXTENDED_FILE_ASSOCIATIONS = [
     progId: 'Enso.Source',
   },
   {
-    ext: fileAssociations.BUNDLED_PROJECT_EXTENSION,
+    ext: `.${fileAssociations.BUNDLED_PROJECT_EXTENSION}`,
     name: `${common.PRODUCT_NAME} Project Bundle`,
     role: 'Editor',
     mimeType: 'application/gzip',
@@ -286,7 +293,11 @@ export function createElectronBuilderConfig(passedArgs: Arguments): electronBuil
 
     afterSign: async (context: electronBuilder.AfterPackContext) => {
       // Notarization for macOS.
-      if (passedArgs.platform === electronBuilder.Platform.MAC && process.env.CSC_LINK != null) {
+      if (
+        passedArgs.platform === electronBuilder.Platform.MAC &&
+        process.env.CSC_LINK != null &&
+        passedArgs.sign
+      ) {
         const {
           packager: {
             appInfo: { productFilename: appName },
diff --git a/app/ide-desktop/client/src/fileAssociations.ts b/app/ide-desktop/client/src/fileAssociations.ts
index 4945ca420048..19130d77b7f8 100644
--- a/app/ide-desktop/client/src/fileAssociations.ts
+++ b/app/ide-desktop/client/src/fileAssociations.ts
@@ -80,8 +80,15 @@ function getClientArguments(args = process.argv): readonly string[] {
       return args.slice(separatorIndex + 1)
     }
   } else {
-    // Drop the leading executable name.
-    return args.slice(1)
+    const noSandbox = args.indexOf('--no-sandbox')
+    if (noSandbox !== NOT_FOUND) {
+      let v = [...args]
+      v.splice(noSandbox, 1)
+      return v.slice(1)
+    } else {
+      // Drop the leading executable name.
+      return args.slice(1)
+    }
   }
 }
 
@@ -114,7 +121,7 @@ export function onFileOpened(event: electron.Event, path: string): string | null
 
 /** Set up the `open-file` event handler that might import a project and invoke the given callback,
  * if this IDE instance should load the project. See {@link onFileOpened} for more details.
- * @param setProjectToOpen - A function that will be called with the ID of the project to open. */
+ * @param setProjectToOpen - A function that will be called with the path of the project to open. */
 export function setOpenFileEventHandler(setProjectToOpen: (path: string) => void) {
   electron.app.on('open-file', (_event, path) => {
     logger.log(`Opening file '${path}'.`)
@@ -137,7 +144,7 @@ export function setOpenFileEventHandler(setProjectToOpen: (path: string) => void
       logger.log(`Got path '${path.toString()}' from second instance.`)
       event.preventDefault()
       const file = onFileOpened(event, path)
-      if (file) {
+      if (file != null) {
         setProjectToOpen(file)
       }
     }
diff --git a/app/ide-desktop/client/src/index.ts b/app/ide-desktop/client/src/index.ts
index 21257912fa89..50dff096f6ef 100644
--- a/app/ide-desktop/client/src/index.ts
+++ b/app/ide-desktop/client/src/index.ts
@@ -39,6 +39,17 @@ import * as urlAssociations from '@/urlAssociations'
 
 const logger = contentConfig.logger
 
+/**
+ * Convert path to proper `file://` URL.
+ */
+function pathToURL(path: string): URL {
+  if (process.platform === 'win32') {
+    return new URL(encodeURI(`file:///${path.replaceAll('\\', '/')}`))
+  } else {
+    return new URL(encodeURI(`file://${path}`))
+  }
+}
+
 // ===========
 // === App ===
 // ===========
@@ -63,7 +74,7 @@ class App {
         const project = fileAssociations.handleOpenFile(path)
         this.window?.webContents.send(ipc.Channel.openProject, project)
       } else {
-        this.setProjectToOpenOnStartup(path)
+        this.setProjectToOpenOnStartup(pathToURL(path))
       }
     })
 
@@ -149,17 +160,17 @@ class App {
    * This method should be called before the application is ready, as it only
    * modifies the startup options. If the application is already initialized,
    * an error will be logged, and the method will have no effect.
-   * @param projectId - The ID of the project to be opened on startup. */
-  setProjectToOpenOnStartup(projectId: string) {
+   * @param projectUrl - The `file://` url of project to be opened on startup. */
+  setProjectToOpenOnStartup(projectUrl: URL) {
     // Make sure that we are not initialized yet, as this method should be called before the
     // application is ready.
     if (!electron.app.isReady()) {
-      logger.log(`Setting the project to open on startup to '${projectId}'.`)
-      this.args.groups.startup.options.project.value = projectId
+      logger.log(`Setting the project to open on startup to '${projectUrl.toString()}'.`)
+      this.args.groups.startup.options.project.value = projectUrl.toString()
     } else {
       logger.error(
         "Cannot set the project to open on startup to '" +
-          projectId +
+          projectUrl.toString() +
           "', as the application is already initialized.",
       )
     }
@@ -173,7 +184,7 @@ class App {
       if (fileToOpen != null) {
         // The IDE must receive the project path, otherwise if the IDE has a custom root directory
         // set then it is added to the (incorrect) default root directory.
-        this.setProjectToOpenOnStartup(`file://${encodeURI(fileToOpen)}`)
+        this.setProjectToOpenOnStartup(pathToURL(fileToOpen))
       }
 
       if (urlToOpen != null) {
diff --git a/app/ide-desktop/client/src/projectManagement.ts b/app/ide-desktop/client/src/projectManagement.ts
index 244d612f2166..4808b39ef679 100644
--- a/app/ide-desktop/client/src/projectManagement.ts
+++ b/app/ide-desktop/client/src/projectManagement.ts
@@ -422,9 +422,11 @@ export function bumpMetadata(
     let index: number | null = null
     const prefix = `${currentName} `
     for (const sibling of fs.readdirSync(parentDirectory, { withFileTypes: true })) {
-      if (sibling.isDirectory()) {
+      const siblingPath = pathModule.join(parentDirectory, sibling.name)
+      if (siblingPath === projectRoot) {
+        continue
+      } else if (sibling.isDirectory()) {
         try {
-          const siblingPath = pathModule.join(parentDirectory, sibling.name)
           const siblingName = getPackageName(siblingPath)
           if (siblingName === currentName) {
             index = index ?? 2
diff --git a/app/ide-desktop/client/tasks/signArchivesMacOs.ts b/app/ide-desktop/client/tasks/signArchivesMacOs.ts
index b19fa9959d7b..c4321b8cb12f 100644
--- a/app/ide-desktop/client/tasks/signArchivesMacOs.ts
+++ b/app/ide-desktop/client/tasks/signArchivesMacOs.ts
@@ -103,6 +103,8 @@ async function ensoPackageSignables(resourcesDir: string): Promise<Signable[]> {
       [
         'org/sqlite/native/Mac/aarch64/libsqlitejdbc.jnilib',
         'org/sqlite/native/Mac/x86_64/libsqlitejdbc.jnilib',
+        'org/sqlite/native/Mac/aarch64/libsqlitejdbc.dylib',
+        'org/sqlite/native/Mac/x86_64/libsqlitejdbc.dylib',
       ],
     ],
     [
diff --git a/app/ide-desktop/common/package.json b/app/ide-desktop/common/package.json
index 90b0d55867a7..5b38e91f70b2 100644
--- a/app/ide-desktop/common/package.json
+++ b/app/ide-desktop/common/package.json
@@ -36,7 +36,7 @@
     "react": "^18.3.1",
     "@tanstack/query-persist-client-core": "^5.54.0",
     "@tanstack/vue-query": ">= 5.54.0 < 5.56.0",
-    "vue": "^3.4.19",
+    "vue": "^3.5.2",
     "vitest": "^1.3.1"
   }
 }
diff --git a/app/ide-desktop/common/src/text/english.json b/app/ide-desktop/common/src/text/english.json
index b01524dbc25e..b8b0d9bd8ada 100644
--- a/app/ide-desktop/common/src/text/english.json
+++ b/app/ide-desktop/common/src/text/english.json
@@ -216,12 +216,21 @@
   "likes": "Likes",
   "shortcuts": "Shortcuts",
   "download": "Download",
+  "disable": "Disable",
+  "enable": "Enable",
   "email": "Email",
   "intro": "Intro",
   "emailIsRequired": "Email is required",
   "emailIsInvalid": "Email is invalid",
   "emailAlreadyExists": "Email already exists",
   "emailAlreadyAdded": "Email already added",
+  "otp": "OTP",
+  "totp": "TOTP",
+  "display": "Display",
+  "invalidOtp": "Invalid OTP",
+  "invalidTotp": "Invalid TOTP",
+  "enterOtp": "To continue, please enter the 6-digit verification code generated by your authenticator app.",
+  "enterTotp": "To continue, please enter the 6-digit verification code generated by your authenticator app.",
   "password": "Password",
   "reset": "Reset",
   "members": "Members",
@@ -311,7 +320,7 @@
   "newDatalink": "New Datalink",
   "newSecret": "New Secret",
   "newLabel": "New Label",
-  "newEmptyProject": "New Empty Project",
+  "newEmptyProject": "New Project",
 
   "stopExecution": "Stop execution",
   "openInEditor": "Open in editor",
@@ -341,9 +350,9 @@
   "loadingAppMessage": "Loading Enso...",
   "appErroredMessage": "Enso encountered an unrecoverable error.",
   "appErroredPrompt": "Please try refreshing or installing an updated version.",
-  "discoverWhatsNew": "Discover what’s new",
+  "discoverWhatsNew": "Learn",
   "sampleAndCommunityProjects": "Sample and community projects",
-  "startWithATemplate": "Start with a template",
+  "startWithATemplate": "Discover",
   "openInfoMenu": "Open info menu",
   "noProjectIsCurrentlyOpen": "No project is currently open.",
   "versionOutdatedTitle": "Upgrade Enso Now",
@@ -370,6 +379,7 @@
   "thisFolderIsEmpty": "This folder is empty.",
   "yourTrashIsEmpty": "Your trash is empty.",
   "deleteTheAssetTypeTitle": "delete the $0 '$1'",
+  "trashTheAssetTypeTitle": "move the $0 '$1' to Trash",
   "notImplemetedYet": "Not implemented yet.",
   "newLabelButtonLabel": "new label",
   "settingUsername": "Setting username...",
@@ -473,6 +483,14 @@
   "enableAssetsTableBackgroundRefreshInterval": "Refresh interval",
   "enableAssetsTableBackgroundRefreshIntervalDescription": "Set the interval in ms for the assets table to refresh in the background.",
 
+  "enableMultitabs": "Enable Multi-Tabs",
+  "enableMultitabsDescription": "Open multiple projects at the same time.",
+
+  "enableAssetsTableBackgroundRefresh": "Enable Assets Table Background Refresh",
+  "enableAssetsTableBackgroundRefreshDescription": "Automatically refresh the assets table in the background.",
+  "enableAssetsTableBackgroundRefreshInterval": "Refresh interval",
+  "enableAssetsTableBackgroundRefreshIntervalDescription": "Set the interval in ms for the assets table to refresh in the background.",
+
   "deleteLabelActionText": "delete the label '$0'",
   "deleteSelectedAssetActionText": "delete '$0'",
   "deleteSelectedAssetsActionText": "delete $0 selected items",
@@ -536,14 +554,16 @@
   "confirmNewPasswordLabel": "Confirm new password",
   "confirmNewPasswordPlaceholder": "Confirm your new password",
 
-  "selectTemplate": "Select a template",
+  "selectTemplate": "Discover Enso Analytics",
   "welcomeSubtitle": "Explore templates, plugins, and data sources to kickstart your next big idea.",
-  "newsItem3Beta": "Read what’s new in Enso 3.0 Beta",
-  "newsItem3BetaDescription": "Learn about Enso Cloud, new data libraries, and Enso AI.",
-  "newsItemWeeklyTutorials": "Watch weekly Enso tutorials",
-  "newsItemWeeklyTutorialsDescription": "Subscribe not to miss new weekly tutorials.",
-  "newsItemCommunityServer": "Join our community server",
-  "newsItemCommunityServerDescription": "Chat with our team and other Enso users.",
+  "newsItem3Beta": "Read what’s new in Enso",
+  "newsItem3BetaDescription": "Learn about new features and whats coming soon.",
+  "newsItemWeeklyTutorials": "Watch tutorials and webinars",
+  "newsItemWeeklyTutorialsDescription": "Subscribe not to miss new updates.",
+  "newsItemHelpServer": "Read the documentation",
+  "newsItemHelpServerDescription": "Learn how to use Enso.",
+  "newsItemCommunityServer": "Join the community",
+  "newsItemCommunityServerDescription": "Chat with Enso team and other users.",
 
   "drivePageName": "Data Catalog",
   "editorPageName": "Spatial Analysis",
@@ -565,17 +585,17 @@
   "soloPlanName": "Solo",
   "soloPlanSubtitle": "For individuals",
   "soloPlanPricing": "$60 per user / month, billed annually",
-  "soloPlanFeatures": "Everything from free plan; 10GB Cloud Storage; 1 User; Datalinks; Version Control for files and workflows; Enso Copilot",
+  "soloPlanFeatures": "Everything from free plan; 10GB Cloud Storage; Single user only; Cloud catalog and execution; Secrets and Datalinks; Basic Version Control",
   "soloPlanSeatsDescription": "This plan is only for a single user",
   "teamPlanName": "Team",
   "teamPlanSubtitle": "For small teams",
   "teamPlanPricing": "$150 per user / month, billed annually",
-  "teamPlanFeatures": "Everything from free plan; 100GB Cloud Storage; Up to 10 users sharing; Datalinks; Version Control for files and workflows; Enso Copilot; Multiple Lifecycle Environments",
+  "teamPlanFeatures": "Everything from Solo plan; 100GB Cloud Storage; Up to 10 users; Time-based Scheduling; Advanced Version Control; Browser based execution; Basic audit logs",
   "teamPlanSeatsDescription": "This plan allows to buy up to $0 seats",
   "enterprisePlanName": "Enterprise",
   "enterprisePlanSubtitle": "For large organizations",
   "enterprisePlanPricing": "$250 per user / month, billed annually",
-  "enterprisePlanFeatures": "Everything from free plan; 1000+GB Cloud Storage; Unlimited users sharing; Datalinks; Version Control for files and workflows; Enso Copilot; Multiple Lifecycle Environments; Data access and modification logs; Priority Support; Fine-grained files and workflows permissions; Federated Log On",
+  "enterprisePlanFeatures": "Everything from Team plan; 1000+GB Cloud Storage; Unlimited users; Advanced Scheduling; REST API; Data access and modification logs; Priority Support; Fine-grained permission Model; Federated Log On",
   "enterprisePlanSeatsDescription": "This plan does not have a limit on the number of seats",
   "subscribe": "Subscribe",
   "currentPlan": "Current Plan",
@@ -606,8 +626,7 @@
   "SLSA": "Enso Software License And Services Agreement",
   "slsaLicenseAgreementDescription1": "This Order is governed by the Software License and Service Agreement found at",
   "slsaLicenseAgreementDescription2": ", (the “Agreement”). All capitalized terms used in this Customer Order but not otherwise defined herein shall have the meanings set forth in the Agreement.\n                      Except as expressly provided in the Agreement, Products and Services purchased under this Customer Order are non-cancelable and non-refundable.",
-
-  "downgradeInfo": "Looking for downgrade options?",
+  "downgradeInfo": "to downgrade",
 
   "someAgreementsHaveBeenUpdated": "Some agreements have been updated. Please re-read and agree to continue.",
   "licenseAgreementTitle": "Enso Terms of Service",
@@ -640,6 +659,7 @@
   "accessedByProjectsColumnName": "Accessed by projects",
   "accessedDataColumnName": "Accessed data",
   "docsColumnName": "Docs",
+  "rootFolderColumnName": "Root folder",
 
   "settingsShortcut": "Settings",
   "closeTabShortcut": "Close Tab",
@@ -813,6 +833,24 @@
   "userNameSettingsInput": "Name",
   "userEmailSettingsInput": "Email",
   "changePasswordSettingsSection": "Change Password",
+  "setup2FASettingsSection": "Two-Factor Authentication (2FA)",
+  "setup2FASettingsCustomEntryAliases": "two-factor authentication\n2fa",
+  "setup2FASettingsDescription": "Add an extra layer of security to your account by enabling two-factor authentication.",
+  "enable2FA": "Enable 2FA",
+  "enable2FADescription": "Require a code from your authenticator app to log in.",
+  "scanQR": "Scan this QR code",
+  "scanQRDescription": "Use an authenticator app like Google Authenticator or Authy to scan this QR code and set up 2FA.",
+  "copyLink": "Copy this link",
+  "copyLinkDescription": "If you can't scan the QR code, you can copy this link and paste it into your authenticator app.",
+  "enterCode": "Enter the code",
+  "enterCodeDescription": "Enter the code from your authenticator app to verify 2FA.",
+  "verificationCode": "Verification code",
+  "verificationCodePlaceholder": "Enter the verification code",
+  "2FAEnabled": "2FA is enabled",
+  "2FAEnabledDescription": "Your account is currently protected with two-factor authentication.",
+  "disable2FA": "Disable 2FA",
+  "disable2FADescription": "Turning off two-factor authentication will make your account less secure.",
+  "disable2FAWarning": "Are you sure you want to disable two-factor authentication? Turning off two-factor authentication will make your account less secure. You will still need to enter a verification code to disable 2FA.",
   "changePasswordSettingsCustomEntryAliases": "current password\nnew password\nconfirm new password",
   "deleteUserAccountSettingsSection": "Delete User Account",
   "deleteUserAccountSettingsCustomEntryAliases": "danger zone\ndelete this user account",
diff --git a/app/ide-desktop/common/src/text/index.ts b/app/ide-desktop/common/src/text/index.ts
index 012acd4ffd42..5a143e69eec9 100644
--- a/app/ide-desktop/common/src/text/index.ts
+++ b/app/ide-desktop/common/src/text/index.ts
@@ -43,6 +43,7 @@ interface PlaceholderOverrides {
   readonly deleteUserGroupActionText: [groupName: string]
   readonly removeUserFromUserGroupActionText: [userName: string, groupName: string]
   readonly confirmPrompt: [action: string]
+  readonly trashTheAssetTypeTitle: [assetType: string, assetName: string]
   readonly deleteTheAssetTypeTitle: [assetType: string, assetName: string]
   readonly couldNotInviteUser: [userEmail: string]
   readonly filesWithoutConflicts: [fileCount: number]
diff --git a/app/ydoc-server-nodejs/src/main.ts b/app/ydoc-server-nodejs/src/main.ts
index e549839787e5..2f5ef330a051 100644
--- a/app/ydoc-server-nodejs/src/main.ts
+++ b/app/ydoc-server-nodejs/src/main.ts
@@ -7,7 +7,7 @@ import { createGatewayServer } from 'ydoc-server'
 
 const DEFAULT_PORT = 5976
 const PORT = (process.env.PORT != null && parseInt(process.env.PORT, 10)) || DEFAULT_PORT
-const HOSTNAME = process.env.HOSTNAME ?? 'localhost'
+const HOSTNAME = process.env.GUI_HOSTNAME ?? 'localhost'
 const LANGUAGE_SERVER_URL = process.env.LANGUAGE_SERVER_URL
 
 await runServer()
diff --git a/app/ydoc-shared/src/ast/tree.ts b/app/ydoc-shared/src/ast/tree.ts
index a63c39a7e080..cc1faf71c866 100644
--- a/app/ydoc-shared/src/ast/tree.ts
+++ b/app/ydoc-shared/src/ast/tree.ts
@@ -2459,6 +2459,12 @@ export class MutableVector extends Vector implements MutableAst {
     this.fields.set('elements', elements)
   }
 
+  splice(start: number, deletedCount: number) {
+    const elements = [...this.fields.get('elements')]
+    elements.splice(start, deletedCount)
+    this.fields.set('elements', elements)
+  }
+
   keep(predicate: (ast: Ast) => boolean) {
     const elements = this.fields.get('elements')
     const filtered = elements.filter(
diff --git a/app/ydoc-shared/src/util/net/ReconnectingWSTransport.ts b/app/ydoc-shared/src/util/net/ReconnectingWSTransport.ts
index 2ae14f848e50..753530a31e21 100644
--- a/app/ydoc-shared/src/util/net/ReconnectingWSTransport.ts
+++ b/app/ydoc-shared/src/util/net/ReconnectingWSTransport.ts
@@ -7,7 +7,7 @@
 import { WebSocketTransport } from '@open-rpc/client-js'
 import WS from 'isomorphic-ws'
 import { WebSocket } from 'partysocket'
-import ReconnectingWebSocket, { type WebSocketEventMap } from 'partysocket/ws'
+import ReconnectingWebSocket, { Options, type WebSocketEventMap } from 'partysocket/ws'
 
 export { ReconnectingWebSocket }
 
@@ -20,10 +20,13 @@ export interface AddEventListenerOptions {
 
 export class ReconnectingWebSocketTransport extends WebSocketTransport {
   private _reconnectingConnection: ReconnectingWebSocket
-  constructor(uri: string) {
+  constructor(uri: string, wsOptions: Options = {}) {
     super(uri)
     this.uri = uri
-    this._reconnectingConnection = new WebSocket(uri, undefined, { WebSocket: WS })
+    this._reconnectingConnection = new WebSocket(uri, undefined, {
+      WebSocket: WS,
+      ...wsOptions,
+    })
     // Make sure that the WebSocketTransport implementation uses this version of socket.
     this.connection = this._reconnectingConnection as any
   }
diff --git a/build.sbt b/build.sbt
index 29b842446712..f6e8d7143ff5 100644
--- a/build.sbt
+++ b/build.sbt
@@ -769,6 +769,14 @@ lazy val `syntax-rust-definition` = project
     publish / skip := false,
     autoScalaLibrary := false,
     crossPaths := false,
+    libraryDependencies ++= Seq(
+      "org.slf4j" % "slf4j-api" % slf4jVersion
+    ),
+    moduleDependencies := {
+      Seq(
+        "org.slf4j" % "slf4j-api" % slf4jVersion
+      )
+    },
     javaModuleName := "org.enso.syntax",
     Compile / sourceGenerators += generateParserJavaSources,
     Compile / resourceGenerators += generateRustParserLib,
@@ -3583,14 +3591,47 @@ lazy val `std-tableau` = project
         val unmanagedPath = unmanagedDirectory.toPath
         IO.withTemporaryDirectory(
           tmp => {
-            val files = IO.unzipURL(
-              unmanagedExternalZip.value,
-              tmp,
-              f =>
-                f.endsWith(".jar") && !f.contains("gradle") && !f.contains(
-                  "javadoc"
-                ) && !f.contains("jna")
-            )
+            import scala.concurrent.ExecutionContext.Implicits.global
+            implicit val filesNotEmptySuccess: retry.Success[Set[File]] =
+              retry.Success(!_.isEmpty)
+            import scala.concurrent.duration._
+            val future = retry.Backoff(4, 1.second).apply { () =>
+              scala.concurrent.Future {
+                try {
+                  IO.unzipURL(
+                    unmanagedExternalZip.value,
+                    tmp,
+                    f =>
+                      f.endsWith(".jar") && !f.contains("gradle") && !f
+                        .contains(
+                          "javadoc"
+                        ) && !f.contains("jna")
+                  )
+                } catch {
+                  case _: java.net.SocketException |
+                      _: java.net.ConnectException =>
+                    Set.empty[File]
+                }
+              }
+            }
+            future.onComplete { result =>
+              if (result.isFailure || result.get.isEmpty) {
+                logger.log(
+                  Level.Error,
+                  "Failed to fetch any external artifacts for tableau"
+                )
+              }
+            }
+            val files = scala.concurrent.Await.result(future, 60.seconds)
+            if (files.isEmpty) {
+              logger.log(
+                Level.Error,
+                "Failed to fetch any external artifacts for tableau"
+              )
+              throw new IllegalStateException(
+                "Failed to fetch any external artifacts"
+              )
+            }
             files.map { f =>
               IO.move(f, unmanagedPath.resolve(f.getName).toFile)
               Attributed.blank(unmanagedPath.resolve(f.getName).toFile)
diff --git a/build/build/src/ci_gen/job.rs b/build/build/src/ci_gen/job.rs
index 9e273205124c..615071a1da6c 100644
--- a/build/build/src/ci_gen/job.rs
+++ b/build/build/src/ci_gen/job.rs
@@ -526,7 +526,7 @@ pub struct PackageIde;
 impl JobArchetype for PackageIde {
     fn job(&self, target: Target) -> Job {
         RunStepsBuilder::new(
-            "ide build --backend-source current-ci-run --gui-upload-artifact false",
+            "ide build --backend-source current-ci-run --gui-upload-artifact false --gui-sign-artifacts false",
         )
         .customize(with_packaging_steps(target.0))
         .build_job("Package New IDE", target)
diff --git a/build/build/src/engine.rs b/build/build/src/engine.rs
index 49088a7790b4..337c1bb537b0 100644
--- a/build/build/src/engine.rs
+++ b/build/build/src/engine.rs
@@ -42,16 +42,71 @@ pub async fn download_project_templates(client: reqwest::Client, enso_root: Path
     let output_base = enso_root.join("lib/scala/pkg/src/main/resources/");
     let url_base = Url::parse("https://github.com/enso-org/project-templates/raw/main/")?;
     let to_handle = [
-        ("Orders", vec!["data/store_data.xlsx", "src/Main.enso"]),
-        ("Restaurants", vec!["data/la_districts.csv", "data/restaurants.csv", "src/Main.enso"]),
+        ("Orders", vec![
+            "data/store_data.xlsx",
+            "src/eaep.png",
+            "src/excel1.png",
+            "src/excel2.png",
+            "src/excel3.png",
+            "src/eyeball_viz.png",
+            "src/Main.enso",
+        ]),
+        ("Restaurants", vec![
+            "data/la_districts.csv",
+            "data/mapcolors.json",
+            "data/restaurants.csv",
+            "src/eaep.png",
+            "src/Main.enso",
+            "src/map1.png",
+            "src/map2.png",
+            "src/table1.png",
+        ]),
         ("Stargazers", vec!["src/Main.enso"]),
         ("Colorado_COVID", vec![
             "data/CDPHE_COVID19_County_Status_Metrics.csv",
             "data/ColoradoGeoData.db",
+            "src/eaep.png",
+            "src/Main.enso",
+            "src/map.png",
+            "src/table1.png",
+            "src/table2.png",
+        ]),
+        ("Monthly_Sales", vec![
+            "data/Sales_Sample_Data.xlsx",
+            "src/eaep.png",
+            "src/excel1.png",
             "src/Main.enso",
         ]),
+        ("Bank_Holiday_Rain", vec!["src/bankholiday.png", "src/eaep.png", "src/Main.enso"]),
         ("KMeans", vec!["src/Main.enso"]),
         ("NASDAQReturns", vec!["src/Main.enso"]),
+        ("Getting_Started_Reading", vec![
+            "src/eags.png",
+            "src/loadfile.gif",
+            "src/Main.enso",
+            "src/sheets.gif",
+            "src/showdata.gif",
+            "src/simpleexpression.gif",
+            "src/table_solution.png",
+            "src/table_viz.png",
+        ]),
+        ("Getting_Started_Aggregating", vec![
+            "data/sample_bank_data.xlsx",
+            "src/answer_table.png",
+            "src/eags.png",
+            "src/Main.enso",
+            "src/set.gif",
+            "src/table1.png",
+        ]),
+        ("Getting_Started_Cleansing", vec!["data/crm_data.csv", "src/eags.png", "src/Main.enso"]),
+        ("Getting_Started_Selecting", vec![
+            "data/crm_data.csv",
+            "data/Customer_Data.xlsx",
+            "src/eags.png",
+            "src/Main.enso",
+            "src/table1.png",
+            "src/table2.png",
+        ]),
     ];
 
     let mut futures = Vec::<BoxFuture<'static, Result>>::new();
diff --git a/build/build/src/engine/context.rs b/build/build/src/engine/context.rs
index bc6702bfa784..c4c2a61e263c 100644
--- a/build/build/src/engine/context.rs
+++ b/build/build/src/engine/context.rs
@@ -190,6 +190,16 @@ impl RunContext {
         graalpy.install_if_missing(&self.cache).await?;
         ide_ci::programs::graalpy::GraalPy.require_present().await?;
 
+        if self.config.test_java_generated_from_rust {
+            // Ensure all runtime dependencies are resolved and exported so that they can be
+            // appended to classpath
+            let sbt = engine::sbt::Context {
+                repo_root:         self.paths.repo_root.path.clone(),
+                system_properties: default(),
+            };
+            sbt.call_arg("syntax-rust-definition/Runtime/managedClasspath").await?;
+        }
+
         prepare_simple_library_server.await??;
         Ok(())
     }
diff --git a/build/build/src/ide/web.rs b/build/build/src/ide/web.rs
index b0dc8df8246b..5c45473826e6 100644
--- a/build/build/src/ide/web.rs
+++ b/build/build/src/ide/web.rs
@@ -45,6 +45,7 @@ pub mod env {
         ENSO_BUILD_PROJECT_MANAGER, PathBuf;
         ENSO_BUILD_GUI, PathBuf;
         ENSO_BUILD_ICONS, PathBuf;
+        ENSO_BUILD_SIGN, bool;
         /// List of files that should be copied to the Gui.
         ENSO_BUILD_GUI_WASM_ARTIFACTS, Vec<PathBuf>;
         ENSO_BUILD_GUI_ASSETS, PathBuf;
@@ -269,6 +270,7 @@ impl IdeDesktop {
         output_path: impl AsRef<Path>,
         target_os: OS,
         target: Option<String>,
+        sign: bool,
     ) -> Result {
         let output_path = output_path.as_ref();
         let electron_config = output_path.join("electron-builder.json");
@@ -283,9 +285,11 @@ impl IdeDesktop {
 
         crate::web::install(&self.repo_root).await?;
         let pm_bundle = ProjectManagerInfo::new(project_manager)?;
+        let sign_artifacts = &sign;
         self.pnpm()?
             .set_env(env::ENSO_BUILD_GUI, gui.as_ref())?
             .set_env(env::ENSO_BUILD_IDE, output_path)?
+            .set_env(env::ENSO_BUILD_SIGN, sign_artifacts)?
             .try_applying(&pm_bundle)?
             .run("build:ide")
             .run_ok()
@@ -301,12 +305,14 @@ impl IdeDesktop {
             None => vec![],
         };
 
+
         self.pnpm()?
             .try_applying(&icons)?
             .apply(&RemoveEmptyCscEnvVars)
             // .env("DEBUG", "electron-builder")
             .set_env(env::ENSO_BUILD_GUI, gui.as_ref())?
             .set_env(env::ENSO_BUILD_IDE, output_path)?
+            .set_env(env::ENSO_BUILD_SIGN, sign_artifacts)?
             .set_env(env::ENSO_BUILD_PROJECT_MANAGER, project_manager.as_ref())?
             .set_env(enso_install_config::ENSO_BUILD_ELECTRON_BUILDER_CONFIG, &electron_config)?
             .run("dist:ide")
diff --git a/build/build/src/project/ide.rs b/build/build/src/project/ide.rs
index 58e1d9b980e2..263ff4fc8899 100644
--- a/build/build/src/project/ide.rs
+++ b/build/build/src/project/ide.rs
@@ -88,6 +88,7 @@ pub struct BuildInput {
     pub electron_target: Option<String>,
     /// The name base used to generate CI run artifact names.
     pub artifact_name:   String,
+    pub sign_artifacts:  bool,
 }
 
 #[derive(Clone, Copy, Debug)]
@@ -109,14 +110,28 @@ impl Ide {
         input: BuildInput,
         output_path: impl AsRef<Path> + Send + Sync + 'static,
     ) -> BoxFuture<'static, Result<Artifact>> {
-        let BuildInput { version, project_manager, gui, electron_target, artifact_name: _ } = input;
+        let BuildInput {
+            version,
+            project_manager,
+            gui,
+            electron_target,
+            artifact_name: _,
+            sign_artifacts,
+        } = input;
         let ide_desktop = ide_desktop_from_context(context);
         let target_os = self.target_os;
         let target_arch = self.target_arch;
         async move {
             let (gui, project_manager) = try_join!(gui, project_manager)?;
             ide_desktop
-                .dist(&gui, &project_manager, &output_path, target_os, electron_target)
+                .dist(
+                    &gui,
+                    &project_manager,
+                    &output_path,
+                    target_os,
+                    electron_target,
+                    sign_artifacts,
+                )
                 .await?;
             Ok(Artifact::new(target_os, target_arch, &version, output_path))
         }
diff --git a/build/build/src/rust/parser.rs b/build/build/src/rust/parser.rs
index 76b3041baeb1..580f30f469c0 100644
--- a/build/build/src/rust/parser.rs
+++ b/build/build/src/rust/parser.rs
@@ -9,14 +9,15 @@ use ide_ci::programs::Cargo;
 use ide_ci::programs::Java;
 use ide_ci::programs::Javac;
 
-
+use std::fs;
+use std::path::Path;
 
 const GENERATOR_CRATE_NAME: &str = "enso-parser-generate-java";
 const GENERATOR_BIN_NAME: &str = GENERATOR_CRATE_NAME;
 const TEST_GENERATOR_BIN_NAME: &str = "java-tests";
 const GENERATED_CODE_NAMESPACE: [&str; 3] = ["org", "enso", "syntax2"];
 const GENERATED_TEST_CLASS: &str = "GeneratedFormatTests";
-const JAVA_EXTENSION: &str = ".java";
+const JAVA_EXTENSION: &str = "java";
 
 pub fn cargo_run_generator_cmd(repo_root: &Path, binary_name: &str) -> Result<Command> {
     let mut ret = Cargo.cmd()?;
@@ -50,6 +51,20 @@ pub async fn generate_java(repo_root: &RepoRoot) -> Result {
 pub async fn run_self_tests(repo_root: &RepoRoot) -> Result {
     let base = &repo_root.target.generated_java;
     let lib = &repo_root.lib.rust.parser.generate_java.java;
+    let external_dependencies_file = lib
+        .ancestors()
+        .nth(2)
+        .unwrap()
+        .join("target")
+        .join("streams")
+        .join("runtime")
+        .join("managedClasspath")
+        .join("_global")
+        .join("streams")
+        .join("export");
+
+    let dependencies_from_string = fs::read_to_string(&external_dependencies_file)?;
+    let dependencies_from_string = dependencies_from_string.trim_ascii_end();
     let package = repo_root.target.generated_java.join_iter(GENERATED_CODE_NAMESPACE);
     let test = package.join(GENERATED_TEST_CLASS).with_extension(JAVA_EXTENSION);
     let test_class =
@@ -63,7 +78,11 @@ pub async fn run_self_tests(repo_root: &RepoRoot) -> Result {
 
     Javac
         .cmd()?
-        .apply(&javac::Classpath::new([lib.as_path(), base.as_path()]))
+        .apply(&javac::Classpath::new([
+            lib.as_path(),
+            base.as_path(),
+            Path::new(dependencies_from_string),
+        ]))
         .apply(&javac::Options::Directory(base.into()))
         .arg(&test)
         .run_ok()
diff --git a/build/build/src/source.rs b/build/build/src/source.rs
index 9b66c10d2fea..707636817dcb 100644
--- a/build/build/src/source.rs
+++ b/build/build/src/source.rs
@@ -31,6 +31,7 @@ pub struct BuildSource<Target: IsTarget> {
     pub input:                  Target::BuildInput,
     /// Whether to upload the resulting artifact as CI artifact.
     pub should_upload_artifact: bool,
+    pub should_sign_artifacts:  bool,
 }
 
 /// Describes how to get a target.
diff --git a/build/ci_utils/src/actions/workflow/definition.rs b/build/ci_utils/src/actions/workflow/definition.rs
index e3178ff6372d..a9d3e0cc54c7 100644
--- a/build/ci_utils/src/actions/workflow/definition.rs
+++ b/build/ci_utils/src/actions/workflow/definition.rs
@@ -78,7 +78,7 @@ pub fn setup_wasm_pack_step() -> Step {
         uses: Some("jetli/wasm-pack-action@v0.4.0".into()),
         with: Some(step::Argument::Other(BTreeMap::from_iter([(
             "version".into(),
-            "v0.10.2".into(),
+            "v0.12.1".into(),
         )]))),
         r#if: Some(is_github_hosted()),
         ..default()
diff --git a/build/ci_utils/src/program/command.rs b/build/ci_utils/src/program/command.rs
index 88ecad8d2162..4935b5800712 100644
--- a/build/ci_utils/src/program/command.rs
+++ b/build/ci_utils/src/program/command.rs
@@ -469,7 +469,21 @@ pub fn spawn_log_processor(
                 match String::from_utf8(line_bytes) {
                     Ok(line) => {
                         let line = line.trim_end_matches('\r');
-                        info!("{prefix} {line}");
+                        let mut command = false;
+                        if let Some(command_at) = line.find("::") {
+                            if let Some(group_at) = line.find("group") {
+                                // we support: `::group` and `::endgroup` right now
+                                if command_at < group_at && group_at < command_at + 10 {
+                                    let line_without_prefix = &line[command_at..];
+                                    // intentionally using println to avoid info!'s prefix
+                                    println!("{line_without_prefix}");
+                                    command = true;
+                                }
+                            }
+                        }
+                        if !command {
+                            info!("{prefix} {line}");
+                        }
                     }
                     Err(e) => {
                         error!("{prefix} Failed to decode a line from output: {e}");
diff --git a/build/cli/src/arg.rs b/build/cli/src/arg.rs
index eb4bc3d2ff90..7ff571bbc197 100644
--- a/build/cli/src/arg.rs
+++ b/build/cli/src/arg.rs
@@ -83,6 +83,7 @@ pub trait IsTargetSource {
     const RELEASE_DESIGNATOR_NAME: &'static str;
     const ARTIFACT_NAME_NAME: &'static str;
     const UPLOAD_ARTIFACT_NAME: &'static str;
+    const SIGN_ARTIFACTS: &'static str;
     const DEFAULT_OUTPUT_PATH: &'static str;
 
     type BuildInput: Clone + Debug + PartialEq + Args + Send + Sync;
@@ -104,6 +105,7 @@ macro_rules! source_args_hlp {
             const RELEASE_DESIGNATOR_NAME: &'static str = concat!($prefix, "-", "release");
             const ARTIFACT_NAME_NAME: &'static str = concat!($prefix, "-", "artifact-name");
             const UPLOAD_ARTIFACT_NAME: &'static str = concat!($prefix, "-", "upload-artifact");
+            const SIGN_ARTIFACTS: &'static str = concat!($prefix, "-", "sign-artifacts");
             const DEFAULT_OUTPUT_PATH: &'static str = concat!("dist/", $prefix);
 
             type BuildInput = $inputs;
@@ -279,6 +281,16 @@ pub struct BuildDescription<Target: IsTargetSource> {
         action = clap::ArgAction::Set
     )]
     pub upload_artifact: bool,
+    #[clap(
+        name = Target::SIGN_ARTIFACTS,
+        long,
+        enso_env(),
+        default_value_t = ide_ci::actions::workflow::is_in_env(),
+        default_missing_value("true"),
+        num_args(0..=1),
+        action = clap::ArgAction::Set
+    )]
+    pub sign_artifacts:  bool,
 }
 
 #[derive(Args, Clone, PartialEq, Debug)]
diff --git a/build/cli/src/arg/ide.rs b/build/cli/src/arg/ide.rs
index 359a3ac914df..78afa66b890c 100644
--- a/build/cli/src/arg/ide.rs
+++ b/build/cli/src/arg/ide.rs
@@ -27,6 +27,8 @@ pub struct BuildInput {
     /// (fastest). See <https://www.electron.build> for all supported targets.
     #[clap(long, enso_env())]
     pub electron_target: Option<String>,
+    #[clap(long, enso_env())]
+    pub sign_artifacts:  bool,
 }
 
 #[derive(Subcommand, Clone, Debug)]
diff --git a/build/cli/src/lib.rs b/build/cli/src/lib.rs
index 998177cc3393..9d9a1b1e149c 100644
--- a/build/cli/src/lib.rs
+++ b/build/cli/src/lib.rs
@@ -140,10 +140,15 @@ impl Processor {
         let span = info_span!("Resolving.", ?target, ?source).entered();
         let destination = source.output_path.output_path;
         let should_upload_artifact = source.build_args.upload_artifact;
+        let should_sign_artifacts = source.build_args.sign_artifacts;
         let source = match source.source {
             arg::SourceKind::Build => T::resolve(self, source.build_args.input)
                 .map_ok(move |input| {
-                    Source::BuildLocally(BuildSource { input, should_upload_artifact })
+                    Source::BuildLocally(BuildSource {
+                        input,
+                        should_upload_artifact,
+                        should_sign_artifacts,
+                    })
                 })
                 .boxed(),
             arg::SourceKind::Local =>
@@ -232,13 +237,17 @@ impl Processor {
         &self,
         job: BuildJob<T>,
     ) -> BoxFuture<'static, Result<BuildTargetJob<T>>> {
-        let BuildJob { input: BuildDescription { input, upload_artifact }, output_path } = job;
+        let BuildJob {
+            input: BuildDescription { input, upload_artifact, sign_artifacts },
+            output_path,
+        } = job;
         let input = self.resolve_inputs::<T>(input);
         async move {
             Ok(WithDestination::new(
                 BuildSource {
                     input:                  input.await?,
                     should_upload_artifact: upload_artifact,
+                    should_sign_artifacts:  sign_artifacts,
                 },
                 output_path.output_path,
             ))
@@ -547,7 +556,13 @@ impl Processor {
         &self,
         params: arg::ide::BuildInput,
     ) -> BoxFuture<'static, Result<ide::Artifact>> {
-        let arg::ide::BuildInput { gui, project_manager, output_path, electron_target } = params;
+        let arg::ide::BuildInput {
+            gui,
+            project_manager,
+            output_path,
+            electron_target,
+            sign_artifacts,
+        } = params;
 
         let build_info_get = self.js_build_info();
         let build_info_path = self.context.inner.repo_root.join(&*enso_build::ide::web::BUILD_INFO);
@@ -569,6 +584,7 @@ impl Processor {
             version: self.triple.versions.version.clone(),
             electron_target,
             artifact_name: "ide".into(),
+            sign_artifacts,
         };
 
         let target = Ide { target_os: self.triple.os, target_arch: self.triple.arch };
@@ -790,7 +806,11 @@ pub async fn main_internal(config: Option<Config>) -> Result {
                     java_gen::Command::Build => generate_job.await,
                     java_gen::Command::Test => {
                         generate_job.await?;
-                        let backend_context = ctx.prepare_backend_context(default()).await?;
+                        let config = enso_build::engine::BuildConfigurationFlags {
+                            test_java_generated_from_rust: true,
+                            ..Default::default()
+                        };
+                        let backend_context = ctx.prepare_backend_context(config).await?;
                         backend_context.prepare_build_env().await?;
                         enso_build::rust::parser::run_self_tests(&repo_root).await
                     }
diff --git a/distribution/lib/Standard/AWS/0.0.0-dev/src/AWS_Credential.enso b/distribution/lib/Standard/AWS/0.0.0-dev/src/AWS_Credential.enso
index 4fdf22ca2b5e..4acfc3ca81c6 100644
--- a/distribution/lib/Standard/AWS/0.0.0-dev/src/AWS_Credential.enso
+++ b/distribution/lib/Standard/AWS/0.0.0-dev/src/AWS_Credential.enso
@@ -1,7 +1,10 @@
 from Standard.Base import all
+import Standard.Base.Errors.Common.Missing_Argument
 import Standard.Base.Errors.Illegal_Argument.Illegal_Argument
 from Standard.Base.Enso_Cloud.Enso_Secret import as_hideable_value
-from Standard.Base.Metadata import make_single_choice, Widget
+from Standard.Base.Metadata import Display, make_single_choice, Widget
+from Standard.Base.Metadata.Choice import Option
+from Standard.Base.Widget_Helpers import make_text_secret_selector
 
 import project.AWS_Region.AWS_Region
 
@@ -25,7 +28,9 @@ type AWS_Credential
        Arguments:
        - access_key_id: AWS access key ID.
        - secret_access_key: AWS secret access key.
-    Key access_key_id:Text|Enso_Secret secret_access_key:Text|Enso_Secret
+    @access_key_id make_text_secret_selector
+    @secret_access_key make_text_secret_selector
+    Key (access_key_id : (Text|Enso_Secret) = (Missing_Argument.throw "access_key_id")) (secret_access_key : (Text|Enso_Secret) = (Missing_Argument.throw "secret_access_key"))
 
     ## PRIVATE
        Allows to override additional configuration associated with the credential.
@@ -35,6 +40,7 @@ type AWS_Credential
          Default, Profile, Key.
        - default_region: The default region to use for operations that may
          require a region but it is not explicitly specified.
+    @default_region AWS_Region.default_widget
     With_Configuration (base_credential : AWS_Credential) (default_region : AWS_Region)
 
     ## ICON cloud
@@ -106,3 +112,11 @@ type AWS_Credential
 
     ## PRIVATE
     to_display_text self -> Text = self.to_text.to_display_text
+
+    ## PRIVATE
+    default_widget (display : Display = ..When_Modified) -> Widget =
+        default = Option "Default" "..Default"
+        profile = Option "Profile" "..Profile" [["profile", make_single_choice AWS_Credential.profile_names]]
+        key = Option "Key" "..Key" [["access_key_id", make_text_secret_selector], ["secret_access_key", make_text_secret_selector]]
+        with_config = Option "With_Configuration" "..With_Configuration"
+        Widget.Single_Choice values=[default, profile, key, with_config] display=display
diff --git a/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Dialect.enso b/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Dialect.enso
index 351d16fdc7a4..47046a1df1f3 100644
--- a/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Dialect.enso
+++ b/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Dialect.enso
@@ -1,4 +1,5 @@
 from Standard.Base import all
+import Standard.Base.Errors.Illegal_Argument.Illegal_Argument
 
 from Standard.Table import Aggregate_Column, Value_Type
 
@@ -26,7 +27,9 @@ import Standard.Database.SQL.SQL_Builder
 import Standard.Database.SQL_Statement.SQL_Statement
 import Standard.Database.SQL_Type.SQL_Type
 from Standard.Database.Dialect import Temp_Table_Style
+from Standard.Database.Dialect_Flags import all
 from Standard.Database.Errors import SQL_Error, Unsupported_Database_Operation
+from Standard.Database.Internal.JDBC_Connection import JDBC_Connection
 
 import project.Database.Redshift.Internal.Redshift_Error_Mapper.Redshift_Error_Mapper
 
@@ -137,13 +140,13 @@ type Redshift_Dialect
     supports_separate_nan : Boolean
     supports_separate_nan self = True
 
-    ## PRIVATE
-    supports_negative_round_decimal_places : Boolean
-    supports_negative_round_decimal_places self = True
-
-    ## PRIVATE
-    supports_float_round_decimal_places : Boolean
-    supports_float_round_decimal_places self = False
+    ## PRIVAITE
+       Specifies implementation details flags.
+    dialect_flags : Dialect_Flags
+    dialect_flags self -> Dialect_Flags =
+        rounding = Rounding_Flags.Value supports_negative_decimal_places=True supports_float_decimal_places=False use_builtin_bankers=False
+        primary_key = Primary_Key_Flags.Value allows_nulls=False
+        Dialect_Flags.Value rounding=rounding primary_key=primary_key
 
     ## PRIVATE
        Specifies how the database creates temp tables.
@@ -217,3 +220,8 @@ type Redshift_Dialect
     needs_literal_table_cast self value_type =
         _ = value_type
         False
+
+    ## PRIVATE
+    ensure_query_has_no_holes : JDBC_Connection -> Text -> Nothing ! Illegal_Argument
+    ensure_query_has_no_holes self jdbc:JDBC_Connection raw_sql:Text =
+        jdbc.ensure_query_has_no_holes raw_sql
diff --git a/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Error_Mapper.enso b/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Error_Mapper.enso
index 8b31faf072d5..7cc31a756cc1 100644
--- a/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Error_Mapper.enso
+++ b/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Error_Mapper.enso
@@ -6,12 +6,17 @@ from Standard.Database.Errors import SQL_Error
 type Redshift_Error_Mapper
 
     ## PRIVATE
-    is_primary_key_violation : SQL_Error -> Boolean
-    is_primary_key_violation error =
+    is_duplicate_primary_key_violation : SQL_Error -> Boolean
+    is_duplicate_primary_key_violation error =
         # Currently not implemented, skipping the error recognition.
         _ = error
         False
 
+    ## PRIVATE
+    is_null_primary_key_violation : SQL_Error -> Boolean
+    is_null_primary_key_violation error =
+        error.java_exception.getMessage.contains "violates not-null constraint"
+
     ## PRIVATE
     transform_custom_errors : SQL_Error -> Any
     transform_custom_errors error = error
diff --git a/distribution/lib/Standard/AWS/0.0.0-dev/src/S3/S3.enso b/distribution/lib/Standard/AWS/0.0.0-dev/src/S3/S3.enso
index d307d3c2bdbb..b0b4cc9239b3 100644
--- a/distribution/lib/Standard/AWS/0.0.0-dev/src/S3/S3.enso
+++ b/distribution/lib/Standard/AWS/0.0.0-dev/src/S3/S3.enso
@@ -1,4 +1,5 @@
 from Standard.Base import all
+import Standard.Base.Errors.Common.Missing_Argument
 import Standard.Base.Network.HTTP.Response_Body.Response_Body
 import Standard.Base.System.File_Format_Metadata.File_Format_Metadata
 import Standard.Base.System.Input_Stream.Input_Stream
@@ -11,6 +12,7 @@ import project.Errors.S3_Bucket_Not_Found
 import project.Errors.S3_Error
 import project.Errors.S3_Key_Not_Found
 import project.Internal.Request_Body
+import project.S3.S3_File.S3_File
 
 polyglot java import java.io.IOException
 polyglot java import org.enso.aws.BucketLocator
@@ -42,6 +44,7 @@ polyglot java import software.amazon.awssdk.services.s3.S3Client
    ! Error Conditions
    - If the credentials are invalid or access to S3 is denied, then an
      `AWS_SDK_Error` will be raised.
+@credentials AWS_Credential.default_widget
 list_buckets : AWS_Credential -> Vector Text ! S3_Error
 list_buckets credentials:AWS_Credential=..Default = handle_s3_errors <|
     client = make_client credentials
@@ -68,9 +71,11 @@ list_buckets credentials:AWS_Credential=..Default = handle_s3_errors <|
    - If the bucket does not exist, an `S3_Bucket_Not_Found` error is thrown.
    - If more items are available than the `max_count` parameter, a
      `More_Records_Available` warning is attached to the result.
-list_objects : Text -> Text -> AWS_Credential -> Integer -> Vector Text ! S3_Error
-list_objects bucket prefix="" credentials:AWS_Credential=..Default max_count:Integer=1000 =
-    read_bucket bucket prefix credentials delimiter="" max_count=max_count . second
+@credentials AWS_Credential.default_widget
+list_objects : Text -> Text -> AWS_Credential -> Integer -> Vector S3_File ! S3_Error
+list_objects (bucket : Text = Missing_Argument.throw "bucket") prefix:Text="" credentials:AWS_Credential=..Default max_count:Integer=1000 =
+    names = read_bucket bucket prefix credentials delimiter="" max_count=max_count . second
+    names.map name-> S3_File.new "s3://"+bucket+"/"+name credentials
 
 ## PRIVATE
    ADVANCED
@@ -121,8 +126,9 @@ get_object bucket key credentials:AWS_Credential=AWS_Credential.Default delimite
      `AWS_SDK_Error` will be raised.
    - If the bucket does not exist, an `S3_Bucket_Not_Found` error is thrown.
    - If the object does not exist, an `S3_Key_Not_Found` error is thrown.
+@credentials AWS_Credential.default_widget
 head : Text -> Text -> AWS_Credential -> Dictionary Text Any ! S3_Error
-head bucket key="" credentials:AWS_Credential=AWS_Credential.Default =
+head (bucket : Text = Missing_Argument.throw "bucket") key:Text="" credentials:AWS_Credential=AWS_Credential.Default =
     response = raw_head bucket key credentials
     pairs = response.sdkFields.map f-> [f.memberName, f.getValueOrDefault response]
     Dictionary.from_vector pairs
diff --git a/distribution/lib/Standard/AWS/0.0.0-dev/src/S3/S3_File.enso b/distribution/lib/Standard/AWS/0.0.0-dev/src/S3/S3_File.enso
index e8243bf2ab1f..bdbf7225b745 100644
--- a/distribution/lib/Standard/AWS/0.0.0-dev/src/S3/S3_File.enso
+++ b/distribution/lib/Standard/AWS/0.0.0-dev/src/S3/S3_File.enso
@@ -44,6 +44,7 @@ type S3_File
        ! Error Conditions
        - If the URI is not in the correct format, an `Illegal_Argument` error is
          thrown.
+    @credentials AWS_Credential.default_widget
     new : Text -> AWS_Credential -> S3_File ! Illegal_Argument
     new (uri : Text = S3.uri_prefix) credentials:AWS_Credential=..Default =
         S3_File.Value (S3_Path.parse uri) credentials
@@ -588,6 +589,16 @@ type S3_File
     is_descendant_of : S3_File -> Boolean
     is_descendant_of self other = self.s3_path.is_descendant_of other.s3_path
 
+    ## PRIVATE
+       Return the absolute path of this S3_File.
+    to_text : Text
+    to_text self = self.uri
+
+    ## PRIVATE
+       Convert to a display representation of this S3_File.
+    to_display_text : Text
+    to_display_text self = "S3_File {" + self.to_text + "}"
+
 ## PRIVATE
 File_Format_Metadata.from (that : S3_File) = File_Format_Metadata.Value that.uri that.name (that.extension.catch _->Nothing)
 
diff --git a/distribution/lib/Standard/Base/0.0.0-dev/src/Data/Index_Sub_Range.enso b/distribution/lib/Standard/Base/0.0.0-dev/src/Data/Index_Sub_Range.enso
index ee4f1047d034..f2af5b579bd0 100644
--- a/distribution/lib/Standard/Base/0.0.0-dev/src/Data/Index_Sub_Range.enso
+++ b/distribution/lib/Standard/Base/0.0.0-dev/src/Data/Index_Sub_Range.enso
@@ -54,7 +54,7 @@ type Index_Sub_Range
 
        If `count` is greater than the length of the input, a random permutation
        of all elements from the input is selected.
-    Sample (count : Integer = 1) (seed:Integer|Nothing=Nothing)
+    Sample (count : Integer = 1) (seed:Integer=0)
 
     ## Gets every Nth entry.
 
diff --git a/distribution/lib/Standard/Base/0.0.0-dev/src/Data/Statistics/Extensions.enso b/distribution/lib/Standard/Base/0.0.0-dev/src/Data/Statistics/Extensions.enso
index f682a600d975..e87bdaeccdbd 100644
--- a/distribution/lib/Standard/Base/0.0.0-dev/src/Data/Statistics/Extensions.enso
+++ b/distribution/lib/Standard/Base/0.0.0-dev/src/Data/Statistics/Extensions.enso
@@ -23,7 +23,8 @@ Vector.compute_bulk : Vector Statistic -> Vector Any
 Vector.compute_bulk self statistics:Vector=[..Count, ..Sum] =
     Statistic.compute_bulk self statistics
 
-## GROUP Statistics
+## ALIAS cumulative, count, sum, total, minimum, maximum, sum, mean, product, variance, standard deviation
+   GROUP Statistics
    ICON math
    Compute a single running statistic on the vector (ignoring Nothing and NaN
    values).
diff --git a/distribution/lib/Standard/Base/0.0.0-dev/src/Enso_Cloud/Enso_File.enso b/distribution/lib/Standard/Base/0.0.0-dev/src/Enso_Cloud/Enso_File.enso
index e4db670abb44..dc995bf71b3f 100644
--- a/distribution/lib/Standard/Base/0.0.0-dev/src/Enso_Cloud/Enso_File.enso
+++ b/distribution/lib/Standard/Base/0.0.0-dev/src/Enso_Cloud/Enso_File.enso
@@ -191,6 +191,11 @@ type Enso_File
     is_descendant_of self (other : Enso_File) -> Boolean =
         self.enso_path.is_descendant_of other.enso_path
 
+    ## PRIVATE
+       Convert to a display representation of this S3_File.
+    to_display_text : Text
+    to_display_text self = "Enso_File {" + self.path + "}"
+
     ## PRIVATE
        ADVANCED
        Creates a new output stream for this file and runs the specified action
diff --git a/distribution/lib/Standard/Base/0.0.0-dev/src/Random.enso b/distribution/lib/Standard/Base/0.0.0-dev/src/Random.enso
index 857c9b3f765c..c1daaa75b111 100644
--- a/distribution/lib/Standard/Base/0.0.0-dev/src/Random.enso
+++ b/distribution/lib/Standard/Base/0.0.0-dev/src/Random.enso
@@ -41,7 +41,9 @@ type Random
              rng = Random.oew_generator 42
              i = rng.integer 0 10
     new_generator : Integer | Nothing -> Random_Generator
-    new_generator seed:(Integer | Nothing)=Nothing = Random_Generator.new seed
+    new_generator seed:(Integer | Nothing)=Nothing =
+        used_seed = if seed == 0 then Nothing else seed
+        Random_Generator.new used_seed
 
     ## PRIVATE
        GROUP Random
diff --git a/distribution/lib/Standard/Base/0.0.0-dev/src/System/Process.enso b/distribution/lib/Standard/Base/0.0.0-dev/src/System/Process.enso
index 2389b8bc8175..0821e6857e34 100644
--- a/distribution/lib/Standard/Base/0.0.0-dev/src/System/Process.enso
+++ b/distribution/lib/Standard/Base/0.0.0-dev/src/System/Process.enso
@@ -5,6 +5,7 @@ import project.System.Process.Exit_Code.Exit_Code
 import project.System.Process.Process_Builder.Process_Builder
 import project.System.Process.Process_Builder.Process_Result
 from project.Data.Boolean import Boolean, False, True
+from project.Metadata.Widget import Text_Input, Vector_Editor
 
 ## ALIAS run a command
    GROUP Input
@@ -25,8 +26,9 @@ from project.Data.Boolean import Boolean, False, True
          example_run = case Platform.os of
              Platform.OS.Windows -> Process.run "PowerShell" ["-Command", "exit 42"]
              _ -> Process.run "bash" ["-c", "exit 42"]
+@arguments (Vector_Editor item_editor=Text_Input item_default='""')
 run : Text -> Vector Text -> Text -> Process_Result
-run command arguments=[] stdin="" =
+run command:Text arguments=[] stdin:Text="" =
     new_builder command arguments stdin . create
 
 ## PRIVATE
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Connection/Connection.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Connection/Connection.enso
index 03e0fccbb589..8bab13a4cff8 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Connection/Connection.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Connection/Connection.enso
@@ -220,7 +220,7 @@ type Connection
             table_naming_helper.verify_table_name name <|
                 make_table_for_name self name alias
         SQL_Query.Raw_SQL raw_sql -> handle_sql_errors <| alias.if_not_error <|
-            self.jdbc_connection.ensure_query_has_no_holes raw_sql . if_not_error <|
+            self.dialect.ensure_query_has_no_holes self.jdbc_connection raw_sql . if_not_error <|
                 columns = self.fetch_columns raw_sql Statement_Setter.null
                 name = if alias == "" then (UUID.randomUUID.to_text) else alias
                 ctx = Context.for_query raw_sql name
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Column.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Column.enso
index c57ead5a07e0..dd5e3d1dea3f 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Column.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Column.enso
@@ -911,7 +911,7 @@ type DB_Column
     round : Integer -> Boolean -> DB_Column | Illegal_Argument | Invalid_Value_Type
     round self (decimal_places:Integer = 0) (use_bankers:Boolean = False) =
         Rounding_Helpers.check_decimal_places decimal_places <| Value_Type.expect_numeric self <|
-            if self.should_use_builtin_round decimal_places use_bankers then self.round_builtin decimal_places else
+            if self.should_use_builtin_round decimal_places use_bankers then self.round_builtin decimal_places use_bankers else
                 self.short_circuit_special_floating_point <|
                     case self.value_type of
                         Value_Type.Integer _ -> self.round_integer decimal_places use_bankers
@@ -929,24 +929,28 @@ type DB_Column
          (Note that Postgres is fine with a `numeric` value here, just not `double precision`.)
     should_use_builtin_round : Integer -> Boolean -> Boolean
     should_use_builtin_round self decimal_places use_bankers =
-        # Don't use for banker's rounding
-        not_bankers = use_bankers.not
+        # Don't use for banker's rounding (unless the dialect has a builtin for it)
+        bankers_ok = self.connection.dialect.dialect_flags.rounding.use_builtin_bankers || use_bankers.not
         # Don't use for negative decimal places, if the backend doesn't support it
-        negative_dp_ok = decimal_places >= 0 || self.connection.dialect.supports_negative_round_decimal_places
+        negative_dp_ok = decimal_places >= 0 || self.connection.dialect.dialect_flags.rounding.supports_negative_decimal_places
         # Don't use for floating-point inputs if decimal_places != 0, for Postgres
-        dp_param_ok = decimal_places == 0 || self.value_type.is_floating_point.not || self.connection.dialect.supports_float_round_decimal_places
-        not_bankers && negative_dp_ok && dp_param_ok
+        dp_param_ok = decimal_places == 0 || self.value_type.is_floating_point.not || self.connection.dialect.dialect_flags.rounding.supports_float_decimal_places
+        bankers_ok && negative_dp_ok && dp_param_ok
 
     ## PRIVATE
        Round a float-like column using the backend's builtin ROUND function.
-    round_builtin : Integer -> DB_Column
-    round_builtin self decimal_places =
+    round_builtin : Integer -> Boolean -> DB_Column
+    round_builtin self decimal_places use_bankers =
         new_name = self.naming_helper.function_name "round" [self]
-        case decimal_places == 0 of
+        case use_bankers of
             True ->
-                self.make_unary_op "ROUND" new_name
+                    self.make_binary_op "ROUND_BANKERS" (SQL_Expression.Literal decimal_places.to_text) new_name
             False ->
-                self.make_binary_op "ROUND" (SQL_Expression.Literal decimal_places.to_text) new_name
+                case decimal_places == 0 of
+                    True ->
+                        self.make_unary_op "ROUND" new_name
+                    False ->
+                        self.make_binary_op "ROUND" (SQL_Expression.Literal decimal_places.to_text) new_name
 
     ## PRIVATE
        Round a float-like column.
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Table.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Table.enso
index 324dec8e9514..1442b73e29d6 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Table.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Table.enso
@@ -827,7 +827,7 @@ type DB_Table
 
        Arguments:
        - name: The name of the new column. Defaults to "Row".
-       - from: The starting value for the enumeration. Defaults to 1.
+       - from: The starting value for the enumeration. Defaults to 0.
        - step: The amount to increment the enumeration by. Defaults to 1.
        - group_by: Specifies the columns to group by. The row numbers are
          counted separately for each group. By default, all rows are treated as
@@ -852,10 +852,12 @@ type DB_Table
            existing column is renamed to avoid the clash.
          - If grouping on floating point numbers, a `Floating_Point_Equality`
            problem is reported.
-    @group_by Widget_Helpers.make_column_name_multi_selector
-    @order_by Widget_Helpers.make_order_by_selector
+    @name (Widget.Text_Input display=..Always)
+    @from (Widget.Numeric_Input display=..Always)
+    @group_by (Widget_Helpers.make_column_name_multi_selector display=..When_Modified)
+    @order_by (Widget_Helpers.make_order_by_selector display=..When_Modified)
     add_row_number : Text -> Integer -> Integer -> Vector (Text | Integer | Regex) | Text | Integer | Regex -> Vector (Text | Sort_Column) | Text -> Problem_Behavior -> DB_Table
-    add_row_number self (name:Text="Row") (from:Integer=1) (step:Integer=1) (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
+    add_row_number self (name:Text="Row") (from:Integer=0) (step:Integer=1) (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
         problem_builder = Problem_Builder.new error_on_missing_columns=True
         grouping_columns = self.columns_helper.select_columns_helper group_by Case_Sensitivity.Default True problem_builder
         grouping_columns.each column->
@@ -1921,7 +1923,7 @@ type DB_Table
 
                     DB_Table.Value union_alias self.connection new_columns new_ctx
 
-    ## ALIAS group by, summarize
+    ## ALIAS group by, summarize, count, count distinct, sum, average, mean, median, percentile, mode, standard deviation, variance, minimum, maximum, first, last, shortest, longest
        GROUP Standard.Base.Calculations
        ICON transform4
 
@@ -2922,7 +2924,7 @@ type DB_Table
         transformer col = col.text_cleanse remove
         Table_Helpers.replace_columns_with_transformed_columns self from transformer
 
-    ## ALIAS cumulative
+    ## ALIAS cumulative, count, sum, total, minimum, maximum, sum, mean, product, variance, standard deviation
        GROUP Standard.Base.Values
        ICON data_input
        Adds a new column to the table with a running calculation.
@@ -2931,6 +2933,8 @@ type DB_Table
        - statistic: The running statistic to calculate.
        - of: The existing column to run the statistic over.
        - as: The name of the new column.
+       - set_mode: Specifies the expected behaviour in regards to existing
+         column with the same name.
        - group_by: Specifies the columns to group by. The running statistic is
          calculated separately for each group. By default, all rows are treated as
          a single group.
@@ -2957,9 +2961,9 @@ type DB_Table
     @group_by Widget_Helpers.make_column_name_multi_selector
     @order_by Widget_Helpers.make_order_by_selector
     @of Widget_Helpers.make_column_name_selector
-    running : Statistic -> (Text | Integer) -> Text -> Vector (Text | Integer | Regex) | Text | Integer | Regex -> Vector (Text | Sort_Column) | Text -> Problem_Behavior -> Table
-    running self (statistic:Statistic=..Count) (of:(Text | Integer)=0) (as:Text='') (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
-        _ = [statistic, of, as, group_by, order_by, on_problems]
+    running : Statistic -> (Text | Integer) -> Text -> Set_Mode -> Vector (Text | Integer | Regex) | Text | Integer | Regex -> Vector (Text | Sort_Column) | Text -> Problem_Behavior -> Table
+    running self (statistic:Statistic=..Count) (of:(Text | Integer)=0) (as:Text='') (set_mode:Set_Mode=..Add) (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
+        _ = [statistic, of, as, set_mode, group_by, order_by, on_problems]
         Error.throw (Unsupported_Database_Operation.Error "DB_Table.running is currently not implemented for the Database backend. You may download the table to memory using `.read` to use this feature.")
 
 
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Dialect.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Dialect.enso
index dd0eb2c4b187..479ffbaa8435 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Dialect.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Dialect.enso
@@ -1,4 +1,5 @@
 from Standard.Base import all
+import Standard.Base.Errors.Illegal_Argument.Illegal_Argument
 import Standard.Base.Errors.Unimplemented.Unimplemented
 
 import Standard.Table.Internal.Problem_Builder.Problem_Builder
@@ -25,7 +26,9 @@ import project.Internal.Statement_Setter.Statement_Setter
 import project.SQL.SQL_Builder
 import project.SQL_Statement.SQL_Statement
 import project.SQL_Type.SQL_Type
+from project.Dialect_Flags import all
 from project.Errors import SQL_Error, Unsupported_Database_Operation
+from project.Internal.JDBC_Connection import JDBC_Connection
 from project.Internal.Result_Set import result_set_to_table
 
 ## PRIVATE
@@ -149,17 +152,10 @@ type Dialect
     supports_separate_nan self =
         Unimplemented.throw "This is an interface only."
 
-    ## PRIVATE
-       Specifies whether the Database ROUND() function supports negative
-       decimal places.
-    supports_negative_round_decimal_places : Boolean
-    supports_negative_round_decimal_places self =
-        Unimplemented.throw "This is an interface only."
-
-    ## PRIVATE
-       Specifies whether round() can take a decimal_places argument for floating point values.
-    supports_float_round_decimal_places : Boolean
-    supports_float_round_decimal_places self =
+    ## PRIVAITE
+       Specifies implementation details flags.
+    dialect_flags : Dialect_Flags
+    dialect_flags -> Dialect_Flags =
         Unimplemented.throw "This is an interface only."
 
     ## PRIVATE
@@ -281,6 +277,12 @@ type Dialect
         _ = [base_table, key_columns, resolved_aggregates, problem_builder]
         Unimplemented.throw "This is an interface only."
 
+    ## PRIVATE
+    ensure_query_has_no_holes : JDBC_Connection -> Text -> Nothing ! Illegal_Argument
+    ensure_query_has_no_holes jdbc:JDBC_Connection raw_sql:Text =
+        _ = [jdbc, raw_sql]
+        Unimplemented.throw "This is an interface only."
+
 ## PRIVATE
 
    The dialect of SQLite databases.
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Dialect_Flags.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Dialect_Flags.enso
new file mode 100644
index 000000000000..3f8acf1837e0
--- /dev/null
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Dialect_Flags.enso
@@ -0,0 +1,22 @@
+from Standard.Base import all
+
+## PRIVATE
+
+   Dialect flags are used to specify implementation details for different
+   dialects -- the existence or non-existence of certain features, or
+   differening implementations of the same feature.
+
+   Dialect flags differ from test config flags, in that they are used for
+   implementation (as well as testing). They also differ from feature flags,
+   since feature flags are user-facing, and can be used to identify features
+   that are not yet implemented.
+type Dialect_Flags
+    Value (rounding : Rounding_Flags) (primary_key : Primary_Key_Flags)
+
+## PRIVATE
+type Rounding_Flags
+    ## PRIVATE
+    Value (supports_negative_decimal_places : Boolean) (supports_float_decimal_places : Boolean) (use_builtin_bankers : Boolean)
+
+type Primary_Key_Flags
+    Value (allows_nulls : Boolean)
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Error_Mapper.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Error_Mapper.enso
index c3282e4cd016..ed902fbcc1e0 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Error_Mapper.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Error_Mapper.enso
@@ -11,8 +11,14 @@ type Error_Mapper
     ## PRIVATE
        Checks if the given error is related to a violation of PRIMARY KEY
        uniqueness constraint.
-    is_primary_key_violation : SQL_Error -> Boolean
-    is_primary_key_violation error =
+    is_duplicate_primary_key_violation : SQL_Error -> Boolean
+    is_duplicate_primary_key_violation error =
+        _ = error
+        Unimplemented.throw "This is an interface only."
+
+    ## PRIVATE
+    is_null_primary_key_violation : SQL_Error -> Boolean
+    is_null_primary_key_violation error =
         _ = error
         Unimplemented.throw "This is an interface only."
 
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Dialect.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Dialect.enso
index 9e2975ca6f51..4ac9a9fba612 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Dialect.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Dialect.enso
@@ -10,6 +10,8 @@ from Standard.Table.Aggregate_Column.Aggregate_Column import all
 from Standard.Table.Errors import Inexact_Type_Coercion
 from Standard.Table.Internal.Storage import get_storage_for_column
 
+from Standard.Database.Dialect_Flags import all
+
 import project.Connection.Connection.Connection
 import project.DB_Column.DB_Column
 import project.DB_Table.DB_Table
@@ -40,6 +42,7 @@ import project.SQL_Type.SQL_Type
 from project.Dialect import Temp_Table_Style
 from project.Errors import SQL_Error, Unsupported_Database_Operation
 from project.Internal.IR.Operation_Metadata import Date_Period_Metadata
+from project.Internal.JDBC_Connection import JDBC_Connection
 
 polyglot java import java.sql.Types
 
@@ -174,13 +177,13 @@ type Postgres_Dialect
     supports_separate_nan : Boolean
     supports_separate_nan self = True
 
-    ## PRIVATE
-    supports_negative_round_decimal_places : Boolean
-    supports_negative_round_decimal_places self = True
-
-    ## PRIVATE
-    supports_float_round_decimal_places : Boolean
-    supports_float_round_decimal_places self = False
+    ## PRIVAITE
+       Specifies implementation details flags.
+    dialect_flags : Dialect_Flags
+    dialect_flags self -> Dialect_Flags =
+        rounding = Rounding_Flags.Value supports_negative_decimal_places=True supports_float_decimal_places=False use_builtin_bankers=False
+        primary_key = Primary_Key_Flags.Value allows_nulls=False
+        Dialect_Flags.Value rounding=rounding primary_key=primary_key
 
     ## PRIVATE
        Specifies how the database creates temp tables.
@@ -322,6 +325,11 @@ type Postgres_Dialect
         _ = value_type
         False
 
+    ## PRIVATE
+    ensure_query_has_no_holes : JDBC_Connection -> Text -> Nothing ! Illegal_Argument
+    ensure_query_has_no_holes self jdbc:JDBC_Connection raw_sql:Text =
+        jdbc.ensure_query_has_no_holes raw_sql
+
 ## PRIVATE
 make_dialect_operations =
     cases = [["LOWER", Base_Generator.make_function "LOWER"], ["UPPER", Base_Generator.make_function "UPPER"]]
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Error_Mapper.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Error_Mapper.enso
index 26c269cfd5d9..357d9d663628 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Error_Mapper.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Error_Mapper.enso
@@ -6,10 +6,15 @@ from project.Errors import Invariant_Violation, SQL_Error
 type Postgres_Error_Mapper
 
     ## PRIVATE
-    is_primary_key_violation : SQL_Error -> Boolean
-    is_primary_key_violation error =
+    is_duplicate_primary_key_violation : SQL_Error -> Boolean
+    is_duplicate_primary_key_violation error =
         error.java_exception.getMessage.contains "duplicate key value violates unique constraint"
 
+    ## PRIVATE
+    is_null_primary_key_violation : SQL_Error -> Boolean
+    is_null_primary_key_violation error =
+        error.java_exception.getMessage.contains "violates not-null constraint"
+
     ## PRIVATE
     is_table_already_exists_error : SQL_Error -> Boolean
     is_table_already_exists_error error =
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Dialect.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Dialect.enso
index a0a2add84d3f..4f0e4ed459dd 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Dialect.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Dialect.enso
@@ -7,6 +7,8 @@ import Standard.Table.Internal.Problem_Builder.Problem_Builder
 from Standard.Table import Aggregate_Column, Value_Type
 from Standard.Table.Aggregate_Column.Aggregate_Column import all
 
+from Standard.Database.Dialect_Flags import all
+
 import project.Connection.Connection.Connection
 import project.DB_Column.DB_Column
 import project.DB_Table.DB_Table
@@ -36,6 +38,7 @@ import project.SQL_Statement.SQL_Statement
 import project.SQL_Type.SQL_Type
 from project.Dialect import Temp_Table_Style
 from project.Errors import SQL_Error, Unsupported_Database_Operation
+from project.Internal.JDBC_Connection import JDBC_Connection
 
 ## PRIVATE
 
@@ -187,13 +190,13 @@ type SQLite_Dialect
     supports_separate_nan : Boolean
     supports_separate_nan self = False
 
-    ## PRIVATE
-    supports_negative_round_decimal_places : Boolean
-    supports_negative_round_decimal_places self = False
-
-    ## PRIVATE
-    supports_float_round_decimal_places : Boolean
-    supports_float_round_decimal_places self = True
+    ## PRIVAITE
+       Specifies implementation details flags.
+    dialect_flags : Dialect_Flags
+    dialect_flags self -> Dialect_Flags =
+        rounding = Rounding_Flags.Value supports_negative_decimal_places=False supports_float_decimal_places=True use_builtin_bankers=False
+        primary_key = Primary_Key_Flags.Value allows_nulls=True
+        Dialect_Flags.Value rounding=rounding primary_key=primary_key
 
     ## PRIVATE
        Specifies how the database creates temp tables.
@@ -325,6 +328,11 @@ type SQLite_Dialect
         _ = value_type
         False
 
+    ## PRIVATE
+    ensure_query_has_no_holes : JDBC_Connection -> Text -> Nothing ! Illegal_Argument
+    ensure_query_has_no_holes self jdbc:JDBC_Connection raw_sql:Text =
+        jdbc.ensure_query_has_no_holes raw_sql
+
     ## PRIVATE
        We need custom handling for First and Last, as SQLite does not support
        such aggregation functions out of the box, so instead we create a row
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Error_Mapper.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Error_Mapper.enso
index 5c5a0a736b5d..3928fa22b523 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Error_Mapper.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Error_Mapper.enso
@@ -9,12 +9,17 @@ polyglot java import org.sqlite.SQLiteException
 type SQLite_Error_Mapper
 
     ## PRIVATE
-    is_primary_key_violation : SQL_Error -> Boolean
-    is_primary_key_violation error =
+    is_duplicate_primary_key_violation : SQL_Error -> Boolean
+    is_duplicate_primary_key_violation error =
         case error.java_exception of
             sqlite_exception : SQLiteException ->
                 sqlite_exception.getResultCode == SQLiteErrorCode.SQLITE_CONSTRAINT_PRIMARYKEY
 
+    ## PRIVATE
+       SQLite does not mind SQLite NULL primary keys.
+    is_null_primary_key_violation : SQL_Error -> Boolean
+    is_null_primary_key_violation _ = False
+
     ## PRIVATE
     is_table_already_exists_error : SQL_Error -> Boolean
     is_table_already_exists_error error =
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Helpers/Error_Helpers.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Helpers/Error_Helpers.enso
index 861592d9e713..07aca0e7ed39 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Helpers/Error_Helpers.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Helpers/Error_Helpers.enso
@@ -3,7 +3,7 @@ private
 from Standard.Base import all
 
 from Standard.Table import Aggregate_Column
-from Standard.Table.Errors import Non_Unique_Key
+from Standard.Table.Errors import Non_Unique_Key, Null_Values_In_Key_Columns
 
 from Standard.Database.Errors import SQL_Error
 
@@ -18,22 +18,39 @@ internal_translate_known_upload_errors source_table connection primary_key ~acti
     handler caught_panic =
         error_mapper = connection.dialect.get_error_mapper
         sql_error = caught_panic.payload
-        case error_mapper.is_primary_key_violation sql_error of
+        case error_mapper.is_duplicate_primary_key_violation sql_error of
             True -> Panic.throw (Non_Unique_Key_Recipe.Recipe source_table primary_key caught_panic)
-            False -> Panic.throw caught_panic
+            False -> case error_mapper.is_null_primary_key_violation sql_error of
+                True -> Panic.throw (Null_Key_Recipe.Recipe source_table primary_key caught_panic)
+                False -> Panic.throw caught_panic
     Panic.catch SQL_Error action handler
 
 ## PRIVATE
-handle_upload_errors ~action =
+handle_upload_duplicate_primary_key_errors ~action =
     Panic.catch Non_Unique_Key_Recipe action caught_panic->
         recipe = caught_panic.payload
         raise_duplicated_primary_key_error recipe.source_table recipe.primary_key recipe.original_panic
 
+## PRIVATE
+handle_upload_null_primary_key_errors ~action =
+    Panic.catch Null_Key_Recipe action caught_panic->
+        recipe = caught_panic.payload
+        raise_null_primary_key_error recipe.source_table recipe.primary_key recipe.original_panic
+
+## PRIVATE
+handle_upload_errors ~action =
+    handle_upload_duplicate_primary_key_errors (handle_upload_null_primary_key_errors action)
+
 ## PRIVATE
 type Non_Unique_Key_Recipe
     ## PRIVATE
     Recipe source_table primary_key original_panic
 
+## PRIVATE
+type Null_Key_Recipe
+    ## PRIVATE
+    Recipe source_table primary_key original_panic
+
 ## PRIVATE
    Creates a `Non_Unique_Key` error containing information about an
    example group violating the uniqueness constraint.
@@ -52,3 +69,20 @@ raise_duplicated_primary_key_error source_table primary_key original_panic =
             example_count = row.last
             example_entry = row.drop (..Last 1)
             Error.throw (Non_Unique_Key.Error primary_key example_entry example_count)
+
+## PRIVATE
+   Creates a `Null_Key` error containing information about an
+   example group violating the non-null constraint.
+raise_null_primary_key_error source_table primary_key original_panic =
+    bad_rows_per_pk = primary_key.map primary_key->
+        filtered = source_table.filter column=primary_key Filter_Condition.Is_Nothing
+        filtered.read (..First 1)
+    tables_with_bad_rows = bad_rows_per_pk.filter (t-> t.row_count > 0)
+    case tables_with_bad_rows.length == 0 of
+        ## If we couldn't find a null key, we give up the translation and
+           rethrow the original panic containing the SQL error.
+        True -> Panic.throw original_panic
+        False ->
+            table_with_bad_rows = tables_with_bad_rows.first
+            row = table_with_bad_rows.first_row.to_vector
+            Error.throw (Null_Values_In_Key_Columns.Error row)
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Create.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Create.enso
index 1fb7d9b81c70..ff577880c08a 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Create.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Create.enso
@@ -6,7 +6,7 @@ import Standard.Base.Runtime.Context
 
 import project.SQL_Query.SQL_Query
 from project.Errors import SQL_Error, Table_Already_Exists
-from project.Internal.Upload.Operations.Internal_Core import internal_create_table_structure
+from project.Internal.Upload.Operations.Internal_Core import internal_create_table_structure, resolve_temp_table_name
 
 ## PRIVATE
    Creates a new database table with the provided structure and returns the name
@@ -23,15 +23,16 @@ from project.Internal.Upload.Operations.Internal_Core import internal_create_tab
      intercepting the 'already exists' error.
 create_table_implementation connection table_name structure primary_key temporary allow_existing on_problems:Problem_Behavior =
     connection.base_connection.maybe_run_maintenance
+    resolved_table_name = resolve_temp_table_name connection temporary table_name
     table_naming_helper = connection.base_connection.table_naming_helper
     on_exists =
-        if allow_existing then connection.query (SQL_Query.Table_Name table_name) else Error.throw (Table_Already_Exists.Error table_name)
-    table_naming_helper.verify_table_name table_name <|
-        case connection.base_connection.table_exists table_name of
+        if allow_existing then connection.query (SQL_Query.Table_Name resolved_table_name) else Error.throw (Table_Already_Exists.Error resolved_table_name)
+    table_naming_helper.verify_table_name resolved_table_name <|
+        case connection.base_connection.table_exists resolved_table_name of
             True -> on_exists
             False ->
                 dry_run = Context.Output.is_enabled.not
-                effective_table_name = if dry_run.not then table_name else table_naming_helper.generate_dry_run_table_name table_name
+                effective_table_name = if dry_run.not then table_name else table_naming_helper.generate_dry_run_table_name resolved_table_name
                 effective_temporary = temporary || dry_run
                 created_table_name = Context.Output.with_enabled <|
                     if dry_run then
@@ -53,5 +54,5 @@ create_table_implementation connection table_name structure primary_key temporar
                             # If the table was just created by someone else
                             case dry_run of
                                 # If this was a dry-run, we had a race condition - to ensure correct structure, we re-try the whole operation
-                                True -> create_table_implementation connection table_name structure primary_key temporary allow_existing on_problems
+                                True -> create_table_implementation connection resolved_table_name structure primary_key temporary allow_existing on_problems
                                 False -> on_exists
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Internal_Core.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Internal_Core.enso
index 1e5837cc7801..7996662d981e 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Internal_Core.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Internal_Core.enso
@@ -15,6 +15,7 @@ import project.Internal.IR.Query.Query
 import project.SQL_Query.SQL_Query
 from project.Dialect import Temp_Table_Style
 from project.Errors import SQL_Error, Table_Already_Exists, Unsupported_Database_Operation
+from project.Internal.JDBC_Connection import log_sql_if_enabled
 from project.Internal.Upload.Helpers.Argument_Checks import resolve_primary_key
 from project.Internal.Upload.Helpers.Constants import default_batch_size
 from project.Internal.Upload.Helpers.Error_Helpers import handle_upload_errors, internal_translate_known_upload_errors
@@ -30,6 +31,7 @@ internal_create_table_structure connection table_name structure primary_key temp
     validate_structure connection.base_connection.column_naming_helper aligned_structure <|
         create_table_statement = prepare_create_table_statement connection table_name aligned_structure resolved_primary_key temporary on_problems
         update_result = create_table_statement.if_not_error <|
+            log_sql_if_enabled connection.jdbc_connection create_table_statement.to_text
             connection.execute create_table_statement
         final_result = update_result.if_not_error table_name
         final_result.catch SQL_Error sql_error->
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Select_Into.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Select_Into.enso
index 97d29549d530..f2522906927c 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Select_Into.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload/Operations/Select_Into.enso
@@ -9,22 +9,23 @@ import project.Internal.DDL_Transaction
 from project.Errors import SQL_Error, Table_Already_Exists
 from project.Internal.Upload.Helpers.Constants import dry_run_row_limit
 from project.Internal.Upload.Helpers.Error_Helpers import handle_upload_errors
-from project.Internal.Upload.Operations.Internal_Core import internal_upload_table
+from project.Internal.Upload.Operations.Internal_Core import internal_upload_table, resolve_temp_table_name
 
 ## PRIVATE
 select_into_table_implementation source_table connection table_name primary_key temporary on_problems:Problem_Behavior =
     connection.base_connection.maybe_run_maintenance
+    resolved_table_name = resolve_temp_table_name connection temporary table_name
     table_naming_helper = connection.base_connection.table_naming_helper
-    table_naming_helper.verify_table_name table_name <|
+    table_naming_helper.verify_table_name resolved_table_name <|
         Panic.recover SQL_Error <| handle_upload_errors <|
-            real_target_already_exists = connection.base_connection.table_exists table_name
-            if real_target_already_exists then Error.throw (Table_Already_Exists.Error table_name) else
+            real_target_already_exists = connection.base_connection.table_exists resolved_table_name
+            if real_target_already_exists then Error.throw (Table_Already_Exists.Error resolved_table_name) else
                 dry_run = Context.Output.is_enabled.not
                 case dry_run of
                     False ->
-                        upload_table_in_transaction source_table connection table_name primary_key temporary=temporary on_problems=on_problems row_limit=Nothing
+                        upload_table_in_transaction source_table connection resolved_table_name primary_key temporary=temporary on_problems=on_problems row_limit=Nothing
                     True ->
-                        tmp_table_name = table_naming_helper.generate_dry_run_table_name table_name
+                        tmp_table_name = table_naming_helper.generate_dry_run_table_name resolved_table_name
                         create_dry_run_table _ =
                             table = Context.Output.with_enabled <|
                                 ## This temporary table can be safely dropped if it
diff --git a/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Dialect.enso b/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Dialect.enso
index 7c0a03c5e1e7..341b05c2757a 100644
--- a/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Dialect.enso
+++ b/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Dialect.enso
@@ -39,8 +39,11 @@ import Standard.Database.SQL.SQL_Fragment
 import Standard.Database.SQL_Statement.SQL_Statement
 import Standard.Database.SQL_Type.SQL_Type
 from Standard.Database.Dialect import Temp_Table_Style
+from Standard.Database.Dialect_Flags import all
 from Standard.Database.Errors import SQL_Error, Unsupported_Database_Operation
+from  Standard.Database.Internal.Base_Generator import lift_binary_op
 from Standard.Database.Internal.IR.Operation_Metadata import Date_Period_Metadata
+from Standard.Database.Internal.JDBC_Connection import JDBC_Connection
 from Standard.Database.Internal.Statement_Setter import fill_hole_default
 
 import project.Internal.SQLServer_Error_Mapper.SQLServer_Error_Mapper
@@ -186,13 +189,13 @@ type SQLSever_Dialect
     supports_separate_nan : Boolean
     supports_separate_nan self = True
 
-    ## PRIVATE
-    supports_negative_round_decimal_places : Boolean
-    supports_negative_round_decimal_places self = True
-
-    ## PRIVATE
-    supports_float_round_decimal_places : Boolean
-    supports_float_round_decimal_places self = True
+    ## PRIVAITE
+       Specifies implementation details flags.
+    dialect_flags : Dialect_Flags
+    dialect_flags self -> Dialect_Flags =
+        rounding = Rounding_Flags.Value supports_negative_decimal_places=True supports_float_decimal_places=True use_builtin_bankers=False
+        primary_key = Primary_Key_Flags.Value allows_nulls=False
+        Dialect_Flags.Value rounding=rounding primary_key=primary_key
 
     ## PRIVATE
        Specifies how the database creates temp tables.
@@ -283,6 +286,20 @@ type SQLSever_Dialect
                         Warning.attach (Inexact_Type_Coercion.Warning base_type new_type unavailable=False) new_type
                 _ -> base_type
 
+    ## PRIVATE
+    needs_literal_table_cast : Value_Type -> Boolean
+    needs_literal_table_cast self value_type =
+        _ = value_type
+        False
+
+    ## PRIVATE
+    ensure_query_has_no_holes : JDBC_Connection -> Text -> Nothing ! Illegal_Argument
+    ensure_query_has_no_holes self jdbc:JDBC_Connection raw_sql:Text =
+        ## The jdbc driver doesn't work for asking about holes for SQLServer temp tables
+           We can skip this check and still get a decent error message
+        if raw_sql.contains "#" . not then
+            jdbc.ensure_query_has_no_holes raw_sql
+
 ## PRIVATE
 make_dialect_operations =
     cases = [["LOWER", Base_Generator.make_function "LOWER"], ["UPPER", Base_Generator.make_function "UPPER"]]
@@ -290,27 +307,34 @@ make_dialect_operations =
     counts = [agg_count_is_null, agg_count_empty, agg_count_not_empty, ["COUNT_DISTINCT", agg_count_distinct], ["COUNT_DISTINCT_INCLUDE_NULL", agg_count_distinct_include_null]]
     arith_extensions = [is_nan, is_inf, is_finite, floating_point_div, mod_op, decimal_div, decimal_mod, ["ROW_MIN", Base_Generator.make_function "LEAST"], ["ROW_MAX", Base_Generator.make_function "GREATEST"]]
     bool = [bool_or]
+    eq = lift_binary_op "==" make_equals
+    compare = [eq]
 
     stddev_pop = ["STDDEV_POP", Base_Generator.make_function "stddev_pop"]
     stddev_samp = ["STDDEV_SAMP", Base_Generator.make_function "stddev_samp"]
     stats = [agg_median, agg_mode, agg_percentile, stddev_pop, stddev_samp]
     date_ops = [make_extract_as_int "year", make_extract_as_int "quarter", make_extract_as_int "month", make_extract_as_int "week", make_extract_as_int "day", make_extract_as_int "hour", make_extract_as_int "minute", make_extract_fractional_as_int "second", make_extract_fractional_as_int "millisecond" modulus=1000, make_extract_fractional_as_int "microsecond" modulus=1000, ["date_add", make_date_add], ["date_diff", make_date_diff], ["date_trunc_to_day", make_date_trunc_to_day]]
-    special_overrides = []
+    special_overrides = [is_null]
     other = [["RUNTIME_ERROR", make_runtime_error_op]]
-    my_mappings = text + counts + stats + first_last_aggregators + arith_extensions + bool + date_ops + special_overrides + other
+    my_mappings = text + counts + stats + first_last_aggregators + arith_extensions + bool + compare + date_ops + special_overrides + other
     Base_Generator.base_dialect_operations . extend_with my_mappings
 
+## PRIVATE
+is_null = Base_Generator.lift_unary_op "IS_NULL" arg->
+    arg.paren ++ " IS NULL"
+
 ## PRIVATE
 agg_count_is_null = Base_Generator.lift_unary_op "COUNT_IS_NULL" arg->
-    SQL_Builder.code "COUNT_IF(" ++ arg.paren ++ " IS NULL)"
+    SQL_Builder.code "SUM(CASE WHEN " ++ arg.paren ++ " IS NULL THEN 1 ELSE 0 END)"
 
 ## PRIVATE
 agg_count_empty = Base_Generator.lift_unary_op "COUNT_EMPTY" arg->
-    SQL_Builder.code "COUNT_IF("++ arg.paren ++ " IS NULL OR " ++ arg.paren ++ " == '')"
+    SQL_Builder.code "SUM(CASE WHEN (" ++ arg.paren ++ " IS NULL) OR (" ++ arg.paren ++ " = '') THEN 1 ELSE 0 END)"
 
 ## PRIVATE
 agg_count_not_empty = Base_Generator.lift_unary_op "COUNT_NOT_EMPTY" arg->
-    SQL_Builder.code "COUNT_IF(" ++ arg.paren ++ " IS NOT NULL AND " ++ arg.paren ++ " != '')"
+    SQL_Builder.code "SUM(CASE WHEN (" ++ arg.paren ++ " IS NOT NULL) AND (" ++ arg.paren ++ " != '') THEN 1 ELSE 0 END)"
+
 
 ## PRIVATE
 agg_median = Base_Generator.lift_unary_op "MEDIAN" arg->
@@ -339,6 +363,14 @@ first_last_aggregators =
     last_not_null = make_first_aggregator reverse=True ignore_null=True
     [["FIRST", first], ["FIRST_NOT_NULL", first_not_null], ["LAST", last], ["LAST_NOT_NULL", last_not_null]]
 
+## PRIVATE
+make_equals a b =
+    case a.build.prepare.second==[True] of
+        True -> b.paren
+        False -> case b.build.prepare.second==[True] of
+            True -> a.paren
+            False -> a.paren ++ " = " ++ b.paren
+
 ## PRIVATE
 make_first_aggregator reverse ignore_null args =
     if args.length < 2 then Error.throw (Illegal_State.Error "Insufficient number of arguments for the operation.") else
@@ -430,9 +462,7 @@ right = Base_Generator.lift_binary_op "RIGHT" str-> n->
 
 ## PRIVATE
 make_order_descriptor internal_column sort_direction text_ordering =
-    nulls = case sort_direction of
-        Sort_Direction.Ascending -> Nulls_Order.First
-        Sort_Direction.Descending -> Nulls_Order.Last
+    nulls = Nothing
     case text_ordering of
         Nothing ->
             Order_Descriptor.Value (Internals_Access.column_expression internal_column) sort_direction nulls_order=nulls collation=Nothing
diff --git a/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Error_Mapper.enso b/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Error_Mapper.enso
index 5d3d50495244..496b62d619db 100644
--- a/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Error_Mapper.enso
+++ b/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Error_Mapper.enso
@@ -6,12 +6,17 @@ from Standard.Database.Errors import Invariant_Violation, SQL_Error
 type SQLServer_Error_Mapper
 
     ## PRIVATE
-    is_primary_key_violation : SQL_Error -> Boolean
-    is_primary_key_violation error =
+    is_duplicate_primary_key_violation : SQL_Error -> Boolean
+    is_duplicate_primary_key_violation error =
         ## TODO the SQL error actually contains the duplicated primary key value!
            We could use that to avoid a separate `Non_Unique_Key_Recipe` query.
         error.java_exception.getMessage.contains "Violation of PRIMARY KEY constraint"
 
+    ## PRIVATE
+    is_null_primary_key_violation : SQL_Error -> Boolean
+    is_null_primary_key_violation error =
+        error.java_exception.getMessage.contains "violates not-null constraint"
+
     ## PRIVATE
     is_table_already_exists_error : SQL_Error -> Boolean
     is_table_already_exists_error error =
diff --git a/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Type_Mapping.enso b/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Type_Mapping.enso
index c38b822bf90c..3d8f18e2373e 100644
--- a/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Type_Mapping.enso
+++ b/distribution/lib/Standard/Microsoft/0.0.0-dev/src/Internal/SQLServer_Type_Mapping.enso
@@ -84,6 +84,9 @@ type SQLServer_Type_Mapping
             Types.VARCHAR -> 
                 effective_size = if sql_type.precision==max_length || (sql_type.precision==9 && sql_type.scale==9) then Nothing else sql_type.precision
                 Value_Type.Char size=effective_size variable_length=True
+            Types.NVARCHAR -> 
+                effective_size = if sql_type.precision==max_length || (sql_type.precision==9 && sql_type.scale==9) then Nothing else sql_type.precision
+                Value_Type.Char size=effective_size variable_length=True
             Types.DATE -> Value_Type.Date
             Types.TIME -> Value_Type.Time
             Types.TIMESTAMP -> case sql_type.name of
@@ -108,8 +111,12 @@ type SQLServer_Type_Mapping
        the database backend.
     infer_return_type : (SQL_Expression -> SQL_Type_Reference) -> Text -> Vector -> SQL_Expression -> SQL_Type_Reference
     infer_return_type infer_from_database_callback op_name arguments expression =
-        _ = [op_name, arguments]
-        infer_from_database_callback expression
+        case operations_dict.contains_key op_name of
+            False -> infer_from_database_callback expression
+            True -> 
+                handler = operations_dict.at op_name
+                sql_type = handler arguments
+                SQL_Type_Reference.from_constant sql_type
 
     ## PRIVATE
        We want to respect any overriding references, but references that rely on
@@ -142,6 +149,11 @@ type SQLServer_Type_Mapping
 on_unknown_type sql_type =
     Value_Type.Unsupported_Data_Type sql_type.name sql_type
 
+## PRIVATE
+   Maps operation names to functions that infer its result type.
+operations_dict : Dictionary Text (Vector -> SQL_Type)
+operations_dict = Dictionary.from_vector [["IS_NULL", const (SQL_Type.Value Types.BIT "BIT")],["==", const (SQL_Type.Value Types.BIT "BIT")]]
+
 ## PRIVATE
    This is the maximum size that JDBC driver reports for 'unbounded' types in
    SQLServer.
diff --git a/distribution/lib/Standard/Microsoft/0.0.0-dev/src/SQLServer_Connection.enso b/distribution/lib/Standard/Microsoft/0.0.0-dev/src/SQLServer_Connection.enso
index 4d1f2b3fc2a0..d197a1c50d3e 100644
--- a/distribution/lib/Standard/Microsoft/0.0.0-dev/src/SQLServer_Connection.enso
+++ b/distribution/lib/Standard/Microsoft/0.0.0-dev/src/SQLServer_Connection.enso
@@ -9,6 +9,7 @@ from Standard.Table import Table
 import Standard.Database.Column_Description.Column_Description
 import Standard.Database.Connection.Connection.Connection
 import Standard.Database.DB_Table.DB_Table
+import Standard.Database.Internal.Common.Encoding_Limited_Naming_Properties.Encoding_Limited_Naming_Properties
 import Standard.Database.Internal.Connection.Entity_Naming_Properties.Entity_Naming_Properties
 import Standard.Database.Internal.JDBC_Connection
 import Standard.Database.SQL_Query.SQL_Query
@@ -31,8 +32,11 @@ type SQLServer_Connection
     create : Text -> Vector -> (Text -> Text -> SQLServer_Connection) -> SQLServer_Connection
     create url properties make_new =
         jdbc_connection = JDBC_Connection.create url properties
-        entity_naming_properties = Entity_Naming_Properties.from_jdbc_connection jdbc_connection is_case_sensitive=False
-        SQLServer_Connection.Value (Connection.new jdbc_connection SQLServer_Dialect.sqlserver entity_naming_properties) make_new
+        jdbc_entity_naming_properties = Entity_Naming_Properties.from_jdbc_connection jdbc_connection is_case_sensitive=True
+        ## jdbc reports table name length limit as 128, but it actually seems to be 116 for temp tables so we override it
+        limited = Encoding_Limited_Naming_Properties.Instance Encoding.utf_8 limit=116 is_case_sensitive=True
+        modified_entity_naming_properties = Entity_Naming_Properties.Value for_table_names=limited for_column_names=jdbc_entity_naming_properties.for_column_names for_generated_column_names=jdbc_entity_naming_properties.for_generated_column_names
+        SQLServer_Connection.Value (Connection.new jdbc_connection SQLServer_Dialect.sqlserver modified_entity_naming_properties) make_new
 
     ## PRIVATE
 
diff --git a/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Dialect.enso b/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Dialect.enso
index 0fec19137ba9..21846676b7f3 100644
--- a/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Dialect.enso
+++ b/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Dialect.enso
@@ -43,8 +43,10 @@ import Standard.Database.SQL.SQL_Fragment
 import Standard.Database.SQL_Statement.SQL_Statement
 import Standard.Database.SQL_Type.SQL_Type
 from Standard.Database.Dialect import Temp_Table_Style
+from Standard.Database.Dialect_Flags import all
 from Standard.Database.Errors import SQL_Error, Unsupported_Database_Operation
 from Standard.Database.Internal.IR.Operation_Metadata import Date_Period_Metadata
+from Standard.Database.Internal.JDBC_Connection import JDBC_Connection
 from Standard.Database.Internal.Statement_Setter import fill_hole_default
 
 import project.Internal.Snowflake_Error_Mapper.Snowflake_Error_Mapper
@@ -200,13 +202,13 @@ type Snowflake_Dialect
     supports_separate_nan : Boolean
     supports_separate_nan self = True
 
-    ## PRIVATE
-    supports_negative_round_decimal_places : Boolean
-    supports_negative_round_decimal_places self = True
-
-    ## PRIVATE
-    supports_float_round_decimal_places : Boolean
-    supports_float_round_decimal_places self = True
+    ## PRIVAITE
+       Specifies implementation details flags.
+    dialect_flags : Dialect_Flags
+    dialect_flags self -> Dialect_Flags =
+        rounding = Rounding_Flags.Value supports_negative_decimal_places=True supports_float_decimal_places=True use_builtin_bankers=True
+        primary_key = Primary_Key_Flags.Value allows_nulls=False
+        Dialect_Flags.Value rounding=rounding primary_key=primary_key
 
     ## PRIVATE
        Specifies how the database creates temp tables.
@@ -305,6 +307,11 @@ type Snowflake_Dialect
         Value_Type.Date_Time _ -> True
         _                      -> False
 
+    ## PRIVATE
+    ensure_query_has_no_holes : JDBC_Connection -> Text -> Nothing ! Illegal_Argument
+    ensure_query_has_no_holes self jdbc:JDBC_Connection raw_sql:Text =
+        jdbc.ensure_query_has_no_holes raw_sql
+
     ## PRIVATE
        In Snowflake we need to create tables outside of transactions.
        However, currently we decide to opt-out of the integrity check for
@@ -357,6 +364,7 @@ type Snowflake_Dialect
 
 ## PRIVATE
 make_dialect_operations =
+    arith = [round_bankers]
     cases = [["LOWER", Base_Generator.make_function "LOWER"], ["UPPER", Base_Generator.make_function "UPPER"]]
     text = [starts_with, contains, ends_with, agg_shortest, agg_longest, make_case_sensitive, ["REPLACE", replace], left, right]+concat_ops+cases+trim_ops
     counts = [agg_count_is_null, agg_count_empty, agg_count_not_empty, ["COUNT_DISTINCT", agg_count_distinct], ["COUNT_DISTINCT_INCLUDE_NULL", agg_count_distinct_include_null]]
@@ -374,7 +382,7 @@ make_dialect_operations =
         operations = [["date_add", make_date_add], ["date_diff", make_date_diff], ["date_trunc_to_day", make_date_trunc_to_day]]
         trivial + fractional + other + operations
     other = [["IIF", make_iif], ["RUNTIME_ERROR", make_runtime_error_op], ["ROW_NUMBER_IN_GROUP", make_row_number_in_group]]
-    my_mappings = text + counts + stats + arith_extensions + bool + date_ops + other + first_last_aggregators
+    my_mappings = arith + text + counts + stats + arith_extensions + bool + date_ops + other + first_last_aggregators
     Base_Generator.base_dialect_operations . extend_with my_mappings
 
 ## PRIVATE
@@ -552,6 +560,37 @@ make_order_descriptor internal_column sort_direction text_ordering =
                             folded_expression = SQL_Expression.Operation "LOWER" [upper]
                             Order_Descriptor.Value folded_expression sort_direction nulls_order=nulls collation=Nothing
 
+## PRIVATE
+round_bankers = Base_Generator.lift_binary_op "ROUND_BANKERS" x-> dp->
+    two = SQL_Builder.code "2"
+    ten = SQL_Builder.code "10"
+    fun f args = (SQL_Builder.code f ++ "(" ++ (SQL_Builder.join "," (args.map .paren)) ++ ")").paren
+    neg x = (SQL_Builder.code "-" ++ x.paren).paren
+    scale = fun "POW" [ten, dp]
+    floor x = fun "FLOOR" [x]
+    ceil x = fun "CEIL" [x]
+    round x = fun "ROUND" [x]
+    case_when cases else_clause =
+        cases_sqls = cases.map pr->
+            pred = pr.at 0
+            exp = pr.at 1
+            SQL_Builder.code "WHEN " ++ pred.paren ++ " THEN " ++ exp.paren
+        (SQL_Builder.code "CASE " ++ (SQL_Builder.join " " cases_sqls) ++ " ELSE " ++ else_clause ++ " END").paren
+    mod2 x = fun "MOD" [x, two]
+
+    # Scale for the decimal_places argument.
+    scaled = (x.paren ++ " * " ++ scale).paren
+
+    # We've wrapped all values to the 0..2 range, which needs 3 cases.
+    partition x = case_when [[mod2 x ++ " <= 0.5", floor x], [mod2 x ++ " >= 1.5", ceil x]] (round x)
+
+    # Handle negative values by negating on the way in and on the way out.
+    flip_for_negative x f = case_when [[x ++ " >= 0", f x]] (neg (f (neg x)))
+    bankers_rounded = flip_for_negative scaled partition
+
+    # Undo the scaling factor.
+    (bankers_rounded ++ " / " ++ scale).paren
+
 ## PRIVATE
 is_nan = Base_Generator.lift_unary_op "IS_NAN" arg->
     (arg ++ " in ('NaN'::float)").paren
diff --git a/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Error_Mapper.enso b/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Error_Mapper.enso
index d48130848f4e..085442484683 100644
--- a/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Error_Mapper.enso
+++ b/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Error_Mapper.enso
@@ -6,11 +6,16 @@ from Standard.Database.Errors import Invariant_Violation, SQL_Error
 type Snowflake_Error_Mapper
 
     ## PRIVATE
-    is_primary_key_violation : SQL_Error -> Boolean
-    is_primary_key_violation error =
+    is_duplicate_primary_key_violation : SQL_Error -> Boolean
+    is_duplicate_primary_key_violation error =
         # TODO https://github.com/enso-org/enso/issues/7117
         error.java_exception.getMessage.contains "A primary key already exists."
 
+    ## PRIVATE
+    is_null_primary_key_violation : SQL_Error -> Boolean
+    is_null_primary_key_violation error =
+        error.java_exception.getMessage.contains "NULL result in a non-nullable column"
+
     ## PRIVATE
     is_table_already_exists_error : SQL_Error -> Boolean
     is_table_already_exists_error error =
diff --git a/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Type_Mapping.enso b/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Type_Mapping.enso
index 524624c7a757..30ed5810e711 100644
--- a/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Type_Mapping.enso
+++ b/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Type_Mapping.enso
@@ -33,7 +33,7 @@ type Snowflake_Type_Mapping
             Value_Type.Float _ -> SQL_Type.Value Types.DOUBLE "FLOAT"
             Value_Type.Decimal precision scale -> case precision of
                 # If precision is not set, scale is also lost because SQL is unable to express a scale without a precision.
-                Nothing -> SQL_Type.Value Types.DECIMAL "NUMBER" Nothing Nothing
+                Nothing -> SQL_Type.Value Types.DECIMAL "NUMBER" 38 12
                 # Scale can be set or not, but if it is set, it must be in range 0-37.
                 # If scale or precision is out of range, we fall back to Nothing.
                 _       -> if (precision < 1) || (precision > 38) then SQL_Type.Value Types.DECIMAL "NUMBER" Nothing Nothing else
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Column.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Column.enso
index 6bf75b09b9ba..968e61410190 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Column.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Column.enso
@@ -2587,7 +2587,7 @@ type Column
         names = statistics.map _.to_text
         Table.from_rows names [values]
 
-    ## ALIAS count, kurtosis, maximum, mean, median, minimum, mode, skew, standard_deviation, statistic, sum, variance
+    ## ALIAS cumulative, count, sum, total, minimum, maximum, sum, mean, product, variance, standard deviation
        GROUP Standard.Base.Statistics
        ICON transform4
        Compute a single running statistic on the column.
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Add_Row_Number.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Add_Row_Number.enso
index cb2ccd86e159..1b967824797a 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Add_Row_Number.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Add_Row_Number.enso
@@ -26,20 +26,23 @@ add_row_number table name from step group_by order_by on_problems:Problem_Behavi
         Error.throw (Illegal_Argument.Error "The row number has exceeded the 64-bit integer range. BigInteger numbering is currently not supported. Please use a smaller start/step.")
 
     problem_builder.attach_problems_before on_problems <| Panic.catch ArithmeticException handler=handle_arithmetic_exception <| Panic.catch Unsupported_Argument_Types handler=handle_arithmetic_exception <|
-        no_order_no_group = grouping_columns.is_empty && ordering.is_empty
-        new_column = case no_order_no_group of
-            True -> make_range_column name from step table.row_count
-            False ->
-                ordering_columns = ordering.map c->c.column.java_column
-                directions = ordering.map c->c.associated_selector.direction.to_sign
-                grouping_java_columns = grouping_columns.map c->c.java_column
-                new_storage = Java_Problems.with_problem_aggregator on_problems java_problem_aggregator->
-                    AddRowNumber.create_numbering from step grouping_java_columns ordering_columns directions java_problem_aggregator
-                Column.from_storage name new_storage
-
+        new_column = create_column table name from step grouping_columns ordering on_problems
         renamed_table = rename_columns_if_needed table name on_problems Table.new
         renamed_table.set new_column name set_mode=Set_Mode.Add
 
+## PRIVATE
+create_column table name from step grouping_columns ordering on_problems =
+    no_order_no_group = grouping_columns.is_empty && ordering.is_empty
+    case no_order_no_group of
+        True -> make_range_column name from step table.row_count
+        False ->
+            ordering_columns = ordering.map c->c.column.java_column
+            directions = ordering.map c->c.associated_selector.direction.to_sign
+            grouping_java_columns = grouping_columns.map c->c.java_column
+            new_storage = Java_Problems.with_problem_aggregator on_problems java_problem_aggregator->
+                AddRowNumber.create_numbering from step grouping_java_columns ordering_columns directions java_problem_aggregator
+            Column.from_storage name new_storage
+
 ## PRIVATE
    If the table already contains a column called `name` it will be renamed to a
    unique name, so that a new column with this name can be added.
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Add_Running.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Add_Running.enso
index f6d28aafa740..5e6565035453 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Add_Running.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Add_Running.enso
@@ -1,3 +1,5 @@
+private
+
 from Standard.Base import all
 import Standard.Base.Errors.Common.Unsupported_Argument_Types
 import Standard.Base.Errors.Illegal_Argument.Illegal_Argument
@@ -19,27 +21,31 @@ polyglot java import org.enso.table.data.column.storage.numeric.LongRangeStorage
 polyglot java import org.enso.table.operations.AddRunning
 
 ## PRIVATE
-add_running : Table -> Statistic -> (Text|Integer) -> Text -> Vector (Text | Integer | Regex) | Text | Integer | Regex -> Vector (Text | Sort_Column) | Text -> Problem_Behavior -> Table
-add_running table (statistic:Statistic=Statistic.Count) (of:Text|Integer=0) (as:Text='') (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
+add_running : Table -> Statistic -> (Text|Integer) -> Text -> Set_Mode -> Vector (Text | Integer | Regex) | Text | Integer | Regex -> Vector (Text | Sort_Column) | Text -> Problem_Behavior -> Table
+add_running table (statistic:Statistic=Statistic.Count) (of:Text|Integer=0) (as:Text='') (set_mode:Set_Mode=..Add) (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
     check_running_support [statistic] <|
         of_col = table.at of
-        new_name = if as.is_empty then 'Running ' + statistic.to_text + ' of ' + of_col.name else as   
-        case statistic of
-            Statistic.Count ->
-                Add_Row_Number.add_row_number table new_name 1 1 group_by order_by on_problems
+        new_name = case as.is_empty of
+            False -> as
+            True -> case set_mode of
+                Set_Mode.Update -> of_col.name
+                _ ->  'Running ' + statistic.to_text + ' of ' + of_col.name
+
+        problem_builder = Problem_Builder.new error_on_missing_columns=True
+        grouping_columns = table.columns_helper.select_columns_helper group_by Case_Sensitivity.Default True problem_builder 
+        ordering = Table_Helpers.resolve_order_by table.columns order_by problem_builder
+        source_java_column = of_col.java_column
+        grouping_java_columns = grouping_columns.map c->c.java_column
+        ordering_java_columns = ordering.map c->
+            c.column.java_column
+        directions = ordering.map c->
+            c.associated_selector.direction.to_sign
+        new_column = case statistic of
+            Statistic.Count -> 
+                Add_Row_Number.create_column table new_name from=1 step=1 grouping_columns ordering on_problems
             _ ->
                 Value_Type.expect_numeric of_col <|
-                    problem_builder = Problem_Builder.new error_on_missing_columns=True
-                    grouping_columns = table.columns_helper.select_columns_helper group_by Case_Sensitivity.Default True problem_builder 
-                    ordering = Table_Helpers.resolve_order_by table.columns order_by problem_builder
-                    source_java_column = of_col.java_column
-                    grouping_java_columns = grouping_columns.map c->c.java_column
-                    ordering_java_columns = ordering.map c->
-                        c.column.java_column
-                    directions = ordering.map c->
-                        c.associated_selector.direction.to_sign
-
-                    Java_Problems.with_problem_aggregator on_problems java_problem_aggregator->
-                        new_storage = AddRunning.create_running statistic.to_java source_java_column grouping_java_columns ordering_java_columns directions java_problem_aggregator
-                        new_column = Column.from_storage new_name new_storage
-                        table.set new_column new_name set_mode=Set_Mode.Add
+                    new_storage = Java_Problems.with_problem_aggregator on_problems java_problem_aggregator->
+                        AddRunning.create_running statistic.to_java source_java_column grouping_java_columns ordering_java_columns directions java_problem_aggregator
+                    Column.from_storage new_name new_storage
+        table.set new_column new_name set_mode
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Widget_Helpers.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Widget_Helpers.enso
index 3d267dcab90e..8a7697d6851d 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Widget_Helpers.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Widget_Helpers.enso
@@ -20,7 +20,7 @@ from project.Extensions.Table_Conversions import all
 ## PRIVATE
    Make an aggregate column selector.
 make_aggregate_column_selector : Table -> Display -> Widget
-make_aggregate_column_selector table display=Display.Always =
+make_aggregate_column_selector table display:Display=..Always =
     col_names_selector = make_column_name_selector table display=Display.Always add_expression=True
     column_widget = ["column", col_names_selector]
 
@@ -62,7 +62,7 @@ make_aggregate_column_selector table display=Display.Always =
 ## PRIVATE
    Make an Aggregate_Column list editor
 make_aggregate_column_vector_selector : Table -> Display -> Widget
-make_aggregate_column_vector_selector table display=Display.Always =
+make_aggregate_column_vector_selector table display:Display=..Always =
     item_editor = make_aggregate_column_selector table display=Display.Always
     # TODO this is a workaround for a dropdown issue
     Vector_Editor item_editor=item_editor item_default="..Count" display=display
@@ -70,7 +70,7 @@ make_aggregate_column_vector_selector table display=Display.Always =
 ## PRIVATE
    Make a column name selector.
 make_column_name_selector : Table -> Boolean -> Display -> Widget
-make_column_name_selector table add_expression:Boolean=False display=Display.Always =
+make_column_name_selector table add_expression:Boolean=False display:Display=..Always =
     col_names = table.column_names
     names = col_names.map n-> Option n n.pretty
     expression = if add_expression then [Option "<Expression>" "(expr '["+table.column_names.first+"]')"] else []
@@ -79,14 +79,14 @@ make_column_name_selector table add_expression:Boolean=False display=Display.Alw
 ## PRIVATE
    Make a multiple column name selector.
 make_column_name_vector_selector : Table -> Display -> Widget
-make_column_name_vector_selector table display=Display.Always =
+make_column_name_vector_selector table display:Display=..Always =
     item_editor = make_column_name_selector table display=Display.Always
     Vector_Editor item_editor=item_editor item_default=item_editor.values.first.value display=display
 
 ## PRIVATE
    Make a multiple column-name selector that allows each value to be selected at most once.
 make_column_name_multi_selector : Table -> Display -> Boolean -> Boolean -> Widget
-make_column_name_multi_selector table display:Display=Display.Always add_regex:Boolean=False add_by_type:Boolean=False =
+make_column_name_multi_selector table display:Display=..Always add_regex:Boolean=False add_by_type:Boolean=False =
     names = table.column_names.map n-> Option n n.pretty
     regex = if add_regex then [Option "<Regular Expression>" "(regex '')"] else []
     by_type = if add_by_type then [Option "<By Type>" "(..By_Type ..Integer)"] else []
@@ -111,7 +111,7 @@ make_fill_default_value_selector column_source=Nothing display:Display=..Always
 
 ## PRIVATE
    Make a filter condition selector.
-make_filter_condition_selector table display=Display.Always =
+make_filter_condition_selector table display:Display=..Always =
     equatable_types = make_column_ref_by_name_selector table add_text=True add_number=True add_boolean=True add_date=True add_time=True add_date_time=True
     comparable_types = make_column_ref_by_name_selector table add_text=True add_number=True add_date=True add_time=True add_date_time=True
     with_text = make_column_ref_by_name_selector table add_text=True
@@ -147,14 +147,14 @@ make_filter_condition_selector table display=Display.Always =
 ## PRIVATE
    Make a join kind selector - Needed to override display.
 make_join_kind_selector : Display -> Widget
-make_join_kind_selector display=Display.Always =
+make_join_kind_selector display:Display=..Always =
     options = ["Inner", "Left_Outer", "Right_Outer", "Full", "Left_Exclusive", "Right_Exclusive"].map n-> Option n ".."+n
     Single_Choice display=display values=options
 
 ## PRIVATE
    Make a join condition selector.
 make_join_condition_selector : Table -> Display -> Any -> Widget
-make_join_condition_selector table display=Display.Always cache=Nothing =
+make_join_condition_selector table display:Display=..Always cache=Nothing =
     right = cache.if_not_nothing <| cache "right"
     self_selector = make_column_name_selector table display=Display.Always
     right_selector = if right.is_nothing then Text_Input else
@@ -171,7 +171,7 @@ make_join_condition_selector table display=Display.Always cache=Nothing =
 ## PRIVATE
    Make a column name selector.
 make_order_by_selector : Table -> Display -> Boolean -> Widget
-make_order_by_selector table display=Display.Always name_only:Boolean=False =
+make_order_by_selector table display:Display=..Always name_only:Boolean=False =
     values = if name_only then table.column_names.map n-> Option n "(..Name "+n.pretty+")" else
         name = Option "Name" "..Name" [["name", make_column_name_selector table display=Display.Always]]
         index = Option "Index" "..Index" [["index", Numeric_Input display=Display.Always minimum=0 maximum=table.column_count-1]]
@@ -183,7 +183,7 @@ make_order_by_selector table display=Display.Always name_only:Boolean=False =
 ## PRIVATE
    Make a column rename name selector.
 make_rename_name_vector_selector : Table -> Display -> Any -> Widget
-make_rename_name_vector_selector table display=Display.Always cache=Nothing =
+make_rename_name_vector_selector table display:Display=..Always cache=Nothing =
     col_names = table.column_names
 
     ## Resolved Used Names
@@ -246,7 +246,7 @@ make_value_type_vector_selector =
 ## PRIVATE
    Make a replace builder.
 make_replace_selector : Display -> Widget
-make_replace_selector display=Display.Always =
+make_replace_selector display:Display=..Always =
     key_selector = make_any_selector add_text=True add_regex=True add_number=True add_boolean=True add_named_pattern=True add_date=True add_time=True add_date_time=True add_nothing=False
     value_selector = make_any_selector add_text=True add_regex=True add_number=True add_boolean=True add_named_pattern=True add_date=True add_time=True add_date_time=True add_nothing=True
     fqn = Meta.get_qualified_type_name Pair
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Simple_Expression.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Simple_Expression.enso
index 0262eee9b6d3..a2247b45805a 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Simple_Expression.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Simple_Expression.enso
@@ -246,13 +246,13 @@ type Date_Operation
     ## PRIVATE
     create_widget : Table_Ref -> Display -> Widget
     create_widget table:Table_Ref display:Display=Display.Always =
-        col_names = Widget_Helpers.make_column_ref_by_name_selector table
         with_number = Widget_Helpers.make_column_ref_by_name_selector table add_number=True
+        with_date = Widget_Helpers.make_column_ref_by_name_selector table add_date=True add_date_time=True
 
         options = Vector.build builder->
             builder.append (Option "add" "..Add" [["length", with_number]])
             builder.append (Option "part" "..Part")
-            builder.append (Option "diff" "..Diff" [["end", col_names]])
+            builder.append (Option "diff" "..Diff" [["end", with_date]])
             builder.append (Option "truncate" "..Truncate")
             builder.append (Option "year" "..Year")
             builder.append (Option "month" "..Month")
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Table.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Table.enso
index 52a54fe194bb..21d05aabf32a 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Table.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Table.enso
@@ -185,8 +185,7 @@ type Table
                  row_3 =  [ 3     , True  , 'c'   ]
                  Table.from_rows header [row_1, row_2, row_3]
     @header (Widget.Vector_Editor item_editor=Widget.Text_Input item_default='"Column"')
-    from_rows : Vector -> Vector -> Table
-    from_rows header rows =
+    from_rows header:Vector rows:Vector -> Table =
         columns = header.map_with_index i-> name-> [name, rows.map (_.at i)]
         Table.new columns
 
@@ -1033,7 +1032,7 @@ type Table
         problem_builder.attach_problems_before on_problems <|
             self.drop (..First 1) . rename_columns new_names_cleaned on_problems=on_problems
 
-    ## ALIAS group by, summarize
+    ## ALIAS group by, summarize, count, count distinct, sum, average, mean, median, percentile, mode, standard deviation, variance, minimum, maximum, first, last, shortest, longest
        GROUP Standard.Base.Calculations
        ICON transform4
 
@@ -2239,7 +2238,7 @@ type Table
 
        Arguments:
        - name: The name of the new column. Defaults to "Row".
-       - from: The starting value for the enumeration. Defaults to 1.
+       - from: The starting value for the enumeration. Defaults to 0.
        - step: The amount to increment the enumeration by. Defaults to 1.
        - group_by: Specifies the columns to group by. The row numbers are
          counted separately for each group. By default, all rows are treated as
@@ -2264,10 +2263,12 @@ type Table
            existing column is renamed to avoid the clash.
          - If grouping on floating point numbers, a `Floating_Point_Equality`
            problem is reported.
-    @group_by Widget_Helpers.make_column_name_multi_selector
-    @order_by Widget_Helpers.make_order_by_selector
+    @name (Widget.Text_Input display=..Always)
+    @from (Widget.Numeric_Input display=..Always)
+    @group_by (Widget_Helpers.make_column_name_multi_selector display=..When_Modified)
+    @order_by (Widget_Helpers.make_order_by_selector display=..When_Modified)
     add_row_number : Text -> Integer -> Integer -> Vector (Text | Integer | Regex) | Text | Integer | Regex -> Vector (Text | Sort_Column) | Text -> Problem_Behavior -> Table
-    add_row_number self (name:Text="Row") (from:Integer=1) (step:Integer=1) (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
+    add_row_number self (name:Text="Row") (from:Integer=0) (step:Integer=1) (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
         Add_Row_Number.add_row_number self name from step group_by order_by on_problems
 
     ## ALIAS add column, expression, formula, new column, update column
@@ -3592,7 +3593,7 @@ type Table
         transformer col = col.text_cleanse remove
         Table_Helpers.replace_columns_with_transformed_columns self from transformer
 
-    ## ALIAS cumulative
+    ## ALIAS cumulative, count, sum, total, minimum, maximum, sum, mean, product, variance, standard deviation
        GROUP Standard.Base.Values
        ICON column_add
        Adds a new column to the table with a running calculation.
@@ -3601,6 +3602,8 @@ type Table
        - statistic: The running statistic to calculate.
        - of: The existing column to run the statistic over.
        - as: The name of the new column.
+       - set_mode: Specifies the expected behaviour in regards to existing
+         column with the same name.
        - group_by: Specifies the columns to group by. The running statistic is
          calculated separately for each group. By default, all rows are treated as
          a single group.
@@ -3627,9 +3630,9 @@ type Table
     @group_by Widget_Helpers.make_column_name_multi_selector
     @order_by Widget_Helpers.make_order_by_selector
     @of Widget_Helpers.make_column_name_selector
-    running : Statistic -> (Text | Integer) -> Text -> Vector (Text | Integer | Regex) | Text | Integer | Regex -> Vector (Text | Sort_Column) | Text -> Problem_Behavior -> Table
-    running self (statistic:Statistic=..Count) (of:(Text | Integer)=0) (as:Text='') (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
-        Add_Running.add_running self statistic of as group_by order_by on_problems
+    running : Statistic -> (Text | Integer) -> Text -> Set_Mode -> Vector (Text | Integer | Regex) | Text | Integer | Regex -> Vector (Text | Sort_Column) | Text -> Problem_Behavior -> Table
+    running self (statistic:Statistic=..Count) (of:(Text | Integer)=0) (as:Text='') (set_mode:Set_Mode=..Add) (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
+        Add_Running.add_running self statistic of as set_mode group_by order_by on_problems
 
     ## PRIVATE
     column_naming_helper : Column_Naming_Helper
@@ -3780,11 +3783,13 @@ Table.from (that:Column) = that.to_table
    - that: The text to convert.
    - format: The format of the text.
    - on_problems: What to do if there are problems reading the text.
-Table.from (that : Text) (format = Delimited_Format.Delimited '\t') (on_problems:Problem_Behavior=..Report_Warning) =
-    resolved_format = File_Format.resolve format
-    case resolved_format of
-        _ : Delimited_Format -> Delimited_Reader.read_text that resolved_format on_problems
-        _ -> Unimplemented.throw "Table.from is currently only implemented for Delimited_Format."
+Table.from (that : Text) (format = Delimited_Format.Delimited '\t') (on_problems:Problem_Behavior=..Report_Warning) = case format of
+    _ : Text -> Table.from that (Delimited_Format.Delimited format) on_problems
+    _ ->
+        resolved_format = File_Format.resolve format
+        case resolved_format of
+            _ : Delimited_Format -> Delimited_Reader.read_text that resolved_format on_problems
+            _ -> Unimplemented.throw "Table.from is currently only implemented for Delimited_Format."
 
 ## PRIVATE
    Converts a Table into a Text value.
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Value_Type.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Value_Type.enso
index ab0a51635e49..4f0dda8cda83 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Value_Type.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Value_Type.enso
@@ -483,6 +483,12 @@ type Value_Type
         JS_Object.from_pairs <|
             [["type", "Value_Type"], ["constructor", constructor_name], ["display_text", display_text_value]] + additional_fields
 
+    ## PRIVATE
+       Provides the constructor name 
+    to_name : Text
+    to_name self = 
+        Meta.meta self . constructor . name
+
     ## GROUP Standard.Base.Metadata
        ICON metadata
        Check if the same type of value ignoring size, precision and scale.
diff --git a/distribution/lib/Standard/Visualization/0.0.0-dev/src/Scatter_Plot.enso b/distribution/lib/Standard/Visualization/0.0.0-dev/src/Scatter_Plot.enso
index af891ddb5029..35684147f677 100644
--- a/distribution/lib/Standard/Visualization/0.0.0-dev/src/Scatter_Plot.enso
+++ b/distribution/lib/Standard/Visualization/0.0.0-dev/src/Scatter_Plot.enso
@@ -1,6 +1,6 @@
 from Standard.Base import all
 import Standard.Base.Data.Vector.Builder
-from Standard.Table import Column, Table
+from Standard.Table import Column, Table, Value_Type
 
 import project.Helpers
 
@@ -48,11 +48,14 @@ type Point_Data
     ## PRIVATE
     Size
 
+    ## PRIVATE
+    Row_Number
+
     ## PRIVATE
 
        Returns all recognized point data fields.
     all_fields : Vector
-    all_fields = [Point_Data.X, Point_Data.Y, Point_Data.Color, Point_Data.Shape, Point_Data.Label, Point_Data.Size]
+    all_fields = [Point_Data.X, Point_Data.Y, Point_Data.Color, Point_Data.Shape, Point_Data.Label, Point_Data.Size, Point_Data.Row_Number]
 
     ## PRIVATE
     recognized_names : Vector
@@ -71,7 +74,7 @@ type Point_Data
     fallback_column self table = case self of
         Point_Data.X ->
             candidate = table.columns.first
-            is_good c = c.is_numeric && c.name != Point_Data.Y.name
+            is_good c = (c.is_numeric || c.value_type.is_date_or_time) && c.name != Point_Data.Y.name
             if is_good candidate then candidate else Point_Data.iota table.row_count
         Point_Data.Y ->
             x_column = Point_Data.X.lookup_in table
@@ -89,6 +92,9 @@ type Point_Data
             is_good c = (self.is_recognized c).not
 
             candidates.find if_missing=candidates.first is_good
+        Point_Data.Row_Number ->
+            Point_Data.iota table.row_count
+            
         _ -> Error.throw No_Fallback_Column
 
     ## PRIVATE
@@ -156,7 +162,7 @@ Table.axes self all_fields =
 ## PRIVATE
 Vector.point_data : Vector
 Vector.point_data self  =
-    self.map_with_index i-> elem-> JS_Object.from_pairs [[Point_Data.X.name, i], [Point_Data.Y.name, elem]]
+    self.map_with_index i-> elem-> JS_Object.from_pairs [[Point_Data.X.name, i], [Point_Data.Y.name, elem], [Point_Data.Row_Number.name, i]]
 
 ## PRIVATE
 bound_data bounds data = case bounds of
@@ -208,23 +214,36 @@ get_axes_field number_of_numeric =
     fields_for_multiseries = ((0.up_to number_of_numeric).map idx-> Point_Data.Y_multi idx)
     fields_for_multiseries . insert item=Point_Data.X . insert item=Point_Data.Y
 
+## PRIVATE
+
+   Returns whether the x axis should be time/date. This is either a column named 'X' or the left most column
+get_x_value_type : Table -> Value_Type
+get_x_value_type table =
+    get_x_or_first t =
+        x_col = t.lookup_ignore_case Point_Data.X.name
+        x_col.catch_ <| t.columns.first
+    x_col = get_x_or_first table
+    x_col.value_type
+
 ## PRIVATE
 json_from_table : Table -> Vector Integer | Nothing -> Integer | Nothing -> Text
 json_from_table table bounds limit =
-    number_of_numeric_cols = table.numeric_column_count-2
+    x_value_type = get_x_value_type table
+    x_is_date_or_time = x_value_type.is_date_or_time
+    number_of_numeric_cols = if x_is_date_or_time then table.numeric_column_count-1 else table.numeric_column_count-2
     fields_for_multiseries = Point_Data.all_fields + ((0.up_to number_of_numeric_cols).map idx-> Point_Data.Y_multi idx)
     fields_for_plot = if number_of_numeric_cols > 0 then fields_for_multiseries else Point_Data.all_fields
     data = table.point_data fields_for_plot |> bound_data bounds |> limit_data limit
     fields_for_axes = get_axes_field number_of_numeric_cols
     axes = table.axes fields_for_axes
     is_multi_series = number_of_numeric_cols > 0
-    JS_Object.from_pairs [[data_field, data], [axis_field, axes], ["is_multi_series", is_multi_series]] . to_json
+    JS_Object.from_pairs [[data_field, data], [axis_field, axes], ["is_multi_series", is_multi_series], ["get_row_method", "get_row"], ["x_value_type", x_value_type.to_name]] . to_json
 
 ## PRIVATE
 json_from_vector : Vector Any -> Vector Integer | Nothing -> Integer | Nothing -> Text
 json_from_vector vec bounds limit =
     data = vec.point_data |> bound_data bounds |> limit_data limit
-    JS_Object.from_pairs [[data_field, data], [axis_field, Nothing], ["is_multi_series", False]] . to_json
+    JS_Object.from_pairs [[data_field, data], [axis_field, Nothing], ["is_multi_series", False], ["get_row_method", "at"], ["x_value_type", Value_Type.Integer.to_name]] . to_json
 
 ## PRIVATE
 
diff --git a/distribution/lib/Standard/Visualization/0.0.0-dev/src/Widgets.enso b/distribution/lib/Standard/Visualization/0.0.0-dev/src/Widgets.enso
index da81fb82db69..0a20b2b63f87 100644
--- a/distribution/lib/Standard/Visualization/0.0.0-dev/src/Widgets.enso
+++ b/distribution/lib/Standard/Visualization/0.0.0-dev/src/Widgets.enso
@@ -2,6 +2,10 @@ from Standard.Base import all
 import Standard.Base.Errors.Common.Not_Invokable
 from Standard.Base.Meta import Instrumentor
 
+from Standard.Table import all
+
+from Standard.Database import all
+
 ## PRIVATE
    Basic preprocessor for widgets metadata visualization.
 
diff --git a/engine/common/src/main/java/org/enso/common/Asserts.java b/engine/common/src/main/java/org/enso/common/Asserts.java
new file mode 100644
index 000000000000..8d3001f636a4
--- /dev/null
+++ b/engine/common/src/main/java/org/enso/common/Asserts.java
@@ -0,0 +1,14 @@
+package org.enso.common;
+
+public final class Asserts {
+  private Asserts() {
+  }
+
+  public static void assertInJvm(boolean check) {
+    assert check;
+  }
+
+  public static void assertInJvm(boolean check, String msg) {
+    assert check : msg;
+  }
+}
diff --git a/engine/language-server/src/main/scala/org/enso/languageserver/boot/MainModule.scala b/engine/language-server/src/main/scala/org/enso/languageserver/boot/MainModule.scala
index a28a06d18843..bd2bbbb31b43 100644
--- a/engine/language-server/src/main/scala/org/enso/languageserver/boot/MainModule.scala
+++ b/engine/language-server/src/main/scala/org/enso/languageserver/boot/MainModule.scala
@@ -222,7 +222,7 @@ class MainModule(serverConfig: LanguageServerConfig, logLevel: Level) {
     new ContentRootManagerWrapper(languageServerConfig, contentRootManagerActor)
 
   lazy val fileManager = system.actorOf(
-    FileManager.pool(
+    FileManager.props(
       languageServerConfig.fileManager,
       contentRootManagerWrapper,
       fileSystem,
diff --git a/engine/language-server/src/main/scala/org/enso/languageserver/filemanager/FileManager.scala b/engine/language-server/src/main/scala/org/enso/languageserver/filemanager/FileManager.scala
index f45c218bc252..12d7a19caac7 100644
--- a/engine/language-server/src/main/scala/org/enso/languageserver/filemanager/FileManager.scala
+++ b/engine/language-server/src/main/scala/org/enso/languageserver/filemanager/FileManager.scala
@@ -2,7 +2,6 @@ package org.enso.languageserver.filemanager
 
 import akka.actor.{Actor, Props}
 import akka.pattern.pipe
-import akka.routing.SmallestMailboxPool
 import com.typesafe.scalalogging.LazyLogging
 import org.enso.languageserver.data.FileManagerConfig
 import org.enso.languageserver.effect._
@@ -323,13 +322,4 @@ object FileManager {
     exec: Exec[BlockingIO]
   ): Props =
     Props(new FileManager(config, contentRootManager, fs, exec))
-
-  def pool(
-    config: FileManagerConfig,
-    contentRootManager: ContentRootManager,
-    fs: FileSystem,
-    exec: Exec[BlockingIO]
-  ): Props =
-    SmallestMailboxPool(config.parallelism)
-      .props(props(config, contentRootManager, fs, exec))
 }
diff --git a/engine/runner/src/main/java/org/enso/runner/Main.java b/engine/runner/src/main/java/org/enso/runner/Main.java
index 6ce937cbb306..6a75d55b8997 100644
--- a/engine/runner/src/main/java/org/enso/runner/Main.java
+++ b/engine/runner/src/main/java/org/enso/runner/Main.java
@@ -13,6 +13,9 @@
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.concurrent.ExecutionException;
+import java.util.concurrent.Executors;
+import java.util.concurrent.ThreadFactory;
 import java.util.concurrent.TimeUnit;
 import java.util.function.Function;
 import java.util.stream.Collectors;
@@ -959,12 +962,21 @@ private void runRepl(
   }
 
   private static MessageTransport replTransport() {
-    var repl = new Repl(makeTerminalForRepl());
+    ThreadFactory factory = (r) -> new Thread(r, "Initialize Enso Terminal");
+    var executor = Executors.newSingleThreadExecutor(factory);
+    var futureRepl = executor.submit(() -> new Repl(makeTerminalForRepl()));
     MessageTransport transport =
-        (uri, peer) ->
-            DebugServerInfo.URI.equals(uri.toString())
-                ? new DebuggerSessionManagerEndpoint(repl, peer)
-                : null;
+        (uri, peer) -> {
+          if (DebugServerInfo.URI.equals(uri.toString())) {
+            try {
+              var repl = futureRepl.get();
+              return new DebuggerSessionManagerEndpoint(repl, peer);
+            } catch (InterruptedException | ExecutionException ex) {
+              logger.error("Cannot initialize REPL transport", ex);
+            }
+          }
+          return null;
+        };
     return transport;
   }
 
diff --git a/engine/runner/src/main/resources/META-INF/native-image/org/enso/runner/reflect-config.json b/engine/runner/src/main/resources/META-INF/native-image/org/enso/runner/reflect-config.json
index 7b8769216cd2..7a18744c81e6 100644
--- a/engine/runner/src/main/resources/META-INF/native-image/org/enso/runner/reflect-config.json
+++ b/engine/runner/src/main/resources/META-INF/native-image/org/enso/runner/reflect-config.json
@@ -428,7 +428,10 @@
 },
 {
   "name":"java.lang.Object",
-  "methods":[{"name":"equals","parameterTypes":["java.lang.Object"] }, {"name":"hashCode","parameterTypes":[] }, {"name":"toString","parameterTypes":[] }]
+  "methods":[
+    {"name":"<init>", "parameterTypes":[]},
+    {"name":"equals","parameterTypes":["java.lang.Object"] }, {"name":"hashCode","parameterTypes":[] }, {"name":"toString","parameterTypes":[] }
+  ]
 },
 {
   "name":"java.lang.OutOfMemoryError"
@@ -446,7 +449,11 @@
 },
 {
   "name":"java.lang.String",
-  "fields":[{"name":"TYPE"}, {"name":"value"}]
+  "fields":[{"name":"TYPE"}, {"name":"CASE_INSENSITIVE_ORDER"}, {"name":"value"}],
+  "methods":[
+    {"name":"<init>","parameterTypes":["java.lang.String"]},
+    {"name":"format","parameterTypes":["java.lang.String", "java.lang.Object[]"]}
+  ]
 },
 {
   "name":"java.lang.StringBuilder"
diff --git a/engine/runner/src/main/resources/META-INF/native-image/org/enso/runner/serialization-config.json b/engine/runner/src/main/resources/META-INF/native-image/org/enso/runner/serialization-config.json
index b8f5b003a4eb..f3d7e06e3392 100644
--- a/engine/runner/src/main/resources/META-INF/native-image/org/enso/runner/serialization-config.json
+++ b/engine/runner/src/main/resources/META-INF/native-image/org/enso/runner/serialization-config.json
@@ -1,272 +1,5 @@
 {
   "types":[
-    {
-      "name":"java.lang.Integer"
-    },
-    {
-      "name":"java.lang.Number"
-    },
-    {
-      "name":"java.lang.String"
-    },
-    {
-      "name":"java.util.UUID"
-    },
-    {
-      "name":"org.enso.compiler.core.ir.DiagnosticStorage"
-    },
-    {
-      "name":"org.enso.compiler.core.ir.MetadataStorage"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$Cons"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$ExportedModule"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$ModuleMethod"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$ModuleReference$Abstract"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$PolyglotSymbol"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$Resolution"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$ResolvedConstructor"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$ResolvedImport"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$ResolvedMethod"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$ResolvedModule"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$ResolvedPolyglotSymbol"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$SymbolRestriction$AllowedResolution"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$SymbolRestriction$Hiding"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$SymbolRestriction$Intersect"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$SymbolRestriction$Only"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$SymbolRestriction$Union"
-    },
-    {
-      "name":"org.enso.compiler.data.BindingsMap$Type"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$Graph"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$Graph$Link"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$Graph$Occurrence$Def"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$Graph$Occurrence$Use"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$Graph$Scope"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$Info$Occurrence"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$Info$Scope$Child"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.AliasAnalysis$Info$Scope$Root"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.BindingAnalysis$"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.CachePreferenceAnalysis$"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.CachePreferenceAnalysis$WeightInfo"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.DataflowAnalysis$"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.DataflowAnalysis$DependencyInfo"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.DataflowAnalysis$DependencyInfo$Type$Dynamic"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.DataflowAnalysis$DependencyInfo$Type$Static"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.DataflowAnalysis$DependencyMapping"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.GatherDiagnostics$"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.GatherDiagnostics$DiagnosticsMeta"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.TailCall$"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.TailCall$TailPosition$NotTail$"
-    },
-    {
-      "name":"org.enso.compiler.pass.analyse.TailCall$TailPosition$Tail$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.DocumentationComments$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.DocumentationComments$Doc"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.ExpressionAnnotations$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.GlobalNames$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.IgnoredBindings$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.IgnoredBindings$State$Ignored$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.IgnoredBindings$State$NotIgnored$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.MethodCalls$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.MethodDefinitions$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.ModuleAnnotations$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.ModuleAnnotations$Annotations"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.Patterns$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.TypeSignatures$"
-    },
-    {
-      "name":"org.enso.compiler.pass.resolve.TypeSignatures$Signature"
-    },
-    {
-      "name":"org.enso.pkg.QualifiedName"
-    },
-    {
-      "name":"org.enso.syntax.text.Location"
-    },
-    {
-      "name":"scala.None$"
-    },
-    {
-      "name":"scala.Option"
-    },
-    {
-      "name":"scala.Some"
-    },
-    {
-      "name":"scala.Tuple2"
-    },
-    {
-      "name":"scala.collection.IterableFactory$ToFactory"
-    },
-    {
-      "name":"scala.collection.MapFactory$ToFactory"
-    },
-    {
-      "name":"scala.collection.generic.DefaultSerializationProxy"
-    },
-    {
-      "name":"scala.collection.generic.SerializeEnd$"
-    },
-    {
-      "name":"scala.collection.immutable.HashMap"
-    },
-    {
-      "name":"scala.collection.immutable.HashMap$"
-    },
-    {
-      "name":"scala.collection.immutable.HashSet"
-    },
-    {
-      "name":"scala.collection.immutable.HashSet$"
-    },
-    {
-      "name":"scala.collection.immutable.List"
-    },
-    {
-      "name":"scala.collection.immutable.List$"
-    },
-    {
-      "name":"scala.collection.immutable.Map"
-    },
-    {
-      "name":"scala.collection.immutable.Map$EmptyMap$"
-    },
-    {
-      "name":"scala.collection.immutable.Map$Map1"
-    },
-    {
-      "name":"scala.collection.immutable.Map$Map2"
-    },
-    {
-      "name":"scala.collection.immutable.Map$Map3"
-    },
-    {
-      "name":"scala.collection.immutable.Map$Map4"
-    },
-    {
-      "name":"scala.collection.immutable.Set$EmptySet$"
-    },
-    {
-      "name":"scala.collection.immutable.Set$Set1"
-    },
-    {
-      "name":"scala.collection.immutable.Set$Set2"
-    },
-    {
-      "name":"scala.collection.immutable.Set$Set3"
-    },
-    {
-      "name":"scala.collection.immutable.Set$Set4"
-    },
-    {
-      "name":"scala.collection.mutable.HashMap$DeserializationFactory"
-    },
-    {
-      "name":"scala.runtime.ModuleSerializationProxy"
-    }
   ],
   "lambdaCapturingTypes":[
   ],
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/Compiler.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/Compiler.scala
index 7bcb0fe5964c..95d96e71399d 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/Compiler.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/Compiler.scala
@@ -25,11 +25,7 @@ import org.enso.compiler.core.EnsoParser
 import org.enso.compiler.data.CompilerConfig
 import org.enso.compiler.pass.PassManager
 import org.enso.compiler.pass.analyse._
-import org.enso.compiler.phase.{
-  IdMapProcessor,
-  ImportResolver,
-  ImportResolverAlgorithm
-}
+import org.enso.compiler.phase.{ImportResolver, ImportResolverAlgorithm}
 import org.enso.editions.LibraryName
 import org.enso.pkg.QualifiedName
 import org.enso.common.CompilationStage
@@ -562,24 +558,11 @@ class Compiler(
     )
     context.updateModule(module, _.resetScope())
 
-    if (useCaches) {
-      if (context.deserializeModule(this, module)) {
-        val updatedIr =
-          IdMapProcessor.updateIr(
-            context.getIr(module),
-            context.getIdMap(module)
-          )
-        if (updatedIr != null) {
-          context.updateModule(
-            module,
-            u => {
-              u.ir(updatedIr)
-              u.compilationStage(CompilationStage.AFTER_STATIC_PASSES)
-            }
-          )
-        }
-        return
-      }
+    if (
+      useCaches && context.getIdMap(module) == null && context
+        .deserializeModule(this, module)
+    ) {
+      return
     }
 
     uncachedParseModule(module, isGenDocs)
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/context/LocalScope.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/context/LocalScope.scala
index 4054d26b5ead..bb6c7eb2ed6c 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/context/LocalScope.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/context/LocalScope.scala
@@ -107,7 +107,7 @@ class LocalScope(
     symbolsProvider: () => FrameVariableNames = null
   ): LocalScope = {
     val sp = if (flattenToParent) {
-      assert(symbolsProvider == null)
+      org.enso.common.Asserts.assertInJvm(symbolsProvider == null)
       this.symbolsProvider
     } else {
       symbolsProvider
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/data/BindingsMap.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/data/BindingsMap.scala
index f865dd8ece55..cea6cc861314 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/data/BindingsMap.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/data/BindingsMap.scala
@@ -15,6 +15,7 @@ import org.enso.compiler.pass.analyse.BindingAnalysis
 import org.enso.compiler.pass.resolve.MethodDefinitions
 import org.enso.persist.Persistance.Reference
 import org.enso.pkg.QualifiedName
+import org.enso.editions.LibraryName
 
 import java.io.ObjectOutputStream
 import scala.annotation.unused
@@ -26,8 +27,8 @@ import scala.collection.mutable.ArrayBuffer
   * @param currentModule the module holding these bindings
   */
 case class BindingsMap(
-  definedEntities: List[DefinedEntity],
-  currentModule: ModuleReference
+  private val _definedEntities: List[DefinedEntity],
+  private var _currentModule: ModuleReference
 ) extends IRPass.IRMetadata {
   import BindingsMap._
 
@@ -37,11 +38,38 @@ case class BindingsMap(
 
   /** Other modules, imported by [[currentModule]].
     */
-  var resolvedImports: List[ResolvedImport] = List()
+  private var _resolvedImports: List[ResolvedImport] = List()
+
+  def definedEntities: List[DefinedEntity] = {
+    ensureConvertedToConcrete()
+    _definedEntities
+  }
+  def currentModule: ModuleReference = {
+    ensureConvertedToConcrete()
+    _currentModule
+  }
+  def resolvedImports: List[ResolvedImport] = {
+    ensureConvertedToConcrete()
+    _resolvedImports
+  }
+  def resolvedImports_=(v: List[ResolvedImport]): Unit = {
+    _resolvedImports = v
+  }
+
+  /** Set to non-null after deserialization to signal that conversion to concrete values is needed */
+  private var pendingRepository: PackageRepository = null
 
   /** Symbols exported by [[currentModule]].
     */
-  var exportedSymbols: Map[String, List[ResolvedName]] = Map()
+  private var _exportedSymbols: Map[String, List[ResolvedName]] = Map()
+
+  def exportedSymbols: Map[String, List[ResolvedName]] = {
+    ensureConvertedToConcrete()
+    _exportedSymbols
+  }
+  def exportedSymbols_=(v: Map[String, List[ResolvedName]]): Unit = {
+    _exportedSymbols = v
+  }
 
   /** @inheritdoc */
   override def prepareForSerialization(
@@ -54,8 +82,8 @@ case class BindingsMap(
   override def restoreFromSerialization(
     compiler: Compiler
   ): Option[BindingsMap] = {
-    val packageRepository = compiler.getPackageRepository
-    this.toConcrete(packageRepository.getModuleMap)
+    this.pendingRepository = compiler.getPackageRepository
+    Some(this)
   }
 
   /** Convert this [[BindingsMap]] instance to use abstract module references.
@@ -63,9 +91,9 @@ case class BindingsMap(
     * @return `this` with module references converted to abstract
     */
   def toAbstract: BindingsMap = {
-    val copy = this.copy(currentModule = currentModule.toAbstract)
-    copy.resolvedImports = this.resolvedImports.map(_.toAbstract)
-    copy.exportedSymbols = this.exportedSymbols.map { case (key, value) =>
+    val copy = this.copy(_currentModule = _currentModule.toAbstract)
+    copy._resolvedImports = this._resolvedImports.map(_.toAbstract)
+    copy._exportedSymbols = this._exportedSymbols.map { case (key, value) =>
       key -> value.map(name => name.toAbstract)
     }
     copy
@@ -77,23 +105,51 @@ case class BindingsMap(
     *                  instances
     * @return `this` with module references converted to concrete
     */
-  def toConcrete(moduleMap: ModuleMap): Option[BindingsMap] = {
-    val newMap = this.currentModule.toConcrete(moduleMap).map { module =>
-      this.copy(currentModule = module)
+  private def ensureConvertedToConcrete(): Option[BindingsMap] = {
+    val r = pendingRepository
+    if (r != null) {
+      toConcrete(r, r.getModuleMap).map { b =>
+        pendingRepository     = null
+        this._currentModule   = b._currentModule
+        this._exportedSymbols = b._exportedSymbols
+        this._resolvedImports = b._resolvedImports
+        this
+      }
+    } else {
+      Some(this)
     }
+  }
+
+  private def toConcrete(
+    r: PackageRepository,
+    moduleMap: ModuleMap
+  ): Option[BindingsMap] = {
+    val newMap = this._currentModule
+      .toConcrete(moduleMap)
+      .map { module =>
+        this._currentModule = module
+        this
+      }
 
     val withImports: Option[BindingsMap] = newMap.flatMap { bindings =>
-      val newImports = this.resolvedImports.map(_.toConcrete(moduleMap))
+      val newImports = this._resolvedImports.map { imp =>
+        imp.targets.foreach { t =>
+          LibraryName
+            .fromModuleName(t.qualifiedName.toString())
+            .foreach(r.ensurePackageIsLoaded(_));
+        }
+        imp.toConcrete(moduleMap)
+      }
       if (newImports.exists(_.isEmpty)) {
         None
       } else {
-        bindings.resolvedImports = newImports.map(_.get)
+        bindings._resolvedImports = newImports.map(_.get)
         Some(bindings)
       }
     }
 
     val withSymbols: Option[BindingsMap] = withImports.flatMap { bindings =>
-      val newSymbols = this.exportedSymbols.map { case (key, value) =>
+      val newSymbols = this._exportedSymbols.map { case (key, value) =>
         val newValue = value.map(_.toConcrete(moduleMap))
         if (newValue.exists(_.isEmpty)) {
           key -> None
@@ -105,7 +161,7 @@ case class BindingsMap(
       if (newSymbols.exists { case (_, v) => v.isEmpty }) {
         None
       } else {
-        bindings.exportedSymbols = newSymbols.map { case (k, v) =>
+        bindings._exportedSymbols = newSymbols.map { case (k, v) =>
           k -> v.get
         }
         Some(bindings)
@@ -372,12 +428,12 @@ object BindingsMap {
     exportedAs: Option[String],
     symbols: List[String]
   ) {
-    assert(
+    org.enso.common.Asserts.assertInJvm(
       symbols.forall(!_.contains(".")),
       "Not expected fully qualified names as symbols"
     )
     if (exportedAs.isDefined) {
-      assert(
+      org.enso.common.Asserts.assertInJvm(
         !exportedAs.get.contains("."),
         "Not expected fully qualified name as `exportedAs`"
       )
@@ -436,8 +492,8 @@ object BindingsMap {
     exports: List[ir.module.scope.Export.Module],
     targets: List[ImportTarget]
   ) {
-    assert(targets.nonEmpty)
-    assert(
+    org.enso.common.Asserts.assertInJvm(targets.nonEmpty)
+    org.enso.common.Asserts.assertInJvm(
       areTargetsConsistent(),
       "All targets must be either static methods or conversion methods"
     )
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/AutomaticParallelism.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/AutomaticParallelism.scala
index 5d714e0d1e00..997ceaa75635 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/AutomaticParallelism.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/AutomaticParallelism.scala
@@ -13,7 +13,7 @@ import org.enso.compiler.core.ir.{
 }
 import org.enso.compiler.core.ir.module.scope.definition
 import org.enso.compiler.data.BindingsMap.{Resolution, ResolvedModuleMethod}
-import org.enso.compiler.core.CompilerError
+import org.enso.compiler.core.{CompilerError, IR}
 import org.enso.compiler.core.ir.expression.{Application, Operator}
 import org.enso.compiler.pass.IRPass
 import org.enso.compiler.pass.analyse.alias.graph.Graph
@@ -25,6 +25,8 @@ import org.enso.compiler.pass.resolve.{
   TypeSignatures
 }
 
+import java.util.function.Consumer
+
 import scala.annotation.{tailrec, unused}
 
 /** This pass is responsible for discovering occurrences of automatically
@@ -229,18 +231,23 @@ object AutomaticParallelism extends IRPass {
       line.assignment.map { _ -> line.id }
     }: _*)
     val linesWithDeps = segment.parallelizable.map { line =>
-      val deps = line.ir.preorder
-        .collect { case n: Name.Literal =>
-          n
-        }
-        .flatMap(_.getMetadata(AliasAnalysis))
-        .collect { case occ: alias.AliasMetadata.Occurrence =>
-          occ
-        }
-        .flatMap(occ => occ.graph.defLinkFor(occ.id))
-        .flatMap(link => depMap.get(link.target))
-        .filter(_ != line.id)
-      line.copy(dependencies = Set(deps: _*))
+      val builder = Set.newBuilder[Int]
+      IR.preorder(
+        line.ir,
+        {
+          case n: Name.Literal =>
+            for {
+              occ @ alias.AliasMetadata.Occurrence(_, _) <-
+                n.getMetadata(AliasAnalysis)
+              link <- occ.graph.defLinkFor(occ.id)
+              id   <- depMap.get(link.target)
+              if id != line.id
+            } builder.addOne(id)
+          case _ =>
+        }: Consumer[IR]
+      )
+
+      line.copy(dependencies = builder.result())
     }
     segment.copy(parallelizable = linesWithDeps)
   }
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/FramePointerAnalysis.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/FramePointerAnalysis.scala
index 5d477d4efaaa..a524f70ebff6 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/FramePointerAnalysis.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/FramePointerAnalysis.scala
@@ -336,11 +336,11 @@ case object FramePointerAnalysis extends IRPass {
     scope: Graph.Scope,
     defOcc: GraphOccurrence.Def
   ): Int = {
-    assert(
+    org.enso.common.Asserts.assertInJvm(
       graph.scopeFor(defOcc.id).contains(scope),
       "Def occurrence must be in the given scope"
     )
-    assert(
+    org.enso.common.Asserts.assertInJvm(
       scope.allDefinitions.contains(defOcc),
       "The given scope must contain the given Def occurrence"
     )
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/GatherDiagnostics.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/GatherDiagnostics.scala
index dcd9effdd42d..f11f6dc8443f 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/GatherDiagnostics.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/GatherDiagnostics.scala
@@ -14,6 +14,10 @@ import org.enso.compiler.core.ir.MetadataStorage._
 import org.enso.compiler.pass.IRPass
 import org.enso.compiler.pass.resolve.{GenericAnnotations, TypeSignatures}
 
+import java.util.function.Consumer
+
+import scala.collection.mutable
+
 /** A pass that traverses the given root IR and accumulates all the encountered
   * diagnostic nodes in the root.
   *
@@ -62,42 +66,53 @@ case object GatherDiagnostics extends IRPass {
     * @return `ir`, with all diagnostics from its subtree associated with it
     */
   private def gatherMetadata(ir: IR): DiagnosticsMeta = {
-    val diagnostics = ir.preorder.flatMap {
-      case err: Diagnostic =>
-        List(err)
-      case arg: DefinitionArgument =>
-        val typeSignatureDiagnostics =
+    val builder = List.newBuilder[Diagnostic]
+    IR.preorder(
+      ir,
+      {
+        case err: Diagnostic =>
+          builder.addOne(err)
+        case arg: DefinitionArgument =>
           arg
             .getMetadata(TypeSignatures)
-            .map(_.signature.preorder.collect(collectDiagnostics))
-            .getOrElse(Nil)
-        typeSignatureDiagnostics ++ diagnosticsList(arg)
-      case x: definition.Method =>
-        val typeSignatureDiagnostics =
+            .foreach(meta =>
+              IR.preorder(meta.signature, collectDiagnostics(builder))
+            )
+          diagnosticsList(arg).foreach(builder.addOne)
+        case x: definition.Method =>
           x.getMetadata(TypeSignatures)
-            .map(_.signature.preorder.collect(collectDiagnostics))
-            .getOrElse(Nil)
-        val annotationsDiagnostics =
+            .foreach(meta =>
+              IR.preorder(meta.signature, collectDiagnostics(builder))
+            )
           x.getMetadata(GenericAnnotations)
-            .map(_.annotations.flatMap(_.preorder.collect(collectDiagnostics)))
-            .getOrElse(Nil)
-        typeSignatureDiagnostics ++ annotationsDiagnostics ++ diagnosticsList(x)
-      case x: Expression =>
-        val typeSignatureDiagnostics =
+            .foreach(
+              _.annotations.foreach(annotations =>
+                IR.preorder(annotations, collectDiagnostics(builder))
+              )
+            )
+          diagnosticsList(x).foreach(builder.addOne)
+        case x: Expression =>
           x.getMetadata(TypeSignatures)
-            .map(_.signature.preorder.collect(collectDiagnostics))
-            .getOrElse(Nil)
-        typeSignatureDiagnostics ++ diagnosticsList(x)
-      case x =>
-        diagnosticsList(x)
-    }
+            .foreach(meta =>
+              IR.preorder(meta.signature, collectDiagnostics(builder))
+            )
+          diagnosticsList(x).foreach(builder.addOne)
+        case x =>
+          diagnosticsList(x).foreach(builder.addOne)
+      }: Consumer[IR]
+    )
+
     DiagnosticsMeta(
-      diagnostics.distinctBy(d => new DiagnosticKeys(d))
+      builder.result().distinctBy(d => new DiagnosticKeys(d))
     )
   }
 
-  private val collectDiagnostics: PartialFunction[IR, Diagnostic] = {
-    case err: Diagnostic => err
+  private def collectDiagnostics(
+    builder: mutable.Builder[Diagnostic, List[Diagnostic]]
+  ): Consumer[IR] = {
+    case err: Diagnostic =>
+      builder.addOne(err)
+    case _ =>
   }
 
   private def diagnosticsList(ir: IR): List[Diagnostic] =
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/alias/graph/Graph.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/alias/graph/Graph.scala
index edf167ef724f..21abf4d890ca 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/alias/graph/Graph.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/analyse/alias/graph/Graph.scala
@@ -55,7 +55,7 @@ sealed class Graph(
     * @param sym the symbol occurrence
     */
   def addGlobalSymbol(sym: GraphOccurrence.Global): Unit = {
-    assert(!frozen)
+    org.enso.common.Asserts.assertInJvm(!frozen)
     if (!globalSymbols.contains(sym.symbol)) {
       globalSymbols = globalSymbols + (sym.symbol -> sym)
     }
@@ -116,7 +116,8 @@ sealed class Graph(
   }
 
   private def addSourceTargetLink(link: Graph.Link): Unit = {
-    assert(!frozen)
+    // commented out: used from DebugEvalNode
+    // org.enso.common.Asserts.assertInJvm(!frozen)
     sourceLinks = sourceLinks.updatedWith(link.source)(v =>
       v.map(s => s + link).orElse(Some(Set(link)))
     )
@@ -382,7 +383,7 @@ object Graph {
       * @return this scope with parent scope set
       */
     def withParent(parentScope: Scope): this.type = {
-      assert(parent.isEmpty)
+      org.enso.common.Asserts.assertInJvm(parent.isEmpty)
       this.parent = Some(parentScope)
       this
     }
@@ -697,7 +698,7 @@ object Graph {
     /** Disassociates this Scope from its parent.
       */
     def removeScopeFromParent(): Unit = {
-      assert(this.parent.nonEmpty)
+      org.enso.common.Asserts.assertInJvm(this.parent.nonEmpty)
       this.parent.foreach(_.removeScopeFromParent(this))
     }
   }
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/desugar/FunctionBinding.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/desugar/FunctionBinding.scala
index b17fb09632f1..1b5efd6a0aa1 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/desugar/FunctionBinding.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/desugar/FunctionBinding.scala
@@ -180,7 +180,8 @@ case object FunctionBinding extends IRPass {
               errors.Conversion.MissingSourceType(args.head.name.name)
             )
           } else {
-            assert(!isPrivate, "Should be handled by previous match")
+            org.enso.common.Asserts
+              .assertInJvm(!isPrivate, "Should be handled by previous match")
             val firstArg :: restArgs = args
             val firstArgumentType    = firstArg.ascribedType.get
             val firstArgumentName    = firstArg.name
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/desugar/LambdaShorthandToLambda.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/desugar/LambdaShorthandToLambda.scala
index 49f92cfd8575..ea6946736dd0 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/desugar/LambdaShorthandToLambda.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/desugar/LambdaShorthandToLambda.scala
@@ -8,8 +8,7 @@ import org.enso.compiler.core.ir.{
   Function,
   IdentifiedLocation,
   Module,
-  Name,
-  Type
+  Name
 }
 import org.enso.compiler.core.CompilerError
 import org.enso.compiler.core.ir.expression.{Application, Case, Operator}
@@ -71,19 +70,17 @@ case object LambdaShorthandToLambda extends IRPass {
     ir: Module,
     moduleContext: ModuleContext
   ): Module = {
-    val new_bindings = ir.bindings.map {
-      case asc: Type.Ascription => asc
-      case a =>
-        a.mapExpressions(
-          runExpression(
-            _,
-            InlineContext(
-              moduleContext,
-              freshNameSupply = moduleContext.freshNameSupply,
-              compilerConfig  = moduleContext.compilerConfig
-            )
+    val new_bindings = ir.bindings.map { case a =>
+      a.mapExpressions(
+        runExpression(
+          _,
+          InlineContext(
+            moduleContext,
+            freshNameSupply = moduleContext.freshNameSupply,
+            compilerConfig  = moduleContext.compilerConfig
           )
         )
+      )
     }
     ir.copy(bindings = new_bindings)
   }
@@ -123,10 +120,9 @@ case object LambdaShorthandToLambda extends IRPass {
     freshNameSupply: FreshNameSupply
   ): Expression = {
     ir.transformExpressions {
-      case asc: Type.Ascription => asc
-      case app: Application     => desugarApplication(app, freshNameSupply)
-      case caseExpr: Case.Expr  => desugarCaseExpr(caseExpr, freshNameSupply)
-      case name: Name           => desugarName(name, freshNameSupply)
+      case app: Application    => desugarApplication(app, freshNameSupply)
+      case caseExpr: Case.Expr => desugarCaseExpr(caseExpr, freshNameSupply)
+      case name: Name          => desugarName(name, freshNameSupply)
     }
   }
 
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/GlobalNames.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/GlobalNames.scala
index 05536d3b07be..aa465baf6453 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/GlobalNames.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/GlobalNames.scala
@@ -19,6 +19,7 @@ import org.enso.compiler.data.BindingsMap
 import org.enso.compiler.data.BindingsMap.{
   Resolution,
   ResolutionNotFound,
+  ResolvedExtensionMethod,
   ResolvedModule,
   ResolvedModuleMethod
 }
@@ -237,11 +238,27 @@ case object GlobalNames extends IRPass {
                       app
                     }
                   case Right(values) =>
-                    values.foldLeft(lit)((lit, value) =>
-                      lit.updateMetadata(
-                        new MetadataPair(this, BindingsMap.Resolution(value))
+                    val containsErrors = values.exists {
+                      case ResolvedExtensionMethod(modRef, _)
+                          if bindings.currentModule.getName == modRef.getName =>
+                        // The resolved method is a static method in the current module,
+                        // but it is called without the type name, so it is an unresolved
+                        // symbol.
+                        true
+                      case _ => false
+                    }
+                    if (containsErrors) {
+                      errors.Resolution(
+                        lit,
+                        errors.Resolution.ResolverError(ResolutionNotFound)
                       )
-                    )
+                    } else {
+                      values.foldLeft(lit)((lit, value) =>
+                        lit.updateMetadata(
+                          new MetadataPair(this, BindingsMap.Resolution(value))
+                        )
+                      )
+                    }
                 }
 
               } else {
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/MethodDefinitions.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/MethodDefinitions.scala
index 03072c3e1dec..4bb76a610202 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/MethodDefinitions.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/MethodDefinitions.scala
@@ -103,7 +103,8 @@ case object MethodDefinitions extends IRPass {
         ) match {
           case Some(Resolution(ResolvedType(_, tp)))
               if canGenerateStaticWrappers(tp) =>
-            assert(method.body.isInstanceOf[Function.Lambda])
+            org.enso.common.Asserts
+              .assertInJvm(method.body.isInstanceOf[Function.Lambda])
             val dup = method.duplicate()
             // This is the self argument that will receive the `SelfType.type` value upon dispatch, it is added to avoid modifying the dispatch mechanism.
             val syntheticModuleSelfArg = DefinitionArgument.Specified(
@@ -197,7 +198,10 @@ case object MethodDefinitions extends IRPass {
               errors.Resolution.ResolverError(err)
             )
           case Right(resolvedItems) =>
-            assert(resolvedItems.size == 1, "Expected a single resolution")
+            org.enso.common.Asserts.assertInJvm(
+              resolvedItems.size == 1,
+              "Expected a single resolution"
+            )
             resolvedItems.head match {
               case _: BindingsMap.ResolvedConstructor =>
                 errors.Resolution(
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/Patterns.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/Patterns.scala
index 36033c97358f..e2914b67881a 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/Patterns.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/Patterns.scala
@@ -88,7 +88,8 @@ object Patterns extends IRPass {
     bindingsMap.resolveQualifiedName(parts) match {
       case Left(err) => Left(err)
       case Right(resolvedNames) =>
-        assert(resolvedNames.size == 1, "Expected a single resolution")
+        org.enso.common.Asserts
+          .assertInJvm(resolvedNames.size == 1, "Expected a single resolution")
         Right(resolvedNames.head)
     }
   }
@@ -104,7 +105,8 @@ object Patterns extends IRPass {
     bindingsMap.resolveQualifiedNameIn(scope, submoduleNames, finalItem) match {
       case Left(err) => Left(err)
       case Right(resolvedNames) =>
-        assert(resolvedNames.size == 1, "Expected a single resolution")
+        org.enso.common.Asserts
+          .assertInJvm(resolvedNames.size == 1, "Expected a single resolution")
         Right(resolvedNames.head)
     }
   }
@@ -118,7 +120,8 @@ object Patterns extends IRPass {
     bindingsMap.resolveName(name) match {
       case Left(err) => Left(err)
       case Right(resolvedNames) =>
-        assert(resolvedNames.size == 1, "Expected a single resolution")
+        org.enso.common.Asserts
+          .assertInJvm(resolvedNames.size == 1, "Expected a single resolution")
         Right(resolvedNames.head)
     }
   }
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/TypeSignatures.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/TypeSignatures.scala
index bfdf4b7089e2..10f52ce9d5d1 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/TypeSignatures.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/pass/resolve/TypeSignatures.scala
@@ -14,11 +14,13 @@ import org.enso.compiler.core.ir.{
 }
 import org.enso.compiler.core.ir.MetadataStorage._
 import org.enso.compiler.core.ir.expression.{errors, Comment, Error}
-import org.enso.compiler.core.CompilerError
+import org.enso.compiler.core.{CompilerError, IR}
 import org.enso.compiler.pass.IRPass
 import org.enso.compiler.pass.analyse._
 import org.enso.compiler.pass.lint.UnusedBindings
 
+import java.util.function.Consumer
+
 /** This pass is responsible for resolving type signatures and associating
   * them as metadata with the typed object.
   *
@@ -92,10 +94,14 @@ case object TypeSignatures extends IRPass {
         res
       case meth: definition.Method =>
         val newMethod = meth.mapExpressions(resolveExpression)
-        newMethod.body.preorder.foreach {
-          case fn: Function => verifyAscribedArguments(fn.arguments)
-          case _            =>
-        }
+        IR.preorder(
+          newMethod.body,
+          {
+            case fn: Function => verifyAscribedArguments(fn.arguments)
+            case _            =>
+          }: Consumer[IR]
+        )
+
         val res = lastSignature match {
           case Some(asc @ Type.Ascription(typed, sig, comment, _, _)) =>
             val methodRef = meth.methodReference
@@ -330,7 +336,7 @@ case object TypeSignatures extends IRPass {
 
     /** @inheritdoc */
     override def prepareForSerialization(compiler: Compiler): Signature = {
-      signature.preorder.foreach(_.passData.prepareForSerialization(compiler))
+      IR.preorder(signature, _.passData.prepareForSerialization(compiler))
       this
     }
 
@@ -338,11 +344,14 @@ case object TypeSignatures extends IRPass {
     override def restoreFromSerialization(
       compiler: Compiler
     ): Option[Signature] = {
-      signature.preorder.foreach { node =>
-        if (!node.passData.restoreFromSerialization(compiler)) {
-          return None
+      IR.preorder(
+        signature,
+        { node =>
+          if (!node.passData.restoreFromSerialization(compiler)) {
+            return None
+          }
         }
-      }
+      )
       Some(this)
     }
 
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/ImportResolver.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/ImportResolver.scala
index 576954148ea9..dde1e905a308 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/ImportResolver.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/ImportResolver.scala
@@ -11,6 +11,7 @@ import org.enso.common.CompilationStage
 
 import scala.collection.mutable
 import java.io.IOException
+import java.util.logging.Level
 
 /** Runs imports resolution. Starts from a given module and then recursively
   * collects all modules that are reachable from it.
@@ -46,7 +47,12 @@ final class ImportResolver(compiler: Compiler) extends ImportResolverForIR {
           )
           (ir, currentLocal)
         } catch {
-          case _: IOException =>
+          case ex: IOException =>
+            context.logSerializationManager(
+              Level.WARNING,
+              "Deserialization of " + module.getName() + " failed",
+              ex
+            )
             context.updateModule(
               current,
               u => {
@@ -85,6 +91,7 @@ final class ImportResolver(compiler: Compiler) extends ImportResolverForIR {
 
         currentLocal.resolvedImports =
           resolvedImports ++ resolvedSyntheticImports
+
         val newIr = ir.copy(imports = newImportIRs)
         context.updateModule(
           current,
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/exports/ExportsResolution.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/exports/ExportsResolution.scala
index 6b28d135766d..5bdad4c8a8bf 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/exports/ExportsResolution.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/exports/ExportsResolution.scala
@@ -166,7 +166,7 @@ class ExportsResolution(private val context: CompilerContext) {
           .flatten
           .distinct
 
-      bindings.exportedSymbols = List(
+      val newSymbols = List(
         ownEntities,
         expSymbolsFromResolvedImps
       ).flatten.distinct
@@ -179,6 +179,7 @@ class ExportsResolution(private val context: CompilerContext) {
           }
           (symbolName, resolvedNames)
         }
+      bindings.exportedSymbols = newSymbols
     }
   }
 
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/refactoring/IRUtils.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/refactoring/IRUtils.scala
index f0468342a75a..fdb69606d443 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/refactoring/IRUtils.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/refactoring/IRUtils.scala
@@ -19,7 +19,15 @@ trait IRUtils {
     * @return the first node with the given external id in `ir`
     */
   def findByExternalId(ir: IR, externalId: UUID @ExternalID): Option[IR] = {
-    ir.preorder.find(_.getExternalId.contains(externalId))
+    IR.preorder(
+      ir,
+      { ir =>
+        if (ir.getExternalId.contains(externalId)) {
+          return Some(ir)
+        }
+      }
+    )
+    None
   }
 
   /** Find usages of a local defined in the body block.
@@ -133,7 +141,15 @@ trait IRUtils {
     * @return the `ir` node with the given identifier
     */
   private def findById(ir: IR, id: UUID @Identifier): Option[IR] = {
-    ir.preorder.find(_.getId == id)
+    IR.preorder(
+      ir,
+      { ir =>
+        if (ir.getId == id) {
+          return Some(ir)
+        }
+      }
+    )
+    None
   }
 }
 
diff --git a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/ChangesetBuilder.scala b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/ChangesetBuilder.scala
index f98b7a0a14aa..7ad527e5dafc 100644
--- a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/ChangesetBuilder.scala
+++ b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/ChangesetBuilder.scala
@@ -80,9 +80,15 @@ final class ChangesetBuilder[A: TextEditor: IndexedSource](
       .filter(_._2.size == 1)
       .flatMap { case (pending, directlyAffected) =>
         val directlyAffectedId = directlyAffected.head.externalId
-        val literals =
-          ir.preorder.filter(_.getExternalId == directlyAffectedId)
-        val oldIr = literals.head
+        var oldIr: IR          = null
+        IR.preorder(
+          ir,
+          { ir =>
+            if (oldIr == null && ir.getExternalId == directlyAffectedId) {
+              oldIr = ir
+            }
+          }
+        )
 
         def newIR(edit: PendingEdit): Option[Literal] = {
           val value = edit match {
@@ -514,12 +520,25 @@ object ChangesetBuilder {
     * @param id the node identifier
     * @return the node name
     */
-  private def getExpressionName(ir: IR, id: UUID @Identifier): Option[String] =
-    ir.preorder.find(_.getId == id).collect {
-      case name: Name =>
-        name.name
-      case method: definition.Method =>
-        method.methodName.name
-    }
+  private def getExpressionName(
+    ir: IR,
+    id: UUID @Identifier
+  ): Option[String] = {
+    IR.preorder(
+      ir,
+      { ir =>
+        if (ir.getId == id)
+          ir match {
+            case name: Name =>
+              return Some(name.name)
+            case method: definition.Method =>
+              return Some(method.methodName.name)
+            case _ =>
+              return None
+          }
+      }
+    )
+    None
+  }
 
 }
diff --git a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/execution/LocationResolver.scala b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/execution/LocationResolver.scala
index 5d3ac17fda06..9f8455fb6496 100644
--- a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/execution/LocationResolver.scala
+++ b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/execution/LocationResolver.scala
@@ -66,9 +66,7 @@ object LocationResolver {
     ir: IR,
     location: IdentifiedLocation
   ): Option[ExpressionId] =
-    ir.preorder
-      .find(_.location.contains(location))
-      .flatMap(getExpressionId)
+    findByIdentifiedLocation(ir, location).flatMap(getExpressionId)
 
   /** Resolve expression id of the given source location.
     *
@@ -90,14 +88,44 @@ object LocationResolver {
   def getExpressionId(ir: IR): Option[ExpressionId] =
     ir.getExternalId.map(ExpressionId(ir.getId, _))
 
+  /** Find the expression by its identified location.
+    *
+    * @param ir the `IR` to get the expression from
+    * @param location the expression location
+    * @return the expression with the given location
+    */
+  private def findByIdentifiedLocation(
+    ir: IR,
+    location: IdentifiedLocation
+  ): Option[IR] = {
+    IR.preorder(
+      ir,
+      { ir =>
+        if (ir.location.contains(location)) {
+          return Some(ir)
+        }
+      }
+    )
+    None
+  }
+
   /** Find the expression by its location.
     *
     * @param ir the `IR` to get the expression from
     * @param location the expression location
     * @return the expression with the given location
     */
-  def findByLocation(ir: IR, location: Location): Option[IR] =
-    ir.preorder.find(_.location.map(_.location).contains(location))
+  private def findByLocation(ir: IR, location: Location): Option[IR] = {
+    IR.preorder(
+      ir,
+      { ir =>
+        if (ir.location.map(_.location).contains(location)) {
+          return Some(ir)
+        }
+      }
+    )
+    None
+  }
 
   /** Convert truffle source section to the range of text.
     *
@@ -116,7 +144,7 @@ object LocationResolver {
     * @param source the source text
     * @return location of the source section within the source
     */
-  def sectionToLocation[A: IndexedSource](
+  private def sectionToLocation[A: IndexedSource](
     section: SourceSection,
     source: A
   ): Location = {
diff --git a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/EnsureCompiledJob.scala b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/EnsureCompiledJob.scala
index e8a19d44a145..acf166a6ceb6 100644
--- a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/EnsureCompiledJob.scala
+++ b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/EnsureCompiledJob.scala
@@ -37,6 +37,7 @@ import org.enso.text.editing.model.IdMap
 import java.io.File
 import java.util
 import java.util.UUID
+import java.util.function.Consumer
 import java.util.logging.Level
 import scala.jdk.OptionConverters._
 
@@ -389,7 +390,7 @@ class EnsureCompiledJob(
       CacheInvalidation.Command.InvalidateKeys(
         changeset.invalidated ++ resolutionErrors
       )
-    val moduleIds = ir.preorder().flatMap(_.location()).flatMap(_.id()).toSet
+    val moduleIds = getModuleIds(ir)
     val invalidateStaleCommand =
       CacheInvalidation.Command.InvalidateStale(moduleIds)
     Seq(
@@ -406,6 +407,13 @@ class EnsureCompiledJob(
     )
   }
 
+  private def getModuleIds(ir: IR): Set[UUID @ExternalID] = {
+    val builder = Set.newBuilder[UUID @ExternalID]
+    IR.preorder(ir, _.getExternalId.foreach(builder.addOne))
+
+    builder.result()
+  }
+
   /** Looks for the nodes with the resolution error and their dependents.
     *
     * @param ir the module IR
@@ -418,25 +426,26 @@ class EnsureCompiledJob(
         "Empty dataflow analysis metadata during the interactive compilation."
       )
 
-    val resolutionNotFoundKeys =
-      ir.preorder()
-        .collect {
-          case err @ expression.errors.Resolution(
-                _,
-                expression.errors.Resolution
-                  .ResolverError(BindingsMap.ResolutionNotFound),
-                _
-              ) =>
-            DataflowAnalysis.DependencyInfo.Type.Static(
-              err.getId(),
-              err.getExternalId
-            )
-        }
-        .toSet
-
-    resolutionNotFoundKeys.flatMap(
-      metadata.dependents.getExternal(_).getOrElse(Set())
+    val builder = Set.newBuilder[UUID @ExternalID]
+    IR.preorder(
+      ir,
+      {
+        case err @ expression.errors.Resolution(
+              _,
+              expression.errors.Resolution
+                .ResolverError(BindingsMap.ResolutionNotFound),
+              _
+            ) =>
+          val key = DataflowAnalysis.DependencyInfo.Type.Static(
+            err.getId(),
+            err.getExternalId
+          )
+          metadata.dependents.getExternal(key).foreach(builder.addAll)
+        case _ =>
+      }: Consumer[IR]
     )
+
+    builder.result()
   }
 
   /** Run the invalidation commands.
diff --git a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/ExecuteJob.scala b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/ExecuteJob.scala
index d202b761547f..88db0df63c85 100644
--- a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/ExecuteJob.scala
+++ b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/ExecuteJob.scala
@@ -6,6 +6,8 @@ import org.enso.interpreter.instrument.execution.{Executable, RuntimeContext}
 import org.enso.interpreter.runtime.state.ExecutionEnvironment
 import org.enso.polyglot.runtime.Runtime.Api
 
+import java.util.logging.Level
+
 /** A job responsible for executing a call stack for the provided context.
   *
   * @param contextId an identifier of a context to execute
@@ -31,11 +33,25 @@ class ExecuteJob(
       runImpl
     } catch {
       case t: Throwable =>
+        ctx.executionService.getLogger.log(Level.SEVERE, "Failed to execute", t)
+        val errorMsg = if (t.getMessage == null) {
+          if (t.getCause == null) {
+            t.getClass.getSimpleName
+          } else {
+            val cause = t.getCause
+            if (cause.getMessage == null) {
+              cause.getClass.getSimpleName
+            } else {
+              cause.getMessage
+            }
+          }
+        } else t.getMessage
+
         ctx.endpoint.sendToClient(
           Api.Response(
             Api.ExecutionFailed(
               contextId,
-              Api.ExecutionResult.Failure(t.getMessage, None)
+              Api.ExecutionResult.Failure(errorMsg, None)
             )
           )
         )
diff --git a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/ProgramExecutionSupport.scala b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/ProgramExecutionSupport.scala
index 779b6d80024d..a655ee55f143 100644
--- a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/ProgramExecutionSupport.scala
+++ b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/ProgramExecutionSupport.scala
@@ -728,15 +728,23 @@ object ProgramExecutionSupport {
     * @param value the expression value.
     * @return the method call info
     */
-  private def toMethodCall(value: ExpressionValue): Option[Api.MethodCall] =
+  private def toMethodCall(value: ExpressionValue): Option[Api.MethodCall] = {
+    // While hiding the cached method pointer info for evaluated values, it is a
+    // good idea to return the cached method pointer value for dataflow errors
+    // (the one before the value turned into a dataflow error) to continue
+    // displaying widgets on child nodes even after those nodes become errors.
+    def notCachedAndNotDataflowError: Boolean =
+      !value.wasCached() && !value.getValue.isInstanceOf[DataflowError]
     for {
       call <-
-        if (Types.isPanic(value.getType)) Option(value.getCallInfo)
+        if (Types.isPanic(value.getType) || notCachedAndNotDataflowError)
+          Option(value.getCallInfo)
         else Option(value.getCallInfo).orElse(Option(value.getCachedCallInfo))
       methodPointer <- toMethodPointer(call.functionPointer)
     } yield {
       Api.MethodCall(methodPointer, call.notAppliedArguments.toVector)
     }
+  }
 
   /** Extract the method pointer information form the provided runtime function
     * pointer.
diff --git a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/UpsertVisualizationJob.scala b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/UpsertVisualizationJob.scala
index 07c844120ae6..b2cc275682e3 100644
--- a/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/UpsertVisualizationJob.scala
+++ b/engine/runtime-instrument-common/src/main/scala/org/enso/interpreter/instrument/job/UpsertVisualizationJob.scala
@@ -8,6 +8,7 @@ import org.enso.compiler.pass.analyse.{
   CachePreferenceAnalysis,
   DataflowAnalysis
 }
+import org.enso.compiler.refactoring.IRUtils
 import org.enso.interpreter.instrument.execution.{Executable, RuntimeContext}
 import org.enso.interpreter.instrument.job.UpsertVisualizationJob.{
   EvaluationFailed,
@@ -628,8 +629,8 @@ object UpsertVisualizationJob {
           .getMetadata(DataflowAnalysis)
           .foreach { metadata =>
             val externalId = expressionId
-            module.getIr.preorder
-              .find(_.getExternalId.contains(externalId))
+            IRUtils
+              .findByExternalId(module.getIr, externalId)
               .map { ir =>
                 DataflowAnalysis.DependencyInfo.Type
                   .Static(ir.getId, ir.getExternalId)
diff --git a/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/ExecCompilerTest.java b/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/ExecCompilerTest.java
index a0c18e195433..f3c52c146d9c 100644
--- a/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/ExecCompilerTest.java
+++ b/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/ExecCompilerTest.java
@@ -307,6 +307,27 @@ member_foo self (y : Integer) z -> Integer = 100*z + 10*y + self.x
     assertEquals(321, result.asInt());
   }
 
+  @Test
+  public void inlineWithBlanks() throws Exception {
+    var code =
+        """
+    remap rows:Map -> Map =
+        rows.map (_.set_u 5)
+
+    type Map
+        M v u=3
+
+        map self fn = Map.M (fn self)
+        set_u self i = Map.M self.v i
+
+    run n = remap (Map.M n)
+    """;
+    var module = ctx.eval(LanguageInfo.ID, code);
+    var run = module.invokeMember("eval_expression", "run");
+    assertTrue("run is a function", run.canExecute());
+    assertEquals("(M (M 10 5) 3)", run.execute(10).toString());
+  }
+
   @Test
   public void inlineReturnSignatureOnLocalFunction() throws Exception {
     var module =
diff --git a/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/caches/HelloWorldCacheTest.java b/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/caches/HelloWorldCacheTest.java
new file mode 100644
index 000000000000..57d0e3a5e389
--- /dev/null
+++ b/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/caches/HelloWorldCacheTest.java
@@ -0,0 +1,76 @@
+package org.enso.interpreter.caches;
+
+import static org.junit.Assert.assertTrue;
+
+import java.io.ByteArrayOutputStream;
+import java.io.File;
+import java.io.PrintStream;
+import java.util.logging.Level;
+import java.util.stream.Collectors;
+import org.enso.common.RuntimeOptions;
+import org.enso.test.utils.ContextUtils;
+import org.graalvm.polyglot.Source;
+import org.junit.Test;
+
+public class HelloWorldCacheTest {
+
+  @Test
+  public void loadingHelloWorldTwiceUsesCaching() throws Exception {
+    var root = new File("../..").getAbsoluteFile();
+    assertTrue("build.sbt exists at " + root, new File(root, "build.sbt").exists());
+    var helloWorld = children(root, "test", "Benchmarks", "src", "Startup", "Hello_World.enso");
+    assertTrue("Hello_World.enso found", helloWorld.exists());
+
+    // the first run may or may not use caches
+    var firstMsgs = executeOnce(helloWorld);
+    assertTrue("Contains hello world:\n" + firstMsgs, firstMsgs.endsWith("Hello World"));
+    // after the first run the caches for Hello_World.enso must be generated
+
+    // the second run must read Hello_World from its .ir file!
+    var secondMsgs = executeOnce(helloWorld);
+    assertTrue("Contains hello world:\n" + secondMsgs, secondMsgs.contains("Hello World"));
+    assertTrue(
+        "Properly deserialized:\n" + secondMsgs,
+        secondMsgs.contains("Deserializing module Hello_World from IR file: true"));
+  }
+
+  private static String executeOnce(File src) throws Exception {
+    var backLog = new ByteArrayOutputStream();
+    var log = new PrintStream(backLog);
+
+    try (var ctx =
+        ContextUtils.defaultContextBuilder()
+            .out(log)
+            .err(log)
+            .logHandler(log)
+            .option(RuntimeOptions.LOG_LEVEL, Level.FINE.getName())
+            .option(RuntimeOptions.DISABLE_IR_CACHES, "false")
+            .option(RuntimeOptions.PROJECT_ROOT, findBenchmarks(src).getAbsolutePath())
+            .build()) {
+      var code = Source.newBuilder("enso", src).build();
+      var res = ContextUtils.evalModule(ctx, code, "main");
+      assertTrue("Result of IO.println is Nothing", res.isNull());
+    }
+    return backLog
+        .toString()
+        .lines()
+        .filter(l -> l.toUpperCase().contains("HELLO"))
+        .collect(Collectors.joining("\n"));
+  }
+
+  private static File children(File f, String... names) {
+    for (var n : names) {
+      f = new File(f, n);
+    }
+    return f;
+  }
+
+  private static File findBenchmarks(File f) {
+    for (; ; ) {
+      if (f.getName().equals("Benchmarks")) {
+        return f;
+      }
+      f = f.getParentFile();
+    }
+  }
+}
diff --git a/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/AtomConstructorTest.java b/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/AtomConstructorTest.java
index cf37f5c03cee..6555db35b914 100644
--- a/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/AtomConstructorTest.java
+++ b/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/AtomConstructorTest.java
@@ -1,5 +1,7 @@
 package org.enso.interpreter.test;
 
+import static org.hamcrest.MatcherAssert.assertThat;
+import static org.hamcrest.Matchers.containsString;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
 import static org.junit.Assert.fail;
@@ -146,19 +148,19 @@ private static void assertLessArguments(String msg, Function<Object[], Atom> fac
             var zero = factory.apply(new Object[0]);
             fail("Expecting exception: " + zero);
           } catch (PanicException e) {
-            assertEquals(msg + " no arguments", "Arity_Error.Error", e.getMessage());
+            assertThat(msg + " no arguments", e.getMessage(), containsString("Arity_Error"));
           }
           try {
             var one = factory.apply(new Object[] {"a"});
             fail("Expecting exception: " + one);
           } catch (PanicException e) {
-            assertEquals(msg + " one argument", "Arity_Error.Error", e.getMessage());
+            assertThat(msg + " one argument", e.getMessage(), containsString("Arity_Error"));
           }
           try {
             var two = factory.apply(new Object[] {"a", "b"});
             fail("Expecting exception: " + two);
           } catch (PanicException e) {
-            assertEquals(msg + " two arguments", "Arity_Error.Error", e.getMessage());
+            assertThat(msg + " two arguments", e.getMessage(), containsString("Arity_Error"));
           }
           return null;
         });
diff --git a/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/BinarySelfDispatchTest.java b/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/BinarySelfDispatchTest.java
new file mode 100644
index 000000000000..139594556005
--- /dev/null
+++ b/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/BinarySelfDispatchTest.java
@@ -0,0 +1,71 @@
+package org.enso.interpreter.test;
+
+import static org.hamcrest.MatcherAssert.assertThat;
+import static org.hamcrest.Matchers.containsString;
+import static org.hamcrest.core.AllOf.allOf;
+import static org.junit.Assert.fail;
+
+import org.enso.common.MethodNames;
+import org.enso.test.utils.ContextUtils;
+import org.graalvm.polyglot.Context;
+import org.graalvm.polyglot.PolyglotException;
+import org.graalvm.polyglot.Source;
+import org.graalvm.polyglot.Value;
+import org.junit.AfterClass;
+import org.junit.BeforeClass;
+import org.junit.Test;
+
+public class BinarySelfDispatchTest {
+  private static Context ctx;
+  private static Value module;
+
+  @BeforeClass
+  public static void initCtx() throws Exception {
+    ctx = ContextUtils.createDefaultContext();
+
+    var prelude =
+        Source.newBuilder(
+                "enso",
+                """
+                from Standard.Base import all
+
+                type Delay
+                    private Days n
+                type Datum
+                    private On at delta
+
+                    + self (delta : Delay) -> Datum = Datum.On self.n delta.n
+
+                today_plus n =
+                  delta = Delay.Days n
+                  now = Datum.On 0 delta
+                  now + now
+                """,
+                "error.enso")
+            .build();
+    module = ctx.eval(prelude);
+  }
+
+  @AfterClass
+  public static void closeCtx() {
+    module = null;
+    ctx.close();
+    ctx = null;
+  }
+
+  @Test
+  public void avoidSelfConversion() {
+    try {
+      var error = module.invokeMember(MethodNames.Module.EVAL_EXPRESSION, "today_plus 3");
+      fail("The code should yield a panic: " + error);
+    } catch (PolyglotException ex) {
+      assertThat(
+          "The error message is correct",
+          ex.getMessage(),
+          allOf(
+              containsString("expected `delta`"),
+              containsString("to be Delay"),
+              containsString("but got Datum")));
+    }
+  }
+}
diff --git a/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/SymbolResolutionTest.java b/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/SymbolResolutionTest.java
index ff4e0dcbc41f..ed2a33fda799 100644
--- a/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/SymbolResolutionTest.java
+++ b/engine/runtime-integration-tests/src/test/java/org/enso/interpreter/test/SymbolResolutionTest.java
@@ -1,10 +1,18 @@
 package org.enso.interpreter.test;
 
+import static org.hamcrest.MatcherAssert.assertThat;
+import static org.hamcrest.Matchers.allOf;
+import static org.hamcrest.Matchers.containsString;
+import static org.hamcrest.Matchers.is;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
+import static org.junit.Assert.fail;
 
+import java.io.ByteArrayOutputStream;
 import java.net.URI;
 import org.enso.common.MethodNames;
+import org.enso.test.utils.ContextUtils;
+import org.graalvm.polyglot.PolyglotException;
 import org.graalvm.polyglot.Source;
 import org.junit.Test;
 
@@ -115,4 +123,29 @@ public void aliasedModuleName2() throws Exception {
     assertTrue(result.isNumber());
     assertEquals(44, result.asInt());
   }
+
+  // https://github.com/enso-org/enso/issues/10748
+  @Test
+  public void unresolvedSymbolErrorMessage() {
+    var code =
+        """
+        type My_Type
+            static_method = 23
+
+        main =
+            static_method
+        """;
+    var out = new ByteArrayOutputStream();
+    try (var ctx = ContextUtils.defaultContextBuilder().out(out).err(out).build()) {
+      try {
+        var res = ContextUtils.evalModule(ctx, code);
+        fail("Should throw exception. Instead got: " + res);
+      } catch (PolyglotException ex) {
+        assertThat(ex.isSyntaxError(), is(true));
+        assertThat(
+            out.toString(),
+            allOf(containsString("The name"), containsString("could not be found")));
+      }
+    }
+  }
 }
diff --git a/engine/runtime-integration-tests/src/test/scala/org/enso/compiler/test/pass/resolve/GlobalNamesTest.scala b/engine/runtime-integration-tests/src/test/scala/org/enso/compiler/test/pass/resolve/GlobalNamesTest.scala
index 8fbad48ea5c6..e298f0c25051 100644
--- a/engine/runtime-integration-tests/src/test/scala/org/enso/compiler/test/pass/resolve/GlobalNamesTest.scala
+++ b/engine/runtime-integration-tests/src/test/scala/org/enso/compiler/test/pass/resolve/GlobalNamesTest.scala
@@ -2,6 +2,7 @@ package org.enso.compiler.test.pass.resolve
 
 import org.enso.compiler.Passes
 import org.enso.compiler.context.{FreshNameSupply, ModuleContext}
+import org.enso.compiler.core.IR
 import org.enso.compiler.core.Implicits.AsMetadata
 import org.enso.compiler.core.ir.Expression
 import org.enso.compiler.core.ir.Function
@@ -187,6 +188,35 @@ class GlobalNamesTest extends CompilerTest {
         Resolution(ResolvedModule(ctx.moduleReference()))
       )
     }
+
+    "resolve type in static method call" in {
+      implicit val ctx: ModuleContext = mkModuleContext._1
+      val ir =
+        """
+          |type My_Type
+          |    method x = x
+          |
+          |main =
+          |    My_Type.method 42
+          |""".stripMargin.preprocessModule.analyse
+      val allGlobNames = collectAllGlobalNames(ir)
+      allGlobNames shouldNot be(null)
+      allGlobNames.size shouldBe 1
+      allGlobNames.head._1 shouldBe a[Name.Literal]
+      allGlobNames.head._1.asInstanceOf[Name.Literal].name shouldEqual "My_Type"
+      allGlobNames.head._2.target.qualifiedName.item shouldEqual "My_Type"
+    }
+  }
+
+  private def collectAllGlobalNames(
+    moduleIr: Module
+  ): Seq[(IR, Resolution)] = {
+    moduleIr
+      .preorder()
+      .collect { case ir: IR =>
+        ir.getMetadata(GlobalNames).map((ir, _))
+      }
+      .flatten
   }
 
   "Undefined names" should {
@@ -232,5 +262,27 @@ class GlobalNamesTest extends CompilerTest {
       }
       unresolved.map(_.name) shouldEqual List("here")
     }
+
+    "should be detected when trying to use static method without type" in {
+      implicit val ctx: ModuleContext = mkModuleContext._1
+
+      val ir =
+        """
+          |type My_Type
+          |    static_method = 23
+          |main =
+          |    static_method
+          |""".stripMargin.preprocessModule.analyse
+
+      val unresolved = ir.preorder.collect {
+        case errors.Resolution(
+              name,
+              _: errors.Resolution.ResolverError,
+              _
+            ) =>
+          name
+      }
+      unresolved.map(_.name) shouldEqual List("static_method")
+    }
   }
 }
diff --git a/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/ReplTest.scala b/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/ReplTest.scala
index 8a1a67f602a5..623803609b35 100644
--- a/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/ReplTest.scala
+++ b/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/ReplTest.scala
@@ -295,9 +295,7 @@ class ReplTest
         executor.exit()
       }
       eval(code)
-      val errorMsg =
-        "Compile_Error.Error"
-      evalResult.left.value.getMessage shouldEqual errorMsg
+      evalResult.left.value.getMessage should include("Compile_Error")
     }
 
     "handle errors gracefully (pretty print)" in {
diff --git a/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeErrorsTest.scala b/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeErrorsTest.scala
index 04e29623803a..a890e8079b6c 100644
--- a/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeErrorsTest.scala
+++ b/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeErrorsTest.scala
@@ -925,16 +925,7 @@ class RuntimeErrorsTest
       TestMessages.update(
         contextId,
         xId,
-        ConstantsGen.INTEGER,
-        methodCall = Some(
-          Api.MethodCall(
-            Api.MethodPointer(
-              "Standard.Base.Error",
-              "Standard.Base.Error.Error",
-              "throw"
-            )
-          )
-        )
+        ConstantsGen.INTEGER
       ),
       TestMessages.update(
         contextId,
@@ -2716,4 +2707,62 @@ class RuntimeErrorsTest
     )
   }
 
+  it should "return failure result after stack overflow errors" in {
+    val contextId  = UUID.randomUUID()
+    val requestId  = UUID.randomUUID()
+    val moduleName = "Enso_Test.Test.Main"
+
+    val metadata = new Metadata
+
+    val code =
+      """from Standard.Base import all
+        |
+        |main =
+        |    operator1 = Main.function1
+        |    operator1
+        |
+        |function1 = function1
+        |""".stripMargin.linesIterator.mkString("\n")
+    val contents = metadata.appendToCode(code)
+    val mainFile = context.writeMain(contents)
+
+    // create context
+    context.send(Api.Request(requestId, Api.CreateContextRequest(contextId)))
+    context.receive shouldEqual Some(
+      Api.Response(requestId, Api.CreateContextResponse(contextId))
+    )
+
+    // Open the new file
+    context.send(
+      Api.Request(requestId, Api.OpenFileRequest(mainFile, contents))
+    )
+    context.receive shouldEqual Some(
+      Api.Response(Some(requestId), Api.OpenFileResponse)
+    )
+
+    // push main
+    context.send(
+      Api.Request(
+        requestId,
+        Api.PushContextRequest(
+          contextId,
+          Api.StackItem.ExplicitCall(
+            Api.MethodPointer(moduleName, "Enso_Test.Test.Main", "main"),
+            None,
+            Vector()
+          )
+        )
+      )
+    )
+    context.receiveNIgnoreStdLib(2) should contain theSameElementsAs Seq(
+      Api.Response(requestId, Api.PushContextResponse(contextId)),
+      Api.Response(
+        Api.ExecutionFailed(
+          contextId,
+          Api.ExecutionResult.Failure("StackOverflowError", None)
+        )
+      )
+    )
+  }
+
 }
diff --git a/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeServerTest.scala b/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeServerTest.scala
index 52801bdb2338..0e81cf2e639d 100644
--- a/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeServerTest.scala
+++ b/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeServerTest.scala
@@ -1160,6 +1160,127 @@ class RuntimeServerTest
     )
   }
 
+  it should "send method pointer updates of when autoscope constructor changes to a value" in {
+    val contextId  = UUID.randomUUID()
+    val requestId  = UUID.randomUUID()
+    val moduleName = "Enso_Test.Test.Main"
+
+    val metadata = new Metadata
+    val idA      = metadata.addItem(44, 3, "aa")
+
+    val code =
+      """type Xyz
+        |
+        |type T
+        |    A
+        |
+        |main =
+        |    a = test Xyz
+        |    a
+        |
+        |test t:(Xyz | T) = t
+        |""".stripMargin.linesIterator.mkString("\n")
+    val contents = metadata.appendToCode(code)
+    val mainFile = context.writeMain(contents)
+
+    metadata.assertInCode(idA, code, "Xyz")
+
+    // create context
+    context.send(Api.Request(requestId, Api.CreateContextRequest(contextId)))
+    context.receive shouldEqual Some(
+      Api.Response(requestId, Api.CreateContextResponse(contextId))
+    )
+
+    // open file
+    context.send(
+      Api.Request(requestId, Api.OpenFileRequest(mainFile, contents))
+    )
+    context.receive shouldEqual Some(
+      Api.Response(Some(requestId), Api.OpenFileResponse)
+    )
+
+    // push main
+    context.send(
+      Api.Request(
+        requestId,
+        Api.PushContextRequest(
+          contextId,
+          Api.StackItem.ExplicitCall(
+            Api.MethodPointer(moduleName, moduleName, "main"),
+            None,
+            Vector()
+          )
+        )
+      )
+    )
+    context.receiveN(3) should contain theSameElementsAs Seq(
+      Api.Response(requestId, Api.PushContextResponse(contextId)),
+      TestMessages.update(
+        contextId,
+        idA,
+        "Enso_Test.Test.Main.Xyz"
+      ),
+      context.executionComplete(contextId)
+    )
+
+    // Modify the file /Xyz/..A/
+    context.send(
+      Api.Request(
+        Api.EditFileNotification(
+          mainFile,
+          Seq(
+            model.TextEdit(
+              model.Range(model.Position(6, 13), model.Position(6, 16)),
+              "..A"
+            )
+          ),
+          execute = true,
+          idMap   = None
+        )
+      )
+    )
+
+    context.receiveN(3) should contain theSameElementsAs Seq(
+      TestMessages.pending(contextId, idA),
+      TestMessages.update(
+        contextId,
+        idA,
+        "Enso_Test.Test.Main.T",
+        Api.MethodCall(
+          Api.MethodPointer("Enso_Test.Test.Main", "Enso_Test.Test.Main.T", "A")
+        )
+      ),
+      context.executionComplete(contextId)
+    )
+
+    // Modify the file /..A/Xyz/
+    context.send(
+      Api.Request(
+        Api.EditFileNotification(
+          mainFile,
+          Seq(
+            model.TextEdit(
+              model.Range(model.Position(6, 13), model.Position(6, 16)),
+              "Xyz"
+            )
+          ),
+          execute = true,
+          idMap   = None
+        )
+      )
+    )
+
+    context.receiveN(3) should contain theSameElementsAs Seq(
+      TestMessages.pending(contextId, idA),
+      TestMessages.update(
+        contextId,
+        idA,
+        "Enso_Test.Test.Main.Xyz"
+      ),
+      context.executionComplete(contextId)
+    )
+  }
+
   it should "send method pointer updates of builtin operators" in {
     val contextId  = UUID.randomUUID()
     val requestId  = UUID.randomUUID()
@@ -3926,7 +4047,6 @@ class RuntimeServerTest
         contextId,
         idMainA,
         ConstantsGen.TEXT,
-        Api.MethodCall(Api.MethodPointer(moduleName, moduleName, "hie")),
         fromCache   = false,
         typeChanged = true
       ),
diff --git a/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeTypesTest.scala b/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeTypesTest.scala
index e138da0985f3..a415e64bac41 100644
--- a/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeTypesTest.scala
+++ b/engine/runtime-integration-tests/src/test/scala/org/enso/interpreter/test/instrument/RuntimeTypesTest.scala
@@ -370,7 +370,6 @@ class RuntimeTypesTest
       TestMessages.panic(
         contextId,
         id_x,
-        Api.MethodCall(Api.MethodPointer(moduleName, s"$moduleName.T", "C")),
         Api.ExpressionUpdate.Payload.Panic("Compile_Error", List(id_x)),
         builtin = true
       ),
diff --git a/engine/runtime-language-arrow/src/main/java/org/enso/interpreter/arrow/runtime/ArrowCastToFixedSizeArrayFactory.java b/engine/runtime-language-arrow/src/main/java/org/enso/interpreter/arrow/runtime/ArrowCastToFixedSizeArrayFactory.java
index a3e54d5821fb..1e2c20761a08 100644
--- a/engine/runtime-language-arrow/src/main/java/org/enso/interpreter/arrow/runtime/ArrowCastToFixedSizeArrayFactory.java
+++ b/engine/runtime-language-arrow/src/main/java/org/enso/interpreter/arrow/runtime/ArrowCastToFixedSizeArrayFactory.java
@@ -14,7 +14,6 @@
 import com.oracle.truffle.api.library.ExportLibrary;
 import com.oracle.truffle.api.library.ExportMessage;
 import org.enso.interpreter.arrow.LogicalLayout;
-import org.graalvm.collections.Pair;
 
 @ExportLibrary(InteropLibrary.class)
 public class ArrowCastToFixedSizeArrayFactory implements TruffleObject {
@@ -45,7 +44,7 @@ static Object doDate32(
         throws UnsupportedMessageException, ArityException, UnsupportedTypeException {
       var unit = LogicalLayout.Date32;
       var pair = pointer(args, iop, unit);
-      return new ArrowFixedArrayDate(pair.getLeft(), pair.getRight(), unit);
+      return new ArrowFixedArrayDate(pair.buffer(), pair.at(), unit);
     }
 
     @Specialization(guards = "receiver.getLayout() == Date64")
@@ -56,7 +55,7 @@ static Object doDate64(
         throws UnsupportedMessageException, ArityException, UnsupportedTypeException {
       var unit = LogicalLayout.Date64;
       var pair = pointer(args, iop, unit);
-      return new ArrowFixedArrayDate(pair.getLeft(), pair.getRight(), unit);
+      return new ArrowFixedArrayDate(pair.buffer(), pair.at(), unit);
     }
 
     @Specialization(guards = "receiver.getLayout() == Int8")
@@ -67,7 +66,7 @@ static Object doInt8(
         throws UnsupportedMessageException, ArityException, UnsupportedTypeException {
       var unit = LogicalLayout.Int8;
       var pair = pointer(args, iop, unit);
-      return new ArrowFixedArrayInt(pair.getLeft(), pair.getRight(), unit);
+      return new ArrowFixedArrayInt(pair.buffer(), pair.at(), unit);
     }
 
     @Specialization(guards = "receiver.getLayout() == Int16")
@@ -78,7 +77,7 @@ static Object doInt16(
         throws UnsupportedMessageException, ArityException, UnsupportedTypeException {
       var unit = LogicalLayout.Int16;
       var pair = pointer(args, iop, unit);
-      return new ArrowFixedArrayInt(pair.getLeft(), pair.getRight(), unit);
+      return new ArrowFixedArrayInt(pair.buffer(), pair.at(), unit);
     }
 
     @Specialization(guards = "receiver.getLayout() == Int32")
@@ -89,7 +88,7 @@ static Object doInt32(
         throws UnsupportedMessageException, ArityException, UnsupportedTypeException {
       var unit = LogicalLayout.Int32;
       var pair = pointer(args, iop, unit);
-      return new ArrowFixedArrayInt(pair.getLeft(), pair.getRight(), unit);
+      return new ArrowFixedArrayInt(pair.buffer(), pair.at(), unit);
     }
 
     @Specialization(guards = "receiver.getLayout() == Int64")
@@ -100,12 +99,11 @@ static Object doInt64(
         throws UnsupportedMessageException, ArityException, UnsupportedTypeException {
       var unit = LogicalLayout.Int64;
       var pair = pointer(args, iop, unit);
-      return new ArrowFixedArrayInt(pair.getLeft(), pair.getRight(), unit);
+      return new ArrowFixedArrayInt(pair.buffer(), pair.at(), unit);
     }
 
     @CompilerDirectives.TruffleBoundary
-    private static Pair<ByteBufferDirect, Integer> pointer(
-        Object[] args, InteropLibrary interop, SizeInBytes unit)
+    private static BufferInt pointer(Object[] args, InteropLibrary interop, SizeInBytes unit)
         throws ArityException, UnsupportedTypeException, UnsupportedMessageException {
       if (args.length < 2) {
         throw ArityException.create(2, 3, args.length);
@@ -125,12 +123,12 @@ private static Pair<ByteBufferDirect, Integer> pointer(
           throw UnsupportedTypeException.create(
               new Object[] {args[2]}, "Address of non-null bitmap is invalid");
         }
-        return Pair.create(
+        return new BufferInt(
             ByteBufferDirect.fromAddress(
                 interop.asLong(args[0]), interop.asLong(args[2]), capacity, unit),
             capacity);
       } else {
-        return Pair.create(
+        return new BufferInt(
             ByteBufferDirect.fromAddress(interop.asLong(args[0]), capacity, unit), capacity);
       }
     }
@@ -145,4 +143,6 @@ private static String unknownLayoutMessage(LogicalLayout layout) {
       return "unknown layout: " + layout.toString();
     }
   }
+
+  private record BufferInt(ByteBufferDirect buffer, int at) {}
 }
diff --git a/engine/runtime-parser/src/main/java/org/enso/compiler/core/IR.java b/engine/runtime-parser/src/main/java/org/enso/compiler/core/IR.java
index add2cc708d7c..da3ebd12c564 100644
--- a/engine/runtime-parser/src/main/java/org/enso/compiler/core/IR.java
+++ b/engine/runtime-parser/src/main/java/org/enso/compiler/core/IR.java
@@ -1,6 +1,7 @@
 package org.enso.compiler.core;
 
 import java.util.UUID;
+import java.util.function.Consumer;
 import java.util.function.Function;
 import org.enso.compiler.core.ir.DiagnosticStorage;
 import org.enso.compiler.core.ir.Expression;
@@ -8,7 +9,6 @@
 import org.enso.compiler.core.ir.MetadataStorage;
 import org.enso.compiler.debug.Debug;
 import scala.Option;
-import scala.collection.immutable.$colon$colon$;
 import scala.collection.immutable.List;
 
 /**
@@ -52,7 +52,7 @@ public interface IR {
    * @return the external identifier for this IR node
    */
   default Option<@ExternalID UUID> getExternalId() {
-    return location().flatMap(l -> l.id());
+    return location().flatMap(IdentifiedLocation::id);
   }
 
   /**
@@ -71,16 +71,36 @@ public interface IR {
    */
   List<IR> children();
 
+  /**
+   * Applies the callback to nodes in the preorder walk of the tree of this node.
+   *
+   * @param ir the node to traverse
+   * @param cb the callback to apply
+   */
+  static void preorder(IR ir, Consumer<IR> cb) {
+    final class CB implements scala.Function1<IR, scala.Unit> {
+      @Override
+      public scala.Unit apply(IR ir) {
+        cb.accept(ir);
+        ir.children().foreach(this);
+        return null;
+      }
+    }
+
+    cb.accept(ir);
+    ir.children().foreach(new CB());
+  }
+
   /**
    * Lists all the nodes in the preorder walk of the tree of this node.
    *
    * @return all the descendants of this node.
    */
   default List<IR> preorder() {
-    List<IR> ordered = children().flatMap(c -> c.preorder());
-    IR element = this;
-    return $colon$colon$.MODULE$.apply(
-        element, ordered); // ordered.prepended(element) is reporeted as ambiguous
+    var builder = new scala.collection.mutable.ListBuffer<IR>();
+    IR.preorder(this, builder::addOne);
+
+    return builder.result();
   }
 
   /**
diff --git a/engine/runtime-parser/src/main/scala/org/enso/compiler/core/ir/expression/Operator.scala b/engine/runtime-parser/src/main/scala/org/enso/compiler/core/ir/expression/Operator.scala
index 108a87e1fa1c..a7d5ded3c02f 100644
--- a/engine/runtime-parser/src/main/scala/org/enso/compiler/core/ir/expression/Operator.scala
+++ b/engine/runtime-parser/src/main/scala/org/enso/compiler/core/ir/expression/Operator.scala
@@ -4,7 +4,7 @@ package expression
 import org.enso.compiler.core.Implicits.{ShowPassData, ToStringHelper}
 import org.enso.compiler.core.{IR, Identifier}
 
-import java.util.UUID;
+import java.util.UUID
 
 /** Operator applications in Enso. */
 trait Operator extends Application {
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/node/BinaryOperatorNode.java b/engine/runtime/src/main/java/org/enso/interpreter/node/BinaryOperatorNode.java
index c28b217e05c3..106fff964df3 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/node/BinaryOperatorNode.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/node/BinaryOperatorNode.java
@@ -138,7 +138,7 @@ final Object doThatConversionCached(
         @Shared("convert") @Cached InteropConversionCallNode convertNode,
         @Shared("invoke") @Cached(allowUncached = true, value = "buildWithArity(2)")
             InvokeFunctionNode invokeNode) {
-      return doDispatch(frame, self, that, thatType, symbolFn, convertNode, invokeNode);
+      return doDispatch(frame, self, that, selfType, thatType, symbolFn, convertNode, invokeNode);
     }
 
     @Specialization(replaces = "doThatConversionCached")
@@ -151,12 +151,15 @@ final Object doThatConversionUncached(
         @Shared("convert") @Cached InteropConversionCallNode convertNode,
         @Shared("invoke") @Cached(allowUncached = true, value = "buildWithArity(2)")
             InvokeFunctionNode invokeNode) {
+      var selfType = findType(typeOfNode, self);
       if (that instanceof EnsoMultiValue multi) {
         for (var thatType : multi.allTypes()) {
           var fn = findSymbol(symbol, thatType);
           if (fn != null) {
             var thatCasted = EnsoMultiValue.CastToNode.getUncached().executeCast(thatType, multi);
-            var result = doDispatch(frame, self, thatCasted, thatType, fn, convertNode, invokeNode);
+            var result =
+                doDispatch(
+                    frame, self, thatCasted, selfType, thatType, fn, convertNode, invokeNode);
             if (result != null) {
               return result;
             }
@@ -167,7 +170,8 @@ final Object doThatConversionUncached(
         if (thatType != null) {
           var fn = findSymbol(symbol, thatType);
           if (fn != null) {
-            var result = doDispatch(frame, self, that, thatType, fn, convertNode, invokeNode);
+            var result =
+                doDispatch(frame, self, that, selfType, thatType, fn, convertNode, invokeNode);
             if (result != null) {
               return result;
             }
@@ -181,11 +185,16 @@ private Object doDispatch(
         VirtualFrame frame,
         Object self,
         Object that,
+        Type selfType,
         Type thatType,
         Function symbolFn,
         InteropConversionCallNode convertNode,
         InvokeFunctionNode invokeNode)
         throws PanicException {
+      if (selfType == thatType) {
+        // conversions won't help
+        return null;
+      }
       var convert = UnresolvedConversion.build(thatType.getDefinitionScope());
 
       var ctx = EnsoContext.get(this);
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/ContextIsEnabledNode.java b/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/ContextIsEnabledNode.java
index 9e19228090bd..b2e74dbf2d72 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/ContextIsEnabledNode.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/ContextIsEnabledNode.java
@@ -7,7 +7,6 @@
 import org.enso.interpreter.runtime.data.atom.Atom;
 import org.enso.interpreter.runtime.error.PanicException;
 import org.enso.interpreter.runtime.state.ExecutionEnvironment;
-import org.enso.interpreter.runtime.state.State;
 
 @BuiltinMethod(
     type = "Context",
@@ -16,9 +15,9 @@
 public class ContextIsEnabledNode extends Node {
   private @Child ExpectStringNode expectStringNode = ExpectStringNode.build();
 
-  Object execute(State state, Atom self, Object environmentName) {
+  Object execute(Atom self, Object environmentName) {
     String envName = expectStringNode.execute(environmentName);
-    ExecutionEnvironment currentEnv = state.currentEnvironment();
+    ExecutionEnvironment currentEnv = EnsoContext.get(this).getExecutionEnvironment();
     if (!currentEnv.getName().equals(envName)) {
       Atom error =
           EnsoContext.get(this)
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeCurrentExecutionEnvironmentNode.java b/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeCurrentExecutionEnvironmentNode.java
index a881e75af174..7fd13a913790 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeCurrentExecutionEnvironmentNode.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeCurrentExecutionEnvironmentNode.java
@@ -2,8 +2,8 @@
 
 import com.oracle.truffle.api.nodes.Node;
 import org.enso.interpreter.dsl.BuiltinMethod;
+import org.enso.interpreter.runtime.EnsoContext;
 import org.enso.interpreter.runtime.data.text.Text;
-import org.enso.interpreter.runtime.state.State;
 
 @BuiltinMethod(
     type = "Runtime",
@@ -11,7 +11,7 @@
     description = "Returns the name of the current execution environment.",
     autoRegister = false)
 public class RuntimeCurrentExecutionEnvironmentNode extends Node {
-  Object execute(State state) {
-    return Text.create(state.currentEnvironment().getName());
+  Object execute() {
+    return Text.create(EnsoContext.get(this).getExecutionEnvironment().getName());
   }
 }
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeWithDisabledContextNode.java b/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeWithDisabledContextNode.java
index b4a3a8889f6f..5c486b47c1e4 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeWithDisabledContextNode.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeWithDisabledContextNode.java
@@ -7,7 +7,9 @@
 import org.enso.interpreter.node.BaseNode;
 import org.enso.interpreter.node.callable.thunk.ThunkExecutorNode;
 import org.enso.interpreter.node.expression.builtin.text.util.ExpectStringNode;
+import org.enso.interpreter.runtime.EnsoContext;
 import org.enso.interpreter.runtime.data.atom.Atom;
+import org.enso.interpreter.runtime.state.ExecutionEnvironment;
 import org.enso.interpreter.runtime.state.State;
 
 @BuiltinMethod(
@@ -23,7 +25,12 @@ public class RuntimeWithDisabledContextNode extends Node {
   Object execute(
       VirtualFrame frame, State state, Atom context, Object env_name, @Suspend Object action) {
     String envName = expectStringNode.execute(env_name);
-    return thunkExecutorNode.executeThunk(
-        frame, action, state.withContextDisabledIn(context, envName), BaseNode.TailStatus.NOT_TAIL);
+    ExecutionEnvironment original =
+        EnsoContext.get(this).disableExecutionEnvironment(context, envName);
+    try {
+      return thunkExecutorNode.executeThunk(frame, action, state, BaseNode.TailStatus.NOT_TAIL);
+    } finally {
+      EnsoContext.get(this).setExecutionEnvironment(original);
+    }
   }
 }
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeWithEnabledContextNode.java b/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeWithEnabledContextNode.java
index d280a343f05a..d4fcd4380860 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeWithEnabledContextNode.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/node/expression/builtin/runtime/RuntimeWithEnabledContextNode.java
@@ -7,7 +7,9 @@
 import org.enso.interpreter.node.BaseNode;
 import org.enso.interpreter.node.callable.thunk.ThunkExecutorNode;
 import org.enso.interpreter.node.expression.builtin.text.util.ExpectStringNode;
+import org.enso.interpreter.runtime.EnsoContext;
 import org.enso.interpreter.runtime.data.atom.Atom;
+import org.enso.interpreter.runtime.state.ExecutionEnvironment;
 import org.enso.interpreter.runtime.state.State;
 
 @BuiltinMethod(
@@ -23,7 +25,12 @@ public class RuntimeWithEnabledContextNode extends Node {
   Object execute(
       VirtualFrame frame, State state, Atom context, Object env_name, @Suspend Object action) {
     String envName = expectStringNode.execute(env_name);
-    return thunkExecutorNode.executeThunk(
-        frame, action, state.withContextEnabledIn(context, envName), BaseNode.TailStatus.NOT_TAIL);
+    ExecutionEnvironment original =
+        EnsoContext.get(this).enableExecutionEnvironment(context, envName);
+    try {
+      return thunkExecutorNode.executeThunk(frame, action, state, BaseNode.TailStatus.NOT_TAIL);
+    } finally {
+      EnsoContext.get(this).setExecutionEnvironment(original);
+    }
   }
 }
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/runtime/EnsoContext.java b/engine/runtime/src/main/java/org/enso/interpreter/runtime/EnsoContext.java
index db7ce623b893..dc4dc3f4a465 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/runtime/EnsoContext.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/runtime/EnsoContext.java
@@ -51,6 +51,7 @@
 import org.enso.interpreter.OptionsHelper;
 import org.enso.interpreter.runtime.builtin.Builtins;
 import org.enso.interpreter.runtime.data.Type;
+import org.enso.interpreter.runtime.data.atom.Atom;
 import org.enso.interpreter.runtime.error.DataflowError;
 import org.enso.interpreter.runtime.error.PanicException;
 import org.enso.interpreter.runtime.instrument.NotificationHandler;
@@ -875,6 +876,34 @@ public void setExecutionEnvironment(ExecutionEnvironment executionEnvironment) {
     this.executionEnvironment = executionEnvironment;
   }
 
+  /**
+   * Enable execution context in the execution environment.
+   *
+   * @param context the execution context
+   * @param environmentName the execution environment name
+   */
+  public ExecutionEnvironment enableExecutionEnvironment(Atom context, String environmentName) {
+    ExecutionEnvironment original = executionEnvironment;
+    if (executionEnvironment.getName().equals(environmentName)) {
+      executionEnvironment = executionEnvironment.withContextEnabled(context);
+    }
+    return original;
+  }
+
+  /**
+   * Enable execution context in the execution environment.
+   *
+   * @param context the execution context
+   * @param environmentName the execution environment name
+   */
+  public ExecutionEnvironment disableExecutionEnvironment(Atom context, String environmentName) {
+    ExecutionEnvironment original = executionEnvironment;
+    if (executionEnvironment.getName().equals(environmentName)) {
+      executionEnvironment = executionEnvironment.withContextDisabled(context);
+    }
+    return original;
+  }
+
   /** Returns a maximal number of warnings that can be attached to a value */
   public int getWarningsLimit() {
     return this.warningsLimit;
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/runtime/Module.java b/engine/runtime/src/main/java/org/enso/interpreter/runtime/Module.java
index 6cab1ab0c13b..9d59f77ab0ab 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/runtime/Module.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/runtime/Module.java
@@ -406,15 +406,13 @@ public boolean containsUUID(UUID id) {
       var newMap = new HashMap<UUID, IR>();
       var localIr = getIr();
       if (localIr != null) {
-        localIr
-            .preorder()
-            .foreach(
-                (v1) -> {
-                  if (v1.getExternalId().isDefined()) {
-                    newMap.put(v1.getExternalId().get(), v1);
-                  }
-                  return null;
-                });
+        IR.preorder(
+            localIr,
+            v1 -> {
+              if (v1.getExternalId().isDefined()) {
+                newMap.put(v1.getExternalId().get(), v1);
+              }
+            });
       }
       uuidsMap = newMap;
       map = newMap;
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/runtime/error/DataflowError.java b/engine/runtime/src/main/java/org/enso/interpreter/runtime/error/DataflowError.java
index c87e494e00b0..1d65eac65161 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/runtime/error/DataflowError.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/runtime/error/DataflowError.java
@@ -54,7 +54,10 @@ public final class DataflowError extends AbstractTruffleException implements Ens
   public static DataflowError withDefaultTrace(State state, Object payload, Node location) {
     assert payload != null;
     boolean attachFullStackTrace =
-        state == null ? true : state.currentEnvironment().hasContextEnabled("Dataflow_Stack_Trace");
+        state == null
+            || EnsoContext.get(location)
+                .getExecutionEnvironment()
+                .hasContextEnabled("Dataflow_Stack_Trace");
     if (attachFullStackTrace) {
       var result = new DataflowError(payload, UNLIMITED_STACK_TRACE, location);
       TruffleStackTrace.fillIn(result);
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/runtime/error/PanicException.java b/engine/runtime/src/main/java/org/enso/interpreter/runtime/error/PanicException.java
index 39f80e13bc27..8fee7ad63fdf 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/runtime/error/PanicException.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/runtime/error/PanicException.java
@@ -13,6 +13,7 @@
 import com.oracle.truffle.api.library.ExportMessage;
 import com.oracle.truffle.api.nodes.Node;
 import com.oracle.truffle.api.source.SourceSection;
+import java.util.logging.Level;
 import org.enso.interpreter.node.BaseNode.TailStatus;
 import org.enso.interpreter.node.callable.IndirectInvokeMethodNode;
 import org.enso.interpreter.node.callable.InvokeCallableNode.ArgumentsExecutionMode;
@@ -81,10 +82,20 @@ public String getMessage() {
   private String computeMessage() {
     String msg;
     InteropLibrary library = InteropLibrary.getUncached();
+    Object info = null;
     try {
-      msg = library.asString(library.getExceptionMessage(this));
+      info = library.getExceptionMessage(this);
+      msg = library.asString(info);
     } catch (AssertionError | UnsupportedMessageException e) {
-      msg = TypeToDisplayTextNode.getUncached().execute(payload);
+      try {
+        var ctx = EnsoContext.get(null);
+        ctx.getLogger().log(Level.WARNING, "Cannot convert " + info + " to string", e);
+        msg = TypeToDisplayTextNode.getUncached().execute(payload);
+      } catch (AssertionError assertionError) {
+        throw new AssertionError(
+            "Failed to log failed conversion of " + info + " to string and payload " + payload,
+            assertionError);
+      }
     }
     cacheMessage = msg;
     return msg;
@@ -153,6 +164,8 @@ static Object handleExceptionMessage(
     try {
       return Text.create(strings.asString(text));
     } catch (UnsupportedMessageException e) {
+      CompilerDirectives.transferToInterpreter();
+      ctx.getLogger().log(Level.WARNING, "Cannot convert " + text + " to string", e);
       return Text.create(typeToDisplayTextNode.execute(payload));
     }
   }
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/runtime/state/State.java b/engine/runtime/src/main/java/org/enso/interpreter/runtime/state/State.java
index bd8687b60b31..20699b105332 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/runtime/state/State.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/runtime/state/State.java
@@ -3,44 +3,20 @@
 import com.oracle.truffle.api.object.DynamicObject;
 import com.oracle.truffle.api.object.Shape;
 import org.enso.interpreter.runtime.EnsoContext;
-import org.enso.interpreter.runtime.data.atom.Atom;
 
 public class State {
   private final Container container;
 
-  private final ExecutionEnvironment executionEnvironment;
-
-  public State(Container container, ExecutionEnvironment executionEnvironment) {
+  public State(Container container) {
     this.container = container;
-    this.executionEnvironment = executionEnvironment;
   }
 
   public Container getContainer() {
     return container;
   }
 
-  public ExecutionEnvironment currentEnvironment() {
-    return executionEnvironment;
-  }
-
   public static State create(EnsoContext context) {
-    return new State(Container.create(context), context.getExecutionEnvironment());
-  }
-
-  public State withContextEnabledIn(Atom context, String environmentName) {
-    if (executionEnvironment.getName().equals(environmentName)) {
-      return new State(container, executionEnvironment.withContextEnabled(context));
-    } else {
-      return this;
-    }
-  }
-
-  public State withContextDisabledIn(Atom context, String environmentName) {
-    if (executionEnvironment.getName().equals(environmentName)) {
-      return new State(container, executionEnvironment.withContextDisabled(context));
-    } else {
-      return this;
-    }
+    return new State(Container.create(context));
   }
 
   public static class Container extends DynamicObject {
diff --git a/engine/runtime/src/main/scala/org/enso/interpreter/runtime/DefaultPackageRepository.scala b/engine/runtime/src/main/scala/org/enso/interpreter/runtime/DefaultPackageRepository.scala
index 976fa8ddfd14..6abdb97a8767 100644
--- a/engine/runtime/src/main/scala/org/enso/interpreter/runtime/DefaultPackageRepository.scala
+++ b/engine/runtime/src/main/scala/org/enso/interpreter/runtime/DefaultPackageRepository.scala
@@ -489,7 +489,7 @@ private class DefaultPackageRepository(
     syntheticModule: Module,
     refs: List[QualifiedName]
   ): Unit = {
-    assert(syntheticModule.isSynthetic)
+    org.enso.common.Asserts.assertInJvm(syntheticModule.isSynthetic)
     if (!loadedModules.contains(syntheticModule.getName.toString)) {
       loadedModules.put(
         syntheticModule.getName.toString,
@@ -497,7 +497,7 @@ private class DefaultPackageRepository(
       )
     } else {
       val loaded = loadedModules(syntheticModule.getName.toString)
-      assert(!loaded.isSynthetic)
+      org.enso.common.Asserts.assertInJvm(!loaded.isSynthetic)
       loaded
         .asInstanceOf[TruffleCompilerContext.Module]
         .unsafeModule()
diff --git a/engine/runtime/src/main/scala/org/enso/interpreter/runtime/IrToTruffle.scala b/engine/runtime/src/main/scala/org/enso/interpreter/runtime/IrToTruffle.scala
index fa2a01f0f469..c7b47140b4a1 100644
--- a/engine/runtime/src/main/scala/org/enso/interpreter/runtime/IrToTruffle.scala
+++ b/engine/runtime/src/main/scala/org/enso/interpreter/runtime/IrToTruffle.scala
@@ -1088,7 +1088,7 @@ class IrToTruffle(
                   asAssociatedType(actualModule),
                   method.name
                 )
-              assert(
+              org.enso.common.Asserts.assertInJvm(
                 fun != null,
                 s"exported symbol `${method.name}` needs to be registered first in the module "
               )
@@ -1106,7 +1106,7 @@ class IrToTruffle(
                 case Right(List(BindingsMap.ResolvedType(modWithTp, _))) =>
                   val tpScope = asScope(modWithTp.unsafeAsModule())
                   val tp      = tpScope.getType(staticMethod.tpName, true)
-                  assert(
+                  org.enso.common.Asserts.assertInJvm(
                     tp != null,
                     s"Type should be defined in module ${modWithTp.getName}"
                   )
@@ -1118,7 +1118,7 @@ class IrToTruffle(
                       eigenTp,
                       staticMethod.methodName
                     )
-                  assert(
+                  org.enso.common.Asserts.assertInJvm(
                     fun != null,
                     s"exported symbol (static method) `${staticMethod.name}` needs to be registered first in the module "
                   )
@@ -1147,7 +1147,7 @@ class IrToTruffle(
                   val targetTpScope = asScope(modWithTargetTp.unsafeAsModule())
                   val targetTp =
                     targetTpScope.getType(conversionMethod.targetTpName, true)
-                  assert(
+                  org.enso.common.Asserts.assertInJvm(
                     targetTp != null,
                     s"Target type should be defined in module ${module.getName}"
                   )
@@ -1163,7 +1163,7 @@ class IrToTruffle(
                         conversionMethod.sourceTpName,
                         true
                       )
-                      assert(
+                      org.enso.common.Asserts.assertInJvm(
                         sourceTp != null,
                         s"Source type should be defined in module ${module.getName}"
                       )
@@ -1172,7 +1172,7 @@ class IrToTruffle(
                           sourceTp,
                           targetTp
                         )
-                      assert(
+                      org.enso.common.Asserts.assertInJvm(
                         conversionFun != null,
                         s"Conversion method `$conversionMethod` should be defined in module ${module.getName}"
                       )
@@ -2570,7 +2570,7 @@ class IrToTruffle(
 
           // Note [Handling Suspended Defaults]
           val defaultedValue = if (arg.suspended && defaultExpression != null) {
-            assert(arg.defaultValue.isDefined)
+            org.enso.common.Asserts.assertInJvm(arg.defaultValue.isDefined)
             val defaultRootNode = ClosureRootNode.build(
               language,
               scope,
diff --git a/lib/java/benchmarks-common/src/main/java/org/enso/interpreter/bench/BenchmarksRunner.java b/lib/java/benchmarks-common/src/main/java/org/enso/interpreter/bench/BenchmarksRunner.java
index 680957228e8c..05ef219deacc 100644
--- a/lib/java/benchmarks-common/src/main/java/org/enso/interpreter/bench/BenchmarksRunner.java
+++ b/lib/java/benchmarks-common/src/main/java/org/enso/interpreter/bench/BenchmarksRunner.java
@@ -5,11 +5,19 @@
 import java.io.IOException;
 import java.util.Collection;
 import java.util.List;
+import org.openjdk.jmh.infra.BenchmarkParams;
+import org.openjdk.jmh.infra.IterationParams;
+import org.openjdk.jmh.results.BenchmarkResult;
+import org.openjdk.jmh.results.IterationResult;
 import org.openjdk.jmh.results.RunResult;
+import org.openjdk.jmh.runner.Defaults;
 import org.openjdk.jmh.runner.Runner;
 import org.openjdk.jmh.runner.RunnerException;
+import org.openjdk.jmh.runner.format.OutputFormat;
+import org.openjdk.jmh.runner.format.OutputFormatFactory;
 import org.openjdk.jmh.runner.options.CommandLineOptionException;
 import org.openjdk.jmh.runner.options.CommandLineOptions;
+import org.openjdk.jmh.runner.options.Options;
 import org.openjdk.jmh.runner.options.OptionsBuilder;
 import org.openjdk.jmh.runner.options.TimeValue;
 
@@ -18,6 +26,9 @@ public class BenchmarksRunner {
   public static final File REPORT_FILE = new File("./bench-report.xml");
 
   public static void run(String[] args) throws RunnerException {
+    if (args.length == 0) {
+      args = new String[] {"--jvmArgs=-Dbench.all=true"};
+    }
     CommandLineOptions cmdOpts = null;
     try {
       cmdOpts = new CommandLineOptions(args);
@@ -31,7 +42,7 @@ public static void run(String[] args) throws RunnerException {
       // Do not report results from `compileOnly` mode
       runCompileOnly(cmdOpts.getIncludes());
     } else {
-      Runner jmhRunner = new Runner(cmdOpts);
+      var jmhRunner = createRunner(cmdOpts);
 
       if (cmdOpts.shouldHelp()) {
         System.err.println("Enso benchmark runner: A modified JMH runner for Enso benchmarks.");
@@ -82,7 +93,7 @@ private static void runCompileOnly(List<String> includes) {
             .forks(0);
     includes.forEach(optsBuilder::include);
     var opts = optsBuilder.build();
-    var runner = new Runner(opts);
+    var runner = createRunner(opts);
     try {
       runner.run();
       System.out.println(
@@ -107,4 +118,84 @@ private static BenchmarkItem reportResult(String label, RunResult result) throws
     Report.writeToFile(report, REPORT_FILE);
     return benchItem;
   }
+
+  private static Runner createRunner(Options cmdOpts) {
+    var output =
+        OutputFormatFactory.createFormatInstance(
+            System.out, cmdOpts.verbosity().orElse(Defaults.VERBOSITY));
+    Runner jmhRunner = new Runner(cmdOpts, new GitHubActionsFormat(output));
+    return jmhRunner;
+  }
+
+  private static final class GitHubActionsFormat implements OutputFormat {
+    private final OutputFormat output;
+
+    GitHubActionsFormat(OutputFormat output) {
+      this.output = output;
+    }
+
+    @Override
+    public void iteration(BenchmarkParams benchParams, IterationParams params, int iteration) {
+      output.iteration(benchParams, params, iteration);
+    }
+
+    @Override
+    public void iterationResult(
+        BenchmarkParams benchParams, IterationParams params, int iteration, IterationResult data) {
+      output.iterationResult(benchParams, params, iteration, data);
+    }
+
+    @Override
+    public void startBenchmark(BenchmarkParams benchParams) {
+      output.println("::group::" + benchParams.getBenchmark());
+    }
+
+    @Override
+    public void endBenchmark(BenchmarkResult result) {
+      output.println("::endgroup::");
+    }
+
+    @Override
+    public void startRun() {
+      output.startRun();
+    }
+
+    @Override
+    public void endRun(Collection<RunResult> result) {
+      output.endRun(result);
+    }
+
+    @Override
+    public void print(String s) {
+      output.print(s);
+    }
+
+    @Override
+    public void println(String s) {
+      output.println(s);
+    }
+
+    @Override
+    public void flush() {
+      output.flush();
+    }
+
+    @Override
+    public void close() {}
+
+    @Override
+    public void verbosePrintln(String s) {
+      output.verbosePrintln(s);
+    }
+
+    @Override
+    public void write(int b) {
+      output.write(b);
+    }
+
+    @Override
+    public void write(byte[] b) throws IOException {
+      output.write(b);
+    }
+  }
 }
diff --git a/lib/java/test-utils/src/main/java/org/enso/test/utils/ContextUtils.java b/lib/java/test-utils/src/main/java/org/enso/test/utils/ContextUtils.java
index fb05b0ea16b2..b59709b4047b 100644
--- a/lib/java/test-utils/src/main/java/org/enso/test/utils/ContextUtils.java
+++ b/lib/java/test-utils/src/main/java/org/enso/test/utils/ContextUtils.java
@@ -162,7 +162,19 @@ public static Value evalModule(Context ctx, CharSequence src, String name, Strin
       var b = Source.newBuilder("enso", src, name);
       s = b.buildLiteral();
     }
-    var module = ctx.eval(s);
+    return evalModule(ctx, s, methodName);
+  }
+
+  /**
+   * Evaluates the given source as if it was in a module with given name.
+   *
+   * @param ctx context to evaluate the module at
+   * @param src The source code of the module
+   * @param methodName name of main method to invoke
+   * @return The value returned from the main method of the unnamed module.
+   */
+  public static Value evalModule(Context ctx, Source src, String methodName) {
+    var module = ctx.eval(src);
     var assocType = module.invokeMember(Module.GET_ASSOCIATED_TYPE);
     var method = module.invokeMember(Module.GET_METHOD, assocType, methodName);
     return "main".equals(methodName) ? method.execute() : method.execute(assocType);
diff --git a/lib/rust/parser/generate-java/java/module-info.java b/lib/rust/parser/generate-java/java/module-info.java
index 3e1085f954e5..0d64592703e5 100644
--- a/lib/rust/parser/generate-java/java/module-info.java
+++ b/lib/rust/parser/generate-java/java/module-info.java
@@ -1,3 +1,5 @@
 module org.enso.syntax {
+  requires org.slf4j;
+
   exports org.enso.syntax2;
 }
diff --git a/lib/rust/parser/generate-java/java/org/enso/syntax2/Parser.java b/lib/rust/parser/generate-java/java/org/enso/syntax2/Parser.java
index 2c375ee84082..04dd5f5b9443 100644
--- a/lib/rust/parser/generate-java/java/org/enso/syntax2/Parser.java
+++ b/lib/rust/parser/generate-java/java/org/enso/syntax2/Parser.java
@@ -2,9 +2,11 @@
 
 import java.io.File;
 import java.net.URISyntaxException;
+import java.nio.BufferUnderflowException;
 import java.nio.ByteBuffer;
 import java.nio.ByteOrder;
 import java.nio.charset.StandardCharsets;
+import org.slf4j.LoggerFactory;
 
 public final class Parser implements AutoCloseable {
   private static void initializeLibraries() {
@@ -75,10 +77,10 @@ private static boolean searchFromDirToTop(Throwable chain, File root, String...
     return false;
   }
 
-  private long state;
+  private long stateUnlessClosed;
 
   private Parser(long stateIn) {
-    state = stateIn;
+    stateUnlessClosed = stateIn;
   }
 
   private static native long allocState();
@@ -115,7 +117,16 @@ public long isIdentOrOperator(CharSequence input) {
     return isIdentOrOperator(inputBuf);
   }
 
+  private long getState() {
+    if (stateUnlessClosed != 0) {
+      return stateUnlessClosed;
+    } else {
+      throw new IllegalStateException("Parser used after close()");
+    }
+  }
+
   public ByteBuffer parseInputLazy(CharSequence input) {
+    var state = getState();
     byte[] inputBytes = input.toString().getBytes(StandardCharsets.UTF_8);
     ByteBuffer inputBuf = ByteBuffer.allocateDirect(inputBytes.length);
     inputBuf.put(inputBytes);
@@ -123,6 +134,7 @@ public ByteBuffer parseInputLazy(CharSequence input) {
   }
 
   public Tree parse(CharSequence input) {
+    var state = getState();
     byte[] inputBytes = input.toString().getBytes(StandardCharsets.UTF_8);
     ByteBuffer inputBuf = ByteBuffer.allocateDirect(inputBytes.length);
     inputBuf.put(inputBytes);
@@ -131,7 +143,13 @@ public Tree parse(CharSequence input) {
     var metadata = getMetadata(state);
     serializedTree.order(ByteOrder.LITTLE_ENDIAN);
     var message = new Message(serializedTree, input, base, metadata);
-    return Tree.deserialize(message);
+    try {
+      return Tree.deserialize(message);
+    } catch (BufferUnderflowException | IllegalArgumentException e) {
+      LoggerFactory.getLogger(this.getClass())
+          .error("Unrecoverable parser failure for: {}", input, e);
+      throw e;
+    }
   }
 
   public static String getWarningMessage(Warning warning) {
@@ -140,7 +158,7 @@ public static String getWarningMessage(Warning warning) {
 
   @Override
   public void close() {
-    freeState(state);
-    state = 0;
+    freeState(stateUnlessClosed);
+    stateUnlessClosed = 0;
   }
 }
diff --git a/lib/scala/bench-processor/src/main/java/org/enso/benchmarks/processor/BenchProcessor.java b/lib/scala/bench-processor/src/main/java/org/enso/benchmarks/processor/BenchProcessor.java
index 74b065c240b3..20bad09d006c 100644
--- a/lib/scala/bench-processor/src/main/java/org/enso/benchmarks/processor/BenchProcessor.java
+++ b/lib/scala/bench-processor/src/main/java/org/enso/benchmarks/processor/BenchProcessor.java
@@ -347,7 +347,19 @@ public void dumpCompilationMessages(IterationParams it) {
                   @TearDown
                   public void checkNoTruffleCompilation(BenchmarkParams params) {
                     if (compilationMessagesFound) {
-                      System.err.println(compilationLog.toString());
+                      var limit = Boolean.getBoolean("bench.all") ? 10 : Integer.MAX_VALUE;
+                      for (var l : compilationLog.toString().split("\\n")) {
+                        var pipe = l.indexOf('|');
+                        if (pipe > 0) {
+                          l = l.substring(0, pipe);
+                        }
+                        System.out.println(l);
+                        if (limit-- <= 0) {
+                          System.out.println("... to see more use:");
+                          System.out.println("benchOnly " + params.getBenchmark());
+                          break;
+                        }
+                      }
                     }
                   }
 
diff --git a/lib/scala/pkg/src/main/scala/org/enso/pkg/Package.scala b/lib/scala/pkg/src/main/scala/org/enso/pkg/Package.scala
index 76b9418a6587..94bc9976e8c7 100644
--- a/lib/scala/pkg/src/main/scala/org/enso/pkg/Package.scala
+++ b/lib/scala/pkg/src/main/scala/org/enso/pkg/Package.scala
@@ -381,97 +381,164 @@ class PackageManager[F](implicit val fileSystem: FileSystem[F]) {
   private def copyResources(pkg: Package[F], template: Template): Unit =
     template match {
       case Template.Default =>
-        val mainEnsoPath = new URI(s"/default/src/${Package.mainFileName}")
-
-        copyResource(
-          mainEnsoPath,
-          pkg.sourceDir.getChild(Package.mainFileName)
-        )
+        copyTemplateFiles(pkg, "default", List(Package.mainFileName), List())
 
       case Template.ColoradoCovid =>
-        val metricsDataPath = new URI(
-          "/colorado_covid/data/CDPHE_COVID19_County_Status_Metrics.csv"
-        )
-        val geoDataPath = new URI("/colorado_covid/data/ColoradoGeoData.db")
-        val mainEnsoPath = new URI(
-          s"/colorado_covid/src/${Package.mainFileName}"
-        )
-
-        pkg.root.getChild("data").createDirectories()
-        copyResource(
-          metricsDataPath,
-          pkg.root
-            .getChild("data")
-            .getChild("CDPHE_COVID19_County_Status_Metrics.csv")
+        val srcFiles = List(
+          Package.mainFileName,
+          "eaep.png",
+          "map.png",
+          "table1.png",
+          "table2.png"
         )
-        copyResource(
-          geoDataPath,
-          pkg.root.getChild("data").getChild("ColoradoGeoData.db")
-        )
-        copyResource(
-          mainEnsoPath,
-          pkg.sourceDir.getChild(Package.mainFileName)
+        val dataFiles = List(
+          "CDPHE_COVID19_County_Status_Metrics.csv",
+          "ColoradoGeoData.db"
         )
+        copyTemplateFiles(pkg, "colorado_covid", srcFiles, dataFiles)
 
       case Template.Kmeans =>
-        val mainEnsoPath = new URI(s"/kmeans/src/${Package.mainFileName}")
+        copyTemplateFiles(pkg, "kmeans", List(Package.mainFileName), List())
 
-        copyResource(
-          mainEnsoPath,
-          pkg.sourceDir.getChild(Package.mainFileName)
+      case Template.NasdaqReturns =>
+        copyTemplateFiles(
+          pkg,
+          "nasdaqreturns",
+          List(Package.mainFileName),
+          List()
         )
 
-      case Template.NasdaqReturns =>
-        val mainEnsoPath = new URI(
-          s"/nasdaqreturns/src/${Package.mainFileName}"
+      case Template.Orders =>
+        val srcFiles = List(
+          Package.mainFileName,
+          "eaep.png",
+          "excel1.png",
+          "excel2.png",
+          "excel3.png",
+          "eyeball_viz.png"
+        )
+        val dataFiles = List(
+          "store_data.xlsx"
         )
+        copyTemplateFiles(pkg, "orders", srcFiles, dataFiles)
 
-        copyResource(
-          mainEnsoPath,
-          pkg.sourceDir.getChild(Package.mainFileName)
+      case Template.Restaurants =>
+        val srcFiles = List(
+          Package.mainFileName,
+          "eaep.png",
+          "map1.png",
+          "map2.png",
+          "table1.png"
         )
+        val dataFiles = List(
+          "la_districts.csv",
+          "mapcolors.json",
+          "restaurants.csv"
+        )
+        copyTemplateFiles(pkg, "restaurants", srcFiles, dataFiles)
 
-      case Template.Orders =>
-        val storeDataPath = new URI("/orders/data/store_data.xlsx")
-        val mainEnsoPath  = new URI(s"/orders/src/${Package.mainFileName}")
+      case Template.Stargazers =>
+        copyTemplateFiles(pkg, "stargazers", List(Package.mainFileName), List())
 
-        pkg.root.getChild("data").createDirectories()
-        copyResource(
-          storeDataPath,
-          pkg.root.getChild("data").getChild("store_data.xlsx")
+      case Template.MonthlySales =>
+        val srcFiles = List(
+          Package.mainFileName,
+          "eaep.png",
+          "excel1.png"
         )
-        copyResource(
-          mainEnsoPath,
-          pkg.sourceDir.getChild(Package.mainFileName)
+        val dataFiles = List(
+          "Sales_Sample_Data.xlsx"
         )
+        copyTemplateFiles(pkg, "monthly_sales", srcFiles, dataFiles)
 
-      case Template.Restaurants =>
-        val laDistrictsDataPath = new URI("/restaurants/data/la_districts.csv")
-        val restaurantsDataPath = new URI("/restaurants/data/restaurants.csv")
-        val mainEnsoPath        = new URI(s"/restaurants/src/${Package.mainFileName}")
+      case Template.BankHolidayRain =>
+        val srcFiles = List(
+          Package.mainFileName,
+          "eaep.png",
+          "bankholiday.png"
+        )
+        copyTemplateFiles(pkg, "bank_holiday_rain", srcFiles, List())
+
+      case Template.GettingStartedReading =>
+        val srcFiles = List(
+          Package.mainFileName,
+          "eags.png",
+          "loadfile.gif",
+          "sheets.gif",
+          "showdata.gif",
+          "simpleexpression.gif",
+          "table_solution.png",
+          "table_viz.png"
+        )
+        copyTemplateFiles(pkg, "getting_started_reading", srcFiles, List())
+
+      case Template.GettingStartedAggregating =>
+        val srcFiles = List(
+          Package.mainFileName,
+          "answer_table.png",
+          "eags.png",
+          "set.gif",
+          "table1.png"
+        )
+        val dataFiles = List(
+          "sample_bank_data.xlsx"
+        )
+        copyTemplateFiles(
+          pkg,
+          "getting_started_aggregating",
+          srcFiles,
+          dataFiles
+        )
 
-        pkg.root.getChild("data").createDirectories()
-        copyResource(
-          laDistrictsDataPath,
-          pkg.root.getChild("data").getChild("la_districts.csv")
+      case Template.GettingStartedCleansing =>
+        val srcFiles = List(
+          Package.mainFileName,
+          "eags.png"
         )
-        copyResource(
-          restaurantsDataPath,
-          pkg.root.getChild("data").getChild("restaurants.csv")
+        val dataFiles = List(
+          "crm_data.csv"
         )
-        copyResource(
-          mainEnsoPath,
-          pkg.sourceDir.getChild(Package.mainFileName)
+        copyTemplateFiles(pkg, "getting_started_cleansing", srcFiles, dataFiles)
+
+      case Template.GettingStartedSelecting =>
+        val srcFiles = List(
+          Package.mainFileName,
+          "eags.png",
+          "table1.png",
+          "table2.png"
         )
+        val dataFiles = List(
+          "crm_data.csv",
+          "Customer_Data.xlsx"
+        )
+        copyTemplateFiles(pkg, "getting_started_selecting", srcFiles, dataFiles)
+    }
 
-      case Template.Stargazers =>
-        val mainEnsoPath = new URI(s"/stargazers/src/${Package.mainFileName}")
+  private def copyTemplateFiles(
+    pkg: Package[F],
+    project_name: String,
+    srcFiles: List[String],
+    dataFiles: List[String]
+  ): Unit = {
+    srcFiles.foreach { file =>
+      val srcPath = new URI(s"/$project_name/src/$file")
+      copyResource(
+        srcPath,
+        pkg.sourceDir.getChild(file)
+      )
+    }
 
+    if (dataFiles.nonEmpty) {
+      pkg.root.getChild("data").createDirectories()
+      dataFiles.foreach { file =>
+        val dataPath = new URI(s"/$project_name/data/$file")
         copyResource(
-          mainEnsoPath,
-          pkg.sourceDir.getChild(Package.mainFileName)
+          dataPath,
+          pkg.root.getChild("data").getChild(file)
         )
+      }
     }
+  }
 
   /** Copy the resource to provided resource.
     *
diff --git a/lib/scala/pkg/src/main/scala/org/enso/pkg/Template.scala b/lib/scala/pkg/src/main/scala/org/enso/pkg/Template.scala
index e063b093c243..87514323d767 100644
--- a/lib/scala/pkg/src/main/scala/org/enso/pkg/Template.scala
+++ b/lib/scala/pkg/src/main/scala/org/enso/pkg/Template.scala
@@ -45,6 +45,30 @@ object Template {
     override val name = "stargazers"
   }
 
+  case object MonthlySales extends Template {
+    override val name = "monthly_sales"
+  }
+
+  case object BankHolidayRain extends Template {
+    override val name = "bank_holiday_rain"
+  }
+
+  case object GettingStartedReading extends Template {
+    override val name = "getting_started_reading"
+  }
+
+  case object GettingStartedAggregating extends Template {
+    override val name = "getting_started_aggregating"
+  }
+
+  case object GettingStartedCleansing extends Template {
+    override val name = "getting_started_cleansing"
+  }
+
+  case object GettingStartedSelecting extends Template {
+    override val name = "getting_started_selecting"
+  }
+
   val allTemplates = Seq(
     Default,
     Orders,
@@ -52,6 +76,12 @@ object Template {
     Stargazers,
     ColoradoCovid,
     Kmeans,
-    NasdaqReturns
+    NasdaqReturns,
+    MonthlySales,
+    BankHolidayRain,
+    GettingStartedReading,
+    GettingStartedAggregating,
+    GettingStartedCleansing,
+    GettingStartedSelecting
   )
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b62de1813bad..4888a578de27 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,10 +75,13 @@ importers:
         version: 5.55.0(react@18.3.1)
       '@tanstack/vue-query':
         specifier: '>= 5.54.0 < 5.56.0'
-        version: 5.54.2(vue@3.4.31(typescript@5.5.3))
+        version: 5.54.2(vue@3.5.2(typescript@5.5.3))
       ajv:
         specifier: ^8.12.0
         version: 8.16.0
+      amazon-cognito-identity-js:
+        specifier: 6.3.6
+        version: 6.3.6
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -88,12 +91,18 @@ importers:
       framer-motion:
         specifier: 11.3.0
         version: 11.3.0(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      input-otp:
+        specifier: 1.2.4
+        version: 1.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       is-network-error:
         specifier: ^1.0.1
         version: 1.1.0
       monaco-editor:
         specifier: 0.48.0
         version: 0.48.0
+      qrcode.react:
+        specifier: 3.1.0
+        version: 3.1.0(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -157,7 +166,7 @@ importers:
         version: 1.45.0
       '@react-types/shared':
         specifier: ^3.22.1
-        version: 3.23.1(react@18.3.1)
+        version: 3.24.1(react@18.3.1)
       '@tanstack/react-query-devtools':
         specifier: 5.45.1
         version: 5.45.1(@tanstack/react-query@5.55.0(react@18.3.1))(react@18.3.1)
@@ -208,7 +217,7 @@ importers:
         version: 1.45.0
       postcss:
         specifier: ^8.4.29
-        version: 8.4.39
+        version: 8.4.45
       prettier-plugin-organize-imports:
         specifier: ^4.0.0
         version: 4.0.0(prettier@3.3.2)(typescript@5.5.3)(vue-tsc@2.0.24(typescript@5.5.3))
@@ -237,23 +246,23 @@ importers:
   app/gui2:
     dependencies:
       '@ag-grid-community/client-side-row-model':
-        specifier: ^30.2.0
-        version: 30.2.1
+        specifier: ^31.1.1
+        version: 31.3.4
       '@ag-grid-community/core':
-        specifier: ^30.2.0
-        version: 30.2.1
+        specifier: ^31.1.1
+        version: 31.3.4
       '@ag-grid-community/styles':
-        specifier: ^30.2.0
-        version: 30.2.1
+        specifier: ^31.1.1
+        version: 31.3.4
       '@ag-grid-enterprise/core':
-        specifier: ^30.2.0
-        version: 30.2.1
+        specifier: ^31.1.1
+        version: 31.3.4
       '@ag-grid-enterprise/range-selection':
-        specifier: ^30.2.1
-        version: 30.2.1
+        specifier: ^31.1.1
+        version: 31.3.4
       '@babel/parser':
         specifier: ^7.24.7
-        version: 7.24.7
+        version: 7.25.6
       '@codemirror/commands':
         specifier: ^6.6.0
         version: 6.6.0
@@ -277,7 +286,7 @@ importers:
         version: 0.0.8(vitest@1.6.0(@types/node@20.11.21)(jsdom@24.1.0)(lightningcss@1.25.1))
       '@floating-ui/vue':
         specifier: ^1.0.6
-        version: 1.1.0(vue@3.4.31(typescript@5.5.3))
+        version: 1.1.0(vue@3.5.2(typescript@5.5.3))
       '@lexical/code':
         specifier: ^0.16.0
         version: 0.16.0
@@ -316,19 +325,22 @@ importers:
         version: 1.4.0
       '@tanstack/vue-query':
         specifier: '>= 5.54.0 < 5.56.0'
-        version: 5.54.2(vue@3.4.31(typescript@5.5.3))
+        version: 5.54.2(vue@3.5.2(typescript@5.5.3))
       '@vueuse/core':
         specifier: ^10.4.1
-        version: 10.11.0(vue@3.4.31(typescript@5.5.3))
+        version: 10.11.0(vue@3.5.2(typescript@5.5.3))
+      '@vueuse/gesture':
+        specifier: ^2.0.0
+        version: 2.0.0(vue@3.5.2(typescript@5.5.3))
       ag-grid-community:
-        specifier: ^30.2.1
-        version: 30.2.1
+        specifier: ^31.1.1
+        version: 31.3.4
       ag-grid-enterprise:
-        specifier: ^30.2.1
-        version: 30.2.1
+        specifier: ^31.1.1
+        version: 31.3.4
       ag-grid-vue3:
-        specifier: ^30.2.1
-        version: 30.2.1(ag-grid-community@30.2.1)(vue@3.4.31(typescript@5.5.3))
+        specifier: ^31.1.1
+        version: 31.3.4(typescript@5.5.3)
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.1)
@@ -358,16 +370,16 @@ importers:
         version: 0.2.94
       magic-string:
         specifier: ^0.30.3
-        version: 0.30.10
+        version: 0.30.11
       murmurhash:
         specifier: ^2.0.1
         version: 2.0.1
       postcss-inline-svg:
         specifier: ^6.0.0
-        version: 6.0.0(postcss@8.4.39)
+        version: 6.0.0(postcss@8.4.45)
       postcss-nesting:
         specifier: ^12.0.1
-        version: 12.1.5(postcss@8.4.39)
+        version: 12.1.5(postcss@8.4.45)
       react-toastify:
         specifier: ^9.1.3
         version: 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -378,8 +390,8 @@ importers:
         specifier: ^2.3.18
         version: 2.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       vue:
-        specifier: ^3.4.19
-        version: 3.4.31(typescript@5.5.3)
+        specifier: ^3.5.2
+        version: 3.5.2(typescript@5.5.3)
       vue-component-type-helpers:
         specifier: ^2.0.29
         version: 2.0.29
@@ -419,7 +431,7 @@ importers:
         version: 8.57.0
       '@histoire/plugin-vue':
         specifier: ^0.17.12
-        version: 0.17.17(histoire@0.17.17(@types/node@20.11.21)(lightningcss@1.25.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)))(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.4.31(typescript@5.5.3))
+        version: 0.17.17(histoire@0.17.17(@types/node@20.11.21)(lightningcss@1.25.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)))(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.5.2(typescript@5.5.3))
       '@open-rpc/server-js':
         specifier: ^1.9.4
         version: 1.9.5
@@ -473,7 +485,7 @@ importers:
         version: 4.3.1(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
-        version: 5.0.5(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.4.31(typescript@5.5.3))
+        version: 5.0.5(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.5.2(typescript@5.5.3))
       '@vitest/coverage-v8':
         specifier: ^1.3.1
         version: 1.6.0(vitest@1.6.0(@types/node@20.11.21)(jsdom@24.1.0)(lightningcss@1.25.1))
@@ -509,7 +521,7 @@ importers:
         version: 9.26.0(eslint@8.57.0)
       floating-vue:
         specifier: ^2.0.0-beta.24
-        version: 2.0.0(vue@3.4.31(typescript@5.5.3))
+        version: 2.0.0(vue@3.5.2(typescript@5.5.3))
       hash-wasm:
         specifier: ^4.11.0
         version: 4.11.0
@@ -560,7 +572,7 @@ importers:
         version: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
       vite-plugin-vue-devtools:
         specifier: 7.3.7
-        version: 7.3.7(rollup@4.18.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.4.31(typescript@5.5.3))
+        version: 7.3.7(rollup@4.18.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.5.2(typescript@5.5.3))
       vite-plugin-wasm:
         specifier: ^3.3.0
         version: 3.3.0(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))
@@ -569,7 +581,7 @@ importers:
         version: 1.6.0(@types/node@20.11.21)(jsdom@24.1.0)(lightningcss@1.25.1)
       vue-react-wrapper:
         specifier: ^0.3.1
-        version: 0.3.1(vue@3.4.31(typescript@5.5.3))
+        version: 0.3.1(vue@3.5.2(typescript@5.5.3))
       vue-tsc:
         specifier: ^2.0.24
         version: 2.0.24(typescript@5.5.3)
@@ -602,7 +614,7 @@ importers:
         version: 1.5.2
       semver:
         specifier: ^7.6.2
-        version: 7.6.2
+        version: 7.6.3
       string-length:
         specifier: ^5.0.1
         version: 5.0.1
@@ -690,7 +702,7 @@ importers:
         version: 5.54.1
       '@tanstack/vue-query':
         specifier: '>= 5.54.0 < 5.56.0'
-        version: 5.54.2(vue@3.4.31(typescript@5.5.3))
+        version: 5.54.2(vue@3.5.2(typescript@5.5.3))
       idb-keyval:
         specifier: ^6.2.1
         version: 6.2.1
@@ -701,8 +713,8 @@ importers:
         specifier: ^1.3.1
         version: 1.6.0(@types/node@20.11.21)(jsdom@24.1.0)(lightningcss@1.25.1)
       vue:
-        specifier: ^3.4.19
-        version: 3.4.31(typescript@5.5.3)
+        specifier: ^3.5.2
+        version: 3.5.2(typescript@5.5.3)
 
   app/ide-desktop/icons:
     devDependencies:
@@ -725,7 +737,7 @@ importers:
     dependencies:
       debug:
         specifier: ^4.3.6
-        version: 4.3.6
+        version: 4.3.7
       fast-diff:
         specifier: ^1.3.0
         version: 1.3.0
@@ -821,7 +833,7 @@ importers:
         version: 4.1.2
       debug:
         specifier: ^4.3.6
-        version: 4.3.6
+        version: 4.3.7
       fast-diff:
         specifier: ^1.3.0
         version: 1.3.0
@@ -902,20 +914,20 @@ packages:
   7zip-bin@5.2.0:
     resolution: {integrity: sha512-ukTPVhqG4jNzMro2qA9HSCSSVJN3aN7tlb+hfqYCt3ER0yWroeA2VR38MNrOHLQ/cVj+DaIMad0kFCtWWowh/A==}
 
-  '@ag-grid-community/client-side-row-model@30.2.1':
-    resolution: {integrity: sha512-LeFAsq2RuDXwjoUVLqlUgBYTHyCbyQozaQ4JY8SzBEABc8bOanIfsY3YONUckn+KWtRUrH5nGYA8bBeGrc20MQ==}
+  '@ag-grid-community/client-side-row-model@31.3.4':
+    resolution: {integrity: sha512-lbrbhwSoY1/N2CiOQBa322gVnrhyrbzyG7cvbOef3itAiaLUzQ03PWBw09d9mj+/0hnqMs386ZuGX15FWJaTqQ==}
 
-  '@ag-grid-community/core@30.2.1':
-    resolution: {integrity: sha512-jGRBfRFsLwxch8GJGjbVI2FVbB+/fy1s4mm8//+kOkcPFlq4BbLFELvU4Kupwk1YkhduxUC50GTYyFzmF0rSIQ==}
+  '@ag-grid-community/core@31.3.4':
+    resolution: {integrity: sha512-Fz7P4lMAYDo9rG6jOA8OXlAXta/4E+PiCdjT7M9OloaXAJtU47oO4f3VKV7rdbVCC8SGSo0cBCateddQTAFCNQ==}
 
-  '@ag-grid-community/styles@30.2.1':
-    resolution: {integrity: sha512-Tvs7Rtz4aSA5H2Vlerh6BCLIEa93jR0KLVRVwYOIHzwaNxovKYeMs/e8fr2comxsTAPxqozrMpzQ8Oa/RHKC7g==}
+  '@ag-grid-community/styles@31.3.4':
+    resolution: {integrity: sha512-5pgt/Qq/GxiJi59UA17ltG5U4r0J+GB3S/QCysJFi6kmgmCDsbCfisekTwSh0xxOGO+OIhejoqsOuEnTcw78kg==}
 
-  '@ag-grid-enterprise/core@30.2.1':
-    resolution: {integrity: sha512-POVdYwMho+WPQ1wrNwQwX4ihGvdq+UbLIHQfWnnZn5c2FLFiUmlxAhCZAXXiOeXq5MDHBKqKrTRemb9TUbBRcg==}
+  '@ag-grid-enterprise/core@31.3.4':
+    resolution: {integrity: sha512-9zjxVNih+gW3bU2aufcTjwUh2XzlYkts5kE4S7CTDIo3Dke9iaeg4KlyskprGiZjYmJMroxkl9CSWUGUUAN1rQ==}
 
-  '@ag-grid-enterprise/range-selection@30.2.1':
-    resolution: {integrity: sha512-zY/yHnrWd5RLXP2QfCYyUV6VZK76NrnHwKZrsnN4SBpHSI3dV2yO4GVJGu6SVEJM+6H1yNqTriJjA/hTPfmuLQ==}
+  '@ag-grid-enterprise/range-selection@31.3.4':
+    resolution: {integrity: sha512-XSpGAeNP3TufydW7nE2K5cyNVX1O0Ye/8WbZU5cN3mbyjpzUQlO3RQl/iIw5YqlTRfUN4Ll6AUDC4vMj4SzQDA==}
 
   '@akryum/tinypool@0.3.1':
     resolution: {integrity: sha512-nznEC1ZA/m3hQDEnrGQ4c5gkaa9pcaVnw4LFJyzBAaR7E3nfiAPEHS3otnSafpZouVnoKeITl5D+2LsnwlnK8g==}
@@ -1144,26 +1156,14 @@ packages:
     resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.24.7':
-    resolution: {integrity: sha512-qJzAIcv03PyaWqxRgO4mSU3lihncDT296vnyuE2O8uA4w3UHWI4S3hgeZd1L8W1Bft40w9JxJ2b412iDUFFRhw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/compat-data@7.25.4':
     resolution: {integrity: sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.24.7':
-    resolution: {integrity: sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/core@7.25.2':
     resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.24.7':
-    resolution: {integrity: sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/generator@7.25.6':
     resolution: {integrity: sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==}
     engines: {node: '>=6.9.0'}
@@ -1172,10 +1172,6 @@ packages:
     resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.24.7':
-    resolution: {integrity: sha512-ctSdRHBi20qWOfy27RUb4Fhp07KSJ3sXcuSvTrXrc4aG8NSYDo1ici3Vhg9bg69y5bj0Mr1lh0aeEgTvc12rMg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-compilation-targets@7.25.2':
     resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
     engines: {node: '>=6.9.0'}
@@ -1194,10 +1190,6 @@ packages:
     resolution: {integrity: sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-hoist-variables@7.24.7':
-    resolution: {integrity: sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-member-expression-to-functions@7.24.7':
     resolution: {integrity: sha512-LGeMaf5JN4hAT471eJdBs/GK1DoYIJ5GCtZN/EsL6KUiiDZOvO/eKE11AMZJa2zP4zk4qe9V2O/hxAmkRc8p6w==}
     engines: {node: '>=6.9.0'}
@@ -1210,12 +1202,6 @@ packages:
     resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.24.7':
-    resolution: {integrity: sha512-1fuJEwIrp+97rM4RWdO+qrRsZlAeL1lQJoPqtCYWv0NL115XM93hIH4CSRln2w52SqvmY5hqdtauB6QFCDiZNQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
   '@babel/helper-module-transforms@7.25.2':
     resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
     engines: {node: '>=6.9.0'}
@@ -1248,10 +1234,6 @@ packages:
     resolution: {integrity: sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.24.7':
-    resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.24.8':
     resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
     engines: {node: '>=6.9.0'}
@@ -1260,18 +1242,10 @@ packages:
     resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.24.7':
-    resolution: {integrity: sha512-yy1/KvjhV/ZCL+SM7hBrvnZJ3ZuT9OuZgIJAGpPEToANvc3iM6iDvBnRjtElWibHU6n8/LPR/EjX9EtIEYO3pw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-option@7.24.8':
     resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.24.7':
-    resolution: {integrity: sha512-NlmJJtvcw72yRJRcnCmGvSi+3jDEg8qFu3z0AFoymmzLx5ERVWyzd9kVXr7Th9/8yIJi2Zc6av4Tqz3wFs8QWg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helpers@7.25.6':
     resolution: {integrity: sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==}
     engines: {node: '>=6.9.0'}
@@ -1280,11 +1254,6 @@ packages:
     resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.24.7':
-    resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/parser@7.25.6':
     resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==}
     engines: {node: '>=6.0.0'}
@@ -1347,26 +1316,14 @@ packages:
     resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.24.7':
-    resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/template@7.25.0':
     resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.24.7':
-    resolution: {integrity: sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/traverse@7.25.6':
     resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.24.7':
-    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.25.6':
     resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
     engines: {node: '>=6.9.0'}
@@ -2053,8 +2010,8 @@ packages:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
@@ -2677,11 +2634,6 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
 
-  '@react-types/shared@3.23.1':
-    resolution: {integrity: sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-
   '@react-types/shared@3.24.1':
     resolution: {integrity: sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==}
     peerDependencies:
@@ -3327,17 +3279,17 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@vue/compiler-core@3.4.31':
-    resolution: {integrity: sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==}
+  '@vue/compiler-core@3.5.2':
+    resolution: {integrity: sha512-1aP7FL2GkqfcskHWGg3lfWQpJnrmewKc+rNJ/hq9WNaAw4BEyJ5QbNChnqmbw+tJ409zdy1XWmUeXXMrCKJcQQ==}
 
-  '@vue/compiler-dom@3.4.31':
-    resolution: {integrity: sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==}
+  '@vue/compiler-dom@3.5.2':
+    resolution: {integrity: sha512-QY4DpT8ZIUyu/ZA5gErpSEDocGNEbHmpkZIC/d5jbp/rUF0iOJNigAy3HCCKc0PMMhDlrcysO3ufQ6Ab4MpEcQ==}
 
-  '@vue/compiler-sfc@3.4.31':
-    resolution: {integrity: sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==}
+  '@vue/compiler-sfc@3.5.2':
+    resolution: {integrity: sha512-vErEtybSU290LbMW+ChYllI9tNJEdTW1oU+8cZWINZyjlWeTSa9YqDl4/pZJSnozOI+HmcaC1Vz2eFKmXNSXZA==}
 
-  '@vue/compiler-ssr@3.4.31':
-    resolution: {integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==}
+  '@vue/compiler-ssr@3.5.2':
+    resolution: {integrity: sha512-vMtA4tQK/AM3UAYJsmouQzQpgG+h9TKiD5BV+Zt+ZyAMdicxzSEEFGWf/CykRnDpqj9fMfIHPhOezJVNxiXe2A==}
 
   '@vue/devtools-api@6.6.3':
     resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
@@ -3378,22 +3330,22 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.4.31':
-    resolution: {integrity: sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==}
+  '@vue/reactivity@3.5.2':
+    resolution: {integrity: sha512-lJwWL5bNht+2vIwU/+lnGdH+FKFxzz6z8WkoIJityPLiasWU+HDUvEsC7gm3JFwbTf7Kk+Nr9kJMaPy0HXwwxQ==}
 
-  '@vue/runtime-core@3.4.31':
-    resolution: {integrity: sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==}
+  '@vue/runtime-core@3.5.2':
+    resolution: {integrity: sha512-oU+i9sJjGEMfEhlrJ7SZv7CdSIgUNyBHnWHa0SqU2RF48V3/ATajzpWq1/DkiVJ1mtx+cQFAMKs8s/3cB3YlLQ==}
 
-  '@vue/runtime-dom@3.4.31':
-    resolution: {integrity: sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==}
+  '@vue/runtime-dom@3.5.2':
+    resolution: {integrity: sha512-2qvysn+oR0QnFKaWZxQ90iVpWAK/WPpYmODHCv24IDXjsBrdHbjLBj9s6YBdPaMuQhs0LNsmhsgZYZBkszLg6g==}
 
-  '@vue/server-renderer@3.4.31':
-    resolution: {integrity: sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==}
+  '@vue/server-renderer@3.5.2':
+    resolution: {integrity: sha512-3POhYCA8KfbmuDuUiNbMXnpdh9pwE4SvAqo7VvACjklLkf3AaMkY3TvV7APeEa/WQezrnL+E4X2ASpJsKeS4cQ==}
     peerDependencies:
-      vue: 3.4.31
+      vue: 3.5.2
 
-  '@vue/shared@3.4.31':
-    resolution: {integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==}
+  '@vue/shared@3.5.2':
+    resolution: {integrity: sha512-Ce89WNFBzcDca/AgFTxgX4/K4iAyF7oFIp8Z5aBbFBNbtpwnQr+5pZOoHndxnjE2h+YFcipVMzs9UL11XB6dwA==}
 
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
@@ -3404,6 +3356,15 @@ packages:
   '@vueuse/core@10.11.0':
     resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}
 
+  '@vueuse/gesture@2.0.0':
+    resolution: {integrity: sha512-+F0bhhd8j+gxHaXG4fJgfokrkFfWenQ10MtrWOJk68B5UaTwtJm4EpsZFiVdluA3jpKExG6H+HtroJpvO7Qx0A==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.1
+      vue: ^2.0.0 || >=3.0.0-rc.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@vueuse/metadata@10.11.0':
     resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}
 
@@ -3440,17 +3401,17 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  ag-grid-community@30.2.1:
-    resolution: {integrity: sha512-1slonXskJbbI9ybhTx//4YKfJpZVAEnHL8dui1rQJRSXKByUi+/f7XtvkLsbgBkawoWbqvRAySjYtvz80+kBfA==}
+  ag-charts-community@9.3.2:
+    resolution: {integrity: sha512-jw2llxTYzGAZ24m7eQsKS24BnJBhspZKsL03DbqH0wxLepbEcC3eeWICe+02TBQCbFVsWmSsYukjzQg3FkVWRw==}
 
-  ag-grid-enterprise@30.2.1:
-    resolution: {integrity: sha512-sGeyAfZ416dBlJaxIHB6hGTJG6QzuajXnDAtVuQlOLUuV4/TXVQoh5SJkiKBpWXukZQJPE4VD/5IkQ1tXh96/w==}
+  ag-grid-community@31.3.4:
+    resolution: {integrity: sha512-jOxQO86C6eLnk1GdP24HB6aqaouFzMWizgfUwNY5MnetiWzz9ZaAmOGSnW/XBvdjXvC5Fpk3gSbvVKKQ7h9kBw==}
 
-  ag-grid-vue3@30.2.1:
-    resolution: {integrity: sha512-uIsBv5H7Nu6ao1V7cuReVj27gFdlK4kfvo/4M6AWmYswghMpc1GwzczZNV8HUypGcwxONW9YSfr8zabYQNGcAg==}
-    peerDependencies:
-      ag-grid-community: ~30.2.1
-      vue: ^3.0.0
+  ag-grid-enterprise@31.3.4:
+    resolution: {integrity: sha512-kreGRsFjz41APXXchLcQFtginnrmIGQYH48p7ydz33x8v+aja06HS5yEM6NP8j+VVHX43LeXnsl5Y4TLRgSoeg==}
+
+  ag-grid-vue3@31.3.4:
+    resolution: {integrity: sha512-MFsWKeWBuzexc3hkOtDsZw4xkXfVT6B267DcUmZGy92otgGfd/I8qMKhGr1qnUnel9Jy5OKeBS+jQusfmO2/SA==}
 
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
@@ -3600,9 +3561,6 @@ packages:
   async@2.6.4:
     resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
 
-  async@3.2.5:
-    resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
-
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
@@ -3689,11 +3647,6 @@ packages:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
 
-  browserslist@4.23.1:
-    resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
   browserslist@4.23.3:
     resolution: {integrity: sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -3781,9 +3734,6 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
-  caniuse-lite@1.0.30001639:
-    resolution: {integrity: sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==}
-
   caniuse-lite@1.0.30001658:
     resolution: {integrity: sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==}
 
@@ -3943,6 +3893,10 @@ packages:
   connected@0.0.2:
     resolution: {integrity: sha512-J8DB7618GkIYjc1RCxSdG3vffhhYRwHNEckjOGfwAbabQIMgKsL5c54IaWtisulEwoOEbEODEUak4kyJP2GJ/Q==}
 
+  consola@3.2.3:
+    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   constant-case@3.0.4:
     resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
 
@@ -4194,15 +4148,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.3.6:
-    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.3.7:
     resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
     engines: {node: '>=6.0'}
@@ -4398,9 +4343,6 @@ packages:
   electron-publish@24.13.1:
     resolution: {integrity: sha512-2ZgdEqJ8e9D17Hwp5LEq5mLQPjqU3lv/IALvgp+4W8VeNhryfGhYEQC/PgDPMrnWUp+l60Ou5SJLsu+k4mhQ8A==}
 
-  electron-to-chromium@1.4.815:
-    resolution: {integrity: sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==}
-
   electron-to-chromium@1.5.16:
     resolution: {integrity: sha512-2gQpi2WYobXmz2q23FrOBYTLcI1O/P4heW3eqX+ldmPVDQELRqhiebV380EhlGG12NtnX1qbK/FHpN0ba+7bLA==}
 
@@ -4517,10 +4459,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
-    engines: {node: '>=6'}
-
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -5141,6 +5079,12 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
+  input-otp@1.2.4:
+    resolution: {integrity: sha512-md6rhmD+zmMnUh5crQNSQxq3keBRYvE3odbr4Qb9g2NWzQv9azi+t1a3X4TBTbh98fsGHgEEJlzbe1q860uGCA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
   install@0.13.0:
     resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==}
     engines: {node: '>= 0.10'}
@@ -5736,8 +5680,8 @@ packages:
   magic-bytes.js@1.10.0:
     resolution: {integrity: sha512-/k20Lg2q8LE5xiaaSkMXk4sfvI+9EGEykFS4b0CHHGWqDYU0bGUFSwchNOMA56D7TCs9GwVTkqe9als1/ns8UQ==}
 
-  magic-string@0.30.10:
-    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
+  magic-string@0.30.11:
+    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
   magicast@0.3.4:
     resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
@@ -5918,9 +5862,6 @@ packages:
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
-  ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -5988,9 +5929,6 @@ packages:
     resolution: {integrity: sha512-FAyICv0sIRJxVp3GW5fzgaf9jwwRQxAKDJlmNFUL5hOy+W4X/I5AypyHoq0DXXbo9o/gt79gj++4cMr4jVWE/w==}
     engines: {node: '>=4.0.0'}
 
-  node-releases@2.0.14:
-    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
-
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
@@ -6220,9 +6158,6 @@ packages:
     resolution: {integrity: sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==}
     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
-  picocolors@1.0.1:
-    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
-
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
@@ -6336,8 +6271,8 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.39:
-    resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
+  postcss@8.4.45:
+    resolution: {integrity: sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==}
     engines: {node: ^10 || ^12 || >=14}
 
   prebuild-install@7.1.2:
@@ -6474,6 +6409,11 @@ packages:
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
+  qrcode.react@3.1.0:
+    resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   qs@6.11.0:
     resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
     engines: {node: '>=0.6'}
@@ -6771,11 +6711,6 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.6.2:
-    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   semver@7.6.3:
     resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
     engines: {node: '>=10'}
@@ -7305,11 +7240,9 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  update-browserslist-db@1.0.16:
-    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
+  upath@2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
 
   update-browserslist-db@1.1.0:
     resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
@@ -7505,17 +7438,6 @@ packages:
       '@vue/composition-api':
         optional: true
 
-  vue-demi@0.14.8:
-    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
-    engines: {node: '>=12'}
-    hasBin: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -7542,8 +7464,8 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
-  vue@3.4.31:
-    resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
+  vue@3.5.2:
+    resolution: {integrity: sha512-w1YB4lAwC9ByH6AnFY0JvZF+y70Usul9jDfKIKtM5xA97q/JPS5R7mqq0fhA6D2PQxYPZdgb5jzFKLyOga5pnw==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -7771,22 +7693,25 @@ snapshots:
 
   7zip-bin@5.2.0: {}
 
-  '@ag-grid-community/client-side-row-model@30.2.1':
+  '@ag-grid-community/client-side-row-model@31.3.4':
     dependencies:
-      '@ag-grid-community/core': 30.2.1
+      '@ag-grid-community/core': 31.3.4
+      tslib: 2.6.3
 
-  '@ag-grid-community/core@30.2.1': {}
+  '@ag-grid-community/core@31.3.4':
+    dependencies:
+      tslib: 2.6.3
 
-  '@ag-grid-community/styles@30.2.1': {}
+  '@ag-grid-community/styles@31.3.4': {}
 
-  '@ag-grid-enterprise/core@30.2.1':
+  '@ag-grid-enterprise/core@31.3.4':
     dependencies:
-      '@ag-grid-community/core': 30.2.1
+      '@ag-grid-community/core': 31.3.4
 
-  '@ag-grid-enterprise/range-selection@30.2.1':
+  '@ag-grid-enterprise/range-selection@31.3.4':
     dependencies:
-      '@ag-grid-community/core': 30.2.1
-      '@ag-grid-enterprise/core': 30.2.1
+      '@ag-grid-community/core': 31.3.4
+      '@ag-grid-enterprise/core': 31.3.4
 
   '@akryum/tinypool@0.3.1': {}
 
@@ -8157,32 +8082,10 @@ snapshots:
   '@babel/code-frame@7.24.7':
     dependencies:
       '@babel/highlight': 7.24.7
-      picocolors: 1.0.1
-
-  '@babel/compat-data@7.24.7': {}
+      picocolors: 1.1.0
 
   '@babel/compat-data@7.25.4': {}
 
-  '@babel/core@7.24.7':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.7
-      '@babel/helper-module-transforms': 7.24.7(@babel/core@7.24.7)
-      '@babel/helpers': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/template': 7.24.7
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
-      convert-source-map: 2.0.0
-      debug: 4.3.6
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/core@7.25.2':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -8203,13 +8106,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
-
   '@babel/generator@7.25.6':
     dependencies:
       '@babel/types': 7.25.6
@@ -8219,15 +8115,7 @@ snapshots:
 
   '@babel/helper-annotate-as-pure@7.24.7':
     dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/helper-compilation-targets@7.24.7':
-    dependencies:
-      '@babel/compat-data': 7.24.7
-      '@babel/helper-validator-option': 7.24.7
-      browserslist: 4.23.1
-      lru-cache: 5.1.1
-      semver: 6.3.1
+      '@babel/types': 7.25.6
 
   '@babel/helper-compilation-targets@7.25.2':
     dependencies:
@@ -8237,15 +8125,15 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.24.7(@babel/core@7.24.7)':
+  '@babel/helper-create-class-features-plugin@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-function-name': 7.24.7
       '@babel/helper-member-expression-to-functions': 7.24.7
       '@babel/helper-optimise-call-expression': 7.24.7
-      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.7)
+      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.25.2)
       '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
       '@babel/helper-split-export-declaration': 7.24.7
       semver: 6.3.1
@@ -8254,43 +8142,28 @@ snapshots:
 
   '@babel/helper-environment-visitor@7.24.7':
     dependencies:
-      '@babel/types': 7.24.7
+      '@babel/types': 7.25.6
 
   '@babel/helper-function-name@7.24.7':
     dependencies:
-      '@babel/template': 7.24.7
-      '@babel/types': 7.24.7
-
-  '@babel/helper-hoist-variables@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.6
 
   '@babel/helper-member-expression-to-functions@7.24.7':
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-module-imports@7.22.15':
     dependencies:
-      '@babel/types': 7.24.7
+      '@babel/types': 7.25.6
 
   '@babel/helper-module-imports@7.24.7':
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-simple-access': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
     transitivePeerDependencies:
       - supports-color
 
@@ -8306,13 +8179,13 @@ snapshots:
 
   '@babel/helper-optimise-call-expression@7.24.7':
     dependencies:
-      '@babel/types': 7.24.7
+      '@babel/types': 7.25.6
 
   '@babel/helper-plugin-utils@7.24.7': {}
 
-  '@babel/helper-replace-supers@7.24.7(@babel/core@7.24.7)':
+  '@babel/helper-replace-supers@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-member-expression-to-functions': 7.24.7
       '@babel/helper-optimise-call-expression': 7.24.7
@@ -8321,37 +8194,28 @@ snapshots:
 
   '@babel/helper-simple-access@7.24.7':
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-skip-transparent-expression-wrappers@7.24.7':
     dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-split-export-declaration@7.24.7':
     dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/helper-string-parser@7.24.7': {}
+      '@babel/types': 7.25.6
 
   '@babel/helper-string-parser@7.24.8': {}
 
   '@babel/helper-validator-identifier@7.24.7': {}
 
-  '@babel/helper-validator-option@7.24.7': {}
-
   '@babel/helper-validator-option@7.24.8': {}
 
-  '@babel/helpers@7.24.7':
-    dependencies:
-      '@babel/template': 7.24.7
-      '@babel/types': 7.24.7
-
   '@babel/helpers@7.25.6':
     dependencies:
       '@babel/template': 7.25.0
@@ -8362,33 +8226,24 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       chalk: 2.4.2
       js-tokens: 4.0.0
-      picocolors: 1.0.1
-
-  '@babel/parser@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
+      picocolors: 1.1.0
 
   '@babel/parser@7.25.6':
     dependencies:
       '@babel/types': 7.25.6
 
-  '@babel/plugin-proposal-decorators@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-proposal-decorators@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-decorators': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-syntax-decorators': 7.24.7(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-syntax-decorators@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-decorators@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-
-  '@babel/plugin-syntax-import-attributes@7.24.7(@babel/core@7.24.7)':
-    dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
   '@babel/plugin-syntax-import-attributes@7.24.7(@babel/core@7.25.2)':
@@ -8396,38 +8251,38 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-react-jsx-self@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-react-jsx-self@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-react-jsx-source@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-react-jsx-source@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-typescript@7.24.7(@babel/core@7.24.7)':
+  '@babel/plugin-transform-typescript@7.24.7(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
+      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -8435,33 +8290,12 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/template@7.24.7':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-
   '@babel/template@7.25.0':
     dependencies:
       '@babel/code-frame': 7.24.7
       '@babel/parser': 7.25.6
       '@babel/types': 7.25.6
 
-  '@babel/traverse@7.24.7':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-hoist-variables': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-      debug: 4.3.6
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/traverse@7.25.6':
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -8474,12 +8308,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.24.7':
-    dependencies:
-      '@babel/helper-string-parser': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
-      to-fast-properties: 2.0.0
-
   '@babel/types@7.25.6':
     dependencies:
       '@babel/helper-string-parser': 7.24.8
@@ -8617,7 +8445,7 @@ snapshots:
 
   '@electron/get@2.0.3':
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
       env-paths: 2.2.1
       fs-extra: 8.1.0
       got: 11.8.6
@@ -8631,7 +8459,7 @@ snapshots:
 
   '@electron/notarize@2.1.0':
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
       fs-extra: 9.1.0
       promise-retry: 2.0.1
     transitivePeerDependencies:
@@ -8639,7 +8467,7 @@ snapshots:
 
   '@electron/notarize@2.2.1':
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
       fs-extra: 9.1.0
       promise-retry: 2.0.1
     transitivePeerDependencies:
@@ -8648,7 +8476,7 @@ snapshots:
   '@electron/osx-sign@1.0.5':
     dependencies:
       compare-version: 0.1.2
-      debug: 4.3.6
+      debug: 4.3.7
       fs-extra: 10.1.0
       isbinaryfile: 4.0.10
       minimist: 1.2.8
@@ -8660,7 +8488,7 @@ snapshots:
     dependencies:
       '@electron/asar': 3.2.10
       '@malept/cross-spawn-promise': 1.1.1
-      debug: 4.3.6
+      debug: 4.3.7
       dir-compare: 3.3.0
       fs-extra: 9.1.0
       minimatch: 3.1.2
@@ -8908,7 +8736,7 @@ snapshots:
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.6
+      debug: 4.3.7
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.1
@@ -8922,7 +8750,7 @@ snapshots:
   '@eslint/eslintrc@3.1.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.6
+      debug: 4.3.7
       espree: 10.1.0
       globals: 14.0.0
       ignore: 5.3.1
@@ -8955,11 +8783,11 @@ snapshots:
 
   '@floating-ui/utils@0.2.4': {}
 
-  '@floating-ui/vue@1.1.0(vue@3.4.31(typescript@5.5.3))':
+  '@floating-ui/vue@1.1.0(vue@3.5.2(typescript@5.5.3))':
     dependencies:
       '@floating-ui/dom': 1.6.7
       '@floating-ui/utils': 0.2.4
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -9013,7 +8841,7 @@ snapshots:
     transitivePeerDependencies:
       - vite
 
-  '@histoire/plugin-vue@0.17.17(histoire@0.17.17(@types/node@20.11.21)(lightningcss@1.25.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)))(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.4.31(typescript@5.5.3))':
+  '@histoire/plugin-vue@0.17.17(histoire@0.17.17(@types/node@20.11.21)(lightningcss@1.25.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)))(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.5.2(typescript@5.5.3))':
     dependencies:
       '@histoire/controls': 0.17.17(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))
       '@histoire/shared': 0.17.17(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))
@@ -9023,7 +8851,7 @@ snapshots:
       histoire: 0.17.17(@types/node@20.11.21)(lightningcss@1.25.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))
       launch-editor: 2.8.0
       pathe: 1.1.2
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.5.2(typescript@5.5.3)
     transitivePeerDependencies:
       - vite
 
@@ -9034,7 +8862,7 @@ snapshots:
       '@types/markdown-it': 12.2.3
       chokidar: 3.6.0
       pathe: 1.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       vite: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
 
   '@histoire/vendors@0.17.17': {}
@@ -9046,7 +8874,7 @@ snapshots:
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.6
+      debug: 4.3.7
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -9103,19 +8931,19 @@ snapshots:
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
 
-  '@jridgewell/sourcemap-codec@1.4.15': {}
+  '@jridgewell/sourcemap-codec@1.5.0': {}
 
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   '@json-schema-spec/json-pointer@0.1.2': {}
 
@@ -9234,7 +9062,7 @@ snapshots:
 
   '@malept/flatpak-bundler@0.4.0':
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
       fs-extra: 9.1.0
       lodash: 4.17.21
       tmp-promise: 3.0.3
@@ -10238,10 +10066,6 @@ snapshots:
       '@react-types/shared': 3.24.1(react@18.3.1)
       react: 18.3.1
 
-  '@react-types/shared@3.23.1(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-
   '@react-types/shared@3.24.1(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -10475,13 +10299,13 @@ snapshots:
       '@tanstack/query-core': 5.54.1
       react: 18.3.1
 
-  '@tanstack/vue-query@5.54.2(vue@3.4.31(typescript@5.5.3))':
+  '@tanstack/vue-query@5.54.2(vue@3.5.2(typescript@5.5.3))':
     dependencies:
       '@tanstack/match-sorter-utils': 8.15.1
       '@tanstack/query-core': 5.54.1
       '@vue/devtools-api': 6.6.3
-      vue: 3.4.31(typescript@5.5.3)
-      vue-demi: 0.14.10(vue@3.4.31(typescript@5.5.3))
+      vue: 3.5.2(typescript@5.5.3)
+      vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.3))
 
   '@tootallnate/once@2.0.0': {}
 
@@ -10489,24 +10313,24 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/parser': 7.25.6
+      '@babel/types': 7.25.6
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.20.6
 
   '@types/babel__generator@7.6.8':
     dependencies:
-      '@babel/types': 7.24.7
+      '@babel/types': 7.25.6
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/parser': 7.25.6
+      '@babel/types': 7.25.6
 
   '@types/babel__traverse@7.20.6':
     dependencies:
-      '@babel/types': 7.24.7
+      '@babel/types': 7.25.6
 
   '@types/cacheable-request@6.0.3':
     dependencies:
@@ -10811,7 +10635,7 @@ snapshots:
       '@typescript-eslint/types': 7.15.0
       '@typescript-eslint/typescript-estree': 7.15.0(typescript@5.5.3)
       '@typescript-eslint/visitor-keys': 7.15.0
-      debug: 4.3.6
+      debug: 4.3.7
       eslint: 8.57.0
     optionalDependencies:
       typescript: 5.5.3
@@ -10827,7 +10651,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 7.15.0(typescript@5.5.3)
       '@typescript-eslint/utils': 7.15.0(eslint@8.57.0)(typescript@5.5.3)
-      debug: 4.3.6
+      debug: 4.3.7
       eslint: 8.57.0
       ts-api-utils: 1.3.0(typescript@5.5.3)
     optionalDependencies:
@@ -10841,11 +10665,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 7.15.0
       '@typescript-eslint/visitor-keys': 7.15.0
-      debug: 4.3.6
+      debug: 4.3.7
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.6.2
+      semver: 7.6.3
       ts-api-utils: 1.3.0(typescript@5.5.3)
     optionalDependencies:
       typescript: 5.5.3
@@ -10872,32 +10696,32 @@ snapshots:
 
   '@vitejs/plugin-react@4.3.1(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))':
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.24.7)
+      '@babel/core': 7.25.2
+      '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.25.2)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
       vite: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.0.5(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.4.31(typescript@5.5.3))':
+  '@vitejs/plugin-vue@5.0.5(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.5.2(typescript@5.5.3))':
     dependencies:
       vite: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.5.2(typescript@5.5.3)
 
   '@vitest/coverage-v8@1.6.0(vitest@1.6.0(@types/node@20.11.21)(jsdom@24.1.0)(lightningcss@1.25.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 0.2.3
-      debug: 4.3.6
+      debug: 4.3.7
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 5.0.5
       istanbul-reports: 3.1.7
-      magic-string: 0.30.10
+      magic-string: 0.30.11
       magicast: 0.3.4
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       std-env: 3.7.0
       strip-literal: 2.1.0
       test-exclude: 6.0.0
@@ -10919,7 +10743,7 @@ snapshots:
 
   '@vitest/snapshot@1.6.0':
     dependencies:
-      magic-string: 0.30.10
+      magic-string: 0.30.11
       pathe: 1.1.2
       pretty-format: 29.7.0
 
@@ -10950,66 +10774,66 @@ snapshots:
 
   '@vue/babel-helper-vue-transform-on@1.2.2': {}
 
-  '@vue/babel-plugin-jsx@1.2.2(@babel/core@7.24.7)':
+  '@vue/babel-plugin-jsx@1.2.2(@babel/core@7.25.2)':
     dependencies:
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.24.7)
-      '@babel/template': 7.24.7
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
+      '@babel/template': 7.25.0
+      '@babel/traverse': 7.25.6
+      '@babel/types': 7.25.6
       '@vue/babel-helper-vue-transform-on': 1.2.2
-      '@vue/babel-plugin-resolve-type': 1.2.2(@babel/core@7.24.7)
+      '@vue/babel-plugin-resolve-type': 1.2.2(@babel/core@7.25.2)
       camelcase: 6.3.0
       html-tags: 3.3.1
       svg-tags: 1.0.0
     optionalDependencies:
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/babel-plugin-resolve-type@1.2.2(@babel/core@7.24.7)':
+  '@vue/babel-plugin-resolve-type@1.2.2(@babel/core@7.25.2)':
     dependencies:
       '@babel/code-frame': 7.24.7
-      '@babel/core': 7.24.7
+      '@babel/core': 7.25.2
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/parser': 7.24.7
-      '@vue/compiler-sfc': 3.4.31
+      '@babel/parser': 7.25.6
+      '@vue/compiler-sfc': 3.5.2
 
-  '@vue/compiler-core@3.4.31':
+  '@vue/compiler-core@3.5.2':
     dependencies:
-      '@babel/parser': 7.24.7
-      '@vue/shared': 3.4.31
+      '@babel/parser': 7.25.6
+      '@vue/shared': 3.5.2
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
-  '@vue/compiler-dom@3.4.31':
+  '@vue/compiler-dom@3.5.2':
     dependencies:
-      '@vue/compiler-core': 3.4.31
-      '@vue/shared': 3.4.31
+      '@vue/compiler-core': 3.5.2
+      '@vue/shared': 3.5.2
 
-  '@vue/compiler-sfc@3.4.31':
+  '@vue/compiler-sfc@3.5.2':
     dependencies:
-      '@babel/parser': 7.24.7
-      '@vue/compiler-core': 3.4.31
-      '@vue/compiler-dom': 3.4.31
-      '@vue/compiler-ssr': 3.4.31
-      '@vue/shared': 3.4.31
+      '@babel/parser': 7.25.6
+      '@vue/compiler-core': 3.5.2
+      '@vue/compiler-dom': 3.5.2
+      '@vue/compiler-ssr': 3.5.2
+      '@vue/shared': 3.5.2
       estree-walker: 2.0.2
-      magic-string: 0.30.10
-      postcss: 8.4.39
+      magic-string: 0.30.11
+      postcss: 8.4.45
       source-map-js: 1.2.0
 
-  '@vue/compiler-ssr@3.4.31':
+  '@vue/compiler-ssr@3.5.2':
     dependencies:
-      '@vue/compiler-dom': 3.4.31
-      '@vue/shared': 3.4.31
+      '@vue/compiler-dom': 3.5.2
+      '@vue/shared': 3.5.2
 
   '@vue/devtools-api@6.6.3': {}
 
-  '@vue/devtools-core@7.3.7(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.4.31(typescript@5.5.3))':
+  '@vue/devtools-core@7.3.7(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.5.2(typescript@5.5.3))':
     dependencies:
       '@vue/devtools-kit': 7.3.7
       '@vue/devtools-shared': 7.3.7
@@ -11017,7 +10841,7 @@ snapshots:
       nanoid: 3.3.7
       pathe: 1.1.2
       vite-hot-client: 0.2.3(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.5.2(typescript@5.5.3)
     transitivePeerDependencies:
       - vite
 
@@ -11059,8 +10883,8 @@ snapshots:
   '@vue/language-core@2.0.24(typescript@5.5.3)':
     dependencies:
       '@volar/language-core': 2.4.0-alpha.12
-      '@vue/compiler-dom': 3.4.31
-      '@vue/shared': 3.4.31
+      '@vue/compiler-dom': 3.5.2
+      '@vue/shared': 3.5.2
       computeds: 0.0.1
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -11069,29 +10893,29 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.3
 
-  '@vue/reactivity@3.4.31':
+  '@vue/reactivity@3.5.2':
     dependencies:
-      '@vue/shared': 3.4.31
+      '@vue/shared': 3.5.2
 
-  '@vue/runtime-core@3.4.31':
+  '@vue/runtime-core@3.5.2':
     dependencies:
-      '@vue/reactivity': 3.4.31
-      '@vue/shared': 3.4.31
+      '@vue/reactivity': 3.5.2
+      '@vue/shared': 3.5.2
 
-  '@vue/runtime-dom@3.4.31':
+  '@vue/runtime-dom@3.5.2':
     dependencies:
-      '@vue/reactivity': 3.4.31
-      '@vue/runtime-core': 3.4.31
-      '@vue/shared': 3.4.31
+      '@vue/reactivity': 3.5.2
+      '@vue/runtime-core': 3.5.2
+      '@vue/shared': 3.5.2
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.4.31(vue@3.4.31(typescript@5.5.3))':
+  '@vue/server-renderer@3.5.2(vue@3.5.2(typescript@5.5.3))':
     dependencies:
-      '@vue/compiler-ssr': 3.4.31
-      '@vue/shared': 3.4.31
-      vue: 3.4.31(typescript@5.5.3)
+      '@vue/compiler-ssr': 3.5.2
+      '@vue/shared': 3.5.2
+      vue: 3.5.2(typescript@5.5.3)
 
-  '@vue/shared@3.4.31': {}
+  '@vue/shared@3.5.2': {}
 
   '@vue/test-utils@2.4.6':
     dependencies:
@@ -11100,21 +10924,29 @@ snapshots:
 
   '@vue/tsconfig@0.5.1': {}
 
-  '@vueuse/core@10.11.0(vue@3.4.31(typescript@5.5.3))':
+  '@vueuse/core@10.11.0(vue@3.5.2(typescript@5.5.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.11.0
-      '@vueuse/shared': 10.11.0(vue@3.4.31(typescript@5.5.3))
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      '@vueuse/shared': 10.11.0(vue@3.5.2(typescript@5.5.3))
+      vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/gesture@2.0.0(vue@3.5.2(typescript@5.5.3))':
+    dependencies:
+      chokidar: 3.6.0
+      consola: 3.2.3
+      upath: 2.0.1
+      vue: 3.5.2(typescript@5.5.3)
+      vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.3))
+
   '@vueuse/metadata@10.11.0': {}
 
-  '@vueuse/shared@10.11.0(vue@3.4.31(typescript@5.5.3))':
+  '@vueuse/shared@10.11.0(vue@3.5.2(typescript@5.5.3))':
     dependencies:
-      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+      vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -11151,26 +10983,31 @@ snapshots:
 
   acorn@8.12.0: {}
 
-  ag-grid-community@30.2.1: {}
+  ag-charts-community@9.3.2: {}
 
-  ag-grid-enterprise@30.2.1:
+  ag-grid-community@31.3.4: {}
+
+  ag-grid-enterprise@31.3.4:
     dependencies:
-      ag-grid-community: 30.2.1
+      ag-charts-community: 9.3.2
+      ag-grid-community: 31.3.4
 
-  ag-grid-vue3@30.2.1(ag-grid-community@30.2.1)(vue@3.4.31(typescript@5.5.3)):
+  ag-grid-vue3@31.3.4(typescript@5.5.3):
     dependencies:
-      ag-grid-community: 30.2.1
-      vue: 3.4.31(typescript@5.5.3)
+      ag-grid-community: 31.3.4
+      vue: 3.5.2(typescript@5.5.3)
+    transitivePeerDependencies:
+      - typescript
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -11240,7 +11077,7 @@ snapshots:
       builder-util: 24.13.1
       builder-util-runtime: 9.2.4
       chromium-pickle-js: 0.2.0
-      debug: 4.3.6
+      debug: 4.3.7
       dmg-builder: 24.13.3(electron-builder-squirrel-windows@24.13.3)
       ejs: 3.1.10
       electron-builder-squirrel-windows: 24.13.3(dmg-builder@24.13.3)
@@ -11255,7 +11092,7 @@ snapshots:
       minimatch: 5.1.6
       read-config-file: 6.3.2
       sanitize-filename: 1.6.3
-      semver: 7.6.2
+      semver: 7.6.3
       tar: 6.2.1
       temp-file: 3.4.0
     transitivePeerDependencies:
@@ -11391,8 +11228,6 @@ snapshots:
     dependencies:
       lodash: 4.17.21
 
-  async@3.2.5: {}
-
   async@3.2.6: {}
 
   asynckit@0.4.0: {}
@@ -11485,13 +11320,6 @@ snapshots:
     dependencies:
       fill-range: 7.0.1
 
-  browserslist@4.23.1:
-    dependencies:
-      caniuse-lite: 1.0.30001639
-      electron-to-chromium: 1.4.815
-      node-releases: 2.0.14
-      update-browserslist-db: 1.0.16(browserslist@4.23.1)
-
   browserslist@4.23.3:
     dependencies:
       caniuse-lite: 1.0.30001658
@@ -11529,7 +11357,7 @@ snapshots:
 
   builder-util-runtime@9.2.4:
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
       sax: 1.4.1
     transitivePeerDependencies:
       - supports-color
@@ -11543,7 +11371,7 @@ snapshots:
       builder-util-runtime: 9.2.4
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.6
+      debug: 4.3.7
       fs-extra: 10.1.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
@@ -11598,8 +11426,6 @@ snapshots:
 
   camelcase@6.3.0: {}
 
-  caniuse-lite@1.0.30001639: {}
-
   caniuse-lite@1.0.30001658: {}
 
   capital-case@1.0.4:
@@ -11784,6 +11610,8 @@ snapshots:
 
   connected@0.0.2: {}
 
+  consola@3.2.3: {}
+
   constant-case@3.0.4:
     dependencies:
       no-case: 3.0.4
@@ -12056,11 +11884,7 @@ snapshots:
 
   debug@3.2.7:
     dependencies:
-      ms: 2.1.2
-
-  debug@4.3.6:
-    dependencies:
-      ms: 2.1.2
+      ms: 2.1.3
 
   debug@4.3.7:
     dependencies:
@@ -12244,7 +12068,7 @@ snapshots:
       '@one-ini/wasm': 0.1.1
       commander: 10.0.1
       minimatch: 9.0.1
-      semver: 7.6.2
+      semver: 7.6.3
 
   ee-first@1.1.1: {}
 
@@ -12293,8 +12117,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  electron-to-chromium@1.4.815: {}
-
   electron-to-chromium@1.5.16: {}
 
   electron@31.2.0:
@@ -12534,8 +12356,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.23.0
       '@esbuild/win32-x64': 0.23.0
 
-  escalade@3.1.2: {}
-
   escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
@@ -12553,12 +12373,12 @@ snapshots:
       '@es-joy/jsdoccomment': 0.41.0
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
-      debug: 4.3.6
+      debug: 4.3.7
       escape-string-regexp: 4.0.0
       eslint: 8.57.0
       esquery: 1.6.0
       is-builtin-module: 3.2.1
-      semver: 7.6.2
+      semver: 7.6.3
       spdx-expression-parse: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -12568,12 +12388,12 @@ snapshots:
       '@es-joy/jsdoccomment': 0.46.0
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
-      debug: 4.3.6
+      debug: 4.3.7
       escape-string-regexp: 4.0.0
       eslint: 8.57.0
       esquery: 1.6.0
       parse-imports: 2.1.1
-      semver: 7.6.2
+      semver: 7.6.3
       spdx-expression-parse: 4.0.0
       synckit: 0.9.1
     transitivePeerDependencies:
@@ -12623,7 +12443,7 @@ snapshots:
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.0
-      semver: 7.6.2
+      semver: 7.6.3
       vue-eslint-parser: 9.4.3(eslint@8.57.0)
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
@@ -12651,7 +12471,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.6
+      debug: 4.3.7
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -12743,7 +12563,7 @@ snapshots:
 
   extract-zip@2.0.1:
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
@@ -12830,11 +12650,11 @@ snapshots:
 
   flexsearch@0.7.21: {}
 
-  floating-vue@2.0.0(vue@3.4.31(typescript@5.5.3)):
+  floating-vue@2.0.0(vue@3.5.2(typescript@5.5.3)):
     dependencies:
       '@floating-ui/dom': 1.1.1
-      vue: 3.4.31(typescript@5.5.3)
-      vue-resize: 2.0.0-alpha.1(vue@3.4.31(typescript@5.5.3))
+      vue: 3.5.2(typescript@5.5.3)
+      vue-resize: 2.0.0-alpha.1(vue@3.5.2(typescript@5.5.3))
 
   for-each@0.3.3:
     dependencies:
@@ -13015,7 +12835,7 @@ snapshots:
       es6-error: 4.1.1
       matcher: 3.0.0
       roarr: 2.15.4
-      semver: 7.6.2
+      semver: 7.6.3
       serialize-error: 7.0.1
     optional: true
 
@@ -13152,7 +12972,7 @@ snapshots:
       micromatch: 4.0.5
       mrmime: 1.0.1
       pathe: 1.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       sade: 1.8.1
       shiki-es: 0.2.0
       sirv: 2.0.4
@@ -13212,14 +13032,14 @@ snapshots:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.6
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.6
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -13237,14 +13057,14 @@ snapshots:
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.6
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.6
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -13298,6 +13118,11 @@ snapshots:
 
   ini@1.3.8: {}
 
+  input-otp@1.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   install@0.13.0: {}
 
   internal-slot@1.0.7:
@@ -13496,7 +13321,7 @@ snapshots:
   istanbul-lib-source-maps@5.0.5:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      debug: 4.3.6
+      debug: 4.3.7
       istanbul-lib-coverage: 3.2.2
     transitivePeerDependencies:
       - supports-color
@@ -13528,7 +13353,7 @@ snapshots:
 
   jake@10.9.1:
     dependencies:
-      async: 3.2.5
+      async: 3.2.6
       chalk: 4.1.2
       filelist: 1.0.4
       minimatch: 3.1.2
@@ -13686,7 +13511,7 @@ snapshots:
 
   launch-editor@2.8.0:
     dependencies:
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       shell-quote: 1.8.1
 
   lazy-val@1.0.5: {}
@@ -13904,19 +13729,19 @@ snapshots:
 
   magic-bytes.js@1.10.0: {}
 
-  magic-string@0.30.10:
+  magic-string@0.30.11:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   magicast@0.3.4:
     dependencies:
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
+      '@babel/parser': 7.25.6
+      '@babel/types': 7.25.6
       source-map-js: 1.2.0
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.6.2
+      semver: 7.6.3
 
   markdown-it-anchor@8.6.7(@types/markdown-it@12.2.3)(markdown-it@12.3.2):
     dependencies:
@@ -14054,8 +13879,6 @@ snapshots:
 
   ms@2.0.0: {}
 
-  ms@2.1.2: {}
-
   ms@2.1.3: {}
 
   muggle-string@0.4.1: {}
@@ -14093,7 +13916,7 @@ snapshots:
 
   node-abi@3.65.0:
     dependencies:
-      semver: 7.6.2
+      semver: 7.6.3
 
   node-addon-api@1.7.2:
     optional: true
@@ -14115,8 +13938,6 @@ snapshots:
       js-message: 1.0.5
       js-queue: 2.0.0
 
-  node-releases@2.0.14: {}
-
   node-releases@2.0.18: {}
 
   nopt@7.2.1:
@@ -14348,8 +14169,6 @@ snapshots:
 
   phin@2.9.3: {}
 
-  picocolors@1.0.1: {}
-
   picocolors@1.1.0: {}
 
   picomatch@2.3.1: {}
@@ -14404,43 +14223,43 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.39):
+  postcss-import@15.1.0(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-inline-svg@6.0.0(postcss@8.4.39):
+  postcss-inline-svg@6.0.0(postcss@8.4.45):
     dependencies:
       css-select: 5.1.0
       dom-serializer: 2.0.0
       htmlparser2: 8.0.2
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-value-parser: 4.2.0
 
-  postcss-js@4.0.1(postcss@8.4.39):
+  postcss-js@4.0.1(postcss@8.4.45):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.39
+      postcss: 8.4.45
 
-  postcss-load-config@4.0.2(postcss@8.4.39):
+  postcss-load-config@4.0.2(postcss@8.4.45):
     dependencies:
       lilconfig: 3.1.2
       yaml: 2.4.5
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
 
-  postcss-nested@6.0.1(postcss@8.4.39):
+  postcss-nested@6.0.1(postcss@8.4.45):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.1.0
 
-  postcss-nesting@12.1.5(postcss@8.4.39):
+  postcss-nesting@12.1.5(postcss@8.4.45):
     dependencies:
       '@csstools/selector-resolve-nested': 1.1.0(postcss-selector-parser@6.1.0)
       '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.0)
-      postcss: 8.4.39
+      postcss: 8.4.45
       postcss-selector-parser: 6.1.0
 
   postcss-selector-parser@6.1.0:
@@ -14450,10 +14269,10 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.39:
+  postcss@8.4.45:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       source-map-js: 1.2.0
 
   prebuild-install@7.1.2:
@@ -14538,6 +14357,10 @@ snapshots:
 
   pure-rand@6.1.0: {}
 
+  qrcode.react@3.1.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   qs@6.11.0:
     dependencies:
       side-channel: 1.0.6
@@ -14962,10 +14785,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.6.2: {}
-
-  semver@7.6.3:
-    optional: true
+  semver@7.6.3: {}
 
   sentence-case@3.0.4:
     dependencies:
@@ -15002,7 +14822,7 @@ snapshots:
       detect-libc: 2.0.3
       node-addon-api: 5.1.0
       prebuild-install: 7.1.2
-      semver: 7.6.2
+      semver: 7.6.3
       simple-get: 4.0.1
       tar-fs: 2.1.1
       tunnel-agent: 0.6.0
@@ -15052,7 +14872,7 @@ snapshots:
 
   simple-update-notifier@2.0.0:
     dependencies:
-      semver: 7.6.2
+      semver: 7.6.3
 
   sirv@2.0.4:
     dependencies:
@@ -15260,7 +15080,7 @@ snapshots:
 
   sumchecker@3.0.1:
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -15324,12 +15144,12 @@ snapshots:
       micromatch: 4.0.5
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)
-      postcss-nested: 6.0.1(postcss@8.4.39)
+      picocolors: 1.1.0
+      postcss: 8.4.45
+      postcss-import: 15.1.0(postcss@8.4.45)
+      postcss-js: 4.0.1(postcss@8.4.45)
+      postcss-load-config: 4.0.2(postcss@8.4.45)
+      postcss-nested: 6.0.1(postcss@8.4.45)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
       sucrase: 3.35.0
@@ -15553,11 +15373,7 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  update-browserslist-db@1.0.16(browserslist@4.23.1):
-    dependencies:
-      browserslist: 4.23.1
-      escalade: 3.1.2
-      picocolors: 1.0.1
+  upath@2.0.1: {}
 
   update-browserslist-db@1.1.0(browserslist@4.23.3):
     dependencies:
@@ -15646,10 +15462,10 @@ snapshots:
   vite-node@0.34.7(@types/node@20.11.21)(lightningcss@1.25.1):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.6
+      debug: 4.3.7
       mlly: 1.7.1
       pathe: 1.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       vite: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - '@types/node'
@@ -15664,9 +15480,9 @@ snapshots:
   vite-node@1.6.0(@types/node@20.11.21)(lightningcss@1.25.1):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.6
+      debug: 4.3.7
       pathe: 1.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       vite: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - '@types/node'
@@ -15681,7 +15497,7 @@ snapshots:
   vite-node@2.0.4(@types/node@20.11.21)(lightningcss@1.25.1):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.6
+      debug: 4.3.7
       pathe: 1.1.2
       tinyrainbow: 1.2.0
       vite: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
@@ -15699,21 +15515,21 @@ snapshots:
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.18.1)
-      debug: 4.3.6
+      debug: 4.3.7
       error-stack-parser-es: 0.1.4
       fs-extra: 11.2.0
       open: 10.1.0
       perfect-debounce: 1.0.0
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       sirv: 2.0.4
       vite: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-vue-devtools@7.3.7(rollup@4.18.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.4.31(typescript@5.5.3)):
+  vite-plugin-vue-devtools@7.3.7(rollup@4.18.1)(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.5.2(typescript@5.5.3)):
     dependencies:
-      '@vue/devtools-core': 7.3.7(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.4.31(typescript@5.5.3))
+      '@vue/devtools-core': 7.3.7(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1))(vue@3.5.2(typescript@5.5.3))
       '@vue/devtools-kit': 7.3.7
       '@vue/devtools-shared': 7.3.7
       execa: 8.0.1
@@ -15729,15 +15545,15 @@ snapshots:
 
   vite-plugin-vue-inspector@5.1.3(vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)):
     dependencies:
-      '@babel/core': 7.24.7
-      '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-syntax-import-attributes': 7.24.7(@babel/core@7.24.7)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.7)
-      '@babel/plugin-transform-typescript': 7.24.7(@babel/core@7.24.7)
-      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.7)
-      '@vue/compiler-dom': 3.4.31
+      '@babel/core': 7.25.2
+      '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-attributes': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-transform-typescript': 7.24.7(@babel/core@7.25.2)
+      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.25.2)
+      '@vue/compiler-dom': 3.5.2
       kolorist: 1.8.0
-      magic-string: 0.30.10
+      magic-string: 0.30.11
       vite: 5.3.5(@types/node@20.11.21)(lightningcss@1.25.1)
     transitivePeerDependencies:
       - supports-color
@@ -15749,7 +15565,7 @@ snapshots:
   vite@5.3.5(@types/node@20.11.21)(lightningcss@1.25.1):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.39
+      postcss: 8.4.45
       rollup: 4.18.1
     optionalDependencies:
       '@types/node': 20.11.21
@@ -15765,12 +15581,12 @@ snapshots:
       '@vitest/utils': 1.6.0
       acorn-walk: 8.3.3
       chai: 4.4.1
-      debug: 4.3.6
+      debug: 4.3.7
       execa: 8.0.1
       local-pkg: 0.5.0
-      magic-string: 0.30.10
+      magic-string: 0.30.11
       pathe: 1.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       std-env: 3.7.0
       strip-literal: 2.1.0
       tinybench: 2.8.0
@@ -15794,28 +15610,24 @@ snapshots:
 
   vue-component-type-helpers@2.0.29: {}
 
-  vue-demi@0.14.10(vue@3.4.31(typescript@5.5.3)):
-    dependencies:
-      vue: 3.4.31(typescript@5.5.3)
-
-  vue-demi@0.14.8(vue@3.4.31(typescript@5.5.3)):
+  vue-demi@0.14.10(vue@3.5.2(typescript@5.5.3)):
     dependencies:
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.5.2(typescript@5.5.3)
 
   vue-eslint-parser@9.4.3(eslint@8.57.0):
     dependencies:
-      debug: 4.3.6
+      debug: 4.3.7
       eslint: 8.57.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
       esquery: 1.6.0
       lodash: 4.17.21
-      semver: 7.6.2
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
 
-  vue-react-wrapper@0.3.1(vue@3.4.31(typescript@5.5.3)):
+  vue-react-wrapper@0.3.1(vue@3.5.2(typescript@5.5.3)):
     dependencies:
       '@types/prop-types': 15.7.12
       '@types/react': 18.3.3
@@ -15824,11 +15636,11 @@ snapshots:
       csstype: 3.1.3
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.5.2(typescript@5.5.3)
 
-  vue-resize@2.0.0-alpha.1(vue@3.4.31(typescript@5.5.3)):
+  vue-resize@2.0.0-alpha.1(vue@3.5.2(typescript@5.5.3)):
     dependencies:
-      vue: 3.4.31(typescript@5.5.3)
+      vue: 3.5.2(typescript@5.5.3)
 
   vue-template-compiler@2.7.16:
     dependencies:
@@ -15839,16 +15651,16 @@ snapshots:
     dependencies:
       '@volar/typescript': 2.4.0-alpha.12
       '@vue/language-core': 2.0.24(typescript@5.5.3)
-      semver: 7.6.2
+      semver: 7.6.3
       typescript: 5.5.3
 
-  vue@3.4.31(typescript@5.5.3):
+  vue@3.5.2(typescript@5.5.3):
     dependencies:
-      '@vue/compiler-dom': 3.4.31
-      '@vue/compiler-sfc': 3.4.31
-      '@vue/runtime-dom': 3.4.31
-      '@vue/server-renderer': 3.4.31(vue@3.4.31(typescript@5.5.3))
-      '@vue/shared': 3.4.31
+      '@vue/compiler-dom': 3.5.2
+      '@vue/compiler-sfc': 3.5.2
+      '@vue/runtime-dom': 3.5.2
+      '@vue/server-renderer': 3.5.2(vue@3.5.2(typescript@5.5.3))
+      '@vue/shared': 3.5.2
     optionalDependencies:
       typescript: 5.5.3
 
@@ -16024,7 +15836,7 @@ snapshots:
   yargs@17.6.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.2
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
diff --git a/project/DistributionPackage.scala b/project/DistributionPackage.scala
index 4aa99aedb25f..abd96f59e3cf 100644
--- a/project/DistributionPackage.scala
+++ b/project/DistributionPackage.scala
@@ -1,14 +1,15 @@
 import io.circe.yaml
 import io.circe.syntax._
+import org.apache.commons.io.IOUtils
 import sbt.internal.util.ManagedLogger
 import sbt._
 import sbt.io.syntax.fileToRichFile
 import sbt.util.{CacheStore, CacheStoreFactory, FileInfo, Tracked}
 
 import scala.sys.process._
-
 import org.enso.build.WithDebugCommand
 
+import java.nio.file.Paths
 import scala.util.Try
 
 object DistributionPackage {
@@ -248,12 +249,50 @@ object DistributionPackage {
           path.getAbsolutePath
         )
         log.debug(command.mkString(" "))
-        val exitCode = Process(
+        val runningProcess = Process(
           command,
           Some(path.getAbsoluteFile.getParentFile),
           "JAVA_OPTS" -> "-Dorg.jline.terminal.dumb=true"
-        ).!
-        if (exitCode != 0) {
+        ).run
+        // Poor man's solution to stuck index generation
+        val GENERATING_INDEX_TIMEOUT = 60 * 2 // 2 minutes
+        var current                  = 0
+        var timeout                  = false
+        while (runningProcess.isAlive() && !timeout) {
+          if (current > GENERATING_INDEX_TIMEOUT) {
+            java.lang.System.err
+              .println("Reached timeout when generating index. Terminating...")
+            try {
+              val pidOfProcess = pid(runningProcess)
+              val javaHome     = System.getProperty("java.home")
+              val jstack =
+                if (javaHome == null) "jstack"
+                else
+                  Paths.get(javaHome, "bin", "jstack").toAbsolutePath.toString
+              val in = java.lang.Runtime.getRuntime
+                .exec(Array(jstack, pidOfProcess.toString))
+                .getInputStream
+
+              System.err.println(IOUtils.toString(in, "UTF-8"))
+            } catch {
+              case e: Throwable =>
+                java.lang.System.err
+                  .println("Failed to get threaddump of a stuck process", e);
+            } finally {
+              timeout = true
+              runningProcess.destroy()
+            }
+          } else {
+            Thread.sleep(1000)
+            current += 1
+          }
+        }
+        if (timeout) {
+          throw new RuntimeException(
+            s"TIMEOUT: Failed to compile $libName in $GENERATING_INDEX_TIMEOUT seconds"
+          )
+        }
+        if (runningProcess.exitValue() != 0) {
           throw new RuntimeException(s"Cannot compile $libName.")
         }
       } else {
@@ -319,6 +358,38 @@ object DistributionPackage {
     exitCode == 0
   }
 
+  // https://stackoverflow.com/questions/23279898/get-process-id-of-scala-sys-process-process
+  def pid(p: Process): Long = {
+    val procField = p.getClass.getDeclaredField("p")
+    procField.synchronized {
+      procField.setAccessible(true)
+      val proc = procField.get(p)
+      try {
+        proc match {
+          case unixProc
+              if unixProc.getClass.getName == "java.lang.UNIXProcess" =>
+            val pidField = unixProc.getClass.getDeclaredField("pid")
+            pidField.synchronized {
+              pidField.setAccessible(true)
+              try {
+                pidField.getLong(unixProc)
+              } finally {
+                pidField.setAccessible(false)
+              }
+            }
+          case javaProc: java.lang.Process =>
+            javaProc.pid()
+          case other =>
+            throw new RuntimeException(
+              "Cannot get PID of a " + proc.getClass.getName
+            )
+        }
+      } finally {
+        procField.setAccessible(false)
+      }
+    }
+  }
+
   /** Returns the index of the next argument after `--run`, if it exists. */
   private def locateRunArgument(args: Seq[String]): Option[Int] = {
     val findRun = args.indexOf("--run")
diff --git a/project/plugins.sbt b/project/plugins.sbt
index bcc4fed8a8e0..9e2a74b2060d 100644
--- a/project/plugins.sbt
+++ b/project/plugins.sbt
@@ -8,5 +8,6 @@ libraryDependencies += "io.circe"                   %% "circe-yaml"         % "0
 libraryDependencies += "commons-io"                  % "commons-io"         % "2.12.0"
 libraryDependencies += "nl.gn0s1s"                  %% "bump"               % "0.1.3"
 libraryDependencies += "com.google.googlejavaformat" % "google-java-format" % "1.18.1"
+libraryDependencies += "com.softwaremill.retry"     %% "retry"              % "0.3.6"
 
 scalacOptions ++= Seq("-deprecation", "-feature")
diff --git a/std-bits/base/src/main/java/org/enso/base/polyglot/EnsoMeta.java b/std-bits/base/src/main/java/org/enso/base/polyglot/EnsoMeta.java
index 249dcd2ad555..6749092ae631 100644
--- a/std-bits/base/src/main/java/org/enso/base/polyglot/EnsoMeta.java
+++ b/std-bits/base/src/main/java/org/enso/base/polyglot/EnsoMeta.java
@@ -12,7 +12,15 @@ private static Value getBindings() {
   /** Returns a type object from the Enso runtime. */
   public static Value getType(String moduleName, String typeName) {
     var module = getBindings().invokeMember("get_module", moduleName);
-    return module.invokeMember("get_type", typeName);
+    try {
+      return module.invokeMember("get_type", typeName);
+    } catch (NullPointerException e) {
+      var ex =
+          new NullPointerException(
+              "Cannot get type for " + moduleName + " type: " + typeName + " at " + module);
+      ex.initCause(e);
+      throw ex;
+    }
   }
 
   /** Calls a static method defined directly on a module (not inside of a type). */
diff --git a/test/AWS_Tests/src/Redshift_Spec.enso b/test/AWS_Tests/src/Redshift_Spec.enso
index 280beadbeecc..54d2978f775c 100644
--- a/test/AWS_Tests/src/Redshift_Spec.enso
+++ b/test/AWS_Tests/src/Redshift_Spec.enso
@@ -36,7 +36,7 @@ type Data
     teardown self = self.connection.close
 
 
-add_redshift_specific_specs suite_builder create_connection_fn =
+add_redshift_specific_specs suite_builder create_connection_fn setup =
     suite_builder.group "[Redshift] Info" group_builder->
         data = Data.setup create_connection_fn
 
@@ -74,7 +74,6 @@ add_database_specs suite_builder create_connection_fn =
     materialize = .read
 
     Common_Spec.add_specs suite_builder prefix create_connection_fn default_connection
-    add_redshift_specific_specs suite_builder create_connection_fn
 
     common_selection = Common_Table_Operations.Main.Test_Selection.Config supports_case_sensitive_columns=True order_by_unicode_normalization_by_default=True allows_mixed_type_comparisons=False supports_decimal_type=True run_advanced_edge_case_tests_by_default=False
     aggregate_selection = Common_Table_Operations.Aggregate_Spec.Test_Selection.Config first_last_row_order=False aggregation_problems=False date_support=False
@@ -86,6 +85,7 @@ add_database_specs suite_builder create_connection_fn =
         (agg_in_memory_table.take (..First 0)).select_into_database_table default_connection.get (Name_Generator.random_name "Agg_Empty") primary_key=Nothing temporary=True
 
     setup = Common_Table_Operations.Main.Test_Setup.Config prefix agg_table_fn empty_agg_table_fn table_builder materialize is_database=True test_selection=common_selection aggregate_test_selection=aggregate_selection create_connection_func=create_connection_fn light_table_builder=light_table_builder
+    add_redshift_specific_specs suite_builder create_connection_fn setup
     Common_Table_Operations.Main.add_specs suite_builder setup
     IR_Spec.add_specs suite_builder setup prefix default_connection.get
 
diff --git a/test/AWS_Tests/src/S3_Spec.enso b/test/AWS_Tests/src/S3_Spec.enso
index 14b5ee140284..771505e79e28 100644
--- a/test/AWS_Tests/src/S3_Spec.enso
+++ b/test/AWS_Tests/src/S3_Spec.enso
@@ -204,7 +204,7 @@ add_specs suite_builder =
     suite_builder.group "S3.list_objects" pending=api_pending group_builder->
         group_builder.specify "should be able to list objects" <|
             objects = S3.list_objects bucket_name credentials=test_credentials
-            objects . should_contain object_name
+            objects . map .name . should_contain object_name
 
         group_builder.specify "should attach a warning if not a complete list" <|
             objects = S3.list_objects bucket_name max_count=1 credentials=test_credentials
diff --git a/test/Base_Tests/data/datalinks/example-http-format-notreal.datalink b/test/Base_Tests/data/datalinks/example-http-format-notreal.datalink
new file mode 100644
index 000000000000..89dc50b77b99
--- /dev/null
+++ b/test/Base_Tests/data/datalinks/example-http-format-notreal.datalink
@@ -0,0 +1,12 @@
+{
+    "type": "HTTP",
+    "libraryName": "Standard.Base",
+    "method": "GET",
+    "uri": "http://http-test-helper.local/testfiles/js.txt",
+    "format": {
+        "type": "format",
+        "subType": "notreal",
+        "delimiter": " ",
+        "headers": false
+    }
+}
diff --git a/test/Base_Tests/src/Data/Round_Spec.enso b/test/Base_Tests/src/Data/Round_Spec.enso
index 9895cb5d5aab..7820f8447793 100644
--- a/test/Base_Tests/src/Data/Round_Spec.enso
+++ b/test/Base_Tests/src/Data/Round_Spec.enso
@@ -176,62 +176,6 @@ add_specs group_builder batch_runner run_advanced =
             round_fun -3.50001 . should_equal -4
             round_fun -3.99999 . should_equal -4
 
-    group_builder.specify "Can round correctly near the precision limit" pending=pending_advanced <|
-        batch_runner.run use_bankers=False round_fun->
-            round_fun 1.22222222225 10 . should_equal 1.2222222223
-            round_fun 1.222222222225 11 . should_equal 1.22222222223
-            round_fun 1.2222222222225 12 . should_equal 1.222222222223
-            round_fun 1.22222222222225 13 . should_equal 1.2222222222223
-            round_fun 1.222222222222225 14 . should_equal 1.22222222222223 0.00000000000001
-
-            round_fun -1.22222222225 10 . should_equal -1.2222222223
-            round_fun -1.222222222225 11 . should_equal -1.22222222223
-            round_fun -1.2222222222225 12 . should_equal -1.222222222223
-            round_fun -1.22222222222225 13 . should_equal -1.2222222222223
-            round_fun -1.222222222222225 14 . should_equal -1.22222222222223 0.00000000000001
-
-            round_fun 1.22222222235 10 . should_equal 1.2222222224
-            round_fun 1.222222222235 11 . should_equal 1.22222222224
-            round_fun 1.2222222222235 12 . should_equal 1.222222222224 0.000000000002
-            round_fun 1.22222222222235 13 . should_equal 1.2222222222224 0.0000000000001
-            round_fun 1.222222222222235 14 . should_equal 1.22222222222224 0.00000000000001
-
-            round_fun -1.22222222235 10 . should_equal -1.2222222224
-            round_fun -1.222222222235 11 . should_equal -1.22222222224
-            round_fun -1.2222222222235 12 . should_equal -1.222222222224 0.000000000002
-            round_fun -1.22222222222235 13 . should_equal -1.2222222222224 0.0000000000001
-            round_fun -1.222222222222235 14 . should_equal -1.22222222222224 0.00000000000001
-
-    group_builder.specify "Can round correctly near the precision limit, using banker's rounding" pending=pending_advanced <|
-        batch_runner.run use_bankers=True round_fun->
-            round_fun 1.22222222225 10 . should_equal 1.2222222222
-            round_fun 1.222222222225 11 . should_equal 1.22222222222
-            round_fun 1.2222222222225 12 . should_equal 1.222222222222
-            round_fun 1.22222222222225 13 . should_equal 1.2222222222222
-            round_fun 1.222222222222225 14 . should_equal 1.22222222222222
-
-            round_fun -1.22222222225 10 . should_equal -1.2222222222
-            round_fun -1.222222222225 11 . should_equal -1.22222222222
-            round_fun -1.2222222222225 12 . should_equal -1.222222222222
-            round_fun -1.22222222222225 13 . should_equal -1.2222222222222
-            round_fun -1.222222222222225 14 . should_equal -1.22222222222222
-
-            round_fun 1.22222222235 10 . should_equal 1.2222222224
-            round_fun 1.222222222235 11 . should_equal 1.22222222224
-            round_fun 1.2222222222235 12 . should_equal 1.222222222224
-            round_fun 1.22222222222235 13 . should_equal 1.2222222222224
-            round_fun 1.222222222222235 14 . should_equal 1.22222222222224
-
-            round_fun -1.22222222235 10 . should_equal -1.2222222224
-            round_fun -1.222222222235 11 . should_equal -1.22222222224
-            round_fun -1.2222222222235 12 . should_equal -1.222222222224
-            round_fun -1.22222222222235 13 . should_equal -1.2222222222224
-            round_fun -1.222222222222235 14 . should_equal -1.22222222222224
-
-    group_builder.specify "Floating point imperfect representation counter-examples" pending=(if group_builder.name.contains "Snowflake" then "TODO: https://github.com/enso-org/enso/issues/10307") <|
-        batch_runner.run_one 1.225 2 use_bankers=True . should_equal 1.22  # Actual result 1.23
-        batch_runner.run_one 37.785 2 . should_equal 37.79 0.01
-
     group_builder.specify "Can round small integers to a specified number of decimal places correctly (value is unchanged)" <|
         batch_runner.run use_bankers=False round_fun->
             round_fun 0 . should_equal 0
diff --git a/test/Base_Tests/src/Network/Http/Http_Data_Link_Spec.enso b/test/Base_Tests/src/Network/Http/Http_Data_Link_Spec.enso
index 66982a588d1c..4e95da779202 100644
--- a/test/Base_Tests/src/Network/Http/Http_Data_Link_Spec.enso
+++ b/test/Base_Tests/src/Network/Http/Http_Data_Link_Spec.enso
@@ -45,8 +45,7 @@ add_specs suite_builder =
             r.catch.to_display_text.should_contain "Unknown format"
 
         group_builder.specify "will fail if an unloaded format is used" <| Test.with_retries <|
-            # We assume that Base_Tests _do not_ import Standard.Table
-            f = replace_url_in_data_link (data_link_root / "example-http-format-delimited.datalink")
+            f = replace_url_in_data_link (data_link_root / "example-http-format-notreal.datalink")
             r = f.read
             r.should_fail_with Illegal_State
             r.catch.to_display_text.should_contain "Unknown format"
diff --git a/test/Microsoft_Tests/src/SQLServer_Spec.enso b/test/Microsoft_Tests/src/SQLServer_Spec.enso
index 7582aff186cc..e7749f389e72 100644
--- a/test/Microsoft_Tests/src/SQLServer_Spec.enso
+++ b/test/Microsoft_Tests/src/SQLServer_Spec.enso
@@ -84,7 +84,7 @@ add_specs suite_builder =
             message = "SQLServer test database is not configured. See README.md for instructions."
             suite_builder.group "[SQLServer] Database tests" pending=message (_-> Nothing)
         connection_builder ->
-            _ = connection_builder
+            add_sqlserver_specs suite_builder connection_builder
             suite_builder.group "[SQLServer] Info" group_builder->
                 default_connection = Database.connect get_configured_connection_details
                 data = SQLServer_Info_Data.setup default_connection
@@ -145,6 +145,14 @@ add_specs suite_builder =
                     returned_table.should_equal expected_table
                     data.connection.execute 'DROP TABLE "'+name+'"'
 
+type Lazy_Ref
+   Value ~get
+
+add_sqlserver_specs suite_builder create_connection_fn =
+    prefix = "[SQLServer] "
+    default_connection = Lazy_Ref.Value (create_connection_fn Nothing)
+    Common_Spec.add_specs suite_builder prefix create_connection_fn default_connection
+
 main filter=Nothing =
     suite = Test.build suite_builder->
         add_specs suite_builder
diff --git a/test/Snowflake_Tests/src/Snowflake_Spec.enso b/test/Snowflake_Tests/src/Snowflake_Spec.enso
index 8e1f7643f528..40404d202c8a 100644
--- a/test/Snowflake_Tests/src/Snowflake_Spec.enso
+++ b/test/Snowflake_Tests/src/Snowflake_Spec.enso
@@ -465,11 +465,11 @@ snowflake_specific_spec suite_builder default_connection db_name setup =
 
             col . cast Value_Type.Float . round 1 . value_type . should_equal Value_Type.Float
             col . cast Value_Type.Integer . round 1 . value_type . should_equal (Value_Type.Decimal 38 0)
-            col . cast Value_Type.Decimal . round 1 . value_type . should_equal (Value_Type.Decimal 38 0)
+            col . cast Value_Type.Decimal . round 1 . value_type . should_equal (Value_Type.Decimal 38 1)
 
             col . cast Value_Type.Float . round use_bankers=True . value_type . should_equal Value_Type.Float
-            col . cast Value_Type.Integer . round use_bankers=True . value_type . should_equal (Value_Type.Decimal 38 6)
-            col . cast Value_Type.Decimal . round use_bankers=True . value_type . should_equal (Value_Type.Decimal 38 6)
+            col . cast Value_Type.Integer . round use_bankers=True . value_type . should_equal Value_Type.Float
+            col . cast Value_Type.Decimal . round use_bankers=True . value_type . should_equal Value_Type.Float
 
             col . cast Value_Type.Float . ceil . value_type . should_equal Value_Type.Float
             col . cast Value_Type.Integer . ceil . value_type . should_equal (Value_Type.Decimal 38 0)
diff --git a/test/Table_Tests/src/Common_Table_Operations/Add_Row_Number_Spec.enso b/test/Table_Tests/src/Common_Table_Operations/Add_Row_Number_Spec.enso
index 1f14e9fec67c..3879336a9790 100644
--- a/test/Table_Tests/src/Common_Table_Operations/Add_Row_Number_Spec.enso
+++ b/test/Table_Tests/src/Common_Table_Operations/Add_Row_Number_Spec.enso
@@ -43,7 +43,7 @@ add_specs suite_builder setup =
             t2.at "X" . to_vector . should_equal ['a', 'b']
             t2.at "Y 1" . to_vector . should_equal ['c', 'd']
             t2.at "Z" . to_vector . should_equal [40, 20]
-            t2.at "Y" . to_vector . should_equal [1, 2]
+            t2.at "Y" . to_vector . should_equal [0, 1]
             Problems.expect_warning Duplicate_Output_Column_Names t2
 
             r3 = t1.add_row_number name="X" on_problems=..Report_Error
@@ -53,7 +53,7 @@ add_specs suite_builder setup =
             t2 = table_builder [["X", ["a", "b", "a", "a"]], ["Y", [1, 2, 3, 4]]]
             t3 = t2.add_row_number order_by=["X", (Sort_Column.Name "Y" Sort_Direction.Descending)] |> materialize |> _.sort "Y"
             t3.at "Y" . to_vector . should_equal [1, 2, 3, 4]
-            t3.at "Row" . to_vector . should_equal [3, 4, 2, 1]
+            t3.at "Row" . to_vector . should_equal [2, 3, 1, 0]
 
         group_builder.specify "should allow mixing grouping with ordering and custom start and step" <|
             vx = ['a', 'b', 'a', 'a', 'a', 'b', 'c', 'c']
@@ -71,18 +71,18 @@ add_specs suite_builder setup =
             t = table_builder [["X", [1.0, 1.5, 1.0, 2.5, 2.5]], ["row_id", [1, 2, 3, 4, 5]]]
             t1 = t.add_row_number group_by=["X"] order_by=["row_id"] |> materialize |> _.sort "row_id"
             Problems.expect_warning Floating_Point_Equality t1
-            t1.at "Row" . to_vector . should_equal [1, 1, 2, 1, 2]
+            t1.at "Row" . to_vector . should_equal [0, 0, 1, 0, 1]
 
             r2 = t.add_row_number group_by=["X"] order_by=["row_id"] on_problems=..Report_Error
             r2.should_fail_with Floating_Point_Equality
 
             t3 = t.add_row_number order_by=["X"] |> materialize |> _.sort "row_id"
             Problems.assume_no_problems t3
-            t3.at "Row" . to_vector . should_have_relative_ordering [[1, 3], [2], [4, 5]]
+            t3.at "Row" . to_vector . should_have_relative_ordering [[0, 2], [1], [3, 4]]
 
             if setup.is_database.not then
                 t4 = table_builder [["X", [1, "A", 1, 24.0, 24.0, 24.0, 24]], ["row_id", [1, 2, 3, 4, 5, 6, 7]]]
-                t5 = t4.add_row_number group_by=["X"] order_by=["row_id"] |> materialize |> _.sort "row_id"
+                t5 = t4.add_row_number from=1 group_by=["X"] order_by=["row_id"] |> materialize |> _.sort "row_id"
                 Problems.expect_warning Floating_Point_Equality t5
                 t5.at "Row" . to_vector . should_equal [1, 1, 2, 1, 2, 3, 4]
 
@@ -107,7 +107,7 @@ add_specs suite_builder setup =
 
             t2.at "X" . to_vector . should_equal [4, 3, 2, 1]
             t2.at "Y" . to_vector . should_equal [10, 20, 30, 40]
-            t2.at "Row" . to_vector . should_equal [1, 2, 3, 4]
+            t2.at "Row" . to_vector . should_equal [0, 1, 2, 3]
 
         group_builder.specify "Should work correctly after aggregation" <|
             t0 = table_builder [["X", ["a", "b", "a", "c"]], ["Y", [1, 2, 4, 8]]]
@@ -116,7 +116,7 @@ add_specs suite_builder setup =
             t2 = t1.sort "X" . add_row_number
             t2.at "X" . to_vector . should_equal ['a', 'b', 'c']
             t2.at "Sum Y" . to_vector . should_equal [5.0, 2.0, 8.0]
-            t2.at "Row" . to_vector . should_equal [1, 2, 3]
+            t2.at "Row" . to_vector . should_equal [0, 1, 2]
 
     if setup.is_database.not then suite_builder.group prefix+"Table.add_row_number (in-memory specific)" group_builder->
         data = Data.setup create_connection_fn
@@ -129,7 +129,7 @@ add_specs suite_builder setup =
 
         group_builder.specify "should add a row numbering column" <|
             t = table_builder [["X", ['a', 'b', 'a', 'a', 'c']]]
-            t1 = t.add_row_number
+            t1 = t.add_row_number from=1
             rows = t1.rows.to_vector . map .to_vector
             rows . should_equal [['a', 1], ['b', 2], ['a', 3], ['a', 4], ['c', 5]]
             t1.at "Row" . to_vector . should_equal [1, 2, 3, 4, 5]
@@ -141,7 +141,7 @@ add_specs suite_builder setup =
             t1.at "Row" . to_vector . should_equal [10, 11, 12]
 
             t2 = t.add_row_number step=10
-            t2.at "Row" . to_vector . should_equal [1, 11, 21]
+            t2.at "Row" . to_vector . should_equal [0, 10, 20]
 
             t3 = t.add_row_number from=100 step=(-10)
             t3.at "Row" . to_vector . should_equal [100, 90, 80]
@@ -154,17 +154,17 @@ add_specs suite_builder setup =
 
         group_builder.specify "should allow to assign row numbers separately within each group" <|
             t = table_builder [["X", ['a', 'a', 'a', 'a', 'b', 'b']], ["Y", [40, 30, 20, 40, 20, 10]]]
-            t1 = t.add_row_number group_by=["X"]
+            t1 = t.add_row_number from=1 group_by=["X"]
             t1.at "Row" . to_vector . should_equal [1, 2, 3, 4, 1, 2]
 
             t2 = table_builder [["X", ['a', 'a', 'a', 'a', 'b', 'b']], ["Y", [40, 40, 20, 20, 20, 10]]]
-            t3 = t2.add_row_number group_by=["X", "Y"]
+            t3 = t2.add_row_number from=1 group_by=["X", "Y"]
             t3.at "Row" . to_vector . should_equal [1, 2, 1, 2, 1, 1]
 
         group_builder.specify "should allow to assign row numbers separately within scattered groups, preserving the row layout" <|
             v = ['a', 'b', 'a', 'b', 'b', 'b', 'c', 'a']
             t = table_builder [["X", v]]
-            t1 = t.add_row_number group_by=["X"]
+            t1 = t.add_row_number from=1 group_by=["X"]
             # No reordering of elements:
             t1.at "X" . to_vector . should_equal v
             t1.at "Row" . to_vector . should_equal [1, 1, 2, 2, 3, 4, 1, 3]
@@ -188,11 +188,11 @@ add_specs suite_builder setup =
             t1 = t.add_row_number order_by=["X"]
             # No reordering of elements
             t1.at "X" . to_vector . should_equal v
-            t1.at "Row" . to_vector . should_equal [6, 5, 4, 3, 2, 1, 7, 8]
+            t1.at "Row" . to_vector . should_equal [5, 4, 3, 2, 1, 0, 6, 7]
 
             t2 = table_builder [["X", ["a", "b", "a", "a"]], ["Y", [1, 2, 3, 4]]]
             t3 = t2.add_row_number order_by=["X", (Sort_Column.Name "Y" Sort_Direction.Descending)]
-            t3.at "Row" . to_vector . should_equal [3, 4, 2, 1]
+            t3.at "Row" . to_vector . should_equal [2, 3, 1, 0]
 
         group_builder.specify "will fail if the row number exceeds Long range" <|
             max_long = Java_Long.MAX_VALUE
@@ -230,4 +230,4 @@ add_specs suite_builder setup =
             t2 = db_table.add_row_number |> materialize |> _.sort ["Y"]
             t2.at "Y" . to_vector . should_equal [10, 20, 30, 40, 50]
             t2.at "X" . to_vector . should_equal [500, 400, 30, 1, 2]
-            t2.at "Row" . to_vector . should_equal [5, 4, 3, 1, 2]
+            t2.at "Row" . to_vector . should_equal [4, 3, 2, 0, 1]
diff --git a/test/Table_Tests/src/Common_Table_Operations/Column_Operations_Spec.enso b/test/Table_Tests/src/Common_Table_Operations/Column_Operations_Spec.enso
index e6478e52ab3a..526ef074ac43 100644
--- a/test/Table_Tests/src/Common_Table_Operations/Column_Operations_Spec.enso
+++ b/test/Table_Tests/src/Common_Table_Operations/Column_Operations_Spec.enso
@@ -157,27 +157,19 @@ add_specs suite_builder setup =
             result = table.at "x" . round dp use_bankers
             result.to_vector.at 0
 
-        round_batch n_vec dp_vec use_bankers = case use_bankers of
-            ## If banker's rounding is used, we refrain from batching due to issue
-               https://github.com/enso-org/enso/issues/10306
-               That is because the created SQL code is tremendously large with batching
-               (up to around 250k characters, making running it very slow).
-            True ->
-                # Just use `round_one` for each entry
-                n_vec.zip dp_vec n-> dp-> round_one n dp use_bankers
-            False ->
-                name_for ix = "x"+ix.to_text
-                n_columns = n_vec.map_with_index ix-> n-> [name_for ix, [n]]
-                table = light_table_builder n_columns
-                new_columns = dp_vec.map_with_index ix-> dp->
-                    n_col = table.at (name_for ix)
-                    n_col.round dp use_bankers . rename (name_for ix)
-                # In new table input columns are replaced with results of output
-                new_table = new_columns.fold table acc-> col-> acc.set col (set_mode=..Update)
-                # We read all operations in a single query
-                materialized = new_table.read
-                Runtime.assert (materialized.row_count == 1)
-                materialized.first_row.to_vector
+        round_batch n_vec dp_vec use_bankers =
+            name_for ix = "x"+ix.to_text
+            n_columns = n_vec.map_with_index ix-> n-> [name_for ix, [n]]
+            table = light_table_builder n_columns
+            new_columns = dp_vec.map_with_index ix-> dp->
+                n_col = table.at (name_for ix)
+                n_col.round dp use_bankers . rename (name_for ix)
+            # In new table input columns are replaced with results of output
+            new_table = new_columns.fold table acc-> col-> acc.set col (set_mode=..Update)
+            # We read all operations in a single query
+            materialized = new_table.read
+            Runtime.assert (materialized.row_count == 1)
+            materialized.first_row.to_vector
         Round_Spec.add_specs group_builder (Round_Spec.Batch_Runner.Value round_batch round_one) run_advanced=setup.test_selection.run_advanced_edge_case_tests
 
         group_builder.specify "Decimal places out of range" <|
@@ -1148,12 +1140,12 @@ add_specs suite_builder setup =
 
         if setup.test_selection.supports_decimal_type then
             group_builder.specify "ceil, floor and truncate should work correctly on Decimals" <|
-                c = table_builder [["X", [Decimal.new "123492233720368547758075678.25", Decimal.new "15250331789246130610154663179243023788662739454197523.625", Decimal.new "-123492233720368547758075678.25", Decimal.new "-15250331789246130610154663179243023788662739454197523.625"]]] . at "X"
+                c = table_builder [["X", [Decimal.new "123492233720368547758075678.25", Decimal.new "179243023788662739454197523.625", Decimal.new "-123492233720368547758075678.25", Decimal.new "-179243023788662739454197523.625"]]] . at "X"
                 c.value_type.is_decimal . should_be_true
 
-                c.floor.to_vector.should_equal [Decimal.new "123492233720368547758075678.0", Decimal.new "15250331789246130610154663179243023788662739454197523.0", Decimal.new "-123492233720368547758075679.0", Decimal.new "-15250331789246130610154663179243023788662739454197524.0"]
-                c.ceil.to_vector.should_equal [Decimal.new "123492233720368547758075679.0", Decimal.new "15250331789246130610154663179243023788662739454197524.0", Decimal.new "-123492233720368547758075678.0", Decimal.new "-15250331789246130610154663179243023788662739454197523.0"]
-                c.truncate.to_vector.should_equal [Decimal.new "123492233720368547758075678.0", Decimal.new "15250331789246130610154663179243023788662739454197523.0", Decimal.new "-123492233720368547758075678.0", Decimal.new "-15250331789246130610154663179243023788662739454197523.0"]
+                c.floor.to_vector.should_equal [Decimal.new "123492233720368547758075678.0", Decimal.new "179243023788662739454197523.0", Decimal.new "-123492233720368547758075679.0", Decimal.new "-179243023788662739454197524.0"]
+                c.ceil.to_vector.should_equal [Decimal.new "123492233720368547758075679.0", Decimal.new "179243023788662739454197524.0", Decimal.new "-123492233720368547758075678.0", Decimal.new "-179243023788662739454197523.0"]
+                c.truncate.to_vector.should_equal [Decimal.new "123492233720368547758075678.0", Decimal.new "179243023788662739454197523.0", Decimal.new "-123492233720368547758075678.0", Decimal.new "-179243023788662739454197523.0"]
 
             group_builder.specify "round should work correctly on Decimals" <|
                 c = table_builder [["X", [Decimal.new "1.3", Decimal.new "1.5", Decimal.new "1.7", Decimal.new "-1.3", Decimal.new "-1.5", Decimal.new "-1.7"]]] . at "X"
diff --git a/test/Table_Tests/src/Common_Table_Operations/Integration_Tests.enso b/test/Table_Tests/src/Common_Table_Operations/Integration_Tests.enso
index 40c1762ad30c..03a6e4937730 100644
--- a/test/Table_Tests/src/Common_Table_Operations/Integration_Tests.enso
+++ b/test/Table_Tests/src/Common_Table_Operations/Integration_Tests.enso
@@ -168,7 +168,7 @@ add_specs suite_builder setup =
                 t1 = table_builder [["X", ["a", "b", "c"]], ["Y", [1, 2, 3]], ["Z", [0.25, 0.5, 0.75]]]
                 t2 = table_builder [["X", ["ddd", "eee", "fff"]]]
 
-                t11 = t1.add_row_number
+                t11 = t1.add_row_number from=1
                 (t11.at "Row" + 2) . to_vector . should_equal [3, 4, 5]
                 (t11.at "Row" + 0.5) . to_vector . should_equal [1.5, 2.5, 3.5]
                 ((t11.at "Y") + (t11.at "Row")) . to_vector . should_equal [2, 4, 6]
@@ -180,14 +180,14 @@ add_specs suite_builder setup =
                 t11_loaded = workbook.read workbook.sheet_names.first
                 t11_loaded.at "Row" . to_vector . should_equal [1, 2, 3]
 
-                t12 = (t1.add_row_number) . union (t2.add_row_number from=100)
+                t12 = (t1.add_row_number from=1) . union (t2.add_row_number from=100)
                 r12 = t12 |> materialize
                 r12.at "X" . to_vector . should_equal ["a", "b", "c", "ddd", "eee", "fff"]
                 r12.at "Row" . to_vector . should_equal [1, 2, 3, 100, 101, 102]
 
                 t3 = table_builder [["X", ["a", "b", "c"]], ["Row", [1.5, 2.5, 3.5]]]
 
-                t123 = ((t1.add_row_number).union [(t2.add_row_number), t3])
+                t123 = ((t1.add_row_number from=1).union [(t2.add_row_number from=1), t3])
                 r123 = t123 |> materialize
                 r123.at "X" . to_vector . should_equal ["a", "b", "c", "ddd", "eee", "fff", "a", "b", "c"]
                 r123.at "Row" . to_vector . should_equal [1, 2, 3, 1, 2, 3, 1.5, 2.5, 3.5]
diff --git a/test/Table_Tests/src/Database/Common/Common_Spec.enso b/test/Table_Tests/src/Database/Common/Common_Spec.enso
index d53e287f8e8f..e59ed9f51dd5 100644
--- a/test/Table_Tests/src/Database/Common/Common_Spec.enso
+++ b/test/Table_Tests/src/Database/Common/Common_Spec.enso
@@ -197,15 +197,6 @@ add_specs (suite_builder : Suite_Builder) (prefix : Text) (create_connection_fn
             name = data.t1.name
             tmp = data.connection.query (SQL_Query.Table_Name name)
             tmp.read . should_equal data.t1.read
-            
-        group_builder.specify "should allow to access a Table by an SQL query" <|
-            name = data.t1.name
-            t2 = data.connection.query (SQL_Query.Raw_SQL ('SELECT "a", "b" FROM "' + name + '" WHERE "a" >= 3'))
-            m2 = t2.read
-            m2.column_names . should_equal ["a", "b"]
-            m2.at "a" . to_vector . should_equal [4]
-            m2.at "b" . to_vector . should_equal [5]
-            m2.at "c" . should_fail_with No_Such_Column
 
         group_builder.specify "should allow to access a Table by an SQL query" <|
             name = data.t1.name
@@ -216,7 +207,7 @@ add_specs (suite_builder : Suite_Builder) (prefix : Text) (create_connection_fn
             m2.at "b" . to_vector . should_equal [5]
             m2.at "c" . should_fail_with No_Such_Column
 
-            t3 = data.connection.query (SQL_Query.Raw_SQL ('SELECT 1+2'))
+            t3 = data.connection.query (SQL_Query.Raw_SQL ('SELECT 1+2 AS "a"'))
             m3 = t3.read
             m3.at 0 . to_vector . should_equal [3]
 
@@ -244,16 +235,15 @@ add_specs (suite_builder : Suite_Builder) (prefix : Text) (create_connection_fn
 
         group_builder.specify "will fail if the table is modified and a column gets removed" <|
             name = Name_Generator.random_name "removing-column"
-            Problems.assume_no_problems <|
-                (Table.new [["a", [1, 2, 3]], ["b", [4, 5, 6]]]).select_into_database_table data.connection name temporary=True
 
-            t1 = data.connection.query name
+            t0 = (Table.new [["a", [1, 2, 3]], ["b", [4, 5, 6]]]).select_into_database_table data.connection name temporary=True
+            t1 = data.connection.query t0.name
             m1 = t1.read.sort "a"
             Problems.assume_no_problems m1
             m1.at "a" . to_vector . should_equal [1, 2, 3]
             m1.at "b" . to_vector . should_equal [4, 5, 6]
 
-            Problems.assume_no_problems <| data.connection.drop_table name
+            Problems.assume_no_problems <| data.connection.drop_table t0.name
             Problems.assume_no_problems <|
                 (Table.new [["a", [100, 200]]]).select_into_database_table data.connection name temporary=True
 
@@ -266,16 +256,16 @@ add_specs (suite_builder : Suite_Builder) (prefix : Text) (create_connection_fn
 
         group_builder.specify "will not fail if the table is modified and a column gets added" <|
             name = Name_Generator.random_name "adding-column"
-            Problems.assume_no_problems <|
-                (Table.new [["a", [1, 2, 3]], ["b", [4, 5, 6]]]).select_into_database_table data.connection name temporary=True
 
-            t1 = data.connection.query name
+            t0 = (Table.new [["a", [1, 2, 3]], ["b", [4, 5, 6]]]).select_into_database_table data.connection name temporary=True
+
+            t1 = data.connection.query t0.name
             m1 = t1.read.sort "a"
             Problems.assume_no_problems m1
             m1.at "a" . to_vector . should_equal [1, 2, 3]
             m1.at "b" . to_vector . should_equal [4, 5, 6]
 
-            Problems.assume_no_problems <| data.connection.drop_table name
+            Problems.assume_no_problems <| data.connection.drop_table t0.name
             Problems.assume_no_problems <|
                 (Table.new [["a", [100, 200]], ["b", [300, 400]], ["c", [500, 600]]]).select_into_database_table data.connection name temporary=True
 
@@ -287,7 +277,7 @@ add_specs (suite_builder : Suite_Builder) (prefix : Text) (create_connection_fn
 
             t1.at "c" . should_fail_with No_Such_Column
 
-            t2 = data.connection.query name
+            t2 = data.connection.query t0.name
             t2.column_names . should_equal ["a", "b", "c"]
 
 
diff --git a/test/Table_Tests/src/Database/Common/Names_Length_Limits_Spec.enso b/test/Table_Tests/src/Database/Common/Names_Length_Limits_Spec.enso
index 7d14908f4c89..ff74dede08eb 100644
--- a/test/Table_Tests/src/Database/Common/Names_Length_Limits_Spec.enso
+++ b/test/Table_Tests/src/Database/Common/Names_Length_Limits_Spec.enso
@@ -4,6 +4,7 @@ from Standard.Table import Table, Join_Kind, Aggregate_Column, Value_Type, expr
 from Standard.Table.Errors import No_Such_Column, Name_Too_Long, Truncated_Column_Names, Duplicate_Output_Column_Names
 
 from Standard.Database import all
+from Standard.Database.Dialect import Temp_Table_Style
 from Standard.Database.Errors import Table_Not_Found, Unsupported_Database_Operation
 
 from Standard.Test import all
@@ -30,7 +31,9 @@ add_specs suite_builder prefix create_connection_func =
             data.teardown
 
         entity_naming_properties = data.connection.base_connection.entity_naming_properties
-        max_table_name_length = entity_naming_properties.for_table_names.size_limit
+        max_table_name_length = case data.connection.dialect.temp_table_style of
+            Temp_Table_Style.Temporary_Table -> entity_naming_properties.for_table_names.size_limit
+            Temp_Table_Style.Hash_Prefix -> entity_naming_properties.for_table_names.size_limit - 1
         max_column_name_length = entity_naming_properties.for_column_names.size_limit
         has_maximum_table_name_length = max_table_name_length.is_nothing.not
         has_maximum_column_name_length = max_column_name_length.is_nothing.not
@@ -50,19 +53,22 @@ add_specs suite_builder prefix create_connection_func =
             group_builder.specify "should not allow to create a table with a name that is too long" <|
                 name = "a" * (max_table_name_length + 1)
                 src = Table.new [["X", [1, 2, 3]]]
+                temp_table_name = case data.connection.dialect.temp_table_style of
+                    Temp_Table_Style.Temporary_Table -> name
+                    Temp_Table_Style.Hash_Prefix -> ("#" + name)
 
                 run_with_and_without_output <|
                     r = src.select_into_database_table data.connection name temporary=True
                     r.should_fail_with Name_Too_Long
                     r.catch.entity_kind . should_equal "table"
-                    r.catch.name . should_equal name
+                    r.catch.name . should_equal temp_table_name
                     r.catch.to_display_text . should_contain "The table name"
                     r.catch.to_display_text . should_contain "is too long"
 
-                    r2 = data.connection.create_table name [Column_Description.Value "X" Value_Type.Integer] temporary=True
+                    r2 = data.connection.create_table temp_table_name [Column_Description.Value "X" Value_Type.Integer] temporary=True
                     r2.should_fail_with Name_Too_Long
 
-                data.connection.query (SQL_Query.Table_Name name) . should_fail_with Name_Too_Long
+                data.connection.query (SQL_Query.Table_Name temp_table_name) . should_fail_with Name_Too_Long
 
             group_builder.specify "should ensure length is measured in small units, even if grapheme length is lower" <|
                 big_grapheme = '\u{1F926}\u{1F3FC}\u200D\u2642\uFE0F'
@@ -86,7 +92,9 @@ add_specs suite_builder prefix create_connection_func =
                 t2 = src.select_into_database_table data.connection name_large temporary=True
                 t2.should_fail_with Name_Too_Long
                 t2.catch.entity_kind . should_equal "table"
-                t2.catch.name . should_equal name_large
+                case data.connection.dialect.temp_table_style of
+                        Temp_Table_Style.Temporary_Table -> t2.catch.name . should_equal name_large
+                        Temp_Table_Style.Hash_Prefix -> t2.catch.name . should_equal ("#" + name_large)
                 t2.catch.to_display_text.should_contain "too long"
 
                 ## This name may be supported or not, depending on how the
@@ -112,7 +120,8 @@ add_specs suite_builder prefix create_connection_func =
                 src = Table.new [["X", [1, 2, 3]]]
                 t1 = src.select_into_database_table data.connection long_name temporary=True
                 Problems.assume_no_problems t1
-                data.connection.query long_name . at "X" . to_vector . should_equal_ignoring_order [1, 2, 3]
+                
+                t1 . at "X" . to_vector . should_equal_ignoring_order [1, 2, 3]
 
                 longer_name_with_same_prefix = long_name + ("z" * 10)
                 data.connection.query longer_name_with_same_prefix . should_fail_with Name_Too_Long
@@ -413,36 +422,36 @@ add_specs suite_builder prefix create_connection_func =
                 Test.with_clue "join: " <|
                     t2 = db_table.join db_table join_kind=Join_Kind.Left_Outer on=name_a right_prefix="RIGHT_"
                     w = Problems.expect_warning Truncated_Column_Names t2
-                    w.original_names . should_equal ["RIGHT_" + name_a, "RIGHT_" + name_b]
+                    w.original_names . should_equal_ignoring_order ["RIGHT_" + name_a, "RIGHT_" + name_b]
                     t2.row_count . should_equal 3
 
                     m2 = t2.read . sort name_a
-                    m2.column_names . should_equal [name_a, name_b]+w.truncated_names
+                    m2.column_names . should_equal_ignoring_order [name_a, name_b]+w.truncated_names
                     m2.at name_a . to_vector . should_equal [1, 2, 3]
                     m2.at name_b . to_vector . should_equal [4, 5, 6]
-                    m2.at (w.truncated_names.at 0) . to_vector . should_equal [1, 2, 3]
-                    m2.at (w.truncated_names.at 1) . to_vector . should_equal [4, 5, 6]
+                    m2.at (w.names_map.at ("RIGHT_" + name_a)) . to_vector . should_equal [1, 2, 3]
+                    m2.at (w.names_map.at ("RIGHT_" + name_b)) . to_vector . should_equal [4, 5, 6]
 
                 Test.with_clue "cross_join: " <|
                     t2 = db_table.cross_join db_table right_prefix="RIGHT_"
                     w = Problems.expect_warning Truncated_Column_Names t2
-                    w.original_names . should_equal ["RIGHT_" + name_a, "RIGHT_" + name_b]
+                    w.original_names . should_equal_ignoring_order ["RIGHT_" + name_a, "RIGHT_" + name_b]
                     t2.row_count . should_equal 9
 
                     m2 = t2.read . sort [name_a, name_b]
-                    m2.column_names . should_equal [name_a, name_b]+w.truncated_names
+                    m2.column_names . should_equal_ignoring_order [name_a, name_b]+w.truncated_names
                     m2.at name_a . to_vector . distinct . should_equal_ignoring_order [1, 2, 3]
                     m2.at name_b . to_vector . distinct . should_equal_ignoring_order [4, 5, 6]
-                    m2.at (w.truncated_names.at 0) . to_vector . distinct . should_equal_ignoring_order [1, 2, 3]
-                    m2.at (w.truncated_names.at 1) . to_vector . distinct . should_equal_ignoring_order [4, 5, 6]
+                    m2.at (w.names_map.at ("RIGHT_" + name_a)) . to_vector . distinct . should_equal_ignoring_order [1, 2, 3]
+                    m2.at (w.names_map.at ("RIGHT_" + name_b)) . to_vector . distinct . should_equal_ignoring_order [4, 5, 6]
 
             group_builder.specify "should truncate new column names in other operations" <|
                 name_a = "x" * (max_column_name_length - 1) + "A"
                 name_b = "x" * (max_column_name_length - 1) + "B"
                 src_a = Table.new [[name_a, ["1", "2", "3"]]]
                 src_b = Table.new [[name_b, [4, 5, 6]]]
-                db_a = src_a.select_into_database_table data.connection (Name_Generator.random_name "long-column-names-a") temporary=True
-                db_b = src_b.select_into_database_table data.connection (Name_Generator.random_name "long-column-names-b") temporary=True
+                db_a = src_a.select_into_database_table data.connection (Name_Generator.random_name "long-column-names-a") temporary=True primary_key=Nothing
+                db_b = src_b.select_into_database_table data.connection (Name_Generator.random_name "long-column-names-b") temporary=True primary_key=Nothing
 
                 Test.with_clue "zip test will have to be amended once it is implemented: " <|
                     db_a.zip db_b . should_fail_with Unsupported_Database_Operation
diff --git a/test/Table_Tests/src/Database/Upload_Spec.enso b/test/Table_Tests/src/Database/Upload_Spec.enso
index 7acaf95f1c52..8cbd010ac294 100644
--- a/test/Table_Tests/src/Database/Upload_Spec.enso
+++ b/test/Table_Tests/src/Database/Upload_Spec.enso
@@ -370,6 +370,42 @@ add_specs suite_builder setup make_new_connection persistent_connector=True =
                 r1 = data.in_memory_table.select_into_database_table data.connection (Name_Generator.random_name "primary-key-4") primary_key=["X", "nonexistent"]
                 r1.should_fail_with Missing_Input_Columns
 
+        if data.connection.dialect.dialect_flags.primary_key.allows_nulls then
+            group_builder.specify "should not fail if the primary key contains nulls" <|
+                t1 = Table.new [['X', [1, Nothing, 3]], ['Y', [4, 5, Nothing]]]
+                run_with_and_without_output <|
+                    r2 = t1.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-1") temporary=True primary_key=['X']
+                    r2.row_count . should_equal 3
+
+        if data.connection.dialect.dialect_flags.primary_key.allows_nulls.not then
+            group_builder.specify "should fail if the primary key contains nulls" <|
+                t1 = Table.new [['X', [1, Nothing, 3]], ['Y', [4, 5, Nothing]]]
+                run_with_and_without_output <|
+                    r1 = t1.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-0") temporary=True primary_key=[]
+                    r1.row_count . should_equal 3
+
+                    r2 = t1.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-1") temporary=True primary_key=['X']
+                    r2.should_fail_with Null_Values_In_Key_Columns
+                    r2.catch . example_row . should_equal [Nothing, 5]
+
+                    r3 = t1.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-2") temporary=True primary_key=['Y']
+                    r3.should_fail_with Null_Values_In_Key_Columns
+                    r3.catch . example_row . should_equal [3, Nothing]
+
+                    r4 = t1.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-3") temporary=True primary_key=['X', 'Y']
+                    r4.should_fail_with Null_Values_In_Key_Columns
+                    r4.catch . example_row . should_equal [Nothing, 5]
+
+                large_with_null = (0.up_to 1010).to_vector + [Nothing]
+                big_table = Table.new [['X', large_with_null+large_with_null]]
+                Context.Output.with_disabled <|
+                    r5 = big_table.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-4") temporary=True primary_key=['X']
+                    r5.column_names . should_equal ['X']
+                    r5.row_count . should_equal 1000
+                Context.Output.with_enabled <|
+                    r5 = big_table.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-5") temporary=True primary_key=['X']
+                    r5.should_fail_with Null_Values_In_Key_Columns
+
         snowflake_constraints_pending = if prefix.contains "Snowflake" then "Disabled until https://github.com/enso-org/enso/issues/10737 is resolved."
         group_builder.specify "should fail if the primary key is not unique" pending=snowflake_constraints_pending <|
             t1 = Table.new [["X", [1, 2, 1]], ["Y", ['b', 'b', 'a']]]
@@ -525,6 +561,49 @@ add_specs suite_builder setup make_new_connection persistent_connector=True =
                 r1 = db_table.select_into_database_table data.connection (Name_Generator.random_name "copied-table") temporary=True primary_key=["nonexistent"]
                 r1.should_fail_with Missing_Input_Columns
 
+        if data.connection.dialect.dialect_flags.primary_key.allows_nulls then
+            group_builder.specify "should fail when the primary key contains nulls" <|
+                t = Table.new [['X', [1, Nothing, 3]], ['Y', [4, 5, Nothing]]]
+                db_table = t.select_into_database_table data.connection (Name_Generator.random_name "source-table-nulls-1") temporary=True primary_key=Nothing
+                Problems.assume_no_problems db_table
+
+                run_with_and_without_output <|
+                    r2 = db_table.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-2") temporary=True primary_key=['X']
+                    r2.row_count . should_equal 3
+
+        if data.connection.dialect.dialect_flags.primary_key.allows_nulls.not then
+            group_builder.specify "should fail when the primary key contains nulls" <|
+                t = Table.new [['X', [1, Nothing, 3]], ['Y', [4, 5, Nothing]]]
+                db_table = t.select_into_database_table data.connection (Name_Generator.random_name "source-table-nulls-1") temporary=True primary_key=Nothing
+                Problems.assume_no_problems db_table
+
+                run_with_and_without_output <|
+                    r1 = db_table.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-1") temporary=True primary_key=[]
+                    r1.row_count . should_equal 3
+
+                    r2 = db_table.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-2") temporary=True primary_key=['X']
+                    r2.should_fail_with Null_Values_In_Key_Columns
+                    r2.catch . example_row . should_equal [Nothing, 5]
+
+                    r3 = db_table.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-3") temporary=True primary_key=['Y']
+                    r3.should_fail_with Null_Values_In_Key_Columns
+                    r3.catch . example_row . should_equal [3, Nothing]
+
+                    r4 = db_table.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-4") temporary=True primary_key=['X', 'Y']
+                    r4.should_fail_with Null_Values_In_Key_Columns
+                    r4.catch . example_row . should_equal [Nothing, 5]
+
+                large_with_null = (0.up_to 1010).to_vector + [Nothing]
+                big_table = Table.new [['X', large_with_null+large_with_null]]
+                db_table_2 = big_table.select_into_database_table data.connection (Name_Generator.random_name "source-table-nulls-2") temporary=True primary_key=Nothing
+                Context.Output.with_disabled <|
+                    r5 = db_table_2.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-5") temporary=True primary_key=['X']
+                    r5.column_names . should_equal ['X']
+                    r5.row_count . should_equal 1000
+                Context.Output.with_enabled <|
+                    r5 = db_table_2.select_into_database_table data.connection (Name_Generator.random_name "primary-key-null-6") temporary=True primary_key=['X']
+                    r5.should_fail_with Null_Values_In_Key_Columns
+
         snowflake_constraints_pending = if prefix.contains "Snowflake" then "Disabled until https://github.com/enso-org/enso/issues/10737 is resolved."
         group_builder.specify "should fail when the primary key is not unique" pending=snowflake_constraints_pending <|
             t = Table.new [["X", [1, 2, 1]], ["Y", ['b', 'b', 'a']]]
diff --git a/test/Table_Tests/src/In_Memory/Table_Running_Spec.enso b/test/Table_Tests/src/In_Memory/Table_Running_Spec.enso
index 8a47a631f8e8..dcc65ebfbf6a 100644
--- a/test/Table_Tests/src/In_Memory/Table_Running_Spec.enso
+++ b/test/Table_Tests/src/In_Memory/Table_Running_Spec.enso
@@ -67,8 +67,35 @@ add_specs suite_builder =
             # 4 | SG0456 | E         | 73.77        | 5
             expected_table = data.table.zip expected_column
             result.should_equal expected_table
+        group_builder.specify "Setting the name the same as an existing column errors if update_mode not changed" <|
+            result = data.table.running Statistic.Count "Passenger" "Passenger"
+            result.should_fail_with (Existing_Column.Error 'Passenger')
+        group_builder.specify "Setting the name the same as an existing column works if update_mode update" <|
+            result = data.table.running Statistic.Count "Passenger" "Passenger" set_mode=..Update
+            expected_column = Column.from_vector "My Custom Name" [1, 2, 3, 4, 5]
+            #   | Flight | Passenger | Ticket Price 
+            #---+--------+-----------+--------------
+            # 0 | BA0123 | 1         | 100.5        
+            # 1 | BA0123 | 2         | 575.99       
+            # 2 | SG0456 | 3         | 73.23        
+            # 3 | BA0123 | 4         | 112.34       
+            # 4 | SG0456 | 5         | 73.77        
+            expected_table = data.table.set expected_column "Passenger"
+            result.should_equal expected_table
+        group_builder.specify "Not setting the name updates the first column if update_mode update" <|
+            result = data.table.running set_mode=..Update
+            expected_column = Column.from_vector "Flight" [1, 2, 3, 4, 5]
+            #   | Flight | Passenger | Ticket Price 
+            #---+--------+-----------+--------------
+            # 0 | 1      | A         | 100.5        
+            # 1 | 2      | B         | 575.99       
+            # 2 | 3      | A         | 73.23        
+            # 3 | 4      | C         | 112.34       
+            # 4 | 5      | E         | 73.77        
+            expected_table = data.table.set expected_column
+            result.should_equal expected_table
         group_builder.specify "Can group by and provide running count per group" <|
-            result = data.table.running Statistic.Count "Passenger" "Passenger num per flight" ["Flight"]
+            result = data.table.running Statistic.Count "Passenger" "Passenger num per flight" group_by=["Flight"]
             expected_column = Column.from_vector "Passenger num per flight" [1, 2, 1, 3, 2]
             #   | Flight | Passenger | Ticket Price | Passenger num per flight
             #---+--------+-----------+--------------+-------------------------
@@ -80,7 +107,7 @@ add_specs suite_builder =
             expected_table = data.table.zip expected_column
             result.should_equal expected_table
         group_builder.specify "Can group by and provide running count per group based on order by" <|
-            result = data.table.running Statistic.Count "Passenger" "Ranked ticket cost per pass" ["Passenger"] ["Ticket Price"]
+            result = data.table.running Statistic.Count "Passenger" "Ranked ticket cost per pass" group_by=["Passenger"] order_by=["Ticket Price"]
             expected_column = Column.from_vector "Ranked ticket cost per pass" [2, 1, 1, 1, 1]
             #   | Flight | Passenger | Ticket Price | Ranked ticket cost per pass
             #---+--------+-----------+--------------+-------------------------
@@ -92,7 +119,7 @@ add_specs suite_builder =
             expected_table = data.table.zip expected_column
             result.should_equal expected_table
         group_builder.specify "Can provide running count based on order by without grouping" <|
-            result = data.table.running Statistic.Count "Passenger" "Ranked ticket cost" [] ["Ticket Price"]
+            result = data.table.running Statistic.Count "Passenger" "Ranked ticket cost" order_by=["Ticket Price"]
             expected_column = Column.from_vector "Ranked ticket cost" [3, 5, 1, 4, 2]
             #   | Flight | Passenger | Ticket Price | Ranked ticket cost
             #---+--------+-----------+--------------+-------------------------
@@ -117,8 +144,35 @@ add_specs suite_builder =
             # 4 | SG0456 | E         | 73.77        | 935.83
             expected_table = data.table.zip expected_column
             result.should_equal expected_table
+        group_builder.specify "Setting the name the same as an existing column errors if update_mode not changed" <|
+            result = data.table.running Statistic.Sum "Ticket Price" "Ticket Price"
+            result.should_fail_with (Existing_Column.Error 'Ticket Price')
+        group_builder.specify "Setting the name the same as an existing column works if update_mode update" <|
+            result = data.table.running Statistic.Sum "Ticket Price" "Ticket Price" set_mode=..Update
+            expected_column = Column.from_vector "Ticket Price" [100.5, 676.49, 749.72, 862.0600000000001, 935.83]
+            #   | Flight | Passenger | Ticket Price
+            #---+--------+-----------+-------------------------
+            # 0 | BA0123 | A         | 100.5
+            # 1 | BA0123 | B         | 676.49
+            # 2 | SG0456 | A         | 749.72
+            # 3 | BA0123 | C         | 862.06
+            # 4 | SG0456 | E         | 935.83
+            expected_table = data.table.set expected_column "Ticket Price"
+            result.should_equal expected_table
+        group_builder.specify "Not setting the name overrides existing column if update_mode update" <|
+            result = data.table.running Statistic.Sum "Ticket Price" set_mode=..Update
+            expected_column = Column.from_vector "Ticket Price" [100.5, 676.49, 749.72, 862.0600000000001, 935.83]
+            #   | Flight | Passenger | Ticket Price
+            #---+--------+-----------+-------------------------
+            # 0 | BA0123 | A         | 100.5
+            # 1 | BA0123 | B         | 676.49
+            # 2 | SG0456 | A         | 749.72
+            # 3 | BA0123 | C         | 862.06
+            # 4 | SG0456 | E         | 935.83
+            expected_table = data.table.set expected_column "Ticket Price"
+            result.should_equal expected_table
         group_builder.specify "Can group by and provide running sum per group" <|
-            result = data.table.running Statistic.Sum "Ticket Price" "Running" ["Flight"]
+            result = data.table.running Statistic.Sum "Ticket Price" "Running" group_by=["Flight"]
             expected_column = Column.from_vector "Running" [100.5, 676.49, 73.23, 788.83, 147]
             #   | Flight | Passenger | Ticket Price | Running
             #---+--------+-----------+--------------+-------------------------
@@ -130,7 +184,7 @@ add_specs suite_builder =
             expected_table = data.table.zip expected_column
             result.should_equal expected_table
         group_builder.specify "Can group by and provide running sum per group based on order by" <|
-            result = data.table.running Statistic.Sum "Ticket Price" "Sum ticket cost per pass" ["Passenger"] ["Ticket Price"]
+            result = data.table.running Statistic.Sum "Ticket Price" "Sum ticket cost per pass" group_by=["Passenger"] order_by=["Ticket Price"]
             expected_column = Column.from_vector "Sum ticket cost per pass" [173.73000000000002, 575.99, 73.23, 112.34, 73.77]
             #   | Flight | Passenger | Ticket Price | Sum ticket cost per pass
             #---+--------+-----------+--------------+-------------------------
@@ -142,7 +196,7 @@ add_specs suite_builder =
             expected_table = data.table.zip expected_column
             result.should_equal expected_table
         group_builder.specify "Can provide running sum based on order by without grouping" <|
-            result = data.table.running Statistic.Sum "Ticket Price" "Sum ticket cost" [] ["Ticket Price"]
+            result = data.table.running Statistic.Sum "Ticket Price" "Sum ticket cost" order_by=["Ticket Price"]
             expected_column = Column.from_vector "Sum ticket cost" [247.5, 935.83, 73.23, 359.84000000000003, 147]
             #   | Flight | Passenger | Ticket Price | Sum ticket cost
             #---+--------+-----------+--------------+-------------------------
@@ -441,7 +495,7 @@ add_specs suite_builder =
             warnings = Problems.get_attached_warnings result
             warnings.not_empty . should_be_false
         group_builder.specify "Running min ignores nothing values and works with grouping and warns" <|
-            result = table.running Statistic.Minimum "Ticket Price" "Running" ["Flight"]
+            result = table.running Statistic.Minimum "Ticket Price" "Running" group_by=["Flight"]
             expected_column = Column.from_vector "Running" [100.5, 100.5, Nothing, 100.5, 73.77]
             #   | Flight | Passenger | Ticket Price | Running
             #---+--------+-----------+--------------+-------------------------
@@ -456,7 +510,7 @@ add_specs suite_builder =
             w.column.should_equal "Ticket Price"
             w.rows.should_equal [2, 3]
         group_builder.specify "Running max ignores nothing values and works with grouping and warns" <|
-            result = table.running Statistic.Maximum "Ticket Price" "Running" ["Flight"]
+            result = table.running Statistic.Maximum "Ticket Price" "Running" group_by=["Flight"]
             expected_column = Column.from_vector "Running" [100.5, 575.99, Nothing, 575.99, 73.77]
             #   | Flight | Passenger | Ticket Price | Running
             #---+--------+-----------+--------------+-------------------------
@@ -486,7 +540,7 @@ add_specs suite_builder =
             w.column.should_equal "Ticket Price"
             w.rows.should_equal [2, 3]
         group_builder.specify "Running mean ignores nothing values and works when first value is Nothing and warns" <|
-            result = table.running Statistic.Mean "Ticket Price" "Running" ["Flight"]
+            result = table.running Statistic.Mean "Ticket Price" "Running" group_by=["Flight"]
             expected_column = Column.from_vector "Running" [100.5, 338.245, Nothing, 338.245, 73.77]
             #   | Flight | Passenger | Ticket Price | Running
             #---+--------+-----------+--------------+-------------------------
@@ -556,7 +610,7 @@ add_specs suite_builder =
             warnings = Problems.get_attached_warnings result
             warnings.not_empty . should_be_false
         group_builder.specify "Running min ignores NaN values and works with grouping and warns" <|
-            result = table.running Statistic.Minimum "Ticket Price" "Running" ["Flight"]
+            result = table.running Statistic.Minimum "Ticket Price" "Running" group_by=["Flight"]
             expected_column = Column.from_vector "Running" [100.5, 100.5, Number.nan, 100.5, 73.77]
             #   | Flight | Passenger | Ticket Price | Running
             #---+--------+-----------+--------------+-------------------------
@@ -571,7 +625,7 @@ add_specs suite_builder =
             w.column.should_equal "Ticket Price"
             w.rows.should_equal [2, 3]
         group_builder.specify "Running max ignores NaN values and works with grouping and warns" <|
-            result = table.running Statistic.Maximum "Ticket Price" "Running" ["Flight"]
+            result = table.running Statistic.Maximum "Ticket Price" "Running" group_by=["Flight"]
             expected_column = Column.from_vector "Running" [100.5, 575.99, Number.nan, 575.99, 73.77]
             #   | Flight | Passenger | Ticket Price | Running
             #---+--------+-----------+--------------+-------------------------
@@ -601,7 +655,7 @@ add_specs suite_builder =
             w.column.should_equal "Ticket Price"
             w.rows.should_equal [2, 3]
         group_builder.specify "Running mean ignores NaN values and works when first value is NaN and warns" <|
-            result = table.running Statistic.Mean "Ticket Price" "Running" ["Flight"]
+            result = table.running Statistic.Mean "Ticket Price" "Running" group_by=["Flight"]
             expected_column = Column.from_vector "Running" [100.5, 338.245, Number.nan, 338.245, 73.77]
             #   | Flight | Passenger | Ticket Price | Running
             #---+--------+-----------+--------------+-------------------------
diff --git a/test/Visualization_Tests/src/Scatter_Plot_Spec.enso b/test/Visualization_Tests/src/Scatter_Plot_Spec.enso
index 98dd266f21b1..920132b672a4 100644
--- a/test/Visualization_Tests/src/Scatter_Plot_Spec.enso
+++ b/test/Visualization_Tests/src/Scatter_Plot_Spec.enso
@@ -1,6 +1,6 @@
 from Standard.Base import all
 
-from Standard.Table import Table, Column
+from Standard.Table import Table, Column, Value_Type
 
 import Standard.Visualization.Scatter_Plot
 
@@ -10,18 +10,18 @@ from Standard.Test import all
 import project
 
 add_specs suite_builder =
-    expect_text text axis_expected_text data_expected_text is_multi =
+    expect_text text axis_expected_text data_expected_text row_method is_multi =
         json = Json.parse text
-        json.field_names.should_equal ['data', 'axis', 'is_multi_series']
+        json.field_names.should_equal ['data', 'axis', 'is_multi_series', 'get_row_method', 'x_value_type']
 
-        expect_text = '{"axis": ' + axis_expected_text + ', "data": ' + data_expected_text + ', "is_multi_series": ' + is_multi + '}'
+        expect_text = '{"axis": ' + axis_expected_text + ', "data": ' + data_expected_text + ', "is_multi_series": ' + is_multi + ', "get_row_method": ' + row_method + ', "x_value_type": "Integer"' + '}'
         expected_result = Json.parse expect_text
 
         json.should_equal expected_result
 
-    expect value axis_expected_text data_expected_text (is_multi='false') =
+    expect value axis_expected_text data_expected_text row_method (is_multi='false') =
         text = Scatter_Plot.process_to_json_text value
-        expect_text text axis_expected_text data_expected_text is_multi
+        expect_text text axis_expected_text data_expected_text row_method is_multi
 
     index = Scatter_Plot.index_name
     axis label = JS_Object.from_pairs [['label',label]]
@@ -35,32 +35,32 @@ add_specs suite_builder =
             row_1  = [11 , 10 ]
             row_2  = [21 , 20 ]
             table  = Table.from_rows header [row_1, row_2]
-            expect table (labels 'α' 'ω') '[{"x":11,"y":10},{"x":21,"y":20}]'
+            expect table (labels 'α' 'ω') '[{"x":11,"y":10, "row_number": 0},{"x":21,"y":20, "row_number": 1}]' '"get_row"'
 
         group_builder.specify "recognizes all relevant columns" <|
             header = ['x' , 'y' , 'size' , 'shape'  , 'label' , 'color' ]
             row_1 =  [11  , 10  , 50     , 'square' , 'label' , 'ff0000']
             table = Table.from_rows header [row_1]
-            expect table (labels 'x' 'y') '[{"color":"ff0000","label":"label","shape":"square","size":50,"x":11,"y":10}]'
+            expect table (labels 'x' 'y') '[{"color":"ff0000","label":"label","shape":"square","size":50,"x":11,"y":10, "row_number": 0}]' '"get_row"'
 
         group_builder.specify "is case-insensitive" <|
             header = ['X' , 'Y' , 'Size' , 'Shape'  , 'Label' , 'Color' ]
             row_1 =  [11  , 10  , 50     , 'square' , 'label' , 'ff0000']
             table = Table.from_rows header [row_1]
-            expect table (labels 'X' 'Y') '[{"color":"ff0000","label":"label","shape":"square","size":50,"x":11,"y":10}]'
+            expect table (labels 'X' 'Y') '[{"color":"ff0000","label":"label","shape":"square","size":50,"x":11,"y":10, "row_number": 0}]' '"get_row"'
 
         group_builder.specify "uses first unrecognized numeric column as `y` fallback" <|
             header = ['x' , 'size' , 'name'   , 'z' , 'ω']
             row_1 =  [11  , 50     , 'circul' ,  20 ,  30]
             table = Table.from_rows header [row_1]
-            expect table (labels_multi 'x' 'z' 'ω') '[{"size":50,"x":11,"y":20,"(y_multi 0)":30}]' 'true'
+            expect table (labels_multi 'x' 'z' 'ω') '[{"size":50,"x":11,"y":20,"(y_multi 0)":30, "row_number": 0}]' '"get_row"' 'true'
 
         group_builder.specify "provided only recognized columns" <|
             header = ['x', 'y' , 'bar' , 'size']
             row_1 =  [11 , 10  , 'aa'  , 40    ]
             row_2 =  [21 , 20  , 'bb'  , 50    ]
             table = Table.from_rows header [row_1, row_2]
-            expect table (labels 'x' 'y') '[{"size":40,"x":11,"y":10},{"size":50,"x":21,"y":20}]'
+            expect table (labels 'x' 'y') '[{"size":40,"x":11,"y":10, "row_number": 0},{"size":50,"x":21,"y":20, "row_number": 1}]' '"get_row"'
 
         group_builder.specify "provided only recognized columns within bounds" <|
             header = ['x', 'y' , 'bar' , 'size']
@@ -71,24 +71,24 @@ add_specs suite_builder =
             table = Table.from_rows header [row_1, row_2, row_3, row_4]
             bounds = [0,5,25,25]
             text = Scatter_Plot.process_to_json_text table bounds
-            expect_text text (labels 'x' 'y') '[{"size":40,"x":11,"y":10},{"size":50,"x":21,"y":20}]'
+            expect_text text (labels 'x' 'y') '[{"size":40,"x":11,"y":10, "row_number": 0},{"size":50,"x":21,"y":20, "row_number": 1}]' '"get_row"'
 
         group_builder.specify "used default index for `x` if none set" <|
             header = [ 'y'  , 'bar' , 'size']
             row_1 =  [ 10   , 'aa'  , 40    ]
             row_2 =  [ 20   , 'bb'  , 50    ]
             table = Table.from_rows header [row_1, row_2]
-            expect table (labels index 'y') '[{"size":40,"x":0,"y":10},{"size":50,"x":1,"y":20}]'
+            expect table (labels index 'y') '[{"size":40,"x":0,"y":10, "row_number": 0},{"size":50,"x":1,"y":20, "row_number": 1}]' '"get_row"'
 
         group_builder.specify "using indices for x if given a vector" <|
             vector = [0,10,20]
-            expect vector no_labels '[{"x":0,"y":0},{"x":1,"y":10},{"x":2,"y":20}]'
+            expect vector no_labels '[{"x":0,"y":0, "row_number": 0},{"x":1,"y":10, "row_number": 1},{"x":2,"y":20, "row_number": 2}]' '"at"'
 
         group_builder.specify "limit the number of elements" <|
             vector = [0,10,20,30]
             text = Scatter_Plot.process_to_json_text vector limit=2
             json = Json.parse text
-            json.field_names.should_equal ['data','axis', 'is_multi_series']
+            json.field_names.should_equal ['data','axis', 'is_multi_series', 'get_row_method', 'x_value_type']
             data = json.get 'data'
             data.should_be_a Vector
             data.length . should_equal 2
@@ -97,24 +97,23 @@ add_specs suite_builder =
             vector = (-15).up_to 15 . map (x -> x * x)
             text = Scatter_Plot.process_to_json_text vector limit=10
             json = Json.parse text
-            json.field_names.should_equal ['data','axis', 'is_multi_series']
+            json.field_names.should_equal ['data','axis', 'is_multi_series', 'get_row_method', 'x_value_type']
             data = json.get 'data'
             data.should_be_a Vector
             data.length . should_equal 10
-            (data.take (..First 3) . sort on=(_.get "x")).to_text . should_equal '[{"x":0,"y":225}, {"x":15,"y":0}, {"x":29,"y":196}]'
+            (data.take (..First 3) . sort on=(_.get "x")).to_text . should_equal '[{"x":0,"y":225,"row_number":0}, {"x":15,"y":0,"row_number":15}, {"x":29,"y":196,"row_number":29}]'
 
         group_builder.specify "filter the elements" <|
             vector = [0,10,20,30]
             bounds = [0,5,10,25]
             text = Scatter_Plot.process_to_json_text vector bounds
-            expect_text text no_labels '[{"x":1,"y":10},{"x":2,"y":20}]'
+            expect_text text no_labels '[{"x":1,"y":10, "row_number": 0},{"x":2,"y":20, "row_number": 1}]' '"at"'
 
         group_builder.specify "using indices for x if given a range" <|
             value = 2.up_to 5
-            expect value no_labels '[{"x":0,"y":2},{"x":1,"y":3},{"x":2,"y":4}]'
+            expect value no_labels '[{"x":0,"y":2, "row_number": 0},{"x":1,"y":3, "row_number": 1},{"x":2,"y":4, "row_number": 2}]' '"at"'
 
 main filter=Nothing =
     suite = Test.build suite_builder->
         add_specs suite_builder
     suite.run_with_filter filter
-
diff --git a/tools/legal-review-helper/package-lock.json b/tools/legal-review-helper/package-lock.json
index cf20fa27a908..1388b0ced2de 100644
--- a/tools/legal-review-helper/package-lock.json
+++ b/tools/legal-review-helper/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "express": "^4.17.1",
+        "express": "^4.21.0",
         "open": "^7.3.0"
       }
     },
@@ -31,20 +31,20 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
     "node_modules/body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dependencies": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -62,12 +62,18 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -93,9 +99,9 @@
       }
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -113,6 +119,22 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -136,13 +158,32 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "engines": {
         "node": ">= 0.8"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -157,36 +198,36 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -198,12 +239,12 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -231,39 +272,57 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
       "dependencies": {
-        "function-bind": "^1.1.1"
+        "get-intrinsic": "^1.1.3"
       },
-      "engines": {
-        "node": ">= 0.4.0"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -282,6 +341,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -355,9 +425,12 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/methods": {
       "version": "1.1.2",
@@ -411,9 +484,12 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -453,9 +529,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
@@ -470,11 +546,11 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -492,9 +568,9 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dependencies": {
         "bytes": "3.1.2",
         "http-errors": "2.0.0",
@@ -530,9 +606,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -552,38 +628,66 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/send/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
diff --git a/tools/legal-review-helper/package.json b/tools/legal-review-helper/package.json
index d15a2c4eac12..880ac58a390e 100644
--- a/tools/legal-review-helper/package.json
+++ b/tools/legal-review-helper/package.json
@@ -10,7 +10,7 @@
   "author": "Enso Team",
   "license": "Apache-2.0",
   "dependencies": {
-    "express": "^4.17.1",
+    "express": "^4.21.0",
     "open": "^7.3.0"
   }
 }
diff --git a/tools/performance/engine-benchmarks/website_regen.py b/tools/performance/engine-benchmarks/website_regen.py
index be408fa6f7eb..955d92f7bd11 100644
--- a/tools/performance/engine-benchmarks/website_regen.py
+++ b/tools/performance/engine-benchmarks/website_regen.py
@@ -16,8 +16,8 @@
 from bench_tool.website import generate_bench_website
 
 # The inception date of the benchmarks, i.e., the date of the first benchmark run.
-ENGINE_SINCE = datetime.fromisoformat("2022-12-01")
-STDLIB_SINCE = datetime.fromisoformat("2023-08-22")
+ENGINE_SINCE = datetime.fromisoformat("2024-04-01")
+STDLIB_SINCE = datetime.fromisoformat("2024-04-01")
 
 _logger = logging.getLogger("website_regen")
 
diff --git a/tools/simple-library-server/package-lock.json b/tools/simple-library-server/package-lock.json
index d0f6a2571092..1e6a188ae920 100644
--- a/tools/simple-library-server/package-lock.json
+++ b/tools/simple-library-server/package-lock.json
@@ -10,7 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "compression": "^1.7.4",
-        "express": "^4.19.2",
+        "express": "^4.21.0",
         "multer": "^1.4.2",
         "semver": "^7.5.2",
         "yargs": "^17.0.1"
@@ -64,9 +64,9 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
     "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.5",
@@ -76,7 +76,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -352,9 +352,9 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -400,36 +400,36 @@
       }
     },
     "node_modules/express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -460,12 +460,12 @@
       ]
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -653,9 +653,12 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/methods": {
       "version": "1.1.2",
@@ -752,9 +755,12 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -787,9 +793,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
@@ -809,11 +815,11 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -896,9 +902,9 @@
       }
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -918,20 +924,28 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/send/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -1171,9 +1185,9 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
     "body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "requires": {
         "bytes": "3.1.2",
         "content-type": "~1.0.5",
@@ -1183,7 +1197,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -1395,9 +1409,9 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="
     },
     "es-define-property": {
       "version": "1.0.0",
@@ -1428,36 +1442,36 @@
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
     "express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -1473,12 +1487,12 @@
       }
     },
     "finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "requires": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -1606,9 +1620,9 @@
       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
     "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ=="
     },
     "methods": {
       "version": "1.1.2",
@@ -1677,9 +1691,9 @@
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ=="
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g=="
     },
     "on-finished": {
       "version": "2.4.1",
@@ -1700,9 +1714,9 @@
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
     "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -1719,11 +1733,11 @@
       }
     },
     "qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "requires": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       }
     },
     "range-parser": {
@@ -1784,9 +1798,9 @@
       }
     },
     "send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "requires": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -1803,6 +1817,11 @@
         "statuses": "2.0.1"
       },
       "dependencies": {
+        "encodeurl": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+          "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
+        },
         "ms": {
           "version": "2.1.3",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1811,14 +1830,14 @@
       }
     },
     "serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "requires": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       }
     },
     "set-function-length": {
diff --git a/tools/simple-library-server/package.json b/tools/simple-library-server/package.json
index 7c361157ca3b..137a9e50faf3 100644
--- a/tools/simple-library-server/package.json
+++ b/tools/simple-library-server/package.json
@@ -15,7 +15,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "compression": "^1.7.4",
-    "express": "^4.19.2",
+    "express": "^4.21.0",
     "multer": "^1.4.2",
     "semver": "^7.5.2",
     "yargs": "^17.0.1"