diff --git a/.github/workflows/backend-check.yml b/.github/workflows/backend-check.yml
index 901a30cca6..7fc0874564 100644
--- a/.github/workflows/backend-check.yml
+++ b/.github/workflows/backend-check.yml
@@ -53,7 +53,7 @@ jobs:
         timeout-minutes: 16
         run: |
           mkdir -p fake_frontend_build
-          FRONTEND_BUILD_DIR=$(pwd)/fake_frontend_build SQLX_OFFLINE=true cargo check --all-features
+          FRONTEND_BUILD_DIR=$(pwd)/fake_frontend_build SQLX_OFFLINE=true cargo check --features $(./all_features_oss.sh)
 
   check_ee:
     runs-on: ubicloud-standard-8
diff --git a/.github/workflows/build-publish-rh-image.yml b/.github/workflows/build-publish-rh-image.yml
index b919de6e18..848c30c7f6 100644
--- a/.github/workflows/build-publish-rh-image.yml
+++ b/.github/workflows/build-publish-rh-image.yml
@@ -64,7 +64,7 @@ jobs:
           platforms: linux/amd64
           push: true
           build-args: |
-            features=enterprise,enterprise_saml,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,license,otel,http_trigger,zip,oauth2,kafka,sqs_trigger,nats,postgres_trigger,gcp_trigger,mqtt_trigger,websocket,smtp,static_frontend,all_languages,deno_core,mcp
+            features=enterprise,enterprise_saml,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,license,otel,http_trigger,zip,oauth2,kafka,sqs_trigger,nats,postgres_trigger,gcp_trigger,mqtt_trigger,websocket,smtp,static_frontend,all_languages,deno_core,mcp,private
           secrets: |
             rh_username=${{ secrets.RH_USERNAME }}
             rh_password=${{ secrets.RH_PASSWORD }}
@@ -81,7 +81,7 @@ jobs:
           platforms: linux/arm64
           push: true
           build-args: |
-            features=enterprise,enterprise_saml,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,license,otel,http_trigger,zip,oauth2,kafka,sqs_trigger,nats,postgres_trigger,gcp_trigger,mqtt_trigger,websocket,smtp,static_frontend,all_languages,deno_core,mcp
+            features=enterprise,enterprise_saml,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,license,otel,http_trigger,zip,oauth2,kafka,sqs_trigger,nats,postgres_trigger,gcp_trigger,mqtt_trigger,websocket,smtp,static_frontend,all_languages,deno_core,mcp,private
           secrets: |
             rh_username=${{ secrets.RH_USERNAME }}
             rh_password=${{ secrets.RH_PASSWORD }}
diff --git a/.github/workflows/build_windows_worker_.yml b/.github/workflows/build_windows_worker_.yml
index ac1476d76e..738b2a9224 100644
--- a/.github/workflows/build_windows_worker_.yml
+++ b/.github/workflows/build_windows_worker_.yml
@@ -51,7 +51,7 @@ jobs:
           $env:OPENSSL_DIR="${Env:VCPKG_INSTALLATION_ROOT}\installed\x64-windows-static"
           mkdir frontend/build && cd backend
           New-Item -Path . -Name "windmill-api/openapi-deref.yaml" -ItemType "File" -Force
-          cargo build --release --features=enterprise,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,tantivy,license,http_trigger,zip,oauth2,kafka,nats,sqs_trigger,postgres_trigger,gcp_trigger,mqtt_trigger,websocket,smtp,static_frontend,all_languages,mcp
+          cargo build --release --features=enterprise,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,tantivy,license,http_trigger,zip,oauth2,kafka,nats,sqs_trigger,postgres_trigger,gcp_trigger,mqtt_trigger,websocket,smtp,static_frontend,all_languages_windows,mcp,private
       - name: Rename binary with corresponding architecture
         run: |
           Rename-Item -Path ".\backend\target\release\windmill.exe" -NewName "windmill-ee.exe"
diff --git a/.github/workflows/create-docs.yml b/.github/workflows/create-docs.yml
index 209883d24c..2d264f9755 100644
--- a/.github/workflows/create-docs.yml
+++ b/.github/workflows/create-docs.yml
@@ -12,12 +12,12 @@ jobs:
       - name: Check organization membership
         id: check-membership
         env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ORG_ACCESS_TOKEN: ${{ secrets.ORG_ACCESS_TOKEN }}
           COMMENTER: ${{ github.event.comment.user.login }}
         run: |
           ORG="windmill-labs"
           STATUS=$(curl -s -o /dev/null -w "%{http_code}" \
-            -H "Authorization: token $GH_TOKEN" \
+            -H "Authorization: token $ORG_ACCESS_TOKEN" \
             -H "Accept: application/vnd.github+json" \
             -H "X-GitHub-Api-Version: 2022-11-28" \
             "https://api.github.com/orgs/$ORG/members/$COMMENTER")
diff --git a/.github/workflows/discord-notification.yml b/.github/workflows/discord-notification.yml
index 3ffec78a60..012c406cef 100644
--- a/.github/workflows/discord-notification.yml
+++ b/.github/workflows/discord-notification.yml
@@ -17,8 +17,11 @@ jobs:
       PR_AUTHOR: ${{ github.event.pull_request.user.login }}
       PR_STATUS: "opened"
       PR_NUMBER: ${{ github.event.pull_request.number }}
+      DISCORD_CHANNEL_ID: "1372204995868491786"
+      DISCORD_GUILD_ID: "930051556043276338"
     secrets:
       DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_PR_REVIEWS_WEBHOOK }}
+      DISCORD_BOT_TOKEN: ${{ secrets.DISCORD_AI_BOT_TOKEN }}
 
   merge_success_emoji:
     if: github.event.pull_request.merged == true
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
index 216d7cefea..5425ccb7e1 100644
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/docker-image.yml
@@ -92,7 +92,7 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: true
           build-args: |
-            features=embedding,parquet,openidconnect,jemalloc,license,http_trigger,zip,oauth2,dind,postgres_trigger,mqtt_trigger,websocket,smtp,static_frontend,agent_worker_server,all_languages,deno_core,mcp
+            features=embedding,parquet,openidconnect,jemalloc,license,http_trigger,zip,oauth2,dind,postgres_trigger,mqtt_trigger,websocket,smtp,static_frontend,agent_worker_server,all_languages,deno_core,mcp,private
           tags: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ env.DEV_SHA }}
             ${{ steps.meta-public.outputs.tags }}
@@ -154,7 +154,7 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: true
           build-args: |
-            features=enterprise,enterprise_saml,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,agent_worker_server,tantivy,license,http_trigger,zip,oauth2,kafka,sqs_trigger,nats,otel,dind,postgres_trigger,mqtt_trigger,gcp_trigger,websocket,smtp,static_frontend,all_languages,deno_core,mcp
+            features=enterprise,enterprise_saml,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,agent_worker_server,tantivy,license,http_trigger,zip,oauth2,kafka,sqs_trigger,nats,otel,dind,postgres_trigger,mqtt_trigger,gcp_trigger,websocket,smtp,static_frontend,all_languages,private,deno_core,mcp
           tags: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-ee:${{ env.DEV_SHA }}
             ${{ steps.meta-ee-public.outputs.tags }}
diff --git a/.github/workflows/helmchart_on_release.yml b/.github/workflows/helmchart_on_release.yml
index 1d63cbc326..eeae218d5d 100644
--- a/.github/workflows/helmchart_on_release.yml
+++ b/.github/workflows/helmchart_on_release.yml
@@ -13,7 +13,7 @@ jobs:
         uses: actions/checkout@v3
         with:
           repository: windmill-labs/windmill-helm-charts
-          token: ${{ secrets.DOCS_TOKEN }}
+          token: ${{ secrets.HELM_CHART_TOKEN }}
 
       - name: Get version
         id: get_version
@@ -57,7 +57,7 @@ jobs:
 
       - name: Create PR
         env:
-          GH_TOKEN: ${{ secrets.DOCS_TOKEN }}
+          GH_TOKEN: ${{ secrets.HELM_CHART_TOKEN }}
         run: |
           gh pr create \
             --title "helm: bump version to ${{ env.VERSION }}" \
diff --git a/.github/workflows/publish_windows_worker.yml b/.github/workflows/publish_windows_worker.yml
index 057a858881..e9a8c77e87 100644
--- a/.github/workflows/publish_windows_worker.yml
+++ b/.github/workflows/publish_windows_worker.yml
@@ -53,7 +53,7 @@ jobs:
           $env:OPENSSL_DIR="${Env:VCPKG_INSTALLATION_ROOT}\installed\x64-windows-static"
           mkdir frontend/build && cd backend
           New-Item -Path . -Name "windmill-api/openapi-deref.yaml" -ItemType "File" -Force
-          cargo build --release --features=enterprise,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,tantivy,license,http_trigger,zip,oauth2,kafka,sqs_trigger,nats,postgres_trigger,mqtt_trigger,gcp_trigger,websocket,smtp,static_frontend,all_languages,mcp
+          cargo build --release --features=enterprise,stripe,embedding,parquet,prometheus,openidconnect,cloud,jemalloc,tantivy,license,http_trigger,zip,oauth2,kafka,sqs_trigger,nats,postgres_trigger,mqtt_trigger,gcp_trigger,websocket,smtp,static_frontend,all_languages_windows,mcp,private
       - name: Rename binary with corresponding architecture
         run: |
           Rename-Item -Path ".\backend\target\release\windmill.exe" -NewName "windmill-ee.exe"
diff --git a/.github/workflows/rust_on_release.yml b/.github/workflows/rust_on_release.yml
new file mode 100644
index 0000000000..5594cc08bb
--- /dev/null
+++ b/.github/workflows/rust_on_release.yml
@@ -0,0 +1,19 @@
+name: Publish rust-client to crates.io on release
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:
+
+jobs:
+  build_rust_and_publish_to_crates_io:
+    runs-on: ubicloud-standard-8
+    steps:
+      - uses: actions/checkout@v4
+      - uses: cachix/install-nix-action@v20
+        with:
+          extra_nix_config: |
+            experimental-features = nix-command flakes
+      - run: cd rust-client && nix develop ../ --command ./dev.nu --check --publish 
+        env:
+          CRATES_IO_TOKEN: ${{ secrets.CRATES_IO_TOKEN }}
diff --git a/.github/workflows/shareable-discord-notification.yml b/.github/workflows/shareable-discord-notification.yml
index cb6dbf055d..1b7936330f 100644
--- a/.github/workflows/shareable-discord-notification.yml
+++ b/.github/workflows/shareable-discord-notification.yml
@@ -38,24 +38,45 @@ jobs:
       - name: Send Discord notification and start a thread
         env:
           WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          BOT_TOKEN: ${{ secrets.DISCORD_BOT_TOKEN }}
+          CHANNEL_ID: ${{ inputs.DISCORD_CHANNEL_ID }}
+          GUILD_ID: ${{ inputs.DISCORD_GUILD_ID }}
           PR_TITLE: ${{ inputs.PR_TITLE }}
           PR_NUMBER: ${{ inputs.PR_NUMBER }}
           PR_URL: ${{ inputs.PR_URL }}
           PR_AUTHOR: ${{ inputs.PR_AUTHOR }}
         run: |
-          payload=$(jq -n \
-            --arg content "${PR_URL}" \
-            --arg thread "#${PR_NUMBER}: $PR_TITLE by \`${PR_AUTHOR}\`" \
-            '{
-              content: $content,
-              thread_name: $thread,
-              auto_archive_duration: 10080
-            }'
-          )
-          curl -H "Content-Type: application/json" \
-            -X POST \
-            -d "$payload" \
-            "$WEBHOOK_URL"
+          # Check if thread already exists
+          thread_exists=false
+          if threads=$(curl -s -H "Authorization: Bot $BOT_TOKEN" "https://discord.com/api/v10/guilds/${GUILD_ID}/threads/active"); then
+            if thread_id=$(echo "$threads" | jq -r --arg cid "$CHANNEL_ID" --arg pref "#${PR_NUMBER}:" '.threads[] | select(.parent_id == $cid and (.name | startswith($pref))) | .id' 2>/dev/null); then
+              if [ -n "$thread_id" ]; then
+                thread_exists=true
+                echo "Thread already exists, skipping creation"
+              fi
+            fi
+          else
+            echo "Failed to check for existing threads, will create new thread"
+          fi
+
+          # Create thread if it doesn't exist or if check failed
+          if [ "$thread_exists" = false ]; then
+            echo "Creating new thread"
+            THREAD_TITLE="#${PR_NUMBER}: ${PR_TITLE} by \`${PR_AUTHOR}\`"
+            payload=$(jq -n \
+              --arg content "${PR_URL}" \
+              --arg thread "${THREAD_TITLE:0:99}" \
+              '{
+                content: $content,
+                thread_name: $thread,
+                auto_archive_duration: 10080
+              }'
+            )
+            curl -H "Content-Type: application/json" \
+              -X POST \
+              -d "$payload" \
+              "$WEBHOOK_URL"
+          fi
 
   merge_success_emoji:
     runs-on: ubuntu-latest
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94351573de..a496bda1b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,111 @@
 # Changelog
 
+## [1.498.0](https://github.com/windmill-labs/windmill/compare/v1.497.2...v1.498.0) (2025-06-17)
+
+
+### Features
+
+* use provider api to list available AI models in workspace settings ([#5947](https://github.com/windmill-labs/windmill/issues/5947)) ([7490e88](https://github.com/windmill-labs/windmill/commit/7490e883d747a7f65b2fefd3ec14b1cfc3d9bbd4))
+* windmill http triggers and webhooks to openapi spec ([#5918](https://github.com/windmill-labs/windmill/issues/5918)) ([aba8c01](https://github.com/windmill-labs/windmill/commit/aba8c01d7f44ba4be369a3c711be9e156d6bf215))
+
+## [1.497.2](https://github.com/windmill-labs/windmill/compare/v1.497.1...v1.497.2) (2025-06-17)
+
+
+### Bug Fixes
+
+* always rm containers in docker mode ([38eb71b](https://github.com/windmill-labs/windmill/commit/38eb71bdf55ee2f606d1d2ad2e987d5af16d88c0))
+* flow steps use their tags if any specific when used as subflow ([26bec05](https://github.com/windmill-labs/windmill/commit/26bec054a3447a91c5d5f56d8b98717c06496087))
+
+## [1.497.1](https://github.com/windmill-labs/windmill/compare/v1.497.0...v1.497.1) (2025-06-16)
+
+
+### Bug Fixes
+
+* fix mcp server initialization ([1c6a7c8](https://github.com/windmill-labs/windmill/commit/1c6a7c8cd0bd8396f158e3cb0583b927ce957f12))
+
+## [1.497.0](https://github.com/windmill-labs/windmill/compare/v1.496.3...v1.497.0) (2025-06-16)
+
+
+### Features
+
+* add api tools to ai chat ([#5921](https://github.com/windmill-labs/windmill/issues/5921)) ([f7a83c0](https://github.com/windmill-labs/windmill/commit/f7a83c03c12b8ae70179fb228e0e2391b6ea2858))
+* **backend:** use streamable http in favor of sse for MCP ([#5910](https://github.com/windmill-labs/windmill/issues/5910)) ([d47c078](https://github.com/windmill-labs/windmill/commit/d47c078bb5ab86d82d9cbbce3c55c89c0c20d809))
+* better graph layout algorithm + migrate to svelte 5 almost everywhere + xyflow 1.0 ([23920ae](https://github.com/windmill-labs/windmill/commit/23920aee84fdca4a557a34ff2d66a0bb7bdca605))
+* fill runnable inputs with AI chat ([#5887](https://github.com/windmill-labs/windmill/issues/5887)) ([b4a6a7e](https://github.com/windmill-labs/windmill/commit/b4a6a7e72429617d420af85a9de35bb13adfc6fb))
+* **go:** local go.mod ([#5929](https://github.com/windmill-labs/windmill/issues/5929)) ([0b89260](https://github.com/windmill-labs/windmill/commit/0b89260540b307c6d614ca4275dd038fbfdac33c))
+* multiple azure models support ([#5920](https://github.com/windmill-labs/windmill/issues/5920)) ([f412ede](https://github.com/windmill-labs/windmill/commit/f412ede6ed48e9a492f39582ac70a5584477529e))
+* **rust:** add rust sdk ([#5909](https://github.com/windmill-labs/windmill/issues/5909)) ([332f66e](https://github.com/windmill-labs/windmill/commit/332f66e3483abbeacd4e7c1b74c94c5265314882))
+
+
+### Bug Fixes
+
+* ai chat tooltip + user settings autocomplete issue ([#5917](https://github.com/windmill-labs/windmill/issues/5917)) ([6f907c7](https://github.com/windmill-labs/windmill/commit/6f907c79b4cf6279bd52e35a3ee96e0d021422f5))
+* audit logs for token refresh + consider refresh for active users ([#5930](https://github.com/windmill-labs/windmill/issues/5930)) ([cf2d09e](https://github.com/windmill-labs/windmill/commit/cf2d09e7a8c5d2472af0d483689c3fcfa2976117))
+* fix input with wrong height on first render ([#5935](https://github.com/windmill-labs/windmill/issues/5935)) ([1a6283b](https://github.com/windmill-labs/windmill/commit/1a6283b42a6a514ab2e05160855cdc0f70b61d0e))
+* flow step missing input warnings ([#5916](https://github.com/windmill-labs/windmill/issues/5916)) ([f077849](https://github.com/windmill-labs/windmill/commit/f077849b8f7c1916fd420e85b4844a5c5e93a139))
+* **frontend:** use correct kind for flow insert module btn ([#5938](https://github.com/windmill-labs/windmill/issues/5938)) ([17c8c8a](https://github.com/windmill-labs/windmill/commit/17c8c8a5616ab8656799cea3fc5bc7cfaedc4995))
+
+## [1.496.3](https://github.com/windmill-labs/windmill/compare/v1.496.2...v1.496.3) (2025-06-09)
+
+
+### Bug Fixes
+
+* improve concurrent job parallelism performance ([e8836a3](https://github.com/windmill-labs/windmill/commit/e8836a393a872bb91e68ba0037681caf24149470))
+* Prioritize diff contexts in script mode for ai chat ([#5888](https://github.com/windmill-labs/windmill/issues/5888)) ([a47939d](https://github.com/windmill-labs/windmill/commit/a47939d13c30e2d4b41efd539f845959174d4fb1))
+
+## [1.496.2](https://github.com/windmill-labs/windmill/compare/v1.496.1...v1.496.2) (2025-06-07)
+
+
+### Bug Fixes
+
+* add clearable by default for select ([#5900](https://github.com/windmill-labs/windmill/issues/5900)) ([b44b9c1](https://github.com/windmill-labs/windmill/commit/b44b9c1b82116ad5487af95d1f78226d56c75179))
+
+## [1.496.1](https://github.com/windmill-labs/windmill/compare/v1.496.0...v1.496.1) (2025-06-07)
+
+
+### Bug Fixes
+
+* never consider minor version for global site packages ([#5893](https://github.com/windmill-labs/windmill/issues/5893)) ([22b2f49](https://github.com/windmill-labs/windmill/commit/22b2f4988db9314f2403508933d0aa932187c668))
+
+## [1.496.0](https://github.com/windmill-labs/windmill/compare/v1.495.1...v1.496.0) (2025-06-06)
+
+
+### Features
+
+* generate http route triggers from openapi spec ([#5857](https://github.com/windmill-labs/windmill/issues/5857)) ([5713483](https://github.com/windmill-labs/windmill/commit/571348377b73d54b4d2a1c5775ab00b247b01910))
+
+
+### Bug Fixes
+
+* allow fileupload drag and drop in edit mode on full component without triggering file picker ([#5889](https://github.com/windmill-labs/windmill/issues/5889)) ([9ae3212](https://github.com/windmill-labs/windmill/commit/9ae3212a1e0f88a8297bf41ab53e3c1be4bcc56c))
+* **python:** account instance version when cli deploy and local lockfile ([#5894](https://github.com/windmill-labs/windmill/issues/5894)) ([ec552d5](https://github.com/windmill-labs/windmill/commit/ec552d5ef6fdb5e824e453f196f9cf16629ee2ea))
+* use full client side js library for route gen from openapi ([#5891](https://github.com/windmill-labs/windmill/issues/5891)) ([3c3fdbd](https://github.com/windmill-labs/windmill/commit/3c3fdbdf26a9581b815210839b91ebdedb924093))
+
+## [1.495.0](https://github.com/windmill-labs/windmill/compare/v1.494.0...v1.495.0) (2025-06-05)
+
+
+### Features
+
+* Add ask mode to AI chat ([#5878](https://github.com/windmill-labs/windmill/issues/5878)) ([67ab469](https://github.com/windmill-labs/windmill/commit/67ab46990ad0c9fad810a64c54297419c6151c79))
+* add navigator mode to AIChat and unify UI ([#5859](https://github.com/windmill-labs/windmill/issues/5859)) ([cbba829](https://github.com/windmill-labs/windmill/commit/cbba8297cd4c1caa21b96a8422bbbd5c306b8398))
+* ai flow chat ([#5842](https://github.com/windmill-labs/windmill/issues/5842)) ([68ebf66](https://github.com/windmill-labs/windmill/commit/68ebf667d5c0bc306329d0b55a3cc59e5b4862cb))
+* ai prompts improvements + o3/o4 support ([#5862](https://github.com/windmill-labs/windmill/issues/5862)) ([825422c](https://github.com/windmill-labs/windmill/commit/825422c48456b2c9b230e1a35914b3fbf7d1e836))
+* connect fix btn in flow editor to ai chat ([#5863](https://github.com/windmill-labs/windmill/issues/5863)) ([6247d15](https://github.com/windmill-labs/windmill/commit/6247d159ce25ae13f6fbc5c105df88305ce29451))
+* fix backward compatibility pg 14 for postgres trigger ([#5851](https://github.com/windmill-labs/windmill/issues/5851)) ([4cbcbdb](https://github.com/windmill-labs/windmill/commit/4cbcbdb960b469acf773d3943128b6c7d0dcb0b8))
+* ssh repl like direct to workers hosts machine ([#5809](https://github.com/windmill-labs/windmill/issues/5809)) ([f252657](https://github.com/windmill-labs/windmill/commit/f2526571a3614156b2b1e5cc91b15d0c57565d99))
+* use rust-postgres client instead of sqlx for postgres trigger ([#5853](https://github.com/windmill-labs/windmill/issues/5853)) ([39dbd64](https://github.com/windmill-labs/windmill/commit/39dbd646b9683e0ad8de047cca786ae468759e77))
+
+
+### Bug Fixes
+
+* broken event dispatch for simpleditor ([#5879](https://github.com/windmill-labs/windmill/issues/5879)) ([df4992a](https://github.com/windmill-labs/windmill/commit/df4992a9295ed188c2a2cb0a5dfd3e33ae2e2dcb))
+* cannot parse INSTANCE_PYTHON_VERSION ([#5874](https://github.com/windmill-labs/windmill/issues/5874)) ([a0b302d](https://github.com/windmill-labs/windmill/commit/a0b302d2c58d4245260376cf280bc866be91717c))
+* fix regex that extract workspaces from custom tags ([#5876](https://github.com/windmill-labs/windmill/issues/5876)) ([1551dc8](https://github.com/windmill-labs/windmill/commit/1551dc8af22f6ea41f68290ace4c58f936c47745))
+* nit ai flow prompt ([#5867](https://github.com/windmill-labs/windmill/issues/5867)) ([3e769f0](https://github.com/windmill-labs/windmill/commit/3e769f0c591b80138b3a356d147228675756452f))
+* **python:** assign PATCH version to python runtime only when needed ([#5866](https://github.com/windmill-labs/windmill/issues/5866)) ([50a5c1f](https://github.com/windmill-labs/windmill/commit/50a5c1f56a7e45882fa0095203de709571e149bb))
+* remove duplicate tools from script ai chat ([#5880](https://github.com/windmill-labs/windmill/issues/5880)) ([fe4a767](https://github.com/windmill-labs/windmill/commit/fe4a767df0e6f46fd0c0fd21b4116c7375978bf9))
+* replace crypto.randomUUID with generateRandomString for HTTP compatibility ([#5849](https://github.com/windmill-labs/windmill/issues/5849)) ([64f35d0](https://github.com/windmill-labs/windmill/commit/64f35d050fb0d1008ce7142fd62d500845e62c4a)), closes [#5847](https://github.com/windmill-labs/windmill/issues/5847)
+
 ## [1.494.0](https://github.com/windmill-labs/windmill/compare/v1.493.4...v1.494.0) (2025-05-31)
 
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 00d81d1b48..5a6512b371 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,3 +1,3 @@
 To have an overview of what this app does, see @.cursor/rules/windmill-overview.mdc
-For backend modifications, follow the rules mentioned here @.cursor/rules/rust-best-practices.mdc
+For backend modifications, follow the rules mentioned here @.cursor/rules/rust-best-practices.mdc. You also have access to a summarized version of the database schema here @backend/summarized_schema.txt
 For frontend modifications, follow the rules mentioned here @.cursor/rules/svelte5-best-practices.mdc
diff --git a/README.md b/README.md
index 27a5aaf296..c86977bf72 100644
--- a/README.md
+++ b/README.md
@@ -367,10 +367,11 @@ you to have it being synced automatically everyday.
 
 ## Run a local dev setup
 
+Using [Nix](./frontend/README_DEV.md#nix) (Recommended).
+
 See the [./frontend/README_DEV.md](./frontend/README_DEV.md) file for all
 running options.
 
-Using [Nix](./frontend/README_DEV.md#nix).
 
 ### only Frontend
 
diff --git a/backend/.gitignore b/backend/.gitignore
index f75b9d1eaa..2a3262acac 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -6,4 +6,5 @@ tracing.folded
 heaptrack*
 index/
 windmill-api/openapi-*.*
-.duckdb/*
\ No newline at end of file
+.duckdb/*
+*ee.rs
\ No newline at end of file
diff --git a/backend/.ignore b/backend/.ignore
new file mode 100644
index 0000000000..3173520127
--- /dev/null
+++ b/backend/.ignore
@@ -0,0 +1 @@
+!*ee.rs
\ No newline at end of file
diff --git a/backend/.sqlx/query-0937e25e89959447e7cb1816c112bbc4718cbb8ad6e2f13eae6b14f129d12936.json b/backend/.sqlx/query-0937e25e89959447e7cb1816c112bbc4718cbb8ad6e2f13eae6b14f129d12936.json
index 7d24993172..152ae38fdc 100644
--- a/backend/.sqlx/query-0937e25e89959447e7cb1816c112bbc4718cbb8ad6e2f13eae6b14f129d12936.json
+++ b/backend/.sqlx/query-0937e25e89959447e7cb1816c112bbc4718cbb8ad6e2f13eae6b14f129d12936.json
@@ -61,7 +61,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-0de53d764bbcf44d76cd8e47f7b2cd49e4632f03f16ee6f34d9a2c0842890f05.json b/backend/.sqlx/query-0de53d764bbcf44d76cd8e47f7b2cd49e4632f03f16ee6f34d9a2c0842890f05.json
new file mode 100644
index 0000000000..fd8f30417f
--- /dev/null
+++ b/backend/.sqlx/query-0de53d764bbcf44d76cd8e47f7b2cd49e4632f03f16ee6f34d9a2c0842890f05.json
@@ -0,0 +1,23 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT \n                    path\n                FROM\n                    flow\n                WHERE\n                    path ~ ANY($1) AND\n                    workspace_id = $2\n            ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "path",
+        "type_info": "Varchar"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "TextArray",
+        "Text"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "0de53d764bbcf44d76cd8e47f7b2cd49e4632f03f16ee6f34d9a2c0842890f05"
+}
diff --git a/backend/.sqlx/query-19f0ccadd3ee44719a781ea0d73ea4e45f5b2c3d5c0aa5dbecf9ea9838881b74.json b/backend/.sqlx/query-19f0ccadd3ee44719a781ea0d73ea4e45f5b2c3d5c0aa5dbecf9ea9838881b74.json
new file mode 100644
index 0000000000..62c47f2503
--- /dev/null
+++ b/backend/.sqlx/query-19f0ccadd3ee44719a781ea0d73ea4e45f5b2c3d5c0aa5dbecf9ea9838881b74.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "CREATE INDEX CONCURRENTLY IF NOT EXISTS v2_job_queue_suspend ON v2_job_queue (workspace_id, suspend) WHERE suspend > 0;",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": []
+    },
+    "nullable": []
+  },
+  "hash": "19f0ccadd3ee44719a781ea0d73ea4e45f5b2c3d5c0aa5dbecf9ea9838881b74"
+}
diff --git a/backend/.sqlx/query-1d87f41fd1abb9361d795a899120e6b77e24bf5a9044fdc5284d0d7f1e14eafa.json b/backend/.sqlx/query-1d87f41fd1abb9361d795a899120e6b77e24bf5a9044fdc5284d0d7f1e14eafa.json
deleted file mode 100644
index 6a79013c0b..0000000000
--- a/backend/.sqlx/query-1d87f41fd1abb9361d795a899120e6b77e24bf5a9044fdc5284d0d7f1e14eafa.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "INSERT INTO usage (id, is_workspace, month_, usage) \n            VALUES ($1, TRUE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), $2) \n            ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + $2",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Left": [
-        "Varchar",
-        "Int4"
-      ]
-    },
-    "nullable": []
-  },
-  "hash": "1d87f41fd1abb9361d795a899120e6b77e24bf5a9044fdc5284d0d7f1e14eafa"
-}
diff --git a/backend/.sqlx/query-2bf5f7f2cf9d85a5d23e5db2f7616fb41fece9b3d46fde2d546d70b46f9008e3.json b/backend/.sqlx/query-2bf5f7f2cf9d85a5d23e5db2f7616fb41fece9b3d46fde2d546d70b46f9008e3.json
new file mode 100644
index 0000000000..d60b424505
--- /dev/null
+++ b/backend/.sqlx/query-2bf5f7f2cf9d85a5d23e5db2f7616fb41fece9b3d46fde2d546d70b46f9008e3.json
@@ -0,0 +1,15 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "INSERT INTO usage (id, is_workspace, month_, usage) \n                    VALUES ($1, FALSE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), $2) \n                    ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + $2",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Varchar",
+        "Int4"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "2bf5f7f2cf9d85a5d23e5db2f7616fb41fece9b3d46fde2d546d70b46f9008e3"
+}
diff --git a/backend/.sqlx/query-2e9b3e718440f3c5269e9217a13076c565f3add98b6768b5476bd3afed11ea31.json b/backend/.sqlx/query-2e9b3e718440f3c5269e9217a13076c565f3add98b6768b5476bd3afed11ea31.json
deleted file mode 100644
index 70c5674cdf..0000000000
--- a/backend/.sqlx/query-2e9b3e718440f3c5269e9217a13076c565f3add98b6768b5476bd3afed11ea31.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "INSERT INTO usage (id, is_workspace, month_, usage)\n                    VALUES ($1, FALSE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 1)\n                    ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 \n                    RETURNING usage.usage",
-  "describe": {
-    "columns": [
-      {
-        "ordinal": 0,
-        "name": "usage",
-        "type_info": "Int4"
-      }
-    ],
-    "parameters": {
-      "Left": [
-        "Varchar"
-      ]
-    },
-    "nullable": [
-      false
-    ]
-  },
-  "hash": "2e9b3e718440f3c5269e9217a13076c565f3add98b6768b5476bd3afed11ea31"
-}
diff --git a/backend/.sqlx/query-39401cb0db8d367b5beb2be0c13aa7595adae0eac4e4e3a888cb12b972d1a7ce.json b/backend/.sqlx/query-39401cb0db8d367b5beb2be0c13aa7595adae0eac4e4e3a888cb12b972d1a7ce.json
new file mode 100644
index 0000000000..9906e0d56b
--- /dev/null
+++ b/backend/.sqlx/query-39401cb0db8d367b5beb2be0c13aa7595adae0eac4e4e3a888cb12b972d1a7ce.json
@@ -0,0 +1,170 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        SELECT \n            workspace_id, \n            path, \n            route_path, \n            route_path_key,\n            workspaced_route,\n            script_path, \n            summary,\n            description,\n            is_flow, \n            http_method as \"http_method: _\", \n            edited_by, \n            email, \n            edited_at, \n            extra_perms, \n            is_async, \n            authentication_method as \"authentication_method: _\", \n            static_asset_config as \"static_asset_config: _\", \n            is_static_website,\n            authentication_resource_path,\n            wrap_body,\n            raw_string\n        FROM \n            http_trigger\n        WHERE \n            workspace_id = $1 AND \n            path = $2\n        ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "workspace_id",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 1,
+        "name": "path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 2,
+        "name": "route_path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 3,
+        "name": "route_path_key",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 4,
+        "name": "workspaced_route",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 5,
+        "name": "script_path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 6,
+        "name": "summary",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 7,
+        "name": "description",
+        "type_info": "Text"
+      },
+      {
+        "ordinal": 8,
+        "name": "is_flow",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 9,
+        "name": "http_method: _",
+        "type_info": {
+          "Custom": {
+            "name": "http_method",
+            "kind": {
+              "Enum": [
+                "get",
+                "post",
+                "put",
+                "delete",
+                "patch"
+              ]
+            }
+          }
+        }
+      },
+      {
+        "ordinal": 10,
+        "name": "edited_by",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 11,
+        "name": "email",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 12,
+        "name": "edited_at",
+        "type_info": "Timestamptz"
+      },
+      {
+        "ordinal": 13,
+        "name": "extra_perms",
+        "type_info": "Jsonb"
+      },
+      {
+        "ordinal": 14,
+        "name": "is_async",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 15,
+        "name": "authentication_method: _",
+        "type_info": {
+          "Custom": {
+            "name": "authentication_method",
+            "kind": {
+              "Enum": [
+                "none",
+                "windmill",
+                "api_key",
+                "basic_http",
+                "custom_script",
+                "signature"
+              ]
+            }
+          }
+        }
+      },
+      {
+        "ordinal": 16,
+        "name": "static_asset_config: _",
+        "type_info": "Jsonb"
+      },
+      {
+        "ordinal": 17,
+        "name": "is_static_website",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 18,
+        "name": "authentication_resource_path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 19,
+        "name": "wrap_body",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 20,
+        "name": "raw_string",
+        "type_info": "Bool"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Text",
+        "Text"
+      ]
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      true,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      false,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "39401cb0db8d367b5beb2be0c13aa7595adae0eac4e4e3a888cb12b972d1a7ce"
+}
diff --git a/backend/.sqlx/query-3aaa6b6e362b10f2f3546b8595c60ab725295e0f20cb5f85d5fddc14d503a119.json b/backend/.sqlx/query-3aaa6b6e362b10f2f3546b8595c60ab725295e0f20cb5f85d5fddc14d503a119.json
new file mode 100644
index 0000000000..5121dca128
--- /dev/null
+++ b/backend/.sqlx/query-3aaa6b6e362b10f2f3546b8595c60ab725295e0f20cb5f85d5fddc14d503a119.json
@@ -0,0 +1,23 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT \n                    path\n                FROM\n                    script\n                WHERE\n                    path ~ ANY($1) AND\n                    workspace_id = $2\n            ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "path",
+        "type_info": "Varchar"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "TextArray",
+        "Text"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "3aaa6b6e362b10f2f3546b8595c60ab725295e0f20cb5f85d5fddc14d503a119"
+}
diff --git a/backend/.sqlx/query-faf2c77242e0ab39b33886edf3b742531bf1351d0be1c3631bde0adfe375497a.json b/backend/.sqlx/query-3e244a5057d4f1b4a18c0edac52cdf695c7e7aa0468d2686255de3d83719e6d0.json
similarity index 53%
rename from backend/.sqlx/query-faf2c77242e0ab39b33886edf3b742531bf1351d0be1c3631bde0adfe375497a.json
rename to backend/.sqlx/query-3e244a5057d4f1b4a18c0edac52cdf695c7e7aa0468d2686255de3d83719e6d0.json
index ea798bab76..e98bd34c2d 100644
--- a/backend/.sqlx/query-faf2c77242e0ab39b33886edf3b742531bf1351d0be1c3631bde0adfe375497a.json
+++ b/backend/.sqlx/query-3e244a5057d4f1b4a18c0edac52cdf695c7e7aa0468d2686255de3d83719e6d0.json
@@ -1,22 +1,22 @@
 {
   "db_name": "PostgreSQL",
-  "query": "SELECT tag FROM v2_job WHERE id = $1",
+  "query": "SELECT path FROM script WHERE workspace_id = $1 AND archived = false",
   "describe": {
     "columns": [
       {
         "ordinal": 0,
-        "name": "tag",
+        "name": "path",
         "type_info": "Varchar"
       }
     ],
     "parameters": {
       "Left": [
-        "Uuid"
+        "Text"
       ]
     },
     "nullable": [
       false
     ]
   },
-  "hash": "faf2c77242e0ab39b33886edf3b742531bf1351d0be1c3631bde0adfe375497a"
+  "hash": "3e244a5057d4f1b4a18c0edac52cdf695c7e7aa0468d2686255de3d83719e6d0"
 }
diff --git a/backend/.sqlx/query-3f05e6186050a7ce6d8efb41067d3c5282319fe7e041f114e02fb22b91716637.json b/backend/.sqlx/query-3f05e6186050a7ce6d8efb41067d3c5282319fe7e041f114e02fb22b91716637.json
new file mode 100644
index 0000000000..86d22794c6
--- /dev/null
+++ b/backend/.sqlx/query-3f05e6186050a7ce6d8efb41067d3c5282319fe7e041f114e02fb22b91716637.json
@@ -0,0 +1,60 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n            UPDATE \n                http_trigger \n            SET \n                route_path = $1, \n                route_path_key = $2, \n                workspaced_route = $3,\n                wrap_body = $4,\n                raw_string = $5,\n                authentication_resource_path = $6,\n                script_path = $7, \n                path = $8, \n                is_flow = $9, \n                http_method = $10, \n                static_asset_config = $11, \n                edited_by = $12, \n                email = $13, \n                is_async = $14, \n                authentication_method = $15, \n                summary = $16,\n                description = $17,\n                edited_at = now(), \n                is_static_website = $18\n            WHERE \n                workspace_id = $19 AND \n                path = $20\n            ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Varchar",
+        "Varchar",
+        "Bool",
+        "Bool",
+        "Bool",
+        "Varchar",
+        "Varchar",
+        "Varchar",
+        "Bool",
+        {
+          "Custom": {
+            "name": "http_method",
+            "kind": {
+              "Enum": [
+                "get",
+                "post",
+                "put",
+                "delete",
+                "patch"
+              ]
+            }
+          }
+        },
+        "Jsonb",
+        "Varchar",
+        "Varchar",
+        "Bool",
+        {
+          "Custom": {
+            "name": "authentication_method",
+            "kind": {
+              "Enum": [
+                "none",
+                "windmill",
+                "api_key",
+                "basic_http",
+                "custom_script",
+                "signature"
+              ]
+            }
+          }
+        },
+        "Varchar",
+        "Text",
+        "Bool",
+        "Text",
+        "Text"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "3f05e6186050a7ce6d8efb41067d3c5282319fe7e041f114e02fb22b91716637"
+}
diff --git a/backend/.sqlx/query-4228b098883408323bd8413ee094454b95962047458a6927d19ac0d3e7b3f0fa.json b/backend/.sqlx/query-4228b098883408323bd8413ee094454b95962047458a6927d19ac0d3e7b3f0fa.json
new file mode 100644
index 0000000000..365bce7366
--- /dev/null
+++ b/backend/.sqlx/query-4228b098883408323bd8413ee094454b95962047458a6927d19ac0d3e7b3f0fa.json
@@ -0,0 +1,169 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n                SELECT \n                    workspace_id, \n                    workspaced_route,\n                    path, \n                    route_path, \n                    route_path_key, \n                    authentication_resource_path,\n                    script_path, \n                    is_flow, \n                    summary,\n                    description,\n                    edited_by, \n                    edited_at, \n                    email, \n                    extra_perms, \n                    is_async, \n                    authentication_method  AS \"authentication_method: _\", \n                    http_method AS \"http_method: _\", \n                    static_asset_config AS \"static_asset_config: _\", \n                    is_static_website,\n                    wrap_body,\n                    raw_string\n                FROM http_trigger\n                WHERE workspace_id = $1\n                ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "workspace_id",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 1,
+        "name": "workspaced_route",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 2,
+        "name": "path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 3,
+        "name": "route_path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 4,
+        "name": "route_path_key",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 5,
+        "name": "authentication_resource_path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 6,
+        "name": "script_path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 7,
+        "name": "is_flow",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 8,
+        "name": "summary",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 9,
+        "name": "description",
+        "type_info": "Text"
+      },
+      {
+        "ordinal": 10,
+        "name": "edited_by",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 11,
+        "name": "edited_at",
+        "type_info": "Timestamptz"
+      },
+      {
+        "ordinal": 12,
+        "name": "email",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 13,
+        "name": "extra_perms",
+        "type_info": "Jsonb"
+      },
+      {
+        "ordinal": 14,
+        "name": "is_async",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 15,
+        "name": "authentication_method: _",
+        "type_info": {
+          "Custom": {
+            "name": "authentication_method",
+            "kind": {
+              "Enum": [
+                "none",
+                "windmill",
+                "api_key",
+                "basic_http",
+                "custom_script",
+                "signature"
+              ]
+            }
+          }
+        }
+      },
+      {
+        "ordinal": 16,
+        "name": "http_method: _",
+        "type_info": {
+          "Custom": {
+            "name": "http_method",
+            "kind": {
+              "Enum": [
+                "get",
+                "post",
+                "put",
+                "delete",
+                "patch"
+              ]
+            }
+          }
+        }
+      },
+      {
+        "ordinal": 17,
+        "name": "static_asset_config: _",
+        "type_info": "Jsonb"
+      },
+      {
+        "ordinal": 18,
+        "name": "is_static_website",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 19,
+        "name": "wrap_body",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 20,
+        "name": "raw_string",
+        "type_info": "Bool"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Text"
+      ]
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      false,
+      false,
+      true,
+      true,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "4228b098883408323bd8413ee094454b95962047458a6927d19ac0d3e7b3f0fa"
+}
diff --git a/backend/.sqlx/query-488dd591096b2b47787afdc3a1d73917ed13269f2ee20b86df79fca2c8efe672.json b/backend/.sqlx/query-488dd591096b2b47787afdc3a1d73917ed13269f2ee20b86df79fca2c8efe672.json
index da5eb1ceea..561e202d1d 100644
--- a/backend/.sqlx/query-488dd591096b2b47787afdc3a1d73917ed13269f2ee20b86df79fca2c8efe672.json
+++ b/backend/.sqlx/query-488dd591096b2b47787afdc3a1d73917ed13269f2ee20b86df79fca2c8efe672.json
@@ -70,7 +70,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-4aaab98ebdaa90f1edf49ac96fba6c391c4d0054a618b861464ee37239f1f1e0.json b/backend/.sqlx/query-4aaab98ebdaa90f1edf49ac96fba6c391c4d0054a618b861464ee37239f1f1e0.json
index d8a93c797d..65fa6cc9eb 100644
--- a/backend/.sqlx/query-4aaab98ebdaa90f1edf49ac96fba6c391c4d0054a618b861464ee37239f1f1e0.json
+++ b/backend/.sqlx/query-4aaab98ebdaa90f1edf49ac96fba6c391c4d0054a618b861464ee37239f1f1e0.json
@@ -137,7 +137,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-4dc21dda58758a84bbc1b7f9328efb9806223d1684c53907ff825bc0228ec18d.json b/backend/.sqlx/query-4dc21dda58758a84bbc1b7f9328efb9806223d1684c53907ff825bc0228ec18d.json
new file mode 100644
index 0000000000..e0c5d2bb4c
--- /dev/null
+++ b/backend/.sqlx/query-4dc21dda58758a84bbc1b7f9328efb9806223d1684c53907ff825bc0228ec18d.json
@@ -0,0 +1,35 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT \n                    path,\n                    summary,\n                    description\n                FROM\n                    flow\n                WHERE\n                    path ~ ANY($1) AND\n                    workspace_id = $2\n            ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 1,
+        "name": "summary",
+        "type_info": "Text"
+      },
+      {
+        "ordinal": 2,
+        "name": "description",
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "TextArray",
+        "Text"
+      ]
+    },
+    "nullable": [
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "4dc21dda58758a84bbc1b7f9328efb9806223d1684c53907ff825bc0228ec18d"
+}
diff --git a/backend/.sqlx/query-4e5273b9ce05f6ee2dfd5f14c8574a0cf43682480452f7dbe23012320fe7fe25.json b/backend/.sqlx/query-4e5273b9ce05f6ee2dfd5f14c8574a0cf43682480452f7dbe23012320fe7fe25.json
new file mode 100644
index 0000000000..8176539a30
--- /dev/null
+++ b/backend/.sqlx/query-4e5273b9ce05f6ee2dfd5f14c8574a0cf43682480452f7dbe23012320fe7fe25.json
@@ -0,0 +1,58 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n    SELECT \n        tag, \n        script_lang AS \"script_lang!: _\"\n    FROM \n        v2_job\n    WHERE \n        id = $1\n    ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "tag",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 1,
+        "name": "script_lang!: _",
+        "type_info": {
+          "Custom": {
+            "name": "script_lang",
+            "kind": {
+              "Enum": [
+                "python3",
+                "deno",
+                "go",
+                "bash",
+                "postgresql",
+                "nativets",
+                "bun",
+                "mysql",
+                "bigquery",
+                "snowflake",
+                "graphql",
+                "powershell",
+                "mssql",
+                "php",
+                "bunnative",
+                "rust",
+                "ansible",
+                "csharp",
+                "oracledb",
+                "nu",
+                "java",
+                "duckdb"
+              ]
+            }
+          }
+        }
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Uuid"
+      ]
+    },
+    "nullable": [
+      false,
+      true
+    ]
+  },
+  "hash": "4e5273b9ce05f6ee2dfd5f14c8574a0cf43682480452f7dbe23012320fe7fe25"
+}
diff --git a/backend/.sqlx/query-3895cee539a24b4c6ea89fa7a835fc62bc93b0530efba09fc3c32a8f93eaabb1.json b/backend/.sqlx/query-5430f7728c1e9b539cc8aad29ca9e6733943278998d3df62a9486607827e59ec.json
similarity index 68%
rename from backend/.sqlx/query-3895cee539a24b4c6ea89fa7a835fc62bc93b0530efba09fc3c32a8f93eaabb1.json
rename to backend/.sqlx/query-5430f7728c1e9b539cc8aad29ca9e6733943278998d3df62a9486607827e59ec.json
index 66431239db..f3961847f4 100644
--- a/backend/.sqlx/query-3895cee539a24b4c6ea89fa7a835fc62bc93b0530efba09fc3c32a8f93eaabb1.json
+++ b/backend/.sqlx/query-5430f7728c1e9b539cc8aad29ca9e6733943278998d3df62a9486607827e59ec.json
@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "WITH active_users AS (SELECT distinct username as email FROM audit WHERE timestamp > NOW() - INTERVAL '1 month' AND (operation = 'users.login' OR operation = 'oauth.login')),\n            authors as (SELECT distinct email FROM usr WHERE usr.operator IS false)\n            SELECT email, email NOT IN (SELECT email FROM authors) as operator_only, login_type::text, verified, super_admin, devops, name, company, username\n            FROM password\n            WHERE email IN (SELECT email FROM active_users)\n            ORDER BY super_admin DESC, devops DESC\n            LIMIT $1 OFFSET $2",
+  "query": "WITH active_users AS (SELECT distinct username as email FROM audit WHERE timestamp > NOW() - INTERVAL '1 month' AND (operation = 'users.login' OR operation = 'oauth.login' OR operation = 'users.token.refresh')),\n            authors as (SELECT distinct email FROM usr WHERE usr.operator IS false)\n            SELECT email, email NOT IN (SELECT email FROM authors) as operator_only, login_type::text, verified, super_admin, devops, name, company, username\n            FROM password\n            WHERE email IN (SELECT email FROM active_users)\n            ORDER BY super_admin DESC, devops DESC\n            LIMIT $1 OFFSET $2",
   "describe": {
     "columns": [
       {
@@ -67,5 +67,5 @@
       true
     ]
   },
-  "hash": "3895cee539a24b4c6ea89fa7a835fc62bc93b0530efba09fc3c32a8f93eaabb1"
+  "hash": "5430f7728c1e9b539cc8aad29ca9e6733943278998d3df62a9486607827e59ec"
 }
diff --git a/backend/.sqlx/query-553108ba3c0b8d579800bc8b5a4f887d79fb4c13b60b19c4913a8db18521958c.json b/backend/.sqlx/query-553108ba3c0b8d579800bc8b5a4f887d79fb4c13b60b19c4913a8db18521958c.json
deleted file mode 100644
index e3d2e205f1..0000000000
--- a/backend/.sqlx/query-553108ba3c0b8d579800bc8b5a4f887d79fb4c13b60b19c4913a8db18521958c.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "UPDATE v2_job_queue q SET suspend = 0\n                             FROM v2_job j, v2_job_status f\n                             WHERE parent_job = $1\n                                 AND f.id = j.id AND q.id = j.id\n                                 AND suspend = $2 AND (f.flow_status->'step')::int = 0",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Left": [
-        "Uuid",
-        "Int4"
-      ]
-    },
-    "nullable": []
-  },
-  "hash": "553108ba3c0b8d579800bc8b5a4f887d79fb4c13b60b19c4913a8db18521958c"
-}
diff --git a/backend/.sqlx/query-56b2326015fde12b1a4efa226518566101dd27a0f3363884781071d417f8b7e7.json b/backend/.sqlx/query-56b2326015fde12b1a4efa226518566101dd27a0f3363884781071d417f8b7e7.json
new file mode 100644
index 0000000000..9da0554266
--- /dev/null
+++ b/backend/.sqlx/query-56b2326015fde12b1a4efa226518566101dd27a0f3363884781071d417f8b7e7.json
@@ -0,0 +1,22 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "INSERT INTO usage (id, is_workspace, month_, usage)\n                        VALUES ($1, FALSE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 1)\n                        ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 \n                        RETURNING usage.usage",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "usage",
+        "type_info": "Int4"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Varchar"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "56b2326015fde12b1a4efa226518566101dd27a0f3363884781071d417f8b7e7"
+}
diff --git a/backend/.sqlx/query-61c29d684e8e683e839a6d7210b3b9b96854e5bfd752e45922c358c42ebea0c4.json b/backend/.sqlx/query-61c29d684e8e683e839a6d7210b3b9b96854e5bfd752e45922c358c42ebea0c4.json
index be472306a0..1a30ad011f 100644
--- a/backend/.sqlx/query-61c29d684e8e683e839a6d7210b3b9b96854e5bfd752e45922c358c42ebea0c4.json
+++ b/backend/.sqlx/query-61c29d684e8e683e839a6d7210b3b9b96854e5bfd752e45922c358c42ebea0c4.json
@@ -61,7 +61,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-621e9a2a53187dac3ebed62f0d645b692815f1594bf302dbebd5f80d5d22b98e.json b/backend/.sqlx/query-621e9a2a53187dac3ebed62f0d645b692815f1594bf302dbebd5f80d5d22b98e.json
deleted file mode 100644
index 6a66bb6f22..0000000000
--- a/backend/.sqlx/query-621e9a2a53187dac3ebed62f0d645b692815f1594bf302dbebd5f80d5d22b98e.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "INSERT INTO usage (id, is_workspace, month_, usage)\n                    VALUES ($1, TRUE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 1)\n                    ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 \n                    RETURNING usage.usage",
-  "describe": {
-    "columns": [
-      {
-        "ordinal": 0,
-        "name": "usage",
-        "type_info": "Int4"
-      }
-    ],
-    "parameters": {
-      "Left": [
-        "Varchar"
-      ]
-    },
-    "nullable": [
-      false
-    ]
-  },
-  "hash": "621e9a2a53187dac3ebed62f0d645b692815f1594bf302dbebd5f80d5d22b98e"
-}
diff --git a/backend/.sqlx/query-6b6aca712df657f81e74a438f6753bc72e787a3f768040c8c73ea86313badb71.json b/backend/.sqlx/query-6b6aca712df657f81e74a438f6753bc72e787a3f768040c8c73ea86313badb71.json
new file mode 100644
index 0000000000..fe40dfd0cd
--- /dev/null
+++ b/backend/.sqlx/query-6b6aca712df657f81e74a438f6753bc72e787a3f768040c8c73ea86313badb71.json
@@ -0,0 +1,55 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        SELECT\n            route_path,\n            http_method AS \"http_method: _\",\n            is_async,\n            workspaced_route\n        FROM\n            http_trigger\n        WHERE\n           path ~ ANY($1) AND\n           route_path ~ ANY($2) AND\n           workspace_id = $3\n        ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "route_path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 1,
+        "name": "http_method: _",
+        "type_info": {
+          "Custom": {
+            "name": "http_method",
+            "kind": {
+              "Enum": [
+                "get",
+                "post",
+                "put",
+                "delete",
+                "patch"
+              ]
+            }
+          }
+        }
+      },
+      {
+        "ordinal": 2,
+        "name": "is_async",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 3,
+        "name": "workspaced_route",
+        "type_info": "Bool"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "TextArray",
+        "TextArray",
+        "Text"
+      ]
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "6b6aca712df657f81e74a438f6753bc72e787a3f768040c8c73ea86313badb71"
+}
diff --git a/backend/.sqlx/query-6e2564dc37ee967c634deade67ceabc4c516418e595dee9cd7d651acc1f4af6e.json b/backend/.sqlx/query-6e2564dc37ee967c634deade67ceabc4c516418e595dee9cd7d651acc1f4af6e.json
index 1ab5672e7d..39ebee28b4 100644
--- a/backend/.sqlx/query-6e2564dc37ee967c634deade67ceabc4c516418e595dee9cd7d651acc1f4af6e.json
+++ b/backend/.sqlx/query-6e2564dc37ee967c634deade67ceabc4c516418e595dee9cd7d651acc1f4af6e.json
@@ -147,7 +147,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-714fb0f66ceb536aee8cb9ae0144757b999d25870fda37fe904e09dd5c742015.json b/backend/.sqlx/query-714fb0f66ceb536aee8cb9ae0144757b999d25870fda37fe904e09dd5c742015.json
new file mode 100644
index 0000000000..9f3f4b0c8c
--- /dev/null
+++ b/backend/.sqlx/query-714fb0f66ceb536aee8cb9ae0144757b999d25870fda37fe904e09dd5c742015.json
@@ -0,0 +1,93 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        SELECT\n            route_path,\n            http_method AS \"http_method: _\",\n            is_async,\n            workspaced_route,\n            summary,\n            description,\n            authentication_method AS \"authentication_method: _\",\n            authentication_resource_path\n        FROM\n            http_trigger\n        WHERE\n           path ~ ANY($1) AND\n           route_path ~ ANY($2) AND\n           workspace_id = $3\n        ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "route_path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 1,
+        "name": "http_method: _",
+        "type_info": {
+          "Custom": {
+            "name": "http_method",
+            "kind": {
+              "Enum": [
+                "get",
+                "post",
+                "put",
+                "delete",
+                "patch"
+              ]
+            }
+          }
+        }
+      },
+      {
+        "ordinal": 2,
+        "name": "is_async",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 3,
+        "name": "workspaced_route",
+        "type_info": "Bool"
+      },
+      {
+        "ordinal": 4,
+        "name": "summary",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 5,
+        "name": "description",
+        "type_info": "Text"
+      },
+      {
+        "ordinal": 6,
+        "name": "authentication_method: _",
+        "type_info": {
+          "Custom": {
+            "name": "authentication_method",
+            "kind": {
+              "Enum": [
+                "none",
+                "windmill",
+                "api_key",
+                "basic_http",
+                "custom_script",
+                "signature"
+              ]
+            }
+          }
+        }
+      },
+      {
+        "ordinal": 7,
+        "name": "authentication_resource_path",
+        "type_info": "Varchar"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "TextArray",
+        "TextArray",
+        "Text"
+      ]
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false,
+      true,
+      true,
+      false,
+      true
+    ]
+  },
+  "hash": "714fb0f66ceb536aee8cb9ae0144757b999d25870fda37fe904e09dd5c742015"
+}
diff --git a/backend/.sqlx/query-804fc11e35f4afc0db194b6fe2594f91df7e588d4d2431bc85f4d8734920c8bf.json b/backend/.sqlx/query-804fc11e35f4afc0db194b6fe2594f91df7e588d4d2431bc85f4d8734920c8bf.json
index 89745202b0..7933311a4c 100644
--- a/backend/.sqlx/query-804fc11e35f4afc0db194b6fe2594f91df7e588d4d2431bc85f4d8734920c8bf.json
+++ b/backend/.sqlx/query-804fc11e35f4afc0db194b6fe2594f91df7e588d4d2431bc85f4d8734920c8bf.json
@@ -34,7 +34,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-8373b2649ab46310860adbdd7b717261771ac61d46d82d42d085ffebeb18be06.json b/backend/.sqlx/query-8373b2649ab46310860adbdd7b717261771ac61d46d82d42d085ffebeb18be06.json
new file mode 100644
index 0000000000..3df7f08318
--- /dev/null
+++ b/backend/.sqlx/query-8373b2649ab46310860adbdd7b717261771ac61d46d82d42d085ffebeb18be06.json
@@ -0,0 +1,22 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT distinct(path) FROM script WHERE workspace_id = $1 AND archived = true",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "path",
+        "type_info": "Varchar"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Text"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "8373b2649ab46310860adbdd7b717261771ac61d46d82d42d085ffebeb18be06"
+}
diff --git a/backend/.sqlx/query-83f64dd93b1ddc03b84681d65d9be69959987cbac1d83b64225fd1bf9ab047c9.json b/backend/.sqlx/query-83f64dd93b1ddc03b84681d65d9be69959987cbac1d83b64225fd1bf9ab047c9.json
new file mode 100644
index 0000000000..3ca69e27dd
--- /dev/null
+++ b/backend/.sqlx/query-83f64dd93b1ddc03b84681d65d9be69959987cbac1d83b64225fd1bf9ab047c9.json
@@ -0,0 +1,22 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "INSERT INTO usage (id, is_workspace, month_, usage)\n                        VALUES ($1, TRUE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 1)\n                        ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 \n                        RETURNING usage.usage",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "usage",
+        "type_info": "Int4"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Varchar"
+      ]
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "83f64dd93b1ddc03b84681d65d9be69959987cbac1d83b64225fd1bf9ab047c9"
+}
diff --git a/backend/.sqlx/query-997586ac14384db2c0eeee1bb3382cc6ae013695d0cda6da9ab848ca1b9a9606.json b/backend/.sqlx/query-997586ac14384db2c0eeee1bb3382cc6ae013695d0cda6da9ab848ca1b9a9606.json
new file mode 100644
index 0000000000..1edf26100f
--- /dev/null
+++ b/backend/.sqlx/query-997586ac14384db2c0eeee1bb3382cc6ae013695d0cda6da9ab848ca1b9a9606.json
@@ -0,0 +1,15 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "UPDATE worker_ping SET\nping_at = now(),\njobs_executed = 1,\ncurrent_job_id = $1,\ncurrent_job_workspace_id = 'admins'\nWHERE worker = $2",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Uuid",
+        "Text"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "997586ac14384db2c0eeee1bb3382cc6ae013695d0cda6da9ab848ca1b9a9606"
+}
diff --git a/backend/.sqlx/query-a8bcae108af1eda6efe3a4b8c6f8807bc464a81c0883e68f5a69b89b94b0b34b.json b/backend/.sqlx/query-a8bcae108af1eda6efe3a4b8c6f8807bc464a81c0883e68f5a69b89b94b0b34b.json
index a2a19a6c35..a3cb5a82b9 100644
--- a/backend/.sqlx/query-a8bcae108af1eda6efe3a4b8c6f8807bc464a81c0883e68f5a69b89b94b0b34b.json
+++ b/backend/.sqlx/query-a8bcae108af1eda6efe3a4b8c6f8807bc464a81c0883e68f5a69b89b94b0b34b.json
@@ -36,7 +36,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-a9db7b2f435bb82acb8c5eeb7f800b28f3256491fdaa168591adc7b4b9f3327a.json b/backend/.sqlx/query-a9db7b2f435bb82acb8c5eeb7f800b28f3256491fdaa168591adc7b4b9f3327a.json
index 8cc09349ec..16fea8720d 100644
--- a/backend/.sqlx/query-a9db7b2f435bb82acb8c5eeb7f800b28f3256491fdaa168591adc7b4b9f3327a.json
+++ b/backend/.sqlx/query-a9db7b2f435bb82acb8c5eeb7f800b28f3256491fdaa168591adc7b4b9f3327a.json
@@ -41,7 +41,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-ab04cda71f8e2be9acbecabe1ee5ef756b8e5c1955fbe111df9ee171dc262338.json b/backend/.sqlx/query-ab04cda71f8e2be9acbecabe1ee5ef756b8e5c1955fbe111df9ee171dc262338.json
index 47e4f47005..c8cbb8e10d 100644
--- a/backend/.sqlx/query-ab04cda71f8e2be9acbecabe1ee5ef756b8e5c1955fbe111df9ee171dc262338.json
+++ b/backend/.sqlx/query-ab04cda71f8e2be9acbecabe1ee5ef756b8e5c1955fbe111df9ee171dc262338.json
@@ -65,7 +65,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-c3025cdb6e421e1225d420e8b1efd18d1dd3bb2fac53c1f2df648b61fb7488aa.json b/backend/.sqlx/query-c3025cdb6e421e1225d420e8b1efd18d1dd3bb2fac53c1f2df648b61fb7488aa.json
deleted file mode 100644
index 638417aabb..0000000000
--- a/backend/.sqlx/query-c3025cdb6e421e1225d420e8b1efd18d1dd3bb2fac53c1f2df648b61fb7488aa.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "UPDATE worker_ping SET \nping_at = now(), \njobs_executed = 1, \ncurrent_job_id = $1, \ncurrent_job_workspace_id = 'admins' \nWHERE worker = $2",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Left": [
-        "Uuid",
-        "Text"
-      ]
-    },
-    "nullable": []
-  },
-  "hash": "c3025cdb6e421e1225d420e8b1efd18d1dd3bb2fac53c1f2df648b61fb7488aa"
-}
diff --git a/backend/.sqlx/query-ca3ba808e020c8c7a35eaef842b20cfeee64fd47ded72fce55cc75e0bbb291a8.json b/backend/.sqlx/query-ca3ba808e020c8c7a35eaef842b20cfeee64fd47ded72fce55cc75e0bbb291a8.json
new file mode 100644
index 0000000000..6d44fb2840
--- /dev/null
+++ b/backend/.sqlx/query-ca3ba808e020c8c7a35eaef842b20cfeee64fd47ded72fce55cc75e0bbb291a8.json
@@ -0,0 +1,15 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "INSERT INTO usage (id, is_workspace, month_, usage) \n                VALUES ($1, TRUE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), $2) \n                ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + $2",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Varchar",
+        "Int4"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "ca3ba808e020c8c7a35eaef842b20cfeee64fd47ded72fce55cc75e0bbb291a8"
+}
diff --git a/backend/.sqlx/query-cb3862634f18160207ee2621ddfca43f00456a27fda32583846497116f92f96c.json b/backend/.sqlx/query-cb3862634f18160207ee2621ddfca43f00456a27fda32583846497116f92f96c.json
new file mode 100644
index 0000000000..8ccf623719
--- /dev/null
+++ b/backend/.sqlx/query-cb3862634f18160207ee2621ddfca43f00456a27fda32583846497116f92f96c.json
@@ -0,0 +1,38 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "WITH active_users as (SELECT distinct username as email FROM audit WHERE timestamp > NOW() - INTERVAL '1 month' AND (operation = 'users.login' OR operation = 'oauth.login' OR operation = 'users.token.refresh')),\n        active_authors as (SELECT distinct email FROM usr WHERE usr.operator IS false AND email IN (SELECT email FROM active_users)),\n        active_authors_agg as (SELECT array_agg(email) as authors FROM active_authors),\n        active_ops_agg as (SELECT array_agg(email) as operators from active_users WHERE email NOT IN (SELECT email FROM active_authors))\n        SELECT active_authors_agg.authors, active_ops_agg.operators, array_length(active_authors_agg.authors, 1) as author_count, array_length(active_ops_agg.operators, 1) as operator_count FROM active_authors_agg, active_ops_agg",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "authors",
+        "type_info": "VarcharArray"
+      },
+      {
+        "ordinal": 1,
+        "name": "operators",
+        "type_info": "VarcharArray"
+      },
+      {
+        "ordinal": 2,
+        "name": "author_count",
+        "type_info": "Int4"
+      },
+      {
+        "ordinal": 3,
+        "name": "operator_count",
+        "type_info": "Int4"
+      }
+    ],
+    "parameters": {
+      "Left": []
+    },
+    "nullable": [
+      null,
+      null,
+      null,
+      null
+    ]
+  },
+  "hash": "cb3862634f18160207ee2621ddfca43f00456a27fda32583846497116f92f96c"
+}
diff --git a/backend/.sqlx/query-cccdcb7fe7968eadfc04d8957a8e98b2f2d92a6d7f687a9dd5a70edb3d5a63e6.json b/backend/.sqlx/query-cccdcb7fe7968eadfc04d8957a8e98b2f2d92a6d7f687a9dd5a70edb3d5a63e6.json
index 412b64c480..94f591b3da 100644
--- a/backend/.sqlx/query-cccdcb7fe7968eadfc04d8957a8e98b2f2d92a6d7f687a9dd5a70edb3d5a63e6.json
+++ b/backend/.sqlx/query-cccdcb7fe7968eadfc04d8957a8e98b2f2d92a6d7f687a9dd5a70edb3d5a63e6.json
@@ -70,7 +70,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-cce991f582bc9d2ba28a5b2b41c679366bb07bc6a100727721a787160ac6910c.json b/backend/.sqlx/query-cce991f582bc9d2ba28a5b2b41c679366bb07bc6a100727721a787160ac6910c.json
deleted file mode 100644
index f5d905a157..0000000000
--- a/backend/.sqlx/query-cce991f582bc9d2ba28a5b2b41c679366bb07bc6a100727721a787160ac6910c.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "WITH active_users as (SELECT distinct username as email FROM audit WHERE timestamp > NOW() - INTERVAL '1 month' AND (operation = 'users.login' OR operation = 'oauth.login')),\n        active_authors as (SELECT distinct email FROM usr WHERE usr.operator IS false AND email IN (SELECT email FROM active_users)),\n        active_authors_agg as (SELECT array_agg(email) as authors FROM active_authors),\n        active_ops_agg as (SELECT array_agg(email) as operators from active_users WHERE email NOT IN (SELECT email FROM active_authors))\n        SELECT active_authors_agg.authors, active_ops_agg.operators, array_length(active_authors_agg.authors, 1) as author_count, array_length(active_ops_agg.operators, 1) as operator_count FROM active_authors_agg, active_ops_agg",
-  "describe": {
-    "columns": [
-      {
-        "ordinal": 0,
-        "name": "authors",
-        "type_info": "VarcharArray"
-      },
-      {
-        "ordinal": 1,
-        "name": "operators",
-        "type_info": "VarcharArray"
-      },
-      {
-        "ordinal": 2,
-        "name": "author_count",
-        "type_info": "Int4"
-      },
-      {
-        "ordinal": 3,
-        "name": "operator_count",
-        "type_info": "Int4"
-      }
-    ],
-    "parameters": {
-      "Left": []
-    },
-    "nullable": [
-      null,
-      null,
-      null,
-      null
-    ]
-  },
-  "hash": "cce991f582bc9d2ba28a5b2b41c679366bb07bc6a100727721a787160ac6910c"
-}
diff --git a/backend/.sqlx/query-d15f02f090b8d1a7e816fe11b2e0867540ab6bb02ac6bf82decc220dce0ab048.json b/backend/.sqlx/query-d15f02f090b8d1a7e816fe11b2e0867540ab6bb02ac6bf82decc220dce0ab048.json
index 0a2b8c3a0c..3a23232dcc 100644
--- a/backend/.sqlx/query-d15f02f090b8d1a7e816fe11b2e0867540ab6bb02ac6bf82decc220dce0ab048.json
+++ b/backend/.sqlx/query-d15f02f090b8d1a7e816fe11b2e0867540ab6bb02ac6bf82decc220dce0ab048.json
@@ -42,7 +42,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-d41df114e78873111e409e1182bccc0024acf17ce740f70d2243e5e2a2b25163.json b/backend/.sqlx/query-d41df114e78873111e409e1182bccc0024acf17ce740f70d2243e5e2a2b25163.json
new file mode 100644
index 0000000000..febfc4c21f
--- /dev/null
+++ b/backend/.sqlx/query-d41df114e78873111e409e1182bccc0024acf17ce740f70d2243e5e2a2b25163.json
@@ -0,0 +1,35 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT \n                    path,\n                    summary,\n                    description\n                FROM\n                    script\n                WHERE\n                    path ~ ANY($1) AND\n                    workspace_id = $2\n            ",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "path",
+        "type_info": "Varchar"
+      },
+      {
+        "ordinal": 1,
+        "name": "summary",
+        "type_info": "Text"
+      },
+      {
+        "ordinal": 2,
+        "name": "description",
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "TextArray",
+        "Text"
+      ]
+    },
+    "nullable": [
+      false,
+      false,
+      false
+    ]
+  },
+  "hash": "d41df114e78873111e409e1182bccc0024acf17ce740f70d2243e5e2a2b25163"
+}
diff --git a/backend/.sqlx/query-e38240e6d50bfe60e1c2b649588eb41dcef121ed161db04b2568ac2d990aed7c.json b/backend/.sqlx/query-e38240e6d50bfe60e1c2b649588eb41dcef121ed161db04b2568ac2d990aed7c.json
deleted file mode 100644
index 1ff35d7227..0000000000
--- a/backend/.sqlx/query-e38240e6d50bfe60e1c2b649588eb41dcef121ed161db04b2568ac2d990aed7c.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "db_name": "PostgreSQL",
-  "query": "INSERT INTO usage (id, is_workspace, month_, usage) \n                VALUES ($1, FALSE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), $2) \n                ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + $2",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Left": [
-        "Varchar",
-        "Int4"
-      ]
-    },
-    "nullable": []
-  },
-  "hash": "e38240e6d50bfe60e1c2b649588eb41dcef121ed161db04b2568ac2d990aed7c"
-}
diff --git a/backend/.sqlx/query-ed99d4d088d0fd0c01f29803b12e99ae0a53d0b1feaa67737da409c51c1b6751.json b/backend/.sqlx/query-ed99d4d088d0fd0c01f29803b12e99ae0a53d0b1feaa67737da409c51c1b6751.json
new file mode 100644
index 0000000000..a7ed7469d9
--- /dev/null
+++ b/backend/.sqlx/query-ed99d4d088d0fd0c01f29803b12e99ae0a53d0b1feaa67737da409c51c1b6751.json
@@ -0,0 +1,59 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "\n        INSERT INTO http_trigger (\n            workspace_id, \n            path, \n            route_path, \n            route_path_key,\n            workspaced_route,\n            authentication_resource_path,\n            wrap_body,\n            raw_string,\n            script_path, \n            summary,\n            description,\n            is_flow, \n            is_async, \n            authentication_method, \n            http_method, \n            static_asset_config, \n            edited_by, \n            email, \n            edited_at, \n            is_static_website\n        ) \n        VALUES (\n            $1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, now(), $19\n        )\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Varchar",
+        "Varchar",
+        "Varchar",
+        "Varchar",
+        "Bool",
+        "Varchar",
+        "Bool",
+        "Bool",
+        "Varchar",
+        "Varchar",
+        "Text",
+        "Bool",
+        "Bool",
+        {
+          "Custom": {
+            "name": "authentication_method",
+            "kind": {
+              "Enum": [
+                "none",
+                "windmill",
+                "api_key",
+                "basic_http",
+                "custom_script",
+                "signature"
+              ]
+            }
+          }
+        },
+        {
+          "Custom": {
+            "name": "http_method",
+            "kind": {
+              "Enum": [
+                "get",
+                "post",
+                "put",
+                "delete",
+                "patch"
+              ]
+            }
+          }
+        },
+        "Jsonb",
+        "Varchar",
+        "Varchar",
+        "Bool"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "ed99d4d088d0fd0c01f29803b12e99ae0a53d0b1feaa67737da409c51c1b6751"
+}
diff --git a/backend/.sqlx/query-f1dbcb6e6d82d17c19eb88c0e67dc1cb8baf5bd40b75a2a9cd3ebac440fda632.json b/backend/.sqlx/query-f1dbcb6e6d82d17c19eb88c0e67dc1cb8baf5bd40b75a2a9cd3ebac440fda632.json
new file mode 100644
index 0000000000..b58fad894b
--- /dev/null
+++ b/backend/.sqlx/query-f1dbcb6e6d82d17c19eb88c0e67dc1cb8baf5bd40b75a2a9cd3ebac440fda632.json
@@ -0,0 +1,16 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "UPDATE v2_job_queue q SET suspend = 0\n                             FROM v2_job j, v2_job_status f\n                             WHERE q.workspace_id = $1 AND q.suspend = $3 AND j.parent_job = $2\n                                 AND f.id = j.id AND q.id = j.id\n                                 AND (f.flow_status->'step')::int = 0",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Left": [
+        "Text",
+        "Uuid",
+        "Int4"
+      ]
+    },
+    "nullable": []
+  },
+  "hash": "f1dbcb6e6d82d17c19eb88c0e67dc1cb8baf5bd40b75a2a9cd3ebac440fda632"
+}
diff --git a/backend/.sqlx/query-f22964772dc2d67aee437bbbd08b64792c00da1d713d7ca8f9904ccce7bfdae7.json b/backend/.sqlx/query-f22964772dc2d67aee437bbbd08b64792c00da1d713d7ca8f9904ccce7bfdae7.json
index b3a352de55..b400be3485 100644
--- a/backend/.sqlx/query-f22964772dc2d67aee437bbbd08b64792c00da1d713d7ca8f9904ccce7bfdae7.json
+++ b/backend/.sqlx/query-f22964772dc2d67aee437bbbd08b64792c00da1d713d7ca8f9904ccce7bfdae7.json
@@ -147,7 +147,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.sqlx/query-ff0403790674cdb07022af71c2377afbd8b3a660b3be27514b517c077c63c238.json b/backend/.sqlx/query-ff0403790674cdb07022af71c2377afbd8b3a660b3be27514b517c077c63c238.json
index c7644fa79a..4e911403de 100644
--- a/backend/.sqlx/query-ff0403790674cdb07022af71c2377afbd8b3a660b3be27514b517c077c63c238.json
+++ b/backend/.sqlx/query-ff0403790674cdb07022af71c2377afbd8b3a660b3be27514b517c077c63c238.json
@@ -65,7 +65,8 @@
                 "csharp",
                 "oracledb",
                 "nu",
-                "java"
+                "java",
+                "duckdb"
               ]
             }
           }
diff --git a/backend/.vscode/settings.json b/backend/.vscode/settings.json
index 00cebd7fb6..6c9612d5c3 100644
--- a/backend/.vscode/settings.json
+++ b/backend/.vscode/settings.json
@@ -12,5 +12,6 @@
   "conventionalCommits.scopes": [
     "restructring triggers, decoding trigger message on work"
   ],
-  "rust-analyzer.cargo.features": ["postgres_trigger"]
+  "files.exclude": { "**/*ee.rs": false },
+  "search.exclude": { "**/*ee.rs": false }
 }
diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index fe8e9c769b..24fb8436bb 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -29,9 +29,9 @@ checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe"
 
 [[package]]
 name = "adler2"
-version = "2.0.0"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "512761e0bb2578dd7380c6baaa0f4ce03e84f95e960231d1dec8bf4d7d6e2627"
+checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
 
 [[package]]
 name = "aead"
@@ -175,9 +175,9 @@ dependencies = [
 
 [[package]]
 name = "anstream"
-version = "0.6.18"
+version = "0.6.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8acc5369981196006228e28809f761875c0327210a891e941f4c683b3a99529b"
+checksum = "301af1932e46185686725e0fad2f8f2aa7da69dd70bf6ecc44d6b703844a3933"
 dependencies = [
  "anstyle",
  "anstyle-parse",
@@ -190,33 +190,33 @@ dependencies = [
 
 [[package]]
 name = "anstyle"
-version = "1.0.10"
+version = "1.0.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "55cc3b69f167a1ef2e161439aa98aed94e6028e5f9a59be9a6ffb47aef1651f9"
+checksum = "862ed96ca487e809f1c8e5a8447f6ee2cf102f846893800b20cebdf541fc6bbd"
 
 [[package]]
 name = "anstyle-parse"
-version = "0.2.6"
+version = "0.2.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b2d16507662817a6a20a9ea92df6652ee4f94f914589377d69f3b21bc5798a9"
+checksum = "4e7644824f0aa2c7b9384579234ef10eb7efb6a0deb83f9630a49594dd9c15c2"
 dependencies = [
  "utf8parse",
 ]
 
 [[package]]
 name = "anstyle-query"
-version = "1.1.2"
+version = "1.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "79947af37f4177cfead1110013d678905c37501914fba0efea834c3fe9a8d60c"
+checksum = "6c8bdeb6047d8983be085bab0ba1472e6dc604e7041dbf6fcd5e71523014fae9"
 dependencies = [
  "windows-sys 0.59.0",
 ]
 
 [[package]]
 name = "anstyle-wincon"
-version = "3.0.8"
+version = "3.0.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6680de5231bd6ee4c6191b8a1325daa282b415391ec9d3a37bd34f2060dc73fa"
+checksum = "403f75924867bb1033c59fbf0797484329750cfbe3c4325cd33127941fabc882"
 dependencies = [
  "anstyle",
  "once_cell_polyfill",
@@ -286,57 +286,25 @@ dependencies = [
  "serde",
 ]
 
-[[package]]
-name = "arrow"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b5ec52ba94edeed950e4a41f75d35376df196e8cb04437f7280a5aa49f20f796"
-dependencies = [
- "arrow-arith 54.3.1",
- "arrow-array 54.3.1",
- "arrow-buffer 54.3.1",
- "arrow-cast 54.3.1",
- "arrow-data 54.3.1",
- "arrow-ord 54.3.1",
- "arrow-row 54.3.1",
- "arrow-schema 54.3.1",
- "arrow-select 54.3.1",
- "arrow-string 54.3.1",
-]
-
 [[package]]
 name = "arrow"
 version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b1bb018b6960c87fd9d025009820406f74e83281185a8bdcb44880d2aa5c9a87"
 dependencies = [
- "arrow-arith 55.1.0",
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-cast 55.1.0",
+ "arrow-arith",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-cast",
  "arrow-csv",
- "arrow-data 55.1.0",
+ "arrow-data",
  "arrow-ipc",
  "arrow-json",
- "arrow-ord 55.1.0",
- "arrow-row 55.1.0",
- "arrow-schema 55.1.0",
- "arrow-select 55.1.0",
- "arrow-string 55.1.0",
-]
-
-[[package]]
-name = "arrow-arith"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8fc766fdacaf804cb10c7c70580254fcdb5d55cdfda2bc57b02baf5223a3af9e"
-dependencies = [
- "arrow-array 54.3.1",
- "arrow-buffer 54.3.1",
- "arrow-data 54.3.1",
- "arrow-schema 54.3.1",
- "chrono",
- "num",
+ "arrow-ord",
+ "arrow-row",
+ "arrow-schema",
+ "arrow-select",
+ "arrow-string",
 ]
 
 [[package]]
@@ -345,30 +313,14 @@ version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "44de76b51473aa888ecd6ad93ceb262fb8d40d1f1154a4df2f069b3590aa7575"
 dependencies = [
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-data",
+ "arrow-schema",
  "chrono",
  "num",
 ]
 
-[[package]]
-name = "arrow-array"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a12fcdb3f1d03f69d3ec26ac67645a8fe3f878d77b5ebb0b15d64a116c212985"
-dependencies = [
- "ahash 0.8.12",
- "arrow-buffer 54.3.1",
- "arrow-data 54.3.1",
- "arrow-schema 54.3.1",
- "chrono",
- "half",
- "hashbrown 0.15.3",
- "num",
-]
-
 [[package]]
 name = "arrow-array"
 version = "55.1.0"
@@ -376,24 +328,13 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "29ed77e22744475a9a53d00026cf8e166fe73cf42d89c4c4ae63607ee1cfcc3f"
 dependencies = [
  "ahash 0.8.12",
- "arrow-buffer 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow-buffer",
+ "arrow-data",
+ "arrow-schema",
  "chrono",
  "chrono-tz",
  "half",
- "hashbrown 0.15.3",
- "num",
-]
-
-[[package]]
-name = "arrow-buffer"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "263f4801ff1839ef53ebd06f99a56cecd1dbaf314ec893d93168e2e860e0291c"
-dependencies = [
- "bytes",
- "half",
+ "hashbrown 0.15.4",
  "num",
 ]
 
@@ -408,38 +349,17 @@ dependencies = [
  "num",
 ]
 
-[[package]]
-name = "arrow-cast"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ede6175fbc039dfc946a61c1b6d42fd682fcecf5ab5d148fbe7667705798cac9"
-dependencies = [
- "arrow-array 54.3.1",
- "arrow-buffer 54.3.1",
- "arrow-data 54.3.1",
- "arrow-schema 54.3.1",
- "arrow-select 54.3.1",
- "atoi",
- "base64 0.22.1",
- "chrono",
- "comfy-table",
- "half",
- "lexical-core",
- "num",
- "ryu",
-]
-
 [[package]]
 name = "arrow-cast"
 version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f39e1d774ece9292697fcbe06b5584401b26bd34be1bec25c33edae65c2420ff"
 dependencies = [
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
- "arrow-select 55.1.0",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-data",
+ "arrow-schema",
+ "arrow-select",
  "atoi",
  "base64 0.22.1",
  "chrono",
@@ -456,9 +376,9 @@ version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9055c972a07bf12c2a827debfd34f88d3b93da1941d36e1d9fee85eebe38a12a"
 dependencies = [
- "arrow-array 55.1.0",
- "arrow-cast 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow-array",
+ "arrow-cast",
+ "arrow-schema",
  "chrono",
  "csv",
  "csv-core",
@@ -466,26 +386,14 @@ dependencies = [
  "regex",
 ]
 
-[[package]]
-name = "arrow-data"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "61cfdd7d99b4ff618f167e548b2411e5dd2c98c0ddebedd7df433d34c20a4429"
-dependencies = [
- "arrow-buffer 54.3.1",
- "arrow-schema 54.3.1",
- "half",
- "num",
-]
-
 [[package]]
 name = "arrow-data"
 version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf75ac27a08c7f48b88e5c923f267e980f27070147ab74615ad85b5c5f90473d"
 dependencies = [
- "arrow-buffer 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow-buffer",
+ "arrow-schema",
  "half",
  "num",
 ]
@@ -496,10 +404,10 @@ version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a222f0d93772bd058d1268f4c28ea421a603d66f7979479048c429292fac7b2e"
 dependencies = [
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-data",
+ "arrow-schema",
  "flatbuffers",
  "lz4_flex",
 ]
@@ -510,11 +418,11 @@ version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9085342bbca0f75e8cb70513c0807cc7351f1fbf5cb98192a67d5e3044acb033"
 dependencies = [
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-cast 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-cast",
+ "arrow-data",
+ "arrow-schema",
  "chrono",
  "half",
  "indexmap 2.9.0",
@@ -526,43 +434,17 @@ dependencies = [
  "simdutf8",
 ]
 
-[[package]]
-name = "arrow-ord"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f0a3334a743bd2a1479dbc635540617a3923b4b2f6870f37357339e6b5363c21"
-dependencies = [
- "arrow-array 54.3.1",
- "arrow-buffer 54.3.1",
- "arrow-data 54.3.1",
- "arrow-schema 54.3.1",
- "arrow-select 54.3.1",
-]
-
 [[package]]
 name = "arrow-ord"
 version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ab2f1065a5cad7b9efa9e22ce5747ce826aa3855766755d4904535123ef431e7"
 dependencies = [
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
- "arrow-select 55.1.0",
-]
-
-[[package]]
-name = "arrow-row"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8d1d7a7291d2c5107e92140f75257a99343956871f3d3ab33a7b41532f79cb68"
-dependencies = [
- "arrow-array 54.3.1",
- "arrow-buffer 54.3.1",
- "arrow-data 54.3.1",
- "arrow-schema 54.3.1",
- "half",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-data",
+ "arrow-schema",
+ "arrow-select",
 ]
 
 [[package]]
@@ -571,40 +453,20 @@ version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3703a0e3e92d23c3f756df73d2dc9476873f873a76ae63ef9d3de17fda83b2d8"
 dependencies = [
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-data",
+ "arrow-schema",
  "half",
 ]
 
-[[package]]
-name = "arrow-schema"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "39cfaf5e440be44db5413b75b72c2a87c1f8f0627117d110264048f2969b99e9"
-dependencies = [
- "bitflags 2.9.1",
-]
-
 [[package]]
 name = "arrow-schema"
 version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "73a47aa0c771b5381de2b7f16998d351a6f4eb839f1e13d48353e17e873d969b"
-
-[[package]]
-name = "arrow-select"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "69efcd706420e52cd44f5c4358d279801993846d1c2a8e52111853d61d55a619"
 dependencies = [
- "ahash 0.8.12",
- "arrow-array 54.3.1",
- "arrow-buffer 54.3.1",
- "arrow-data 54.3.1",
- "arrow-schema 54.3.1",
- "num",
+ "bitflags 2.9.1",
 ]
 
 [[package]]
@@ -614,41 +476,24 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "24b7b85575702b23b85272b01bc1c25a01c9b9852305e5d0078c79ba25d995d4"
 dependencies = [
  "ahash 0.8.12",
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-data",
+ "arrow-schema",
  "num",
 ]
 
-[[package]]
-name = "arrow-string"
-version = "54.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a21546b337ab304a32cfc0770f671db7411787586b45b78b4593ae78e64e2b03"
-dependencies = [
- "arrow-array 54.3.1",
- "arrow-buffer 54.3.1",
- "arrow-data 54.3.1",
- "arrow-schema 54.3.1",
- "arrow-select 54.3.1",
- "memchr",
- "num",
- "regex",
- "regex-syntax 0.8.5",
-]
-
 [[package]]
 name = "arrow-string"
 version = "55.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9260fddf1cdf2799ace2b4c2fc0356a9789fa7551e0953e35435536fecefebbd"
 dependencies = [
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-data 55.1.0",
- "arrow-schema 55.1.0",
- "arrow-select 55.1.0",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-data",
+ "arrow-schema",
+ "arrow-select",
  "memchr",
  "num",
  "regex",
@@ -712,7 +557,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "swc_macros_common",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -791,7 +636,7 @@ dependencies = [
  "bytes",
  "http 1.3.1",
  "rand 0.8.5",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "serde",
  "serde-aux",
  "serde_json",
@@ -814,7 +659,7 @@ checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -836,7 +681,7 @@ checksum = "c7c24de15d275a1ecfd47a380fb4d5ec9bfe0933f309ed5e705b775596a3574d"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -847,7 +692,7 @@ checksum = "e539d3fca749fcee5236ab05e93a52867dd549cc157c8cb7f99595f3cedffdb5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -902,9 +747,9 @@ checksum = "ace50bade8e6234aa140d9a2f552bbee1db4d353f69b8217bc503490fc1a9f26"
 
 [[package]]
 name = "aws-config"
-version = "1.6.3"
+version = "1.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "02a18fd934af6ae7ca52410d4548b98eb895aab0f1ea417d168d85db1434a141"
+checksum = "455e9fb7743c6f6267eb2830ccc08686fbb3d13c9a689369562fd4d4ef9ea462"
 dependencies = [
  "aws-credential-types",
  "aws-runtime",
@@ -967,9 +812,9 @@ dependencies = [
 
 [[package]]
 name = "aws-runtime"
-version = "1.5.7"
+version = "1.5.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6c4063282c69991e57faab9e5cb21ae557e59f5b0fb285c196335243df8dc25c"
+checksum = "4f6c68419d8ba16d9a7463671593c54f81ba58cab466e9b759418da606dcc2e2"
 dependencies = [
  "aws-credential-types",
  "aws-sigv4",
@@ -991,9 +836,9 @@ dependencies = [
 
 [[package]]
 name = "aws-sdk-sqs"
-version = "1.71.0"
+version = "1.73.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0519921fc7065a54b8dec1d10de2893d99a61d030b9f8eb00ee83eb62d2a2676"
+checksum = "8f3d3cf0d52a50e0ac3fada7e0db27a2172b986f833d061def1df78c7dbe80ae"
 dependencies = [
  "aws-credential-types",
  "aws-runtime",
@@ -1013,9 +858,9 @@ dependencies = [
 
 [[package]]
 name = "aws-sdk-sso"
-version = "1.71.0"
+version = "1.73.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "95a4fd09d6e863655d99cd2260f271c6d1030dc6bfad68e19e126d2e4c8ceb18"
+checksum = "b2ac1674cba7872061a29baaf02209fefe499ff034dfd91bd4cc59e4d7741489"
 dependencies = [
  "aws-credential-types",
  "aws-runtime",
@@ -1035,9 +880,9 @@ dependencies = [
 
 [[package]]
 name = "aws-sdk-ssooidc"
-version = "1.72.0"
+version = "1.74.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3224ab02ebb3074467a33d57caf6fcb487ca36f3697fdd381b0428dc72380696"
+checksum = "3a6a22f077f5fd3e3c0270d4e1a110346cddf6769e9433eb9e6daceb4ca3b149"
 dependencies = [
  "aws-credential-types",
  "aws-runtime",
@@ -1057,9 +902,9 @@ dependencies = [
 
 [[package]]
 name = "aws-sdk-sts"
-version = "1.72.0"
+version = "1.74.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f6933f189ed1255e78175fbd73fb200c0aae7240d220ed3346f567b0ddca3083"
+checksum = "19d440e1d368759bd10df0dbdddbfff6473d7cd73e9d9ef2363dc9995ac2d711"
 dependencies = [
  "aws-credential-types",
  "aws-runtime",
@@ -1080,9 +925,9 @@ dependencies = [
 
 [[package]]
 name = "aws-sigv4"
-version = "1.3.2"
+version = "1.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3734aecf9ff79aa401a6ca099d076535ab465ff76b46440cf567c8e70b65dc13"
+checksum = "ddfb9021f581b71870a17eac25b52335b82211cdc092e02b6876b2bcefa61666"
 dependencies = [
  "aws-credential-types",
  "aws-smithy-http",
@@ -1133,13 +978,14 @@ dependencies = [
 
 [[package]]
 name = "aws-smithy-http-client"
-version = "1.0.2"
+version = "1.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e44697a9bded898dcd0b1cb997430d949b87f4f8940d91023ae9062bf218250"
+checksum = "7f491388e741b7ca73b24130ff464c1478acc34d5b331b7dd0a2ee4643595a15"
 dependencies = [
  "aws-smithy-async",
  "aws-smithy-runtime-api",
  "aws-smithy-types",
+ "h2 0.3.26",
  "h2 0.4.10",
  "http 0.2.12",
  "http 1.3.1",
@@ -1147,11 +993,11 @@ dependencies = [
  "hyper 0.14.32",
  "hyper 1.6.0",
  "hyper-rustls 0.24.2",
- "hyper-rustls 0.27.6",
+ "hyper-rustls 0.27.7",
  "hyper-util",
  "pin-project-lite",
  "rustls 0.21.12",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "rustls-native-certs 0.8.1",
  "rustls-pki-types",
  "tokio",
@@ -1161,9 +1007,9 @@ dependencies = [
 
 [[package]]
 name = "aws-smithy-json"
-version = "0.61.3"
+version = "0.61.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "92144e45819cae7dc62af23eac5a038a58aa544432d2102609654376a900bd07"
+checksum = "a16e040799d29c17412943bdbf488fd75db04112d0c0d4b9290bacf5ae0014b9"
 dependencies = [
  "aws-smithy-types",
 ]
@@ -1213,9 +1059,9 @@ dependencies = [
 
 [[package]]
 name = "aws-smithy-runtime-api"
-version = "1.8.0"
+version = "1.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1e5d9e3a80a18afa109391fb5ad09c3daf887b516c6fd805a157c6ea7994a57"
+checksum = "bd8531b6d8882fd8f48f82a9754e682e29dd44cff27154af51fa3eb730f59efb"
 dependencies = [
  "aws-smithy-async",
  "aws-smithy-types",
@@ -1230,9 +1076,9 @@ dependencies = [
 
 [[package]]
 name = "aws-smithy-types"
-version = "1.3.1"
+version = "1.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "40076bd09fadbc12d5e026ae080d0930defa606856186e31d83ccc6a255eeaf3"
+checksum = "d498595448e43de7f4296b7b7a18a8a02c61ec9349128c80a368f7c3b4ab11a8"
 dependencies = [
  "base64-simd 0.8.0",
  "bytes",
@@ -1266,9 +1112,9 @@ dependencies = [
 
 [[package]]
 name = "aws-smithy-xml"
-version = "0.60.9"
+version = "0.60.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ab0b0166827aa700d3dc519f72f8b3a91c35d0b8d042dc5d643a91e6f80648fc"
+checksum = "3db87b96cb1b16c024980f133968d52882ca0daaee3a086c6decc500f6c99728"
 dependencies = [
  "xmlparser",
 ]
@@ -1369,7 +1215,7 @@ dependencies = [
  "addr2line",
  "cfg-if",
  "libc",
- "miniz_oxide 0.8.8",
+ "miniz_oxide 0.8.9",
  "object",
  "rustc-demangle",
  "windows-targets 0.52.6",
@@ -1426,9 +1272,9 @@ dependencies = [
 
 [[package]]
 name = "base64ct"
-version = "1.7.3"
+version = "1.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89e25b6adfb930f02d1981565a6e5d9c547ac15a96606256d3b59040e5cd4ca3"
+checksum = "55248b47b0caf0546f7988906588779981c43bb1bc9d0c44087278f80cdb44ba"
 
 [[package]]
 name = "better_scoped_tls"
@@ -1480,7 +1326,7 @@ dependencies = [
  "regex",
  "rustc-hash 1.1.0",
  "shlex",
- "syn 2.0.101",
+ "syn 2.0.103",
  "which 4.4.2",
 ]
 
@@ -1501,7 +1347,7 @@ dependencies = [
  "regex",
  "rustc-hash 1.1.0",
  "shlex",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -1706,7 +1552,7 @@ dependencies = [
  "proc-macro-crate",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -1716,7 +1562,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "17d4f95e880cfd28c4ca5a006cf7f6af52b4bcb7b5866f573b2faa126fb7affb"
 dependencies = [
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -1793,9 +1639,9 @@ dependencies = [
 
 [[package]]
 name = "bumpalo"
-version = "3.17.0"
+version = "3.18.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1628fb46dfa0b37568d12e5edd512553eccf6a22a78e8bde00bb4aed84d5bdbf"
+checksum = "793db76d6187cd04dff33004d8e6c9cc4e05cd330500379d2394209271b4aeee"
 dependencies = [
  "allocator-api2",
 ]
@@ -1835,9 +1681,9 @@ dependencies = [
 
 [[package]]
 name = "bytemuck"
-version = "1.23.0"
+version = "1.23.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9134a6ef01ce4b366b50689c94f82c14bc72bc5d0386829828a2e2752ef7958c"
+checksum = "5c76a5792e44e4abe34d3abf15636779261d45a7450612059293d1d2cfc63422"
 dependencies = [
  "bytemuck_derive",
 ]
@@ -1850,7 +1696,7 @@ checksum = "7ecc273b49b3205b83d648f0690daa588925572cc5063745bfe547fe7ec8e1a1"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -1993,7 +1839,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3b4a6cae9efc04cc6cbb8faf338d2c497c165c83e74509cf4dbedea948bbf6e5"
 dependencies = [
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -2013,9 +1859,9 @@ dependencies = [
 
 [[package]]
 name = "cc"
-version = "1.2.25"
+version = "1.2.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d0fc897dc1e865cc67c0e05a836d9d3f1df3cbe442aa4a9473b18e12624a4951"
+checksum = "d487aa071b5f64da6f19a3e848e3578944b726ee5a4854b82172f02aa876bfdc"
 dependencies = [
  "jobserver",
  "libc",
@@ -2039,9 +1885,9 @@ dependencies = [
 
 [[package]]
 name = "cfg-if"
-version = "1.0.0"
+version = "1.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+checksum = "9555578bc9e57714c812a1f84e4fc5b4d21fcb063490c624de019f7464c91268"
 
 [[package]]
 name = "cfg_aliases"
@@ -2133,9 +1979,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.39"
+version = "4.5.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fd60e63e9be68e5fb56422e397cf9baddded06dae1d2e523401542383bc72a9f"
+checksum = "40b6887a1d8685cebccf115538db5c0efe625ccac9696ad45c409d96566e910f"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -2143,9 +1989,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.5.39"
+version = "4.5.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89cc6392a1f72bbeb820d71f32108f61fdaf18bc526e1d23954168a67759ef51"
+checksum = "e0c66c08ce9f0c698cbce5c0279d0bb6ac936d8674174fe48f736533b964f59e"
 dependencies = [
  "anstream",
  "anstyle",
@@ -2155,21 +2001,21 @@ dependencies = [
 
 [[package]]
 name = "clap_derive"
-version = "4.5.32"
+version = "4.5.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "09176aae279615badda0765c0c0b3f6ed53f4709118af73cf4655d85d1530cd7"
+checksum = "d2c7947ae4cc3d851207c1adb5b5e260ff0cca11446b1d6d1423788e442257ce"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
 name = "clap_lex"
-version = "0.7.4"
+version = "0.7.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f46ad14479a25103f283c0f10005961cf086d8dc42205bb44c46ac563475dca6"
+checksum = "b94f61472cee1439c0b966b47e3aca9ae07e45d070759512cd390ea2bebc6675"
 
 [[package]]
 name = "clipboard-win"
@@ -2217,7 +2063,7 @@ dependencies = [
  "nom 7.1.3",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -2228,9 +2074,9 @@ checksum = "3d7b894f5411737b7867f4827955924d7c254fc9f4d91a6aad6b097804b1018b"
 
 [[package]]
 name = "colorchoice"
-version = "1.0.3"
+version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b63caa9aa9397e2d9480a9b13673856c78d8ac123288526c37d7839f2a86990"
+checksum = "b05b61dc5112cbb17e4b6cd61790d9845d13888356391624cbe7e41efeac1e75"
 
 [[package]]
 name = "comfy-table"
@@ -2239,7 +2085,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4a65ebfec4fb190b6f90e944a817d60499ee0744e582530e2c9900a22e591d9a"
 dependencies = [
  "unicode-segmentation",
- "unicode-width 0.2.0",
+ "unicode-width 0.2.1",
 ]
 
 [[package]]
@@ -2266,7 +2112,7 @@ dependencies = [
  "encode_unicode",
  "libc",
  "once_cell",
- "unicode-width 0.2.0",
+ "unicode-width 0.2.1",
  "windows-sys 0.59.0",
 ]
 
@@ -2599,7 +2445,7 @@ checksum = "f46882e17999c6cc590af592290432be3bce0428cb0d5f8b6715e4dc7b383eb3"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -2682,7 +2528,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim 0.11.1",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -2715,7 +2561,7 @@ checksum = "fc34b93ccb385b40dc71c6fceac4b2ad23662c7eeb248cf10d529b7e055b6ead"
 dependencies = [
  "darling_core 0.20.11",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -2763,9 +2609,9 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ffe060b978f74ab446be722adb8a274e052e005bf6dfd171caadc3abaad10080"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "arrow-ipc",
- "arrow-schema 55.1.0",
+ "arrow-schema",
  "async-trait",
  "bytes",
  "bzip2",
@@ -2818,7 +2664,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "61fe34f401bd03724a1f96d12108144f8cd495a3cdda2bf5e091822fb80b7e66"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "async-trait",
  "dashmap 6.1.0",
  "datafusion-common",
@@ -2844,7 +2690,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a4411b8e3bce5e0fc7521e44f201def2e2d5d1b5f176fb56e8cdc9942c890f00"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "async-trait",
  "datafusion-catalog",
  "datafusion-common",
@@ -2868,7 +2714,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0734015d81c8375eb5d4869b7f7ecccc2ee8d6cb81948ef737cd0e7b743bd69c"
 dependencies = [
  "ahash 0.8.12",
- "arrow 55.1.0",
+ "arrow",
  "arrow-ipc",
  "base64 0.22.1",
  "half",
@@ -2902,7 +2748,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "04e602dcdf2f50c2abf297cc2203c73531e6f48b29516af7695d338cf2a778b1"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "async-compression",
  "async-trait",
  "bytes",
@@ -2938,7 +2784,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e3bb2253952dc32296ed5b84077cb2e0257fea4be6373e1c376426e17ead4ef6"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "async-trait",
  "bytes",
  "datafusion-catalog",
@@ -2963,7 +2809,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5b8c7f47a5d2fe03bfa521ec9bafdb8a5c82de8377f60967c3663f00c8790352"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "async-trait",
  "bytes",
  "datafusion-catalog",
@@ -2988,7 +2834,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "27d15868ea39ed2dc266728b554f6304acd473de2142281ecfa1294bb7415923"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "async-trait",
  "bytes",
  "datafusion-catalog",
@@ -3025,7 +2871,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "06f004d100f49a3658c9da6fb0c3a9b760062d96cd4ad82ccc3b7b69a9fb2f84"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "dashmap 6.1.0",
  "datafusion-common",
  "datafusion-expr",
@@ -3044,7 +2890,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7a4e4ce3802609be38eeb607ee72f6fe86c3091460de9dbfae9e18db423b3964"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "chrono",
  "datafusion-common",
  "datafusion-doc",
@@ -3065,7 +2911,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "422ac9cf3b22bbbae8cdf8ceb33039107fde1b5492693168f13bd566b1bcc839"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "datafusion-common",
  "indexmap 2.9.0",
  "itertools 0.14.0",
@@ -3078,8 +2924,8 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2ddf0a0a2db5d2918349c978d42d80926c6aa2459cd8a3c533a84ec4bb63479e"
 dependencies = [
- "arrow 55.1.0",
- "arrow-buffer 55.1.0",
+ "arrow",
+ "arrow-buffer",
  "base64 0.22.1",
  "blake2",
  "blake3",
@@ -3108,7 +2954,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "408a05dafdc70d05a38a29005b8b15e21b0238734dab1e98483fcb58038c5aba"
 dependencies = [
  "ahash 0.8.12",
- "arrow 55.1.0",
+ "arrow",
  "datafusion-common",
  "datafusion-doc",
  "datafusion-execution",
@@ -3129,7 +2975,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "756d21da2dd6c9bef97af1504970ff56cbf35d03fbd4ffd62827f02f4d2279d4"
 dependencies = [
  "ahash 0.8.12",
- "arrow 55.1.0",
+ "arrow",
  "datafusion-common",
  "datafusion-expr-common",
  "datafusion-physical-expr-common",
@@ -3141,8 +2987,8 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8d8d50f6334b378930d992d801a10ac5b3e93b846b39e4a05085742572844537"
 dependencies = [
- "arrow 55.1.0",
- "arrow-ord 55.1.0",
+ "arrow",
+ "arrow-ord",
  "datafusion-common",
  "datafusion-doc",
  "datafusion-execution",
@@ -3162,7 +3008,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cc9a97220736c8fff1446e936be90d57216c06f28969f9ffd3b72ac93c958c8a"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "async-trait",
  "datafusion-catalog",
  "datafusion-common",
@@ -3207,7 +3053,7 @@ checksum = "df6f88d7ee27daf8b108ba910f9015176b36fbc72902b1ca5c2a5f1d1717e1a1"
 dependencies = [
  "datafusion-expr",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -3216,7 +3062,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "084d9f979c4b155346d3c34b18f4256e6904ded508e9554d90fed416415c3515"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "chrono",
  "datafusion-common",
  "datafusion-expr",
@@ -3236,7 +3082,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "64c536062b0076f4e30084065d805f389f9fe38af0ca75bcbac86bc5e9fbab65"
 dependencies = [
  "ahash 0.8.12",
- "arrow 55.1.0",
+ "arrow",
  "datafusion-common",
  "datafusion-expr",
  "datafusion-expr-common",
@@ -3258,7 +3104,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8a92b53b3193fac1916a1c5b8e3f4347c526f6822e56b71faa5fb372327a863"
 dependencies = [
  "ahash 0.8.12",
- "arrow 55.1.0",
+ "arrow",
  "datafusion-common",
  "datafusion-expr-common",
  "hashbrown 0.14.5",
@@ -3271,7 +3117,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6fa0a5ac94c7cf3da97bedabd69d6bbca12aef84b9b37e6e9e8c25286511b5e2"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "datafusion-common",
  "datafusion-execution",
  "datafusion-expr",
@@ -3291,9 +3137,9 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "690c615db468c2e5fe5085b232d8b1c088299a6c63d87fd960a354a71f7acb55"
 dependencies = [
  "ahash 0.8.12",
- "arrow 55.1.0",
- "arrow-ord 55.1.0",
- "arrow-schema 55.1.0",
+ "arrow",
+ "arrow-ord",
+ "arrow-schema",
  "async-trait",
  "chrono",
  "datafusion-common",
@@ -3320,7 +3166,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ad229a134c7406c057ece00c8743c0c34b97f4e72f78b475fe17b66c5e14fa4f"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "async-trait",
  "dashmap 6.1.0",
  "datafusion-common",
@@ -3344,7 +3190,7 @@ version = "47.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "64f6ab28b72b664c21a27b22a2ff815fd390ed224c26e89a93b5a8154a4e8607"
 dependencies = [
- "arrow 55.1.0",
+ "arrow",
  "bigdecimal",
  "datafusion-common",
  "datafusion-expr",
@@ -3385,7 +3231,7 @@ dependencies = [
  "once_cell",
  "percent-encoding",
  "serde",
- "sourcemap 9.2.1",
+ "sourcemap 9.2.2",
  "swc_atoms",
  "swc_common",
  "swc_config",
@@ -3645,7 +3491,7 @@ checksum = "babccedee31ce7e57c3e6dff2cb3ab8d68c49d0df8222fe0d11d628e65192790"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -3670,7 +3516,7 @@ dependencies = [
  "http 1.3.1",
  "http-body-util",
  "hyper 1.6.0",
- "hyper-rustls 0.27.6",
+ "hyper-rustls 0.27.7",
  "hyper-util",
  "ipnet",
  "percent-encoding",
@@ -4036,7 +3882,7 @@ dependencies = [
  "stringcase",
  "strum 0.25.0",
  "strum_macros 0.25.3",
- "syn 2.0.101",
+ "syn 2.0.103",
  "thiserror 2.0.12",
 ]
 
@@ -4276,7 +4122,7 @@ dependencies = [
  "deno_tls",
  "http-body-util",
  "hyper 1.6.0",
- "hyper-rustls 0.27.6",
+ "hyper-rustls 0.27.7",
  "hyper-util",
  "log",
  "once_cell",
@@ -4310,7 +4156,7 @@ dependencies = [
  "deno_core",
  "deno_error",
  "deno_native_certs",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "rustls-pemfile 2.2.0",
  "rustls-tokio-stream",
  "rustls-webpki 0.102.8",
@@ -4322,11 +4168,11 @@ dependencies = [
 
 [[package]]
 name = "deno_unsync"
-version = "0.4.3"
+version = "0.4.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "47c618b51088b3ac67f15c69b3ed7620ba3a7d495e5a090186df9424b5ab623e"
+checksum = "6742a724e8becb372a74c650a1aefb8924a5b8107f7d75b3848763ea24b27a87"
 dependencies = [
- "futures",
+ "futures-util",
  "parking_lot 0.12.4",
  "tokio",
 ]
@@ -4538,7 +4384,7 @@ checksum = "8034092389675178f570469e6c3b0465d3d30b4505c294a6550db47f3c17ad18"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -4559,7 +4405,7 @@ checksum = "30542c1ad912e0e3d22a1935c290e12e8a29d704a420177a31faad4a601a0800"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -4603,7 +4449,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "rustc_version 0.4.1",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -4708,7 +4554,7 @@ checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -4743,7 +4589,7 @@ checksum = "788160fb30de9cdd857af31c6a2675904b16ece8fc2737b2c7127ba368c9d0f4"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -4806,17 +4652,16 @@ dependencies = [
 
 [[package]]
 name = "duckdb"
-version = "1.2.2"
+version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "49ac283b6621e3becf8014d1efa655522794075834c72f744573debef9c9f6c8"
+checksum = "379464d1fbb69d1bbda7c11d96fafde6f2bdb78c67e630e6339b048e6e45107e"
 dependencies = [
- "arrow 54.3.1",
+ "arrow",
  "cast",
  "fallible-iterator 0.3.0",
  "fallible-streaming-iterator",
  "hashlink 0.9.1",
  "libduckdb-sys",
- "memchr",
  "num-integer",
  "rust_decimal",
  "smallvec",
@@ -5019,27 +4864,27 @@ dependencies = [
  "heck 0.5.0",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
 name = "enumflags2"
-version = "0.7.11"
+version = "0.7.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ba2f4b465f5318854c6f8dd686ede6c0a9dc67d4b1ac241cf0eb51521a309147"
+checksum = "1027f7680c853e056ebcec683615fb6fbbc07dbaa13b4d5d9442b146ded4ecef"
 dependencies = [
  "enumflags2_derive",
 ]
 
 [[package]]
 name = "enumflags2_derive"
-version = "0.7.11"
+version = "0.7.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fc4caf64a58d7a6d65ab00639b046ff54399a39f5f2554728895ace4b297cd79"
+checksum = "67c78a4d8fdf9953a5c9d458f9efe940fd97a0cab0941c075a813ac594733827"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -5270,14 +5115,14 @@ dependencies = [
 
 [[package]]
 name = "flate2"
-version = "1.1.1"
+version = "1.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ced92e76e966ca2fd84c8f7aa01a4aea65b0eb6648d72f7c8f3e2764a67fece"
+checksum = "4a3d7db9596fecd151c5f638c0ee5d5bd487b6e0ea232e5dc96d5250f6f94b1d"
 dependencies = [
  "crc32fast",
  "libz-rs-sys",
  "libz-sys",
- "miniz_oxide 0.8.8",
+ "miniz_oxide 0.8.9",
 ]
 
 [[package]]
@@ -5340,7 +5185,7 @@ checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -5378,7 +5223,7 @@ checksum = "32016f1242eb82af5474752d00fd8ebcd9004bd69b462b1c91de833972d08ed4"
 dependencies = [
  "proc-macro2",
  "swc_macros_common",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -5513,7 +5358,7 @@ checksum = "162ee34ebcb7c64a8abebc059ce0fee27c2262618d7b60ed8faf72fef13c3650"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -5819,7 +5664,7 @@ dependencies = [
  "libc",
  "log",
  "rustversion",
- "windows 0.61.1",
+ "windows 0.61.3",
 ]
 
 [[package]]
@@ -5845,11 +5690,11 @@ dependencies = [
 
 [[package]]
 name = "getopts"
-version = "0.2.21"
+version = "0.2.23"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "14dbbfd5c71d70241ecf9e6f13737f7b5ce823821063188d7e46c41d371eebd5"
+checksum = "cba6ae63eb948698e300f645f87c70f76630d505f23b8907cf1e193ee85048c1"
 dependencies = [
- "unicode-width 0.1.14",
+ "unicode-width 0.2.1",
 ]
 
 [[package]]
@@ -5861,7 +5706,7 @@ dependencies = [
  "cfg-if",
  "js-sys",
  "libc",
- "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasi 0.11.1+wasi-snapshot-preview1",
  "wasm-bindgen",
 ]
 
@@ -5912,7 +5757,7 @@ checksum = "53010ccb100b96a67bc32c0175f0ed1426b31b655d562898e57325f81c023ac0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -5990,7 +5835,7 @@ dependencies = [
  "google-cloud-token",
  "home",
  "jsonwebtoken 9.3.1",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "serde",
  "serde_json",
  "thiserror 1.0.69",
@@ -6033,7 +5878,7 @@ version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d901aeb453fd80e51d64df4ee005014f6cf39f2d736dd64f7239c132d9d39a6a"
 dependencies = [
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "thiserror 1.0.69",
  "tokio",
 ]
@@ -6105,7 +5950,7 @@ checksum = "b89c83349105e3732062a895becfc71a8f921bb71ecbbdd8ff99263e3b53a0ca"
 dependencies = [
  "bitflags 2.9.1",
  "gpu-descriptor-types",
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
 ]
 
 [[package]]
@@ -6220,9 +6065,9 @@ dependencies = [
 
 [[package]]
 name = "hashbrown"
-version = "0.15.3"
+version = "0.15.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "84b26c544d002229e640969970a2e74021aadf6e2f96372b9c58eff97de08eb3"
+checksum = "5971ac85611da7067dbfcabef3c70ebb5606018acd9e2a3903a0da507521e0d5"
 dependencies = [
  "allocator-api2",
  "equivalent",
@@ -6237,7 +6082,7 @@ checksum = "f208758247e68e239acaa059e72e4ce1f30f2a4b6523f19c1b923d25b7e9cceb"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -6255,7 +6100,7 @@ version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7382cf6263419f2d8df38c55d7da83da5c18aef87fc7a7fc1fb1e344edfe14c1"
 dependencies = [
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
 ]
 
 [[package]]
@@ -6286,9 +6131,9 @@ checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
 [[package]]
 name = "hermit-abi"
-version = "0.5.1"
+version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f154ce46856750ed433c8649605bf7ed2de3bc35fd9d2a9f30cddd873c80cb08"
+checksum = "fc0fef456e4baa96da950455cd02c081ca953b141298e41db3fc7e36b1da849c"
 
 [[package]]
 name = "hex"
@@ -6577,14 +6422,14 @@ dependencies = [
 
 [[package]]
 name = "hyper-rustls"
-version = "0.27.6"
+version = "0.27.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "03a01595e11bdcec50946522c32dde3fc6914743000a68b93000965f2f02406d"
+checksum = "e3c93eb611681b207e1fe55d5a71ecf91572ec8a6705cdb6857f7d8d5242cf58"
 dependencies = [
  "http 1.3.1",
  "hyper 1.6.0",
  "hyper-util",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "rustls-native-certs 0.8.1",
  "rustls-pki-types",
  "tokio",
@@ -6637,9 +6482,9 @@ dependencies = [
 
 [[package]]
 name = "hyper-util"
-version = "0.1.13"
+version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b1c293b6b3d21eca78250dc7dbebd6b9210ec5530e038cbfe0661b5c47ab06e8"
+checksum = "dc2fdfdbff08affe55bb779f33b053aa1fe5dd5b54c257343c17edfa55711bdb"
 dependencies = [
  "base64 0.22.1",
  "bytes",
@@ -6883,7 +6728,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cea70ddb795996207ad57735b50c5982d8844f38ba9ee5f1aedcfb708a2aa11e"
 dependencies = [
  "equivalent",
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
  "serde",
 ]
 
@@ -6896,7 +6741,7 @@ dependencies = [
  "console",
  "number_prefix",
  "portable-atomic",
- "unicode-width 0.2.0",
+ "unicode-width 0.2.1",
  "web-time",
 ]
 
@@ -7003,7 +6848,7 @@ dependencies = [
  "heck 0.5.0",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -7253,7 +7098,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "regex",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -7343,15 +7188,15 @@ dependencies = [
 
 [[package]]
 name = "libc"
-version = "0.2.172"
+version = "0.2.173"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d750af042f7ef4f724306de029d18836c26c1765a54a6a3f094cbd23a7267ffa"
+checksum = "d8cfeafaffdbc32176b64fb251369d52ea9f0a8fbc6f8759edffef7b525d64bb"
 
 [[package]]
 name = "libduckdb-sys"
-version = "1.2.2"
+version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "12cac9d03484c43fefac8b2066a253c9b0b3b0cd02cbe02a9ea2312f7e382618"
+checksum = "25d3f1defe457d1ac0fbaef0fe6926953cb33419dd3c8dbac53882d020bee697"
 dependencies = [
  "autocfg",
  "cc",
@@ -7399,7 +7244,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "07033963ba89ebaf1584d767badaa2e8fcec21aedea6b8c0346d487d49c28667"
 dependencies = [
  "cfg-if",
- "windows-targets 0.53.0",
+ "windows-targets 0.53.2",
 ]
 
 [[package]]
@@ -7427,7 +7272,7 @@ checksum = "c0ff37bd590ca25063e35af745c343cb7a0271906fb7b37e4813e8f79f00268d"
 dependencies = [
  "bitflags 2.9.1",
  "libc",
- "redox_syscall 0.5.12",
+ "redox_syscall 0.5.13",
 ]
 
 [[package]]
@@ -7453,10 +7298,20 @@ dependencies = [
 ]
 
 [[package]]
-name = "libz-rs-sys"
-version = "0.5.0"
+name = "libyml"
+version = "0.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6489ca9bd760fe9642d7644e827b0c9add07df89857b0416ee15c1cc1a3b8c5a"
+checksum = "3302702afa434ffa30847a83305f0a69d6abd74293b6554c18ec85c7ef30c980"
+dependencies = [
+ "anyhow",
+ "version_check",
+]
+
+[[package]]
+name = "libz-rs-sys"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "172a788537a2221661b480fee8dc5f96c580eb34fa88764d3205dc356c7e4221"
 dependencies = [
  "zlib-rs",
 ]
@@ -7548,7 +7403,7 @@ version = "0.12.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "234cf4f4a04dc1f57e24b96cc0cd600cf2af460d4161ac5ecdd0af8e1f3b2a38"
 dependencies = [
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
 ]
 
 [[package]]
@@ -7557,7 +7412,7 @@ version = "0.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9f8cc7106155f10bdf99a6f379688f543ad6596a415375b36a59a054ceda1198"
 dependencies = [
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
 ]
 
 [[package]]
@@ -7577,11 +7432,11 @@ dependencies = [
 
 [[package]]
 name = "lz4_flex"
-version = "0.11.3"
+version = "0.11.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "75761162ae2b0e580d7e7c390558127e5f01b4194debd6221fd8c207fc80e3f5"
+checksum = "2c592ad9fbc1b7838633b3ae55ce69b17d01150c72fcef229fbb819d39ee51ee"
 dependencies = [
- "twox-hash 1.6.3",
+ "twox-hash 2.1.1",
 ]
 
 [[package]]
@@ -7606,9 +7461,9 @@ dependencies = [
 
 [[package]]
 name = "macro_rules_attribute"
-version = "0.2.0"
+version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8a82271f7bc033d84bbca59a3ce3e4159938cb08a9c3aebbe54d215131518a13"
+checksum = "65049d7923698040cd0b1ddcced9b0eb14dd22c5f86ae59c3740eab64a676520"
 dependencies = [
  "macro_rules_attribute-proc_macro",
  "paste",
@@ -7616,9 +7471,9 @@ dependencies = [
 
 [[package]]
 name = "macro_rules_attribute-proc_macro"
-version = "0.2.0"
+version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b8dd856d451cc0da70e2ef2ce95a18e39a93b7558bedf10201ad28503f918568"
+checksum = "670fdfda89751bc4a84ac13eaa63e205cf0fd22b4c9a5fbfa085b63c1f1d3a30"
 
 [[package]]
 name = "magic-crypt"
@@ -7666,7 +7521,7 @@ dependencies = [
  "base64 0.22.1",
  "gethostname",
  "mail-builder",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "rustls-pki-types",
  "smtp-proto",
  "tokio",
@@ -7810,9 +7665,9 @@ dependencies = [
 
 [[package]]
 name = "memchr"
-version = "2.7.4"
+version = "2.7.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "78ca9ab1a0babb1e7d5695e3530886289c18cf2f87ec19a575a0abdce112e3a3"
+checksum = "32a282da65faaf38286cf3be983213fcf1d2e2a58700e808f83f4ea9a4804bc0"
 
 [[package]]
 name = "memmap2"
@@ -7888,7 +7743,7 @@ checksum = "db5b29714e950dbb20d5e6f74f9dcec4edbcc1067bb7f8ed198c097b8c1a818b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -7934,9 +7789,9 @@ dependencies = [
 
 [[package]]
 name = "miniz_oxide"
-version = "0.8.8"
+version = "0.8.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3be647b768db090acb35d5ec5db2b0e1f1de11133ca123b9eacf5137868f892a"
+checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
 dependencies = [
  "adler2",
  "simd-adler32",
@@ -7950,7 +7805,7 @@ checksum = "a4a650543ca06a924e8b371db273b2756685faae30f8487da1b56505a8f78b0c"
 dependencies = [
  "libc",
  "log",
- "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasi 0.11.1+wasi-snapshot-preview1",
  "windows-sys 0.48.0",
 ]
 
@@ -7961,7 +7816,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "78bed444cc8a2160f01cbcf811ef18cac863ad68ae8ca62092e8db51d51c761c"
 dependencies = [
  "libc",
- "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasi 0.11.1+wasi-snapshot-preview1",
  "windows-sys 0.59.0",
 ]
 
@@ -8008,7 +7863,7 @@ checksum = "c402a4092d5e204f32c9e155431046831fa712637043c58cb73bc6bc6c9663b5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -8053,7 +7908,7 @@ dependencies = [
  "proc-macro-error2",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
  "termcolor",
  "thiserror 2.0.12",
 ]
@@ -8084,7 +7939,7 @@ dependencies = [
  "tokio",
  "tokio-native-tls",
  "tokio-util",
- "twox-hash 2.1.0",
+ "twox-hash 2.1.1",
  "url",
 ]
 
@@ -8156,7 +8011,7 @@ dependencies = [
  "quote",
  "serde",
  "serde_json",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -8351,7 +8206,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -8619,7 +8474,7 @@ dependencies = [
  "proc-macro-crate",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -8639,7 +8494,7 @@ dependencies = [
  "getrandom 0.2.16",
  "http 1.3.1",
  "rand 0.8.5",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "serde",
  "serde_json",
  "serde_path_to_error",
@@ -8688,7 +8543,7 @@ dependencies = [
  "percent-encoding",
  "quick-xml 0.37.5",
  "rand 0.9.0",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "ring 0.17.14",
  "serde",
  "serde_json",
@@ -8837,7 +8692,7 @@ checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -9152,7 +9007,7 @@ checksum = "bc838d2a56b5b1a6c25f55575dfc605fabb63bb2365f6c2353ef9159aa69e4a5"
 dependencies = [
  "cfg-if",
  "libc",
- "redox_syscall 0.5.12",
+ "redox_syscall 0.5.13",
  "smallvec",
  "windows-targets 0.52.6",
 ]
@@ -9164,13 +9019,13 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "be7b2d778f6b841d37083ebdf32e33a524acde1266b5884a8ca29bf00dfa1231"
 dependencies = [
  "ahash 0.8.12",
- "arrow-array 55.1.0",
- "arrow-buffer 55.1.0",
- "arrow-cast 55.1.0",
- "arrow-data 55.1.0",
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-cast",
+ "arrow-data",
  "arrow-ipc",
- "arrow-schema 55.1.0",
- "arrow-select 55.1.0",
+ "arrow-schema",
+ "arrow-select",
  "base64 0.22.1",
  "brotli 8.0.1",
  "bytes",
@@ -9178,7 +9033,7 @@ dependencies = [
  "flate2",
  "futures",
  "half",
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
  "lz4_flex",
  "num",
  "num-bigint",
@@ -9189,7 +9044,7 @@ dependencies = [
  "snap",
  "thrift",
  "tokio",
- "twox-hash 2.1.0",
+ "twox-hash 2.1.1",
  "zstd",
 ]
 
@@ -9277,7 +9132,7 @@ checksum = "31095ca1f396e3de32745f42b20deef7bc09077f918b085307e8eab6ddd8fb9c"
 dependencies = [
  "once_cell",
  "serde",
- "unicode-width 0.2.0",
+ "unicode-width 0.2.1",
  "unscanny",
 ]
 
@@ -9346,7 +9201,7 @@ dependencies = [
  "phf_shared",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -9365,7 +9220,7 @@ source = "git+https://github.com/php-rust-tools/parser?rev=ec4cb411dec09450946ef
 dependencies = [
  "ariadne",
  "clap",
- "schemars",
+ "schemars 0.8.22",
  "serde",
  "serde_json",
 ]
@@ -9387,7 +9242,7 @@ checksum = "6e918e4ff8c4549eb882f14b3a4bc8c8bc93de829416eacf579f1207a8fbf861"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -9456,7 +9311,7 @@ dependencies = [
  "crc32fast",
  "fdeflate",
  "flate2",
- "miniz_oxide 0.8.8",
+ "miniz_oxide 0.8.9",
 ]
 
 [[package]]
@@ -9473,9 +9328,9 @@ dependencies = [
 
 [[package]]
 name = "portable-atomic"
-version = "1.11.0"
+version = "1.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "350e9b48cbc6b0e028b0473b114454c6316e57336ee184ceab6e53f72c178b3e"
+checksum = "f84267b20a16ea918e43c6a88433c2d54fa145c92a811b5b047ccbe153674483"
 
 [[package]]
 name = "postgres-native-tls"
@@ -9594,12 +9449,12 @@ checksum = "c6fa0831dd7cc608c38a5e323422a0077678fa5744aa2be4ad91c4ece8eec8d5"
 
 [[package]]
 name = "prettyplease"
-version = "0.2.33"
+version = "0.2.34"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9dee91521343f4c5c6a63edd65e54f31f5c92fe8978c40a4282f8372194c6a7d"
+checksum = "6837b9e10d61f45f987d50808f83d1ee3d206c66acf650c3e4ae2e1f6ddedf55"
 dependencies = [
  "proc-macro2",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -9617,7 +9472,7 @@ version = "3.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "edce586971a4dfaa28950c6f18ed55e0406c1ab88bbce2c6f6293a7aaba73d35"
 dependencies = [
- "toml_edit 0.22.26",
+ "toml_edit 0.22.27",
 ]
 
 [[package]]
@@ -9663,7 +9518,7 @@ dependencies = [
  "proc-macro-error-attr2",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -9674,7 +9529,7 @@ checksum = "07c277e4e643ef00c1233393c673f655e3672cf7eb3ba08a00bdd0ea59139b5f"
 dependencies = [
  "proc-macro-rules-macros",
  "proc-macro2",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -9686,7 +9541,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -9783,7 +9638,7 @@ dependencies = [
  "prost",
  "prost-types",
  "regex",
- "syn 2.0.101",
+ "syn 2.0.103",
  "tempfile",
 ]
 
@@ -9797,7 +9652,7 @@ dependencies = [
  "itertools 0.14.0",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -9920,7 +9775,7 @@ checksum = "6b450dad8382b1b95061d5ca1eb792081fb082adf48c678791fe917509596d5f"
 dependencies = [
  "ahash 0.8.12",
  "equivalent",
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
  "parking_lot 0.12.4",
 ]
 
@@ -9936,7 +9791,7 @@ dependencies = [
  "quinn-proto",
  "quinn-udp",
  "rustc-hash 2.1.1",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "socket2",
  "thiserror 2.0.12",
  "tokio",
@@ -9956,7 +9811,7 @@ dependencies = [
  "rand 0.9.0",
  "ring 0.17.14",
  "rustc-hash 2.1.1",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "rustls-pki-types",
  "slab",
  "thiserror 2.0.12",
@@ -9990,9 +9845,9 @@ dependencies = [
 
 [[package]]
 name = "r-efi"
-version = "5.2.0"
+version = "5.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "74765f6d916ee2faa39bc8e68e4f3ed8949b48cccdac59983d287a7cb71ce9c5"
+checksum = "69cdb34c158ceb288df11e18b4bd39de994f6657d83847bdffdbd7f346754b0f"
 
 [[package]]
 name = "radium"
@@ -10206,7 +10061,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "76009fbe0614077fc1a2ce255e3a1881a2e3a3527097d5dc6d8212c585e7e38b"
 dependencies = [
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -10229,9 +10084,9 @@ dependencies = [
 
 [[package]]
 name = "redox_syscall"
-version = "0.5.12"
+version = "0.5.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "928fca9cf2aa042393a8325b9ead81d2f0df4cb12e1e24cef072922ccd99c5af"
+checksum = "0d04b7d0ee6b4a0207a0a7adb104d23ecb0b47d6beae7152d0fa34b692b29fd6"
 dependencies = [
  "bitflags 2.9.1",
 ]
@@ -10264,7 +10119,7 @@ checksum = "1165225c21bff1f3bbce98f5a1f889949bc902d3575308cc7b0de30b4f6d27c7"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -10376,9 +10231,9 @@ dependencies = [
 
 [[package]]
 name = "reqwest"
-version = "0.12.18"
+version = "0.12.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e98ff6b0dbbe4d5a37318f433d4fc82babd21631f194d370409ceb2e40b2f0b5"
+checksum = "eabf4c97d9130e2bf606614eb937e86edac8292eaa6f422f995d7e8de1eb1813"
 dependencies = [
  "async-compression",
  "base64 0.22.1",
@@ -10391,19 +10246,17 @@ dependencies = [
  "http-body 1.0.1",
  "http-body-util",
  "hyper 1.6.0",
- "hyper-rustls 0.27.6",
+ "hyper-rustls 0.27.7",
  "hyper-tls 0.6.0",
  "hyper-util",
- "ipnet",
  "js-sys",
  "log",
  "mime",
  "native-tls",
- "once_cell",
  "percent-encoding",
  "pin-project-lite",
  "quinn",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "rustls-native-certs 0.8.1",
  "rustls-pki-types",
  "serde",
@@ -10434,7 +10287,7 @@ dependencies = [
  "anyhow",
  "async-trait",
  "http 1.3.1",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "serde",
  "thiserror 1.0.69",
  "tower-service",
@@ -10453,7 +10306,7 @@ dependencies = [
  "http 1.3.1",
  "hyper 1.6.0",
  "parking_lot 0.11.2",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "reqwest-middleware",
  "retry-policies",
  "thiserror 1.0.69",
@@ -10557,35 +10410,41 @@ dependencies = [
 [[package]]
 name = "rmcp"
 version = "0.1.5"
-source = "git+https://github.com/windmill-labs/rust-sdk#9142b40202e49ca0b6530fa49a3abc8bd1b2fcf0"
+source = "git+https://github.com/modelcontextprotocol/rust-sdk#d1884fe598cd4c524ff6e0101859a60d4b4c8b8f"
 dependencies = [
- "async-stream",
- "axum",
- "base64 0.21.7",
+ "base64 0.22.1",
+ "bytes",
  "chrono",
  "futures",
+ "http 1.3.1",
+ "http-body 1.0.1",
+ "http-body-util",
  "paste",
  "pin-project-lite",
  "rand 0.9.0",
  "rmcp-macros",
- "schemars",
+ "schemars 0.8.22",
  "serde",
  "serde_json",
+ "sse-stream",
  "thiserror 2.0.12",
  "tokio",
  "tokio-stream",
  "tokio-util",
+ "tower-service",
  "tracing",
+ "uuid",
 ]
 
 [[package]]
 name = "rmcp-macros"
 version = "0.1.5"
-source = "git+https://github.com/windmill-labs/rust-sdk#9142b40202e49ca0b6530fa49a3abc8bd1b2fcf0"
+source = "git+https://github.com/modelcontextprotocol/rust-sdk#d1884fe598cd4c524ff6e0101859a60d4b4c8b8f"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "serde_json",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -10675,7 +10534,7 @@ dependencies = [
  "quote",
  "rust-embed-utils",
  "shellexpand",
- "syn 2.0.101",
+ "syn 2.0.103",
  "walkdir",
 ]
 
@@ -10701,9 +10560,9 @@ dependencies = [
 
 [[package]]
 name = "rust_decimal"
-version = "1.37.1"
+version = "1.37.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "faa7de2ba56ac291bd90c6b9bece784a52ae1411f9506544b3eae36dd2356d50"
+checksum = "b203a6425500a03e0919c42d3c47caca51e79f1132046626d2c8871c5092035d"
 dependencies = [
  "arrayvec",
  "borsh",
@@ -10718,9 +10577,9 @@ dependencies = [
 
 [[package]]
 name = "rustc-demangle"
-version = "0.1.24"
+version = "0.1.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "719b953e2095829ee67db738b3bfa9fa368c94900df327b3f07fe6e794d2fe1f"
+checksum = "989e6739f80c4ad5b13e0fd7fe89531180375b18520cc8c82080e4dc4035b84f"
 
 [[package]]
 name = "rustc-hash"
@@ -10815,9 +10674,9 @@ dependencies = [
 
 [[package]]
 name = "rustls"
-version = "0.23.27"
+version = "0.23.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "730944ca083c1c233a75c09f199e973ca499344a2b7ba9e755c457e86fb4a321"
+checksum = "7160e3e10bf4535308537f3c4e1641468cd0e485175d6163087c0393c7d46643"
 dependencies = [
  "aws-lc-rs",
  "log",
@@ -10901,7 +10760,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "22557157d7395bc30727745b365d923f1ecc230c4c80b176545f3f4f08c46e33"
 dependencies = [
  "futures",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "socket2",
  "tokio",
 ]
@@ -11122,12 +10981,25 @@ version = "0.8.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3fbf2ae1b8bc8e02df939598064d22402220cd5bbcca1c76f7d6a310974d5615"
 dependencies = [
+ "chrono",
  "dyn-clone",
  "schemars_derive",
  "serde",
  "serde_json",
 ]
 
+[[package]]
+name = "schemars"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4cd191f9397d57d581cddd31014772520aa448f65ef991055d7f61582c65165f"
+dependencies = [
+ "dyn-clone",
+ "ref-cast",
+ "serde",
+ "serde_json",
+]
+
 [[package]]
 name = "schemars_derive"
 version = "0.8.22"
@@ -11137,7 +11009,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "serde_derive_internals",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -11317,7 +11189,7 @@ checksum = "5b0276cf7f2c73365f7157c8123c21cd9a50fbbd844757af28ca1f5925fc2a00"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -11328,7 +11200,7 @@ checksum = "18d26a20a969b9e3fdf2fc2d9f21eda6c40e2de84c9408bb5d3b05d499aae711"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -11380,14 +11252,14 @@ checksum = "175ee3e80ae9982737ca543e96133087cbd9a485eecc3bc4de9c1a37b47ea59c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
 name = "serde_spanned"
-version = "0.6.8"
+version = "0.6.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "87607cb1398ed59d48732e575a4c28a7a8ebf2454b964fe3f224f2afc07909e1"
+checksum = "bf41e0cfaf7226dca15e8197172c295a782857fcb97fad1808a166870dee75a3"
 dependencies = [
  "serde",
 ]
@@ -11420,15 +11292,16 @@ dependencies = [
 
 [[package]]
 name = "serde_with"
-version = "3.12.0"
+version = "3.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d6b6f7f2fcb69f747921f79f3926bd1e203fce4fef62c268dd3abfb6d86029aa"
+checksum = "bf65a400f8f66fb7b0552869ad70157166676db75ed8181f8104ea91cf9d0b42"
 dependencies = [
  "base64 0.22.1",
  "chrono",
  "hex",
  "indexmap 1.9.3",
  "indexmap 2.9.0",
+ "schemars 0.9.0",
  "serde",
  "serde_derive",
  "serde_json",
@@ -11438,14 +11311,29 @@ dependencies = [
 
 [[package]]
 name = "serde_with_macros"
-version = "3.12.0"
+version = "3.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8d00caa5193a3c8362ac2b73be6b9e768aa5a4b2f721d8f4b339600c3cb51f8e"
+checksum = "81679d9ed988d5e9a5e6531dc3f2c28efbd639cbd1dfb628df08edea6004da77"
 dependencies = [
  "darling 0.20.11",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
+]
+
+[[package]]
+name = "serde_yml"
+version = "0.0.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "59e2dd588bf1597a252c3b920e0143eb99b0f76e4e082f4c92ce34fbc9e71ddd"
+dependencies = [
+ "indexmap 2.9.0",
+ "itoa",
+ "libyml",
+ "memchr",
+ "ryu",
+ "serde",
+ "version_check",
 ]
 
 [[package]]
@@ -11645,12 +11533,9 @@ dependencies = [
 
 [[package]]
 name = "slab"
-version = "0.4.9"
+version = "0.4.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f92a496fb766b417c996b9c5e57daf2f7ad3b0bebe1ccfca4856390e3d3bb67"
-dependencies = [
- "autocfg",
-]
+checksum = "04dc19736151f35336d325007ac991178d504a119863a2fcb3758cdb5e52c50d"
 
 [[package]]
 name = "slotmap"
@@ -11672,9 +11557,9 @@ dependencies = [
 
 [[package]]
 name = "smallvec"
-version = "1.15.0"
+version = "1.15.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8917285742e9f3e1683f0a9c4e6b57960b7314d0b08d30d1ecd426713ee2eee9"
+checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
 dependencies = [
  "serde",
 ]
@@ -11733,9 +11618,9 @@ dependencies = [
 
 [[package]]
 name = "sourcemap"
-version = "9.2.1"
+version = "9.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bdee719193ae5c919a3ee43f64c2c0dd87f9b9a451d67918a2a5ec2e3c70561c"
+checksum = "e22afbcb92ce02d23815b9795523c005cb9d3c214f8b7a66318541c240ea7935"
 dependencies = [
  "base64-simd 0.8.0",
  "bitvec",
@@ -11830,7 +11715,7 @@ checksum = "da5fc6819faabb412da764b99d3b713bb55083c11e7e0c00144d386cd6a1939c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -11864,14 +11749,14 @@ dependencies = [
  "futures-intrusive",
  "futures-io",
  "futures-util",
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
  "hashlink 0.10.0",
  "indexmap 2.9.0",
  "log",
  "memchr",
  "once_cell",
  "percent-encoding",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "serde",
  "serde_json",
  "sha2 0.10.9",
@@ -11895,7 +11780,7 @@ dependencies = [
  "quote",
  "sqlx-core",
  "sqlx-macros-core",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -11918,7 +11803,7 @@ dependencies = [
  "sqlx-mysql",
  "sqlx-postgres",
  "sqlx-sqlite",
- "syn 2.0.101",
+ "syn 2.0.103",
  "tokio",
  "url",
 ]
@@ -12035,6 +11920,19 @@ dependencies = [
  "uuid",
 ]
 
+[[package]]
+name = "sse-stream"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f649a9f9e91db2ed32f3724516eac2bc09fab77fc33be8f670f5619b9dc6c3f"
+dependencies = [
+ "bytes",
+ "futures-util",
+ "http-body 1.0.1",
+ "http-body-util",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "stable_deref_trait"
 version = "1.2.0"
@@ -12069,7 +11967,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "swc_macros_common",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12138,7 +12036,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "rustversion",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12151,7 +12049,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "rustversion",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12237,7 +12135,7 @@ dependencies = [
  "rustc-hash 1.1.0",
  "serde",
  "siphasher 0.3.11",
- "sourcemap 9.2.1",
+ "sourcemap 9.2.2",
  "swc_allocator",
  "swc_atoms",
  "swc_eq_ignore_macros",
@@ -12270,7 +12168,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "swc_macros_common",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12301,7 +12199,7 @@ dependencies = [
  "num-bigint",
  "once_cell",
  "serde",
- "sourcemap 9.2.1",
+ "sourcemap 9.2.2",
  "swc_allocator",
  "swc_atoms",
  "swc_common",
@@ -12319,7 +12217,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "swc_macros_common",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12404,7 +12302,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "swc_macros_common",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12511,7 +12409,7 @@ checksum = "63db0adcff29d220c3d151c5b25c0eabe7e32dd936212b84cdaa1392e3130497"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12522,7 +12420,7 @@ checksum = "f486687bfb7b5c560868f69ed2d458b880cebc9babebcb67e49f31b55c5bf847"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12545,7 +12443,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "swc_macros_common",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12561,9 +12459,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.101"
+version = "2.0.103"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8ce2b7fc941b3a24138a0a7cf8e858bfc6a992e7978a068a5c760deb0ed43caf"
+checksum = "e4307e30089d6fd6aff212f2da3a1f9e32f3223b1f010fb09b7c95f90f3ca1e8"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -12605,7 +12503,7 @@ checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12937,7 +12835,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c13547615a44dc9c452a8a534638acdf07120d4b6847c8178705da06306a3057"
 dependencies = [
  "unicode-linebreak",
- "unicode-width 0.2.0",
+ "unicode-width 0.2.1",
 ]
 
 [[package]]
@@ -12966,7 +12864,7 @@ checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -12977,17 +12875,16 @@ checksum = "7f7cf42b4507d8ea322120659672cf1b9dbb93f8f2d4ecfd6e51350ff5b17a1d"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
 name = "thread_local"
-version = "1.1.8"
+version = "1.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8b9ef9bad013ada3808854ceac7b46812a6465ba368859a37e2100283d2d719c"
+checksum = "f60246a4944f24f6e018aa17cdeffb7818b76356965d03b07d6a9886e8962185"
 dependencies = [
  "cfg-if",
- "once_cell",
 ]
 
 [[package]]
@@ -13146,7 +13043,7 @@ dependencies = [
  "bincode",
  "lazy_static",
  "rayon",
- "schemars",
+ "schemars 0.8.22",
  "serde",
  "thiserror 1.0.69",
  "tracing",
@@ -13222,7 +13119,7 @@ checksum = "6e06d43f1345a3bcd39f6a56dbb7dcab2ba47e68e8ac134855e7e2bdbaf8cab8"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -13335,7 +13232,7 @@ version = "0.26.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8e727b36a1a0e8b74c376ac2211e40c2c8af09fb4013c60d910495810f008e9b"
 dependencies = [
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "tokio",
 ]
 
@@ -13402,7 +13299,7 @@ dependencies = [
  "futures-io",
  "futures-sink",
  "futures-util",
- "hashbrown 0.15.3",
+ "hashbrown 0.15.4",
  "pin-project-lite",
  "slab",
  "tokio",
@@ -13443,9 +13340,9 @@ dependencies = [
 
 [[package]]
 name = "toml_datetime"
-version = "0.6.9"
+version = "0.6.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3da5db5a963e24bc68be8b17b6fa82814bb22ee8660f192bb182771d498f09a3"
+checksum = "22cddaf88f4fbc13c51aebbf5f8eceb5c7c5a9da2ac40a13519eb5b0a0e8f11c"
 dependencies = [
  "serde",
 ]
@@ -13465,13 +13362,13 @@ dependencies = [
 
 [[package]]
 name = "toml_edit"
-version = "0.22.26"
+version = "0.22.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "310068873db2c5b3e7659d2cc35d21855dbafa50d1ce336397c666e3cb08137e"
+checksum = "41fe8c660ae4257887cf66394862d21dbca4a6ddd26f04a3560410406a2f819a"
 dependencies = [
  "indexmap 2.9.0",
  "toml_datetime",
- "winnow 0.7.10",
+ "winnow 0.7.11",
 ]
 
 [[package]]
@@ -13564,9 +13461,9 @@ dependencies = [
 
 [[package]]
 name = "tower-http"
-version = "0.6.4"
+version = "0.6.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0fdb0c213ca27a9f57ab69ddb290fd80d970922355b83ae380b395d3986b8a2e"
+checksum = "adc82fd73de2a9722ac5da747f12383d2bfdb93591ee6c58486e0097890f05f2"
 dependencies = [
  "async-compression",
  "bitflags 2.9.1",
@@ -13624,20 +13521,20 @@ dependencies = [
 
 [[package]]
 name = "tracing-attributes"
-version = "0.1.28"
+version = "0.1.30"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "395ae124c09f9e6918a2310af6038fba074bcf474ac352496d5910dd59a2226d"
+checksum = "81383ab64e72a7a8b8e13130c49e3dab29def6d0c7d76a03087b3cf71c5c6903"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
 name = "tracing-core"
-version = "0.1.33"
+version = "0.1.34"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e672c95779cf947c5311f83787af4fa8fffd12fb27e4993211a84bdfd9610f9c"
+checksum = "b9d12581f227e93f094d3af2ae690a574abb8a2b9b7a96e7cfe9647b2b617678"
 dependencies = [
  "once_cell",
  "valuable",
@@ -13671,7 +13568,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ba3beec919fbdf99d719de8eda6adae3281f8a5b71ae40431f44dc7423053d34"
 dependencies = [
  "loki-api",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "serde",
  "serde_json",
  "snap",
@@ -13831,9 +13728,9 @@ dependencies = [
 
 [[package]]
 name = "twox-hash"
-version = "2.1.0"
+version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e7b17f197b3050ba473acf9181f7b1d3b66d1cf7356c6cc57886662276e65908"
+checksum = "8b907da542cbced5261bd3256de1b3a1bf340a3d37f93425a07362a1d687de56"
 
 [[package]]
 name = "typed-arena"
@@ -13874,7 +13771,7 @@ checksum = "35f5380909ffc31b4de4f4bdf96b877175a016aa2ca98cee39fcfd8c4d53d952"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -14047,9 +13944,9 @@ checksum = "7dd6e30e90baa6f72411720665d41d89b9a3d039dc45b8faea1ddd07f617f6af"
 
 [[package]]
 name = "unicode-width"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fc81956842c57dac11422a97c3b8195a1ff727f06e85c84ed2e8aa277c9a0fd"
+checksum = "4a1a07cc7db3810833284e8d372ccdc6da29741639ecc70c9ec107df0fa6154c"
 
 [[package]]
 name = "unicode-xid"
@@ -14124,7 +14021,7 @@ dependencies = [
  "log",
  "native-tls",
  "once_cell",
- "rustls 0.23.27",
+ "rustls 0.23.28",
  "rustls-pki-types",
  "serde",
  "serde_json",
@@ -14302,9 +14199,9 @@ dependencies = [
 
 [[package]]
 name = "wasi"
-version = "0.11.0+wasi-snapshot-preview1"
+version = "0.11.1+wasi-snapshot-preview1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
+checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
 
 [[package]]
 name = "wasi"
@@ -14343,7 +14240,7 @@ dependencies = [
  "log",
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
  "wasm-bindgen-shared",
 ]
 
@@ -14378,7 +14275,7 @@ checksum = "8ae87ea40c9f689fc23f209965b6fb8a99ad69aeeb0231408be24920604395de"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
@@ -14413,7 +14310,7 @@ checksum = "17d5042cc5fa009658f9a7333ef24291b1291a25b6382dd68862a7f3b969f69b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -14623,7 +14520,7 @@ version = "1.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6994d13118ab492c3c80c1f81928718159254c53c472bf9ce36f8dae4add02a7"
 dependencies = [
- "redox_syscall 0.5.12",
+ "redox_syscall 0.5.13",
  "wasite",
  "web-sys",
 ]
@@ -14667,7 +14564,7 @@ checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
 [[package]]
 name = "windmill"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "axum",
@@ -14687,10 +14584,11 @@ dependencies = [
  "prometheus",
  "quote",
  "rand 0.9.0",
- "reqwest 0.12.18",
- "rustls 0.23.27",
+ "reqwest 0.12.20",
+ "rustls 0.23.28",
  "serde",
  "serde_json",
+ "serde_yml",
  "sha1",
  "sha2 0.10.9",
  "size",
@@ -14718,7 +14616,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "argon2",
@@ -14756,6 +14654,7 @@ dependencies = [
  "hmac",
  "http 1.3.1",
  "hyper 1.6.0",
+ "indexmap 2.9.0",
  "itertools 0.14.0",
  "jsonwebtoken 8.3.0",
  "lazy_static",
@@ -14777,7 +14676,7 @@ dependencies = [
  "rand 0.9.0",
  "rdkafka",
  "regex",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "rmcp",
  "rsa",
  "rumqttc",
@@ -14787,6 +14686,7 @@ dependencies = [
  "serde",
  "serde_json",
  "serde_urlencoded",
+ "serde_yml",
  "sha1",
  "sha2 0.10.9",
  "sql-builder",
@@ -14827,7 +14727,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api-client"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "base64 0.22.1",
  "chrono",
@@ -14842,7 +14742,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-audit"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "chrono",
  "serde",
@@ -14855,7 +14755,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-autoscaling"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "serde",
@@ -14869,7 +14769,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-common"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "async-stream",
@@ -14911,7 +14811,7 @@ dependencies = [
  "quick_cache",
  "rand 0.9.0",
  "regex",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "reqwest-middleware",
  "reqwest-retry",
  "semver 1.0.26",
@@ -14936,6 +14836,7 @@ dependencies = [
  "tracing-loki",
  "tracing-opentelemetry",
  "tracing-subscriber",
+ "url",
  "uuid",
  "windmill-macros",
  "windmill-parser-py",
@@ -14945,7 +14846,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-git-sync"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "regex",
  "serde",
@@ -14959,7 +14860,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-indexer"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "bytes",
@@ -14982,19 +14883,19 @@ dependencies = [
 
 [[package]]
 name = "windmill-macros"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "itertools 0.14.0",
  "lazy_static",
  "proc-macro2",
  "quote",
  "regex",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
 name = "windmill-parser"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "convert_case 0.6.0",
  "serde",
@@ -15003,7 +14904,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-bash"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "lazy_static",
@@ -15015,7 +14916,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-csharp"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "serde_json",
@@ -15027,7 +14928,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-go"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "gosyn",
@@ -15039,7 +14940,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-graphql"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "lazy_static",
@@ -15051,7 +14952,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-java"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "serde_json",
@@ -15063,7 +14964,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-nu"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "nu-parser",
@@ -15074,7 +14975,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-php"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "itertools 0.14.0",
@@ -15085,7 +14986,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-py"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "itertools 0.14.0",
@@ -15096,7 +14997,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-py-imports"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -15119,7 +15020,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-rust"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "convert_case 0.6.0",
@@ -15129,14 +15030,14 @@ dependencies = [
  "quote",
  "regex",
  "serde_json",
- "syn 2.0.101",
+ "syn 2.0.103",
  "toml",
  "windmill-parser",
 ]
 
 [[package]]
 name = "windmill-parser-sql"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "lazy_static",
@@ -15148,7 +15049,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-ts"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "lazy_static",
@@ -15166,7 +15067,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-wasm"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "getrandom 0.2.16",
@@ -15190,7 +15091,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-yaml"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "serde_json",
@@ -15200,7 +15101,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-queue"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -15217,7 +15118,7 @@ dependencies = [
  "lazy_static",
  "prometheus",
  "regex",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "serde",
  "serde_json",
  "serde_urlencoded",
@@ -15233,7 +15134,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-sql-datatype-parser-wasm"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "wasm-bindgen",
  "wasm-bindgen-test",
@@ -15243,7 +15144,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-worker"
-version = "1.494.0"
+version = "1.498.0"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -15295,7 +15196,7 @@ dependencies = [
  "prometheus",
  "rand 0.9.0",
  "regex",
- "reqwest 0.12.18",
+ "reqwest 0.12.20",
  "reqwest-middleware",
  "rust_decimal",
  "serde",
@@ -15357,9 +15258,9 @@ dependencies = [
 
 [[package]]
 name = "windows"
-version = "0.61.1"
+version = "0.61.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c5ee8f3d025738cb02bad7868bbb5f8a6327501e870bf51f1b455b0a2454a419"
+checksum = "9babd3a767a4c1aef6900409f85f5d53ce2544ccdfaa86dad48c91782c6d6893"
 dependencies = [
  "windows-collections",
  "windows-core 0.61.2",
@@ -15411,7 +15312,7 @@ dependencies = [
  "windows-interface 0.59.1",
  "windows-link",
  "windows-result 0.3.4",
- "windows-strings 0.4.2",
+ "windows-strings",
 ]
 
 [[package]]
@@ -15433,7 +15334,7 @@ checksum = "f6fc35f58ecd95a9b71c4f2329b911016e6bec66b3f2e6a4aad86bd2e99e2f9b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -15444,7 +15345,7 @@ checksum = "9107ddc059d5b6fbfbffdfa7a7fe3e22a226def0b2608f72e9d552763d3e1ad7"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -15455,7 +15356,7 @@ checksum = "a47fddd13af08290e67f4acabf4b459f647552718f683a7b415d290ac744a836"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -15466,7 +15367,7 @@ checksum = "08990546bf4edef8f431fa6326e032865f27138718c587dc21bc0265bbcb57cc"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -15477,7 +15378,7 @@ checksum = "29bee4b38ea3cde66011baa44dba677c432a78593e202392d1e9070cf2a7fca7"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -15488,14 +15389,14 @@ checksum = "bd9211b69f8dcdfa817bfd14bf1c97c9188afa36f4750130fcdf3f400eca9fa8"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
 name = "windows-link"
-version = "0.1.1"
+version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76840935b766e1b0a05c0066835fb9ec80071d4c09a16f6bd5f7e655e3c14c38"
+checksum = "5e6ad25900d524eaabdbbb96d20b4311e1e7ae1699af4fb28c17ae66c80d798a"
 
 [[package]]
 name = "windows-numerics"
@@ -15509,13 +15410,13 @@ dependencies = [
 
 [[package]]
 name = "windows-registry"
-version = "0.4.0"
+version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4286ad90ddb45071efd1a66dfa43eb02dd0dfbae1545ad6cc3c51cf34d7e8ba3"
+checksum = "b3bab093bdd303a1240bb99b8aba8ea8a69ee19d34c9e2ef9594e708a4878820"
 dependencies = [
+ "windows-link",
  "windows-result 0.3.4",
- "windows-strings 0.3.1",
- "windows-targets 0.53.0",
+ "windows-strings",
 ]
 
 [[package]]
@@ -15536,15 +15437,6 @@ dependencies = [
  "windows-link",
 ]
 
-[[package]]
-name = "windows-strings"
-version = "0.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "87fa48cc5d406560701792be122a10132491cff9d0aeb23583cc2dcafc847319"
-dependencies = [
- "windows-link",
-]
-
 [[package]]
 name = "windows-strings"
 version = "0.4.2"
@@ -15614,9 +15506,9 @@ dependencies = [
 
 [[package]]
 name = "windows-targets"
-version = "0.53.0"
+version = "0.53.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b1e4c7e8ceaaf9cb7d7507c974735728ab453b67ef8f18febdd7c11fe59dca8b"
+checksum = "c66f69fcc9ce11da9966ddb31a40968cad001c5bedeb5c2b82ede4253ab48aef"
 dependencies = [
  "windows_aarch64_gnullvm 0.53.0",
  "windows_aarch64_msvc 0.53.0",
@@ -15795,9 +15687,9 @@ dependencies = [
 
 [[package]]
 name = "winnow"
-version = "0.7.10"
+version = "0.7.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c06928c8748d81b05c9be96aad92e1b6ff01833332f281e8cfca3be4b35fc9ec"
+checksum = "74c7b26e3480b707944fc872477815d29a8e429d2f93a1ce000f5fa84a15cbcd"
 dependencies = [
  "memchr",
 ]
@@ -15955,7 +15847,7 @@ checksum = "2380878cad4ac9aac1e2435f3eb4020e8374b5f13c296cb75b4620ff8e229154"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
  "synstructure 0.13.2",
 ]
 
@@ -15967,7 +15859,7 @@ checksum = "38da3c9736e16c5d3c8c597a9aaa5d1fa565d0532ae05e27c24aa62fb32c0ab6"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
  "synstructure 0.13.2",
 ]
 
@@ -15988,7 +15880,7 @@ checksum = "28a6e20d751156648aa063f3800b706ee209a32c0b4d9f24be3d980b01be55ef"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -16008,7 +15900,7 @@ checksum = "d71e5d6e06ab090c67b5e44993ec16b72dcbaabc526db883a360057678b48502"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
  "synstructure 0.13.2",
 ]
 
@@ -16029,7 +15921,7 @@ checksum = "ce36e65b0d2999d2aafac989fb249189a141aee1f53c612c1f37d72631959f69"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -16062,7 +15954,7 @@ checksum = "5b96237efa0c878c64bd89c436f661be4e46b2f3eff1ebb976f7ef2321d2f58f"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.101",
+ "syn 2.0.103",
 ]
 
 [[package]]
@@ -16082,9 +15974,9 @@ dependencies = [
 
 [[package]]
 name = "zlib-rs"
-version = "0.5.0"
+version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "868b928d7949e09af2f6086dfc1e01936064cc7a819253bce650d4e2a2d63ba8"
+checksum = "626bd9fa9734751fc50d6060752170984d7053f5a39061f524cda68023d4db8a"
 
 [[package]]
 name = "zstd"
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index 65c1fa0ec3..1ac013b916 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "windmill"
-version = "1.494.0"
+version = "1.498.0"
 authors.workspace = true
 edition.workspace = true
 
@@ -32,7 +32,7 @@ members = [
 ]
 
 [workspace.package]
-version = "1.494.0"
+version = "1.498.0"
 authors = ["Ruben Fiszel <ruben@windmill.dev>"]
 edition = "2021"
 
@@ -49,6 +49,7 @@ lto = "thin"
 
 [features]
 default = []
+private = ["windmill-api/private", "windmill-autoscaling/private", "windmill-common/private", "windmill-git-sync/private", "windmill-indexer/private", "windmill-queue/private", "windmill-worker/private"]
 agent_worker_server = ["windmill-api/agent_worker_server"]
 enterprise = ["windmill-worker/enterprise", "windmill-queue/enterprise", "windmill-api/enterprise", "dep:windmill-autoscaling", "windmill-autoscaling/enterprise", "windmill-git-sync/enterprise", "windmill-common/prometheus", "windmill-common/enterprise"]
 enterprise_saml = ["windmill-api/enterprise_saml", "oauth2"]
@@ -94,8 +95,10 @@ php = ["windmill-worker/php"]
 csharp = ["windmill-worker/csharp"]
 nu = ["windmill-worker/nu"]
 java = ["windmill-worker/java"]
-all_languages = [ "python", "deno_core", "rust", "mysql", "oracledb", "duckdb", "mssql", "bigquery", "csharp", "nu", "php", "java"]
-
+all_languages = ["python", "deno_core", "rust", "mysql", "oracledb", "duckdb", "mssql", "bigquery", "csharp", "nu", "php", "java"]
+# For windows we have another set of languages enabled
+# NOTE: DuckDB is ignored because of compilation problems
+all_languages_windows = ["python", "deno_core", "rust", "mysql", "oracledb", "mssql", "bigquery", "csharp", "nu", "php", "java"]
 
 [patch.crates-io]
 object_store = { git = "https://github.com/apache/arrow-rs-object-store", rev = "36752c975d4f29e20b57c91f81a10872dcd48ae7" } 
@@ -127,6 +130,7 @@ prometheus = { workspace = true, optional = true }
 uuid.workspace = true
 gethostname.workspace = true
 serde_json.workspace = true
+serde_yml.workspace = true
 serde.workspace = true
 deno_core = { workspace = true, optional = true }
 object_store = { workspace = true, optional = true }
@@ -198,6 +202,7 @@ tower-http = { version = "^0.6", features = ["trace", "cors"] }
 tower-cookies = "^0.10"
 serde = "^1"
 serde_json = { version = "^1", features = ["preserve_order", "raw_value"] }
+serde_yml = "0.0.12"
 uuid = { version = "^1", features = ["serde", "v4"] }
 thiserror = "^2"
 anyhow = "^1"
@@ -227,7 +232,7 @@ php-parser-rs = { git = "https://github.com/php-rust-tools/parser", rev = "ec4cb
 cron = "^0"
 mail-send = { version = "0.4.0", features = ["builder"], default-features=false }
 urlencoding = "^2"
-url = "^2"
+url = { version = "^2" , features = ["serde"]}
 async-oauth2 = "^0"
 reqwest = { version = "^0.12", features = ["json", "stream", "gzip"] }
 time = "^0"
diff --git a/backend/all_features_oss.sh b/backend/all_features_oss.sh
new file mode 100755
index 0000000000..5871bc656f
--- /dev/null
+++ b/backend/all_features_oss.sh
@@ -0,0 +1,20 @@
+# This script outputs all features except private. Usage :
+#  > cargo build --features $(./all_features_oss.sh)
+
+#!/bin/bash
+
+# Path to the Cargo.toml file
+CARGO_TOML_PATH="./Cargo.toml"
+
+# Extract features from Cargo.toml and output them separated by commas
+if [[ -f "$CARGO_TOML_PATH" ]]; then
+    grep -A 100 '\[features\]' "$CARGO_TOML_PATH" | \
+    sed -n '/\[features\]/,/^\[/p' | \
+    grep -E '^[a-zA-Z0-9_-]+' | \
+    grep -v 'private' | \
+    cut -d' ' -f1 | \
+    paste -sd ',' -
+else
+    echo "Cargo.toml not found at $CARGO_TOML_PATH"
+    exit 1
+fi
\ No newline at end of file
diff --git a/backend/ee-repo-ref.txt b/backend/ee-repo-ref.txt
index d5d998a701..c41787fda1 100644
--- a/backend/ee-repo-ref.txt
+++ b/backend/ee-repo-ref.txt
@@ -1 +1 @@
-8a2506e86b923c00522cb83b052586f705f7aa8e
+67e727c618cf673850a0887931c803241abfcfe8
\ No newline at end of file
diff --git a/backend/migrations/20240917172503_job_routing.down.sql b/backend/migrations/20240917172503_job_routing.down.sql
index 569385aa5a..15c3e17762 100644
--- a/backend/migrations/20240917172503_job_routing.down.sql
+++ b/backend/migrations/20240917172503_job_routing.down.sql
@@ -4,4 +4,4 @@ DROP TYPE http_method;
 
 ALTER TABLE script DROP COLUMN has_preprocessor;
 
-DROP FUNCTION prevent_route_path_change();
\ No newline at end of file
+DROP FUNCTION prevent_route_path_change(); 
\ No newline at end of file
diff --git a/backend/migrations/20250604181226_auth_cache_invalidation.down.sql b/backend/migrations/20250604181226_auth_cache_invalidation.down.sql
new file mode 100644
index 0000000000..b7f0f12204
--- /dev/null
+++ b/backend/migrations/20250604181226_auth_cache_invalidation.down.sql
@@ -0,0 +1,4 @@
+-- Remove token invalidation notification trigger
+
+DROP TRIGGER IF EXISTS token_invalidation_trigger ON token;
+DROP FUNCTION IF EXISTS notify_token_invalidation();
diff --git a/backend/migrations/20250604181226_auth_cache_invalidation.up.sql b/backend/migrations/20250604181226_auth_cache_invalidation.up.sql
new file mode 100644
index 0000000000..11be3961c0
--- /dev/null
+++ b/backend/migrations/20250604181226_auth_cache_invalidation.up.sql
@@ -0,0 +1,17 @@
+-- Add token invalidation notification trigger
+
+CREATE OR REPLACE FUNCTION notify_token_invalidation()
+RETURNS TRIGGER AS $$
+BEGIN
+    -- Only notify for session token deletions when the invalidation settings are enabled
+    IF OLD.label = 'session' AND OLD.email IS NOT NULL THEN
+        PERFORM pg_notify('notify_token_invalidation', OLD.token);
+    END IF;
+    RETURN OLD;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE TRIGGER token_invalidation_trigger
+AFTER DELETE ON token
+FOR EACH ROW
+EXECUTE FUNCTION notify_token_invalidation();
diff --git a/backend/migrations/20250607102516_add_description_and_summary_to_http_trigger.down.sql b/backend/migrations/20250607102516_add_description_and_summary_to_http_trigger.down.sql
new file mode 100644
index 0000000000..597a95161d
--- /dev/null
+++ b/backend/migrations/20250607102516_add_description_and_summary_to_http_trigger.down.sql
@@ -0,0 +1,4 @@
+-- Add down migration script here
+ALTER TABLE http_trigger
+DROP COLUMN summary,
+DROP COLUMN description;
\ No newline at end of file
diff --git a/backend/migrations/20250607102516_add_description_and_summary_to_http_trigger.up.sql b/backend/migrations/20250607102516_add_description_and_summary_to_http_trigger.up.sql
new file mode 100644
index 0000000000..4d51f6d07b
--- /dev/null
+++ b/backend/migrations/20250607102516_add_description_and_summary_to_http_trigger.up.sql
@@ -0,0 +1,5 @@
+-- Add up migration script here
+ALTER TABLE http_trigger 
+ADD COLUMN summary VARCHAR(512) NULL,
+ADD COLUMN description TEXT NULL;
+
diff --git a/backend/src/ee.rs b/backend/src/ee_oss.rs
similarity index 53%
rename from backend/src/ee.rs
rename to backend/src/ee_oss.rs
index 91816cd1ba..4791a243a3 100644
--- a/backend/src/ee.rs
+++ b/backend/src/ee_oss.rs
@@ -1,8 +1,13 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::ee::*;
+
+#[cfg(not(feature = "private"))]
 pub async fn set_license_key(_license_key: String) -> () {
     // Implementation is not open source
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub async fn verify_license_key() -> () {
     // Implementation is not open source
 }
diff --git a/backend/src/main.rs b/backend/src/main.rs
index a4148d93c6..be9a7578a3 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -28,7 +28,9 @@ use uuid::Uuid;
 use windmill_api::HTTP_CLIENT;
 
 #[cfg(feature = "enterprise")]
-use windmill_common::ee::{maybe_renew_license_key_on_start, LICENSE_KEY_ID, LICENSE_KEY_VALID};
+use windmill_common::ee_oss::{
+    maybe_renew_license_key_on_start, LICENSE_KEY_ID, LICENSE_KEY_VALID,
+};
 
 use windmill_common::{
     agent_workers::build_agent_http_client,
@@ -49,9 +51,12 @@ use windmill_common::{
         TIMEOUT_WAIT_RESULT_SETTING,
     },
     scripts::ScriptLang,
-    stats_ee::schedule_stats,
+    stats_oss::schedule_stats,
     triggers::TriggerKind,
-    utils::{hostname, rd_string, Mode, GIT_VERSION, MODE_AND_ADDONS},
+    utils::{
+        create_default_worker_suffix, create_ssh_agent_worker_suffix, worker_name_with_suffix,
+        Mode, GIT_VERSION, HOSTNAME, MODE_AND_ADDONS,
+    },
     worker::{
         reload_custom_tags_setting, Connection, HUB_CACHE_DIR, TMP_DIR, TMP_LOGS_DIR, WORKER_GROUP,
     },
@@ -75,8 +80,7 @@ use windmill_worker::{
     get_hub_script_content_and_requirements, BUN_BUNDLE_CACHE_DIR, BUN_CACHE_DIR, CSHARP_CACHE_DIR,
     DENO_CACHE_DIR, DENO_CACHE_DIR_DEPS, DENO_CACHE_DIR_NPM, GO_BIN_CACHE_DIR, GO_CACHE_DIR,
     JAVA_CACHE_DIR, NU_CACHE_DIR, POWERSHELL_CACHE_DIR, PY310_CACHE_DIR, PY311_CACHE_DIR,
-    PY312_CACHE_DIR, PY313_CACHE_DIR, RUST_CACHE_DIR, TAR_JAVA_CACHE_DIR, TAR_PY310_CACHE_DIR,
-    TAR_PY311_CACHE_DIR, TAR_PY312_CACHE_DIR, TAR_PY313_CACHE_DIR, UV_CACHE_DIR,
+    PY312_CACHE_DIR, PY313_CACHE_DIR, RUST_CACHE_DIR, TAR_JAVA_CACHE_DIR, UV_CACHE_DIR,
 };
 
 use crate::monitor::{
@@ -98,7 +102,9 @@ const DEFAULT_NUM_WORKERS: usize = 1;
 const DEFAULT_PORT: u16 = 8000;
 const DEFAULT_SERVER_BIND_ADDR: Ipv4Addr = Ipv4Addr::new(0, 0, 0, 0);
 
-mod ee;
+#[cfg(feature = "private")]
+pub mod ee;
+mod ee_oss;
 mod monitor;
 
 pub fn setup_deno_runtime() -> anyhow::Result<()> {
@@ -153,6 +159,7 @@ lazy_static::lazy_static! {
         .ok()
         .and_then(|x| x.parse::<u64>().ok())
         .unwrap_or(3600 * 12);
+
 }
 
 pub fn main() -> anyhow::Result<()> {
@@ -261,7 +268,7 @@ async fn windmill_main() -> anyhow::Result<()> {
         tracing::error!("Failed to install rustls crypto provider");
     }
 
-    let hostname = hostname();
+    let hostname = HOSTNAME.to_owned();
 
     let mode_and_addons = MODE_AND_ADDONS.clone();
     let mode = mode_and_addons.mode;
@@ -340,7 +347,7 @@ async fn windmill_main() -> anyhow::Result<()> {
             "Creating http client for cluster using base internal url {}",
             std::env::var("BASE_INTERNAL_URL").unwrap_or_default()
         );
-        let suffix = windmill_common::utils::worker_suffix(&hostname, &rd_string(5));
+        let suffix = create_ssh_agent_worker_suffix(&hostname);
         (
             Connection::Http(build_agent_http_client(&suffix)),
             Some(suffix),
@@ -552,7 +559,7 @@ Windmill Community Edition {GIT_VERSION}
                 _ = indexer_rx.recv() => {
                     tracing::info!("Received killpill, aborting index initialization");
                 },
-                res = windmill_indexer::completed_runs_ee::init_index(&db) => {
+                res = windmill_indexer::completed_runs_oss::init_index(&db) => {
                         let res = res?;
                         reader = Some(res.0);
                         writer = Some(res.1);
@@ -574,7 +581,7 @@ Windmill Community Edition {GIT_VERSION}
             async {
                 if let Some(db) = conn.as_sql() {
                     if let Some(index_writer) = index_writer2 {
-                        windmill_indexer::completed_runs_ee::run_indexer(
+                        windmill_indexer::completed_runs_oss::run_indexer(
                             db.clone(),
                             index_writer,
                             indexer_rx,
@@ -596,7 +603,7 @@ Windmill Community Edition {GIT_VERSION}
                     _ = indexer_rx.recv() => {
                         tracing::info!("Received killpill, aborting index initialization");
                     },
-                    res = windmill_indexer::service_logs_ee::init_index(&db, killpill_tx.clone()) => {
+                    res = windmill_indexer::service_logs_oss::init_index(&db, killpill_tx.clone()) => {
                             let res = res?;
                             reader = Some(res.0);
                             writer = Some(res.1);
@@ -618,7 +625,7 @@ Windmill Community Edition {GIT_VERSION}
             async {
                 if let Some(db) = conn.as_sql() {
                     if let Some(log_index_writer) = log_index_writer2 {
-                        windmill_indexer::service_logs_ee::run_indexer(
+                        windmill_indexer::service_logs_oss::run_indexer(
                             db.clone(),
                             log_index_writer,
                             log_indexer_rx,
@@ -675,19 +682,21 @@ Windmill Community Edition {GIT_VERSION}
                 let base_internal_url = base_internal_rx.await?;
                 if worker_mode {
                     let mut workers = vec![];
+
                     for i in 0..num_workers {
-                        let suffix: String = if i == 0 && first_suffix.as_ref().is_some() {
+                        let suffix = if i == 0 && first_suffix.is_some() {
                             first_suffix.as_ref().unwrap().clone()
                         } else {
-                            windmill_common::utils::worker_suffix(&hostname, &rd_string(5))
+                            create_default_worker_suffix(&hostname)
                         };
+
                         let worker_conn = WorkerConn {
                             conn: if i == 0 || mode != Mode::Agent {
                                 conn.clone()
                             } else {
                                 Connection::Http(build_agent_http_client(&suffix))
                             },
-                            worker_name: windmill_common::utils::worker_name_with_suffix(
+                            worker_name: worker_name_with_suffix(
                                 mode == Mode::Agent,
                                 WORKER_GROUP.as_str(),
                                 &suffix,
@@ -852,6 +861,11 @@ Windmill Community Edition {GIT_VERSION}
                                                         }
                                                     };
                                                 },
+                                                "notify_token_invalidation" => {
+                                                    let token = n.payload();
+                                                    tracing::info!("Token invalidation detected for token: {}...", &token[..token.len().min(8)]);
+                                                    windmill_api::auth::invalidate_token_from_cache(token);
+                                                },
                                                 "notify_global_setting_change" => {
                                                     tracing::info!("Global setting change detected: {}", n.payload());
                                                     match n.payload() {
@@ -884,7 +898,7 @@ Windmill Community Edition {GIT_VERSION}
                                                             if let Err(e) = load_tag_per_workspace_workspaces(&db).await {
                                                                 tracing::error!("Error loading default tag per workspace workspaces: {e:#}");
                                                             }
-                                                        }
+                                                        },
                                                         SMTP_SETTING => {
                                                             reload_smtp_config(&db).await;
                                                         },
@@ -1001,7 +1015,6 @@ Windmill Community Edition {GIT_VERSION}
                                                                 tracing::error!(error = %e, "Could not reload critical alert UI setting");
                                                             }
                                                         },
-
                                                         a @_ => {
                                                             tracing::info!("Unrecognized Global Setting Change Payload: {:?}", a);
                                                         }
@@ -1053,7 +1066,9 @@ Windmill Community Edition {GIT_VERSION}
                                     }
 
                                     if server_mode {
-                                        tracing::info!("monitor task started");
+                                        if !*windmill_common::QUIET_LOGS {
+                                            tracing::info!("monitor task started");
+                                        }
                                     }
                                     monitor_db(
                                         &conn,
@@ -1065,7 +1080,9 @@ Windmill Community Edition {GIT_VERSION}
                                     )
                                     .await;
                                     if server_mode {
-                                        tracing::info!("monitor task finished");
+                                        if !*windmill_common::QUIET_LOGS {
+                                            tracing::info!("monitor task finished");
+                                        }
                                     }
                                 },
                             }
@@ -1086,7 +1103,7 @@ Windmill Community Edition {GIT_VERSION}
                             tracing::info!("Reloading config after 12 hours");
                             initial_load(&conn, tx.clone(), worker_mode, server_mode, #[cfg(feature = "parquet")] disable_s3_store).await;
                             #[cfg(feature = "enterprise")]
-                            ee::verify_license_key().await;
+                            ee_oss::verify_license_key().await;
                         }
                     }
                 },
@@ -1174,6 +1191,7 @@ async fn listen_pg(url: &str) -> Option<PgListener> {
         "notify_webhook_change",
         "notify_workspace_envs_change",
         "notify_runnable_version_change",
+        "notify_token_invalidation",
     ];
 
     #[cfg(feature = "http_trigger")]
@@ -1267,10 +1285,6 @@ pub async fn run_workers(
         PY311_CACHE_DIR,
         PY312_CACHE_DIR,
         PY313_CACHE_DIR,
-        TAR_PY310_CACHE_DIR,
-        TAR_PY311_CACHE_DIR,
-        TAR_PY312_CACHE_DIR,
-        TAR_PY313_CACHE_DIR,
         BUN_BUNDLE_CACHE_DIR,
         GO_CACHE_DIR,
         GO_BIN_CACHE_DIR,
diff --git a/backend/src/monitor.rs b/backend/src/monitor.rs
index d2a5657c6c..5c4677018c 100644
--- a/backend/src/monitor.rs
+++ b/backend/src/monitor.rs
@@ -29,9 +29,9 @@ use windmill_api::{
 };
 
 #[cfg(feature = "enterprise")]
-use windmill_common::ee::low_disk_alerts;
+use windmill_common::ee_oss::low_disk_alerts;
 #[cfg(feature = "enterprise")]
-use windmill_common::ee::{jobs_waiting_alerts, worker_groups_alerts};
+use windmill_common::ee_oss::{jobs_waiting_alerts, worker_groups_alerts};
 
 use windmill_common::client::AuthedClient;
 #[cfg(feature = "oauth2")]
@@ -41,7 +41,7 @@ use windmill_common::s3_helpers::reload_object_store_setting;
 use windmill_common::{
     agent_workers::DECODED_AGENT_TOKEN,
     auth::create_token_for_owner,
-    ee::CriticalErrorChannel,
+    ee_oss::CriticalErrorChannel,
     error,
     flow_status::{FlowStatus, FlowStatusModule},
     global_settings::{
@@ -87,9 +87,9 @@ use windmill_worker::{
 use windmill_common::s3_helpers::ObjectStoreReload;
 
 #[cfg(feature = "enterprise")]
-use crate::ee::verify_license_key;
+use crate::ee_oss::verify_license_key;
 
-use crate::ee::set_license_key;
+use crate::ee_oss::set_license_key;
 
 #[cfg(feature = "prometheus")]
 lazy_static::lazy_static! {
@@ -1324,7 +1324,6 @@ pub async fn monitor_db(
     initial_load: bool,
     _killpill_tx: KillpillSender,
 ) {
-    tracing::info!("Starting periodic monitor task");
     let zombie_jobs_f = async {
         if server_mode && !initial_load && !*DISABLE_ZOMBIE_JOBS_MONITORING {
             if let Some(db) = conn.as_sql() {
@@ -1422,7 +1421,6 @@ pub async fn monitor_db(
         apply_autoscaling_f,
         update_min_worker_version_f,
     );
-    tracing::info!("Periodic monitor task completed");
 }
 
 pub async fn expose_queue_metrics(db: &Pool<Postgres>) {
@@ -1609,7 +1607,7 @@ pub async fn reload_base_url_setting(conn: &Connection) -> error::Result<()> {
 
         if let Some(q) = q_oauth {
             if let Ok(v) = serde_json::from_value::<
-                Option<HashMap<String, windmill_api::oauth2_ee::OAuthClient>>,
+                Option<HashMap<String, windmill_api::oauth2_oss::OAuthClient>>,
             >(q.clone())
             {
                 v
@@ -1630,7 +1628,7 @@ pub async fn reload_base_url_setting(conn: &Connection) -> error::Result<()> {
     {
         if let Some(db) = conn.as_sql() {
             let mut l = windmill_api::OAUTH_CLIENTS.write().await;
-            *l = windmill_api::oauth2_ee::build_oauth_clients(&base_url, oauths, db).await
+            *l = windmill_api::oauth2_oss::build_oauth_clients(&base_url, oauths, db).await
             .map_err(|e| tracing::error!("Error building oauth clients (is the oauth.json mounted and in correct format? Use '{}' as minimal oauth.json): {}", "{}", e))
             .unwrap();
         }
@@ -1914,12 +1912,12 @@ async fn handle_zombie_jobs(db: &Pool<Postgres>, base_internal_url: &str, worker
         .await
         .expect("could not create job token");
 
-        let client = AuthedClient {
-            base_internal_url: base_internal_url.to_string(),
+        let client = AuthedClient::new(
+            base_internal_url.to_string(),
+            job.workspace_id.to_string(),
             token,
-            workspace: job.workspace_id.to_string(),
-            force_client: None,
-        };
+            None,
+        );
 
         let last_ping = job.last_ping.clone();
         let error_message = format!(
@@ -1938,7 +1936,7 @@ async fn handle_zombie_jobs(db: &Pool<Postgres>, base_internal_url: &str, worker
             None,
             error::Error::ExecutionErr(error_message),
             true,
-            same_worker_tx_never_used,
+            Some(&same_worker_tx_never_used),
             "",
             worker_name,
             send_result_never_used,
diff --git a/backend/substitute_ee_code.sh b/backend/substitute_ee_code.sh
index 28b890990b..a1819c75b2 100755
--- a/backend/substitute_ee_code.sh
+++ b/backend/substitute_ee_code.sh
@@ -4,8 +4,8 @@ script_dirpath="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 root_dirpath="$(cd "${script_dirpath}/.." && pwd)"
 
 REVERT="NO"
-REVERT_PREVIOUS="NO"
 COPY="NO"
+MOVE_NEW_FILES="NO"
 EE_CODE_DIR="../windmill-ee-private/"
 
 while [[ $# -gt 0 ]]; do
@@ -16,13 +16,7 @@ while [[ $# -gt 0 ]]; do
       # this to work (commit hooks should prevent this from happening, as well as the fact
       # that we're using symlinks by default).
       REVERT="YES"
-      shift
-      ;;
-    --revert-previous)
-      # This is a special case of --revert that will revert to the previous commit.
-      REVERT="YES"
-      REVERT_PREVIOUS="YES"
-      echo "Reverting to previous commit"
+      MOVE_NEW_FILES="YES"
       shift
       ;;
     -c|--copy)
@@ -33,6 +27,11 @@ while [[ $# -gt 0 ]]; do
       COPY="YES"
       shift # past argument
       ;;
+    -m|--move-new-files)
+      # This moves all new EE files from the public repository to the private repository.
+      MOVE_NEW_FILES="YES"
+      shift # past argument
+      ;;
     -d|--dir)
       # Path to the local directory of the windmill-ee-private repository. By defaults, it
       # assumes it is cloned next to the Windmill OSS repo.
@@ -70,29 +69,34 @@ if [ "$REVERT" == "YES" ]; then
   for ee_file in $(find ${EE_CODE_DIR} -name "*ee.rs"); do
     ce_file="${ee_file/${EE_CODE_DIR}/}"
     ce_file="${root_dirpath}/backend/${ce_file}"
-    if [ "$REVERT_PREVIOUS" == "YES" ]; then
-      git checkout HEAD@{3} ${ce_file} || true
-    else
-      git restore --staged ${ce_file} || true
-      git restore ${ce_file} || true
-    fi
+    rm ${ce_file} || true
   done
-else
+elif [ "$MOVE_NEW_FILES" == "NO" ]; then
   # This replaces all files in current repo with alternative EE files in windmill-ee-private
   for ee_file in $(find "${EE_CODE_DIR}" -name "*ee.rs"); do
-    ce_file="${ee_file/${EE_CODE_DIR}/}"
-    ce_file="${root_dirpath}/backend/${ce_file}"
-    if [[ -f "${ce_file}" ]]; then
-      rm "${ce_file}"
-      if [ "$COPY" == "YES" ]; then
-        cp "${ee_file}" "${ce_file}"
-        echo "File copied '${ee_file}' -->> '${ce_file}'"
-      else
-        ln -s "${ee_file}" "${ce_file}"
-        echo "Symlink created '${ee_file}' -->> '${ce_file}'"
-      fi
+  ce_file="${ee_file/${EE_CODE_DIR}/}"
+  ce_file="${root_dirpath}/backend/${ce_file}"
+    if [ "$COPY" == "YES" ]; then
+      cp "${ee_file}" "${ce_file}"
+      echo "File copied '${ee_file}' -->> '${ce_file}'"
     else
-      echo "File ${ce_file} is not a file, ignoring"
+      ln -s "${ee_file}" "${ce_file}" || true
+      echo "Symlink created '${ee_file}' -->> '${ce_file}'"
     fi
   done
 fi
+
+if [ "$MOVE_NEW_FILES" == "YES" ]; then
+  for ce_file in $(find "${root_dirpath}"/backend/windmill-*/src/ -name "*ee.rs"); do
+    backend_dirpath="${root_dirpath}/backend/"
+    ee_file="${ce_file/${backend_dirpath}/}"
+    ee_file="${EE_CODE_DIR}${ee_file}"
+    if [ ! -f "${ee_file}" ]; then
+      mv "${ce_file}" "${ee_file}"
+      if [ ! "$REVERT" == "YES" ]; then
+        ln -s "${ee_file}" "${ce_file}"
+      fi
+      echo "File moved '${ce_file}' -->> '${ee_file}'"
+    fi
+  done
+fi
\ No newline at end of file
diff --git a/backend/summarize_schema.py b/backend/summarize_schema.py
new file mode 100644
index 0000000000..a6d929ba9a
--- /dev/null
+++ b/backend/summarize_schema.py
@@ -0,0 +1,154 @@
+# This script is used to summarize the database schema.
+# You can use pg_dump to dump the schema to a file.
+# pg_dump --file "schema.sql" --host "localhost" --port "5432" --username "postgres" --no-password --format=c --large-objects --schema-only --no-owner --no-privileges --no-tablespaces --no-unlogged-table-data --no-comments --no-publications --no-subscriptions --no-security-labels --no-toast-compression --no-table-access-method --verbose --schema "public" "windmill"
+# Then you can run python summarize_schema.py schema.sql to get the summarized schema.
+
+import re
+import sys
+from collections import defaultdict
+
+def summarize_schema(file_path):
+    """
+    Parses a PostgreSQL dump file and extracts a summarized schema.
+    """
+    tables = defaultdict(lambda: {'columns': [], 'pks': set(), 'fks': [], 'indexes': []})
+    enums = defaultdict(list)
+    
+    # Use state variables to parse multi-line definitions
+    current_table = None
+    current_enum = None
+
+    with open(file_path, 'r', encoding='utf-8') as f:
+        for line in f:
+            line = line.strip()
+
+            # --- State Resets ---
+            if line.startswith(');'):
+                current_table = None
+                current_enum = None
+                continue
+
+            # --- Parse ENUM definitions ---
+            match_enum = re.match(r"CREATE TYPE public\.(\w+) AS ENUM \($", line)
+            if match_enum:
+                current_enum = match_enum.group(1)
+                continue
+            
+            if current_enum:
+                # Extract enum values, which are typically like 'value',
+                value = line.strip("',")
+                if value and not value.startswith('--'):
+                    enums[current_enum].append(value)
+                continue
+
+            # --- Parse TABLE definitions ---
+            match_table = re.match(r"CREATE TABLE public\.(\w+) \($", line)
+            if match_table:
+                current_table = match_table.group(1)
+                continue
+
+            if current_table:
+                # Parse columns within a CREATE TABLE block
+                # e.g., "column_name type NOT NULL,"
+                # e.g., "id bigint NOT NULL,"
+                match_column = re.match(r'^"?(\w+)"?\s+([\w\d\.\[\]\(\)]+)', line)
+                if match_column:
+                    col_name = match_column.group(1)
+                    col_type = match_column.group(2)
+                    tables[current_table]['columns'].append(f"{col_name} ({col_type})")
+                
+                # Parse PRIMARY KEY defined inside the table
+                match_pk = re.search(r"CONSTRAINT \w+ PRIMARY KEY \((.+)\)", line)
+                if match_pk:
+                    # Handle multiple PK columns: "col1, col2, col3"
+                    pk_cols = [p.strip().strip('"') for p in match_pk.group(1).split(',')]
+                    tables[current_table]['pks'].update(pk_cols)
+                continue
+            
+            # --- Parse Foreign Keys (defined outside CREATE TABLE) ---
+            match_fk = re.match(r"ALTER TABLE ONLY public\.(\w+)\s+ADD CONSTRAINT \w+ FOREIGN KEY \(([\w,\s\"]+)\) REFERENCES public\.(\w+)\(([\w,\s\"]+)\);", line)
+            if match_fk:
+                from_table, from_cols, to_table, to_cols = match_fk.groups()
+                # Clean up column names
+                from_cols_clean = ', '.join([c.strip().strip('"') for c in from_cols.split(',')])
+                to_cols_clean = ', '.join([c.strip().strip('"') for c in to_cols.split(',')])
+                
+                fk_string = f"({from_cols_clean}) -> {to_table}({to_cols_clean})"
+                tables[from_table]['fks'].append(fk_string)
+            
+            # --- Parse Index definitions ---
+            match_index = re.match(r"CREATE (UNIQUE )?INDEX (\w+) ON public\.(\w+) USING (\w+) \((.+)\);", line)
+            if match_index:
+                is_unique = match_index.group(1) is not None
+                index_name = match_index.group(2)
+                table_name = match_index.group(3)
+                index_type = match_index.group(4)
+                columns = match_index.group(5)
+                
+                # Clean up column expressions
+                columns_clean = columns.replace('"', '')
+                
+                unique_str = "UNIQUE " if is_unique else ""
+                index_string = f"{unique_str}INDEX {index_name} ({index_type}) ON ({columns_clean})"
+                tables[table_name]['indexes'].append(index_string)
+
+    return enums, tables
+
+def format_output(enums, tables):
+    """
+    Formats the parsed schema data into a clean, readable string.
+    """
+    output = []
+    
+    output.append("### Simplified Database Schema ###")
+    output.append("\n--- Custom Data Types (ENUMs) ---\n")
+    if not enums:
+        output.append("No custom ENUM types found.")
+    else:
+        for name, values in sorted(enums.items()):
+            output.append(f"{name}:")
+            for v in values:
+                output.append(f"  - {v}")
+            output.append("")
+
+    output.append("\n--- Tables and Relationships ---\n")
+    if not tables:
+        output.append("No tables found.")
+    else:
+        for name, data in sorted(tables.items()):
+            output.append(f"TABLE: {name}")
+            for col in data['columns']:
+                col_name = col.split(' ')[0]
+                marker = " (PK)" if col_name in data['pks'] else ""
+                output.append(f"  - {col}{marker}")
+            
+            if data['fks']:
+                output.append("  Relationships:")
+                for fk in data['fks']:
+                    output.append(f"    - {fk}")
+            
+            if data['indexes']:
+                output.append("  Indexes:")
+                for idx in data['indexes']:
+                    output.append(f"    - {idx}")
+            output.append("-" * 20)
+
+    return "\n".join(output)
+
+if __name__ == "__main__":
+    if len(sys.argv) != 2:
+        print(f"Usage: python {sys.argv[0]} <path_to_dump.sql>")
+        sys.exit(1)
+        
+    input_file = sys.argv[1]
+    
+    try:
+        enums_data, tables_data = summarize_schema(input_file)
+        formatted_summary = format_output(enums_data, tables_data)
+        print(formatted_summary)
+    except FileNotFoundError:
+        print(f"Error: The file '{input_file}' was not found.")
+        sys.exit(1)
+    except Exception as e:
+        print(f"An unexpected error occurred: {e}")
+        sys.exit(1)
\ No newline at end of file
diff --git a/backend/summarized_schema.txt b/backend/summarized_schema.txt
new file mode 100644
index 0000000000..a1ae0c1847
--- /dev/null
+++ b/backend/summarized_schema.txt
@@ -0,0 +1,1085 @@
+### Simplified Database Schema ###
+
+--- Custom Data Types (ENUMs) ---
+
+action_kind:
+  - create
+  - update
+  - delete
+  - execute
+
+authentication_method:
+  - none
+  - windmill
+  - api_key
+  - basic_http
+  - custom_script
+  - signature
+
+autoscaling_event_type:
+  - full_scaleout
+  - scalein
+  - scaleout
+
+aws_auth_resource_type:
+  - oidc
+  - credentials
+
+delivery_mode:
+  - push
+  - pull
+
+draft_type:
+  - script
+  - flow
+  - app
+
+favorite_kind:
+  - app
+  - script
+  - flow
+  - raw_app
+
+gcp_subscription_mode:
+  - create_update
+  - existing
+
+http_method:
+  - get
+  - post
+  - put
+  - delete
+  - patch
+
+importer_kind:
+  - script
+  - flow
+  - app
+
+job_kind:
+  - script
+  - preview
+  - flow
+  - dependencies
+  - flowpreview
+  - script_hub
+  - identity
+  - flowdependencies
+  - http
+  - graphql
+  - postgresql
+  - noop
+  - appdependencies
+  - deploymentcallback
+  - singlescriptflow
+  - flowscript
+  - flownode
+  - appscript
+
+job_status:
+  - success
+  - failure
+  - canceled
+  - skipped
+
+job_trigger_kind:
+  - webhook
+  - http
+  - websocket
+  - kafka
+  - email
+  - nats
+  - schedule
+  - app
+  - ui
+  - postgres
+  - sqs
+  - gcp
+
+log_mode:
+  - standalone
+  - server
+  - worker
+  - agent
+  - indexer
+  - mcp
+
+login_type:
+  - password
+  - github
+
+metric_kind:
+  - scalar_int
+  - scalar_float
+  - timeseries_int
+  - timeseries_float
+
+mqtt_client_version:
+  - v3
+  - v5
+
+runnable_type:
+  - ScriptHash
+  - ScriptPath
+  - FlowPath
+
+script_kind:
+  - script
+  - trigger
+  - failure
+  - command
+  - approval
+  - preprocessor
+
+script_lang:
+  - python3
+  - deno
+  - go
+  - bash
+  - postgresql
+  - nativets
+  - bun
+  - mysql
+  - bigquery
+  - snowflake
+  - graphql
+  - powershell
+  - mssql
+  - php
+  - bunnative
+  - rust
+  - ansible
+  - csharp
+  - oracledb
+  - nu
+  - java
+  - duckdb
+
+trigger_kind:
+  - webhook
+  - http
+  - websocket
+  - kafka
+  - email
+  - nats
+  - postgres
+  - sqs
+  - mqtt
+  - gcp
+
+workspace_key_kind:
+  - cloud
+
+
+--- Tables and Relationships ---
+
+TABLE: _sqlx_migrations
+  - version (bigint)
+  - description (text)
+  - installed_on (timestamp)
+  - success (boolean)
+  - checksum (bytea)
+  - execution_time (bigint)
+--------------------
+TABLE: account
+  - workspace_id (character)
+  - id (integer)
+  - expires_at (timestamp)
+  - refresh_token (character)
+  - client (character)
+  - refresh_error (text)
+--------------------
+TABLE: alerts
+  - id (integer)
+  - alert_type (character)
+  - message (text)
+  - created_at (timestamp)
+  - acknowledged (boolean)
+  - workspace_id (text)
+  - acknowledged_workspace (boolean)
+  - resource (text)
+  Indexes:
+    - INDEX alerts_by_workspace (btree) ON (workspace_id)
+--------------------
+TABLE: app
+  - id (bigint)
+  - workspace_id (character)
+  - path (character)
+  - summary (character)
+  - policy (jsonb)
+  - versions (bigint[])
+  - extra_perms (jsonb)
+  - draft_only (boolean)
+  - custom_path (text)
+  - CONSTRAINT (app_custom_path_check)
+--------------------
+TABLE: app_script
+  - id (bigint)
+  - app (bigint)
+  - hash (character(64))
+  - lock (text)
+  - code (text)
+  - code_sha256 (character(64))
+--------------------
+TABLE: app_version
+  - id (bigint)
+  - app_id (bigint)
+  - value (json)
+  - created_by (character)
+  - created_at (timestamp)
+  - raw_app (boolean)
+--------------------
+TABLE: app_version_lite
+  - id (bigint)
+  - value (jsonb)
+--------------------
+TABLE: audit
+  - workspace_id (character)
+  - id (integer)
+  - timestamp (timestamp)
+  - username (character)
+  - operation (character)
+  - action_kind (public.action_kind)
+  - resource (character)
+  - parameters (jsonb)
+  Indexes:
+    - INDEX ix_audit_timestamps (btree) ON (timestamp DESC)
+--------------------
+TABLE: autoscaling_event
+  - id (integer)
+  - worker_group (text)
+  - event_type (public.autoscaling_event_type)
+  - desired_workers (integer)
+  - applied_at (timestamp)
+  - reason (text)
+  Indexes:
+    - INDEX autoscaling_event_worker_group_idx (btree) ON (worker_group, applied_at)
+--------------------
+TABLE: capture
+  - workspace_id (character)
+  - path (character)
+  - created_at (timestamp)
+  - created_by (character)
+  - main_args (jsonb)
+  - is_flow (boolean)
+  - trigger_kind (public.trigger_kind)
+  - preprocessor_args (jsonb)
+  - id (bigint)
+  - CONSTRAINT (capture_payload_too_big)
+--------------------
+TABLE: capture_config
+  - workspace_id (character)
+  - path (character)
+  - is_flow (boolean)
+  - trigger_kind (public.trigger_kind)
+  - trigger_config (jsonb)
+  - owner (character)
+  - email (character)
+  - server_id (character)
+  - last_client_ping (timestamp)
+  - last_server_ping (timestamp)
+  - error (text)
+--------------------
+TABLE: cloud_workspace_settings
+  - workspace_id (character)
+  - threshold_alert_amount (integer)
+  - last_alert_sent (timestamp)
+  - last_warning_sent (timestamp)
+--------------------
+TABLE: concurrency_counter
+  - concurrency_id (character)
+  - job_uuids (jsonb)
+--------------------
+TABLE: concurrency_key
+  - key (character)
+  - ended_at (timestamp)
+  - job_id (uuid)
+  Indexes:
+    - INDEX concurrency_key_ended_at_idx (btree) ON (key, ended_at DESC)
+--------------------
+TABLE: concurrency_locks
+  - id (character)
+  - last_locked_at (timestamp)
+  - owner (character)
+--------------------
+TABLE: config
+  - name (character)
+  - config (jsonb)
+--------------------
+TABLE: custom_concurrency_key_ended
+  - key (character)
+  - ended_at (timestamp)
+--------------------
+TABLE: dependency_map
+  - workspace_id (character)
+  - importer_path (character)
+  - importer_kind (public.importer_kind)
+  - imported_path (character)
+  - importer_node_id (character)
+  Indexes:
+    - INDEX dependency_map_imported_path_idx (btree) ON (workspace_id, imported_path)
+--------------------
+TABLE: deployment_metadata
+  - workspace_id (character)
+  - path (character)
+  - script_hash (bigint)
+  - app_version (bigint)
+  - callback_job_ids (uuid[])
+  - deployment_msg (text)
+  - flow_version (bigint)
+  Indexes:
+    - UNIQUE INDEX deployment_metadata_app (btree) ON (workspace_id, path, app_version) WHERE (app_version IS NOT NULL)
+    - UNIQUE INDEX deployment_metadata_flow (btree) ON (workspace_id, path, flow_version) WHERE (flow_version IS NOT NULL)
+    - UNIQUE INDEX deployment_metadata_script (btree) ON (workspace_id, script_hash) WHERE (script_hash IS NOT NULL)
+--------------------
+TABLE: draft
+  - workspace_id (character)
+  - path (character)
+  - typ (public.draft_type)
+  - value (json)
+  - created_at (timestamp)
+--------------------
+TABLE: email_to_igroup
+  - email (character)
+  - igroup (character)
+--------------------
+TABLE: favorite
+  - usr (character)
+  - workspace_id (character)
+  - path (character)
+  - favorite_kind (public.favorite_kind)
+--------------------
+TABLE: flow
+  - workspace_id (character)
+  - path (character)
+  - summary (text)
+  - description (text)
+  - value (jsonb)
+  - edited_by (character)
+  - edited_at (timestamp)
+  - archived (boolean)
+  - schema (json)
+  - extra_perms (jsonb)
+  - dependency_job (uuid)
+  - draft_only (boolean)
+  - tag (character)
+  - ws_error_handler_muted (boolean)
+  - dedicated_worker (boolean)
+  - timeout (integer)
+  - visible_to_runner_only (boolean)
+  - concurrency_key (character)
+  - versions (bigint[])
+  - on_behalf_of_email (text)
+  - lock_error_logs (text)
+  - CONSTRAINT (proper_id)
+  Indexes:
+    - INDEX flow_extra_perms (gin) ON (extra_perms)
+--------------------
+TABLE: flow_node
+  - id (bigint)
+  - workspace_id (character)
+  - hash (bigint)
+  - path (character)
+  - lock (text)
+  - code (text)
+  - flow (jsonb)
+  - hash_v2 (character(64))
+  Indexes:
+    - INDEX flow_node_hash (btree) ON (hash)
+--------------------
+TABLE: flow_version
+  - id (bigint)
+  - workspace_id (character)
+  - path (character)
+  - value (jsonb)
+  - schema (json)
+  - created_by (character)
+  - created_at (timestamp)
+  Indexes:
+    - INDEX index_flow_version_path_created_at (btree) ON (path, created_at)
+--------------------
+TABLE: flow_version_lite
+  - id (bigint)
+  - value (jsonb)
+--------------------
+TABLE: folder
+  - name (character)
+  - workspace_id (character)
+  - display_name (character)
+  - owners (character)
+  - extra_perms (jsonb)
+  - summary (text)
+  - edited_at (timestamp)
+  - created_by (character)
+  Indexes:
+    - INDEX folder_extra_perms (gin) ON (extra_perms)
+    - INDEX folder_owners (gin) ON (owners)
+--------------------
+TABLE: gcp_trigger
+  - gcp_resource_path (character)
+  - topic_id (character)
+  - subscription_id (character)
+  - delivery_type (public.delivery_mode)
+  - delivery_config (jsonb)
+  - path (character)
+  - script_path (character)
+  - is_flow (boolean)
+  - workspace_id (character)
+  - edited_by (character)
+  - email (character)
+  - edited_at (timestamp)
+  - extra_perms (jsonb)
+  - server_id (character)
+  - last_server_ping (timestamp)
+  - error (text)
+  - enabled (boolean)
+  - subscription_mode (public.gcp_subscription_mode)
+  - CONSTRAINT (gcp_trigger_check)
+  - CONSTRAINT (gcp_trigger_subscription_id_check)
+  - CONSTRAINT (gcp_trigger_topic_id_check)
+  Indexes:
+    - UNIQUE INDEX unique_subscription_per_gcp_resource (btree) ON (subscription_id, gcp_resource_path, workspace_id)
+--------------------
+TABLE: global_settings
+  - name (character)
+  - value (jsonb)
+  - updated_at (timestamp)
+--------------------
+TABLE: group_
+  - workspace_id (character)
+  - name (character)
+  - summary (text)
+  - extra_perms (jsonb)
+  - CONSTRAINT (proper_name)
+  Indexes:
+    - INDEX group_extra_perms (gin) ON (extra_perms)
+--------------------
+TABLE: healthchecks
+  - id (bigint)
+  - check_type (character)
+  - healthy (boolean)
+  - created_at (timestamp)
+  Indexes:
+    - INDEX healthchecks_check_type_created_at (btree) ON (check_type, created_at)
+--------------------
+TABLE: http_trigger
+  - path (character)
+  - route_path (character)
+  - route_path_key (character)
+  - script_path (character)
+  - is_flow (boolean)
+  - workspace_id (character)
+  - edited_by (character)
+  - email (character)
+  - edited_at (timestamp)
+  - extra_perms (jsonb)
+  - is_async (boolean)
+  - authentication_method (public.authentication_method)
+  - http_method (public.http_method)
+  - static_asset_config (jsonb)
+  - is_static_website (boolean)
+  - workspaced_route (boolean)
+  - wrap_body (boolean)
+  - raw_string (boolean)
+  - authentication_resource_path (character)
+--------------------
+TABLE: input
+  - id (uuid)
+  - workspace_id (character)
+  - runnable_id (character)
+  - runnable_type (public.runnable_type)
+  - name (text)
+  - args (jsonb)
+  - created_at (timestamp)
+  - created_by (character)
+  - is_public (boolean)
+--------------------
+TABLE: instance_group
+  - name (character)
+  - summary (character)
+  - id (character)
+  - scim_display_name (character)
+  - external_id (character)
+--------------------
+TABLE: job_logs
+  - job_id (uuid)
+  - workspace_id (character)
+  - created_at (timestamp)
+  - logs (text)
+  - log_offset (integer)
+  - log_file_index (text[])
+--------------------
+TABLE: job_perms
+  - job_id (uuid)
+  - email (character)
+  - username (character)
+  - is_admin (boolean)
+  - is_operator (boolean)
+  - created_at (timestamp)
+  - workspace_id (character)
+  - groups (text[])
+  - folders (jsonb[])
+--------------------
+TABLE: job_stats
+  - workspace_id (character)
+  - job_id (uuid)
+  - metric_id (character)
+  - metric_name (character)
+  - metric_kind (public.metric_kind)
+  - scalar_int (integer)
+  - scalar_float (real)
+  - timestamps (timestamp)
+  - timeseries_int (integer[])
+  - timeseries_float (real[])
+  Indexes:
+    - INDEX job_stats_id (btree) ON (job_id)
+--------------------
+TABLE: kafka_trigger
+  - path (character)
+  - kafka_resource_path (character)
+  - topics (character)
+  - group_id (character)
+  - script_path (character)
+  - is_flow (boolean)
+  - workspace_id (character)
+  - edited_by (character)
+  - email (character)
+  - edited_at (timestamp)
+  - extra_perms (jsonb)
+  - server_id (character)
+  - last_server_ping (timestamp)
+  - error (text)
+  - enabled (boolean)
+--------------------
+TABLE: log_file
+  - hostname (character)
+  - log_ts (timestamp)
+  - ok_lines (bigint)
+  - err_lines (bigint)
+  - mode (public.log_mode)
+  - worker_group (character)
+  - file_path (character)
+  - json_fmt (boolean)
+  Indexes:
+    - INDEX log_file_log_ts_idx (btree) ON (log_ts)
+--------------------
+TABLE: magic_link
+  - email (character)
+  - token (character)
+  - expiration (timestamp)
+  Indexes:
+    - INDEX index_magic_link_exp (btree) ON (expiration)
+--------------------
+TABLE: metrics
+  - id (character)
+  - value (jsonb)
+  - created_at (timestamp)
+  Indexes:
+    - INDEX idx_metrics_id_created_at (btree) ON (id, created_at DESC) WHERE ((id)::text ~~ 'queue_%'::text)
+    - INDEX metrics_key_idx (btree) ON (id)
+    - INDEX metrics_sort_idx (btree) ON (created_at DESC)
+--------------------
+TABLE: mqtt_trigger
+  - mqtt_resource_path (character)
+  - subscribe_topics (jsonb[])
+  - client_version (public.mqtt_client_version)
+  - v5_config (jsonb)
+  - v3_config (jsonb)
+  - client_id (character)
+  - path (character)
+  - script_path (character)
+  - is_flow (boolean)
+  - workspace_id (character)
+  - edited_by (character)
+  - email (character)
+  - edited_at (timestamp)
+  - extra_perms (jsonb)
+  - server_id (character)
+  - last_server_ping (timestamp)
+  - error (text)
+  - enabled (boolean)
+--------------------
+TABLE: nats_trigger
+  - path (character)
+  - nats_resource_path (character)
+  - subjects (character)
+  - stream_name (character)
+  - consumer_name (character)
+  - use_jetstream (boolean)
+  - script_path (character)
+  - is_flow (boolean)
+  - workspace_id (character)
+  - edited_by (character)
+  - email (character)
+  - edited_at (timestamp)
+  - extra_perms (jsonb)
+  - server_id (character)
+  - last_server_ping (timestamp)
+  - error (text)
+  - enabled (boolean)
+--------------------
+TABLE: outstanding_wait_time
+  - job_id (uuid)
+  - self_wait_time_ms (bigint)
+  - aggregate_wait_time_ms (bigint)
+--------------------
+TABLE: parallel_monitor_lock
+  - parent_flow_id (uuid)
+  - job_id (uuid)
+  - last_ping (timestamp)
+--------------------
+TABLE: password
+  - email (character)
+  - password_hash (character)
+  - login_type (character)
+  - super_admin (boolean)
+  - verified (boolean)
+  - name (character)
+  - company (character)
+  - first_time_user (boolean)
+  - username (character)
+  - devops (boolean)
+--------------------
+TABLE: pending_user
+  - email (character)
+  - created_at (timestamp)
+  - username (character)
+--------------------
+TABLE: pip_resolution_cache
+  - hash (character)
+  - expiration (timestamp)
+  - lockfile (text)
+--------------------
+TABLE: postgres_trigger
+  - path (character)
+  - script_path (character)
+  - is_flow (boolean)
+  - workspace_id (character)
+  - edited_by (character)
+  - email (character)
+  - edited_at (timestamp)
+  - extra_perms (jsonb)
+  - postgres_resource_path (character)
+  - error (text)
+  - server_id (character)
+  - last_server_ping (timestamp)
+  - replication_slot_name (character)
+  - publication_name (character)
+  - enabled (boolean)
+--------------------
+TABLE: raw_app
+  - path (character)
+  - version (integer)
+  - workspace_id (character)
+  - summary (character)
+  - edited_at (timestamp)
+  - data (text)
+  - extra_perms (jsonb)
+--------------------
+TABLE: resource
+  - workspace_id (character)
+  - path (character)
+  - value (jsonb)
+  - description (text)
+  - resource_type (character)
+  - extra_perms (jsonb)
+  - edited_at (timestamp)
+  - created_by (character)
+  - CONSTRAINT (proper_id)
+  Indexes:
+    - INDEX resource_extra_perms (gin) ON (extra_perms)
+--------------------
+TABLE: resource_type
+  - workspace_id (character)
+  - name (character)
+  - schema (jsonb)
+  - description (text)
+  - edited_at (timestamp)
+  - created_by (character)
+  - format_extension (character)
+  - CONSTRAINT (proper_name)
+--------------------
+TABLE: resume_job
+  - id (uuid)
+  - job (uuid)
+  - flow (uuid)
+  - created_at (timestamp)
+  - value (jsonb)
+  - approver (character)
+  - resume_id (integer)
+  - approved (boolean)
+--------------------
+TABLE: schedule
+  - workspace_id (character)
+  - path (character)
+  - edited_by (character)
+  - edited_at (timestamp)
+  - schedule (character)
+  - enabled (boolean)
+  - script_path (character)
+  - args (jsonb)
+  - extra_perms (jsonb)
+  - is_flow (boolean)
+  - email (character)
+  - error (text)
+  - timezone (character)
+  - on_failure (character)
+  - on_recovery (character)
+  - on_failure_times (integer)
+  - on_failure_exact (boolean)
+  - on_failure_extra_args (jsonb)
+  - on_recovery_times (integer)
+  - on_recovery_extra_args (jsonb)
+  - ws_error_handler_muted (boolean)
+  - retry (jsonb)
+  - summary (character)
+  - no_flow_overlap (boolean)
+  - tag (character)
+  - paused_until (timestamp)
+  - on_success (character)
+  - on_success_extra_args (jsonb)
+  - cron_version (text)
+  - description (text)
+  - CONSTRAINT (proper_id)
+  Indexes:
+    - INDEX schedule_extra_perms (gin) ON (extra_perms)
+--------------------
+TABLE: script
+  - workspace_id (character)
+  - hash (bigint)
+  - path (character)
+  - parent_hashes (bigint[])
+  - summary (text)
+  - description (text)
+  - content (text)
+  - created_by (character)
+  - created_at (timestamp)
+  - archived (boolean)
+  - schema (json)
+  - deleted (boolean)
+  - is_template (boolean)
+  - extra_perms (jsonb)
+  - lock (text)
+  - lock_error_logs (text)
+  - language (public.script_lang)
+  - kind (public.script_kind)
+  - tag (character)
+  - draft_only (boolean)
+  - envs (character)
+  - concurrent_limit (integer)
+  - concurrency_time_window_s (integer)
+  - cache_ttl (integer)
+  - dedicated_worker (boolean)
+  - ws_error_handler_muted (boolean)
+  - priority (smallint)
+  - timeout (integer)
+  - delete_after_use (boolean)
+  - restart_unless_cancelled (boolean)
+  - concurrency_key (character)
+  - visible_to_runner_only (boolean)
+  - no_main_func (boolean)
+  - codebase (character)
+  - has_preprocessor (boolean)
+  - on_behalf_of_email (text)
+  - schema_validation (boolean)
+  - CONSTRAINT (proper_id)
+  Indexes:
+    - INDEX index_script_on_path_created_at (btree) ON (workspace_id, path, created_at DESC)
+    - INDEX script_extra_perms (gin) ON (extra_perms)
+--------------------
+TABLE: sqs_trigger
+  - path (character)
+  - queue_url (character)
+  - aws_resource_path (character)
+  - message_attributes (text[])
+  - script_path (character)
+  - is_flow (boolean)
+  - workspace_id (character)
+  - edited_by (character)
+  - email (character)
+  - edited_at (timestamp)
+  - extra_perms (jsonb)
+  - error (text)
+  - server_id (character)
+  - last_server_ping (timestamp)
+  - enabled (boolean)
+  - aws_auth_resource_type (public.aws_auth_resource_type)
+--------------------
+TABLE: token
+  - token (character)
+  - label (character)
+  - expiration (timestamp)
+  - workspace_id (character)
+  - owner (character)
+  - email (character)
+  - super_admin (boolean)
+  - created_at (timestamp)
+  - last_used_at (timestamp)
+  - scopes (text[])
+  - job (uuid)
+  Indexes:
+    - INDEX index_token_exp (btree) ON (expiration)
+--------------------
+TABLE: tutorial_progress
+  - email (character)
+  - progress (bit(64))
+--------------------
+TABLE: usage
+  - id (character)
+  - is_workspace (boolean)
+  - month_ (integer)
+  - usage (integer)
+--------------------
+TABLE: usr
+  - workspace_id (character)
+  - username (character)
+  - email (character)
+  - is_admin (boolean)
+  - created_at (timestamp)
+  - operator (boolean)
+  - disabled (boolean)
+  - role (character)
+  - CONSTRAINT (proper_email)
+  - CONSTRAINT (proper_username)
+  Indexes:
+    - INDEX index_usr_email (btree) ON (email)
+--------------------
+TABLE: usr_to_group
+  - workspace_id (character)
+  - group_ (character)
+  - usr (character)
+--------------------
+TABLE: v2_job
+  - id (uuid)
+  - raw_code (text)
+  - raw_lock (text)
+  - raw_flow (jsonb)
+  - tag (character)
+  - workspace_id (character)
+  - created_at (timestamp)
+  - created_by (character)
+  - permissioned_as (character)
+  - permissioned_as_email (character)
+  - kind (public.job_kind)
+  - runnable_id (bigint)
+  - runnable_path (character)
+  - parent_job (uuid)
+  - root_job (uuid)
+  - script_lang (public.script_lang)
+  - script_entrypoint_override (character)
+  - flow_step (integer)
+  - flow_step_id (character)
+  - flow_innermost_root_job (uuid)
+  - trigger (character)
+  - trigger_kind (public.job_trigger_kind)
+  - same_worker (boolean)
+  - visible_to_owner (boolean)
+  - concurrent_limit (integer)
+  - concurrency_time_window_s (integer)
+  - cache_ttl (integer)
+  - timeout (integer)
+  - priority (smallint)
+  - preprocessed (boolean)
+  - args (jsonb)
+  - labels (text[])
+  - pre_run_error (text)
+  Indexes:
+    - INDEX ix_job_created_at (btree) ON (created_at DESC)
+    - INDEX ix_job_root_job_index_by_path_2 (btree) ON (workspace_id, runnable_path, created_at DESC) WHERE (parent_job IS NULL)
+    - INDEX ix_job_workspace_id_created_at_new_3 (btree) ON (workspace_id, created_at DESC)
+    - INDEX ix_job_workspace_id_created_at_new_5 (btree) ON (workspace_id, created_at DESC) WHERE ((kind = ANY (ARRAY['preview'::public.job_kind, 'flowpreview'::public.job_kind])) AND (parent_job IS NULL))
+    - INDEX ix_job_workspace_id_created_at_new_8 (btree) ON (workspace_id, created_at DESC) WHERE ((kind = 'deploymentcallback'::public.job_kind) AND (parent_job IS NULL))
+    - INDEX ix_job_workspace_id_created_at_new_9 (btree) ON (workspace_id, created_at DESC) WHERE ((kind = ANY (ARRAY['dependencies'::public.job_kind, 'flowdependencies'::public.job_kind, 'appdependencies'::public.job_kind])) AND (parent_job IS NULL))
+    - INDEX ix_v2_job_labels (gin) ON (labels) WHERE (labels IS NOT NULL)
+    - INDEX ix_v2_job_workspace_id_created_at (btree) ON (workspace_id, created_at DESC) WHERE ((kind = ANY (ARRAY['script'::public.job_kind, 'flow'::public.job_kind, 'singlescriptflow'::public.job_kind])) AND (parent_job IS NULL))
+--------------------
+TABLE: v2_job_completed
+  - id (uuid)
+  - workspace_id (character)
+  - duration_ms (bigint)
+  - result (jsonb)
+  - deleted (boolean)
+  - canceled_by (character)
+  - canceled_reason (text)
+  - flow_status (jsonb)
+  - started_at (timestamp)
+  - memory_peak (integer)
+  - status (public.job_status)
+  - completed_at (timestamp)
+  - worker (character)
+  - workflow_as_code_status (jsonb)
+  - result_columns (text[])
+  - retries (uuid[])
+  - extras (jsonb)
+  Indexes:
+    - INDEX ix_completed_job_workspace_id_started_at_new_2 (btree) ON (workspace_id, started_at DESC)
+    - INDEX ix_job_completed_completed_at (btree) ON (completed_at DESC)
+    - INDEX labeled_jobs_on_jobs (gin) ON (((result -> 'wm_labels'::text))) WHERE (result ? 'wm_labels'::text)
+--------------------
+TABLE: v2_job_queue
+  - id (uuid)
+  - workspace_id (character)
+  - created_at (timestamp)
+  - started_at (timestamp)
+  - scheduled_for (timestamp)
+  - running (boolean)
+  - canceled_by (character)
+  - canceled_reason (text)
+  - suspend (integer)
+  - suspend_until (timestamp)
+  - tag (character)
+  - priority (smallint)
+  - worker (character)
+  - extras (jsonb)
+  Indexes:
+    - INDEX queue_sort_v2 (btree) ON (priority DESC NULLS LAST, scheduled_for, tag) WHERE (running = false)
+    - INDEX queue_suspended (btree) ON (priority DESC NULLS LAST, created_at, suspend_until, suspend, tag) WHERE (suspend_until IS NOT NULL)
+    - INDEX root_queue_index_by_path (btree) ON (workspace_id, created_at)
+    - INDEX v2_job_queue_suspend (btree) ON (workspace_id, suspend) WHERE (suspend > 0)
+--------------------
+TABLE: v2_job_runtime
+  - id (uuid)
+  - ping (timestamp)
+  - memory_peak (integer)
+--------------------
+TABLE: v2_job_status
+  - id (uuid)
+  - flow_status (jsonb)
+  - flow_leaf_jobs (jsonb)
+  - workflow_as_code_status (jsonb)
+--------------------
+TABLE: variable
+  - workspace_id (character)
+  - path (character)
+  - value (character)
+  - is_secret (boolean)
+  - description (character)
+  - extra_perms (jsonb)
+  - account (integer)
+  - is_oauth (boolean)
+  - expires_at (timestamp)
+  - CONSTRAINT (proper_id)
+  Indexes:
+    - INDEX variable_extra_perms (gin) ON (extra_perms)
+--------------------
+TABLE: websocket_trigger
+  - path (character)
+  - url (character)
+  - script_path (character)
+  - is_flow (boolean)
+  - workspace_id (character)
+  - edited_by (character)
+  - email (character)
+  - edited_at (timestamp)
+  - extra_perms (jsonb)
+  - server_id (character)
+  - last_server_ping (timestamp)
+  - error (text)
+  - enabled (boolean)
+  - filters (jsonb[])
+  - initial_messages (jsonb[])
+  - url_runnable_args (jsonb)
+  - can_return_message (boolean)
+--------------------
+TABLE: windmill_migrations
+  - name (text)
+  - created_at (timestamp)
+--------------------
+TABLE: worker_ping
+  - worker (character)
+  - worker_instance (character)
+  - ping_at (timestamp)
+  - started_at (timestamp)
+  - ip (character)
+  - jobs_executed (integer)
+  - custom_tags (text[])
+  - worker_group (character)
+  - dedicated_worker (character)
+  - wm_version (character)
+  - current_job_id (uuid)
+  - current_job_workspace_id (character)
+  - vcpus (bigint)
+  - memory (bigint)
+  - occupancy_rate (real)
+  - memory_usage (bigint)
+  - wm_memory_usage (bigint)
+  - occupancy_rate_15s (real)
+  - occupancy_rate_5m (real)
+  - occupancy_rate_30m (real)
+  Indexes:
+    - INDEX worker_ping_on_ping_at (btree) ON (ping_at)
+--------------------
+TABLE: workspace
+  - id (character)
+  - name (character)
+  - owner (character)
+  - deleted (boolean)
+  - premium (boolean)
+  - CONSTRAINT (proper_id)
+--------------------
+TABLE: workspace_env
+  - workspace_id (character)
+  - name (character)
+  - value (character)
+--------------------
+TABLE: workspace_invite
+  - workspace_id (character)
+  - email (character)
+  - is_admin (boolean)
+  - operator (boolean)
+  - CONSTRAINT (proper_email)
+--------------------
+TABLE: workspace_key
+  - workspace_id (character)
+  - kind (public.workspace_key_kind)
+  - key (character)
+--------------------
+TABLE: workspace_runnable_dependencies
+  - flow_path (character)
+  - runnable_path (character)
+  - script_hash (bigint)
+  - runnable_is_flow (boolean)
+  - workspace_id (character)
+  - app_path (character)
+  - CONSTRAINT (workspace_runnable_dependencies_path_exclusive)
+  Indexes:
+    - UNIQUE INDEX app_workspace_with_hash_unique_idx (btree) ON (app_path, runnable_path, script_hash, runnable_is_flow, workspace_id) WHERE (script_hash IS NOT NULL)
+    - UNIQUE INDEX app_workspace_without_hash_unique_idx (btree) ON (app_path, runnable_path, runnable_is_flow, workspace_id) WHERE (script_hash IS NULL)
+    - INDEX flow_workspace_runnable_path_is_flow_idx (btree) ON (runnable_path, runnable_is_flow, workspace_id)
+    - UNIQUE INDEX flow_workspace_with_hash_unique_idx (btree) ON (flow_path, runnable_path, script_hash, runnable_is_flow, workspace_id) WHERE (script_hash IS NOT NULL)
+    - UNIQUE INDEX flow_workspace_without_hash_unique_idx (btree) ON (flow_path, runnable_path, runnable_is_flow, workspace_id) WHERE (script_hash IS NULL)
+--------------------
+TABLE: workspace_settings
+  - workspace_id (character)
+  - slack_team_id (character)
+  - slack_name (character)
+  - slack_command_script (character)
+  - slack_email (character)
+  - auto_invite_domain (character)
+  - auto_invite_operator (boolean)
+  - customer_id (character)
+  - plan (character)
+  - webhook (text)
+  - deploy_to (character)
+  - error_handler (character)
+  - ai_config (jsonb)
+  - error_handler_extra_args (json)
+  - error_handler_muted_on_cancel (boolean)
+  - large_file_storage (jsonb)
+  - git_sync (jsonb)
+  - default_app (character)
+  - auto_add (boolean)
+  - default_scripts (jsonb)
+  - deploy_ui (jsonb)
+  - mute_critical_alerts (boolean)
+  - color (character)
+  - operator_settings (jsonb)
+  - teams_command_script (text)
+  - teams_team_id (text)
+  - teams_team_name (text)
+  - git_app_installations (jsonb)
+--------------------
+TABLE: zombie_job_counter
+  - job_id (uuid)
+  - counter (integer)
+--------------------
diff --git a/backend/tests/worker.rs b/backend/tests/worker.rs
index c8299796f8..8792b2eb1d 100644
--- a/backend/tests/worker.rs
+++ b/backend/tests/worker.rs
@@ -3969,8 +3969,7 @@ async fn assert_lockfile(
 #[cfg(feature = "python")]
 #[sqlx::test(fixtures("base", "lockfile_python"))]
 async fn test_requirements_python(db: Pool<Postgres>) {
-    let content = r#"
-# py: 3.11.11
+    let content = r#"# py: ==3.11.11
 # requirements:
 # tiny==0.1.3
 
@@ -3997,8 +3996,7 @@ def main():
 #[sqlx::test(fixtures("base", "lockfile_python"))]
 async fn test_extra_requirements_python(db: Pool<Postgres>) {
     {
-        let content = r#"
-# py: ==3.11.11
+        let content = r#"# py: ==3.11.11
 # extra_requirements:
 # tiny
 
@@ -4025,8 +4023,7 @@ def main():
 #[cfg(feature = "python")]
 #[sqlx::test(fixtures("base", "lockfile_python"))]
 async fn test_extra_requirements_python2(db: Pool<Postgres>) {
-    let content = r#"
-# py: ==3.11.11
+    let content = r#"# py: ==3.11.11
 # extra_requirements:
 # tiny==0.1.3
 
@@ -4048,8 +4045,7 @@ def main():
 #[cfg(feature = "python")]
 #[sqlx::test(fixtures("base", "lockfile_python"))]
 async fn test_pins_python(db: Pool<Postgres>) {
-    let content = r#"
-# py: ==3.11.11
+    let content = r#"# py: ==3.11.11
 # extra_requirements:
 # tiny==0.1.3
 # bottle==0.13.2
diff --git a/backend/update_sqlx.sh b/backend/update_sqlx.sh
index 11b5196ad8..09824d9e24 100755
--- a/backend/update_sqlx.sh
+++ b/backend/update_sqlx.sh
@@ -10,7 +10,6 @@ if [[ "$(uname)" == "Darwin" ]]; then
 fi
 
 cargo sqlx prepare --workspace -- --all-targets --all-features
-./substitute_ee_code.sh -r --dir ../windmill-ee-private
 
 # Undo the samael changes on macOS
 if [[ "$(uname)" == "Darwin" ]]; then
diff --git a/backend/windmill-api/Cargo.toml b/backend/windmill-api/Cargo.toml
index 9f6de0c5ca..7a715d7437 100644
--- a/backend/windmill-api/Cargo.toml
+++ b/backend/windmill-api/Cargo.toml
@@ -10,13 +10,14 @@ path = "src/lib.rs"
 
 [features]
 default = []
+private = ["windmill-audit/private"]
 enterprise = ["windmill-queue/enterprise", "windmill-audit/enterprise", "windmill-git-sync/enterprise", "windmill-common/enterprise", "windmill-worker/enterprise"]
 stripe = []
 agent_worker_server = []
 enterprise_saml = ["dep:samael", "dep:libxml"]
 benchmark = []
 embedding = ["dep:tinyvector", "dep:hf-hub", "dep:tokenizers", "dep:candle-core", "dep:candle-transformers", "dep:candle-nn"]
-parquet = ["dep:datafusion", "dep:object_store", "dep:url", "windmill-common/parquet", "windmill-worker/parquet"]
+parquet = ["dep:datafusion", "dep:object_store", "windmill-common/parquet", "windmill-worker/parquet"]
 prometheus = ["windmill-common/prometheus", "windmill-queue/prometheus", "dep:prometheus", "windmill-worker/prometheus"]
 openidconnect = ["dep:openidconnect", "windmill-common/openidconnect"]
 tantivy = ["dep:windmill-indexer"]
@@ -39,7 +40,7 @@ mcp = ["dep:rmcp"]
 python = []
 
 [dependencies]
-rmcp = { git = "https://github.com/windmill-labs/rust-sdk", features = ["transport-sse-server"], optional = true }
+rmcp = { git = "https://github.com/modelcontextprotocol/rust-sdk", features=["transport-streamable-http-server", "transport-streamable-http-server-session", "transport-worker"], optional = true }
 windmill-queue.workspace = true
 windmill-common = { workspace = true, default-features = false }
 windmill-audit.workspace = true
@@ -75,6 +76,7 @@ hex.workspace = true
 base64.workspace = true
 base32.workspace = true
 serde_urlencoded.workspace = true
+serde_yml.workspace = true
 cron.workspace = true
 mime_guess.workspace = true
 rust-embed = { workspace = true, optional = true }
@@ -101,6 +103,7 @@ prometheus = { workspace = true, optional = true }
 async_zip = { workspace = true, optional = true }
 regex.workspace = true
 bytes.workspace = true
+url.workspace = true
 samael = { workspace = true, optional = true }
 libxml = { workspace = true, optional = true }
 async-recursion.workspace = true
@@ -115,7 +118,6 @@ candle-nn = { workspace = true, optional = true}
 datafusion = { workspace = true, optional = true}
 object_store = { workspace = true, optional = true}
 openidconnect = { workspace = true, optional = true}
-url = { workspace = true, optional = true}
 jsonwebtoken = { workspace = true }
 matchit = { workspace = true, optional = true }
 tokio-tungstenite = { workspace = true, optional = true}
@@ -125,6 +127,7 @@ nkeys = { workspace = true, optional = true }
 const_format.workspace = true
 pin-project.workspace = true
 http.workspace = true
+indexmap.workspace = true
 async-stream.workspace = true
 ulid.workspace = true
 rust-postgres = { workspace = true, optional = true }
diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index e757d24432..a5e693277e 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.494.0
+  version: 1.498.0
   title: Windmill API
 
   contact:
@@ -4501,6 +4501,13 @@ paths:
           in: query
           schema:
             type: boolean
+        - name: languages
+          in: query
+          description: |
+            Filter to only include scripts written in the given languages.
+            Accepts multiple values as a comma-separated list.
+          schema:
+            type: string
       responses:
         "200":
           description: All scripts
@@ -8444,6 +8451,76 @@ paths:
         "201":
           description: default error handler set
 
+  /w/{workspace}/openapi/generate:
+    post:
+      summary: generate openapi spec from http routes/webhook
+      operationId: generateOpenapiSpec
+      tags:
+        - openapi
+      parameters:
+        - $ref: "#/components/parameters/WorkspaceId"
+      requestBody:
+        description: openapi spec info and url
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/GenerateOpenapiSpec"
+      responses:
+        "200":
+          description: openapi spec
+          content:
+            text/plain:
+              schema:
+                type: string
+    
+  /w/{workspace}/openapi/download:
+    post:
+      summary: Download the OpenAPI v3.1 spec as a file
+      operationId: DownloadOpenapiSpec
+      tags:
+        - openapi
+      parameters:
+        - $ref: "#/components/parameters/WorkspaceId"
+      requestBody:
+        description: openapi spec info and url
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/GenerateOpenapiSpec"
+      responses:
+        "200":
+          description: Downloaded OpenAPI spec
+          content:
+            application/octet-stream:
+              schema:
+                type: string
+                format: binary
+
+  /w/{workspace}/http_triggers/create_many:
+    post:
+      summary: create many HTTP triggers
+      operationId: createHttpTriggers
+      tags:
+        - http_trigger
+      parameters:
+        - $ref: "#/components/parameters/WorkspaceId"
+      requestBody:
+        description: new http trigger
+        required: true
+        content:
+          application/json:
+            schema:
+              type: array
+              items:
+                $ref: "#/components/schemas/NewHttpTrigger"
+      responses:
+        "201":
+          description: http trigger created
+          content:
+            text/plain:
+              schema:
+                type: string
+
   /w/{workspace}/http_triggers/create:
     post:
       summary: create http trigger
@@ -8595,8 +8672,7 @@ paths:
                 route_path:
                   type: string
                 http_method:
-                  type: string
-                  enum: ["get", "post", "put", "delete", "patch"]
+                  $ref: "#/components/schemas/HttpMethod"
                 trigger_path:
                   type: string
                 workspaced_route:
@@ -13185,6 +13261,8 @@ components:
     # NOTE: Not so many generators and validators support this format:
     # $ref: "../../openflow.openapi.yaml#/components/schemas"
     # This is why it is better to inline each of schemas for better compat
+    # Do not change next line. It is used by python-client for pre-processing
+    # -- INLINE START --
     OpenFlow:
       $ref: "../../openflow.openapi.yaml#/components/schemas/OpenFlow"
     FlowValue:
@@ -13223,6 +13301,8 @@ components:
       $ref: "../../openflow.openapi.yaml#/components/schemas/FlowStatus"
     FlowStatusModule:
       $ref: "../../openflow.openapi.yaml#/components/schemas/FlowStatusModule"
+    # -- INLINE END --
+    # Do not change line above
 
     AIProvider:
       type: string
@@ -14719,6 +14799,115 @@ components:
         - custom_script
         - signature
 
+    RunnableKind:
+      type: string
+      enum:
+        - script
+        - flow
+
+    OpenapiSpecFormat:
+      type: string
+      enum:
+        - yaml
+        - json
+
+    OpenapiHttpRouteFilters:
+      type: object
+      properties:
+        folder_regex:
+          type: string
+        path_regex:
+          type: string
+        route_path_regex:
+          type: string
+      required:
+        - folder_regex
+        - path_regex
+        - route_path_regex
+
+    WebhookFilters:
+      type: object
+      properties:
+        user_or_folder_regex:
+          type: string
+          enum:
+            - "*"
+            - u
+            - f
+        user_or_folder_regex_value:
+          type: string
+        path:
+          type: string
+        runnable_kind:
+          $ref: "#/components/schemas/RunnableKind"
+      required:
+        - user_or_folder_regex
+        - user_or_folder_regex_value
+        - path
+        - runnable_kind
+    
+    OpenapiV3Info:
+      type: object
+      properties:
+        title:
+          type: string
+        version:
+          type: string
+        description:
+          type: string
+        terms_of_service:
+          type: string
+        contact:
+          type: object
+          properties:
+            name:
+              type: string
+            url:
+              type: string
+            email:
+              type: string
+        license:
+          type: object
+          properties:
+            name:
+              type: string
+            identifier:
+              type: string
+            url:
+              type: string
+          required:
+            - name
+      required:
+        - title
+        - version
+
+    GenerateOpenapiSpec:
+      type: object
+      properties:
+        info:
+          $ref: "#/components/schemas/OpenapiV3Info"
+        url:
+          type: string
+        openapi_spec_format:
+          $ref: "#/components/schemas/OpenapiSpecFormat"
+        http_route_filters:
+          type: array
+          items:
+            $ref: "#/components/schemas/OpenapiHttpRouteFilters"
+        webhook_filters:
+          type: array
+          items:
+            $ref: "#/components/schemas/WebhookFilters"
+
+    HttpMethod:
+      type: string
+      enum:
+        - get
+        - post
+        - put
+        - delete
+        - patch
+
     HttpTrigger:
       allOf:
         - $ref: "#/components/schemas/TriggerExtraProperty"
@@ -14738,15 +14927,13 @@ components:
           required:
             - s3
         http_method:
-          type: string
-          enum:
-            - get
-            - post
-            - put
-            - delete
-            - patch
+          $ref: "#/components/schemas/HttpMethod"
         authentication_resource_path:
           type: string
+        summary:
+          type: string
+        description:
+          type: string
         is_async:
           type: boolean
         authentication_method:
@@ -14781,6 +14968,10 @@ components:
           type: string
         workspaced_route:
           type: boolean
+        summary:
+          type: string
+        description:
+          type: string
         static_asset_config:
           type: object
           properties:
@@ -14795,13 +14986,7 @@ components:
         is_flow:
           type: boolean
         http_method:
-          type: string
-          enum:
-            - get
-            - post
-            - put
-            - delete
-            - patch
+          $ref: "#/components/schemas/HttpMethod"
         authentication_resource_path:
           type: string
         is_async:
@@ -14834,6 +15019,10 @@ components:
           type: string
         route_path:
           type: string
+        summary:
+          type: string
+        description:
+          type: string
         workspaced_route:
           type: boolean
         static_asset_config:
@@ -14852,13 +15041,7 @@ components:
         is_flow:
           type: boolean
         http_method:
-          type: string
-          enum:
-            - get
-            - post
-            - put
-            - delete
-            - patch
+          $ref: "#/components/schemas/HttpMethod"
         is_async:
           type: boolean
         authentication_method:
diff --git a/backend/windmill-api/src/agent_workers_ee.rs b/backend/windmill-api/src/agent_workers_oss.rs
similarity index 76%
rename from backend/windmill-api/src/agent_workers_ee.rs
rename to backend/windmill-api/src/agent_workers_oss.rs
index 1b5a210d13..655058c493 100644
--- a/backend/windmill-api/src/agent_workers_ee.rs
+++ b/backend/windmill-api/src/agent_workers_oss.rs
@@ -1,3 +1,7 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::agent_workers_ee::*;
+
 /*
  * Author: Ruben Fiszel
  * Copyright: Windmill Labs, Inc 2042
@@ -6,16 +10,21 @@
  * LICENSE-AGPL for a copy of the license.
  */
 
+#[cfg(not(feature = "private"))]
 use crate::db::DB;
 
+#[cfg(not(feature = "private"))]
 use axum::Router;
 
+#[cfg(not(feature = "private"))]
 use serde::{Deserialize, Serialize};
 
+#[cfg(not(feature = "private"))]
 pub fn global_service() -> Router {
     Router::new()
 }
 
+#[cfg(not(feature = "private"))]
 pub fn workspaced_service(
     db: DB,
     _base_internal_url: String,
@@ -36,6 +45,7 @@ pub fn workspaced_service(
 }
 
 #[derive(Clone, Debug, Deserialize, Serialize)]
+#[cfg(not(feature = "private"))]
 pub struct AgentAuth {
     pub worker_group: String,
     pub suffix: Option<String>,
@@ -43,8 +53,10 @@ pub struct AgentAuth {
     pub exp: Option<usize>,
 }
 
+#[cfg(not(feature = "private"))]
 pub struct AgentCache {}
 
+#[cfg(not(feature = "private"))]
 impl AgentCache {
     pub fn new() -> Self {
         AgentCache {}
diff --git a/backend/windmill-api/src/ai.rs b/backend/windmill-api/src/ai.rs
index 6b33a70730..44a6b2986e 100644
--- a/backend/windmill-api/src/ai.rs
+++ b/backend/windmill-api/src/ai.rs
@@ -4,13 +4,13 @@ use crate::{
 };
 
 use axum::{body::Bytes, extract::Path, response::IntoResponse, routing::post, Extension, Router};
-use http::HeaderMap;
+use http::{HeaderMap, Method};
 use quick_cache::sync::Cache;
 use reqwest::{Client, RequestBuilder};
 use serde::{Deserialize, Serialize};
 use serde_json::value::RawValue;
 use std::collections::HashMap;
-use windmill_audit::{audit_ee::audit_log, ActionKind};
+use windmill_audit::{audit_oss::audit_log, ActionKind};
 use windmill_common::error::{to_anyhow, Error, Result};
 
 lazy_static::lazy_static! {
@@ -24,7 +24,7 @@ lazy_static::lazy_static! {
     pub static ref AI_REQUEST_CACHE: Cache<(String, AIProvider), ExpiringAIRequestConfig> = Cache::new(500);
 }
 
-const AZURE_API_VERSION: &str = "2024-10-21";
+const AZURE_API_VERSION: &str = "2025-04-01-preview";
 const OPENAI_BASE_URL: &str = "https://api.openai.com/v1";
 
 #[derive(Deserialize, Debug)]
@@ -141,23 +141,49 @@ impl AIRequestConfig {
         self,
         provider: &AIProvider,
         path: &str,
+        method: Method,
+        headers: HeaderMap,
         body: Bytes,
     ) -> Result<RequestBuilder> {
-        let url = format!("{}/{}", self.base_url, path);
-
         let body = if let Some(user) = self.user {
             Self::add_user_to_body(body, user)?
         } else {
             body
         };
 
-        let is_azure = matches!(provider, AIProvider::OpenAI) && self.base_url != OPENAI_BASE_URL
+        let base_url = self.base_url.trim_end_matches('/');
+
+        let is_azure = matches!(provider, AIProvider::OpenAI) && base_url != OPENAI_BASE_URL
             || matches!(provider, AIProvider::AzureOpenAI);
+        let is_anthropic = matches!(provider, AIProvider::Anthropic);
+
+        let url = if is_azure && method != Method::GET {
+            if base_url.ends_with("/deployments") {
+                let model = Self::get_azure_model(&body)?;
+                format!("{}/{}/{}", base_url, model, path)
+            } else if base_url.ends_with("/openai") {
+                let model = Self::get_azure_model(&body)?;
+                format!("{}/deployments/{}/{}", base_url, model, path)
+            } else {
+                format!("{}/{}", base_url, path)
+            }
+        } else {
+            format!("{}/{}", base_url, path)
+        };
+
+        tracing::debug!("AI request URL: {}", url);
 
         let mut request = HTTP_CLIENT
-            .post(url)
-            .header("content-type", "application/json")
-            .body(body);
+            .request(method, url)
+            .header("content-type", "application/json");
+
+        for (header_name, header_value) in headers.iter() {
+            if header_name.to_string().starts_with("anthropic-") {
+                request = request.header(header_name, header_value);
+            }
+        }
+
+        request = request.body(body);
 
         if is_azure {
             request = request.query(&[("api-version", AZURE_API_VERSION)])
@@ -165,9 +191,12 @@ impl AIRequestConfig {
 
         if let Some(api_key) = self.api_key {
             if is_azure {
-                request = request.header("api-key", api_key)
+                request = request.header("api-key", api_key.clone())
             } else {
-                request = request.header("authorization", format!("Bearer {}", api_key))
+                request = request.header("authorization", format!("Bearer {}", api_key.clone()))
+            }
+            if is_anthropic {
+                request = request.header("X-API-Key", api_key);
             }
         }
 
@@ -199,6 +228,18 @@ impl AIRequestConfig {
             .map_err(|e| Error::internal_err(format!("Failed to reserialize request body: {}", e)))?
             .into())
     }
+
+    fn get_azure_model(body: &Bytes) -> Result<String> {
+        #[derive(Deserialize, Debug)]
+        struct AzureModel {
+            model: String,
+        }
+
+        let azure_model: AzureModel = serde_json::from_slice(body)
+            .map_err(|e| Error::internal_err(format!("Failed to parse request body: {}", e)))?;
+
+        Ok(azure_model.model)
+    }
 }
 
 #[derive(Clone, Debug)]
@@ -311,17 +352,18 @@ pub struct AIConfig {
 }
 
 pub fn global_service() -> Router {
-    Router::new().route("/proxy/*ai", post(global_proxy))
+    Router::new().route("/proxy/*ai", post(global_proxy).get(global_proxy))
 }
 
 pub fn workspaced_service() -> Router {
-    Router::new().route("/proxy/*ai", post(proxy))
+    Router::new().route("/proxy/*ai", post(proxy).get(proxy))
 }
 
 async fn global_proxy(
     authed: ApiAuthed,
     Extension(db): Extension<DB>,
     Path(ai_path): Path<String>,
+    method: Method,
     headers: HeaderMap,
     body: Bytes,
 ) -> impl IntoResponse {
@@ -346,7 +388,7 @@ async fn global_proxy(
     let url = format!("{}/{}", base_url, ai_path);
 
     let request = HTTP_CLIENT
-        .post(url)
+        .request(method, url)
         .header("content-type", "application/json")
         .header("Authorization", format!("Bearer {}", api_key))
         .body(body);
@@ -382,6 +424,7 @@ async fn proxy(
     authed: ApiAuthed,
     Extension(db): Extension<DB>,
     Path((w_id, ai_path)): Path<(String, String)>,
+    method: Method,
     headers: HeaderMap,
     body: Bytes,
 ) -> impl IntoResponse {
@@ -464,7 +507,7 @@ async fn proxy(
         }
     };
 
-    let request = request_config.prepare_request(&provider, &ai_path, body)?;
+    let request = request_config.prepare_request(&provider, &ai_path, method, headers, body)?;
 
     let response = request.send().await.map_err(to_anyhow)?;
 
diff --git a/backend/windmill-api/src/apps.rs b/backend/windmill-api/src/apps.rs
index 533da11d1c..befe569229 100644
--- a/backend/windmill-api/src/apps.rs
+++ b/backend/windmill-api/src/apps.rs
@@ -12,13 +12,13 @@ use crate::{
     db::{ApiAuthed, DB},
     resources::get_resource_value_interpolated_internal,
     users::{require_owner_of_path, OptAuthed},
-    utils::{RunnableKind, WithStarredInfoQuery},
+    utils::WithStarredInfoQuery,
     webhook_util::{WebhookMessage, WebhookShared},
     HTTP_CLIENT,
 };
 #[cfg(feature = "parquet")]
 use crate::{
-    job_helpers_ee::{
+    job_helpers_oss::{
         download_s3_file_internal, get_random_file_name, get_s3_resource,
         get_workspace_s3_resource, upload_file_from_req, DownloadFileQuery,
     },
@@ -48,7 +48,7 @@ use sha2::{Digest, Sha256};
 use sql_builder::{bind::Bind, SqlBuilder};
 use sqlx::{types::Uuid, FromRow};
 use std::str;
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_common::{
     apps::{AppScriptId, ListAppQuery},
@@ -59,7 +59,7 @@ use windmill_common::{
     users::username_to_permissioned_as,
     utils::{
         http_get_from_hub, not_found_if_none, paginate, query_elems_from_hub, require_admin,
-        Pagination, StripPath,
+        Pagination, RunnableKind, StripPath,
     },
     variables::{build_crypt, build_crypt_with_key_suffix, encrypt},
     worker::{to_raw_value, CLOUD_HOSTED},
diff --git a/backend/windmill-api/src/apps_ee.rs b/backend/windmill-api/src/apps_ee.rs
deleted file mode 100644
index a7737664b9..0000000000
--- a/backend/windmill-api/src/apps_ee.rs
+++ /dev/null
@@ -1,5 +0,0 @@
-use axum::Router;
-
-pub fn global_unauthed_service() -> Router {
-    Router::new()
-}
diff --git a/backend/windmill-api/src/apps_oss.rs b/backend/windmill-api/src/apps_oss.rs
new file mode 100644
index 0000000000..346fff9ff1
--- /dev/null
+++ b/backend/windmill-api/src/apps_oss.rs
@@ -0,0 +1,11 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::apps_ee::*;
+
+#[cfg(not(feature = "private"))]
+use axum::Router;
+
+#[cfg(not(feature = "private"))]
+pub fn global_unauthed_service() -> Router {
+    Router::new()
+}
diff --git a/backend/windmill-api/src/args.rs b/backend/windmill-api/src/args.rs
index e3a2adb38f..0b8f4d5210 100644
--- a/backend/windmill-api/src/args.rs
+++ b/backend/windmill-api/src/args.rs
@@ -85,7 +85,7 @@ impl RawWebhookArgs {
         db: &DB,
         w_id: &str,
     ) -> Result<HashMap<String, Box<RawValue>>, Error> {
-        use crate::job_helpers_ee::{
+        use crate::job_helpers_oss::{
             get_random_file_name, get_workspace_s3_resource, upload_file_internal,
         };
         use futures::TryStreamExt;
diff --git a/backend/windmill-api/src/audit.rs b/backend/windmill-api/src/audit.rs
index 47ba881014..336fd32881 100644
--- a/backend/windmill-api/src/audit.rs
+++ b/backend/windmill-api/src/audit.rs
@@ -28,7 +28,7 @@ async fn get_audit(
     Path((w_id, id)): Path<(String, i32)>,
 ) -> JsonResult<AuditLog> {
     let tx = user_db.begin(&authed).await?;
-    let audit = windmill_audit::audit_ee::get_audit(tx, id, &w_id).await?;
+    let audit = windmill_audit::audit_oss::get_audit(tx, id, &w_id).await?;
     Ok(Json(audit))
 }
 async fn list_audit(
@@ -39,6 +39,6 @@ async fn list_audit(
     Query(lq): Query<ListAuditLogQuery>,
 ) -> JsonResult<Vec<AuditLog>> {
     let tx = user_db.begin(&authed).await?;
-    let rows = windmill_audit::audit_ee::list_audit(tx, w_id, pagination, lq).await?;
+    let rows = windmill_audit::audit_oss::list_audit(tx, w_id, pagination, lq).await?;
     Ok(Json(rows))
 }
diff --git a/backend/windmill-api/src/auth.rs b/backend/windmill-api/src/auth.rs
index 2936b74957..954fcad43c 100644
--- a/backend/windmill-api/src/auth.rs
+++ b/backend/windmill-api/src/auth.rs
@@ -1,5 +1,5 @@
 #[cfg(feature = "enterprise")]
-use crate::ee::ExternalJwks;
+use crate::ee_oss::ExternalJwks;
 use axum::{
     async_trait,
     extract::{FromRequestParts, OriginalUri, Query},
@@ -26,6 +26,21 @@ use windmill_common::{
     users::{COOKIE_NAME, SUPERADMIN_SECRET_EMAIL},
 };
 
+lazy_static::lazy_static! {
+    // Global auth cache accessible from main.rs for direct invalidation
+    pub static ref AUTH_CACHE: Cache<(String, String), ExpiringAuthCache> = Cache::new(300);
+}
+
+// Global function to invalidate a specific token from cache
+pub fn invalidate_token_from_cache(token: &str) {
+    // Remove all cache entries for this token (across all workspaces)
+    AUTH_CACHE.retain(|(_workspace_id, cached_token), _cached_value| cached_token != token);
+    tracing::info!(
+        "Invalidated token from auth cache: {}...",
+        &token[..token.len().min(8)]
+    );
+}
+
 #[derive(Clone)]
 pub struct ExpiringAuthCache {
     pub authed: ApiAuthed,
@@ -33,7 +48,6 @@ pub struct ExpiringAuthCache {
 }
 
 pub struct AuthCache {
-    cache: Cache<(String, String), ExpiringAuthCache>,
     db: DB,
     superadmin_secret: Option<String>,
     #[cfg(feature = "enterprise")]
@@ -47,7 +61,6 @@ impl AuthCache {
         #[cfg(feature = "enterprise")] ext_jwks: Option<Arc<RwLock<ExternalJwks>>>,
     ) -> Self {
         AuthCache {
-            cache: Cache::new(300),
             db,
             superadmin_secret,
             #[cfg(feature = "enterprise")]
@@ -56,7 +69,7 @@ impl AuthCache {
     }
 
     pub async fn invalidate(&self, w_id: &str, token: String) {
-        self.cache.remove(&(w_id.to_string(), token));
+        AUTH_CACHE.remove(&(w_id.to_string(), token));
     }
 
     pub async fn get_authed(&self, w_id: Option<String>, token: &str) -> Option<ApiAuthed> {
@@ -64,14 +77,14 @@ impl AuthCache {
             w_id.as_ref().unwrap_or(&"".to_string()).to_string(),
             token.to_string(),
         );
-        let s = self.cache.get(&key).map(|c| c.to_owned());
+        let s = AUTH_CACHE.get(&key).map(|c| c.to_owned());
         match s {
             Some(ExpiringAuthCache { authed, expiry }) if expiry > chrono::Utc::now() => {
                 Some(authed)
             }
             #[cfg(feature = "enterprise")]
             _ if token.starts_with("jwt_ext_") => {
-                let authed_and_exp = match crate::ee::jwt_ext_auth(
+                let authed_and_exp = match crate::ee_oss::jwt_ext_auth(
                     w_id.as_ref(),
                     token.trim_start_matches("jwt_ext_"),
                     self.ext_jwks.clone(),
@@ -86,7 +99,7 @@ impl AuthCache {
                 };
 
                 if let Some((authed, exp)) = authed_and_exp.clone() {
-                    self.cache.insert(
+                    AUTH_CACHE.insert(
                         key,
                         ExpiringAuthCache {
                             authed: authed.clone(),
@@ -123,7 +136,7 @@ impl AuthCache {
                             username_override,
                         };
 
-                        self.cache.insert(
+                        AUTH_CACHE.insert(
                             key,
                             ExpiringAuthCache {
                                 authed: authed.clone(),
@@ -317,7 +330,7 @@ impl AuthCache {
                         }
                     };
                     if let Some(authed) = authed_o.as_ref() {
-                        self.cache.insert(
+                        AUTH_CACHE.insert(
                             key,
                             ExpiringAuthCache {
                                 authed: authed.clone(),
@@ -470,6 +483,27 @@ where
     }
 }
 
+fn maybe_get_workspace_id_from_path(path_vec: &[&str]) -> Option<String> {
+    let workspace_id = if path_vec.len() >= 4 && path_vec[0] == "" && path_vec[2] == "w" {
+        Some(path_vec[3].to_owned())
+    } else if path_vec.len() >= 5
+        && path_vec[0] == ""
+        && path_vec[1] == "api"
+        && path_vec[2] == "mcp"
+        && path_vec[3] == "w"
+    {
+        Some(path_vec[4].to_owned())
+    } else {
+        if path_vec.len() >= 5 && path_vec[0] == "" && path_vec[2] == "srch" && path_vec[3] == "w" {
+            Some(path_vec[4].to_owned())
+        } else {
+            None
+        }
+    };
+
+    workspace_id
+}
+
 #[async_trait]
 impl<S> FromRequestParts<S> for ApiAuthed
 where
@@ -482,85 +516,62 @@ where
         state: &S,
     ) -> std::result::Result<Self, Self::Rejection> {
         if parts.method == http::Method::OPTIONS {
-            return Ok(ApiAuthed {
-                email: "".to_owned(),
-                username: "".to_owned(),
-                is_admin: false,
-                is_operator: false,
-                groups: Vec::new(),
-                folders: Vec::new(),
-                scopes: None,
-                username_override: None,
-            });
+            return Ok(ApiAuthed::default());
         };
         let already_authed = parts.extensions.get::<ApiAuthed>();
-        if let Some(authed) = already_authed {
-            Ok(authed.clone())
-        } else {
-            let already_tokened = parts.extensions.get::<Tokened>();
-            let token_o = if let Some(token) = already_tokened {
-                Some(token.token.clone())
-            } else {
-                extract_token(parts, state).await
-            };
-            let original_uri = OriginalUri::from_request_parts(parts, state)
-                .await
-                .ok()
-                .map(|x| x.0)
-                .unwrap_or_default();
-            let path_vec: Vec<&str> = original_uri.path().split("/").collect();
-            let workspace_id = if path_vec.len() >= 4 && path_vec[0] == "" && path_vec[2] == "w" {
-                Some(path_vec[3].to_owned())
-            } else if path_vec.len() >= 5
-                && path_vec[0] == ""
-                && path_vec[1] == "api"
-                && path_vec[2] == "mcp"
-                && path_vec[3] == "w"
-            {
-                Some(path_vec[4].to_string())
-            } else {
-                if path_vec.len() >= 5
-                    && path_vec[0] == ""
-                    && path_vec[2] == "srch"
-                    && path_vec[3] == "w"
-                {
-                    Some(path_vec[4].to_string())
-                } else {
-                    None
-                }
-            };
-            if let Some(token) = token_o {
-                if let Ok(Extension(cache)) =
-                    Extension::<Arc<AuthCache>>::from_request_parts(parts, state).await
-                {
-                    if let Some(authed) = cache.get_authed(workspace_id.clone(), &token).await {
-                        parts.extensions.insert(authed.clone());
-                        if authed.scopes.as_ref().is_some_and(|scopes| {
-                            scopes
-                                .iter()
-                                .any(|s| s.starts_with("jobs:") || s.starts_with("run:"))
-                        }) && (path_vec.len() < 3
-                            || (path_vec[4] != "jobs" && path_vec[4] != "jobs_u"))
-                        {
-                            BRUTE_FORCE_COUNTER.increment().await;
-                            return Err((
-                                StatusCode::UNAUTHORIZED,
-                                format!("Unauthorized scoped token: {:?}", authed.scopes),
-                            ));
-                        }
-                        Span::current().record("username", &authed.username.as_str());
-                        Span::current().record("email", &authed.email);
 
-                        if let Some(workspace_id) = workspace_id {
-                            Span::current().record("workspace_id", &workspace_id);
-                        }
-                        return Ok(authed);
+        if let Some(authed) = already_authed {
+            return Ok(authed.clone());
+        }
+
+        let already_tokened = parts.extensions.get::<Tokened>();
+        let token_o = if let Some(token) = already_tokened {
+            Some(token.token.clone())
+        } else {
+            extract_token(parts, state).await
+        };
+
+        if let Some(token) = token_o {
+            if let Ok(Extension(cache)) =
+                Extension::<Arc<AuthCache>>::from_request_parts(parts, state).await
+            {
+                let original_uri = OriginalUri::from_request_parts(parts, state)
+                    .await
+                    .ok()
+                    .map(|x| x.0)
+                    .unwrap_or_default();
+                let path_vec: Vec<&str> = original_uri.path().split("/").collect();
+                let workspace_id = maybe_get_workspace_id_from_path(&path_vec);
+
+                if let Some(authed) = cache.get_authed(workspace_id.clone(), &token).await {
+                    if authed.scopes.as_ref().is_some_and(|scopes| {
+                        scopes
+                            .iter()
+                            .any(|s| s.starts_with("jobs:") || s.starts_with("run:"))
+                    }) && (path_vec.len() < 3
+                        || (path_vec[4] != "jobs" && path_vec[4] != "jobs_u"))
+                    {
+                        BRUTE_FORCE_COUNTER.increment().await;
+                        return Err((
+                            StatusCode::UNAUTHORIZED,
+                            format!("Unauthorized scoped token: {:?}", authed.scopes),
+                        ));
                     }
+
+                    parts.extensions.insert(authed.clone());
+
+                    Span::current().record("username", &authed.username.as_str());
+                    Span::current().record("email", &authed.email);
+
+                    if let Some(workspace_id) = workspace_id {
+                        Span::current().record("workspace_id", &workspace_id);
+                    }
+                    return Ok(authed);
                 }
             }
-            BRUTE_FORCE_COUNTER.increment().await;
-            Err((StatusCode::UNAUTHORIZED, "Unauthorized".to_owned()))
         }
+        BRUTE_FORCE_COUNTER.increment().await;
+        Err((StatusCode::UNAUTHORIZED, "Unauthorized".to_owned()))
     }
 }
 
diff --git a/backend/windmill-api/src/capture.rs b/backend/windmill-api/src/capture.rs
index 3164ebe43f..54ad2c35d4 100644
--- a/backend/windmill-api/src/capture.rs
+++ b/backend/windmill-api/src/capture.rs
@@ -15,7 +15,7 @@ use {
 
 #[cfg(all(feature = "enterprise", feature = "gcp_trigger"))]
 use {
-    crate::gcp_triggers_ee::{
+    crate::gcp_triggers_oss::{
         manage_google_subscription, process_google_push_request, validate_jwt_token,
         CreateUpdateConfig, SubscriptionMode,
     },
@@ -46,28 +46,24 @@ use serde::de::DeserializeOwned;
 use windmill_common::error::Error;
 
 #[cfg(all(feature = "enterprise", feature = "kafka"))]
-use crate::kafka_triggers_ee::KafkaTriggerConfigConnection;
+use crate::kafka_triggers_oss::KafkaTriggerConfigConnection;
 
 #[cfg(feature = "mqtt_trigger")]
 use crate::mqtt_triggers::{MqttClientVersion, MqttV3Config, MqttV5Config, SubscribeTopic};
 
 #[cfg(all(feature = "enterprise", feature = "nats"))]
-use crate::nats_triggers_ee::NatsTriggerConfigConnection;
+use crate::nats_triggers_oss::NatsTriggerConfigConnection;
 
 #[cfg(feature = "postgres_trigger")]
-use {
-    crate::postgres_triggers::{
-        create_logical_replication_slot, create_pg_publication, generate_random_string,
-        get_pg_connection, PublicationData,
-    },
-    sqlx::Connection,
+use crate::postgres_triggers::{
+    create_logical_replication_slot, create_pg_publication, generate_random_string,
+    get_default_pg_connection, PublicationData,
 };
 
 use crate::{
     args::RawWebhookArgs,
     db::{ApiAuthed, DB},
     users::fetch_api_authed,
-    utils::RunnableKind,
 };
 
 use axum::{
@@ -85,7 +81,7 @@ use windmill_common::{
     db::UserDB,
     error::{JsonResult, Result},
     triggers::{RunnableFormat, RunnableFormatVersion, TriggerKind},
-    utils::{not_found_if_none, paginate, Pagination, StripPath},
+    utils::{not_found_if_none, paginate, Pagination, RunnableKind, StripPath},
     worker::{to_raw_value, CLOUD_HOSTED},
 };
 
@@ -304,13 +300,15 @@ async fn set_postgres_trigger_config(
     user_db: UserDB,
     mut capture_config: NewCaptureConfig,
 ) -> Result<NewCaptureConfig> {
+    use windmill_common::error::to_anyhow;
+
     let Some(TriggerConfig::Postgres(postgres_config)) = capture_config.trigger_config.as_mut()
     else {
         return Err(Error::BadRequest("Invalid postgres config".to_string()));
     };
 
     if postgres_config.basic_mode.unwrap_or(false) {
-        let mut pg_connection = get_pg_connection(
+        let mut pg_connection = get_default_pg_connection(
             authed,
             Some(user_db),
             &db,
@@ -319,22 +317,26 @@ async fn set_postgres_trigger_config(
         )
         .await?;
 
-        let mut tx = pg_connection.begin().await?;
+        let tx = pg_connection.transaction().await.map_err(to_anyhow)?;
 
         let publication_name = format!("windmill_capture_{}", generate_random_string());
         let replication_slot_name = publication_name.clone();
 
-        create_logical_replication_slot(&mut tx, &replication_slot_name).await?;
+        create_logical_replication_slot(tx.client(), &replication_slot_name)
+            .await
+            .map_err(to_anyhow)?;
 
         create_pg_publication(
-            &mut tx,
+            tx.client(),
             &publication_name,
             postgres_config.publication.table_to_track.as_deref(),
             &postgres_config.publication.transaction_to_track,
         )
-        .await?;
+        .await
+        .map_err(to_anyhow)?;
+
+        tx.commit().await.map_err(to_anyhow)?;
 
-        tx.commit().await?;
         postgres_config.publication_name = Some(publication_name);
         postgres_config.replication_slot_name = Some(replication_slot_name);
     } else {
@@ -905,7 +907,7 @@ async fn gcp_payload(
     headers: HeaderMap,
     request: Request,
 ) -> Result<StatusCode> {
-    use crate::{gcp_triggers_ee::GcpTrigger, trigger_helpers::TriggerJobArgs};
+    use crate::{gcp_triggers_oss::GcpTrigger, trigger_helpers::TriggerJobArgs};
 
     let is_flow = matches!(runnable_kind, RunnableKind::Flow);
     let (gcp_trigger_config, owner, email): (GcpTriggerConfig, _, _) =
diff --git a/backend/windmill-api/src/configs.rs b/backend/windmill-api/src/configs.rs
index e8770b2b5e..9110d104c8 100644
--- a/backend/windmill-api/src/configs.rs
+++ b/backend/windmill-api/src/configs.rs
@@ -14,7 +14,7 @@ use axum::{
 
 use serde::{Deserialize, Serialize};
 use sqlx::FromRow;
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_common::{
     error::{self},
diff --git a/backend/windmill-api/src/db.rs b/backend/windmill-api/src/db.rs
index 85f1ee485f..b70532a8a9 100644
--- a/backend/windmill-api/src/db.rs
+++ b/backend/windmill-api/src/db.rs
@@ -16,7 +16,7 @@ use sqlx::{
 };
 
 use tokio::task::JoinHandle;
-use windmill_audit::audit_ee::{AuditAuthor, AuditAuthorable};
+use windmill_audit::audit_oss::{AuditAuthor, AuditAuthorable};
 use windmill_common::{
     db::{Authable, Authed},
     error::Error,
@@ -804,10 +804,18 @@ async fn fix_job_completed_index(db: &DB) -> Result<(), Error> {
             .execute(db)
             .await?;
     });
+
+    run_windmill_migration!("v2_job_queue_suspend", db, |tx| {
+        sqlx::query!(
+            "CREATE INDEX CONCURRENTLY IF NOT EXISTS v2_job_queue_suspend ON v2_job_queue (workspace_id, suspend) WHERE suspend > 0;"
+        )
+        .execute(db)
+        .await?;
+    });
     Ok(())
 }
 
-#[derive(Clone, Debug, Hash, Eq, PartialEq)]
+#[derive(Clone, Debug, Default, Hash, Eq, PartialEq)]
 pub struct ApiAuthed {
     pub email: String,
     pub username: String,
diff --git a/backend/windmill-api/src/ee.rs b/backend/windmill-api/src/ee_oss.rs
similarity index 61%
rename from backend/windmill-api/src/ee.rs
rename to backend/windmill-api/src/ee_oss.rs
index cddb639e95..3fb1271a73 100644
--- a/backend/windmill-api/src/ee.rs
+++ b/backend/windmill-api/src/ee_oss.rs
@@ -1,15 +1,21 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::ee::*;
+
+#[cfg(not(feature = "private"))]
 use anyhow::anyhow;
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 use std::sync::Arc;
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 use tokio::sync::RwLock;
 
+#[cfg(not(feature = "private"))]
 pub async fn validate_license_key(_license_key: String) -> anyhow::Result<(String, bool)> {
     // Implementation is not open source
     Err(anyhow!("License can't be validated in Windmill CE"))
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub async fn jwt_ext_auth(
     _w_id: Option<&String>,
     _token: &str,
@@ -20,10 +26,10 @@ pub async fn jwt_ext_auth(
     Err(anyhow!("External JWT auth is not open source"))
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub struct ExternalJwks;
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 impl ExternalJwks {
     pub async fn load() -> Option<Arc<RwLock<Self>>> {
         // Implementation is not open source
diff --git a/backend/windmill-api/src/flows.rs b/backend/windmill-api/src/flows.rs
index e34b2cacaf..e8ebe6ccc5 100644
--- a/backend/windmill-api/src/flows.rs
+++ b/backend/windmill-api/src/flows.rs
@@ -12,7 +12,7 @@ use crate::db::ApiAuthed;
 use crate::triggers::{
     get_triggers_count_internal, list_tokens_internal, TriggersCount, TruncatedTokenWithEmail,
 };
-use crate::utils::{RunnableKind, WithStarredInfoQuery};
+use crate::utils::WithStarredInfoQuery;
 use crate::{
     db::DB,
     schedule::clear_schedule,
@@ -31,7 +31,7 @@ use hyper::StatusCode;
 use serde::{Deserialize, Serialize};
 use sql_builder::prelude::*;
 use sqlx::{FromRow, Postgres, Transaction};
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_common::utils::query_elems_from_hub;
 use windmill_common::worker::to_raw_value;
@@ -43,7 +43,7 @@ use windmill_common::{
     jobs::JobPayload,
     schedule::Schedule,
     scripts::Schema,
-    utils::{http_get_from_hub, not_found_if_none, paginate, Pagination, StripPath},
+    utils::{http_get_from_hub, not_found_if_none, paginate, Pagination, RunnableKind, StripPath},
 };
 use windmill_git_sync::{handle_deployment_metadata, DeployedObject};
 use windmill_queue::{push, schedule::push_scheduled_job, PushIsolationLevel};
@@ -477,7 +477,7 @@ async fn create_flow(
         false,
         None,
         true,
-        nf.tag,
+        None,
         None,
         None,
         None,
diff --git a/backend/windmill-api/src/folders.rs b/backend/windmill-api/src/folders.rs
index 5047a96cad..1e4d2e09c0 100644
--- a/backend/windmill-api/src/folders.rs
+++ b/backend/windmill-api/src/folders.rs
@@ -23,7 +23,7 @@ use axum::{
 };
 use lazy_static::lazy_static;
 use regex::Regex;
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_common::{
     db::UserDB,
diff --git a/backend/windmill-api/src/gcp_triggers_ee.rs b/backend/windmill-api/src/gcp_triggers_oss.rs
similarity index 76%
rename from backend/windmill-api/src/gcp_triggers_ee.rs
rename to backend/windmill-api/src/gcp_triggers_oss.rs
index 0dc672580c..78005309bc 100644
--- a/backend/windmill-api/src/gcp_triggers_ee.rs
+++ b/backend/windmill-api/src/gcp_triggers_oss.rs
@@ -1,29 +1,38 @@
-use crate::db::{ApiAuthed, DB};
-use crate::trigger_helpers::TriggerJobArgs;
-use axum::{extract::Request, Router};
-use http::HeaderMap;
-use serde::{Deserialize, Serialize};
-use serde_json::value::RawValue;
-use sqlx::prelude::FromRow;
-use sqlx::types::Json as SqlxJson;
-use std::collections::HashMap;
-use windmill_common::db::UserDB;
-use windmill_common::worker::to_raw_value;
-use windmill_common::{
-    error::{Error as WindmillError, Result as WindmillResult},
-    triggers::TriggerKind,
-    utils::empty_as_none,
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::gcp_triggers_ee::*;
+
+#[cfg(not(feature = "private"))]
+use {
+    crate::db::{ApiAuthed, DB},
+    crate::trigger_helpers::TriggerJobArgs,
+    axum::{extract::Request, Router},
+    http::HeaderMap,
+    serde::{Deserialize, Serialize},
+    serde_json::value::RawValue,
+    sqlx::prelude::FromRow,
+    sqlx::types::Json as SqlxJson,
+    std::collections::HashMap,
+    windmill_common::db::UserDB,
+    windmill_common::worker::to_raw_value,
+    windmill_common::{
+        error::{Error as WindmillError, Result as WindmillResult},
+        triggers::TriggerKind,
+        utils::empty_as_none,
+    },
 };
 
 #[derive(sqlx::Type, Debug, Deserialize, Serialize)]
 #[serde(rename_all(serialize = "lowercase", deserialize = "lowercase"))]
 #[sqlx(type_name = "DELIVERY_MODE", rename_all = "lowercase")]
 #[allow(unused)]
+#[cfg(not(feature = "private"))]
 pub enum DeliveryType {
     Pull,
     Push,
 }
 
+#[cfg(not(feature = "private"))]
 impl Default for DeliveryType {
     fn default() -> Self {
         Self::Pull
@@ -32,6 +41,7 @@ impl Default for DeliveryType {
 
 #[derive(FromRow, Deserialize, Serialize, Debug)]
 #[allow(unused)]
+#[cfg(not(feature = "private"))]
 pub struct PushConfig {
     #[serde(deserialize_with = "empty_as_none")]
     route_path: Option<String>,
@@ -42,6 +52,7 @@ pub struct PushConfig {
 }
 #[derive(Default, Debug, Serialize, Deserialize)]
 #[allow(unused)]
+#[cfg(not(feature = "private"))]
 pub struct CreateUpdateConfig {
     pub delivery_type: DeliveryType,
     #[serde(default, deserialize_with = "empty_as_none")]
@@ -50,6 +61,7 @@ pub struct CreateUpdateConfig {
 }
 
 #[derive(Debug, Deserialize, Serialize)]
+#[cfg(not(feature = "private"))]
 pub struct ExistingGcpSubscription {
     pub subscription_id: String,
     pub base_endpoint: String,
@@ -58,15 +70,18 @@ pub struct ExistingGcpSubscription {
 #[derive(Debug, Deserialize, Serialize, sqlx::Type)]
 #[serde(rename_all = "snake_case")]
 #[sqlx(type_name = "GCP_SUBSCRIPTION_MODE", rename_all = "snake_case")]
+#[cfg(not(feature = "private"))]
 pub enum SubscriptionMode {
     Existing,
     CreateUpdate,
 }
 
+#[cfg(not(feature = "private"))]
 pub fn workspaced_service() -> Router {
     Router::new()
 }
 
+#[cfg(not(feature = "private"))]
 pub fn start_consuming_gcp_pubsub_event(
     _db: DB,
     mut _killpill_rx: tokio::sync::broadcast::Receiver<()>,
@@ -74,6 +89,7 @@ pub fn start_consuming_gcp_pubsub_event(
     // implementation is not open source
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn manage_google_subscription(
     _authed: ApiAuthed,
     _db: &DB,
@@ -91,6 +107,7 @@ pub async fn manage_google_subscription(
     Ok(CreateUpdateConfig::default())
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn process_google_push_request(
     _headers: HeaderMap,
     _request: Request,
@@ -98,6 +115,7 @@ pub async fn process_google_push_request(
     Ok((String::new(), HashMap::new()))
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn validate_jwt_token(
     _db: &DB,
     _user_db: UserDB,
@@ -110,11 +128,13 @@ pub async fn validate_jwt_token(
     Ok(())
 }
 
+#[cfg(not(feature = "private"))]
 pub fn gcp_push_route_handler() -> Router {
     Router::new()
 }
 
 #[derive(FromRow, Deserialize, Serialize, Debug)]
+#[cfg(not(feature = "private"))]
 pub struct GcpTrigger {
     pub gcp_resource_path: String,
     pub subscription_id: String,
@@ -135,7 +155,7 @@ pub struct GcpTrigger {
     pub last_server_ping: Option<chrono::DateTime<chrono::Utc>>,
     pub enabled: bool,
 }
-
+#[cfg(not(feature = "private"))]
 impl TriggerJobArgs<String> for GcpTrigger {
     fn v1_payload_fn(payload: String) -> HashMap<String, Box<RawValue>> {
         HashMap::from([("payload".to_string(), to_raw_value(&payload))])
diff --git a/backend/windmill-api/src/git_sync_ee.rs b/backend/windmill-api/src/git_sync_ee.rs
deleted file mode 100644
index b72afac189..0000000000
--- a/backend/windmill-api/src/git_sync_ee.rs
+++ /dev/null
@@ -1,9 +0,0 @@
-use axum::routing::Router;
-
-pub fn workspaced_service() -> Router {
-    Router::new()
-}
-
-pub fn global_service() -> Router {
-    Router::new()
-}
\ No newline at end of file
diff --git a/backend/windmill-api/src/git_sync_oss.rs b/backend/windmill-api/src/git_sync_oss.rs
new file mode 100644
index 0000000000..0451d88699
--- /dev/null
+++ b/backend/windmill-api/src/git_sync_oss.rs
@@ -0,0 +1,16 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::git_sync_ee::*;
+
+#[cfg(not(feature = "private"))]
+use axum::routing::Router;
+
+#[cfg(not(feature = "private"))]
+pub fn workspaced_service() -> Router {
+    Router::new()
+}
+
+#[cfg(not(feature = "private"))]
+pub fn global_service() -> Router {
+    Router::new()
+}
diff --git a/backend/windmill-api/src/groups.rs b/backend/windmill-api/src/groups.rs
index e25d3ee7da..d5da9c25f5 100644
--- a/backend/windmill-api/src/groups.rs
+++ b/backend/windmill-api/src/groups.rs
@@ -14,7 +14,7 @@ use axum::{
     routing::{delete, get, post},
     Json, Router,
 };
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_common::worker::CLOUD_HOSTED;
 use windmill_common::{
diff --git a/backend/windmill-api/src/http_trigger_args.rs b/backend/windmill-api/src/http_trigger_args.rs
index 6aab75e46e..8fb96d42f0 100644
--- a/backend/windmill-api/src/http_trigger_args.rs
+++ b/backend/windmill-api/src/http_trigger_args.rs
@@ -21,7 +21,7 @@ use crate::{
 
 pub struct RawHttpTriggerArgs(pub RawWebhookArgs);
 
-#[derive(Serialize, Deserialize, sqlx::Type, Debug, Clone, Hash, Eq, PartialEq)]
+#[derive(Serialize, Deserialize, sqlx::Type, Debug, Clone, Copy, Hash, Eq, PartialEq)]
 #[sqlx(type_name = "HTTP_METHOD", rename_all = "lowercase")]
 #[serde(rename_all = "lowercase")]
 pub enum HttpMethod {
diff --git a/backend/windmill-api/src/http_trigger_auth.rs b/backend/windmill-api/src/http_trigger_auth.rs
index c197dcc9b0..85288d87b8 100644
--- a/backend/windmill-api/src/http_trigger_auth.rs
+++ b/backend/windmill-api/src/http_trigger_auth.rs
@@ -441,8 +441,8 @@ pub struct BasicAuthAuthentication {
 
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct ApiKeyAuthentication {
-    api_key_header: String,
-    api_key_secret: String,
+    pub api_key_header: String,
+    pub api_key_secret: String,
 }
 
 #[derive(Debug, Eq, PartialEq, Hash, Clone, Copy, Serialize, Deserialize)]
diff --git a/backend/windmill-api/src/http_triggers.rs b/backend/windmill-api/src/http_triggers.rs
index b17c8205ad..a42bdcac53 100644
--- a/backend/windmill-api/src/http_triggers.rs
+++ b/backend/windmill-api/src/http_triggers.rs
@@ -1,7 +1,7 @@
 #[cfg(feature = "http_trigger")]
 use crate::http_trigger_args::{HttpMethod, RawHttpTriggerArgs};
 #[cfg(feature = "parquet")]
-use crate::job_helpers_ee::get_workspace_s3_resource;
+use crate::job_helpers_oss::get_workspace_s3_resource;
 use crate::resources::try_get_resource_from_db_as;
 use crate::trigger_helpers::{get_runnable_format, RunnableId};
 use crate::utils::{non_empty_str, ExpiringCacheEntry};
@@ -14,6 +14,7 @@ use crate::{
     },
     users::fetch_api_authed,
 };
+use anyhow::anyhow;
 use axum::response::Response;
 use axum::{
     extract::{Path, Query},
@@ -28,13 +29,14 @@ use quick_cache::sync::Cache;
 use serde::{Deserialize, Serialize};
 use sql_builder::{bind::Bind, SqlBuilder};
 use sqlx::prelude::FromRow;
-use sqlx::PgTransaction;
+use sqlx::PgConnection;
 use std::borrow::Cow;
+use std::collections::HashSet;
 use std::{collections::HashMap, sync::Arc};
 use tokio::sync::{RwLock, RwLockReadGuard};
 use tower_http::cors::CorsLayer;
-use windmill_audit::{audit_ee::audit_log, ActionKind};
-use windmill_common::error::Error;
+use windmill_audit::{audit_oss::audit_log, ActionKind};
+use windmill_common::error::{Error, Result as WindmillResult};
 #[cfg(feature = "parquet")]
 use windmill_common::s3_helpers::build_object_store_client;
 use windmill_common::{
@@ -42,7 +44,7 @@ use windmill_common::{
     error::{self, JsonResult},
     s3_helpers::S3Object,
     triggers::TriggerKind,
-    utils::{not_found_if_none, paginate, require_admin, Pagination, StripPath},
+    utils::{empty_as_none, not_found_if_none, paginate, require_admin, Pagination, StripPath},
     worker::CLOUD_HOSTED,
 };
 use windmill_git_sync::handle_deployment_metadata;
@@ -79,6 +81,7 @@ pub fn routes_global_service() -> Router {
 pub fn workspaced_service() -> Router {
     Router::new()
         .route("/create", post(create_trigger))
+        .route("/create_many", post(create_many_http_trigger))
         .route("/list", get(list_triggers))
         .route("/get/*path", get(get_trigger))
         .route("/update/*path", post(update_trigger))
@@ -111,6 +114,8 @@ struct NewTrigger {
     static_asset_config: Option<sqlx::types::Json<S3Object>>,
     http_method: HttpMethod,
     workspaced_route: Option<bool>,
+    summary: Option<String>,
+    description: Option<String>,
     is_static_website: bool,
     wrap_body: Option<bool>,
     raw_string: Option<bool>,
@@ -131,6 +136,8 @@ pub struct HttpTrigger {
     pub is_async: bool,
     pub authentication_method: AuthenticationMethod,
     pub http_method: HttpMethod,
+    pub summary: Option<String>,
+    pub description: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub static_asset_config: Option<sqlx::types::Json<S3Object>>,
     pub is_static_website: bool,
@@ -150,6 +157,8 @@ struct EditTrigger {
     authentication_method: AuthenticationMethod,
     #[serde(deserialize_with = "non_empty_str")]
     authentication_resource_path: Option<String>,
+    summary: Option<String>,
+    description: Option<String>,
     http_method: HttpMethod,
     static_asset_config: Option<sqlx::types::Json<S3Object>>,
     workspaced_route: Option<bool>,
@@ -164,6 +173,7 @@ pub struct ListTriggerQuery {
     pub per_page: Option<usize>,
     pub path: Option<String>,
     pub is_flow: Option<bool>,
+    #[serde(default, deserialize_with = "empty_as_none")]
     pub path_start: Option<String>,
 }
 
@@ -185,6 +195,8 @@ async fn list_triggers(
             "wrap_body",
             "raw_string",
             "script_path",
+            "summary",
+            "description",
             "is_flow",
             "http_method",
             "edited_by",
@@ -239,6 +251,8 @@ async fn get_trigger(
             route_path_key,
             workspaced_route,
             script_path, 
+            summary,
+            description,
             is_flow, 
             http_method as "http_method: _", 
             edited_by, 
@@ -273,7 +287,7 @@ async fn get_trigger(
 fn validate_authentication_method(
     authentication_method: AuthenticationMethod,
     raw_string: Option<bool>,
-) -> error::Result<()> {
+) -> WindmillResult<()> {
     match (authentication_method, raw_string) {
         (AuthenticationMethod::CustomScript, raw) if !raw.unwrap_or(false) == true => {
             return Err(Error::BadRequest(
@@ -287,57 +301,21 @@ fn validate_authentication_method(
     Ok(())
 }
 
-async fn increase_trigger_version_and_commit(mut tx: PgTransaction<'_>) -> error::Result<()> {
+async fn increase_trigger_version(tx: &mut PgConnection) -> WindmillResult<()> {
     sqlx::query!("SELECT nextval('http_trigger_version_seq')",)
-        .fetch_one(&mut *tx)
+        .fetch_one(tx)
         .await?;
 
-    tx.commit().await?;
-
     Ok(())
 }
 
-async fn create_trigger(
-    authed: ApiAuthed,
-    Extension(db): Extension<DB>,
-    Extension(user_db): Extension<UserDB>,
-    Path(w_id): Path<String>,
-    Json(ct): Json<NewTrigger>,
-) -> error::Result<(StatusCode, String)> {
-    require_admin(authed.is_admin, &authed.username)?;
-
-    if !VALID_ROUTE_PATH_RE.is_match(&ct.route_path) {
-        return Err(error::Error::BadRequest("Invalid route path".to_string()));
-    }
-
-    validate_authentication_method(ct.authentication_method, ct.raw_string)?;
-
-    // route path key is extracted from the route path to check for uniqueness
-    // it replaces /?:{key} with :key
-    // it will also remove the leading / if present, not an issue as we only allow : after slashes
-    let route_path_key = ROUTE_PATH_KEY_RE.replace_all(&ct.route_path, ":key");
-    let exists = route_path_key_exists(
-        &route_path_key,
-        &ct.http_method,
-        &w_id,
-        None,
-        ct.workspaced_route,
-        &db,
-    )
-    .await?;
-    if exists {
-        return Err(error::Error::BadRequest(
-            "A route already exists with this path".to_string(),
-        ));
-    }
-
-    if *CLOUD_HOSTED && (ct.is_static_website || ct.static_asset_config.is_some()) {
-        return Err(error::Error::BadRequest(
-            "Static website and static asset are not supported on cloud".to_string(),
-        ));
-    }
-
-    let mut tx = user_db.begin(&authed).await?;
+async fn create_trigger_inner(
+    tx: &mut PgConnection,
+    w_id: &str,
+    authed: &ApiAuthed,
+    new_http_trigger: &NewTrigger,
+    route_path_key: &str,
+) -> WindmillResult<()> {
     sqlx::query!(
         r#"
         INSERT INTO http_trigger (
@@ -350,6 +328,8 @@ async fn create_trigger(
             wrap_body,
             raw_string,
             script_path, 
+            summary,
+            description,
             is_flow, 
             is_async, 
             authentication_method, 
@@ -361,55 +341,209 @@ async fn create_trigger(
             is_static_website
         ) 
         VALUES (
-            $1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, now(), $17
+            $1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, now(), $19
         )
         "#,
         w_id,
-        ct.path,
-        ct.route_path,
+        new_http_trigger.path,
+        new_http_trigger.route_path,
         &route_path_key,
-        ct.workspaced_route,
-        ct.authentication_resource_path,
-        ct.wrap_body.unwrap_or(false),
-        ct.raw_string.unwrap_or(false),
-        ct.script_path,
-        ct.is_flow,
-        ct.is_async,
-        ct.authentication_method as _,
-        ct.http_method as _,
-        ct.static_asset_config as _,
+        new_http_trigger.workspaced_route,
+        new_http_trigger.authentication_resource_path,
+        new_http_trigger.wrap_body.unwrap_or(false),
+        new_http_trigger.raw_string.unwrap_or(false),
+        new_http_trigger.script_path,
+        new_http_trigger.summary,
+        new_http_trigger.description,
+        new_http_trigger.is_flow,
+        new_http_trigger.is_async,
+        new_http_trigger.authentication_method as _,
+        new_http_trigger.http_method as _,
+        new_http_trigger.static_asset_config as _,
         &authed.username,
         &authed.email,
-        ct.is_static_website
+        new_http_trigger.is_static_website
     )
     .execute(&mut *tx)
     .await?;
 
     audit_log(
         &mut *tx,
-        &authed,
+        authed,
         "http_triggers.create",
         ActionKind::Create,
         &w_id,
-        Some(ct.path.as_str()),
+        Some(new_http_trigger.path.as_str()),
         None,
     )
     .await?;
 
-    increase_trigger_version_and_commit(tx).await?;
+    increase_trigger_version(tx).await?;
+
+    Ok(())
+}
+
+fn check_no_duplicates<'trigger>(
+    new_http_triggers: &[NewTrigger],
+    route_path_key: &[Cow<'trigger, str>],
+) -> Result<(), Error> {
+    let mut seen = HashSet::with_capacity(new_http_triggers.len());
+
+    for (i, trigger) in new_http_triggers.iter().enumerate() {
+        if !seen.insert((
+            &route_path_key[i],
+            trigger.http_method,
+            trigger.workspaced_route,
+        )) {
+            return Err(Error::BadRequest(format!(
+            "Duplicate HTTP route detected: '{}'. Each HTTP route must have a unique 'route_path'.",
+            &trigger.route_path
+        )));
+        }
+    }
+
+    Ok(())
+}
+
+async fn create_many_http_trigger(
+    authed: ApiAuthed,
+    Extension(db): Extension<DB>,
+    Extension(user_db): Extension<UserDB>,
+    Path(w_id): Path<String>,
+    Json(new_http_triggers): Json<Vec<NewTrigger>>,
+) -> WindmillResult<(StatusCode, String)> {
+    require_admin(authed.is_admin, &authed.username)?;
+
+    let error_wrapper = |path: &str, error: Error| -> Error {
+        anyhow!(
+            "Error occurred for HTTP route at route path: {}, error: {}",
+            path,
+            error
+        )
+        .into()
+    };
+
+    let mut route_path_keys = Vec::with_capacity(new_http_triggers.len());
+
+    for new_http_trigger in new_http_triggers.iter() {
+        let route_path_key = validate_http_trigger(&db, &w_id, new_http_trigger)
+            .await
+            .map_err(|err| error_wrapper(&new_http_trigger.route_path, err))?;
+
+        route_path_keys.push(route_path_key);
+    }
+
+    check_no_duplicates(&new_http_triggers, &route_path_keys)?;
+
+    let mut tx = user_db.begin(&authed).await?;
+
+    for (i, new_http_trigger) in new_http_triggers.iter().enumerate() {
+        create_trigger_inner(
+            &mut tx,
+            &w_id,
+            &authed,
+            new_http_trigger,
+            &route_path_keys[i],
+        )
+        .await
+        .map_err(|err| error_wrapper(&new_http_trigger.route_path, err))?;
+    }
+
+    tx.commit().await?;
+
+    for http_trigger in new_http_triggers.into_iter() {
+        handle_deployment_metadata(
+            &authed.email,
+            &authed.username,
+            &db,
+            &w_id,
+            windmill_git_sync::DeployedObject::HttpTrigger { path: http_trigger.path.clone() },
+            Some(format!("HTTP route '{}' created", http_trigger.path)),
+            true,
+        )
+        .await?;
+    }
+
+    Ok((StatusCode::CREATED, format!("Created all HTTP routes")))
+}
+
+async fn validate_http_trigger<'trigger>(
+    db: &DB,
+    w_id: &str,
+    new_http_trigger: &'trigger NewTrigger,
+) -> WindmillResult<Cow<'trigger, str>> {
+    if !VALID_ROUTE_PATH_RE.is_match(&new_http_trigger.route_path) {
+        return Err(error::Error::BadRequest("Invalid route path".to_string()));
+    }
+
+    validate_authentication_method(
+        new_http_trigger.authentication_method,
+        new_http_trigger.raw_string,
+    )?;
+
+    // route path key is extracted from the route path to check for uniqueness
+    // it replaces /?:{key} with :key
+    // it will also remove the leading / if present, not an issue as we only allow : after slashes
+    let route_path_key = ROUTE_PATH_KEY_RE.replace_all(&new_http_trigger.route_path, ":key");
+
+    let exists = route_path_key_exists(
+        &route_path_key,
+        &new_http_trigger.http_method,
+        &w_id,
+        None,
+        new_http_trigger.workspaced_route,
+        db,
+    )
+    .await?;
+
+    if exists {
+        return Err(error::Error::BadRequest(
+            "A route already exists with this path".to_string(),
+        ));
+    }
+
+    if *CLOUD_HOSTED
+        && (new_http_trigger.is_static_website || new_http_trigger.static_asset_config.is_some())
+    {
+        return Err(error::Error::BadRequest(
+            "Static website and static asset are not supported on cloud".to_string(),
+        ));
+    }
+
+    Ok(route_path_key)
+}
+
+async fn create_trigger(
+    authed: ApiAuthed,
+    Extension(db): Extension<DB>,
+    Extension(user_db): Extension<UserDB>,
+    Path(w_id): Path<String>,
+    Json(new_http_trigger): Json<NewTrigger>,
+) -> WindmillResult<(StatusCode, String)> {
+    require_admin(authed.is_admin, &authed.username)?;
+
+    let route_path_key = validate_http_trigger(&db, &w_id, &new_http_trigger).await?;
+
+    let mut tx = user_db.begin(&authed).await?;
+
+    let http_trigger_path = new_http_trigger.path.clone();
+
+    create_trigger_inner(&mut tx, &w_id, &authed, &new_http_trigger, &route_path_key).await?;
+
+    tx.commit().await?;
 
     handle_deployment_metadata(
         &authed.email,
         &authed.username,
         &db,
         &w_id,
-        windmill_git_sync::DeployedObject::HttpTrigger { path: ct.path.clone() },
-        Some(format!("HTTP trigger '{}' created", ct.path)),
+        windmill_git_sync::DeployedObject::HttpTrigger { path: new_http_trigger.path.clone() },
+        Some(format!("HTTP route '{}' created", new_http_trigger.path)),
         true,
     )
     .await?;
 
-    Ok((StatusCode::CREATED, format!("{}", ct.path)))
+    Ok((StatusCode::CREATED, format!("{}", http_trigger_path)))
 }
 
 async fn update_trigger(
@@ -418,8 +552,9 @@ async fn update_trigger(
     Extension(db): Extension<DB>,
     Path((w_id, path)): Path<(String, StripPath)>,
     Json(ct): Json<EditTrigger>,
-) -> error::Result<String> {
+) -> WindmillResult<String> {
     let path = path.to_path();
+
     if *CLOUD_HOSTED && (ct.is_static_website || ct.static_asset_config.is_some()) {
         return Err(error::Error::BadRequest(
             "Static website and static asset are not supported on cloud".to_string(),
@@ -478,11 +613,13 @@ async fn update_trigger(
                 email = $13, 
                 is_async = $14, 
                 authentication_method = $15, 
+                summary = $16,
+                description = $17,
                 edited_at = now(), 
-                is_static_website = $16
+                is_static_website = $18
             WHERE 
-                workspace_id = $17 AND 
-                path = $18
+                workspace_id = $19 AND 
+                path = $20
             "#,
             route_path,
             &route_path_key,
@@ -499,6 +636,8 @@ async fn update_trigger(
             &authed.email,
             ct.is_async,
             ct.authentication_method as _,
+            ct.summary,
+            ct.description,
             ct.is_static_website,
             w_id,
             path,
@@ -563,7 +702,9 @@ async fn update_trigger(
     )
     .await?;
 
-    increase_trigger_version_and_commit(tx).await?;
+    increase_trigger_version(&mut tx).await?;
+
+    tx.commit().await?;
 
     handle_deployment_metadata(
         &authed.email,
@@ -571,7 +712,7 @@ async fn update_trigger(
         &db,
         &w_id,
         windmill_git_sync::DeployedObject::HttpTrigger { path: ct.path.clone() },
-        Some(format!("HTTP trigger '{}' updated", ct.path)),
+        Some(format!("HTTP route '{}' updated", ct.path)),
         true,
     )
     .await?;
@@ -584,7 +725,7 @@ async fn delete_trigger(
     Extension(db): Extension<DB>,
     Extension(user_db): Extension<UserDB>,
     Path((w_id, path)): Path<(String, StripPath)>,
-) -> error::Result<String> {
+) -> WindmillResult<String> {
     require_admin(authed.is_admin, &authed.username)?;
     let path = path.to_path();
     let mut tx = user_db.begin(&authed).await?;
@@ -609,7 +750,9 @@ async fn delete_trigger(
     )
     .await?;
 
-    increase_trigger_version_and_commit(tx).await?;
+    increase_trigger_version(&mut tx).await?;
+
+    tx.commit().await?;
 
     handle_deployment_metadata(
         &authed.email,
@@ -617,12 +760,12 @@ async fn delete_trigger(
         &db,
         &w_id,
         windmill_git_sync::DeployedObject::HttpTrigger { path: path.to_string() },
-        Some(format!("HTTP trigger '{}' deleted", path)),
+        Some(format!("HTTP route '{}' deleted", path)),
         true,
     )
     .await?;
 
-    Ok(format!("HTTP trigger {path} deleted"))
+    Ok(format!("HTTP route {path} deleted"))
 }
 
 async fn exists_trigger(
@@ -660,7 +803,7 @@ async fn route_path_key_exists(
     trigger_path: Option<&str>,
     workspaced_route: Option<bool>,
     db: &DB,
-) -> error::Result<bool> {
+) -> WindmillResult<bool> {
     let exists = if *CLOUD_HOSTED {
         sqlx::query_scalar!(
             r#"
@@ -861,7 +1004,7 @@ pub async fn refresh_routers(db: &DB) -> Result<(bool, RwLockReadGuard<'_, Route
                         .insert(format!("{}/*wm_subpath", full_path), trigger.clone())
                         .unwrap_or_else(|e| {
                             tracing::warn!(
-                                "Failed to consider http trigger route {}/*wm_subpath: {:?}",
+                                "Failed to consider HTTP route {}/*wm_subpath: {:?}",
                                 full_path,
                                 e,
                             );
@@ -870,11 +1013,7 @@ pub async fn refresh_routers(db: &DB) -> Result<(bool, RwLockReadGuard<'_, Route
                 router
                     .insert(full_path.clone(), trigger.clone())
                     .unwrap_or_else(|e| {
-                        tracing::warn!(
-                            "Failed to consider http trigger route {}: {:?}",
-                            full_path,
-                            e,
-                        );
+                        tracing::warn!("Failed to consider HTTP route {}: {:?}", full_path, e,);
                     });
             }
 
@@ -898,7 +1037,7 @@ async fn get_http_route_trigger(
     db: &DB,
     user_db: UserDB,
     method: &http::Method,
-) -> error::Result<(TriggerRoute, String, HashMap<String, String>, ApiAuthed)> {
+) -> WindmillResult<(TriggerRoute, String, HashMap<String, String>, ApiAuthed)> {
     let http_method: HttpMethod = method.try_into()?;
 
     let requested_path = format!("/{}", route_path);
@@ -947,11 +1086,11 @@ async fn get_http_route_trigger(
             );
             let exists = match HTTP_ACCESS_CACHE.get(&cache_key) {
                 Some(cache_entry) if cache_entry.expiry > std::time::Instant::now() => {
-                    tracing::debug!("HTTP access cache hit for trigger {}", trigger.path);
+                    tracing::debug!("HTTP access cache hit for route {}", trigger.path);
                     true
                 }
                 _ => {
-                    tracing::debug!("HTTP access cache miss for trigger {}", trigger.path);
+                    tracing::debug!("HTTP access cache miss for route {}", trigger.path);
                     let mut tx = user_db.begin(&authed).await?;
                     let exists = sqlx::query_scalar!(
                         r#"
@@ -1002,7 +1141,7 @@ async fn get_http_route_trigger(
         trigger.email.clone(),
         &trigger.workspace_id,
         &db,
-        Some(username_override.unwrap_or(format!("http-{}", trigger.path))),
+        Some(username_override.unwrap_or(format!("HTTP-{}", trigger.path))),
     )
     .await?;
 
@@ -1030,6 +1169,14 @@ async fn route_job(
     .await
     .map_err(|e| e.into_response())?;
 
+    if trigger.script_path.is_empty() && trigger.static_asset_config.is_none() {
+        return Err(Error::NotFound(format!(
+            "Runnable path of HTTP route at path: {}",
+            trigger.path
+        ))
+        .into_response());
+    }
+
     let args = args
         .process_args(
             &authed,
@@ -1066,15 +1213,15 @@ async fn route_job(
 
             let authentication_method = match HTTP_AUTH_CACHE.get(&cache_key) {
                 Some(cache_entry) if cache_entry.expiry > std::time::Instant::now() => {
-                    tracing::debug!("HTTP auth method cache hit for trigger {}", trigger.path);
+                    tracing::debug!("HTTP auth method cache hit for route {}", trigger.path);
                     cache_entry.value
                 }
                 _ => {
-                    tracing::debug!("HTTP auth method cache miss for trigger {}", trigger.path);
+                    tracing::debug!("HTTP auth method cache miss for route {}", trigger.path);
                     let auth_method = try_get_resource_from_db_as::<
                         crate::http_trigger_auth::AuthenticationMethod,
                     >(
-                        authed.clone(),
+                        &authed,
                         Some(user_db.clone()),
                         &db,
                         &resource_path,
diff --git a/backend/windmill-api/src/indexer_ee.rs b/backend/windmill-api/src/indexer_ee.rs
deleted file mode 100644
index 2ccca92c27..0000000000
--- a/backend/windmill-api/src/indexer_ee.rs
+++ /dev/null
@@ -1,9 +0,0 @@
-use axum::Router;
-
-pub fn workspaced_service() -> Router {
-    Router::new()
-}
-
-pub fn global_service() -> Router {
-    Router::new()
-}
diff --git a/backend/windmill-api/src/indexer_oss.rs b/backend/windmill-api/src/indexer_oss.rs
new file mode 100644
index 0000000000..eee87acdcb
--- /dev/null
+++ b/backend/windmill-api/src/indexer_oss.rs
@@ -0,0 +1,16 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::indexer_ee::*;
+
+#[cfg(not(feature = "private"))]
+use axum::Router;
+
+#[cfg(not(feature = "private"))]
+pub fn workspaced_service() -> Router {
+    Router::new()
+}
+
+#[cfg(not(feature = "private"))]
+pub fn global_service() -> Router {
+    Router::new()
+}
diff --git a/backend/windmill-api/src/inkeep_oss.rs b/backend/windmill-api/src/inkeep_oss.rs
new file mode 100644
index 0000000000..ca1ffebd21
--- /dev/null
+++ b/backend/windmill-api/src/inkeep_oss.rs
@@ -0,0 +1,11 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::inkeep_ee::*;
+
+#[cfg(not(feature = "private"))]
+use axum::Router;
+
+#[cfg(not(feature = "private"))]
+pub fn global_service() -> Router {
+    Router::new()
+}
diff --git a/backend/windmill-api/src/job_helpers_ee.rs b/backend/windmill-api/src/job_helpers_oss.rs
similarity index 70%
rename from backend/windmill-api/src/job_helpers_ee.rs
rename to backend/windmill-api/src/job_helpers_oss.rs
index 4e14d16c5f..53d4a796a1 100644
--- a/backend/windmill-api/src/job_helpers_ee.rs
+++ b/backend/windmill-api/src/job_helpers_oss.rs
@@ -1,34 +1,45 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::job_helpers_ee::*;
+
+#[cfg(not(feature = "private"))]
 use axum::Router;
+#[cfg(not(feature = "private"))]
 use serde::Serialize;
+#[cfg(not(feature = "private"))]
 use uuid::Uuid;
+#[cfg(not(feature = "private"))]
 use windmill_common::s3_helpers::StorageResourceType;
 
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 use crate::db::{ApiAuthed, DB};
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 use object_store::{ObjectStore, PutMultipartOpts};
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 use std::sync::Arc;
+#[cfg(not(feature = "private"))]
 use windmill_common::error;
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 use windmill_common::{db::UserDB, s3_helpers::ObjectStoreResource};
 
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 use bytes::Bytes;
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 use futures::Stream;
 
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 use axum::response::Response;
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 use serde::Deserialize;
 
 #[derive(Serialize)]
+#[cfg(not(feature = "private"))]
 pub struct UploadFileResponse {
     pub file_key: String,
 }
 
 #[derive(Deserialize)]
+#[cfg(not(feature = "private"))]
 pub struct LoadImagePreviewQuery {
     #[allow(dead_code)]
     pub file_key: String,
@@ -37,6 +48,7 @@ pub struct LoadImagePreviewQuery {
 }
 
 #[derive(Deserialize)]
+#[cfg(not(feature = "private"))]
 pub struct DownloadFileQuery {
     #[allow(dead_code)]
     pub file_key: String,
@@ -46,11 +58,12 @@ pub struct DownloadFileQuery {
     pub s3_resource_path: Option<String>,
 }
 
+#[cfg(not(feature = "private"))]
 pub fn workspaced_service() -> Router {
     Router::new()
 }
 
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 pub async fn get_workspace_s3_resource<'c>(
     _authed: &ApiAuthed,
     _db: &DB,
@@ -63,10 +76,12 @@ pub async fn get_workspace_s3_resource<'c>(
     Ok((None, None))
 }
 
+#[cfg(not(feature = "private"))]
 pub fn get_random_file_name(_file_extension: Option<String>) -> String {
     unimplemented!("Not implemented in Windmill's Open Source repository")
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn get_s3_resource<'c>(
     _authed: &ApiAuthed,
     _db: &DB,
@@ -82,7 +97,7 @@ pub async fn get_s3_resource<'c>(
     ))
 }
 
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 pub async fn upload_file_from_req(
     _s3_client: Arc<dyn ObjectStore>,
     _file_key: &str,
@@ -94,7 +109,7 @@ pub async fn upload_file_from_req(
     ))
 }
 
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 pub async fn upload_file_internal(
     _s3_client: Arc<dyn ObjectStore>,
     _file_key: &str,
@@ -106,7 +121,7 @@ pub async fn upload_file_internal(
     ))
 }
 
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 pub async fn download_s3_file_internal(
     _authed: ApiAuthed,
     _db: &DB,
diff --git a/backend/windmill-api/src/jobs.rs b/backend/windmill-api/src/jobs.rs
index cf9e7d06de..8b0b5e5e76 100644
--- a/backend/windmill-api/src/jobs.rs
+++ b/backend/windmill-api/src/jobs.rs
@@ -26,6 +26,7 @@ use tokio::io::AsyncReadExt;
 #[cfg(feature = "prometheus")]
 use tokio::time::Instant;
 use tower::ServiceBuilder;
+use windmill_common::auth::is_super_admin_email;
 use windmill_common::error::JsonResult;
 use windmill_common::flow_status::{JobResult, RestartedFrom};
 use windmill_common::jobs::{format_completed_job_result, format_result, ENTRYPOINT_OVERRIDE};
@@ -64,7 +65,7 @@ use sqlx::types::JsonRawValue;
 use sqlx::{types::Uuid, FromRow, Postgres, Transaction};
 use tower_http::cors::{Any, CorsLayer};
 use urlencoding::encode;
-use windmill_audit::audit_ee::{audit_log, AuditAuthor};
+use windmill_audit::audit_oss::{audit_log, AuditAuthor};
 use windmill_audit::ActionKind;
 use windmill_common::worker::{to_raw_value, CUSTOM_TAGS_PER_WORKSPACE};
 use windmill_common::{
@@ -3140,28 +3141,27 @@ pub fn add_raw_string(
 }
 
 async fn check_tag_available_for_workspace(
+    db: &DB,
     w_id: &str,
     tag: &Option<String>,
     authed: &ApiAuthed,
 ) -> error::Result<()> {
     if let Some(tag) = tag {
-        if tag == "" {
+        if tag.is_empty() {
             return Ok(());
         }
 
         let tags = get_scope_tags(authed);
+        let mut is_tag_available_in_workspace = None;
+        let mut is_tag_in_workspace_custom_tags = false;
 
-        if let Some(tags) = tags {
-            if !tags.contains(&tag.as_str()) {
-                return Err(Error::BadRequest(format!(
-                    "Tag {tag} is not available in your scope"
-                )));
-            }
+        if let Some(tags) = tags.as_ref() {
+            is_tag_available_in_workspace = Some(tags.contains(&tag.as_str()));
         }
 
         let custom_tags_per_w = CUSTOM_TAGS_PER_WORKSPACE.read().await;
         if custom_tags_per_w.0.contains(&tag.to_string()) {
-            Ok(())
+            is_tag_in_workspace_custom_tags = true;
         } else if custom_tags_per_w.1.contains_key(tag)
             && custom_tags_per_w
                 .1
@@ -3169,21 +3169,38 @@ async fn check_tag_available_for_workspace(
                 .unwrap()
                 .contains(&w_id.to_string())
         {
-            Ok(())
-        } else {
+            is_tag_in_workspace_custom_tags = true;
+        }
+
+        match is_tag_available_in_workspace {
+            Some(true) | None => {
+                if is_tag_in_workspace_custom_tags {
+                    return Ok(());
+                }
+            }
+            _ => {}
+        }
+
+        if !is_super_admin_email(db, &authed.email).await? {
+            if tags.is_some() && is_tag_available_in_workspace.is_some() {
+                return Err(Error::BadRequest(format!(
+                    "Tag {tag} is not available in your scope"
+                )));
+            }
+
             return Err(error::Error::BadRequest(format!(
-                "Tag {tag} cannot be used on workspace {w_id}: (CUSTOM_TAGS: {:?})",
+                "Only super admins are allowed to use tags that are not included in the allowed CUSTOM_TAGS: {:?}",
                 custom_tags_per_w
             )));
         }
-    } else {
-        Ok(())
     }
+
+    return Ok(());
 }
 
 #[cfg(feature = "enterprise")]
 pub async fn check_license_key_valid() -> error::Result<()> {
-    use windmill_common::ee::LICENSE_KEY_VALID;
+    use windmill_common::ee_oss::LICENSE_KEY_VALID;
 
     let valid = *LICENSE_KEY_VALID.read().await;
     if !valid {
@@ -3509,7 +3526,7 @@ pub async fn run_flow_by_path_inner(
 
     let tag = run_query.tag.clone().or(tag);
 
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
     let scheduled_for = run_query.get_scheduled_for(&db).await?;
 
     let (email, permissioned_as, push_authed, tx) =
@@ -3701,7 +3718,7 @@ pub async fn run_script_by_path_inner(
     let scheduled_for = run_query.get_scheduled_for(&db).await?;
 
     let tag = run_query.tag.clone().or(tag);
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
 
     let (email, permissioned_as, push_authed, tx) =
         if let Some(on_behalf_of) = on_behalf_of.as_ref() {
@@ -3772,7 +3789,7 @@ pub async fn run_workflow_as_code(
 
     #[cfg(feature = "enterprise")]
     check_license_key_valid().await?;
-    check_tag_available_for_workspace(&w_id, &run_query.tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &run_query.tag, &authed).await?;
 
     if *CLOUD_HOSTED {
         tracing::info!("workflow_as_code_tracing id {i} ");
@@ -4369,7 +4386,7 @@ pub async fn run_wait_result_job_by_path_get(
     drop(tx);
 
     let tag = run_query.tag.clone().or(tag);
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
 
     let (email, permissioned_as, push_authed, tx) =
         if let Some(on_behalf_of) = on_behalf_authed.as_ref() {
@@ -4509,7 +4526,7 @@ pub async fn run_wait_result_script_by_path_internal(
     drop(tx);
 
     let tag = run_query.tag.clone().or(tag);
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
 
     let (email, permissioned_as, push_authed, tx) =
         if let Some(on_behalf_of) = on_behalf_of.as_ref() {
@@ -4610,7 +4627,7 @@ pub async fn run_wait_result_script_by_hash(
     check_scopes(&authed, || format!("run:script/{path}"))?;
 
     let tag = run_query.tag.clone().or(tag);
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
 
     let (email, permissioned_as, push_authed, tx) = if let Some(email) = on_behalf_of_email.as_ref()
     {
@@ -4730,7 +4747,7 @@ pub async fn run_wait_result_flow_by_path_internal(
     drop(tx);
 
     let tag = run_query.tag.clone().or(tag);
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
 
     let (email, permissioned_as, push_authed, tx) =
         if let Some(on_behalf_of_email) = on_behalf_of_email.as_ref() {
@@ -4804,7 +4821,7 @@ async fn run_preview_script(
     }
     let scheduled_for = run_query.get_scheduled_for(&db).await?;
     let tag = run_query.tag.clone().or(preview.tag.clone());
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
     let tx = PushIsolationLevel::Isolated(user_db.clone(), authed.clone().into());
 
     let (uuid, tx) = push(
@@ -4886,7 +4903,7 @@ async fn run_bundle_preview_script(
 
             let scheduled_for = run_query.get_scheduled_for(&db).await?;
             let tag = run_query.tag.clone().or(preview.tag.clone());
-            check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+            check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
             let ltx = PushIsolationLevel::Isolated(user_db.clone(), authed.clone().into());
 
             let args = preview.args.unwrap_or_default();
@@ -5470,7 +5487,7 @@ async fn run_preview_flow_job(
     }
     let scheduled_for = run_query.get_scheduled_for(&db).await?;
     let tag = run_query.tag.clone().or(raw_flow.tag.clone());
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
     let tx = PushIsolationLevel::Isolated(user_db.clone(), authed.clone().into());
 
     let (uuid, tx) = push(
@@ -5565,7 +5582,7 @@ pub async fn run_job_by_hash_inner(
     let scheduled_for = run_query.get_scheduled_for(&db).await?;
     let tag = run_query.tag.clone().or(tag);
 
-    check_tag_available_for_workspace(&w_id, &tag, &authed).await?;
+    check_tag_available_for_workspace(&db, &w_id, &tag, &authed).await?;
 
     let (email, permissioned_as, push_authed, tx) = if let Some(email) = on_behalf_of_email.as_ref()
     {
diff --git a/backend/windmill-api/src/kafka_triggers_ee.rs b/backend/windmill-api/src/kafka_triggers_oss.rs
similarity index 76%
rename from backend/windmill-api/src/kafka_triggers_ee.rs
rename to backend/windmill-api/src/kafka_triggers_oss.rs
index 0a24151ae3..9d698e2fbf 100644
--- a/backend/windmill-api/src/kafka_triggers_ee.rs
+++ b/backend/windmill-api/src/kafka_triggers_oss.rs
@@ -1,14 +1,24 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::kafka_triggers_ee::*;
+
+#[cfg(not(feature = "private"))]
 use crate::db::DB;
+#[cfg(not(feature = "private"))]
 use axum::Router;
+#[cfg(not(feature = "private"))]
 use serde::{Deserialize, Serialize};
 
 #[derive(Serialize, Deserialize)]
+#[cfg(not(feature = "private"))]
 pub struct KafkaResourceSecurity {}
 
+#[cfg(not(feature = "private"))]
 pub fn workspaced_service() -> Router {
     Router::new()
 }
 
+#[cfg(not(feature = "private"))]
 pub fn start_kafka_consumers(
     _db: DB,
     mut _killpill_rx: tokio::sync::broadcast::Receiver<()>,
@@ -17,9 +27,11 @@ pub fn start_kafka_consumers(
 }
 
 #[derive(Serialize, Deserialize)]
+#[cfg(not(feature = "private"))]
 pub enum KafkaTriggerConfigConnection {}
 
 #[derive(Serialize, Clone)]
+#[cfg(not(feature = "private"))]
 pub struct KafkaTrigger {
     pub workspace_id: String,
     pub path: String,
@@ -39,4 +51,4 @@ pub struct KafkaTrigger {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub error: Option<String>,
     pub enabled: bool,
-}
\ No newline at end of file
+}
diff --git a/backend/windmill-api/src/lib.rs b/backend/windmill-api/src/lib.rs
index d79639f0ab..a415803339 100644
--- a/backend/windmill-api/src/lib.rs
+++ b/backend/windmill-api/src/lib.rs
@@ -8,27 +8,29 @@
 
 use crate::db::ApiAuthed;
 #[cfg(feature = "enterprise")]
-use crate::ee::ExternalJwks;
+use crate::ee_oss::ExternalJwks;
 #[cfg(feature = "embedding")]
 use crate::embeddings::load_embeddings_db;
 #[cfg(feature = "oauth2")]
-use crate::oauth2_ee::AllClients;
+use crate::oauth2_oss::AllClients;
 #[cfg(feature = "oauth2")]
-use crate::oauth2_ee::SlackVerifier;
+use crate::oauth2_oss::SlackVerifier;
 #[cfg(feature = "smtp")]
-use crate::smtp_server_ee::SmtpServer;
+use crate::smtp_server_oss::SmtpServer;
 
 #[cfg(feature = "mcp")]
-use crate::mcp::{setup_mcp_server, Runner as McpRunner};
+use crate::mcp::{extract_and_store_workspace_id, setup_mcp_server, shutdown_mcp_server};
+#[cfg(feature = "mcp")]
+use rmcp::transport::streamable_http_server::session::local::LocalSessionManager;
+
 use crate::tracing_init::MyOnFailure;
 use crate::{
     tracing_init::{MyMakeSpan, MyOnResponse},
     users::OptAuthed,
     webhook_util::WebhookShared,
 };
-
 #[cfg(feature = "agent_worker_server")]
-use agent_workers_ee::AgentCache;
+use agent_workers_oss::AgentCache;
 
 use anyhow::Context;
 use argon2::Argon2;
@@ -58,22 +60,26 @@ use windmill_common::db::UserDB;
 use windmill_common::worker::CLOUD_HOSTED;
 use windmill_common::{utils::GIT_VERSION, BASE_URL, INSTANCE_NAME};
 
-use crate::scim_ee::has_scim_token;
+use crate::scim_oss::has_scim_token;
 use windmill_common::error::AppError;
 
+#[cfg(all(feature = "agent_worker_server", feature = "private"))]
+pub mod agent_workers_ee;
 #[cfg(feature = "agent_worker_server")]
-mod agent_workers_ee;
+mod agent_workers_oss;
 mod ai;
 mod apps;
 pub mod args;
 mod audit;
-mod auth;
+pub mod auth;
 mod capture;
 mod concurrency_groups;
 mod configs;
 mod db;
 mod drafts;
+#[cfg(feature = "private")]
 pub mod ee;
+pub mod ee_oss;
 pub mod embeddings;
 mod favorite;
 mod flows;
@@ -86,56 +92,95 @@ mod http_trigger_args;
 mod http_trigger_auth;
 #[cfg(feature = "http_trigger")]
 pub mod http_triggers;
-mod indexer_ee;
+#[cfg(feature = "private")]
+pub mod indexer_ee;
+mod indexer_oss;
+#[cfg(feature = "private")]
+mod inkeep_ee;
+mod inkeep_oss;
 mod inputs;
 mod integration;
 #[cfg(feature = "postgres_trigger")]
 mod postgres_triggers;
 
+pub mod openapi;
+
 mod approvals;
+#[cfg(all(feature = "enterprise", feature = "private"))]
+pub mod apps_ee;
 #[cfg(feature = "enterprise")]
-mod apps_ee;
+mod apps_oss;
+#[cfg(all(feature = "enterprise", feature = "gcp_trigger", feature = "private"))]
+pub mod gcp_triggers_ee;
 #[cfg(all(feature = "enterprise", feature = "gcp_trigger"))]
-mod gcp_triggers_ee;
+mod gcp_triggers_oss;
+#[cfg(all(feature = "enterprise", feature = "private"))]
+pub mod git_sync_ee;
 #[cfg(feature = "enterprise")]
-mod git_sync_ee;
+mod git_sync_oss;
+#[cfg(all(feature = "parquet", feature = "private"))]
+pub mod job_helpers_ee;
 #[cfg(feature = "parquet")]
-mod job_helpers_ee;
+mod job_helpers_oss;
 pub mod job_metrics;
 pub mod jobs;
+#[cfg(all(feature = "enterprise", feature = "kafka", feature = "private"))]
+pub mod kafka_triggers_ee;
 #[cfg(all(feature = "enterprise", feature = "kafka"))]
-mod kafka_triggers_ee;
+mod kafka_triggers_oss;
 #[cfg(feature = "mqtt_trigger")]
 mod mqtt_triggers;
+#[cfg(all(feature = "enterprise", feature = "nats", feature = "private"))]
+pub mod nats_triggers_ee;
 #[cfg(all(feature = "enterprise", feature = "nats"))]
-mod nats_triggers_ee;
-#[cfg(feature = "oauth2")]
+mod nats_triggers_oss;
+#[cfg(all(feature = "oauth2", feature = "private"))]
 pub mod oauth2_ee;
-mod oidc_ee;
+#[cfg(feature = "oauth2")]
+pub mod oauth2_oss;
+#[cfg(feature = "private")]
+pub mod oidc_ee;
+mod oidc_oss;
 mod raw_apps;
 mod resources;
-mod saml_ee;
+#[cfg(feature = "private")]
+pub mod saml_ee;
+mod saml_oss;
 mod schedule;
-mod scim_ee;
+#[cfg(feature = "private")]
+pub mod scim_ee;
+mod scim_oss;
 mod scripts;
 mod service_logs;
 mod settings;
 mod slack_approvals;
+#[cfg(all(feature = "smtp", feature = "private"))]
+pub mod smtp_server_ee;
 #[cfg(feature = "smtp")]
-mod smtp_server_ee;
+mod smtp_server_oss;
+#[cfg(all(feature = "enterprise", feature = "sqs_trigger", feature = "private"))]
+pub mod sqs_triggers_ee;
 #[cfg(all(feature = "enterprise", feature = "sqs_trigger"))]
-mod sqs_triggers_ee;
-mod teams_approvals_ee;
+mod sqs_triggers_oss;
+#[cfg(feature = "private")]
+pub mod teams_approvals_ee;
+mod teams_approvals_oss;
 mod trigger_helpers;
 
 mod static_assets;
+#[cfg(all(feature = "stripe", feature = "enterprise", feature = "private"))]
+pub mod stripe_ee;
 #[cfg(all(feature = "stripe", feature = "enterprise"))]
-mod stripe_ee;
-mod teams_ee;
+mod stripe_oss;
+#[cfg(feature = "private")]
+pub mod teams_ee;
+mod teams_oss;
 mod tracing_init;
 mod triggers;
 mod users;
-mod users_ee;
+#[cfg(feature = "private")]
+pub mod users_ee;
+mod users_oss;
 mod utils;
 mod variables;
 pub mod webhook_util;
@@ -143,9 +188,11 @@ pub mod webhook_util;
 mod websocket_triggers;
 mod workers;
 mod workspaces;
-mod workspaces_ee;
+#[cfg(feature = "private")]
+pub mod workspaces_ee;
 mod workspaces_export;
 mod workspaces_extra;
+mod workspaces_oss;
 
 #[cfg(feature = "mcp")]
 mod mcp;
@@ -218,9 +265,9 @@ type IndexReader = ();
 type ServiceLogIndexReader = ();
 
 #[cfg(feature = "tantivy")]
-type IndexReader = windmill_indexer::completed_runs_ee::IndexReader;
+type IndexReader = windmill_indexer::completed_runs_oss::IndexReader;
 #[cfg(feature = "tantivy")]
-type ServiceLogIndexReader = windmill_indexer::service_logs_ee::ServiceLogIndexReader;
+type ServiceLogIndexReader = windmill_indexer::service_logs_oss::ServiceLogIndexReader;
 
 pub async fn run_server(
     db: DB,
@@ -278,7 +325,7 @@ pub async fn run_server(
         .allow_headers([http::header::CONTENT_TYPE, http::header::AUTHORIZATION])
         .allow_origin(Any);
 
-    let sp_extension = Arc::new(saml_ee::build_sp_extension().await?);
+    let sp_extension = Arc::new(saml_oss::build_sp_extension().await?);
 
     if server_mode {
         #[cfg(feature = "embedding")]
@@ -317,7 +364,7 @@ pub async fn run_server(
     let job_helpers_service = {
         #[cfg(feature = "parquet")]
         {
-            job_helpers_ee::workspaced_service()
+            job_helpers_oss::workspaced_service()
         }
 
         #[cfg(not(feature = "parquet"))]
@@ -329,7 +376,7 @@ pub async fn run_server(
     let kafka_triggers_service = {
         #[cfg(all(feature = "enterprise", feature = "kafka"))]
         {
-            kafka_triggers_ee::workspaced_service()
+            kafka_triggers_oss::workspaced_service()
         }
 
         #[cfg(not(all(feature = "enterprise", feature = "kafka")))]
@@ -341,7 +388,7 @@ pub async fn run_server(
     let nats_triggers_service = {
         #[cfg(all(feature = "enterprise", feature = "nats"))]
         {
-            nats_triggers_ee::workspaced_service()
+            nats_triggers_oss::workspaced_service()
         }
 
         #[cfg(not(all(feature = "enterprise", feature = "nats")))]
@@ -365,7 +412,7 @@ pub async fn run_server(
     let gcp_triggers_service = {
         #[cfg(all(feature = "enterprise", feature = "gcp_trigger"))]
         {
-            gcp_triggers_ee::workspaced_service()
+            gcp_triggers_oss::workspaced_service()
         }
 
         #[cfg(not(all(feature = "enterprise", feature = "gcp_trigger")))]
@@ -377,7 +424,7 @@ pub async fn run_server(
     let sqs_triggers_service = {
         #[cfg(all(feature = "enterprise", feature = "sqs_trigger"))]
         {
-            sqs_triggers_ee::workspaced_service()
+            sqs_triggers_oss::workspaced_service()
         }
 
         #[cfg(not(all(feature = "enterprise", feature = "sqs_trigger")))]
@@ -432,13 +479,13 @@ pub async fn run_server(
         #[cfg(all(feature = "enterprise", feature = "kafka"))]
         {
             let kafka_killpill_rx = killpill_rx.resubscribe();
-            kafka_triggers_ee::start_kafka_consumers(db.clone(), kafka_killpill_rx);
+            kafka_triggers_oss::start_kafka_consumers(db.clone(), kafka_killpill_rx);
         }
 
         #[cfg(all(feature = "enterprise", feature = "nats"))]
         {
             let nats_killpill_rx = killpill_rx.resubscribe();
-            nats_triggers_ee::start_nats_consumers(db.clone(), nats_killpill_rx);
+            nats_triggers_oss::start_nats_consumers(db.clone(), nats_killpill_rx);
         }
 
         #[cfg(feature = "postgres_trigger")]
@@ -456,13 +503,13 @@ pub async fn run_server(
         #[cfg(all(feature = "enterprise", feature = "sqs_trigger"))]
         {
             let sqs_killpill_rx = killpill_rx.resubscribe();
-            sqs_triggers_ee::start_sqs(db.clone(), sqs_killpill_rx);
+            sqs_triggers_oss::start_sqs(db.clone(), sqs_killpill_rx);
         }
 
         #[cfg(all(feature = "enterprise", feature = "gcp_trigger"))]
         {
             let gcp_killpill_rx = killpill_rx.resubscribe();
-            gcp_triggers_ee::start_consuming_gcp_pubsub_event(db.clone(), gcp_killpill_rx);
+            gcp_triggers_oss::start_consuming_gcp_pubsub_event(db.clone(), gcp_killpill_rx);
         }
     }
 
@@ -477,27 +524,24 @@ pub async fn run_server(
 
     // Setup MCP server
     #[allow(unused_variables)]
-    let (mcp_router, mcp_main_ct, mcp_service_ct) = {
+    let (mcp_router, mcp_session_manager) = {
         #[cfg(feature = "mcp")]
         if server_mode || mcp_mode {
-            let (mcp_sse_server, mcp_router) = setup_mcp_server(addr, "/api/mcp/w/:workspace_id")?;
-            #[cfg(feature = "mcp")]
-            let mcp_main_ct = mcp_sse_server.config.ct.clone(); // Token to signal shutdown *to* MCP
-            #[cfg(feature = "mcp")]
-            let mcp_service_ct = mcp_sse_server.with_service(McpRunner::new); // Token to wait for MCP *service* shutdown
-            (mcp_router, Some(mcp_main_ct), Some(mcp_service_ct))
+            let (mcp_router, mcp_session_manager) = setup_mcp_server().await?;
+            let mcp_middleware = axum::middleware::from_fn(extract_and_store_workspace_id);
+            (mcp_router.layer(mcp_middleware), Some(mcp_session_manager))
         } else {
-            (Router::new(), None, None)
+            (Router::new(), Option::<Arc<LocalSessionManager>>::None)
         }
 
         #[cfg(not(feature = "mcp"))]
-        (Router::new(), None::<()>, None::<()>)
+        (Router::new(), Option::<()>::None)
     };
 
     #[cfg(feature = "agent_worker_server")]
     let (agent_workers_router, agent_workers_bg_processor, agent_workers_killpill_tx) =
         if server_mode {
-            agent_workers_ee::workspaced_service(db.clone(), _base_internal_url.clone())
+            agent_workers_oss::workspaced_service(db.clone(), _base_internal_url.clone())
         } else {
             (Router::new(), vec![], None)
         };
@@ -535,7 +579,7 @@ pub async fn run_server(
                         .nest("/oauth", {
                             #[cfg(feature = "oauth2")]
                             {
-                                oauth2_ee::workspaced_service()
+                                oauth2_oss::workspaced_service()
                             }
 
                             #[cfg(not(feature = "oauth2"))]
@@ -552,7 +596,8 @@ pub async fn run_server(
                         )
                         .nest("/variables", variables::workspaced_service())
                         .nest("/workspaces", workspaces::workspaced_service())
-                        .nest("/oidc", oidc_ee::workspaced_service())
+                        .nest("/oidc", oidc_oss::workspaced_service())
+                        .nest("/openapi", openapi::openapi_service())
                         .nest("/http_triggers", http_triggers_service)
                         .nest("/websocket_triggers", websocket_triggers_service)
                         .nest("/kafka_triggers", kafka_triggers_service)
@@ -579,22 +624,23 @@ pub async fn run_server(
                 .nest("/schedules", schedule::global_service())
                 .nest("/embeddings", embeddings::global_service())
                 .nest("/ai", ai::global_service())
+                .nest("/inkeep", inkeep_oss::global_service())
                 .route_layer(from_extractor::<ApiAuthed>())
                 .route_layer(from_extractor::<users::Tokened>())
                 .nest("/jobs", jobs::global_root_service())
                 .nest(
                     "/srch/w/:workspace_id/index",
-                    indexer_ee::workspaced_service(),
+                    indexer_oss::workspaced_service(),
                 )
-                .nest("/srch/index", indexer_ee::global_service())
-                .nest("/oidc", oidc_ee::global_service())
+                .nest("/srch/index", indexer_oss::global_service())
+                .nest("/oidc", oidc_oss::global_service())
                 .nest(
                     "/saml",
-                    saml_ee::global_service().layer(Extension(Arc::clone(&sp_extension))),
+                    saml_oss::global_service().layer(Extension(Arc::clone(&sp_extension))),
                 )
                 .nest(
                     "/scim",
-                    scim_ee::global_service()
+                    scim_oss::global_service()
                         .route_layer(axum::middleware::from_fn(has_scim_token)),
                 )
                 .nest("/concurrency_groups", concurrency_groups::global_service())
@@ -602,7 +648,7 @@ pub async fn run_server(
                 .nest("/apps_u", {
                     #[cfg(feature = "enterprise")]
                     {
-                        apps_ee::global_unauthed_service()
+                        apps_oss::global_unauthed_service()
                     }
 
                     #[cfg(not(feature = "enterprise"))]
@@ -616,12 +662,12 @@ pub async fn run_server(
                         .layer(from_extractor::<OptAuthed>())
                         .layer(cors.clone()),
                 )
-                .nest("/mcp/w/:workspace_id", mcp_router)
+                .nest("/mcp/w/:workspace_id/sse", mcp_router)
                 .layer(from_extractor::<OptAuthed>())
                 .nest("/agent_workers", {
                     #[cfg(feature = "agent_worker_server")]
                     {
-                        agent_workers_ee::global_service().layer(Extension(agent_cache.clone()))
+                        agent_workers_oss::global_service().layer(Extension(agent_cache.clone()))
                     }
                     #[cfg(not(feature = "agent_worker_server"))]
                     {
@@ -646,7 +692,7 @@ pub async fn run_server(
                 .nest("/teams", {
                     #[cfg(feature = "enterprise")]
                     {
-                        teams_ee::teams_service()
+                        teams_oss::teams_service()
                     }
 
                     #[cfg(not(feature = "enterprise"))]
@@ -660,12 +706,12 @@ pub async fn run_server(
                 )
                 .route(
                     "/w/:workspace_id/jobs/teams_approval/:job_id",
-                    get(teams_approvals_ee::request_teams_approval),
+                    get(teams_approvals_oss::request_teams_approval),
                 )
                 .nest("/w/:workspace_id/github_app", {
                     #[cfg(feature = "enterprise")]
                     {
-                        git_sync_ee::workspaced_service()
+                        git_sync_oss::workspaced_service()
                     }
 
                     #[cfg(not(feature = "enterprise"))]
@@ -674,7 +720,7 @@ pub async fn run_server(
                 .nest("/github_app", {
                     #[cfg(feature = "enterprise")]
                     {
-                        git_sync_ee::global_service()
+                        git_sync_oss::global_service()
                     }
 
                     #[cfg(not(feature = "enterprise"))]
@@ -695,7 +741,7 @@ pub async fn run_server(
                 .nest("/oauth", {
                     #[cfg(feature = "oauth2")]
                     {
-                        oauth2_ee::global_service().layer(Extension(Arc::clone(&sp_extension)))
+                        oauth2_oss::global_service().layer(Extension(Arc::clone(&sp_extension)))
                     }
 
                     #[cfg(not(feature = "oauth2"))]
@@ -721,7 +767,7 @@ pub async fn run_server(
                     {
                         #[cfg(all(feature = "enterprise", feature = "gcp_trigger"))]
                         {
-                            gcp_triggers_ee::gcp_push_route_handler()
+                            gcp_triggers_oss::gcp_push_route_handler()
                         }
                         #[cfg(not(all(feature = "enterprise", feature = "gcp_trigger")))]
                         {
@@ -775,16 +821,9 @@ pub async fn run_server(
         tracing::info!("Graceful shutdown of server");
 
         #[cfg(feature = "mcp")]
-        {
-            if let Some(mcp_main_ct) = mcp_main_ct {
-                tracing::info!("Received shutdown signal, cancelling MCP server...");
-                mcp_main_ct.cancel();
-            }
-            if let Some(mcp_service_ct) = mcp_service_ct {
-                tracing::info!("Waiting for MCP service cancellation...");
-                mcp_service_ct.cancelled().await;
-                tracing::info!("MCP service cancelled.");
-            }
+        if let Some(mcp_session_manager) = mcp_session_manager {
+            shutdown_mcp_server(mcp_session_manager).await;
+            tracing::info!("MCP server shutdown");
         }
     });
 
@@ -842,7 +881,7 @@ async fn ee_license() -> &'static str {
 
 #[cfg(feature = "enterprise")]
 async fn ee_license() -> String {
-    use windmill_common::ee::{LICENSE_KEY_ID, LICENSE_KEY_VALID};
+    use windmill_common::ee_oss::{LICENSE_KEY_ID, LICENSE_KEY_VALID};
 
     if *LICENSE_KEY_VALID.read().await {
         LICENSE_KEY_ID.read().await.clone()
diff --git a/backend/windmill-api/src/mcp.rs b/backend/windmill-api/src/mcp.rs
index 431e121ba8..be7d5ea2f7 100644
--- a/backend/windmill-api/src/mcp.rs
+++ b/backend/windmill-api/src/mcp.rs
@@ -1,11 +1,10 @@
 use std::borrow::Cow;
 use std::collections::HashMap;
-use std::net::SocketAddr;
 use std::sync::Arc;
 
 use axum::body::to_bytes;
 use axum::Router;
-use rmcp::transport::sse_server::{SseServer, SseServerConfig};
+use axum::{extract::Path, http::Request, middleware::Next, response::Response};
 use rmcp::{
     handler::server::ServerHandler,
     model::*,
@@ -17,7 +16,6 @@ use serde_json::Value;
 use sql_builder::prelude::*;
 use sqlx::FromRow;
 use tokio::try_join;
-use tokio_util::sync::CancellationToken;
 use windmill_common::db::UserDB;
 use windmill_common::worker::to_raw_value;
 use windmill_common::{DB, HUB_BASE_URL};
@@ -29,6 +27,9 @@ use crate::jobs::{
     run_wait_result_flow_by_path_internal, run_wait_result_script_by_path_internal, RunJobQuery,
 };
 use crate::HTTP_CLIENT;
+use rmcp::transport::streamable_http_server::{
+    session::local::LocalSessionManager, SessionManager, StreamableHttpService,
+};
 use windmill_common::utils::{query_elems_from_hub, StripPath};
 
 /// Transforms the path for workspace scripts/flows.
@@ -856,28 +857,44 @@ impl ServerHandler for Runner {
             })
         };
 
-        let authed = context
-            .req_extensions
-            .get::<ApiAuthed>()
-            .ok_or_else(|| Error::internal_error("ApiAuthed not found", None))?;
-        let db = context
-            .req_extensions
-            .get::<DB>()
-            .ok_or_else(|| Error::internal_error("DB not found", None))?;
-        let user_db = context
-            .req_extensions
-            .get::<UserDB>()
-            .ok_or_else(|| Error::internal_error("UserDB not found", None))?;
+        let http_parts = context
+            .extensions
+            .get::<axum::http::request::Parts>()
+            .ok_or_else(|| {
+                tracing::error!("http::request::Parts not found");
+                Error::internal_error("http::request::Parts not found", None)
+            })?;
+
+        let authed = http_parts.extensions.get::<ApiAuthed>().ok_or_else(|| {
+            tracing::error!("ApiAuthed Axum extension not found");
+            Error::internal_error("ApiAuthed Axum extension not found", None)
+        })?;
+        let db = http_parts.extensions.get::<DB>().ok_or_else(|| {
+            tracing::error!("DB Axum extension not found");
+            Error::internal_error("DB Axum extension not found", None)
+        })?;
+        let user_db = http_parts.extensions.get::<UserDB>().ok_or_else(|| {
+            tracing::error!("UserDB Axum extension not found");
+            Error::internal_error("UserDB Axum extension not found", None)
+        })?;
         let args = parse_args(request.arguments)?;
 
+        let workspace_id = http_parts
+            .extensions
+            .get::<WorkspaceId>()
+            .ok_or_else(|| {
+                tracing::error!("WorkspaceId not found");
+                Error::internal_error("WorkspaceId not found", None)
+            })
+            .map(|w_id| w_id.0.clone())?;
+
         let (tool_type, path, is_hub) =
             Runner::reverse_transform(&request.name).unwrap_or_default();
 
         let item_schema = if is_hub {
             Runner::get_hub_script_schema(&format!("hub/{}", path), db).await?
         } else {
-            Runner::get_item_schema(&path, user_db, authed, &context.workspace_id, &tool_type)
-                .await?
+            Runner::get_item_schema(&path, user_db, authed, &workspace_id, &tool_type).await?
         };
 
         let schema_obj = if let Some(ref s) = item_schema {
@@ -906,8 +923,6 @@ impl ServerHandler for Runner {
         } else {
             windmill_queue::PushArgsOwned::default()
         };
-
-        let w_id = context.workspace_id.clone();
         let script_or_flow_path = if is_hub {
             StripPath(format!("hub/{}", path))
         } else {
@@ -922,7 +937,7 @@ impl ServerHandler for Runner {
                 script_or_flow_path,
                 authed.clone(),
                 user_db.clone(),
-                w_id.clone(),
+                workspace_id.clone(),
                 push_args,
             )
             .await
@@ -934,7 +949,7 @@ impl ServerHandler for Runner {
                 authed.clone(),
                 user_db.clone(),
                 push_args,
-                w_id.clone(),
+                workspace_id.clone(),
             )
             .await
         };
@@ -978,19 +993,38 @@ impl ServerHandler for Runner {
         _request: Option<PaginatedRequestParam>,
         mut _context: RequestContext<RoleServer>,
     ) -> Result<ListToolsResult, Error> {
-        let workspace_id = _context.workspace_id.clone();
-        let db = _context
-            .req_extensions
-            .get::<DB>()
-            .ok_or_else(|| Error::internal_error("DB not found", None))?;
-        let user_db = _context
-            .req_extensions
-            .get::<UserDB>()
-            .ok_or_else(|| Error::internal_error("UserDB not found", None))?;
-        let authed = _context
-            .req_extensions
-            .get::<ApiAuthed>()
-            .ok_or_else(|| Error::internal_error("ApiAuthed not found", None))?;
+        let http_parts = _context
+            .extensions
+            .get::<axum::http::request::Parts>()
+            .ok_or_else(|| {
+                tracing::error!("http::request::Parts not found");
+                Error::internal_error("http::request::Parts not found", None)
+            })?;
+
+        let db = http_parts.extensions.get::<DB>().ok_or_else(|| {
+            tracing::error!("DB Axum extension not found");
+            Error::internal_error("DB Axum extension not found", None)
+        })?;
+
+        let user_db = http_parts.extensions.get::<UserDB>().ok_or_else(|| {
+            tracing::error!("UserDB Axum extension not found");
+            Error::internal_error("UserDB Axum extension not found", None)
+        })?;
+
+        let authed = http_parts.extensions.get::<ApiAuthed>().ok_or_else(|| {
+            tracing::error!("ApiAuthed Axum extension not found");
+            Error::internal_error("ApiAuthed Axum extension not found", None)
+        })?;
+
+        let workspace_id = http_parts
+            .extensions
+            .get::<WorkspaceId>()
+            .ok_or_else(|| {
+                tracing::error!("WorkspaceId not found");
+                Error::internal_error("WorkspaceId not found", None)
+            })
+            .map(|w_id| w_id.0.clone())?;
+
         let owned_scope = authed.scopes.as_ref().and_then(|scopes| {
             scopes
                 .iter()
@@ -1127,15 +1161,54 @@ impl ServerHandler for Runner {
     }
 }
 
-pub fn setup_mcp_server(addr: SocketAddr, path: &str) -> anyhow::Result<(SseServer, Router)> {
-    let config = SseServerConfig {
-        bind: addr,
-        sse_path: "/sse".to_string(),
-        post_path: "/message".to_string(),
-        full_message_path: path.to_string(),
-        ct: CancellationToken::new(),
-        sse_keep_alive: None,
+#[derive(Clone, Debug)]
+pub struct WorkspaceId(pub String);
+
+pub async fn extract_and_store_workspace_id(
+    Path(params): Path<String>,
+    mut request: Request<axum::body::Body>,
+    next: Next,
+) -> Response {
+    let workspace_id = params;
+    request.extensions_mut().insert(WorkspaceId(workspace_id));
+    next.run(request).await
+}
+
+pub async fn setup_mcp_server() -> anyhow::Result<(Router, Arc<LocalSessionManager>)> {
+    let session_manager = Arc::new(LocalSessionManager::default());
+    let service_config = Default::default();
+    let service = StreamableHttpService::new(
+        || Ok(Runner::new()),
+        session_manager.clone(),
+        service_config,
+    );
+
+    let router = axum::Router::new().nest_service("/", service);
+    Ok((router, session_manager))
+}
+
+pub async fn shutdown_mcp_server(session_manager: Arc<LocalSessionManager>) {
+    let session_ids_to_close = {
+        let sessions_map = session_manager.sessions.read().await;
+        sessions_map.keys().cloned().collect::<Vec<_>>()
     };
 
-    Ok(SseServer::new(config))
+    if !session_ids_to_close.is_empty() {
+        tracing::info!(
+            "Closing {} active MCP session(s)...",
+            session_ids_to_close.len()
+        );
+        let close_futures = session_ids_to_close
+            .iter()
+            .map(|session_id| {
+                let manager_clone = session_manager.clone();
+                async move {
+                    if let Err(_) = manager_clone.close_session(session_id).await {
+                        tracing::warn!("Error closing MCP session");
+                    }
+                }
+            })
+            .collect::<Vec<_>>();
+        futures::future::join_all(close_futures).await;
+    }
 }
diff --git a/backend/windmill-api/src/mqtt_triggers.rs b/backend/windmill-api/src/mqtt_triggers.rs
index 9f3fd19827..7cc3f3c4e0 100644
--- a/backend/windmill-api/src/mqtt_triggers.rs
+++ b/backend/windmill-api/src/mqtt_triggers.rs
@@ -39,7 +39,7 @@ use sql_builder::{bind::Bind, SqlBuilder};
 use sqlx::{FromRow, Type};
 use std::collections::HashMap;
 use std::time::Duration;
-use windmill_audit::{audit_ee::audit_log, ActionKind};
+use windmill_audit::{audit_oss::audit_log, ActionKind};
 use windmill_common::{
     db::UserDB,
     error::{self, JsonResult},
@@ -478,7 +478,7 @@ pub async fn test_mqtt_connection(
         test_postgres;
 
     let mqtt_resource = try_get_resource_from_db_as::<MqttResource>(
-        authed,
+        &authed,
         Some(user_db),
         &db,
         &mqtt_resource_path,
@@ -1253,7 +1253,7 @@ impl MqttConfig {
             }
         }
         let mqtt_resource = try_get_resource_from_db_as::<MqttResource>(
-            authed,
+            &authed,
             Some(UserDB::new(db.clone())),
             db,
             mqtt_resource_path,
diff --git a/backend/windmill-api/src/nats_triggers_ee.rs b/backend/windmill-api/src/nats_triggers_oss.rs
similarity index 79%
rename from backend/windmill-api/src/nats_triggers_ee.rs
rename to backend/windmill-api/src/nats_triggers_oss.rs
index 649d3a3837..28bf1e70e2 100644
--- a/backend/windmill-api/src/nats_triggers_ee.rs
+++ b/backend/windmill-api/src/nats_triggers_oss.rs
@@ -1,22 +1,34 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::nats_triggers_ee::*;
+
+#[cfg(not(feature = "private"))]
 use crate::db::DB;
+#[cfg(not(feature = "private"))]
 use axum::Router;
+#[cfg(not(feature = "private"))]
 use serde::{Deserialize, Serialize};
 
+#[cfg(not(feature = "private"))]
 #[derive(Serialize, Deserialize)]
 pub struct NatsResourceAuth {}
 
+#[cfg(not(feature = "private"))]
 pub fn workspaced_service() -> Router {
     Router::new()
 }
 
+#[cfg(not(feature = "private"))]
 pub fn start_nats_consumers(_db: DB, mut _killpill_rx: tokio::sync::broadcast::Receiver<()>) -> () {
     // implementation is not open source
 }
 
 #[derive(Serialize, Deserialize)]
+#[cfg(not(feature = "private"))]
 pub enum NatsTriggerConfigConnection {}
 
 #[derive(Serialize, Clone)]
+#[cfg(not(feature = "private"))]
 pub struct NatsTrigger {
     pub workspace_id: String,
     pub path: String,
@@ -40,4 +52,4 @@ pub struct NatsTrigger {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub error: Option<String>,
     pub enabled: bool,
-}
\ No newline at end of file
+}
diff --git a/backend/windmill-api/src/oauth2_ee.rs b/backend/windmill-api/src/oauth2_oss.rs
similarity index 76%
rename from backend/windmill-api/src/oauth2_ee.rs
rename to backend/windmill-api/src/oauth2_oss.rs
index 49d2155cf3..04e0e1b202 100644
--- a/backend/windmill-api/src/oauth2_ee.rs
+++ b/backend/windmill-api/src/oauth2_oss.rs
@@ -1,3 +1,7 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::oauth2_ee::*;
+
 /*
  * Author: Ruben Fiszel
  * Copyright: Windmill Labs, Inc 2022
@@ -6,39 +10,50 @@
  * LICENSE-AGPL for a copy of the license.
  */
 
+#[cfg(not(feature = "private"))]
 use std::{collections::HashMap, fmt::Debug};
 
+#[cfg(not(feature = "private"))]
 use axum::{routing::get, Json, Router};
+#[cfg(not(feature = "private"))]
 use hmac::Mac;
 
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 use itertools::Itertools;
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 use oauth2::{Client as OClient, *};
+#[cfg(not(feature = "private"))]
 use serde::{Deserialize, Serialize};
+#[cfg(not(feature = "private"))]
 use sqlx::{Postgres, Transaction};
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 use windmill_common::more_serde::maybe_number_opt;
 
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 use crate::OAUTH_CLIENTS;
+#[cfg(not(feature = "private"))]
 use windmill_common::error;
+#[cfg(not(feature = "private"))]
 use windmill_common::oauth2::*;
 
+#[cfg(not(feature = "private"))]
 use crate::db::DB;
+#[cfg(not(feature = "private"))]
 use std::str;
 
+#[cfg(not(feature = "private"))]
 pub fn global_service() -> Router {
     Router::new()
         .route("/list_logins", get(list_logins))
         .route("/list_connects", get(list_connects))
 }
 
+#[cfg(not(feature = "private"))]
 pub fn workspaced_service() -> Router {
     Router::new()
 }
 
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 #[derive(Debug, Clone)]
 pub struct ClientWithScopes {
     _client: OClient,
@@ -48,9 +63,10 @@ pub struct ClientWithScopes {
     _allowed_domains: Option<Vec<String>>,
     _userinfo_url: Option<String>,
 }
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 pub type BasicClientsMap = HashMap<String, ClientWithScopes>;
 
+#[cfg(not(feature = "private"))]
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct OAuthConfig {
     auth_url: String,
@@ -62,6 +78,7 @@ pub struct OAuthConfig {
     req_body_auth: Option<bool>,
 }
 
+#[cfg(not(feature = "private"))]
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct OAuthClient {
     id: String,
@@ -71,7 +88,7 @@ pub struct OAuthClient {
     login_config: Option<OAuthConfig>,
 }
 
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 #[derive(Debug)]
 pub struct AllClients {
     pub logins: BasicClientsMap,
@@ -79,7 +96,7 @@ pub struct AllClients {
     pub slack: Option<OClient>,
 }
 
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 pub async fn build_oauth_clients(
     _base_url: &str,
     _oauths_from_config: Option<HashMap<String, OAuthClient>>,
@@ -93,7 +110,7 @@ pub async fn build_oauth_clients(
     });
 }
 
-#[cfg(feature = "oauth2")]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 #[derive(Clone, Debug, Deserialize, Serialize)]
 pub struct TokenResponse {
     access_token: AccessToken,
@@ -107,17 +124,20 @@ pub struct TokenResponse {
     scope: Option<Vec<Scope>>,
 }
 
+#[cfg(not(feature = "private"))]
 #[derive(Serialize)]
 struct Logins {
     oauth: Vec<String>,
     saml: Option<String>,
 }
+#[cfg(not(feature = "private"))]
 async fn list_logins() -> error::JsonResult<Logins> {
     // Implementation is not open source
     return Ok(Json(Logins { oauth: vec![], saml: None }));
 }
 
-#[cfg(feature = "oauth2")]
+#[allow(unused)]
+#[cfg(all(feature = "oauth2", not(feature = "private")))]
 async fn list_connects() -> error::JsonResult<Vec<String>> {
     Ok(Json(
         (&OAUTH_CLIENTS.read().await.connects)
@@ -127,12 +147,14 @@ async fn list_connects() -> error::JsonResult<Vec<String>> {
     ))
 }
 
-#[cfg(not(feature = "oauth2"))]
-async fn list_connects() -> error::JsonResult<Vec<String>> {
+#[allow(unused)]
+#[cfg(not(all(feature = "oauth2", not(feature = "private"))))]
+async fn list_connects() -> windmill_common::error::JsonResult<Vec<String>> {
     // Implementation is not open source
-    return Ok(Json(vec![]));
+    return Ok(axum::Json(vec![]));
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn _refresh_token<'c>(
     _tx: Transaction<'c, Postgres>,
     _path: &str,
@@ -146,6 +168,7 @@ pub async fn _refresh_token<'c>(
     ))
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn check_nb_of_user(db: &DB) -> error::Result<()> {
     let nb_users_sso =
         sqlx::query_scalar!("SELECT COUNT(*) FROM password WHERE login_type != 'password'",)
@@ -171,10 +194,11 @@ pub async fn check_nb_of_user(db: &DB) -> error::Result<()> {
 }
 
 #[derive(Clone, Debug)]
+#[cfg(not(feature = "private"))]
 pub struct SlackVerifier {
     _mac: HmacSha256,
 }
-
+#[cfg(not(feature = "private"))]
 impl SlackVerifier {
     pub fn new<S: AsRef<[u8]>>(secret: S) -> anyhow::Result<SlackVerifier> {
         HmacSha256::new_from_slice(secret.as_ref())
diff --git a/backend/windmill-api/src/oidc_ee.rs b/backend/windmill-api/src/oidc_oss.rs
similarity index 68%
rename from backend/windmill-api/src/oidc_ee.rs
rename to backend/windmill-api/src/oidc_oss.rs
index 248b990f54..4042c2a53b 100644
--- a/backend/windmill-api/src/oidc_ee.rs
+++ b/backend/windmill-api/src/oidc_oss.rs
@@ -1,3 +1,7 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::oidc_ee::*;
+
 /*
  * Author: Ruben Fiszel
  * Copyright: Windmill Labs, Inc 2023
@@ -6,12 +10,15 @@
  * LICENSE-AGPL for a copy of the license.
  */
 
+#[cfg(not(feature = "private"))]
 use axum::Router;
 
+#[cfg(not(feature = "private"))]
 pub fn global_service() -> Router {
     Router::new()
 }
 
+#[cfg(not(feature = "private"))]
 pub fn workspaced_service() -> Router {
     Router::new()
 }
diff --git a/backend/windmill-api/src/openapi.rs b/backend/windmill-api/src/openapi.rs
new file mode 100644
index 0000000000..c0e1d046b6
--- /dev/null
+++ b/backend/windmill-api/src/openapi.rs
@@ -0,0 +1,984 @@
+use std::{
+    collections::{HashMap, HashSet},
+    fmt::Display,
+};
+
+use anyhow::anyhow;
+use axum::{
+    body::Body, extract::Path, http, response::Response, routing::post, Extension, Json, Router,
+};
+use http::{header, HeaderValue, Method, StatusCode};
+use indexmap::IndexMap;
+use itertools::Itertools;
+use serde::{Deserialize, Serialize};
+use serde_json::{to_value, Map, Value};
+use sqlx::PgConnection;
+use url::Url;
+use windmill_common::{
+    db::UserDB,
+    error::{Error, Result},
+    utils::{deserialize_url, empty_as_none, is_empty, RunnableKind},
+    DB,
+};
+
+use crate::db::ApiAuthed;
+
+#[cfg(feature = "http_trigger")]
+use crate::{
+    http_trigger_args::HttpMethod, http_trigger_auth::ApiKeyAuthentication,
+    http_triggers::AuthenticationMethod, resources::try_get_resource_from_db_as,
+};
+
+lazy_static::lazy_static! {
+    static ref DEFAULT_OPENAPI_INFO_OBJECT: Info = Info {
+        title: "Windmill API".to_string(),
+        version: "1.0.0".to_string(),
+        ..Default::default()
+    };
+}
+
+const DEFAULT_OPENAPI_GENERATED_VERSION: &'static str = "3.1.0";
+const JWT_SECURITY_SCHEME: &'static str = "JwtAuth";
+const BASIC_HTTP_AUTH_SCHEME: &'static str = "BasicHttp";
+
+const DEFAULT_REQUEST_KEY: &'static str = "defaultRequest";
+const DEFAULT_ASYNC_RESPONSE_KEY: &'static str = "AsyncResponse";
+const DEFAULT_SYNC_RESPONSE_KEY: &'static str = "SyncResponse";
+const DEFAULT_PAYLOAD_PARAM_KEY: &'static str = "PayloadParam";
+
+pub fn openapi_service() -> Router {
+    Router::new()
+        .route("/generate", post(generate_openapi_spec))
+        .route("/download", post(download_spec))
+}
+
+#[derive(Debug, Deserialize, Clone, Copy)]
+#[serde(rename_all = "lowercase")]
+pub enum Format {
+    JSON,
+    YAML,
+}
+
+impl Display for Format {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let format = match self {
+            Format::JSON => "json",
+            Format::YAML => "yaml",
+        };
+        write!(f, "{}", format)
+    }
+}
+
+impl Default for Format {
+    fn default() -> Self {
+        Self::YAML
+    }
+}
+
+#[derive(Debug, Default, Deserialize, Serialize)]
+struct Contact {
+    #[serde(skip_serializing_if = "is_empty")]
+    name: Option<String>,
+    #[serde(
+        default,
+        deserialize_with = "deserialize_url",
+        skip_serializing_if = "Option::is_none"
+    )]
+    url: Option<Url>,
+    #[serde(skip_serializing_if = "is_empty")]
+    email: Option<String>,
+}
+
+#[derive(Debug, Default, Deserialize, Serialize)]
+struct License {
+    name: String,
+    #[serde(skip_serializing_if = "is_empty")]
+    identifier: Option<String>,
+    #[serde(
+        default,
+        deserialize_with = "deserialize_url",
+        skip_serializing_if = "Option::is_none"
+    )]
+    url: Option<Url>,
+}
+
+#[derive(Debug, Default, Deserialize, Serialize)]
+pub struct Info {
+    title: String,
+    version: String,
+    #[serde(skip_serializing_if = "is_empty")]
+    description: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    contact: Option<Contact>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    license: Option<License>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+struct Server {
+    url: String,
+    #[serde(skip_serializing_if = "is_empty")]
+    description: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    variables: Option<HashMap<String, Value>>,
+}
+
+#[derive(Debug)]
+pub enum SecurityScheme {
+    BearerJwt,
+    BasicHttp,
+    ApiKey(String),
+}
+#[derive(Debug)]
+pub struct WebhookConfig {
+    runnable_kind: RunnableKind,
+}
+
+impl WebhookConfig {
+    pub fn new(runnable_kind: RunnableKind) -> Self {
+        Self { runnable_kind }
+    }
+}
+
+#[derive(Debug)]
+pub struct HttpRouteConfig {
+    method: Method,
+}
+
+impl HttpRouteConfig {
+    pub fn new(method: Method) -> Self {
+        Self { method }
+    }
+}
+
+#[derive(Debug)]
+pub enum Kind {
+    Webhook(WebhookConfig),
+    HttpRoute(HttpRouteConfig),
+}
+
+#[derive(Debug)]
+pub struct FuturePath {
+    route_path: String,
+    kind: Kind,
+    is_async: Option<bool>,
+    summary: Option<String>,
+    description: Option<String>,
+    security_scheme: Option<SecurityScheme>,
+}
+
+impl FuturePath {
+    pub fn new(
+        route_path: String,
+        kind: Kind,
+        is_async: Option<bool>,
+        summary: Option<String>,
+        description: Option<String>,
+        security_scheme: Option<SecurityScheme>,
+    ) -> FuturePath {
+        FuturePath { route_path, kind, is_async, summary, description, security_scheme }
+    }
+}
+
+fn from_route_path_to_openapi_path(
+    route_path: &str,
+    kind: &Kind,
+) -> Result<(Vec<String>, Option<Value>)> {
+    let mut openapi_path = String::new();
+    let mut parameters = Vec::new();
+
+    for segment in route_path.split('/') {
+        if segment.starts_with(':') {
+            let param_name = &segment[1..];
+
+            if param_name.is_empty() {
+                return Err(anyhow!("Empty parameter name in path: {}", route_path).into());
+            }
+
+            openapi_path.push_str(&format!("/{{{}}}", param_name));
+            parameters.push(serde_json::json!({
+                "name": param_name,
+                "in": "path",
+                "required": true,
+                "schema": { "type": "string" }
+            }));
+        } else if !segment.is_empty() {
+            openapi_path.push('/');
+            openapi_path.push_str(segment);
+        } else {
+            openapi_path.push('/');
+        }
+    }
+
+    let parameters_json = if parameters.is_empty() {
+        None
+    } else {
+        Some(Value::Array(parameters))
+    };
+
+    let prefix = match kind {
+        Kind::HttpRoute(_) => "",
+        Kind::Webhook(WebhookConfig { runnable_kind }) => match runnable_kind {
+            RunnableKind::Script => "p",
+            RunnableKind::Flow => "f",
+        },
+    };
+
+    let normalized_path = if openapi_path.starts_with('/') {
+        format!("{prefix}{openapi_path}")
+    } else {
+        format!("{}/{}", prefix, openapi_path)
+    };
+
+    let route_paths = if prefix.is_empty() {
+        vec![normalized_path]
+    } else {
+        vec![
+            format!("/run/{}", &normalized_path),
+            format!("/run_wait_result/{}", &normalized_path),
+        ]
+    };
+
+    Ok((route_paths, parameters_json))
+}
+
+fn get_servers_component(url: &str, kind: &Kind) -> Server {
+    let url = url.trim_end_matches('/');
+
+    let server = match kind {
+        Kind::HttpRoute(_) => {
+            Server { url: format!("{}/api/r", url), description: None, variables: None }
+        }
+        Kind::Webhook(_) => Server {
+            url: format!("{}/api/w/{{workspace}}/jobs", url),
+            variables: Some(HashMap::from([(
+                "workspace".to_string(),
+                serde_json::json!({
+                    "default": "test",
+                    "description": "Workspace identifier"
+                }),
+            )])),
+            description: None,
+        },
+    };
+
+    server
+}
+
+fn generate_paths(
+    paths: Vec<FuturePath>,
+    url: Option<&Url>,
+) -> Result<IndexMap<String, IndexMap<String, Value>>> {
+    let mut map: IndexMap<String, IndexMap<String, Value>> = IndexMap::new();
+
+    let generate_default_request = || {
+        serde_json::json!({
+            "$ref": format!("#/components/requestBodies/{DEFAULT_REQUEST_KEY}")
+        })
+    };
+
+    let generate_response = |is_async: bool| {
+        let responses = if is_async {
+            serde_json::json!({
+                "200": {
+                    "$ref": format!("#/components/responses/{DEFAULT_ASYNC_RESPONSE_KEY}")
+                }
+            })
+        } else {
+            serde_json::json!(serde_json::json!({
+                "200": {
+                    "$ref": format!("#/components/responses/{DEFAULT_SYNC_RESPONSE_KEY}")
+                }
+            }))
+        };
+
+        responses
+    };
+
+    let get_security_scheme = |security_scheme: Option<&SecurityScheme>| -> Vec<Value> {
+        if let Some(security_scheme) = security_scheme {
+            let scheme = match security_scheme {
+                SecurityScheme::ApiKey(api_key) => header_to_pascal_case(&api_key),
+                SecurityScheme::BearerJwt => JWT_SECURITY_SCHEME.to_owned(),
+                SecurityScheme::BasicHttp => BASIC_HTTP_AUTH_SCHEME.to_owned(),
+            };
+
+            vec![serde_json::json!({
+                scheme: []
+            })]
+        } else {
+            vec![]
+        }
+    };
+
+    let mut duplicate_webhooks = HashSet::new();
+
+    for path in paths {
+        let (route_paths, parameters) =
+            from_route_path_to_openapi_path(&path.route_path, &path.kind)?;
+
+        for route_path in route_paths {
+            let path_object = map.entry(route_path.clone()).or_insert_with(|| {
+                let mut path_object = IndexMap::new();
+
+                if let Some(url) = url {
+                    let servers = get_servers_component(url.as_str(), &path.kind);
+                    path_object.insert("servers".to_string(), to_value(vec![servers]).unwrap());
+                }
+
+                if parameters.is_some() {
+                    path_object.insert(
+                        "parameters".to_string(),
+                        to_value(parameters.clone()).unwrap(),
+                    );
+                }
+
+                path_object
+            });
+
+            let is_async;
+
+            let (methods, is_webhook) = match &path.kind {
+                Kind::Webhook(_) => {
+                    if !duplicate_webhooks.insert(route_path.clone()) {
+                        return Err(anyhow!("Found duplicate webhook: {}", path.route_path).into());
+                    }
+                    is_async = route_path.starts_with("/run/");
+                    let methods = if is_async {
+                        vec![Method::POST]
+                    } else {
+                        vec![Method::GET, Method::POST]
+                    };
+
+                    (methods, true)
+                }
+                Kind::HttpRoute(HttpRouteConfig { method }) => {
+                    if path_object.get(&method.to_string()).is_some() {
+                        return Err(anyhow!("Found duplicate route: {}", path.route_path).into());
+                    }
+                    is_async = path.is_async.unwrap_or(true);
+                    (vec![method.to_owned()], false)
+                }
+            };
+
+            for method in methods {
+                let mut method_map = IndexMap::new();
+
+                if let Some(summary) = path.summary.as_ref().filter(|s| !s.is_empty()) {
+                    method_map.insert("summary", Value::String(summary.to_owned()));
+                }
+
+                if let Some(description) = path.description.as_ref().filter(|s| !s.is_empty()) {
+                    method_map.insert("description", Value::String(description.to_owned()));
+                }
+
+                method_map.insert(
+                    "security",
+                    to_value(get_security_scheme(path.security_scheme.as_ref()))?,
+                );
+
+                if method != Method::GET {
+                    method_map.insert("requestBody", generate_default_request());
+                } else if is_webhook {
+                    method_map.insert(
+                        "parameters",
+                        Value::Array(vec![serde_json::json!({
+                            "$ref": format!("#/components/parameters/{DEFAULT_PAYLOAD_PARAM_KEY}")
+                        })]),
+                    );
+                }
+
+                method_map.insert("responses", generate_response(is_async));
+
+                path_object.insert(method.to_string().to_lowercase(), to_value(&method_map)?);
+            }
+        }
+    }
+
+    return Ok(map);
+}
+
+pub fn transform_to_minified_postgres_regex(glob: &str) -> String {
+    let mut regex = String::from("^");
+    for ch in glob.chars() {
+        match ch {
+            '*' => regex.push_str(".*"),
+            '.' | '+' | '(' | ')' | '|' | '^' | '$' | '{' | '}' | '[' | ']' | '\\' => {
+                regex.push('\\');
+                regex.push(ch);
+            }
+            _ => regex.push(ch),
+        }
+    }
+
+    regex.push('$');
+    regex
+}
+
+#[derive(Debug, Default)]
+pub struct ServerToSet {
+    pub http_route: bool,
+    pub webhook_flow: bool,
+    pub webhook_script: bool,
+}
+
+impl ServerToSet {
+    pub fn new(http_route: bool, webhook_flow: bool, webhook_script: bool) -> ServerToSet {
+        ServerToSet { http_route, webhook_flow, webhook_script }
+    }
+}
+
+fn header_to_pascal_case(header: &str) -> String {
+    header
+        .split(|c: char| c == '-' || c == '_' || c == ' ')
+        .filter(|s| !s.is_empty())
+        .map(|s| {
+            let mut chars = s.chars();
+            match chars.next() {
+                Some(first) => {
+                    first.to_ascii_uppercase().to_string()
+                        + chars.as_str().to_ascii_lowercase().as_str()
+                }
+                None => String::new(),
+            }
+        })
+        .collect::<String>()
+}
+
+#[derive(Debug, Default)]
+struct SecuritySchemeToAdd {
+    basic_http: bool,
+    bearer_jwt: bool,
+    api_keys: Vec<(String, Value)>,
+}
+
+fn generate_all_security_schemes(future_paths: &[FuturePath]) -> SecuritySchemeToAdd {
+    let mut to_add = SecuritySchemeToAdd::default();
+
+    let mut set = HashSet::new();
+    for future_path in future_paths {
+        if !to_add.basic_http
+            && matches!(future_path.security_scheme, Some(SecurityScheme::BasicHttp))
+        {
+            to_add.basic_http = true
+        } else if !to_add.bearer_jwt
+            && matches!(future_path.security_scheme, Some(SecurityScheme::BearerJwt))
+        {
+            to_add.bearer_jwt = true
+        } else if let Some(SecurityScheme::ApiKey(api_key)) = future_path.security_scheme.as_ref() {
+            let pascal_case_header = header_to_pascal_case(&api_key);
+
+            if !set.insert(pascal_case_header.clone()) {
+                continue;
+            }
+
+            let scheme = serde_json::json!({
+                    "type": "apiKey",
+                    "in": "header",
+                    "name": api_key
+            });
+            to_add.api_keys.push((pascal_case_header, scheme));
+        }
+    }
+
+    to_add
+}
+
+fn generate_components(future_paths: &[FuturePath]) -> Map<String, Value> {
+    let mut components = Map::new();
+
+    if future_paths
+        .iter()
+        .any(|path| matches!(path.kind, Kind::Webhook(_)))
+    {
+        components.insert(
+            "parameters".to_owned(),
+            serde_json::json!({
+                "PayloadParam": {
+                    "name": "payload",
+                    "in": "query",
+                    "required": true,
+                    "description": "A URL-safe base64-encoded JSON string payload.",
+                    "schema": {
+                        "type": "string"
+                    }
+                }
+            }),
+        );
+    }
+
+    {
+        let mut security_scheme = Map::new();
+
+        let SecuritySchemeToAdd { basic_http, bearer_jwt, api_keys } =
+            generate_all_security_schemes(future_paths);
+
+        if basic_http {
+            security_scheme.insert(
+                BASIC_HTTP_AUTH_SCHEME.to_owned(),
+                serde_json::json!({
+                    "type": "http",
+                    "scheme": "basic"
+                }),
+            );
+        }
+
+        if bearer_jwt {
+            security_scheme.insert(
+                JWT_SECURITY_SCHEME.to_owned(),
+                serde_json::json!({
+                    "type": "http",
+                    "scheme": "bearer",
+                    "bearerFormat": "JWT"
+                }),
+            );
+        }
+
+        for (key, value) in api_keys {
+            security_scheme.insert(key, value);
+        }
+        components.insert("securitySchemes".to_owned(), Value::Object(security_scheme));
+    }
+
+    components.insert("requestBodies".to_owned(), serde_json::json!({
+       DEFAULT_REQUEST_KEY: {
+            "description": "This route may or may not require a request body, but its structure and content type are unknown.",
+            "required": false,
+            "content": {
+                "application/json": {}
+            }
+        }
+    }));
+
+    components.insert("responses".to_owned(), serde_json::json!({
+        DEFAULT_ASYNC_RESPONSE_KEY: {
+            "description": "Returns a job ID as a UUID string.",
+            "content": {
+                "text/plain": {
+                    "schema": {
+                        "type": "string",
+                        "format": "uuid",
+                        "examples": [ "550e8400-e29b-41d4-a716-446655440000" ]
+                    }
+                }
+            }
+        },
+        DEFAULT_SYNC_RESPONSE_KEY: {
+            "description": "This route may return a response, but its structure and content type are unknown.",
+            "content": {
+                "application/octet-stream": {}
+            }
+        },
+
+    }));
+
+    components
+}
+
+pub fn generate_openapi_document(
+    info: Option<&Info>,
+    url: Option<&Url>,
+    paths: Vec<FuturePath>,
+    format: Format,
+) -> Result<String> {
+    let mut openapi_doc: IndexMap<&'static str, Value> = IndexMap::new();
+
+    openapi_doc.insert("openapi", to_value(&DEFAULT_OPENAPI_GENERATED_VERSION)?);
+    openapi_doc.insert(
+        "info",
+        to_value(info.unwrap_or(&DEFAULT_OPENAPI_INFO_OBJECT))?,
+    );
+
+    openapi_doc.insert("components", Value::Object(generate_components(&paths)));
+
+    openapi_doc.insert("paths", to_value(generate_paths(paths, url)?)?);
+
+    let openapi_document = match format {
+        Format::YAML => serde_yml::to_string(&openapi_doc).map_err(|err| {
+            anyhow!(
+                "Could not generate OpenAPI document in YAML format: {}",
+                err
+            )
+        })?,
+        Format::JSON => serde_json::to_string_pretty(&openapi_doc).map_err(|err| {
+            anyhow!(
+                "Could not generate OpenAPI document in JSON format: {}",
+                err
+            )
+        })?,
+    };
+
+    Ok(openapi_document)
+}
+
+#[allow(unused)]
+#[derive(Debug, Deserialize)]
+struct HttpRouteFilter {
+    folder_regex: String,
+    path_regex: String,
+    route_path_regex: String,
+}
+
+#[derive(Debug, Deserialize)]
+struct WebhookFilter {
+    user_or_folder_regex: String,
+    user_or_folder_regex_value: String,
+    path: String,
+    runnable_kind: RunnableKind,
+}
+
+#[derive(Debug, Deserialize)]
+struct GenerateOpenAPI {
+    info: Option<Info>,
+    url: Option<Url>,
+    #[serde(default, deserialize_with = "empty_as_none")]
+    http_route_filters: Option<Vec<HttpRouteFilter>>,
+    #[serde(default, deserialize_with = "empty_as_none")]
+    webhook_filters: Option<Vec<WebhookFilter>>,
+    #[serde(default)]
+    openapi_spec_format: Format,
+}
+
+#[cfg(feature = "http_trigger")]
+async fn http_routes_to_future_paths(
+    db: &DB,
+    user_db: UserDB,
+    authed: &ApiAuthed,
+    pg_pool: &mut PgConnection,
+    http_route_filters: Option<&[HttpRouteFilter]>,
+    w_id: &str,
+) -> Result<Vec<FuturePath>> {
+    let mut http_routes = Vec::new();
+
+    if let Some(http_route_filters) = http_route_filters {
+        let path_regex = http_route_filters
+            .iter()
+            .map(|filter| {
+                transform_to_minified_postgres_regex(&format!(
+                    "f/{}/{}",
+                    filter.folder_regex, filter.path_regex
+                ))
+            })
+            .collect_vec();
+
+        let route_path_regex = http_route_filters
+            .iter()
+            .map(|filter| transform_to_minified_postgres_regex(&filter.route_path_regex))
+            .collect_vec();
+
+        #[derive(Debug, Deserialize)]
+        struct MinifiedHttpTrigger {
+            route_path: String,
+            http_method: HttpMethod,
+            is_async: bool,
+            workspaced_route: bool,
+            summary: Option<String>,
+            description: Option<String>,
+            authentication_method: AuthenticationMethod,
+            authentication_resource_path: Option<String>,
+        }
+
+        http_routes = sqlx::query_as!(
+            MinifiedHttpTrigger,
+            r#"
+        SELECT
+            route_path,
+            http_method AS "http_method: _",
+            is_async,
+            workspaced_route,
+            summary,
+            description,
+            authentication_method AS "authentication_method: _",
+            authentication_resource_path
+        FROM
+            http_trigger
+        WHERE
+           path ~ ANY($1) AND
+           route_path ~ ANY($2) AND
+           workspace_id = $3
+        "#,
+            &path_regex,
+            &route_path_regex,
+            &w_id
+        )
+        .fetch_all(pg_pool)
+        .await?;
+    }
+
+    let mut openapi_future_paths = Vec::with_capacity(http_routes.len());
+
+    for http_route in http_routes {
+        let auth_method = match http_route.authentication_method {
+            AuthenticationMethod::BasicHttp => Some(SecurityScheme::BasicHttp),
+            AuthenticationMethod::Windmill => Some(SecurityScheme::BearerJwt),
+            AuthenticationMethod::ApiKey => {
+                let resource_path = match http_route.authentication_resource_path {
+                    Some(resource_path) => resource_path,
+                    None => {
+                        return Err(Error::BadRequest(
+                            "Missing authentication resource path".to_string(),
+                        ));
+                    }
+                };
+
+                let api = try_get_resource_from_db_as::<ApiKeyAuthentication>(
+                    authed,
+                    Some(user_db.clone()),
+                    db,
+                    &resource_path,
+                    w_id,
+                )
+                .await?;
+
+                Some(SecurityScheme::ApiKey(api.api_key_header))
+            }
+            _ => None,
+        };
+
+        let route_path = if http_route.workspaced_route {
+            format!("{}/{}", w_id, http_route.route_path.trim_start_matches('/'))
+        } else {
+            http_route.route_path.clone()
+        };
+
+        let method = match http_route.http_method {
+            HttpMethod::Get => Method::GET,
+            HttpMethod::Post => Method::POST,
+            HttpMethod::Put => Method::PUT,
+            HttpMethod::Patch => Method::PATCH,
+            HttpMethod::Delete => Method::DELETE,
+        };
+
+        let future_path = FuturePath::new(
+            route_path,
+            Kind::HttpRoute(HttpRouteConfig::new(method)),
+            Some(http_route.is_async),
+            http_route.summary,
+            http_route.description,
+            auth_method,
+        );
+
+        openapi_future_paths.push(future_path);
+    }
+
+    Ok(openapi_future_paths)
+}
+
+#[cfg(not(feature = "http_trigger"))]
+async fn http_routes_to_future_paths(
+    _db: &DB,
+    _user_db: UserDB,
+    _authed: &ApiAuthed,
+    _pg_pool: &mut PgConnection,
+    _http_route_filters: Option<&[HttpRouteFilter]>,
+    _w_id: &str,
+) -> Result<Vec<FuturePath>> {
+    Ok(Vec::new())
+}
+
+async fn webhook_to_future_paths(
+    pg_pool: &mut PgConnection,
+    webhook_filters: Option<&[WebhookFilter]>,
+    w_id: &str,
+) -> Result<Vec<FuturePath>> {
+    let mut openapi_future_paths = Vec::new();
+    if let Some(webhook_filters) = webhook_filters {
+        let mut script_webhook_filter = Vec::new();
+        let mut flow_webhook_filter = Vec::new();
+
+        for webhook in webhook_filters {
+            let full_regex = transform_to_minified_postgres_regex(&format!(
+                "{}/{}/{}",
+                &webhook.user_or_folder_regex, &webhook.user_or_folder_regex_value, &webhook.path
+            ));
+
+            match webhook.runnable_kind {
+                RunnableKind::Script => {
+                    script_webhook_filter.push(full_regex);
+                }
+                RunnableKind::Flow => {
+                    flow_webhook_filter.push(full_regex);
+                }
+            }
+        }
+
+        #[derive(Debug, Deserialize, Clone, Hash)]
+        struct MinifiedWebhook {
+            path: String,
+            description: Option<String>,
+            summary: Option<String>,
+        }
+
+        impl PartialEq for MinifiedWebhook {
+            fn eq(&self, other: &Self) -> bool {
+                self.path == other.path
+            }
+        }
+
+        impl Eq for MinifiedWebhook {}
+
+        let webhook_scripts = sqlx::query_as!(
+            MinifiedWebhook,
+            r#"SELECT 
+                    path,
+                    summary,
+                    description
+                FROM
+                    script
+                WHERE
+                    path ~ ANY($1) AND
+                    workspace_id = $2
+            "#,
+            &script_webhook_filter,
+            &w_id
+        )
+        .fetch_all(&mut *pg_pool)
+        .await?
+        .into_iter()
+        .unique()
+        .collect_vec();
+
+        let webhook_flows = sqlx::query_as!(
+            MinifiedWebhook,
+            r#"SELECT 
+                    path,
+                    summary,
+                    description
+                FROM
+                    flow
+                WHERE
+                    path ~ ANY($1) AND
+                    workspace_id = $2
+            "#,
+            &flow_webhook_filter,
+            &w_id
+        )
+        .fetch_all(&mut *pg_pool)
+        .await?
+        .into_iter()
+        .unique()
+        .collect_vec();
+
+        openapi_future_paths.reserve_exact(webhook_scripts.len() + webhook_flows.len());
+
+        for webhook in webhook_scripts {
+            openapi_future_paths.push(FuturePath::new(
+                webhook.path,
+                Kind::Webhook(WebhookConfig::new(RunnableKind::Script)),
+                None,
+                webhook.summary,
+                webhook.description,
+                Some(SecurityScheme::BearerJwt),
+            ));
+        }
+
+        for webhook in webhook_flows {
+            openapi_future_paths.push(FuturePath::new(
+                webhook.path,
+                Kind::Webhook(WebhookConfig::new(RunnableKind::Flow)),
+                None,
+                webhook.summary,
+                webhook.description,
+                Some(SecurityScheme::BearerJwt),
+            ));
+        }
+    }
+
+    Ok(openapi_future_paths)
+}
+
+async fn generate_openapi_future_path(
+    db: &DB,
+    user_db: UserDB,
+    authed: &ApiAuthed,
+    http_route_filters: Option<&[HttpRouteFilter]>,
+    webhook_filters: Option<&[WebhookFilter]>,
+    w_id: &str,
+) -> Result<Vec<FuturePath>> {
+    if http_route_filters.is_none() && webhook_filters.is_none() {
+        return Err(Error::BadRequest(
+            "Expected http route filter and/or webhook filters".to_string(),
+        ));
+    }
+
+    let mut tx = user_db.clone().begin(authed).await?;
+
+    let mut openapi_future_paths =
+        http_routes_to_future_paths(db, user_db, authed, &mut tx, http_route_filters, w_id).await?;
+
+    openapi_future_paths
+        .append(&mut webhook_to_future_paths(&mut tx, webhook_filters, w_id).await?);
+
+    tx.commit().await?;
+
+    if openapi_future_paths.is_empty() {
+        return Err(Error::NotFound(
+            "No match for the current filter".to_string(),
+        ));
+    }
+
+    Ok(openapi_future_paths)
+}
+
+async fn generate_openapi_spec(
+    Extension(authed): Extension<ApiAuthed>,
+    Extension(db): Extension<DB>,
+    Extension(user_db): Extension<UserDB>,
+    Path(w_id): Path<String>,
+    Json(generate_openapi): Json<GenerateOpenAPI>,
+) -> Result<String> {
+    let openapi_future_paths = generate_openapi_future_path(
+        &db,
+        user_db,
+        &authed,
+        generate_openapi.http_route_filters.as_deref(),
+        generate_openapi.webhook_filters.as_deref(),
+        &w_id,
+    )
+    .await?;
+
+    let openapi_document = generate_openapi_document(
+        generate_openapi.info.as_ref(),
+        generate_openapi.url.as_ref(),
+        openapi_future_paths,
+        generate_openapi.openapi_spec_format,
+    );
+
+    openapi_document
+}
+
+async fn download_spec(
+    Extension(authed): Extension<ApiAuthed>,
+    Extension(db): Extension<DB>,
+    Extension(user_db): Extension<UserDB>,
+    Path(w_id): Path<String>,
+    Json(generate_openapi): Json<GenerateOpenAPI>,
+) -> Result<Response> {
+    let openapi_future_paths = generate_openapi_future_path(
+        &db,
+        user_db,
+        &authed,
+        generate_openapi.http_route_filters.as_deref(),
+        generate_openapi.webhook_filters.as_deref(),
+        &w_id,
+    )
+    .await?;
+
+    let openapi_document = generate_openapi_document(
+        generate_openapi.info.as_ref(),
+        generate_openapi.url.as_ref(),
+        openapi_future_paths,
+        generate_openapi.openapi_spec_format,
+    )?;
+
+    let response = Response::builder()
+        .status(StatusCode::OK)
+        .header(
+            header::CONTENT_TYPE,
+            HeaderValue::from_static("application/octet-stream"),
+        )
+        .body(Body::from(openapi_document))
+        .unwrap();
+
+    Ok(response)
+}
diff --git a/backend/windmill-api/src/postgres_triggers/handler.rs b/backend/windmill-api/src/postgres_triggers/handler.rs
index 9beafadbf2..73e35c9e2f 100644
--- a/backend/windmill-api/src/postgres_triggers/handler.rs
+++ b/backend/windmill-api/src/postgres_triggers/handler.rs
@@ -15,14 +15,14 @@ use http::StatusCode;
 use itertools::Itertools;
 use pg_escape::{quote_identifier, quote_literal};
 use quick_cache::sync::Cache;
-use rust_postgres::types::Type;
+use rust_postgres::{types::Type, Client};
 use serde::{Deserialize, Deserializer, Serialize};
 use sql_builder::{bind::Bind, SqlBuilder};
-use sqlx::{postgres::types::Oid, Connection, FromRow, PgConnection};
-use windmill_audit::{audit_ee::audit_log, ActionKind};
+use sqlx::FromRow;
+use windmill_audit::{audit_oss::audit_log, ActionKind};
 use windmill_common::{
     db::UserDB,
-    error::{self, Error, JsonResult, Result},
+    error::{self, to_anyhow, Error, JsonResult, Result},
     utils::{empty_as_none, not_found_if_none, paginate, Pagination, StripPath},
     worker::CLOUD_HOSTED,
 };
@@ -30,9 +30,10 @@ use windmill_git_sync::{handle_deployment_metadata, DeployedObject};
 
 use super::{
     check_if_valid_publication_for_postgres_version, create_logical_replication_slot,
-    create_pg_publication, drop_publication, generate_random_string, get_pg_connection,
+    create_pg_publication, drop_publication, generate_random_string, get_default_pg_connection,
     ERROR_PUBLICATION_NAME_NOT_EXISTS,
 };
+use anyhow::anyhow;
 use lazy_static::lazy_static;
 
 #[derive(FromRow, Serialize, Deserialize, Debug)]
@@ -123,7 +124,7 @@ pub async fn test_postgres_connection(
     Json(test_postgres): Json<TestPostgres>,
 ) -> Result<()> {
     let connect_f = async {
-        get_pg_connection(
+        get_default_pg_connection(
             authed,
             Some(user_db),
             &db,
@@ -267,15 +268,17 @@ impl PostgresPublicationReplication {
 }
 
 async fn check_if_logical_replication_slot_exist(
-    pg_connection: &mut PgConnection,
+    pg_connection: &mut Client,
     replication_slot_name: &str,
 ) -> Result<bool> {
-    let exists = sqlx::query("SELECT slot_name FROM pg_replication_slots where slot_name = $1")
-        .bind(&replication_slot_name)
-        .fetch_optional(pg_connection)
-        .await?
-        .is_some();
-    Ok(exists)
+    let row = pg_connection
+        .query_opt(
+            "SELECT slot_name FROM pg_replication_slots WHERE slot_name = $1",
+            &[&replication_slot_name],
+        )
+        .await
+        .map_err(to_anyhow)?;
+    Ok(row.is_some())
 }
 
 async fn create_custom_slot_and_publication_inner(
@@ -286,30 +289,31 @@ async fn create_custom_slot_and_publication_inner(
     w_id: &str,
     publication: &PublicationData,
 ) -> Result<PostgresPublicationReplication> {
-    let mut pg_connection = get_pg_connection(
+    let mut pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
+
+    let tx = pg_connection.transaction().await.map_err(to_anyhow)?;
 
-    let mut tx = pg_connection.begin().await?;
     let publication_name = format!("windmill_trigger_{}", generate_random_string());
     let replication_slot_name = publication_name.clone();
-    
-    create_logical_replication_slot(&mut tx, &replication_slot_name).await?;
-    
+
+    create_logical_replication_slot(tx.client(), &replication_slot_name).await?;
     create_pg_publication(
-        &mut tx,
+        &tx.client(),
         &publication_name,
         publication.table_to_track.as_deref(),
         &publication.transaction_to_track,
     )
     .await?;
 
-    tx.commit().await?;
+    tx.commit().await.map_err(to_anyhow)?;
 
     Ok(PostgresPublicationReplication::new(
         publication_name,
@@ -317,14 +321,13 @@ async fn create_custom_slot_and_publication_inner(
     ))
 }
 
-pub async fn get_postgres_version_internal(pg_connection: &mut PgConnection) -> Result<String> {
-    let postgres_version: String = sqlx::query_scalar("SHOW server_version;")
-        .fetch_one(&mut *pg_connection)
+pub async fn get_postgres_version_internal(pg_connection: &Client) -> Result<String> {
+    let row = pg_connection
+        .query_one("SHOW server_version;", &[])
         .await
-        .map_err(|e| Error::Anyhow {
-            error: anyhow::anyhow!("Failed to retrieve PostgreSQL version: {}", e),
-            location: "postgres_triggers/handler.rs@379".to_string(),
-        })?;
+        .map_err(to_anyhow)?;
+
+    let postgres_version: String = row.get(0);
 
     Ok(postgres_version)
 }
@@ -335,16 +338,17 @@ pub async fn get_postgres_version(
     Extension(user_db): Extension<UserDB>,
     Path((w_id, postgres_resource_path)): Path<(String, String)>,
 ) -> Result<String> {
-    let mut pg_connection = get_pg_connection(
+    let pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
-    let postgres_version = get_postgres_version_internal(&mut pg_connection).await?;
+    let postgres_version = get_postgres_version_internal(&pg_connection).await?;
 
     Ok(postgres_version)
 }
@@ -595,29 +599,37 @@ pub async fn list_slot_name(
     Extension(db): Extension<DB>,
     Path((w_id, postgres_resource_path)): Path<(String, String)>,
 ) -> Result<Json<Vec<SlotList>>> {
-    let mut pg_connection = get_pg_connection(
+    let pg_connection: Client = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
-    let slots: Vec<SlotList> = sqlx::query_as(
-        r#"
-        SELECT 
-            slot_name,
-            active
-        FROM
-            pg_replication_slots 
-        WHERE 
-            plugin = 'pgoutput' AND
-            slot_type = 'logical';
-        "#,
-    )
-    .fetch_all(&mut pg_connection)
-    .await?;
+    let rows = pg_connection
+        .query(
+            r#"
+            SELECT 
+                slot_name,
+                active
+            FROM
+                pg_replication_slots 
+            WHERE 
+                plugin = 'pgoutput' AND
+                slot_type = 'logical';
+            "#,
+            &[],
+        )
+        .await
+        .map_err(to_anyhow)?;
+
+    let slots = rows
+        .into_iter()
+        .map(|row| SlotList { slot_name: row.get("slot_name"), active: row.get("active") })
+        .collect();
 
     Ok(Json(slots))
 }
@@ -634,48 +646,51 @@ pub async fn create_slot(
     Path((w_id, postgres_resource_path)): Path<(String, String)>,
     Json(Slot { name }): Json<Slot>,
 ) -> Result<String> {
-    let mut pg_connection = get_pg_connection(
+    let pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
-    create_logical_replication_slot(&mut pg_connection, &name).await?;
+    create_logical_replication_slot(&pg_connection, &name).await?;
 
     Ok(format!("Replication slot {} created!", name))
 }
 
-pub async fn drop_logical_replication_slot(
-    pg_connection: &mut PgConnection,
-    slot_name: &str,
-) -> Result<()> {
-    let active_pid: Option<i32> = sqlx::query_scalar(
-        r#"SELECT 
-            active_pid 
-        FROM 
-            pg_replication_slots 
-        WHERE 
-            slot_name = $1
-        "#,
-    )
-    .bind(&slot_name)
-    .fetch_optional(&mut *pg_connection)
-    .await?
-    .flatten();
+pub async fn drop_logical_replication_slot(pg_connection: &Client, slot_name: &str) -> Result<()> {
+    let row = pg_connection
+        .query_opt(
+            r#"
+            SELECT 
+                active_pid 
+            FROM 
+                pg_replication_slots 
+            WHERE 
+                slot_name = $1
+            "#,
+            &[&slot_name],
+        )
+        .await
+        .map_err(to_anyhow)?;
+
+    let active_pid = row.map(|r| r.get::<_, Option<i32>>(0)).flatten();
 
     if let Some(pid) = active_pid {
-        sqlx::query("SELECT pg_terminate_backend($1)")
-            .bind(pid)
-            .execute(&mut *pg_connection)
-            .await?;
+        pg_connection
+            .execute("SELECT pg_terminate_backend($1)", &[&pid])
+            .await
+            .map_err(to_anyhow)?;
     }
-    sqlx::query("SELECT pg_drop_replication_slot($1)")
-        .bind(&slot_name)
-        .execute(pg_connection)
-        .await?;
+
+    pg_connection
+        .execute("SELECT pg_drop_replication_slot($1)", &[&slot_name])
+        .await
+        .map_err(to_anyhow)?;
+
     Ok(())
 }
 
@@ -686,17 +701,17 @@ pub async fn drop_slot_name(
     Path((w_id, postgres_resource_path)): Path<(String, String)>,
     Json(Slot { name }): Json<Slot>,
 ) -> Result<String> {
-    let mut pg_connection =
-        get_pg_connection(authed, Some(user_db), &db, &postgres_resource_path, &w_id).await?;
+    let pg_connection =
+        get_default_pg_connection(authed, Some(user_db), &db, &postgres_resource_path, &w_id)
+            .await
+            .map_err(to_anyhow)?;
 
-    drop_logical_replication_slot(&mut pg_connection, &name).await?;
+    drop_logical_replication_slot(&pg_connection, &name)
+        .await
+        .map_err(to_anyhow)?;
 
     Ok(format!("Replication slot {} deleted!", name))
 }
-#[derive(FromRow, Debug, Serialize)]
-struct PublicationName {
-    publication_name: String,
-}
 
 pub async fn list_database_publication(
     authed: ApiAuthed,
@@ -704,23 +719,27 @@ pub async fn list_database_publication(
     Extension(db): Extension<DB>,
     Path((w_id, postgres_resource_path)): Path<(String, String)>,
 ) -> Result<Json<Vec<String>>> {
-    let mut pg_connection = get_pg_connection(
+    let pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
-    let publication_names: Vec<PublicationName> =
-        sqlx::query_as("SELECT pubname AS publication_name FROM pg_publication;")
-            .fetch_all(&mut pg_connection)
-            .await?;
+    let rows = pg_connection
+        .query(
+            "SELECT pubname AS publication_name FROM pg_publication;",
+            &[],
+        )
+        .await
+        .map_err(to_anyhow)?;
 
-    let publications = publication_names
-        .iter()
-        .map(|publication| publication.publication_name.to_owned())
+    let publications = rows
+        .into_iter()
+        .map(|row| row.get::<_, String>("publication_name"))
         .collect_vec();
 
     Ok(Json(publications))
@@ -732,14 +751,15 @@ pub async fn get_publication_info(
     Extension(db): Extension<DB>,
     Path((w_id, publication_name, postgres_resource_path)): Path<(String, String, String)>,
 ) -> Result<Json<PublicationData>> {
-    let mut pg_connection = get_pg_connection(
+    let mut pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
     let publication_data =
         get_publication_scope_and_transaction(&mut pg_connection, &publication_name).await;
@@ -772,28 +792,29 @@ pub async fn create_publication(
     Path((w_id, publication_name, postgres_resource_path)): Path<(String, String, String)>,
     Json(publication_data): Json<PublicationData>,
 ) -> Result<String> {
-    let mut pg_connection = get_pg_connection(
+    let mut pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
     let PublicationData { table_to_track, transaction_to_track } = publication_data;
 
-    let mut tx = pg_connection.begin().await?;
+    let tx = pg_connection.transaction().await.map_err(to_anyhow)?;
 
     create_pg_publication(
-        &mut tx,
+        tx.client(),
         &publication_name,
         table_to_track.as_deref(),
         &transaction_to_track,
     )
     .await?;
 
-    tx.commit().await?;
+    tx.commit().await.map_err(to_anyhow)?;
 
     Ok(format!(
         "Publication {} successfully created!",
@@ -807,14 +828,15 @@ pub async fn delete_publication(
     Extension(db): Extension<DB>,
     Path((w_id, publication_name, postgres_resource_path)): Path<(String, String, String)>,
 ) -> Result<String> {
-    let mut pg_connection = get_pg_connection(
+    let mut pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
     drop_publication(&mut pg_connection, &publication_name).await?;
 
@@ -825,70 +847,67 @@ pub async fn delete_publication(
 }
 
 pub async fn update_pg_publication(
-    pg_connection: &mut PgConnection,
+    pg_connection: &Client,
     publication_name: &str,
     PublicationData { table_to_track, transaction_to_track }: PublicationData,
     all_table: Option<bool>,
 ) -> Result<()> {
-    let quoted_publication_name = quote_identifier(&publication_name);
+    let quoted_publication_name = quote_identifier(publication_name);
     let transaction_to_track_as_str = transaction_to_track.iter().join(",");
     match table_to_track {
         Some(ref relations) if !relations.is_empty() => {
-            //if all table is none it means that the publication do not exist in the database
+            // If all_table is None, the publication does not exist yet
             if all_table.unwrap_or(true) {
-                if all_table.is_some() {
-                    drop_publication(pg_connection, &publication_name).await?;
+                if all_table.is_some_and(|all_table| all_table) {
+                    drop_publication(pg_connection, publication_name)
+                        .await
+                        .map_err(to_anyhow)?;
                 }
                 create_pg_publication(
                     pg_connection,
-                    &publication_name,
+                    publication_name,
                     table_to_track.as_deref(),
                     &transaction_to_track,
                 )
-                .await?;
+                .await
+                .map_err(to_anyhow)?;
             } else {
                 let pg_14 = check_if_valid_publication_for_postgres_version(
                     pg_connection,
                     table_to_track.as_deref(),
                 )
-                .await?;
+                .await
+                .map_err(to_anyhow)?;
 
-                let mut query = String::from("");
+                let mut query = format!("ALTER PUBLICATION {} SET ", quoted_publication_name);
                 let mut first = true;
-                query.push_str("ALTER PUBLICATION ");
-                query.push_str(&quoted_publication_name);
-                query.push_str(" SET");
+
                 for (i, schema) in relations.iter().enumerate() {
                     if schema.table_to_track.is_empty() {
-                        query.push_str(" TABLES IN SCHEMA ");
-                        let quoted_schema = quote_identifier(&schema.schema_name);
-                        query.push_str(&quoted_schema);
+                        query.push_str("TABLES IN SCHEMA ");
+                        query.push_str(&quote_identifier(&schema.schema_name));
                     } else {
                         if pg_14 && first {
-                            query.push_str(" TABLE ONLY ");
-                            first = false
+                            query.push_str("TABLE ONLY ");
+                            first = false;
                         } else if !pg_14 {
-                            query.push_str(" TABLE ONLY ");
+                            query.push_str("TABLE ONLY ");
                         }
+
                         for (j, table) in schema.table_to_track.iter().enumerate() {
                             let table_name = quote_identifier(&table.table_name);
                             let schema_name = quote_identifier(&schema.schema_name);
-                            let full_name = format!("{}.{}", &schema_name, &table_name);
+                            let full_name = format!("{}.{}", schema_name, table_name);
                             query.push_str(&full_name);
+
                             if let Some(columns) = table.columns_name.as_ref() {
-                                query.push_str(" (");
-                                let columns = columns
-                                    .iter()
-                                    .map(|column| quote_identifier(column))
-                                    .join(", ");
-                                query.push_str(&columns);
-                                query.push_str(") ");
+                                let cols =
+                                    columns.iter().map(|col| quote_identifier(col)).join(", ");
+                                query.push_str(&format!(" ({})", cols));
                             }
 
                             if let Some(where_clause) = &table.where_clause {
-                                query.push_str(" WHERE (");
-                                query.push_str(where_clause);
-                                query.push(')');
+                                query.push_str(&format!(" WHERE ({})", where_clause));
                             }
 
                             if j + 1 != schema.table_to_track.len() {
@@ -896,39 +915,42 @@ pub async fn update_pg_publication(
                             }
                         }
                     }
-                    if i < relations.len() - 1 {
-                        query.push(',');
+
+                    if i + 1 != relations.len() {
+                        query.push_str(", ");
                     }
                 }
 
-                sqlx::query(&query).execute(&mut *pg_connection).await?;
+                pg_connection
+                    .execute(&query, &[])
+                    .await
+                    .map_err(to_anyhow)?;
 
-                let mut query = String::new();
-
-                query.push_str("ALTER PUBLICATION ");
-                query.push_str(&quoted_publication_name);
-                query.push_str(&format!(
-                    " SET (publish = '{}');",
-                    transaction_to_track_as_str
-                ));
-
-                sqlx::query(&query).execute(pg_connection).await?;
+                let publish_query = format!(
+                    "ALTER PUBLICATION {} SET (publish = '{}');",
+                    quoted_publication_name, transaction_to_track_as_str
+                );
+                pg_connection
+                    .execute(&publish_query, &[])
+                    .await
+                    .map_err(to_anyhow)?;
             }
         }
         _ => {
-            drop_publication(pg_connection, &publication_name).await?;
-            let query_to_execute = format!(
-                r#"
-                CREATE
-                    PUBLICATION {} FOR ALL TABLES WITH (publish = '{}');
-                "#,
+            drop_publication(pg_connection, publication_name)
+                .await
+                .map_err(to_anyhow)?;
+            let create_all_query = format!(
+                "CREATE PUBLICATION {} FOR ALL TABLES WITH (publish = '{}');",
                 quoted_publication_name, transaction_to_track_as_str
             );
-            sqlx::query(&query_to_execute)
-                .execute(pg_connection)
-                .await?;
+            pg_connection
+                .execute(&create_all_query, &[])
+                .await
+                .map_err(to_anyhow)?;
         }
-    };
+    }
+
     Ok(())
 }
 
@@ -939,28 +961,32 @@ pub async fn alter_publication(
     Path((w_id, publication_name, postgres_resource_path)): Path<(String, String, String)>,
     Json(publication_data): Json<PublicationData>,
 ) -> Result<String> {
-    let mut pg_connection = get_pg_connection(
+    let mut pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
-    let mut tx = pg_connection.begin().await?;
-    
-    let publication = get_publication_scope_and_transaction(&mut tx, &publication_name).await?;
+    let tx = pg_connection.transaction().await.map_err(to_anyhow)?;
+
+    let publication = get_publication_scope_and_transaction(tx.client(), &publication_name)
+        .await
+        .map_err(to_anyhow)?;
 
     update_pg_publication(
-        &mut tx,
+        tx.client(),
         &publication_name,
         publication_data,
         publication.map(|publication| publication.0),
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
-    tx.commit().await?;
+    tx.commit().await.map_err(to_anyhow)?;
 
     Ok(format!(
         "Publication {} updated with success",
@@ -968,133 +994,126 @@ pub async fn alter_publication(
     ))
 }
 
-async fn get_publication_scope_and_transaction(
-    pg_connection: &mut PgConnection,
+pub async fn get_publication_scope_and_transaction(
+    pg_connection: &Client,
     publication_name: &str,
 ) -> Result<Option<(bool, Vec<String>)>> {
-    #[derive(Debug, Deserialize, FromRow)]
-    struct PublicationTransaction {
-        all_table: bool,
-        insert: bool,
-        update: bool,
-        delete: bool,
-    }
+    let row_opt = pg_connection
+        .query_opt(
+            r#"
+            SELECT
+                puballtables AS all_table,
+                pubinsert AS insert,
+                pubupdate AS update,
+                pubdelete AS delete
+            FROM
+                pg_publication
+            WHERE
+                pubname = $1
+            "#,
+            &[&publication_name],
+        )
+        .await
+        .map_err(to_anyhow)?;
 
-    let publication: Option<PublicationTransaction> = sqlx::query_as(
-        r#"
-        SELECT
-            puballtables AS all_table,
-            pubinsert AS insert,
-            pubupdate AS update,
-            pubdelete AS delete
-        FROM
-            pg_publication
-        WHERE
-            pubname = $1
-        "#,
-    )
-    .bind(publication_name)
-    .fetch_optional(&mut *pg_connection)
-    .await?;
+    let row = match row_opt {
+        Some(r) => r,
+        None => return Ok(None),
+    };
 
-    if publication.is_none() {
-        return Ok(None);
-    }
+    let all_table: bool = row.get("all_table");
+    let pub_insert: bool = row.get("insert");
+    let pub_update: bool = row.get("update");
+    let pub_delete: bool = row.get("delete");
 
     let mut transaction_to_track = Vec::with_capacity(3);
-
-    let publication = publication.unwrap();
-    if publication.insert {
+    if pub_insert {
         transaction_to_track.push("insert".to_string());
     }
-    if publication.update {
+    if pub_update {
         transaction_to_track.push("update".to_string());
     }
-    if publication.delete {
+    if pub_delete {
         transaction_to_track.push("delete".to_string());
     }
 
-    Ok(Some((publication.all_table, transaction_to_track)))
+    Ok(Some((all_table, transaction_to_track)))
 }
 
-async fn get_tracked_relations(
-    pg_connection: &mut PgConnection,
+pub async fn get_tracked_relations(
+    pg_connection: &Client,
     publication_name: &str,
 ) -> Result<Vec<Relations>> {
-    #[derive(Debug, Deserialize, FromRow)]
-    struct PublicationData {
-        schema_name: Option<String>,
-        table_name: Option<String>,
-        #[serde(default)]
-        columns: Option<Vec<String>>,
-        #[serde(default)]
-        where_clause: Option<String>,
-    }
-
     let pg_version = get_postgres_version_internal(pg_connection).await?;
+
     let query = if pg_version.starts_with("14") {
         r#"
-            SELECT
+        SELECT
             schemaname AS schema_name,
             tablename AS table_name,
             NULL::text[] AS columns,
             NULL::text AS where_clause
-            FROM
-                pg_publication_tables
-            WHERE
-                pubname = $1;
-            "#
+        FROM
+            pg_publication_tables
+        WHERE
+            pubname = $1;
+        "#
     } else {
         r#"
-            SELECT
+        SELECT
             schemaname AS schema_name,
             tablename AS table_name,
             attnames AS columns,
             rowfilter AS where_clause
-            FROM
-                pg_publication_tables
-            WHERE
-                pubname = $1;
-            "#
+        FROM
+            pg_publication_tables
+        WHERE
+            pubname = $1;
+        "#
     };
 
-    let publications: Vec<PublicationData> = sqlx::query_as(query)
-        .bind(publication_name)
-        .fetch_all(&mut *pg_connection)
-        .await?;
+    let rows = pg_connection
+        .query(query, &[&publication_name])
+        .await
+        .map_err(to_anyhow)?;
 
     let mut table_to_track: HashMap<String, Relations> = HashMap::new();
 
-    for publication in publications {
-        let schema_name = publication.schema_name.ok_or_else(|| Error::Anyhow {
-            error: anyhow::anyhow!(
+    for row in rows {
+        let schema_name: Option<String> = row.get("schema_name");
+        let table_name: Option<String> = row.get("table_name");
+        let columns: Option<Vec<String>> = row.get("columns");
+        let where_clause: Option<String> = row.get("where_clause");
+
+        let schema_name = schema_name.ok_or_else::<Error, _>( || {
+            anyhow!(
                 "Unexpected NULL `schema_name` in publication entry (pubname: `{}`). This should never happen unless PostgreSQL internals are corrupted.",
                 publication_name,
-            ),
-            location: "postgres_triggers/handler.rs@1093".to_string(),
-        })?;
+            ).into()
+        }
+        )?;
 
-        let table_name = publication.table_name.ok_or_else(|| Error::Anyhow {
-            error: anyhow::anyhow!(
+        let table_name = table_name.ok_or_else::<Error, _>(|| {
+            anyhow!(
                 "Unexpected NULL `table_name` for schema `{}` in publication `{}`. This should never happen unless PostgreSQL internals are corrupted.",
                 schema_name,
                 publication_name,
-            ),
-            location: "postgres_triggers/handler.rs@1102".to_string(),
+            ).into()
         })?;
 
         let entry = table_to_track.entry(schema_name.clone());
-        let table_to_track =
-            TableToTrack::new(table_name, publication.where_clause, publication.columns);
+        let table_to_track = TableToTrack::new(table_name, where_clause, columns);
+
         match entry {
-            Occupied(mut occuped) => {
+            std::collections::hash_map::Entry::Occupied(mut occuped) => {
                 occuped.get_mut().add_new_table(table_to_track);
             }
-            Vacant(vacant) => {
+            std::collections::hash_map::Entry::Vacant(vacant) => {
                 vacant.insert(Relations::new(schema_name, vec![table_to_track]));
             }
         }
     }
+
     Ok(table_to_track.into_values().collect_vec())
 }
 
@@ -1161,41 +1180,48 @@ pub async fn update_postgres_trigger(
         publication,
     } = postgres_trigger;
 
-    let mut pg_connection = get_pg_connection(
+    let mut pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
     let exists =
         check_if_logical_replication_slot_exist(&mut pg_connection, &replication_slot_name).await?;
 
-    let mut tx = pg_connection.begin().await?;
+    let tx = pg_connection.transaction().await.map_err(to_anyhow)?;
 
     if !exists {
         tracing::debug!(
             "Logical replication slot named: {} does not exists creating it...",
             &replication_slot_name
         );
-        create_logical_replication_slot(&mut tx, &replication_slot_name).await?;
+        create_logical_replication_slot(tx.client(), &replication_slot_name)
+            .await
+            .map_err(to_anyhow)?;
     }
 
     if let Some(publication) = publication {
         let publication_data =
-            get_publication_scope_and_transaction(&mut tx, &publication_name).await?;
+            get_publication_scope_and_transaction(tx.client(), &publication_name)
+                .await
+                .map_err(to_anyhow)?;
 
         update_pg_publication(
-            &mut tx,
+            tx.client(),
             &publication_name,
             publication,
             publication_data.map(|publication| publication.0),
         )
-        .await?;
+        .await
+        .map_err(to_anyhow)?;
     }
-    tx.commit().await?;
+
+    tx.commit().await.map_err(to_anyhow)?;
 
     let mut tx = user_db.begin(&authed).await?;
 
@@ -1415,53 +1441,40 @@ pub async fn create_template_script(
     Json(template_script): Json<TemplateScript>,
 ) -> Result<String> {
     let TemplateScript { postgres_resource_path, relations, language } = template_script;
-    if relations.is_none() {
-        return Err(Error::BadRequest(
-            "You must at least choose schema to fetch table from".to_string(),
-        ));
-    }
 
-    let mut pg_connection = get_pg_connection(
+    let relations = match relations {
+        Some(r) => r,
+        None => return Err(anyhow!("You must at least choose schema to fetch table from").into()),
+    };
+
+    let pg_connection: Client = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
-    #[derive(Debug, FromRow, Deserialize)]
-    struct ColumnInfo {
-        table_schema: Option<String>,
-        table_name: Option<String>,
-        column_name: Option<String>,
-        oid: Oid,
-        is_nullable: bool,
-    }
-
-    let relations = relations.unwrap();
     let mut schema_or_fully_qualified_name = Vec::with_capacity(relations.len());
-    let mut columns_list = Vec::new();
+    let mut columns_list = Vec::with_capacity(relations.len());
+
     for relation in relations {
         if !relation.table_to_track.is_empty() {
-            for table_to_track in relation.table_to_track {
-                let fully_qualified_name =
-                    format!("{}.{}", &relation.schema_name, table_to_track.table_name);
+            for table in relation.table_to_track {
+                let fully_qualified_name = format!("{}.{}", relation.schema_name, table.table_name);
                 schema_or_fully_qualified_name.push(quote_literal(&fully_qualified_name));
-
-                let columns = table_to_track
+                let columns = table
                     .columns_name
-                    .map(|columns| quote_literal(&columns.join(",")))
-                    .or_else(|| Some("''".to_string()))
-                    .unwrap();
-
+                    .map(|c| quote_literal(&c.join(",")))
+                    .unwrap_or_else(|| "''".to_string());
                 columns_list.push(columns);
             }
-            continue;
+        } else {
+            schema_or_fully_qualified_name.push(quote_literal(&relation.schema_name));
+            columns_list.push("''".to_string());
         }
-
-        schema_or_fully_qualified_name.push(quote_literal(&relation.schema_name));
-        columns_list.push(String::from("''"));
     }
 
     let tables_name = schema_or_fully_qualified_name.join(",");
@@ -1481,8 +1494,7 @@ pub async fn create_template_script(
                     WHEN tcm.column_list = '' THEN NULL
                     ELSE string_to_array(tcm.column_list, ',')
                 END AS columns
-            FROM
-                table_column_mapping tcm
+            FROM table_column_mapping tcm
         )
         SELECT
             ns.nspname AS table_schema,
@@ -1490,22 +1502,16 @@ pub async fn create_template_script(
             attr.attname AS column_name,
             attr.atttypid AS oid,
             attr.attnotnull AS is_nullable
-        FROM
-            pg_attribute attr
-        JOIN
-            pg_class cls
-            ON attr.attrelid = cls.oid
-        JOIN
-            pg_namespace ns
-            ON cls.relnamespace = ns.oid
-        JOIN
-            parsed_columns pc
+        FROM pg_attribute attr
+        JOIN pg_class cls ON attr.attrelid = cls.oid
+        JOIN pg_namespace ns ON cls.relnamespace = ns.oid
+        JOIN parsed_columns pc
             ON ns.nspname || '.' || cls.relname = pc.table_name
             OR ns.nspname = pc.table_name
         WHERE
-            attr.attnum > 0 -- Exclude system columns
-            AND NOT attr.attisdropped -- Exclude dropped columns
-            AND cls.relkind = 'r' -- Restrict to base tables
+            attr.attnum > 0
+            AND NOT attr.attisdropped
+            AND cls.relkind = 'r'
             AND (
                 pc.columns IS NULL
                 OR attr.attname = ANY(pc.columns)
@@ -1514,51 +1520,52 @@ pub async fn create_template_script(
         tables_name, columns_list
     );
 
-    let rows: Vec<ColumnInfo> = sqlx::query_as(&query).fetch_all(&mut pg_connection).await?;
-    let mut mapper: HashMap<String, HashMap<String, Vec<MappingInfo>>> = HashMap::new();
+    let rows = pg_connection.query(&query, &[]).await.map_err(to_anyhow)?;
+
+    let mut schema_map: HashMap<String, HashMap<String, Vec<MappingInfo>>> = HashMap::new();
+
+    #[derive(Debug)]
+    struct ColumnInfo {
+        table_schema: String,
+        table_name: String,
+        column_name: String,
+        oid: u32,
+        is_nullable: bool,
+    }
 
     for row in rows {
-        let ColumnInfo { table_schema, table_name, column_name, oid, is_nullable } = row;
-
-        let entry = mapper.entry(table_schema.unwrap());
+        let info = ColumnInfo {
+            table_schema: row.get("table_schema"),
+            table_name: row.get("table_name"),
+            column_name: row.get("column_name"),
+            oid: row.get::<_, u32>("oid"),
+            is_nullable: row.get::<_, bool>("is_nullable"),
+        };
 
         let mapped_info =
-            MappingInfo::new(column_name.unwrap(), Type::from_oid(oid.0), is_nullable);
+            MappingInfo::new(info.column_name, Type::from_oid(info.oid), info.is_nullable);
 
-        match entry {
-            Occupied(mut occupied) => {
-                let entry = occupied.get_mut().entry(table_name.unwrap());
-                match entry {
-                    Occupied(mut occuped) => {
-                        let mapping_info = occuped.get_mut();
-                        mapping_info.push(mapped_info);
-                    }
-                    Vacant(vacant) => {
-                        let mut mapping_info = Vec::with_capacity(10);
-                        mapping_info.push(mapped_info);
-                        vacant.insert(mapping_info);
-                    }
+        match schema_map.entry(info.table_schema) {
+            Occupied(mut schema_entry) => match schema_entry.get_mut().entry(info.table_name) {
+                Occupied(mut table_entry) => {
+                    table_entry.get_mut().push(mapped_info);
                 }
-            }
-            Vacant(vacant) => {
-                let mut mapping_info = Vec::with_capacity(10);
-                mapping_info.push(mapped_info);
-                vacant.insert(HashMap::from([(table_name.unwrap(), mapping_info)]));
+                Vacant(v) => {
+                    v.insert(vec![mapped_info]);
+                }
+            },
+            Vacant(schema_vacant) => {
+                let mut table_map = HashMap::new();
+                table_map.insert(info.table_name, vec![mapped_info]);
+                schema_vacant.insert(table_map);
             }
         }
     }
 
-    let mapper = Mapper::new(mapper, language);
-
-    let create_template_id = |w_id: &str| -> String {
-        let uuid = uuid::Uuid::new_v4().to_string();
-        let id = format!("{}-{}", &w_id, &uuid);
-
-        id
-    };
-
+    let mapper = Mapper::new(schema_map, language);
     let template = mapper.get_template();
-    let id = create_template_id(&w_id);
+
+    let id = format!("{}-{}", w_id, uuid::Uuid::new_v4());
 
     TEMPLATE.insert(id.clone(), template);
 
@@ -1571,24 +1578,24 @@ pub async fn is_database_in_logical_level(
     Extension(db): Extension<DB>,
     Path((w_id, postgres_resource_path)): Path<(String, String)>,
 ) -> error::JsonResult<bool> {
-    let mut pg_connection = get_pg_connection(
+    let pg_connection = get_default_pg_connection(
         authed.clone(),
         Some(user_db.clone()),
         &db,
         &postgres_resource_path,
         &w_id,
     )
-    .await?;
+    .await
+    .map_err(to_anyhow)?;
 
-    let wal_level: Option<String> = sqlx::query_scalar("SHOW WAL_LEVEL;")
-        .fetch_optional(&mut pg_connection)
-        .await?
-        .flatten();
+    let row_opt = pg_connection
+        .query_opt("SHOW wal_level;", &[])
+        .await
+        .map_err(to_anyhow)?;
 
-    let is_logical = match wal_level.as_deref() {
-        Some("logical") => true,
-        _ => false,
-    };
+    let wal_level: Option<String> = row_opt.map(|row| row.get(0));
+
+    let is_logical = matches!(wal_level.as_deref(), Some("logical"));
 
     Ok(Json(is_logical))
 }
diff --git a/backend/windmill-api/src/postgres_triggers/mod.rs b/backend/windmill-api/src/postgres_triggers/mod.rs
index 1cb0968f30..eff341436f 100644
--- a/backend/windmill-api/src/postgres_triggers/mod.rs
+++ b/backend/windmill-api/src/postgres_triggers/mod.rs
@@ -7,15 +7,13 @@ use crate::{
 };
 use chrono::Utc;
 use itertools::Itertools;
-use pg_escape::{quote_identifier, quote_literal};
+use native_tls::{Certificate, TlsConnector};
+use pg_escape::quote_identifier;
 use rand::Rng;
+use rust_postgres::{config::SslMode, Client, Config, NoTls};
+use rust_postgres_native_tls::MakeTlsConnector;
 use serde_json::value::RawValue;
-use sqlx::{
-    postgres::{PgConnectOptions, PgSslMode},
-    Connection, PgConnection,
-};
 use std::collections::HashMap;
-use std::str::FromStr;
 
 use axum::{
     routing::{delete, get, post},
@@ -33,7 +31,7 @@ use handler::{
 };
 use windmill_common::{
     db::UserDB,
-    error::{Error, Result},
+    error::{to_anyhow, Error, Result},
     utils::StripPath,
 };
 mod bool;
@@ -52,76 +50,144 @@ const ERROR_REPLICATION_SLOT_NOT_EXISTS: &str = r#"The replication slot associat
 
 const ERROR_PUBLICATION_NAME_NOT_EXISTS: &str = r#"The publication associated with this trigger no longer exists. Recreate a new publication or select an existing one in the advanced tab, or delete and recreate a new trigger"#;
 
+fn build_tls_connector(
+    ssl_mode: SslMode,
+    root_certificate_pem: Option<&String>,
+) -> Result<Option<MakeTlsConnector>> {
+    let get_tls_builder_for_verify = |root_certificate: Option<&String>| {
+        let mut builder = TlsConnector::builder();
+        if let Some(root_certificate) = root_certificate {
+            let root_certificate_pem =
+                Certificate::from_pem(root_certificate.as_bytes()).map_err(to_anyhow)?;
+            builder.add_root_certificate(root_certificate_pem);
+        }
+        Ok::<_, Error>(builder)
+    };
+    let connector = match ssl_mode {
+        SslMode::Disable => return Ok(None),
+        SslMode::Require | SslMode::Prefer => {
+            let mut builder = TlsConnector::builder();
+            builder.danger_accept_invalid_certs(true);
+            builder.danger_accept_invalid_hostnames(true);
+            builder
+        }
+
+        SslMode::VerifyCa => {
+            let mut builder = get_tls_builder_for_verify(root_certificate_pem)?;
+            builder.danger_accept_invalid_hostnames(true);
+            builder
+        }
+
+        SslMode::VerifyFull => {
+            let builder = get_tls_builder_for_verify(root_certificate_pem)?;
+            builder
+        }
+        _ => unreachable!(),
+    };
+
+    Ok(Some(MakeTlsConnector::new(
+        connector.build().map_err(to_anyhow)?,
+    )))
+}
+
+pub async fn get_raw_postgres_connection(
+    database: &Postgres,
+    logical_mode: bool,
+) -> Result<Client> {
+    let ssl_mode = match database.sslmode.as_ref() {
+            "disable" => SslMode::Disable,
+            "" | "prefer" | "allow" => SslMode::Prefer,
+            "require" => SslMode::Require,
+            "verify-ca" => SslMode::VerifyCa,
+            "verify-full" => SslMode::VerifyFull,
+            ssl_mode => {
+                return Err(Error::BadRequest(
+                    format!("Invalid ssl mode for postgres: {}, please put a valid ssl_mode among the following available ssl mode: ['disable', 'allow', 'prefer', 'verify-ca', 'verify-full']", ssl_mode),
+                ))
+            }
+        };
+
+    let mut config = Config::new();
+    config
+        .dbname(&database.dbname)
+        .host(&database.host)
+        .user(&database.user)
+        .ssl_mode(ssl_mode);
+
+    if logical_mode {
+        config.replication_mode(rust_postgres::config::ReplicationMode::Logical);
+    }
+
+    if let Some(port) = database.port {
+        config.port(port);
+    };
+
+    if !database.password.is_empty() {
+        config.password(&database.password);
+    }
+
+    let connector = build_tls_connector(ssl_mode, database.root_certificate_pem.as_ref())?;
+
+    let client = if let Some(connector) = connector {
+        let (client, connection) = config.connect(connector).await.map_err(to_anyhow)?;
+        tokio::spawn(async move {
+            if let Err(e) = connection.await {
+                tracing::debug!("{:#?}", e);
+            };
+            tracing::info!("Successfully Connected into database");
+        });
+        client
+    } else {
+        let (client, connection) = config.connect(NoTls).await.map_err(to_anyhow)?;
+        tokio::spawn(async move {
+            if let Err(e) = connection.await {
+                tracing::debug!("{:#?}", e);
+            };
+            tracing::info!("Successfully Connected into database");
+        });
+        client
+    };
+
+    Ok(client)
+}
+
 pub async fn get_pg_connection(
     authed: ApiAuthed,
     user_db: Option<UserDB>,
     db: &DB,
     postgres_resource_path: &str,
     w_id: &str,
-) -> Result<PgConnection> {
+    logical_mode: bool,
+) -> Result<Client> {
     let database =
-        try_get_resource_from_db_as::<Postgres>(authed, user_db, db, postgres_resource_path, w_id)
+        try_get_resource_from_db_as::<Postgres>(&authed, user_db, db, postgres_resource_path, w_id)
             .await?;
 
-    Ok(get_raw_postgres_connection(&database).await?)
+    Ok(get_raw_postgres_connection(&database, logical_mode).await?)
 }
 
-pub async fn get_raw_postgres_connection(db: &Postgres) -> Result<PgConnection> {
-    let options = {
-        let sslmode = if !db.sslmode.is_empty() {
-            PgSslMode::from_str(&db.sslmode)?
-        } else {
-            PgSslMode::Prefer
-        };
-        let options = {
-            let inner_options = PgConnectOptions::new()
-                .host(&db.host)
-                .database(&db.dbname)
-                .ssl_mode(sslmode)
-                .username(&db.user);
-
-            if let Some(port) = db.port {
-                inner_options.port(port)
-            } else {
-                inner_options
-            }
-        };
-
-        let options = if let Some(root_certificate_pem) = &db.root_certificate_pem {
-            options.ssl_root_cert_from_pem(root_certificate_pem.as_bytes().to_vec())
-        } else {
-            options
-        };
-
-        if !db.password.is_empty() {
-            options.password(&db.password)
-        } else {
-            options
-        }
-    };
-    Ok(PgConnection::connect_with(&options).await?)
+pub async fn get_default_pg_connection(
+    authed: ApiAuthed,
+    user_db: Option<UserDB>,
+    db: &DB,
+    postgres_resource_path: &str,
+    w_id: &str,
+) -> Result<Client> {
+    get_pg_connection(authed, user_db, db, postgres_resource_path, w_id, false).await
 }
 
-pub async fn create_logical_replication_slot(
-    pg_connection: &mut PgConnection,
-    name: &str,
-) -> Result<()> {
-    let query = format!(
-        r#"
-        SELECT 
-                *
-        FROM
-            pg_create_logical_replication_slot({}, 'pgoutput');"#,
-        quote_literal(&name)
-    );
-
-    sqlx::query(&query).execute(pg_connection).await?;
-
+pub async fn create_logical_replication_slot(tx: &Client, slot_name: &str) -> Result<()> {
+    tx.execute(
+        &format!("SELECT * FROM pg_create_logical_replication_slot($1, 'pgoutput')"),
+        &[&slot_name],
+    )
+    .await
+    .map_err(to_anyhow)?;
     Ok(())
 }
 
 async fn check_if_valid_publication_for_postgres_version(
-    pg_connection: &mut PgConnection,
+    pg_connection: &Client,
     table_to_track: Option<&[Relations]>,
 ) -> Result<bool> {
     let postgres_version = get_postgres_version_internal(pg_connection).await?;
@@ -155,7 +221,7 @@ async fn check_if_valid_publication_for_postgres_version(
 }
 
 pub async fn create_pg_publication(
-    pg_connection: &mut PgConnection,
+    pg_connection: &Client,
     publication_name: &str,
     table_to_track: Option<&[Relations]>,
     transaction_to_track: &[String],
@@ -177,7 +243,7 @@ pub async fn create_pg_publication(
                 } else {
                     if pg_14 && first {
                         query.push_str(" TABLE ONLY ");
-                        first = false;
+                        first = false
                     } else if !pg_14 {
                         query.push_str(" TABLE ONLY ");
                     }
@@ -224,20 +290,22 @@ pub async fn create_pg_publication(
         query.push_str("');");
     }
 
-    sqlx::query(&query).execute(pg_connection).await?;
-
+    pg_connection
+        .execute(&query, &[])
+        .await
+        .map_err(to_anyhow)?;
     Ok(())
 }
 
-pub async fn drop_publication(
-    pg_connection: &mut PgConnection,
-    publication_name: &str,
-) -> Result<()> {
+pub async fn drop_publication(pg_connection: &Client, publication_name: &str) -> Result<()> {
     let mut query = String::from("DROP PUBLICATION IF EXISTS ");
     let quoted_publication_name = quote_identifier(publication_name);
     query.push_str(&quoted_publication_name);
 
-    sqlx::query(&query).execute(pg_connection).await?;
+    pg_connection
+        .execute(&query, &[])
+        .await
+        .map_err(to_anyhow)?;
 
     Ok(())
 }
diff --git a/backend/windmill-api/src/postgres_triggers/trigger.rs b/backend/windmill-api/src/postgres_triggers/trigger.rs
index b16862992e..27313879b2 100644
--- a/backend/windmill-api/src/postgres_triggers/trigger.rs
+++ b/backend/windmill-api/src/postgres_triggers/trigger.rs
@@ -19,25 +19,27 @@ use crate::{
 use bytes::{BufMut, Bytes, BytesMut};
 use chrono::TimeZone;
 use futures::{pin_mut, SinkExt, StreamExt};
-use native_tls::{Certificate, TlsConnector};
 use pg_escape::{quote_identifier, quote_literal};
 use rand::seq::SliceRandom;
-use rust_postgres::{config::SslMode, Client, Config, CopyBothDuplex, NoTls, SimpleQueryMessage};
-use rust_postgres_native_tls::MakeTlsConnector;
+use rust_postgres::{Client, CopyBothDuplex, SimpleQueryMessage};
 use serde::Deserialize;
 use serde_json::value::RawValue;
 use sqlx::types::Json as SqlxJson;
 
 use windmill_common::{
-    db::UserDB, error, triggers::TriggerKind, utils::report_critical_error, worker::to_raw_value,
+    db::UserDB,
+    error::{self, to_anyhow},
+    triggers::TriggerKind,
+    utils::report_critical_error,
+    worker::to_raw_value,
     INSTANCE_NAME,
 };
 
 use super::{
-    drop_publication, get_pg_connection,
+    drop_publication, get_default_pg_connection, get_raw_postgres_connection,
     handler::{drop_logical_replication_slot, Postgres, PostgresTrigger},
     replication_message::PrimaryKeepAliveBody,
-    ERROR_PUBLICATION_NAME_NOT_EXISTS, ERROR_REPLICATION_SLOT_NOT_EXISTS,
+    Error, ERROR_PUBLICATION_NAME_NOT_EXISTS, ERROR_REPLICATION_SLOT_NOT_EXISTS,
 };
 
 pub struct LogicalReplicationSettings {
@@ -69,109 +71,11 @@ impl RowExist for Vec<SimpleQueryMessage> {
     }
 }
 
-#[derive(thiserror::Error, Debug)]
-enum Error {
-    #[error("Error from database: {0}")]
-    Postgres(#[from] rust_postgres::Error),
-    #[error("Error : {0}")]
-    Common(#[from] windmill_common::error::Error),
-    #[error("Tls Error: {0}")]
-    Tls(#[from] native_tls::Error),
-}
-
-fn build_tls_connector(
-    ssl_mode: SslMode,
-    root_certificate_pem: Option<&String>,
-) -> Result<Option<MakeTlsConnector>, Error> {
-    let get_tls_builder_for_verify = |root_certificate: Option<&String>| {
-        let mut builder = TlsConnector::builder();
-        if let Some(root_certificate) = root_certificate {
-            let root_certificate_pem = Certificate::from_pem(root_certificate.as_bytes()).map_err(|e| {
-                Error::Common(error::Error::BadConfig(format!("Invalid Certs: {e:#}")))
-            })?;
-            builder.add_root_certificate(root_certificate_pem);
-        }
-        Ok::<_, Error>(builder)
-    };
-    let connector = match ssl_mode {
-        SslMode::Disable => return Ok(None),
-        SslMode::Require | SslMode::Prefer => {
-            let mut builder = TlsConnector::builder();
-            builder.danger_accept_invalid_certs(true);
-            builder.danger_accept_invalid_hostnames(true);
-            builder
-        }
-
-        SslMode::VerifyCa => {
-            let mut builder = get_tls_builder_for_verify(root_certificate_pem)?;
-            builder.danger_accept_invalid_hostnames(true);
-            builder
-        }
-
-        SslMode::VerifyFull => {
-            let builder = get_tls_builder_for_verify(root_certificate_pem)?;
-            builder
-        }
-        _ => unreachable!(),
-    };
-
-    Ok(Some(MakeTlsConnector::new(connector.build()?)))
-}
-
 pub struct PostgresSimpleClient(Client);
 
 impl PostgresSimpleClient {
     async fn new(database: &Postgres) -> Result<Self, Error> {
-        let ssl_mode = match database.sslmode.as_ref() {
-            "disable" => SslMode::Disable,
-            "" | "prefer" | "allow" => SslMode::Prefer,
-            "require" => SslMode::Require,
-            "verify-ca" => SslMode::VerifyCa,
-            "verify-full" => SslMode::VerifyFull,
-            ssl_mode => {
-                return Err(Error::Common(windmill_common::error::Error::BadRequest(
-                    format!("Invalid ssl mode for postgres: {}, please put a valid ssl_mode among the following avalible ssl mode: ['disable', 'allow', 'prefer', 'verify-ca', 'verify-full']", ssl_mode),
-                )))
-            }
-        };
-
-        let mut config = Config::new();
-        config
-            .dbname(&database.dbname)
-            .host(&database.host)
-            .user(&database.user)
-            .ssl_mode(ssl_mode)
-            .replication_mode(rust_postgres::config::ReplicationMode::Logical);
-
-        if let Some(port) = database.port {
-            config.port(port);
-        };
-
-        if !database.password.is_empty() {
-            config.password(&database.password);
-        }
-
-        let connector = build_tls_connector(ssl_mode, database.root_certificate_pem.as_ref())?;
-
-        let client = if let Some(connector) = connector {
-            let (client, connection) = config.connect(connector).await?;
-            tokio::spawn(async move {
-                if let Err(e) = connection.await {
-                    tracing::debug!("{:#?}", e);
-                };
-                tracing::info!("Successfully Connected into database");
-            });
-            client
-        } else {
-            let (client, connection) = config.connect(NoTls).await?;
-            tokio::spawn(async move {
-                if let Err(e) = connection.await {
-                    tracing::debug!("{:#?}", e);
-                };
-                tracing::info!("Successfully Connected into database");
-            });
-            client
-        };
+        let client = get_raw_postgres_connection(database, true).await?;
 
         Ok(PostgresSimpleClient(client))
     }
@@ -202,7 +106,8 @@ impl PostgresSimpleClient {
         Ok((
             self.0
                 .copy_both_simple::<bytes::Bytes>(query.as_str())
-                .await?,
+                .await
+                .map_err(to_anyhow)?,
             LogicalReplicationSettings::new(false),
         ))
     }
@@ -512,7 +417,7 @@ impl PostgresConfig {
         };
 
         let database = try_get_resource_from_db_as::<Postgres>(
-            authed,
+            &authed,
             Some(UserDB::new(db.clone())),
             &db,
             postgres_resource_path,
@@ -527,12 +432,13 @@ impl PostgresConfig {
                 "SELECT pubname FROM pg_publication WHERE pubname = {}",
                 quote_literal(&publication_name)
             ))
-            .await?;
+            .await
+            .map_err(to_anyhow)?;
 
         if !publication.row_exist() {
-            return Err(Error::Common(error::Error::BadConfig(
+            return Err(Error::BadConfig(
                 ERROR_PUBLICATION_NAME_NOT_EXISTS.to_string(),
-            )));
+            ));
         }
 
         let replication_slot = client
@@ -540,17 +446,19 @@ impl PostgresConfig {
                 "SELECT slot_name FROM pg_replication_slots WHERE slot_name = {}",
                 quote_literal(&replication_slot_name)
             ))
-            .await?;
+            .await
+            .map_err(to_anyhow)?;
 
         if !replication_slot.row_exist() {
-            return Err(Error::Common(error::Error::BadConfig(
+            return Err(Error::BadConfig(
                 ERROR_REPLICATION_SLOT_NOT_EXISTS.to_string(),
-            )));
+            ));
         }
 
         let (logical_replication_stream, logical_replication_settings) = client
             .get_logical_replication_stream(&publication_name, &replication_slot_name)
-            .await?;
+            .await
+            .map_err(to_anyhow)?;
 
         Ok((logical_replication_stream, logical_replication_settings))
     }
@@ -585,7 +493,7 @@ impl PostgresConfig {
 
                 let user_db = UserDB::new(db.clone());
 
-                let mut pg_connection = get_pg_connection(
+                let mut pg_connection = get_default_pg_connection(
                     authed.clone(),
                     Some(user_db.clone()),
                     &db,
diff --git a/backend/windmill-api/src/raw_apps.rs b/backend/windmill-api/src/raw_apps.rs
index bb2763b73d..3a895bab97 100644
--- a/backend/windmill-api/src/raw_apps.rs
+++ b/backend/windmill-api/src/raw_apps.rs
@@ -22,7 +22,7 @@ use serde::{Deserialize, Serialize};
 use sql_builder::{bind::Bind, SqlBuilder};
 use sqlx::FromRow;
 use std::str;
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_common::{
     apps::ListAppQuery,
diff --git a/backend/windmill-api/src/resources.rs b/backend/windmill-api/src/resources.rs
index 8a2fab0434..14fdfef536 100644
--- a/backend/windmill-api/src/resources.rs
+++ b/backend/windmill-api/src/resources.rs
@@ -26,7 +26,7 @@ use serde_json::{value::RawValue, Value};
 use sql_builder::{bind::Bind, quote, SqlBuilder};
 use sqlx::{FromRow, Postgres, Transaction};
 use uuid::Uuid;
-use windmill_audit::audit_ee::{audit_log, AuditAuthor};
+use windmill_audit::audit_oss::{audit_log, AuditAuthor};
 use windmill_audit::ActionKind;
 use windmill_common::{
     db::UserDB,
@@ -1217,7 +1217,7 @@ async fn update_resource_type(
     )
 ))]
 pub async fn try_get_resource_from_db_as<T>(
-    authed: ApiAuthed,
+    authed: &ApiAuthed,
     user_db: Option<UserDB>,
     db: &DB,
     resource_path: &str,
diff --git a/backend/windmill-api/src/saml_ee.rs b/backend/windmill-api/src/saml_oss.rs
similarity index 75%
rename from backend/windmill-api/src/saml_ee.rs
rename to backend/windmill-api/src/saml_oss.rs
index b3f1d4653c..0f4f4aa7f6 100644
--- a/backend/windmill-api/src/saml_ee.rs
+++ b/backend/windmill-api/src/saml_oss.rs
@@ -7,18 +7,27 @@
  */
 #![allow(non_snake_case)]
 
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::saml_ee::*;
+
+#[cfg(not(feature = "private"))]
 use axum::{routing::post, Router};
 
+#[cfg(not(feature = "private"))]
 pub struct ServiceProviderExt();
 
+#[cfg(not(feature = "private"))]
 pub async fn build_sp_extension() -> anyhow::Result<ServiceProviderExt> {
     return Ok(ServiceProviderExt());
 }
 
+#[cfg(not(feature = "private"))]
 pub fn global_service() -> Router {
     Router::new().route("/acs", post(acs))
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn acs() -> String {
     // Implementation is not open source as it is a Windmill Enterprise Edition feature
     "SAML available only in enterprise version".to_string()
diff --git a/backend/windmill-api/src/schedule.rs b/backend/windmill-api/src/schedule.rs
index 90d91c846c..3cb13798d9 100644
--- a/backend/windmill-api/src/schedule.rs
+++ b/backend/windmill-api/src/schedule.rs
@@ -22,7 +22,7 @@ use serde::{Deserialize, Serialize};
 use sql_builder::{prelude::Bind, SqlBuilder};
 use sqlx::{Postgres, Transaction};
 use std::str::FromStr;
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_common::{
     db::UserDB,
diff --git a/backend/windmill-api/src/scim_ee.rs b/backend/windmill-api/src/scim_oss.rs
similarity index 72%
rename from backend/windmill-api/src/scim_ee.rs
rename to backend/windmill-api/src/scim_oss.rs
index f11097f874..5210411466 100644
--- a/backend/windmill-api/src/scim_ee.rs
+++ b/backend/windmill-api/src/scim_oss.rs
@@ -1,3 +1,7 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::scim_ee::*;
+
 /*
  * Author: Ruben Fiszel
  * Copyright: Windmill Labs, Inc 2023
@@ -6,17 +10,22 @@
  * LICENSE-AGPL for a copy of the license.
  */
 
+#[cfg(not(feature = "private"))]
 use axum::{middleware::Next, response::Response, routing::get, Router};
+#[cfg(not(feature = "private"))]
 use hyper::Request;
 
+#[cfg(not(feature = "private"))]
 pub fn global_service() -> Router {
     Router::new().route("/ee", get(ee))
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn ee() -> String {
     return "Enterprise Edition".to_string();
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn has_scim_token<B>(_request: Request<B>, _next: Next) -> Response {
     //Not implemented in open-source version
     todo!()
diff --git a/backend/windmill-api/src/scripts.rs b/backend/windmill-api/src/scripts.rs
index a827fa5079..5e49dc4d1c 100644
--- a/backend/windmill-api/src/scripts.rs
+++ b/backend/windmill-api/src/scripts.rs
@@ -38,7 +38,7 @@ use std::{
     hash::{Hash, Hasher},
     sync::Arc,
 };
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_worker::process_relative_imports;
 
@@ -206,7 +206,6 @@ async fn list_scripts(
     Query(lq): Query<ListScriptQuery>,
 ) -> JsonResult<Vec<ListableScript>> {
     let (per_page, offset) = paginate(pagination);
-
     let mut sqlb = SqlBuilder::select_from("script as o")
         .fields(&[
             "hash",
@@ -321,6 +320,16 @@ async fn list_scripts(
             .fields(&["dm.deployment_msg"]);
     }
 
+    if let Some(languages) = lq.languages {
+        sqlb.and_where_in(
+            "language",
+            &languages
+                .iter()
+                .map(|language| quote(language.as_str()))
+                .collect_vec(),
+        );
+    }
+
     let sql = sqlb.sql().map_err(|e| Error::internal_err(e.to_string()))?;
     let mut tx = user_db.begin(&authed).await?;
     let rows = sqlx::query_as::<_, ListableScript>(&sql)
@@ -1280,6 +1289,11 @@ async fn raw_script_by_path_unpinned(
     raw_script_by_path_internal(path, user_db, db, authed, w_id, true).await
 }
 
+lazy_static::lazy_static! {
+    static ref DEBUG_RAW_SCRIPT_ENDPOINTS: bool =
+        std::env::var("DEBUG_RAW_SCRIPT_ENDPOINTS").is_ok();
+}
+
 async fn raw_script_by_path_internal(
     path: StripPath,
     user_db: UserDB,
@@ -1332,6 +1346,26 @@ async fn raw_script_by_path_internal(
                 "Script {path} exists but {} does not have permissions to access it",
                 authed.username
             )));
+        } else {
+            if *DEBUG_RAW_SCRIPT_ENDPOINTS {
+                let other_script_o = sqlx::query_scalar!(
+                    "SELECT path FROM script WHERE workspace_id = $1 AND archived = false",
+                    w_id
+                )
+                .fetch_all(&db)
+                .await?;
+                let other_script_archived = sqlx::query_scalar!(
+                    "SELECT distinct(path) FROM script WHERE workspace_id = $1 AND archived = true",
+                    w_id
+                )
+                .fetch_all(&db)
+                .await?;
+                tracing::warn!(
+                    "Script {path} does not exist in workspace {w_id} but these paths do, non-archived: {:?} | archived: {:?}",
+                    other_script_o.join(", "),
+                    other_script_archived.join(", ")
+                )
+            }
         }
     }
 
diff --git a/backend/windmill-api/src/settings.rs b/backend/windmill-api/src/settings.rs
index b589713b91..9dfb687e51 100644
--- a/backend/windmill-api/src/settings.rs
+++ b/backend/windmill-api/src/settings.rs
@@ -10,7 +10,7 @@ use std::time::Duration;
 
 use crate::{
     db::{ApiAuthed, DB},
-    ee::validate_license_key,
+    ee_oss::validate_license_key,
     utils::{generate_instance_username_for_all_users, require_super_admin},
     HTTP_CLIENT,
 };
@@ -29,9 +29,9 @@ use crate::utils::require_devops_role;
 
 use serde::Deserialize;
 #[cfg(feature = "enterprise")]
-use windmill_common::ee::{send_critical_alert, CriticalAlertKind, CriticalErrorChannel};
+use windmill_common::ee_oss::{send_critical_alert, CriticalAlertKind, CriticalErrorChannel};
 use windmill_common::{
-    email_ee::send_email,
+    email_oss::send_email,
     error::{self, JsonResult, Result},
     global_settings::{
         AUTOMATE_USERNAME_CREATION_SETTING, CRITICAL_ALERT_MUTE_UI_SETTING, EMAIL_DOMAIN_SETTING,
@@ -326,10 +326,10 @@ async fn list_global_settings() -> JsonResult<String> {
 
 pub async fn send_stats(Extension(db): Extension<DB>, authed: ApiAuthed) -> Result<String> {
     require_super_admin(&db, &authed.email).await?;
-    windmill_common::stats_ee::send_stats(
+    windmill_common::stats_oss::send_stats(
         &HTTP_CLIENT,
         &db,
-        windmill_common::stats_ee::SendStatsReason::Manual,
+        windmill_common::stats_oss::SendStatsReason::Manual,
     )
     .await?;
 
@@ -390,11 +390,11 @@ pub async fn renew_license_key(
     authed: ApiAuthed,
 ) -> Result<String> {
     require_super_admin(&db, &authed.email).await?;
-    let result = windmill_common::ee::renew_license_key(
+    let result = windmill_common::ee_oss::renew_license_key(
         &HTTP_CLIENT,
         &db,
         license_key,
-        windmill_common::ee::RenewReason::Manual,
+        windmill_common::ee_oss::RenewReason::Manual,
     )
     .await;
 
@@ -424,7 +424,7 @@ pub async fn create_customer_portal_session(
     Query(LicenseQuery { license_key }): Query<LicenseQuery>,
 ) -> Result<String> {
     let url =
-        windmill_common::ee::create_customer_portal_session(&HTTP_CLIENT, license_key).await?;
+        windmill_common::ee_oss::create_customer_portal_session(&HTTP_CLIENT, license_key).await?;
 
     return Ok(url);
 }
diff --git a/backend/windmill-api/src/smtp_server_ee.rs b/backend/windmill-api/src/smtp_server_oss.rs
similarity index 69%
rename from backend/windmill-api/src/smtp_server_ee.rs
rename to backend/windmill-api/src/smtp_server_oss.rs
index 48e274f6a1..7d2b72c7f1 100644
--- a/backend/windmill-api/src/smtp_server_ee.rs
+++ b/backend/windmill-api/src/smtp_server_oss.rs
@@ -1,7 +1,15 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::smtp_server_ee::*;
+
+#[cfg(not(feature = "private"))]
 use crate::{auth::AuthCache, db::DB};
+#[cfg(not(feature = "private"))]
 use std::{net::SocketAddr, sync::Arc};
+#[cfg(not(feature = "private"))]
 use windmill_common::db::UserDB;
 
+#[cfg(not(feature = "private"))]
 pub struct SmtpServer {
     pub auth_cache: Arc<AuthCache>,
     pub db: DB,
@@ -9,6 +17,7 @@ pub struct SmtpServer {
     pub base_internal_url: String,
 }
 
+#[cfg(not(feature = "private"))]
 impl SmtpServer {
     pub async fn start_listener_thread(self: Arc<Self>, _addr: SocketAddr) -> anyhow::Result<()> {
         let _ = self.auth_cache;
diff --git a/backend/windmill-api/src/sqs_triggers_ee.rs b/backend/windmill-api/src/sqs_triggers_oss.rs
similarity index 75%
rename from backend/windmill-api/src/sqs_triggers_ee.rs
rename to backend/windmill-api/src/sqs_triggers_oss.rs
index da9b288f6b..6e01641a5e 100644
--- a/backend/windmill-api/src/sqs_triggers_ee.rs
+++ b/backend/windmill-api/src/sqs_triggers_oss.rs
@@ -1,18 +1,28 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::sqs_triggers_ee::*;
+
+#[cfg(not(feature = "private"))]
 use crate::db::DB;
+#[cfg(not(feature = "private"))]
 use axum::Router;
+#[cfg(not(feature = "private"))]
 use serde::{Deserialize, Serialize};
+#[cfg(not(feature = "private"))]
 use windmill_common::auth::aws::AwsAuthResourceType;
 
-
+#[cfg(not(feature = "private"))]
 pub fn workspaced_service() -> Router {
     Router::new()
 }
 
+#[cfg(not(feature = "private"))]
 pub fn start_sqs(_db: DB, mut _killpill_rx: tokio::sync::broadcast::Receiver<()>) -> () {
     // implementation is not open source
 }
 
 #[derive(Debug, Clone, Deserialize, Serialize)]
+#[cfg(not(feature = "private"))]
 pub struct SqsTrigger {
     pub queue_url: String,
     pub aws_auth_resource_type: AwsAuthResourceType,
@@ -30,4 +40,4 @@ pub struct SqsTrigger {
     pub server_id: Option<String>,
     pub last_server_ping: Option<chrono::DateTime<chrono::Utc>>,
     pub enabled: bool,
-}
\ No newline at end of file
+}
diff --git a/backend/windmill-api/src/stripe_ee.rs b/backend/windmill-api/src/stripe_ee.rs
deleted file mode 100644
index 6934cad3bc..0000000000
--- a/backend/windmill-api/src/stripe_ee.rs
+++ /dev/null
@@ -1,5 +0,0 @@
-use axum::Router;
-
-pub fn add_stripe_routes(router: Router) -> Router {
-    return router;
-}
diff --git a/backend/windmill-api/src/stripe_oss.rs b/backend/windmill-api/src/stripe_oss.rs
new file mode 100644
index 0000000000..206a78dc53
--- /dev/null
+++ b/backend/windmill-api/src/stripe_oss.rs
@@ -0,0 +1,11 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::stripe_ee::*;
+
+#[cfg(not(feature = "private"))]
+use axum::Router;
+
+#[cfg(not(feature = "private"))]
+pub fn add_stripe_routes(router: Router) -> Router {
+    return router;
+}
diff --git a/backend/windmill-api/src/teams_approvals_ee.rs b/backend/windmill-api/src/teams_approvals_oss.rs
similarity index 51%
rename from backend/windmill-api/src/teams_approvals_ee.rs
rename to backend/windmill-api/src/teams_approvals_oss.rs
index 05698b98e3..df5826aa71 100644
--- a/backend/windmill-api/src/teams_approvals_ee.rs
+++ b/backend/windmill-api/src/teams_approvals_oss.rs
@@ -1,7 +1,14 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::teams_approvals_ee::*;
+
+#[cfg(not(feature = "private"))]
 use hyper::StatusCode;
 
+#[cfg(not(feature = "private"))]
 use windmill_common::error::Error;
 
+#[cfg(not(feature = "private"))]
 pub async fn request_teams_approval() -> Result<StatusCode, Error> {
     Err(Error::InternalErr("enterprise feature only".to_string()))
-}
\ No newline at end of file
+}
diff --git a/backend/windmill-api/src/teams_ee.rs b/backend/windmill-api/src/teams_oss.rs
similarity index 70%
rename from backend/windmill-api/src/teams_ee.rs
rename to backend/windmill-api/src/teams_oss.rs
index 46cbe72059..95d4883690 100644
--- a/backend/windmill-api/src/teams_ee.rs
+++ b/backend/windmill-api/src/teams_oss.rs
@@ -1,39 +1,50 @@
-use http::status::StatusCode;
-#[cfg(feature = "enterprise")]
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::teams_ee::*;
+
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 use axum::Router;
+#[cfg(not(feature = "private"))]
+use http::status::StatusCode;
+#[cfg(not(feature = "private"))]
 use windmill_common::error::Error;
 
+#[cfg(not(feature = "private"))]
 pub async fn edit_teams_command() -> Result<StatusCode, Error> {
     return Err(Error::BadRequest(
         "Teams only available on enterprise".to_string(),
     ));
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn workspaces_list_available_teams_ids() -> Result<StatusCode, Error> {
     return Err(Error::BadRequest(
         "Teams only available on enterprise".to_string(),
     ));
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn connect_teams() -> Result<StatusCode, Error> {
     return Err(Error::BadRequest(
         "Teams only available on enterprise".to_string(),
     ));
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn run_teams_message_test_job() -> Result<StatusCode, Error> {
     return Err(Error::BadRequest(
         "Teams only available on enterprise".to_string(),
     ));
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn workspaces_list_available_teams_channels() -> Result<StatusCode, Error> {
     return Err(Error::BadRequest(
         "Teams only available on enterprise".to_string(),
     ));
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub fn teams_service() -> Router {
     Router::new()
-}
\ No newline at end of file
+}
diff --git a/backend/windmill-api/src/users.rs b/backend/windmill-api/src/users.rs
index 5bc7ce9c4d..58e9d2d849 100644
--- a/backend/windmill-api/src/users.rs
+++ b/backend/windmill-api/src/users.rs
@@ -42,7 +42,7 @@ use sqlx::FromRow;
 use time::OffsetDateTime;
 use tower_cookies::{Cookie, Cookies};
 use tracing::Instrument;
-use windmill_audit::audit_ee::{audit_log, AuditAuthor};
+use windmill_audit::audit_oss::{audit_log, AuditAuthor};
 use windmill_audit::ActionKind;
 use windmill_common::auth::fetch_authed_from_permissioned_as;
 use windmill_common::global_settings::AUTOMATE_USERNAME_CREATION_SETTING;
@@ -542,7 +542,7 @@ async fn list_users_as_super_admin(
     let rows = if active_only.is_some_and(|x| x) {
         sqlx::query_as!(
             GlobalUserInfo,
-            "WITH active_users AS (SELECT distinct username as email FROM audit WHERE timestamp > NOW() - INTERVAL '1 month' AND (operation = 'users.login' OR operation = 'oauth.login')),
+            "WITH active_users AS (SELECT distinct username as email FROM audit WHERE timestamp > NOW() - INTERVAL '1 month' AND (operation = 'users.login' OR operation = 'oauth.login' OR operation = 'users.token.refresh')),
             authors as (SELECT distinct email FROM usr WHERE usr.operator IS false)
             SELECT email, email NOT IN (SELECT email FROM authors) as operator_only, login_type::text, verified, super_admin, devops, name, company, username
             FROM password
@@ -1508,7 +1508,7 @@ async fn create_user(
     Extension(argon2): Extension<Arc<Argon2<'_>>>,
     Json(nu): Json<NewUser>,
 ) -> Result<(StatusCode, String)> {
-    crate::users_ee::create_user(authed, db, webhook, argon2, nu).await
+    crate::users_oss::create_user(authed, db, webhook, argon2, nu).await
 }
 
 async fn delete_workspace_user(
@@ -1582,7 +1582,7 @@ async fn set_password(
     Json(ep): Json<EditPassword>,
 ) -> Result<String> {
     let email = authed.email.clone();
-    crate::users_ee::set_password(db, argon2, authed, &email, ep).await
+    crate::users_oss::set_password(db, argon2, authed, &email, ep).await
 }
 
 async fn set_password_of_user(
@@ -1593,7 +1593,7 @@ async fn set_password_of_user(
     Json(ep): Json<EditPassword>,
 ) -> Result<String> {
     require_super_admin(&db, &authed.email).await?;
-    crate::users_ee::set_password(db, argon2, authed, &email, ep).await
+    crate::users_oss::set_password(db, argon2, authed, &email, ep).await
 }
 
 async fn set_login_type(
@@ -1750,7 +1750,22 @@ async fn refresh_token(
     .await?
     .unwrap_or(false);
 
-    let _ = create_session_token(&authed.email, super_admin, &mut tx, cookies).await?;
+    let new_token = create_session_token(&authed.email, super_admin, &mut tx, cookies).await?;
+
+    audit_log(
+        &mut *tx,
+        &AuditAuthor {
+            email: authed.email.to_string(),
+            username: authed.email.to_string(),
+            username_override: None,
+        },
+        "users.token.refresh",
+        ActionKind::Create,
+        &"global",
+        Some(&truncate_token(&new_token)),
+        None,
+    )
+    .await?;
 
     tx.commit().await?;
     Ok("token refreshed".to_string())
diff --git a/backend/windmill-api/src/users_ee.rs b/backend/windmill-api/src/users_oss.rs
similarity index 71%
rename from backend/windmill-api/src/users_ee.rs
rename to backend/windmill-api/src/users_oss.rs
index 7a11239a2f..88a12eb710 100644
--- a/backend/windmill-api/src/users_ee.rs
+++ b/backend/windmill-api/src/users_oss.rs
@@ -1,15 +1,27 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::users_ee::*;
+
+#[cfg(not(feature = "private"))]
 use std::sync::Arc;
 
+#[cfg(not(feature = "private"))]
 use crate::db::ApiAuthed;
 
+#[cfg(not(feature = "private"))]
 use crate::users::{EditPassword, NewUser};
+#[cfg(not(feature = "private"))]
 use crate::{db::DB, webhook_util::WebhookShared};
+#[cfg(not(feature = "private"))]
 use argon2::Argon2;
 
+#[cfg(not(feature = "private"))]
 use http::StatusCode;
 
+#[cfg(not(feature = "private"))]
 use windmill_common::error::{Error, Result};
 
+#[cfg(not(feature = "private"))]
 pub async fn create_user(
     _authed: ApiAuthed,
     _db: DB,
@@ -22,6 +34,7 @@ pub async fn create_user(
     ))
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn set_password(
     _db: DB,
     _argon2: Arc<Argon2<'_>>,
@@ -34,6 +47,7 @@ pub async fn set_password(
     ))
 }
 
+#[cfg(not(feature = "private"))]
 pub fn send_email_if_possible(_subject: &str, _content: &str, _to: &str) {
     tracing::warn!(
         "send_email_if_possible is not implemented in Windmill's Open Source repository"
diff --git a/backend/windmill-api/src/utils.rs b/backend/windmill-api/src/utils.rs
index 5eef389138..8db0d99281 100644
--- a/backend/windmill-api/src/utils.rs
+++ b/backend/windmill-api/src/utils.rs
@@ -6,8 +6,6 @@
  * LICENSE-AGPL for a copy of the license.
  */
 
-use std::fmt::Display;
-
 use axum::{body::Body, response::Response};
 use regex::Regex;
 use serde::{Deserialize, Deserializer};
@@ -31,23 +29,6 @@ pub struct WithStarredInfoQuery {
     pub with_starred_info: Option<bool>,
 }
 
-#[derive(Deserialize)]
-#[serde(rename_all = "lowercase")]
-pub enum RunnableKind {
-    Script,
-    Flow,
-}
-
-impl Display for RunnableKind {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        let runnable_kind = match self {
-            RunnableKind::Script => "script",
-            RunnableKind::Flow => "flow"
-        };
-        write!(f, "{}", runnable_kind)
-    }
-}
-
 pub async fn require_super_admin(db: &DB, email: &str) -> error::Result<()> {
     let is_admin = is_super_admin_email(db, email).await?;
 
diff --git a/backend/windmill-api/src/variables.rs b/backend/windmill-api/src/variables.rs
index e810f95750..7dc6a85b49 100644
--- a/backend/windmill-api/src/variables.rs
+++ b/backend/windmill-api/src/variables.rs
@@ -20,7 +20,7 @@ use axum::{
 use hyper::StatusCode;
 use serde_json::Value;
 
-use windmill_audit::audit_ee::{audit_log, AuditAuthorable};
+use windmill_audit::audit_oss::{audit_log, AuditAuthorable};
 use windmill_audit::ActionKind;
 use windmill_common::{
     db::UserDB,
@@ -186,7 +186,7 @@ async fn get_variable(
                 #[cfg(feature = "oauth2")]
                 {
                     Some(
-                        crate::oauth2_ee::_refresh_token(
+                        crate::oauth2_oss::_refresh_token(
                             tx,
                             &variable.path,
                             &w_id,
@@ -653,7 +653,7 @@ pub async fn get_value_internal<'c>(
         if variable.is_expired.unwrap_or(false) && variable.account.is_some() {
             #[cfg(feature = "oauth2")]
             {
-                crate::oauth2_ee::_refresh_token(
+                crate::oauth2_oss::_refresh_token(
                     tx,
                     &variable.path,
                     &w_id,
diff --git a/backend/windmill-api/src/websocket_triggers.rs b/backend/windmill-api/src/websocket_triggers.rs
index 8bd165844c..8c263b1f62 100644
--- a/backend/windmill-api/src/websocket_triggers.rs
+++ b/backend/windmill-api/src/websocket_triggers.rs
@@ -20,7 +20,7 @@ use std::{collections::HashMap, fmt};
 use tokio::net::TcpStream;
 use tokio_tungstenite::{connect_async, tungstenite::Message, MaybeTlsStream, WebSocketStream};
 use uuid::Uuid;
-use windmill_audit::{audit_ee::audit_log, ActionKind};
+use windmill_audit::{audit_oss::audit_log, ActionKind};
 use windmill_common::{
     db::UserDB,
     error::{self, to_anyhow, JsonResult},
diff --git a/backend/windmill-api/src/workspaces.rs b/backend/windmill-api/src/workspaces.rs
index 75c9a8d034..b8e8a813f3 100644
--- a/backend/windmill-api/src/workspaces.rs
+++ b/backend/windmill-api/src/workspaces.rs
@@ -10,7 +10,7 @@ use std::collections::HashMap;
 
 use crate::ai::{AIConfig, AI_REQUEST_CACHE};
 use crate::db::ApiAuthed;
-use crate::users_ee::send_email_if_possible;
+use crate::users_oss::send_email_if_possible;
 use crate::utils::get_instance_username_or_create_pending;
 use crate::BASE_URL;
 use crate::{
@@ -30,7 +30,7 @@ use chrono::Utc;
 use regex::Regex;
 
 use uuid::Uuid;
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 use windmill_common::db::UserDB;
 use windmill_common::s3_helpers::LargeFileStorage;
@@ -58,7 +58,7 @@ use sqlx::{FromRow, Postgres, Transaction};
 use windmill_common::oauth2::InstanceEvent;
 use windmill_common::utils::not_found_if_none;
 
-use crate::teams_ee::{
+use crate::teams_oss::{
     connect_teams, edit_teams_command, run_teams_message_test_job,
     workspaces_list_available_teams_channels, workspaces_list_available_teams_ids,
 };
@@ -145,7 +145,7 @@ pub fn workspaced_service() -> Router {
 
     #[cfg(all(feature = "stripe", feature = "enterprise"))]
     {
-        crate::stripe_ee::add_stripe_routes(router)
+        crate::stripe_oss::add_stripe_routes(router)
     }
 
     #[cfg(not(feature = "stripe"))]
@@ -640,7 +640,7 @@ async fn edit_auto_invite(
     Path(w_id): Path<String>,
     Json(ea): Json<EditAutoInvite>,
 ) -> Result<String> {
-    crate::workspaces_ee::edit_auto_invite(authed, db, w_id, ea).await
+    crate::workspaces_oss::edit_auto_invite(authed, db, w_id, ea).await
 }
 
 async fn edit_webhook(
diff --git a/backend/windmill-api/src/workspaces_export.rs b/backend/windmill-api/src/workspaces_export.rs
index cd2be0f708..5673958ab8 100644
--- a/backend/windmill-api/src/workspaces_export.rs
+++ b/backend/windmill-api/src/workspaces_export.rs
@@ -548,6 +548,8 @@ pub(crate) async fn tarball_workspace(
                     authentication_resource_path,
                     script_path, 
                     is_flow, 
+                    summary,
+                    description,
                     edited_by, 
                     edited_at, 
                     email, 
@@ -622,7 +624,7 @@ pub(crate) async fn tarball_workspace(
         #[cfg(all(feature = "enterprise", feature = "kafka"))]
         {
             let kafka_triggers = sqlx::query_as!(
-                crate::kafka_triggers_ee::KafkaTrigger,
+                crate::kafka_triggers_oss::KafkaTrigger,
                 "SELECT * FROM kafka_trigger
                  WHERE workspace_id = $1",
                 &w_id
@@ -644,7 +646,7 @@ pub(crate) async fn tarball_workspace(
         #[cfg(all(feature = "enterprise", feature = "sqs_trigger"))]
         {
             let sqs_triggers = sqlx::query_as!(
-                crate::sqs_triggers_ee::SqsTrigger,
+                crate::sqs_triggers_oss::SqsTrigger,
                 r#"
                 SELECT
                     aws_auth_resource_type AS "aws_auth_resource_type: _",
@@ -684,7 +686,7 @@ pub(crate) async fn tarball_workspace(
         #[cfg(all(feature = "enterprise", feature = "gcp_trigger"))]
         {
             let gcp_triggers = sqlx::query_as!(
-                crate::gcp_triggers_ee::GcpTrigger,
+                crate::gcp_triggers_oss::GcpTrigger,
                 r#"
                 SELECT
                     gcp_resource_path,
@@ -726,7 +728,7 @@ pub(crate) async fn tarball_workspace(
         #[cfg(all(feature = "enterprise", feature = "nats"))]
         {
             let nats_triggers = sqlx::query_as!(
-                crate::nats_triggers_ee::NatsTrigger,
+                crate::nats_triggers_oss::NatsTrigger,
                 "SELECT * FROM nats_trigger
                  WHERE workspace_id = $1",
                 &w_id
diff --git a/backend/windmill-api/src/workspaces_extra.rs b/backend/windmill-api/src/workspaces_extra.rs
index 07570df5c3..51a224d0e2 100644
--- a/backend/windmill-api/src/workspaces_extra.rs
+++ b/backend/windmill-api/src/workspaces_extra.rs
@@ -8,7 +8,7 @@ use axum::{
     Json,
 };
 
-use windmill_audit::audit_ee::audit_log;
+use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
 
 use windmill_common::worker::CLOUD_HOSTED;
diff --git a/backend/windmill-api/src/workspaces_ee.rs b/backend/windmill-api/src/workspaces_oss.rs
similarity index 70%
rename from backend/windmill-api/src/workspaces_ee.rs
rename to backend/windmill-api/src/workspaces_oss.rs
index aa8799e233..4f55539da1 100644
--- a/backend/windmill-api/src/workspaces_ee.rs
+++ b/backend/windmill-api/src/workspaces_oss.rs
@@ -1,8 +1,14 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::workspaces_ee::*;
+
+#[cfg(not(feature = "private"))]
 use crate::{
     db::{ApiAuthed, DB},
     workspaces::EditAutoInvite,
 };
 
+#[cfg(not(feature = "private"))]
 pub async fn edit_auto_invite(
     _authed: ApiAuthed,
     _db: DB,
diff --git a/backend/windmill-audit/Cargo.toml b/backend/windmill-audit/Cargo.toml
index 8b202b4abf..5a9ea376b6 100644
--- a/backend/windmill-audit/Cargo.toml
+++ b/backend/windmill-audit/Cargo.toml
@@ -10,6 +10,7 @@ path = "./src/lib.rs"
 
 [features]
 enterprise = ["windmill-common/enterprise"]
+private = []
 
 [dependencies]
 serde.workspace = true
diff --git a/backend/windmill-audit/src/audit_ee.rs b/backend/windmill-audit/src/audit_oss.rs
similarity index 78%
rename from backend/windmill-audit/src/audit_ee.rs
rename to backend/windmill-audit/src/audit_oss.rs
index 97a8e6bbcf..d29daaa7ae 100644
--- a/backend/windmill-audit/src/audit_ee.rs
+++ b/backend/windmill-audit/src/audit_oss.rs
@@ -1,3 +1,7 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::audit_ee::*;
+
 /*
  * Author: Ruben Fiszel
  * Copyright: Windmill Labs, Inc 2022
@@ -5,23 +9,26 @@
  * Please see the included NOTICE for copyright information and
  * LICENSE-AGPL for a copy of the license.
  */
-use std::collections::HashMap;
-
-use windmill_common::{
-    error::{Error, Result},
-    utils::Pagination,
+#[cfg(not(feature = "private"))]
+use {
+    crate::{ActionKind, AuditLog, ListAuditLogQuery},
+    sqlx::{Postgres, Transaction},
+    std::collections::HashMap,
+    windmill_common::{
+        error::{Error, Result},
+        utils::Pagination,
+    },
 };
 
-use crate::{ActionKind, AuditLog, ListAuditLogQuery};
-use sqlx::{Postgres, Transaction};
-
 #[derive(Clone)]
+#[cfg(not(feature = "private"))]
 pub struct AuditAuthor {
     pub username: String,
     pub email: String,
     pub username_override: Option<String>,
 }
 
+#[cfg(not(feature = "private"))]
 impl AuditAuthorable for AuditAuthor {
     fn email(&self) -> &str {
         &self.email
@@ -36,12 +43,14 @@ impl AuditAuthorable for AuditAuthor {
     }
 }
 
+#[cfg(not(feature = "private"))]
 pub trait AuditAuthorable {
     fn username(&self) -> &str;
     fn email(&self) -> &str;
     fn username_override(&self) -> Option<&str>;
 }
 
+#[cfg(not(feature = "private"))]
 #[tracing::instrument(level = "trace", skip_all)]
 pub async fn audit_log<'c, E: sqlx::Executor<'c, Database = Postgres>>(
     _db: E,
@@ -56,6 +65,7 @@ pub async fn audit_log<'c, E: sqlx::Executor<'c, Database = Postgres>>(
     Ok(())
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn list_audit(
     _tx: Transaction<'_, Postgres>,
     _w_id: String,
@@ -66,6 +76,7 @@ pub async fn list_audit(
     return Ok(vec![]);
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn get_audit(tx: Transaction<'_, Postgres>, _id: i32, _w_id: &str) -> Result<AuditLog> {
     // Implementation is not open source as Audit logs is a Windmill Enterprise Edition feature
     tx.commit().await?;
diff --git a/backend/windmill-audit/src/lib.rs b/backend/windmill-audit/src/lib.rs
index 10894798fb..15bda522c1 100644
--- a/backend/windmill-audit/src/lib.rs
+++ b/backend/windmill-audit/src/lib.rs
@@ -1,7 +1,9 @@
 use serde::{Deserialize, Serialize};
 use sqlx::FromRow;
 
+#[cfg(feature = "private")]
 pub mod audit_ee;
+pub mod audit_oss;
 
 #[derive(sqlx::Type, Serialize, Deserialize, Debug)]
 #[sqlx(type_name = "ACTION_KIND", rename_all = "lowercase")]
diff --git a/backend/windmill-autoscaling/Cargo.toml b/backend/windmill-autoscaling/Cargo.toml
index fbebaf0fd7..7e4bc623ad 100644
--- a/backend/windmill-autoscaling/Cargo.toml
+++ b/backend/windmill-autoscaling/Cargo.toml
@@ -10,6 +10,7 @@ path = "./src/lib.rs"
 
 [features]
 enterprise = ["windmill-queue/enterprise", "windmill-common/enterprise"]
+private = []
 default = []
 
 [dependencies]
diff --git a/backend/windmill-autoscaling/src/autoscaling_ee.rs b/backend/windmill-autoscaling/src/autoscaling_ee.rs
deleted file mode 100644
index 1c9defbede..0000000000
--- a/backend/windmill-autoscaling/src/autoscaling_ee.rs
+++ /dev/null
@@ -1,6 +0,0 @@
-use windmill_common::DB;
-
-pub async fn apply_all_autoscaling(_db: &DB) -> anyhow::Result<()> {
-    // Autoscaling is an ee feature
-    Ok(())
-}
diff --git a/backend/windmill-autoscaling/src/autoscaling_oss.rs b/backend/windmill-autoscaling/src/autoscaling_oss.rs
new file mode 100644
index 0000000000..c9cbdc3ee0
--- /dev/null
+++ b/backend/windmill-autoscaling/src/autoscaling_oss.rs
@@ -0,0 +1,12 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::autoscaling_ee::*;
+
+#[cfg(not(feature = "private"))]
+use windmill_common::DB;
+
+#[cfg(not(feature = "private"))]
+pub async fn apply_all_autoscaling(_db: &DB) -> anyhow::Result<()> {
+    // Autoscaling is an ee feature
+    Ok(())
+}
diff --git a/backend/windmill-autoscaling/src/lib.rs b/backend/windmill-autoscaling/src/lib.rs
index 28b9319244..1b9d6b94bf 100644
--- a/backend/windmill-autoscaling/src/lib.rs
+++ b/backend/windmill-autoscaling/src/lib.rs
@@ -1,2 +1,4 @@
-mod autoscaling_ee;
-pub use autoscaling_ee::*;
+#[cfg(feature = "private")]
+pub mod autoscaling_ee;
+mod autoscaling_oss;
+pub use autoscaling_oss::*;
diff --git a/backend/windmill-common/Cargo.toml b/backend/windmill-common/Cargo.toml
index 17764b1253..250f48e336 100644
--- a/backend/windmill-common/Cargo.toml
+++ b/backend/windmill-common/Cargo.toml
@@ -7,6 +7,7 @@ edition.workspace = true
 [features]
 default = []
 enterprise = []
+private = []
 jemalloc = ["dep:tikv-jemalloc-ctl"]
 tantivy = []
 prometheus = ["dep:prometheus"]
@@ -79,6 +80,7 @@ backon.workspace = true
 openidconnect = { workspace = true, optional = true }
 strum.workspace = true
 strum_macros.workspace = true
+url.workspace = true
 
 semver.workspace = true
 croner = "2.0.6"
diff --git a/backend/windmill-common/src/agent_workers.rs b/backend/windmill-common/src/agent_workers.rs
index 7c91ec2165..52c7e2d70c 100644
--- a/backend/windmill-common/src/agent_workers.rs
+++ b/backend/windmill-common/src/agent_workers.rs
@@ -36,6 +36,7 @@ pub struct AgentAuth {
 }
 
 pub const AGENT_JWT_PREFIX: &str = "jwt_agent_";
+
 pub fn build_agent_http_client(worker_suffix: &str) -> HttpClient {
     let client = ClientBuilder::new(
         reqwest::Client::builder()
diff --git a/backend/windmill-common/src/client.rs b/backend/windmill-common/src/client.rs
index 0c5394c6e6..6bc1d12ef9 100644
--- a/backend/windmill-common/src/client.rs
+++ b/backend/windmill-common/src/client.rs
@@ -17,6 +17,15 @@ pub struct AuthedClient {
 }
 
 impl AuthedClient {
+    pub fn new(
+        base_internal_url: String,
+        workspace: String,
+        token: String,
+        force_client: Option<reqwest::Client>,
+    ) -> AuthedClient {
+        AuthedClient { base_internal_url, workspace, token, force_client }
+    }
+
     pub async fn get(&self, url: &str, query: Vec<(&str, String)>) -> anyhow::Result<Response> {
         self.force_client
             .as_ref()
diff --git a/backend/windmill-common/src/ee.rs b/backend/windmill-common/src/ee_oss.rs
similarity index 63%
rename from backend/windmill-common/src/ee.rs
rename to backend/windmill-common/src/ee_oss.rs
index 7acb430f1b..51b1efd2e2 100644
--- a/backend/windmill-common/src/ee.rs
+++ b/backend/windmill-common/src/ee_oss.rs
@@ -1,24 +1,35 @@
-#[cfg(feature = "enterprise")]
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::ee::*;
+
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 use crate::db::DB;
-use crate::ee::LicensePlan::Community;
-#[cfg(feature = "enterprise")]
+#[cfg(not(feature = "private"))]
+use crate::ee_oss::LicensePlan::Community;
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 use crate::error;
+#[cfg(not(feature = "private"))]
 use serde::Deserialize;
+#[cfg(not(feature = "private"))]
 use std::sync::Arc;
+#[cfg(not(feature = "private"))]
 use tokio::sync::RwLock;
 
+#[cfg(not(feature = "private"))]
 lazy_static::lazy_static! {
   pub static ref LICENSE_KEY_VALID: Arc<RwLock<bool>> = Arc::new(RwLock::new(true));
   pub static ref LICENSE_KEY_ID: Arc<RwLock<String>> = Arc::new(RwLock::new("".to_string()));
   pub static ref LICENSE_KEY: Arc<RwLock<String>> = Arc::new(RwLock::new("".to_string()));
 }
 
+#[cfg(not(feature = "private"))]
 pub enum LicensePlan {
     Community,
     Pro,
     Enterprise,
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn get_license_plan() -> LicensePlan {
     // Implementation is not open source
     return Community;
@@ -26,6 +37,7 @@ pub async fn get_license_plan() -> LicensePlan {
 
 #[derive(Deserialize)]
 #[serde(untagged)]
+#[cfg(not(feature = "private"))]
 pub enum CriticalErrorChannel {
     Email { email: String },
     Slack { slack_channel: String },
@@ -33,6 +45,7 @@ pub enum CriticalErrorChannel {
 }
 
 #[derive(Deserialize)]
+#[cfg(not(feature = "private"))]
 pub struct TeamsChannel {
     pub team_id: String,
     pub team_name: String,
@@ -40,6 +53,7 @@ pub struct TeamsChannel {
     pub channel_name: String,
 }
 
+#[cfg(not(feature = "private"))]
 pub enum CriticalAlertKind {
     #[cfg(feature = "enterprise")]
     CriticalError,
@@ -47,7 +61,7 @@ pub enum CriticalAlertKind {
     RecoveredCriticalError,
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub async fn send_critical_alert(
     _error_message: String,
     _db: &DB,
@@ -56,7 +70,7 @@ pub async fn send_critical_alert(
 ) {
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub async fn maybe_renew_license_key_on_start(
     _http_client: &reqwest::Client,
     _db: &crate::db::DB,
@@ -66,14 +80,14 @@ pub async fn maybe_renew_license_key_on_start(
     force_renew_now
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub enum RenewReason {
     Manual,
     Schedule,
     OnStart,
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub async fn renew_license_key(
     _http_client: &reqwest::Client,
     _db: &crate::db::DB,
@@ -84,7 +98,7 @@ pub async fn renew_license_key(
     "".to_string()
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub async fn create_customer_portal_session(
     _http_client: &reqwest::Client,
     _key: Option<String>,
@@ -93,14 +107,18 @@ pub async fn create_customer_portal_session(
     Ok("".to_string())
 }
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub async fn worker_groups_alerts(_db: &DB) {}
 
-#[cfg(feature = "enterprise")]
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
 pub async fn jobs_waiting_alerts(_db: &DB) {}
 
-#[cfg(feature = "enterprise")]
-pub async fn low_disk_alerts(_db: &DB, _server_mode: bool, _worker_mode: bool, _workers: Vec<String>) {
+#[cfg(all(feature = "enterprise", not(feature = "private")))]
+pub async fn low_disk_alerts(
+    _db: &DB,
+    _server_mode: bool,
+    _worker_mode: bool,
+    _workers: Vec<String>,
+) {
     // Implementation is not open source
 }
-
diff --git a/backend/windmill-common/src/email_ee.rs b/backend/windmill-common/src/email_oss.rs
similarity index 61%
rename from backend/windmill-common/src/email_ee.rs
rename to backend/windmill-common/src/email_oss.rs
index 42aebbeec3..e6a340523e 100644
--- a/backend/windmill-common/src/email_ee.rs
+++ b/backend/windmill-common/src/email_oss.rs
@@ -1,5 +1,11 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::email_ee::*;
+
+#[cfg(not(feature = "private"))]
 use crate::server::Smtp;
 
+#[cfg(not(feature = "private"))]
 pub async fn send_email(
     _subject: &str,
     _content: &str,
diff --git a/backend/windmill-common/src/job_s3_helpers_ee.rs b/backend/windmill-common/src/job_s3_helpers_oss.rs
similarity index 76%
rename from backend/windmill-common/src/job_s3_helpers_ee.rs
rename to backend/windmill-common/src/job_s3_helpers_oss.rs
index d5d6ac4052..b7ebd57f3e 100644
--- a/backend/windmill-common/src/job_s3_helpers_ee.rs
+++ b/backend/windmill-common/src/job_s3_helpers_oss.rs
@@ -1,5 +1,11 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::job_s3_helpers_ee::*;
+
+#[cfg(not(feature = "private"))]
 use crate::s3_helpers::{ObjectStoreResource, StorageResourceType};
 
+#[cfg(not(feature = "private"))]
 pub async fn get_s3_resource_internal<'c>(
     _resource_type: StorageResourceType,
     _s3_resource_value_raw: serde_json::Value,
@@ -9,11 +15,13 @@ pub async fn get_s3_resource_internal<'c>(
     todo!()
 }
 
+#[cfg(not(feature = "private"))]
 pub enum TokenGenerator<'c> {
     AsClient(&'c crate::client::AuthedClient),
     AsServerInstance(),
 }
 
+#[cfg(not(feature = "private"))]
 impl<'c> TokenGenerator<'c> {
     pub async fn gen_token(
         &self,
@@ -24,7 +32,7 @@ impl<'c> TokenGenerator<'c> {
     }
 }
 
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", not(feature = "private")))]
 pub(crate) async fn generate_s3_aws_oidc_resource<'c>(
     _clone: crate::s3_helpers::S3AwsOidcResource,
     _token_generator: TokenGenerator<'c>,
diff --git a/backend/windmill-common/src/lib.rs b/backend/windmill-common/src/lib.rs
index 6d92cd8f55..498beecd6c 100644
--- a/backend/windmill-common/src/lib.rs
+++ b/backend/windmill-common/src/lib.rs
@@ -19,7 +19,7 @@ use std::{
 
 use tokio::sync::broadcast;
 
-use ee::CriticalErrorChannel;
+use ee_oss::CriticalErrorChannel;
 use error::Error;
 use scripts::ScriptLang;
 use sqlx::{Pool, Postgres};
@@ -32,8 +32,12 @@ pub mod bench;
 pub mod cache;
 pub mod client;
 pub mod db;
+#[cfg(feature = "private")]
 pub mod ee;
+pub mod ee_oss;
+#[cfg(feature = "private")]
 pub mod email_ee;
+pub mod email_oss;
 pub mod error;
 pub mod external_ip;
 pub mod flow_status;
@@ -41,25 +45,35 @@ pub mod flows;
 pub mod global_settings;
 pub mod indexer;
 pub mod job_metrics;
-#[cfg(feature = "parquet")]
+#[cfg(all(feature = "parquet", feature = "private"))]
 pub mod job_s3_helpers_ee;
+#[cfg(feature = "parquet")]
+pub mod job_s3_helpers_oss;
 
-#[cfg(all(feature = "enterprise", feature = "openidconnect"))]
+#[cfg(all(feature = "enterprise", feature = "openidconnect", feature = "private"))]
 pub mod oidc_ee;
+#[cfg(all(feature = "enterprise", feature = "openidconnect"))]
+pub mod oidc_oss;
 
 pub mod jobs;
 pub mod jwt;
 pub mod more_serde;
 pub mod oauth2;
+#[cfg(feature = "private")]
 pub mod otel_ee;
+pub mod otel_oss;
 pub mod queue;
 pub mod s3_helpers;
 pub mod schedule;
 pub mod schema;
 pub mod scripts;
 pub mod server;
+#[cfg(feature = "private")]
 pub mod stats_ee;
+pub mod stats_oss;
+#[cfg(feature = "private")]
 pub mod teams_ee;
+pub mod teams_oss;
 pub mod tracing_init;
 pub mod users;
 pub mod utils;
@@ -135,6 +149,8 @@ lazy_static::lazy_static! {
     pub static ref DEPLOYED_SCRIPT_INFO_CACHE: Cache<(String, i64), ScriptHashInfo> = Cache::new(1000);
     pub static ref FLOW_INFO_CACHE: Cache<(String, i64), FlowVersionInfo> = Cache::new(1000);
 
+    pub static ref QUIET_LOGS: bool = std::env::var("QUIET_LOGS").map(|s| s.parse::<bool>().unwrap_or(false)).unwrap_or(false);
+
 }
 
 const LATEST_VERSION_ID_CACHE_TTL: std::time::Duration = std::time::Duration::from_secs(60);
diff --git a/backend/windmill-common/src/oidc_ee.rs b/backend/windmill-common/src/oidc_ee.rs
deleted file mode 100644
index e7a157b04d..0000000000
--- a/backend/windmill-common/src/oidc_ee.rs
+++ /dev/null
@@ -1,198 +0,0 @@
-/*
- * Author: Ruben Fiszel
- * Copyright: Windmill Labs, Inc 2023
- * This file and its contents are licensed under the AGPLv3 License.
- * Please see the included NOTICE for copyright information and
- * LICENSE-AGPL for a copy of the license.
- */
-
-use serde::{Deserialize, Serialize};
-use tokio::sync::RwLock;
-#[cfg(all(feature = "enterprise", feature = "openidconnect"))]
-use {
-    crate::db::DB,
-    crate::{auth::IdToken as WindmillIdToken, error::Result},
-    anyhow,
-    openidconnect::{
-        core::{CoreJwsSigningAlgorithm, CoreRsaPrivateSigningKey},
-        IssuerUrl, JsonWebKeyId,
-    },
-    std::process::Command,
-};
-
-#[cfg(feature = "openidconnect")]
-use openidconnect::AdditionalClaims;
-
-#[cfg(feature = "openidconnect")]
-impl AdditionalClaims for JobClaim {}
-
-#[cfg(feature = "openidconnect")]
-impl AdditionalClaims for WorkspaceClaim {}
-
-#[cfg(feature = "openidconnect")]
-impl AdditionalClaims for InstanceClaim {}
-
-#[derive(Clone, Debug, Default, Deserialize, PartialEq, Eq, Serialize)]
-pub struct WorkspaceClaim {
-    pub workspace: String,
-}
-
-#[derive(Clone, Debug, Default, Deserialize, PartialEq, Eq, Serialize)]
-pub struct InstanceClaim {}
-
-#[derive(Clone, Debug, Default, Deserialize, PartialEq, Eq, Serialize)]
-pub struct JobClaim {
-    pub job_id: String,
-    pub path: Option<String>,
-    pub flow_path: Option<String>,
-    pub groups: Vec<String>,
-    pub username: String,
-    pub email: String,
-    pub workspace: String,
-}
-
-lazy_static::lazy_static! {
-    static ref PRIVATE_KEY: RwLock<Option<String>> = RwLock::new(None);
-}
-
-pub async fn generate_id_token<T: AdditionalClaims>(
-    db: Option<&DB>,
-    claim: T,
-    audience: &str,
-    identifier: String,
-    email: Option<String>,
-) -> Result<WindmillIdToken> {
-    use chrono::{Duration, Utc};
-    use openidconnect::{
-        core::{CoreGenderClaim, CoreJweContentEncryptionAlgorithm},
-        Audience, EndUserEmail, IdToken, IdTokenClaims, StandardClaims, SubjectIdentifier,
-    };
-
-    let private_key = get_private_key(db).await?;
-
-    let issue_url = format!("{}/api/oidc/", crate::BASE_URL.read().await.clone());
-    let issue_time = Utc::now();
-    let expiration = issue_time + Duration::try_hours(48).unwrap();
-    let id_token = IdToken::<
-        T,
-        CoreGenderClaim,
-        CoreJweContentEncryptionAlgorithm,
-        CoreJwsSigningAlgorithm,
-    >::new(
-        IdTokenClaims::<T, CoreGenderClaim>::new(
-            // Specify the issuer URL for the OpenID Connect Provider.
-            IssuerUrl::new(issue_url)
-                .map_err(|e| anyhow::anyhow!("Failed to generate IssueUrl: {}", e))?,
-            // The audience is usually a single entry with the client ID of the client for whom
-            // the ID token is intended. This is a required claim.
-            vec![Audience::new(audience.to_string())],
-            // The ID token expiration is usually much shorter than that of the access or refresh
-            // tokens issued to clients.
-            expiration,
-            // The issue time is usually the current time.
-            issue_time,
-            // Set the standard claims defined by the OpenID Connect Core spec.
-            StandardClaims::new(
-                // Stable subject identifiers are recommended in place of e-mail addresses or other
-                // potentially unstable identifiers. This is the only required claim.
-                SubjectIdentifier::new(identifier),
-            )
-            // Optional: specify the user's e-mail address. This should only be provided if the
-            // client has been granted the 'profile' or 'email' scopes.
-            .set_email(email.map(|x| EndUserEmail::new(x)))
-            // Optional: specify whether the provider has verified the user's e-mail address.
-            .set_email_verified(Some(true)),
-            // OpenID Connect Providers may supply custom claims by providing a struct that
-            // implements the AdditionalClaims trait. This requires manually using the
-            // generic IdTokenClaims struct rather than the CoreIdTokenClaims type alias,
-            // however.
-            claim,
-        ),
-        // The private key used for signing the ID token. For confidential clients (those able
-        // to maintain a client secret), a CoreHmacKey can also be used, in conjunction
-        // with one of the CoreJwsSigningAlgorithm::HmacSha* signing algorithms. When using an
-        // HMAC-based signing algorithm, the UTF-8 representation of the client secret should
-        // be used as the HMAC key.
-        &CoreRsaPrivateSigningKey::from_pem(
-            &private_key,
-            Some(JsonWebKeyId::new("windmill".to_string())),
-        )
-        .map_err(|e| anyhow::anyhow!("Invalid private key: {}", e))?,
-        // Uses the RS256 signature algorithm. This crate supports any RS*, PS*, or HS*
-        // signature algorithm.
-        CoreJwsSigningAlgorithm::RsaSsaPkcs1V15Sha256,
-        // When returning the ID token alongside an access token (e.g., in the Authorization Code
-        // flow), it is recommended to pass the access token here to set the `at_hash` claim
-        // automatically.
-        None,
-        // When returning the ID token alongside an authorization code (e.g., in the implicit
-        // flow), it is recommended to pass the authorization code here to set the `c_hash` claim
-        // automatically.
-        None,
-    )
-    .map_err(|e| anyhow::anyhow!("Failed to generate token: {}", e))?;
-
-    Ok(WindmillIdToken::new(id_token.to_string(), expiration))
-}
-
-#[cfg(all(feature = "enterprise", feature = "openidconnect"))]
-pub async fn get_private_key(db: Option<&DB>) -> anyhow::Result<String> {
-    if let Some(key) = PRIVATE_KEY.read().await.clone() {
-        return Ok(key);
-    } else if let Some(db) = db {
-        let key = sqlx::query_scalar!(
-            "SELECT value->>'private_key' FROM global_settings WHERE name = 'rsa_keys'",
-        )
-        .fetch_optional(db)
-        .await?
-        .flatten();
-
-        let key = key.filter(|s| !s.is_empty());
-
-        if let Some(key) = key {
-            return Ok(key);
-        } else {
-            let keys = gen_pems(db).await?;
-            return Ok(keys.private_key);
-        }
-    } else {
-        return Err(anyhow::anyhow!("Private key not found and no db provided"));
-    }
-}
-
-#[cfg(all(feature = "enterprise", feature = "openidconnect"))]
-#[derive(Debug, Clone, serde::Serialize)]
-struct Keys {
-    private_key: String,
-}
-
-#[cfg(all(feature = "enterprise", feature = "openidconnect"))]
-async fn gen_pems(db: &DB) -> anyhow::Result<Keys> {
-    use anyhow::anyhow;
-
-    let private_key_cmd = Command::new("openssl")
-        .arg("genrsa")
-        .arg("--traditional")
-        .arg("2048")
-        .output()
-        .expect("failed to execute process");
-
-    let private_key = String::from_utf8(private_key_cmd.stdout)?;
-
-    tracing::debug!("Generated private key: {}", private_key);
-
-    if private_key.is_empty() {
-        return Err(anyhow!("Failed to generate RSA key: key is empty"));
-    }
-
-    let keys = Keys { private_key };
-
-    sqlx::query!(
-        r#"INSERT INTO global_settings (name, value) VALUES ('rsa_keys', $1)"#,
-        serde_json::to_value(&keys).unwrap()
-    )
-    .execute(db)
-    .await?;
-
-    Ok(keys)
-}
diff --git a/backend/windmill-common/src/oidc_oss.rs b/backend/windmill-common/src/oidc_oss.rs
new file mode 100644
index 0000000000..0a42cee2ed
--- /dev/null
+++ b/backend/windmill-common/src/oidc_oss.rs
@@ -0,0 +1,92 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::oidc_ee::*;
+
+/*
+ * Author: Ruben Fiszel
+ * Copyright: Windmill Labs, Inc 2023
+ * This file and its contents are licensed under the AGPLv3 License.
+ * Please see the included NOTICE for copyright information and
+ * LICENSE-AGPL for a copy of the license.
+ */
+
+#[cfg(not(feature = "private"))]
+use serde::{Deserialize, Serialize};
+#[cfg(not(feature = "private"))]
+use tokio::sync::RwLock;
+#[cfg(all(
+    feature = "enterprise",
+    feature = "openidconnect",
+    not(feature = "private")
+))]
+use {
+    crate::db::DB,
+    crate::{
+        auth::IdToken as WindmillIdToken,
+        error::{Error, Result},
+    },
+    anyhow,
+};
+
+#[cfg(all(feature = "openidconnect", not(feature = "private")))]
+use openidconnect::AdditionalClaims;
+
+#[cfg(all(feature = "openidconnect", not(feature = "private")))]
+impl AdditionalClaims for JobClaim {}
+
+#[cfg(all(feature = "openidconnect", not(feature = "private")))]
+impl AdditionalClaims for WorkspaceClaim {}
+
+#[cfg(all(feature = "openidconnect", not(feature = "private")))]
+impl AdditionalClaims for InstanceClaim {}
+
+#[derive(Clone, Debug, Default, Deserialize, PartialEq, Eq, Serialize)]
+#[cfg(not(feature = "private"))]
+pub struct WorkspaceClaim {
+    pub workspace: String,
+}
+
+#[derive(Clone, Debug, Default, Deserialize, PartialEq, Eq, Serialize)]
+#[cfg(not(feature = "private"))]
+pub struct InstanceClaim {}
+
+#[derive(Clone, Debug, Default, Deserialize, PartialEq, Eq, Serialize)]
+#[cfg(not(feature = "private"))]
+pub struct JobClaim {
+    pub job_id: String,
+    pub path: Option<String>,
+    pub flow_path: Option<String>,
+    pub groups: Vec<String>,
+    pub username: String,
+    pub email: String,
+    pub workspace: String,
+}
+
+#[cfg(not(feature = "private"))]
+lazy_static::lazy_static! {
+    static ref PRIVATE_KEY: RwLock<Option<String>> = RwLock::new(None);
+}
+
+#[cfg(not(feature = "private"))]
+pub async fn generate_id_token<T: AdditionalClaims>(
+    _db: Option<&DB>,
+    _claim: T,
+    _audience: &str,
+    _identifier: String,
+    _email: Option<String>,
+) -> Result<WindmillIdToken> {
+    Err(Error::internal_err(
+        "Not implemented in Windmill's Open Source repository".to_string(),
+    ))
+}
+
+#[cfg(all(
+    feature = "enterprise",
+    feature = "openidconnect",
+    not(feature = "private")
+))]
+pub async fn get_private_key(_db: Option<&DB>) -> anyhow::Result<String> {
+    Err(anyhow::anyhow!(
+        "Not implemented in Windmill's Open Source repository"
+    ))
+}
diff --git a/backend/windmill-common/src/otel_ee.rs b/backend/windmill-common/src/otel_oss.rs
similarity index 60%
rename from backend/windmill-common/src/otel_ee.rs
rename to backend/windmill-common/src/otel_oss.rs
index f3ada162f6..9225915636 100644
--- a/backend/windmill-common/src/otel_ee.rs
+++ b/backend/windmill-common/src/otel_oss.rs
@@ -1,3 +1,7 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::otel_ee::*;
+
 /*
  * Author: Ruben Fiszel
  * Copyright: Windmill Labs, Inc 2022
@@ -6,43 +10,51 @@
  * LICENSE-AGPL for a copy of the license.
  */
 
+#[cfg(not(feature = "private"))]
 use crate::{jobs::QueuedJob, utils::Mode};
+#[cfg(not(feature = "private"))]
 use uuid::Uuid;
 
+#[cfg(not(feature = "private"))]
 pub fn set_span_parent(_span: &tracing::Span, _rj: &Uuid) {}
 
-#[cfg(not(all(feature = "otel", feature = "enterprise")))]
+#[cfg(all(
+    not(all(feature = "otel", feature = "enterprise")),
+    not(feature = "private")
+))]
 pub(crate) type OtelProvider = Option<()>;
 
-#[cfg(all(feature = "otel", feature = "enterprise"))]
+#[cfg(all(feature = "otel", feature = "enterprise", not(feature = "private")))]
 pub(crate) type OtelProvider = Option<opentelemetry_sdk::metrics::SdkMeterProvider>;
 
-#[cfg(not(feature = "otel"))]
+#[cfg(all(not(feature = "otel"), not(feature = "private")))]
 pub fn otel_ctx() -> () {}
 
-#[cfg(feature = "otel")]
+#[cfg(all(feature = "otel", not(feature = "private")))]
 #[inline(always)]
 pub fn otel_ctx() -> opentelemetry::Context {
     opentelemetry::Context::current()
 }
 
-#[cfg(not(feature = "otel"))]
+#[cfg(all(not(feature = "otel"), not(feature = "private")))]
 impl<T: Sized> FutureExt for T {}
 
-#[cfg(not(feature = "otel"))]
+#[cfg(all(not(feature = "otel"), not(feature = "private")))]
 pub trait FutureExt: Sized {
     fn with_context(self, _otel_cx: ()) -> Self {
         self
     }
 }
 
+#[cfg(not(feature = "private"))]
 use tracing_subscriber::EnvFilter;
 
+#[cfg(not(feature = "private"))]
 pub(crate) fn init_logs_bridge(_mode: &Mode, _hostname: &str, _env: &str) -> Option<EnvFilter> {
     None
 }
 
-#[cfg(all(feature = "otel", feature = "enterprise"))]
+#[cfg(all(feature = "otel", feature = "enterprise", not(feature = "private")))]
 pub(crate) fn init_otlp_tracer(
     _mode: &Mode,
     _hostname: &str,
@@ -51,8 +63,10 @@ pub(crate) fn init_otlp_tracer(
     None
 }
 
+#[cfg(not(feature = "private"))]
 pub(crate) fn init_meter_provider(_mode: &Mode, _hostname: &str, _env: &str) -> OtelProvider {
     None
 }
 
+#[cfg(not(feature = "private"))]
 pub fn add_root_flow_job_to_otlp(_queued_job: &QueuedJob, _success: bool) {}
diff --git a/backend/windmill-common/src/s3_helpers.rs b/backend/windmill-common/src/s3_helpers.rs
index 7e7c48851e..171958f5cd 100644
--- a/backend/windmill-common/src/s3_helpers.rs
+++ b/backend/windmill-common/src/s3_helpers.rs
@@ -147,7 +147,7 @@ pub enum ObjectStoreReload {
 #[cfg(feature = "parquet")]
 pub async fn reload_object_store_setting(db: &crate::DB) -> ObjectStoreReload {
     use crate::{
-        ee::{get_license_plan, LicensePlan},
+        ee_oss::{get_license_plan, LicensePlan},
         global_settings::{load_value_from_global_settings, OBJECT_STORE_CONFIG_SETTING},
         s3_helpers::ObjectSettings,
     };
@@ -613,8 +613,8 @@ pub async fn build_object_store_from_settings(
             build_azure_blob_client(&azure_blob_resource).map(|x| ExpirableObjectStore::from(x))
         }
         ObjectSettings::AwsOidc(ref s3_aws_oidc_settings) => {
-            let token_generator = crate::job_s3_helpers_ee::TokenGenerator::AsServerInstance();
-            let res = crate::job_s3_helpers_ee::generate_s3_aws_oidc_resource(
+            let token_generator = crate::job_s3_helpers_oss::TokenGenerator::AsServerInstance();
+            let res = crate::job_s3_helpers_oss::generate_s3_aws_oidc_resource(
                 s3_aws_oidc_settings.clone(),
                 token_generator,
                 init_private_key,
diff --git a/backend/windmill-common/src/scripts.rs b/backend/windmill-common/src/scripts.rs
index dda9daf0f4..ffa7bd486a 100644
--- a/backend/windmill-common/src/scripts.rs
+++ b/backend/windmill-common/src/scripts.rs
@@ -9,6 +9,7 @@
 use std::{
     fmt::{self, Display},
     hash::{Hash, Hasher},
+    str::FromStr,
 };
 
 use crate::{
@@ -21,6 +22,7 @@ use crate::worker::HUB_CACHE_DIR;
 use anyhow::Context;
 use backon::ConstantBuilder;
 use backon::{BackoffBuilder, Retryable};
+use itertools::Itertools;
 use serde::de::Error as _;
 use serde::{ser::SerializeSeq, Deserialize, Deserializer, Serialize};
 
@@ -85,6 +87,40 @@ impl ScriptLang {
     }
 }
 
+impl FromStr for ScriptLang {
+    type Err = Error;
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        let language = match s.to_lowercase().as_str() {
+            "bun" => ScriptLang::Bun,
+            "bunnative" => ScriptLang::Bunnative,
+            "nativets" => ScriptLang::Nativets,
+            "deno" => ScriptLang::Deno,
+            "python3" => ScriptLang::Python3,
+            "go" => ScriptLang::Go,
+            "bash" => ScriptLang::Bash,
+            "powershell" => ScriptLang::Powershell,
+            "postgresql" => ScriptLang::Postgresql,
+            "mysql" => ScriptLang::Mysql,
+            "bigquery" => ScriptLang::Bigquery,
+            "snowflake" => ScriptLang::Snowflake,
+            "mssql" => ScriptLang::Mssql,
+            "graphql" => ScriptLang::Graphql,
+            "oracledb" => ScriptLang::OracleDB,
+            "php" => ScriptLang::Php,
+            "rust" => ScriptLang::Rust,
+            "ansible" => ScriptLang::Ansible,
+            "csharp" => ScriptLang::CSharp,
+            "nu" => ScriptLang::Nu,
+            "java" => ScriptLang::Java,
+            language => {
+                return Err(anyhow::anyhow!("{} is currently not supported", language).into())
+            }
+        };
+
+        Ok(language)
+    }
+}
+
 #[derive(Eq, PartialEq, Debug, Hash, Clone, Copy, sqlx::Type)]
 #[sqlx(transparent)]
 pub struct ScriptHash(pub i64);
@@ -367,7 +403,7 @@ where
     deserializer.deserialize_any(StringOrArrayVisitor)
 }
 
-#[derive(Deserialize)]
+#[derive(Debug, Deserialize)]
 pub struct ListScriptQuery {
     pub path_start: Option<String>,
     pub path_exact: Option<String>,
@@ -384,6 +420,29 @@ pub struct ListScriptQuery {
     pub include_without_main: Option<bool>,
     pub include_draft_only: Option<bool>,
     pub with_deployment_msg: Option<bool>,
+    #[serde(default, deserialize_with = "from_seq")]
+    pub languages: Option<Vec<ScriptLang>>,
+}
+
+fn from_seq<'de, D>(deserializer: D) -> Result<Option<Vec<ScriptLang>>, D::Error>
+where
+    D: Deserializer<'de>,
+{
+    let s = <String>::deserialize(deserializer)?;
+
+    let languages: Vec<ScriptLang> = s
+        .split(",")
+        .map(ScriptLang::from_str)
+        .try_collect()
+        .map_err(|e| serde::de::Error::custom(e.to_string()))?;
+
+    let languages = if languages.is_empty() {
+        None
+    } else {
+        Some(languages)
+    };
+
+    Ok(languages)
 }
 
 pub fn to_i64(s: &str) -> crate::error::Result<i64> {
diff --git a/backend/windmill-common/src/stats_ee.rs b/backend/windmill-common/src/stats_oss.rs
similarity index 73%
rename from backend/windmill-common/src/stats_ee.rs
rename to backend/windmill-common/src/stats_oss.rs
index 5d2dc82b82..829e6e3a5b 100644
--- a/backend/windmill-common/src/stats_ee.rs
+++ b/backend/windmill-common/src/stats_oss.rs
@@ -1,17 +1,26 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::stats_ee::*;
+
+#[cfg(not(feature = "private"))]
 use sqlx::Postgres;
 
+#[cfg(not(feature = "private"))]
 use crate::{error::Result, scripts::ScriptLang, DB};
 
+#[cfg(not(feature = "private"))]
 pub async fn get_disable_stats_setting(_db: &DB) -> bool {
     // stats details are closed source
 
     false
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn schedule_stats(_db: &DB, _http_client: &reqwest::Client) -> () {
     // stats details are closed source
 }
 
+#[cfg(not(feature = "private"))]
 #[derive(Debug, sqlx::FromRow, serde::Serialize)]
 struct JobsUsage {
     language: Option<ScriptLang>,
@@ -19,12 +28,14 @@ struct JobsUsage {
     count: i64,
 }
 
+#[cfg(not(feature = "private"))]
 pub enum SendStatsReason {
     Manual,
     Schedule,
     OnStart,
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn send_stats(
     _http_client: &reqwest::Client,
     _db: &DB,
@@ -34,11 +45,13 @@ pub async fn send_stats(
     Ok(())
 }
 
+#[cfg(not(feature = "private"))]
 pub struct ActiveUserUsage {
     pub author_count: Option<i32>,
     pub operator_count: Option<i32>,
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn get_user_usage<'c, E: sqlx::Executor<'c, Database = Postgres>>(
     _db: E,
 ) -> Result<ActiveUserUsage> {
diff --git a/backend/windmill-common/src/teams_ee.rs b/backend/windmill-common/src/teams_ee.rs
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/backend/windmill-common/src/teams_oss.rs b/backend/windmill-common/src/teams_oss.rs
new file mode 100644
index 0000000000..347ad8e6d7
--- /dev/null
+++ b/backend/windmill-common/src/teams_oss.rs
@@ -0,0 +1,5 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::teams_ee::*;
+
+
diff --git a/backend/windmill-common/src/tracing_init.rs b/backend/windmill-common/src/tracing_init.rs
index 5ed5cec752..77194ac0a9 100644
--- a/backend/windmill-common/src/tracing_init.rs
+++ b/backend/windmill-common/src/tracing_init.rs
@@ -48,7 +48,7 @@ pub fn initialize_tracing(
     hostname: &str,
     mode: &Mode,
     environment: &str,
-) -> (WorkerGuard, crate::otel_ee::OtelProvider) {
+) -> (WorkerGuard, crate::otel_oss::OtelProvider) {
     let style = std::env::var("RUST_LOG_STYLE").unwrap_or_else(|_| "auto".into());
 
     let rust_log_env = std::env::var("RUST_LOG");
@@ -70,16 +70,16 @@ pub fn initialize_tracing(
         LevelFilter::INFO
     };
 
-    let meter_provider = crate::otel_ee::init_meter_provider(mode, hostname, environment);
+    let meter_provider = crate::otel_oss::init_meter_provider(mode, hostname, environment);
 
     #[cfg(all(feature = "otel", feature = "enterprise"))]
-    let opentelemetry = crate::otel_ee::init_otlp_tracer(mode, hostname, environment)
+    let opentelemetry = crate::otel_oss::init_otlp_tracer(mode, hostname, environment)
         .map(|x| tracing_opentelemetry::layer().with_tracer(x));
 
     #[cfg(not(all(feature = "otel", feature = "enterprise")))]
     let opentelemetry: Option<EnvFilter> = None;
 
-    let logs_bridge = crate::otel_ee::init_logs_bridge(&mode, hostname, environment);
+    let logs_bridge = crate::otel_oss::init_logs_bridge(&mode, hostname, environment);
 
     use tracing_appender::rolling::{RollingFileAppender, Rotation};
 
diff --git a/backend/windmill-common/src/utils.rs b/backend/windmill-common/src/utils.rs
index 3f1a1bd385..6b539dc73f 100644
--- a/backend/windmill-common/src/utils.rs
+++ b/backend/windmill-common/src/utils.rs
@@ -7,9 +7,9 @@
  */
 
 use crate::auth::is_devops_email;
-use crate::ee::LICENSE_KEY_ID;
+use crate::ee_oss::LICENSE_KEY_ID;
 #[cfg(feature = "enterprise")]
-use crate::ee::{send_critical_alert, CriticalAlertKind};
+use crate::ee_oss::{send_critical_alert, CriticalAlertKind};
 use crate::error::{to_anyhow, Error, Result};
 use crate::global_settings::UNIQUE_ID_SETTING;
 use crate::DB;
@@ -22,10 +22,14 @@ use croner::Cron;
 use rand::{distr::Alphanumeric, rng, Rng};
 use reqwest::Client;
 use semver::Version;
-use serde::{Deserialize, Deserializer, Serialize};
+use serde::{de::Error as SerdeDeserializerError, Deserialize, Deserializer, Serialize};
 use sha2::{Digest, Sha256};
 use sqlx::{Pool, Postgres};
-use std::str::FromStr;
+use std::borrow::Cow;
+use std::fmt::Display;
+use std::{fs::DirBuilder as SyncDirBuilder, str::FromStr};
+use tokio::fs::DirBuilder as AsyncDirBuilder;
+use url::Url;
 
 pub const MAX_PER_PAGE: usize = 10000;
 pub const DEFAULT_PER_PAGE: usize = 1000;
@@ -33,6 +37,10 @@ pub const DEFAULT_PER_PAGE: usize = 1000;
 pub const GIT_VERSION: &str =
     git_version!(args = ["--tag", "--always"], fallback = "unknown-version");
 
+pub const AGENT_JWT_PREFIX: &str = "jwt_agent_";
+pub const WORKER_NAME_PREFIX: &str = "wk";
+pub const AGENT_WORKER_NAME_PREFIX: &str = "ag";
+
 use crate::CRITICAL_ALERT_MUTE_UI_ENABLED;
 use std::panic::{self, AssertUnwindSafe, Location};
 use std::sync::atomic::Ordering;
@@ -53,6 +61,12 @@ lazy_static::lazy_static! {
         }
     ).unwrap_or(Version::new(0, 1, 0));
 
+    pub static ref HOSTNAME :String = std::env::var("FORCE_HOSTNAME").unwrap_or_else(|_| {
+        gethostname()
+            .to_str()
+            .map(|x| x.to_string())
+            .unwrap_or_else(|| rd_string(5))
+    });
 
     pub static ref MODE_AND_ADDONS: ModeAndAddons = {
         let mut search_addon = false;
@@ -70,7 +84,7 @@ lazy_static::lazy_static! {
                 }
                 Mode::Worker
             } else if &x == "agent" {
-                println!("Binary is in 'agent' mode");
+                println!("Binary is in 'agent' mode with BASE_INTERNAL_URL={}", std::env::var("BASE_INTERNAL_URL").unwrap_or_default());
                 if std::env::var("BASE_INTERNAL_URL").is_err() {
                     panic!("BASE_INTERNAL_URL is required in agent mode")
                 }
@@ -120,6 +134,10 @@ lazy_static::lazy_static! {
     };
 }
 
+lazy_static::lazy_static! {
+    pub static ref AGENT_TOKEN: String = std::env::var("AGENT_TOKEN").unwrap_or_default();
+}
+
 #[derive(Clone)]
 pub struct ModeAndAddons {
     pub indexer: bool,
@@ -167,15 +185,6 @@ pub async fn require_admin_or_devops(
     Ok(())
 }
 
-pub fn hostname() -> String {
-    std::env::var("FORCE_HOSTNAME").unwrap_or_else(|_| {
-        gethostname()
-            .to_str()
-            .map(|x| x.to_string())
-            .unwrap_or_else(|| rd_string(5))
-    })
-}
-
 fn instance_name(hostname: &str) -> String {
     hostname
         .replace(" ", "")
@@ -186,15 +195,30 @@ fn instance_name(hostname: &str) -> String {
         .to_string()
 }
 
-pub fn worker_suffix(hostname: &str, rd_string: &str) -> String {
-    format!("{}-{}", instance_name(hostname), rd_string)
+const DEFAULT_WORKER_SUFFIX_LEN: usize = 5;
+pub const SSH_AGENT_WORKER_SUFFIX: &'static str = "/ssh";
+
+pub fn create_worker_suffix(hostname: &str, rd_string_len: usize, ssh_ag_worker: bool) -> String {
+    let mut wk_suffix = format!("{}-{}", instance_name(hostname), rd_string(rd_string_len));
+    if ssh_ag_worker {
+        wk_suffix.push_str(SSH_AGENT_WORKER_SUFFIX);
+    }
+    wk_suffix
+}
+
+pub fn create_ssh_agent_worker_suffix(hostname: &str) -> String {
+    create_worker_suffix(hostname, DEFAULT_WORKER_SUFFIX_LEN, true)
+}
+
+pub fn create_default_worker_suffix(hostname: &str) -> String {
+    create_worker_suffix(hostname, DEFAULT_WORKER_SUFFIX_LEN, false)
 }
 
 pub fn worker_name_with_suffix(is_agent: bool, worker_group: &str, suffix: &str) -> String {
     if is_agent {
-        format!("ag-{}-{}", worker_group, suffix)
+        format!("{}-{}-{}", AGENT_WORKER_NAME_PREFIX, worker_group, suffix)
     } else {
-        format!("wk-{}-{}", worker_group, suffix)
+        format!("{}-{}-{}", WORKER_NAME_PREFIX, worker_group, suffix)
     }
 }
 
@@ -223,6 +247,21 @@ pub async fn now_from_db<'c, E: sqlx::PgExecutor<'c>>(
         .unwrap())
 }
 
+pub async fn create_directory_async(directory_path: &str) {
+    AsyncDirBuilder::new()
+        .recursive(true)
+        .create(directory_path)
+        .await
+        .expect("could not create dir");
+}
+
+pub fn create_directory_sync(directory_path: &str) {
+    SyncDirBuilder::new()
+        .recursive(true)
+        .create(directory_path)
+        .expect("could not create dir");
+}
+
 pub fn not_found_if_none<T, U: AsRef<str>>(opt: Option<T>, kind: &str, name: U) -> Result<T> {
     if let Some(o) = opt {
         Ok(o)
@@ -487,6 +526,18 @@ impl<T> IsEmpty for Vec<T> {
     }
 }
 
+impl<T> IsEmpty for Option<T>
+where
+    T: IsEmpty,
+{
+    fn is_empty(&self) -> bool {
+        match self {
+            Some(v) => v.is_empty(),
+            None => true,
+        }
+    }
+}
+
 pub fn empty_as_none<'de, D, T>(deserializer: D) -> std::result::Result<Option<T>, D::Error>
 where
     D: Deserializer<'de>,
@@ -496,6 +547,26 @@ where
     Ok(option.filter(|s| !s.is_empty()))
 }
 
+pub fn is_empty<T>(value: &T) -> bool
+where
+    T: IsEmpty,
+{
+    value.is_empty()
+}
+
+pub fn deserialize_url<'de, D: Deserializer<'de>>(
+    de: D,
+) -> std::result::Result<Option<Url>, D::Error> {
+    let intermediate = <Option<Cow<'de, str>>>::deserialize(de)?;
+
+    match intermediate.as_deref() {
+        None | Some("") => Ok(None),
+        Some(non_empty_string) => Url::parse(non_empty_string)
+            .map(Some)
+            .map_err(D::Error::custom),
+    }
+}
+
 pub async fn fetch_mute_workspace(_db: &DB, workspace_id: &str) -> Result<bool> {
     match sqlx::query!(
         "SELECT mute_critical_alerts FROM workspace_settings WHERE workspace_id = $1",
@@ -747,3 +818,20 @@ impl<F: Future> Future for WarnAfterFuture<F> {
         }
     }
 }
+
+#[derive(Debug, Deserialize, Clone, Copy, PartialEq, Eq, Hash)]
+#[serde(rename_all = "lowercase")]
+pub enum RunnableKind {
+    Script,
+    Flow,
+}
+
+impl Display for RunnableKind {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let runnable_kind = match self {
+            RunnableKind::Script => "script",
+            RunnableKind::Flow => "flow",
+        };
+        write!(f, "{}", runnable_kind)
+    }
+}
diff --git a/backend/windmill-common/src/worker.rs b/backend/windmill-common/src/worker.rs
index 6b11fa086f..1f09176512 100644
--- a/backend/windmill-common/src/worker.rs
+++ b/backend/windmill-common/src/worker.rs
@@ -1,4 +1,5 @@
 use anyhow::anyhow;
+use axum::http::HeaderMap;
 use bytes::Bytes;
 use const_format::concatcp;
 use itertools::Itertools;
@@ -34,7 +35,6 @@ use crate::{
 
 pub const DEFAULT_CLOUD_TIMEOUT: u64 = 900;
 pub const DEFAULT_SELFHOSTED_TIMEOUT: u64 = 604800; // 7 days
-
 lazy_static::lazy_static! {
     pub static ref WORKER_GROUP: String = std::env::var("WORKER_GROUP").unwrap_or_else(|_| {
         #[cfg(not(feature = "enterprise"))]
@@ -129,7 +129,7 @@ lazy_static::lazy_static! {
 
     pub static ref ALL_TAGS: Arc<RwLock<Vec<String>>> = Arc::new(RwLock::new(vec![]));
 
-    static ref CUSTOM_TAG_REGEX: Regex = Regex::new(r"^([\w-]+)\(((?:[\w-])+\+?)+\)$").unwrap();
+    static ref CUSTOM_TAG_REGEX: Regex = Regex::new(r"^([\w-]+)\(((?:[\w-]+\+)*[\w-]+)\)$").unwrap();
 
     pub static ref DISABLE_BUNDLING: bool = std::env::var("DISABLE_BUNDLING")
     .ok()
@@ -159,12 +159,20 @@ impl HttpClient {
     pub async fn post<T: Serialize, R: DeserializeOwned>(
         &self,
         url: &str,
+        headers: Option<HeaderMap>,
         body: &T,
     ) -> anyhow::Result<R> {
-        let response = self
+        let response_builder = self
             .0
             .post(format!("{}{}", *BASE_INTERNAL_URL, url))
-            .json(body)
+            .json(body);
+
+        let response_builder = match headers {
+            Some(headers) => response_builder.headers(headers),
+            None => response_builder,
+        };
+
+        let response = response_builder
             .send()
             .await
             .map_err(|e| anyhow::anyhow!(e))?;
@@ -259,7 +267,7 @@ fn format_pull_query(peek: String) -> String {
                 id, workspace_id, parent_job, created_by, created_at, runnable_id,
                 runnable_path, args, kind, trigger, trigger_kind,
                 permissioned_as, permissioned_as_email, script_lang,
-                flow_innermost_root_job, flow_step_id, 
+                flow_innermost_root_job, flow_step_id,
                 same_worker, pre_run_error, visible_to_owner, tag, concurrent_limit,
                 concurrency_time_window_s, timeout, cache_ttl, priority, raw_code, raw_lock,
                 raw_flow, script_entrypoint_override, preprocessed
@@ -267,13 +275,13 @@ fn format_pull_query(peek: String) -> String {
             WHERE id = (SELECT id FROM peek)
         ) SELECT j.id, j.workspace_id, j.parent_job, j.created_by, started_at, scheduled_for,
             j.runnable_id, j.runnable_path, j.args, canceled_by,
-            canceled_reason, j.kind, j.trigger, j.trigger_kind, j.permissioned_as, 
+            canceled_reason, j.kind, j.trigger, j.trigger_kind, j.permissioned_as,
             flow_status, j.script_lang,
-            j.same_worker, j.pre_run_error, j.visible_to_owner, 
+            j.same_worker, j.pre_run_error, j.visible_to_owner,
             j.tag, j.concurrent_limit, j.concurrency_time_window_s, j.flow_innermost_root_job,
             j.timeout, j.flow_step_id, j.cache_ttl, j.priority, j.raw_code, j.raw_lock, j.raw_flow,
             j.script_entrypoint_override, j.preprocessed, pj.runnable_path as parent_runnable_path,
-            COALESCE(p.email, j.permissioned_as_email) as permissioned_as_email, p.username as permissioned_as_username, p.is_admin as permissioned_as_is_admin, 
+            COALESCE(p.email, j.permissioned_as_email) as permissioned_as_email, p.username as permissioned_as_username, p.is_admin as permissioned_as_is_admin,
             p.is_operator as permissioned_as_is_operator, p.groups as permissioned_as_groups, p.folders as permissioned_as_folders
         FROM q, j
             LEFT JOIN v2_job_status f USING (id)
@@ -308,7 +316,7 @@ pub async fn store_suspended_pull_query(wc: &WorkerConfig) {
 }
 
 pub fn make_pull_query(tags: &[String]) -> String {
-    format_pull_query(format!(
+    let query = format_pull_query(format!(
         "SELECT id
         FROM v2_job_queue
         WHERE running = false AND tag IN ({}) AND scheduled_for <= now()
@@ -316,7 +324,8 @@ pub fn make_pull_query(tags: &[String]) -> String {
         FOR UPDATE SKIP LOCKED
         LIMIT 1",
         tags.iter().map(|x| format!("'{x}'")).join(", ")
-    ))
+    ));
+    query
 }
 
 pub async fn store_pull_query(wc: &WorkerConfig) {
@@ -1028,7 +1037,7 @@ pub async fn update_ping_http(
     Ok(())
 }
 
-#[derive(Serialize, Deserialize)]
+#[derive(Debug, Serialize, Deserialize)]
 pub struct JobCancelled {
     pub canceled_by: String,
     pub reason: String,
@@ -1060,11 +1069,11 @@ pub async fn update_ping_for_failed_init_script_query(
     db: &DB,
 ) -> anyhow::Result<()> {
     sqlx::query!(
-        "UPDATE worker_ping SET 
-ping_at = now(), 
-jobs_executed = 1, 
-current_job_id = $1, 
-current_job_workspace_id = 'admins' 
+        "UPDATE worker_ping SET
+ping_at = now(),
+jobs_executed = 1,
+current_job_id = $1,
+current_job_workspace_id = 'admins'
 WHERE worker = $2",
         last_job_id,
         worker_name
@@ -1510,7 +1519,7 @@ pub struct WorkerConfig {
 
 impl std::fmt::Debug for WorkerConfig {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "WorkerConfig {{ worker_tags: {:?}, priority_tags_sorted: {:?}, dedicated_worker: {:?}, init_bash: {:?}, cache_clear: {:?}, additional_python_paths: {:?}, pip_local_dependencies: {:?}, env_vars: {:?} }}", 
+        write!(f, "WorkerConfig {{ worker_tags: {:?}, priority_tags_sorted: {:?}, dedicated_worker: {:?}, init_bash: {:?}, cache_clear: {:?}, additional_python_paths: {:?}, pip_local_dependencies: {:?}, env_vars: {:?} }}",
         self.worker_tags, self.priority_tags_sorted, self.dedicated_worker, self.init_bash, self.cache_clear, self.additional_python_paths, self.pip_local_dependencies, self.env_vars.iter().map(|(k, v)| format!("{}: {}{} ({} chars)", k, &v[..3.min(v.len())], "***", v.len())).collect::<Vec<String>>().join(", "))
     }
 }
diff --git a/backend/windmill-git-sync/Cargo.toml b/backend/windmill-git-sync/Cargo.toml
index d5a8412fae..6a0499639a 100644
--- a/backend/windmill-git-sync/Cargo.toml
+++ b/backend/windmill-git-sync/Cargo.toml
@@ -9,6 +9,7 @@ name = "windmill_git_sync"
 path = "./src/lib.rs"
 
 [features]
+private = []
 enterprise = ["windmill-queue/enterprise", "windmill-common/enterprise"]
 default = []
 
diff --git a/backend/windmill-git-sync/src/git_sync_ee.rs b/backend/windmill-git-sync/src/git_sync_oss.rs
similarity index 69%
rename from backend/windmill-git-sync/src/git_sync_ee.rs
rename to backend/windmill-git-sync/src/git_sync_oss.rs
index cc245d3d0c..70e2b53640 100644
--- a/backend/windmill-git-sync/src/git_sync_ee.rs
+++ b/backend/windmill-git-sync/src/git_sync_oss.rs
@@ -1,7 +1,14 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::git_sync_ee::*;
+
+#[cfg(not(feature = "private"))]
 use windmill_common::error::Result;
 
+#[cfg(not(feature = "private"))]
 use crate::{DeployedObject, DB};
 
+#[cfg(not(feature = "private"))]
 pub async fn handle_deployment_metadata<'c>(
     _email: &str,
     _created_by: &str,
diff --git a/backend/windmill-git-sync/src/lib.rs b/backend/windmill-git-sync/src/lib.rs
index f1e0ed6ee3..d4e4ebf71f 100644
--- a/backend/windmill-git-sync/src/lib.rs
+++ b/backend/windmill-git-sync/src/lib.rs
@@ -10,9 +10,11 @@ use sqlx::{Pool, Postgres};
 
 use windmill_common::scripts::ScriptHash;
 
+#[cfg(feature = "private")]
 pub mod git_sync_ee;
+pub mod git_sync_oss;
 
-pub use git_sync_ee::handle_deployment_metadata;
+pub use git_sync_oss::handle_deployment_metadata;
 pub type DB = Pool<Postgres>;
 
 #[derive(Clone, Debug)]
diff --git a/backend/windmill-indexer/Cargo.toml b/backend/windmill-indexer/Cargo.toml
index 14ab53beef..ea95d6237d 100644
--- a/backend/windmill-indexer/Cargo.toml
+++ b/backend/windmill-indexer/Cargo.toml
@@ -11,6 +11,7 @@ path = "src/lib.rs"
 [features]
 default = []
 parquet = ["dep:object_store"]
+private = []
 enterprise = []
 
 [dependencies]
diff --git a/backend/windmill-indexer/src/completed_runs_ee.rs b/backend/windmill-indexer/src/completed_runs_oss.rs
similarity index 66%
rename from backend/windmill-indexer/src/completed_runs_ee.rs
rename to backend/windmill-indexer/src/completed_runs_oss.rs
index f5c6c98cf8..083f8744fa 100644
--- a/backend/windmill-indexer/src/completed_runs_ee.rs
+++ b/backend/windmill-indexer/src/completed_runs_oss.rs
@@ -1,17 +1,28 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::completed_runs_ee::*;
+
+#[cfg(not(feature = "private"))]
 use anyhow::anyhow;
+#[cfg(not(feature = "private"))]
 use sqlx::{Pool, Postgres};
+#[cfg(not(feature = "private"))]
 use windmill_common::error::Error;
 
+#[cfg(not(feature = "private"))]
 #[derive(Clone)]
 pub struct IndexReader;
 
+#[cfg(not(feature = "private"))]
 #[derive(Clone)]
 pub struct IndexWriter;
 
+#[cfg(not(feature = "private"))]
 pub async fn init_index(_db: &Pool<Postgres>) -> Result<(IndexReader, IndexWriter), Error> {
     Err(anyhow!("Cannot initialize index: not in EE").into())
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn run_indexer(
     _db: Pool<Postgres>,
     mut _index_writer: IndexWriter,
diff --git a/backend/windmill-indexer/src/indexer_ee.rs b/backend/windmill-indexer/src/indexer_ee.rs
deleted file mode 100644
index 8b13789179..0000000000
--- a/backend/windmill-indexer/src/indexer_ee.rs
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/backend/windmill-indexer/src/indexer_oss.rs b/backend/windmill-indexer/src/indexer_oss.rs
new file mode 100644
index 0000000000..198c14e526
--- /dev/null
+++ b/backend/windmill-indexer/src/indexer_oss.rs
@@ -0,0 +1,5 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::indexer_ee::*;
+
+
diff --git a/backend/windmill-indexer/src/lib.rs b/backend/windmill-indexer/src/lib.rs
index 59c6a627f7..6c13b551d1 100644
--- a/backend/windmill-indexer/src/lib.rs
+++ b/backend/windmill-indexer/src/lib.rs
@@ -1,3 +1,9 @@
+#[cfg(feature = "private")]
 pub mod completed_runs_ee;
+pub mod completed_runs_oss;
+#[cfg(feature = "private")]
 pub mod indexer_ee;
+pub mod indexer_oss;
+#[cfg(feature = "private")]
 pub mod service_logs_ee;
+pub mod service_logs_oss;
diff --git a/backend/windmill-indexer/src/service_logs_ee.rs b/backend/windmill-indexer/src/service_logs_oss.rs
similarity index 68%
rename from backend/windmill-indexer/src/service_logs_ee.rs
rename to backend/windmill-indexer/src/service_logs_oss.rs
index e04575d3f5..b6e9017f88 100644
--- a/backend/windmill-indexer/src/service_logs_ee.rs
+++ b/backend/windmill-indexer/src/service_logs_oss.rs
@@ -1,13 +1,24 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::service_logs_ee::*;
+
+#[cfg(not(feature = "private"))]
 use anyhow::anyhow;
+#[cfg(not(feature = "private"))]
 use sqlx::{Pool, Postgres};
+#[cfg(not(feature = "private"))]
 use windmill_common::error::Error;
+#[cfg(not(feature = "private"))]
 use windmill_common::KillpillSender;
 #[derive(Clone)]
+#[cfg(not(feature = "private"))]
 pub struct ServiceLogIndexReader;
 
 #[derive(Clone)]
+#[cfg(not(feature = "private"))]
 pub struct ServiceLogIndexWriter;
 
+#[cfg(not(feature = "private"))]
 pub async fn init_index(
     _db: &Pool<Postgres>,
     mut _killpill_tx: KillpillSender,
@@ -15,6 +26,7 @@ pub async fn init_index(
     Err(anyhow!("Cannot initialize index: not in EE").into())
 }
 
+#[cfg(not(feature = "private"))]
 pub async fn run_indexer(
     _db: Pool<Postgres>,
     mut _index_writer: ServiceLogIndexWriter,
diff --git a/backend/windmill-queue/Cargo.toml b/backend/windmill-queue/Cargo.toml
index a90fa6ccf7..4458e8aa99 100644
--- a/backend/windmill-queue/Cargo.toml
+++ b/backend/windmill-queue/Cargo.toml
@@ -10,6 +10,7 @@ path = "src/lib.rs"
 
 [features]
 default = []
+private = []
 enterprise = ["windmill-common/enterprise"]
 cloud = []
 benchmark = ["windmill-common/benchmark"]
diff --git a/backend/windmill-queue/src/jobs.rs b/backend/windmill-queue/src/jobs.rs
index de64071c42..1676148b00 100644
--- a/backend/windmill-queue/src/jobs.rs
+++ b/backend/windmill-queue/src/jobs.rs
@@ -25,7 +25,7 @@ use sqlx::{types::Json, FromRow, Pool, Postgres, Transaction};
 use tokio::{sync::RwLock, time::sleep};
 use ulid::Ulid;
 use uuid::Uuid;
-use windmill_audit::audit_ee::{audit_log, AuditAuthor};
+use windmill_audit::audit_oss::{audit_log, AuditAuthor};
 use windmill_audit::ActionKind;
 
 #[cfg(feature = "benchmark")]
@@ -71,7 +71,7 @@ use windmill_common::BASE_URL;
 use windmill_common::users::SUPERADMIN_SYNC_EMAIL;
 
 use crate::flow_status::{update_flow_status_in_progress, update_workflow_as_code_status};
-use crate::jobs_ee::update_concurrency_counter;
+use crate::jobs_oss::update_concurrency_counter;
 use crate::schedule::{get_schedule_opt, push_scheduled_job};
 use crate::tags::per_workspace_tag;
 
@@ -391,6 +391,7 @@ pub async fn append_logs(
             if let Err(e) = client
             .post::<_, String>(
                 &format!("/api/w/{}/agent_workers/push_logs/{}", workspace.as_ref(), job_id),
+                None,
                 &logs.as_ref(),
             )
             .await {
@@ -1010,33 +1011,43 @@ pub async fn add_completed_job<T: Serialize + Send + Sync + ValidableJson>(
 
     #[cfg(feature = "cloud")]
     if *CLOUD_HOSTED && !queued_job.is_flow() && _duration > 1000 {
-        let additional_usage = _duration / 1000;
-        let w_id = &queued_job.workspace_id;
-        let premium_workspace = windmill_common::workspaces::is_premium_workspace(db, w_id).await;
-        let _ = sqlx::query!(
-            "INSERT INTO usage (id, is_workspace, month_, usage) 
-            VALUES ($1, TRUE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), $2) 
-            ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + $2",
-            w_id,
-            additional_usage as i32
-        )
-        .execute(db)
-        .await
-        .map_err(|e| Error::internal_err(format!("updating usage: {e:#}")));
-
-        if !premium_workspace {
+        let db = db.clone();
+        let w_id = queued_job.workspace_id.clone();
+        let email = queued_job.permissioned_as_email.clone();
+        let w_id2 = w_id.clone();
+        let email2 = email.clone();
+        tokio::task::spawn(async move {
+            let additional_usage = _duration / 1000;
+            let premium_workspace = windmill_common::workspaces::is_premium_workspace(&db, &w_id).await;
+            tokio::time::timeout(std::time::Duration::from_secs(10), async move {
             let _ = sqlx::query!(
                 "INSERT INTO usage (id, is_workspace, month_, usage) 
-                VALUES ($1, FALSE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), $2) 
+                VALUES ($1, TRUE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), $2) 
                 ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + $2",
-                queued_job.permissioned_as_email,
+                w_id,
                 additional_usage as i32
             )
-            .execute(db)
+            .execute(&db)
             .await
             .map_err(|e| Error::internal_err(format!("updating usage: {e:#}")));
-        }
+
+            if !premium_workspace {
+                let _ = sqlx::query!(
+                    "INSERT INTO usage (id, is_workspace, month_, usage) 
+                    VALUES ($1, FALSE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), $2) 
+                    ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + $2",
+                    email,
+                    additional_usage as i32
+                )
+                .execute(&db)
+                .await
+            .map_err(|e| Error::internal_err(format!("updating usage: {e:#}")));
+        }}).await.unwrap_or_else(|_| {
+            tracing::error!("Could not update usage for workspace {w_id2} and permissioned as {email2}, stopped after 10s");
+        });
+    });
     }
+    
 
     #[cfg(feature = "enterprise")]
     if !success {
@@ -2127,7 +2138,7 @@ pub struct PulledJob {
 // NOTE:
 // Precomputed by the server
 // Used to offload work from agent workers to server
-#[derive(Serialize, Deserialize)]
+#[derive(Debug, Serialize, Deserialize)]
 pub enum PrecomputedAgentInfo {
     Bun { local: String, remote: String },
     Python {
@@ -2138,7 +2149,7 @@ pub enum PrecomputedAgentInfo {
         requirements: Option<String> },
 }
 
-#[derive(Serialize, Deserialize)]
+#[derive(Debug, Serialize, Deserialize)]
 pub struct JobAndPerms {
     pub job: MiniPulledJob,
     pub raw_code: Option<String>,
@@ -2290,16 +2301,20 @@ pub async fn pull(
     db: &Pool<Postgres>,
     suspend_first: bool,
     worker_name: &str,
-    query_o: Option<(String, String)>,
+    query_o: Option<&(String, String)>,
     #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
 ) -> windmill_common::error::Result<PulledJobResult> {
     loop {
-        if let Some((query_suspended, query_no_suspend)) = query_o.as_ref() {
+        if let Some((query_suspended, query_no_suspend)) = query_o {
             let njob = {
-                let job = sqlx::query_as::<_, PulledJob>(query_suspended)
+                let job = if query_suspended.is_empty() {
+                    None
+                } else {
+                    sqlx::query_as::<_, PulledJob>(query_suspended)
                     .bind(worker_name)
                     .fetch_optional(db)
-                    .await?;
+                    .await?
+                };
                 if let Some(job) = job {
                     PulledJobResult { job: Some(job), suspended: true }
                 } else {
@@ -2549,7 +2564,6 @@ async fn pull_single_job_and_mark_as_running_no_concurrency_limit<'c>(
             tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
             return Ok((None, false));
         }
-
         let r = if suspend_first {
             // tracing::info!("Pulling job with query: {}", query);
             sqlx::query_as::<_, PulledJob>(&query)
@@ -2702,7 +2716,7 @@ pub async fn get_result_by_id(
     .await
     {
         Ok(res) => Ok(res),
-        Err(_) => {
+        Err(e) => {
             let root = sqlx::query!(
                 "SELECT
                     id As \"id!\",
@@ -2719,7 +2733,7 @@ pub async fn get_result_by_id(
                     let restarted_from_id = not_found_if_none(
                         root.restarted_from,
                         "Id not found in the result's mapping of the root job and root job had no restarted from information",
-                        format!("parent: {}, root: {}, id: {}", flow_id, root.id, node_id),
+                        format!("parent: {}, root: {}, id: {}, error: {e:#}", flow_id, root.id, node_id),
                     )?;
 
                     get_result_by_id_from_original_flow(
@@ -3265,35 +3279,40 @@ pub async fn push<'c, 'd>(
             job_payload,
             JobPayload::Flow { .. } | JobPayload::RawFlow { .. }
         ) {
-            let workspace_usage = sqlx::query_scalar!(
-                    "INSERT INTO usage (id, is_workspace, month_, usage)
-                    VALUES ($1, TRUE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 1)
-                    ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 
-                    RETURNING usage.usage",
-                    workspace_id
-                )
-                .fetch_one(_db)
-                .await
-                .map_err(|e| Error::internal_err(format!("updating usage: {e:#}")))?;
+            tokio::time::timeout(std::time::Duration::from_secs(10), async move {
+                let workspace_usage = sqlx::query_scalar!(
+                        "INSERT INTO usage (id, is_workspace, month_, usage)
+                        VALUES ($1, TRUE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 1)
+                        ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 
+                        RETURNING usage.usage",
+                        workspace_id
+                    )
+                    .fetch_one(_db)
+                    .await
+                    .map_err(|e| Error::internal_err(format!("updating usage: {e:#}")))?;
 
-            let user_usage = if !premium_workspace {
-                Some(sqlx::query_scalar!(
-                    "INSERT INTO usage (id, is_workspace, month_, usage)
-                    VALUES ($1, FALSE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 1)
-                    ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 
-                    RETURNING usage.usage",
-                    email
-                )
-                .fetch_one(_db)
-                .await
-                .map_err(|e| Error::internal_err(format!("updating usage: {e:#}")))?)
-            } else {
-                None
-            };
-            (Some(workspace_usage), user_usage)
+                let user_usage = if !premium_workspace {
+                    Some(sqlx::query_scalar!(
+                        "INSERT INTO usage (id, is_workspace, month_, usage)
+                        VALUES ($1, FALSE, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 1)
+                        ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 
+                        RETURNING usage.usage",
+                        email
+                    )
+                    .fetch_one(_db)
+                    .await
+                    .map_err(|e| Error::internal_err(format!("updating usage: {e:#}")))?)
+                } else {
+                    None
+                };
+                Ok((Some(workspace_usage), user_usage))
+            }).await.unwrap_or_else(|e| {
+                tracing::error!("Could not update usage for workspace {workspace_id} and permissioned as {email}, stopped after 10s: {e:#}");
+                Err(Error::internal_err(format!("Could not update usage for workspace {workspace_id} and permissioned as {email}, stopped after 10s: {e:#}")))
+            })
         } else {
-            (None, None)
-        };
+            Ok((None, None))
+        }?;
 
         if !premium_workspace {
             let is_super_admin =
diff --git a/backend/windmill-queue/src/jobs_ee.rs b/backend/windmill-queue/src/jobs_oss.rs
similarity index 67%
rename from backend/windmill-queue/src/jobs_ee.rs
rename to backend/windmill-queue/src/jobs_oss.rs
index ea1f86b529..987a56bf0d 100644
--- a/backend/windmill-queue/src/jobs_ee.rs
+++ b/backend/windmill-queue/src/jobs_oss.rs
@@ -1,7 +1,15 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::jobs_ee::*;
+
+#[cfg(not(feature = "private"))]
 use chrono::{DateTime, Utc};
+#[cfg(not(feature = "private"))]
 use uuid::Uuid;
+#[cfg(not(feature = "private"))]
 use windmill_common::DB;
 
+#[cfg(not(feature = "private"))]
 #[allow(dead_code)]
 pub(crate) async fn update_concurrency_counter(
     _db: &DB,
diff --git a/backend/windmill-queue/src/lib.rs b/backend/windmill-queue/src/lib.rs
index 2496bdf818..9b6025e515 100644
--- a/backend/windmill-queue/src/lib.rs
+++ b/backend/windmill-queue/src/lib.rs
@@ -7,7 +7,9 @@
  */
 
 mod jobs;
+#[cfg(feature = "private")]
 pub mod jobs_ee;
+pub mod jobs_oss;
 pub mod schedule;
 pub use jobs::*;
 pub mod flow_status;
diff --git a/backend/windmill-queue/src/schedule.rs b/backend/windmill-queue/src/schedule.rs
index bb7d5df906..294ece7509 100644
--- a/backend/windmill-queue/src/schedule.rs
+++ b/backend/windmill-queue/src/schedule.rs
@@ -13,7 +13,7 @@ use sqlx::{PgExecutor, Postgres, Transaction};
 use std::collections::HashMap;
 use std::str::FromStr;
 use windmill_common::db::Authed;
-use windmill_common::ee::LICENSE_KEY_VALID;
+use windmill_common::ee_oss::LICENSE_KEY_VALID;
 use windmill_common::flows::Retry;
 use windmill_common::get_latest_flow_version_info_for_path;
 use windmill_common::jobs::JobPayload;
diff --git a/backend/windmill-worker/Cargo.toml b/backend/windmill-worker/Cargo.toml
index 6a6a0abf01..a3b36a5c04 100644
--- a/backend/windmill-worker/Cargo.toml
+++ b/backend/windmill-worker/Cargo.toml
@@ -10,6 +10,7 @@ path = "src/lib.rs"
 
 [features]
 default = []
+private = []
 prometheus = ["dep:prometheus", "windmill-common/prometheus"]
 enterprise = ["windmill-queue/enterprise", "windmill-git-sync/enterprise", "windmill-common/enterprise", "dep:pem", "dep:tokio-util"]
 mssql = ["dep:tiberius"]
diff --git a/backend/windmill-worker/src/agent_workers.rs b/backend/windmill-worker/src/agent_workers.rs
index 192ae7ae37..f5f5a3b0cc 100644
--- a/backend/windmill-worker/src/agent_workers.rs
+++ b/backend/windmill-worker/src/agent_workers.rs
@@ -1,3 +1,4 @@
+use reqwest::header::HeaderMap;
 use uuid::Uuid;
 use windmill_common::{agent_workers::QueueInitJob, worker::HttpClient};
 use windmill_queue::{JobAndPerms, JobCompleted};
@@ -6,14 +7,21 @@ pub async fn queue_init_job(client: &HttpClient, content: &str) -> anyhow::Resul
     client
         .post(
             "/api/agent_workers/queue_init_job",
+            None,
             &QueueInitJob { content: content.to_string() },
         )
         .await
         .and_then(|x: String| Uuid::parse_str(&x).map_err(|e| anyhow::anyhow!(e)))
 }
 
-pub async fn pull_job(client: &HttpClient) -> anyhow::Result<Option<JobAndPerms>> {
-    client.post("/api/agent_workers/pull_job", &()).await
+pub async fn pull_job(
+    client: &HttpClient,
+    headers: Option<HeaderMap>,
+    body: Option<bool>,
+) -> anyhow::Result<Option<JobAndPerms>> {
+    client
+        .post("/api/agent_workers/pull_job", headers, &body)
+        .await
 }
 
 pub async fn send_result(client: &HttpClient, jc: JobCompleted) -> anyhow::Result<String> {
@@ -23,6 +31,7 @@ pub async fn send_result(client: &HttpClient, jc: JobCompleted) -> anyhow::Resul
                 "/api/w/{}/agent_workers/send_result/{}",
                 jc.job.workspace_id, jc.job.id
             ),
+            None,
             &jc,
         )
         .await
diff --git a/backend/windmill-worker/src/bash_executor.rs b/backend/windmill-worker/src/bash_executor.rs
index ec08003dd3..20b8fd0d8f 100644
--- a/backend/windmill-worker/src/bash_executor.rs
+++ b/backend/windmill-worker/src/bash_executor.rs
@@ -43,12 +43,11 @@ use crate::{
         OccupancyMetrics,
     },
     handle_child::handle_child,
-    DISABLE_NSJAIL, DISABLE_NUSER, HOME_ENV, NSJAIL_PATH, PATH_ENV,
-    POWERSHELL_CACHE_DIR, POWERSHELL_PATH, PROXY_ENVS, TZ_ENV,
+    DISABLE_NSJAIL, DISABLE_NUSER, HOME_ENV, NSJAIL_PATH, PATH_ENV, POWERSHELL_CACHE_DIR,
+    POWERSHELL_PATH, PROXY_ENVS, TZ_ENV,
 };
 use windmill_common::client::AuthedClient;
 
-
 #[cfg(windows)]
 use crate::SYSTEM_ROOT;
 
@@ -275,6 +274,19 @@ exit $exit_status
     )))
 }
 
+#[cfg(feature = "dind")]
+async fn rm_container(client: &bollard::Docker, container_id: &str) {
+    if let Err(e) = client
+        .remove_container(
+            container_id,
+            Some(RemoveContainerOptions { force: true, ..Default::default() }),
+        )
+        .await
+    {
+        tracing::error!("Error removing container: {:?}", e);
+    }
+}
+
 #[cfg(feature = "dind")]
 async fn handle_docker_job(
     job_id: Uuid,
@@ -446,19 +458,12 @@ async fn handle_docker_job(
                 }
             }
         }
+        rm_container(&client, &container_id).await;
 
         return Err(e);
     }
 
-    if let Err(e) = client
-        .remove_container(
-            &container_id,
-            Some(RemoveContainerOptions { force: true, ..Default::default() }),
-        )
-        .await
-    {
-        tracing::error!("Error removing container: {:?}", e);
-    }
+    rm_container(&client, &container_id).await;
 
     let result = result.unwrap();
 
diff --git a/backend/windmill-worker/src/common.rs b/backend/windmill-worker/src/common.rs
index 9955256d13..b419626845 100644
--- a/backend/windmill-worker/src/common.rs
+++ b/backend/windmill-worker/src/common.rs
@@ -492,6 +492,7 @@ pub async fn update_worker_ping_for_failed_init_script(
             if let Err(e) = client
                 .post::<_, ()>(
                     UPDATE_PING_URL,
+                    None,
                     &Ping {
                         last_job_executed: Some(last_job_id),
                         last_job_workspace_id: None,
@@ -728,7 +729,7 @@ async fn get_workspace_s3_resource_path(
     storage: Option<&String>,
 ) -> windmill_common::error::Result<Option<ObjectStoreResource>> {
     use windmill_common::{
-        job_s3_helpers_ee::get_s3_resource_internal, s3_helpers::StorageResourceType,
+        job_s3_helpers_oss::get_s3_resource_internal, s3_helpers::StorageResourceType,
     };
 
     let raw_lfs_opt = if let Some(storage) = storage {
@@ -786,7 +787,7 @@ async fn get_workspace_s3_resource_path(
     get_s3_resource_internal(
         rt,
         s3_resource_value_raw,
-        windmill_common::job_s3_helpers_ee::TokenGenerator::AsClient(client),
+        windmill_common::job_s3_helpers_oss::TokenGenerator::AsClient(client),
         db,
     )
     .await
@@ -1209,8 +1210,8 @@ pub async fn par_install_language_dependencies<'a>(
     }
     #[cfg(all(feature = "enterprise", feature = "parquet"))]
     let is_not_pro = !matches!(
-        windmill_common::ee::get_license_plan().await,
-        windmill_common::ee::LicensePlan::Pro
+        windmill_common::ee_oss::get_license_plan().await,
+        windmill_common::ee_oss::LicensePlan::Pro
     );
     #[cfg(all(feature = "enterprise", feature = "parquet"))]
     if is_not_pro && matches!(install_fn, InstallStrategy::AllAtOnce(_)) {
diff --git a/backend/windmill-worker/src/go_executor.rs b/backend/windmill-worker/src/go_executor.rs
index 2217c775ba..c5fe55184a 100644
--- a/backend/windmill-worker/src/go_executor.rs
+++ b/backend/windmill-worker/src/go_executor.rs
@@ -3,7 +3,11 @@ use std::{collections::HashMap, fs::DirBuilder, process::Stdio};
 
 use itertools::Itertools;
 use serde_json::value::RawValue;
-use tokio::{fs::File, io::AsyncReadExt, process::Command};
+use tokio::{
+    fs::{self, File},
+    io::AsyncReadExt,
+    process::Command,
+};
 use uuid::Uuid;
 use windmill_common::{
     error::{self, Error},
@@ -91,6 +95,7 @@ pub async fn handle_go_job(
             true,
             skip_go_mod,
             skip_tidy,
+            false,
             worker_name,
             &job.workspace_id,
             occupation_metrics,
@@ -356,11 +361,21 @@ pub async fn install_go_dependencies(
     non_dep_job: bool,
     skip_go_mod: bool,
     has_sum: bool,
+    raw_deps: bool,
     worker_name: &str,
     w_id: &str,
     occupation_metrics: &mut OccupancyMetrics,
 ) -> error::Result<String> {
-    if !skip_go_mod {
+    if raw_deps {
+        let go_mod =
+            if let Some(module) = code.lines().find(|l| l.trim_start().starts_with("module ")) {
+                code.replace(module, "module mymod")
+            } else {
+                format!("module mymod\n{code}")
+            };
+        fs::write(format!("{job_dir}/go.mod"), go_mod).await?;
+    }
+    if !raw_deps && !skip_go_mod {
         gen_go_mymod(code, job_dir).await?;
         let mut child_cmd = Command::new(GO_PATH.as_str());
         child_cmd
@@ -400,7 +415,9 @@ pub async fn install_go_dependencies(
 
     let mut new_lockfile = false;
 
-    let hash = if !has_sum {
+    let hash = if raw_deps {
+        calculate_hash(code)
+    } else if !has_sum {
         calculate_hash(parse_go_imports(&code)?.iter().join("\n").as_str())
     } else {
         "".to_string()
@@ -429,7 +446,15 @@ pub async fn install_go_dependencies(
         }
     }
 
-    let mod_command = if skip_tidy { "download" } else { "tidy" };
+    let mod_command = if skip_tidy ||
+        // If there is go.mod provided we want to use `download` only.
+        // Unlike `tidy` it does not modify local go.mod
+        raw_deps
+    {
+        "download"
+    } else {
+        "tidy"
+    };
     let mut child_cmd = Command::new(GO_PATH.as_str());
     child_cmd
         .current_dir(job_dir)
diff --git a/backend/windmill-worker/src/handle_child.rs b/backend/windmill-worker/src/handle_child.rs
index 3eb9e95dc9..467fac7c60 100644
--- a/backend/windmill-worker/src/handle_child.rs
+++ b/backend/windmill-worker/src/handle_child.rs
@@ -53,7 +53,7 @@ use futures::{
 
 use crate::common::{resolve_job_timeout, OccupancyMetrics};
 use crate::job_logger::{append_job_logs, append_with_limit};
-use crate::job_logger_ee::process_streaming_log_lines;
+use crate::job_logger_oss::process_streaming_log_lines;
 use crate::worker_utils::{ping_job_status, update_worker_ping_from_job};
 use crate::{MAX_RESULT_SIZE, MAX_WAIT_FOR_SIGINT, MAX_WAIT_FOR_SIGTERM};
 
@@ -227,6 +227,7 @@ pub async fn handle_child(
                         if let Err(err) = client
                             .post::<_, ()>(
                                 &format!("/api/agent_workers/set_job_cancelled/{}", job_id),
+                                None,
                                 &JobCancelled {
                                     canceled_by: "timeout".to_string(),
                                     reason: format!("duration > {}", timeout_duration.as_secs()),
diff --git a/backend/windmill-worker/src/job_logger.rs b/backend/windmill-worker/src/job_logger.rs
index f4abd1d0c2..626dfbce44 100644
--- a/backend/windmill-worker/src/job_logger.rs
+++ b/backend/windmill-worker/src/job_logger.rs
@@ -13,10 +13,10 @@ use std::sync::Arc;
 use uuid::Uuid;
 
 #[cfg(not(all(feature = "enterprise", feature = "parquet")))]
-use crate::job_logger_ee::default_disk_log_storage;
+use crate::job_logger_oss::default_disk_log_storage;
 
 #[cfg(all(feature = "enterprise", feature = "parquet"))]
-use crate::job_logger_ee::s3_storage;
+use crate::job_logger_oss::s3_storage;
 
 pub enum CompactLogs {
     #[cfg(not(all(feature = "enterprise", feature = "parquet")))]
diff --git a/backend/windmill-worker/src/job_logger_ee.rs b/backend/windmill-worker/src/job_logger_oss.rs
similarity index 68%
rename from backend/windmill-worker/src/job_logger_ee.rs
rename to backend/windmill-worker/src/job_logger_oss.rs
index 22772878ee..3ee3d29a3a 100644
--- a/backend/windmill-worker/src/job_logger_ee.rs
+++ b/backend/windmill-worker/src/job_logger_oss.rs
@@ -1,13 +1,14 @@
-use std::io;
-use std::sync::atomic::AtomicU32;
-use std::sync::Arc;
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::job_logger_ee::*;
 
-use uuid::Uuid;
-use windmill_common::DB;
+#[cfg(not(feature = "private"))]
+use {
+    crate::job_logger::CompactLogs, std::io, std::sync::atomic::AtomicU32, std::sync::Arc,
+    uuid::Uuid, windmill_common::DB,
+};
 
-use crate::job_logger::CompactLogs;
-
-#[cfg(all(feature = "enterprise", feature = "parquet"))]
+#[cfg(all(feature = "enterprise", feature = "parquet", not(feature = "private")))]
 pub(crate) async fn s3_storage(
     _job_id: &Uuid,
     _w_id: &str,
@@ -19,6 +20,7 @@ pub(crate) async fn s3_storage(
     tracing::info!("Logs length of {_job_id} has exceeded a threshold. Implementation to store excess on s3 in not OSS");
 }
 
+#[cfg(not(feature = "private"))]
 #[allow(dead_code)]
 pub(crate) async fn default_disk_log_storage(
     job_id: &Uuid,
@@ -32,6 +34,7 @@ pub(crate) async fn default_disk_log_storage(
     tracing::info!("Logs length of {job_id} has exceeded a threshold. Implementation to store excess on disk in not OSS");
 }
 
+#[cfg(not(feature = "private"))]
 pub(crate) fn process_streaming_log_lines(
     r: Result<Option<String>, io::Error>,
     _stderr: bool,
diff --git a/backend/windmill-worker/src/lib.rs b/backend/windmill-worker/src/lib.rs
index fa6eb10960..3dfeba5c42 100644
--- a/backend/windmill-worker/src/lib.rs
+++ b/backend/windmill-worker/src/lib.rs
@@ -27,7 +27,9 @@ mod go_executor;
 mod graphql_executor;
 mod handle_child;
 pub mod job_logger;
-mod job_logger_ee;
+#[cfg(feature = "private")]
+pub mod job_logger_ee;
+mod job_logger_oss;
 mod js_eval;
 #[cfg(feature = "mysql")]
 mod mysql_executor;
@@ -35,7 +37,9 @@ mod mysql_executor;
 mod nu_executor;
 #[cfg(feature = "oracledb")]
 mod oracledb_executor;
-mod otel_ee;
+#[cfg(feature = "private")]
+pub mod otel_ee;
+mod otel_oss;
 mod pg_executor;
 #[cfg(feature = "php")]
 mod php_executor;
@@ -53,9 +57,8 @@ mod worker_flow;
 mod worker_lockfiles;
 mod worker_utils;
 
-pub use worker_lockfiles::process_relative_imports;
-
 pub use worker::*;
+pub use worker_lockfiles::process_relative_imports;
 
 pub use result_processor::handle_job_error;
 
diff --git a/backend/windmill-worker/src/otel_ee.rs b/backend/windmill-worker/src/otel_ee.rs
deleted file mode 100644
index 311ffd6355..0000000000
--- a/backend/windmill-worker/src/otel_ee.rs
+++ /dev/null
@@ -1,3 +0,0 @@
-use windmill_queue::MiniPulledJob;
-
-pub fn add_root_flow_job_to_otlp(_queued_job: &MiniPulledJob, _success: bool) {}
diff --git a/backend/windmill-worker/src/otel_oss.rs b/backend/windmill-worker/src/otel_oss.rs
new file mode 100644
index 0000000000..2f65c534b4
--- /dev/null
+++ b/backend/windmill-worker/src/otel_oss.rs
@@ -0,0 +1,9 @@
+#[cfg(feature = "private")]
+#[allow(unused)]
+pub use crate::otel_ee::*;
+
+#[cfg(not(feature = "private"))]
+use windmill_queue::MiniPulledJob;
+
+#[cfg(not(feature = "private"))]
+pub fn add_root_flow_job_to_otlp(_queued_job: &MiniPulledJob, _success: bool) {}
diff --git a/backend/windmill-worker/src/python_executor.rs b/backend/windmill-worker/src/python_executor.rs
index 76ee967656..35815e452c 100644
--- a/backend/windmill-worker/src/python_executor.rs
+++ b/backend/windmill-worker/src/python_executor.rs
@@ -20,7 +20,7 @@ use tokio::{
 };
 use uuid::Uuid;
 #[cfg(all(feature = "enterprise", feature = "parquet", unix))]
-use windmill_common::ee::{get_license_plan, LicensePlan};
+use windmill_common::ee_oss::{get_license_plan, LicensePlan};
 use windmill_common::{
     error::{
         self,
@@ -658,7 +658,7 @@ except BaseException as e:
 
     // Add /tmp/windmill/cache/python_x_y_z/global-site-packages to PYTHONPATH.
     // Usefull if certain wheels needs to be preinstalled before execution.
-    let global_site_packages_path = py_version.to_cache_dir() + "/global-site-packages";
+    let global_site_packages_path = py_version.to_cache_dir(true) + "/global-site-packages";
     let additional_python_paths_folders = {
         let mut paths = additional_python_paths.clone();
         if std::fs::metadata(&global_site_packages_path).is_ok() {
@@ -1489,7 +1489,7 @@ pub async fn handle_python_reqs(
         if req.starts_with('#') || req.starts_with('-') || req.trim().is_empty() {
             continue;
         }
-        let py_prefix = &py_version.to_cache_dir();
+        let py_prefix = &py_version.to_cache_dir(false);
 
         let venv_p = format!(
             "{py_prefix}/{}",
@@ -1740,7 +1740,7 @@ pub async fn handle_python_reqs(
                     tokio::select! {
                         // Cancel was called on the job
                         _ = kill_rx.recv() => return Err(anyhow::anyhow!("S3 pull was canceled")),
-                        pull = pull_from_tar(os, venv_p.clone(), py_version.to_cache_dir_top_level(), None, false) => {
+                        pull = pull_from_tar(os, venv_p.clone(), py_version.to_cache_dir_top_level(false), None, false) => {
                             if let Err(e) = pull {
                                 tracing::info!(
                                     workspace_id = %w_id,
@@ -1891,7 +1891,7 @@ pub async fn handle_python_reqs(
             #[cfg(all(feature = "enterprise", feature = "parquet", unix))]
             if s3_push {
                 if let Some(os) = windmill_common::s3_helpers::get_object_store().await {
-                    tokio::spawn(build_tar_and_push(os, venv_p.clone(), py_version.to_cache_dir_top_level(), None, false));
+                    tokio::spawn(build_tar_and_push(os, venv_p.clone(), py_version.to_cache_dir_top_level(false), None, false));
                 }
             }
 
diff --git a/backend/windmill-worker/src/python_versions.rs b/backend/windmill-worker/src/python_versions.rs
index 26be7aca65..2f12d34dc6 100644
--- a/backend/windmill-worker/src/python_versions.rs
+++ b/backend/windmill-worker/src/python_versions.rs
@@ -153,12 +153,18 @@ impl PyV {
         let valid = all_versions
             .clone()
             .into_iter()
-            .filter(|v| version_specifiers.iter().all(|vs| vs.contains(&*v)))
+            .filter(|v| version_specifiers.iter().all(|vs| (vs).contains(&*v)))
             .collect_vec();
 
         if !valid.is_empty() {
+            let mut result = valid[0].clone();
+            // Is there at least one version specifier that has PATCH digit?
+            let patch_vs = version_specifiers
+                .iter()
+                .any(|vs| vs.version().release().get(2).is_some());
+
             if select_latest {
-                return Ok(valid[0].clone());
+                return Ok(result.clone());
             }
 
             // Usually INSTANCE_PYTHON_VERSION
@@ -183,9 +189,10 @@ impl PyV {
             // - We will iterate until find the closest version to target.
             //   - If closest version has the same MINOR version, use it.
             //   - If it differs in MINOR version, take latest PATCH version.
-            //
-            let mut result = None;
 
+            let [major, minor, ..] = result.release() else {
+                return Err(Error::InternalErr(format!("Failed to parse \"{}\". Available python versions are supposed to be in SEMVER format (MAJOR.MINOR)", *result)));
+            };
             // This represents newest version with oldest MINOR:
             //
             // I Iterable   Newest in MINOR
@@ -195,12 +202,9 @@ impl PyV {
             // 4. 3.10.2 -> 3.10.2
             // 5. 3.10.1 -> 3.10.2
             // 6. 3.10.0 -> 3.10.2
-            let mut newest_in_minor = None;
-            for v in valid.iter() {
-                if result.is_none() {
-                    result.replace(v);
-                }
+            let mut newest_in_minor = (result.clone(), (*major, *minor));
 
+            for v in valid.iter() {
                 if v < &gv {
                     // We will not continue if we start looking into versions older than gravity version.
                     break;
@@ -212,37 +216,46 @@ impl PyV {
 
                 // Since we go top to down we can assume
                 // the first occurence of new minor version contains the latest patch version.
-                if matches!(newest_in_minor, Some((_, mm)) if mm != (major, minor))
-                    || newest_in_minor.is_none()
-                {
-                    newest_in_minor = Some((v.clone(), (major, minor)));
+                if newest_in_minor.1 != (*major, *minor) {
+                    newest_in_minor = (v.clone(), (*major, *minor));
                 }
 
                 if gravity_matcher.contains(v) {
                     // return as soon as gravity matcher has first hit.
-                    return Ok(v.clone());
+                    // Only in case version specifiers do specify PATCH version OR gravity version specify PATCH
+                    if patch_vs || gv.release().get(2).is_some() {
+                        return Ok(v.clone());
+                    } else {
+                        let Some(release_numbers) = v.release().get(0..=1) else {
+                            return Err(Error::InternalErr(format!(
+                                "Failed to get release numbers from: \"{}\". ",
+                                **v
+                            )));
+                        };
+                        return Ok(PyV(pep440_rs::Version::new(release_numbers)));
+                    }
                 }
                 // If we are still in the loop, it means that we are getting closer to gravity version
                 else {
-                    result = Some(v);
+                    result = v.clone();
                 }
             }
 
             let [gravity_major, gravity_minor, ..] = gv.release() else {
-                return Err(Error::internal_err(format!("Cannot get MAJOR or/and MINOR version of python gravity version ({}). Something might be wrong with INSTANCE_PYTHON_VERSION.", &*gv)));
+                return Err(Error::internal_err(format!("Cannot get MAJOR nor MINOR version of python gravity version ({}). Something might be wrong with INSTANCE_PYTHON_VERSION.", &*gv)));
             };
 
-            if let Some((v, mm)) = newest_in_minor {
-                if (gravity_major, gravity_minor) != mm {
-                    return Ok(v);
+            if (*gravity_major, *gravity_minor) != newest_in_minor.1 {
+                // Return full version only if there is PATCH versions in version specifiers
+                if patch_vs {
+                    return Ok(newest_in_minor.0);
+                } else {
+                    let mm = newest_in_minor.1;
+                    return Ok(PyV(pep440_rs::Version::new([mm.0, mm.1])));
                 }
             }
 
-            result
-                .ok_or(Error::internal_err(
-                    "No python candidates found. This is a bug!",
-                ))
-                .map(ToOwned::to_owned)
+            Ok(result)
         } else {
             Err(anyhow!(
                 "
@@ -265,14 +278,24 @@ impl PyV {
             .into())
         }
     }
-    /// e.g.: `/tmp/windmill/cache/python_3xy`
-    pub(crate) fn to_cache_dir(&self) -> String {
+    /// e.g.: `/tmp/windmill/cache/python_3_x_y`
+    pub(crate) fn to_cache_dir(&self, ignore_patch: bool) -> String {
         use windmill_common::worker::ROOT_CACHE_DIR;
-        format!("{ROOT_CACHE_DIR}{}", self.to_cache_dir_top_level())
+        format!(
+            "{ROOT_CACHE_DIR}{}",
+            self.to_cache_dir_top_level(ignore_patch)
+        )
     }
 
     /// e.g.: `python_3_x_y`
-    pub fn to_cache_dir_top_level(&self) -> String {
+    pub fn to_cache_dir_top_level(&self, ignore_patch: bool) -> String {
+        if ignore_patch {
+            if let [major, minor, ..] = self.release() {
+                return format!("python_{major}_{minor}");
+            }
+
+            tracing::warn!("failed to parse python's ({}) top level directory with no patch digit, fallback to full version.", self.to_string());
+        }
         format!("python_{}", self.to_string().replace(".", "_"))
     }
 
@@ -283,6 +306,7 @@ impl PyV {
     ) -> Self {
         let mut err = None;
         let pyv = match INSTANCE_PYTHON_VERSION.read().await.clone() {
+            Some(v) if &v == "default" => PyVAlias::default().into(),
             Some(v) => pep440_rs::Version::from_str(&v).unwrap_or_else(|_| {
                 let v = PyVAlias::default().into();
                 err = Some(format!("\nCannot parse INSTANCE_PYTHON_VERSION ({:?}), fallback to latest_stable ({v:?})", *INSTANCE_PYTHON_VERSION));
@@ -575,7 +599,7 @@ impl PyV {
         // For the default version directory created during startup (main.rs)
         DirBuilder::new()
             .recursive(true)
-            .create(self.to_cache_dir())
+            .create(self.to_cache_dir(false))
             .await
             .expect("could not create initial worker dir");
 
@@ -762,7 +786,7 @@ mod tests {
                 pyv("0.9.3"),
                 pyv("0.9.2"),
             ],
-            pyv("0.9.4"), //
+            pyv("0.9"), //
         )
         .await;
     }
@@ -785,7 +809,7 @@ mod tests {
                 pyv("0.8.1"),
                 pyv("0.8.0"),
             ],
-            pyv("1.0.2"), //
+            pyv("1.0"), //
         )
         .await;
     }
@@ -824,7 +848,7 @@ mod tests {
                 pyv("2.2.1"),
                 pyv("2.2.0"),
             ],
-            pyv("2.2.2"),
+            pyv("2.2"),
         )
         .await;
     }
@@ -845,4 +869,151 @@ mod tests {
         )
         .await;
     }
+    #[tokio::test]
+    async fn test_python_resolution_8() {
+        assert_resolution(
+            "2.2",
+            false,
+            vec![">2.2", ">=2.4", "<2.4.1"],
+            vec![
+                pyv("2.4.1"),
+                pyv("2.4.0"),
+                pyv("2.3.1"),
+                pyv("2.3.0"),
+                pyv("2.2.1"),
+                pyv("2.2.0"),
+                pyv("2.1.1"),
+                pyv("2.1.0"),
+            ],
+            pyv("2.4.0"),
+        )
+        .await;
+    }
+    #[tokio::test]
+    async fn test_python_resolution_9() {
+        assert_resolution(
+            "2.2",
+            true,
+            vec![">2.2", ">2.3", "<2.4.1"],
+            vec![
+                pyv("2.4.1"),
+                pyv("2.4.0"),
+                pyv("2.3.1"),
+                pyv("2.3.0"),
+                pyv("2.2.1"),
+                pyv("2.2.0"),
+                pyv("2.1.1"),
+                pyv("2.1.0"),
+            ],
+            pyv("2.4.0"),
+        )
+        .await;
+    }
+    #[tokio::test]
+    async fn test_python_resolution_10() {
+        assert_resolution(
+            "2.2",
+            false,
+            vec![">2.2", ">=2.4"],
+            vec![
+                pyv("2.4.1"),
+                pyv("2.4.0"),
+                pyv("2.3.1"),
+                pyv("2.3.0"),
+                pyv("2.2.1"),
+                pyv("2.2.0"),
+                pyv("2.1.1"),
+                pyv("2.1.0"),
+            ],
+            // vec![pyv("2.4.1"), pyv("2.3"), pyv("2.2"), pyv("2.1")],
+            pyv("2.4"),
+        )
+        .await;
+    }
+    #[tokio::test]
+    async fn test_python_resolution_11() {
+        assert_resolution(
+            "2.4.1",
+            false,
+            vec![">2.2", ">=2.3", "<2.4"],
+            vec![
+                pyv("2.4.1"),
+                pyv("2.4.0"),
+                pyv("2.3.1"),
+                pyv("2.3.0"),
+                pyv("2.2.1"),
+                pyv("2.2.0"),
+                pyv("2.1.1"),
+                pyv("2.1.0"),
+            ],
+            // vec![pyv("2.4.1"), pyv("2.3"), pyv("2.2"), pyv("2.1")],
+            pyv("2.3"),
+        )
+        .await;
+    }
+    #[tokio::test]
+    async fn test_python_resolution_12() {
+        assert_resolution(
+            "2.3",
+            false,
+            vec![">2.2", ">=2.3", "<2.4"],
+            vec![
+                pyv("2.4.1"),
+                pyv("2.4.0"),
+                pyv("2.3.1"),
+                pyv("2.3.0"),
+                pyv("2.2.1"),
+                pyv("2.2.0"),
+                pyv("2.1.1"),
+                pyv("2.1.0"),
+            ],
+            // vec![pyv("2.4.1"), pyv("2.3"), pyv("2.2"), pyv("2.1")],
+            pyv("2.3"),
+        )
+        .await;
+    }
+    #[tokio::test]
+    async fn test_python_resolution_13() {
+        assert_resolution(
+            "2.3.1",
+            false,
+            vec![">2.2", ">=2.3", "<2.4"],
+            vec![
+                pyv("2.4.1"),
+                pyv("2.4.0"),
+                pyv("2.3.1"),
+                pyv("2.3.0"),
+                pyv("2.2.1"),
+                pyv("2.2.0"),
+                pyv("2.1.1"),
+                pyv("2.1.0"),
+            ],
+            // vec![pyv("2.4.1"), pyv("2.3"), pyv("2.2"), pyv("2.1")],
+            pyv("2.3.1"),
+        )
+        .await;
+    }
+    #[tokio::test]
+    async fn test_python_resolution_14() {
+        assert_resolution(
+            "2.3.0",
+            false,
+            vec![],
+            vec![pyv("2.4.1"), pyv("2.4.0"), pyv("2.3.1")],
+            pyv("2.3.1"),
+        )
+        .await;
+    }
+
+    #[tokio::test]
+    async fn test_python_resolution_16() {
+        assert_resolution(
+            "2.3",
+            false,
+            vec![],
+            vec![pyv("2.4.1"), pyv("2.4.0"), pyv("2.3.1")],
+            pyv("2.3"),
+        )
+        .await;
+    }
 }
diff --git a/backend/windmill-worker/src/result_processor.rs b/backend/windmill-worker/src/result_processor.rs
index 342c53a301..5056851389 100644
--- a/backend/windmill-worker/src/result_processor.rs
+++ b/backend/windmill-worker/src/result_processor.rs
@@ -12,7 +12,7 @@ use std::{
 };
 use tracing::{field, Instrument};
 #[cfg(not(feature = "otel"))]
-use windmill_common::otel_ee::FutureExt;
+use windmill_common::otel_oss::FutureExt;
 
 use uuid::Uuid;
 
@@ -32,7 +32,7 @@ use windmill_queue::{
     append_logs, get_queued_job, CanceledBy, JobCompleted, MiniPulledJob, WrappedError,
 };
 
-use serde_json::{json, value::RawValue};
+use serde_json::{json, value::RawValue, Value};
 
 use tokio::task::JoinHandle;
 
@@ -41,10 +41,10 @@ use windmill_queue::{add_completed_job, add_completed_job_error};
 use crate::{
     bash_executor::ANSI_ESCAPE_RE,
     common::{error_to_value, read_result, save_in_cache},
-    otel_ee::add_root_flow_job_to_otlp,
+    otel_oss::add_root_flow_job_to_otlp,
     worker_flow::update_flow_status_after_job_completion,
     JobCompletedReceiver, JobCompletedSender, SameWorkerSender, SendResult, UpdateFlow,
-    INIT_SCRIPT_TAG,
+    INIT_SCRIPT_TAG, SAME_WORKER_REQUIREMENTS,
 };
 use windmill_common::client::AuthedClient;
 
@@ -54,7 +54,7 @@ async fn process_jc(
     base_internal_url: &str,
     db: &DB,
     worker_dir: &str,
-    same_worker_tx: &SameWorkerSender,
+    same_worker_tx: Option<&SameWorkerSender>,
     job_completed_sender: &JobCompletedSender,
     #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
 ) {
@@ -76,7 +76,7 @@ async fn process_jc(
     } else {
         jc.job.id
     };
-    windmill_common::otel_ee::set_span_parent(&span, &rj);
+    windmill_common::otel_oss::set_span_parent(&span, &rj);
 
     if let Some(lg) = jc.job.script_lang.as_ref() {
         span.record("language", lg.as_str());
@@ -104,8 +104,8 @@ async fn process_jc(
         jc,
         &base_internal_url,
         &db,
-        &worker_dir,
-        &same_worker_tx,
+        worker_dir,
+        same_worker_tx,
         &worker_name,
         job_completed_sender.clone(),
         #[cfg(feature = "benchmark")]
@@ -119,6 +119,11 @@ async fn process_jc(
     }
 }
 
+enum JobCompletedRx {
+    JobCompleted(SendResult),
+    Killpill,
+}
+
 pub fn start_background_processor(
     job_completed_rx: JobCompletedReceiver,
     job_completed_sender: JobCompletedSender,
@@ -140,10 +145,6 @@ pub fn start_background_processor(
         #[cfg(feature = "benchmark")]
         let mut infos = BenchmarkInfo::new();
 
-        enum JobCompletedRx {
-            JobCompleted(SendResult),
-            Killpill,
-        }
         //if we have been killed, we want to drain the queue of jobs
         while let Some(sr) = {
             if has_been_killed && same_worker_queue_size.load(Ordering::SeqCst) == 0 {
@@ -186,7 +187,7 @@ pub fn start_background_processor(
                         &base_internal_url,
                         &db,
                         &worker_dir,
-                        &same_worker_tx,
+                        Some(&same_worker_tx),
                         &job_completed_sender,
                         #[cfg(feature = "benchmark")]
                         &mut bench,
@@ -229,19 +230,19 @@ pub fn start_background_processor(
                     tracing::info!(parent_flow = %flow, "updating flow status");
                     if let Err(e) = update_flow_status_after_job_completion(
                         &db,
-                        &AuthedClient {
-                            base_internal_url: base_internal_url.to_string(),
-                            workspace: w_id.clone(),
-                            token: token.clone(),
-                            force_client: None,
-                        },
+                        &AuthedClient::new(
+                            base_internal_url.to_string(),
+                            w_id.clone(),
+                            token.clone(),
+                            None,
+                        ),
                         flow,
                         &Uuid::nil(),
                         &w_id,
                         success,
                         Arc::new(result),
                         true,
-                        same_worker_tx.clone(),
+                        &same_worker_tx,
                         &worker_dir,
                         stop_early_override,
                         &worker_name,
@@ -276,7 +277,7 @@ pub fn start_background_processor(
 async fn send_job_completed(job_completed_tx: JobCompletedSender, jc: JobCompleted) {
     job_completed_tx
         .send_job(jc, true)
-        .with_context(windmill_common::otel_ee::otel_ctx())
+        .with_context(windmill_common::otel_oss::otel_ctx())
         .await
         .expect("send job completed")
 }
@@ -312,7 +313,7 @@ pub async fn process_result(
                     duration,
                 },
             )
-            .with_context(windmill_common::otel_ee::otel_ctx())
+            .with_context(windmill_common::otel_oss::otel_ctx())
             .await;
             Ok(true)
         }
@@ -374,7 +375,7 @@ pub async fn process_result(
                     duration,
                 },
             )
-            .with_context(windmill_common::otel_ee::otel_ctx())
+            .with_context(windmill_common::otel_oss::otel_ctx())
             .await;
             Ok(false)
         }
@@ -386,23 +387,19 @@ pub async fn handle_receive_completed_job(
     base_internal_url: &str,
     db: &DB,
     worker_dir: &str,
-    same_worker_tx: &SameWorkerSender,
+    same_worker_tx: Option<&SameWorkerSender>,
     worker_name: &str,
     job_completed_tx: JobCompletedSender,
     #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
 ) -> Option<Arc<MiniPulledJob>> {
     let token = jc.token.clone();
     let workspace = jc.job.workspace_id.clone();
-    let client = AuthedClient {
-        base_internal_url: base_internal_url.to_string(),
-        workspace,
-        token,
-        force_client: None,
-    };
+    let client = AuthedClient::new(base_internal_url.to_string(), workspace, token, None);
     let job = jc.job.clone();
     let mem_peak = jc.mem_peak.clone();
     let canceled_by = jc.canceled_by.clone();
-    match process_completed_job(
+
+    let processed_completed_job = process_completed_job(
         jc,
         &client,
         db,
@@ -413,8 +410,9 @@ pub async fn handle_receive_completed_job(
         #[cfg(feature = "benchmark")]
         bench,
     )
-    .await
-    {
+    .await;
+
+    match processed_completed_job {
         Err(err) => {
             handle_job_error(
                 db,
@@ -454,7 +452,7 @@ pub async fn process_completed_job(
     client: &AuthedClient,
     db: &DB,
     worker_dir: &str,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: Option<&SameWorkerSender>,
     worker_name: &str,
     job_completed_tx: JobCompletedSender,
     #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
@@ -530,7 +528,7 @@ pub async fn process_completed_job(
                     true,
                     result,
                     false,
-                    same_worker_tx.clone(),
+                    &same_worker_tx.expect(SAME_WORKER_REQUIREMENTS).to_owned(),
                     &worker_dir,
                     None,
                     worker_name,
@@ -570,7 +568,7 @@ pub async fn process_completed_job(
                     false,
                     Arc::new(serde_json::value::to_raw_value(&result).unwrap()),
                     false,
-                    same_worker_tx,
+                    &same_worker_tx.expect(SAME_WORKER_REQUIREMENTS).to_owned(),
                     &worker_dir,
                     None,
                     worker_name,
@@ -587,6 +585,34 @@ pub async fn process_completed_job(
     return Ok(None);
 }
 
+async fn handle_non_flow_job_error(
+    db: &DB,
+    job: &MiniPulledJob,
+    mem_peak: i32,
+    canceled_by: Option<CanceledBy>,
+    err: Value,
+    worker_name: &str,
+) -> Result<WrappedError, Error> {
+    append_logs(
+        &job.id,
+        &job.workspace_id,
+        format!("Unexpected error during job execution:\n{err:#?}"),
+        &db.into(),
+    )
+    .await;
+    add_completed_job_error(
+        db,
+        job,
+        mem_peak,
+        canceled_by,
+        err,
+        worker_name,
+        false,
+        None,
+    )
+    .await
+}
+
 #[tracing::instrument(name = "job_error", level = "info", skip_all, fields(job_id = %job.id))]
 pub async fn handle_job_error(
     db: &DB,
@@ -596,7 +622,7 @@ pub async fn handle_job_error(
     canceled_by: Option<CanceledBy>,
     err: Error,
     unrecoverable: bool,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: Option<&SameWorkerSender>,
     worker_dir: &str,
     worker_name: &str,
     job_completed_tx: JobCompletedSender,
@@ -605,22 +631,13 @@ pub async fn handle_job_error(
     let err = error_to_value(err);
 
     let update_job_future = || async {
-        append_logs(
-            &job.id,
-            &job.workspace_id,
-            format!("Unexpected error during job execution:\n{err:#?}"),
-            &db.into(),
-        )
-        .await;
-        add_completed_job_error(
+        handle_non_flow_job_error(
             db,
             job,
             mem_peak,
             canceled_by.clone(),
             err.clone(),
             worker_name,
-            false,
-            None,
         )
         .await
     };
@@ -649,7 +666,7 @@ pub async fn handle_job_error(
             false,
             Arc::new(serde_json::value::to_raw_value(&wrapped_error).unwrap()),
             unrecoverable,
-            same_worker_tx,
+            &same_worker_tx.expect(SAME_WORKER_REQUIREMENTS).clone(),
             worker_dir,
             None,
             worker_name,
diff --git a/backend/windmill-worker/src/rust_executor.rs b/backend/windmill-worker/src/rust_executor.rs
index 0255783f6f..045158511e 100644
--- a/backend/windmill-worker/src/rust_executor.rs
+++ b/backend/windmill-worker/src/rust_executor.rs
@@ -66,6 +66,7 @@ mount {
 #[cfg(not(debug_assertions))]
 const DEV_CONF_NSJAIL: &'static str = "";
 
+#[cfg(not(windows))]
 lazy_static::lazy_static! {
     static ref CARGO_HOME_DEFAULT: String = format!("{}/.cargo", *HOME_DIR);
     static ref RUSTUP_HOME_DEFAULT: String = format!("{}/.rustup", *HOME_DIR);
diff --git a/backend/windmill-worker/src/worker.rs b/backend/windmill-worker/src/worker.rs
index e15c24ef70..56ac7c00e0 100644
--- a/backend/windmill-worker/src/worker.rs
+++ b/backend/windmill-worker/src/worker.rs
@@ -18,23 +18,23 @@ use windmill_common::{
     cache::{future::FutureCachedExt, ScriptData, ScriptMetadata},
     schema::{should_validate_schema, SchemaValidator},
     scripts::PREVIEW_IS_TAR_CODEBASE_HASH,
-    utils::WarnAfterExt,
+    utils::{create_directory_async, WarnAfterExt},
     worker::{
-        write_file, Connection, HttpClient, MAX_TIMEOUT, ROOT_CACHE_DIR, ROOT_CACHE_NOMOUNT_DIR,
-        TMP_DIR,
+        make_pull_query, write_file, Connection, HttpClient, MAX_TIMEOUT, ROOT_CACHE_DIR,
+        ROOT_CACHE_NOMOUNT_DIR, TMP_DIR,
     },
     KillpillSender,
 };
 
 #[cfg(feature = "enterprise")]
-use windmill_common::ee::LICENSE_KEY_VALID;
+use windmill_common::ee_oss::LICENSE_KEY_VALID;
 
 use anyhow::Result;
 use const_format::concatcp;
 #[cfg(feature = "prometheus")]
 use prometheus::IntCounter;
 
-use tracing::{field, Instrument};
+use tracing::{field, Instrument, Span};
 #[cfg(feature = "prometheus")]
 use windmill_common::METRICS_DEBUG_ENABLED;
 #[cfg(feature = "prometheus")]
@@ -44,7 +44,7 @@ use serde::{Deserialize, Serialize};
 use sqlx::types::Json;
 use std::{
     collections::HashMap,
-    fs::DirBuilder,
+    fmt::Display,
     sync::{
         atomic::{AtomicBool, AtomicU16, Ordering},
         Arc,
@@ -168,15 +168,10 @@ use windmill_common::bench::{benchmark_init, BenchmarkInfo, BenchmarkIter};
 
 use windmill_common::add_time;
 
-pub const PY310_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "python_310");
-pub const PY311_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "python_311");
-pub const PY312_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "python_312");
-pub const PY313_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "python_313");
-
-pub const TAR_PY310_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "tar/python_310");
-pub const TAR_PY311_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "tar/python_311");
-pub const TAR_PY312_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "tar/python_312");
-pub const TAR_PY313_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "tar/python_313");
+pub const PY310_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "python_3_10");
+pub const PY311_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "python_3_11");
+pub const PY312_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "python_3_12");
+pub const PY313_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "python_3_13");
 
 pub const TAR_JAVA_CACHE_DIR: &str = concatcp!(ROOT_CACHE_DIR, "tar/java");
 
@@ -210,6 +205,9 @@ const NUM_SECS_READINGS: u64 = 60;
 
 const INCLUDE_DEPS_PY_SH_CONTENT: &str = include_str!("../nsjail/download_deps.py.sh");
 
+const WORKER_SHELL_NAP_TIME_DURATION: u64 = 15;
+const TIMEOUT_TO_RESET_WORKER_SHELL_NAP_TIME_DURATION: u64 = 2 * 60;
+
 pub const DEFAULT_SLEEP_QUEUE: u64 = 50;
 
 // only 1 native job so that we don't have to worry about concurrency issues on non dedicated native jobs workers
@@ -247,6 +245,8 @@ lazy_static::lazy_static! {
 const DOTNET_DEFAULT_PATH: &str = "C:\\Program Files\\dotnet\\dotnet.exe";
 #[cfg(unix)]
 const DOTNET_DEFAULT_PATH: &str = "/usr/bin/dotnet";
+pub const SAME_WORKER_REQUIREMENTS: &'static str =
+    "SameWorkerSender is required because this job may be part of a flow";
 
 lazy_static::lazy_static! {
 
@@ -391,6 +391,31 @@ lazy_static::lazy_static! {
     pub static ref WIN_ENVS: Envs = vec![];
 }
 
+#[derive(Debug)]
+pub enum NextJob {
+    Sql(PulledJob),
+    Http(JobAndPerms),
+}
+
+impl NextJob {
+    pub fn job(self) -> MiniPulledJob {
+        match self {
+            NextJob::Sql(job) => job.job,
+            NextJob::Http(job) => job.job,
+        }
+    }
+}
+
+impl std::ops::Deref for NextJob {
+    type Target = MiniPulledJob;
+    fn deref(&self) -> &Self::Target {
+        match self {
+            NextJob::Sql(job) => &job.job,
+            NextJob::Http(job) => &job.job,
+        }
+    }
+}
+
 //only matter if CLOUD_HOSTED
 pub const MAX_RESULT_SIZE: usize = 1024 * 1024 * 2; // 2MB
 
@@ -431,20 +456,26 @@ impl JobCompletedReceiver {
 }
 
 impl JobCompletedSender {
+    pub fn new_job_completed_sender_sql(buffer_size: u8) -> (Self, JobCompletedReceiver) {
+        let (sender, receiver) = flume::bounded::<SendResult>(buffer_size as usize);
+        let (unbounded_sender, unbounded_rx) = flume::unbounded::<SendResult>();
+        let (killpill_tx, killpill_rx) = broadcast::channel::<()>(10);
+        (
+            Self::Sql(SqlJobCompletedSender { sender, unbounded_sender, killpill_tx }),
+            JobCompletedReceiver { bounded_rx: receiver, killpill_rx, unbounded_rx },
+        )
+    }
+
     pub fn new(conn: &Connection, buffer_size: u8) -> (Self, Option<JobCompletedReceiver>) {
         match conn {
             Connection::Sql(_) => {
-                let (sender, receiver) = flume::bounded::<SendResult>(buffer_size as usize);
-                let (unbounded_sender, unbounded_rx) = flume::unbounded::<SendResult>();
-                let (killpill_tx, killpill_rx) = broadcast::channel::<()>(10);
-                (
-                    Self::Sql(SqlJobCompletedSender { sender, unbounded_sender, killpill_tx }),
-                    Some(JobCompletedReceiver { bounded_rx: receiver, killpill_rx, unbounded_rx }),
-                )
+                let result = Self::new_job_completed_sender_sql(buffer_size);
+                (result.0, Some(result.1))
             }
             Connection::Http(client) => (Self::Http(client.clone()), None),
         }
     }
+
     pub fn new_never_used() -> (Self, Option<Receiver<SendResult>>) {
         (Self::NeverUsed, None)
     }
@@ -622,6 +653,233 @@ fn add_outstanding_wait_time(
     }
 }
 
+async fn extract_job_and_perms(job: NextJob, conn: &Connection) -> JobAndPerms {
+    match (job, conn) {
+        (NextJob::Sql(job), Connection::Sql(db)) => job.get_job_and_perms(db).await,
+        (NextJob::Sql(_), Connection::Http(_)) => panic!("sql job on http connection"),
+        (NextJob::Http(job), _) => job,
+    }
+}
+
+fn create_span(arc_job: &Arc<MiniPulledJob>, worker_name: &str, hostname: &str) -> Span {
+    let span = tracing::span!(tracing::Level::INFO, "job",
+        job_id = %arc_job.id, root_job = field::Empty, workspace_id = %arc_job.workspace_id,  worker = %worker_name, hostname = %hostname, tag = %arc_job.tag,
+        language = field::Empty,
+        script_path = field::Empty, flow_step_id = field::Empty, parent_job = field::Empty,
+        otel.name = field::Empty);
+
+    let rj = arc_job.flow_innermost_root_job.unwrap_or(arc_job.id);
+
+    if let Some(lg) = arc_job.script_lang.as_ref() {
+        span.record("language", lg.as_str());
+    }
+    if let Some(step_id) = arc_job.flow_step_id.as_ref() {
+        span.record("otel.name", format!("job {}", step_id).as_str());
+        span.record("flow_step_id", step_id.as_str());
+    } else {
+        span.record("otel.name", "job");
+    }
+    if let Some(parent_job) = arc_job.parent_job.as_ref() {
+        span.record("parent_job", parent_job.to_string().as_str());
+    }
+    if let Some(script_path) = arc_job.runnable_path.as_ref() {
+        span.record("script_path", script_path.as_str());
+    }
+    if let Some(root_job) = arc_job.flow_innermost_root_job.as_ref() {
+        span.record("root_job", root_job.to_string().as_str());
+    }
+
+    windmill_common::otel_oss::set_span_parent(&span, &rj);
+    span
+}
+
+pub async fn handle_all_job_kind_error(
+    conn: &Connection,
+    authed_client: &AuthedClient,
+    job: Arc<MiniPulledJob>,
+    err: Error,
+    same_worker_tx: Option<&SameWorkerSender>,
+    worker_dir: &str,
+    worker_name: &str,
+    job_completed_tx: JobCompletedSender,
+    #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
+) {
+    match conn {
+        Connection::Sql(db) => {
+            handle_job_error(
+                db,
+                authed_client,
+                job.as_ref(),
+                0,
+                None,
+                err,
+                false,
+                same_worker_tx,
+                &worker_dir,
+                &worker_name,
+                job_completed_tx.clone(),
+                #[cfg(feature = "benchmark")]
+                bench,
+            )
+            .await;
+        }
+        Connection::Http(_) => {
+            job_completed_tx
+                .send_job(
+                    JobCompleted {
+                        preprocessed_args: None,
+                        job: job.clone(),
+                        result: Arc::new(windmill_common::worker::to_raw_value(&error_to_value(
+                            err,
+                        ))),
+                        result_columns: None,
+                        mem_peak: 0,
+                        canceled_by: None,
+                        success: false,
+                        cached_res_path: None,
+                        token: authed_client.token.clone(),
+                        duration: None,
+                    },
+                    false,
+                )
+                .await
+                .expect("send job completed");
+        }
+    }
+}
+
+pub fn start_interactive_worker_shell(
+    conn: Connection,
+    hostname: String,
+    worker_name: String,
+    mut killpill_rx: tokio::sync::broadcast::Receiver<()>,
+    job_completed_tx: JobCompletedSender,
+    base_internal_url: String,
+    worker_dir: String,
+) -> JoinHandle<()> {
+    tokio::spawn(async move {
+        let mut occupancy_metrics = OccupancyMetrics::new(Instant::now());
+
+        let mut last_executed_job: Option<Instant> =
+            Instant::now().checked_sub(Duration::from_millis(2500));
+
+        loop {
+            if let Ok(_) = killpill_rx.try_recv() {
+                break;
+            } else {
+                let pulled_job = match &conn {
+                    Connection::Sql(db) => {
+                        let query = ("".to_string(), make_pull_query(&[hostname.to_owned()]));
+
+                        #[cfg(feature = "benchmark")]
+                        let mut bench = windmill_common::bench::BenchmarkIter::new();
+                        let job = pull(
+                            &db,
+                            false,
+                            &worker_name,
+                            Some(&query),
+                            #[cfg(feature = "benchmark")]
+                            &mut bench,
+                        )
+                        .await;
+
+                        job.map(|x| x.job.map(NextJob::Sql))
+                    }
+                    Connection::Http(client) => {
+                        crate::agent_workers::pull_job(&client, None, Some(true))
+                            .await
+                            .map_err(|e| error::Error::InternalErr(e.to_string()))
+                            .map(|x| x.map(|y| NextJob::Http(y)))
+                    }
+                };
+
+                match pulled_job {
+                    Ok(Some(job)) => {
+                        tracing::debug!(worker = %worker_name, hostname = %hostname, "started handling of job {}", job.id);
+
+                        let job_dir = create_job_dir(&worker_dir, job.id).await;
+                        #[cfg(feature = "benchmark")]
+                        let mut bench = windmill_common::bench::BenchmarkIter::new();
+
+                        let JobAndPerms {
+                            job,
+                            raw_code,
+                            raw_lock,
+                            raw_flow,
+                            parent_runnable_path,
+                            token,
+                            precomputed_agent_info: precomputed_bundle,
+                        } = extract_job_and_perms(job, &conn).await;
+
+                        let authed_client = AuthedClient::new(
+                            base_internal_url.to_owned(),
+                            job.workspace_id.clone(),
+                            token,
+                            None,
+                        );
+
+                        let arc_job = Arc::new(job);
+
+                        let _ = handle_queued_job(
+                            arc_job.clone(),
+                            raw_code,
+                            raw_lock,
+                            raw_flow,
+                            parent_runnable_path,
+                            &conn,
+                            &authed_client,
+                            &hostname,
+                            &worker_name,
+                            &worker_dir,
+                            &job_dir,
+                            None,
+                            &base_internal_url,
+                            job_completed_tx.clone(),
+                            &mut occupancy_metrics,
+                            &mut killpill_rx,
+                            precomputed_bundle,
+                            #[cfg(feature = "benchmark")]
+                            &mut bench,
+                        )
+                        .await;
+
+                        last_executed_job = Some(Instant::now());
+                    }
+                    Ok(None) => {
+                        let now = Instant::now();
+                        match last_executed_job {
+                            Some(last)
+                                if now.duration_since(last).as_secs()
+                                    > TIMEOUT_TO_RESET_WORKER_SHELL_NAP_TIME_DURATION =>
+                            {
+                                tokio::time::sleep(Duration::from_secs(
+                                    WORKER_SHELL_NAP_TIME_DURATION,
+                                ))
+                                .await;
+                            }
+                            _ => {
+                                tokio::time::sleep(Duration::from_millis(*SLEEP_QUEUE)).await;
+                            }
+                        }
+                    }
+
+                    Err(err) => {
+                        tracing::error!(worker = %worker_name, hostname = %hostname, "Failed to pull jobs: {}", err);
+                    }
+                };
+            }
+        }
+    })
+}
+
+async fn create_job_dir(worker_directory: &str, job_id: impl Display) -> String {
+    let job_dir_path = format!("{}/{}", worker_directory, job_id);
+
+    create_directory_async(&job_dir_path).await;
+
+    job_dir_path
+}
+
 pub async fn run_worker(
     conn: &Connection,
     hostname: &str,
@@ -686,10 +944,7 @@ pub async fn run_worker(
         write_file(&HOME_ENV, ".netrc", netrc).expect("could not write netrc");
     }
 
-    DirBuilder::new()
-        .recursive(true)
-        .create(&worker_dir)
-        .expect("could not create initial worker dir");
+    create_directory_async(&worker_dir).await;
 
     if !*DISABLE_NSJAIL {
         let _ = write_file(
@@ -948,6 +1203,25 @@ pub async fn run_worker(
         )),
         _ => None,
     };
+    // If we're the first worker to run, we start another background process that listens for a specific tag.
+    // This tag is associated only with jobs using Bash as the script language.
+    // For agent workers, the expected tag format is the worker name suffixed with "-ssh".
+    // For regular workers, the tag is simply the machine's hostname and if not found the randomly generated hostname.
+    let interactive_shell = if i_worker == 1 {
+        let it_shell = start_interactive_worker_shell(
+            conn.clone(),
+            hostname.to_owned(),
+            worker_name.clone(),
+            killpill_rx.resubscribe(),
+            job_completed_tx.clone(),
+            base_internal_url.to_owned(),
+            worker_dir.clone(),
+        );
+
+        Some(it_shell)
+    } else {
+        None
+    };
 
     let mut last_executed_job: Option<Instant> = None;
 
@@ -1058,7 +1332,7 @@ pub async fn run_worker(
             if !valid_key {
                 tracing::error!(
                     worker = %worker_name, hostname = %hostname,
-                    "Invalid license key, workers require a valid license key, sleeping for 30s waiting for valid key to be set"
+                    "Invalid license key, workers require a valid license key, sleeping for 10s waiting for valid key to be set"
                 );
                 tokio::time::sleep(Duration::from_secs(10)).await;
                 continue;
@@ -1128,29 +1402,6 @@ pub async fn run_worker(
         } else {
             tracing::info!("benchmark not finished, still pulling jobs {}", infos.iters);
         }
-        enum NextJob {
-            Sql(PulledJob),
-            Http(JobAndPerms),
-        }
-
-        impl NextJob {
-            pub fn job(self) -> MiniPulledJob {
-                match self {
-                    NextJob::Sql(job) => job.job,
-                    NextJob::Http(job) => job.job,
-                }
-            }
-        }
-
-        impl std::ops::Deref for NextJob {
-            type Target = MiniPulledJob;
-            fn deref(&self) -> &Self::Target {
-                match self {
-                    NextJob::Sql(job) => &job.job,
-                    NextJob::Http(job) => &job.job,
-                }
-            }
-        }
 
         let next_job = {
             // println!("2: {:?}",  instant.elapsed());
@@ -1191,6 +1442,7 @@ pub async fn run_worker(
                                 "/api/agent_workers/same_worker_job/{}",
                                 same_worker_job.job_id
                             ),
+                            None,
                             &same_worker_job,
                         )
                         .await
@@ -1296,7 +1548,7 @@ pub async fn run_worker(
                         }
                         job.map(|x| x.job.map(NextJob::Sql))
                     }
-                    Connection::Http(client) => crate::agent_workers::pull_job(&client)
+                    Connection::Http(client) => crate::agent_workers::pull_job(&client, None, None)
                         .await
                         .map_err(|e| error::Error::InternalErr(e.to_string()))
                         .map(|x| x.map(|y| NextJob::Http(y))),
@@ -1344,6 +1596,7 @@ pub async fn run_worker(
                         }
                     }
                 }
+
                 if matches!(job.kind, JobKind::Noop) {
                     add_time!(bench, "send job completed START");
                     job_completed_tx
@@ -1425,20 +1678,12 @@ pub async fn run_worker(
                       // fields macro we can make a job id that only appears when
                       // the job is defined?
 
-                    let job_dir = format!("{worker_dir}/{}", job.id);
-
-                    DirBuilder::new()
-                        .recursive(true)
-                        .create(&job_dir)
-                        .expect("could not create job dir");
+                    let job_dir = create_job_dir(&worker_dir, job.id).await;
 
                     let same_worker = job.same_worker;
 
                     let folder = if job.script_lang == Some(ScriptLang::Go) {
-                        DirBuilder::new()
-                            .recursive(true)
-                            .create(&format!("{job_dir}/go"))
-                            .expect("could not create go dir");
+                        create_directory_async(&format!("{job_dir}/go")).await;
                         "/go"
                     } else {
                         ""
@@ -1450,26 +1695,22 @@ pub async fn run_worker(
                         if tokio::fs::metadata(target).await.is_err() {
                             let parent_flow = job.parent_job.unwrap();
                             let parent_shared_dir = format!("{worker_dir}/{parent_flow}/shared");
-                            DirBuilder::new()
-                                .recursive(true)
-                                .create(&parent_shared_dir)
-                                .expect("could not create parent shared dir");
-
+                            create_directory_async(&parent_shared_dir).await;
                             symlink(&parent_shared_dir, target)
                                 .await
                                 .expect("could not symlink target");
                         }
                     } else {
-                        DirBuilder::new()
-                            .recursive(true)
-                            .create(target)
-                            .expect("could not create shared dir");
+                        create_directory_async(target).await;
                     }
 
                     #[cfg(feature = "prometheus")]
                     let tag = job.tag.clone();
 
                     let is_init_script: bool = job.tag.as_str() == INIT_SCRIPT_TAG;
+                    let is_flow = job.is_flow();
+                    let job_id = job.id;
+
                     let JobAndPerms {
                         job,
                         raw_code,
@@ -1478,70 +1719,32 @@ pub async fn run_worker(
                         parent_runnable_path,
                         token,
                         precomputed_agent_info: precomputed_bundle,
-                    } = match (job, &conn) {
-                        (NextJob::Sql(job), Connection::Sql(db)) => job.get_job_and_perms(db).await,
-                        (NextJob::Sql(_), Connection::Http(_)) => {
-                            panic!("sql job on http connection")
-                        }
-                        (NextJob::Http(job), _) => job,
-                    };
+                    } = extract_job_and_perms(job, &conn).await;
 
-                    // let token = create_token(&db, &job, job_perms).await;
-                    let authed_client = AuthedClient {
-                        base_internal_url: base_internal_url.to_string(),
+                    let authed_client = AuthedClient::new(
+                        base_internal_url.to_owned(),
+                        job.workspace_id.clone(),
                         token,
-                        workspace: job.workspace_id.to_string(),
-                        force_client: None,
-                    };
+                        None,
+                    );
 
                     let arc_job = Arc::new(job);
-                    add_time!(bench, "handle_queued_job START");
 
-                    let span = tracing::span!(tracing::Level::INFO, "job",
-                            job_id = %arc_job.id, root_job = field::Empty, workspace_id = %arc_job.workspace_id,  worker = %worker_name, hostname = %hostname, tag = %arc_job.tag,
-                            language = field::Empty,
-                            script_path = field::Empty, flow_step_id = field::Empty, parent_job = field::Empty,
-                            otel.name = field::Empty);
-                    let rj = if let Some(root_job) = arc_job.flow_innermost_root_job {
-                        root_job
-                    } else {
-                        arc_job.id
-                    };
-                    if let Some(lg) = arc_job.script_lang.as_ref() {
-                        span.record("language", lg.as_str());
-                    }
-                    if let Some(step_id) = arc_job.flow_step_id.as_ref() {
-                        span.record("otel.name", format!("job {}", step_id).as_str());
-                        span.record("flow_step_id", step_id.as_str());
-                    } else {
-                        span.record("otel.name", "job");
-                    }
-                    if let Some(parent_job) = arc_job.parent_job.as_ref() {
-                        span.record("parent_job", parent_job.to_string().as_str());
-                    }
-                    if let Some(script_path) = arc_job.runnable_path.as_ref() {
-                        span.record("script_path", script_path.as_str());
-                    }
-                    if let Some(root_job) = arc_job.flow_innermost_root_job.as_ref() {
-                        span.record("root_job", root_job.to_string().as_str());
-                    }
+                    let span = create_span(&arc_job, &worker_name, hostname);
 
-                    windmill_common::otel_ee::set_span_parent(&span, &rj);
-                    // span.context().span().add_event_with_timestamp("job created".to_string(), arc_job.created_at.into(), vec![]);
-
-                    match handle_queued_job(
+                    let job_result = handle_queued_job(
                         arc_job.clone(),
                         raw_code,
                         raw_lock,
                         raw_flow,
                         parent_runnable_path,
-                        conn,
+                        &conn,
                         &authed_client,
-                        &hostname,
+                        hostname,
                         &worker_name,
                         &worker_dir,
                         &job_dir,
-                        same_worker_tx.clone(),
+                        Some(same_worker_tx.clone()),
                         base_internal_url,
                         job_completed_tx.clone(),
                         &mut occupancy_metrics,
@@ -1551,74 +1754,40 @@ pub async fn run_worker(
                         &mut bench,
                     )
                     .instrument(span)
-                    .await
-                    {
+                    .await;
+
+                    match job_result {
+                        Ok(false) if is_init_script => {
+                            tracing::error!("init script job failed, exiting");
+                            update_worker_ping_for_failed_init_script(conn, &worker_name, job_id)
+                                .await;
+                            break;
+                        }
                         Err(err) => {
-                            match conn {
-                                Connection::Sql(db) => {
-                                    handle_job_error(
-                                        db,
-                                        &authed_client,
-                                        arc_job.as_ref(),
-                                        0,
-                                        None,
-                                        err,
-                                        false,
-                                        same_worker_tx.clone(),
-                                        &worker_dir,
-                                        &worker_name,
-                                        job_completed_tx.clone(),
-                                        #[cfg(feature = "benchmark")]
-                                        &mut bench,
-                                    )
-                                    .await;
-                                }
-                                Connection::Http(_) => {
-                                    job_completed_tx
-                                        .send_job(
-                                            JobCompleted {
-                                                preprocessed_args: None,
-                                                job: arc_job.clone(),
-                                                result: Arc::new(
-                                                    windmill_common::worker::to_raw_value(
-                                                        &error_to_value(err),
-                                                    ),
-                                                ),
-                                                result_columns: None,
-                                                mem_peak: 0,
-                                                canceled_by: None,
-                                                success: false,
-                                                cached_res_path: None,
-                                                token: authed_client.token.clone(),
-                                                duration: None,
-                                            },
-                                            false,
-                                        )
-                                        .await
-                                        .expect("send job completed");
-                                }
-                            }
+                            handle_all_job_kind_error(
+                                &conn,
+                                &authed_client,
+                                arc_job.clone(),
+                                err,
+                                Some(&same_worker_tx),
+                                &worker_dir,
+                                &worker_name,
+                                job_completed_tx.clone(),
+                                #[cfg(feature = "benchmark")]
+                                &mut bench,
+                            )
+                            .await;
                             if is_init_script {
                                 tracing::error!("init script job failed (in handler), exiting");
                                 update_worker_ping_for_failed_init_script(
                                     conn,
                                     &worker_name,
-                                    arc_job.id,
+                                    job_id,
                                 )
                                 .await;
                                 break;
                             }
                         }
-                        Ok(false) if is_init_script => {
-                            tracing::error!("init script job failed, exiting");
-                            update_worker_ping_for_failed_init_script(
-                                conn,
-                                &worker_name,
-                                arc_job.id,
-                            )
-                            .await;
-                            break;
-                        }
                         _ => {}
                     }
 
@@ -1643,8 +1812,7 @@ pub async fn run_worker(
                         .await;
                     }
 
-                    if !KEEP_JOB_DIR.load(Ordering::Relaxed) && !(arc_job.is_flow() && same_worker)
-                    {
+                    if !KEEP_JOB_DIR.load(Ordering::Relaxed) && !(is_flow && same_worker) {
                         let _ = tokio::fs::remove_dir_all(job_dir).await;
                     }
                 }
@@ -1726,6 +1894,11 @@ pub async fn run_worker(
             tracing::error!("error in awaiting send_result process: {e:?}")
         }
     }
+    if let Some(interactive_shell) = interactive_shell {
+        if let Err(e) = interactive_shell.await {
+            tracing::error!("error in awaiting interactive_shell process: {e:?}")
+        }
+    }
     tracing::info!(worker = %worker_name, hostname = %hostname, "worker {} exited", worker_name);
     tracing::info!(worker = %worker_name, hostname = %hostname, "number of jobs executed: {}", jobs_executed);
 }
@@ -1814,7 +1987,7 @@ pub struct PreviousResult<'a> {
     pub previous_result: Option<&'a RawValue>,
 }
 
-async fn handle_queued_job(
+pub async fn handle_queued_job(
     job: Arc<MiniPulledJob>,
     raw_code: Option<String>,
     raw_lock: Option<String>,
@@ -1826,7 +1999,7 @@ async fn handle_queued_job(
     worker_name: &str,
     worker_dir: &str,
     job_dir: &str,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: Option<SameWorkerSender>,
     base_internal_url: &str,
     job_completed_tx: JobCompletedSender,
     occupancy_metrics: &mut OccupancyMetrics,
@@ -1939,7 +2112,7 @@ async fn handle_queued_job(
                         .to_string();
                     append_logs(&job.id, &job.workspace_id, logs, conn).await;
                 }
-                job_completed_tx
+                let result = job_completed_tx
                     .send_job(
                         JobCompleted {
                             preprocessed_args: None,
@@ -1955,8 +2128,16 @@ async fn handle_queued_job(
                         },
                         true,
                     )
-                    .await
-                    .expect("send job completed");
+                    .await;
+
+                match result {
+                    Ok(_) => {
+                        tracing::debug!("Send job completed")
+                    }
+                    Err(err) => {
+                        tracing::error!("An error occurred while sending job completed: {:#?}", err)
+                    }
+                }
 
                 return Ok(true);
             }
@@ -1975,7 +2156,7 @@ async fn handle_queued_job(
                 db,
                 &client,
                 None,
-                same_worker_tx,
+                &same_worker_tx.expect(SAME_WORKER_REQUIREMENTS),
                 worker_dir,
                 job_completed_tx.clone(),
                 worker_name,
@@ -2144,7 +2325,6 @@ async fn handle_queued_job(
         {
             return Ok(false);
         }
-
         process_result(
             job,
             result.map(|x| Arc::new(x)),
diff --git a/backend/windmill-worker/src/worker_flow.rs b/backend/windmill-worker/src/worker_flow.rs
index 6c0b133828..95ffc28062 100644
--- a/backend/windmill-worker/src/worker_flow.rs
+++ b/backend/windmill-worker/src/worker_flow.rs
@@ -66,7 +66,7 @@ use windmill_queue::{
 
 type DB = sqlx::Pool<sqlx::Postgres>;
 
-use windmill_audit::audit_ee::{audit_log, AuditAuthor};
+use windmill_audit::audit_oss::{audit_log, AuditAuthor};
 use windmill_audit::ActionKind;
 use windmill_queue::{canceled_job_to_result, push};
 
@@ -80,7 +80,7 @@ pub async fn update_flow_status_after_job_completion(
     success: bool,
     result: Arc<Box<RawValue>>,
     unrecoverable: bool,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: &SameWorkerSender,
     worker_dir: &str,
     stop_early_override: Option<bool>,
     worker_name: &str,
@@ -89,6 +89,7 @@ pub async fn update_flow_status_after_job_completion(
 ) -> error::Result<Option<Arc<MiniPulledJob>>> {
     // this is manual tailrecursion because async_recursion blows up the stack
     potentially_crash_for_testing();
+
     let mut rec = RecUpdateFlowStatusAfterJobCompletion {
         flow,
         job_id_for_status: job_id_for_status.clone(),
@@ -109,7 +110,7 @@ pub async fn update_flow_status_after_job_completion(
             rec.success,
             rec.result,
             unrecoverable,
-            same_worker_tx.clone(),
+            same_worker_tx,
             worker_dir,
             rec.stop_early_override,
             rec.skip_error_handler,
@@ -134,7 +135,7 @@ pub async fn update_flow_status_after_job_completion(
                         error: json!(e.to_string()),
                     }))),
                     true,
-                    same_worker_tx.clone(),
+                    same_worker_tx,
                     worker_dir,
                     rec.stop_early_override,
                     rec.skip_error_handler,
@@ -147,6 +148,7 @@ pub async fn update_flow_status_after_job_completion(
             }
         };
         unrecoverable = false;
+
         match nrec {
             UpdateFlowStatusAfterJobCompletion::Done(job) => {
                 add_time!(bench, "update flow status internal END");
@@ -226,7 +228,7 @@ pub async fn update_flow_status_after_job_completion_internal(
     mut success: bool,
     result: Arc<Box<RawValue>>,
     unrecoverable: bool,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: &SameWorkerSender,
     worker_dir: &str,
     stop_early_override: Option<bool>,
     skip_error_handler: bool,
@@ -625,9 +627,10 @@ pub async fn update_flow_status_after_job_completion_internal(
                         sqlx::query!(
                             "UPDATE v2_job_queue q SET suspend = 0
                              FROM v2_job j, v2_job_status f
-                             WHERE parent_job = $1
+                             WHERE q.workspace_id = $1 AND q.suspend = $3 AND j.parent_job = $2
                                  AND f.id = j.id AND q.id = j.id
-                                 AND suspend = $2 AND (f.flow_status->'step')::int = 0",
+                                 AND (f.flow_status->'step')::int = 0",
+                            w_id,
                             flow,
                             nindex
                         )
@@ -1289,7 +1292,7 @@ pub async fn update_flow_status_after_job_completion_internal(
             db,
             client,
             Some(nresult.clone()),
-            same_worker_tx.clone(),
+            same_worker_tx,
             worker_dir,
             job_completed_tx,
             worker_name,
@@ -1586,7 +1589,7 @@ pub async fn handle_flow(
     db: &sqlx::Pool<sqlx::Postgres>,
     client: &AuthedClient,
     last_result: Option<Arc<Box<RawValue>>>,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: &SameWorkerSender,
     worker_dir: &str,
     job_completed_tx: JobCompletedSender,
     worker_name: &str,
@@ -1643,7 +1646,7 @@ pub async fn handle_flow(
             db,
             client,
             last_result.clone(),
-            same_worker_tx.clone(),
+            same_worker_tx,
             worker_dir,
             worker_name,
         )
@@ -1736,7 +1739,7 @@ async fn push_next_flow_job(
     db: &sqlx::Pool<sqlx::Postgres>,
     client: &AuthedClient,
     last_job_result: Option<Arc<Box<RawValue>>>,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: &SameWorkerSender,
     worker_dir: &str,
     worker_name: &str,
 ) -> error::Result<PushNextFlowJob> {
@@ -4006,7 +4009,7 @@ async fn flow_to_payload(
     w_id: &str,
     db: &DB,
 ) -> Result<JobPayloadWithTag, Error> {
-    let FlowVersionInfo { version, on_behalf_of_email, edited_by, .. } =
+    let FlowVersionInfo { version, on_behalf_of_email, edited_by, tag, .. } =
         get_latest_flow_version_info_for_path(db, w_id, &path, true).await?;
     let on_behalf_of = if let Some(email) = on_behalf_of_email {
         Some(OnBehalfOf { email, permissioned_as: username_to_permissioned_as(&edited_by) })
@@ -4015,7 +4018,7 @@ async fn flow_to_payload(
     };
     let payload =
         JobPayload::Flow { path, dedicated_worker: None, apply_preprocessor: false, version };
-    Ok(JobPayloadWithTag { payload, tag: None, delete_after_use, timeout: None, on_behalf_of })
+    Ok(JobPayloadWithTag { payload, tag, delete_after_use, timeout: None, on_behalf_of })
 }
 
 async fn script_to_payload(
diff --git a/backend/windmill-worker/src/worker_lockfiles.rs b/backend/windmill-worker/src/worker_lockfiles.rs
index 6710f718c4..47bb07c438 100644
--- a/backend/windmill-worker/src/worker_lockfiles.rs
+++ b/backend/windmill-worker/src/worker_lockfiles.rs
@@ -1965,12 +1965,11 @@ async fn ansible_dep(
     use windmill_parser_yaml::add_versions_to_requirements_yaml;
 
     use crate::ansible_executor::{
-            create_ansible_cfg, get_collection_locks, get_git_ssh_cmd, get_role_locks,
-            install_galaxy_collections,
-        };
+        create_ansible_cfg, get_collection_locks, get_git_ssh_cmd, get_role_locks,
+        install_galaxy_collections,
+    };
     use windmill_common::client::AuthedClient;
 
-
     let python_lockfile = python_dep(
         reqs.python_reqs.join("\n").to_string(),
         job_id,
@@ -1989,12 +1988,12 @@ async fn ansible_dep(
 
     let conn = &Connection::Sql(db.clone());
 
-    let authed_client = AuthedClient {
-        base_internal_url: base_internal_url.to_string(),
-        token: token.to_string(),
-        workspace: w_id.to_string(),
-        force_client: None,
-    };
+    let authed_client = AuthedClient::new(
+        base_internal_url.to_string(),
+        w_id.to_string(),
+        token.to_string(),
+        None,
+    );
 
     let git_ssh_cmd = get_git_ssh_cmd(&reqs, job_dir, &authed_client).await?;
 
@@ -2102,7 +2101,12 @@ async fn capture_dependency_job(
 
                     (
                         job_raw_code.to_owned(),
-                        crate::PyV::parse_from_requirements(&split_requirements(job_raw_code)),
+                        match crate::PyV::try_parse_from_requirements(&split_requirements(
+                            job_raw_code,
+                        )) {
+                            Some(pyv) => pyv,
+                            None => crate::PyV::gravitational_version(job_id, w_id, None).await,
+                        },
                     )
                 } else {
                     let mut version_specifiers = vec![];
@@ -2189,11 +2193,6 @@ async fn capture_dependency_job(
             }
         }
         ScriptLang::Go => {
-            if raw_deps {
-                return Err(Error::ExecutionErr(
-                    "Raw dependencies not supported for go".to_string(),
-                ));
-            }
             install_go_dependencies(
                 job_id,
                 job_raw_code,
@@ -2204,6 +2203,7 @@ async fn capture_dependency_job(
                 false,
                 false,
                 false,
+                raw_deps,
                 worker_name,
                 w_id,
                 occupancy_metrics,
diff --git a/backend/windmill-worker/src/worker_utils.rs b/backend/windmill-worker/src/worker_utils.rs
index e1ea849999..4da318d37b 100644
--- a/backend/windmill-worker/src/worker_utils.rs
+++ b/backend/windmill-worker/src/worker_utils.rs
@@ -125,6 +125,7 @@ async fn update_worker_ping_full_inner(
             client
                 .post::<_, ()>(
                     UPDATE_PING_URL,
+                    None,
                     &Ping {
                         last_job_executed: None,
                         last_job_workspace_id: None,
@@ -190,6 +191,7 @@ pub async fn insert_ping(
             client
                 .post::<_, ()>(
                     UPDATE_PING_URL,
+                    None,
                     &Ping {
                         last_job_executed: None,
                         last_job_workspace_id: None,
@@ -249,6 +251,7 @@ pub async fn update_worker_ping_from_job(
             client
                 .post::<Ping, ()>(
                     UPDATE_PING_URL,
+                    None,
                     &Ping {
                         last_job_executed: Some(job_id.clone()),
                         last_job_workspace_id: Some(w_id.to_string()),
@@ -287,6 +290,7 @@ pub async fn ping_job_status(
             client
                 .post(
                     &format!("/api/agent_workers/ping_job_status/{}", job_id),
+                    None,
                     &PingJobStatus { mem_peak, current_mem },
                 )
                 .await
diff --git a/benchmarks/lib.ts b/benchmarks/lib.ts
index cde9bc5320..45de71358f 100644
--- a/benchmarks/lib.ts
+++ b/benchmarks/lib.ts
@@ -2,7 +2,7 @@ import { sleep } from "https://deno.land/x/sleep@v1.2.1/mod.ts";
 import * as windmill from "https://deno.land/x/windmill@v1.174.0/mod.ts";
 import * as api from "https://deno.land/x/windmill@v1.174.0/windmill-api/index.ts";
 
-export const VERSION = "v1.494.0";
+export const VERSION = "v1.498.0";
 
 export async function login(email: string, password: string): Promise<string> {
   return await windmill.UserService.login({
diff --git a/cli/main.ts b/cli/main.ts
index c5b67cc26a..3a505bbc18 100644
--- a/cli/main.ts
+++ b/cli/main.ts
@@ -63,7 +63,7 @@ export {
 //   }
 // });
 
-export const VERSION = "1.494.0";
+export const VERSION = "1.498.0";
 
 const command = new Command()
   .name("wmill")
diff --git a/cli/metadata.ts b/cli/metadata.ts
index ee39d0b9da..d2d37aa22d 100644
--- a/cli/metadata.ts
+++ b/cli/metadata.ts
@@ -40,7 +40,7 @@ export class LockfileGenerationError extends Error {
 export async function generateAllMetadata() {}
 
 function findClosestRawReqs(
-  lang: "bun" | "python3" | "php" | undefined,
+  lang: "bun" | "python3" | "php" | "go" | undefined,
   remotePath: string,
   globalDeps: GlobalDeps
 ): string | undefined {
@@ -72,6 +72,15 @@ function findClosestRawReqs(
         bestCandidate = { k, v };
       }
     });
+  } else if (lang == "go") {
+    Object.entries(globalDeps.goMods).forEach(([k, v]) => {
+      if (
+        remotePath.startsWith(k) &&
+        k.length >= (bestCandidate?.k ?? "").length
+      ) {
+        bestCandidate = { k, v };
+      }
+    });
   }
   // @ts-ignore
   return bestCandidate?.v;
@@ -193,14 +202,14 @@ export async function generateScriptMetadataInternal(
   const language = inferContentTypeFromFilePath(scriptPath, opts.defaultTs);
 
   const rawReqs = findClosestRawReqs(
-    language as "bun" | "python3" | "php" | undefined,
+    language as "bun" | "python3" | "php" | "go" | undefined,
     scriptPath,
     globalDeps
   );
   if (rawReqs) {
     log.info(
       (await blueColor())(
-        `Found raw requirements (package.json/requirements.txt/composer.json) for ${scriptPath}, using it`
+        `Found raw requirements (package.json/requirements.txt/composer.json/go.mod) for ${scriptPath}, using it`
       )
     );
   }
diff --git a/cli/script.ts b/cli/script.ts
index e12c15d9ba..87e4f85354 100644
--- a/cli/script.ts
+++ b/cli/script.ts
@@ -869,11 +869,13 @@ export type GlobalDeps = {
   pkgs: Record<string, string>;
   reqs: Record<string, string>;
   composers: Record<string, string>;
+  goMods: Record<string, string>;
 };
 export async function findGlobalDeps(): Promise<GlobalDeps> {
   const pkgs: { [key: string]: string } = {};
   const reqs: { [key: string]: string } = {};
   const composers: { [key: string]: string } = {};
+  const goMods: { [key: string]: string } = {};
   const els = await FSFSElement(Deno.cwd(), [], false);
   for await (const entry of readDirRecursiveWithIgnore((p, isDir) => {
     p = SEP + p;
@@ -882,21 +884,24 @@ export async function findGlobalDeps(): Promise<GlobalDeps> {
       !(
         p.endsWith(SEP + "package.json") ||
         p.endsWith(SEP + "requirements.txt") ||
-        p.endsWith(SEP + "composer.json")
+        p.endsWith(SEP + "composer.json") ||
+        p.endsWith(SEP + "go.mod")
       )
     );
   }, els)) {
     if (entry.isDirectory || entry.ignored) continue;
     const content = await entry.getContentText();
     if (entry.path.endsWith("package.json")) {
-      pkgs[entry.path.substring(0, entry.path.length - 12)] = content;
+      pkgs[entry.path.substring(0, entry.path.length - "package.json".length)] = content;
     } else if (entry.path.endsWith("requirements.txt")) {
-      reqs[entry.path.substring(0, entry.path.length - 16)] = content;
+      reqs[entry.path.substring(0, entry.path.length - "requirements.txt".length)] = content;
     } else if (entry.path.endsWith("composer.json")) {
-      composers[entry.path.substring(0, entry.path.length - 13)] = content;
+      composers[entry.path.substring(0, entry.path.length - "composer.json".length)] = content;
+    } else if (entry.path.endsWith("go.mod")) {
+      goMods[entry.path.substring(0, entry.path.length - "go.mod".length)] = content;
     }
   }
-  return { pkgs, reqs, composers };
+  return { pkgs, reqs, composers, goMods };
 }
 async function generateMetadata(
   opts: GlobalOptions & {
diff --git a/flake.nix b/flake.nix
index 10a1e26c14..8056c201c5 100644
--- a/flake.nix
+++ b/flake.nix
@@ -22,6 +22,15 @@
             "rustfmt"
           ];
         };
+        patchedClang = pkgs.llvmPackages_18.clang.overrideAttrs (oldAttrs: {
+          postFixup = ''
+            # Copy the original postFixup logic but skip add-hardening.sh
+            ${oldAttrs.postFixup or ""}
+
+            # Remove the line that substitutes add-hardening.sh
+            sed -i 's/.*source.*add-hardening\.sh.*//' $out/bin/clang
+          '';
+        });
         buildInputs = with pkgs; [
           openssl
           openssl.dev
@@ -64,16 +73,24 @@
       in {
         # Enter by `nix develop .#wasm`
         devShells."wasm" = pkgs.mkShell {
+          # Explicitly set paths for headers and linker
+          shellHook = ''
+            export CC=${patchedClang}/bin/clang
+          '';
           buildInputs = buildInputs ++ (with pkgs; [
             (rust-bin.nightly.latest.default.override {
               extensions = [
                 "rust-src" # for rust-analyzer
                 "rust-analyzer"
               ];
-              targets = [ "wasm32-unknown-unknown" ];
+              targets =
+                [ "wasm32-unknown-unknown" "wasm32-unknown-emscripten" ];
             })
             wasm-pack
             deno
+            emscripten
+            # Needed for extra dependencies
+            glibc_multi
           ]);
         };
 
@@ -81,6 +98,7 @@
           buildInputs = buildInputs ++ (with pkgs; [
             # Essentials
             rust
+            cargo-watch
             cargo-sweep
             git
             xcaddy
@@ -94,6 +112,9 @@
             python3
             python3Packages.pip
             uv
+            poetry
+            pyright
+            openapi-python-client
 
             # Other languages
             deno
@@ -146,6 +167,8 @@
             '')
             (pkgs.writeScriptBin "wm" ''
               cd ./frontend
+              npm install
+              npm run generate-backend-client
               npm run dev $*
             '')
             (pkgs.writeScriptBin "wm-minio" ''
@@ -166,7 +189,6 @@
               echo "bucket: wmill"
               echo "endpoint: http://localhost:9000"
             '')
-
           ];
 
           inherit PKG_CONFIG_PATH RUSTY_V8_ARCHIVE;
@@ -179,6 +201,7 @@
           RUSTC_WRAPPER = "${pkgs.sccache}/bin/sccache";
           DENO_PATH = "${pkgs.deno}/bin/deno";
           GO_PATH = "${pkgs.go}/bin/go";
+          PHP_PATH = "${pkgs.php}/bin/php";
           BUN_PATH = "${pkgs.bun}/bin/bun";
           UV_PATH = "${pkgs.uv}/bin/uv";
           NU_PATH = "${pkgs.nushell}/bin/nu";
@@ -194,7 +217,7 @@
           ORACLE_LIB_DIR = "${pkgs.oracle-instantclient.lib}/lib";
           ANSIBLE_PLAYBOOK_PATH = "${pkgs.ansible}/bin/ansible-playbook";
           ANSIBLE_GALAXY_PATH = "${pkgs.ansible}/bin/ansible-galaxy";
-          RUST_LOG = "debug";
+          # RUST_LOG = "debug";
           SQLX_OFFLINE = "true";
 
           # See this issue: https://github.com/NixOS/nixpkgs/issues/370494
diff --git a/frontend/README_DEV.md b/frontend/README_DEV.md
index ba90278be4..88c18440cb 100644
--- a/frontend/README_DEV.md
+++ b/frontend/README_DEV.md
@@ -1,21 +1,83 @@
-# Developing
+# Windmill's build guide
 
-[Using Nix](#nix), otherwise:
+## Using Nix (Recommended)
 
-In the `frontend/` directory:
+Nix will manage all environment variables, packages and other configuration that you would usually do manually.
 
-- install the dependencies with `npm install` (or `pnpm install` or `yarn`)
-- generate the windmill client:
+**Prerequisites**
+
+- Install [Nix](https://github.com/DeterminateSystems/nix-installer).
+- Install Docker.
+- Optionally install [direnv](https://direnv.net/docs/installation.html).
+
+That's it! You are ready to go.
+
+> Using **direnv** is highly recommended, since it can load shell automatically based on your CWD. It also can give you hints.
+
+### Development
+```bash
+# enter a dev shell containing all necessary packages. `direnv allow` if direnv is installed.
+nix develop 
+## or ignore if you have `direnv`
+
+# Start db (if not started already)
+sudo docker compose up db -d 
+
+# run the frontend.
+wm
+
+# In an other shell:
+#
+nix develop 
+## or ignore if you have `direnv`
+
+cd backend
+# You don't need to install anything extra. All dependencies are already in place!
+cargo run --features all_languages 
+```
+
+The default proxy is setup to use the local backend: <http://localhost:8000>.
+
+### wm-* Commands
+
+Nix shell provides you with several helper commands prefixed with `wm-`
 
 ```bash
+# Start minio server (implements S3)
+wm-minio 
+# Note: You will need access to EE private repo in order to compile, don't forget "enterprise" and "parquet" freatures as well. 
+
+# Generate keys for local dev.
+wm-minio-keys 
+# Minio data as well as generated keys are stored in `backend/.minio-data`
+```
+
+You can read about all others commands individually in [flake.nix](../flake.nix). 
+
+### dev.nu
+
+In some places we have `dev.nu` files. They can help you developing and testing specific features. Their functionality depends on context, but you can get more info by running it with `--help` flag.
+
+### Running on NixOS
+
+It is recommended to use [nix-alien](https://github.com/thiagokokada/nix-alien) for running compiled windmill binaries. We need this because sometimes windmill may fetch unpatched binaries that are not compatible with NixOS.
+
+## Traditional instructions
+
+### Frontend only
+
+```bash
+cd frontend/
+
+# Install dependencies.
+npm install # or pnpm or yarn or bun
+
+# Generate windmill client.
 npm run generate-backend-client
 ## on mac use
 npm run generate-backend-client-mac
-```
 
-Once the dependencies are installed, just start the dev server:
-
-```bash
+# Start dev server
 npm run dev
 ```
 
@@ -27,9 +89,9 @@ You can configure another proxy to use like so:
 REMOTE=http://127.0.0.1:8000 REMOTE_LSP=http://127.0.0.1:3001 npm run dev
 ```
 
-## Use a Local backend
+### Use a Local backend
 
-### 1. Backend is run by docker
+#### 1. Backend is run by docker
 
 ```bash
 docker build . -t windmill
@@ -40,7 +102,23 @@ docker compose up db windmill_server windmill_worker
 REMOTE=http://localhost REMOTE_LSP=http://localhost npm run dev
 ```
 
-### 2. Backend is run by cargo
+#### 2. Backend is run by docker, but built from the local source code
+
+Sometimes it is important to build docker image for your branch locally. It is crucial part of testing, since local environment may differ from the containerized one.
+
+That's why we provide [docker/dev.nu](../docker/dev.nu). It is helper that can build images locally and execute them. 
+
+it can build the image and run on local repository.
+
+```bash
+# Issue the build
+docker/dev.nu up --features "python,static_frontend" docker/DockerfileNsjail --rebuild
+# Will create and run `main__nsjail__python-static_frontend`
+```
+
+If you develop wasm parser for new language you can also pass `--wasm-pkg <language>` and it will include local parser to the image. For more information please see the script directly or run it with `--help` flag.
+
+#### 3. Backend is run by cargo
 
 **Prerequisites**
 
@@ -87,13 +165,7 @@ In the frontend folder:
 REMOTE=http://127.0.0.1:8000 REMOTE_LSP=http://127.0.0.1:3001 npm run dev
 ```
 
-## Building
-
-```bash
-NODE_OPTIONS=--max_old_space_size=8096 npm run build
-```
-
-## Formatting
+### Formatting
 
 This project uses [prettier](https://prettier.io/docs/en/install.html) and
 [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte), be
@@ -116,15 +188,15 @@ Recommended config for VS Code:
 
 - turn _format on save_ on
 
-## Building
+### Building frontend
 
 The project is built with [SvelteKit](https://kit.svelte.dev/) and uses as output static files.
 There are others adapters for sveltekit, but we use the static adapter.
 
 To build the frontend as static assets, use:
 
-```
-npm run build
+```bash
+NODE_OPTIONS=--max_old_space_size=8096 npm run build
 ```
 
 The output is in the `build` folder.
@@ -139,27 +211,7 @@ which will generate an index.html and allow you to serve the frontend with any s
 
 Env variables used for build are set in .env file. See [https://vitejs.dev/guide/env-and-mode.html#env-files](https://vitejs.dev/guide/env-and-mode.html#env-files) for more details.
 
-## Nix
-
-Windmill use [nix flakes](https://nixos.wiki/wiki/Flakes):
-```bash
-nix run github:windmill-labs/windmill
-```
-
-### Development
-```bash
-nix develop # enter a dev shell containing all necessary packages.
-
-wm-setup # build the frontend and setup the database.
-wm # run the frontend.
-
-# In an other shell:
-nix develop
-cd backend
-cargo run
-```
-
-### Updating [`flake.nix`](../flake.nix)
+## Updating [`flake.nix`](../flake.nix)
 
 ```bash
 nix flake update # update the lock file.
diff --git a/frontend/npm b/frontend/npm
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 363691c469..02bb998500 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "windmill-components",
-	"version": "1.494.0",
+	"version": "1.498.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "windmill-components",
-			"version": "1.494.0",
+			"version": "1.498.0",
 			"hasInstallScript": true,
 			"license": "AGPL-3.0",
 			"dependencies": {
@@ -22,9 +22,12 @@
 				"@leeoniya/ufuzzy": "^1.0.8",
 				"@popperjs/core": "^2.11.6",
 				"@redocly/json-to-json-schema": "^0.0.1",
+				"@scalar/openapi-parser": "^0.15.0",
 				"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
+				"@tutorlatin/svelte-tiny-virtual-list": "^3.0.2",
 				"@windmill-labs/svelte-dnd-action": "^0.9.48",
-				"@xyflow/svelte": "^0.1.15",
+				"@xterm/addon-fit": "^0.10.0",
+				"@xyflow/svelte": "^1.0.0",
 				"ag-charts-community": "^9.0.1",
 				"ag-charts-enterprise": "^9.0.1",
 				"ag-grid-community": "^31.3.4",
@@ -52,6 +55,7 @@
 				"monaco-vim": "^0.4.1",
 				"ol": "^7.4.0",
 				"openai": "^4.87.1",
+				"openapi-types": "^12.1.3",
 				"p-limit": "^6.1.0",
 				"panzoom": "^9.4.3",
 				"pdfjs-dist": "4.8.69",
@@ -79,11 +83,14 @@
 				"windmill-parser-wasm-ts": "^1.486.1",
 				"windmill-parser-wasm-yaml": "^1.429.0",
 				"windmill-sql-datatype-parser-wasm": "^1.318.0",
+				"xterm": "^5.3.0",
+				"xterm-readline": "^1.1.2",
 				"y-monaco": "^0.1.4",
 				"y-websocket": "^1.5.4",
-				"yaml": "^2.3.4",
+				"yaml": "^2.8.0",
 				"yjs": "^13.6.7",
-				"zod": "^3.24.2"
+				"zod": "^3.24.2",
+				"zod-to-json-schema": "^3.24.5"
 			},
 			"devDependencies": {
 				"@floating-ui/core": "^1.3.1",
@@ -118,7 +125,6 @@
 				"postcss-load-config": "^4.0.1",
 				"prettier": "^3.1.0",
 				"prettier-plugin-svelte": "^3.3.3",
-				"simple-svelte-autocomplete": "^2.5.1",
 				"style-to-object": "^0.4.1",
 				"stylelint-config-recommended": "^13.0.0",
 				"svelte": "^5.0.0",
@@ -3000,6 +3006,59 @@
 				"win32"
 			]
 		},
+		"node_modules/@scalar/openapi-parser": {
+			"version": "0.15.0",
+			"resolved": "https://registry.npmjs.org/@scalar/openapi-parser/-/openapi-parser-0.15.0.tgz",
+			"integrity": "sha512-49u1sE+P+72nbt/9p7flBS/g7wbapTGAplcQ1FZxa4La56OMuShCl4qSSdw8lPNZjUZNTLcw7ExVOGI9p1kkOA==",
+			"license": "MIT",
+			"dependencies": {
+				"ajv": "^8.17.1",
+				"ajv-draft-04": "^1.0.0",
+				"ajv-formats": "^3.0.1",
+				"jsonpointer": "^5.0.1",
+				"leven": "^4.0.0",
+				"yaml": "^2.4.5"
+			},
+			"engines": {
+				"node": ">=20"
+			}
+		},
+		"node_modules/@scalar/openapi-parser/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/@scalar/openapi-parser/node_modules/ajv-draft-04": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz",
+			"integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"ajv": "^8.5.0"
+			},
+			"peerDependenciesMeta": {
+				"ajv": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@scalar/openapi-parser/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
+		},
 		"node_modules/@smithy/types": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/@smithy/types/-/types-4.2.0.tgz",
@@ -3017,11 +3076,11 @@
 			"integrity": "sha512-VqAAkydywPpkw63WQhPVKCD3SdwXuihCUVZbbiY3SfSTGQyHmwRoq27y4dmJdZuJwd5JIlQoMPyGvMbUPY0RKQ=="
 		},
 		"node_modules/@svelte-put/shortcut": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/@svelte-put/shortcut/-/shortcut-3.1.1.tgz",
-			"integrity": "sha512-2L5EYTZXiaKvbEelVkg5znxqvfZGZai3m97+cAiUBhLZwXnGtviTDpHxOoZBsqz41szlfRMcamW/8o0+fbW3ZQ==",
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/@svelte-put/shortcut/-/shortcut-4.1.0.tgz",
+			"integrity": "sha512-wImNEIkbxAIWFqlfuhcbC+jRPDeRa/uJGIXHMEVVD+jqL9xCwWNnkGQJ6Qb2XVszuRLHlb8SGZDL3Io/h3vs8w==",
 			"peerDependencies": {
-				"svelte": "^3.55.0 || ^4.0.0 || ^5.0.0"
+				"svelte": "^5.1.0"
 			}
 		},
 		"node_modules/@sveltejs/acorn-typescript": {
@@ -3215,6 +3274,17 @@
 				"node": ">=10.13.0"
 			}
 		},
+		"node_modules/@tutorlatin/svelte-tiny-virtual-list": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@tutorlatin/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-3.0.2.tgz",
+			"integrity": "sha512-Zts/GUrU6aPgmCrL6sGiD1EoiQxUU+r7Q2g9pckEUIDybNkluV2pEYWUsQLQ+28IJlSSHTopv0fhKs3qMUxqEw==",
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -3795,23 +3865,38 @@
 				"svelte": ">=3.23.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/@xterm/addon-fit": {
+			"version": "0.10.0",
+			"resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+			"integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@xterm/xterm": "^5.0.0"
+			}
+		},
+		"node_modules/@xterm/xterm": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+			"integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+			"license": "MIT",
+			"peer": true
+		},
 		"node_modules/@xyflow/svelte": {
-			"version": "0.1.39",
-			"resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.1.39.tgz",
-			"integrity": "sha512-QZ5mzNysvJeJW7DxmqI4Urhhef9tclqtPr7WAS5zQF5Gk6k9INwzey4CYNtEZo8XMj9H8lzgoJRmgMPnJEc1kw==",
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-1.0.2.tgz",
+			"integrity": "sha512-biNnzWRmKF/m7t7iY9wt3/KhoTyA8XGbS0Vix3HCL9vrULDF14R1VsMIOxKZib1GJfG+f1/cD2dQ9kplfPLs/Q==",
 			"dependencies": {
-				"@svelte-put/shortcut": "3.1.1",
-				"@xyflow/system": "0.0.59",
-				"classcat": "^5.0.4"
+				"@svelte-put/shortcut": "^4.1.0",
+				"@xyflow/system": "0.0.61"
 			},
 			"peerDependencies": {
-				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
+				"svelte": "^5.25.0"
 			}
 		},
 		"node_modules/@xyflow/system": {
-			"version": "0.0.59",
-			"resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.59.tgz",
-			"integrity": "sha512-+xgqYhoBv5F10TQx0SiKZR/DcWtuxFYR+e/LluHb7DMtX4SsMDutZWEJ4da4fDco25jZxw5G9fOlmk7MWvYd5Q==",
+			"version": "0.0.61",
+			"resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.61.tgz",
+			"integrity": "sha512-TsZG/Ez8dzxX6/Ol44LvFqVZsYvyz6dpDlAQZZk6hTL7JLGO5vN3dboRJqMwU8/Qtr5IEv5YBzojjAwIqW1HCA==",
 			"dependencies": {
 				"@types/d3-drag": "^3.0.7",
 				"@types/d3-selection": "^3.0.10",
@@ -3933,6 +4018,45 @@
 				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
+		"node_modules/ajv-formats": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+			"integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"ajv": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/ajv-formats/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/ajv-formats/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
+		},
 		"node_modules/amator": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
@@ -3953,7 +4077,6 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
 			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -4597,11 +4720,6 @@
 				"consola": "^3.2.3"
 			}
 		},
-		"node_modules/classcat": {
-			"version": "5.0.5",
-			"resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
-			"integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
-		},
 		"node_modules/clone": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -5485,8 +5603,7 @@
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-			"dev": true
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
 		},
 		"node_modules/encoding-down": {
 			"version": "6.3.0",
@@ -6043,8 +6160,7 @@
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-			"dev": true
+			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
 		},
 		"node_modules/fast-diff": {
 			"version": "1.1.2",
@@ -6103,7 +6219,6 @@
 			"version": "3.0.6",
 			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
 			"integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -6113,8 +6228,7 @@
 					"type": "opencollective",
 					"url": "https://opencollective.com/fastify"
 				}
-			],
-			"peer": true
+			]
 		},
 		"node_modules/fastest-levenshtein": {
 			"version": "1.0.16",
@@ -7179,7 +7293,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
 			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -7361,6 +7474,15 @@
 			"resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
 			"integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
 		},
+		"node_modules/jsonpointer": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
+			"integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/keyv": {
 			"version": "4.5.4",
 			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -7540,6 +7662,18 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/leven": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/leven/-/leven-4.0.0.tgz",
+			"integrity": "sha512-puehA3YKku3osqPlNuzGDUHq8WpwXupUg1V6NXdV38G+gr+gkBwFC8g1b/+YcIvp8gnqVIus+eJCH/eGsRmJNw==",
+			"license": "MIT",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/levn": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -9211,6 +9345,12 @@
 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
 			"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
 		},
+		"node_modules/openapi-types": {
+			"version": "12.1.3",
+			"resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.1.3.tgz",
+			"integrity": "sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw==",
+			"license": "MIT"
+		},
 		"node_modules/optionator": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -10714,8 +10854,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
 			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-			"dev": true,
-			"peer": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -11012,12 +11150,6 @@
 				"simple-concat": "^1.0.0"
 			}
 		},
-		"node_modules/simple-svelte-autocomplete": {
-			"version": "2.5.2",
-			"resolved": "https://registry.npmjs.org/simple-svelte-autocomplete/-/simple-svelte-autocomplete-2.5.2.tgz",
-			"integrity": "sha512-6+kZP3XQGb7zs0djTWoFv8tQorBZdv64YfCKrlsYIYBCFsEeikSiNsBSSYw1Om+LYmFeMEOAYSSKoEw+qpnBXQ==",
-			"dev": true
-		},
 		"node_modules/sirv": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
@@ -11163,7 +11295,6 @@
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
 			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-			"dev": true,
 			"dependencies": {
 				"emoji-regex": "^8.0.0",
 				"is-fullwidth-code-point": "^3.0.0",
@@ -11192,7 +11323,6 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
 			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-			"dev": true,
 			"dependencies": {
 				"ansi-regex": "^5.0.1"
 			},
@@ -13029,6 +13159,25 @@
 				"node": ">=0.4"
 			}
 		},
+		"node_modules/xterm": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
+			"integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==",
+			"deprecated": "This package is now deprecated. Move to @xterm/xterm instead.",
+			"license": "MIT"
+		},
+		"node_modules/xterm-readline": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/xterm-readline/-/xterm-readline-1.1.2.tgz",
+			"integrity": "sha512-1+W2nVuQvCYz9OUYwFBiolrSQUui51aDDyacKXt4PuxeBHqzvabQEJ2kwdBDzsmOjz5BwlDTAjJmYpH2OGqLFA==",
+			"license": "MIT",
+			"dependencies": {
+				"string-width": "^4"
+			},
+			"peerDependencies": {
+				"@xterm/xterm": "^5.5.0"
+			}
+		},
 		"node_modules/y-leveldb": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/y-leveldb/-/y-leveldb-0.1.2.tgz",
@@ -13129,6 +13278,7 @@
 			"version": "2.8.0",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
 			"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+			"license": "ISC",
 			"bin": {
 				"yaml": "bin.mjs"
 			},
@@ -13192,6 +13342,15 @@
 				"url": "https://github.com/sponsors/colinhacks"
 			}
 		},
+		"node_modules/zod-to-json-schema": {
+			"version": "3.24.5",
+			"resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.5.tgz",
+			"integrity": "sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==",
+			"license": "ISC",
+			"peerDependencies": {
+				"zod": "^3.24.1"
+			}
+		},
 		"node_modules/zstddec": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4666520da6..bee87418b0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.494.0",
+	"version": "1.498.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -50,7 +50,6 @@
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^3.1.0",
 		"prettier-plugin-svelte": "^3.3.3",
-		"simple-svelte-autocomplete": "^2.5.1",
 		"style-to-object": "^0.4.1",
 		"stylelint-config-recommended": "^13.0.0",
 		"svelte": "^5.0.0",
@@ -81,19 +80,21 @@
 	"dependencies": {
 		"@aws-crypto/sha256-js": "^4.0.0",
 		"@codingame/monaco-vscode-configuration-service-override": "~16.1.1",
+		"@codingame/monaco-vscode-editor-api": "~16.1.1",
 		"@codingame/monaco-vscode-standalone-css-language-features": "~16.1.1",
 		"@codingame/monaco-vscode-standalone-html-language-features": "^16.1.1",
 		"@codingame/monaco-vscode-standalone-json-language-features": "~16.1.1",
 		"@codingame/monaco-vscode-standalone-languages": "~16.1.1",
 		"@codingame/monaco-vscode-standalone-typescript-language-features": "~16.1.1",
-		"@codingame/monaco-vscode-editor-api": "~16.1.1",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
 		"@redocly/json-to-json-schema": "^0.0.1",
+		"@scalar/openapi-parser": "^0.15.0",
 		"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
 		"@windmill-labs/svelte-dnd-action": "^0.9.48",
-		"@xyflow/svelte": "^0.1.15",
+		"@xyflow/svelte": "^1.0.0",
+		"@xterm/addon-fit": "^0.10.0",
 		"ag-charts-community": "^9.0.1",
 		"ag-charts-enterprise": "^9.0.1",
 		"ag-grid-community": "^31.3.4",
@@ -121,6 +122,7 @@
 		"monaco-vim": "^0.4.1",
 		"ol": "^7.4.0",
 		"openai": "^4.87.1",
+		"openapi-types": "^12.1.3",
 		"p-limit": "^6.1.0",
 		"panzoom": "^9.4.3",
 		"pdfjs-dist": "4.8.69",
@@ -132,6 +134,7 @@
 		"svelte-exmarkdown": "^5.0.0",
 		"svelte-infinite-loading": "^1.4.0",
 		"svelte-tiny-virtual-list": "^2.0.5",
+		"@tutorlatin/svelte-tiny-virtual-list": "^3.0.2",
 		"tailwind-merge": "^1.13.2",
 		"vscode": "npm:@codingame/monaco-vscode-extension-api@~16.1.1",
 		"vscode-languageclient": "~9.0.1",
@@ -148,11 +151,14 @@
 		"windmill-parser-wasm-ts": "^1.486.1",
 		"windmill-parser-wasm-yaml": "^1.429.0",
 		"windmill-sql-datatype-parser-wasm": "^1.318.0",
+		"xterm": "^5.3.0",
+		"xterm-readline": "^1.1.2",
 		"y-monaco": "^0.1.4",
 		"y-websocket": "^1.5.4",
-		"yaml": "^2.3.4",
+		"yaml": "^2.8.0",
 		"yjs": "^13.6.7",
-		"zod": "^3.24.2"
+		"zod": "^3.24.2",
+		"zod-to-json-schema": "^3.24.5"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0"
diff --git a/frontend/src/lib/autosize.ts b/frontend/src/lib/autosize.ts
index 9ea2f925cd..b47a2e57b7 100644
--- a/frontend/src/lib/autosize.ts
+++ b/frontend/src/lib/autosize.ts
@@ -1,85 +1,90 @@
-export const action = (node) => {
-	/* Constants */
-	const update = new Event('update')
+import { tick } from 'svelte'
 
-	/* Functions */
-	const init = () => {
-		addStyles()
-		observeElement()
-		addEventListeners()
-		setInitialHeight()
-	}
+type TextArea = HTMLTextAreaElement
 
-	const dispatchUpdateEvent = () => {
-		node.dispatchEvent(update)
-	}
+export const autosize = (node: TextArea) => {
+	/* ------------------------------------------------------------------
+	 * Constants
+	 * ---------------------------------------------------------------- */
+	const UPDATE_EVENT = new Event('update')
+	const MIN_HEIGHT = 30 // px
+	const EXTRA = 2 // px added to scrollHeight
 
-	const setInitialHeight = () => {
-		let height = 0
-		if (node.value) {
-			height = Math.max(node.scrollHeight ?? 0, 30) + 2
-		} else {
-			if (node.placeholder) {
-				node.value = node.placeholder
-				height = Math.max(node.scrollHeight ?? 0, 30) + 2
-				node.value = ''
-			} else {
-				node.value = '|'
-				node.style.height = '0px'
-				height = Math.max(node.scrollHeight ?? 0, 30) + 2
-				node.value = ''
-			}
-		}
+	let width = 0
 
-		node.style.height = height + 'px'
-	}
-
-	const setHeight = () => {
+	/* ------------------------------------------------------------------
+	 * Core resize routine
+	 * ---------------------------------------------------------------- */
+	const resize = () => {
 		node.style.height = 'auto'
-		node.style.height = Math.max(node.scrollHeight ?? 0, 30) + 2 + 'px'
+		node.style.height = `${Math.max(node.scrollHeight, MIN_HEIGHT) + EXTRA}px`
 	}
 
-	const addStyles = () => {
-		node.style.boxSizing = 'border-box'
-	}
+	/* ------------------------------------------------------------------
+	 * Patch `value` so programmatic changes trigger resize
+	 * ---------------------------------------------------------------- */
+	const proto = Object.getPrototypeOf(node)
+	const desc = Object.getOwnPropertyDescriptor(proto, 'value')
 
-	const observeElement = () => {
-		let elementPrototype = Object.getPrototypeOf(node)
-		let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, 'value')
+	if (desc) {
 		Object.defineProperty(node, 'value', {
-			get: function () {
-				return descriptor?.get?.apply(this, arguments as any)
+			get() {
+				return desc.get?.call(this)
 			},
-			set: function () {
-				descriptor?.set?.apply(this, arguments as any)
-				dispatchUpdateEvent()
+			set(v: unknown) {
+				desc.set?.call(this, v)
+				node.dispatchEvent(UPDATE_EVENT)
 			}
 		})
 	}
 
-	const addEventListeners = () => {
-		node.addEventListener('input', (e) => {
-			dispatchUpdateEvent()
-		})
-		node.addEventListener('update', setHeight)
-	}
+	/* ------------------------------------------------------------------
+	 * Event listeners
+	 * ---------------------------------------------------------------- */
+	const onInput = () => node.dispatchEvent(UPDATE_EVENT)
 
-	const removeEventListeners = () => {
-		node.removeEventListener('input', dispatchUpdateEvent)
-		node.removeEventListener('update', setHeight)
-	}
+	node.addEventListener('input', onInput)
+	node.addEventListener('update', resize)
 
-	if (node.tagName.toLowerCase() !== 'textarea') {
-		throw new Error('svelte-textarea-auto-height can only be used on textarea elements.')
-	} else {
-		init()
+	/* ------------------------------------------------------------------
+	 * Inline styling
+	 * ---------------------------------------------------------------- */
+	node.style.boxSizing = 'border-box'
 
-		return {
-			destroy() {
-				removeEventListeners()
-			}
+	/* ------------------------------------------------------------------
+	 * Wait for DOM mount, then do an initial measure.
+	 * If the <textarea> is already visible (offsetWidth > 0) this covers it;
+	 * otherwise the first ResizeObserver callback will.
+	 * ---------------------------------------------------------------- */
+	;(async () => {
+		await tick()
+		resize()
+	})()
+
+	/* ------------------------------------------------------------------
+	 * ResizeObserver – handles:
+	 *   • first time the element gets a real width
+	 *   • container/window resizes afterwards
+	 * ---------------------------------------------------------------- */
+	const ro = new ResizeObserver(([entry]) => {
+		const newWidth = entry.contentRect.width
+		if (newWidth !== width) {
+			width = newWidth
+			resize()
+		}
+	})
+	ro.observe(node)
+
+	/* ------------------------------------------------------------------
+	 * Action lifecycle
+	 * ---------------------------------------------------------------- */
+	return {
+		destroy() {
+			ro.disconnect()
+			node.removeEventListener('input', onInput)
+			node.removeEventListener('update', resize)
 		}
 	}
 }
 
-export default action
+export default autosize
diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte
index 6144d6e84b..3c1161471a 100644
--- a/frontend/src/lib/components/AddUser.svelte
+++ b/frontend/src/lib/components/AddUser.svelte
@@ -13,8 +13,8 @@
 
 	const dispatch = createEventDispatcher()
 
-	let email: string
-	let username: string
+	let email: string | undefined = $state()
+	let username: string | undefined = $state()
 
 	function handleKeyUp(event: KeyboardEvent) {
 		const key = event.key
@@ -24,7 +24,7 @@
 		}
 	}
 
-	let automateUsernameCreation = false
+	let automateUsernameCreation = $state(false)
 	async function getAutomateUsernameCreationSetting() {
 		automateUsernameCreation =
 			((await SettingService.getGlobal({ key: 'automate_username_creation' })) as any) ?? false
@@ -35,17 +35,17 @@
 		await WorkspaceService.addUser({
 			workspace: $workspaceStore!,
 			requestBody: {
-				email,
+				email: email!,
 				username: automateUsernameCreation ? undefined : username,
 				is_admin: selected == 'admin',
 				operator: selected == 'operator'
 			}
 		})
 		sendUserToast(`Added ${email}`)
-		if (!(await UserService.existsEmail({ email }))) {
+		if (!(await UserService.existsEmail({ email: email! }))) {
 			let isSuperadmin = $superadmin
 			if (!isCloudHosted()) {
-				const emailCopy = email
+				const emailCopy = email!
 				sendUserToast(
 					`User ${email} is not registered yet on the instance. ${
 						!isSuperadmin
@@ -62,7 +62,7 @@
 										goto('#superadmin-settings')
 									}
 								}
-						  ]
+							]
 						: []
 				)
 			}
@@ -70,47 +70,49 @@
 		dispatch('new')
 	}
 
-	let selected: 'operator' | 'developer' | 'admin' = 'developer'
+	let selected: 'operator' | 'developer' | 'admin' = $state('developer')
 </script>
 
 <Popover placement="bottom-end">
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: UserPlus }}>
 			Add new user
 		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		<div class="flex flex-col w-72 p-4">
 			<span class="text-sm mb-2 leading-6 font-semibold">Add a new user</span>
 
 			<span class="text-xs mb-1 leading-6">Email</span>
-			<input type="email mb-1" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+			<input type="email mb-1" onkeyup={handleKeyUp} placeholder="email" bind:value={email} />
 
 			{#if !automateUsernameCreation}
 				<span class="text-xs mb-1 pt-2 leading-6">Username</span>
-				<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
+				<input type="text" onkeyup={handleKeyUp} placeholder="username" bind:value={username} />
 			{/if}
 
 			<span class="text-xs mb-1 pt-2 leading-6">Role</span>
-			<ToggleButtonGroup bind:selected class="mb-4" let:item>
-				<ToggleButton
-					value="operator"
-					label="Operator"
-					tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-					{item}
-				/>
-				<ToggleButton
-					value="developer"
-					label="Developer"
-					tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-					{item}
-				/>
-				<ToggleButton
-					value="admin"
-					label="Admin"
-					tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-					{item}
-				/>
+			<ToggleButtonGroup bind:selected class="mb-4">
+				{#snippet children({ item })}
+					<ToggleButton
+						value="operator"
+						label="Operator"
+						tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+						{item}
+					/>
+					<ToggleButton
+						value="developer"
+						label="Developer"
+						tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+						{item}
+					/>
+					<ToggleButton
+						value="admin"
+						label="Admin"
+						tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 			<Button
 				variant="contained"
@@ -129,5 +131,5 @@
 				Add
 			</Button>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/AllFlowLogs.svelte b/frontend/src/lib/components/AllFlowLogs.svelte
index 270ba2bffa..8be5872278 100644
--- a/frontend/src/lib/components/AllFlowLogs.svelte
+++ b/frontend/src/lib/components/AllFlowLogs.svelte
@@ -6,7 +6,11 @@
 	import type { DurationStatus } from './graph'
 	import type { Writable } from 'svelte/store'
 
-	export let states: Writable<Record<string, DurationStatus>> | undefined
+	interface Props {
+		states: Writable<Record<string, DurationStatus>> | undefined
+	}
+
+	let { states }: Props = $props()
 </script>
 
 <div class="flex flex-col">
diff --git a/frontend/src/lib/components/ApiConnectForm.svelte b/frontend/src/lib/components/ApiConnectForm.svelte
index 53a6bd278e..80e452bbf3 100644
--- a/frontend/src/lib/components/ApiConnectForm.svelte
+++ b/frontend/src/lib/components/ApiConnectForm.svelte
@@ -23,31 +23,43 @@
 	import Popover from './meltComponents/Popover.svelte'
 	import Button from './common/button/Button.svelte'
 	import { Loader2, Github, RotateCw, Plus, Minus, Download } from 'lucide-svelte'
-	import { onDestroy } from 'svelte'
+	import { onDestroy, untrack } from 'svelte'
 
-	export let resourceType: string
-	export let resourceTypeInfo: ResourceType | undefined
-	export let args: Record<string, any> | any = {}
-	export let linkedSecret: string | undefined = undefined
-	export let isValid = true
-	export let linkedSecretCandidates: string[] | undefined = undefined
-	export let description: string | undefined = undefined
+	interface Props {
+		resourceType: string
+		resourceTypeInfo: ResourceType | undefined
+		args?: Record<string, any> | any
+		linkedSecret?: string | undefined
+		isValid?: boolean
+		linkedSecretCandidates?: string[] | undefined
+		description?: string | undefined
+	}
 
-	let schema = emptySchema()
-	let notFound = false
+	let {
+		resourceType,
+		resourceTypeInfo,
+		args = $bindable({}),
+		linkedSecret = $bindable(undefined),
+		isValid = $bindable(true),
+		linkedSecretCandidates = undefined,
+		description = $bindable(undefined)
+	}: Props = $props()
 
-	let supabaseWizard = false
+	let schema = $state(emptySchema())
+	let notFound = $state(false)
 
-	let loadingGithubInstallations = false
-	let githubInstallations: GetGlobalConnectedRepositoriesResponse = []
-	let workspaceGithubInstallations: GetGlobalConnectedRepositoriesResponse = []
-	let selectedGHAppAccountId: string | undefined = undefined
-	let selectedGHAppRepository: string | undefined = undefined
-	let githubInstallationUrl: string | undefined = undefined
+	let supabaseWizard = $state(false)
+
+	let loadingGithubInstallations = $state(false)
+	let githubInstallations: GetGlobalConnectedRepositoriesResponse = $state([])
+	let workspaceGithubInstallations: GetGlobalConnectedRepositoriesResponse = $state([])
+	let selectedGHAppAccountId: string | undefined = $state(undefined)
+	let selectedGHAppRepository: string | undefined = $state(undefined)
+	let githubInstallationUrl: string | undefined = $state(undefined)
 	let installationCheckInterval: number | undefined = undefined
-	let isCheckingInstallation = false
-	let importJwt = ''
-	let githubAppPopover: { open: () => void; close: () => void } | null = null
+	let isCheckingInstallation = $state(false)
+	let importJwt = $state('')
+	let githubAppPopover: { open: () => void; close: () => void } | null = $state(null)
 
 	async function loadGithubInstallations() {
 		if (!$enterpriseLicense) return
@@ -159,9 +171,6 @@
 			notFound = true
 		}
 	}
-	$: $workspaceStore && loadSchema()
-
-	$: notFound && rawCode && parseJson()
 
 	function parseJson() {
 		try {
@@ -173,13 +182,9 @@
 			error = e.message
 		}
 	}
-	let error = ''
-	let rawCode = ''
-	let viewJsonSchema = false
-
-	$: rawCode && parseJson()
-
-	$: textFileContent && parseTextFileContent()
+	let error = $state('')
+	let rawCode = $state('')
+	let viewJsonSchema = $state(false)
 
 	function switchTab(asJson: boolean) {
 		viewJsonSchema = asJson
@@ -193,11 +198,8 @@
 		}
 	}
 
-	$: resourceType == 'postgresql' && isSupabaseAvailable()
-	$: resourceType == 'git_repository' && $userStore?.is_admin && loadGithubInstallations()
-
-	let connectionString = ''
-	let validConnectionString = true
+	let connectionString = $state('')
+	let validConnectionString = $state(true)
 	function parseConnectionString(close: (_: any) => void) {
 		const regex =
 			/postgres(?:ql)?:\/\/(?<user>[^:@]+)(?::(?<password>[^@]+))?@(?<host>[^:\/?]+)(?::(?<port>\d+))?\/(?<dbname>[^\?]+)?(?:\?.*sslmode=(?<sslmode>[^&]+))?/
@@ -241,8 +243,8 @@
 		close(null)
 	}
 
-	let rawCodeEditor: SimpleEditor | undefined = undefined
-	let textFileContent: string
+	let rawCodeEditor: SimpleEditor | undefined = $state(undefined)
+	let textFileContent: string | undefined = $state(undefined)
 
 	function parseTextFileContent() {
 		args = {
@@ -250,13 +252,6 @@
 		}
 	}
 
-	$: githubInstallationsNotInWorkspace = githubInstallations.filter((installation) => {
-		return !workspaceGithubInstallations.some(
-			(workspaceInstallation) =>
-				workspaceInstallation.installation_id === installation.installation_id
-		)
-	})
-
 	async function deleteInstallation(installation_id: number) {
 		if (!$workspaceStore) {
 			sendUserToast('Failed to delete installation', true)
@@ -329,6 +324,34 @@
 			}
 		}
 	}
+	$effect(() => {
+		$workspaceStore && untrack(() => loadSchema())
+	})
+	$effect(() => {
+		notFound && rawCode && untrack(() => parseJson())
+	})
+	$effect(() => {
+		rawCode && untrack(() => parseJson())
+	})
+	$effect(() => {
+		textFileContent && untrack(() => parseTextFileContent())
+	})
+	$effect(() => {
+		resourceType == 'postgresql' && untrack(() => isSupabaseAvailable())
+	})
+	$effect(() => {
+		resourceType == 'git_repository' &&
+			$userStore?.is_admin &&
+			untrack(() => loadGithubInstallations())
+	})
+	let githubInstallationsNotInWorkspace = $derived(
+		githubInstallations.filter((installation) => {
+			return !workspaceGithubInstallations.some(
+				(workspaceInstallation) =>
+					workspaceInstallation.installation_id === installation.installation_id
+			)
+		})
+	)
 </script>
 
 {#if !notFound}
@@ -346,7 +369,7 @@
 					placement: 'bottom'
 				}}
 			>
-				<svelte:fragment slot="trigger">
+				{#snippet trigger()}
 					<Button
 						spacingSize="sm"
 						size="xs"
@@ -357,8 +380,8 @@
 					>
 						From connection string
 					</Button>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
+				{/snippet}
+				{#snippet content({ close })}
 					<div class="block text-primary p-4">
 						<div class="w-[550px] flex flex-col items-start gap-1">
 							<div class="flex flex-row gap-1 w-full">
@@ -384,7 +407,7 @@
 							{/if}
 						</div>
 					</div>
-				</svelte:fragment>
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if resourceType == 'postgresql' && supabaseWizard}
@@ -419,7 +442,7 @@
 					}}
 					disabled={!$enterpriseLicense || loadingGithubInstallations}
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<Button
 							color="none"
 							variant="border"
@@ -433,8 +456,8 @@
 						>
 							{$enterpriseLicense ? 'GitHub App' : 'GitHub App (ee only)'}
 						</Button>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
+					{/snippet}
+					{#snippet content({ close })}
 						<div class="block text-primary p-4">
 							<div class="flex flex-col gap-4 w-[600px]">
 								{#if workspaceGithubInstallations.length > 0}
@@ -654,7 +677,7 @@
 								</div>
 							</div>
 						</div>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{:else}
 				<Button
diff --git a/frontend/src/lib/components/AppConnectDrawer.svelte b/frontend/src/lib/components/AppConnectDrawer.svelte
index 4f30737736..82d739129c 100644
--- a/frontend/src/lib/components/AppConnectDrawer.svelte
+++ b/frontend/src/lib/components/AppConnectDrawer.svelte
@@ -61,29 +61,31 @@
 			on:refresh
 			express={expressOAuthSetup}
 		/>
-		<div slot="actions" class="flex gap-1">
-			{#if step > 1}
-				<Button variant="border" on:click={appConnectInner?.back}>Back</Button>
-			{/if}
-			{#if isGoogleSignin}
-				<button {disabled} on:click={appConnectInner?.next}>
-					<img
-						class="h-10 w-auto object-contain"
-						src={darkMode ? '/google_signin_dark.png' : '/google_signin_light.png'}
-						alt="Google sign-in"
-					/>
-				</button>
-			{:else}
-				<Button {disabled} on:click={appConnectInner?.next}>
-					{#if step == 2 && !manual}
-						Connect
-					{:else if step == 1}
-						Next
-					{:else}
-						Save
-					{/if}
-				</Button>
-			{/if}
-		</div>
+		{#snippet actions()}
+			<div class="flex gap-1">
+				{#if step > 1}
+					<Button variant="border" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
+				{/if}
+				{#if isGoogleSignin}
+					<button {disabled} on:click={appConnectInner?.next}>
+						<img
+							class="h-10 w-auto object-contain"
+							src={darkMode ? '/google_signin_dark.png' : '/google_signin_light.png'}
+							alt="Google sign-in"
+						/>
+					</button>
+				{:else}
+					<Button {disabled} on:click={appConnectInner?.next ?? (() => {})}>
+						{#if step == 2 && !manual}
+							Connect
+						{:else if step == 1}
+							Next
+						{:else}
+							Save
+						{/if}
+					</Button>
+				{/if}
+			</div>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/AppConnectInner.svelte b/frontend/src/lib/components/AppConnectInner.svelte
index 6f73fff916..5d9bbcbb29 100644
--- a/frontend/src/lib/components/AppConnectInner.svelte
+++ b/frontend/src/lib/components/AppConnectInner.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { userStore, workspaceStore } from '$lib/stores'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import {
@@ -27,14 +29,25 @@
 	import { apiTokenApps, forceSecretValue, linkedSecretValue } from './app_connect'
 	import type { SchemaProperty } from '$lib/common'
 
-	export let step = 1
-	export let resourceType = ''
-	export let isGoogleSignin = false
-	export let disabled = false
-	export let manual = true
-	export let express = false
+	interface Props {
+		step?: number
+		resourceType?: string
+		isGoogleSignin?: boolean
+		disabled?: boolean
+		manual?: boolean
+		express?: boolean
+	}
 
-	let isValid = true
+	let {
+		step = $bindable(1),
+		resourceType = $bindable(''),
+		isGoogleSignin = $bindable(false),
+		disabled = $bindable(false),
+		manual = $bindable(true),
+		express = false
+	}: Props = $props()
+
+	let isValid = $state(true)
 
 	const nativeLanguagesCategory = [
 		'postgresql',
@@ -46,15 +59,15 @@
 		'oracledb'
 	]
 
-	let filter = ''
-	let value: string = ''
+	let filter = $state('')
+	let value: string = $state('')
 	let valueToken: TokenResponse | undefined = undefined
-	let connects: string[] | undefined = undefined
+	let connects: string[] | undefined = $state(undefined)
 	let connectsManual:
 		| [string, { img?: string; instructions: string[]; key?: string }][]
-		| undefined = undefined
-	let args: any = {}
-	let renderDescription = true
+		| undefined = $state(undefined)
+	let args: any = $state({})
+	let renderDescription = $state(true)
 
 	function computeCandidates(resourceType: string, argsKeys: string[], passwords: string[]) {
 		return apiTokenApps[resourceType]?.linkedSecret
@@ -63,11 +76,11 @@
 					(x) =>
 						passwords.includes(x) ||
 						['token', 'secret', 'key', 'pass', 'private'].some((y) => x.toLowerCase().includes(y))
-			  )
+				)
 	}
 
-	let linkedSecret: string | undefined = undefined
-	let linkedSecretCandidates: string[] | undefined = undefined
+	let linkedSecret: string | undefined = $state(undefined)
+	let linkedSecretCandidates: string[] | undefined = $state(undefined)
 	function computeLinkedSecret(resourceType: string, argsKeys: string[], passwords: string[]) {
 		linkedSecretCandidates = computeCandidates(resourceType, argsKeys, passwords)
 		return (
@@ -76,14 +89,14 @@
 		)
 	}
 
-	let scopes: string[] = []
+	let scopes: string[] = $state([])
 	let extra_params: [string, string][] = []
-	let path: string
-	let description = ''
+	let path: string = $state('')
+	let description = $state('')
 
-	let resourceTypeInfo: ResourceType | undefined = undefined
+	let resourceTypeInfo: ResourceType | undefined = $state(undefined)
 
-	let pathError = ''
+	let pathError = $state('')
 
 	export async function open(rt?: string) {
 		if (!rt) {
@@ -112,7 +125,9 @@
 	async function loadConnects() {
 		if (!connects) {
 			try {
-				connects = (await OauthService.listOauthConnects()).filter((x) => x != 'supabase_wizard')
+				connects = (await OauthService.listOauthConnects())
+					.filter((x) => x != 'supabase_wizard')
+					.sort((a, b) => a.localeCompare(b))
 			} catch (e) {
 				connects = []
 				console.error('Error loading OAuth connects', e)
@@ -122,27 +137,31 @@
 
 	const connectAndManual = ['gitlab']
 
-	$: isGoogleSignin =
-		step == 1 &&
-		(resourceType == 'google' ||
-			resourceType == 'gmail' ||
-			resourceType == 'gcal' ||
-			resourceType == 'gdrive' ||
-			resourceType == 'gsheets')
+	run(() => {
+		isGoogleSignin =
+			step == 1 &&
+			(resourceType == 'google' ||
+				resourceType == 'gmail' ||
+				resourceType == 'gcal' ||
+				resourceType == 'gdrive' ||
+				resourceType == 'gsheets')
+	})
 
-	$: disabled =
-		(step == 1 && resourceType == '') ||
-		(step == 2 &&
-			value == '' &&
-			args &&
-			args['token'] == '' &&
-			args['password'] == '' &&
-			args['api_key'] == '' &&
-			args['key'] == '' &&
-			linkedSecret != undefined) ||
-		step == 3 ||
-		(step == 4 && pathError != '') ||
-		!isValid
+	run(() => {
+		disabled =
+			(step == 1 && resourceType == '') ||
+			(step == 2 &&
+				value == '' &&
+				args &&
+				args['token'] == '' &&
+				args['password'] == '' &&
+				args['api_key'] == '' &&
+				args['key'] == '' &&
+				linkedSecret != undefined) ||
+			step == 3 ||
+			(step == 4 && pathError != '') ||
+			!isValid
+	})
 
 	export async function loadResourceTypes() {
 		if (connectsManual) {
@@ -154,14 +173,18 @@
 
 		connectsManual = availableRts
 			.filter((x) => connectAndManual.includes(x) || !Object.keys(connects ?? {}).includes(x))
-			.map((x) => [
-				x,
-				apiTokenApps[x] ?? {
-					instructions: '',
-					img: undefined,
-					linkedSecret: undefined
-				}
-			])
+			.map(
+				(x) =>
+					[
+						x,
+						apiTokenApps[x] ?? {
+							instructions: '',
+							img: undefined,
+							linkedSecret: undefined
+						}
+					] as [string, { img?: string; instructions: string[]; key?: string }]
+			)
+			.sort((a, b) => a[0].localeCompare(b[0]))
 		const filteredNativeLanguages = filteredConnectsManual?.filter(
 			(o) => nativeLanguagesCategory?.includes(o[0]) ?? false
 		)
@@ -177,7 +200,7 @@
 	}
 
 	function popupListener(event) {
-		console.log('Received oauth popup message')
+		console.log('Received oauth popup message', event)
 		let data = event.data
 		if (event.origin == null || event.origin !== window.location.origin) {
 			console.log(
@@ -280,6 +303,9 @@
 			// 	dispatch('close')
 			// }
 		} else {
+			if (!path) {
+				throw Error('Path is not set')
+			}
 			let exists = await VariableService.existsVariable({
 				workspace: $workspaceStore!,
 				path
@@ -370,31 +396,29 @@
 		}
 	}
 
-	const dispatch = createEventDispatcher()
+	const dispatch = createEventDispatcher<{ error: string; refresh: string; close: void }>()
 
-	let filteredConnects: { key: string }[] = []
+	let filteredConnects: { key: string }[] = $state([])
 	let filteredConnectsManual: [string, { img?: string; instructions: string[]; key?: string }][] =
-		[]
+		$state([])
 
-	let editScopes = false
+	let editScopes = $state(false)
 </script>
 
 {#if !express}
 	<SearchItems
 		{filter}
 		items={connects
-			? connects
-					.sort((a, b) => a.localeCompare(b))
-					.map((key) => ({
-						key
-					}))
+			? connects.map((key) => ({
+					key
+				}))
 			: undefined}
 		bind:filteredItems={filteredConnects}
 		f={(x) => x.key}
 	/>
 	<SearchItems
 		{filter}
-		items={connectsManual?.sort((a, b) => a[0].localeCompare(b[0]))}
+		items={connectsManual}
 		bind:filteredItems={filteredConnectsManual}
 		f={(x) => x[0]}
 	/>
@@ -487,6 +511,8 @@
 					{#if !nativeLanguagesCategory.includes(key)}
 						<!-- Exclude specific items -->
 						<Button
+							aiId={`app-connect-inner-${key}`}
+							aiDescription={`Connect to ${key}`}
 							size="sm"
 							variant="border"
 							color={key === resourceType ? 'blue' : 'light'}
@@ -552,7 +578,8 @@
 		{#if renderDescription}
 			<div>
 				<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
-				<textarea use:autosize bind:value={description} placeholder={'Resource description'}></textarea>
+				<textarea use:autosize bind:value={description} placeholder={'Resource description'}
+				></textarea>
 			</div>
 		{:else if description == undefined || description == ''}
 			<div class="text-sm text-tertiary">No description provided</div>
@@ -587,7 +614,7 @@
 			</div>
 			<h3 class="mb-4 flex gap-4"
 				>Scopes <button
-					on:click={() => {
+					onclick={() => {
 						editScopes = !editScopes
 					}}><Pen size={14} /></button
 				></h3
diff --git a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
index 7a67f560f0..8e151ee83d 100644
--- a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
+++ b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
@@ -5,17 +5,21 @@
 	import { workspaceStore } from '$lib/stores'
 	import { onMount } from 'svelte'
 
-	export let resourceType: string | undefined = undefined
-	export let workspace: string
-	export let express = false
+	interface Props {
+		resourceType?: string | undefined
+		workspace: string
+		express?: boolean
+	}
 
-	let step = 1
-	let disabled = false
-	let manual = true
+	let { resourceType = $bindable(undefined), workspace, express = false }: Props = $props()
 
-	let appConnect: AppConnectInner | undefined = undefined
+	let step = $state(1)
+	let disabled = $state(false)
+	let manual = $state(true)
 
-	let darkMode: boolean = false
+	let appConnect: AppConnectInner | undefined = $state(undefined)
+
+	let darkMode: boolean = $state(false)
 
 	if (workspace) {
 		$workspaceStore = workspace
diff --git a/frontend/src/lib/components/ArgEnum.svelte b/frontend/src/lib/components/ArgEnum.svelte
index 2cd5501c1c..b1f94d39f0 100644
--- a/frontend/src/lib/components/ArgEnum.svelte
+++ b/frontend/src/lib/components/ArgEnum.svelte
@@ -1,60 +1,67 @@
 <script lang="ts">
 	import type { EnumType } from '$lib/common'
-	import AutoComplete from 'simple-svelte-autocomplete'
 	import { createEventDispatcher } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
+	import Select from './Select.svelte'
 
-	export let disabled: boolean
-	export let value: any
-	export let enum_: EnumType
-	export let autofocus: boolean | null
-	export let defaultValue: string | undefined
-	export let valid: boolean
-	export let create: boolean
-	export let required: boolean
-	export let enumLabels: Record<string, string> | undefined = undefined
+	interface Props {
+		disabled: boolean
+		value: string | undefined
+		enum_: EnumType
+		autofocus: boolean | null
+		defaultValue: string | undefined
+		valid: boolean
+		create: boolean
+		enumLabels?: Record<string, string> | undefined
+	}
+
+	let {
+		disabled,
+		value = $bindable(),
+		enum_,
+		autofocus,
+		defaultValue,
+		valid,
+		create,
+		enumLabels = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
-	let customItems: string[] = []
+	let customItems: string[] = $state([])
 
-	function onCreate(newItem: string) {
-		console.log(newItem)
-		customItems = [...customItems, newItem]
+	let items = $derived.by(() => {
+		const l = [...(enum_ ? enum_ : []), ...customItems].map((item) => ({
+			value: item,
+			label: enumLabels?.[item] ?? item
+		}))
+		if (create && filterText && l.every((i) => i.value !== filterText)) {
+			l.push({ value: filterText, label: `Add new: ${filterText}` })
+		}
+		return l
+	})
 
-		return newItem
-	}
+	let filterText = $state('')
 </script>
 
 <div class="w-full flex-col">
 	<div class="w-full">
-		<AutoComplete
-			items={[...(required ? [] : ['']), ...(enum_ ? enum_ : []), ...customItems]}
-			labelFunction={(val) => (enumLabels ? enumLabels[val] ?? val : val)}
-			bind:selectedItem={value}
-			inputClassName={twMerge(
-				'bg-surface-secondary flex',
-				valid
-					? ''
-					: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
-			)}
-			value={value ?? defaultValue}
-			hideArrow={true}
-			dropdownClassName="!text-sm !py-2 !rounded-sm !border-gray-200 !border !shadow-md !bg-surface-primary"
-			className="w-full"
-			noInputStyles
-			onFocus={() => {
-				dispatch('focus')
-			}}
-			onBlur={() => {
-				dispatch('blur')
-			}}
-			{create}
-			{required}
-			{onCreate}
+		<Select
+			inputClass={valid ? '' : '!border-red-500/60'}
+			clearable
 			{disabled}
-			{autofocus}
-			createText="Press enter to use this non-predefined value"
+			autofocus={autofocus ?? undefined}
+			bind:filterText
+			{items}
+			bind:value={
+				() => value ?? defaultValue,
+				(newValue) => {
+					if (newValue && items.findIndex((i) => i.value === newValue) === -1)
+						customItems.push(newValue)
+					value = newValue
+				}
+			}
+			onFocus={() => dispatch('focus')}
+			onBlur={() => dispatch('blur')}
 		/>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
index 16ba420372..feadd419cd 100644
--- a/frontend/src/lib/components/ArgInfo.svelte
+++ b/frontend/src/lib/components/ArgInfo.svelte
@@ -8,9 +8,13 @@
 	import Tooltip from './Tooltip.svelte'
 	import { Button, DrawerContent } from './common'
 
-	export let value: any
-	let jsonViewer: Drawer
-	let jsonViewerContent: any | undefined
+	interface Props {
+		value: any
+	}
+
+	let { value }: Props = $props()
+	let jsonViewer: Drawer | undefined = $state()
+	let jsonViewerContent: any | undefined = $state()
 
 	function isString(value: any) {
 		return typeof value === 'string' || value instanceof String
@@ -33,7 +37,7 @@
 
 <Drawer bind:this={jsonViewer} size="800px">
 	<DrawerContent title="Argument Details" on:close={jsonViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				on:click={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
 				color="light"
@@ -42,7 +46,7 @@
 			>
 				Copy
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 		{#if isString(jsonViewerContent)}
 			<pre>{jsonViewerContent}</pre>
 		{:else}
@@ -61,17 +65,17 @@
 {:else if isString(value) && value.startsWith('$res:')}
 	<button
 		class="text-xs text-blue-500"
-		on:click={async () => {
+		onclick={async () => {
 			await getResource(value.substring('$res:'.length))
-			jsonViewer.toggleDrawer()
+			jsonViewer?.toggleDrawer()
 		}}>{value}</button
 	>
 {:else if isString(value) && value.startsWith('$var:')}
 	<button
 		class="text-xs text-blue-500"
-		on:click={async () => {
+		onclick={async () => {
 			await getVariable(value.substring('$res:'.length))
-			jsonViewer.toggleDrawer()
+			jsonViewer?.toggleDrawer()
 		}}>{value}</button
 	>
 {:else if typeof value !== 'object'}
@@ -80,9 +84,9 @@
 		{#if JSON.stringify(value).length > 80}
 			<button
 				class="text-xs text-blue-500"
-				on:click={() => {
+				onclick={() => {
 					jsonViewerContent = value
-					jsonViewer.toggleDrawer()
+					jsonViewer?.toggleDrawer()
 				}}>See expanded</button
 			>
 		{/if}
@@ -92,9 +96,9 @@
 		{#if JSON.stringify(value).length > 120}
 			<button
 				class="text-xs absolute top-0 right-4 text-tertiary"
-				on:click={() => {
+				onclick={() => {
 					jsonViewerContent = value
-					jsonViewer.toggleDrawer()
+					jsonViewer?.toggleDrawer()
 				}}><Expand size={18} /></button
 			>
 		{/if}
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 2f4a9af993..0670de684f 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation, createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import type { EnumType, SchemaProperty } from '$lib/common'
 	import {
 		setInputCat as computeInputCat,
@@ -7,7 +10,7 @@
 		getSchemaFromProperties
 	} from '$lib/utils'
 	import { DollarSign, Pipette, Plus, X, Check, Loader2 } from 'lucide-svelte'
-	import { createEventDispatcher, onMount, tick } from 'svelte'
+	import { createEventDispatcher, onMount, tick, untrack } from 'svelte'
 	import Multiselect from 'svelte-multiselect'
 	import { fade } from 'svelte/transition'
 	import { Button, SecondsInput } from './common'
@@ -36,99 +39,166 @@
 	import { deepEqual } from 'fast-equals'
 	import DynSelect from './DynSelect.svelte'
 	import type { Script } from '$lib/gen'
-	import type { SchemaDiff } from '$lib/components/schema/schemaUtils'
+	import type { SchemaDiff } from '$lib/components/schema/schemaUtils.svelte'
 	import type { ComponentCustomCSS } from './apps/types'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let label: string = ''
-	export let value: any
-	export let defaultValue: any = undefined
+	interface Props {
+		label?: string
+		value: any
+		defaultValue?: any
+		description?: string
+		format?: string
+		contentEncoding?: 'base64' | 'binary' | undefined
+		type?: string | undefined
+		oneOf?: SchemaProperty[] | undefined
+		required?: boolean
+		pattern?: undefined | string
+		valid?: boolean
+		enum_?: EnumType
+		disabled?: boolean
+		itemsType?:
+			| {
+					type?: 'string' | 'number' | 'bytes' | 'object' | 'resource'
+					contentEncoding?: 'base64'
+					enum?: string[]
+					multiselect?: string[]
+					resourceType?: string
+					properties?: { [name: string]: SchemaProperty }
+			  }
+			| undefined
+		displayHeader?: boolean
+		properties?: { [name: string]: SchemaProperty } | undefined
+		nestedRequired?: string[] | undefined
+		autofocus?: boolean | null
+		compact?: boolean
+		password?: boolean
+		pickForField?: string | undefined
+		variableEditor?: VariableEditor | undefined
+		itemPicker?: ItemPicker | undefined
+		noMargin?: boolean
+		extra?: Record<string, any>
+		minW?: boolean
+		prettifyHeader?: boolean
+		resourceTypes: string[] | undefined
+		disablePortal?: boolean
+		showSchemaExplorer?: boolean
+		simpleTooltip?: string | undefined
+		customErrorMessage?: string | undefined
+		onlyMaskPassword?: boolean
+		nullable?: boolean
+		title?: string | undefined
+		placeholder?: string | undefined
+		order?: string[] | undefined
+		editor?: SimpleEditor | undefined
+		orderEditable?: boolean
+		shouldDispatchChanges?: boolean
+		noDefaultOnSelectFirst?: boolean
+		helperScript?:
+			| { type: 'inline'; path?: string; lang: Script['language']; code: string }
+			| { type: 'hash'; hash: string }
+			| undefined
+		otherArgs?: Record<string, any>
+		lightHeader?: boolean
+		diffStatus?: SchemaDiff | undefined
+		hideNested?: boolean
+		nestedParent?: { label: string; nestedParent: any | undefined } | undefined
+		nestedClasses?: string
+		displayType?: boolean
+		css?: ComponentCustomCSS<'schemaformcomponent'> | undefined
+		appPath?: string | undefined
+		computeS3ForceViewerPolicies?:
+			| (() =>
+					| {
+							allowed_resources: string[]
+							allow_user_resources: boolean
+							allow_workspace_resource: boolean
+							file_key_regex: string
+					  }
+					| undefined)
+			| undefined
+		workspace?: string | undefined
+		actions?: import('svelte').Snippet
+	}
 
-	export let description: string = ''
-	export let format: string = ''
-	export let contentEncoding: 'base64' | 'binary' | undefined = undefined
-	export let type: string | undefined = undefined
-	export let oneOf: SchemaProperty[] | undefined = undefined
-	export let required = false
-	export let pattern: undefined | string = undefined
-	export let valid = true
-	export let enum_: EnumType = undefined
-	export let disabled = false
-	export let itemsType:
-		| {
-				type?: 'string' | 'number' | 'bytes' | 'object' | 'resource'
-				contentEncoding?: 'base64'
-				enum?: string[]
-				multiselect?: string[]
-				resourceType?: string
-				properties?: { [name: string]: SchemaProperty }
-		  }
-		| undefined = undefined
+	let {
+		label = '',
+		value = $bindable(),
+		defaultValue = $bindable(undefined),
+		description = $bindable(undefined),
+		format = $bindable(undefined),
+		contentEncoding = undefined,
+		type = undefined,
+		oneOf = $bindable(undefined),
+		required = false,
+		pattern = $bindable(undefined),
+		valid = $bindable(undefined),
+		enum_ = $bindable(undefined),
+		disabled = false,
+		itemsType = $bindable(undefined),
+		displayHeader = true,
+		properties = $bindable(undefined),
+		nestedRequired = undefined,
+		autofocus = null,
+		compact = false,
+		password = false,
+		pickForField = $bindable(undefined),
+		variableEditor = undefined,
+		itemPicker = undefined,
+		noMargin = false,
+		extra = {},
+		minW = true,
+		prettifyHeader = false,
+		resourceTypes,
+		disablePortal = false,
+		showSchemaExplorer = false,
+		simpleTooltip = undefined,
+		customErrorMessage = undefined,
+		onlyMaskPassword = false,
+		nullable = false,
+		title = $bindable(undefined),
+		placeholder = $bindable(undefined),
+		order = $bindable(undefined),
+		editor = $bindable(undefined),
+		orderEditable = false,
+		shouldDispatchChanges = false,
+		noDefaultOnSelectFirst = false,
+		helperScript = undefined,
+		otherArgs = {},
+		lightHeader = false,
+		diffStatus = undefined,
+		hideNested = false,
+		nestedParent = undefined,
+		nestedClasses = '',
+		displayType = true,
+		css = undefined,
+		appPath = undefined,
+		computeS3ForceViewerPolicies = undefined,
+		workspace = undefined,
+		actions
+	}: Props = $props()
 
-	export let displayHeader = true
-	export let properties: { [name: string]: SchemaProperty } | undefined = undefined
-	export let nestedRequired: string[] | undefined = undefined
-	export let autofocus: boolean | null = null
-	export let compact = false
-	export let password = false
-	export let pickForField: string | undefined = undefined
-	export let variableEditor: VariableEditor | undefined = undefined
-	export let itemPicker: ItemPicker | undefined = undefined
-	export let noMargin = false
-	export let extra: Record<string, any> = {}
-	export let minW = true
-	export let prettifyHeader = false
-	export let resourceTypes: string[] | undefined
-	export let disablePortal = false
-	export let showSchemaExplorer = false
-	export let simpleTooltip: string | undefined = undefined
-	export let customErrorMessage: string | undefined = undefined
-	export let onlyMaskPassword = false
-	export let nullable: boolean = false
-	export let title: string | undefined = undefined
-	export let placeholder: string | undefined = undefined
-	export let order: string[] | undefined = undefined
-	export let editor: SimpleEditor | undefined = undefined
-	export let orderEditable = false
-	export let shouldDispatchChanges: boolean = false
-	export let noDefaultOnSelectFirst: boolean = false
-	export let helperScript:
-		| { type: 'inline'; path?: string; lang: Script['language']; code: string }
-		| { type: 'hash'; hash: string }
-		| undefined = undefined
-	export let otherArgs: Record<string, any> = {}
-	export let lightHeader = false
-	export let diffStatus: SchemaDiff | undefined = undefined
-	export let hideNested = false
-	export let nestedParent: { label: string; nestedParent: any | undefined } | undefined = undefined
-	export let nestedClasses = ''
-	export let displayType = true
-	export let css: ComponentCustomCSS<'schemaformcomponent'> | undefined = undefined
-	export let appPath: string | undefined = undefined
-	export let computeS3ForceViewerPolicies:
-		| (() =>
-				| {
-						allowed_resources: string[]
-						allow_user_resources: boolean
-						allow_workspace_resource: boolean
-						file_key_regex: string
-				  }
-				| undefined)
-		| undefined = undefined
-	export let workspace: string | undefined = undefined
+	$effect(() => {
+		if (description == undefined) {
+			description = ''
+		}
+		if (format == undefined) {
+			format = ''
+		}
+		if (valid == undefined) {
+			valid = true
+		}
+	})
 
-	$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding)
-
-	let oneOfSelected: string | undefined = undefined
+	let oneOfSelected: string | undefined = $state(undefined)
+	let tagKey = $derived(
+		oneOf?.find((o) => Object.keys(o.properties ?? {})?.includes('kind')) ? 'kind' : 'label'
+	)
 	async function updateOneOfSelected(oneOf: SchemaProperty[] | undefined) {
 		if (
 			oneOf &&
 			oneOf.length >= 2 &&
 			(!oneOfSelected || !oneOf.some((o) => o.title === oneOfSelected) || !value)
 		) {
-			const tagKey = oneOf.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
-				? 'kind'
-				: 'label'
 			if (value && value[tagKey] && oneOf.some((o) => o.title === value[tagKey])) {
 				const existingValue = JSON.parse(JSON.stringify(value))
 				oneOfSelected = value[tagKey]
@@ -142,10 +212,6 @@
 		}
 	}
 
-	$: updateOneOfSelected(oneOf)
-
-	$: oneOf && value && onOneOfChange()
-
 	function onOneOfChange() {
 		const label = value?.['label']
 		const kind = value?.['kind']
@@ -157,54 +223,50 @@
 	}
 
 	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
-	let ignoreValueUndefined = false
-	let error: string = ''
-	let s3FilePicker: S3FilePicker
-	let s3FileUploadRawMode: false
-	let isListJson = false
-	let hasIsListJsonChanged = false
+	let ignoreValueUndefined = $state(false)
+	let error: string = $state('')
+	let s3FilePicker: S3FilePicker | undefined = $state()
+	let s3FileUploadRawMode: boolean = $state(false)
+	let isListJson = $state(false)
+	let hasIsListJsonChanged = $state(false)
 
-	let el: HTMLTextAreaElement | undefined = undefined
+	let el: HTMLTextAreaElement | undefined = $state(undefined)
 
-	let rawValue: string | undefined = undefined
+	let rawValue: string | undefined = $state(undefined)
 
-	function computeDefaultValue(
-		nvalue?: any,
-		inputCat?: string,
-		defaultValue?: any,
-		nnullable?: boolean
-	) {
+	let lastValue: any = null
+
+	function computeDefaultValue(inputCat?: string, defaultValue?: any, nnullable?: boolean) {
+		let nvalue: any = null
 		if (label == 'toString' && typeof value == 'function') {
-			value = undefined
+			nvalue = undefined
 		}
 		if ((value == undefined || value == null) && !ignoreValueUndefined) {
-			value = structuredClone(defaultValue)
+			nvalue = structuredClone($state.snapshot(defaultValue))
 			if (defaultValue === undefined || defaultValue === null) {
 				if (inputCat === 'string') {
-					value = nullable ? null : ''
+					nvalue = nullable ? null : ''
 				} else if (inputCat == 'enum' && required) {
-					value = enum_?.[0]
+					nvalue = enum_?.[0]
 				} else if (inputCat == 'boolean') {
-					value = false
+					nvalue = false
 				} else if (inputCat == 'list') {
-					value = []
+					nvalue = []
 				}
 			} else if (inputCat === 'object') {
 				evalValueToRaw()
 			}
 		}
 
-		if (nnullable && type === 'string' && value === '') {
+		if (nnullable && type === 'string' && value === '' && nvalue == null) {
 			value = null
+		} else if (nvalue != null && !deepEqual(nvalue, value)) {
+			value = nvalue
+			lastValue = value
 		}
 	}
 
-	$: computeDefaultValue(value, inputCat, defaultValue, nullable)
-
-	let lastValue: any = undefined
-
 	// By setting isListJson to true, we can render inputs even if the value is not an array of the correct type
 	// This avoids the issue of the input being rendered as a string with value: [object Object], or as a number with value: NaN
 	function checkArrayValueType() {
@@ -233,16 +295,7 @@
 		lastValue = value
 	}
 
-	$: !isListJson &&
-		inputCat === 'list' &&
-		value != lastValue &&
-		itemsType?.type &&
-		!hasIsListJsonChanged &&
-		checkArrayValueType()
-
-	$: defaultValue != undefined && handleDefaultValueChange()
-
-	let oldDefaultValue = structuredClone(defaultValue)
+	let oldDefaultValue = structuredClone($state.snapshot(defaultValue))
 	function handleDefaultValueChange() {
 		if (
 			deepEqual(value, oldDefaultValue) &&
@@ -251,7 +304,7 @@
 		) {
 			value = defaultValue
 		}
-		oldDefaultValue = structuredClone(defaultValue)
+		oldDefaultValue = structuredClone($state.snapshot(defaultValue))
 	}
 
 	function isObjectCat(inputCat?: string) {
@@ -286,11 +339,6 @@
 	}
 
 	let setCodeDisabled = false
-	$: (inputCat &&
-		(isObjectCat(inputCat) || isRawStringEditor(inputCat)) &&
-		!oneOf &&
-		evalValueToRaw()) ||
-		value
 
 	let timeout: NodeJS.Timeout | undefined = undefined
 	function setNewValueFromCode(nvalue: any) {
@@ -305,7 +353,6 @@
 	}
 
 	onMount(() => {
-		computeDefaultValue()
 		evalValueToRaw()
 	})
 
@@ -389,22 +436,62 @@
 		e.stopPropagation()
 	}
 
-	let redraw = 0
-	let itemsLimit = 50
-
-	$: validateInput(pattern, value, required)
+	let redraw = $state(0)
+	let itemsLimit = $state(50)
 
 	let oldValue = value
 
 	function compareValues(value) {
 		if (!deepEqual(oldValue, value)) {
 			oldValue = value
-			dispatchIfMounted('change')
+			dispatch('change')
 		}
 	}
 
 	let debounced = debounce(() => compareValues(value), 50)
-	$: shouldDispatchChanges && debounced(value)
+	let inputCat = $derived(computeInputCat(type, format, itemsType?.type, enum_, contentEncoding))
+	$effect(() => {
+		oneOf && untrack(() => updateOneOfSelected(oneOf))
+	})
+	$effect(() => {
+		oneOf && value && untrack(() => onOneOfChange())
+	})
+
+	$effect.pre(() => {
+		value
+		let args = [inputCat, defaultValue, nullable]
+
+		untrack(() => {
+			if (deepEqual(value, lastValue)) return
+			computeDefaultValue(...args)
+		})
+	})
+	$effect.pre(() => {
+		!isListJson &&
+			inputCat === 'list' &&
+			value != lastValue &&
+			itemsType?.type &&
+			!hasIsListJsonChanged &&
+			untrack(() => checkArrayValueType())
+	})
+	$effect.pre(() => {
+		defaultValue != undefined && untrack(() => handleDefaultValueChange())
+	})
+	$effect.pre(() => {
+		;(inputCat &&
+			(isObjectCat(inputCat) || isRawStringEditor(inputCat)) &&
+			!oneOf &&
+			untrack(() => evalValueToRaw())) ||
+			value
+	})
+
+	$effect(() => {
+		let args = [pattern, value, required] as const
+		untrack(() => validateInput(...args))
+	})
+	$effect(() => {
+		shouldDispatchChanges && debounced(value)
+	})
 </script>
 
 <S3FilePicker
@@ -417,7 +504,7 @@
 	readOnlyMode={false}
 />
 
-<!-- svelte-ignore a11y-autofocus -->
+<!-- svelte-ignore a11y_autofocus -->
 <div
 	class={twMerge(
 		'flex flex-col w-full rounded-md relative',
@@ -441,17 +528,21 @@
 		>
 			<button
 				class="p-1 bg-green-500 text-white hover:bg-green-600"
-				on:click|preventDefault|stopPropagation={() => {
-					dispatch('acceptChange', { label, nestedParent })
-				}}
+				onclick={stopPropagation(
+					preventDefault(() => {
+						dispatch('acceptChange', { label, nestedParent })
+					})
+				)}
 			>
 				<Check size={14} />
 			</button>
 			<button
 				class="p-1 hover:bg-red-500 hover:text-white"
-				on:click|preventDefault|stopPropagation={() => {
-					dispatch('rejectChange', { label, nestedParent })
-				}}
+				onclick={stopPropagation(
+					preventDefault(() => {
+						dispatch('rejectChange', { label, nestedParent })
+					})
+				)}
 			>
 				<X size={14} />
 			</button>
@@ -502,11 +593,11 @@
 				<div class="relative w-full">
 					<input
 						{autofocus}
-						on:focus
-						on:blur
+						onfocus={bubble('focus')}
+						onblur={bubble('blur')}
 						{disabled}
 						type="number"
-						on:keydown={() => {
+						onkeydown={() => {
 							ignoreValueUndefined = true
 						}}
 						class={valid
@@ -545,6 +636,9 @@
 								outerDivClass={'dark:!border-gray-500 !border-gray-300'}
 								{disabled}
 								bind:selected={value}
+								onremove={(e) => {
+									if (Array.isArray(value)) value = value.filter((v) => v !== e.option)
+								}}
 								options={itemsType?.multiselect ?? []}
 								selectedOptionsDraggable={true}
 								onopen={() => {
@@ -552,14 +646,17 @@
 								}}
 							/>
 						</div>
-					{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}
+					{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && (Array.isArray(value) || value == undefined)}
 						<div class="items-start">
 							<Multiselect
 								ulOptionsClass={'p-2 !bg-surface-secondary'}
 								outerDivClass={'dark:!border-gray-500 !border-gray-300'}
 								{disabled}
+								onremove={(e) => {
+									if (Array.isArray(value)) value = value.filter((v) => v !== e.option)
+								}}
 								bind:selected={
-									() => [...value],
+									() => [...(value ?? [])],
 									(v) => {
 										if (!deepEqual(v, value)) {
 											value = v
@@ -610,7 +707,7 @@
 													<input
 														type="file"
 														class="my-6"
-														on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+														onchange={(x) => fileChanged(x, (val) => (value[i] = val))}
 														multiple={false}
 													/>
 												{:else if itemsType?.type == 'object' && itemsType?.resourceType === undefined && itemsType?.properties === undefined}
@@ -624,7 +721,6 @@
 													{/await}
 												{:else if Array.isArray(itemsType?.enum)}
 													<ArgEnum
-														required
 														create={extra['disableCreate'] != true}
 														on:focus={() => {
 															dispatch('focus')
@@ -633,7 +729,7 @@
 															dispatch('blur')
 														}}
 														{defaultValue}
-														{valid}
+														valid={valid ?? true}
 														{disabled}
 														{autofocus}
 														bind:value={value[i]}
@@ -680,7 +776,7 @@
 													transition:fade|local={{ duration: 100 }}
 													class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
 													aria-label="Clear"
-													on:click={() => {
+													onclick={() => {
 														value = value.filter((_, index) => index !== i)
 														redraw += 1
 													}}
@@ -691,7 +787,7 @@
 										{/if}
 									{/each}
 									{#if value.length > itemsLimit}
-										<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
+										<button onclick={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
 											>{itemsLimit}/{value.length}: Load 50 more...</button
 										>
 									{/if}
@@ -754,16 +850,16 @@
 				args={otherArgs}
 				{helperScript}
 				bind:value
-				entrypoint={format.substring('dynselect_'.length)}
+				entrypoint={format?.substring('dynselect_'.length) ?? ''}
 			/>
 		{:else if inputCat == 'resource-object' && resourceTypes == undefined}
 			<span class="text-2xs text-tertiary">Loading resource types...</span>
-		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
+		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
 			<ObjectResourceInput
 				{defaultValue}
 				selectFirst={!noDefaultOnSelectFirst}
 				{disablePortal}
-				{format}
+				format={format ?? ''}
 				bind:value
 				bind:editor
 				on:clear={() => {
@@ -771,7 +867,7 @@
 				}}
 				{showSchemaExplorer}
 			/>
-		{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format
+		{:else if inputCat == 'resource-object' && format && format.split('-').length > 1 && format
 				.replace('resource-', '')
 				.replace('_', '')
 				.toLowerCase() == 's3object'}
@@ -855,11 +951,12 @@
 									: 'label'
 								value = { ...toKeep, [tagKey]: detail }
 							}}
-							let:item
 						>
-							{#each oneOf as obj}
-								<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
-							{/each}
+							{#snippet children({ item })}
+								{#each oneOf as obj}
+									<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
+								{/each}
+							{/snippet}
 						</ToggleButtonGroup>
 						{#if oneOfSelected}
 							{@const objIdx = oneOf.findIndex((o) => o.title === oneOfSelected)}
@@ -873,13 +970,18 @@
 												{onlyMaskPassword}
 												{disablePortal}
 												{disabled}
-												schema={{
-													properties: obj.properties,
-													order: obj.order,
-													$schema: '',
-													required: obj.required ?? [],
-													type: 'object'
-												}}
+												bind:schema={
+													() => ({
+														properties: obj.properties ?? {},
+														order: obj.order,
+														$schema: '',
+														required: obj.required ?? [],
+														type: 'object'
+													}),
+													() => {
+														dispatch('nestedChange')
+													}
+												}
 												bind:args={value}
 												dndType={`nested-${title}`}
 												hiddenArgs={['label', 'kind']}
@@ -889,9 +991,6 @@
 														oneOf[objIdx].order = keys
 													}
 												}}
-												on:change={() => {
-													dispatch('nestedChange')
-												}}
 												on:nestedChange
 												{shouldDispatchChanges}
 											/>
@@ -909,7 +1008,12 @@
 													required: obj.required ?? [],
 													type: 'object'
 												}}
-												bind:args={value}
+												bind:args={
+													() => value,
+													(v) => {
+														value = { ...v, [tagKey]: oneOfSelected }
+													}
+												}
 												{shouldDispatchChanges}
 												on:change={() => {
 													dispatch('nestedChange')
@@ -971,22 +1075,24 @@
 							{onlyMaskPassword}
 							{disablePortal}
 							{disabled}
-							schema={{
-								properties,
-								$schema: '',
-								required: nestedRequired ?? [],
-								type: 'object',
-								order
-							}}
+							bind:schema={
+								() => ({
+									properties,
+									$schema: '',
+									required: nestedRequired ?? [],
+									type: 'object',
+									order
+								}),
+								(newSchema) => {
+									dispatch('nestedChange')
+								}
+							}
 							bind:args={value}
 							dndType={`nested-${title}`}
 							on:reorder={(e) => {
 								const keys = e.detail
 								order = keys
 							}}
-							on:change={() => {
-								dispatch('nestedChange')
-							}}
 							diff={diffStatus && typeof diffStatus.diff === 'object' ? diffStatus.diff : {}}
 							on:acceptChange={(e) => {
 								dispatch('acceptChange', e.detail)
@@ -1065,10 +1171,9 @@
 		{:else if inputCat == 'enum'}
 			<div class="flex flex-row w-full gap-1">
 				<ArgEnum
-					{required}
 					create={extra['disableCreate'] != true}
 					{defaultValue}
-					{valid}
+					valid={valid ?? true}
 					{disabled}
 					bind:value
 					{enum_}
@@ -1119,7 +1224,7 @@
 				<input
 					{autofocus}
 					type="file"
-					on:change={(x) => fileChanged(x, (val) => (value = val))}
+					onchange={(x) => fileChanged(x, (val) => (value = val))}
 					multiple={false}
 				/>
 				{#if value?.length}
@@ -1144,8 +1249,8 @@
 		{:else if inputCat == 'email'}
 			<input
 				{autofocus}
-				on:focus
-				on:blur
+				onfocus={bubble('focus')}
+				onblur={bubble('blur')}
 				{disabled}
 				type="email"
 				class={valid
@@ -1177,14 +1282,14 @@
 								{autofocus}
 								rows={extra?.['minRows'] ? extra['minRows']?.toString() : '1'}
 								bind:this={el}
-								on:focus={(e) => {
+								onfocus={(e) => {
 									dispatch('focus')
 								}}
-								on:blur={(e) => {
+								onblur={(e) => {
 									dispatch('blur')
 								}}
 								use:autosize
-								on:keydown={onKeyDown}
+								onkeydown={onKeyDown}
 								{disabled}
 								class={twMerge(
 									'w-full',
@@ -1197,10 +1302,10 @@
 							></textarea>
 						{/key}
 						{#if !disabled && itemPicker && extra?.['disableVariablePicker'] != true}
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
 							<button
 								class="absolute right-1 top-1 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
-								on:click={() => {
+								onclick={() => {
 									pickForField = label
 									itemPicker?.openDrawer?.()
 								}}
@@ -1216,7 +1321,7 @@
 						{#if value && typeof value == 'string' && value?.startsWith('$var:')}
 							Linked to variable <button
 								class="text-blue-500 underline"
-								on:click={() => variableEditor?.editVariable?.(value.slice(5))}
+								onclick={() => variableEditor?.editVariable?.(value.slice(5))}
 								>{value.slice(5)}</button
 							>
 						{/if}
@@ -1224,7 +1329,7 @@
 				{/if}
 			</div>
 		{/if}
-		<slot name="actions" />
+		{@render actions?.()}
 	</div>
 
 	{#if !compact || (error && error != '')}
diff --git a/frontend/src/lib/components/ArrayTypeNarrowing.svelte b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
index 3694b021b7..865aadc8ca 100644
--- a/frontend/src/lib/components/ArrayTypeNarrowing.svelte
+++ b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
@@ -9,17 +9,25 @@
 	import EditableSchemaDrawer from './schema/EditableSchemaDrawer.svelte'
 	import type { SchemaProperty } from '$lib/common'
 
-	export let canEditResourceType: boolean = false
-	export let originalType: string | undefined = undefined
-	export let itemsType:
-		| {
-				type?: 'string' | 'number' | 'bytes' | 'object' | 'resource'
-				contentEncoding?: 'base64'
-				enum?: string[]
-				resourceType?: string
-				properties?: { [name: string]: SchemaProperty }
-		  }
-		| undefined
+	interface Props {
+		canEditResourceType?: boolean
+		originalType?: string | undefined
+		itemsType:
+			| {
+					type?: 'string' | 'number' | 'bytes' | 'object' | 'resource'
+					contentEncoding?: 'base64'
+					enum?: string[]
+					resourceType?: string
+					properties?: { [name: string]: SchemaProperty }
+			  }
+			| undefined
+	}
+
+	let {
+		canEditResourceType = false,
+		originalType = undefined,
+		itemsType = $bindable()
+	}: Props = $props()
 
 	let selected:
 		| 'string'
@@ -29,7 +37,7 @@
 		| 'enum'
 		| 'resource'
 		| 's3object'
-		| undefined =
+		| undefined = $state(
 		itemsType?.type != 'string'
 			? itemsType?.type == 'object' && itemsType?.resourceType == 's3object'
 				? 's3object'
@@ -39,12 +47,13 @@
 				: itemsType?.contentEncoding == 'base64'
 					? 'bytes'
 					: 'string'
+	)
 
-	let schema = {
+	let schema = $state({
 		properties: itemsType?.properties || {},
 		order: Object.keys(itemsType?.properties || {}),
 		required: Object.values(itemsType?.properties || {}).map((p) => p.required)
-	}
+	})
 
 	function updateItemsType() {
 		itemsType = {
@@ -59,7 +68,7 @@
 	<Label label="Items type">
 		<select
 			bind:value={selected}
-			on:change={() => {
+			onchange={() => {
 				if (selected == 'enum') {
 					itemsType = { type: 'string', enum: [] }
 				} else if (selected == 'string') {
@@ -127,7 +136,7 @@
 						<button
 							transition:fade|local={{ duration: 100 }}
 							class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
-							on:click={() => {
+							onclick={() => {
 								if (itemsType && itemsType.enum) {
 									const enumValue = itemsType.enum[index]
 									itemsType.enum = itemsType.enum.filter((el) => el !== enumValue)
diff --git a/frontend/src/lib/components/AssignableTags.svelte b/frontend/src/lib/components/AssignableTags.svelte
index fa9f193503..4786a08953 100644
--- a/frontend/src/lib/components/AssignableTags.svelte
+++ b/frontend/src/lib/components/AssignableTags.svelte
@@ -6,10 +6,19 @@
 	import Tooltip from './Tooltip.svelte'
 	import AssignableTagsInner from './AssignableTagsInner.svelte'
 
-	export let placement: 'bottom-end' | 'top-end' = 'bottom-end'
-	export let color: 'nord' | 'dark' = 'dark'
-	export let disabled = false
-	export let showWorkspaceRestriction = false
+	interface Props {
+		placement?: 'bottom-end' | 'top-end'
+		color?: 'nord' | 'dark'
+		disabled?: boolean
+		showWorkspaceRestriction?: boolean
+	}
+
+	let {
+		placement = 'bottom-end',
+		color = 'dark',
+		disabled = false,
+		showWorkspaceRestriction = false
+	}: Props = $props()
 </script>
 
 <Popover
@@ -18,7 +27,7 @@
 	closeButton
 	usePointerDownOutside
 >
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<Button {color} size="xs" nonCaptureEvent={true} {disabled}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Custom tags&nbsp;<Tooltip light
@@ -29,8 +38,8 @@
 				></div
 			>
 		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		<AssignableTagsInner {showWorkspaceRestriction} on:refresh />
-	</svelte:fragment>
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/AssignableTagsInner.svelte b/frontend/src/lib/components/AssignableTagsInner.svelte
index 1f374fc343..8606bd216a 100644
--- a/frontend/src/lib/components/AssignableTagsInner.svelte
+++ b/frontend/src/lib/components/AssignableTagsInner.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import { Button } from './common'
 	import { ExternalLink, Loader2, X } from 'lucide-svelte'
 	import { SettingService, WorkerService } from '$lib/gen'
@@ -9,9 +11,13 @@
 	import { base } from '$lib/base'
 	import { createEventDispatcher } from 'svelte'
 
-	export let showWorkspaceRestriction = false
-	let newTag: string = ''
-	let customTags: string[] | undefined = undefined
+	interface Props {
+		showWorkspaceRestriction?: boolean
+	}
+
+	let { showWorkspaceRestriction = false }: Props = $props()
+	let newTag: string = $state('')
+	let customTags: string[] | undefined = $state(undefined)
 
 	async function loadCustomTags() {
 		try {
@@ -40,15 +46,17 @@
 					<button
 						class="z-10 rounded-full p-1 duration-200 hover:bg-gray-200"
 						aria-label="Remove item"
-						on:click|preventDefault|stopPropagation={async () => {
-							await SettingService.setGlobal({
-								key: CUSTOM_TAGS_SETTING,
-								requestBody: { value: customTags?.filter((x) => x != customTag) }
+						onclick={stopPropagation(
+							preventDefault(async () => {
+								await SettingService.setGlobal({
+									key: CUSTOM_TAGS_SETTING,
+									requestBody: { value: customTags?.filter((x) => x != customTag) }
+								})
+								dispatch('refresh')
+								loadCustomTags()
+								sendUserToast('Tag removed')
 							})
-							dispatch('refresh')
-							loadCustomTags()
-							sendUserToast('Tag removed')
-						}}
+						)}
 					>
 						<X size={12} />
 					</button><NoWorkerWithTagWarning tag={customTag} />
@@ -74,7 +82,9 @@
 			}}
 			disabled={newTag.trim() == '' || !$superadmin}
 		>
-			Add {#if !$superadmin} <span class="text-2xs text-tertiary">superadmin only</span> {/if}
+			Add {#if !$superadmin}
+				<span class="text-2xs text-tertiary">superadmin only</span>
+			{/if}
 		</Button>
 		<span class="text-sm text-primary"
 			>Configure <a href="{base}/workers" target="_blank" class="inline-flex gap-1 items-baseline"
diff --git a/frontend/src/lib/components/Auth0Setting.svelte b/frontend/src/lib/components/Auth0Setting.svelte
index e3d4eb46ef..5d8dc9ba5a 100644
--- a/frontend/src/lib/components/Auth0Setting.svelte
+++ b/frontend/src/lib/components/Auth0Setting.svelte
@@ -6,11 +6,11 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 
-	export let value: any
+	interface Props {
+		value: any
+	}
 
-	$: enabled = value != undefined
-
-	$: changeDomain(value?.['domain'], value?.['custom'])
+	let { value = $bindable() }: Props = $props()
 
 	function changeDomain(domain, custom) {
 		if (value) {
@@ -31,10 +31,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	$effect(() => {
+		changeDomain(value?.['domain'], value?.['custom'])
+	})
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name="auth0" after={true} /></div><Toggle
 			checked={enabled}
@@ -57,10 +61,11 @@
 							on:selected={({ detail }) => {
 								value['custom'] = detail === 'custom'
 							}}
-							let:item
 						>
-							<ToggleButton value="org" label={'Org'} {item} />
-							<ToggleButton value="custom" label="Custom" {item} />
+							{#snippet children({ item })}
+								<ToggleButton value="org" label={'Org'} {item} />
+								<ToggleButton value="custom" label="Custom" {item} />
+							{/snippet}
 						</ToggleButtonGroup>
 					</div>
 					<div class="grow">
diff --git a/frontend/src/lib/components/AuthSettings.svelte b/frontend/src/lib/components/AuthSettings.svelte
index 79677dd941..5820cdbe8d 100644
--- a/frontend/src/lib/components/AuthSettings.svelte
+++ b/frontend/src/lib/components/AuthSettings.svelte
@@ -18,9 +18,31 @@
 	import { ExternalLink, Plus } from 'lucide-svelte'
 	import AzureOauthSettings from './AzureOauthSettings.svelte'
 
-	export let snowflakeAccountIdentifier = ''
-	export let oauths: Record<string, any> = {}
-	export let requirePreexistingUserForOauth: boolean = false
+	interface Props {
+		snowflakeAccountIdentifier?: string
+		oauths?: Record<string, any>
+		requirePreexistingUserForOauth?: boolean
+		scim?: import('svelte').Snippet
+	}
+
+	let {
+		snowflakeAccountIdentifier = $bindable(),
+		oauths = $bindable(),
+		requirePreexistingUserForOauth = $bindable(),
+		scim
+	}: Props = $props()
+
+	$effect(() => {
+		if (snowflakeAccountIdentifier == undefined) {
+			snowflakeAccountIdentifier = ''
+		}
+		if (oauths == undefined) {
+			oauths = {}
+		}
+		if (requirePreexistingUserForOauth == undefined) {
+			requirePreexistingUserForOauth = false
+		}
+	})
 
 	const windmillBuiltins = [
 		'azure_oauth',
@@ -45,12 +67,12 @@
 		'xero'
 	]
 
-	let oauth_name = undefined
+	let oauth_name = $state(undefined)
 
-	let clientName = ''
-	let resourceName = ''
+	let clientName = $state('')
+	let resourceName = $state('')
 
-	let tab: 'sso' | 'oauth' | 'scim' = 'sso'
+	let tab: 'sso' | 'oauth' | 'scim' = $state('sso')
 </script>
 
 <div>
@@ -62,60 +84,147 @@
 </div>
 
 <div class="mb-6">
-	{#if tab === 'sso'}
-		{#if !$enterpriseLicense || $enterpriseLicense.endsWith('_pro')}
-			<Alert type="warning" title="Limited to 10 SSO users">
-				Without EE, the number of SSO users is limited to 10. SCIM/SAML is available on EE
-			</Alert>
-		{/if}
+	{#if oauths}
+		{#if tab === 'sso'}
+			{#if !$enterpriseLicense || $enterpriseLicense.endsWith('_pro')}
+				<Alert type="warning" title="Limited to 10 SSO users">
+					Without EE, the number of SSO users is limited to 10. SCIM/SAML is available on EE
+				</Alert>
+			{/if}
+
+			<div class="py-1"></div>
+			<div class="mb-2">
+				<span class="text-primary text-sm"
+					>When at least one of the below options is set, users will be able to login to Windmill
+					via their third-party account.
+					<br /> To test SSO, the recommended workflow is to to save the settings and try to login
+					in an incognito window.
+					<a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#sso">Learn more</a
+					></span
+				>
+			</div>
+			<div class="flex flex-col gap-3 py-4">
+				<OAuthSetting name="google" bind:value={oauths['google']} />
+				<OAuthSetting name="microsoft" bind:value={oauths['microsoft']} />
+				<OktaSetting bind:value={oauths['okta']} />
+				<Auth0Setting bind:value={oauths['auth0']} />
+				<OAuthSetting name="github" bind:value={oauths['github']} />
+				<OAuthSetting name="gitlab" bind:value={oauths['gitlab']} />
+				<OAuthSetting name="jumpcloud" bind:value={oauths['jumpcloud']} />
+				<KeycloakSetting bind:value={oauths['keycloak']} />
+				<AuthentikSetting bind:value={oauths['authentik']} />
+				<AutheliaSetting bind:value={oauths['authelia']} />
+				<KanidmSetting bind:value={oauths['kanidm']} />
+				<ZitadelSetting bind:value={oauths['zitadel']} />
+				{#each Object.keys(oauths) as k}
+					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]}
+						{#if oauths[k]}
+							<div class="flex flex-col gap-2 pb-4">
+								<div class="flex flex-row items-center gap-2">
+									<!-- svelte-ignore a11y_label_has_associated_control -->
+									<label class="text-md font-medium text-primary">{k}</label>
+									<CloseButton
+										on:close={() => {
+											if (oauths) {
+												delete oauths[k]
+												oauths = { ...oauths }
+											}
+										}}
+									/>
+								</div>
+								<div class="p-2 border rounded">
+									<label class="block pb-2">
+										<span class="text-primary font-semibold text-sm">Custom Name</span>
+										<input
+											type="text"
+											placeholder="Custom Name"
+											bind:value={oauths[k]['display_name']}
+										/>
+									</label>
+									<label class="block pb-2">
+										<span class="text-primary font-semibold text-sm">Client Id</span>
+										<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
+									</label>
+									<label class="block pb-2">
+										<span class="text-primary font-semibold text-sm">Client Secret</span>
+										<input
+											type="text"
+											placeholder="Client Secret"
+											bind:value={oauths[k]['secret']}
+										/>
+									</label>
+									{#if !windmillBuiltins.includes(k) && k != 'slack'}
+										<CustomSso bind:login_config={oauths[k]['login_config']} />
+									{/if}
+								</div>
+							</div>
+						{/if}
+					{/if}
+				{/each}
+			</div>
+			<div class="flex gap-2 py-4">
+				<input type="text" placeholder="client_id" bind:value={clientName} />
+				<Button
+					variant="border"
+					color="blue"
+					hover="yo"
+					size="sm"
+					endIcon={{ icon: Plus }}
+					disabled={clientName == ''}
+					on:click={() => {
+						if (oauths) {
+							oauths[clientName] = { id: '', secret: '', login_config: {} }
+						}
+						clientName = ''
+					}}
+				>
+					Add custom SSO client {!$enterpriseLicense ? '(requires ee)' : ''}
+				</Button>
+			</div>
+			<div class="flex gap-2 py-4">
+				<Toggle
+					options={{
+						right: 'Require users to have been added manually to Windmill to sign in through OAuth'
+					}}
+					bind:checked={requirePreexistingUserForOauth}
+				/>
+			</div>
+		{:else if tab === 'oauth'}
+			<div class="mb-2">
+				<span class="text-primary text-sm"
+					>When one of the below options is set, you will be able to create a specific resource
+					containing a token automatically generated by the third-party provider.
+					<br />
+					To test it after setting an oauth client, go to the Resources menu and create a new one of
+					the type of your oauth client (i.e. a 'github' resource if you set Github OAuth).
+					<br /><a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#oauth"
+						>Learn more</a
+					></span
+				>
+			</div>
+			<div class="py-1"></div>
+			<OAuthSetting login={false} name="slack" bind:value={oauths['slack']} />
+			<div class="py-1"></div>
+			<OAuthSetting login={false} name="teams" eeOnly={true} bind:value={oauths['teams']} />
+			<div class="py-1"></div>
 
-		<div class="py-1"></div>
-		<div class="mb-2">
-			<span class="text-primary text-sm"
-				>When at least one of the below options is set, users will be able to login to Windmill via
-				their third-party account.
-				<br /> To test SSO, the recommended workflow is to to save the settings and try to login in
-				an incognito window.
-				<a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#sso">Learn more</a
-				></span
-			>
-		</div>
-		<div class="flex flex-col gap-3 py-4">
-			<OAuthSetting name="google" bind:value={oauths['google']} />
-			<OAuthSetting name="microsoft" bind:value={oauths['microsoft']} />
-			<OktaSetting bind:value={oauths['okta']} />
-			<Auth0Setting bind:value={oauths['auth0']} />
-			<OAuthSetting name="github" bind:value={oauths['github']} />
-			<OAuthSetting name="gitlab" bind:value={oauths['gitlab']} />
-			<OAuthSetting name="jumpcloud" bind:value={oauths['jumpcloud']} />
-			<KeycloakSetting bind:value={oauths['keycloak']} />
-			<AuthentikSetting bind:value={oauths['authentik']} />
-			<AutheliaSetting bind:value={oauths['authelia']} />
-			<KanidmSetting bind:value={oauths['kanidm']} />
-			<ZitadelSetting bind:value={oauths['zitadel']} />
 			{#each Object.keys(oauths) as k}
-				{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]}
-					{#if oauths[k]}
+				{#if oauths[k] && !('login_config' in oauths[k])}
+					{#if !['slack', 'teams'].includes(k) && oauths[k]}
 						<div class="flex flex-col gap-2 pb-4">
 							<div class="flex flex-row items-center gap-2">
-								<!-- svelte-ignore a11y-label-has-associated-control -->
+								<!-- svelte-ignore a11y_label_has_associated_control -->
 								<label class="text-md font-medium text-primary">{k}</label>
 								<CloseButton
 									on:close={() => {
-										delete oauths[k]
-										oauths = { ...oauths }
+										if (oauths) {
+											delete oauths[k]
+											oauths = { ...oauths }
+										}
 									}}
 								/>
 							</div>
 							<div class="p-2 border rounded">
-								<label class="block pb-2">
-									<span class="text-primary font-semibold text-sm">Custom Name</span>
-									<input
-										type="text"
-										placeholder="Custom Name"
-										bind:value={oauths[k]['display_name']}
-									/>
-								</label>
 								<label class="block pb-2">
 									<span class="text-primary font-semibold text-sm">Client Id</span>
 									<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
@@ -124,141 +233,68 @@
 									<span class="text-primary font-semibold text-sm">Client Secret</span>
 									<input type="text" placeholder="Client Secret" bind:value={oauths[k]['secret']} />
 								</label>
-								{#if !windmillBuiltins.includes(k) && k != 'slack'}
-									<CustomSso bind:login_config={oauths[k]['login_config']} />
+								{#if k === 'azure_oauth'}
+									<AzureOauthSettings bind:connect_config={oauths[k]['connect_config']} />
+								{:else if !windmillBuiltins.includes(k) && k != 'slack'}
+									<CustomOauth bind:connect_config={oauths[k]['connect_config']} />
+								{/if}
+								{#if k == 'snowflake_oauth'}
+									<label class="block pb-2">
+										<span class="text-primary font-semibold text-sm flex gap-2 items-center"
+											><a
+												href="https://docs.snowflake.com/en/user-guide/admin-account-identifier#using-an-account-name-as-an-identifier"
+												target="_blank">Snowflake Account Identifier</a
+											><ExternalLink size={12} /></span
+										>
+										<input
+											type="text"
+											placeholder="<orgname>-<account_name>"
+											required={true}
+											bind:value={snowflakeAccountIdentifier}
+										/>
+									</label>
 								{/if}
 							</div>
 						</div>
 					{/if}
 				{/if}
 			{/each}
-		</div>
-		<div class="flex gap-2 py-4">
-			<input type="text" placeholder="client_id" bind:value={clientName} />
-			<Button
-				variant="border"
-				color="blue"
-				hover="yo"
-				size="sm"
-				endIcon={{ icon: Plus }}
-				disabled={clientName == ''}
-				on:click={() => {
-					oauths[clientName] = { id: '', secret: '', login_config: {} }
-					clientName = ''
-				}}
-			>
-				Add custom SSO client {!$enterpriseLicense ? '(requires ee)' : ''}
-			</Button>
-		</div>
-		<div class="flex gap-2 py-4">
-			<Toggle
-				options={{
-					right: 'Require users to have been added manually to Windmill to sign in through OAuth'
-				}}
-				bind:checked={requirePreexistingUserForOauth}
-			/>
-		</div>
-	{:else if tab === 'oauth'}
-		<div class="mb-2">
-			<span class="text-primary text-sm"
-				>When one of the below options is set, you will be able to create a specific resource
-				containing a token automatically generated by the third-party provider.
-				<br />
-				To test it after setting an oauth client, go to the Resources menu and create a new one of the
-				type of your oauth client (i.e. a 'github' resource if you set Github OAuth).
-				<br /><a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#oauth"
-					>Learn more</a
-				></span
-			>
-		</div>
-		<div class="py-1"></div>
-		<OAuthSetting login={false} name="slack" bind:value={oauths['slack']} />
-		<div class="py-1"></div>
-		<OAuthSetting login={false} name="teams" eeOnly={true} bind:value={oauths['teams']} />
-		<div class="py-1"></div>
 
-		{#each Object.keys(oauths) as k}
-			{#if oauths[k] && !('login_config' in oauths[k])}
-				{#if !['slack', 'teams'].includes(k) && oauths[k]}
-					<div class="flex flex-col gap-2 pb-4">
-						<div class="flex flex-row items-center gap-2">
-							<!-- svelte-ignore a11y-label-has-associated-control -->
-							<label class="text-md font-medium text-primary">{k}</label>
-							<CloseButton
-								on:close={() => {
-									delete oauths[k]
-									oauths = { ...oauths }
-								}}
-							/>
-						</div>
-						<div class="p-2 border rounded">
-							<label class="block pb-2">
-								<span class="text-primary font-semibold text-sm">Client Id</span>
-								<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
-							</label>
-							<label class="block pb-2">
-								<span class="text-primary font-semibold text-sm">Client Secret</span>
-								<input type="text" placeholder="Client Secret" bind:value={oauths[k]['secret']} />
-							</label>
-							{#if k === 'azure_oauth'}
-								<AzureOauthSettings bind:connect_config={oauths[k]['connect_config']} />
-							{:else if !windmillBuiltins.includes(k) && k != 'slack'}
-								<CustomOauth bind:connect_config={oauths[k]['connect_config']} />
-							{/if}
-							{#if k == 'snowflake_oauth'}
-								<label class="block pb-2">
-									<span class="text-primary font-semibold text-sm flex gap-2 items-center"
-										><a
-											href="https://docs.snowflake.com/en/user-guide/admin-account-identifier#using-an-account-name-as-an-identifier"
-											target="_blank">Snowflake Account Identifier</a
-										><ExternalLink size={12} /></span
-									>
-									<input
-										type="text"
-										placeholder="<orgname>-<account_name>"
-										required={true}
-										bind:value={snowflakeAccountIdentifier}
-									/>
-								</label>
-							{/if}
-						</div>
-					</div>
+			<div class="flex gap-2">
+				<select name="oauth_name" id="oauth_name" bind:value={oauth_name}>
+					<option value={undefined}>Select an OAuth client</option>
+					<option value="custom">Fully Custom (requires ee)</option>
+					{#each windmillBuiltins as name}
+						<option value={name}>{capitalize(name)}</option>
+					{/each}
+				</select>
+				{#if oauth_name == 'custom'}
+					<input type="text" placeholder="client_id" bind:value={resourceName} />
+				{:else}
+					<input type="text" value={oauth_name ?? ''} disabled />
 				{/if}
-			{/if}
-		{/each}
-
-		<div class="flex gap-2">
-			<select name="oauth_name" id="oauth_name" bind:value={oauth_name}>
-				<option value={undefined}>Select an OAuth client</option>
-				<option value="custom">Fully Custom (requires ee)</option>
-				{#each windmillBuiltins as name}
-					<option value={name}>{capitalize(name)}</option>
-				{/each}
-			</select>
-			{#if oauth_name == 'custom'}
-				<input type="text" placeholder="client_id" bind:value={resourceName} />
-			{:else}
-				<input type="text" value={oauth_name ?? ''} disabled />
-			{/if}
-			<Button
-				variant="border"
-				color="blue"
-				hover="yo"
-				size="sm"
-				endIcon={{ icon: Plus }}
-				disabled={!oauth_name ||
-					(oauth_name == 'custom' && resourceName == '') ||
-					(oauth_name == 'custom' && !$enterpriseLicense)}
-				on:click={() => {
-					let name = oauth_name == 'custom' ? resourceName : oauth_name
-					oauths[name ?? ''] = { id: '', secret: '' }
-					resourceName = ''
-				}}
-			>
-				Add OAuth client {oauth_name == 'custom' && !$enterpriseLicense ? '(requires ee)' : ''}
-			</Button>
-		</div>
-	{:else if tab == 'scim'}
-		<slot name="scim" />
+				<Button
+					variant="border"
+					color="blue"
+					hover="yo"
+					size="sm"
+					endIcon={{ icon: Plus }}
+					disabled={!oauth_name ||
+						(oauth_name == 'custom' && resourceName == '') ||
+						(oauth_name == 'custom' && !$enterpriseLicense)}
+					on:click={() => {
+						if (oauths) {
+							let name = oauth_name == 'custom' ? resourceName : oauth_name
+							oauths[name ?? ''] = { id: '', secret: '' }
+						}
+						resourceName = ''
+					}}
+				>
+					Add OAuth client {oauth_name == 'custom' && !$enterpriseLicense ? '(requires ee)' : ''}
+				</Button>
+			</div>
+		{:else if tab == 'scim'}
+			{@render scim?.()}
+		{/if}
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/AutoscalingConfigEditor.svelte b/frontend/src/lib/components/AutoscalingConfigEditor.svelte
index e90f39a9ef..9afa7a004f 100644
--- a/frontend/src/lib/components/AutoscalingConfigEditor.svelte
+++ b/frontend/src/lib/components/AutoscalingConfigEditor.svelte
@@ -11,11 +11,15 @@
 	import Label from './Label.svelte'
 	import MultiSelect from 'svelte-multiselect'
 
-	export let config: AutoscalingConfig | undefined
-	export let worker_tags: string[] | undefined
+	interface Props {
+		config: AutoscalingConfig | undefined
+		worker_tags: string[] | undefined
+	}
+
+	let { config = $bindable(), worker_tags }: Props = $props()
 
 	const dispatch = createEventDispatcher()
-	let test_input: number = 3
+	let test_input: number = $state(3)
 </script>
 
 <div class="flex flex-row gap-16 pt-2">
@@ -49,11 +53,11 @@
 				}
 			}}
 		/>
-		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<!-- svelte-ignore a11y_label_has_associated_control -->
 		<label>
 			Min # of Workers
 			{#if config !== undefined}
-				<input on:input={() => dispatch('dirty')} type="number" bind:value={config.min_workers} />
+				<input oninput={() => dispatch('dirty')} type="number" bind:value={config.min_workers} />
 				{#if config.min_workers !== undefined && config.min_workers != undefined && config.min_workers > config.max_workers}
 					<div class="text-red-600 text-xs whitespace-nowrap"
 						>Minimum cannot be {'>'} to Maximum</div
@@ -63,11 +67,11 @@
 				<input type="number" disabled />
 			{/if}
 		</label>
-		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<!-- svelte-ignore a11y_label_has_associated_control -->
 		<label>
 			Max # of Workers
 			{#if config !== undefined}
-				<input on:input={() => dispatch('dirty')} type="number" bind:value={config.max_workers} />
+				<input oninput={() => dispatch('dirty')} type="number" bind:value={config.max_workers} />
 			{:else}
 				<input type="number" disabled />
 			{/if}
@@ -75,12 +79,12 @@
 		<div class="p-2">
 			<Section label="Advanced" small collapsable={true}>
 				<div class="flex flex-col gap-2 text-2xs">
-					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label>
 						Cooldown seconds after an incremental scale-in/out
 						{#if config !== undefined}
 							<input
-								on:input={() => dispatch('dirty')}
+								oninput={() => dispatch('dirty')}
 								type="number"
 								step="1"
 								min="30"
@@ -91,12 +95,12 @@
 							<input type="number" disabled />
 						{/if}
 					</label>
-					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label>
 						Cooldown seconds after a full scale out
 						{#if config !== undefined}
 							<input
-								on:input={() => dispatch('dirty')}
+								oninput={() => dispatch('dirty')}
 								type="number"
 								step="1"
 								min="30"
@@ -107,12 +111,12 @@
 							<input type="number" disabled />
 						{/if}
 					</label>
-					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label>
 						Num jobs waiting to trigger an incremental scale-out
 						{#if config !== undefined}
 							<input
-								on:input={() => dispatch('dirty')}
+								oninput={() => dispatch('dirty')}
 								type="number"
 								bind:value={config.inc_scale_num_jobs_waiting}
 								placeholder="1"
@@ -122,14 +126,14 @@
 						{/if}
 					</label>
 
-					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label>
 						Num jobs waiting to trigger a full scale out <Tooltip
 							>Default: max_workers, full scale out = scale out to max workers</Tooltip
 						>
 						{#if config !== undefined}
 							<input
-								on:input={() => dispatch('dirty')}
+								oninput={() => dispatch('dirty')}
 								type="number"
 								placeholder="max workers"
 								bind:value={config.full_scale_jobs_waiting}
@@ -138,14 +142,14 @@
 							<input type="number" disabled />
 						{/if}
 					</label>
-					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label>
 						Occupancy rate % threshold to go below to trigger a scale-in (decrease) <Tooltip
 							>Default: 25%, need to go below average of all of 15s, 5m and 30m occupancy rates</Tooltip
 						>
 						{#if config !== undefined}
 							<input
-								on:input={() => dispatch('dirty')}
+								oninput={() => dispatch('dirty')}
 								type="number"
 								step="1"
 								min="0"
@@ -157,14 +161,14 @@
 							<input type="number" step="0.01" disabled />
 						{/if}
 					</label>
-					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label>
 						Occupancy rate threshold to exceed to trigger an incremental scale-out (increase) <Tooltip
 							>Default: 75%, need to exceed average of all of 15s, 5m and 30m occupancy rates</Tooltip
 						>
 						{#if config !== undefined}
 							<input
-								on:input={() => dispatch('dirty')}
+								oninput={() => dispatch('dirty')}
 								type="number"
 								step="1"
 								min="0"
@@ -176,14 +180,14 @@
 							<input type="number" step="0.01" disabled />
 						{/if}
 					</label>
-					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<label>
 						Num workers to scale-in/out by when incremental <Tooltip
 							>Default: (max_workers - min_workers) / 5</Tooltip
 						>
 						{#if config !== undefined}
 							<input
-								on:input={() => dispatch('dirty')}
+								oninput={() => dispatch('dirty')}
 								type="number"
 								step="1"
 								min="1"
@@ -196,12 +200,12 @@
 					</label>
 
 					<Label label="Custom tags to autoscale on">
-						<svelte:fragment slot="header">
+						{#snippet header()}
 							<Tooltip>
 								By default, autoscaling will apply to the tags the worker group is assigned to but
 								you can override this here.
 							</Tooltip>
-						</svelte:fragment>
+						{/snippet}
 						{#if config}
 							{#if config.custom_tags}
 								<MultiSelect
@@ -259,30 +263,31 @@
 				on:selected={(e) => dispatch('dirty')}
 				bind:selected={config.integration.type}
 				class="mb-4 mt-2"
-				let:item
 			>
-				<ToggleButton
-					value="dryrun"
-					label="Dry run"
-					tooltip="See autoscaling events but not actual scaling actions will be performed"
-					{item}
-				/>
-				<ToggleButton
-					value="script"
-					label="Custom script"
-					tooltip="Run a custom script to scale your worker group"
-					{item}
-				/>
-				<ToggleButton disabled value="ecs" label="ECS (soon)" {item} />
-				<ToggleButton disabled value="nomad" label="Nomad (soon)" {item} />
-				<ToggleButton disabled value="kubernetes" label="Kubernetes (soon)" {item} />
+				{#snippet children({ item })}
+					<ToggleButton
+						value="dryrun"
+						label="Dry run"
+						tooltip="See autoscaling events but not actual scaling actions will be performed"
+						{item}
+					/>
+					<ToggleButton
+						value="script"
+						label="Custom script"
+						tooltip="Run a custom script to scale your worker group"
+						{item}
+					/>
+					<ToggleButton disabled value="ecs" label="ECS (soon)" {item} />
+					<ToggleButton disabled value="nomad" label="Nomad (soon)" {item} />
+					<ToggleButton disabled value="kubernetes" label="Kubernetes (soon)" {item} />
+				{/snippet}
 			</ToggleButtonGroup>
 
 			{#if config.integration.type === 'script'}
 				<label>
 					Script path on the 'admins' workspace
 					<input
-						on:input={() => dispatch('dirty')}
+						oninput={() => dispatch('dirty')}
 						type="text"
 						bind:value={config.integration.path}
 					/>
@@ -292,7 +297,7 @@
 					Custom tag for executing script (optional)
 					{#if config.integration.tag}
 						<input
-							on:input={() => dispatch('dirty')}
+							oninput={() => dispatch('dirty')}
 							type="text"
 							bind:value={config.integration.tag}
 						/>
@@ -337,12 +342,14 @@
 				</div>
 			{/if}
 		{:else}
-			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2" let:item>
-				<ToggleButton value="dryrun" label="Dry run" {item} />
-				<ToggleButton value="script" label="Custom script" {item} />
-				<ToggleButton value="ecs" label="ECS (soon)" {item} />
-				<ToggleButton value="nomad" label="Nomad (soon)" {item} />
-				<ToggleButton value="kubernetes" label="Kubernetes (soon)" {item} />
+			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2">
+				{#snippet children({ item })}
+					<ToggleButton value="dryrun" label="Dry run" {item} />
+					<ToggleButton value="script" label="Custom script" {item} />
+					<ToggleButton value="ecs" label="ECS (soon)" {item} />
+					<ToggleButton value="nomad" label="Nomad (soon)" {item} />
+					<ToggleButton value="kubernetes" label="Kubernetes (soon)" {item} />
+				{/snippet}
 			</ToggleButtonGroup>
 
 			<label>
diff --git a/frontend/src/lib/components/ChannelSelector.svelte b/frontend/src/lib/components/ChannelSelector.svelte
index f7db63ddc2..7d4a1a3d3d 100644
--- a/frontend/src/lib/components/ChannelSelector.svelte
+++ b/frontend/src/lib/components/ChannelSelector.svelte
@@ -1,86 +1,51 @@
 <script lang="ts">
-	import Select from '$lib/components/apps/svelte-select/lib/Select.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
-	import { createEventDispatcher, onMount } from 'svelte'
-	import DarkModeObserver from './DarkModeObserver.svelte'
+	import Select from './Select.svelte'
 
 	interface ChannelItem {
-		channel_id: string
-		channel_name: string
+		channel_id?: string
+		channel_name?: string
 	}
 
-	export let disabled = false
-	export let placeholder = 'Select channel'
-	export let selectedChannel: ChannelItem | undefined = undefined
-	export let containerClass = 'w-64'
-	export let minWidth = '160px'
-	export let channels: ChannelItem[] = []
-
-	let darkMode: boolean = false
-
-	const dispatch = createEventDispatcher<{
-		change: ChannelItem
-	}>()
-
-	function onThemeChange() {
-		darkMode = document.documentElement.classList.contains('dark')
+	interface Props {
+		disabled?: boolean
+		placeholder?: string
+		selectedChannel?: ChannelItem | undefined
+		containerClass?: string
+		minWidth?: string
+		channels?: ChannelItem[]
 	}
 
-	onMount(() => {
-		onThemeChange()
-	})
-
-	function handleChannelSelect(event) {
-		selectedChannel = event.detail
-		if (selectedChannel) {
-			dispatch('change', selectedChannel)
-		}
-	}
-
-	function filterChannels(filterText: string | unknown) {
-		if (!channels) return channels
-
-		const searchText = typeof filterText === 'string' ? filterText : ''
-
-		const filtered = searchText
-			? channels.filter((channel) =>
-					channel.channel_name.toLowerCase().includes(searchText.toLowerCase())
-				)
-			: channels
-
-		return filtered
-	}
+	let {
+		disabled = false,
+		placeholder = 'Select channel',
+		selectedChannel = $bindable(undefined),
+		containerClass = 'w-64',
+		minWidth = '160px',
+		channels = []
+	}: Props = $props()
 </script>
 
 <div class={containerClass}>
 	<div class="flex items-center gap-2">
 		<div class="flex-grow" style="min-width: {minWidth};">
 			<Select
-				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={'border-color: lightgray; min-width: ' +
-					minWidth +
-					';' +
-					(darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles)}
-				itemId="channel_id"
-				label="channel_name"
-				items={channels || []}
-				on:change={handleChannelSelect}
+				containerStyle={'min-width: ' + minWidth}
+				items={channels.map((channel) => ({
+					label: channel.channel_name ?? 'Unknown Channel',
+					value: channel.channel_id ?? ''
+				}))}
 				{placeholder}
-				searchable={true}
+				bind:value={
+					() => selectedChannel?.channel_id,
+					(value) => (selectedChannel = channels.find((channel) => channel.channel_id === value))
+				}
+				clearable
 				disabled={disabled || channels.length === 0}
-				on:input={async (e) => {
-					const filterText = e.detail
-					return filterChannels(filterText)
-				}}
 			/>
 		</div>
 	</div>
 
 	{#if channels.length === 0 && !disabled}
-		<div class="text-xs text-tertiary mt-1"> No channels available </div>
+		<div class="text-xs text-tertiary mt-1">No channels available</div>
 	{/if}
 </div>
-
-<DarkModeObserver on:change={onThemeChange} />
diff --git a/frontend/src/lib/components/ConnectionSection.svelte b/frontend/src/lib/components/ConnectionSection.svelte
index c0b1275625..b69580a13a 100644
--- a/frontend/src/lib/components/ConnectionSection.svelte
+++ b/frontend/src/lib/components/ConnectionSection.svelte
@@ -108,7 +108,7 @@
 						bind:selectedTeam
 						minWidth="180px"
 						disabled={!$enterpriseLicense}
-						on:error={(e) => sendUserToast('Failed to load teams: ' + e.detail.message, true)}
+						onError={(e) => sendUserToast('Failed to load teams: ' + e.message, true)}
 					/>
 				{/if}
 			{:else}
diff --git a/frontend/src/lib/components/ContentSearchInner.svelte b/frontend/src/lib/components/ContentSearchInner.svelte
index a42796deb8..d33a4031e1 100644
--- a/frontend/src/lib/components/ContentSearchInner.svelte
+++ b/frontend/src/lib/components/ContentSearchInner.svelte
@@ -18,10 +18,14 @@
 	import YAML from 'yaml'
 	import { twMerge } from 'tailwind-merge'
 	import ContentSearchInnerItem from './ContentSearchInnerItem.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 
 	const dispatch = createEventDispatcher()
-	export let search: string = ''
+	interface Props {
+		search?: string
+	}
+
+	let { search = $bindable('') }: Props = $props()
 
 	export async function open(nsearch?: string) {
 		await Promise.all([loadScripts(), loadResources(), loadApps(), loadFlows()])
@@ -46,19 +50,19 @@
 		flows = await FlowService.listSearchFlow({ workspace: $workspaceStore ?? '' })
 	}
 
-	let searchKind: 'all' | 'scripts' | 'flows' | 'apps' | 'resources' = 'all'
+	let searchKind: 'all' | 'scripts' | 'flows' | 'apps' | 'resources' = $state('all')
 
-	let scripts: undefined | { path: string; content: string }[] = undefined
-	let filteredScriptItems: { path: string; content: string; marked: any }[] = []
+	let scripts: undefined | { path: string; content: string }[] = $state(undefined)
+	let filteredScriptItems: { path: string; content: string; marked: any }[] = $state([])
 
-	let resources: undefined | { path: string; value: any }[] = undefined
-	let filteredResourceItems: { path: string; value: any; marked: any }[] = []
+	let resources: undefined | { path: string; value: any }[] = $state(undefined)
+	let filteredResourceItems: { path: string; value: any; marked: any }[] = $state([])
 
-	let flows: undefined | { path: string; value: any }[] = undefined
-	let filteredFlowItems: { path: string; value: any; marked: any }[] = []
+	let flows: undefined | { path: string; value: any }[] = $state(undefined)
+	let filteredFlowItems: { path: string; value: any; marked: any }[] = $state([])
 
-	let apps: undefined | { path: string; value: any }[] = undefined
-	let filteredAppItems: { path: string; value: any; marked: any }[] = []
+	let apps: undefined | { path: string; value: any }[] = $state(undefined)
+	let filteredAppItems: { path: string; value: any; marked: any }[] = $state([])
 
 	function getCounts(n: number) {
 		return ` (${n})`
@@ -73,23 +77,34 @@
 			.replace(/'/g, '&#39;')
 	}
 
-	$: counts =
+	let showNbScripts = $state(10)
+	let showNbApps = $state(10)
+	let showNbResources = $state(10)
+	let showNbFlows = $state(10)
+
+	function resetShows() {
+		showNbScripts = 10
+		showNbApps = 10
+		showNbResources = 10
+		showNbFlows = 10
+	}
+	let counts = $derived(
 		search == '' ||
-		!scripts ||
-		!resources ||
-		!flows ||
-		!apps ||
-		!filteredAppItems ||
-		!filteredFlowItems ||
-		!filteredResourceItems ||
-		!filteredScriptItems
+			!scripts ||
+			!resources ||
+			!flows ||
+			!apps ||
+			!filteredAppItems ||
+			!filteredFlowItems ||
+			!filteredResourceItems ||
+			!filteredScriptItems
 			? {
 					all: '',
 					apps: '',
 					flows: '',
 					resources: '',
 					scripts: ''
-			  }
+				}
 			: {
 					all: getCounts(
 						filteredAppItems.length +
@@ -101,21 +116,11 @@
 					resources: getCounts(filteredResourceItems.length),
 					flows: getCounts(filteredFlowItems.length),
 					scripts: getCounts(filteredScriptItems.length)
-			  }
-
-	let showNbScripts = 10
-	let showNbApps = 10
-	let showNbResources = 10
-	let showNbFlows = 10
-
-	$: search && resetShows()
-
-	function resetShows() {
-		showNbScripts = 10
-		showNbApps = 10
-		showNbResources = 10
-		showNbFlows = 10
-	}
+				}
+	)
+	$effect(() => {
+		search && untrack(() => resetShows())
+	})
 </script>
 
 <SearchItems
@@ -157,42 +162,44 @@
 <div class="flex flex-col gap-2">
 	<div class="flex gap-2 flex-wrap sticky top-0 left-0 right-0 bg-surface">
 		<div class="p-2">
-			<ToggleButtonGroup bind:selected={searchKind} class="h-10 " let:item>
-				<ToggleButton small light value="all" label={'All' + counts.all} {item} />
-				<ToggleButton
-					small
-					light
-					value="scripts"
-					icon={Code2}
-					label={'Scripts' + counts.scripts}
-					{item}
-				/>
-				<ToggleButton
-					small
-					light
-					value="resources"
-					icon={Boxes}
-					label={'Resources' + counts.resources}
-					{item}
-				/>
-				<ToggleButton
-					small
-					light
-					value="flows"
-					label={'Flows' + counts.flows}
-					icon={FlowIcon}
-					selectedColor="#14b8a6"
-					{item}
-				/>
-				<ToggleButton
-					small
-					light
-					value="apps"
-					label={'Apps' + counts.apps}
-					icon={LayoutDashboard}
-					selectedColor="#fb923c"
-					{item}
-				/>
+			<ToggleButtonGroup bind:selected={searchKind} class="h-10 ">
+				{#snippet children({ item })}
+					<ToggleButton small light value="all" label={'All' + counts.all} {item} />
+					<ToggleButton
+						small
+						light
+						value="scripts"
+						icon={Code2}
+						label={'Scripts' + counts.scripts}
+						{item}
+					/>
+					<ToggleButton
+						small
+						light
+						value="resources"
+						icon={Boxes}
+						label={'Resources' + counts.resources}
+						{item}
+					/>
+					<ToggleButton
+						small
+						light
+						value="flows"
+						label={'Flows' + counts.flows}
+						icon={FlowIcon}
+						selectedColor="#14b8a6"
+						{item}
+					/>
+					<ToggleButton
+						small
+						light
+						value="apps"
+						label={'Apps' + counts.apps}
+						icon={LayoutDashboard}
+						selectedColor="#fb923c"
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	</div>
@@ -245,7 +252,7 @@
 							href={`/scripts/get/${item.path}`}
 							on:close
 						>
-							<svelte:fragment slot="actions">
+							{#snippet actions()}
 								<Button
 									href={`/scripts/get/${item.path}`}
 									color="light"
@@ -267,7 +274,7 @@
 								>
 									Edit
 								</Button>
-							</svelte:fragment>
+							{/snippet}
 							<pre class="text-xs border rounded-md p-2 overflow-auto max-h-40 w-full"
 								><code>{@html item.marked}</code>
 							</pre>
@@ -295,7 +302,7 @@
 							href={`/resources#${item.path}`}
 							on:close
 						>
-							<svelte:fragment slot="actions">
+							{#snippet actions()}
 								<Button
 									href={`/resources#${item.path}`}
 									color="light"
@@ -305,7 +312,7 @@
 								>
 									Edit
 								</Button>
-							</svelte:fragment>
+							{/snippet}
 							<pre class="text-xs border rounded-md p-2 overflow-auto max-h-40 w-full"
 								><code>{@html item.marked}</code></pre
 							>
@@ -333,7 +340,7 @@
 							href={`/flows/get/${item.path}`}
 							on:close
 						>
-							<svelte:fragment slot="actions">
+							{#snippet actions()}
 								<Button
 									href={`/flows/get/${item.path}`}
 									color="light"
@@ -354,7 +361,7 @@
 								>
 									Edit
 								</Button>
-							</svelte:fragment>
+							{/snippet}
 
 							<pre class="text-xs border p-2 overflow-auto max-h-40 w-full"
 								><code>{@html item.marked}</code></pre
@@ -383,7 +390,7 @@
 							href={`/apps/get/${item.path}`}
 							on:close
 						>
-							<svelte:fragment slot="actions">
+							{#snippet actions()}
 								<Button
 									href={`/apps/get/${item.path}`}
 									color="light"
@@ -404,7 +411,7 @@
 								>
 									Edit
 								</Button>
-							</svelte:fragment>
+							{/snippet}
 
 							<pre class="text-xs border p-2 overflow-auto max-h-40 w-full"
 								><code>{@html item.marked}</code></pre
diff --git a/frontend/src/lib/components/ContentSearchInnerItem.svelte b/frontend/src/lib/components/ContentSearchInnerItem.svelte
index 2b70ca4976..f5936c3d57 100644
--- a/frontend/src/lib/components/ContentSearchInnerItem.svelte
+++ b/frontend/src/lib/components/ContentSearchInnerItem.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
 
-	export let title: string
-	export let href: string
+	interface Props {
+		title: string
+		href: string
+		actions?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
+
+	let { title, href, actions, children }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -12,7 +18,7 @@
 		<a
 			class="text-sm text-blue-500 truncate hover:underline"
 			{href}
-			on:click={() => {
+			onclick={() => {
 				dispatch('close')
 			}}
 		>
@@ -20,8 +26,8 @@
 		</a>
 
 		<div class="flex flex-row gap-2 items-center">
-			<slot name="actions" />
+			{@render actions?.()}
 		</div>
 	</div>
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/ContextualVariableEditor.svelte b/frontend/src/lib/components/ContextualVariableEditor.svelte
index 7a6243ea25..a511c3c6b2 100644
--- a/frontend/src/lib/components/ContextualVariableEditor.svelte
+++ b/frontend/src/lib/components/ContextualVariableEditor.svelte
@@ -69,7 +69,7 @@
 				<textarea rows="4" use:autosize bind:value placeholder="Variable value"></textarea>
 			</Section>
 		</div>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				on:click={() => updateVariable()}
 				disabled={value === '' || name === ''}
@@ -79,6 +79,6 @@
 			>
 				{edit ? 'Update' : 'Save'}
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index 986a26de2e..16174b5d9b 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -5,14 +5,11 @@
 	// @ts-ignore
 	import Multiselect from 'svelte-multiselect'
 	import { Button } from './common'
-	import Select from '../components/apps/svelte-select/lib/index'
 	import timezones from './timezones'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
-	import { onMount } from 'svelte'
 	import CronBuilder from './CronBuilder.svelte'
 	import Label from './Label.svelte'
 	import CronGen from './copilot/CronGen.svelte'
-	import DarkModeObserver from './DarkModeObserver.svelte'
+	import Select from './Select.svelte'
 
 	export let schedule: string
 	// export let offset: number = -60 * Math.floor(new Date().getTimezoneOffset() / 60)
@@ -171,19 +168,6 @@
 			}).format
 		}
 	}
-	let darkMode: boolean = false
-
-	function onThemeChange() {
-		if (document.documentElement.classList.contains('dark')) {
-			darkMode = true
-		} else {
-			darkMode = false
-		}
-	}
-
-	onMount(() => {
-		onThemeChange()
-	})
 
 	const items = Object.keys(timezones)
 		.map((key) => {
@@ -192,7 +176,7 @@
 					return {
 						value: subKey,
 						label: subKey,
-						group: timezones[key][subKey][1]
+						group: timezones[key][subKey][1] as string
 					}
 				})
 				.flat()
@@ -200,8 +184,6 @@
 		.flat()
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
-
 <div class="w-full flex space-x-8">
 	<div class="w-full flex flex-col gap-4">
 		<Label label="Cron" class="font-semibold" primary={true}>
@@ -234,17 +216,15 @@
 				</div>
 			{:else}
 				<Select
-					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-					containerStyles={'border-color: lightgray;' +
-						(darkMode
-							? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-							: SELECT_INPUT_DEFAULT_STYLE.containerStyles)}
 					{items}
+					class="w-full"
+					bind:value={timezone}
 					groupBy={(item) => item.group}
-					on:change={(w) => {
-						timezone = w.detail.label
+					sortBy={(a, b) => {
+						if (a.group[0] === '+' && b.group[0] === '-') return -1
+						if (a.group[0] === '-' && b.group[0] === '+') return 1
+						return a.group.localeCompare(b.group)
 					}}
-					value={timezone}
 				/>
 			{/if}
 		</Label>
diff --git a/frontend/src/lib/components/DBManager.svelte b/frontend/src/lib/components/DBManager.svelte
index cfca62c71b..96381dafc2 100644
--- a/frontend/src/lib/components/DBManager.svelte
+++ b/frontend/src/lib/components/DBManager.svelte
@@ -203,4 +203,4 @@
 			/>
 		</DrawerContent>
 	</Drawer>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/frontend/src/lib/components/DBManagerDrawerButton.svelte b/frontend/src/lib/components/DBManagerDrawerButton.svelte
index 1120f4211f..583d5a71ac 100644
--- a/frontend/src/lib/components/DBManagerDrawerButton.svelte
+++ b/frontend/src/lib/components/DBManagerDrawerButton.svelte
@@ -18,7 +18,7 @@
 	import { Alert } from './common'
 	import { dbDeleteTableActionWithPreviewScript, dbTableOpsWithPreviewScripts } from './dbOps'
 	import { makeCreateTableQuery } from './apps/components/display/dbtable/queries/createTable'
-	import { runPreviewJobAndPollResult } from './jobs/utils'
+	import { runScriptAndPollResult } from './jobs/utils'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import SqlRepl from './SqlRepl.svelte'
 	import SimpleAgTable from './SimpleAgTable.svelte'
@@ -208,7 +208,7 @@
 								previewSql: (values) =>
 									makeCreateTableQuery(values, resourceType, selectedSchemaKey),
 								async onConfirm(values) {
-									await runPreviewJobAndPollResult({
+									await runScriptAndPollResult({
 										workspace: $workspaceStore,
 										requestBody: {
 											args: { database: '$res:' + resourcePath },
@@ -249,7 +249,7 @@
 					</Pane>
 				</Splitpanes>
 			{/if}
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				<Button
 					loading={refreshing}
 					on:click={() => refresh()}
@@ -266,7 +266,7 @@
 					size="xs"
 					color="light"
 				/>
-			</svelte:fragment>
+			{/snippet}
 		</DrawerContent>
 	</Drawer>
 {/if}
diff --git a/frontend/src/lib/components/DBSchemaExplorer.svelte b/frontend/src/lib/components/DBSchemaExplorer.svelte
index 38671075bf..b1fc1a60da 100644
--- a/frontend/src/lib/components/DBSchemaExplorer.svelte
+++ b/frontend/src/lib/components/DBSchemaExplorer.svelte
@@ -24,10 +24,11 @@
 		class="mb-4"
 		selected={dbSchema.publicOnly ? 'dbo' : 'all'}
 		on:selected={handleSelected}
-		let:item
 	>
-		<ToggleButton value="dbo" label={dbSchema.schema.dbo ? 'Dbo' : 'Public'} {item} />
-		<ToggleButton value="all" label="All" {item} />
+		{#snippet children({ item })}
+			<ToggleButton value="dbo" label={dbSchema.schema.dbo ? 'Dbo' : 'Public'} {item} />
+			<ToggleButton value="all" label="All" {item} />
+		{/snippet}
 	</ToggleButtonGroup>
 {/if}
 {#if dbSchema.lang === 'graphql'}
diff --git a/frontend/src/lib/components/DBTable.svelte b/frontend/src/lib/components/DBTable.svelte
index 337f66b0fd..01c32e6b36 100644
--- a/frontend/src/lib/components/DBTable.svelte
+++ b/frontend/src/lib/components/DBTable.svelte
@@ -13,6 +13,7 @@
 	import { deepEqual } from 'fast-equals'
 	import 'ag-grid-community/styles/ag-grid.css'
 	import '$lib/components/apps/components/display/table/theme/windmill-theme.css'
+	import { untrack } from 'svelte'
 
 	type Props = {
 		dbTableOps: IDbTableOps
@@ -45,7 +46,7 @@
 	let refreshCount = $state(0)
 	const refresh = () => (refreshCount += 1)
 
-	$effect(() => eGui && mountGrid())
+	$effect(() => eGui && untrack(() => mountGrid()))
 	function mountGrid() {
 		if (eGui && !api) {
 			createGrid(eGui, {
@@ -95,7 +96,7 @@
 		const key = { quicksearch, colDefs: dbTableOps.colDefs, refreshCount }
 		if (deepEqual(key, prevUpdateKey)) return
 		prevUpdateKey = key
-		updateGrid()
+		untrack(() => updateGrid())
 	})
 	function updateGrid() {
 		dbTableOps.getCount({ quicksearch }).then((result) => (rowCount = result))
diff --git a/frontend/src/lib/components/DBTableEditor.svelte b/frontend/src/lib/components/DBTableEditor.svelte
index 8381b60c45..bd9e108590 100644
--- a/frontend/src/lib/components/DBTableEditor.svelte
+++ b/frontend/src/lib/components/DBTableEditor.svelte
@@ -59,7 +59,6 @@
 		type DbType
 	} from './apps/components/display/dbtable/utils'
 	import { DB_TYPES } from '$lib/consts'
-	import Select from './apps/svelte-select/lib/Select.svelte'
 	import Popover from './meltComponents/Popover.svelte'
 	import Tooltip from './meltComponents/Tooltip.svelte'
 	import {
@@ -71,8 +70,8 @@
 	import { copyToClipboard } from '$lib/utils'
 	import { getFlatTableNamesFromSchema, type DBSchema } from '$lib/stores'
 	import { twMerge } from 'tailwind-merge'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
 	import DarkModeObserver from './DarkModeObserver.svelte'
+	import Select from './Select.svelte'
 
 	const { onConfirm, resourceType, previewSql, dbSchema, currentSchema }: DBTableEditorProps =
 		$props()
@@ -155,22 +154,19 @@
 							</Cell>
 							<Cell>
 								<Select
-									inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-									containerStyles={darkMode
-										? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-										: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-									class="!w-48"
-									value={column.datatype}
-									on:change={(e) => {
-										column.datatype = e.detail.value
-										if (datatypeHasLength(column.datatype)) {
-											column.datatype_length = datatypeDefaultLength(column.datatype)
-										} else {
-											column.datatype_length = undefined
+									bind:value={
+										() => column.datatype,
+										(v) => {
+											column.datatype = v
+											if (datatypeHasLength(column.datatype)) {
+												column.datatype_length = datatypeDefaultLength(column.datatype)
+											} else {
+												column.datatype_length = undefined
+											}
 										}
-									}}
-									items={columnTypes}
-									clearable={false}
+									}
+									items={columnTypes.map((type) => ({ value: type, label: type }))}
+									class="w-48"
 								/>
 							</Cell>
 							<Cell last class="flex items-center mt-1.5">
@@ -252,14 +248,12 @@
 						<tr>
 							<Cell first class="flex">
 								<Select
-									inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-									containerStyles={darkMode
-										? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-										: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-									class={twMerge('!w-48', fkErrors?.emptyTarget ? 'border !border-red-600/60' : '')}
+									inputClass={twMerge(
+										'!w-48',
+										fkErrors?.emptyTarget ? 'border !border-red-600/60' : ''
+									)}
 									placeholder=""
-									value={foreignKey.targetTable}
-									on:change={(e) => (foreignKey.targetTable = e.detail.value)}
+									bind:value={foreignKey.targetTable}
 									items={getFlatTableNamesFromSchema(dbSchema).map((o) => ({
 										value: o,
 										label:
@@ -268,7 +262,6 @@
 												? o.split('.')[1]
 												: o
 									}))}
-									clearable={false}
 								/>
 							</Cell>
 							<Cell>
@@ -277,47 +270,39 @@
 										<div class="flex">
 											<div class="flex items-center gap-1 w-60">
 												<!-- Div wrappers with absolute select are to prevent the Select content
-												 		 from overflowing -->
+												 		 from x-overflowing -->
 												<div class="grow h-[2rem] relative">
 													<Select
-														inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-														containerStyles={darkMode
-															? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-															: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-														class={twMerge(
-															'!absolute inset-0',
+														class="!absolute inset-0"
+														inputClass={twMerge(
 															fkErrors?.nonExistingSourceColumns.includes(column.sourceColumn)
 																? 'border !border-red-600/60'
 																: ''
 														)}
 														placeholder=""
-														value={column.sourceColumn}
-														on:change={(e) => (column.sourceColumn = e.detail.value)}
-														items={values.columns.map((c) => c.name)}
+														bind:value={column.sourceColumn}
+														items={values.columns
+															.filter((c) => c.name.length)
+															.map((c) => ({ value: c.name }))}
 														clearable={false}
 													/>
 												</div>
 												<ArrowRight size={16} class="h-fit shrink-0" />
 												<div class="grow h-[2rem] relative">
 													<Select
-														inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-														containerStyles={darkMode
-															? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-															: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-														class={twMerge(
-															'!absolute inset-0',
+														class="!absolute inset-0"
+														inputClass={twMerge(
 															fkErrors?.nonExistingTargetColumns.includes(column.targetColumn)
 																? 'border !border-red-600/60'
 																: ''
 														)}
 														placeholder=""
-														value={column.targetColumn}
-														on:change={(e) => (column.targetColumn = e.detail.value)}
+														bind:value={column.targetColumn}
 														items={Object.keys(
 															dbSchema?.schema?.[foreignKey.targetTable?.split('.')?.[0] ?? '']?.[
 																foreignKey.targetTable?.split('.')[1]
 															] ?? {}
-														)}
+														).map((value) => ({ value }))}
 														clearable={false}
 													/>
 												</div>
diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte
index cee3250db1..a583f9b6e3 100644
--- a/frontend/src/lib/components/DateTimeInput.svelte
+++ b/frontend/src/lib/components/DateTimeInput.svelte
@@ -1,24 +1,39 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
+	import { createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { Button } from './common'
 	import { Clock, X } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 	// import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
-	// import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 
-	export let value: string | undefined = undefined
+	interface Props {
+		// import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+		value?: string | undefined
+		clearable?: boolean
+		autofocus?: boolean | null
+		useDropdown?: boolean
+		minDate?: string | undefined
+		maxDate?: string | undefined
+		disabled?: boolean | undefined
+		inputClass?: string | undefined
+	}
 
-	export let clearable: boolean = false
-	export let autofocus: boolean | null = false
-	export let useDropdown: boolean = false
-	export let minDate: string | undefined = undefined
-	export let maxDate: string | undefined = undefined
-	export let disabled: boolean | undefined = undefined
-	export let inputClass: string | undefined = undefined
+	let {
+		value = $bindable(undefined),
+		clearable = false,
+		autofocus = false,
+		useDropdown = false,
+		minDate = undefined,
+		maxDate = undefined,
+		disabled = undefined,
+		inputClass = undefined
+	}: Props = $props()
 
-	let date: string | undefined = undefined
-	let time: string | undefined = undefined
+	let date: string | undefined = $state(undefined)
+	let time: string | undefined = $state(undefined)
 
 	// let format: 'local' | 'utc' = 'local'
 
@@ -38,10 +53,15 @@
 			: '12:00'
 	}
 
-	$: parseValue(value)
+	$effect(() => {
+		value
+		untrack(() => {
+			parseValue(value)
+		})
+	})
 
-	let initialDate = date
-	let initialTime = time
+	let initialDate = untrack(() => date)
+	let initialTime = untrack(() => time)
 
 	function parseDateAndTime(date: string | undefined, time: string | undefined) {
 		if (date && time && (initialDate != date || initialTime != time)) {
@@ -54,7 +74,12 @@
 		}
 	}
 
-	$: parseDateAndTime(date, time)
+	$effect(() => {
+		;[date, time]
+		untrack(() => {
+			parseDateAndTime(date, time)
+		})
+	})
 
 	function isValidDate(d: Date | undefined): boolean {
 		return d instanceof Date && !isNaN(d as any)
@@ -73,8 +98,13 @@
 	let randomId = 'datetarget-' + Math.random().toString(36).substring(7)
 </script>
 
-<div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
-	<!-- svelte-ignore a11y-autofocus -->
+<div
+	class="flex flex-row gap-1 items-center w-full"
+	id={randomId}
+	onpointerdown={bubble('pointerdown')}
+	onfocus={bubble('focus')}
+>
+	<!-- svelte-ignore a11y_autofocus -->
 	<input
 		type="date"
 		bind:value={date}
diff --git a/frontend/src/lib/components/DeployWorkspaceDrawer.svelte b/frontend/src/lib/components/DeployWorkspaceDrawer.svelte
index 280a8900a4..6a83d96393 100644
--- a/frontend/src/lib/components/DeployWorkspaceDrawer.svelte
+++ b/frontend/src/lib/components/DeployWorkspaceDrawer.svelte
@@ -36,11 +36,11 @@
 			/>
 		{/if}
 
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				disabled={workspaceToDeployTo == undefined}
 				on:click={() => deployWorkspace?.deployAll()}>Deploy All</Button
 			>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index 7a91c3b34e..f226430d83 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
-	import { Button, Drawer } from '$lib/components/common'
+	import { Button } from '$lib/components/common'
 	import { WindmillIcon } from '$lib/components/icons'
 	import LogPanel from '$lib/components/scriptEditor/LogPanel.svelte'
 	import {
@@ -11,18 +11,15 @@
 		OpenAPI,
 		type Preview,
 		type OpenFlow,
-		type FlowModule,
 		WorkspaceService,
 		type InputTransform,
-		type RawScript,
-		type PathScript,
 		type TriggersCount
 	} from '$lib/gen'
 	import { inferArgs } from '$lib/infer'
 	import { setCopilotInfo, userStore, workspaceStore } from '$lib/stores'
 	import { emptySchema, sendUserToast } from '$lib/utils'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import { onDestroy, onMount, setContext } from 'svelte'
+	import { onDestroy, onMount, setContext, untrack } from 'svelte'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
 	import { page } from '$app/stores'
 	import { getUserExt } from '$lib/user'
@@ -39,8 +36,7 @@
 	import { CornerDownLeft, Play } from 'lucide-svelte'
 	import Toggle from './Toggle.svelte'
 	import { setLicense } from '$lib/enterpriseUtils'
-	import type { FlowCopilotContext, FlowCopilotModule } from './copilot/flow'
-	import { pickScript } from './flows/flowStateUtils'
+	import type { FlowCopilotContext } from './copilot/flow'
 	import {
 		approximateFindPythonRelativePath,
 		isTypescriptRelativePath,
@@ -52,22 +48,8 @@
 	import type { FlowPropPickerConfig, PropPickerContext } from './prop_picker'
 	import type { PickableProperties } from './flows/previousResults'
 	import { Triggers } from './triggers/triggers.svelte'
-	$: token = $page.url.searchParams.get('wm_token') ?? undefined
-	$: workspace = $page.url.searchParams.get('workspace') ?? undefined
-	$: themeDarkRaw = $page.url.searchParams.get('activeColorTheme')
-	$: themeDark = themeDarkRaw == '2' || themeDarkRaw == '4'
-
-	$: if (token) {
-		OpenAPI.WITH_CREDENTIALS = true
-		OpenAPI.TOKEN = token
-		loadUser()
-	}
 
 	let flowCopilotContext: FlowCopilotContext = {
-		drawerStore: writable<Drawer | undefined>(undefined),
-		modulesStore: writable<FlowCopilotModule[]>([]),
-		currentStepStore: writable<string | undefined>(undefined),
-		genFlow,
 		shouldUpdatePropertyType: writable<{
 			[key: string]: 'static' | 'javascript' | undefined
 		}>({}),
@@ -79,33 +61,6 @@
 		}>({}),
 		stepInputsLoading: writable<boolean>(false)
 	}
-	const { modulesStore } = flowCopilotContext
-
-	async function genFlow(idx: number, flowModules: FlowModule[], stepOnly = false) {
-		let module = stepOnly ? $modulesStore[0] : $modulesStore[idx]
-
-		if (module && module.selectedCompletion) {
-			const [hubScriptModule, hubScriptState] = await pickScript(
-				module.selectedCompletion.path,
-				`${module.selectedCompletion.summary} (${module.selectedCompletion.app})`,
-				module.id,
-				undefined
-			)
-			const flowModule: FlowModule & {
-				value: RawScript | PathScript
-			} = {
-				id: module.id,
-				value: hubScriptModule.value,
-				summary: hubScriptModule.summary
-			}
-
-			$flowStateStore[module.id] = hubScriptState
-
-			flowModules.splice(idx, 0, flowModule)
-			$flowStore = $flowStore
-			sendUserToast('Added module', false)
-		}
-	}
 
 	setContext('FlowCopilotContext', flowCopilotContext)
 
@@ -121,14 +76,6 @@
 			}
 		}
 	}
-	$: if (workspace) {
-		$workspaceStore = workspace
-		setupCopilotInfo()
-	}
-
-	$: if (workspace && token) {
-		loadUser()
-	}
 
 	async function loadUser() {
 		try {
@@ -139,31 +86,26 @@
 		}
 	}
 
-	let darkModeToggle: DarkModeToggle
-	let darkMode: boolean | undefined = undefined
-	let modeInitialized = false
+	let darkModeToggle: DarkModeToggle | undefined = $state()
+	let darkMode: boolean | undefined = $state(undefined)
+	let modeInitialized = $state(false)
 	function initializeMode() {
 		modeInitialized = true
-		darkModeToggle.toggle()
+		darkModeToggle?.toggle()
 	}
-	$: darkModeToggle &&
-		themeDark != darkMode &&
-		darkMode != undefined &&
-		!modeInitialized &&
-		initializeMode()
 
-	let testJobLoader: TestJobLoader
+	let testJobLoader: TestJobLoader | undefined = $state()
 	let socket: WebSocket | undefined = undefined
 
 	// Test args input
-	let args: Record<string, any> = {}
-	let isValid: boolean = true
+	let args: Record<string, any> = $state({})
+	let isValid: boolean = $state(true)
 
 	// Test
-	let testIsLoading = false
-	let testJob: Job | undefined
-	let pastPreviews: CompletedJob[] = []
-	let validCode = true
+	let testIsLoading = $state(false)
+	let testJob: Job | undefined = $state()
+	let pastPreviews: CompletedJob[] = $state([])
+	let validCode = $state(true)
 
 	type LastEditScript = {
 		content: string
@@ -174,9 +116,9 @@
 		tag?: string
 	}
 
-	let currentScript: LastEditScript | undefined = undefined
+	let currentScript: LastEditScript | undefined = $state(undefined)
 
-	let schema = emptySchema()
+	let schema = $state(emptySchema())
 	const href = window.location.href
 	const indexQ = href.indexOf('?')
 	const searchParams = indexQ > -1 ? new URLSearchParams(href.substring(indexQ)) : undefined
@@ -185,12 +127,12 @@
 		connectWs()
 	}
 
-	let useLock = false
+	let useLock = $state(false)
 
 	let lockChanges = false
 	let timeout: NodeJS.Timeout | undefined = undefined
 
-	let loadingCodebaseButton = false
+	let loadingCodebaseButton = $state(false)
 	let lastCommandId = ''
 
 	const el = (event) => {
@@ -208,7 +150,7 @@
 			}
 		} else if (event.data.type == 'testPreviewBundle') {
 			if (event.data.id == lastCommandId && currentScript) {
-				testJobLoader.runPreview(
+				testJobLoader?.runPreview(
 					currentScript.path,
 					event.data.file,
 					currentScript.language,
@@ -367,7 +309,7 @@
 		}
 	}
 
-	let typescriptBundlePreviewMode = false
+	let typescriptBundlePreviewMode = $state(false)
 	function runTest() {
 		if (mode == 'script') {
 			if (!currentScript) {
@@ -425,7 +367,7 @@
 		}
 	}
 
-	let relativePaths: any[] = []
+	let relativePaths: any[] = $state([])
 	let lastPath: string | undefined = undefined
 	async function replaceScript(lastEdit: LastEditScript) {
 		mode = 'script'
@@ -450,14 +392,16 @@
 		}
 	}
 
-	let mode: 'script' | 'flow' = 'script'
+	let mode: 'script' | 'flow' = $state('script')
 
-	const flowStore = writable({
-		summary: '',
-		value: { modules: [] },
-		extra_perms: {},
-		schema: emptySchema()
-	} as OpenFlow)
+	const flowStore = $state({
+		val: {
+			summary: '',
+			value: { modules: [] },
+			extra_perms: {},
+			schema: emptySchema()
+		} as OpenFlow
+	})
 
 	type LastEditFlow = {
 		flow: OpenFlow
@@ -470,14 +414,14 @@
 		// sendUserToast(JSON.stringify(lastEdit.flow), true)
 		// return
 		try {
-			if (!deepEqual(lastEdit.flow, $flowStore)) {
+			if (!deepEqual(lastEdit.flow, flowStore)) {
 				if (!lastEdit.flow.summary) {
 					lastEdit.flow.summary = 'New flow'
 				}
 				if (!lastEdit.flow.value?.modules) {
 					lastEdit.flow.value = { modules: [] }
 				}
-				$flowStore = lastEdit.flow
+				flowStore.val = lastEdit.flow
 				inferModuleArgs($selectedIdStore)
 			}
 		} catch (e) {
@@ -487,10 +431,10 @@
 
 	const flowStateStore = writable({} as FlowState)
 
-	const previewArgsStore = writable<Record<string, any>>({})
+	const previewArgsStore = $state({ val: {} })
 	const scriptEditorDrawer = writable(undefined)
-	const moving = writable<{ module: FlowModule; modules: FlowModule[] } | undefined>(undefined)
-	const history = initHistory($flowStore)
+	const moving = writable<{ id: string } | undefined>(undefined)
+	const history = initHistory(flowStore.val)
 
 	const testStepStore = writable<Record<string, any>>({})
 	const selectedIdStore = writable('settings-metadata')
@@ -523,13 +467,13 @@
 			selectedTab: undefined,
 			editPanelSize: undefined,
 			payloadData: undefined
-		})
+		}),
+		currentEditor: writable(undefined)
 	})
 	setContext<PropPickerContext>('PropPickerContext', {
 		flowPropPickerConfig: writable<FlowPropPickerConfig | undefined>(undefined),
 		pickablePropertiesFiltered: writable<PickableProperties | undefined>(undefined)
 	})
-	$: updateFlow($flowStore)
 
 	let lastSent: OpenFlow | undefined = undefined
 	function updateFlow(flow: OpenFlow) {
@@ -542,17 +486,15 @@
 		}
 	}
 
-	$: $selectedIdStore && inferModuleArgs($selectedIdStore)
-
-	let flowPreviewButtons: FlowPreviewButtons
-	let reload = 0
+	let flowPreviewButtons: FlowPreviewButtons | undefined = $state()
+	let reload = $state(0)
 
 	async function inferModuleArgs(selectedIdStore: string) {
 		if (selectedIdStore == '') {
 			return
 		}
 		//@ts-ignore
-		dfs($flowStore.value.modules, async (mod) => {
+		dfs(flowStore.value.modules, async (mod) => {
 			if (mod.id == selectedIdStore) {
 				if (
 					mod.value.type == 'rawscript' ||
@@ -577,9 +519,44 @@
 			}
 		})
 	}
+	let token = $derived($page.url.searchParams.get('wm_token') ?? undefined)
+	let workspace = $derived($page.url.searchParams.get('workspace') ?? undefined)
+	let themeDarkRaw = $derived($page.url.searchParams.get('activeColorTheme'))
+	let themeDark = $derived(themeDarkRaw == '2' || themeDarkRaw == '4')
+	$effect(() => {
+		if (token) {
+			OpenAPI.WITH_CREDENTIALS = true
+			OpenAPI.TOKEN = token
+			untrack(() => loadUser())
+		}
+	})
+	$effect(() => {
+		if (workspace) {
+			$workspaceStore = workspace
+			untrack(() => setupCopilotInfo())
+		}
+	})
+	$effect(() => {
+		if (workspace && token) {
+			untrack(() => loadUser())
+		}
+	})
+	$effect(() => {
+		darkModeToggle &&
+			themeDark != darkMode &&
+			darkMode != undefined &&
+			!modeInitialized &&
+			untrack(() => initializeMode())
+	})
+	$effect(() => {
+		flowStore.val && untrack(() => updateFlow(flowStore.val))
+	})
+	$effect(() => {
+		$selectedIdStore && untrack(() => inferModuleArgs($selectedIdStore))
+	})
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 <TestJobLoader
 	on:done={loadPastTests}
@@ -719,10 +696,9 @@
 				</div>
 				<Splitpanes horizontal class="h-full max-h-screen grow">
 					<Pane size={67}>
-						{#if $flowStore?.value?.modules}
+						{#if flowStore.val?.value?.modules}
 							<div id="flow-editor"></div>
 							<FlowModuleSchemaMap
-								bind:modules={$flowStore.value.modules}
 								disableAi
 								disableTutorials
 								smallErrorHandler={true}
@@ -742,7 +718,7 @@
 										$testStepStore['preprocessor'] = ev.detail.args ?? {}
 										$selectedIdStore = 'preprocessor'
 									} else {
-										$previewArgsStore = ev.detail.args ?? {}
+										previewArgsStore.val = ev.detail.args ?? {}
 										flowPreviewButtons?.openPreview()
 									}
 								}}
diff --git a/frontend/src/lib/components/DiffDrawer.svelte b/frontend/src/lib/components/DiffDrawer.svelte
index 37979e28d0..5b96a668d6 100644
--- a/frontend/src/lib/components/DiffDrawer.svelte
+++ b/frontend/src/lib/components/DiffDrawer.svelte
@@ -55,7 +55,6 @@
 		diffViewer.closeDrawer()
 	}
 
-
 	function prepareDiff(data: Value) {
 		const metadata = structuredClone(cleanValueProperties(replaceFalseWithUndefined(data)))
 		const content = metadata['content']
@@ -126,8 +125,8 @@
 			data_[dataType]?.content !== data_.current.content
 				? 'content'
 				: data_[dataType]?.metadata !== data_.current.metadata
-				? 'metadata'
-				: undefined
+					? 'metadata'
+					: undefined
 	}
 
 	$: updateContentType(data, diffType)
@@ -256,7 +255,7 @@
 				<Loader2 class="animate-spin" />
 			{/if}
 		</div>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			{#if data?.button}
 				<Button
 					color="light"
@@ -268,6 +267,6 @@
 					}}>{data.button.text}</Button
 				>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index c03cfbf597..5df3253b0a 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import DisplayResult from './DisplayResult.svelte'
+
 	import { Highlight } from 'svelte-highlight'
 	import { json } from 'svelte-highlight/languages'
 	import { copyToClipboard, roughSizeOfObject } from '$lib/utils'
@@ -36,30 +38,12 @@
 	import type { DisplayResultUi } from './custom_ui'
 	import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte'
 	import { toJsonStr } from '$lib/utils'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
-
-	export let result: any
-	export let requireHtmlApproval = false
-	export let filename: string | undefined = undefined
-	export let disableExpand = false
-	export let jobId: string | undefined = undefined
-	export let workspaceId: string | undefined = undefined
-	export let hideAsJson: boolean = false
-	export let noControls: boolean = false
-	export let drawerOpen = false
-	export let nodeId: string | undefined = undefined
-	export let language: string | undefined = undefined
-	export let appPath: string | undefined = undefined
-	export let customUi: DisplayResultUi | undefined = undefined
-	export let isTest: boolean = true
-	export let externalToolbarAvailable: boolean = false
 
 	const IMG_MAX_SIZE = 10000000
 	const TABLE_MAX_SIZE = 5000000
 	const DISPLAY_MAX_SIZE = 100000
 
 	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
 	let resultKind:
 		| 'json'
@@ -82,14 +66,53 @@
 		| 'map'
 		| 'nondisplayable'
 		| 'pdf'
-		| undefined
+		| undefined = $state()
 
-	let hasBigInt = false
-	$: resultKind = inferResultKind(result)
+	let hasBigInt = $state(false)
 
-	export let forceJson = false
-	let enableHtml = false
-	let s3FileDisplayRawMode = false
+	interface Props {
+		result: any
+		requireHtmlApproval?: boolean
+		filename?: string | undefined
+		disableExpand?: boolean
+		jobId?: string | undefined
+		workspaceId?: string | undefined
+		hideAsJson?: boolean
+		noControls?: boolean
+		drawerOpen?: boolean
+		nodeId?: string | undefined
+		language?: string | undefined
+		appPath?: string | undefined
+		customUi?: DisplayResultUi | undefined
+		isTest?: boolean
+		externalToolbarAvailable?: boolean
+		forceJson?: boolean
+		copilot_fix?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		result,
+		requireHtmlApproval = false,
+		filename = undefined,
+		disableExpand = false,
+		jobId = undefined,
+		workspaceId = undefined,
+		hideAsJson = false,
+		noControls = false,
+		drawerOpen = $bindable(false),
+		nodeId = undefined,
+		language = undefined,
+		appPath = undefined,
+		customUi = undefined,
+		isTest = true,
+		externalToolbarAvailable = false,
+		forceJson = $bindable(false),
+		copilot_fix,
+		children
+	}: Props = $props()
+	let enableHtml = $state(false)
+	let s3FileDisplayRawMode = $state(false)
 
 	function isTableRow(result: any): boolean {
 		return Array.isArray(result) && result.every((x) => Array.isArray(x))
@@ -125,14 +148,14 @@
 		)
 	}
 
-	let largeObject: boolean | undefined = undefined
+	let largeObject: boolean | undefined = $state(undefined)
 
 	function checkIfS3(result: any, keys: string[]) {
 		return keys.includes('s3') && typeof result.s3 === 'string'
 	}
 
-	let is_render_all = false
-	let download_as_csv = false
+	let is_render_all = $state(false)
+	let download_as_csv = $state(false)
 	function inferResultKind(result: any) {
 		try {
 			if (result === 'WINDMILL_TOO_BIG') {
@@ -267,8 +290,8 @@
 		return 'json'
 	}
 
-	let jsonViewer: Drawer
-	let s3FileViewer: S3FilePicker
+	let jsonViewer: Drawer | undefined = $state()
+	let s3FileViewer: S3FilePicker | undefined = $state()
 
 	function checkIfHasBigInt(result: any) {
 		if (typeof result === 'number' && Number.isInteger(result) && !Number.isSafeInteger(result)) {
@@ -386,20 +409,20 @@
 	}
 
 	export function openDrawer() {
-		jsonViewer.openDrawer()
+		jsonViewer?.openDrawer()
 	}
 
-	let globalForceJson: boolean = false
+	let globalForceJson: boolean = $state(false)
 
-	let seeS3PreviewFileFromList = ''
+	let seeS3PreviewFileFromList = $state('')
 
 	const disableTooltips = hasContext('disableTooltips')
 		? getContext('disableTooltips') === true
 		: false
 
-	let resultHeaderHeight = 0
+	let resultHeaderHeight = $state(0)
 
-	let toolbarLocation: 'self' | 'external' | undefined = undefined
+	let toolbarLocation: 'self' | 'external' | undefined = $state(undefined)
 	function chooseToolbarLocation(shouldShowToolbar: boolean, resultHeaderHeight: number) {
 		if (!shouldShowToolbar) {
 			toolbarLocation = undefined
@@ -408,27 +431,32 @@
 		} else {
 			toolbarLocation = 'self'
 		}
-		dispatchIfMounted('toolbar-location-changed', toolbarLocation)
+		dispatch('toolbar-location-changed', toolbarLocation)
 	}
 
 	export function getToolbarLocation() {
 		return toolbarLocation
 	}
 
-	$: chooseToolbarLocation(
-		!is_render_all &&
-			resultKind != 'nondisplayable' &&
-			result != undefined &&
-			length != undefined &&
-			largeObject != undefined &&
-			!disableExpand &&
-			!noControls,
-		resultHeaderHeight
-	)
-
 	onDestroy(() => {
 		dispatch('toolbar-location-changed', undefined)
 	})
+	$effect(() => {
+		;[result]
+		resultKind = inferResultKind(result)
+	})
+	$effect(() => {
+		chooseToolbarLocation(
+			!is_render_all &&
+				resultKind != 'nondisplayable' &&
+				result != undefined &&
+				length != undefined &&
+				largeObject != undefined &&
+				!disableExpand &&
+				!noControls,
+			resultHeaderHeight
+		)
+	})
 </script>
 
 <HighlightTheme />
@@ -442,17 +470,18 @@
 					on:selected={(ev) => {
 						globalForceJson = ev.detail === 'json'
 					}}
-					let:item
 				>
-					<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} {item} />
+					{#snippet children({ item })}
+						<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} {item} />
 
-					<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
+						<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 		{/if}
 		<div class="flex flex-col w-full gap-10">
 			{#each result['render_all'] as res}
-				<svelte:self
+				<DisplayResult
 					{noControls}
 					result={res}
 					{requireHtmlApproval}
@@ -484,30 +513,31 @@
 					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}<ToggleButtonGroup
 							class="h-6"
 							selected={forceJson ? 'json' : resultKind?.startsWith('table-') ? 'table' : 'pretty'}
-							let:item
 							on:selected={(ev) => {
 								forceJson = ev.detail === 'json'
 							}}
 						>
-							{#if ['table-col', 'table-row', 'table-row-object'].includes(resultKind ?? '')}
-								<ToggleButton class="px-1.5" value="table" label="Table" icon={Table2} {item} />
-							{:else}
-								<ToggleButton
-									class="px-1.5"
-									value="pretty"
-									label="Pretty"
-									icon={Highlighter}
-									{item}
-								/>
-							{/if}
-							<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
+							{#snippet children({ item })}
+								{#if ['table-col', 'table-row', 'table-row-object'].includes(resultKind ?? '')}
+									<ToggleButton class="px-1.5" value="table" label="Table" icon={Table2} {item} />
+								{:else}
+									<ToggleButton
+										class="px-1.5"
+										value="pretty"
+										label="Pretty"
+										icon={Highlighter}
+										{item}
+									/>
+								{/if}
+								<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
+							{/snippet}
 						</ToggleButtonGroup>
 					{/if}
 				</div>
 
 				<div class="text-secondary text-xs flex gap-2.5 z-10 items-center">
 					{#if customUi?.disableAiFix !== true}
-						<slot name="copilot-fix" />
+						{@render copilot_fix?.()}
 					{/if}
 					{#if toolbarLocation === 'self'}
 						<!-- TODO : When svelte 5 is released, use a snippet to pass the toolbar to a parent -->
@@ -647,7 +677,7 @@
 								>{JSON.stringify(result.error.extra, null, 4)}</pre
 							>
 						{/if}
-						<slot />
+						{@render children?.()}
 					</div>
 					{#if !isTest && language === 'bun'}
 						<div class="pt-20"></div>
@@ -723,7 +753,7 @@
 								/>
 								<button
 									class="text-secondary underline text-2xs whitespace-nowrap"
-									on:click={() => {
+									onclick={() => {
 										s3FileViewer?.open?.(result)
 									}}
 									><span class="flex items-center gap-1"
@@ -738,7 +768,7 @@
 								<FileDownload {workspaceId} s3object={result} {appPath} />
 								<button
 									class="text-secondary underline text-2xs whitespace-nowrap"
-									on:click={() => {
+									onclick={() => {
 										s3FileViewer?.open?.(result)
 									}}
 									><span class="flex items-center gap-1"
@@ -813,7 +843,7 @@
 									/>
 									<button
 										class="text-secondary text-2xs whitespace-nowrap"
-										on:click={() => {
+										onclick={() => {
 											s3FileViewer?.open?.(s3object)
 										}}
 										><span class="flex items-center gap-1"
@@ -835,7 +865,7 @@
 										/>{:else}
 										<button
 											class="text-secondary whitespace-nowrap flex gap-2 items-center"
-											on:click={() => {
+											onclick={() => {
 												seeS3PreviewFileFromList = s3object?.s3
 											}}
 											>open table preview <ArrowDownFromLine />
@@ -855,7 +885,7 @@
 									{:else}
 										<button
 											class="text-secondary whitespace-nowrap flex gap-2 items-center"
-											on:click={() => {
+											onclick={() => {
 												seeS3PreviewFileFromList = s3object?.s3
 											}}
 											>open image preview <ArrowDownFromLine />
@@ -956,7 +986,7 @@
 	{#if !disableExpand && !noControls}
 		<Drawer bind:this={jsonViewer} bind:open={drawerOpen} size="900px">
 			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-				<svelte:fragment slot="actions">
+				{#snippet actions()}
 					{#if customUi?.disableDownload !== true}
 						<Button
 							download="{filename ?? 'result'}.json"
@@ -982,8 +1012,8 @@
 					>
 						Copy to clipboard
 					</Button>
-				</svelte:fragment>
-				<svelte:self
+				{/snippet}
+				<DisplayResult
 					{noControls}
 					{result}
 					{requireHtmlApproval}
diff --git a/frontend/src/lib/components/DraftBadge.svelte b/frontend/src/lib/components/DraftBadge.svelte
index fa9dc3a57d..e14cebb545 100644
--- a/frontend/src/lib/components/DraftBadge.svelte
+++ b/frontend/src/lib/components/DraftBadge.svelte
@@ -2,19 +2,27 @@
 	import Popover from './Popover.svelte'
 	import { Badge } from './common'
 
-	export let has_draft: boolean = false
-	export let draft_only: boolean = false
+	interface Props {
+		has_draft?: boolean
+		draft_only?: boolean
+	}
+
+	let { has_draft = false, draft_only = false }: Props = $props()
 </script>
 
 {#if has_draft}
 	{#if draft_only}
 		<Popover notClickable>
-			<svelte:fragment slot="text">Never deployed and is only a draft</svelte:fragment>
+			{#snippet text()}
+				Never deployed and is only a draft
+			{/snippet}
 			<Badge small color="indigo" baseClass="border border-indigo-200">Draft only</Badge>
 		</Popover>
 	{:else}
 		<Popover notClickable>
-			<svelte:fragment slot="text">Is deployed and has a draft</svelte:fragment>
+			{#snippet text()}
+				Is deployed and has a draft
+			{/snippet}
 			<Badge small color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
 		</Popover>
 	{/if}
diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index 6843c12927..a41ef9e50e 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -16,7 +16,10 @@
 	import ResolveOpen from '$lib/components/common/menu/ResolveOpen.svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { twMerge } from 'tailwind-merge'
+	import TriggerableByAI from './TriggerableByAI.svelte'
 
+	export let aiId: string | undefined = undefined
+	export let aiDescription: string | undefined = undefined
 	export let items: Item[] | (() => Item[]) | (() => Promise<Item[]>) = []
 	export let disabled = false
 	export let placement: Placement = 'bottom-end'
@@ -28,6 +31,8 @@
 	export let customWidth: number | undefined = undefined
 	export let customMenu = false
 
+	let buttonEl: HTMLButtonElement | undefined = undefined
+
 	const {
 		elements: { menu, item, trigger },
 		states,
@@ -76,7 +81,9 @@
 
 <ResolveOpen {open} on:open on:close />
 
+<TriggerableByAI id={aiId} description={aiDescription} onTrigger={() => buttonEl?.click()} />
 <button
+	bind:this={buttonEl}
 	class={twMerge('w-full flex items-center justify-end', fixedHeight && 'h-8', $$props.class)}
 	use:melt={$trigger}
 	{disabled}
@@ -116,7 +123,7 @@
 				class="bg-surface border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
 				style={customWidth ? `width: ${customWidth}px` : ''}
 			>
-				<DropdownV2Inner items={computeItems} meltItem={item} />
+				<DropdownV2Inner {aiId} items={computeItems} meltItem={item} />
 			</div>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte
index 3c657d7678..9ca0be7234 100644
--- a/frontend/src/lib/components/DropdownV2Inner.svelte
+++ b/frontend/src/lib/components/DropdownV2Inner.svelte
@@ -4,13 +4,16 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { MenubarMenuElements } from '@melt-ui/svelte'
 	import type { Item } from '$lib/utils'
+	import TriggerableByAI from './TriggerableByAI.svelte'
+	import { goto } from '$app/navigation'
 
 	interface Props {
+		aiId?: string
 		items?: Item[] | (() => Item[]) | (() => Promise<Item[]>)
 		meltItem: MenubarMenuElements['item']
 	}
 
-	let { items = [], meltItem }: Props = $props()
+	let { aiId, items = [], meltItem }: Props = $props()
 
 	let computedItems: Item[] | undefined = $state(undefined)
 	async function computeItems() {
@@ -27,29 +30,42 @@
 {#if computedItems}
 	<div class="flex flex-col">
 		{#each computedItems ?? [] as item}
-			<MenuItem
-				on:click={(e) => item?.action?.(e)}
-				href={item?.href}
-				disabled={item?.disabled}
-				class={twMerge(
-					'px-4 py-2 text-primary font-semibold hover:bg-surface-hover cursor-pointer text-xs transition-all',
-					'data-[highlighted]:bg-surface-hover',
-					'flex flex-row gap-2 items-center',
-					item?.disabled && 'text-gray-400 cursor-not-allowed',
-					item?.type === 'delete' &&
-						!item?.disabled &&
-						'text-red-500 hover:bg-red-100 hover:text-red-500 data-[highlighted]:text-red-500 data-[highlighted]:bg-red-100'
-				)}
-				item={meltItem}
+			<TriggerableByAI
+				id={`${aiId ? `${aiId}-${item.displayName}` : undefined}`}
+				description={item.displayName}
+				onTrigger={() => {
+					if (item.action) {
+						item.action({} as MouseEvent)
+					}
+					if (item.href) {
+						goto(item.href)
+					}
+				}}
 			>
-				{#if item.icon}
-					<item.icon size={14} color={item.iconColor} />
-				{/if}
-				<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
-					{item.displayName}
-				</p>
-				{@render item.extra?.()}
-			</MenuItem>
+				<MenuItem
+					on:click={(e) => item?.action?.(e)}
+					href={item?.href}
+					disabled={item?.disabled}
+					class={twMerge(
+						'px-4 py-2 text-primary font-semibold hover:bg-surface-hover cursor-pointer text-xs transition-all w-full',
+						'data-[highlighted]:bg-surface-hover',
+						'flex flex-row gap-2 items-center',
+						item?.disabled && 'text-gray-400 cursor-not-allowed',
+						item?.type === 'delete' &&
+							!item?.disabled &&
+							'text-red-500 hover:bg-red-100 hover:text-red-500 data-[highlighted]:text-red-500 data-[highlighted]:bg-red-100'
+					)}
+					item={meltItem}
+				>
+					{#if item.icon}
+						<item.icon size={14} color={item.iconColor} />
+					{/if}
+					<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
+						{item.displayName}
+					</p>
+					{@render item.extra?.()}
+				</MenuItem>
+			</TriggerableByAI>
 		{/each}
 	</div>
 {:else}
diff --git a/frontend/src/lib/components/DynSelect.svelte b/frontend/src/lib/components/DynSelect.svelte
index ad85299f69..0241ab90f5 100644
--- a/frontend/src/lib/components/DynSelect.svelte
+++ b/frontend/src/lib/components/DynSelect.svelte
@@ -2,11 +2,12 @@
 	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
 	import type { Script } from '$lib/gen'
 	import { deepEqual } from 'fast-equals'
-	import Select from './apps/svelte-select/lib/Select.svelte'
+	import SelectLegacy from './apps/svelte-select/lib/SelectLegacy.svelte'
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import ResultJobLoader from './ResultJobLoader.svelte'
 	import Tooltip from './Tooltip.svelte'
 	import { Loader2 } from 'lucide-svelte'
+	import { stateSnapshot } from '$lib/svelte5Utils.svelte'
 
 	export let value: any = undefined
 	export let helperScript:
@@ -74,7 +75,7 @@
 						{ ...args, text, _ENTRYPOINT_OVERRIDE: entrypoint },
 						undefined,
 						cb
-				  )
+					)
 				: resultJobLoader?.runScriptByHash(
 						helperScript?.hash ?? 'NO_HASH',
 						{
@@ -83,11 +84,11 @@
 							_ENTRYPOINT_OVERRIDE: entrypoint
 						},
 						cb
-				  )
+					)
 		})
 	}
 
-	let lastArgs = structuredClone({ ...args, [name]: undefined })
+	let lastArgs = structuredClone({ ...stateSnapshot(args), [name]: undefined })
 	$: (entrypoint || helperScript) && refreshOptions()
 
 	$: args && changeArgs()
@@ -96,7 +97,7 @@
 	function changeArgs() {
 		timeout && clearTimeout(timeout)
 		timeout = setTimeout(() => {
-			let argsWithoutSelf = { ...args, [name]: undefined }
+			let argsWithoutSelf = { ...stateSnapshot(args), [name]: undefined }
 			if (deepEqual(argsWithoutSelf, lastArgs)) {
 				return
 			}
@@ -123,7 +124,7 @@
 	<div class="w-full flex-col flex">
 		<div class="w-full">
 			{#key renderCount}
-				<Select
+				<SelectLegacy
 					on:error={(e) => {
 						error = e.detail.details
 					}}
diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index a39314824c..b19325f45b 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler, preventDefault, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import type { Schema } from '$lib/common'
 	import { VariableService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -11,7 +14,7 @@
 	import FlowPropertyEditor from './schema/FlowPropertyEditor.svelte'
 	import PropertyEditor from './schema/PropertyEditor.svelte'
 	import SimpleEditor from './SimpleEditor.svelte'
-	import { createEventDispatcher, tick } from 'svelte'
+	import { createEventDispatcher, tick, untrack } from 'svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import Label from './Label.svelte'
@@ -22,72 +25,110 @@
 	import SchemaFormDnd from './schema/SchemaFormDND.svelte'
 	import { deepEqual } from 'fast-equals'
 	import { tweened } from 'svelte/motion'
-	import type { SchemaDiff } from '$lib/components/schema/schemaUtils'
+	import type { SchemaDiff } from '$lib/components/schema/schemaUtils.svelte'
 	import type { EditableSchemaFormUi } from '$lib/components/custom_ui'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
-
-	export let schema: Schema | any
-	export let hiddenArgs: string[] = []
-	export let args: Record<string, any> = {}
-	export let shouldHideNoInputs: boolean = false
-	export let noVariablePicker = false
-	export let flexWrap = false
-	export let uiOnly: boolean = false
-	export let isFlowInput: boolean = false
-	export let noPreview: boolean = false
-	export let jsonEnabled: boolean = true
-	export let isAppInput: boolean = false
-	export let displayWebhookWarning: boolean = false
-	export let onlyMaskPassword: boolean = false
-	export let dndType: string | undefined = undefined
-	export let editTab:
-		| 'inputEditor'
-		| 'history'
-		| 'savedInputs'
-		| 'json'
-		| 'captures'
-		| 'firstStepInputs'
-		| undefined
-	export let previewSchema: Record<string, any> | undefined = undefined
-	export let editPanelInitialSize: number | undefined = undefined
-	export let editPanelSize = 0
-	export let diff: Record<string, SchemaDiff> = {}
-	export let disableDnd: boolean = false
-	export let shouldDispatchChanges: boolean = false
-	export let isValid: boolean = true
-	export let customUi: EditableSchemaFormUi | undefined = undefined
 
+	// export let openEditTab: () => void = () => {}
 	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
-	let clazz: string = ''
-	export { clazz as class }
-
-	$: if (args == undefined || typeof args !== 'object') {
-		args = {}
+	interface Props {
+		schema: Schema | any
+		hiddenArgs?: string[]
+		args?: Record<string, any>
+		shouldHideNoInputs?: boolean
+		noVariablePicker?: boolean
+		flexWrap?: boolean
+		uiOnly?: boolean
+		isFlowInput?: boolean
+		noPreview?: boolean
+		jsonEnabled?: boolean
+		isAppInput?: boolean
+		displayWebhookWarning?: boolean
+		onlyMaskPassword?: boolean
+		dndType?: string | undefined
+		editTab:
+			| 'inputEditor'
+			| 'history'
+			| 'savedInputs'
+			| 'json'
+			| 'captures'
+			| 'firstStepInputs'
+			| undefined
+		previewSchema?: Record<string, any> | undefined
+		editPanelInitialSize?: number | undefined
+		editPanelSize?: number
+		diff?: Record<string, SchemaDiff>
+		disableDnd?: boolean
+		shouldDispatchChanges?: boolean
+		isValid?: boolean
+		customUi?: EditableSchemaFormUi | undefined
+		pannelExtraButtonWidth?: number
+		class?: string
+		openEditTab?: import('svelte').Snippet
+		addProperty?: import('svelte').Snippet
+		runButton?: import('svelte').Snippet
+		extraTab?: import('svelte').Snippet
 	}
 
+	let {
+		schema = $bindable(),
+		hiddenArgs = [],
+		args = $bindable(undefined),
+		shouldHideNoInputs = false,
+		noVariablePicker = false,
+		flexWrap = false,
+		uiOnly = false,
+		isFlowInput = false,
+		noPreview = false,
+		jsonEnabled = true,
+		isAppInput = false,
+		displayWebhookWarning = false,
+		onlyMaskPassword = false,
+		dndType = undefined,
+		editTab,
+		previewSchema = undefined,
+		editPanelInitialSize = undefined,
+		editPanelSize = $bindable(0),
+		diff = {},
+		disableDnd = false,
+		shouldDispatchChanges = false,
+		isValid = $bindable(true),
+		customUi = undefined,
+		pannelExtraButtonWidth = 0,
+		class: clazz = '',
+		openEditTab,
+		addProperty,
+		runButton,
+		extraTab
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (args == undefined) {
+			args = {}
+		}
+	})
+
 	export function setDefaults() {
 		const nargs = {}
 
 		Object.keys(schema?.properties ?? {}).forEach((key) => {
-			if (schema?.properties[key].default != undefined && args[key] == undefined) {
+			if (schema?.properties[key].default != undefined && args?.[key] == undefined) {
 				let value = schema?.properties[key].default
-				nargs[key] = value === 'object' ? structuredClone(value) : value
+				nargs[key] = value === 'object' ? structuredClone($state.snapshot(value)) : value
 			}
 		})
 		args = nargs
 	}
 
 	let pickForField: string | undefined
-	let itemPicker: ItemPicker | undefined = undefined
-	let variableEditor: VariableEditor | undefined = undefined
+	let itemPicker: ItemPicker | undefined = $state(undefined)
+	let variableEditor: VariableEditor | undefined = $state(undefined)
 
-	let keys: string[] = Array.isArray(schema?.order)
-		? [...schema.order]
-		: (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {}))
-
-	$: schema && onSchemaChange()
+	let keys: string[] = $state(
+		Array.isArray(schema?.order)
+			? [...schema.order]
+			: (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {}))
+	)
 
 	function alignOrderWithProperties(schema: {
 		properties: Record<string, any>
@@ -134,15 +175,25 @@
 		}
 	}
 
-	let opened: string | undefined = keys[0]
-	let selected = ''
+	let opened: string | undefined = $state(untrack(() => keys[0]))
+
+	function computeSelected(property: any) {
+		if (!opened) return ''
+		return property.type !== 'object'
+			? property.type
+			: property.format === 'resource-s3_object'
+				? 'S3'
+				: property.oneOf && property.oneOf.length >= 2
+					? 'oneOf'
+					: 'object'
+	}
 
 	export function openField(key: string) {
 		opened = key
 	}
 
 	export function deleteField(key: string) {
-		delete args[key]
+		delete args?.[key]
 		delete schema.properties[key]
 		if (schema.required?.includes(key)) {
 			schema.required = schema.required?.filter((x) => x !== key)
@@ -152,20 +203,6 @@
 		}
 	}
 
-	$: opened && updateSelected(schema.properties[opened])
-	function updateSelected(property: any) {
-		if (!property) return
-		selected = opened
-			? property.type !== 'object'
-				? property.type
-				: property.format === 'resource-s3_object'
-					? 'S3'
-					: property.oneOf && property.oneOf.length >= 2
-						? 'oneOf'
-						: 'object'
-			: ''
-	}
-
 	function renameProperty(oldName: string, key: string) {
 		const el = document.getElementById(key) as HTMLInputElement
 		const newName = el.value
@@ -179,8 +216,10 @@
 			// clear the input
 			el.value = oldName
 		} else {
-			args[newName] = args[oldName]
-			delete args[oldName]
+			if (args) {
+				args[newName] = args[oldName]
+				delete args[oldName]
+			}
 
 			schema.properties[newName] = schema.properties[oldName]
 			delete schema.properties[oldName]
@@ -199,26 +238,34 @@
 
 			opened = newName
 
-			schema = schema
+			schema = $state.snapshot(schema)
 			dispatch('change', schema)
-			sendUserToast('Argument renamed successfully')
+			sendUserToast('Argument renamed')
 		}
 	}
 
-	let jsonView: boolean = customUi?.jsonOnly == true
-	let schemaString: string = JSON.stringify(schema, null, '\t')
-	let error: string | undefined = undefined
-	let editor: SimpleEditor | undefined = undefined
+	let jsonView: boolean = $state(customUi?.jsonOnly == true)
+	let schemaString: string = $state(JSON.stringify(schema, null, '\t'))
+	let error: string | undefined = $state(undefined)
+	let editor: SimpleEditor | undefined = $state(undefined)
+
+	export function updateJson() {
+		schemaString = JSON.stringify(schema, null, '\t')
+		editor?.setCode(schemaString)
+	}
 
 	const editTabDefaultSize = noPreview ? 100 : 50
 	editPanelSize = editTab ? (editPanelInitialSize ?? editTabDefaultSize) : 0
-	let inputPanelSize = 100 - editPanelSize
+	let inputPanelSize = $state(100 - editPanelSize)
 	let editPanelSizeSmooth = tweened(editPanelSize, {
 		duration: 150
 	})
-	let inputPanelSizeSmooth = tweened(inputPanelSize, { duration: 150 })
+	let inputPanelSizeSmooth = tweened(
+		untrack(() => inputPanelSize),
+		{ duration: 150 }
+	)
 
-	function openEditTab() {
+	function openEditTabFn() {
 		if (editPanelSize > 0) return
 		editPanelSizeSmooth.set(editTabDefaultSize)
 		inputPanelSizeSmooth.set(100 - editTabDefaultSize)
@@ -232,19 +279,24 @@
 	function updatePanelSizes(editSize: number, inputSize: number) {
 		editPanelSize = editSize
 		inputPanelSize = inputSize
-		dispatchIfMounted('editPanelSizeChanged', editSize)
+		dispatch('editPanelSizeChanged', editSize)
 	}
-	$: updatePanelSizes($editPanelSizeSmooth, $inputPanelSizeSmooth)
 
-	$: !!editTab ? openEditTab() : closeEditTab()
-
-	let panelButtonWidth: number = 0
-	export let pannelExtraButtonWidth: number = 0
-
-	export function updateJson() {
-		schemaString = JSON.stringify(schema, null, '\t')
-		editor?.setCode(schemaString)
-	}
+	let panelButtonWidth: number = $state(0)
+	$effect(() => {
+		if (args == undefined || typeof args !== 'object') {
+			args = {}
+		}
+	})
+	$effect(() => {
+		schema && untrack(() => onSchemaChange())
+	})
+	$effect(() => {
+		updatePanelSizes($editPanelSizeSmooth, $inputPanelSizeSmooth)
+	})
+	$effect(() => {
+		!!editTab ? openEditTabFn() : closeEditTab()
+	})
 </script>
 
 <div class="w-full h-full">
@@ -254,37 +306,41 @@
 			style="right: calc({editPanelSize}% - 1px - {pannelExtraButtonWidth}px); top: 0px;"
 			bind:clientWidth={panelButtonWidth}
 		>
-			<slot name="openEditTab" />
+			{@render openEditTab?.()}
 		</div>
 	</div>
 	<Splitpanes class="splitter-hidden w-full">
 		{#if !noPreview}
 			<Pane bind:size={inputPanelSize} minSize={20}>
 				<div
-					class="h-full flex flex-col gap-2 {$$slots.openEditTab && editPanelSize > 0
+					class="h-full flex flex-col gap-2 {openEditTab && editPanelSize > 0
 						? 'pr-[38px]'
 						: 'pr-2'}"
 				>
-					{#if $$slots.addProperty}
+					{#if addProperty}
 						<div class="w-full justify-left pr-2 grow-0">
 							<div
 								style={editPanelSize > 0
 									? `width: 100%;`
 									: `width: calc(100% - ${panelButtonWidth - pannelExtraButtonWidth}px);`}
 							>
-								<slot name="addProperty" />
+								{@render addProperty?.()}
 							</div>
 						</div>
 					{/if}
 
 					<div
-						class="min-h-0 overflow-y-auto grow rounded-md {$$slots.runButton
-							? 'flex flex-col gap-2'
-							: ''}"
+						class="min-h-0 overflow-y-auto grow rounded-md {runButton ? 'flex flex-col gap-2' : ''}"
 					>
 						<SchemaFormDnd
 							nestedClasses={'flex flex-col gap-1'}
-							schema={previewSchema ? previewSchema : schema}
+							bind:schema={
+								() => (previewSchema ? previewSchema : schema),
+								(newSchema) => {
+									schema = newSchema
+									tick().then(() => dispatch('change', schema))
+								}
+							}
 							{dndType}
 							{disableDnd}
 							{onlyMaskPassword}
@@ -293,12 +349,10 @@
 								opened = e.detail
 							}}
 							on:reorder={(e) => {
-								schema.order = e.detail
-								schema = schema
-								tick().then(() => dispatch('change', schema))
-							}}
-							on:change={() => {
-								schema = schema
+								schema = {
+									...schema,
+									order: e.detail
+								}
 								tick().then(() => dispatch('change', schema))
 							}}
 							prettifyHeader={isAppInput}
@@ -314,7 +368,7 @@
 							noVariablePicker={noVariablePicker || customUi?.disableVariablePicker === true}
 						/>
 
-						<slot name="runButton" />
+						{@render runButton?.()}
 					</div>
 				</div>
 			</Pane>
@@ -327,7 +381,7 @@
 				class={twMerge('border rounded-md', panelButtonWidth > 0 ? 'rounded-tl-none' : '')}
 			>
 				{#if editTab !== 'inputEditor'}
-					<slot name="extraTab" />
+					{@render extraTab?.()}
 				{:else}
 					<!-- WIP -->
 					{#if jsonEnabled && customUi?.jsonOnly != true}
@@ -357,14 +411,14 @@
 							{#if keys.length > 0}
 								{#each keys as argName, i (argName)}
 									<div>
-										<!-- svelte-ignore a11y-click-events-have-key-events -->
-										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
 										<div
 											class={twMerge(
 												'w-full flex bg-gray-50 dark:bg-gray-800 px-4 py-1 justify-between items-center hover:bg-gray-100 cursor-pointer',
 												opened === argName ? 'bg-gray-100 hover:bg-gray-200' : ''
 											)}
-											on:click={() => {
+											onclick={() => {
 												if (opened === argName) {
 													opened = undefined
 												} else {
@@ -375,9 +429,9 @@
 											<div class="flex flex-row gap-2">
 												{argName}
 												{#if !uiOnly}
-													<div on:click|stopPropagation|preventDefault>
+													<div onclick={stopPropagation(preventDefault(bubble('click')))}>
 														<Popover placement="bottom-end" containerClasses="p-4" closeButton>
-															<svelte:fragment slot="trigger">
+															{#snippet trigger()}
 																<Button
 																	color="light"
 																	size="xs2"
@@ -385,8 +439,8 @@
 																	startIcon={{ icon: Pen }}
 																	iconOnly
 																/>
-															</svelte:fragment>
-															<svelte:fragment slot="content" let:close>
+															{/snippet}
+															{#snippet content({ close })}
 																<Label label="Name" class="p-4">
 																	<div class="flex flex-col gap-2">
 																		<input
@@ -394,7 +448,7 @@
 																			class="w-full !bg-surface"
 																			value={argName}
 																			id={argName + i}
-																			on:keydown={(event) => {
+																			onkeydown={(event) => {
 																				if (event.key === 'Enter') {
 																					renameProperty(argName, argName + i)
 																					close()
@@ -414,7 +468,7 @@
 																		</Button>
 																	</div>
 																</Label>
-															</svelte:fragment>
+															{/snippet}
 														</Popover>
 													</div>
 												{/if}
@@ -429,7 +483,7 @@
 													class="rounded-full p-1 text-gray-500 bg-white
 				duration-200 hover:bg-gray-600 focus:bg-gray-600 hover:text-white dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800"
 													aria-label="Clear"
-													on:click={() => {
+													onclick={() => {
 														dispatch('delete', argName)
 													}}
 												>
@@ -461,103 +515,103 @@
 															{isFlowInput}
 															{isAppInput}
 															on:change={() => {
-																schema = schema
+																schema = $state.snapshot(schema)
 																dispatch('change', schema)
 															}}
 														>
-															<svelte:fragment slot="typeeditor">
+															{#snippet typeeditor()}
 																{#if isFlowInput || isAppInput}
 																	<Label label="Type">
 																		<ToggleButtonGroup
 																			tabListClass="flex-wrap"
 																			class="h-auto"
-																			let:item
-																			bind:selected
+																			bind:selected={
+																				() => computeSelected(schema.properties[opened ?? '']),
+																				(v) => {
+																					const isS3 = v == 'S3'
+																					const isOneOf = v == 'oneOf'
+
+																					const emptyProperty = {
+																						contentEncoding: undefined,
+																						enum_: undefined,
+																						pattern: undefined,
+																						default: undefined,
+																						min: undefined,
+																						max: undefined,
+																						currency: undefined,
+																						currencyLocale: undefined,
+																						multiselect: undefined,
+																						password: undefined,
+																						dateFormat: undefined,
+																						...(v == 'array' ? { items: { type: 'string' } } : {}),
+																						showExpr: undefined,
+																						nullable: undefined,
+																						required: undefined
+																					}
+
+																					if (isS3) {
+																						schema.properties[argName] = {
+																							...emptyProperty,
+																							type: 'object',
+																							format: 'resource-s3_object'
+																						}
+																					} else if (isOneOf) {
+																						schema.properties[argName] = {
+																							...emptyProperty,
+																							type: 'object',
+																							oneOf: [
+																								{
+																									title: 'Option 1',
+																									type: 'object',
+																									properties: {
+																										label: {
+																											type: 'string',
+																											enum: ['Option 1']
+																										},
+																										property_1: {
+																											type: 'string'
+																										}
+																									}
+																								},
+																								{
+																									title: 'Option 2',
+																									type: 'object',
+																									properties: {
+																										label: {
+																											type: 'string',
+																											enum: ['Option 2']
+																										},
+																										property_2: {
+																											type: 'string'
+																										}
+																									}
+																								}
+																							]
+																						}
+																					} else {
+																						schema.properties[argName] = {
+																							...emptyProperty,
+																							format: undefined,
+																							type: v
+																						}
+																					}
+																				}
+																			}
 																			on:selected={(e) => {
-																				const isS3 = e.detail == 'S3'
-																				const isOneOf = e.detail == 'oneOf'
-
-																				const emptyProperty = {
-																					contentEncoding: undefined,
-																					enum_: undefined,
-																					pattern: undefined,
-																					default: undefined,
-																					min: undefined,
-																					max: undefined,
-																					currency: undefined,
-																					currencyLocale: undefined,
-																					multiselect: undefined,
-																					password: undefined,
-																					dateFormat: undefined,
-																					...(e.detail == 'array'
-																						? { items: { type: 'string' } }
-																						: {}),
-																					showExpr: undefined,
-																					nullable: undefined,
-																					required: undefined
-																				}
-
-																				if (isS3) {
-																					schema.properties[argName] = {
-																						...emptyProperty,
-																						type: 'object',
-																						format: 'resource-s3_object'
-																					}
-																				} else if (isOneOf) {
-																					schema.properties[argName] = {
-																						...emptyProperty,
-																						type: 'object',
-																						oneOf: [
-																							{
-																								title: 'Option 1',
-																								type: 'object',
-																								properties: {
-																									label: {
-																										type: 'string',
-																										enum: ['Option 1']
-																									},
-																									property_1: {
-																										type: 'string'
-																									}
-																								}
-																							},
-																							{
-																								title: 'Option 2',
-																								type: 'object',
-																								properties: {
-																									label: {
-																										type: 'string',
-																										enum: ['Option 2']
-																									},
-																									property_2: {
-																										type: 'string'
-																									}
-																								}
-																							}
-																						]
-																					}
-																				} else {
-																					schema.properties[argName] = {
-																						...emptyProperty,
-																						format: undefined,
-																						type: e.detail
-																					}
-																				}
-																				// No better solution than this, needs future rework
-																				setTimeout(() => {
-																					schema = schema
-																					dispatch('change', schema)
-																				}, 100)
+																				schema = schema
+																				dispatch('change', schema)
 																				dispatch('schemaChange')
 																			}}
 																		>
-																			{#each [['String', 'string'], ['Number', 'number'], ['Integer', 'integer'], ['Object', 'object'], ['OneOf', 'oneOf'], ['Array', 'array'], ['Boolean', 'boolean'], ['S3 Object', 'S3']] as x}
-																				<ToggleButton value={x[1]} label={x[0]} {item} />
-																			{/each}
+																			{#snippet children({ item })}
+																				{#each [['String', 'string'], ['Number', 'number'], ['Integer', 'integer'], ['Object', 'object'], ['OneOf', 'oneOf'], ['Array', 'array'], ['Boolean', 'boolean'], ['S3 Object', 'S3']] as x}
+																					<ToggleButton value={x[1]} label={x[0]} {item} />
+																				{/each}
+																			{/snippet}
 																		</ToggleButtonGroup>
 																	</Label>
 																{/if}
-															</svelte:fragment>
+															{/snippet}
 
 															{#if isFlowInput || isAppInput}
 																<FlowPropertyEditor
@@ -594,7 +648,7 @@
 																		dispatch('change', schema)
 																	}}
 																	on:schemaChange={(e) => {
-																		schema = schema
+																		schema = $state.snapshot(schema)
 																		dispatch('change', schema)
 																		dispatch('schemaChange')
 																	}}
@@ -651,7 +705,9 @@
 		bind:this={itemPicker}
 		pickCallback={(path, _) => {
 			if (pickForField) {
-				args[pickForField] = '$var:' + path
+				if (args) {
+					args[pickForField] = '$var:' + path
+				}
 			}
 		}}
 		itemName="Variable"
@@ -664,17 +720,19 @@
 				...x
 			}))}
 	>
-		<div slot="submission">
-			<Button
-				variant="border"
-				color="blue"
-				size="sm"
-				startIcon={{ icon: Plus }}
-				on:click={() => variableEditor?.initNew?.()}
-			>
-				New variable
-			</Button>
-		</div>
+		{#snippet submission()}
+			<div>
+				<Button
+					variant="border"
+					color="blue"
+					size="sm"
+					startIcon={{ icon: Plus }}
+					on:click={() => variableEditor?.initNew?.()}
+				>
+					New variable
+				</Button>
+			</div>
+		{/snippet}
 	</ItemPicker>
 
 	<VariableEditor bind:this={variableEditor} />
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 82db22bf99..08ce87d57e 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -153,7 +153,7 @@
 	import { AIChatEditorHandler } from './copilot/chat/monaco-adapter'
 	import GlobalReviewButtons from './copilot/chat/GlobalReviewButtons.svelte'
 	import { writable } from 'svelte/store'
-	import { formatResourceTypes } from './copilot/chat/core'
+	import { formatResourceTypes } from './copilot/chat/script/core'
 	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
 	// import EditorTheme from './EditorTheme.svelte'
 
@@ -187,7 +187,6 @@
 	export let files: Record<string, { code: string; readonly?: boolean }> | undefined = {}
 	export let extraLib: string | undefined = undefined
 	export let changeTimeout: number = 500
-	export let isAiPanelOpen: boolean = false
 	export let loadAsync = false
 
 	let lang = scriptLangToEditorLang(scriptLang)
@@ -207,7 +206,7 @@
 	let websocketInterval: NodeJS.Timeout | undefined
 	let lastWsAttempt: Date = new Date()
 	let nbWsAttempt = 0
-	let disposeMethod: () => void | undefined
+	let disposeMethod: (() => void) | undefined
 	const dispatch = createEventDispatcher()
 	let graphqlService: MonacoGraphQLAPI | undefined = undefined
 
@@ -1268,15 +1267,20 @@
 
 		onFileChanges()
 
-		editor = meditor.create(divEl as HTMLDivElement, {
-			...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
-			model,
-			fontSize: !small ? 14 : 12,
-			lineNumbersMinChars,
-			// overflowWidgetsDomNode: widgets,
-			tabSize: lang == 'python' ? 4 : 2,
-			folding
-		})
+		try {
+			editor = meditor.create(divEl as HTMLDivElement, {
+				...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+				model,
+				fontSize: !small ? 14 : 12,
+				lineNumbersMinChars,
+				// overflowWidgetsDomNode: widgets,
+				tabSize: lang == 'python' ? 4 : 2,
+				folding
+			})
+		} catch (e) {
+			console.error('Error loading monaco:', e)
+			return
+		}
 
 		keepModelAroundToAvoidDisposalOfWorkers()
 
@@ -1333,9 +1337,6 @@
 						startLine: selection.startLineNumber,
 						endLine: selection.endLineNumber
 					})
-					if (!isAiPanelOpen) {
-						dispatch('toggleAiPanel')
-					}
 				} else {
 					dispatch('toggleAiPanel')
 				}
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 14fe08e45e..5b5681b3b3 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -1,8 +1,10 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export const EDITOR_BAR_WIDTH_THRESHOLD = 1044
 </script>
 
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { ResourceService, VariableService, type Script } from '$lib/gen'
 
 	import { workspaceStore } from '$lib/stores'
@@ -19,7 +21,7 @@
 	import ToggleHubWorkspace from './ToggleHubWorkspace.svelte'
 	import Skeleton from './common/skeleton/Skeleton.svelte'
 	import { SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS } from '$lib/consts'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { getScriptByPath, scriptLangToEditorLang } from '$lib/scripts'
 	import Toggle from './Toggle.svelte'
@@ -47,110 +49,145 @@
 	import type { EditorBarUi } from './custom_ui'
 	import EditorSettings from './EditorSettings.svelte'
 
-	export let lang: SupportedLanguage | 'bunnative' | undefined
-	export let editor: Editor | undefined
-	export let websocketAlive: {
-		pyright: boolean
-		ruff: boolean
-		deno: boolean
-		go: boolean
-		shellcheck: boolean
+	interface Props {
+		lang: SupportedLanguage | 'bunnative' | undefined
+		editor: Editor | undefined
+		websocketAlive: {
+			pyright: boolean
+			ruff: boolean
+			deno: boolean
+			go: boolean
+			shellcheck: boolean
+		}
+		iconOnly?: boolean
+		validCode?: boolean
+		kind?: 'script' | 'trigger' | 'approval'
+		template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative'
+		collabMode?: boolean
+		collabLive?: boolean
+		collabUsers?: { name: string }[]
+		scriptPath?: string | undefined
+		diffEditor?: DiffEditor | undefined
+		args: Record<string, any>
+		noHistory?: boolean
+		saveToWorkspace?: boolean
+		customUi?: EditorBarUi
+		lastDeployedCode?: string | undefined
+		diffMode?: boolean
+		showHistoryDrawer?: boolean
+		right?: import('svelte').Snippet
 	}
-	export let iconOnly: boolean = false
-	export let validCode: boolean = true
-	export let kind: 'script' | 'trigger' | 'approval' = 'script'
-	export let template: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative' =
-		'script'
-	export let collabMode = false
-	export let collabLive = false
-	export let collabUsers: { name: string }[] = []
-	export let scriptPath: string | undefined = undefined
-	export let diffEditor: DiffEditor | undefined = undefined
-	export let args: Record<string, any>
-	export let noHistory = false
-	export let saveToWorkspace = false
-	export let customUi: EditorBarUi = {}
-	export let lastDeployedCode: string | undefined = undefined
-	export let diffMode: boolean = false
-	export let showHistoryDrawer: boolean = false
 
-	let contextualVariablePicker: ItemPicker
-	let variablePicker: ItemPicker
-	let resourcePicker: ItemPicker
-	let resourceTypePicker: ItemPicker
-	let variableEditor: VariableEditor
-	let resourceEditor: ResourceEditorDrawer
-	let showContextVarPicker = false
-	let showVarPicker = false
-	let showResourcePicker = false
-	let showResourceTypePicker = false
+	let {
+		lang,
+		editor,
+		websocketAlive,
+		iconOnly = false,
+		validCode = true,
+		kind = 'script',
+		template = 'script',
+		collabMode = false,
+		collabLive = false,
+		collabUsers = [],
+		scriptPath = undefined,
+		diffEditor = undefined,
+		args,
+		noHistory = false,
+		saveToWorkspace = false,
+		customUi = {},
+		lastDeployedCode = undefined,
+		diffMode = false,
+		showHistoryDrawer = $bindable(false),
+		right
+	}: Props = $props()
 
-	$: showContextVarPicker = [
-		'python3',
-		'bash',
-		'powershell',
-		'go',
-		'deno',
-		'bun',
-		'bunnative',
-		'nativets',
-		'php',
-		'rust',
-		'csharp',
-		'nu',
-		'java'
-		// for related places search: ADD_NEW_LANG
-	].includes(lang ?? '')
-	$: showVarPicker = [
-		'python3',
-		'bash',
-		'powershell',
-		'go',
-		'deno',
-		'bun',
-		'bunnative',
-		'nativets',
-		'php',
-		'rust',
-		'csharp',
-		'nu',
-		'java'
-		// for related places search: ADD_NEW_LANG
-	].includes(lang ?? '')
-	$: showResourcePicker = [
-		'python3',
-		'bash',
-		'powershell',
-		'go',
-		'deno',
-		'bun',
-		'bunnative',
-		'nativets',
-		'php',
-		'rust',
-		'csharp',
-		'nu',
-		'java'
-		// for related places search: ADD_NEW_LANG
-	].includes(lang ?? '')
-	$: showResourceTypePicker =
-		['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
-		lang === 'python3' ||
-		lang === 'php'
+	let contextualVariablePicker: ItemPicker | undefined = $state()
+	let variablePicker: ItemPicker | undefined = $state()
+	let resourcePicker: ItemPicker | undefined = $state()
+	let resourceTypePicker: ItemPicker | undefined = $state()
+	let variableEditor: VariableEditor | undefined = $state()
+	let resourceEditor: ResourceEditorDrawer | undefined = $state()
+	let showContextVarPicker = $state(false)
+	let showVarPicker = $state(false)
+	let showResourcePicker = $state(false)
+	let showResourceTypePicker = $state(false)
 
-	let codeViewer: Drawer
-	let codeObj: { language: SupportedLanguage; content: string } | undefined = undefined
+	run(() => {
+		showContextVarPicker = [
+			'python3',
+			'bash',
+			'powershell',
+			'go',
+			'deno',
+			'bun',
+			'bunnative',
+			'nativets',
+			'php',
+			'rust',
+			'csharp',
+			'nu',
+			'java'
+			// for related places search: ADD_NEW_LANG
+		].includes(lang ?? '')
+	})
+	run(() => {
+		showVarPicker = [
+			'python3',
+			'bash',
+			'powershell',
+			'go',
+			'deno',
+			'bun',
+			'bunnative',
+			'nativets',
+			'php',
+			'rust',
+			'csharp',
+			'nu',
+			'java'
+			// for related places search: ADD_NEW_LANG
+		].includes(lang ?? '')
+	})
+	run(() => {
+		showResourcePicker = [
+			'python3',
+			'bash',
+			'powershell',
+			'go',
+			'deno',
+			'bun',
+			'bunnative',
+			'nativets',
+			'php',
+			'rust',
+			'csharp',
+			'nu',
+			'java'
+			// for related places search: ADD_NEW_LANG
+		].includes(lang ?? '')
+	})
+	run(() => {
+		showResourceTypePicker =
+			['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
+			lang === 'python3' ||
+			lang === 'php'
+	})
+
+	let codeViewer: Drawer | undefined = $state()
+	let codeObj: { language: SupportedLanguage; content: string } | undefined = $state(undefined)
 
 	function addEditorActions() {
 		editor?.addAction('insert-variable', 'Windmill: Insert variable', () => {
-			variablePicker.openDrawer()
+			variablePicker?.openDrawer()
 		})
 		editor?.addAction('insert-resource', 'Windmill: Insert resource', () => {
-			resourcePicker.openDrawer()
+			resourcePicker?.openDrawer()
 		})
 	}
 
-	$: editor && addEditorActions()
+	run(() => {
+		editor && untrack(() => addEditorActions())
+	})
 
 	async function loadVariables() {
 		return await VariableService.listVariable({ workspace: $workspaceStore ?? '' })
@@ -162,9 +199,9 @@
 		})
 	}
 
-	let scriptPicker: Drawer
-	let pick_existing: 'hub' | 'workspace' = 'hub'
-	let filter = ''
+	let scriptPicker: Drawer | undefined = $state()
+	let pick_existing: 'hub' | 'workspace' = $state('hub')
+	let filter = $state('')
 
 	async function onScriptPick(e: { detail: { path: string } }) {
 		codeObj = undefined
@@ -462,21 +499,23 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 	itemName="Variable"
 	extraField="path"
 	loadItems={loadVariables}
-	buttons={{ 'Edit/View': (x) => variableEditor.editVariable(x) }}
+	buttons={{ 'Edit/View': (x) => variableEditor?.editVariable(x) }}
 >
-	<div slot="submission" class="flex flex-row">
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			startIcon={{ icon: Plus }}
-			on:click={() => {
-				variableEditor.initNew()
-			}}
-		>
-			New variable
-		</Button>
-	</div>
+	{#snippet submission()}
+		<div class="flex flex-row">
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				startIcon={{ icon: Plus }}
+				on:click={() => {
+					variableEditor?.initNew()
+				}}
+			>
+				New variable
+			</Button>
+		</div>
+	{/snippet}
 </ItemPicker>
 
 <ItemPicker
@@ -548,24 +587,26 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 	tooltip="Resources represent connections to third party systems. Resources are a good way to define a connection to a frequently used third party system such as a database."
 	documentationLink="https://www.windmill.dev/docs/core_concepts/resources_and_types"
 	itemName="Resource"
-	buttons={{ 'Edit/View': (x) => resourceEditor.initEdit(x) }}
+	buttons={{ 'Edit/View': (x) => resourceEditor?.initEdit(x) }}
 	extraField="description"
 	extraField2="resource_type"
 	loadItems={async () =>
 		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
 >
-	<div slot="submission" class="flex flex-row gap-x-1 mr-2">
-		<Button
-			startIcon={{ icon: Plus }}
-			target="_blank"
-			variant="border"
-			color="blue"
-			size="sm"
-			href="{base}/resources?connect_app=undefined"
-		>
-			Add resource
-		</Button>
-	</div>
+	{#snippet submission()}
+		<div class="flex flex-row gap-x-1 mr-2">
+			<Button
+				startIcon={{ icon: Plus }}
+				target="_blank"
+				variant="border"
+				color="blue"
+				size="sm"
+				href="{base}/resources?connect_app=undefined"
+			>
+				Add resource
+			</Button>
+		</div>
+	{/snippet}
 </ItemPicker>
 
 {#if showResourceTypePicker}
@@ -594,6 +635,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		<div class="flex items-center gap-0.5">
 			{#if showContextVarPicker && customUi?.contextVar != false}
 				<Button
+					aiId="editor-bar-add-context-variable"
+					aiDescription="Add context variable"
 					title="Add context variable"
 					color="light"
 					on:click={contextualVariablePicker.openDrawer}
@@ -607,6 +650,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{/if}
 			{#if showVarPicker && customUi?.variable != false}
 				<Button
+					aiId="editor-bar-add-variable"
+					aiDescription="Add variable"
 					title="Add variable"
 					color="light"
 					btnClasses="!font-medium text-tertiary"
@@ -622,6 +667,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 			{#if showResourcePicker && customUi?.resource != false}
 				<Button
+					aiId="editor-bar-add-resource"
+					aiDescription="Add resource"
 					title="Add resource"
 					btnClasses="!font-medium text-tertiary"
 					size="xs"
@@ -637,12 +684,14 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 			{#if showResourceTypePicker && customUi?.type != false}
 				<Button
+					aiId="editor-bar-add-resource-type"
+					aiDescription="Add resource type"
 					title="Add resource type"
 					btnClasses="!font-medium text-tertiary"
 					size="xs"
 					spacingSize="md"
 					color="light"
-					on:click={resourceTypePicker.openDrawer}
+					on:click={() => resourceTypePicker?.openDrawer()}
 					{iconOnly}
 					startIcon={{ icon: Package }}
 				>
@@ -652,6 +701,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 			{#if customUi?.reset != false}
 				<Button
+					aiId="editor-bar-reset-content"
+					aiDescription="Reset content"
 					title="Reset Content"
 					btnClasses="!font-medium text-tertiary"
 					size="xs"
@@ -668,6 +719,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{#if customUi?.assistants != false}
 				{#if lang == 'deno' || lang == 'python3' || lang == 'go' || lang == 'bash' || lang == 'nu'}
 					<Button
+						aiId="editor-bar-reload-assistants"
+						aiDescription="Reload assistants"
 						btnClasses="!font-medium text-tertiary"
 						size="xs"
 						spacingSize="md"
@@ -712,7 +765,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						}}
 					/>
 					<Popover>
-						<svelte:fragment slot="text">Toggle diff mode</svelte:fragment>
+						{#snippet text()}
+							Toggle diff mode
+						{/snippet}
 						<DiffIcon class="ml-1 text-tertiary" size={14} />
 					</Popover>
 				</div>
@@ -727,14 +782,16 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						on:change={() => dispatch('toggleCollabMode')}
 					/>
 					<Popover>
-						<svelte:fragment slot="text">Multiplayer</svelte:fragment>
+						{#snippet text()}
+							Multiplayer
+						{/snippet}
 						<Users class="ml-1 text-tertiary" size={14} />
 					</Popover>
 					{#if collabLive}
 						<button
 							title="Show invite link"
 							class="p-1 rounded hover:bg-gray-400 mx-1 border"
-							on:click={() => dispatch('collabPopup')}><Link size={14} /></button
+							onclick={() => dispatch('collabPopup')}><Link size={14} /></button
 						>
 						<div class="isolate flex -space-x-2 pl-2">
 							{#each collabUsers as user}
@@ -761,7 +818,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 	</div>
 
 	<div class="flex flex-row items-center gap-2">
-		<slot name="right" />
+		{@render right?.()}
 		{#if scriptPath && !noHistory}
 			<Button
 				btnClasses="!font-medium text-tertiary"
diff --git a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte b/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
index 472daa9d1e..1cb9cfea73 100644
--- a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
+++ b/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
@@ -329,7 +329,7 @@
 				schema={customHandlerSchema}
 				bind:args={handlerExtraArgs}
 				shouldHideNoInputs
-				class="text-xs"
+				className="text-xs"
 			/>
 		{/await}
 		{#if customHandlerSchema && customHandlerSchema.properties && Object.keys(customHandlerSchema.properties).length === 0}
@@ -368,7 +368,7 @@
 				}}
 				bind:args={handlerExtraArgs}
 				shouldHideNoInputs
-				class="text-xs"
+				className="text-xs"
 			/>
 		{/await}
 	{:else if workspaceConnectedToSlack == undefined}
@@ -453,11 +453,14 @@
 					containerClass="flex-grow"
 					minWidth="200px"
 					placeholder="Select Teams channel"
-					channels={teams_channels as any[]}
-					on:change={(e) => (handlerExtraArgs['channel'] = e.detail.channel_id)}
-					selectedChannel={handlerExtraArgs['channel']
-						? (teams_channels.find((ch) => ch.channel_id === handlerExtraArgs['channel']) as any)
-						: undefined}
+					channels={teams_channels}
+					bind:selectedChannel={
+						() =>
+							handlerExtraArgs['channel']
+								? teams_channels.find((ch) => ch.channel_id === handlerExtraArgs['channel'])
+								: undefined,
+						(channel) => (handlerExtraArgs['channel'] = channel?.channel_id)
+					}
 				/>
 				<div class="flex-shrink-0">
 					<button
diff --git a/frontend/src/lib/components/FirstStepInputs.svelte b/frontend/src/lib/components/FirstStepInputs.svelte
index e492e762f1..ef7856828b 100644
--- a/frontend/src/lib/components/FirstStepInputs.svelte
+++ b/frontend/src/lib/components/FirstStepInputs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { createEventDispatcher, onDestroy, getContext } from 'svelte'
-	import { getFirstStepSchema } from '$lib/components/flows/flowStore'
+	import { createEventDispatcher, onDestroy, getContext, untrack } from 'svelte'
+	import { getFirstStepSchema } from '$lib/components/flows/flowStore.svelte'
 	import type { FlowEditorContext } from '$lib/components/flows/types'
 	import { twMerge } from 'tailwind-merge'
 	import { Alert } from '$lib/components/common'
@@ -13,13 +13,13 @@
 	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	const dispatch = createEventDispatcher()
-	let schema: Record<string, any> | undefined = undefined
+	let schema: Record<string, any> | undefined = $state(undefined)
 
-	let error: string | undefined = undefined
-	let mod: any | undefined = undefined
+	let error: string | undefined = $state(undefined)
+	let mod: any | undefined = $state(undefined)
 	async function loadSchema() {
 		try {
-			const res = await getFirstStepSchema($flowStateStore, flowStore)
+			const res = await getFirstStepSchema($flowStateStore, flowStore.val)
 			schema = res.schema
 			mod = res.mod
 			dispatch('connectFirstNode', { connectFirstNode: res.connectFirstNode })
@@ -27,7 +27,9 @@
 			error = e
 		}
 	}
-	$: $flowStore && $flowStateStore && loadSchema()
+	$effect(() => {
+		flowStore.val && $flowStateStore && untrack(() => loadSchema())
+	})
 
 	function handleClick() {
 		selected = !selected
@@ -39,7 +41,7 @@
 		dispatch('select', undefined)
 	})
 
-	let selected: boolean = false
+	let selected: boolean = $state(false)
 
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape' && selected) {
@@ -50,14 +52,16 @@
 		}
 	}
 
-	let firstUpdate = true
-	$: if (schema && !selected && firstUpdate) {
-		firstUpdate = false
-		setTimeout(() => {
-			selected = true
-			dispatch('select', schema)
-		}, 200)
-	}
+	let firstUpdate = $state(true)
+	$effect(() => {
+		if (schema && !selected && firstUpdate) {
+			firstUpdate = false
+			setTimeout(() => {
+				selected = true
+				dispatch('select', schema)
+			}, 200)
+		}
+	})
 
 	export function resetSelected(dispatchEvent?: boolean) {
 		selected = false
@@ -67,7 +71,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <div class="h-full">
 	{#if schema && mod}
@@ -77,10 +81,10 @@
 				selected ? 'bg-surface-selected' : 'hover:bg-surface-hover'
 			)}
 			disabled={!schema}
-			on:click={handleClick}
+			onclick={handleClick}
 		>
 			<FlowModuleSchemaItemViewer
-				on:click={handleClick}
+				onclick={handleClick}
 				deletable={false}
 				id={mod.id}
 				label={mod.summary ||
@@ -90,24 +94,26 @@
 						: 'To be defined')}
 				path={`path` in mod.value && mod.summary ? mod.value.path : ''}
 			>
-				<div slot="icon">
-					{#if mod.value.type === 'rawscript'}
-						<LanguageIcon lang={mod.value.language} width={16} height={16} />
-					{:else if mod.value.type === 'script'}
-						{#if mod.value.path.startsWith('hub/')}
-							<div>
-								<IconedResourceType
-									width="20px"
-									height="20px"
-									name={mod.value.path.split('/')[2]}
-									silent={true}
-								/>
-							</div>
-						{:else}
-							<Building size={14} />
+				{#snippet icon()}
+					<div>
+						{#if mod.value.type === 'rawscript'}
+							<LanguageIcon lang={mod.value.language} width={16} height={16} />
+						{:else if mod.value.type === 'script'}
+							{#if mod.value.path.startsWith('hub/')}
+								<div>
+									<IconedResourceType
+										width="20px"
+										height="20px"
+										name={mod.value.path.split('/')[2]}
+										silent={true}
+									/>
+								</div>
+							{:else}
+								<Building size={14} />
+							{/if}
 						{/if}
-					{/if}
-				</div>
+					</div>
+				{/snippet}
 			</FlowModuleSchemaItemViewer>
 		</button>
 	{:else}
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index fe88ba24be..bff1b5dac5 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -1,23 +1,18 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		FlowService,
 		type Flow,
-		type FlowModule,
 		DraftService,
 		type PathScript,
-		ScriptService,
 		type OpenFlow,
-		type RawScript,
 		type InputTransform,
 		type TriggersCount,
-		CaptureService,
-
-		type HubScriptKind
-
+		CaptureService
 	} from '$lib/gen'
-	import { initHistory, push, redo, undo } from '$lib/history'
+	import { initHistory, redo, undo } from '$lib/history'
 	import {
-		copilotInfo,
 		enterpriseLicense,
 		tutorialsToDo,
 		userStore,
@@ -29,15 +24,16 @@
 		encodeState,
 		generateRandomString,
 		orderedJsonStringify,
+		readFieldsRecursively,
 		replaceFalseWithUndefined,
-		sleep,
+		type StateStore,
 		type Value
 	} from '$lib/utils'
 	import { sendUserToast } from '$lib/toast'
 	import { Drawer } from '$lib/components/common'
 	import DeployOverrideConfirmationModal from '$lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte'
 
-	import { onMount, setContext, tick, type ComponentType } from 'svelte'
+	import { onMount, setContext, untrack, type ComponentType } from 'svelte'
 	import { writable, type Writable } from 'svelte/store'
 	import CenteredPage from './CenteredPage.svelte'
 	import { Badge, Button, UndoRedo } from './common'
@@ -45,27 +41,17 @@
 	import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte'
 	import type { FlowState } from './flows/flowState'
 	import { dfs as dfsApply } from './flows/dfs'
-	import { dfs, getPreviousIds } from './flows/previousResults'
 	import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte'
 	import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte'
 	import type { FlowEditorContext, FlowInput, FlowInputEditorState } from './flows/types'
-	import { cleanInputs, emptyFlowModuleState } from './flows/utils'
+	import { cleanInputs } from './flows/utils'
 	import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, type Icon } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Awareness from './Awareness.svelte'
 	import { getAllModules } from './flows/flowExplorer'
-	import {
-		stepCopilot,
-		type FlowCopilotModule,
-		glueCopilot,
-		type FlowCopilotContext
-	} from './copilot/flow'
-	import type { Schema, SchemaProperty } from '$lib/common'
-	import FlowCopilotDrawer from './copilot/FlowCopilotDrawer.svelte'
-	import FlowCopilotStatus from './copilot/FlowCopilotStatus.svelte'
-	import { fade } from 'svelte/transition'
-	import { loadFlowModuleState, pickScript } from './flows/flowStateUtils'
-	import FlowCopilotInputsModal from './copilot/FlowCopilotInputsModal.svelte'
+	import { type FlowCopilotContext } from './copilot/flow'
+	import FlowAIButton from './copilot/chat/flow/FlowAIButton.svelte'
+	import { loadFlowModuleState } from './flows/flowStateUtils.svelte'
 	import FlowBuilderTutorials from './FlowBuilderTutorials.svelte'
 	import Dropdown from '$lib/components/DropdownV2.svelte'
 	import FlowTutorials from './FlowTutorials.svelte'
@@ -92,30 +78,57 @@
 	} from './splitPanes/SplitPanesLayout.svelte'
 	import type { PanesLayout } from './splitPanes/types'
 	import { setTabStateContext, TabsState } from './common/tabs/tabsState.svelte'
+	import { aiChatManager } from './copilot/chat/AIChatManager.svelte'
 
-	export let initialPath: string = ''
-	export let pathStoreInit: string | undefined = undefined
-	export let newFlow: boolean
-	export let selectedId: string | undefined
-	export let initialArgs: Record<string, any> = {}
-	export let loading = false
-	export let flowStore: Writable<OpenFlow>
-	export let flowStateStore: Writable<FlowState>
-	export let savedFlow: FlowWithDraftAndDraftTriggers | undefined = undefined
-	export let diffDrawer: DiffDrawer | undefined = undefined
-	export let customUi: FlowBuilderWhitelabelCustomUi = {}
-	export let disableAi: boolean = false
-	export let disabledFlowInputs = false
-	export let savedPrimarySchedule: ScheduleTrigger | undefined = undefined // used to set the primary schedule in the legacy primaryScheduleStore
-	export let version: number | undefined = undefined
-	export let setSavedraftCb: ((cb: () => void) => void) | undefined = undefined
-	export let draftTriggersFromUrl: Trigger[] | undefined = undefined
-	export let selectedTriggerIndexFromUrl: number | undefined = undefined
-	export let savedSplitPanesLayout: Record<string, PanesLayout> | undefined = undefined
-	export let tabsStateFromUrl: Record<string, string> | undefined = undefined
+	interface Props {
+		initialPath?: string
+		pathStoreInit?: string | undefined
+		newFlow: boolean
+		selectedId: string | undefined
+		initialArgs?: Record<string, any>
+		loading?: boolean
+		flowStore: StateStore<OpenFlow>
+		flowStateStore: Writable<FlowState>
+		savedFlow?: FlowWithDraftAndDraftTriggers | undefined
+		diffDrawer?: DiffDrawer | undefined
+		customUi?: FlowBuilderWhitelabelCustomUi
+		disableAi?: boolean
+		disabledFlowInputs?: boolean
+		savedPrimarySchedule?: ScheduleTrigger | undefined // used to set the primary schedule in the legacy primaryScheduleStore
+		version?: number | undefined
+		setSavedraftCb?: ((cb: () => void) => void) | undefined
+		draftTriggersFromUrl?: Trigger[] | undefined
+		selectedTriggerIndexFromUrl?: number | undefined
+		savedSplitPanesLayout?: Record<string, PanesLayout> | undefined
+		tabsStateFromUrl?: Record<string, string> | undefined
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		initialPath = $bindable(''),
+		pathStoreInit = undefined,
+		newFlow,
+		selectedId,
+		initialArgs = {},
+		loading = false,
+		flowStore,
+		flowStateStore,
+		savedFlow = $bindable(undefined),
+		diffDrawer = undefined,
+		customUi = {},
+		disableAi = false,
+		disabledFlowInputs = false,
+		savedPrimarySchedule = undefined,
+		version = undefined,
+		setSavedraftCb = undefined,
+		draftTriggersFromUrl = undefined,
+		selectedTriggerIndexFromUrl = undefined,
+		savedSplitPanesLayout = undefined,
+		tabsStateFromUrl = undefined,
+		children
+	}: Props = $props()
 
 	let initialPathStore = writable(initialPath)
-	$: initialPathStore.set(initialPath)
 
 	// used for new flows for captures
 	let fakeInitialPath =
@@ -127,13 +140,13 @@
 		generateRandomString(12)
 
 	// Used by multiplayer deploy collision warning
-	let deployedValue: Value | undefined = undefined // Value to diff against
-	let deployedBy: string | undefined = undefined // Author
-	let confirmCallback: () => void = () => {} // What happens when user clicks `override` in warning
-	let open: boolean = false // Is confirmation modal open
+	let deployedValue: Value | undefined = $state(undefined) // Value to diff against
+	let deployedBy: string | undefined = $state(undefined) // Author
+	let confirmCallback: () => void = $state(() => {}) // What happens when user clicks `override` in warning
+	let open: boolean = $state(false) // Is confirmation modal open
 
 	// Draft triggers confirmation modal
-	let draftTriggersModalOpen = false
+	let draftTriggersModalOpen = $state(false)
 	let confirmDeploymentCallback: (triggersToDeploy: Trigger[]) => void = () => {}
 
 	async function handleDraftTriggersConfirmed(event: CustomEvent<{ selectedTriggers: Trigger[] }>) {
@@ -143,8 +156,6 @@
 		confirmDeploymentCallback(selectedTriggers)
 	}
 
-	$: setContext('customUi', customUi)
-
 	const splitPanesLayout = new SplitPanesLayout(savedSplitPanesLayout ?? {}, saveSessionDraft)
 	setSplitPanesLayoutContext(splitPanesLayout)
 
@@ -167,7 +178,7 @@
 		return {
 			savedValue: savedFlow,
 			modifiedValue: {
-				...$flowStore,
+				...flowStore.val,
 				draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
 			}
 		}
@@ -217,8 +228,8 @@
 		selectedTriggerIndexFromUrl = index
 	}
 
-	let loadingSave = false
-	let loadingDraft = false
+	let loadingSave = $state(false)
+	let loadingDraft = $state(false)
 
 	export async function saveDraft(forceSave = false): Promise<void> {
 		if (!newFlow && !savedFlow) {
@@ -227,11 +238,13 @@
 		if (savedFlow) {
 			const draftOrDeployed = cleanValueProperties(savedFlow.draft || savedFlow)
 			const currentDraftTriggers = structuredClone(triggersState.getDraftTriggersSnapshot())
-			const current = cleanValueProperties({
-				...$flowStore,
-				path: $pathStore,
-				draft_triggers: currentDraftTriggers
-			})
+			const current = cleanValueProperties(
+				$state.snapshot({
+					...flowStore.val,
+					path: $pathStore,
+					draft_triggers: currentDraftTriggers
+				})
+			)
 			if (!forceSave && orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
 				sendUserToast('No changes detected, ignoring', false, [
 					{
@@ -246,7 +259,7 @@
 		}
 		loadingDraft = true
 		try {
-			const flow = cleanInputs($flowStore)
+			const flow = cleanInputs(flowStore.val)
 			try {
 				localStorage.removeItem('flow')
 				localStorage.removeItem(`flow-${$pathStore}`)
@@ -303,13 +316,13 @@
 			savedFlow = {
 				...(newFlow || savedFlow?.draft_only
 					? {
-							...structuredClone($flowStore),
+							...structuredClone($state.snapshot(flowStore.val)),
 							path: $pathStore,
 							draft_only: true
 						}
 					: savedFlow),
 				draft: {
-					...structuredClone($flowStore),
+					...structuredClone($state.snapshot(flowStore.val)),
 					path: $pathStore,
 					draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
 				}
@@ -356,9 +369,9 @@
 
 			if (
 				deployedValue &&
-				$flowStore &&
+				flowStore.val &&
 				orderedJsonStringify(deployedValue) ===
-					orderedJsonStringify(replaceFalseWithUndefined({ ...$flowStore, path: $pathStore }))
+					orderedJsonStringify(replaceFalseWithUndefined({ ...flowStore.val, path: $pathStore }))
 			) {
 				await saveFlow(deploymentMsg)
 			} else {
@@ -401,7 +414,7 @@
 
 		loadingSave = true
 		try {
-			const flow = cleanInputs($flowStore)
+			const flow = cleanInputs(flowStore.val)
 			// console.log('flow', computeUnlockedSteps(flow)) // del
 			// loadingSave = false // del
 			// return
@@ -483,11 +496,11 @@
 				})
 			}
 
-			const { draft_triggers: _, ...newSavedFlow } = $flowStore as OpenFlow & {
+			const { draft_triggers: _, ...newSavedFlow } = flowStore.val as OpenFlow & {
 				draft_triggers: Trigger[]
 			}
 			savedFlow = {
-				...structuredClone(newSavedFlow),
+				...structuredClone($state.snapshot(newSavedFlow)),
 				path: $pathStore
 			} as Flow
 			setDraftTriggers([])
@@ -495,19 +508,13 @@
 			dispatch('deploy', $pathStore)
 		} catch (err) {
 			dispatch('deployError', err)
-			sendUserToast(`The flow could not be saved: ${err.body}`, true)
+			sendUserToast(`The flow could not be saved: ${err.body ?? err}`, true)
 			loadingSave = false
 		}
 	}
 
 	let timeout: NodeJS.Timeout | undefined = undefined
 
-	$: {
-		if ($flowStore || $selectedIdStore) {
-			saveSessionDraft()
-		}
-	}
-
 	function saveSessionDraft() {
 		timeout && clearTimeout(timeout)
 		timeout = setTimeout(() => {
@@ -515,7 +522,7 @@
 				localStorage.setItem(
 					initialPath && initialPath != '' ? `flow-${initialPath}` : 'flow',
 					encodeState({
-						flow: $flowStore,
+						flow: flowStore.val,
 						path: $pathStore,
 						selectedId: $selectedIdStore,
 						draft_triggers: triggersState.getDraftTriggersSnapshot(),
@@ -536,10 +543,10 @@
 		return $selectedIdStore
 	}
 
-	const previewArgsStore = writable<Record<string, any>>(initialArgs)
+	const previewArgsStore = $state({ val: initialArgs })
 	const scriptEditorDrawer = writable<ScriptEditorDrawer | undefined>(undefined)
-	const moving = writable<{ module: FlowModule; modules: FlowModule[] } | undefined>(undefined)
-	const history = initHistory($flowStore)
+	const moving = writable<{ id: string } | undefined>(undefined)
+	const history = initHistory(flowStore.val)
 	const pathStore = writable<string>(pathStoreInit ?? initialPath)
 	const captureOn = writable<boolean>(false)
 	const showCaptureHint = writable<boolean | undefined>(undefined)
@@ -548,7 +555,6 @@
 		editPanelSize: 0,
 		payloadData: undefined
 	})
-	$: initialPath && ($pathStore = initialPath)
 
 	const testStepStore = writable<Record<string, any>>({})
 
@@ -560,6 +566,7 @@
 
 	setContext<FlowEditorContext>('FlowEditorContext', {
 		selectedId: selectedIdStore,
+		currentEditor: writable(undefined),
 		previewArgs: previewArgsStore,
 		scriptEditorDrawer,
 		moving,
@@ -579,14 +586,16 @@
 	})
 
 	// Add triggers context store
-	const triggersState = new Triggers(
-		[
-			{ type: 'webhook', path: '', isDraft: false },
-			{ type: 'email', path: '', isDraft: false },
-			...(draftTriggersFromUrl ?? savedFlow?.draft?.draft_triggers ?? [])
-		],
-		selectedTriggerIndexFromUrl,
-		saveSessionDraft
+	const triggersState = $state(
+		new Triggers(
+			[
+				{ type: 'webhook', path: '', isDraft: false },
+				{ type: 'email', path: '', isDraft: false },
+				...(draftTriggersFromUrl ?? savedFlow?.draft?.draft_triggers ?? [])
+			],
+			selectedTriggerIndexFromUrl,
+			saveSessionDraft
+		)
 	)
 
 	setContext<TriggerContext>('TriggerContext', {
@@ -620,10 +629,6 @@
 		triggersState.selectedTriggerIndex = selectedTriggerIndexFromUrl
 	}
 
-	$: selectedId && select(selectedId)
-
-	$: initialPath && initialPath != '' && $workspaceStore && loadTriggers()
-
 	function onKeyDown(event: KeyboardEvent) {
 		let classes = event.target?.['className']
 		if (
@@ -636,13 +641,13 @@
 		switch (event.key) {
 			case 'Z':
 				if (event.ctrlKey || event.metaKey) {
-					$flowStore = redo(history)
+					flowStore.val = redo(history)
 					event.preventDefault()
 				}
 				break
 			case 'z':
 				if (event.ctrlKey || event.metaKey) {
-					$flowStore = undo(history, $flowStore)
+					flowStore.val = undo(history, flowStore.val)
 					$selectedIdStore = 'Input'
 					event.preventDefault()
 				}
@@ -683,7 +688,7 @@
 			'settings-metadata',
 			'constants',
 			'preprocessor',
-			...dfsApply($flowStore.value.modules, (module) => module.id)
+			...dfsApply(flowStore.val.value.modules, (module) => module.id)
 		]
 	}
 
@@ -708,11 +713,7 @@
 		}
 	}
 
-	let flowCopilotContext: FlowCopilotContext = {
-		drawerStore: writable<Drawer | undefined>(undefined),
-		modulesStore: writable<FlowCopilotModule[]>([]),
-		currentStepStore: writable<string | undefined>(undefined),
-		genFlow: undefined,
+	let flowCopilotContext: FlowCopilotContext = $state({
 		shouldUpdatePropertyType: writable<{
 			[key: string]: 'static' | 'javascript' | undefined
 		}>({}),
@@ -723,485 +724,16 @@
 			[key: string]: string | undefined
 		}>({}),
 		stepInputsLoading: writable<boolean>(false)
-	}
+	})
 
 	setContext('FlowCopilotContext', flowCopilotContext)
 
-	const {
-		drawerStore: copilotDrawerStore,
-		modulesStore: copilotModulesStore,
-		currentStepStore: copilotCurrentStepStore,
-		shouldUpdatePropertyType
-	} = flowCopilotContext
+	let renderCount = $state(0)
+	let flowTutorials: FlowTutorials | undefined = $state(undefined)
 
-	let doneTs = 0
-	async function getHubCompletions(text: string, idx: number, type: 'trigger' | 'script') {
-		try {
-			// make sure we display the results of the last request last
-			const ts = Date.now()
-			const scripts = (
-				await ScriptService.queryHubScripts({
-					text: `${text}`,
-					limit: 3,
-					kind: type
-				})
-			).map((s) => ({
-				...s,
-				path: `hub/${s.version_id}/${s.app}/${s.summary.toLowerCase().replaceAll(/\s+/g, '_')}`
-			}))
-			if (ts < doneTs) return
-			doneTs = ts
-
-			$copilotModulesStore[idx].hubCompletions = scripts as {
-				path: string
-				summary: string
-				kind: HubScriptKind
-				app: string
-				ask_id: number
-				id: number
-				version_id: number
-			}[]
-		} catch (err) {
-			if (err.name !== 'CancelError') throw err
-		}
-	}
-
-	let abortController: AbortController | undefined = undefined
-	let copilotLoading = false
-	let flowCopilotMode: 'trigger' | 'sequence' = 'sequence'
-	let copilotStatus: string = ''
-	let copilotFlowInputs: Record<string, SchemaProperty> = {}
-	let copilotFlowRequiredInputs: string[] = []
-	let openCopilotInputsModal = false
-
-	function setInitCopilotModules(mode: typeof flowCopilotMode) {
-		$copilotModulesStore = [
-			{
-				id: 'a',
-				type: mode === 'trigger' ? 'trigger' : 'script',
-				description: '',
-				code: '',
-				hubCompletions: [],
-				selectedCompletion: undefined,
-				source: undefined,
-				lang: undefined
-			},
-			{
-				id: 'b',
-				type: 'script',
-				description: '',
-				code: '',
-				hubCompletions: [],
-				selectedCompletion: undefined,
-				source: undefined,
-				lang: undefined
-			}
-		]
-	}
-
-	$: setInitCopilotModules(flowCopilotMode)
-
-	function applyCopilotFlowInputs() {
-		const properties = {
-			...($flowStore.schema?.properties as Record<string, SchemaProperty> | undefined),
-			...copilotFlowInputs
-		}
-		const required = [
-			...(($flowStore.schema?.required as string[] | undefined) ?? []),
-			...copilotFlowRequiredInputs
-		]
-		$flowStore.schema = {
-			$schema: 'https://json-schema.org/draft/2020-12/schema',
-			properties,
-			required,
-			type: 'object'
-		}
-	}
-
-	function clearFlowInputsFromStep(id: string | undefined) {
-		const module: FlowModule | undefined = dfs(id, $flowStore)[0]
-		if (module?.value.type === 'rawscript' || module?.value.type === 'script') {
-			// clear step inputs that start with flow_input. but not flow_input.iter
-			for (const key in module.value.input_transforms) {
-				const input = module.value.input_transforms[key]
-				if (
-					input.type === 'javascript' &&
-					input.expr.includes('flow_input.') &&
-					!input.expr.includes('flow_input.iter')
-				) {
-					module.value.input_transforms[key] = {
-						type: 'static',
-						value: undefined
-					}
-					$shouldUpdatePropertyType[key] = 'static'
-				}
-			}
-		}
-		$flowStore = $flowStore
-	}
-
-	async function finishStepGen() {
-		copilotFlowInputs = {}
-		copilotFlowRequiredInputs = []
-		setInitCopilotModules(flowCopilotMode)
-		copilotStatus = "Done! Just check the step's inputs and you're good to go!"
-		await sleep(3000)
-		copilotStatus = ''
-	}
-
-	function snakeCase(e: string): string {
-		if (e.toLowerCase() === e) {
-			return e
-		}
-
-		return (
-			e
-				.match(/([A-Z])/g)
-				?.reduce((str, c) => str.replace(new RegExp(c), '_' + c.toLowerCase()), e)
-				?.substring(e.slice(0, 1).match(/([A-Z])/g) ? 1 : 0) ?? e
-		)
-	}
-	async function genFlow(idx: number, flowModules: FlowModule[], stepOnly = false) {
-		try {
-			push(history, $flowStore)
-			let module = stepOnly ? $copilotModulesStore[0] : $copilotModulesStore[idx]
-
-			copilotLoading = true
-			copilotStatus = "Generating code for step '" + module.id + "'..."
-			$copilotCurrentStepStore = module.id
-			focusCopilot()
-
-			if (!stepOnly && flowModules.length > idx) {
-				select('')
-				await tick()
-				flowModules.splice(idx, flowModules.length - idx)
-				$flowStore = $flowStore
-				focusCopilot()
-			}
-
-			if (idx === 0 && !stepOnly) {
-				$flowStore.schema = {
-					$schema: 'https://json-schema.org/draft/2020-12/schema',
-					properties: {},
-					required: [],
-					type: 'object'
-				}
-			}
-
-			const flowModule: FlowModule & {
-				value: RawScript | PathScript
-			} = {
-				id: module.id,
-				stop_after_if:
-					module.type === 'trigger'
-						? {
-								expr: 'result == undefined || Array.isArray(result) && result.length == 0',
-								skip_if_stopped: true
-							}
-						: undefined,
-				value: {
-					input_transforms: {},
-					content: '',
-					language: module.lang ?? 'bun',
-					type: 'rawscript'
-				},
-				summary: module.description
-			}
-
-			let isHubStep = false
-			if (module.source === 'hub' && module.selectedCompletion) {
-				isHubStep = true
-				const [hubScriptModule, hubScriptState] = await pickScript(
-					module.selectedCompletion.path,
-					`${module.selectedCompletion.summary} (${module.selectedCompletion.app})`,
-					module.id,
-					undefined
-				)
-				flowModule.value = hubScriptModule.value
-				flowModule.summary = hubScriptModule.summary
-				$flowStateStore[module.id] = hubScriptState
-			} else {
-				$flowStateStore[module.id] = emptyFlowModuleState()
-			}
-
-			if (stepOnly) {
-				flowModules.splice(idx, 0, flowModule)
-			} else if (idx === 1 && $copilotModulesStore[idx - 1].type === 'trigger') {
-				const loopModule: FlowModule = {
-					id: module.id + '_loop',
-					value: {
-						type: 'forloopflow',
-						iterator: {
-							type: 'javascript',
-							expr: 'results.a'
-						},
-						skip_failures: true,
-						modules: [flowModule]
-					}
-				}
-				const loopState = await loadFlowModuleState(loopModule)
-				$flowStateStore[loopModule.id] = loopState
-				flowModules.push(loopModule)
-			} else {
-				flowModules.push(flowModule)
-			}
-
-			$copilotDrawerStore?.closeDrawer()
-			await tick()
-			select(module.id)
-			await tick()
-			focusCopilot()
-
-			let isFirstInLoop = false
-			const parents = dfs(module.id, $flowStore).slice(1)
-			if (
-				parents[0]?.value.type === 'forloopflow' &&
-				parents[0].value.modules[0].id === module.id
-			) {
-				isFirstInLoop = true
-			}
-			const prevNodeId = getPreviousIds(module.id, $flowStore, false)[0] as string | undefined
-			const pastModule = dfs(prevNodeId, $flowStore, false)[0] as FlowModule | undefined
-
-			if (!module.source) {
-				throw new Error('Invalid copilot module source')
-			}
-
-			if (module.source === 'custom') {
-				const deltaStore = writable<string>('')
-				const unsubscribe = deltaStore.subscribe(async (delta) => {
-					module.editor?.append(delta)
-				})
-
-				abortController = new AbortController()
-				await stepCopilot(
-					module,
-					deltaStore,
-					$workspaceStore!,
-					pastModule?.value.type === 'rawscript' || pastModule?.value.type === 'script'
-						? (pastModule as FlowModule & {
-								value: RawScript | PathScript
-							})
-						: undefined,
-					isFirstInLoop,
-					abortController
-				)
-				unsubscribe()
-			}
-
-			copilotStatus = "Generating inputs for step '" + module.id + "'..."
-			await sleep(500) // make sure code was parsed
-
-			try {
-				if (
-					(flowModule.value.type === 'rawscript' || flowModule.value.type === 'script') &&
-					(pastModule === undefined ||
-						pastModule.value.type === 'rawscript' ||
-						pastModule.value.type === 'script')
-				) {
-					const stepSchema: Schema = JSON.parse(JSON.stringify($flowStateStore[module.id].schema)) // deep copy
-					if (isHubStep && pastModule !== undefined && $copilotInfo.enabled) {
-						// ask AI to set step inputs
-						abortController = new AbortController()
-						const { inputs, allExprs } = await glueCopilot(
-							flowModule.value.input_transforms,
-							$workspaceStore!,
-							pastModule as FlowModule & {
-								value: RawScript | PathScript
-							},
-							isFirstInLoop,
-							abortController
-						)
-
-						// create flow inputs used by AI for autocompletion
-						copilotFlowInputs = {}
-						copilotFlowRequiredInputs = []
-						Object.entries(allExprs).forEach(([key, expr]) => {
-							if (expr.includes('flow_input.') && !expr.includes('flow_input.iter.')) {
-								const flowInputKey = expr.match(/flow_input\.([A-Za-z0-9_]+)/)?.[1]
-								if (
-									flowInputKey !== undefined &&
-									(!$flowStore.schema ||
-										!(flowInputKey in (($flowStore.schema.properties as any) ?? {}))) // prevent overriding flow inputs
-								) {
-									if (key in stepSchema.properties) {
-										copilotFlowInputs[flowInputKey] = stepSchema.properties[key]
-										if (stepSchema.required.includes(key)) {
-											copilotFlowRequiredInputs.push(flowInputKey)
-										}
-									} else {
-										// when the key is nested (e.g. body.content)
-										const [firstKey, ...rest] = key.split('.')
-										const restKey = rest.join('.')
-										const firstKeyProperties = stepSchema.properties[firstKey]?.properties
-										if (firstKeyProperties !== undefined && restKey in firstKeyProperties) {
-											copilotFlowInputs[flowInputKey] = firstKeyProperties[restKey]
-											if (firstKeyProperties[restKey].required?.includes(flowInputKey)) {
-												copilotFlowRequiredInputs.push(flowInputKey)
-											}
-										}
-									}
-								}
-							}
-						})
-
-						if (!stepOnly) {
-							applyCopilotFlowInputs()
-						}
-
-						// set step inputs
-						Object.entries(inputs).forEach(([key, expr]) => {
-							flowModule.value.input_transforms[key] = {
-								type: 'javascript',
-								expr
-							}
-							$shouldUpdatePropertyType[key] = 'javascript'
-						})
-					} else {
-						if (isHubStep && pastModule !== undefined && !$copilotInfo.enabled) {
-							sendUserToast(
-								'For better input generation, enable Windmill AI in the workspace settings',
-								true
-							)
-						}
-
-						// create possible flow inputs for autocompletion
-						copilotFlowInputs = {}
-						copilotFlowRequiredInputs = []
-						Object.keys(flowModule.value.input_transforms).forEach((key) => {
-							if (key !== 'prev_output') {
-								const schema = $flowStateStore[module.id].schema
-								const schemaProperty = Object.entries(schema?.properties ?? {}).find(
-									(x) => x[0] === key
-								)?.[1]
-								const snakeKey = snakeCase(key)
-								if (
-									schemaProperty &&
-									(!$flowStore.schema ||
-										!(snakeKey in ($flowStore?.schema?.properties ?? ({} as any)))) // prevent overriding flow inputs
-								) {
-									copilotFlowInputs[snakeKey] = schemaProperty
-									if (schema?.required.includes(snakeKey)) {
-										copilotFlowRequiredInputs.push(snakeKey)
-									}
-								}
-							}
-						})
-						if (!stepOnly) {
-							applyCopilotFlowInputs()
-						}
-
-						// programatically set step inputs
-						for (const key of Object.keys(flowModule.value.input_transforms)) {
-							const snakeKey = snakeCase(key)
-							flowModule.value.input_transforms[key] = {
-								type: 'javascript',
-								expr:
-									key === 'prev_output'
-										? isFirstInLoop
-											? 'flow_input.iter.value'
-											: pastModule
-												? 'results.' + pastModule.id
-												: 'flow_input.' + snakeKey
-										: 'flow_input.' + snakeKey
-							}
-							$shouldUpdatePropertyType[key] = 'javascript'
-						}
-					}
-
-					$flowStore = $flowStore // force rerendering
-				} else {
-					if (
-						pastModule !== undefined &&
-						pastModule.value.type !== 'rawscript' &&
-						pastModule.value.type !== 'script'
-					) {
-						sendUserToast(
-							`Linking to previous step ${pastModule.id} of type ${pastModule.value.type} is not yet supported`,
-							true
-						)
-					} else {
-						sendUserToast('Something went wrong, could not generate step inputs', true)
-					}
-				}
-			} catch (err) {
-				console.error(err)
-			}
-
-			if (stepOnly) {
-				$copilotCurrentStepStore = undefined
-				copilotLoading = false
-				copilotStatus = ''
-				if (Object.keys(copilotFlowInputs).length > 0) {
-					openCopilotInputsModal = true
-				} else {
-					finishStepGen()
-				}
-			} else {
-				copilotStatus =
-					"Waiting for the user to validate code and inputs of step '" + module.id + "'"
-			}
-		} catch (err) {
-			if (stepOnly) {
-				copilotStatus = ''
-				$copilotCurrentStepStore = undefined
-				setInitCopilotModules(flowCopilotMode)
-			}
-			if (err?.message) {
-				sendUserToast('Failed to generate code: ' + err.message, true)
-			} else {
-				sendUserToast('Failed to generate code', true)
-				console.error(err)
-			}
-		} finally {
-			copilotLoading = false
-		}
-	}
-
-	flowCopilotContext.genFlow = genFlow
-
-	async function finishCopilotFlowBuilder() {
-		copilotLoading = true
-		select('Input')
-		$copilotCurrentStepStore = 'Input'
-
-		copilotStatus = "Done! Just check the flow's inputs and you're good to go!"
-		$copilotCurrentStepStore = undefined
-		copilotLoading = false
-		await sleep(3000)
-		copilotStatus = ''
-	}
-
-	function focusCopilot() {
-		document.querySelectorAll('.splitpanes__splitter').forEach((el) => {
-			el.classList.add('hidden')
-		})
-		document.querySelectorAll('#flow-graph *').forEach((el) => {
-			if (el instanceof HTMLElement) {
-				el.style.pointerEvents = 'none'
-			}
-		})
-	}
-
-	function blurCopilot() {
-		document.querySelectorAll('.splitpanes__splitter').forEach((el) => {
-			el.classList.remove('hidden')
-		})
-		document.querySelectorAll('#flow-graph *').forEach((el) => {
-			if (el instanceof HTMLElement) {
-				el.style.pointerEvents = ''
-			}
-		})
-	}
-
-	$: $copilotCurrentStepStore === undefined && blurCopilot()
-
-	let renderCount = 0
-	let flowTutorials: FlowTutorials | undefined = undefined
-
-	let jsonViewerDrawer: Drawer | undefined = undefined
-	let yamlEditorDrawer: Drawer | undefined = undefined
-	let flowHistory: FlowHistory | undefined = undefined
+	let jsonViewerDrawer: Drawer | undefined = $state(undefined)
+	let yamlEditorDrawer: Drawer | undefined = $state(undefined)
+	let flowHistory: FlowHistory | undefined = $state(undefined)
 
 	export function triggerTutorial() {
 		const urlParams = new URLSearchParams(window.location.search)
@@ -1219,9 +751,7 @@
 		icon: ComponentType<Icon>
 		action: () => void
 		disabled?: boolean
-	}[] = []
-
-	$: onCustomUiChange(customUi)
+	}[] = $state([])
 
 	function onCustomUiChange(customUi: FlowBuilderWhitelabelCustomUi | undefined) {
 		moreItems = [
@@ -1266,12 +796,37 @@
 		}
 	}
 
-	let flowPreviewButtons: FlowPreviewButtons
+	let flowPreviewButtons: FlowPreviewButtons | undefined = $state()
+
+	run(() => {
+		initialPathStore.set(initialPath)
+	})
+	run(() => {
+		setContext('customUi', customUi)
+	})
+	run(() => {
+		if (flowStore.val || $selectedIdStore) {
+			readFieldsRecursively(flowStore.val)
+			untrack(() => saveSessionDraft())
+		}
+	})
+	run(() => {
+		initialPath && ($pathStore = initialPath)
+	})
+	run(() => {
+		selectedId && untrack(() => select(selectedId))
+	})
+	run(() => {
+		initialPath && initialPath != '' && $workspaceStore && untrack(() => loadTriggers())
+	})
+	run(() => {
+		customUi && untrack(() => onCustomUiChange(customUi))
+	})
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
-<slot />
+{@render children?.()}
 
 <DeployOverrideConfirmationModal
 	bind:deployedBy
@@ -1279,7 +834,7 @@
 	bind:open
 	{diffDrawer}
 	bind:deployedValue
-	currentValue={$flowStore}
+	currentValue={flowStore.val}
 />
 
 <DraftTriggersConfirmationModal
@@ -1294,24 +849,11 @@
 
 {#key renderCount}
 	{#if !$userStore?.operator}
-		<FlowCopilotDrawer {getHubCompletions} {genFlow} bind:flowCopilotMode />
 		{#if $pathStore}
 			<FlowHistory bind:this={flowHistory} path={$pathStore} on:historyRestore />
 		{/if}
 		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
-		<FlowCopilotInputsModal
-			on:confirmed={async () => {
-				applyCopilotFlowInputs()
-				finishStepGen()
-			}}
-			on:canceled={async () => {
-				clearFlowInputsFromStep($copilotModulesStore[0]?.id)
-				finishStepGen()
-			}}
-			bind:open={openCopilotInputsModal}
-			inputs={Object.keys(copilotFlowInputs)}
-		/>
 		<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 
 		<div class="flex flex-col flex-1 h-screen">
@@ -1319,25 +861,21 @@
 			<div
 				class="justify-between flex flex-row items-center pl-2.5 pr-6 space-x-4 scrollbar-hidden overflow-x-auto max-h-12 h-full relative"
 			>
-				{#if $copilotCurrentStepStore !== undefined}
-					<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900] !m-0"
-					></div>
-				{/if}
 				<div class="flex w-full max-w-md gap-4 items-center">
 					<Summary
 						disabled={customUi?.topBar?.editableSummary == false}
-						bind:value={$flowStore.summary}
+						bind:value={flowStore.val.summary}
 					/>
 
 					<UndoRedo
 						undoProps={{ disabled: $history.index === 0 }}
 						redoProps={{ disabled: $history.index === $history.history.length - 1 }}
 						on:undo={() => {
-							const currentModules = $flowStore?.value?.modules
+							const currentModules = flowStore.val?.value?.modules
 
-							$flowStore = undo(history, $flowStore)
+							flowStore.val = undo(history, flowStore.val)
 
-							const newModules = $flowStore?.value?.modules
+							const newModules = flowStore.val?.value?.modules
 							const restoredModules = newModules?.filter(
 								(node) => !currentModules?.some((currentNode) => currentNode?.id === node?.id)
 							)
@@ -1355,7 +893,7 @@
 							$selectedIdStore = 'Input'
 						}}
 						on:redo={() => {
-							$flowStore = redo(history)
+							flowStore.val = redo(history)
 						}}
 					/>
 				</div>
@@ -1388,7 +926,7 @@
 						<div class="flex justify-start w-full">
 							<div>
 								<button
-									on:click={async () => {
+									onclick={async () => {
 										select('settings-metadata')
 										document.getElementById('path')?.focus()
 									}}
@@ -1406,7 +944,7 @@
 								readonly
 								value={$pathStore && $pathStore != '' ? $pathStore : 'Choose a path'}
 								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
-								on:focus={({ currentTarget }) => {
+								onfocus={({ currentTarget }) => {
 									currentTarget.select()
 								}}
 							/>
@@ -1450,7 +988,11 @@
 									mode: 'normal',
 									deployed: deployedValue ?? savedFlow,
 									draft: savedFlow?.draft,
-									current: { ...$flowStore, path: $pathStore, draft_triggers: currentDraftTriggers }
+									current: {
+										...flowStore.val,
+										path: $pathStore,
+										draft_triggers: currentDraftTriggers
+									}
 								})
 							}}
 							disabled={!savedFlow}
@@ -1461,14 +1003,8 @@
 							</div>
 						</Button>
 					{/if}
-					{#if !disableAi && customUi?.topBar?.aiBuilder != false}
-						<FlowCopilotStatus
-							{copilotLoading}
-							bind:copilotStatus
-							{genFlow}
-							{finishCopilotFlowBuilder}
-							{abortController}
-						/>
+					{#if !disableAi && customUi?.topBar?.aiBuilder != false && !aiChatManager.open}
+						<FlowAIButton openPanel={() => aiChatManager.openChat()} />
 					{/if}
 					<FlowPreviewButtons
 						on:openTriggers={(e) => {
@@ -1521,7 +1057,7 @@
 						}
 					}}
 					on:testWithArgs={(e) => {
-						$previewArgsStore = JSON.parse(JSON.stringify(e.detail))
+						previewArgsStore.val = JSON.parse(JSON.stringify(e.detail))
 						flowPreviewButtons?.openPreview(true)
 					}}
 					{savedFlow}
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index f69c1c9450..5297ed3584 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -45,8 +45,7 @@
 				modules={flow?.value?.modules}
 				failureModule={flow?.value?.failure_module}
 				preprocessorModule={flow?.value?.preprocessor_module}
-				on:select={(e) => {
-					let nodeId = e?.detail
+				onSelect={(nodeId) => {
 					if (nodeId === 'triggers') {
 						dispatch('triggerDetail')
 						return
@@ -55,7 +54,7 @@
 					} else if (nodeId === 'preprocessor') {
 						stepDetail = flow?.value?.preprocessor_module
 					} else {
-						stepDetail = dfs(flow?.value?.modules ?? [], (m) => m).find((m) => m?.id === e?.detail)
+						stepDetail = dfs(flow?.value?.modules ?? [], (m) => m).find((m) => m?.id === nodeId)
 					}
 					stepDetail = stepDetail ?? nodeId
 					dispatch('select', stepDetail)
diff --git a/frontend/src/lib/components/FlowLoopIterationPreview.svelte b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
index 6cc235e242..61b3f27662 100644
--- a/frontend/src/lib/components/FlowLoopIterationPreview.svelte
+++ b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
@@ -11,13 +11,23 @@
 	import { CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte'
 	import type { Schema } from '$lib/common'
 
-	export let open: boolean
+	interface Props {
+		open: boolean
+		jobId?: string | undefined
+		job?: Job | undefined
+		modules: FlowModule[]
+		previewArgs?: Record<string, any>
+		whileLoop?: boolean
+	}
 
-	export let jobId: string | undefined = undefined
-	export let job: Job | undefined = undefined
-	export let modules: FlowModule[]
-	export let previewArgs: Record<string, any> = {}
-	export let whileLoop = false
+	let {
+		open,
+		jobId = $bindable(undefined),
+		job = $bindable(undefined),
+		modules,
+		previewArgs = $bindable({}),
+		whileLoop = false
+	}: Props = $props()
 
 	export const forloopSchema: Schema = {
 		$schema: 'https://json-schema.org/draft/2020-12/schema' as string | undefined,
@@ -54,10 +64,10 @@
 		type: 'object'
 	}
 
-	let selectedJobStep: string | undefined = undefined
+	let selectedJobStep: string | undefined = $state(undefined)
 
-	let isRunning: boolean = false
-	let jobProgressReset: () => void
+	let isRunning: boolean = $state(false)
+	let jobProgressReset: (() => void) | undefined = $state(undefined)
 
 	export function test() {
 		runPreview(previewArgs, undefined)
@@ -70,7 +80,7 @@
 		args: Record<string, any>,
 		restartedFrom: RestartedFrom | undefined
 	) {
-		jobProgressReset()
+		jobProgressReset?.()
 		const newFlow = { value: { modules }, summary: '' }
 		jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom)
 		isRunning = true
@@ -89,12 +99,14 @@
 		}
 	}
 
-	$: if (job?.type === 'CompletedJob') {
-		isRunning = false
-	}
+	$effect(() => {
+		if (job?.type === 'CompletedJob') {
+			isRunning = false
+		}
+	})
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 <div class="flex flex-col space-y-2 h-screen bg-surface px-6 py-2 w-full" id="flow-preview-content">
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
@@ -156,7 +168,7 @@
 			<SchemaForm
 				noVariablePicker
 				compact
-				class="py-4 max-w-3xl"
+				className="py-4 max-w-3xl"
 				schema={whileLoop ? whileLoopSchema : forloopSchema}
 				bind:args={previewArgs}
 			/>
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 23efc93695..638b63877f 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -13,7 +13,7 @@
 	import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte'
 	import { emptyString, sendUserToast } from '$lib/utils'
 	import { dfs } from './flows/dfs'
-	import { sliceModules } from './flows/flowStateUtils'
+	import { sliceModules } from './flows/flowStateUtils.svelte'
 	import InputSelectedBadge from './schema/InputSelectedBadge.svelte'
 	import Toggle from './Toggle.svelte'
 	import JsonInputs from './JsonInputs.svelte'
@@ -53,7 +53,7 @@
 
 	export function test() {
 		renderCount++
-		runPreview($previewArgs, undefined)
+		runPreview(previewArgs.val, undefined)
 	}
 
 	const {
@@ -75,9 +75,9 @@
 
 	function extractFlow(previewMode: 'upTo' | 'whole'): OpenFlow {
 		if (previewMode === 'whole') {
-			return $flowStore
+			return flowStore.val
 		} else {
-			const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+			const flow: Flow = JSON.parse(JSON.stringify(flowStore.val))
 			const idOrders = dfs(flow.value.modules, (x) => x.id)
 			let upToIndex = idOrders.indexOf($selectedId)
 
@@ -97,13 +97,13 @@
 			initial = false
 		}
 		try {
-			lastPreviewFlow = JSON.stringify($flowStore)
+			lastPreviewFlow = JSON.stringify(flowStore.val)
 			jobProgressReset()
 			const newFlow = extractFlow(previewMode)
 			jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom)
 			isRunning = true
 			if (inputSelected) {
-				savedArgs = $previewArgs
+				savedArgs = previewArgs.val
 				inputSelected = undefined
 			}
 		} catch (e) {
@@ -120,7 +120,7 @@
 				case 'Enter':
 					if (event.ctrlKey || event.metaKey) {
 						event.preventDefault()
-						runPreview($previewArgs, undefined)
+						runPreview(previewArgs.val, undefined)
 					}
 					break
 
@@ -156,20 +156,20 @@
 		}
 	}
 
-	let savedArgs = $previewArgs
+	let savedArgs = previewArgs.val
 	let inputSelected: 'captures' | 'history' | 'saved' | undefined = undefined
 	async function selectInput(input, type?: 'captures' | 'history' | 'saved' | undefined) {
 		if (!input) {
-			$previewArgs = savedArgs
+			previewArgs.val = savedArgs
 			inputSelected = undefined
 			setTimeout(() => {
 				preventEscape = false
 			}, 100)
 		} else {
-			$previewArgs = input
+			previewArgs.val = input
 			inputSelected = type
 			preventEscape = true
-			jsonEditor?.setCode(JSON.stringify($previewArgs ?? {}, null, '\t'))
+			jsonEditor?.setCode(JSON.stringify(previewArgs.val ?? {}, null, '\t'))
 		}
 	}
 
@@ -185,7 +185,7 @@
 
 	async function loadIndividualStepsStates() {
 		// console.log('loadIndividualStepsStates')
-		dfs($flowStore.value.modules, async (module) => {
+		dfs(flowStore.val.value.modules, async (module) => {
 			// console.log('module', $flowStateStore[module.id], module.id)
 			const prev = $flowStateStore[module.id]?.previewResult
 			if (prev && prev != NEVER_TESTED_THIS_FAR) {
@@ -283,7 +283,7 @@
 							variant="border"
 							title={`Re-start this flow from step ${selectedJobStep} (included).`}
 							on:click={() => {
-								runPreview($previewArgs, {
+								runPreview(previewArgs.val, {
 									flow_job_id: jobId,
 									step_id: selectedJobStep,
 									branch_or_iteration_n: 0
@@ -308,7 +308,7 @@
 									color="blue"
 									startIcon={{ icon: RefreshCw }}
 									on:click={() => {
-										runPreview($previewArgs, {
+										runPreview(previewArgs.val, {
 											flow_job_id: jobId,
 											step_id: selectedJobStep,
 											branch_or_iteration_n: 0
@@ -354,7 +354,7 @@
 											btnClasses="!p-1 !w-[34px] !ml-1"
 											aria-label="Restart flow"
 											on:click|once={() => {
-												runPreview($previewArgs, {
+												runPreview(previewArgs.val, {
 													flow_job_id: jobId,
 													step_id: selectedJobStep,
 													branch_or_iteration_n: branchOrIterationN
@@ -375,7 +375,7 @@
 					color="dark"
 					size="sm"
 					btnClasses="w-full max-w-lg"
-					on:click={() => runPreview($previewArgs, undefined)}
+					on:click={() => runPreview(previewArgs.val, undefined)}
 					id="flow-editor-test-flow-drawer"
 					shortCut={{ Icon: CornerDownLeft }}
 				>
@@ -385,7 +385,7 @@
 		{/if}
 	</div>
 	<div class="w-full flex flex-col gap-y-1">
-		{#if lastPreviewFlow && JSON.stringify($flowStore) != lastPreviewFlow}
+		{#if lastPreviewFlow && JSON.stringify(flowStore.val) != lastPreviewFlow}
 			<div class="pt-1">
 				<div
 					class="bg-orange-200 text-orange-600 border border-orange-600 p-2 flex items-center gap-2 rounded"
@@ -409,7 +409,7 @@
 				runnableId={$initialPathStore}
 				stablePathForCaptures={$initialPathStore || fakeInitialPath}
 				runnableType={'FlowPath'}
-				previewArgs={$previewArgs}
+				previewArgs={previewArgs.val}
 				on:openTriggers
 				on:select={(e) => {
 					selectInput(e.detail.payload, e.detail?.type)
@@ -419,7 +419,7 @@
 			>
 				<div class="w-full flex flex-row justify-between">
 					<InputSelectedBadge
-						on:click={() => schemaFormWithArgPicker?.resetSelected()}
+						onReject={() => schemaFormWithArgPicker?.resetSelected()}
 						{inputSelected}
 					/>
 					<div class="flex flex-row gap-2">
@@ -433,7 +433,7 @@
 							}}
 							lightMode
 							on:change={(e) => {
-								jsonEditor?.setCode(JSON.stringify($previewArgs ?? {}, null, '\t'))
+								jsonEditor?.setCode(JSON.stringify(previewArgs.val ?? {}, null, '\t'))
 								refresh()
 							}}
 						/>
@@ -445,7 +445,7 @@
 							bind:this={jsonEditor}
 							on:select={(e) => {
 								if (e.detail) {
-									$previewArgs = e.detail
+									previewArgs.val = e.detail
 								}
 							}}
 							updateOnBlur={false}
@@ -458,10 +458,10 @@
 							<SchemaForm
 								noVariablePicker
 								compact
-								schema={$flowStore.schema}
-								bind:args={$previewArgs}
+								schema={flowStore.val.schema}
+								bind:args={previewArgs.val}
 								on:change={() => {
-									savedArgs = $previewArgs
+									savedArgs = previewArgs.val
 								}}
 								bind:isValid
 							/>
diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 8a2a630268..a4a6d9edcd 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -29,7 +29,7 @@
 	import Alert from './common/alert/Alert.svelte'
 	import FlowGraphViewerStep from './FlowGraphViewerStep.svelte'
 	import FlowGraphV2 from './graph/FlowGraphV2.svelte'
-	import { buildPrefix } from './graph/graphBuilder'
+	import { buildPrefix } from './graph/graphBuilder.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -1253,31 +1253,29 @@
 							success={jobId != undefined && isSuccess(job?.['success'])}
 							flowModuleStates={$localModuleStates}
 							bind:expandedSubflows
-							on:select={(e) => {
+							onSelect={(e) => {
+								console.log('onSelect', e)
 								if (rightColumnSelect != 'node_definition') {
 									rightColumnSelect = 'node_status'
 								}
-								if (typeof e.detail == 'string') {
-									if (e.detail == 'Input') {
+								if (typeof e == 'string') {
+									if (e == 'Input') {
 										selectedNode = 'start'
 										stepDetail = undefined
-									} else if (e.detail == 'Result') {
+									} else if (e == 'Result') {
 										selectedNode = 'end'
 										stepDetail = 'end'
 									} else {
-										const mod = dfs(job?.raw_flow?.modules ?? [], (m) => m).find(
-											(m) => m?.id === e?.detail
-										)
+										const mod = dfs(job?.raw_flow?.modules ?? [], (m) => m).find((m) => m?.id === e)
 										stepDetail = mod
-										selectedNode = e?.detail
+										selectedNode = e
 									}
 								} else {
-									stepDetail = e.detail
-									selectedNode = e.detail.id
+									stepDetail = e
+									selectedNode = e.id
 								}
 							}}
-							on:selectedIteration={async (e) => {
-								let detail = e.detail
+							onSelectedIteration={async (detail) => {
 								if (detail.manuallySet) {
 									let rootJobId = detail.id
 									await tick()
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 49ad0bc54b..4f2ab8a456 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -8,20 +8,30 @@
 	import FlowViewerInner from './FlowViewerInner.svelte'
 	import FlowInputViewer from './FlowInputViewer.svelte'
 
-	export let flow: {
-		summary: string
-		description?: string
-		value: FlowValue
-		schema?: any
+	interface Props {
+		flow: {
+			summary: string
+			description?: string
+			value: FlowValue
+			schema?: any
+		}
+		initialOpen?: number | undefined
+		noSide?: boolean
+		noGraph?: boolean
+		tab?: 'ui' | 'raw' | 'schema'
+		noSummary?: boolean
+		noGraphDownload?: boolean
 	}
-	export let initialOpen: number | undefined = undefined
-	export let noSide = false
 
-	export let noGraph: boolean = false
-
-	export let tab: 'ui' | 'raw' | 'schema' = noGraph ? 'schema' : 'ui'
-	export let noSummary = false
-	export let noGraphDownload = false
+	let {
+		flow,
+		initialOpen = undefined,
+		noSide = false,
+		noGraph = false,
+		tab = $bindable(noGraph ? 'schema' : 'ui'),
+		noSummary = false,
+		noGraphDownload = false
+	}: Props = $props()
 
 	let open: { [id: number]: boolean } = {}
 	if (initialOpen) {
@@ -38,7 +48,7 @@
 	<Tab value="raw">Raw</Tab>
 	<Tab value="schema">Input Schema</Tab>
 
-	<svelte:fragment slot="content">
+	{#snippet content()}
 		<TabContent value="ui">
 			<div class="flow-root w-full pb-4">
 				{#if !noSummary}
@@ -65,5 +75,5 @@
 			<div class="my-4"></div>
 			<SchemaViewer schema={flow.schema} />
 		</TabContent>
-	</svelte:fragment>
+	{/snippet}
 </Tabs>
diff --git a/frontend/src/lib/components/FlowViewerInner.svelte b/frontend/src/lib/components/FlowViewerInner.svelte
index e4bec76006..0e300c8410 100644
--- a/frontend/src/lib/components/FlowViewerInner.svelte
+++ b/frontend/src/lib/components/FlowViewerInner.svelte
@@ -11,16 +11,20 @@
 	import HighlightTheme from './HighlightTheme.svelte'
 	import { filteredContentForExport } from './flows/utils'
 
-	export let flow: {
-		summary: string
-		description?: string
-		value: FlowValue
-		schema?: any
+	interface Props {
+		flow: {
+			summary: string
+			description?: string
+			value: FlowValue
+			schema?: any
+		}
 	}
 
-	$: flowFiltered = filteredContentForExport(flow)
+	let { flow }: Props = $props()
 
-	let rawType: 'json' | 'yaml' = 'yaml'
+	let flowFiltered = $derived(filteredContentForExport(flow))
+
+	let rawType: 'json' | 'yaml' = $state('yaml')
 
 	function trimStringToLines(inputString: string, maxLines: number = 100): string {
 		const lines = inputString?.split('\n') ?? []
@@ -29,7 +33,7 @@
 		return linesToKeep.join('\n')
 	}
 
-	let code: string = ''
+	let code: string = $state('')
 
 	function computeCode() {
 		const str =
@@ -44,11 +48,13 @@
 		code = str
 	}
 
-	let shouldDisplayLoadMore = false
+	let shouldDisplayLoadMore = $state(false)
 
-	$: flowFiltered && rawType && computeCode()
+	$effect(() => {
+		flowFiltered && rawType && computeCode()
+	})
 
-	let maxLines = 100
+	let maxLines = $state(100)
 </script>
 
 <HighlightTheme />
@@ -62,7 +68,7 @@
 	>
 		<Tab value="yaml">YAML</Tab>
 		<Tab value="json">JSON</Tab>
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<div class="relative pt-2">
 				<Button
 					on:click={() =>
@@ -105,7 +111,7 @@
 					</Button>
 				{/if}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</Tabs>
 </div>
 
diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte
index 22229d8f8e..5ae36a7e24 100644
--- a/frontend/src/lib/components/FolderEditor.svelte
+++ b/frontend/src/lib/components/FolderEditor.svelte
@@ -7,7 +7,6 @@
 		GranularAclService,
 		GroupService
 	} from '$lib/gen'
-	import AutoComplete from 'simple-svelte-autocomplete'
 	import TableCustom from './TableCustom.svelte'
 	import { Alert, Button, Drawer, DrawerContent } from './common'
 	import Skeleton from './common/skeleton/Skeleton.svelte'
@@ -19,6 +18,7 @@
 	import Label from './Label.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { createEventDispatcher } from 'svelte'
+	import Select from './Select.svelte'
 
 	export let name: string
 	let can_write = false
@@ -184,25 +184,20 @@
 			</Alert>
 			<div class="flex items-center gap-1">
 				<div>
-					<ToggleButtonGroup
-						bind:selected={ownerKind}
-						on:selected={() => (ownerItem = '')}
-						let:item
-					>
-						<ToggleButton value="user" label="User" {item} />
-						<ToggleButton value="group" label="Group" {item} />
+					<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (ownerItem = '')}>
+						{#snippet children({ item })}
+							<ToggleButton value="user" label="User" {item} />
+							<ToggleButton value="group" label="Group" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 
 				{#key ownerKind}
-					<AutoComplete
-						required
-						noInputStyles
-						items={ownerKind === 'user'
+					{@const items =
+						ownerKind === 'user'
 							? usernames.filter((x) => !perms?.map((y) => y.owner_name).includes('u/' + x))
 							: groups.filter((x) => !perms?.map((y) => y.owner_name).includes('g/' + x))}
-						bind:selectedItem={ownerItem}
-					/>
+					<Select items={items.map((x) => ({ label: x, value: x }))} bind:value={ownerItem} />
 					{#if ownerKind == 'group'}
 						<Button
 							title="View Group"
@@ -278,7 +273,6 @@
 										<ToggleButtonGroup
 											disabled={owner_name == 'u/' + $userStore?.username && !$userStore?.is_admin}
 											selected={role}
-											let:item
 											on:selected={async (e) => {
 												const role = e.detail
 												// const wasInFolder = (folder?.owners ?? []).includes(folder)
@@ -315,28 +309,30 @@
 												loadFolder()
 											}}
 										>
-											<ToggleButton
-												value="viewer"
-												label="Viewer"
-												tooltip="A viewer of a folder has read-only access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
-												{item}
-											/>
+											{#snippet children({ item })}
+												<ToggleButton
+													value="viewer"
+													label="Viewer"
+													tooltip="A viewer of a folder has read-only access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
+													{item}
+												/>
 
-											<ToggleButton
-												position="center"
-												value="writer"
-												label="Writer"
-												tooltip="A writer of a folder has read AND write access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
-												{item}
-											/>
+												<ToggleButton
+													position="center"
+													value="writer"
+													label="Writer"
+													tooltip="A writer of a folder has read AND write access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
+													{item}
+												/>
 
-											<ToggleButton
-												position="right"
-												value="admin"
-												label="Admin"
-												tooltip="An admin of a folder has read AND write access to all the elements inside the folders and can manage the permissions as well as add new admins"
-												{item}
-											/>
+												<ToggleButton
+													position="right"
+													value="admin"
+													label="Admin"
+													tooltip="An admin of a folder has read AND write access to all the elements inside the folders and can manage the permissions as well as add new admins"
+													{item}
+												/>
+											{/snippet}
 										</ToggleButtonGroup>
 									</div>
 								{:else}
diff --git a/frontend/src/lib/components/FolderPicker.svelte b/frontend/src/lib/components/FolderPicker.svelte
new file mode 100644
index 0000000000..dd7f623813
--- /dev/null
+++ b/frontend/src/lib/components/FolderPicker.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { FolderService } from '$lib/gen'
+	import { workspaceStore, userStore } from '$lib/stores'
+	import { Plus, Eye } from 'lucide-svelte'
+	import { Button, Drawer, DrawerContent } from './common'
+	import FolderEditor from './FolderEditor.svelte'
+
+	let folders: { name: string; write: boolean }[] = $state([])
+	let newFolder: Drawer | null = $state(null)
+	let viewFolder: Drawer | null = $state(null)
+	let newFolderName: string = $state('')
+	let folderCreated: string | undefined = $state(undefined)
+
+	type Props = {
+		folderName: string
+		initialPath?: string
+		disabled?: boolean
+		disableEditing?: boolean
+	}
+
+	let {
+		folderName = $bindable(''),
+		initialPath = $bindable(undefined),
+		disabled = $bindable(undefined),
+		disableEditing = $bindable(undefined)
+	}: Props = $props()
+
+	async function loadFolders(): Promise<void> {
+		let initialFolders: { name: string; write: boolean }[] = []
+		let initialFolder = ''
+		if (initialPath?.split('/')?.[0] == 'f') {
+			initialFolder = initialPath?.split('/')?.[1]
+			initialFolders.push({ name: initialFolder, write: true })
+		}
+
+		const excludedFolders = [initialFolder, 'app_groups', 'app_custom', 'app_themes']
+
+		folders = initialFolders.concat(
+			(
+				await FolderService.listFolderNames({
+					workspace: $workspaceStore!
+				})
+			)
+				.filter((x) => !excludedFolders.includes(x))
+				.map((x) => ({
+					name: x,
+					write:
+						$userStore?.folders?.includes(x) == true ||
+						($userStore?.is_admin ?? false) ||
+						($userStore?.is_super_admin ?? false)
+				}))
+		)
+	}
+
+	async function addFolder() {
+		await FolderService.createFolder({
+			workspace: $workspaceStore ?? '',
+			requestBody: { name: newFolderName }
+		})
+		folderCreated = newFolderName
+		$userStore?.folders?.push(newFolderName)
+		loadFolders()
+	}
+
+	loadFolders()
+</script>
+
+<Drawer bind:this={newFolder}>
+	<DrawerContent
+		title="New Folder"
+		on:close={() => {
+			newFolder?.closeDrawer()
+			folderCreated = undefined
+		}}
+	>
+		{#if !folderCreated}
+			<div class="flex flex-col gap-2">
+				<input placeholder="New folder name" bind:value={newFolderName} />
+				<Button size="md" startIcon={{ icon: Plus }} disabled={!newFolderName} on:click={addFolder}>
+					New&nbsp;folder
+				</Button>
+			</div>
+		{:else}
+			<FolderEditor name={folderCreated} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={viewFolder}>
+	<DrawerContent title="Folder {folderName}" on:close={viewFolder.closeDrawer}>
+		<FolderEditor name={folderName ?? ''} />
+	</DrawerContent>
+</Drawer>
+
+<div class="flex flex-row items-center gap-1 w-full">
+	<select class="grow w-full" disabled={disabled || disableEditing} bind:value={folderName}>
+		{#if folders?.length == 0}
+			<option disabled>No folders</option>
+		{/if}
+		{#each folders as { name, write }}
+			<option disabled={!write}>{name}{write ? '' : ' (read-only)'}</option>
+		{/each}
+	</select>
+	<Button
+		title="View folder"
+		btnClasses="!p-1.5"
+		variant="border"
+		color="light"
+		size="xs"
+		disabled={!folderName || folderName == ''}
+		on:click={viewFolder.openDrawer}
+		iconOnly
+		startIcon={{ icon: Eye }}
+	/>
+	<Button
+		title="New folder"
+		btnClasses="!p-1.5"
+		variant="border"
+		color="light"
+		size="xs"
+		{disabled}
+		on:click={newFolder.openDrawer}
+		iconOnly
+		startIcon={{ icon: Plus }}
+	/>
+</div>
diff --git a/frontend/src/lib/components/GroupEditor.svelte b/frontend/src/lib/components/GroupEditor.svelte
index fbe03bd9f0..2d7a1ce889 100644
--- a/frontend/src/lib/components/GroupEditor.svelte
+++ b/frontend/src/lib/components/GroupEditor.svelte
@@ -7,7 +7,6 @@
 		type InstanceGroup
 	} from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import AutoComplete from 'simple-svelte-autocomplete'
 	import { createEventDispatcher } from 'svelte'
 	import { Button } from './common'
 	import Skeleton from './common/skeleton/Skeleton.svelte'
@@ -18,6 +17,7 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import Section from './Section.svelte'
 	import Label from './Label.svelte'
+	import Select from './Select.svelte'
 
 	export let name: string
 	let can_write = false
@@ -129,7 +129,7 @@
 <Section label={`Members (${members?.length ?? 0})`}>
 	{#if can_write}
 		<div class="flex items-start">
-			<AutoComplete required noInputStyles items={usernames} bind:selectedItem={username} />
+			<Select items={usernames?.map((u) => ({ value: u, label: u }))} bind:value={username} />
 			<Button variant="contained" color="blue" size="sm" btnClasses="!ml-4" on:click={addToGroup}>
 				Add member
 			</Button>
@@ -150,7 +150,6 @@
 								<div>
 									<ToggleButtonGroup
 										selected={role}
-										let:item
 										on:selected={async (e) => {
 											const role = e.detail
 											// const wasInGroup = (group?.members ?? []).includes(group)
@@ -211,31 +210,33 @@
 											loadGroup()
 										}}
 									>
-										<ToggleButton
-											value="member"
-											size="xs"
-											label="Member"
-											tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
-											{item}
-										/>
-										<ToggleButton
-											position="right"
-											value="admin"
-											size="xs"
-											label="Admin"
-											tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
-											{item}
-										/>
-										{#if role === 'manager'}
+										{#snippet children({ item })}
 											<ToggleButton
-												value="manager"
+												value="member"
 												size="xs"
-												label="Manager"
-												tooltip="A manager of a group can manage the group, adding and removing users and
-												change their roles. Being a manager does not make you a member"
+												label="Member"
+												tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
 												{item}
 											/>
-										{/if}
+											<ToggleButton
+												position="right"
+												value="admin"
+												size="xs"
+												label="Admin"
+												tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
+												{item}
+											/>
+											{#if role === 'manager'}
+												<ToggleButton
+													value="manager"
+													size="xs"
+													label="Manager"
+													tooltip="A manager of a group can manage the group, adding and removing users and
+												change their roles. Being a manager does not make you a member"
+													{item}
+												/>
+											{/if}
+										{/snippet}
 									</ToggleButtonGroup>
 								</div>
 							{:else}
diff --git a/frontend/src/lib/components/HistoricInputs.svelte b/frontend/src/lib/components/HistoricInputs.svelte
index 1acd9a9e28..ac79c0479b 100644
--- a/frontend/src/lib/components/HistoricInputs.svelte
+++ b/frontend/src/lib/components/HistoricInputs.svelte
@@ -8,21 +8,34 @@
 	import HistoricList from './HistoricList.svelte'
 	import { Loader2 } from 'lucide-svelte'
 
-	export let runnableId: string | undefined = undefined
-	export let runnableType: RunnableType | undefined = undefined
-	export let loading: boolean = false
-	export let selected: string | undefined = undefined
-	export let showAuthor = false
-	export let placement: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end' = 'top-end'
-	export let limitPayloadSize = false
-	export let searchArgs: Record<string, any> | undefined = undefined
+	interface Props {
+		runnableId?: string | undefined
+		runnableType?: RunnableType | undefined
+		loading?: boolean
+		selected?: string | undefined
+		showAuthor?: boolean
+		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
+		limitPayloadSize?: boolean
+		searchArgs?: Record<string, any> | undefined
+	}
 
-	let historicList: HistoricList | undefined = undefined
+	let {
+		runnableId = undefined,
+		runnableType = undefined,
+		loading = $bindable(false),
+		selected = $bindable(undefined),
+		showAuthor = false,
+		placement = 'top-end',
+		limitPayloadSize = false,
+		searchArgs = undefined
+	}: Props = $props()
+
+	let historicList: HistoricList | undefined = $state(undefined)
 	const dispatch = createEventDispatcher()
 
-	let jobs: Job[] = []
+	let jobs: Job[] = $state([])
 	let hasMoreCurrentRuns = false
-	let page = 1
+	let page = $state(1)
 
 	async function handleSelected(data: any) {
 		if (selected === data.id) {
@@ -34,7 +47,10 @@
 			const fullPayload = await data.getFullPayload?.()
 			dispatch('select', { args: fullPayload, jobId: data.id })
 		} else {
-			dispatch('select', { args: structuredClone(data.payloadData), jobId: data.id })
+			dispatch('select', {
+				args: structuredClone($state.snapshot(data.payloadData)),
+				jobId: data.id
+			})
 		}
 	}
 
@@ -77,11 +93,11 @@
 		} else if (runnableType === 'ScriptHash') {
 			return 'script,preview'
 		}
-		return 'all'
+		return ''
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 {#if runnableId}
 	<JobLoader
diff --git a/frontend/src/lib/components/HistoricList.svelte b/frontend/src/lib/components/HistoricList.svelte
index 9d7f741381..17f2612ebe 100644
--- a/frontend/src/lib/components/HistoricList.svelte
+++ b/frontend/src/lib/components/HistoricList.svelte
@@ -1,21 +1,33 @@
 <script lang="ts">
 	import { InputService, type RunnableType } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { onDestroy } from 'svelte'
+	import { onDestroy, untrack } from 'svelte'
 	import InfiniteList from './InfiniteList.svelte'
 	import JobSchemaPicker from './schema/JobSchemaPicker.svelte'
 
-	export let runnableId: string | undefined
-	export let runnableType: RunnableType | undefined
-	export let selected: string | undefined = undefined
-	export let showAuthor = false
-	export let placement: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end' = 'bottom-start'
-	export let limitPayloadSize = false
-	export let searchArgs: Record<string, any> | undefined = undefined
+	interface Props {
+		runnableId: string | undefined
+		runnableType: RunnableType | undefined
+		selected?: string | undefined
+		showAuthor?: boolean
+		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
+		limitPayloadSize?: boolean
+		searchArgs?: Record<string, any> | undefined
+	}
 
-	let infiniteList: InfiniteList | undefined = undefined
+	let {
+		runnableId,
+		runnableType,
+		selected = undefined,
+		showAuthor = false,
+		placement = 'bottom-start',
+		limitPayloadSize = false,
+		searchArgs = undefined
+	}: Props = $props()
+
+	let infiniteList: InfiniteList | undefined = $state(undefined)
 	let loadInputsPageFn: ((page: number, perPage: number) => Promise<any>) | undefined = undefined
-	let viewerOpen = false
+	let viewerOpen = $state(false)
 	let openStates: Record<string, boolean> = {} // Track open state for each item
 
 	export async function refresh(clearCurrentRuns: boolean = false) {
@@ -101,18 +113,20 @@
 		viewerOpen = Object.values(openStates).some((state) => state)
 	}
 
-	$: $workspaceStore && runnableId && runnableType && infiniteList && initLoadInputs()
+	$effect(() => {
+		$workspaceStore && runnableId && runnableType && infiniteList && untrack(() => initLoadInputs())
+	})
 </script>
 
 <InfiniteList bind:this={infiniteList} selectedItemId={selected} on:error on:select>
-	<svelte:fragment slot="columns">
+	{#snippet columns()}
 		<colgroup>
 			<col class="w-8" />
 			<col class="w-16" />
 			<col />
 		</colgroup>
-	</svelte:fragment>
-	<svelte:fragment let:item let:hover>
+	{/snippet}
+	{#snippet children({ item, hover })}
 		<JobSchemaPicker
 			job={item}
 			hovering={hover}
@@ -125,10 +139,10 @@
 			}}
 			{limitPayloadSize}
 		/>
-	</svelte:fragment>
-	<svelte:fragment slot="empty">
+	{/snippet}
+	{#snippet empty()}
 		<div class="text-center text-tertiary text-xs py-2">
 			{runnableId ? 'No previous inputs' : 'Save draft to see previous runs'}
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </InfiniteList>
diff --git a/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte b/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
index 7250a906c8..9a505bad55 100644
--- a/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
+++ b/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
@@ -8,16 +8,15 @@
 	import { enterpriseLicense, superadmin } from '$lib/stores'
 	import CollapseLink from './CollapseLink.svelte'
 
-	export let customTags: string[] | undefined
-	let selectedTags: string[] = !$enterpriseLicense ? ['agent_test'] : []
+	type Props = {
+		customTags: string[] | undefined
+	}
+	let { customTags = $bindable() }: Props = $props()
+	let selectedTags: string[] = $state(!$enterpriseLicense ? ['agent_test'] : [])
+	let workerGroup: string = $state('agent')
+	let token: string = $state('')
 
-	let workerGroup: string = 'agent'
-
-	let token: string = ''
-
-	$: selectedTags && selectedTags.length > 0 && $superadmin && workerGroup && refreshToken()
-
-	async function refreshToken() {
+	async function refreshToken(workerGroup: string, selectedTags: string[]) {
 		try {
 			const newToken = await AgentWorkersService.createAgentToken({
 				requestBody: {
@@ -32,6 +31,12 @@
 			sendUserToast('Error creating agent token: ' + error.toString(), true)
 		}
 	}
+
+	$effect(() => {
+		if (selectedTags.length > 0 && $superadmin) {
+			refreshToken(workerGroup, selectedTags)
+		}
+	})
 </script>
 
 <div class="flex flex-col gap-y-4">
@@ -55,64 +60,81 @@
 		{/if}
 		<TagsToListenTo disabled={!$enterpriseLicense} bind:worker_tags={selectedTags} {customTags} />
 	</Section>
+
 	<Section label="Generated JWT token" primary>
-		<div class="relative max-w-md">
+		{#if !$enterpriseLicense}
+			<div class="text-sm text-secondary mb-2 max-w-md">
+				Agent workers are only available in the enterprise edition. For evaluation purposes, you can
+				only use the tag `agent_test` tag and it is limited to 100 jobs.
+			</div>
+		{/if}
+		<div class="relative max-w-md group">
+			<!-- svelte-ignore event_directive_deprecated -->
 			<input
-				on:click|preventDefault|stopPropagation|capture={() => {
-					navigator.clipboard.writeText(token)
-					sendUserToast('Copied to clipboard')
+				on:click|preventDefault|stopPropagation={() => {
+					if (token) {
+						navigator.clipboard.writeText(token)
+						sendUserToast('Copied to clipboard')
+					}
 				}}
-				placeholder="Select tags to generate a jwt token"
+				placeholder="Select tags to generate a JWT token"
 				type="text"
 				disabled
 				value={token}
-				class="pr-8 text-sm text-secondary"
+				class="w-full pr-10 pl-3 py-2 text-sm text-gray-600 bg-gray-50 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition truncate"
 			/>
+
+			<!-- svelte-ignore event_directive_deprecated -->
 			<button
-				class="absolute right-2 top-1/2 -translate-y-1/2 text-primary"
+				class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 group-hover:text-blue-600 hover:scale-105 transition"
+				aria-label="Copy token to clipboard"
 				on:click|preventDefault|stopPropagation={() => {
-					navigator.clipboard.writeText(token)
-					sendUserToast('Copied to clipboard')
+					if (token) {
+						navigator.clipboard.writeText(token)
+						sendUserToast('Copied to clipboard')
+					}
 				}}
 			>
-				<Copy size={16} />
+				<Copy size={18} />
 			</button>
 		</div>
 
-		<div class="text-sm text-secondary mt-2 mb-12 max-w-md">
-			Pass the env variables:
-			<ul class="my-1">
-				<li>MODE=agent</li>
-				<li>AGENT_TOKEN={'"<token above>"'}</li>
-				<li>BASE_INTERNAL_URL={'"<base internal url>"'}</li>
+		<div class="flex flex-col gap-2 text-sm mt-3 leading-relaxed">
+			Set the following environment variables:
+			<ul class="list-disc list-inside mt-1">
+				<li><code>MODE=agent</code></li>
+				<li><code>AGENT_TOKEN=&lt;token&gt;</code></li>
+				<li><code>BASE_INTERNAL_URL=&lt;base url&gt;</code></li>
 			</ul>
-			to a worker to have it act as an HTTP agent worker. INIT_SCRIPT, if needed, must be passed as an
-			env variable.
-
-			<p class="mt-4">
-				Remember to have at least one normal worker that listens to the tags `flow` and `dependency`
-				(or `flow-$workspace` and `dependency-$workspace` if using workspace specific default tags)
-				to have flow and dependency job being runnable as agent workers can't run dependency jobs
-				nor can run the flow state machine (but can run the subjobs within them).
+			<p class="text-sm leading-relaxed">
+				to a worker to have it act as an HTTP agent worker.
+				<code>INIT_SCRIPT</code>, if needed, must be passed as an env variable.
 			</p>
+			<Alert type="warning" size="sm" title="Agent Worker Limitations">
+				Ensure at least one normal worker is running and listening to the tags
+				<code>flow</code> and <code>dependency</code>
+				(or <code>flow-&lt;workspace&gt;</code> and <code>dependency-&lt;workspace&gt;</code> if
+				using workspace-specific default tags), because agent workers
+				<strong>cannot run dependency jobs</strong>
+				nor execute the
+				<strong>flow state machine</strong>. They can, however, run subjobs within flows.
+			</Alert>
+			<CollapseLink text="Automate JWT token generation" small>
+				<div class="text-xs mt-2">
+					Use the following API endpoint with a superadmin bearer token:
+					<code class="block mt-1 mb-2">POST /api/agent_workers/create_agent_token</code>
+					<pre class=" p-2 rounded-lg text-xs overflow-auto">
+	<code
+							>{`
+	  "worker_group": "agent",
+	  "tags": ["tag1", "tag2"],
+	  "exp": 1717334400
+	`}</code
+						>
+					</pre>
+					The JSON response will contain the generated JWT token.
+				</div>
+			</CollapseLink>
 		</div>
-
-		<CollapseLink text="Automate JWT token generation" small>
-			<div class="text-xs text-secondary">
-				Use the following api endpoint with a superadmin bearer token:
-				<code class="text-primary"> POST /api/agent_workers/create_agent_token </code>
-				with body:
-				<pre>
-			<code class="text-primary">
-{`{
-	"worker_group": "agent",
-	"tags": ["tag1", "tag2"],
-	"exp": 1717334400 // 3 years from now
-}`}
-					</code>
-				</pre>
-				JSON response will be the JWT token.
-			</div>
-		</CollapseLink>
 	</Section>
 </div>
diff --git a/frontend/src/lib/components/IconedResourceType.svelte b/frontend/src/lib/components/IconedResourceType.svelte
index 5daea14d17..7375c64cd7 100644
--- a/frontend/src/lib/components/IconedResourceType.svelte
+++ b/frontend/src/lib/components/IconedResourceType.svelte
@@ -1,18 +1,35 @@
 <script>
 	import { FileText } from 'lucide-svelte'
 	import { APP_TO_ICON_COMPONENT } from './icons'
-	export let name
-	export let silent = false
-	export let after = false
-	export let height = '24px'
-	export let width = '24px'
-	export let center = false
-	export let isSelected = false
-	export let formatExtension = undefined
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} name
+	 * @property {boolean} [silent]
+	 * @property {boolean} [after]
+	 * @property {string} [height]
+	 * @property {string} [width]
+	 * @property {boolean} [center]
+	 * @property {boolean} [isSelected]
+	 * @property {any} [formatExtension]
+	 */
 
-	$: iconComponent = name === "teams" 
-		? APP_TO_ICON_COMPONENT.ms_teams_webhook 
-		: APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
+	/** @type {Props} */
+	let {
+		name,
+		silent = false,
+		after = false,
+		height = '24px',
+		width = '24px',
+		center = false,
+		isSelected = false,
+		formatExtension = undefined
+	} = $props()
+
+	let iconComponent = $derived(
+		name === 'teams'
+			? APP_TO_ICON_COMPONENT.ms_teams_webhook
+			: APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
+	)
 </script>
 
 <div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
@@ -20,12 +37,13 @@
 		{name}
 	{/if}
 	{#if iconComponent}
+		{@const SvelteComponent = iconComponent}
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
-			<svelte:component this={iconComponent} {height} {width} />
+			<SvelteComponent {height} {width} />
 		</span>
 	{:else if formatExtension}
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
-			<svelte:component this={FileText} {height} {width} />
+			<FileText {height} {width} />
 		</span>
 	{:else}
 		<span style="width: {width}; height: {height}" class="bg-gray-100 rounded-full"></span>
@@ -34,4 +52,3 @@
 		{name}
 	{/if}
 </div>
-
diff --git a/frontend/src/lib/components/InfiniteList.svelte b/frontend/src/lib/components/InfiniteList.svelte
index 6457d5ea60..b4afaf41ba 100644
--- a/frontend/src/lib/components/InfiniteList.svelte
+++ b/frontend/src/lib/components/InfiniteList.svelte
@@ -6,26 +6,48 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let loading = false
-	export let items: any[] | undefined = undefined
-	export let selectedItemId: any | undefined = undefined
-	export let isEmpty: boolean = true
-	export let length: number = 0
-	export let rounded: boolean = true
-	export let noBorder: boolean = false
-	export let extraRowClasses: { bgSelected: string; bgHover: string; class: string } = {
-		bgSelected: '',
-		bgHover: '',
-		class: ''
+	interface Props {
+		loading?: boolean
+		items?: any[] | undefined
+		selectedItemId?: any | undefined
+		isEmpty?: boolean
+		length?: number
+		rounded?: boolean
+		noBorder?: boolean
+		extraRowClasses?: { bgSelected: string; bgHover: string; class: string }
+		neverShowLoader?: boolean
+		columns?: import('svelte').Snippet
+		extra_row?: import('svelte').Snippet<[any]>
+		children?: import('svelte').Snippet<[any]>
+		empty?: import('svelte').Snippet<[any]>
 	}
-	export let neverShowLoader = false
+
+	let {
+		loading = $bindable(false),
+		items = $bindable(undefined),
+		selectedItemId = $bindable(undefined),
+		isEmpty = $bindable(true),
+		length = $bindable(0),
+		rounded = true,
+		noBorder = false,
+		extraRowClasses = {
+			bgSelected: '',
+			bgHover: '',
+			class: ''
+		},
+		neverShowLoader = false,
+		columns,
+		extra_row,
+		children,
+		empty
+	}: Props = $props()
 
 	const perPage = 20
 
-	let hasMore = false
+	let hasMore = $state(false)
 	let page = 1
 	let hasAlreadyFailed = false
-	let hovered: any | undefined = undefined
+	let hovered: any | undefined = $state(undefined)
 	let initLoad = false
 	let loadInputs: ((page: number, perPage: number) => Promise<any[]>) | undefined = undefined
 	let deleteItemFn: ((id: any) => Promise<any>) | undefined = undefined
@@ -39,7 +61,7 @@
 		page = 1
 	}
 
-	let loadingMore = false
+	let loadingMore = $state(false)
 
 	export async function loadData(loadOption: 'refresh' | 'forceRefresh' | 'loadMore' = 'loadMore') {
 		// console.log('loadData', loadOption, length, items?.length)
@@ -146,7 +168,7 @@
 	{noBorder}
 	{neverShowLoader}
 >
-	<slot name="columns" />
+	{@render columns?.()}
 
 	<tbody class="h-full w-full">
 		<Row
@@ -158,7 +180,7 @@
 			)}
 			on:hover={(e) => (hovered = e.detail ? 'extraRow' : undefined)}
 		>
-			<slot name="extra-row" hover={hovered === 'extraRow'} />
+			{@render extra_row?.({ hover: hovered === 'extraRow' })}
 		</Row>
 		{#each items ?? [] as item, index}
 			{@const hover = item.id === hovered}
@@ -171,16 +193,16 @@
 				)}
 				on:hover={(e) => (hovered = e.detail ? item.id : undefined)}
 			>
-				<slot {item} {hover} />
+				{@render children?.({ item, hover })}
 			</Row>
 		{/each}
 	</tbody>
 
-	<svelte:fragment slot="emptyMessage">
+	{#snippet emptyMessage()}
 		{#if (!items || items?.length === 0) && (!loading || neverShowLoader)}
-			<slot name="empty" {items} />
+			{@render empty?.({ items })}
 		{/if}
-	</svelte:fragment>
+	{/snippet}
 </DataTable>
 
 <style>
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index aa66e1d88b..2252652663 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	const dynamicTemplateRegexPairs = buildPrefixRegex([
 		'flow_input',
 		'results',
@@ -10,7 +10,7 @@
 <script lang="ts">
 	import type { Schema } from '$lib/common'
 	import type { InputCat } from '$lib/utils'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 
 	import ArgInput from './ArgInput.svelte'
 	import FieldHeader from './FieldHeader.svelte'
@@ -37,40 +37,61 @@
 	import { twMerge } from 'tailwind-merge'
 	import FlowPlugConnect from './FlowPlugConnect.svelte'
 	import { deepEqual } from 'fast-equals'
-	export let schema: Schema | { properties?: Record<string, any>; required?: string[] }
-	export let arg: InputTransform | any
-	export let argName: string
-	export let headerTooltip: string | undefined = undefined
-	export let headerTooltipIconClass = ''
-	export let HeaderTooltipIcon = InfoIcon
-	export let extraLib: string = 'missing extraLib'
-	export let inputCheck: boolean = true
-	export let previousModuleId: string | undefined
-	export let pickForField: string | undefined = undefined
-	export let variableEditor: VariableEditor | undefined = undefined
-	export let itemPicker: ItemPicker | undefined = undefined
-	export let noDynamicToggle = false
-	export let argExtra: Record<string, any> = {}
-	export let pickableProperties: PickableProperties | undefined = undefined
-	export let enableAi = false
-	export let hideHelpButton = false
 
-	let monaco: SimpleEditor | undefined = undefined
-	let monacoTemplate: TemplateEditor | undefined = undefined
-	let argInput: ArgInput | undefined = undefined
+	interface Props {
+		schema: Schema | { properties?: Record<string, any>; required?: string[] }
+		arg: InputTransform | any
+		argName: string
+		headerTooltip?: string | undefined
+		headerTooltipIconClass?: string
+		HeaderTooltipIcon?: any
+		extraLib?: string
+		inputCheck?: boolean
+		previousModuleId: string | undefined
+		pickForField?: string | undefined
+		variableEditor?: VariableEditor | undefined
+		itemPicker?: ItemPicker | undefined
+		noDynamicToggle?: boolean
+		argExtra?: Record<string, any>
+		pickableProperties?: PickableProperties | undefined
+		enableAi?: boolean
+		hideHelpButton?: boolean
+		class?: string
+		editor?: SimpleEditor | undefined
+	}
+
+	let {
+		schema = $bindable(),
+		arg = $bindable(),
+		argName = $bindable(),
+		headerTooltip = undefined,
+		headerTooltipIconClass = '',
+		HeaderTooltipIcon = InfoIcon,
+		extraLib = $bindable('missing extraLib'),
+		inputCheck = $bindable(true),
+		previousModuleId,
+		pickForField = $bindable(undefined),
+		variableEditor = undefined,
+		itemPicker = undefined,
+		noDynamicToggle = false,
+		argExtra = {},
+		pickableProperties = undefined,
+		enableAi = false,
+		hideHelpButton = false,
+		class: className = '',
+		editor = $bindable(undefined)
+	}: Props = $props()
+
+	let monaco: SimpleEditor | undefined = $state(undefined)
+	let monacoTemplate: TemplateEditor | undefined = $state(undefined)
+	let argInput: ArgInput | undefined = $state(undefined)
 	let focusedPrev = false
 
 	const dispatch = createEventDispatcher()
 
-	$: inputCat = computeInputCat(
-		schema?.properties?.[argName]?.type,
-		schema?.properties?.[argName]?.format,
-		schema?.properties?.[argName]?.items?.type,
-		schema?.properties?.[argName]?.enum,
-		schema?.properties?.[argName]?.contentEncoding
-	)
-
-	let propertyType = getPropertyType(arg)
+	$effect(() => {
+		editor = monaco
+	})
 
 	const { shouldUpdatePropertyType, exprsToSet } =
 		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
@@ -79,6 +100,18 @@
 		getContext<PropPickerWrapperContext>('PropPickerWrapper')
 	const { inputMatches, focusProp, propPickerConfig, clearFocus } = propPickerWrapperContext ?? {}
 
+	let inputCat = $derived(
+		computeInputCat(
+			schema?.properties?.[argName]?.type,
+			schema?.properties?.[argName]?.format,
+			schema?.properties?.[argName]?.items?.type,
+			schema?.properties?.[argName]?.enum,
+			schema?.properties?.[argName]?.contentEncoding
+		)
+	)
+
+	let propertyType = $state(getPropertyType(arg))
+
 	function setExpr() {
 		const newArg = $exprsToSet?.[argName]
 		if (newArg) {
@@ -98,8 +131,6 @@
 		})
 	}
 
-	$: $exprsToSet?.[argName] && setExpr()
-
 	function updatePropertyType() {
 		propertyType = $shouldUpdatePropertyType?.[argName] || 'static'
 		shouldUpdatePropertyType?.set({
@@ -108,10 +139,6 @@
 		})
 	}
 
-	$: $shouldUpdatePropertyType?.[argName] &&
-		arg?.type === $shouldUpdatePropertyType?.[argName] &&
-		updatePropertyType()
-
 	function getPropertyType(arg: InputTransform | any): 'static' | 'javascript' {
 		let type: 'static' | 'javascript' = arg?.type ?? 'static'
 
@@ -153,7 +180,7 @@
 		}
 	}
 
-	let codeInjectionDetected = false
+	let codeInjectionDetected = $state(false)
 
 	function checkCodeInjection(rawValue: string) {
 		if (!arg || !rawValue || rawValue.length < 3 || !dynamicTemplateRegexPairs) {
@@ -247,11 +274,10 @@
 	}
 
 	let prevArg: any = undefined
-	$: inputCat && propertyType && arg && onArgChange()
 	function onArgChange() {
 		const newArg = { arg, propertyType, inputCat }
 		if (!deepEqual(newArg, prevArg)) {
-			prevArg = structuredClone(newArg)
+			prevArg = structuredClone($state.snapshot(newArg))
 			updateStaticInput(inputCat, propertyType, arg)
 		}
 	}
@@ -285,23 +311,39 @@
 		}
 		focusedPrev = focused
 	}
-	$: updateFocused(focused)
 
-	$: schema?.properties?.[argName]?.default && setDefaultCode()
-
-	let resourceTypes: string[] | undefined = undefined
+	let resourceTypes: string[] | undefined = $state(undefined)
 
 	async function loadResourceTypes() {
 		resourceTypes = await getResourceTypes()
 	}
 
-	let focused = false
-	let stepInputGen: StepInputGen | undefined = undefined
+	let focused = $state(false)
+	let stepInputGen: StepInputGen | undefined = $state(undefined)
 
 	loadResourceTypes()
 
-	$: connecting =
+	$effect(() => {
+		$exprsToSet?.[argName] && untrack(() => setExpr())
+	})
+	$effect(() => {
+		$shouldUpdatePropertyType?.[argName] &&
+			arg?.type === $shouldUpdatePropertyType?.[argName] &&
+			untrack(() => updatePropertyType())
+	})
+	$effect(() => {
+		inputCat && propertyType && arg && untrack(() => onArgChange())
+	})
+	$effect(() => {
+		;[focused]
+		untrack(() => updateFocused(focused))
+	})
+	$effect(() => {
+		schema?.properties?.[argName]?.default && untrack(() => setDefaultCode())
+	})
+	let connecting = $derived(
 		$propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'
+	)
 </script>
 
 {#if arg != undefined}
@@ -311,7 +353,7 @@
 			$propPickerConfig?.propName == argName
 				? 'bg-surface border-l-4 border-blue-500 shadow-md rounded-l-md z-50 '
 				: 'hover:rounded-md',
-			$$props.class
+			className
 		)}
 	>
 		<div class="flex flex-row justify-between gap-1 pb-1 px-2">
@@ -375,7 +417,6 @@
 					<div>
 						<ToggleButtonGroup
 							selected={propertyType}
-							let:item
 							on:selected={(e) => {
 								if (e.detail == propertyType) return
 								const staticTemplate = isStaticTemplate(inputCat)
@@ -428,41 +469,43 @@
 								}
 							}}
 						>
-							{#if isStaticTemplate(inputCat)}
-								<ToggleButton
-									tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
-									light
-									value="static"
-									size="xs2"
-									label={'${}'}
-									{item}
-								/>
-							{:else}
-								<ToggleButton small label="Static" value="static" {item} />
-							{/if}
+							{#snippet children({ item })}
+								{#if isStaticTemplate(inputCat)}
+									<ToggleButton
+										tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
+										light
+										value="static"
+										size="xs2"
+										label={'${}'}
+										{item}
+									/>
+								{:else}
+									<ToggleButton small label="Static" value="static" {item} />
+								{/if}
 
-							{#if codeInjectionDetected && propertyType == 'static'}
-								<Button
-									size="xs2"
-									color="light"
-									btnClasses="font-normal text-xs w-fit bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-300 dark:bg-green-700 dark:hover:bg-green-600"
-									on:click={() => setJavaScriptExpr(arg.value)}
-								>
-									<span class="font-normal whitespace-nowrap flex gap-2 items-center"
-										><FunctionSquare size={14} /> detected -
-										<span class="font-bold">TAB</span>
-									</span>
-								</Button>
-							{:else}
-								<ToggleButton
-									small
-									light
-									tooltip="JavaScript expression ('flow_input' or 'results')."
-									value="javascript"
-									icon={FunctionSquare}
-									{item}
-								/>
-							{/if}
+								{#if codeInjectionDetected && propertyType == 'static'}
+									<Button
+										size="xs2"
+										color="light"
+										btnClasses="font-normal text-xs w-fit bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-300 dark:bg-green-700 dark:hover:bg-green-600"
+										on:click={() => setJavaScriptExpr(arg.value)}
+									>
+										<span class="font-normal whitespace-nowrap flex gap-2 items-center"
+											><FunctionSquare size={14} /> detected -
+											<span class="font-bold">TAB</span>
+										</span>
+									</Button>
+								{:else}
+									<ToggleButton
+										small
+										light
+										tooltip="JavaScript expression ('flow_input' or 'results')."
+										value="javascript"
+										icon={FunctionSquare}
+										{item}
+									/>
+								{/if}
+							{/snippet}
 						</ToggleButtonGroup>
 					</div>
 
@@ -491,8 +534,8 @@
 		</div>
 
 		<div class="max-w-xs"></div>
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class="relative" on:keyup={handleKeyUp}>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="relative" onkeyup={handleKeyUp}>
 			<!-- {#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
 				<span
 					class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
diff --git a/frontend/src/lib/components/InputTransformSchemaForm.svelte b/frontend/src/lib/components/InputTransformSchemaForm.svelte
index a3c05ce324..5abf5a669f 100644
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -3,7 +3,7 @@
 	import { VariableService, type InputTransform } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { allTrue } from '$lib/utils'
-	import { createEventDispatcher } from 'svelte'
+	import { untrack } from 'svelte'
 	import { Button } from './common'
 	import StepInputsGen from './copilot/StepInputsGen.svelte'
 	import type { PickableProperties } from './flows/previousResults'
@@ -12,31 +12,44 @@
 	import VariableEditor from './VariableEditor.svelte'
 	import { Plus } from 'lucide-svelte'
 
-	export let schema: Schema | { properties?: Record<string, any> }
-	export let args: Record<string, InputTransform | any> = {}
-
-	export let isValid: boolean = true
-	export let extraLib: string = 'missing extraLib'
-	export let previousModuleId: string | undefined = undefined
-
-	export let filter: string[] | undefined = undefined
-	export let noDynamicToggle = false
-	export let pickableProperties: PickableProperties | undefined = undefined
-	export let enableAi = false
-
-	let clazz: string = ''
-	export { clazz as class }
-
-	let inputCheck: { [id: string]: boolean } = {}
-
-	const dispatch = createEventDispatcher()
-
-	$: isValid = allTrue(inputCheck) ?? false
-
-	$: if (args == undefined || typeof args !== 'object') {
-		args = {}
+	interface Props {
+		schema: Schema | { properties?: Record<string, any> }
+		args?: Record<string, InputTransform | any>
+		isValid?: boolean
+		extraLib?: string
+		previousModuleId?: string | undefined
+		filter?: string[] | undefined
+		noDynamicToggle?: boolean
+		pickableProperties?: PickableProperties | undefined
+		enableAi?: boolean
+		class?: string
 	}
 
+	let {
+		schema = $bindable(),
+		args = $bindable({}),
+		isValid = $bindable(true),
+		extraLib = $bindable('missing extraLib'),
+		previousModuleId = undefined,
+		filter = undefined,
+		noDynamicToggle = false,
+		pickableProperties = undefined,
+		enableAi = false,
+		class: clazz = ''
+	}: Props = $props()
+
+	let inputCheck: { [id: string]: boolean } = $state({})
+
+	$effect(() => {
+		isValid = allTrue(inputCheck) ?? false
+	})
+
+	$effect(() => {
+		if (args == undefined || typeof args !== 'object') {
+			args = {}
+		}
+	})
+
 	export function setArgs(nargs: Record<string, InputTransform | any>) {
 		args = nargs
 	}
@@ -51,18 +64,18 @@
 		args = nargs
 	}
 
-	let pickForField: string | undefined
-	let itemPicker: ItemPicker | undefined = undefined
-	let variableEditor: VariableEditor | undefined = undefined
+	let pickForField: string | undefined = $state()
+	let itemPicker: ItemPicker | undefined = $state(undefined)
+	let variableEditor: VariableEditor | undefined = $state(undefined)
 
-	let keys: string[] = []
-	$: {
+	let keys: string[] = $state([])
+	$effect(() => {
 		let lkeys = Object.keys(schema?.properties ?? {})
 		if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
 			keys = lkeys
-			removeExtraKey()
+			untrack(() => removeExtraKey())
 		}
-	}
+	})
 </script>
 
 <div class="w-full {clazz}">
@@ -84,15 +97,17 @@
 		</div>
 	{/if}
 	{#if keys.length > 0}
-		{#each keys as argName (argName)}
+		{#each keys as argName, index (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
 				<div class="pt-2 relative">
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
 						bind:schema
-						bind:argName
-						bind:inputCheck={inputCheck[argName]}
+						bind:argName={keys[index]}
+						bind:inputCheck={
+							() => inputCheck[argName] ?? false, (value) => (inputCheck[argName] = value)
+						}
 						bind:extraLib
 						{variableEditor}
 						{itemPicker}
@@ -100,10 +115,6 @@
 						{noDynamicToggle}
 						{pickableProperties}
 						{enableAi}
-						on:change={(e) => {
-							const { argName } = e.detail
-							dispatch('changeArg', { argName })
-						}}
 					/>
 				</div>
 			{/if}
@@ -128,22 +139,21 @@
 			...x
 		}))}
 >
-	<div
-		slot="submission"
-		class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg"
-	>
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			startIcon={{ icon: Plus }}
-			on:click={() => {
-				variableEditor?.initNew?.()
-			}}
-		>
-			New variable
-		</Button>
-	</div>
+	{#snippet submission()}
+		<div class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg">
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				startIcon={{ icon: Plus }}
+				on:click={() => {
+					variableEditor?.initNew?.()
+				}}
+			>
+				New variable
+			</Button>
+		</div>
+	{/snippet}
 </ItemPicker>
 
 <VariableEditor bind:this={variableEditor} />
diff --git a/frontend/src/lib/components/InstanceSetting.svelte b/frontend/src/lib/components/InstanceSetting.svelte
index 6e75df9270..58bdee82c3 100644
--- a/frontend/src/lib/components/InstanceSetting.svelte
+++ b/frontend/src/lib/components/InstanceSetting.svelte
@@ -41,10 +41,14 @@
 	import TeamSelector from './TeamSelector.svelte'
 	import ChannelSelector from './ChannelSelector.svelte'
 
-	export let setting: Setting
-	export let version: string
-	export let values: Writable<Record<string, any>>
-	export let loading = true
+	interface Props {
+		setting: Setting
+		version: string
+		values: Writable<Record<string, any>>
+		loading?: boolean
+	}
+
+	let { setting, version, values, loading = true }: Props = $props()
 	const dispatch = createEventDispatcher()
 
 	if (
@@ -57,9 +61,9 @@
 	let latestKeyRenewalAttempt: {
 		result: string
 		attempted_at: string
-	} | null
+	} | null = $state(null)
 
-	let isFetching = false
+	let isFetching = $state(false)
 
 	function showSetting(setting: string, values: Record<string, any>) {
 		if (setting == 'dev_instance') {
@@ -70,11 +74,11 @@
 		return true
 	}
 
-	let licenseKeyChanged = false
-	let renewing = false
-	let opening = false
+	let licenseKeyChanged = $state(false)
+	let renewing = $state(false)
+	let opening = $state(false)
 
-	let to: string = ''
+	let to: string = $state('')
 
 	async function reloadKeyrenewalAttemptInfo() {
 		latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt()
@@ -135,9 +139,9 @@
 		}
 	}
 
-	let pythonAvailableVersions: ListAvailablePythonVersionsResponse = []
+	let pythonAvailableVersions: ListAvailablePythonVersionsResponse = $state([])
 
-	let isPyFetching = false
+	let isPyFetching = $state(false)
 	async function fetch_available_python_versions() {
 		if (isPyFetching) return
 		isPyFetching = true
@@ -165,8 +169,12 @@
 		}
 	}
 
-	function handleTeamChange(teamItem: { team_id: string; team_name: string }, i: number) {
-		const team = $values['teams'].find((team) => team.team_id === teamItem.team_id) || null
+	function handleTeamChange(
+		teamItem: { team_id: string; team_name: string } | undefined,
+		i: number
+	) {
+		const team =
+			(teamItem && $values['teams'].find((team) => team.team_id === teamItem.team_id)) || null
 		$values['critical_error_channels'][i] = {
 			teams_channel: {
 				team_id: team?.team_id,
@@ -177,7 +185,10 @@
 		}
 	}
 
-	function handleChannelChange(channel: { channel_id: string; channel_name: string }, i: number) {
+	function handleChannelChange(
+		channel: { channel_id: string; channel_name: string } | undefined,
+		i: number
+	) {
 		const team = $values['critical_error_channels'][i]?.teams_channel
 		if (team) {
 			$values['critical_error_channels'][i] = {
@@ -193,7 +204,7 @@
 </script>
 
 <!-- {JSON.stringify($values, null, 2)} -->
-{#if (!setting.cloudonly || isCloudHosted()) && showSetting(setting.key, $values) && !(setting.hiddenIfNull && $values[setting.key] == null)}
+{#if (!setting.cloudonly || isCloudHosted()) && showSetting(setting.key, $values) && !(setting.hiddenIfNull && $values[setting.key] == null) && !(setting.hiddenIfEmpty && !$values[setting.key])}
 	{#if setting.ee_only != undefined && !$enterpriseLicense}
 		<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap">
 			<AlertTriangle size={16} />
@@ -202,7 +213,7 @@
 	{/if}
 	{#if setting.fieldType == 'select'}
 		<div>
-			<!-- svelte-ignore a11y-label-has-associated-control -->
+			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">{setting.label}</span>
 				{#if setting.description}
@@ -211,20 +222,22 @@
 					</span>
 				{/if}
 			</label>
-			<ToggleButtonGroup bind:selected={$values[setting.key]} let:item={toggleButton}>
-				{#each setting.select_items ?? [] as item}
-					<ToggleButton
-						value={item.value ?? item.label}
-						label={item.label}
-						tooltip={item.tooltip}
-						item={toggleButton}
-					/>
-				{/each}
+			<ToggleButtonGroup bind:selected={$values[setting.key]}>
+				{#snippet children({ item: toggleButton })}
+					{#each setting.select_items ?? [] as item}
+						<ToggleButton
+							value={item.value ?? item.label}
+							label={item.label}
+							tooltip={item.tooltip}
+							item={toggleButton}
+						/>
+					{/each}
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{:else if setting.fieldType == 'select_python'}
 		<div>
-			<!-- svelte-ignore a11y-label-has-associated-control -->
+			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">{setting.label}</span>
 				{#if setting.description}
@@ -234,56 +247,59 @@
 				{/if}
 			</label>
 
-			<ToggleButtonGroup bind:selected={$values[setting.key]} let:item={toggleButtonn}>
-				{#each setting.select_items ?? [] as item}
-					<ToggleButton
-						value={item.value ?? item.label}
-						label={item.label}
-						tooltip={item.tooltip}
-						item={toggleButtonn}
-					/>
-				{/each}
-				<PopoverMelt closeButton={!isPyFetching}>
-					<svelte:fragment slot="trigger">
-						{#if setting.select_items?.some((e) => e.label == $values[setting.key] || e.value == $values[setting.key])}
-							<Button
-								variant="border"
-								color="dark"
-								btnClasses="px-1.5 py-1.5 text-2xs bg-surface-secondary border-0"
-								nonCaptureEvent={true}>Select Custom</Button
-							>
-						{:else}
-							<Button
-								variant="border"
-								color="dark"
-								btnClasses="px-1.5 py-1.5 text-2xs border-0 shadow-md"
-								nonCaptureEvent={true}>Custom | {$values[setting.key]}</Button
-							>
-						{/if}
-					</svelte:fragment>
-					<svelte:fragment slot="content">
-						{#if isPyFetching}
-							<div class="p-4">
-								<LoadingIcon />
-							</div>
-						{:else}
-							<ToggleButtonGroup
-								bind:selected={$values[setting.key]}
-								let:item={toggleButtonn}
-								class="mr-10 h-full"
-								tabListClass="flex-wrap p-2"
-							>
-								{#each pythonAvailableVersions as item}
-									<ToggleButton value={item} label={item} tooltip={item} item={toggleButtonn} />
-								{/each}
-							</ToggleButtonGroup>
-						{/if}
-					</svelte:fragment>
-				</PopoverMelt>
+			<ToggleButtonGroup bind:selected={$values[setting.key]}>
+				{#snippet children({ item: toggleButtonn })}
+					{#each setting.select_items ?? [] as item}
+						<ToggleButton
+							value={item.value ?? item.label}
+							label={item.label}
+							tooltip={item.tooltip}
+							item={toggleButtonn}
+						/>
+					{/each}
+					<PopoverMelt closeButton={!isPyFetching}>
+						{#snippet trigger()}
+							{#if setting.select_items?.some((e) => e.label == $values[setting.key] || e.value == $values[setting.key])}
+								<Button
+									variant="border"
+									color="dark"
+									btnClasses="px-1.5 py-1.5 text-2xs bg-surface-secondary border-0"
+									nonCaptureEvent={true}>Select Custom</Button
+								>
+							{:else}
+								<Button
+									variant="border"
+									color="dark"
+									btnClasses="px-1.5 py-1.5 text-2xs border-0 shadow-md"
+									nonCaptureEvent={true}>Custom | {$values[setting.key]}</Button
+								>
+							{/if}
+						{/snippet}
+						{#snippet content()}
+							{#if isPyFetching}
+								<div class="p-4">
+									<LoadingIcon />
+								</div>
+							{:else}
+								<ToggleButtonGroup
+									bind:selected={$values[setting.key]}
+									class="mr-10 h-full"
+									tabListClass="flex-wrap p-2"
+								>
+									{#snippet children({ item: toggleButtonn })}
+										{#each pythonAvailableVersions as item}
+											<ToggleButton value={item} label={item} tooltip={item} item={toggleButtonn} />
+										{/each}
+									{/snippet}
+								</ToggleButtonGroup>
+							{/if}
+						{/snippet}
+					</PopoverMelt>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{:else}
-		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<!-- svelte-ignore a11y_label_has_associated_control -->
 		<label class="block pb-2">
 			<span class="text-primary font-semibold text-sm">{setting.label}</span>
 			{#if setting.description}
@@ -432,27 +448,29 @@
 											on {attemptedAt}
 										</span>
 									</div>
-									<div slot="text">
-										{#if latestKeyRenewalAttempt.result === 'success'}
-											<span class="text-green-300">
-												Latest key renewal succeeded on {attemptedAt}
-											</span>
-										{:else if isTrial}
-											<span class="text-yellow-300">
-												License key cannot be renewed during trial ({attemptedAt})
-											</span>
-										{:else}
-											<span class="text-red-300">
-												Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt.result.replace(
-													'error: ',
-													''
-												)}
-											</span>
-										{/if}
-										<br />
-										As long as invoices are paid and usage corresponds to the subscription, the key is
-										renewed daily with a validity of 35 days (grace period).
-									</div>
+									{#snippet text()}
+										<div>
+											{#if latestKeyRenewalAttempt?.result === 'success'}
+												<span class="text-green-300">
+													Latest key renewal succeeded on {attemptedAt}
+												</span>
+											{:else if isTrial}
+												<span class="text-yellow-300">
+													License key cannot be renewed during trial ({attemptedAt})
+												</span>
+											{:else}
+												<span class="text-red-300">
+													Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt?.result.replace(
+														'error: ',
+														''
+													)}
+												</span>
+											{/if}
+											<br />
+											As long as invoices are paid and usage corresponds to the subscription, the key
+											is renewed daily with a validity of 35 days (grace period).
+										</div>
+									{/snippet}
 								</Popover>
 							</div>
 						{/if}
@@ -508,7 +526,7 @@
 									<div class="flex w-full max-w-lg mt-1 gap-2 items-center">
 										<select
 											class="max-w-24"
-											on:change={(e) => {
+											onchange={(e) => {
 												if (e.target?.['value']) {
 													$values[setting.key][i] = {
 														[e.target['value']]: ''
@@ -533,7 +551,7 @@
 											<input
 												type="text"
 												placeholder="Slack channel"
-												on:input={(e) => {
+												oninput={(e) => {
 													if (e.target?.['value']) {
 														$values[setting.key][i] = {
 															slack_channel: e.target['value']
@@ -550,15 +568,19 @@
 													showRefreshButton={false}
 													placeholder="Select team"
 													teams={$values['teams']}
-													on:change={(e) => handleTeamChange(e.detail, i)}
-													selectedTeam={$values['critical_error_channels'][i]?.teams_channel
-														? {
-																team_id:
-																	$values['critical_error_channels'][i]?.teams_channel?.team_id,
-																team_name:
-																	$values['critical_error_channels'][i]?.teams_channel?.team_name
-															}
-														: undefined}
+													bind:selectedTeam={
+														() =>
+															$values['critical_error_channels'][i]?.teams_channel
+																? {
+																		team_id:
+																			$values['critical_error_channels'][i]?.teams_channel?.team_id,
+																		team_name:
+																			$values['critical_error_channels'][i]?.teams_channel
+																				?.team_name
+																	}
+																: undefined,
+														(team) => handleTeamChange(team, i)
+													}
 												/>
 
 												{#if $values['critical_error_channels'][i]?.teams_channel?.team_id}
@@ -570,22 +592,24 @@
 																team.team_id ===
 																$values['critical_error_channels'][i]?.teams_channel?.team_id
 														)?.channels ?? []}
-														on:change={(e) => handleChannelChange(e.detail, i)}
-														selectedChannel={$values['critical_error_channels'][i]?.teams_channel
-															?.channel_id
-															? {
-																	channel_id:
-																		$values['critical_error_channels'][i]?.teams_channel
-																			?.channel_id,
-																	channel_name:
-																		$values['critical_error_channels'][i]?.teams_channel
-																			?.channel_name
-																}
-															: undefined}
+														bind:selectedChannel={
+															() =>
+																$values['critical_error_channels'][i]?.teams_channel?.channel_id
+																	? {
+																			channel_id:
+																				$values['critical_error_channels'][i]?.teams_channel
+																					?.channel_id,
+																			channel_name:
+																				$values['critical_error_channels'][i]?.teams_channel
+																					?.channel_name
+																		}
+																	: undefined,
+															(channel) => handleChannelChange(channel, i)
+														}
 													/>
 												{/if}
 												<div>
-													<button on:click={fetchTeams} class="flex items-center gap-1 mt-2">
+													<button onclick={fetchTeams} class="flex items-center gap-1 mt-2">
 														<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
 													</button>
 												</div>
@@ -594,7 +618,7 @@
 											<input
 												type="email"
 												placeholder="Email address"
-												on:input={(e) => {
+												oninput={(e) => {
 													if (e.target?.['value']) {
 														$values[setting.key][i] = {
 															email: e.target['value']
@@ -608,7 +632,7 @@
 											transition:fade|local={{ duration: 100 }}
 											class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
 											aria-label="Clear"
-											on:click={() => {
+											onclick={() => {
 												$values[setting.key] = $values[setting.key].filter(
 													(_, index) => index !== i
 												)
@@ -705,7 +729,7 @@
 									type="number"
 									id="writer_memory_budget"
 									placeholder="300"
-									on:input={(e) => {
+									oninput={(e) => {
 										if (e.target instanceof HTMLInputElement) {
 											if (e.target.valueAsNumber) {
 												$values[setting.key].writer_memory_budget =
@@ -763,7 +787,7 @@
 									type="number"
 									id="max_indexed_job_log_size"
 									placeholder="1024"
-									on:input={(e) => {
+									oninput={(e) => {
 										if (e.target instanceof HTMLInputElement) {
 											if (e.target.valueAsNumber) {
 												$values[setting.key].max_indexed_job_log_size =
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index 78e28f02bb..7e14651945 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -16,20 +16,29 @@
 	import InstanceSetting from './InstanceSetting.svelte'
 	import { writable, type Writable } from 'svelte/store'
 
-	export let tab: string = 'Core'
-	export let hideTabs: boolean = false
-	export let hideSave: boolean = false
-	export let closeDrawer: (() => void) | undefined = () => {}
+	interface Props {
+		tab?: string
+		hideTabs?: boolean
+		hideSave?: boolean
+		closeDrawer?: (() => void) | undefined
+	}
+
+	let {
+		tab = $bindable('Core'),
+		hideTabs = false,
+		hideSave = false,
+		closeDrawer = () => {}
+	}: Props = $props()
 
 	let values: Writable<Record<string, any>> = writable({})
 	let initialOauths: Record<string, any> = {}
 	let initialRequirePreexistingUserForOauth: boolean = false
-	let requirePreexistingUserForOauth: boolean = false
+	let requirePreexistingUserForOauth: boolean = $state(false)
 
 	let initialValues: Record<string, any> = {}
-	let snowflakeAccountIdentifier = ''
-	let version: string = ''
-	let loading = true
+	let snowflakeAccountIdentifier = $state('')
+	let version: string = $state('')
+	let loading = $state(true)
 
 	loadSettings()
 	loadVersion()
@@ -39,7 +48,7 @@
 	async function loadVersion() {
 		version = await SettingsService.backendVersion()
 	}
-	let oauths: Record<string, any> = {}
+	let oauths: Record<string, any> = $state({})
 
 	async function loadSettings() {
 		loading = true
@@ -240,13 +249,13 @@
 </script>
 
 <div class="pb-8">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<Tabs {hideTabs} bind:selected={tab}>
 		{#each settingsKeys as category}
 			<Tab value={category}>{category}</Tab>
 		{/each}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			{#each Object.keys(settings) as category}
 				<TabContent value={category}>
 					{#if category == 'SMTP'}
@@ -332,7 +341,7 @@
 							bind:snowflakeAccountIdentifier
 							bind:requirePreexistingUserForOauth
 						>
-							<svelte:fragment slot="scim">
+							{#snippet scim()}
 								<div class="flex-col flex gap-2 pb-4">
 									{#each scimSamlSetting as setting}
 										<InstanceSetting
@@ -344,7 +353,7 @@
 										/>
 									{/each}
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</AuthSettings>
 					{/if}
 					<div>
@@ -362,7 +371,7 @@
 					</div>
 				</TabContent>
 			{/each}
-		</svelte:fragment>
+		{/snippet}
 	</Tabs>
 </div>
 
diff --git a/frontend/src/lib/components/InviteUser.svelte b/frontend/src/lib/components/InviteUser.svelte
index 1655ca444d..1d634fefd1 100644
--- a/frontend/src/lib/components/InviteUser.svelte
+++ b/frontend/src/lib/components/InviteUser.svelte
@@ -13,7 +13,7 @@
 
 	const dispatch = createEventDispatcher()
 
-	let email: string
+	let email: string = $state('')
 
 	function handleKeyUp(event: KeyboardEvent) {
 		const key = event.key
@@ -52,7 +52,7 @@
 										goto('#superadmin-settings')
 									}
 								}
-						  ]
+							]
 						: []
 				)
 			}
@@ -62,45 +62,47 @@
 		email = ''
 	}
 
-	let selected: 'operator' | 'developer' | 'admin' = 'developer'
+	let selected: 'operator' | 'developer' | 'admin' = $state('developer')
 </script>
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: MailPlus }}>
 			Invite
 		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		<div class="flex flex-col gap-2 p-4">
 			<input
 				type="email"
-				on:keyup={handleKeyUp}
+				onkeyup={handleKeyUp}
 				placeholder="email"
 				bind:value={email}
 				class="mr-4"
 			/>
-			<ToggleButtonGroup bind:selected let:item>
-				<ToggleButton
-					value="operator"
-					label="Operator"
-					tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-					{item}
-				/>
+			<ToggleButtonGroup bind:selected>
+				{#snippet children({ item })}
+					<ToggleButton
+						value="operator"
+						label="Operator"
+						tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+						{item}
+					/>
 
-				<ToggleButton
-					value="developer"
-					label="Developer"
-					tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-					{item}
-				/>
+					<ToggleButton
+						value="developer"
+						label="Developer"
+						tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+						{item}
+					/>
 
-				<ToggleButton
-					value="admin"
-					label="Admin"
-					tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-					{item}
-				/>
+					<ToggleButton
+						value="admin"
+						label="Admin"
+						tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 			<Button
 				variant="contained"
@@ -112,5 +114,5 @@
 				Invite
 			</Button>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
index 2fef390ffd..93b00b3070 100644
--- a/frontend/src/lib/components/ItemPicker.svelte
+++ b/frontend/src/lib/components/ItemPicker.svelte
@@ -7,23 +7,41 @@
 	import SearchItems from './SearchItems.svelte'
 
 	type Item = Record<string, any>
-	export let pickCallback: (path: string, f: string) => void
-	export let loadItems: () => Promise<Item[] | undefined>
-	export let extraField: string = 'path'
-	export let extraField2: string | undefined = undefined
-	export let itemName: string
-	export let closeOnClick = true
-	/** Displayed if the load function returns no items. */
-	export let noItemMessage = 'There are no items in the list'
-	/** Displayed if the search returns no items. */
-	export let buttons: Record<string, (x: string) => void> = {}
-	export let tooltip: string = ''
-	export let documentationLink: string | undefined = undefined
 
-	let loading = false
-	let items: Item[] | undefined = []
-	let filteredItems: Item[] | undefined = []
-	let filter = ''
+	interface Props {
+		pickCallback: (path: string, f: string) => void
+		loadItems: () => Promise<Item[] | undefined>
+		extraField?: string
+		extraField2?: string | undefined
+		itemName: string
+		closeOnClick?: boolean
+		/** Displayed if the load function returns no items. */
+		noItemMessage?: string
+		/** Displayed if the search returns no items. */
+		buttons?: Record<string, (x: string) => void>
+		tooltip?: string
+		documentationLink?: string | undefined
+		submission?: import('svelte').Snippet
+	}
+
+	let {
+		pickCallback,
+		loadItems,
+		extraField = 'path',
+		extraField2 = undefined,
+		itemName,
+		closeOnClick = true,
+		noItemMessage = 'There are no items in the list',
+		buttons = {},
+		tooltip = '',
+		documentationLink = undefined,
+		submission
+	}: Props = $props()
+
+	let loading = $state(false)
+	let items: Item[] | undefined = $state([])
+	let filteredItems: Item[] | undefined = $state([])
+	let filter = $state('')
 
 	export function openDrawer() {
 		loading = true
@@ -34,12 +52,12 @@
 			.finally(() => {
 				loading = false
 			})
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 	}
 
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
 
-	let refreshing = false
+	let refreshing = $state(false)
 </script>
 
 <SearchItems
@@ -65,7 +83,7 @@
 	>
 		<div class="w-full h-full flex flex-col">
 			<div class="flex flex-row gap-2 pb-4">
-				<!-- svelte-ignore a11y-autofocus -->
+				<!-- svelte-ignore a11y_autofocus -->
 				<input
 					type="text"
 					placeholder="Search {itemName}s"
@@ -110,9 +128,9 @@
 								<button
 									class="py-2 px-1 gap-1 flex grow border-gray-300 border-opacity-0
 									 text-primary"
-									on:click={() => {
+									onclick={() => {
 										if (closeOnClick) {
-											drawer.closeDrawer()
+											drawer?.closeDrawer()
 										}
 										pickCallback(obj['path'], obj[extraField])
 									}}
@@ -174,8 +192,8 @@
 				<NoItemFound />
 			{/if}
 		</div>
-		<svelte:fragment slot="actions">
-			<slot name="submission" />
-		</svelte:fragment>
+		{#snippet actions()}
+			{@render submission?.()}
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/JobArgs.svelte b/frontend/src/lib/components/JobArgs.svelte
index 69c87e4cae..52603575a7 100644
--- a/frontend/src/lib/components/JobArgs.svelte
+++ b/frontend/src/lib/components/JobArgs.svelte
@@ -109,7 +109,7 @@ ${Object.entries(args)
 
 <Drawer bind:this={jsonViewer} size="900px">
 	<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				download="windmill-args.json"
 				href={id && workspace
@@ -137,7 +137,7 @@ ${Object.entries(args)
 			>
 				Copy to clipboard
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 		{#if jsonStr.length > 100000 || (id && workspace && args && isWindmillTooBigObject(args))}
 			<div class="text-sm mb-2 text-tertiary">
 				<a
diff --git a/frontend/src/lib/components/JsonEditor.svelte b/frontend/src/lib/components/JsonEditor.svelte
index 24b41f9e55..800cfb0224 100644
--- a/frontend/src/lib/components/JsonEditor.svelte
+++ b/frontend/src/lib/components/JsonEditor.svelte
@@ -4,6 +4,7 @@
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+
 	export let code: string | undefined
 	export let value: any = undefined
 	export let error = ''
diff --git a/frontend/src/lib/components/LightweightResourcePicker.svelte b/frontend/src/lib/components/LightweightResourcePicker.svelte
index 8f8e77c158..50da38607b 100644
--- a/frontend/src/lib/components/LightweightResourcePicker.svelte
+++ b/frontend/src/lib/components/LightweightResourcePicker.svelte
@@ -2,15 +2,13 @@
 	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { createEventDispatcher, getContext } from 'svelte'
-	import Select from './apps/svelte-select/lib/index'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
-
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import { Button, Drawer, DrawerContent } from './common'
 	import { Plus, Loader2, Link2Off } from 'lucide-svelte'
 	import type { AppViewerContext } from './apps/types'
 	import { sendUserToast } from '$lib/toast'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+	import Select from './Select.svelte'
 
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
@@ -34,7 +32,7 @@
 				}
 			: undefined
 
-	let collection = [valueSelect]
+	let collection = valueSelect ? [valueSelect] : []
 
 	let loading = true
 	async function loadResources(resourceType: string | undefined) {
@@ -167,23 +165,22 @@
 		{:else}
 			<Select
 				{disabled}
-				portal={!disablePortal}
-				value={valueSelect}
-				on:change={(e) => {
-					value = e.detail.value
-					valueSelect = e.detail
-				}}
-				on:clear={() => {
+				{disablePortal}
+				bind:value={
+					() => valueSelect?.value,
+					(v) => {
+						value = v
+						valueSelect = collection.find((x) => x.value === v)
+					}
+				}
+				onClear={() => {
 					value = undefined
 					valueSelect = undefined
 				}}
+				clearable
 				items={collection}
 				class="text-clip grow min-w-0"
 				placeholder="{resourceType ?? 'any'} resource"
-				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={darkMode
-					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-					: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 			/>
 		{/if}
 		<div class="flex gap-1 items-center">
diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index b03d32828f..3adb477817 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -149,7 +149,7 @@
 
 <Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			{#if jobId && download}
 				<Button
 					href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
@@ -174,7 +174,7 @@
 			>
 				Copy to clipboard
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 		<div>
 			<pre
 				class="bg-surface-secondary text-secondary text-xs w-full p-2 whitespace-pre-wrap border rounded-md"
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index f5b8fb734d..ffa1530fcf 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import type { Schema } from '$lib/common'
 	import { ScriptService, type FlowModule, type Job } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -16,31 +18,47 @@
 	import { evalValue } from './flows/utils'
 	import type { PickableProperties } from './flows/previousResults'
 
-	export let mod: FlowModule
-	export let schema: Schema | { properties?: Record<string, any> }
-	export let pickableProperties: PickableProperties | undefined
-	export let testJob: Job | undefined = undefined
-	export let testIsLoading = false
-	export let noEditor = false
-	export let scriptProgress = undefined
+	interface Props {
+		mod: FlowModule
+		schema: Schema | { properties?: Record<string, any> }
+		pickableProperties: PickableProperties | undefined
+		testJob?: Job | undefined
+		testIsLoading?: boolean
+		noEditor?: boolean
+		scriptProgress?: any
+	}
+
+	let {
+		mod,
+		schema,
+		pickableProperties,
+		testJob = $bindable(undefined),
+		testIsLoading = $bindable(false),
+		noEditor = false,
+		scriptProgress = $bindable(undefined)
+	}: Props = $props()
 
 	const { flowStore, flowStateStore, testStepStore, pathStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
 	// Test
 
-	let testJobLoader: TestJobLoader
+	let testJobLoader: TestJobLoader | undefined = $state()
 
 	let jobProgressReset: () => void = () => {}
 
-	let stepArgs: Record<string, any> | undefined = Object.fromEntries(
-		Object.keys(schema.properties ?? {}).map((k) => [
-			k,
-			evalValue(k, mod, $testStepStore, pickableProperties, false)
-		])
+	let stepArgs: Record<string, any> | undefined = $state(
+		Object.fromEntries(
+			Object.keys(schema.properties ?? {}).map((k) => [
+				k,
+				evalValue(k, mod, $testStepStore, pickableProperties, false)
+			])
+		)
 	)
 
-	$: $testStepStore[mod.id] = stepArgs
+	run(() => {
+		$testStepStore[mod.id] = stepArgs
+	})
 
 	export function runTestWithStepArgs() {
 		runTest(stepArgs)
@@ -58,7 +76,7 @@
 				val.content,
 				val.language,
 				mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args,
-				$flowStore?.tag ?? val.tag
+				flowStore.val?.tag ?? val.tag
 			)
 		} else if (val.type == 'script') {
 			const script = val.hash
@@ -69,7 +87,7 @@
 				script.content,
 				script.language,
 				mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args,
-				$flowStore?.tag ?? (val.tag_override ? val.tag_override : script.tag),
+				flowStore.val?.tag ?? (val.tag_override ? val.tag_override : script.tag),
 				script.lock,
 				val.hash ?? script.hash
 			)
@@ -104,7 +122,7 @@
 />
 
 <div class="p-4">
-	{#if $flowStore.value.same_worker}
+	{#if flowStore.val.value.same_worker}
 		<div class="mb-1 bg-yellow-100 text-yellow-700 p-1 text-xs"
 			>The `./shared` folder is not passed across individual "Test this step"</div
 		>
diff --git a/frontend/src/lib/components/ModulePreviewForm.svelte b/frontend/src/lib/components/ModulePreviewForm.svelte
index ba5ac68476..1825d82252 100644
--- a/frontend/src/lib/components/ModulePreviewForm.svelte
+++ b/frontend/src/lib/components/ModulePreviewForm.svelte
@@ -5,7 +5,7 @@
 	import { RefreshCw } from 'lucide-svelte'
 	import ArgInput from './ArgInput.svelte'
 	import { Button } from './common'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { FlowEditorContext } from './flows/types'
 	import { evalValue } from './flows/utils'
 	import type { FlowModule } from '$lib/gen'
@@ -13,22 +13,36 @@
 	import type SimpleEditor from './SimpleEditor.svelte'
 	import { getResourceTypes } from './resourceTypesStore'
 
-	export let schema: Schema | { properties?: Record<string, any>; required?: string[] }
-	export let args: Record<string, any> = {}
-	export let mod: FlowModule
-	export let pickableProperties: PickableProperties | undefined
+	interface Props {
+		schema: Schema | { properties?: Record<string, any>; required?: string[] }
+		args?: Record<string, any>
+		mod: FlowModule
+		pickableProperties: PickableProperties | undefined
+		isValid?: boolean
+		autofocus?: boolean
+	}
 
-	export let isValid: boolean = true
-	export let autofocus = false
+	let {
+		schema,
+		args = $bindable({}),
+		mod,
+		pickableProperties,
+		isValid = $bindable(true),
+		autofocus = false
+	}: Props = $props()
 
 	const { testStepStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
-	let inputCheck: { [id: string]: boolean } = {}
-	$: isValid = allTrue(inputCheck) ?? false
+	let inputCheck: { [id: string]: boolean } = $state({})
+	$effect(() => {
+		isValid = allTrue(inputCheck) ?? false
+	})
 
-	$: if (args == undefined || typeof args !== 'object') {
-		args = {}
-	}
+	$effect(() => {
+		if (args == undefined || typeof args !== 'object') {
+			args = {}
+		}
+	})
 
 	function removeExtraKey() {
 		const nargs = {}
@@ -40,18 +54,18 @@
 		args = nargs
 	}
 
-	let keys: string[] = []
-	$: {
+	let keys: string[] = $state([])
+	$effect(() => {
 		let lkeys = Object.keys(schema?.properties ?? {})
 		if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
 			keys = lkeys
-			removeExtraKey()
+			untrack(() => removeExtraKey())
 		}
-	}
+	})
 
 	function plugIt(argName: string) {
 		args[argName] = structuredClone(
-			evalValue(argName, mod, testStepStore, pickableProperties, true)
+			$state.snapshot(evalValue(argName, mod, testStepStore, pickableProperties, true))
 		)
 		try {
 			editor?.[argName]?.setCode(JSON.stringify(args[argName], null, 4))
@@ -60,9 +74,9 @@
 		}
 	}
 
-	let editor: Record<string, SimpleEditor | undefined> = {}
+	let editor: Record<string, SimpleEditor | undefined> = $state({})
 
-	let resourceTypes: string[] | undefined = undefined
+	let resourceTypes: string[] | undefined = $state(undefined)
 
 	async function loadResourceTypes() {
 		resourceTypes = await getResourceTypes()
diff --git a/frontend/src/lib/components/ModulePreviewResultViewer.svelte b/frontend/src/lib/components/ModulePreviewResultViewer.svelte
index 67e084fdee..ae9556c177 100644
--- a/frontend/src/lib/components/ModulePreviewResultViewer.svelte
+++ b/frontend/src/lib/components/ModulePreviewResultViewer.svelte
@@ -9,33 +9,56 @@
 	import { Pane, Splitpanes } from '$lib/components/splitPanes'
 	import type { FlowEditorContext } from './flows/types'
 	import { getContext } from 'svelte'
+	import { getStringError } from './copilot/chat/utils'
 
-	export let lang: Script['language']
-	export let editor: Editor | undefined
-	export let diffEditor: DiffEditor | undefined
-	export let loopStatus:
-		| { type: 'inside' | 'self'; flow: 'forloopflow' | 'whileloopflow' }
-		| undefined = undefined
-	export let lastJob: Job | undefined = undefined
-	export let scriptProgress: number | undefined = undefined
-	export let testJob: Job | undefined = undefined
-	export let mod: FlowModule
-	export let testIsLoading: boolean = false
-	export let disableMock: boolean = false
-	export let disableHistory: boolean = false
+	interface Props {
+		lang: Script['language']
+		editor: Editor | undefined
+		diffEditor: DiffEditor | undefined
+		loopStatus?: { type: 'inside' | 'self'; flow: 'forloopflow' | 'whileloopflow' } | undefined
+		lastJob?: Job | undefined
+		scriptProgress?: number | undefined
+		testJob?: Job | undefined
+		mod: FlowModule
+		testIsLoading?: boolean
+		disableMock?: boolean
+		disableHistory?: boolean
+		onUpdateMock?: (mock: { enabled: boolean; return_value?: unknown }) => void
+	}
 
-	const { flowStore, testStepStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	let {
+		lang,
+		editor,
+		diffEditor,
+		loopStatus = undefined,
+		lastJob = undefined,
+		scriptProgress = $bindable(undefined),
+		testJob = undefined,
+		mod,
+		testIsLoading = false,
+		disableMock = false,
+		disableHistory = false,
+		onUpdateMock
+	}: Props = $props()
 
-	let selectedJob: Job | undefined = undefined
+	const { testStepStore } = getContext<FlowEditorContext>('FlowEditorContext')
+
+	let selectedJob: Job | undefined = $state(undefined)
 	let fetchingLastJob = false
-	let preview: 'mock' | 'job' | undefined = undefined
-	let outputPicker: OutputPickerInner | undefined = undefined
-	let jobProgressReset: () => void = () => {}
+	let preview: 'mock' | 'job' | undefined = $state(undefined)
+	let jobProgressReset: () => void = $state(() => {})
 
-	$: lastJob && outputPicker?.setLastJob(lastJob, false)
-	$: testJob && outputPicker?.setLastJob(testJob, true)
+	let nlastJob = $derived.by(() => {
+		if (testJob) {
+			return { ...testJob, preview: true }
+		}
+		if (lastJob) {
+			return { ...lastJob, preview: false }
+		}
+		return undefined
+	})
 
-	let forceJson = false
+	let forceJson = $state(false)
 </script>
 
 <Splitpanes horizontal id={`module-preview-result-viewer-${mod.id}`} defaultSizes={[50, 50]}>
@@ -50,15 +73,12 @@
 		{/if}
 
 		<OutputPickerInner
-			bind:this={outputPicker}
+			lastJob={nlastJob}
 			fullResult
 			moduleId={mod.id}
 			closeOnOutsideClick={true}
 			getLogs
-			on:updateMock={({ detail }) => {
-				mod.mock = detail
-				$flowStore = $flowStore
-			}}
+			{onUpdateMock}
 			mock={mod.mock}
 			bind:forceJson
 			bind:selectedJob
@@ -69,17 +89,11 @@
 			{disableMock}
 			{disableHistory}
 		>
-			<svelte:fragment slot="copilot-fix">
-				{#if lang && editor && diffEditor && $testStepStore[mod.id] && selectedJob && 'result' in selectedJob && selectedJob.result && typeof selectedJob.result == 'object' && `error` in selectedJob.result && selectedJob.result.error}
-					<ScriptFix
-						error={JSON.stringify(selectedJob.result.error)}
-						{lang}
-						{editor}
-						{diffEditor}
-						args={$testStepStore[mod.id]}
-					/>
+			{#snippet copilot_fix()}
+				{#if lang && editor && diffEditor && $testStepStore[mod.id] && selectedJob?.type === 'CompletedJob' && !selectedJob.success && getStringError(selectedJob.result)}
+					<ScriptFix {lang} />
 				{/if}
-			</svelte:fragment>
+			{/snippet}
 		</OutputPickerInner>
 	</Pane>
 	<Pane index={1} minSize={10}>
diff --git a/frontend/src/lib/components/MoveDrawer.svelte b/frontend/src/lib/components/MoveDrawer.svelte
index b5cb5b2c3f..2979987629 100644
--- a/frontend/src/lib/components/MoveDrawer.svelte
+++ b/frontend/src/lib/components/MoveDrawer.svelte
@@ -117,8 +117,8 @@
 		<div class="flex flex-col mb-2 gap-6">
 			<Path disabled={!own} {kind} {initialPath} bind:path />
 		</div>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button disabled={!own} on:click={updatePath}>Move/Rename</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/OktaSetting.svelte b/frontend/src/lib/components/OktaSetting.svelte
index 49b5b3f72a..d6ac83aee5 100644
--- a/frontend/src/lib/components/OktaSetting.svelte
+++ b/frontend/src/lib/components/OktaSetting.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import CollapseLink from './CollapseLink.svelte'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
@@ -6,11 +8,11 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 
-	export let value: any
+	interface Props {
+		value: any
+	}
 
-	$: enabled = value != undefined
-
-	$: changeDomain(value?.['domain'], value?.['custom'])
+	let { value = $bindable() }: Props = $props()
 
 	function changeDomain(domain, custom) {
 		if (value) {
@@ -31,10 +33,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	run(() => {
+		changeDomain(value?.['domain'], value?.['custom'])
+	})
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name="okta" after={true} /></div><Toggle
 			checked={enabled}
@@ -57,10 +63,11 @@
 							on:selected={({ detail }) => {
 								value['custom'] = detail === 'custom'
 							}}
-							let:item
 						>
-							<ToggleButton value="org" label={'Org'} {item} />
-							<ToggleButton value="custom" label="Custom" {item} />
+							{#snippet children({ item })}
+								<ToggleButton value="org" label={'Org'} {item} />
+								<ToggleButton value="custom" label="Custom" {item} />
+							{/snippet}
 						</ToggleButtonGroup>
 					</div>
 					<div class="grow">
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 994df893ff..16bf6d027f 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	const lastMetaUsed = writable<Meta | undefined>(undefined)
 </script>
 
@@ -22,20 +22,19 @@
 		MqttTriggerService,
 		SqsTriggerService,
 		GcpTriggerService
-
 	} from '$lib/gen'
 	import { superadmin, userStore, workspaceStore } from '$lib/stores'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import { writable } from 'svelte/store'
-	import { Alert, Button, Drawer, DrawerContent } from './common'
+	import { Alert, Button } from './common'
 	import Badge from './common/badge/Badge.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import FolderEditor from './FolderEditor.svelte'
 	import { random_adj } from './random_positive_adjetive'
-	import { Eye, Folder, Loader2, Plus, SearchCode, User } from 'lucide-svelte'
+	import { Folder, Loader2, SearchCode, User } from 'lucide-svelte'
 	import Tooltip from './Tooltip.svelte'
 	import { tick } from 'svelte'
+	import FolderPicker from './FolderPicker.svelte'
 
 	type PathKind =
 		| 'resource'
@@ -53,27 +52,51 @@
 		| 'mqtt_trigger'
 		| 'sqs_trigger'
 		| 'gcp_trigger'
-	let meta: Meta | undefined = undefined
-	export let fullNamePlaceholder: string | undefined = undefined
-	export let namePlaceholder = ''
-	export let initialPath: string
-	export let path = ''
-	export let error = ''
-	export let disabled = false
-	export let checkInitialPathExistence = false
-	export let autofocus = true
-	export let dirty = false
-	export let kind: PathKind
-	export let hideUser: boolean = false
-	export let disableEditing = false
+	let meta: Meta | undefined = $state(undefined)
+	interface Props {
+		fullNamePlaceholder?: string | undefined
+		namePlaceholder?: string
+		initialPath: string
+		path?: string
+		error?: string
+		disabled?: boolean
+		checkInitialPathExistence?: boolean
+		autofocus?: boolean
+		dirty?: boolean
+		kind: PathKind
+		hideUser?: boolean
+		disableEditing?: boolean
+	}
 
-	let inputP: HTMLInputElement | undefined = undefined
+	let {
+		fullNamePlaceholder = undefined,
+		namePlaceholder = '',
+		initialPath,
+		path = $bindable(undefined),
+		error = $bindable(undefined),
+		disabled = $bindable(false),
+		checkInitialPathExistence = false,
+		autofocus = true,
+		dirty = $bindable(false),
+		kind,
+		hideUser = false,
+		disableEditing = false
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (path == undefined) {
+			path = ''
+		}
+		if (error == undefined) {
+			error = ''
+		}
+	})
+
+	let inputP: HTMLInputElement | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
 
-	let folders: { name: string; write: boolean }[] = []
-
-	$: meta && onMetaChange()
+	let folders: { name: string; write: boolean }[] = $state([])
 
 	function onMetaChange() {
 		if (meta) {
@@ -151,7 +174,7 @@
 			meta = newMeta
 			path = metaToPath(meta)
 		} else {
-			meta = pathToMeta(path, hideUser)
+			meta = pathToMeta(path ?? '', hideUser)
 		}
 	}
 
@@ -162,20 +185,14 @@
 			initialFolder = initialPath?.split('/')?.[1]
 			initialFolders.push({ name: initialFolder, write: true })
 		}
+		const excludedFolders = [initialFolder, 'app_groups', 'app_custom', 'app_themes']
 		folders = initialFolders.concat(
 			(
 				await FolderService.listFolderNames({
 					workspace: $workspaceStore!
 				})
 			)
-				.filter(
-					(x) =>
-						x != initialFolder &&
-						x != 'app_groups' &&
-						x != 'app_custom' &&
-						x != 'app_themes' &&
-						x != 'app_custom'
-				)
+				.filter((x) => !excludedFolders.includes(x))
 				.map((x) => ({
 					name: x,
 					write:
@@ -211,6 +228,7 @@
 	}
 
 	async function pathExists(path: string, kind: PathKind): Promise<boolean> {
+		if (!path.length) return false
 		if (kind == 'flow') {
 			return await FlowService.existsFlowByPath({ workspace: $workspaceStore!, path: path })
 		} else if (kind == 'script') {
@@ -295,13 +313,6 @@
 		}
 	}
 
-	$: {
-		if ($workspaceStore && $userStore) {
-			loadFolders()
-			initPath()
-		}
-	}
-
 	async function initPath() {
 		await tick()
 		if (path != undefined && path != '') {
@@ -318,24 +329,6 @@
 		}
 	}
 
-	let newFolder: Drawer
-	let viewFolder: Drawer
-	let newFolderName: string
-	let folderCreated: string | undefined = undefined
-
-	async function addFolder() {
-		await FolderService.createFolder({
-			workspace: $workspaceStore ?? '',
-			requestBody: { name: newFolderName }
-		})
-		folderCreated = newFolderName
-		$userStore?.folders?.push(newFolderName)
-		loadFolders()
-		if (meta) {
-			meta.owner = newFolderName
-		}
-	}
-
 	function setDirty() {
 		!dirty && (dirty = true)
 	}
@@ -344,72 +337,58 @@
 		'openSearchWithPrefilledText'
 	)
 
-	$: displayPathChangedWarning =
+	$effect(() => {
+		;[meta?.name, meta?.owner, meta?.ownerKind]
+		meta && untrack(() => onMetaChange())
+	})
+	$effect(() => {
+		if ($workspaceStore && $userStore) {
+			untrack(() => {
+				loadFolders()
+				initPath()
+			})
+		}
+	})
+	let displayPathChangedWarning = $derived(
 		(['flow', 'script', 'resource', 'variable'] as PathKind[]).includes(kind) &&
-		initialPath &&
-		initialPath !== path
-
-	$: pathUsageInFlowsPromise =
+			initialPath &&
+			initialPath !== path
+	)
+	let pathUsageInFlowsPromise = $derived(
 		(kind == 'script' || kind == 'flow') &&
-		$workspaceStore &&
-		initialPath &&
-		FlowService.listFlowPathsFromWorkspaceRunnable({
-			workspace: $workspaceStore,
-			path: initialPath,
-			runnableKind: kind
-		})
-
-	$: pathUsageInAppsPromise =
+			$workspaceStore &&
+			initialPath &&
+			FlowService.listFlowPathsFromWorkspaceRunnable({
+				workspace: $workspaceStore,
+				path: initialPath,
+				runnableKind: kind
+			})
+	)
+	let pathUsageInAppsPromise = $derived(
 		(kind == 'script' || kind == 'flow') &&
-		$workspaceStore &&
-		initialPath &&
-		AppService.listAppPathsFromWorkspaceRunnable({
-			workspace: $workspaceStore,
-			path: initialPath,
-			runnableKind: kind
-		})
-
-	$: pathUsageInScriptsPromise =
+			$workspaceStore &&
+			initialPath &&
+			AppService.listAppPathsFromWorkspaceRunnable({
+				workspace: $workspaceStore,
+				path: initialPath,
+				runnableKind: kind
+			})
+	)
+	let pathUsageInScriptsPromise = $derived(
 		kind == 'script' &&
-		$workspaceStore &&
-		initialPath &&
-		ScriptService.listScriptPathsFromWorkspaceRunnable({
-			workspace: $workspaceStore,
-			path: initialPath
-		})
+			$workspaceStore &&
+			initialPath &&
+			ScriptService.listScriptPathsFromWorkspaceRunnable({
+				workspace: $workspaceStore,
+				path: initialPath
+			})
+	)
 </script>
 
-<Drawer bind:this={newFolder}>
-	<DrawerContent
-		title="New Folder"
-		on:close={() => {
-			newFolder.closeDrawer()
-			folderCreated = undefined
-		}}
-	>
-		{#if !folderCreated}
-			<div class="flex flex-col gap-2">
-				<input placeholder="New folder name" bind:value={newFolderName} />
-				<Button size="md" startIcon={{ icon: Plus }} disabled={!newFolderName} on:click={addFolder}>
-					New&nbsp;folder
-				</Button>
-			</div>
-		{:else}
-			<FolderEditor name={folderCreated} />
-		{/if}
-	</DrawerContent>
-</Drawer>
-
-<Drawer bind:this={viewFolder}>
-	<DrawerContent title="Folder {meta?.owner}" on:close={viewFolder.closeDrawer}>
-		<FolderEditor name={meta?.owner ?? ''} />
-	</DrawerContent>
-</Drawer>
-
 <div>
 	<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 pb-0 mb-1">
 		{#if meta != undefined}
-			<!-- svelte-ignore a11y-label-has-associated-control -->
+			<!-- svelte-ignore a11y_label_has_associated_control -->
 			{#if !hideUser}
 				<div class="block">
 					<ToggleButtonGroup
@@ -429,29 +408,30 @@
 							}
 						}}
 						disabled={disabled || disableEditing}
-						let:item
 					>
-						<ToggleButton
-							icon={User}
-							disabled={disabled || disableEditing}
-							light
-							size="xs"
-							value="user"
-							position="left"
-							label="User"
-							{item}
-						/>
-						<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
-						<ToggleButton
-							icon={Folder}
-							disabled={disabled || disableEditing}
-							light
-							size="xs"
-							value="folder"
-							position="right"
-							label="Folder"
-							{item}
-						/>
+						{#snippet children({ item })}
+							<ToggleButton
+								icon={User}
+								disabled={disabled || disableEditing}
+								light
+								size="xs"
+								value="user"
+								position="left"
+								label="User"
+								{item}
+							/>
+							<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
+							<ToggleButton
+								icon={Folder}
+								disabled={disabled || disableEditing}
+								light
+								size="xs"
+								value="folder"
+								position="right"
+								label="Folder"
+								{item}
+							/>
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 			{/if}
@@ -469,55 +449,18 @@
 							disabled={disabled ||
 								!($superadmin || ($userStore?.is_admin ?? false)) ||
 								disableEditing}
-							on:keydown={setDirty}
+							onkeydown={setDirty}
 						/>
 					</label>
 				{:else if meta.ownerKind === 'folder'}
 					<label class="block grow w-48">
-						<div class="flex flex-row items-center gap-1 w-full">
-							<select
-								class="grow w-full"
-								disabled={disabled || disableEditing}
-								bind:value={meta.owner}
-							>
-								{#if folders?.length == 0}
-									<option disabled>No folders</option>
-								{/if}
-								{#each folders as { name, write }}
-									<option disabled={!write}>{name}{write ? '' : ' (read-only)'}</option>
-								{/each}
-							</select>
-							<Button
-								title="View folder"
-								btnClasses="!p-1.5"
-								variant="border"
-								color="light"
-								size="xs"
-								disabled={!meta.owner || meta.owner == ''}
-								on:click={viewFolder.openDrawer}
-								iconOnly
-								startIcon={{ icon: Eye }}
-							/>
-							{#if !disableEditing}
-								<Button
-									title="New folder"
-									btnClasses="!p-1.5"
-									variant="border"
-									color="light"
-									size="xs"
-									{disabled}
-									on:click={newFolder.openDrawer}
-									iconOnly
-									startIcon={{ icon: Plus }}
-								/>
-							{/if}
-						</div>
+						<FolderPicker bind:folderName={meta.owner} {initialPath} {disabled} {disableEditing} />
 					</label>
 				{/if}
 			</div>
 			<span class="text-xl">/</span>
 			<label class="block grow w-full max-w-md">
-				<!-- svelte-ignore a11y-autofocus -->
+				<!-- svelte-ignore a11y_autofocus -->
 				<input
 					disabled={disabled || disableEditing}
 					type="text"
@@ -525,7 +468,7 @@
 					{autofocus}
 					bind:this={inputP}
 					autocomplete="off"
-					on:keyup={handleKeyUp}
+					onkeyup={handleKeyUp}
 					bind:value={meta.name}
 					placeholder={namePlaceholder}
 					class={error === ''
@@ -550,7 +493,7 @@
 				value={path}
 				size={path?.length || 50}
 				class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-				on:focus={({ currentTarget }) => {
+				onfocus={({ currentTarget }) => {
 					currentTarget.select()
 				}}
 			/>
diff --git a/frontend/src/lib/components/PersistentScriptDrawer.svelte b/frontend/src/lib/components/PersistentScriptDrawer.svelte
index 08bf84aeff..3f24ef7377 100644
--- a/frontend/src/lib/components/PersistentScriptDrawer.svelte
+++ b/frontend/src/lib/components/PersistentScriptDrawer.svelte
@@ -59,9 +59,12 @@
 		queuedJobs = loadingQueuedJobs
 		const endStart = new Date().getTime()
 		// toggle queuedJobsLoading to false in 1 secs to let some time for the animation to play
-		setTimeout(() => {
-			queuedJobsLoading = false
-		}, 3000 - (endStart - timeStart))
+		setTimeout(
+			() => {
+				queuedJobsLoading = false
+			},
+			3000 - (endStart - timeStart)
+		)
 	}
 
 	async function scaleToZero() {
@@ -167,18 +170,20 @@
 			</tbody>
 		</TableCustom>
 
-		<div slot="actions" class="flex gap-1">
-			<Button
-				color="red"
-				disabled={cancellingInProgress === true || queuedJobs.length === 0}
-				on:click={scaleToZero}
-			>
-				{#if cancellingInProgress}
-					<Loader2 class="animate-spin" /> Stopping jobs
-				{:else}
-					Scale down to 0
-				{/if}
-			</Button>
-		</div>
+		{#snippet actions()}
+			<div class="flex gap-1">
+				<Button
+					color="red"
+					disabled={cancellingInProgress === true || queuedJobs.length === 0}
+					on:click={scaleToZero}
+				>
+					{#if cancellingInProgress}
+						<Loader2 class="animate-spin" /> Stopping jobs
+					{:else}
+						Scale down to 0
+					{/if}
+				</Button>
+			</div>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/Portal.svelte b/frontend/src/lib/components/Portal.svelte
index 020a17b236..5ea9c44e95 100644
--- a/frontend/src/lib/components/Portal.svelte
+++ b/frontend/src/lib/components/Portal.svelte
@@ -57,6 +57,6 @@
 	export let name = undefined
 </script>
 
-<div use:portal={{ target, name }} hidden>
+<div use:portal={{ target, name }} hidden class={$$props.class}>
 	<slot />
 </div>
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 026a18a1a6..f2bc9c7ab9 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import type { Schema } from '$lib/common'
 	import { ResourceService, type Resource, type ResourceType } from '$lib/gen'
 	import { canWrite, emptyString, isOwner, urlize } from '$lib/utils'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { Alert, Skeleton } from './common'
 	import Path from './Path.svelte'
 	import Required from './Required.svelte'
@@ -20,44 +22,48 @@
 	import TestTriggerConnection from './triggers/TestTriggerConnection.svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let canSave = true
-	export let resource_type: string | undefined = undefined
-	export let path: string = ''
-	export let newResource: boolean = false
-	export let hidePath: boolean = false
-	export let watchChanges: boolean = false
-	export let defaultValues: Record<string, any> | undefined = undefined
-
-	$: if (defaultValues && Object.keys(defaultValues).length > 0) {
-		args = defaultValues
+	interface Props {
+		canSave?: boolean
+		resource_type?: string | undefined
+		path?: string
+		newResource?: boolean
+		hidePath?: boolean
+		watchChanges?: boolean
+		defaultValues?: Record<string, any> | undefined
 	}
 
-	let isValid = true
-	let jsonError = ''
-	let can_write = true
+	let {
+		canSave = $bindable(true),
+		resource_type = $bindable(undefined),
+		path = $bindable(''),
+		newResource = false,
+		hidePath = false,
+		watchChanges = false,
+		defaultValues = undefined
+	}: Props = $props()
 
-	$: canSave = can_write && isValid && jsonError == ''
+	let isValid = $state(true)
+	let jsonError = $state('')
+	let can_write = $state(true)
 
 	let initialPath = path
 
-	let resourceToEdit: Resource | undefined = undefined
+	let resourceToEdit: Resource | undefined = $state(undefined)
 
-	let description: string = ''
+	let description: string = $state('')
 	let DESCRIPTION_PLACEHOLDER = `Describe what this resource is for`
-	let resourceSchema: Schema | undefined = undefined
-	let args: Record<string, any> = {}
-	let loadingSchema = true
-	let linkedVars: string[] = []
-	let resourceTypeInfo: ResourceType | undefined = undefined
-	let editDescription = false
-	let viewJsonSchema = false
+	let resourceSchema: Schema | undefined = $state(undefined)
+	let args: Record<string, any> = $state({})
+	let loadingSchema = $state(true)
+	let linkedVars: string[] = $state([])
+	let resourceTypeInfo: ResourceType | undefined = $state(undefined)
+	let editDescription = $state(false)
+	let viewJsonSchema = $state(false)
 
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
-	$: watchChanges && dispatchIfMounted('change', { path, args, description })
-
-	let rawCode: string | undefined = undefined
+	let rawCode: string | undefined = $state(undefined)
 
 	async function initEdit() {
 		resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore!, path })
@@ -81,9 +87,6 @@
 		sendUserToast('Resource type cannot be undefined for new resource creation', true)
 	}
 
-	$: rawCode && parseJson()
-	$: linkedVars.length > 0 && path && updateArgsFromLinkedVars()
-
 	export async function editResource(): Promise<void> {
 		if (resourceToEdit) {
 			await ResourceService.updateResource({
@@ -150,8 +153,7 @@
 		})
 	}
 
-	let textFileContent: string = ''
-	$: textFileContent && parseTextFileContent()
+	let textFileContent: string = $state('')
 
 	function switchTab(asJson: boolean) {
 		viewJsonSchema = asJson
@@ -170,6 +172,26 @@
 			content: textFileContent
 		}
 	}
+	run(() => {
+		if (defaultValues && Object.keys(defaultValues).length > 0) {
+			args = defaultValues
+		}
+	})
+	run(() => {
+		canSave = can_write && isValid && jsonError == ''
+	})
+	run(() => {
+		watchChanges && dispatchIfMounted('change', { path, args, description })
+	})
+	run(() => {
+		rawCode && untrack(() => parseJson())
+	})
+	run(() => {
+		linkedVars.length > 0 && path && untrack(() => updateArgsFromLinkedVars())
+	})
+	run(() => {
+		textFileContent && untrack(() => parseTextFileContent())
+	})
 </script>
 
 <div>
diff --git a/frontend/src/lib/components/ResourceEditorDrawer.svelte b/frontend/src/lib/components/ResourceEditorDrawer.svelte
index c5ee96daa1..caf3168272 100644
--- a/frontend/src/lib/components/ResourceEditorDrawer.svelte
+++ b/frontend/src/lib/components/ResourceEditorDrawer.svelte
@@ -57,7 +57,7 @@
 				bind:canSave
 			/>
 		{/await}
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				startIcon={{ icon: Save }}
 				on:click={() => {
@@ -72,6 +72,6 @@
 			>
 				Save
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 4e50c13911..69e8a4bf9e 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -2,17 +2,15 @@
 	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { createEventDispatcher, onMount } from 'svelte'
-	import Select from './apps/svelte-select/lib/index'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 	import AppConnect from './AppConnectDrawer.svelte'
 	import ResourceEditorDrawer from './ResourceEditorDrawer.svelte'
 
 	import { Button } from './common'
 	import DBManagerDrawerButton from './DBManagerDrawerButton.svelte'
-	import DarkModeObserver from './DarkModeObserver.svelte'
 	import { Pen, Plus, RotateCw } from 'lucide-svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { isDbType } from './apps/components/display/dbtable/utils'
+	import Select from './Select.svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
 	const dispatch = createEventDispatcher()
@@ -104,12 +102,8 @@
 
 	let appConnect: AppConnect
 	let resourceEditor: ResourceEditorDrawer
-
-	let darkMode: boolean = false
 </script>
 
-<DarkModeObserver bind:darkMode />
-
 <AppConnect
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
@@ -141,14 +135,16 @@
 		{#if collection?.length > 0}
 			<Select
 				{disabled}
-				portal={!disablePortal}
-				value={valueSelect}
-				on:change={(e) => {
-					value = e.detail.value
-					valueType = e.detail.type
-					valueSelect = e.detail
-				}}
-				on:clear={() => {
+				{disablePortal}
+				bind:value={
+					() => valueSelect?.value,
+					(v) => {
+						valueSelect = collection.find((x) => x.value === v)
+						value = v
+						valueType = valueSelect?.type
+					}
+				}
+				onClear={() => {
 					initialValue = undefined
 					value = undefined
 					valueType = undefined
@@ -156,12 +152,9 @@
 					dispatch('clear')
 				}}
 				items={collection}
+				clearable
 				class="text-clip grow min-w-0"
 				placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
-				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={darkMode
-					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-					: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 			/>
 		{:else if !loading}
 			<div class="text-2xs text-tertiary mr-2">0 found</div>
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 7b36d50f51..60f6eb88a9 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -13,52 +13,20 @@
 
 	import TimeAgo from './TimeAgo.svelte'
 	import Popover from './meltComponents/Popover.svelte'
-	import { Calendar, CornerDownLeft } from 'lucide-svelte'
+	import { Calendar, Check, CornerDownLeft } from 'lucide-svelte'
 	import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte'
 	import { page } from '$app/stores'
 	import { replaceState } from '$app/navigation'
 	import JsonInputs from '$lib/components/JsonInputs.svelte'
+	import TriggerableByAI from './TriggerableByAI.svelte'
+	import InputSelectedBadge from './schema/InputSelectedBadge.svelte'
+	import { untrack } from 'svelte'
 
-	export let runnable:
-		| {
-				summary?: string
-				schema?: Schema | any
-				description?: string
-				path?: string
-				is_template?: boolean
-				hash?: string
-				kind?: string
-				can_write?: boolean
-				created_at?: string
-				created_by?: string
-				extra_perms?: Record<string, boolean>
-		  }
-		| undefined
-	export let runAction: (
-		scheduledForStr: string | undefined,
-		args: Record<string, any>,
-		invisible_to_owner: boolean | undefined,
-		overrideTag: string | undefined
-	) => void
-	export let buttonText = 'Run'
-	export let schedulable = true
-	export let detailed = true
-	export let autofocus = false
-	export let topButton = false
-	export let loading = false
-	export let noVariablePicker = false
-	export let viewKeybinding = false
-
-	export let scheduledForStr: string | undefined
-	export let invisible_to_owner: boolean | undefined
-	export let overrideTag: string | undefined
-
-	export let args: Record<string, any> = {}
-	export let jsonView = false
-
-	let reloadArgs = 0
-	let jsonEditor: JsonInputs | undefined = undefined
-	let schemaHeight = 0
+	let reloadArgs = $state(0)
+	let jsonEditor: JsonInputs | undefined = $state(undefined)
+	let schemaHeight = $state(0)
+	let showInputSelectedBadge = $state(false)
+	let savedPreviousArgs: Record<string, any> | undefined = $state(undefined)
 
 	export async function setArgs(nargs: Record<string, any>) {
 		args = nargs
@@ -66,12 +34,72 @@
 	}
 
 	export function run() {
-		runAction(scheduledForStr, args, invisible_to_owner, overrideTag)
+		runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)
 	}
 
-	export let isValid = true
+	interface Props {
+		runnable:
+			| {
+					summary?: string
+					schema?: Schema | any
+					description?: string
+					path?: string
+					is_template?: boolean
+					hash?: string
+					kind?: string
+					can_write?: boolean
+					created_at?: string
+					created_by?: string
+					extra_perms?: Record<string, boolean>
+			  }
+			| undefined
+		runAction: (
+			scheduledForStr: string | undefined,
+			args: Record<string, any>,
+			invisible_to_owner: boolean | undefined,
+			overrideTag: string | undefined
+		) => void
+		buttonText?: string
+		schedulable?: boolean
+		detailed?: boolean
+		autofocus?: boolean
+		topButton?: boolean
+		loading?: boolean
+		noVariablePicker?: boolean
+		viewKeybinding?: boolean
+		scheduledForStr: string | undefined
+		invisible_to_owner: boolean | undefined
+		overrideTag: string | undefined
+		args?: Record<string, any>
+		jsonView?: boolean
+		isValid?: boolean
+	}
+
+	let {
+		runnable = $bindable(),
+		runAction,
+		buttonText = 'Run',
+		schedulable = true,
+		detailed = true,
+		autofocus = false,
+		topButton = false,
+		loading = false,
+		noVariablePicker = false,
+		viewKeybinding = false,
+		scheduledForStr = $bindable(),
+		invisible_to_owner = $bindable(),
+		overrideTag = $bindable(),
+		args = $bindable(),
+		jsonView = false,
+		isValid = $bindable(true)
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (args == undefined) {
+			args = {}
+		}
+	})
 
-	$: onArgsChange(args)
 	let debounced: NodeJS.Timeout | undefined = undefined
 
 	function onArgsChange(args: any) {
@@ -95,8 +123,57 @@
 	export function setCode(code: string) {
 		jsonEditor?.setCode(code)
 	}
+	$effect(() => {
+		Object.keys(args ?? {}).forEach((key) => {
+			args?.[key]
+		})
+		untrack(() => onArgsChange(args))
+	})
 </script>
 
+<TriggerableByAI
+	id={`run-form-${runnable?.path ?? ''}`}
+	description={`Form to fill the inputs to run ${runnable?.summary && runnable?.summary.length > 0 ? runnable?.summary : runnable?.path}.
+	## Script description: ${runnable?.description ?? ''}.
+	## Schema used: ${JSON.stringify(runnable?.schema)}.
+	## Current args: ${JSON.stringify(args)}}`}
+	onTrigger={(value) => {
+		savedPreviousArgs = args
+		setArgs(JSON.parse(value ?? '{}'))
+		showInputSelectedBadge = true
+	}}
+	showAnimation={false}
+/>
+
+{#snippet acceptButton()}
+	<Button
+		startIcon={{
+			icon: Check
+		}}
+		size="xs2"
+		btnClasses="border border-gray-200 dark:border-gray-600 !bg-surface text-primary"
+		on:click={() => {
+			showInputSelectedBadge = false
+			savedPreviousArgs = undefined
+		}}
+	>
+		Accept
+	</Button>
+{/snippet}
+
+{#if showInputSelectedBadge}
+	<InputSelectedBadge
+		inputSelected="ai"
+		labelColor="text-violet-800 dark:text-primary"
+		className="dark:!bg-violet-800 !bg-violet-200 !border-violet-200 dark:!border-violet-800"
+		{acceptButton}
+		onReject={() => {
+			setArgs(savedPreviousArgs ?? {})
+			savedPreviousArgs = undefined
+			showInputSelectedBadge = false
+		}}
+	/>
+{/if}
 <div class="max-w-3xl">
 	{#if detailed}
 		{#if runnable}
@@ -137,6 +214,10 @@
 				</div>
 			</div>
 		{:else}
+			<TriggerableByAI
+				id="run-form-loading"
+				description="Run form is loading, should scan the page until this is gone"
+			/>
 			<h1>Loading...</h1>
 		{/if}
 	{/if}
@@ -144,7 +225,7 @@
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid || jsonView}
-			on:click={() => runAction(undefined, args, invisible_to_owner, overrideTag)}
+			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 		>
 			{buttonText}
 		</Button>
@@ -174,7 +255,7 @@
 							? {
 									type: 'hash',
 									hash: runnable.hash
-							  }
+								}
 							: undefined}
 						prettifyHeader
 						{noVariablePicker}
@@ -198,26 +279,26 @@
 					color="dark"
 					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
 					disabled={!isValid || jsonView}
-					on:click={() => runAction(scheduledForStr, args, invisible_to_owner, overrideTag)}
+					on:click={() => runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)}
 					shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 				>
 					{scheduledForStr ? 'Schedule to run later' : buttonText}
 				</Button>
 				<div>
 					<Popover placement="bottom" closeButton usePointerDownOutside>
-						<svelte:fragment slot="trigger">
+						{#snippet trigger()}
 							<Button nonCaptureEvent startIcon={{ icon: Calendar }} size="xs" color="light">
 								Advanced
 							</Button>
-						</svelte:fragment>
-						<svelte:fragment slot="content">
+						{/snippet}
+						{#snippet content()}
 							<RunFormAdvancedPopup
 								bind:scheduledForStr
 								bind:invisible_to_owner
 								bind:overrideTag
 								bind:runnable
 							/>
-						</svelte:fragment>
+						{/snippet}
 					</Popover>
 				</div>
 			</div>
@@ -236,7 +317,7 @@
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid || jsonView}
-			on:click={() => runAction(undefined, args, invisible_to_owner, overrideTag)}
+			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 			shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 		>
 			{buttonText}
diff --git a/frontend/src/lib/components/S3FilePicker.svelte b/frontend/src/lib/components/S3FilePicker.svelte
index 1c9cf60cc5..2a174dcd54 100644
--- a/frontend/src/lib/components/S3FilePicker.svelte
+++ b/frontend/src/lib/components/S3FilePicker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { run, createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import {
 		File as FileIcon,
 		FolderClosed,
@@ -17,47 +20,57 @@
 	import { Alert, Button, Drawer } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import Section from './Section.svelte'
-	import { createEventDispatcher } from 'svelte'
-	import VirtualList from 'svelte-tiny-virtual-list'
+	import { createEventDispatcher, untrack } from 'svelte'
+	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list'
 	import TableSimple from './TableSimple.svelte'
 	import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte'
 	import FileUploadModal from './common/fileUpload/FileUploadModal.svelte'
 	import PdfViewer from './display/PdfViewer.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	let deletionModalOpen = false
-	let fileDeletionInProgress = false
+	let deletionModalOpen = $state(false)
+	let fileDeletionInProgress = $state(false)
 
-	let fileListUnavailable: boolean | undefined = undefined
+	let fileListUnavailable: boolean | undefined = $state(undefined)
 
-	let moveModalOpen = false
-	let moveDestKey: string | undefined = undefined
-	let fileMoveInProgress = false
+	let moveModalOpen = $state(false)
+	let moveDestKey: string | undefined = $state(undefined)
+	let fileMoveInProgress = $state(false)
 
-	let uploadModalOpen = false
+	let uploadModalOpen = $state(false)
 
-	let workspaceSettingsInitialized = true
+	let workspaceSettingsInitialized = $state(true)
 
-	export let fromWorkspaceSettings: boolean = false
-	export let readOnlyMode: boolean
-
-	export let initialFileKey: { s3: string; storage?: string } | undefined = undefined
 	let initialFileKeyInternalCopy: { s3: string; storage?: string }
-	export let selectedFileKey: { s3: string; storage?: string } | undefined = undefined
-	export let folderOnly = false
-	export let regexFilter: RegExp | undefined = undefined
+	interface Props {
+		fromWorkspaceSettings?: boolean
+		readOnlyMode: boolean
+		initialFileKey?: { s3: string; storage?: string } | undefined
+		selectedFileKey?: { s3: string; storage?: string } | undefined
+		folderOnly?: boolean
+		regexFilter?: RegExp | undefined
+	}
 
-	let csvSeparatorChar: string = ','
-	let csvHasHeader: boolean = true
+	let {
+		fromWorkspaceSettings = false,
+		readOnlyMode,
+		initialFileKey = $bindable(undefined),
+		selectedFileKey = $bindable(undefined),
+		folderOnly = false,
+		regexFilter = undefined
+	}: Props = $props()
+
+	let csvSeparatorChar: string = $state(',')
+	let csvHasHeader: boolean = $state(true)
 
 	let dispatch = createEventDispatcher<{
 		close: { s3: string; storage: string | undefined } | undefined
 	}>()
 
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
 
-	let fileInfoLoading: boolean = true
-	let fileListLoading: boolean = true
+	let fileInfoLoading: boolean = $state(true)
+	let fileListLoading: boolean = $state(true)
 	let allFilesByKey: Record<
 		string,
 		{
@@ -69,10 +82,10 @@
 			nestingLevel: number
 			count: number
 		}
-	> = {}
-	let displayedFileKeys: string[] = []
+	> = $state({})
+	let displayedFileKeys: string[] = $state([])
 
-	let listDivHeight: number = 0
+	let listDivHeight: number = $state(0)
 
 	let fileMetadata:
 		| {
@@ -82,29 +95,28 @@
 				sizeStr: string | undefined
 				lastModified: string | undefined
 		  }
-		| undefined = undefined
-	let filePreviewLoading: boolean = false
+		| undefined = $state(undefined)
+	let filePreviewLoading: boolean = $state(false)
 	let filePreview:
 		| {
 				fileKey: string
 				contentPreview: string | undefined
 				contentType: string | undefined
 		  }
-		| undefined = undefined
+		| undefined = $state(undefined)
 
 	let listMarkers: string[]
-	let page = 0
+	let page = $state(0)
 
 	const maxKeys = 1000
 
-	let count = 0
-	let displayedCount = 0
+	let count = $state(0)
+	let displayedCount = $state(0)
 
-	let filter = ''
+	let filter = $state('')
 
 	let timeout: NodeJS.Timeout | undefined = undefined
 	let firstLoad = true
-	$: filter != undefined && onFilterChange()
 
 	function onFilterChange() {
 		if (!firstLoad) {
@@ -117,7 +129,7 @@
 		}
 	}
 
-	let lastKeyFolders: string[] = []
+	let lastKeyFolders: string[] = $state([])
 	async function loadFiles() {
 		fileListLoading = true
 		let availableFiles = await HelpersService.listStoredFiles({
@@ -364,7 +376,7 @@
 		await loadFileMetadataPlusPreviewAsync(selectedFileKey.s3)
 	}
 
-	let storage: string | undefined = undefined
+	let storage: string | undefined = $state(undefined)
 	export async function open(
 		preSelectedFileKey: { s3: string; storage?: string } | undefined = undefined
 	) {
@@ -374,7 +386,7 @@
 			selectedFileKey = { ...preSelectedFileKey }
 		}
 		reloadContent()
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 	}
 
 	async function reloadContent() {
@@ -405,14 +417,14 @@
 	}
 
 	async function selectAndClose() {
-		drawer.closeDrawer?.()
+		drawer?.closeDrawer?.()
 	}
 
 	async function exit() {
 		if (initialFileKeyInternalCopy !== undefined) {
 			selectedFileKey = { ...initialFileKeyInternalCopy }
 		}
-		drawer.closeDrawer?.()
+		drawer?.closeDrawer?.()
 	}
 
 	function selectItem(index: number, toggleCollapsed: boolean = true) {
@@ -463,10 +475,13 @@
 			loadFileMetadataPlusPreviewAsync(selectedFileKey.s3)
 		}
 	}
+	run(() => {
+		filter != undefined && untrack(() => onFilterChange())
+	})
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <Drawer
 	bind:this={drawer}
 	on:close={() => {
@@ -551,51 +566,55 @@
 									itemCount={displayedFileKeys.length}
 									itemSize={42}
 								>
-									<div
-										slot="item"
-										let:index
-										let:style
-										{style}
-										class={twMerge(
-											'hover:bg-surface-hover border-b',
-											index === displayedFileKeys.length - 1 && 'border-b-0'
-										)}
-									>
+									{#snippet header()}{/snippet}
+									{#snippet footer()}{/snippet}
+									{#snippet children({ index, style })}
 										{@const file_info = allFilesByKey[displayedFileKeys[index]]}
-										{#if file_info}
-											<div
-												on:click={() => selectItem(index)}
-												class={twMerge(
-													'flex flex-row h-full font-semibold text-xs items-center justify-start',
-													selectedFileKey !== undefined && selectedFileKey.s3 === file_info.full_key
-														? 'bg-surface-hover'
-														: ''
-												)}
-											>
+
+										<div
+											{style}
+											class={twMerge(
+												'hover:bg-surface-hover border-b',
+												index === displayedFileKeys.length - 1 && 'border-b-0'
+											)}
+										>
+											{#if file_info}
 												<div
-													class={`flex flex-row w-full gap-2 h-full items-center`}
-													style={`margin-left: ${(2 + file_info.nestingLevel) * 0.25}rem;`}
+													onclick={() => selectItem(index)}
+													class={twMerge(
+														'flex flex-row h-full font-semibold text-xs items-center justify-start',
+														selectedFileKey !== undefined &&
+															selectedFileKey.s3 === file_info.full_key
+															? 'bg-surface-hover'
+															: ''
+													)}
 												>
-													{#if file_info.type === 'folder'}
-														{#if file_info.collapsed}<FolderClosed size={16} />{:else}<FolderOpen
-																size={16}
-															/>{/if}
-														<div class="truncate text-ellipsis w-56">
-															{file_info.display_name} ({file_info.count}{count % 1000 === 0 &&
-															lastKeyFolders[file_info.nestingLevel / 2] === file_info.display_name
-																? '+'
-																: ''} item{file_info.count === 1 ? '' : 's'})
-														</div>
-													{:else}
-														<FileIcon size={16} />
-														<div class="truncate text-ellipsis w-56">
-															{file_info.display_name}
-														</div>
-													{/if}
+													<div
+														class={`flex flex-row w-full gap-2 h-full items-center`}
+														style={`margin-left: ${(2 + file_info.nestingLevel) * 0.25}rem;`}
+													>
+														{#if file_info.type === 'folder'}
+															{#if file_info.collapsed}<FolderClosed size={16} />{:else}<FolderOpen
+																	size={16}
+																/>{/if}
+															<div class="truncate text-ellipsis w-56">
+																{file_info.display_name} ({file_info.count}{count % 1000 === 0 &&
+																lastKeyFolders[file_info.nestingLevel / 2] ===
+																	file_info.display_name
+																	? '+'
+																	: ''} item{file_info.count === 1 ? '' : 's'})
+															</div>
+														{:else}
+															<FileIcon size={16} />
+															<div class="truncate text-ellipsis w-56">
+																{file_info.display_name}
+															</div>
+														{/if}
+													</div>
 												</div>
-											</div>
-										{/if}
-									</div>
+											{/if}
+										</div>
+									{/snippet}
 								</VirtualList>
 							</div>
 							<div
@@ -643,42 +662,44 @@
 					{:else}
 						<div class="p-4 gap-2">
 							<Section label={fileMetadata.fileKey} breakAll>
-								<div slot="action" class="flex gap-2">
-									{#if filePreview !== undefined}
-										<Button
-											title="Download file from S3"
-											variant="border"
-											color="light"
-											href={`${base}/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${encodeURIComponent(
-												fileMetadata?.fileKey ?? ''
-											)}${storage ? `&storage=${storage}` : ''}`}
-											download={fileMetadata?.fileKey.split('/').pop() ?? 'unnamed_download.file'}
-											startIcon={{ icon: Download }}
-											iconOnly={true}
-										/>
-										<Button
-											title="Move file"
-											variant="border"
-											color="light"
-											on:click={() => {
-												moveDestKey = fileMetadata?.fileKey ?? ''
-												moveModalOpen = true
-											}}
-											startIcon={{ icon: MoveRight }}
-											iconOnly={true}
-										/>
-										<Button
-											title="Delete file from S3"
-											variant="border"
-											color="red"
-											on:click={() => {
-												deletionModalOpen = true
-											}}
-											startIcon={{ icon: Trash }}
-											iconOnly={true}
-										/>
-									{/if}
-								</div>
+								{#snippet action()}
+									<div class="flex gap-2">
+										{#if filePreview !== undefined}
+											<Button
+												title="Download file from S3"
+												variant="border"
+												color="light"
+												href={`${base}/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${encodeURIComponent(
+													fileMetadata?.fileKey ?? ''
+												)}${storage ? `&storage=${storage}` : ''}`}
+												download={fileMetadata?.fileKey.split('/').pop() ?? 'unnamed_download.file'}
+												startIcon={{ icon: Download }}
+												iconOnly={true}
+											/>
+											<Button
+												title="Move file"
+												variant="border"
+												color="light"
+												on:click={() => {
+													moveDestKey = fileMetadata?.fileKey ?? ''
+													moveModalOpen = true
+												}}
+												startIcon={{ icon: MoveRight }}
+												iconOnly={true}
+											/>
+											<Button
+												title="Delete file from S3"
+												variant="border"
+												color="red"
+												on:click={() => {
+													deletionModalOpen = true
+												}}
+												startIcon={{ icon: Trash }}
+												iconOnly={true}
+											/>
+										{/if}
+									</div>
+								{/snippet}
 							</Section>
 							<TableSimple
 								headers={['Last modified', 'Size', 'Type']}
@@ -721,7 +742,7 @@
 											<select
 												class="h-8"
 												bind:value={csvSeparatorChar}
-												on:change={(e) =>
+												onchange={(e) =>
 													loadFilePreview(
 														fileMetadata?.fileKey ?? '',
 														fileMetadata?.size,
@@ -737,19 +758,20 @@
 										Header row:
 										<div class="inline-flex item-center w-4 ml-2 mr-2">
 											<input
-												on:focus
-												on:click
+												onfocus={bubble('focus')}
+												onclick={bubble('click')}
 												disabled={false}
 												type="checkbox"
 												id="csv-header"
 												class="h-5"
 												bind:checked={csvHasHeader}
-												on:change|stopPropagation={(e) =>
+												onchange={stopPropagation((e) =>
 													loadFilePreview(
 														fileMetadata?.fileKey ?? '',
 														fileMetadata?.size,
 														fileMetadata?.mimeType
-													)}
+													)
+												)}
 											/>
 										</div>
 									{:else}
@@ -766,27 +788,29 @@
 			</div>
 		{/if}
 
-		<div slot="actions" class="flex gap-1">
-			{#if !readOnlyMode}
-				<Button
-					variant="border"
-					color="light"
-					disabled={workspaceSettingsInitialized === false}
-					startIcon={{ icon: FileUp }}
-					on:click={() => {
-						uploadModalOpen = true
-					}}>Upload File</Button
-				>
-				{#if !fromWorkspaceSettings}
+		{#snippet actions()}
+			<div class="flex gap-1">
+				{#if !readOnlyMode}
 					<Button
-						disabled={selectedFileKey === undefined ||
-							emptyString(selectedFileKey.s3) ||
-							(folderOnly && allFilesByKey[selectedFileKey.s3]?.type !== 'folder')}
-						on:click={selectAndClose}>Select</Button
+						variant="border"
+						color="light"
+						disabled={workspaceSettingsInitialized === false}
+						startIcon={{ icon: FileUp }}
+						on:click={() => {
+							uploadModalOpen = true
+						}}>Upload File</Button
 					>
+					{#if !fromWorkspaceSettings}
+						<Button
+							disabled={selectedFileKey === undefined ||
+								emptyString(selectedFileKey.s3) ||
+								(folderOnly && allFilesByKey[selectedFileKey.s3]?.type !== 'folder')}
+							on:click={selectAndClose}>Select</Button
+						>
+					{/if}
 				{/if}
-			{/if}
-		</div>
+			</div>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
 
diff --git a/frontend/src/lib/components/SavedInputsPicker.svelte b/frontend/src/lib/components/SavedInputsPicker.svelte
index 5ea3bfe28b..be887c3ff5 100644
--- a/frontend/src/lib/components/SavedInputsPicker.svelte
+++ b/frontend/src/lib/components/SavedInputsPicker.svelte
@@ -3,7 +3,7 @@
 	import { InputService, type Input, type RunnableType } from '$lib/gen/index.js'
 	import { userStore, workspaceStore } from '$lib/stores.js'
 	import { sendUserToast } from '$lib/utils.js'
-	import { createEventDispatcher, onDestroy } from 'svelte'
+	import { createEventDispatcher, onDestroy, untrack } from 'svelte'
 	import { Edit, Trash2, Save } from 'lucide-svelte'
 	import Toggle from './Toggle.svelte'
 	import { Cell } from './table/index'
@@ -13,13 +13,25 @@
 	import { twMerge } from 'tailwind-merge'
 	import SavedInputsPickerViewer from './SavedInputsPickerViewer.svelte'
 
-	export let previewArgs: any = undefined
-	export let runnableId: string | undefined = undefined
-	export let runnableType: RunnableType | undefined = undefined
-	export let isValid: boolean = false
-	export let noButton: boolean = false
-	export let jsonView: boolean = false
-	export let limitPayloadSize: boolean = false
+	interface Props {
+		previewArgs?: any
+		runnableId?: string | undefined
+		runnableType?: RunnableType | undefined
+		isValid?: boolean
+		noButton?: boolean
+		jsonView?: boolean
+		limitPayloadSize?: boolean
+	}
+
+	let {
+		previewArgs = undefined,
+		runnableId = undefined,
+		runnableType = undefined,
+		isValid = false,
+		noButton = false,
+		jsonView = false,
+		limitPayloadSize = false
+	}: Props = $props()
 
 	interface EditableInput extends Input {
 		isEditing?: boolean
@@ -30,13 +42,13 @@
 		getFullPayload?: () => Promise<any>
 	}
 
-	let infiniteList: InfiniteList | null = null
-	let draft = true
-	let selectedInput: string | null = null
-	let isEditing: EditableInput | null = null
-	let viewerOpen = false
-	let openStates: Record<string, boolean> = {}
-	let clientWidth: number = 0
+	let infiniteList: InfiniteList | null = $state(null)
+	let draft = $state(true)
+	let selectedInput: string | null = $state(null)
+	let isEditing: EditableInput | null = $state(null)
+	let viewerOpen = $state(false)
+	let openStates: Record<string, boolean> = $state({})
+	let clientWidth: number = $state(0)
 
 	const dispatch = createEventDispatcher()
 
@@ -125,7 +137,7 @@
 				const fullPayload = await input.getFullPayload?.()
 				dispatch('select', fullPayload)
 			} else {
-				selectedArgs = structuredClone(input.payloadData ?? {})
+				selectedArgs = structuredClone($state.snapshot(input.payloadData) ?? {})
 				dispatch('select', selectedArgs)
 			}
 		}
@@ -185,25 +197,27 @@
 		viewerOpen = Object.values(openStates).some((state) => state)
 	}
 
-	$: $workspaceStore &&
-		runnableId &&
-		runnableType &&
-		(infiniteList && initLoadInputs(), (draft = false))
+	$effect(() => {
+		$workspaceStore &&
+			runnableId &&
+			runnableType &&
+			(infiniteList && untrack(() => initLoadInputs()), (draft = false))
+	})
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <div class="w-full flex flex-col gap-1 h-full overflow-y-auto">
 	{#if !noButton}
 		<div>
 			<Popover class="w-full" placement="bottom" disablePopup={runnableId && previewArgs}>
-				<svelte:fragment slot="text">
+				{#snippet text()}
 					{#if !runnableId}
 						Save draft first before you can save inputs
 					{:else if !previewArgs}
 						Add inputs before saving
 					{/if}
-				</svelte:fragment>
+				{/snippet}
 				<SaveInputsButton
 					{runnableId}
 					{runnableType}
@@ -225,13 +239,13 @@
 				on:error={(e) => handleError(e.detail)}
 				on:select={(e) => handleSelect(e.detail)}
 			>
-				<svelte:fragment slot="columns">
+				{#snippet columns()}
 					<colgroup>
 						<col class="w-8" />
 						<col />
 					</colgroup>
-				</svelte:fragment>
-				<svelte:fragment let:item let:hover>
+				{/snippet}
+				{#snippet children({ item, hover })}
 					{@const editOptions =
 						item.created_by == $userStore?.username ||
 						$userStore?.is_admin ||
@@ -249,7 +263,7 @@
 							<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
 								{#if isEditing && isEditing.id === item.id}
 									<form
-										on:submit={() => {
+										onsubmit={() => {
 											updateInput(isEditing)
 											setEditing(null)
 										}}
@@ -336,10 +350,10 @@
 							</div>
 						</div>
 					</Cell>
-				</svelte:fragment>
-				<svelte:fragment slot="empty">
+				{/snippet}
+				{#snippet empty()}
 					<div class="text-center text-xs text-tertiary">No saved Inputs</div>
-				</svelte:fragment>
+				{/snippet}
 			</InfiniteList>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/SavedInputsV2.svelte b/frontend/src/lib/components/SavedInputsV2.svelte
index 98cb4c4e14..538f3ce05f 100644
--- a/frontend/src/lib/components/SavedInputsV2.svelte
+++ b/frontend/src/lib/components/SavedInputsV2.svelte
@@ -13,15 +13,28 @@
 	import MultiSelect from './multiselect/MultiSelectWrapper.svelte'
 	const dispatch = createEventDispatcher()
 
-	export let scriptHash: string | null = null
-	export let scriptPath: string | null = null
-	export let flowPath: string | null = null
-	export let inputSelected: 'saved' | 'history' | undefined = undefined
-	export let jsonView: boolean = false
-	export let schema: any
-	// Are the current Inputs valid and able to be saved?
-	export let isValid: boolean
-	export let args: object
+	interface Props {
+		scriptHash?: string | null
+		scriptPath?: string | null
+		flowPath?: string | null
+		inputSelected?: 'saved' | 'history' | undefined
+		jsonView?: boolean
+		schema: any
+		// Are the current Inputs valid and able to be saved?
+		isValid: boolean
+		args: object
+	}
+
+	let {
+		scriptHash = null,
+		scriptPath = null,
+		flowPath = null,
+		inputSelected = $bindable(undefined),
+		jsonView = false,
+		schema,
+		isValid,
+		args
+	}: Props = $props()
 
 	export function resetSelected() {
 		historicInputs?.resetSelected(true)
@@ -29,18 +42,14 @@
 	}
 
 	let savedArgs: any = undefined
-	let runnableType: RunnableType | undefined = undefined
-	let savedInputsPicker: SavedInputsPicker | undefined = undefined
-	let historicInputs: HistoricInputs | undefined = undefined
+	let savedInputsPicker: SavedInputsPicker | undefined = $state(undefined)
+	let historicInputs: HistoricInputs | undefined = $state(undefined)
 
-	$: runnableId = scriptHash || scriptPath || flowPath || undefined
-	$: runnableType = scriptHash
-		? 'ScriptHash'
-		: scriptPath
-			? 'ScriptPath'
-			: flowPath
-				? 'FlowPath'
-				: undefined
+	let runnableId = $derived(scriptHash || scriptPath || flowPath || undefined)
+
+	let runnableType: RunnableType | undefined = $derived(
+		scriptHash ? 'ScriptHash' : scriptPath ? 'ScriptPath' : flowPath ? 'FlowPath' : undefined
+	)
 
 	function selectArgs(selected_args: any, type: 'saved' | 'history' | undefined) {
 		if (selected_args) {
@@ -55,18 +64,18 @@
 		}
 	}
 
-	let searchArgs = {}
-	let appliedSearchArgs = {}
+	let searchArgs = $state({})
+	let appliedSearchArgs = $state({})
 
-	let searchArgsFields = [] as string[]
+	let searchArgsFields = $state([] as string[])
 
-	$: emptySearchArgs = Object.keys(appliedSearchArgs).length === 0
+	let emptySearchArgs = $derived(Object.keys(appliedSearchArgs).length === 0)
 
-	$: filteredSchema = {
+	let filteredSchema = $derived({
 		properties: Object.fromEntries(
 			Object.entries(schema?.properties ?? {}).filter(([key]) => searchArgsFields.includes(key))
 		)
-	}
+	})
 </script>
 
 <div class="min-w-[300px] h-full flex flex-col">
@@ -78,7 +87,7 @@
 				wrapperClass="h-full"
 				small={true}
 			>
-				<svelte:fragment slot="action">
+				{#snippet action()}
 					<SaveInputsButton
 						{args}
 						disabled={!isValid || jsonView}
@@ -88,7 +97,7 @@
 							savedInputsPicker?.refresh()
 						}}
 					/>
-				</svelte:fragment>
+				{/snippet}
 
 				<SavedInputsPicker
 					bind:this={savedInputsPicker}
@@ -107,7 +116,7 @@
 
 		<Pane class="px-4 py-4 h-full">
 			<Section label="History" wrapperClass="h-full" small={true}>
-				<svelte:fragment slot="action">
+				{#snippet action()}
 					<div class="flex space-x-2">
 						<Popover
 							class="w-fit"
@@ -118,7 +127,7 @@
 							}}
 							floatingConfig={{ placement: 'top-end' }}
 						>
-							<svelte:fragment slot="trigger">
+							{#snippet trigger()}
 								<Button
 									variant="contained"
 									size="xs2"
@@ -130,9 +139,9 @@
 								>
 									{emptySearchArgs ? '' : 'Active filters'}
 								</Button>
-							</svelte:fragment>
+							{/snippet}
 
-							<svelte:fragment slot="content">
+							{#snippet content()}
 								<div id="multi-select-search"></div>
 								<div class="p-2 overflow-auto max-h-[400px] min-h-[300px] w-[400px]">
 									<div class="flex items-center flex-wrap gap-x-2 justify-between">
@@ -153,7 +162,7 @@
 											{/if}
 											<Button
 												on:click={async () => {
-													appliedSearchArgs = structuredClone(searchArgs)
+													appliedSearchArgs = structuredClone($state.snapshot(searchArgs))
 													await tick()
 													historicInputs?.refresh(true)
 												}}
@@ -180,7 +189,7 @@
 										<div class="text-secondary text-sm my-8 mx-auto">No filters</div>
 									{/if}
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</Popover>
 						<Button
 							size="xs2"
@@ -194,7 +203,7 @@
 							All runs
 						</Button>
 					</div>
-				</svelte:fragment>
+				{/snippet}
 				<HistoricInputs
 					bind:this={historicInputs}
 					{runnableId}
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index f9852cf3a5..860e3129be 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import type { Schema } from '$lib/common'
 	import { VariableService, type Script } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -11,103 +14,139 @@
 	import { getResourceTypes } from './resourceTypesStore'
 	import { Plus } from 'lucide-svelte'
 	import ArgInput from './ArgInput.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { deepEqual } from 'fast-equals'
 	import { dragHandleZone, type Options as DndOptions } from '@windmill-labs/svelte-dnd-action'
-	import type { SchemaDiff } from '$lib/components/schema/schemaUtils'
+	import type { SchemaDiff } from '$lib/components/schema/schemaUtils.svelte'
 	import type { ComponentCustomCSS } from './apps/types'
 
-	export let schema: Schema | any
-	export let hiddenArgs: string[] = []
-	export let schemaFieldTooltip: Record<string, string> = {}
-	export let args: Record<string, any> = {}
-	export let disabledArgs: string[] = []
-	export let disabled = false
+	interface Props {
+		schema: Schema | any
+		hiddenArgs?: string[]
+		schemaFieldTooltip?: Record<string, string>
+		args?: Record<string, any>
+		disabledArgs?: string[]
+		disabled?: boolean
+		isValid?: boolean
+		autofocus?: boolean
+		defaultValues?: Record<string, any>
+		shouldHideNoInputs?: boolean
+		compact?: boolean
+		linkedSecret?: string | undefined
+		linkedSecretCandidates?: string[] | undefined
+		noVariablePicker?: boolean
+		flexWrap?: boolean
+		noDelete?: boolean
+		prettifyHeader?: boolean
+		disablePortal?: boolean
+		showSchemaExplorer?: boolean
+		showReset?: boolean
+		onlyMaskPassword?: boolean
+		dndConfig?: DndOptions | undefined
+		items?: { id: string; value: string }[] | undefined
+		helperScript?:
+			| { type: 'inline'; path?: string; lang: Script['language']; code: string }
+			| { type: 'hash'; hash: string }
+			| undefined
+		lightHeader?: boolean
+		diff?: Record<string, SchemaDiff>
+		nestedParent?: { label: string; nestedParent: any | undefined } | undefined
+		shouldDispatchChanges?: boolean
+		nestedClasses?: string
+		dynamicEnums?: Record<string, any>
+		largeGap?: boolean
+		css?: ComponentCustomCSS<'schemaformcomponent'> | undefined
+		displayType?: boolean
+		appPath?: string | undefined
+		className?: string
+		computeS3ForceViewerPolicies?:
+			| (() =>
+					| {
+							allowed_resources: string[]
+							allow_user_resources: boolean
+							allow_workspace_resource: boolean
+							file_key_regex: string
+					  }
+					| undefined)
+			| undefined
+		workspace?: string | undefined
+		actions?: import('svelte').Snippet
+	}
 
-	export let isValid: boolean = true
-	export let autofocus = false
-	export let defaultValues: Record<string, any> = {}
-
-	export let shouldHideNoInputs: boolean = false
-	export let compact = false
-	export let linkedSecret: string | undefined = undefined
-	export let linkedSecretCandidates: string[] | undefined = undefined
-	export let noVariablePicker = false
-	export let flexWrap = false
-	export let noDelete = false
-	export let prettifyHeader = false
-	export let disablePortal = false
-	export let showSchemaExplorer = false
-	export let showReset = false
-	export let onlyMaskPassword = false
-	export let dndConfig: DndOptions | undefined = undefined
-	export let items: { id: string; value: string }[] | undefined = undefined
-	export let helperScript:
-		| { type: 'inline'; path?: string; lang: Script['language']; code: string }
-		| { type: 'hash'; hash: string }
-		| undefined = undefined
-	export let lightHeader = false
-	export let diff: Record<string, SchemaDiff> = {}
-	export let nestedParent: { label: string; nestedParent: any | undefined } | undefined = undefined
-	export let shouldDispatchChanges = false
-	export let nestedClasses = ''
-	export let dynamicEnums: Record<string, any> = {}
-	export let largeGap: boolean = false
-	export let css: ComponentCustomCSS<'schemaformcomponent'> | undefined = undefined
-	export let displayType: boolean = true
-
-	export let appPath: string | undefined = undefined
-
-	export let computeS3ForceViewerPolicies:
-		| (() =>
-				| {
-						allowed_resources: string[]
-						allow_user_resources: boolean
-						allow_workspace_resource: boolean
-						file_key_regex: string
-				  }
-				| undefined)
-		| undefined = undefined
-	export let workspace: string | undefined = undefined
+	let {
+		schema = $bindable(),
+		hiddenArgs = [],
+		schemaFieldTooltip = {},
+		args = $bindable(undefined),
+		disabledArgs = [],
+		disabled = false,
+		isValid = $bindable(true),
+		autofocus = false,
+		defaultValues = {},
+		shouldHideNoInputs = false,
+		compact = false,
+		linkedSecret = $bindable(undefined),
+		linkedSecretCandidates = undefined,
+		noVariablePicker = false,
+		flexWrap = false,
+		noDelete = false,
+		prettifyHeader = false,
+		disablePortal = false,
+		showSchemaExplorer = false,
+		showReset = false,
+		onlyMaskPassword = false,
+		dndConfig = undefined,
+		items = undefined,
+		helperScript = undefined,
+		lightHeader = false,
+		diff = {},
+		nestedParent = undefined,
+		shouldDispatchChanges = false,
+		nestedClasses = '',
+		dynamicEnums = {},
+		largeGap = false,
+		css = undefined,
+		displayType = true,
+		appPath = undefined,
+		className = '',
+		computeS3ForceViewerPolicies = undefined,
+		workspace = undefined,
+		actions
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
-	let inputCheck: { [id: string]: boolean } = {}
-
-	$: if (args == undefined || typeof args !== 'object') {
-		args = {}
-	}
+	let inputCheck: { [id: string]: boolean } = $state({})
 
 	export function setDefaults() {
-		const nargs = structuredClone(defaultValues)
+		const nargs = structuredClone($state.snapshot(defaultValues))
 
 		Object.keys(schema?.properties ?? {}).forEach((key) => {
-			if (schema?.properties[key].default != undefined && args[key] == undefined) {
+			if (schema?.properties[key].default != undefined && args && args[key] == undefined) {
 				let value = schema?.properties[key].default
-				nargs[key] = value === 'object' ? structuredClone(value) : value
+				nargs[key] = value === 'object' ? structuredClone($state.snapshot(value)) : value
 			}
 		})
 		args = nargs
 	}
 
-	let keys: string[]
-	$: keys = Array.isArray(schema?.order) ? schema?.order : Object.keys(schema?.properties ?? {})
+	let keys: string[] = $state([])
 
 	function removeExtraKey() {
 		const nargs = {}
 		Object.keys(args ?? {}).forEach((key) => {
-			if (keys.includes(key)) {
+			if (keys.includes(key) && args) {
 				nargs[key] = args[key]
 			}
 		})
 		args = nargs
 	}
 
-	let pickForField: string | undefined
-	let itemPicker: ItemPicker | undefined = undefined
-	let variableEditor: VariableEditor | undefined = undefined
+	let pickForField: string | undefined = $state()
+	let itemPicker: ItemPicker | undefined = $state(undefined)
+	let variableEditor: VariableEditor | undefined = $state(undefined)
 
-	let resourceTypes: string[] | undefined = undefined
+	let resourceTypes: string[] | undefined = $state(undefined)
 
 	async function loadResourceTypes() {
 		resourceTypes = await getResourceTypes()
@@ -115,8 +154,6 @@
 
 	loadResourceTypes()
 
-	$: schema && (reorder(), (hidden = {}))
-
 	function hasExtraKeys() {
 		return Object.keys(args ?? {}).some((x) => !keys.includes(x))
 	}
@@ -147,20 +184,26 @@
 				dispatch('change')
 			}
 		}
+		// let missingKeys = keys.filter((x) => args && !(x in args))
+		// console.log('missingKeys', missingKeys)
+		// missingKeys.forEach((x) => {
+		// 	if (args) {
+		// 		args[x] = undefined
+		// 	}
+		// })
 
 		if (!noDelete && hasExtraKeys()) {
 			removeExtraKey()
 		}
 	}
 
-	$: fields = items ?? keys.map((x) => ({ id: x, value: x }))
-
-	let hidden: Record<string, boolean> = {}
+	let hidden: Record<string, boolean> = $state({})
+	let fields = $derived(items ?? keys.map((x) => ({ id: x, value: x })))
 
 	function handleHiddenFields(schema: Schema | any, args: Record<string, any>) {
 		for (const x of fields) {
-			if (schema?.properties[x.value]?.showExpr) {
-				if (computeShow(x.value, schema.properties[x.value].showExpr, args)) {
+			if (schema?.properties?.[x.value]?.showExpr) {
+				if (computeShow(x.value, schema.properties?.[x.value]?.showExpr, args)) {
 					hidden[x.value] = false
 				} else if (!hidden[x.value]) {
 					hidden[x.value] = true
@@ -173,12 +216,52 @@
 		}
 	}
 
-	$: handleHiddenFields(schema, args)
+	$effect.pre(() => {
+		if (args == undefined || typeof args !== 'object') {
+			args = {}
+		}
+	})
+	$effect.pre(() => {
+		const newKeys = [
+			...new Set(
+				(Array.isArray(schema?.order)
+					? schema?.order
+					: Object.keys(schema?.properties ?? {})) as string[]
+			)
+		]
 
-	$: isValid = allTrue(inputCheck ?? {})
+		if (!deepEqual(keys, newKeys)) {
+			keys = newKeys
+		}
+	})
+	$effect.pre(() => {
+		schema && (untrack(() => reorder()), (hidden = {}))
+	})
+	$effect.pre(() => {
+		;[schema, args]
+
+		if (args && typeof args == 'object') {
+			let oneShowExpr = false
+			for (const key of fields) {
+				if (schema.properties?.[key.value]?.showExpr) {
+					oneShowExpr = true
+				}
+			}
+			if (!oneShowExpr) {
+				return
+			}
+			for (const key in args) {
+				args[key]
+			}
+		}
+		untrack(() => handleHiddenFields(schema, args ?? {}))
+	})
+	$effect.pre(() => {
+		isValid = allTrue(inputCheck ?? {})
+	})
+	const actions_render = $derived(actions)
 </script>
 
-<!-- {JSON.stringify(args)} -->
 {#if showReset}
 	<div class="flex flex-row-reverse w-full">
 		<Button size="xs" color="light" on:click={() => setDefaults()}>
@@ -188,14 +271,12 @@
 {/if}
 
 <div
-	class="w-full {$$props.class} {flexWrap
-		? 'flex flex-row flex-wrap gap-x-6 '
-		: ''} {nestedClasses}"
+	class="w-full {className} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 ' : ''} {nestedClasses}"
 	use:dragHandleZone={dndConfig ?? { items: [], dragDisabled: true }}
-	on:finalize
-	on:consider
+	onfinalize={bubble('finalize')}
+	onconsider={bubble('consider')}
 >
-	{#if keys.length > 0}
+	{#if keys.length > 0 && args}
 		{#each fields as item, i (item.id)}
 			{@const argName = item.value}
 			<div
@@ -203,7 +284,7 @@
 					? 'bg-red-300 dark:bg-red-800 rounded-md'
 					: ''}
 			>
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				{#if !hiddenArgs.includes(argName) && keys.includes(argName)}
 					{#if typeof diff[argName] === 'object' && diff[argName].oldSchema}
 						{@const formerProperty = diff[argName].oldSchema}
@@ -221,7 +302,8 @@
 								required={formerProperty?.required}
 								pattern={formerProperty?.pattern}
 								valid={inputCheck[argName]}
-								defaultValue={defaultValues?.[argName] ?? structuredClone(formerProperty?.default)}
+								defaultValue={defaultValues?.[argName] ??
+									structuredClone($state.snapshot(formerProperty?.default))}
 								enum_={dynamicEnums?.[argName] ?? formerProperty?.enum}
 								format={formerProperty?.format}
 								contentEncoding={formerProperty?.contentEncoding}
@@ -257,10 +339,10 @@
 							/>
 						</div>
 					{/if}
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						class="flex flex-row items-center {largeGap ? 'pb-4' : ''} "
-						on:click={() => {
+						onclick={() => {
 							dispatch('click', argName)
 						}}
 					>
@@ -292,7 +374,7 @@
 									pattern={schema.properties[argName].pattern}
 									bind:valid={inputCheck[argName]}
 									defaultValue={defaultValues?.[argName] ??
-										structuredClone(schema.properties[argName].default)}
+										structuredClone($state.snapshot(schema.properties[argName].default))}
 									enum_={dynamicEnums?.[argName] ?? schema.properties[argName].enum}
 									format={schema.properties[argName].format}
 									contentEncoding={schema.properties[argName].contentEncoding}
@@ -330,8 +412,8 @@
 									{css}
 									{displayType}
 								>
-									<svelte:fragment slot="actions">
-										<slot name="actions" />
+									{#snippet actions()}
+										{@render actions_render?.()}
 										{#if linkedSecretCandidates?.includes(argName)}
 											<div>
 												<ToggleButtonGroup
@@ -343,30 +425,31 @@
 															linkedSecret = undefined
 														}
 													}}
-													let:item
 												>
-													<ToggleButton
-														value="inlined"
-														size="sm"
-														label="Inlined"
-														tooltip="The value is inlined in the resource and thus has no special treatment."
-														{item}
-													/>
-													<ToggleButton
-														position="right"
-														value="secret"
-														size="sm"
-														label="Secret"
-														tooltip="The value will be stored in a newly created linked secret variable at the same path. That variable can be permissioned differently, will be treated as a secret the UI, operators will not be able to load it and every access will generate a corresponding audit log."
-														{item}
-													/>
+													{#snippet children({ item })}
+														<ToggleButton
+															value="inlined"
+															size="sm"
+															label="Inlined"
+															tooltip="The value is inlined in the resource and thus has no special treatment."
+															{item}
+														/>
+														<ToggleButton
+															position="right"
+															value="secret"
+															size="sm"
+															label="Secret"
+															tooltip="The value will be stored in a newly created linked secret variable at the same path. That variable can be permissioned differently, will be treated as a secret the UI, operators will not be able to load it and every access will generate a corresponding audit log."
+															{item}
+														/>
+													{/snippet}
 												</ToggleButtonGroup>
-											</div>{/if}</svelte:fragment
-									>
+											</div>{/if}
+									{/snippet}
 								</ArgInput>
 							{/if}
-							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
 						{/if}
 					</div>
 				{/if}
@@ -380,7 +463,7 @@
 	<ItemPicker
 		bind:this={itemPicker}
 		pickCallback={(path, _) => {
-			if (pickForField) {
+			if (pickForField && args) {
 				args[pickForField] = '$var:' + path
 			}
 		}}
@@ -394,17 +477,19 @@
 				...x
 			}))}
 	>
-		<div slot="submission">
-			<Button
-				variant="border"
-				color="blue"
-				size="sm"
-				startIcon={{ icon: Plus }}
-				on:click={() => variableEditor?.initNew?.()}
-			>
-				New variable
-			</Button>
-		</div>
+		{#snippet submission()}
+			<div>
+				<Button
+					variant="border"
+					color="blue"
+					size="sm"
+					startIcon={{ icon: Plus }}
+					on:click={() => variableEditor?.initNew?.()}
+				>
+					New variable
+				</Button>
+			</div>
+		{/snippet}
 	</ItemPicker>
 
 	<VariableEditor bind:this={variableEditor} />
diff --git a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
index 1dc44e84c7..3a4144373e 100644
--- a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
+++ b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
@@ -94,7 +94,7 @@
 <div class="h-fit">
 	<div class="relative z-[100000] w-full">
 		<div class="absolute" style="right: calc({100 - inputPanelSize}%); top: -1px;">
-			<SideBarTab expandRight={rightPanelOpen} {dropdownItems} fullMenu={true} noTrigger={true} />
+			<SideBarTab {dropdownItems} fullMenu={true} noTrigger={true} />
 		</div>
 	</div>
 	<Splitpanes class={!rightPanelOpen ? 'splitter-hidden' : ''}>
diff --git a/frontend/src/lib/components/SchemaViewer.svelte b/frontend/src/lib/components/SchemaViewer.svelte
index cd9f43d398..9492cf2cd8 100644
--- a/frontend/src/lib/components/SchemaViewer.svelte
+++ b/frontend/src/lib/components/SchemaViewer.svelte
@@ -13,7 +13,11 @@
 	import Button from './common/button/Button.svelte'
 	import { ClipboardCopy } from 'lucide-svelte'
 
-	export let schema: Schema | undefined | any = emptySchema()
+	interface Props {
+		schema?: Schema | undefined | any
+	}
+
+	let { schema = emptySchema() }: Props = $props()
 
 	function getProperties(schema: Schema) {
 		if (schema.properties) {
@@ -29,12 +33,13 @@
 	<Tabs selected="arguments">
 		<Tab value="arguments">Arguments</Tab>
 		<Tab value="advanced">Advanced</Tab>
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<div class="overflow-auto pt-2">
 				<TabContent value="arguments">
 					{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
 						<div class="flex flex-row">
 							<TableCustom>
+								<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 								<tr slot="header-row" class="underline">
 									<th>name</th>
 									<th>type</th>
@@ -43,37 +48,43 @@
 									<th>format</th>
 									<th>required</th>
 								</tr>
-								<tbody slot="body">
-									{#each getProperties(schema) as [name, property] (name)}
-										<tr>
-											<td class="font-semibold pl-1">{name}</td>
-											<td
-												><Badge color="blue"
-													>{#if !property.type} any {:else} {property.type} {/if}</Badge
-												></td
-											>
-											<td>{property.description ?? ''}</td>
-											<td
-												>{property.default == '<function call>'
-													? '<function call>'
-													: property.default
-													? JSON.stringify(property.default)
-													: ''}</td
-											>
-											<td
-												>{property.format ?? ''}
-												{property.contentEncoding
-													? `(encoding: ${property.contentEncoding})`
-													: ''}</td
-											>
-											<td
-												>{#if schema.required.includes(name)}
-													<span class="text-red-600 font-bold text-lg">*</span>
-												{/if}</td
-											>
-										</tr>
-									{/each}
-								</tbody>
+								{#snippet body()}
+									<tbody>
+										{#each getProperties(schema) as [name, property] (name)}
+											<tr>
+												<td class="font-semibold pl-1">{name}</td>
+												<td
+													><Badge color="blue"
+														>{#if !property.type}
+															any
+														{:else}
+															{property.type}
+														{/if}</Badge
+													></td
+												>
+												<td>{property.description ?? ''}</td>
+												<td
+													>{property.default == '<function call>'
+														? '<function call>'
+														: property.default
+															? JSON.stringify(property.default)
+															: ''}</td
+												>
+												<td
+													>{property.format ?? ''}
+													{property.contentEncoding
+														? `(encoding: ${property.contentEncoding})`
+														: ''}</td
+												>
+												<td
+													>{#if schema.required.includes(name)}
+														<span class="text-red-600 font-bold text-lg">*</span>
+													{/if}</td
+												>
+											</tr>
+										{/each}
+									</tbody>
+								{/snippet}
 							</TableCustom>
 						</div>
 					{:else}
@@ -96,6 +107,6 @@
 					</div>
 				</TabContent>
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</Tabs>
 </div>
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 5f1da5267c..f3320126dd 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import {
 		DraftService,
 		type NewScript,
@@ -7,10 +10,12 @@
 		type Script,
 		type TriggersCount,
 		PostgresTriggerService,
-		CaptureService
+		CaptureService,
+		type ScriptLang
 	} from '$lib/gen'
 	import { inferArgs } from '$lib/infer'
 	import { initialCode } from '$lib/script_helpers'
+	import AIFormSettings from './copilot/AIFormSettings.svelte'
 	import {
 		defaultScripts,
 		enterpriseLicense,
@@ -67,7 +72,7 @@
 	import { writable } from 'svelte/store'
 	import { defaultScriptLanguages, processLangs } from '$lib/scripts'
 	import DefaultScripts from './DefaultScripts.svelte'
-	import { createEventDispatcher, onMount, setContext } from 'svelte'
+	import { createEventDispatcher, onMount, setContext, untrack } from 'svelte'
 	import Summary from './Summary.svelte'
 	import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui'
 	import DeployOverrideConfirmationModal from '$lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte'
@@ -93,24 +98,45 @@
 	import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte'
 	import { Triggers } from './triggers/triggers.svelte'
 
-	export let script: NewScript & { draft_triggers?: Trigger[] }
-	export let fullyLoaded: boolean = true
-	export let initialPath: string = ''
-	export let template: 'docker' | 'bunnative' | 'script' = 'script'
-	export let initialArgs: Record<string, any> = {}
-	export let lockedLanguage = false
-	export let showMeta: boolean = false
-	export let neverShowMeta: boolean = false
-	export let diffDrawer: DiffDrawer | undefined = undefined
-	export let savedScript: NewScriptWithDraftAndDraftTriggers | undefined = undefined
-	export let searchParams: URLSearchParams = new URLSearchParams()
-	export let disableHistoryChange = false
-	export let replaceStateFn: (url: string) => void = (url) =>
-		window.history.replaceState(null, '', url)
-	export let customUi: ScriptBuilderWhitelabelCustomUi = {}
-	export let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
-	export let functionExports: ((exports: ScriptBuilderFunctionExports) => void) | undefined =
-		undefined
+	interface Props {
+		script: NewScript & { draft_triggers?: Trigger[] }
+		fullyLoaded?: boolean
+		initialPath?: string
+		template?: 'docker' | 'bunnative' | 'script'
+		initialArgs?: Record<string, any>
+		lockedLanguage?: boolean
+		showMeta?: boolean
+		neverShowMeta?: boolean
+		diffDrawer?: DiffDrawer | undefined
+		savedScript?: NewScriptWithDraftAndDraftTriggers | undefined
+		searchParams?: URLSearchParams
+		disableHistoryChange?: boolean
+		replaceStateFn?: (url: string) => void
+		customUi?: ScriptBuilderWhitelabelCustomUi
+		savedPrimarySchedule?: ScheduleTrigger | undefined
+		functionExports?: ((exports: ScriptBuilderFunctionExports) => void) | undefined
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		script = $bindable(),
+		fullyLoaded = true,
+		initialPath = $bindable(''),
+		template = $bindable('script'),
+		initialArgs = {},
+		lockedLanguage = false,
+		showMeta = false,
+		neverShowMeta = false,
+		diffDrawer = undefined,
+		savedScript = $bindable(undefined),
+		searchParams = new URLSearchParams(),
+		disableHistoryChange = false,
+		replaceStateFn = (url) => window.history.replaceState(null, '', url),
+		customUi = {},
+		savedPrimarySchedule = undefined,
+		functionExports = undefined,
+		children
+	}: Props = $props()
 
 	export function getInitialAndModifiedValues(): SavedAndModifiedValue {
 		return {
@@ -125,33 +151,35 @@
 	// used for new scripts for captures
 	const fakeInitialPath =
 		'u/' +
-		($userStore!.username?.includes('@')
-			? $userStore!.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '')
-			: $userStore!.username!) +
+		($userStore?.username?.includes('@')
+			? $userStore?.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '')
+			: $userStore?.username!) +
 		'/' +
 		generateRandomString(12)
 
-	let deployedValue: Value | undefined = undefined // Value to diff against
-	let deployedBy: string | undefined = undefined // Author
-	let confirmCallback: () => void = () => {} // What happens when user clicks `override` in warning
-	let open: boolean = false // Is confirmation modal open
-	let args: Record<string, any> = initialArgs // Test args input
-	let selectedInputTab: 'main' | 'preprocessor' = 'main'
-	let hasPreprocessor = false
+	let deployedValue: Value | undefined = $state(undefined) // Value to diff against
+	let deployedBy: string | undefined = $state(undefined) // Author
+	let confirmCallback: () => void = $state(() => {}) // What happens when user clicks `override` in warning
+	let open: boolean = $state(false) // Is confirmation modal open
+	let args: Record<string, any> = $state(initialArgs) // Test args input
+	let selectedInputTab: 'main' | 'preprocessor' = $state('main')
+	let hasPreprocessor = $state(false)
 
-	let metadataOpen =
+	let metadataOpen = $state(
 		!neverShowMeta &&
-		(showMeta ||
-			(initialPath == '' &&
-				searchParams.get('state') == undefined &&
-				searchParams.get('collab') == undefined))
+			(showMeta ||
+				searchParams.get('metadata_open') == 'true' ||
+				(initialPath == '' &&
+					searchParams.get('state') == undefined &&
+					searchParams.get('collab') == undefined))
+	)
 
-	let editor: Editor | undefined = undefined
-	let scriptEditor: ScriptEditor | undefined = undefined
-	let captureTable: CaptureTable | undefined = undefined
+	let editor: Editor | undefined = $state(undefined)
+	let scriptEditor: ScriptEditor | undefined = $state(undefined)
+	let captureTable: CaptureTable | undefined = $state(undefined)
 
 	// Draft triggers confirmation modal
-	let draftTriggersModalOpen = false
+	let draftTriggersModalOpen = $state(false)
 	let confirmDeploymentCallback: (triggersToDeploy: Trigger[]) => void = () => {}
 
 	async function handleDraftTriggersConfirmed(event: CustomEvent<{ selectedTriggers: Trigger[] }>) {
@@ -184,8 +212,6 @@
 
 	const dispatch = createEventDispatcher()
 
-	$: initialPath != '' && loadTriggers()
-
 	onMount(() => {
 		if (functionExports) {
 			console.log('functionExports set')
@@ -206,6 +232,9 @@
 	})
 
 	async function loadTriggers() {
+		if (!initialPath) {
+			return
+		}
 		$triggersCount = await ScriptService.getTriggersCountOfScript({
 			workspace: $workspaceStore!,
 			path: initialPath
@@ -229,14 +258,16 @@
 	}
 
 	// Add triggers context store
-	const triggersState = new Triggers(
-		[
-			{ type: 'webhook', path: '', isDraft: false },
-			{ type: 'email', path: '', isDraft: false },
-			...(script.draft_triggers ?? [])
-		],
-		undefined,
-		saveSessionDraft
+	const triggersState = $state(
+		new Triggers(
+			[
+				{ type: 'webhook', path: '', isDraft: false },
+				{ type: 'email', path: '', isDraft: false },
+				...(script.draft_triggers ?? [])
+			],
+			undefined,
+			saveSessionDraft
+		)
 	)
 
 	const captureOn = writable<boolean | undefined>(undefined)
@@ -254,19 +285,6 @@
 		editor?.setCode(code)
 	}
 
-	$: langs = processLangs(
-		script.language,
-		$defaultScripts?.order ?? Object.keys(defaultScriptLanguages)
-	)
-		.map((l) => [defaultScriptLanguages[l], l])
-		.filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1]))
-		.filter((x) => {
-			if (customUi?.settingsPanel?.metadata?.languages === undefined) {
-				return true
-			}
-			return customUi.settingsPanel.metadata.languages.includes(x[1] as SupportedLanguage)
-		}) as [string, SupportedLanguage | 'docker' | 'bunnative'][]
-
 	const scriptKindOptions: {
 		value: Script['kind']
 		title: string
@@ -309,19 +327,9 @@
 		}
 	]
 
-	let pathError = ''
-	let loadingSave = false
-	let loadingDraft = false
-
-	$: {
-		;['collab', 'path'].forEach((x) => {
-			if (searchParams.get(x)) {
-				searchParams.delete(x)
-			}
-		})
-	}
-
-	$: !disableHistoryChange && encodeScriptState(script)
+	let pathError = $state('')
+	let loadingSave = $state(false)
+	let loadingDraft = $state(false)
 
 	function encodeScriptState(script: NewScript) {
 		replaceStateFn(
@@ -554,8 +562,8 @@
 				)
 			}
 
-			const { draft_triggers: _, ...newScript } = structuredClone(script)
-			savedScript = structuredClone(newScript) as NewScriptWithDraft
+			const { draft_triggers: _, ...newScript } = structuredClone($state.snapshot(script))
+			savedScript = structuredClone($state.snapshot(newScript)) as NewScriptWithDraft
 			setDraftTriggers([])
 
 			if (!disableHistoryChange) {
@@ -686,12 +694,13 @@
 				}
 			})
 
+			const clonedScript = structuredClone($state.snapshot(script))
 			savedScript = {
 				...(initialPath == '' || savedScript?.draft_only
-					? { ...structuredClone(script), draft_only: true }
+					? { ...clonedScript, draft_only: true }
 					: savedScript),
 				draft: {
-					...structuredClone(script),
+					...clonedScript,
 					draft_triggers: draftTriggers
 				}
 			} as NewScriptWithDraftAndDraftTriggers
@@ -790,25 +799,27 @@
 		}
 	}
 
-	let path: Path | undefined = undefined
-	let dirtyPath = false
+	let path: Path | undefined = $state(undefined)
+	let dirtyPath = $state(false)
 
-	let selectedTab: 'metadata' | 'runtime' | 'ui' | 'triggers' = (() => {
-		if (customUi?.settingsPanel?.disableMetadata !== true) {
-			// first option: either no custom UI or metadata is enabled
+	let selectedTab: 'metadata' | 'runtime' | 'ui' | 'triggers' = $state(
+		(() => {
+			if (customUi?.settingsPanel?.disableMetadata !== true) {
+				// first option: either no custom UI or metadata is enabled
+				return 'metadata'
+			}
+			if (customUi?.settingsPanel?.disableRuntime !== true) {
+				return 'runtime'
+			}
+			if (customUi?.settingsPanel?.disableGeneratedUi !== true) {
+				return 'ui'
+			}
+			if (customUi?.settingsPanel?.disableTriggers !== true) {
+				return 'triggers'
+			}
 			return 'metadata'
-		}
-		if (customUi?.settingsPanel?.disableRuntime !== true) {
-			return 'runtime'
-		}
-		if (customUi?.settingsPanel?.disableGeneratedUi !== true) {
-			return 'ui'
-		}
-		if (customUi?.settingsPanel?.disableTriggers !== true) {
-			return 'triggers'
-		}
-		return 'metadata'
-	})()
+		})()
+	)
 
 	setContext('disableTooltips', customUi?.disableTooltips === true)
 
@@ -869,10 +880,75 @@
 				newSavedDraftTrigers.length > 0 ? newSavedDraftTrigers : undefined
 		}
 	}
+
+	function onScriptLanguageTrigger(lang: 'docker' | 'bunnative' | ScriptLang) {
+		if (lang == 'docker') {
+			if (isCloudHosted()) {
+				sendUserToast(
+					'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+					true,
+					[
+						{
+							label: 'Learn more',
+							callback: () => {
+								window.open('https://www.windmill.dev/docs/advanced/docker', '_blank')
+							}
+						}
+					]
+				)
+				return
+			}
+			template = 'docker'
+		} else if (lang == 'bunnative') {
+			template = 'bunnative'
+		} else {
+			template = 'script'
+		}
+		let language = langToLanguage(lang)
+		//
+		initContent(language, script.kind, template)
+		script.language = language
+	}
+
+	function onSummaryChange(value: string) {
+		if (initialPath == '' && value?.length > 0 && !dirtyPath) {
+			path?.setName(
+				value
+					.toLowerCase()
+					.replace(/[^a-z0-9_]/g, '_')
+					.replace(/-+/g, '_')
+					.replace(/^-|-$/g, '')
+			)
+		}
+	}
+	$effect(() => {
+		initialPath != '' && untrack(() => loadTriggers())
+	})
+	let langs = $derived(
+		processLangs(script.language, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
+			.map((l) => [defaultScriptLanguages[l], l])
+			.filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1]))
+			.filter((x) => {
+				if (customUi?.settingsPanel?.metadata?.languages === undefined) {
+					return true
+				}
+				return customUi.settingsPanel.metadata.languages.includes(x[1] as SupportedLanguage)
+			}) as [string, SupportedLanguage | 'docker' | 'bunnative'][]
+	)
+	$effect(() => {
+		;['collab', 'path'].forEach((x) => {
+			if (searchParams.get(x)) {
+				searchParams.delete(x)
+			}
+		})
+	})
+	$effect(() => {
+		!disableHistoryChange && untrack(() => encodeScriptState(script))
+	})
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-<slot />
+<svelte:window onkeydown={onKeyDown} />
+{@render children?.()}
 
 <DeployOverrideConfirmationModal
 	bind:deployedBy
@@ -898,18 +974,28 @@
 		bind:open={metadataOpen}
 		size={selectedTab === 'ui' || selectedTab === 'triggers' ? '1200px' : '800px'}
 	>
-		<DrawerContent noPadding title="Settings" on:close={() => (metadataOpen = false)}>
-			<!-- svelte-ignore a11y-autofocus -->
+		<DrawerContent
+			noPadding
+			title="Settings"
+			on:close={() => (metadataOpen = false)}
+			aiId="script-builder-settings"
+			aiDescription="Script builder settings"
+		>
+			<!-- svelte-ignore a11y_autofocus -->
 			<div class="flex flex-col h-full">
 				<Tabs bind:selected={selectedTab} wrapperClass="flex-none w-full">
 					{#if customUi?.settingsPanel?.disableMetadata !== true}
-						<Tab value="metadata">Metadata</Tab>
+						<Tab value="metadata" aiId="script-builder-metadata" aiDescription="Metadata settings">
+							Metadata
+						</Tab>
 					{/if}
 					{#if customUi?.settingsPanel?.disableRuntime !== true}
-						<Tab value="runtime">Runtime</Tab>
+						<Tab value="runtime" aiId="script-builder-runtime" aiDescription="Runtime settings">
+							Runtime
+						</Tab>
 					{/if}
 					{#if customUi?.settingsPanel?.disableGeneratedUi !== true}
-						<Tab value="ui">
+						<Tab value="ui" aiId="script-builder-ui" aiDescription="Generated UI settings">
 							Generated UI
 							<Tooltip
 								documentationLink="https://www.windmill.dev/docs/core_concepts/json_schema_and_parsing"
@@ -920,7 +1006,7 @@
 						</Tab>
 					{/if}
 					{#if customUi?.settingsPanel?.disableTriggers !== true}
-						<Tab value="triggers">
+						<Tab value="triggers" aiId="script-builder-triggers" aiDescription="Triggers settings">
 							Triggers
 							<Tooltip documentationLink="https://www.windmill.dev/docs/getting_started/triggers">
 								Configure how this script will be triggered.
@@ -928,12 +1014,12 @@
 						</Tab>
 					{/if}
 
-					<svelte:fragment slot="content">
+					{#snippet content()}
 						<div class="min-h-0 grow overflow-y-auto">
 							<TabContent value="metadata">
 								<div class="flex flex-col gap-8 px-4 py-2">
 									<Section label="Metadata">
-										<svelte:fragment slot="action">
+										{#snippet action()}
 											{#if customUi?.settingsPanel?.metadata?.disableMute !== true}
 												<div class="flex flex-row items-center gap-2">
 													<ErrorHandlerToggleButton
@@ -944,27 +1030,19 @@
 													/>
 												</div>
 											{/if}
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex flex-col gap-4">
 											<Label label="Summary">
 												<MetadataGen
+													aiId="create-script-summary-input"
+													aiDescription="Summary / Title of the new script"
 													label="Summary"
 													bind:content={script.summary}
 													lang={script.language}
 													code={script.content}
 													promptConfigName="summary"
 													generateOnAppear
-													on:change={() => {
-														if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) {
-															path?.setName(
-																script.summary
-																	.toLowerCase()
-																	.replace(/[^a-z0-9_]/g, '_')
-																	.replace(/-+/g, '_')
-																	.replace(/^-|-$/g, '')
-															)
-														}
-													}}
+													on:change={() => onSummaryChange(script.summary)}
 													elementProps={{
 														type: 'text',
 														placeholder: 'Short summary to be displayed when listed'
@@ -972,14 +1050,14 @@
 												/>
 											</Label>
 											<Label label="Path">
-												<svelte:fragment slot="header">
+												{#snippet header()}
 													<Tooltip
 														documentationLink="https://www.windmill.dev/docs/core_concepts/roles_and_permissions#path"
 													>
 														The unique identifier of the script in the workspace that defines
 														permissions
 													</Tooltip>
-												</svelte:fragment>
+												{/snippet}
 												<Path
 													bind:this={path}
 													bind:error={pathError}
@@ -1003,11 +1081,21 @@
 													}}
 												/>
 											</Label>
+											{#if script.schema}
+												<div class="mt-3">
+													<AIFormSettings
+														bind:prompt={script.schema.prompt_for_ai as string | undefined}
+														type="script"
+													/>
+												</div>
+											{/if}
 										</div>
 									</Section>
 
 									<Section label="Language">
-										<svelte:fragment slot="action"><DefaultScripts /></svelte:fragment>
+										{#snippet action()}
+											<DefaultScripts />
+										{/snippet}
 										{#if lockedLanguage}
 											<div class="text-sm text-tertiary italic mb-2">
 												As a forked script, the language '{script.language}' cannot be modified.
@@ -1023,43 +1111,15 @@
 													disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}
 												>
 													<Button
+														aiId={`create-script-language-button-${lang}`}
+														aiDescription={`Choose ${lang} as the language of the script`}
 														size="sm"
 														variant="border"
 														color={isPicked ? 'blue' : 'light'}
 														btnClasses={isPicked
 															? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
 															: 'm-[1px]'}
-														on:click={() => {
-															if (lang == 'docker') {
-																if (isCloudHosted()) {
-																	sendUserToast(
-																		'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
-																		true,
-																		[
-																			{
-																				label: 'Learn more',
-																				callback: () => {
-																					window.open(
-																						'https://www.windmill.dev/docs/advanced/docker',
-																						'_blank'
-																					)
-																				}
-																			}
-																		]
-																	)
-																	return
-																}
-																template = 'docker'
-															} else if (lang == 'bunnative') {
-																template = 'bunnative'
-															} else {
-																template = 'script'
-															}
-															let language = langToLanguage(lang)
-															//
-															initContent(language, script.kind, template)
-															script.language = language
-														}}
+														on:click={() => onScriptLanguageTrigger(lang)}
 														disabled={lockedLanguage ||
 															(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
 													>
@@ -1069,9 +1129,9 @@
 															<span class="text-tertiary !text-xs"> BETA </span>
 														{/if}
 													</Button>
-													<svelte:fragment slot="text"
-														>{label} is only available with an enterprise license</svelte:fragment
-													>
+													{#snippet text()}
+														{label} is only available with an enterprise license
+													{/snippet}
 												</Popover>
 											{/each}
 										</div>
@@ -1079,14 +1139,14 @@
 
 									{#if customUi?.settingsPanel?.metadata?.disableScriptKind !== true}
 										<Section label="Script kind">
-											<svelte:fragment slot="header">
+											{#snippet header()}
 												<Tooltip
 													documentationLink="https://www.windmill.dev/docs/script_editor/script_kinds"
 												>
 													Tag this script's purpose within flows such that it is available as the
 													corresponding action.
 												</Tooltip>
-											</svelte:fragment>
+											{/snippet}
 											<ToggleButtonGroup
 												class="h-10"
 												selected={script.kind}
@@ -1095,19 +1155,20 @@
 													script.kind = detail
 													initContent(script.language, detail, template)
 												}}
-												let:item
 											>
-												{#each scriptKindOptions as { value, title, desc, documentationLink, Icon }}
-													<ToggleButton
-														label={title}
-														{value}
-														tooltip={desc}
-														{documentationLink}
-														icon={Icon}
-														showTooltipIcon={Boolean(desc)}
-														{item}
-													/>
-												{/each}
+												{#snippet children({ item })}
+													{#each scriptKindOptions as { value, title, desc, documentationLink, Icon }}
+														<ToggleButton
+															label={title}
+															{value}
+															tooltip={desc}
+															{documentationLink}
+															icon={Icon}
+															showTooltipIcon={Boolean(desc)}
+															{item}
+														/>
+													{/each}
+												{/snippet}
 											</ToggleButtonGroup>
 										</Section>
 									{/if}
@@ -1116,13 +1177,13 @@
 							<TabContent value="runtime">
 								<div class="flex flex-col gap-8 px-4 py-2">
 									<Section label="Concurrency limits" eeOnly>
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/concurrency_limits"
 											>
 												Allowed concurrency within a given timeframe
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex flex-col gap-4">
 											<Label label="Max number of executions within the time window">
 												<div class="flex flex-row gap-2 max-w-sm">
@@ -1150,7 +1211,7 @@
 												/>
 											</Label>
 											<Label label="Custom concurrency key (optional)">
-												<svelte:fragment slot="header">
+												{#snippet header()}
 													<Tooltip
 														documentationLink="https://www.windmill.dev/docs/core_concepts/concurrency_limits#custom-concurrency-key"
 													>
@@ -1158,7 +1219,7 @@
 														using the variable `$workspace`. You can also use an argument's value
 														using `$args[name_of_arg]`</Tooltip
 													>
-												</svelte:fragment>
+												{/snippet}
 												<input
 													disabled={!$enterpriseLicense}
 													type="text"
@@ -1170,24 +1231,24 @@
 										</div>
 									</Section>
 									<Section label="Worker group tag (queue)">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups"
 											>
 												The script will be executed on a worker configured to listen to this worker
 												group tag (queue). For instance, you could setup an "highmem", or "gpu" tag.
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<WorkerTagPicker bind:tag={script.tag} />
 									</Section>
 									<Section label="Cache">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/caching"
 											>
 												Cache the results for each possible inputs
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1214,13 +1275,13 @@
 										</div>
 									</Section>
 									<Section label="Timeout">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/script_editor/settings#timeout"
 											>
 												Add a custom timeout for this script
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1245,13 +1306,13 @@
 										</div>
 									</Section>
 									<Section label="Perpetual script">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/script_editor/perpetual_scripts"
 											>
 												Restart the script upon ending unless cancelled
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1297,7 +1358,7 @@
 												</Alert>
 											</div>
 										{/if}
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/dedicated_workers"
 											>
@@ -1307,10 +1368,10 @@
 												languages, the efficiency is already on par with deidcated workers since
 												they do not spawn a full runtime</Tooltip
 											>
-										</svelte:fragment>
+										{/snippet}
 									</Section>
 									<Section label="Delete after use">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/script_editor/settings#delete-after-use"
 											>
@@ -1330,7 +1391,7 @@
 													This option is only available on Windmill Enterprise Edition.
 												{/if}
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												disabled={!$enterpriseLicense}
@@ -1366,14 +1427,14 @@
 													right: 'Label as high priority'
 												}}
 											>
-												<svelte:fragment slot="right">
+												{#snippet right()}
 													<input
 														type="number"
 														class="!w-16 ml-4"
 														disabled={script.priority === undefined}
 														bind:value={script.priority}
-														on:focus
-														on:change={() => {
+														onfocus={bubble('focus')}
+														onchange={() => {
 															if (script.priority && script.priority > 100) {
 																script.priority = 100
 															} else if (script.priority && script.priority < 0) {
@@ -1381,9 +1442,9 @@
 															}
 														}}
 													/>
-												</svelte:fragment>
+												{/snippet}
 											</Toggle>
-											<svelte:fragment slot="header">
+											{#snippet header()}
 												<!-- TODO: Add EE-only badge when we have it -->
 												<Tooltip
 													documentationLink="https://www.windmill.dev/docs/core_concepts/jobs#high-priority-jobs"
@@ -1393,11 +1454,11 @@
 													{#if !$enterpriseLicense}This is a feature only available on enterprise
 														edition.{/if}
 												</Tooltip>
-											</svelte:fragment>
+											{/snippet}
 										</Section>
 									{/if}
 									<Section label="Runs visibility">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#invisible-runs"
 											>
@@ -1406,7 +1467,7 @@
 												setting can be overridden when this script is run manually from the advanced
 												menu.
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1425,12 +1486,12 @@
 										</div>
 									</Section>
 									<Section label="On behalf of last editor">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip>
 												When this option is enabled, the script will be run with the permissions of
 												the last editor.
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
 											<Toggle
 												size="sm"
@@ -1450,13 +1511,13 @@
 									</Section>
 									{#if !isCloudHosted()}
 										<Section label="Custom env variables">
-											<svelte:fragment slot="header">
+											{#snippet header()}
 												<Tooltip
 													documentationLink="https://www.windmill.dev/docs/script_editor/custom_environment_variables"
 												>
 													Additional static custom env variables to pass to the script.
 												</Tooltip>
-											</svelte:fragment>
+											{/snippet}
 											{#if script.envs && script.envs.length > 0}
 												<Alert type="warning" title="Not passed in previews" size="xs">
 													Static envs variables are not passed in preview but solely on deployed
@@ -1468,14 +1529,20 @@
 													>Format is: `{'<KEY>=<VALUE>'}`</span
 												>
 												{#if Array.isArray(script.envs ?? [])}
-													{#each script.envs ?? [] as v, i}
+													{#each script.envs ?? [] as _v, i}
 														<div class="flex max-w-md mt-1 w-full items-center relative">
-															<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
+															{#if script.envs}
+																<input
+																	type="text"
+																	bind:value={script.envs[i]}
+																	placeholder="<KEY>=<VALUE>"
+																/>
+															{/if}
 															<button
 																transition:fade|local={{ duration: 50 }}
 																class="rounded-full p-1 bg-surface/60 duration-200 hover:bg-gray-200 absolute right-2"
 																aria-label="Clear"
-																on:click={() => {
+																onclick={() => {
 																	script.envs && script.envs.splice(i, 1)
 																	script.envs = script.envs
 																}}
@@ -1541,7 +1608,7 @@
 								<!-- <ScriptSchedules {initialPath} schema={script.schema} schedule={scheduleStore} /> -->
 							</TabContent>
 						</div>
-					</svelte:fragment>
+					{/snippet}
 				</Tabs>
 			</div>
 		</DrawerContent>
@@ -1554,7 +1621,7 @@
 					<div class="center-center">
 						<button
 							disabled={customUi?.topBar?.settings == false}
-							on:click={async () => {
+							onclick={async () => {
 								metadataOpen = true
 							}}
 						>
@@ -1594,7 +1661,7 @@
 							<div>
 								{#if customUi?.topBar?.editablePath != false}
 									<button
-										on:click={async () => {
+										onclick={async () => {
 											metadataOpen = true
 										}}
 									>
@@ -1613,7 +1680,7 @@
 								value={script.path}
 								size={script.path?.length || 50}
 								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
-								on:focus={({ currentTarget }) => {
+								onfocus={({ currentTarget }) => {
 									currentTarget.select()
 								}}
 							/>
@@ -1628,6 +1695,8 @@
 				<div class="flex flex-row gap-x-1 lg:gap-x-2">
 					{#if customUi?.topBar?.settings != false}
 						<Button
+							aiId="script-builder-settings"
+							aiDescription="Script builder settings to configure metadata, runtime, triggers, and generated UI."
 							color="light"
 							variant="border"
 							size="xs"
@@ -1684,7 +1753,6 @@
 			stablePathForCaptures={initialPath || fakeInitialPath}
 			bind:code={script.content}
 			lang={script.language}
-			{initialArgs}
 			kind={script.kind}
 			{template}
 			tag={script.tag}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 0ead505cfc..aaf865f6ef 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -2,7 +2,7 @@
 	import { BROWSER } from 'esm-env'
 
 	import type { Schema, SupportedLanguage } from '$lib/common'
-	import { type CompletedJob, type Job, JobService, type Preview } from '$lib/gen'
+	import { type CompletedJob, type Job, JobService, type Preview, type ScriptLang } from '$lib/gen'
 	import { copilotInfo, enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
 	import { copyToClipboard, emptySchema, sendUserToast } from '$lib/utils'
 	import Editor from './Editor.svelte'
@@ -13,7 +13,7 @@
 	import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte'
 	import TestJobLoader from './TestJobLoader.svelte'
 	import JobProgressBar from '$lib/components/jobs/JobProgressBar.svelte'
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+	import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte'
 	import { Button } from './common'
 	import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte'
 	import WindmillIcon from './icons/WindmillIcon.svelte'
@@ -38,79 +38,119 @@
 	import { slide } from 'svelte/transition'
 	import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
 	import CaptureButton from './triggers/CaptureButton.svelte'
-	import AIChat from './copilot/chat/AIChat.svelte'
 	import { setContext } from 'svelte'
 	import HideButton from './apps/editor/settingsPanel/HideButton.svelte'
 	import { base } from '$lib/base'
-	import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/core'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+	import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/script/core'
+	import { getStringError } from './copilot/chat/utils'
+	import type { ScriptOptions } from './copilot/chat/ContextManager.svelte'
+	import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte'
+	import TriggerableByAI from './TriggerableByAI.svelte'
 
-	// Exported
-	export let schema: Schema | any = emptySchema()
-	export let code: string
-	export let path: string | undefined
-	export let lang: Preview['language']
-	export let kind: string | undefined = undefined
-	export let template: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative' =
-		'script'
-	export let tag: string | undefined
-	export let initialArgs: Record<string, any> = {}
-	export let fixedOverflowWidgets = true
-	export let noSyncFromGithub = false
-	export let editor: Editor | undefined = undefined
-	export let diffEditor: DiffEditor | undefined = undefined
-	export let collabMode = false
-	export let edit = true
-	export let noHistory = false
-	export let saveToWorkspace = false
-	export let watchChanges = false
-	export let customUi: ScriptEditorWhitelabelCustomUi | undefined = undefined
-	export let args: Record<string, any> = initialArgs
-	export let selectedTab: 'main' | 'preprocessor' = 'main'
-	export let hasPreprocessor = false
-	export let captureTable: CaptureTable | undefined = undefined
-	export let showCaptures: boolean = true
-	export let stablePathForCaptures: string = ''
-	export let lastSavedCode: string | undefined = undefined
-	export let lastDeployedCode: string | undefined = undefined
+	interface Props {
+		// Exported
+		schema?: Schema | any
+		code: string
+		path: string | undefined
+		lang: Preview['language']
+		kind?: string | undefined
+		template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative'
+		tag: string | undefined
+		initialArgs?: Record<string, any>
+		fixedOverflowWidgets?: boolean
+		noSyncFromGithub?: boolean
+		editor?: Editor | undefined
+		diffEditor?: DiffEditor | undefined
+		collabMode?: boolean
+		edit?: boolean
+		noHistory?: boolean
+		saveToWorkspace?: boolean
+		watchChanges?: boolean
+		customUi?: ScriptEditorWhitelabelCustomUi | undefined
+		args: Record<string, any>
+		selectedTab?: 'main' | 'preprocessor'
+		hasPreprocessor?: boolean
+		captureTable?: CaptureTable | undefined
+		showCaptures?: boolean
+		stablePathForCaptures?: string
+		lastSavedCode?: string | undefined
+		lastDeployedCode?: string | undefined
+		editor_bar_right?: import('svelte').Snippet
+	}
 
-	let showHistoryDrawer = false
+	let {
+		schema = $bindable(),
+		code = $bindable(),
+		path,
+		lang,
+		kind = undefined,
+		template = 'script',
+		tag,
+		fixedOverflowWidgets = true,
+		noSyncFromGithub = false,
+		editor = $bindable(undefined),
+		diffEditor = $bindable(undefined),
+		collabMode = false,
+		edit = true,
+		noHistory = false,
+		saveToWorkspace = false,
+		watchChanges = false,
+		customUi = undefined,
+		args = $bindable(),
+		selectedTab = $bindable('main'),
+		hasPreprocessor = $bindable(false),
+		captureTable = $bindable(undefined),
+		showCaptures = true,
+		stablePathForCaptures = '',
+		lastSavedCode = undefined,
+		lastDeployedCode = undefined,
+		editor_bar_right
+	}: Props = $props()
 
-	let jobProgressReset: () => void
-	let diffMode = false
+	$effect.pre(() => {
+		if (schema == undefined) {
+			schema = emptySchema()
+		}
+	})
+	let showHistoryDrawer = $state(false)
 
-	let websocketAlive = {
+	let jobProgressReset: (() => void) | undefined = $state(undefined)
+	let diffMode = $state(false)
+
+	let websocketAlive = $state({
 		pyright: false,
 		deno: false,
 		go: false,
 		ruff: false,
 		shellcheck: false
-	}
+	})
 
 	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
-	$: watchChanges &&
-		(code != undefined || schema != undefined) &&
-		dispatchIfMounted('change', { code, schema })
+	$effect(() => {
+		watchChanges &&
+			(code != undefined || schema != undefined) &&
+			dispatch('change', { code, schema })
+	})
 
-	let width = 1200
+	let width = $state(1200)
 
-	let testJobLoader: TestJobLoader
+	let testJobLoader: TestJobLoader | undefined = $state(undefined)
 
-	let isValid: boolean = true
-	let scriptProgress = undefined
+	let isValid: boolean = $state(true)
+	let scriptProgress = $state(undefined)
 
+	let logPanel: LogPanel | undefined = $state(undefined)
 	// Test
-	let testIsLoading = false
-	let testJob: Job | undefined
-	let pastPreviews: CompletedJob[] = []
-	let validCode = true
+	let testIsLoading = $state(false)
+	let testJob: Job | undefined = $state()
+	let pastPreviews: CompletedJob[] = $state([])
+	let validCode = $state(true)
 
-	let wsProvider: WebsocketProvider | undefined = undefined
-	let yContent: Y.Text | undefined = undefined
-	let peers: { name: string }[] = []
-	let showCollabPopup = false
+	let wsProvider: WebsocketProvider | undefined = $state(undefined)
+	let yContent: Y.Text | undefined = $state(undefined)
+	let peers: { name: string }[] = $state([])
+	let showCollabPopup = $state(false)
 
 	const url = new URL(window.location.toString())
 	let initialCollab = /true|1/i.test(url.searchParams.get('collab') ?? '0')
@@ -126,9 +166,6 @@
 		if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
 			event.preventDefault()
 			runTest()
-		} else if ((event.ctrlKey || event.metaKey) && event.key == 'l') {
-			event.preventDefault()
-			toggleAiPanel()
 		} else if ((event.ctrlKey || event.metaKey) && event.key == 'u') {
 			event.preventDefault()
 			toggleTestPanel()
@@ -148,11 +185,11 @@
 			code,
 			lang,
 			selectedTab === 'preprocessor' || kind === 'preprocessor'
-				? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args }
-				: args,
+				? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...(args ?? {}) }
+				: (args ?? {}),
 			tag
 		)
-		setFocusToLogs()
+		logPanel?.setFocusToLogs()
 		return job
 	}
 
@@ -202,6 +239,7 @@
 	onMount(() => {
 		inferSchema(code)
 		loadPastTests()
+		aiChatManager.changeMode(AIMode.SCRIPT)
 	})
 
 	setLicense()
@@ -275,6 +313,10 @@
 
 	onDestroy(() => {
 		disableCollaboration()
+		aiChatManager.scriptEditorApplyCode = undefined
+		aiChatManager.scriptEditorShowDiffMode = undefined
+		aiChatManager.scriptEditorOptions = undefined
+		aiChatManager.changeMode(AIMode.NAVIGATOR)
 	})
 
 	function asKind(str: string | undefined) {
@@ -287,11 +329,15 @@
 		return `${url}?collab=1` + (edit ? '' : `&path=${path}`)
 	}
 
-	$: showTabs = hasPreprocessor
-	$: !hasPreprocessor && (selectedTab = 'main')
-	$: selectedTab && inferSchema(code)
+	let showTabs = $derived(hasPreprocessor)
+	$effect(() => {
+		!hasPreprocessor && (selectedTab = 'main')
+	})
+	$effect(() => {
+		selectedTab && code && untrack(() => inferSchema(code))
+	})
 
-	let argsRender = 0
+	let argsRender = $state(0)
 	export async function updateArgs(newArgs: Record<string, any>) {
 		if (Object.keys(newArgs).length > 0) {
 			args = { ...newArgs }
@@ -299,45 +345,11 @@
 		}
 	}
 
-	let setFocusToLogs = () => {}
-
 	setContext('disableTooltips', customUi?.disableTooltips === true)
 
-	let aiPanelSize =
-		!$copilotInfo.enabled ||
-		!SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '') ||
-		localStorage.getItem('aiPanelOpen') === 'false'
-			? 0
-			: 30
-	let codePanelSize = 40 + (30 - aiPanelSize)
-	let storedAiPanelSize = aiPanelSize > 0 ? aiPanelSize : 30
-	let testPanelSize = 30
-	let storedTestPanelSize = testPanelSize
-
-	function toggleAiPanel() {
-		if (!$copilotInfo.enabled) return
-		if (aiPanelSize > 0) {
-			storedAiPanelSize = aiPanelSize
-			codePanelSize += aiPanelSize
-			aiPanelSize = 0
-			localStorage.setItem('aiPanelOpen', 'false')
-		} else {
-			codePanelSize -= storedAiPanelSize
-			aiPanelSize = storedAiPanelSize
-			localStorage.setItem('aiPanelOpen', 'true')
-		}
-	}
-
-	function addSelectedLinesToAiChat(
-		e: CustomEvent<{ lines: string; startLine: number; endLine: number }>
-	) {
-		if (aiChat) {
-			aiChat.addSelectedLinesToContext(e.detail.lines, e.detail.startLine, e.detail.endLine)
-			aiChat.focusTextArea()
-		}
-	}
-
-	$: !SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '') && aiPanelSize > 0 && toggleAiPanel()
+	let codePanelSize = $state(70)
+	let testPanelSize = $state(30)
+	let storedTestPanelSize = untrack(() => testPanelSize)
 
 	function toggleTestPanel() {
 		if (testPanelSize > 0) {
@@ -350,18 +362,9 @@
 		}
 	}
 
-	let aiChat: AIChat | undefined = undefined
-
-	function getStringError(job: Job | undefined) {
-		if (
-			job != undefined &&
-			job.type === 'CompletedJob' &&
-			typeof job.result == 'object' &&
-			job.result != null &&
-			`error` in job.result &&
-			job.result.error
-		) {
-			return JSON.stringify(job.result.error, null, 2)
+	function getError(job: Job | undefined) {
+		if (job != undefined && job.type === 'CompletedJob' && !job.success) {
+			return getStringError(job.result)
 		}
 		return undefined
 	}
@@ -380,7 +383,28 @@
 		editor?.show()
 	}
 
-	$: error = getStringError(testJob)
+	let error = $derived(getError(testJob))
+
+	$effect(() => {
+		const options: ScriptOptions = {
+			code,
+			lang: lang as ScriptLang,
+			error,
+			args: args ?? {},
+			path,
+			lastSavedCode,
+			lastDeployedCode,
+			diffMode
+		}
+		untrack(() => {
+			aiChatManager.scriptEditorOptions = options
+			aiChatManager.scriptEditorApplyCode = (code: string) => {
+				hideDiffMode()
+				editor?.reviewAndApplyCode(code)
+			}
+			aiChatManager.scriptEditorShowDiffMode = showDiffMode
+		})
+	})
 </script>
 
 <TestJobLoader
@@ -391,7 +415,9 @@
 	bind:job={testJob}
 />
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
+
+<TriggerableByAI id="script-editor" description="Component to edit a script" />
 
 <Modal title="Invite others" bind:open={showCollabPopup}>
 	<div>Have others join by sharing the following url:</div>
@@ -408,42 +434,46 @@
 </Modal>
 <div class="border-b shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
-		<EditorBar
-			scriptPath={edit ? path : undefined}
-			on:toggleCollabMode={() => {
-				if (wsProvider?.shouldConnect) {
-					disableCollaboration()
-				} else {
-					setCollaborationMode()
-				}
-			}}
-			on:showDiffMode={showDiffMode}
-			on:hideDiffMode={hideDiffMode}
-			customUi={{ ...customUi?.editorBar, aiGen: false }}
-			collabLive={wsProvider?.shouldConnect}
-			{collabMode}
-			{validCode}
-			iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
-			on:collabPopup={() => (showCollabPopup = true)}
-			{editor}
-			{lang}
-			on:createScriptFromInlineScript
-			{websocketAlive}
-			collabUsers={peers}
-			kind={asKind(kind)}
-			{template}
-			{diffEditor}
-			{args}
-			{noHistory}
-			{saveToWorkspace}
-			lastDeployedCode={lastDeployedCode && lastDeployedCode !== code
-				? lastDeployedCode
-				: undefined}
-			{diffMode}
-			bind:showHistoryDrawer
-		>
-			<slot name="editor-bar-right" slot="right" />
-		</EditorBar>
+		{#if args}
+			<EditorBar
+				scriptPath={edit ? path : undefined}
+				on:toggleCollabMode={() => {
+					if (wsProvider?.shouldConnect) {
+						disableCollaboration()
+					} else {
+						setCollaborationMode()
+					}
+				}}
+				on:showDiffMode={showDiffMode}
+				on:hideDiffMode={hideDiffMode}
+				customUi={{ ...customUi?.editorBar, aiGen: false }}
+				collabLive={wsProvider?.shouldConnect}
+				{collabMode}
+				{validCode}
+				iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
+				on:collabPopup={() => (showCollabPopup = true)}
+				{editor}
+				{lang}
+				on:createScriptFromInlineScript
+				{websocketAlive}
+				collabUsers={peers}
+				kind={asKind(kind)}
+				{template}
+				{diffEditor}
+				{args}
+				{noHistory}
+				{saveToWorkspace}
+				lastDeployedCode={lastDeployedCode && lastDeployedCode !== code
+					? lastDeployedCode
+					: undefined}
+				{diffMode}
+				bind:showHistoryDrawer
+			>
+				{#snippet right()}
+					{@render editor_bar_right?.()}
+				{/snippet}
+			</EditorBar>
+		{/if}
 		{#if !noSyncFromGithub && customUi?.editorBar?.useVsCode != false}
 			<div class="py-1">
 				<Button
@@ -467,7 +497,24 @@
 		<Pane bind:size={codePanelSize} minSize={10} class="!overflow-visible">
 			<div class="h-full !overflow-visible bg-gray-50 dark:bg-[#272D38] relative">
 				<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
-					{#if aiPanelSize === 0}
+					{#if testPanelSize === 0}
+						<HideButton
+							hidden={true}
+							direction="right"
+							size="md"
+							panelName="Test"
+							shortcut="U"
+							customHiddenIcon={{
+								icon: PlayIcon
+							}}
+							on:click={() => {
+								toggleTestPanel()
+							}}
+							btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
+							color="marine"
+						/>
+					{/if}
+					{#if !aiChatManager.open}
 						{#if customUi?.editorBar?.aiGen != false && SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '')}
 							<HideButton
 								hidden={true}
@@ -476,13 +523,15 @@
 								shortcut="L"
 								size="md"
 								usePopoverOverride={!$copilotInfo.enabled}
-								customHiddenIcon={WandSparkles}
+								customHiddenIcon={{
+									icon: WandSparkles
+								}}
 								btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 bg-surface"
 								on:click={() => {
-									toggleAiPanel()
+									aiChatManager.toggleOpen()
 								}}
 							>
-								<svelte:fragment slot="popoverOverride">
+								{#snippet popoverOverride()}
 									<div class="text-sm">
 										Enable Windmill AI in the <a
 											href="{base}/workspace_settings?tab=ai"
@@ -492,24 +541,9 @@
 											workspace settings <ExternalLink size={16} />
 										</a>
 									</div>
-								</svelte:fragment>
+								{/snippet}
 							</HideButton>
 						{/if}
-						{#if testPanelSize === 0}
-							<HideButton
-								hidden={true}
-								direction="right"
-								size="md"
-								panelName="Test"
-								shortcut="U"
-								customHiddenIcon={PlayIcon}
-								on:click={() => {
-									toggleTestPanel()
-								}}
-								btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
-								color="marine"
-							/>
-						{/if}
 					{/if}
 				</div>
 				{#key lang}
@@ -526,10 +560,12 @@
 							inferSchema(e.detail)
 						}}
 						on:saveDraft
-						on:toggleAiPanel={toggleAiPanel}
-						on:addSelectedLinesToAiChat={addSelectedLinesToAiChat}
+						on:toggleAiPanel={() => aiChatManager.toggleOpen()}
+						on:addSelectedLinesToAiChat={(e) => {
+							const { lines, startLine, endLine } = e.detail
+							aiChatManager.addSelectedLinesToContext(lines, startLine, endLine)
+						}}
 						on:toggleTestPanel={toggleTestPanel}
-						isAiPanelOpen={aiPanelSize > 0}
 						cmdEnterAction={async () => {
 							await inferSchema(code)
 							runTest()
@@ -564,57 +600,6 @@
 				{/key}
 			</div>
 		</Pane>
-		{#if lang && $copilotInfo.enabled}
-			<Pane bind:size={aiPanelSize} minSize={0}>
-				<AIChat
-					bind:this={aiChat}
-					{code}
-					{lang}
-					{error}
-					{args}
-					{path}
-					on:applyCode={(e) => {
-						hideDiffMode()
-						editor?.reviewAndApplyCode(e.detail.code)
-					}}
-					on:showDiffMode={showDiffMode}
-					{lastSavedCode}
-					{lastDeployedCode}
-					{diffMode}
-				>
-					<svelte:fragment slot="header-left">
-						<HideButton
-							hidden={false}
-							direction="right"
-							panelName="AI"
-							shortcut="L"
-							size="md"
-							on:click={() => {
-								toggleAiPanel()
-							}}
-						/>
-					</svelte:fragment>
-					<svelte:fragment slot="header-right">
-						{#if testPanelSize === 0}
-							<div class="bg-gray-200 h-6 w-[1px] rounded-full dark:bg-gray-600"></div>
-							<HideButton
-								hidden={true}
-								direction="right"
-								panelName="Test"
-								shortcut="U"
-								size="md"
-								customHiddenIcon={PlayIcon}
-								on:click={() => {
-									toggleTestPanel()
-								}}
-								btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
-								color="marine"
-							/>
-						{/if}
-					</svelte:fragment>
-				</AIChat>
-			</Pane>
-		{/if}
 		<Pane bind:size={testPanelSize} minSize={0}>
 			<div class="flex flex-col h-full">
 				{#if showTabs}
@@ -726,11 +711,7 @@
 					</Pane>
 					<Pane size={67} class="relative">
 						<LogPanel
-							bind:setFocusToLogs
-							on:fix={() => {
-								aiChat?.fix()
-							}}
-							fixChatMode
+							bind:this={logPanel}
 							{lang}
 							previewJob={testJob}
 							{pastPreviews}
@@ -750,7 +731,7 @@
 									compact={true}
 								/>
 							{/if}
-							<svelte:fragment slot="capturesTab">
+							{#snippet capturesTab()}
 								<div class="h-full p-2">
 									<CaptureTable
 										bind:this={captureTable}
@@ -764,7 +745,7 @@
 										on:addPreprocessor
 									/>
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</LogPanel>
 					</Pane>
 				</Splitpanes>
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 6423fb9bdb..0bb0a9caca 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -3,15 +3,14 @@
 
 	import { workspaceStore } from '$lib/stores'
 	import { base } from '$lib/base'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 
-	import Select from './apps/svelte-select/lib/index'
+	import Select from './Select.svelte'
 
 	import { getScriptByPath } from '$lib/scripts'
 	import { Button, Drawer, DrawerContent } from './common'
 	import HighlightCode from './HighlightCode.svelte'
 	import FlowPathViewer from './flows/content/FlowPathViewer.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import { Code, Code2, ExternalLink, Pen, RefreshCw } from 'lucide-svelte'
@@ -20,21 +19,35 @@
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import { truncate } from '$lib/utils'
 
-	export let initialPath: string | undefined = undefined
-	export let scriptPath: string | undefined = undefined
-	export let allowFlow = false
-	export let itemKind: 'script' | 'flow' | 'app' = 'script'
-	export let kinds: Script['kind'][] = ['script']
-	export let disabled = false
-	export let allowRefresh = false
-	export let allowEdit = true
-	export let allowView = true
+	interface Props {
+		initialPath?: string | undefined
+		scriptPath?: string | undefined
+		allowFlow?: boolean
+		itemKind?: 'script' | 'flow' | 'app'
+		kinds?: Script['kind'][]
+		disabled?: boolean
+		allowRefresh?: boolean
+		allowEdit?: boolean
+		allowView?: boolean
+	}
 
-	let items: { value: string; label: string }[] = []
-	let drawerViewer: Drawer
-	let drawerFlowViewer: Drawer
-	let code: string = ''
-	let lang: SupportedLanguage | undefined
+	let {
+		initialPath = undefined,
+		scriptPath = $bindable(undefined),
+		allowFlow = false,
+		itemKind = $bindable('script'),
+		kinds = ['script'],
+		disabled = false,
+		allowRefresh = false,
+		allowEdit = true,
+		allowView = true
+	}: Props = $props()
+
+	let items: { value: string; label: string }[] = $state([])
+	let drawerViewer: Drawer | undefined = $state()
+	let drawerFlowViewer: Drawer | undefined = $state()
+	let code: string = $state('')
+	let lang: SupportedLanguage | undefined = $state()
 
 	let options: [[string, any, any, string | undefined]] = [['Script', 'script', Code2, undefined]]
 	allowFlow && options.push(['Flow', 'flow', FlowIcon, '#14b8a6'])
@@ -64,8 +77,10 @@
 		}
 	}
 
-	$: itemKind && $workspaceStore && loadItems()
-	let darkMode: boolean = false
+	$effect(() => {
+		itemKind && $workspaceStore && untrack(() => loadItems())
+	})
+	let darkMode: boolean = $state(false)
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -85,10 +100,17 @@
 <div class="flex flex-row items-center gap-4 w-full mt-2">
 	{#if options.length > 1}
 		<div>
-			<ToggleButtonGroup bind:selected={itemKind} let:item>
-				{#each options as [label, value, icon, selectedColor]}
-					<ToggleButton {icon} {disabled} {value} {label} {selectedColor} {item} />
-				{/each}
+			<ToggleButtonGroup
+				bind:selected={itemKind}
+				on:selected={() => {
+					scriptPath = ''
+				}}
+			>
+				{#snippet children({ item })}
+					{#each options as [label, value, icon, selectedColor]}
+						<ToggleButton {icon} {disabled} {value} {label} {selectedColor} {item} />
+					{/each}
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{/if}
@@ -97,24 +119,16 @@
 		<input type="text" value={scriptPath ?? initialPath ?? ''} disabled />
 	{:else}
 		<Select
-			value={items?.find((x) => x.value == initialPath)}
-			class="grow shrink max-w-full"
-			on:change={() => {
-				dispatch('select', { path: scriptPath, itemKind })
-			}}
-			on:input={(ev) => {
-				if (!ev.detail) {
-					dispatch('select', { path: undefined, itemKind })
+			bind:value={
+				() => scriptPath ?? initialPath,
+				(path) => {
+					scriptPath = path
+					dispatch('select', { path, itemKind })
 				}
-			}}
-			bind:justValue={scriptPath}
+			}
+			class="grow shrink max-w-full"
 			{items}
 			placeholder="Pick {itemKind === 'app' ? 'an' : 'a'} {itemKind}"
-			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={darkMode
-				? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-				: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-			portal={false}
 		/>
 	{/if}
 
@@ -148,7 +162,7 @@
 						size="xs"
 						variant="border"
 						on:click={async () => {
-							drawerFlowViewer.openDrawer()
+							drawerFlowViewer?.openDrawer()
 						}}
 					>
 						View
@@ -206,7 +220,7 @@
 							const { language, content } = await getScriptByPath(scriptPath ?? '')
 							code = content
 							lang = language
-							drawerViewer.openDrawer()
+							drawerViewer?.openDrawer()
 						}}
 					>
 						View
diff --git a/frontend/src/lib/components/ScriptSchema.svelte b/frontend/src/lib/components/ScriptSchema.svelte
index 7d9eccb891..51e36ae75a 100644
--- a/frontend/src/lib/components/ScriptSchema.svelte
+++ b/frontend/src/lib/components/ScriptSchema.svelte
@@ -4,8 +4,12 @@
 
 	import EditableSchemaForm from './EditableSchemaForm.svelte'
 
-	export let schema: Schema | any
-	export let customUi: EditableSchemaFormUi | undefined = undefined
+	interface Props {
+		schema: Schema | any
+		customUi?: EditableSchemaFormUi | undefined
+	}
+
+	let { schema = $bindable(), customUi = undefined }: Props = $props()
 
 	export function setSchema(newSchema: Schema) {
 		schema = newSchema
diff --git a/frontend/src/lib/components/ScriptVersionHistory.svelte b/frontend/src/lib/components/ScriptVersionHistory.svelte
index d07f1d716d..13887e4eeb 100644
--- a/frontend/src/lib/components/ScriptVersionHistory.svelte
+++ b/frontend/src/lib/components/ScriptVersionHistory.svelte
@@ -196,13 +196,14 @@
 								<div class="w-min">
 									<ToggleButtonGroup
 										selected={showDiff ? 'diff' : 'code'}
-										let:item
 										on:selected={({ detail }) => {
 											showDiff = detail === 'diff'
 										}}
 									>
-										<ToggleButton light small value="code" label="Code" icon={Code} {item} />
-										<ToggleButton light small value="diff" label="Diff" icon={Diff} {item} />
+										{#snippet children({ item })}
+											<ToggleButton light small value="code" label="Code" icon={Code} {item} />
+											<ToggleButton light small value="diff" label="Diff" icon={Diff} {item} />
+										{/snippet}
 									</ToggleButtonGroup>
 								</div>
 
diff --git a/frontend/src/lib/components/SearchItems.svelte b/frontend/src/lib/components/SearchItems.svelte
index f99dbccb76..aedf17c12c 100644
--- a/frontend/src/lib/components/SearchItems.svelte
+++ b/frontend/src/lib/components/SearchItems.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
 	import uFuzzy from '@leeoniya/ufuzzy'
+	import { untrack } from 'svelte'
 
-	export let filter: string = ''
-	export let items: any[] | undefined
-	export let f: (item: any) => string
-	export let filteredItems: (any & { marked: string })[] | undefined
-	export let opts: uFuzzy.Options = {}
+	interface Props {
+		filter?: string
+		items: any[] | undefined
+		f: (item: any) => string
+		filteredItems: (any & { marked: string })[] | undefined
+		opts?: uFuzzy.Options
+	}
+
+	let { filter = '', items, f, filteredItems = $bindable(), opts = {} }: Props = $props()
 
 	let uf = new uFuzzy(opts)
-	$: plaintextItems = items?.map((item) => f(item)) ?? []
-
-	$: plaintextItems && filter != undefined && setTimeout(() => filterItems(), 0)
 
 	function filterItems() {
 		let trimmed = filter.trim()
@@ -35,4 +37,9 @@
 		}
 		filteredItems = result
 	}
+	let plaintextItems = $derived(items?.map((item) => f(item)) ?? [])
+
+	$effect(() => {
+		plaintextItems && filter != undefined && setTimeout(() => untrack(() => filterItems()), 0)
+	})
 </script>
diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte
new file mode 100644
index 0000000000..0afdf2cc32
--- /dev/null
+++ b/frontend/src/lib/components/Select.svelte
@@ -0,0 +1,271 @@
+<script lang="ts" generics="Item extends { label?: string; value: any; }">
+	import { clickOutside } from '$lib/utils'
+	import { twMerge } from 'tailwind-merge'
+	import CloseButton from './common/CloseButton.svelte'
+	import ConditionalPortal from './common/drawer/ConditionalPortal.svelte'
+	import { deepEqual } from 'fast-equals'
+	import { Loader2 } from 'lucide-svelte'
+	import { untrack } from 'svelte'
+
+	type Value = Item['value']
+
+	let {
+		items,
+		placeholder = 'Please select',
+		value = $bindable(),
+		filterText: _filterTextBind = $bindable(undefined),
+		class: className = '',
+		clearable = false,
+		listAutoWidth = true,
+		disabled: _disabled = false,
+		containerStyle = '',
+		inputClass = '',
+		disablePortal = false,
+		loading = false,
+		autofocus,
+		RightIcon,
+		createText,
+		groupBy,
+		sortBy,
+		onFocus,
+		onBlur,
+		onClear,
+		onCreateItem
+	}: {
+		items?: Item[]
+		value: Value | undefined
+		placeholder?: string
+		class?: string
+		clearable?: boolean
+		filterText?: string
+		disabled?: boolean
+		listAutoWidth?: boolean
+		containerStyle?: string
+		inputClass?: string
+		disablePortal?: boolean
+		loading?: boolean
+		autofocus?: boolean
+		RightIcon?: any
+		createText?: string
+		groupBy?: (item: Item) => string
+		sortBy?: (a: Item, b: Item) => number
+		onFocus?: () => void
+		onBlur?: () => void
+		onClear?: () => void
+		onCreateItem?: (value: string) => void
+	} = $props()
+
+	let disabled = $derived(_disabled || loading)
+
+	let filterText = $state<string>('')
+	let open = $state<boolean>(false)
+	let keyArrowPos = $state<number | undefined>()
+	let inputEl: HTMLInputElement | undefined = $state()
+	let listEl: HTMLDivElement | undefined = $state()
+
+	$effect(() => {
+		if (_filterTextBind !== undefined) filterText = _filterTextBind
+	})
+	$effect(() => {
+		if (_filterTextBind !== undefined) _filterTextBind = filterText
+	})
+
+	$effect(() => {
+		;[filterText, open, processedItems]
+		keyArrowPos = open && filterText ? 0 : undefined
+	})
+
+	$effect(() => {
+		if (filterText) open = true
+	})
+	$effect(() => {
+		if (!open) filterText = ''
+	})
+
+	type ProcessedItem = Item & { __select_group?: string; __is_create?: true; label: string }
+
+	let processedItems: ProcessedItem[] = $derived.by(() => {
+		let items2 =
+			items?.map((item) => ({
+				...item,
+				label: getLabel(item)
+			})) ?? []
+		if (filterText) {
+			items2 = items2.filter((item) =>
+				item?.label?.toLowerCase().includes(filterText?.toLowerCase())
+			)
+		}
+		if (groupBy) {
+			items2 =
+				items2?.map((item) => ({
+					...item,
+					__select_group: groupBy(item)
+				})) ?? []
+		}
+		if (sortBy) {
+			items2 = items2?.sort(sortBy)
+		}
+		if (onCreateItem && filterText && !items2.some((item) => item.label === filterText)) {
+			items2.push({
+				label: createText ?? `Add new: "${filterText}"`,
+				value: filterText,
+				__is_create: true
+			} as any)
+		}
+		return items2
+	})
+	let valueEntry = $derived(value && processedItems?.find((item) => deepEqual(item.value, value)))
+
+	function setValue(item: ProcessedItem) {
+		if (item.__is_create && onCreateItem) {
+			onCreateItem(item.value)
+		} else {
+			value = item.value
+		}
+		filterText = ''
+		open = false
+	}
+
+	function clearValue() {
+		filterText = ''
+		if (onClear) onClear()
+		else value = undefined
+	}
+
+	function getLabel(item: Item | undefined): string {
+		if (!item) return ''
+		if (item.label) return item.label
+		if (typeof item.value === 'string') return item.value
+		if (typeof item.value == 'number' || typeof item.value == 'boolean')
+			return item.value.toString()
+
+		return JSON.stringify(item.value)
+	}
+
+	function computeDropdownPos(): { width: number; x: number; y: number } {
+		if (!inputEl || !listEl) return { width: 0, x: 0, y: 0 }
+		const r = inputEl.getBoundingClientRect()
+		const listR = listEl.getBoundingClientRect()
+		const openBelow = r.y + r.height + listR.height <= window.innerHeight
+		let [x, y] = disablePortal ? [0, 0] : [r.x, r.y]
+		if (openBelow) return { width: r.width, x: x, y: y + r.height }
+		else {
+			return { width: r.width, x: x, y: y - listR.height }
+		}
+	}
+	let dropdownPos = $state(computeDropdownPos())
+	$effect(() => {
+		function updateDropdownPos() {
+			let nPos = computeDropdownPos()
+			if (!deepEqual(nPos, dropdownPos)) dropdownPos = nPos
+			if (open) requestAnimationFrame(updateDropdownPos)
+		}
+		if (open) untrack(() => updateDropdownPos())
+	})
+</script>
+
+<svelte:window
+	on:keydown={(e) => {
+		if (!open || !processedItems?.length) return
+		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
+			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
+		} else if (e.key === 'ArrowDown') {
+			if (keyArrowPos === undefined) {
+				keyArrowPos = 0
+			} else {
+				keyArrowPos = Math.min(processedItems.length - 1, keyArrowPos + 1)
+			}
+		} else if (e.key === 'Enter' && keyArrowPos !== undefined && processedItems?.[keyArrowPos]) {
+			setValue(processedItems[keyArrowPos])
+		} else {
+			keyArrowPos = undefined
+			return
+		}
+		e.preventDefault()
+	}}
+/>
+
+<div
+	class={`relative ${className}`}
+	use:clickOutside={{ onClickOutside: () => (open = false) }}
+	onpointerdown={() => onFocus?.()}
+	onfocus={() => onFocus?.()}
+	onblur={() => onBlur?.()}
+>
+	{#if loading}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<Loader2 size={18} class="animate-spin" />
+		</div>
+	{:else if clearable && !disabled && value}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<CloseButton noBg small on:close={clearValue} />
+		</div>
+	{:else if RightIcon}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<RightIcon size={18} class="text-tertiary/35" />
+		</div>
+	{/if}
+	<!-- svelte-ignore a11y_autofocus -->
+	<input
+		{autofocus}
+		{disabled}
+		type="text"
+		bind:value={() => filterText, (v) => (filterText = v)}
+		placeholder={loading ? 'Loading...' : (valueEntry?.label ?? placeholder)}
+		style={containerStyle}
+		class={twMerge(
+			'!bg-surface text-ellipsis',
+			open ? '' : 'cursor-pointer',
+			valueEntry && !loading ? '!placeholder-primary' : '',
+			(clearable || RightIcon) && !disabled && value ? '!pr-8' : '',
+			inputClass ?? ''
+		)}
+		autocomplete="off"
+		onpointerdown={() => (open = true)}
+		bind:this={inputEl}
+	/>
+
+	<ConditionalPortal condition={!disablePortal}>
+		{#if open && !disabled}
+			<div
+				class={twMerge(
+					disablePortal ? 'absolute' : 'fixed',
+					'flex flex-col z-[5001] max-h-64 overflow-y-auto bg-surface-secondary text-tertiary text-sm select-none border rounded-lg'
+				)}
+				style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
+					? `min-width: ${dropdownPos.width}px;`
+					: ''}"
+				bind:this={listEl}
+			>
+				{#if processedItems?.length === 0}
+					<div class="py-8 px-4 text-center text-primary">No items</div>
+				{/if}
+				{#each processedItems ?? [] as item, itemIndex}
+					{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
+						<div
+							class={twMerge(
+								'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
+								itemIndex === 0 ? 'mt-3' : 'mt-6'
+							)}
+						>
+							{item.__select_group}
+						</div>
+					{/if}
+					<button
+						class={twMerge(
+							'py-2 px-4 w-full font-normal text-left text-primary',
+							itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
+							item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover'
+						)}
+						onclick={(e) => {
+							e.stopImmediatePropagation()
+							setValue(item)
+						}}
+					>
+						{item.label}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</ConditionalPortal>
+</div>
diff --git a/frontend/src/lib/components/ServiceLogsInner.svelte b/frontend/src/lib/components/ServiceLogsInner.svelte
index 9b358adf80..4504d4e69d 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler, preventDefault } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { IndexSearchService, ServiceLogsService } from '$lib/gen'
 
 	import ManuelDatePicker from './runs/ManuelDatePicker.svelte'
@@ -6,7 +9,7 @@
 	import LogViewer from './LogViewer.svelte'
 	import Toggle from './Toggle.svelte'
 	import { sendUserToast } from '$lib/toast'
-	import { onDestroy, tick } from 'svelte'
+	import { onDestroy, tick, untrack } from 'svelte'
 	import { Loader2 } from 'lucide-svelte'
 	import { copyToClipboard, truncateRev } from '$lib/utils'
 	import LogSnippetViewer from './LogSnippetViewer.svelte'
@@ -15,26 +18,30 @@
 	import AnsiUp from 'ansi_up'
 	import { scroll_into_view_if_needed_polyfill } from './multiselect/utils'
 	import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte'
-	import Select from './apps/svelte-select/lib/Select.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
-	import DarkModeObserver from './DarkModeObserver.svelte'
+	import Select from './Select.svelte'
+	import { goto } from '$lib/navigation'
+	import { page } from '$app/stores'
 
-	export let searchTerm: string
-	export let queryParseErrors: string[] = []
+	interface Props {
+		searchTerm: string
+		queryParseErrors?: string[]
+	}
 
-	let minTs: undefined | string = undefined
-	let maxTs: undefined | string = undefined
+	let { searchTerm, queryParseErrors = $bindable() }: Props = $props()
 
-	let minTsManual: undefined | string = undefined
-	let maxTsManual: undefined | string = undefined
+	let minTs: undefined | string = $state(undefined)
+	let maxTs: undefined | string = $state(undefined)
 
-	let max_lines: undefined | number = undefined
+	let minTsManual: undefined | string = $state($page.url.searchParams.get('minTs') ?? undefined)
+	let maxTsManual: undefined | string = $state($page.url.searchParams.get('maxTs') ?? undefined)
+
+	let max_lines: undefined | number = $state(undefined)
 
 	// let lastSeen: undefined | string = undefined
 
-	let withError = false
-	let autoRefresh = true
-	let loading = false
+	let withError = $state(false)
+	let autoRefresh = $state(true)
+	let loading = $state(false)
 
 	type LogFile = {
 		ts: number
@@ -48,15 +55,13 @@
 	type ByWorkerGroup = Record<string, ByHostname>
 	type ByMode = Record<string, ByWorkerGroup>
 
-	let timeout: NodeJS.Timeout | undefined = undefined
+	let timeout: NodeJS.Timeout | undefined = $state(undefined)
 
-	let allLogs: ByMode | undefined = undefined
-	let manualPicker: ManuelDatePicker | undefined = undefined
+	let allLogs: ByMode | undefined = $state(undefined)
+	let manualPicker: ManuelDatePicker | undefined = $state(undefined)
 
-	let upTo: undefined | string = undefined
-	let upToIsLatest = true
-
-	$: minTsManual || maxTsManual || onManualChanges()
+	let upTo: undefined | string = $state(undefined)
+	let upToIsLatest = $state(true)
 
 	function onManualChanges() {
 		getAllLogs(minTsManual ?? maxTs, maxTsManual)
@@ -164,9 +169,20 @@
 			})
 	}
 
-	let selected: [string, string, string] | undefined = undefined
+	type Selected = { mode: string; workerGroup: string; hostname: string }
+	let initialSelected =
+		$page.url.searchParams.get('mode') &&
+		$page.url.searchParams.get('workerGroup') &&
+		$page.url.searchParams.get('hostname')
+			? {
+					mode: $page.url.searchParams.get('mode')!,
+					workerGroup: $page.url.searchParams.get('workerGroup')!,
+					hostname: $page.url.searchParams.get('hostname')!
+				}
+			: undefined
+	let selected: Selected | undefined = $state(initialSelected)
 
-	let logsContent: Record<string, { content?: string; error?: string }> = {}
+	let logsContent: Record<string, { content?: string; error?: string }> = $state({})
 	export async function getLogFile(hostname: string, path: string) {
 		if (logsContent[path]) {
 			return
@@ -181,11 +197,11 @@
 
 	getAllLogs(undefined, undefined)
 
-	function getLogs(selected: [string, string, string], upTo: string | undefined) {
+	function getLogs(selected: Selected, upTo: string | undefined) {
 		if (!selected) {
 			return []
 		}
-		let logs = allLogs?.[selected[0]]?.[selected[1]]?.[selected[2]]
+		let logs = allLogs?.[selected.mode]?.[selected.workerGroup]?.[selected.hostname]
 		if (!logs) {
 			return []
 		}
@@ -195,7 +211,7 @@
 			logs = nlogs.slice(nlogs.length - 5, undefined)
 
 			getFiles(
-				selected[2],
+				selected.hostname,
 				logs.map((x) => x.file_path)
 			)
 		}
@@ -207,11 +223,11 @@
 		scrollToBottom()
 	}
 
-	function getLatestUpTo(selected: [string, string, string]): any {
+	function getLatestUpTo(selected: Selected): any {
 		if (!selected) {
 			return undefined
 		}
-		let logs = allLogs?.[selected[0]]?.[selected[1]]?.[selected[2]]
+		let logs = allLogs?.[selected.mode]?.[selected.workerGroup]?.[selected.hostname]
 		if (!logs) {
 			return undefined
 		}
@@ -280,23 +296,31 @@
 		}
 	}
 
-	let logs: any
+	let logs: any = $state()
 
 	let debounceTimeout: NodeJS.Timeout | undefined = undefined
 	const debouncePeriod: number = 400
-	let loadingLogs = false
-	let loadingLogCounts = false
+	let loadingLogs = $state(false)
+	let loadingLogCounts = $state(false)
 
-	let countsPerHost: any
-	let sumOtherDocCount: number = 0
+	let countsPerHost: any = $state()
+	let sumOtherDocCount: number = $state(0)
 
 	async function searchLogs(
 		searchTerm: string,
-		selected: [string, string, string] | undefined,
+		selected: Selected | undefined,
 		minTs: string | undefined,
 		maxTs: string | undefined,
 		allLogs: ByMode | undefined
 	) {
+		const params = new URLSearchParams()
+		if (searchTerm) params.set('searchTerm', searchTerm)
+		if (minTs) params.set('minTs', minTs)
+		if (maxTs) params.set('maxTs', maxTs)
+		if (selected?.mode) params.set('mode', selected.mode)
+		if (selected?.workerGroup) params.set('workerGroup', selected.workerGroup)
+		if (selected?.hostname) params.set('hostname', selected.hostname)
+		goto(`?${params.toString()}`)
 		if (searchTerm.trim() === '') {
 			debounceTimeout && clearTimeout(debounceTimeout)
 			logs = undefined
@@ -336,9 +360,9 @@
 			if (selected) {
 				logs = await IndexSearchService.searchLogsIndex({
 					searchQuery: searchTerm,
-					mode: selected[0],
-					workerGroup: selected[1] != '' ? selected[1] : undefined,
-					hostname: selected[2],
+					mode: selected.mode,
+					workerGroup: selected.workerGroup != '' ? selected.workerGroup : undefined,
+					hostname: selected.hostname,
 					minTs,
 					maxTs
 				})
@@ -351,10 +375,10 @@
 	const ansi_up = new AnsiUp()
 	ansi_up.use_classes = true
 
-	let logDrawer: Drawer
-	let logDrawerOpen: boolean
-	let content: string = ''
-	let hitLineNumber: number | undefined = undefined
+	let logDrawer: Drawer | undefined = $state(undefined)
+	let logDrawerOpen: boolean = $state(false)
+	let content: string = $state('')
+	let hitLineNumber: number | undefined = $state(undefined)
 
 	async function seeLogContext(
 		lineNumber: number,
@@ -373,8 +397,6 @@
 		if (el) scroll_into_view_if_needed_polyfill(el, false)
 	}
 
-	$: searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs)
-
 	function allLogsOrQueryResults(allLogs: ByMode, countsPerHost: any): ByMode {
 		if (countsPerHost == undefined) {
 			return allLogs
@@ -399,25 +421,32 @@
 		return ret
 	}
 
-	function getSelectItems(allLogs: ByMode, countsPerHost: any): { label: string; value: any }[] {
+	function getSelectItems(
+		allLogs: ByMode,
+		countsPerHost: any
+	): { label: string; value: Selected }[] {
 		return Object.entries(allLogsOrQueryResults(allLogs, countsPerHost)).flatMap(([mode, o1]) =>
 			Object.entries(o1).flatMap(([wg, o2]) =>
 				Object.keys(o2).map((hn) => ({
 					label: hn,
-					value: [mode, wg, hn]
+					value: { mode, workerGroup: wg, hostname: hn }
 				}))
 			)
 		)
 	}
 
-	let darkMode = false
+	$effect(() => {
+		minTsManual || maxTsManual || untrack(() => onManualChanges())
+	})
+	$effect(() => {
+		;[searchTerm, selected, minTsManual, maxTsManual, allLogs]
+		untrack(() => searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs))
+	})
 </script>
 
-<DarkModeObserver bind:darkMode />
-
 <Drawer bind:this={logDrawer} bind:open={logDrawerOpen} size="1400px">
 	<DrawerContent title="See context" on:close={logDrawer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				on:click={() => copyToClipboard(content)}
 				color="light"
@@ -428,7 +457,7 @@
 			>
 				Copy to clipboard
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 		<div class="w-fit">
 			<pre
 				class="bg-surface-secondary text-secondary text-xs w-full p-2 whitespace-pre border rounded-md"
@@ -442,7 +471,7 @@
 </Drawer>
 
 <SplitPanesOrColumnOnMobile>
-	<svelte:fragment slot="left-pane">
+	{#snippet left_pane()}
 		<div class="p-1">
 			<div
 				class="flex flex-col lg:flex-row gap-y-1 justify-between w-full relative pb-4 gap-x-0.5"
@@ -569,22 +598,14 @@
 						>
 					</div>
 				{/if}
-				<div class="mr-0.5">
+				<div class="mr-0.5 mb-2">
 					<Select
-						justValue={selected}
+						bind:value={selected}
 						items={getSelectItems(allLogs, countsPerHost)}
-						on:change={({ detail }) => {
-							// console.log(detail)
-							selected = detail.value
-						}}
-						on:clear={() => {
+						onClear={() => {
 							selected = undefined
 						}}
 						placeholder="Select a service"
-						inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-						containerStyles={darkMode
-							? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-							: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 					/>
 				</div>
 				{#each Object.entries(allLogsOrQueryResults(allLogs, countsPerHost)) as [mode, o1]}
@@ -597,7 +618,7 @@
 								{/if}
 								<div class="divide-y flex flex-col">
 									{#each Object.entries(o2).filter(([hn, files]) => {
-										if (selected && selected[0] === mode && selected[1] === wg && selected[2] === hn) {
+										if (selected && selected.mode === mode && selected.workerGroup === wg && selected.hostname === hn) {
 											return true
 										}
 										const hostKey = `${mode},${wg},${hn}`
@@ -607,17 +628,17 @@
 										return true
 									}) as [hn, files]}
 										{@const hostKey = `${mode},${wg},${hn}`}
-										<!-- svelte-ignore a11y-click-events-have-key-events -->
-										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
 										<div
 											class="w-full flex items-baseline justify-between rounded px-1 hover:bg-surface-hover cursor-pointer {selected &&
-											selected[0] == mode &&
-											selected[1] == wg &&
-											selected[2] == hn
+											selected.mode == mode &&
+											selected.workerGroup == wg &&
+											selected.hostname == hn
 												? 'bg-surface-secondary'
 												: ''}"
-											on:click={() => {
-												selected = [mode, wg, hn]
+											onclick={() => {
+												selected = { mode, workerGroup: wg, hostname: hn }
 												upToIsLatest = true
 												upTo = getLatestUpTo(selected)
 												scrollToBottom()
@@ -667,8 +688,8 @@
 				{/if}
 			{/if}
 		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="right-pane">
+	{/snippet}
+	{#snippet right_pane()}
 		<div class="relative h-full flex flex-col gap-1 pb-2">
 			{#if selected}
 				{#if !loadingLogs && logs == undefined}
@@ -743,9 +764,9 @@
 											>
 										{/if}
 									{:else if logsContent[file.file_path].content}
-										<!-- svelte-ignore a11y-click-events-have-key-events -->
-										<!-- svelte-ignore a11y-no-static-element-interactions -->
-										<div on:click|preventDefault class="pr-2"
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
+										<div onclick={preventDefault(bubble('click'))} class="pr-2"
 											><LogViewer
 												noAutoScroll
 												noMaxH
@@ -771,7 +792,7 @@
 						<div class="flex grow text-xs justify-center px-2 items-center gap-2">
 							{#if upTo}
 								<button
-									on:click={() => {
+									onclick={() => {
 										if (upTo) {
 											upToIsLatest = false
 											upTo = new Date(new Date(upTo).getTime() - 5 * 60 * 1000).toISOString()
@@ -800,7 +821,7 @@
 							>
 							{#if upTo}
 								<button
-									on:click={() => {
+									onclick={() => {
 										if (upTo) {
 											upToIsLatest = false
 											upTo = new Date(new Date(upTo).getTime() + 5 * 60 * 1000).toISOString()
@@ -814,7 +835,7 @@
 						<div>
 							<button
 								class="text-xs"
-								on:click={() => {
+								onclick={() => {
 									upTo = new Date().toISOString()
 									upToIsLatest = true
 								}}>now</button
@@ -826,5 +847,5 @@
 				<div class="flex justify-center items-center pt-8">Select a host to see its logs</div>
 			{/if}</div
 		>
-	</svelte:fragment>
+	{/snippet}
 </SplitPanesOrColumnOnMobile>
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
index 07179e06d7..eac1b0fefd 100644
--- a/frontend/src/lib/components/ShareModal.svelte
+++ b/frontend/src/lib/components/ShareModal.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import TableCustom from './TableCustom.svelte'
 
 	import { GroupService, UserService, GranularAclService } from '$lib/gen'
 	import { createEventDispatcher } from 'svelte'
-	import AutoComplete from 'simple-svelte-autocomplete'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { Alert, Button, Drawer } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
@@ -12,6 +13,7 @@
 	import { isOwner } from '$lib/utils'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	import Select from './Select.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -34,22 +36,24 @@
 		| 'gcp_trigger'
 	let kind: Kind
 
-	let path: string = ''
+	let path: string = $state('')
 
-	let ownerKind: 'user' | 'group' = 'user'
-	let owner: string = ''
+	let ownerKind: 'user' | 'group' = $state('user')
+	let owner: string = $state('')
 
-	let newOwner: string = ''
+	let newOwner: string = $state('')
 	let write: boolean = false
-	let acls: [string, boolean][] = []
-	let groups: String[] = []
-	let usernames: string[] = []
+	let acls: [string, boolean][] = $state([])
+	let groups: String[] = $state([])
+	let usernames: string[] = $state([])
 
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
 
-	$: newOwner = [ownerKind === 'group' ? 'g' : 'u', owner].join('/')
+	run(() => {
+		newOwner = [ownerKind === 'group' ? 'g' : 'u', owner].join('/')
+	})
 
-	let own = false
+	let own = $state(false)
 	export async function openDrawer(newPath: string, kind_l: Kind) {
 		path = newPath
 		kind = kind_l
@@ -57,7 +61,7 @@
 		loadGroups()
 		loadUsernames()
 		loadOwner()
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}
 
 	async function loadOwner() {
@@ -106,7 +110,7 @@
 </script>
 
 <Drawer bind:this={drawer}>
-	<DrawerContent title="Share {path}" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Share {path}" on:close={drawer?.closeDrawer}>
 		<div class="flex flex-col gap-6">
 			<h1>{path}</h1>
 			<h2
@@ -125,73 +129,75 @@
 				{#if own}
 					<div class="flex flex-row flex-wrap gap-2 items-center">
 						<div>
-							<ToggleButtonGroup
-								bind:selected={ownerKind}
-								on:selected={() => (owner = '')}
-								let:item
-							>
-								<ToggleButton value="user" size="xs" label="User" {item} />
-								<ToggleButton value="group" size="xs" label="Group" {item} />
+							<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (owner = '')}>
+								{#snippet children({ item })}
+									<ToggleButton value="user" size="xs" label="User" {item} />
+									<ToggleButton value="group" size="xs" label="Group" {item} />
+								{/snippet}
 							</ToggleButtonGroup>
 						</div>
 						{#key ownerKind}
-							<AutoComplete
-								required
-								noInputStyles
-								items={ownerKind === 'user' ? usernames : groups}
-								bind:selectedItem={owner}
+							<Select
+								items={(ownerKind === 'user' ? usernames : groups)
+									.map((x) => x.toString())
+									.map((x) => ({ value: x, label: x }))}
+								bind:value={owner}
 							/>
 						{/key}
 						<Button size="sm" on:click={() => addAcl(newOwner, write)}>Add permission</Button>
 					</div>
 				{/if}
 				<TableCustom>
+					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 					<tr slot="header-row">
 						<th>owner</th>
 						<th></th>
 						<th></th>
 					</tr>
-					<tbody slot="body">
-						{#each acls as [owner, write]}
-							<tr>
-								<td>{owner}</td>
-								<td
-									>{#if own}
-										<div>
-											<ToggleButtonGroup
-												selected={write ? 'writer' : 'viewer'}
-												on:selected={async (e) => {
-													const role = e.detail
-													if (role == 'writer') {
-														await addAcl(owner, true)
-													} else {
-														await addAcl(owner, false)
-													}
-													loadAcls()
-												}}
-												let:item
+					{#snippet body()}
+						<tbody>
+							{#each acls as [owner, write]}
+								<tr>
+									<td>{owner}</td>
+									<td
+										>{#if own}
+											<div>
+												<ToggleButtonGroup
+													selected={write ? 'writer' : 'viewer'}
+													on:selected={async (e) => {
+														const role = e.detail
+														if (role == 'writer') {
+															await addAcl(owner, true)
+														} else {
+															await addAcl(owner, false)
+														}
+														loadAcls()
+													}}
+												>
+													{#snippet children({ item })}
+														<ToggleButton value="viewer" size="xs" label="Viewer" {item} />
+														<ToggleButton value="writer" size="xs" label="Writer" {item} />
+													{/snippet}
+												</ToggleButtonGroup>
+											</div>
+										{:else}{write}{/if}</td
+									>
+									<td>
+										{#if own}
+											<Button
+												variant="border"
+												color="red"
+												size="xs"
+												on:click={() => deleteAcl(owner)}
 											>
-												<ToggleButton value="viewer" size="xs" label="Viewer" {item} />
-												<ToggleButton value="writer" size="xs" label="Writer" {item} />
-											</ToggleButtonGroup>
-										</div>
-									{:else}{write}{/if}</td
-								>
-								<td>
-									{#if own}
-										<Button
-											variant="border"
-											color="red"
-											size="xs"
-											on:click={() => deleteAcl(owner)}
-										>
-											Delete
-										</Button>
-									{/if}
-								</td>
-							</tr>
-						{/each}
-					</tbody>
+												Delete
+											</Button>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					{/snippet}
 				</TableCustom>
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/SimpleAgTable.svelte b/frontend/src/lib/components/SimpleAgTable.svelte
index 47da07fd0b..7c15150895 100644
--- a/frontend/src/lib/components/SimpleAgTable.svelte
+++ b/frontend/src/lib/components/SimpleAgTable.svelte
@@ -2,6 +2,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import { createGrid, type GridApi } from 'ag-grid-community'
 	import DarkModeObserver from './DarkModeObserver.svelte'
+	import { untrack } from 'svelte'
 
 	type Props = {
 		data: Record<string, any>[]
@@ -11,7 +12,7 @@
 	let api: GridApi<any> | undefined = $state()
 	let eGui: HTMLDivElement | undefined = $state()
 
-	$effect(() => eGui && mountGrid())
+	$effect(() => eGui && untrack(() => mountGrid()))
 	function mountGrid() {
 		if (eGui) {
 			createGrid(eGui, {
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index ac69ded87f..29089a36aa 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -69,7 +69,7 @@
 
 	import { allClasses } from './apps/editor/componentsPanel/cssUtils'
 
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+	import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte'
 
 	import libStdContent from '$lib/es6.d.ts.txt?raw'
 	import domContent from '$lib/dom.d.ts.txt?raw'
@@ -156,11 +156,18 @@
 		}
 	}
 
-	export function setCode(ncode: string): void {
+	export function setCode(ncode: string, formatCode?: boolean): void {
 		if (ncode != code) {
 			code = ncode
 		}
 		editor?.setValue(ncode)
+		if (formatCode) {
+			format()
+		}
+	}
+
+	export function formatCode(): void {
+		format()
 	}
 
 	function updateCode() {
@@ -169,7 +176,7 @@
 			return
 		}
 		code = ncode
-		dispatch('change', ncode)
+		dispatch('change', { code: ncode })
 	}
 
 	function updatePlaceholderVisibility(value: string) {
@@ -238,13 +245,13 @@
 
 	$effect(() => {
 		if (allowVim && editor !== null && $vimMode && statusDiv) {
-			onVimMode()
+			untrack(() => onVimMode())
 		}
 	})
 
 	$effect(() => {
 		if (!$vimMode && vimDisposable) {
-			onVimDisable()
+			untrack(() => onVimDisable())
 		}
 	})
 
@@ -303,7 +310,7 @@
 
 	$effect(() => {
 		if (editor !== null && (lang || disableLinting || disableSuggestions || hideLineNumbers)) {
-			updateModelAndOptions()
+			untrack(() => updateModelAndOptions())
 		}
 	})
 
@@ -352,26 +359,31 @@
 		if (!divEl) {
 			return
 		}
-		editor = meditor.create(divEl as HTMLDivElement, {
-			...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
-			model,
-			lineDecorationsWidth: 6,
-			lineNumbersMinChars: 2,
-			fontSize: fontSize,
-			quickSuggestions: disableSuggestions
-				? { other: false, comments: false, strings: false }
-				: { other: true, comments: true, strings: true },
-			suggestOnTriggerCharacters: !disableSuggestions,
-			wordBasedSuggestions: disableSuggestions ? 'off' : 'matchingDocuments',
-			parameterHints: { enabled: !disableSuggestions },
-			suggest: {
-				showIcons: !disableSuggestions,
-				showSnippets: !disableSuggestions,
-				showKeywords: !disableSuggestions,
-				showWords: !disableSuggestions,
-				snippetsPreventQuickSuggestions: disableSuggestions
-			}
-		})
+		try {
+			editor = meditor.create(divEl as HTMLDivElement, {
+				...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+				model,
+				lineDecorationsWidth: 6,
+				lineNumbersMinChars: 2,
+				fontSize: fontSize,
+				quickSuggestions: disableSuggestions
+					? { other: false, comments: false, strings: false }
+					: { other: true, comments: true, strings: true },
+				suggestOnTriggerCharacters: !disableSuggestions,
+				wordBasedSuggestions: disableSuggestions ? 'off' : 'matchingDocuments',
+				parameterHints: { enabled: !disableSuggestions },
+				suggest: {
+					showIcons: !disableSuggestions,
+					showSnippets: !disableSuggestions,
+					showKeywords: !disableSuggestions,
+					showWords: !disableSuggestions,
+					snippetsPreventQuickSuggestions: disableSuggestions
+				}
+			})
+		} catch (e) {
+			console.error('Error loading monaco:', e)
+			return
+		}
 		keepModelAroundToAvoidDisposalOfWorkers()
 
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
@@ -575,7 +587,7 @@
 
 	$effect(() => {
 		if (mounted && extraLib && initialized) {
-			loadExtraLib()
+			untrack(() => loadExtraLib())
 		}
 	})
 
diff --git a/frontend/src/lib/components/SqlRepl.svelte b/frontend/src/lib/components/SqlRepl.svelte
index 727334cf1d..e1b7ba8a85 100644
--- a/frontend/src/lib/components/SqlRepl.svelte
+++ b/frontend/src/lib/components/SqlRepl.svelte
@@ -41,7 +41,7 @@
 	import { CornerDownLeft } from 'lucide-svelte'
 	import Button from './common/button/Button.svelte'
 	import Editor from './Editor.svelte'
-	import { runPreviewJobAndPollResult } from './jobs/utils'
+	import { runScriptAndPollResult } from './jobs/utils'
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
 	import { untrack } from 'svelte'
@@ -91,7 +91,7 @@
 					.join(';')
 			}
 
-			let { job, result } = (await runPreviewJobAndPollResult(
+			let { job, result } = (await runScriptAndPollResult(
 				{
 					workspace: $workspaceStore,
 					requestBody: {
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index bbecfae658..2f00431b60 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import type { EnumType } from '$lib/common'
 	import { computeKind } from '$lib/utils'
 	import Label from './Label.svelte'
@@ -12,28 +14,48 @@
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import RegexGen from './copilot/RegexGen.svelte'
 
-	export let pattern: string | undefined
-	export let enum_: EnumType
-	export let format: string | undefined
-	export let contentEncoding: 'base64' | 'binary' | undefined
-	export let customErrorMessage: string | undefined
-	export let minRows: number | undefined = undefined
-	export let disableCreate: boolean | undefined = undefined
-	export let disableVariablePicker: boolean | undefined = undefined
-	export let password: boolean | undefined = undefined
-	export let noExtra = false
-	export let dateFormat: string | undefined
-	export let enumLabels: Record<string, string> | undefined = undefined
-	export let overrideAllowKindChange: boolean = true
-	export let originalType: string | undefined = undefined
+	interface Props {
+		pattern: string | undefined
+		enum_: EnumType
+		format: string | undefined
+		contentEncoding: 'base64' | 'binary' | undefined
+		customErrorMessage: string | undefined
+		minRows?: number | undefined
+		disableCreate?: boolean | undefined
+		disableVariablePicker?: boolean | undefined
+		password?: boolean | undefined
+		noExtra?: boolean
+		dateFormat: string | undefined
+		enumLabels?: Record<string, string> | undefined
+		overrideAllowKindChange?: boolean
+		originalType?: string | undefined
+	}
 
-	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'base64' | 'date-time' =
+	let {
+		pattern = $bindable(),
+		enum_ = $bindable(),
+		format = $bindable(),
+		contentEncoding = $bindable(),
+		customErrorMessage = $bindable(),
+		minRows = $bindable(undefined),
+		disableCreate = $bindable(undefined),
+		disableVariablePicker = $bindable(undefined),
+		password = $bindable(undefined),
+		noExtra = false,
+		dateFormat = $bindable(),
+		enumLabels = $bindable(undefined),
+		overrideAllowKindChange = true,
+		originalType = undefined
+	}: Props = $props()
+
+	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'base64' | 'date-time' = $state(
 		computeKind(enum_, contentEncoding, pattern, format)
+	)
 
 	const allowKindChange = overrideAllowKindChange || originalType === 'string'
 
-	let patternStr: string = pattern ?? ''
-	let resource: string | undefined
+	let patternStr: string = $state(pattern ?? '')
+	let resource: string | undefined = $state()
 
 	const FORMATS = [
 		'email',
@@ -60,16 +82,22 @@
 		['Pattern', 'pattern']
 	]
 
-	$: format =
-		kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : format
-	$: pattern = patternStr == '' ? undefined : patternStr
-	$: contentEncoding = kind == 'base64' ? 'base64' : undefined
+	run(() => {
+		format =
+			kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : format
+	})
+	run(() => {
+		pattern = patternStr == '' ? undefined : patternStr
+	})
+	run(() => {
+		contentEncoding = kind == 'base64' ? 'base64' : undefined
+	})
 
-	$: {
+	run(() => {
 		if (format == 'email') {
 			pattern = '^[\\w-+.]+@([\\w-]+\\.)+[\\w-]{2,63}$'
 		}
-	}
+	})
 
 	function add() {
 		if (enumLabels === undefined) {
@@ -133,27 +161,28 @@
 					disableVariablePicker = undefined
 				}
 			}}
-			let:item
 		>
-			{#each FIELD_SETTINGS as x}
-				<ToggleButton
-					value={x[1]}
-					label={x[0]}
-					tooltip={x[2]}
-					showTooltipIcon={Boolean(x[2])}
-					{item}
-				/>
-			{/each}
+			{#snippet children({ item })}
+				{#each FIELD_SETTINGS as x}
+					<ToggleButton
+						value={x[1]}
+						label={x[0]}
+						tooltip={x[2]}
+						showTooltipIcon={Boolean(x[2])}
+						{item}
+					/>
+				{/each}
+			{/snippet}
 		</ToggleButtonGroup>
 	{/if}
 	{#if kind == 'pattern'}
 		<Label label="Pattern (Regex)">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light>
 					Setting a pattern will allow you to specify a regular expression that the input should
 					adhere to. You can use the regex generator to help you create a pattern.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 			<div class="flex flex-row gap-1">
 				<ClearableInput
 					id="input"
@@ -171,13 +200,13 @@
 			</div>
 		</Label>
 		<Label label="Custom error message" class="w-full">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light>
 					Setting a custom error message will allow you to specify a message that will be shown when
 					the input does not match the pattern.
 				</Tooltip>
-			</svelte:fragment>
-			<svelte:fragment slot="action">
+			{/snippet}
+			{#snippet action()}
 				<Toggle
 					size="xs"
 					options={{ right: 'Enable' }}
@@ -190,7 +219,7 @@
 						}
 					}}
 				/>
-			</svelte:fragment>
+			{/snippet}
 			<input
 				type="text"
 				bind:value={customErrorMessage}
@@ -199,43 +228,45 @@
 		</Label>
 	{:else if kind == 'enum'}
 		<Label label="Enums">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light>
 					Setting enums will allow you to specify a list of values that the input can take. If you
 					want to allow custom values, you can disable the option below.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 			<div class="flex flex-col gap-1">
-				{#each enum_ || [] as e}
-					<div class="flex flex-row w-full gap-2 pt-2">
-						<input
-							id="input"
-							type="text"
-							bind:value={e}
-							on:input={(event) => onEnumKeyChange(event?.currentTarget.value, e)}
-						/>
-						{#if enumLabels !== undefined}
+				{#if enum_}
+					{#each enum_ as _, i}
+						<div class="flex flex-row w-full gap-2 pt-2">
 							<input
 								id="input"
 								type="text"
-								bind:value={enumLabels[e]}
-								placeholder="Optional title..."
-								on:input={(event) => {
-									if (event?.currentTarget.value === '') {
-										if (enumLabels === undefined) {
-											enumLabels = {}
-										}
-										delete enumLabels[e]
-									}
-								}}
+								bind:value={enum_[i]}
+								oninput={(event) => enum_ && onEnumKeyChange(event?.currentTarget.value, enum_[i])}
 							/>
-						{/if}
+							{#if enumLabels !== undefined}
+								<input
+									id="input"
+									type="text"
+									bind:value={enumLabels[enum_[i]]}
+									placeholder="Optional title..."
+									oninput={(event) => {
+										if (event?.currentTarget.value === '') {
+											if (enumLabels === undefined) {
+												enumLabels = {}
+											}
+											enum_ && delete enumLabels[enum_[i]]
+										}
+									}}
+								/>
+							{/if}
 
-						{#if allowKindChange}
-							<Button size="sm" on:click={() => remove(e)}>-</Button>
-						{/if}
-					</div>
-				{/each}
+							{#if allowKindChange}
+								<Button size="sm" on:click={() => enum_ && remove(enum_[i])}>-</Button>
+							{/if}
+						</div>
+					{/each}
+				{/if}
 			</div>
 			{#if allowKindChange}
 				<div class="flex flex-row my-1">
@@ -262,11 +293,11 @@
 		<ResourceTypePicker bind:value={resource} />
 	{:else if kind == 'format'}
 		<Label label="Format">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light>
 					Setting the format will allow you to specify a format that the input should adhere to.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 			<select bind:value={format}>
 				<option value={undefined}></option>
 				{#each FORMATS as f}
@@ -279,12 +310,12 @@
 
 			<div class="grid grid-cols-3 gap-2">
 				<Label label="Date format passed to script" class="col-span-2">
-					<svelte:fragment slot="header">
+					{#snippet header()}
 						<Tooltip light>
 							Setting the date output format will allow you to specify how the date will be passed
 							to the script.
 						</Tooltip>
-					</svelte:fragment>
+					{/snippet}
 					<ClearableInput type="text" bind:value={dateFormat} placeholder="yyyy-MM-dd" />
 				</Label>
 				<Label label="Presets">
diff --git a/frontend/src/lib/components/SupabaseConnect.svelte b/frontend/src/lib/components/SupabaseConnect.svelte
index 49c6dd7d4f..2d9aa03824 100644
--- a/frontend/src/lib/components/SupabaseConnect.svelte
+++ b/frontend/src/lib/components/SupabaseConnect.svelte
@@ -175,12 +175,14 @@
 			>
 			<Highlight language={json} code={JSON.stringify(resourceValue, null, 4)} />
 		{/if}
-		<div slot="actions" class="flex gap-1">
-			{#if step == 'resource' && selectedDatabase != undefined}
-				<Button variant="border" on:click={() => (step = 'init')}>Back</Button>
+		{#snippet actions()}
+			<div class="flex gap-1">
+				{#if step == 'resource' && selectedDatabase != undefined}
+					<Button variant="border" on:click={() => (step = 'init')}>Back</Button>
 
-				<Button {disabled} on:click={save}>Save</Button>
-			{/if}
-		</div>
+					<Button {disabled} on:click={save}>Save</Button>
+				{/if}
+			</div>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index f4416e8897..2edbe6318c 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -24,8 +24,9 @@
 	import InstanceNameEditor from './InstanceNameEditor.svelte'
 	import Toggle from './Toggle.svelte'
 	import { instanceSettingsSelectedTab } from '$lib/stores'
-	let drawer: Drawer
-	let filter = ''
+
+	let drawer: Drawer | undefined = $state()
+	let filter = $state('')
 
 	export function openDrawer() {
 		listUsers(activeOnly)
@@ -44,33 +45,39 @@
 		gotoUrl(hashRemoved)
 	}
 
-	let users: GlobalUserInfo[] = []
-	let filteredUsers: GlobalUserInfo[] = []
-	let deleteConfirmedCallback: (() => void) | undefined = undefined
-	let activeOnly = false
+	let users: GlobalUserInfo[] = $state([])
+	let filteredUsers: GlobalUserInfo[] = $state([])
+	let deleteConfirmedCallback: (() => void) | undefined = $state(undefined)
+	let activeOnly = $state(false)
 
 	async function listUsers(activeOnly: boolean): Promise<void> {
 		users = await UserService.listUsersAsSuperAdmin({ perPage: 100000, activeOnly: activeOnly })
 	}
 
-	$: listUsers(activeOnly)
+	$effect(() => {
+		listUsers(activeOnly)
+	})
 
-	let tab: 'users' | string = 'users'
+	let tab: 'users' | string = $state('users')
 
-	$: $instanceSettingsSelectedTab, (tab = $instanceSettingsSelectedTab)
-	$: tab, instanceSettingsSelectedTab.set(tab)
+	$effect(() => {
+		tab = $instanceSettingsSelectedTab
+	})
+	$effect(() => {
+		instanceSettingsSelectedTab.set(tab)
+	})
 
-	let nbDisplayed = 50
+	let nbDisplayed = $state(50)
 
-	let instanceSettings
+	let instanceSettings: InstanceSettings | undefined = $state()
 
-	let automateUsernameCreation = false
+	let automateUsernameCreation = $state(false)
 	async function getAutomateUsernameCreationSetting() {
 		automateUsernameCreation =
 			((await SettingService.getGlobal({ key: 'automate_username_creation' })) as any) ?? false
 	}
 	getAutomateUsernameCreationSetting()
-	let automateUsernameModalOpen = false
+	let automateUsernameModalOpen = $state(false)
 	async function enableAutomateUsernameCreationSetting() {
 		await SettingService.setGlobal({
 			key: 'automate_username_creation',
@@ -133,11 +140,19 @@
 			</div>
 			<div class="pt-4 h-full">
 				<Tabs bind:selected={tab}>
-					<Tab value="users">Users</Tab>
+					<Tab value="users" aiId="instance-settings-users" aiDescription="Instance users settings"
+						>Users</Tab
+					>
 					{#each settingsKeys as category}
-						<Tab value={category}>{category}</Tab>
+						<Tab
+							value={category}
+							aiId={`instance-settings-${category}`}
+							aiDescription={`Instance ${category} settings`}
+						>
+							{category}
+						</Tab>
 					{/each}
-					<svelte:fragment slot="content">
+					{#snippet content()}
 						<div class="pt-4"></div>
 						<TabContent value="users">
 							<div class="h-full">
@@ -202,6 +217,7 @@
 								</div>
 								<div class="mt-2 overflow-auto">
 									<TableCustom>
+										<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 										<tr slot="header-row" class="sticky top-0 bg-surface border-b">
 											<th>email</th>
 											<th>auth</th>
@@ -215,147 +231,154 @@
 											<th></th>
 											<th></th>
 										</tr>
-										<tbody slot="body" class="overflow-y-auto w-full h-full max-h-full">
-											{#if filteredUsers && users}
-												{#each filteredUsers.slice(0, nbDisplayed) as { email, super_admin, devops, login_type, name, username, operator_only } (email)}
-													<tr class="border">
-														<td>{email}</td>
-														<td>{login_type}</td>
-														<td><span class="break-words">{truncate(name ?? '', 30)}</span></td>
+										{#snippet body()}
+											<tbody class="overflow-y-auto w-full h-full max-h-full">
+												{#if filteredUsers && users}
+													{#each filteredUsers.slice(0, nbDisplayed) as { email, super_admin, devops, login_type, name, username, operator_only } (email)}
+														<tr class="border">
+															<td>{email}</td>
+															<td>{login_type}</td>
+															<td><span class="break-words">{truncate(name ?? '', 30)}</span></td>
 
-														{#if automateUsernameCreation}
+															{#if automateUsernameCreation}
+																<td>
+																	{#if username}
+																		{username}
+																	{:else}
+																		{#key filteredUsers.map((u) => u.username).join()}
+																			<ChangeInstanceUsername
+																				username=""
+																				{email}
+																				isConflict
+																				on:renamed={() => {
+																					listUsers(activeOnly)
+																				}}
+																			/>
+																		{/key}
+																	{/if}
+																</td>
+															{/if}
+															{#if activeOnly}
+																<td>
+																	{#if operator_only}
+																		Operator only
+																	{:else}
+																		Developer
+																	{/if}
+																</td>
+															{/if}
 															<td>
-																{#if username}
-																	{username}
-																{:else}
-																	{#key filteredUsers.map((u) => u.username).join()}
-																		<ChangeInstanceUsername
-																			username=""
-																			{email}
-																			isConflict
-																			on:renamed={() => {
-																				listUsers(activeOnly)
-																			}}
-																		/>
-																	{/key}
-																{/if}
-															</td>
-														{/if}
-														{#if activeOnly}
-															<td>
-																{#if operator_only}
-																	Operator only
-																{:else}
-																	Developer
-																{/if}
-															</td>
-														{/if}
-														<td>
-															<ToggleButtonGroup
-																selected={super_admin ? 'super_admin' : devops ? 'devops' : 'user'}
-																on:selected={async (e) => {
-																	if (email == $userStore?.email) {
-																		sendUserToast('You cannot demote yourself', true)
-																		listUsers(activeOnly)
-																		return
-																	}
-
-																	let role = e.detail
-
-																	if (role === 'super_admin') {
-																		await UserService.globalUserUpdate({
-																			email,
-																			requestBody: {
-																				is_super_admin: true,
-																				is_devops: false
-																			}
-																		})
-																	}
-																	if (role === 'devops') {
-																		await UserService.globalUserUpdate({
-																			email,
-																			requestBody: {
-																				is_super_admin: false,
-																				is_devops: true
-																			}
-																		})
-																	}
-																	if (role === 'user') {
-																		await UserService.globalUserUpdate({
-																			email,
-																			requestBody: {
-																				is_super_admin: false,
-																				is_devops: false
-																			}
-																		})
-																	}
-																	sendUserToast('User updated')
-																	listUsers(activeOnly)
-																}}
-																let:item
-															>
-																<ToggleButton value={'user'} size="xs" label="User" {item} />
-																<ToggleButton
-																	value={'devops'}
-																	size="xs"
-																	label="Devops"
-																	tooltip="Devops is a role that grants visibilty similar to that of a super admin, but without giving all rights. For example devops users can see service logs and crtical alerts. You can think of it as a 'readonly' super admin"
-																	{item}
-																/>
-																<ToggleButton
-																	value={'super_admin'}
-																	size="xs"
-																	label="Superadmin"
-																	{item}
-																/>
-															</ToggleButtonGroup>
-														</td>
-														<td>
-															<div class="flex flex-row gap-x-1 justify-end">
-																<InstanceNameEditor
-																	{login_type}
-																	value={name}
-																	{username}
-																	{email}
-																	on:refresh={() => {
-																		listUsers(activeOnly)
-																	}}
-																	on:save={(e) => {
-																		updateName(e.detail, email)
-																	}}
-																	on:renamed={() => {
-																		listUsers(activeOnly)
-																	}}
-																	{automateUsernameCreation}
-																/>
-																<Button
-																	color="light"
-																	variant="contained"
-																	size="xs"
-																	spacingSize="xs2"
-																	btnClasses="text-red-500"
-																	on:click={() => {
-																		deleteConfirmedCallback = async () => {
-																			await UserService.globalUserDelete({ email })
-																			sendUserToast(`User ${email} removed`)
+																<ToggleButtonGroup
+																	selected={super_admin
+																		? 'super_admin'
+																		: devops
+																			? 'devops'
+																			: 'user'}
+																	on:selected={async (e) => {
+																		if (email == $userStore?.email) {
+																			sendUserToast('You cannot demote yourself', true)
 																			listUsers(activeOnly)
+																			return
 																		}
+
+																		let role = e.detail
+
+																		if (role === 'super_admin') {
+																			await UserService.globalUserUpdate({
+																				email,
+																				requestBody: {
+																					is_super_admin: true,
+																					is_devops: false
+																				}
+																			})
+																		}
+																		if (role === 'devops') {
+																			await UserService.globalUserUpdate({
+																				email,
+																				requestBody: {
+																					is_super_admin: false,
+																					is_devops: true
+																				}
+																			})
+																		}
+																		if (role === 'user') {
+																			await UserService.globalUserUpdate({
+																				email,
+																				requestBody: {
+																					is_super_admin: false,
+																					is_devops: false
+																				}
+																			})
+																		}
+																		sendUserToast('User updated')
+																		listUsers(activeOnly)
 																	}}
 																>
-																	Remove
-																</Button>
-															</div>
-														</td>
-													</tr>
-												{/each}
-											{/if}
-										</tbody>
+																	{#snippet children({ item })}
+																		<ToggleButton value={'user'} size="xs" label="User" {item} />
+																		<ToggleButton
+																			value={'devops'}
+																			size="xs"
+																			label="Devops"
+																			tooltip="Devops is a role that grants visibilty similar to that of a super admin, but without giving all rights. For example devops users can see service logs and crtical alerts. You can think of it as a 'readonly' super admin"
+																			{item}
+																		/>
+																		<ToggleButton
+																			value={'super_admin'}
+																			size="xs"
+																			label="Superadmin"
+																			{item}
+																		/>
+																	{/snippet}
+																</ToggleButtonGroup>
+															</td>
+															<td>
+																<div class="flex flex-row gap-x-1 justify-end">
+																	<InstanceNameEditor
+																		{login_type}
+																		value={name}
+																		{username}
+																		{email}
+																		on:refresh={() => {
+																			listUsers(activeOnly)
+																		}}
+																		on:save={(e) => {
+																			updateName(e.detail, email)
+																		}}
+																		on:renamed={() => {
+																			listUsers(activeOnly)
+																		}}
+																		{automateUsernameCreation}
+																	/>
+																	<Button
+																		color="light"
+																		variant="contained"
+																		size="xs"
+																		spacingSize="xs2"
+																		btnClasses="text-red-500"
+																		on:click={() => {
+																			deleteConfirmedCallback = async () => {
+																				await UserService.globalUserDelete({ email })
+																				sendUserToast(`User ${email} removed`)
+																				listUsers(activeOnly)
+																			}
+																		}}
+																	>
+																		Remove
+																	</Button>
+																</div>
+															</td>
+														</tr>
+													{/each}
+												{/if}
+											</tbody>
+										{/snippet}
 									</TableCustom>
 								</div>
 								{#if filteredUsers && filteredUsers?.length > 50 && nbDisplayed < filteredUsers.length}
 									<span class="text-xs"
 										>{nbDisplayed} users out of {filteredUsers.length}
-										<button class="ml-4" on:click={() => (nbDisplayed += 50)}>load 50 more</button
+										<button class="ml-4" onclick={() => (nbDisplayed += 50)}>load 50 more</button
 										></span
 									>
 								{/if}
@@ -370,7 +393,7 @@
 								{closeDrawer}
 							/>
 						</TabContent>
-					</svelte:fragment>
+					{/snippet}
 				</Tabs>
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/TagsToListenTo.svelte b/frontend/src/lib/components/TagsToListenTo.svelte
index ce56a575e8..38daa68ea9 100644
--- a/frontend/src/lib/components/TagsToListenTo.svelte
+++ b/frontend/src/lib/components/TagsToListenTo.svelte
@@ -1,75 +1,70 @@
 <script lang="ts">
-	import { X } from 'lucide-svelte'
+	import { X, Plus, Trash } from 'lucide-svelte'
 	import { Button } from './common'
-	import { Plus } from 'lucide-svelte'
 	import { superadmin } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
-	import AutoComplete from 'simple-svelte-autocomplete'
 	import { defaultTags, nativeTags } from './worker_group'
+	import Select from './Select.svelte'
 
 	const dispatch = createEventDispatcher()
-
-	export let worker_tags: string[] = []
-	export let customTags: string[] = []
-	export let disabled = false
-
-	let newTag = ''
-	let createdTags: string[] = []
+	type Props = {
+		worker_tags: string[]
+		customTags: string[] | undefined
+		disabled?: boolean
+	}
+	let {
+		worker_tags = $bindable([]),
+		customTags = $bindable([]),
+		disabled = $bindable(false)
+	}: Props = $props()
+	let newTag = $state('')
+	let createdTags: string[] = $state([])
 </script>
 
-<div class="flex gap-3 gap-y-2 flex-wrap pb-2">
-	{#if worker_tags?.length == 0}
+<div class="flex gap-2 gap-y-2 flex-wrap pb-3">
+	{#if worker_tags?.length === 0}
 		<div class="text-xs text-secondary">No tags selected</div>
 	{/if}
+
 	{#each worker_tags as tag}
-		<div class="flex gap-0.5 items-center"
-			><div class="text-2xs p-1 rounded border text-primary">{tag}</div>
+		<div
+			class="flex items-center gap-1 px-2 py-1 rounded-full border border-primary text-2xs text-primary bg-surface-primary"
+		>
+			<span>{tag}</span>
 			{#if $superadmin && !disabled}
-				<button
-					class={'z-10 rounded-full p-1 duration-200 hover:bg-gray-200'}
-					aria-label="Remove item"
-					on:click|preventDefault|stopPropagation={() => {
-						worker_tags = worker_tags?.filter((t) => t != tag) ?? []
+				<Button
+					class="p-1 rounded-full hover:bg-surface-hover transition"
+					aria-label="Remove tag"
+					on:click={() => {
+						worker_tags = worker_tags?.filter((t) => t !== tag) ?? []
 						dispatch('dirty')
 						dispatch('deletePriorityTag', tag)
 					}}
 				>
 					<X size={12} />
-				</button>
-			{/if}</div
-		>
+				</Button>
+			{/if}
+		</div>
 	{/each}
 </div>
+
 {#if $superadmin}
-	<div class="max-w-md">
-		<AutoComplete
-			noInputStyles
-			items={[...(customTags ?? []), ...createdTags, ...defaultTags, ...nativeTags].filter(
-				(x) => !worker_tags?.includes(x)
-			)}
+	<div class="max-w-md space-y-2">
+		<Select
+			items={[...(customTags ?? []), ...createdTags, ...defaultTags, ...nativeTags]
+				.filter((x) => !worker_tags?.includes(x))
+				.map((x) => ({ value: x, label: x }))}
 			{disabled}
-			bind:selectedItem={newTag}
-			hideArrow={true}
-			inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary"'}
-			dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
-			className="w-full !font-gray-600 !font-primary !bg-surface-primary"
-			onFocus={() => {
-				dispatch('focus')
-			}}
-			create
-			onCreate={(c) => {
-				createdTags.push(c)
-				createdTags = [...createdTags]
-				return c
-			}}
-			createText="Press enter to use this tag"
+			bind:value={newTag}
+			onFocus={() => dispatch('focus')}
+			onCreateItem={(c) => (createdTags.push(c), (createdTags = [...createdTags]), (newTag = c))}
+			createText="Press Enter to use this tag"
 		/>
 
-		<div class="mt-1"></div>
-		<div class="flex">
+		<div class="flex gap-2">
 			<Button
 				variant="contained"
-				color="blue"
+				color="light"
 				size="xs"
 				startIcon={{ icon: Plus }}
 				disabled={disabled || newTag == '' || worker_tags?.includes(newTag)}
@@ -81,6 +76,22 @@
 			>
 				Add tag
 			</Button>
+			<Button
+				variant="contained"
+				color="red"
+				size="xs"
+				startIcon={{ icon: Trash }}
+				disabled={disabled || worker_tags.length === 0}
+				on:click={() => {
+					worker_tags = worker_tags.filter((tag) => {
+						dispatch('deletePriorityTag', tag)
+						return false
+					})
+					dispatch('dirty')
+				}}
+			>
+				Remove all selected tags
+			</Button>
 		</div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/TeamSelector.svelte b/frontend/src/lib/components/TeamSelector.svelte
index cbe1c719dc..638c30d22f 100644
--- a/frontend/src/lib/components/TeamSelector.svelte
+++ b/frontend/src/lib/components/TeamSelector.svelte
@@ -1,42 +1,40 @@
 <script lang="ts">
-	import Select from '$lib/components/apps/svelte-select/lib/Select.svelte'
 	import { workspaceStore } from '$lib/stores'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
-	import { createEventDispatcher, onMount } from 'svelte'
-	import DarkModeObserver from './DarkModeObserver.svelte'
 	import { RefreshCcw } from 'lucide-svelte'
 	import { WorkspaceService } from '$lib/gen'
+	import Select from './Select.svelte'
+	import { onMount } from 'svelte'
 
 	interface TeamItem {
 		team_id: string
 		team_name: string
 	}
 
-	export let disabled = false
-	export let placeholder = 'Select a team'
-	export let selectedTeam: TeamItem | undefined = undefined
-	export let containerClass = 'w-64'
-	export let showRefreshButton = true
-	export let teams: TeamItem[] | undefined = undefined
-	export let minWidth = '160px'
-
-	let isFetching = false
-	let darkMode: boolean = false
-
-	const dispatch = createEventDispatcher<{
-		change: TeamItem
-		error: Error
-	}>()
-
-	function onThemeChange() {
-		darkMode = document.documentElement.classList.contains('dark')
+	interface Props {
+		disabled?: boolean
+		placeholder?: string
+		selectedTeam?: TeamItem | undefined
+		containerClass?: string
+		showRefreshButton?: boolean
+		teams?: TeamItem[] | undefined
+		minWidth?: string
+		onError?: (error: Error) => void
 	}
 
+	let {
+		disabled = false,
+		placeholder = 'Select a team',
+		selectedTeam = $bindable(),
+		containerClass = 'w-64',
+		showRefreshButton = true,
+		teams = undefined,
+		minWidth = '160px',
+		onError
+	}: Props = $props()
+
+	let isFetching = $state(false)
 	onMount(() => {
-		onThemeChange()
-		if (!teams) {
-			loadTeams()
-		}
+		if (!teams) loadTeams()
 	})
 
 	async function loadTeams() {
@@ -52,58 +50,35 @@
 			return teams
 		} catch (error) {
 			isFetching = false
-			dispatch('error', error)
+			onError?.(error)
 			console.error('Error loading teams:', error)
 			return []
 		}
 	}
-
-	function handleTeamSelect(event) {
-		selectedTeam = event.detail
-		if (selectedTeam) {
-			dispatch('change', selectedTeam)
-		}
-	}
-
-	function filterTeams(filterText: string | unknown) {
-		if (!teams) return teams
-
-		const searchText = typeof filterText === 'string' ? filterText : ''
-
-		const filtered = searchText
-			? teams.filter((team) => team.team_name.toLowerCase().includes(searchText.toLowerCase()))
-			: teams
-
-		return filtered
-	}
 </script>
 
 <div class={containerClass}>
 	<div class="flex items-center gap-2">
 		<div class="flex-grow" style="min-width: {minWidth};">
 			<Select
-				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={'border-color: lightgray; min-width: ' +
-					minWidth +
-					';' +
-					(darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles)}
-				itemId="team_id"
-				label="team_name"
-				items={teams || []}
-				on:change={handleTeamSelect}
+				containerStyle={'min-width: ' + minWidth}
+				items={teams?.map((team) => ({
+					label: team.team_name,
+					value: team.team_id
+				})) ?? []}
 				{placeholder}
-				searchable={true}
-				loading={isFetching}
+				clearable
 				disabled={disabled || isFetching}
-				on:input={(e) => filterTeams(e.detail)}
+				bind:value={
+					() => selectedTeam?.team_id,
+					(value) => (selectedTeam = teams?.find((team) => team.team_id === value))
+				}
 			/>
 		</div>
 
 		{#if showRefreshButton}
 			<button
-				on:click={loadTeams}
+				onclick={loadTeams}
 				disabled={isFetching || disabled}
 				class="flex items-center justify-center p-1.5 rounded hover:bg-surface-hover focus:bg-surface-hover disabled:opacity-50"
 				title="Refresh teams from Microsoft"
@@ -123,5 +98,3 @@
 		</div>
 	{/if}
 </div>
-
-<DarkModeObserver on:change={onThemeChange} />
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index b7027633ca..e4fb6110ab 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -453,16 +453,21 @@
 
 		model.updateOptions(updateOptions)
 
-		editor = meditor.create(divEl as HTMLDivElement, {
-			...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
-			model,
-			// overflowWidgetsDomNode: widgets,
-			// lineNumbers: 'on',
-			lineDecorationsWidth: 6,
-			lineNumbersMinChars: 2,
-			fontSize,
-			suggestOnTriggerCharacters: true
-		})
+		try {
+			editor = meditor.create(divEl as HTMLDivElement, {
+				...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+				model,
+				// overflowWidgetsDomNode: widgets,
+				// lineNumbers: 'on',
+				lineDecorationsWidth: 6,
+				lineNumbersMinChars: 2,
+				fontSize,
+				suggestOnTriggerCharacters: true
+			})
+		} catch (e) {
+			console.error('Error loading monaco:', e)
+			return
+		}
 
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
@@ -478,7 +483,7 @@
 				return
 			}
 			code = ncode
-			dispatch('change', code)
+			dispatch('change', { code: ncode })
 		}
 
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
@@ -608,16 +613,20 @@
 
 	let mounted = false
 	onMount(async () => {
-		if (BROWSER) {
-			if (loadAsync) {
-				setTimeout(async () => {
+		try {
+			if (BROWSER) {
+				if (loadAsync) {
+					setTimeout(async () => {
+						await loadMonaco()
+						mounted = true
+					}, 0)
+				} else {
 					await loadMonaco()
 					mounted = true
-				}, 0)
-			} else {
-				await loadMonaco()
-				mounted = true
+				}
 			}
+		} catch (e) {
+			console.error('Error loading monaco:', e)
 		}
 	})
 
diff --git a/frontend/src/lib/components/ToggleHubWorkspace.svelte b/frontend/src/lib/components/ToggleHubWorkspace.svelte
index 4954f41a55..7d70cb41cd 100644
--- a/frontend/src/lib/components/ToggleHubWorkspace.svelte
+++ b/frontend/src/lib/components/ToggleHubWorkspace.svelte
@@ -3,12 +3,18 @@
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import { Building } from 'lucide-svelte'
-	export let selected: 'hub' | 'workspace' = 'hub'
+	interface Props {
+		selected?: 'hub' | 'workspace'
+	}
+
+	let { selected = $bindable('hub') }: Props = $props()
 </script>
 
 <div class="max-w-min">
-	<ToggleButtonGroup bind:selected let:item>
-		<ToggleButton value="hub" icon={WindmillIcon} label="Hub" {item} />
-		<ToggleButton value="workspace" icon={Building} label="Workspace" {item} />
+	<ToggleButtonGroup bind:selected>
+		{#snippet children({ item })}
+			<ToggleButton value="hub" icon={WindmillIcon} label="Hub" {item} />
+			<ToggleButton value="workspace" icon={Building} label="Workspace" {item} />
+		{/snippet}
 	</ToggleButtonGroup>
 </div>
diff --git a/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte b/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
index 5f00c33a97..c48fbe50b3 100644
--- a/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
+++ b/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
@@ -3,13 +3,19 @@
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import { Building } from 'lucide-svelte'
-	export let selected: 'all' | 'hub' | 'workspace' = 'all'
+	interface Props {
+		selected?: 'all' | 'hub' | 'workspace'
+	}
+
+	let { selected = $bindable('all') }: Props = $props()
 </script>
 
 <div class="max-w-min">
-	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected let:item>
-		<ToggleButton value="all" label="All" light small {item} />
-		<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small {item} />
-		<ToggleButton value="workspace" icon={Building} label="Workspace" light small {item} />
+	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
+		{#snippet children({ item })}
+			<ToggleButton value="all" label="All" light small {item} />
+			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small {item} />
+			<ToggleButton value="workspace" icon={Building} label="Workspace" light small {item} />
+		{/snippet}
 	</ToggleButtonGroup>
 </div>
diff --git a/frontend/src/lib/components/TriggerableByAI.svelte b/frontend/src/lib/components/TriggerableByAI.svelte
new file mode 100644
index 0000000000..0c6e2a049b
--- /dev/null
+++ b/frontend/src/lib/components/TriggerableByAI.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { aiChatManager } from '$lib/components/copilot/chat/AIChatManager.svelte'
+
+	let {
+		id,
+		description,
+		onTrigger,
+		children,
+		showAnimation = true
+	} = $props<{
+		id: string | undefined
+		description: string | undefined
+		onTrigger?: (value?: string) => void // Function to call when the trigger is activated, if not provided, the component is discoverable for information purposes only
+		children?: () => any
+		showAnimation?: boolean
+	}>()
+
+	let isAnimating = $state(false)
+
+	// Component is not discoverable if id or description is not provided
+	const disabled = !id || !description
+
+	function handleTrigger(value?: string) {
+		if (disabled || !onTrigger) return
+		if (!showAnimation) {
+			onTrigger(value)
+			return
+		}
+		isAnimating = true
+		onTrigger(value)
+		setTimeout(() => {
+			isAnimating = false
+		}, 2000)
+	}
+
+	$effect(() => {
+		if (disabled) return
+
+		// register the triggerable
+		const currentId = id
+		const currentData = { description, onTrigger: handleTrigger }
+		const existingTriggerables = aiChatManager.triggerablesByAI
+		existingTriggerables[currentId] = currentData
+
+		return () => {
+			// unregister the triggerable
+			if (aiChatManager.triggerablesByAI[currentId]) {
+				delete aiChatManager.triggerablesByAI[currentId]
+			}
+		}
+	})
+</script>
+
+{#if disabled}
+	{@render children?.()}
+{:else}
+	<div class="relative">
+		{#if isAnimating}
+			<div
+				class="absolute -top-2.5 left-1/2 -translate-x-1/2 w-10 h-10 bg-blue-500/90 rounded-full z-[9999] pointer-events-none animate-ping"
+			></div>
+		{/if}
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte
index a81699c020..7a1248e0a8 100644
--- a/frontend/src/lib/components/VariableEditor.svelte
+++ b/frontend/src/lib/components/VariableEditor.svelte
@@ -20,24 +20,24 @@
 
 	const dispatch = createEventDispatcher()
 
-	let path: string = ''
+	let path: string = $state('')
 
 	let variable: {
 		value: string
 		is_secret: boolean
 		description: string
-	} = {
+	} = $state({
 		value: '',
 		is_secret: true,
 		description: ''
-	}
-	let valid = true
+	})
+	let valid = $state(true)
 
-	let drawer: Drawer
-	let edit = false
-	let initialPath: string
-	let pathError = ''
-	let can_write = true
+	let drawer: Drawer | undefined = $state()
+	let edit = $state(false)
+	let initialPath: string = $state('')
+	let pathError = $state('')
+	let can_write = $state(true)
 
 	export function initNew(): void {
 		variable = {
@@ -49,7 +49,7 @@
 		initialPath = ''
 		path = ''
 		can_write = true
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}
 
 	export async function editVariable(edit_path: string): Promise<void> {
@@ -70,7 +70,7 @@
 		}
 		initialPath = edit_path
 		path = edit_path
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}
 
 	export async function loadVariable(path: string): Promise<void> {
@@ -85,7 +85,9 @@
 
 	const MAX_VARIABLE_LENGTH = 10000
 
-	$: valid = variable.value.length <= MAX_VARIABLE_LENGTH
+	$effect(() => {
+		valid = variable.value.length <= MAX_VARIABLE_LENGTH
+	})
 
 	async function createVariable(): Promise<void> {
 		await VariableService.createVariable({
@@ -99,7 +101,7 @@
 		})
 		sendUserToast(`Created variable ${path}`)
 		dispatch('create')
-		drawer.closeDrawer()
+		drawer?.closeDrawer()
 	}
 
 	async function updateVariable(): Promise<void> {
@@ -122,19 +124,19 @@
 			})
 			sendUserToast(`Updated variable ${initialPath}`)
 			dispatch('create')
-			drawer.closeDrawer()
+			drawer?.closeDrawer()
 		} catch (err) {
 			sendUserToast(`Could not update variable: ${err.body}`, true)
 		}
 	}
-	let editorKind: 'plain' | 'json' | 'yaml' = 'plain'
-	let editor: SimpleEditor | undefined = undefined
+	let editorKind: 'plain' | 'json' | 'yaml' = $state('plain')
+	let editor: SimpleEditor | undefined = $state(undefined)
 </script>
 
 <Drawer bind:this={drawer} size="900px">
 	<DrawerContent
 		title={edit ? `Update variable at ${initialPath}` : 'Add a variable'}
-		on:close={drawer.closeDrawer}
+		on:close={drawer?.closeDrawer}
 	>
 		<div class="flex flex-col gap-8">
 			{#if !can_write}
@@ -168,11 +170,11 @@
 				</div>
 			</Section>
 			<Section label="Variable value">
-				<svelte:fragment slot="header">
+				{#snippet header()}
 					<span class="text-sm text-tertiary mr-4 font-normal">
 						({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)
 					</span>
-				</svelte:fragment>
+				{/snippet}
 				<div>
 					<div class="mb-1">
 						{#if edit && variable.is_secret}{#if $userStore?.operator}
@@ -183,10 +185,12 @@
 								>{/if}{/if}
 					</div>
 					<div class="flex flex-col gap-2">
-						<ToggleButtonGroup bind:selected={editorKind} let:item>
-							<ToggleButton value="plain" label="Plain" {item} />
-							<ToggleButton value="json" label="Json" {item} />
-							<ToggleButton value="yaml" label="YAML" {item} />
+						<ToggleButtonGroup bind:selected={editorKind}>
+							{#snippet children({ item })}
+								<ToggleButton value="plain" label="Plain" {item} />
+								<ToggleButton value="json" label="Json" {item} />
+								<ToggleButton value="yaml" label="YAML" {item} />
+							{/snippet}
 						</ToggleButtonGroup>
 						{#if editorKind == 'plain'}
 							<textarea
@@ -229,15 +233,11 @@
 				</div>
 			</Section>
 			<Section label="Description">
-				<textarea
-					rows="4"
-					use:autosize
-					bind:value={variable.description}
-					placeholder="Used for X"
+				<textarea rows="4" use:autosize bind:value={variable.description} placeholder="Used for X"
 				></textarea>
 			</Section>
 		</div>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				on:click={() => (edit ? updateVariable() : createVariable())}
 				disabled={!can_write || !valid || pathError != ''}
@@ -247,6 +247,6 @@
 			>
 				{edit ? 'Update' : 'Save'}
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/WorkerGroup.svelte b/frontend/src/lib/components/WorkerGroup.svelte
index de90a2db3e..c822f9bd2c 100644
--- a/frontend/src/lib/components/WorkerGroup.svelte
+++ b/frontend/src/lib/components/WorkerGroup.svelte
@@ -15,32 +15,12 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import Section from './Section.svelte'
 	import Label from './Label.svelte'
-	import AutoComplete from 'simple-svelte-autocomplete'
 	import YAML from 'yaml'
 	import Toggle from './Toggle.svelte'
 	import { defaultTags, nativeTags, type AutoscalingConfig } from './worker_group'
 	import AutoscalingConfigEditor from './AutoscalingConfigEditor.svelte'
 	import TagsToListenTo from './TagsToListenTo.svelte'
-
-	export let name: string
-	export let config:
-		| undefined
-		| {
-				dedicated_worker?: string
-				worker_tags?: string[]
-				priority_tags?: Map<string, number>
-				cache_clear?: number
-				init_bash?: string
-				additional_python_paths?: string[]
-				pip_local_dependencies?: string[]
-				min_alive_workers_alert_threshold?: number
-				autoscaling?: AutoscalingConfig
-		  }
-	export let activeWorkers: number
-	export let customTags: string[] | undefined
-	export let workers: [string, WorkerPing[]][]
-
-	$: vcpus_memory = computeVCpuAndMemory(workers)
+	import Select from './Select.svelte'
 
 	function computeVCpuAndMemory(workers: [string, WorkerPing[]][]) {
 		let vcpus = 0
@@ -70,7 +50,7 @@
 		pip_local_dependencies?: string[]
 		min_alive_workers_alert_threshold?: number
 		autoscaling?: AutoscalingConfig
-	} = {}
+	} = $state({})
 
 	function loadNConfig() {
 		nconfig = config
@@ -103,12 +83,11 @@
 		customEnvVars.sort((a, b) => (a.key < b.key ? -1 : 1))
 	}
 
-	let selectedPriorityTags: string[] = []
 	let customEnvVars: {
 		key: string
 		type: 'static' | 'dynamic'
 		value: string | undefined
-	}[] = []
+	}[] = $state([])
 
 	const aws_env_vars_preset = [
 		'AWS_REGION',
@@ -125,24 +104,41 @@
 		'SSL_CERT_DIR'
 	]
 
-	$: selected = nconfig?.dedicated_worker != undefined ? 'dedicated' : 'normal'
-	$: {
-		selectedPriorityTags = []
-		if (nconfig?.priority_tags !== undefined) {
-			for (const [tag, _] of Object.entries(nconfig?.priority_tags)) {
-				selectedPriorityTags.push(tag)
-			}
-		}
+	let workspaceTag = $state('')
+	interface Props {
+		name: string
+		config:
+			| undefined
+			| {
+					dedicated_worker?: string
+					worker_tags?: string[]
+					priority_tags?: Map<string, number>
+					cache_clear?: number
+					init_bash?: string
+					additional_python_paths?: string[]
+					pip_local_dependencies?: string[]
+					min_alive_workers_alert_threshold?: number
+					autoscaling?: AutoscalingConfig
+			  }
+		activeWorkers: number
+		customTags: string[] | undefined
+		workers: [string, WorkerPing[]][]
+		defaultTagPerWorkspace?: boolean | undefined
 	}
 
-	let workspaceTag = ''
-	export let defaultTagPerWorkspace: boolean | undefined = undefined
+	let {
+		name,
+		config = $bindable(),
+		activeWorkers,
+		customTags,
+		workers,
+		defaultTagPerWorkspace = undefined
+	}: Props = $props()
 
-	let workspaces: Workspace[] = []
+	let workspaces: Workspace[] = $state([])
 	async function listWorkspaces() {
 		workspaces = await WorkspaceService.listWorkspacesAsSuperAdmin()
 	}
-	$: $superadmin && listWorkspaces()
 
 	const dispatch = createEventDispatcher()
 
@@ -150,12 +146,17 @@
 		await ConfigService.deleteConfig({ name: 'worker__' + name })
 		dispatch('reload')
 	}
-	let dirty = false
-	let dirtyCode = false
-	let openDelete = false
-	let openClean = false
+	let dirty = $state(false)
+	let dirtyCode = $state(false)
+	let openDelete = $state(false)
+	let openClean = $state(false)
 
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
+	let vcpus_memory = $derived(computeVCpuAndMemory(workers))
+	let selected = $derived(nconfig?.dedicated_worker != undefined ? 'dedicated' : 'normal')
+	$effect(() => {
+		$superadmin && listWorkspaces()
+	})
 </script>
 
 <ConfirmationModal
@@ -207,7 +208,7 @@
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
-		on:close={() => drawer.closeDrawer()}
+		on:close={() => drawer?.closeDrawer()}
 		title={$superadmin ? `Edit worker config '${name}'` : `Worker config '${name}'`}
 	>
 		{#if !$enterpriseLicense}
@@ -235,22 +236,23 @@
 				}
 			}}
 			class="mb-4"
-			let:item
 		>
-			<ToggleButton
-				position="left"
-				value="normal"
-				size="sm"
-				label="Any jobs within worker tags"
-				{item}
-			/>
-			<ToggleButton
-				position="dedicated"
-				value="dedicated"
-				size="sm"
-				label="Dedicated to a script/flow"
-				{item}
-			/>
+			{#snippet children({ item })}
+				<ToggleButton
+					position="left"
+					value="normal"
+					size="sm"
+					label="Any jobs within worker tags"
+					{item}
+				/>
+				<ToggleButton
+					position="dedicated"
+					value="dedicated"
+					size="sm"
+					label="Dedicated to a script/flow"
+					{item}
+				/>
+			{/snippet}
 		</ToggleButtonGroup>
 		{#if selected == 'normal'}
 			<Section label="Tags to listen to">
@@ -264,7 +266,6 @@
 							if (nconfig.priority_tags) {
 								delete nconfig.priority_tags[tag]
 							}
-							selectedPriorityTags = selectedPriorityTags.filter((t) => t != tag) ?? []
 						}}
 						bind:worker_tags={nconfig.worker_tags}
 						{customTags}
@@ -337,16 +338,10 @@
 						</Button>
 
 						{#if defaultTagPerWorkspace}
-							<AutoComplete
-								bind:selectedItem={workspaceTag}
-								noInputStyles
-								hideArrow={true}
-								items={workspaces.map((w) => w.id)}
-								inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary'}
-								dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
-								className="!font-gray-600 !font-primary !bg-surface-primary"
-								create
-								onCreate={(c) => c}
+							<Select
+								bind:value={workspaceTag}
+								items={workspaces.map((w) => ({ value: w.id, label: w.id }))}
+								onCreateItem={(c) => (workspaceTag = c)}
 								placeholder="Workspace ID"
 							/>
 						{/if}
@@ -354,7 +349,7 @@
 					<div class="max-w mt-2 items-center gap-1 pt-2">
 						{#if nconfig?.worker_tags !== undefined && nconfig?.worker_tags.length > 0}
 							<Label label="High-priority tags">
-								<svelte:fragment slot="header">
+								{#snippet header()}
 									<Tooltip>
 										Jobs with the following high-priority tags will be picked up in priority by this
 										worker.
@@ -362,11 +357,11 @@
 											This is a feature only available in enterprise edition.
 										{/if}
 									</Tooltip>
-								</svelte:fragment>
+								{/snippet}
 								<Multiselect
 									outerDivClass="text-secondary !bg-surface-disabled !border-0"
 									disabled={!$enterpriseLicense}
-									bind:selected={selectedPriorityTags}
+									selected={Object.keys(nconfig?.priority_tags ?? {})}
 									onchange={(e) => {
 										if (e.type === 'add') {
 											if (nconfig.priority_tags) {
@@ -426,7 +421,7 @@
 									disabled={!$enterpriseLicense}
 									min="1"
 									bind:value={nconfig.min_alive_workers_alert_threshold}
-									on:change={(ev) => {
+									onchange={(ev) => {
 										dirty = true
 									}}
 								/>
@@ -441,7 +436,7 @@
 					disabled={!$superadmin}
 					placeholder="<workspace>:<script path>"
 					type="text"
-					on:change={() => {
+					onchange={() => {
 						dirtyCode = true
 						dirty = true
 					}}
@@ -471,35 +466,37 @@
 		>
 			<div class="flex flex-col gap-3 gap-y-2 pb-2 max-w">
 				<span class="text-sm text-primary">Additional Python Paths</span>
-				{#each nconfig.additional_python_paths ?? [] as additional_python_path, i}
-					<div class="flex gap-1 items-center">
-						<input
-							type="text"
-							disabled={!$superadmin}
-							placeholder="/path/to/python3.X/site-packages"
-							bind:value={additional_python_path}
-						/>
-						{#if $superadmin}
-							<button
-								class="rounded-full bg-surface/60 hover:bg-gray-200"
-								aria-label="Clear"
-								on:click={() => {
-									if (
-										nconfig.additional_python_paths === undefined ||
-										nconfig.additional_python_paths.length == 0
-									) {
-										return
-									}
-									nconfig.additional_python_paths.splice(i, 1)
-									nconfig.additional_python_paths = [...nconfig.additional_python_paths]
-									dirty = true
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-					</div>
-				{/each}
+				{#if nconfig.additional_python_paths}
+					{#each nconfig.additional_python_paths as _, i}
+						<div class="flex gap-1 items-center">
+							<input
+								type="text"
+								disabled={!$superadmin}
+								placeholder="/path/to/python3.X/site-packages"
+								bind:value={nconfig.additional_python_paths![i]}
+							/>
+							{#if $superadmin}
+								<button
+									class="rounded-full bg-surface/60 hover:bg-gray-200"
+									aria-label="Clear"
+									onclick={() => {
+										if (
+											nconfig.additional_python_paths === undefined ||
+											nconfig.additional_python_paths.length == 0
+										) {
+											return
+										}
+										nconfig.additional_python_paths.splice(i, 1)
+										nconfig.additional_python_paths = [...nconfig.additional_python_paths]
+										dirty = true
+									}}
+								>
+									<X size={14} />
+								</button>
+							{/if}
+						</div>
+					{/each}
+				{/if}
 				{#if $superadmin}
 					<div class="flex">
 						<Button
@@ -522,35 +519,37 @@
 				{/if}
 
 				<span class="text-sm text-primary">PIP local dependencies</span>
-				{#each nconfig.pip_local_dependencies ?? [] as pip_local_dependency, i}
-					<div class="flex gap-1 items-center">
-						<input
-							disabled={!$superadmin}
-							type="text"
-							placeholder="httpx"
-							bind:value={pip_local_dependency}
-						/>
-						{#if $superadmin}
-							<button
-								class="rounded-full bg-surface/60 hover:bg-gray-200"
-								aria-label="Clear"
-								on:click={() => {
-									if (
-										nconfig.pip_local_dependencies === undefined ||
-										nconfig.pip_local_dependencies.length == 0
-									) {
-										return
-									}
-									nconfig.pip_local_dependencies.splice(i, 1)
-									nconfig.pip_local_dependencies = [...nconfig.pip_local_dependencies]
-									dirty = true
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-					</div>
-				{/each}
+				{#if nconfig.pip_local_dependencies}
+					{#each nconfig.pip_local_dependencies as _, i}
+						<div class="flex gap-1 items-center">
+							<input
+								disabled={!$superadmin}
+								type="text"
+								placeholder="httpx"
+								bind:value={nconfig.pip_local_dependencies[i]}
+							/>
+							{#if $superadmin}
+								<button
+									class="rounded-full bg-surface/60 hover:bg-gray-200"
+									aria-label="Clear"
+									onclick={() => {
+										if (
+											nconfig.pip_local_dependencies === undefined ||
+											nconfig.pip_local_dependencies.length == 0
+										) {
+											return
+										}
+										nconfig.pip_local_dependencies.splice(i, 1)
+										nconfig.pip_local_dependencies = [...nconfig.pip_local_dependencies]
+										dirty = true
+									}}
+								>
+									<X size={14} />
+								</button>
+							{/if}
+						</div>
+					{/each}
+				{/if}
 				{#if $superadmin}
 					<div class="flex">
 						<Button
@@ -589,7 +588,7 @@
 							type="text"
 							placeholder="ENV_VAR_NAME"
 							bind:value={envvar.key}
-							on:keypress={(e) => {
+							onkeypress={(e) => {
 								dirty = true
 							}}
 						/>
@@ -603,10 +602,11 @@
 									envvar.value = undefined
 								}
 							}}
-							let:item
 						>
-							<ToggleButton value="dynamic" label="Dynamic" {item} />
-							<ToggleButton value="static" label="Static" {item} />
+							{#snippet children({ item })}
+								<ToggleButton value="dynamic" label="Dynamic" {item} />
+								<ToggleButton value="static" label="Static" {item} />
+							{/snippet}
 						</ToggleButtonGroup>
 						<input
 							type="text"
@@ -620,7 +620,7 @@
 							<button
 								class="rounded-full bg-surface/60 hover:bg-gray-200"
 								aria-label="Clear"
-								on:click={() => {
+								onclick={() => {
 									if (nconfig.env_vars_static?.[envvar.key] !== undefined) {
 										delete nconfig.env_vars_static[envvar.key]
 									}
@@ -717,12 +717,14 @@
 		<div class="mt-8"></div>
 
 		<Section label="Autoscaling" collapsable>
-			<div slot="header" class="ml-4 flex flex-row gap-2 items-center">
-				<Badge>Beta</Badge>
-				{#if nconfig.autoscaling?.enabled}
-					<Badge color="green">Enabled</Badge>
-				{/if}
-			</div>
+			{#snippet header()}
+				<div class="ml-4 flex flex-row gap-2 items-center">
+					<Badge>Beta</Badge>
+					{#if nconfig.autoscaling?.enabled}
+						<Badge color="green">Enabled</Badge>
+					{/if}
+				</div>
+			{/snippet}
 			<AutoscalingConfigEditor
 				on:dirty={() => (dirty = true)}
 				worker_tags={config?.worker_tags}
@@ -766,7 +768,7 @@
 				</div>
 			</div>
 		</Section>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<div class="flex gap-4 items-center">
 				<div class="flex gap-2 items-center">
 					{#if dirty}
@@ -828,7 +830,7 @@
 					</Button>
 				</div>
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
 
@@ -848,7 +850,7 @@
 				on:click={() => {
 					dirty = false
 					loadNConfig()
-					drawer.openDrawer()
+					drawer?.openDrawer()
 				}}
 				startIcon={{ icon: config == undefined ? Plus : Settings }}
 			>
@@ -911,7 +913,7 @@
 				size="xs"
 				on:click={() => {
 					loadNConfig()
-					drawer.openDrawer()
+					drawer?.openDrawer()
 				}}
 			>
 				<div class="flex flex-row gap-1 items-center"> config </div>
diff --git a/frontend/src/lib/components/WorkerHostname.svelte b/frontend/src/lib/components/WorkerHostname.svelte
new file mode 100644
index 0000000000..51b3755bda
--- /dev/null
+++ b/frontend/src/lib/components/WorkerHostname.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { WorkerService } from '$lib/gen'
+	import { ExternalLink, Loader2 } from 'lucide-svelte'
+
+	type Props = {
+		worker: string
+		minTs?: string
+	}
+
+	let { worker, minTs }: Props = $props()
+
+	let instances = $state(undefined) as
+		| Record<string, { hostname: string; worker_group: string }>
+		| undefined
+	async function loadWorkers() {
+		const res = await WorkerService.listWorkers({})
+		instances = res.reduce(
+			(acc, worker) => {
+				acc[worker.worker] = { hostname: worker.worker_instance, worker_group: worker.worker_group }
+				return acc
+			},
+			{} as Record<string, { hostname: string; worker_group: string }>
+		)
+	}
+
+	loadWorkers()
+</script>
+
+{#if instances == undefined}
+	<Loader2 />
+{:else if instances[worker]}
+	host: {instances[worker].hostname}
+	<br />
+	worker group: {instances[worker].worker_group}
+	<br />
+	<a
+		href="/service_logs?mode=worker&workerGroup={instances[worker]
+			.worker_group}&hostname={instances[worker].hostname}{minTs
+			? `&minTs=${encodeURIComponent(minTs)}`
+			: ''}"
+		target="_blank"
+	>
+		service logs <ExternalLink size={14} class="inline-block" />
+	</a>
+{/if}
diff --git a/frontend/src/lib/components/WorkerRepl.svelte b/frontend/src/lib/components/WorkerRepl.svelte
new file mode 100644
index 0000000000..71dff962e4
--- /dev/null
+++ b/frontend/src/lib/components/WorkerRepl.svelte
@@ -0,0 +1,427 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { Terminal } from 'xterm'
+	import 'xterm/css/xterm.css'
+	import { pollJobResult, runScript } from './jobs/utils'
+	import { workspaceStore } from '$lib/stores'
+	import { Badge, Button, Drawer, DrawerContent, Skeleton } from './common'
+	import DarkModeObserver from './DarkModeObserver.svelte'
+	import { Eye, Library, Play, RefreshCw, Square } from 'lucide-svelte'
+	import Editor from './Editor.svelte'
+	import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte'
+	import ToggleHubWorkspace from './ToggleHubWorkspace.svelte'
+	import type { SupportedLanguage } from '$lib/common'
+	import HighlightCode from './HighlightCode.svelte'
+	import PickHubScript from './flows/pickers/PickHubScript.svelte'
+	import { getScriptByPath } from '$lib/scripts'
+	import { FitAddon } from '@xterm/addon-fit'
+	import { Readline } from 'xterm-readline'
+	import Tooltip from './Tooltip.svelte'
+	import { JobService, type QueuedJob } from '$lib/gen'
+	import { sendUserToast } from '$lib/toast'
+	import Select from './Select.svelte'
+	import { emptyString } from '$lib/utils'
+
+	let container: HTMLDivElement
+	let term: Terminal
+	let input = ''
+	type Props = {
+		tag: string
+		width?: number
+	}
+	let scriptPicker: Drawer | undefined = $state()
+	let editor = $state<Editor | null>(null)
+	let darkMode = $state(false)
+	let pick_existing: 'workspace' | 'hub' = $state('workspace')
+	let jobId = $state('')
+	let selectedJobId = $state('')
+	let codeViewer: Drawer | undefined = $state()
+	let filter = $state('')
+	let { tag }: Props = $props()
+	let code: string = $state('')
+	let working_directory = $state('~')
+	let homeDirectory: string = '~'
+	let pendingsJobs: Array<QueuedJob> = $state([])
+	let loadingPendingJobs = $state(false)
+	let isCancelingJob = $state(false)
+	let prompt = $derived(
+		`$-${working_directory === '/' ? '/' : working_directory.split('/').at(-1)} `
+	)
+	let codeObj: { language: SupportedLanguage; content: string } | undefined = $state(undefined)
+	function getNewWorkingDirectoryPath(currentDir: string, newPath: string): string {
+		if (newPath.startsWith('/') || newPath.startsWith('~')) {
+			return newPath
+		}
+
+		return currentDir.replace(/\/+$/, '') + '/' + newPath
+	}
+
+	function ensureTrailingLineBreak(input: any): boolean {
+		if (typeof input !== 'string') {
+			return false
+		}
+		return input.endsWith('\r\n') || input.endsWith('\n')
+	}
+
+	function isSimpleCdCommand(command: string): boolean {
+		const trimmed = command.trim()
+
+		// Matches:
+		// - Starts with "cd"
+		// - Followed by any number of valid args (quoted or not)
+		// - No use of &, |, ; outside quotes
+		// - No other commands
+		const cdRegex = /^cd(\s+("[^"]*"|'[^']*'|[^\s"'&|;]+))*\s*$/
+
+		return cdRegex.test(trimmed)
+	}
+
+	async function handleCommand(command: string) {
+		try {
+			const trimmedCommand = command.trim()
+
+			if (trimmedCommand.length === 0) return
+
+			const isOnlyCdCommand = isSimpleCdCommand(trimmedCommand)
+			let wDirectory = working_directory
+			if (isOnlyCdCommand) {
+				const parts = trimmedCommand.split(' ')
+				if (parts.length > 1) {
+					const path = parts.slice(1).join(' ')
+					const newPath = getNewWorkingDirectoryPath(working_directory, path)
+					wDirectory = newPath
+				} else {
+					wDirectory = homeDirectory
+				}
+			}
+
+			jobId = await runScript({
+				workspace: $workspaceStore!,
+				requestBody: {
+					language: 'bash',
+					content: `(cd ${wDirectory} && ${isOnlyCdCommand ? 'pwd' : `${trimmedCommand}`}) > result.out`,
+					tag,
+					args: {}
+				}
+			})
+
+			let result: any = await pollJobResult(jobId, $workspaceStore!)
+
+			if (isOnlyCdCommand) {
+				working_directory = (result as string).replace(/(\r\n|\n|\r)/g, '')
+				result = ''
+			} else if (!ensureTrailingLineBreak(result)) {
+				result += '\r\n'
+			}
+			rl.write(result)
+		} catch (e) {
+			term.writeln(`Error: ${e}`)
+		}
+	}
+
+	const rl = new Readline()
+
+	async function listPendingJobs() {
+		try {
+			loadingPendingJobs = true
+			pendingsJobs = await JobService.listQueue({
+				workspace: $workspaceStore!,
+				tag,
+				running: true
+			})
+		} catch (error) {
+			sendUserToast(error.body || error.message)
+		} finally {
+			loadingPendingJobs = false
+		}
+	}
+
+	async function listPendingJobsAndUpdateSelectedJobid() {
+		await listPendingJobs()
+		if (!pendingsJobs.find((pendingJob) => pendingJob.id === selectedJobId)) {
+			selectedJobId = ''
+		}
+	}
+
+	async function cancelJob(jobId: string) {
+		try {
+			await JobService.cancelQueuedJob({
+				workspace: $workspaceStore!,
+				id: jobId,
+				requestBody: {}
+			})
+		} catch (err) {
+			sendUserToast(err.body || err.message, true)
+		}
+	}
+
+	onMount(async () => {
+		term = new Terminal({
+			cursorBlink: true,
+			fontSize: 14,
+			theme: {
+				background: '#1e1e1e',
+				foreground: '#ffffff'
+			},
+			fontFamily: 'monospace',
+			convertEol: true,
+			rightClickSelectsWord: true
+		})
+
+		term.loadAddon(rl)
+
+		function readLine() {
+			rl.read(prompt).then(processLine)
+		}
+
+		async function processLine(text: string) {
+			await handleCommand(text)
+			setTimeout(readLine)
+		}
+
+		rl.setCtrlCHandler(async () => {
+			await cancelJob(jobId)
+			rl.read(prompt).then(processLine)
+		})
+
+		const fitAddon = new FitAddon()
+		term.loadAddon(fitAddon)
+		term.open(container)
+		term.focus()
+
+		fitAddon.fit()
+
+		const resizeObserver = new ResizeObserver(() => fitAddon.fit())
+		resizeObserver.observe(container)
+
+		//only used to silence unused variable warning from svelte compiler
+		editor?.show()
+		readLine()
+	})
+
+	function clearPrompt() {
+		const buffer = term.buffer.active
+		const lastLineIndex = buffer.baseY + buffer.cursorY
+		for (let i = lastLineIndex; i >= 0; i--) {
+			const line = buffer.getLine(i)
+
+			if (!line) break
+
+			const text = line.translateToString()
+			const position = text.indexOf(prompt)
+			if (position !== -1) {
+				const x = position + prompt.length + 1
+				term.write(`\x1b[${x}G`)
+
+				const numSpaces = text.length - x
+				term.write(' '.repeat(numSpaces))
+
+				term.write(`\x1b[${x}G`)
+				break
+			} else {
+				term.write('\x1b[2K\r')
+			}
+
+			term.write(`\x1b[1A`)
+		}
+	}
+
+	async function onScriptPick(e: { detail: { path: string } }) {
+		codeObj = await getScriptByPath(e.detail.path ?? '')
+		codeViewer?.openDrawer?.()
+	}
+
+	async function replacePromptWithCommand(command: string) {
+		clearPrompt()
+		if (!ensureTrailingLineBreak(command)) {
+			command += '\r\n'
+		}
+		input = command
+		rl.appendHistory(command)
+		term.write(command)
+		await handleCommand(input)
+		term.write(prompt)
+	}
+
+	listPendingJobs()
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<Drawer bind:this={codeViewer} size="600px">
+	<DrawerContent title="Code" on:close={codeViewer.closeDrawer}>
+		{#if codeObj}
+			<HighlightCode language={codeObj?.language} code={codeObj?.content} />
+		{:else}
+			<Skeleton layout={[[40]]} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={scriptPicker} size="900px">
+	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
+		{#if pick_existing == 'hub'}
+			<PickHubScript bind:filter kind={'script'} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</PickHubScript>
+		{:else}
+			<WorkspaceScriptPicker bind:filter kind={'script'} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</WorkspaceScriptPicker>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<div class="h-screen flex flex-col">
+	<div class="m-1 flex flex-col gap-2">
+		<div class="flex flex-col gap-1">
+			{#if pendingsJobs.length === 0}
+				<Button
+					loading={loadingPendingJobs}
+					variant="border"
+					color="light"
+					wrapperClasses="self-stretch"
+					on:click={async () => {
+						await listPendingJobs()
+						if (pendingsJobs.length === 0) {
+							sendUserToast('No pending ssh jobs found')
+						}
+					}}
+					startIcon={{ icon: RefreshCw }}
+				>
+					Load pending ssh jobs</Button
+				>
+			{:else}
+				<div class="flex gap-1">
+					<Select
+						loading={loadingPendingJobs}
+						class="grow shrink"
+						bind:value={selectedJobId}
+						items={pendingsJobs.map((pendingJob) => ({ value: pendingJob.id }))}
+						placeholder="Choose a pending job id"
+						clearable
+						disablePortal
+					/>
+					<Button
+						variant="border"
+						color="light"
+						disabled={emptyString(selectedJobId)}
+						wrapperClasses="self-stretch"
+						on:click={listPendingJobsAndUpdateSelectedJobid}
+						startIcon={{ icon: RefreshCw }}
+						iconOnly
+					/>
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						disabled={emptyString(selectedJobId)}
+						startIcon={{ icon: Eye }}
+						on:click={async () => {
+							const jobId = pendingsJobs.find((pendingsJob) => pendingsJob.id === selectedJobId)?.id
+							if (jobId) {
+								const job = await JobService.getJob({ workspace: $workspaceStore!, id: jobId })
+								codeObj = {
+									content: job.raw_code ?? '',
+									language: job.language ?? 'bash'
+								}
+								codeViewer?.openDrawer()
+							} else {
+								pendingsJobs = pendingsJobs.filter((pendingJob) => pendingJob.id !== selectedJobId)
+								selectedJobId = ''
+							}
+						}}
+						iconOnly
+					/>
+					<Button
+						loading={isCancelingJob}
+						disabled={emptyString(selectedJobId)}
+						color="red"
+						size="xs"
+						variant="border"
+						startIcon={{ icon: Square }}
+						on:click={async () => {
+							try {
+								isCancelingJob = true
+								await cancelJob(selectedJobId)
+								sendUserToast('Job cancelled successfully')
+								pendingsJobs = pendingsJobs.filter((pendingJob) => pendingJob.id !== selectedJobId)
+								selectedJobId = ''
+							} catch (error) {
+								sendUserToast(error.body || error.message, true)
+								await listPendingJobsAndUpdateSelectedJobid()
+							} finally {
+								isCancelingJob = false
+							}
+						}}
+						iconOnly
+					/>
+				</div>
+			{/if}
+		</div>
+
+		<div>
+			<div class="flex justify-start w-full mb-2">
+				<div class="flex flex-row">
+					<Badge
+						color="gray"
+						class="relative center-center !bg-gray-300 !text-tertiary dark:!bg-gray-700 dark:!text-gray-300 !h-[40px] rounded-r-none rounded-l-none"
+					>
+						Full path
+
+						<Tooltip
+							markdownTooltip="Commands run in the default directory. Run a standalone `cd` to change it. Chained or invalid `cd` commands won’t apply."
+							class="absolute top-0.5"
+						/>
+					</Badge>
+				</div>
+				<input type="text" disabled bind:value={working_directory} />
+			</div>
+
+			<div bind:this={container}></div>
+		</div>
+	</div>
+	<div class="flex flex-col h-full gap-1 mt-2">
+		<div class="flex flex-row w-full justify-between">
+			<div class="flex flex-row">
+				<Button
+					btnClasses="!font-medium text-tertiary "
+					size="xs"
+					spacingSize="md"
+					color="light"
+					startIcon={{ icon: Play }}
+					title="Run bash script"
+					on:click={async () => {
+						await replacePromptWithCommand(code)
+					}}
+				>
+					Run
+				</Button>
+				<Button
+					btnClasses="!font-medium text-tertiary "
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={scriptPicker.openDrawer}
+					startIcon={{ icon: Library }}
+					title="Explore other scripts"
+				>
+					Library
+				</Button>
+			</div>
+		</div>
+		<Editor
+			bind:this={editor}
+			useWebsockets={false}
+			bind:code
+			scriptLang="bash"
+			class="w-full h-full"
+		/>
+	</div>
+</div>
+
+<style>
+	:global(.xterm-screen) {
+		padding-left: 10px;
+	}
+</style>
diff --git a/frontend/src/lib/components/WorkerTagSelect.svelte b/frontend/src/lib/components/WorkerTagSelect.svelte
index 8cac3f0a64..616cb6d809 100644
--- a/frontend/src/lib/components/WorkerTagSelect.svelte
+++ b/frontend/src/lib/components/WorkerTagSelect.svelte
@@ -2,10 +2,8 @@
 	import { workerTags, workspaceStore } from '$lib/stores'
 	import { WorkerService } from '$lib/gen'
 
-	import Select from './apps/svelte-select/lib/index'
 	import { createEventDispatcher } from 'svelte'
-	import DarkModeObserver from './DarkModeObserver.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
+	import Select from './Select.svelte'
 
 	let {
 		tag = $bindable(),
@@ -32,57 +30,18 @@
 		...(tag && tag != '' && !($workerTags ?? []).includes(tag) ? [tag] : []),
 		...($workerTags ?? [])
 	])
-	let darkMode: boolean = $state(false)
 </script>
 
-<DarkModeObserver bind:darkMode />
-
 <div class="flex gap-1 items-center">
 	{#if !noLabel}
 		<div class="text-tertiary text-2xs">tag</div>
 	{/if}
 	<Select
+		clearable
+		class="w-full"
 		{disabled}
 		placeholder={nullTag ? `default: ${nullTag}` : 'lang default'}
-		containerStyles={'--height: 30px !important; --input-padding: 0px !important; ' +
-			(darkMode
-				? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-				: SELECT_INPUT_DEFAULT_STYLE.containerStyles)}
-		{items}
-		value={tag ? { value: tag, label: tag } : undefined}
-		on:clear={() => {
-			tag = undefined
-			dispatch('change', undefined)
-		}}
-		on:change={(e) => {
-			console.log('change', e.detail)
-			dispatch('change', e.detail.value)
-		}}
-		bind:justValue={tag}
+		items={items.map((value) => ({ value }))}
+		bind:value={() => tag, (value) => ((tag = value), dispatch('change', value))}
 	/>
-
-	<!-- <select
-		class="min-w-32"
-		placeholder="Tag"
-		bind:value={tag}
-		onchange={(e) => {
-			if (tag == '') {
-				tag = undefined
-			}
-			dispatch('change', tag)
-		}}
-		{disabled}
-	>
-		{#if tag}
-			<option value="">reset to default</option>
-		{:else}
-			<option value={undefined} disabled selected>{nullTag ? `default: ${nullTag}` : ''}</option>
-		{/if}
-		{#if tag && tag != '' && !($workerTags ?? []).includes(tag)}
-			<option value={tag} selected>{tag}</option>
-		{/if}
-		{#each $workerTags ?? [] as tag (tag)}
-			<option value={tag}>{tag}</option>
-		{/each}
-	</select> -->
 </div>
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 5ad842ba6c..8ec9475f30 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import { getContext, onDestroy } from 'svelte'
+	import { getContext, onDestroy, untrack } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type {
 		AppViewerContext,
@@ -22,25 +22,45 @@
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import Portal from '$lib/components/Portal.svelte'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let configuration: RichConfigurations
-	export let recomputeIds: string[] | undefined = undefined
-	export let extraQueryParams: Record<string, any> = {}
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let noWFull = false
-	export let preclickAction: (() => Promise<void>) | undefined = undefined
-	export let customCss: ComponentCustomCSS<'buttoncomponent'> | undefined = undefined
-	export let render: boolean
-	export let errorHandledByComponent: boolean | undefined = false
-	export let extraKey: string | undefined = undefined
-	export let isMenuItem: boolean = false
-	export let noInitialize = false
-	export let replaceCallback: boolean = false
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		configuration: RichConfigurations
+		recomputeIds?: string[] | undefined
+		extraQueryParams?: Record<string, any>
+		horizontalAlignment?: 'left' | 'center' | 'right' | undefined
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+		noWFull?: boolean
+		preclickAction?: (() => Promise<void>) | undefined
+		customCss?: ComponentCustomCSS<'buttoncomponent'> | undefined
+		render: boolean
+		errorHandledByComponent?: boolean | undefined
+		extraKey?: string | undefined
+		isMenuItem?: boolean
+		noInitialize?: boolean
+		replaceCallback?: boolean
+		controls?: { left: () => boolean; right: () => boolean | string } | undefined
+	}
 
-	export let controls: { left: () => boolean; right: () => boolean | string } | undefined =
-		undefined
+	let {
+		id,
+		componentInput,
+		configuration,
+		recomputeIds = undefined,
+		extraQueryParams = {},
+		horizontalAlignment = undefined,
+		verticalAlignment = undefined,
+		noWFull = false,
+		preclickAction = undefined,
+		customCss = undefined,
+		render,
+		errorHandledByComponent = $bindable(false),
+		extraKey = undefined,
+		isMenuItem = false,
+		noInitialize = false,
+		replaceCallback = false,
+		controls = undefined
+	}: Props = $props()
 
 	const { worldStore, app, componentControl, selectedComponent } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -49,13 +69,10 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let resolvedConfig = initConfig(
-		components['buttoncomponent'].initialData.configuration,
-		configuration
+	let resolvedConfig = $state(
+		initConfig(components['buttoncomponent'].initialData.configuration, configuration)
 	)
 
-	$: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
-
 	let outputs = initOutput($worldStore, id, {
 		result: undefined,
 		loading: false,
@@ -66,15 +83,12 @@
 		$componentControl[id] = controls
 	}
 
-	let runnableComponent: RunnableComponent
+	let runnableComponent: RunnableComponent | undefined = $state()
 
-	let confirmedCallback: (() => void) | undefined = undefined
+	let confirmedCallback: (() => void) | undefined = $state(undefined)
 
-	let beforeIconComponent: any
-	let afterIconComponent: any
-
-	$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
-	$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
+	let beforeIconComponent: any = $state()
+	let afterIconComponent: any = $state()
 
 	function getIconSize() {
 		switch (resolvedConfig.size as 'xs' | 'xs2' | 'xs3' | 'sm' | 'md' | 'lg' | 'xl') {
@@ -127,10 +141,7 @@
 	})
 
 	let errors: Record<string, string> = {}
-	$: errorsMessage = Object.values(errors)
-		.filter((x) => x != '')
-		.join('\n')
-	let runnableWrapper: RunnableWrapper
+	let runnableWrapper: RunnableWrapper | undefined = $state()
 
 	async function handleClick(event: CustomEvent) {
 		event?.stopPropagation()
@@ -162,9 +173,23 @@
 			await action()
 		}
 	}
-	let loading = false
+	let loading = $state(false)
 
-	let css = initCss($app.css?.buttoncomponent, customCss)
+	let css = $state(initCss($app.css?.buttoncomponent, customCss))
+	$effect(() => {
+		errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
+	})
+	$effect.pre(() => {
+		resolvedConfig.beforeIcon && beforeIconComponent && untrack(() => handleBeforeIcon())
+	})
+	$effect.pre(() => {
+		resolvedConfig.afterIcon && afterIconComponent && untrack(() => handleAfterIcon())
+	})
+	let errorsMessage = $derived(
+		Object.values(errors)
+			.filter((x) => x != '')
+			.join('\n')
+	)
 </script>
 
 {#each Object.entries(components['buttoncomponent'].initialData.configuration) as [key, initialConfig] (key)}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
index b4e3b575be..3df674e5b0 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -14,17 +14,29 @@
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 	import { User } from 'lucide-svelte'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let configuration: RichConfigurations
-	export let recomputeIds: string[] | undefined = undefined
-	export let extraQueryParams: Record<string, any> = {}
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let customCss: ComponentCustomCSS<'formcomponent'> | undefined = undefined
-	export let render: boolean
-	export let errorHandledByComponent: boolean | undefined = false
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		configuration: RichConfigurations
+		recomputeIds?: string[] | undefined
+		extraQueryParams?: Record<string, any>
+		horizontalAlignment?: 'left' | 'center' | 'right' | undefined
+		customCss?: ComponentCustomCSS<'formcomponent'> | undefined
+		render: boolean
+		errorHandledByComponent?: boolean | undefined
+	}
 
-	$: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
+	let {
+		id,
+		componentInput,
+		configuration,
+		recomputeIds = undefined,
+		extraQueryParams = {},
+		horizontalAlignment = undefined,
+		customCss = undefined,
+		render,
+		errorHandledByComponent = $bindable(false)
+	}: Props = $props()
 
 	export const staticOutputs: string[] = ['loading', 'result', 'jobId']
 
@@ -37,9 +49,8 @@
 		jobId: undefined
 	})
 
-	const resolvedConfig = initConfig(
-		components['formcomponent'].initialData.configuration,
-		configuration
+	const resolvedConfig = $state(
+		initConfig(components['formcomponent'].initialData.configuration, configuration)
 	)
 
 	$componentControl[id] = {
@@ -57,16 +68,19 @@
 		}
 	}
 
-	let runnableComponent: RunnableComponent
-	let loading = false
+	let runnableComponent: RunnableComponent | undefined = $state()
+	let loading = $state(false)
 
-	$: noInputs =
+	let css = $state(initCss($app.css?.formcomponent, customCss))
+
+	let wrapper: RunnableWrapper | undefined = $state()
+	$effect(() => {
+		errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
+	})
+	let noInputs = $derived(
 		$stateId != undefined &&
-		(componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0)
-
-	let css = initCss($app.css?.formcomponent, customCss)
-
-	let wrapper: RunnableWrapper
+			(componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0)
+	)
 </script>
 
 {#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
index 453d964d45..4aa606da82 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -15,18 +15,31 @@
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let configuration: RichConfigurations
-	export let recomputeIds: string[] | undefined = undefined
-	export let extraQueryParams: Record<string, any> = {}
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let customCss: ComponentCustomCSS<'formbuttoncomponent'> | undefined = undefined
-	export let render: boolean
-	export let errorHandledByComponent: boolean | undefined = false
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		configuration: RichConfigurations
+		recomputeIds?: string[] | undefined
+		extraQueryParams?: Record<string, any>
+		horizontalAlignment?: 'left' | 'center' | 'right' | undefined
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+		customCss?: ComponentCustomCSS<'formbuttoncomponent'> | undefined
+		render: boolean
+		errorHandledByComponent?: boolean | undefined
+	}
 
-	$: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
+	let {
+		id,
+		componentInput,
+		configuration,
+		recomputeIds = undefined,
+		extraQueryParams = {},
+		horizontalAlignment = undefined,
+		verticalAlignment = undefined,
+		customCss = undefined,
+		render,
+		errorHandledByComponent = $bindable(false)
+	}: Props = $props()
 
 	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -50,25 +63,28 @@
 		loading: false
 	})
 
-	let resolvedConfig = initConfig(
-		components['formbuttoncomponent'].initialData.configuration,
-		configuration
+	let resolvedConfig = $state(
+		initConfig(components['formbuttoncomponent'].initialData.configuration, configuration)
 	)
-	let runnableComponent: RunnableComponent
+	let runnableComponent: RunnableComponent | undefined = $state()
 
 	let errors: Record<string, string> = {}
 
-	$: errorsMessage = Object.values(errors)
-		.filter((x) => x != '')
-		.join('\n')
-
-	$: noInputs =
+	let css = $state(initCss($app?.css?.formbuttoncomponent, customCss))
+	let runnableWrapper: RunnableWrapper | undefined = $state()
+	let loading = $state(false)
+	let modal: AlwaysMountedModal | undefined = $state()
+	$effect(() => {
+		errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
+	})
+	let errorsMessage = $derived(
+		Object.values(errors)
+			.filter((x) => x != '')
+			.join('\n')
+	)
+	let noInputs = $derived(
 		componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0
-
-	let css = initCss($app?.css?.formbuttoncomponent, customCss)
-	let runnableWrapper: RunnableWrapper
-	let loading = false
-	let modal: AlwaysMountedModal
+	)
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
index 7ab70a7669..f4a585dd70 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { getContext, onDestroy } from 'svelte'
+	import { stopPropagation } from 'svelte/legacy'
+
+	import { getContext, onDestroy, untrack } from 'svelte'
 	import { initConfig, initOutput, selectId } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type {
@@ -22,12 +24,23 @@
 	import { userStore } from '$lib/stores'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let initializing: boolean | undefined = undefined
-	export let render: boolean
-	export let configuration: RichConfigurations
-	export let customCss: ComponentCustomCSS<'schemaformcomponent'> | undefined = undefined
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		initializing?: boolean | undefined
+		render: boolean
+		configuration: RichConfigurations
+		customCss?: ComponentCustomCSS<'schemaformcomponent'> | undefined
+	}
+
+	let {
+		id,
+		componentInput,
+		initializing = $bindable(undefined),
+		render,
+		configuration,
+		customCss = undefined
+	}: Props = $props()
 
 	const {
 		worldStore,
@@ -49,18 +62,17 @@
 		values: {}
 	})
 
-	let result: Schema | undefined = undefined
-	let args: Record<string, unknown> = !iterContext ? outputs?.values?.peak() ?? {} : {}
+	let result: Schema | undefined = $state(undefined)
+	let args: Record<string, unknown> = $state(!iterContext ? (outputs?.values?.peak() ?? {}) : {})
 
 	function handleArgsChange() {
 		const newArgs: Record<string, unknown> = {}
 
 		for (const key in args) {
-			if (result?.properties[key]) {
+			if (result?.properties?.[key]) {
 				newArgs[key] = args[key]
 			}
 		}
-
 		outputs.values.set(newArgs, true)
 		if (iterContext && listInputs) {
 			listInputs.set(id, newArgs)
@@ -71,7 +83,7 @@
 		listInputs?.remove(id)
 	})
 
-	let schemaForm: SchemaForm
+	let schemaForm: SchemaForm | undefined = $state()
 
 	$componentControl[id] = {
 		setValue(nvalue: any) {
@@ -89,27 +101,18 @@
 		}
 	}
 
-	$: args && handleArgsChange()
+	let css = $state(initCss($app.css?.schemaformcomponent, customCss))
 
-	$: outputs.valid.set(valid)
-
-	let css = initCss($app.css?.schemaformcomponent, customCss)
-
-	const resolvedConfig = initConfig(
-		components['schemaformcomponent'].initialData.configuration,
-		configuration
+	const resolvedConfig = $state(
+		initConfig(components['schemaformcomponent'].initialData.configuration, configuration)
 	)
 
-	let valid = true
+	let valid = $state(true)
 
-	let previousDefault = resolvedConfig.defaultValues
-
-	$: resolvedConfig.defaultValues &&
-		!deepEqual(previousDefault, resolvedConfig.defaultValues) &&
-		onDefaultChange()
+	let previousDefault = $state(resolvedConfig.defaultValues)
 
 	function onDefaultChange() {
-		previousDefault = structuredClone(resolvedConfig.defaultValues)
+		previousDefault = structuredClone($state.snapshot(resolvedConfig.defaultValues))
 		args = previousDefault ?? {}
 	}
 
@@ -120,6 +123,25 @@
 		const policy = computeWorkspaceS3FileInputPolicy()
 		return policy
 	}
+	$effect(() => {
+		if (!args) return
+		for (const key in args) {
+			args[key]
+		}
+		result
+		untrack(() => handleArgsChange())
+	})
+	$effect(() => {
+		outputs.valid.set(valid)
+	})
+	$effect(() => {
+		resolvedConfig.defaultValues &&
+			!deepEqual(
+				untrack(() => previousDefault),
+				resolvedConfig.defaultValues
+			) &&
+			untrack(() => onDefaultChange())
+	})
 </script>
 
 {#each Object.keys(components['schemaformcomponent'].initialData.configuration) as key (key)}
@@ -148,8 +170,10 @@
 			style={css?.container?.style}
 		>
 			<div
-				on:pointerdown|stopPropagation={(e) =>
-					!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+				onpointerdown={stopPropagation(
+					(e) =>
+						!$connectingInput.opened && selectId(e as PointerEvent, id, selectedComponent, $app)
+				)}
 			>
 				<SchemaForm
 					noVariablePicker
diff --git a/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte b/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
index e322e9e783..5155aeb051 100644
--- a/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { getContext } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
@@ -11,12 +14,23 @@
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let customCss: ComponentCustomCSS<'accordionlistcomponent'> | undefined = undefined
-	export let render: boolean
-	export let initializing: boolean | undefined
-	export let componentContainerHeight: number
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		customCss?: ComponentCustomCSS<'accordionlistcomponent'> | undefined
+		render: boolean
+		initializing: boolean | undefined
+		componentContainerHeight: number
+	}
+
+	let {
+		id,
+		componentInput,
+		customCss = undefined,
+		render,
+		initializing = $bindable(),
+		componentContainerHeight
+	}: Props = $props()
 
 	type AccordionListValue = { header: string; [key: string]: any }
 
@@ -24,16 +38,18 @@
 		value: AccordionListValue[]
 	}
 
-	$: accordionInput = componentInput as InternalAccordionListInput
+	let accordionInput = $derived(componentInput as InternalAccordionListInput)
 
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = render
+	let everRender = $state(render)
 
-	$: render && !everRender && (everRender = true)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
-	let activeIndex: number = 0
+	let activeIndex: number = $state(0)
 
 	const outputs = initOutput($worldStore, id, {
 		result: undefined,
@@ -49,17 +65,19 @@
 		}
 	}
 
-	let css = initCss($app.css?.accordionlistcomponent, customCss)
-	let result: any[] | undefined = undefined
+	let css = $state(initCss($app.css?.accordionlistcomponent, customCss))
+	let result: any[] | undefined = $state(undefined)
 
-	let inputs = {}
+	let inputs = $state({})
 
-	$: $selectedComponent?.includes(id) &&
-		$focusedGrid === undefined &&
-		($focusedGrid = {
-			parentComponentId: id,
-			subGridIndex: 0
-		})
+	$effect.pre(() => {
+		$selectedComponent?.includes(id) &&
+			$focusedGrid === undefined &&
+			($focusedGrid = {
+				parentComponentId: id,
+				subGridIndex: 0
+			})
+	})
 
 	function toggleAccordion(index: number) {
 		activeIndex = activeIndex === index ? -1 : index
@@ -95,8 +113,8 @@
 					{#each result ?? [] as value, index}
 						<div class="border-b">
 							<button
-								on:pointerdown|stopPropagation
-								on:click={() => toggleAccordion(index)}
+								onpointerdown={stopPropagation(bubble('pointerdown'))}
+								onclick={() => toggleAccordion(index)}
 								class={twMerge(
 									'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',
 									'wm-tabs-alltabs',
diff --git a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
index a8a2dce0e9..14c7aee81d 100644
--- a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
@@ -16,19 +16,33 @@
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let configuration: RichConfigurations
-	export let customCss: ComponentCustomCSS<'carousellistcomponent'> | undefined = undefined
-	export let render: boolean
-	export let initializing: boolean | undefined
-	export let componentContainerHeight: number
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		configuration: RichConfigurations
+		customCss?: ComponentCustomCSS<'carousellistcomponent'> | undefined
+		render: boolean
+		initializing: boolean | undefined
+		componentContainerHeight: number
+	}
+
+	let {
+		id,
+		componentInput,
+		configuration,
+		customCss = undefined,
+		render,
+		initializing = $bindable(),
+		componentContainerHeight
+	}: Props = $props()
 
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let everRender = $state(render)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	const outputs = initOutput($worldStore, id, {
 		result: undefined,
@@ -36,9 +50,8 @@
 		inputs: {}
 	})
 
-	const resolvedConfig = initConfig(
-		components['carousellistcomponent'].initialData.configuration,
-		configuration
+	const resolvedConfig = $state(
+		initConfig(components['carousellistcomponent'].initialData.configuration, configuration)
 	)
 
 	function onFocus() {
@@ -48,19 +61,21 @@
 		}
 	}
 
-	let css = initCss($app.css?.carousellistcomponent, customCss)
-	let result: any[] | undefined = undefined
+	let css = $state(initCss($app.css?.carousellistcomponent, customCss))
+	let result: any[] | undefined = $state(undefined)
 
-	let inputs = {}
-	let carousel: Carousel
+	let inputs = $state({})
+	let carousel: Carousel = $state()
 
-	$: $selectedComponent?.includes(id) &&
-		$focusedGrid === undefined &&
-		($focusedGrid = {
-			parentComponentId: id,
-			subGridIndex: 0
-		})
-	let currentPageIndex = 0
+	$effect.pre(() => {
+		$selectedComponent?.includes(id) &&
+			$focusedGrid === undefined &&
+			($focusedGrid = {
+				parentComponentId: id,
+				subGridIndex: 0
+			})
+	})
+	let currentPageIndex = $state(0)
 </script>
 
 {#each Object.keys(components['carousellistcomponent'].initialData.configuration) as key (key)}
@@ -116,41 +131,45 @@
 								}
 							}}
 						>
-							<div slot="prev" class="h-full flex justify-center flex-col p-2">
-								<div>
-									<Button
-										color="light"
-										on:click={() => {
-											const pagesCount = result?.length ?? 0
+							{#snippet prev()}
+								<div class="h-full flex justify-center flex-col p-2">
+									<div>
+										<Button
+											color="light"
+											on:click={() => {
+												const pagesCount = result?.length ?? 0
 
-											if (currentPageIndex > 0) {
-												carousel.goTo(currentPageIndex - 1)
-											} else {
-												carousel.goTo(pagesCount - 1)
-											}
-										}}
-									>
-										<ArrowLeftCircle size={16} />
-									</Button>
+												if (currentPageIndex > 0) {
+													carousel.goTo(currentPageIndex - 1)
+												} else {
+													carousel.goTo(pagesCount - 1)
+												}
+											}}
+										>
+											<ArrowLeftCircle size={16} />
+										</Button>
+									</div>
 								</div>
-							</div>
-							<div slot="next" class="h-full flex justify-center flex-col p-2">
-								<div>
-									<Button
-										color="light"
-										on:click={() => {
-											const pagesCount = result?.length ?? 0
-											if (currentPageIndex < pagesCount - 1) {
-												carousel.goTo(currentPageIndex + 1)
-											} else {
-												carousel.goTo(0)
-											}
-										}}
-									>
-										<ArrowRightCircle size={16} />
-									</Button>
+							{/snippet}
+							{#snippet next()}
+								<div class="h-full flex justify-center flex-col p-2">
+									<div>
+										<Button
+											color="light"
+											on:click={() => {
+												const pagesCount = result?.length ?? 0
+												if (currentPageIndex < pagesCount - 1) {
+													carousel.goTo(currentPageIndex + 1)
+												} else {
+													carousel.goTo(0)
+												}
+											}}
+										>
+											<ArrowRightCircle size={16} />
+										</Button>
+									</div>
 								</div>
-							</div>
+							{/snippet}
 							{#each result ?? [] as value, index}
 								<div class="overflow-auto w-full">
 									<ListWrapper
diff --git a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
index 114e349ce7..e334e2ab2d 100644
--- a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
@@ -17,22 +17,32 @@
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	import { userStore } from '$lib/stores'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let initializing: boolean | undefined = undefined
-	export let customCss: ComponentCustomCSS<'displaycomponent'> | undefined = undefined
-	export let render: boolean
-	export let configuration: RichConfigurations
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		initializing?: boolean | undefined
+		customCss?: ComponentCustomCSS<'displaycomponent'> | undefined
+		render: boolean
+		configuration: RichConfigurations
+	}
+
+	let {
+		id,
+		componentInput,
+		initializing = $bindable(undefined),
+		customCss = undefined,
+		render,
+		configuration
+	}: Props = $props()
 
 	const requireHtmlApproval = getContext<boolean | undefined>(IS_APP_PUBLIC_CONTEXT_KEY)
 	const { app, worldStore, componentControl, workspace, appPath } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let result: any = undefined
+	let result: any = $state(undefined)
 
-	const resolvedConfig = initConfig(
-		components['displaycomponent'].initialData.configuration,
-		configuration
+	const resolvedConfig = $state(
+		initConfig(components['displaycomponent'].initialData.configuration, configuration)
 	)
 
 	$componentControl[id] = {
@@ -46,7 +56,7 @@
 		loading: false
 	})
 
-	let css = initCss($app.css?.displaycomponent, customCss)
+	let css = $state(initCss($app.css?.displaycomponent, customCss))
 </script>
 
 {#each Object.keys(components['displaycomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
index 7fd1cb16ae..17a2546f02 100644
--- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
@@ -19,13 +21,25 @@
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import { Menubar, Menu, MeltButton } from '$lib/components/meltComponents'
 
-	export let id: string
-	export let configuration: RichConfigurations
-	export let customCss: ComponentCustomCSS<'menucomponent'> | undefined = undefined
-	export let render: boolean
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let menuItems: (BaseAppComponent & ButtonComponent)[]
+	interface Props {
+		id: string
+		configuration: RichConfigurations
+		customCss?: ComponentCustomCSS<'menucomponent'> | undefined
+		render: boolean
+		horizontalAlignment?: 'left' | 'center' | 'right' | undefined
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+		menuItems: (BaseAppComponent & ButtonComponent)[]
+	}
+
+	let {
+		id,
+		configuration,
+		customCss = undefined,
+		render,
+		horizontalAlignment = undefined,
+		verticalAlignment = undefined,
+		menuItems
+	}: Props = $props()
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -35,18 +49,14 @@
 		}
 	})
 
-	const resolvedConfig = initConfig(
-		components['menucomponent'].initialData.configuration,
-		configuration
+	const resolvedConfig = $state(
+		initConfig(components['menucomponent'].initialData.configuration, configuration)
 	)
 
-	let css = initCss($app.css?.menucomponent, customCss)
+	let css = $state(initCss($app.css?.menucomponent, customCss))
 
-	let beforeIconComponent: any
-	let afterIconComponent: any
-
-	$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
-	$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
+	let beforeIconComponent: any = $state()
+	let afterIconComponent: any = $state()
 
 	async function handleBeforeIcon() {
 		if (resolvedConfig.beforeIcon) {
@@ -71,6 +81,12 @@
 			)
 		}
 	}
+	run(() => {
+		resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
+	})
+	run(() => {
+		resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
+	})
 </script>
 
 <InitializeComponent {id} />
@@ -96,83 +112,85 @@
 
 {#if render}
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		<Menubar let:createMenu class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}>
-			<Menu
-				{createMenu}
-				placement="bottom-end"
-				justifyEnd={false}
-				class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
-				usePointerDownOutside={true}
-				renderContent
-			>
-				<svelte:fragment slot="trigger" let:trigger>
-					<MeltButton meltElement={trigger} class="w-full h-full">
-						<Button
-							on:pointerdown={(e) => e.stopPropagation()}
-							btnClasses={twMerge(
-								css?.button?.class,
-								'wm-button',
-								'wm-menu-button',
-								resolvedConfig.fillContainer ? 'w-full h-full' : ''
-							)}
-							wrapperClasses={twMerge(
-								'wm-button-container',
-								'wm-menu-button-container',
-								resolvedConfig.fillContainer ? 'w-full h-full' : ''
-							)}
-							style={css?.button?.style}
-							size={resolvedConfig.size}
-							color={resolvedConfig.color}
-							nonCaptureEvent
-						>
-							<span class="truncate inline-flex gap-2 items-center">
-								{#if resolvedConfig.beforeIcon}
-									{#key resolvedConfig.beforeIcon}
-										<div class="min-w-4" bind:this={beforeIconComponent}></div>
-									{/key}
-								{/if}
-								{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
-									<div>{resolvedConfig.label}</div>
-								{/if}
-								{#if resolvedConfig.afterIcon}
-									{#key resolvedConfig.afterIcon}
-										<div class="min-w-4" bind:this={afterIconComponent}></div>
-									{/key}
-								{/if}
-							</span>
-						</Button>
-					</MeltButton>
-				</svelte:fragment>
+		<Menubar class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}>
+			{#snippet children({ createMenu })}
+				<Menu
+					{createMenu}
+					placement="bottom-end"
+					justifyEnd={false}
+					class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
+					usePointerDownOutside={true}
+					renderContent
+				>
+					{#snippet triggr({ trigger })}
+						<MeltButton meltElement={trigger} class="w-full h-full">
+							<Button
+								on:pointerdown={(e) => e.stopPropagation()}
+								btnClasses={twMerge(
+									css?.button?.class,
+									'wm-button',
+									'wm-menu-button',
+									resolvedConfig.fillContainer ? 'w-full h-full' : ''
+								)}
+								wrapperClasses={twMerge(
+									'wm-button-container',
+									'wm-menu-button-container',
+									resolvedConfig.fillContainer ? 'w-full h-full' : ''
+								)}
+								style={css?.button?.style}
+								size={resolvedConfig.size}
+								color={resolvedConfig.color}
+								nonCaptureEvent
+							>
+								<span class="truncate inline-flex gap-2 items-center">
+									{#if resolvedConfig.beforeIcon}
+										{#key resolvedConfig.beforeIcon}
+											<div class="min-w-4" bind:this={beforeIconComponent}></div>
+										{/key}
+									{/if}
+									{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
+										<div>{resolvedConfig.label}</div>
+									{/if}
+									{#if resolvedConfig.afterIcon}
+										{#key resolvedConfig.afterIcon}
+											<div class="min-w-4" bind:this={afterIconComponent}></div>
+										{/key}
+									{/if}
+								</span>
+							</Button>
+						</MeltButton>
+					{/snippet}
 
-				<div class="flex flex-col w-full p-1 gap-2 max-h-[50vh] overflow-y-auto">
-					{#if menuItems.length > 0}
-						{#each menuItems as actionButton, actionIndex (actionButton?.id)}
-							{#if actionButton.type == 'buttoncomponent'}
-								<div
-									on:pointerup={() => {
-										outputs?.result.set({
-											latestButtonClicked: actionButton.id
-										})
-									}}
-								>
-									<AppButton
-										noInitialize
-										extraKey={'idx' + actionIndex}
-										render={true}
-										id={actionButton.id}
-										customCss={actionButton.customCss}
-										configuration={actionButton.configuration}
-										recomputeIds={actionButton.recomputeIds}
-										componentInput={actionButton.componentInput}
-										noWFull={false}
-										isMenuItem={true}
-									/>
-								</div>
-							{/if}
-						{/each}
-					{/if}
-				</div>
-			</Menu>
+					<div class="flex flex-col w-full p-1 gap-2 max-h-[50vh] overflow-y-auto">
+						{#if menuItems.length > 0}
+							{#each menuItems as actionButton, actionIndex (actionButton?.id)}
+								{#if actionButton.type == 'buttoncomponent'}
+									<div
+										onpointerup={() => {
+											outputs?.result.set({
+												latestButtonClicked: actionButton.id
+											})
+										}}
+									>
+										<AppButton
+											noInitialize
+											extraKey={'idx' + actionIndex}
+											render={true}
+											id={actionButton.id}
+											customCss={actionButton.customCss}
+											configuration={actionButton.configuration}
+											recomputeIds={actionButton.recomputeIds}
+											componentInput={actionButton.componentInput}
+											noWFull={false}
+											isMenuItem={true}
+										/>
+									</div>
+								{/if}
+							{/each}
+						{/if}
+					</div>
+				</Menu>
+			{/snippet}
 		</Menubar>
 	</AlignWrapper>
 {/if}
diff --git a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
index fb7d1aaf6e..ed3330c518 100644
--- a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
+++ b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
@@ -45,7 +45,7 @@
 
 <Drawer bind:this={insertDrawer} size="800px">
 	<DrawerContent title="Insert row" on:close={insertDrawer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				color="dark"
 				size="xs"
@@ -55,7 +55,7 @@
 			>
 				Insert
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 		<InsertRow bind:args bind:isInsertable {columnDefs} {dbType} />
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
index 32b0ea7993..4b4f6f5318 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
@@ -75,9 +75,7 @@
 		// @ts-ignore
 		gridItem.data.configuration.columnDefs = { value: [], type: 'static', loading: false }
 
-		$app = {
-			...$app
-		}
+		$app = $app
 	}
 
 	const resolvedConfig = initConfig(
@@ -230,9 +228,7 @@
 		)
 
 		if (!resolvedConfig.type?.configuration?.[resolvedConfig.type.selected]?.resource) {
-			$app = {
-				...$app
-			}
+			$app = $app
 			return
 		}
 
@@ -265,9 +261,7 @@
 				}
 			)
 
-			$app = {
-				...$app
-			}
+			$app = $app
 		} catch (e) {}
 	}
 
@@ -680,19 +674,3 @@
 		{/if}
 	</div>
 </RunnableWrapper>
-
-<!-- <Portal name="db-explorer">
-	<Drawer bind:this={insertDrawer} size="800px">
-		<DrawerContent title="Insert row" on:close={insertDrawer.closeDrawer}>
-			<svelte:fragment slot="actions">
-				<Button color="dark" size="xs" on:click={insert} disabled={!isInsertable}>Insert</Button>
-			</svelte:fragment>
-			<InsertRow
-				bind:args
-				bind:isInsertable
-				columnDefs={resolvedConfig.columnDefs}
-				dbType={resolvedConfig.type.selected}
-			/>
-		</DrawerContent>
-	</Drawer>
-</Portal> -->
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/InsertRow.svelte b/frontend/src/lib/components/apps/components/display/dbtable/InsertRow.svelte
index 7cade07098..375975c28d 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/InsertRow.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/InsertRow.svelte
@@ -15,13 +15,9 @@
 
 	import { argSigToJsonSchemaType } from '$lib/inferArgSig'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
+	import { untrack } from 'svelte'
 
-	export let args: Record<string, any> = {}
-	export let dbType: DbType = 'postgresql'
-
-	let schema: Schema | undefined = undefined
-
-	export let columnDefs: Array<ColumnDef & ColumnMetadata> = []
+	let schema: Schema | undefined = $state(undefined)
 
 	type FieldMetadata = {
 		type: string
@@ -32,28 +28,6 @@
 		nullable: 'YES' | 'NO'
 	}
 
-	$: fields = columnDefs
-		?.filter((t) => {
-			const shouldFilter = t.isidentity === ColumnIdentity.Always || t?.hideInsert === true
-
-			return !shouldFilter
-		})
-		.map((column) => {
-			const type = column.datatype
-			const name = column.field
-			const isPrimaryKey = column.isprimarykey
-			const defaultValue = column.defaultValueNull ? null : column.defaultUserValue
-
-			return {
-				type,
-				name,
-				isPrimaryKey,
-				defaultValue,
-				identity: column.isidentity,
-				nullable: column.isnullable
-			}
-		}) as FieldMetadata[] | undefined
-
 	function parseSQLArgs(field: string, dbType: DbType): string {
 		let rawType = ''
 		switch (dbType) {
@@ -141,18 +115,57 @@
 		} as Schema
 	}
 
-	$: builtSchema(fields ?? [], dbType)
-
-	export let isInsertable: boolean = false
-
-	$: if (schema) {
-		const requiredFields = schema.required ?? []
-		const filledFields = Object.keys(args).filter(
-			(key) => args[key] !== undefined && args[key] !== null && args[key] !== ''
-		)
-
-		isInsertable = requiredFields.every((field) => filledFields.includes(field))
+	interface Props {
+		args?: Record<string, any>
+		dbType?: DbType
+		columnDefs?: Array<ColumnDef & ColumnMetadata>
+		isInsertable?: boolean
 	}
+
+	let {
+		args = $bindable({}),
+		dbType = 'postgresql',
+		columnDefs = [],
+		isInsertable = $bindable(false)
+	}: Props = $props()
+
+	let fields = $derived(
+		columnDefs
+			?.filter((t) => {
+				const shouldFilter = t.isidentity === ColumnIdentity.Always || t?.hideInsert === true
+
+				return !shouldFilter
+			})
+			.map((column) => {
+				const type = column.datatype
+				const name = column.field
+				const isPrimaryKey = column.isprimarykey
+				const defaultValue = column.defaultValueNull ? null : column.defaultUserValue
+
+				return {
+					type,
+					name,
+					isPrimaryKey,
+					defaultValue,
+					identity: column.isidentity,
+					nullable: column.isnullable
+				}
+			}) as FieldMetadata[] | undefined
+	)
+	$effect(() => {
+		;[fields, dbType]
+		untrack(() => builtSchema(fields ?? [], dbType))
+	})
+	$effect(() => {
+		if (schema) {
+			const requiredFields = schema.required ?? []
+			const filledFields = Object.keys(args).filter(
+				(key) => args[key] !== undefined && args[key] !== null && args[key] !== ''
+			)
+
+			isInsertable = requiredFields.every((field) => filledFields.includes(field))
+		}
+	})
 </script>
 
 {#if schema}
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/utils.ts b/frontend/src/lib/components/apps/components/display/dbtable/utils.ts
index 0c3fce722f..05b30ec1f2 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/utils.ts
+++ b/frontend/src/lib/components/apps/components/display/dbtable/utils.ts
@@ -8,7 +8,7 @@ import {
 } from 'graphql'
 import { tryEvery } from '$lib/utils'
 import { stringifySchema } from '$lib/components/copilot/lib'
-import { runPreviewJobAndPollResult } from '$lib/components/jobs/utils'
+import { runScriptAndPollResult } from '$lib/components/jobs/utils'
 
 export enum ColumnIdentity {
 	ByDefault = 'By Default',
@@ -114,7 +114,7 @@ export async function loadAllTablesMetaData(
 	}
 
 	try {
-		let result = (await runPreviewJobAndPollResult({
+		let result = (await runScriptAndPollResult({
 			workspace: workspace,
 			requestBody: {
 				language: getLanguageByResourceType(resourceType),
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
index 23bdd885bc..b4c4b81ab5 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
@@ -20,7 +20,7 @@
 	import { ColumnIdentity, type ColumnDef } from '../dbtable/utils'
 	import AppAggridTableActions from './AppAggridTableActions.svelte'
 	import Popover from '$lib/components/Popover.svelte'
-	import { withProps } from '$lib/svelte5Utils.svelte'
+	import { stateSnapshot, withProps } from '$lib/svelte5Utils.svelte'
 
 	export let id: string
 	export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined
@@ -111,7 +111,7 @@
 
 	function refreshActions(actions: TableAction[]) {
 		if (!deepEqual(actions, lastActions)) {
-			lastActions = structuredClone(actions)
+			lastActions = structuredClone(stateSnapshot(actions))
 			updateOptions()
 		}
 	}
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index 484f11133a..8f0b760830 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -41,7 +41,7 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import { Button } from '$lib/components/common'
 	import InputValue from '../../helpers/InputValue.svelte'
-	import { withProps } from '$lib/svelte5Utils.svelte'
+	import { stateSnapshot, withProps } from '$lib/svelte5Utils.svelte'
 
 	// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 
@@ -206,7 +206,7 @@
 
 	function refreshActions(actions: TableAction[]) {
 		if (!deepEqual(actions, lastActions)) {
-			lastActions = structuredClone(actions)
+			lastActions = structuredClone(stateSnapshot(actions))
 			updateOptions()
 		}
 	}
diff --git a/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte
index ee04134185..478484f91f 100644
--- a/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte
@@ -3,27 +3,42 @@
 	import type { HorizontalAlignment, VerticalAlignment } from '../../types'
 	import { tailwindHorizontalAlignment, tailwindVerticalAlignment } from '../../utils'
 
-	export let horizontalAlignment: HorizontalAlignment | undefined = undefined
-	export let verticalAlignment: VerticalAlignment | undefined = undefined
-	export let noWFull = false
-	export let hFull = false
-	let c = ''
-	export { c as class }
-	export let style = ''
-	export let render: boolean = true
+	interface Props {
+		horizontalAlignment?: HorizontalAlignment | undefined
+		verticalAlignment?: VerticalAlignment | undefined
+		noWFull?: boolean
+		hFull?: boolean
+		class?: string
+		style?: string
+		render?: boolean
+		children?: import('svelte').Snippet
+	}
 
-	$: classes = twMerge(
-		'flex z-auto',
-		noWFull ? '' : 'w-full',
-		tailwindHorizontalAlignment(horizontalAlignment),
-		tailwindVerticalAlignment(verticalAlignment),
-		verticalAlignment || hFull ? 'h-full' : '',
-		c
+	let {
+		horizontalAlignment = undefined,
+		verticalAlignment = undefined,
+		noWFull = false,
+		hFull = false,
+		class: c = '',
+		style = '',
+		render = true,
+		children
+	}: Props = $props()
+
+	let classes = $derived(
+		twMerge(
+			'flex z-auto',
+			noWFull ? '' : 'w-full',
+			tailwindHorizontalAlignment(horizontalAlignment),
+			tailwindVerticalAlignment(verticalAlignment),
+			verticalAlignment || hFull ? 'h-full' : '',
+			c
+		)
 	)
 </script>
 
 {#if render}
 	<div class={classes} {style}>
-		<slot />
+		{@render children?.()}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index 44cdb9c779..6c7c6590fa 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext, onDestroy, tick } from 'svelte'
+	import { createEventDispatcher, getContext, tick, untrack } from 'svelte'
 	import { get } from 'svelte/store'
 	import type {
 		AppInput,
 		EvalAppInput,
 		EvalV2AppInput,
-		TemplateV2Input,
 		UploadAppInput,
 		UploadS3AppInput
 	} from '../../inputType'
@@ -18,7 +17,6 @@
 	} from '../../types'
 	import { accessPropertyByPath } from '../../utils'
 	import { computeGlobalContext, eval_like } from './eval'
-	import deepEqualWithOrderedArray from './deepEqualWithOrderedArray'
 	import { deepEqual } from 'fast-equals'
 	import { deepMergeWithPriority, isCodeInjection } from '$lib/utils'
 	import sum from 'hash-sum'
@@ -26,14 +24,27 @@
 
 	type T = string | number | boolean | Record<string | number, any> | undefined
 
-	export let input: AppInput | RichConfiguration
-	export let value: T
-	export let id: string | undefined = undefined
-	export let error: string = ''
-	export let key: string = ''
-	export let field: string = key
-	export let onDemandOnly: boolean = false
-	export let exportValueFunction: boolean = false
+	interface Props {
+		input: AppInput | RichConfiguration
+		value: T
+		id?: string | undefined
+		error?: string
+		key?: string
+		field?: string
+		onDemandOnly?: boolean
+		exportValueFunction?: boolean
+	}
+
+	let {
+		input,
+		value = $bindable(),
+		id = undefined,
+		error = $bindable(''),
+		key = '',
+		field = key,
+		onDemandOnly = false,
+		exportValueFunction = false
+	}: Props = $props()
 
 	const { componentControl, runnableComponents, recomputeAllContext } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -49,33 +60,6 @@
 
 	let groupStore = groupContext?.context
 
-	$: fullContext = {
-		iter: iterContext ? $iterContext : undefined,
-		row: rowContext ? $rowContext : undefined,
-		group: groupStore ? $groupStore : undefined
-	}
-
-	$: lastInput?.type == 'evalv2' &&
-		!onDemandOnly &&
-		(fullContext.iter != undefined ||
-			fullContext.row != undefined ||
-			fullContext.group != undefined) &&
-		lastInput.connections?.some(
-			(x) => x.componentId == 'row' || x.componentId == 'iter' || x.componentId == 'group'
-		) &&
-		debounceEval()
-
-	$: lastInput &&
-		lastInput.type == 'templatev2' &&
-		isCodeInjection(lastInput.eval) &&
-		(fullContext.iter != undefined ||
-			fullContext.row != undefined ||
-			fullContext.group != undefined) &&
-		lastInput.connections?.some(
-			(x) => x.componentId == 'row' || x.componentId == 'iter' || x.componentId == 'group'
-		) &&
-		debounceTemplate()
-
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
@@ -85,30 +69,15 @@
 		dispatch('done')
 	}
 
-	let lastInput: AppInput | undefined = input ? JSON.parse(JSON.stringify(input)) : undefined
-
-	onDestroy(() => (lastInput = undefined))
-
-	$: if (input && !deepEqualWithOrderedArray(input, lastInput)) {
-		lastInput = JSON.parse(JSON.stringify(input))
-		// Needed because of file uploads
-		if (lastInput && input?.['value'] instanceof ArrayBuffer) {
-			// @ts-ignore
-			lastInput.value = input?.['value']
-		}
-	}
-
 	const { worldStore, state: stateStore, mode } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: stateId = $worldStore?.stateId
-
 	let timeout: NodeJS.Timeout | undefined = undefined
 
 	let firstDebounce = true
 	const debounce_ms = 50
 
 	export async function computeExpr(args?: Record<string, any>) {
-		return await evalExpr(lastInput as EvalAppInput, args)
+		return await evalExpr(input as EvalAppInput, args)
 	}
 
 	function debounce(cb: () => Promise<void>) {
@@ -135,28 +104,19 @@
 		timeout = setTimeout(cb, 50)
 	}
 
-	$: lastInput && $worldStore && debounce(handleConnection)
-
 	const debounceTemplate = async () => {
-		let nvalue = await getValue(lastInput as EvalAppInput)
+		let nvalue = await getValue(input as EvalAppInput)
 		if (!deepEqual(nvalue, value)) {
 			// console.log('template')
 			value = nvalue
 		}
 	}
 
-	$: lastInput &&
-		lastInput.type == 'template' &&
-		isCodeInjection(lastInput.eval) &&
-		$stateId &&
-		$stateStore &&
-		debounce(debounceTemplate)
-
 	let lastExprHash: any = undefined
 
 	const debounceEval = async (s?: string) => {
 		let args = s == 'exprChanged' ? { file: { name: 'example.png' } } : undefined
-		let nvalue = await evalExpr(lastInput as EvalAppInput, args)
+		let nvalue = await evalExpr(input as EvalAppInput, args)
 
 		if (field) {
 			editorContext?.evalPreview.update((x) => {
@@ -175,16 +135,11 @@
 		}
 	}
 
-	$: lastInput && lastInput.type == 'eval' && $stateId && $stateStore && debounce2(debounceEval)
-
-	$: lastInput?.type == 'evalv2' && lastInput.expr && debounceEval('exprChanged')
-	$: lastInput?.type == 'templatev2' && lastInput.eval && debounceTemplate()
-
 	async function handleConnection() {
 		// console.log('handleCon')
-		if (lastInput?.type === 'connected') {
-			if (lastInput.connection) {
-				const { path, componentId } = lastInput.connection
+		if (input?.type === 'connected') {
+			if (input.connection) {
+				const { path, componentId } = input.connection
 				const [p] = path ? path.split('.')[0].split('[') : [undefined]
 				if (p) {
 					const skey = `${id}-${key}-${rowContext ? $rowContext.index : 0}-${
@@ -197,25 +152,24 @@
 						previousConnectedValue
 					)
 				} else {
-					console.debug('path was invalid for connection', lastInput.connection)
+					console.debug('path was invalid for connection', input.connection)
 				}
 			}
-		} else if (lastInput?.type === 'static' || lastInput?.type == 'template') {
+		} else if (input?.type === 'static' || input?.type == 'template') {
 			await debounceTemplate()
-		} else if (lastInput?.type == 'eval') {
-			value = await evalExpr(lastInput as EvalAppInput)
-		} else if (lastInput?.type == 'evalv2') {
+		} else if (input?.type == 'eval') {
+			value = await evalExpr(input as EvalAppInput)
+		} else if (input?.type == 'evalv2') {
 			// console.log('evalv2', onDemandOnly, field)
 			if (onDemandOnly && exportValueFunction) {
 				value = (args?: any) => {
-					return evalExpr(lastInput as EvalV2AppInput, args)
+					return evalExpr(input as EvalV2AppInput, args)
 				}
 				return
 			}
 			const skey = `${id}-${key}-${rowContext ? $rowContext.index : 0}-${
 				iterContext ? $iterContext.index : 0
 			}`
-			const input = lastInput as EvalV2AppInput
 			for (const c of input.connections ?? []) {
 				const previousValueKey = `${c.componentId}-${c.id}`
 				$worldStore?.connect<any>(
@@ -225,8 +179,7 @@
 					previousConnectedValues[previousValueKey]
 				)
 			}
-		} else if (lastInput?.type == 'templatev2') {
-			const input = lastInput as TemplateV2Input
+		} else if (input?.type == 'templatev2') {
 			const skey = `${id}-${key}-${rowContext ? $rowContext.index : 0}-${
 				iterContext ? $iterContext.index : 0
 			}`
@@ -239,10 +192,10 @@
 					previousConnectedValues[previousValueKey]
 				)
 			}
-		} else if (lastInput?.type == 'upload') {
-			value = (lastInput as UploadAppInput).value
-		} else if (lastInput?.type == 'uploadS3') {
-			value = (lastInput as UploadS3AppInput).value
+		} else if (input?.type == 'upload') {
+			value = (input as UploadAppInput).value
+		} else if (input?.type == 'uploadS3') {
+			value = (input as UploadS3AppInput).value
 		} else {
 			value = undefined
 		}
@@ -330,11 +283,8 @@
 
 	function onValueChange(newValue: any, force?: boolean): void {
 		if (iterContext && $iterContext.disabled) return
-		if (
-			lastInput?.type === 'connected' &&
-			((newValue !== undefined && newValue !== null) || force)
-		) {
-			const { connection } = lastInput
+		if (input?.type === 'connected' && ((newValue !== undefined && newValue !== null) || force)) {
+			const { connection } = input
 			if (!connection) {
 				// No connection
 				return
@@ -358,4 +308,61 @@
 			// TODO: handle disconnect
 		}
 	}
+	let fullContext = $derived({
+		iter: iterContext ? $iterContext : undefined,
+		row: rowContext ? $rowContext : undefined,
+		group: groupStore ? $groupStore : undefined
+	})
+
+	$effect.pre(() => {
+		input?.type == 'evalv2' &&
+			!onDemandOnly &&
+			(fullContext.iter != undefined ||
+				fullContext.row != undefined ||
+				fullContext.group != undefined) &&
+			input.connections?.some(
+				(x) => x.componentId == 'row' || x.componentId == 'iter' || x.componentId == 'group'
+			) &&
+			untrack(() => debounceEval())
+	})
+	$effect.pre(() => {
+		input &&
+			input.type == 'templatev2' &&
+			isCodeInjection(input.eval) &&
+			(fullContext.iter != undefined ||
+				fullContext.row != undefined ||
+				fullContext.group != undefined) &&
+			input.connections?.some(
+				(x) => x.componentId == 'row' || x.componentId == 'iter' || x.componentId == 'group'
+			) &&
+			untrack(() => debounceTemplate())
+	})
+	let stateId = $derived($worldStore?.stateId)
+	$effect.pre(() => {
+		input?.type == 'static' && input.value
+		input && $worldStore && untrack(() => debounce(handleConnection))
+	})
+	$effect.pre(() => {
+		input &&
+			input.type == 'template' &&
+			isCodeInjection(input.eval) &&
+			$stateId &&
+			$stateStore &&
+			untrack(() => debounce(debounceTemplate))
+	})
+	$effect.pre(() => {
+		input &&
+			input.type == 'eval' &&
+			$stateId &&
+			$stateStore &&
+			untrack(() => debounce2(debounceEval))
+	})
+	$effect.pre(() => {
+		input?.type == 'evalv2' && input.expr && untrack(() => debounceEval('exprChanged'))
+	})
+	$effect.pre(() => {
+		input?.type == 'templatev2' && input.eval && untrack(() => debounceTemplate())
+	})
 </script>
+
+<!-- {JSON.stringify(input)} -->
diff --git a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
index c0856b8b90..af31a65955 100644
--- a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { AppInput, InputConnectionEval } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext } from '../../types'
@@ -7,26 +7,41 @@
 	import InitializeComponent from './InitializeComponent.svelte'
 	import RefreshIndicator from './RefreshIndicator.svelte'
 
-	export let componentInput: AppInput
-	export let id: string
-	export let result: any
-	export let render: boolean
-	export let hasChildrens: boolean
-	export let noInitialize
+	interface Props {
+		componentInput: AppInput
+		id: string
+		result: any
+		render: boolean
+		hasChildrens: boolean
+		noInitialize: any
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		componentInput,
+		id,
+		result = $bindable(),
+		render,
+		hasChildrens,
+		noInitialize,
+		children
+	}: Props = $props()
 
 	// Sync the result to the output
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: outputs = $worldStore?.outputsById?.[id] as {
-		result: Output<any>
-	}
+	let outputs = $derived(
+		$worldStore?.outputsById?.[id] as {
+			result: Output<any>
+		}
+	)
 
 	function setOutput(v: any) {
 		// console.log('setnr', id)
 		outputs?.result?.set(v, true)
 	}
 
-	let loading: boolean = false
+	let loading: boolean = $state(false)
 	let loadingStates: { [key: string]: boolean } = {}
 	let subscriptions: Array<() => void> = []
 
@@ -62,11 +77,15 @@
 		})
 	}
 
-	$: componentInput.type === 'evalv2' &&
-		componentInput.connections &&
-		builtSubscriptions(componentInput.connections)
+	$effect.pre(() => {
+		componentInput.type === 'evalv2' &&
+			componentInput.connections &&
+			untrack(() => builtSubscriptions(componentInput.connections))
+	})
 
-	$: result != undefined && outputs && setOutput(result)
+	$effect.pre(() => {
+		result != undefined && outputs && untrack(() => setOutput(result))
+	})
 </script>
 
 {#if !noInitialize}
@@ -79,7 +98,7 @@
 
 {#if render || hasChildrens}
 	<div class={render ? 'h-full w-full' : 'invisible h-0 overflow-hidden'}>
-		<slot />
+		{@render children?.()}
 		<div class="flex absolute top-1 right-1 z-50 app-component-refresh-btn">
 			<RefreshIndicator {loading} />
 		</div>
diff --git a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
index 71c5e2dbd3..fc25b2e382 100644
--- a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
@@ -6,19 +6,24 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import type { AppViewerContext, CancelablePromise } from '../../types'
 
-	export let id: string
-	export let loading: boolean
+	interface Props {
+		id: string
+		loading: boolean
+	}
+
+	let { id, loading }: Props = $props()
 
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
-	let buttonHover = false
-	let cancelCallbacks: (CancelablePromise<void>)[] | undefined = undefined
+	let buttonHover = $state(false)
+	let cancelCallbacks: CancelablePromise<void>[] | undefined = $state(undefined)
 </script>
 
 <Popover>
 	<Button
-		on:mouseenter={() => (buttonHover = true)} on:mouseleave={() => (buttonHover = false)} 
+		on:mouseenter={() => (buttonHover = true)}
+		on:mouseleave={() => (buttonHover = false)}
 		startIcon={{
-			icon: loading ? !buttonHover ? LoaderIcon : RefreshCwOff : RefreshCw,
+			icon: loading ? (!buttonHover ? LoaderIcon : RefreshCwOff) : RefreshCw,
 			classes: twMerge(
 				loading && !buttonHover ? 'animate-spin text-blue-800' : '',
 				'transition-all text-gray-500 dark:text-white'
@@ -29,14 +34,14 @@
 		btnClasses={twMerge(loading ? ' bg-blue-100 dark:bg-blue-400' : '', 'transition-all')}
 		on:click={() => {
 			if (buttonHover && loading) {
-				cancelCallbacks?.forEach((cb) => cb.cancel()) 
+				cancelCallbacks?.forEach((cb) => cb.cancel())
 			} else {
-				cancelCallbacks = $runnableComponents[id]?.cb?.map((cb) =>  cb())
+				cancelCallbacks = $runnableComponents[id]?.cb?.map((cb) => cb())
 			}
 		}}
 		iconOnly
 	/>
-	<svelte:fragment slot="text">
+	{#snippet text()}
 		{#if loading}
 			{#if buttonHover}
 				Stop Refreshing
@@ -46,5 +51,5 @@
 		{:else}
 			Refresh
 		{/if}
-	</svelte:fragment>
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/apps/components/helpers/ResolveConfig.svelte b/frontend/src/lib/components/apps/components/helpers/ResolveConfig.svelte
index eb6234fad7..b7f292807d 100644
--- a/frontend/src/lib/components/apps/components/helpers/ResolveConfig.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/ResolveConfig.svelte
@@ -1,20 +1,36 @@
 <script lang="ts">
 	import InputValue from './InputValue.svelte'
 	import type { RichConfiguration } from '../../types'
+	import { untrack } from 'svelte'
 
-	export let id: string
-	export let extraKey: string = ''
-	export let key: string
-	export let resolvedConfig: any | { type: 'oneOf'; configuration: any; selected: string }
-	export let configuration: RichConfiguration
-	export let initialConfig: RichConfiguration | undefined = undefined
-	$: configuration?.type == 'oneOf' && handleSelected(configuration.selected)
+	interface Props {
+		id: string
+		extraKey?: string
+		key: string
+		resolvedConfig: any | { type: 'oneOf'; configuration: any; selected: string }
+		configuration: RichConfiguration
+		initialConfig?: RichConfiguration | undefined
+	}
+
+	let {
+		id,
+		extraKey = '',
+		key,
+		resolvedConfig = $bindable(),
+		configuration,
+		initialConfig = undefined
+	}: Props = $props()
 
 	function handleSelected(selected: string) {
 		if (resolvedConfig?.selected != undefined && resolvedConfig?.selected != selected) {
 			resolvedConfig.selected = selected
 		}
 	}
+	$effect(() => {
+		configuration?.type == 'oneOf' &&
+			configuration.selected &&
+			untrack(() => handleSelected(configuration.selected))
+	})
 </script>
 
 {#if configuration?.type == 'oneOf' && resolvedConfig?.type == 'oneOf'}
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 8ff15f0832..df59b1a422 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -6,7 +6,7 @@
 	import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
 	import { deepEqual } from 'fast-equals'
 	import { Bug } from 'lucide-svelte'
-	import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
+	import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte'
 	import type { AppInputs, Runnable } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type {
@@ -28,39 +28,71 @@
 	import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3'
 	import { executeRunnable } from './executeRunnable'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	// Component props
-	export let id: string
-	export let fields: AppInputs
-	export let runnable: Runnable
-	export let transformer: (InlineScript & { language: 'frontend' }) | undefined
-	export let extraQueryParams: Record<string, any> = {}
-	export let autoRefresh: boolean = true
-	export let result: any = undefined
-	export let forceSchemaDisplay: boolean = false
-	export let wrapperClass = ''
-	export let wrapperStyle = ''
-	export let render: boolean
-	export let outputs: {
-		result: Output<any>
-		loading: Output<boolean>
-		jobId?: Output<any> | undefined
+	interface Props {
+		// Component props
+		id: string
+		fields: AppInputs
+		runnable: Runnable
+		transformer: (InlineScript & { language: 'frontend' }) | undefined
+		extraQueryParams?: Record<string, any>
+		autoRefresh?: boolean
+		result?: any
+		forceSchemaDisplay?: boolean
+		wrapperClass?: string
+		wrapperStyle?: string
+		render: boolean
+		outputs: {
+			result: Output<any>
+			loading: Output<boolean>
+			jobId?: Output<any> | undefined
+		}
+		extraKey?: string
+		initializing?: boolean
+		recomputeOnInputChanged?: boolean
+		loading?: boolean
+		refreshOnStart?: boolean
+		recomputableByRefreshButton: boolean
+		errorHandledByComponent?: boolean
+		hideRefreshButton?: boolean
+		hasChildrens: boolean
+		allowConcurentRequests?: boolean
+		noInitialize?: boolean
+		overrideCallback?: (() => CancelablePromise<void>) | undefined
+		overrideAutoRefresh?: boolean
+		replaceCallback?: boolean
+		children?: import('svelte').Snippet
 	}
-	export let extraKey = ''
-	export let initializing: boolean = false
-	export let recomputeOnInputChanged: boolean = true
-	export let loading = false
-	export let refreshOnStart: boolean = false
-	export let recomputableByRefreshButton: boolean
-	export let errorHandledByComponent: boolean = false
-	export let hideRefreshButton: boolean = false
-	export let hasChildrens: boolean
-	export let allowConcurentRequests = false
-	export let noInitialize = false
-	export let overrideCallback: (() => CancelablePromise<void>) | undefined = undefined
-	export let overrideAutoRefresh: boolean = false
-	export let replaceCallback: boolean = false
+
+	let {
+		id,
+		fields,
+		runnable,
+		transformer,
+		extraQueryParams = {},
+		autoRefresh = true,
+		result = $bindable(undefined),
+		forceSchemaDisplay = false,
+		wrapperClass = '',
+		wrapperStyle = '',
+		render,
+		outputs,
+		extraKey = '',
+		initializing = false,
+		recomputeOnInputChanged = true,
+		loading = $bindable(false),
+		refreshOnStart = false,
+		recomputableByRefreshButton,
+		errorHandledByComponent = false,
+		hideRefreshButton = false,
+		hasChildrens,
+		allowConcurentRequests = false,
+		noInitialize = false,
+		overrideCallback = undefined,
+		overrideAutoRefresh = false,
+		replaceCallback = false,
+		children
+	}: Props = $props()
 
 	const {
 		worldStore,
@@ -90,7 +122,6 @@
 	const groupContext = getContext<GroupContext>('GroupContext')
 
 	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
 	$runnableComponents = $runnableComponents
 
@@ -98,12 +129,10 @@
 		args = value
 	}
 
-	let args: Record<string, any> | undefined = undefined
-	let runnableInputValues: Record<string, any> = {}
+	let args: Record<string, any> | undefined = $state(undefined)
+	let runnableInputValues: Record<string, any> = $state({})
 	let executeTimeout: NodeJS.Timeout | undefined = undefined
 
-	$: outputs.loading?.set(loading)
-
 	function setDebouncedExecute() {
 		executeTimeout && clearTimeout(executeTimeout)
 		executeTimeout = setTimeout(() => {
@@ -121,12 +150,9 @@
 	}
 
 	let lazyStaticValues = computeStaticValues()
-	let currentStaticValues = lazyStaticValues
+	let currentStaticValues = $state(lazyStaticValues)
 
 	let isBg = id.startsWith('bg_')
-	$: isBg && updateBgRuns(loading)
-	$: fields && (currentStaticValues = computeStaticValues())
-	$: currentStaticValues && refreshOnStaticChange()
 
 	function refreshOnStaticChange() {
 		if (!deepEqual(currentStaticValues, lazyStaticValues)) {
@@ -138,14 +164,6 @@
 	// $: sendUserToast('args' + JSON.stringify(runnableInputValues) + Boolean(extraQueryParams) || args)
 	// $: console.log(runnableInputValues)
 	let firstRefresh = true
-	$: (runnableInputValues || extraQueryParams || args) &&
-		resultJobLoader &&
-		refreshIfAutoRefresh('arg changed')
-
-	$: runnableInputValues && dispatchIfMounted('argsChanged')
-
-	$: refreshOn =
-		runnable && runnable.type === 'runnableByName' ? (runnable.inlineScript?.refreshOn ?? []) : []
 
 	function refreshIfAutoRefresh(src: 'arg changed' | 'static changed') {
 		// console.log(
@@ -179,7 +197,7 @@
 		}
 	}
 
-	let schemaForm: SchemaForm
+	let schemaForm: SchemaForm | undefined = $state()
 
 	export function invalidate(key: string, error: string) {
 		schemaForm?.invalidate(key, error)
@@ -194,14 +212,11 @@
 	}
 
 	// Test job internal state
-	let resultJobLoader: ResultJobLoader | undefined = undefined
+	let resultJobLoader: ResultJobLoader | undefined = $state(undefined)
 
-	let schemaStripped: Schema | undefined =
+	let schemaStripped: Schema | undefined = $state(
 		autoRefresh || forceSchemaDisplay ? emptySchema() : undefined
-
-	$: (autoRefresh || forceSchemaDisplay) &&
-		Object.keys(fields ?? {}).length > 0 &&
-		(schemaStripped = stripSchema(fields, $stateId))
+	)
 
 	function stripSchema(inputs: AppInputs, s: any): Schema {
 		if (inputs === undefined) {
@@ -404,7 +419,7 @@
 					allowUserResources.push(k)
 				}
 			} else if (field?.type == 'eval' || (field?.type == 'evalv2' && inputValues[k])) {
-				const ctxMatch = field.expr.match(ctxRegex)
+				const ctxMatch = field?.expr?.match(ctxRegex)
 				if (ctxMatch) {
 					nonStaticRunnableInputs[k] = '$ctx:' + ctxMatch[1]
 				} else {
@@ -544,7 +559,7 @@
 	}
 
 	function updateResult(res) {
-		outputs.result?.set(res)
+		outputs.result?.set($state.snapshot(res))
 		result = res
 	}
 
@@ -668,9 +683,9 @@
 		}
 	})
 
-	let lastJobId: string | undefined = undefined
+	let lastJobId: string | undefined = $state(undefined)
 
-	let inputValues: Record<string, InputValue> = {}
+	let inputValues: Record<string, InputValue> = $state({})
 
 	function updateBgRuns(loading: boolean) {
 		if (loading) {
@@ -699,6 +714,51 @@
 		const policy = computeWorkspaceS3FileInputPolicy()
 		return policy
 	}
+	$effect(() => {
+		outputs.loading?.set(loading)
+	})
+	$effect(() => {
+		isBg && untrack(() => updateBgRuns(loading))
+	})
+	$effect(() => {
+		fields && untrack(() => (currentStaticValues = computeStaticValues()))
+	})
+	$effect(() => {
+		currentStaticValues && untrack(() => refreshOnStaticChange())
+	})
+	$effect(() => {
+		if (runnableInputValues && typeof runnableInputValues === 'object') {
+			for (const key in runnableInputValues) {
+				runnableInputValues[key]
+			}
+		}
+		if (extraQueryParams && typeof extraQueryParams === 'object') {
+			for (const key in extraQueryParams) {
+				extraQueryParams[key]
+			}
+		}
+		if (args && typeof args === 'object') {
+			for (const key in args) {
+				args[key]
+			}
+		}
+		;(runnableInputValues || extraQueryParams || args) &&
+			resultJobLoader &&
+			untrack(() => refreshIfAutoRefresh('arg changed'))
+	})
+	let ignoreFirst = true
+	$effect(() => {
+		runnableInputValues && !ignoreFirst && dispatch('argsChanged')
+		ignoreFirst = false
+	})
+	let refreshOn = $derived(
+		runnable && runnable.type === 'runnableByName' ? (runnable.inlineScript?.refreshOn ?? []) : []
+	)
+	$effect(() => {
+		;(autoRefresh || forceSchemaDisplay) &&
+			Object.keys(fields ?? {}).length > 0 &&
+			untrack(() => (schemaStripped = stripSchema(fields, $stateId)))
+	})
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}
@@ -807,36 +867,38 @@
 			>
 				<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
 					<Bug size={14} />
-					<span slot="text">
-						<div class="bg-surface">
-							<Alert type="error" title="Error during execution">
-								<div class="flex flex-col gap-2 overflow-auto">
-									An error occured, please contact the app author.
+					{#snippet text()}
+						<span>
+							<div class="bg-surface">
+								<Alert type="error" title="Error during execution">
+									<div class="flex flex-col gap-2 overflow-auto">
+										An error occured, please contact the app author.
 
-									{#if $errorByComponent?.[id]?.error}
-										<div class="font-bold">{$errorByComponent[id].error}</div>
-									{/if}
-									{#if lastJobId}
-										<a
-											href={`/run/${lastJobId}?workspace=${workspace}`}
-											class="font-semibold text-red-800 underline"
-											target="_blank"
-										>
-											Job id: {lastJobId}
-										</a>
-									{/if}
-								</div>
-							</Alert>
-						</div>
-					</span>
+										{#if $errorByComponent?.[id]?.error}
+											<div class="font-bold">{$errorByComponent[id].error}</div>
+										{/if}
+										{#if lastJobId}
+											<a
+												href={`/run/${lastJobId}?workspace=${workspace}`}
+												class="font-semibold text-red-800 underline"
+												target="_blank"
+											>
+												Job id: {lastJobId}
+											</a>
+										{/if}
+									</div>
+								</Alert>
+							</div>
+						</span>
+					{/snippet}
 				</Popover>
 			</div>
 			<div class="block grow w-full max-h-full border border-red-30 relative">
-				<slot />
+				{@render children?.()}
 			</div>
 		{:else}
 			<div class="block grow w-full max-h-full">
-				<slot />
+				{@render children?.()}
 			</div>
 		{/if}
 
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index ffad8c3960..0bfaf7cbb1 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -10,13 +10,6 @@
 	import InitializeComponent from './InitializeComponent.svelte'
 	import type { CancelablePromise } from '$lib/gen'
 
-	export let componentInput: AppInput | undefined
-	export let noInitialize = false
-	export let hideRefreshButton: boolean | undefined = undefined
-	export let overrideCallback: (() => CancelablePromise<void>) | undefined = undefined
-	export let overrideAutoRefresh: boolean = false
-	export let replaceCallback: boolean = false
-
 	type SideEffectAction =
 		| {
 				selected:
@@ -65,32 +58,77 @@
 		  }
 		| undefined
 
-	export let id: string
-	export let result: any = undefined
-	export let initializing: boolean | undefined = true
-	export let loading: boolean = false
-	export let extraQueryParams: Record<string, any> = {}
-	export let autoRefresh: boolean = true
-	export let runnableComponent: RunnableComponent | undefined = undefined
-	export let forceSchemaDisplay: boolean = false
-	export let runnableClass = ''
-	export let runnableStyle = ''
-	export let doOnSuccess: SideEffectAction = undefined
-	export let doOnError: SideEffectAction = undefined
-
-	export let render: boolean
-	export let recomputeIds: string[] = []
-	export let outputs: {
-		result: Output<any>
-		loading: Output<boolean>
-		jobId?: Output<any> | undefined
+	interface Props {
+		componentInput: AppInput | undefined
+		noInitialize?: boolean
+		hideRefreshButton?: boolean | undefined
+		overrideCallback?: (() => CancelablePromise<void>) | undefined
+		overrideAutoRefresh?: boolean
+		replaceCallback?: boolean
+		id: string
+		result?: any
+		initializing?: boolean | undefined
+		loading?: boolean
+		extraQueryParams?: Record<string, any>
+		autoRefresh?: boolean
+		runnableComponent?: RunnableComponent | undefined
+		forceSchemaDisplay?: boolean
+		runnableClass?: string
+		runnableStyle?: string
+		doOnSuccess?: SideEffectAction
+		doOnError?: SideEffectAction
+		render: boolean
+		recomputeIds?: string[]
+		outputs: {
+			result: Output<any>
+			loading: Output<boolean>
+			jobId?: Output<any> | undefined
+		}
+		extraKey?: string | undefined
+		refreshOnStart?: boolean
+		errorHandledByComponent?: boolean
+		hasChildrens?: boolean
+		allowConcurentRequests?: boolean
+		onSuccess?: (result: any) => void
+		children?: import('svelte').Snippet
 	}
-	export let extraKey: string | undefined = undefined
-	export let refreshOnStart: boolean = false
-	export let errorHandledByComponent: boolean = false
-	export let hasChildrens: boolean = false
-	export let allowConcurentRequests = false
-	export let onSuccess: (result: any) => void = () => {}
+
+	let {
+		componentInput = $bindable(),
+		noInitialize = false,
+		hideRefreshButton = undefined,
+		overrideCallback = undefined,
+		overrideAutoRefresh = false,
+		replaceCallback = false,
+		id,
+		result = $bindable(undefined),
+		initializing = $bindable(undefined),
+		loading = $bindable(false),
+		extraQueryParams = {},
+		autoRefresh = true,
+		runnableComponent = $bindable(undefined),
+		forceSchemaDisplay = false,
+		runnableClass = '',
+		runnableStyle = '',
+		doOnSuccess = undefined,
+		doOnError = undefined,
+		render,
+		recomputeIds = [],
+		outputs,
+		extraKey = undefined,
+		refreshOnStart = false,
+		errorHandledByComponent = false,
+		hasChildrens = false,
+		allowConcurentRequests = false,
+		onSuccess = () => {},
+		children
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (initializing == undefined) {
+			initializing = true
+		}
+	})
 
 	export function setArgs(value: any) {
 		runnableComponent?.setArgs(value)
@@ -137,10 +175,12 @@
 	}
 
 	// We need to make sure that old apps have correct values. Triggerable (button, form, etc) have both autoRefresh and recomputeOnInputChanged set to false
-	$: if (!autoRefresh && componentInput?.type === 'runnable' && componentInput.autoRefresh) {
-		componentInput.autoRefresh = false
-		componentInput.recomputeOnInputChanged = false
-	}
+	$effect.pre(() => {
+		if (!autoRefresh && componentInput?.type === 'runnable' && componentInput.autoRefresh) {
+			componentInput.autoRefresh = false
+			componentInput.recomputeOnInputChanged = false
+		}
+	})
 
 	function isRunnableDefined(componentInput) {
 		return (
@@ -265,7 +305,7 @@
 		<InitializeComponent {id} />
 	{/if}
 	{#if render}
-		<slot />
+		{@render children?.()}
 	{/if}
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
@@ -280,13 +320,13 @@
 		fields={componentInput.fields}
 		bind:result
 		runnable={componentInput.runnable}
-		hideRefreshButton={componentInput.hideRefreshButton ?? hideRefreshButton}
+		hideRefreshButton={hideRefreshButton ?? componentInput.hideRefreshButton}
 		transformer={componentInput.transformer}
 		{autoRefresh}
 		{overrideCallback}
 		{overrideAutoRefresh}
 		recomputableByRefreshButton={componentInput.autoRefresh ?? true}
-		bind:recomputeOnInputChanged={componentInput.recomputeOnInputChanged}
+		recomputeOnInputChanged={componentInput.recomputeOnInputChanged}
 		{id}
 		{extraQueryParams}
 		{forceSchemaDisplay}
@@ -303,7 +343,6 @@
 		on:resultSet={(e) => {
 			const res = e.detail
 			if ($initialized?.runnableInitialized?.[fullId] === undefined) {
-				console.log('resultSet', id)
 				$initialized.runnableInitialized = {
 					...($initialized.runnableInitialized ?? {}),
 					[fullId]: res
@@ -320,10 +359,10 @@
 		{outputs}
 		{errorHandledByComponent}
 	>
-		<slot />
+		{@render children?.()}
 	</RunnableComponent>
 {:else}
 	<NonRunnableComponent {noInitialize} {hasChildrens} {render} bind:result {id} {componentInput}>
-		<slot />
+		{@render children?.()}
 	</NonRunnableComponent>
 {/if}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
index 0d7dad526f..bd454eb780 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
@@ -9,11 +9,9 @@
 	import { components } from '../../editor/component'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
-	import Select from '../../svelte-select/lib/Select.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
-	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { enUS, fr, de, pt, ja } from 'date-fns/locale'
+	import Select from '$lib/components/Select.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -86,7 +84,6 @@
 
 	let css = initCss($app.css?.dateinputcomponent, customCss)
 
-	let darkMode: boolean = false
 	let selectedDay: string | undefined = undefined
 	let selectedMonth: string | undefined = undefined
 	let selectedYear: string | undefined = undefined
@@ -216,8 +213,6 @@
 	/>
 {/each}
 
-<DarkModeObserver bind:darkMode />
-
 <InitializeComponent {id} />
 
 <AlignWrapper {render} {verticalAlignment}>
@@ -236,25 +231,20 @@
 				class={twMerge('grow', resolvedConfig?.orientation === 'horizontal' ? 'w-1/4' : 'w-full')}
 			>
 				<Select
-					portal={false}
-					value={selectedDay}
-					on:change={(e) => {
-						selectedDay = e.detail.value
-						outputs.day.set(Number(selectedDay))
-					}}
-					on:clear={() => {
-						selectedDay = ''
-						outputs.day.set(undefined)
-					}}
+					bind:value={
+						() => selectedDay,
+						(v) => {
+							selectedDay = v ?? ''
+							outputs.day.set(v ? Number(v) : undefined)
+						}
+					}
 					items={Array.from({ length: computeDayPerMonth(selectedMonth, selectedYear) }, (_, i) => {
 						return { label: String(i + 1), value: String(i + 1) }
 					})}
 					class={twMerge('text-clip min-w-0', css?.input?.class, 'wm-date-select')}
-					containerStyles={(darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
-					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+					containerStyle={css?.input?.style}
 					placeholder="Pick a day"
+					clearable
 				/>
 			</div>
 		{/if}
@@ -263,22 +253,17 @@
 				class={twMerge('grow', resolvedConfig?.orientation === 'horizontal' ? 'w-1/2' : 'w-full')}
 			>
 				<Select
-					portal={false}
-					value={selectedMonth}
-					on:change={(e) => {
-						selectedMonth = e.detail.value
-						outputs.month.set(monthItems.findIndex((item) => item.value === selectedMonth) + 1)
-					}}
-					on:clear={() => {
-						selectedMonth = ''
-						outputs.month.set(undefined)
-					}}
+					bind:value={
+						() => selectedMonth ?? '',
+						(v) => {
+							selectedMonth = v
+							outputs.month.set(monthItems.findIndex((item) => item.value === selectedMonth) + 1)
+						}
+					}
 					items={monthItems}
 					placeholder="Pick a month"
 					class={twMerge('text-clip min-w-0', css?.input?.class, 'wm-date-select')}
-					containerStyles={(darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
+					containerStyle={css?.input?.style}
 					clearable
 				/>
 			</div>
@@ -288,23 +273,19 @@
 				class={twMerge('grow', resolvedConfig?.orientation === 'horizontal' ? 'w-1/4' : 'w-full')}
 			>
 				<Select
-					portal={false}
-					value={selectedYear}
-					on:change={(e) => {
-						selectedYear = e.detail.value
-						outputs.year.set(Number(selectedYear))
-					}}
-					on:clear={() => {
-						selectedYear = ''
-						outputs.year.set(undefined)
-					}}
-					items={Array.from({ length: 201 }, (_, i) => `${1900 + i}`)}
+					bind:value={
+						() => selectedYear,
+						(v) => {
+							selectedYear = v ?? ''
+							outputs.year.set(selectedYear ? Number(selectedYear) : undefined)
+						}
+					}
+					items={Array.from({ length: 201 }, (_, i) => `${1900 + i}`).map((value) => ({
+						value
+					}))}
 					placeholder="Pick a year"
-					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
 					class={twMerge('text-clip min-w-0', css?.input?.class, 'wm-date-select')}
-					containerStyles={(darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
+					containerStyle={css?.input?.style}
 					clearable
 				/>
 			</div>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
index 24b02c41c7..d586fd85f3 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -1,206 +1,23 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
-	import { initConfig, initOutput } from '../../editor/appUtils'
-	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
-	import { initCss } from '../../utils'
+	import type { ComponentCustomCSS, RichConfigurations } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
-	import { components } from '../../editor/component'
-	import ResolveConfig from '../helpers/ResolveConfig.svelte'
+
 	// @ts-ignore
 	import MultiSelect from 'svelte-multiselect'
-	import Portal from '$lib/components/Portal.svelte'
-
-	import { createFloatingActions } from 'svelte-floating-ui'
-	import { extractCustomProperties } from '$lib/utils'
-	import { tick } from 'svelte'
-	import { offset, flip, shift } from 'svelte-floating-ui/dom'
-	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
 	export let customCss: ComponentCustomCSS<'multiselectcomponent'> | undefined = undefined
 	export let render: boolean
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-
-	const [floatingRef, floatingContent] = createFloatingActions({
-		strategy: 'absolute',
-		middleware: [offset(5), flip(), shift()]
-	})
-
-	const { app, worldStore, selectedComponent, componentControl } =
-		getContext<AppViewerContext>('AppViewerContext')
-	let items: string[]
-
-	const resolvedConfig = initConfig(
-		components['multiselectcomponent'].initialData.configuration,
-		configuration
-	)
-
-	const outputs = initOutput($worldStore, id, {
-		result: [] as string[]
-	})
-
-	let value: string[] | undefined = [...new Set(outputs?.result.peak())] as string[]
-
-	$componentControl[id] = {
-		setValue(nvalue: string[]) {
-			value = [...new Set(nvalue)]
-			outputs?.result.set([...(value ?? [])])
-		}
-	}
-
-	$: resolvedConfig.items && handleItems()
-
-	function handleItems() {
-		if (Array.isArray(resolvedConfig.items)) {
-			items = resolvedConfig.items?.map((label) => {
-				return typeof label === 'string' ? label : `NOT_STRING`
-			})
-		}
-	}
-
-	$: resolvedConfig.defaultItems && handleDefaultItems()
-
-	function handleDefaultItems() {
-		if (Array.isArray(resolvedConfig.defaultItems)) {
-			const nvalue = resolvedConfig.defaultItems?.map((label) => {
-				return typeof label === 'string' ? label : `NOT_STRING`
-			})
-			value = [...new Set(nvalue)]
-			outputs?.result.set([...(value ?? [])])
-		}
-	}
-
-	let css = initCss($app.css?.multiselectcomponent, customCss)
-
-	function setOuterDivStyle(outerDiv: HTMLDivElement, portalRef: HTMLDivElement, style: string) {
-		outerDiv.setAttribute('style', style)
-		// find ul in portalRef and set style
-		const ul = portalRef.querySelector('ul')
-		ul?.setAttribute('style', extractCustomProperties(style))
-	}
-
-	$: outerDiv &&
-		portalRef &&
-		css?.multiselect?.style &&
-		setOuterDivStyle(outerDiv, portalRef, css?.multiselect?.style)
-
-	let outerDiv: HTMLDivElement | undefined = undefined
-	let portalRef: HTMLDivElement | undefined = undefined
-
-	function moveOptionsToPortal() {
-		// Find ul element with class 'options' within the outerDiv
-		const ul = outerDiv?.querySelector('.options')
-
-		if (ul) {
-			// Move the ul element to the portal
-			portalRef?.appendChild(ul)
-		}
-	}
-
-	$: if (render && portalRef && outerDiv && items?.length > 0) {
-		tick().then(() => {
-			moveOptionsToPortal()
-		})
-	}
-
-	let w = 0
-	let open = false
 </script>
 
-{#each Object.keys(components['multiselectcomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
-
-{#each Object.keys(css ?? {}) as key (key)}
-	<ResolveStyle
-		{id}
-		{customCss}
-		{key}
-		bind:css={css[key]}
-		componentStyle={$app.css?.multiselectcomponent}
-	/>
-{/each}
-
 <InitializeComponent {id} />
 
 <AlignWrapper {render} hFull {verticalAlignment}>
 	<div
-		class="w-full app-editor-input"
-		on:pointerdown={(e) => {
-			$selectedComponent = [id]
-
-			if (!e.shiftKey) {
-				e.stopPropagation()
-			}
-			selectedComponent.set([id])
-		}}
-		use:floatingRef
-		bind:clientWidth={w}
+		>This version of the multiselect component is not supported anymore. Recreate the multiselect
+		component to use this new version.</div
 	>
-		{#if !value || Array.isArray(value)}
-			<MultiSelect
-				bind:outerDiv
-				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
-				ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
-				ulOptionsClass={'p-2 !bg-surface-secondary'}
-				--sms-border={'none'}
-				--sms-min-height={'32px'}
-				--sms-focus-border={'none'}
-				bind:selected={value}
-				options={Array.isArray(items) ? items : []}
-				placeholder={resolvedConfig.placeholder}
-				allowUserOptions={resolvedConfig.create}
-				onchange={(event) => {
-					if (event?.type === 'removeAll') {
-						outputs?.result.set([])
-					} else {
-						outputs?.result.set([...(value ?? [])])
-					}
-				}}
-				onopen={() => {
-					$selectedComponent = [id]
-					open = true
-				}}
-				onclose={() => {
-					open = false
-				}}
-			>
-				{#snippet children({ option })}
-					<!-- needed because portal doesn't work for mouseup event en mobile -->
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div
-						class="w-full"
-						on:mouseup|stopPropagation
-						on:pointerdown|stopPropagation={(e) => {
-							let newe = new MouseEvent('mouseup')
-							e.target?.['parentElement']?.dispatchEvent(newe)
-						}}
-					>
-						{option}
-					</div>
-				{/snippet}
-			</MultiSelect>
-			<Portal name="app-multiselect">
-				<div use:floatingContent class="z5000" hidden={!open}>
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						bind:this={portalRef}
-						class="multiselect"
-						style={`min-width: ${w}px;`}
-						on:click|stopPropagation
-					></div>
-				</div>
-			</Portal>
-		{:else}
-			Value {value} is not an array
-		{/if}
-	</div>
 </AlignWrapper>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index 6d7abcaf55..5c9fff9c35 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { getContext, onDestroy } from 'svelte'
-	import Select from '../../svelte-select/lib/index'
+	import { getContext, onDestroy, untrack } from 'svelte'
 
 	import type {
 		AppViewerContext,
@@ -11,7 +10,6 @@
 	} from '../../types'
 	import { initCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
@@ -21,20 +19,37 @@
 	import { Bug } from 'lucide-svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
+	import Select from '$lib/components/Select.svelte'
 
-	export let id: string
-	export let configuration: RichConfigurations
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let customCss: ComponentCustomCSS<'selectcomponent'> | undefined = undefined
-	export let render: boolean
-	export let extraKey: string | undefined = undefined
-	export let preclickAction: (() => Promise<void>) | undefined = undefined
-	export let recomputeIds: string[] | undefined = undefined
-	export let noInitialize = false
-	export let controls: { left: () => boolean; right: () => boolean | string } | undefined =
-		undefined
-	export let noDefault = false
-	export let onSelect: string[] | undefined = undefined
+	interface Props {
+		id: string
+		configuration: RichConfigurations
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+		customCss?: ComponentCustomCSS<'selectcomponent'> | undefined
+		render: boolean
+		extraKey?: string | undefined
+		preclickAction?: (() => Promise<void>) | undefined
+		recomputeIds?: string[] | undefined
+		noInitialize?: boolean
+		controls?: { left: () => boolean; right: () => boolean | string } | undefined
+		noDefault?: boolean
+		onSelect?: string[] | undefined
+	}
+
+	let {
+		id,
+		configuration,
+		verticalAlignment = undefined,
+		customCss = undefined,
+		render,
+		extraKey = undefined,
+		preclickAction = undefined,
+		recomputeIds = undefined,
+		noInitialize = false,
+		controls = undefined,
+		noDefault = false,
+		onSelect = undefined
+	}: Props = $props()
 
 	const {
 		app,
@@ -42,8 +57,7 @@
 		connectingInput,
 		selectedComponent,
 		runnableComponents,
-		componentControl,
-		darkMode
+		componentControl
 	} = getContext<AppViewerContext>('AppViewerContext')
 
 	const iterContext = getContext<ListContext>('ListWrapperContext')
@@ -61,9 +75,8 @@
 		$componentControl[id] = { ...$componentControl[id], ...controls }
 	}
 
-	let resolvedConfig = initConfig(
-		components['selectcomponent'].initialData.configuration,
-		configuration
+	let resolvedConfig = $state(
+		initConfig(components['selectcomponent'].initialData.configuration, configuration)
 	)
 
 	let outputs = initOutput($worldStore, id, {
@@ -71,15 +84,15 @@
 	})
 
 	// The library expects double quotes around the value
-	let value: string | undefined = noDefault
-		? undefined
-		: outputs?.result.peak()
-		? JSON.stringify(outputs?.result.peak())
-		: undefined
+	let value: string | undefined = $state(
+		noDefault
+			? undefined
+			: outputs?.result.peak()
+				? JSON.stringify(outputs?.result.peak())
+				: undefined
+	)
 
-	$: resolvedConfig.items && handleItems()
-
-	let listItems: { label: string; value: string; created?: boolean }[] = []
+	let listItems: { label: string; value: string; created?: boolean }[] = $state([])
 
 	function setContextValue(value: any) {
 		if (iterContext && listInputs) {
@@ -108,7 +121,7 @@
 						label: item?.label ?? 'undefined',
 						value: item?.value != undefined ? JSON.stringify(item.value) : 'undefined'
 					}
-			  })
+				})
 			: []
 
 		if (value != undefined && listItems.some((x) => x.value === value)) {
@@ -137,9 +150,7 @@
 		rowInputs?.remove(id)
 	})
 
-	function onChange(e: CustomEvent) {
-		e?.stopPropagation()
-
+	function onChange(nvalue: any) {
 		if (resolvedConfig.create) {
 			listItems = listItems.map((i) => {
 				delete i.created
@@ -147,7 +158,7 @@
 			})
 		}
 		preclickAction?.()
-		setValue(e.detail?.['value'])
+		setValue(nvalue)
 		if (onSelect) {
 			onSelect.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f()))
 		}
@@ -178,11 +189,12 @@
 		setContextValue(undefined)
 	}
 
-	let css = initCss($app.css?.selectcomponent, customCss)
+	let css = $state(initCss($app.css?.selectcomponent, customCss))
 
 	let previsousFilter = ''
 
-	function handleFilter(e) {
+	function onFilter(newFilterText: string) {
+		filterText = newFilterText
 		if (resolvedConfig.create && filterText !== previsousFilter) {
 			previsousFilter = filterText
 			if (filterText.length > 0) {
@@ -201,8 +213,6 @@
 		}
 	}
 
-	$: resolvedConfig.defaultValue != undefined && handleDefault()
-
 	function handleDefault() {
 		if (resolvedConfig.defaultValue != undefined) {
 			const nvalue = resolvedConfig.defaultValue
@@ -211,7 +221,13 @@
 			setContextValue(nvalue)
 		}
 	}
-	let filterText = ''
+	let filterText = $state('')
+	$effect(() => {
+		resolvedConfig.items && untrack(() => handleItems())
+	})
+	$effect(() => {
+		resolvedConfig.defaultValue != undefined && untrack(() => handleDefault())
+	})
 </script>
 
 {#each Object.keys(components['selectcomponent'].initialData.configuration) as key (key)}
@@ -242,7 +258,7 @@
 	<div
 		class="app-select w-full"
 		style="height: 34px;"
-		on:pointerdown={(e) => {
+		onpointerdown={(e) => {
 			if (!e.shiftKey) {
 				e.stopPropagation()
 			}
@@ -250,7 +266,7 @@
 	>
 		{#if Array.isArray(listItems) && listItems.every((x) => x && typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
 			{#if resolvedConfig.nativeHtmlSelect}
-				<select class={css?.input?.class} style={css?.input?.style} on:change={onNativeChange}>
+				<select class={css?.input?.class} style={css?.input?.style} onchange={onNativeChange}>
 					{#if resolvedConfig.placeholder}
 						<option value="" disabled selected>{resolvedConfig.placeholder}</option>
 					{/if}
@@ -260,34 +276,22 @@
 				</select>
 			{:else}
 				<Select
-					inAppEditor={true}
-					--border-radius="0.250rem"
-					--clear-icon-color="#6b7280"
-					--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
-					bind:filterText
-					on:filter={handleFilter}
-					on:clear={onClear}
-					on:change={onChange}
-					items={listItems}
+					bind:filterText={() => filterText, onFilter}
+					{onClear}
+					items={listItems.map((item) =>
+						item.created && item.label === filterText
+							? { ...item, label: 'Add new: ' + item.label }
+							: item
+					)}
 					listAutoWidth={resolvedConfig.fullWidth}
-					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-					containerStyles={($darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
-					{value}
+					containerStyle={css?.input?.style}
+					bind:value={() => value, onChange}
 					class={css?.input?.class}
 					placeholder={resolvedConfig.placeholder}
 					disabled={resolvedConfig.disabled}
-					on:focus={() => {
-						if (!$connectingInput.opened) {
-							$selectedComponent = [id]
-						}
-					}}
-				>
-					<svelte:fragment slot="item" let:item
-						>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
-					</svelte:fragment>
-				</Select>
+					clearable
+					onFocus={() => !$connectingInput.opened && ($selectedComponent = [id])}
+				/>
 			{/if}
 		{:else}
 			<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
@@ -298,16 +302,18 @@
 				>
 					<Bug size={14} />
 				</div>
-				<span slot="text">
-					<div class="bg-surface">
-						<Alert title="Incorrect options" type="error" size="xs" class="h-full w-full ">
-							The selectable items should be an array of {'{"value": any, "label":}'}. Found:
-							<pre class="w-full bg-surface p-2 rounded-md whitespace-pre-wrap"
-								>{JSON.stringify(listItems, null, 4)}</pre
-							>
-						</Alert>
-					</div>
-				</span>
+				{#snippet text()}
+					<span>
+						<div class="bg-surface">
+							<Alert title="Incorrect options" type="error" size="xs" class="h-full w-full ">
+								The selectable items should be an array of {'{"value": any, "label":}'}. Found:
+								<pre class="w-full bg-surface p-2 rounded-md whitespace-pre-wrap"
+									>{JSON.stringify(listItems, null, 4)}</pre
+								>
+							</Alert>
+						</div>
+					</span>
+				{/snippet}
 			</Popover>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
index 32e4e74bc6..39069b2fb5 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onDestroy } from 'svelte'
+	import { getContext, onDestroy, untrack } from 'svelte'
 
 	import type {
 		AppViewerContext,
@@ -18,18 +18,28 @@
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
-	export let id: string
-	export let configuration: RichConfigurations
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let customCss: ComponentCustomCSS<'selecttabcomponent'> | undefined = undefined
-	export let render: boolean
+	interface Props {
+		id: string
+		configuration: RichConfigurations
+		horizontalAlignment?: 'left' | 'center' | 'right' | undefined
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+		customCss?: ComponentCustomCSS<'selecttabcomponent'> | undefined
+		render: boolean
+	}
+
+	let {
+		id,
+		configuration,
+		horizontalAlignment = undefined,
+		verticalAlignment = undefined,
+		customCss = undefined,
+		render
+	}: Props = $props()
 
 	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
-	const resolvedConfig = initConfig(
-		components['selecttabcomponent'].initialData.configuration,
-		configuration
+	const resolvedConfig = $state(
+		initConfig(components['selecttabcomponent'].initialData.configuration, configuration)
 	)
 	const outputs = initOutput($worldStore, id, {
 		result: undefined as string | undefined
@@ -38,8 +48,7 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let selected: string = ''
-	$: selected === '' && resolvedConfig && setDefaultValue()
+	let selected: string = $state('')
 
 	onDestroy(() => {
 		listInputs?.remove(id)
@@ -51,6 +60,11 @@
 		},
 		setTab(index) {
 			selected = resolvedConfig.items?.[index]?.value
+		},
+		setSelectedIndex(index) {
+			if (index >= 0 && index < resolvedConfig.items?.length) {
+				selected = resolvedConfig.items?.[index]?.value
+			}
 		}
 	}
 
@@ -69,8 +83,13 @@
 		}
 	}
 
-	$: selected && handleSelection(selected)
-	let css = initCss($app.css?.selecttabcomponent, customCss)
+	let css = $state(initCss($app.css?.selecttabcomponent, customCss))
+	$effect.pre(() => {
+		selected === '' && resolvedConfig.defaultValue && untrack(() => setDefaultValue())
+	})
+	$effect.pre(() => {
+		selected && untrack(() => handleSelection(selected))
+	})
 </script>
 
 {#each Object.keys(components['selecttabcomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte b/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte
index 915a1963b6..d3618b6bed 100644
--- a/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfiguration } from '../../types'
@@ -9,12 +9,23 @@
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
-	export let id: string
-	export let componentContainerHeight: number
-	export let customCss: ComponentCustomCSS<'conditionalwrapper'> | undefined = undefined
-	export let render: boolean
-	export let conditions: RichConfiguration[]
-	export let onTabChange: string[] | undefined = undefined
+	interface Props {
+		id: string
+		componentContainerHeight: number
+		customCss?: ComponentCustomCSS<'conditionalwrapper'> | undefined
+		render: boolean
+		conditions: RichConfiguration[]
+		onTabChange?: string[] | undefined
+	}
+
+	let {
+		id,
+		componentContainerHeight,
+		customCss = undefined,
+		render,
+		conditions,
+		onTabChange = undefined
+	}: Props = $props()
 
 	const {
 		app,
@@ -31,8 +42,10 @@
 		selectedTabIndex: 0
 	})
 
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let everRender = $state(render)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	function onFocus() {
 		$focusedGrid = {
@@ -41,10 +54,10 @@
 		}
 	}
 
-	let css = initCss($app.css?.conditionalwrapper, customCss)
+	let css = $state(initCss($app.css?.conditionalwrapper, customCss))
 
-	let resolvedConditions: boolean[] = conditions.map((_x) => false)
-	let selectedConditionIndex = 0
+	let resolvedConditions: boolean[] = $state(conditions.map((_x) => false))
+	let selectedConditionIndex = $state(0)
 
 	function handleResolvedConditions() {
 		const slicedArray = resolvedConditions.slice(0, conditions.length)
@@ -66,7 +79,9 @@
 		onTabChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 	}
 
-	$: resolvedConditions && handleResolvedConditions()
+	$effect.pre(() => {
+		resolvedConditions && untrack(() => handleResolvedConditions())
+	})
 
 	$componentControl[id] = {
 		setTab: (conditionIndex: number) => {
diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
index 61f4dfa609..c5b2054415 100644
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte'
+	import { getContext, onMount, untrack } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -12,23 +12,40 @@
 	import GroupWrapper from '../GroupWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
-	export let id: string
-	export let componentContainerHeight: number
-	export let customCss: ComponentCustomCSS<'containercomponent'> | undefined = undefined
-	export let render: boolean
-	export let groupFields: RichConfigurations | undefined = undefined
+	interface Props {
+		id: string
+		componentContainerHeight: number
+		customCss?: ComponentCustomCSS<'containercomponent'> | undefined
+		render: boolean
+		groupFields?: RichConfigurations | undefined
+	}
+
+	let {
+		id,
+		componentContainerHeight,
+		customCss = undefined,
+		render,
+		groupFields = undefined
+	}: Props = $props()
 
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let everRender = $state(render)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	let groupContext = writable({})
 
 	let outputs = initOutput($worldStore, id, { group: $groupContext })
 
-	$: outputs.group.set($groupContext, true)
+	$effect.pre(() => {
+		$groupContext
+		untrack(() => {
+			outputs.group.set($groupContext, true)
+		})
+	})
 
 	function onFocus() {
 		$focusedGrid = {
@@ -48,7 +65,7 @@
 		}
 	})
 
-	let css = initCss($app.css?.containercomponent, customCss)
+	let css = $state(initCss($app.css?.containercomponent, customCss))
 </script>
 
 <InitializeComponent {id} />
diff --git a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
index f9637204fc..c29bb46825 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { initCss } from '../../utils'
@@ -14,14 +14,34 @@
 	import { getFirstNode, isDebugging } from '../../editor/settingsPanel/decisionTree/utils'
 	import InputValue from '../helpers/InputValue.svelte'
 
-	export let id: string
-	export let componentContainerHeight: number
-	export let customCss: ComponentCustomCSS<'decisiontreecomponent'> | undefined = undefined
-	export let render: boolean
-	export let nodes: DecisionTreeNode[]
+	interface Props {
+		id: string
+		componentContainerHeight: number
+		customCss?: ComponentCustomCSS<'decisiontreecomponent'> | undefined
+		render: boolean
+		nodes: DecisionTreeNode[]
+	}
 
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let { id, componentContainerHeight, customCss = undefined, render, nodes }: Props = $props()
+
+	let resolvedConditions = $derived(
+		nodes.reduce((acc, node) => {
+			acc[node.id] = acc[node.id] || []
+			return acc
+		}, {})
+	)
+
+	let resolvedNext = $derived(
+		nodes.reduce((acc, node) => {
+			acc[node.id] = acc[node.id] || false
+			return acc
+		}, {})
+	)
+
+	let everRender = $state(render)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	const {
 		app,
@@ -33,35 +53,27 @@
 		debuggingComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let css = initCss($app.css?.conditionalwrapper, customCss)
+	let css = $state(initCss($app.css?.conditionalwrapper, customCss))
 	let selectedConditionIndex = 0
-	let currentNodeId = getFirstNode(nodes)?.id ?? ''
+	let currentNodeId = $state(getFirstNode(nodes)?.id ?? '')
 
 	let outputs = initOutput($worldStore, id, {
 		currentNodeId,
 		currentNodeIndex: selectedConditionIndex
 	})
 
-	$: resolvedConditions = nodes.reduce((acc, node) => {
-		acc[node.id] = acc[node.id] || []
-		return acc
-	}, resolvedConditions || {})
+	$effect.pre(() => {
+		if (!nodes.map((n) => n.id).includes(currentNodeId)) {
+			const firstNode = untrack(() => getFirstNode(nodes)?.id)
 
-	$: resolvedNext = nodes.reduce((acc, node) => {
-		acc[node.id] = acc[node.id] || false
-		return acc
-	}, resolvedNext || {})
-
-	$: if (!nodes.map((n) => n.id).includes(currentNodeId)) {
-		const firstNode = getFirstNode(nodes)?.id
-
-		if (firstNode) {
-			currentNodeId = firstNode
+			if (firstNode) {
+				currentNodeId = firstNode
+			}
 		}
-	}
+	})
 
-	$: lastNodeId = nodes?.find((node) => node.next.length === 0)?.id
-	$: isNextDisabled = resolvedNext?.[currentNodeId] === false
+	let lastNodeId = $derived(nodes?.find((node) => node.next.length === 0)?.id)
+	let isNextDisabled = $derived(resolvedNext?.[currentNodeId] === false)
 
 	const history: string[] = []
 
@@ -136,17 +148,21 @@
 		}
 	}
 
-	$: if (currentNodeId) {
-		outputs.currentNodeId.set(currentNodeId)
-		outputs.currentNodeIndex.set(nodes.findIndex((next) => next.id == currentNodeId))
-	}
-
-	$: if ($selectedComponent?.[0] === id && !$focusedGrid) {
-		$focusedGrid = {
-			parentComponentId: id,
-			subGridIndex: nodes.findIndex((node) => node.id === currentNodeId)
+	$effect.pre(() => {
+		if (currentNodeId) {
+			outputs.currentNodeId.set(currentNodeId)
+			outputs.currentNodeIndex.set(nodes.findIndex((next) => next.id == currentNodeId))
 		}
-	}
+	})
+
+	$effect.pre(() => {
+		if ($selectedComponent?.[0] === id && !$focusedGrid) {
+			$focusedGrid = {
+				parentComponentId: id,
+				subGridIndex: nodes.findIndex((node) => node.id === currentNodeId)
+			}
+		}
+	})
 </script>
 
 {#if Object.keys(resolvedConditions).length === nodes.length}
diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index 4e83813db0..679bb928c8 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -14,18 +16,34 @@
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 
-	export let customCss: ComponentCustomCSS<'drawercomponent'> | undefined = undefined
-	export let id: string
-	export let configuration: RichConfigurations
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let noWFull = false
-	export let render: boolean
-	export let onOpenRecomputeIds: string[] | undefined = undefined
-	export let onCloseRecomputeIds: string[] | undefined = undefined
+	interface Props {
+		customCss?: ComponentCustomCSS<'drawercomponent'> | undefined
+		id: string
+		configuration: RichConfigurations
+		horizontalAlignment?: 'left' | 'center' | 'right' | undefined
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+		noWFull?: boolean
+		render: boolean
+		onOpenRecomputeIds?: string[] | undefined
+		onCloseRecomputeIds?: string[] | undefined
+	}
 
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let {
+		customCss = undefined,
+		id,
+		configuration,
+		horizontalAlignment = undefined,
+		verticalAlignment = undefined,
+		noWFull = false,
+		render,
+		onOpenRecomputeIds = undefined,
+		onCloseRecomputeIds = undefined
+	}: Props = $props()
+
+	let everRender = $state(render)
+	run(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	const {
 		app,
@@ -38,17 +56,16 @@
 		runnableComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	const resolvedConfig = initConfig(
-		components['drawercomponent'].initialData.configuration,
-		configuration
+	const resolvedConfig = $state(
+		initConfig(components['drawercomponent'].initialData.configuration, configuration)
 	)
 	const outputs = initOutput($worldStore, id, {
 		open: false
 	})
 
-	let containerHeight: number = 0
+	let containerHeight: number = $state(0)
 
-	let appDrawer: Drawer
+	let appDrawer: Drawer | undefined = $state()
 
 	$componentControl[id] = {
 		open: () => {
@@ -59,7 +76,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.drawercomponent, customCss)
+	let css = $state(initCss($app.css?.drawercomponent, customCss))
 </script>
 
 {#each Object.keys(components['drawercomponent'].initialData.configuration) as key (key)}
@@ -105,7 +122,7 @@
 						parentComponentId: id,
 						subGridIndex: 0
 					}
-					appDrawer.toggleDrawer()
+					appDrawer?.toggleDrawer()
 				}}
 				size={resolvedConfig.size}
 				color={resolvedConfig.color}
@@ -122,7 +139,6 @@
 {#if everRender}
 	<Portal target="#app-editor-top-level-drawer" name="app-drawer">
 		<Drawer
-			let:open
 			bind:this={appDrawer}
 			size="800px"
 			alwaysOpen
@@ -136,49 +152,52 @@
 				outputs?.open.set(false)
 				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
+			disableChatOffset={true}
 		>
-			<DrawerContent
-				title={resolvedConfig.drawerTitle}
-				on:close={() => {
-					appDrawer?.toggleDrawer()
-					$focusedGrid = undefined
-				}}
-				fullScreen={$mode !== 'dnd'}
-			>
-				<div
-					class={twMerge('h-full', css?.drawer?.class, 'wm-drawer')}
-					style={css?.drawer?.style}
-					bind:clientHeight={containerHeight}
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-						if (!$connectingInput.opened) {
-							$selectedComponent = [id]
-							$focusedGrid = {
-								parentComponentId: id,
-								subGridIndex: 0
-							}
-						}
+			{#snippet children({ open })}
+				<DrawerContent
+					title={resolvedConfig.drawerTitle}
+					on:close={() => {
+						appDrawer?.toggleDrawer()
+						$focusedGrid = undefined
 					}}
+					fullScreen={$mode !== 'dnd'}
 				>
-					{#if $app.subgrids?.[`${id}-0`]}
-						<SubGridEditor
-							visible={open && render}
-							{id}
-							{containerHeight}
-							subGridId={`${id}-0`}
-							on:focus={() => {
-								if (!$connectingInput.opened) {
-									$selectedComponent = [id]
-									$focusedGrid = {
-										parentComponentId: id,
-										subGridIndex: 0
-									}
+					<div
+						class={twMerge('h-full', css?.drawer?.class, 'wm-drawer')}
+						style={css?.drawer?.style}
+						bind:clientHeight={containerHeight}
+						onpointerdown={(e) => {
+							e?.stopPropagation()
+							if (!$connectingInput.opened) {
+								$selectedComponent = [id]
+								$focusedGrid = {
+									parentComponentId: id,
+									subGridIndex: 0
 								}
-							}}
-						/>
-					{/if}
-				</div>
-			</DrawerContent>
+							}
+						}}
+					>
+						{#if $app.subgrids?.[`${id}-0`]}
+							<SubGridEditor
+								visible={open && render}
+								{id}
+								{containerHeight}
+								subGridId={`${id}-0`}
+								on:focus={() => {
+									if (!$connectingInput.opened) {
+										$selectedComponent = [id]
+										$focusedGrid = {
+											parentComponentId: id,
+											subGridIndex: 0
+										}
+									}
+								}}
+							/>
+						{/if}
+					</div>
+				</DrawerContent>
+			{/snippet}
 		</Drawer>
 	</Portal>
 {:else if $app.subgrids?.[`${id}-0`]}
diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index 6498410036..ef2b906178 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -15,19 +15,32 @@
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let configuration: RichConfigurations
-	export let customCss: ComponentCustomCSS<'listcomponent'> | undefined = undefined
-	export let render: boolean
-	export let initializing: boolean | undefined
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		configuration: RichConfigurations
+		customCss?: ComponentCustomCSS<'listcomponent'> | undefined
+		render: boolean
+		initializing: boolean | undefined
+	}
+
+	let {
+		id,
+		componentInput,
+		configuration,
+		customCss = undefined,
+		render,
+		initializing = $bindable()
+	}: Props = $props()
 
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput, allIdsInPath, mode } =
 		getContext<AppViewerContext>('AppViewerContext')
-	let page = 0
+	let page = $state(0)
 
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let everRender = $state(render)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	const outputs = initOutput($worldStore, id, {
 		result: undefined,
@@ -36,9 +49,8 @@
 		page: 0
 	})
 
-	let resolvedConfig = initConfig(
-		components['listcomponent'].initialData.configuration,
-		configuration
+	let resolvedConfig = $state(
+		initConfig(components['listcomponent'].initialData.configuration, configuration)
 	)
 
 	function onFocus() {
@@ -48,20 +60,22 @@
 		}
 	}
 
-	let css = initCss($app.css?.listcomponent, customCss)
-	let result: any[] | undefined = undefined
+	let css = $state(initCss($app.css?.listcomponent, customCss))
+	let result: any[] | undefined = $state(undefined)
 
-	$: isCard = resolvedConfig.width?.selected == 'card'
+	let isCard = $derived(resolvedConfig.width?.selected == 'card')
 
-	let inputs = {}
-	let loading: boolean = false
-	let isPreviousLoading = false
-	let isNextLoading = false
+	let inputs = $state({})
+	let loading: boolean = $state(false)
+	let isPreviousLoading = $state(false)
+	let isNextLoading = $state(false)
 
-	$: if (!loading) {
-		isPreviousLoading = false
-		isNextLoading = false
-	}
+	$effect.pre(() => {
+		if (!loading) {
+			isPreviousLoading = false
+			isNextLoading = false
+		}
+	})
 
 	function getPagination(
 		configuration: {
@@ -99,11 +113,13 @@
 		}
 	}
 
-	$: pagination = getPagination(
-		resolvedConfig.pagination?.configuration,
-		resolvedConfig.pagination?.selected,
-		result,
-		page
+	let pagination = $derived(
+		getPagination(
+			resolvedConfig.pagination?.configuration,
+			resolvedConfig.pagination?.selected,
+			result,
+			page
+		)
 	)
 </script>
 
@@ -150,8 +166,8 @@
 					: 'overflow-auto'} {isCard
 					? 'gap-2 flex-wrap'
 					: resolvedConfig?.displayBorders
-					? 'divide-y flex-col'
-					: 'flex-col'}"
+						? 'divide-y flex-col'
+						: 'flex-col'}"
 			>
 				{#if $app.subgrids?.[`${id}-0`] && Array.isArray(result) && result.length > 0}
 					{#each result ?? [] as value, index (index)}
@@ -162,16 +178,16 @@
 										isCard
 											? `min-width: ${resolvedConfig.width?.configuration?.card?.minWidthPx}px; `
 											: ''
-								  } max-height: ${resolvedConfig.heightPx}px;`
+									} max-height: ${resolvedConfig.heightPx}px;`
 								: ''}
 							class={inRange
 								? `${
 										$allIdsInPath.includes(id)
 											? 'overflow-visible'
 											: resolvedConfig.heightPx
-											? 'overflow-auto'
-											: ''
-								  } ${!isCard ? 'w-full' : resolvedConfig?.displayBorders ? 'border' : ''}`
+												? 'overflow-auto'
+												: ''
+									} ${!isCard ? 'w-full' : resolvedConfig?.displayBorders ? 'border' : ''}`
 								: 'h-0 float overflow-hidden invisible absolute'}
 						>
 							<ListWrapper
diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index 15f3eca206..1c50c0a017 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { stopPropagation } from 'svelte/legacy'
+
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -17,16 +19,29 @@
 	import Disposable from '$lib/components/common/drawer/Disposable.svelte'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 
-	export let customCss: ComponentCustomCSS<'modalcomponent'> | undefined = undefined
-	export let id: string
-	export let configuration: RichConfigurations
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let noWFull = false
-	export let render: boolean
+	interface Props {
+		customCss?: ComponentCustomCSS<'modalcomponent'> | undefined
+		id: string
+		configuration: RichConfigurations
+		horizontalAlignment?: 'left' | 'center' | 'right' | undefined
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+		noWFull?: boolean
+		render: boolean
+		onOpenRecomputeIds?: string[] | undefined
+		onCloseRecomputeIds?: string[] | undefined
+	}
 
-	export let onOpenRecomputeIds: string[] | undefined = undefined
-	export let onCloseRecomputeIds: string[] | undefined = undefined
+	let {
+		customCss = undefined,
+		id,
+		configuration,
+		horizontalAlignment = undefined,
+		verticalAlignment = undefined,
+		noWFull = false,
+		render,
+		onOpenRecomputeIds = undefined,
+		onCloseRecomputeIds = undefined
+	}: Props = $props()
 
 	const {
 		app,
@@ -40,23 +55,24 @@
 		breakpoint
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let everRender = $state(render)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	//used so that we can count number of outputs setup for first refresh
 	const outputs = initOutput($worldStore, id, {
 		open: false
 	})
 
-	let css = initCss($app.css?.modalcomponent, customCss)
-	let disposable: Disposable | undefined = undefined
+	let css = $state(initCss($app.css?.modalcomponent, customCss))
+	let disposable: Disposable | undefined = $state(undefined)
 
-	let resolvedConfig = initConfig(
-		components['modalcomponent'].initialData.configuration,
-		configuration
+	let resolvedConfig = $state(
+		initConfig(components['modalcomponent'].initialData.configuration, configuration)
 	)
 
-	let unclickableOutside = false
+	let unclickableOutside = $state(false)
 	function unclosableModal() {
 		unclickableOutside = true
 		setTimeout(() => {
@@ -81,14 +97,16 @@
 			disposable?.closeDrawer()
 		}
 	}
-	let wrapperHeight: number = 0
-	let headerHeight: number = 0
+	let wrapperHeight: number = $state(0)
+	let headerHeight: number = $state(0)
 
-	$: containerHeight = Math.min(
-		// 8px * 2 of padding
-		maxHeight($app.subgrids?.[`${id}-0`] ?? [], 0, $breakpoint) * (ROW_HEIGHT + ROW_GAP_Y) + 16,
-		// 32px (2rem) of top and bottom margin
-		wrapperHeight - headerHeight - 64
+	let containerHeight = $derived(
+		Math.min(
+			// 8px * 2 of padding
+			maxHeight($app.subgrids?.[`${id}-0`] ?? [], 0, $breakpoint) * (ROW_HEIGHT + ROW_GAP_Y) + 16,
+			// 32px (2rem) of top and bottom margin
+			wrapperHeight - headerHeight - 64
+		)
 	)
 
 	async function getMenuElements(): Promise<HTMLElement[]> {
@@ -154,9 +172,6 @@
 	<Portal target="#app-editor-top-level-drawer" name="app-modal">
 		<Disposable
 			{id}
-			let:handleClickAway
-			let:zIndex
-			let:open
 			bind:this={disposable}
 			on:open={() => {
 				outputs?.open.set(true)
@@ -167,80 +182,82 @@
 				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
 		>
-			<div
-				class={twMerge(
-					`${
-						$mode == 'dnd' ? 'absolute' : 'fixed'
-					} top-0 bottom-0 left-0 right-0 transition-all duration-50`,
-					open ? ' bg-black bg-opacity-60' : 'h-0 overflow-hidden invisible'
-				)}
-				style="z-index: {zIndex}"
-				bind:clientHeight={wrapperHeight}
-			>
+			{#snippet children({ handleClickAway, zIndex, open })}
 				<div
-					style={css?.popup?.style}
-					class={twMerge('mx-24 mt-8 bg-surface wm-modal rounded-lg relative', css?.popup?.class)}
-					use:clickOutside={{
-						capture: false,
-						stopPropagation: false,
-						exclude: getMenuElements
-					}}
-					on:click_outside={(e) => {
-						if ($mode !== 'dnd' && !unclickableOutside) {
-							handleClickAway(e)
-						}
-					}}
+					class={twMerge(
+						`${
+							$mode == 'dnd' ? 'absolute' : 'fixed'
+						} top-0 bottom-0 left-0 right-0 transition-all duration-50`,
+						open ? ' bg-black bg-opacity-60' : 'h-0 overflow-hidden invisible'
+					)}
+					style="z-index: {zIndex}"
+					bind:clientHeight={wrapperHeight}
 				>
 					<div
-						class="px-4 py-2 border-b flex justify-between items-center"
-						bind:clientHeight={headerHeight}
-					>
-						<div>{resolvedConfig.modalTitle}</div>
-						<div class="w-8">
-							<button
-								on:click|stopPropagation={() => {
-									disposable?.closeDrawer()
-								}}
-								class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
-							>
-								<X class="text-tertiary" />
-							</button>
-						</div>
-					</div>
-
-					<div
-						class={twMerge('wm-modal-container h-full', 'overflow-y-auto', css?.container?.class)}
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-							if (!$connectingInput.opened) {
-								$selectedComponent = [id]
-								$focusedGrid = {
-									parentComponentId: id,
-									subGridIndex: 0
+						style={css?.popup?.style}
+						class={twMerge('mx-24 mt-8 bg-surface wm-modal rounded-lg relative', css?.popup?.class)}
+						use:clickOutside={{
+							capture: false,
+							stopPropagation: false,
+							exclude: getMenuElements,
+							onClickOutside: (e: MouseEvent) => {
+								if ($mode !== 'dnd' && !unclickableOutside) {
+									handleClickAway(e)
 								}
 							}
 						}}
 					>
-						{#if $app.subgrids?.[`${id}-0`]}
-							<SubGridEditor
-								visible={open && render}
-								{id}
-								{containerHeight}
-								subGridId={`${id}-0`}
-								on:focus={() => {
-									if (!$connectingInput.opened) {
-										$selectedComponent = [id]
-										$focusedGrid = {
-											parentComponentId: id,
-											subGridIndex: 0
-										}
+						<div
+							class="px-4 py-2 border-b flex justify-between items-center"
+							bind:clientHeight={headerHeight}
+						>
+							<div>{resolvedConfig.modalTitle}</div>
+							<div class="w-8">
+								<button
+									onclick={stopPropagation(() => {
+										disposable?.closeDrawer()
+									})}
+									class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
+								>
+									<X class="text-tertiary" />
+								</button>
+							</div>
+						</div>
+
+						<div
+							class={twMerge('wm-modal-container h-full', 'overflow-y-auto', css?.container?.class)}
+							onpointerdown={(e) => {
+								e?.stopPropagation()
+								if (!$connectingInput.opened) {
+									$selectedComponent = [id]
+									$focusedGrid = {
+										parentComponentId: id,
+										subGridIndex: 0
 									}
-								}}
-							/>
-						{/if}
+								}
+							}}
+						>
+							{#if $app.subgrids?.[`${id}-0`]}
+								<SubGridEditor
+									visible={open && render}
+									{id}
+									{containerHeight}
+									subGridId={`${id}-0`}
+									on:focus={() => {
+										if (!$connectingInput.opened) {
+											$selectedComponent = [id]
+											$focusedGrid = {
+												parentComponentId: id,
+												subGridIndex: 0
+											}
+										}
+									}}
+								/>
+							{/if}
+						</div>
 					</div>
 				</div>
-			</div>
+			{/snippet}
 		</Disposable>
 	</Portal>
 {:else if $app.subgrids?.[`${id}-0`]}
diff --git a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
index 90dbf14618..4424280ced 100644
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { stopPropagation } from 'svelte/legacy'
+
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -10,14 +12,25 @@
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
-	export let id: string
-	export let componentContainerHeight: number
-	export let customCss:
-		| ComponentCustomCSS<'horizontalsplitpanescomponent' | 'verticalsplitpanescomponent'>
-		| undefined = undefined
-	export let horizontal: boolean = false
-	export let panes: number[]
-	export let render: boolean
+	interface Props {
+		id: string
+		componentContainerHeight: number
+		customCss?:
+			| ComponentCustomCSS<'horizontalsplitpanescomponent' | 'verticalsplitpanescomponent'>
+			| undefined
+		horizontal?: boolean
+		panes: number[]
+		render: boolean
+	}
+
+	let {
+		id,
+		componentContainerHeight,
+		customCss = undefined,
+		horizontal = false,
+		panes,
+		render
+	}: Props = $props()
 
 	const { app, focusedGrid, selectedComponent, componentControl, worldStore, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -25,9 +38,11 @@
 	//used so that we can count number of outputs setup for first refresh
 	initOutput($worldStore, id, {})
 
-	let everRender = render
+	let everRender = $state(render)
 
-	$: render && !everRender && (everRender = true)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	function onFocus() {
 		$focusedGrid = {
@@ -36,7 +51,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.containercomponent, customCss)
+	let css = $state(initCss($app.css?.containercomponent, customCss))
 
 	$componentControl[id] = {
 		left: () => {
@@ -63,13 +78,13 @@
 		}
 	}
 
-	let sumedup = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100)
-	$: {
+	let sumedup = $state(panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100))
+	$effect.pre(() => {
 		let ns = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100)
 		if (!deepEqual(ns, sumedup)) {
 			sumedup = ns
 		}
-	}
+	})
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -87,20 +102,20 @@
 <InitializeComponent {id} />
 
 {#if everRender}
-	<div class="h-full w-full border" on:pointerdown={onFocus}>
+	<div class="h-full w-full border" onpointerdown={onFocus}>
 		{#key sumedup}
 			<Splitpanes {horizontal}>
 				{#each sumedup as paneSize, index (index)}
 					<Pane size={paneSize} minSize={20}>
 						<div
 							class="w-full h-full"
-							on:pointerdown|stopPropagation={() => {
+							onpointerdown={stopPropagation(() => {
 								$selectedComponent = [id]
 								$focusedGrid = {
 									parentComponentId: id,
 									subGridIndex: index
 								}
-							}}
+							})}
 						>
 							{#if $app.subgrids?.[`${id}-${index}`]}
 								<SubGridEditor
diff --git a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
index eb47b3e928..b4951a8735 100644
--- a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -14,16 +14,31 @@
 	import RunnableComponent from '../helpers/RunnableComponent.svelte'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
-	export let id: string
-	export let componentContainerHeight: number
-	export let tabs: string[]
-	export let customCss: ComponentCustomCSS<'steppercomponent'> | undefined = undefined
-	export let render: boolean
-	export let recomputeIds: string[] | undefined = undefined
-	export let extraQueryParams: Record<string, any> = {}
-	export let componentInput: AppInput | undefined
-	export let onNext: string[] | undefined = undefined
-	export let onPrevious: string[] | undefined = undefined
+	interface Props {
+		id: string
+		componentContainerHeight: number
+		tabs: string[]
+		customCss?: ComponentCustomCSS<'steppercomponent'> | undefined
+		render: boolean
+		recomputeIds?: string[] | undefined
+		extraQueryParams?: Record<string, any>
+		componentInput: AppInput | undefined
+		onNext?: string[] | undefined
+		onPrevious?: string[] | undefined
+	}
+
+	let {
+		id,
+		componentContainerHeight,
+		tabs,
+		customCss = undefined,
+		render,
+		recomputeIds = undefined,
+		extraQueryParams = {},
+		componentInput,
+		onNext = undefined,
+		onPrevious = undefined
+	}: Props = $props()
 
 	const {
 		app,
@@ -36,16 +51,18 @@
 		runnableComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let everRender = $state(render)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
-	let selected = tabs[0]
-	let tabHeight: number = 0
-	let footerHeight: number = 0
-	let runnableComponent: RunnableComponent
-	let selectedIndex = tabs?.indexOf(selected) ?? -1
-	let maxReachedIndex = -1
-	let statusByStep = [] as Array<'success' | 'error' | 'pending'>
+	let selected = $state(tabs[0])
+	let tabHeight: number = $state(0)
+	let footerHeight: number = $state(0)
+	let runnableComponent: RunnableComponent | undefined = $state()
+	let selectedIndex = $state(tabs?.indexOf(selected) ?? -1)
+	let maxReachedIndex = $state(-1)
+	let statusByStep = $state([] as Array<'success' | 'error' | 'pending'>)
 	let debugMode: boolean = false
 
 	let outputs = initOutput($worldStore, id, {
@@ -74,7 +91,8 @@
 		}
 	}
 
-	let result: { error: { name: string; message: string; stack: string } } | undefined = undefined
+	let result: { error: { name: string; message: string; stack: string } } | undefined =
+		$state(undefined)
 
 	async function runStep(targetIndex: number) {
 		statusByStep[selectedIndex] = 'pending'
@@ -122,14 +140,22 @@
 			}
 
 			handleTabSelection()
+		},
+		setSelectedIndex(index) {
+			if (index >= 0 && index < tabs.length) {
+				selected = tabs[index]
+				handleTabSelection()
+			}
 		}
 	}
 
-	$: selected != undefined && handleTabSelection()
-	let css = initCss($app.css?.steppercomponent, customCss)
-	$: lastStep = selectedIndex === tabs.length - 1
+	$effect.pre(() => {
+		selected != undefined && untrack(() => handleTabSelection())
+	})
+	let css = $state(initCss($app.css?.steppercomponent, customCss))
+	let lastStep = $derived(selectedIndex === tabs.length - 1)
 
-	let directionClicked: 'left' | 'right' | undefined = undefined
+	let directionClicked: 'left' | 'right' | undefined = $state(undefined)
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 977ccc69d9..e9d028a5ed 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { Tab, Tabs } from '$lib/components/common'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import { components } from '../../editor/component'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
@@ -15,22 +18,37 @@
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
+	import { deepEqual } from 'fast-equals'
 
-	export let id: string
-	export let configuration: RichConfigurations
-	export let componentContainerHeight: number
-	export let tabs: string[]
-	export let customCss: ComponentCustomCSS<'tabscomponent'> | undefined = undefined
-	export let render: boolean
-	export let disabledTabs: RichConfiguration[]
-	export let onTabChange: string[] | undefined = undefined
+	interface Props {
+		id: string
+		configuration: RichConfigurations
+		componentContainerHeight: number
+		tabs: string[]
+		customCss?: ComponentCustomCSS<'tabscomponent'> | undefined
+		render: boolean
+		disabledTabs: RichConfiguration[]
+		onTabChange?: string[] | undefined
+	}
 
-	let resolvedConfig = initConfig(
-		components['tabscomponent'].initialData.configuration,
-		configuration
+	let {
+		id,
+		configuration,
+		componentContainerHeight,
+		tabs,
+		customCss = undefined,
+		render,
+		disabledTabs,
+		onTabChange = undefined
+	}: Props = $props()
+
+	let resolvedConfig = $state(
+		initConfig(components['tabscomponent'].initialData.configuration, configuration)
 	)
-	let everRender = render
-	$: render && !everRender && (everRender = true)
+	let everRender = $state(render)
+	$effect.pre(() => {
+		render && !everRender && (everRender = true)
+	})
 
 	const {
 		app,
@@ -43,8 +61,11 @@
 		runnableComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let selected: string = tabs[0]
-	let tabHeight: number = 0
+	let selected: string = $state(tabs[0])
+	let selectedIndex = $state(tabs?.indexOf(selected) ?? -1)
+	let css = $state(initCss($app.css?.tabscomponent, customCss))
+
+	let tabHeight: number = $state(0)
 
 	let outputs = initOutput($worldStore, id, {
 		selectedTabIndex: 0
@@ -53,7 +74,14 @@
 	const titleBarHeight = 40 // Example height of a single accordion title bar in pixels
 
 	function handleTabSelection() {
+		let oldSelectedIndex = selectedIndex
 		selectedIndex = tabs?.indexOf(selected)
+		if (selectedIndex == -1) {
+			selectedIndex = oldSelectedIndex
+			if (selectedIndex != -1 && tabs.length > 0) {
+				selected = tabs[selectedIndex]
+			}
+		}
 		outputs?.selectedTabIndex.set(selectedIndex)
 
 		onTabChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
@@ -67,6 +95,11 @@
 	}
 
 	$componentControl[id] = {
+		setSelectedIndex(index) {
+			if (index >= 0 && index < tabs.length) {
+				selected = tabs[index]
+			}
+		},
 		left: () => {
 			const index = tabs.indexOf(selected)
 			if (index > 0) {
@@ -89,11 +122,28 @@
 		}
 	}
 
-	$: selected != undefined && handleTabSelection()
-	let selectedIndex = tabs?.indexOf(selected) ?? -1
-	let css = initCss($app.css?.tabscomponent, customCss)
+	let lastTabs: string[] | undefined = tabs
+	$effect.pre(() => {
+		if (!untrack(() => selected)) {
+			return
+		}
+		if (
+			!deepEqual(
+				untrack(() => lastTabs),
+				tabs
+			)
+		) {
+			lastTabs = structuredClone($state.snapshot(tabs))
+		} else {
+			return
+		}
+		untrack(() => handleTabSelection())
+	})
+	$effect.pre(() => {
+		selected != undefined && untrack(() => handleTabSelection())
+	})
 
-	let resolvedDisabledTabs: boolean[] = []
+	let resolvedDisabledTabs: boolean[] = $state([])
 </script>
 
 <InputValue key="kind" {id} input={configuration.tabsKind} bind:value={resolvedConfig.tabsKind} />
@@ -153,8 +203,8 @@
 			>
 				{#each tabs ?? [] as res, index}
 					<button
-						on:pointerdown|stopPropagation
-						on:click={() => !resolvedDisabledTabs[index] && (selected = res)}
+						onpointerdown={stopPropagation(bubble('pointerdown'))}
+						onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
 						disabled={resolvedDisabledTabs[index]}
 						class={twMerge(
 							'rounded-sm !truncate text-sm  hover:text-primary px-1 py-2',
@@ -167,7 +217,9 @@
 										'wm-tabs-selectedTab'
 									)
 								: '',
-							resolvedDisabledTabs[index] ? 'opacity-50 cursor-not-allowed hover:text-secondary' : ''
+							resolvedDisabledTabs[index]
+								? 'opacity-50 cursor-not-allowed hover:text-secondary'
+								: ''
 						)}
 						style={selected == res
 							? [css?.allTabs?.style, css?.selectedTab?.style].filter(Boolean).join(';')
@@ -183,8 +235,8 @@
 				{#each tabs ?? [] as res, index}
 					<div class="border-b">
 						<button
-							on:pointerdown|stopPropagation
-							on:click={() => !resolvedDisabledTabs[index] && (selected = res)}
+							onpointerdown={stopPropagation(bubble('pointerdown'))}
+							onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
 							disabled={resolvedDisabledTabs[index]}
 							class={twMerge(
 								'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',
@@ -197,7 +249,9 @@
 											'wm-tabs-selectedTab'
 										)
 									: 'text-secondary',
-								resolvedDisabledTabs[index] ? 'opacity-50 cursor-not-allowed hover:text-secondary' : ''
+								resolvedDisabledTabs[index]
+									? 'opacity-50 cursor-not-allowed hover:text-secondary'
+									: ''
 							)}
 						>
 							<span class="mr-2 w-8 font-mono">{selected == res ? '-' : '+'}</span>
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 73a5b5b70b..d7555b8460 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
-	import { afterUpdate, onMount, setContext } from 'svelte'
+	import { onMount, setContext, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
@@ -21,7 +24,7 @@
 
 	import { Alert, Button, Tab } from '$lib/components/common'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
-	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import Tabs from '$lib/components/common/tabs/TabsV2.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { classNames, encodeState, getModifierKey, sendUserToast } from '$lib/utils'
 	import AppPreview from './AppPreview.svelte'
@@ -53,36 +56,52 @@
 	import AppEditorBottomPanel from './AppEditorBottomPanel.svelte'
 	import panzoom from 'panzoom'
 
-	export let app: App
-	export let path: string
-	export let policy: Policy
-	export let summary: string
-	export let fromHub: boolean = false
-	export let diffDrawer: DiffDrawer | undefined = undefined
-	export let savedApp:
-		| {
-				value: App
-				draft?: any
-				path: string
-				summary: string
-				policy: any
-				draft_only?: boolean
-				custom_path?: string
-		  }
-		| undefined = undefined
-	export let version: number | undefined = undefined
-	export let newApp: boolean = false
-	export let newPath: string | undefined = undefined
-	export let replaceStateFn: (path: string) => void = (path: string) =>
-		window.history.replaceState(null, '', path)
-	export let gotoFn: (path: string, opt?: Record<string, any> | undefined) => void = (
-		path: string,
-		opt?: Record<string, any>
-	) => window.history.pushState(null, '', path)
+	interface Props {
+		app: App
+		path: string
+		policy: Policy
+		summary: string
+		fromHub?: boolean
+		diffDrawer?: DiffDrawer | undefined
+		savedApp?:
+			| {
+					value: App
+					draft?: any
+					path: string
+					summary: string
+					policy: any
+					draft_only?: boolean
+					custom_path?: string
+			  }
+			| undefined
+		version?: number | undefined
+		newApp?: boolean
+		newPath?: string | undefined
+		replaceStateFn?: (path: string) => void
+		gotoFn?: (path: string, opt?: Record<string, any> | undefined) => void
+		unsavedConfirmationModal?: import('svelte').Snippet<[any]>
+	}
+
+	let {
+		app,
+		path,
+		policy,
+		summary,
+		fromHub = false,
+		diffDrawer = undefined,
+		savedApp = $bindable(undefined),
+		version = undefined,
+		newApp = false,
+		newPath = undefined,
+		replaceStateFn = (path: string) => window.history.replaceState(null, '', path),
+		gotoFn = (path: string, opt?: Record<string, any>) => window.history.pushState(null, '', path),
+		unsavedConfirmationModal
+	}: Props = $props()
 
 	migrateApp(app)
 
-	const appStore = writable<App>(app)
+	const stateApp = $state(app)
+	const appStore = writable<App>(stateApp)
 	const selectedComponent = writable<string[] | undefined>(undefined)
 
 	// $: selectedComponent.subscribe((s) => {
@@ -116,7 +135,7 @@
 	>({})
 	const focusedGrid = writable<FocusedGrid | undefined>(undefined)
 	const pickVariableCallback: Writable<((path: string) => void) | undefined> = writable(undefined)
-	let context = {
+	let context = $state({
 		email: $userStore?.email,
 		groups: $userStore?.groups,
 		username: $userStore?.username,
@@ -127,10 +146,10 @@
 		mode: 'editor',
 		summary: $summaryStore,
 		author: policy.on_behalf_of_email
-	}
+	})
 	const darkMode: Writable<boolean> = writable(document.documentElement.classList.contains('dark'))
 
-	const worldStore = buildWorld(context)
+	const worldStore = buildWorld(untrack(() => context))
 	const previewTheme: Writable<string | undefined> = writable(undefined)
 	const initialized = writable({
 		initialized: false,
@@ -147,7 +166,6 @@
 	$secondaryMenuLeftStore.isOpen = false
 
 	let writablePath = writable(path)
-	$: path && onPathChange()
 
 	function onPathChange() {
 		writablePath.set(path)
@@ -221,8 +239,6 @@
 
 	let timeout: NodeJS.Timeout | undefined = undefined
 
-	$: $appStore && saveFrontendDraft()
-
 	function saveFrontendDraft() {
 		timeout && clearTimeout(timeout)
 		timeout = setTimeout(() => {
@@ -239,30 +255,20 @@
 		context = context
 	}
 
-	$: context.mode = $mode == 'dnd' ? 'editor' : 'viewer'
+	let selectedTab: 'insert' | 'settings' | 'css' = $state('insert')
 
-	$: width =
-		$breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
-			? 'min-w-[400px] max-w-[656px]'
-			: `min-w-[710px] ${$appStore.fullscreen ? 'w-full' : 'max-w-7xl'}`
-
-	let selectedTab: 'insert' | 'settings' | 'css' = 'insert'
-
-	let befSelected: string | undefined = undefined
-
-	$: if ($selectedComponent?.[0] != befSelected) {
-		befSelected = $selectedComponent?.[0]
-		if ($selectedComponent?.[0] != undefined) {
-			onSelectedComponentChange()
-		}
-	}
+	let befSelected: string | undefined = $state(undefined)
 
 	function onSelectedComponentChange() {
 		selectedTab = 'settings'
 		if (befSelected) {
 			if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith(BG_PREFIX)) {
 				let item = findGridItem($appStore, befSelected)
-				if (item?.data.type === 'containercomponent' || item?.data.type === 'listcomponent') {
+				if (
+					item?.data.type === 'containercomponent' ||
+					item?.data.type === 'listcomponent' ||
+					item?.data.type === 'modalcomponent'
+				) {
 					$focusedGrid = {
 						parentComponentId: befSelected,
 						subGridIndex: 0
@@ -292,20 +298,21 @@
 							}
 						} catch {}
 					} else {
-						$focusedGrid = undefined
+						const drawerAlreadyHandledFocusedGrid =
+							item?.data.type === 'drawercomponent' &&
+							$focusedGrid?.parentComponentId === befSelected
+						if (!drawerAlreadyHandledFocusedGrid) {
+							$focusedGrid = undefined
+						}
 					}
 				}
 			}
 		}
 	}
 
-	let itemPicker: ItemPicker | undefined = undefined
+	let itemPicker: ItemPicker | undefined = $state(undefined)
 
-	$: if ($pickVariableCallback) {
-		itemPicker?.openDrawer()
-	}
-
-	let variableEditor: VariableEditor | undefined = undefined
+	let variableEditor: VariableEditor | undefined = $state(undefined)
 
 	setContext<ContextPanelContext>('ContextPanel', {
 		search: writable<string>(''),
@@ -317,12 +324,12 @@
 		$darkMode = document.documentElement.classList.contains('dark')
 	}
 
-	let runnablePanelSize = 30
-	let gridPanelSize = 70
+	let runnablePanelSize = $state(30)
+	let gridPanelSize = $state(70)
 
-	let leftPanelSize = 22
-	let centerPanelSize = 56
-	let rightPanelSize = 22
+	let leftPanelSize = $state(22)
+	let centerPanelSize = $state(56)
+	let rightPanelSize = $state(22)
 
 	let tmpRunnablePanelSize = -1
 	let tmpGridPanelSize = -1
@@ -334,13 +341,6 @@
 	let toggled = false
 	let cssToggled = false
 
-	// Animation logic for cssInput
-	$: animateCssInput($cssEditorOpen)
-	$: $cssEditorOpen &&
-		secondaryMenuLeft?.open(StylePanel, {
-			type: 'style'
-		})
-
 	function animateCssInput(cssEditorOpen: boolean) {
 		if (cssEditorOpen && !cssToggled) {
 			cssToggled = true
@@ -389,17 +389,13 @@
 		}
 	}
 
-	$: $cssEditorOpen && selectCss()
-
 	function selectCss() {
 		selectedTab !== 'css' && (selectedTab = 'css')
 	}
 
 	const cssId = 'wm-global-style'
 
-	$: addOrRemoveCss(true, $mode === 'preview')
-
-	let css: string | undefined = undefined
+	let css: string | undefined = $state(undefined)
 
 	let lastTheme: string | undefined = undefined
 	appStore.subscribe(async (currentAppStore) => {
@@ -420,8 +416,6 @@
 		}
 	})
 
-	$: updateCssContent(css, $previewTheme)
-
 	function addOrRemoveCss(isPremium: boolean, isPreview: boolean = false) {
 		const existingElement = document.getElementById(cssId)
 
@@ -449,15 +443,16 @@
 		}
 	}
 
-	let appEditorHeader: AppEditorHeader | undefined = undefined
+	let appEditorHeader: AppEditorHeader | undefined = $state(undefined)
 
 	export function triggerTutorial() {
 		appEditorHeader?.toggleTutorial()
 	}
 
-	let box
+	let box: HTMLElement | undefined = $state(undefined)
 	function parseScroll() {
-		$yTop = box?.scrollTop
+		$yTop = box?.scrollTop ?? 0
+		// console.log('parse scroll', $yTop)
 	}
 
 	let mounted = false
@@ -484,13 +479,13 @@
 		parseScroll()
 	})
 
-	$: setGridPanelSize($componentActive)
-
 	let lastComponentActive = false
 
-	afterUpdate(() => {
+	$effect(() => {
 		if ($componentActive != lastComponentActive) {
-			box.scrollTop = $yTop
+			if (box) {
+				box.scrollTop = $yTop
+			}
 			lastComponentActive = $componentActive
 		}
 	})
@@ -505,13 +500,13 @@
 		}
 	}
 
-	let runnableJobEnterTimeout: NodeJS.Timeout | undefined = undefined
-	let stillInJobEnter = false
+	let runnableJobEnterTimeout: NodeJS.Timeout | undefined = $state(undefined)
+	let stillInJobEnter = $state(false)
 	let storedLeftPanelSize = 0
 	let storedRightPanelSize = 0
 	let storedBottomPanelSize = 0
 
-	let centerPanelWidth = 0
+	let centerPanelWidth = $state(0)
 
 	function hideLeftPanel(animate: boolean = false) {
 		storedLeftPanelSize = leftPanelSize
@@ -682,10 +677,6 @@
 		}
 	}
 
-	$: $connectingInput.opened, updatePannelInConnecting()
-
-	$: updateCursorStyle(!!$connectingInput.opened && !$panzoomActive)
-
 	function updateCursorStyle(disabled: boolean) {
 		if (disabled) {
 			// Select all elements that don't have data-connection-button and aren't children of elements with data-connection-button
@@ -705,7 +696,7 @@
 	}
 
 	let instance: any
-	let isModifierKeyPressed = false
+	let isModifierKeyPressed = $state(false)
 	function resetView() {
 		if (instance && box) {
 			instance.moveTo(0.5, 0)
@@ -772,17 +763,82 @@
 		isModifierKeyPressed = false
 	}
 
-	let mouseOverGridView = false
-	let handMode = false
-	let forceDeactivatePanzoom = false
+	let mouseOverGridView = $state(false)
+	let handMode = $state(false)
+	let forceDeactivatePanzoom = $state(false)
 
-	$: $panzoomActive =
-		(isModifierKeyPressed || handMode) &&
-		!forceDeactivatePanzoom &&
-		!$componentActive &&
-		mouseOverGridView
+	$effect(() => {
+		path && untrack(() => onPathChange())
+	})
+	$effect(() => {
+		$appStore && untrack(() => saveFrontendDraft())
+	})
+	$effect(() => {
+		context.mode = $mode == 'dnd' ? 'editor' : 'viewer'
+	})
+	let width = $derived(
+		$breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+			? 'min-w-[400px] max-w-[656px]'
+			: `min-w-[710px] ${$appStore.fullscreen ? 'w-full' : 'max-w-7xl'}`
+	)
+	$effect(() => {
+		if ($selectedComponent?.[0] != befSelected) {
+			befSelected = $selectedComponent?.[0]
+			if ($selectedComponent?.[0] != undefined) {
+				untrack(() => onSelectedComponentChange())
+			}
+		}
+	})
+	$effect(() => {
+		if ($pickVariableCallback) {
+			itemPicker?.openDrawer()
+		}
+	})
+	// Animation logic for cssInput
+	$effect(() => {
+		;[$cssEditorOpen]
+		untrack(() => animateCssInput($cssEditorOpen))
+	})
+	$effect(() => {
+		$cssEditorOpen &&
+			secondaryMenuLeft?.open(StylePanel, {
+				type: 'style'
+			})
+	})
+	$effect(() => {
+		$cssEditorOpen && untrack(() => selectCss())
+	})
+	$effect(() => {
+		;[$mode]
+		untrack(() => addOrRemoveCss(true, $mode === 'preview'))
+	})
+	$effect(() => {
+		;[css, $previewTheme]
+		untrack(() => updateCssContent(css, $previewTheme))
+	})
+	$effect(() => {
+		;[$componentActive]
+		untrack(() => setGridPanelSize($componentActive))
+	})
+	$effect(() => {
+		$connectingInput.opened, untrack(() => updatePannelInConnecting())
+	})
+	$effect(() => {
+		forceDeactivatePanzoom = isModifierKeyPressed && handMode
+	})
+	$effect(() => {
+		$panzoomActive =
+			(isModifierKeyPressed || handMode) &&
+			!forceDeactivatePanzoom &&
+			!$componentActive &&
+			mouseOverGridView
+	})
+	$effect(() => {
+		;[!!$connectingInput.opened, !$panzoomActive]
+		untrack(() => updateCursorStyle(!!$connectingInput.opened && !$panzoomActive))
+	})
 
-	$: forceDeactivatePanzoom = isModifierKeyPressed && handMode
+	const unsavedConfirmationModal_render = $derived(unsavedConfirmationModal)
 </script>
 
 <svelte:head></svelte:head>
@@ -790,16 +846,17 @@
 <DarkModeObserver on:change={onThemeChange} />
 
 <svelte:window
-	on:hashchange={hashchange}
-	on:keydown={keydown}
-	on:keyup={handleKeyUp}
-	on:focus={() => {
+	onhashchange={hashchange}
+	onkeydown={keydown}
+	onkeyup={handleKeyUp}
+	onfocus={() => {
 		if (isModifierKeyPressed) {
 			isModifierKeyPressed = false
 		}
 	}}
 />
 
+<!-- {$focusedGrid?.parentComponentId} -->
 {#if !$userStore?.operator}
 	{#if $appStore}
 		<AppEditorHeader
@@ -823,19 +880,17 @@
 			on:hideBottomPanel={() => hideBottomPanel()}
 			on:showBottomPanel={() => showBottomPanel()}
 		>
-			<svelte:fragment
-				slot="unsavedConfirmationModal"
-				let:diffDrawer
-				let:additionalExitAction
-				let:getInitialAndModifiedValues
-			>
-				<slot
-					name="unsavedConfirmationModal"
-					{diffDrawer}
-					{additionalExitAction}
-					{getInitialAndModifiedValues}
-				/>
-			</svelte:fragment>
+			{#snippet unsavedConfirmationModal({
+				diffDrawer,
+				additionalExitAction,
+				getInitialAndModifiedValues
+			})}
+				{@render unsavedConfirmationModal_render?.({
+					diffDrawer,
+					additionalExitAction,
+					getInitialAndModifiedValues
+				})}
+			{/snippet}
 		</AppEditorHeader>
 		{#if $mode === 'preview'}
 			<SplitPanesWrapper>
@@ -902,7 +957,7 @@
 						<Splitpanes id="o2" horizontal class="!overflow-visible">
 							<Pane bind:size={gridPanelSize} class="ovisible">
 								<div
-									on:pointerdown={(e) => {
+									onpointerdown={(e) => {
 										$selectedComponent = undefined
 										$focusedGrid = undefined
 									}}
@@ -949,7 +1004,7 @@
 									<div
 										class="absolute bottom-2 left-2 z-50 border bg-surface"
 										data-connection-button
-										on:pointerdown|stopPropagation
+										onpointerdown={stopPropagation(bubble('pointerdown'))}
 									>
 										<div class="flex flex-row gap-2 text-xs items-center h-8 px-1">
 											<Button
@@ -979,7 +1034,7 @@
 												<Scan size={14} />
 											</Button>
 											<Popover disappearTimeout={0} notClickable placement="bottom">
-												<svelte:fragment slot="text">
+												{#snippet text()}
 													<div class="flex flex-row gap-2">
 														<div class="flex-1">
 															Hand Mode
@@ -1003,7 +1058,7 @@
 															<span class="float-left text-tertiary-inverse">esc</span>
 														</div>
 													</div>
-												</svelte:fragment>
+												{/snippet}
 												<Button
 													color="light"
 													size="xs2"
@@ -1026,14 +1081,14 @@
 										class="absolute pointer-events-none inset-0 h-full w-full surface-secondary bg-[radial-gradient(#dbdbdb_1px,transparent_1px)] dark:bg-[radial-gradient(#666666_1px,transparent_1px)] [background-size:16px_16px]"
 									></div>
 
-									<!-- svelte-ignore a11y-no-static-element-interactions -->
+									<!-- svelte-ignore a11y_no_static_element_interactions -->
 									<div
 										bind:this={box}
-										on:scroll={parseScroll}
-										on:mouseenter={() => {
+										onscroll={parseScroll}
+										onmouseenter={() => {
 											mouseOverGridView = true
 										}}
-										on:mouseleave={() => {
+										onmouseleave={() => {
 											mouseOverGridView = false
 										}}
 										class={classNames(
@@ -1125,7 +1180,9 @@
 							<div bind:clientWidth={$runnableJob.width} class="relative flex flex-col h-full">
 								<Tabs bind:selected={selectedTab} wrapperClass="!min-h-[42px]" class="!h-full">
 									<Popover disappearTimeout={0} notClickable placement="bottom">
-										<svelte:fragment slot="text">Component library</svelte:fragment>
+										{#snippet text()}
+											Component library
+										{/snippet}
 										<Tab
 											value="insert"
 											size="xs"
@@ -1144,7 +1201,9 @@
 										</Tab>
 									</Popover>
 									<Popover disappearTimeout={0} notClickable placement="bottom">
-										<svelte:fragment slot="text">Component settings</svelte:fragment>
+										{#snippet text()}
+											Component settings
+										{/snippet}
 										<Tab
 											value="settings"
 											size="xs"
@@ -1162,7 +1221,9 @@
 										</Tab>
 									</Popover>
 									<Popover disappearTimeout={0} notClickable placement="bottom">
-										<svelte:fragment slot="text">Global styling</svelte:fragment>
+										{#snippet text()}
+											Global styling
+										{/snippet}
 										<Tab
 											value="css"
 											size="xs"
@@ -1182,29 +1243,31 @@
 									<div class="h-full w-full flex justify-end px-1">
 										<HideButton on:click={() => hideRightPanel()} direction="right" />
 									</div>
-									<div slot="content" class="h-full overflow-y-auto">
-										<TabContent class="overflow-auto h-full" value="settings">
-											{#if $selectedComponent !== undefined}
-												<SettingsPanel
-													on:delete={() => {
-														befSelected = undefined
-														selectedTab = 'insert'
-													}}
-												/>
-												<SecondaryMenu right />
-											{:else}
-												<div class="min-w-[150px] text-sm !text-secondary text-center py-8 px-2">
-													Select a component to see the settings&nbsp;for&nbsp;it
-												</div>
-											{/if}
-										</TabContent>
-										<TabContent value="insert">
-											<ComponentList />
-										</TabContent>
-										<TabContent value="css" class="h-full">
-											<CssSettings />
-										</TabContent>
-									</div>
+									{#snippet content()}
+										<div class="h-full overflow-y-auto">
+											<TabContent class="overflow-auto h-full" value="settings">
+												{#if $selectedComponent !== undefined}
+													<SettingsPanel
+														on:delete={() => {
+															befSelected = undefined
+															selectedTab = 'insert'
+														}}
+													/>
+													<SecondaryMenu right />
+												{:else}
+													<div class="min-w-[150px] text-sm !text-secondary text-center py-8 px-2">
+														Select a component to see the settings&nbsp;for&nbsp;it
+													</div>
+												{/if}
+											</TabContent>
+											<TabContent value="insert">
+												<ComponentList />
+											</TabContent>
+											<TabContent value="css" class="h-full">
+												<CssSettings />
+											</TabContent>
+										</div>
+									{/snippet}
 								</Tabs>
 							</div>
 						</Pane>
@@ -1232,22 +1295,23 @@
 			...x
 		}))}
 >
-	<div
-		slot="submission"
-		class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
-	>
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			startIcon={{ icon: Plus }}
-			on:click={() => {
-				variableEditor?.initNew?.()
-			}}
+	{#snippet submission()}
+		<div
+			class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 		>
-			New variable
-		</Button>
-	</div>
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				startIcon={{ icon: Plus }}
+				on:click={() => {
+					variableEditor?.initNew?.()
+				}}
+			>
+				New variable
+			</Button>
+		</div>
+	{/snippet}
 </ItemPicker>
 
 <VariableEditor bind:this={variableEditor} />
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 48bbfc0288..42d6f7a0f3 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { Alert, Drawer, DrawerContent, UndoRedo } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
 
@@ -27,7 +30,7 @@
 		SunMoon,
 		Zap
 	} from 'lucide-svelte'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import {
 		cleanValueProperties,
 		orderedJsonStringify,
@@ -95,32 +98,49 @@
 		}
 	}
 
-	export let policy: Policy
-	export let fromHub: boolean = false
-	export let diffDrawer: DiffDrawer | undefined = undefined
-	export let savedApp:
-		| {
-				value: App
-				draft?: any
-				path: string
-				summary: string
-				policy: any
-				draft_only?: boolean
-				custom_path?: string
-		  }
-		| undefined = undefined
-	export let version: number | undefined = undefined
-	export let leftPanelHidden: boolean = false
-	export let rightPanelHidden: boolean = false
-	export let bottomPanelHidden: boolean = false
-	export let newApp: boolean
-	export let newPath: string = ''
+	interface Props {
+		policy: Policy
+		fromHub?: boolean
+		diffDrawer?: DiffDrawer | undefined
+		savedApp?:
+			| {
+					value: App
+					draft?: any
+					path: string
+					summary: string
+					policy: any
+					draft_only?: boolean
+					custom_path?: string
+			  }
+			| undefined
+		version?: number | undefined
+		leftPanelHidden?: boolean
+		rightPanelHidden?: boolean
+		bottomPanelHidden?: boolean
+		newApp: boolean
+		newPath?: string
+		unsavedConfirmationModal?: import('svelte').Snippet<[any]>
+	}
 
-	let newEditedPath = ''
-	let deployedValue: Value | undefined = undefined // Value to diff against
-	let deployedBy: string | undefined = undefined // Author
-	let confirmCallback: () => void = () => {} // What happens when user clicks `override` in warning
-	let open: boolean = false // Is confirmation modal open
+	let {
+		policy = $bindable(),
+		fromHub = false,
+		diffDrawer = undefined,
+		savedApp = $bindable(undefined),
+		version = $bindable(undefined),
+		leftPanelHidden = false,
+		rightPanelHidden = false,
+		bottomPanelHidden = false,
+		newApp,
+		newPath = '',
+		unsavedConfirmationModal
+	}: Props = $props()
+
+	let newEditedPath = $state('')
+	let deployedValue: Value | undefined = $state(undefined) // Value to diff against
+	let deployedBy: string | undefined = $state(undefined) // Author
+	let confirmCallback: () => void = $state(() => {}) // What happens when user clicks `override` in warning
+	let open: boolean = $state(false) // Is confirmation modal open
 
 	const {
 		app,
@@ -139,30 +159,24 @@
 	const { history, jobsDrawerOpen, refreshComponents } =
 		getContext<AppEditorContext>('AppEditorContext')
 
-	const loading = {
+	const loading = $state({
 		publish: false,
 		save: false,
 		saveDraft: false
-	}
+	})
 
-	$: if ($openDebugRun == undefined) {
-		$openDebugRun = (jobId: string) => {
-			$jobsDrawerOpen = true
-			selectedJobId = jobId
-		}
-	}
-	let selectedJobId: string | undefined = undefined
+	let selectedJobId: string | undefined = $state(undefined)
 
-	let pathError: string | undefined = undefined
-	let appExport: AppExportButton
+	let pathError: string | undefined = $state(undefined)
+	let appExport: AppExportButton | undefined = $state()
 
-	let draftDrawerOpen = false
-	let saveDrawerOpen = false
-	let inputsDrawerOpen = fromHub
-	let historyBrowserDrawerOpen = false
-	let debugAppDrawerOpen = false
-	let lazyDrawerOpen = false
-	let deploymentMsg: string | undefined = undefined
+	let draftDrawerOpen = $state(false)
+	let saveDrawerOpen = $state(false)
+	let inputsDrawerOpen = $state(fromHub)
+	let historyBrowserDrawerOpen = $state(false)
+	let debugAppDrawerOpen = $state(false)
+	let lazyDrawerOpen = $state(false)
+	let deploymentMsg: string | undefined = $state(undefined)
 
 	function closeSaveDrawer() {
 		saveDrawerOpen = false
@@ -378,7 +392,7 @@
 			})
 			savedApp = {
 				summary: $summary,
-				value: structuredClone($app),
+				value: structuredClone($state.snapshot($app)),
 				path: path,
 				policy: policy,
 				custom_path: customPath
@@ -474,7 +488,7 @@
 		})
 		savedApp = {
 			summary: $summary,
-			value: structuredClone($app),
+			value: structuredClone($state.snapshot($app)),
 			path: npath,
 			policy,
 			custom_path: customPath
@@ -497,9 +511,7 @@
 		}
 	}
 
-	let secretUrl: string | undefined = undefined
-
-	$: $appPath && $appPath != '' && secretUrl == undefined && getSecretUrl()
+	let secretUrl: string | undefined = $state(undefined)
 
 	async function getSecretUrl() {
 		secretUrl = await AppService.getPublicSecretOfApp({
@@ -560,13 +572,13 @@
 			})
 			savedApp = {
 				summary: $summary,
-				value: structuredClone($app),
+				value: structuredClone($state.snapshot($app)),
 				path: newEditedPath,
 				policy,
 				draft_only: true,
 				draft: {
 					summary: $summary,
-					value: structuredClone($app),
+					value: structuredClone($state.snapshot($app)),
 					path: newEditedPath,
 					policy,
 					custom_path: customPath
@@ -648,7 +660,7 @@
 				...(savedApp?.draft_only
 					? {
 							summary: $summary,
-							value: structuredClone($app),
+							value: structuredClone($state.snapshot($app)),
 							path: savedApp.draft_only ? newEditedPath || path : path,
 							policy,
 							draft_only: true,
@@ -657,7 +669,7 @@
 					: savedApp),
 				draft: {
 					summary: $summary,
-					value: structuredClone($app),
+					value: structuredClone($state.snapshot($app)),
 					path: newEditedPath || path,
 					policy,
 					custom_path: customPath
@@ -680,7 +692,7 @@
 		}
 	}
 
-	let onLatest = true
+	let onLatest = $state(true)
 	async function compareVersions() {
 		if (version === undefined) {
 			return
@@ -697,10 +709,6 @@
 		}
 	}
 
-	$: saveDrawerOpen && compareVersions()
-
-	$: hasErrors = Object.keys($errorByComponent).length > 0
-
 	let lock = false
 	function onKeyDown(event: KeyboardEvent) {
 		if (lock) return
@@ -718,14 +726,19 @@
 		switch (event.key) {
 			case 'Z':
 				if (event.ctrlKey || event.metaKey) {
-					$app = redo(history)
+					const napp = redo(history)
+					for (const key in napp) {
+						$app[key] = napp[key]
+					}
 					event.preventDefault()
 				}
 				break
 			case 'z':
 				if (event.ctrlKey || event.metaKey) {
-					$app = undo(history, $app)
-
+					const napp = undo(history, $app)
+					for (const key in napp) {
+						$app[key] = napp[key]
+					}
 					event.preventDefault()
 				}
 				break
@@ -757,8 +770,8 @@
 		lock = false
 	}
 
-	let dirtyPath = false
-	let path: Path | undefined = undefined
+	let dirtyPath = $state(false)
+	let path: Path | undefined = $state(undefined)
 
 	let moreItems = [
 		{
@@ -773,7 +786,7 @@
 			displayName: 'Export',
 			icon: FileJson,
 			action: () => {
-				appExport.open($app)
+				appExport?.open($app)
 			}
 		},
 		// {
@@ -788,7 +801,7 @@
 			displayName: 'Hub compatible JSON',
 			icon: FileUp,
 			action: () => {
-				appExport.open(toStatic($app, $staticExporter, $summary).app)
+				appExport?.open(toStatic($app, $staticExporter, $summary).app)
 			}
 		},
 		{
@@ -850,13 +863,13 @@
 		}
 	]
 
-	let appEditorTutorial: AppEditorTutorial | undefined = undefined
+	let appEditorTutorial: AppEditorTutorial | undefined = $state(undefined)
 
 	export function toggleTutorial() {
 		appEditorTutorial?.toggleTutorial()
 	}
 
-	let appReportingDrawerOpen = false
+	let appReportingDrawerOpen = $state(false)
 
 	export function openTroubleshootPanel() {
 		debugAppDrawerOpen = true
@@ -879,12 +892,9 @@
 	let priorDarkMode = document.documentElement.classList.contains('dark')
 	setTheme($app?.darkMode)
 
-	let customPath = savedApp?.custom_path
-	let dirtyCustomPath = false
-	let customPathError = ''
-	$: fullCustomUrl = `${window.location.origin}${base}/a/${
-		isCloudHosted() ? $workspaceStore + '/' : ''
-	}${customPath}`
+	let customPath = $state(savedApp?.custom_path)
+	let dirtyCustomPath = $state(false)
+	let customPathError = $state('')
 	async function appExists(customPath: string) {
 		return await AppService.customPathExists({
 			workspace: $workspaceStore!,
@@ -908,19 +918,41 @@
 			validateTimeout = undefined
 		}, 500)
 	}
-	$: customPath !== undefined && validateCustomPath(customPath)
+	$effect(() => {
+		if ($openDebugRun == undefined) {
+			$openDebugRun = (jobId: string) => {
+				$jobsDrawerOpen = true
+				selectedJobId = jobId
+			}
+		}
+	})
+	$effect(() => {
+		$appPath && $appPath != '' && secretUrl == undefined && untrack(() => getSecretUrl())
+	})
+	$effect(() => {
+		saveDrawerOpen && untrack(() => compareVersions())
+	})
+	let hasErrors = $derived(Object.keys($errorByComponent).length > 0)
+	let fullCustomUrl = $derived(
+		`${window.location.origin}${base}/a/${
+			isCloudHosted() ? $workspaceStore + '/' : ''
+		}${customPath}`
+	)
+	$effect(() => {
+		;[customPath]
+		untrack(() => customPath !== undefined && validateCustomPath(customPath))
+	})
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
-{#if $$slots.unsavedConfirmationModal}
-	<slot
-		name="unsavedConfirmationModal"
-		{diffDrawer}
-		additionalExitAction={() => {
+{#if unsavedConfirmationModal}
+	{@render unsavedConfirmationModal?.({
+		diffDrawer,
+		additionalExitAction: () => {
 			setTheme(priorDarkMode)
-		}}
-		getInitialAndModifiedValues={() => ({
+		},
+		getInitialAndModifiedValues: () => ({
 			savedValue: savedApp,
 			modifiedValue: {
 				summary: $summary,
@@ -929,8 +961,8 @@
 				policy,
 				custom_path: customPath
 			}
-		})}
-	/>
+		})
+	})}
 {/if}
 <DeployOverrideConfirmationModal
 	bind:deployedBy
@@ -955,15 +987,15 @@
 			</Alert>
 			<h3>Summary</h3>
 			<div class="w-full pt-2">
-				<!-- svelte-ignore a11y-autofocus -->
+				<!-- svelte-ignore a11y_autofocus -->
 				<input
 					autofocus
 					type="text"
 					placeholder="App summary"
 					class="text-sm w-full font-semibold"
-					on:keydown|stopPropagation
+					onkeydown={stopPropagation(bubble('keydown'))}
 					bind:value={$summary}
-					on:keyup={() => {
+					onkeyup={() => {
 						if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
 							path?.setName(
 								$summary
@@ -989,15 +1021,17 @@
 			/>
 			<div class="py-4"></div>
 
-			<div slot="actions">
-				<Button
-					startIcon={{ icon: Save }}
-					disabled={pathError != ''}
-					on:click={() => saveInitialDraft()}
-				>
-					Save initial draft
-				</Button>
-			</div>
+			{#snippet actions()}
+				<div>
+					<Button
+						startIcon={{ icon: Save }}
+						disabled={pathError != ''}
+						on:click={() => saveInitialDraft()}
+					>
+						Save initial draft
+					</Button>
+				</div>
+			{/snippet}
 		</DrawerContent>
 	</Drawer>
 {/if}
@@ -1028,15 +1062,15 @@
 		{/if}
 		<span class="text-secondary text-sm font-bold">Summary</span>
 		<div class="w-full pt-2">
-			<!-- svelte-ignore a11y-autofocus -->
+			<!-- svelte-ignore a11y_autofocus -->
 			<input
 				autofocus
 				type="text"
 				placeholder="App summary"
 				class="text-sm w-full"
 				bind:value={$summary}
-				on:keydown|stopPropagation
-				on:keyup={() => {
+				onkeydown={stopPropagation(bubble('keydown'))}
+				onkeyup={() => {
 					if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
 						path?.setName(
 							$summary
@@ -1052,7 +1086,7 @@
 		<div class="py-4"></div>
 		<span class="text-secondary text-sm font-bold">Deployment message</span>
 		<div class="w-full pt-2">
-			<!-- svelte-ignore a11y-autofocus -->
+			<!-- svelte-ignore a11y_autofocus -->
 			<input
 				type="text"
 				placeholder="Optional deployment message"
@@ -1073,63 +1107,65 @@
 			autofocus={false}
 		/>
 
-		<div slot="actions" class="flex flex-row gap-4">
-			<Button
-				variant="border"
-				color="light"
-				disabled={!savedApp || savedApp.draft_only}
-				on:click={async () => {
-					if (!savedApp) {
-						return
-					}
-					// deployedValue should be syncronized when we open Diff
-					await syncWithDeployed()
+		{#snippet actions()}
+			<div class="flex flex-row gap-4">
+				<Button
+					variant="border"
+					color="light"
+					disabled={!savedApp || savedApp.draft_only}
+					on:click={async () => {
+						if (!savedApp) {
+							return
+						}
+						// deployedValue should be syncronized when we open Diff
+						await syncWithDeployed()
 
-					saveDrawerOpen = false
-					diffDrawer?.openDrawer()
-					diffDrawer?.setDiff({
-						mode: 'normal',
-						deployed: deployedValue ?? savedApp,
-						draft: savedApp.draft,
-						current: {
-							summary: $summary,
-							value: $app,
-							path: newEditedPath || savedApp.draft?.path || savedApp.path,
-							policy,
-							custom_path: customPath
-						},
-						button: {
-							text: 'Looks good, deploy',
-							onClick: () => {
-								if ($appPath == '') {
-									createApp(newEditedPath)
-								} else {
-									handleUpdateApp(newEditedPath)
+						saveDrawerOpen = false
+						diffDrawer?.openDrawer()
+						diffDrawer?.setDiff({
+							mode: 'normal',
+							deployed: deployedValue ?? savedApp,
+							draft: savedApp.draft,
+							current: {
+								summary: $summary,
+								value: $app,
+								path: newEditedPath || savedApp.draft?.path || savedApp.path,
+								policy,
+								custom_path: customPath
+							},
+							button: {
+								text: 'Looks good, deploy',
+								onClick: () => {
+									if ($appPath == '') {
+										createApp(newEditedPath)
+									} else {
+										handleUpdateApp(newEditedPath)
+									}
 								}
 							}
+						})
+					}}
+				>
+					<div class="flex flex-row gap-2 items-center">
+						<DiffIcon size={14} />
+						Diff
+					</div>
+				</Button>
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || customPathError != ''}
+					on:click={() => {
+						if ($appPath == '') {
+							createApp(newEditedPath)
+						} else {
+							handleUpdateApp(newEditedPath)
 						}
-					})
-				}}
-			>
-				<div class="flex flex-row gap-2 items-center">
-					<DiffIcon size={14} />
-					Diff
-				</div>
-			</Button>
-			<Button
-				startIcon={{ icon: Save }}
-				disabled={pathError != '' || customPathError != ''}
-				on:click={() => {
-					if ($appPath == '') {
-						createApp(newEditedPath)
-					} else {
-						handleUpdateApp(newEditedPath)
-					}
-				}}
-			>
-				Deploy
-			</Button>
-		</div>
+					}}
+				>
+					Deploy
+				</Button>
+			</div>
+		{/snippet}
 		<div class="py-2"></div>
 		{#if $appPath == ''}
 			<Alert title="Require saving" type="error">
@@ -1219,7 +1255,7 @@
 							class={customPathError === ''
 								? ''
 								: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-							on:input={() => {
+							oninput={() => {
 								dirtyCustomPath = true
 							}}
 						/>
@@ -1282,10 +1318,16 @@
 				undoProps={{ disabled: $history?.index === 0 }}
 				redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
 				on:undo={() => {
-					$app = undo(history, $app)
+					const napp = undo(history, $app)
+					for (const key in napp) {
+						$app[key] = napp[key]
+					}
 				}}
 				on:redo={() => {
-					$app = redo(history)
+					const napp = redo(history)
+					for (const key in napp) {
+						$app[key] = napp[key]
+					}
 				}}
 			/>
 
@@ -1296,22 +1338,23 @@
 					on:selected={({ detail }) => {
 						$app.fullscreen = detail === 'true'
 					}}
-					let:item
 				>
-					<ToggleButton
-						icon={AlignHorizontalSpaceAround}
-						value={'false'}
-						tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					<ToggleButton
-						tooltip="The width is of the app if the full width of its container"
-						icon={Expand}
-						value={'true'}
-						iconProps={{ size: 16 }}
-						{item}
-					/>
+					{#snippet children({ item })}
+						<ToggleButton
+							icon={AlignHorizontalSpaceAround}
+							value={'false'}
+							tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+						<ToggleButton
+							tooltip="The width is of the app if the full width of its container"
+							icon={Expand}
+							value={'true'}
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
 			{#if $app}
@@ -1322,60 +1365,63 @@
 						setTheme(theme)
 					}}
 					selected={$app.darkMode === undefined ? 'auto' : $app.darkMode ? 'dark' : 'sun'}
-					let:item
 				>
-					<ToggleButton
-						icon={SunMoon}
-						value={'auto'}
-						tooltip="The app mode between dark/light is automatic"
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					<ToggleButton
-						icon={Sun}
-						value={'sun'}
-						tooltip="Force light mode"
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					<ToggleButton
-						tooltip="Force dark mode"
-						icon={Moon}
-						value={'dark'}
-						iconProps={{ size: 16 }}
-						{item}
-					/>
+					{#snippet children({ item })}
+						<ToggleButton
+							icon={SunMoon}
+							value={'auto'}
+							tooltip="The app mode between dark/light is automatic"
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+						<ToggleButton
+							icon={Sun}
+							value={'sun'}
+							tooltip="Force light mode"
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+						<ToggleButton
+							tooltip="Force dark mode"
+							icon={Moon}
+							value={'dark'}
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
 			<div class="flex flex-row gap-2">
-				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint} let:item>
-					<ToggleButton
-						tooltip="Computer View"
-						icon={Laptop2}
-						value={'lg'}
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					<ToggleButton
-						tooltip="Mobile View"
-						icon={Smartphone}
-						value={'sm'}
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					{#if $breakpoint === 'sm'}
-						<Toggle
-							size="xs"
-							options={{
-								right: 'Enable mobile view for smaller screens',
-								rightTooltip:
-									'Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view'
-							}}
-							textClass="text-2xs whitespace-nowrap white !w-full"
-							bind:checked={$app.mobileViewOnSmallerScreens}
-							class="flex flex-row px-2 items-center"
+				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
+					{#snippet children({ item })}
+						<ToggleButton
+							tooltip="Computer View"
+							icon={Laptop2}
+							value={'lg'}
+							iconProps={{ size: 16 }}
+							{item}
 						/>
-					{/if}
+						<ToggleButton
+							tooltip="Mobile View"
+							icon={Smartphone}
+							value={'sm'}
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+						{#if $breakpoint === 'sm'}
+							<Toggle
+								size="xs"
+								options={{
+									right: 'Enable mobile view for smaller screens',
+									rightTooltip:
+										'Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view'
+								}}
+								textClass="text-2xs whitespace-nowrap white !w-full"
+								bind:checked={$app.mobileViewOnSmallerScreens}
+								class="flex flex-row px-2 items-center"
+							/>
+						{/if}
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/apps/editor/AppExportButton.svelte b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
index b44ba8b547..9094980535 100644
--- a/frontend/src/lib/components/apps/editor/AppExportButton.svelte
+++ b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
@@ -34,7 +34,7 @@
 			<Tabs bind:selected={rawType}>
 				<Tab value="yaml">YAML</Tab>
 				<Tab value="json">JSON</Tab>
-				<svelte:fragment slot="content">
+				{#snippet content()}
 					<div class="relative pt-2">
 						<Button
 							on:click={() =>
@@ -60,7 +60,7 @@
 							/>
 						{/key}
 					</div>
-				</svelte:fragment>
+				{/snippet}
 			</Tabs>
 		</div></DrawerContent
 	>
diff --git a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
index aef77f3f51..9f6bdb8d19 100644
--- a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
@@ -78,8 +78,8 @@
 														? 'bg-red-600 !border-blue-600'
 														: 'bg-red-400'
 													: selectedJobId == id
-													? 'text-blue-600'
-													: ''
+														? 'text-blue-600'
+														: ''
 											)}
 											on:click={() => {
 												selectedJobId = id
@@ -266,7 +266,7 @@
 				</div>
 			</Pane>
 		</Splitpanes>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			{#if refreshComponents}
 				<Button
 					size="md"
@@ -291,9 +291,9 @@
 			</Button>
 			{#if hasErrors}
 				<Button size="md" color="light" variant="border" on:click={() => dispatch('clearErrors')}>
-					>Clear Errors &nbsp;<BellOff size={14} />
+					Clear Errors &nbsp;<BellOff size={14} />
 				</Button>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
index 86c3123daa..e52eb6cff8 100644
--- a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
@@ -85,7 +85,7 @@
 			<JsonEditor bind:code />
 		{/if}
 
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			{#if !$userStore?.operator}
 				<Button on:click={saveDraft} startIcon={{ icon: Save }} color="dark" size="xs">
 					Save as draft
@@ -94,6 +94,6 @@
 					Deploy
 				</Button>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte b/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
index 6850c90b58..576fac8643 100644
--- a/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
+++ b/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
@@ -24,47 +24,54 @@
 	import { CUSTOM_TAGS_SETTING, WORKSPACE_SLACK_BOT_TOKEN_PATH } from '$lib/consts'
 	import { loadSchemaFromPath } from '$lib/infer'
 	import { hubPaths } from '$lib/hub'
-	export let appPath: string
-	export let open = false
+	import { untrack } from 'svelte'
+	interface Props {
+		appPath: string
+		open?: boolean
+	}
 
-	let appReportingEnabled = false
-	let appReportingStartupDuration = 5
+	let { appPath, open = $bindable(false) }: Props = $props()
+
+	let appReportingEnabled = $state(false)
+	let appReportingStartupDuration = $state(5)
 	let appReportingSchedule: {
 		cron: string
 		timezone: string
-	} = {
+	} = $state({
 		cron: '0 0 12 * *',
 		timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
-	}
-	let selectedTab: 'email' | 'slack' | 'discord' | 'custom' = $enterpriseLicense
-		? 'slack'
-		: 'custom'
+	})
+	let selectedTab: 'email' | 'slack' | 'discord' | 'custom' = $state(
+		$enterpriseLicense ? 'slack' : 'custom'
+	)
 
-	let screenshotKind: 'pdf' | 'png' = 'pdf'
+	let screenshotKind: 'pdf' | 'png' = $state('pdf')
 
-	let customPath: string | undefined = undefined
-	let customPathSchema: Record<string, any> = {}
-	let args: Record<string, any> = {}
-	let areArgsValid = true
-	let customWidth: null | number = 1200
-	let customHeight: null | number = null
+	let customPath: string | undefined = $state(undefined)
+	let customPathSchema: Record<string, any> = $state({})
+	let args: Record<string, any> = $state({})
+	let areArgsValid = $state(true)
+	let customWidth: null | number = $state(1200)
+	let customHeight: null | number = $state(null)
 
-	$: customPath
-		? loadSchemaFromPath(customPath).then((schema) => {
-				customPathSchema = schema
-					? {
-							...schema,
-							properties: Object.fromEntries(
-								Object.entries(schema.properties ?? {}).filter(
-									([key, _]) => key !== 'screenshot' && key !== 'app_path' && key !== 'kind'
+	$effect(() => {
+		customPath
+			? loadSchemaFromPath(customPath).then((schema) => {
+					customPathSchema = schema
+						? {
+								...schema,
+								properties: Object.fromEntries(
+									Object.entries(schema.properties ?? {}).filter(
+										([key, _]) => key !== 'screenshot' && key !== 'app_path' && key !== 'kind'
+									)
 								)
-							)
-						}
-					: {}
-			})
-		: (customPathSchema = {})
+							}
+						: {}
+				})
+			: (customPathSchema = {})
+	})
 
-	let isSlackConnectedWorkspace = false
+	let isSlackConnectedWorkspace = $state(false)
 	async function getWorspaceSlackSetting() {
 		const settings = await WorkspaceService.getSettings({
 			workspace: $workspaceStore!
@@ -120,7 +127,7 @@
 					)
 				: {}
 			setTimeout(() => {
-				args = structuredClone(nargs)
+				args = structuredClone($state.snapshot(nargs))
 			})
 
 			customPath =
@@ -134,7 +141,9 @@
 		} catch (err) {}
 	}
 
-	$: appPath && getAppReportingInfo()
+	$effect(() => {
+		appPath && untrack(() => getAppReportingInfo())
+	})
 
 	async function disableAppReporting() {
 		const flowPath = appPath + '_reports'
@@ -496,7 +505,7 @@ export async function main(
 		appReportingEnabled = true
 	}
 
-	let testLoading = false
+	let testLoading = $state(false)
 	async function testReport() {
 		try {
 			testLoading = true
@@ -545,12 +554,14 @@ export async function main(
 		}
 	}
 
-	let disabled = true
-	$: disabled =
-		emptyString(appReportingSchedule.cron) ||
-		(selectedTab === 'custom' && emptyString(customPath)) ||
-		(selectedTab === 'slack' && !isSlackConnectedWorkspace) ||
-		!areArgsValid
+	let disabled = $state(true)
+	$effect(() => {
+		disabled =
+			emptyString(appReportingSchedule.cron) ||
+			(selectedTab === 'custom' && emptyString(customPath)) ||
+			(selectedTab === 'slack' && !isSlackConnectedWorkspace) ||
+			!areArgsValid
+	})
 </script>
 
 <DrawerContent
@@ -558,7 +569,8 @@ export async function main(
 	title="Schedule Reports"
 	tooltip="Send a PDF or PNG preview of any app at a given schedule"
 	documentationLink="https://www.windmill.dev/docs/apps/schedule_reports"
-	><svelte:fragment slot="actions">
+>
+	{#snippet actions()}
 		<div class="mr-4 center-center">
 			<Toggle
 				checked={appReportingEnabled}
@@ -587,7 +599,7 @@ export async function main(
 		>
 			{appReportingEnabled ? 'Update' : 'Save and enable'}
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 	<div class="flex flex-col gap-8">
 		<Alert type="info" title="Scheduled PDF/PNG reports"
 			>Send a PDF or PNG preview of the app at a given schedule. Enabling this feature will create a
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 5163a92885..01a725683b 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { AppEditorContext, AppViewerContext } from '../types'
 	import { gridColumns, isFixed, toggleFixed } from '../gridUtils'
 	import { twMerge } from 'tailwind-merge'
@@ -29,7 +29,11 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import type { Policy } from '$lib/gen'
 
-	export let policy: Policy
+	interface Props {
+		policy: Policy
+	}
+
+	let { policy }: Props = $props()
 
 	const {
 		selectedComponent,
@@ -46,13 +50,17 @@
 
 	const { history, componentActive } = getContext<AppEditorContext>('AppEditorContext')
 
-	let previousSelectedIds: string[] | undefined = undefined
-	$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-		previousSelectedIds = $selectedComponent
-		$allIdsInPath = ($selectedComponent ?? [])
-			.flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
-			.filter((x) => x != undefined) as string[]
-	}
+	let previousSelectedIds: string[] | undefined = $state(undefined)
+	$effect(() => {
+		if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+			untrack(() => {
+				previousSelectedIds = $selectedComponent
+				$allIdsInPath = ($selectedComponent ?? [])
+					.flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
+					.filter((x) => x != undefined) as string[]
+			})
+		}
+	})
 
 	function handleLock(id: string) {
 		const gridItem = findGridItem($app, id)
@@ -109,7 +117,7 @@
 		)
 
 		// Update the app state
-		$app = { ...$app }
+		$app = $app
 
 		$selectedComponent = [parentComponentId]
 		$focusedGrid = {
@@ -138,15 +146,17 @@
 						<span class="!text-2xs text-tertiary inline-flex gap-1 items-center"
 							><Loader2 size={10} class="animate-spin" /> {$bgRuns.length}
 						</span>
-						<span slot="text"
-							><div class="flex flex-col">
-								{#each $bgRuns as bgRun}
-									<div class="flex gap-2 items-center">
-										<div class="text-2xs text-tertiary">{bgRun}</div>
-									</div>
-								{/each}
-							</div></span
-						>
+						{#snippet text()}
+							<span
+								><div class="flex flex-col">
+									{#each $bgRuns as bgRun}
+										<div class="flex gap-2 items-center">
+											<div class="text-2xs text-tertiary">{bgRun}</div>
+										</div>
+									{/each}
+								</div></span
+							>
+						{/snippet}
 					</Popover>
 				{:else}
 					<span class="w-9"></span>
@@ -167,7 +177,7 @@
 			</div>
 		</div>
 	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
 		class={twMerge(
@@ -175,7 +185,7 @@
 			$app.css?.['app']?.['grid']?.class ?? '',
 			'wm-app-grid !static h-full w-full'
 		)}
-		on:pointerdown={() => {
+		onpointerdown={() => {
 			$selectedComponent = undefined
 			$focusedGrid = undefined
 		}}
@@ -194,10 +204,6 @@
 					$app.grid = e.detail
 				}}
 				root
-				let:dataItem
-				let:overlapped
-				let:moveMode
-				let:componentDraggedId
 				on:dropped={(e) => {
 					const { id, overlapped, x, y } = e.detail
 
@@ -224,55 +230,57 @@
 				}}
 				disableMove={!!$connectingInput.opened}
 			>
-				<ComponentWrapper
-					id={dataItem.id}
-					type={dataItem.data.type}
-					class={classNames(
-						'h-full w-full center-center outline outline-surface-secondary',
-						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
-					)}
-				>
-					<GridEditorMenu
+				{#snippet children({ dataItem, overlapped, moveMode, componentDraggedId })}
+					<ComponentWrapper
 						id={dataItem.id}
-						on:expand={() => {
-							push(history, $app)
-							$selectedComponent = [dataItem.id]
-							expandGriditem($app.grid, dataItem.id, $breakpoint)
-							$app = $app
-						}}
-						on:lock={() => {
-							handleLock(dataItem.id)
-						}}
-						on:fillHeight={() => {
-							handleFillHeight(dataItem.id)
-						}}
-						locked={isFixed(dataItem)}
-						fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+						type={dataItem.data.type}
+						class={classNames(
+							'h-full w-full center-center outline outline-surface-secondary',
+							Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
+						)}
 					>
-						<Component
-							render={true}
-							component={dataItem.data}
-							selected={Boolean($selectedComponent?.includes(dataItem.id))}
-							locked={isFixed(dataItem)}
-							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-							on:lock={() => {
-								handleLock(dataItem.id)
-							}}
-							on:fillHeight={() => {
-								handleFillHeight(dataItem.id)
-							}}
+						<GridEditorMenu
+							id={dataItem.id}
 							on:expand={() => {
 								push(history, $app)
 								$selectedComponent = [dataItem.id]
 								expandGriditem($app.grid, dataItem.id, $breakpoint)
 								$app = $app
 							}}
-							{overlapped}
-							{moveMode}
-							{componentDraggedId}
-						/>
-					</GridEditorMenu>
-				</ComponentWrapper>
+							on:lock={() => {
+								handleLock(dataItem.id)
+							}}
+							on:fillHeight={() => {
+								handleFillHeight(dataItem.id)
+							}}
+							locked={isFixed(dataItem)}
+							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+						>
+							<Component
+								render={true}
+								component={dataItem.data}
+								selected={Boolean($selectedComponent?.includes(dataItem.id))}
+								locked={isFixed(dataItem)}
+								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+								on:lock={() => {
+									handleLock(dataItem.id)
+								}}
+								on:fillHeight={() => {
+									handleFillHeight(dataItem.id)
+								}}
+								on:expand={() => {
+									push(history, $app)
+									$selectedComponent = [dataItem.id]
+									expandGriditem($app.grid, dataItem.id, $breakpoint)
+									$app = $app
+								}}
+								{overlapped}
+								{moveMode}
+								{componentDraggedId}
+							/>
+						</GridEditorMenu>
+					</ComponentWrapper>
+				{/snippet}
 			</Grid>
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
index 9b9a5f66f2..5180b322a8 100644
--- a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
@@ -1,7 +1,8 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	import { writable } from 'svelte/store'
 	import Popover from '../../Popover.svelte'
 
+	import { handleCut, handleCopy } from './component/componentCallbacks.svelte'
 	interface ContextMenuRegistry {
 		id: string
 		close: () => void
@@ -24,7 +25,6 @@
 		Scissors,
 		Trash
 	} from 'lucide-svelte'
-	import ComponentCallbacks from './component/ComponentCallbacks.svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { AppEditorContext, AppViewerContext } from '../types'
 	import DeleteComponent from './settingsPanel/DeleteComponent.svelte'
@@ -34,12 +34,9 @@
 
 	import { twMerge } from 'tailwind-merge'
 
-	let contextMenuVisible = false
-	let menuX = 0
-	let menuY = 0
-
-	export let locked: boolean = false
-	export let fullHeight: boolean = false
+	let contextMenuVisible = $state(false)
+	let menuX = $state(0)
+	let menuY = $state(0)
 
 	function handleRightClick(event: MouseEvent) {
 		event.preventDefault()
@@ -69,21 +66,39 @@
 		}
 	}
 
-	export let id: string
-	let componentCallbacks: ComponentCallbacks | undefined = undefined
+	interface Props {
+		locked?: boolean
+		fullHeight?: boolean
+		id: string
+		children?: import('svelte').Snippet
+	}
 
-	const { selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
-	const { movingcomponents, stylePanel } = getContext<AppEditorContext>('AppEditorContext')
+	let { locked = false, fullHeight = false, id, children }: Props = $props()
 
+	const { selectedComponent, focusedGrid, componentControl, app } = getContext<AppViewerContext>(
+		'AppViewerContext'
+	) as AppViewerContext
+	const { movingcomponents, stylePanel, jobsDrawerOpen, history } = getContext<AppEditorContext>(
+		'AppEditorContext'
+	) as AppEditorContext
+	const ctx = {
+		history,
+		app,
+		selectedComponent,
+		focusedGrid,
+		componentControl,
+		movingcomponents,
+		jobsDrawerOpen
+	}
 	const dispatch = createEventDispatcher()
 
-	let deleteComponent: DeleteComponent | undefined = undefined
+	let deleteComponent: DeleteComponent | undefined = $state(undefined)
 
 	const menuItems = [
 		{
 			label: () => 'Cut',
 			onClick: () => {
-				componentCallbacks?.handleCut(new KeyboardEvent('keydown'))
+				handleCut(new KeyboardEvent('keydown'), ctx)
 			},
 			icon: Scissors,
 			shortcut: `${getModifierKey()}X`,
@@ -92,7 +107,7 @@
 		{
 			label: () => 'Copy',
 			onClick: () => {
-				componentCallbacks?.handleCopy(new KeyboardEvent('keydown'))
+				handleCopy(new KeyboardEvent('keydown'), ctx)
 			},
 			icon: Copy,
 			shortcut: `${getModifierKey()}C`
@@ -155,26 +170,25 @@
 	]
 </script>
 
-<ComponentCallbacks bind:this={componentCallbacks} />
 <DeleteComponent bind:this={deleteComponent} />
 
-<svelte:window on:click={handleClickOutside} />
+<svelte:window onclick={handleClickOutside} />
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:click={closeContextMenu} on:contextmenu={handleRightClick} class="h-full w-full">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<slot />
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onclick={closeContextMenu} oncontextmenu={handleRightClick} class="h-full w-full">
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	{@render children?.()}
 
 	{#if contextMenuVisible}
 		<Portal name="grid-editor">
 			<div style="position: fixed; top: {menuY}px; left: {menuX}px; z-index:6000;">
 				<div class="rounded-md bg-surface border shadow-md divide-y w-64">
 					<div class="p-1" use:clickOutside={false}>
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
 						{#each menuItems as item}
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
 
 							<Popover
 								notClickable
@@ -183,8 +197,8 @@
 								disablePopup={!item.tooltip}
 								appearTimeout={800}
 							>
-								<svelte:fragment slot="text"
-									>{item.tooltip?.text}
+								{#snippet text()}
+									{item.tooltip?.text}
 									{#if item.tooltip?.link}
 										<a href={item.tooltip.link} target="_blank" class="text-blue-300 text-xs">
 											<div class="flex flex-row gap-2 mt-4">
@@ -192,8 +206,8 @@
 												<ExternalLink size="16" />
 											</div>
 										</a>
-									{/if}</svelte:fragment
-								>
+									{/if}
+								{/snippet}
 
 								<button
 									class={twMerge(
@@ -203,14 +217,13 @@
 										item.color === 'blue' && 'text-blue-500',
 										item.disabled && 'opacity-50 cursor-not-allowed'
 									)}
-									on:click={() => {
+									onclick={() => {
 										item.onClick()
 										closeContextMenu()
 									}}
 									disabled={item.disabled}
 								>
-									<!-- svelte-ignore missing-declaration -->
-									<svelte:component this={item.icon} class="w-4 h-4" />
+									<item.icon class="w-4 h-4" />
 
 									<span class="ml-2 text-xs">{item.label()}</span>
 									{#if item.shortcut}
diff --git a/frontend/src/lib/components/apps/editor/GridViewer.svelte b/frontend/src/lib/components/apps/editor/GridViewer.svelte
index e27f9e3eb9..24c34572eb 100644
--- a/frontend/src/lib/components/apps/editor/GridViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/GridViewer.svelte
@@ -48,6 +48,7 @@
 	$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols)
 
 	const onResize = throttle(() => {
+		if (!getComputedCols) return
 		items = specifyUndefinedColumns(items, getComputedCols, cols)
 		dispatch('resize', {
 			cols: getComputedCols,
@@ -75,6 +76,7 @@
 				xPerPx = width / getComputedCols!
 
 				if (!containerWidth) {
+					if (!getComputedCols) return
 					items = specifyUndefinedColumns(items, getComputedCols, cols)
 
 					dispatch('mount', {
diff --git a/frontend/src/lib/components/apps/editor/PreviewToggle.svelte b/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
index c7aff1cdc1..cdc22abc92 100644
--- a/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
+++ b/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
@@ -6,7 +6,11 @@
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 
-	export let loading: boolean = false
+	interface Props {
+		loading?: boolean
+	}
+
+	let { loading = false }: Props = $props()
 
 	const { mode, jobs, jobsById } = getContext<AppViewerContext>('AppViewerContext')
 </script>
@@ -18,26 +22,27 @@
 		jobsById.set({})
 		jobs.set([])
 	}}
-	let:item
 >
-	<ToggleButton
-		label="Editor"
-		value="dnd"
-		icon={Pen}
-		disabled={loading}
-		iconProps={{ size: 16 }}
-		class="gap-2"
-		{item}
-	/>
-	<ToggleButton
-		label="Preview"
-		value="preview"
-		icon={Eye}
-		tooltip="Preview mode"
-		disabled={loading}
-		id="app-editor-preview-toggle"
-		iconProps={{ size: 16 }}
-		class="gap-2"
-		{item}
-	/>
+	{#snippet children({ item })}
+		<ToggleButton
+			label="Editor"
+			value="dnd"
+			icon={Pen}
+			disabled={loading}
+			iconProps={{ size: 16 }}
+			class="gap-2"
+			{item}
+		/>
+		<ToggleButton
+			label="Preview"
+			value="preview"
+			icon={Eye}
+			tooltip="Preview mode"
+			disabled={loading}
+			id="app-editor-preview-toggle"
+			iconProps={{ size: 16 }}
+			class="gap-2"
+			{item}
+		/>
+	{/snippet}
 </ToggleButtonGroup>
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index a707900b6f..d2d1ab7fcc 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { stopPropagation } from 'svelte/legacy'
+
 	import { push } from '$lib/history'
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher, getContext, onDestroy } from 'svelte'
@@ -21,18 +23,31 @@
 	import GridViewer from './GridViewer.svelte'
 	import GridEditorMenu from './GridEditorMenu.svelte'
 
-	export let containerHeight: number | undefined = undefined
-	export let containerWidth: number | undefined = undefined
-	let classes = ''
+	interface Props {
+		containerHeight?: number | undefined
+		containerWidth?: number | undefined
+		class?: string
+		style?: string
+		noPadding?: boolean
+		noYPadding?: boolean
+		subGridId: string
+		visible?: boolean
+		id: string
+		shouldHighlight?: boolean
+	}
 
-	export { classes as class }
-	export let style = ''
-	export let noPadding = false
-	export let noYPadding = false
-	export let subGridId: string
-	export let visible: boolean = true
-	export let id: string
-	export let shouldHighlight: boolean = true
+	let {
+		containerHeight = undefined,
+		containerWidth = undefined,
+		class: classes = '',
+		style = '',
+		noPadding = false,
+		noYPadding = false,
+		subGridId,
+		visible = true,
+		id,
+		shouldHighlight = true
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -50,17 +65,19 @@
 
 	const editorContext = getContext<AppEditorContext>('AppEditorContext')
 
-	let isActive = false
+	let isActive = $state(false)
 	let sber = editorContext?.componentActive?.subscribe((x) => (isActive = x))
 
-	let everVisible = visible
+	let everVisible = $state(visible)
 
-	$: visible && !everVisible && (everVisible = true)
+	$effect.pre(() => {
+		visible && !everVisible && (everVisible = true)
+	})
 
 	onDestroy(() => {
 		sber?.()
 	})
-	$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight
+	let highlight = $derived(id === $focusedGrid?.parentComponentId && shouldHighlight)
 
 	const onpointerdown = (e) => {
 		dispatch('focus')
@@ -80,9 +97,11 @@
 		$app = $app
 	}
 
-	let container: HTMLElement | undefined = undefined
+	let container: HTMLElement | undefined = $state(undefined)
 
-	$: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint)
+	let maxRow = $derived(
+		maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint)
+	)
 
 	export function moveComponentBetweenSubgrids(
 		componentId: string,
@@ -124,7 +143,7 @@
 		)
 
 		// Update the app state
-		$app = { ...$app }
+		$app = $app
 
 		if (parentGrid) {
 			$focusedGrid = {
@@ -173,17 +192,19 @@
 		)
 
 		// Update the app state
-		$app = { ...$app }
+		$app = $app
 	}
 </script>
 
+<!-- {visible}
+{everVisible} -->
 {#if everVisible || $app.eagerRendering}
 	<div
 		class="translate-x-0 translate-y-0 w-full subgrid {visible
 			? 'visible'
 			: 'invisible h-0 overflow-hidden'}"
 		bind:this={container}
-		on:pointerdown={onpointerdown}
+		{onpointerdown}
 	>
 		<div
 			class={twMerge(
@@ -201,9 +222,10 @@
 								isActive && !$selectedComponent?.includes(id)
 									? 'outline-orange-600'
 									: 'outline-gray-400 dark:outline-gray-600'
-						  }`
+							}`
 						: ''}
 				>
+					<!-- A{JSON.stringify($app.subgrids?.[subGridId]) ?? []}B -->
 					<Grid
 						allIdsInPath={$allIdsInPath}
 						items={$app.subgrids?.[subGridId] ?? []}
@@ -214,10 +236,6 @@
 							}
 						}}
 						selectedIds={$selectedComponent}
-						let:dataItem
-						let:overlapped
-						let:moveMode
-						let:componentDraggedId
 						scroller={container}
 						parentWidth={$parentWidth - 17}
 						{containerWidth}
@@ -250,81 +268,86 @@
 						}}
 						disableMove={!!$connectingInput.opened}
 					>
-						<ComponentWrapper
-							id={dataItem.id}
-							type={dataItem.data.type}
-							class={classNames(
-								'h-full w-full center-center',
-								$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
-								'top-0'
-							)}
-						>
-							<GridEditorMenu id={dataItem.id}>
-								<Component
-									{overlapped}
-									fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-									render={visible}
-									component={dataItem.data}
-									selected={Boolean($selectedComponent?.includes(dataItem.id))}
-									locked={isFixed(dataItem)}
-									on:lock={() => lock(dataItem)}
-									on:expand={() => {
-										const parentGridItem = findGridItem($app, id)
+						{#snippet children({ dataItem, overlapped, moveMode, componentDraggedId })}
+							<ComponentWrapper
+								id={dataItem.id}
+								type={dataItem.data.type}
+								class={classNames(
+									'h-full w-full center-center',
+									$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
+									'top-0'
+								)}
+							>
+								<GridEditorMenu id={dataItem.id}>
+									<Component
+										{overlapped}
+										fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+										render={visible}
+										component={dataItem.data}
+										selected={Boolean($selectedComponent?.includes(dataItem.id))}
+										locked={isFixed(dataItem)}
+										on:lock={() => lock(dataItem)}
+										on:expand={() => {
+											const parentGridItem = findGridItem($app, id)
 
-										if (!parentGridItem) {
-											return
-										}
+											if (!parentGridItem) {
+												return
+											}
 
-										$selectedComponent = [dataItem.id]
-										push(editorContext?.history, $app)
+											$selectedComponent = [dataItem.id]
+											push(editorContext?.history, $app)
 
-										expandGriditem(
-											$app.subgrids?.[subGridId] ?? [],
-											dataItem.id,
-											$breakpoint,
-											parentGridItem
-										)
-										$app = $app
-									}}
-									on:fillHeight={() => {
-										const gridItem = findGridItem($app, dataItem.id)
-										const b = $breakpoint === 'sm' ? 3 : 12
+											expandGriditem(
+												$app.subgrids?.[subGridId] ?? [],
+												dataItem.id,
+												$breakpoint,
+												parentGridItem
+											)
+											$app = $app
+										}}
+										on:fillHeight={() => {
+											const gridItem = findGridItem($app, dataItem.id)
+											const b = $breakpoint === 'sm' ? 3 : 12
 
-										if (gridItem?.[b]) {
-											gridItem[b].fullHeight = !gridItem[b].fullHeight
-										}
-										$app = $app
-									}}
-									{moveMode}
-									{componentDraggedId}
-								/>
-							</GridEditorMenu>
-						</ComponentWrapper>
+											if (gridItem?.[b]) {
+												gridItem[b].fullHeight = !gridItem[b].fullHeight
+											}
+											$app = $app
+										}}
+										{moveMode}
+										{componentDraggedId}
+									/>
+								</GridEditorMenu>
+							</ComponentWrapper>
+						{/snippet}
 					</Grid>
 				</div>
 			{:else}
 				<GridViewer
 					allIdsInPath={$allIdsInPath}
 					items={$app.subgrids?.[subGridId] ?? []}
-					let:dataItem
 					breakpoint={$breakpoint}
 					parentWidth={$parentWidth - 17}
 					{containerWidth}
 					{maxRow}
 				>
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
-						class={classNames('h-full w-full center-center', 'top-0')}
-					>
-						<Component
-							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-							render={visible}
-							component={dataItem.data}
-							selected={Boolean($selectedComponent?.includes(dataItem.id))}
-							locked={isFixed(dataItem)}
-						/>
-					</div>
+					{#snippet children({ dataItem })}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							onpointerdown={stopPropagation((e) =>
+								selectComponent(e as PointerEvent, dataItem.id)
+							)}
+							class={classNames('h-full w-full center-center', 'top-0')}
+						>
+							<Component
+								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+								render={visible}
+								component={dataItem.data}
+								selected={Boolean($selectedComponent?.includes(dataItem.id))}
+								locked={isFixed(dataItem)}
+							/>
+						</div>
+					{/snippet}
 				</GridViewer>
 			{/if}
 		</div>
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 77ddb84f27..fe0fc8e47b 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -476,7 +476,7 @@ export function appComponentFromType<T extends keyof typeof components>(
 			),
 			recomputeIds: init.recomputeIds ? [] : undefined,
 			actionButtons: init.actionButtons ? [] : undefined,
-			actions: [],
+			actions: undefined,
 			menuItems: init.menuItems ? [] : undefined,
 			numberOfSubgrids: init.numberOfSubgrids,
 			horizontalAlignment: override?.horizontalAlignment ?? init.horizontalAlignment,
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentCallbacks.svelte b/frontend/src/lib/components/apps/editor/component/ComponentCallbacks.svelte
deleted file mode 100644
index c202b06de4..0000000000
--- a/frontend/src/lib/components/apps/editor/component/ComponentCallbacks.svelte
+++ /dev/null
@@ -1,269 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import {
-		copyComponent,
-		findGridItem,
-		findGridItemParentGrid,
-		getAllSubgridsAndComponentIds,
-		insertNewGridItem
-	} from '../appUtils'
-	import type { AppEditorContext, AppViewerContext, GridItem } from '../../types'
-	import { push } from '$lib/history'
-	import { sendUserToast } from '$lib/toast'
-	import { gridColumns } from '../../gridUtils'
-	import { copyToClipboard } from '$lib/utils'
-
-	const { app, selectedComponent, focusedGrid, componentControl } =
-		getContext<AppViewerContext>('AppViewerContext')
-
-	const { history, movingcomponents, jobsDrawerOpen } =
-		getContext<AppEditorContext>('AppEditorContext')
-
-	let tempGridItems: GridItem[] | undefined = undefined
-
-	const ITEM_TYPE = 'wm-grid-items'
-	function getSortedGridItemsOfChildren(): GridItem[] {
-		if (!$focusedGrid) {
-			return $app.grid
-		}
-
-		if (!$app.subgrids) {
-			return []
-		}
-
-		return $app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`] ?? []
-	}
-
-	function getGridItems(): GridItem[] {
-		if ($app.grid.find((item) => item.id === $selectedComponent?.[0])) {
-			return $app.grid
-		}
-
-		if (!$app.subgrids) {
-			return []
-		}
-
-		return (
-			Object.values($app.subgrids ?? {}).find((grid) =>
-				grid.find((item) => item.id === $selectedComponent?.[0])
-			) ?? []
-		)
-	}
-
-	export function left(event: KeyboardEvent) {
-		if (!$componentControl[$selectedComponent?.[0] ?? '']?.left?.()) {
-			const sortedGridItems = getGridItems()
-			const currentIndex = sortedGridItems.findIndex(
-				(item) => item.id === ($selectedComponent?.[0] ?? '')
-			)
-
-			if (currentIndex !== -1 && currentIndex > 0) {
-				const left = sortedGridItems[currentIndex - 1]
-
-				if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
-					$selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id]
-				} else if (
-					(left.data.type === 'aggridcomponent' ||
-						left.data.type === 'aggridcomponentee' ||
-						left.data.type === 'dbexplorercomponent') &&
-					Array.isArray(left.data.actions) &&
-					left.data.actions.length >= 1
-				) {
-					$selectedComponent = [left.data.actions[left.data.actions.length - 1].id]
-				} else {
-					$selectedComponent = [left.id]
-				}
-			}
-		}
-
-		event.preventDefault()
-	}
-
-	export function right(event: KeyboardEvent) {
-		let r = $componentControl[$selectedComponent?.[0] ?? '']?.right?.()
-
-		if (typeof r === 'string') {
-			$selectedComponent = [r]
-			r = $componentControl[r]?.right?.(true)
-		}
-
-		if (!r) {
-			const sortedGridItems = getGridItems()
-			const currentIndex = sortedGridItems.findIndex(
-				(item) => item.id === ($selectedComponent?.[0] ?? '')
-			)
-
-			if (currentIndex !== -1 && currentIndex < sortedGridItems.length - 1) {
-				$selectedComponent = [sortedGridItems[currentIndex + 1].id]
-			}
-		}
-
-		event.preventDefault()
-	}
-
-	export function down(event: KeyboardEvent) {
-		if (!$focusedGrid) {
-			$selectedComponent = [getSortedGridItemsOfChildren()[0]?.id]
-			event.preventDefault()
-		} else if ($app.subgrids) {
-			const index = $focusedGrid?.subGridIndex ?? 0
-			const subgrid = $app.subgrids[`${$selectedComponent}-${index}`]
-
-			if (!subgrid || subgrid.length === 0) {
-				return
-			}
-
-			if (subgrid) {
-				$selectedComponent = [subgrid[0].id]
-			}
-			event.preventDefault()
-		}
-	}
-
-	export function handleEscape(event: KeyboardEvent) {
-		$selectedComponent = undefined
-		$focusedGrid = undefined
-		event.preventDefault()
-	}
-
-	export function handleArrowUp(event: KeyboardEvent) {
-		if (!$selectedComponent) return
-		let parentId = findGridItemParentGrid($app, $selectedComponent?.[0])?.split('-')[0]
-
-		if (parentId) {
-			$selectedComponent = [parentId]
-		} else {
-			$selectedComponent = undefined
-			$focusedGrid = undefined
-		}
-	}
-
-	export async function handleCopy(event: KeyboardEvent) {
-		if (!$selectedComponent || $jobsDrawerOpen || window.getSelection()?.toString() != '') {
-			return
-		}
-		tempGridItems = undefined
-		const copiedGridItems = $selectedComponent
-			.map((x) => findGridItem($app, x))
-			.filter((x) => x != undefined) as GridItem[]
-
-		copyGridItemsToClipboard(copiedGridItems, 'copy')
-	}
-
-	async function copyGridItemsToClipboard(
-		items: GridItem[],
-		type: 'copy' | 'cut' | undefined = undefined
-	) {
-		let allSubgrids = {}
-		for (let item of items) {
-			let subgrids = getAllSubgridsAndComponentIds($app, item.data)[0]
-			for (let key of subgrids) {
-				allSubgrids[key] = $app.subgrids?.[key]
-			}
-		}
-		let success = await copyToClipboard(
-			JSON.stringify({ type: ITEM_TYPE, items, subgrids: allSubgrids }),
-			false
-		)
-
-		if (!success) {
-			sendUserToast('Could not copy to clipboard. Are you in an unsecure context?', true)
-		} else if (type) {
-			const text = type == 'copy' ? 'Copied' : 'Cut'
-			sendUserToast(`${text} ${items.length} component${items.length > 1 ? 's' : ''}`)
-		}
-	}
-
-	export function handleCut(event: KeyboardEvent) {
-		if (!$selectedComponent) {
-			return
-		}
-		$movingcomponents = JSON.parse(JSON.stringify($selectedComponent))
-		push(history, $app)
-
-		let gridItems = $selectedComponent
-			.map((x) => findGridItem($app, x))
-			.filter((x) => x != undefined) as GridItem[]
-		copyGridItemsToClipboard(gridItems, 'cut')
-
-		if (!gridItems) {
-			return
-		}
-
-		// Store the grid item in a temp variable so we can paste it later
-		tempGridItems = gridItems
-	}
-
-	export async function handlePaste(event: ClipboardEvent) {
-		let classes = event.target?.['className']
-		if (
-			(typeof classes === 'string' && classes.includes('inputarea')) ||
-			['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName!)
-		) {
-			return
-		}
-		event.preventDefault()
-
-		push(history, $app)
-		$movingcomponents = undefined
-		let copiedGridItems: GridItem[] | undefined = undefined
-		let subgrids = $app.subgrids ?? {}
-		const txt = event?.clipboardData?.getData('text')
-		if (txt) {
-			try {
-				const parsed = JSON.parse(txt)
-				if (parsed.type == ITEM_TYPE) {
-					copiedGridItems = parsed.items
-					subgrids = parsed.subgrids ?? subgrids
-				} else {
-					copiedGridItems = undefined
-				}
-			} catch {}
-		}
-
-		if (tempGridItems != undefined) {
-			for (let tempGridItem of tempGridItems) {
-				if (
-					$focusedGrid &&
-					getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(
-						`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`
-					)
-				) {
-					sendUserToast('Cannot paste a component into itself', true)
-					return
-				}
-				let parentGrid = findGridItemParentGrid($app, tempGridItem.id)
-				if (parentGrid) {
-					$app.subgrids &&
-						($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter(
-							(item) => item.id !== tempGridItem?.id
-						))
-				} else {
-					$app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id)
-				}
-
-				const gridItem = tempGridItem
-				insertNewGridItem(
-					$app,
-					(id) => ({ ...gridItem.data, id }),
-					$focusedGrid,
-					Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])),
-					tempGridItem.id
-				)
-			}
-			copyGridItemsToClipboard(tempGridItems)
-			$selectedComponent = tempGridItems.map((x) => x.id)
-
-			tempGridItems = undefined
-		} else if (copiedGridItems) {
-			let nitems: string[] = []
-			for (let copiedGridItem of copiedGridItems) {
-				let newItem = copyComponent($app, copiedGridItem, $focusedGrid, subgrids, [])
-				newItem && nitems.push(newItem)
-			}
-			$selectedComponent = nitems.map((x) => x)
-		}
-
-		$app = $app
-	}
-</script>
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
index 6f36d786cb..2397447792 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
@@ -75,12 +75,23 @@
 	import type { AppComponent } from './components'
 	import { Button } from '$lib/components/common'
 
-	export let component: AppComponent
-	export let render: boolean
-	export let componentContainerHeight: number
-	export let errorHandledByComponent: boolean
-	export let inlineEditorOpened: boolean
-	export let initializing: boolean | undefined = undefined
+	interface Props {
+		component: AppComponent
+		render: boolean
+		componentContainerHeight: number
+		errorHandledByComponent: boolean
+		inlineEditorOpened: boolean
+		initializing?: boolean | undefined
+	}
+
+	let {
+		component,
+		render,
+		componentContainerHeight,
+		errorHandledByComponent = $bindable(),
+		inlineEditorOpened = $bindable(),
+		initializing = $bindable(undefined)
+	}: Props = $props()
 </script>
 
 <svelte:boundary>
@@ -797,7 +808,9 @@
 				>{error}</pre
 			>
 			<div class="flex mt-4">
-			<Button wrapperClasses="border rounded !border-gray-400" color="dark" on:click={reset}>reset</Button>
+				<Button wrapperClasses="border rounded !border-gray-400" color="dark" on:click={reset}
+					>reset</Button
+				>
 			</div>
 		</div>
 	{/snippet}
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
index fa0a8556d9..97d98bcaed 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
@@ -1,9 +1,34 @@
 <script lang="ts">
-	import ComponentCallbacks from './ComponentCallbacks.svelte'
-
-	let componentCallbacks: ComponentCallbacks | undefined = undefined
+	import { getContext } from 'svelte'
+	import {
+		handleEscape,
+		handlePaste,
+		handleArrowUp,
+		handleCut,
+		handleCopy,
+		down,
+		right,
+		left
+	} from './componentCallbacks.svelte'
+	import type { AppEditorContext, AppViewerContext } from '../../types'
 
+	const { history, movingcomponents, jobsDrawerOpen } = getContext<AppEditorContext>(
+		'AppEditorContext'
+	) as AppEditorContext
+	const { app, selectedComponent, focusedGrid, componentControl } = getContext<AppViewerContext>(
+		'AppViewerContext'
+	) as AppViewerContext
+	const ctx = {
+		history,
+		app,
+		selectedComponent,
+		focusedGrid,
+		componentControl,
+		movingcomponents,
+		jobsDrawerOpen
+	}
 	function keydown(event: KeyboardEvent) {
+		// console.log('keydown', $focusedGrid, $selectedComponent)
 		// Ignore keydown events if the user is typing in monaco
 		let classes = event.target?.['className']
 		if (
@@ -14,38 +39,38 @@
 		}
 		switch (event.key) {
 			case 'Escape':
-				componentCallbacks?.handleEscape(event)
+				handleEscape(event, ctx)
 				break
 
 			case 'ArrowUp': {
-				componentCallbacks?.handleArrowUp(event)
+				handleArrowUp(event, ctx)
 				break
 			}
 
 			case 'ArrowDown': {
-				componentCallbacks?.down(event)
+				down(event, ctx)
 				break
 			}
 
 			case 'ArrowRight': {
-				componentCallbacks?.right(event)
+				right(event, ctx)
 				break
 			}
 
 			case 'ArrowLeft': {
-				componentCallbacks?.left(event)
+				left(event, ctx)
 				break
 			}
 
 			case 'c':
 				if (event.ctrlKey || event.metaKey) {
-					componentCallbacks?.handleCopy(event)
+					handleCopy(event, ctx)
 				}
 				break
 
 			case 'x':
 				if (event.ctrlKey || event.metaKey) {
-					componentCallbacks?.handleCut(event)
+					handleCut(event, ctx)
 				}
 				break
 
@@ -55,6 +80,4 @@
 	}
 </script>
 
-<ComponentCallbacks bind:this={componentCallbacks} />
-
-<svelte:window on:keydown={keydown} on:paste={componentCallbacks?.handlePaste} />
+<svelte:window onkeydown={keydown} onpaste={(e) => handlePaste(e, ctx)} />
diff --git a/frontend/src/lib/components/apps/editor/component/componentCallbacks.svelte.ts b/frontend/src/lib/components/apps/editor/component/componentCallbacks.svelte.ts
new file mode 100644
index 0000000000..046d6bdd08
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/component/componentCallbacks.svelte.ts
@@ -0,0 +1,357 @@
+// import { getContext } from 'svelte'
+import {
+	copyComponent,
+	findGridItem,
+	findGridItemParentGrid,
+	getAllSubgridsAndComponentIds,
+	insertNewGridItem
+} from '../appUtils'
+import type { AppEditorContext, AppViewerContext, GridItem } from '../../types'
+import { push } from '$lib/history'
+import { sendUserToast } from '$lib/toast'
+import { gridColumns } from '../../gridUtils'
+import { copyToClipboard } from '$lib/utils'
+import { get } from 'svelte/store'
+
+// const { app, selectedComponent, focusedGrid, componentControl } =
+// 	getContext<AppViewerContext>('AppViewerContext')
+
+// const { history, movingcomponents, jobsDrawerOpen } =
+// 	getContext<AppEditorContext>('AppEditorContext')
+
+let tempGridItems: GridItem[] | undefined = undefined
+
+const ITEM_TYPE = 'wm-grid-items'
+
+function getSortedGridItemsOfChildren(ctx: {
+	app: AppViewerContext['app']
+	focusedGrid: AppViewerContext['focusedGrid']
+}): GridItem[] {
+	const focusedGrid = get(ctx.focusedGrid)
+	if (!focusedGrid) {
+		return get(ctx.app).grid
+	}
+
+	let subgrids = get(ctx.app).subgrids
+	if (!subgrids) {
+		return []
+	}
+
+	return subgrids[`${focusedGrid.parentComponentId}-${focusedGrid.subGridIndex}`] ?? []
+}
+
+function getGridItems(ctx: {
+	app: AppViewerContext['app']
+	selectedComponent: AppViewerContext['selectedComponent']
+}): GridItem[] {
+	const app = get(ctx.app)
+	const selectedComponent = get(ctx.selectedComponent)
+	if (app.grid.find((item) => item.id === selectedComponent?.[0])) {
+		return get(ctx.app).grid
+	}
+
+	if (!app.subgrids) {
+		return []
+	}
+
+	return (
+		Object.values(app.subgrids ?? {}).find((grid) =>
+			grid.find((item) => item.id === selectedComponent?.[0])
+		) ?? []
+	)
+}
+
+export function left(
+	event: KeyboardEvent,
+	ctx: {
+		app: AppViewerContext['app']
+		componentControl: AppViewerContext['componentControl']
+		selectedComponent: AppViewerContext['selectedComponent']
+	}
+) {
+	const componentControl = get(ctx.componentControl)
+	const selectedComponent = get(ctx.selectedComponent)
+	if (!componentControl[selectedComponent?.[0] ?? '']?.left?.()) {
+		const sortedGridItems = getGridItems(ctx)
+		const currentIndex = sortedGridItems.findIndex(
+			(item) => item.id === (selectedComponent?.[0] ?? '')
+		)
+
+		if (currentIndex !== -1 && currentIndex > 0) {
+			const left = sortedGridItems[currentIndex - 1]
+
+			if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
+				ctx.selectedComponent.set([left.data.actionButtons[left.data.actionButtons.length - 1].id])
+			} else if (
+				(left.data.type === 'aggridcomponent' ||
+					left.data.type === 'aggridcomponentee' ||
+					left.data.type === 'dbexplorercomponent') &&
+				Array.isArray(left.data.actions) &&
+				left.data.actions.length >= 1
+			) {
+				ctx.selectedComponent.set([left.data.actions[left.data.actions.length - 1].id])
+			} else {
+				ctx.selectedComponent.set([left.id])
+			}
+		}
+	}
+
+	event.preventDefault()
+}
+
+export function right(
+	event: KeyboardEvent,
+	ctx: {
+		app: AppViewerContext['app']
+		componentControl: AppViewerContext['componentControl']
+		selectedComponent: AppViewerContext['selectedComponent']
+	}
+) {
+	const componentControl = get(ctx.componentControl)
+	const selectedComponent = get(ctx.selectedComponent)
+	let r = componentControl[selectedComponent?.[0] ?? '']?.right?.()
+
+	if (typeof r === 'string') {
+		ctx.selectedComponent.set([r])
+		r = componentControl[r]?.right?.(true)
+	}
+
+	if (!r) {
+		const sortedGridItems = getGridItems(ctx)
+		const currentIndex = sortedGridItems.findIndex(
+			(item) => item.id === (selectedComponent?.[0] ?? '')
+		)
+
+		if (currentIndex !== -1 && currentIndex < sortedGridItems.length - 1) {
+			ctx.selectedComponent.set([sortedGridItems[currentIndex + 1].id])
+		}
+	}
+
+	event.preventDefault()
+}
+
+export function down(
+	event: KeyboardEvent,
+	ctx: {
+		app: AppViewerContext['app']
+		componentControl: AppViewerContext['componentControl']
+		selectedComponent: AppViewerContext['selectedComponent']
+		focusedGrid: AppViewerContext['focusedGrid']
+	}
+) {
+	const focusedGrid = get(ctx.focusedGrid)
+	const selectedComponent = get(ctx.selectedComponent)
+	const app = get(ctx.app)
+	if (!focusedGrid) {
+		ctx.selectedComponent.set([getSortedGridItemsOfChildren(ctx)[0]?.id])
+		event.preventDefault()
+	} else if (app.subgrids) {
+		const index = focusedGrid?.subGridIndex ?? 0
+		const subgrid = app.subgrids[`${selectedComponent}-${index}`]
+
+		if (!subgrid || subgrid.length === 0) {
+			return
+		}
+
+		if (subgrid) {
+			ctx.selectedComponent.set([subgrid[0].id])
+		}
+		event.preventDefault()
+	}
+}
+
+export function handleEscape(
+	event: KeyboardEvent,
+	ctx: {
+		selectedComponent: AppViewerContext['selectedComponent']
+		focusedGrid: AppViewerContext['focusedGrid']
+	}
+) {
+	ctx.selectedComponent.set(undefined)
+	ctx.focusedGrid.set(undefined)
+	event.preventDefault()
+}
+
+export function handleArrowUp(
+	event: KeyboardEvent,
+	ctx: {
+		app: AppViewerContext['app']
+		selectedComponent: AppViewerContext['selectedComponent']
+		focusedGrid: AppViewerContext['focusedGrid']
+	}
+) {
+	const selectedComponent = get(ctx.selectedComponent)
+	if (!selectedComponent) return
+	let parentId = findGridItemParentGrid(get(ctx.app), selectedComponent?.[0])?.split('-')[0]
+
+	if (parentId) {
+		ctx.selectedComponent.set([parentId])
+	} else {
+		ctx.selectedComponent.set(undefined)
+		ctx.focusedGrid.set(undefined)
+	}
+}
+
+export async function handleCopy(
+	event: KeyboardEvent,
+	ctx: {
+		app: AppViewerContext['app']
+		selectedComponent: AppViewerContext['selectedComponent']
+		jobsDrawerOpen: AppEditorContext['jobsDrawerOpen']
+	}
+) {
+	const selectedComponent = get(ctx.selectedComponent)
+	if (!selectedComponent || get(ctx.jobsDrawerOpen) || window.getSelection()?.toString() != '') {
+		return
+	}
+	tempGridItems = undefined
+	const copiedGridItems = selectedComponent
+		.map((x) => findGridItem(get(ctx.app), x))
+		.filter((x) => x != undefined) as GridItem[]
+
+	copyGridItemsToClipboard(copiedGridItems, ctx, 'copy')
+}
+
+async function copyGridItemsToClipboard(
+	items: GridItem[],
+	ctx: {
+		app: AppViewerContext['app']
+	},
+	type: 'copy' | 'cut' | undefined = undefined
+) {
+	const app = get(ctx.app)
+	let allSubgrids = {}
+	for (let item of items) {
+		let subgrids = getAllSubgridsAndComponentIds(app, item.data)[0]
+		for (let key of subgrids) {
+			allSubgrids[key] = app.subgrids?.[key]
+		}
+	}
+	let success = await copyToClipboard(
+		JSON.stringify({ type: ITEM_TYPE, items, subgrids: allSubgrids }),
+		false
+	)
+
+	if (!success) {
+		sendUserToast('Could not copy to clipboard. Are you in an unsecure context?', true)
+	} else if (type) {
+		const text = type == 'copy' ? 'Copied' : 'Cut'
+		sendUserToast(`${text} ${items.length} component${items.length > 1 ? 's' : ''}`)
+	}
+}
+
+export function handleCut(
+	event: KeyboardEvent,
+	ctx: {
+		selectedComponent: AppViewerContext['selectedComponent']
+		history: AppEditorContext['history']
+		app: AppViewerContext['app']
+		movingcomponents: AppEditorContext['movingcomponents']
+	}
+) {
+	const selectedComponent = get(ctx.selectedComponent)
+	const app = get(ctx.app)
+	if (!selectedComponent) {
+		return
+	}
+	ctx.movingcomponents.set(JSON.parse(JSON.stringify(selectedComponent)))
+	push(ctx.history, app)
+
+	let gridItems = selectedComponent
+		.map((x) => findGridItem(app, x))
+		.filter((x) => x != undefined) as GridItem[]
+	copyGridItemsToClipboard(gridItems, ctx, 'cut')
+
+	if (!gridItems) {
+		return
+	}
+
+	// Store the grid item in a temp variable so we can paste it later
+	tempGridItems = gridItems
+}
+
+export async function handlePaste(
+	event: ClipboardEvent,
+	ctx: {
+		app: AppViewerContext['app']
+		selectedComponent: AppViewerContext['selectedComponent']
+		focusedGrid: AppViewerContext['focusedGrid']
+		componentControl: AppViewerContext['componentControl']
+		history: AppEditorContext['history']
+		jobsDrawerOpen: AppEditorContext['jobsDrawerOpen']
+		movingcomponents: AppEditorContext['movingcomponents']
+	}
+) {
+	let classes = event.target?.['className']
+	if (
+		(typeof classes === 'string' && classes.includes('inputarea')) ||
+		['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName!)
+	) {
+		return
+	}
+	event.preventDefault()
+	const app = get(ctx.app)
+	const focusedGrid = get(ctx.focusedGrid)
+
+	push(ctx.history, app)
+	ctx.movingcomponents.set(undefined)
+	let copiedGridItems: GridItem[] | undefined = undefined
+	let subgrids = app.subgrids ?? {}
+	const txt = event?.clipboardData?.getData('text')
+	if (txt) {
+		try {
+			const parsed = JSON.parse(txt)
+			if (parsed.type == ITEM_TYPE) {
+				copiedGridItems = parsed.items
+				subgrids = parsed.subgrids ?? subgrids
+			} else {
+				copiedGridItems = undefined
+			}
+		} catch {}
+	}
+
+	if (tempGridItems != undefined) {
+		for (let tempGridItem of tempGridItems) {
+			if (
+				focusedGrid &&
+				getAllSubgridsAndComponentIds(app, tempGridItem.data)[0].includes(
+					`${focusedGrid.parentComponentId}-${focusedGrid.subGridIndex}`
+				)
+			) {
+				sendUserToast('Cannot paste a component into itself', true)
+				return
+			}
+			let parentGrid = findGridItemParentGrid(app, tempGridItem.id)
+			if (parentGrid) {
+				app.subgrids &&
+					(app.subgrids[parentGrid] = app.subgrids[parentGrid].filter(
+						(item) => item.id !== tempGridItem?.id
+					))
+			} else {
+				app.grid = app.grid.filter((item) => item.id !== tempGridItem?.id)
+			}
+
+			const gridItem = tempGridItem
+			insertNewGridItem(
+				app,
+				(id) => ({ ...gridItem.data, id }),
+				focusedGrid,
+				Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])),
+				tempGridItem.id
+			)
+		}
+		copyGridItemsToClipboard(tempGridItems, ctx)
+		ctx.selectedComponent.set(tempGridItems.map((x) => x.id))
+
+		tempGridItems = undefined
+	} else if (copiedGridItems) {
+		let nitems: string[] = []
+		for (let copiedGridItem of copiedGridItems) {
+			let newItem = copyComponent(app, copiedGridItem, focusedGrid, subgrids, [])
+			newItem && nitems.push(newItem)
+		}
+		ctx.selectedComponent.set(nitems.map((x) => x))
+	}
+
+	ctx.app.update((x) => x)
+}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 4f3b353789..e597d9f057 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -233,12 +233,13 @@
 										<button
 											id={item}
 											on:pointerdown={async (e) => {
+												e.preventDefault()
 												const id = addComponent(item)
 												dndTimeout && clearTimeout(dndTimeout)
 												dndTimeout = setTimeout(async () => {
 													await tick()
 													$dndItem[id]?.(e.clientX, e.clientY, $yTop)
-												}, 75)
+												}, 100)
 												window.addEventListener('pointerup', (e) => {
 													dndTimeout && clearTimeout(dndTimeout)
 													dndTimeout = undefined
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
index 05e6380238..e4add0f6ef 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
@@ -136,84 +136,86 @@
 										</div>
 									</Tab>
 								{/if}
-								<div slot="content" class="h-full">
-									<TabContent value="selectors" class="h-full mt-2 ">
-										<DataTable size="sm">
-											<Head>
-												<tr>
-													<Cell head first>Selector</Cell>
-													<Cell head>Comment</Cell>
-													<Cell head last />
-												</tr>
-											</Head>
-											{#each customisation.selectors as { selector, comment }}
-												<Row>
-													<Cell first>
-														<Badge color="gray">{selector}</Badge>
-													</Cell>
-													<Cell>
-														{#if comment}
-															<div class="max-w-24 whitespace-pre-wrap">{comment}</div>
-														{/if}
-													</Cell>
-													<Cell>
-														<Button
-															size="xs2"
-															color="light"
-															on:click={() => {
-																dispatch('insertSelector', `${selector} {}`)
-															}}
-														>
-															<ArrowUpSquare size={16} />
-														</Button>
-													</Cell>
-												</Row>
-											{/each}
-										</DataTable>
-									</TabContent>
-									<TabContent value="variables" class="h-full mt-2">
-										<DataTable>
-											<Head>
-												<tr>
-													<Cell head first>Variable</Cell>
-													<Cell head>Default value</Cell>
-													<Cell head>Comment</Cell>
-													<Cell head last />
-												</tr>
-											</Head>
-											{#each customisation.variables as { variable, value, comment }}
-												<Row>
-													<Cell first>
-														<Badge color="gray">{variable}</Badge>
-													</Cell>
-													<Cell>
-														<Badge color="gray">{value}</Badge>
-													</Cell>
-													<Cell>
-														{#if comment}
-															<div class="w-80 whitespace-pre-wrap">{comment}</div>
-														{/if}
-													</Cell>
-													<Cell sticky>
-														<Button
-															size="xs2"
-															color="light"
-															on:click={() => {
-																dispatch(
-																	'insertSelector',
-																	`${customisation.root} { ${variable}: ${value};}`
-																)
-															}}
-															wrapperClasses="px-2 py-3.5 bg-surface"
-														>
-															<ArrowUpSquare size={16} />
-														</Button>
-													</Cell>
-												</Row>
-											{/each}
-										</DataTable>
-									</TabContent>
-								</div>
+								{#snippet content()}
+									<div class="h-full">
+										<TabContent value="selectors" class="h-full mt-2 ">
+											<DataTable size="sm">
+												<Head>
+													<tr>
+														<Cell head first>Selector</Cell>
+														<Cell head>Comment</Cell>
+														<Cell head last />
+													</tr>
+												</Head>
+												{#each customisation.selectors as { selector, comment }}
+													<Row>
+														<Cell first>
+															<Badge color="gray">{selector}</Badge>
+														</Cell>
+														<Cell>
+															{#if comment}
+																<div class="max-w-24 whitespace-pre-wrap">{comment}</div>
+															{/if}
+														</Cell>
+														<Cell>
+															<Button
+																size="xs2"
+																color="light"
+																on:click={() => {
+																	dispatch('insertSelector', `${selector} {}`)
+																}}
+															>
+																<ArrowUpSquare size={16} />
+															</Button>
+														</Cell>
+													</Row>
+												{/each}
+											</DataTable>
+										</TabContent>
+										<TabContent value="variables" class="h-full mt-2">
+											<DataTable>
+												<Head>
+													<tr>
+														<Cell head first>Variable</Cell>
+														<Cell head>Default value</Cell>
+														<Cell head>Comment</Cell>
+														<Cell head last />
+													</tr>
+												</Head>
+												{#each customisation.variables as { variable, value, comment }}
+													<Row>
+														<Cell first>
+															<Badge color="gray">{variable}</Badge>
+														</Cell>
+														<Cell>
+															<Badge color="gray">{value}</Badge>
+														</Cell>
+														<Cell>
+															{#if comment}
+																<div class="w-80 whitespace-pre-wrap">{comment}</div>
+															{/if}
+														</Cell>
+														<Cell sticky>
+															<Button
+																size="xs2"
+																color="light"
+																on:click={() => {
+																	dispatch(
+																		'insertSelector',
+																		`${customisation.root} { ${variable}: ${value};}`
+																	)
+																}}
+																wrapperClasses="px-2 py-3.5 bg-surface"
+															>
+																<ArrowUpSquare size={16} />
+															</Button>
+														</Cell>
+													</Row>
+												{/each}
+											</DataTable>
+										</TabContent>
+									</div>
+								{/snippet}
 							</Tabs>
 						{/each}
 					</div>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index 6ad1da6491..e8bff06d62 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -18,26 +18,47 @@
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { tailwindClasses } from './tailwindUtils'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+	import { deepEqual } from 'fast-equals'
 
-	export let name: string
-	export let value: ComponentCssProperty = {}
-	export let forceStyle: boolean = false
-	export let forceClass: boolean = false
-	export let quickStyleProperties: PropertyGroup[] | undefined = undefined
-	export let componentType: TypedComponent['type'] | undefined = undefined
-	export let tooltip: string | undefined = undefined
-	export let shouldDisplayLeft: boolean = false
-	export let shouldDisplayRight: boolean = false
-	export let overriden: boolean = false
-	export let overridding: boolean = false
-	export let wmClass: string | undefined = undefined
+	interface Props {
+		name: string
+		value?: ComponentCssProperty
+		forceStyle?: boolean
+		forceClass?: boolean
+		quickStyleProperties?: PropertyGroup[] | undefined
+		componentType?: TypedComponent['type'] | undefined
+		tooltip?: string | undefined
+		shouldDisplayLeft?: boolean
+		shouldDisplayRight?: boolean
+		overriden?: boolean
+		overridding?: boolean
+		wmClass?: string | undefined
+	}
+
+	let {
+		name,
+		value = $bindable({}),
+		forceStyle = false,
+		forceClass = false,
+		quickStyleProperties = undefined,
+		componentType = undefined,
+		tooltip = undefined,
+		shouldDisplayLeft = false,
+		shouldDisplayRight = false,
+		overriden = false,
+		overridding = false,
+		wmClass = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
-	let isQuickMenuOpen = false
+	let isQuickMenuOpen = $state(false)
 
-	$: dispatchIfMounted('change', value)
+	let prevValue = structuredClone($state.snapshot(value))
+	$effect(() => {
+		if (deepEqual(prevValue, value)) return
+		prevValue = structuredClone($state.snapshot(value))
+		dispatch('change', value)
+	})
 
 	function toggleQuickMenu() {
 		try {
@@ -52,10 +73,10 @@
 		}
 	}
 
-	let richEditorOpen = false
+	let richEditorOpen = $state(false)
 
-	let dynamicClass: boolean = value?.evalClass !== undefined
-	let render = 0
+	let dynamicClass: boolean = $state(value?.evalClass !== undefined)
+	let render = $state(0)
 </script>
 
 {#key render}
@@ -73,7 +94,9 @@
 						startIcon={{ icon: MoveLeft }}
 						on:click={() => dispatch('left')}
 					/>
-					<svelte:fragment slot="text">{'Copy for this component'}</svelte:fragment>
+					{#snippet text()}
+						{'Copy for this component'}
+					{/snippet}
 				</Popover>
 			{/if}
 			{#if shouldDisplayRight}
@@ -85,9 +108,9 @@
 						startIcon={{ icon: MoveRight }}
 						on:click={() => dispatch('right')}
 					/>
-					<svelte:fragment slot="text">
+					{#snippet text()}
 						Copy for every {componentType ? ccomponents[componentType].name : 'component'}
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{/if}
 			<Popover placement="bottom" notClickable disappearTimeout={0}>
@@ -98,9 +121,9 @@
 					startIcon={{ icon: Copy }}
 					on:click={() => copyToClipboard(wmClass)}
 				/>
-				<svelte:fragment slot="text">
+				{#snippet text()}
 					Copy {wmClass}
-				</svelte:fragment>
+				{/snippet}
 			</Popover>
 		</div>
 	</div>
@@ -113,7 +136,7 @@
 
 			{#if value.style !== undefined || forceStyle}
 				<div class="pb-2">
-					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<div class="block w-full">
 						<div class="flex flex-row justify-between items-center w-full h-8 mb-1">
 							<div class="text-xs font-medium text-tertiary"> Plain CSS </div>
@@ -134,24 +157,25 @@
 												richEditorOpen = isQuickMenuOpen
 											}
 										}}
-										let:item
 									>
-										<ToggleButton
-											small
-											light
-											value={'false'}
-											icon={Code}
-											tooltip="Edit the CSS directly"
-											{item}
-										/>
-										<ToggleButton
-											small
-											light
-											value={'true'}
-											icon={Paintbrush2}
-											tooltip="Open the rich editor to style the component with a visual interface"
-											{item}
-										/>
+										{#snippet children({ item })}
+											<ToggleButton
+												small
+												light
+												value={'false'}
+												icon={Code}
+												tooltip="Edit the CSS directly"
+												{item}
+											/>
+											<ToggleButton
+												small
+												light
+												value={'true'}
+												icon={Paintbrush2}
+												tooltip="Open the rich editor to style the component with a visual interface"
+												{item}
+											/>
+										{/snippet}
 									</ToggleButtonGroup>
 								{/if}
 							</div>
@@ -195,7 +219,7 @@
 			{/if}
 
 			{#if value.class !== undefined || forceClass}
-				<!-- svelte-ignore a11y-label-has-associated-control -->
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="block">
 					<div class="text-xs font-medium text-tertiary mb-1">
 						Tailwind classes
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
index 069c9fc1db..63cbf553ac 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
@@ -43,7 +43,7 @@
 <Tabs bind:selected={selectedTab}>
 	<Tab size="xs" value="css">Code</Tab>
 	<Tab size="xs" value="theme">Theme</Tab>
-	<svelte:fragment slot="content">
+	{#snippet content()}
 		{#if selectedTab === 'css'}
 			<SplitPanesWrapper>
 				<Splitpanes horizontal>
@@ -116,5 +116,5 @@
 				}}
 			/>
 		{/if}
-	</svelte:fragment>
+	{/snippet}
 </Tabs>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
index 40463fe140..23561814c4 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount, setContext } from 'svelte'
+	import { getContext, onMount, setContext, untrack } from 'svelte'
 	import parse from 'style-to-object'
 	import { isValidHexColor } from '../../../../utils'
 	import type { AppViewerContext } from '../../types'
@@ -16,21 +16,26 @@
 	import ListItem from './ListItem.svelte'
 	import type { TypedComponent } from '../component'
 
-	export let value = ''
-	export let properties: PropertyGroup[]
-	export let componentType: TypedComponent['type'] | undefined = undefined
-	export let componentProperty: string | undefined = undefined
+	interface Props {
+		value?: string
+		properties: PropertyGroup[]
+		componentType?: TypedComponent['type'] | undefined
+		componentProperty?: string | undefined
+	}
+
+	let {
+		value = $bindable(''),
+		properties,
+		componentType = undefined,
+		componentProperty = undefined
+	}: Props = $props()
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
 	const styleStore = createStyleStore(properties)
 	setContext(STYLE_STORE_KEY, styleStore)
 
-	let multiValues: Record<number, string[]> = initiateMultiValues()
-	let mounted = false
-	let isOpen: Record<string, boolean> = {}
-
-	$: mounted && $styleStore && writeStyle()
-	$: mounted && (!value || value) && parseStyle()
-	$: $app && setTopColors()
+	let multiValues: Record<number, string[]> = $state(initiateMultiValues())
+	let mounted = $state(false)
+	let isOpen: Record<string, boolean> = $state({})
 
 	function parseStyle() {
 		styleStore.resetStyle()
@@ -181,6 +186,15 @@
 		parseStyle()
 		mounted = true
 	})
+	$effect(() => {
+		mounted && $styleStore && untrack(() => writeStyle())
+	})
+	$effect(() => {
+		mounted && (!value || value) && untrack(() => parseStyle())
+	})
+	$effect(() => {
+		$app && untrack(() => setTopColors())
+	})
 </script>
 
 <div class="flex flex-col !divide-y">
@@ -196,6 +210,7 @@
 				toggleClasses=" !rounded-b-none !py-0
 				{isOpen[prefix] ? '!bg-surface-secondary hover:!bg-surface-hover' : ''}"
 			>
+				<!-- @migration-task: migrate this slot by hand, `title` would shadow a prop on the parent component -->
 				<svelte:fragment slot="title">
 					<span class="font-normal text-xs">
 						{group}
@@ -220,7 +235,7 @@
 													prop={{ ...prop, value }}
 													inline
 													bind:value={multiValues[index][i]}
-													on:change={() => setMultiValueProperty(index)}
+													onChange={() => setMultiValueProperty(index)}
 												/>
 											{/each}
 										</div>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
index f597ae5a87..754b68577f 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { getContext } from 'svelte'
 	import { Button, ClearableInput, Menu } from '../../../common'
 	import Popover from '../../../Popover.svelte'
 	import ColorInput from '../settingsPanel/inputEditor/ColorInput.svelte'
@@ -11,18 +11,22 @@
 		type StyleStoreValue,
 		type StylePropertyValue
 	} from './quickStyleProperties'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let prop: StyleStoreValue['style'][number]['prop']
-	export let value: string | undefined
-	export let inline = false
+	interface Props {
+		prop: StyleStoreValue['style'][number]['prop']
+		value: string | undefined
+		inline?: boolean
+		onChange?: (value: string) => void
+	}
+
+	let { prop, value = $bindable(), inline = false, onChange }: Props = $props()
 	const styleStore = getContext<StyleStore>(STYLE_STORE_KEY)
-	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 	const key = prop.key
 	const type = prop.value?.['type']
-	let unit: (typeof StylePropertyUnits)[number] = StylePropertyUnits[0]
-	let internalValue: number | string
+	let unit: (typeof StylePropertyUnits)[number] = $state(StylePropertyUnits[0])
+	let internalValue: number | string = $derived(
+		getInteralValue(value, prop.value as StylePropertyValue)
+	)
 
 	function getInteralValue(value: string | undefined, propValue: StylePropertyValue) {
 		if (!value) {
@@ -36,16 +40,16 @@
 		}
 		return ''
 	}
-	$: internalValue = getInteralValue(value, prop.value as StylePropertyValue)
-	$: dispatchIfMounted('change', value)
 
 	function updateValue(next: number) {
 		value = next ? next + unit : ''
+		onChange?.(value ?? '')
 	}
 
 	function updateUnit(next: (typeof StylePropertyUnits)[number]) {
 		value = value?.replace(unit, next) || ''
 		unit = next
+		onChange?.(value ?? '')
 	}
 </script>
 
@@ -69,7 +73,9 @@
 						style={`background-color: ${color};`}
 						on:click={() => (value = color)}
 					/>
-					<svelte:fragment slot="text">{color}</svelte:fragment>
+					{#snippet text()}
+						{color}
+					{/snippet}
 				</Popover>
 			{/each}
 		{:else if type === StylePropertyType.number}
@@ -91,37 +97,39 @@
 				on:change={({ detail }) => updateValue(detail)}
 			>
 				<Menu
-					let:close
 					noMinW
 					wrapperClasses="h-full bg-surface rounded-r-md border-y border-r pr-0.5"
 					popupClasses="!mt-0"
 				>
-					<button
-						slot="trigger"
-						type="button"
-						class="font-normal text-xs px-1 py-1.5 w-8 rounded mt-0.5 duration-200 hover:bg-gray-200/90"
-					>
-						{unit}
-					</button>
-					<ul class="bg-surface rounded border py-1 overflow-auto">
-						{#each StylePropertyUnits as u}
-							<li class="w-full">
-								<Button
-									type="button"
-									color="light"
-									size="xs"
-									variant="contained"
-									btnClasses="!justify-start !rounded-none !w-full !px-3 !py-1.5"
-									on:click={() => {
-										updateUnit(u)
-										close()
-									}}
-								>
-									{u}
-								</Button>
-							</li>
-						{/each}
-					</ul>
+					{#snippet trigger()}
+						<button
+							type="button"
+							class="font-normal text-xs px-1 py-1.5 w-8 rounded mt-0.5 duration-200 hover:bg-gray-200/90"
+						>
+							{unit}
+						</button>
+					{/snippet}
+					{#snippet children({ close })}
+						<ul class="bg-surface rounded border py-1 overflow-auto">
+							{#each StylePropertyUnits as u}
+								<li class="w-full">
+									<Button
+										type="button"
+										color="light"
+										size="xs"
+										variant="contained"
+										btnClasses="!justify-start !rounded-none !w-full !px-3 !py-1.5"
+										on:click={() => {
+											updateUnit(u)
+											close()
+										}}
+									>
+										{u}
+									</Button>
+								</li>
+							{/each}
+						</ul>
+					{/snippet}
 				</Menu>
 			</ClearableInput>
 		{:else if type === StylePropertyType.text}
@@ -144,10 +152,12 @@
 						{#if typeof option.icon === 'string'}
 							{option.icon}
 						{:else}
-							<svelte:component this={option.icon} size={18} />
+							<option.icon size={18} />
 						{/if}
 					</Button>
-					<svelte:fragment slot="text">{option.text}</svelte:fragment>
+					{#snippet text()}
+						{option.text}
+					{/snippet}
 				</Popover>
 			{:else}
 				<ClearableInput inputClass="min-w-[32px]" bind:value />
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts b/frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts
index 0df79e01f4..c8efd73813 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts
@@ -85,11 +85,11 @@ const validateAll = {
 export function getComponentControl(type: keyof typeof components): Array<ComponentFunction> {
 	switch (type) {
 		case 'tabscomponent':
-			return [setTab]
+			return [setTab, setSelectedIndex]
 		case 'selectstepcomponent':
-			return [setTab, setValue]
+			return [setTab, setValue, setSelectedIndex]
 		case 'selecttabcomponent':
-			return [setTab, setValue]
+			return [setTab, setValue, setSelectedIndex]
 		case 'conditionalwrapper':
 		case 'steppercomponent':
 			return [setTab]
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
index 820d68bb12..c0094fba48 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
@@ -74,7 +74,8 @@
 						>Status</div
 					>
 					<div class="font-semibold bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs border-b"
-						>Action</div>
+						>Action</div
+					>
 
 					<!-- Iterate over uninitializedComponents to display each component in the grid -->
 					{#each unintitializedComponents as c}
@@ -82,41 +83,39 @@
 						{#if !item}
 							<div>Item {c} not found</div>
 						{:else}
-						<!-- Component Id -->
-						<div class="text-xs flex items-center px-2 py-2">
-							<Badge>
-								{c}
-							</Badge>
-						</div>
+							<!-- Component Id -->
+							<div class="text-xs flex items-center px-2 py-2">
+								<Badge>
+									{c}
+								</Badge>
+							</div>
 
-						<div class="text-xs flex items-center px-2 py-2">
-							<Badge color="blue">
-								{item?.data?.type || 'Unknown'}
-							</Badge>
-						</div>
+							<div class="text-xs flex items-center px-2 py-2">
+								<Badge color="blue">
+									{item?.data?.type || 'Unknown'}
+								</Badge>
+							</div>
 
-						<div class="text-xs flex items-center px-2 py-2">
-							<Badge color="red">Uninitialized</Badge>
-						</div>
-						<div class="text-xs flex items-center px-2 py-2">
-
-							<Button
-								color="light"
-								startIcon={{
-									icon: Trash
-								}}
-								size="xs2"
-								on:click={() => {
-									let parent = findGridItemParentGrid($app, c)
-									deleteGridItem($app, item.data, parent)
-									$app = $app
-								}}
-							>
-								Remove
-							</Button>
-						</div>
+							<div class="text-xs flex items-center px-2 py-2">
+								<Badge color="red">Uninitialized</Badge>
+							</div>
+							<div class="text-xs flex items-center px-2 py-2">
+								<Button
+									color="light"
+									startIcon={{
+										icon: Trash
+									}}
+									size="xs2"
+									on:click={() => {
+										let parent = findGridItemParentGrid($app, c)
+										deleteGridItem($app, item.data, parent)
+										$app = $app
+									}}
+								>
+									Remove
+								</Button>
+							</div>
 						{/if}
-
 					{/each}
 				</div>
 			</div>
@@ -166,7 +165,7 @@
 								on:click={() => {
 									if ($app.subgrids && s) {
 										delete $app.subgrids[s.subGridId]
-										$app = { ...$app }
+										$app = $app
 									}
 								}}
 							>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
index b78debafee..534be983ac 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
@@ -9,13 +9,11 @@
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
-	let code = JSON.stringify($app.lazyInitRequire)
+	let code = $state(JSON.stringify($app.lazyInitRequire))
 
-	let selectedRendering = $app.eagerRendering
-		? 'eager'
-		: $app.lazyInitRequire
-		? 'lazy'
-		: 'semi-lazy'
+	let selectedRendering = $state(
+		$app.eagerRendering ? 'eager' : $app.lazyInitRequire ? 'lazy' : 'semi-lazy'
+	)
 </script>
 
 <div class="flex flex-col gap-8" style="all:none;">
@@ -31,7 +29,6 @@
 	</Alert>
 
 	<ToggleButtonGroup
-		label="Rendering"
 		bind:selected={selectedRendering}
 		on:selected={(e) => {
 			if (e.detail == 'eager') {
@@ -46,11 +43,12 @@
 				code = JSON.stringify($app.lazyInitRequire)
 			}
 		}}
-		let:item
 	>
-		<ToggleButton value="eager" label="Eager" {item} />
-		<ToggleButton value="semi-lazy" label="Semi-Lazy" {item} />
-		<ToggleButton value="lazy" label="Lazy" {item} />
+		{#snippet children({ item })}
+			<ToggleButton value="eager" label="Eager" {item} />
+			<ToggleButton value="semi-lazy" label="Semi-Lazy" {item} />
+			<ToggleButton value="lazy" label="Lazy" {item} />
+		{/snippet}
 	</ToggleButtonGroup>
 	{#if selectedRendering == 'eager'}
 		<Section label="Eager mode">
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 3e280e9538..703aea891f 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -4,7 +4,7 @@
 	const bubble = createBubbler()
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { Preview } from '$lib/gen'
-	import { createEventDispatcher, getContext, onMount } from 'svelte'
+	import { createEventDispatcher, getContext, onMount, untrack } from 'svelte'
 	import type { AppViewerContext, InlineScript } from '../../types'
 	import { Maximize2, Trash2 } from 'lucide-svelte'
 	import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte'
@@ -196,6 +196,7 @@
 					$stateId++
 				}
 			}
+			$app = $app
 		}
 	}
 
@@ -231,7 +232,7 @@
 	$effect(() => {
 		if (name && name !== lastName) {
 			lastName = name
-			onNameChange()
+			untrack(() => onNameChange())
 		}
 	})
 
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
index 41297ea965..23f072a3be 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
@@ -5,16 +5,28 @@
 	import type { InlineScript } from '../../types'
 	import { Save } from 'lucide-svelte'
 
-	let scriptEditorDrawer: Drawer
-	export let appPath: string
-	export let inlineScript: InlineScript
-	export let editor: Editor | undefined = undefined
-	export let isOpen: boolean | undefined = undefined
-	export let id: string
+	let scriptEditorDrawer: Drawer | undefined = $state(undefined)
+	interface Props {
+		appPath: string
+		inlineScript: InlineScript
+		editor?: Editor | undefined
+		isOpen?: boolean | undefined
+		id: string
+	}
+
+	let {
+		appPath,
+		inlineScript = $bindable(),
+		editor = undefined,
+		isOpen = $bindable(undefined),
+		id
+	}: Props = $props()
 
 	export function openDrawer() {
-		scriptEditorDrawer.openDrawer?.()
+		scriptEditorDrawer?.openDrawer?.()
 	}
+
+	let args = $state({})
 </script>
 
 <Drawer bind:open={isOpen} bind:this={scriptEditorDrawer} size="1200px">
@@ -23,7 +35,7 @@
 		noPadding
 		forceOverflowVisible
 		on:close={() => {
-			scriptEditorDrawer.closeDrawer()
+			scriptEditorDrawer?.closeDrawer()
 			editor?.setCode(inlineScript.content)
 		}}
 	>
@@ -40,10 +52,11 @@
 				on:createScriptFromInlineScript
 				tag={undefined}
 				saveToWorkspace
+				{args}
 			/>
 		{/if}
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button size="xs" startIcon={{ icon: Save }} disabled>Automatically synced</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
index 866141b231..cfe33844a4 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
@@ -48,7 +48,6 @@
 	async function refreshScript(runnable: RunnableByPath) {
 		try {
 			let { schema } = await getScriptByPath(runnable.path)
-			console.log('schema1', schema)
 			if (!deepEqual(runnable.schema, schema)) {
 				runnable.schema = schema
 				if (!runnable.schema.order) {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
index 4622a5a36c..eb28ce77b4 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
@@ -15,7 +15,11 @@
 
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
-	export let component: AppComponent
+	interface Props {
+		component: AppComponent
+	}
+
+	let { component = $bindable() }: Props = $props()
 </script>
 
 {#if component.horizontalAlignment || component.verticalAlignment}
@@ -26,11 +30,12 @@
 				noWFull
 				on:selected={() => ($app = $app)}
 				bind:selected={component.horizontalAlignment}
-				let:item
 			>
-				<ToggleButton value="left" icon={AlignStartVertical} {item} />
-				<ToggleButton value="center" icon={AlignCenterVertical} {item} />
-				<ToggleButton value="right" icon={AlignEndVertical} {item} />
+				{#snippet children({ item })}
+					<ToggleButton value="left" icon={AlignStartVertical} {item} />
+					<ToggleButton value="center" icon={AlignCenterVertical} {item} />
+					<ToggleButton value="right" icon={AlignEndVertical} {item} />
+				{/snippet}
 			</ToggleButtonGroup>
 		{/if}
 		{#if component.type !== 'formcomponent' && component.verticalAlignment}
@@ -38,11 +43,12 @@
 				noWFull
 				on:selected={() => ($app = $app)}
 				bind:selected={component.verticalAlignment}
-				let:item
 			>
-				<ToggleButton value="top" icon={AlignStartHorizontal} {item} />
-				<ToggleButton value="center" icon={AlignCenterHorizontal} {item} />
-				<ToggleButton value="bottom" icon={AlignEndHorizontal} {item} />
+				{#snippet children({ item })}
+					<ToggleButton value="top" icon={AlignStartHorizontal} {item} />
+					<ToggleButton value="center" icon={AlignCenterHorizontal} {item} />
+					<ToggleButton value="bottom" icon={AlignEndHorizontal} {item} />
+				{/snippet}
 			</ToggleButtonGroup>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
index c114d37148..1955e636c2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
@@ -15,6 +15,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import CloseButton from '$lib/components/common/CloseButton.svelte'
 	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
+	import Portal from '$lib/components/Portal.svelte'
 	export let component: AppComponent | undefined
 
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
@@ -130,171 +131,171 @@
 <HighlightTheme />
 
 {#if migrationModalOpen}
-	<div
-		transition:fadeFast|local
-		class={'absolute top-0 bottom-0 left-0 right-0 z-[5000]'}
-		role="dialog"
-	>
-		<div
-			class={twMerge(
-				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
-				migrationModalOpen ? 'ease-out duration-300 opacity-100' : 'ease-in duration-200 opacity-0'
-			)}
-		></div>
+	<Portal name="css-global-migration-modal" class="z-[5000] absolute">
+		<div transition:fadeFast|local class={' top-0 bottom-0 left-0 right-0 z-[5000]'} role="dialog">
+			<div
+				class={twMerge(
+					'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+					migrationModalOpen
+						? 'ease-out duration-300 opacity-100'
+						: 'ease-in duration-200 opacity-0'
+				)}
+			></div>
 
-		<div class="fixed inset-0 z-10 overflow-y-auto">
-			<div class="flex min-h-full items-center justify-center p-4">
-				<div
-					class={twMerge(
-						'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-5xl sm:p-6 ',
-						migrationModalOpen
-							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
-							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-					)}
-				>
-					<div class="leading-6 font-semibold text-sm w-full flex justify-between">
-						<div>Migrate to CSS editor</div><CloseButton
-							on:close={() => (migrationModalOpen = false)}
-						/>
-					</div>
+			<div class="fixed inset-0 z-10 overflow-y-auto">
+				<div class="flex min-h-full items-center justify-center p-4">
+					<div
+						class={twMerge(
+							'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-5xl sm:p-6 ',
+							migrationModalOpen
+								? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
+								: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+						)}
+					>
+						<div class="leading-6 font-semibold text-sm w-full flex justify-between">
+							<div>Migrate to CSS editor</div><CloseButton
+								on:close={() => (migrationModalOpen = false)}
+							/>
+						</div>
 
-					<div class="">
 						<div class="">
-							{#if hasStyles(component?.customCss)}
-								<div class="leading-6 text-xs font-semibold">
-									ID <Badge color="indigo" size="xs">
-										{component?.id}
-									</Badge>
-								</div>
-							{/if}
-							{#if component?.type && $app.css}
-								{#each Object.keys(component.customCss ?? {}) as cssKey}
-									{#if component.customCss?.[cssKey].style != undefined && component.customCss[cssKey].style !== ''}
-										<div class="grid grid-cols-2 gap-2">
-											<div>
-												<div class="flex flex-row justify-between items-center py-0.5">
-													<div class="leading-6 text-xs font-semibold">
-														<Badge>
-															{cssKey}
-														</Badge>
+							<div class="">
+								{#if hasStyles(component?.customCss)}
+									<div class="leading-6 text-xs font-semibold">
+										ID <Badge color="indigo" size="xs">
+											{component?.id}
+										</Badge>
+									</div>
+								{/if}
+								{#if component?.type && $app.css}
+									{#each Object.keys(component.customCss ?? {}) as cssKey}
+										{#if component.customCss?.[cssKey].style != undefined && component.customCss[cssKey].style !== ''}
+											<div class="grid grid-cols-2 gap-2">
+												<div>
+													<div class="flex flex-row justify-between items-center py-0.5">
+														<div class="leading-6 text-xs font-semibold">
+															<Badge>
+																{cssKey}
+															</Badge>
+														</div>
+														<Button
+															color="dark"
+															size="xs"
+															on:click={() => {
+																if (component?.customCss?.[cssKey]?.style != undefined) {
+																	setOrUpdateMigration(
+																		cssKey,
+																		component.customCss[cssKey].style ?? ''
+																	)
+																	component.customCss[cssKey].style = ''
+																}
+															}}
+															endIcon={{ icon: MoveRight }}
+														>
+															Migrate
+														</Button>
 													</div>
-													<Button
-														color="dark"
-														size="xs"
-														on:click={() => {
-															if (component?.customCss?.[cssKey]?.style != undefined) {
-																setOrUpdateMigration(
-																	cssKey,
-																	component.customCss[cssKey].style ?? ''
-																)
-																component.customCss[cssKey].style = ''
-															}
-														}}
-														endIcon={{ icon: MoveRight }}
-													>
-														Migrate
-													</Button>
-												</div>
-												<div class="border p-2 rounded-md">
-													<Highlight code={component.customCss[cssKey].style} language={css} />
-												</div>
-											</div>
-											<div class="">
-												<div class="leading-6 text-xs font-semibold my-1">Preview</div>
-												<div class="border rounded-md p-2">
-													<Highlight
-														code={`${getSelector(cssKey)} {\n\t${
-															component.customCss[cssKey].style
-														}\n}`}
-														language={css}
-													/>
-												</div>
-											</div>
-										</div>
-									{/if}
-								{/each}
-							{/if}
-
-							{#if hasStyles(component?.type ? $app.css?.[component?.type] : undefined)}
-								<div class="leading-6 text-xs font-semibold">
-									Global: {component?.type ? ccomponents[component.type]?.name : ''}
-								</div>
-							{/if}
-
-							{#if component?.type && $app.css}
-								{#each Object.keys($app.css[component?.type] ?? {}) as cssKey}
-									{#if type && $app.css?.[type]?.[cssKey].style != undefined && $app.css[type]?.[cssKey].style !== ''}
-										<div class="grid grid-cols-2 gap-2">
-											<div>
-												<div class="flex flex-row justify-between items-center py-0.5">
-													<div class="leading-6 text-xs font-semibold">
-														<Badge>
-															{cssKey}
-														</Badge>
+													<div class="border p-2 rounded-md">
+														<Highlight code={component.customCss[cssKey].style} language={css} />
 													</div>
-													<Button
-														color="dark"
-														size="xs"
-														on:click={() => {
-															if (type && $app.css?.[type]) {
-																setOrUpdateMigration(cssKey, $app.css[type][cssKey].style)
-																$app.css[type][cssKey].style = ''
-															}
-														}}
-														endIcon={{ icon: MoveRight }}
-													>
-														Migrate
-													</Button>
 												</div>
-												<div class="border p-2 rounded-md">
-													<Highlight code={$app.css[type][cssKey].style} language={css} />
+												<div class="">
+													<div class="leading-6 text-xs font-semibold my-1">Preview</div>
+													<div class="border rounded-md p-2">
+														<Highlight
+															code={`${getSelector(cssKey)} {\n\t${
+																component.customCss[cssKey].style
+															}\n}`}
+															language={css}
+														/>
+													</div>
 												</div>
 											</div>
-											<div class="">
-												<div class="leading-6 text-xs font-semibold my-1">Preview</div>
-												<div class="border rounded-md p-2">
-													<Highlight
-														code={`${getSelector(cssKey)} {\n\t${$app.css[type][cssKey].style}\n}`}
-														language={css}
-													/>
+										{/if}
+									{/each}
+								{/if}
+
+								{#if hasStyles(component?.type ? $app.css?.[component?.type] : undefined)}
+									<div class="leading-6 text-xs font-semibold">
+										Global: {component?.type ? ccomponents[component.type]?.name : ''}
+									</div>
+								{/if}
+
+								{#if component?.type && $app.css}
+									{#each Object.keys($app.css[component?.type] ?? {}) as cssKey}
+										{#if type && $app.css?.[type]?.[cssKey].style != undefined && $app.css[type]?.[cssKey].style !== ''}
+											<div class="grid grid-cols-2 gap-2">
+												<div>
+													<div class="flex flex-row justify-between items-center py-0.5">
+														<div class="leading-6 text-xs font-semibold">
+															<Badge>
+																{cssKey}
+															</Badge>
+														</div>
+														<Button
+															color="dark"
+															size="xs"
+															on:click={() => {
+																if (type && $app.css?.[type]) {
+																	setOrUpdateMigration(cssKey, $app.css[type][cssKey].style)
+																	$app.css[type][cssKey].style = ''
+																}
+															}}
+															endIcon={{ icon: MoveRight }}
+														>
+															Migrate
+														</Button>
+													</div>
+													<div class="border p-2 rounded-md">
+														<Highlight code={$app.css[type][cssKey].style} language={css} />
+													</div>
+												</div>
+												<div class="">
+													<div class="leading-6 text-xs font-semibold my-1">Preview</div>
+													<div class="border rounded-md p-2">
+														<Highlight
+															code={`${getSelector(cssKey)} {\n\t${$app.css[type][cssKey].style}\n}`}
+															language={css}
+														/>
+													</div>
 												</div>
 											</div>
-										</div>
-									{/if}
-								{/each}
-							{/if}
-						</div>
-					</div>
-					<div>
-						<div class="leading-6 text-xs font-semibold my-1">Current migrations</div>
-						{#if migrations.size > 0}
-							<div class="border rounded-md p-2">
-								<Highlight code={generatedCode} language={css} />
+										{/if}
+									{/each}
+								{/if}
 							</div>
-						{:else}
-							<div class="text-gray-500 text-xs">No migrations</div>
-						{/if}
-					</div>
-					<div class="mt-2 flex flex-row justify-end items-center gap-2">
-						<div class="text-xs">
-							If the class is already present in the CSS editor, the migration will append the new
-							values to the existing ones.
 						</div>
-						<Button
-							size="xs"
-							color="dark"
-							on:click={() => {
-								appendMigrationsToCss(migrations)
-								migrationModalOpen = false
-							}}
-							disabled={migrations.size === 0}
-							endIcon={{ icon: MoveRight }}
-						>
-							Apply migration
-						</Button>
+						<div>
+							<div class="leading-6 text-xs font-semibold my-1">Current migrations</div>
+							{#if migrations.size > 0}
+								<div class="border rounded-md p-2">
+									<Highlight code={generatedCode} language={css} />
+								</div>
+							{:else}
+								<div class="text-gray-500 text-xs">No migrations</div>
+							{/if}
+						</div>
+						<div class="mt-2 flex flex-row justify-end items-center gap-2">
+							<div class="text-xs">
+								If the class is already present in the CSS editor, the migration will append the new
+								values to the existing ones.
+							</div>
+							<Button
+								size="xs"
+								color="dark"
+								on:click={() => {
+									appendMigrationsToCss(migrations)
+									migrationModalOpen = false
+								}}
+								disabled={migrations.size === 0}
+								endIcon={{ icon: MoveRight }}
+							>
+								Apply migration
+							</Button>
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	</Portal>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
index 0e61057025..0146164060 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
@@ -9,20 +9,26 @@
 	import ConnectionButton from '$lib/components/common/button/ConnectionButton.svelte'
 	import type EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte'
 
-	export let componentInput: AppInput
-	export let disableStatic: boolean = false
-	export let evalV2editor: EvalV2InputEditor | undefined
+	interface Props {
+		componentInput: AppInput
+		disableStatic?: boolean
+		evalV2editor: EvalV2InputEditor | undefined
+	}
+
+	let { componentInput = $bindable(), disableStatic = false, evalV2editor }: Props = $props()
 
 	const { onchange, connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')
 
 	const dispatch = createEventDispatcher()
 
-	$: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
-		//@ts-ignore
-		componentInput.type = 'templatev2'
-		componentInput['eval'] = componentInput.value
-		componentInput['connections'] = [{ componentId: 'ctx', id: 'email' }]
-	}
+	$effect(() => {
+		if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
+			//@ts-ignore
+			componentInput.type = 'templatev2'
+			componentInput['eval'] = componentInput.value
+			componentInput['connections'] = [{ componentId: 'ctx', id: 'email' }]
+		}
+	})
 
 	function applyConnection(connection: InputConnection) {
 		console.log(connection)
@@ -43,7 +49,7 @@
 		$app = $app
 	}
 
-	let clientWidth: number
+	let clientWidth: number = $state(0)
 	const iconOnlyThreshold = 300
 </script>
 
@@ -56,63 +62,64 @@
 				}}
 				noWFull
 				bind:selected={componentInput.type}
-				let:item
 			>
-				{#if componentInput.fieldType === 'template'}
-					{#if componentInput.type == 'template'}
+				{#snippet children({ item })}
+					{#if componentInput.fieldType === 'template'}
+						{#if componentInput.type == 'template'}
+							<ToggleButton
+								tooltip={`Templated string (use \$\{<output>.x\} )`}
+								value="template"
+								disabled={disableStatic}
+								icon={CurlyBraces}
+								label="Template"
+								{item}
+							/>
+						{:else}
+							<ToggleButton
+								tooltip={`Templated string (use \$\{<output>.x\} )`}
+								value="templatev2"
+								disabled={disableStatic}
+								icon={CurlyBraces}
+								label="Template"
+								{item}
+							/>
+						{/if}
+					{:else if componentInput.noStatic !== true}
 						<ToggleButton
-							tooltip={`Templated string (use \$\{<output>.x\} )`}
-							value="template"
+							label="Static"
+							value="static"
 							disabled={disableStatic}
-							icon={CurlyBraces}
-							label="Template"
+							iconOnly={clientWidth < iconOnlyThreshold}
+							icon={Pen}
 							{item}
 						/>
-					{:else}
+					{/if}
+					{#if componentInput.type == 'connected'}
 						<ToggleButton
-							tooltip={`Templated string (use \$\{<output>.x\} )`}
-							value="templatev2"
-							disabled={disableStatic}
-							icon={CurlyBraces}
-							label="Template"
+							value="connected"
+							icon={Plug2}
+							iconOnly={clientWidth < iconOnlyThreshold}
+							label="Connect"
 							{item}
 						/>
 					{/if}
-				{:else if componentInput.noStatic !== true}
 					<ToggleButton
-						label="Static"
-						value="static"
-						disabled={disableStatic}
+						value="evalv2"
+						icon={FunctionSquare}
 						iconOnly={clientWidth < iconOnlyThreshold}
-						icon={Pen}
+						label="Eval"
 						{item}
 					/>
-				{/if}
-				{#if componentInput.type == 'connected'}
-					<ToggleButton
-						value="connected"
-						icon={Plug2}
-						iconOnly={clientWidth < iconOnlyThreshold}
-						label="Connect"
-						{item}
-					/>
-				{/if}
-				<ToggleButton
-					value="evalv2"
-					icon={FunctionSquare}
-					iconOnly={clientWidth < iconOnlyThreshold}
-					label="Eval"
-					{item}
-				/>
 
-				<ToggleButton
-					value="runnable"
-					icon={Code}
-					iconOnly={clientWidth < iconOnlyThreshold}
-					label="Compute"
-					{item}
-					id="data-source-compute"
-				/>
+					<ToggleButton
+						value="runnable"
+						icon={Code}
+						iconOnly={clientWidth < iconOnlyThreshold}
+						label="Compute"
+						{item}
+						id="data-source-compute"
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 
 			<div class="flex">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index b706095172..ec5a794bb5 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -46,11 +46,19 @@
 	import { twMerge } from 'tailwind-merge'
 	import Popover from '$lib/components/Popover.svelte'
 
-	export let componentSettings: { item: GridItem; parent: string | undefined } | undefined =
-		undefined
-	export let onDelete: (() => void) | undefined = undefined
-	export let noGrid = false
-	export let duplicateMoveAllowed = true
+	interface Props {
+		componentSettings?: { item: GridItem; parent: string | undefined } | undefined
+		onDelete?: (() => void) | undefined
+		noGrid?: boolean
+		duplicateMoveAllowed?: boolean
+	}
+
+	let {
+		componentSettings = $bindable(undefined),
+		onDelete = undefined,
+		noGrid = false,
+		duplicateMoveAllowed = true
+	}: Props = $props()
 
 	const {
 		app,
@@ -108,10 +116,10 @@
 
 	let viewCssOptions = false
 
-	$: extraLib =
+	let extraLib = $derived(
 		(componentSettings?.item?.data?.componentInput?.type === 'template' ||
 			componentSettings?.item?.data?.componentInput?.type === 'templatev2') &&
-		$worldStore
+			$worldStore
 			? buildExtraLib(
 					$worldStore?.outputsById ?? {},
 					componentSettings?.item?.data?.id,
@@ -119,6 +127,7 @@
 					false
 				)
 			: undefined
+	)
 
 	// 	`
 	// /** The current's app state */
@@ -144,7 +153,7 @@
 		? isTriggerable(componentSettings?.item.data.type)
 		: false
 
-	let evalV2editor: EvalV2InputEditor | undefined = undefined
+	let evalV2editor: EvalV2InputEditor | undefined = $state(undefined)
 
 	function transformToFrontend() {
 		if (componentSettings?.item.data.componentInput) {
@@ -173,7 +182,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={keydown} />
+<svelte:window onkeydown={keydown} />
 
 {#if componentSettings?.item?.id && isTableAction(componentSettings?.item?.id, $app)}
 	<div
@@ -181,9 +190,9 @@
 	>
 		<div class="flex flex-row items-center gap-2">
 			<Popover>
-				<svelte:fragment slot="text">
+				{#snippet text()}
 					<div class="flex flex-row gap-1"> Back to table component </div>
-				</svelte:fragment>
+				{/snippet}
 				<Button
 					iconOnly
 					startIcon={{
@@ -238,7 +247,7 @@
 								: 'Data source'}
 					id={'component-input'}
 				>
-					<svelte:fragment slot="action">
+					{#snippet action()}
 						<div class="flex flex-row gap-1 justify-center items-center">
 							<DocLink
 								docLink={'https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable'}
@@ -252,7 +261,7 @@
 								{`${component.id}`}
 							</div>
 						</div>
-					</svelte:fragment>
+					{/snippet}
 
 					{#if componentSettings.item.data.componentInput}
 						<ComponentInputTypeEditor
@@ -314,7 +323,7 @@
 									id={component.id}
 									bind:componentInput={componentSettings.item.data.componentInput}
 								/>
-								<a class="text-2xs" on:click={transformToFrontend} href={undefined}>
+								<a class="text-2xs" onclick={transformToFrontend} href={undefined}>
 									transform to a frontend script
 								</a>
 							{:else if componentSettings.item.data.componentInput?.type === 'runnable' && component.componentInput !== undefined}
@@ -342,7 +351,6 @@
 											parameters this component is attached to.
 										</Tooltip>
 									</div>
-
 									<InputsSpecsEditor
 										id={component.id}
 										shouldCapitalize={false}
@@ -470,17 +478,19 @@
 
 		{#if Object.keys(ccomponents[component.type]?.customCss ?? {}).length > 0}
 			<PanelSection title="Styling">
-				<div slot="action" class="flex justify-end flex-wrap gap-1">
-					<Button
-						color="light"
-						size="xs"
-						variant="border"
-						startIcon={{ icon: ChevronLeft }}
-						on:click={() => secondaryMenuLeft.toggle(StylePanel, { type: 'style' })}
-					>
-						Show
-					</Button>
-				</div>
+				{#snippet action()}
+					<div class="flex justify-end flex-wrap gap-1">
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: ChevronLeft }}
+							on:click={() => secondaryMenuLeft.toggle(StylePanel, { type: 'style' })}
+						>
+							Show
+						</Button>
+					</div>
+				{/snippet}
 				<div class="flex gap-2 items-center flex-wrap">
 					<div class="!text-2xs">Full height</div>
 					{#if componentSettings?.item?.[12]?.fullHeight !== undefined}
@@ -525,20 +535,22 @@
 
 		{#if duplicateMoveAllowed}
 			<PanelSection title="Copy/Move">
-				<div slot="action">
-					<Button
-						size="xs"
-						color="red"
-						variant="border"
-						on:click={removeGridElement}
-						shortCut={{
-							key: isMac() ? getModifierKey() + 'Del' : 'Del',
-							withoutModifier: true
-						}}
-					>
-						Delete
-					</Button>
-				</div>
+				{#snippet action()}
+					<div>
+						<Button
+							size="xs"
+							color="red"
+							variant="border"
+							on:click={removeGridElement}
+							shortCut={{
+								key: isMac() ? getModifierKey() + 'Del' : 'Del',
+								withoutModifier: true
+							}}
+						>
+							Delete
+						</Button>
+					</div>
+				{/snippet}
 
 				<div class="overflow-auto grid grid-cols-2 gap-1 text-tertiary">
 					<div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte
index 16422b4333..780c6f74ce 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte
@@ -11,11 +11,16 @@
 	import type { InputConnectionEval } from '../../inputType'
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 
-	export let component: AppComponent
-	let convertToUIEditorCallback: (() => void) | undefined = undefined
+	interface Props {
+		component: AppComponent
+		children?: import('svelte').Snippet
+	}
 
-	let selected = 'ui-editor'
-	let renderCount = 0
+	let { component = $bindable(), children }: Props = $props()
+	let convertToUIEditorCallback: (() => void) | undefined = $state(undefined)
+
+	let selected = $state('ui-editor')
+	let renderCount = $state(0)
 
 	onMount(() => {
 		if (
@@ -397,20 +402,21 @@
 			on:selected={({ detail }) => {
 				handleSelected(detail)
 			}}
-			let:item
 		>
-			<ToggleButton
-				value="ui-editor"
-				label="UI Editor"
-				tooltip="Use the UI editor to quickly create a plotly chart."
-				{item}
-			/>
-			<ToggleButton
-				value="json"
-				label="JSON"
-				tooltip="Switch to JSON mode for complete customization of Plotly settings."
-				{item}
-			/>
+			{#snippet children({ item })}
+				<ToggleButton
+					value="ui-editor"
+					label="UI Editor"
+					tooltip="Use the UI editor to quickly create a plotly chart."
+					{item}
+				/>
+				<ToggleButton
+					value="json"
+					label="JSON"
+					tooltip="Switch to JSON mode for complete customization of Plotly settings."
+					{item}
+				/>
+			{/snippet}
 		</ToggleButtonGroup>
 	</div>
 
@@ -437,10 +443,10 @@
 			{/if}
 		{/key}
 	{:else}
-		<slot />
+		{@render children?.()}
 	{/if}
 {:else}
-	<slot />
+	{@render children?.()}
 {/if}
 
 <ConfirmationModal
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
index 50e82c700e..909ff00c74 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
@@ -49,7 +49,7 @@
 							bind:component
 							{paneHeight}
 							{paneWidth}
-							on:render={() => {
+							onrender={() => {
 								renderCount++
 							}}
 						/>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
index f066647fa0..b2333dd085 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import { getContext } from 'svelte'
 	import type { DecisionTreeNode } from '../component'
 	import Button from '$lib/components/common/button/Button.svelte'
@@ -11,94 +13,102 @@
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import NodeWrapper from '$lib/components/graph/renderers/nodes/NodeWrapper.svelte'
 
-	export let data: {
-		node: DecisionTreeNode
-		canDelete: boolean
-		canAddBranch: boolean
-		selected: boolean
-		index: number
-		nodeCallbackHandler: (
-			event: string,
-			detail: string,
-			graphNode: DecisionTreeNode | undefined,
-			parentIds: string[],
-			branchInsert: boolean
-		) => void
-		parentIds: string[]
+	interface Props {
+		data: {
+			node: DecisionTreeNode
+			canDelete: boolean
+			canAddBranch: boolean
+			selected: boolean
+			index: number
+			nodeCallbackHandler: (
+				event: string,
+				detail: string,
+				graphNode: DecisionTreeNode | undefined,
+				parentIds: string[],
+				branchInsert: boolean
+			) => void
+			parentIds: string[]
+		}
 	}
 
+	let { data }: Props = $props()
+
 	let open: boolean = false
 
 	const { selectedNodeId } = getContext<{
 		selectedNodeId: Writable<string | undefined>
 	}>('DecisionTreeEditor')
 
-	$: selected = $selectedNodeId === data.node.id
+	let selected = $derived($selectedNodeId === data.node.id)
 </script>
 
-<NodeWrapper let:darkMode>
-	<div class="rounded-sm group">
-		<Button
-			class={twMerge(
-				'p-2 bg-surface w-full h-8 relative rounded-sm border border-gray-400',
-				selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
-				'flex flex-row gap-2 items-center justify-between'
-			)}
-			style="width: 275px; height: 34px; background-color: {getStateColor(
-				undefined,
-				darkMode,
-				true
-			)};"
-			on:click={() => {
-				selected = true
-				data.nodeCallbackHandler('select', data.node.id, data.node, data.parentIds, false)
-			}}
-		>
-			<div class="ml-2 text-xs font-normal text-primary truncate">
-				{data.node.label === '' ? `Tab: ${data.node.id}` : data.node.label}
-			</div>
-			<Badge color="indigo" small>
-				Tab index: {data.index}
-				<Tooltip>
-					You can manually select a node using the <b>setTab</b> function with this index in a frontend
-					runnable.
-				</Tooltip>
-			</Badge>
-		</Button>
-
-		{#if data.canDelete}
-			<button
+<NodeWrapper>
+	{#snippet children({ darkMode })}
+		<div class="rounded-sm group">
+			<Button
 				class={twMerge(
-					'absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary',
-					'border-[1.5px] border-gray-700 bg-surface duration-0 hover:bg-red-400 hover:text-white hover:border-red-700',
-					'group-hover:opacity-100 opacity-0'
+					'p-2 bg-surface w-full h-8 relative rounded-sm border border-gray-400',
+					selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
+					'flex flex-row gap-2 items-center justify-between'
 				)}
-				on:click|preventDefault|stopPropagation={() => {
-					data.nodeCallbackHandler('delete', data.node.id, data.node, data.parentIds, false)
+				style="width: 275px; height: 34px; background-color: {getStateColor(
+					undefined,
+					darkMode,
+					true
+				)};"
+				on:click={() => {
+					selected = true
+					data.nodeCallbackHandler('select', data.node.id, data.node, data.parentIds, false)
 				}}
 			>
-				<X class="mx-[3px]" size={14} strokeWidth={2} />
-			</button>
-		{/if}
+				<div class="ml-2 text-xs font-normal text-primary truncate">
+					{data.node.label === '' ? `Tab: ${data.node.id}` : data.node.label}
+				</div>
+				<Badge color="indigo" small>
+					Tab index: {data.index}
+					<Tooltip>
+						You can manually select a node using the <b>setTab</b> function with this index in a frontend
+						runnable.
+					</Tooltip>
+				</Badge>
+			</Button>
 
-		{#if data.node.id !== 'end'}
-			<div
-				class={twMerge(
-					'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
-					open ? 'z-20' : ''
-				)}
-			>
-				<InsertDecisionTreeNode
-					on:node={() => {
-						data.nodeCallbackHandler('nodeInsert', data.node.id, data.node, data.parentIds, false)
-					}}
-					on:addBranch={() => {
-						data.nodeCallbackHandler('addBranch', data.node.id, data.node, data.parentIds, true)
-					}}
-					canAddBranch={data.canAddBranch || data.node.next.length > 1}
-					canAddNode={data.node.next.length <= 1}
-				/>
-			</div>
-		{/if}
-	</div>
+			{#if data.canDelete}
+				<button
+					class={twMerge(
+						'absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary',
+						'border-[1.5px] border-gray-700 bg-surface duration-0 hover:bg-red-400 hover:text-white hover:border-red-700',
+						'group-hover:opacity-100 opacity-0'
+					)}
+					onclick={stopPropagation(
+						preventDefault(() => {
+							data.nodeCallbackHandler('delete', data.node.id, data.node, data.parentIds, false)
+						})
+					)}
+				>
+					<X class="mx-[3px]" size={14} strokeWidth={2} />
+				</button>
+			{/if}
+
+			{#if data.node.id !== 'end'}
+				<div
+					class={twMerge(
+						'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
+						open ? 'z-20' : ''
+					)}
+				>
+					<InsertDecisionTreeNode
+						on:node={() => {
+							data.nodeCallbackHandler('nodeInsert', data.node.id, data.node, data.parentIds, false)
+						}}
+						on:addBranch={() => {
+							data.nodeCallbackHandler('addBranch', data.node.id, data.node, data.parentIds, true)
+						}}
+						canAddBranch={data.canAddBranch || data.node.next.length > 1}
+						canAddNode={data.node.next.length <= 1}
+					/>
+				</div>
+			{/if}
+		</div>
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
index 9c1ef855d6..6fb664e96e 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
@@ -9,28 +9,30 @@
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import type { AppViewerContext, RichConfiguration } from '../../types'
-	import { getContext, tick } from 'svelte'
+	import { getContext, tick, untrack } from 'svelte'
 	import { deleteGridItem } from '../appUtils'
 	import type { AppComponent } from '../component'
 
-	export let conditions: RichConfiguration[] = []
-	export let component: AppComponent
+	interface Props {
+		conditions?: RichConfiguration[]
+		component: AppComponent
+	}
 
-	let items = conditions.slice(0, -1).map((condition, index) => {
-		return { value: condition, id: generateRandomString(), originalIndex: index }
+	let { conditions = $bindable([]), component = $bindable() }: Props = $props()
+
+	let items = $state(
+		conditions.slice(0, -1).map((condition, index) => {
+			return { value: condition, id: generateRandomString(), originalIndex: index }
+		})
+	)
+
+	$effect(() => {
+		const nItems = items
+			.map((item) => item.value)
+			.concat([{ type: 'evalv2', expr: 'true', fieldType: 'boolean', connections: [] }])
+		untrack(() => (conditions = nItems))
 	})
 
-	$: conditions = items
-		.map((item) => item.value)
-		.concat([
-			{
-				type: 'evalv2',
-				expr: 'true',
-				fieldType: 'boolean',
-				connections: []
-			}
-		])
-
 	const { app, runnableComponents, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
@@ -141,8 +143,8 @@
 				flipDurationMs: 200,
 				dropTargetStyle: {}
 			}}
-			on:consider={handleConsider}
-			on:finalize={handleFinalize}
+			onconsider={handleConsider}
+			onfinalize={handleFinalize}
 		>
 			{#each items as item, index (item.id)}
 				{@const condition = item.value}
@@ -168,14 +170,14 @@
 					</div>
 
 					<div class="flex flex-col justify-center gap-2">
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
-						<div on:click={() => deleteSubgrid(index)}>
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div onclick={() => deleteSubgrid(index)}>
 							<X size={16} />
 						</div>
 
-						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div use:dragHandle class="w-4 h-4 handle" aria-label="drag-handle">
 							<GripVertical size={16} />
 						</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index b4b438111b..992cc13f99 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import Button from '$lib/components/common/button/Button.svelte'
 	import CloseButton from '$lib/components/common/CloseButton.svelte'
-	import { getContext, tick } from 'svelte'
+	import { getContext, tick, untrack } from 'svelte'
 	import type { AppViewerContext, RichConfiguration } from '../../types'
 	import { deleteGridItem } from '../appUtils'
 	import type { AppComponent } from '../component'
@@ -11,27 +14,46 @@
 	import { GripVertical, Plus } from 'lucide-svelte'
 	import GridTabDisabled from './GridTabDisabled.svelte'
 
-	export let tabs: string[] = []
-	export let disabledTabs: RichConfiguration[] = []
-
-	export let canDisableTabs: boolean = false
-
-	export let word: string = 'Tab'
-
-	export let component: AppComponent
-
-	$: if (disabledTabs == undefined) {
-		disabledTabs = [
-			{ type: 'static', value: false, fieldType: 'boolean' },
-			{ type: 'static', value: false, fieldType: 'boolean' }
-		]
+	interface Props {
+		tabs?: string[]
+		disabledTabs?: RichConfiguration[]
+		canDisableTabs?: boolean
+		word?: string
+		component: AppComponent
 	}
 
-	let items = tabs.map((tab, index) => {
-		return { value: tab, id: generateRandomString(), originalIndex: index }
+	let {
+		tabs = $bindable(undefined),
+		disabledTabs = $bindable(undefined),
+		canDisableTabs = false,
+		word = 'Tab',
+		component = $bindable()
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (tabs == undefined) {
+			tabs = []
+		}
+		if (disabledTabs == undefined) {
+			disabledTabs = [
+				{ type: 'static', value: false, fieldType: 'boolean' },
+				{ type: 'static', value: false, fieldType: 'boolean' }
+			]
+		}
 	})
 
-	$: tabs = items.map((item) => item.value)
+	let items = $state.raw(
+		(tabs ?? []).map((tab, index) => {
+			return { value: tab, id: generateRandomString(), originalIndex: index }
+		})
+	)
+
+	$effect.pre(() => {
+		items
+		untrack(() => {
+			tabs = items.map((item) => item.value)
+		})
+	})
 
 	const { app, runnableComponents, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -115,7 +137,7 @@
 
 			const newDisabledTabs: RichConfiguration[] = []
 			for (let i = 0; i < items.length; i++) {
-				newDisabledTabs.push(disabledTabs[items[i].originalIndex])
+				disabledTabs && newDisabledTabs.push(disabledTabs[items[i].originalIndex])
 			}
 			disabledTabs = newDisabledTabs
 
@@ -149,15 +171,15 @@
 				flipDurationMs: 200,
 				dropTargetStyle: {}
 			}}
-			on:consider={handleConsider}
-			on:finalize={handleFinalize}
+			onconsider={handleConsider}
+			onfinalize={handleFinalize}
 		>
 			{#each items as item, index (item.id)}
 				<div class="border rounded-md p-2 mb-2 bg-surface">
 					<div class="w-full flex flex-row gap-2 items-center relative my-1">
 						<input
-							on:keydown|stopPropagation
-							on:input={(e) => updateItemValue(index, e)}
+							onkeydown={stopPropagation(bubble('keydown'))}
+							oninput={(e) => updateItemValue(index, e)}
 							type="text"
 							bind:value={items[index].value}
 						/>
@@ -166,9 +188,9 @@
 						</div>
 
 						<div class="flex flex-col justify-center gap-2">
-							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+							<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
 							<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
 								<GripVertical size={16} />
 							</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTabDisabled.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTabDisabled.svelte
index 1494193a4c..23786d5047 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTabDisabled.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTabDisabled.svelte
@@ -4,11 +4,15 @@
 	import InputsSpecEditor from './InputsSpecEditor.svelte'
 	import { slide } from 'svelte/transition'
 
-	export let id: string
-	export let field: RichConfiguration
-	export let index: number
+	interface Props {
+		id: string
+		field: RichConfiguration
+		index: number
+	}
 
-	let disablable = field && !(field?.type === 'static' && field?.value === false)
+	let { id, field = $bindable(), index }: Props = $props()
+
+	let disablable = $state(field && !(field?.type === 'static' && field?.value === false))
 </script>
 
 <Toggle
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte
index f473894312..8e98c1680b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte
@@ -4,7 +4,6 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { getModifierKey } from '$lib/utils'
 	import {
-		type Icon,
 		PanelBottomClose,
 		PanelBottomOpen,
 		PanelLeftClose,
@@ -12,20 +11,35 @@
 		PanelRightClose,
 		PanelRightOpen
 	} from 'lucide-svelte'
-	import type { ComponentType } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let btnClasses: string | undefined = undefined
-	export let size: ButtonType.Size = 'xs'
+	interface Props {
+		btnClasses?: string | undefined
+		size?: ButtonType.Size
+		variant?: ButtonType.Variant
+		color?: ButtonType.Color
+		direction?: 'left' | 'right' | 'bottom'
+		hidden?: boolean
+		shortcut?: string | undefined
+		panelName?: string | undefined
+		customHiddenIcon?: ButtonType.Icon | undefined
+		usePopoverOverride?: boolean
+		popoverOverride?: import('svelte').Snippet
+	}
 
-	export let variant: ButtonType.Variant = 'contained'
-	export let color: ButtonType.Color = 'light'
-	export let direction: 'left' | 'right' | 'bottom' = 'right'
-	export let hidden: boolean = false
-	export let shortcut: string | undefined = undefined
-	export let panelName: string | undefined = undefined
-	export let customHiddenIcon: ComponentType<Icon> | undefined = undefined
-	export let usePopoverOverride: boolean = false
+	let {
+		btnClasses = undefined,
+		size = 'xs',
+		variant = 'contained',
+		color = 'light',
+		direction = 'right',
+		hidden = false,
+		shortcut = undefined,
+		panelName = undefined,
+		customHiddenIcon = undefined,
+		usePopoverOverride = false,
+		popoverOverride
+	}: Props = $props()
 
 	const OpenIconMap = {
 		left: PanelLeftOpen,
@@ -47,9 +61,9 @@
 </script>
 
 <Popover>
-	<svelte:fragment slot="text">
-		{#if usePopoverOverride && $$slots.popoverOverride}
-			<slot name="popoverOverride" />
+	{#snippet text()}
+		{#if usePopoverOverride && popoverOverride}
+			{@render popoverOverride?.()}
 		{:else}
 			<div class="flex flex-row gap-1">
 				{hidden ? 'Show' : 'Hide '} the {panelName ?? direction} panel.
@@ -59,12 +73,16 @@
 				</div>
 			</div>
 		{/if}
-	</svelte:fragment>
+	{/snippet}
 	<Button
 		iconOnly
-		startIcon={{
-			icon: hidden ? customHiddenIcon ?? OpenIconMap[direction] : CloseIconMap[direction]
-		}}
+		startIcon={hidden
+			? (customHiddenIcon ?? {
+					icon: OpenIconMap[direction]
+				})
+			: {
+					icon: CloseIconMap[direction]
+				}}
 		{size}
 		btnClasses={twMerge(
 			'p-1 text-gray-300 hover:!text-gray-600 dark:text-gray-500 dark:hover:!text-gray-200 bg-transparent',
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index b39d3354dd..e87761c27f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -29,42 +29,83 @@
 
 	import Toggle from '$lib/components/Toggle.svelte'
 
-	export let id: string
-	export let componentInput: RichConfiguration
-	export let key: string
-	export let userInputEnabled: boolean = false
-	export let shouldCapitalize: boolean = true
-	export let resourceOnly = false
-	export let tooltip: string | undefined = undefined
-	export let fieldType: InputType
-	export let subFieldType: InputType | undefined
-	export let format: string | undefined
-	export let selectOptions: string[] | undefined
-	export let fileUpload: UploadAppInput['fileUpload'] | undefined = undefined
-	export let fileUploadS3: UploadAppInput['fileUploadS3'] | undefined = undefined
-	export let placeholder: string | undefined
-	export let customTitle: string | undefined = undefined
-	export let displayType: boolean = false
-	export let allowTypeChange: boolean = true
-	export let shouldFormatExpression: boolean = false
-	export let fixedOverflowWidgets: boolean = true
-	export let loading: boolean = false
-	export let acceptSelf: boolean = false
-	export let recomputeOnInputChanged = true
-	export let showOnDemandOnlyToggle = true
-	export let documentationLink: string | undefined = undefined
-	export let markdownTooltip: string | undefined = undefined
-	export let securedContext = false
+	interface Props {
+		id: string
+		componentInput: RichConfiguration
+		key: string
+		userInputEnabled?: boolean
+		shouldCapitalize?: boolean
+		resourceOnly?: boolean
+		tooltip?: string | undefined
+		fieldType: InputType
+		subFieldType: InputType | undefined
+		format: string | undefined
+		selectOptions: string[] | undefined
+		fileUpload?: UploadAppInput['fileUpload'] | undefined
+		fileUploadS3?: UploadAppInput['fileUploadS3'] | undefined
+		placeholder: string | undefined
+		customTitle?: string | undefined
+		displayType?: boolean
+		allowTypeChange?: boolean
+		shouldFormatExpression?: boolean
+		fixedOverflowWidgets?: boolean
+		loading?: boolean
+		acceptSelf?: boolean
+		recomputeOnInputChanged?: boolean
+		showOnDemandOnlyToggle?: boolean
+		documentationLink?: string | undefined
+		markdownTooltip?: string | undefined
+		securedContext?: boolean
+	}
+
+	let {
+		id,
+		componentInput = $bindable(),
+		key,
+		userInputEnabled = false,
+		shouldCapitalize = true,
+		resourceOnly = false,
+		tooltip = undefined,
+		fieldType,
+		subFieldType,
+		format,
+		selectOptions,
+		fileUpload = undefined,
+		fileUploadS3 = undefined,
+		placeholder,
+		customTitle = undefined,
+		displayType = false,
+		allowTypeChange = true,
+		shouldFormatExpression = false,
+		fixedOverflowWidgets = true,
+		loading = false,
+		acceptSelf = false,
+		recomputeOnInputChanged = true,
+		showOnDemandOnlyToggle = true,
+		documentationLink = undefined,
+		markdownTooltip = undefined,
+		securedContext = false
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (componentInput == undefined) {
+			//@ts-ignore
+			componentInput = {
+				type: 'static',
+				value: undefined
+			}
+		}
+	})
 
 	const { connectingInput, app, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
 	const dispatch = createEventDispatcher()
 
-	let evalV2editor: EvalV2InputEditor
-	let s3FilePicker: S3FilePicker | undefined
-	let s3PickerSelection: { s3: string; storage?: string } | undefined = undefined
-	let s3FolderPrefix: string = ''
-	let s3FileUploadRawMode = componentInput?.type == 'uploadS3' && !!componentInput.value?.s3
+	let evalV2editor: EvalV2InputEditor | undefined = $state()
+	let s3FilePicker: S3FilePicker | undefined = $state()
+	let s3PickerSelection: { s3: string; storage?: string } | undefined = $state(undefined)
+	let s3FolderPrefix: string = $state('')
+	let s3FileUploadRawMode = $state(componentInput?.type == 'uploadS3' && !!componentInput.value?.s3)
 
 	function updateSelectedS3File() {
 		if (s3PickerSelection) {
@@ -92,14 +133,6 @@
 		$app = $app
 	}
 
-	$: if (componentInput == undefined) {
-		//@ts-ignore
-		componentInput = {
-			type: 'static',
-			value: undefined
-		}
-	}
-
 	function closeConnection() {
 		dispatch('closeConnection')
 		$connectingInput = {
@@ -174,37 +207,38 @@
 								componentInput['expr'] = JSON.stringify(JSON.parse(componentInput['expr']), null, 4)
 							}
 						}}
-						let:item
 					>
-						<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" {item} />
-						{#if userInputEnabled}
-							<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" {item} />
-						{/if}
-						{#if fileUpload}
-							<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
-						{/if}
-						{#if fileUploadS3}
-							<ToggleButton
-								value="uploadS3"
-								icon={UploadCloud}
-								iconOnly
-								tooltip="Upload S3"
-								{item}
-							/>
-						{/if}
-						{#if componentInput?.type === 'connected'}
-							<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" {item} />
-						{/if}
-						{#if componentInput?.type === 'eval'}
-							<ToggleButton
-								value="eval"
-								icon={FunctionSquare}
-								iconOnly
-								tooltip="Eval Legacy"
-								{item}
-							/>
-						{/if}
-						<ToggleButton value="evalv2" icon={FunctionSquare} iconOnly tooltip="Eval" {item} />
+						{#snippet children({ item })}
+							<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" {item} />
+							{#if userInputEnabled}
+								<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" {item} />
+							{/if}
+							{#if fileUpload}
+								<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
+							{/if}
+							{#if fileUploadS3}
+								<ToggleButton
+									value="uploadS3"
+									icon={UploadCloud}
+									iconOnly
+									tooltip="Upload S3"
+									{item}
+								/>
+							{/if}
+							{#if componentInput?.type === 'connected'}
+								<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" {item} />
+							{/if}
+							{#if componentInput?.type === 'eval'}
+								<ToggleButton
+									value="eval"
+									icon={FunctionSquare}
+									iconOnly
+									tooltip="Eval Legacy"
+									{item}
+								/>
+							{/if}
+							<ToggleButton value="evalv2" icon={FunctionSquare} iconOnly tooltip="Eval" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 					<ConnectionButton {closeConnection} {openConnection} isOpen={!!$connectingInput.opened} />
 				{/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index d802eacfd8..4c6b680c2b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -7,21 +7,39 @@
 	import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 
-	export let id: string
-	export let inputSpecs: RichConfigurations
-	export let inputSpecsConfiguration: RichConfigurations | undefined = undefined
-	export let userInputEnabled: boolean = false
-	export let shouldCapitalize: boolean = true
-	export let resourceOnly = false
-	export let displayType = false
-	export let deletable = false
-	export let acceptSelf: boolean = false
-	export let recomputeOnInputChanged = true
-	export let showOnDemandOnlyToggle = false
-	export let securedContext = false
-	export let overridenByComponent: string[] = []
+	interface Props {
+		id: string
+		inputSpecs: RichConfigurations
+		inputSpecsConfiguration?: RichConfigurations | undefined
+		userInputEnabled?: boolean
+		shouldCapitalize?: boolean
+		resourceOnly?: boolean
+		displayType?: boolean
+		deletable?: boolean
+		acceptSelf?: boolean
+		recomputeOnInputChanged?: boolean
+		showOnDemandOnlyToggle?: boolean
+		securedContext?: boolean
+		overridenByComponent?: string[]
+	}
 
-	$: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs
+	let {
+		id,
+		inputSpecs = $bindable(),
+		inputSpecsConfiguration = undefined,
+		userInputEnabled = false,
+		shouldCapitalize = true,
+		resourceOnly = false,
+		displayType = false,
+		deletable = false,
+		acceptSelf = false,
+		recomputeOnInputChanged = true,
+		showOnDemandOnlyToggle = false,
+		securedContext = false,
+		overridenByComponent = []
+	}: Props = $props()
+
+	let finalInputSpecsConfiguration = $derived(inputSpecsConfiguration ?? inputSpecs)
 
 	const dispatch = createEventDispatcher()
 
@@ -33,7 +51,7 @@
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
-		{#each Object.keys(finalInputSpecsConfiguration) as k}
+		{#each Object.keys(finalInputSpecsConfiguration) as k (k)}
 			{#if overridenByComponent.includes(k)}
 				<div>
 					<span class="text-xs font-semibold truncate text-primary">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
index d197c37757..1e89ab908a 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
@@ -181,7 +181,7 @@
 					</Tooltip>
 				</div>
 			</Tab>
-			<svelte:fragment slot="content">
+			{#snippet content()}
 				<TabContent value="local">
 					{#if component && component.customCss !== undefined}
 						<div class="flex-col flex gap-4 divide-y">
@@ -235,7 +235,7 @@
 						{/each}
 					{/if}
 				</TabContent>
-			</svelte:fragment>
+			{/snippet}
 		</Tabs>
 
 		<ConfirmationModal
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
index 314b3b1957..a9fc5bfbdf 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
@@ -6,8 +6,8 @@
 		type Node,
 		type Edge,
 		ConnectionLineType,
-		type Viewport,
-		Controls
+		Controls,
+		SvelteFlowProvider
 	} from '@xyflow/svelte'
 
 	import {
@@ -23,23 +23,30 @@
 	import DecisionTreeGraphNode from '../DecisionTreeGraphNode.svelte'
 	import DecisionTreeGraphHeader from '../DecisionTreeGraphHeader.svelte'
 
-	import { writable, type Writable } from 'svelte/store'
+	import { type Writable } from 'svelte/store'
 	import type { AppComponent, DecisionTreeNode } from '../../component'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { AppViewerContext } from '$lib/components/apps/types'
 	import { deleteGridItem } from '../../appUtils'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let nodes: DecisionTreeNode[]
-	export let paneWidth = 0
-	export let paneHeight = 0
-	export let component: AppComponent
+	interface Props {
+		nodes: DecisionTreeNode[]
+		paneWidth?: number
+		paneHeight?: number
+		component: AppComponent
+		onrender: () => void
+	}
 
-	const nodesStore = writable<Node[]>([])
-	const edgesStore = writable<Edge[]>([])
+	let {
+		nodes = $bindable(),
+		paneWidth = 0,
+		paneHeight = 0,
+		component = $bindable(),
+		onrender
+	}: Props = $props()
 
-	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
+	let nodesStore = $state.raw<Node[]>([])
+	let edgesStore = $state.raw<Edge[]>([])
 
 	const { selectedNodeId } = getContext<{
 		selectedNodeId: Writable<string | undefined>
@@ -157,7 +164,7 @@
 			default:
 				break
 		}
-		dispatchIfMounted('render')
+		onrender()
 	}
 
 	function graphBuilder(decisionTreeNodes: DecisionTreeNode[]) {
@@ -378,11 +385,14 @@
 			}
 		})
 
-		$nodesStore = layoutNodes(nodes)
-		$edgesStore = edges
+		nodesStore = layoutNodes(nodes)
+		edgesStore = edges
 	}
 
-	$: graphBuilder(nodes)
+	$effect(() => {
+		;[nodes]
+		untrack(() => graphBuilder(nodes))
+	})
 
 	function layoutNodes(nodes: Node[]): Node[] {
 		let seenId: string[] = []
@@ -427,22 +437,6 @@
 		return newNodes
 	}
 
-	const viewport = writable<Viewport>({
-		x: 0,
-		y: 5,
-		zoom: 1
-	})
-
-	function centerViewport(width: number) {
-		viewport.update((vp) => ({
-			...vp,
-			x: width / 2,
-			y: vp.y
-		}))
-	}
-
-	$: paneWidth && centerViewport(paneWidth)
-
 	const nodeTypes = {
 		step: DecisionTreeGraphNode,
 		start: DecisionTreeGraphHeader,
@@ -450,21 +444,27 @@
 	} as any
 </script>
 
-<SvelteFlow
-	nodes={nodesStore}
-	edges={edgesStore}
-	{nodeTypes}
-	{viewport}
-	height={paneHeight}
-	minZoom={0.5}
-	connectionLineType={ConnectionLineType.SmoothStep}
-	defaultEdgeOptions={{ type: 'smoothstep' }}
-	zoomOnDoubleClick={false}
-	elementsSelectable={false}
-	proOptions={{ hideAttribution: true }}
-	nodesDraggable={false}
->
-	<div class="absolute inset-0 !bg-surface-secondary"></div>
+<SvelteFlowProvider>
+	<SvelteFlow
+		nodes={nodesStore}
+		edges={edgesStore}
+		{nodeTypes}
+		height={paneHeight}
+		minZoom={0.5}
+		initialViewport={{
+			x: paneWidth / 2,
+			y: 5,
+			zoom: 1
+		}}
+		connectionLineType={ConnectionLineType.SmoothStep}
+		defaultEdgeOptions={{ type: 'smoothstep' }}
+		zoomOnDoubleClick={false}
+		elementsSelectable={false}
+		proOptions={{ hideAttribution: true }}
+		nodesDraggable={false}
+	>
+		<div class="absolute inset-0 !bg-surface-secondary"></div>
 
-	<Controls position="top-right" orientation="horizontal" showLock={false} />
-</SvelteFlow>
+		<Controls position="top-right" orientation="horizontal" showLock={false} />
+	</SvelteFlow>
+</SvelteFlowProvider>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte
index 110ab76784..25c4baea3f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte
@@ -1,45 +1,27 @@
 <script lang="ts">
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
 	import type { StaticInput, StaticOptions } from '../../../inputType'
-	import Select from '$lib/components/apps/svelte-select/lib/index'
-	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
+	import Select from '$lib/components/Select.svelte'
 
-	export let componentInput: StaticInput<any> | undefined
-	export let selectOptions: StaticOptions['selectOptions'] | undefined = undefined
-	export let id: string | undefined
-
-	let selectedValue: string | undefined = componentInput?.value ?? undefined
-	let darkMode: boolean = false
-
-	$: sortedOptions = Array.isArray(selectOptions)
-		? selectOptions?.sort((a, b) => a.localeCompare(b))
-		: []
+	interface Props {
+		componentInput: StaticInput<any> | undefined
+		selectOptions?: StaticOptions['selectOptions'] | undefined
+		id: string | undefined
+	}
+	let { componentInput = $bindable(), selectOptions: _options = undefined, id }: Props = $props()
+	let options = $derived.by(() => {
+		if (!Array.isArray(_options)) return []
+		return _options
+			.map((o) => (typeof o === 'string' ? { label: o, value: o } : o))
+			.sort((a, b) => a.label.localeCompare(b.label))
+	})
 </script>
 
-<DarkModeObserver bind:darkMode />
-
-{#if selectOptions && componentInput}
+{#if options && componentInput}
 	<Select
-		portal={false}
-		value={selectedValue}
-		on:change={(e) => {
-			selectedValue = e.detail.value
-			if (componentInput?.type === 'static') {
-				componentInput.value = e.detail.value
-			}
-		}}
-		on:clear={() => {
-			if (componentInput?.type === 'static') {
-				componentInput.value = undefined
-			}
-		}}
-		items={sortedOptions}
+		bind:value={componentInput.value}
+		items={options}
 		class="text-clip grow min-w-0"
 		placeholder="Select a table"
-		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-		containerStyles={darkMode
-			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 		clearable
 	/>
 {:else}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index d3ddb5abdc..969cd6683e 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import type { InputType, StaticInput, StaticOptions } from '../../../inputType'
 	import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
@@ -26,32 +29,61 @@
 	import S3FilePicker from '$lib/components/S3FilePicker.svelte'
 	import FileUpload from '$lib/components/common/fileUpload/FileUpload.svelte'
 
-	export let componentInput: StaticInput<any> | undefined
-	export let fieldType: InputType | undefined = undefined
-	export let subFieldType: InputType | undefined = undefined
-	export let selectOptions: StaticOptions['selectOptions'] | undefined = undefined
-	export let placeholder: string | undefined = undefined
-	export let format: string | undefined = undefined
-	export let id: string | undefined
+	interface Props {
+		componentInput: StaticInput<any> | undefined
+		fieldType?: InputType | undefined
+		subFieldType?: InputType | undefined
+		selectOptions?: StaticOptions['selectOptions'] | undefined
+		placeholder?: string | undefined
+		format?: string | undefined
+		id: string | undefined
+	}
+
+	let {
+		componentInput = $bindable(),
+		fieldType = undefined,
+		subFieldType = undefined,
+		selectOptions = undefined,
+		placeholder = undefined,
+		format = undefined,
+		id
+	}: Props = $props()
 
 	const appContext = getContext<AppViewerContext>('AppViewerContext')
 
-	$: componentInput && appContext?.onchange?.()
-	let s3FileUploadRawMode = false
-	let s3FilePicker: S3FilePicker | undefined = undefined
+	$effect(() => {
+		componentInput && appContext?.onchange?.()
+	})
+	let s3FileUploadRawMode = $state(false)
+	let s3FilePicker: S3FilePicker | undefined = $state(undefined)
 </script>
 
 {#key subFieldType}
 	{#if componentInput?.type === 'static'}
 		{#if fieldType === 'number' || fieldType === 'integer'}
-			<input on:keydown|stopPropagation type="number" bind:value={componentInput.value} />
+			<input
+				onkeydown={stopPropagation(bubble('keydown'))}
+				type="number"
+				bind:value={componentInput.value}
+			/>
 		{:else if fieldType === 'textarea'}
-			<textarea use:autosize on:keydown|stopPropagation bind:value={componentInput.value}
+			<textarea
+				use:autosize
+				onkeydown={stopPropagation(bubble('keydown'))}
+				bind:value={componentInput.value}
 			></textarea>
 		{:else if fieldType === 'date'}
-			<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
+			<input
+				onkeydown={stopPropagation(bubble('keydown'))}
+				type="date"
+				bind:value={componentInput.value}
+			/>
 		{:else if fieldType === 'time'}
-			<input on:keydown|stopPropagation type="time" bind:value={componentInput.value} />
+			<input
+				onkeydown={stopPropagation(bubble('keydown'))}
+				type="time"
+				bind:value={componentInput.value}
+			/>
 		{:else if fieldType === 'datetime'}
 			<DateTimeInput bind:value={componentInput.value} />
 		{:else if fieldType === 'boolean'}
@@ -60,7 +92,7 @@
 			{#if subFieldType === 'db-table'}
 				<DBTableSelect bind:componentInput {selectOptions} {id} />
 			{:else}
-				<select on:keydown|stopPropagation bind:value={componentInput.value}>
+				<select onkeydown={stopPropagation(bubble('keydown'))} bind:value={componentInput.value}>
 					{#each selectOptions ?? [] as option}
 						{#if typeof option == 'string'}
 							<option value={option}>
@@ -114,7 +146,7 @@
 			{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value && (componentInput.value?.['value'] == undefined || typeof componentInput.value?.['value'] == 'string')}
 				<div class="flex flex-col gap-1 w-full">
 					<input
-						on:keydown|stopPropagation
+						onkeydown={stopPropagation(bubble('keydown'))}
 						placeholder="Label"
 						type="text"
 						bind:value={componentInput.value['label']}
@@ -395,13 +427,21 @@
 				</div>
 			</div>
 		{:else if fieldType === 'app-path'}
-			<AppPicker bind:value={componentInput.value} />
+			<AppPicker
+				bind:value={
+					() => componentInput!.value,
+					(v) => {
+						componentInput!.value = v
+						componentInput = $state.snapshot(componentInput)
+					}
+				}
+			/>
 		{:else}
 			<div class="flex gap-1 relative w-full">
 				<textarea
 					rows="1"
 					use:autosize
-					on:keydown|stopPropagation
+					onkeydown={stopPropagation(bubble('keydown'))}
 					placeholder={placeholder ?? 'Static value'}
 					bind:value={componentInput.value}
 					class="!pr-12"
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/tabs.svelte.ts b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/tabs.svelte.ts
new file mode 100644
index 0000000000..91c9c3c47e
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/tabs.svelte.ts
@@ -0,0 +1,7 @@
+import type { Writable } from 'svelte/store'
+
+export type TabsContext = {
+	selected: Writable<string>
+	update: (value: string) => void
+	hashNavigation: boolean
+}
diff --git a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
index f702d2585b..1e737917dc 100644
--- a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import { writable } from 'svelte/store'
 
 	const componentDraggedIdStore = writable<string | undefined>(undefined)
@@ -41,35 +41,52 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	export let items: FilledItem<T>[]
-	export let rowHeight: number = ROW_HEIGHT
+	interface Props {
+		items: FilledItem<T>[]
+		rowHeight?: number
+		gap?: any
+		throttleUpdate?: number
+		throttleResize?: number
+		selectedIds: string[] | undefined
+		allIdsInPath: string[] | undefined
+		containerWidth?: number | undefined
+		scroller?: HTMLElement | undefined
+		sensor?: number
+		root?: boolean
+		parentWidth?: number | undefined
+		disableMove?: boolean
+		children?: import('svelte').Snippet<[any]>
+	}
 
-	export let gap = [ROW_GAP_X, ROW_GAP_Y]
-	export let throttleUpdate = 100
-	export let throttleResize = 100
-	export let selectedIds: string[] | undefined
-	export let allIdsInPath: string[] | undefined
-	export let containerWidth: number | undefined = undefined
-	export let scroller: HTMLElement | undefined = undefined
-	export let sensor = 20
-	export let root: boolean = false
-	export let parentWidth: number | undefined = undefined
-	export let disableMove: boolean = false
+	let {
+		items,
+		rowHeight = ROW_HEIGHT,
+		gap = [ROW_GAP_X, ROW_GAP_Y],
+		throttleUpdate = 100,
+		throttleResize = 100,
+		selectedIds,
+		allIdsInPath,
+		containerWidth = $bindable(undefined),
+		scroller = undefined,
+		sensor = 20,
+		root = false,
+		parentWidth = undefined,
+		disableMove = false,
+		children
+	}: Props = $props()
 	const cols = columnConfiguration
 
-	let getComputedCols: 3 | 12 | undefined =
+	let getComputedCols: 3 | 12 | undefined = $state(
 		$app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined
-	let container
+	)
+	let container = $state()
 
-	$: [gapX, gapY] = gap
-
-	let xPerPx = 0
+	let xPerPx = $state(0)
 	let yPerPx = rowHeight
 
-	$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols)
-
 	const onResize = throttle(() => {
-		items = specifyUndefinedColumns(items, getComputedCols, cols)
+		if (!getComputedCols) return
+		sortedItems = specifyUndefinedColumns(sortedItems, getComputedCols, cols)
 		dispatch('resize', {
 			cols: getComputedCols,
 			xPerPx,
@@ -78,7 +95,7 @@
 		})
 	}, throttleUpdate)
 
-	let mounted = false
+	let mounted = $state(false)
 
 	onMount(() => {
 		const sizeObserver = new ResizeObserver((entries) => {
@@ -97,8 +114,8 @@
 				}
 				xPerPx = width / getComputedCols!
 
-				if (!containerWidth) {
-					items = specifyUndefinedColumns(items, getComputedCols, cols)
+				if (!containerWidth && getComputedCols) {
+					sortedItems = specifyUndefinedColumns(sortedItems, getComputedCols, cols)
 
 					dispatch('mount', {
 						cols: getComputedCols,
@@ -114,15 +131,14 @@
 			})
 		})
 
-		sizeObserver.observe(container)
+		sizeObserver.observe(container as Element)
 
 		return () => sizeObserver.disconnect()
 	})
 
-	let sortedItems: FilledItem<T>[] = []
-	$: sortedItems = smartCopy(items).sort((a, b) => a.id.localeCompare(b.id))
+	let sortedItems: FilledItem<T>[] = $state([])
 
-	let resizing: boolean = false
+	let resizing: boolean = $state(false)
 
 	function handleKeyUp(event) {
 		if ((event.key === 'Control' || event.key === 'Meta') && $isCtrlOrMetaPressedStore) {
@@ -142,9 +158,9 @@
 			? items.map((item) => {
 					return {
 						...item,
-						[getComputedCols as number]: structuredClone(item[getComputedCols as number])
+						[getComputedCols as number]: { ...item[getComputedCols as number] }
 					}
-			  })
+				})
 			: []
 	}
 	const updateMatrix = ({ detail }) => {
@@ -167,9 +183,8 @@
 		if (detail.id && !selectedIds?.includes(detail.id)) {
 			nselectedIds = [detail.id, ...(selectedIds ?? [])]
 		}
-		sortedItems = citems
 		for (let id of nselectedIds) {
-			let activeItem = getItemById(id, sortedItems)
+			let activeItem = getItemById(id, citems)
 
 			if (activeItem && getComputedCols) {
 				activeItem = {
@@ -182,7 +197,7 @@
 
 				if ($isCtrlOrMetaPressedStore) {
 					if ($componentDraggedParentIdStore === $overlappedStore) {
-						const fixedContainer = sortedItems.map((item) => {
+						const fixedContainer = citems.map((item) => {
 							if (isContainer(item.data['type'])) {
 								initialFixedStates.set(item.id, {
 									item3Fixed: item[3].fixed,
@@ -196,9 +211,9 @@
 							return item
 						})
 
-						let { items } = moveItem(activeItem, fixedContainer, getComputedCols)
+						let { items: nitems } = moveItem(activeItem, fixedContainer, getComputedCols)
 
-						items = items.map((item) => {
+						nitems = nitems.map((item) => {
 							if (initialFixedStates.has(item.id)) {
 								const initialState = initialFixedStates.get(item.id)
 
@@ -210,12 +225,12 @@
 							return item
 						})
 
-						sortedItems = items
+						sortedItems = nitems
 					}
 				} else {
-					let { items } = moveItem(activeItem, sortedItems, getComputedCols)
+					let { items: nitems } = moveItem(activeItem, citems, getComputedCols)
 
-					sortedItems = items
+					sortedItems = nitems
 				}
 			}
 		}
@@ -235,8 +250,16 @@
 
 	//let hiddenComponents = writable({})
 
-	let lastDetail: { isPointerUp: false; activate: false; id: string | undefined } | undefined =
-		undefined
+	let lastDetail:
+		| {
+				cordDiff: { x: number; y: number }
+				clientY: number
+				intersectingElement?: string | undefined
+				shadow?: GridShadow | undefined
+				overlapped?: string | undefined
+		  }
+		| undefined = $state(undefined)
+
 	const handleRepaint = ({ detail }) => {
 		if (!detail.isPointerUp) {
 			throttleMatrix({ detail })
@@ -270,12 +293,20 @@
 	}
 
 	let moveResizes: Record<string, MoveResize> = {}
-	let shadows: Record<string, { x: number; y: number; w: number; h: number } | undefined> = {}
+	let shadows: Record<string, { x: number; y: number; w: number; h: number } | undefined> = $state(
+		{}
+	)
 
-	export function handleMove({ detail }) {
+	export function handleMove(detail: {
+		cordDiff: { x: number; y: number }
+		clientY: number
+		intersectingElement?: string | undefined
+		shadow?: GridShadow | undefined
+		overlapped?: string | undefined
+	}) {
 		Object.entries(moveResizes).forEach(([id, moveResize]) => {
 			if (selectedIds?.includes(id)) {
-				moveResize?.updateMove(structuredClone(detail.cordDiff), detail.eventY)
+				moveResize?.updateMove(detail.cordDiff, detail.clientY)
 			}
 		})
 
@@ -301,7 +332,7 @@
 				draggedItem[getComputedCols].y = detail.shadow.y
 			}
 
-			let items: GridItem[] = []
+			let nitems: GridItem[] = []
 
 			if ($overlappedStore) {
 				const div = document.getElementById(`component-${$overlappedStore}`)
@@ -313,16 +344,16 @@
 
 				const index = type ? subGridIndexKey(type, $overlappedStore, $worldStore) : 0
 
-				items = $app.subgrids[`${$overlappedStore}-${index}`] ?? []
+				nitems = $app.subgrids[`${$overlappedStore}-${index}`] ?? []
 			} else {
-				items = $app.grid ?? []
+				nitems = $app.grid ?? []
 			}
 
 			if (!draggedItem) {
 				return
 			}
 
-			const freeSpace = gridHelp.findSpace(draggedItem, items, getComputedCols)
+			const freeSpace = gridHelp.findSpace(draggedItem, nitems, getComputedCols)
 
 			$fakeShadowStore = {
 				x: freeSpace.x,
@@ -354,16 +385,21 @@
 			}
 		})
 	}
+	let [gapX, gapY] = $derived(gap)
+	let containerHeight = $derived(getContainerHeight(items, yPerPx, getComputedCols))
+	$effect.pre(() => {
+		sortedItems = smartCopy(items).sort((a, b) => a.id.localeCompare(b.id))
+	})
 </script>
 
 <svelte:window
-	on:focus={() => {
+	onfocus={() => {
 		if ($isCtrlOrMetaPressedStore) {
 			$isCtrlOrMetaPressedStore = false
 		}
 	}}
-	on:keydown={handleKeyDown}
-	on:keyup={handleKeyUp}
+	onkeydown={handleKeyDown}
+	onkeyup={handleKeyUp}
 />
 
 <div
@@ -455,7 +491,7 @@
 				<MoveResize
 					{mounted}
 					on:initmove={() => handleInitMove(item.id)}
-					on:move={handleMove}
+					onMove={handleMove}
 					bind:shadow={shadows[item.id]}
 					bind:this={moveResizes[item.id]}
 					on:repaint={handleRepaint}
@@ -482,7 +518,7 @@
 					width={xPerPx == 0
 						? 0
 						: Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
-						  gapX * 2}
+							gapX * 2}
 					height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
 					top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
 					left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
@@ -499,13 +535,13 @@
 					{disableMove}
 				>
 					{#if item[getComputedCols]}
-						<slot
-							dataItem={item}
-							hidden={false}
-							overlapped={$overlappedStore}
-							moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
-							componentDraggedId={$componentDraggedIdStore}
-						/>
+						{@render children?.({
+							dataItem: item,
+							hidden: false,
+							overlapped: $overlappedStore,
+							moveMode: $isCtrlOrMetaPressedStore ? 'insert' : 'move',
+							componentDraggedId: $componentDraggedIdStore
+						})}
 					{/if}
 				</MoveResize>
 			{/if}
diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
index 7507ab6388..902d87dbec 100644
--- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -13,33 +13,65 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let sensor
-	export let width
-	export let height
-	export let left
-	export let top
+	interface Props {
+		sensor: any
+		width: any
+		height: any
+		left: any
+		top: any
+		id: any
+		container: any
+		xPerPx: any
+		yPerPx: any
+		gapX: any
+		gapY: any
+		item: any
+		cols: any
+		nativeContainer: any
+		onTop: any
+		shadow?: { x: number; y: number; w: number; h: number } | undefined
+		overlapped?: string | undefined
+		moveMode?: 'move' | 'insert'
+		type?: string | undefined
+		fakeShadow?: GridShadow | undefined
+		disableMove?: boolean
+		mounted?: boolean
+		onMove: (detail: {
+			cordDiff: { x: number; y: number }
+			clientY: number
+			intersectingElement?: string | undefined
+			shadow?: GridShadow | undefined
+			overlapped?: string | undefined
+		}) => void
+		children?: import('svelte').Snippet
+	}
 
-	export let id
-	export let container
-
-	export let xPerPx
-	export let yPerPx
-
-	export let gapX
-	export let gapY
-	export let item
-
-	export let cols
-
-	export let nativeContainer
-	export let onTop
-	export let shadow: { x: number; y: number; w: number; h: number } | undefined = undefined
-	export let overlapped: string | undefined = undefined
-	export let moveMode: 'move' | 'insert' = 'move'
-	export let type: string | undefined = undefined
-	export let fakeShadow: GridShadow | undefined = undefined
-	export let disableMove: boolean = true
-	export let mounted: boolean = false
+	let {
+		sensor,
+		width,
+		height,
+		left,
+		top,
+		id,
+		container,
+		xPerPx,
+		yPerPx,
+		gapX,
+		gapY,
+		item,
+		cols,
+		nativeContainer,
+		onTop,
+		shadow = $bindable(undefined),
+		overlapped = undefined,
+		moveMode = 'move',
+		type = undefined,
+		fakeShadow = undefined,
+		disableMove = true,
+		mounted = false,
+		onMove,
+		children
+	}: Props = $props()
 
 	const ctx = getContext<AppEditorContext>('AppEditorContext')
 	const { mode, app } = getContext<AppViewerContext>('AppViewerContext')
@@ -47,9 +79,9 @@
 	const scale = ctx ? ctx.scale : writable(100)
 
 	const divId = `component-${id}`
-	let shadowElement
+	let shadowElement: HTMLElement | undefined = $state()
 
-	let active = false
+	let active = $state(false)
 
 	let initX, initY
 
@@ -58,10 +90,10 @@
 		y: 0
 	}
 
-	let cordDiff = { x: 0, y: 0 }
+	let cordDiff = $state({ x: 0, y: 0 })
 
-	let newSize = { width, height }
-	let trans = false
+	let newSize = $state({ width, height })
+	let trans = $state(false)
 
 	let anima
 
@@ -88,7 +120,7 @@
 						y: (moveY / $scale) * 100 - initY
 					}
 
-					dispatch('move', { cordDiff, clientY: clientY })
+					onMove({ cordDiff, clientY: clientY })
 				}
 				return x
 			})
@@ -114,6 +146,8 @@
 				shadowBound = irect
 			}
 
+			if (!rect) return
+
 			const xdragBound = rect.left + cordDiff.x
 			const ydragBound = rect.top + cordDiff.y
 
@@ -142,7 +176,7 @@
 	// Autoscroll
 	let _scrollTop = 0
 	let containerFrame
-	let rect
+	let rect = $state() as { top: number; left: number } | undefined
 	let scrollElement
 
 	const getContainerFrame = (element) => {
@@ -205,7 +239,6 @@
 
 		containerFrame = getContainerFrame(container)
 		scrollElement = getScroller(container)
-
 		_scrollTop = scrollElement.scrollTop
 	}
 
@@ -256,7 +289,7 @@
 		const cordDiff = { x: (clientX / $scale) * 100 - initX, y: (clientY / $scale) * 100 - initY }
 
 		if (moveMode === 'move') {
-			dispatch('move', {
+			onMove({
 				cordDiff,
 				clientY,
 				intersectingElement: undefined,
@@ -268,7 +301,7 @@
 
 		throttledComputeShadow(clientX, clientY)
 
-		dispatch('move', {
+		onMove({
 			cordDiff,
 			clientY,
 			intersectingElement: currentIntersectingElementId,
@@ -285,7 +318,6 @@
 			trans = false
 		}
 		cordDiff = newCoordDiff
-		// console.log(cordDiff, id, 'B')
 		const Y_SENSOR = sensor
 
 		if (containerFrame) {
@@ -317,7 +349,7 @@
 		}
 	}
 
-	let element: HTMLElement | undefined = undefined
+	let element: HTMLElement | undefined = $state(undefined)
 
 	function computeShadow(clientX: number, clientY: number) {
 		const elementsAtPoint = document.elementsFromPoint(clientX, clientY)
@@ -481,12 +513,16 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	bind:this={element}
 	draggable="false"
-	on:pointerdown|stopPropagation|preventDefault={pointerdown}
+	onpointerdown={(e) => {
+		e.stopPropagation()
+		e.preventDefault()
+		pointerdown(e)
+	}}
 	id={divId}
 	class="svlt-grid-item"
 	data-iscontainer={type ? isContainer(type) : false}
@@ -495,30 +531,26 @@
 	style="width: {xPerPx == 0 ? 0 : active ? newSize.width : width}px; height:{xPerPx == 0
 		? 0
 		: active
-		? newSize.height
-		: height}px; 
+			? newSize.height
+			: height}px; 
 	{xPerPx == 0 ? 'overflow: hidden;' : ''}
 	{onTop ? 'z-index: 1000;' : ''}
 	
   {active && rect
 		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;z-index:10000;`
 		: trans
-		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
-		: `${
-				xPerPx > 0 && mounted ? 'transition: transform 0.1s, opacity 0.1s;' : ''
-		  } transform: translate(${left}px, ${top}px); `} "
+			? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
+			: `${
+					xPerPx > 0 && mounted ? 'transition: transform 0.1s, opacity 0.1s;' : ''
+				} transform: translate(${left}px, ${top}px); `} "
 >
-	<slot />
+	{@render children?.()}
 	{#if moveMode === 'move' && !disableMove}
-		<div
-			class="svlt-grid-resizer-bottom"
-			on:pointerdown={(e) => resizePointerDown(e, 'vertical')}
+		<div class="svlt-grid-resizer-bottom" onpointerdown={(e) => resizePointerDown(e, 'vertical')}
 		></div>
-		<div
-			class="svlt-grid-resizer-side"
-			on:pointerdown={(e) => resizePointerDown(e, 'horizontal')}
+		<div class="svlt-grid-resizer-side" onpointerdown={(e) => resizePointerDown(e, 'horizontal')}
 		></div>
-		<div class="svlt-grid-resizer" on:pointerdown={(e) => resizePointerDown(e, 'both')}></div>
+		<div class="svlt-grid-resizer" onpointerdown={(e) => resizePointerDown(e, 'both')}></div>
 	{/if}
 </div>
 
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/item.ts b/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
index aacc8c9b36..27e3464f30 100644
--- a/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
@@ -8,7 +8,7 @@ import {
 } from './matrix'
 import { getRowsCount } from './other'
 
-export function getItemById(id, items) {
+export function getItemById<T>(id: string, items: FilledItem<T>[]) {
 	return items.find((value) => value.id === id)
 }
 
@@ -25,7 +25,7 @@ export function isEmpty(matrix: any[][], x: number, y: number, w: number, h: num
 	return true
 }
 
-function distance(a, b): number {
+function distance(a: { x: number; y: number }, b: { x: number; y: number }): number {
 	return Math.abs(a.x - b.x + 0.25) + Math.abs(a.y - b.y + 0.25)
 }
 
@@ -65,11 +65,12 @@ export function findFreeSpaceForItem<T>(matrix: FilledItem<T>[][], item: ItemLay
 	}
 }
 
-const getItem = (item, col) => {
-	return { ...item[col] }
-}
-
-const updateItem = (elements, active, position, col) => {
+const updateItem = <T>(
+	elements: FilledItem<T>[],
+	active: FilledItem<T>,
+	position: { x: number; y: number },
+	col: number
+) => {
 	return elements.map((value) => {
 		if (value.id === active.id) {
 			return { ...value, [col]: { ...value[col], ...position } }
@@ -119,9 +120,9 @@ const updateItem = (elements, active, position, col) => {
 // 	return tempItems
 // }
 
-export function moveItem(active, items, cols) {
+export function moveItem<T>(active: FilledItem<T>, items: FilledItem<T>[], cols: number) {
 	// Get current item from the breakpoint
-	const item = getItem(active, cols)
+	const item = { ...active[cols] }
 	// console.log(JSON.stringify(item), JSON.stringify(active), JSON.stringify(cols), 3, cols)
 
 	// Create matrix from the items expect the active
@@ -141,13 +142,13 @@ export function moveItem(active, items, cols) {
 	}
 
 	// Update items
-	items = updateItem(items, active, item, cols)
+	const nitems = updateItem(items, active, item, cols)
 
 	// Create matrix of items expect close elements
-	matrix = makeMatrixFromItemsIgnore(items, closeBlocks, getRowsCount(items, cols), cols)
+	matrix = makeMatrixFromItemsIgnore(nitems, closeBlocks, getRowsCount(nitems, cols), cols)
 
 	// Create temp vars
-	let tempItems = items
+	let tempItems = nitems
 	let tempCloseBlocks = closeBlocks
 
 	// Exclude resolved elements ids in array
@@ -219,7 +220,7 @@ export function adjust<T>(items: FilledItem<T>[], col) {
 	return res
 }
 
-export function getUndefinedItems(items, col, breakpoints) {
+export function getUndefinedItems<T>(items: FilledItem<T>[], col: number) {
 	return items
 		.map((value) => {
 			if (!value[col]) {
@@ -229,7 +230,11 @@ export function getUndefinedItems(items, col, breakpoints) {
 		.filter(Boolean)
 }
 
-export function getClosestColumn(items, item, col, breakpoints) {
+export function getClosestColumn<T>(
+	item: FilledItem<T>,
+	col: number,
+	breakpoints: [number, number][]
+) {
 	return breakpoints
 		.map(([_, column]) => item[column] && column)
 		.filter(Boolean)
@@ -240,31 +245,36 @@ export function getClosestColumn(items, item, col, breakpoints) {
 		})
 }
 
-export function specifyUndefinedColumns(items, col, breakpoints) {
+export function specifyUndefinedColumns<T>(
+	items: FilledItem<T>[],
+	col: number,
+	breakpoints: [number, number][]
+) {
 	let matrix = makeMatrixFromItems(items, getRowsCount(items, col), col)
 
-	const getUndefinedElements = getUndefinedItems(items, col, breakpoints)
+	const getUndefinedElements = getUndefinedItems(items, col)
 
 	let newItems = [...items]
 
 	getUndefinedElements.forEach((elementId) => {
 		const getElement = items.find((item) => item.id === elementId)
+		if (getElement) {
+			const closestColumn = getClosestColumn(getElement, col, breakpoints)
 
-		const closestColumn = getClosestColumn(items, getElement, col, breakpoints)
+			const position = findFreeSpaceForItem(matrix, getElement[closestColumn])
 
-		const position = findFreeSpaceForItem(matrix, getElement[closestColumn])
-
-		const newItem = {
-			...getElement,
-			[col]: {
-				...getElement[closestColumn],
-				...position
+			const newItem = {
+				...getElement,
+				[col]: {
+					...getElement[closestColumn],
+					...position
+				}
 			}
+
+			newItems = newItems.map((value) => (value.id === elementId ? newItem : value))
+
+			matrix = makeMatrixFromItems(newItems, getRowsCount(newItems, col), col)
 		}
-
-		newItems = newItems.map((value) => (value.id === elementId ? newItem : value))
-
-		matrix = makeMatrixFromItems(newItems, getRowsCount(newItems, col), col)
 	})
 	return newItems
 }
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/matrix.ts b/frontend/src/lib/components/apps/svelte-grid/utils/matrix.ts
index 410b6027f6..04f946955f 100644
--- a/frontend/src/lib/components/apps/svelte-grid/utils/matrix.ts
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/matrix.ts
@@ -1,65 +1,78 @@
-import type { FilledItem } from "../types";
+import type { FilledItem } from '../types'
 
-export const makeMatrix: (w: number, h: number) => any[][] = (rows, cols) => Array.from(Array(rows), () => new Array(cols)); // make 2d array
+export const makeMatrix: (w: number, h: number) => any[][] = (rows, cols) =>
+	Array.from(Array(rows), () => new Array(cols)) // make 2d array
 
-export function makeMatrixFromItems<T>(items: FilledItem<T>[], row: number, col: number): FilledItem<T>[][] {
-  let matrix = makeMatrix(row, col);
+export function makeMatrixFromItems<T>(
+	items: FilledItem<T>[],
+	row: number,
+	col: number
+): FilledItem<T>[][] {
+	let matrix = makeMatrix(row, col)
 
-  for (var i = 0; i < items.length; i++) {
-    const value = items[i][col];
-    if (value) {
-      const { x, y, h } = value;
-      const id = items[i].id;
-      const w = Math.min(col, value.w);
+	for (var i = 0; i < items.length; i++) {
+		const value = items[i][col]
+		if (value) {
+			const { x, y, h } = value
+			const id = items[i].id
+			const w = Math.min(col, value.w)
 
-      for (var j = y; j < y + h; j++) {
-        const row = matrix[j];
-        for (var k = x; k < x + w; k++) {
-          row[k] = { ...value, id };
-        }
-      }
-    }
-  }
-  return matrix;
+			for (var j = y; j < y + h; j++) {
+				const row = matrix[j]
+				for (var k = x; k < x + w; k++) {
+					row[k] = { ...value, id }
+				}
+			}
+		}
+	}
+	return matrix
 }
 
 export function findCloseBlocks<T>(matrix: FilledItem<T>[][], curObject) {
-  const { h, x, y } = curObject;
+	const { h, x, y } = curObject
 
-  const w = Math.min(matrix[0].length, curObject.w);
-  const tempR = matrix.slice(y, y + h);
+	const w = Math.min(matrix[0].length, curObject.w)
+	const tempR = matrix.slice(y, y + h)
 
-  let result: string[] = [];
-  for (var i = 0; i < tempR.length; i++) {
-    let tempA = tempR[i].slice(x, x + w);
-    result = [...result, ...tempA.map((val) => val?.id).filter((id) => id !== undefined && id !== curObject.id)];
-  }
+	let result: string[] = []
+	for (var i = 0; i < tempR.length; i++) {
+		let tempA = tempR[i].slice(x, x + w)
+		result = [
+			...result,
+			...tempA.map((val) => val?.id).filter((id) => id !== undefined && id !== curObject.id)
+		]
+	}
 
-  return [...new Set(result)];
+	return [...new Set(result)]
 }
 
-export function makeMatrixFromItemsIgnore(items, ignoreList, _row, _col) {
-  let matrix = makeMatrix(_row, _col);
-  for (var i = 0; i < items.length; i++) {
-    const value = items[i][_col];
-    const id = items[i].id;
-    const { x, y, h } = value;
-    const w = Math.min(_col, value.w);
+export function makeMatrixFromItemsIgnore<T>(
+	items: FilledItem<T>[],
+	ignoreList: string[],
+	row: number,
+	col: number
+) {
+	let matrix = makeMatrix(row, col)
+	for (var i = 0; i < items.length; i++) {
+		const value = items[i][col]
+		const id = items[i].id
+		const { x, y, h } = value
+		const w = Math.min(col, value.w)
 
-    if (ignoreList.indexOf(id) === -1) {
-      for (var j = y; j < y + h; j++) {
-        const row = matrix[j];
-        if (row) {
-          for (var k = x; k < x + w; k++) {
-            row[k] = { ...value, id };
-          }
-        }
-      }
-    }
-  }
-  return matrix;
+		if (ignoreList.indexOf(id) === -1) {
+			for (var j = y; j < y + h; j++) {
+				const row = matrix[j]
+				if (row) {
+					for (var k = x; k < x + w; k++) {
+						row[k] = { ...value, id }
+					}
+				}
+			}
+		}
+	}
+	return matrix
 }
 
 export function findItemsById<T>(closeBlocks: string[], items: FilledItem<T>[]) {
-  return items.filter((value) => closeBlocks.indexOf(value.id) !== -1);
+	return items.filter((value) => closeBlocks.indexOf(value.id) !== -1)
 }
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/Select.svelte b/frontend/src/lib/components/apps/svelte-select/lib/SelectLegacy.svelte
similarity index 100%
rename from frontend/src/lib/components/apps/svelte-select/lib/Select.svelte
rename to frontend/src/lib/components/apps/svelte-select/lib/SelectLegacy.svelte
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/index.js b/frontend/src/lib/components/apps/svelte-select/lib/index.js
index 7a0599e5b8..80d0787c5f 100644
--- a/frontend/src/lib/components/apps/svelte-select/lib/index.js
+++ b/frontend/src/lib/components/apps/svelte-select/lib/index.js
@@ -1 +1 @@
-export { default as default } from './Select.svelte'
+export { default as default } from './SelectLegacy.svelte'
diff --git a/frontend/src/lib/components/auditLogs/AuditLogDetails.svelte b/frontend/src/lib/components/auditLogs/AuditLogDetails.svelte
index 7e1e546ac0..3fdf9a31ad 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogDetails.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogDetails.svelte
@@ -3,8 +3,12 @@
 	import { type AuditLog } from '$lib/gen'
 	import { ArrowRight } from 'lucide-svelte'
 
-	export let logs: AuditLog[]
-	export let selectedId: number | undefined = undefined
+	interface Props {
+		logs: AuditLog[]
+		selectedId?: number | undefined
+	}
+
+	let { logs, selectedId = undefined }: Props = $props()
 
 	const ViewFlowOp: AuditLog['operation'][] = ['jobs.run.flow', 'flows.create', 'flows.update']
 
diff --git a/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
index 2bb9ed0756..686bc4f328 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
@@ -2,18 +2,23 @@
 	import { Filter } from 'lucide-svelte'
 	import { Button } from '../common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	interface Props {
+		filters?: import('svelte').Snippet
+	}
+
+	let { filters }: Props = $props()
 </script>
 
 <Popover
 	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 	contentClasses="border rounded-lg shadow-lg p-4 flex flex-col w-80 pt-8 bg-surface"
 >
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
 			Filters
 		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<slot name="filters" />
-	</svelte:fragment>
+	{/snippet}
+	{#snippet content()}
+		{@render filters?.()}
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index a28bd1dafd..cc5fc7aafc 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
@@ -1,3 +1,18 @@
+<script lang="ts" module>
+	async function loadResources(workspace: string): Promise<string[]> {
+		const r = await ResourceService.listResource({ workspace })
+		const sPaths = await ScriptService.listScriptPaths({ workspace })
+		const fPaths = await FlowService.listFlowPaths({ workspace })
+		const a = await AppService.listApps({ workspace })
+		return r
+			.map((r) => r.path)
+			.concat(sPaths)
+			.concat(fPaths)
+			.concat(a.map((a) => a.path))
+			.sort()
+	}
+</script>
+
 <script lang="ts">
 	import { goto } from '$lib/navigation'
 	import type { ActionKind } from '$lib/common'
@@ -15,28 +30,60 @@
 	} from '$lib/gen'
 
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { Loader2, RefreshCcw } from 'lucide-svelte'
-	import { onDestroy, tick } from 'svelte'
-	import AutoComplete from 'simple-svelte-autocomplete'
+	import { ChevronDown, Loader2, RefreshCcw } from 'lucide-svelte'
+	import { onDestroy, tick, untrack } from 'svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
+	import Select from '../Select.svelte'
+	import { usePromise } from '$lib/svelte5Utils.svelte'
 
-	let usernames: string[]
-	let resources: string[]
-	let loading: boolean = false
+	let usernames: string[] | undefined = $state()
+	let resources = usePromise(() => loadResources($workspaceStore!), { loadInit: false })
+	let loading: boolean = $state(false)
 	let page: number | undefined = undefined
 
-	export let logs: AuditLog[] = []
-	export let username: string = 'all'
-	export let pageIndex: number | undefined = 1
-	export let hasMore: boolean = false
-	export let before: string | undefined = undefined
-	export let after: string | undefined = undefined
-	export let perPage: number | undefined = 100
-	export let operation: string = 'all'
-	export let resource: string | undefined = 'all'
-	export let actionKind: ActionKind | 'all' = 'all'
-	export let scope: undefined | 'all_workspaces' | 'instance' = undefined
+	interface Props {
+		logs?: AuditLog[]
+		username?: string
+		pageIndex?: number | undefined
+		hasMore?: boolean
+		before?: string | undefined
+		after?: string | undefined
+		perPage?: number | undefined
+		operation?: string
+		resource?: string | undefined
+		actionKind?: ActionKind | 'all'
+		scope?: undefined | 'all_workspaces' | 'instance'
+	}
+
+	let {
+		logs = $bindable(undefined),
+		username = $bindable('all'),
+		pageIndex = $bindable(1),
+		hasMore = $bindable(false),
+		before = $bindable(undefined),
+		after = $bindable(undefined),
+		perPage = $bindable(100),
+		operation = $bindable(),
+		resource = $bindable() as string | undefined,
+		actionKind = $bindable(undefined),
+		scope = $bindable(undefined)
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (logs == undefined) {
+			logs = []
+		}
+		if (operation == undefined) {
+			operation = 'all'
+		}
+		if (resource == undefined) {
+			resource = 'all'
+		}
+		if (actionKind == undefined) {
+			actionKind = 'all'
+		}
+	})
 
 	async function loadLogs(
 		username: string | undefined,
@@ -91,33 +138,10 @@
 				: [$userStore?.username ?? '']
 	}
 
-	async function loadResources() {
-		const r = await ResourceService.listResource({
-			workspace: $workspaceStore!
-		})
-		const sPaths = await ScriptService.listScriptPaths({
-			workspace: $workspaceStore!
-		})
-		const fPaths = await FlowService.listFlowPaths({
-			workspace: $workspaceStore!
-		})
-		const a = await AppService.listApps({
-			workspace: $workspaceStore!
-		})
-		resources = r
-			.map((r) => r.path)
-			.concat(sPaths)
-			.concat(fPaths)
-			.concat(a.map((a) => a.path))
-			.sort()
-	}
-
-	$: $workspaceStore && refresh && refreshLogs()
-
 	let initialLoad = true
 	function refreshLogs() {
 		loadUsers()
-		loadResources()
+		resources.refresh()
 		loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope)
 		tick().then(() => {
 			initialLoad = false
@@ -168,12 +192,6 @@
 		updateLogs()
 	}
 
-	// observe all the variables that should trigger an update
-	$: username, perPage, before, after, operation, resource, actionKind, scope, updateQueryParams()
-
-	// observe the pageIndex variable that should trigger an update
-	$: updatePageQueryParams(pageIndex)
-
 	window.addEventListener('popstate', handlePopState)
 
 	function handlePopState() {
@@ -282,7 +300,19 @@
 		WORKSPACES_DELETE: 'workspaces.delete'
 	}
 
-	let refresh = 1
+	let refresh = $state(1)
+	$effect(() => {
+		$workspaceStore && refresh && untrack(() => refreshLogs())
+	})
+	// observe all the variables that should trigger an update
+	$effect(() => {
+		;[username, perPage, before, after, operation, resource, actionKind, scope]
+		updateQueryParams()
+	})
+	// observe the pageIndex variable that should trigger an update
+	$effect(() => {
+		updatePageQueryParams(pageIndex)
+	})
 </script>
 
 <div class="flex flex-col items-center gap-6 2xl:gap-1 2xl:flex-row mt-4 xl:mt-0">
@@ -294,26 +324,27 @@
 				on:selected={({ detail }) => {
 					scope = detail === 'admins' ? undefined : detail
 				}}
-				let:item
 			>
-				<ToggleButton
-					value={'admins'}
-					label="Admins"
-					tooltip="Displays events from the admins workspace only."
-					{item}
-				/>
-				<ToggleButton
-					value="all_workspaces"
-					label="All"
-					tooltip="Displays events from all workspaces."
-					{item}
-				/>
-				<ToggleButton
-					value="instance"
-					label="Instance"
-					tooltip="Displays instance-scope events, such as user logins and registrations, instance user and group management, and worker configuration changes."
-					{item}
-				/>
+				{#snippet children({ item })}
+					<ToggleButton
+						value={'admins'}
+						label="Admins"
+						tooltip="Displays events from the admins workspace only."
+						{item}
+					/>
+					<ToggleButton
+						value="all_workspaces"
+						label="All"
+						tooltip="Displays events from all workspaces."
+						{item}
+					/>
+					<ToggleButton
+						value="instance"
+						label="Instance"
+						tooltip="Displays instance-scope events, such as user logins and registrations, instance user and group management, and worker configuration changes."
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{/if}
@@ -362,32 +393,25 @@
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute -top-4">Resource</span>
 
-		<AutoComplete
-			create
-			onCreate={(resource) => {
-				resources.push(resource)
-				return resource
-			}}
+		<Select
+			onCreateItem={(r) => (resources.value?.push(r), (resource = r))}
 			createText="Press enter to use this value"
-			noInputStyles
-			items={resources}
-			value={resource}
-			bind:selectedItem={resource}
-			inputClassName="!h-[34px] py-1 !text-xs !w-48"
-			hideArrow
-			dropdownClassName="!text-sm"
+			bind:value={resource}
+			items={['all', ...(resources.value ?? [])].map((r) => ({ value: r, label: r }))}
+			inputClass="dark:!bg-gray-700"
+			RightIcon={ChevronDown}
 		/>
 	</div>
 
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute -top-4">Operation</span>
 
-		<select bind:value={operation}>
-			<option selected value="all">all</option>
-			{#each Object.keys(operations) as e}
-				<option value={operations[e]}>{e}</option>
-			{/each}
-		</select>
+		<Select
+			bind:value={operation}
+			items={['all', ...Object.keys(operations)].map((r) => ({ value: r, label: r }))}
+			inputClass="dark:!bg-gray-700"
+			RightIcon={ChevronDown}
+		/>
 	</div>
 
 	<div class="flex gap-1 relative w-full">
diff --git a/frontend/src/lib/components/common/CloseButton.svelte b/frontend/src/lib/components/common/CloseButton.svelte
index fea765e3ef..8c79c12741 100644
--- a/frontend/src/lib/components/common/CloseButton.svelte
+++ b/frontend/src/lib/components/common/CloseButton.svelte
@@ -4,9 +4,15 @@
 	import { X } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let noBg = false
-	export let small: boolean = false
-	export let Icon: any | undefined = undefined
+	interface Props {
+		noBg?: boolean
+		small?: boolean
+		Icon?: any | undefined
+		class?: string
+	}
+
+	let { noBg = false, small = false, Icon, class: className }: Props = $props()
+
 	const dispatch = createEventDispatcher()
 </script>
 
@@ -19,6 +25,7 @@
 	btnClasses={twMerge(
 		'hover:bg-surface-hover rounded-full p-0',
 		noBg ? '' : 'bg-surface-secondary',
-		small ? 'w-6 h-6' : 'w-8 h-8'
+		small ? 'w-6 h-6' : 'w-8 h-8',
+		className ?? ''
 	)}
 />
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index c013443598..e342420233 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -9,7 +9,11 @@
 	import type { Placement } from '@floating-ui/core'
 	import { conditionalMelt } from '$lib/utils'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
 
+	export let id: string = ''
+	export let aiId: string | undefined = undefined
+	export let aiDescription: string | undefined = undefined
 	export let size: ButtonType.Size = 'md'
 	export let spacingSize: ButtonType.Size = size
 	export let color: ButtonType.Color | string = 'blue'
@@ -26,7 +30,6 @@
 	export let clickableWhileLoading = false
 
 	export let element: ButtonType.Element | undefined = undefined
-	export let id: string = ''
 	export let nonCaptureEvent: boolean = false
 	export let propagateEvent: boolean = false
 	export let loading = false
@@ -72,6 +75,10 @@
 		element?.focus({})
 	}
 
+	export function click() {
+		element?.click()
+	}
+
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 	// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
@@ -155,150 +162,160 @@
 	$: $open !== undefined && dispatchIfMounted('tooltipOpen', $open)
 </script>
 
-<div
-	class={twMerge(
-		dropdownItems && dropdownItems.length > 0 && variant === 'contained'
-			? ButtonType.ColorVariants[color].divider
-			: '',
-		wrapperClasses,
-		'flex flex-row',
-		disabled ? 'divide-text-disabled' : ''
-	)}
-	style={wrapperStyle}
-	data-interactive
+<TriggerableByAI
+	id={aiId}
+	description={aiDescription}
+	onTrigger={() => {
+		element?.click()
+	}}
 >
-	{#if href && !disabled}
-		<a
-			bind:this={element}
-			on:pointerdown
-			on:focus
-			on:blur
-			on:mouseenter
-			on:mouseleave
-			on:click={() => {
-				loading = true
-				dispatch('click', event)
-				if (!loadUntilNav) {
-					loading = false
-				}
-			}}
-			{href}
-			{download}
-			class={buttonClass}
-			{id}
-			{target}
-			tabindex={disabled ? -1 : 0}
-			{...$$restProps}
-			{style}
-		>
-			{#if loading}
-				<Loader2 class={twMerge('animate-spin', iconOnlyPadding[size])} size={lucideIconSize} />
-			{:else if startIcon?.icon}
-				<svelte:component
-					this={startIcon.icon}
-					class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
-					size={lucideIconSize}
-					{...startIcon.props}
-				/>
-			{/if}
+	<div
+		class={twMerge(
+			dropdownItems && dropdownItems.length > 0 && variant === 'contained'
+				? ButtonType.ColorVariants[color].divider
+				: '',
+			wrapperClasses,
+			'flex flex-row',
+			disabled ? 'divide-text-disabled' : ''
+		)}
+		style={wrapperStyle}
+		data-interactive
+	>
+		{#if href && !disabled}
+			<a
+				bind:this={element}
+				on:pointerdown
+				on:focus
+				on:blur
+				on:mouseenter
+				on:mouseleave
+				on:click={() => {
+					loading = true
+					dispatch('click', event)
+					if (!loadUntilNav) {
+						loading = false
+					}
+				}}
+				{href}
+				{download}
+				class={buttonClass}
+				{id}
+				{target}
+				tabindex={disabled ? -1 : 0}
+				{...$$restProps}
+				{style}
+			>
+				{#if loading}
+					<Loader2 class={twMerge('animate-spin', iconOnlyPadding[size])} size={lucideIconSize} />
+				{:else if startIcon?.icon}
+					<svelte:component
+						this={startIcon.icon}
+						class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
+						size={lucideIconSize}
+						{...startIcon.props}
+					/>
+				{/if}
 
-			{#if !iconOnly}
-				<slot />
-			{/if}
-			{#if endIcon?.icon}
-				<svelte:component
-					this={endIcon.icon}
-					class={twMerge(endIcon?.classes, iconOnlyPadding[size])}
-					size={lucideIconSize}
-				/>
-			{/if}
-			{#if shortCut && !shortCut.hide}
-				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
-					{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<shortCut.Icon
-							class="w-4 h-4"
-							size={lucideIconSize}
-						/>{:else}{shortCut.key}{/if}
+				{#if !iconOnly}
+					<slot />
+				{/if}
+				{#if endIcon?.icon}
+					<svelte:component
+						this={endIcon.icon}
+						class={twMerge(endIcon?.classes, iconOnlyPadding[size])}
+						size={lucideIconSize}
+					/>
+				{/if}
+				{#if shortCut && !shortCut.hide}
+					<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+						{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<shortCut.Icon
+								class="w-4 h-4"
+								size={lucideIconSize}
+							/>{:else}{shortCut.key}{/if}
+					</div>
+				{/if}
+			</a>
+		{:else}
+			<button
+				bind:this={element}
+				on:pointerdown
+				on:click={onClick}
+				on:focus
+				on:blur
+				on:mouseenter
+				on:mouseleave
+				class={buttonClass}
+				{id}
+				tabindex={disabled ? -1 : 0}
+				{title}
+				{...$$restProps}
+				disabled={disabled || (loading && !clickableWhileLoading)}
+				{style}
+				use:conditionalMelt={trigger}
+				{...$trigger}
+			>
+				{#if loading}
+					<Loader2 class={twMerge('animate-spin', iconOnlyPadding[size])} size={lucideIconSize} />
+				{:else if startIcon?.icon}
+					<svelte:component
+						this={startIcon.icon}
+						class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
+						size={lucideIconSize}
+						{...startIcon.props}
+					/>
+				{/if}
+
+				{#if !iconOnly}
+					<slot />
+				{/if}
+				{#if endIcon?.icon}
+					<svelte:component
+						this={endIcon.icon}
+						class={twMerge(endIcon?.classes, iconOnlyPadding[size])}
+						size={lucideIconSize}
+					/>
+				{/if}
+				{#if shortCut && !shortCut.hide}
+					{@const Icon = shortCut.Icon}
+					<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+						{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<Icon
+								size={lucideIconSize}
+							/>{:else}{shortCut.key}{/if}
+					</div>
+				{/if}
+			</button>
+			{#if tooltipPopover && $open}
+				<div use:conditionalMelt={content} {...$content} class="z-[20000]">
+					<slot name="tooltip" />
 				</div>
 			{/if}
-		</a>
-	{:else}
-		<button
-			bind:this={element}
-			on:pointerdown
-			on:click={onClick}
-			on:focus
-			on:blur
-			on:mouseenter
-			on:mouseleave
-			class={buttonClass}
-			{id}
-			tabindex={disabled ? -1 : 0}
-			{title}
-			{...$$restProps}
-			disabled={disabled || (loading && !clickableWhileLoading)}
-			{style}
-			use:conditionalMelt={trigger}
-			{...$trigger}
-		>
-			{#if loading}
-				<Loader2 class={twMerge('animate-spin', iconOnlyPadding[size])} size={lucideIconSize} />
-			{:else if startIcon?.icon}
-				<svelte:component
-					this={startIcon.icon}
-					class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
-					size={lucideIconSize}
-					{...startIcon.props}
-				/>
-			{/if}
-
-			{#if !iconOnly}
-				<slot />
-			{/if}
-			{#if endIcon?.icon}
-				<svelte:component
-					this={endIcon.icon}
-					class={twMerge(endIcon?.classes, iconOnlyPadding[size])}
-					size={lucideIconSize}
-				/>
-			{/if}
-			{#if shortCut && !shortCut.hide}
-				{@const Icon = shortCut.Icon}
-				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
-					{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<Icon
-							size={lucideIconSize}
-						/>{:else}{shortCut.key}{/if}
-				</div>
-			{/if}
-		</button>
-		{#if tooltipPopover && $open}
-			<div use:conditionalMelt={content} {...$content} class="z-[20000]">
-				<slot name="tooltip" />
-			</div>
 		{/if}
-	{/if}
 
-	{#if dropdownItems && dropdownItems.length > 0}
-		<Dropdown
-			items={computeDropdowns(dropdownItems)}
-			class="h-auto w-fit"
-			hidePopup={hideDropdown}
-			usePointerDownOutside
-			on:open={() => dispatch('dropdownOpen', true)}
-			on:close={() => dispatch('dropdownOpen', false)}
-		>
-			<svelte:fragment slot="buttonReplacement">
-				<div
-					class={twMerge(
-						buttonClass,
-						'rounded-md m-0 p-0 center-center h-full',
-						variant === 'border' ? 'border-0 border-r border-y ' : 'border-0',
-						'rounded-r-md !rounded-l-none',
-						size === 'xs2' ? '!w-8' : '!w-10'
-					)}
-				>
-					<ChevronDown size={lucideIconSize} />
-				</div>
-			</svelte:fragment>
-		</Dropdown>
-	{/if}
-</div>
+		{#if dropdownItems && dropdownItems.length > 0}
+			<Dropdown
+				aiId={aiId ? `${aiId}-dropdown` : undefined}
+				aiDescription={aiDescription ? `${aiDescription} dropdown` : undefined}
+				items={computeDropdowns(dropdownItems)}
+				class="h-auto w-fit"
+				hidePopup={hideDropdown}
+				usePointerDownOutside
+				on:open={() => dispatch('dropdownOpen', true)}
+				on:close={() => dispatch('dropdownOpen', false)}
+			>
+				<svelte:fragment slot="buttonReplacement">
+					<div
+						class={twMerge(
+							buttonClass,
+							'rounded-md m-0 p-0 center-center h-full',
+							variant === 'border' ? 'border-0 border-r border-y ' : 'border-0',
+							'rounded-r-md !rounded-l-none',
+							size === 'xs2' ? '!w-8' : '!w-10'
+						)}
+					>
+						<ChevronDown size={lucideIconSize} />
+					</div>
+				</svelte:fragment>
+			</Dropdown>
+		{/if}
+	</div>
+</TriggerableByAI>
diff --git a/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
index 4b71413e2d..d8e5f74bd1 100644
--- a/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
@@ -22,7 +22,7 @@
 	on:confirmed={() => confirmCallback()}
 >
 	<div class="flex flex-col w-full space-y-4">
-		<span>There was deployed new version while you were editing this one.</span>
+		<span>A new version was deployed while you were editing this one.</span>
 		{#if diffDrawer}
 			<Button
 				wrapperClasses="self-start"
diff --git a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
index 15dee9fdf8..5c1a257b39 100644
--- a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
@@ -124,25 +124,26 @@
 								{#if permission === 'deploy'}
 									<div class="flex justify-start">
 										<ToggleButtonGroup
-											let:item
 											class="w-fit h-fit"
 											selected={isSelectedTrigger ? 'deploy' : 'discard'}
 											on:selected={(e) => toggleTrigger(trigger, e.detail)}
 										>
-											<ToggleButton
-												label={!trigger.isDraft && trigger.draftConfig ? 'Reset' : 'Discard'}
-												value={'discard'}
-												{item}
-												small
-												class="data-[state=on]:text-white data-[state=on]:bg-red-400 w-[54px] justify-center"
-											/>
-											<ToggleButton
-												label={!trigger.isDraft && trigger.draftConfig ? 'Update' : 'Deploy'}
-												value={'deploy'}
-												{item}
-												small
-												class="data-[state=on]:bg-marine-400 data-[state=on]:text-white data-[state=on]:dark:bg-marine-50 data-[state=on]:dark:text-primary-inverse w-[54px] justify-center"
-											/>
+											{#snippet children({ item })}
+												<ToggleButton
+													label={!trigger.isDraft && trigger.draftConfig ? 'Reset' : 'Discard'}
+													value={'discard'}
+													{item}
+													small
+													class="data-[state=on]:text-white data-[state=on]:bg-red-400 w-[54px] justify-center"
+												/>
+												<ToggleButton
+													label={!trigger.isDraft && trigger.draftConfig ? 'Update' : 'Deploy'}
+													value={'deploy'}
+													{item}
+													small
+													class="data-[state=on]:bg-marine-400 data-[state=on]:text-white data-[state=on]:dark:bg-marine-50 data-[state=on]:dark:text-primary-inverse w-[54px] justify-center"
+												/>
+											{/snippet}
 										</ToggleButtonGroup>
 									</div>
 								{:else if permission === 'admin-only'}
diff --git a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
index 971cd6735d..7fa5565f57 100644
--- a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
@@ -12,6 +12,7 @@
 	} from '$lib/utils'
 	import { page } from '$app/stores'
 	import type { GetInitialAndModifiedValues } from './unsavedTypes'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
 
 	export let getInitialAndModifiedValues: GetInitialAndModifiedValues = undefined
 	export let diffDrawer: DiffDrawer | undefined = undefined
@@ -67,6 +68,13 @@
 	})
 </script>
 
+{#if open}
+	<TriggerableByAI
+		id="unsaved-changes-confirmation-modal"
+		description="Unsaved changes confirmation modal. Needs user confirmation to leave the page."
+	/>
+{/if}
+
 <ConfirmationModal
 	{open}
 	title="Unsaved changes detected"
diff --git a/frontend/src/lib/components/common/drawer/Drawer.svelte b/frontend/src/lib/components/common/drawer/Drawer.svelte
index 08fd1a2e2b..7fd565a898 100644
--- a/frontend/src/lib/components/common/drawer/Drawer.svelte
+++ b/frontend/src/lib/components/common/drawer/Drawer.svelte
@@ -3,6 +3,7 @@
 	import { BROWSER } from 'esm-env'
 	import Disposable from './Disposable.svelte'
 	import ConditionalPortal from './ConditionalPortal.svelte'
+	import { aiChatManager } from '../../copilot/chat/AIChatManager.svelte'
 
 	export let open = false
 	export let duration = 0.3
@@ -12,6 +13,7 @@
 	export let shouldUsePortal: boolean = true
 	export let offset: number = 0
 	export let preventEscape = false
+	export let disableChatOffset: boolean = false
 
 	let disposable: Disposable | undefined = undefined
 
@@ -76,10 +78,11 @@
 	>
 		<aside
 			class="drawer windmill-app windmill-drawer {$$props.class ?? ''} {$$props.positionClass ??
-				''}"
+				''} {aiChatManager.open ? 'respect-global-chat' : ''}"
 			class:open
 			class:close={!open && timeout}
-			style={`${style}; --zIndex: ${zIndex};`}
+			class:global-chat-open={aiChatManager.open}
+			style={`${style}; --zIndex: ${zIndex}; --adjusted-offset: calc(${aiChatManager.open && placement === 'right' && !disableChatOffset ? aiChatManager.size : 0}% + 4px)`}
 		>
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -108,8 +111,9 @@
 
 	.drawer.open {
 		height: 100%;
-		width: 100%;
 		z-index: var(--zIndex);
+		right: 0;
+		width: calc(100% - var(--adjusted-offset));
 		transition: z-index var(--duration) step-start;
 		pointer-events: auto;
 	}
@@ -126,6 +130,12 @@
 		transition: opacity var(--duration) ease;
 	}
 
+	.drawer.respect-global-chat.global-chat-open > .overlay {
+		width: 100%;
+		right: var(--adjusted-offset);
+		left: auto;
+	}
+
 	.drawer.open > .overlay {
 		opacity: 1;
 	}
@@ -140,7 +150,9 @@
 		width: 100%;
 		@apply bg-surface;
 		z-index: 3;
-		transition: transform var(--duration) ease, max-width var(--duration) ease,
+		transition:
+			transform var(--duration) ease,
+			max-width var(--duration) ease,
 			max-height var(--duration) ease;
 		height: 100%;
 	}
@@ -155,6 +167,11 @@
 		transform: translate(100%, 0);
 	}
 
+	.drawer.respect-global-chat.global-chat-open > .panel.right {
+		right: var(--adjusted-offset);
+		width: calc(100vw - var(--adjusted-offset));
+	}
+
 	.panel.top {
 		top: 0;
 		transform: translate(0, -100%);
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index c47d910e0f..d93a6ebadd 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -2,23 +2,54 @@
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { classNames } from '$lib/utils'
 	import CloseButton from '../CloseButton.svelte'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
+	import { createEventDispatcher } from 'svelte'
 
-	export let title: string | undefined = undefined
-	export let overflow_y = true
-	export let noPadding = false
-	export let forceOverflowVisible = false
-	export let tooltip: string = ''
-	export let documentationLink: string | undefined = undefined
-	export let CloseIcon: any | undefined = undefined
+	interface Props {
+		aiId?: string | undefined
+		aiDescription?: string | undefined
+		title?: string | undefined
+		overflow_y?: boolean
+		noPadding?: boolean
+		forceOverflowVisible?: boolean
+		tooltip?: string
+		documentationLink?: string | undefined
+		CloseIcon?: any | undefined
+		fullScreen?: boolean
+		actions?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
 
-	export let fullScreen: boolean = true
+	let {
+		aiId,
+		aiDescription,
+		title = undefined,
+		overflow_y = true,
+		noPadding = false,
+		forceOverflowVisible = false,
+		tooltip = '',
+		documentationLink = undefined,
+		CloseIcon = undefined,
+		fullScreen = true,
+		actions,
+		children
+	}: Props = $props()
+
+	const dispatch = createEventDispatcher()
 </script>
 
 <div class={classNames('flex flex-col divide-y', fullScreen ? 'h-screen max-h-screen' : 'h-full')}>
 	<div class="flex justify-between w-full items-center px-4 py-2 gap-2">
 		<div class="flex items-center gap-2 w-full truncate">
-			<CloseButton on:close Icon={CloseIcon} />
-
+			<TriggerableByAI
+				id={`close-${aiId}`}
+				description={`Close ${aiDescription}`}
+				onTrigger={() => {
+					dispatch('close')
+				}}
+			>
+				<CloseButton on:close Icon={CloseIcon} />
+			</TriggerableByAI>
 			<span class="font-semibold truncate text-primary !text-lg max-w-sm"
 				>{title ?? ''}
 				{#if tooltip != '' || documentationLink}
@@ -26,9 +57,9 @@
 				{/if}</span
 			>
 		</div>
-		{#if $$slots.actions}
+		{#if actions}
 			<div class="flex gap-2 items-center justify-end">
-				<slot name="actions" />
+				{@render actions?.()}
 			</div>
 		{/if}
 	</div>
@@ -41,6 +72,6 @@
 		)}
 		class:overflow-y-auto={overflow_y}
 	>
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/common/fileDownload/FileDownload.svelte b/frontend/src/lib/components/common/fileDownload/FileDownload.svelte
index ec94243179..a3ac04d207 100644
--- a/frontend/src/lib/components/common/fileDownload/FileDownload.svelte
+++ b/frontend/src/lib/components/common/fileDownload/FileDownload.svelte
@@ -21,5 +21,7 @@ duration-200 rounded-lg p-1 gap-2"
 	download={s3object?.s3.split('/').pop() ?? 'unnamed_download.file'}
 >
 	<Download />
-	<span>s3://{s3object.s3} {s3object.storage ? ` (${s3object.storage})` : ''}</span>
+	<span>
+		{s3object.storage ? `s3://${s3object.storage}/${s3object.s3}` : `s3:///${s3object.s3}`}
+	</span>
 </a>
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index 77d9b308d8..fa3dbb9fb5 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -27,6 +27,14 @@
 	type FileWithPath = File & { path?: string }
 	export let files: FileWithPath[] | undefined = undefined
 
+	let pointerStartX = 0
+	let pointerStartY = 0
+
+	function handlePointerDown(e: PointerEvent) {
+		pointerStartX = e.clientX
+		pointerStartY = e.clientY
+	}
+
 	async function onChange(fileList: FileWithPath[] | null) {
 		if (!fileList || !fileList.length) {
 			files = undefined
@@ -179,14 +187,24 @@
 
 <button
 	class={twMerge(
-		`relative center-center flex-col text-center font-medium text-tertiary 
-		border border-dashed border-gray-400 hover:border-blue-500 
-		focus-within:border-blue-300 hover:bg-blue-50 dark:hover:bg-frost-900  
+		`relative center-center flex-col text-center font-medium text-tertiary
+		border border-dashed border-gray-400 hover:border-blue-500
+		focus-within:border-blue-300 hover:bg-blue-50 dark:hover:bg-frost-900
 		duration-200 rounded-component p-1`,
 		c
 	)}
 	on:dragover={handleDragOver}
 	on:drop={handleDrop}
+	on:pointerdown={handlePointerDown}
+	on:click={(e) => {
+		const deltaX = Math.abs(e.clientX - pointerStartX)
+		const deltaY = Math.abs(e.clientY - pointerStartY)
+		if (deltaX > 5 || deltaY > 5) {
+			e.preventDefault()
+			e.stopPropagation()
+			return
+		}
+	}}
 	{style}
 	{disabled}
 >
diff --git a/frontend/src/lib/components/common/kbd/Kbd.svelte b/frontend/src/lib/components/common/kbd/Kbd.svelte
index 27de0f7686..002f4e8c16 100644
--- a/frontend/src/lib/components/common/kbd/Kbd.svelte
+++ b/frontend/src/lib/components/common/kbd/Kbd.svelte
@@ -2,9 +2,21 @@
 	import { isMac } from '$lib/utils'
 	import { twMerge } from 'tailwind-merge'
 
-	export let kbdClass = ''
-	export let small = false
-	export let isModifier: boolean = false
+	interface Props {
+		kbdClass?: string
+		small?: boolean
+		isModifier?: boolean
+		class?: string
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		kbdClass = $bindable(''),
+		small = false,
+		isModifier = false,
+		class: classNames = '',
+		children
+	}: Props = $props()
 
 	if (small) {
 		kbdClass = twMerge(
@@ -20,12 +32,12 @@
 
 <span
 	class={twMerge(
-		$$props.class,
+		classNames,
 		small ? 'h-4  center-center' : '',
 		'ml-0.5 rounded border bg-surface-secondary text-primary shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-inverse'
 	)}
 >
 	<kbd class={kbdClass}>
-		<slot />
+		{@render children?.()}
 	</kbd>
 </span>
diff --git a/frontend/src/lib/components/common/languageIcons/Bash.svelte b/frontend/src/lib/components/common/languageIcons/Bash.svelte
index b4da143788..e535d15289 100644
--- a/frontend/src/lib/components/common/languageIcons/Bash.svelte
+++ b/frontend/src/lib/components/common/languageIcons/Bash.svelte
@@ -1,18 +1,29 @@
 <script>
-	export let width = 16
-	export let height = 16
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [width]
+	 * @property {number} [height]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { width = 16, height = 16, ...rest } = $props()
 </script>
 
-<svg
-	{width}
-	{height}
-	{...$$restProps}
-	viewBox="0 0 16 16"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path d="M14.1478 3.56504L9.4137 0.752673C8.84829 0.415776 8.15106 0.415776 7.58566 0.752673L2.85152 3.56504C2.28612 3.899 1.9375 4.52007 1.9375 5.19093V10.8127C1.9375 11.4836 2.28612 12.1047 2.85152 12.4386L7.58566 15.2481C7.8669 15.415 8.18329 15.5 8.49968 15.5C8.81607 15.5 9.12953 15.415 9.4137 15.2481L14.1478 12.4386C14.7132 12.1017 15.0619 11.4836 15.0619 10.8127V5.19093C15.0619 4.52007 14.7132 3.899 14.1478 3.56504Z" fill="white"/>
-	<path d="M14.1478 3.5651L9.4137 0.752734C9.13246 0.58575 8.81607 0.500793 8.49968 0.500793C8.18329 0.500793 7.86983 0.58575 7.58566 0.752734L2.85152 3.5651C2.28612 3.89906 1.9375 4.52013 1.9375 5.19099V10.8128C1.9375 11.4837 2.28612 12.1047 2.85152 12.4387L7.58566 15.2481C7.8669 15.4151 8.18329 15.5001 8.49968 15.5001C8.81607 15.5001 9.12953 15.4151 9.4137 15.2481L14.1478 12.4387C14.7132 12.1018 15.0619 11.4837 15.0619 10.8128V5.19099C15.0619 4.52013 14.7132 3.89906 14.1478 3.5651ZM7.75265 14.961L3.0185 12.1516C2.55563 11.8762 2.26854 11.3635 2.26854 10.8128V5.19099C2.26854 4.64024 2.55563 4.12757 3.0185 3.85219L7.75265 1.04276C7.98115 0.908 8.23895 0.837691 8.49968 0.837691C8.76041 0.837691 9.02114 0.908 9.24671 1.04276L13.9809 3.85219C14.3705 4.08363 14.6341 4.48497 14.7074 4.93612C14.5492 4.60216 14.1976 4.50841 13.7846 4.75156L9.3053 7.51998C8.74576 7.84516 8.33562 8.21428 8.33562 8.88515V14.4044C8.33562 14.8087 8.49675 15.0694 8.74869 15.1456C8.66666 15.1602 8.58464 15.169 8.49968 15.169C8.23895 15.1661 7.97822 15.0958 7.75265 14.961Z" fill="#283037"/>
-	<path d="M12.9086 11.3547L11.728 12.0607C11.6958 12.0783 11.6724 12.0988 11.6724 12.1369V12.4445C11.6724 12.4826 11.6987 12.4972 11.728 12.4796L12.9262 11.7531C12.9584 11.7355 12.9614 11.7004 12.9614 11.6623V11.3899C12.9643 11.3518 12.9379 11.3371 12.9086 11.3547Z" fill="#4DA825"/>
-	<path d="M10.3983 8.75913C10.4364 8.73863 10.4686 8.76499 10.4686 8.81479L10.4715 9.222C10.6414 9.15462 10.7908 9.13704 10.9256 9.16634C10.9549 9.17513 10.9666 9.21321 10.9549 9.26008L10.8641 9.62042C10.8582 9.64678 10.8406 9.67608 10.8231 9.69366C10.8143 9.70245 10.8084 9.70831 10.7996 9.71123C10.7879 9.71709 10.7762 9.72002 10.7645 9.71709C10.7029 9.70245 10.5565 9.67022 10.328 9.7874C10.0877 9.91044 10.0028 10.1184 10.0057 10.2737C10.0086 10.4583 10.1024 10.5169 10.4305 10.5198C10.867 10.5256 11.0574 10.719 11.0604 11.1584C11.0662 11.592 10.8348 12.0549 10.4803 12.342L10.4891 12.7462C10.4891 12.796 10.4569 12.8517 10.4188 12.8693L10.1786 13.007C10.1405 13.0275 10.1082 13.004 10.1082 12.9542L10.1053 12.5558C9.90025 12.6408 9.69225 12.6613 9.56042 12.6086C9.53406 12.5998 9.52527 12.5617 9.53406 12.5207L9.62194 12.1545C9.6278 12.1252 9.64538 12.0959 9.66589 12.0783C9.67468 12.0724 9.68053 12.0666 9.68932 12.0607C9.70397 12.0549 9.71569 12.0519 9.72741 12.0578C9.87096 12.1047 10.0526 12.0842 10.2284 11.9933C10.451 11.8791 10.6004 11.6535 10.5975 11.425C10.5946 11.22 10.4832 11.135 10.2137 11.1321C9.87095 11.1321 9.5487 11.0647 9.54285 10.5579C9.53992 10.1419 9.7567 9.70831 10.0995 9.43293L10.0965 9.02572C10.0965 8.97592 10.1258 8.92026 10.1668 8.89975L10.3983 8.75913Z" fill="white"/>
+<svg {width} {height} {...rest} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M14.1478 3.56504L9.4137 0.752673C8.84829 0.415776 8.15106 0.415776 7.58566 0.752673L2.85152 3.56504C2.28612 3.899 1.9375 4.52007 1.9375 5.19093V10.8127C1.9375 11.4836 2.28612 12.1047 2.85152 12.4386L7.58566 15.2481C7.8669 15.415 8.18329 15.5 8.49968 15.5C8.81607 15.5 9.12953 15.415 9.4137 15.2481L14.1478 12.4386C14.7132 12.1017 15.0619 11.4836 15.0619 10.8127V5.19093C15.0619 4.52007 14.7132 3.899 14.1478 3.56504Z"
+		fill="white"
+	/>
+	<path
+		d="M14.1478 3.5651L9.4137 0.752734C9.13246 0.58575 8.81607 0.500793 8.49968 0.500793C8.18329 0.500793 7.86983 0.58575 7.58566 0.752734L2.85152 3.5651C2.28612 3.89906 1.9375 4.52013 1.9375 5.19099V10.8128C1.9375 11.4837 2.28612 12.1047 2.85152 12.4387L7.58566 15.2481C7.8669 15.4151 8.18329 15.5001 8.49968 15.5001C8.81607 15.5001 9.12953 15.4151 9.4137 15.2481L14.1478 12.4387C14.7132 12.1018 15.0619 11.4837 15.0619 10.8128V5.19099C15.0619 4.52013 14.7132 3.89906 14.1478 3.5651ZM7.75265 14.961L3.0185 12.1516C2.55563 11.8762 2.26854 11.3635 2.26854 10.8128V5.19099C2.26854 4.64024 2.55563 4.12757 3.0185 3.85219L7.75265 1.04276C7.98115 0.908 8.23895 0.837691 8.49968 0.837691C8.76041 0.837691 9.02114 0.908 9.24671 1.04276L13.9809 3.85219C14.3705 4.08363 14.6341 4.48497 14.7074 4.93612C14.5492 4.60216 14.1976 4.50841 13.7846 4.75156L9.3053 7.51998C8.74576 7.84516 8.33562 8.21428 8.33562 8.88515V14.4044C8.33562 14.8087 8.49675 15.0694 8.74869 15.1456C8.66666 15.1602 8.58464 15.169 8.49968 15.169C8.23895 15.1661 7.97822 15.0958 7.75265 14.961Z"
+		fill="#283037"
+	/>
+	<path
+		d="M12.9086 11.3547L11.728 12.0607C11.6958 12.0783 11.6724 12.0988 11.6724 12.1369V12.4445C11.6724 12.4826 11.6987 12.4972 11.728 12.4796L12.9262 11.7531C12.9584 11.7355 12.9614 11.7004 12.9614 11.6623V11.3899C12.9643 11.3518 12.9379 11.3371 12.9086 11.3547Z"
+		fill="#4DA825"
+	/>
+	<path
+		d="M10.3983 8.75913C10.4364 8.73863 10.4686 8.76499 10.4686 8.81479L10.4715 9.222C10.6414 9.15462 10.7908 9.13704 10.9256 9.16634C10.9549 9.17513 10.9666 9.21321 10.9549 9.26008L10.8641 9.62042C10.8582 9.64678 10.8406 9.67608 10.8231 9.69366C10.8143 9.70245 10.8084 9.70831 10.7996 9.71123C10.7879 9.71709 10.7762 9.72002 10.7645 9.71709C10.7029 9.70245 10.5565 9.67022 10.328 9.7874C10.0877 9.91044 10.0028 10.1184 10.0057 10.2737C10.0086 10.4583 10.1024 10.5169 10.4305 10.5198C10.867 10.5256 11.0574 10.719 11.0604 11.1584C11.0662 11.592 10.8348 12.0549 10.4803 12.342L10.4891 12.7462C10.4891 12.796 10.4569 12.8517 10.4188 12.8693L10.1786 13.007C10.1405 13.0275 10.1082 13.004 10.1082 12.9542L10.1053 12.5558C9.90025 12.6408 9.69225 12.6613 9.56042 12.6086C9.53406 12.5998 9.52527 12.5617 9.53406 12.5207L9.62194 12.1545C9.6278 12.1252 9.64538 12.0959 9.66589 12.0783C9.67468 12.0724 9.68053 12.0666 9.68932 12.0607C9.70397 12.0549 9.71569 12.0519 9.72741 12.0578C9.87096 12.1047 10.0526 12.0842 10.2284 11.9933C10.451 11.8791 10.6004 11.6535 10.5975 11.425C10.5946 11.22 10.4832 11.135 10.2137 11.1321C9.87095 11.1321 9.5487 11.0647 9.54285 10.5579C9.53992 10.1419 9.7567 9.70831 10.0995 9.43293L10.0965 9.02572C10.0965 8.97592 10.1258 8.92026 10.1668 8.89975L10.3983 8.75913Z"
+		fill="white"
+	/>
 </svg>
diff --git a/frontend/src/lib/components/common/languageIcons/Go.svelte b/frontend/src/lib/components/common/languageIcons/Go.svelte
index 3e1f4581d4..3c2f4c339d 100644
--- a/frontend/src/lib/components/common/languageIcons/Go.svelte
+++ b/frontend/src/lib/components/common/languageIcons/Go.svelte
@@ -1,16 +1,15 @@
 <script>
-	export let width = 16
-	export let height = 16
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [width]
+	 * @property {number} [height]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { width = 16, height = 16, ...rest } = $props()
 </script>
 
-<svg
-	{width}
-	{height}
-	{...$$restProps}
-	viewBox="0 0 16 16"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
+<svg {width} {height} {...rest} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
 		d="M1.20743 6.82123C1.17627 6.82123 1.16848 6.80565 1.18406 6.78228L1.34764 6.57197C1.36322 6.5486 1.40217 6.53302 1.43333 6.53302H4.21424C4.2454 6.53302 4.25319 6.55639 4.23761 6.57976L4.10519 6.78228C4.08961 6.80565 4.05066 6.82902 4.02729 6.82902L1.20743 6.82123Z"
 		fill="#00ACD7"
diff --git a/frontend/src/lib/components/common/languageIcons/JavaScript.svelte b/frontend/src/lib/components/common/languageIcons/JavaScript.svelte
index d8552b77c8..276fdc8477 100644
--- a/frontend/src/lib/components/common/languageIcons/JavaScript.svelte
+++ b/frontend/src/lib/components/common/languageIcons/JavaScript.svelte
@@ -1,6 +1,12 @@
 <script>
-	export let width = 16
-	export let height = 16
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [width]
+	 * @property {number} [height]
+	 */
+
+	/** @type {Props} */
+	let { width = 16, height = 16 } = $props()
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 630 630">
diff --git a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
index 6a3de43bf9..3cfb57fee5 100644
--- a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
+++ b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
@@ -24,7 +24,8 @@
 	import JavaIcon from '$lib/components/icons/JavaIcon.svelte'
 	import DuckDbIcon from '$lib/components/icons/DuckDbIcon.svelte'
 
-	export let lang:
+	interface Props {
+		lang: 
 		| SupportedLanguage
 		| 'mysql'
 		| 'bun'
@@ -33,10 +34,20 @@
 		| 'fetch'
 		| 'docker'
 		| 'powershell'
-		| 'bunnative'
-	export let width = 30
-	export let height = 30
-	export let scale = 1
+		| 'bunnative';
+		width?: number;
+		height?: number;
+		scale?: number;
+		[key: string]: any
+	}
+
+	let {
+		lang,
+		width = 30,
+		height = 30,
+		scale = 1,
+		...rest
+	}: Props = $props();
 
 	const languageLabel: Record<Script['language'] | 'bunnative', String> = {
 		python3: 'Python',
@@ -99,15 +110,16 @@
 	}
 
 	let subIconScale = width === 30 ? 0.6 : 0.8
+
+	const SvelteComponent = $derived(langToComponent[lang]);
 </script>
 
 <div class="relative">
-	<svelte:component
-		this={langToComponent[lang]}
+	<SvelteComponent
 		title={languageLabel[lang]}
 		width={width * scale}
 		height={height * scale}
-		{...$$restProps}
+		{...rest}
 	/>
 	{#if lang === 'deno'}
 		<div
diff --git a/frontend/src/lib/components/common/languageIcons/Python.svelte b/frontend/src/lib/components/common/languageIcons/Python.svelte
index 1046682c58..b8d42f7cf0 100644
--- a/frontend/src/lib/components/common/languageIcons/Python.svelte
+++ b/frontend/src/lib/components/common/languageIcons/Python.svelte
@@ -1,12 +1,17 @@
-<script>
-	export let width = 16
-	export let height = 16
+<script lang="ts">
+	interface Props {
+		width?: number;
+		height?: number;
+		[key: string]: any
+	}
+
+	let { width = 16, height = 16, ...rest }: Props = $props();
 </script>
 
 <svg
 	{width}
 	{height}
-	{...$$restProps}
+	{...rest}
 	viewBox="0 0 17 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/common/languageIcons/TypeScript.svelte b/frontend/src/lib/components/common/languageIcons/TypeScript.svelte
index 11d7e679eb..abecd33cde 100644
--- a/frontend/src/lib/components/common/languageIcons/TypeScript.svelte
+++ b/frontend/src/lib/components/common/languageIcons/TypeScript.svelte
@@ -1,12 +1,17 @@
-<script>
-	export let width = 16
-	export let height = 16
+<script lang="ts">
+	interface Props {
+		width?: number;
+		height?: number;
+		[key: string]: any
+	}
+
+	let { width = 16, height = 16, ...rest }: Props = $props();
 </script>
 
 <svg
 	{width}
 	{height}
-	{...$$restProps}
+	{...rest}
 	viewBox="0 0 17 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/common/menu/Menu.svelte b/frontend/src/lib/components/common/menu/Menu.svelte
index 92ced7e4be..3ff9a40b74 100644
--- a/frontend/src/lib/components/common/menu/Menu.svelte
+++ b/frontend/src/lib/components/common/menu/Menu.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	let current: (() => void) | undefined = undefined
 </script>
 
@@ -7,22 +7,38 @@
 	import { createEventDispatcher, onMount } from 'svelte'
 	import { fade } from 'svelte/transition'
 
-	export let noMinW = false
-	export let show = false
-	export let wrapperClasses = ''
-	export let popupClasses = ''
-	export let transitionDuration = 25
-	export let pointerDown = false
-	let menu: HTMLDivElement
+	let menu: HTMLDivElement | undefined = $state()
 
 	type Alignment = 'start' | 'end' | 'center'
 	type Side = 'top' | 'bottom'
 	type Placement = `${Side}-${Alignment}`
 
-	export let placement: Placement = 'bottom-start'
+	interface Props {
+		noMinW?: boolean
+		show?: boolean
+		wrapperClasses?: string
+		popupClasses?: string
+		transitionDuration?: number
+		pointerDown?: boolean
+		placement?: Placement
+		trigger?: import('svelte').Snippet<[any]>
+		children?: import('svelte').Snippet<[any]>
+	}
+
+	let {
+		noMinW = false,
+		show = $bindable(false),
+		wrapperClasses = '',
+		popupClasses = '',
+		transitionDuration = 25,
+		pointerDown = false,
+		placement = 'bottom-start',
+		trigger,
+		children
+	}: Props = $props()
 
 	function handleOutsideClick(event) {
-		if (show && !menu.contains(event.target)) {
+		if (show && !menu?.contains(event.target)) {
 			show = false
 			event.preventDefault()
 			event.stopPropagation()
@@ -61,10 +77,10 @@
 </script>
 
 <div class="relative {wrapperClasses}" bind:this={menu}>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		on:click={() => {
+		onclick={() => {
 			if (!pointerDown) {
 				if (!show) {
 					current && current()
@@ -78,7 +94,7 @@
 				}
 			}
 		}}
-		on:pointerdown={() => {
+		onpointerdown={() => {
 			if (pointerDown) {
 				if (!show) {
 					current && current()
@@ -89,7 +105,7 @@
 		}}
 		class="relative"
 	>
-		<slot class="triggerable" name="trigger" />
+		{@render trigger?.({ class: 'triggerable' })}
 	</div>
 	{#if show}
 		<div
@@ -103,7 +119,7 @@
 			role="menu"
 			tabindex="-1"
 		>
-			<slot {close} />
+			{@render children?.({ close })}
 		</div>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/common/popup/PopupV2.svelte b/frontend/src/lib/components/common/popup/PopupV2.svelte
index b5ae79f3d8..5523b3fc73 100644
--- a/frontend/src/lib/components/common/popup/PopupV2.svelte
+++ b/frontend/src/lib/components/common/popup/PopupV2.svelte
@@ -3,13 +3,25 @@
 	import { clickOutside } from '$lib/utils'
 	import { createFloatingActions, type ComputeConfig } from 'svelte-floating-ui'
 
-	export let floatingConfig: ComputeConfig = {
-		strategy: 'absolute',
-		//@ts-ignore
-		placement: 'bottom-center'
+	interface Props {
+		floatingConfig?: ComputeConfig
+		open?: boolean
+		target?: string | undefined
+		button?: import('svelte').Snippet<[any]>
+		children?: import('svelte').Snippet<[any]>
 	}
-	export let open = false
-	export let target: string | undefined = undefined
+
+	let {
+		floatingConfig = {
+			strategy: 'absolute',
+			//@ts-ignore
+			placement: 'bottom-center'
+		},
+		open = $bindable(false),
+		target = undefined,
+		button,
+		children
+	}: Props = $props()
 
 	// export let containerClasses: string = 'rounded-lg shadow-md border p-4 bg-surface'
 	// export let floatingClasses: string = ''
@@ -19,7 +31,7 @@
 		open = false
 	}
 
-	let acceptClickoutside = false
+	let acceptClickoutside = $state(false)
 	function pointerup() {
 		setTimeout(() => {
 			acceptClickoutside = true
@@ -37,7 +49,7 @@
 </script>
 
 <div use:floatingRef>
-	<slot {pointerup} {pointerdown} name="button" />
+	{@render button?.({ pointerup, pointerdown })}
 </div>
 
 <Portal name="popup-v2" {target}>
@@ -47,6 +59,7 @@
 			style="position:absolute"
 			use:floatingContent
 		>
+			<!-- svelte-ignore event_directive_deprecated -->
 			<div
 				use:clickOutside
 				on:click_outside={() => {
@@ -56,7 +69,7 @@
 					}
 				}}
 			>
-				<slot {close} />
+				{@render children?.({ close })}
 			</div>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index 12d13cbf38..e8b3980d47 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -99,6 +99,8 @@
 				{#if app.canWrite}
 					<div>
 						<Button
+							aiId={`edit-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
+							aiDescription={`Edits the app ${app.summary?.length > 0 ? app.summary : app.path}`}
 							color="light"
 							size="xs"
 							variant="border"
@@ -111,6 +113,8 @@
 				{:else}
 					<div>
 						<Button
+							aiId={`fork-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
+							aiDescription={`Fork the app ${app.summary?.length > 0 ? app.summary : app.path}`}
 							color="light"
 							size="xs"
 							variant="border"
@@ -124,6 +128,8 @@
 			{/if}
 		</span>
 		<Dropdown
+			aiId={`app-row-dropdown-${app.summary?.length > 0 ? app.summary : app.path}`}
+			aiDescription={`Open dropdown for app ${app.summary?.length > 0 ? app.summary : app.path} options`}
 			items={async () => {
 				let { draft_only, canWrite, summary, execution_mode, path, has_draft } = app
 
@@ -184,7 +190,7 @@
 									},
 									hide: $userStore?.operator
 								}
-						  ]
+							]
 						: []),
 					{
 						displayName: $userStore?.operator ? 'View JSON' : 'View/Edit JSON',
@@ -231,7 +237,7 @@
 										gotoUrl(url)
 									}
 								}
-						  ]
+							]
 						: []),
 					...(has_draft
 						? [
@@ -250,7 +256,7 @@
 									disabled: !canWrite,
 									hide: $userStore?.operator
 								}
-						  ]
+							]
 						: []),
 					{
 						displayName: 'Delete',
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index 78f2ca6959..6f9409ac9f 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -81,6 +81,8 @@
 {/if}
 
 <Row
+	aiId={`flow-row-${flow.path}`}
+	aiDescription={`Button to access the form to run the flow ${flow.summary ?? flow.path}`}
 	href={flow.draft_only
 		? `${base}/flows/edit/${flow.path}?nodraft=true`
 		: `${base}/flows/get/${flow.path}?workspace=${$workspaceStore}`}
@@ -114,6 +116,8 @@
 							variant="border"
 							startIcon={{ icon: Pen }}
 							href="{base}/flows/edit/{flow.path}?nodraft=true"
+							aiId={`edit-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
+							aiDescription={`Edits the flow ${flow.summary?.length > 0 ? flow.summary : flow.path}`}
 						>
 							Edit
 						</Button>
@@ -126,6 +130,8 @@
 							variant="border"
 							startIcon={{ icon: GitFork }}
 							href="{base}/flows/add?template={flow.path}"
+							aiId={`fork-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
+							aiDescription={`Fork the flow ${flow.summary?.length > 0 ? flow.summary : flow.path}`}
 						>
 							Fork
 						</Button>
@@ -135,6 +141,8 @@
 		</span>
 
 		<Dropdown
+			aiId={`flow-row-dropdown-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
+			aiDescription={`Open dropdown for flow ${flow.summary?.length > 0 ? flow.summary : flow.path} options`}
 			items={async () => {
 				let { draft_only, path, archived, has_draft } = flow
 				let owner = isOwner(path, $userStore, $workspaceStore)
diff --git a/frontend/src/lib/components/common/table/RawAppRow.svelte b/frontend/src/lib/components/common/table/RawAppRow.svelte
index 07c05a43a6..8f84ba3bd7 100644
--- a/frontend/src/lib/components/common/table/RawAppRow.svelte
+++ b/frontend/src/lib/components/common/table/RawAppRow.svelte
@@ -109,7 +109,7 @@
 										deploymentDrawer.openDrawer(path, 'raw_app')
 									}
 								}
-						  ]
+							]
 						: []),
 					{
 						displayName: canWrite ? 'Share' : 'See Permissions',
diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte
index 42d39a6e6d..f7ebf48f6f 100644
--- a/frontend/src/lib/components/common/table/Row.svelte
+++ b/frontend/src/lib/components/common/table/Row.svelte
@@ -4,6 +4,8 @@
 	import RowIcon from './RowIcon.svelte'
 	import { BellOff } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
+	import { goto } from '$lib/navigation'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
 
 	export let marked: string | undefined
 	export let starred: boolean
@@ -12,6 +14,8 @@
 
 	const dispatch = createEventDispatcher()
 
+	export let aiId: string | undefined = undefined
+	export let aiDescription: string | undefined = undefined
 	export let kind: 'script' | 'flow' | 'app' | 'raw_app' = 'script'
 	export let summary: string | undefined = undefined
 	export let path: string
@@ -22,6 +26,13 @@
 	let displayPath: string = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? ''
 </script>
 
+<TriggerableByAI
+	id={aiId}
+	description={aiDescription}
+	onTrigger={() => {
+		goto(href)
+	}}
+/>
 <div
 	class={twMerge(
 		'hover:bg-surface-hover w-full inline-flex items-center gap-4 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-2.5 border-b last:border-b-0',
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index 286e0778ab..babc5cf1ea 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -92,6 +92,8 @@
 {/if}
 
 <Row
+	aiId={`script-run-button-${script.path}`}
+	aiDescription={`Button to access the form to run the script ${script.summary ?? script.path}`}
 	href={script.draft_only || script.kind !== 'script' || script.no_main_func
 		? `${base}/scripts/edit/${script.path}`
 		: `${base}/scripts/get/${script.hash}?workspace=${$workspaceStore}`}
@@ -140,6 +142,8 @@
 				{:else if script.canWrite && !script.archived}
 					<div>
 						<Button
+							aiId={`edit-script-button-${script.summary?.length > 0 ? script.summary : script.path}`}
+							aiDescription={`Edits the script ${script.summary?.length > 0 ? script.summary : script.path}`}
 							color="light"
 							size="xs"
 							variant="border"
@@ -152,6 +156,8 @@
 				{:else if !script.draft_only}
 					<div>
 						<Button
+							aiId={`fork-script-button-${script.summary ?? script.path}`}
+							aiDescription={`Fork the script ${script.summary ?? script.path}`}
 							color="light"
 							size="xs"
 							variant="border"
@@ -165,6 +171,8 @@
 			{/if}
 		</span>
 		<Dropdown
+			aiId={`script-row-dropdown-${script.summary?.length > 0 ? script.summary : script.path}`}
+			aiDescription={`Open dropdown for script ${script.summary?.length > 0 ? script.summary : script.path} options`}
 			items={async () => {
 				let owner = isOwner(script.path, $userStore, $workspaceStore)
 				if (script.draft_only) {
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index fb69c95248..6506acf62e 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -1,21 +1,44 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import type { TabsContext } from '$lib/components/apps/editor/settingsPanel/inputEditor/tabs.svelte'
+	import { createEventDispatcher, getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
-	import type { TabsContext } from './Tabs.svelte'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
 
-	export let value: string
-	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm'
-	let c = ''
-	export { c as class }
-	export let style = ''
-	export let selectedClass = ''
-	export let selectedStyle = ''
-	export let id: string | undefined = undefined
-	export let active: boolean | undefined = false
-	export let exact = false
-	export let otherValues: string[] = []
+	const dispatch = createEventDispatcher<{ onpointerdown: any }>()
 
-	export let disabled: boolean = false
+	interface Props {
+		aiId?: string | undefined
+		aiDescription?: string | undefined
+		value: string
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		class?: string
+		style?: string
+		selectedClass?: string
+		selectedStyle?: string
+		id?: string | undefined
+		active?: boolean | undefined
+		exact?: boolean
+		otherValues?: string[]
+		disabled?: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		aiId = undefined,
+		aiDescription = undefined,
+		value,
+		size = 'sm',
+		class: c = '',
+		style = '',
+		selectedClass = '',
+		selectedStyle = '',
+		id = undefined,
+		active = false,
+		exact = false,
+		otherValues = [],
+		disabled = false,
+		children
+	}: Props = $props()
 	const { selected, update, hashNavigation } = getContext<TabsContext>('Tabs')
 
 	function getIsSelectedFn(exact: boolean, otherValues: string[]) {
@@ -28,9 +51,9 @@
 		}
 	}
 
-	$: isSelectedFn = getIsSelectedFn(exact, otherValues)
+	let isSelectedFn = $derived(getIsSelectedFn(exact, otherValues))
 
-	$: isSelected = isSelectedFn($selected)
+	let isSelected = $derived(isSelectedFn($selected))
 
 	const fontSizeClasses = {
 		xs: 'text-xs',
@@ -41,30 +64,45 @@
 	}
 </script>
 
-<button
-	class={twMerge(
-		'border-b-2 py-1 px-2 cursor-pointer transition-all z-10 ease-linear font-normal text-tertiary',
-		isSelected
-			? 'wm-tab-active font-main'
-			: 'border-gray-300 dark:border-gray-600 border-opacity-0 hover:border-opacity-100 ',
-		fontSizeClasses[size],
-		c,
-		isSelected ? selectedClass : '',
-		disabled ? 'cursor-not-allowed text-tertiary' : ''
-	)}
-	style={`${style} ${isSelected ? selectedStyle : ''}`}
-	on:click={() => {
+<TriggerableByAI
+	id={aiId}
+	description={aiDescription}
+	onTrigger={() => {
 		if (hashNavigation) {
 			window.location.hash = value
 		} else {
 			update(value)
 		}
 	}}
-	on:pointerdown|stopPropagation
-	{disabled}
-	{id}
 >
-	<div class={twMerge(active ? 'bg-blue-50 text-blue-800 rounded-md ' : '', 'px-2 ')}>
-		<slot />
-	</div>
-</button>
+	<button
+		class={twMerge(
+			'border-b-2 py-1 px-2 cursor-pointer transition-all z-10 ease-linear font-normal text-tertiary',
+			isSelected
+				? 'wm-tab-active font-main'
+				: 'border-gray-300 dark:border-gray-600 border-opacity-0 hover:border-opacity-100 ',
+			fontSizeClasses[size],
+			c,
+			isSelected ? selectedClass : '',
+			disabled ? 'cursor-not-allowed text-tertiary' : ''
+		)}
+		style={`${style} ${isSelected ? selectedStyle : ''}`}
+		onclick={() => {
+			if (hashNavigation) {
+				window.location.hash = value
+			} else {
+				update(value)
+			}
+		}}
+		onpointerdown={(event) => {
+			event.stopPropagation()
+			dispatch('onpointerdown', event)
+		}}
+		{disabled}
+		{id}
+	>
+		<div class={twMerge(active ? 'bg-blue-50 text-blue-800 rounded-md ' : '', 'px-2 ')}>
+			{@render children?.()}
+		</div>
+	</button>
+</TriggerableByAI>
diff --git a/frontend/src/lib/components/common/tabs/TabContent.svelte b/frontend/src/lib/components/common/tabs/TabContent.svelte
index 383f1f8220..0ef14079e8 100644
--- a/frontend/src/lib/components/common/tabs/TabContent.svelte
+++ b/frontend/src/lib/components/common/tabs/TabContent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import type { TabsContext } from '$lib/components/apps/editor/settingsPanel/inputEditor/tabs.svelte'
 	import { getContext } from 'svelte'
-	import type { TabsContext } from './Tabs.svelte'
 
 	export let value: string
 	export let alwaysMounted: boolean = false
diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte
index 90691e0b4e..be2e118fa6 100644
--- a/frontend/src/lib/components/common/tabs/Tabs.svelte
+++ b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -1,42 +1,39 @@
-<script context="module" lang="ts">
-	export type TabsContext = {
-		selected: Writable<string>
-		update: (value: string) => void
-		hashNavigation: boolean
-	}
-</script>
-
 <script lang="ts">
-	import { setContext } from 'svelte'
-	import { writable, type Writable } from 'svelte/store'
+	import { setContext, untrack } from 'svelte'
+	import { writable } from 'svelte/store'
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 	import { getTabStateContext, type TabsState } from './tabsState.svelte'
+	import type { TabsContext } from '$lib/components/apps/editor/settingsPanel/inputEditor/tabs.svelte'
 
-	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
+	const dispatch = createEventDispatcher<{ selected: string }>()
 
-	export let selected: string
-	export let hideTabs = false
+	interface Props {
+		selected: string
+		hideTabs?: boolean
+		class?: string
+		wrapperClass?: string
+		style?: string
+		hashNavigation?: boolean
+		values?: string[] | undefined
+		children?: import('svelte').Snippet<[any]>
+		content?: import('svelte').Snippet
+	}
 
-	let c = ''
-	export { c as class }
-	export let wrapperClass = ''
-	export let style = ''
-	export let hashNavigation = false
-	export let values: string[] | undefined = undefined
-	export let id: string | undefined = undefined // if provided, the tabs state will be stored in a parent context
-
-	$: selected && updateSelected()
+	let {
+		selected = $bindable(),
+		hideTabs = false,
+		class: c = '',
+		wrapperClass = '',
+		style = '',
+		hashNavigation = false,
+		values = undefined,
+		children,
+		content
+	}: Props = $props()
 
 	const selectedStore = writable(selected)
 
-	let tabsState: TabsState | undefined = undefined
-
-	$: $selectedStore && dispatchIfMounted('selected', $selectedStore)
-
-	$: hashValues = values ? values.map((x) => '#' + x) : undefined
 	setContext<TabsContext>('Tabs', {
 		selected: selectedStore,
 		update: (value: string) => {
@@ -53,6 +50,8 @@
 		}
 	}
 
+	let hashValues = $derived(values ? values.map((x) => '#' + x) : undefined)
+
 	function hashChange() {
 		if (hashNavigation) {
 			const hash = window.location.hash
@@ -71,14 +70,26 @@
 			selected = tabState
 		}
 	}
+
+	$effect(() => {
+		selected && untrack(() => updateSelected())
+	})
+
+	let lastSelected: string | undefined = $state(undefined)
+	$effect(() => {
+		if ($selectedStore !== untrack(() => lastSelected)) {
+			lastSelected = $selectedStore
+			$selectedStore && dispatch('selected', $selectedStore)
+		}
+	})
 </script>
 
-<svelte:window on:hashchange={hashChange} />
+<svelte:window onhashchange={hashChange} />
 {#if !hideTabs}
 	<div class="overflow-x-auto {wrapperClass}">
 		<div class={twMerge('border-b flex flex-row whitespace-nowrap scrollbar-hidden', c)} {style}>
-			<slot {selected} />
+			{@render children?.({ selected })}
 		</div>
 	</div>
 {/if}
-<slot name="content" />
+{@render content?.()}
diff --git a/frontend/src/lib/components/common/tabs/TabsV2.svelte b/frontend/src/lib/components/common/tabs/TabsV2.svelte
new file mode 100644
index 0000000000..6634256b29
--- /dev/null
+++ b/frontend/src/lib/components/common/tabs/TabsV2.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { setContext, untrack } from 'svelte'
+	import { writable } from 'svelte/store'
+	import { twMerge } from 'tailwind-merge'
+	import type { TabsContext } from '$lib/components/apps/editor/settingsPanel/inputEditor/tabs.svelte'
+
+	interface Props {
+		selected: string
+		hideTabs?: boolean
+		class?: string
+		wrapperClass?: string
+		style?: string
+		hashNavigation?: boolean
+		values?: string[] | undefined
+		children?: import('svelte').Snippet<[any]>
+		content?: import('svelte').Snippet
+		onSelectedChange?: (value: string) => void
+	}
+
+	let {
+		selected = $bindable(),
+		hideTabs = false,
+		class: c = '',
+		wrapperClass = '',
+		style = '',
+		hashNavigation = false,
+		values = undefined,
+		children,
+		content,
+		onSelectedChange
+	}: Props = $props()
+
+	const selectedStore = writable(selected)
+
+	setContext<TabsContext>('Tabs', {
+		selected: selectedStore,
+		update: (value: string) => {
+			selectedStore.set(value)
+			selected = value
+		},
+		hashNavigation
+	})
+
+	function updateSelected() {
+		selectedStore.set(selected)
+	}
+
+	function hashChange() {
+		if (hashNavigation) {
+			const hash = window.location.hash
+			if (hash && hashValues?.includes(hash)) {
+				const id = hash.replace('#', '')
+				selectedStore.set(id)
+				selected = id
+			}
+		}
+	}
+	$effect(() => {
+		selected && untrack(() => updateSelected())
+	})
+	$effect(() => {
+		$selectedStore && untrack(() => onSelectedChange?.($selectedStore))
+	})
+
+	let hashValues = $derived(values ? values.map((x) => '#' + x) : undefined)
+</script>
+
+<svelte:window onhashchange={hashChange} />
+{#if !hideTabs}
+	<div class="overflow-x-auto {wrapperClass}">
+		<div class={twMerge('border-b flex flex-row whitespace-nowrap scrollbar-hidden', c)} {style}>
+			{@render children?.({ selected })}
+		</div>
+	</div>
+{/if}
+{@render content?.()}
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index 57531fd040..c807108a74 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
@@ -3,16 +3,30 @@
 	import { twMerge } from 'tailwind-merge'
 	import { createSync } from '@melt-ui/svelte'
 
-	export let id: string | null | undefined = undefined
-	export let selected: string | string[] | undefined = undefined
-	export let noWFull: boolean = false
-	export let disabled: boolean = false
-	export let tabListClass: string = ''
-	export let allowEmpty: boolean = false
-
 	const dispatch = createEventDispatcher()
 
 	import { createToggleGroup, melt } from '@melt-ui/svelte'
+	interface Props {
+		id?: string | null | undefined
+		selected?: string | string[] | undefined
+		noWFull?: boolean
+		disabled?: boolean
+		tabListClass?: string
+		allowEmpty?: boolean
+		class?: string
+		children?: import('svelte').Snippet<[any]>
+	}
+
+	let {
+		id = undefined,
+		selected = $bindable(undefined),
+		noWFull = false,
+		disabled = false,
+		tabListClass = '',
+		allowEmpty = false,
+		class: className = '',
+		children
+	}: Props = $props()
 
 	const {
 		elements: { root, item },
@@ -31,23 +45,27 @@
 		}
 	})
 
-	$: $disabledOption = disabled
+	$effect(() => {
+		$disabledOption = disabled
+	})
 
 	const sync = createSync(states)
-	$: sync.value(selected, (v) => (selected = v))
+	$effect(() => {
+		sync.value(selected, (v) => (selected = v))
+	})
 </script>
 
 <div
 	use:melt={$root}
 	class={twMerge(
 		`h-8 flex ${noWFull ? '' : 'w-full'} ${disabled ? 'disabled' : ''}`,
-		$$props.class,
+		className,
 		'flex items-center data-[orientation="vertical"]:flex-col'
 	)}
 	aria-label="Toggle button group"
 	{id}
 >
 	<div class={twMerge('flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full ', tabListClass)}>
-		<slot {item} {disabled} />
+		{@render children?.({ item, disabled })}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/copilot/AIFormAssistant.svelte b/frontend/src/lib/components/copilot/AIFormAssistant.svelte
new file mode 100644
index 0000000000..cf510345ab
--- /dev/null
+++ b/frontend/src/lib/components/copilot/AIFormAssistant.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Button } from '$lib/components/common'
+	import { Pencil } from 'lucide-svelte'
+	import { aiChatManager } from './chat/AIChatManager.svelte'
+	import AskAiButton from './AskAiButton.svelte'
+
+	interface Props {
+		onEditInstructions: () => void
+		instructions: string
+		runnableType: 'script' | 'flow'
+	}
+
+	const { onEditInstructions, instructions, runnableType }: Props = $props()
+
+	async function fillFormWithAI() {
+		aiChatManager.openChat()
+		aiChatManager.askAi(`Analyze the ${runnableType} form on this page and fill the inputs for me`)
+	}
+</script>
+
+<div class="my-3 p-3 bg-surface-secondary rounded-md relative flex flex-col gap-3">
+	<div class="flex flex-row gap-2 justify-between items-center">
+		<h3 class="text-sm font-medium">Fill the inputs with AI</h3>
+		<AskAiButton label="Fill with AI" onClick={fillFormWithAI} />
+	</div>
+	<div class="flex flex-row gap-2 items-center">
+		<p class="text-sm text-tertiary">
+			{instructions
+				? 'Instructions: ' + instructions
+				: 'No AI instructions provided. Click edit to add guidance for AI form filling.'}
+		</p>
+		<Button
+			color="light"
+			size="xs2"
+			startIcon={{
+				icon: Pencil
+			}}
+			iconOnly
+			on:click={onEditInstructions}
+		/>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/copilot/AIFormSettings.svelte b/frontend/src/lib/components/copilot/AIFormSettings.svelte
new file mode 100644
index 0000000000..7b8de1c47b
--- /dev/null
+++ b/frontend/src/lib/components/copilot/AIFormSettings.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Label from '../Label.svelte'
+	import Toggle from '../Toggle.svelte'
+	import Tooltip from '../Tooltip.svelte'
+
+	export let prompt: string | undefined = undefined
+	export let type: 'flow' | 'script' = 'script'
+</script>
+
+<div class="flex flex-col gap-2">
+	<Toggle
+		size="sm"
+		checked={prompt !== undefined}
+		on:change={() => {
+			if (prompt !== undefined) {
+				prompt = undefined
+			} else {
+				prompt = ''
+			}
+		}}
+		options={{
+			right: `Enable filling ${type} inputs with AI`
+		}}
+	/>
+	{#if prompt !== undefined}
+		<Label label="Additional prompt for AI">
+			<svelte:fragment slot="header">
+				<Tooltip>
+					AI will use script description and each field description to fill the inputs form. In
+					addition, any prompt passed here will be used by AI to guide it. You can mention specific
+					fields and interaction between fields here.
+				</Tooltip>
+			</svelte:fragment>
+			<textarea bind:value={prompt} placeholder="Instructions for the AI about how to fill the form"
+			></textarea>
+		</Label>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/copilot/AskAiButton.svelte b/frontend/src/lib/components/copilot/AskAiButton.svelte
new file mode 100644
index 0000000000..fba62c3e59
--- /dev/null
+++ b/frontend/src/lib/components/copilot/AskAiButton.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Button } from '$lib/components/common'
+	import { WandSparkles } from 'lucide-svelte'
+	import { aiChatManager } from './chat/AIChatManager.svelte'
+	interface Props {
+		label?: string
+		initialInput?: string
+		onClick?: () => void
+	}
+
+	const { label, initialInput, onClick: onClickProp }: Props = $props()
+
+	export function onClick() {
+		aiChatManager.openChat()
+		if (initialInput) {
+			aiChatManager.askAi(initialInput, {
+				withCode: false,
+				withDiff: false
+			})
+		}
+		onClickProp?.()
+	}
+</script>
+
+<Button
+	iconOnly={!label}
+	startIcon={{
+		icon: WandSparkles
+	}}
+	size="xs2"
+	btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 !bg-surface"
+	on:click={onClick}
+>
+	{label}
+</Button>
diff --git a/frontend/src/lib/components/copilot/CronGen.svelte b/frontend/src/lib/components/copilot/CronGen.svelte
index d002fbf490..3bc549a067 100644
--- a/frontend/src/lib/components/copilot/CronGen.svelte
+++ b/frontend/src/lib/components/copilot/CronGen.svelte
@@ -22,7 +22,7 @@
 		"You are a helpful assistant for creating CRON schedules using both standard and extended Croner patterns. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Supported modifiers: ? (wildcard), L (last day/weekday), # (nth occurrence of a weekday), and W (closest weekday). Weekdays are Sunday (0 or 7), Monday (1), Tuesday (2), Wednesday (3), Thursday (4), Friday (5), Saturday (6). Ensure syntax is valid, including optional seconds and special modifiers. You only return either the CRON string without any leading/closing quotes or an error message prefixed with 'ERROR:'."
 
 	const SYSTEM_V1 =
-		"You are a helpful assitant for creating CRON schedules. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Weekdays are Sunday (1), Monday (2), Tuesday (3), Wednesday (4), Thursday (5), Friday (6), Saturday (7). You only return the CRON string without any wrapping characters. If it is invalid, you will return an error message preceeded by 'ERROR:'."
+		"You are a helpful assistant for creating CRON schedules. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Weekdays are Sunday (1), Monday (2), Tuesday (3), Wednesday (4), Thursday (5), Friday (6), Saturday (7). You only return the CRON string without any wrapping characters. If it is invalid, you will return an error message preceded by 'ERROR:'."
 
 	$: updateSystemPrompt(cronVersion)
 
diff --git a/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte b/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte
deleted file mode 100644
index 598129e906..0000000000
--- a/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte
+++ /dev/null
@@ -1,317 +0,0 @@
-<script lang="ts">
-	import { Button, Drawer, DrawerContent, Badge } from '$lib/components/common'
-	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
-	import { getContext } from 'svelte'
-	import { capitalize, classNames } from '$lib/utils'
-	import { APP_TO_ICON_COMPONENT } from '../icons'
-	import { charsToNumber, numberToChars } from '../flows/idUtils'
-	import type { FlowCopilotContext } from './flow'
-	import Alert from '../common/alert/Alert.svelte'
-	import type { FlowEditorContext } from '../flows/types'
-	import type { FlowModule } from '$lib/gen'
-	import { Plus, Wand2, X } from 'lucide-svelte'
-
-	export let getHubCompletions: (text: string, idx: number, type: 'trigger' | 'script') => void
-	export let genFlow: (index: number, modules: FlowModule[], stepOnly?: boolean) => void
-	export let flowCopilotMode: 'trigger' | 'sequence'
-
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
-
-	const { drawerStore, modulesStore, currentStepStore } =
-		getContext<FlowCopilotContext>('FlowCopilotContext')
-</script>
-
-<Drawer bind:this={$drawerStore}>
-	<DrawerContent
-		on:close={$drawerStore.closeDrawer}
-		title="AI Flow Builder"
-		tooltip="Build flows from prompts"
-		documentationLink="https://www.windmill.dev/docs/core_concepts/ai_generation#windmill-ai-for-flows"
-	>
-		<div class="flex flex-col gap-6">
-			{#if $flowStore.value.modules.length > 0 && $currentStepStore === undefined}
-				<Alert type="error" title="Flow not empty">All flow steps will be overriden</Alert>
-			{/if}
-			<ToggleButtonGroup
-				bind:selected={flowCopilotMode}
-				on:selected={() => {
-					if ($currentStepStore !== undefined) {
-						$currentStepStore = numberToChars(0)
-					}
-				}}
-				let:item
-			>
-				<ToggleButton value="sequence" label="Sequence" {item} />
-				<ToggleButton value="trigger" label="Trigger" {item} />
-			</ToggleButtonGroup>
-			{#if flowCopilotMode === 'trigger'}
-				<Alert title="Trigger flow builder">
-					Build a flow with two scripts, one that regularly checks for changes in an external system
-					and a second that is executed for each change using a for-loop. For both steps, you can
-					either choose a script from the hub or generate one from scratch using Windmill AI. The
-					inputs of the for-loop action are automatically filled in with the ouputs of the trigger
-					step. At the end of the process, flow inputs are inferred and you just need to fill them
-					in. <br /><br />
-					The flow is automatically set to run every 15 minutes when deployed.
-				</Alert>{:else}
-				<Alert title="Sequence flow builder">
-					Build a flow with a sequence of scripts that are executed one after the other. For each
-					step, you can either choose a script from the hub or generate one from scratch using
-					Windmill AI. Each step inputs are automatically filled in with the previous step's
-					outputs. At the end of the process, flow inputs are inferred and you just need to fill
-					them in.
-				</Alert>
-			{/if}
-			{#each $modulesStore as copilotModule, i}
-				<div>
-					{#if i === 1 && $modulesStore[i - 1].type === 'trigger'}
-						<div class="flex flex-row items-center mb-4 gap-1">
-							<p class="text-sm font-semibold">For loop</p>
-							<Badge color="indigo">{copilotModule.id}_loop</Badge>
-						</div>
-					{/if}
-					<div class={i === 1 && $modulesStore[i - 1].type === 'trigger' ? 'pl-4' : ''}>
-						<div class="flex flex-row items-center justify-between">
-							<div class="flex flex-row justify-between items-center w-full mb-2">
-								<div class="flex flex-row items-center gap-1">
-									<p class="text-sm font-semibold"
-										>{copilotModule.type === 'trigger' ? 'Trigger' : 'Action'}</p
-									>
-									<Badge color="indigo">{copilotModule.id}</Badge>
-								</div>
-								{#if flowCopilotMode === 'sequence' && i >= 1}
-									<button
-										on:click={() => {
-											if ($currentStepStore !== undefined) {
-												$currentStepStore = numberToChars(i < $modulesStore.length - 1 ? i : i - 1)
-											}
-											modulesStore.update((prev) => {
-												prev.splice(i, 1)
-												prev.forEach((m, idx) => {
-													m.id = numberToChars(idx)
-												})
-												return prev
-											})
-										}}
-									>
-										<X />
-									</button>
-								{/if}
-							</div>
-						</div>
-						{#if copilotModule.source !== undefined}
-							<div
-								class={classNames(
-									'p-4 gap-4 flex flex-row grow  transition-all items-center rounded-md justify-between border',
-									$currentStepStore !== undefined && i < charsToNumber($currentStepStore)
-										? 'bg-gray-700/10'
-										: 'bg-surface'
-								)}
-							>
-								<div class="flex items-center gap-4">
-									<div
-										class="rounded-md p-1 flex justify-center items-center bg-surface border h-6 w-6"
-									>
-										{#if copilotModule.source === 'hub' && copilotModule.selectedCompletion}
-											<svelte:component
-												this={APP_TO_ICON_COMPONENT[copilotModule.selectedCompletion['app']]}
-											/>
-										{:else}
-											<Wand2 />
-										{/if}
-									</div>
-
-									<div class="w-full text-left font-normal">
-										<div class="text-primary flex-wrap text-sm font-medium">
-											{copilotModule.source === 'hub' && copilotModule.selectedCompletion
-												? copilotModule.selectedCompletion.summary +
-												  ' (' +
-												  copilotModule.selectedCompletion.app +
-												  ')'
-												: `Generate "${copilotModule.description}" in ${
-														copilotModule.lang === 'bun' ? 'TypeScript' : 'Python'
-												  }`}
-										</div>
-									</div>
-								</div>
-								{#if copilotModule.source === 'hub' && copilotModule.selectedCompletion && copilotModule.selectedCompletion?.kind !== 'script'}
-									<Badge color="gray" baseClass="border"
-										>{capitalize(copilotModule.selectedCompletion.kind.toString())}</Badge
-									>
-								{/if}
-
-								<button
-									on:click={() => {
-										copilotModule = {
-											...copilotModule,
-											selectedCompletion: undefined,
-											source: undefined,
-											lang: undefined
-										}
-										if ($currentStepStore !== undefined && i < charsToNumber($currentStepStore)) {
-											$currentStepStore = numberToChars(i)
-										}
-									}}
-								>
-									<X />
-								</button>
-							</div>
-							{#if $currentStepStore !== undefined && i < charsToNumber($currentStepStore)}
-								<p class="font-semibold text-sm text-green-600"
-									>Already generated, edit step to regenerate from this point</p
-								>
-							{/if}
-						{:else}
-							<input
-								name="description"
-								type="text"
-								placeholder={copilotModule.type === 'trigger'
-									? 'describe what should trigger your flow e.g. "new slack message"'
-									: 'describe what this step should do'}
-								bind:value={copilotModule.description}
-								on:input={() => {
-									if (copilotModule.description.length > 2) {
-										getHubCompletions(copilotModule.description, i, copilotModule.type)
-									} else {
-										copilotModule.hubCompletions = []
-									}
-								}}
-							/>
-						{/if}
-						{#if copilotModule.description.length > 2 && copilotModule.source === undefined}
-							<div class="divide-y border rounded-md transition-all mt-2">
-								<button
-									class="p-4 gap-4 flex flex-row hover:bg-surface-hover bg-surface transition-all items-center rounded-md justify-between w-full"
-									on:click={() => {
-										copilotModule = {
-											...copilotModule,
-											source: 'custom',
-											selectedCompletion: undefined,
-											lang: 'bun'
-										}
-									}}
-								>
-									<div class="flex items-center gap-4">
-										<div
-											class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
-										>
-											<Wand2 />
-										</div>
-
-										<div class="w-full text-left text-sm">
-											<div class="text-primary flex-wrap font-medium">
-												Generate "{copilotModule.description}" in TypeScript
-											</div>
-										</div>
-									</div>
-								</button>
-								<button
-									class="p-4 gap-4 flex flex-row hover:bg-surface-hover bg-surface transition-all items-center rounded-md justify-between w-full"
-									on:click={() => {
-										copilotModule = {
-											...copilotModule,
-											source: 'custom',
-											selectedCompletion: undefined,
-											lang: 'python3'
-										}
-									}}
-								>
-									<div class="flex items-center gap-4">
-										<div
-											class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
-										>
-											<Wand2 />
-										</div>
-
-										<div class="w-full text-left text-sm">
-											<div class="text-primary flex-wrap font-medium">
-												Generate "{copilotModule.description}" in Python
-											</div>
-										</div>
-									</div>
-								</button>
-							</div>
-							{#if copilotModule.hubCompletions.length > 0}
-								<p class="mt-2 font-semibold text-sm">Hub scripts</p>
-								<ul class="divide-y border rounded-md transition-all mt-1">
-									{#each copilotModule.hubCompletions as item (item.path)}
-										<li>
-											<button
-												class="p-4 gap-4 flex flex-row hover:bg-surface-hover bg-surface transition-all items-center rounded-md justify-between w-full"
-												on:click={() => {
-													copilotModule = {
-														...copilotModule,
-														source: 'hub',
-														selectedCompletion: item,
-														lang: undefined
-													}
-												}}
-											>
-												<div class="flex items-center gap-4">
-													<div
-														class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
-													>
-														<svelte:component this={APP_TO_ICON_COMPONENT[item['app']]} />
-													</div>
-
-													<div class="text-left font-normal text-sm">
-														<div class="text-primary font-medium">
-															{(item.summary ?? '') + ' (' + item['app'] + ')'}
-														</div>
-													</div>
-												</div>
-												{#if item.kind !== 'script'}
-													<Badge color="gray" baseClass="border"
-														>{capitalize(item.kind.toString())}</Badge
-													>
-												{/if}
-											</button>
-										</li>
-									{/each}
-								</ul>
-							{/if}
-						{/if}
-					</div>
-				</div>
-			{/each}
-			{#if flowCopilotMode !== 'trigger'}
-				<div class="flex justify-start">
-					<Button
-						startIcon={{ icon: Plus }}
-						size="xs"
-						variant="border"
-						on:click={() =>
-							modulesStore.update((prev) => [
-								...prev,
-								{
-									id: numberToChars(prev.length),
-									type: 'script',
-									description: '',
-									code: '',
-									source: undefined,
-									hubCompletions: [],
-									selectedCompletion: undefined,
-									lang: undefined
-								}
-							])}>Add step</Button
-					>
-				</div>
-			{/if}
-
-			<Button
-				on:click={() =>
-					$currentStepStore !== undefined
-						? genFlow(charsToNumber($currentStepStore), $flowStore.value.modules)
-						: genFlow(0, $flowStore.value.modules)}
-				spacingSize="md"
-				startIcon={{ icon: Wand2 }}
-				disabled={$modulesStore.find((m) => m.source === undefined) !== undefined}
-			>
-				{$currentStepStore !== undefined
-					? `Regenerate flow from step '${$currentStepStore}'`
-					: 'Build flow'}
-			</Button>
-		</div>
-	</DrawerContent>
-</Drawer>
diff --git a/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte b/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte
deleted file mode 100644
index d4d2a781fb..0000000000
--- a/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script lang="ts">
-	import { base } from '$lib/base'
-	import { getContext } from 'svelte'
-	import ManualPopover from '../ManualPopover.svelte'
-	import Button from '../common/button/Button.svelte'
-	import { WindmillIcon } from '../icons'
-	import type { FlowCopilotContext } from './flow'
-	import { charsToNumber } from '../flows/idUtils'
-	import { copilotInfo } from '$lib/stores'
-	import Popover from '$lib/components/meltComponents/Popover.svelte'
-	import type { FlowModule } from '$lib/gen'
-	import type { FlowEditorContext } from '../flows/types'
-	import { ExternalLink, Wand2 } from 'lucide-svelte'
-	import { twMerge } from 'tailwind-merge'
-
-	export let copilotLoading: boolean
-	export let copilotStatus: string
-	export let abortController: AbortController | undefined
-	export let genFlow: (index: number, modules: FlowModule[], stepOnly?: boolean) => void
-	export let finishCopilotFlowBuilder: () => void
-
-	let copilotPopover: ManualPopover | undefined = undefined
-
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
-
-	const { modulesStore, drawerStore, currentStepStore } =
-		getContext<FlowCopilotContext>('FlowCopilotContext')
-
-	$: copilotStatus.length > 0 ? copilotPopover?.open() : copilotPopover?.close()
-
-	$: copilotStatus && copilotPopover?.refresh()
-</script>
-
-{#if $copilotInfo.enabled}
-	<ManualPopover bind:this={copilotPopover}>
-		<Button
-			size="xs"
-			btnClasses={twMerge(
-				$currentStepStore !== undefined ? 'z-[901]' : '',
-				copilotLoading || ($currentStepStore !== undefined && $currentStepStore !== 'Input')
-					? ''
-					: 'text-violet-800 dark:text-violet-400'
-			)}
-			on:click={() => {
-				if (copilotLoading || ($currentStepStore !== undefined && $currentStepStore !== 'Input')) {
-					abortController?.abort()
-					copilotStatus = ''
-					if (!copilotLoading) {
-						$currentStepStore = undefined
-					}
-				} else {
-					$drawerStore?.openDrawer()
-				}
-			}}
-			startIcon={copilotLoading ||
-			($currentStepStore !== undefined && $currentStepStore !== 'Input')
-				? undefined
-				: {
-						icon: Wand2
-				  }}
-			color={copilotLoading || ($currentStepStore !== undefined && $currentStepStore !== 'Input')
-				? 'red'
-				: 'light'}
-			variant={copilotLoading || ($currentStepStore !== undefined && $currentStepStore !== 'Input')
-				? 'contained'
-				: 'border'}
-		>
-			{#if copilotLoading}
-				<WindmillIcon white class="mr-1 text-white" height="16px" width="20px" spin="veryfast" />
-			{/if}
-
-			{copilotLoading
-				? 'Stop'
-				: $currentStepStore !== undefined && $currentStepStore !== 'Input'
-				? 'Exit'
-				: 'AI Builder'}
-		</Button>
-		<div slot="content" class="text-sm flex flex-row items-center z-[901]">
-			<span class="font-semibold">
-				{copilotStatus}
-			</span>
-			{#if !copilotLoading && $currentStepStore !== undefined && $currentStepStore !== 'Input'}
-				<Button
-					size="xs"
-					btnClasses="ml-2"
-					color="red"
-					on:click={() => {
-						$drawerStore?.openDrawer()
-					}}
-				>
-					Edit prompts
-				</Button>
-				<Button
-					btnClasses="ml-2"
-					color="green"
-					size="xs"
-					on:click={() => {
-						if ($currentStepStore === undefined) {
-							return
-						}
-						const stepNb = charsToNumber($currentStepStore)
-						if (stepNb >= $modulesStore.length - 1) {
-							finishCopilotFlowBuilder()
-						} else {
-							genFlow(stepNb + 1, $flowStore.value.modules)
-						}
-					}}
-				>
-					{charsToNumber($currentStepStore) >= $modulesStore.length - 1
-						? 'Flow inputs'
-						: 'Next step'}
-				</Button>
-			{/if}
-		</div>
-	</ManualPopover>
-{:else}
-	<Popover placement="bottom">
-		<svelte:fragment slot="trigger">
-			<Button
-				size="xs"
-				startIcon={{
-					icon: Wand2
-				}}
-				btnClasses="text-violet-800 dark:text-violet-400"
-				color={'light'}
-				variant={'border'}
-				nonCaptureEvent
-			>
-				AI builder
-			</Button>
-		</svelte:fragment>
-		<svelte:fragment slot="content">
-			<div class="block text-primary p-4">
-				<p class="text-sm"
-					>Enable Windmill AI in the <a
-						href="{base}/workspace_settings?tab=ai"
-						target="_blank"
-						class="inline-flex flex-row items-center gap-1"
-						>workspace settings <ExternalLink size={16} /></a
-					></p
-				>
-			</div>
-		</svelte:fragment>
-	</Popover>
-{/if}
diff --git a/frontend/src/lib/components/copilot/IteratorGen.svelte b/frontend/src/lib/components/copilot/IteratorGen.svelte
index cf02c9fb00..2eef512671 100644
--- a/frontend/src/lib/components/copilot/IteratorGen.svelte
+++ b/frontend/src/lib/components/copilot/IteratorGen.svelte
@@ -9,7 +9,7 @@
 	import type { FlowEditorContext } from '../flows/types'
 	import type { PickableProperties } from '../flows/previousResults'
 	import YAML from 'yaml'
-	import { sliceModules } from '../flows/flowStateUtils'
+	import { sliceModules } from '../flows/flowStateUtils.svelte'
 	import { dfs } from '../flows/dfs'
 	import { yamlStringifyExceptKeys } from './utils'
 	import { copilotInfo, stepInputCompletionEnabled } from '$lib/stores'
@@ -38,7 +38,7 @@
 		}
 		abortController = new AbortController()
 		loading = true
-		const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+		const flow: Flow = JSON.parse(JSON.stringify(flowStore.val))
 		const idOrders = dfs(flow.value.modules, (x) => x.id)
 		const upToIndex = idOrders.indexOf($selectedId)
 		if (upToIndex === -1) {
diff --git a/frontend/src/lib/components/copilot/MetadataGen.svelte b/frontend/src/lib/components/copilot/MetadataGen.svelte
index 3eaa1d20e3..9c42bafcdf 100644
--- a/frontend/src/lib/components/copilot/MetadataGen.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGen.svelte
@@ -11,6 +11,7 @@
 	import { yamlStringifyExceptKeys } from './utils'
 	import type { ChatCompletionMessageParam } from 'openai/resources/index.mjs'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
 
 	type PromptConfig = {
 		system: string
@@ -78,6 +79,8 @@ Generate a description for the flow below:
 		}
 	}
 
+	export let aiId: string | undefined = undefined
+	export let aiDescription: string | undefined = undefined
 	export let content: string | undefined
 	export let code: string | undefined = undefined
 	export let flow: FlowValue | undefined = undefined
@@ -187,104 +190,117 @@ Generate a description for the flow below:
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-	class={twMerge('relative', $$props.class)}
-	bind:clientWidth={width}
-	on:keydown={(event) => {
-		if (!$copilotInfo.enabled || !$metadataCompletionEnabled) {
-			return
-		}
-		if (event.key === 'Tab') {
-			if (manualDisabled) {
-				event.preventDefault()
-				manualDisabled = false
-			} else if (!loading && generatedContent) {
-				event.preventDefault()
-				content = generatedContent
-				generatedContent = ''
-			} else if (!loading && !content) {
-				event.preventDefault()
-				generateContent()
-			}
-		} else if (event.key === 'Escape' && !manualDisabled) {
-			event.preventDefault()
-			event.stopPropagation()
-			if (loading) {
-				abortController.abort()
-			} else {
-				manualDisabled = true
-				generatedContent = ''
-			}
-		} else if (event.key === 'Backspace' && !loading && !content) {
-			manualDisabled = true
-			generatedContent = ''
+<TriggerableByAI
+	id={aiId}
+	description={aiDescription}
+	onTrigger={(value) => {
+		if (value) {
+			content = value
+			dispatchIfMounted('change', { content })
 		}
 	}}
 >
 	<div
-		class="absolute left-[0.5rem] {elementType === 'textarea'
-			? 'top-[1.3rem]'
-			: 'top-[0.3rem]'}  flex flex-row gap-2 items-start pointer-events-none"
+		class={twMerge('relative', $$props.class)}
+		bind:clientWidth={width}
+		on:keydown={(event) => {
+			if (!$copilotInfo.enabled || !$metadataCompletionEnabled) {
+				return
+			}
+			if (event.key === 'Tab') {
+				if (manualDisabled) {
+					event.preventDefault()
+					manualDisabled = false
+				} else if (!loading && generatedContent) {
+					event.preventDefault()
+					content = generatedContent
+					generatedContent = ''
+				} else if (!loading && !content) {
+					event.preventDefault()
+					generateContent()
+				}
+			} else if (event.key === 'Escape' && !manualDisabled) {
+				event.preventDefault()
+				event.stopPropagation()
+				if (loading) {
+					abortController.abort()
+				} else {
+					manualDisabled = true
+					generatedContent = ''
+				}
+			} else if (event.key === 'Backspace' && !loading && !content) {
+				manualDisabled = true
+				generatedContent = ''
+			}
+		}}
 	>
-		{#if active}
-			<span
-				class={twMerge(
-					'absolute text-xs bg-violet-100 text-violet-800 dark:bg-gray-700 dark:text-violet-400 px-1 py-0.5 rounded-md flex flex-row items-center justify-center gap-2 transition-all shrink-0',
-					!loading && generatedContent.length > 0
-						? 'bg-green-100 text-green-800 dark:text-green-400 dark:bg-green-700'
-						: ''
-				)}
-			>
-				<span class="px-0.5 py-0.5 rounded-md text-2xs text-bold flex flex-row items-center gap-1">
-					{#if loading}
-						ESC
-					{:else}
-						TAB
-					{/if}
-					{#if loading}
-						<Loader2 class="animate-spin" size={12} />
-					{:else if generatedContent}
-						<Check size={12} />
-					{:else}
-						<Wand2 size={12} />
-					{/if}
+		<div
+			class="absolute left-[0.5rem] {elementType === 'textarea'
+				? 'top-[1.3rem]'
+				: 'top-[0.3rem]'}  flex flex-row gap-2 items-start pointer-events-none"
+		>
+			{#if active}
+				<span
+					class={twMerge(
+						'absolute text-xs bg-violet-100 text-violet-800 dark:bg-gray-700 dark:text-violet-400 px-1 py-0.5 rounded-md flex flex-row items-center justify-center gap-2 transition-all shrink-0',
+						!loading && generatedContent.length > 0
+							? 'bg-green-100 text-green-800 dark:text-green-400 dark:bg-green-700'
+							: ''
+					)}
+				>
+					<span
+						class="px-0.5 py-0.5 rounded-md text-2xs text-bold flex flex-row items-center gap-1"
+					>
+						{#if loading}
+							ESC
+						{:else}
+							TAB
+						{/if}
+						{#if loading}
+							<Loader2 class="animate-spin" size={12} />
+						{:else if generatedContent}
+							<Check size={12} />
+						{:else}
+							<Wand2 size={12} />
+						{/if}
+					</span>
 				</span>
-			</span>
-			<div
-				bind:clientHeight={genHeight}
-				class={twMerge(
-					'text-sm leading-6 indent-[3.5rem] text-gray-500 dark:text-gray-400 pr-1',
-					elementType === 'input' ? 'text-ellipsis overflow-hidden whitespace-nowrap' : ''
-				)}
-				style={elementType === 'input' ? `max-width: calc(${width}px - 0.5rem)` : ''}
-			>
-				{generatedContent}
+				<div
+					bind:clientHeight={genHeight}
+					class={twMerge(
+						'text-sm leading-6 indent-[3.5rem] text-gray-500 dark:text-gray-400 pr-1',
+						elementType === 'input' ? 'text-ellipsis overflow-hidden whitespace-nowrap' : ''
+					)}
+					style={elementType === 'input' ? `max-width: calc(${width}px - 0.5rem)` : ''}
+				>
+					{generatedContent}
+				</div>
+			{/if}
+		</div>
+		{#if elementType === 'textarea'}
+			<div>
+				<div class="flex flex-row-reverse !text-3xs text-tertiary -mt-4">GH Markdown</div>
+				<textarea
+					bind:this={el}
+					bind:value={content}
+					use:autosize
+					{...elementProps}
+					placeholder={!active ? elementProps.placeholder : ''}
+					class={active ? '!indent-[3.5rem]' : ''}
+					on:focus={() => (focused = true)}
+					on:blur={() => (focused = false)}
+				></textarea>
 			</div>
-		{/if}
-	</div>
-	{#if elementType === 'textarea'}
-		<div>
-			<div class="flex flex-row-reverse !text-3xs text-tertiary -mt-4">GH Markdown</div>
-			<textarea
+		{:else}
+			<input
 				bind:this={el}
 				bind:value={content}
-				use:autosize
-				{...elementProps}
 				placeholder={!active ? elementProps.placeholder : ''}
 				class={active ? '!indent-[3.5rem]' : ''}
 				on:focus={() => (focused = true)}
 				on:blur={() => (focused = false)}
-			></textarea>
-		</div>
-	{:else}
-		<input
-			bind:this={el}
-			bind:value={content}
-			placeholder={!active ? elementProps.placeholder : ''}
-			class={active ? '!indent-[3.5rem]' : ''}
-			on:focus={() => (focused = true)}
-			on:blur={() => (focused = false)}
-		/>
-	{/if}
-	<!-- <slot {updateFocus} {active} {generatedContent} classNames={active ? '!indent-[8.8rem]' : ''} /> -->
-</div>
+			/>
+		{/if}
+		<!-- <slot {updateFocus} {active} {generatedContent} classNames={active ? '!indent-[8.8rem]' : ''} /> -->
+	</div>
+</TriggerableByAI>
diff --git a/frontend/src/lib/components/copilot/PredicateGen.svelte b/frontend/src/lib/components/copilot/PredicateGen.svelte
index 89adfe9814..0c771bb1c1 100644
--- a/frontend/src/lib/components/copilot/PredicateGen.svelte
+++ b/frontend/src/lib/components/copilot/PredicateGen.svelte
@@ -7,7 +7,7 @@
 	import type { FlowEditorContext } from '../flows/types'
 	import type { PickableProperties } from '../flows/previousResults'
 	import YAML from 'yaml'
-	import { sliceModules } from '../flows/flowStateUtils'
+	import { sliceModules } from '../flows/flowStateUtils.svelte'
 	import { dfs } from '../flows/dfs'
 	import { yamlStringifyExceptKeys } from './utils'
 	import { copilotInfo, stepInputCompletionEnabled } from '$lib/stores'
@@ -29,7 +29,7 @@
 	async function generatePredicate() {
 		abortController = new AbortController()
 		loading = true
-		const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+		const flow: Flow = JSON.parse(JSON.stringify(flowStore.val))
 		const idOrders = dfs(flow.value.modules, (x) => x.id)
 		const upToIndex = idOrders.indexOf($selectedId)
 		if (upToIndex === -1) {
diff --git a/frontend/src/lib/components/copilot/ScriptFix.svelte b/frontend/src/lib/components/copilot/ScriptFix.svelte
index a6dd7e2cdb..568abeb507 100644
--- a/frontend/src/lib/components/copilot/ScriptFix.svelte
+++ b/frontend/src/lib/components/copilot/ScriptFix.svelte
@@ -2,172 +2,23 @@
 	import { base } from '$lib/base'
 	import { Button } from '../common'
 
-	import { SUPPORTED_LANGUAGES, copilot } from './lib'
+	import { SUPPORTED_LANGUAGES } from './lib'
 	import type { SupportedLanguage } from '$lib/common'
-	import { sendUserToast } from '$lib/toast'
-	import type Editor from '../Editor.svelte'
-	import { dbSchemas, copilotInfo, type DBSchema, workspaceStore } from '$lib/stores'
-	import type DiffEditor from '../DiffEditor.svelte'
-	import { scriptLangToEditorLang } from '$lib/scripts'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
-	import { writable } from 'svelte/store'
-	import { WindmillIcon } from '../icons'
-	import HighlightCode from '../HighlightCode.svelte'
-	import LoadingIcon from '../apps/svelte-select/lib/LoadingIcon.svelte'
 	import { autoPlacement } from '@floating-ui/core'
-	import { Check, Wand2, X, RotateCw } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { WandSparkles } from 'lucide-svelte'
+	import { aiChatManager } from './chat/AIChatManager.svelte'
+	import { copilotInfo } from '$lib/stores'
 
-	// props
-	export let lang: SupportedLanguage
-	export let editor: Editor | undefined
-	export let diffEditor: DiffEditor | undefined
-	export let error: string
-	export let args: Record<string, any>
-	export let chatMode: boolean = false
-
-	// state
-	let genLoading: boolean = false
-	let generatedCode = writable<string>('')
-	let generatedExplanation = writable<string>('')
-	let dbSchema: DBSchema | undefined = undefined
-	let abortController: AbortController | undefined = undefined
-
-	const dispatch = createEventDispatcher<{
-		fix: null
-	}>()
-
-	async function onFix() {
-		if (!error) {
-			return
-		}
-		try {
-			genLoading = true
-			abortController = new AbortController()
-			await copilot(
-				{
-					language: lang,
-					code: editor?.getCode() || '',
-					error,
-					dbSchema: dbSchema,
-					type: 'fix',
-					workspace: $workspaceStore!
-				},
-				generatedCode,
-				abortController,
-				generatedExplanation
-			)
-			setupDiff()
-			diffEditor?.setModified($generatedCode)
-			showDiff()
-		} catch (err) {
-			if (!abortController?.signal.aborted) {
-				if (err?.message) {
-					sendUserToast('Failed to generate code: ' + err.message, true)
-				} else {
-					sendUserToast('Failed to generate code', true)
-					console.error(err)
-				}
-			}
-		} finally {
-			genLoading = false
-		}
-	}
-
-	function acceptDiff() {
-		editor?.setCode(diffEditor?.getModified() || '')
-		editor?.format()
-		clear()
-	}
-
-	function rejectDiff() {
-		clear()
-	}
-
-	function setupDiff() {
-		diffEditor?.setupModel(scriptLangToEditorLang(lang))
-		diffEditor?.setOriginal(editor?.getCode() || '')
-	}
-
-	function showDiff() {
-		diffEditor?.show()
-		editor?.hide()
-	}
-
-	function hideDiff() {
-		editor?.show()
-		diffEditor?.hide()
-	}
-
-	function clear() {
-		$generatedCode = ''
-		$generatedExplanation = ''
-	}
-
-	$: lang && clear()
-
-	$: !$generatedCode && hideDiff()
-
-	function updateSchema(lang, args) {
-		const schemaRes = lang === 'graphql' ? args.api : args.database
-		if (typeof schemaRes === 'string') {
-			dbSchema = $dbSchemas[schemaRes.replace('$res:', '')]
-		}
-	}
-	$: updateSchema(lang, args)
-
-	let popover: Popover | undefined = undefined
+	let {
+		lang
+	}: {
+		lang: SupportedLanguage
+	} = $props()
 </script>
 
 {#if SUPPORTED_LANGUAGES.has(lang)}
-	{#if !genLoading && $generatedCode.length > 0}
-		<div class="flex gap-1">
-			<Button
-				title="Discard generated code"
-				size="xs"
-				color="red"
-				spacingSize="xs2"
-				on:click={() => {
-					popover?.close()
-					rejectDiff()
-				}}
-				variant="contained"
-				startIcon={{ icon: X }}
-				propagateEvent={true}
-			>
-				Discard
-			</Button>
-			<Button
-				title="Accept generated code"
-				size="xs"
-				color="green"
-				spacingSize="xs2"
-				on:click={() => {
-					popover?.close()
-					acceptDiff()
-				}}
-				startIcon={{ icon: Check }}
-				propagateEvent={true}
-			>
-				Accept
-			</Button>
-			<Button
-				size="xs"
-				color="light"
-				spacingSize="xs2"
-				on:click={() => {
-					$generatedExplanation = ''
-					popover?.open()
-					onFix()
-				}}
-				startIcon={{ icon: RotateCw }}
-				title="Retry"
-				btnClasses="text-violet-800 dark:text-violet-400"
-			/>
-		</div>
-	{/if}
 	<Popover
-		bind:this={popover}
 		floatingConfig={{
 			middleware: [
 				autoPlacement({
@@ -175,75 +26,39 @@
 				})
 			]
 		}}
-		closeOnOutsideClick={!genLoading}
-		closeButton={!genLoading}
 		displayArrow={true}
 	>
-		<svelte:fragment slot="trigger" let:isOpen>
+		<svelte:fragment slot="trigger">
 			<div class="flex flex-row">
 				<Button
 					title="Fix code"
 					size="xs"
-					color={genLoading ? 'red' : 'light'}
+					color="light"
 					spacingSize="xs2"
-					startIcon={genLoading ? undefined : { icon: Wand2 }}
-					propagateEvent={!chatMode}
-					on:click={chatMode
-						? () => dispatch('fix')
-						: genLoading
-						? () => abortController?.abort()
-						: $generatedCode.length > 0
-							? () => {}
-							: () => onFix()}
-					btnClasses={genLoading
-						? ''
-						: 'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 min-w-[84px]'}
+					startIcon={{ icon: WandSparkles }}
+					on:click={() => {
+						if ($copilotInfo.enabled) {
+							aiChatManager.fix()
+						}
+					}}
+					btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 min-w-[84px]"
+					propagateEvent={!$copilotInfo.enabled}
 				>
-					{#if genLoading}
-						<WindmillIcon
-							white
-							class="mr-1 text-white"
-							height="16px"
-							width="20px"
-							spin="veryfast"
-						/>
-						Stop
-					{:else if $generatedCode.length > 0}
-						<span class="text-xs">{isOpen ? 'Hide' : 'Show'}</span>
-					{:else}
-						AI Fix
-					{/if}
+					AI Fix
 				</Button>
 			</div>
 		</svelte:fragment>
 		<svelte:fragment slot="content">
 			<div class="p-4">
-				{#if $copilotInfo.enabled}
-					<div class="w-[42rem] min-h-[3rem] max-h-[34rem] overflow-y-auto">
-						{#if $generatedCode.length > 0 && genLoading}
-							<div class="overflow-x-scroll">
-								<HighlightCode language={lang} code={$generatedCode} />
-							</div>
-						{:else if genLoading}
-							<LoadingIcon />
-						{/if}
-						{#if $generatedExplanation.length > 0}
-							<p class="text-sm mt-2"
-								><span class="font-bold">Explanation: test</span> {$generatedExplanation}</p
-							>
-						{/if}
-					</div>
-				{:else}
-					<div class="w-80">
-						<p class="text-sm"
-							>Enable Windmill AI in the <a
-								class="inline-flex flex-row items-center gap-1"
-								href="{base}/workspace_settings?tab=ai"
-								target="_blank">workspace settings</a
-							></p
-						></div
-					>
-				{/if}
+				<div class="w-80">
+					<p class="text-sm"
+						>Enable Windmill AI in the <a
+							class="inline-flex flex-row items-center gap-1"
+							href="{base}/workspace_settings?tab=ai"
+							target="_blank">workspace settings</a
+						></p
+					></div
+				>
 			</div>
 		</svelte:fragment>
 	</Popover>
diff --git a/frontend/src/lib/components/copilot/ScriptGen.svelte b/frontend/src/lib/components/copilot/ScriptGen.svelte
index a0b141d86d..02e48cf20a 100644
--- a/frontend/src/lib/components/copilot/ScriptGen.svelte
+++ b/frontend/src/lib/components/copilot/ScriptGen.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { base } from '$lib/base'
 	import { Button } from '../common'
 
@@ -27,33 +29,49 @@
 	import { onDestroy } from 'svelte'
 	import ProviderModelSelector from './chat/ProviderModelSelector.svelte'
 
-	// props
-	export let iconOnly: boolean = false
-	export let lang: SupportedLanguage | 'bunnative' | 'frontend' | undefined
-	export let editor: Editor | SimpleEditor | undefined
-	export let diffEditor: DiffEditor | undefined
-	export let inlineScript = false
-	export let args: Record<string, any>
-	export let transformer = false
-
-	$: if (lang == 'bunnative') {
-		lang = 'bun'
+	interface Props {
+		// props
+		iconOnly?: boolean
+		lang: SupportedLanguage | 'bunnative' | 'frontend' | undefined
+		editor: Editor | SimpleEditor | undefined
+		diffEditor: DiffEditor | undefined
+		inlineScript?: boolean
+		args: Record<string, any>
+		transformer?: boolean
 	}
 
+	let {
+		iconOnly = false,
+		lang = $bindable(),
+		editor,
+		diffEditor,
+		inlineScript = false,
+		args,
+		transformer = false
+	}: Props = $props()
+
+	run(() => {
+		if (lang == 'bunnative') {
+			lang = 'bun'
+		}
+	})
+
 	// state
-	let funcDesc = ''
-	let trimmedDesc = ''
-	let genLoading: boolean = false
-	let input: HTMLTextAreaElement | undefined
+	let funcDesc = $state('')
+	let trimmedDesc = $state('')
+	let genLoading: boolean = $state(false)
+	let input: HTMLTextAreaElement | undefined = $state()
 	let generatedCode = writable<string>('')
-	let dbSchema: DBSchema | undefined = undefined
-	let abortController: AbortController | undefined = undefined
-	let blockPopupOpen = false
-	let mode: 'gen' | 'edit' = 'gen'
+	let dbSchema: DBSchema | undefined = $state(undefined)
+	let abortController: AbortController | undefined = $state(undefined)
+	let blockPopupOpen = $state(false)
+	let mode: 'gen' | 'edit' = $state('gen')
 
-	let button: HTMLButtonElement | undefined
+	let button: HTMLButtonElement | undefined = $state()
 
-	$: trimmedDesc = funcDesc.trim()
+	run(() => {
+		trimmedDesc = funcDesc.trim()
+	})
 
 	async function onGenerate(closePopup: () => void) {
 		if (trimmedDesc.length <= 0) {
@@ -143,15 +161,21 @@
 		diffEditor?.hide()
 	}
 
-	$: input && setTimeout(() => input?.focus(), 100)
+	run(() => {
+		input && setTimeout(() => input?.focus(), 100)
+	})
 
 	function clear() {
 		$generatedCode = ''
 	}
 
-	$: lang && clear()
+	run(() => {
+		lang && clear()
+	})
 
-	$: !$generatedCode && hideDiff()
+	run(() => {
+		!$generatedCode && hideDiff()
+	})
 
 	function updateSchema(lang, args, dbSchemas) {
 		const schemaRes = lang === 'graphql' ? args.api : args.database
@@ -167,9 +191,11 @@
 		}
 	}
 
-	$: updateSchema(lang, args, $dbSchemas)
+	run(() => {
+		updateSchema(lang, args, $dbSchemas)
+	})
 
-	let codeDiv: HTMLDivElement | undefined
+	let codeDiv: HTMLDivElement | undefined = $state()
 	let lastScrollHeight = 0
 	function updateScroll() {
 		if (codeDiv && lastScrollHeight !== codeDiv.scrollHeight) {
@@ -178,7 +204,7 @@
 		}
 	}
 
-	let promptHistory: string[] = []
+	let promptHistory: string[] = $state([])
 	function getPromptHistory() {
 		try {
 			promptHistory = JSON.parse(localStorage.getItem('prompts-' + lang) || '[]')
@@ -210,11 +236,15 @@
 			console.error('error interacting with local storage', e)
 		}
 	}
-	$: lang && getPromptHistory()
+	run(() => {
+		lang && getPromptHistory()
+	})
 
-	$: $generatedCode && updateScroll()
+	run(() => {
+		$generatedCode && updateScroll()
+	})
 
-	let innerWidth = 0
+	let innerWidth = $state(0)
 
 	function autoResize() {
 		if (input) {
@@ -241,7 +271,7 @@
 	})
 </script>
 
-<svelte:window on:resize={autoResize} bind:innerWidth />
+<svelte:window onresize={autoResize} bind:innerWidth />
 
 {#if genLoading}
 	<div transition:fade class="fixed z-[4999] inset-0 bg-gray-500/75"></div>
@@ -308,7 +338,7 @@
 		}}
 		disabled={blockPopupOpen}
 	>
-		<svelte:fragment slot="trigger">
+		{#snippet trigger()}
 			{#if inlineScript}
 				<Button
 					size="xs"
@@ -372,8 +402,8 @@
 					{/if}
 				</Button>
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="content" let:close>
+		{/snippet}
+		{#snippet content({ close })}
 			<div class="p-4">
 				{#if genLoading}
 					<div class="w-[42rem] min-h-[3rem] max-h-[34rem] overflow-y-scroll" bind:this={codeDiv}>
@@ -388,15 +418,23 @@
 				{:else if $copilotInfo.enabled}
 					<div class="flex flex-col gap-4">
 						<div class="flex flex-row justify-between items-center w-96 gap-2">
-							<ToggleButtonGroup class="w-auto shrink-0 h-auto" bind:selected={mode} let:item>
-								<ToggleButton
-									value={'gen'}
-									label="Generate from scratch"
-									light
-									class="px-2"
-									{item}
-								/>
-								<ToggleButton value={'edit'} label="Edit existing code" light class="px-2" {item} />
+							<ToggleButtonGroup class="w-auto shrink-0 h-auto" bind:selected={mode}>
+								{#snippet children({ item })}
+									<ToggleButton
+										value={'gen'}
+										label="Generate from scratch"
+										light
+										class="px-2"
+										{item}
+									/>
+									<ToggleButton
+										value={'edit'}
+										label="Edit existing code"
+										light
+										class="px-2"
+										{item}
+									/>
+								{/snippet}
 							</ToggleButtonGroup>
 
 							<ProviderModelSelector />
@@ -405,8 +443,8 @@
 							<textarea
 								bind:this={input}
 								bind:value={funcDesc}
-								on:input={autoResize}
-								on:keydown={({ key, shiftKey }) => {
+								oninput={autoResize}
+								onkeydown={({ key, shiftKey }) => {
 									if (key === 'Enter' && !shiftKey && trimmedDesc.length > 0) {
 										onGenerate(() => close())
 										return false
@@ -451,7 +489,7 @@
 								{/each}
 								<button
 									class="underline text-xs text-start px-2 text-secondary font-normal"
-									on:click={clearPromptHistory}>clear history</button
+									onclick={clearPromptHistory}>clear history</button
 								>
 							</div>
 						{/if}
@@ -468,14 +506,14 @@
 									{#if dbSchema && dbSchema.stringified.length > MAX_SCHEMA_LENGTH}
 										<TooltipV2 notClickable placement="top">
 											<AlertTriangle size={16} class="text-yellow-500" />
-											<svelte:fragment slot="text">
+											{#snippet text()}
 												The schema is about {addThousandsSeparator(
-													dbSchema.stringified.length / 3.5
+													(dbSchema?.stringified.length ?? 0) / 3.5
 												)}
 												tokens. To avoid exceeding the model's context length, it will be truncated to
 												{addThousandsSeparator(MAX_SCHEMA_LENGTH / 3.5)}
 												tokens.
-											</svelte:fragment>
+											{/snippet}
 										</TooltipV2>
 									{/if}
 								</div>
@@ -484,16 +522,19 @@
 										class="w-auto shrink-0"
 										selected={dbSchema?.publicOnly ? 'true' : 'false'}
 										on:selected={handlePublicOnlySelected}
-										let:item
 									>
-										<ToggleButton
-											value={'true'}
-											label={(dbSchema.schema?.dbo ? 'Dbo' : 'Public') + ' schema'}
-											small
-											light
-											{item}
-										/>
-										<ToggleButton value={'false'} label="All schemas" small light {item} />
+										{#snippet children({ item })}
+											<ToggleButton
+												value={'true'}
+												label={(dbSchema?.lang !== 'graphql' && dbSchema?.schema?.dbo
+													? 'Dbo'
+													: 'Public') + ' schema'}
+												small
+												light
+												{item}
+											/>
+											<ToggleButton value={'false'} label="All schemas" small light {item} />
+										{/snippet}
 									</ToggleButtonGroup>
 								{/if}
 							</div>
@@ -511,6 +552,6 @@
 					</p>
 				{/if}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</Popover>
 {/if}
diff --git a/frontend/src/lib/components/copilot/StepGen.svelte b/frontend/src/lib/components/copilot/StepGen.svelte
deleted file mode 100644
index cc8fb5efde..0000000000
--- a/frontend/src/lib/components/copilot/StepGen.svelte
+++ /dev/null
@@ -1,246 +0,0 @@
-<script lang="ts">
-	import { copilotInfo, workspaceStore } from '$lib/stores'
-	import { createEventDispatcher, getContext } from 'svelte'
-	import type { FlowEditorContext } from '../flows/types'
-	import type { FlowCopilotContext, FlowCopilotModule } from './flow'
-	import { ScriptService, type FlowModule, type Script } from '$lib/gen'
-	import { APP_TO_ICON_COMPONENT } from '../icons'
-	import { sendUserToast } from '$lib/toast'
-	import { nextId } from '../flows/flowModuleNextId'
-	import { Wand2 } from 'lucide-svelte'
-	import SearchItems from '../SearchItems.svelte'
-	import { defaultIfEmptyString, emptyString } from '$lib/utils'
-
-	export let index: number
-	export let open: boolean | undefined
-	export let close: () => void
-	export let funcDesc: string
-	export let modules: FlowModule[]
-	export let trigger = false
-	export let disableAi = false
-
-	// state
-	let input: HTMLInputElement | undefined
-	let hubCompletions: FlowCopilotModule['hubCompletions'] = []
-	let selectedCompletion: FlowCopilotModule['selectedCompletion'] = undefined
-	let lang: FlowCopilotModule['lang'] = undefined
-
-	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
-	const { modulesStore: copilotModulesStore, genFlow } =
-		getContext<FlowCopilotContext>('FlowCopilotContext')
-
-	let scripts: Script[] | undefined = undefined
-	let filteredItems: (Script & { marked?: string })[] = []
-	$: prefilteredItems = scripts ?? []
-
-	async function loadScripts(): Promise<void> {
-		const loadedScripts = await ScriptService.listScripts({
-			workspace: $workspaceStore!,
-			perPage: 300,
-			kinds: trigger ? 'trigger' : 'script'
-		})
-
-		scripts = loadedScripts
-	}
-
-	$: scripts == undefined && funcDesc?.length > 1 && loadScripts()
-
-	let doneTs = 0
-	async function getHubCompletions(text: string) {
-		try {
-			// make sure we display the results of the last request last
-			const ts = Date.now()
-			const scripts = (
-				await ScriptService.queryHubScripts({
-					text: `${text}`,
-					limit: 3,
-					kind: trigger ? 'trigger' : 'script'
-				})
-			).map((s) => ({
-				...s,
-				path: `hub/${s.version_id}/${s.app}/${s.summary.toLowerCase().replaceAll(/\s+/g, '_')}`
-			}))
-			if (ts < doneTs) return
-			doneTs = ts
-
-			hubCompletions = scripts as FlowCopilotModule['hubCompletions']
-		} catch (err) {
-			if (err.name !== 'CancelError') throw err
-		}
-	}
-
-	async function onGenerate() {
-		if (!selectedCompletion && !$copilotInfo.enabled) {
-			sendUserToast(
-				'Windmill AI is not enabled, you can activate it in the workspace settings',
-				true
-			)
-			return
-		}
-		$copilotModulesStore = [
-			{
-				id: nextId($flowStateStore, $flowStore),
-				type: trigger ? 'trigger' : 'script',
-				description: funcDesc,
-				code: '',
-				source: selectedCompletion ? 'hub' : 'custom',
-				hubCompletions,
-				selectedCompletion,
-				editor: undefined,
-				lang
-			}
-		]
-		genFlow?.(index, modules, true)
-	}
-
-	const dispatch = createEventDispatcher()
-	$: {
-		if (open) {
-			setTimeout(() => {
-				input?.focus()
-			}, 0)
-		}
-	}
-</script>
-
-<SearchItems
-	filter={funcDesc}
-	items={prefilteredItems}
-	bind:filteredItems
-	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
-/>
-
-<div class="text-primary transition-all {funcDesc?.length > 0 ? 'w-96' : 'w-60'}">
-	<div>
-		<div class="flex p-2 relative">
-			<input
-				type="text"
-				bind:this={input}
-				bind:value={funcDesc}
-				on:input={() => {
-					if (funcDesc?.length > 2) {
-						getHubCompletions(funcDesc)
-					} else {
-						hubCompletions = []
-					}
-				}}
-				placeholder="Search {trigger ? 'triggers' : 'scripts'} or AI gen"
-			/>
-			{#if funcDesc?.length === 0}
-				<Wand2
-					size={14}
-					class="absolute right-4 top-1/2 -translate-y-1/2 fill-current opacity-70 text-violet-800 dark:text-violet-400"
-				/>
-			{/if}
-		</div>
-		{#if !disableAi && funcDesc?.length > 0}
-			<ul class="transition-all divide-y">
-				<li>
-					<button
-						class="py-2 gap-4 flex flex-row hover:bg-surface-hover transition-all items-center justify-between w-full"
-						on:click={() => {
-							lang = 'bun'
-							onGenerate()
-							close()
-						}}
-					>
-						<div class="flex items-center gap-2.5 px-2">
-							<div
-								class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
-							>
-								<Wand2 size={14} class="text-violet-800 dark:text-violet-400" />
-							</div>
-
-							<div class="text-left text-xs text-secondary">
-								Generate "{funcDesc}" in TypeScript
-							</div>
-						</div>
-					</button>
-				</li>
-				<li>
-					<button
-						class="py-2 gap-4 flex flex-row hover:bg-surface-hover transition-all items-center justify-between w-full"
-						on:click={() => {
-							lang = 'python3'
-							onGenerate()
-							close()
-						}}
-					>
-						<div class="flex items-center gap-2.5 px-2">
-							<div
-								class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
-							>
-								<Wand2 size={14} class="text-violet-800 dark:text-violet-400" />
-							</div>
-
-							<div class="text-left text-xs text-secondary">
-								Generate "{funcDesc}" in Python
-							</div>
-						</div>
-					</button>
-				</li>
-			</ul>
-		{/if}
-		{#if funcDesc?.length > 0 && filteredItems?.length > 0}
-			<div class="text-left mt-2">
-				<p class="text-xs text-secondary ml-2">Workspace {trigger ? 'Triggers' : 'Scripts'}</p>
-				<ul class="transition-all divide-y">
-					{#each filteredItems?.slice(0, 3) ?? [] as item (item.path)}
-						<li>
-							<button
-								class="py-2 gap-4 flex flex-row hover:bg-surface-hover transition-all items-center justify-between w-full"
-								on:click={() => {
-									dispatch('insert', { path: item.path, summary: item.summary })
-									close()
-								}}
-							>
-								<div class="flex items-center gap-2.5 px-2">
-									<div
-										class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
-									>
-										<svelte:component this={APP_TO_ICON_COMPONENT[item['app']]} />
-									</div>
-
-									<div class="text-left text-xs text-secondary">
-										{defaultIfEmptyString(item.summary, item.path)}
-									</div>
-								</div>
-							</button>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		{/if}
-		{#if hubCompletions.length > 0}
-			<div class="text-left mt-2">
-				<p class="text-xs text-secondary ml-2">Hub {trigger ? 'Triggers' : 'Scripts'}</p>
-				<ul class="transition-all divide-y">
-					{#each hubCompletions as item (item.path)}
-						<li>
-							<button
-								class="py-2 gap-4 flex flex-row hover:bg-surface-hover transition-all items-center justify-between w-full"
-								on:click={() => {
-									selectedCompletion = item
-									close()
-									onGenerate()
-								}}
-							>
-								<div class="flex items-center gap-2.5 px-2">
-									<div
-										class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
-									>
-										<svelte:component this={APP_TO_ICON_COMPONENT[item['app']]} />
-									</div>
-
-									<div class="text-left text-xs text-secondary">
-										{item.summary ?? ''} ({item.app})
-									</div>
-								</div>
-							</button>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		{/if}
-	</div>
-</div>
diff --git a/frontend/src/lib/components/copilot/StepInputGen.svelte b/frontend/src/lib/components/copilot/StepInputGen.svelte
index 839a73ee2d..d38569fa4b 100644
--- a/frontend/src/lib/components/copilot/StepInputGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputGen.svelte
@@ -9,7 +9,7 @@
 	import type { FlowEditorContext } from '../flows/types'
 	import type { PickableProperties } from '../flows/previousResults'
 	import YAML from 'yaml'
-	import { sliceModules } from '../flows/flowStateUtils'
+	import { sliceModules } from '../flows/flowStateUtils.svelte'
 	import { dfs } from '../flows/dfs'
 	import { yamlStringifyExceptKeys } from './utils'
 	import type { FlowCopilotContext } from './flow'
@@ -48,14 +48,14 @@
 			return
 		}
 		const properties = {
-			...($flowStore.schema?.properties as Record<string, SchemaProperty> | undefined),
+			...(flowStore.val.schema?.properties as Record<string, SchemaProperty> | undefined),
 			[newFlowInput]: schemaProperty
 		}
 		const required = [
-			...(($flowStore.schema?.required as string[] | undefined) ?? []),
+			...((flowStore.val.schema?.required as string[] | undefined) ?? []),
 			newFlowInput
 		]
-		$flowStore.schema = {
+		flowStore.val.schema = {
 			$schema: 'https://json-schema.org/draft/2020-12/schema',
 			properties,
 			required,
@@ -69,7 +69,7 @@
 		}
 		abortController = new AbortController()
 		loading = true
-		const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+		const flow: Flow = JSON.parse(JSON.stringify(flowStore.val))
 		const idOrders = dfs(flow.value.modules, (x) => x.id)
 		const upToIndex = idOrders.indexOf($selectedId)
 		if (upToIndex === -1) {
diff --git a/frontend/src/lib/components/copilot/StepInputsGen.svelte b/frontend/src/lib/components/copilot/StepInputsGen.svelte
index 4b7ed8afd4..5d749382b9 100644
--- a/frontend/src/lib/components/copilot/StepInputsGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputsGen.svelte
@@ -2,7 +2,7 @@
 	import { base } from '$lib/base'
 	import YAML from 'yaml'
 	import { yamlStringifyExceptKeys } from './utils'
-	import { sliceModules } from '../flows/flowStateUtils'
+	import { sliceModules } from '../flows/flowStateUtils.svelte'
 	import { dfs } from '../flows/dfs'
 	import type { FlowEditorContext } from '../flows/types'
 	import type { PickableProperties } from '../flows/previousResults'
@@ -41,7 +41,7 @@
 		abortController = new AbortController()
 		loading = true
 		stepInputsLoading?.set(true)
-		const flow: Flow = JSON.parse(JSON.stringify($flowStore))
+		const flow: Flow = JSON.parse(JSON.stringify(flowStore.val))
 		const idOrders = dfs(flow.value.modules, (x) => x.id)
 		const upToIndex = idOrders.indexOf($selectedId)
 		if (upToIndex === -1) {
@@ -127,17 +127,17 @@ input_name2: expression2
 			return
 		}
 		const properties = {
-			...($flowStore.schema?.properties as Record<string, SchemaProperty> | undefined),
+			...(flowStore.val.schema?.properties as Record<string, SchemaProperty> | undefined),
 			...newFlowInputs.reduce((acc, x) => {
 				acc[x] = (schema?.properties ?? {})[x]
 				return acc
 			}, {})
 		}
 		const required = [
-			...(($flowStore.schema?.required as string[] | undefined) ?? []),
+			...((flowStore.val.schema?.required as string[] | undefined) ?? []),
 			...newFlowInputs
 		]
-		$flowStore.schema = {
+		flowStore.val.schema = {
 			$schema: 'https://json-schema.org/draft/2020-12/schema',
 			properties,
 			required,
diff --git a/frontend/src/lib/components/copilot/autocomplete/request.ts b/frontend/src/lib/components/copilot/autocomplete/request.ts
index 0d6700a2b4..9c96f7610b 100644
--- a/frontend/src/lib/components/copilot/autocomplete/request.ts
+++ b/frontend/src/lib/components/copilot/autocomplete/request.ts
@@ -2,7 +2,7 @@ import { codeCompletionLoading, copilotInfo } from '$lib/stores'
 import { get } from 'svelte/store'
 
 import { getNonStreamingCompletion } from '../lib'
-import { getLangContext } from '../chat/core'
+import { getLangContext } from '../chat/script/core'
 import { type ScriptLang } from '$lib/gen/types.gen'
 
 const AUTOCOMPLETE_SYSTEM_PROMPT = `You're a code assistant. Your task is to help the user write code by suggesting the next edit for the user.
diff --git a/frontend/src/lib/components/copilot/chat/AIChat.svelte b/frontend/src/lib/components/copilot/chat/AIChat.svelte
index fa83e72346..9201ad773d 100644
--- a/frontend/src/lib/components/copilot/chat/AIChat.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChat.svelte
@@ -1,565 +1,164 @@
 <script lang="ts">
+	import AIChatDisplay from './AIChatDisplay.svelte'
+	import { onDestroy, untrack } from 'svelte'
+	import { type ScriptLang } from '$lib/gen'
 	import {
+		copilotInfo,
 		copilotSessionModel,
 		dbSchemas,
-		type DBSchema,
-		type DBSchemas,
-		SQLSchemaLanguages,
+		userStore,
 		workspaceStore
 	} from '$lib/stores'
-	import { writable, type Writable } from 'svelte/store'
-	import AIChatDisplay from './AIChatDisplay.svelte'
-	import {
-		chatRequest,
-		prepareSystemMessage,
-		prepareUserMessage,
-		type AIChatContext,
-		type ContextElement,
-		type DisplayMessage
-	} from './core'
-	import { createEventDispatcher, onDestroy, setContext } from 'svelte'
-	import {
-		type AIProviderModel,
-		type ListResourceResponse,
-		type ScriptLang,
-		ResourceService
-	} from '$lib/gen'
-	import { sendUserToast } from '$lib/toast'
-	import { openDB, type DBSchema as IDBSchema, type IDBPDatabase } from 'idb'
-	import { isInitialCode } from '$lib/script_helpers'
-	import { createLongHash, langToExt } from '$lib/editorUtils'
-	import { scriptLangToEditorLang } from '$lib/scripts'
-	import { diffLines } from 'diff'
+	import { aiChatManager, AIMode } from './AIChatManager.svelte'
+	import { base } from '$lib/base'
+	import HideButton from '$lib/components/apps/editor/settingsPanel/HideButton.svelte'
+	import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './script/core'
 
-	export let lang: ScriptLang | 'bunnative'
-	export let code: string
-	export let error: string | undefined
-	export let args: Record<string, any>
-	export let path: string | undefined
-	export let lastSavedCode: string | undefined = undefined
-	export let lastDeployedCode: string | undefined = undefined
-	export let diffMode: boolean = false
-
-	$: contextCodePath = path
-		? (path.split('/').pop() ?? 'script') + '.' + langToExt(scriptLangToEditorLang(lang))
-		: undefined
-
-	let initializedWithInitCode: boolean | null = null
-	$: lang && (initializedWithInitCode = null)
-
-	let db: { schema: DBSchema; resource: string } | undefined = undefined
-
-	function updateSchema(
-		lang: ScriptLang | 'bunnative',
-		args: Record<string, any>,
-		dbSchemas: DBSchemas
-	) {
-		try {
-			const schemaRes = lang === 'graphql' ? args.api : args.database
-			if (typeof schemaRes === 'string') {
-				const schemaPath = schemaRes.replace('$res:', '')
-				const schema = dbSchemas[schemaPath]
-				if (schema && schema.lang === lang) {
-					db = { schema, resource: schemaPath }
-				} else {
-					db = undefined
-				}
-			} else {
-				db = undefined
-			}
-		} catch (err) {
-			console.error('Could not update schema', err)
-		}
-	}
-	$: updateSchema(lang, args, $dbSchemas)
-
-	let selectedContext: ContextElement[] = []
-
-	let availableContext: ContextElement[] = []
-
-	let dbResources: ListResourceResponse = []
-
-	async function updateDBResources(workspace: string | undefined) {
-		if (workspace) {
-			dbResources = await ResourceService.listResource({
-				workspace: workspace,
-				resourceType: SQLSchemaLanguages.join(',')
-			})
-		}
-	}
-
-	async function updateAvailableContext(
-		contextCodePath: string | undefined,
-		code: string,
-		lang: ScriptLang | 'bunnative',
-		error: string | undefined,
-		db: { schema: DBSchema; resource: string } | undefined,
-		providerModel: AIProviderModel | undefined,
-		dbSchemas: DBSchemas,
-		dbResources: ListResourceResponse,
-		lastSavedCode: string | undefined,
-		lastDeployedCode: string | undefined
-	) {
-		if (!contextCodePath) {
-			return
-		}
-		try {
-			let newAvailableContext: ContextElement[] = [
-				{
-					type: 'code',
-					title: contextCodePath,
-					content: code,
-					lang
-				}
-			]
-			if (!providerModel?.model.endsWith('/thinking')) {
-				for (const d of dbResources) {
-					const loadedSchema = dbSchemas[d.path]
-					newAvailableContext.push({
-						type: 'db',
-						title: d.path,
-						// If the db is already fetched, add the schema to the context
-						...(loadedSchema ? { schema: loadedSchema } : {})
-					})
-				}
-			}
-
-			if (lastSavedCode && lastSavedCode !== code) {
-				newAvailableContext.push({
-					type: 'diff',
-					title: 'diff_with_last_saved_draft',
-					content: lastSavedCode ?? '',
-					diff: diffLines(lastSavedCode ?? '', code),
-					lang
-				})
-			}
-
-			if (lastDeployedCode && lastDeployedCode !== code) {
-				newAvailableContext.push({
-					type: 'diff',
-					title: 'diff_with_last_deployed_version',
-					content: lastDeployedCode ?? '',
-					diff: diffLines(lastDeployedCode ?? '', code),
-					lang
-				})
-			}
-
-			if (error) {
-				newAvailableContext = [
-					...newAvailableContext,
-					{
-						type: 'error',
-						title: 'error',
-						content: error
-					}
-				]
-			}
-
-			if (db) {
-				// If the db is already fetched, add it to the selected context
-				if (
-					!selectedContext.find((c) => c.type === 'db' && c.title === db.resource) &&
-					!providerModel?.model.endsWith('/thinking')
-				) {
-					selectedContext = [
-						...selectedContext,
-						{
-							type: 'db',
-							title: db.resource,
-							schema: db.schema
-						}
-					]
-				}
-			}
-
-			availableContext = newAvailableContext
-
-			if (
-				code &&
-				((initializedWithInitCode === null && !isInitialCode(code)) || initializedWithInitCode)
-			) {
-				selectedContext = [
-					{
-						type: 'code',
-						title: contextCodePath,
-						content: code,
-						lang
-					}
-				]
-			}
-
-			if (code && initializedWithInitCode === null) {
-				initializedWithInitCode = isInitialCode(code)
-			}
-
-			selectedContext = selectedContext
-				.map((c) =>
-					c.type === 'code_piece' && code.includes(c.content)
-						? c
-						: availableContext.find((ac) => ac.type === c.type && ac.title === c.title)
-				)
-				.filter((c) => c !== undefined) as ContextElement[]
-		} catch (err) {
-			console.error('Could not update available context', err)
-		}
-	}
-
-	function updateDisplayMessages(dbSchemas: DBSchemas) {
-		return displayMessages.map((m) => ({
-			...m,
-			contextElements: m.contextElements?.map((c) =>
-				c.type === 'db'
-					? {
-							type: 'db',
-							title: c.title,
-							schema: dbSchemas[c.title]
-						}
-					: c
-			) as ContextElement[]
-		}))
-	}
-
-	$: updateDBResources($workspaceStore)
-
-	$: updateAvailableContext(
-		contextCodePath,
-		code,
-		lang,
-		error,
-		db,
-		$copilotSessionModel,
-		$dbSchemas,
-		dbResources,
-		lastSavedCode,
-		lastDeployedCode
+	const isAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin)
+	const hasCopilot = $derived($copilotInfo.enabled)
+	const disabled = $derived(
+		!hasCopilot ||
+			(aiChatManager.mode === AIMode.SCRIPT &&
+				aiChatManager.scriptEditorOptions?.lang &&
+				!SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(aiChatManager.scriptEditorOptions.lang))
+	)
+	const disabledMessage = $derived(
+		!hasCopilot
+			? isAdmin
+				? `Enable Windmill AI in your [workspace settings](${base}/workspace_settings?tab=ai) to use this chat`
+				: 'Ask an admin to enable Windmill AI in this workspace to use this chat'
+			: aiChatManager.mode === AIMode.SCRIPT &&
+				  aiChatManager.scriptEditorOptions?.lang &&
+				  !SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(aiChatManager.scriptEditorOptions.lang)
+				? `Windmill AI does not support the ${aiChatManager.scriptEditorOptions.lang} language yet.`
+				: ''
 	)
 
-	let instructions = ''
-	let loading = writable(false)
-	let currentReply: Writable<string> = writable('')
-
-	const dispatch = createEventDispatcher<{
-		applyCode: { code: string }
-		showDiffMode: null
-	}>()
-
-	setContext<AIChatContext>('AIChatContext', {
-		loading,
-		currentReply,
-		applyCode: (code: string) => {
-			dispatch('applyCode', { code })
-		}
-	})
-
-	let currentChatId: string = createLongHash()
-	let savedChats: Record<
-		string,
-		{
-			actualMessages: { role: 'user' | 'assistant' | 'system'; content: string }[]
-			displayMessages: DisplayMessage[]
-			title: string
-			id: string
-			lastModified: number
-		}
-	> = {}
-
-	$: pastChats = Object.values(savedChats)
-		.filter((c) => c.id !== currentChatId)
-		.sort((a, b) => b.lastModified - a.lastModified)
-
-	let messages: { role: 'user' | 'assistant' | 'system'; content: string }[] = [
-		prepareSystemMessage()
+	const suggestions = [
+		'Where can I see my latest runs?',
+		'How do I trigger a script with a webhook endpoint?',
+		'How can I connect to a database?',
+		'How do I schedule a recurring job?'
 	]
 
-	let displayMessages: DisplayMessage[] = []
-	let abortController: AbortController | undefined = undefined
+	export async function generateStep(moduleId: string, lang: ScriptLang, instructions: string) {
+		aiChatManager.generateStep(moduleId, lang, instructions)
+	}
 
-	$: displayMessages = updateDisplayMessages($dbSchemas)
-
-	async function sendRequest(options: { removeDiff?: boolean; addBackCode?: boolean } = {}) {
-		if (!instructions.trim()) {
-			return
-		}
-		try {
-			// Remove code pieces from the context to not include them on the next request
-			const oldSelectedContext = selectedContext
-			selectedContext = selectedContext.filter((c) => c.type !== 'code_piece')
-			if (options.removeDiff) {
-				selectedContext = selectedContext.filter((c) => c.type !== 'diff')
-			}
-			if (options.addBackCode) {
-				const codeContext = availableContext.find(
-					(c) => c.type === 'code' && c.title === contextCodePath
-				)
-				if (codeContext) {
-					selectedContext = [...selectedContext, codeContext]
-				}
-			}
-			loading.set(true)
-			aiChatDisplay?.enableAutomaticScroll()
-			abortController = new AbortController()
-
-			displayMessages = [
-				...displayMessages,
-				{
-					role: 'user',
-					content: instructions,
-					contextElements: oldSelectedContext
-				}
-			]
-			const oldInstructions = instructions
-			instructions = ''
-			const userMessage = await prepareUserMessage(oldInstructions, lang, oldSelectedContext)
-
-			messages.push({ role: 'user', content: userMessage })
-			await saveChat()
-
-			$currentReply = ''
-			await chatRequest(
-				messages,
-				abortController,
-				lang,
-				oldSelectedContext.filter((c) => c.type === 'db').length > 0,
-				(token) => currentReply.update((prev) => prev + token)
-			)
-
-			messages.push({ role: 'assistant', content: $currentReply })
-			displayMessages = [
-				...displayMessages,
-				{
-					role: 'assistant',
-					content: $currentReply,
-					contextElements: oldSelectedContext.filter((c) => c.type === 'code')
-				}
-			]
-			currentReply.set('')
-			await saveChat()
-		} catch (err) {
-			console.error(err)
-			if (err instanceof Error) {
-				sendUserToast('Failed to send request: ' + err.message, true)
-			} else {
-				sendUserToast('Failed to send request', true)
-			}
-		} finally {
-			loading.set(false)
-		}
+	export async function sendRequest(
+		options: {
+			removeDiff?: boolean
+			addBackCode?: boolean
+			instructions?: string
+			mode?: AIMode
+			lang?: ScriptLang | 'bunnative'
+			isPreprocessor?: boolean
+		} = {}
+	) {
+		aiChatManager.sendRequest(options)
 	}
 
 	function cancel() {
-		currentReply.set('')
-		abortController?.abort()
-	}
-
-	async function saveChat() {
-		if (displayMessages.length > 0) {
-			const updatedChat = {
-				actualMessages: messages,
-				displayMessages: displayMessages,
-				title: displayMessages[0].content.slice(0, 50),
-				id: currentChatId,
-				lastModified: Date.now()
-			}
-			savedChats = {
-				...savedChats,
-				[updatedChat.id]: updatedChat
-			}
-
-			if (indexDB) {
-				await indexDB.put('chats', updatedChat)
-			}
-		}
-	}
-
-	async function saveAndClear() {
-		await saveChat()
-		currentChatId = createLongHash()
-		displayMessages = []
-		messages = [prepareSystemMessage()]
-	}
-
-	function deletePastChat(id: string) {
-		savedChats = Object.fromEntries(Object.entries(savedChats).filter(([key]) => key !== id))
-		indexDB?.delete('chats', id)
-	}
-
-	function loadPastChat(id: string) {
-		const chat = savedChats[id]
-		if (chat) {
-			messages = chat.actualMessages
-			displayMessages = chat.displayMessages
-			currentChatId = id
-			aiChatDisplay?.enableAutomaticScroll()
-		}
+		aiChatManager.cancel()
 	}
 
 	export function addSelectedLinesToContext(lines: string, startLine: number, endLine: number) {
-		if (
-			selectedContext.find(
-				(c) => c.type === 'code_piece' && c.title === `L${startLine}-L${endLine}`
-			)
-		) {
-			return
-		}
-		selectedContext = [
-			...selectedContext,
-			{
-				type: 'code_piece',
-				title: `L${startLine}-L${endLine}`,
-				startLine,
-				endLine,
-				content: lines,
-				lang
-			}
-		]
-	}
-
-	export function fix() {
-		if (!contextCodePath) {
-			return
-		}
-		instructions = 'Fix the error'
-
-		const codeContext = availableContext.find(
-			(c) => c.type === 'code' && c.title === contextCodePath
-		)
-		const errorContext = availableContext.find((c) => c.type === 'error')
-
-		if (codeContext && errorContext) {
-			selectedContext = [codeContext, errorContext]
-		}
-
-		sendRequest()
-	}
-
-	export function askAi(
-		prompt: string,
-		options: { withCode?: boolean; withDiff?: boolean } = {
-			withCode: true,
-			withDiff: false
-		}
-	) {
-		instructions = prompt
-		const codeContext = availableContext.find(
-			(c) => c.type === 'code' && c.title === contextCodePath
-		)
-		if (!codeContext) {
-			return
-		}
-		selectedContext = [
-			...(options.withCode === false ? [] : [codeContext]),
-			...(options.withDiff
-				? [
-						{
-							type: 'diff' as const,
-							title: 'diff_with_last_deployed_version',
-							content: lastDeployedCode ?? '',
-							diff: diffLines(lastDeployedCode ?? '', code),
-							lang
-						}
-					]
-				: [])
-		]
-		sendRequest({
-			removeDiff: options.withDiff,
-			addBackCode: options.withCode === false
-		})
-		if (options.withDiff) {
-			dispatch('showDiffMode')
-		}
+		aiChatManager.contextManager.addSelectedLinesToContext(lines, startLine, endLine)
 	}
 
 	export function focusTextArea() {
 		aiChatDisplay?.focusInput()
 	}
 
-	interface ChatSchema extends IDBSchema {
-		chats: {
-			key: string
-			value: {
-				id: string
-				actualMessages: { role: 'user' | 'assistant' | 'system'; content: string }[]
-				displayMessages: DisplayMessage[]
-				title: string
-				lastModified: number
-			}
-		}
-	}
-
-	let indexDB: IDBPDatabase<ChatSchema> | undefined = undefined
-	async function initIndexDB() {
-		try {
-			console.log('Initializing chat history database')
-			indexDB = await openDB<ChatSchema>('copilot-chat-history', 1, {
-				upgrade(indexDB) {
-					if (!indexDB.objectStoreNames.contains('chats')) {
-						indexDB.createObjectStore('chats', { keyPath: 'id' })
-					}
-				}
-			})
-			console.log('Chat history database initialized')
-
-			const chats = await indexDB.getAll('chats')
-			console.log('Retrieved chats')
-			savedChats = chats.reduce(
-				(acc, chat) => {
-					acc[chat.id] = chat
-					return acc
-				},
-				{} as typeof savedChats
-			)
-		} catch (err) {
-			console.error('Could not open chat history database', err)
-		}
-	}
-
-	initIndexDB()
+	const historyManager = aiChatManager.historyManager
+	historyManager.init()
 
 	onDestroy(() => {
 		cancel()
-		indexDB?.close()
+		historyManager.close()
 	})
 
-	let aiChatDisplay: AIChatDisplay | undefined = undefined
+	let aiChatDisplay: AIChatDisplay | undefined = $state(undefined)
+
+	$effect(() => {
+		aiChatManager.listenForDbSchemasChanges($dbSchemas)
+	})
+
+	$effect(() => {
+		aiChatManager.listenForScriptEditorContextChange(
+			$dbSchemas,
+			$workspaceStore,
+			$copilotSessionModel
+		)
+	})
+
+	$effect(() => {
+		aiChatManager.updateMode(untrack(() => aiChatManager.mode))
+	})
+
+	$effect(() => {
+		aiChatManager.loadApiTools()
+	})
 </script>
 
+<svelte:window
+	on:keydown={(e) => {
+		if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
+			e.preventDefault()
+			aiChatManager.toggleOpen()
+			aiChatDisplay?.focusInput()
+		}
+	}}
+/>
+
+{#snippet headerLeft()}
+	<HideButton
+		hidden={false}
+		direction="right"
+		panelName="AI"
+		shortcut="L"
+		size="md"
+		on:click={() => aiChatManager.toggleOpen()}
+	/>
+{/snippet}
+
 <AIChatDisplay
 	bind:this={aiChatDisplay}
-	{pastChats}
-	bind:selectedContext
-	{availableContext}
-	messages={$currentReply
+	pastChats={historyManager.getPastChats()}
+	bind:selectedContext={
+		() => aiChatManager.contextManager.getSelectedContext(),
+		(sc) => {
+			aiChatManager.scriptEditorOptions && aiChatManager.contextManager.setSelectedContext(sc)
+		}
+	}
+	availableContext={aiChatManager.contextManager.getAvailableContext()}
+	messages={aiChatManager.currentReply
 		? [
-				...displayMessages,
+				...aiChatManager.displayMessages,
 				{
 					role: 'assistant',
-					content: $currentReply,
-					contextElements: selectedContext.filter((c) => c.type === 'code')
+					content: aiChatManager.currentReply,
+					contextElements: aiChatManager.contextManager
+						.getSelectedContext()
+						.filter((c) => c.type === 'code')
 				}
 			]
-		: displayMessages}
-	bind:instructions
-	on:sendRequest={() => sendRequest()}
-	on:cancel={cancel}
-	on:saveAndClear={saveAndClear}
-	on:deletePastChat={(e) => deletePastChat(e.detail.id)}
-	on:loadPastChat={(e) => loadPastChat(e.detail.id)}
-	on:analyzeChanges={() => {
-		askAi(
-			'Based on the changes I made to the code, look for potential issues and recommend better solutions',
-			{ withDiff: true }
-		)
+		: aiChatManager.displayMessages}
+	saveAndClear={aiChatManager.saveAndClear}
+	deletePastChat={(id) => {
+		historyManager.deletePastChat(id)
 	}}
-	on:explainChanges={() =>
-		askAi('Explain the changes I made to the code from the last diff', {
-			withCode: false,
-			withDiff: true
-		})}
-	on:suggestImprovements={() =>
-		askAi('Look for potential issues and recommend better solutions in the actual code')}
-	hasDiff={!!lastDeployedCode && lastDeployedCode !== code}
-	{diffMode}
->
-	<slot name="header-left" slot="header-left" />
-	<slot name="header-right" slot="header-right" />
-</AIChatDisplay>
+	loadPastChat={(id) => {
+		aiChatManager.loadPastChat(id)
+	}}
+	{cancel}
+	askAi={aiChatManager.askAi}
+	{headerLeft}
+	hasDiff={aiChatManager.scriptEditorOptions &&
+		!!aiChatManager.scriptEditorOptions.lastDeployedCode &&
+		aiChatManager.scriptEditorOptions.lastDeployedCode !== aiChatManager.scriptEditorOptions.code}
+	diffMode={aiChatManager.scriptEditorOptions?.diffMode ?? false}
+	{disabled}
+	{disabledMessage}
+	{suggestions}
+></AIChatDisplay>
diff --git a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
index f0d9a6c287..8749ecd00c 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
@@ -1,48 +1,70 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 	import AssistantMessage from './AssistantMessage.svelte'
-	import { createEventDispatcher, getContext } from 'svelte'
-	import { HistoryIcon, Loader2, Plus, X } from 'lucide-svelte'
+	import { type Snippet } from 'svelte'
+	import { HistoryIcon, Loader2, Plus, StopCircleIcon, X } from 'lucide-svelte'
+	import autosize from '$lib/autosize'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
-	import { type AIChatContext, type DisplayMessage, type ContextElement } from './core'
+	import { type DisplayMessage } from './shared'
+	import type { ContextElement } from './context'
 	import ContextElementBadge from './ContextElementBadge.svelte'
 	import ContextTextarea from './ContextTextarea.svelte'
 	import AvailableContextList from './AvailableContextList.svelte'
 	import ChatQuickActions from './ChatQuickActions.svelte'
 	import ProviderModelSelector from './ProviderModelSelector.svelte'
+	import ChatMode from './ChatMode.svelte'
+	import Markdown from 'svelte-exmarkdown'
+	import { aiChatManager, AIMode } from './AIChatManager.svelte'
 
-	export let pastChats: { id: string; title: string }[]
-	export let messages: DisplayMessage[]
-	export let instructions: string
-	export let selectedContext: ContextElement[]
-	export let availableContext: ContextElement[]
-	export let hasDiff: boolean
-	export let diffMode: boolean = false
-	const dispatch = createEventDispatcher<{
-		sendRequest: null
-		saveAndClear: null
-		deletePastChat: { id: string }
-		loadPastChat: { id: string }
-		analyzeChanges: null
-		explainChanges: null
-		suggestImprovements: null
-	}>()
+	let {
+		messages,
+		pastChats,
+		hasDiff,
+		diffMode = false, // todo: remove default
+		selectedContext = $bindable([]), // todo: remove default
+		availableContext = [], // todo: remove default
+		loadPastChat,
+		deletePastChat,
+		saveAndClear,
+		cancel,
+		askAi = () => {}, // todo: remove default,
+		headerLeft,
+		headerRight,
+		disabled = false,
+		disabledMessage = '',
+		suggestions = []
+	}: {
+		messages: DisplayMessage[]
+		pastChats: { id: string; title: string }[]
+		hasDiff?: boolean
+		diffMode: boolean
+		selectedContext: ContextElement[]
+		availableContext: ContextElement[]
+		loadPastChat: (id: string) => void
+		deletePastChat: (id: string) => void
+		saveAndClear: () => void
+		cancel: () => void
+		askAi?: (instructions: string, options?: { withCode?: boolean; withDiff?: boolean }) => void
+		headerLeft?: Snippet
+		headerRight?: Snippet
+		disabled?: boolean
+		disabledMessage?: string
+		suggestions?: string[]
+	} = $props()
 
-	const { loading, currentReply } = getContext<AIChatContext>('AIChatContext')
-
-	export function enableAutomaticScroll() {
-		automaticScroll = true
-	}
-
-	let contextTextareaComponent: ContextTextarea
+	let contextTextareaComponent: ContextTextarea | undefined = $state()
+	let instructionsTextarea: HTMLTextAreaElement | undefined = $state()
 
 	export function focusInput() {
-		contextTextareaComponent?.focus()
+		if (aiChatManager.mode === 'script') {
+			contextTextareaComponent?.focus()
+		} else {
+			instructionsTextarea?.focus()
+		}
 	}
 
-	let automaticScroll = true
-	let scrollEl: HTMLDivElement
+	let scrollEl: HTMLDivElement | undefined = $state()
 	async function scrollDown() {
 		scrollEl?.scrollTo({
 			top: scrollEl.scrollHeight,
@@ -50,11 +72,15 @@
 		})
 	}
 
-	let height = 0
-	$: automaticScroll && height && scrollDown()
+	let height = $state(0)
+	$effect(() => {
+		aiChatManager.automaticScroll && height && scrollDown()
+	})
 
 	function addContextToSelection(contextElement: ContextElement) {
 		if (
+			selectedContext &&
+			availableContext &&
 			!selectedContext.find(
 				(c) => c.type === contextElement.type && c.title === contextElement.title
 			) &&
@@ -65,6 +91,22 @@
 			selectedContext = [...selectedContext, contextElement]
 		}
 	}
+
+	function findLastIndex<T>(array: T[], predicate: (item: T) => boolean): number {
+		for (let i = array.length - 1; i >= 0; i--) {
+			if (predicate(array[i])) {
+				return i
+			}
+		}
+		return -1
+	}
+
+	function submitSuggestion(suggestion: string) {
+		aiChatManager.instructions = suggestion
+		aiChatManager.sendRequest()
+	}
+
+	const lastUserMessageIndex = $derived(findLastIndex(messages, (m) => m.role === 'user'))
 </script>
 
 <div class="flex flex-col h-full">
@@ -72,7 +114,7 @@
 		class="flex flex-row items-center justify-between gap-2 p-2 border-b border-gray-200 dark:border-gray-600"
 	>
 		<div class="flex flex-row items-center gap-2">
-			<slot name="header-left" />
+			{@render headerLeft?.()}
 			<p class="text-sm font-semibold">Chat</p>
 		</div>
 		<div class="flex flex-row items-center gap-2">
@@ -99,8 +141,8 @@
 								{#each pastChats as chat}
 									<button
 										class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
-										on:click={() => {
-											dispatch('loadPastChat', { id: chat.id })
+										onclick={() => {
+											loadPastChat(chat.id)
 											close()
 										}}
 									>
@@ -118,7 +160,7 @@
 											variant="border"
 											startIcon={{ icon: X }}
 											on:click={() => {
-												dispatch('deletePastChat', { id: chat.id })
+												deletePastChat(chat.id)
 											}}
 										/>
 									</button>
@@ -131,7 +173,7 @@
 			<Button
 				title="New chat"
 				on:click={() => {
-					dispatch('saveAndClear')
+					saveAndClear()
 				}}
 				size="md"
 				btnClasses="!p-1"
@@ -140,19 +182,19 @@
 				variant="border"
 				color="light"
 			/>
-			<slot name="header-right" />
+			{@render headerRight?.()}
 		</div>
 	</div>
 	{#if messages.length > 0}
 		<div
 			class="h-full overflow-y-scroll pt-2"
 			bind:this={scrollEl}
-			on:wheel={(e) => {
-				automaticScroll = false
+			onwheel={(e) => {
+				aiChatManager.automaticScroll = false
 			}}
 		>
 			<div class="flex flex-col" bind:clientHeight={height}>
-				{#each messages as message}
+				{#each messages as message, messageIndex}
 					{#if message.role === 'user' && message.contextElements}
 						<div class="flex flex-row gap-1 mb-1 overflow-scroll no-scrollbar px-2">
 							{#each message.contextElements as element}
@@ -164,8 +206,14 @@
 						class={twMerge(
 							'text-sm py-1 mx-2',
 							message.role === 'user' &&
-								'px-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 rounded-lg mb-2',
-							message.role === 'assistant' && 'px-[1px] mb-6'
+								'px-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 rounded-lg',
+							message.role === 'user'
+								? aiChatManager.loading && lastUserMessageIndex === messageIndex
+									? 'mb-1'
+									: 'mb-2'
+								: '',
+							(message.role === 'assistant' || message.role === 'tool') && 'px-[1px]',
+							message.role === 'tool' && 'text-tertiary'
 						)}
 					>
 						{#if message.role === 'assistant'}
@@ -174,8 +222,24 @@
 							{message.content}
 						{/if}
 					</div>
+					{#if message.role === 'user' && aiChatManager.loading && lastUserMessageIndex === messageIndex}
+						<div class="flex flex-row px-2 mb-2">
+							<Button
+								startIcon={{ icon: StopCircleIcon }}
+								size="xs3"
+								variant="border"
+								btnClasses="px-1.5"
+								color="light"
+								on:click={() => {
+									cancel()
+								}}
+							>
+								Stop
+							</Button>
+						</div>
+					{/if}
 				{/each}
-				{#if $loading && !$currentReply}
+				{#if aiChatManager.loading && !aiChatManager.currentReply}
 					<div class="mb-6 py-1 px-2">
 						<Loader2 class="animate-spin" />
 					</div>
@@ -185,56 +249,105 @@
 	{/if}
 
 	<div class:border-t={messages.length > 0}>
-		<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 px-2 no-scrollbar">
-			<Popover>
-				<svelte:fragment slot="trigger">
-					<div
-						class="border rounded-md px-1 py-0.5 font-normal text-tertiary text-xs hover:bg-surface-hover"
-						>@</div
-					>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
-					<AvailableContextList
-						{availableContext}
-						{selectedContext}
-						onSelect={(element) => {
-							addContextToSelection(element)
-							close()
+		{#if aiChatManager.mode === 'script'}
+			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 px-2 no-scrollbar">
+				<Popover>
+					<svelte:fragment slot="trigger">
+						<div
+							class="border rounded-md px-1 py-0.5 font-normal text-tertiary text-xs hover:bg-surface-hover"
+							>@</div
+						>
+					</svelte:fragment>
+					<svelte:fragment slot="content" let:close>
+						<AvailableContextList
+							{availableContext}
+							{selectedContext}
+							onSelect={(element) => {
+								addContextToSelection(element)
+								close()
+							}}
+						/>
+					</svelte:fragment>
+				</Popover>
+				{#each selectedContext as element}
+					<ContextElementBadge
+						contextElement={element}
+						deletable
+						on:delete={() => {
+							selectedContext = selectedContext?.filter(
+								(c) => c.type !== element.type || c.title !== element.title
+							)
 						}}
 					/>
-				</svelte:fragment>
-			</Popover>
-			{#each selectedContext as element}
-				<ContextElementBadge
-					contextElement={element}
-					deletable
-					on:delete={() => {
-						selectedContext = selectedContext.filter(
-							(c) => c.type !== element.type || c.title !== element.title
-						)
+				{/each}
+			</div>
+			<ContextTextarea
+				bind:this={contextTextareaComponent}
+				{availableContext}
+				{selectedContext}
+				isFirstMessage={messages.length === 0}
+				onAddContext={(contextElement) => addContextToSelection(contextElement)}
+				onSendRequest={() => {
+					if (!aiChatManager.loading) {
+						aiChatManager.sendRequest()
+					}
+				}}
+				onUpdateInstructions={(value) => (aiChatManager.instructions = value)}
+				{disabled}
+			/>
+		{:else}
+			<div class="relative w-full px-2 scroll-pb-2 pt-2">
+				<textarea
+					bind:this={instructionsTextarea}
+					bind:value={aiChatManager.instructions}
+					use:autosize
+					onkeydown={(e) => {
+						if (e.key === 'Enter' && !e.shiftKey && !aiChatManager.loading) {
+							e.preventDefault()
+							aiChatManager.sendRequest()
+						}
 					}}
-				/>
-			{/each}
-		</div>
-		<ContextTextarea
-			bind:this={contextTextareaComponent}
-			{instructions}
-			{availableContext}
-			{selectedContext}
-			isFirstMessage={messages.length === 0}
-			on:addContext={(e) => addContextToSelection(e.detail.contextElement)}
-			on:sendRequest={() => dispatch('sendRequest')}
-			on:updateInstructions={(e) => (instructions = e.detail.value)}
-		/>
+					rows={3}
+					placeholder={messages.length === 0 ? 'Ask anything' : 'Ask followup'}
+					class="resize-none"
+					{disabled}
+				></textarea>
+			</div>
+		{/if}
 		<div
 			class={`flex flex-row ${
-				hasDiff ? 'justify-between' : 'justify-end'
-			} items-center gap-2 px-0.5`}
+				aiChatManager.mode === 'script' && hasDiff ? 'justify-between' : 'justify-end'
+			} items-center px-0.5`}
 		>
-			{#if hasDiff}
-				<ChatQuickActions on:analyzeChanges on:explainChanges on:suggestImprovements {diffMode} />
+			{#if aiChatManager.mode === 'script' && hasDiff}
+				<ChatQuickActions {askAi} {diffMode} />
+			{/if}
+			{#if disabled}
+				<div class="text-tertiary text-xs my-2 px-2">
+					<Markdown md={disabledMessage} />
+				</div>
+			{:else}
+				<div class="flex flex-row gap-2 min-w-0">
+					<ChatMode />
+					<ProviderModelSelector />
+				</div>
 			{/if}
-			<ProviderModelSelector />
 		</div>
+		{#if (aiChatManager.mode === AIMode.NAVIGATOR || aiChatManager.mode === AIMode.ASK) && suggestions.length > 0 && messages.filter((m) => m.role === 'user').length === 0 && !disabled}
+			<div class="px-2 mt-4">
+				<div class="flex flex-col gap-2">
+					{#each suggestions as suggestion}
+						<Button
+							on:click={() => submitSuggestion(suggestion)}
+							size="xs2"
+							color="light"
+							btnClasses="whitespace-normal text-center font-normal"
+						>
+							{suggestion}
+						</Button>
+					{/each}
+				</div>
+			</div>
+		{/if}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/copilot/chat/AIChatManager.svelte.ts b/frontend/src/lib/components/copilot/chat/AIChatManager.svelte.ts
new file mode 100644
index 0000000000..450939ea58
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/AIChatManager.svelte.ts
@@ -0,0 +1,669 @@
+import type { AIProviderModel, ScriptLang } from '$lib/gen/types.gen'
+import type { ScriptOptions } from './ContextManager.svelte'
+import {
+	flowTools,
+	prepareFlowSystemMessage,
+	prepareFlowUserMessage,
+	type FlowAIChatHelpers
+} from './flow/core'
+import ContextManager from './ContextManager.svelte'
+import HistoryManager from './HistoryManager.svelte'
+import { processToolCall, type DisplayMessage, type Tool, type ToolCallbacks } from './shared'
+import type {
+	ChatCompletionChunk,
+	ChatCompletionMessageParam,
+	ChatCompletionMessageToolCall,
+	ChatCompletionSystemMessageParam,
+	ChatCompletionUserMessageParam
+} from 'openai/resources/chat/completions.mjs'
+import { prepareScriptSystemMessage, prepareScriptTools } from './script/core'
+import { navigatorTools, prepareNavigatorSystemMessage } from './navigator/core'
+import { loadApiTools } from './navigator/apiTools'
+import { prepareScriptUserMessage } from './script/core'
+import { prepareNavigatorUserMessage } from './navigator/core'
+import { sendUserToast } from '$lib/toast'
+import { getCompletion } from '../lib'
+import { dfs } from '$lib/components/flows/previousResults'
+import { getStringError } from './utils'
+import type { FlowModuleState, FlowState } from '$lib/components/flows/flowState'
+import type { CurrentEditor, ExtendedOpenFlow } from '$lib/components/flows/types'
+import { untrack } from 'svelte'
+import type { DBSchemas } from '$lib/stores'
+import { askTools, prepareAskSystemMessage } from './ask/core'
+
+type TriggerablesMap = Record<
+	string,
+	{
+		description: string
+		onTrigger: ((value?: string) => void) | undefined
+	}
+>
+
+export enum AIMode {
+	SCRIPT = 'script',
+	FLOW = 'flow',
+	NAVIGATOR = 'navigator',
+	ASK = 'ask'
+}
+
+class AIChatManager {
+	DEFAULT_SIZE = 22
+	NAVIGATION_SYSTEM_PROMPT = `
+	CONSIDERATIONS:
+	 - You are provided with a tool to switch to navigation mode, only use it when you are sure that the user is asking you to navigate the application, help them find something or fetch data from the API. Do not use it otherwise.
+	`
+	contextManager = new ContextManager()
+	historyManager = new HistoryManager()
+	abortController: AbortController | undefined = undefined
+
+	mode = $state<AIMode>(AIMode.NAVIGATOR)
+	size = $state<number>(localStorage.getItem('ai-chat-open') === 'true' ? this.DEFAULT_SIZE : 0)
+	savedSize = $state<number>(0)
+	instructions = $state<string>('')
+	pendingPrompt = $state<string>('')
+	loading = $state<boolean>(false)
+	currentReply = $state<string>('')
+	displayMessages = $state<DisplayMessage[]>([])
+	messages = $state<ChatCompletionMessageParam[]>([])
+	automaticScroll = $state<boolean>(true)
+	systemMessage = $state<ChatCompletionSystemMessageParam>({
+		role: 'system',
+		content: ''
+	})
+	tools = $state<Tool<any>[]>([])
+	helpers = $state<any | undefined>(undefined)
+
+	triggerablesByAI = $state<TriggerablesMap>({})
+	scriptEditorOptions = $state<ScriptOptions | undefined>(undefined)
+	scriptEditorApplyCode = $state<((code: string) => void) | undefined>(undefined)
+	scriptEditorShowDiffMode = $state<(() => void) | undefined>(undefined)
+	flowAiChatHelpers = $state<FlowAIChatHelpers | undefined>(undefined)
+	pendingNewCode = $state<string | undefined>(undefined)
+	apiTools = $state<Tool<any>[]>([])
+
+	allowedModes: Record<AIMode, boolean> = $derived({
+		script: this.scriptEditorOptions !== undefined,
+		flow: this.flowAiChatHelpers !== undefined,
+		navigator: true,
+		ask: true
+	})
+
+	open = $derived(this.size > 0)
+
+	async loadApiTools() {
+		if (this.apiTools.length === 0) {
+			this.apiTools = await loadApiTools()
+			if (this.mode === AIMode.NAVIGATOR) {
+				this.tools = [this.changeModeTool, ...navigatorTools, ...this.apiTools]
+			}
+		}
+	}
+
+	updateMode(currentMode: AIMode) {
+		if (
+			!this.allowedModes[currentMode] &&
+			Object.keys(this.allowedModes).filter((k) => this.allowedModes[k]).length === 1
+		) {
+			const firstKey = Object.keys(this.allowedModes).filter((k) => this.allowedModes[k])[0]
+			this.changeMode(firstKey as AIMode)
+		}
+	}
+
+	changeMode(
+		mode: AIMode,
+		pendingPrompt?: string,
+		options?: {
+			closeScriptSettings?: boolean
+		}
+	) {
+		this.mode = mode
+		this.pendingPrompt = pendingPrompt ?? ''
+		if (mode === AIMode.SCRIPT) {
+			this.systemMessage = prepareScriptSystemMessage()
+			this.systemMessage.content = this.NAVIGATION_SYSTEM_PROMPT + this.systemMessage.content
+			const context = this.contextManager.getSelectedContext()
+			const lang = this.scriptEditorOptions?.lang ?? 'bun'
+			this.tools = [this.changeModeTool, ...prepareScriptTools(lang, context)]
+			this.helpers = {
+				getLang: () => lang
+			}
+			if (options?.closeScriptSettings) {
+				const closeComponent = this.triggerablesByAI['close-script-builder-settings']
+				if (closeComponent) {
+					closeComponent.onTrigger?.()
+				}
+			}
+		} else if (mode === AIMode.FLOW) {
+			this.systemMessage = prepareFlowSystemMessage()
+			this.systemMessage.content = this.NAVIGATION_SYSTEM_PROMPT + this.systemMessage.content
+			this.tools = [this.changeModeTool, ...flowTools]
+			this.helpers = this.flowAiChatHelpers
+		} else if (mode === AIMode.NAVIGATOR) {
+			this.systemMessage = prepareNavigatorSystemMessage()
+			this.tools = [this.changeModeTool, ...navigatorTools, ...this.apiTools]
+			this.helpers = {}
+		} else if (mode === AIMode.ASK) {
+			this.systemMessage = prepareAskSystemMessage()
+			this.tools = [...askTools]
+			this.helpers = {}
+		}
+	}
+
+	canApplyCode = $derived(this.allowedModes.script && this.mode === AIMode.SCRIPT)
+
+	private changeModeTool = {
+		def: {
+			type: 'function' as const,
+			function: {
+				name: 'change_mode',
+				description:
+					'Change the AI mode to the one specified. Script mode is used to create scripts, and flow mode is used to create flows. Navigator mode is used to navigate the application and help the user find what they are looking for.',
+				parameters: {
+					type: 'object',
+					properties: {
+						mode: {
+							type: 'string',
+							description: 'The mode to change to',
+							enum: ['script', 'flow', 'navigator']
+						},
+						pendingPrompt: {
+							type: 'string',
+							description: 'The prompt to send to the new mode to fulfill the user request',
+							default: ''
+						}
+					},
+					required: ['mode']
+				}
+			}
+		},
+		fn: async ({ args, toolId, toolCallbacks }) => {
+			toolCallbacks.onToolCall(toolId, 'Switching to ' + args.mode + ' mode...')
+			this.changeMode(args.mode as AIMode, args.pendingPrompt, {
+				closeScriptSettings: true
+			})
+			toolCallbacks.onFinishToolCall(toolId, 'Switched to ' + args.mode + ' mode')
+			return 'Mode changed to ' + args.mode
+		}
+	}
+
+	openChat = () => {
+		this.size = this.savedSize > 0 ? this.savedSize : this.DEFAULT_SIZE
+		localStorage.setItem('ai-chat-open', 'true')
+	}
+
+	closeChat = () => {
+		this.savedSize = this.size
+		this.size = 0
+		localStorage.setItem('ai-chat-open', 'false')
+	}
+
+	toggleOpen = () => {
+		if (this.size > 0) {
+			this.savedSize = this.size
+		}
+		this.size = this.size === 0 ? (this.savedSize > 0 ? this.savedSize : this.DEFAULT_SIZE) : 0
+		localStorage.setItem('ai-chat-open', this.size === 0 ? 'false' : 'true')
+	}
+
+	askAi = (
+		prompt: string,
+		options: { withCode?: boolean; withDiff?: boolean } = {
+			withCode: true,
+			withDiff: false
+		}
+	) => {
+		if (this.scriptEditorOptions) {
+			this.contextManager.setAskAiContext(options)
+		}
+		this.instructions = prompt
+		this.sendRequest({
+			removeDiff: options.withDiff,
+			addBackCode: options.withCode === false
+		})
+		if (options.withDiff) {
+			this.scriptEditorShowDiffMode?.()
+		}
+	}
+
+	private chatRequest = async ({
+		messages,
+		abortController,
+		callbacks
+	}: {
+		messages: ChatCompletionMessageParam[]
+		abortController: AbortController
+		callbacks: ToolCallbacks & {
+			onNewToken: (token: string) => void
+			onMessageEnd: () => void
+		}
+	}) => {
+		try {
+			let completion: any = null
+
+			while (true) {
+				const systemMessage = this.systemMessage
+				const tools = this.tools
+				const helpers = this.helpers
+
+				let pendingPrompt = this.pendingPrompt
+				let pendingUserMessage: ChatCompletionUserMessageParam | undefined = undefined
+				if (pendingPrompt) {
+					if (this.mode === AIMode.SCRIPT) {
+						pendingUserMessage = await prepareScriptUserMessage(
+							pendingPrompt,
+							this.scriptEditorOptions?.lang as ScriptLang | 'bunnative',
+							this.contextManager.getSelectedContext()
+						)
+					} else if (this.mode === AIMode.FLOW) {
+						pendingUserMessage = prepareFlowUserMessage(
+							pendingPrompt,
+							this.flowAiChatHelpers!.getFlowAndSelectedId()
+						)
+					} else if (this.mode === AIMode.NAVIGATOR) {
+						pendingUserMessage = prepareNavigatorUserMessage(pendingPrompt)
+					}
+					this.pendingPrompt = ''
+				}
+				completion = await getCompletion(
+					[systemMessage, ...messages, ...(pendingUserMessage ? [pendingUserMessage] : [])],
+					abortController,
+					tools.map((t) => t.def)
+				)
+
+				if (completion) {
+					const finalToolCalls: Record<number, ChatCompletionChunk.Choice.Delta.ToolCall> = {}
+
+					let answer = ''
+					for await (const chunk of completion) {
+						if (!('choices' in chunk && chunk.choices.length > 0 && 'delta' in chunk.choices[0])) {
+							continue
+						}
+						const c = chunk as ChatCompletionChunk
+						const delta = c.choices[0].delta.content
+						if (delta) {
+							answer += delta
+							callbacks.onNewToken(delta)
+						}
+						const toolCalls = c.choices[0].delta.tool_calls || []
+						for (const toolCall of toolCalls) {
+							const { index } = toolCall
+							const finalToolCall = finalToolCalls[index]
+							if (!finalToolCall) {
+								finalToolCalls[index] = toolCall
+							} else {
+								if (toolCall.function?.arguments) {
+									if (!finalToolCall.function) {
+										finalToolCall.function = toolCall.function
+									} else {
+										finalToolCall.function.arguments =
+											(finalToolCall.function.arguments ?? '') + toolCall.function.arguments
+									}
+								}
+							}
+						}
+					}
+
+					if (answer) {
+						messages.push({ role: 'assistant', content: answer })
+					}
+
+					callbacks.onMessageEnd()
+
+					const toolCalls = Object.values(finalToolCalls).filter(
+						(toolCall) => toolCall.id !== undefined && toolCall.function?.arguments !== undefined
+					) as ChatCompletionMessageToolCall[]
+
+					if (toolCalls.length > 0) {
+						messages.push({
+							role: 'assistant',
+							tool_calls: toolCalls.map((t) => ({
+								...t,
+								function: {
+									...t.function,
+									arguments: t.function.arguments || '{}'
+								}
+							}))
+						})
+						for (const toolCall of toolCalls) {
+							await processToolCall({
+								tools,
+								toolCall,
+								messages,
+								helpers,
+								toolCallbacks: callbacks
+							})
+						}
+					} else {
+						break
+					}
+				}
+			}
+			return messages
+		} catch (err) {
+			if (!abortController.signal.aborted) {
+				throw err
+			} else {
+				return messages
+			}
+		}
+	}
+
+	sendRequest = async (
+		options: {
+			removeDiff?: boolean
+			addBackCode?: boolean
+			instructions?: string
+			mode?: AIMode
+			lang?: ScriptLang | 'bunnative'
+			isPreprocessor?: boolean
+		} = {}
+	) => {
+		if (options.mode) {
+			this.changeMode(options.mode)
+		} else {
+			this.changeMode(this.mode)
+		}
+		if (options.instructions) {
+			this.instructions = options.instructions
+		}
+		if (!this.instructions.trim()) {
+			return
+		}
+		try {
+			const oldSelectedContext = this.contextManager?.getSelectedContext() ?? []
+			if (this.mode === AIMode.SCRIPT) {
+				this.contextManager?.updateContextOnRequest(options)
+			}
+			this.loading = true
+			this.automaticScroll = true
+			this.abortController = new AbortController()
+
+			this.displayMessages = [
+				...this.displayMessages,
+				{
+					role: 'user',
+					content: this.instructions,
+					contextElements: this.mode === AIMode.SCRIPT ? oldSelectedContext : undefined
+				}
+			]
+			const oldInstructions = this.instructions
+			this.instructions = ''
+
+			if (this.mode === AIMode.SCRIPT && !this.scriptEditorOptions && !options.lang) {
+				throw new Error('No script options passed')
+			}
+
+			const lang = this.scriptEditorOptions?.lang ?? options.lang ?? 'bun'
+			const isPreprocessor =
+				this.scriptEditorOptions?.path === 'preprocessor' || options.isPreprocessor
+
+			const userMessage =
+				this.mode === AIMode.FLOW
+					? prepareFlowUserMessage(oldInstructions, this.flowAiChatHelpers!.getFlowAndSelectedId())
+					: this.mode === AIMode.NAVIGATOR
+						? prepareNavigatorUserMessage(oldInstructions)
+						: await prepareScriptUserMessage(oldInstructions, lang, oldSelectedContext, {
+								isPreprocessor
+							})
+
+			this.messages.push(userMessage)
+			await this.historyManager.saveChat(this.displayMessages, this.messages)
+
+			this.currentReply = ''
+
+			const params: {
+				messages: ChatCompletionMessageParam[]
+				abortController: AbortController
+				callbacks: ToolCallbacks & {
+					onNewToken: (token: string) => void
+					onMessageEnd: () => void
+				}
+			} = {
+				messages: this.messages,
+				abortController: this.abortController,
+				callbacks: {
+					onNewToken: (token) => (this.currentReply += token),
+					onMessageEnd: () => {
+						if (this.currentReply) {
+							this.displayMessages = [
+								...this.displayMessages,
+								{
+									role: 'assistant',
+									content: this.currentReply,
+									contextElements:
+										this.mode === AIMode.SCRIPT
+											? oldSelectedContext.filter((c) => c.type === 'code')
+											: undefined
+								}
+							]
+						}
+						this.currentReply = ''
+					},
+					onToolCall: (id, content) => {
+						this.displayMessages = [
+							...this.displayMessages,
+							{ role: 'tool', tool_call_id: id, content }
+						]
+					},
+					onFinishToolCall: (id, content) => {
+						console.log('onFinishToolCall', id, content)
+						const existingIdx = this.displayMessages.findIndex(
+							(m) => m.role === 'tool' && m.tool_call_id === id
+						)
+						if (existingIdx !== -1) {
+							this.displayMessages[existingIdx].content = content
+						} else {
+							this.displayMessages.push({ role: 'tool', tool_call_id: id, content })
+						}
+					}
+				}
+			}
+
+			if (this.mode === AIMode.FLOW && !this.flowAiChatHelpers) {
+				throw new Error('No flow helpers found')
+			}
+			await this.chatRequest({
+				...params
+			})
+			if (this.currentReply) {
+				// just in case the onMessageEnd is not called (due to an error for instance)
+				this.displayMessages = [
+					...this.displayMessages,
+					{
+						role: 'assistant',
+						content: this.currentReply,
+						contextElements:
+							this.mode === AIMode.SCRIPT
+								? oldSelectedContext.filter((c) => c.type === 'code')
+								: undefined
+					}
+				]
+				this.currentReply = ''
+			}
+
+			await this.historyManager.saveChat(this.displayMessages, this.messages)
+		} catch (err) {
+			console.error(err)
+			if (err instanceof Error) {
+				sendUserToast('Failed to send request: ' + err.message, true)
+			} else {
+				sendUserToast('Failed to send request', true)
+			}
+		} finally {
+			this.loading = false
+		}
+	}
+
+	cancel = () => {
+		this.currentReply = ''
+		this.abortController?.abort()
+	}
+
+	fix = () => {
+		if (!this.open) {
+			this.toggleOpen()
+		}
+		this.changeMode(AIMode.SCRIPT)
+		this.instructions = 'Fix the error'
+		this.contextManager?.setFixContext()
+		this.sendRequest()
+	}
+
+	addSelectedLinesToContext = (lines: string, startLine: number, endLine: number) => {
+		if (!this.open) {
+			this.toggleOpen()
+		}
+		this.changeMode(AIMode.SCRIPT)
+		this.contextManager?.addSelectedLinesToContext(lines, startLine, endLine)
+	}
+
+	saveAndClear = async () => {
+		await this.historyManager.save(this.displayMessages, this.messages)
+		this.displayMessages = []
+		this.messages = []
+	}
+
+	loadPastChat = async (id: string) => {
+		const chat = this.historyManager.loadPastChat(id)
+		if (chat) {
+			this.displayMessages = chat.displayMessages
+			this.messages = chat.actualMessages
+			this.automaticScroll = true
+		}
+	}
+
+	generateStep = async (moduleId: string, lang: ScriptLang, instructions: string) => {
+		if (!this.flowAiChatHelpers) {
+			throw new Error('No flow helpers found')
+		}
+		this.flowAiChatHelpers.selectStep(moduleId)
+		await this.sendRequest({
+			instructions: instructions,
+			mode: AIMode.SCRIPT,
+			lang: lang,
+			isPreprocessor: moduleId === 'preprocessor'
+		})
+	}
+
+	listenForScriptEditorContextChange = (
+		dbSchemas: DBSchemas,
+		workspaceStore: string | undefined,
+		copilotSessionModel: AIProviderModel | undefined
+	) => {
+		if (this.scriptEditorOptions) {
+			this.contextManager.updateAvailableContext(
+				this.scriptEditorOptions,
+				dbSchemas,
+				workspaceStore ?? '',
+				!copilotSessionModel?.model.endsWith('/thinking'),
+				untrack(() => this.contextManager.getSelectedContext())
+			)
+		}
+	}
+
+	listenForDbSchemasChanges = (dbSchemas: DBSchemas) => {
+		this.displayMessages = ContextManager.updateDisplayMessages(
+			untrack(() => this.displayMessages),
+			dbSchemas
+		)
+	}
+
+	listenForCurrentEditorChanges = (currentEditor: CurrentEditor) => {
+		if (currentEditor && currentEditor.type === 'script') {
+			this.scriptEditorApplyCode = (code) => {
+				if (currentEditor && currentEditor.type === 'script') {
+					currentEditor.hideDiffMode()
+					currentEditor.editor.reviewAndApplyCode(code)
+				}
+			}
+			this.scriptEditorShowDiffMode = () => {
+				if (currentEditor && currentEditor.type === 'script') {
+					currentEditor.showDiffMode()
+				}
+			}
+		} else {
+			this.scriptEditorApplyCode = undefined
+			this.scriptEditorShowDiffMode = undefined
+		}
+
+		return () => {
+			this.scriptEditorApplyCode = undefined
+			this.scriptEditorShowDiffMode = undefined
+		}
+	}
+
+	listenForSelectedIdChanges = (
+		selectedId: string,
+		flowStore: ExtendedOpenFlow,
+		flowStateStore: FlowState,
+		currentEditor: CurrentEditor
+	) => {
+		function getModule(id: string) {
+			if (id === 'preprocessor') {
+				return flowStore.value.preprocessor_module
+			} else if (id === 'failure') {
+				return flowStore.value.failure_module
+			} else {
+				return dfs(id, flowStore, false)[0]
+			}
+		}
+
+		function getScriptOptions(id: string): ScriptOptions | undefined {
+			const module = getModule(id)
+
+			if (module && module.value.type === 'rawscript') {
+				const moduleState: FlowModuleState | undefined = flowStateStore[module.id]
+
+				const editorRelated =
+					currentEditor && currentEditor.type === 'script' && currentEditor.stepId === module.id
+						? {
+								diffMode: currentEditor.diffMode,
+								lastDeployedCode: currentEditor.lastDeployedCode,
+								lastSavedCode: undefined
+							}
+						: {
+								diffMode: false,
+								lastDeployedCode: undefined,
+								lastSavedCode: undefined
+							}
+
+				return {
+					args: moduleState?.previewArgs ?? {},
+					error:
+						moduleState && !moduleState.previewSuccess
+							? getStringError(moduleState.previewResult)
+							: undefined,
+					code: module.value.content,
+					lang: module.value.language,
+					path: module.id,
+					...editorRelated
+				}
+			}
+
+			return undefined
+		}
+
+		if (selectedId) {
+			const options = getScriptOptions(selectedId)
+			if (options) {
+				this.scriptEditorOptions = options
+			}
+		} else {
+			this.scriptEditorOptions = undefined
+		}
+
+		return () => {
+			this.scriptEditorOptions = undefined
+		}
+	}
+
+	setFlowHelpers = (flowHelpers: FlowAIChatHelpers) => {
+		this.flowAiChatHelpers = flowHelpers
+
+		return () => {
+			this.flowAiChatHelpers = undefined
+		}
+	}
+}
+
+export const aiChatManager = new AIChatManager()
diff --git a/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte b/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
index de5fa391af..75b2a4ecb1 100644
--- a/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
+++ b/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import Markdown from 'svelte-exmarkdown'
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
-	import type { DisplayMessage } from './core'
-	import CodeDisplay from './CodeDisplay.svelte'
+	import type { DisplayMessage } from './shared'
+	import CodeDisplay from './script/CodeDisplay.svelte'
+	import LinkRenderer from './LinkRenderer.svelte'
 	import { setContext } from 'svelte'
 
 	export let message: DisplayMessage
@@ -21,7 +22,8 @@
 			gfmPlugin(),
 			{
 				renderer: {
-					pre: CodeDisplay
+					pre: CodeDisplay,
+					a: LinkRenderer
 				}
 			}
 		]}
diff --git a/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte b/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte
index 558af49113..89a05ff623 100644
--- a/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte
+++ b/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte
@@ -1,23 +1,45 @@
 <script lang="ts">
-	import { ContextIconMap } from './core'
-	import type { ContextElement } from './core'
+	import { ContextIconMap, type ContextElement } from './context'
 
-	export let availableContext: ContextElement[]
-	export let selectedContext: ContextElement[]
-	export let onSelect: (element: ContextElement) => void
-	export let showAllAvailable = false
-	export let stringSearch = ''
-	export let selectedIndex = 0
+	interface Props {
+		availableContext: ContextElement[]
+		selectedContext: ContextElement[]
+		onSelect: (element: ContextElement) => void
+		showAllAvailable?: boolean
+		stringSearch?: string
+		selectedIndex?: number
+	}
 
-	$: actualAvailableContext = showAllAvailable
-		? availableContext.filter(
-				(c) => !stringSearch || c.title.toLowerCase().includes(stringSearch.toLowerCase())
-		  )
-		: availableContext.filter(
+	const {
+		availableContext,
+		selectedContext,
+		onSelect,
+		showAllAvailable = false,
+		stringSearch = '',
+		selectedIndex = 0
+	}: Props = $props()
+
+	// Define priority map for context types
+	const typePriority = {
+		code: 1,
+		diff: 2,
+		default: 3
+	}
+
+	const actualAvailableContext = $derived(
+		availableContext
+			.filter(
 				(c) =>
-					!selectedContext.find((sc) => sc.type === c.type && sc.title === c.title) &&
+					(showAllAvailable ||
+						!selectedContext.some((sc) => sc.type === c.type && sc.title === c.title)) &&
 					(!stringSearch || c.title.toLowerCase().includes(stringSearch.toLowerCase()))
-		  )
+			)
+			.sort((a, b) => {
+				const priorityA = typePriority[a.type] || typePriority.default
+				const priorityB = typePriority[b.type] || typePriority.default
+				return priorityA - priorityB
+			})
+	)
 </script>
 
 <div class="flex flex-col gap-1 text-tertiary text-xs p-1 min-w-24 max-h-48 overflow-y-scroll">
@@ -25,15 +47,18 @@
 		<div class="text-center text-tertiary text-xs">No available context</div>
 	{:else}
 		{#each actualAvailableContext as element, i}
+			{@const Icon = ContextIconMap[element.type]}
 			<button
 				class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal {i ===
 				selectedIndex
 					? 'bg-surface-hover'
 					: ''}"
-				on:click={() => onSelect(element)}
+				onclick={() => onSelect(element)}
 			>
-				<svelte:component this={ContextIconMap[element.type]} size={16} />
-				{element.title}
+				{#if Icon}
+					<Icon size={16} />
+				{/if}
+				{element.type === 'diff' ? element.title.replace(/_/g, ' ') : element.title}
 			</button>
 		{/each}
 	{/if}
diff --git a/frontend/src/lib/components/copilot/chat/ChatMode.svelte b/frontend/src/lib/components/copilot/chat/ChatMode.svelte
new file mode 100644
index 0000000000..3a08f5d97b
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/ChatMode.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { ChevronDown } from 'lucide-svelte'
+	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	import { twMerge } from 'tailwind-merge'
+	import { aiChatManager, AIMode } from './AIChatManager.svelte'
+</script>
+
+<div class="min-w-0">
+	<Popover
+		disablePopup={Object.keys(aiChatManager.allowedModes).filter(
+			(k) => aiChatManager.allowedModes[k]
+		).length < 2}
+		class="max-w-full"
+	>
+		<svelte:fragment slot="trigger">
+			<div
+				class="text-tertiary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
+			>
+				<span class={`truncate`}>
+					{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
+				</span>
+				{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
+					<div class="shrink-0">
+						<ChevronDown size={16} />
+					</div>
+				{/if}
+			</div>
+		</svelte:fragment>
+		<svelte:fragment slot="content" let:close>
+			<div class="flex flex-col gap-1 p-1 min-w-24">
+				{#each Object.values(AIMode) as possibleMode}
+					{#if aiChatManager.allowedModes[possibleMode]}
+						<button
+							class={twMerge(
+								'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
+								aiChatManager.mode === possibleMode && 'bg-surface-hover'
+							)}
+							onclick={() => {
+								aiChatManager.changeMode(possibleMode)
+								close()
+							}}
+						>
+							{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
+						</button>
+					{/if}
+				{/each}
+			</div>
+		</svelte:fragment>
+	</Popover>
+</div>
diff --git a/frontend/src/lib/components/copilot/chat/ChatQuickActions.svelte b/frontend/src/lib/components/copilot/chat/ChatQuickActions.svelte
index a05795489e..ac98c6fe76 100644
--- a/frontend/src/lib/components/copilot/chat/ChatQuickActions.svelte
+++ b/frontend/src/lib/components/copilot/chat/ChatQuickActions.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
 	import { SparklesIcon, LightbulbIcon, DiffIcon } from 'lucide-svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
 
-	export let diffMode: boolean = false
-
 	let iconClasses = '!w-3 !h-3 !px-0 !m-0'
 
-	const dispatch = createEventDispatcher<{
-		analyzeChanges: null
-		explainChanges: null
-		suggestImprovements: null
-	}>()
+	let {
+		diffMode,
+		askAi
+	}: {
+		diffMode: boolean
+		askAi: (instructions: string, options?: { withCode?: boolean; withDiff?: boolean }) => void
+	} = $props()
 
-	$: btnClasses = `!px-1 !py-0.5 !gap-1 ${
-		diffMode
-			? '!bg-surface dark:!bg-surface border-frost-500 dark:border-frost-500'
-			: '!font-normal'
-	}`
+	let btnClasses = $derived(
+		`!px-1 !py-0.5 !gap-1 ${
+			diffMode
+				? '!bg-surface dark:!bg-surface border-frost-500 dark:border-frost-500'
+				: '!font-normal'
+		}`
+	)
 </script>
 
 <div class="flex flex-row items-center gap-2 px-2 py-1">
@@ -25,7 +26,10 @@
 		{#if diffMode}
 			<Button
 				on:click={() => {
-					dispatch('analyzeChanges')
+					askAi(
+						'Based on the changes I made to the code, look for potential issues and recommend better solutions',
+						{ withDiff: true }
+					)
 				}}
 				title="Analyze changes"
 				size="xs"
@@ -40,7 +44,10 @@
 		{:else}
 			<Button
 				on:click={() => {
-					dispatch('explainChanges')
+					askAi('Explain the changes I made to the code from the last diff', {
+						withCode: false,
+						withDiff: true
+					})
 				}}
 				title="Explain changes"
 				size="xs3"
@@ -54,7 +61,7 @@
 			</Button>
 			<Button
 				on:click={() => {
-					dispatch('suggestImprovements')
+					askAi('Look for potential issues and recommend better solutions in the actual code')
 				}}
 				title="Suggest improvements"
 				size="xs"
diff --git a/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte b/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
index b1d1a6dbdb..a2f013ff2b 100644
--- a/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
+++ b/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Popover } from '$lib/components/meltComponents'
 	import { Loader2, X } from 'lucide-svelte'
-	import { ContextIconMap, type ContextElement } from './core'
+	import { ContextIconMap, type ContextElement } from './context'
 	import { Highlight } from 'svelte-highlight'
 	import { json } from 'svelte-highlight/languages'
 	import { twMerge } from 'tailwind-merge'
@@ -27,7 +27,7 @@
 	<svelte:fragment slot="trigger">
 		<div
 			class={twMerge(
-				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer'
+				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48'
 			)}
 			on:mouseenter={() => (showDelete = true)}
 			on:mouseleave={() => (showDelete = false)}
@@ -42,7 +42,11 @@
 					<svelte:component this={icon} size={16} />
 				{/if}
 			</button>
-			{contextElement.title}
+			<span class="truncate">
+				{contextElement.type === 'diff'
+					? contextElement.title.replace(/_/g, ' ')
+					: contextElement.title}
+			</span>
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="content">
diff --git a/frontend/src/lib/components/copilot/chat/ContextManager.svelte.ts b/frontend/src/lib/components/copilot/chat/ContextManager.svelte.ts
new file mode 100644
index 0000000000..ad89b9b672
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/ContextManager.svelte.ts
@@ -0,0 +1,282 @@
+import { langToExt } from '$lib/editorUtils'
+import { ResourceService, type ListResourceResponse, type ScriptLang } from '$lib/gen'
+import { scriptLangToEditorLang } from '$lib/scripts'
+import { SQLSchemaLanguages, type DBSchemas } from '$lib/stores'
+import { diffLines } from 'diff'
+import type { ContextElement } from './context'
+
+import type { DisplayMessage } from './shared'
+
+export interface ScriptOptions {
+	lang: ScriptLang | 'bunnative'
+	code: string
+	error: string | undefined
+	args: Record<string, any>
+	path: string | undefined
+	lastSavedCode?: string
+	lastDeployedCode?: string
+	diffMode: boolean
+}
+
+export default class ContextManager {
+	private selectedContext: ContextElement[] = $state([])
+	private availableContext: ContextElement[] = $state([])
+
+	private workspace: string | undefined = undefined
+	private dbResources: ListResourceResponse = []
+	private scriptOptions: ScriptOptions | undefined = undefined
+
+	private async refreshDbResources(workspace: string) {
+		this.dbResources = await ResourceService.listResource({
+			workspace: workspace,
+			resourceType: SQLSchemaLanguages.join(',')
+		})
+	}
+
+	private getSelectedDBSchema(scriptOptions: ScriptOptions, dbSchemas: DBSchemas) {
+		const schemaRes =
+			scriptOptions.lang === 'graphql' ? scriptOptions.args.api : scriptOptions.args.database
+		if (typeof schemaRes === 'string') {
+			const schemaPath = schemaRes.replace('$res:', '')
+			const schema = dbSchemas[schemaPath]
+			if (schema && schema.lang === scriptOptions.lang) {
+				return { schema, resource: schemaPath }
+			} else {
+				return { schema: undefined, resource: schemaPath }
+			}
+		}
+	}
+
+	private getContextCodePath(scriptOptions: ScriptOptions) {
+		return (
+			(scriptOptions.path?.split('/').pop() ?? 'script') +
+			'.' +
+			langToExt(scriptLangToEditorLang(scriptOptions.lang))
+		)
+	}
+
+	async updateAvailableContext(
+		scriptOptions: ScriptOptions,
+		dbSchemas: DBSchemas,
+		workspace: string,
+		toolSupport: boolean,
+		currentlySelectedContext: ContextElement[]
+	) {
+		try {
+			let firstTime = !this.workspace
+			if (this.workspace !== workspace) {
+				await this.refreshDbResources(workspace)
+				this.workspace = workspace
+			}
+			this.scriptOptions = scriptOptions
+			let newAvailableContext: ContextElement[] = [
+				{
+					type: 'code',
+					title: this.getContextCodePath(scriptOptions) ?? '',
+					content: scriptOptions.code,
+					lang: scriptOptions.lang
+				}
+			]
+
+			if (toolSupport) {
+				for (const d of this.dbResources) {
+					const loadedSchema = dbSchemas[d.path]
+					newAvailableContext.push({
+						type: 'db',
+						title: d.path,
+						// If the db is already fetched, add the schema to the context
+						...(loadedSchema ? { schema: loadedSchema } : {})
+					})
+				}
+			}
+
+			if (scriptOptions.lastSavedCode && scriptOptions.lastSavedCode !== scriptOptions.code) {
+				newAvailableContext.push({
+					type: 'diff',
+					title: 'diff_with_last_saved_draft', // can't use spaces in the title, because it will break the word match in the context text area hightlighting logic
+					content: scriptOptions.lastSavedCode ?? '',
+					diff: diffLines(scriptOptions.lastSavedCode ?? '', scriptOptions.code),
+					lang: scriptOptions.lang
+				})
+			}
+
+			if (scriptOptions.lastDeployedCode && scriptOptions.lastDeployedCode !== scriptOptions.code) {
+				newAvailableContext.push({
+					type: 'diff',
+					title: 'diff_with_last_deployed_version',
+					content: scriptOptions.lastDeployedCode ?? '',
+					diff: diffLines(scriptOptions.lastDeployedCode ?? '', scriptOptions.code),
+					lang: scriptOptions.lang
+				})
+			}
+
+			if (scriptOptions.error) {
+				newAvailableContext = [
+					...newAvailableContext,
+					{
+						type: 'error',
+						title: 'error',
+						content: scriptOptions.error
+					}
+				]
+			}
+
+			let newSelectedContext: ContextElement[] = [...currentlySelectedContext]
+
+			if (firstTime) {
+				newSelectedContext = [
+					{
+						type: 'code',
+						title: this.getContextCodePath(scriptOptions) ?? '',
+						content: scriptOptions.code,
+						lang: scriptOptions.lang
+					}
+				]
+			}
+
+			const db = this.getSelectedDBSchema(scriptOptions, dbSchemas)
+			if (
+				db &&
+				!newSelectedContext.find((c) => c.type === 'db' && db && c.title === db.resource) &&
+				toolSupport
+			) {
+				newSelectedContext = [
+					...newSelectedContext,
+					{
+						type: 'db',
+						title: db.resource,
+						schema: db.schema
+					}
+				]
+			}
+
+			newSelectedContext = newSelectedContext
+				.filter(
+					(c) =>
+						(c.type === 'code_piece' && scriptOptions.code.includes(c.content)) ||
+						c.type === 'code' ||
+						newAvailableContext.some((ac) => ac.type === c.type && ac.title === c.title)
+				)
+				.map((c) =>
+					c.type === 'code'
+						? {
+								...c,
+								content: scriptOptions.code,
+								title: this.getContextCodePath(scriptOptions)
+							}
+						: c.type === 'db' && dbSchemas[c.title]
+							? {
+									...c,
+									schema: dbSchemas[c.title]
+								}
+							: c
+				)
+
+			this.availableContext = newAvailableContext
+			this.selectedContext = newSelectedContext
+		} catch (err) {
+			console.error('Could not update available context', err)
+		}
+	}
+
+	getSelectedContext() {
+		return this.selectedContext
+	}
+
+	setSelectedContext(newSelectedContext: ContextElement[]) {
+		this.selectedContext = newSelectedContext
+	}
+
+	getAvailableContext() {
+		return this.availableContext
+	}
+
+	addSelectedLinesToContext(lines: string, startLine: number, endLine: number) {
+		if (
+			!this.scriptOptions ||
+			this.selectedContext.find(
+				(c) => c.type === 'code_piece' && c.title === `L${startLine}-L${endLine}`
+			)
+		) {
+			return
+		}
+		this.selectedContext = [
+			...this.selectedContext,
+			{
+				type: 'code_piece',
+				title: `L${startLine}-L${endLine}`,
+				startLine,
+				endLine,
+				content: lines,
+				lang: this.scriptOptions.lang
+			}
+		]
+	}
+
+	setFixContext() {
+		const codeContext = this.availableContext.find((c) => c.type === 'code')
+		const errorContext = this.availableContext.find((c) => c.type === 'error')
+
+		if (codeContext && errorContext) {
+			this.selectedContext = [codeContext, errorContext]
+		}
+	}
+
+	setAskAiContext(options: { withCode?: boolean; withDiff?: boolean }) {
+		if (!this.scriptOptions) {
+			return
+		}
+		const codeContext = this.availableContext.find((c) => c.type === 'code')
+		if (!codeContext) {
+			return
+		}
+		this.selectedContext = [
+			...(options.withCode === false ? [] : [codeContext]),
+			...(options.withDiff
+				? [
+						{
+							type: 'diff' as const,
+							title: 'diff_with_last_deployed_version',
+							content: this.scriptOptions.lastDeployedCode ?? '',
+							diff: diffLines(this.scriptOptions.lastDeployedCode ?? '', this.scriptOptions.code),
+							lang: this.scriptOptions.lang
+						}
+					]
+				: [])
+		]
+	}
+
+	updateContextOnRequest(options: { removeDiff?: boolean; addBackCode?: boolean }) {
+		this.selectedContext = this.selectedContext.filter((c) => c.type !== 'code_piece')
+		if (options.removeDiff) {
+			this.selectedContext = this.selectedContext.filter((c) => c.type !== 'diff')
+		}
+		if (options.addBackCode) {
+			const codeContext = this.availableContext.find((c) => c.type === 'code')
+			if (codeContext) {
+				this.selectedContext = [...this.selectedContext, codeContext]
+			}
+		}
+	}
+
+	static updateDisplayMessages(
+		displayMessages: DisplayMessage[],
+		dbSchemas: DBSchemas
+	): DisplayMessage[] {
+		return displayMessages.map((m) => ({
+			...m,
+			contextElements:
+				m.role !== 'tool' && m.contextElements
+					? m.contextElements.map((c) =>
+							c.type === 'db'
+								? {
+										type: 'db',
+										title: c.title,
+										schema: dbSchemas[c.title]
+									}
+								: c
+						)
+					: undefined
+		}))
+	}
+}
diff --git a/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte b/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
index 2916ad3efc..83621b5ecc 100644
--- a/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
+++ b/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
@@ -1,25 +1,36 @@
 <script lang="ts">
 	import autosize from '$lib/autosize'
-	import { createEventDispatcher } from 'svelte'
-	import type { ContextElement } from './core'
+	import { tick } from 'svelte'
+	import type { ContextElement } from './context'
 	import AvailableContextList from './AvailableContextList.svelte'
+	import { aiChatManager } from './AIChatManager.svelte'
 
-	export let instructions: string
-	export let availableContext: ContextElement[]
-	export let selectedContext: ContextElement[]
-	export let isFirstMessage: boolean
+	interface Props {
+		availableContext: ContextElement[]
+		selectedContext: ContextElement[]
+		isFirstMessage: boolean
+		disabled: boolean
+		onUpdateInstructions: (value: string) => void
+		onSendRequest: () => void
+		onAddContext: (contextElement: ContextElement) => void
+	}
 
-	const dispatch = createEventDispatcher<{
-		updateInstructions: { value: string }
-		sendRequest: null
-		addContext: { contextElement: ContextElement }
-	}>()
+	const {
+		availableContext,
+		selectedContext,
+		isFirstMessage,
+		disabled,
+		onUpdateInstructions,
+		onSendRequest,
+		onAddContext
+	}: Props = $props()
 
-	let showContextTooltip = false
-	let contextTooltipWord = ''
-	let tooltipPosition = { x: 0, y: 0 }
-	let textarea: HTMLTextAreaElement
-	let selectedSuggestionIndex = 0
+	let showContextTooltip = $state(false)
+	let contextTooltipWord = $state('')
+	let tooltipPosition = $state({ x: 0, y: 0 })
+	let textarea = $state<HTMLTextAreaElement | undefined>(undefined)
+	let tooltipElement = $state<HTMLDivElement | undefined>(undefined)
+	let selectedSuggestionIndex = $state(0)
 
 	// Properties to copy for caret position calculation
 	const properties = [
@@ -146,14 +157,15 @@
 	}
 
 	function addContextToSelection(contextElement: ContextElement) {
-		dispatch('addContext', { contextElement })
+		onAddContext(contextElement)
 	}
 
 	function updateInstructionsWithContext(contextElement: ContextElement) {
-		const index = instructions.lastIndexOf('@')
+		const index = aiChatManager.instructions.lastIndexOf('@')
 		if (index !== -1) {
-			const newInstructions = instructions.substring(0, index) + `@${contextElement.title}`
-			dispatch('updateInstructions', { value: newInstructions })
+			const newInstructions =
+				aiChatManager.instructions.substring(0, index) + `@${contextElement.title}`
+			onUpdateInstructions(newInstructions)
 		}
 	}
 
@@ -163,7 +175,7 @@
 		showContextTooltip = false
 	}
 
-	function updateTooltipPosition(
+	async function updateTooltipPosition(
 		availableContext: ContextElement[],
 		showContextTooltip: boolean,
 		contextTooltipWord: string
@@ -192,6 +204,8 @@
 			const estimatedTooltipHeight = Math.min(uncappedHeight, maxHeight)
 			const margin = 6 // Small margin between caret and tooltip
 
+			// Initial position calculation
+			let finalX = rect.left + coords.left - 70
 			let finalY: number
 
 			if (isFirstMessage) {
@@ -202,10 +216,31 @@
 				finalY = rect.top + coords.top - estimatedTooltipHeight - margin
 			}
 
+			// Set initial position
 			tooltipPosition = {
-				x: rect.left + coords.left - 70,
+				x: finalX,
 				y: finalY
 			}
+
+			// Wait for tooltip to render with initial position
+			await tick()
+
+			// Get actual tooltip width if tooltip is rendered
+			if (tooltipElement) {
+				const tooltipRect = tooltipElement.getBoundingClientRect()
+				const tooltipWidth = tooltipRect.width
+
+				// Adjust position if tooltip would overflow right edge
+				if (finalX + tooltipWidth > window.innerWidth) {
+					finalX = Math.max(10, window.innerWidth - tooltipWidth - 10)
+
+					// Update position after measuring actual width
+					tooltipPosition = {
+						x: finalX,
+						y: finalY
+					}
+				}
+			}
 		} catch (error) {
 			// Hide tooltip on any error related to position calculation
 			console.error('Error updating tooltip position', error)
@@ -215,7 +250,7 @@
 
 	function handleInput(e: Event) {
 		textarea = e.target as HTMLTextAreaElement
-		const words = instructions.split(/\s+/)
+		const words = aiChatManager.instructions.split(/\s+/)
 		const lastWord = words[words.length - 1]
 
 		if (
@@ -230,7 +265,7 @@
 			contextTooltipWord = ''
 			selectedSuggestionIndex = 0
 		}
-		dispatch('updateInstructions', { value: instructions })
+		onUpdateInstructions(aiChatManager.instructions)
 	}
 
 	function handleKeyPress(e: KeyboardEvent) {
@@ -246,8 +281,11 @@
 						(c) => c.title === contextElement.title && c.type === contextElement.type
 					)
 					// If the context element is already in the selected context and the last word in the instructions is the same as the context element title, send request
-					if (isInSelectedContext && instructions.split(' ').pop() === '@' + contextElement.title) {
-						dispatch('sendRequest')
+					if (
+						isInSelectedContext &&
+						aiChatManager.instructions.split(' ').pop() === '@' + contextElement.title
+					) {
+						onSendRequest()
 						return
 					}
 					handleContextSelection(contextElement)
@@ -255,7 +293,7 @@
 					handleContextSelection(availableContext[0])
 				}
 			} else {
-				dispatch('sendRequest')
+				onSendRequest()
 			}
 		}
 	}
@@ -285,7 +323,9 @@
 		}
 	}
 
-	$: updateTooltipPosition(availableContext, showContextTooltip, contextTooltipWord)
+	$effect(() => {
+		updateTooltipPosition(availableContext, showContextTooltip, contextTooltipWord)
+	})
 
 	export function focus() {
 		textarea?.focus()
@@ -293,37 +333,36 @@
 </script>
 
 <div class="relative w-full px-2 scroll-pb-2">
-	<div
-		class="absolute top-0 left-0 w-full h-full min-h-12 px-4 text-sm pt-1 pointer-events-none"
-		style="line-height: 1.72"
-	>
-		<span class="break-words" style="white-space: pre-wrap;">
-			{@html getHighlightedText(instructions)}
+	<div class="textarea-input absolute top-0 left-0 pointer-events-none">
+		<span class="break-words">
+			{@html getHighlightedText(aiChatManager.instructions)}
 		</span>
 	</div>
 	<textarea
 		bind:this={textarea}
-		on:keypress={handleKeyPress}
-		on:keydown={handleKeyDown}
-		bind:value={instructions}
+		onkeypress={handleKeyPress}
+		onkeydown={handleKeyDown}
+		bind:value={aiChatManager.instructions}
 		use:autosize
 		rows={3}
-		on:input={handleInput}
-		on:blur={() => {
+		oninput={handleInput}
+		onblur={() => {
 			setTimeout(() => {
 				showContextTooltip = false
-			}, 100)
+			}, 200)
 		}}
 		placeholder={isFirstMessage ? 'Ask anything' : 'Ask followup'}
-		class="resize-none bg-transparent caret-black dark:caret-white"
-		style={instructions.length > 0
+		class="textarea-input resize-none bg-transparent caret-black dark:caret-white"
+		style={aiChatManager.instructions.length > 0
 			? 'color: transparent; -webkit-text-fill-color: transparent;'
 			: ''}
+		{disabled}
 	></textarea>
 </div>
 
 {#if showContextTooltip}
 	<div
+		bind:this={tooltipElement}
 		class="absolute bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-50"
 		style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;"
 	>
@@ -339,3 +378,17 @@
 		/>
 	</div>
 {/if}
+
+<style>
+	.textarea-input {
+		padding: 0.25rem 1rem;
+		border: 1px solid transparent;
+		font-family: inherit;
+		font-size: 0.875rem;
+		line-height: 1.72;
+		white-space: pre-wrap;
+		word-break: break-words;
+		width: 100%;
+		min-height: 3rem;
+	}
+</style>
diff --git a/frontend/src/lib/components/copilot/chat/HistoryManager.svelte.ts b/frontend/src/lib/components/copilot/chat/HistoryManager.svelte.ts
new file mode 100644
index 0000000000..7e1a7b80df
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/HistoryManager.svelte.ts
@@ -0,0 +1,111 @@
+import { openDB, type DBSchema as IDBSchema, type IDBPDatabase } from 'idb'
+import type { DisplayMessage } from './shared'
+import { createLongHash } from '$lib/editorUtils'
+import type { ChatCompletionMessageParam } from 'openai/resources/index.mjs'
+interface ChatSchema extends IDBSchema {
+	chats: {
+		key: string
+		value: {
+			id: string
+			actualMessages: ChatCompletionMessageParam[]
+			displayMessages: DisplayMessage[]
+			title: string
+			lastModified: number
+		}
+	}
+}
+
+export default class HistoryManager {
+	private indexDB: IDBPDatabase<ChatSchema> | undefined = undefined
+
+	private savedChats: Record<
+		string,
+		{
+			actualMessages: ChatCompletionMessageParam[]
+			displayMessages: DisplayMessage[]
+			title: string
+			id: string
+			lastModified: number
+		}
+	> = $state({})
+
+	private currentChatId: string = $state(createLongHash())
+
+	private pastChats = $derived(
+		Object.values(this.savedChats)
+			.filter((c) => c.id !== this.currentChatId)
+			.sort((a, b) => b.lastModified - a.lastModified)
+	)
+
+	async init() {
+		try {
+			this.indexDB = await openDB<ChatSchema>('copilot-chat-history', 1, {
+				upgrade(indexDB) {
+					if (!indexDB.objectStoreNames.contains('chats')) {
+						indexDB.createObjectStore('chats', { keyPath: 'id' })
+					}
+				}
+			})
+
+			const chats = await this.indexDB.getAll('chats')
+			this.savedChats = chats.reduce(
+				(acc, chat) => {
+					acc[chat.id] = chat
+					return acc
+				},
+				{} as typeof this.savedChats
+			)
+		} catch (err) {
+			console.error('Could not open chat history database', err)
+			return {}
+		}
+	}
+
+	close() {
+		this.indexDB?.close()
+	}
+
+	getPastChats() {
+		return this.pastChats
+	}
+
+	async saveChat(displayMessages: DisplayMessage[], messages: ChatCompletionMessageParam[]) {
+		if (displayMessages.length > 0) {
+			const updatedChat = {
+				actualMessages: $state.snapshot(messages),
+				displayMessages: $state.snapshot(displayMessages),
+				title: displayMessages[0].content.slice(0, 50),
+				id: this.currentChatId,
+				lastModified: Date.now()
+			}
+			this.savedChats = {
+				...this.savedChats,
+				[updatedChat.id]: updatedChat
+			}
+
+			if (this.indexDB) {
+				await this.indexDB.put('chats', updatedChat)
+			}
+		}
+	}
+
+	async save(displayMessages: DisplayMessage[], messages: ChatCompletionMessageParam[]) {
+		await this.saveChat(displayMessages, messages)
+		this.currentChatId = createLongHash()
+	}
+
+	deletePastChat(id: string) {
+		this.savedChats = Object.fromEntries(
+			Object.entries(this.savedChats).filter(([key]) => key !== id)
+		)
+		this.indexDB?.delete('chats', id)
+	}
+
+	loadPastChat(id: string) {
+		const chat = this.savedChats[id]
+		if (chat) {
+			this.currentChatId = id
+			return chat
+		}
+	}
+}
diff --git a/frontend/src/lib/components/copilot/chat/LinkRenderer.svelte b/frontend/src/lib/components/copilot/chat/LinkRenderer.svelte
new file mode 100644
index 0000000000..87d131e03e
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/LinkRenderer.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	type Props = {
+		href?: string
+		children?: Snippet
+	}
+	let { href, children }: Props = $props()
+</script>
+
+{#if href}
+	<a {href} target="_blank" rel="noopener noreferrer">
+		{@render children?.()}
+	</a>
+{/if}
diff --git a/frontend/src/lib/components/copilot/chat/ProviderModelSelector.svelte b/frontend/src/lib/components/copilot/chat/ProviderModelSelector.svelte
index a74dc353e0..6c7068a80c 100644
--- a/frontend/src/lib/components/copilot/chat/ProviderModelSelector.svelte
+++ b/frontend/src/lib/components/copilot/chat/ProviderModelSelector.svelte
@@ -8,6 +8,7 @@
 		copilotSessionModel
 	} from '$lib/stores'
 	import { storeLocalSetting } from '$lib/utils'
+	import { twMerge } from 'tailwind-merge'
 
 	$: providerModel = $copilotSessionModel ??
 		$copilotInfo.defaultModel ??
@@ -33,9 +34,12 @@
 		</svelte:fragment>
 		<svelte:fragment slot="content" let:close>
 			<div class="flex flex-col gap-1 p-1 min-w-24">
-				{#each $copilotInfo.aiModels.filter((m) => m.model !== providerModel.model) as providerModel}
+				{#each $copilotInfo.aiModels as providerModel}
 					<button
-						class="text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal"
+						class={twMerge(
+							'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
+							providerModel.model === $copilotSessionModel?.model && 'bg-surface-hover'
+						)}
 						on:click={() => {
 							$copilotSessionModel = providerModel
 							storeLocalSetting(COPILOT_SESSION_MODEL_SETTING_NAME, providerModel.model)
diff --git a/frontend/src/lib/components/copilot/chat/ask/core.ts b/frontend/src/lib/components/copilot/chat/ask/core.ts
new file mode 100644
index 0000000000..997594cc88
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/ask/core.ts
@@ -0,0 +1,40 @@
+import type {
+	ChatCompletionSystemMessageParam,
+	ChatCompletionUserMessageParam
+} from 'openai/resources/index.mjs'
+import type { Tool } from '../shared'
+import { getDocumentationTool } from '../navigator/core'
+
+export const CHAT_SYSTEM_PROMPT = `
+You are Windmill's intelligent assistant, designed to answer questions about its functionality. It is your only purpose to help the user in the context of the windmill application.
+Windmill is an open-source developer platform for building internal tools, API integrations, background jobs, workflows, and user interfaces. It offers a unified system where scripts are automatically turned into sharable UIs and can be composed into flows or embedded in custom applications.
+
+You have access to these tools:
+1. Get documentation for user requests (get_documentation)
+
+INSTRUCTIONS:
+- When user asks about something, use the get_documentation tool to retrieve accurate information about how to fulfill the user's request.
+- Complete your response with precisions about how it works based on the documentation. Also drop a link to the relevant documentation if possible.
+- If the user asks about something that you are unsure about, say that you are not sure about the answer and suggest to ask the question to the windmill team.
+
+GENERAL PRINCIPLES:
+- Be concise but thorough
+- Maintain a friendly, professional tone
+- If you encounter an error or can't complete a request, explain why and suggest alternatives
+`
+
+export const askTools: Tool<{}>[] = [getDocumentationTool]
+
+export function prepareAskSystemMessage(): ChatCompletionSystemMessageParam {
+	return {
+		role: 'system',
+		content: CHAT_SYSTEM_PROMPT
+	}
+}
+
+export function prepareAskUserMessage(instructions: string): ChatCompletionUserMessageParam {
+	return {
+		role: 'user',
+		content: instructions
+	}
+}
diff --git a/frontend/src/lib/components/copilot/chat/context.ts b/frontend/src/lib/components/copilot/chat/context.ts
new file mode 100644
index 0000000000..e1dcf9d115
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/context.ts
@@ -0,0 +1,50 @@
+import { Code, Database, TriangleAlert, Diff } from 'lucide-svelte'
+import type { ScriptLang } from '$lib/gen/types.gen'
+import { type DBSchema } from '$lib/stores'
+import { type Change } from 'diff'
+
+export const ContextIconMap = {
+	code: Code,
+	error: TriangleAlert,
+	db: Database,
+	diff: Diff,
+	code_piece: Code
+}
+
+export interface CodeElement {
+	type: 'code'
+	content: string
+	title: string
+	lang: ScriptLang | 'bunnative'
+}
+
+interface ErrorElement {
+	type: 'error'
+	content: string
+	title: 'error'
+}
+
+interface DBElement {
+	type: 'db'
+	schema?: DBSchema
+	title: string
+}
+
+interface DiffElement {
+	type: 'diff'
+	content: string
+	title: string
+	diff: Change[]
+	lang: ScriptLang | 'bunnative'
+}
+
+export interface CodePieceElement {
+	type: 'code_piece'
+	content: string
+	startLine: number
+	endLine: number
+	title: string
+	lang: ScriptLang | 'bunnative'
+}
+
+export type ContextElement = CodeElement | ErrorElement | DBElement | DiffElement | CodePieceElement
diff --git a/frontend/src/lib/components/copilot/chat/flow/FlowAIButton.svelte b/frontend/src/lib/components/copilot/chat/flow/FlowAIButton.svelte
new file mode 100644
index 0000000000..aae992e771
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/flow/FlowAIButton.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { base } from '$lib/base'
+	import { copilotInfo } from '$lib/stores'
+	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	import DarkPopover from '$lib/components/Popover.svelte'
+	import { ExternalLink } from 'lucide-svelte'
+	import { Button } from '$lib/components/common'
+	import { getModifierKey } from '$lib/utils'
+	import { WandSparkles } from 'lucide-svelte'
+
+	let { openPanel }: { openPanel: () => void } = $props()
+</script>
+
+{#snippet button(onClick: () => void)}
+	<Button
+		color="light"
+		variant="border"
+		size="xs"
+		on:click={onClick}
+		startIcon={{ icon: WandSparkles }}
+		iconOnly
+		btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 bg-surface"
+	>
+		AI Panel
+	</Button>
+{/snippet}
+
+{#if $copilotInfo.enabled}
+	<DarkPopover>
+		<svelte:fragment slot="text">
+			<div class="flex flex-row gap-1">
+				Show the AI Panel.
+
+				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+					{getModifierKey()}L
+				</div>
+			</div>
+		</svelte:fragment>
+		{@render button(openPanel)}
+	</DarkPopover>
+{:else}
+	<Popover placement="bottom">
+		<svelte:fragment slot="trigger">
+			{@render button(() => {})}
+		</svelte:fragment>
+		<svelte:fragment slot="content">
+			<div class="block text-primary p-4">
+				<p class="text-sm"
+					>Enable Windmill AI in the <a
+						href="{base}/workspace_settings?tab=ai"
+						target="_blank"
+						class="inline-flex flex-row items-center gap-1"
+						>workspace settings <ExternalLink size={16} /></a
+					></p
+				>
+			</div>
+		</svelte:fragment>
+	</Popover>
+{/if}
diff --git a/frontend/src/lib/components/copilot/chat/flow/FlowAIChat.svelte b/frontend/src/lib/components/copilot/chat/flow/FlowAIChat.svelte
new file mode 100644
index 0000000000..d64cf7028c
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/flow/FlowAIChat.svelte
@@ -0,0 +1,355 @@
+<script lang="ts">
+	import FlowModuleSchemaMap from '$lib/components/flows/map/FlowModuleSchemaMap.svelte'
+	import { getContext } from 'svelte'
+	import type { FlowCopilotContext } from '../../flow'
+	import type { FlowEditorContext } from '$lib/components/flows/types'
+	import { dfs } from '$lib/components/flows/previousResults'
+	import { getSubModules } from '$lib/components/flows/flowExplorer'
+	import type { FlowModule } from '$lib/gen'
+	import { getIndexInNestedModules, getNestedModules } from './utils'
+	import type { FlowAIChatHelpers } from './core'
+	import {
+		insertNewFailureModule,
+		insertNewPreprocessorModule
+	} from '$lib/components/flows/flowStateUtils.svelte'
+	import { loadSchemaFromModule } from '$lib/components/flows/flowInfers'
+	import { aiChatManager } from '../AIChatManager.svelte'
+	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
+
+	let {
+		flowModuleSchemaMap
+	}: {
+		flowModuleSchemaMap: FlowModuleSchemaMap | undefined
+	} = $props()
+
+	const { flowStore, flowStateStore, selectedId, currentEditor } =
+		getContext<FlowEditorContext>('FlowEditorContext')
+
+	const { exprsToSet } = getContext<FlowCopilotContext | undefined>('FlowCopilotContext') ?? {}
+
+	function getModule(id: string) {
+		if (id === 'preprocessor') {
+			return flowStore.val.value.preprocessor_module
+		} else if (id === 'failure') {
+			return flowStore.val.value.failure_module
+		} else {
+			return dfs(id, flowStore.val, false)[0]
+		}
+	}
+
+	const flowHelpers: FlowAIChatHelpers = {
+		getFlowAndSelectedId: () => ({ flow: flowStore.val, selectedId: $selectedId }),
+		setCode: async (id, code) => {
+			const module = getModule(id)
+			if (!module) {
+				throw new Error('Module not found')
+			}
+			if (module.value.type === 'rawscript') {
+				module.value.content = code
+				const { input_transforms, schema } = await loadSchemaFromModule(module)
+				module.value.input_transforms = input_transforms
+				refreshStateStore(flowStore)
+
+				if ($flowStateStore[id]) {
+					$flowStateStore[id].schema = schema
+				} else {
+					$flowStateStore[id] = {
+						schema
+					}
+				}
+			} else {
+				throw new Error('Module is not a rawscript or script')
+			}
+			if ($currentEditor && $currentEditor.type === 'script' && $currentEditor.stepId === id) {
+				$currentEditor.editor.setCode(code)
+			}
+		},
+		insertStep: async (location, step) => {
+			const { index, modules } =
+				location.type === 'start'
+					? {
+							index: -1,
+							modules: flowStore.val.value.modules
+						}
+					: location.type === 'start_inside_forloop'
+						? {
+								index: -1,
+								modules: getNestedModules(flowStore.val, location.inside)
+							}
+						: location.type === 'start_inside_branch'
+							? {
+									index: -1,
+									modules: getNestedModules(flowStore.val, location.inside, location.branchIndex)
+								}
+							: location.type === 'after'
+								? getIndexInNestedModules(flowStore.val, location.afterId)
+								: {
+										index: -1,
+										modules: flowStore.val.value.modules
+									}
+
+			const indexToInsertAt = index + 1
+
+			let newModules: FlowModule[] | undefined = undefined
+			switch (step.type) {
+				case 'rawscript': {
+					const inlineScript = {
+						language: step.language,
+						kind: 'script' as const,
+						subkind: 'flow' as const
+					}
+					if (location.type === 'preprocessor') {
+						await insertNewPreprocessorModule(flowStore, flowStateStore, inlineScript)
+					} else if (location.type === 'failure') {
+						await insertNewFailureModule(flowStore, flowStateStore, inlineScript)
+					} else {
+						newModules = await flowModuleSchemaMap?.insertNewModuleAtIndex(
+							modules,
+							indexToInsertAt,
+							'script',
+							undefined,
+							undefined,
+							inlineScript
+						)
+					}
+					break
+				}
+				case 'script': {
+					const wsScript = {
+						path: step.path,
+						summary: '',
+						hash: undefined
+					}
+					if (location.type === 'preprocessor') {
+						await insertNewPreprocessorModule(flowStore, flowStateStore, undefined, wsScript)
+					} else if (location.type === 'failure') {
+						await insertNewFailureModule(flowStore, flowStateStore, undefined, wsScript)
+					} else {
+						newModules = await flowModuleSchemaMap?.insertNewModuleAtIndex(
+							modules,
+							indexToInsertAt,
+							'script',
+							wsScript
+						)
+					}
+					break
+				}
+				case 'forloop':
+				case 'branchall':
+				case 'branchone': {
+					if (location.type === 'preprocessor' || location.type === 'failure') {
+						throw new Error('Cannot insert a non-script module for preprocessing or error handling')
+					}
+					newModules = await flowModuleSchemaMap?.insertNewModuleAtIndex(
+						modules,
+						indexToInsertAt,
+						step.type
+					)
+					break
+				}
+				default: {
+					throw new Error('Unknown step type')
+				}
+			}
+
+			if (location.type === 'preprocessor' || location.type === 'failure') {
+				$flowStateStore = $flowStateStore
+				refreshStateStore(flowStore)
+
+				return location.type
+			} else {
+				const newModule = newModules?.[indexToInsertAt]
+
+				if (!newModule) {
+					throw new Error('Failed to insert module')
+				}
+
+				if (['branchone', 'branchall'].includes(step.type)) {
+					await flowModuleSchemaMap?.addBranch(newModule)
+				}
+
+				$flowStateStore = $flowStateStore
+				refreshStateStore(flowStore)
+
+				return newModule.id
+			}
+		},
+		removeStep: async (id) => {
+			flowModuleSchemaMap?.selectNextId(id)
+			if (id === 'preprocessor') {
+				flowStore.val.value.preprocessor_module = undefined
+			} else if (id === 'failure') {
+				flowStore.val.value.failure_module = undefined
+			} else {
+				const { modules } = getIndexInNestedModules(flowStore.val, id)
+				flowModuleSchemaMap?.removeAtId(modules, id)
+			}
+
+			refreshStateStore(flowStore)
+
+			flowModuleSchemaMap?.updateFlowInputsStore()
+		},
+		getStepInputs: async (id) => {
+			const module = getModule(id)
+			if (!module) {
+				throw new Error('Module not found')
+			}
+			const inputs =
+				module.value.type === 'script' || module.value.type === 'rawscript'
+					? module.value.input_transforms
+					: {}
+
+			return inputs
+		},
+		setStepInputs: async (id, inputs) => {
+			if (id === 'preprocessor') {
+				throw new Error('Cannot set inputs for preprocessor')
+			}
+
+			const regex = /\[\[(.+?)\]\]\s*\n([\s\S]*?)(?=\n\[\[|$)/g
+
+			const parsedInputs = Array.from(inputs.matchAll(regex)).map((match) => ({
+				input: match[1],
+				value: match[2].trim()
+			}))
+
+			if (id === $selectedId) {
+				exprsToSet?.set({})
+				const argsToUpdate = {}
+				for (const { input, value } of parsedInputs) {
+					argsToUpdate[input] = {
+						type: 'javascript',
+						expr: value
+					}
+				}
+				exprsToSet?.set(argsToUpdate)
+			} else {
+				const module = getModule(id)
+				if (!module) {
+					throw new Error('Module not found')
+				}
+
+				if (module.value.type !== 'script' && module.value.type !== 'rawscript') {
+					throw new Error('Module is not a script or rawscript')
+				}
+
+				for (const { input, value } of parsedInputs) {
+					module.value.input_transforms[input] = {
+						type: 'javascript',
+						expr: value
+					}
+				}
+				refreshStateStore(flowStore)
+			}
+		},
+		getFlowInputsSchema: async () => {
+			return flowStore.val.schema ?? {}
+		},
+		setFlowInputsSchema: async (newInputs) => {
+			flowStore.val.schema = newInputs
+		},
+		selectStep: (id) => {
+			$selectedId = id
+		},
+		getStepCode: (id) => {
+			const module = getModule(id)
+			if (!module) {
+				throw new Error('Module not found')
+			}
+			if (module.value.type === 'rawscript') {
+				return module.value.content
+			} else {
+				throw new Error('Module is not a rawscript')
+			}
+		},
+		getModules: (id?: string) => {
+			if (id) {
+				const module = getModule(id)
+
+				if (!module) {
+					throw new Error('Module not found')
+				}
+
+				return getSubModules(module).flat()
+			}
+			return flowStore.val.value.modules
+		},
+		setBranchPredicate: async (id, branchIndex, expression) => {
+			const module = getModule(id)
+			if (!module) {
+				throw new Error('Module not found')
+			}
+			if (module.value.type !== 'branchone') {
+				throw new Error('Module is not a branchall or branchone')
+			}
+			const branch = module.value.branches[branchIndex]
+			if (!branch) {
+				throw new Error('Branch not found')
+			}
+			branch.expr = expression
+			refreshStateStore(flowStore)
+		},
+		addBranch: async (id) => {
+			const module = getModule(id)
+			if (!module) {
+				throw new Error('Module not found')
+			}
+			if (module.value.type !== 'branchall' && module.value.type !== 'branchone') {
+				throw new Error('Module is not a branchall or branchone')
+			}
+			flowModuleSchemaMap?.addBranch(module)
+			refreshStateStore(flowStore)
+		},
+		removeBranch: async (id, branchIndex) => {
+			const module = getModule(id)
+			if (!module) {
+				throw new Error('Module not found')
+			}
+			if (module.value.type !== 'branchall' && module.value.type !== 'branchone') {
+				throw new Error('Module is not a branchall or branchone')
+			}
+
+			// for branch one, we set index + 1 because the removeBranch function assumes the index is shifted by 1 because of the default branch
+			flowModuleSchemaMap?.removeBranch(
+				module,
+				module.value.type === 'branchone' ? branchIndex + 1 : branchIndex
+			)
+			refreshStateStore(flowStore)
+		},
+		setForLoopIteratorExpression: async (id, expression) => {
+			if ($currentEditor && $currentEditor.type === 'iterator' && $currentEditor.stepId === id) {
+				$currentEditor.editor.setCode(expression)
+			} else {
+				const module = getModule(id)
+				if (!module) {
+					throw new Error('Module not found')
+				}
+				if (module.value.type !== 'forloopflow') {
+					throw new Error('Module is not a forloopflow')
+				}
+				module.value.iterator = { type: 'javascript', expr: expression }
+				refreshStateStore(flowStore)
+			}
+		}
+	}
+
+	$effect(() => {
+		const cleanup = aiChatManager.setFlowHelpers(flowHelpers)
+		return cleanup
+	})
+
+	$effect(() => {
+		const cleanup = aiChatManager.listenForSelectedIdChanges(
+			$selectedId,
+			flowStore.val,
+			$flowStateStore,
+			$currentEditor
+		)
+		return cleanup
+	})
+
+	$effect(() => {
+		const cleanup = aiChatManager.listenForCurrentEditorChanges($currentEditor)
+		return cleanup
+	})
+</script>
diff --git a/frontend/src/lib/components/copilot/chat/flow/core.ts b/frontend/src/lib/components/copilot/chat/flow/core.ts
new file mode 100644
index 0000000000..0b7d96b845
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/flow/core.ts
@@ -0,0 +1,674 @@
+import {
+	ScriptService,
+	type FlowModule,
+	type OpenFlow,
+	type RawScript,
+	type Script
+} from '$lib/gen'
+import type {
+	ChatCompletionSystemMessageParam,
+	ChatCompletionTool,
+	ChatCompletionUserMessageParam
+} from 'openai/resources/chat/completions.mjs'
+import YAML from 'yaml'
+import { z } from 'zod'
+import { zodToJsonSchema } from 'zod-to-json-schema'
+import type { FunctionParameters } from 'openai/resources/shared.mjs'
+import uFuzzy from '@leeoniya/ufuzzy'
+import { emptySchema, emptyString } from '$lib/utils'
+import {
+	getFormattedResourceTypes,
+	getLangContext,
+	SUPPORTED_CHAT_SCRIPT_LANGUAGES
+} from '../script/core'
+import type { Tool } from '../shared'
+import type { ExtendedOpenFlow } from '$lib/components/flows/types'
+
+export interface FlowAIChatHelpers {
+	getFlowAndSelectedId: () => { flow: OpenFlow; selectedId: string }
+	insertStep: (location: InsertLocation, step: NewStep) => Promise<string>
+	removeStep: (id: string) => Promise<void>
+	getStepInputs: (id: string) => Promise<Record<string, any>>
+	setStepInputs: (id: string, inputs: string) => Promise<void>
+	getFlowInputsSchema: () => Promise<Record<string, any>>
+	setFlowInputsSchema: (inputs: Record<string, any>) => Promise<void>
+	selectStep: (id: string) => void
+	getStepCode: (id: string) => string
+	getModules: (id?: string) => FlowModule[]
+	setBranchPredicate: (id: string, branchIndex: number, expression: string) => Promise<void>
+	addBranch: (id: string) => Promise<void>
+	removeBranch: (id: string, branchIndex: number) => Promise<void>
+	setForLoopIteratorExpression: (id: string, expression: string) => Promise<void>
+	setCode: (id: string, code: string) => Promise<void>
+}
+
+const searchScriptsSchema = z.object({
+	query: z
+		.string()
+		.describe('The query to search for, e.g. send email, list stripe invoices, etc..')
+})
+
+const searchScriptsToolDef = createToolDef(
+	searchScriptsSchema,
+	'search_scripts',
+	'Search for scripts in the workspace'
+)
+
+const searchHubScriptsToolDef = createToolDef(
+	searchScriptsSchema,
+	'search_hub_scripts',
+	'Search for scripts in the hub'
+)
+
+const langSchema = z.enum(
+	SUPPORTED_CHAT_SCRIPT_LANGUAGES as [RawScript['language'], ...RawScript['language'][]]
+)
+
+const newStepSchema = z.union([
+	z
+		.object({
+			type: z.literal('rawscript'),
+			language: langSchema.describe(
+				'The language to use for the code, default to bun if none specified'
+			)
+		})
+		.describe('Add a raw script step at the specified location'),
+	z
+		.object({
+			type: z.literal('script'),
+			path: z.string().describe('The path of the script to use for the step.')
+		})
+		.describe('Add a script step at the specified location'),
+	z
+		.object({
+			type: z.literal('forloop')
+		})
+		.describe('Add a for loop at the specified location'),
+	z
+		.object({
+			type: z.literal('branchall')
+		})
+		.describe('Add a branch all at the specified location: all branches will be executed'),
+	z
+		.object({
+			type: z.literal('branchone')
+		})
+		.describe(
+			'Add a branch one at the specified location: only the first branch that evaluates to true will be executed'
+		)
+])
+
+type NewStep = z.infer<typeof newStepSchema>
+
+const insertLocationSchema = z.union([
+	z
+		.object({
+			type: z.literal('after'),
+			afterId: z.string().describe('The id of the step after which the new step will be added.')
+		})
+		.describe('Add a step after the given step id'),
+	z
+		.object({
+			type: z.literal('start')
+		})
+		.describe('Add a step at the start of the flow'),
+	z
+		.object({
+			type: z.literal('start_inside_forloop'),
+			inside: z
+				.string()
+				.describe('The id of the step inside which the new step will be added (forloop step only)')
+		})
+		.describe('Add a step at the start of the given step (forloop step only)'),
+	z
+		.object({
+			type: z.literal('start_inside_branch'),
+			inside: z
+				.string()
+				.describe(
+					'The id of the step inside which the new step will be added (branchone or branchall only).'
+				),
+			branchIndex: z
+				.number()
+				.describe(
+					'The index of the branch inside the forloop step, starting at 0. For the default branch (branchone only), the branch index is -1.'
+				)
+		})
+		.describe(
+			'Add a step at the start of a given branch of the given step (branchone or branchall only)'
+		),
+	z
+		.object({
+			type: z.literal('preprocessor')
+		})
+		.describe('Insert a preprocessor step (runs before the first step when triggered externally)'),
+	z
+		.object({
+			type: z.literal('failure')
+		})
+		.describe('Insert a failure step (only executed when the flow fails)')
+])
+
+type InsertLocation = z.infer<typeof insertLocationSchema>
+
+const addStepSchema = z.object({
+	location: insertLocationSchema,
+	step: newStepSchema
+})
+
+const addStepToolDef = createToolDef(
+	addStepSchema,
+	'add_step',
+	'Add a step at the specified location'
+)
+
+const removeStepSchema = z.object({
+	id: z.string().describe('The id of the step to remove')
+})
+
+const removeStepToolDef = createToolDef(
+	removeStepSchema,
+	'remove_step',
+	'Remove the step with the given id'
+)
+
+const setForLoopIteratorExpressionSchema = z.object({
+	id: z.string().describe('The id of the forloop step to set the iterator expression for'),
+	expression: z.string().describe('The JavaScript expression to set for the iterator')
+})
+
+const setForLoopIteratorExpressionToolDef = createToolDef(
+	setForLoopIteratorExpressionSchema,
+	'set_forloop_iterator_expression',
+	'Set the iterator JavaScript expression for the given forloop step'
+)
+
+const setBranchPredicateSchema = z.object({
+	id: z.string().describe('The id of the branchone step to set the predicates for'),
+	branchIndex: z
+		.number()
+		.describe('The index of the branch to set the predicate for, starting at 0.'),
+	expression: z.string().describe('The JavaScript expression to set for the predicate')
+})
+const setBranchPredicateToolDef = createToolDef(
+	setBranchPredicateSchema,
+	'set_branch_predicate',
+	'Set the predicates using a JavaScript expression for the given branch, only applicable for branchone branches.'
+)
+
+const addBranchSchema = z.object({
+	id: z.string().describe('The id of the step to add the branch to')
+})
+const addBranchToolDef = createToolDef(
+	addBranchSchema,
+	'add_branch',
+	'Add a branch to the given step, applicable to branchall and branchone steps'
+)
+
+const removeBranchSchema = z.object({
+	id: z.string().describe('The id of the step to remove the branch from'),
+	branchIndex: z.number().describe('The index of the branch to remove, starting at 0')
+})
+const removeBranchToolDef = createToolDef(
+	removeBranchSchema,
+	'remove_branch',
+	'Remove the branch with the given index from the given step, applicable to branchall and branchone steps.'
+)
+
+const getStepInputsSchema = z.object({
+	id: z.string().describe('The id of the step to get the inputs for')
+})
+
+const getStepInputsToolDef = createToolDef(
+	getStepInputsSchema,
+	'get_step_inputs',
+	'Get the inputs for the given step id'
+)
+
+const setStepInputsSchema = z.object({
+	id: z.string().describe('The id of the step to set the inputs for'),
+	inputs: z.string().describe('The inputs to set for the step')
+})
+
+const setStepInputsToolDef = createToolDef(
+	setStepInputsSchema,
+	'set_step_inputs',
+	`Set all inputs for the given step id. 
+
+Return a list of input. Each input should be defined by its input name enclosed in double square brackets ([[inputName]]), followed by a JavaScript expression that sets its value.
+The value expression can span multiple lines. Separate each input block with a blank line.
+
+Example:
+
+[[input1]]
+\`Hello, \${results.a}\`
+
+[[input2]]
+flow_input.iter.value
+
+[[input3]]
+flow_input.x`
+)
+
+const setFlowInputsSchemaSchema = z.object({
+	schema: z.string().describe('JSON string of the flow inputs schema (draft 2020-12)')
+})
+
+const setFlowInputsSchemaToolDef = createToolDef(
+	setFlowInputsSchemaSchema,
+	'set_flow_inputs_schema',
+	'Set the flow inputs schema. **Overrides the current schema.**'
+)
+
+const setCodeSchema = z.object({
+	id: z.string().describe('The id of the step to set the code for'),
+	code: z.string().describe('The code to apply')
+})
+
+const setCodeToolDef = createToolDef(
+	setCodeSchema,
+	'set_code',
+	'Set the code for the current step.'
+)
+
+class WorkspaceScriptsSearch {
+	private uf: uFuzzy
+	private workspace: string | undefined = undefined
+	private scripts: Script[] | undefined = undefined
+
+	constructor() {
+		this.uf = new uFuzzy()
+	}
+
+	private async init(workspace: string) {
+		this.scripts = await ScriptService.listScripts({
+			workspace
+		})
+		this.workspace = workspace
+	}
+
+	async search(query: string, workspace: string) {
+		if (this.scripts === undefined || this.workspace !== workspace) {
+			await this.init(workspace)
+		}
+
+		const scripts = this.scripts
+
+		if (!scripts) {
+			throw new Error('Failed to load scripts')
+		}
+
+		const results = this.uf.search(
+			scripts.map((s) => (emptyString(s.summary) ? s.path : s.summary + ' (' + s.path + ')')),
+			query.trim()
+		)
+		const scriptResults =
+			results[2]?.map((id) => ({
+				path: scripts[id].path,
+				summary: scripts[id].summary
+			})) ?? []
+
+		return scriptResults
+	}
+}
+
+const resourceTypeToolSchema = z.object({
+	query: z.string().describe('The query to search for, e.g. stripe, google, etc..'),
+	language: langSchema.describe(
+		'The programming language the code using the resource type will be written in'
+	)
+})
+
+const resourceTypeToolDef = createToolDef(
+	resourceTypeToolSchema,
+	'resource_type',
+	'Search for resource types'
+)
+
+const getInstructionsForCodeGenerationToolSchema = z.object({
+	id: z.string().describe('The id of the step to generate code for'),
+	language: langSchema.describe('The programming language the code will be written in')
+})
+
+const getInstructionsForCodeGenerationToolDef = createToolDef(
+	getInstructionsForCodeGenerationToolSchema,
+	'get_instructions_for_code_generation',
+	'Get instructions for code generation for a raw script step'
+)
+
+const workspaceScriptsSearch = new WorkspaceScriptsSearch()
+
+export const flowTools: Tool<FlowAIChatHelpers>[] = [
+	{
+		def: searchScriptsToolDef,
+		fn: async ({ args, workspace, toolId, toolCallbacks }) => {
+			toolCallbacks.onToolCall(
+				toolId,
+				'Searching for workspace scripts related to "' + args.query + '"...'
+			)
+			const parsedArgs = searchScriptsSchema.parse(args)
+			const scriptResults = await workspaceScriptsSearch.search(parsedArgs.query, workspace)
+			toolCallbacks.onFinishToolCall(
+				toolId,
+				'Found ' +
+					scriptResults.length +
+					' scripts in the workspace related to "' +
+					args.query +
+					'"'
+			)
+			return JSON.stringify(scriptResults)
+		}
+	},
+	{
+		def: searchHubScriptsToolDef,
+		fn: async ({ args, toolId, toolCallbacks }) => {
+			toolCallbacks.onToolCall(
+				toolId,
+				'Searching for hub scripts related to "' + args.query + '"...'
+			)
+			const parsedArgs = searchScriptsSchema.parse(args)
+			const scripts = await ScriptService.queryHubScripts({
+				text: parsedArgs.query,
+				kind: 'script'
+			})
+			toolCallbacks.onFinishToolCall(
+				toolId,
+				'Found ' + scripts.length + ' scripts in the hub related to "' + args.query + '"'
+			)
+			return JSON.stringify(
+				scripts.map((s) => ({
+					path: `hub/${s.version_id}/${s.app}/${s.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
+					summary: s.summary
+				}))
+			)
+		}
+	},
+	{
+		def: addStepToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			const parsedArgs = addStepSchema.parse(args)
+			toolCallbacks.onToolCall(
+				toolId,
+				parsedArgs.location.type === 'after'
+					? `Adding a step after, ${parsedArgs.location.afterId}`
+					: parsedArgs.location.type === 'start'
+						? 'Adding a step at the start'
+						: parsedArgs.location.type === 'start_inside_forloop'
+							? `Adding a step at the start of the forloop ${parsedArgs.location.inside}`
+							: parsedArgs.location.type === 'start_inside_branch'
+								? `Adding a step at the start of the branch ${parsedArgs.location.inside} ${parsedArgs.location.branchIndex}`
+								: parsedArgs.location.type === 'preprocessor'
+									? 'Adding a preprocessor step'
+									: parsedArgs.location.type === 'failure'
+										? 'Adding a failure step'
+										: 'Adding a step'
+			)
+			const id = await helpers.insertStep(parsedArgs.location, parsedArgs.step)
+			helpers.selectStep(id)
+
+			toolCallbacks.onFinishToolCall(toolId, `Added step '${id}'`)
+
+			return `Step ${id} added. Here is the updated flow, make sure to take it into account when adding another step:\n${YAML.stringify(helpers.getModules())}`
+		}
+	},
+	{
+		def: removeStepToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			toolCallbacks.onToolCall(toolId, `Removing step ${args.id}...`)
+			const parsedArgs = removeStepSchema.parse(args)
+			await helpers.removeStep(parsedArgs.id)
+			toolCallbacks.onFinishToolCall(toolId, `Removed step '${parsedArgs.id}'`)
+			return `Step '${parsedArgs.id}' removed. Here is the updated flow:\n${YAML.stringify(helpers.getModules())}`
+		}
+	},
+	{
+		def: getStepInputsToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			toolCallbacks.onToolCall(toolId, `Getting step ${args.id} inputs...`)
+			const parsedArgs = getStepInputsSchema.parse(args)
+			const inputs = await helpers.getStepInputs(parsedArgs.id)
+			toolCallbacks.onFinishToolCall(toolId, `Retrieved step '${parsedArgs.id}' inputs`)
+			return YAML.stringify(inputs)
+		}
+	},
+	{
+		def: setStepInputsToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			toolCallbacks.onToolCall(toolId, `Setting step ${args.id} inputs...`)
+			const parsedArgs = setStepInputsSchema.parse(args)
+			await helpers.setStepInputs(parsedArgs.id, parsedArgs.inputs)
+			helpers.selectStep(parsedArgs.id)
+			const inputs = await helpers.getStepInputs(parsedArgs.id)
+			toolCallbacks.onFinishToolCall(toolId, `Set step '${parsedArgs.id}' inputs`)
+			return `Step '${parsedArgs.id}' inputs set. New inputs:\n${YAML.stringify(inputs)}`
+		}
+	},
+	{
+		def: setFlowInputsSchemaToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			toolCallbacks.onToolCall(toolId, 'Setting flow inputs schema...')
+			const parsedArgs = setFlowInputsSchemaSchema.parse(args)
+			const schema = JSON.parse(parsedArgs.schema)
+			await helpers.setFlowInputsSchema(schema)
+			helpers.selectStep('Input')
+			const updatedSchema = await helpers.getFlowInputsSchema()
+			toolCallbacks.onFinishToolCall(toolId, 'Set flow inputs schema')
+			return `Flow inputs schema set. New schema:\n${JSON.stringify(updatedSchema)}`
+		}
+	},
+	{
+		def: getInstructionsForCodeGenerationToolDef,
+		fn: async ({ args, toolId, toolCallbacks }) => {
+			const parsedArgs = getInstructionsForCodeGenerationToolSchema.parse(args)
+			const langContext = getLangContext(parsedArgs.language, {
+				allowResourcesFetch: true,
+				isPreprocessor: parsedArgs.id === 'preprocessor'
+			})
+			toolCallbacks.onFinishToolCall(
+				toolId,
+				'Retrieved instructions for code generation in ' + parsedArgs.language
+			)
+			return langContext
+		}
+	},
+	{
+		def: setCodeToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			const parsedArgs = setCodeSchema.parse(args)
+			toolCallbacks.onToolCall(toolId, `Setting code for step '${parsedArgs.id}'...`)
+			await helpers.setCode(parsedArgs.id, parsedArgs.code)
+			helpers.selectStep(parsedArgs.id)
+			toolCallbacks.onFinishToolCall(toolId, `Set code for step '${parsedArgs.id}'`)
+			return `Step code set`
+		}
+	},
+	{
+		def: setBranchPredicateToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			const parsedArgs = setBranchPredicateSchema.parse(args)
+			await helpers.setBranchPredicate(parsedArgs.id, parsedArgs.branchIndex, parsedArgs.expression)
+			helpers.selectStep(parsedArgs.id)
+			toolCallbacks.onFinishToolCall(
+				toolId,
+				`Set predicate of branch ${parsedArgs.branchIndex + 1} of '${parsedArgs.id}'`
+			)
+			return `Branch ${parsedArgs.branchIndex} of '${parsedArgs.id}' predicate set`
+		}
+	},
+	{
+		def: addBranchToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			const parsedArgs = addBranchSchema.parse(args)
+			await helpers.addBranch(parsedArgs.id)
+			helpers.selectStep(parsedArgs.id)
+			toolCallbacks.onFinishToolCall(toolId, `Added branch to '${parsedArgs.id}'`)
+			return `Branch added to '${parsedArgs.id}'`
+		}
+	},
+	{
+		def: removeBranchToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			const parsedArgs = removeBranchSchema.parse(args)
+			await helpers.removeBranch(parsedArgs.id, parsedArgs.branchIndex)
+			helpers.selectStep(parsedArgs.id)
+			toolCallbacks.onFinishToolCall(
+				toolId,
+				`Removed branch ${parsedArgs.branchIndex + 1} of '${parsedArgs.id}'`
+			)
+			return `Branch ${parsedArgs.branchIndex} of '${parsedArgs.id}' removed`
+		}
+	},
+	{
+		def: setForLoopIteratorExpressionToolDef,
+		fn: async ({ args, helpers, toolId, toolCallbacks }) => {
+			const parsedArgs = setForLoopIteratorExpressionSchema.parse(args)
+			await helpers.setForLoopIteratorExpression(parsedArgs.id, parsedArgs.expression)
+			helpers.selectStep(parsedArgs.id)
+			toolCallbacks.onFinishToolCall(toolId, `Set forloop '${parsedArgs.id}' iterator expression`)
+			return `Forloop '${parsedArgs.id}' iterator expression set`
+		}
+	},
+	{
+		def: resourceTypeToolDef,
+		fn: async ({ args, toolId, workspace, toolCallbacks }) => {
+			const parsedArgs = resourceTypeToolSchema.parse(args)
+			toolCallbacks.onToolCall(toolId, 'Searching resource types for "' + parsedArgs.query + '"...')
+			const formattedResourceTypes = await getFormattedResourceTypes(
+				parsedArgs.language,
+				parsedArgs.query,
+				workspace
+			)
+			toolCallbacks.onFinishToolCall(
+				toolId,
+				'Retrieved resource types for "' + parsedArgs.query + '"'
+			)
+			return formattedResourceTypes
+		}
+	}
+]
+
+function createToolDef(
+	zodSchema: z.ZodSchema,
+	name: string,
+	description: string
+): ChatCompletionTool {
+	const schema = zodToJsonSchema(zodSchema, {
+		name,
+		target: 'openAi'
+	})
+	let parameters = schema.definitions![name] as FunctionParameters
+	parameters = {
+		...parameters,
+		required: parameters.required ?? []
+	}
+
+	return {
+		type: 'function',
+		function: {
+			strict: true,
+			name,
+			description,
+			parameters
+		}
+	}
+}
+
+export function prepareFlowSystemMessage(): ChatCompletionSystemMessageParam {
+	const content = `You are a helpful assistant that creates and edits workflows on the Windmill platform. You're provided with a bunch of tools to help you edit the flow.
+Follow the user instructions carefully.
+Go step by step, and explain what you're doing as you're doing it.
+DO NOT wait for user confirmation before performing an action. Only do it if the user explicitly asks you to wait in their initial instructions.
+Take note of the following:
+
+## Flow editor
+
+### Script steps and inputs
+You can add a script step in different ways:
+- from a script in the workspace
+- from a script in the hub
+- a raw script: create an empty step and write the code directly
+
+When generating code for a raw script step, you should make sure it's in the correct format for Windmill. Format varies depending on the language and on the type of step (preprocessor or not). Use the get_instructions_for_code_generation tool to get instructions to help you write the code. Make sure to follow them carefully. DO NOT tell the user you're using this specific tool, just use it.
+Also, make sure to display the code to the user before setting it.
+
+Unless the user explicitly specifies how the script should be created (e.g., from the workspace, from the hub, or as a new one), whenever they ask you to add a script step, you must first check for matching scripts in the workspace and the hub. If no suitable script is found, create a raw script step and write the necessary code directly.
+
+Once you've added a new step and set the path or written the code, you should use the get_step_inputs tool to get the current/possible inputs for the step and set the step input values using the set_step_inputs tool.
+Step input keys and types are automatically inferred from the code.
+If you use flow_input in the step inputs, make sure to add the missing properties to the schema using the set_flow_inputs_schema tool.
+
+### Branchone/branchall and forloop
+You can add branchone/branchall and forloops to the flow. Make sure to set the predicates for the branches (of branchone only) and the iterator expression for the forloops.
+You can also add or remove branches. Steps can be added inside branches and forloops.
+
+### Special instructions when adding steps
+When adding a step, always consider the current sequence of steps to ensure the new step is inserted in the correct position.
+Important: Steps are executed in the order they appear in the flow definition — not in the order they were added or by the alphanumeric order of their IDs.
+
+### Flow inputs schema
+You can use the set_flow_inputs_schema tool to set the flow inputs schema.
+
+### JavaScript expressions
+For step inputs, forloop iterator expressions and branch predicates, you should use JavaScript expressions.
+Here are the variables you can use:
+- Step results are accessible as results.stepid or results.stepid.property_name. 
+- Inside loops, the iterator value is accessible as flow_input.iter.value.
+- Flow inputs are accessible as flow_input.property_name. The flow input doesn't have to exist already but make sure to add it to the schema if it doesn't.
+- If you want to use static values, set them like in javascript (e.g. "hello", true, 3, etc...).
+Note: these variables are only accessible in step inputs, forloop iterator expressions and branch predicates. They are not directly accessible in the code and should be passed as script arguments using the set_step_inputs tool.
+
+### Special modules
+- Preprocessor: Runs before the first step when triggered externally. You cannot link its inputs. It's id is 'preprocessor'
+- Error handler: Runs when the flow fails. When linking it's input, you can only refer to flow_input and error (error: { message, name, stack, step_id }). It's id is 'failure'. 
+
+Both modules only support a script or rawscript step. You cannot nest modules using foorloop/branchone/branchall.
+
+
+## Resource types
+On Windmill, credentials and configuration are stored in resources. Resource types define the format of the resource.
+If the user needs a resource as flow input, you should the property type in the schema to "object" as well as add a key called "format" and set it to "resource-nameofresourcetype" (e.g. "resource-stripe").
+If the user wants a specific resource as step input, you should set the step value to a static string in the following format: "$res:path/to/resource".
+`
+
+	return {
+		role: 'system',
+		content
+	}
+}
+
+export function prepareFlowUserMessage(
+	instructions: string,
+	flowAndSelectedId?: { flow: ExtendedOpenFlow; selectedId: string }
+): ChatCompletionUserMessageParam {
+	const flow = flowAndSelectedId?.flow
+	const selectedId = flowAndSelectedId?.selectedId
+
+	if (!flow || !selectedId) {
+		return {
+			role: 'user',
+			content: `## INSTRUCTIONS:
+${instructions}`
+		}
+	}
+	return {
+		role: 'user',
+		content: `## FLOW:
+flow_input schema:
+${JSON.stringify(flow.schema ?? emptySchema())}
+
+flow modules:
+${YAML.stringify(flow.value.modules)}
+
+preprocessor module:
+${YAML.stringify(flow.value.preprocessor_module)}
+
+failure module:
+${YAML.stringify(flow.value.failure_module)}
+
+currently selected step:
+${selectedId}
+
+## INSTRUCTIONS:
+${instructions}`
+	}
+}
diff --git a/frontend/src/lib/components/copilot/chat/flow/utils.ts b/frontend/src/lib/components/copilot/chat/flow/utils.ts
new file mode 100644
index 0000000000..762575edb9
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/flow/utils.ts
@@ -0,0 +1,82 @@
+import { dfs } from '$lib/components/flows/previousResults'
+import type { OpenFlow } from '$lib/gen'
+
+export function getIndexInNestedModules(flow: OpenFlow, id: string) {
+	const accessingModules = dfs(id, flow, true).reverse()
+
+	let parent = flow.value.modules
+	let lastIndex = -1
+	for (const [ai, am] of accessingModules.entries()) {
+		const index = parent.findIndex((m) => m.id === am.id)
+
+		if (index === -1) {
+			throw new Error(`Module not found: ${am.id} in ${parent.map((m) => m.id).join(', ')}`)
+		}
+
+		lastIndex = index
+
+		if (ai === accessingModules.length - 1) {
+			break
+		}
+
+		if (
+			parent[index].value.type === 'forloopflow' ||
+			parent[index].value.type === 'whileloopflow'
+		) {
+			parent = parent[index].value.modules
+		} else if (
+			parent[index].value.type === 'branchall' ||
+			parent[index].value.type === 'branchone'
+		) {
+			const branchIdx = parent[index].value.branches.findIndex((b) =>
+				b.modules.some((m) => m.id === accessingModules[ai + 1].id)
+			)
+			if (branchIdx === -1) {
+				throw new Error(
+					`Branch not found: ${am.id} in ${parent[index].value.branches.map((b) => b.modules.map((m) => m.id).join(', ')).join(';')}`
+				)
+			}
+			parent = parent[index].value.branches[branchIdx].modules
+		} else {
+			throw new Error('Module is not a for loop or branch')
+		}
+	}
+
+	if (lastIndex === -1) {
+		throw new Error('Module not found, should have been caught earlier')
+	}
+
+	return {
+		index: lastIndex,
+		modules: parent
+	}
+}
+export function getNestedModules(flow: OpenFlow, id: string, branchIndex?: number) {
+	const { index, modules } = getIndexInNestedModules(flow, id)
+
+	// we know index is correct because we've already checked it in getIndexInNestedModules
+	const module = modules[index]
+
+	if (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow') {
+		return module.value.modules
+	} else if (
+		branchIndex !== undefined &&
+		(module.value.type === 'branchall' || module.value.type === 'branchone')
+	) {
+		if (module.value.type === 'branchone' && branchIndex === -1) {
+			return module.value.default
+		}
+
+		const branch = module.value.branches[branchIndex]
+
+		if (!branch) {
+			throw new Error(
+				`Branch not found: ${id} in ${module.value.branches.map((b) => b.modules.map((m) => m.id).join(', ')).join(';')}`
+			)
+		}
+
+		return branch.modules
+	} else {
+		throw new Error('Module is not a loop or branch')
+	}
+}
diff --git a/frontend/src/lib/components/copilot/chat/monaco-adapter.ts b/frontend/src/lib/components/copilot/chat/monaco-adapter.ts
index a8168fdba2..300fe88696 100644
--- a/frontend/src/lib/components/copilot/chat/monaco-adapter.ts
+++ b/frontend/src/lib/components/copilot/chat/monaco-adapter.ts
@@ -8,6 +8,7 @@ import {
 	type VisualChange
 } from '../shared'
 import { writable, type Writable } from 'svelte/store'
+import { aiChatManager } from './AIChatManager.svelte'
 
 type ExcludeVariant<T, K extends keyof T, V> = T extends Record<K, V> ? never : T
 type VisualChangeWithDiffIndex = ExcludeVariant<VisualChange, 'type', 'added_inline'> & {
@@ -22,7 +23,6 @@ export class AIChatEditorHandler {
 
 	reviewingChanges: Writable<boolean> = writable(false)
 	groupChanges: { changes: VisualChangeWithDiffIndex[]; groupIndex: number }[] = []
-	pendingNewCode: string | undefined = undefined
 
 	constructor(editor: meditor.IStandaloneCodeEditor) {
 		this.editor = editor
@@ -30,7 +30,7 @@ export class AIChatEditorHandler {
 
 	clear() {
 		this.groupChanges = []
-		this.pendingNewCode = undefined
+		aiChatManager.pendingNewCode = undefined
 		for (const collection of this.decorationsCollections) {
 			collection.clear()
 		}
@@ -168,12 +168,13 @@ export class AIChatEditorHandler {
 	}
 
 	async reviewAndApply(newCode: string) {
-		if (this.pendingNewCode === newCode) {
+		if (aiChatManager.pendingNewCode === newCode) {
+			this.acceptAll()
 			return
-		} else if (this.pendingNewCode) {
+		} else if (aiChatManager.pendingNewCode) {
 			this.clear()
 		}
-		this.pendingNewCode = newCode
+		aiChatManager.pendingNewCode = newCode
 		const changedLines = await this.calculateVisualChanges(newCode)
 		if (changedLines.length === 0) return
 
diff --git a/frontend/src/lib/components/copilot/chat/navigator/apiTools.ts b/frontend/src/lib/components/copilot/chat/navigator/apiTools.ts
new file mode 100644
index 0000000000..08d951e7ed
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/navigator/apiTools.ts
@@ -0,0 +1,281 @@
+import type { ChatCompletionTool } from 'openai/resources/index.mjs'
+import type { Tool } from '../shared'
+import { get } from 'svelte/store'
+import { workspaceStore } from '$lib/stores'
+
+// OpenAPI type definitions
+interface OpenAPIParameter {
+	name: string
+	in: string
+	description?: string
+	required?: boolean
+	schema?: {
+		type?: string
+		format?: string
+	}
+}
+
+interface OpenAPIRequestBody {
+	description?: string
+	required?: boolean
+	content: {
+		[contentType: string]: {
+			schema: {
+				type?: string
+				properties?: Record<string, any>
+			}
+		}
+	}
+}
+
+interface OpenAPIOperation {
+	operationId?: string
+	summary?: string
+	description?: string
+	parameters?: OpenAPIParameter[]
+	requestBody?: OpenAPIRequestBody
+	responses?: Record<string, any>
+	tags?: string[]
+}
+
+interface OpenAPIPathItem {
+	get?: OpenAPIOperation
+	post?: OpenAPIOperation
+	put?: OpenAPIOperation
+	delete?: OpenAPIOperation
+	patch?: OpenAPIOperation
+	options?: OpenAPIOperation
+	parameters?: OpenAPIParameter[]
+	summary?: string
+	description?: string
+}
+
+interface OpenAPISpec {
+	paths: {
+		[path: string]: OpenAPIPathItem
+	}
+}
+
+const buildApiCallTools = (
+	name: string,
+	description: string,
+	parameters: any
+): ChatCompletionTool => {
+	return {
+		type: 'function',
+		function: {
+			name,
+			description,
+			parameters
+		}
+	}
+}
+
+export function buildToolsFromOpenApi(
+	openApiSpec: OpenAPISpec,
+	options: {
+		pathFilter?: (path: string) => boolean
+		operationFilter?: (operation: OpenAPIOperation) => boolean
+		methodFilter?: string[]
+	} = {}
+): { tools: ChatCompletionTool[]; endpointMap: Record<string, string> } {
+	const tools: ChatCompletionTool[] = []
+	const endpointMap: Record<string, string> = {}
+	const { pathFilter, methodFilter = ['get', 'post', 'put', 'delete', 'patch'] } = options
+
+	// Iterate through all paths in the OpenAPI spec
+	for (const [path, pathItem] of Object.entries(openApiSpec.paths)) {
+		if (pathFilter && !pathFilter(path)) continue
+
+		for (const [method, operation] of Object.entries(pathItem)) {
+			// Skip non-operation properties
+			if (
+				method === 'parameters' ||
+				method === 'servers' ||
+				method === 'summary' ||
+				method === 'description'
+			)
+				continue
+
+			// Skip methods not in methodFilter
+			if (!methodFilter.includes(method.toLowerCase())) continue
+
+			// Type cast to OpenAPIOperation
+			const op = operation as OpenAPIOperation
+			if (!op.operationId || !op.summary) {
+				console.error(`Operation ${method} ${path} has no operationId or summary`)
+				continue
+			}
+
+			// Build the parameters schema
+			const parameters: Record<string, any> = {
+				type: 'object',
+				properties: {},
+				required: []
+			}
+
+			// Process path parameters
+			const pathParams = [...(pathItem.parameters || []), ...(op.parameters || [])].filter(
+				(p: OpenAPIParameter) => p.in === 'path'
+			)
+
+			// Process query parameters
+			const queryParams = (op.parameters || []).filter((p: OpenAPIParameter) => p.in === 'query')
+
+			// Add path parameters
+			for (const param of pathParams) {
+				parameters.properties[param.name] = {
+					type: param.schema?.type || 'string',
+					description: param.description || `Path parameter: ${param.name}`
+				}
+
+				if (param.required) {
+					parameters.required.push(param.name)
+				}
+			}
+
+			// Add query parameters
+			for (const param of queryParams) {
+				parameters.properties[param.name] = {
+					type: param.schema?.type || 'string',
+					description: param.description || `Query parameter: ${param.name}`
+				}
+
+				if (param.required) {
+					parameters.required.push(param.name)
+				}
+			}
+
+			// Handle request body if present
+			if (op.requestBody) {
+				const contentType = Object.keys(op.requestBody.content || {})[0]
+				if (contentType) {
+					const schema = op.requestBody.content[contentType].schema
+
+					if (schema) {
+						parameters.properties.body = {
+							type: 'object',
+							description: op.requestBody.description || 'Request body',
+							properties: schema.properties || {}
+						}
+
+						if (op.requestBody.required) {
+							parameters.required.push('body')
+						}
+					}
+				}
+			}
+
+			const tool = buildApiCallTools(
+				'api_' + op.operationId,
+				op.summary || op.description || `${method.toUpperCase()} ${path}`,
+				parameters
+			)
+
+			// Store the endpoint path in the map
+			endpointMap['api_' + op.operationId] = `${method.toUpperCase()} ${path}`
+
+			tools.push(tool)
+		}
+	}
+
+	return { tools, endpointMap }
+}
+
+export function createApiTools(
+	chatTools: ChatCompletionTool[],
+	endpointMap: Record<string, string> = {}
+): Tool<{}>[] {
+	return chatTools.map((chatTool) => {
+		return {
+			def: chatTool,
+			fn: async ({ args, toolId, toolCallbacks }) => {
+				const toolName = chatTool.function.name
+				let endpoint = endpointMap[toolName] || ''
+				endpoint = endpoint.replace('{workspace}', get(workspaceStore) as string)
+				toolCallbacks.onToolCall(toolId, `Calling API endpoint (${endpoint})...`)
+
+				try {
+					// Extract method and path from endpoint
+					const [method, path] = endpoint.split(' ', 2)
+
+					if (!endpoint || !method || !path) {
+						throw new Error(`Invalid endpoint for tool ${toolName}: ${endpoint}`)
+					}
+
+					// Build URL with path parameters
+					let url = `/api${path}`
+					const queryParams: Record<string, string> = {}
+
+					// Process arguments
+					for (const [key, value] of Object.entries(args)) {
+						if (key === 'body') continue // Body is handled separately
+
+						// Check if this is a path parameter
+						if (url.includes(`:${key}`)) {
+							url = url.replace(`:${key}`, encodeURIComponent(String(value)))
+						} else {
+							// Assume it's a query parameter
+							queryParams[key] = String(value)
+						}
+					}
+					// Add query parameters to URL if needed
+					if (Object.keys(queryParams).length > 0) {
+						const searchParams = new URLSearchParams()
+						for (const [key, value] of Object.entries(queryParams)) {
+							searchParams.append(key, value)
+						}
+						url += `?${searchParams.toString()}`
+					}
+
+					// Log the constructed URL
+					console.log(`Calling API: ${method} ${url} with args: ${JSON.stringify(args)}`)
+
+					const response = await fetch(url, {
+						method: method
+					})
+					const data = await response.json()
+
+					// For now, return a placeholder response
+					// In a real implementation, we would make the actual API call here
+					toolCallbacks.onFinishToolCall(toolId, `API call to ${endpoint} completed`)
+					return JSON.stringify({
+						success: true,
+						data: data
+					})
+				} catch (error) {
+					toolCallbacks.onFinishToolCall(toolId, `API call to ${endpoint} failed`)
+					console.error(`Error calling API to ${endpoint}:`, error)
+					return `Error calling API: ${error instanceof Error ? error.message : String(error)}`
+				}
+			}
+		}
+	})
+}
+
+export async function loadApiTools(): Promise<Tool<{}>[]> {
+	try {
+		const response = await fetch('/api/openapi.json')
+		const openApiSpec = (await response.json()) as OpenAPISpec
+		const pathsToInclude = [
+			'jobs',
+			'scripts',
+			'flows',
+			'resources',
+			'variables',
+			'schedules',
+			'workers'
+		]
+
+		const { tools: apiTools, endpointMap } = buildToolsFromOpenApi(openApiSpec, {
+			pathFilter: (path) => pathsToInclude.some((p) => path.includes(`/${p}/`)),
+			methodFilter: ['get']
+		})
+
+		const executableApiTools = createApiTools(apiTools, endpointMap)
+		return executableApiTools
+	} catch (error) {
+		console.error('Failed to load API tools:', error)
+		return []
+	}
+}
diff --git a/frontend/src/lib/components/copilot/chat/navigator/core.ts b/frontend/src/lib/components/copilot/chat/navigator/core.ts
new file mode 100644
index 0000000000..3c05e38017
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/navigator/core.ts
@@ -0,0 +1,370 @@
+import { page } from '$app/state'
+import type {
+	ChatCompletionSystemMessageParam,
+	ChatCompletionTool,
+	ChatCompletionUserMessageParam
+} from 'openai/resources/index.mjs'
+import type { Tool } from '../shared'
+import { aiChatManager } from '../AIChatManager.svelte'
+import { ResourceService } from '$lib/gen'
+import { workspaceStore } from '$lib/stores'
+import { get } from 'svelte/store'
+
+export const CHAT_SYSTEM_PROMPT = `
+You are Windmill's intelligent assistant, designed to help users navigate the application and answer questions about its functionality. It is your only purpose to help the user in the context of the windmill application.
+Windmill is an open-source developer platform for building internal tools, API integrations, background jobs, workflows, and user interfaces. It offers a unified system where scripts are automatically turned into sharable UIs and can be composed into flows or embedded in custom applications.
+
+You have access to these tools:
+1. View current buttons and inputs on the page (get_triggerable_components)
+2. Execute buttons and inputs (trigger_component) 
+3. Get documentation for user requests (get_documentation)
+4. A list of tools to interact with the backend API
+
+INSTRUCTIONS:
+- When users ask about application features or concepts, first use get_documentation internally to retrieve accurate information about how to fulfill the user's request.
+- Then immediately use the available tools to guide the user through the application. Do not wait for the user's confirmation before taking action.
+- If you detect a confirmation modal that needs user confirmation, stop the navigation and let the user know that the action is pending confirmation.
+- Use get_triggerable_components to understand available options, and then trigger the components using trigger_component. Then wait a moment before rescanning the current page, and then continue with the next step. Do this 5 times max.
+- Make sure you navigated as far as possible before responding to the user. Always use get_triggerable_components one last time to make sure you didn't miss anything.
+- If you are not able to fulfill the user's request after 5 attempts, redirect the user to the documentation.
+- If you are asked to fill a form or act on an input, input the existing json object and change the fields the user asked you to change. Take into account the prompt_for_ai field of the schema to know what and how to do changes. Then tell the user that you have updated the form, and ask him to review the changes before running the script or flow.
+- For form inputs where format starts with "resource-" and is not "resource-obj", fetch the available resources using get_available_resources, and then use the resource_path prefixed with "$res:" to fill the input.
+- If you are not sure about an input, set the ones you are sure about, and then ask the user for the value of the input you are not sure about.
+
+GENERAL PRINCIPLES:
+- Be concise but thorough
+- Focus on taking action and completing the user's goals
+- Maintain a friendly, professional tone
+- If you encounter an error or can't complete a request, explain why and suggest alternatives
+- When asked about a specific script, flow or app, first check components directly related to the mentioned entity, before checking the other components.
+- When you do not find what you are looking for on the current page, go to the home page by looking for the "Home" component, then scan the components again.
+
+IMPORTANT CONSIDERATIONS:
+- If you do an API call, make sure you ask the user if he also wants you to navigate the application to fulfill his request.
+- The user might have changed the page in the middle of the conversation, so make sure you rescan the page on each user request instead of just responding that you cannot find what the user is asking for.
+- If you navigate to a script creation page, consider this:
+  - The page opens with the settings drawer open. After doing the changes mentioned by the user, close the settings drawer.
+  - Then if the user has described what he wanted the script to do, switch to script mode with the change_mode tool, and use the new tools you'll have access to to edit the script.
+- If you navigate to a flow creation page, consider this:
+  - If the user has described what he wanted the flow to do, switch to flow mode with the change_mode tool before using the new tools you'll have access to to edit the flow.
+
+API_TOOLS_RESTRICTIONS:
+- You can only use the API tools to fetch data from the backend API after you tried to navigate the application to fulfill the user's request and it's not enough to do so. ALWAYS ask the user if he also wants you to navigate the application to fulfill his request.
+- If you use api tools, also fetch the relevant documentation to help the user understand the data you fetched, with a link to the documentation if possible.
+
+RETRIEVE_AVAILABLE_RESOURCES_RESTRICTION:
+- You can only use the get_available_resources tool to fill a form or an input based on the user's request. Do not use it when directly asked to fetch available resources, use the API tools instead.
+
+Always use the provided tools purposefully and appropriately to achieve the user's goals.
+Your actions only allow you to navigate the application through the provided tools.
+When you complete the user's request, do not say "I created..." or "I updated..." or "I deleted...", but rather complete your response with precisions about how it works based on the documentation. Also drop a link to the relevant documentation if possible.
+
+Example of good behavior:
+- User: "How can I set my AI providers?"
+- You: <call get_documentation and fetch relevant documentation>
+- You: <call get_triggerable_components to find relevant components>
+- You: <trigger the components>
+- You: "<precisions about the request based on the documentation>"
+`
+
+const GET_DOCUMENTATION_TOOL: ChatCompletionTool = {
+	type: 'function',
+	function: {
+		name: 'get_documentation',
+		description: 'Get the documentation for the user request',
+		parameters: {
+			type: 'object',
+			properties: {
+				request: {
+					type: 'string',
+					description: 'The user request'
+				}
+			},
+			required: ['request']
+		}
+	}
+}
+
+// Tool definitions
+const GET_TRIGGERABLE_COMPONENTS_TOOL: ChatCompletionTool = {
+	type: 'function',
+	function: {
+		name: 'get_triggerable_components',
+		description: 'Get the current triggerable components on the page',
+		parameters: {
+			type: 'object',
+			properties: {},
+			required: []
+		}
+	}
+}
+
+const EXECUTE_COMMAND_TOOL: ChatCompletionTool = {
+	type: 'function',
+	function: {
+		name: 'trigger_component',
+		description: 'Trigger a triggerable component',
+		parameters: {
+			type: 'object',
+			properties: {
+				id: {
+					type: 'string',
+					description: 'ID of the AI-triggerable component'
+				},
+				value: {
+					type: 'string',
+					description: 'Value to pass to the AI-triggerable component trigger function'
+				},
+				actionTaken: {
+					type: 'string',
+					description:
+						'Short description of the action taken. Can be clicked, filled, etc. Includes which component was triggered.'
+				}
+			},
+			required: ['id', 'actionTaken']
+		}
+	}
+}
+
+const GET_CURRENT_PAGE_NAME_TOOL: ChatCompletionTool = {
+	type: 'function',
+	function: {
+		name: 'get_current_page_name',
+		description: 'Get the name of the current page the user is on.',
+		parameters: {
+			type: 'object',
+			properties: {},
+			required: []
+		}
+	}
+}
+
+const GET_AVAILABLE_RESOURCES_TOOL: ChatCompletionTool = {
+	type: 'function',
+	function: {
+		name: 'get_available_resources',
+		description:
+			"Get the available resources to the user. Only use this tool to fill a form or an input based on the user's request.",
+		parameters: {
+			type: 'object',
+			properties: {
+				resource_type: {
+					type: 'string',
+					description: 'The type of resource to get, separated by ","'
+				}
+			},
+			required: ['resource_type']
+		}
+	}
+}
+
+function getTriggerableComponents(): string {
+	try {
+		// Get components registered in the triggerablesByAI store
+		const registeredComponents = aiChatManager.triggerablesByAI
+		let result = 'TRIGGERABLE_COMPONENTS:\n'
+
+		// If there are no components registered, return a message
+		if (Object.keys(registeredComponents).length === 0) {
+			return 'No AI-triggerable components are currently available on this page.\n'
+		}
+
+		// List each registered component with its ID and description
+		Object.entries(registeredComponents).forEach(([id, component], index) => {
+			result += `
+				[${index}]
+				ID: "${id}"
+				Description: ${component.description}
+				Triggerable: ${component.onTrigger ? 'Yes' : 'No'}
+				\n`
+		})
+
+		return result
+	} catch (error) {
+		console.error('Error getting triggerable components:', error)
+		return 'Error getting triggerable components: ' + error.message
+	}
+}
+
+// Function to get the current page name
+function getCurrentPageName(): string {
+	try {
+		const currentPage = page.url.pathname
+		switch (currentPage) {
+			case '/':
+				return 'Home Page'
+			case '/flows/add':
+				return 'Flow creation page'
+			case '/scripts/add':
+				return 'Script creation page'
+			case '/apps/add':
+				return 'App creation page'
+			default:
+				return 'Non-specific page'
+		}
+	} catch (error) {
+		console.error('Error getting current page name:', error)
+		return 'Error getting current page name: ' + error.message
+	}
+}
+
+// Function to execute commands on the page
+function triggerComponent(args: { id: string; value: string }): string {
+	const { id, value } = args
+
+	try {
+		// Handle triggering AI components
+		if (!id) {
+			return 'Trigger command requires an id parameter'
+		}
+
+		const component = aiChatManager.triggerablesByAI[id]
+
+		if (!component) {
+			return `No triggerable component found with id: ${id}`
+		}
+
+		if (component.onTrigger) {
+			component.onTrigger(value)
+			return `Successfully triggered component: ${id} (${component.description})`
+		} else {
+			return `Component ${id} has no trigger handler defined`
+		}
+	} catch (error) {
+		console.error('Error executing command:', error)
+		return `Error executing command: ${error.message}`
+	}
+}
+
+async function getDocumentation(args: { request: string }): Promise<string> {
+	const retrieval = await fetch('/api/inkeep', {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({
+			model: 'inkeep-rag',
+			messages: [{ role: 'user', content: args.request }],
+			response_format: {
+				type: 'json_object'
+			}
+		})
+	})
+	const data = await retrieval.json()
+	if (!data.choices?.[0]?.message?.content) {
+		return 'No documentation found for this request'
+	}
+
+	// Parse the raw response
+	const raw = data.choices[0].message.content
+	const parsed = JSON.parse(raw)
+
+	// Clean up the response to include only essential information
+	if (parsed.content && Array.isArray(parsed.content)) {
+		const cleanedContent = parsed.content.map((item: any) => ({
+			title: item.title,
+			url: item.url,
+			content: item.source?.content.map((c: any) => c.text).join('\n') || []
+		}))
+		// Limit the response to 30000 characters max
+		const stringified = JSON.stringify({ content: cleanedContent }).slice(0, 30000)
+
+		return stringified
+	}
+
+	return data.choices[0].message.content
+}
+
+async function getAvailableResources(args: { resource_type: string }): Promise<string> {
+	const resources = await ResourceService.listResource({
+		workspace: get(workspaceStore) as string,
+		resourceType: args.resource_type
+	})
+	return JSON.stringify(resources)
+}
+
+const triggerComponentTool: Tool<{}> = {
+	def: EXECUTE_COMMAND_TOOL,
+	fn: async ({ args, toolId, toolCallbacks }) => {
+		toolCallbacks.onToolCall(toolId, 'Triggering component...')
+		const result = triggerComponent(args)
+		toolCallbacks.onFinishToolCall(
+			toolId,
+			args.actionTaken.charAt(0).toUpperCase() + args.actionTaken.slice(1)
+		)
+		return result
+	}
+}
+
+const getTriggerableComponentsTool: Tool<{}> = {
+	def: GET_TRIGGERABLE_COMPONENTS_TOOL,
+	fn: async ({ toolId, toolCallbacks }) => {
+		toolCallbacks.onToolCall(toolId, 'Scanning the page...')
+		const components = getTriggerableComponents()
+		toolCallbacks.onFinishToolCall(toolId, 'Scanned the page')
+		return components
+	}
+}
+
+const getCurrentPageNameTool: Tool<{}> = {
+	def: GET_CURRENT_PAGE_NAME_TOOL,
+	fn: async ({ toolId, toolCallbacks }) => {
+		const pageName = getCurrentPageName()
+		toolCallbacks.onFinishToolCall(toolId, 'Retrieved current page name')
+		return pageName
+	}
+}
+
+export const getDocumentationTool: Tool<{}> = {
+	def: GET_DOCUMENTATION_TOOL,
+	fn: async ({ args, toolId, toolCallbacks }) => {
+		toolCallbacks.onToolCall(toolId, 'Getting documentation...')
+		try {
+			const docResult = await getDocumentation(args)
+			toolCallbacks.onFinishToolCall(toolId, 'Retrieved documentation')
+			return docResult
+		} catch (error) {
+			toolCallbacks.onFinishToolCall(toolId, 'Error getting documentation')
+			console.error('Error getting documentation:', error)
+			return 'Failed to get documentation, pursuing with the user request...'
+		}
+	}
+}
+
+const getAvailableResourcesTool: Tool<{}> = {
+	def: GET_AVAILABLE_RESOURCES_TOOL,
+	fn: async ({ args, toolId, toolCallbacks }) => {
+		toolCallbacks.onToolCall(toolId, 'Getting available resources...')
+		try {
+			const resources = await getAvailableResources(args)
+			toolCallbacks.onFinishToolCall(toolId, 'Retrieved available resources')
+			return resources
+		} catch (error) {
+			toolCallbacks.onFinishToolCall(toolId, 'Error getting available resources')
+			console.error('Error getting available resources:', error)
+			return 'Failed to get available resources, pursuing with the user request...'
+		}
+	}
+}
+
+export const navigatorTools: Tool<{}>[] = [
+	getTriggerableComponentsTool,
+	triggerComponentTool,
+	getDocumentationTool,
+	getCurrentPageNameTool,
+	getAvailableResourcesTool
+]
+
+export function prepareNavigatorSystemMessage(): ChatCompletionSystemMessageParam {
+	return {
+		role: 'system',
+		content: CHAT_SYSTEM_PROMPT
+	}
+}
+
+export function prepareNavigatorUserMessage(instructions: string): ChatCompletionUserMessageParam {
+	return {
+		role: 'user',
+		content: instructions
+	}
+}
diff --git a/frontend/src/lib/components/copilot/chat/CodeDisplay.svelte b/frontend/src/lib/components/copilot/chat/script/CodeDisplay.svelte
similarity index 83%
rename from frontend/src/lib/components/copilot/chat/CodeDisplay.svelte
rename to frontend/src/lib/components/copilot/chat/script/CodeDisplay.svelte
index d56e6d6ba8..998a0a166d 100644
--- a/frontend/src/lib/components/copilot/chat/CodeDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/script/CodeDisplay.svelte
@@ -5,7 +5,8 @@
 	import { getContext, untrack } from 'svelte'
 	import { Loader2 } from 'lucide-svelte'
 	import { initializeVscode } from '$lib/components/vscode'
-	import type { AIChatContext, ContextElement, DisplayMessage } from './core'
+	import type { DisplayMessage } from '../shared'
+	import type { ContextElement } from '../context'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import {
 		csharp,
@@ -21,21 +22,17 @@
 		yaml
 	} from 'svelte-highlight/languages'
 	import { scriptLangToEditorLang } from '$lib/scripts'
+	import { aiChatManager } from '../AIChatManager.svelte'
 
 	const astNode = getAstNode()
 
-	const {
-		loading: loadingContext,
-		currentReply,
-		applyCode
-	} = getContext<AIChatContext>('AIChatContext')
-
 	const { message } = getContext<{ message: DisplayMessage }>('AssistantMessageContext')
 
 	let codeContext = $derived(
-		message.contextElements?.find((e) => e.type === 'code') as
-			| Extract<ContextElement, { type: 'code' }>
-			| undefined
+		message.role === 'assistant' &&
+			(message.contextElements?.find((e) => e.type === 'code') as
+				| Extract<ContextElement, { type: 'code' }>
+				| undefined)
 	)
 
 	function getSmartLang(lang: string) {
@@ -104,8 +101,11 @@
 	let loading = $state(true)
 	$effect(() => {
 		// we only want to trigger when astNode offset is updated not currentReply, otherwise as there is some delay on the offset update, loading would be set to false too early
-		const completeReply = untrack(() => $currentReply)
-		if (!$loadingContext || completeReply.length > (astNode.current.position?.end.offset ?? 0)) {
+		const completeReply = untrack(() => aiChatManager.currentReply)
+		if (
+			!aiChatManager.loading ||
+			completeReply.length > (astNode.current.position?.end.offset ?? 0)
+		) {
 			loading = false
 		}
 	})
@@ -175,21 +175,21 @@
 			language &&
 			codeContext &&
 			getSmartLang(codeContext.lang) === getSmartLang(language) &&
-			setDiffEditor(diffEl)
+			untrack(() => diffEl && setDiffEditor(diffEl))
 	})
 </script>
 
 <div class="flex flex-col gap-0.5 rounded-lg relative not-prose">
-	{#if codeContext}
+	{#if aiChatManager.canApplyCode && code !== aiChatManager.scriptEditorOptions?.code}
 		<div class="flex justify-end items-end">
 			<Button
 				color="dark"
 				size="xs2"
 				on:click={() => {
-					applyCode(code ?? '')
+					aiChatManager.scriptEditorApplyCode?.(code ?? '')
 				}}
 			>
-				Apply
+				{aiChatManager.pendingNewCode ? 'Accept all' : 'Apply'}
 			</Button>
 		</div>
 	{/if}
@@ -197,17 +197,17 @@
 	<div
 		class="relative w-full border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden"
 	>
-		{#if (loading && !code) || !language}
+		{#if aiChatManager.mode !== 'navigator' && ((loading && !code) || !language)}
 			<div class="flex flex-row gap-1 p-2 items-center justify-center">
 				<Loader2 class="w-4 h-4 animate-spin" /> Generating code...
 			</div>
-		{:else if !loading && codeContext && getSmartLang(codeContext.lang) === getSmartLang(language)}
+		{:else if !loading && codeContext && getSmartLang(codeContext.lang) === getSmartLang(language as string)}
 			<div bind:this={diffEl} class="w-full h-full"></div>
 		{:else}
 			<HighlightCode
 				class="p-1"
 				code={code ?? ''}
-				highlightLanguage={SMART_LANG_TO_HIGHLIGHT_LANG[getSmartLang(language)]}
+				highlightLanguage={SMART_LANG_TO_HIGHLIGHT_LANG[getSmartLang(language as string)]}
 				language={undefined}
 			/>
 		{/if}
diff --git a/frontend/src/lib/components/copilot/chat/core.ts b/frontend/src/lib/components/copilot/chat/script/core.ts
similarity index 66%
rename from frontend/src/lib/components/copilot/chat/core.ts
rename to frontend/src/lib/components/copilot/chat/script/core.ts
index c1a1023904..d26210f7c7 100644
--- a/frontend/src/lib/components/copilot/chat/core.ts
+++ b/frontend/src/lib/components/copilot/chat/script/core.ts
@@ -1,20 +1,19 @@
 import { ResourceService } from '$lib/gen/services.gen'
 import type { ResourceType, ScriptLang } from '$lib/gen/types.gen'
 import { capitalize, isObject, toCamel } from '$lib/utils'
-import { get, type Writable } from 'svelte/store'
-import { getCompletion } from '../lib'
-import { compile, phpCompile, pythonCompile } from '../utils'
-import { Code, Database, TriangleAlert, Diff } from 'lucide-svelte'
+import { get } from 'svelte/store'
+import { compile, phpCompile, pythonCompile } from '../../utils'
 import type {
-	ChatCompletionChunk,
-	ChatCompletionMessageParam,
-	ChatCompletionMessageToolCall,
-	ChatCompletionTool
+	ChatCompletionSystemMessageParam,
+	ChatCompletionTool,
+	ChatCompletionUserMessageParam
 } from 'openai/resources/index.mjs'
-import { workspaceStore, type DBSchema, dbSchemas } from '$lib/stores'
+import { type DBSchema, dbSchemas } from '$lib/stores'
 import { scriptLangToEditorLang } from '$lib/scripts'
 import { getDbSchemas } from '$lib/components/apps/components/display/dbtable/utils'
-import { type Change } from 'diff'
+import type { CodePieceElement, ContextElement } from '../context'
+import type { Tool } from '../shared'
+import { PYTHON_PREPROCESSOR_MODULE_CODE, TS_PREPROCESSOR_MODULE_CODE } from '$lib/script_helpers'
 
 export function formatResourceTypes(
 	allResourceTypes: ResourceType[],
@@ -58,9 +57,9 @@ async function getResourceTypes(prompt: string, workspace: string) {
 
 const TS_RESOURCE_TYPE_SYSTEM = `On Windmill, credentials and configuration are stored in resources and passed as parameters to main.
 If you need credentials, you should add a parameter to \`main\` with the corresponding resource type inside the \`RT\` namespace: for instance \`RT.Stripe\`.
-You should only use them if you need them to satisfy the user's instructions. Always use the RT namespace.`
+You should only use them if you need them to satisfy the user's instructions. Always use the RT namespace.\n`
 
-const TS_INLINE_TYPE_INSTRUCTION = `You must always inline the objects types instead of defining them separately. If INSTRUCTIONS ask you to use an already defined type, you MUST inline it instead of using the type name. Explain to the user that you are inlining the type for better arguments inference.`
+const TS_INLINE_TYPE_INSTRUCTION = `When using resource types, you should use RT.ResourceType as parameter type. For other parameters, you should inline the objects types instead of defining them separately. This is because Windmill requires the types (other than resource types) to be inlined to generate a user friendly UI from the parameters.`
 
 const PYTHON_RESOURCE_TYPE_SYSTEM = `On Windmill, credentials and configuration are stored in resources and passed as parameters to main.
 If you need credentials, you should add a parameter to \`main\` with the corresponding resource type.
@@ -75,6 +74,24 @@ You need to **redefine** the type of the resources that are needed before the ma
 Before defining each type, check if the class already exists using class_exists.
 The resource type name has to be exactly as specified.`
 
+const PREPROCESSOR_INSTRUCTION_BASE = `The current script is a preprocessor. It processes raw trigger data from various sources (webhook, custom HTTP route, SQS, WebSocket, Kafka, NATS, MQTT, Postgres, or email) before passing it to the flow. This separates the trigger logic from the flow logic and keeps the auto-generated UI clean.
+The returned object determines the parameter values passed to the flow.
+e.g., \`{ b: 1, a: 2 }\` → Calls the flow with \`a = 2\` and \`b = 1\`, assuming the flow has two inputs called \`a\` and \`b\`.
+The preprocessor receives a single parameter called event.
+Here's a sample script which includes the event object definition:\n`
+
+const TS_PREPROCESSOR_INSTRUCTION =
+	PREPROCESSOR_INSTRUCTION_BASE +
+	`\`\`\`typescript
+${TS_PREPROCESSOR_MODULE_CODE}
+\`\`\`\n`
+
+const PYTHON_PREPROCESSOR_INSTRUCTION =
+	PREPROCESSOR_INSTRUCTION_BASE +
+	`\`\`\`python
+${PYTHON_PREPROCESSOR_MODULE_CODE}
+\`\`\``
+
 export const SUPPORTED_CHAT_SCRIPT_LANGUAGES = [
 	'bunnative',
 	'nativets',
@@ -96,43 +113,52 @@ export const SUPPORTED_CHAT_SCRIPT_LANGUAGES = [
 
 export function getLangContext(
 	lang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json',
-	{ allowResourcesFetch = false }: { allowResourcesFetch?: boolean } = {}
+	{
+		allowResourcesFetch = false,
+		isPreprocessor = false
+	}: { allowResourcesFetch?: boolean; isPreprocessor?: boolean; isFailure?: boolean } = {}
 ) {
 	const tsContext =
-		TS_RESOURCE_TYPE_SYSTEM +
-		(allowResourcesFetch
-			? `\nTo query the RT namespace, you can use the \`search_resource_types\` function.\n`
-			: '') +
-		TS_INLINE_TYPE_INSTRUCTION
+		(isPreprocessor
+			? TS_PREPROCESSOR_INSTRUCTION
+			: TS_RESOURCE_TYPE_SYSTEM +
+				(allowResourcesFetch
+					? `To query the RT namespace, you can use the \`search_resource_types\` tool.\n`
+					: '')) + TS_INLINE_TYPE_INSTRUCTION
+
+	const mainFunctionName = isPreprocessor ? 'preprocessor' : 'main'
+
 	switch (lang) {
 		case 'bunnative':
 		case 'nativets':
 			return (
-				'The user is coding in TypeScript. On Windmill, it is expected that the script exports a single **async** function called `main`. You should use fetch (available globally, no need to import) and are not allowed to import any libraries.\n' +
+				`The user is coding in TypeScript. On Windmill, it is expected that the script exports a single **async** function called \`${mainFunctionName}\`. You should use fetch (available globally, no need to import) and are not allowed to import any libraries.\n` +
 				tsContext
 			)
 		case 'bun':
 			return (
-				'The user is coding in TypeScript (bun runtime). On Windmill, it is expected that the script exports a single **async** function called `main`. Do not call the main function. Libraries are installed automatically, do not show how to install them.\n' +
+				`The user is coding in TypeScript (bun runtime). On Windmill, it is expected that the script exports a single **async** function called \`${mainFunctionName}\`. Do not call the ${mainFunctionName} function. Libraries are installed automatically, do not show how to install them.\n` +
 				tsContext
 			)
 		case 'deno':
 			return (
-				'The user is coding in TypeScript (deno runtime). On Windmill, it is expected that the script exports a single **async** function called `main`. Do not call the main function. Libraries are installed automatically, do not show how to install them.\n' +
+				`The user is coding in TypeScript (deno runtime). On Windmill, it is expected that the script exports a single **async** function called \`${mainFunctionName}\`. Do not call the ${mainFunctionName} function. Libraries are installed automatically, do not show how to install them.\n` +
 				tsContext +
 				'\nYou can import deno libraries or you can import npm libraries like that: `import ... from "npm:{package}";`.'
 			)
 		case 'python3':
 			return (
-				'The user is coding in Python. On Windmill, it is expected the script contains at least one function called `main`. Do not call the main function. Libraries are installed automatically, do not show how to install them.' +
-				PYTHON_RESOURCE_TYPE_SYSTEM +
-				`${allowResourcesFetch ? `\nTo query the available resource types, you can use the \`search_resource_types\` function.` : ''}`
+				`The user is coding in Python. On Windmill, it is expected the script contains at least one function called \`${mainFunctionName}\`. Do not call the ${mainFunctionName} function. Libraries are installed automatically, do not show how to install them.` +
+				(isPreprocessor
+					? PYTHON_PREPROCESSOR_INSTRUCTION
+					: PYTHON_RESOURCE_TYPE_SYSTEM +
+						`${allowResourcesFetch ? `\nTo query the available resource types, you can use the \`search_resource_types\` tool.` : ''}`)
 			)
 		case 'php':
 			return (
 				'The user is coding in PHP. On Windmill, it is expected the script contains at least one function called `main`. The script must start with <?php.' +
 				PHP_RESOURCE_TYPE_SYSTEM +
-				`${allowResourcesFetch ? `\nTo query the available resource types, you can use the \`search_resource_types\` function.` : ''}` +
+				`${allowResourcesFetch ? `\nTo query the available resource types, you can use the \`search_resource_types\` tool.` : ''}` +
 				`\nIf you need to import libraries, you need to specify them as comments in the following manner before the main function:
 \`\`\`
 // require:
@@ -257,68 +283,13 @@ WINDMILL LANGUAGE CONTEXT:
 
 export const CHAT_USER_DB_CONTEXT = `- {title}: SCHEMA: \n{schema}\n`
 
-export function prepareSystemMessage(): {
-	role: 'system'
-	content: string
-} {
+export function prepareScriptSystemMessage(): ChatCompletionSystemMessageParam {
 	return {
 		role: 'system',
 		content: CHAT_SYSTEM_PROMPT
 	}
 }
 
-export interface DisplayMessage {
-	role: 'user' | 'assistant'
-	content: string
-	contextElements?: ContextElement[]
-}
-
-export const ContextIconMap = {
-	code: Code,
-	error: TriangleAlert,
-	db: Database,
-	diff: Diff,
-	code_piece: Code
-}
-
-type CodeElement = {
-	type: 'code'
-	content: string
-	title: string
-	lang: ScriptLang | 'bunnative'
-}
-
-type ErrorElement = {
-	type: 'error'
-	content: string
-	title: 'error'
-}
-
-type DBElement = {
-	type: 'db'
-	schema?: DBSchema
-	title: string
-}
-
-type DiffElement = {
-	type: 'diff'
-	content: string
-	title: string
-	diff: Change[]
-	lang: ScriptLang | 'bunnative'
-}
-
-type CodePieceElement = {
-	type: 'code_piece'
-	content: string
-	startLine: number
-	endLine: number
-	title: string
-	lang: ScriptLang | 'bunnative'
-}
-
-export type ContextElement = CodeElement | ErrorElement | DBElement | DiffElement | CodePieceElement
-
 const applyCodePieceToCodeContext = (codePieces: CodePieceElement[], codeContext: string) => {
 	let code = codeContext.split('\n')
 	let shiftOffset = 0
@@ -331,11 +302,28 @@ const applyCodePieceToCodeContext = (codePieces: CodePieceElement[], codeContext
 	return code.join('\n')
 }
 
-export async function prepareUserMessage(
+export function prepareScriptTools(
+	language: ScriptLang | 'bunnative',
+	context: ContextElement[]
+): Tool<ScriptChatHelpers>[] {
+	const tools: Tool<ScriptChatHelpers>[] = []
+	if (['python3', 'php', 'bun', 'deno', 'nativets', 'bunnative'].includes(language)) {
+		tools.push(resourceTypeTool)
+	}
+	if (context.some((c) => c.type === 'db')) {
+		tools.push(dbSchemaTool)
+	}
+	return tools
+}
+
+export async function prepareScriptUserMessage(
 	instructions: string,
 	language: ScriptLang | 'bunnative',
-	selectedContext: ContextElement[]
-) {
+	selectedContext: ContextElement[],
+	options: {
+		isPreprocessor?: boolean
+	} = {}
+): Promise<ChatCompletionUserMessageParam> {
 	let codeContext = 'CODE:\n'
 	let errorContext = 'ERROR:\n'
 	let dbContext = 'DATABASES:\n'
@@ -377,7 +365,7 @@ export async function prepareUserMessage(
 
 	let userMessage = CHAT_USER_PROMPT.replace('{instructions}', instructions).replace(
 		'{lang_context}',
-		getLangContext(language, { allowResourcesFetch: true })
+		getLangContext(language, { allowResourcesFetch: true, ...options })
 	)
 	if (hasCode) {
 		userMessage += codeContext
@@ -391,7 +379,10 @@ export async function prepareUserMessage(
 	if (hasDiff) {
 		userMessage += diffContext
 	}
-	return userMessage
+	return {
+		role: 'user',
+		content: userMessage
+	}
 }
 
 const RESOURCE_TYPE_FUNCTION_DEF: ChatCompletionTool = {
@@ -450,156 +441,53 @@ async function formatDBSchema(dbSchema: DBSchema) {
 	}
 }
 
-async function callTool(
-	functionName: string,
-	args: any,
-	lang: ScriptLang | 'bunnative',
-	workspace: string
-) {
-	switch (functionName) {
-		case 'search_resource_types':
-			const formattedResourceTypes = await getFormattedResourceTypes(lang, args.query, workspace)
-			return formattedResourceTypes
-		case 'get_db_schema':
-			if (!args.resourcePath) {
-				throw new Error('Database path not provided')
-			}
-			const resource = await ResourceService.getResource({
-				workspace: workspace,
-				path: args.resourcePath
-			})
-			const newDbSchemas = {}
-			await getDbSchemas(
-				resource.resource_type,
-				args.resourcePath,
-				workspace,
-				newDbSchemas,
-				(error) => {
-					console.error(error)
-				}
-			)
-			dbSchemas.update((schemas) => ({ ...schemas, ...newDbSchemas }))
-			const dbs = get(dbSchemas)
-			const db = dbs[args.resourcePath]
-			if (!db) {
-				throw new Error('Database not found')
-			}
-			const stringSchema = await formatDBSchema(db)
-			return stringSchema
-		default:
-			throw new Error(`Unknown tool call: ${functionName}`)
+export interface ScriptChatHelpers {
+	getLang: () => ScriptLang | 'bunnative'
+}
+
+export const resourceTypeTool: Tool<ScriptChatHelpers> = {
+	def: RESOURCE_TYPE_FUNCTION_DEF,
+	fn: async ({ args, workspace, helpers, toolCallbacks, toolId }) => {
+		toolCallbacks.onToolCall(toolId, 'Searching resource types for "' + args.query + '"...')
+		const formattedResourceTypes = await getFormattedResourceTypes(
+			helpers.getLang(),
+			args.query,
+			workspace
+		)
+		toolCallbacks.onFinishToolCall(toolId, 'Retrieved resource types for "' + args.query + '"')
+		return formattedResourceTypes
 	}
 }
 
-async function processToolCall(
-	toolCall: ChatCompletionMessageToolCall,
-	messages: ChatCompletionMessageParam[],
-	lang: ScriptLang | 'bunnative'
-) {
-	try {
-		const args = JSON.parse(toolCall.function.arguments)
-		let result = ''
-		try {
-			result = await callTool(toolCall.function.name, args, lang, get(workspaceStore) ?? '')
-		} catch (err) {
-			console.error(err)
-			result =
-				'Error while calling tool, MUST tell the user to check the browser console for more details, and then respond as much as possible to the original request'
+export const dbSchemaTool: Tool<ScriptChatHelpers> = {
+	def: DB_SCHEMA_FUNCTION_DEF,
+	fn: async ({ args, workspace, toolCallbacks, toolId }) => {
+		if (!args.resourcePath) {
+			throw new Error('Database path not provided')
 		}
-		messages.push({
-			role: 'tool',
-			tool_call_id: toolCall.id,
-			content: result
+		toolCallbacks.onToolCall(toolId, 'Getting database schema for ' + args.resourcePath + '...')
+		const resource = await ResourceService.getResource({
+			workspace: workspace,
+			path: args.resourcePath
 		})
-	} catch (err) {
-		console.error(err)
-	}
-}
-
-export async function chatRequest(
-	messages: ChatCompletionMessageParam[],
-	abortController: AbortController,
-	lang: ScriptLang | 'bunnative',
-	useDbTools: boolean,
-	onNewToken: (token: string) => void
-) {
-	const toolDefs: ChatCompletionTool[] = []
-	if (
-		lang === 'python3' ||
-		lang === 'php' ||
-		lang === 'bun' ||
-		lang === 'deno' ||
-		lang === 'nativets' ||
-		lang === 'bunnative'
-	) {
-		toolDefs.push(RESOURCE_TYPE_FUNCTION_DEF)
-	}
-	if (useDbTools) {
-		toolDefs.push(DB_SCHEMA_FUNCTION_DEF)
-	}
-	try {
-		let completion: any = null
-		while (true) {
-			completion = await getCompletion(messages, abortController, toolDefs)
-
-			if (completion) {
-				const finalToolCalls: Record<number, ChatCompletionChunk.Choice.Delta.ToolCall> = {}
-
-				for await (const chunk of completion) {
-					if (!('choices' in chunk && chunk.choices.length > 0 && 'delta' in chunk.choices[0])) {
-						continue
-					}
-					const c = chunk as ChatCompletionChunk
-					const delta = c.choices[0].delta.content
-					if (delta) {
-						onNewToken(delta)
-					}
-					const toolCalls = c.choices[0].delta.tool_calls || []
-					for (const toolCall of toolCalls) {
-						const { index } = toolCall
-						const finalToolCall = finalToolCalls[index]
-						if (!finalToolCall) {
-							finalToolCalls[index] = toolCall
-						} else {
-							if (toolCall.function?.arguments) {
-								if (!finalToolCall.function) {
-									finalToolCall.function = toolCall.function
-								} else {
-									finalToolCall.function.arguments =
-										(finalToolCall.function.arguments ?? '') + toolCall.function.arguments
-								}
-							}
-						}
-					}
-				}
-
-				const toolCalls = Object.values(finalToolCalls).filter(
-					(toolCall) => toolCall.id !== undefined && toolCall.function?.arguments !== undefined
-				) as ChatCompletionMessageToolCall[]
-
-				if (toolCalls.length > 0) {
-					messages.push({
-						role: 'assistant',
-						tool_calls: toolCalls
-					})
-					for (const toolCall of toolCalls) {
-						await processToolCall(toolCall, messages, lang)
-					}
-				} else {
-					break
-				}
+		const newDbSchemas = {}
+		await getDbSchemas(
+			resource.resource_type,
+			args.resourcePath,
+			workspace,
+			newDbSchemas,
+			(error) => {
+				console.error(error)
 			}
+		)
+		dbSchemas.update((schemas) => ({ ...schemas, ...newDbSchemas }))
+		const dbs = get(dbSchemas)
+		const db = dbs[args.resourcePath]
+		if (!db) {
+			throw new Error('Database not found')
 		}
-		return completion
-	} catch (err) {
-		if (!abortController.signal.aborted) {
-			throw err
-		}
+		const stringSchema = await formatDBSchema(db)
+		toolCallbacks.onFinishToolCall(toolId, 'Retrieved database schema for ' + args.resourcePath)
+		return stringSchema
 	}
 }
-
-export interface AIChatContext {
-	loading: Writable<boolean>
-	currentReply: Writable<string>
-	applyCode: (code: string) => void
-}
diff --git a/frontend/src/lib/components/copilot/chat/shared.ts b/frontend/src/lib/components/copilot/chat/shared.ts
new file mode 100644
index 0000000000..b869e7be8d
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/shared.ts
@@ -0,0 +1,101 @@
+import type {
+	ChatCompletionMessageParam,
+	ChatCompletionMessageToolCall,
+	ChatCompletionTool
+} from 'openai/resources/chat/completions.mjs'
+import { get } from 'svelte/store'
+import type { ContextElement } from './context'
+import { workspaceStore } from '$lib/stores'
+
+export type DisplayMessage =
+	| {
+			role: 'user' | 'assistant'
+			content: string
+			contextElements?: ContextElement[]
+	  }
+	| {
+			role: 'tool'
+			tool_call_id: string
+			content: string
+	  }
+
+async function callTool<T>({
+	tools,
+	functionName,
+	args,
+	workspace,
+	helpers,
+	toolCallbacks,
+	toolId
+}: {
+	tools: Tool<T>[]
+	functionName: string
+	args: any
+	workspace: string
+	helpers: T
+	toolCallbacks: ToolCallbacks
+	toolId: string
+}): Promise<string> {
+	const tool = tools.find((t) => t.def.function.name === functionName)
+	if (!tool) {
+		throw new Error(`Unknown tool call: ${functionName}`)
+	}
+	return tool.fn({ args, workspace, helpers, toolCallbacks, toolId })
+}
+
+export async function processToolCall<T>({
+	tools,
+	toolCall,
+	messages,
+	helpers,
+	toolCallbacks
+}: {
+	tools: Tool<T>[]
+	toolCall: ChatCompletionMessageToolCall
+	messages: ChatCompletionMessageParam[]
+	helpers: T
+	toolCallbacks: ToolCallbacks
+}) {
+	try {
+		const args = JSON.parse(toolCall.function.arguments || '{}')
+		let result = ''
+		try {
+			result = await callTool({
+				tools,
+				functionName: toolCall.function.name,
+				args,
+				workspace: get(workspaceStore) ?? '',
+				helpers,
+				toolCallbacks,
+				toolId: toolCall.id
+			})
+		} catch (err) {
+			console.error(err)
+			result =
+				'Error while calling tool, MUST tell the user to check the browser console for more details, and then respond as much as possible to the original request'
+		}
+		messages.push({
+			role: 'tool',
+			tool_call_id: toolCall.id,
+			content: result
+		})
+	} catch (err) {
+		console.error(err)
+	}
+}
+
+export interface Tool<T> {
+	def: ChatCompletionTool
+	fn: (p: {
+		args: any
+		workspace: string
+		helpers: T
+		toolCallbacks: ToolCallbacks
+		toolId: string
+	}) => Promise<string>
+}
+
+export interface ToolCallbacks {
+	onToolCall: (id: string, content: string) => void
+	onFinishToolCall: (id: string, content: string) => void
+}
diff --git a/frontend/src/lib/components/copilot/chat/utils.ts b/frontend/src/lib/components/copilot/chat/utils.ts
new file mode 100644
index 0000000000..f34e5e6e77
--- /dev/null
+++ b/frontend/src/lib/components/copilot/chat/utils.ts
@@ -0,0 +1,17 @@
+import { z } from 'zod'
+
+const errorSchema = z.object({
+	error: z.any()
+})
+export function getStringError(result: unknown): string | undefined {
+	try {
+		const parsed = errorSchema.parse(result)
+		if (parsed.error) {
+			return JSON.stringify(parsed.error, null, 2)
+		} else {
+			return undefined
+		}
+	} catch (_) {
+		return undefined
+	}
+}
diff --git a/frontend/src/lib/components/copilot/flow.ts b/frontend/src/lib/components/copilot/flow.ts
index 02a7afd066..c81d9dcd0f 100644
--- a/frontend/src/lib/components/copilot/flow.ts
+++ b/frontend/src/lib/components/copilot/flow.ts
@@ -1,51 +1,7 @@
-import {
-	ScriptService,
-	type FlowModule,
-	type HubScriptKind,
-	type InputTransform,
-	type PathScript,
-	type RawScript,
-	type Script
-} from '$lib/gen'
-import { scriptLangToEditorLang } from '$lib/scripts'
+import { type InputTransform } from '$lib/gen'
 import type { Writable } from 'svelte/store'
-import type Editor from '../Editor.svelte'
-import type { Drawer } from '../common'
-import { addResourceTypes, deltaCodeCompletion, getNonStreamingCompletion } from './lib'
-
-export type FlowCopilotModule = {
-	id: string
-	type: 'trigger' | 'script'
-	description: string
-	code: string
-	source: 'hub' | 'custom' | undefined
-	lang: 'bun' | 'python3' | undefined
-	hubCompletions: {
-		path: string
-		summary: string
-		kind: HubScriptKind
-		app: string
-		ask_id: number
-		id: number
-		version_id: number
-	}[]
-	selectedCompletion:
-		| {
-				path: string
-				summary: string
-				kind: string
-				app: string
-				ask_id: number
-		  }
-		| undefined
-	editor?: Editor
-}
 
 export type FlowCopilotContext = {
-	drawerStore: Writable<Drawer | undefined>
-	modulesStore: Writable<FlowCopilotModule[]>
-	currentStepStore: Writable<string | undefined>
-	genFlow: ((i: number, modules: FlowModule[], stepOnly?: boolean) => Promise<void>) | undefined
 	shouldUpdatePropertyType: Writable<{
 		[key: string]: 'static' | 'javascript' | undefined
 	}>
@@ -57,333 +13,3 @@ export type FlowCopilotContext = {
 		[key: string]: InputTransform | undefined
 	}>
 }
-
-const systemPrompt = `You are a helpful coding assistant for Windmill, a developer platform for running scripts. You write code as instructed by the user. Each user message includes some contextual information which should guide your answer.
-Only output code. Wrap the code in a code block.
-Put explanations directly in the code as comments.
-
-Here's how interactions have to look like:
-user: {sample_question}
-assistant: \`\`\`{codeLang}
-{code}
-\`\`\``
-
-const additionalInfos: {
-	bun: string
-	python3: string
-} = {
-	bun: `<contextual_information>
-You have to write TypeScript code and export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it. You should generally return the result.
-The fetch standard method is available globally.
-You can take as parameters resources which are dictionaries containing credentials or configuration information. For Windmill to correctly detect the resources to be passed, the resource type name has to be exactly as specified in the following list:
-<resourceTypes>
-{resourceTypes}
-</resourceTypes>
-You need to define the type of the resources that are needed before the main function, but only include them if they are actually needed to achieve the function purpose.
-The resource type name has to be exactly as specified (no resource suffix). If the type name conflicts with any imported methods, you have to rename the imported method with the conflicting name.
-</contextual_information>`,
-	python3: `<contextual_information>
-You have to write a function in Python called "main". Specify the parameter types. Do not call the main function. You should generally return the result.
-You can take as parameters resources which are dictionaries containing credentials or configuration information. For Windmill to correctly detect the resources to be passed, the resource type name has to be exactly as specified in the following list:
-<resourceTypes>
-{resourceTypes}
-</resourceTypes>
-You need to define the type of the resources that are needed before the main function, but only include them if they are actually needed to achieve the function purpose.
-The resource type name has to be exactly as specified (has to be IN LOWERCASE). If the type name conflicts with any imported methods, you have to rename the imported method with the conflicting name.
-<contextual_information>`
-}
-
-const triggerPrompts: {
-	bun: string
-	python3: string
-} = {
-	bun: `I'm building a workflow which is a sequence of script steps. Write the first script in {codeLang} which should check for {description} and return an array.
-To maintain state across runs, you can use "const {state_name}: {state_type} = await getState()" and "await setState(value: any)" which you have to import like this: import { getState, setState } from "windmill-client@1"
-
-{additionalInformation}`,
-	python3: `I'm building a workflow which is a sequence of script steps. Write the first script in {codeLang} which should check for {description} and return an array.
-To maintain state across runs, you can use get_state() and set_state(value) which you have to import like this: from wmill import get_state, set_state
-
-{additionalInformation}`
-}
-
-// const preprocessorPrompts: {
-// 	bun: string
-// 	python3: string
-// } = {
-// 	bun: `I'm building a workflow which is a sequence of script steps. Write the preprocessor step in {codeLang} which should check for {description} and return an array.
-// The preprocessor step is executed before flow begins to map trigger specific inputs to the flow inputs.
-
-// Here is an example of what the preprocessor step should look like:
-// \`\`\`{codeLang}
-// export async function preprocessor(
-// 	wm_trigger: {
-// 		kind: 'http' | 'email' | 'webhook',
-// 		http?: {
-// 			route: string // The route path, e.g. "/users/:id"
-// 			path: string // The actual path called, e.g. "/users/123"
-// 			method: string
-// 			params: Record<string, string>
-// 			query: Record<string, string>
-// 			headers: Record<string, string>
-// 		}
-// 	},
-// 	/* your other args */
-// ) {
-// 	return {
-// 		// return the args to be passed to the flow
-// 	}
-// }
-// \`\`\`
-
-// {additionalInformation}`,
-// 	python3: `I'm building a workflow which is a sequence of script steps. Write the preprocessor step in {codeLang} which should check for {description} and return an array.
-// The preprocessor step is executed before flow begins to map trigger specific inputs to the flow inputs.
-
-// Here is an example of what the preprocessor step should look like:
-// \`\`\`{codeLang}
-// from typing import TypedDict, Literal
-
-// class Http(TypedDict):
-// 	route: str # The route path, e.g. "/users/:id"
-// 	path: str # The actual path called, e.g. "/users/123"
-// 	method: str
-// 	params: dict[str, str]
-// 	query: dict[str, str]
-// 	headers: dict[str, str]
-
-// class WmTrigger(TypedDict):
-//     kind: Literal["http", "email", "webhook"]
-//     http: Http | None
-
-// def preprocessor(
-// 	wm_trigger: WmTrigger,
-// 	# your other args
-// ):
-// 	return {
-// 		# return the args to be passed to the flow
-// 	}
-// \`\`\`
-
-// {additionalInformation}`
-// }
-
-const firstActionPrompt = `I'm building a workflow which is a sequence of script steps. Write a script in {codeLang} which should {description}.
-Return the script's output.
-
-{additionalInformation}`
-
-const inferTypePrompt =
-	'Infer the type of "prev_output" from the previous\'s step code: ```{codeLang}\n{prevCode}\n```'
-
-const actionPrompt = `I'm building a workflow which is a sequence of script steps. Write a script in {codeLang} which should {description}. It should take a parameter called "prev_output" which contains the output of the previous script.
-{inferTypePrompt}
-Return the script's output.
-
-{additionalInformation}`
-
-const inferTypeLoopPrompt =
-	'Infer the type of "prev_output" from the previous\'s step code: ```{codeLang}\n{prevCode}\n```, keeping in mind that it is ONE ELEMENT of the output of the previous step.'
-
-const loopActionPrompt = `I'm building a workflow which is a sequence of script steps. Write a script in {codeLang} which should {description}. It should take a parameter called "prev_output" which contains ONE ELEMEMT of the output of the previous script.
-{inferTypePrompt}
-Return the script's output.
-
-{additionalInformation}`
-
-const inferTypeGluePrompt =
-	"Infer its properties from the previous's step code: ```{codeLang}\n{prevCode}\n```"
-
-const loopGluePrompt = `I'm building a workflow which is a sequence of script steps. 
-My current step code has the following inputs: {inputs}. 
-Determine for each input, what to pass from the following:
-- \`flow_input\` (javascript object): general inputs that are passed to the workflow, you can assume any object properties (snake case).
-- \`flow_input.iter.value\` (javascript object): it is ONE ELEMENT of the output of the previous step. {inferTypeGluePrompt}
-
-Reply with the most probable answer, do not explain or discuss.
-Your answer has to be in the following format (one line per input):
-input_name: expr`
-
-const gluePrompt = `I'm building a workflow which is a sequence of script steps. 
-My current step code has the following inputs: {inputs}. 
-Determine for each input, what to pass from the following:
-- \`flow_input\` (javascript object): general inputs that are passed to the workflow, you can assume any object properties (snake case).
-- \`results.{prevId}\` (javascript object): output of the previous step. {inferTypeGluePrompt}
-
-Reply with the most probable answer, do not explain or discuss.
-Your answer has to be in the following format (one line per input):
-input_name: expr`
-
-async function getPreviousStepContent(
-	pastModule: FlowModule & {
-		value: RawScript | PathScript
-	},
-	workspace: string
-) {
-	if (pastModule.value.type === 'rawscript') {
-		return { prevCode: pastModule.value.content, prevLang: pastModule.value.language }
-	} else {
-		if (pastModule.value.path.startsWith('hub/')) {
-			const script = await ScriptService.getHubScriptByPath({
-				path: pastModule.value.path
-			})
-			return { prevCode: script.content, prevLang: script.language as Script['language'] }
-		} else if (pastModule.value.hash) {
-			const script = await ScriptService.getScriptByHash({
-				workspace,
-				hash: pastModule.value.hash
-			})
-			return { prevCode: script.content, prevLang: script.language }
-		} else {
-			const script = await ScriptService.getScriptByPath({
-				workspace,
-				path: pastModule.value.path
-			})
-			return { prevCode: script.content, prevLang: script.language }
-		}
-	}
-}
-
-export async function stepCopilot(
-	module: FlowCopilotModule,
-	deltaCodeStore: Writable<string>,
-	workspace: string,
-	pastModule:
-		| (FlowModule & {
-				value: RawScript | PathScript
-		  })
-		| undefined,
-	isFirstInLoop: boolean,
-	abortController: AbortController
-) {
-	if (module.source !== 'custom') {
-		throw new Error('Not a custom module')
-	}
-	const lang = module.lang ?? 'bun'
-	const codeLang = lang === 'python3' ? 'python' : 'typescript (Node.js)'
-	let prompt =
-		module.type === 'trigger'
-			? triggerPrompts[lang]
-			: // : module.type === 'preprocessor'
-			// 	? preprocessorPrompts[lang]
-			pastModule === undefined
-			? firstActionPrompt
-			: isFirstInLoop
-			? loopActionPrompt
-			: actionPrompt
-
-	const { prevCode, prevLang } = pastModule
-		? await getPreviousStepContent(pastModule, workspace)
-		: { prevCode: undefined, prevLang: undefined }
-	prompt = prompt
-		.replace('{codeLang}', codeLang)
-		.replace(
-			'{inferTypePrompt}',
-			prevCode && prevLang
-				? (isFirstInLoop ? inferTypeLoopPrompt : inferTypePrompt)
-						.replace('{prevCode}', prevCode)
-						.replace('{codeLang}', scriptLangToEditorLang(prevLang))
-				: ''
-		)
-		.replace('{additionalInformation}', additionalInfos[lang])
-		.replace('{description}', module.description)
-	prompt = await addResourceTypes(
-		{
-			type: 'gen',
-			language: lang as Script['language'],
-			description: module.description,
-			dbSchema: undefined,
-			workspace
-		},
-		prompt
-	)
-	const code = await deltaCodeCompletion(
-		[
-			{
-				role: 'system',
-				content: systemPrompt
-			},
-			{
-				role: 'user',
-				content: prompt
-			}
-		],
-		deltaCodeStore,
-		abortController
-	)
-	return code
-}
-
-export async function glueCopilot(
-	inputs: Record<string, InputTransform>,
-	workspace: string,
-	pastModule: FlowModule & {
-		value: RawScript | PathScript
-	},
-	isFirstInLoop: boolean,
-	abortController: AbortController
-) {
-	const { prevCode, prevLang } = await getPreviousStepContent(pastModule, workspace)
-
-	const stringInputs: string[] = []
-	for (const inputName in inputs) {
-		const input = inputs[inputName]
-		if (
-			input.type === 'static' &&
-			input.value &&
-			typeof input.value === 'object' &&
-			!Array.isArray(input.value)
-		) {
-			// nested object
-			stringInputs.push(`${inputName} (${Object.keys(input.value).join(', ')})`)
-		} else {
-			stringInputs.push(inputName)
-		}
-	}
-
-	let response = await getNonStreamingCompletion(
-		[
-			{
-				role: 'user',
-				content: (isFirstInLoop ? loopGluePrompt : gluePrompt)
-					.replace('{inputs}', stringInputs.join(', '))
-					.replace('{prevId}', pastModule.id)
-					.replace(
-						'{inferTypeGluePrompt}',
-						inferTypeGluePrompt
-							.replace('{prevCode}', prevCode)
-							.replace('{codeLang}', scriptLangToEditorLang(prevLang))
-					)
-			}
-		],
-		abortController
-	)
-
-	const matches = response.matchAll(/([a-zA-Z_0-9.]+): (.+)/g)
-
-	const result: Record<string, string> = {}
-	const allExprs: Record<string, string> = {}
-	for (const match of matches) {
-		const inputName = match[1]
-		const inputExpr = match[2].replace(',', '')
-
-		allExprs[inputName] = inputExpr
-		if (inputName.includes('.')) {
-			// nested key returned by copilot (e.g. body.content: ...)
-			const [firstKey, ...rest] = inputName.split('.')
-			const restStr = rest.join('.')
-			if (!result[firstKey]) {
-				result[firstKey] = `{\n  "${restStr}": ${inputExpr}\n}`
-			} else {
-				result[firstKey] = result[firstKey].replace('\n}', `,\n  "${restStr}": ${inputExpr}\n}`)
-			}
-		} else {
-			result[inputName] = inputExpr
-		}
-	}
-
-	return {
-		inputs: result,
-		allExprs
-	}
-}
diff --git a/frontend/src/lib/components/copilot/lib.ts b/frontend/src/lib/components/copilot/lib.ts
index d11e160fcf..dd7a8784db 100644
--- a/frontend/src/lib/components/copilot/lib.ts
+++ b/frontend/src/lib/components/copilot/lib.ts
@@ -21,16 +21,13 @@ import { formatResourceTypes } from './utils'
 
 export const SUPPORTED_LANGUAGES = new Set(Object.keys(GEN_CONFIG.prompts))
 
+const OPENAI_MODELS = ['gpt-4o', 'gpt-4o-mini', 'o4-mini', 'o3', 'o3-mini']
+
 // need at least one model for each provider except customai
 export const AI_DEFAULT_MODELS: Record<AIProvider, string[]> = {
-	openai: ['gpt-4o', 'gpt-4o-mini'],
-	azure_openai: ['gpt-4o', 'gpt-4o-mini'],
-	anthropic: [
-		'claude-3-7-sonnet-latest',
-		'claude-3-7-sonnet-latest/thinking',
-		'claude-3-5-haiku-latest',
-		'claude-3-5-sonnet-latest'
-	],
+	openai: OPENAI_MODELS,
+	azure_openai: OPENAI_MODELS,
+	anthropic: ['claude-sonnet-4-0', 'claude-sonnet-4-0/thinking', 'claude-3-5-haiku-latest'],
 	mistral: ['codestral-latest'],
 	deepseek: ['deepseek-chat', 'deepseek-reasoner'],
 	googleai: ['gemini-1.5-pro', 'gemini-2.0-flash', 'gemini-1.5-flash'],
@@ -40,8 +37,66 @@ export const AI_DEFAULT_MODELS: Record<AIProvider, string[]> = {
 	customai: []
 }
 
+export interface ModelResponse {
+	id: string
+	object: string
+	created: number
+	owned_by: string
+	lifecycle_status: string
+	capabilities: {
+		completion: boolean
+		chat_completion: boolean
+	}
+}
+
+export async function fetchAvailableModels(
+	resourcePath: string,
+	workspace: string,
+	provider: AIProvider
+): Promise<string[]> {
+	const models = await fetch(`${location.origin}${OpenAPI.BASE}/w/${workspace}/ai/proxy/models`, {
+		headers: {
+			'X-Resource-Path': resourcePath,
+			'X-Provider': provider,
+			...(provider === 'anthropic' ? { 'anthropic-version': '2023-06-01' } : {})
+		}
+	})
+	if (!models.ok) {
+		console.error('Failed to fetch models for provider', provider, models)
+		throw new Error(`Failed to fetch models for provider ${provider}`)
+	}
+	const data = (await models.json()) as { data: ModelResponse[] }
+	if (data.data.length > 0) {
+		switch (provider) {
+			case 'openai':
+				return data.data
+					.filter(
+						(m) => m.id.startsWith('gpt-') || m.id.startsWith('o') || m.id.startsWith('codex')
+					)
+					.map((m) => m.id)
+			case 'azure_openai':
+				return data.data
+					.filter(
+						(m) =>
+							(m.id.startsWith('gpt-') || m.id.startsWith('o') || m.id.startsWith('codex')) &&
+							m.lifecycle_status !== 'deprecated' &&
+							(m.capabilities.completion || m.capabilities.chat_completion)
+					)
+					.map((m) => m.id)
+			case 'googleai':
+				return data.data.map((m) => m.id.split('/')[1])
+			default:
+				return data.data.map((m) => m.id)
+		}
+	}
+
+	return data?.data.map((m) => m.id) ?? []
+}
+
 function getModelMaxTokens(model: string) {
-	if (model.startsWith('gpt-4o') || model.startsWith('codestral')) {
+	if (model.startsWith('gpt-4.1')) {
+		return 32768
+	} else if (model.startsWith('gpt-4o') || model.startsWith('codestral')) {
 		return 16384
 	} else if (model.startsWith('gpt-4-turbo') || model.startsWith('gpt-3.5')) {
 		return 4096
@@ -49,6 +104,39 @@ function getModelMaxTokens(model: string) {
 	return 8192
 }
 
+function getModelSpecificConfig(
+	modelProvider: AIProviderModel,
+	tools?: OpenAI.Chat.Completions.ChatCompletionTool[]
+) {
+	if (
+		(modelProvider.provider === 'openai' || modelProvider.provider === 'azure_openai') &&
+		modelProvider.model.startsWith('o')
+	) {
+		return {
+			model: modelProvider.model,
+			...(tools && tools.length > 0 ? { tools } : {}),
+			max_completion_tokens: 100000
+		}
+	} else {
+		return {
+			...(modelProvider.model.endsWith('/thinking')
+				? {
+						thinking: {
+							type: 'enabled',
+							budget_tokens: 1024
+						},
+						model: modelProvider.model.slice(0, -9)
+					}
+				: {
+						model: modelProvider.model,
+						temperature: 0
+					}),
+			...(tools && tools.length > 0 ? { tools } : {}),
+			max_completion_tokens: getModelMaxTokens(modelProvider.model)
+		}
+	}
+}
+
 function prepareMessages(aiProvider: AIProvider, messages: ChatCompletionMessageParam[]) {
 	switch (aiProvider) {
 		case 'googleai':
@@ -374,20 +462,7 @@ function getProviderAndCompletionConfig<K extends boolean>({
 		provider: modelProvider.provider,
 		config: {
 			...providerConfig,
-			...(modelProvider.model.endsWith('/thinking')
-				? {
-						thinking: {
-							type: 'enabled',
-							budget_tokens: 1024
-						},
-						model: modelProvider.model.slice(0, -9)
-					}
-				: {
-						model: modelProvider.model,
-						temperature: 0,
-						...(tools && tools.length > 0 ? { tools } : {})
-					}),
-			max_tokens: getModelMaxTokens(modelProvider.model),
+			...getModelSpecificConfig(modelProvider, tools),
 			messages: processedMessages,
 			stream
 		} as any
diff --git a/frontend/src/lib/components/dbOps.ts b/frontend/src/lib/components/dbOps.ts
index ff37853a7a..7f68c67bfd 100644
--- a/frontend/src/lib/components/dbOps.ts
+++ b/frontend/src/lib/components/dbOps.ts
@@ -4,7 +4,7 @@ import {
 	type DbType
 } from './apps/components/display/dbtable/utils'
 import { makeSelectQuery } from './apps/components/display/dbtable/queries/select'
-import { runPreviewJobAndPollResult } from './jobs/utils'
+import { runScriptAndPollResult } from './jobs/utils'
 import { makeCountQuery } from './apps/components/display/dbtable/queries/count'
 import { makeUpdateQuery } from './apps/components/display/dbtable/queries/update'
 import { makeDeleteQuery } from './apps/components/display/dbtable/queries/delete'
@@ -55,7 +55,7 @@ export function dbTableOpsWithPreviewScripts({
 		colDefs,
 		getCount: async ({ quicksearch }) => {
 			const countQuery = makeCountQuery(resourceType, tableKey, undefined, colDefs)
-			const result = await runPreviewJobAndPollResult({
+			const result = await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath, quicksearch },
@@ -68,7 +68,7 @@ export function dbTableOpsWithPreviewScripts({
 		},
 		getRows: async (params) => {
 			const query = makeSelectQuery(tableKey, colDefs, undefined, resourceType as DbType)
-			let items = (await runPreviewJobAndPollResult({
+			let items = (await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath, ...params },
@@ -85,7 +85,7 @@ export function dbTableOpsWithPreviewScripts({
 		onUpdate: async ({ values }, colDef, newValue) => {
 			const updateQuery = makeUpdateQuery(tableKey, colDef, colDefs, resourceType)
 
-			await runPreviewJobAndPollResult({
+			await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: {
@@ -101,7 +101,7 @@ export function dbTableOpsWithPreviewScripts({
 		onDelete: async ({ values }) => {
 			const deleteQuery = makeDeleteQuery(tableKey, colDefs, resourceType)
 
-			await runPreviewJobAndPollResult({
+			await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath, ...values },
@@ -112,7 +112,7 @@ export function dbTableOpsWithPreviewScripts({
 		},
 		onInsert: async ({ values }) => {
 			const insertQuery = makeInsertQuery(tableKey, colDefs, resourceType)
-			runPreviewJobAndPollResult({
+			runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath, ...values },
@@ -155,7 +155,7 @@ export function dbDeleteTableActionWithPreviewScript({
 		successText: `Table '${tableKey}' deleted successfully`,
 		action: async () => {
 			const deleteQuery = makeDeleteTableQuery(tableKey, resourceType)
-			await runPreviewJobAndPollResult({
+			await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath },
diff --git a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
index 722020e0a3..45bc8cb5c3 100644
--- a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
+++ b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
@@ -4,11 +4,25 @@
 	import HighlightTheme from '../HighlightTheme.svelte'
 	import FlowViewerInner from '../FlowViewerInner.svelte'
 
-	export let flow_json: any | undefined = undefined
+	interface Props {
+		flow_json?: any | undefined
+		isOperator?: boolean
+		selected: string
+		save_inputs?: import('svelte').Snippet
+		script?: import('svelte').Snippet
+		triggers?: import('svelte').Snippet
+		flow_step?: import('svelte').Snippet
+	}
 
-	export let isOperator: boolean = false
-
-	export let selected: string
+	let {
+		flow_json = undefined,
+		isOperator = false,
+		selected = $bindable(),
+		save_inputs,
+		script,
+		triggers,
+		flow_step
+	}: Props = $props()
 </script>
 
 <HighlightTheme />
@@ -28,26 +42,26 @@
 			<Tab value="flow_step">Step</Tab>
 		{/if}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<div class="min-h-0 grow">
 				<TabContent value="saved_inputs" class="h-full">
-					<slot name="save_inputs" />
+					{@render save_inputs?.()}
 				</TabContent>
 				<TabContent value="script" class="h-full">
-					<slot name="script" />
+					{@render script?.()}
 				</TabContent>
 				<TabContent value="triggers" class="h-full">
-					<slot name="triggers" />
+					{@render triggers?.()}
 				</TabContent>
 				{#if flow_json}
 					<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto p-2">
 						<FlowViewerInner flow={flow_json} />
 					</TabContent>
 					<TabContent value="flow_step" class="flex flex-col flex-1 h-full">
-						<slot name="flow_step" />
+						{@render flow_step?.()}
 					</TabContent>
 				{/if}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</Tabs>
 </div>
diff --git a/frontend/src/lib/components/details/DetailPageLayout.svelte b/frontend/src/lib/components/details/DetailPageLayout.svelte
index 0bc3ddadfa..b3e987f69a 100644
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -4,30 +4,63 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import DetailPageDetailPanel from './DetailPageDetailPanel.svelte'
 
-	export let isOperator: boolean = false
-	export let flow_json: any | undefined = undefined
-	export let selected: string
+	interface Props {
+		isOperator?: boolean
+		flow_json?: any | undefined
+		selected: string
+		header?: import('svelte').Snippet
+		form?: import('svelte').Snippet
+		scriptRender?: import('svelte').Snippet
+		save_inputs?: import('svelte').Snippet
+		flow_step?: import('svelte').Snippet
+		triggers?: import('svelte').Snippet
+	}
 
-	let mobileTab: 'form' | 'detail' = 'form'
+	let {
+		isOperator = false,
+		flow_json = undefined,
+		selected = $bindable(),
+		header,
+		form,
+		scriptRender: script,
+		save_inputs,
+		flow_step,
+		triggers
+	}: Props = $props()
 
-	let clientWidth = window.innerWidth
+	let mobileTab: 'form' | 'detail' = $state('form')
+
+	let clientWidth = $state(window.innerWidth)
+
+	const script_render = $derived(script)
+	const save_inputs_render = $derived(save_inputs)
+	const flow_step_render = $derived(flow_step)
+	const triggers_render = $derived(triggers)
 </script>
 
 <main class="h-screen w-full" bind:clientWidth>
 	{#if clientWidth >= 768}
 		<div class="h-full w-full">
-			<slot name="header" />
+			{@render header?.()}
 			<SplitPanesWrapper>
 				<Splitpanes>
 					<Pane size={65} minSize={50}>
-						<slot name="form" />
+						{@render form?.()}
 					</Pane>
 					<Pane size={35} minSize={15}>
 						<DetailPageDetailPanel bind:selected {isOperator} {flow_json}>
-							<slot slot="script" name="script" />
-							<slot slot="save_inputs" name="save_inputs" />
-							<slot slot="flow_step" name="flow_step" />
-							<slot slot="triggers" name="triggers" />
+							{#snippet script()}
+								{@render script_render?.()}
+							{/snippet}
+							{#snippet save_inputs()}
+								{@render save_inputs_render?.()}
+							{/snippet}
+							{#snippet flow_step()}
+								{@render flow_step_render?.()}
+							{/snippet}
+							{#snippet triggers()}
+								{@render triggers_render?.()}
+							{/snippet}
 						</DetailPageDetailPanel>
 					</Pane>
 				</Splitpanes>
@@ -35,7 +68,7 @@
 		</div>
 	{:else}
 		<div class="h-full w-full">
-			<slot name="header" />
+			{@render header?.()}
 			<Tabs bind:selected={mobileTab}>
 				<Tab value="form">Run form</Tab>
 				<Tab value="saved_inputs">Inputs</Tab>
@@ -48,23 +81,23 @@
 					<Tab value="script">Script</Tab>
 				{/if}
 
-				<svelte:fragment slot="content">
+				{#snippet content()}
 					<div class="h-full">
 						<TabContent value="form" class="flex flex-col flex-1 h-full">
-							<slot name="form" />
+							{@render form?.()}
 						</TabContent>
 
 						<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
-							<slot name="save_inputs" />
+							{@render save_inputs?.()}
 						</TabContent>
 						<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
-							<slot name="triggers" />
+							{@render triggers?.()}
 						</TabContent>
 						<TabContent value="script" class="flex flex-col flex-1 h-full">
-							<slot name="script" />
+							{@render script?.()}
 						</TabContent>
 					</div>
-				</svelte:fragment>
+				{/snippet}
 			</Tabs>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/details/DetailPageTriggerPanel.svelte b/frontend/src/lib/components/details/DetailPageTriggerPanel.svelte
index 6bfeb9f3e0..9c1b6b2392 100644
--- a/frontend/src/lib/components/details/DetailPageTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/DetailPageTriggerPanel.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { Tabs, Tab } from '$lib/components/common'
 	import {
 		CalendarCheck2,
@@ -17,25 +19,56 @@
 	import { MqttIcon, NatsIcon, KafkaIcon, AwsIcon } from '../icons'
 	import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte'
 
-	export let triggerSelected:
-		| 'webhooks'
-		| 'emails'
-		| 'schedules'
-		| 'cli'
-		| 'routes'
-		| 'websockets'
-		| 'kafka'
-		| 'postgres'
-		| 'nats'
-		| 'sqs'
-		| 'mqtt'
-		| 'gcp'
-		| 'scheduledPoll' = 'webhooks'
-	export let simplfiedPoll: boolean = false
+	interface Props {
+		triggerSelected?:
+			| 'webhooks'
+			| 'emails'
+			| 'schedules'
+			| 'cli'
+			| 'routes'
+			| 'websockets'
+			| 'kafka'
+			| 'postgres'
+			| 'nats'
+			| 'sqs'
+			| 'mqtt'
+			| 'gcp'
+			| 'scheduledPoll'
+		simplfiedPoll?: boolean
+		eventStreamType?: 'kafka' | 'nats' | 'sqs' | 'mqtt' | 'gcp'
+		webhooks?: import('svelte').Snippet
+		routes?: import('svelte').Snippet
+		emails?: import('svelte').Snippet
+		schedules?: import('svelte').Snippet
+		websockets?: import('svelte').Snippet
+		postgres?: import('svelte').Snippet
+		kafka?: import('svelte').Snippet
+		nats?: import('svelte').Snippet
+		sqs?: import('svelte').Snippet
+		mqtt?: import('svelte').Snippet
+		gcp?: import('svelte').Snippet
+		cli?: import('svelte').Snippet
+	}
 
-	export let eventStreamType: 'kafka' | 'nats' | 'sqs' | 'mqtt' | 'gcp' = 'kafka'
+	let {
+		triggerSelected = $bindable('webhooks'),
+		simplfiedPoll = false,
+		eventStreamType = $bindable('kafka'),
+		webhooks,
+		routes,
+		emails,
+		schedules,
+		websockets,
+		postgres,
+		kafka,
+		nats,
+		sqs,
+		mqtt,
+		gcp,
+		cli
+	}: Props = $props()
 
-	$: {
+	run(() => {
 		if (
 			triggerSelected === 'kafka' ||
 			triggerSelected === 'nats' ||
@@ -45,7 +78,7 @@
 		) {
 			eventStreamType = triggerSelected
 		}
-	}
+	})
 </script>
 
 <HighlightTheme />
@@ -102,48 +135,50 @@
 				</span>
 			</Tab>
 
-			<svelte:fragment slot="content">
+			{#snippet content()}
 				<div class="min-h-0 grow overflow-y-auto">
 					{#if triggerSelected === 'webhooks'}
-						<slot name="webhooks" />
+						{@render webhooks?.()}
 					{:else if triggerSelected === 'routes'}
-						<slot name="routes" />
+						{@render routes?.()}
 					{:else if triggerSelected === 'emails'}
-						<slot name="emails" />
+						{@render emails?.()}
 					{:else if triggerSelected === 'schedules'}
-						<slot name="schedules" />
+						{@render schedules?.()}
 					{:else if triggerSelected === 'websockets'}
-						<slot name="websockets" />
+						{@render websockets?.()}
 					{:else if triggerSelected === 'postgres'}
-						<slot name="postgres" />
+						{@render postgres?.()}
 					{:else if triggerSelected === 'kafka' || triggerSelected === 'nats' || triggerSelected === 'sqs' || triggerSelected === 'mqtt' || triggerSelected === 'gcp'}
 						<div class="m-1.5">
-							<ToggleButtonGroup bind:selected={eventStreamType} let:item>
-								<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} {item} />
-								<ToggleButton value="nats" label="NATS" icon={NatsIcon} {item} />
-								<ToggleButton value="mqtt" label="MQTT" icon={MqttIcon} {item} />
-								<ToggleButton value="sqs" label="SQS" icon={AwsIcon} {item} />
-								<ToggleButton value="gcp" label="GCP Pub/Sub" icon={GoogleCloudIcon} {item} />
+							<ToggleButtonGroup bind:selected={eventStreamType}>
+								{#snippet children({ item })}
+									<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} {item} />
+									<ToggleButton value="nats" label="NATS" icon={NatsIcon} {item} />
+									<ToggleButton value="mqtt" label="MQTT" icon={MqttIcon} {item} />
+									<ToggleButton value="sqs" label="SQS" icon={AwsIcon} {item} />
+									<ToggleButton value="gcp" label="GCP Pub/Sub" icon={GoogleCloudIcon} {item} />
+								{/snippet}
 							</ToggleButtonGroup>
 						</div>
 						{#if eventStreamType === 'kafka'}
-							<slot name="kafka" />
+							{@render kafka?.()}
 						{:else if eventStreamType === 'nats'}
-							<slot name="nats" />
+							{@render nats?.()}
 						{:else if eventStreamType === 'sqs'}
-							<slot name="sqs" />
+							{@render sqs?.()}
 						{:else if eventStreamType === 'mqtt'}
-							<slot name="mqtt" />
+							{@render mqtt?.()}
 						{:else if eventStreamType === 'gcp'}
-							<slot name="gcp" />
+							{@render gcp?.()}
 						{/if}
 					{:else if triggerSelected === 'cli'}
-						<slot name="cli" />
+						{@render cli?.()}
 					{/if}
 				</div>
-			</svelte:fragment>
+			{/snippet}
 		</Tabs>
 	</div>
 {:else}
-	<slot name="schedules" />
+	{@render schedules?.()}
 {/if}
diff --git a/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte b/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte
index aedbbcb865..04dd89e37c 100644
--- a/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import Button from '$lib/components/common/button/Button.svelte'
 	import Label from '$lib/components/Label.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
@@ -11,14 +13,7 @@
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import { base32 } from 'rfc4648'
 
-	export let token: string = ''
-	export let isFlow: boolean = false
-	export let hash: string | undefined = undefined
-	export let path: string
-	export let userSettings: any
-	export let emailDomain: string | null = null
-
-	let requestType: 'hash' | 'path' = 'path'
+	let requestType: 'hash' | 'path' = $state('path')
 
 	function emailAddress(
 		requestType: 'hash' | 'path',
@@ -39,9 +34,29 @@
 		return `${pathOrHash}+${encodedPrefix}@${emailDomain}`
 	}
 
-	export let email: string = ''
+	interface Props {
+		token?: string
+		isFlow?: boolean
+		hash?: string | undefined
+		path: string
+		userSettings: any
+		emailDomain?: string | null
+		email?: string
+	}
 
-	$: email = emailAddress(requestType, path, hash, isFlow, token)
+	let {
+		token = $bindable(''),
+		isFlow = false,
+		hash = undefined,
+		path,
+		userSettings,
+		emailDomain = null,
+		email = $bindable('')
+	}: Props = $props()
+
+	run(() => {
+		email = emailAddress(requestType, path, hash, isFlow, token)
+	})
 </script>
 
 <div>
@@ -80,9 +95,11 @@
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row justify-between">
 					<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
-					<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} let:item>
-						<ToggleButton label="By path" value="path" {item} />
-						<ToggleButton label="By hash" value="hash" {item} />
+					<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+						{#snippet children({ item })}
+							<ToggleButton label="By path" value="path" {item} />
+							<ToggleButton label="By hash" value="hash" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 			</div>
diff --git a/frontend/src/lib/components/details/createAppFromScript.ts b/frontend/src/lib/components/details/createAppFromScript.ts
index 9beaf23f81..7dfe1c517a 100644
--- a/frontend/src/lib/components/details/createAppFromScript.ts
+++ b/frontend/src/lib/components/details/createAppFromScript.ts
@@ -54,7 +54,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 							style: ''
 						}
 					},
-					actions: [],
+					actions: undefined,
 					numberOfSubgrids: 1,
 					id: 'topbar'
 				},
@@ -478,7 +478,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 								style: ''
 							}
 						},
-						actions: [],
+						actions: undefined,
 						horizontalAlignment: 'left',
 						verticalAlignment: 'center',
 						id: 'title'
@@ -511,7 +511,6 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 								class: ''
 							}
 						},
-						actions: [],
 						menuItems: [],
 						horizontalAlignment: 'right',
 						verticalAlignment: 'center',
@@ -616,7 +615,6 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 							style: ''
 						}
 					},
-					actions: [],
 					numberOfSubgrids: 1,
 					id: 'topbar'
 				},
@@ -1041,7 +1039,6 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 								style: ''
 							}
 						},
-						actions: [],
 						horizontalAlignment: 'left',
 						verticalAlignment: 'center',
 						id: 'title'
@@ -1074,7 +1071,6 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 								class: ''
 							}
 						},
-						actions: [],
 						menuItems: [],
 						horizontalAlignment: 'right',
 						verticalAlignment: 'center',
diff --git a/frontend/src/lib/components/flows/CreateActionsApp.svelte b/frontend/src/lib/components/flows/CreateActionsApp.svelte
index d68356e786..a96dcdf5ce 100644
--- a/frontend/src/lib/components/flows/CreateActionsApp.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsApp.svelte
@@ -25,6 +25,8 @@
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		aiId="apps-create-actions-app"
+		aiDescription="Create a new low-code app"
 		size="sm"
 		spacingSize="xl"
 		startIcon={{ icon: Plus }}
@@ -73,8 +75,8 @@
 				fixedOverflowWidgets={false}
 			/>
 		{/await}
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button size="sm" on:click={importRaw}>Import</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/flows/CreateActionsFlow.svelte b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
index 2ce77b047f..7072459f42 100644
--- a/frontend/src/lib/components/flows/CreateActionsFlow.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
@@ -6,7 +6,7 @@
 	import { Button } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
-	import { importFlowStore } from '$lib/components/flows/flowStore'
+	import { importFlowStore } from '$lib/components/flows/flowStore.svelte'
 	import { Loader2, Plus } from 'lucide-svelte'
 	import YAML from 'yaml'
 
@@ -24,6 +24,8 @@
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		aiId="flows-create-actions-flow"
+		aiDescription="Create a new flow"
 		size="sm"
 		spacingSize="xl"
 		startIcon={{ icon: Plus }}
@@ -67,8 +69,8 @@
 				fixedOverflowWidgets={false}
 			/>
 		{/await}
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button size="sm" on:click={importRaw}>Import</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 4da4917edb..dc46aeea36 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -3,16 +3,17 @@
 	import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte'
 	import WindmillIcon from '../icons/WindmillIcon.svelte'
 	import { Skeleton } from '../common'
-	import { getContext, setContext } from 'svelte'
+	import { getContext, onDestroy, onMount, setContext } from 'svelte'
 	import type { FlowEditorContext } from './types'
-	import type { FlowCopilotContext } from '../copilot/flow'
-	import { classNames } from '$lib/utils'
 	import { writable } from 'svelte/store'
 	import type { PropPickerContext, FlowPropPickerConfig } from '$lib/components/prop_picker'
 	import type { PickableProperties } from '$lib/components/flows/previousResults'
 	import type { Flow } from '$lib/gen'
 	import type { Trigger } from '$lib/components/triggers/utils'
 	import { Splitpanes, Pane } from '$lib/components/splitPanes/index'
+	import FlowAIChat from '../copilot/chat/flow/FlowAIChat.svelte'
+	import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte'
+	import TriggerableByAI from '../TriggerableByAI.svelte'
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	export let loading: boolean
@@ -30,22 +31,27 @@
 		| undefined = undefined
 	export let onDeployTrigger: (trigger: Trigger) => void = () => {}
 
-	const { currentStepStore: copilotCurrentStepStore } =
-		getContext<FlowCopilotContext>('FlowCopilotContext')
+	let flowModuleSchemaMap: FlowModuleSchemaMap | undefined
 
 	setContext<PropPickerContext>('PropPickerContext', {
 		flowPropPickerConfig: writable<FlowPropPickerConfig | undefined>(undefined),
 		pickablePropertiesFiltered: writable<PickableProperties | undefined>(undefined)
 	})
+
+	onMount(() => {
+		aiChatManager.changeMode(AIMode.FLOW)
+	})
+
+	onDestroy(() => {
+		aiChatManager.changeMode(AIMode.NAVIGATOR)
+	})
 </script>
 
 <div
 	id="flow-editor"
-	class={classNames(
-		'h-full overflow-hidden transition-colors duration-[400ms] ease-linear border-t',
-		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : ''
-	)}
+	class={'h-full overflow-hidden transition-colors duration-[400ms] ease-linear border-t'}
 >
+	<TriggerableByAI id="flow-editor" description="Component to edit a flow" />
 	<Splitpanes id="flow-editor" defaultSizes={[60, 40]}>
 		<Pane minSize={15} class="h-full relative z-0" index={0}>
 			<div class="grow overflow-hidden bg-gray h-full bg-surface-secondary relative">
@@ -55,21 +61,27 @@
 							<Skeleton layout={[[2], 1.5]} />
 						{/each}
 					</div>
-				{:else if $flowStore.value.modules}
+				{:else if flowStore.val.value.modules}
 					<FlowModuleSchemaMap
+						bind:this={flowModuleSchemaMap}
 						{disableStaticInputs}
 						{disableTutorials}
 						{disableAi}
 						{disableSettings}
 						{smallErrorHandler}
 						{newFlow}
-						bind:modules={$flowStore.value.modules}
 						on:reload
+						on:generateStep={({ detail }) => {
+							if (!aiChatManager.open) {
+								aiChatManager.openChat()
+							}
+							aiChatManager.generateStep(detail.moduleId, detail.lang, detail.instructions)
+						}}
 					/>
 				{/if}
 			</div>
 		</Pane>
-		<Pane class="relative z-10" index={1}>
+		<Pane class="relative z-10" index={1} minSize={20}>
 			{#if loading}
 				<div class="w-full h-full">
 					<div class="block m-auto pt-40 w-10">
@@ -88,5 +100,8 @@
 				/>
 			{/if}
 		</Pane>
+		{#if !disableAi}
+			<FlowAIChat {flowModuleSchemaMap} />
+		{/if}
 	</Splitpanes>
 </div>
diff --git a/frontend/src/lib/components/flows/common/FlowCard.svelte b/frontend/src/lib/components/flows/common/FlowCard.svelte
index d2e14015ae..e02f5bc91a 100644
--- a/frontend/src/lib/components/flows/common/FlowCard.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCard.svelte
@@ -2,23 +2,37 @@
 	import type { FlowModuleValue } from '$lib/gen'
 	import FlowCardHeader from './FlowCardHeader.svelte'
 
-	export let title: string | undefined = undefined
-	export let summary: string | undefined = undefined
-	export let noEditor: boolean
-	export let noHeader = false
-	export let flowModuleValue: FlowModuleValue | undefined = undefined
+	interface Props {
+		title?: string | undefined
+		summary?: string | undefined
+		noEditor: boolean
+		noHeader?: boolean
+		flowModuleValue?: FlowModuleValue | undefined
+		header?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		title = undefined,
+		summary = $bindable(undefined),
+		noEditor,
+		noHeader = false,
+		flowModuleValue = undefined,
+		header,
+		children
+	}: Props = $props()
 </script>
 
 <div class="flex flex-col h-full">
 	{#if !noEditor && !noHeader}
 		<div>
 			<FlowCardHeader on:setHash on:reload {title} bind:summary {flowModuleValue}>
-				<slot name="header" />
+				{@render header?.()}
 			</FlowCardHeader>
 		</div>
 	{/if}
 
 	<div class="min-h-0 flex-grow">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
index 1932ca9480..b3c362a2f3 100644
--- a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
+++ b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
@@ -29,8 +29,8 @@
 		parentModule,
 		previousModule,
 		parentModule.id,
-		$flowStore,
-		$previewArgs,
+		flowStore.val,
+		previewArgs.val,
 		false
 	)
 </script>
diff --git a/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte
index 254a14f36c..17f5767c46 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchAllWrapper.svelte
@@ -3,19 +3,25 @@
 	import type { FlowModule } from '$lib/gen'
 	import FlowCard from '../common/FlowCard.svelte'
 
-	export let noEditor: boolean
-	export let branch: {
-		summary?: string
-		skip_failure?: boolean
-		modules: Array<FlowModule>
+	interface Props {
+		noEditor: boolean
+		branch: {
+			summary?: string
+			skip_failure?: boolean
+			modules: Array<FlowModule>
+		}
 	}
+
+	let { noEditor, branch = $bindable() }: Props = $props()
 </script>
 
 <div class="h-full flex flex-col">
 	<FlowCard {noEditor} title="Branch">
-		<div slot="header" class="grow">
-			<input bind:value={branch.summary} placeholder={'Summary'} />
-		</div>
+		{#snippet header()}
+			<div class="grow">
+				<input bind:value={branch.summary} placeholder={'Summary'} />
+			</div>
+		{/snippet}
 		<div class="p-4">
 			<div class="mt-2 mb-2 text-sm font-bold">Skip failures</div>
 			<Toggle
diff --git a/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte
index 5b9107ac29..fd7bbc82e8 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte
@@ -4,22 +4,34 @@
 
 	import BranchPredicateEditor from './BranchPredicateEditor.svelte'
 
-	export let branch: {
-		summary?: string
-		expr: string
-		modules: Array<FlowModule>
+	interface Props {
+		branch: {
+			summary?: string
+			expr: string
+			modules: Array<FlowModule>
+		}
+		parentModule: FlowModule
+		previousModule: FlowModule | undefined
+		noEditor: boolean
+		enableAi?: boolean
 	}
-	export let parentModule: FlowModule
-	export let previousModule: FlowModule | undefined
-	export let noEditor: boolean
-	export let enableAi = false
+
+	let {
+		branch = $bindable(),
+		parentModule,
+		previousModule,
+		noEditor,
+		enableAi = false
+	}: Props = $props()
 </script>
 
 <div class="h-full flex flex-col">
 	<FlowCard {noEditor} title="Branch">
-		<div slot="header" class="grow">
-			<input bind:value={branch.summary} placeholder={'Summary'} />
-		</div>
+		{#snippet header()}
+			<div class="grow">
+				<input bind:value={branch.summary} placeholder={'Summary'} />
+			</div>
+		{/snippet}
 		<div class="overflow-hidden flex-grow">
 			<h3 class="p-2">Predicate expression</h3>
 			<BranchPredicateEditor
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
index 79fb46af6b..7b6037af41 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Alert, Badge, Tab } from '$lib/components/common'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
-	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 
 	import type { BranchAll, FlowModule } from '$lib/gen'
@@ -15,16 +14,23 @@
 	import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte'
 	import { enterpriseLicense } from '$lib/stores'
 	import FlowModuleSkip from './FlowModuleSkip.svelte'
+	import TabsV2 from '$lib/components/common/tabs/TabsV2.svelte'
 
-	export let noEditor: boolean
-	export let flowModule: FlowModule
-	export let previousModule: FlowModule | undefined
-	export let parentModule: FlowModule | undefined
+	interface Props {
+		noEditor: boolean
+		flowModule: FlowModule
+		previousModule: FlowModule | undefined
+		parentModule: FlowModule | undefined
+	}
 
-	let value = flowModule.value as BranchAll
-	$: value = flowModule.value as BranchAll
+	let { noEditor, flowModule = $bindable(), previousModule, parentModule }: Props = $props()
 
-	let selected = 'early-stop'
+	let value = $state(flowModule.value as BranchAll)
+	$effect(() => {
+		value = flowModule.value as BranchAll
+	})
+
+	let selected = $state('early-stop')
 </script>
 
 <div class="h-full flex flex-col w-full" id="flow-editor-branch-all-wrapper">
@@ -77,14 +83,14 @@
 				</Pane>
 				{#if flowModule}
 					<Pane size={40}>
-						<Tabs bind:selected id={`flow-editor-branch-all-${flowModule.id}`}>
+						<TabsV2 bind:selected id={`flow-editor-branch-all-${flowModule.id}`}>
 							<Tab value="early-stop">Early Stop/Break</Tab>
 							<Tab value="skip">Skip</Tab>
 							<Tab value="suspend">Suspend/Approval/Prompt</Tab>
 							<Tab value="sleep">Sleep</Tab>
 							<Tab value="mock">Mock</Tab>
 							<Tab value="lifetime">Lifetime</Tab>
-							<svelte:fragment slot="content">
+							{#snippet content()}
 								<div class="overflow-hidden bg-surface">
 									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 										<div class="p-4 overflow-y-auto">
@@ -117,8 +123,8 @@
 										</div>
 									</TabContent>
 								</div>
-							</svelte:fragment>
-						</Tabs>
+							{/snippet}
+						</TabsV2>
 					</Pane>
 				{/if}
 			</Splitpanes>
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
index 253783f9d7..91493fdeb2 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Alert, Badge, Tab } from '$lib/components/common'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
-	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import TabsV2 from '$lib/components/common/tabs/TabsV2.svelte'
 
 	import type { BranchOne, FlowModule } from '$lib/gen'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
@@ -15,18 +15,30 @@
 	import FlowModuleMock from './FlowModuleMock.svelte'
 	import { enterpriseLicense } from '$lib/stores'
 	import FlowModuleSkip from './FlowModuleSkip.svelte'
-	// import FlowRetries from './FlowRetries.svelte'
 
-	export let flowModule: FlowModule
-	export let previousModule: FlowModule | undefined
-	export let parentModule: FlowModule | undefined
-	export let noEditor: boolean
-	export let enableAi = false
+	interface Props {
+		// import FlowRetries from './FlowRetries.svelte'
+		flowModule: FlowModule
+		previousModule: FlowModule | undefined
+		parentModule: FlowModule | undefined
+		noEditor: boolean
+		enableAi?: boolean
+	}
 
-	let value = flowModule.value as BranchOne
-	$: value = flowModule.value as BranchOne
+	let {
+		flowModule = $bindable(),
+		previousModule,
+		parentModule,
+		noEditor,
+		enableAi = false
+	}: Props = $props()
 
-	let selected = 'early-stop'
+	let value = $state(flowModule.value as BranchOne)
+	$effect(() => {
+		value = flowModule.value as BranchOne
+	})
+
+	let selected = $state('early-stop')
 </script>
 
 <div class="h-full" id="flow-editor-branch-one-wrapper">
@@ -89,14 +101,14 @@
 				</Pane>
 				{#if flowModule}
 					<Pane size={40}>
-						<Tabs bind:selected id={`flow-editor-branch-one-${flowModule.id}`}>
+						<TabsV2 bind:selected id={`flow-editor-branch-one-${flowModule.id}`}>
 							<Tab value="early-stop">Early Stop/Break</Tab>
 							<Tab value="skip">Skip</Tab>
 							<Tab value="suspend">Suspend/Approval/Prompt</Tab>
 							<Tab value="sleep">Sleep</Tab>
 							<Tab value="mock">Mock</Tab>
 							<Tab value="lifetime">Lifetime</Tab>
-							<svelte:fragment slot="content">
+							{#snippet content()}
 								<div class="overflow-hidden bg-surface">
 									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 										<div class="p-4 overflow-y-auto">
@@ -129,8 +141,8 @@
 										</div>
 									</TabContent>
 								</div>
-							</svelte:fragment>
-						</Tabs>
+							{/snippet}
+						</TabsV2>
 					</Pane>
 				{/if}
 			</Splitpanes>
diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte
index 472377fa69..4ce1dc5086 100644
--- a/frontend/src/lib/components/flows/content/FlowConstants.svelte
+++ b/frontend/src/lib/components/flows/content/FlowConstants.svelte
@@ -10,71 +10,81 @@
 	import InputTransformSchemaForm from '$lib/components/InputTransformSchemaForm.svelte'
 	import type { FlowEditorContext } from '../types'
 
-	export let noEditor: boolean
-
-	let hideOptional = false
-	const { flowStateStore, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
-
-	$: scriptModules = dfs($flowStore.value.modules, (x) => x)
-		.map((x) => [x.value, x] as [FlowModuleValue, FlowModule])
-		.filter((x) => x[0].type == 'script' || x[0].type == 'rawscript' || x[0].type == 'flow') as [
-		PathScript | RawScript,
-		FlowModule
-	][]
-
-	$: resources = Object.fromEntries(
-		scriptModules
-			.map(([v, m]) => [
-				m.id,
-				Object.entries(v.input_transforms)
-					.map((x) => {
-						let schema = $flowStateStore[m.id]?.schema
-						let val: { argName: string; type: string } | undefined = undefined
-
-						const [k, inputTransform] = x
-						const v = schema?.properties[k]
-
-						if (
-							v?.format?.includes('resource') &&
-							inputTransform.type === 'static' &&
-							(inputTransform.value === '' ||
-								inputTransform.value === undefined ||
-								inputTransform.value === null)
-						) {
-							val = {
-								argName: k,
-								type: v.format.split('-')[1]
-							}
-						}
-						return val
-					})
-					.filter(Boolean)
-			])
-			.filter((x) => x[1].length > 0)
-	) as {
-		[k: string]: {
-			argName: string
-			type: string
-		}[]
+	interface Props {
+		noEditor: boolean
 	}
 
-	$: steps = scriptModules
-		.map(
-			([v, m]) =>
-				[
-					v.input_transforms,
+	let { noEditor }: Props = $props()
+
+	let hideOptional = $state(false)
+	const { flowStateStore, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+
+	let scriptModules = $derived(
+		dfs(flowStore.val.value.modules, (x) => x)
+			.map((x) => [x.value, x] as [FlowModuleValue, FlowModule])
+			.filter((x) => x[0].type == 'script' || x[0].type == 'rawscript' || x[0].type == 'flow') as [
+			PathScript | RawScript,
+			FlowModule
+		][]
+	)
+
+	let resources = $derived(
+		Object.fromEntries(
+			scriptModules
+				.map(([v, m]) => [
+					m.id,
 					Object.entries(v.input_transforms)
-						.filter((x) => {
-							const shouldDisplay = hideOptional
-								? $flowStateStore[m.id]?.schema?.required?.includes(x[0])
-								: true
-							return x[1].type == 'static' && shouldDisplay
+						.map((x) => {
+							let schema = flowStateStore[m.id]?.schema
+							let val: { argName: string; type: string } | undefined = undefined
+
+							const [k, inputTransform] = x
+							const v = schema?.properties[k]
+
+							if (
+								v?.format?.includes('resource') &&
+								inputTransform.type === 'static' &&
+								(inputTransform.value === '' ||
+									inputTransform.value === undefined ||
+									inputTransform.value === null)
+							) {
+								val = {
+									argName: k,
+									type: v.format.split('-')[1]
+								}
+							}
+							return val
 						})
-						.map((x) => x[0]),
-					m
-				] as [Record<string, InputTransform>, string[], FlowModule]
-		)
-		.filter(([i, f, m]) => f.length > 0)
+						.filter(Boolean)
+				])
+				.filter((x) => x[1].length > 0)
+		) as {
+			[k: string]: {
+				argName: string
+				type: string
+			}[]
+		}
+	)
+
+	let steps = $derived(
+		scriptModules
+			.map(
+				([v, m]) =>
+					[
+						v.input_transforms,
+						Object.entries(v.input_transforms)
+							.filter((x) => {
+								const shouldDisplay = hideOptional
+									? $flowStateStore[m.id]?.schema?.required?.includes(x[0])
+									: true
+								return x[1].type == 'static' && shouldDisplay
+							})
+							.map((x) => x[0]),
+						m
+					] as [Record<string, InputTransform>, string[], FlowModule]
+			)
+			.filter(([i, f, m]) => f.length > 0)
+	)
 
 	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
 		inputMatches: writable(undefined),
@@ -86,13 +96,15 @@
 
 <div class="min-h-full">
 	<FlowCard {noEditor} title="All Static Inputs">
-		<Toggle slot="header" bind:checked={hideOptional} options={{ left: 'Hide optional inputs' }} />
+		{#snippet header()}
+			<Toggle bind:checked={hideOptional} options={{ left: 'Hide optional inputs' }} />
+		{/snippet}
 		<div class="min-h-full flex-1">
 			<Alert type="info" title="Static Inputs" class="m-4"
-				>This page centralizes the static inputs of every steps. It is aking to a file containing all
-				constants. Modifying a value here modifies it in the step input directly. It is especially
-				useful when forking a flow to get an overview of all the variables to parametrize that are
-				not exposed directly as flow inputs.</Alert
+				>This page centralizes the static inputs of every steps. It is aking to a file containing
+				all constants. Modifying a value here modifies it in the step input directly. It is
+				especially useful when forking a flow to get an overview of all the variables to parametrize
+				that are not exposed directly as flow inputs.</Alert
 			>
 			{#if Object.keys(resources).length > 0}
 				<Alert type="warning" title="Missing resources" class="m-4">
@@ -111,7 +123,7 @@
 			{/if}
 			{#if steps.length == 0}
 				<div class="mt-2"></div>
-				{#if $flowStore.value.modules.length == 0}
+				{#if flowStore.val.value.modules.length == 0}
 					<Alert type="warning" title="No steps" class="m-4">
 						This flow has no steps. Add a step to see its static inputs.
 					</Alert>
@@ -122,7 +134,7 @@
 					</Alert>
 				{/if}
 			{/if}
-			{#each steps as [args, filter, m], index (m.id + index)}
+			{#each steps as [_args, filter, m], index (m.id + index)}
 				{#if filter.length > 0}
 					<div class="relative h-full border-t p-4">
 						<h2 class="sticky w-full top-0 z-10 inline-flex items-center py-2">
@@ -135,7 +147,7 @@
 							{filter}
 							class="mt-2"
 							schema={$flowStateStore[m.id]?.schema ?? {}}
-							bind:args
+							bind:args={steps[index][0]}
 						/>
 					</div>
 				{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 613145f6c2..030d0792a1 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
 	import FlowModuleWrapper from './FlowModuleWrapper.svelte'
 	import FlowSettings from './FlowSettings.svelte'
@@ -7,24 +7,35 @@
 	import FlowFailureModule from './FlowFailureModule.svelte'
 	import FlowConstants from './FlowConstants.svelte'
 	import type { FlowModule, Flow } from '$lib/gen'
-	import { initFlowStepWarnings } from '../utils'
-	import { dfs } from '../dfs'
 	import FlowPreprocessorModule from './FlowPreprocessorModule.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
-	import { insertNewPreprocessorModule } from '../flowStateUtils'
+	import { insertNewPreprocessorModule } from '../flowStateUtils.svelte'
 	import TriggersEditor from '../../triggers/TriggersEditor.svelte'
 	import { handleSelectTriggerFromKind, type Trigger } from '$lib/components/triggers/utils'
+	import { computeMissingInputWarnings } from '../missingInputWarnings'
+
+	interface Props {
+		noEditor?: boolean
+		enableAi?: boolean
+		newFlow?: boolean
+		disabledFlowInputs?: boolean
+		savedFlow?:
+			| (Flow & {
+					draft?: Flow | undefined
+			  })
+			| undefined
+		onDeployTrigger?: (trigger: Trigger) => void
+	}
+
+	let {
+		noEditor = false,
+		enableAi = false,
+		newFlow = false,
+		disabledFlowInputs = false,
+		savedFlow = undefined,
+		onDeployTrigger = () => {}
+	}: Props = $props()
 
-	export let noEditor = false
-	export let enableAi = false
-	export let newFlow = false
-	export let disabledFlowInputs = false
-	export let savedFlow:
-		| (Flow & {
-				draft?: Flow | undefined
-		  })
-		| undefined = undefined
-	export let onDeployTrigger: (trigger: Trigger) => void = () => {}
 	const {
 		selectedId,
 		flowStore,
@@ -50,28 +61,8 @@
 		}
 	}
 
-	async function initWarnings() {
-		for (const module of $flowStore?.value?.modules) {
-			if (!module) {
-				continue
-			}
-
-			if (!$flowInputsStore) {
-				$flowInputsStore = {}
-			}
-
-			$flowInputsStore[module?.id] = {
-				flowStepWarnings: await initFlowStepWarnings(
-					module.value,
-					$flowStateStore?.[module?.id]?.schema,
-					dfs($flowStore.value.modules, (fm) => fm.id)
-				)
-			}
-		}
-	}
-
-	onMount(() => {
-		initWarnings()
+	$effect(() => {
+		computeMissingInputWarnings(flowStore, $flowStateStore, flowInputsStore)
 	})
 </script>
 
@@ -108,7 +99,7 @@
 		on:updateSchema={(e) => {
 			const { payloadData, redirect } = e.detail
 			if (payloadData) {
-				$previewArgs = JSON.parse(JSON.stringify(payloadData))
+				previewArgs.val = JSON.parse(JSON.stringify(payloadData))
 			}
 			if (redirect) {
 				$selectedId = 'Input'
@@ -123,11 +114,11 @@
 		{noEditor}
 		newItem={newFlow}
 		isFlow={true}
-		hasPreprocessor={!!$flowStore.value.preprocessor_module}
+		hasPreprocessor={!!flowStore.val.value.preprocessor_module}
 		canHavePreprocessor={true}
-		args={$previewArgs}
+		args={previewArgs.val}
 		isDeployed={savedFlow && !savedFlow?.draft_only}
-		schema={$flowStore.schema}
+		schema={flowStore.val.schema}
 		{onDeployTrigger}
 	/>
 {:else if $selectedId.startsWith('subflow:')}
@@ -135,16 +126,16 @@
 		>Selected step is witin an expanded subflow and is not directly editable in the flow editor</div
 	>
 {:else}
-	{@const dup = checkDup($flowStore.value.modules)}
+	{@const dup = checkDup(flowStore.val.value.modules)}
 	{#if dup}
 		<div class="text-red-600 text-xl p-2">There are duplicate modules in the flow at id: {dup}</div>
 	{:else}
 		{#key $selectedId}
-			{#each $flowStore.value.modules as flowModule, index (flowModule.id ?? index)}
+			{#each flowStore.val.value.modules as flowModule, index (flowModule.id ?? index)}
 				<FlowModuleWrapper
 					{noEditor}
-					bind:flowModule={$flowStore.value.modules[index]}
-					previousModule={$flowStore.value.modules[index - 1]}
+					bind:flowModule={flowStore.val.value.modules[index]}
+					previousModule={flowStore.val.value.modules[index - 1]}
 					{enableAi}
 					savedModule={savedFlow?.value.modules[index]}
 				/>
diff --git a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
index 244f0ffffe..d8745aa8d9 100644
--- a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
@@ -10,13 +10,10 @@
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 </script>
 
-{#if $flowStore.value.failure_module}
+{#if flowStore.val.value.failure_module}
 	<FlowModuleWrapper
 		{noEditor}
-		bind:flowModule={$flowStore.value.failure_module}
-		on:delete={() => {
-			$flowStore.value.failure_module = undefined
-		}}
+		bind:flowModule={flowStore.val.value.failure_module}
 		{savedModule}
 		previousModule={undefined}
 	/>
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 339bbde4f9..1c3ce16070 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
 	import { ButtonType } from '$lib/components/common/button/model'
-	import { getContext, tick } from 'svelte'
+	import { getContext, tick, untrack } from 'svelte'
 	import FlowCard from '../common/FlowCard.svelte'
 	import type { FlowEditorContext } from '../types'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
@@ -39,13 +39,18 @@
 		schemaFromDiff,
 		computeDiff,
 		applyDiff
-	} from '$lib/components/schema/schemaUtils'
+	} from '$lib/components/schema/schemaUtils.svelte'
 	import SideBarTab from '$lib/components/meltComponents/SideBarTab.svelte'
 	import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
 	import { isObjectTooBig } from '$lib/utils'
+	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
 
-	export let noEditor: boolean
-	export let disabled: boolean
+	interface Props {
+		noEditor: boolean
+		disabled: boolean
+	}
+
+	let { noEditor, disabled }: Props = $props()
 
 	const {
 		flowStore,
@@ -56,33 +61,42 @@
 		flowInputEditorState
 	} = getContext<FlowEditorContext>('FlowEditorContext')
 
-	let addProperty: AddPropertyV2 | undefined = undefined
-	let previewSchema: Record<string, any> | undefined = undefined
+	let addPropertyV2: AddPropertyV2 | undefined = $state(undefined)
+	let previewSchema: Record<string, any> | undefined = $state(undefined)
 	let payloadData: Record<string, any> | undefined = undefined
-	let previewArguments: Record<string, any> | undefined = $previewArgs
+	let previewArguments: Record<string, any> | undefined = $state(previewArgs.val)
 	let dropdownItems: Array<{
 		label: string
 		onClick: () => void
 		disabled?: boolean
-	}> = []
-	let diff: Record<string, SchemaDiff> = {}
-	let editPanelSize = $flowInputEditorState?.editPanelSize ?? 0
-	let selectedSchema: Record<string, any> | undefined = undefined
-	let runDisabled: boolean = false
-	let editableSchemaForm: EditableSchemaForm | undefined = undefined
-	let savedPreviewArgs: Record<string, any> | undefined = undefined
-	let preventEscape = false
-	let isValid = true
+	}> = $state([])
+	let diff: Record<string, SchemaDiff> = $state({})
+	let editPanelSize = $state($flowInputEditorState?.editPanelSize ?? 0)
+	let selectedSchema: Record<string, any> | undefined = $state(undefined)
+	let runDisabled: boolean = $state(false)
+	let editableSchemaForm: EditableSchemaForm | undefined = $state(undefined)
+	let savedPreviewArgs: Record<string, any> | undefined = $state(undefined)
+	let preventEscape = $state(false)
+	let isValid = $state(true)
 
 	function updateEditPanelSize(size: number | undefined) {
 		if (!$flowInputEditorState) return
 		if (!size || size === 0) {
 			$flowInputEditorState.editPanelSize = undefined
-			return
+		} else {
+			$flowInputEditorState.editPanelSize = size
 		}
-		$flowInputEditorState.editPanelSize = size
 	}
-	$: updateEditPanelSize(editPanelSize)
+
+	let timeout: NodeJS.Timeout | undefined = undefined
+	$effect(() => {
+		if (timeout) {
+			clearTimeout(timeout)
+		}
+		timeout = setTimeout(() => {
+			updateEditPanelSize(editPanelSize)
+		}, 100)
+	})
 
 	const getDropdownItems = () => {
 		return [
@@ -158,7 +172,7 @@
 	}
 
 	function schemaFromPayload(payloadData: any) {
-		const payload = structuredClone(payloadData)
+		const payload = structuredClone($state.snapshot(payloadData))
 		const parsed = JSON.parse(JSON.stringify(payload))
 
 		if (!parsed) {
@@ -179,8 +193,8 @@
 		return { required: [], properties: {}, ...convert(parsed) }
 	}
 
-	let flowPreviewContent: FlowPreviewContent
-	let previewOpen = false
+	let flowPreviewContent: FlowPreviewContent | undefined = $state()
+	let previewOpen = $state(false)
 
 	function handleKeydown(event: KeyboardEvent) {
 		if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
@@ -195,7 +209,7 @@
 
 	function runPreview() {
 		if (previewArguments) {
-			$previewArgs = structuredClone(previewArguments)
+			previewArgs.val = structuredClone($state.snapshot(previewArguments))
 		}
 		previewOpen = true
 		flowPreviewContent?.test()
@@ -213,7 +227,7 @@
 			updatePreviewSchema(undefined)
 			return
 		}
-		payloadData = structuredClone(payload)
+		payloadData = structuredClone($state.snapshot(payload))
 		selectedSchema = schemaFromPayload(payloadData)
 		updatePreviewSchema(selectedSchema)
 		updatePreviewArguments(payloadData)
@@ -230,16 +244,16 @@
 			return
 		}
 		diff = {}
-		const diffSchema = computeDiff(newSchema, $flowStore.schema)
+		const diffSchema = computeDiff(newSchema, flowStore.val.schema)
 		diff = diffSchema
-		previewSchema = schemaFromDiff(diffSchema, $flowStore.schema)
+		previewSchema = schemaFromDiff(diffSchema, flowStore.val.schema)
 		runDisabled = true
 	}
 
 	async function applySchemaAndArgs() {
-		$flowStore.schema = applyDiff($flowStore.schema, diff)
+		flowStore.val.schema = applyDiff(flowStore.val.schema, diff)
 		if (previewArguments) {
-			savedPreviewArgs = structuredClone(previewArguments)
+			savedPreviewArgs = structuredClone($state.snapshot(previewArguments))
 		}
 		updatePreviewSchemaAndArgs(undefined)
 		if ($flowInputEditorState) {
@@ -252,13 +266,13 @@
 			previewArguments = savedPreviewArgs
 			return
 		}
-		savedPreviewArgs = structuredClone(previewArguments)
-		previewArguments = structuredClone(payloadData)
+		savedPreviewArgs = structuredClone($state.snapshot(previewArguments))
+		previewArguments = structuredClone($state.snapshot(payloadData))
 	}
 
 	let tabButtonWidth = 0
 
-	let connectFirstNode: () => void = () => {}
+	let connectFirstNode: () => void = $state(() => {})
 
 	let init = false
 	function initPayloadData() {
@@ -268,18 +282,25 @@
 			$flowInputEditorState.payloadData = undefined
 		}
 	}
-	$: $flowInputEditorState && ((dropdownItems = getDropdownItems()), initPayloadData())
+	$effect(() => {
+		if ($flowInputEditorState) {
+			untrack(() => {
+				dropdownItems = getDropdownItems()
+				initPayloadData()
+			})
+		}
+	})
 
-	let preventEnter = false
+	let preventEnter = $state(false)
 
 	async function acceptChange(arg: { label: string; nestedParent: any | undefined }) {
-		handleChange(arg, $flowStore.schema, diff, (newSchema) => {
-			$flowStore.schema = newSchema
+		handleChange(arg, flowStore.val.schema, diff, (newSchema) => {
+			flowStore.val.schema = newSchema
 		})
 	}
 
 	async function rejectChange(arg: { label: string; nestedParent: any | undefined }) {
-		const revertDiff = computeDiff($flowStore.schema, selectedSchema)
+		const revertDiff = computeDiff(flowStore.val.schema, selectedSchema)
 		handleChange(arg, selectedSchema, revertDiff, (newSchema) => {
 			selectedSchema = newSchema
 		})
@@ -309,8 +330,8 @@
 			updateCurrentSchema(schemaUpdated)
 		}
 
-		diff = computeDiff(selectedSchema, $flowStore.schema)
-		previewSchema = schemaFromDiff(diff, $flowStore.schema)
+		diff = computeDiff(selectedSchema, flowStore.val.schema)
+		previewSchema = schemaFromDiff(diff, flowStore.val.schema)
 	}
 
 	function resetArgs() {
@@ -320,11 +341,11 @@
 		}
 	}
 
-	let historicInputs: HistoricInputs | undefined = undefined
-	let captureTable: CaptureTable | undefined = undefined
-	let savedInputsPicker: SavedInputsPicker | undefined = undefined
-	let jsonInputs: JsonInputs | undefined = undefined
-	let firstStepInputs: FirstStepInputs | undefined = undefined
+	let historicInputs: HistoricInputs | undefined = $state(undefined)
+	let captureTable: CaptureTable | undefined = $state(undefined)
+	let savedInputsPicker: SavedInputsPicker | undefined = $state(undefined)
+	let jsonInputs: JsonInputs | undefined = $state(undefined)
+	let firstStepInputs: FirstStepInputs | undefined = $state(undefined)
 
 	function resetSelected() {
 		historicInputs?.resetSelected(true)
@@ -336,7 +357,7 @@
 </script>
 
 <!-- Add svelte:window to listen for keyboard events -->
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <Drawer bind:open={previewOpen} alwaysOpen size="75%" {preventEscape}>
 	<FlowPreviewContent
@@ -355,25 +376,33 @@
 		<div class="py-2 px-4 h-full">
 			<EditableSchemaForm
 				bind:this={editableSchemaForm}
-				bind:schema={$flowStore.schema}
+				bind:schema={flowStore.val.schema}
 				isFlowInput
 				on:edit={(e) => {
-					addProperty?.openDrawer(e.detail)
+					addPropertyV2?.openDrawer(e.detail)
 				}}
 				on:delete={(e) => {
-					addProperty?.handleDeleteArgument([e.detail])
+					addPropertyV2?.handleDeleteArgument([e.detail])
 				}}
 				displayWebhookWarning
 				editTab={$flowInputEditorState?.selectedTab}
 				{previewSchema}
 				bind:args={previewArguments}
-				bind:editPanelSize
+				bind:editPanelSize={
+					() => {
+						return editPanelSize
+					},
+					(v) => {
+						if (editPanelSize != v) {
+							editPanelSize = v
+						}
+					}
+				}
 				editPanelInitialSize={$flowInputEditorState?.editPanelSize}
 				pannelExtraButtonWidth={$flowInputEditorState?.editPanelSize ? tabButtonWidth : 0}
 				{diff}
 				disableDnd={!!previewSchema}
 				on:rejectChange={(e) => {
-					console.log('rejectChange')
 					rejectChange(e.detail).then(() => {
 						updatePreviewSchema(selectedSchema)
 					})
@@ -387,20 +416,21 @@
 				on:change={() => {
 					previewArguments = previewArguments
 					if (!previewSchema) {
-						savedPreviewArgs = structuredClone(previewArguments)
+						savedPreviewArgs = structuredClone($state.snapshot(previewArguments))
 					}
+					refreshStateStore(flowStore)
 				}}
 				on:schemaChange={() => {
 					resetArgs()
 				}}
 				bind:isValid
 			>
-				<svelte:fragment slot="openEditTab">
+				{#snippet openEditTab()}
 					<div class={twMerge('flex flex-row divide-x', ButtonType.ColorVariants.blue.divider)}>
 						<SideBarTab {dropdownItems} fullMenu={!!$flowInputEditorState?.selectedTab}>
-							<svelte:fragment slot="close button">
+							{#snippet close_button()}
 								<button
-									on:click={() => {
+									onclick={() => {
 										handleEditSchema()
 									}}
 									title={!!$flowInputEditorState?.selectedTab
@@ -414,17 +444,18 @@
 									)}
 								>
 									<div class="p-2 center-center">
-										<svelte:component
-											this={!!$flowInputEditorState?.selectedTab ? ChevronRight : Pen}
-											size={14}
-										/>
+										{#if !!$flowInputEditorState?.selectedTab}
+											<ChevronRight size={14} />
+										{:else}
+											<Pen size={14} />
+										{/if}
 									</div>
 								</button>
-							</svelte:fragment>
+							{/snippet}
 						</SideBarTab>
 					</div>
-				</svelte:fragment>
-				<svelte:fragment slot="addProperty">
+				{/snippet}
+				{#snippet addProperty()}
 					{#if !!previewSchema}
 						<div class="flex flex-row items-center gap-2 right-2 justify-end">
 							<Button
@@ -455,10 +486,10 @@
 						</div>
 					{:else}
 						<AddPropertyV2
-							bind:schema={$flowStore.schema}
-							bind:this={addProperty}
+							bind:schema={flowStore.val.schema}
+							bind:this={addPropertyV2}
 							on:change={() => {
-								$flowStore = $flowStore
+								refreshStateStore(flowStore)
 								if (editableSchemaForm) {
 									editableSchemaForm.updateJson()
 								}
@@ -466,21 +497,21 @@
 							on:addNew={(e) => {
 								handleEditSchema('inputEditor')
 								editableSchemaForm?.openField(e.detail)
-								$flowStore = $flowStore
+								refreshStateStore(flowStore)
 							}}
 						>
-							<svelte:fragment slot="trigger">
+							{#snippet trigger()}
 								<div
 									class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
 									id="add-flow-input-btn"
 								>
 									<Plus size={14} />
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</AddPropertyV2>
 					{/if}
-				</svelte:fragment>
-				<svelte:fragment slot="extraTab">
+				{/snippet}
+				{#snippet extraTab()}
 					{#if $flowInputEditorState?.selectedTab === 'history'}
 						<FlowInputEditor
 							title="History"
@@ -505,11 +536,13 @@
 							}}
 							title="Trigger captures"
 						>
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<CaptureButton on:openTriggers small={true} />
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<CaptureButton on:openTriggers small={true} />
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<div class="h-full">
 								<CaptureTable
 									path={$initialPathStore || fakeInitialPath}
@@ -582,9 +615,9 @@
 								}}
 								on:select={(e) => {
 									if (e.detail) {
-										const diffSchema = computeDiff(e.detail, $flowStore.schema)
+										const diffSchema = computeDiff(e.detail, flowStore.val.schema)
 										diff = diffSchema
-										previewSchema = schemaFromDiff(diffSchema, $flowStore.schema)
+										previewSchema = schemaFromDiff(diffSchema, flowStore.val.schema)
 										runDisabled = true
 									} else {
 										updatePreviewSchemaAndArgs(undefined)
@@ -593,8 +626,8 @@
 							/>
 						</FlowInputEditor>
 					{/if}
-				</svelte:fragment>
-				<svelte:fragment slot="runButton">
+				{/snippet}
+				{#snippet runButton()}
 					<div class="w-full flex justify-end pr-5">
 						<Button
 							color="dark"
@@ -609,12 +642,12 @@
 							Run
 						</Button>
 					</div>
-				</svelte:fragment>
+				{/snippet}
 			</EditableSchemaForm>
 		</div>
 	{:else}
 		<div class="p-4 border-b">
-			<FlowInputViewer schema={$flowStore.schema} />
+			<FlowInputViewer schema={flowStore.val.schema} />
 		</div>
 	{/if}
 </FlowCard>
diff --git a/frontend/src/lib/components/flows/content/FlowInputEditor.svelte b/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
index 7791fcd412..fa26cf965e 100644
--- a/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
@@ -3,7 +3,13 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let title: string = ''
+	interface Props {
+		title?: string
+		action?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
+
+	let { title = '', action, children }: Props = $props()
 
 	onDestroy(() => {
 		dispatch('destroy')
@@ -17,10 +23,10 @@
 		<h2 class="font-semibold text-secondary text-sm flex flex-row items-center gap-1 leading-6">
 			{title}
 		</h2>
-		<slot name="action" />
+		{@render action?.()}
 	</div>
 
 	<div class="w-full min-h-0 grow">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index d6dfb9cca9..7f1a70afac 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -19,28 +19,42 @@
 	import DefaultScripts from '$lib/components/DefaultScripts.svelte'
 	import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui'
 
-	export let failureModule: boolean
-	export let preprocessorModule: boolean
-	export let shouldDisableTriggerScripts: boolean = false
-	export let noEditor: boolean
-	export let summary: string | undefined = undefined
+	interface Props {
+		failureModule: boolean
+		preprocessorModule: boolean
+		shouldDisableTriggerScripts?: boolean
+		noEditor: boolean
+		summary?: string | undefined
+	}
+
+	let {
+		failureModule,
+		preprocessorModule,
+		shouldDisableTriggerScripts = false,
+		noEditor,
+		summary = $bindable(undefined)
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
-	let kind: 'script' | 'failure' | 'approval' | 'trigger' = failureModule
-		? 'failure'
-		: summary == 'Trigger'
-		? 'trigger'
-		: summary == 'Approval'
-		? 'approval'
-		: 'script'
-	let pick_existing: 'workspace' | 'hub' = 'hub'
-	let filter = ''
+	let kind: 'script' | 'failure' | 'approval' | 'trigger' = $state(
+		failureModule
+			? 'failure'
+			: summary == 'Trigger'
+				? 'trigger'
+				: summary == 'Approval'
+					? 'approval'
+					: 'script'
+	)
+	let pick_existing: 'workspace' | 'hub' = $state('hub')
+	let filter = $state('')
 
-	$: langs = processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
-		.map((l) => [defaultScriptLanguages[l], l])
-		.filter(
-			(x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1])
-		) as [string, SupportedLanguage | 'docker'][]
+	let langs = $derived(
+		processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
+			.map((l) => [defaultScriptLanguages[l], l])
+			.filter(
+				(x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1])
+			) as [string, SupportedLanguage | 'docker'][]
+	)
 
 	function displayLang(lang: SupportedLanguage | 'docker', kind: string) {
 		if (lang == 'bun' || lang == 'python3' || lang == 'deno') {
@@ -68,30 +82,32 @@
 	{:else}{#if !failureModule && !preprocessorModule}
 			<div class="center-center">
 				<div class="max-w-min">
-					<ToggleButtonGroup bind:selected={kind} let:item>
-						<ToggleButton
-							value="script"
-							icon={Code}
-							label="Action"
-							tooltip="An action script is simply a script that is neither a trigger nor an approval script. Those are the majority of the scripts."
-							{item}
-						/>
-						{#if !shouldDisableTriggerScripts}
+					<ToggleButtonGroup bind:selected={kind}>
+						{#snippet children({ item })}
 							<ToggleButton
-								value="trigger"
-								icon={Zap}
-								label="Trigger"
-								tooltip="Used as a first step most commonly with a state and a schedule to watch for changes on an external system, compute the diff since last time and set the new state. The diffs are then treated one by one with a for-loop."
+								value="script"
+								icon={Code}
+								label="Action"
+								tooltip="An action script is simply a script that is neither a trigger nor an approval script. Those are the majority of the scripts."
 								{item}
 							/>
-						{/if}
-						<ToggleButton
-							value="approval"
-							icon={Check}
-							label="Approval"
-							tooltip="An approval step will suspend the execution of a flow until it has been approved through the resume endpoints or the approval page by and solely by the recipients of those secret urls."
-							{item}
-						/>
+							{#if !shouldDisableTriggerScripts}
+								<ToggleButton
+									value="trigger"
+									icon={Zap}
+									label="Trigger"
+									tooltip="Used as a first step most commonly with a state and a schedule to watch for changes on an external system, compute the diff since last time and set the new state. The diffs are then treated one by one with a for-loop."
+									{item}
+								/>
+							{/if}
+							<ToggleButton
+								value="approval"
+								icon={Check}
+								label="Approval"
+								tooltip="An approval step will suspend the execution of a flow until it has been approved through the resume endpoints or the approval page by and solely by the recipients of those secret urls."
+								{item}
+							/>
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 			</div>
@@ -177,10 +193,10 @@
 					documentationLink={kind === 'script'
 						? 'https://www.windmill.dev/docs/flows/editor_components#flow-actions'
 						: kind === 'trigger'
-						? 'https://www.windmill.dev/docs/flows/flow_trigger'
-						: kind === 'approval'
-						? 'https://www.windmill.dev/docs/flows/flow_approval'
-						: 'https://www.windmill.dev/docs/getting_started/flows_quickstart#flow-editor'}
+							? 'https://www.windmill.dev/docs/flows/flow_trigger'
+							: kind === 'approval'
+								? 'https://www.windmill.dev/docs/flows/flow_approval'
+								: 'https://www.windmill.dev/docs/getting_started/flows_quickstart#flow-editor'}
 				>
 					Embed <span>{kind == 'script' ? 'action' : kind}</span> script directly inside a flow instead
 					of saving the script into your workspace for reuse. You can always save an inline script to
diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
index 48678601ca..147f66ac4b 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
@@ -9,13 +9,11 @@
 	import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
 	import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui'
 	import PickHubScriptQuick from '../pickers/PickHubScriptQuick.svelte'
-	import { type Script, type FlowModule } from '$lib/gen'
+	import { type Script, type ScriptLang, type HubScriptKind } from '$lib/gen'
 	import ListFiltersQuick from '$lib/components/home/ListFiltersQuick.svelte'
 	import { Folder, User } from 'lucide-svelte'
-	import type { FlowCopilotContext, FlowCopilotModule } from '../../copilot/flow'
 	import type { FlowEditorContext } from '../../flows/types'
 	import { copilotInfo } from '$lib/stores'
-	import { nextId } from '../../flows/flowModuleNextId'
 	import { twMerge } from 'tailwind-merge'
 	import { fade } from 'svelte/transition'
 	import { flip } from 'svelte/animate'
@@ -33,8 +31,6 @@
 	export let disableAi = false
 	export let preFilter: 'all' | 'workspace' | 'hub' = 'hub'
 	export let funcDesc: string
-	export let index: number
-	export let modules: FlowModule[]
 	export let owners: string[] = []
 	export let loading = false
 	export let small = false
@@ -43,17 +39,23 @@
 		kind
 	export let displayPath = false
 
-	let lang: FlowCopilotModule['lang'] = undefined
-	let selectedCompletion: FlowCopilotModule['selectedCompletion'] = undefined
+	type HubCompletion = {
+		path: string
+		summary: string
+		id: number
+		version_id: number
+		ask_id: number
+		app: string
+		kind: HubScriptKind
+	}
+
+	let lang: ScriptLang | undefined = undefined
 
 	let filteredWorkspaceItems: (Script & { marked?: string })[] = []
 
-	let hubCompletions: FlowCopilotModule['hubCompletions'] = []
+	let hubCompletions: HubCompletion[] = []
 
-	const { flowStore, flowStateStore, insertButtonOpen } =
-		getContext<FlowEditorContext>('FlowEditorContext')
-	const { modulesStore: copilotModulesStore, genFlow } =
-		getContext<FlowCopilotContext>('FlowCopilotContext')
+	const { insertButtonOpen } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	let selected: { kind: 'owner' | 'integrations'; name: string | undefined } | undefined = undefined
 
@@ -87,28 +89,24 @@
 	}
 
 	async function onGenerate() {
-		if (!selectedCompletion && !$copilotInfo.enabled) {
+		if (!$copilotInfo.enabled) {
 			sendUserToast(
 				'Windmill AI is not enabled, you can activate it in the workspace settings',
 				true
 			)
 			return
 		}
-		$copilotModulesStore = [
-			{
-				id: nextId($flowStateStore, $flowStore),
-				type: selectedKind == 'trigger' ? 'trigger' : 'script',
-				description: funcDesc,
-				code: '',
-				source: selectedCompletion ? 'hub' : 'custom',
-				hubCompletions,
-				selectedCompletion,
-				editor: undefined,
-				lang
+		console.log('ongenerate', selectedKind, lang, funcDesc)
+		dispatch('new', {
+			kind: selectedKind,
+			inlineScript: {
+				language: lang,
+				kind: selectedKind,
+				subkind: 'flow',
+				summary,
+				instructions: funcDesc
 			}
-		]
-		genFlow?.(index, modules, true)
-		dispatch('close')
+		})
 	}
 
 	let openScriptSettings = false
@@ -375,8 +373,8 @@
 									lang == 'docker'
 										? 'docker'
 										: selectedKind == 'preprocessor'
-										? 'preprocessor'
-										: 'flow',
+											? 'preprocessor'
+											: 'flow',
 								summary
 							}
 						})
diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
index 1cb5a95515..ed8945cdf3 100644
--- a/frontend/src/lib/components/flows/content/FlowLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -9,7 +9,7 @@
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 	// import FlowRetries from './FlowRetries.svelte'
-	import { Button, Drawer, Tab, TabContent, Tabs } from '$lib/components/common'
+	import { Button, Drawer, Tab, TabContent } from '$lib/components/common'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { getStepPropPicker } from '../previousResults'
 	import { enterpriseLicense } from '$lib/stores'
@@ -26,40 +26,53 @@
 
 	import PropPickerWrapper, { CONNECT } from '../propPicker/PropPickerWrapper.svelte'
 	import type { PropPickerContext } from '$lib/components/prop_picker'
+	import TabsV2 from '$lib/components/common/tabs/TabsV2.svelte'
 
-	const { previewArgs, flowStateStore, flowStore } =
+	const { previewArgs, flowStateStore, flowStore, currentEditor } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
-	export let mod: FlowModule
-	export let parentModule: FlowModule | undefined
-	export let previousModule: FlowModule | undefined
-	export let noEditor: boolean
-	export let enableAi = false
+	interface Props {
+		mod: FlowModule
+		parentModule: FlowModule | undefined
+		previousModule: FlowModule | undefined
+		noEditor: boolean
+		enableAi?: boolean
+	}
 
-	let editor: SimpleEditor | undefined = undefined
-	let selected: string = 'early-stop'
+	let {
+		mod = $bindable(),
+		parentModule,
+		previousModule,
+		noEditor,
+		enableAi = false
+	}: Props = $props()
+
+	let editor: SimpleEditor | undefined = $state(undefined)
+	let selected: string = $state('early-stop')
 
 	const { flowPropPickerConfig } = getContext<PropPickerContext>('PropPickerContext')
 	flowPropPickerConfig.set(undefined)
 
-	$: stepPropPicker = getStepPropPicker(
-		$flowStateStore,
-		parentModule,
-		previousModule,
-		mod.id,
-		$flowStore,
-		$previewArgs,
-		false
+	let stepPropPicker = $derived(
+		getStepPropPicker(
+			$flowStateStore,
+			parentModule,
+			previousModule,
+			mod.id,
+			flowStore.val,
+			previewArgs.val,
+			false
+		)
 	)
 
-	let previewOpen = false
-	let jobId: string | undefined = undefined
-	let job: Job | undefined = undefined
+	let previewOpen = $state(false)
+	let jobId: string | undefined = $state(undefined)
+	let job: Job | undefined = $state(undefined)
 
-	let iteratorFieldFocused = false
-	let iteratorGen: IteratorGen | undefined = undefined
+	let iteratorFieldFocused = $state(false)
+	let iteratorGen: IteratorGen | undefined = $state(undefined)
 
-	$: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {}
+	let previewIterationArgs = $derived($flowStateStore[mod.id]?.previewArgs ?? {})
 
 	function setExpr(code: string) {
 		if (mod.value.type === 'forloopflow') {
@@ -71,6 +84,10 @@
 		editor?.setCode('')
 		editor?.insertAtCursor(code)
 	}
+
+	$effect(() => {
+		editor && currentEditor.set({ type: 'iterator', editor, stepId: mod.id })
+	})
 </script>
 
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">
@@ -87,27 +104,29 @@
 </Drawer>
 
 <FlowCard {noEditor} title="For loop">
-	<div slot="header" class="grow">
-		<div class="my-2 flex flex-row gap-2 items-center">
-			<div>
-				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
-					Add steps inside the loop and specify an iterator expression that defines the sequence
-					over which your subsequent steps will iterate.
-				</Tooltip>
-			</div>
-			<div class="grow">
-				<input bind:value={mod.summary} placeholder={'Summary'} />
-			</div>
-			<div class="justify-end">
-				<Button
-					on:click={() => (previewOpen = true)}
-					startIcon={{ icon: Play }}
-					color="dark"
-					size="sm">Test an iteration</Button
-				>
+	{#snippet header()}
+		<div class="grow">
+			<div class="my-2 flex flex-row gap-2 items-center">
+				<div>
+					<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
+						Add steps inside the loop and specify an iterator expression that defines the sequence
+						over which your subsequent steps will iterate.
+					</Tooltip>
+				</div>
+				<div class="grow">
+					<input bind:value={mod.summary} placeholder={'Summary'} />
+				</div>
+				<div class="justify-end">
+					<Button
+						on:click={() => (previewOpen = true)}
+						startIcon={{ icon: Play }}
+						color="dark"
+						size="sm">Test an iteration</Button
+					>
+				</div>
 			</div>
 		</div>
-	</div>
+	{/snippet}
 
 	<Splitpanes horizontal class="h-full">
 		<Pane size={50} minSize={20} class="p-4">
@@ -197,11 +216,11 @@
 				</div>
 
 				{#if mod.value.iterator.type == 'javascript'}
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						class="border w-full"
 						id="flow-editor-iterator-expression"
-						on:keyup={iteratorGen?.onKeyUp}
+						onkeyup={iteratorGen?.onKeyUp}
 					>
 						<PropPickerWrapper
 							alwaysOn
@@ -245,7 +264,7 @@
 			{/if}
 		</Pane>
 		<Pane size={40} minSize={20} class="flex flex-col flex-1">
-			<Tabs bind:selected id={`flow-editor-loop-${mod.id}`}>
+			<TabsV2 bind:selected id={`flow-editor-loop-${mod.id}`}>
 				<!-- <Tab value="retries">Retries</Tab> -->
 				<Tab value="early-stop">Early Stop/Break</Tab>
 				<Tab value="skip">Skip</Tab>
@@ -254,13 +273,13 @@
 				<Tab value="mock">Mock</Tab>
 				<Tab value="lifetime">Lifetime</Tab>
 
-				<svelte:fragment slot="content">
+				{#snippet content()}
 					<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
 						<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowRetries bind:flowModule={mod} />
-								</div>
-							</TabContent> -->
+									<div class="p-4 overflow-y-auto">
+										<FlowRetries bind:flowModule={mod} />
+									</div>
+								</TabContent> -->
 
 						<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 							<div class="p-4 overflow-y-auto">
@@ -293,8 +312,8 @@
 							</div>
 						</TabContent>
 					</div>
-				</svelte:fragment>
-			</Tabs>
+				{/snippet}
+			</TabsV2>
 		</Pane>
 	</Splitpanes>
 </FlowCard>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 716c367228..fab7350688 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
 	import { Splitpanes, Pane } from '$lib/components/splitPanes/index'
+	import { createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import Editor from '$lib/components/Editor.svelte'
 	import EditorBar from '$lib/components/EditorBar.svelte'
 	import ModulePreview from '$lib/components/ModulePreview.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
-	import { createScriptFromInlineScript, fork } from '$lib/components/flows/flowStateUtils'
+	import { createScriptFromInlineScript, fork } from '$lib/components/flows/flowStateUtils.svelte'
 
 	import type { FlowModule, RawScript } from '$lib/gen'
 	import FlowCard from '../common/FlowCard.svelte'
 	import FlowModuleHeader from './FlowModuleHeader.svelte'
 	import { getLatestHashForScript, scriptLangToEditorLang } from '$lib/scripts'
 	import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte'
-	import { getContext, tick } from 'svelte'
+	import { getContext, onDestroy, tick, untrack } from 'svelte'
 	import type { FlowEditorContext } from '../types'
 	import FlowModuleScript from './FlowModuleScript.svelte'
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
@@ -39,68 +42,80 @@
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import s3Scripts from './s3Scripts/lib'
-	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
 	import Label from '$lib/components/Label.svelte'
 	import { enterpriseLicense } from '$lib/stores'
 	import { isCloudHosted } from '$lib/cloud'
 	import { loadSchemaFromModule } from '../flowInfers'
-	import { computeFlowStepWarning, initFlowStepWarnings } from '../utils'
-	import { debounce } from '$lib/utils'
-	import { dfs } from '../dfs'
 	import FlowModuleSkip from './FlowModuleSkip.svelte'
 	import { type Job, JobService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { checkIfParentLoop } from '../utils'
 	import ModulePreviewResultViewer from '$lib/components/ModulePreviewResultViewer.svelte'
+	import { aiChatManager } from '$lib/components/copilot/chat/AIChatManager.svelte'
+	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
 
 	const {
 		selectedId,
+		currentEditor,
 		previewArgs,
 		flowStateStore,
 		flowStore,
 		pathStore,
 		saveDraft,
-		flowInputsStore,
 		customUi,
 		executionCount
 	} = getContext<FlowEditorContext>('FlowEditorContext')
 
-	export let flowModule: FlowModule
-	export let failureModule: boolean = false
-	export let preprocessorModule: boolean = false
-	export let parentModule: FlowModule | undefined = undefined
-	export let previousModule: FlowModule | undefined
-	export let scriptKind: 'script' | 'trigger' | 'approval' = 'script'
-	export let scriptTemplate: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' = 'script'
-	export let noEditor: boolean
-	export let enableAi: boolean
-	export let savedModule: FlowModule | undefined = undefined
+	interface Props {
+		flowModule: FlowModule
+		failureModule?: boolean
+		preprocessorModule?: boolean
+		parentModule?: FlowModule | undefined
+		previousModule: FlowModule | undefined
+		scriptKind?: 'script' | 'trigger' | 'approval'
+		scriptTemplate?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell'
+		noEditor: boolean
+		enableAi: boolean
+		savedModule?: FlowModule | undefined
+	}
 
-	let tag: string | undefined = undefined
-	let diffMode = false
+	let {
+		flowModule = $bindable(),
+		failureModule = false,
+		preprocessorModule = false,
+		parentModule = $bindable(),
+		previousModule,
+		scriptKind = 'script',
+		scriptTemplate = 'script',
+		noEditor,
+		enableAi,
+		savedModule = undefined
+	}: Props = $props()
 
-	let editor: Editor
-	let diffEditor: DiffEditor
-	let modulePreview: ModulePreview
-	let websocketAlive = {
+	let tag: string | undefined = $state(undefined)
+	let diffMode = $state(false)
+
+	let editor: Editor | undefined = $state()
+	let diffEditor: DiffEditor | undefined = $state()
+	let modulePreview: ModulePreview | undefined = $state()
+	let websocketAlive = $state({
 		pyright: false,
 		deno: false,
 		go: false,
 		ruff: false,
 		shellcheck: false
-	}
-	let selected = preprocessorModule ? 'test' : 'inputs'
-	let advancedSelected = 'retries'
-	let advancedRuntimeSelected = 'concurrency'
-	let s3Kind = 's3_client'
-	let validCode = true
-	let width = 1200
-	let lastJob: Job | undefined = undefined
-	let testJob: Job | undefined = undefined
-	let testIsLoading = false
-	let scriptProgress = undefined
+	})
+	let selected = $state(preprocessorModule ? 'test' : 'inputs')
+	let advancedSelected = $state('retries')
+	let advancedRuntimeSelected = $state('concurrency')
+	let s3Kind = $state('s3_client')
+	let validCode = $state(true)
+	let width = $state(1200)
+	let lastJob: Job | undefined = $state(undefined)
+	let testJob: Job | undefined = $state(undefined)
+	let testIsLoading = $state(false)
+	let scriptProgress = $state(undefined)
 
-	$: lastDeployedCode = onModulesChange(savedModule, flowModule)
 	function onModulesChange(savedModule: FlowModule | undefined, flowModule: FlowModule) {
 		// console.log('onModulesChange', savedModule, flowModule)
 		return savedModule?.value?.type === 'rawscript' &&
@@ -110,34 +125,6 @@
 			: undefined
 	}
 
-	const { modulesStore: copilotModulesStore } =
-		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
-
-	function setCopilotModuleEditor() {
-		copilotModulesStore?.update((modules) => {
-			const module = modules.find((m) => m.id === flowModule.id)
-			if (module) {
-				module.editor = editor
-			}
-			return modules
-		})
-	}
-
-	$: editor !== undefined && setCopilotModuleEditor()
-
-	$: stepPropPicker =
-		$executionCount != undefined && failureModule
-			? getFailureStepPropPicker($flowStateStore, $flowStore, $previewArgs)
-			: getStepPropPicker(
-					$flowStateStore,
-					parentModule,
-					previousModule,
-					flowModule.id,
-					$flowStore,
-					$previewArgs,
-					false
-				)
-
 	function onKeyDown(event: KeyboardEvent) {
 		if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
 			event.preventDefault()
@@ -145,9 +132,9 @@
 			modulePreview?.runTestWithStepArgs()
 		}
 	}
-	let inputTransformSchemaForm: InputTransformSchemaForm | undefined = undefined
+	let inputTransformSchemaForm: InputTransformSchemaForm | undefined = $state(undefined)
 
-	let reloadError: string | undefined = undefined
+	let reloadError: string | undefined = $state(undefined)
 	async function reload(flowModule: FlowModule) {
 		reloadError = undefined
 		try {
@@ -156,15 +143,6 @@
 
 			if (inputTransformSchemaForm) {
 				inputTransformSchemaForm.setArgs(input_transforms)
-				if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
-					$flowInputsStore[flowModule?.id] = {
-						flowStepWarnings: await initFlowStepWarnings(
-							flowModule.value,
-							schema ?? {},
-							dfs($flowStore.value.modules, (fm) => fm.id)
-						)
-					}
-				}
 			} else {
 				if (
 					flowModule.value.type == 'rawscript' ||
@@ -201,9 +179,9 @@
 		advancedSelected = subtab
 	}
 
-	let forceReload = 0
-
-	$: $selectedId && onSelectedIdChange()
+	let forceReload = $state(0)
+	let editorPanelSize = $state(noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50)
+	let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize))
 
 	function onSelectedIdChange() {
 		if (!$flowStateStore?.[$selectedId]?.schema && flowModule) {
@@ -211,27 +189,6 @@
 		}
 	}
 
-	let debouncedWarning = debounce((argName: string) => {
-		if ($flowInputsStore) {
-			computeFlowStepWarning(
-				argName,
-				flowModule.value,
-				$flowInputsStore[flowModule.id].flowStepWarnings ?? {},
-				$flowStateStore[$selectedId]?.schema,
-				dfs($flowStore?.value?.modules ?? [], (fm) => fm.id) ?? []
-			).then((flowStepWarnings) => {
-				$flowInputsStore[flowModule.id].flowStepWarnings = flowStepWarnings
-			})
-		}
-	}, 100)
-
-	function setFlowInput(argName: string) {
-		if ($flowInputsStore && flowModule.id && $flowInputsStore?.[flowModule.id] === undefined) {
-			$flowInputsStore[flowModule.id] = {}
-		}
-		debouncedWarning(argName)
-	}
-
 	async function getLastJob() {
 		if (
 			!$flowStateStore ||
@@ -251,12 +208,7 @@
 		}
 	}
 
-	$: if ($workspaceStore && $pathStore && flowModule?.id && $flowStateStore) {
-		getLastJob()
-	}
-
-	$: parentLoop =
-		$flowStore && flowModule ? checkIfParentLoop($flowStore, flowModule.id) : undefined
+	let leftPanelSize = $state(0)
 
 	function showDiffMode() {
 		diffMode = true
@@ -272,13 +224,64 @@
 		editor?.show()
 	}
 
-	let panesSizes = [
+	let panesSizes = $derived([
 		noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50,
 		100 - (noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50)
-	]
+	])
+	let lastDeployedCode = $derived(onModulesChange(savedModule, flowModule))
+
+	let stepPropPicker = $derived(
+		$executionCount != undefined && failureModule
+			? getFailureStepPropPicker($flowStateStore, flowStore.val, previewArgs.val)
+			: getStepPropPicker(
+					$flowStateStore,
+					parentModule,
+					previousModule,
+					flowModule.id,
+					flowStore.val,
+					previewArgs.val,
+					false
+				)
+	)
+
+	$effect(() => {
+		$selectedId && untrack(() => onSelectedIdChange())
+	})
+	$effect(() => {
+		if ($workspaceStore && $pathStore && flowModule?.id && $flowStateStore) {
+			untrack(() => getLastJob())
+		}
+	})
+	let parentLoop = $derived(
+		flowStore.val && flowModule ? checkIfParentLoop(flowStore.val, flowModule.id) : undefined
+	)
+	$effect(() => {
+		if (selected === 'test') {
+			leftPanelSize = 50
+		} else {
+			leftPanelSize = 100
+		}
+	})
+
+	$effect(() => {
+		editor &&
+			($currentEditor = {
+				type: 'script',
+				editor,
+				stepId: flowModule.id,
+				showDiffMode,
+				hideDiffMode,
+				diffMode,
+				lastDeployedCode
+			})
+	})
+
+	onDestroy(() => {
+		$currentEditor = undefined
+	})
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 {#if flowModule.value}
 	<div class="h-full" bind:clientWidth={width}>
@@ -296,7 +299,7 @@
 			}}
 			bind:summary={flowModule.summary}
 		>
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<FlowModuleHeader
 					{tag}
 					module={flowModule}
@@ -348,7 +351,7 @@
 						$flowStateStore[module.id] = state
 					}}
 				/>
-			</svelte:fragment>
+			{/snippet}
 
 			<div class="h-full flex flex-col">
 				{#if flowModule.value.type === 'rawscript' && !noEditor}
@@ -386,6 +389,13 @@
 								{#if !noEditor}
 									{#key flowModule.id}
 										<Editor
+											on:addSelectedLinesToAiChat={(e) => {
+												const { lines, startLine, endLine } = e.detail
+												aiChatManager.addSelectedLinesToContext(lines, startLine, endLine)
+											}}
+											on:toggleAiPanel={() => {
+												aiChatManager.toggleOpen()
+											}}
 											loadAsync
 											folding
 											path={$pathStore + '/' + flowModule.id}
@@ -393,13 +403,13 @@
 											bind:this={editor}
 											class="h-full relative"
 											code={flowModule.value.content}
-											lang={scriptLangToEditorLang(flowModule.value.language)}
-											scriptLang={flowModule.value.language}
+											lang={scriptLangToEditorLang(flowModule?.value?.language)}
+											scriptLang={flowModule?.value?.language}
 											automaticLayout={true}
 											cmdEnterAction={async () => {
 												selected = 'test'
 												if ($selectedId == flowModule.id) {
-													if (flowModule.value.type === 'rawscript') {
+													if (flowModule.value.type === 'rawscript' && editor) {
 														flowModule.value.content = editor.getCode()
 													}
 													await reload(flowModule)
@@ -494,13 +504,23 @@
 														pickableProperties={stepPropPicker.pickableProperties}
 														schema={$flowStateStore[$selectedId]?.schema ?? {}}
 														previousModuleId={previousModule?.id}
-														bind:args={flowModule.value.input_transforms}
+														bind:args={
+															() => {
+																// @ts-ignore
+																return flowModule?.value?.input_transforms
+															},
+															(v) => {
+																if (
+																	typeof flowModule?.value === 'object' &&
+																	flowModule?.value !== null
+																) {
+																	// @ts-ignore
+																	flowModule.value.input_transforms = v
+																}
+															}
+														}
 														extraLib={stepPropPicker.extraLib}
 														{enableAi}
-														on:changeArg={(e) => {
-															const { argName } = e.detail
-															setFlowInput(argName)
-														}}
 													/>
 												</PropPickerWrapper>
 											</div>
@@ -556,14 +576,14 @@
 											<div class="h-[calc(100%-32px)] overflow-auto p-4">
 												{#if advancedSelected === 'retries'}
 													<Section label="Retries">
-														<svelte:fragment slot="header">
+														{#snippet header()}
 															<Tooltip
 																documentationLink="https://www.windmill.dev/docs/flows/retries"
 															>
 																If defined, upon error this step will be retried with a delay and a
 																maximum number of attempts as defined below.
 															</Tooltip>
-														</svelte:fragment>
+														{/snippet}
 														<span class="text-2xs"
 															>After all retries attempts have been exhausted:</span
 														>
@@ -587,9 +607,9 @@
 													</Section>
 												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'concurrency'}
 													<Section label="Concurrency limits" class="flex flex-col gap-4" eeOnly>
-														<svelte:fragment slot="header">
+														{#snippet header()}
 															<Tooltip>Allowed concurrency within a given timeframe</Tooltip>
-														</svelte:fragment>
+														{/snippet}
 														{#if flowModule.value.type == 'rawscript'}
 															<Label label="Max number of executions within the time window">
 																<div class="flex flex-row gap-2 max-w-sm">
@@ -619,14 +639,14 @@
 																/>
 															</Label>
 															<Label label="Custom concurrency key (optional)">
-																<svelte:fragment slot="header">
+																{#snippet header()}
 																	<Tooltip>
 																		Concurrency keys are global, you can have them be workspace
 																		specific using the variable `$workspace`. You can also use an
 																		argument's value using `$args[name_of_arg]`</Tooltip
 																	>
-																</svelte:fragment>
-																<!-- svelte-ignore a11y-autofocus -->
+																{/snippet}
+																<!-- svelte-ignore a11y_autofocus -->
 																<input
 																	type="text"
 																	autofocus
@@ -670,16 +690,16 @@
 															}}
 														/>
 														<Label label="Priority number">
-															<svelte:fragment slot="header">
+															{#snippet header()}
 																<Tooltip>The higher the number, the higher the priority.</Tooltip>
-															</svelte:fragment>
+															{/snippet}
 															<input
 																type="number"
 																class="!w-24"
 																disabled={flowModule.priority === undefined}
 																bind:value={flowModule.priority}
-																on:focus
-																on:change={() => {
+																onfocus={bubble('focus')}
+																onchange={() => {
 																	if (flowModule.priority && flowModule.priority > 100) {
 																		flowModule.priority = 100
 																	} else if (flowModule.priority && flowModule.priority < 0) {
@@ -754,26 +774,33 @@
 													</div>
 													<div class="flex gap-2 justify-between mb-4 items-center">
 														<div class="flex gap-2">
-															<ToggleButtonGroup bind:selected={s3Kind} class="w-auto" let:item>
-																{#if flowModule.value['language'] === 'deno'}
-																	<ToggleButton
-																		value="s3_client"
-																		size="sm"
-																		label="S3 lite client"
-																		{item}
-																	/>
-																{:else}
-																	<ToggleButton value="s3_client" size="sm" label="Boto3" {item} />
-																	<ToggleButton value="polars" size="sm" label="Polars" {item} />
-																	<ToggleButton value="duckdb" size="sm" label="DuckDB" {item} />
-																{/if}
+															<ToggleButtonGroup bind:selected={s3Kind} class="w-auto">
+																{#snippet children({ item })}
+																	{#if flowModule.value['language'] === 'deno'}
+																		<ToggleButton
+																			value="s3_client"
+																			size="sm"
+																			label="S3 lite client"
+																			{item}
+																		/>
+																	{:else}
+																		<ToggleButton
+																			value="s3_client"
+																			size="sm"
+																			label="Boto3"
+																			{item}
+																		/>
+																		<ToggleButton value="polars" size="sm" label="Polars" {item} />
+																		<ToggleButton value="duckdb" size="sm" label="DuckDB" {item} />
+																	{/if}
+																{/snippet}
 															</ToggleButtonGroup>
 														</div>
 
 														<Button
 															size="xs"
 															on:click={() =>
-																editor.setCode(s3Scripts[flowModule.value['language']][s3Kind])}
+																editor?.setCode(s3Scripts[flowModule.value['language']][s3Kind])}
 														>
 															Apply snippet
 														</Button>
@@ -796,6 +823,11 @@
 											loopStatus={parentLoop
 												? { type: 'inside', flow: parentLoop.type }
 												: undefined}
+											onUpdateMock={(detail) => {
+												flowModule.mock = detail
+												flowModule = flowModule
+												refreshStateStore(flowStore)
+											}}
 											{lastJob}
 											{scriptProgress}
 											{testJob}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
index 845e8d877b..eb8837a039 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
@@ -4,7 +4,7 @@
 	import PropPickerWrapper from '$lib/components/flows/propPicker/PropPickerWrapper.svelte'
 	import type { Flow, FlowModule } from '$lib/gen'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import type { FlowEditorContext } from '../types'
+	import type { ExtendedOpenFlow, FlowEditorContext } from '../types'
 	import { getContext } from 'svelte'
 	import { NEVER_TESTED_THIS_FAR } from '../models'
 	import Section from '$lib/components/Section.svelte'
@@ -14,21 +14,27 @@
 	const { flowStateStore, flowStore, previewArgs } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
-	export let flowModule: FlowModule
+	interface Props {
+		flowModule: FlowModule
+	}
 
-	let editor: SimpleEditor | undefined = undefined
-	$: stepPropPicker = getStepPropPicker(
-		$flowStateStore,
-		undefined,
-		undefined,
-		flowModule.id,
-		$flowStore,
-		$previewArgs,
-		false
+	let { flowModule = $bindable() }: Props = $props()
+
+	let editor: SimpleEditor | undefined = $state(undefined)
+	let stepPropPicker = $derived(
+		getStepPropPicker(
+			$flowStateStore,
+			undefined,
+			undefined,
+			flowModule.id,
+			flowStore.val,
+			previewArgs.val,
+			false
+		)
 	)
 
-	function checkIfParentLoop(flowStore: typeof $flowStore): string | null {
-		const flow: Flow = JSON.parse(JSON.stringify(flowStore))
+	function checkIfParentLoop(flowStoreValue: ExtendedOpenFlow): string | null {
+		const flow: Flow = JSON.parse(JSON.stringify(flowStoreValue))
 		const parents = dfs(flowModule.id, flow, true)
 		for (const parent of parents.slice(1)) {
 			if (parent.value.type === 'forloopflow' || parent.value.type === 'whileloopflow') {
@@ -37,17 +43,23 @@
 		}
 		return null
 	}
-	let raise_error_message_stop_after_all_if = flowModule.stop_after_all_iters_if?.error_message !== undefined
-	let raise_error_message_stop_after_if = flowModule.stop_after_if?.error_message !== undefined
-	$: isLoop = flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow'
-	$: isBranchAll = flowModule.value.type === 'branchall'
-	$: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if)
-	$: isStopAfterAllIterationsEnabled = Boolean(flowModule.stop_after_all_iters_if)
-	$: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR
-	$: parentLoopId = checkIfParentLoop($flowStore)
+	let raise_error_message_stop_after_all_if = $state(
+		flowModule.stop_after_all_iters_if?.error_message !== undefined
+	)
+	let raise_error_message_stop_after_if = $state(
+		flowModule.stop_after_if?.error_message !== undefined
+	)
+	let isLoop = $derived(
+		flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow'
+	)
+	let isBranchAll = $derived(flowModule.value.type === 'branchall')
+	let isStopAfterIfEnabled = $derived(Boolean(flowModule.stop_after_if))
+	let isStopAfterAllIterationsEnabled = $derived(Boolean(flowModule.stop_after_all_iters_if))
+	let result = $derived($flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR)
+	let parentLoopId = $derived(checkIfParentLoop(flowStore.val))
 </script>
 
-<div class="flex flex-col items-start space-y-2 {$$props.class}">
+<div class="flex flex-col items-start space-y-2">
 	{#if !isBranchAll}
 		<Section
 			label={(isLoop
@@ -57,12 +69,12 @@
 					: 'Stop flow early') + (isLoop ? ' (evaluated after each iteration)' : '')}
 			class="w-full"
 		>
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
 					If defined, at the end of the step, the predicate expression will be evaluated to decide
 					if the flow should stop early or break if inside a for/while loop.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 
 			<Toggle
 				checked={isStopAfterIfEnabled}
@@ -187,12 +199,12 @@
 					: ' (evaluated after all iterations)')}
 			class="w-full"
 		>
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
 					If defined, at the end of the step, the predicate expression will be evaluated to decide
 					if the flow should stop early or break if inside a for/while loop.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 
 			<Toggle
 				checked={isStopAfterAllIterationsEnabled}
@@ -232,7 +244,8 @@
 								bind:checked={raise_error_message_stop_after_all_if}
 								on:change={(event) => {
 									if (flowModule.stop_after_all_iters_if) {
-										flowModule.stop_after_all_iters_if.error_message = event.detail === false ? undefined : ''
+										flowModule.stop_after_all_iters_if.error_message =
+											event.detail === false ? undefined : ''
 									}
 								}}
 								options={{
diff --git a/frontend/src/lib/components/flows/content/FlowModuleMock.svelte b/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
index 96483678f8..14136a694a 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
@@ -1,20 +1,29 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import type { FlowModule } from '$lib/gen'
 	import { Section } from '$lib/components/common'
 	import JsonEditor from '$lib/components/JsonEditor.svelte'
+	import { untrack } from 'svelte'
 
-	export let flowModule: FlowModule
+	interface Props {
+		flowModule: FlowModule
+	}
 
-	let code: string | undefined = flowModule.mock?.return_value
-		? JSON.stringify(flowModule.mock?.return_value, null, 2)
-		: undefined
-	let isMockEnabled: boolean | undefined = Boolean(flowModule.mock?.enabled)
+	let { flowModule = $bindable() }: Props = $props()
+
+	let code: string | undefined = $state(
+		flowModule.mock?.return_value
+			? JSON.stringify(flowModule.mock?.return_value, null, 2)
+			: undefined
+	)
+	let isMockEnabled: boolean | undefined = $state(Boolean(flowModule.mock?.enabled))
 
 	// Track the last value to prevent circular updates
 	let lastMockValue = JSON.stringify(flowModule.mock)
-	let renderCount = 0
+	let renderCount = $state(0)
 
 	function updateMock(
 		newMock: { enabled?: boolean | undefined; return_value?: unknown } | undefined
@@ -31,7 +40,9 @@
 			isMockEnabled = Boolean(newMock?.enabled)
 		}
 	}
-	$: updateMock(flowModule.mock)
+	run(() => {
+		flowModule.mock, untrack(() => updateMock(flowModule.mock))
+	})
 
 	function updateMockValue({ detail }: any) {
 		const newMock = {
@@ -46,7 +57,7 @@
 </script>
 
 <Section label="Mock">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<div class="flex flex-row items-center gap-2">
 			<Tooltip>
 				If defined and enabled, the step will immediately return the mock value instead of being
@@ -71,7 +82,7 @@
 				size="xs"
 			/>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 
 	<div>
 		<span class="text-xs py-1">Mocked Return value</span>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte b/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
index b87f270df0..ba16f3ad73 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
@@ -12,32 +12,38 @@
 	const { flowStateStore, flowStore, previewArgs } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
-	export let flowModule: FlowModule
-	export let parentModule: FlowModule | undefined
-	export let previousModule: FlowModule | undefined
+	interface Props {
+		flowModule: FlowModule
+		parentModule: FlowModule | undefined
+		previousModule: FlowModule | undefined
+	}
 
-	let editor: SimpleEditor | undefined = undefined
-	$: stepPropPicker = getStepPropPicker(
-		$flowStateStore,
-		parentModule,
-		previousModule,
-		flowModule.id,
-		$flowStore,
-		$previewArgs,
-		false
+	let { flowModule = $bindable(), parentModule, previousModule }: Props = $props()
+
+	let editor: SimpleEditor | undefined = $state(undefined)
+	let stepPropPicker = $derived(
+		getStepPropPicker(
+			$flowStateStore,
+			parentModule,
+			previousModule,
+			flowModule.id,
+			flowStore.val,
+			previewArgs.val,
+			false
+		)
 	)
 
-	$: isSkipEnabled = Boolean(flowModule.skip_if)
+	let isSkipEnabled = $derived(Boolean(flowModule.skip_if))
 </script>
 
-<div class="flex flex-col items-start space-y-2 {$$props.class}">
+<div class="flex flex-col items-start space-y-2">
 	<Section label="Skip" class="w-full">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			<Tooltip>
 				If the condition is met, the step will behave as an identity step, passing the previous
 				step's result through unchanged.
 			</Tooltip>
-		</svelte:fragment>
+		{/snippet}
 
 		<Toggle
 			checked={isSkipEnabled}
@@ -55,7 +61,11 @@
 			}}
 		/>
 
-		<div class="w-full border p-2 mt-2 flex flex-col {flowModule.skip_if ? '' : 'bg-surface-secondary'}">
+		<div
+			class="w-full border p-2 mt-2 flex flex-col {flowModule.skip_if
+				? ''
+				: 'bg-surface-secondary'}"
+		>
 			{#if flowModule.skip_if}
 				<span class="mt-2 text-xs font-bold">Skip condition expression</span>
 				<div class="border w-full">
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte b/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
index 3c26574de9..1b5f472dba 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
@@ -25,7 +25,7 @@
 {#if $workerTags}
 	{#if $workerTags?.length > 0}
 		<div class="w-40">
-			{#if $flowStore.tag == undefined}
+			{#if flowStore.val.tag == undefined}
 				<WorkerTagSelect {nullTag} bind:tag on:change={(e) => dispatch('change', e.detail)} />
 			{:else}
 				<button
@@ -33,7 +33,7 @@
 					class="w-full text-left items-center font-normal p-1 py-2 border text-xs rounded"
 					onclick={() => ($selectedId = 'settings-worker-group')}
 				>
-					Flow's WG: {$flowStore.tag}
+					Flow's WG: {flowStore.val.tag}
 				</button>
 			{/if}
 		</div>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
index 32d0cfa707..fa3116631e 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import FlowModuleWrapper from './FlowModuleWrapper.svelte'
 	import { type FlowModule } from '$lib/gen'
 	import { getContext } from 'svelte'
 
@@ -11,36 +12,44 @@
 		createInlineScriptModule,
 		pickFlow,
 		pickScript
-	} from '$lib/components/flows/flowStateUtils'
+	} from '$lib/components/flows/flowStateUtils.svelte'
 	import FlowInputs from './FlowInputs.svelte'
 	import { Alert } from '$lib/components/common'
 	import FlowInputsFlow from './FlowInputsFlow.svelte'
 	import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte'
 	import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte'
 	import FlowWhileLoop from './FlowWhileLoop.svelte'
-	import { initFlowStepWarnings } from '../utils'
-	import { dfs } from '../dfs'
 	import type { TriggerContext } from '$lib/components/triggers'
 	import { formatCron } from '$lib/utils'
 
-	export let flowModule: FlowModule
-	export let noEditor: boolean = false
-	export let enableAi = false
-	export let savedModule: FlowModule | undefined = undefined
-
-	const { selectedId, flowStateStore, flowInputsStore, flowStore } =
-		getContext<FlowEditorContext>('FlowEditorContext')
+	const { selectedId, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	const { triggersState, triggersCount } = getContext<TriggerContext>('TriggerContext')
 
-	let scriptKind: 'script' | 'trigger' | 'approval' = 'script'
-	let scriptTemplate: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' = 'script'
+	let scriptKind: 'script' | 'trigger' | 'approval' = $state('script')
+	let scriptTemplate: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' = $state('script')
 
 	// These pointers are used to easily access previewArgs of parent module, and previous module
-	// Pointer to parent module, only defined within Branches or Loops.
-	export let parentModule: FlowModule | undefined = undefined
-	// Pointer to previous module, for easy access to testing results
-	export let previousModule: FlowModule | undefined = undefined
+
+	interface Props {
+		flowModule: FlowModule
+		noEditor?: boolean
+		enableAi?: boolean
+		savedModule?: FlowModule | undefined
+		// Pointer to parent module, only defined within Branches or Loops.
+		parentModule?: FlowModule | undefined
+		// Pointer to previous module, for easy access to testing results
+		previousModule?: FlowModule | undefined
+	}
+
+	let {
+		flowModule = $bindable(),
+		noEditor = false,
+		enableAi = false,
+		savedModule = undefined,
+		parentModule = $bindable(),
+		previousModule = undefined
+	}: Props = $props()
 
 	function initializePrimaryScheduleForTriggerScript(module: FlowModule) {
 		const primaryIndex = triggersState.triggers.findIndex((t) => t.isPrimary)
@@ -94,16 +103,6 @@
 
 		flowModule = module
 		$flowStateStore[module.id] = state
-
-		if ($flowInputsStore) {
-			$flowInputsStore[module?.id] = {
-				flowStepWarnings: await initFlowStepWarnings(
-					module?.value,
-					$flowStateStore[module?.id]?.schema,
-					dfs($flowStore.value.modules, (fm) => fm.id)
-				)
-			}
-		}
 	}
 </script>
 
@@ -180,16 +179,6 @@
 
 					flowModule = module
 					$flowStateStore[module.id] = state
-
-					if ($flowInputsStore) {
-						$flowInputsStore[module.id] = {
-							flowStepWarnings: await initFlowStepWarnings(
-								module.value,
-								$flowStateStore[module.id].schema,
-								dfs($flowStore.value.modules, (fm) => fm.id)
-							)
-						}
-					}
 				}}
 				failureModule={$selectedId === 'failure'}
 				preprocessorModule={$selectedId === 'preprocessor'}
@@ -211,7 +200,7 @@
 	{/if}
 {:else if flowModule.value.type === 'forloopflow' || flowModule.value.type == 'whileloopflow'}
 	{#each flowModule.value.modules as _, index (index)}
-		<svelte:self
+		<FlowModuleWrapper
 			{noEditor}
 			bind:flowModule={flowModule.value.modules[index]}
 			bind:parentModule={flowModule}
@@ -231,7 +220,7 @@
 		</div>
 	{:else}
 		{#each flowModule.value.default as _, index}
-			<svelte:self
+			<FlowModuleWrapper
 				{noEditor}
 				bind:flowModule={flowModule.value.default[index]}
 				bind:parentModule={flowModule}
@@ -254,7 +243,7 @@
 			/>
 		{:else}
 			{#each branch.modules as _, index}
-				<svelte:self
+				<FlowModuleWrapper
 					{noEditor}
 					bind:flowModule={flowModule.value.branches[branchIndex].modules[index]}
 					bind:parentModule={flowModule}
@@ -273,7 +262,7 @@
 			<FlowBranchAllWrapper {noEditor} bind:branch={flowModule.value.branches[branchIndex]} />
 		{:else}
 			{#each branch.modules as _, index}
-				<svelte:self
+				<FlowModuleWrapper
 					{noEditor}
 					bind:flowModule={flowModule.value.branches[branchIndex].modules[index]}
 					bind:parentModule={flowModule}
diff --git a/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte b/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
index 2351978091..b074b90685 100644
--- a/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
@@ -10,13 +10,10 @@
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 </script>
 
-{#if $flowStore.value.preprocessor_module}
+{#if flowStore.val.value.preprocessor_module}
 	<FlowModuleWrapper
 		{noEditor}
-		bind:flowModule={$flowStore.value.preprocessor_module}
-		on:delete={() => {
-			$flowStore.value.preprocessor_module = undefined
-		}}
+		bind:flowModule={flowStore.val.value.preprocessor_module}
 		previousModule={undefined}
 		{savedModule}
 	/>
diff --git a/frontend/src/lib/components/flows/content/FlowRetries.svelte b/frontend/src/lib/components/flows/content/FlowRetries.svelte
index cce3529ab6..a67ffc2da7 100644
--- a/frontend/src/lib/components/flows/content/FlowRetries.svelte
+++ b/frontend/src/lib/components/flows/content/FlowRetries.svelte
@@ -5,12 +5,17 @@
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import { enterpriseLicense } from '$lib/stores'
 	import { AlertTriangle } from 'lucide-svelte'
+	import { untrack } from 'svelte'
 
-	export let flowModuleRetry: Retry | undefined
-	export let disabled: boolean = false
+	interface Props {
+		flowModuleRetry: Retry | undefined
+		disabled?: boolean
+	}
 
-	let delayType: 'disabled' | 'constant' | 'exponential'
-	let loaded = false
+	let { flowModuleRetry = $bindable(), disabled = false }: Props = $props()
+
+	let delayType = $state() as 'disabled' | 'constant' | 'exponential' | undefined
+	let loaded = $state(false)
 
 	function setConstantRetries() {
 		flowModuleRetry = {
@@ -48,13 +53,17 @@
 		delayType = 'disabled'
 	}
 
-	$: flowModuleRetry === undefined && resetDelayType()
-	$: !loaded && initialLoad()
+	$effect(() => {
+		flowModuleRetry === undefined && resetDelayType()
+	})
+	$effect(() => {
+		!loaded && untrack(() => initialLoad())
+	})
 
 	const u32Max = 4294967295
 </script>
 
-<div class="h-full flex flex-col {$$props.class ?? ''}">
+<div class="h-full flex flex-col">
 	<ToggleButtonGroup
 		bind:selected={delayType}
 		class={`h-10 ${disabled ? 'disabled' : ''}`}
@@ -68,11 +77,12 @@
 				setExponentialRetries()
 			}
 		}}
-		let:item
 	>
-		<ToggleButton light value="disabled" label="Disabled" {item} />
-		<ToggleButton light value="constant" label="Constant" {item} />
-		<ToggleButton light value="exponential" label="Exponential" {item} />
+		{#snippet children({ item })}
+			<ToggleButton light value="disabled" label="Disabled" {item} />
+			<ToggleButton light value="constant" label="Constant" {item} />
+			<ToggleButton light value="exponential" label="Exponential" {item} />
+		{/snippet}
 	</ToggleButtonGroup>
 	<div class="flex h-[calc(100%-22px)]">
 		<div class="w-1/2 h-full overflow-auto pr-2">
@@ -87,7 +97,7 @@
 						/>
 						<button
 							class="text-xs"
-							on:click={() =>
+							onclick={() =>
 								flowModuleRetry?.constant && (flowModuleRetry.constant.attempts = u32Max)}
 							>max</button
 						>
@@ -102,7 +112,7 @@
 						<input max="100" bind:value={flowModuleRetry.exponential.attempts} type="number" />
 						<button
 							class="text-xs"
-							on:click={() =>
+							onclick={() =>
 								flowModuleRetry?.exponential && (flowModuleRetry.exponential.attempts = 100)}
 							>max</button
 						>
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 85b604bf5d..b153a72534 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { run, createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import Path from '$lib/components/Path.svelte'
 	import FlowCard from '../common/FlowCard.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
@@ -18,8 +21,13 @@
 	import MetadataGen from '$lib/components/copilot/MetadataGen.svelte'
 	import Badge from '$lib/components/Badge.svelte'
 	import { AlertTriangle } from 'lucide-svelte'
+	import AIFormSettings from '$lib/components/copilot/AIFormSettings.svelte'
 
-	export let noEditor: boolean
+	interface Props {
+		noEditor: boolean
+	}
+
+	let { noEditor }: Props = $props()
 
 	const { flowStore, initialPathStore, previewArgs, pathStore, customUi } =
 		getContext<FlowEditorContext>('FlowEditorContext')
@@ -27,33 +35,37 @@
 	function asSchema(x: any) {
 		return x as Schema
 	}
-	let path: Path | undefined = undefined
-	let dirtyPath = false
+	let path: Path | undefined = $state(undefined)
+	let dirtyPath = $state(false)
 
-	let displayWorkerTagPicker = false
-	$: $flowStore.tag ? (displayWorkerTagPicker = true) : null
+	let displayWorkerTagPicker = $state(false)
+	run(() => {
+		flowStore.val.tag ? (displayWorkerTagPicker = true) : null
+	})
 
-	$: activeAdvancedOptions = [
+	let activeAdvancedOptions = $derived([
 		{
 			name: 'High Priority',
-			active: $flowStore.value.priority !== undefined && $flowStore.value.priority > 0
+			active: flowStore.val.value.priority !== undefined && flowStore.val.value.priority > 0
 		},
-		{ name: 'Error Handler Muted', active: Boolean($flowStore.ws_error_handler_muted) },
-		{ name: 'Invisible to Others', active: Boolean($flowStore.visible_to_runner_only) },
-		{ name: 'Shared Directory', active: Boolean($flowStore.value.same_worker) },
-		{ name: 'Cache Results', active: Boolean($flowStore.value.cache_ttl) },
-		{ name: 'Early Stop', active: Boolean($flowStore.value.skip_expr) },
-		{ name: 'Early Return', active: Boolean($flowStore.value.early_return) },
-		{ name: 'Dedicated Worker', active: Boolean($flowStore.dedicated_worker) },
-		{ name: 'Concurrent Limit', active: Boolean($flowStore.value.concurrent_limit) },
-		{ name: 'Run on Behalf of Last Editor', active: Boolean($flowStore.on_behalf_of_email) },
+		{ name: 'Error Handler Muted', active: Boolean(flowStore.val.ws_error_handler_muted) },
+		{ name: 'Invisible to Others', active: Boolean(flowStore.val.visible_to_runner_only) },
+		{ name: 'Shared Directory', active: Boolean(flowStore.val.value.same_worker) },
+		{ name: 'Cache Results', active: Boolean(flowStore.val.value.cache_ttl) },
+		{ name: 'Early Stop', active: Boolean(flowStore.val.value.skip_expr) },
+		{ name: 'Early Return', active: Boolean(flowStore.val.value.early_return) },
+		{ name: 'Dedicated Worker', active: Boolean(flowStore.val.dedicated_worker) },
+		{ name: 'Concurrent Limit', active: Boolean(flowStore.val.value.concurrent_limit) },
+		{ name: 'Run on Behalf of Last Editor', active: Boolean(flowStore.val.on_behalf_of_email) },
 		{ name: 'Worker Tag', active: displayWorkerTagPicker }
-	]
+	])
 
-	$: numberOfAdvancedOptionsOn = activeAdvancedOptions.filter((option) => option.active).length
-	$: activeAdvancedOptionNames = activeAdvancedOptions
-		.filter((option) => option.active)
-		.map((option) => option.name)
+	let numberOfAdvancedOptionsOn = $derived(
+		activeAdvancedOptions.filter((option) => option.active).length
+	)
+	let activeAdvancedOptionNames = $derived(
+		activeAdvancedOptions.filter((option) => option.active).map((option) => option.name)
+	)
 </script>
 
 <div class="h-full overflow-y-auto flex flex-col">
@@ -63,13 +75,13 @@
 			<div class="gap-8 flex flex-col">
 				<Label label="Summary">
 					<MetadataGen
-						bind:content={$flowStore.summary}
+						bind:content={flowStore.val.summary}
 						promptConfigName="flowSummary"
-						flow={$flowStore.value}
+						flow={flowStore.val.value}
 						on:change={() => {
-							if ($initialPathStore == '' && $flowStore.summary?.length > 0 && !dirtyPath) {
+							if ($initialPathStore == '' && flowStore.val.summary?.length > 0 && !dirtyPath) {
 								path?.setName(
-									$flowStore.summary
+									flowStore.val.summary
 										.toLowerCase()
 										.replace(/[^a-z0-9_]/g, '_')
 										.replace(/-+/g, '_')
@@ -101,9 +113,9 @@
 
 				<Label label="Description">
 					<MetadataGen
-						bind:content={$flowStore.description}
+						bind:content={flowStore.val.description}
 						promptConfigName="flowDescription"
-						flow={$flowStore.value}
+						flow={flowStore.val.value}
 						class="w-full"
 						elementType="textarea"
 						elementProps={{
@@ -112,6 +124,13 @@
 						}}
 					/>
 				</Label>
+
+				{#if flowStore.val.schema}
+					<AIFormSettings
+						bind:prompt={flowStore.val.schema.prompt_for_ai as string | undefined}
+						type="flow"
+					/>
+				{/if}
 			</div>
 
 			<!-- Deployable Section -->
@@ -132,7 +151,7 @@
 							on:change={() => {
 								displayWorkerTagPicker = !displayWorkerTagPicker
 								if (!displayWorkerTagPicker) {
-									$flowStore.tag = undefined
+									flowStore.val.tag = undefined
 								}
 							}}
 							options={{
@@ -145,7 +164,7 @@
 						/>
 
 						{#if displayWorkerTagPicker}
-							<WorkerTagPicker bind:tag={$flowStore.tag} popupPlacement="top-end" />
+							<WorkerTagPicker bind:tag={flowStore.val.tag} popupPlacement="top-end" />
 						{/if}
 					</div>
 
@@ -157,7 +176,7 @@
 				{/if}
 
 				<!-- Metadata Advanced Section -->
-				<svelte:fragment slot="badge">
+				{#snippet badge()}
 					{#if numberOfAdvancedOptionsOn > 0}
 						<div class="flex grow min-w-0 w-full flex-wrap gap-1 ps-2">
 							{#each activeAdvancedOptionNames as optionName}
@@ -167,7 +186,7 @@
 							{/each}
 						</div>
 					{/if}
-				</svelte:fragment>
+				{/snippet}
 
 				<!-- Cache Section -->
 				{#if customUi?.settingsTabs?.cache != false}
@@ -176,12 +195,12 @@
 							textClass="font-normal text-sm"
 							color="nord"
 							size="xs"
-							checked={Boolean($flowStore.value.cache_ttl)}
+							checked={Boolean(flowStore.val.value.cache_ttl)}
 							on:change={() => {
-								if ($flowStore.value.cache_ttl && $flowStore.value.cache_ttl != undefined) {
-									$flowStore.value.cache_ttl = undefined
+								if (flowStore.val.value.cache_ttl && flowStore.val.value.cache_ttl != undefined) {
+									flowStore.val.value.cache_ttl = undefined
 								} else {
-									$flowStore.value.cache_ttl = 300
+									flowStore.val.value.cache_ttl = 300
 								}
 							}}
 							options={{
@@ -192,12 +211,12 @@
 							}}
 							class="py-1"
 						/>
-						{#if $flowStore.value.cache_ttl}
+						{#if flowStore.val.value.cache_ttl}
 							<div class="flex gap-x-4 flex-col gap-1">
 								<div class="text-sm text-secondary">How long to keep the cache valid</div>
 								<div>
-									{#if $flowStore.value.cache_ttl}
-										<SecondsInput bind:seconds={$flowStore.value.cache_ttl} />
+									{#if flowStore.val.value.cache_ttl}
+										<SecondsInput bind:seconds={flowStore.val.value.cache_ttl} />
 									{:else}
 										<SecondsInput disabled />
 									{/if}
@@ -215,12 +234,12 @@
 							textClass="font-normal text-sm"
 							color="nord"
 							size="xs"
-							checked={Boolean($flowStore.value.skip_expr)}
+							checked={Boolean(flowStore.val.value.skip_expr)}
 							on:change={() => {
-								if (Boolean($flowStore.value.skip_expr) && $flowStore.value.skip_expr) {
-									$flowStore.value.skip_expr = undefined
+								if (Boolean(flowStore.val.value.skip_expr) && flowStore.val.value.skip_expr) {
+									flowStore.val.value.skip_expr = undefined
 								} else {
-									$flowStore.value.skip_expr = 'flow_input.foo == undefined'
+									flowStore.val.value.skip_expr = 'flow_input.foo == undefined'
 								}
 							}}
 							options={{
@@ -233,19 +252,19 @@
 							}}
 							class="py-1"
 						/>
-						{#if $flowStore.value.skip_expr}
+						{#if flowStore.val.value.skip_expr}
 							<div
-								class="w-full border flex flex-col {$flowStore.value.skip_expr
+								class="w-full border flex flex-col {flowStore.val.value.skip_expr
 									? ''
 									: 'bg-surface-secondary'}"
 							>
 								<div class="border w-full">
 									<SimpleEditor
 										lang="javascript"
-										bind:code={$flowStore.value.skip_expr}
+										bind:code={flowStore.val.value.skip_expr}
 										class="small-editor"
 										extraLib={`declare const flow_input = ${JSON.stringify(
-											schemaToObject(asSchema($flowStore.schema), $previewArgs)
+											schemaToObject(asSchema(flowStore.val.schema), previewArgs.val)
 										)};
 									declare const WM_SCHEDULED_FOR: string;`}
 									/>
@@ -268,12 +287,12 @@
 							textClass="font-normal text-sm"
 							color="nord"
 							size="xs"
-							checked={Boolean($flowStore.value.early_return)}
+							checked={Boolean(flowStore.val.value.early_return)}
 							on:change={() => {
-								if (Boolean($flowStore.value.early_return) && $flowStore.value.early_return) {
-									$flowStore.value.early_return = undefined
+								if (Boolean(flowStore.val.value.early_return) && flowStore.val.value.early_return) {
+									flowStore.val.value.early_return = undefined
 								} else {
-									$flowStore.value.early_return = $flowStore.value.modules?.[0]?.id ?? 'a'
+									flowStore.val.value.early_return = flowStore.val.value.modules?.[0]?.id ?? 'a'
 								}
 							}}
 							options={{
@@ -284,20 +303,20 @@
 							}}
 							class="py-1"
 						/>
-						{#if $flowStore.value.early_return}
+						{#if flowStore.val.value.early_return}
 							<div
-								class="max-w-[120px] flex flex-col {$flowStore.value.early_return
+								class="max-w-[120px] flex flex-col {flowStore.val.value.early_return
 									? ''
 									: 'bg-surface-secondary'}"
 							>
 								<select
 									name="oauth_name"
 									id="oauth_name"
-									bind:value={$flowStore.value.early_return}
+									bind:value={flowStore.val.value.early_return}
 									class="text-xs"
 								>
 									<option value={undefined}>Node's id</option>
-									{#each $flowStore.value?.modules?.map((x) => x.id) as name}
+									{#each flowStore.val.value?.modules?.map((x) => x.id) as name}
 										<option value={name}>{name}</option>
 									{/each}
 								</select>
@@ -312,7 +331,7 @@
 						textClass="font-normal text-sm"
 						color="nord"
 						size="xs"
-						bind:checked={$flowStore.value.same_worker}
+						bind:checked={flowStore.val.value.same_worker}
 						options={{
 							right: 'Same Worker + Shared directory on `./shared`',
 							rightTooltip:
@@ -331,12 +350,12 @@
 					textClass="font-normal text-sm"
 					color="nord"
 					size="xs"
-					checked={Boolean($flowStore.visible_to_runner_only)}
+					checked={Boolean(flowStore.val.visible_to_runner_only)}
 					on:change={() => {
-						if ($flowStore.visible_to_runner_only) {
-							$flowStore.visible_to_runner_only = undefined
+						if (flowStore.val.visible_to_runner_only) {
+							flowStore.val.visible_to_runner_only = undefined
 						} else {
-							$flowStore.visible_to_runner_only = true
+							flowStore.val.visible_to_runner_only = true
 						}
 					}}
 					options={{
@@ -354,12 +373,12 @@
 					textClass="font-normal text-sm"
 					color="nord"
 					size="xs"
-					checked={Boolean($flowStore.on_behalf_of_email)}
+					checked={Boolean(flowStore.val.on_behalf_of_email)}
 					on:change={() => {
-						if ($flowStore.on_behalf_of_email) {
-							$flowStore.on_behalf_of_email = undefined
+						if (flowStore.val.on_behalf_of_email) {
+							flowStore.val.on_behalf_of_email = undefined
 						} else {
-							$flowStore.on_behalf_of_email = $userStore?.email
+							flowStore.val.on_behalf_of_email = $userStore?.email
 						}
 					}}
 					options={{
@@ -376,7 +395,7 @@
 						color="nord"
 						kind="flow"
 						scriptOrFlowPath={$pathStore}
-						bind:errorHandlerMuted={$flowStore.ws_error_handler_muted}
+						bind:errorHandlerMuted={flowStore.val.ws_error_handler_muted}
 					/>
 					{#if !$enterpriseLicense}
 						<span
@@ -397,12 +416,12 @@
 								color="nord"
 								size="xs"
 								disabled={!$enterpriseLicense}
-								checked={Boolean($flowStore.value.concurrent_limit)}
+								checked={Boolean(flowStore.val.value.concurrent_limit)}
 								on:change={() => {
-									if ($flowStore.value.concurrent_limit) {
-										$flowStore.value.concurrent_limit = undefined
+									if (flowStore.val.value.concurrent_limit) {
+										flowStore.val.value.concurrent_limit = undefined
 									} else {
-										$flowStore.value.concurrent_limit = 1
+										flowStore.val.value.concurrent_limit = 1
 									}
 								}}
 								options={{
@@ -415,20 +434,20 @@
 							/>
 						</div>
 
-						{#if $flowStore.value.concurrent_limit}
+						{#if flowStore.val.value.concurrent_limit}
 							<div class="flex flex-col gap-4">
 								<Label label="Max number of executions within the time window">
 									<div class="flex flex-row gap-2 max-w-sm">
 										<input
 											disabled={!$enterpriseLicense}
-											bind:value={$flowStore.value.concurrent_limit}
+											bind:value={flowStore.val.value.concurrent_limit}
 											type="number"
 										/>
 										<Button
 											size="sm"
 											color="light"
 											on:click={() => {
-												$flowStore.value.concurrent_limit = undefined
+												flowStore.val.value.concurrent_limit = undefined
 											}}
 											variant="border">Remove Limits</Button
 										>
@@ -437,23 +456,23 @@
 								<Label label="Time window in seconds">
 									<SecondsInput
 										disabled={!$enterpriseLicense}
-										bind:seconds={$flowStore.value.concurrency_time_window_s}
+										bind:seconds={flowStore.val.value.concurrency_time_window_s}
 									/>
 								</Label>
 								<Label label="Custom concurrency key (optional)">
-									<svelte:fragment slot="header">
+									{#snippet header()}
 										<Tooltip>
 											Concurrency keys are global, you can have them be workspace specific using the
 											variable `$workspace`. You can also use an argument's value using
 											`$args[name_of_arg]`</Tooltip
 										>
-									</svelte:fragment>
+									{/snippet}
 									<!-- svelte-ignore a11y_autofocus -->
 									<input
 										type="text"
 										autofocus
 										disabled={!$enterpriseLicense}
-										bind:value={$flowStore.value.concurrency_key}
+										bind:value={flowStore.val.value.concurrency_key}
 										placeholder={`$workspace/script/${$pathStore}-$args[foo]`}
 									/>
 								</Label>
@@ -468,12 +487,12 @@
 					color="nord"
 					size="xs"
 					disabled={!$enterpriseLicense || isCloudHosted()}
-					checked={$flowStore.value.priority !== undefined && $flowStore.value.priority > 0}
+					checked={flowStore.val.value.priority !== undefined && flowStore.val.value.priority > 0}
 					on:change={() => {
-						if ($flowStore.value.priority) {
-							$flowStore.value.priority = undefined
+						if (flowStore.val.value.priority) {
+							flowStore.val.value.priority = undefined
 						} else {
-							$flowStore.value.priority = 100
+							flowStore.val.value.priority = 100
 						}
 					}}
 					options={{
@@ -485,18 +504,18 @@
 					}}
 					class="py-1 relative"
 				>
-					<svelte:fragment slot="right">
+					{#snippet right()}
 						<input
 							type="number"
 							class="!w-16 text-xs ml-4 absolute left-52"
-							disabled={$flowStore.value.priority === undefined}
-							bind:value={$flowStore.value.priority}
-							on:focus
-							on:change={() => {
-								if ($flowStore.value.priority && $flowStore.value.priority > 100) {
-									$flowStore.value.priority = 100
-								} else if ($flowStore.value.priority && $flowStore.value.priority < 0) {
-									$flowStore.value.priority = 0
+							disabled={flowStore.val.value.priority === undefined}
+							bind:value={flowStore.val.value.priority}
+							onfocus={bubble('focus')}
+							onchange={() => {
+								if (flowStore.val.value.priority && flowStore.val.value.priority > 100) {
+									flowStore.val.value.priority = 100
+								} else if (flowStore.val.value.priority && flowStore.val.value.priority < 0) {
+									flowStore.val.value.priority = 0
 								}
 							}}
 						/>
@@ -508,7 +527,7 @@
 								EE only <Tooltip>Enterprise Edition only feature</Tooltip>
 							</span>
 						{/if}
-					</svelte:fragment>
+					{/snippet}
 				</Toggle>
 
 				<div>
@@ -518,12 +537,12 @@
 							color="nord"
 							size="xs"
 							disabled={!$enterpriseLicense || isCloudHosted()}
-							checked={Boolean($flowStore.dedicated_worker)}
+							checked={Boolean(flowStore.val.dedicated_worker)}
 							on:change={() => {
-								if ($flowStore.dedicated_worker) {
-									$flowStore.dedicated_worker = undefined
+								if (flowStore.val.dedicated_worker) {
+									flowStore.val.dedicated_worker = undefined
 								} else {
-									$flowStore.dedicated_worker = true
+									flowStore.val.dedicated_worker = true
 								}
 							}}
 							options={{
@@ -537,7 +556,7 @@
 						/>
 					</div>
 
-					{#if $flowStore.dedicated_worker}
+					{#if flowStore.val.dedicated_worker}
 						<div>
 							<Alert type="info" title="Require dedicated workers">
 								One worker in a worker group needs to be configured with dedicated worker set to: <pre
diff --git a/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte b/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
index 4143e48828..6df6ff38f6 100644
--- a/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
@@ -7,7 +7,7 @@
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 	// import FlowRetries from './FlowRetries.svelte'
-	import { Button, Drawer, Tab, TabContent, Tabs, Alert } from '$lib/components/common'
+	import { Button, Drawer, Tab, TabContent, Alert } from '$lib/components/common'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { enterpriseLicense } from '$lib/stores'
 
@@ -18,21 +18,26 @@
 	import FlowLoopIterationPreview from '$lib/components/FlowLoopIterationPreview.svelte'
 	import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte'
 	import FlowModuleSkip from './FlowModuleSkip.svelte'
+	import TabsV2 from '$lib/components/common/tabs/TabsV2.svelte'
 
 	const { flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
-	export let mod: FlowModule
-	export let previousModule: FlowModule | undefined
-	export let parentModule: FlowModule | undefined
-	export let noEditor: boolean
+	interface Props {
+		mod: FlowModule
+		previousModule: FlowModule | undefined
+		parentModule: FlowModule | undefined
+		noEditor: boolean
+	}
 
-	let selected: string = 'early-stop'
+	let { mod = $bindable(), previousModule, parentModule, noEditor }: Props = $props()
 
-	let previewOpen = false
-	let jobId: string | undefined = undefined
-	let job: Job | undefined = undefined
+	let selected: string = $state('early-stop')
 
-	$: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {}
+	let previewOpen = $state(false)
+	let jobId: string | undefined = $state(undefined)
+	let job: Job | undefined = $state(undefined)
+
+	let previewIterationArgs = $derived($flowStateStore[mod.id]?.previewArgs ?? {})
 </script>
 
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">
@@ -49,9 +54,11 @@
 </Drawer>
 
 <FlowCard {noEditor} title="While loop">
-	<div slot="header" class="grow">
-		<input bind:value={mod.summary} placeholder={'Summary'} />
-	</div>
+	{#snippet header()}
+		<div class="grow">
+			<input bind:value={mod.summary} placeholder={'Summary'} />
+		</div>
+	{/snippet}
 
 	<Splitpanes horizontal class="h-full">
 		<Pane size={50} minSize={20} class="p-4">
@@ -103,7 +110,7 @@
 			{/if}
 		</Pane>
 		<Pane size={40} minSize={20} class="flex flex-col flex-1">
-			<Tabs bind:selected id={`flow-editor-while-loop-${mod.id}`}>
+			<TabsV2 bind:selected id={`flow-editor-while-loop-${mod.id}`}>
 				<!-- <Tab value="retries">Retries</Tab> -->
 				<Tab value="early-stop">Early Stop/Break</Tab>
 				<Tab value="skip">Skip</Tab>
@@ -112,13 +119,13 @@
 				<Tab value="mock">Mock</Tab>
 				<Tab value="lifetime">Lifetime</Tab>
 
-				<svelte:fragment slot="content">
+				{#snippet content()}
 					<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
 						<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowRetries bind:flowModule={mod} />
-								</div>
-							</TabContent> -->
+									<div class="p-4 overflow-y-auto">
+										<FlowRetries bind:flowModule={mod} />
+									</div>
+								</TabContent> -->
 
 						<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 							<div class="p-4 overflow-y-auto">
@@ -153,8 +160,8 @@
 							</div>
 						</TabContent>
 					</div>
-				</svelte:fragment>
-			</Tabs>
+				{/snippet}
+			</TabsV2>
 		</Pane>
 	</Splitpanes>
 </FlowCard>
diff --git a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
index 0b9831a292..be8581a0ff 100644
--- a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
@@ -17,7 +17,7 @@
 	import { fade } from 'svelte/transition'
 	import WorkerTagSelect from '$lib/components/WorkerTagSelect.svelte'
 
-	let scriptEditorDrawer: Drawer
+	let scriptEditorDrawer: Drawer | undefined = $state()
 
 	const dispatch = createEventDispatcher()
 
@@ -28,7 +28,7 @@
 			workspace: $workspaceStore!,
 			hash
 		})
-		savedScript = structuredClone(script)
+		savedScript = structuredClone($state.snapshot(script))
 		callback = cb
 	}
 
@@ -52,7 +52,7 @@
 				no_main_func?: boolean
 				has_preprocessor?: boolean
 		  }
-		| undefined = undefined
+		| undefined = $state(undefined)
 
 	let savedScript:
 		| {
@@ -73,7 +73,7 @@
 				no_main_func?: boolean
 				has_preprocessor?: boolean
 		  }
-		| undefined = undefined
+		| undefined = $state(undefined)
 
 	async function saveScript(): Promise<void> {
 		if (script) {
@@ -100,7 +100,7 @@
 						lock: undefined
 					}
 				})
-				savedScript = structuredClone(script)
+				savedScript = structuredClone($state.snapshot(script))
 				callback?.()
 			} catch (error) {
 				sendUserToast(`Impossible to save the script: ${error.body}`, true)
@@ -108,12 +108,12 @@
 		}
 	}
 
-	let closeAnyway = false
-	let diffDrawer: DiffDrawer
-	let unsavedModalOpen = false
+	let closeAnyway = $state(false)
+	let diffDrawer: DiffDrawer | undefined = $state()
+	let unsavedModalOpen = $state(false)
 	async function checkForUnsavedChanges() {
 		if (closeAnyway) {
-			scriptEditorDrawer.closeDrawer()
+			scriptEditorDrawer?.closeDrawer()
 			closeAnyway = false
 			return
 		}
@@ -123,10 +123,11 @@
 			if (orderedJsonStringify(saved) !== orderedJsonStringify(current)) {
 				unsavedModalOpen = true
 			} else {
-				scriptEditorDrawer.closeDrawer()
+				scriptEditorDrawer?.closeDrawer()
 			}
 		}
 	}
+	let args = $state({})
 </script>
 
 <ConfirmationModal
@@ -139,7 +140,7 @@
 	on:confirmed={() => {
 		unsavedModalOpen = false
 		closeAnyway = true
-		scriptEditorDrawer.closeDrawer()
+		scriptEditorDrawer?.closeDrawer()
 	}}
 >
 	<div class="flex flex-col w-full space-y-4">
@@ -155,9 +156,9 @@
 				}
 				unsavedModalOpen = false
 				closeAnyway = true
-				scriptEditorDrawer.closeDrawer()
+				scriptEditorDrawer?.closeDrawer()
 				diffDrawer?.openDrawer()
-				diffDrawer.setDiff({
+				diffDrawer?.setDiff({
 					title: 'Saved <> Current',
 					mode: 'simple',
 					original: savedScript,
@@ -166,7 +167,7 @@
 						text: 'Close anyway',
 						onClick: () => {
 							closeAnyway = true
-							diffDrawer.closeDrawer()
+							diffDrawer?.closeDrawer()
 						}
 					}
 				})
@@ -191,7 +192,7 @@
 		forceOverflowVisible
 		fullScreen
 		on:close={() => {
-			scriptEditorDrawer.closeDrawer()
+			scriptEditorDrawer?.closeDrawer()
 		}}
 	>
 		{#if script}
@@ -208,8 +209,10 @@
 					fixedOverflowWidgets={false}
 					bind:code={script.content}
 					bind:schema={script.schema}
+					{args}
 				>
-					<div slot="editor-bar-right">
+					<!-- @migration-task: migrate this slot by hand, `editor_bar_right` is an invalid identifier -->
+					<div slot="editor_bar_right">
 						<WorkerTagSelect bind:tag={script.tag} />
 					</div>
 				</ScriptEditor>
@@ -223,7 +226,7 @@
 				<span class="text-xs mt-1">Loading</span>
 			</div>
 		{/if}
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				disabled={!savedScript || !script}
 				color="light"
@@ -233,9 +236,9 @@
 						return
 					}
 					closeAnyway = true
-					scriptEditorDrawer.closeDrawer()
+					scriptEditorDrawer?.closeDrawer()
 					diffDrawer?.openDrawer()
-					diffDrawer.setDiff({
+					diffDrawer?.setDiff({
 						mode: 'simple',
 						original: savedScript,
 						current: script,
@@ -243,8 +246,8 @@
 						button: {
 							text: 'Restore to saved',
 							onClick: () => {
-								script = structuredClone(savedScript)
-								diffDrawer.closeDrawer()
+								script = structuredClone($state.snapshot(savedScript))
+								diffDrawer?.closeDrawer()
 							}
 						}
 					})
@@ -259,14 +262,14 @@
 				on:click={async () => {
 					await saveScript()
 					dispatch('save')
-					scriptEditorDrawer.closeDrawer()
+					scriptEditorDrawer?.closeDrawer()
 				}}
 				disabled={!script}
 				startIcon={{ icon: Save }}
 			>
 				Save
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
 
diff --git a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
index d743feb918..b8f883c561 100644
--- a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
@@ -39,7 +39,7 @@
 					<Tab value="deno">TypeScript (Deno)</Tab>
 					<Tab value="python">Python</Tab>
 
-					<svelte:fragment slot="content">
+					{#snippet content()}
 						<TabContent value="deno" class="p-2">
 							<HighlightCode
 								language={'deno'}
@@ -90,7 +90,7 @@ def main():
                                     `}
 							/>
 						</TabContent>
-					</svelte:fragment>
+					{/snippet}
 				</Tabs>
 			</Section>
 			<Section label="Default args">
diff --git a/frontend/src/lib/components/flows/dfs.ts b/frontend/src/lib/components/flows/dfs.ts
index 8a323949d4..9b68b8b99e 100644
--- a/frontend/src/lib/components/flows/dfs.ts
+++ b/frontend/src/lib/components/flows/dfs.ts
@@ -1,27 +1,29 @@
 import type { FlowModule } from '$lib/gen'
 
-export function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[] {
+export function dfs<T>(
+	modules: FlowModule[],
+	f: (x: FlowModule, modules: FlowModule[], branches: FlowModule[][]) => T
+): T[] {
 	let result: T[] = []
 	for (const module of modules) {
 		if (module.value.type == 'forloopflow' || module.value.type == 'whileloopflow') {
-			result = result.concat(f(module))
+			result = result.concat(f(module, modules, [module.value.modules]))
 			result = result.concat(dfs(module.value.modules, f))
 		} else if (module.value.type == 'branchone') {
-			result = result.concat(f(module))
-			result = result.concat(
-				dfs(
-					module.value.branches
-						.map((b) => b.modules)
-						.flat()
-						.concat(module.value.default),
-					f
-				)
-			)
+			const allBranches = [module.value.default, ...module.value.branches.map((b) => b.modules)]
+			result = result.concat(f(module, modules, allBranches))
+
+			for (const branch of allBranches) {
+				result = result.concat(dfs(branch, f))
+			}
 		} else if (module.value.type == 'branchall') {
-			result = result.concat(f(module))
-			result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat(), f))
+			const allBranches = module.value.branches.map((b) => b.modules)
+			result = result.concat(f(module, modules, allBranches))
+			for (const branch of allBranches) {
+				result = result.concat(dfs(branch, f))
+			}
 		} else {
-			result.push(f(module))
+			result.push(f(module, modules, []))
 		}
 	}
 	return result
diff --git a/frontend/src/lib/components/flows/flowState.ts b/frontend/src/lib/components/flows/flowState.ts
index faa32c6131..490113b1c7 100644
--- a/frontend/src/lib/components/flows/flowState.ts
+++ b/frontend/src/lib/components/flows/flowState.ts
@@ -1,7 +1,7 @@
 import type { Schema } from '$lib/common'
 import type { Flow, FlowModule } from '$lib/gen'
 import type { Writable } from 'svelte/store'
-import { loadFlowModuleState } from './flowStateUtils'
+import { loadFlowModuleState } from './flowStateUtils.svelte'
 import { emptyFlowModuleState } from './utils'
 
 export type FlowModuleState = {
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.svelte.ts
similarity index 88%
rename from frontend/src/lib/components/flows/flowStateUtils.ts
rename to frontend/src/lib/components/flows/flowStateUtils.svelte.ts
index 9c319553d4..19120b7b71 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.svelte.ts
@@ -19,6 +19,7 @@ import { loadSchemaFromModule } from './flowInfers'
 import { nextId } from './flowModuleNextId'
 import { findNextAvailablePath } from '$lib/path'
 import type { ExtendedOpenFlow } from './types'
+import { emptySchema, type StateStore } from '$lib/utils'
 
 export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState> {
 	try {
@@ -296,18 +297,18 @@ export function sliceModules(
 }
 
 export async function insertNewPreprocessorModule(
-	flowStore: Writable<ExtendedOpenFlow>,
+	flowStore: StateStore<ExtendedOpenFlow>,
 	flowStateStore: Writable<FlowState>,
 	inlineScript?: {
 		language: RawScript['language']
 	},
 	wsScript?: { path: string; summary: string; hash: string | undefined }
 ) {
-	var module: FlowModule = {
+	let module: FlowModule = {
 		id: 'preprocessor',
 		value: { type: 'identity' }
 	}
-	var state = emptyFlowModuleState()
+	let state = emptyFlowModuleState()
 
 	if (inlineScript) {
 		;[module, state] = await createInlineScriptModule(
@@ -320,10 +321,45 @@ export async function insertNewPreprocessorModule(
 		;[module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash)
 	}
 
-	flowStore.update((fs) => {
-		fs.value.preprocessor_module = module
-		return fs
+	flowStore.val.value.preprocessor_module = module
+
+	flowStateStore.update((fss) => {
+		fss[module.id] = state
+		return fss
 	})
+}
+
+export async function insertNewFailureModule(
+	flowStore: StateStore<ExtendedOpenFlow>,
+	flowStateStore: Writable<FlowState>,
+	inlineScript?: {
+		language: RawScript['language']
+		subkind: 'pgsql' | 'flow'
+		instructions?: string
+	},
+	wsScript?: { path: string; summary: string; hash: string | undefined }
+) {
+	let module: FlowModule = {
+		id: 'failure',
+		value: { type: 'identity' }
+	}
+	let state: FlowModuleState = {
+		schema: emptySchema(),
+		previewResult: NEVER_TESTED_THIS_FAR
+	}
+
+	if (inlineScript) {
+		;[module, state] = await createInlineScriptModule(
+			inlineScript.language,
+			'failure',
+			inlineScript.subkind,
+			'failure'
+		)
+	} else if (wsScript) {
+		;[module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash)
+	}
+
+	flowStore.val.value.failure_module = module
 
 	flowStateStore.update((fss) => {
 		fss[module.id] = state
diff --git a/frontend/src/lib/components/flows/flowStore.svelte.ts b/frontend/src/lib/components/flows/flowStore.svelte.ts
new file mode 100644
index 0000000000..69d0667819
--- /dev/null
+++ b/frontend/src/lib/components/flows/flowStore.svelte.ts
@@ -0,0 +1,87 @@
+import type { Flow, OpenFlow } from '$lib/gen'
+import { writable, type Writable } from 'svelte/store'
+import { initFlowState, type FlowState } from './flowState'
+import { sendUserToast } from '$lib/toast'
+import type { StateStore } from '$lib/utils'
+
+export type FlowMode = 'push' | 'pull'
+
+export const importFlowStore = writable<Flow | undefined>(undefined)
+
+export async function initFlow(
+	flow: Flow,
+	flowStore: StateStore<Flow>,
+	flowStateStore: Writable<FlowState>
+) {
+	await initFlowState(flow, flowStateStore)
+	flowStore.val = flow
+}
+
+export async function copyFirstStepSchema(
+	flowState: FlowState,
+	flowStore: StateStore<OpenFlow>
+): Promise<void> {
+	const firstModuleId = flowStore.val.value.modules[0]?.id
+
+	if (flowState[firstModuleId] && firstModuleId) {
+		flowStore.val.schema = structuredClone($state.snapshot(flowState[firstModuleId].schema))
+		const v = flowStore.val.value.modules[0].value
+		if (v.type == 'rawscript' || v.type == 'script') {
+			Object.keys(v.input_transforms ?? {}).forEach((key) => {
+				v.input_transforms[key] = {
+					type: 'javascript',
+					expr: `flow_input.${key}`
+				}
+			})
+			return
+		}
+		return sendUserToast('Only scripts can be used as a input schema', true)
+	}
+	return sendUserToast('No first step found', true)
+}
+
+export async function getFirstStepSchema(flowState: FlowState, flow: OpenFlow) {
+	const firstModuleId = flow.value.modules[0]?.id
+
+	if (!firstModuleId || !flowState[firstModuleId]) {
+		throw new Error('no first step found')
+	}
+
+	const schema = structuredClone(flowState[firstModuleId].schema)
+	const v = flow.value.modules[0].value
+
+	if (v.type !== 'rawscript' && v.type !== 'script') {
+		throw new Error('only scripts can be used as a input schema')
+	}
+
+	const simplifiedModule = {
+		id: flow.value.modules[0].id,
+		summary: flow.value.modules[0].summary,
+		value: {
+			type: flow.value.modules[0].value.type,
+			...('path' in flow.value.modules[0].value ? { path: flow.value.modules[0].value.path } : {}),
+			...('language' in flow.value.modules[0].value
+				? { language: flow.value.modules[0].value.language }
+				: {})
+		}
+	}
+
+	return {
+		schema,
+		mod: simplifiedModule,
+		connectFirstNode: () => {
+			Object.keys(v.input_transforms ?? {}).forEach((key) => {
+				v.input_transforms[key] = {
+					type: 'javascript',
+					expr: `flow_input.${key}`
+				}
+			})
+		}
+	}
+}
+
+export function replaceId(expr: string, id: string, newId: string): string {
+	return expr
+		.replaceAll(`results.${id}`, `results.${newId}`)
+		.replaceAll(`results?.${id}`, `results?.${newId}`)
+}
diff --git a/frontend/src/lib/components/flows/flowStore.ts b/frontend/src/lib/components/flows/flowStore.ts
index fedd145266..a429e77d4b 100644
--- a/frontend/src/lib/components/flows/flowStore.ts
+++ b/frontend/src/lib/components/flows/flowStore.ts
@@ -2,7 +2,8 @@ import type { Flow, OpenFlow } from '$lib/gen'
 import { writable, type Writable } from 'svelte/store'
 import { initFlowState, type FlowState } from './flowState'
 import { sendUserToast } from '$lib/toast'
-import { get } from 'svelte/store'
+import type { StateStore } from '$lib/utils'
+import { stateSnapshot } from '$lib/svelte5Utils.svelte'
 
 export type FlowMode = 'push' | 'pull'
 
@@ -10,11 +11,11 @@ export const importFlowStore = writable<Flow | undefined>(undefined)
 
 export async function initFlow(
 	flow: Flow,
-	flowStore: Writable<Flow>,
+	flowStore: StateStore<Flow>,
 	flowStateStore: Writable<FlowState>
 ) {
 	await initFlowState(flow, flowStateStore)
-	flowStore.set(flow)
+	flowStore.val = flow
 }
 
 export async function copyFirstStepSchema(flowState: FlowState, flowStore: Writable<OpenFlow>) {
@@ -22,7 +23,7 @@ export async function copyFirstStepSchema(flowState: FlowState, flowStore: Writa
 		const firstModuleId = flow.value.modules[0]?.id
 
 		if (flowState[firstModuleId] && firstModuleId) {
-			flow.schema = structuredClone(flowState[firstModuleId].schema)
+			flow.schema = structuredClone(stateSnapshot(flowState[firstModuleId].schema))
 			const v = flow.value.modules[0].value
 			if (v.type == 'rawscript' || v.type == 'script') {
 				Object.keys(v.input_transforms ?? {}).forEach((key) => {
@@ -41,15 +42,15 @@ export async function copyFirstStepSchema(flowState: FlowState, flowStore: Writa
 	})
 }
 
-export async function getFirstStepSchema(flowState: FlowState, flowStore: Writable<OpenFlow>) {
-	const flow = get(flowStore)
+export async function getFirstStepSchema(flowState: FlowState, flowStore: StateStore<OpenFlow>) {
+	const flow = flowStore.val
 	const firstModuleId = flow.value.modules[0]?.id
 
 	if (!firstModuleId || !flowState[firstModuleId]) {
 		throw new Error('no first step found')
 	}
 
-	const schema = structuredClone(flowState[firstModuleId].schema)
+	const schema = structuredClone(stateSnapshot(flowState[firstModuleId].schema))
 	const v = flow.value.modules[0].value
 
 	if (v.type !== 'rawscript' && v.type !== 'script') {
diff --git a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
index 7ba42ba4aa..149f2749b4 100644
--- a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
+++ b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
@@ -13,8 +13,8 @@
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
-		{#if $flowStore}
-			<FlowViewer flow={cleanInputs($flowStore)} tab="raw" />
+		{#if flowStore.val}
+			<FlowViewer flow={cleanInputs(flowStore.val)} tab="raw" />
 		{/if}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
index 40fe6150be..f96429af6e 100644
--- a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
+++ b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
@@ -9,6 +9,7 @@
 	import { Button } from '$lib/components/common'
 	import { sendUserToast } from '$lib/toast'
 	import { Loader2 } from 'lucide-svelte'
+	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
 
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -17,34 +18,34 @@
 	let code = ''
 
 	function reload() {
-		code = YAML.stringify(filteredContentForExport($flowStore))
+		code = YAML.stringify(filteredContentForExport(flowStore.val))
 	}
 
 	function apply() {
 		try {
 			const parsed = YAML.parse(code)
 			if (parsed.summary && typeof parsed.summary === 'string') {
-				$flowStore.summary = parsed.summary
+				flowStore.val.summary = parsed.summary
 			}
 			if (parsed.description && typeof parsed.description === 'string') {
-				$flowStore.description = parsed.description
+				flowStore.val.description = parsed.description
 			}
 			if (parsed['ws_error_handler_muted'] !== undefined) {
-				$flowStore.ws_error_handler_muted = parsed['ws_error_handler_muted']
+				flowStore.val.ws_error_handler_muted = parsed['ws_error_handler_muted']
 			}
 			if (parsed['dedicated_worker'] !== undefined) {
-				$flowStore.dedicated_worker = parsed['dedicated_worker']
+				flowStore.val.dedicated_worker = parsed['dedicated_worker']
 			}
 			if (parsed['visible_to_runner_only'] !== undefined) {
-				$flowStore.visible_to_runner_only = parsed['visible_to_runner_only']
+				flowStore.val.visible_to_runner_only = parsed['visible_to_runner_only']
 			}
 			if (parsed['on_behalf_of_email'] !== undefined) {
-				$flowStore.on_behalf_of_email = parsed['on_behalf_of_email']
+				flowStore.val.on_behalf_of_email = parsed['on_behalf_of_email']
 			}
-			$flowStore.value = parsed.value
-			$flowStore.schema = parsed.schema
-			$flowStore.tag = parsed.tag
-			$flowStore = $flowStore
+			flowStore.val.value = parsed.value
+			flowStore.val.schema = parsed.schema
+			flowStore.val.tag = parsed.tag
+			refreshStateStore(flowStore)
 		} catch (e) {
 			sendUserToast('Error parsing yaml: ' + e), true
 		}
@@ -53,12 +54,12 @@
 
 <Drawer on:open={reload} bind:this={drawer} size="800px">
 	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button color="dark" size="sm" on:click={reload}>Reset code</Button>
 			<Button color="dark" size="sm" on:click={apply}>Apply changes</Button>
-		</svelte:fragment>
+		{/snippet}
 
-		{#if $flowStore}
+		{#if flowStore.val}
 			{#await import('../../SimpleEditor.svelte')}
 				<Loader2 class="animate-spin" />
 			{:then Module}
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index f2f755ddb3..8e37d08357 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -1,58 +1,44 @@
 <script lang="ts">
 	import type { FlowEditorContext } from '../types'
-	import { getContext } from 'svelte'
-	import { classNames, emptySchema } from '$lib/utils'
-	import type { FlowModuleState } from '../flowState'
-	import { NEVER_TESTED_THIS_FAR } from '../models'
-	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
-	import { fade } from 'svelte/transition'
+	import { createEventDispatcher, getContext } from 'svelte'
+	import { classNames } from '$lib/utils'
 	import { Bug, X } from 'lucide-svelte'
 	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
-	import { createInlineScriptModule, pickScript } from '$lib/components/flows/flowStateUtils'
-	import type { FlowModule, RawScript } from '$lib/gen'
+	import { insertNewFailureModule } from '$lib/components/flows/flowStateUtils.svelte'
+	import type { RawScript, ScriptLang } from '$lib/gen'
 	import { twMerge } from 'tailwind-merge'
+	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
 
 	export let small: boolean
 
+	const dispatch = createEventDispatcher<{
+		generateStep: { moduleId: string; instructions: string; lang: ScriptLang }
+	}>()
+
 	const { selectedId, flowStateStore, flowStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
-	async function insertNewFailureModule(
+	async function insertFailureModule(
 		inlineScript?: {
 			language: RawScript['language']
 			subkind: 'pgsql' | 'flow'
+			instructions?: string
 		},
 		wsScript?: { path: string; summary: string; hash: string | undefined }
 	) {
-		var module: FlowModule = {
-			id: 'failure',
-			value: { type: 'identity' }
-		}
-		var state: FlowModuleState = {
-			schema: emptySchema(),
-			previewResult: NEVER_TESTED_THIS_FAR
-		}
+		await insertNewFailureModule(flowStore, flowStateStore, inlineScript, wsScript)
 
-		if (inlineScript) {
-			;[module, state] = await createInlineScriptModule(
-				inlineScript.language,
-				'failure',
-				inlineScript.subkind,
-				'failure'
-			)
-		} else if (wsScript) {
-			;[module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash)
+		if (inlineScript?.instructions) {
+			dispatch('generateStep', {
+				moduleId: 'failure',
+				instructions: inlineScript.instructions,
+				lang: inlineScript.language
+			})
 		}
 
-		$flowStore.value.failure_module = module
-		$flowStateStore[module.id] = state
-
 		$selectedId = 'failure'
-		$flowStore = $flowStore
+		refreshStateStore(flowStore)
 	}
-
-	const { currentStepStore: copilotCurrentStepStore } =
-		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -62,48 +48,42 @@
 	id="flow-editor-error-handler"
 	class={classNames(
 		'z-10',
-		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',
-		'border transition-colors duration-[400ms] ease-linear rounded-sm px-2 py-1 gap-2 bg-surface text-sm flex items-center flex-row',
+		'cursor-pointer border transition-colors duration-[400ms] ease-linear rounded-sm px-2 py-1 gap-2 bg-surface text-sm flex items-center flex-row',
 		$selectedId?.includes('failure')
 			? 'outline outline-offset-1 outline-2 outline-slate-900 dark:outline-slate-900/0 dark:bg-surface-secondary dark:border-gray-400'
 			: ''
 	)}
 	style="min-width: {small ? '200px' : '230px'}; max-width: 275px;"
 	on:click={() => {
-		if ($copilotCurrentStepStore !== undefined) return
-		if ($flowStore?.value?.failure_module) {
+		if (flowStore.val?.value?.failure_module) {
 			$selectedId = 'failure'
 		}
 	}}
 >
-	{#if $copilotCurrentStepStore !== undefined}
-		<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900]"></div>
-	{/if}
 	<div class="flex items-center grow-0 min-w-0 gap-2">
-		<Bug size={16} color={$flowStore?.value?.failure_module ? '#3b82f6' : '#9CA3AF'} />
+		<Bug size={16} color={flowStore.val?.value?.failure_module ? '#3b82f6' : '#9CA3AF'} />
 	</div>
 
-	{#if !$flowStore?.value?.failure_module}
+	{#if !flowStore.val?.value?.failure_module}
 		<div class="grow text-center font-bold text-xs">Error Handler</div>
 	{:else}
 		<div class="truncate grow min-w-0 text-center text-xs">
-			{$flowStore.value.failure_module?.summary ||
-				($flowStore.value.failure_module?.value.type === 'rawscript'
-					? `${$flowStore.value.failure_module?.value.language}`
+			{flowStore.val.value.failure_module?.summary ||
+				(flowStore.val.value.failure_module?.value.type === 'rawscript'
+					? `${flowStore.val.value.failure_module?.value.language}`
 					: 'TBD')}
 		</div>
 	{/if}
 
-	{#if !$flowStore?.value?.failure_module}
+	{#if !flowStore.val?.value?.failure_module}
 		<InsertModuleButton
-			disableAi={false}
 			index={0}
 			placement={'top-center'}
 			on:new={(e) => {
-				insertNewFailureModule(e.detail.inlineScript)
+				insertFailureModule(e.detail.inlineScript)
 			}}
 			on:pickScript={(e) => {
-				insertNewFailureModule(undefined, e.detail)
+				insertFailureModule(undefined, e.detail)
 			}}
 			kind="failure"
 		/>
@@ -118,7 +98,7 @@
 				'bg-surface focus:outline-none hover:bg-surface-hover rounded '
 			)}
 			on:click={() => {
-				$flowStore.value.failure_module = undefined
+				flowStore.val.value.failure_module = undefined
 				$selectedId = 'settings-metadata'
 			}}
 		>
diff --git a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
index 45025761d5..558564c06c 100644
--- a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
+++ b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
@@ -1,20 +1,33 @@
 <script lang="ts">
 	import { Menu, Menubar, MenuItem, MeltButton } from '$lib/components/meltComponents'
-	import { createEventDispatcher } from 'svelte'
 	import { ListFilter, Lock, LockOpen } from 'lucide-svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { twMerge } from 'tailwind-merge'
-	import VirtualList from 'svelte-tiny-virtual-list'
+	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list'
+	import type { onSelectedIteration } from '$lib/components/graph/graphBuilder.svelte'
+	import { untrack } from 'svelte'
 
-	const dispatch = createEventDispatcher()
+	interface Props {
+		id: string
+		moduleId: string
+		flowJobs: string[] | undefined
+		flowJobsSuccess: (boolean | undefined)[] | undefined
+		selected: number
+		selectedManually: boolean | undefined
+		onSelectedIteration: onSelectedIteration
+	}
 
-	export let id: string
-	export let flowJobs: string[] | undefined
-	export let flowJobsSuccess: (boolean | undefined)[] | undefined
-	export let selected: number
-	export let selectedManually: boolean | undefined
+	let {
+		id,
+		flowJobs,
+		flowJobsSuccess,
+		selected,
+		selectedManually,
+		onSelectedIteration,
+		moduleId
+	}: Props = $props()
 
-	let filter: number | undefined = undefined
+	let filter: number | undefined = $state(undefined)
 	function onKeydown(event: KeyboardEvent) {
 		if (
 			event.key === 'Enter' &&
@@ -24,19 +37,20 @@
 			filter > 0
 		) {
 			event.preventDefault()
-			dispatch('selectedIteration', {
+			onSelectedIteration({
 				index: filter - 1,
 				id: flowJobs[filter - 1],
-				manuallySet: true
+				manuallySet: true,
+				moduleId: moduleId
 			})
 			menu?.close()
 		}
 	}
 
-	let buttonHover = false
-	let menu: Menu | undefined = undefined
+	let buttonHover = $state(false)
+	let menu: Menu | undefined = $state(undefined)
 
-	let items: { id: string; success: boolean | undefined; index: number }[] = []
+	let items: { id: string; success: boolean | undefined; index: number }[] = $state([])
 	function updateItems() {
 		items = (flowJobs ?? [])
 			.map((v, i) => {
@@ -51,21 +65,23 @@
 			})
 	}
 
-	let isOpen = false
+	let isOpen = $state(false)
 
-	$: isOpen && flowJobs && updateItems()
+	$effect(() => {
+		isOpen && flowJobs && untrack(() => updateItems())
+	})
 </script>
 
 {#if selectedManually && flowJobsSuccess?.some((x) => x == undefined || x == null)}
 	<Popover class="absolute top-1.5 right-12 cursor-pointer">
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			on:mouseenter={() => (buttonHover = true)}
-			on:mouseleave={() => (buttonHover = false)}
-			on:click={(e) => {
+			onmouseenter={() => (buttonHover = true)}
+			onmouseleave={() => (buttonHover = false)}
+			onclick={(e) => {
 				buttonHover = false
-				dispatch('selectedIteration', { manuallySet: false })
+				onSelectedIteration({ manuallySet: false, moduleId: moduleId })
 			}}
 		>
 			{#if buttonHover}
@@ -74,80 +90,90 @@
 				<Lock class="text-primary" size={12} />
 			{/if}
 		</div>
-		<span slot="text">
-			The iteration picked is locked. Click to unlock to pick automatically new iterations.
-		</span>
+		{#snippet text()}
+			<span>
+				The iteration picked is locked. Click to unlock to pick automatically new iterations.
+			</span>
+		{/snippet}
 	</Popover>
 {/if}
 
-<Menubar let:createMenu>
-	<Menu
-		on:open={() => {
-			isOpen = true
-			updateItems()
-		}}
-		on:close={() => {
-			isOpen = false
-		}}
-		{createMenu}
-		let:item
-		placement="bottom"
-		bind:this={menu}
-		usePointerDownOutside
-	>
-		<svelte:fragment slot="trigger" let:trigger>
-			<MeltButton
-				title="Pick an iteration"
-				id={`flow-editor-iteration picker-${id}`}
-				type="button"
-				class={twMerge(
-					'text-xs bg-surface border-[1px] border-gray-300 dark:border-gray-500 focus:outline-none',
-					'hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-sm w-[40px] gap-1 h-[20px]',
-					'flex items-center justify-center',
-					flowJobsSuccess?.[selected] == false ? 'text-red-400' : 'text-secondary'
-				)}
-				meltElement={trigger}
-			>
-				#{selected == -1 ? '?' : selected + 1}
-				<ListFilter size={15} />
-			</MeltButton>
-		</svelte:fragment>
+<Menubar>
+	{#snippet children({ createMenu })}
+		<Menu
+			on:open={() => {
+				isOpen = true
+				updateItems()
+			}}
+			on:close={() => {
+				isOpen = false
+			}}
+			{createMenu}
+			placement="bottom"
+			bind:this={menu}
+			usePointerDownOutside
+		>
+			{#snippet triggr({ trigger })}
+				<MeltButton
+					title="Pick an iteration"
+					id={`flow-editor-iteration picker-${id}`}
+					type="button"
+					class={twMerge(
+						'text-xs bg-surface border-[1px] border-gray-300 dark:border-gray-500 focus:outline-none',
+						'hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-sm w-[40px] gap-1 h-[20px]',
+						'flex items-center justify-center',
+						flowJobsSuccess?.[selected] == false ? 'text-red-400' : 'text-secondary'
+					)}
+					meltElement={trigger}
+				>
+					#{selected == -1 ? '?' : selected + 1}
+					<ListFilter size={15} />
+				</MeltButton>
+			{/snippet}
 
-		<div class="flex flex-col px-1">
-			<input type="number" bind:value={filter} on:keydown={onKeydown} />
+			{#snippet children({ item })}
+				<div class="flex flex-col px-1">
+					<input type="number" bind:value={filter} onkeydown={onKeydown} />
 
-			<div class="max-h-[300px]">
-				{#key items}
-					<VirtualList height={300} width="100%" itemCount={items.length} itemSize={24}>
-						<div slot="item" let:index={idx} let:style {style}>
-							<MenuItem
-								class={twMerge(
-									'text-primary text-xs w-full text-left py-1 pl-2 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center',
-									items[idx].success == false ? 'text-red-400' : '',
-									'data-[highlighted]:bg-surface-hover'
-								)}
-								on:click={() => {
-									dispatch('selectedIteration', {
-										index: items[idx].index,
-										id: items[idx].id,
-										manuallySet: true
-									})
-									menu?.close()
-								}}
-								{item}
-							>
-								#{items[idx].index + 1}
-							</MenuItem>
-						</div>
-					</VirtualList>
-				{/key}
+					<div class="max-h-[300px]">
+						{#key items}
+							<VirtualList height={300} width="100%" itemCount={items.length} itemSize={24}>
+								{#snippet header()}{/snippet}
+								{#snippet footer()}{/snippet}
+								{#snippet children({ index: idx, style })}
+									<div {style}>
+										<MenuItem
+											class={twMerge(
+												'text-primary text-xs w-full text-left py-1 pl-2 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center',
+												items[idx].success == false ? 'text-red-400' : '',
+												'data-[highlighted]:bg-surface-hover'
+											)}
+											on:click={() => {
+												onSelectedIteration({
+													moduleId: moduleId,
+													index: items[idx].index,
+													id: items[idx].id,
+													manuallySet: true
+												})
+												menu?.close()
+											}}
+											{item}
+										>
+											#{items[idx].index + 1}
+										</MenuItem>
+									</div>
+								{/snippet}
+							</VirtualList>
+						{/key}
 
-				<!-- {#each flowJobs ?? [] as id, idx (id)}
-						{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
+						<!-- {#each flowJobs ?? [] as id, idx (id)}
+								{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
 
-						{/if}
-					{/each} -->
-			</div>
-		</div></Menu
-	>
+								{/if}
+							{/each} -->
+					</div>
+				</div>
+			{/snippet}
+		</Menu>
+	{/snippet}
 </Menubar>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 64358cc7a6..e0f8e3e17b 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import Popover from '$lib/components/Popover.svelte'
 	import { classNames } from '$lib/utils'
 	import {
@@ -15,56 +16,85 @@
 		Pin,
 		X
 	} from 'lucide-svelte'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import type { FlowEditorContext, FlowInput } from '../types'
-	import { get, type Writable } from 'svelte/store'
+	import { type Writable } from 'svelte/store'
 	import { twMerge } from 'tailwind-merge'
 	import IdEditorInput from '$lib/components/IdEditorInput.svelte'
 	import { dfs } from '../dfs'
 	import { Drawer } from '$lib/components/common'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import { getDependeeAndDependentComponents } from '../flowExplorer'
-	import { replaceId } from '../flowStore'
+	import { replaceId } from '../flowStore.svelte'
 	import FlowModuleSchemaItemViewer from './FlowModuleSchemaItemViewer.svelte'
 	import type { PropPickerContext } from '$lib/components/prop_picker'
 	import OutputPicker from '$lib/components/flows/propPicker/OutputPicker.svelte'
 	import OutputPickerInner from '$lib/components/flows/propPicker/OutputPickerInner.svelte'
-	import { useSvelteFlow } from '@xyflow/svelte'
 	import type { FlowState } from '$lib/components/flows/flowState'
 
-	export let selected: boolean = false
-	export let deletable: boolean = false
-	export let retry: boolean = false
-	export let cache: boolean = false
-	export let earlyStop: boolean = false
-	export let skip: boolean = false
-	export let suspend: boolean = false
-	export let sleep: boolean = false
-	export let mock:
-		| {
-				enabled?: boolean
-				return_value?: unknown
-		  }
-		| undefined = { enabled: false }
-	export let bold: boolean = false
-	export let id: string | undefined = undefined
-	export let label: string
-	export let path: string = ''
-	export let modType: string | undefined = undefined
-	export let bgColor: string = ''
-	export let bgHoverColor: string = ''
-	export let concurrency: boolean = false
-	export let retries: number | undefined = undefined
-	export let warningMessage: string | undefined = undefined
-	export let isTrigger: boolean = false
-	export let editMode: boolean = false
-	export let alwaysShowOutputPicker: boolean = false
-	export let loopStatus:
-		| { type: 'inside' | 'self'; flow: 'forloopflow' | 'whileloopflow' }
-		| undefined = undefined
+	interface Props {
+		selected?: boolean
+		deletable?: boolean
+		retry?: boolean
+		cache?: boolean
+		earlyStop?: boolean
+		skip?: boolean
+		suspend?: boolean
+		sleep?: boolean
+		mock?:
+			| {
+					enabled?: boolean
+					return_value?: unknown
+			  }
+			| undefined
+		bold?: boolean
+		id?: string | undefined
+		label: string
+		path?: string
+		modType?: string | undefined
+		bgColor?: string
+		bgHoverColor?: string
+		concurrency?: boolean
+		retries?: number | undefined
+		warningMessage?: string | undefined
+		isTrigger?: boolean
+		editMode?: boolean
+		alwaysShowOutputPicker?: boolean
+		loopStatus?: { type: 'inside' | 'self'; flow: 'forloopflow' | 'whileloopflow' } | undefined
+		icon?: import('svelte').Snippet
+		onUpdateMock?: (mock: { enabled: boolean; return_value?: unknown }) => void
+	}
 
-	let pickableIds: Record<string, any> | undefined = undefined
+	let {
+		selected = false,
+		deletable = false,
+		retry = false,
+		cache = false,
+		earlyStop = false,
+		skip = false,
+		suspend = false,
+		sleep = false,
+		mock = { enabled: false },
+		bold = false,
+		id = undefined,
+		label,
+		path = '',
+		modType = undefined,
+		bgColor = '',
+		bgHoverColor = '',
+		concurrency = false,
+		retries = undefined,
+		warningMessage = undefined,
+		isTrigger = false,
+		editMode = false,
+		alwaysShowOutputPicker = false,
+		loopStatus = undefined,
+		icon,
+		onUpdateMock
+	}: Props = $props()
+
+	let pickableIds: Record<string, any> | undefined = $state(undefined)
 
 	const { flowInputsStore } = getContext<{ flowInputsStore: Writable<FlowInput | undefined> }>(
 		'FlowGraphContext'
@@ -74,29 +104,25 @@
 
 	const dispatch = createEventDispatcher()
 
-	const { currentStepStore: copilotCurrentStepStore } =
-		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
-
 	const propPickerContext = getContext<PropPickerContext>('PropPickerContext')
 	const flowPropPickerConfig = propPickerContext?.flowPropPickerConfig
 	const pickablePropertiesFiltered = propPickerContext?.pickablePropertiesFiltered
 
-	$: pickableIds = $pickablePropertiesFiltered?.priorIds
+	$effect(() => {
+		pickableIds = $pickablePropertiesFiltered?.priorIds
+	})
 
-	let editId = false
+	let editId = $state(false)
 
-	let newId: string = id ?? ''
+	let newId: string = $state(id ?? '')
 
-	let hover = false
-	let outputPickerInner: OutputPickerInner | undefined = undefined
-	let connectingData: any | undefined = undefined
-	let lastJob: any | undefined = undefined
-	let outputPicker: OutputPicker | undefined = undefined
-	let historyOpen = false
+	let hover = $state(false)
+	let connectingData: any | undefined = $state(undefined)
+	let lastJob: any | undefined = $state(undefined)
+	let outputPicker: OutputPicker | undefined = $state(undefined)
+	let historyOpen = $state(false)
 
-	const { viewport } = useSvelteFlow()
-
-	$: flowStateStore = flowEditorContext?.flowStateStore
+	let flowStateStore = $derived(flowEditorContext?.flowStateStore)
 
 	function updateConnectingData(
 		id: string | undefined,
@@ -110,7 +136,10 @@
 				? pickableIds[id]
 				: (flowStateStore?.[id]?.previewResult ?? {})
 	}
-	$: updateConnectingData(id, pickableIds, $flowPropPickerConfig, $flowStateStore)
+	$effect(() => {
+		const args = [id, pickableIds, $flowPropPickerConfig, $flowStateStore] as const
+		untrack(() => updateConnectingData(...args))
+	})
 
 	function updateLastJob(flowStateStore: any | undefined) {
 		if (!flowStateStore || !id || flowStateStore[id]?.previewResult === 'never tested this far') {
@@ -125,21 +154,23 @@
 		}
 	}
 
-	$: flowStateStore && updateLastJob($flowStateStore)
-	$: outputPickerInner &&
-		typeof outputPickerInner.setLastJob === 'function' &&
-		outputPickerInner.setLastJob(lastJob)
+	$effect(() => {
+		flowStateStore && $flowStateStore && untrack(() => updateLastJob($flowStateStore))
+	})
 
-	$: isConnectingCandidate =
+	let isConnectingCandidate = $derived(
 		!!id && !!$flowPropPickerConfig && !!pickableIds && Object.keys(pickableIds).includes(id)
+	)
+
+	const icon_render = $derived(icon)
 </script>
 
 {#if deletable && id && editId}
-	{@const flowStore = flowEditorContext?.flowStore ? get(flowEditorContext?.flowStore) : undefined}
+	{@const flowStore = flowEditorContext?.flowStore ?? undefined}
 	{@const getDeps = getDependeeAndDependentComponents(
 		id,
-		flowStore?.value.modules ?? [],
-		flowStore?.value.failure_module
+		flowStore?.val?.value.modules ?? [],
+		flowStore?.val?.value.failure_module
 	)}
 	<Drawer bind:open={editId}>
 		<DrawerContent title="Edit Step Id {id}" on:close={() => (editId = false)}>
@@ -150,7 +181,7 @@
 					label=""
 					initialId={id}
 					acceptUnderScores
-					reservedIds={dfs(flowStore?.value.modules ?? [], (x) => x.id)}
+					reservedIds={dfs(flowStore?.val?.value.modules ?? [], (x) => x.id)}
 					bind:value={newId}
 					on:save={(e) => {
 						dispatch('changeId', { id, newId: e.detail, deps: getDeps?.dependents ?? {} })
@@ -192,21 +223,20 @@
 	</Drawer>
 {/if}
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={classNames(
 		'w-full module flex rounded-sm cursor-pointer max-w-full outline-offset-0 outline-slate-500 dark:outline-gray-400',
 		selected ? 'outline outline-2' : 'active:outline active:outline-2',
-		'flex relative',
-		$copilotCurrentStepStore === id ? 'z-[901]' : ''
+		'flex relative'
 	)}
 	style="width: 275px; height: 38px; background-color: {hover && bgHoverColor
 		? bgHoverColor
 		: bgColor};"
-	on:mouseenter={() => (hover = true)}
-	on:mouseleave={() => (hover = false)}
-	on:pointerdown|preventDefault|stopPropagation={() => dispatch('pointerdown')}
+	onmouseenter={() => (hover = true)}
+	onmouseleave={() => (hover = false)}
+	onpointerdown={stopPropagation(preventDefault(() => dispatch('pointerdown')))}
 >
 	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
 		{#if retry}
@@ -218,7 +248,9 @@
 					{#if retries}<span class="text-red-400 mr-2">{retries}</span>{/if}
 					<Repeat size={12} />
 				</div>
-				<svelte:fragment slot="text">Retries</svelte:fragment>
+				{#snippet text()}
+					Retries
+				{/snippet}
 			</Popover>
 		{/if}
 
@@ -230,7 +262,9 @@
 				>
 					<Gauge size={12} />
 				</div>
-				<svelte:fragment slot="text">Concurrency Limits</svelte:fragment>
+				{#snippet text()}
+					Concurrency Limits
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if cache}
@@ -241,7 +275,9 @@
 				>
 					<Database size={12} />
 				</div>
-				<svelte:fragment slot="text">Cached</svelte:fragment>
+				{#snippet text()}
+					Cached
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if earlyStop}
@@ -252,11 +288,9 @@
 				>
 					<Square size={12} />
 				</div>
-				<svelte:fragment slot="text"
-					>{isTrigger
-						? 'Stop early if there are no new events'
-						: 'Early stop/break'}</svelte:fragment
-				>
+				{#snippet text()}
+					{isTrigger ? 'Stop early if there are no new events' : 'Early stop/break'}
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if skip}
@@ -267,7 +301,9 @@
 				>
 					<SkipForward size={12} />
 				</div>
-				<svelte:fragment slot="text">Skip</svelte:fragment>
+				{#snippet text()}
+					Skip
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if suspend}
@@ -278,7 +314,9 @@
 				>
 					<PhoneIncoming size={12} />
 				</div>
-				<svelte:fragment slot="text">Suspend</svelte:fragment>
+				{#snippet text()}
+					Suspend
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if sleep}
@@ -289,7 +327,9 @@
 				>
 					<Bed size={12} />
 				</div>
-				<svelte:fragment slot="text">Sleep</svelte:fragment>
+				{#snippet text()}
+					Sleep
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if mock?.enabled}
@@ -297,53 +337,53 @@
 				<button
 					transition:fade|local={{ duration: 200 }}
 					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
-					on:click={() => {
+					onclick={() => {
 						outputPicker?.toggleOpen()
 					}}
 					data-popover
 				>
 					<Pin size={12} />
 				</button>
-				<svelte:fragment slot="text">Pinned</svelte:fragment>
+				{#snippet text()}
+					Pinned
+				{/snippet}
 			</Popover>
 		{/if}
 	</div>
 
 	<div class="flex flex-col w-full">
 		<FlowModuleSchemaItemViewer {label} {path} {id} {deletable} {bold} bind:editId {hover}>
-			<svelte:fragment slot="icon">
-				<slot name="icon" />
-			</svelte:fragment>
+			{#snippet icon()}
+				{@render icon_render?.()}
+			{/snippet}
 		</FlowModuleSchemaItemViewer>
 
 		{#if editMode && (isConnectingCandidate || alwaysShowOutputPicker)}
 			<OutputPicker
 				bind:this={outputPicker}
-				zoom={$viewport?.zoom ?? 1}
 				{selected}
 				{hover}
-				let:allowCopy
 				{isConnectingCandidate}
-				let:isConnecting
-				let:selectConnection
 				{historyOpen}
 			>
-				<OutputPickerInner
-					bind:this={outputPickerInner}
-					{allowCopy}
-					prefix={'results'}
-					connectingData={isConnecting ? connectingData : undefined}
-					{mock}
-					on:select={selectConnection}
-					moduleId={id}
-					on:updateMock
-					{path}
-					{loopStatus}
-					rightMargin
-					bind:derivedHistoryOpen={historyOpen}
-					historyOffset={{ mainAxis: 12, crossAxis: -9 }}
-					class="p-1"
-				/>
+				{#snippet children({ allowCopy, isConnecting, selectConnection })}
+					<OutputPickerInner
+						{allowCopy}
+						prefix={'results'}
+						connectingData={isConnecting ? connectingData : undefined}
+						{mock}
+						{lastJob}
+						onSelect={selectConnection}
+						moduleId={id}
+						{onUpdateMock}
+						{path}
+						{loopStatus}
+						rightMargin
+						bind:derivedHistoryOpen={historyOpen}
+						historyOffset={{ mainAxis: 12, crossAxis: -9 }}
+						clazz="p-1"
+					/>
+				{/snippet}
 			</OutputPicker>
 		{/if}
 	</div>
@@ -354,8 +394,9 @@
 	outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-red-400 hover:text-white
 	 {hover || selected ? '' : '!hidden'}"
 			title="Delete"
-			on:click|preventDefault|stopPropagation={(event) =>
-				dispatch('delete', { event, id, type: modType })}
+			onclick={stopPropagation(
+				preventDefault((event) => dispatch('delete', { id, type: modType }))
+			)}
 		>
 			<X class="mx-[3px]" size={12} strokeWidth={2} />
 		</button>
@@ -365,7 +406,7 @@
 				class="absolute -top-[10px] right-[60px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
 outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-blue-400 hover:text-white
  {hover ? '' : '!hidden'}"
-				on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
+				onclick={stopPropagation(preventDefault((event) => dispatch('move')))}
 				title="Move"
 			>
 				<Move class="mx-[3px]" size={12} strokeWidth={2} />
@@ -375,7 +416,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 		{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}
 			<div class="absolute -top-[10px] -left-[10px]">
 				<Popover>
-					<svelte:fragment slot="text">
+					{#snippet text()}
 						<ul class="list-disc px-2">
 							{#if id}
 								{#each Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}) as m}
@@ -385,7 +426,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 								{/each}
 							{/if}
 						</ul>
-					</svelte:fragment>
+					{/snippet}
 					<div
 						class={twMerge(
 							'flex items-center justify-center h-full w-full rounded-md p-0.5 border  duration-0 ',
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte
index 946ad4121f..fa130c77d7 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte
@@ -1,28 +1,46 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import Popover from '$lib/components/Popover.svelte'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import { Pencil } from 'lucide-svelte'
 
-	let iconWidth: number = 0
-	let idBadgeWidth: number | undefined = undefined
-	export let label: string = ''
-	export let path: string = ''
-	export let id: string = ''
-	export let deletable: boolean = false
-	export let bold: boolean = false
-	export let editId: boolean = false
-	export let hover: boolean = false
+	let iconWidth: number = $state(0)
+	let idBadgeWidth: number | undefined = $state(undefined)
+	interface Props {
+		label?: string
+		path?: string
+		id?: string
+		deletable?: boolean
+		bold?: boolean
+		editId?: boolean
+		hover?: boolean
+		icon?: import('svelte').Snippet
+		onclick?: () => void
+	}
 
-	$: marginLeft = Math.max(iconWidth ?? 0, idBadgeWidth ?? 0) * 2 + 32
+	let {
+		label = '',
+		path = '',
+		id = '',
+		deletable = false,
+		bold = false,
+		editId = $bindable(false),
+		hover = false,
+		icon,
+		onclick
+	}: Props = $props()
+
+	let marginLeft = $derived(Math.max(iconWidth ?? 0, idBadgeWidth ?? 0) * 2 + 32)
 </script>
 
 <div
 	class="relative flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 	 p-2 text-2xs module text-primary"
 >
-	{#if $$slots.icon && true}
+	{#if icon && true}
 		<div class="flex-none" bind:clientWidth={iconWidth}>
-			<slot name="icon" />
+			{@render icon?.()}
 		</div>
 	{/if}
 
@@ -33,12 +51,12 @@
 		<div class="text-center truncate {bold ? '!font-bold' : 'font-normal'}">
 			{label}
 		</div>
-		<svelte:fragment slot="text">
+		{#snippet text()}
 			<div>
 				<div>{label}</div>
 				{#if path != ''}<div>{path}</div>{/if}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</Popover>
 
 	<div class="flex items-center space-x-2 relative max-w-[25%]" bind:clientWidth={idBadgeWidth}>
@@ -57,7 +75,12 @@
 						? '!bg-blue-400'
 						: ''} hover:text-white
 hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
-					on:click|preventDefault|stopPropagation={(event) => (editId = !editId)}
+					onclick={stopPropagation(
+						preventDefault((event) => {
+							editId = !editId
+							onclick?.()
+						})
+					)}
 					title="Edit Id"><Pencil size={14} /></button
 				>
 			{/if}
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 6bf5b11e85..5c30d25c60 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -12,9 +12,9 @@
 		pickScript,
 		pickFlow,
 		insertNewPreprocessorModule
-	} from '$lib/components/flows/flowStateUtils'
-	import type { FlowModule, RawScript, Script } from '$lib/gen'
-	import { emptyFlowModuleState, initFlowStepWarnings } from '../utils'
+	} from '$lib/components/flows/flowStateUtils.svelte'
+	import type { FlowModule, ScriptLang } from '$lib/gen'
+	import { emptyFlowModuleState } from '../utils'
 	import FlowSettingsItem from './FlowSettingsItem.svelte'
 	import FlowConstantsItem from './FlowConstantsItem.svelte'
 
@@ -25,30 +25,43 @@
 	import Portal from '$lib/components/Portal.svelte'
 
 	import { getDependentComponents } from '../flowExplorer'
-	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
-	import { fade } from 'svelte/transition'
 	import { copilotInfo, tutorialsToDo, workspaceStore } from '$lib/stores'
 
 	import FlowTutorials from '$lib/components/FlowTutorials.svelte'
 	import { ignoredTutorials } from '$lib/components/tutorials/ignoredTutorials'
 	import { tutorialInProgress } from '$lib/tutorialUtils'
 	import FlowGraphV2 from '$lib/components/graph/FlowGraphV2.svelte'
-	import { replaceId } from '../flowStore'
+	import { replaceId } from '../flowStore.svelte'
 	import { setScheduledPollSchedule, type TriggerContext } from '$lib/components/triggers'
 	import type { PropPickerContext } from '$lib/components/prop_picker'
 	import { JobService } from '$lib/gen'
+	import { dfsByModule } from '../previousResults'
+	import type { InlineScript, InsertKind } from '$lib/components/graph/graphBuilder.svelte'
+	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
 
-	export let modules: FlowModule[] | undefined
-	export let sidebarSize: number | undefined = undefined
-	export let disableStaticInputs = false
-	export let disableTutorials = false
-	export let disableAi = false
-	export let disableSettings = false
-	export let newFlow: boolean = false
-	export let smallErrorHandler = false
-	export let workspace: string | undefined = $workspaceStore
+	interface Props {
+		sidebarSize?: number | undefined
+		disableStaticInputs?: boolean
+		disableTutorials?: boolean
+		disableAi?: boolean
+		disableSettings?: boolean
+		newFlow?: boolean
+		smallErrorHandler?: boolean
+		workspace?: string | undefined
+	}
 
-	let flowTutorials: FlowTutorials | undefined = undefined
+	let {
+		sidebarSize = $bindable(undefined),
+		disableStaticInputs = false,
+		disableTutorials = false,
+		disableAi = false,
+		disableSettings = false,
+		newFlow = false,
+		smallErrorHandler = false,
+		workspace = $workspaceStore
+	}: Props = $props()
+
+	let flowTutorials: FlowTutorials | undefined = $state(undefined)
 
 	const {
 		customUi,
@@ -63,31 +76,16 @@
 	const { triggersCount, triggersState } = getContext<TriggerContext>('TriggerContext')
 
 	const { flowPropPickerConfig } = getContext<PropPickerContext>('PropPickerContext')
-	async function insertNewModuleAtIndex(
+	export async function insertNewModuleAtIndex(
 		modules: FlowModule[],
 		index: number,
-		kind:
-			| 'script'
-			| 'forloop'
-			| 'whileloop'
-			| 'branchone'
-			| 'branchall'
-			| 'flow'
-			| 'trigger'
-			| 'approval'
-			| 'end',
+		kind: InsertKind,
 		wsScript?: { path: string; summary: string; hash: string | undefined },
 		wsFlow?: { path: string; summary: string },
-		inlineScript?: {
-			language: RawScript['language']
-			kind: Script['kind']
-			subkind: 'pgsql' | 'flow'
-			id: string
-			summary?: string
-		}
+		inlineScript?: InlineScript
 	): Promise<FlowModule[]> {
-		push(history, $flowStore)
-		var module = emptyModule($flowStateStore, $flowStore, kind == 'flow')
+		push(history, flowStore.val)
+		var module = emptyModule($flowStateStore, flowStore.val, kind == 'flow')
 		var state = emptyFlowModuleState()
 		$flowStateStore[module.id] = state
 		if (wsFlow) {
@@ -143,7 +141,7 @@
 		return modules
 	}
 
-	function removeAtId(modules: FlowModule[], id: string): FlowModule[] {
+	export function removeAtId(modules: FlowModule[], id: string): FlowModule[] {
 		const index = modules.findIndex((mod) => mod.id == id)
 		if (index != -1) {
 			const [removed] = modules.splice(index, 1)
@@ -170,15 +168,13 @@
 		})
 	}
 
-	$: sidebarMode == 'graph' ? (sidebarSize = 40) : (sidebarSize = 20)
-
 	let sidebarMode: 'list' | 'graph' = 'graph'
 
-	let minHeight = 0
+	let minHeight = $state(0)
 
-	function selectNextId(id: any) {
-		if (modules) {
-			let allIds = dfs(modules, (mod) => mod.id)
+	export function selectNextId(id: any) {
+		if (flowStore.val.value.modules) {
+			let allIds = dfs(flowStore.val.value.modules, (mod) => mod.id)
 			if (allIds.length > 1) {
 				const idx = allIds.indexOf(id)
 				$selectedId = idx == 0 ? allIds[0] : allIds[idx - 1]
@@ -187,8 +183,18 @@
 			}
 		}
 	}
-	async function addBranch(module: FlowModule) {
-		push(history, $flowStore)
+
+	function findModuleById(id: string) {
+		return dfsByModule(id, flowStore.val.value.modules)[0]
+	}
+
+	async function addBranch(id: string) {
+		push(history, flowStore.val)
+		let module = findModuleById(id)
+
+		if (!module) {
+			throw new Error(`Node ${id} not found`)
+		}
 
 		if (module.value.type === 'branchone' || module.value.type === 'branchall') {
 			module.value.branches.splice(module.value.branches.length, 0, {
@@ -199,8 +205,13 @@
 		}
 	}
 
-	function removeBranch(module: FlowModule, index: number) {
-		push(history, $flowStore)
+	function removeBranch(id: string, index: number) {
+		push(history, flowStore.val)
+		let module = findModuleById(id)
+
+		if (!module) {
+			throw new Error(`Node ${id} not found`)
+		}
 
 		if (module.value.type === 'branchone' || module.value.type === 'branchall') {
 			const offset = module.value.type === 'branchone' ? 1 : 0
@@ -214,11 +225,8 @@
 		}
 	}
 
-	let deleteCallback: (() => void) | undefined = undefined
-	let dependents: Record<string, string[]> = {}
-
-	const { currentStepStore: copilotCurrentStepStore } =
-		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
+	let deleteCallback: (() => void) | undefined = $state(undefined)
+	let dependents: Record<string, string[]> = $state({})
 
 	function shouldRunTutorial(tutorialName: string, name: string, index: number) {
 		return (
@@ -229,33 +237,12 @@
 		)
 	}
 
-	const dispatch = createEventDispatcher()
+	const dispatch = createEventDispatcher<{
+		generateStep: { moduleId: string; instructions: string; lang: ScriptLang }
+		change: void
+	}>()
 
-	async function updateFlowInputsStore() {
-		const keys = Object.keys(dependents ?? {})
-
-		for (const key of keys) {
-			const module = $flowStore.value.modules.find((m) => m.id === key)
-
-			if (!module) {
-				continue
-			}
-
-			if (!$flowInputsStore) {
-				$flowInputsStore = {}
-			}
-
-			$flowInputsStore[module.id] = {
-				flowStepWarnings: await initFlowStepWarnings(
-					module.value,
-					$flowStateStore?.[module.id]?.schema,
-					dfs($flowStore.value.modules, (fm) => fm.id)
-				)
-			}
-		}
-	}
-
-	function setExpr(module: FlowModule, expr: string) {
+	export function setExpr(module: FlowModule, expr: string) {
 		if (module.value.type == 'forloopflow') {
 			module.value.iterator = { type: 'javascript', expr }
 			module.value.parallel = true
@@ -290,6 +277,9 @@
 			$flowStateStore = $flowStateStore
 		}
 	}
+	$effect(() => {
+		sidebarMode == 'graph' ? (sidebarSize = 40) : (sidebarSize = 20)
+	})
 </script>
 
 <Portal name="flow-module">
@@ -324,13 +314,8 @@
 </Portal>
 <div class="flex flex-col h-full relative -pt-1">
 	<div
-		class={`z-10 sticky inline-flex flex-col gap-2 top-0 bg-surface-secondary flex-initial p-2 items-center transition-colors duration-[400ms] ease-linear border-b ${
-			$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : ''
-		}`}
+		class={`z-10 sticky inline-flex flex-col gap-2 top-0 bg-surface-secondary flex-initial p-2 items-center transition-colors duration-[400ms] ease-linear border-b`}
 	>
-		{#if $copilotCurrentStepStore !== undefined}
-			<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900] !m-0"></div>
-		{/if}
 		{#if !disableSettings}
 			<FlowSettingsItem />
 		{/if}
@@ -341,8 +326,8 @@
 
 	<div class="z-10 flex-auto grow bg-surface-secondary" bind:clientHeight={minHeight}>
 		<FlowGraphV2
-			earlyStop={$flowStore.value?.skip_expr !== undefined}
-			cache={$flowStore.value?.cache_ttl !== undefined}
+			earlyStop={flowStore.val.value?.skip_expr !== undefined}
+			cache={flowStore.val.value?.cache_ttl !== undefined}
 			triggerNode={customUi?.triggers != false}
 			path={$pathStore}
 			{newFlow}
@@ -350,32 +335,26 @@
 			insertable
 			scroll
 			{minHeight}
-			moving={$moving?.module.id}
+			moving={$moving?.id}
 			maxHeight={minHeight}
-			modules={$flowStore.value?.modules}
-			preprocessorModule={$flowStore.value?.preprocessor_module}
+			modules={flowStore.val.value.modules}
+			preprocessorModule={flowStore.val.value?.preprocessor_module}
 			{selectedId}
 			{flowInputsStore}
 			{workspace}
 			editMode
-			on:delete={({ detail }) => {
-				let e = detail.detail
-				dependents = getDependentComponents(e.id, $flowStore)
+			onDelete={(id) => {
+				dependents = getDependentComponents(id, flowStore.val)
 				const cb = () => {
-					push(history, $flowStore)
-					if (e.id === 'preprocessor') {
+					push(history, flowStore.val)
+					if (id === 'preprocessor') {
 						$selectedId = 'Input'
-						$flowStore.value.preprocessor_module = undefined
+						flowStore.val.value.preprocessor_module = undefined
 					} else {
-						selectNextId(e.id)
-						removeAtId($flowStore.value.modules, e.id)
-						if ($flowInputsStore) {
-							delete $flowInputsStore[e.id]
-						}
+						selectNextId(id)
+						removeAtId(flowStore.val.value.modules, id)
 					}
-					$flowStore = $flowStore
-
-					updateFlowInputsStore()
+					refreshStateStore(flowStore)
 				}
 
 				if (Object.keys(dependents).length > 0) {
@@ -384,7 +363,7 @@
 					cb()
 				}
 			}}
-			on:insert={async ({ detail }) => {
+			onInsert={async (detail) => {
 				if (shouldRunTutorial('forloop', detail.detail, 1)) {
 					flowTutorials?.runTutorialById('forloop', detail.index)
 				} else if (shouldRunTutorial('branchone', detail.detail, 2)) {
@@ -392,79 +371,119 @@
 				} else if (shouldRunTutorial('branchall', detail.detail, 3)) {
 					flowTutorials?.runTutorialById('branchall')
 				} else {
-					if (detail.modules && Array.isArray(detail.modules)) {
+					let originalModules
+					let targetModules
+					if (
+						detail.sourceId == 'Input' ||
+						detail.targetId == 'result' ||
+						detail.kind == 'trigger'
+					) {
+						targetModules = flowStore.val.value.modules
+					}
+
+					dfs(flowStore.val.value.modules, (mod, modules, branches) => {
+						// console.log('mod', mod.id, $moving?.id, detail, branches)
+						if (mod.id == $moving?.id) {
+							originalModules = modules
+						}
+						if (detail.branch) {
+							if (mod.id == detail.branch.rootId) {
+								targetModules = branches[detail.branch.branch]
+							}
+						} else if (mod.id == detail.sourceId || mod.id == detail.targetId) {
+							targetModules = modules
+						}
+					})
+					if (flowStore.val.value.modules && Array.isArray(flowStore.val.value.modules)) {
 						await tick()
 						if ($moving) {
-							push(history, $flowStore)
-							let indexToRemove = $moving.modules.findIndex((m) => $moving?.module?.id == m.id)
-							$moving.modules.splice(indexToRemove, 1)
-							detail.modules.splice(detail.index, 0, $moving.module)
-							$selectedId = $moving.module.id
+							// console.log('modules', modules, movingModules, movingModule)
+							push(history, flowStore.val)
+							let indexToRemove = originalModules.findIndex((m) => $moving?.id == m.id)
+
+							let [removedModule] = originalModules.splice(indexToRemove, 1)
+							targetModules.splice(detail.index, 0, removedModule)
+							$selectedId = removedModule.id
 							$moving = undefined
 						} else {
-							if (detail.detail === 'preprocessor') {
-								insertNewPreprocessorModule(
+							if (detail.isPreprocessor) {
+								await insertNewPreprocessorModule(
 									flowStore,
 									flowStateStore,
 									detail.inlineScript,
 									detail.script
 								)
 								$selectedId = 'preprocessor'
+
+								if (detail.inlineScript?.instructions) {
+									dispatch('generateStep', {
+										moduleId: 'preprocessor',
+										lang: detail.inlineScript?.language,
+										instructions: detail.inlineScript?.instructions
+									})
+								}
 							} else {
 								const index = detail.index ?? 0
 								await insertNewModuleAtIndex(
-									detail.modules,
+									targetModules,
 									index,
 									detail.kind,
 									detail.script,
 									detail.flow,
 									detail.inlineScript
 								)
-								const id = detail.modules[detail.index ?? 0].id
+								const id = targetModules[index].id
 								$selectedId = id
 
+								if (detail.inlineScript?.instructions) {
+									dispatch('generateStep', {
+										moduleId: id,
+										lang: detail.inlineScript?.language,
+										instructions: detail.inlineScript?.instructions
+									})
+								}
 								if (detail.kind == 'trigger') {
 									await insertNewModuleAtIndex(
-										detail.modules,
+										targetModules,
 										index + 1,
 										'forloop',
 										undefined,
 										undefined,
 										undefined
 									)
-									setExpr(detail.modules[index + 1], `results.${id}`)
+									setExpr(targetModules[index + 1], `results.${id}`)
 									setScheduledPollSchedule(triggersState, triggersCount)
 								}
 
-								if (`flow` in detail) {
-									loadLastJob(detail.flow?.path, id)
-								} else if (`script` in detail) {
+								if (detail.flow?.path) {
+									loadLastJob(detail.flow.path, id)
+								} else if (detail.script?.path) {
 									loadLastJob(detail.script?.path, id)
 								}
 							}
 						}
 
 						if (['branchone', 'branchall'].includes(detail.kind)) {
-							await addBranch(detail.modules[detail.index ?? 0])
+							await addBranch(targetModules[detail.index ?? 0].id)
 						}
 						$flowStateStore = $flowStateStore
-						$flowStore = $flowStore
+						refreshStateStore(flowStore)
 						dispatch('change')
 					}
 				}
 			}}
-			on:newBranch={async ({ detail }) => {
-				if (detail.module) {
-					await addBranch(detail.module)
-					$flowStore = $flowStore
+			onNewBranch={async (id) => {
+				if (id) {
+					await addBranch(id)
+					refreshStateStore(flowStore)
 				}
 			}}
-			on:select={async ({ detail }) => {
+			onSelect={(id) => {
 				flowPropPickerConfig.set(undefined)
 			}}
-			on:changeId={({ detail }) => {
+			onChangeId={(detail) => {
 				let { id, newId, deps } = detail
-				dfs($flowStore.value.modules, (mod) => {
+				dfs(flowStore.val.value.modules, (mod) => {
 					if (deps[mod.id]) {
 						deps[mod.id].forEach((dep) => {
 							if (
@@ -496,27 +515,27 @@
 						mod.id = newId
 					}
 				})
-				$flowStore = $flowStore
+				refreshStateStore(flowStore)
 				$selectedId = newId
 			}}
-			on:deleteBranch={async ({ detail }) => {
-				if (detail.module) {
-					await removeBranch(detail.module, detail.index)
-					$flowStore = $flowStore
-					$selectedId = detail.module.id
+			onDeleteBranch={async ({ id, index }) => {
+				if (id) {
+					await removeBranch(id, index)
+					refreshStateStore(flowStore)
+					$selectedId = id
 				}
 			}}
-			on:move={async ({ detail }) => {
-				if (!$moving || $moving.module.id !== detail.module.id) {
-					if (detail.module && detail.modules) {
-						$moving = { module: detail.module, modules: detail.modules }
-					}
+			onMove={(id) => {
+				if (!$moving || $moving.id !== id) {
+					$moving = { id }
 				} else {
 					$moving = undefined
 				}
 			}}
-			on:updateMock={() => {
-				$flowStore = $flowStore
+			onUpdateMock={(detail) => {
+				let module = findModuleById(detail.id)
+				module.mock = $state.snapshot(detail.mock)
+				refreshStateStore(flowStore)
 			}}
 		/>
 	</div>
@@ -525,7 +544,7 @@
 			? 'flex-row-reverse'
 			: 'justify-center'} border-b"
 	>
-		<FlowErrorHandlerItem small={smallErrorHandler} />
+		<FlowErrorHandlerItem small={smallErrorHandler} on:generateStep />
 	</div>
 </div>
 
diff --git a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
index 6071962938..26a2539467 100644
--- a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
@@ -7,23 +7,25 @@
 
 	const { selectedId, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
-	$: settingsClass = classNames(
-		'border w-full rounded-sm p-2 bg-surface text-sm cursor-pointer flex items-center h-[32px]',
-		$selectedId?.startsWith('settings')
-			? 'border border-1  border-slate-800 dark:bg-white/5 dark:border-slate-400/60 dark:border-gray-400'
-			: '',
-		'hover:!bg-surface-secondary active:!bg-surface'
+	let settingsClass = $derived(
+		classNames(
+			'border w-full rounded-sm p-2 bg-surface text-sm cursor-pointer flex items-center h-[32px]',
+			$selectedId?.startsWith('settings')
+				? 'border border-1  border-slate-800 dark:bg-white/5 dark:border-slate-400/60 dark:border-gray-400'
+				: '',
+			'hover:!bg-surface-secondary active:!bg-surface'
+		)
 	)
 </script>
 
-<button on:click={() => ($selectedId = 'settings-metadata')} class={settingsClass}>
+<button onclick={() => ($selectedId = 'settings-metadata')} class={settingsClass}>
 	<SlidersHorizontal size={16} />
 	<span
 		class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate ml-1"
 	>
 		<span>Settings</span>
 		<span class="h-[18px] flex items-center">
-			{#if $flowStore.value.same_worker}
+			{#if flowStore.val.value.same_worker}
 				<Badge color="blue" baseClass="truncate">./shared</Badge>
 			{/if}
 		</span>
diff --git a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
index 938681f4b8..1894b7d42c 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import { createEventDispatcher } from 'svelte'
 	import { Cross } from 'lucide-svelte'
 	import InsertModuleInner from './InsertModuleInner.svelte'
@@ -12,16 +14,28 @@
 	// import type { Writable } from 'svelte/store'
 
 	const dispatch = createEventDispatcher()
-	export let index: number = 0
-	export let funcDesc = ''
-	export let kind: 'script' | 'trigger' | 'preprocessor' | 'failure' = 'script'
-	export let iconSize = 12
 
 	type Alignment = 'start' | 'end' | 'center'
 	type Side = 'top' | 'bottom'
 	type Placement = `${Side}-${Alignment}`
 
-	export let placement: Placement = 'bottom-center'
+	interface Props {
+		index?: number
+		funcDesc?: string
+		kind?: 'script' | 'trigger' | 'preprocessor' | 'failure'
+		iconSize?: number
+		clazz?: string
+		placement?: Placement
+	}
+
+	let {
+		index = 0,
+		funcDesc = $bindable(''),
+		kind = 'script',
+		iconSize = 12,
+		clazz = '',
+		placement = 'bottom-center'
+	}: Props = $props()
 
 	let floatingConfig: ComputeConfig = {
 		strategy: 'fixed',
@@ -30,9 +44,11 @@
 		middleware: [offset(8), flip()],
 		autoUpdate: true
 	}
-	$: !open && (funcDesc = '')
 
-	let open = false
+	let open = $state(false)
+	$effect(() => {
+		!open && (funcDesc = '')
+	})
 </script>
 
 <!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
@@ -43,8 +59,8 @@ containerClasses="border rounded-lg shadow-lg  bg-surface"
 noTransition
 shouldUsePortal={true} -->
 
-<PopupV2 {floatingConfig} bind:open let:close target="#flow-editor">
-	<svelte:fragment let:pointerdown let:pointerup slot="button">
+<PopupV2 {floatingConfig} bind:open target="#flow-editor">
+	{#snippet button({ pointerdown, pointerup })}
 		<button
 			title={`Add ${
 				kind === 'failure'
@@ -59,13 +75,15 @@ shouldUsePortal={true} -->
 			type="button"
 			class={twMerge(
 				'w-[17.5px] h-[17.5px] flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded',
-				$$props.class
+				clazz
 			)}
-			on:pointerdown|preventDefault|stopPropagation={() => {
-				dispatch('open')
-				pointerdown()
-			}}
-			on:pointerup={pointerup}
+			onpointerdown={stopPropagation(
+				preventDefault(() => {
+					dispatch('open')
+					pointerdown()
+				})
+			)}
+			onpointerup={pointerup}
 		>
 			{#if kind === 'trigger'}
 				<SchedulePollIcon size={14} />
@@ -73,6 +91,15 @@ shouldUsePortal={true} -->
 				<Cross size={iconSize} />
 			{/if}
 		</button>
-	</svelte:fragment>
-	<InsertModuleInner on:close={() => close(null)} on:insert on:new on:pickFlow on:pickScript />
+	{/snippet}
+	{#snippet children({ close })}
+		<InsertModuleInner
+			on:close={() => close(null)}
+			on:insert
+			on:new
+			on:pickFlow
+			on:pickScript
+			{kind}
+		/>
+	{/snippet}
 </PopupV2>
diff --git a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
index cbc3870338..196c38afe7 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
@@ -2,7 +2,6 @@
 	import { createEventDispatcher, getContext } from 'svelte'
 	import StepGenQuick from '$lib/components/copilot/StepGenQuick.svelte'
 	import FlowInputsQuick from '../content/FlowInputsQuick.svelte'
-	import type { FlowModule } from '$lib/gen'
 	import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui'
 	import ToggleHubWorkspaceQuick from '$lib/components/ToggleHubWorkspaceQuick.svelte'
 	import TopLevelNode from '../pickers/TopLevelNode.svelte'
@@ -11,9 +10,7 @@
 
 	const dispatch = createEventDispatcher()
 	export let stop = false
-	export let index: number = 0
 	export let funcDesc = ''
-	export let modules: FlowModule[] = []
 	export let disableAi = false
 	export let kind: 'script' | 'trigger' | 'preprocessor' | 'failure' = 'script'
 	export let allowTrigger = true
@@ -148,8 +145,6 @@ shouldUsePortal={true} -->
 			{selectedKind}
 			bind:loading
 			filter={funcDesc}
-			{modules}
-			{index}
 			{disableAi}
 			{funcDesc}
 			{kind}
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 68a9328356..136f430812 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -11,28 +11,56 @@
 	import { msToSec } from '$lib/utils'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 	import FlowJobsMenu from './FlowJobsMenu.svelte'
-	import { isTriggerStep } from '$lib/components/graph/graphBuilder'
+	import {
+		isTriggerStep,
+		type onSelectedIteration
+	} from '$lib/components/graph/graphBuilder.svelte'
 	import { checkIfParentLoop } from '$lib/components/flows/utils'
 	import type { FlowEditorContext } from '$lib/components/flows/types'
 
-	export let mod: FlowModule
-	export let insertable: boolean
-	export let annotation: string | undefined = undefined
-	export let bgColor: string = ''
-	export let bgHoverColor: string = ''
-	export let moving: string | undefined = undefined
-	export let duration_ms: number | undefined = undefined
+	interface Props {
+		moduleId: string
+		mod: FlowModule
+		insertable: boolean
+		annotation?: string | undefined
+		bgColor?: string
+		bgHoverColor?: string
+		moving?: string | undefined
+		duration_ms?: number | undefined
+		retries?: number | undefined
+		flowJobs:
+			| {
+					flowJobs: string[]
+					selected: number
+					flowJobsSuccess: (boolean | undefined)[]
+					selectedManually: boolean | undefined
+			  }
+			| undefined
+		editMode?: boolean
+		onSelectedIteration: onSelectedIteration
+		onSelect: (id: string | FlowModule) => void
+		onUpdateMock?: (detail: {
+			id: string
+			mock: { enabled: boolean; return_value?: unknown }
+		}) => void
+	}
 
-	export let retries: number | undefined = undefined
-	export let flowJobs:
-		| {
-				flowJobs: string[]
-				selected: number
-				flowJobsSuccess: (boolean | undefined)[]
-				selectedManually: boolean | undefined
-		  }
-		| undefined
-	export let editMode: boolean = false
+	let {
+		onSelectedIteration,
+		moduleId,
+		mod = $bindable(),
+		insertable,
+		annotation = undefined,
+		bgColor = '',
+		bgHoverColor = '',
+		moving = undefined,
+		duration_ms = undefined,
+		retries = undefined,
+		flowJobs,
+		editMode = false,
+		onSelect,
+		onUpdateMock
+	}: Props = $props()
 
 	const { selectedId } = getContext<{
 		selectedId: Writable<string | undefined>
@@ -42,20 +70,12 @@
 
 	const dispatch = createEventDispatcher<{
 		delete: CustomEvent<MouseEvent>
-		insert: {
-			modules: FlowModule[]
-			index: number
-			detail: 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'move'
-			script?: { path: string; summary: string; hash: string | undefined }
-		}
 		select: string
-		newBranch: { module: FlowModule }
+		newBranch: { id: string }
 		move: { module: FlowModule } | undefined
-		selectedIteration: { index: number; id: string }
-		updateMock: void
 	}>()
 
-	$: itemProps = {
+	let itemProps = $derived({
 		selected: $selectedId === mod.id,
 		retry: mod.retry?.constant != undefined || mod.retry?.exponential != undefined,
 		earlyStop: mod.stop_after_if != undefined || mod.stop_after_all_iters_if != undefined,
@@ -65,13 +85,11 @@
 		cache: Boolean(mod.cache_ttl),
 		mock: mod.mock,
 		concurrency: Boolean(mod?.value?.['concurrent_limit'])
-	}
+	})
 
-	$: parentLoop = flowStore && $flowStore && mod ? checkIfParentLoop($flowStore, mod.id) : undefined
-
-	function onDelete(event: CustomEvent<MouseEvent>) {
-		dispatch('delete', event)
-	}
+	let parentLoop = $derived(
+		flowStore?.val && mod ? checkIfParentLoop(flowStore.val, mod.id) : undefined
+	)
 </script>
 
 {#if mod}
@@ -97,10 +115,9 @@
 		{#if flowJobs && !insertable && (mod.value.type === 'forloopflow' || mod.value.type === 'whileloopflow')}
 			<div class="absolute right-8 z-50 -top-5">
 				<FlowJobsMenu
+					{moduleId}
 					id={mod.id}
-					on:selectedIteration={(e) => {
-						dispatch('selectedIteration', e.detail)
-					}}
+					{onSelectedIteration}
 					flowJobsSuccess={flowJobs.flowJobsSuccess}
 					flowJobs={flowJobs.flowJobs}
 					selected={flowJobs.selected}
@@ -121,12 +138,12 @@
 					}`}
 					id={mod.id}
 					on:changeId
-					on:move={() => dispatch('move')}
-					on:delete={onDelete}
-					on:pointerdown={() => dispatch('select', mod.id)}
-					on:updateMock={({ detail }) => {
-						mod.mock = detail
-						dispatch('updateMock')
+					on:move
+					on:delete
+					on:pointerdown={() => onSelect(mod.id)}
+					onUpdateMock={(mock) => {
+						mod.mock = mock
+						onUpdateMock?.({ id: mod.id, mock })
 					}}
 					{...itemProps}
 					{bgColor}
@@ -139,57 +156,65 @@
 					alwaysShowOutputPicker={!mod.id.startsWith('subflow:')}
 					loopStatus={{ type: 'self', flow: mod.value.type }}
 				>
-					<div slot="icon">
-						<Repeat size={16} />
-					</div>
+					{#snippet icon()}
+						<div>
+							<Repeat size={16} />
+						</div>
+					{/snippet}
 				</FlowModuleSchemaItem>
 			{:else if mod.value.type === 'branchone'}
 				<FlowModuleSchemaItem
 					deletable={insertable}
 					{editMode}
 					on:changeId
-					on:delete={onDelete}
-					on:move={() => dispatch('move')}
-					on:pointerdown={() => dispatch('select', mod.id)}
+					on:delete
+					on:move
+					on:pointerdown={() => onSelect(mod.id)}
 					{...itemProps}
 					id={mod.id}
 					label={mod.summary || 'Run one branch'}
 					{bgColor}
 					{bgHoverColor}
 				>
-					<div slot="icon">
-						<GitBranch size={16} />
-					</div>
+					{#snippet icon()}
+						<div>
+							<GitBranch size={16} />
+						</div>
+					{/snippet}
 				</FlowModuleSchemaItem>
 			{:else if mod.value.type === 'branchall'}
 				<FlowModuleSchemaItem
 					deletable={insertable}
 					{editMode}
 					on:changeId
-					on:delete={onDelete}
-					on:move={() => dispatch('move')}
-					on:pointerdown={() => dispatch('select', mod.id)}
+					on:delete
+					on:move
+					on:pointerdown={() => onSelect(mod.id)}
 					id={mod.id}
 					{...itemProps}
 					label={mod.summary || `Run all branches${mod.value.parallel ? ' (parallel)' : ''}`}
 					{bgColor}
 					{bgHoverColor}
 				>
-					<div slot="icon">
-						<GitBranch size={16} />
-					</div>
+					{#snippet icon()}
+						<div>
+							<GitBranch size={16} />
+						</div>
+					{/snippet}
 				</FlowModuleSchemaItem>
 			{:else}
 				<FlowModuleSchemaItem
 					{retries}
 					{editMode}
 					on:changeId
-					on:pointerdown={() => dispatch('select', mod.id)}
-					on:delete={onDelete}
-					on:move={() => dispatch('move')}
-					on:updateMock={({ detail }) => {
-						mod.mock = detail
-						dispatch('updateMock')
+					on:pointerdown={() => onSelect(mod.id)}
+					on:delete
+					on:move
+					onUpdateMock={(mock) => {
+						console.log('onUpdateMock', mock)
+
+						mod.mock = mock
+						onUpdateMock?.({ id: mod.id, mock })
 					}}
 					deletable={insertable}
 					id={mod.id}
@@ -212,30 +237,32 @@
 					alwaysShowOutputPicker={!mod.id.startsWith('subflow:') && mod.id !== 'preprocessor'}
 					loopStatus={parentLoop ? { type: 'inside', flow: parentLoop.type } : undefined}
 				>
-					<div slot="icon">
-						{#if mod.value.type === 'rawscript'}
-							<LanguageIcon lang={mod.value.language} width={16} height={16} />
-						{:else if mod.summary == 'Terminate flow'}
-							<Square size={16} />
-						{:else if mod.value.type === 'identity'}
-							<ArrowDown size={16} />
-						{:else if mod.value.type === 'flow'}
-							<BarsStaggered size={16} />
-						{:else if mod.value.type === 'script'}
-							{#if mod.value.path.startsWith('hub/')}
-								<div>
-									<IconedResourceType
-										width="20px"
-										height="20px"
-										name={mod.value.path.split('/')[2]}
-										silent={true}
-									/>
-								</div>
-							{:else}
-								<Building size={14} />
+					{#snippet icon()}
+						<div>
+							{#if mod.value.type === 'rawscript'}
+								<LanguageIcon lang={mod.value.language} width={16} height={16} />
+							{:else if mod.summary == 'Terminate flow'}
+								<Square size={16} />
+							{:else if mod.value.type === 'identity'}
+								<ArrowDown size={16} />
+							{:else if mod.value.type === 'flow'}
+								<BarsStaggered size={16} />
+							{:else if mod.value.type === 'script'}
+								{#if mod.value.path.startsWith('hub/')}
+									<div>
+										<IconedResourceType
+											width="20px"
+											height="20px"
+											name={mod.value.path.split('/')[2]}
+											silent={true}
+										/>
+									</div>
+								{:else}
+									<Building size={14} />
+								{/if}
 							{/if}
-						{/if}
-					</div>
+						</div>
+					{/snippet}
 				</FlowModuleSchemaItem>
 			{/if}
 		</div>
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 76e50ccd26..fc0fcd09a9 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -1,126 +1,132 @@
 <script lang="ts">
 	import { Badge } from '$lib/components/common'
 
-	import { getContext } from 'svelte'
-	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
 	import VirtualItemWrapper from './VirtualItemWrapper.svelte'
 	import OutputPicker from '$lib/components/flows/propPicker/OutputPicker.svelte'
 	import OutputPickerInner from '$lib/components/flows/propPicker/OutputPickerInner.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { fade } from 'svelte/transition'
 	import { Database, Square } from 'lucide-svelte'
-	import { useSvelteFlow } from '@xyflow/svelte'
 
-	export let label: string | undefined = undefined
-	export let bgColor: string = ''
-	export let bgHoverColor: string = ''
-	export let selected: boolean
-	export let selectable: boolean
-	export let id: string | undefined = undefined
-	export let center = true
-	export let borderColor: string | undefined = undefined
-	export let hideId: boolean = false
-	export let preLabel: string | undefined = undefined
-	export let inputJson: Object | undefined = undefined
-	export let prefix = ''
-	export let alwaysPluggable: boolean = false
-	export let cache: boolean = false
-	export let earlyStop: boolean = false
-	export let editMode: boolean = false
+	interface Props {
+		label?: string | undefined
+		bgColor?: string
+		bgHoverColor?: string
+		selected: boolean
+		selectable: boolean
+		id?: string | undefined
+		center?: boolean
+		borderColor?: string | undefined
+		hideId?: boolean
+		preLabel?: string | undefined
+		inputJson?: Object | undefined
+		prefix?: string
+		alwaysPluggable?: boolean
+		cache?: boolean
+		earlyStop?: boolean
+		editMode?: boolean
+		icon?: import('svelte').Snippet
+		onUpdateMock?: (mock: { enabled: boolean; return_value?: unknown }) => void
+	}
 
-	const { currentStepStore: copilotCurrentStepStore } =
-		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
-
-	const { viewport } = useSvelteFlow()
+	let {
+		label = undefined,
+		bgColor = '',
+		bgHoverColor = '',
+		selected,
+		selectable,
+		id = undefined,
+		center = true,
+		borderColor = undefined,
+		hideId = false,
+		preLabel = undefined,
+		inputJson = undefined,
+		prefix = '',
+		alwaysPluggable = false,
+		cache = false,
+		earlyStop = false,
+		editMode = false,
+		icon,
+		onUpdateMock
+	}: Props = $props()
 </script>
 
-<VirtualItemWrapper
-	{label}
-	{bgColor}
-	{bgHoverColor}
-	{selected}
-	{selectable}
-	{id}
-	onTop={label === 'Input' && $copilotCurrentStepStore === 'Input'}
-	on:select
-	let:hover
->
-	<div class="flex flex-col w-full">
-		<div
-			style={borderColor ? `border-color: ${borderColor};` : 'border: 0'}
-			class="flex flex-row gap-1 justify-between {center
-				? 'items-center'
-				: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400 dark:border-gray-600"
-		>
-			{#if $$slots.icon}
-				<slot name="icon" />
-				<span class="mr-2"></span>
-			{/if}
-			<div class="flex flex-col flex-grow shrink-0 max-w-full min-w-0">
-				{#if label}
-					<div class="truncate text-center">{label}</div>
+<VirtualItemWrapper {label} {bgColor} {bgHoverColor} {selected} {selectable} {id} on:select>
+	{#snippet children({ hover })}
+		<div class="flex flex-col w-full">
+			<div
+				style={borderColor ? `border-color: ${borderColor};` : 'border: 0'}
+				class="flex flex-row gap-1 justify-between {center
+					? 'items-center'
+					: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400 dark:border-gray-600"
+			>
+				{#if icon}
+					{@render icon?.()}
+					<span class="mr-2"></span>
 				{/if}
-				{#if preLabel}
-					<div class="truncate text-2xs text-center"><pre>{preLabel}</pre></div>
+				<div class="flex flex-col flex-grow shrink-0 max-w-full min-w-0">
+					{#if label}
+						<div class="truncate text-center">{label}</div>
+					{/if}
+					{#if preLabel}
+						<div class="truncate text-2xs text-center"><pre>{preLabel}</pre></div>
+					{/if}
+				</div>
+				{#if id && !hideId && !id?.startsWith('subflow:')}
+					<div class="flex items-center shrink min-w-0">
+						<Badge color="indigo" wrapperClass="w-full" baseClass="max-w-full" title={id}>
+							<span class="max-w-full text-2xs truncate">{id}</span>
+						</Badge>
+					</div>
 				{/if}
 			</div>
-			{#if id && !hideId && !id?.startsWith('subflow:')}
-				<div class="flex items-center shrink min-w-0">
-					<Badge color="indigo" wrapperClass="w-full" baseClass="max-w-full" title={id}>
-						<span class="max-w-full text-2xs truncate">{id}</span>
-					</Badge>
-				</div>
+			{#if (alwaysPluggable || (inputJson && Object.keys(inputJson).length > 0)) && editMode}
+				<OutputPicker {selected} {hover} isConnectingCandidate={true} variant="virtual">
+					{#snippet children({ allowCopy, isConnecting, selectConnection })}
+						<OutputPickerInner
+							{allowCopy}
+							{prefix}
+							connectingData={isConnecting ? inputJson : undefined}
+							onSelect={selectConnection}
+							moduleId={''}
+							{onUpdateMock}
+							hideHeaderBar
+							simpleViewer={inputJson}
+							rightMargin
+							historyOffset={{ mainAxis: 12, crossAxis: -9 }}
+							clazz="p-1"
+						/>
+					{/snippet}
+				</OutputPicker>
 			{/if}
 		</div>
-		{#if (alwaysPluggable || (inputJson && Object.keys(inputJson).length > 0)) && editMode}
-			<OutputPicker
-				zoom={$viewport?.zoom ?? 1}
-				{selected}
-				{hover}
-				let:allowCopy
-				isConnectingCandidate={true}
-				let:isConnecting
-				let:selectConnection
-				variant="virtual"
-			>
-				<OutputPickerInner
-					{allowCopy}
-					{prefix}
-					connectingData={isConnecting ? inputJson : undefined}
-					on:select={selectConnection}
-					moduleId={''}
-					on:updateMock
-					hideHeaderBar
-					simpleViewer={inputJson}
-					rightMargin
-					historyOffset={{ mainAxis: 12, crossAxis: -9 }}
-					class="p-1"
-				/>
-			</OutputPicker>
-		{/if}
-	</div>
-	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
-		{#if cache}
-			<Popover notClickable>
-				<div
-					transition:fade|local={{ duration: 200 }}
-					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
-				>
-					<Database size={12} />
-				</div>
-				<svelte:fragment slot="text">Cached</svelte:fragment>
-			</Popover>
-		{/if}
-		{#if earlyStop}
-			<Popover notClickable>
-				<div
-					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
-				>
-					<Square size={12} />
-				</div>
-				<svelte:fragment slot="text">Early stop if condition met</svelte:fragment>
-			</Popover>
-		{/if}
-	</div>
+		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
+			{#if cache}
+				<Popover notClickable>
+					<div
+						transition:fade|local={{ duration: 200 }}
+						class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
+					>
+						<Database size={12} />
+					</div>
+					{#snippet text()}
+						Cached
+					{/snippet}
+				</Popover>
+			{/if}
+			{#if earlyStop}
+				<Popover notClickable>
+					<div
+						transition:fade|local={{ duration: 200 }}
+						class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
+					>
+						<Square size={12} />
+					</div>
+					{#snippet text()}
+						Early stop if condition met
+					{/snippet}
+				</Popover>
+			{/if}
+		</div>
+	{/snippet}
 </VirtualItemWrapper>
diff --git a/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte b/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
index 7d636f02e2..472ac6520d 100644
--- a/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
@@ -3,13 +3,27 @@
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 
-	export let label: string | undefined
-	export let selectable: boolean
-	export let selected: boolean
-	export let id: string | undefined
-	export let onTop: boolean = false
-	export let bgColor: string
-	export let bgHoverColor: string = ''
+	interface Props {
+		label: string | undefined
+		selectable: boolean
+		selected: boolean
+		id: string | undefined
+		onTop?: boolean
+		bgColor: string
+		bgHoverColor?: string
+		children?: import('svelte').Snippet<[any]>
+	}
+
+	let {
+		label,
+		selectable,
+		selected,
+		id,
+		onTop = false,
+		bgColor,
+		bgHoverColor = '',
+		children
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{
 		insert: {
@@ -21,11 +35,11 @@
 		select: string
 	}>()
 
-	let hover: boolean = false
+	let hover: boolean = $state(false)
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={classNames(
 		'w-full flex relative rounded-sm',
@@ -37,17 +51,18 @@
 	style="width: 275px; max-height: 38px; background-color: {hover && bgHoverColor && selectable
 		? bgHoverColor
 		: bgColor};"
-	on:pointerdown={() => {
+	onpointerdown={() => {
 		if (selectable) {
 			dispatch('select', id || label || '')
 		}
 	}}
-	on:mouseenter={() => {
+	onmouseenter={() => {
 		hover = true
 	}}
-	on:mouseleave={() => {
+	onmouseleave={() => {
 		hover = false
 	}}
 	title={label ? label + ' ' : ''}
-	id={`flow-editor-virtual-${encodeURIComponent(label || label || '')}`}><slot {hover} /></div
+	id={`flow-editor-virtual-${encodeURIComponent(label || label || '')}`}
+	>{@render children?.({ hover })}</div
 >
diff --git a/frontend/src/lib/components/flows/missingInputWarnings.ts b/frontend/src/lib/components/flows/missingInputWarnings.ts
new file mode 100644
index 0000000000..80c934fa75
--- /dev/null
+++ b/frontend/src/lib/components/flows/missingInputWarnings.ts
@@ -0,0 +1,137 @@
+import type { Schema } from '$lib/common'
+import type { InputTransform, OpenFlow } from '$lib/gen'
+import { parseOutputs } from '$lib/infer'
+import type { Writable } from 'svelte/store'
+import type { FlowInput } from './types'
+import type { StateStore } from '$lib/utils'
+import type { FlowState } from './flowState'
+import { dfs } from './dfs'
+
+function isInputFilled(
+	inputTransforms: Record<string, InputTransform>,
+	key: string,
+	schema: Schema | undefined
+): boolean {
+	const required = schema?.required?.includes(key) ?? false
+
+	if (!required) {
+		return true
+	}
+
+	if (inputTransforms.hasOwnProperty(key)) {
+		const transform = inputTransforms[key]
+		if (
+			transform?.type === 'static' &&
+			(transform?.value === undefined || transform?.value === '' || transform?.value === null)
+		) {
+			return false
+		} else if (
+			transform?.type === 'javascript' &&
+			(transform?.expr === undefined || transform?.expr === '' || transform?.expr === null)
+		) {
+			return false
+		}
+	}
+
+	return true
+}
+
+async function isConnectedToMissingModule(
+	argName: string,
+	input_transform: InputTransform,
+	moduleIds: string[]
+): Promise<string | undefined> {
+	const val: string =
+		input_transform.type === 'static' ? String(input_transform.value) : input_transform.expr
+
+	try {
+		const outputs = await parseOutputs(val, true)
+		let error: string = ''
+
+		outputs?.forEach(([componentId, id]) => {
+			if (componentId === 'results') {
+				if (!moduleIds.includes(id)) {
+					error += `Input ${argName} is connected to a missing module with id ${id}\n`
+				}
+			}
+		})
+
+		return error
+	} catch (e) {
+		return `Input ${argName} expression is invalid`
+	}
+}
+
+type FlowStepWarnings = Record<string, { message: string; type: 'error' | 'warning' }>
+
+async function computeFlowStepWarnings(
+	input: {
+		input_transforms: Record<string, InputTransform>
+		id: string
+		schema: Schema | undefined
+	},
+	moduleIds: string[] = []
+) {
+	const messages: FlowStepWarnings = {}
+	const { input_transforms, schema } = input
+	const keys = Object.keys(input_transforms ?? {})
+	const promises = keys.map(async (key) => {
+		if (!isInputFilled(input_transforms, key, schema)) {
+			messages[key] = {
+				message: `Input ${key} is required but not filled`,
+				type: 'warning'
+			}
+		} else {
+			const errorMessage = await isConnectedToMissingModule(key, input_transforms[key], moduleIds)
+			if (errorMessage) {
+				messages[key] = {
+					message: errorMessage,
+					type: 'error'
+				}
+			}
+		}
+	})
+	await Promise.all(promises)
+
+	return messages
+}
+
+export async function computeMissingInputWarnings(
+	flowStore: StateStore<OpenFlow>,
+	flowState: FlowState,
+	flowInputsStore: Writable<FlowInput>
+) {
+	const inputs = dfs(flowStore.val.value.modules, (module) => {
+		if (
+			module.value.type === 'script' ||
+			module.value.type === 'rawscript' ||
+			module.value.type === 'flow'
+		) {
+			const schema = flowState[module.id]?.schema
+			return {
+				input_transforms: module.value.input_transforms,
+				id: module.id,
+				schema
+			}
+		}
+		return undefined
+	}).filter((x) => x !== undefined)
+
+	const moduleIds = dfs(flowStore.val.value.modules, (module) => module.id)
+
+	const promises = inputs.map(async (input) => {
+		const warnings = await computeFlowStepWarnings(input, moduleIds)
+		return [input.id, warnings] as const
+	})
+	const warnings = Object.fromEntries(await Promise.all(promises))
+	for (const key in warnings) {
+		flowInputsStore.update((fi) => {
+			return {
+				...fi,
+				[key]: {
+					flowStepWarnings: warnings[key]
+				}
+			}
+		})
+	}
+}
diff --git a/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte b/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
index 63b78a64ce..864602718f 100644
--- a/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
+++ b/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
@@ -2,44 +2,45 @@
 	import { ChevronDown } from 'lucide-svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import { twMerge } from 'tailwind-merge'
-	import { getContext, tick } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { PropPickerContext } from '$lib/components/prop_picker'
 	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
 
-	export let zoom: number = 1
-	export let selected: boolean = false
-	export let hover: boolean = false
-	export let isConnectingCandidate: boolean = false
-	export let variant: 'default' | 'virtual' = 'default'
-	export let historyOpen: boolean = false
+	interface Props {
+		selected?: boolean
+		hover?: boolean
+		isConnectingCandidate?: boolean
+		variant?: 'default' | 'virtual'
+		historyOpen?: boolean
+		children?: import('svelte').Snippet<[any]>
+	}
+
+	let {
+		selected = false,
+		hover = false,
+		isConnectingCandidate = false,
+		variant = 'default',
+		historyOpen = false,
+		children
+	}: Props = $props()
 
 	const context = getContext<PropPickerContext>('PropPickerContext')
 	const flowPropPickerConfig = context?.flowPropPickerConfig
-	const MIN_WIDTH = 275
-	const MIN_HEIGHT = 275
+	const MIN_WIDTH = 375
+	const MIN_HEIGHT = 375
 
-	let isConnecting = false
+	let showConnecting = $derived(
+		isConnectingCandidate && $flowPropPickerConfig?.insertionMode === 'connect'
+	)
 
-	async function updateConnecting() {
-		await tick()
-		isConnecting = $flowPropPickerConfig?.insertionMode === 'connect'
-	}
-
-	$: $flowPropPickerConfig, updateConnecting()
-
-	$: showConnecting = isConnectingCandidate && isConnecting
-
-	function selectConnection(event: CustomEvent) {
-		if ($flowPropPickerConfig?.onSelect(event.detail)) {
+	function selectConnection(value: string) {
+		if ($flowPropPickerConfig?.onSelect(value)) {
 			$flowPropPickerConfig?.clearFocus()
 			popover?.close()
 		}
 	}
 
-	let popover: Popover | undefined = undefined
-
-	$: width = Math.max(MIN_WIDTH * zoom, 375)
-	$: height = Math.max(MIN_HEIGHT * zoom, 375)
+	let popover: Popover | undefined = $state(undefined)
 
 	const virtualItemClasses = {
 		bar: 'dark:hover:bg-[#525d6f] dark:bg-[#414958] bg-[#d7dfea]  hover:bg-slate-300',
@@ -76,12 +77,12 @@
 	bind:this={popover}
 	allowFullScreen
 	contentClasses="overflow-hidden resize rounded-md"
-	contentStyle={`width: calc(${width}px); min-width: calc(${width}px); height: calc(${height}px); min-height: calc(${height}px);`}
+	contentStyle={`width: calc(${MIN_WIDTH}px); min-width: calc(${MIN_WIDTH}px); height: calc(${MIN_HEIGHT}px); min-height: calc(${MIN_HEIGHT}px);`}
 	extraProps={{ 'data-prop-picker': true }}
 	closeOnOtherPopoverOpen
 	class="outline-none"
 >
-	<svelte:fragment slot="trigger" let:isOpen>
+	{#snippet trigger({ isOpen })}
 		<div
 			class={twMerge(
 				'bg-slate-200',
@@ -90,7 +91,7 @@
 				'shadow-[inset_0_1px_5px_0_rgba(0,0,0,0.05)] rounded-b-sm',
 				'group'
 			)}
-			on:pointerdown={(e) => {
+			onpointerdown={(e) => {
 				e.preventDefault()
 				e.stopPropagation()
 			}}
@@ -122,10 +123,14 @@
 				</AnimatedButton>
 			</div>
 		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<slot allowCopy={!$flowPropPickerConfig} {isConnecting} {selectConnection} />
-	</svelte:fragment>
+	{/snippet}
+	{#snippet content()}
+		{@render children?.({
+			allowCopy: !$flowPropPickerConfig,
+			isConnecting: showConnecting,
+			selectConnection
+		})}
+	{/snippet}
 </Popover>
 
 <style>
diff --git a/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte b/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
index 7f3bdc3b16..93b8fca415 100644
--- a/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
+++ b/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	function useResizeObserver(node, callback) {
 		const observer = new ResizeObserver(() => {
 			callback()
@@ -20,7 +20,7 @@
 	import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
 	import StepHistory from './StepHistory.svelte'
 	import { Popover } from '$lib/components/meltComponents'
-	import { createEventDispatcher } from 'svelte'
+	import { untrack } from 'svelte'
 	import { Tooltip } from '$lib/components/meltComponents'
 	import type { Job } from '$lib/gen'
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
@@ -29,60 +29,92 @@
 	import DisplayResultControlBar from '$lib/components/DisplayResultControlBar.svelte'
 	import { base } from '$lib/base'
 
-	export let prefix: string = ''
-	export let allowCopy: boolean = false
-	export let connectingData: any | undefined = undefined
-	export let mock:
-		| {
-				enabled?: boolean
-				return_value?: unknown
-		  }
-		| undefined = { enabled: false }
-	export let moduleId: string = ''
-	export let fullResult: boolean = false
-	export let closeOnOutsideClick: boolean = false
-	export let getLogs: boolean = false
-	export let selectedJob: SelectedJob = undefined
-	export let forceJson: boolean = false
-	export let isLoading: boolean = false
-	export let preview: 'mock' | 'job' | undefined = undefined
-	export let hideHeaderBar: boolean = false
-	export let simpleViewer: any | undefined = undefined
-	export let path: string = ''
-	export let loopStatus:
-		| { type: 'inside' | 'self'; flow: 'forloopflow' | 'whileloopflow' }
-		| undefined = undefined
-	export let customHeight: number | undefined = undefined
-	export let rightMargin: boolean = false
-	export let disableMock: boolean = false
-	export let disableHistory: boolean = false
-	export let derivedHistoryOpen: boolean = false // derived from historyOpen
-	export let historyOffset = { mainAxis: 8, crossAxis: -4.5 }
+	interface Props {
+		prefix?: string
+		allowCopy?: boolean
+		connectingData?: any | undefined
+		mock?:
+			| {
+					enabled?: boolean
+					return_value?: unknown
+			  }
+			| undefined
+		moduleId?: string
+		fullResult?: boolean
+		closeOnOutsideClick?: boolean
+		getLogs?: boolean
+		selectedJob?: SelectedJob
+		forceJson?: boolean
+		isLoading?: boolean
+		preview?: 'mock' | 'job' | undefined
+		hideHeaderBar?: boolean
+		simpleViewer?: any | undefined
+		path?: string
+		loopStatus?: { type: 'inside' | 'self'; flow: 'forloopflow' | 'whileloopflow' } | undefined
+		customHeight?: number | undefined
+		rightMargin?: boolean
+		disableMock?: boolean
+		disableHistory?: boolean
+		lastJob?: SelectedJob
+		derivedHistoryOpen?: boolean // derived from historyOpen
+		historyOffset?: any
+		clazz?: string
+		copilot_fix?: import('svelte').Snippet
+		onSelect?: (key: string) => void
+		onUpdateMock?: (mock: { enabled: boolean; return_value?: unknown }) => void
+	}
+
+	let {
+		lastJob = undefined,
+		prefix = '',
+		allowCopy = false,
+		connectingData = undefined,
+		mock = $bindable({ enabled: false }),
+		moduleId = '',
+		fullResult = false,
+		closeOnOutsideClick = false,
+		getLogs = false,
+		selectedJob = $bindable(undefined),
+		forceJson = $bindable(false),
+		isLoading = $bindable(false),
+		preview = $bindable(undefined),
+		hideHeaderBar = false,
+		simpleViewer = undefined,
+		path = '',
+		loopStatus = undefined,
+		customHeight = undefined,
+		rightMargin = false,
+		disableMock = false,
+		disableHistory = false,
+		derivedHistoryOpen = $bindable(false),
+		historyOffset = { mainAxis: 8, crossAxis: -4.5 },
+		clazz,
+		copilot_fix,
+		onSelect,
+		onUpdateMock
+	}: Props = $props()
 
 	type SelectedJob =
-		| Job
-		| {
-				id: string
-				result: unknown
-				type: 'CompletedJob'
-				workspace_id: string
-				success: boolean
-		  }
+		| ((
+				| Job
+				| {
+						id: string
+						result: unknown
+						type: 'CompletedJob'
+						workspace_id: string
+						success: boolean
+				  }
+		  ) & { preview?: boolean })
 		| undefined
 
-	const dispatch = createEventDispatcher<{
-		updateMock: { enabled: boolean; return_value?: unknown }
-	}>()
-
-	let jsonView = false
-	let clientHeight: number = 0
-	let tmpMock: { enabled: boolean; return_value?: unknown } | undefined = undefined
-	let error = ''
-	let stepHistoryPopover: Popover | undefined = undefined
-	let lastJob: SelectedJob = undefined
-	let historyOpen = false
-	let contentEl: HTMLDivElement | undefined = undefined
-	let hasOverflow = false
+	let jsonView = $state(false)
+	let clientHeight: number = $state(0)
+	let tmpMock: { enabled: boolean; return_value?: unknown } | undefined = $state(undefined)
+	let error = $state('')
+	let stepHistoryPopover: Popover | undefined = $state(undefined)
+	let historyOpen = $state(false)
+	let contentEl: HTMLDivElement | undefined = $state(undefined)
+	let hasOverflow = $state(false)
 
 	function checkOverflow() {
 		if (contentEl) {
@@ -98,16 +130,16 @@
 		}
 	}
 
-	export function setLastJob(job: SelectedJob, setPreview: boolean = false) {
-		if (!job || !('result' in job)) {
+	$effect(() => {
+		if (!lastJob || !('result' in lastJob)) {
 			return
 		}
-		lastJob = structuredClone(job)
 		selectJob(lastJob)
-		if (setPreview && mock?.enabled) {
+
+		if (lastJob.preview) {
 			preview = 'job'
 		}
-	}
+	})
 
 	function togglePreview(nPrev: 'mock' | 'job' | undefined) {
 		if (!nPrev && preview === 'job') {
@@ -117,46 +149,15 @@
 		preview = nPrev
 	}
 
-	$: mockUpdateStatus =
-		preview === 'mock' && !mock?.enabled
-			? 'restore'
-			: preview === 'job' && mock?.enabled && selectedJob?.type === 'CompletedJob'
-				? 'override'
-				: undefined
-
-	let dblClickDisabled = false
-	let hoveringResult = false
-	let debouncedCanEditWithDblClick = false
+	let dblClickDisabled = $state(false)
+	let hoveringResult = $state(false)
+	let debouncedCanEditWithDblClick = $state(false)
 	let debounceTimeout: ReturnType<typeof setTimeout> | null = null
-	let canEditWithDblClick = false
-	let displayResultJob: DisplayResult | undefined = undefined
-	let displayResultMock: DisplayResult | undefined = undefined
-	let toolbarLocationJob: 'self' | 'external' | undefined = undefined
-	let toolbarLocationMock: 'self' | 'external' | undefined = undefined
-
-	$: derivedHistoryOpen = historyOpen
-
-	$: if (displayResultJob && typeof displayResultJob.getToolbarLocation === 'function') {
-		toolbarLocationJob = displayResultJob.getToolbarLocation()
-	}
-
-	$: if (displayResultMock && typeof displayResultMock.getToolbarLocation === 'function') {
-		toolbarLocationMock = displayResultMock.getToolbarLocation()
-	}
-
-	$: {
-		const newValue =
-			!!mock?.enabled &&
-			!connectingData &&
-			!dblClickDisabled &&
-			hoveringResult &&
-			!jsonView &&
-			!preview
-		if (newValue != canEditWithDblClick) {
-			canEditWithDblClick = newValue
-			updateCanEditWithDblClick(newValue)
-		}
-	}
+	let canEditWithDblClick = $state(false)
+	let displayResultJob: DisplayResult | undefined = $state(undefined)
+	let displayResultMock: DisplayResult | undefined = $state(undefined)
+	let toolbarLocationJob: 'self' | 'external' | undefined = $state(undefined)
+	let toolbarLocationMock: 'self' | 'external' | undefined = $state(undefined)
 
 	function updateCanEditWithDblClick(newValue: boolean) {
 		canEditWithDblClick = newValue
@@ -171,19 +172,19 @@
 	function togglePin() {
 		if (mock?.enabled && !preview) {
 			// Unpin
-			dispatch('updateMock', {
+			onUpdateMock?.({
 				...mock,
 				enabled: false
 			})
 		} else if (preview === 'mock') {
 			// Restore the pin
-			dispatch('updateMock', {
+			onUpdateMock?.({
 				...mock,
 				enabled: true
 			})
 		} else if (selectedJob && 'result' in selectedJob) {
 			// Pin the job
-			let mockValue = structuredClone(selectedJob.result)
+			let mockValue: any = structuredClone($state.snapshot(selectedJob.result))
 			if (selectedJob.result === 'never tested this far') {
 				mockValue = { example: 'value' }
 			}
@@ -191,10 +192,10 @@
 				enabled: true,
 				return_value: mockValue
 			}
-			dispatch('updateMock', newMock)
+			onUpdateMock?.(newMock)
 		} else {
 			// Fallback to mock
-			dispatch('updateMock', {
+			onUpdateMock?.({
 				enabled: true,
 				return_value: { example: 'value' }
 			})
@@ -208,11 +209,47 @@
 		}
 	}
 
-	$: popoverHeight = customHeight ?? (clientHeight > 0 ? clientHeight : 0)
+	let mockUpdateStatus = $derived(
+		preview === 'mock' && !mock?.enabled
+			? 'restore'
+			: preview === 'job' && mock?.enabled && selectedJob?.type === 'CompletedJob'
+				? 'override'
+				: undefined
+	)
+	$effect(() => {
+		derivedHistoryOpen = historyOpen
+	})
+	$effect(() => {
+		if (displayResultJob && typeof displayResultJob.getToolbarLocation === 'function') {
+			toolbarLocationJob = displayResultJob.getToolbarLocation()
+		}
+	})
+	$effect(() => {
+		if (displayResultMock && typeof displayResultMock.getToolbarLocation === 'function') {
+			toolbarLocationMock = displayResultMock.getToolbarLocation()
+		}
+	})
+	$effect(() => {
+		const newValue =
+			!!mock?.enabled &&
+			!connectingData &&
+			!dblClickDisabled &&
+			hoveringResult &&
+			!jsonView &&
+			!preview
+		if (newValue != canEditWithDblClick) {
+			canEditWithDblClick = newValue
+			untrack(() => updateCanEditWithDblClick(newValue))
+		}
+	})
+
+	let popoverHeight = $derived(customHeight ?? (clientHeight > 0 ? clientHeight : 0))
+
+	const copilot_fix_render = $derived(copilot_fix)
 </script>
 
 <div
-	class={twMerge('w-full h-full flex flex-col', $$props.class)}
+	class={twMerge('w-full h-full flex flex-col', clazz)}
 	bind:clientHeight
 	style={canEditWithDblClick ? 'cursor: text;' : ''}
 >
@@ -246,7 +283,7 @@
 						disablePopup={!!connectingData || jsonView}
 						bind:isOpen={historyOpen}
 					>
-						<svelte:fragment slot="trigger">
+						{#snippet trigger()}
 							<Button
 								color="light"
 								size="xs2"
@@ -255,8 +292,8 @@
 								startIcon={{ icon: History }}
 								nonCaptureEvent
 							/>
-						</svelte:fragment>
-						<svelte:fragment slot="content">
+						{/snippet}
+						{#snippet content()}
 							<div class="rounded-[inherit]" style={`height: ${popoverHeight}px`}>
 								<StepHistory
 									{moduleId}
@@ -306,7 +343,7 @@
 										: undefined}
 								/>
 							</div>
-						</svelte:fragment>
+						{/snippet}
 					</Popover>
 				{/if}
 				{#if !isLoading}
@@ -357,7 +394,7 @@
 						{#if preview}
 							<button
 								class="px-1 shrink-0 text-secondary text-xs text-thin"
-								on:click={() => {
+								onclick={() => {
 									if (historyOpen) {
 										// closing history popover exits preview
 										stepHistoryPopover?.close()
@@ -390,7 +427,9 @@
 								Override pin
 							{/if}
 						</Button>
-						<svelte:fragment slot="text">Pin data</svelte:fragment>
+						{#snippet text()}
+							Pin data
+						{/snippet}
 					</Tooltip>
 				{/if}
 
@@ -407,7 +446,7 @@
 							}
 							jsonView = false
 							mock = tmpMock
-							dispatch('updateMock', {
+							onUpdateMock?.({
 								enabled: tmpMock?.enabled ?? false,
 								return_value: tmpMock?.return_value
 							})
@@ -446,9 +485,9 @@
 									: ''
 							)}
 						/>
-						<svelte:fragment slot="text">
+						{#snippet text()}
 							{'Pin the output to allow editing'}
-						</svelte:fragment>
+						{/snippet}
 					</Tooltip>
 				{/if}
 			</div>
@@ -484,8 +523,8 @@
 		</div>
 	</div>
 
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 	<div
 		class={twMerge(
 			'grow min-h-0 rounded-md w-full pl-2 py-1 pb-2 overflow-auto',
@@ -497,9 +536,9 @@
 		<div
 			class={twMerge('h-full w-full rounded-md')}
 			bind:this={contentEl}
-			on:scroll={checkOverflow}
+			onscroll={checkOverflow}
 			use:useResizeObserver={checkOverflow}
-			on:mouseover={(event) => {
+			onmouseover={(event) => {
 				if (
 					!event.target ||
 					!(event.target instanceof HTMLElement) ||
@@ -518,17 +557,17 @@
 					dblClickDisabled = false
 				}
 			}}
-			on:dblclick={() => {
+			ondblclick={() => {
 				if (canEditWithDblClick) {
 					stepHistoryPopover?.close()
 					jsonView = true
 					tmpMock = undefined
 				}
 			}}
-			on:mouseenter={() => {
+			onmouseenter={() => {
 				hoveringResult = true
 			}}
-			on:mouseleave={() => {
+			onmouseleave={() => {
 				hoveringResult = false
 			}}
 		>
@@ -536,7 +575,7 @@
 				<div class="flex flex-col items-center justify-center">
 					<Loader2 class="animate-spin" />
 				</div>
-			{:else if connectingData || simpleViewer}
+			{:else if connectingData !== undefined || simpleViewer}
 				<ObjectViewer
 					json={moduleId
 						? {
@@ -546,7 +585,9 @@
 					topBrackets={false}
 					pureViewer={false}
 					{prefix}
-					on:select
+					on:select={(e) => {
+						onSelect?.(e.detail)
+					}}
 					{allowCopy}
 				/>
 			{:else if jsonView}
@@ -560,7 +601,7 @@
 							if (mock?.enabled) {
 								const newMock = {
 									enabled: true,
-									return_value: structuredClone(detail)
+									return_value: structuredClone($state.snapshot(detail))
 								}
 								tmpMock = newMock
 							}
@@ -614,9 +655,9 @@
 									toolbarLocationJob = detail
 								}}
 							>
-								<svelte:fragment slot="copilot-fix">
-									<slot name="copilot-fix" />
-								</svelte:fragment>
+								{#snippet copilot_fix()}
+									{@render copilot_fix_render?.()}
+								{/snippet}
 							</DisplayResult>
 						{/key}
 					</div>
@@ -638,12 +679,12 @@
 							{' or'}
 							<button
 								class="text-blue-500 hover:text-blue-700 underline"
-								on:click={() => {
+								onclick={() => {
 									const newMock = {
 										enabled: true,
 										return_value: mock?.return_value ?? { example: 'value' }
 									}
-									dispatch('updateMock', newMock)
+									onUpdateMock?.(newMock)
 								}}>pin data<Pin size={16} class="inline" /></button
 							>{:else}.{/if}
 					</p>
diff --git a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
index 56f1f3c3ae..f14f791411 100644
--- a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
+++ b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
@@ -11,25 +11,38 @@
 	import InfiniteList from '$lib/components/InfiniteList.svelte'
 	import { JobService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { getContext, createEventDispatcher } from 'svelte'
+	import { getContext, createEventDispatcher, untrack } from 'svelte'
 	import type { FlowEditorContext } from '../types'
 	import { Pin } from 'lucide-svelte'
 	import { Cell } from '$lib/components/table'
 	import JobPickerLight from './JobPickerLight.svelte'
 
-	export let selected: string | undefined = undefined
-	export let moduleId: string = ''
-	export let getLogs: boolean = false
-	export let mockValue: any = undefined
-	export let mockEnabled: boolean = false
-	export let path: string = ''
-	export let staticInputs: undefined | StepHistoryData[] = undefined
-	export let noHistory: 'isLoop' | 'isInsideLoop' | undefined = undefined
+	interface Props {
+		selected?: string | undefined
+		moduleId?: string
+		getLogs?: boolean
+		mockValue?: any
+		mockEnabled?: boolean
+		path?: string
+		staticInputs?: undefined | StepHistoryData[]
+		noHistory?: 'isLoop' | 'isInsideLoop' | undefined
+	}
+
+	let {
+		selected = $bindable(undefined),
+		moduleId = '',
+		getLogs = false,
+		mockValue = undefined,
+		mockEnabled = false,
+		path = '',
+		staticInputs = undefined,
+		noHistory = undefined
+	}: Props = $props()
 
 	const { pathStore } = getContext<FlowEditorContext>('FlowEditorContext') ?? {}
 	const dispatch = createEventDispatcher()
 
-	let infiniteList: InfiniteList | undefined = undefined
+	let infiniteList: InfiniteList | undefined = $state(undefined)
 	let loadInputsPageFn:
 		| ((page: number, perPage: number) => Promise<StepHistoryData[]>)
 		| undefined = undefined
@@ -55,7 +68,9 @@
 		infiniteList?.setLoader(loadInputsPageFn)
 	}
 
-	$: staticInputs && infiniteList?.loadData('forceRefresh')
+	$effect(() => {
+		staticInputs && infiniteList?.loadData('forceRefresh')
+	})
 
 	async function getJobResultAndLogs(jobId: string, noLogs: boolean) {
 		try {
@@ -71,7 +86,9 @@
 		}
 	}
 
-	$: infiniteList && !noHistory && initLoadInputs()
+	$effect(() => {
+		infiniteList && !noHistory && untrack(() => initLoadInputs())
+	})
 
 	function handleSelect(e: CustomEvent) {
 		if (e.detail === 'extraRow') {
@@ -111,7 +128,7 @@
 		class: 'bg-blue-50 dark:bg-blue-700/40'
 	}}
 >
-	<svelte:fragment slot="extra-row">
+	{#snippet extra_row()}
 		{#if mockValue}
 			<Cell wrap colspan="2">
 				<div
@@ -125,17 +142,17 @@
 				</div>
 			</Cell>
 		{/if}
-	</svelte:fragment>
-	<svelte:fragment slot="columns">
+	{/snippet}
+	{#snippet columns()}
 		<colgroup>
 			<col class="w-28" />
 			<col />
 		</colgroup>
-	</svelte:fragment>
-	<svelte:fragment let:item>
+	{/snippet}
+	{#snippet children({ item })}
 		<JobPickerLight job={item} />
-	</svelte:fragment>
-	<svelte:fragment slot="empty">
+	{/snippet}
+	{#snippet empty()}
 		<div class="text-center text-tertiary text-xs py-2 px-2">
 			{noHistory === 'isLoop'
 				? 'History is not available with loops.'
@@ -143,5 +160,5 @@
 					? 'History is not available inside loops.'
 					: 'No run in history for this step'}
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </InfiniteList>
diff --git a/frontend/src/lib/components/flows/scheduleUtils.ts b/frontend/src/lib/components/flows/scheduleUtils.ts
index 6d77a87e51..3d1131b387 100644
--- a/frontend/src/lib/components/flows/scheduleUtils.ts
+++ b/frontend/src/lib/components/flows/scheduleUtils.ts
@@ -4,6 +4,7 @@ import type { Writable } from 'svelte/store'
 import { writable } from 'svelte/store'
 import { get } from 'svelte/store'
 import { sendUserToast } from '$lib/utils'
+import { stateSnapshot } from '$lib/svelte5Utils.svelte'
 
 // Load the schedule of a flow given its path and the workspace
 export async function loadSchedule(path: string, workspace: string): Promise<ScheduleTrigger> {
@@ -45,7 +46,7 @@ export async function loadSchedules(
 	if (!path || path == '') {
 		schedules.set([])
 		primarySchedule.update((ps) => (ps === undefined ? false : ps))
-		initialPrimarySchedule.set(structuredClone(get(primarySchedule)))
+		initialPrimarySchedule.set(structuredClone(stateSnapshot(get(primarySchedule))))
 		return
 	}
 	try {
@@ -73,7 +74,7 @@ export async function loadSchedules(
 				: false
 		}
 		primarySchedule.update((ps) => (ps === undefined || forceRefresh ? remotePrimarySchedule : ps))
-		initialPrimarySchedule.set(structuredClone(remotePrimarySchedule))
+		initialPrimarySchedule.set(structuredClone(stateSnapshot(remotePrimarySchedule)))
 
 		triggersCount.update((tc) => {
 			const primary = get(primarySchedule)
diff --git a/frontend/src/lib/components/flows/types.ts b/frontend/src/lib/components/flows/types.ts
index b72c321615..b9a12e56b2 100644
--- a/frontend/src/lib/components/flows/types.ts
+++ b/frontend/src/lib/components/flows/types.ts
@@ -1,9 +1,12 @@
-import type { FlowModule, OpenFlow } from '$lib/gen'
+import type { OpenFlow } from '$lib/gen'
 import type { History } from '$lib/history'
 import type { Writable } from 'svelte/store'
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte'
 import type { FlowState } from './flowState'
 import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui'
+import type Editor from '../Editor.svelte'
+import type SimpleEditor from '../SimpleEditor.svelte'
+import type { StateStore } from '$lib/utils'
 
 export type FlowInput = Record<
 	string,
@@ -39,14 +42,31 @@ export type FlowInputEditorState = {
 	payloadData: Record<string, any> | undefined
 }
 
+export type CurrentEditor =
+	| ((
+			| {
+					type: 'script'
+					editor: Editor
+					showDiffMode: () => void
+					hideDiffMode: () => void
+					diffMode: boolean
+					lastDeployedCode: string | undefined
+			  }
+			| { type: 'iterator'; editor: SimpleEditor }
+	  ) & {
+			stepId: string
+	  })
+	| undefined
+
 export type FlowEditorContext = {
 	selectedId: Writable<string>
-	moving: Writable<{ module: FlowModule; modules: FlowModule[] } | undefined>
-	previewArgs: Writable<Record<string, any>>
+	currentEditor: Writable<CurrentEditor>
+	moving: Writable<{ id: string } | undefined>
+	previewArgs: StateStore<Record<string, any>>
 	scriptEditorDrawer: Writable<ScriptEditorDrawer | undefined>
 	history: History<OpenFlow>
 	pathStore: Writable<string>
-	flowStore: Writable<ExtendedOpenFlow>
+	flowStore: StateStore<ExtendedOpenFlow>
 	flowInputEditorState: Writable<FlowInputEditorState>
 	flowStateStore: Writable<FlowState>
 	testStepStore: Writable<Record<string, any>>
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index b3270331ea..03103c384c 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -5,8 +5,7 @@ import {
 	type InputTransform,
 	type Job,
 	type RestartedFrom,
-	type OpenFlow,
-	type FlowModuleValue
+	type OpenFlow
 } from '$lib/gen'
 import { workspaceStore } from '$lib/stores'
 import { cleanExpr, emptySchema } from '$lib/utils'
@@ -15,8 +14,6 @@ import type { FlowModuleState } from './flowState'
 import { type PickableProperties, dfs } from './previousResults'
 import { NEVER_TESTED_THIS_FAR } from './models'
 import { sendUserToast } from '$lib/toast'
-import type { Schema } from '$lib/common'
-import { parseOutputs } from '$lib/infer'
 import type { ExtendedOpenFlow } from './types'
 
 function create_context_function_template(eval_string: string, context: Record<string, any>) {
@@ -188,135 +185,6 @@ export function emptyFlowModuleState(): FlowModuleState {
 	}
 }
 
-export function isInputFilled(
-	inputTransforms: Record<string, InputTransform>,
-	key: string,
-	schema: Schema | undefined
-): boolean {
-	const required = schema?.required?.includes(key) ?? false
-
-	if (!required) {
-		return true
-	}
-
-	if (inputTransforms.hasOwnProperty(key)) {
-		const transform = inputTransforms[key]
-		if (
-			transform?.type === 'static' &&
-			(transform?.value === undefined || transform?.value === '' || transform?.value === null)
-		) {
-			return false
-		} else if (
-			transform?.type === 'javascript' &&
-			(transform?.expr === undefined || transform?.expr === '' || transform?.expr === null)
-		) {
-			return false
-		}
-	}
-
-	return true
-}
-
-async function isConnectedToMissingModule(
-	argName: string,
-	flowModuleValue: FlowModuleValue,
-	moduleIds: string[]
-): Promise<string | undefined> {
-	const type = flowModuleValue.type
-
-	if (type === 'rawscript' || type === 'script' || type === 'flow') {
-		const input = flowModuleValue?.input_transforms[argName]
-		const val: string = input.type === 'static' ? String(input.value) : input.expr
-
-		try {
-			const outputs = await parseOutputs(val, true)
-			let error: string = ''
-
-			outputs?.forEach(([componentId, id]) => {
-				if (componentId === 'results') {
-					if (!moduleIds.includes(id)) {
-						error += `Input ${argName} is connected to a missing module with id ${id}\n`
-					}
-				}
-			})
-
-			return error
-		} catch (e) {
-			return `Input ${argName} expression is invalid`
-		}
-	}
-
-	return
-}
-
-export async function computeFlowStepWarning(
-	argName: string,
-	flowModuleValue: FlowModuleValue,
-	messages: Record<
-		string,
-		{
-			message: string
-			type: 'error' | 'warning'
-		}
-	>,
-	schema: Schema | undefined,
-	moduleIds: string[] = []
-) {
-	if (messages[argName]) {
-		delete messages[argName]
-	}
-
-	const type = flowModuleValue.type
-	if (type == 'rawscript' || type == 'script' || type == 'flow') {
-		if (!isInputFilled(flowModuleValue.input_transforms, argName, schema)) {
-			messages[argName] = {
-				message: `Input ${argName} is required but not filled`,
-				type: 'warning'
-			}
-		}
-
-		const errorMessage = await isConnectedToMissingModule(argName, flowModuleValue, moduleIds)
-
-		if (errorMessage) {
-			messages[argName] = {
-				message: errorMessage,
-				type: 'error'
-			}
-		} else {
-			if (messages[argName]?.type === 'error') {
-				delete messages[argName]
-			}
-		}
-	}
-
-	return messages
-}
-
-export async function initFlowStepWarnings(
-	flowModuleValue: FlowModuleValue,
-	schema: Schema | undefined,
-	moduleIds: string[] = []
-) {
-	const messages: Record<
-		string,
-		{
-			message: string
-			type: 'error' | 'warning'
-		}
-	> = {}
-	const type = flowModuleValue.type
-
-	if (type == 'rawscript' || type == 'script' || type == 'flow') {
-		const keys = Object.keys(flowModuleValue.input_transforms ?? {})
-		const promises = keys.map(async (key) => {
-			await computeFlowStepWarning(key, flowModuleValue, messages, schema, moduleIds)
-		})
-		await Promise.all(promises)
-	}
-
-	return messages
-}
-
 export function checkIfParentLoop(
 	flowStore: ExtendedOpenFlow,
 	modId: string
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index f0c1b0bc9e..f6827965e3 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { FlowService, type FlowModule } from '../../gen'
 	import { NODE, type GraphModuleState } from '.'
-	import { createEventDispatcher, getContext, onDestroy, onMount, setContext, tick } from 'svelte'
+	import { getContext, onDestroy, setContext, tick, untrack } from 'svelte'
 
 	import { get, writable, type Writable } from 'svelte/store'
-	import '@xyflow/svelte/dist/style.css'
+	import '@xyflow/svelte/dist/base.css'
 	import type { FlowInput } from '../flows/types'
 	import {
 		SvelteFlow,
@@ -13,13 +13,21 @@
 		ConnectionLineType,
 		Controls,
 		ControlButton,
-		type Viewport
+		SvelteFlowProvider
 	} from '@xyflow/svelte'
-	import { graphBuilder, isTriggerStep, type SimplifiableFlow } from './graphBuilder'
+	import {
+		graphBuilder,
+		isTriggerStep,
+		type InlineScript,
+		type InsertKind,
+		type NodeLayout,
+		type onSelectedIteration,
+		type SimplifiableFlow
+	} from './graphBuilder.svelte'
 	import ModuleNode from './renderers/nodes/ModuleNode.svelte'
 	import InputNode from './renderers/nodes/InputNode.svelte'
 	import BranchAllStart from './renderers/nodes/BranchAllStart.svelte'
-	import BranchAllEndNode from './renderers/nodes/branchAllEndNode.svelte'
+	import BranchAllEndNode from './renderers/nodes/BranchAllEndNode.svelte'
 	import ForLoopEndNode from './renderers/nodes/ForLoopEndNode.svelte'
 	import ForLoopStartNode from './renderers/nodes/ForLoopStartNode.svelte'
 	import ResultNode from './renderers/nodes/ResultNode.svelte'
@@ -42,58 +50,110 @@
 	import { workspaceStore } from '$lib/stores'
 	import SubflowBound from './renderers/nodes/SubflowBound.svelte'
 	import { deepEqual } from 'fast-equals'
-
-	export let success: boolean | undefined = undefined
-	export let modules: FlowModule[] | undefined = []
-	export let failureModule: FlowModule | undefined = undefined
-	export let preprocessorModule: FlowModule | undefined = undefined
-	export let minHeight: number = 0
-	export let maxHeight: number | undefined = undefined
-	export let notSelectable = false
-	export let flowModuleStates: Record<string, GraphModuleState> | undefined = undefined
-
-	export let selectedId: Writable<string | undefined> = writable<string | undefined>(undefined)
-	export let path: string | undefined = undefined
-	export let newFlow: boolean = false
-
-	export let insertable = false
-	export let earlyStop: boolean = false
-	export let cache: boolean = false
-	export let scroll = false
-	export let moving: string | undefined = undefined
-
-	// Download: display a top level button to open the graph in a new tab
-	export let download = false
-	export let fullSize = false
-	export let disableAi = false
-	export let flowInputsStore: Writable<FlowInput | undefined> = writable<FlowInput | undefined>(
-		undefined
-	)
-	export let triggerNode = false
-	export let workspace: string = $workspaceStore ?? 'NO_WORKSPACE'
-	export let editMode = false
+	import ViewportResizer from './ViewportResizer.svelte'
 
 	let useDataflow: Writable<boolean | undefined> = writable<boolean | undefined>(false)
 
+	const triggerContext = getContext<TriggerContext>('TriggerContext')
+
+	let fullWidth = 0
+	let width = $state(0)
+
+	let simplifiableFlow: SimplifiableFlow | undefined = $state(undefined)
+
+	interface Props {
+		success?: boolean | undefined
+		modules?: FlowModule[] | undefined
+		failureModule?: FlowModule | undefined
+		preprocessorModule?: FlowModule | undefined
+		minHeight?: number
+		maxHeight?: number | undefined
+		notSelectable?: boolean
+		flowModuleStates?: Record<string, GraphModuleState> | undefined
+		selectedId?: Writable<string | undefined>
+		path?: string | undefined
+		newFlow?: boolean
+		insertable?: boolean
+		earlyStop?: boolean
+		cache?: boolean
+		scroll?: boolean
+		moving?: string | undefined
+		// Download: display a top level button to open the graph in a new tab
+		download?: boolean
+		fullSize?: boolean
+		disableAi?: boolean
+		flowInputsStore?: Writable<FlowInput | undefined>
+		triggerNode?: boolean
+		workspace?: string
+		editMode?: boolean
+		allowSimplifiedPoll?: boolean
+		expandedSubflows?: Record<string, FlowModule[]>
+		onDelete?: (id: string) => void
+		onInsert?: (detail: {
+			sourceId?: string
+			targetId?: string
+			branch?: { rootId: string; branch: number }
+			index: number
+			detail: string
+			isPreprocessor?: boolean
+			inlineScript?: InlineScript
+			script?: { path: string; summary: string; hash: string | undefined }
+			flow?: { path: string; summary: string }
+			kind: InsertKind
+		}) => Promise<void>
+		onNewBranch?: (id: string) => Promise<void>
+		onSelect?: (id: string | FlowModule) => void
+		onDeleteBranch?: (detail: { id: string; index: number }) => Promise<void>
+		onChangeId?: (detail: { id: string; newId: string; deps: Record<string, string[]> }) => void
+		onMove?: (id: string) => void
+		onUpdateMock?: (detail: { mock: FlowModule['mock']; id: string }) => void
+		onSelectedIteration?: onSelectedIteration
+	}
+
+	let {
+		onInsert = undefined,
+		onDelete = undefined,
+		onMove = undefined,
+		onDeleteBranch = undefined,
+		onNewBranch = undefined,
+		onSelect = undefined,
+		onChangeId = undefined,
+
+		onUpdateMock = undefined,
+		onSelectedIteration = undefined,
+		success = undefined,
+		modules = [],
+		failureModule = undefined,
+		preprocessorModule = undefined,
+		minHeight = 0,
+		maxHeight = undefined,
+		notSelectable = false,
+		flowModuleStates = undefined,
+		selectedId = writable<string | undefined>(undefined),
+		path = undefined,
+		newFlow = false,
+		insertable = false,
+		earlyStop = false,
+		cache = false,
+		scroll = false,
+		moving = undefined,
+		download = false,
+		fullSize = false,
+		disableAi = false,
+		flowInputsStore = writable<FlowInput | undefined>(undefined),
+		triggerNode = false,
+		workspace = $workspaceStore ?? 'NO_WORKSPACE',
+		editMode = false,
+		allowSimplifiedPoll = true,
+		expandedSubflows = $bindable({})
+	}: Props = $props()
+
 	setContext<{
 		selectedId: Writable<string | undefined>
 		flowInputsStore: Writable<FlowInput | undefined>
 		useDataflow: Writable<boolean | undefined>
 	}>('FlowGraphContext', { selectedId, flowInputsStore, useDataflow })
 
-	const triggerContext = getContext<TriggerContext>('TriggerContext')
-
-	const dispatch = createEventDispatcher()
-
-	let fullWidth = 0
-	let width = 0
-
-	export let allowSimplifiedPoll: boolean = true
-
-	let simplifiableFlow: SimplifiableFlow | undefined = undefined
-
-	export let expandedSubflows: Record<string, FlowModule[]> = {}
-
 	if (triggerContext && allowSimplifiedPoll) {
 		if (isSimplifiable(modules)) {
 			triggerContext?.simplifiedPoll?.set(true)
@@ -121,9 +181,12 @@
 		)
 	}
 
-	$: allowSimplifiedPoll && onModulesChange(modules ?? [])
-
-	function layoutNodes(nodes: Node[]): Node[] {
+	let lastNodes: [NodeLayout[], Node[]] | undefined = undefined
+	function layoutNodes(nodes: NodeLayout[]): Node[] {
+		let lastResult = lastNodes?.[1]
+		if (lastResult && deepEqual(nodes, lastNodes?.[0])) {
+			return lastResult
+		}
 		let seenId: string[] = []
 		for (const n of nodes) {
 			if (seenId.includes(n.id)) {
@@ -132,27 +195,43 @@
 			seenId.push(n.id)
 		}
 
-		const flattenParentIds = nodes.map((n) => ({
-			...n,
-			parentIds: n.data?.parentIds ?? []
-		})) as any
+		let nodeWidths: Record<string, number> = {}
+		const nodes2 = nodes.map((n) => {
+			return { ...n, position: { x: 0, y: 0 } }
+		})
+		for (const n of nodes.reverse()) {
+			const endId = n.id + '-end'
 
-		const stratify = dagStratify().id(({ id }: Node) => id)
-		const dag = stratify(flattenParentIds)
+			if (nodeWidths[endId] != undefined) {
+				nodeWidths[n.id] = Math.max(nodeWidths[n.id] ?? 0, nodeWidths[endId])
+			}
+			if (n.parentIds && n.parentIds?.length == 1) {
+				const parent = n.parentIds[0]
+				const nodeWidth = nodeWidths[n.id] ?? 1
+				nodeWidths[parent] = (nodeWidths[parent] ?? 0) + nodeWidth
+			}
+		}
+
+		const dag = dagStratify().id(({ id }: Node) => id)(nodes2)
 
 		let boxSize: any
 		try {
 			const layout = sugiyama()
 				.decross(nodes.length > 20 ? decrossTwoLayer() : decrossOpt())
 				.coord(coordCenter())
-				.nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical])
-			boxSize = layout(dag)
+				.nodeSize((d) => {
+					return [
+						(nodeWidths[d?.data?.['id'] ?? ''] ?? 1) * (NODE.width + NODE.gap.horizontal * 1),
+						NODE.height + NODE.gap.vertical
+					] as readonly [number, number]
+				})
+			boxSize = layout(dag as any)
 		} catch {
 			const layout = sugiyama()
 				.decross(decrossTwoLayer())
 				.coord(coordCenter())
 				.nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical])
-			boxSize = layout(dag)
+			boxSize = layout(dag as any)
 		}
 
 		const newNodes = dag.descendants().map((des) => ({
@@ -173,41 +252,40 @@
 			}
 		}))
 
+		lastNodes = [nodes, newNodes]
 		return newNodes
 	}
 
 	let eventHandler = {
 		deleteBranch: (detail, label) => {
 			$selectedId = label
-			dispatch('deleteBranch', detail)
+			onDeleteBranch?.(detail)
 		},
 		insert: (detail) => {
-			dispatch('insert', detail)
+			onInsert?.(detail)
 		},
 		select: (modId) => {
 			if (!notSelectable) {
 				if ($selectedId != modId) {
 					$selectedId = modId
 				}
-				dispatch('select', modId)
+				onSelect?.(modId)
 			}
 		},
 		changeId: (detail) => {
-			dispatch('changeId', detail)
+			onChangeId?.(detail)
 		},
-		delete: (detail, label) => {
-			$selectedId = label
-
-			dispatch('delete', detail)
+		delete: (detail) => {
+			onDelete?.(detail.id)
 		},
-		newBranch: (module) => {
-			dispatch('newBranch', { module })
+		newBranch: (id) => {
+			onNewBranch?.(id)
 		},
-		move: (module, modules) => {
-			dispatch('move', { module, modules })
+		move: (detail) => {
+			onMove?.(detail.id)
 		},
-		selectedIteration: (detail, moduleId) => {
-			dispatch('selectedIteration', { ...detail, moduleId: moduleId })
+		selectedIteration: (detail) => {
+			onSelectedIteration?.(detail)
 		},
 		simplifyFlow: (detail) => {
 			triggerContext?.simplifiedPoll.set(detail)
@@ -221,51 +299,25 @@
 			delete expandedSubflows[id]
 			expandedSubflows = expandedSubflows
 		},
-		updateMock: () => {
-			dispatch('updateMock')
+		updateMock: (detail) => {
+			onUpdateMock?.(detail)
 		}
 	}
 
-	let lastModules = structuredClone(modules)
-	let newModules = modules
-	$: modules && onModulesChange2(modules)
-
+	let lastModules = structuredClone($state.snapshot(modules))
+	let moduleCounter = $state(0)
 	function onModulesChange2(modules) {
 		if (!deepEqual(modules, lastModules)) {
-			lastModules = structuredClone(modules)
-			newModules = modules
+			console.log('modules changed', modules)
+			lastModules = structuredClone($state.snapshot(modules))
+			moduleCounter++
 		}
 	}
 
-	$: graph = graphBuilder(
-		newModules,
-		{
-			disableAi,
-			insertable,
-			flowModuleStates,
-			selectedId: $selectedId,
-			path,
-			newFlow,
-			cache,
-			earlyStop,
-			editMode
-		},
-		failureModule,
-		preprocessorModule,
-		eventHandler,
-		success,
-		$useDataflow,
-		$selectedId,
-		moving,
-		simplifiableFlow,
-		triggerNode ? path : undefined,
-		expandedSubflows
-	)
+	let nodes = $state.raw<Node[]>([])
+	let edges = $state.raw<Edge[]>([])
 
-	const nodes = writable<Node[]>([])
-	const edges = writable<Edge[]>([])
-
-	let height = 0
+	let height = $state(0)
 
 	function isSimplifiable(modules: FlowModule[] | undefined): boolean {
 		if (!modules || modules?.length !== 2) {
@@ -285,14 +337,12 @@
 		}
 		let newGraph = graph
 
-		$nodes = layoutNodes(newGraph.nodes)
-		$edges = newGraph.edges
+		nodes = layoutNodes(newGraph.nodes)
+		edges = newGraph.edges
 		await tick()
-		height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 100), minHeight)
+		height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight)
 	}
 
-	$: (graph || allowSimplifiedPoll) && updateStores()
-
 	const nodeTypes = {
 		input2: InputNode,
 		module: ModuleNode,
@@ -319,42 +369,82 @@
 
 	const proOptions = { hideAttribution: true }
 
-	$: showDataflow =
+	// onMount(() => {
+	// 	centerViewport(width)
+	// })
+	let yamlEditorDrawer: Drawer | undefined = $state(undefined)
+
+	$effect(() => {
+		allowSimplifiedPoll && modules && untrack(() => onModulesChange(modules ?? []))
+	})
+	$effect(() => {
+		modules && untrack(() => onModulesChange2(modules))
+	})
+	let graph = $derived.by(() => {
+		moduleCounter
+		return graphBuilder(
+			untrack(() => modules),
+			{
+				disableAi,
+				insertable,
+				flowModuleStates,
+				selectedId: $selectedId,
+				path,
+				newFlow,
+				cache,
+				earlyStop,
+				editMode
+			},
+			failureModule,
+			preprocessorModule,
+			eventHandler,
+			success,
+			$useDataflow,
+			$selectedId,
+			moving,
+			simplifiableFlow,
+			triggerNode ? path : undefined,
+			expandedSubflows
+		)
+	})
+	$effect(() => {
+		;(graph || allowSimplifiedPoll) && untrack(() => updateStores())
+	})
+	let showDataflow = $derived(
 		$selectedId != undefined &&
-		!$selectedId.startsWith('constants') &&
-		!$selectedId.startsWith('settings') &&
-		$selectedId !== 'failure' &&
-		$selectedId !== 'preprocessor' &&
-		$selectedId !== 'Result' &&
-		$selectedId !== 'triggers'
-
-	const viewport = writable<Viewport>({
-		x: 0,
-		y: 35,
-		zoom: 1
+			!$selectedId.startsWith('constants') &&
+			!$selectedId.startsWith('settings') &&
+			$selectedId !== 'failure' &&
+			$selectedId !== 'preprocessor' &&
+			$selectedId !== 'Result' &&
+			$selectedId !== 'triggers'
+	)
+	let debouncedWidth: number | undefined = $state(undefined)
+	let timeout: NodeJS.Timeout | undefined = $state(undefined)
+	$effect(() => {
+		if (!debouncedWidth) {
+			return
+		}
+		if (untrack(() => width) == undefined) {
+			width = debouncedWidth
+			return
+		}
+		if (untrack(() => timeout)) {
+			clearTimeout(untrack(() => timeout))
+		}
+		timeout = setTimeout(() => {
+			if (debouncedWidth && untrack(() => width) != debouncedWidth) {
+				width = debouncedWidth
+			}
+		}, 10)
 	})
-
-	function centerViewport(width: number) {
-		viewport.update((vp) => ({
-			...vp,
-			x: (width - fullWidth) / 2,
-			y: vp.y
-		}))
-	}
-
-	$: width && centerViewport(width)
-
-	onMount(() => {
-		centerViewport(width)
-	})
-	let yamlEditorDrawer: Drawer | undefined = undefined
 </script>
 
 {#if insertable}
 	<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 {/if}
 
-<div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={width}>
+<div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={debouncedWidth}>
 	{#if graph?.error}
 		<div class="center-center p-2">
 			<Alert title="Error parsing the flow" type="error" class="max-w-1/2">
@@ -369,70 +459,74 @@
 			</Alert>
 		</div>
 	{:else}
-		<SvelteFlow
-			on:paneclick={(e) => {
-				document.dispatchEvent(new Event('focus'))
-			}}
-			{nodes}
-			{edges}
-			{edgeTypes}
-			{nodeTypes}
-			{viewport}
-			{height}
-			minZoom={0.5}
-			connectionLineType={ConnectionLineType.SmoothStep}
-			defaultEdgeOptions={{ type: 'smoothstep' }}
-			preventScrolling={scroll}
-			zoomOnDoubleClick={false}
-			elementsSelectable={false}
-			{proOptions}
-			nodesDraggable={false}
-			--background-color={false}
-		>
-			<div class="absolute inset-0 !bg-surface-secondary"></div>
-			<Controls position="top-right" orientation="horizontal" showLock={false}>
-				{#if download}
-					<ControlButton
-						on:click={() => {
-							try {
-								localStorage.setItem(
-									'svelvet',
-									encodeState({ modules, failureModule, preprocessorModule })
-								)
-							} catch (e) {
-								console.error('error interacting with local storage', e)
-							}
-							window.open('/view_graph', '_blank')
-						}}
-						class="!bg-surface"
-					>
-						<Expand size="14" />
-					</ControlButton>
-				{/if}
-			</Controls>
-
-			<Controls
-				position="top-left"
-				orientation="horizontal"
-				showLock={false}
-				showZoom={false}
-				showFitView={false}
-				class="!shadow-none"
+		<SvelteFlowProvider>
+			<ViewportResizer {width} />
+			<SvelteFlow
+				onpaneclick={(e) => {
+					document.dispatchEvent(new Event('focus'))
+				}}
+				{nodes}
+				{edges}
+				{edgeTypes}
+				{nodeTypes}
+				{height}
+				{width}
+				minZoom={0.2}
+				maxZoom={1.2}
+				connectionLineType={ConnectionLineType.SmoothStep}
+				defaultEdgeOptions={{ type: 'smoothstep' }}
+				preventScrolling={scroll}
+				zoomOnDoubleClick={false}
+				elementsSelectable={false}
+				{proOptions}
+				nodesDraggable={false}
+				--background-color={false}
 			>
-				{#if showDataflow}
-					<Toggle
-						value={$useDataflow}
-						on:change={() => {
-							$useDataflow = !$useDataflow
-						}}
-						size="xs"
-						options={{
-							right: 'Dataflow'
-						}}
-					/>
-				{/if}
-			</Controls>
-		</SvelteFlow>
+				<div class="absolute inset-0 !bg-surface-secondary"></div>
+				<Controls position="top-right" orientation="horizontal" showLock={false}>
+					{#if download}
+						<ControlButton
+							onclick={() => {
+								try {
+									localStorage.setItem(
+										'svelvet',
+										encodeState({ modules, failureModule, preprocessorModule })
+									)
+								} catch (e) {
+									console.error('error interacting with local storage', e)
+								}
+								window.open('/view_graph', '_blank')
+							}}
+							class="!bg-surface"
+						>
+							<Expand size="14" />
+						</ControlButton>
+					{/if}
+				</Controls>
+
+				<Controls
+					position="top-left"
+					orientation="horizontal"
+					showLock={false}
+					showZoom={false}
+					showFitView={false}
+					class="!shadow-none"
+				>
+					{#if showDataflow}
+						<Toggle
+							value={$useDataflow}
+							on:change={() => {
+								$useDataflow = !$useDataflow
+							}}
+							size="xs"
+							options={{
+								right: 'Dataflow'
+							}}
+						/>
+					{/if}
+				</Controls>
+			</SvelteFlow>
+		</SvelteFlowProvider>
 	{/if}
 </div>
 
diff --git a/frontend/src/lib/components/graph/ViewportResizer.svelte b/frontend/src/lib/components/graph/ViewportResizer.svelte
new file mode 100644
index 0000000000..dbfd7d02c4
--- /dev/null
+++ b/frontend/src/lib/components/graph/ViewportResizer.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { useSvelteFlow } from '@xyflow/svelte'
+	import { untrack } from 'svelte'
+
+	let { width } = $props()
+	const { setViewport, getViewport } = useSvelteFlow()
+
+	$effect(() => {
+		;[width]
+		untrack(() => onWidthChange(width))
+	})
+	let lastWidth: number | undefined = undefined
+
+	function onWidthChange(width: number) {
+		if (lastWidth === width) return
+		const viewport = getViewport()
+		let diff = width - (lastWidth ?? 0)
+		lastWidth = width
+		setViewport({
+			...viewport,
+			x: viewport.x + diff / 2
+		})
+	}
+</script>
diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.svelte.ts
similarity index 59%
rename from frontend/src/lib/components/graph/graphBuilder.ts
rename to frontend/src/lib/components/graph/graphBuilder.svelte.ts
index ab851db42e..b05a3610da 100644
--- a/frontend/src/lib/components/graph/graphBuilder.ts
+++ b/frontend/src/lib/components/graph/graphBuilder.svelte.ts
@@ -1,23 +1,57 @@
-import type { FlowModule } from '$lib/gen'
-import { type Node, type Edge } from '@xyflow/svelte'
+import type { FlowModule, RawScript, Script } from '$lib/gen'
+import { type Edge } from '@xyflow/svelte'
 import { getDependeeAndDependentComponents } from '../flows/flowExplorer'
 import { dfsByModule } from '../flows/previousResults'
 import { defaultIfEmptyString } from '$lib/utils'
 import type { GraphModuleState } from './model'
 
+export type InsertKind =
+	| 'script'
+	| 'forloop'
+	| 'whileloop'
+	| 'branchone'
+	| 'branchall'
+	| 'flow'
+	| 'trigger'
+	| 'approval'
+	| 'end'
+
+export type InlineScript = {
+	language: RawScript['language']
+	kind: Script['kind']
+	subkind: 'pgsql' | 'flow'
+	summary?: string
+	instructions?: string
+}
+
+export type onSelectedIteration = (
+	detail:
+		| { id: string; index: number; manuallySet: true; moduleId: string }
+		| { manuallySet: false; moduleId: string }
+) => void
+
 export type GraphEventHandlers = {
-	insert: (detail) => void
-	deleteBranch: (detail, label: string) => void
-	select: (modId: string) => void
-	delete: (detail, label: string) => void
-	newBranch: (module: FlowModule) => void
-	move: (module: FlowModule, modules: FlowModule[]) => void
-	selectedIteration: (detail, moduleId: string) => void
+	insert: (detail: {
+		sourceId?: string
+		targetId?: string
+		branch?: { rootId: string; branch: number }
+		index: number
+		kind: string
+		inlineScript?: string
+		script?: string
+		isPreprocessor?: boolean
+	}) => void
+	deleteBranch: (detail: { id: string; index: number }, label: string) => void
+	select: (mod: string | FlowModule) => void
+	delete: (detail: { id: string }, label: string) => void
+	newBranch: (id: string) => void
+	move: (detail: { id: string }) => void
+	selectedIteration: onSelectedIteration
 	changeId: (newId: string) => void
-	simplifyFlow: (detail: boolean) => void
+	simplifyFlow: (b: boolean) => void
 	expandSubflow: (id: string, path: string) => void
 	minimizeSubflow: (id: string) => void
-	updateMock: () => void
+	updateMock: (detail: { mock: FlowModule['mock']; id: string }) => void
 }
 
 export type SimplifiableFlow = { simplifiedFlow: boolean }
@@ -33,9 +67,221 @@ export function isTriggerStep(module: FlowModule | undefined): boolean {
 export function buildPrefix(prefix: string | undefined, id: string): string {
 	return (prefix ?? '') + id + ':'
 }
+
+export type NodeLayout = {
+	id: string
+	parentIds?: string[]
+} & FlowNode
+
+export type FlowNode =
+	| InputN
+	| ModuleN
+	| BranchAllStartN
+	| BranchAllEndN
+	| ForLoopEndN
+	| ForLoopStartN
+	| ResultN
+	| WhileLoopStartN
+	| WhileLoopEndN
+	| BranchOneStartN
+	| BranchOneEndN
+	| SubflowBoundN
+	| NoBranchN
+	| TriggerN
+
+export type InputN = {
+	type: 'input2'
+	data: {
+		eventHandlers: GraphEventHandlers
+		hasPreprocessor: boolean
+		insertable: boolean
+		moving: string | undefined
+		disableAi: boolean
+		cache: boolean
+		earlyStop: boolean
+		editMode: boolean
+	}
+}
+
+export type ModuleN = {
+	type: 'module'
+	data: {
+		offset: number
+		module: FlowModule
+		id: string
+		parentIds: string[]
+		eventHandlers: GraphEventHandlers
+		moving: string | undefined
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+		insertable: boolean
+		editMode: boolean
+	}
+}
+
+export type BranchAllStartN = {
+	type: 'branchAllStart'
+	data: {
+		offset: number
+		label: string
+		id: string
+		branchIndex: number
+		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+		insertable: boolean
+		branchOne: boolean
+	}
+}
+
+export type BranchAllEndN = {
+	type: 'branchAllEnd'
+	data: {
+		offset: number
+		id: string
+		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+	}
+}
+
+export type ForLoopEndN = {
+	type: 'forLoopEnd'
+	data: {
+		offset: number
+		id: string
+		eventHandlers: GraphEventHandlers
+		simplifiedTriggerView: boolean
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+	}
+}
+
+export type ForLoopStartN = {
+	type: 'forLoopStart'
+	data: {
+		offset: number
+		id: string
+		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+		selectedId: string | undefined
+		editMode: boolean
+		simplifiedTriggerView: boolean
+		module: FlowModule
+	}
+}
+
+export type ResultN = {
+	type: 'result'
+	data: {
+		success: boolean | undefined
+		eventHandlers: GraphEventHandlers
+	}
+}
+
+export type WhileLoopStartN = {
+	type: 'whileLoopStart'
+	data: {
+		offset: number
+		eventHandlers: GraphEventHandlers
+	}
+}
+
+export type WhileLoopEndN = {
+	type: 'whileLoopEnd'
+	data: {
+		offset: number
+	}
+}
+
+export type BranchOneStartN = {
+	type: 'branchOneStart'
+	data: {
+		offset: number
+		id: string
+		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+		selected: boolean
+		insertable: boolean
+		label: string
+		preLabel: string | undefined
+		branchIndex: number
+		modules: FlowModule[]
+	}
+}
+
+export type BranchOneEndN = {
+	type: 'branchOneEnd'
+	data: {
+		offset: number
+		id: string
+		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+	}
+}
+
+export type SubflowBoundN = {
+	type: 'subflowBound'
+	data: {
+		offset: number
+		id: string
+		eventHandlers: GraphEventHandlers
+		label: string
+		preLabel: string | undefined
+		subflowId: string
+		selected: boolean
+	}
+}
+
+export type NoBranchN = {
+	type: 'noBranch'
+	data: {
+		offset: number
+		id: string
+		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+		branchOne: boolean
+		label: string
+		branchIndex: number
+	}
+}
+
+export type TriggerN = {
+	type: 'trigger'
+	data: {
+		simplifiableFlow: SimplifiableFlow | undefined
+		path: string
+		newFlow: boolean
+		isEditor: boolean
+		eventHandlers: GraphEventHandlers
+		disableAi: boolean
+	}
+}
+
+// input2: InputNode,
+// module: ModuleNode,
+// branchAllStart: BranchAllStart,
+// branchAllEnd: BranchAllEndNode,
+// forLoopEnd: ForLoopEndNode,
+// forLoopStart: ForLoopStartNode,
+// result: ResultNode,
+// whileLoopStart: ForLoopStartNode,
+// whileLoopEnd: ForLoopEndNode,
+// branchOneStart: BranchOneStart,
+// branchOneEnd: BranchOneEndNode,
+// subflowBound: SubflowBound,
+// noBranch: NoBranchNode,
+// trigger: TriggersNode
+
 export function graphBuilder(
 	modules: FlowModule[] | undefined,
-	extra: Record<string, any>,
+	extra: {
+		disableAi: boolean
+		insertable: boolean
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+		selectedId: string | undefined
+		path: string | undefined
+		newFlow: boolean
+		cache: boolean
+		earlyStop: boolean
+		editMode: boolean
+	},
 	failureModule: FlowModule | undefined,
 	preprocessorModule: FlowModule | undefined,
 	eventHandlers: GraphEventHandlers,
@@ -51,19 +297,19 @@ export function graphBuilder(
 	// 	flowIsSimplifiable?: boolean
 	// }
 ): {
-	nodes: Node[]
+	nodes: NodeLayout[]
 	edges: Edge[]
 	error?: string | undefined
 } {
 	console.debug('Building graph')
-	const nodes: Node[] = []
+	const nodes: NodeLayout[] = []
 	const edges: Edge[] = []
 	try {
 		if (!modules) {
 			return { nodes, edges }
 		}
 
-		function addNode(module: FlowModule, offset: number, type: string, subModules?: FlowModule[]) {
+		function addNode(module: FlowModule, offset: number) {
 			const duplicated = nodes.find((n) => n.id === module.id)
 			if (duplicated) {
 				console.log('Duplicated node detected: ', module, duplicated)
@@ -77,17 +323,17 @@ export function graphBuilder(
 			nodes.push({
 				id: module.id,
 				data: {
-					value: module.value,
 					offset: offset,
 					module: module,
-					modules: subModules ?? modules,
+					id: module.id,
 					parentIds: [],
 					eventHandlers: eventHandlers,
 					moving: moving,
-					...extra
+					flowModuleStates: extra.flowModuleStates,
+					insertable: extra.insertable,
+					editMode: extra.editMode
 				},
-				position: { x: -1, y: -1 },
-				type: type
+				type: 'module'
 			})
 
 			return module.id
@@ -127,6 +373,7 @@ export function graphBuilder(
 		function addEdge(
 			sourceId: string,
 			targetId: string,
+			branch: { rootId: string; branch: number } | undefined,
 			prefix: string | undefined,
 			options?: {
 				disableInsert?: boolean
@@ -157,9 +404,9 @@ export function graphBuilder(
 				target: targetId,
 				type: options?.type ?? 'edge',
 				data: {
-					modules: options?.subModules ?? modules,
 					sourceId,
 					targetId,
+					branch,
 					moving,
 					eventHandlers,
 					simplifiedTriggerView: simplifiableFlow?.simplifiedFlow,
@@ -173,54 +420,53 @@ export function graphBuilder(
 			})
 		}
 
-		const inputNode: Node = {
+		const inputNode: NodeLayout = {
 			id: 'Input',
-			position: { x: -1, y: -1 },
 			type: 'input2',
 			data: {
 				eventHandlers: eventHandlers,
-				modules: modules,
 				hasPreprocessor: !!preprocessorModule || flowPathForTriggerNode == undefined,
-				...extra
+				insertable: extra.insertable,
+				moving: moving,
+				disableAi: extra.disableAi,
+				cache: extra.cache,
+				earlyStop: extra.earlyStop,
+				editMode: extra.editMode
 			}
 		}
 
-		let triggerNode: Node | undefined = undefined
+		let triggerNode: NodeLayout | undefined = undefined
 		if (flowPathForTriggerNode) {
 			triggerNode = {
 				id: 'Trigger',
-				position: { x: -1, y: -1 },
 				type: 'trigger',
 				data: {
 					simplifiableFlow: simplifiableFlow,
 					path: flowPathForTriggerNode,
 					newFlow: extra.newFlow,
 					eventHandlers: eventHandlers,
-					modules: modules,
-					isEditor: extra.insertable
+					isEditor: extra.insertable,
+					disableAi: extra.disableAi
 				}
 			}
 			nodes.push(triggerNode)
 			if (preprocessorModule != null && preprocessorModule != undefined) {
-				addEdge('Trigger', preprocessorModule.id, undefined, {
+				addEdge('Trigger', preprocessorModule.id, undefined, undefined, {
 					type: 'empty'
 				})
 			} else {
-				addEdge('Trigger', 'Input', undefined, {
+				addEdge('Trigger', 'Input', undefined, undefined, {
 					type: 'empty'
 				})
 			}
 		}
 
-		const resultNode: Node = {
+		const resultNode: NodeLayout = {
 			id: 'result',
 			data: {
 				eventHandlers: eventHandlers,
-				modules: modules,
-				success: success,
-				...extra
+				success: success
 			},
-			position: { x: -1, y: -1 },
 			type: 'result'
 		}
 
@@ -231,14 +477,14 @@ export function graphBuilder(
 
 		function processModules(
 			modules: FlowModule[],
-			beforeNode: Node,
-			nextNode: Node | undefined,
+			branch: { rootId: string; branch: number } | undefined,
+			beforeNode: NodeLayout,
+			nextNode: NodeLayout | undefined,
 			simplifiedTriggerView: boolean,
 			prefix: string | undefined,
 			currentOffset = 0,
 			disableMoveIds: string[] = [],
-			parentIndex?: string,
-			branchChosen?: boolean
+			parentIndex?: string
 		) {
 			if (prefix != undefined) {
 				modules.forEach((m) => {
@@ -252,7 +498,7 @@ export function graphBuilder(
 
 			if (modules.length === 0) {
 				if (nextNode) {
-					addEdge(beforeNode.id, nextNode.id, prefix, {
+					addEdge(beforeNode.id, nextNode.id, branch, prefix, {
 						subModules: modules,
 						disableMoveIds
 					})
@@ -263,7 +509,7 @@ export function graphBuilder(
 
 					// Add the edge between the previous node and the current one
 					if (index > 0 && previousId && expandedSubflows[module.id] == undefined) {
-						addEdge(previousId, module.id, prefix, {
+						addEdge(previousId, module.id, branch, prefix, {
 							subModules: modules,
 							disableMoveIds
 						})
@@ -271,19 +517,17 @@ export function graphBuilder(
 
 					if (module.value.type === 'branchall') {
 						// Start
-						addNode(module, currentOffset, 'module', modules)
+						addNode(module, currentOffset)
 
 						// "Collect result of each branch" node
-						const endNode = {
+						const endNode: NodeLayout = {
 							id: `${module.id}-end`,
 							data: {
 								offset: currentOffset,
 								id: module.id,
-								module: module,
-								modules: modules,
-								...extra
+								eventHandlers: eventHandlers,
+								flowModuleStates: extra.flowModuleStates
 							},
-							position: { x: -1, y: -1 },
 							type: 'branchAllEnd'
 						}
 
@@ -291,55 +535,62 @@ export function graphBuilder(
 
 						if (module.value.branches.length === 0) {
 							// Add a "No branches" node
-							const startNode = {
+							const startNode: NodeLayout = {
 								id: `${module.id}-branch-0`,
 								data: {
 									offset: currentOffset,
 									id: module.id,
 									branchIndex: -1,
-									modules: modules,
 									eventHandlers: eventHandlers,
-									...extra
+									flowModuleStates: extra.flowModuleStates,
+									branchOne: false,
+									label: 'No branches'
 								},
-								position: { x: -1, y: -1 },
 								type: 'noBranch'
 							}
 
 							nodes.push(startNode)
 
-							addEdge(module.id, startNode.id, prefix, {
+							addEdge(module.id, startNode.id, { rootId: module.id, branch: 0 }, prefix, {
 								type: 'empty'
 							})
-							addEdge(startNode.id, endNode.id, prefix, {
+							addEdge(startNode.id, endNode.id, { rootId: module.id, branch: 0 }, prefix, {
 								type: 'empty'
 							})
 						} else {
 							module.value.branches.forEach((branch, branchIndex) => {
 								// Start node by branch
 
-								const startNode = {
+								const startNode: NodeLayout = {
 									id: `${module.id}-branch-${branchIndex}`,
 									data: {
 										offset: currentOffset,
 										label: defaultIfEmptyString(branch.summary, `Branch ${branchIndex + 1}`),
 										id: module.id,
 										branchIndex: branchIndex,
-										modules: modules,
 										eventHandlers: eventHandlers,
-										...extra
+										flowModuleStates: extra.flowModuleStates,
+										insertable: extra.insertable,
+										branchOne: false
 									},
-									position: { x: -1, y: -1 },
 									type: 'branchAllStart'
 								}
 
 								nodes.push(startNode)
 
-								addEdge(module.id, startNode.id, prefix, {
-									type: 'empty'
-								})
+								addEdge(
+									module.id,
+									startNode.id,
+									{ rootId: module.id, branch: branchIndex },
+									prefix,
+									{
+										type: 'empty'
+									}
+								)
 
 								processModules(
 									branch.modules,
+									{ rootId: module.id, branch: branchIndex },
 									startNode,
 									endNode,
 									false,
@@ -354,46 +605,43 @@ export function graphBuilder(
 						previousId = endNode.id
 					} else if (module.value.type === 'forloopflow') {
 						if (!simplifiedTriggerView) {
-							addNode(module, currentOffset, 'module', modules)
+							addNode(module, currentOffset)
 						}
 
-						const startNode = {
+						const startNode: NodeLayout = {
 							id: `${module.id}-start`,
 							data: {
 								offset: currentOffset + 25,
 								id: module.id,
 								module: module,
-								modules: modules,
 								simplifiedTriggerView,
 								eventHandlers: eventHandlers,
-								...extra
+								editMode: extra.editMode,
+								flowModuleStates: extra.flowModuleStates,
+								selectedId: extra.selectedId
 							},
-							position: { x: -1, y: -1 },
 							type: 'forLoopStart'
 						}
 
 						if (!simplifiedTriggerView) {
-							addEdge(module.id, startNode.id, prefix, {
+							addEdge(module.id, startNode.id, undefined, prefix, {
 								type: 'empty'
 							})
 						} else if (previousId) {
-							addEdge(previousId, startNode.id, prefix, {
+							addEdge(previousId, startNode.id, undefined, prefix, {
 								type: 'empty'
 							})
 						}
 
-						const endNode = {
+						const endNode: NodeLayout = {
 							id: `${module.id}-end`,
 							data: {
 								offset: currentOffset,
 								id: module.id,
-								module: module,
-								modules: modules,
 								eventHandlers: eventHandlers,
 								simplifiedTriggerView,
-								...extra
+								flowModuleStates: extra.flowModuleStates
 							},
-							position: { x: -1, y: -1 },
 							type: 'forLoopEnd'
 						}
 
@@ -404,6 +652,7 @@ export function graphBuilder(
 
 						processModules(
 							module.value.modules,
+							{ rootId: module.id, branch: 0 },
 							startNode,
 							endNode,
 							false,
@@ -417,28 +666,23 @@ export function graphBuilder(
 
 						previousId = endNode.id
 					} else if (module.value.type === 'whileloopflow') {
-						addNode(module, currentOffset, 'module', modules)
+						addNode(module, currentOffset)
 
-						const startNode = {
+						const startNode: NodeLayout = {
 							id: `${module.id}-start`,
 							data: {
 								offset: currentOffset + 25,
-								module: module,
-								modules: modules,
-								eventHandlers: eventHandlers,
-								...extra
+								eventHandlers: eventHandlers
 							},
-							position: { x: -1, y: -1 },
 							type: 'whileLoopStart'
 						}
-						addEdge(module.id, startNode.id, prefix, {
+						addEdge(module.id, startNode.id, { rootId: module.id, branch: 0 }, prefix, {
 							type: 'empty'
 						})
 
-						const endNode = {
+						const endNode: NodeLayout = {
 							id: `${module.id}-end`,
-							data: { offset: currentOffset, module: module, modules: modules, ...extra },
-							position: { x: -1, y: -1 },
+							data: { offset: currentOffset, ...extra },
 							type: 'whileLoopEnd'
 						}
 
@@ -449,6 +693,7 @@ export function graphBuilder(
 
 						processModules(
 							module.value.modules,
+							{ rootId: module.id, branch: 0 },
 							startNode,
 							endNode,
 							false,
@@ -462,54 +707,57 @@ export function graphBuilder(
 
 						previousId = endNode.id
 					} else if (module.value.type === 'branchone') {
-						addNode(module, currentOffset, 'module', modules)
+						addNode(module, currentOffset)
 
-						const endNode = {
+						const endNode: NodeLayout = {
 							id: `${module.id}-end`,
-							data: { offset: currentOffset, eventHandlers: eventHandlers },
-							position: { x: -1, y: -1 },
+							data: {
+								offset: currentOffset,
+								eventHandlers: eventHandlers,
+								flowModuleStates: extra.flowModuleStates,
+								id: module.id
+							},
 							type: 'branchOneEnd'
 						}
 						nodes.push(endNode)
 
 						// Add default branch
-						const defaultBranch = {
+						const defaultBranch: NodeLayout = {
 							id: `${module.id}-default`,
 							data: {
 								offset: currentOffset,
 								label: 'Default',
 								id: module.id,
 								branchIndex: -1,
-								modules: module.value.default,
 								eventHandlers: eventHandlers,
 								branchOne: true,
 								...extra
 							},
-							position: { x: -1, y: -1 },
 							type: 'noBranch'
 						}
 
 						nodes.push(defaultBranch)
 
-						addEdge(module.id, defaultBranch.id, prefix, { type: 'empty' })
+						addEdge(module.id, defaultBranch.id, { rootId: module.id, branch: 0 }, prefix, {
+							type: 'empty'
+						})
 
-						const branchChosen = extra.flowModuleStates?.[module.id]?.branchChosen
 						processModules(
 							module.value.default,
+							{ rootId: module.id, branch: 0 },
 							defaultBranch,
 							endNode,
 							false,
 							prefix,
 							currentOffset,
 							localDisableMoveIds,
-							parentIndex ? `${parentIndex}-${index}` : index.toString(),
-							branchChosen == 0
+							parentIndex ? `${parentIndex}-${index}` : index.toString()
 						)
 
 						module.value.branches.forEach((branch, branchIndex) => {
 							// Start node by branch
 
-							const startNode = {
+							const startNode: NodeLayout = {
 								id: `${module.id}-branch-${branchIndex}`,
 								data: {
 									offset: currentOffset,
@@ -517,28 +765,31 @@ export function graphBuilder(
 									preLabel: branch.summary ? '' : branch.expr,
 									id: module.id,
 									branchIndex: branchIndex,
-									modules: modules,
 									eventHandlers: eventHandlers,
-									...extra
+									insertable: extra.insertable,
+									flowModuleStates: extra.flowModuleStates,
+									selected: false,
+									modules: branch.modules
 								},
-								position: { x: -1, y: -1 },
 								type: 'branchOneStart'
 							}
 
 							nodes.push(startNode)
 
-							addEdge(module.id, startNode.id, prefix, { type: 'empty' })
+							addEdge(module.id, startNode.id, { rootId: module.id, branch: branchIndex }, prefix, {
+								type: 'empty'
+							})
 
 							processModules(
 								branch.modules,
+								{ rootId: module.id, branch: branchIndex + 1 },
 								startNode,
 								endNode,
 								false,
 								prefix,
 								currentOffset,
 								localDisableMoveIds,
-								parentIndex ? `${parentIndex}-${index}` : index.toString(),
-								branchChosen == branchIndex + 1
+								parentIndex ? `${parentIndex}-${index}` : index.toString()
 							)
 						})
 
@@ -546,46 +797,47 @@ export function graphBuilder(
 					} else {
 						let expanded = expandedSubflows[module.id]
 						if (expanded) {
+							expanded = $state.snapshot(expanded)
 							const startId = `${module.id}-subflow-start`
 							const idWithoutPrefix = module.id.startsWith('subflow:')
 								? module.id.substring(8)
 								: module.id
-							const startNode = {
+							const startNode: NodeLayout = {
 								id: startId,
 								data: {
 									offset: currentOffset,
 									label: `Start of subflow ${idWithoutPrefix}`,
 									id: startId,
 									subflowId: module.id,
-									modules: modules,
 									eventHandlers: eventHandlers,
-									...extra
+									preLabel: '',
+									selected: false
 								},
-								position: { x: -1, y: -1 },
 								type: 'subflowBound'
 							}
 
 							nodes.push(startNode)
 
 							if (previousId) {
-								addEdge(previousId!, startNode.id, prefix, { type: 'empty' })
+								addEdge(previousId!, startNode.id, undefined, prefix, {
+									type: 'empty'
+								})
 							} else {
-								addEdge(beforeNode.id, startNode.id, prefix, { type: 'empty' })
+								addEdge(beforeNode.id, startNode.id, undefined, prefix, { type: 'empty' })
 							}
 
 							const endId = `${module.id}-subflow-end`
-							const endNode = {
+							const endNode: NodeLayout = {
 								id: endId,
 								data: {
 									offset: currentOffset,
 									label: `End of subflow ${idWithoutPrefix}`,
 									id: endId,
 									subflowId: module.id,
-									modules: modules,
 									eventHandlers: eventHandlers,
-									...extra
+									preLabel: '',
+									selected: false
 								},
-								position: { x: -1, y: -1 },
 								type: 'subflowBound'
 							}
 
@@ -593,6 +845,7 @@ export function graphBuilder(
 
 							processModules(
 								expanded,
+								undefined,
 								startNode,
 								endNode,
 								false,
@@ -603,13 +856,13 @@ export function graphBuilder(
 
 							previousId = endNode.id
 						} else {
-							addNode(module, currentOffset, 'module', modules)
+							addNode(module, currentOffset)
 							previousId = module.id
 						}
 					}
 
 					if (index === 0 && expandedSubflows[module.id] == undefined) {
-						addEdge(beforeNode.id, module.id, prefix, {
+						addEdge(beforeNode.id, module.id, undefined, prefix, {
 							subModules: modules,
 							disableMoveIds,
 							disableInsert: simplifiedTriggerView
@@ -617,7 +870,7 @@ export function graphBuilder(
 					}
 
 					if (index === modules.length - 1 && previousId && nextNode) {
-						addEdge(previousId, nextNode.id, prefix, {
+						addEdge(previousId, nextNode.id, branch, prefix, {
 							subModules: modules,
 							disableMoveIds
 						})
@@ -627,9 +880,9 @@ export function graphBuilder(
 		}
 
 		if (simplifiableFlow?.simplifiedFlow === true && triggerNode) {
-			processModules(modules, triggerNode, undefined, true, undefined)
+			processModules(modules, undefined, triggerNode, undefined, true, undefined)
 		} else {
-			processModules(modules, inputNode, resultNode, false, undefined)
+			processModules(modules, undefined, inputNode, resultNode, false, undefined)
 		}
 
 		if (failureModule) {
@@ -644,26 +897,26 @@ export function graphBuilder(
 			})
 
 			Object.entries(toAdd).forEach((x) => {
-				addNode({ ...failureModule, id: x[1] }, 0, 'module')
-				addEdge(x[0], x[1], undefined, { type: 'empty' })
+				addNode({ ...failureModule, id: x[1] }, 0)
+				addEdge(x[0], x[1], undefined, undefined, { type: 'empty' })
 			})
 		}
 
 		if (preprocessorModule) {
-			addNode(preprocessorModule, 0, 'module')
+			addNode(preprocessorModule, 0)
 			const id = JSON.parse(JSON.stringify(preprocessorModule.id))
-			addEdge(id, 'Input', undefined, { type: 'empty' })
+			addEdge(id, 'Input', undefined, undefined, { type: 'empty' })
 		}
 
 		if (failureModule && !extra.flowModuleStates) {
-			addNode(failureModule, 0, 'module')
+			addNode(failureModule, 0)
 		}
 
 		Object.keys(parents).forEach((key) => {
 			const node = nodes.find((n) => n.id === key)
 
 			if (node) {
-				node.data.parentIds = parents[key]
+				node.parentIds = parents[key]
 			}
 		})
 
@@ -685,7 +938,7 @@ export function graphBuilder(
 							}
 						}
 
-						addEdge(pid, selectedId!, undefined, {
+						addEdge(pid, selectedId!, undefined, undefined, {
 							customId: `dep-${pid}-${selectedId}-${input}-${index}`,
 							type: 'dataflowedge'
 						})
@@ -695,7 +948,7 @@ export function graphBuilder(
 				Object.entries(deps.dependents).forEach((x, i) => {
 					let pid = x[0]
 
-					addEdge(selectedId!, pid, undefined, {
+					addEdge(selectedId!, pid, undefined, undefined, {
 						customId: `dep-${selectedId}-${pid}-${i}`,
 						type: 'dataflowedge'
 					})
diff --git a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
index 4843742040..00620df963 100644
--- a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
+++ b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
@@ -1,67 +1,77 @@
 <script lang="ts">
 	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
-	import type { FlowModule } from '$lib/gen'
-	import { getBezierPath, BaseEdge, type Position, EdgeLabelRenderer } from '@xyflow/svelte'
+	import { getBezierPath, BaseEdge, type EdgeProps, EdgeLabel } from '@xyflow/svelte'
 	import { ClipboardCopy } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
-	import type { GraphEventHandlers } from '../../graphBuilder'
+	import type { GraphEventHandlers } from '../../graphBuilder.svelte'
 	import { getStraightLinePath } from '../utils'
 	import { twMerge } from 'tailwind-merge'
 
-	export let sourceX: number
-	export let sourceY: number
-	export let sourcePosition: Position
-	export let targetX: number
-	export let targetY: number
-	export let targetPosition: Position
-	export let markerEnd: string | undefined = undefined
-
-	export let data: {
-		insertable: boolean
-		modules: FlowModule[]
-		moving: string | undefined
-		eventHandlers: GraphEventHandlers
-		index: number
-		enableTrigger: boolean
-		disableAi: boolean
-		disableMoveIds: string[]
-	}
-
-	$: [edgePath] = getBezierPath({
-		sourceX,
-		sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
-		sourcePosition,
-		targetX,
-		targetY,
-		targetPosition,
-		curvature: 0.25
-	})
-
-	$: completeEdge =
-		targetY - sourceY > 100
-			? `${edgePath} ${getStraightLinePath({ sourceX, sourceY, targetY })}`
-			: edgePath
-
 	const { useDataflow } = getContext<{
 		useDataflow: Writable<boolean | undefined>
 	}>('FlowGraphContext')
+
+	let {
+		// id,
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition,
+		markerEnd,
+		// style,
+		data
+	}: EdgeProps & {
+		data: {
+			insertable: boolean
+			sourceId: string
+			branch: number | undefined
+			targetId: string
+			moving: string | undefined
+			eventHandlers: GraphEventHandlers
+			index: number
+			enableTrigger: boolean
+			disableAi: boolean
+			disableMoveIds: string[]
+		}
+	} = $props()
+
+	let [edgePath] = $derived(
+		getBezierPath({
+			sourceX,
+			sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
+			sourcePosition,
+			targetX,
+			targetY,
+			targetPosition,
+			curvature: 0.25
+		})
+	)
+
+	let completeEdge = $derived(
+		targetY - sourceY > 100
+			? `${edgePath} ${getStraightLinePath({ sourceX, sourceY, targetY })}`
+			: edgePath
+	)
 </script>
 
-<EdgeLabelRenderer>
+<EdgeLabel x={sourceX} y={sourceY + 22} class="base-edge" style="">
 	{#if data?.insertable && !$useDataflow && !data?.moving}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}
-			style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY + 2}px)"
+			style:transform="translate(-50%, -50%)"
 		>
+			<!-- <pre class="text-2xs">A{JSON.stringify(data.branch)}, {data.sourceId}, {data.targetId}</pre> -->
+			<!-- {data.targetId} B -->
 			<InsertModuleButton
-				disableAi={data.disableAi}
 				index={data.index ?? 0}
-				allowTrigger={data.enableTrigger}
-				modules={data?.modules ?? []}
 				on:new={(e) => {
 					data?.eventHandlers.insert({
-						modules: data.modules,
+						sourceId: data.sourceId,
+						targetId: data.targetId,
+						branch: data.branch,
 						index: data.index,
 						kind: e.detail.kind,
 						inlineScript: e.detail.inlineScript
@@ -70,7 +80,9 @@
 				on:pickScript={(e) => {
 					// console.log('pickScript', e)
 					data?.eventHandlers.insert({
-						modules: data.modules,
+						sourceId: data.sourceId,
+						targetId: data.targetId,
+						branch: data.branch,
 						index: data.index,
 						script: e.detail,
 						kind: e.detail.kind
@@ -79,7 +91,9 @@
 				on:pickFlow={(e) => {
 					// console.log('pickFlow', e)
 					data?.eventHandlers.insert({
-						modules: data.modules,
+						sourceId: data.sourceId,
+						targetId: data.targetId,
+						branch: data.branch,
 						index: data.index,
 						flow: e.detail
 					})
@@ -89,16 +103,15 @@
 	{/if}
 
 	{#if data?.moving}
-		<div
-			class="edgeButtonContainer nodrag nopan"
-			style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY}px)"
-		>
+		<div class="edgeButtonContainer nodrag nopan" style:transform="translate(-50%, -50%)">
 			{#if data.moving && !data.disableMoveIds?.includes(data.moving)}
 				<button
 					title="Paste module"
-					on:click={() => {
+					onclick={() => {
 						data.eventHandlers.insert({
-							modules: data.modules,
+							branch: data.branch,
+							sourceId: data.sourceId,
+							targetId: data.targetId,
 							index: data.index
 						})
 					}}
@@ -115,7 +128,7 @@
 			{/if}
 		</div>
 	{/if}
-</EdgeLabelRenderer>
+</EdgeLabel>
 
 <BaseEdge path={completeEdge} {markerEnd} class={$useDataflow ? 'hidden' : ''} />
 
diff --git a/frontend/src/lib/components/graph/renderers/edges/DataflowEdge.svelte b/frontend/src/lib/components/graph/renderers/edges/DataflowEdge.svelte
index d44ce27271..863a46fc12 100644
--- a/frontend/src/lib/components/graph/renderers/edges/DataflowEdge.svelte
+++ b/frontend/src/lib/components/graph/renderers/edges/DataflowEdge.svelte
@@ -1,41 +1,47 @@
 <script lang="ts">
 	import type { FlowModule } from '$lib/gen'
-	import { getBezierPath, BaseEdge, type Position, EdgeLabelRenderer } from '@xyflow/svelte'
+	import { getBezierPath, BaseEdge, type Position, EdgeLabel } from '@xyflow/svelte'
 	import { getStraightLinePath } from '../utils'
 
-	export let sourceX: number
-	export let sourceY: number
-	export let sourcePosition: Position
-	export let targetX: number
-	export let targetY: number
-	export let targetPosition: Position
-	export let markerEnd: string | undefined = undefined
-
-	export let data: {
-		modules: FlowModule[]
-		sourceId: string
-		targetId: string
+	interface Props {
+		sourceX: number
+		sourceY: number
+		sourcePosition: Position
+		targetX: number
+		targetY: number
+		targetPosition: Position
+		markerEnd?: string | undefined
+		data: {
+			modules: FlowModule[]
+			sourceId: string
+			targetId: string
+		}
 	}
 
-	$: [edgePath, labelX, labelY] = getBezierPath({
+	let {
 		sourceX,
-		sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
+		sourceY,
 		sourcePosition,
 		targetX,
 		targetY,
 		targetPosition,
-		curvature: 0.25
-	})
+		markerEnd = undefined
+	}: Props = $props()
+
+	let [edgePath, labelX, labelY] = $derived(
+		getBezierPath({
+			sourceX,
+			sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
+			sourcePosition,
+			targetX,
+			targetY,
+			targetPosition,
+			curvature: 0.25
+		})
+	)
 </script>
 
-<EdgeLabelRenderer>
-	<div
-		class="absolute cursor-pointer nodrag nopan bg-surface-selected p-1 border text-xs"
-		style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
-	>
-		{data.sourceId} -> {data.targetId}
-	</div>
-</EdgeLabelRenderer>
+<EdgeLabel x={labelX} y={labelY}></EdgeLabel>
 
 <BaseEdge
 	path={targetY - sourceY > 100
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte
new file mode 100644
index 0000000000..dcef1e8b3e
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import NodeWrapper from './NodeWrapper.svelte'
+	import type { BranchAllEndN } from '../../graphBuilder.svelte'
+	import { getStateColor, getStateHoverColor } from '../../util'
+
+	interface Props {
+		data: BranchAllEndN['data']
+	}
+
+	let { data }: Props = $props()
+</script>
+
+<NodeWrapper offset={data.offset} enableSourceHandle enableTargetHandle>
+	{#snippet children({ darkMode })}
+		<VirtualItem
+			label={'Collect result from all branches'}
+			id={data.id}
+			selectable={true}
+			selected={false}
+			bgColor={getStateColor(undefined, darkMode)}
+			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+			on:select={(e) => {
+				data?.eventHandlers?.select(e.detail)
+			}}
+		/>
+	{/snippet}
+</NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
index 561f8cb89f..00ef2c51f6 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
@@ -1,66 +1,62 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import { X } from 'lucide-svelte'
-	import type { GraphModuleState } from '../../model'
 	import { getStateColor, getStateHoverColor } from '../../util'
-	import type { FlowModule } from '$lib/gen'
-	import type { GraphEventHandlers } from '../../graphBuilder'
+	import type { BranchAllStartN } from '../../graphBuilder.svelte'
 	import { computeBorderStatus } from '../utils'
 
-	export let data: {
-		label: string
-		branchIndex: number
-		insertable: boolean
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		id: string
-		modules: FlowModule[]
-		selected: boolean
-		eventHandlers: GraphEventHandlers
-		offset: number
+	interface Props {
+		data: BranchAllStartN['data']
 	}
 
-	$: borderStatus = computeBorderStatus(
-		data.branchIndex,
-		'branchall',
-		data.flowModuleStates?.[data.id]
+	let { data }: Props = $props()
+
+	let borderStatus = $derived(
+		computeBorderStatus(data.branchIndex, 'branchall', data.flowModuleStates?.[data.id])
 	)
 </script>
 
-<NodeWrapper let:darkMode offset={data.offset}>
-	<VirtualItem
-		label={data.label}
-		selectable
-		selected={data.selected}
-		bgColor={getStateColor(undefined, darkMode)}
-		bgHoverColor={getStateHoverColor(undefined, darkMode)}
-		borderColor={borderStatus
-			? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
-			: undefined}
-		on:select={() => {
-			setTimeout(() => data.eventHandlers.select(data.id))
-		}}
-		on:insert={(e) => {
-			setTimeout(() => data.eventHandlers.insert(e.detail))
-		}}
-	/>
-	{#if data.insertable}
-		<button
-			title="Delete branch"
-			class="z-50 absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] center-center text-primary
-outline-[1px] outline outline-gray-700 bg-surface duration-0 hover:bg-red-400 hover:text-white
-hover:border-red-700"
-			on:click|preventDefault|stopPropagation={() => {
-				data.eventHandlers.deleteBranch(
-					{
-						module: data.modules.find((m) => m.id === data.id),
-						index: data.branchIndex
-					},
-					data.label
-				)
+<NodeWrapper offset={data.offset}>
+	{#snippet children({ darkMode })}
+		<VirtualItem
+			label={data.label}
+			selectable
+			selected={false}
+			bgColor={getStateColor(undefined, darkMode)}
+			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			borderColor={borderStatus
+				? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
+				: undefined}
+			on:select={() => {
+				setTimeout(() => data.eventHandlers.select(data.id))
 			}}
-		>
-			<X size={12} />
-		</button>
-	{/if}
+			on:insert={(e) => {
+				setTimeout(() => data.eventHandlers.insert(e.detail))
+			}}
+		/>
+		{#if data.insertable}
+			<button
+				title="Delete branch"
+				class="z-50 absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] center-center text-primary
+	outline-[1px] outline outline-gray-700 bg-surface duration-0 hover:bg-red-400 hover:text-white
+	hover:border-red-700"
+				onclick={stopPropagation(
+					preventDefault(() => {
+						data.eventHandlers.deleteBranch(
+							{
+								id: data.id,
+								index: data.branchIndex
+							},
+							data.label
+						)
+					})
+				)}
+			>
+				<X size={12} />
+			</button>
+		{/if}
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
index e225448302..0a53636789 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
@@ -1,63 +1,58 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import { X } from 'lucide-svelte'
-	import type { GraphModuleState } from '../../model'
 	import { getStateColor, getStateHoverColor } from '../../util'
-	import type { FlowModule } from '$lib/gen'
-	import type { GraphEventHandlers } from '../../graphBuilder'
 	import { computeBorderStatus } from '../utils'
+	import type { BranchOneStartN } from '../../graphBuilder.svelte'
 
-	export let data: {
-		label: string
-		preLabel: string | undefined
-		insertable: boolean
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		id: string
-		modules: FlowModule[]
-		selected: boolean
-		eventHandlers: GraphEventHandlers
-		branchIndex: number
-		offset: number
+	interface Props {
+		data: BranchOneStartN['data']
 	}
 
-	$: borderStatus = computeBorderStatus(
-		data.branchIndex + 1,
-		'branchone',
-		data.flowModuleStates?.[data.id]
+	let { data }: Props = $props()
+
+	let borderStatus = $derived(
+		computeBorderStatus(data.branchIndex + 1, 'branchone', data.flowModuleStates?.[data.id])
 	)
 </script>
 
-<NodeWrapper let:darkMode offset={data.offset}>
-	<VirtualItem
-		label={data.label}
-		preLabel={data.preLabel}
-		selectable
-		selected={data.selected}
-		bgColor={getStateColor(undefined, darkMode)}
-		bgHoverColor={getStateHoverColor(undefined, darkMode)}
-		borderColor={borderStatus ? getStateColor(borderStatus, darkMode) : undefined}
-		on:select={() => {
-			setTimeout(() => data?.eventHandlers?.select(data.id))
-		}}
-	/>
-	{#if data.insertable}
-		<button
-			title="Delete branch"
-			class="z-50 absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] center-center text-primary
-border-[1.5px] border-gray-700 bg-surface duration-0 hover:bg-red-400 hover:text-white
-hover:border-red-700"
-			on:click|preventDefault|stopPropagation={() => {
-				data.eventHandlers.deleteBranch(
-					{
-						module: data.modules.find((m) => m.id === data.id),
-						index: data.branchIndex + 1
-					},
-					data.label
-				)
+<NodeWrapper offset={data.offset}>
+	{#snippet children({ darkMode })}
+		<VirtualItem
+			label={data.label}
+			preLabel={data.preLabel}
+			selectable
+			selected={data.selected}
+			bgColor={getStateColor(undefined, darkMode)}
+			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			borderColor={borderStatus ? getStateColor(borderStatus, darkMode) : undefined}
+			on:select={() => {
+				setTimeout(() => data?.eventHandlers?.select(data.id))
 			}}
-		>
-			<X size={12} />
-		</button>
-	{/if}
+		/>
+		{#if data.insertable}
+			<button
+				title="Delete branch"
+				class="z-50 absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] center-center text-primary
+	border-[1.5px] border-gray-700 bg-surface duration-0 hover:bg-red-400 hover:text-white
+	hover:border-red-700"
+				onclick={stopPropagation(
+					preventDefault(() => {
+						data.eventHandlers.deleteBranch(
+							{
+								id: data.id,
+								index: data.branchIndex + 1
+							},
+							data.label
+						)
+					})
+				)}
+			>
+				<X size={12} />
+			</button>
+		{/if}
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
index be6301beb7..4fab4227b2 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
@@ -1,45 +1,43 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import type { GraphModuleState } from '../../model'
 	import { getStateColor } from '../../util'
-	import type { GraphEventHandlers } from '../../graphBuilder'
+	import type { ForLoopEndN } from '../../graphBuilder.svelte'
 
-	export let data: {
-		offset: number
-		id: string
-		insertable: boolean
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		eventHandlers: GraphEventHandlers
-		simplifiedTriggerView: boolean
+	interface Props {
+		data: ForLoopEndN['data']
 	}
+
+	let { data }: Props = $props()
 </script>
 
-<NodeWrapper offset={data.offset} let:darkMode>
-	{#if data.simplifiedTriggerView}
-		<VirtualItem
-			label={'Each event is processed'}
-			selectable={false}
-			selected={false}
-			id={data.id}
-			hideId
-			bgColor={getStateColor(undefined, darkMode)}
-			borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
-			on:select={(e) => {
-				setTimeout(() => data?.eventHandlers?.select(e.detail))
-			}}
-		/>
-	{:else}
-		<VirtualItem
-			label={'Collect result of each iteration'}
-			selectable={true}
-			selected={false}
-			id={data.id}
-			bgColor={getStateColor(undefined, darkMode)}
-			borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
-			on:select={(e) => {
-				setTimeout(() => data?.eventHandlers?.select(e.detail))
-			}}
-		/>
-	{/if}
+<NodeWrapper offset={data.offset}>
+	{#snippet children({ darkMode })}
+		{#if data.simplifiedTriggerView}
+			<VirtualItem
+				label={'Each event is processed'}
+				selectable={false}
+				selected={false}
+				id={data.id}
+				hideId
+				bgColor={getStateColor(undefined, darkMode)}
+				borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
+				on:select={(e) => {
+					setTimeout(() => data?.eventHandlers?.select(e.detail))
+				}}
+			/>
+		{:else}
+			<VirtualItem
+				label={'Collect result of each iteration'}
+				selectable={true}
+				selected={false}
+				id={data.id}
+				bgColor={getStateColor(undefined, darkMode)}
+				borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
+				on:select={(e) => {
+					setTimeout(() => data?.eventHandlers?.select(e.detail))
+				}}
+			/>
+		{/if}
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
index 99e7f06b91..c5482a06fd 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
@@ -4,31 +4,24 @@
 	import type { FlowModule, FlowStatusModule } from '$lib/gen'
 	import { getStateColor, getStateHoverColor } from '../../util'
 	import type { GraphModuleState } from '../../model'
-	import type { GraphEventHandlers } from '../../graphBuilder'
 	import { getContext } from 'svelte'
 	import type { PropPickerContext } from '$lib/components/prop_picker'
+	import type { ForLoopStartN } from '../../graphBuilder.svelte'
 
-	export let data: {
-		offset: number
-		id: string
-		modules: FlowModule[]
-		module: FlowModule
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		eventHandlers: GraphEventHandlers
-		simplifiedTriggerView: boolean
-		selectedId: string
-		editMode: boolean
+	interface Props {
+		data: ForLoopStartN['data']
 	}
 
+	let { data }: Props = $props()
+
 	const propPickerContext = getContext<PropPickerContext>('PropPickerContext')
 	const pickablePropertiesFiltered = propPickerContext?.pickablePropertiesFiltered
 
-	$: filteredInput = filterIterFromInput($pickablePropertiesFiltered?.flow_input)
-
 	function filterIterFromInput(inputJson: Record<string, any> | undefined): Record<string, any> {
 		if (!inputJson || typeof inputJson !== 'object' || (!inputJson.iter && !inputJson.iter_parent))
 			return {}
-		const selectedIdIsDescendant = isSelectedDescendant(data.module, data.selectedId)
+		const selectedIdIsDescendant =
+			data.selectedId !== undefined && isSelectedDescendant(data.module, data.selectedId)
 		if (selectedIdIsDescendant === 'child') {
 			return { iter: inputJson.iter }
 		}
@@ -69,23 +62,26 @@
 		}
 		return 'none'
 	}
+	let filteredInput = $derived(filterIterFromInput($pickablePropertiesFiltered?.flow_input))
 </script>
 
-<NodeWrapper let:darkMode offset={data.offset}>
-	<VirtualItem
-		label={data.simplifiedTriggerView ? 'For each new event' : 'Do one iteration'}
-		selectable={false}
-		selected={false}
-		id={data.id}
-		hideId
-		bgColor={getStateColor(undefined, darkMode)}
-		bgHoverColor={getStateHoverColor(undefined, darkMode)}
-		borderColor={getStateColor(computeStatus(data.flowModuleStates?.[data.id]), darkMode)}
-		on:select={(e) => {
-			setTimeout(() => data?.eventHandlers?.select(e.detail))
-		}}
-		inputJson={filteredInput}
-		prefix="flow_input"
-		editMode={data.editMode}
-	/>
+<NodeWrapper offset={data.offset}>
+	{#snippet children({ darkMode })}
+		<VirtualItem
+			label={data.simplifiedTriggerView ? 'For each new event' : 'Do one iteration'}
+			selectable={false}
+			selected={false}
+			id={data.id}
+			hideId
+			bgColor={getStateColor(undefined, darkMode)}
+			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			borderColor={getStateColor(computeStatus(data.flowModuleStates?.[data.id]), darkMode)}
+			on:select={(e) => {
+				setTimeout(() => data?.eventHandlers?.select(e.detail))
+			}}
+			inputJson={filteredInput}
+			prefix="flow_input"
+			editMode={data.editMode}
+		/>
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
index 5a980696f8..d2a76def1a 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import type { GraphEventHandlers } from '../../graphBuilder'
-	import type { FlowModule } from '$lib/gen'
+	import type { InputN } from '../../graphBuilder.svelte'
 	import { getStateColor, getStateHoverColor } from '../../util'
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
@@ -11,20 +10,12 @@
 	import type { Schema } from '$lib/common'
 	import type { FlowEditorContext } from '$lib/components/flows/types'
 
-	export let data: {
-		hasPreprocessor: boolean
-		insertable: boolean
-		modules: FlowModule[]
-		moving: string | undefined
-		eventHandlers: GraphEventHandlers
-		index: number
-		disableAi: boolean
-		disableMoveIds: string[]
-		cache: boolean
-		earlyStop: boolean
-		editMode: boolean
+	interface Props {
+		data: InputN['data']
 	}
 
+	let { data }: Props = $props()
+
 	const { selectedId } = getContext<{
 		selectedId: Writable<string | undefined>
 	}>('FlowGraphContext')
@@ -32,59 +23,59 @@
 	const { previewArgs, flowStore } =
 		getContext<FlowEditorContext | undefined>('FlowEditorContext') || {}
 
-	$: topFlowInput =
-		flowStore && previewArgs && $flowStore?.schema
-			? schemaToObject($flowStore.schema as Schema, $previewArgs || {})
+	let topFlowInput = $derived(
+		flowStore?.val && previewArgs && flowStore?.val?.schema
+			? schemaToObject(flowStore?.val.schema as Schema, previewArgs.val || {})
 			: undefined
+	)
 </script>
 
-<NodeWrapper let:darkMode>
-	{#if data.insertable && !data.hasPreprocessor}
-		<div class="absolute bottom-full left-0 right-0 flex center-center mb-3.5">
-			<InsertModuleButton
-				disableAi={data.disableAi}
-				index={data.index ?? 0}
-				modules={data?.modules ?? []}
-				kind="preprocessor"
-				on:new={(e) => {
-					data?.eventHandlers.insert({
-						modules: data.modules,
-						index: data.index,
-						kind: e.detail.kind,
-						inlineScript: e.detail.inlineScript,
-						detail: 'preprocessor'
-					})
-				}}
-				on:pickScript={(e) => {
-					data?.eventHandlers.insert({
-						modules: data.modules,
-						index: data.index,
-						script: e.detail,
-						detail: 'preprocessor'
-					})
-				}}
-				class="w-[14px] h-[14px]"
-				iconSize={10}
-			/>
-		</div>
-	{/if}
-	<VirtualItem
-		label="Input"
-		selectable
-		selected={$selectedId === 'Input'}
-		bgColor={getStateColor(undefined, darkMode)}
-		bgHoverColor={getStateHoverColor(undefined, darkMode)}
-		on:insert={(e) => {
-			setTimeout(() => data?.eventHandlers?.insert(e.detail))
-		}}
-		on:select={(e) => {
-			setTimeout(() => data?.eventHandlers?.select(e.detail))
-		}}
-		inputJson={topFlowInput}
-		prefix="flow_input"
-		alwaysPluggable
-		cache={data.cache}
-		earlyStop={data.earlyStop}
-		editMode={data.editMode}
-	/>
+<NodeWrapper>
+	{#snippet children({ darkMode })}
+		{#if data.insertable && !data.hasPreprocessor}
+			<div class="absolute bottom-full left-0 right-0 flex center-center mb-3.5">
+				<InsertModuleButton
+					index={0}
+					kind="preprocessor"
+					on:new={(e) => {
+						data?.eventHandlers.insert({
+							index: 0,
+							kind: e.detail.kind,
+							inlineScript: e.detail.inlineScript,
+							isPreprocessor: true
+						})
+					}}
+					on:pickScript={(e) => {
+						data?.eventHandlers.insert({
+							index: 0,
+							kind: e.detail.kind,
+							script: e.detail,
+							isPreprocessor: true
+						})
+					}}
+					clazz="w-[14px] h-[14px]"
+					iconSize={10}
+				/>
+			</div>
+		{/if}
+		<VirtualItem
+			label="Input"
+			selectable
+			selected={$selectedId === 'Input'}
+			bgColor={getStateColor(undefined, darkMode)}
+			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			on:insert={(e) => {
+				setTimeout(() => data?.eventHandlers?.insert(e.detail))
+			}}
+			on:select={(e) => {
+				setTimeout(() => data?.eventHandlers?.select(e.detail))
+			}}
+			inputJson={topFlowInput}
+			prefix="flow_input"
+			alwaysPluggable
+			cache={data.cache}
+			earlyStop={data.earlyStop}
+			editMode={data.editMode}
+		/>
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
index 14fdf17beb..002375a728 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
@@ -1,120 +1,111 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import MapItem from '$lib/components/flows/map/MapItem.svelte'
-	import type { FlowModule, FlowModuleValue } from '$lib/gen'
 	import { GitBranchPlus, Maximize2 } from 'lucide-svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import type { GraphEventHandlers } from '../../graphBuilder'
-	import type { GraphModuleState } from '../../model'
 	import { getStateColor, getStateHoverColor } from '../../util'
+	import type { ModuleN } from '../../graphBuilder.svelte'
 
-	export let data: {
-		offset: number
-		value: FlowModuleValue
-		module: FlowModule
-		insertable: boolean
-		insertableEnd: boolean
-		branchable: boolean
-		bgColor: string
-		modules: FlowModule[]
-		moving: string | undefined
-		disableAi: boolean
-		wrapperId: string | undefined
-		retries: number | undefined
-		flowJobs:
-			| { flowJobs: string[]; selected: number; flowJobsSuccess: (boolean | undefined)[] }
-			| undefined
-		eventHandlers: GraphEventHandlers
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		selected: boolean
-		editMode: boolean
+	interface Props {
+		data: ModuleN['data']
 	}
 
-	$: type = data.flowModuleStates?.[data.module.id]?.type
-	if (!type && data.flowJobs) {
-		type = 'InProgress'
-	}
+	let { data }: Props = $props()
 
-	$: state = data.flowModuleStates?.[data.module.id]
-	$: flowJobs = state?.flow_jobs
-		? {
-				flowJobs: state?.flow_jobs,
-				selected: state?.selectedForloopIndex ?? 0,
-				selectedManually: state?.selectedForLoopSetManually,
-				flowJobsSuccess: state?.flow_jobs_success
-			}
-		: (undefined as any)
+	let moduleState = $derived(data.flowModuleStates?.[data.id])
+	let flowJobs = $derived(
+		moduleState?.flow_jobs
+			? {
+					flowJobs: moduleState?.flow_jobs,
+					selected: moduleState?.selectedForloopIndex ?? 0,
+					selectedManually: moduleState?.selectedForLoopSetManually,
+					flowJobsSuccess: moduleState?.flow_jobs_success
+				}
+			: (undefined as any)
+	)
+
+	let type = $derived.by(() => {
+		let typ = data.flowModuleStates?.[data.id]?.type
+		if (!typ && flowJobs) {
+			return 'InProgress'
+		}
+		return typ
+	})
 </script>
 
-<NodeWrapper offset={data.offset} let:darkMode>
-	{#if data.module.value.type == 'flow'}
-		<button
-			title="Expand subflow"
-			class="z-50 absolute -top-[10px] right-[25px] rounded-full h-[20px] w-[20px] center-center text-primary bg-surface duration-0 hover:bg-surface-hover"
-			on:click|preventDefault|stopPropagation={() => {
-				if (data.module.value.type == 'flow') {
-					data.eventHandlers.expandSubflow(data.module.id, data.module.value.path)
-				}
-			}}
-		>
-			<Maximize2 size={12} />
-		</button>
-	{/if}
-	<MapItem
-		mod={data.module}
-		insertable={data.insertable}
-		editMode={data.editMode}
-		annotation={flowJobs &&
-		(data.module.value.type === 'forloopflow' || data.module.value.type === 'whileloopflow')
-			? 'Iteration: ' +
-				((state?.selectedForloopIndex ?? 0) >= 0
-					? (state?.selectedForloopIndex ?? 0) + 1
-					: state?.flow_jobs?.length) +
-				'/' +
-				(state?.iteration_total ?? '?')
-			: ''}
-		bgColor={getStateColor(type, darkMode, true, state?.skipped)}
-		bgHoverColor={getStateHoverColor(type, darkMode, true, state?.skipped)}
-		moving={data.moving}
-		duration_ms={state?.duration_ms}
-		retries={data.retries}
-		{flowJobs}
-		on:delete={(e) => {
-			data.eventHandlers.delete(e.detail, '')
-		}}
-		on:insert={(e) => {
-			data.eventHandlers.insert(e.detail)
-		}}
-		on:changeId={(e) => {
-			data.eventHandlers.changeId(e.detail)
-		}}
-		on:move={(e) => {
-			data.eventHandlers.move(data.module, data.modules)
-		}}
-		on:newBranch={(e) => {
-			data.eventHandlers.newBranch(data.module)
-		}}
-		on:select={(e) => {
-			setTimeout(() => data.eventHandlers.select(e.detail))
-		}}
-		on:selectedIteration={(e) => {
-			data.eventHandlers.selectedIteration(e.detail, data.module.id)
-		}}
-		on:updateMock={() => {
-			data.eventHandlers.updateMock()
-		}}
-	/>
-
-	<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">
-		{#if (data.value.type === 'branchall' || data.value.type === 'branchone') && data.insertable}
+<NodeWrapper offset={data.offset}>
+	{#snippet children({ darkMode })}
+		{#if data.module.value.type == 'flow'}
 			<button
-				title="Add branch"
-				class="rounded text-secondary border hover:bg-surface-hover bg-surface p-1"
-				on:click={() => {
-					data?.eventHandlers?.newBranch(data.module)
-				}}
+				title="Expand subflow"
+				class="z-50 absolute -top-[10px] right-[25px] rounded-full h-[20px] w-[20px] center-center text-primary bg-surface duration-0 hover:bg-surface-hover"
+				onclick={stopPropagation(
+					preventDefault(() => {
+						if (data.module.value.type == 'flow') {
+							data.eventHandlers.expandSubflow(data.id, data.module.value.path)
+						}
+					})
+				)}
 			>
-				<GitBranchPlus size={16} />
+				<Maximize2 size={12} />
 			</button>
 		{/if}
-	</div>
+		<MapItem
+			moduleId={data.id}
+			mod={data.module}
+			insertable={data.insertable}
+			editMode={data.editMode}
+			annotation={flowJobs &&
+			(data.module.value.type === 'forloopflow' || data.module.value.type === 'whileloopflow')
+				? 'Iteration: ' +
+					((moduleState?.selectedForloopIndex ?? 0) >= 0
+						? (moduleState?.selectedForloopIndex ?? 0) + 1
+						: moduleState?.flow_jobs?.length) +
+					'/' +
+					(moduleState?.iteration_total ?? '?')
+				: ''}
+			bgColor={getStateColor(type, darkMode, true, moduleState?.skipped)}
+			bgHoverColor={getStateHoverColor(type, darkMode, true, moduleState?.skipped)}
+			moving={data.moving}
+			duration_ms={moduleState?.duration_ms}
+			retries={moduleState?.retries}
+			{flowJobs}
+			on:delete={(e) => {
+				data.eventHandlers.delete(e.detail, '')
+			}}
+			on:changeId={(e) => {
+				data.eventHandlers.changeId(e.detail)
+			}}
+			on:move={(e) => {
+				data.eventHandlers.move({ id: data.id })
+			}}
+			on:newBranch={(e) => {
+				data.eventHandlers.newBranch(data.id)
+			}}
+			onSelect={(e) => {
+				setTimeout(() => data.eventHandlers.select(e))
+			}}
+			onSelectedIteration={(e) => {
+				data.eventHandlers.selectedIteration(e)
+			}}
+			onUpdateMock={(detail) => {
+				data.eventHandlers.updateMock(detail)
+			}}
+		/>
+
+		<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">
+			{#if (data.module.value.type === 'branchall' || data.module.value.type === 'branchone') && data.insertable}
+				<button
+					title="Add branch"
+					class="rounded text-secondary border hover:bg-surface-hover bg-surface p-1"
+					onclick={() => {
+						data?.eventHandlers?.newBranch(data.id)
+					}}
+				>
+					<GitBranchPlus size={16} />
+				</button>
+			{/if}
+		</div>
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
index e8a740a220..da9284c6dd 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
@@ -1,40 +1,30 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import type { FlowModule } from '$lib/gen'
-	import type { GraphEventHandlers } from '../../graphBuilder'
 	import { getStateColor, getStateHoverColor } from '../../util'
-	import type { GraphModuleState } from '../../model'
-	import { computeBorderStatus } from '../utils'
+	import type { NoBranchN } from '../../graphBuilder.svelte'
 
-	export let data: {
-		id: string
-		insertable: boolean
-		modules: FlowModule[]
-		eventHandlers: GraphEventHandlers
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		offset: number
-		label: string | undefined
-		branchOne: boolean
+	interface Props {
+		data: NoBranchN['data']
 	}
 
-	$: borderStatus = data.branchOne
-		? computeBorderStatus(0, 'branchone', data.flowModuleStates?.[data.id])
-		: undefined
+	let { data }: Props = $props()
 </script>
 
-<NodeWrapper offset={data.offset} let:darkMode enableSourceHandle enableTargetHandle>
-	<VirtualItem
-		label={data.label ?? 'No branches'}
-		id={data.id}
-		hideId={true}
-		selectable={true}
-		selected={false}
-		bgColor={getStateColor(undefined, darkMode)}
-		bgHoverColor={getStateHoverColor(undefined, darkMode)}
-		borderColor={getStateColor(borderStatus, darkMode)}
-		on:select={(e) => {
-			setTimeout(() => data?.eventHandlers?.select(e.detail))
-		}}
-	/>
+<NodeWrapper offset={data.offset} enableSourceHandle enableTargetHandle>
+	{#snippet children({ darkMode })}
+		<VirtualItem
+			label="No branches"
+			id={data.id}
+			hideId={true}
+			selectable={true}
+			selected={false}
+			bgColor={getStateColor(undefined, darkMode)}
+			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			borderColor={getStateColor(undefined, darkMode)}
+			on:select={(e) => {
+				setTimeout(() => data?.eventHandlers?.select(e.detail))
+			}}
+		/>
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte b/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
index 02843fefb2..39aae0e292 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
@@ -3,12 +3,23 @@
 	import { Handle, Position } from '@xyflow/svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let enableSourceHandle: boolean = true
-	export let enableTargetHandle: boolean = true
-	export let offset: number = 0
-	export let wrapperClass: string = ''
+	interface Props {
+		enableSourceHandle?: boolean
+		enableTargetHandle?: boolean
+		offset?: number
+		wrapperClass?: string
+		children?: import('svelte').Snippet<[any]>
+	}
 
-	let darkMode: boolean = false
+	let {
+		enableSourceHandle = true,
+		enableTargetHandle = true,
+		offset = 0,
+		wrapperClass = '',
+		children
+	}: Props = $props()
+
+	let darkMode: boolean = $state(false)
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -17,7 +28,7 @@
 	class={twMerge('relative shadow-md rounded-sm', wrapperClass)}
 	style={`margin-left: ${offset}px;`}
 >
-	<slot {darkMode} />
+	{@render children?.({ darkMode })}
 </div>
 
 {#if enableSourceHandle}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
index d761a1e50d..cadad9f588 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
@@ -1,40 +1,41 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import type { FlowModule } from '$lib/gen'
-	import type { GraphEventHandlers } from '../../graphBuilder'
 	import { getStateColor, getStateHoverColor } from '../../util'
 	import type { Writable } from 'svelte/store'
 	import { getContext } from 'svelte'
+	import type { ResultN } from '../../graphBuilder.svelte'
 
-	export let data: {
-		eventHandlers: GraphEventHandlers
-		modules: FlowModule[]
-		success: boolean | undefined
+	interface Props {
+		data: ResultN['data']
 	}
 
+	let { data }: Props = $props()
+
 	const { selectedId } = getContext<{
 		selectedId: Writable<string | undefined>
 	}>('FlowGraphContext')
 </script>
 
-<NodeWrapper let:darkMode enableSourceHandle={false}>
-	<VirtualItem
-		id={'Result'}
-		label={'Result'}
-		selectable={true}
-		selected={$selectedId === 'Result'}
-		hideId={true}
-		bgColor={getStateColor(
-			data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
-			darkMode
-		)}
-		bgHoverColor={getStateHoverColor(
-			data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
-			darkMode
-		)}
-		on:select={(e) => {
-			setTimeout(() => data?.eventHandlers?.select(e.detail))
-		}}
-	/>
+<NodeWrapper enableSourceHandle={false}>
+	{#snippet children({ darkMode })}
+		<VirtualItem
+			id={'Result'}
+			label={'Result'}
+			selectable={true}
+			selected={$selectedId === 'Result'}
+			hideId={true}
+			bgColor={getStateColor(
+				data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
+				darkMode
+			)}
+			bgHoverColor={getStateHoverColor(
+				data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
+				darkMode
+			)}
+			on:select={(e) => {
+				setTimeout(() => data?.eventHandlers?.select(e.detail))
+			}}
+		/>
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte b/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
index 8f6b08fe58..320350a929 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
@@ -1,46 +1,43 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
+
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import { Minimize2 } from 'lucide-svelte'
-	import type { GraphModuleState } from '../../model'
 	import { getStateColor, getStateHoverColor } from '../../util'
-	import type { FlowModule } from '$lib/gen'
-	import type { GraphEventHandlers } from '../../graphBuilder'
+	import type { SubflowBoundN } from '../../graphBuilder.svelte'
 
-	export let data: {
-		label: string
-		preLabel: string | undefined
-		insertable: boolean
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		subflowId: string
-		id: string
-		modules: FlowModule[]
-		selected: boolean
-		eventHandlers: GraphEventHandlers
-		offset: number
+	interface Props {
+		data: SubflowBoundN['data']
 	}
+
+	let { data }: Props = $props()
 </script>
 
-<NodeWrapper let:darkMode offset={data.offset}>
-	<VirtualItem
-		label={data.label}
-		preLabel={data.preLabel}
-		selectable
-		selected={data.selected}
-		bgColor={getStateColor(undefined, darkMode)}
-		bgHoverColor={getStateHoverColor(undefined, darkMode)}
-		borderColor={undefined}
-		on:select={() => {
-			setTimeout(() => data.eventHandlers?.select(data.id))
-		}}
-	/>
-	<button
-		title="Unexpand subflow"
-		class="z-50 absolute -top-[10px] right-[25px] rounded-full h-[20px] w-[20px] center-center text-primary bg-surface duration-0 hover:bg-surface-hover"
-		on:click|preventDefault|stopPropagation={() => {
-			data.eventHandlers.minimizeSubflow(data.subflowId)
-		}}
-	>
-		<Minimize2 size={12} />
-	</button>
+<NodeWrapper offset={data.offset}>
+	{#snippet children({ darkMode })}
+		<VirtualItem
+			label={data.label}
+			preLabel={data.preLabel}
+			selectable
+			selected={data.selected}
+			bgColor={getStateColor(undefined, darkMode)}
+			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			borderColor={undefined}
+			on:select={() => {
+				setTimeout(() => data.eventHandlers?.select(data.id))
+			}}
+		/>
+		<button
+			title="Unexpand subflow"
+			class="z-50 absolute -top-[10px] right-[25px] rounded-full h-[20px] w-[20px] center-center text-primary bg-surface duration-0 hover:bg-surface-hover"
+			onclick={stopPropagation(
+				preventDefault(() => {
+					data.eventHandlers.minimizeSubflow(data.subflowId)
+				})
+			)}
+		>
+			<Minimize2 size={12} />
+		</button>
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
index 667c0e0904..55707f08a2 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import NodeWrapper from './NodeWrapper.svelte'
 	import TriggersWrapper from '../triggers/TriggersWrapper.svelte'
-	import { type GraphEventHandlers, type SimplifiableFlow } from '../../graphBuilder'
 	import type { FlowModule, TriggersCount } from '$lib/gen'
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
@@ -11,6 +10,7 @@
 	import VirtualItemWrapper from '$lib/components/flows/map/VirtualItemWrapper.svelte'
 	import { type Trigger, type TriggerType } from '$lib/components/triggers/utils'
 	import { tick } from 'svelte'
+	import type { GraphEventHandlers, SimplifiableFlow } from '../../graphBuilder.svelte'
 
 	export let data: {
 		path: string
@@ -45,106 +45,102 @@
 	}
 </script>
 
-<NodeWrapper wrapperClass="shadow-md rounded-sm" let:darkMode>
-	{#if data.simplifiableFlow?.simplifiedFlow != true}
-		<TriggersWrapper
-			disableAi={data.disableAi}
-			isEditor={data.isEditor}
-			path={data.path}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			showDraft={data.isEditor ?? false}
-			on:new={(e) => {
-				data?.eventHandlers.insert({
-					modules: data.modules,
-					index: 0,
-					kind: 'trigger',
-					inlineScript: e.detail.inlineScript
-				})
-				data?.eventHandlers?.simplifyFlow(true)
-			}}
-			on:pickScript={(e) => {
-				data?.eventHandlers.insert({
-					modules: data.modules,
-					index: 0,
-					kind: 'trigger',
-					script: e.detail
-				})
-				data?.eventHandlers?.simplifyFlow(true)
-			}}
-			on:openScheduledPoll={(e) => {
-				const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary && !t.isDraft)
-				triggersState.selectedTriggerIndex = primarySchedule
-			}}
-			on:select={() => data?.eventHandlers?.select('triggers')}
-			onSelect={async (triggerIndex: number) => {
-				data?.eventHandlers?.select('triggers')
-				await tick()
-				triggersState.selectedTriggerIndex = triggerIndex
-			}}
-			on:delete={(e) => {
-				data.eventHandlers.delete(e, '')
-			}}
-			onAddDraftTrigger={async (type: TriggerType) => {
-				const newTrigger = triggersState.addDraftTrigger(triggersCount, type)
-				data?.eventHandlers?.select('triggers')
-				await tick()
-				triggersState.selectedTriggerIndex = newTrigger
-			}}
-			selected={$selectedId == 'triggers'}
-			newItem={data.newFlow}
-			modules={data.modules}
-		/>
-	{:else}
-		<VirtualItemWrapper
-			label="Check for new events"
-			selectable={true}
-			selected={$selectedId == 'triggers'}
-			id={'triggers'}
-			bgColor={getStateColor(undefined, darkMode)}
-			on:select={(e) => {
-				data?.eventHandlers?.select(e.detail)
-			}}
-		>
-			{#if triggersState.triggers.some((t) => t.isPrimary) || $triggersCount?.primary_schedule}
-				{@const { enabled, schedule } = getScheduleCfg(
-					triggersState.triggers.find((t) => t.isPrimary),
-					$triggersCount
-				)}
-				<div class="text-2xs text-primary p-2 flex gap-2 items-center">
-					<Calendar size={12} />
-					<div>
-						Schedule every {schedule}
-						{enabled ? '' : ' (disabled)'}
+<NodeWrapper wrapperClass="shadow-md rounded-sm">
+	{#snippet children({ darkMode })}
+		{#if data.simplifiableFlow?.simplifiedFlow != true}
+			<TriggersWrapper
+				disableAi={data.disableAi}
+				isEditor={data.isEditor}
+				path={data.path}
+				bgColor={getStateColor(undefined, darkMode)}
+				bgHoverColor={getStateHoverColor(undefined, darkMode)}
+				showDraft={data.isEditor ?? false}
+				on:new={(e) => {
+					data?.eventHandlers.insert({
+						index: 0,
+						kind: 'trigger',
+						inlineScript: e.detail.inlineScript
+					})
+					data?.eventHandlers?.simplifyFlow(true)
+				}}
+				on:pickScript={(e) => {
+					data?.eventHandlers.insert({
+						index: 0,
+						kind: 'trigger',
+						script: e.detail
+					})
+					data?.eventHandlers?.simplifyFlow(true)
+				}}
+				on:openScheduledPoll={(e) => {
+					const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary && !t.isDraft)
+					triggersState.selectedTriggerIndex = primarySchedule
+				}}
+				on:select={() => data?.eventHandlers?.select('triggers')}
+				onSelect={async (triggerIndex: number) => {
+					data?.eventHandlers?.select('triggers')
+					await tick()
+					triggersState.selectedTriggerIndex = triggerIndex
+				}}
+				onAddDraftTrigger={async (type: TriggerType) => {
+					const newTrigger = triggersState.addDraftTrigger(triggersCount, type)
+					data?.eventHandlers?.select('triggers')
+					await tick()
+					triggersState.selectedTriggerIndex = newTrigger
+				}}
+				selected={$selectedId == 'triggers'}
+				newItem={data.newFlow}
+			/>
+		{:else}
+			<VirtualItemWrapper
+				label="Check for new events"
+				selectable={true}
+				selected={$selectedId == 'triggers'}
+				id={'triggers'}
+				bgColor={getStateColor(undefined, darkMode)}
+				on:select={(e) => {
+					data?.eventHandlers?.select(e.detail)
+				}}
+			>
+				{#if triggersState.triggers.some((t) => t.isPrimary) || $triggersCount?.primary_schedule}
+					{@const { enabled, schedule } = getScheduleCfg(
+						triggersState.triggers.find((t) => t.isPrimary),
+						$triggersCount
+					)}
+					<div class="text-2xs text-primary p-2 flex gap-2 items-center">
+						<Calendar size={12} />
+						<div>
+							Schedule every {schedule}
+							{enabled ? '' : ' (disabled)'}
+						</div>
 					</div>
-				</div>
-			{:else}
-				<button
-					class="px-2 py-1 hover:bg-surface-inverse w-full hover:text-primary-inverse"
-					on:click={() => {
-						setScheduledPollSchedule(triggersState, triggersCount)
-					}}
-				>
-					Set primary schedule
-				</button>
-			{/if}
-		</VirtualItemWrapper>
-	{/if}
-	{#if data.simplifiableFlow != undefined}
-		<button
-			class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
+				{:else}
+					<button
+						class="px-2 py-1 hover:bg-surface-inverse w-full hover:text-primary-inverse"
+						on:click={() => {
+							setScheduledPollSchedule(triggersState, triggersCount)
+						}}
+					>
+						Set primary schedule
+					</button>
+				{/if}
+			</VirtualItemWrapper>
+		{/if}
+		{#if data.simplifiableFlow != undefined}
+			<button
+				class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
 outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-nord-950 hover:text-white"
-			on:click|preventDefault|stopPropagation={() =>
-				data?.eventHandlers?.simplifyFlow(!data.simplifiableFlow?.simplifiedFlow)}
-			title={data.simplifiableFlow?.simplifiedFlow
-				? 'Expand to full flow view'
-				: 'Simplify flow view for scheduled poll'}
-		>
-			{#if data.simplifiableFlow?.simplifiedFlow}
-				<Maximize2 size={12} strokeWidth={2} />
-			{:else}
-				<Minimize2 size={12} strokeWidth={2} />
-			{/if}
-		</button>
-	{/if}
+				on:click|preventDefault|stopPropagation={() =>
+					data?.eventHandlers?.simplifyFlow(!data.simplifiableFlow?.simplifiedFlow)}
+				title={data.simplifiableFlow?.simplifiedFlow
+					? 'Expand to full flow view'
+					: 'Simplify flow view for scheduled poll'}
+			>
+				{#if data.simplifiableFlow?.simplifiedFlow}
+					<Maximize2 size={12} strokeWidth={2} />
+				{:else}
+					<Minimize2 size={12} strokeWidth={2} />
+				{/if}
+			</button>
+		{/if}
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte
deleted file mode 100644
index cd1aa18d89..0000000000
--- a/frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
-	import NodeWrapper from './NodeWrapper.svelte'
-	import type { FlowModule } from '$lib/gen'
-	import type { GraphEventHandlers } from '../../graphBuilder'
-	import { getStateColor, getStateHoverColor } from '../../util'
-	import type { GraphModuleState } from '../../model'
-
-	export let data: {
-		id: string
-		insertable: boolean
-		modules: FlowModule[]
-		eventHandlers: GraphEventHandlers
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		offset: number
-	}
-</script>
-
-<NodeWrapper offset={data.offset} let:darkMode enableSourceHandle enableTargetHandle>
-	<VirtualItem
-		label={'Collect result from all branches'}
-		id={data.id}
-		selectable={true}
-		selected={false}
-		bgColor={getStateColor(undefined, darkMode)}
-		bgHoverColor={getStateHoverColor(undefined, darkMode)}
-		borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
-		on:select={(e) => {
-			data?.eventHandlers?.select(e.detail)
-		}}
-	/>
-</NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
index 20a83bf332..f37bbcea0c 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
@@ -1,30 +1,29 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import type { GraphEventHandlers } from '../../graphBuilder'
+	import type { BranchOneEndN } from '../../graphBuilder.svelte'
 	import { getStateColor, getStateHoverColor } from '../../util'
-	import type { GraphModuleState } from '../../model'
 
-	export let data: {
-		id: string
-		insertable: boolean
-		eventHandlers: GraphEventHandlers
-		flowModuleStates: Record<string, GraphModuleState> | undefined
-		offset: number
+	interface Props {
+		data: BranchOneEndN['data']
 	}
+
+	let { data }: Props = $props()
 </script>
 
-<NodeWrapper let:darkMode offset={data.offset}>
-	<VirtualItem
-		label={'Collect result from chosen branch'}
-		id={data.id}
-		selectable={true}
-		selected={false}
-		bgColor={getStateColor(undefined, darkMode)}
-		bgHoverColor={getStateHoverColor(undefined, darkMode)}
-		borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
-		on:select={(e) => {
-			setTimeout(() => data?.eventHandlers?.select(e.detail))
-		}}
-	/>
+<NodeWrapper offset={data.offset}>
+	{#snippet children({ darkMode })}
+		<VirtualItem
+			label={'Collect result from chosen branch'}
+			id={data.id}
+			selectable={true}
+			selected={false}
+			bgColor={getStateColor(undefined, darkMode)}
+			bgHoverColor={getStateHoverColor(undefined, darkMode)}
+			borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+			on:select={(e) => {
+				setTimeout(() => data?.eventHandlers?.select(e.detail))
+			}}
+		/>
+	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
index 4f9d2b4467..070b9166fd 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Calendar, Mail, Webhook, Unplug, Database, Terminal } from 'lucide-svelte'
 	import { Loader2 } from 'lucide-svelte'
-	import { type ComponentType } from 'svelte'
+	import { type Component, type ComponentType } from 'svelte'
 	import { Route } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import { type TriggerContext } from '$lib/components/triggers'
@@ -44,7 +44,11 @@
 	let menuOpen = $state(false)
 
 	const triggerTypeConfig: {
-		[key in TriggerType]: { icon: ComponentType; countKey?: string; disabled?: boolean }
+		[key in TriggerType]: {
+			icon: ComponentType | Component<any, {}, ''>
+			countKey?: string
+			disabled?: boolean
+		}
 	} = {
 		webhook: { icon: Webhook, countKey: 'webhook_count' },
 		schedule: { icon: Calendar, countKey: 'schedule_count' },
@@ -178,7 +182,7 @@
 						bind:open={menuOpen}
 						disabled={!triggersGrouped[type]}
 					>
-						{#snippet trigger({ trigger })}
+						{#snippet triggr({ trigger })}
 							{@render triggerButton({
 								type,
 								isSelected,
@@ -208,7 +212,7 @@
 				class="h-fit center-center mr-1"
 				bind:open={menuOpen}
 			>
-				{#snippet trigger({ trigger })}
+				{#snippet triggr({ trigger })}
 					<MeltButton
 						class="w-[23px] h-[23px] rounded-md center-center text-[12px] hover:bg-slate-300 transition-all duration-100 font-normal text-secondary hover:text-primary"
 						meltElement={trigger}
@@ -237,6 +241,8 @@
 	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig[type]}
 
 	<MeltButton
+		aiId={`trigger-button-${type}`}
+		aiDescription={`Trigger button for ${type}`}
 		class={twMerge(
 			'hover:bg-surface-hover rounded-md shadow-sm text-xs relative center-center cursor-pointer bg-slate-100 dark:bg-slate-700',
 			'dark:outline dark:outline-1 outline-tertiary/20 group',
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
index 36fbcbb39b..b07ab41833 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -3,7 +3,6 @@
 	import { createEventDispatcher } from 'svelte'
 	import type { TriggerType } from '$lib/components/triggers/utils'
 	import TriggersBadge from './TriggersBadge.svelte'
-	import type { FlowModule } from '$lib/gen'
 	import { Plus } from 'lucide-svelte'
 	import InsertModuleInner from '$lib/components/flows/map/InsertModuleInner.svelte'
 	import AddTriggersButton from '$lib/components/triggers/AddTriggersButton.svelte'
@@ -15,7 +14,6 @@
 		selected: boolean
 		isEditor?: boolean
 		disableAi?: boolean
-		modules?: FlowModule[]
 		bgColor: string
 		bgHoverColor?: string
 		showDraft?: boolean
@@ -29,7 +27,6 @@
 		selected,
 		isEditor = false,
 		disableAi = false,
-		modules = [],
 		bgColor,
 		bgHoverColor = '',
 		showDraft,
@@ -117,8 +114,6 @@
 				addTriggersButton?.close()
 			}}
 			kind="trigger"
-			index={0}
-			{modules}
 		/>
 	</div>
 {/snippet}
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index ae3211b903..28aa385ff5 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -23,9 +23,6 @@
 		UnfoldVertical
 	} from 'lucide-svelte'
 
-	export let filter = ''
-	export let subtab: 'flow' | 'script' | 'app' = 'script'
-
 	import { HOME_SEARCH_SHOW_FLOW, HOME_SEARCH_PLACEHOLDER } from '$lib/consts'
 
 	import SearchItems from '../SearchItems.svelte'
@@ -43,7 +40,14 @@
 	import Item from './Item.svelte'
 	import TreeViewRoot from './TreeViewRoot.svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
+	import TriggerableByAI from '../TriggerableByAI.svelte'
+	interface Props {
+		filter?: string
+		subtab?: 'flow' | 'script' | 'app'
+	}
+
+	let { filter = $bindable(''), subtab = $bindable('script') }: Props = $props()
 
 	type TableItem<T, U extends 'script' | 'flow' | 'app' | 'raw_app'> = T & {
 		canWrite: boolean
@@ -59,18 +63,20 @@
 	type TableApp = TableItem<ListableApp, 'app'>
 	type TableRawApp = TableItem<ListableRawApp, 'raw_app'>
 
-	let scripts: TableScript[] | undefined
-	let flows: TableFlow[] | undefined
-	let apps: TableApp[] | undefined
-	let raw_apps: TableRawApp[] | undefined
+	let scripts: TableScript[] | undefined = $state()
+	let flows: TableFlow[] | undefined = $state()
+	let apps: TableApp[] | undefined = $state()
+	let raw_apps: TableRawApp[] | undefined = $state()
 
-	let filteredItems: (TableScript | TableFlow | TableApp | TableRawApp)[] = []
+	let filteredItems: (TableScript | TableFlow | TableApp | TableRawApp)[] = $state([])
 
-	let itemKind = ($page.url.searchParams.get('kind') as 'script' | 'flow' | 'app' | 'all') ?? 'all'
+	let itemKind = $state(
+		($page.url.searchParams.get('kind') as 'script' | 'flow' | 'app' | 'all') ?? 'all'
+	)
 
-	let loading = true
+	let loading = $state(true)
 
-	let nbDisplayed = 15
+	let nbDisplayed = $state(15)
 
 	async function loadScripts(includeWithoutMain: boolean): Promise<void> {
 		const loadedScripts = await ScriptService.listScripts({
@@ -138,40 +144,6 @@
 		loading = false
 	}
 
-	$: owners = Array.from(
-		new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-	).sort()
-
-	let combinedItems: (TableScript | TableFlow | TableApp | TableRawApp)[] | undefined = undefined
-
-	$: combinedItems =
-		flows == undefined || scripts == undefined || apps == undefined || raw_apps == undefined
-			? undefined
-			: [
-					...flows.map((x) => ({
-						...x,
-						type: 'flow' as 'flow',
-						time: new Date(x.edited_at).getTime()
-					})),
-					...scripts.map((x) => ({
-						...x,
-						type: 'script' as 'script',
-						time: new Date(x.created_at).getTime()
-					})),
-					...apps.map((x) => ({
-						...x,
-						type: 'app' as 'app',
-						time: new Date(x.edited_at).getTime()
-					})),
-					...raw_apps.map((x) => ({
-						...x,
-						type: 'raw_app' as 'raw_app',
-						time: new Date(x.edited_at).getTime()
-					}))
-				].sort((a, b) =>
-					a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1
-				)
-
 	function filterItemsPathsBaseOnUserFilters(
 		item: TableScript | TableFlow | TableApp | TableRawApp,
 		filterUserFolders: boolean
@@ -183,39 +155,8 @@
 			return true
 		}
 	}
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? combinedItems?.filter(
-					(x) =>
-						x.path.startsWith(ownerFilter + '/') &&
-						(x.type == itemKind || itemKind == 'all') &&
-						filterItemsPathsBaseOnUserFilters(x, filterUserFolders)
-				)
-			: combinedItems?.filter(
-					(x) =>
-						(x.type == itemKind || itemKind == 'all') &&
-						filterItemsPathsBaseOnUserFilters(x, filterUserFolders)
-				)
 
-	let ownerFilter: string | undefined = undefined
-
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
-
-	$: {
-		if ($userStore && $workspaceStore) {
-			loadScripts(includeWithoutMain)
-			loadFlows()
-			if (!archived) {
-				loadApps()
-				loadRawApps()
-			} else {
-				apps = []
-				raw_apps = []
-			}
-		}
-	}
+	let ownerFilter: string | undefined = $state(undefined)
 
 	const cmp = new Intl.Collator('en').compare
 
@@ -262,8 +203,6 @@
 		}
 	}
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
-
 	function resetScroll() {
 		const element = document.getElementsByTagName('svelte-virtual-list-viewport')
 		const firstElement = element.item(0)
@@ -272,40 +211,117 @@
 		}
 	}
 
-	$: items && resetScroll()
-
-	let archived = false
+	let archived = $state(false)
 
 	const TREE_VIEW_SETTING_NAME = 'treeView'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'filterUserFolders'
 	const INCLUDE_WITHOUT_MAIN_SETTING_NAME = 'includeWithoutMain'
-	let treeView = getLocalSetting(TREE_VIEW_SETTING_NAME) == 'true'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
-	let includeWithoutMain = getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME)
-		? getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME) == 'true'
-		: true
-
-	$: storeLocalSetting(TREE_VIEW_SETTING_NAME, treeView ? 'true' : undefined)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
-	$: storeLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME, includeWithoutMain ? 'true' : undefined)
+	let treeView = $state(getLocalSetting(TREE_VIEW_SETTING_NAME) == 'true')
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
+	let includeWithoutMain = $state(
+		getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME)
+			? getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME) == 'true'
+			: true
+	)
 
 	const openSearchWithPrefilledText: (t?: string) => void = getContext(
 		'openSearchWithPrefilledText'
 	)
 
-	let viewCodeDrawer: Drawer
-	let viewCodeTitle: string | undefined
-	let script: Script | undefined
+	let viewCodeDrawer: Drawer | undefined = $state()
+	let viewCodeTitle: string | undefined = $state()
+	let script: Script | undefined = $state()
 	async function showCode(path: string, summary: string) {
 		viewCodeTitle = summary || path
-		await viewCodeDrawer.openDrawer()
+		await viewCodeDrawer?.openDrawer()
 		script = await ScriptService.getScriptByPath({
 			workspace: $workspaceStore!,
 			path
 		})
 	}
 
-	let collapseAll = true
+	let collapseAll = $state(true)
+	let owners = $derived(
+		Array.from(
+			new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
+		).sort()
+	)
+	$effect(() => {
+		if ($userStore && $workspaceStore) {
+			untrack(() => {
+				loadScripts(includeWithoutMain)
+				loadFlows()
+				if (!archived) {
+					loadApps()
+					loadRawApps()
+				} else {
+					apps = []
+					raw_apps = []
+				}
+			})
+		}
+	})
+
+	let combinedItems = $derived(
+		flows == undefined || scripts == undefined || apps == undefined || raw_apps == undefined
+			? undefined
+			: [
+					...flows.map((x) => ({
+						...x,
+						type: 'flow' as 'flow',
+						time: new Date(x.edited_at).getTime()
+					})),
+					...scripts.map((x) => ({
+						...x,
+						type: 'script' as 'script',
+						time: new Date(x.created_at).getTime()
+					})),
+					...apps.map((x) => ({
+						...x,
+						type: 'app' as 'app',
+						time: new Date(x.edited_at).getTime()
+					})),
+					...raw_apps.map((x) => ({
+						...x,
+						type: 'raw_app' as 'raw_app',
+						time: new Date(x.edited_at).getTime()
+					}))
+				].sort((a, b) =>
+					a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1
+				)
+	)
+	$effect(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
+	let preFilteredItems = $derived(
+		ownerFilter != undefined
+			? combinedItems?.filter(
+					(x) =>
+						x.path.startsWith(ownerFilter + '/') &&
+						(x.type == itemKind || itemKind == 'all') &&
+						filterItemsPathsBaseOnUserFilters(x, filterUserFolders)
+				)
+			: combinedItems?.filter(
+					(x) =>
+						(x.type == itemKind || itemKind == 'all') &&
+						filterItemsPathsBaseOnUserFilters(x, filterUserFolders)
+				)
+	)
+	let items = $derived(filter !== '' ? filteredItems : preFilteredItems)
+	$effect(() => {
+		items && resetScroll()
+	})
+	$effect(() => {
+		storeLocalSetting(TREE_VIEW_SETTING_NAME, treeView ? 'true' : undefined)
+	})
+	$effect(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
+	$effect(() => {
+		storeLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME, includeWithoutMain ? 'true' : undefined)
+	})
 </script>
 
 <SearchItems
@@ -334,217 +350,220 @@
 	</DrawerContent>
 </Drawer>
 
-<CenteredPage>
-	<div class="flex flex-wrap gap-2 items-center justify-between w-full mt-2">
-		<div class="flex justify-start">
-			<ToggleButtonGroup
-				bind:selected={itemKind}
-				on:selected={() => {
-					if (itemKind != 'all') {
-						subtab = itemKind
-					}
-					setQuery($page.url, 'kind', itemKind)
-				}}
-				class="h-10"
-				let:item
-			>
-				<ToggleButton value="all" label="All" class="text-sm px-4 py-2" {item} />
-				<ToggleButton
-					value="script"
-					icon={Code2}
-					label="Scripts"
-					class="text-sm px-4 py-2"
-					{item}
-				/>
-				{#if HOME_SEARCH_SHOW_FLOW}
-					<ToggleButton
-						value="flow"
-						label="Flows"
-						icon={FlowIcon}
-						class="text-sm px-4 py-2"
-						selectedColor="#14b8a6"
-						{item}
-					/>
-				{/if}
-				<ToggleButton
-					value="app"
-					label="Apps"
-					icon={LayoutDashboard}
-					class="text-sm px-4 py-2"
-					selectedColor="#fb923c"
-					{item}
-				/>
-			</ToggleButtonGroup>
-		</div>
-
-		<div class="relative text-tertiary grow min-w-[100px]">
-			<!-- svelte-ignore a11y-autofocus -->
-			<input
-				autofocus
-				placeholder={HOME_SEARCH_PLACEHOLDER}
-				bind:value={filter}
-				class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
-			/>
-			<button aria-label="Search" type="submit" class="absolute right-0 top-0 mt-3 mr-4">
-				<svg
-					class="h-4 w-4 fill-current"
-					xmlns="http://www.w3.org/2000/svg"
-					xmlns:xlink="http://www.w3.org/1999/xlink"
-					version="1.1"
-					id="Capa_1"
-					x="0px"
-					y="0px"
-					viewBox="0 0 56.966 56.966"
-					style="enable-background:new 0 0 56.966 56.966;"
-					xml:space="preserve"
-					width="512px"
-					height="512px"
+<TriggerableByAI id="home-items-list" description="Lists of scripts, flows, and apps">
+	<CenteredPage>
+		<div class="flex flex-wrap gap-2 items-center justify-between w-full mt-2">
+			<div class="flex justify-start">
+				<ToggleButtonGroup
+					bind:selected={itemKind}
+					on:selected={() => {
+						if (itemKind != 'all') {
+							subtab = itemKind
+						}
+						setQuery($page.url, 'kind', itemKind)
+					}}
+					class="h-10"
 				>
-					<path
-						d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
-					/>
-				</svg>
-			</button>
-		</div>
-		<Button
-			on:click={() => openSearchWithPrefilledText('#')}
-			variant="border"
-			size="sm"
-			spacingSize="lg"
-			wrapperClasses="h-10"
-			color="light"
-			endIcon={{
-				icon: SearchCode
-			}}
-		>
-			Content
-		</Button>
-	</div>
-	<div class="relative">
-		<ListFilters
-			syncQuery
-			bind:selectedFilter={ownerFilter}
-			filters={owners}
-			bottomMargin={false}
-		/>
-		{#if filteredItems?.length == 0}
-			<div class="mt-10"></div>
-		{/if}
-		{#if !loading}
-			<div class="flex w-full flex-row-reverse gap-2 mt-4 mb-1 items-center h-6">
-				<Popover floatingConfig={{ placement: 'bottom-end' }}>
-					<svelte:fragment slot="trigger">
-						<Button
-							startIcon={{
-								icon: SlidersHorizontal
-							}}
-							nonCaptureEvent
-							iconOnly
-							size="xs"
-							color="light"
-							variant="border"
-							spacingSize="xs2"
+					{#snippet children({ item })}
+						<ToggleButton value="all" label="All" class="text-sm px-4 py-2" {item} />
+						<ToggleButton
+							value="script"
+							icon={Code2}
+							label="Scripts"
+							class="text-sm px-4 py-2"
+							{item}
 						/>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
-						<div class="p-4">
-							<span class="text-sm font-semibold">Filters</span>
-							<div class="flex flex-col gap-2 mt-2">
-								<Toggle size="xs" bind:checked={archived} options={{ right: 'Only archived' }} />
-								{#if $userStore && !$userStore.operator}
-									<Toggle
-										size="xs"
-										bind:checked={includeWithoutMain}
-										options={{ right: 'Include without main function' }}
-									/>
-								{/if}
-							</div>
-						</div>
-					</svelte:fragment>
-				</Popover>
-				{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
-					<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
-				{:else if $userStore?.is_admin || $userStore?.is_super_admin}
-					<Toggle
-						size="xs"
-						bind:checked={filterUserFolders}
-						options={{ right: `Only u/${$userStore.username} and f/*` }}
-					/>
-				{/if}
-				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
-				{#if treeView}
-					<Button
-						btnClasses="py-0 h-6"
-						size="xs"
-						variant="border"
-						color="light"
-						on:click={() => (collapseAll = !collapseAll)}
-						startIcon={{
-							icon: collapseAll ? UnfoldVertical : FoldVertical
-						}}
-					>
-						{#if collapseAll}
-							Expand all
-						{:else}
-							Collapse all
+						{#if HOME_SEARCH_SHOW_FLOW}
+							<ToggleButton
+								value="flow"
+								label="Flows"
+								icon={FlowIcon}
+								class="text-sm px-4 py-2"
+								selectedColor="#14b8a6"
+								{item}
+							/>
 						{/if}
-					</Button>
-				{/if}
+						<ToggleButton
+							value="app"
+							label="Apps"
+							icon={LayoutDashboard}
+							class="text-sm px-4 py-2"
+							selectedColor="#fb923c"
+							{item}
+						/>
+					{/snippet}
+				</ToggleButtonGroup>
 			</div>
-		{/if}
-	</div>
-	<div>
-		{#if filteredItems == undefined}
-			<div class="mt-4"></div>
-			<Skeleton layout={[[2], 1]} />
-			{#each new Array(6) as _}
-				<Skeleton layout={[[4], 0.5]} />
-			{/each}
-		{:else if filteredItems.length === 0}
-			<NoItemFound />
-		{:else if treeView}
-			<TreeViewRoot
-				{items}
-				{nbDisplayed}
-				{collapseAll}
-				isSearching={filter !== ''}
-				on:scriptChanged={() => loadScripts(includeWithoutMain)}
-				on:flowChanged={loadFlows}
-				on:appChanged={loadApps}
-				on:rawAppChanged={loadRawApps}
-				on:reload={() => {
-					loadScripts(includeWithoutMain)
-					loadFlows()
-					loadApps()
-					loadRawApps()
+
+			<div class="relative text-tertiary grow min-w-[100px]">
+				<!-- svelte-ignore a11y_autofocus -->
+				<input
+					autofocus
+					placeholder={HOME_SEARCH_PLACEHOLDER}
+					bind:value={filter}
+					class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
+				/>
+				<button aria-label="Search" type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+					<svg
+						class="h-4 w-4 fill-current"
+						xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink"
+						version="1.1"
+						id="Capa_1"
+						x="0px"
+						y="0px"
+						viewBox="0 0 56.966 56.966"
+						style="enable-background:new 0 0 56.966 56.966;"
+						xml:space="preserve"
+						width="512px"
+						height="512px"
+					>
+						<path
+							d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
+						/>
+					</svg>
+				</button>
+			</div>
+			<Button
+				on:click={() => openSearchWithPrefilledText('#')}
+				variant="border"
+				size="sm"
+				spacingSize="lg"
+				wrapperClasses="h-10"
+				color="light"
+				endIcon={{
+					icon: SearchCode
 				}}
-				{showCode}
+			>
+				Content
+			</Button>
+		</div>
+		<div class="relative">
+			<ListFilters
+				syncQuery
+				bind:selectedFilter={ownerFilter}
+				filters={owners}
+				bottomMargin={false}
 			/>
-		{:else}
-			<div class="border rounded-md">
-				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
-					<Item
-						{item}
-						on:scriptChanged={() => loadScripts(includeWithoutMain)}
-						on:flowChanged={loadFlows}
-						on:appChanged={loadApps}
-						on:rawAppChanged={loadRawApps}
-						on:reload={() => {
-							loadScripts(includeWithoutMain)
-							loadFlows()
-							loadApps()
-							loadRawApps()
-						}}
-						{showCode}
-					/>
-				{/each}
-			</div>
-			{#if items && items?.length > 15 && nbDisplayed < items.length}
-				<span class="text-xs"
-					>{nbDisplayed} items out of {items.length}
-					<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
-				>
+			{#if filteredItems?.length == 0}
+				<div class="mt-10"></div>
 			{/if}
-		{/if}
-	</div>
-</CenteredPage>
+			{#if !loading}
+				<div class="flex w-full flex-row-reverse gap-2 mt-4 mb-1 items-center h-6">
+					<Popover floatingConfig={{ placement: 'bottom-end' }}>
+						{#snippet trigger()}
+							<Button
+								startIcon={{
+									icon: SlidersHorizontal
+								}}
+								nonCaptureEvent
+								iconOnly
+								size="xs"
+								color="light"
+								variant="border"
+								spacingSize="xs2"
+							/>
+						{/snippet}
+						{#snippet content()}
+							<div class="p-4">
+								<span class="text-sm font-semibold">Filters</span>
+								<div class="flex flex-col gap-2 mt-2">
+									<Toggle size="xs" bind:checked={archived} options={{ right: 'Only archived' }} />
+									{#if $userStore && !$userStore.operator}
+										<Toggle
+											size="xs"
+											bind:checked={includeWithoutMain}
+											options={{ right: 'Include without main function' }}
+										/>
+									{/if}
+								</div>
+							</div>
+						{/snippet}
+					</Popover>
+					{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
+						<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
+					{:else if $userStore?.is_admin || $userStore?.is_super_admin}
+						<Toggle
+							size="xs"
+							bind:checked={filterUserFolders}
+							options={{ right: `Only u/${$userStore.username} and f/*` }}
+						/>
+					{/if}
+					<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
+					{#if treeView}
+						<Button
+							btnClasses="py-0 h-6"
+							size="xs"
+							variant="border"
+							color="light"
+							on:click={() => (collapseAll = !collapseAll)}
+							startIcon={{
+								icon: collapseAll ? UnfoldVertical : FoldVertical
+							}}
+						>
+							{#if collapseAll}
+								Expand all
+							{:else}
+								Collapse all
+							{/if}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		<div>
+			{#if filteredItems == undefined}
+				<div class="mt-4"></div>
+				<Skeleton layout={[[2], 1]} />
+				{#each new Array(6) as _}
+					<Skeleton layout={[[4], 0.5]} />
+				{/each}
+			{:else if filteredItems.length === 0}
+				<NoItemFound />
+			{:else if treeView}
+				<TreeViewRoot
+					{items}
+					{nbDisplayed}
+					{collapseAll}
+					isSearching={filter !== ''}
+					on:scriptChanged={() => loadScripts(includeWithoutMain)}
+					on:flowChanged={loadFlows}
+					on:appChanged={loadApps}
+					on:rawAppChanged={loadRawApps}
+					on:reload={() => {
+						loadScripts(includeWithoutMain)
+						loadFlows()
+						loadApps()
+						loadRawApps()
+					}}
+					{showCode}
+				/>
+			{:else}
+				<div class="border rounded-md">
+					{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
+						<Item
+							{item}
+							on:scriptChanged={() => loadScripts(includeWithoutMain)}
+							on:flowChanged={loadFlows}
+							on:appChanged={loadApps}
+							on:rawAppChanged={loadRawApps}
+							on:reload={() => {
+								loadScripts(includeWithoutMain)
+								loadFlows()
+								loadApps()
+								loadRawApps()
+							}}
+							{showCode}
+						/>
+					{/each}
+				</div>
+				{#if items && items?.length > 15 && nbDisplayed < items.length}
+					<span class="text-xs"
+						>{nbDisplayed} items out of {items.length}
+						<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
+					>
+				{/if}
+			{/if}
+		</div>
+	</CenteredPage>
+</TriggerableByAI>
diff --git a/frontend/src/lib/components/icons/ActivitypubIcon.svelte b/frontend/src/lib/components/icons/ActivitypubIcon.svelte
index efe8f989b3..0185d98f3a 100644
--- a/frontend/src/lib/components/icons/ActivitypubIcon.svelte
+++ b/frontend/src/lib/components/icons/ActivitypubIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AirtableIcon.svelte b/frontend/src/lib/components/icons/AirtableIcon.svelte
index ea803bd87d..e71aa95bdd 100644
--- a/frontend/src/lib/components/icons/AirtableIcon.svelte
+++ b/frontend/src/lib/components/icons/AirtableIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AnsibleIcon.svelte b/frontend/src/lib/components/icons/AnsibleIcon.svelte
index c02395e0d4..26a5c6b5b6 100644
--- a/frontend/src/lib/components/icons/AnsibleIcon.svelte
+++ b/frontend/src/lib/components/icons/AnsibleIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AppwriteIcon.svelte b/frontend/src/lib/components/icons/AppwriteIcon.svelte
index e3fa92af08..53d8d0369b 100644
--- a/frontend/src/lib/components/icons/AppwriteIcon.svelte
+++ b/frontend/src/lib/components/icons/AppwriteIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AsanaIcon.svelte b/frontend/src/lib/components/icons/AsanaIcon.svelte
index a32e3f8819..8636c11101 100644
--- a/frontend/src/lib/components/icons/AsanaIcon.svelte
+++ b/frontend/src/lib/components/icons/AsanaIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 256 236.624" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><title>Asana</title><g><path d="M200.324957,125.270044 C169.575962,125.270044 144.649915,150.19729 144.649915,180.947483 C144.649915,211.696478 169.575962,236.623724 200.324957,236.623724 C231.073952,236.623724 256,211.696478 256,180.947483 C256,150.19729 231.073952,125.270044 200.324957,125.270044 L200.324957,125.270044 Z M55.6754021,125.274837 C24.9270063,125.274837 0,150.19729 0,180.947483 C0,211.696478 24.9270063,236.623724 55.6754021,236.623724 C86.425116,236.623724 111.35332,211.696478 111.35332,180.947483 C111.35332,150.19729 86.425116,125.274837 55.6754021,125.274837 L55.6754021,125.274837 Z M183.674444,55.674204 C183.674444,86.425116 158.748396,111.354638 128.000599,111.354638 C97.2505258,111.354638 72.3247177,86.425116 72.3247177,55.674204 C72.3247177,24.9294026 97.2505258,0 128.000599,0 C158.748396,0 183.674444,24.9294026 183.674444,55.674204 L183.674444,55.674204 Z" fill="#F06A6A"/></g></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/AwsEcrIcon.svelte b/frontend/src/lib/components/icons/AwsEcrIcon.svelte
index 9d1bf7f0c0..2801712f62 100644
--- a/frontend/src/lib/components/icons/AwsEcrIcon.svelte
+++ b/frontend/src/lib/components/icons/AwsEcrIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AwsIcon.svelte b/frontend/src/lib/components/icons/AwsIcon.svelte
index b4d7b4c9d4..3b02d9d773 100644
--- a/frontend/src/lib/components/icons/AwsIcon.svelte
+++ b/frontend/src/lib/components/icons/AwsIcon.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let color: string | undefined = undefined
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		color?: string | undefined;
+		class?: string;
+	}
+
+	let { size = 16, color = undefined, class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AzureIcon.svelte b/frontend/src/lib/components/icons/AzureIcon.svelte
index fcec9b7e14..4940e9b43e 100644
--- a/frontend/src/lib/components/icons/AzureIcon.svelte
+++ b/frontend/src/lib/components/icons/AzureIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg id="azure" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.5 377.3" {width} {height}
diff --git a/frontend/src/lib/components/icons/BarsStaggered.svelte b/frontend/src/lib/components/icons/BarsStaggered.svelte
index 1a7745e914..dbfebdeb1d 100644
--- a/frontend/src/lib/components/icons/BarsStaggered.svelte
+++ b/frontend/src/lib/components/icons/BarsStaggered.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/BcryptIcon.svelte b/frontend/src/lib/components/icons/BcryptIcon.svelte
index 609db1d0c6..bf9bf9b6a2 100644
--- a/frontend/src/lib/components/icons/BcryptIcon.svelte
+++ b/frontend/src/lib/components/icons/BcryptIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/BigQueryIcon.svelte b/frontend/src/lib/components/icons/BigQueryIcon.svelte
index a12761bd19..10d099f75d 100644
--- a/frontend/src/lib/components/icons/BigQueryIcon.svelte
+++ b/frontend/src/lib/components/icons/BigQueryIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 24 24"
diff --git a/frontend/src/lib/components/icons/BitbucketIcon.svelte b/frontend/src/lib/components/icons/BitbucketIcon.svelte
index a3a6163bca..9b33e6bb10 100644
--- a/frontend/src/lib/components/icons/BitbucketIcon.svelte
+++ b/frontend/src/lib/components/icons/BitbucketIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} {height} viewBox="0 0 62.42 62.42">
diff --git a/frontend/src/lib/components/icons/BunIcon.svelte b/frontend/src/lib/components/icons/BunIcon.svelte
index 9228e7ce1d..ef845d4834 100644
--- a/frontend/src/lib/components/icons/BunIcon.svelte
+++ b/frontend/src/lib/components/icons/BunIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = 24
-	export let width = 24
+	interface Props {
+		height?: number;
+		width?: number;
+	}
+
+	let { height = 24, width = 24 }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/CACertificate.svelte b/frontend/src/lib/components/icons/CACertificate.svelte
index 2a4f9ec2cd..c73aa5d3ca 100644
--- a/frontend/src/lib/components/icons/CACertificate.svelte
+++ b/frontend/src/lib/components/icons/CACertificate.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/CSharpIcon.svelte b/frontend/src/lib/components/icons/CSharpIcon.svelte
index 36cd1777f3..703c692036 100644
--- a/frontend/src/lib/components/icons/CSharpIcon.svelte
+++ b/frontend/src/lib/components/icons/CSharpIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 256 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/CalcomIcon.svelte b/frontend/src/lib/components/icons/CalcomIcon.svelte
index 3dce2d516c..e11dc76d24 100644
--- a/frontend/src/lib/components/icons/CalcomIcon.svelte
+++ b/frontend/src/lib/components/icons/CalcomIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/ClickhouseIcon.svelte b/frontend/src/lib/components/icons/ClickhouseIcon.svelte
index 6f4f092182..6d3870762a 100644
--- a/frontend/src/lib/components/icons/ClickhouseIcon.svelte
+++ b/frontend/src/lib/components/icons/ClickhouseIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/ClickupIcon.svelte b/frontend/src/lib/components/icons/ClickupIcon.svelte
index 132ce36937..22e160931a 100644
--- a/frontend/src/lib/components/icons/ClickupIcon.svelte
+++ b/frontend/src/lib/components/icons/ClickupIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/CloudflareIcon.svelte b/frontend/src/lib/components/icons/CloudflareIcon.svelte
index ada335e65c..6ade506d8a 100644
--- a/frontend/src/lib/components/icons/CloudflareIcon.svelte
+++ b/frontend/src/lib/components/icons/CloudflareIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/CurrencyApiIcon.svelte b/frontend/src/lib/components/icons/CurrencyApiIcon.svelte
index a53965c0d1..66cc8176eb 100644
--- a/frontend/src/lib/components/icons/CurrencyApiIcon.svelte
+++ b/frontend/src/lib/components/icons/CurrencyApiIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/DatadogIcon.svelte b/frontend/src/lib/components/icons/DatadogIcon.svelte
index 74af0888bc..f1e8e02776 100644
--- a/frontend/src/lib/components/icons/DatadogIcon.svelte
+++ b/frontend/src/lib/components/icons/DatadogIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/DbIcon.svelte b/frontend/src/lib/components/icons/DbIcon.svelte
index fc963fde0e..fe74ca9adb 100644
--- a/frontend/src/lib/components/icons/DbIcon.svelte
+++ b/frontend/src/lib/components/icons/DbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <!-- By Fabián Alexis - https://github.com/fabianalexisinostroza/Antu, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=49951194 -->
diff --git a/frontend/src/lib/components/icons/DenoIcon.svelte b/frontend/src/lib/components/icons/DenoIcon.svelte
index e29de9524b..86dca42410 100644
--- a/frontend/src/lib/components/icons/DenoIcon.svelte
+++ b/frontend/src/lib/components/icons/DenoIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = 24
-	export let width = 24
+	interface Props {
+		height?: number;
+		width?: number;
+	}
+
+	let { height = 24, width = 24 }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/DiscordIcon.svelte b/frontend/src/lib/components/icons/DiscordIcon.svelte
index 3939621420..384008b773 100644
--- a/frontend/src/lib/components/icons/DiscordIcon.svelte
+++ b/frontend/src/lib/components/icons/DiscordIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/DockerIcon.svelte b/frontend/src/lib/components/icons/DockerIcon.svelte
index c87ce8510d..d7ab3f498c 100644
--- a/frontend/src/lib/components/icons/DockerIcon.svelte
+++ b/frontend/src/lib/components/icons/DockerIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/DuckDbIcon.svelte b/frontend/src/lib/components/icons/DuckDbIcon.svelte
index 7229a377a6..1fa2e55b2c 100644
--- a/frontend/src/lib/components/icons/DuckDbIcon.svelte
+++ b/frontend/src/lib/components/icons/DuckDbIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let width = 16
-	export let height = 16
+<script lang="ts">
+	interface Props {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 16, height = 16 }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 335 335" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/DynatraceIcon.svelte b/frontend/src/lib/components/icons/DynatraceIcon.svelte
index 0bd4e035ae..e8d57c58ce 100644
--- a/frontend/src/lib/components/icons/DynatraceIcon.svelte
+++ b/frontend/src/lib/components/icons/DynatraceIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="-2 0 260 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/EdgeDbIcon.svelte b/frontend/src/lib/components/icons/EdgeDbIcon.svelte
index d40dfefa67..2b94ecb6d0 100644
--- a/frontend/src/lib/components/icons/EdgeDbIcon.svelte
+++ b/frontend/src/lib/components/icons/EdgeDbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+  interface Props {
+    height?: string;
+    width?: string;
+  }
+
+  let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/FaunadbIcon.svelte b/frontend/src/lib/components/icons/FaunadbIcon.svelte
index 2980661cfc..62c4dde4f2 100644
--- a/frontend/src/lib/components/icons/FaunadbIcon.svelte
+++ b/frontend/src/lib/components/icons/FaunadbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/FirebaseIcon.svelte b/frontend/src/lib/components/icons/FirebaseIcon.svelte
index a2a77f8cd3..6d1ce00468 100644
--- a/frontend/src/lib/components/icons/FirebaseIcon.svelte
+++ b/frontend/src/lib/components/icons/FirebaseIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/FunkwhaleIcon.svelte b/frontend/src/lib/components/icons/FunkwhaleIcon.svelte
index fc6c4d248a..45a1821beb 100644
--- a/frontend/src/lib/components/icons/FunkwhaleIcon.svelte
+++ b/frontend/src/lib/components/icons/FunkwhaleIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GCloudIcon.svelte b/frontend/src/lib/components/icons/GCloudIcon.svelte
index b7395c5bd2..6fba8faa05 100644
--- a/frontend/src/lib/components/icons/GCloudIcon.svelte
+++ b/frontend/src/lib/components/icons/GCloudIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GSheetsIcon.svelte b/frontend/src/lib/components/icons/GSheetsIcon.svelte
index d6a3f860d5..419f9d1b26 100644
--- a/frontend/src/lib/components/icons/GSheetsIcon.svelte
+++ b/frontend/src/lib/components/icons/GSheetsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GcalIcon.svelte b/frontend/src/lib/components/icons/GcalIcon.svelte
index e6c806afb2..6b8f90b086 100644
--- a/frontend/src/lib/components/icons/GcalIcon.svelte
+++ b/frontend/src/lib/components/icons/GcalIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GdocsIcon.svelte b/frontend/src/lib/components/icons/GdocsIcon.svelte
index 49bcae01de..2e202cc2c8 100644
--- a/frontend/src/lib/components/icons/GdocsIcon.svelte
+++ b/frontend/src/lib/components/icons/GdocsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 50 50" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/GdriveIcon.svelte b/frontend/src/lib/components/icons/GdriveIcon.svelte
index 34e9e34219..eff87a3645 100644
--- a/frontend/src/lib/components/icons/GdriveIcon.svelte
+++ b/frontend/src/lib/components/icons/GdriveIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GitIcon.svelte b/frontend/src/lib/components/icons/GitIcon.svelte
index 5a8a581c65..cf8045cba8 100644
--- a/frontend/src/lib/components/icons/GitIcon.svelte
+++ b/frontend/src/lib/components/icons/GitIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/GithubIcon.svelte b/frontend/src/lib/components/icons/GithubIcon.svelte
index 3c94d82af0..2f08b8e045 100644
--- a/frontend/src/lib/components/icons/GithubIcon.svelte
+++ b/frontend/src/lib/components/icons/GithubIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GitlabIcon.svelte b/frontend/src/lib/components/icons/GitlabIcon.svelte
index 46c5ec451c..cb567c2473 100644
--- a/frontend/src/lib/components/icons/GitlabIcon.svelte
+++ b/frontend/src/lib/components/icons/GitlabIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GmailIcon.svelte b/frontend/src/lib/components/icons/GmailIcon.svelte
index 19a5a741ae..2a3281adef 100644
--- a/frontend/src/lib/components/icons/GmailIcon.svelte
+++ b/frontend/src/lib/components/icons/GmailIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GoogleCloudIcon.svelte b/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
index 65a725c8f6..5fb4e21797 100644
--- a/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
+++ b/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let size: number = 16
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 16 }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GoogleFormsIcon.svelte b/frontend/src/lib/components/icons/GoogleFormsIcon.svelte
index 1f552453b9..de25179dc4 100644
--- a/frontend/src/lib/components/icons/GoogleFormsIcon.svelte
+++ b/frontend/src/lib/components/icons/GoogleFormsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GoogleIcon.svelte b/frontend/src/lib/components/icons/GoogleIcon.svelte
index 6f8856bace..b9e73ef980 100644
--- a/frontend/src/lib/components/icons/GoogleIcon.svelte
+++ b/frontend/src/lib/components/icons/GoogleIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/GraphqlIcon.svelte b/frontend/src/lib/components/icons/GraphqlIcon.svelte
index c33ea33751..292bdbad20 100644
--- a/frontend/src/lib/components/icons/GraphqlIcon.svelte
+++ b/frontend/src/lib/components/icons/GraphqlIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/HackernewsIcon.svelte b/frontend/src/lib/components/icons/HackernewsIcon.svelte
index 1d3fa0cede..5a77fc7c14 100644
--- a/frontend/src/lib/components/icons/HackernewsIcon.svelte
+++ b/frontend/src/lib/components/icons/HackernewsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/HttpIcon.svelte b/frontend/src/lib/components/icons/HttpIcon.svelte
index bf91087e6b..eb0833ed0e 100644
--- a/frontend/src/lib/components/icons/HttpIcon.svelte
+++ b/frontend/src/lib/components/icons/HttpIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/HubspotIcon.svelte b/frontend/src/lib/components/icons/HubspotIcon.svelte
index 2a968e1f81..87161418c2 100644
--- a/frontend/src/lib/components/icons/HubspotIcon.svelte
+++ b/frontend/src/lib/components/icons/HubspotIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 32 32" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/IpinfoIcon.svelte b/frontend/src/lib/components/icons/IpinfoIcon.svelte
index 0eaa23a983..fad040eb6a 100644
--- a/frontend/src/lib/components/icons/IpinfoIcon.svelte
+++ b/frontend/src/lib/components/icons/IpinfoIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/JavaIcon.svelte b/frontend/src/lib/components/icons/JavaIcon.svelte
index 868aeeccaa..7bdf2ad235 100644
--- a/frontend/src/lib/components/icons/JavaIcon.svelte
+++ b/frontend/src/lib/components/icons/JavaIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = 24
-	export let width = 24
+<script lang="ts">
+	interface Props {
+		height?: number;
+		width?: number;
+	}
+
+	let { height = 24, width = 24 }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="-60.6242 20 378.0764 511.359"><path d="M278.577 426.546h-2.038v-1.14h5.486v1.14h-2.024v5.688h-1.424zm10.942.297h-.032l-2.019 5.392h-.924l-2.006-5.392h-.025v5.392h-1.342v-6.828h1.975l1.86 4.835 1.854-4.835h1.968v6.828h-1.31v-5.392zM96.154 286.925s-14.178 8.245 10.09 11.035c29.4 3.354 44.426 2.873 76.825-3.259 0 0 8.518 5.341 20.414 9.967-72.63 31.128-164.376-1.803-107.329-17.743m-8.875-40.62s-15.902 11.771 8.384 14.283c31.406 3.24 56.208 3.505 99.125-4.759 0 0 5.936 6.018 15.27 9.309-87.814 25.678-185.623 2.025-122.779-18.833" fill="#5382a1"/><path d="M162.098 177.4c17.896 20.604-4.702 39.145-4.702 39.145s45.441-23.458 24.572-52.833c-19.491-27.394-34.438-41.005 46.479-87.934 0 0-127.013 31.722-66.349 101.622" fill="#f8981d"/><path d="M258.157 316.97s10.492 8.645-11.555 15.333c-41.923 12.7-174.488 16.535-211.314.506-13.238-5.759 11.587-13.751 19.396-15.428 8.144-1.766 12.798-1.437 12.798-1.437-14.722-10.371-95.157 20.364-40.857 29.166 148.084 24.015 269.943-10.814 231.532-28.14M102.972 204.218s-67.431 16.016-23.879 21.832c18.389 2.462 55.047 1.905 89.193-.956 27.906-2.354 55.927-7.359 55.927-7.359s-9.84 4.214-16.959 9.075c-68.475 18.009-200.756 9.631-162.674-8.79 32.206-15.568 58.392-13.802 58.392-13.802m120.963 67.614c69.608-36.171 37.424-70.931 14.96-66.248-5.506 1.146-7.961 2.139-7.961 2.139s2.044-3.202 5.948-4.588c44.441-15.624 78.619 46.081-14.346 70.52 0 .001 1.077-.962 1.399-1.823" fill="#5382a1"/><path d="M181.968 0s38.55 38.563-36.563 97.862c-60.233 47.568-13.735 74.69-.025 105.678-35.159-31.722-60.961-59.647-43.651-85.637C127.136 79.752 197.522 61.255 181.968 0" fill="#f8981d"/><path d="M109.812 369.847c66.815 4.277 169.417-2.373 171.847-33.988 0 0-4.671 11.985-55.219 21.503-57.028 10.732-127.364 9.479-169.081 2.601.001-.001 8.54 7.068 52.453 9.884m-10.95 120.802c-6.303 5.467-12.96 8.536-18.934 8.536-8.527 0-13.134-5.113-13.134-13.314 0-8.871 4.936-15.357 24.739-15.357h7.328v20.135m17.393 19.623V449.53c0-15.517-8.85-25.756-30.188-25.756-12.457 0-23.369 3.076-32.238 6.999l2.56 10.752c6.983-2.563 16.022-4.949 24.894-4.949 12.292 0 17.58 4.949 17.58 15.181v7.677h-6.135c-29.865 0-43.337 11.593-43.337 28.994 0 15.017 8.878 23.553 25.594 23.553 10.745 0 18.766-4.436 26.264-10.928l1.361 9.22h13.645zm58.044 0h-21.692l-26.106-84.96h18.943l16.199 52.2 3.601 15.699c8.195-22.698 13.991-45.726 16.89-67.899h18.427c-4.937 27.977-13.821 58.685-26.262 84.96m83.213-19.623c-6.315 5.467-12.984 8.536-18.958 8.536-8.512 0-13.131-5.113-13.131-13.314 0-8.871 4.948-15.357 24.749-15.357h7.34v20.135m17.39 19.623V449.53c0-15.517-8.872-25.756-30.185-25.756-12.466 0-23.382 3.076-32.247 6.999l2.556 10.752c6.986-2.563 16.042-4.949 24.907-4.949 12.283 0 17.579 4.949 17.579 15.181v7.677h-6.145c-29.874 0-43.34 11.593-43.34 28.994 0 15.017 8.871 23.553 25.584 23.553 10.751 0 18.769-4.436 26.28-10.928l1.366 9.22h13.645zM30.32 524.7c-4.958 7.239-12.966 12.966-21.733 16.206L0 530.801c6.673-3.424 12.396-8.954 15.055-14.105 2.3-4.581 3.252-10.485 3.252-24.604v-96.995h18.478v95.666c-.001 18.876-1.51 26.501-6.465 33.937" fill="#5382a1"/></svg>
diff --git a/frontend/src/lib/components/icons/JavaScriptIcon.svelte b/frontend/src/lib/components/icons/JavaScriptIcon.svelte
index 23dce0a347..c6a4c75b71 100644
--- a/frontend/src/lib/components/icons/JavaScriptIcon.svelte
+++ b/frontend/src/lib/components/icons/JavaScriptIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
diff --git a/frontend/src/lib/components/icons/JiraIcon.svelte b/frontend/src/lib/components/icons/JiraIcon.svelte
index a40a9c06bc..6e1319240e 100644
--- a/frontend/src/lib/components/icons/JiraIcon.svelte
+++ b/frontend/src/lib/components/icons/JiraIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/JsonIcon.svelte b/frontend/src/lib/components/icons/JsonIcon.svelte
index 2736d80406..4c0bf3370a 100644
--- a/frontend/src/lib/components/icons/JsonIcon.svelte
+++ b/frontend/src/lib/components/icons/JsonIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
diff --git a/frontend/src/lib/components/icons/JumpCloudIcon.svelte b/frontend/src/lib/components/icons/JumpCloudIcon.svelte
index 4d058a912c..583310ab9f 100644
--- a/frontend/src/lib/components/icons/JumpCloudIcon.svelte
+++ b/frontend/src/lib/components/icons/JumpCloudIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg version="1.1" id="svg2" x=0 y=0 {width} {height} viewBox="0 0 56 56" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/KafkaIcon.svelte b/frontend/src/lib/components/icons/KafkaIcon.svelte
index 20324a3395..ce3e1f23f9 100644
--- a/frontend/src/lib/components/icons/KafkaIcon.svelte
+++ b/frontend/src/lib/components/icons/KafkaIcon.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-	export let size: number = 16
-	export let color: string | undefined = undefined
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number
+		color?: string | undefined
+		class?: string
+	}
+
+	let { size = 16, color = undefined, class: clazz = '' }: Props = $props()
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/KanidmIcon.svelte b/frontend/src/lib/components/icons/KanidmIcon.svelte
index 18f0e7bddf..6534a24e49 100644
--- a/frontend/src/lib/components/icons/KanidmIcon.svelte
+++ b/frontend/src/lib/components/icons/KanidmIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" x="0px" y="0px" {width} {height}
diff --git a/frontend/src/lib/components/icons/KeycloakIcon.svelte b/frontend/src/lib/components/icons/KeycloakIcon.svelte
index 43e0f06c96..8aaecf851d 100644
--- a/frontend/src/lib/components/icons/KeycloakIcon.svelte
+++ b/frontend/src/lib/components/icons/KeycloakIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/LinkdingIcon.svelte b/frontend/src/lib/components/icons/LinkdingIcon.svelte
index d5af77333f..cc68b23733 100644
--- a/frontend/src/lib/components/icons/LinkdingIcon.svelte
+++ b/frontend/src/lib/components/icons/LinkdingIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg version="1.1" id="svg2" x=0 y=0 {width} {height} viewBox="0 0 56 56" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/LinkedinIcon.svelte b/frontend/src/lib/components/icons/LinkedinIcon.svelte
index f2c79ee54a..c139c66ea4 100644
--- a/frontend/src/lib/components/icons/LinkedinIcon.svelte
+++ b/frontend/src/lib/components/icons/LinkedinIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 30 30" style="enable-background:new 0 0 270 270; fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/MSSqlServerIcon.svelte b/frontend/src/lib/components/icons/MSSqlServerIcon.svelte
index 24fdcda841..0ad4d45ea1 100644
--- a/frontend/src/lib/components/icons/MSSqlServerIcon.svelte
+++ b/frontend/src/lib/components/icons/MSSqlServerIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/MSTeamsIcon.svelte b/frontend/src/lib/components/icons/MSTeamsIcon.svelte
index c1b67498b2..0caf1558ed 100644
--- a/frontend/src/lib/components/icons/MSTeamsIcon.svelte
+++ b/frontend/src/lib/components/icons/MSTeamsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#5059C9" d="M10.765 6.875h3.616c.342 0 .619.276.619.617v3.288a2.272 2.272 0 01-2.274 2.27h-.01a2.272 2.272 0 01-2.274-2.27V7.199c0-.179.145-.323.323-.323zM13.21 6.225c.808 0 1.464-.655 1.464-1.462 0-.808-.656-1.463-1.465-1.463s-1.465.655-1.465 1.463c0 .807.656 1.462 1.465 1.462z"/><path fill="#7B83EB" d="M8.651 6.225a2.114 2.114 0 002.117-2.112A2.114 2.114 0 008.65 2a2.114 2.114 0 00-2.116 2.112c0 1.167.947 2.113 2.116 2.113zM11.473 6.875h-5.97a.611.611 0 00-.596.625v3.75A3.669 3.669 0 008.488 15a3.669 3.669 0 003.582-3.75V7.5a.611.611 0 00-.597-.625z"/><path fill="#000000" d="M8.814 6.875v5.255a.598.598 0 01-.596.595H5.193a3.951 3.951 0 01-.287-1.476V7.5a.61.61 0 01.597-.624h3.31z" opacity=".1"/><path fill="#000000" d="M8.488 6.875v5.58a.6.6 0 01-.596.595H5.347a3.22 3.22 0 01-.267-.65 3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.488 6.875v4.93a.6.6 0 01-.596.595H5.08a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.163 6.875v4.93a.6.6 0 01-.596.595H5.079a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.66z" opacity=".2"/><path fill="#000000" d="M8.814 5.195v1.024c-.055.003-.107.006-.163.006-.055 0-.107-.003-.163-.006A2.115 2.115 0 016.593 4.6h1.625a.598.598 0 01.596.594z" opacity=".1"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.163 5.52v.647a2.115 2.115 0 01-1.465-1.242h.87a.598.598 0 01.595.595z" opacity=".2"/><path fill="url(#microsoft-teams-color-16__paint0_linear_2372_494)" d="M1.597 4.925h5.969c.33 0 .597.267.597.596v5.958a.596.596 0 01-.597.596h-5.97A.596.596 0 011 11.479V5.521c0-.33.267-.596.597-.596z"/><path fill="#ffffff" d="M6.152 7.193H4.959v3.243h-.76V7.193H3.01v-.63h3.141v.63z"/><defs><linearGradient id="microsoft-teams-color-16__paint0_linear_2372_494" x1="2.244" x2="6.906" y1="4.46" y2="12.548" gradientUnits="userSpaceOnUse"><stop stop-color="#5A62C3"/><stop offset=".5" stop-color="#4D55BD"/><stop offset="1" stop-color="#3940AB"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/Mail.svelte b/frontend/src/lib/components/icons/Mail.svelte
index ea112f8f8d..7593f2f228 100644
--- a/frontend/src/lib/components/icons/Mail.svelte
+++ b/frontend/src/lib/components/icons/Mail.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/MailchimpIcon.svelte b/frontend/src/lib/components/icons/MailchimpIcon.svelte
index 9c2710decf..55930c704b 100644
--- a/frontend/src/lib/components/icons/MailchimpIcon.svelte
+++ b/frontend/src/lib/components/icons/MailchimpIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/MailgunIcon.svelte b/frontend/src/lib/components/icons/MailgunIcon.svelte
index c06d13b167..e66c234e92 100644
--- a/frontend/src/lib/components/icons/MailgunIcon.svelte
+++ b/frontend/src/lib/components/icons/MailgunIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="-0.5 0 257 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/MastodonIcon.svelte b/frontend/src/lib/components/icons/MastodonIcon.svelte
index a71f7a50df..36bd6576ce 100644
--- a/frontend/src/lib/components/icons/MastodonIcon.svelte
+++ b/frontend/src/lib/components/icons/MastodonIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/MatrixIcon.svelte b/frontend/src/lib/components/icons/MatrixIcon.svelte
index e3e89601af..5347ac8a9a 100644
--- a/frontend/src/lib/components/icons/MatrixIcon.svelte
+++ b/frontend/src/lib/components/icons/MatrixIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/MicrosoftIcon.svelte b/frontend/src/lib/components/icons/MicrosoftIcon.svelte
index d62b0ae3d9..dc46d8a564 100644
--- a/frontend/src/lib/components/icons/MicrosoftIcon.svelte
+++ b/frontend/src/lib/components/icons/MicrosoftIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/MongodbIcon.svelte b/frontend/src/lib/components/icons/MongodbIcon.svelte
index 3889431ea7..c9b47e830e 100644
--- a/frontend/src/lib/components/icons/MongodbIcon.svelte
+++ b/frontend/src/lib/components/icons/MongodbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/MqttIcon.svelte b/frontend/src/lib/components/icons/MqttIcon.svelte
index 05b7fa8a7d..293af03a92 100644
--- a/frontend/src/lib/components/icons/MqttIcon.svelte
+++ b/frontend/src/lib/components/icons/MqttIcon.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let color: string | undefined = undefined
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		color?: string | undefined;
+		class?: string;
+	}
+
+	let { size = 16, color = undefined, class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/Mysql.svelte b/frontend/src/lib/components/icons/Mysql.svelte
index 90d9838463..1c0eab3c67 100644
--- a/frontend/src/lib/components/icons/Mysql.svelte
+++ b/frontend/src/lib/components/icons/Mysql.svelte
@@ -1,7 +1,11 @@
 <!-- Used under Fair Use: https://fr.wikipedia.org/wiki/Fichier:MySQL.svg -->
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/NatsIcon.svelte b/frontend/src/lib/components/icons/NatsIcon.svelte
index 18c916d93b..f23f7f8eaa 100644
--- a/frontend/src/lib/components/icons/NatsIcon.svelte
+++ b/frontend/src/lib/components/icons/NatsIcon.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let color: string | undefined = undefined
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		color?: string | undefined;
+		class?: string;
+	}
+
+	let { size = 16, color = undefined, class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/NextcloudIcon.svelte b/frontend/src/lib/components/icons/NextcloudIcon.svelte
index 789a9cf492..ff5e338723 100644
--- a/frontend/src/lib/components/icons/NextcloudIcon.svelte
+++ b/frontend/src/lib/components/icons/NextcloudIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg role="img" viewBox="0 0 24 24" {width} {height} xmlns="http://www.w3.org/2000/svg" style="fill:currentcolor;"
diff --git a/frontend/src/lib/components/icons/NocoDbIcon.svelte b/frontend/src/lib/components/icons/NocoDbIcon.svelte
index 39919cb63a..6b73f61ad6 100644
--- a/frontend/src/lib/components/icons/NocoDbIcon.svelte
+++ b/frontend/src/lib/components/icons/NocoDbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 x="0px"
diff --git a/frontend/src/lib/components/icons/NotionIcon.svelte b/frontend/src/lib/components/icons/NotionIcon.svelte
index 50efd6de1e..c12c39c374 100644
--- a/frontend/src/lib/components/icons/NotionIcon.svelte
+++ b/frontend/src/lib/components/icons/NotionIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/NuIcon.svelte b/frontend/src/lib/components/icons/NuIcon.svelte
index 2af6655af8..c356300e58 100644
--- a/frontend/src/lib/components/icons/NuIcon.svelte
+++ b/frontend/src/lib/components/icons/NuIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = 24
-	export let width = 24
+<script lang="ts">
+	interface Props {
+		height?: number;
+		width?: number;
+	}
+
+	let { height = 24, width = 24 }: Props = $props();
 </script>
 
 <svg {width} {height} id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="50 50 300 300" style="display: block;"><path d="M0 0 C6.93 0 13.86 0 21 0 C21 38.61 21 77.22 21 117 C14.22645857 117 8.53138599 116.98586958 2 116 C2 112.04 2 108.08 2 104 C-0.10375 105.546875 -0.10375 105.546875 -2.25 107.125 C-14.08028546 115.39780955 -25.41138365 120.30986454 -40 119 C-49.64829412 117.07689721 -56.55713116 113.55978645 -63.375 106.5625 C-67.57662665 99.93685797 -67.37124042 92.76701998 -67.85671997 85.13790894 C-68.00601713 82.91021723 -68.17880156 80.68508098 -68.35327148 78.45922852 C-70.5354284 49.24476592 -70.5354284 49.24476592 -66.37548828 42.28027344 C-61.37591691 37.48343546 -54.90107126 35 -48 35 C-47.99120064 36.00691895 -47.99120064 36.00691895 -47.98222351 37.03417969 C-47.91811799 44.04275353 -47.83365385 51.05087548 -47.73754883 58.05908203 C-47.70436561 60.67197702 -47.67631329 63.28494255 -47.65356445 65.89794922 C-47.61989792 69.66143761 -47.56757351 73.42428339 -47.51171875 77.1875 C-47.50532883 78.34926758 -47.4989389 79.51103516 -47.49235535 80.70800781 C-47.37651596 87.14857181 -46.86191996 92.1856278 -44 98 C-39.07211074 102.19394831 -34.56906849 102.68837734 -28.1796875 102.44140625 C-18.0472244 101.03481125 -8.20012624 95.20012624 -1 88 C-0.87483363 85.26194796 -0.81392327 82.54788281 -0.79467773 79.80834961 C-0.78477814 78.94988937 -0.77487854 78.09142914 -0.76467896 77.20695496 C-0.73296691 74.35544641 -0.70826836 71.50392118 -0.68359375 68.65234375 C-0.66303259 66.68078669 -0.64203635 64.70923412 -0.62062073 62.73768616 C-0.56531347 57.53778715 -0.5159425 52.3378478 -0.46777344 47.13787842 C-0.41762143 41.83602286 -0.36190256 36.5342262 -0.30664062 31.23242188 C-0.19895325 20.82166293 -0.09804608 10.41085421 0 0 Z " transform="translate(193,170)" style="fill: #4F980A;"/><path d="M0 0 C6.17090994 5.20954713 8.74246099 10.18357236 9.68994141 18.19775391 C10.07290072 23.37522498 10.16346855 28.564741 10.296875 33.75341797 C10.45326878 37.43355901 10.77431278 41.08446193 11.09375 44.75390625 C12.51153769 64.11321466 12.51153769 64.11321466 8.81298828 69.37255859 C3.78222552 73.8354667 -2.76794162 77.0625 -9.5625 77.0625 C-9.56796844 76.03678894 -9.56796844 76.03678894 -9.57354736 74.99035645 C-9.61546478 67.85195329 -9.68487596 60.71418754 -9.77001953 53.57617188 C-9.80037523 50.91458389 -9.81942114 48.2535998 -9.83349609 45.59179688 C-9.85498215 41.75868357 -9.90166563 37.92656398 -9.953125 34.09375 C-9.95435364 32.91010864 -9.95558228 31.72646729 -9.95684814 30.50695801 C-10.07870172 23.58233921 -10.80347291 18.93760458 -14.5625 13.0625 C-19.75665219 8.90717825 -26.22877464 9.37883486 -32.5625 10.0625 C-41.85301864 12.09720036 -49.87659296 17.37659296 -56.5625 24.0625 C-56.78018018 26.86199837 -56.87392652 29.56549727 -56.88134766 32.36767578 C-56.89139328 33.22628204 -56.9014389 34.08488831 -56.91178894 34.96951294 C-56.94275026 37.8156058 -56.95969189 40.66160406 -56.9765625 43.5078125 C-56.99526375 45.47794415 -57.01483636 47.4480677 -57.0352478 49.41818237 C-57.08668529 54.60983518 -57.1262487 59.80151399 -57.16339111 64.99328613 C-57.20335811 70.28855889 -57.25448368 75.5837224 -57.3046875 80.87890625 C-57.40158433 91.27336858 -57.48491405 101.66787557 -57.5625 112.0625 C-64.4925 112.0625 -71.4225 112.0625 -78.5625 112.0625 C-78.5625 73.4525 -78.5625 34.8425 -78.5625 -4.9375 C-68.4375 -4.9375 -68.4375 -4.9375 -64 -4.4375 C-61.8034375 -4.19 -61.8034375 -4.19 -59.5625 -3.9375 C-59.2325 -0.3075 -58.9025 3.3225 -58.5625 7.0625 C-57.88445312 6.61519531 -57.20640625 6.16789062 -56.5078125 5.70703125 C-39.00211665 -5.66439722 -19.20415486 -13.78851193 0 0 Z " transform="translate(134.5625,117.9375)" style="fill: #26B346;"/><path d="M0 0 C3.34699538 1.27754112 6.45190204 2.71552371 9.5703125 4.4765625 C10.89349487 5.22268799 10.89349487 5.22268799 12.2434082 5.98388672 C13.1943335 6.5254541 14.14525879 7.06702148 15.125 7.625 C16.13199951 8.19621582 17.13899902 8.76743164 18.17651367 9.35595703 C27.07885409 14.42878382 35.8930231 19.64600095 44.69506836 24.89038086 C53.88854921 30.36245557 63.13968459 35.72600245 72.42504883 41.04052734 C74.40440628 42.17579125 76.37761289 43.32187523 78.34326172 44.48071289 C80.93162593 46.00735157 80.93162593 46.00735157 83.45751953 47.15795898 C86.67435707 48.77571441 88.55948647 49.84425335 89.87182617 53.28735352 C91.03664976 59.85748883 91.67777526 68.95501885 87.84570312 74.74365234 C84.38870949 77.97907357 80.05500078 79.76703225 75.77783203 81.68554688 C70.84375759 84.02032072 66.1830968 86.84463164 61.4699707 89.59158325 C59.06990521 90.98306075 56.65643471 92.35034265 54.24282837 93.71815491 C46.93425244 97.86215345 39.69175768 102.11067741 32.47402954 106.41061401 C27.65400632 109.2815708 22.8272111 112.14115069 18 115 C16.67452148 115.78552246 16.67452148 115.78552246 15.32226562 116.58691406 C13.05475038 117.92386695 10.77965686 119.2463902 8.5 120.5625 C7.54818848 121.12698853 7.54818848 121.12698853 6.57714844 121.70288086 C4.84375 122.69140625 4.84375 122.69140625 2 124 C-2.20059624 122.59980125 -3.19051525 119.63174123 -5.1875 115.9375 C-5.55552734 115.27427734 -5.92355469 114.61105469 -6.30273438 113.92773438 C-7.21012062 112.28972543 -8.10615573 110.64543779 -9 109 C-5.15078128 104.74717388 -1.23840292 102.22131326 3.8125 99.5625 C5.43879937 98.68208347 7.06373055 97.79913633 8.6875 96.9140625 C9.98300781 96.20878418 9.98300781 96.20878418 11.3046875 95.48925781 C19.14796406 91.15556334 26.8382037 86.54533596 34.56542969 82.00927734 C37.67516142 80.19003565 40.79006514 78.38021857 43.90785217 76.57484436 C46.59478583 75.01828741 49.2792667 73.45752949 51.96347046 71.89627075 C53.27543727 71.13444366 54.58844192 70.37440098 55.90249634 69.61618042 C57.73863704 68.55624679 59.5708615 67.48983218 61.40234375 66.421875 C62.45929443 65.80924805 63.51624512 65.19662109 64.60522461 64.56542969 C67.09869419 63.2225852 67.09869419 63.2225852 68 61 C67.28279785 60.73010254 66.5655957 60.46020508 65.82666016 60.18212891 C62.99143436 58.99641779 60.43187242 57.62543615 57.7734375 56.0859375 C56.24601929 55.20373535 56.24601929 55.20373535 54.68774414 54.30371094 C53.59453857 53.66723633 52.50133301 53.03076172 51.375 52.375 C50.22070176 51.70591662 49.06632197 51.03697392 47.91186523 50.36816406 C38.46416027 44.88618345 29.06684964 39.31977925 19.67797852 33.73779297 C10.16199104 28.08266556 0.59653461 22.51713074 -9 17 C-7.51481201 12.95698825 -5.57122002 9.38853744 -3.375 5.6875 C-2.74335938 4.61886719 -2.11171875 3.55023438 -1.4609375 2.44921875 C-0.97882813 1.64097656 -0.49671875 0.83273438 0 0 Z " transform="translate(255,140)" style="fill: #E4E4E4;"/></svg>
diff --git a/frontend/src/lib/components/icons/OpenaiIcon.svelte b/frontend/src/lib/components/icons/OpenaiIcon.svelte
index d21d281c65..cd7d441b7d 100644
--- a/frontend/src/lib/components/icons/OpenaiIcon.svelte
+++ b/frontend/src/lib/components/icons/OpenaiIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/OracleDBIcon.svelte b/frontend/src/lib/components/icons/OracleDBIcon.svelte
index 86dc7ba47c..39d2611306 100644
--- a/frontend/src/lib/components/icons/OracleDBIcon.svelte
+++ b/frontend/src/lib/components/icons/OracleDBIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PHPIcon.svelte b/frontend/src/lib/components/icons/PHPIcon.svelte
index c95f04589e..1729042ec7 100644
--- a/frontend/src/lib/components/icons/PHPIcon.svelte
+++ b/frontend/src/lib/components/icons/PHPIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PaintbrushOff.svelte b/frontend/src/lib/components/icons/PaintbrushOff.svelte
index 3358c19e67..cad5f9a518 100644
--- a/frontend/src/lib/components/icons/PaintbrushOff.svelte
+++ b/frontend/src/lib/components/icons/PaintbrushOff.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let size = 24
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 24 }: Props = $props();
 </script>
 
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/PineconeIcon.svelte b/frontend/src/lib/components/icons/PineconeIcon.svelte
index 7cba578545..06010a30f6 100644
--- a/frontend/src/lib/components/icons/PineconeIcon.svelte
+++ b/frontend/src/lib/components/icons/PineconeIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PostgresIcon.svelte b/frontend/src/lib/components/icons/PostgresIcon.svelte
index c7d6fe3947..204306bf9c 100644
--- a/frontend/src/lib/components/icons/PostgresIcon.svelte
+++ b/frontend/src/lib/components/icons/PostgresIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PowershellIcon.svelte b/frontend/src/lib/components/icons/PowershellIcon.svelte
index 1ba5c0db6e..e687da2937 100644
--- a/frontend/src/lib/components/icons/PowershellIcon.svelte
+++ b/frontend/src/lib/components/icons/PowershellIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PushoverIcon.svelte b/frontend/src/lib/components/icons/PushoverIcon.svelte
index b80dbbcb48..8b3ebeb4e9 100644
--- a/frontend/src/lib/components/icons/PushoverIcon.svelte
+++ b/frontend/src/lib/components/icons/PushoverIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/QRCodeIcon.svelte b/frontend/src/lib/components/icons/QRCodeIcon.svelte
index 3a004f3c32..f7d2aacfd6 100644
--- a/frontend/src/lib/components/icons/QRCodeIcon.svelte
+++ b/frontend/src/lib/components/icons/QRCodeIcon.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { QrCode } from 'lucide-svelte'
 
-	export let height = 24
+	interface Props {
+		height?: number;
+	}
+
+	let { height = 24 }: Props = $props();
 </script>
 
 <QrCode size={height} />
diff --git a/frontend/src/lib/components/icons/QuickbooksIcon.svelte b/frontend/src/lib/components/icons/QuickbooksIcon.svelte
index 2561789c4e..aec9eebc79 100644
--- a/frontend/src/lib/components/icons/QuickbooksIcon.svelte
+++ b/frontend/src/lib/components/icons/QuickbooksIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg fill="#000000" {width} {height} viewBox="0 0 14 14" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="m 6.3574454,12.980221 c -2.771173,-0.3002 -4.964916,-2.4641 -5.322984,-5.2506004 -0.04147,-0.3227 -0.04147,-1.1292 0,-1.452 0.261842,-2.0377 1.477656,-3.7499 3.307903,-4.6586 1.451944,-0.72079999 3.206807,-0.81769999 4.720995,-0.2606 1.9314676,0.7107 3.3629446,2.3552 3.8109276,4.378 0.163139,0.7367 0.163139,1.7977 0,2.5344 -0.399836,1.8054004 -1.582178,3.3192004 -3.2161976,4.1176004 -0.581119,0.284 -1.052565,0.4358 -1.690295,0.5444 -0.37024,0.063 -1.232158,0.088 -1.610349,0.047 z m 0.369588,-5.4090004 0,-2.9699 -0.805174,-0.01 c -0.922695,-0.01 -1.197335,0.014 -1.551433,0.1317 -0.775997,0.2573 -1.348379,0.8733 -1.552945,1.6713 -0.08307,0.324 -0.09496,0.8089 -0.02734,1.1152 0.182766,0.8278 0.775652,1.4916 1.582187,1.7713 0.243147,0.084 0.302996,0.094 0.618963,0.1046 l 0.349789,0.011 0,-0.422 0,-0.4219 -0.270591,-0.013 c -0.430318,-0.021 -0.732893,-0.1548 -1.036493,-0.4592 -0.366949,-0.3679 -0.512167,-0.8966 -0.396379,-1.4431 0.09293,-0.4385 0.396426,-0.8211 0.805891,-1.016 0.301106,-0.1433 0.424681,-0.1643 0.964869,-0.1643 l 0.460686,0 0,2.5299 c 0,1.3914 0.0082,2.5381004 0.01824,2.5481004 0.01004,0.01 0.203079,0.015 0.428987,0.011 l 0.410742,-0.01 0,-2.9699004 z m 2.494721,1.7933 c 0.8233966,-0.1334 1.5424896,-0.69 1.8386366,-1.4232 0.13689,-0.3389 0.174945,-0.5432 0.177105,-0.9509 0.0017,-0.3194 -0.0079,-0.4196 -0.05792,-0.6054 -0.189917,-0.7053 -0.652274,-1.2639 -1.3011336,-1.5721 -0.315182,-0.1496 -0.524716,-0.2001 -0.901552,-0.2172 l -0.337261,-0.015 0.0073,0.4328 0.0073,0.4328 0.30359,0.016 c 0.326755,0.017 0.452859,0.052 0.670744,0.1857 0.32218,0.1975 0.5633516,0.483 0.6823896,0.8079 0.07677,0.2096 0.09504,0.6947 0.03513,0.9329 -0.107464,0.4274 -0.3888116,0.7767 -0.7827516,0.9719 -0.287054,0.1422 -0.52924,0.1854 -1.047698,0.1865 l -0.402587,0.001 0,-2.5476 0,-2.5475 -0.435586,0 -0.435586,0 0,2.9699 0,2.9699 0.904171,-2e-4 c 0.505853,0 0.979765,-0.012 1.075766,-0.028 z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/ReactIcon.svelte b/frontend/src/lib/components/icons/ReactIcon.svelte
index fc286af4e0..791235b5df 100644
--- a/frontend/src/lib/components/icons/ReactIcon.svelte
+++ b/frontend/src/lib/components/icons/ReactIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
diff --git a/frontend/src/lib/components/icons/RedditIcon.svelte b/frontend/src/lib/components/icons/RedditIcon.svelte
index e0a31d4566..e5b65d7fc7 100644
--- a/frontend/src/lib/components/icons/RedditIcon.svelte
+++ b/frontend/src/lib/components/icons/RedditIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/ResendIcon.svelte b/frontend/src/lib/components/icons/ResendIcon.svelte
index 18d061f8a6..28e51bc152 100644
--- a/frontend/src/lib/components/icons/ResendIcon.svelte
+++ b/frontend/src/lib/components/icons/ResendIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/RestIcon.svelte b/frontend/src/lib/components/icons/RestIcon.svelte
index bf91087e6b..eb0833ed0e 100644
--- a/frontend/src/lib/components/icons/RestIcon.svelte
+++ b/frontend/src/lib/components/icons/RestIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/RssIcon.svelte b/frontend/src/lib/components/icons/RssIcon.svelte
index 74083f5ed5..4c340a7adc 100644
--- a/frontend/src/lib/components/icons/RssIcon.svelte
+++ b/frontend/src/lib/components/icons/RssIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/RustIcon.svelte b/frontend/src/lib/components/icons/RustIcon.svelte
index 36b3ed30c1..364dece5be 100644
--- a/frontend/src/lib/components/icons/RustIcon.svelte
+++ b/frontend/src/lib/components/icons/RustIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+  interface Props {
+    height?: string;
+    width?: string;
+  }
+
+  let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/S3Icon.svelte b/frontend/src/lib/components/icons/S3Icon.svelte
index aa79085d5e..e4eda669c2 100644
--- a/frontend/src/lib/components/icons/S3Icon.svelte
+++ b/frontend/src/lib/components/icons/S3Icon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/SchedulePollIcon.svelte b/frontend/src/lib/components/icons/SchedulePollIcon.svelte
index df8f258106..90fd9eca1f 100644
--- a/frontend/src/lib/components/icons/SchedulePollIcon.svelte
+++ b/frontend/src/lib/components/icons/SchedulePollIcon.svelte
@@ -1,6 +1,11 @@
-<script>
-	// You can pass props for flexibility (e.g., size, color)
-	export let size = 24
+<script lang="ts">
+	
+	interface Props {
+		// You can pass props for flexibility (e.g., size, color)
+		size?: number;
+	}
+
+	let { size = 24 }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/SendflakeIcon.svelte b/frontend/src/lib/components/icons/SendflakeIcon.svelte
index 9376d77391..3dfbe4a81b 100644
--- a/frontend/src/lib/components/icons/SendflakeIcon.svelte
+++ b/frontend/src/lib/components/icons/SendflakeIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/SendgridIcon.svelte b/frontend/src/lib/components/icons/SendgridIcon.svelte
index 4ee7ff749b..e493c42357 100644
--- a/frontend/src/lib/components/icons/SendgridIcon.svelte
+++ b/frontend/src/lib/components/icons/SendgridIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/ShopifyIcon.svelte b/frontend/src/lib/components/icons/ShopifyIcon.svelte
index f6ba949118..5711eb348a 100644
--- a/frontend/src/lib/components/icons/ShopifyIcon.svelte
+++ b/frontend/src/lib/components/icons/ShopifyIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/Slack.svelte b/frontend/src/lib/components/icons/Slack.svelte
index a95b974693..2db4d1871f 100644
--- a/frontend/src/lib/components/icons/Slack.svelte
+++ b/frontend/src/lib/components/icons/Slack.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
diff --git a/frontend/src/lib/components/icons/SnowflakeIcon.svelte b/frontend/src/lib/components/icons/SnowflakeIcon.svelte
index 85ddd68057..585292d545 100644
--- a/frontend/src/lib/components/icons/SnowflakeIcon.svelte
+++ b/frontend/src/lib/components/icons/SnowflakeIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.36 139.16" {width} {height} style="fill: currentcolor;"
diff --git a/frontend/src/lib/components/icons/SparklesOffIcon.svelte b/frontend/src/lib/components/icons/SparklesOffIcon.svelte
index 0346e820fc..b32040b720 100644
--- a/frontend/src/lib/components/icons/SparklesOffIcon.svelte
+++ b/frontend/src/lib/components/icons/SparklesOffIcon.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
-	export let size = '24'
+	interface Props {
+		size?: string
+		class?: string
+	}
+
+	let { size = '24', class: classNames = '' }: Props = $props()
 </script>
 
 <svg
 	width={size}
 	height={size}
-	class={$$props.class}
+	class={classNames}
 	viewBox="0 0 24 24"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/icons/SpotifyIcon.svelte b/frontend/src/lib/components/icons/SpotifyIcon.svelte
index ce0da3d0d0..25b851f4d5 100644
--- a/frontend/src/lib/components/icons/SpotifyIcon.svelte
+++ b/frontend/src/lib/components/icons/SpotifyIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
diff --git a/frontend/src/lib/components/icons/SquareIcon.svelte b/frontend/src/lib/components/icons/SquareIcon.svelte
index 1df73a388b..2720650c74 100644
--- a/frontend/src/lib/components/icons/SquareIcon.svelte
+++ b/frontend/src/lib/components/icons/SquareIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 30 30" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/StripeIcon.svelte b/frontend/src/lib/components/icons/StripeIcon.svelte
index db3f6ae34b..a06e39c1c9 100644
--- a/frontend/src/lib/components/icons/StripeIcon.svelte
+++ b/frontend/src/lib/components/icons/StripeIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 48 48" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/SupabaseIcon.svelte b/frontend/src/lib/components/icons/SupabaseIcon.svelte
index 0299482fcf..5e2bed8b61 100644
--- a/frontend/src/lib/components/icons/SupabaseIcon.svelte
+++ b/frontend/src/lib/components/icons/SupabaseIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/SurrealdbIcon.svelte b/frontend/src/lib/components/icons/SurrealdbIcon.svelte
index 8a12c6ec32..c882c7ba53 100644
--- a/frontend/src/lib/components/icons/SurrealdbIcon.svelte
+++ b/frontend/src/lib/components/icons/SurrealdbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/SvelteIcon.svelte b/frontend/src/lib/components/icons/SvelteIcon.svelte
index 6f6dfcc528..c0de67a482 100644
--- a/frontend/src/lib/components/icons/SvelteIcon.svelte
+++ b/frontend/src/lib/components/icons/SvelteIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
diff --git a/frontend/src/lib/components/icons/TelegramIcon.svelte b/frontend/src/lib/components/icons/TelegramIcon.svelte
index 6d06b2bccd..eaa6118e55 100644
--- a/frontend/src/lib/components/icons/TelegramIcon.svelte
+++ b/frontend/src/lib/components/icons/TelegramIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 50 50" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/TogglIcon.svelte b/frontend/src/lib/components/icons/TogglIcon.svelte
index 3b4a1a74a5..f621ae5c38 100644
--- a/frontend/src/lib/components/icons/TogglIcon.svelte
+++ b/frontend/src/lib/components/icons/TogglIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/TrelloIcon.svelte b/frontend/src/lib/components/icons/TrelloIcon.svelte
index b0817ce8f8..c93ecc1b70 100644
--- a/frontend/src/lib/components/icons/TrelloIcon.svelte
+++ b/frontend/src/lib/components/icons/TrelloIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#0091E6" offset="0%"/><stop stop-color="#0079BF" offset="100%"/></linearGradient></defs><rect fill="url(#a)" width="256" height="256" rx="25"/><rect fill="#FFF" x="144.64" y="33.28" width="78.08" height="112" rx="12"/><rect fill="#FFF" x="33.28" y="33.28" width="78.08" height="176" rx="12"/></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/TwilioIcon.svelte b/frontend/src/lib/components/icons/TwilioIcon.svelte
index 1e56b9c95e..88a9ff9613 100644
--- a/frontend/src/lib/components/icons/TwilioIcon.svelte
+++ b/frontend/src/lib/components/icons/TwilioIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/TypeformIcon.svelte b/frontend/src/lib/components/icons/TypeformIcon.svelte
index 0e3ad844f5..c9f0101c0b 100644
--- a/frontend/src/lib/components/icons/TypeformIcon.svelte
+++ b/frontend/src/lib/components/icons/TypeformIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/VismaIcon.svelte b/frontend/src/lib/components/icons/VismaIcon.svelte
index b735426965..467d69e196 100644
--- a/frontend/src/lib/components/icons/VismaIcon.svelte
+++ b/frontend/src/lib/components/icons/VismaIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 36 25" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/VueIcon.svelte b/frontend/src/lib/components/icons/VueIcon.svelte
index a04b3dd918..30856c5144 100644
--- a/frontend/src/lib/components/icons/VueIcon.svelte
+++ b/frontend/src/lib/components/icons/VueIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
diff --git a/frontend/src/lib/components/icons/WebdavIcon.svelte b/frontend/src/lib/components/icons/WebdavIcon.svelte
index 31a1213ac6..b2175f8c01 100644
--- a/frontend/src/lib/components/icons/WebdavIcon.svelte
+++ b/frontend/src/lib/components/icons/WebdavIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/WindmillAiIcon.svelte b/frontend/src/lib/components/icons/WindmillAiIcon.svelte
new file mode 100644
index 0000000000..e0a8da724c
--- /dev/null
+++ b/frontend/src/lib/components/icons/WindmillAiIcon.svelte
@@ -0,0 +1,38 @@
+<script>
+	import DarkModeObserver from '../DarkModeObserver.svelte'
+
+	let { size = 24, forceDarkMode = false, className } = $props()
+	let darkMode = $state(false)
+</script>
+
+<DarkModeObserver bind:darkMode />
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 65 65"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class={className}
+>
+	<g transform="translate(0, 4.5)">
+		<path
+			d="M40.625 14L56.875 14L65 28L48.75 28L56.875 42L48.75 56L40.625 42L32.5 56L16.25 56L24.375 42L8.12502 41.9999L0 28L16.25 28L8.12499 14L16.25 1.54244e-05L24.375 14L32.5 7.2001e-05L48.75 0L40.625 14Z"
+			fill={darkMode || forceDarkMode ? '#8556D0' : '#E2DBFF'}
+		/>
+		<path
+			d="M28.6964 33.2749C28.5536 32.7039 28.265 32.1828 27.8606 31.7658C27.4563 31.3488 26.951 31.0512 26.3973 30.9039L16.5815 28.2936C16.4141 28.2446 16.2667 28.1406 16.1617 27.9974C16.0568 27.8541 16 27.6795 16 27.5C16 27.3205 16.0568 27.1459 16.1617 27.0026C16.2667 26.8594 16.4141 26.7554 16.5815 26.7064L26.3973 24.0945C26.9508 23.9473 27.456 23.6499 27.8603 23.2333C28.2646 22.8166 28.5533 22.2958 28.6964 21.7251L31.2276 11.6026C31.2746 11.4293 31.3754 11.2765 31.5145 11.1677C31.6536 11.0589 31.8234 11 31.9979 11C32.1725 11 32.3423 11.0589 32.4814 11.1677C32.6205 11.2765 32.7213 11.4293 32.7683 11.6026L35.2979 21.7251C35.4407 22.2961 35.7293 22.8172 36.1336 23.2342C36.538 23.6512 37.0433 23.9488 37.597 24.0961L47.4127 26.7047C47.5815 26.7527 47.7304 26.8565 47.8365 27.0002C47.9426 27.1438 48 27.3194 48 27.5C48 27.6806 47.9426 27.8562 47.8365 27.9998C47.7304 28.1435 47.5815 28.2473 47.4127 28.2953L37.597 30.9039C37.0433 31.0512 36.538 31.3488 36.1336 31.7658C35.7293 32.1828 35.4407 32.7039 35.2979 33.2749L32.7667 43.3974C32.7197 43.5707 32.6189 43.7235 32.4798 43.8323C32.3407 43.9411 32.1709 44 31.9963 44C31.8218 44 31.652 43.9411 31.5129 43.8323C31.3738 43.7235 31.273 43.5707 31.226 43.3974L28.6964 33.2749Z"
+			fill="white"
+			stroke={darkMode || forceDarkMode ? '#E2DBFF' : '#A76FFF'}
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M19.9676 42.75C19.923 42.5769 19.8328 42.419 19.7064 42.2927C19.5801 42.1663 19.4222 42.0761 19.2492 42.0315L16.1817 41.2405C16.1294 41.2256 16.0833 41.1941 16.0505 41.1507C16.0177 41.1073 16 41.0544 16 41C16 40.9456 16.0177 40.8927 16.0505 40.8493C16.0833 40.8059 16.1294 40.7744 16.1817 40.7595L19.2492 39.968C19.4221 39.9234 19.58 39.8333 19.7063 39.7071C19.8327 39.5808 19.9229 39.423 19.9676 39.25L20.7586 36.1826C20.7733 36.1301 20.8048 36.0838 20.8483 36.0508C20.8917 36.0178 20.9448 36 20.9994 36C21.0539 36 21.107 36.0178 21.1504 36.0508C21.1939 36.0838 21.2254 36.1301 21.2401 36.1826L22.0306 39.25C22.0752 39.4231 22.1654 39.581 22.2918 39.7073C22.4181 39.8337 22.576 39.9239 22.7491 39.9685L25.8165 40.759C25.8692 40.7736 25.9157 40.805 25.9489 40.8485C25.982 40.8921 26 40.9453 26 41C26 41.0547 25.982 41.1079 25.9489 41.1515C25.9157 41.195 25.8692 41.2264 25.8165 41.241L22.7491 42.0315C22.576 42.0761 22.4181 42.1663 22.2918 42.2927C22.1654 42.419 22.0752 42.5769 22.0306 42.75L21.2396 45.8174C21.2249 45.8699 21.1934 45.9162 21.1499 45.9492C21.1065 45.9822 21.0534 46 20.9989 46C20.9443 46 20.8912 45.9822 20.8478 45.9492C20.8043 45.9162 20.7728 45.8699 20.7581 45.8174L19.9676 42.75Z"
+			fill="white"
+			stroke={darkMode || forceDarkMode ? '#E2DBFF' : '#A76FFF'}
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</g>
+</svg>
diff --git a/frontend/src/lib/components/icons/WindmillIcon.svelte b/frontend/src/lib/components/icons/WindmillIcon.svelte
index 2aef2fd20b..500691faab 100644
--- a/frontend/src/lib/components/icons/WindmillIcon.svelte
+++ b/frontend/src/lib/components/icons/WindmillIcon.svelte
@@ -1,27 +1,32 @@
 <script lang="ts">
 	import { customIcon } from './store'
 
-	export let height = '24px'
-	export let width = '24px'
-	export let white = false
-	export let spin: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined = undefined
+	interface Props {
+		height?: string
+		width?: string
+		white?: boolean
+		spin?: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined
+		class?: string
+	}
+
+	let {
+		height = '24px',
+		width = '24px',
+		white = false,
+		spin = undefined,
+		class: classNames = ''
+	}: Props = $props()
 </script>
 
 {#if customIcon.white || customIcon.normal}
 	{#if white}
-		<img src={customIcon.white} alt="Windmill Custom icon" {width} {height} class={$$props.class} />
+		<img src={customIcon.white} alt="Windmill Custom icon" {width} {height} class={classNames} />
 	{:else}
-		<img
-			src={customIcon.normal}
-			alt="Windmill Custom icon"
-			{width}
-			{height}
-			class={$$props.class}
-		/>
+		<img src={customIcon.normal} alt="Windmill Custom icon" {width} {height} class={classNames} />
 	{/if}
 {:else}
 	<svg
-		class={$$props.class}
+		class={classNames}
 		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
 		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
 		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
diff --git a/frontend/src/lib/components/icons/WindmillIcon2.svelte b/frontend/src/lib/components/icons/WindmillIcon2.svelte
index e274fbded0..ef4b525998 100644
--- a/frontend/src/lib/components/icons/WindmillIcon2.svelte
+++ b/frontend/src/lib/components/icons/WindmillIcon2.svelte
@@ -1,10 +1,24 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { customIcon } from './store'
 
-	export let white = false
-	export let size = '24px'
-	export let color: string | undefined = undefined
-	export let spin: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined = undefined
+	interface Props {
+		white?: boolean
+		size?: string
+		color?: string | undefined
+		spin?: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined
+		class?: string
+	}
+
+	let {
+		white = false,
+		size = '24px',
+		color = undefined,
+		spin = undefined,
+		class: classNames = ''
+	}: Props = $props()
 
 	function hslToHex(h, s, l) {
 		s /= 100
@@ -102,9 +116,11 @@
 		return hslToHex(h, s, l)
 	}
 
-	let lessSaturatedColor: string | undefined
+	let lessSaturatedColor: string | undefined = $state()
 
-	$: color ? (lessSaturatedColor = reduceSaturation(color, -16)) : (lessSaturatedColor = undefined)
+	run(() => {
+		color ? (lessSaturatedColor = reduceSaturation(color, -16)) : (lessSaturatedColor = undefined)
+	})
 </script>
 
 {#if customIcon.white || customIcon.normal}
@@ -114,7 +130,7 @@
 			alt="Windmill Custom icon"
 			width={size}
 			height={size}
-			class={$$props.class}
+			class={classNames}
 		/>
 	{:else}
 		<img
@@ -122,12 +138,12 @@
 			alt="Windmill Custom icon"
 			width={size}
 			height={size}
-			class={$$props.class}
+			class={classNames}
 		/>
 	{/if}
 {:else}
 	<svg
-		class={$$props.class}
+		class={classNames}
 		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
 		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
 		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
diff --git a/frontend/src/lib/components/icons/XeroIcon.svelte b/frontend/src/lib/components/icons/XeroIcon.svelte
index 4f2427702a..6fe5784ef5 100644
--- a/frontend/src/lib/components/icons/XeroIcon.svelte
+++ b/frontend/src/lib/components/icons/XeroIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/ZammadIcon.svelte b/frontend/src/lib/components/icons/ZammadIcon.svelte
index 2e1b06eba0..de1c744579 100644
--- a/frontend/src/lib/components/icons/ZammadIcon.svelte
+++ b/frontend/src/lib/components/icons/ZammadIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/ZendeskIcon.svelte b/frontend/src/lib/components/icons/ZendeskIcon.svelte
index 59603738ee..c52b7295f2 100644
--- a/frontend/src/lib/components/icons/ZendeskIcon.svelte
+++ b/frontend/src/lib/components/icons/ZendeskIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 -30.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/ZitadelIcon.svelte b/frontend/src/lib/components/icons/ZitadelIcon.svelte
index 456d456c5f..4548180b9b 100644
--- a/frontend/src/lib/components/icons/ZitadelIcon.svelte
+++ b/frontend/src/lib/components/icons/ZitadelIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 467 467" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
diff --git a/frontend/src/lib/components/icons/brands/Auth0.svelte b/frontend/src/lib/components/icons/brands/Auth0.svelte
index 43e0a89880..8d6696411c 100644
--- a/frontend/src/lib/components/icons/brands/Auth0.svelte
+++ b/frontend/src/lib/components/icons/brands/Auth0.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Discord.svelte b/frontend/src/lib/components/icons/brands/Discord.svelte
index 9321bf89f9..ed752fd727 100644
--- a/frontend/src/lib/components/icons/brands/Discord.svelte
+++ b/frontend/src/lib/components/icons/brands/Discord.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Github.svelte b/frontend/src/lib/components/icons/brands/Github.svelte
index 11d9833e0c..b5490236f2 100644
--- a/frontend/src/lib/components/icons/brands/Github.svelte
+++ b/frontend/src/lib/components/icons/brands/Github.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Gitlab.svelte b/frontend/src/lib/components/icons/brands/Gitlab.svelte
index 27f2966a2f..7cd164c65d 100644
--- a/frontend/src/lib/components/icons/brands/Gitlab.svelte
+++ b/frontend/src/lib/components/icons/brands/Gitlab.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Google.svelte b/frontend/src/lib/components/icons/brands/Google.svelte
index d348cfa47a..35718b9f53 100644
--- a/frontend/src/lib/components/icons/brands/Google.svelte
+++ b/frontend/src/lib/components/icons/brands/Google.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Microsoft.svelte b/frontend/src/lib/components/icons/brands/Microsoft.svelte
index 3a49e5e91a..ce7caf236d 100644
--- a/frontend/src/lib/components/icons/brands/Microsoft.svelte
+++ b/frontend/src/lib/components/icons/brands/Microsoft.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Okta.svelte b/frontend/src/lib/components/icons/brands/Okta.svelte
index e433dd3763..4dacdb51fe 100644
--- a/frontend/src/lib/components/icons/brands/Okta.svelte
+++ b/frontend/src/lib/components/icons/brands/Okta.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/instanceSettings.ts b/frontend/src/lib/components/instanceSettings.ts
index b18c991b71..cc18716488 100644
--- a/frontend/src/lib/components/instanceSettings.ts
+++ b/frontend/src/lib/components/instanceSettings.ts
@@ -39,6 +39,7 @@ export interface Setting {
 		checked: (values: Record<string, any>) => boolean
 	}
 	hiddenIfNull?: boolean
+	hiddenIfEmpty?: boolean
 	requiresReloadOnChange?: boolean
 	isValid?: (value: any) => boolean
 	error?: string
@@ -83,9 +84,9 @@ export const settings: Record<string, Setting[]> = {
 			isValid: (value: string | undefined) =>
 				value
 					? value?.startsWith('http') &&
-					  value.includes('://') &&
-					  !value?.endsWith('/') &&
-					  !value?.endsWith(' ')
+						value.includes('://') &&
+						!value?.endsWith('/') &&
+						!value?.endsWith(' ')
 					: false
 		},
 		{
@@ -188,7 +189,8 @@ export const settings: Record<string, Setting[]> = {
 			key: 'openai_azure_base_path',
 			fieldType: 'text',
 			storage: 'setting',
-			ee_only: ''
+			ee_only: '',
+			hiddenIfEmpty: true
 		},
 		{
 			label: 'Private Hub base url',
@@ -321,7 +323,7 @@ export const settings: Record<string, Setting[]> = {
 			fieldType: 'boolean',
 			storage: 'setting',
 			ee_only: ''
-		},
+		}
 	],
 	Alerts: [
 		{
diff --git a/frontend/src/lib/components/jobs/utils.ts b/frontend/src/lib/components/jobs/utils.ts
index 018726bdef..294df7c3ff 100644
--- a/frontend/src/lib/components/jobs/utils.ts
+++ b/frontend/src/lib/components/jobs/utils.ts
@@ -1,18 +1,57 @@
-import { JobService, type RunScriptPreviewData } from '$lib/gen'
+import { JobService, type RunScriptByPathData, type RunScriptPreviewData } from '$lib/gen'
 
-export async function runPreviewJobAndPollResult(
-	data: RunScriptPreviewData,
-	{ maxRetries = 7, withJobData }: { maxRetries?: number; withJobData?: boolean } = {}
+function isRunScriptByPathData(
+	arg: RunScriptPreviewData | RunScriptByPathData
+): arg is RunScriptByPathData {
+	return (arg as RunScriptByPathData).path !== undefined
+}
+
+type RunScriptOptions = {
+	maxRetries?: number
+	withJobData?: boolean
+}
+
+/**
+ * @function runScript
+ * @param {RunScriptPreviewData | RunScriptByPathData} data - Data for running the script.
+ * @returns {Promise<string>} A UUID representing the running script.
+ * 
+ * @example
+ * const uuid = await runScript(data)
+ */
+export async function runScript(data: RunScriptPreviewData | RunScriptByPathData) {
+	const uuid = (
+		isRunScriptByPathData(data)
+			? await JobService.runScriptByPath(data)
+			: await JobService.runScriptPreview(data)
+	) as string
+
+	return uuid
+}
+
+/**
+ * @function pollJobResult
+ * @description Polls a job result by UUID until success, failure, or max retries reached.
+ * @param {string} uuid - Job UUID.
+ * @param {string} workspace - Workspace identifier.
+ * @param {RunScriptOptions} [options] - Optional settings like retries and job data inclusion.
+ * @returns {Promise<unknown>} Final job result or throws error if it fails.
+ * 
+ * @example
+ * const result = await pollJobResult(uuid, 'my-workspace', { maxRetries: 5, withJobData: true });
+ */
+export async function pollJobResult(
+	uuid: string,
+	workspace: string,
+	{ maxRetries = 7, withJobData }: RunScriptOptions = {}
 ): Promise<unknown> {
-	const uuid = await JobService.runScriptPreview(data)
-
 	let attempts = 0
 	while (attempts < maxRetries) {
 		try {
 			await new Promise((resolve) => setTimeout(resolve, 500 * (attempts || 0.75)))
 			const job = await JobService.getCompletedJobResultMaybe({
 				id: uuid,
-				workspace: data.workspace
+				workspace
 			})
 			if (job.success) {
 				if (withJobData) {
@@ -37,3 +76,12 @@ export async function runPreviewJobAndPollResult(
 
 	throw 'Could not get job result, should not get here'
 }
+
+export async function runScriptAndPollResult(
+	data: RunScriptPreviewData | RunScriptByPathData,
+	runScriptOptions?: RunScriptOptions
+): Promise<unknown> {
+	const uuid = await runScript(data)
+
+	return await pollJobResult(uuid, data.workspace, runScriptOptions)
+}
diff --git a/frontend/src/lib/components/meltComponents/MeltButton.svelte b/frontend/src/lib/components/meltComponents/MeltButton.svelte
index 5d4eeecccc..631482a856 100644
--- a/frontend/src/lib/components/meltComponents/MeltButton.svelte
+++ b/frontend/src/lib/components/meltComponents/MeltButton.svelte
@@ -1,21 +1,35 @@
 <script lang="ts">
 	import { type AnyMeltElement } from '@melt-ui/svelte'
 	import { conditionalMelt } from '$lib/utils'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
 
+	export let aiId: string | undefined = undefined
+	export let aiDescription: string | undefined = undefined
 	export let meltElement: AnyMeltElement | undefined = undefined
 	export let type: 'button' | 'submit' | 'reset' | null | undefined = undefined
 	export let title: string = ''
 	export let id: string | undefined = undefined
+
+	let buttonRef: HTMLButtonElement | undefined = undefined
 </script>
 
-<button
-	use:conditionalMelt={meltElement}
-	class={$$props.class}
-	{type}
-	{title}
-	{id}
-	{...$meltElement}
-	on:click
+<TriggerableByAI
+	id={aiId}
+	description={aiDescription}
+	onTrigger={() => {
+		buttonRef?.click()
+	}}
 >
-	<slot />
-</button>
+	<button
+		bind:this={buttonRef}
+		use:conditionalMelt={meltElement}
+		class={$$props.class}
+		{type}
+		{title}
+		{id}
+		{...$meltElement}
+		on:click
+	>
+		<slot />
+	</button>
+</TriggerableByAI>
diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte
index 75ea762d26..47f79262e5 100644
--- a/frontend/src/lib/components/meltComponents/Menu.svelte
+++ b/frontend/src/lib/components/meltComponents/Menu.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { melt, createSync } from '@melt-ui/svelte'
 	import type { MenubarBuilders } from '@melt-ui/svelte'
 	import type { Placement } from '@floating-ui/core'
@@ -7,17 +10,40 @@
 	import { twMerge } from 'tailwind-merge'
 	import ResolveOpen from '$lib/components/common/menu/ResolveOpen.svelte'
 
-	export let placement: Placement = 'right-start'
-	export let justifyEnd: boolean = false
-	export let lightMode: boolean = false
-	export let maxHeight: number = 900
-	export let disabled = false
-	export let createMenu: MenubarBuilders['createMenu']
-	export let invisible: boolean = false
-	export let usePointerDownOutside: boolean = false
-	export let menuClass: string = ''
-	export let open = false
-	export let renderContent: boolean = false
+	interface Props {
+		placement?: Placement
+		justifyEnd?: boolean
+		lightMode?: boolean
+		maxHeight?: number
+		disabled?: boolean
+		createMenu: MenubarBuilders['createMenu']
+		invisible?: boolean
+		usePointerDownOutside?: boolean
+		menuClass?: string
+		open?: boolean
+		renderContent?: boolean
+		classNames?: string
+		triggr?: import('svelte').Snippet<[any]>
+		children?: import('svelte').Snippet<[any]>
+		class?: string
+	}
+
+	let {
+		placement = 'right-start',
+		justifyEnd = false,
+		lightMode = false,
+		maxHeight = 900,
+		disabled = false,
+		createMenu,
+		invisible = false,
+		usePointerDownOutside = false,
+		menuClass = '',
+		open = $bindable(false),
+		renderContent = false,
+		class: classNames = '',
+		triggr,
+		children
+	}: Props = $props()
 
 	// Use the passed createMenu function
 	const menu = createMenu({
@@ -36,7 +62,9 @@
 	} = menu
 
 	const sync = createSync(states)
-	$: sync.open(open, (v) => (open = Boolean(v)))
+	$effect(() => {
+		sync.open(open, (v) => (open = Boolean(v)))
+	})
 
 	export function close() {
 		open = false
@@ -47,7 +75,7 @@
 	}
 </script>
 
-<div class={twMerge('w-full h-8', $$props.class)}>
+<div class={twMerge('w-full h-8', classNames)}>
 	<ResolveOpen {open} on:open on:close />
 
 	<button
@@ -57,19 +85,19 @@
 			capture: true,
 			stopPropagation: false,
 			exclude: getMenuElements,
-			customEventName: 'pointerdown_menu'
-		}}
-		on:pointerdown_outside={() => {
-			if (usePointerDownOutside) {
-				close()
+			customEventName: 'pointerdown_menu',
+			onClickOutside: () => {
+				if (usePointerDownOutside) {
+					close()
+				}
 			}
 		}}
 		data-menu
 	>
-		<slot name="trigger" {trigger} />
+		{@render triggr?.({ trigger })}
 	</button>
 
-	<!--svelte-ignore a11y-no-static-element-interactions-->
+	<!--svelte-ignore a11y_no_static_element_interactions-->
 	{#if open || renderContent}
 		<div
 			use:melt={$menuElement}
@@ -80,10 +108,10 @@
 				invisible ? 'opacity-0' : '',
 				menuClass
 			)}
-			on:click
+			onclick={bubble('click')}
 		>
 			<div class="py-1" style="max-height: {maxHeight}px; ">
-				<slot {item} {open} />
+				{@render children?.({ item, open })}
 			</div>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/meltComponents/MenuItem.svelte b/frontend/src/lib/components/meltComponents/MenuItem.svelte
index 2edcd755ae..a383181828 100644
--- a/frontend/src/lib/components/meltComponents/MenuItem.svelte
+++ b/frontend/src/lib/components/meltComponents/MenuItem.svelte
@@ -1,37 +1,57 @@
 <script lang="ts">
 	import { melt } from '@melt-ui/svelte'
 	import type { MenubarMenuElements } from '@melt-ui/svelte'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
 
+	export let aiId: string | undefined = undefined
+	export let aiDescription: string | undefined = undefined
 	export let href: string | undefined = undefined
 	export let disabled: boolean = false
 	export let target: string | undefined = undefined
 	export let item: MenubarMenuElements['item']
+
+	let aRef: HTMLAnchorElement | undefined = undefined
+	let buttonRef: HTMLButtonElement | undefined = undefined
 </script>
 
-{#if href}
-	<a
-		use:melt={$item}
-		{href}
-		class={$$props.class}
-		role="menuitem"
-		aria-disabled={disabled}
-		tabindex={disabled ? -1 : undefined}
-		{target}
-		on:m-focusin
-		on:m-focusout
-	>
-		<slot />
-	</a>
-{:else}
-	<button
-		on:click
-		use:melt={$item}
-		{disabled}
-		class={$$props.class}
-		role="menuitem"
-		on:m-focusin
-		on:m-focusout
-	>
-		<slot />
-	</button>
-{/if}
+<TriggerableByAI
+	id={aiId}
+	description={aiDescription}
+	onTrigger={() => {
+		if (href) {
+			aRef?.click()
+		} else {
+			buttonRef?.click()
+		}
+	}}
+>
+	{#if href}
+		<a
+			bind:this={aRef}
+			use:melt={$item}
+			{href}
+			class={$$props.class}
+			role="menuitem"
+			aria-disabled={disabled}
+			tabindex={disabled ? -1 : undefined}
+			{target}
+			on:m-focusin
+			on:m-focusout
+		>
+			<slot />
+		</a>
+	{:else}
+		<button
+			bind:this={buttonRef}
+			on:click
+			use:melt={$item}
+			{disabled}
+			class={$$props.class}
+			role="menuitem"
+			on:m-focusin
+			on:m-focusout
+		>
+			<slot />
+		</button>
+	{/if}
+</TriggerableByAI>
diff --git a/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte b/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte
index 62edd4a868..65ec922bfb 100644
--- a/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte
+++ b/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { melt, type MenubarBuilders } from '@melt-ui/svelte'
 
-	export let createMenu: MenubarBuilders['createMenu']
+	interface Props {
+		createMenu: MenubarBuilders['createMenu']
+		triggr?: import('svelte').Snippet<[any]>
+		children?: import('svelte').Snippet<[any]>
+	}
+
+	let { createMenu, triggr, children }: Props = $props()
 
 	const menu = createMenu()
 
@@ -11,8 +17,8 @@
 </script>
 
 <div class="hover:z-50 flex w-full h-8">
-	<slot name="trigger" {trigger} />
+	{@render triggr?.({ trigger })}
 	<div use:melt={$menuElement}>
-		<slot {item} />
+		{@render children?.({ item })}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/meltComponents/SideBarTab.svelte b/frontend/src/lib/components/meltComponents/SideBarTab.svelte
index c269b4579f..63978d257b 100644
--- a/frontend/src/lib/components/meltComponents/SideBarTab.svelte
+++ b/frontend/src/lib/components/meltComponents/SideBarTab.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 
-	export let dropdownItems: Array<{
-		label: string
-		onClick: () => void
-		icon?: any
-		selected?: boolean
-	}> = []
+	interface Props {
+		dropdownItems?: Array<{
+			label: string
+			onClick: () => void
+			icon?: any
+			selected?: boolean
+		}>
+		fullMenu?: boolean
+		noTrigger?: boolean
+		close_button?: import('svelte').Snippet
+	}
 
-	export let fullMenu: boolean = false
-	export let noTrigger: boolean = false
-	export const expandRight: boolean = false
+	let { dropdownItems = [], fullMenu = false, noTrigger = false, close_button }: Props = $props()
 
-	let open = false
+	let open = $state(false)
 	let timeout: NodeJS.Timeout | null = null
 
 	function handleMouseEnter() {
@@ -30,17 +33,17 @@
 		open = false
 	}
 
-	let hasCloseButton = $$slots['close button']
+	let hasCloseButton = close_button
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex flex-col relative !overflow-visible w-[33px]"
-	on:mouseenter={handleMouseEnter}
-	on:mouseleave={handleMouseLeave}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
 >
 	{#if hasCloseButton}
-		<slot name="close button" />
+		{@render close_button?.()}
 	{:else}
 		<div class="w-[31px]"></div>
 	{/if}
@@ -60,14 +63,14 @@
 					class="hover:bg-surface-hover p-2 transition-colors duration-0 w-full {item.selected
 						? 'bg-surface-selected'
 						: 'text-secondary'}"
-					on:click={() => {
+					onclick={() => {
 						item.onClick()
 						open = false
 					}}
 				>
 					<div class="flex flex-row items-center gap-2 min-h-[20px]">
 						{#if item.icon}
-							<svelte:component this={item.icon} size={14} />
+							<item.icon size={14} />
 						{/if}
 
 						{#if open}
diff --git a/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte b/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
index 3457c0c766..b42b205da7 100644
--- a/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
+++ b/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
@@ -23,7 +23,9 @@
 		allowUserOptions?: boolean | 'append'
 	}>()
 
-	$effect.pre(() => {  if (value === undefined) value = []  })
+	$effect.pre(() => {
+		if (value === undefined) value = []
+	})
 
 	const [floatingRef, floatingContent] = createFloatingActions({
 		strategy: 'absolute',
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index 97d541a673..17a158c2ba 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -3,7 +3,7 @@
 
 	import { copyToClipboard, truncate } from '$lib/utils'
 
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { computeKey, keepByKeyOrValue } from './utils'
 	import { NEVER_TESTED_THIS_FAR } from '../flows/models'
 	import Portal from '$lib/components/Portal.svelte'
@@ -117,7 +117,7 @@
 		jsonFiltered = onJsonChange(json)
 	})
 	$effect(() => {
-		search != undefined && searchOpen && onSearch()
+		search != undefined && searchOpen && untrack(() => onSearch())
 	})
 	let keys = $derived(
 		['object', 's3object'].includes(getTypeAsString(jsonFiltered)) ? Object.keys(jsonFiltered) : []
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
index 019d442fee..406edd931d 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
@@ -35,7 +35,7 @@
 		| undefined = undefined
 
 	export let diffDrawer: DiffDrawer | undefined = undefined
-	export let version: number | undefined = undefined
+	export const version: number | undefined = undefined
 
 	let runnables = writable(initRunnables)
 
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
index a7ba7e6e06..2f54226839 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
@@ -48,6 +48,7 @@
 	import { collectStaticFields, hash, type TriggerableV2 } from '../apps/editor/commonAppUtils'
 	import type { SavedAndModifiedValue } from '../common/confirmationModal/unsavedTypes'
 	import DropdownV2 from '../DropdownV2.svelte'
+	import { stateSnapshot } from '$lib/svelte5Utils.svelte'
 
 	// async function hash(message) {
 	// 	try {
@@ -204,7 +205,7 @@
 			})
 			savedApp = {
 				summary: summary,
-				value: structuredClone(app),
+				value: structuredClone(stateSnapshot(app)),
 				path: path,
 				policy: policy,
 				custom_path: customPath
@@ -309,7 +310,7 @@
 		})
 		savedApp = {
 			summary: summary,
-			value: structuredClone(app),
+			value: structuredClone(stateSnapshot(app)),
 			path: npath,
 			policy,
 			custom_path: customPath
@@ -401,13 +402,13 @@
 			})
 			savedApp = {
 				summary: summary,
-				value: structuredClone(app),
+				value: structuredClone(stateSnapshot(app)),
 				path: newEditedPath,
 				policy,
 				draft_only: true,
 				draft: {
 					summary: summary,
-					value: structuredClone(app),
+					value: structuredClone(stateSnapshot(app)),
 					path: newEditedPath,
 					policy,
 					custom_path: customPath
@@ -499,7 +500,7 @@
 				...(savedApp?.draft_only
 					? {
 							summary: summary,
-							value: structuredClone(app),
+							value: structuredClone(stateSnapshot(app)),
 							path: savedApp.draft_only ? newEditedPath || path : path,
 							policy,
 							draft_only: true,
@@ -508,7 +509,7 @@
 					: savedApp),
 				draft: {
 					summary: summary,
-					value: structuredClone(app),
+					value: structuredClone(stateSnapshot(app)),
 					path: newEditedPath || path,
 					policy,
 					custom_path: customPath
@@ -714,15 +715,17 @@
 			/>
 			<div class="py-4"></div>
 
-			<div slot="actions">
-				<Button
-					startIcon={{ icon: Save }}
-					disabled={pathError != '' || app == undefined}
-					on:click={() => saveInitialDraft()}
-				>
-					Save initial draft
-				</Button>
-			</div>
+			{#snippet actions()}
+				<div>
+					<Button
+						startIcon={{ icon: Save }}
+						disabled={pathError != '' || app == undefined}
+						on:click={() => saveInitialDraft()}
+					>
+						Save initial draft
+					</Button>
+				</div>
+			{/snippet}
 		</DrawerContent>
 	</Drawer>
 {/if}
@@ -781,63 +784,65 @@
 			autofocus={false}
 		/>
 
-		<div slot="actions" class="flex flex-row gap-4">
-			<Button
-				variant="border"
-				color="light"
-				disabled={!savedApp || savedApp.draft_only}
-				on:click={async () => {
-					if (!savedApp) {
-						return
-					}
-					// deployedValue should be syncronized when we open Diff
-					await syncWithDeployed()
+		{#snippet actions()}
+			<div class="flex flex-row gap-4">
+				<Button
+					variant="border"
+					color="light"
+					disabled={!savedApp || savedApp.draft_only}
+					on:click={async () => {
+						if (!savedApp) {
+							return
+						}
+						// deployedValue should be syncronized when we open Diff
+						await syncWithDeployed()
 
-					saveDrawerOpen = false
-					diffDrawer?.openDrawer()
-					diffDrawer?.setDiff({
-						mode: 'normal',
-						deployed: deployedValue ?? savedApp,
-						draft: savedApp.draft,
-						current: {
-							summary: summary,
-							value: app,
-							path: newEditedPath || savedApp.draft?.path || savedApp.path,
-							policy,
-							custom_path: customPath
-						},
-						button: {
-							text: 'Looks good, deploy',
-							onClick: () => {
-								if (appPath == '') {
-									createApp(newEditedPath)
-								} else {
-									handleUpdateApp(newEditedPath)
+						saveDrawerOpen = false
+						diffDrawer?.openDrawer()
+						diffDrawer?.setDiff({
+							mode: 'normal',
+							deployed: deployedValue ?? savedApp,
+							draft: savedApp.draft,
+							current: {
+								summary: summary,
+								value: app,
+								path: newEditedPath || savedApp.draft?.path || savedApp.path,
+								policy,
+								custom_path: customPath
+							},
+							button: {
+								text: 'Looks good, deploy',
+								onClick: () => {
+									if (appPath == '') {
+										createApp(newEditedPath)
+									} else {
+										handleUpdateApp(newEditedPath)
+									}
 								}
 							}
+						})
+					}}
+				>
+					<div class="flex flex-row gap-2 items-center">
+						<DiffIcon size={14} />
+						Diff
+					</div>
+				</Button>
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || customPathError != '' || app == undefined}
+					on:click={() => {
+						if (appPath == '') {
+							createApp(newEditedPath)
+						} else {
+							handleUpdateApp(newEditedPath)
 						}
-					})
-				}}
-			>
-				<div class="flex flex-row gap-2 items-center">
-					<DiffIcon size={14} />
-					Diff
-				</div>
-			</Button>
-			<Button
-				startIcon={{ icon: Save }}
-				disabled={pathError != '' || customPathError != '' || app == undefined}
-				on:click={() => {
-					if (appPath == '') {
-						createApp(newEditedPath)
-					} else {
-						handleUpdateApp(newEditedPath)
-					}
-				}}
-			>
-				Deploy
-			</Button>
-		</div>
+					}}
+				>
+					Deploy
+				</Button>
+			</div>
+		{/snippet}
 		<div class="py-2"></div>
 		{#if appPath == ''}
 			<Alert title="Require saving" type="error">
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
index 7d7558b17c..48a26e6cbe 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
@@ -23,7 +23,6 @@
 			}
 			return r
 		})
-		console.log('BAR 2')
 		selectedRunnable = nid
 	}
 
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
index 1c96d7b9c9..bb5f191e61 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
@@ -2,7 +2,7 @@
 	import EmptyInlineScript from '../apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte'
 	import InlineScriptRunnableByPath from '../apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte'
 	import type { Runnable, RunnableWithFields, StaticAppInput } from '../apps/inputType'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import RawAppInlineScriptEditor from './RawAppInlineScriptEditor.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import Tabs from '../common/tabs/Tabs.svelte'
@@ -14,9 +14,13 @@
 	import TestJobLoader from '../TestJobLoader.svelte'
 	import type { Job } from '$lib/gen'
 
-	export let runnable: RunnableWithFields | undefined
-	export let id: string
-	export let appPath: string
+	interface Props {
+		runnable: RunnableWithFields | undefined
+		id: string
+		appPath: string
+	}
+
+	let { runnable = $bindable(), id, appPath }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -35,8 +39,8 @@
 					}
 	}
 
-	let selectedTab = 'inputs'
-	let args = {}
+	let selectedTab = $state('inputs')
+	let args = $state({})
 
 	function getSchema(runnable: RunnableWithFields) {
 		if (runnable?.type == 'runnableByPath') {
@@ -48,12 +52,10 @@
 		return {}
 	}
 
-	let testJobLoader: TestJobLoader | undefined
-	let testJob: Job | undefined
-	let testIsLoading = false
-	let scriptProgress = 0
-
-	$: onFieldsChange(runnable?.fields ?? {})
+	let testJobLoader: TestJobLoader | undefined = $state()
+	let testJob: Job | undefined = $state()
+	let testIsLoading = $state(false)
+	let scriptProgress = $state(0)
 
 	function onFieldsChange(fields: Record<string, StaticAppInput>) {
 		if (args == undefined) {
@@ -86,6 +88,10 @@
 			}
 		}
 	}
+	$effect(() => {
+		;[runnable?.fields]
+		untrack(() => onFieldsChange(runnable?.fields ?? {}))
+	})
 </script>
 
 <TestJobLoader
@@ -141,7 +147,7 @@
 			<Tabs bind:selected={selectedTab}>
 				<Tab value="inputs">Inputs</Tab>
 				<Tab value="test">Test</Tab>
-				<svelte:fragment slot="content">
+				{#snippet content()}
 					{#if selectedTab == 'inputs'}
 						{#if runnable?.fields}
 							<div class="w-full flex flex-col gap-4 p-2">
@@ -177,12 +183,11 @@
 									<div class="px-2 py-3 h-full overflow-auto">
 										<SchemaForm
 											on:keydownCmdEnter={testPreview}
-											disabledArgs={Object.entries(runnable.fields ?? {})
+											disabledArgs={Object.entries(runnable?.fields ?? {})
 												.filter(([k, v]) => v.type == 'static')
 												.map(([k]) => k)}
-											schema={getSchema(runnable)}
+											schema={runnable ? getSchema(runnable) : {}}
 											bind:args
-											shouldCapitalize
 										/>
 									</div>
 								</Pane>
@@ -192,7 +197,7 @@
 							</Splitpanes>
 						</SplitPanesWrapper>
 					{/if}
-				</svelte:fragment>
+				{/snippet}
 			</Tabs>
 		</Pane>
 	</Splitpanes>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
index 7160917bcb..2c4834ea04 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { addWhitespaceBeforeCapitals, capitalize, classNames } from '$lib/utils'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 
@@ -12,30 +14,54 @@
 	import type { RichConfiguration } from '../apps/types'
 	import type { InputType } from '../apps/inputType'
 
-	export let id: string
-	export let componentInput: RichConfiguration
-	export let key: string
-	export let shouldCapitalize: boolean = true
-	export let resourceOnly = false
-	export let tooltip: string | undefined = undefined
-	export let fieldType: InputType
-	export let subFieldType: InputType | undefined
-	export let format: string | undefined
-	export let selectOptions: string[] | undefined
-	export let placeholder: string | undefined
-	export let customTitle: string | undefined = undefined
-	export let displayType: boolean = false
-	export let allowTypeChange: boolean = true
-	export let loading: boolean = false
-	export let documentationLink: string | undefined = undefined
-	export let markdownTooltip: string | undefined = undefined
-
-	$: if (componentInput == undefined) {
-		//@ts-ignore
-		componentInput = {
-			type: 'user'
-		}
+	interface Props {
+		id: string
+		componentInput: RichConfiguration
+		key: string
+		shouldCapitalize?: boolean
+		resourceOnly?: boolean
+		tooltip?: string | undefined
+		fieldType: InputType
+		subFieldType: InputType | undefined
+		format: string | undefined
+		selectOptions: string[] | undefined
+		placeholder: string | undefined
+		customTitle?: string | undefined
+		displayType?: boolean
+		allowTypeChange?: boolean
+		loading?: boolean
+		documentationLink?: string | undefined
+		markdownTooltip?: string | undefined
 	}
+
+	let {
+		id,
+		componentInput = $bindable(),
+		key,
+		shouldCapitalize = true,
+		resourceOnly = false,
+		tooltip = undefined,
+		fieldType,
+		subFieldType,
+		format,
+		selectOptions,
+		placeholder,
+		customTitle = undefined,
+		displayType = false,
+		allowTypeChange = true,
+		loading = false,
+		documentationLink = undefined,
+		markdownTooltip = undefined
+	}: Props = $props()
+
+	run(() => {
+		if (componentInput == undefined) {
+			//@ts-ignore
+			componentInput = {
+				type: 'user'
+			}
+		}
+	})
 </script>
 
 {#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
@@ -70,9 +96,11 @@
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
-					<ToggleButtonGroup class="h-7" bind:selected={componentInput.type} let:item>
-						<ToggleButton {item} value="user" icon={User} iconOnly tooltip="User Input" />
-						<ToggleButton {item} value="static" icon={Pen} iconOnly tooltip="Static" />
+					<ToggleButtonGroup class="h-7" bind:selected={componentInput.type}>
+						{#snippet children({ item })}
+							<ToggleButton {item} value="user" icon={User} iconOnly tooltip="User Input" />
+							<ToggleButton {item} value="static" icon={Pen} iconOnly tooltip="Static" />
+						{/snippet}
 					</ToggleButtonGroup>
 				{/if}
 			</div>
diff --git a/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte b/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
index c6cb0f04da..1c3eed8e60 100644
--- a/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
+++ b/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
@@ -17,7 +17,7 @@
 	import type { Schema } from '$lib/common'
 	import InputTransformForm from '../InputTransformForm.svelte'
 	import type { FlowPropPickerConfig, PropPickerContext } from '../prop_picker'
-	import { setContext } from 'svelte'
+	import { setContext, untrack } from 'svelte'
 	import { writable } from 'svelte/store'
 	import type { PickableProperties } from '../flows/previousResults'
 	import Alert from '../common/alert/Alert.svelte'
@@ -149,7 +149,7 @@
 				(options[selected.kind][selected.script_path]?.use_latest_version ?? false))
 	)
 
-	const jobGroupsPromise = $derived(selectedIds && fetchJobGroups())
+	const jobGroupsPromise = $derived(selectedIds && untrack(() => fetchJobGroups()))
 </script>
 
 <div class="flex-1 flex flex-col">
@@ -240,7 +240,7 @@
 										schema={displayedSchema}
 										{extraLib}
 										previousModuleId={undefined}
-										pickablepropertyMap={{
+										pickableProperties={{
 											hasResume: false,
 											previousId: undefined,
 											priorIds: {},
diff --git a/frontend/src/lib/components/runs/JobLoader.svelte b/frontend/src/lib/components/runs/JobLoader.svelte
index 6d939e42fe..f9f7554780 100644
--- a/frontend/src/lib/components/runs/JobLoader.svelte
+++ b/frontend/src/lib/components/runs/JobLoader.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte'
+	import { onDestroy, onMount, untrack } from 'svelte'
 	import {
 		JobService,
 		type Job,
@@ -15,84 +15,89 @@
 	import { tweened, type Tweened } from 'svelte/motion'
 	import { subtractDaysFromDateString } from '$lib/utils'
 
-	export let jobs: Job[] | undefined
-	export let user: string | null
-	export let label: string | null = null
-	export let worker: string | null = null
-	export let folder: string | null
-	export let path: string | null
-	export let success: 'success' | 'suspended' | 'waiting' | 'failure' | 'running' | undefined =
-		undefined
-	export let isSkipped: boolean = false
-	export let showSchedules: boolean = true
-	export let showFutureJobs: boolean = true
-	export let argFilter: string | undefined
-	export let resultFilter: string | undefined = undefined
-	export let schedulePath: string | undefined = undefined
-	export let jobKindsCat: string | undefined = undefined
-	export let minTs: string | undefined = undefined
-	export let maxTs: string | undefined = undefined
-	export let jobKinds: string = ''
-	export let queue_count: Tweened<number> | undefined = undefined
-	export let suspended_count: Tweened<number> | undefined = undefined
+	interface Props {
+		jobs: Job[] | undefined
+		user: string | null
+		label?: string | null
+		worker?: string | null
+		folder: string | null
+		path: string | null
+		success?: 'success' | 'suspended' | 'waiting' | 'failure' | 'running' | undefined
+		isSkipped?: boolean
+		showSchedules?: boolean
+		showFutureJobs?: boolean
+		argFilter: string | undefined
+		resultFilter?: string | undefined
+		schedulePath?: string | undefined
+		jobKindsCat?: string | undefined
+		minTs?: string | undefined
+		maxTs?: string | undefined
+		jobKinds?: string
+		queue_count?: Tweened<number> | undefined
+		suspended_count?: Tweened<number> | undefined
+		autoRefresh?: boolean
+		completedJobs?: CompletedJob[] | undefined
+		externalJobs?: Job[] | undefined
+		concurrencyKey: string | null
+		tag: string | null
+		extendedJobs?: ExtendedJobs | undefined
+		argError?: string
+		resultError?: string
+		loading?: boolean
+		refreshRate?: number
+		syncQueuedRunsCount?: boolean
+		allWorkspaces?: boolean
+		computeMinAndMax: (() => { minTs: string; maxTs: string | undefined } | undefined) | undefined
+		lookback?: number
+		perPage?: number | undefined
+		allowWildcards?: boolean
+	}
 
-	export let autoRefresh: boolean = true
-	export let completedJobs: CompletedJob[] | undefined = undefined
-	export let externalJobs: Job[] | undefined = undefined
-	export let concurrencyKey: string | null
-	export let tag: string | null
-	export let extendedJobs: ExtendedJobs | undefined = undefined
-	export let argError = ''
-	export let resultError = ''
-	export let loading: boolean = false
-	export let refreshRate = 5000
-	export let syncQueuedRunsCount: boolean = true
-	export let allWorkspaces: boolean = false
-	export let computeMinAndMax:
-		| (() => { minTs: string; maxTs: string | undefined } | undefined)
-		| undefined
-	export let lookback: number = 0
-	export let perPage: number | undefined = undefined
-	export let allowWildcards: boolean = false
-	let intervalId: NodeJS.Timeout | undefined
+	let {
+		jobs = $bindable(),
+		user,
+		label = null,
+		worker = null,
+		folder,
+		path,
+		success = undefined,
+		isSkipped = false,
+		showSchedules = true,
+		showFutureJobs = true,
+		argFilter,
+		resultFilter = undefined,
+		schedulePath = undefined,
+		jobKindsCat = undefined,
+		minTs = $bindable(undefined),
+		maxTs = $bindable(undefined),
+		jobKinds = $bindable(''),
+		queue_count = $bindable(undefined),
+		suspended_count = $bindable(undefined),
+		autoRefresh = true,
+		completedJobs = $bindable(undefined),
+		externalJobs = $bindable(undefined),
+		concurrencyKey,
+		tag,
+		extendedJobs = $bindable(undefined),
+		argError = '',
+		resultError = '',
+		loading = $bindable(false),
+		refreshRate = 5000,
+		syncQueuedRunsCount = true,
+		allWorkspaces = false,
+		computeMinAndMax,
+		lookback = 0,
+		perPage = undefined,
+		allowWildcards = false
+	}: Props = $props()
+	let intervalId: NodeJS.Timeout | undefined = $state()
 	let sync = true
 
-	$: jobKinds = computeJobKinds(jobKindsCat)
-	$: ($workspaceStore ||
-		(path &&
-			label &&
-			success &&
-			worker &&
-			isSkipped != undefined &&
-			jobKinds &&
-			concurrencyKey &&
-			tag &&
-			lookback &&
-			user &&
-			folder &&
-			allowWildcards &&
-			schedulePath != undefined &&
-			showFutureJobs != undefined &&
-			showSchedules != undefined &&
-			allWorkspaces != undefined &&
-			argFilter != undefined &&
-			resultFilter != undefined)) &&
-		onParamChanges()
-
 	function onParamChanges() {
 		resetJobs()
 		loadJobsIntern(true)
 	}
 
-	$: if (!intervalId && autoRefresh) {
-		intervalId = setInterval(syncer, refreshRate)
-	}
-
-	$: if (intervalId && !autoRefresh) {
-		clearInterval(intervalId)
-		intervalId = undefined
-	}
-
 	function computeJobKinds(jobKindsCat: string | undefined): string {
 		if (jobKindsCat == undefined && jobKinds != undefined) {
 			return jobKinds
@@ -503,4 +508,49 @@
 			clearInterval(intervalId)
 		}
 	})
+	$effect(() => {
+		jobKinds = computeJobKinds(jobKindsCat)
+	})
+	$effect(() => {
+		;[
+			$workspaceStore,
+			path,
+			label,
+			success,
+			worker,
+			isSkipped,
+			jobKinds,
+			concurrencyKey,
+			tag,
+			lookback,
+			user,
+			folder,
+			allowWildcards,
+			schedulePath,
+			showFutureJobs,
+			showSchedules,
+			allWorkspaces,
+			argFilter,
+			resultFilter
+		]
+
+		untrack(() => onParamChanges())
+	})
+	$effect(() => {
+		;[autoRefresh, refreshRate]
+		untrack(() => {
+			if (!intervalId && autoRefresh) {
+				intervalId = setInterval(syncer, refreshRate)
+			}
+		})
+	})
+	$effect(() => {
+		autoRefresh
+		untrack(() => {
+			if (intervalId && !autoRefresh) {
+				clearInterval(intervalId)
+				intervalId = undefined
+			}
+		})
+	})
 </script>
diff --git a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
index 03ce501164..7882005409 100644
--- a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
+++ b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
@@ -33,7 +33,7 @@
 {#if args !== undefined && argsStr !== undefined}
 	<Drawer bind:this={jsonViewer} size="900px">
 		<DrawerContent title="Original args" on:close={jsonViewer.closeDrawer}>
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				<Button
 					download="windmill-args.json"
 					href={`data:text/json;charset=utf-8,${encodeURIComponent(argsStr)}`}
@@ -51,7 +51,7 @@
 				>
 					Copy to clipboard
 				</Button>
-			</svelte:fragment>
+			{/snippet}
 			{#if args.length > 100000 || (args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG')}
 				<div class="text-sm mb-2 text-tertiary">
 					<a
diff --git a/frontend/src/lib/components/runs/RunsFilter.svelte b/frontend/src/lib/components/runs/RunsFilter.svelte
index 844eca559a..6fd0b0ed03 100644
--- a/frontend/src/lib/components/runs/RunsFilter.svelte
+++ b/frontend/src/lib/components/runs/RunsFilter.svelte
@@ -3,80 +3,82 @@
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import Tooltip from '../Tooltip.svelte'
-	import AutoComplete from 'simple-svelte-autocomplete'
-	import {
-		AlertCircle,
-		CheckCircle2,
-		ChevronDown,
-		Filter,
-		Hourglass,
-		PlayCircle,
-		X
-	} from 'lucide-svelte'
+	import { AlertCircle, CheckCircle2, Filter, Hourglass, PlayCircle, X } from 'lucide-svelte'
 	import JsonEditor from '../JsonEditor.svelte'
 	import Toggle from '../Toggle.svelte'
 	import Label from '../Label.svelte'
 	import Section from '../Section.svelte'
 	import { enterpriseLicense, workspaceStore } from '$lib/stores'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import ToggleButtonMore from '../common/toggleButton-v2/ToggleButtonMore.svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	import Select from '../Select.svelte'
 
-	// Filters
-	export let path: string | null = null
-	export let label: string | null = null
-	export let concurrencyKey: string | null = null
-	export let worker: string | null = null
-	export let tag: string | null = null
-	export let success:
-		| 'running'
-		| 'waiting'
-		| 'suspended'
-		| 'queued'
-		| 'success'
-		| 'failure'
-		| undefined = undefined
-	export let isSkipped: boolean | undefined = undefined
-	export let argFilter: string
-	export let argError: string
-	export let resultFilter: string
-	export let resultError: string
-	export let jobKindsCat: string
-	export let user: string | null = null
-	export let folder: string | null = null
-	export let mobile: boolean = false
-	export let schedulePath: string | undefined
-	export let allowWildcards: boolean = false
-	// Autocomplete data
-	export let paths: string[] = []
-	export let usernames: string[] = []
-	export let folders: string[] = []
-	export let allWorkspaces = false
+	interface Props {
+		// Filters
+		path?: string | null
+		label?: string | null
+		concurrencyKey?: string | null
+		worker?: string | null
+		tag?: string | null
+		success?: 'running' | 'waiting' | 'suspended' | 'queued' | 'success' | 'failure' | undefined
+		isSkipped?: boolean | undefined
+		argFilter: string
+		argError: string
+		resultFilter: string
+		resultError: string
+		jobKindsCat: string
+		user?: string | null
+		folder?: string | null
+		mobile?: boolean
+		schedulePath: string | undefined
+		allowWildcards?: boolean
+		// Autocomplete data
+		paths?: string[]
+		usernames?: string[]
+		folders?: string[]
+		allWorkspaces?: boolean
+		filterBy?:
+			| 'path'
+			| 'user'
+			| 'folder'
+			| 'label'
+			| 'concurrencyKey'
+			| 'worker'
+			| 'tag'
+			| 'schedulePath'
+	}
 
-	$: displayedLabel = label
-	$: displayedConcurrencyKey = concurrencyKey
-	$: displayedTag = tag
-	$: displayedSchedule = schedulePath
-	$: displayedWorker = worker
+	let {
+		path = $bindable(null),
+		label = $bindable(null),
+		concurrencyKey = $bindable(null),
+		worker = $bindable(null),
+		tag = $bindable(null),
+		success = $bindable(undefined),
+		isSkipped = $bindable(undefined),
+		argFilter = $bindable(),
+		argError = $bindable(),
+		resultFilter = $bindable(),
+		resultError = $bindable(),
+		jobKindsCat = $bindable(),
+		user = $bindable(null),
+		folder = $bindable(null),
+		mobile = false,
+		schedulePath = $bindable(),
+		allowWildcards = $bindable(false),
+		paths = [],
+		usernames = [],
+		folders = [],
+		allWorkspaces = $bindable(false),
+		filterBy = $bindable('path')
+	}: Props = $props()
 
-	let copyArgFilter = argFilter
-	let copyResultFilter = resultFilter
-
-	export let filterBy:
-		| 'path'
-		| 'user'
-		| 'folder'
-		| 'label'
-		| 'concurrencyKey'
-		| 'worker'
-		| 'tag'
-		| 'schedulePath' = 'path'
+	let copyArgFilter = $state(argFilter)
+	let copyResultFilter = $state(resultFilter)
 
 	const dispatch = createEventDispatcher()
 
-	$: (path || user || folder || label || worker || concurrencyKey || tag || schedulePath) &&
-		autosetFilter()
-
 	function autosetFilter() {
 		if (path !== null && path !== '' && filterBy !== 'path') {
 			filterBy = 'path'
@@ -97,12 +99,21 @@
 		}
 	}
 
-	let labelTimeout: NodeJS.Timeout | undefined = undefined
-	let concurrencyKeyTimeout: NodeJS.Timeout | undefined = undefined
-	let tagTimeout: NodeJS.Timeout | undefined = undefined
-	let workerTimeout: NodeJS.Timeout | undefined = undefined
+	let labelTimeout: NodeJS.Timeout | undefined = $state(undefined)
+	let concurrencyKeyTimeout: NodeJS.Timeout | undefined = $state(undefined)
+	let tagTimeout: NodeJS.Timeout | undefined = $state(undefined)
+	let workerTimeout: NodeJS.Timeout | undefined = $state(undefined)
 
-	let allWorkspacesValue = allWorkspaces ? 'all' : 'admins'
+	let allWorkspacesValue = $state(allWorkspaces ? 'all' : 'admins')
+	let displayedLabel = $derived(label)
+	let displayedConcurrencyKey = $derived(concurrencyKey)
+	let displayedTag = $derived(tag)
+	let displayedSchedule = $derived(schedulePath)
+	let displayedWorker = $derived(worker)
+	$effect(() => {
+		;(path || user || folder || label || worker || concurrencyKey || tag || schedulePath) &&
+			untrack(() => autosetFilter())
+	})
 </script>
 
 <div class="flex gap-4">
@@ -114,10 +125,11 @@
 					<ToggleButtonGroup
 						bind:selected={allWorkspacesValue}
 						on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
-						let:item
 					>
-						<ToggleButton value={'admins'} label="Admins" {item} />
-						<ToggleButton value={'all'} label="All" {item} />
+						{#snippet children({ item })}
+							<ToggleButton value={'admins'} label="Admins" {item} />
+							<ToggleButton value={'all'} label="All" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 			{/if}
@@ -137,126 +149,67 @@
 							schedulePath = undefined
 						}
 					}}
-					let:item
 				>
-					<ToggleButton value="path" label="Path" {item} />
-					<ToggleButton value="user" label="User" {item} />
-					<ToggleButton value="folder" label="Folder" {item} />
-					<ToggleButtonMore
-						togglableItems={[
-							{ label: 'Schedule path', value: 'schedulePath' },
-							{ label: 'Concurrency key', value: 'concurrencyKey' },
-							{ label: 'Label', value: 'label' },
-							{ label: 'Tag', value: 'tag' },
-							{ label: 'Worker', value: 'worker' }
-						]}
-						{item}
-						bind:selected={filterBy}
-					/>
+					{#snippet children({ item })}
+						<ToggleButton value="path" label="Path" {item} />
+						<ToggleButton value="user" label="User" {item} />
+						<ToggleButton value="folder" label="Folder" {item} />
+						<ToggleButtonMore
+							togglableItems={[
+								{ label: 'Schedule path', value: 'schedulePath' },
+								{ label: 'Concurrency key', value: 'concurrencyKey' },
+								{ label: 'Label', value: 'label' },
+								{ label: 'Tag', value: 'tag' },
+								{ label: 'Worker', value: 'worker' }
+							]}
+							{item}
+							bind:selected={filterBy}
+						/>
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 
 			{#if filterBy == 'user'}
 				{#key user}
 					<div class="relative">
-						{#if user}
-							<button
-								class="absolute top-2 right-2 z-50"
-								on:click={() => {
-									user = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{:else}
-							<ChevronDown class="absolute top-2 right-2" size={14} />
-						{/if}
-
 						<span class="text-xs absolute -top-4">User</span>
-						<AutoComplete
-							create
-							onCreate={(user) => {
-								usernames.push(user)
-								return user
-							}}
+						<Select
+							items={usernames.map((p) => ({ label: p, value: p }))}
+							bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
+							clearable
+							onClear={() => ((user = null), dispatch('reset'))}
+							inputClass="!h-[32px]"
+							onCreateItem={(item) => (usernames.push(item), (user = item))}
 							createText="Press enter to use this value"
-							noInputStyles
-							items={usernames}
-							value={user}
-							bind:selectedItem={user}
-							inputClassName="!h-[32px] py-1 !text-xs !w-64"
-							hideArrow
-							className={user ? '!font-bold' : ''}
-							dropdownClassName="!font-normal !w-64 !max-w-64"
 						/>
 					</div>
 				{/key}
 			{:else if filterBy == 'folder'}
 				{#key folder}
 					<div class="relative">
-						{#if folder}
-							<button
-								class="absolute top-2 right-2 z-50"
-								on:click={() => {
-									folder = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{:else}
-							<ChevronDown class="absolute top-2 right-2" size={14} />
-						{/if}
-
 						<span class="text-xs absolute -top-4">Folder</span>
 
-						<AutoComplete
-							noInputStyles
-							items={folders}
-							value={folder}
-							bind:selectedItem={folder}
-							inputClassName="!h-[32px] py-1 !text-xs !w-64"
-							hideArrow
-							className={folder ? '!font-bold' : ''}
-							dropdownClassName="!font-normal !w-64 !max-w-64"
+						<Select
+							items={folders.map((p) => ({ label: p, value: p }))}
+							bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
+							clearable
+							onClear={() => ((folder = null), dispatch('reset'))}
+							inputClass="!h-[32px]"
 						/>
 					</div>
 				{/key}
 			{:else if filterBy === 'path'}
 				{#key path}
 					<div class="relative">
-						{#if path}
-							<button
-								class="absolute top-2 right-2 z-50"
-								on:click={() => {
-									path = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{:else}
-							<ChevronDown class="absolute top-2 right-2" size={14} />
-						{/if}
-
 						<span class="text-xs absolute -top-4">Path</span>
-
-						<AutoComplete
-							create
-							onCreate={(path) => {
-								paths.push(path)
-								return path
-							}}
+						<Select
+							items={paths.map((p) => ({ label: p, value: p }))}
+							bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
+							clearable
+							onClear={() => ((path = null), dispatch('reset'))}
+							inputClass="!h-[32px]"
+							onCreateItem={(item) => (paths.push(item), (path = item))}
 							createText="Press enter to use this value"
-							noInputStyles
-							items={paths}
-							value={path}
-							bind:selectedItem={path}
-							inputClassName="!h-[32px] py-1 !text-xs !w-64"
-							hideArrow
-							className={path ? '!font-bold' : ''}
-							dropdownClassName="!font-normal !w-64 !max-w-64"
 						/>
 					</div>
 				{/key}
@@ -266,7 +219,7 @@
 						{#if label}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									label = null
 									dispatch('reset')
 								}}
@@ -284,13 +237,13 @@
 							></span
 						>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedLabel}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (labelTimeout) {
 									clearTimeout(labelTimeout)
 								}
@@ -315,7 +268,7 @@
 						{#if concurrencyKey}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									concurrencyKey = null
 									dispatch('reset')
 								}}
@@ -333,13 +286,13 @@
 							</Tooltip></span
 						>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedConcurrencyKey}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (concurrencyKeyTimeout) {
 									clearTimeout(concurrencyKeyTimeout)
 								}
@@ -357,7 +310,7 @@
 						{#if tag}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									tag = null
 									dispatch('reset')
 								}}
@@ -367,13 +320,13 @@
 						{/if}
 						<span class="text-xs absolute -top-4"> Tag </span>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedTag}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (tagTimeout) {
 									clearTimeout(tagTimeout)
 								}
@@ -398,7 +351,7 @@
 						{#if tag}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									schedulePath = undefined
 									dispatch('reset')
 								}}
@@ -408,13 +361,13 @@
 						{/if}
 						<span class="text-xs absolute -top-4"> Schedule Path </span>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedSchedule}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (tagTimeout) {
 									clearTimeout(tagTimeout)
 								}
@@ -432,7 +385,7 @@
 						{#if worker}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									worker = null
 									dispatch('reset')
 								}}
@@ -442,13 +395,13 @@
 						{/if}
 						<span class="text-xs absolute -top-4"> Worker </span>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedWorker}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (workerTimeout) {
 									clearTimeout(workerTimeout)
 								}
@@ -471,36 +424,38 @@
 		</div>
 		<div class="relative">
 			<span class="text-xs absolute -top-4">Kind</span>
-			<ToggleButtonGroup bind:selected={jobKindsCat} let:item>
-				<ToggleButton value="all" label="All" {item} />
-				<ToggleButton
-					value="runs"
-					label="Runs"
-					showTooltipIcon
-					tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
-					{item}
-				/>
-				<ToggleButton
-					value="previews"
-					label="Previews"
-					showTooltipIcon
-					tooltip="Previews are jobs that have been started in the editor as 'Tests'"
-					{item}
-				/>
-				<ToggleButton
-					value="dependencies"
-					label="Deps"
-					showTooltipIcon
-					tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
-					{item}
-				/>
-				<ToggleButton
-					value="deploymentcallbacks"
-					label="Sync"
-					showTooltipIcon
-					tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
-					{item}
-				/>
+			<ToggleButtonGroup bind:selected={jobKindsCat}>
+				{#snippet children({ item })}
+					<ToggleButton value="all" label="All" {item} />
+					<ToggleButton
+						value="runs"
+						label="Runs"
+						showTooltipIcon
+						tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
+						{item}
+					/>
+					<ToggleButton
+						value="previews"
+						label="Previews"
+						showTooltipIcon
+						tooltip="Previews are jobs that have been started in the editor as 'Tests'"
+						{item}
+					/>
+					<ToggleButton
+						value="dependencies"
+						label="Deps"
+						showTooltipIcon
+						tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
+						{item}
+					/>
+					<ToggleButton
+						value="deploymentcallbacks"
+						label="Sync"
+						showTooltipIcon
+						tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 		<div class="relative">
@@ -511,52 +466,53 @@
 					success = detail === 'all' ? undefined : detail
 					dispatch('successChange', success)
 				}}
-				let:item
 			>
-				<ToggleButton value={'all'} label="All" {item} />
-				<ToggleButton
-					value={'running'}
-					tooltip="Running"
-					class="whitespace-nowrap"
-					icon={PlayCircle}
-					iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
-					{item}
-				/>
-				<ToggleButton
-					value={'success'}
-					tooltip="Success"
-					class="whitespace-nowrap"
-					icon={CheckCircle2}
-					iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
-					{item}
-				/>
-				<ToggleButton
-					value={'failure'}
-					tooltip="Failure"
-					class="whitespace-nowrap"
-					icon={AlertCircle}
-					iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
-					{item}
-				/>
-				{#if success == 'waiting'}
+				{#snippet children({ item })}
+					<ToggleButton value={'all'} label="All" {item} />
 					<ToggleButton
-						value={'waiting'}
-						tooltip="Waiting"
+						value={'running'}
+						tooltip="Running"
 						class="whitespace-nowrap"
-						icon={Hourglass}
-						iconProps={{ color: 'blue' }}
+						icon={PlayCircle}
+						iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
 						{item}
 					/>
-				{:else if success == 'suspended'}
 					<ToggleButton
-						value={'suspended'}
-						tooltip="Suspended"
+						value={'success'}
+						tooltip="Success"
 						class="whitespace-nowrap"
-						icon={Hourglass}
-						iconProps={{ color: 'blue' }}
+						icon={CheckCircle2}
+						iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
 						{item}
 					/>
-				{/if}
+					<ToggleButton
+						value={'failure'}
+						tooltip="Failure"
+						class="whitespace-nowrap"
+						icon={AlertCircle}
+						iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
+						{item}
+					/>
+					{#if success == 'waiting'}
+						<ToggleButton
+							value={'waiting'}
+							tooltip="Waiting"
+							class="whitespace-nowrap"
+							icon={Hourglass}
+							iconProps={{ color: 'blue' }}
+							{item}
+						/>
+					{:else if success == 'suspended'}
+						<ToggleButton
+							value={'suspended'}
+							tooltip="Suspended"
+							class="whitespace-nowrap"
+							icon={Hourglass}
+							iconProps={{ color: 'blue' }}
+							{item}
+						/>
+					{/if}
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{/if}
@@ -566,19 +522,18 @@
 		contentClasses="p-4"
 		closeButton
 	>
-		<svelte:fragment slot="trigger">
+		{#snippet trigger()}
 			<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
 				More filters
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<Section label="Filters">
 				<div class="w-102 flex flex-col gap-4">
 					{#if mobile || true}
 						<Label label="Filter by">
 							<ToggleButtonGroup
-								let:item
 								bind:selected={filterBy}
 								on:selected={(e) => {
 									if (e.detail != filterBy) {
@@ -592,106 +547,52 @@
 									}
 								}}
 							>
-								<ToggleButton value="path" label="Path" {item} />
-								<ToggleButton value="user" label="User" {item} />
-								<ToggleButton value="folder" label="Folder" {item} />
-								<ToggleButton value="schedulePath" label="Schedule" {item} />
-								<ToggleButton value="concurrencyKey" label="Concurrency" {item} />
-								<ToggleButton value="tag" label="Tag" {item} />
-								<ToggleButton value="label" label="Label" {item} />
-								<ToggleButton value="worker" label="Worker" {item} />
+								{#snippet children({ item })}
+									<ToggleButton value="path" label="Path" {item} />
+									<ToggleButton value="user" label="User" {item} />
+									<ToggleButton value="folder" label="Folder" {item} />
+									<ToggleButton value="schedulePath" label="Schedule" {item} />
+									<ToggleButton value="concurrencyKey" label="Concurrency" {item} />
+									<ToggleButton value="tag" label="Tag" {item} />
+									<ToggleButton value="label" label="Label" {item} />
+									<ToggleButton value="worker" label="Worker" {item} />
+								{/snippet}
 							</ToggleButtonGroup>
 						</Label>
 
 						{#if filterBy == 'user'}
-							{#key user}
-								<Label label="User">
-									<div class="relative w-full">
-										{#if user}
-											<button
-												class="absolute top-2 right-2 z-50"
-												on:click={() => {
-													user = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{:else}
-											<ChevronDown class="absolute top-2 right-2" size={14} />
-										{/if}
-
-										<AutoComplete
-											items={usernames}
-											value={user}
-											bind:selectedItem={user}
-											inputClassName="!h-[32px] py-1 !text-xs !w-80"
-											hideArrow
-											className={user ? '!font-bold' : ''}
-											dropdownClassName="!font-normal !w-80 !max-w-80"
-										/>
-									</div>
-								</Label>
-							{/key}
+							<Label label="User">
+								<Select
+									disablePortal
+									items={usernames.map((p) => ({ label: p, value: p }))}
+									bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
+									clearable
+									onClear={() => ((user = null), dispatch('reset'))}
+									inputClass="!h-[32px]"
+								/>
+							</Label>
 						{:else if filterBy == 'folder'}
-							{#key folder}
-								<Label label="Folder">
-									<div class="relative w-full">
-										{#if folder}
-											<button
-												class="absolute top-2 right-2 z-50"
-												on:click={() => {
-													folder = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{:else}
-											<ChevronDown class="absolute top-2 right-2" size={14} />
-										{/if}
-
-										<AutoComplete
-											noInputStyles
-											items={folders}
-											value={folder}
-											bind:selectedItem={folder}
-											inputClassName="!h-[32px] py-1 !text-xs !w-80"
-											hideArrow
-											className={folder ? '!font-bold' : ''}
-											dropdownClassName="!font-normal !w-80 !max-w-80"
-										/>
-									</div>
-								</Label>
-							{/key}
+							<Label label="Folder">
+								<Select
+									disablePortal
+									items={folders.map((p) => ({ label: p, value: p }))}
+									bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
+									clearable
+									onClear={() => ((folder = null), dispatch('reset'))}
+									inputClass="!h-[32px]"
+								/>
+							</Label>
 						{:else if filterBy === 'path'}
-							{#key path}
-								<Label label="Path">
-									<div class="relative w-full">
-										{#if path}
-											<button
-												class="absolute top-2 right-2 z-50"
-												on:click={() => {
-													path = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{:else}
-											<ChevronDown class="absolute top-2 right-2" size={14} />
-										{/if}
-
-										<AutoComplete
-											noInputStyles
-											items={paths}
-											value={path}
-											bind:selectedItem={path}
-											inputClassName="!h-[32px] py-1 !text-xs !w-80"
-											hideArrow
-											className={path ? '!font-bold' : ''}
-											dropdownClassName="!font-normal !w-80 !max-w-80"
-										/>
-									</div>
-								</Label>
-							{/key}
+							<Label label="Path">
+								<Select
+									disablePortal
+									items={paths.map((p) => ({ label: p, value: p }))}
+									bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
+									clearable
+									onClear={() => ((path = null), dispatch('reset'))}
+									inputClass="!h-[32px]"
+								/>
+							</Label>
 						{:else if filterBy === 'tag'}
 							{#key tag}
 								<Label label="Tag">
@@ -699,7 +600,7 @@
 										{#if tag}
 											<button
 												class="absolute top-2 right-2 z-50"
-												on:click={() => {
+												onclick={() => {
 													tag = null
 												}}
 											>
@@ -707,13 +608,13 @@
 											</button>
 										{/if}
 
-										<!-- svelte-ignore a11y-autofocus -->
+										<!-- svelte-ignore a11y_autofocus -->
 										<input
 											autofocus
 											type="text"
 											class="!h-[32px] py-1 !text-xs !w-80"
 											bind:value={displayedTag}
-											on:keydown={(e) => {
+											onkeydown={(e) => {
 												if (tagTimeout) {
 													clearTimeout(tagTimeout)
 												}
@@ -734,7 +635,7 @@
 										{#if label}
 											<button
 												class="absolute top-2 right-2 z-50"
-												on:click={() => {
+												onclick={() => {
 													label = null
 												}}
 											>
@@ -742,13 +643,13 @@
 											</button>
 										{/if}
 
-										<!-- svelte-ignore a11y-autofocus -->
+										<!-- svelte-ignore a11y_autofocus -->
 										<input
 											autofocus
 											type="text"
 											class="!h-[32px] py-1 !text-xs !w-80"
 											bind:value={displayedLabel}
-											on:keydown={(e) => {
+											onkeydown={(e) => {
 												if (labelTimeout) {
 													clearTimeout(labelTimeout)
 												}
@@ -768,7 +669,7 @@
 										{#if concurrencyKey}
 											<button
 												class="absolute top-2 right-2 z-50"
-												on:click={() => {
+												onclick={() => {
 													concurrencyKey = null
 													// dispatch('reset')
 												}}
@@ -777,13 +678,13 @@
 											</button>
 										{/if}
 
-										<!-- svelte-ignore a11y-autofocus -->
+										<!-- svelte-ignore a11y_autofocus -->
 										<input
 											autofocus
 											type="text"
 											class="!h-[32px] py-1 !text-xs !w-80"
 											bind:value={displayedConcurrencyKey}
-											on:keydown={(e) => {
+											onkeydown={(e) => {
 												if (concurrencyKeyTimeout) {
 													clearTimeout(concurrencyKeyTimeout)
 												}
@@ -803,7 +704,7 @@
 										{#if concurrencyKey}
 											<button
 												class="absolute top-2 right-2 z-50"
-												on:click={() => {
+												onclick={() => {
 													worker = null
 													// dispatch('reset')
 												}}
@@ -812,13 +713,13 @@
 											</button>
 										{/if}
 
-										<!-- svelte-ignore a11y-autofocus -->
+										<!-- svelte-ignore a11y_autofocus -->
 										<input
 											autofocus
 											type="text"
 											class="!h-[32px] py-1 !text-xs !w-80"
 											bind:value={displayedWorker}
-											on:keydown={(e) => {
+											onkeydown={(e) => {
 												if (workerTimeout) {
 													clearTimeout(workerTimeout)
 												}
@@ -841,36 +742,38 @@
 							></Toggle>
 						{/if}
 						<Label label="Kind">
-							<ToggleButtonGroup bind:selected={jobKindsCat} let:item>
-								<ToggleButton value="all" label="All" {item} />
-								<ToggleButton
-									value="runs"
-									label="Runs"
-									showTooltipIcon
-									tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
-									{item}
-								/>
-								<ToggleButton
-									value="previews"
-									label="Previews"
-									showTooltipIcon
-									tooltip="Previews are jobs that have been started in the editor as 'Tests'"
-									{item}
-								/>
-								<ToggleButton
-									value="dependencies"
-									label="Deps"
-									showTooltipIcon
-									tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
-									{item}
-								/>
-								<ToggleButton
-									value="deploymentcallbacks"
-									label="Sync"
-									showTooltipIcon
-									tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
-									{item}
-								/>
+							<ToggleButtonGroup bind:selected={jobKindsCat}>
+								{#snippet children({ item })}
+									<ToggleButton value="all" label="All" {item} />
+									<ToggleButton
+										value="runs"
+										label="Runs"
+										showTooltipIcon
+										tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
+										{item}
+									/>
+									<ToggleButton
+										value="previews"
+										label="Previews"
+										showTooltipIcon
+										tooltip="Previews are jobs that have been started in the editor as 'Tests'"
+										{item}
+									/>
+									<ToggleButton
+										value="dependencies"
+										label="Deps"
+										showTooltipIcon
+										tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
+										{item}
+									/>
+									<ToggleButton
+										value="deploymentcallbacks"
+										label="Sync"
+										showTooltipIcon
+										tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
+										{item}
+									/>
+								{/snippet}
 							</ToggleButtonGroup>
 						</Label>
 
@@ -878,12 +781,28 @@
 							<ToggleButtonGroup
 								selected={success ?? 'all'}
 								on:selected={({ detail }) => (success = detail === 'all' ? undefined : detail)}
-								let:item
 							>
-								<ToggleButton value={'all'} label="All" {item} />
-								<ToggleButton value={'running'} label="Running" class="whitespace-nowrap" {item} />
-								<ToggleButton value={'success'} label="Success" class="whitespace-nowrap" {item} />
-								<ToggleButton value={'failure'} label="Failure" class="whitespace-nowrap" {item} />
+								{#snippet children({ item })}
+									<ToggleButton value={'all'} label="All" {item} />
+									<ToggleButton
+										value={'running'}
+										label="Running"
+										class="whitespace-nowrap"
+										{item}
+									/>
+									<ToggleButton
+										value={'success'}
+										label="Success"
+										class="whitespace-nowrap"
+										{item}
+									/>
+									<ToggleButton
+										value={'failure'}
+										label="Failure"
+										class="whitespace-nowrap"
+										{item}
+									/>
+								{/snippet}
 							</ToggleButtonGroup>
 						</Label>
 					{/if}
@@ -930,6 +849,6 @@
 					</div>
 				</div>
 			</Section>
-		</svelte:fragment>
+		{/snippet}
 	</Popover>
 </div>
diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte
index 17171bb669..8872941349 100644
--- a/frontend/src/lib/components/runs/RunsTable.svelte
+++ b/frontend/src/lib/components/runs/RunsTable.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import type { Job } from '$lib/gen'
 	import RunRow from './RunRow.svelte'
-	import VirtualList from 'svelte-tiny-virtual-list'
+	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list'
 	import { createEventDispatcher, onMount } from 'svelte'
 	import Tooltip from '../Tooltip.svelte'
 	import { AlertTriangle } from 'lucide-svelte'
@@ -10,28 +13,44 @@
 	import { twMerge } from 'tailwind-merge'
 	import { isJobSelectable } from '$lib/utils'
 	import type { RunsSelectionMode } from './RunsBatchActionsDropdown.svelte'
-	//import InfiniteLoading from 'svelte-infinite-loading'
 
-	export let jobs: Job[] | undefined = undefined
-	export let externalJobs: Job[] = []
-	export let omittedObscuredJobs: boolean
-	export let showExternalJobs: boolean = false
-	export let selectionMode: RunsSelectionMode | false = false
-	export let selectedIds: string[] = []
-	export let selectedWorkspace: string | undefined = undefined
-	export let activeLabel: string | null = null
-	// const loadMoreQuantity: number = 100
-	export let lastFetchWentToEnd = false
+	interface Props {
+		//import InfiniteLoading from 'svelte-infinite-loading'
+		jobs?: Job[] | undefined
+		externalJobs?: Job[]
+		omittedObscuredJobs: boolean
+		showExternalJobs?: boolean
+		selectionMode?: RunsSelectionMode | false
+		selectedIds?: string[]
+		selectedWorkspace?: string | undefined
+		activeLabel?: string | null
+		// const loadMoreQuantity: number = 100
+		lastFetchWentToEnd?: boolean
+	}
+
+	let {
+		jobs = undefined,
+		externalJobs = [],
+		omittedObscuredJobs,
+		showExternalJobs = false,
+		selectionMode = false,
+		selectedIds = $bindable([]),
+		selectedWorkspace = $bindable(undefined),
+		activeLabel = null,
+		lastFetchWentToEnd = $bindable(false)
+	}: Props = $props()
 
 	function getTime(job: Job): string | undefined {
 		return job['started_at'] ?? job['scheduled_for'] ?? job['created_at']
 	}
 
-	let containsLabel = false
-	function groupJobsByDay(jobs: Job[]): Record<string, Job[]> {
-		const groupedLogs: Record<string, Job[]> = {}
+	function groupJobsByDay(jobs: Job[]): {
+		groupedJobs: Record<string, Job[]>
+		newContainsLabel: boolean | undefined
+	} {
+		const groupedJobs: Record<string, Job[]> = {}
 
-		if (!jobs) return groupedLogs
+		if (!jobs) return { groupedJobs, newContainsLabel: undefined }
 
 		let newContainsLabel = false
 		for (const job of jobs) {
@@ -49,39 +68,32 @@
 					day: 'numeric'
 				})
 
-				if (!groupedLogs[day]) {
-					groupedLogs[day] = []
+				if (!groupedJobs[day]) {
+					groupedJobs[day] = []
 				}
 
-				groupedLogs[day].push(job)
+				groupedJobs[day].push(job)
 			}
 		}
-		containsLabel = newContainsLabel
 
-		for (const day in groupedLogs) {
-			groupedLogs[day].sort((a, b) => {
+		for (const day in groupedJobs) {
+			groupedJobs[day].sort((a, b) => {
 				return new Date(getTime(b)!).getTime() - new Date(getTime(a)!).getTime()
 			})
 		}
 
-		const sortedLogs: Record<string, Job[]> = {}
-		Object.keys(groupedLogs)
+		const sortedJobs: Record<string, Job[]> = {}
+		Object.keys(groupedJobs)
 			.sort((a, b) => {
 				return new Date(b).getTime() - new Date(a).getTime()
 			})
 			.forEach((key) => {
-				sortedLogs[key] = groupedLogs[key]
+				sortedJobs[key] = groupedJobs[key]
 			})
 
-		return sortedLogs
+		return { groupedJobs: sortedJobs, newContainsLabel }
 	}
 
-	$: groupedJobs = jobs
-		? showExternalJobs
-			? groupJobsByDay([...jobs, ...externalJobs])
-			: groupJobsByDay(jobs)
-		: undefined
-
 	type FlatJobs =
 		| {
 				type: 'date'
@@ -105,24 +117,9 @@
 		return flatJobs
 	}
 
-	$: flatJobs = groupedJobs ? flattenJobs(groupedJobs) : undefined
-
-	let stickyIndices: number[] = []
-
-	$: {
-		stickyIndices = []
-		let index = 0
-		for (const entry of flatJobs ?? []) {
-			if (entry.type === 'date') {
-				stickyIndices.push(index)
-			}
-			index++
-		}
-	}
-
-	let tableHeight: number = 0
-	let header: number = 0
-	let containerWidth: number = 0
+	let tableHeight: number = $state(0)
+	let headerHeight: number = $state(0)
+	let containerWidth: number = $state(0)
 	// const MAX_ITEMS = 1000
 
 	/*
@@ -141,7 +138,13 @@
 	}
 	*/
 
-	let allSelected: boolean = false
+	let selectableJobCount = $derived.by(() => {
+		if (!selectionMode) return 0
+		return jobs?.filter(isJobSelectable(selectionMode)).length ?? 0
+	})
+	let allSelected = $derived.by(() => {
+		return selectionMode && selectedIds.length === selectableJobCount
+	})
 
 	function selectAll() {
 		if (!selectionMode) return
@@ -153,11 +156,6 @@
 			selectedIds = jobs?.filter(isJobSelectable(selectionMode)).map((j) => j.id) ?? []
 		}
 	}
-	$: selectionMode && (allSelected = selectedIds.length === selectableJobCount)
-
-	let selectableJobCount: number = 0
-	$: selectionMode &&
-		(selectableJobCount = jobs?.filter(isJobSelectable(selectionMode)).length ?? 0)
 
 	function jobCountString(jobCount: number | undefined, lastFetchWentToEnd: boolean): string {
 		if (jobCount === undefined) {
@@ -177,7 +175,7 @@
 	})
 	const dispatch = createEventDispatcher()
 
-	let scrollToIndex = 0
+	let scrollToIndex = $state(0)
 
 	export function scrollToRun(ids: string[]) {
 		if (flatJobs && ids.length > 0) {
@@ -189,29 +187,55 @@
 			}
 		}
 	}
+	let { groupedJobs, newContainsLabel } = $derived(
+		jobs
+			? showExternalJobs
+				? groupJobsByDay([...jobs, ...externalJobs])
+				: groupJobsByDay(jobs)
+			: { groupedJobs: undefined, newContainsLabel: undefined }
+	)
+
+	let containsLabel = $state(false)
+	$effect(() => {
+		if (newContainsLabel != undefined) {
+			containsLabel = newContainsLabel
+		}
+	})
+	let flatJobs = $derived(groupedJobs ? flattenJobs(groupedJobs) : undefined)
+	let stickyIndices = $derived.by(() => {
+		const nstickyIndices: number[] = []
+		let index = 0
+		for (const entry of flatJobs ?? []) {
+			if (entry.type === 'date') {
+				nstickyIndices.push(index)
+			}
+			index++
+		}
+		return nstickyIndices
+	})
 </script>
 
-<svelte:window on:resize={() => computeHeight()} />
+<svelte:window onresize={() => computeHeight()} />
 
 <div
 	class="divide-y min-w-[640px] h-full"
 	id="runs-table-wrapper"
 	bind:clientWidth={containerWidth}
 >
-	<div bind:clientHeight={header}>
+	<div bind:clientHeight={headerHeight}>
 		{#if selectionMode && selectableJobCount}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class={twMerge(
 					'hover:bg-surface-hover bg-surface-primary cursor-pointer',
 					allSelected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 					'flex flex-row items-center sticky w-full p-2 pr-4 top-0 font-semibold border-t text-sm'
 				)}
-				on:click={selectAll}
+				onclick={selectAll}
 			>
 				<div class="px-2">
-					<input on:focus type="checkbox" checked={allSelected} />
+					<input onfocus={bubble('focus')} type="checkbox" checked={allSelected} />
 				</div>
 				Select all
 			</div>
@@ -230,10 +254,10 @@
 					{jobs ? jobCountString(jobs.length, lastFetchWentToEnd) : ''}
 					<Popover>
 						<AlertTriangle size={16} class="ml-0.5 text-yellow-500" />
-						<svelte:fragment slot="text">
+						{#snippet text()}
 							Too specific filtering may have caused the omission of obscured jobs. This is done for
 							security reasons. To see obscured jobs, try removing some filters.
-						</svelte:fragment>
+						{/snippet}
 					</Popover>
 				</div>
 			{:else}
@@ -254,7 +278,7 @@
 	{:else}
 		<VirtualList
 			width="100%"
-			height={tableHeight - header}
+			height={tableHeight - headerHeight}
 			itemCount={flatJobs?.length ?? 3}
 			itemSize={42}
 			overscanCount={20}
@@ -263,71 +287,76 @@
 			scrollToAlignment="center"
 			scrollToBehaviour="smooth"
 		>
-			<div slot="item" let:index let:style {style} class="w-full">
-				{#if flatJobs}
-					{@const jobOrDate = flatJobs[index]}
+			{#snippet header()}{/snippet}
+			{#snippet children({ index, style })}
+				<div {style} class="w-full">
+					{#if flatJobs}
+						{@const jobOrDate = flatJobs[index]}
 
-					{#if jobOrDate}
-						{#if jobOrDate?.type === 'date'}
-							<div class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-5">
-								{jobOrDate.date}
-							</div>
-						{:else}
-							<div class="flex flex-row items-center h-full w-full">
-								<RunRow
-									{containsLabel}
-									job={jobOrDate.job}
-									selected={jobOrDate.job.id !== '-' && selectedIds.includes(jobOrDate.job.id)}
-									{selectionMode}
-									on:select={() => {
-										const jobId = jobOrDate.job.id
-										if (selectionMode) {
-											if (selectedIds.includes(jobOrDate.job.id)) {
-												selectedIds = selectedIds.filter((id) => id != jobId)
+						{#if jobOrDate}
+							{#if jobOrDate?.type === 'date'}
+								<div class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-5">
+									{jobOrDate.date}
+								</div>
+							{:else}
+								<div class="flex flex-row items-center h-full w-full">
+									<RunRow
+										{containsLabel}
+										job={jobOrDate.job}
+										selected={jobOrDate.job.id !== '-' && selectedIds.includes(jobOrDate.job.id)}
+										{selectionMode}
+										on:select={() => {
+											const jobId = jobOrDate.job.id
+											if (selectionMode) {
+												if (selectedIds.includes(jobOrDate.job.id)) {
+													selectedIds = selectedIds.filter((id) => id != jobId)
+												} else {
+													selectedIds.push(jobId)
+													selectedIds = selectedIds
+												}
 											} else {
-												selectedIds.push(jobId)
-												selectedIds = selectedIds
+												selectedWorkspace = jobOrDate.job.workspace_id
+												selectedIds = [jobOrDate.job.id]
+												dispatch('select')
 											}
-										} else {
-											selectedWorkspace = jobOrDate.job.workspace_id
-											selectedIds = [jobOrDate.job.id]
-											dispatch('select')
-										}
-									}}
-									{activeLabel}
-									on:filterByLabel
-									on:filterByPath
-									on:filterByUser
-									on:filterByFolder
-									on:filterByConcurrencyKey
-									on:filterBySchedule
-									on:filterByWorker
-									{containerWidth}
-								/>
-							</div>
+										}}
+										{activeLabel}
+										on:filterByLabel
+										on:filterByPath
+										on:filterByUser
+										on:filterByFolder
+										on:filterByConcurrencyKey
+										on:filterBySchedule
+										on:filterByWorker
+										{containerWidth}
+									/>
+								</div>
+							{/if}
+						{:else}
+							{JSON.stringify(jobOrDate)}
 						{/if}
 					{:else}
-						{JSON.stringify(jobOrDate)}
+						<div class="flex flex-row items-center h-full w-full">
+							<div class="w-1/12 text-2xs">...</div>
+							<div class="w-4/12 text-xs">...</div>
+							<div class="w-4/12 text-xs">...</div>
+							<div class="w-3/12 text-xs">...</div>
+						</div>
 					{/if}
-				{:else}
-					<div class="flex flex-row items-center h-full w-full">
-						<div class="w-1/12 text-2xs">...</div>
-						<div class="w-4/12 text-xs">...</div>
-						<div class="w-4/12 text-xs">...</div>
-						<div class="w-3/12 text-xs">...</div>
-					</div>
-				{/if}
-			</div>
-			<div slot="footer"
-				>{#if !lastFetchWentToEnd && jobs && jobs.length >= 1000}
-					<button
-						class="text-xs text-blue-600 text-center w-full pb-2"
-						on:click={() => {
-							dispatch('loadExtra')
-						}}>Load next 1000 jobs</button
-					>
-				{/if}</div
-			>
+				</div>
+			{/snippet}
+			{#snippet footer()}
+				<div
+					>{#if !lastFetchWentToEnd && jobs && jobs.length >= 1000}
+						<button
+							class="text-xs text-blue-600 text-center w-full pb-2"
+							onclick={() => {
+								dispatch('loadExtra')
+							}}>Load next 1000 jobs</button
+						>
+					{/if}</div
+				>
+			{/snippet}
 		</VirtualList>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/schema/AddProperty.svelte b/frontend/src/lib/components/schema/AddProperty.svelte
index a839ca2d1c..eccf6a375d 100644
--- a/frontend/src/lib/components/schema/AddProperty.svelte
+++ b/frontend/src/lib/components/schema/AddProperty.svelte
@@ -150,7 +150,6 @@
 			} else {
 				throw Error('Argument not found!')
 			}
-			syncOrders()
 			dispatch('change', schema)
 		} catch (err) {
 			sendUserToast(`Could not delete argument: ${err}`, true)
diff --git a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
index 1dd5352614..2984d19cea 100644
--- a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
@@ -4,9 +4,14 @@
 	import { CornerDownLeft } from 'lucide-svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 
-	let name: string = ''
-	export let customName: string | undefined = undefined
-	export let disabled: boolean = false
+	let name: string = $state('')
+	interface Props {
+		customName?: string | undefined
+		disabled?: boolean
+		trigger?: import('svelte').Snippet
+	}
+
+	let { customName = undefined, disabled = false, trigger }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -14,18 +19,20 @@
 		dispatch('add', { name })
 		name = ''
 	}
+
+	const trigger_render = $derived(trigger)
 </script>
 
 <Popover closeButton={false} class="w-full" {disabled}>
-	<svelte:fragment slot="trigger">
-		<slot name="trigger" />
-	</svelte:fragment>
-	<svelte:fragment slot="content" let:close>
+	{#snippet trigger()}
+		{@render trigger_render?.()}
+	{/snippet}
+	{#snippet content({ close })}
 		<div class="flex flex-row gap-2 p-2 rounded-md">
 			<input
 				bind:value={name}
 				placeholder={`${customName ?? 'Field'} name`}
-				on:keydown={(event) => {
+				onkeydown={(event) => {
 					if (event.key === 'Enter') {
 						addField()
 						close()
@@ -48,5 +55,5 @@
 				Add {customName ? customName.toLowerCase() : 'field'}
 			</Button>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/schema/AddPropertyV2.svelte b/frontend/src/lib/components/schema/AddPropertyV2.svelte
index 90ffa86483..eb9fe56ae1 100644
--- a/frontend/src/lib/components/schema/AddPropertyV2.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyV2.svelte
@@ -8,7 +8,12 @@
 	import { emptySchema, sendUserToast } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import AddPropertyFormV2 from './AddPropertyFormV2.svelte'
-	export let schema: Schema | any = emptySchema()
+	interface Props {
+		schema?: Schema | any
+		trigger?: import('svelte').Snippet
+	}
+
+	let { schema = $bindable(emptySchema()), trigger }: Props = $props()
 
 	export const DEFAULT_PROPERTY: ModalSchemaProperty = {
 		selectedType: 'string',
@@ -104,7 +109,7 @@
 			oldArgName = undefined
 		}
 
-		schema = schema
+		schema = $state.snapshot(schema)
 
 		if (argError !== '') {
 			sendUserToast(argError, true)
@@ -137,17 +142,20 @@
 				if (modifiedObject.order) {
 					modifiedObject.order = modifiedObject.order.filter((arg) => arg !== argName)
 				}
-				schema = schema
 				dispatch('change', schema)
 			} else {
 				throw Error('Argument not found!')
 			}
 			syncOrders()
+			schema = $state.snapshot(schema)
+
 			dispatch('change', schema)
 		} catch (err) {
 			sendUserToast(`Could not delete argument: ${err}`, true)
 		}
 	}
+
+	const trigger_render = $derived(trigger)
 </script>
 
 <AddPropertyFormV2
@@ -164,7 +172,7 @@
 		}
 	}}
 >
-	<svelte:fragment slot="trigger">
-		<slot name="trigger" />
-	</svelte:fragment>
+	{#snippet trigger()}
+		{@render trigger_render?.()}
+	{/snippet}
 </AddPropertyFormV2>
diff --git a/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte b/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
index fb494d7f4d..76aa5892f9 100644
--- a/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
+++ b/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import EditableSchemaDrawer from './EditableSchemaDrawer.svelte'
 	import type { Schema } from '$lib/common'
 	import { GripVertical, Pen, Trash, Plus } from 'lucide-svelte'
 	import EditableSchemaForm from '../EditableSchemaForm.svelte'
@@ -14,23 +15,13 @@
 	import SimpleEditor from '../SimpleEditor.svelte'
 	import AddPropertyV2 from '$lib/components/schema/AddPropertyV2.svelte'
 
-	export let schema: Schema | undefined | any
-	export let parentId: string | undefined = undefined
-
 	const flipDurationMs = 200
 
 	const dispatch = createEventDispatcher()
 
-	let addProperty: AddProperty | undefined = undefined
-	let schemaFormDrawer: Drawer | undefined = undefined
-	let editableSchemaForm: EditableSchemaForm | undefined = undefined
-
-	$: items = ((schema?.order ?? Object.keys(schema?.properties ?? {}))?.map((item, index) => {
-		return { value: item, id: item }
-	}) ?? []) as Array<{
-		value: string
-		id: string
-	}>
+	let addPropertyComponent: AddProperty | undefined = $state(undefined)
+	let schemaFormDrawer: Drawer | undefined = $state(undefined)
+	let editableSchemaForm: EditableSchemaForm | undefined = $state(undefined)
 
 	function handleConsider(e) {
 		const { items: newItems } = e.detail
@@ -45,21 +36,41 @@
 
 		const keys = items.map((item) => item.value)
 
-		schema.properties = keys.reduce((acc, key) => {
-			acc[key] = schema.properties[key]
-			return acc
-		}, {})
+		schema = {
+			...schema,
+			properties: keys.reduce((acc, key) => {
+				acc[key] = schema.properties[key]
+				return acc
+			}, {}),
+			order: keys
+		}
 
-		schema.order = keys
-
-		schema = { ...schema }
 		tick().then(() => dispatch('change', schema))
 	}
 
-	export let jsonView: boolean = false
-	let schemaString: string = JSON.stringify(schema, null, '\t')
-	let editor: SimpleEditor | undefined = undefined
-	let error: string | undefined = undefined
+	interface Props {
+		schema: Schema | undefined | any
+		parentId?: string | undefined
+		jsonView?: boolean
+	}
+
+	let { schema = $bindable(), parentId = undefined, jsonView = $bindable(false) }: Props = $props()
+
+	// let schema = $state(structuredClone($state.snapshot(schema)))
+
+	let schemaString: string = $state(JSON.stringify(schema, null, '\t'))
+	let editor: SimpleEditor | undefined = $state(undefined)
+	let error: string | undefined = $state(undefined)
+	let items = $derived([
+		...new Set(
+			(schema?.order ?? Object.keys(schema?.properties ?? {}))?.map((item, index) => {
+				return { value: item, id: item }
+			}) ?? []
+		)
+	]) as Array<{
+		value: string
+		id: string
+	}>
 </script>
 
 <div class="flex flex-col items-end mb-2 w-full">
@@ -70,7 +81,7 @@
 		options={{
 			right: 'JSON editor',
 			rightTooltip:
-				'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+				'Arguments can be edited either using the wizard, or by editing their JSON schema.'
 		}}
 		lightMode
 		on:change={() => {
@@ -86,18 +97,9 @@
 			schemaString = JSON.stringify(schema, null, '\t')
 			editor?.setCode(schemaString)
 		}
-		// TODO: find out why this work.
-		// Solves a bug where adding a new field in a OneOf input in a flow did not do anything
-		//
-		// It seemed that the schema was correctly changed but then reset higher in the component
-		// tree due to the change event, as removing the dispatched removed the bug.
-		// I already spent way too long trying to figure out the chain of effects
-		setTimeout(() => {
-			dispatch('change', schema)
-		}, 0.5)
 	}}
 	bind:schema
-	bind:this={addProperty}
+	bind:this={addPropertyComponent}
 />
 
 {#if !jsonView}
@@ -108,13 +110,13 @@
 			dropTargetStyle: {},
 			type: parentId ? `app-editor-fields-${parentId}` : 'app-editor-fields'
 		}}
-		on:consider={handleConsider}
-		on:finalize={handleFinalize}
+		onconsider={handleConsider}
+		onfinalize={handleFinalize}
 		class="gap-1 flex flex-col mt-2"
 	>
 		{#if items?.length > 0}
 			{#each items as item (item.id)}
-				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 				<div
 					animate:flip={{ duration: 200 }}
 					class="w-full flex flex-col justify-between border items-center py-1 px-2 rounded-md bg-surface text-sm"
@@ -126,8 +128,8 @@
 									? ` (title: ${schema.properties?.[item.value]?.title})`
 									: ''
 							} `}
-							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
 							<div class="flex flex-row gap-1 item-center h-full justify-center">
 								<Button
 									iconOnly
@@ -135,7 +137,7 @@
 									color="light"
 									startIcon={{ icon: Trash }}
 									on:click={() => {
-										addProperty?.handleDeleteArgument([item.value])
+										addPropertyComponent?.handleDeleteArgument([item.value])
 									}}
 								/>
 								<Button
@@ -161,9 +163,9 @@
 						{#if schema.properties[item.value]?.type === 'object' && !(schema.properties[item.value].oneOf && schema.properties[item.value].oneOf.length >= 2)}
 							<div class="flex flex-col w-full mt-2">
 								<Label label="Nested properties">
-									<svelte:self
+									<EditableSchemaDrawer
 										on:change={() => {
-											schema = schema
+											schema = $state.snapshot(schema)
 											dispatch('change', schema)
 										}}
 										bind:schema={schema.properties[item.value]}
@@ -183,36 +185,40 @@
 	<Drawer bind:this={schemaFormDrawer} size="1200px">
 		<DrawerContent title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
 			<EditableSchemaForm
-				on:change
+				on:change={(e) => {
+					schema = $state.snapshot(schema)
+					dispatch('change', schema)
+				}}
 				bind:this={editableSchemaForm}
 				bind:schema
 				isAppInput
 				on:edit={(e) => {
-					addProperty?.openDrawer(e.detail)
+					addPropertyComponent?.openDrawer(e.detail)
 				}}
 				on:delete={(e) => {
-					addProperty?.handleDeleteArgument([e.detail])
+					addPropertyComponent?.handleDeleteArgument([e.detail])
 				}}
 				dndType="drawer"
 				editTab="inputEditor"
 			>
-				<svelte:fragment slot="addProperty">
+				{#snippet addProperty()}
 					<AddPropertyV2
 						bind:schema
 						on:change
 						on:addNew={(e) => {
+							schema = $state.snapshot(schema)
 							editableSchemaForm?.openField(e.detail)
 						}}
 					>
-						<svelte:fragment slot="trigger">
+						{#snippet trigger()}
 							<div
 								class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
 							>
 								<Plus size={14} />
 							</div>
-						</svelte:fragment>
+						{/snippet}
 					</AddPropertyV2>
-				</svelte:fragment>
+				{/snippet}
 			</EditableSchemaForm>
 		</DrawerContent>
 	</Drawer>
diff --git a/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte b/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
index 7d80adc87a..0b83b461a7 100644
--- a/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
+++ b/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
@@ -5,29 +5,44 @@
 	import { createEventDispatcher } from 'svelte'
 	import Toggle from '../Toggle.svelte'
 	import { emptySchema, validateFileExtension } from '$lib/utils'
-	import AutoComplete from 'simple-svelte-autocomplete'
 	import { Alert } from '../common'
 	import AddPropertyV2 from '$lib/components/schema/AddPropertyV2.svelte'
 	import { Plus } from 'lucide-svelte'
+	import Select from '../Select.svelte'
 
-	export let schema: Schema | undefined | any
-	export let uiOnly: boolean = false
-	export let noPreview: boolean = false
-	export let fullHeight: boolean = true
-	export let formatExtension: string | undefined = undefined
+	interface Props {
+		schema: Schema | undefined | any
+		uiOnly?: boolean
+		noPreview?: boolean
+		fullHeight?: boolean
+		formatExtension?: string | undefined
+	}
 
-	let resourceIsTextFile: boolean = false
-	let addProperty: AddPropertyV2 | undefined = undefined
-	let editableSchemaForm: EditableSchemaForm | undefined = undefined
+	let {
+		schema = $bindable(),
+		uiOnly = false,
+		noPreview = false,
+		fullHeight = true,
+		formatExtension = $bindable(undefined)
+	}: Props = $props()
+
+	let resourceIsTextFile: boolean = $state(false)
+	let addPropertyComponent: AddPropertyV2 | undefined = $state(undefined)
+	let editableSchemaForm: EditableSchemaForm | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
 
-	$: !resourceIsTextFile && (formatExtension = undefined)
+	$effect(() => {
+		if (!resourceIsTextFile && formatExtension !== undefined) {
+			formatExtension = undefined
+		}
+	})
 
-	$: invalidExtension =
+	let invalidExtension = $derived(
 		formatExtension && formatExtension != ''
 			? !validateFileExtension(formatExtension ?? 'txt')
 			: false
+	)
 
 	function switchResourceIsFile() {
 		if (!resourceIsTextFile) {
@@ -47,22 +62,7 @@
 		dispatch('change', schema)
 	}
 
-	function numberOfMatches(listItem: string | undefined, searchWords: string[]): number {
-		if (!listItem) {
-			return 0
-		}
-
-		let matches = 0
-		searchWords.forEach((searchWord) => {
-			const searchLetters = searchWord.split('')
-			if (searchLetters.every((l) => listItem.includes(l))) {
-				matches++
-			}
-		})
-		return matches
-	}
-
-	let suggestedFileExtensions = [
+	let suggestedFileExtensions = $state([
 		'json',
 		'yaml',
 		'jinja',
@@ -73,8 +73,7 @@
 		'html',
 		'xml',
 		'yml'
-	]
-	let autocompleteExtension = true
+	])
 </script>
 
 {#if !resourceIsTextFile}
@@ -88,19 +87,19 @@
 		{#if noPreview}
 			<AddPropertyV2
 				bind:schema
-				bind:this={addProperty}
+				bind:this={addPropertyComponent}
 				on:change={() => dispatch('change', schema)}
 				on:addNew={(e) => {
 					editableSchemaForm?.openField(e.detail)
 				}}
 			>
-				<svelte:fragment slot="trigger">
+				{#snippet trigger()}
 					<div
 						class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
 					>
 						<Plus size={14} />
 					</div>
-				</svelte:fragment>
+				{/snippet}
 			</AddPropertyV2>
 		{/if}
 		<EditableSchemaForm
@@ -110,85 +109,48 @@
 			on:change={() => dispatch('change', schema)}
 			isFlowInput
 			on:edit={(e) => {
-				addProperty?.openDrawer(e.detail)
+				addPropertyComponent?.openDrawer(e.detail)
 			}}
 			on:delete={(e) => {
-				addProperty?.handleDeleteArgument([e.detail])
+				addPropertyComponent?.handleDeleteArgument([e.detail])
 			}}
 			{uiOnly}
 			{noPreview}
 			editTab="inputEditor"
 		>
-			<svelte:fragment slot="addProperty">
+			{#snippet addProperty()}
 				{#if !noPreview}
 					<AddPropertyV2
 						bind:schema
-						bind:this={addProperty}
+						bind:this={addPropertyComponent}
 						on:change={() => dispatch('change', schema)}
 					>
-						<svelte:fragment slot="trigger">
+						{#snippet trigger()}
 							<div
 								class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
 							>
 								<Plus size={14} />
 							</div>
-						</svelte:fragment>
+						{/snippet}
 					</AddPropertyV2>
 				{/if}
-			</svelte:fragment>
+			{/snippet}
 		</EditableSchemaForm>
 	</div>
 {/if}
 {#if resourceIsTextFile}
-	<div class="flex items-center space-x-2 w-5/12">
-		<label for="format-extension" class="text-base font-medium whitespace-nowrap">
-			File extension{autocompleteExtension ? '' : ' (free text)'}:
-		</label>
-		{#if autocompleteExtension}
-			<AutoComplete
-				inputId="format-extension"
-				autofocus={true}
-				items={[...suggestedFileExtensions, 'Choose another extension']}
-				onChange={(a) => {
-					if (a == 'Choose another extension') {
-						formatExtension = ''
-						autocompleteExtension = false
-					}
-				}}
-				itemFilterFunction={(listItem, searchWords) => {
-					if (searchWords.length == 0 || listItem === 'Choose another extension') {
-						return true
-					}
-					return numberOfMatches(listItem, searchWords) > 0
-				}}
-				noResultsText="No matches, try the 'Choose another extension' option"
-				bind:selectedItem={formatExtension}
-				inputClassName="!h-[32px] py-1 !text-xs !w-64"
-				hideArrow
-				className={'!font-bold'}
-				dropdownClassName="!font-normal !w-64 !max-w-64"
-				maxItemsToShowInList={8}
-				moreItemsText={null}
-				lock={true}
-			/>
-		{:else}
-			<!-- svelte-ignore a11y-autofocus -->
-			<input
-				autofocus={true}
-				bind:value={formatExtension}
-				class="!h-[32px] py-1 !text-xs !w-64"
-				placeholder="Enter your extension"
-				on:keydown={(event) => {
-					if (event.key === 'Enter') {
-						if (formatExtension && !suggestedFileExtensions.includes(formatExtension))
-							suggestedFileExtensions.push(formatExtension)
-
-						autocompleteExtension = true
-					}
-				}}
-			/>
-		{/if}
-	</div>
+	<label
+		for="format-extension"
+		class="text-base font-medium whitespace-nowrap flex items-center gap-4"
+	>
+		File extension :
+		<Select
+			autofocus
+			items={suggestedFileExtensions.map((e) => ({ value: e, label: e }))}
+			bind:value={formatExtension}
+			onCreateItem={(ext) => ((formatExtension = ext), suggestedFileExtensions.push(ext))}
+		/>
+	</label>
 
 	{#if invalidExtension}
 		<Alert title="Invalid file extension" type="error">
diff --git a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
index 1ef4606ab1..7d8aca4218 100644
--- a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
@@ -17,83 +17,65 @@
 	import Button from '../common/button/Button.svelte'
 	import { Pen, Plus, Trash2 } from 'lucide-svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
-	import { deepEqual } from 'fast-equals'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let format: string | undefined = undefined
-	export let contentEncoding: 'base64' | 'binary' | undefined = undefined
-	export let type: string | undefined = undefined
-	export let oneOf: SchemaProperty[] | undefined = undefined
-	export let required = false
-	export let pattern: undefined | string = undefined
-	export let password: undefined | boolean = undefined
-	export let variableEditor: VariableEditor | undefined = undefined
-	export let itemPicker: ItemPicker | undefined = undefined
-	export let nullable: boolean | undefined = undefined
-	export let disabled: boolean | undefined = undefined
-	export let defaultValue: any = undefined
-	export let propsNames: any = []
-	export let showExpr: string | undefined = undefined
-	export let extra: Record<string, any> = {}
-	export let customErrorMessage: string | undefined = undefined
-	export let itemsType:
-		| {
-				type?: 'string' | 'number' | 'bytes' | 'object'
-				contentEncoding?: 'base64'
-				enum?: string[]
-				multiselect?: string[]
-		  }
-		| undefined = undefined
-	export let properties: Record<string, any> | undefined = undefined
-	export let order: string[] | undefined = undefined
-	export let requiredProperty: string[] | undefined = undefined
-	export let displayWebhookWarning: boolean = true
-
-	function getOneOfWithoutLabel(oneOf: SchemaProperty[]) {
-		return oneOf.map((v) => ({
-			...v,
-			properties: Object.fromEntries(
-				Object.entries(v.properties ?? {}).filter(([k, v]) => k !== 'label' && k !== 'kind')
-			)
-		}))
+	interface Props {
+		format?: string | undefined
+		contentEncoding?: 'base64' | 'binary' | undefined
+		type?: string | undefined
+		oneOf?: SchemaProperty[] | undefined
+		required?: boolean
+		pattern?: undefined | string
+		password?: undefined | boolean
+		variableEditor?: VariableEditor | undefined
+		itemPicker?: ItemPicker | undefined
+		nullable?: boolean | undefined
+		disabled?: boolean | undefined
+		defaultValue?: any
+		propsNames?: any
+		showExpr?: string | undefined
+		extra?: Record<string, any>
+		customErrorMessage?: string | undefined
+		itemsType?:
+			| {
+					type?: 'string' | 'number' | 'bytes' | 'object'
+					contentEncoding?: 'base64'
+					enum?: string[]
+					multiselect?: string[]
+			  }
+			| undefined
+		properties?: Record<string, any> | undefined
+		order?: string[] | undefined
+		requiredProperty?: string[] | undefined
+		displayWebhookWarning?: boolean
 	}
 
-	let oneOfSelected: string | undefined = undefined
-	function oneOfUpdate(oneOf: SchemaProperty[] | undefined) {
-		if (oneOf && oneOf.length >= 2) {
-			if (!oneOfSelected) {
-				oneOfSelected = oneOf[0].title
-			}
+	let {
+		format = $bindable(undefined),
+		contentEncoding = undefined,
+		type = undefined,
+		oneOf = $bindable(undefined),
+		required = false,
+		pattern = undefined,
+		password = undefined,
+		variableEditor = undefined,
+		itemPicker = undefined,
+		nullable = $bindable(undefined),
+		disabled = $bindable(undefined),
+		defaultValue = $bindable(undefined),
+		propsNames = [],
+		showExpr = $bindable(undefined),
+		extra = {},
+		customErrorMessage = undefined,
+		itemsType = undefined,
+		properties = $bindable(undefined),
+		order = $bindable(undefined),
+		requiredProperty = $bindable(undefined),
+		displayWebhookWarning = true
+	}: Props = $props()
 
-			if (
-				!schema.oneOf ||
-				!deepEqual(
-					oneOf.map((v) => [v.title, v.order]),
-					schema.oneOf.map((v) => [v.title, v.order])
-				)
-			) {
-				// update schema if not exists or order changed
-				schema.oneOf = getOneOfWithoutLabel(oneOf)
-				schema = schema
-			}
-		} else if (!oneOf) {
-			schema.oneOf = undefined
-			schema = schema
-		}
-	}
-	$: oneOfUpdate(oneOf)
-
-	function orderUpdate(order) {
-		if (order && !deepEqual(order, schema.order)) {
-			// update from external reordering
-			schema.order = order
-			schema = schema
-		}
-	}
-	$: orderUpdate(order)
+	let oneOfSelected: string | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
 	function getResourceTypesFromFormat(format: string | undefined): string[] {
 		if (format?.startsWith('resource-')) {
@@ -103,58 +85,16 @@
 		return []
 	}
 
-	let schema = {
-		properties,
-		order,
-		required: requiredProperty,
-		oneOf: oneOf ? getOneOfWithoutLabel(oneOf) : undefined
-	}
-
-	function schemaUpdate(changedSchema: typeof schema) {
-		if (
-			!deepEqual(changedSchema, {
-				properties,
-				order,
-				required: requiredProperty,
-				oneOf: oneOf ? getOneOfWithoutLabel(oneOf) : undefined
-			})
-		) {
-			properties = structuredClone(changedSchema.properties)
-			order = structuredClone(changedSchema.order)
-			requiredProperty = structuredClone(changedSchema.required)
-
-			const tagKey = oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
-				? 'kind'
-				: 'label'
-
-			oneOf = changedSchema.oneOf?.map((v) => {
-				return {
-					...v,
-					properties: {
-						...(v.properties ?? {}),
-						[tagKey]: {
-							type: 'string',
-							enum: [v.title ?? '']
-						}
-					}
-				}
-			})
-			dispatchIfMounted('schemaChange', { properties, order, requiredProperty, oneOf })
-		}
-	}
-
-	$: schemaUpdate(schema)
-
-	let variantName = ''
+	let variantName = $state('')
 	function createVariant(name: string) {
-		if (schema.oneOf) {
-			if (schema.oneOf.some((obj) => obj.title === name)) {
+		if (oneOf) {
+			if (oneOf.some((obj) => obj.title === name)) {
 				throw new Error('Variant name already exists')
 			}
-			const idx = schema.oneOf.findIndex((obj) => obj.title === name)
+			const idx = oneOf.findIndex((obj) => obj.title === name)
 			if (idx === -1) {
-				schema.oneOf = [
-					...schema.oneOf,
+				oneOf = [
+					...oneOf,
 					{
 						title: name,
 						type: 'object',
@@ -168,47 +108,49 @@
 	}
 
 	function renameVariant(name: string, selected: string) {
-		if (schema.oneOf) {
-			if (schema.oneOf.some((obj) => obj.title === name)) {
+		if (oneOf) {
+			if (oneOf.some((obj) => obj.title === name)) {
 				throw new Error('Variant name already exists')
 			}
-			const idx = schema.oneOf.findIndex((obj) => obj.title === selected)
+			const idx = oneOf.findIndex((obj) => obj.title === selected)
 			if (idx !== -1) {
-				schema.oneOf[idx].title = name
+				oneOf[idx].title = name
 				oneOfSelected = name
 			}
 			variantName = ''
 		}
 	}
 
-	let initialObjectSelected =
-		Object.keys(schema?.properties ?? {}).length == 0 ? 'resource' : 'custom-object'
+	let initialObjectSelected = $state(
+		Object.keys(properties ?? {}).length == 0 ? 'resource' : 'custom-object'
+	)
 </script>
 
 <div class="flex flex-col gap-2">
-	{#if type === 'object' && schema.oneOf && schema.oneOf.length >= 2}
+	{#if type === 'object' && oneOf && oneOf.length >= 2}
 		<div class="flex flex-row gap-1 items-center justify-start">
 			<ToggleButtonGroup
 				bind:selected={oneOfSelected}
 				class="h-auto w-auto"
 				tabListClass="flex-wrap"
-				let:item
 			>
-				{#each schema.oneOf as obj}
-					<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
-				{/each}
+				{#snippet children({ item })}
+					{#each oneOf ?? [] as obj}
+						<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
+					{/each}
+				{/snippet}
 			</ToggleButtonGroup>
 
 			<Popover placement="bottom-end" closeButton>
-				<svelte:fragment slot="trigger">
+				{#snippet trigger()}
 					<Button size="xs2" color="light" nonCaptureEvent startIcon={{ icon: Plus }} />
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
+				{/snippet}
+				{#snippet content({ close })}
 					<Label label="Label" class="p-2 flex flex-col gap-2">
 						<input
 							type="text"
 							class="w-full !bg-surface"
-							on:keydown={(event) => {
+							onkeydown={(event) => {
 								if (event.key === 'Enter') {
 									createVariant(variantName)
 									close()
@@ -229,7 +171,7 @@
 							Add
 						</Button>
 					</Label>
-				</svelte:fragment>
+				{/snippet}
 			</Popover>
 		</div>
 		<div class="flex flex-row gap-2 items-center">
@@ -240,7 +182,7 @@
 				containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 				closeButton
 			>
-				<svelte:fragment slot="trigger">
+				{#snippet trigger()}
 					<Button
 						size="xs2"
 						color="light"
@@ -253,13 +195,13 @@
 							}
 						}}
 					/>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
+				{/snippet}
+				{#snippet content({ close })}
 					<Label label="Label" class="p-2 flex flex-col gap-2">
 						<input
 							type="text"
 							class="w-full !bg-surface"
-							on:keydown={(event) => {
+							onkeydown={(event) => {
 								if (event.key === 'Enter') {
 									if (oneOfSelected) {
 										renameVariant(variantName, oneOfSelected)
@@ -284,27 +226,59 @@
 							Rename
 						</Button>
 					</Label>
-				</svelte:fragment>
+				{/snippet}
 			</Popover>
 			<Button
 				size="xs2"
 				color="red"
 				startIcon={{ icon: Trash2 }}
 				iconOnly
-				disabled={schema.oneOf.length <= 2}
+				disabled={(oneOf?.length ?? 0) <= 2}
 				on:click={() => {
-					if (schema.oneOf && oneOfSelected) {
-						const idx = schema.oneOf.findIndex((obj) => obj.title === oneOfSelected)
-						schema.oneOf = schema.oneOf.filter((_, i) => i !== idx)
-						oneOfSelected = schema.oneOf[0].title
+					if (oneOf && oneOfSelected) {
+						const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)
+						oneOf = oneOf.filter((_, i) => i !== idx)
+						oneOfSelected = oneOf[0].title
 					}
 				}}
 			/>
 		</div>
-		{#if oneOfSelected && schema.oneOf}
-			{@const idx = schema.oneOf.findIndex((obj) => obj.title === oneOfSelected)}
+		{#if oneOfSelected && oneOf}
+			{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
 			<EditableSchemaDrawer
-				bind:schema={schema.oneOf[idx]}
+				bind:schema={
+					() => {
+						if (oneOf?.[idx]) {
+							return {
+								...oneOf[idx],
+								properties: Object.fromEntries(
+									Object.entries(oneOf[idx].properties ?? {}).filter(
+										([k]) => k !== 'label' && k !== 'kind'
+									)
+								)
+							}
+						}
+					},
+					(v) => {
+						if (oneOf?.[idx]) {
+							const tagKey = oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
+								? 'kind'
+								: 'label'
+
+							oneOf[idx] = {
+								...(v ?? {}),
+								type: 'object',
+								properties: {
+									...(v?.properties ?? {}),
+									[tagKey]: {
+										type: 'string',
+										enum: [v?.title ?? '']
+									}
+								}
+							}
+						}
+					}
+				}
 				on:change={() => {
 					dispatch('schemaChange')
 				}}
@@ -321,17 +295,33 @@
 		>
 			<Tab value="resource">Resource</Tab>
 			<Tab value="custom-object">Custom Object</Tab>
-			<svelte:fragment slot="content">
+			{#snippet content()}
 				<div class="pt-2">
 					<TabContent value="custom-object">
-						<EditableSchemaDrawer bind:schema on:change={() => dispatch('schemaChange')} />
+						<EditableSchemaDrawer
+							bind:schema={
+								() => {
+									return {
+										properties: properties,
+										order: order,
+										required: requiredProperty
+									}
+								},
+								(v) => {
+									properties = v.properties
+									order = v.order
+									requiredProperty = v.required
+									dispatch('schemaChange')
+								}
+							}
+						/>
 					</TabContent>
 
 					<TabContent value="resource">
 						<ObjectTypeNarrowing on:change={() => dispatch('schemaChange')} bind:format />
 					</TabContent>
 				</div>
-			</svelte:fragment>
+			{/snippet}
 		</Tabs>
 	{/if}
 
diff --git a/frontend/src/lib/components/schema/InputSelectedBadge.svelte b/frontend/src/lib/components/schema/InputSelectedBadge.svelte
index 9538fffc95..7abadf14fd 100644
--- a/frontend/src/lib/components/schema/InputSelectedBadge.svelte
+++ b/frontend/src/lib/components/schema/InputSelectedBadge.svelte
@@ -3,28 +3,46 @@
 	import { twMerge } from 'tailwind-merge'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { X } from 'lucide-svelte'
+	import type { Snippet } from 'svelte'
 
-	export let inputSelected: 'history' | 'captures' | 'saved' | undefined = undefined
+	interface Props {
+		inputSelected: 'history' | 'captures' | 'saved' | 'ai' | undefined
+		labelColor?: string
+		className?: string
+		acceptButton?: Snippet
+		onReject: () => void
+	}
+
+	let { inputSelected, className = '', acceptButton, onReject, labelColor = '' }: Props = $props()
 </script>
 
 <div class="min-h-[38px]">
 	<div
-		class="rounded-md flex flex-row gap-2 items-center py-1 px-2 w-fit {classes['info']
-			.bgClass} {inputSelected ? '' : 'hidden'}"
+		class={twMerge(
+			'rounded-md flex flex-row gap-2 items-center py-1 px-2 w-fit',
+			classes['info'].bgClass,
+			inputSelected ? '' : 'hidden',
+			className
+		)}
 	>
-		<p class={twMerge(classes['info'].descriptionClass, 'text-xs px-2')}>
+		<p class={twMerge(classes['info'].descriptionClass, 'text-xs px-2', labelColor)}>
 			Using {inputSelected === 'history'
 				? 'historic'
 				: inputSelected === 'captures'
-				? 'captures'
-				: 'saved'} input arguments
+					? 'captures'
+					: inputSelected === 'ai'
+						? 'AI generated'
+						: 'saved'} input arguments
 		</p>
+		{#if acceptButton}
+			{@render acceptButton()}
+		{/if}
 		<Button
 			color="light"
 			size="xs2"
 			startIcon={{ icon: X }}
 			shortCut={{ key: 'esc', withoutModifier: true }}
-			on:click
+			on:click={onReject}
 		/>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/schema/JobSchemaPicker.svelte b/frontend/src/lib/components/schema/JobSchemaPicker.svelte
index e074c69a67..115d442e5a 100644
--- a/frontend/src/lib/components/schema/JobSchemaPicker.svelte
+++ b/frontend/src/lib/components/schema/JobSchemaPicker.svelte
@@ -4,13 +4,25 @@
 	import { ExternalLink } from 'lucide-svelte'
 	import { base } from '$lib/base'
 
-	export let job: any
-	export let payloadData: any | undefined = undefined
-	export let hovering = false
-	export let showAuthor = false
-	export let placement: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end' = 'bottom-start'
-	export let viewerOpen = false
-	export let limitPayloadSize = false
+	interface Props {
+		job: any
+		payloadData?: any | undefined
+		hovering?: boolean
+		showAuthor?: boolean
+		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
+		viewerOpen?: boolean
+		limitPayloadSize?: boolean
+	}
+
+	let {
+		job,
+		payloadData = undefined,
+		hovering = false,
+		showAuthor = false,
+		placement = 'bottom-start',
+		viewerOpen = false,
+		limitPayloadSize = false
+	}: Props = $props()
 </script>
 
 <SchemaPickerRow
@@ -22,15 +34,15 @@
 	on:openChange
 	{limitPayloadSize}
 >
-	<svelte:fragment slot="start">
+	{#snippet start()}
 		<div class="center-center">
 			<div
 				class="rounded-full w-2 h-2 {job.success ? 'bg-green-400' : 'bg-red-400'}"
 				title={job.success ? 'Success' : 'Failed'}
 			></div>
 		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="extra">
+	{/snippet}
+	{#snippet extra()}
 		<div class="flex flex-row gap-2">
 			{#if showAuthor}
 				<span class="text-secondary px-2 w-28 truncate" title={job.created_by}>
@@ -48,5 +60,5 @@
 				</a>
 			</div>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </SchemaPickerRow>
diff --git a/frontend/src/lib/components/schema/PropertyEditor.svelte b/frontend/src/lib/components/schema/PropertyEditor.svelte
index 6fa69f64dd..cf02d80fb0 100644
--- a/frontend/src/lib/components/schema/PropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/PropertyEditor.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import autosize from '$lib/autosize'
 	import { shouldDisplayPlaceholder } from '$lib/utils'
 	import { twMerge } from 'tailwind-merge'
@@ -14,42 +16,75 @@
 	import type { SchemaProperty } from '$lib/common'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
-	import { createEventDispatcher, onMount } from 'svelte'
+	import { createEventDispatcher, onMount, untrack } from 'svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let description: string = ''
-	export let format: string | undefined = undefined
-	export let contentEncoding: 'base64' | 'binary' | undefined = undefined
-	export let type: string | undefined = undefined
-	export let oneOf: SchemaProperty[] | undefined = undefined
-	export let pattern: undefined | string = undefined
-	export let enum_: EnumType = undefined
-	export let extra: Record<string, any> = {}
-	export let minW = true
-	export let customErrorMessage: string | undefined = undefined
-	export let title: string | undefined = undefined
-	export let placeholder: string | undefined = undefined
-	export let properties: Record<string, any> | undefined = undefined
-	export let isFlowInput: boolean = false
-	export let isAppInput: boolean = false
-	export let order: string[] | undefined = undefined
-	export let itemsType:
-		| {
-				type?: 'string' | 'number' | 'bytes' | 'object' | 'resource'
-				contentEncoding?: 'base64'
-				enum?: string[]
-				resourceType?: string
-				multiselect?: string[]
-		  }
-		| undefined = undefined
+	interface Props {
+		description?: string
+		format?: string | undefined
+		contentEncoding?: 'base64' | 'binary' | undefined
+		type?: string | undefined
+		oneOf?: SchemaProperty[] | undefined
+		pattern?: undefined | string
+		enum_?: EnumType
+		extra?: Record<string, any>
+		minW?: boolean
+		customErrorMessage?: string | undefined
+		title?: string | undefined
+		placeholder?: string | undefined
+		properties?: Record<string, any> | undefined
+		isFlowInput?: boolean
+		isAppInput?: boolean
+		order?: string[] | undefined
+		itemsType?:
+			| {
+					type?: 'string' | 'number' | 'bytes' | 'object' | 'resource'
+					contentEncoding?: 'base64'
+					enum?: string[]
+					resourceType?: string
+					multiselect?: string[]
+			  }
+			| undefined
+		typeeditor?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		description = $bindable(undefined),
+		format = $bindable(undefined),
+		contentEncoding = $bindable(undefined),
+		type = undefined,
+		oneOf = $bindable(),
+		pattern = $bindable(undefined),
+		enum_ = $bindable(undefined),
+		extra = $bindable({}),
+		minW = true,
+		customErrorMessage = $bindable(undefined),
+		title = $bindable(undefined),
+		placeholder = $bindable(undefined),
+		properties = $bindable(),
+		isFlowInput = false,
+		isAppInput = false,
+		order = $bindable(),
+		itemsType = $bindable(undefined),
+		typeeditor,
+		children
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (description == undefined) {
+			description = ''
+		}
+	})
 
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 	let el: HTMLTextAreaElement | undefined = undefined
 
-	let oneOfSelected: string | undefined =
+	let oneOfSelected: string | undefined = $state(
 		(oneOf && oneOf.length >= 2 && oneOf[0]['title']) || undefined
-	let oneOfSchemas: any[] | undefined = undefined
+	)
+	let oneOfSchemas: any[] | undefined = $state(undefined)
 	function updateOneOfSchemas(oneOf: SchemaProperty[] | undefined) {
 		if (oneOf && oneOf.length >= 2) {
 			oneOfSchemas = oneOf.map((obj) => {
@@ -64,7 +99,6 @@
 			})
 		}
 	}
-	$: updateOneOfSchemas(oneOf)
 
 	export function focus() {
 		el?.focus()
@@ -81,14 +115,18 @@
 		e.stopPropagation()
 	}
 
-	let schema = {
+	let schema = $state({
 		properties,
 		order
-	}
+	})
 
-	let initialExtra: any = structuredClone({ order: undefined, properties: undefined, ...extra })
+	let initialExtra: any = structuredClone({
+		order: undefined,
+		properties: undefined,
+		...$state.snapshot(extra)
+	})
 
-	let mounted = false
+	let mounted = $state(false)
 	let firstOnContentChange = true
 	onMount(() => {
 		setTimeout(() => {
@@ -96,22 +134,18 @@
 		}, 500)
 	})
 
-	$: extra && mounted && onContentChange()
-
 	function onContentChange() {
 		if (firstOnContentChange) {
 			firstOnContentChange = false
 			return
 		}
 		if (!deepEqual(extra, initialExtra)) {
-			initialExtra = structuredClone(extra)
+			initialExtra = structuredClone($state.snapshot(extra))
 			console.debug('property content updated')
 			dispatchIfMounted('change')
 		}
 	}
 
-	$: (properties || order) && updateSchema()
-
 	function updateSchema() {
 		if (!deepEqual(schema.properties, properties) || !deepEqual(schema.order, order)) {
 			schema = {
@@ -122,43 +156,59 @@
 			dispatchIfMounted('change')
 		}
 	}
+	$effect(() => {
+		;[oneOf]
+		untrack(() => updateOneOfSchemas(oneOf))
+	})
+	run(() => {
+		extra && mounted && untrack(() => onContentChange())
+	})
+	run(() => {
+		;(properties || order) && untrack(() => updateSchema())
+	})
 </script>
 
 <div class="flex flex-row items-center justify-between w-full gap-2">
-	<!-- svelte-ignore a11y-autofocus -->
+	<!-- svelte-ignore a11y_autofocus -->
 	<div class={twMerge('flex flex-col w-full', 'gap-4', minW ? 'min-w-[250px]' : '')}>
-		<slot name="typeeditor" />
+		{@render typeeditor?.()}
 
 		<Label label="Description">
 			<textarea
 				use:autosize
 				rows="2"
 				bind:value={description}
-				on:keydown={onKeyDown}
+				onkeydown={onKeyDown}
+				onchange={() => dispatch('change')}
 				placeholder="Field description"
 			></textarea>
 		</Label>
 
 		<Label label="Custom title" class="w-full">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light>Will be displayed in the UI instead of the field name.</Tooltip>
-			</svelte:fragment>
-			<input bind:value={title} on:keydown={onKeyDown} placeholder="Field title" />
+			{/snippet}
+			<input
+				bind:value={title}
+				onchange={() => dispatch('change')}
+				onkeydown={onKeyDown}
+				placeholder="Field title"
+			/>
 		</Label>
 
 		<Label label="Placeholder">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light>
 					Will be displayed in the input field when the field is empty. If not set, the default
 					value will be used. The placeholder is disabled depending on the field type, format, etc.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 
 			<textarea
 				placeholder="Enter a placeholder"
 				rows="1"
 				bind:value={placeholder}
-				on:change={() => dispatch('change')}
+				onchange={() => dispatch('change')}
 				disabled={!shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
 			></textarea>
 		</Label>
@@ -197,10 +247,12 @@
 								bind:currencyLocale={extra['currencyLocale']}
 							/>
 						{:else if type == 'object' && oneOf && oneOf.length >= 2 && !isFlowInput && !isAppInput}
-							<ToggleButtonGroup bind:selected={oneOfSelected} class="mb-2" let:item>
-								{#each oneOf as obj}
-									<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
-								{/each}
+							<ToggleButtonGroup bind:selected={oneOfSelected} class="mb-2">
+								{#snippet children({ item })}
+									{#each oneOf as obj}
+										<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
+									{/each}
+								{/snippet}
 							</ToggleButtonGroup>
 							{#if oneOfSelected && oneOfSchemas}
 								{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
@@ -236,7 +288,7 @@
 			</div>
 		{/if}
 
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 
diff --git a/frontend/src/lib/components/schema/SchemaFormDND.svelte b/frontend/src/lib/components/schema/SchemaFormDND.svelte
index f4adaa1dc8..e21479163a 100644
--- a/frontend/src/lib/components/schema/SchemaFormDND.svelte
+++ b/frontend/src/lib/components/schema/SchemaFormDND.svelte
@@ -1,34 +1,58 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { dragHandle } from '@windmill-labs/svelte-dnd-action'
 	import SchemaForm from '../SchemaForm.svelte'
 	import { GripVertical } from 'lucide-svelte'
 	import type { Schema } from '$lib/common'
 	import { deepEqual } from 'fast-equals'
-	import type { SchemaDiff } from '$lib/components/schema/schemaUtils'
-	export let dndType: string | undefined = undefined
-	export let schema: Schema
-	export let args: Record<string, any> = {}
-	export let prettifyHeader: boolean = false
-	export let onlyMaskPassword: boolean = false
-	export let disablePortal: boolean = false
-	export let disabled: boolean = false
-	export let hiddenArgs: string[] = []
-	export let nestedParent: { label: string; nestedParent: any | undefined } | undefined = undefined
-	export let disableDnd: boolean = false
-	export let shouldDispatchChanges: boolean = false
-	export let diff: Record<string, SchemaDiff> = {}
-	export let nestedClasses = ''
-	export let isValid: boolean = true
-	export let noVariablePicker: boolean = false
+	import type { SchemaDiff } from '$lib/components/schema/schemaUtils.svelte'
+	interface Props {
+		dndType?: string | undefined
+		schema: Schema
+		args?: Record<string, any>
+		prettifyHeader?: boolean
+		onlyMaskPassword?: boolean
+		disablePortal?: boolean
+		disabled?: boolean
+		hiddenArgs?: string[]
+		nestedParent?: { label: string; nestedParent: any | undefined } | undefined
+		disableDnd?: boolean
+		shouldDispatchChanges?: boolean
+		diff?: Record<string, SchemaDiff>
+		nestedClasses?: string
+		isValid?: boolean
+		noVariablePicker?: boolean
+	}
 
+	let {
+		dndType = undefined,
+		schema = $bindable(),
+		args = $bindable(undefined),
+		prettifyHeader = false,
+		onlyMaskPassword = false,
+		disablePortal = false,
+		disabled = false,
+		hiddenArgs = [],
+		nestedParent = undefined,
+		disableDnd = false,
+		shouldDispatchChanges = false,
+		diff = {},
+		nestedClasses = '',
+		isValid = $bindable(true),
+		noVariablePicker = false
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (args == undefined) {
+			args = {}
+		}
+	})
 	const dispatch = createEventDispatcher()
 	const flipDurationMs = 200
 
-	let items = computeItems()
+	let items = $state(computeItems())
 
-	let dragDisabled = true
-	$: schema && dragDisabled && updateItems()
+	let dragDisabled = $state(true)
 
 	function computeItems() {
 		return (
@@ -49,7 +73,6 @@
 	function handleConsider(e) {
 		dragDisabled = false
 		const { items: newItems } = e.detail
-
 		items = newItems
 	}
 
@@ -59,18 +82,22 @@
 		dragDisabled = true
 		items = newItems
 
-		dispatch(
-			'reorder',
-			items.map((item) => item.value)
-		)
+		const newOrder = items.map((item) => item.value)
+		// console.log('handleFinalize', newOrder, e.detail)
+		dispatch('reorder', newOrder)
 	}
+	$effect(() => {
+		schema && dragDisabled && untrack(() => updateItems())
+	})
 </script>
 
+<!-- <pre class="text-xs">3 {JSON.stringify(schema, null, 2)}</pre> -->
 <!-- {JSON.stringify(schema)}
 {dragDisabled} -->
 <!-- {JSON.stringify(items)} -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+
 <SchemaForm
 	{nestedClasses}
 	{hiddenArgs}
@@ -95,7 +122,7 @@
 				flipDurationMs,
 				dropTargetStyle: {},
 				type: dndType ?? 'top-level'
-		  }}
+			}}
 	{items}
 	{diff}
 	{nestedParent}
@@ -103,11 +130,11 @@
 	bind:isValid
 	{noVariablePicker}
 >
-	<svelte:fragment slot="actions">
+	{#snippet actions()}
 		{#if !disableDnd}
 			<div class="w-4 h-8 cursor-move ml-2 handle" aria-label="drag-handle" use:dragHandle>
 				<GripVertical size={16} />
 			</div>
 		{/if}
-	</svelte:fragment>
+	{/snippet}
 </SchemaForm>
diff --git a/frontend/src/lib/components/schema/SchemaPickerRow.svelte b/frontend/src/lib/components/schema/SchemaPickerRow.svelte
index 6c2539bddd..8e0c0c114a 100644
--- a/frontend/src/lib/components/schema/SchemaPickerRow.svelte
+++ b/frontend/src/lib/components/schema/SchemaPickerRow.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { copyToClipboard, formatDate, formatDateShort } from '$lib/utils'
 	import ObjectViewerWrapper from '$lib/components/propertyPicker/ObjectViewerWrapper.svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -7,21 +10,37 @@
 	import { CopyIcon, Eye, Loader2 } from 'lucide-svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { isObjectTooBig } from '$lib/utils'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import type { FloatingConfig } from '@melt-ui/svelte/internal/actions'
 
-	export let payloadData: Record<string, any> | string
-	export let date: string | undefined
-	export let hovering = false
-	export let placement: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end' = 'bottom-start'
-	export let viewerOpen = false
-	export let limitPayloadSize = false
-	export let forceLoad = false
+	interface Props {
+		payloadData: Record<string, any> | string
+		date: string | undefined
+		hovering?: boolean
+		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
+		viewerOpen?: boolean
+		limitPayloadSize?: boolean
+		forceLoad?: boolean
+		start?: import('svelte').Snippet
+		extra?: import('svelte').Snippet<[any]>
+	}
 
-	let popover: Popover | undefined = undefined
+	let {
+		payloadData,
+		date,
+		hovering = false,
+		placement = 'bottom-start',
+		viewerOpen = false,
+		limitPayloadSize = false,
+		forceLoad = $bindable(false),
+		start,
+		extra
+	}: Props = $props()
+
+	let popover: Popover | undefined = $state(undefined)
 	let popoverOpen = false
-	let objectViewerLoaded = false
-	let popoverFullyOpened = false
+	let objectViewerLoaded = $state(false)
+	let popoverFullyOpened = $state(false)
 	let popoverOpenTimeout: ReturnType<typeof setTimeout> | null = null
 
 	const dispatch = createEventDispatcher()
@@ -67,11 +86,16 @@
 		}
 	}
 
-	$: handleHoveringChange(hovering)
+	$effect(() => {
+		hovering
+		untrack(() => {
+			handleHoveringChange(hovering)
+		})
+	})
 </script>
 
 <Cell>
-	<slot name="start" />
+	{@render start?.()}
 </Cell>
 
 <Cell
@@ -105,7 +129,7 @@
 			{floatingConfig}
 			on:openChange={handlePopoverChange}
 		>
-			<svelte:fragment slot="trigger">
+			{#snippet trigger()}
 				<Button
 					variant="contained"
 					size="xs2"
@@ -115,9 +139,9 @@
 				>
 					<Eye size={16} />
 				</Button>
-			</svelte:fragment>
+			{/snippet}
 
-			<svelte:fragment slot="content">
+			{#snippet content()}
 				<div class="relative p-2 max-w-[400px]">
 					{#if payloadData === 'WINDMILL_TOO_BIG'}
 						<div class="text-center text-tertiary text-xs">
@@ -133,10 +157,10 @@
 							role="button"
 							tabindex="0"
 							aria-label="Copy JSON payload to clipboard"
-							on:click={() => {
+							onclick={() => {
 								copyToClipboard(JSON.stringify(payloadData))
 							}}
-							on:keydown
+							onkeydown={bubble('keydown')}
 						>
 							{#if !objectViewerLoaded && isTooBig}
 								<div class="flex justify-center items-center p-4">
@@ -172,11 +196,11 @@
 						</div>
 					{/if}
 				</div>
-			</svelte:fragment>
+			{/snippet}
 		</Popover>
 	</div>
 
-	<slot name="extra" {isTooBig} />
+	{@render extra?.({ isTooBig })}
 </Cell>
 
 <style>
diff --git a/frontend/src/lib/components/schema/Test.svelte b/frontend/src/lib/components/schema/Test.svelte
new file mode 100644
index 0000000000..036651a7d7
--- /dev/null
+++ b/frontend/src/lib/components/schema/Test.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { schema } = $props()
+</script>
+
+<pre class="text-xs">4 {JSON.stringify(schema, null, 2)}</pre>
diff --git a/frontend/src/lib/components/schema/schemaUtils.ts b/frontend/src/lib/components/schema/schemaUtils.svelte.ts
similarity index 97%
rename from frontend/src/lib/components/schema/schemaUtils.ts
rename to frontend/src/lib/components/schema/schemaUtils.svelte.ts
index 949c6b1301..2bcdf58f0e 100644
--- a/frontend/src/lib/components/schema/schemaUtils.ts
+++ b/frontend/src/lib/components/schema/schemaUtils.svelte.ts
@@ -133,7 +133,7 @@ export function schemaFromDiff(
 	if (!schema) {
 		return undefined
 	}
-	const newSchema = structuredClone(schema)
+	const newSchema = structuredClone($state.snapshot(schema))
 	Object.keys(diff).forEach((key) => {
 		const diffValue = diff[key].diff
 		if (diffValue === 'added' || diffValue === 'modified') {
@@ -179,7 +179,7 @@ export function setNestedProperty(
 		return curr[field][key]
 	}, obj)
 	if (lastKey && value) {
-		const newValue = structuredClone(value)
+		const newValue = structuredClone($state.snapshot(value))
 		target[field][lastKey] = newValue
 		return
 	} else if (lastKey && !value) {
@@ -199,7 +199,7 @@ export function applyDiff(
 		return
 	}
 
-	let newSchema = structuredClone(schema)
+	let newSchema = structuredClone($state.snapshot(schema))
 
 	Object.keys(diff).forEach((key) => {
 		const diffValue = diff[key].diff
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 47f0e96c0f..9568071980 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { preventDefault } from 'svelte/legacy'
+
 	import {
 		type CompletedJob,
 		type Job,
@@ -29,34 +31,53 @@
 	import WorkflowTimeline from '../WorkflowTimeline.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import type { PreviewPanelUi } from '../custom_ui'
+	import { getStringError } from '../copilot/chat/utils'
 
-	export let lang: Preview['language'] | undefined
-	export let previewIsLoading = false
-	export let previewJob: Job | undefined
-	export let pastPreviews: CompletedJob[] = []
-	export let editor: Editor | undefined = undefined
-	export let diffEditor: DiffEditor | undefined = undefined
-	export let args: Record<string, any> | undefined = undefined
-	export let workspace: string | undefined = undefined
-	export let showCaptures: boolean = false
-	export let customUi: PreviewPanelUi | undefined = undefined
-	export let fixChatMode: boolean = false
+	interface Props {
+		lang: Preview['language'] | undefined
+		previewIsLoading?: boolean
+		previewJob: Job | undefined
+		pastPreviews?: CompletedJob[]
+		editor?: Editor | undefined
+		diffEditor?: DiffEditor | undefined
+		args?: Record<string, any> | undefined
+		workspace?: string | undefined
+		showCaptures?: boolean
+		customUi?: PreviewPanelUi | undefined
+		children?: import('svelte').Snippet
+		capturesTab?: import('svelte').Snippet
+	}
 
-	type DrawerContent = {
+	let {
+		lang,
+		previewIsLoading = false,
+		previewJob,
+		pastPreviews = [],
+		editor = undefined,
+		diffEditor = undefined,
+		args = undefined,
+		workspace = undefined,
+		showCaptures = false,
+		customUi = undefined,
+		children,
+		capturesTab
+	}: Props = $props()
+
+	type DContent = {
 		mode: 'json' | Preview['language'] | 'plain'
 		title: string
 		content: any
 	}
 
-	let selectedTab = 'logs'
-	let drawerOpen: boolean = false
-	let drawerContent: DrawerContent | undefined = undefined
+	let selectedTab = $state('logs')
+	let drawerOpen: boolean = $state(false)
+	let drawerContent: DContent | undefined = $state(undefined)
 
 	export function setFocusToLogs() {
 		selectedTab = 'logs'
 	}
 
-	function openDrawer(newContent: DrawerContent) {
+	function openDrawer(newContent: DContent) {
 		drawerContent = newContent
 		drawerOpen = true
 	}
@@ -69,7 +90,7 @@
 		return x as Record<string, WorkflowStatus>
 	}
 
-	let forceJson = false
+	let forceJson = $state(false)
 </script>
 
 <Drawer bind:open={drawerOpen} size="800px">
@@ -103,7 +124,7 @@
 			<Tab value="captures" size="xs">Trigger captures</Tab>
 		{/if}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<div class="grow min-h-0">
 				{#if selectedTab === 'logs'}
 					<SplitPanesWrapper>
@@ -128,7 +149,7 @@
 								/>
 							</Pane>
 							<Pane>
-								<slot />
+								{@render children?.()}
 								{#if previewJob != undefined && 'result' in previewJob}
 									<div class="relative w-full h-full p-2">
 										<div class="relative">
@@ -140,19 +161,11 @@
 												customUi={customUi?.displayResult}
 												language={lang}
 											>
-												<svelte:fragment slot="copilot-fix">
-													{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
-														<ScriptFix
-															on:fix
-															chatMode={fixChatMode}
-															error={JSON.stringify(previewJob.result.error)}
-															{lang}
-															{editor}
-															{diffEditor}
-															{args}
-														/>
+												{#snippet copilot_fix()}
+													{#if lang && editor && diffEditor && args && previewJob && !previewJob.success && getStringError(previewJob.result)}
+														<ScriptFix {lang} />
 													{/if}
-												</svelte:fragment>
+												{/snippet}
 											</DisplayResult>
 										</div>
 									</div>
@@ -211,7 +224,7 @@
 										<Cell>
 											<button
 												class="text-xs"
-												on:click|preventDefault={() => {
+												onclick={preventDefault(() => {
 													openDrawer({ mode: 'json', content: undefined, title: 'Result' })
 													JobService.getCompletedJobResult({
 														workspace: workspace ?? $workspaceStore ?? 'NO_W',
@@ -219,7 +232,7 @@
 													}).then((res) => {
 														drawerContent && (drawerContent.content = res)
 													})
-												}}
+												})}
 											>
 												See Result
 											</button>
@@ -227,7 +240,7 @@
 										<Cell>
 											<button
 												class="text-xs"
-												on:click|preventDefault={async () => {
+												onclick={preventDefault(async () => {
 													const code = (
 														await JobService.getCompletedJob({
 															workspace: workspace ?? $workspaceStore ?? 'NO_W',
@@ -239,7 +252,7 @@
 														content: String(code),
 														title: `Code ${lang}`
 													})
-												}}
+												})}
 											>
 												View code
 											</button>
@@ -247,7 +260,7 @@
 										<Cell last>
 											<button
 												class="text-xs"
-												on:click|preventDefault={async () => {
+												onclick={preventDefault(async () => {
 													const logs = await (
 														await fetch(
 															OpenAPI.BASE +
@@ -260,7 +273,7 @@
 														content: String(logs),
 														title: `Logs for ${id}`
 													})
-												}}
+												})}
 											>
 												View logs
 											</button>
@@ -272,9 +285,9 @@
 					</div>
 				{/if}
 				{#if selectedTab === 'captures'}
-					<slot name="capturesTab" />
+					{@render capturesTab?.()}
 				{/if}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</Tabs>
 </div>
diff --git a/frontend/src/lib/components/scripts/CreateActionsScript.svelte b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
index e4dbf7c2b0..f0b864447b 100644
--- a/frontend/src/lib/components/scripts/CreateActionsScript.svelte
+++ b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
@@ -2,11 +2,15 @@
 	import { Code2, Plus } from 'lucide-svelte'
 	import Button from '../common/button/Button.svelte'
 	import { base } from '$lib/base'
+
+	let { aiId, aiDescription } = $props<{ aiId: string; aiDescription: string }>()
 </script>
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		{aiId}
+		{aiDescription}
 		size="sm"
 		spacingSize="xl"
 		color="marine"
diff --git a/frontend/src/lib/components/search/GlobalSearchModal.svelte b/frontend/src/lib/components/search/GlobalSearchModal.svelte
index 8edf4e8dae..93f18d60a3 100644
--- a/frontend/src/lib/components/search/GlobalSearchModal.svelte
+++ b/frontend/src/lib/components/search/GlobalSearchModal.svelte
@@ -9,9 +9,7 @@
 		type ListableApp,
 		type ListableRawApp,
 		type Script,
-
 		type SearchJobsIndexResponse
-
 	} from '$lib/gen'
 	import { clickOutside, isMac } from '$lib/utils'
 	import {
@@ -44,6 +42,7 @@
 	import Logs from 'lucide-svelte/icons/logs'
 	import { AwsIcon, GoogleCloudIcon, KafkaIcon, MqttIcon, NatsIcon } from '../icons'
 	import RunsSearch from './RunsSearch.svelte'
+	import AskAiButton from '../copilot/AskAiButton.svelte'
 
 	let open: boolean = false
 
@@ -240,6 +239,7 @@
 	let defaultMenuItemLabels = defaultMenuItems.map((item) => item.label)
 	let defaultMenuItemAndHiddenLabels = defaultMenuItemsWithHidden.map((item) => item.label)
 	let switchModeItemLabels = switchModeItems.map((item) => item.label)
+	let askAiButton: AskAiButton | undefined
 
 	function fuzzyFilter(filter: string, items: any[], itemsPlainText: string[]) {
 		if (filter === '') {
@@ -264,7 +264,6 @@
 		return r
 	}
 
-
 	let queryParseErrors: string[] = []
 
 	async function handleSearch() {
@@ -320,8 +319,8 @@
 			)
 		}
 		if (tab === 'runs') {
-				await tick()
-				runsSearch?.handleRunSearch(removePrefix(searchTerm, RUNS_PREFIX))
+			await tick()
+			runsSearch?.handleRunSearch(removePrefix(searchTerm, RUNS_PREFIX))
 		}
 		selectedItem = selectItem(0)
 	}
@@ -372,6 +371,9 @@
 					}
 				}
 			}
+			if ((itemMap[tab] ?? []).length === 0 && searchTerm.length > 0 && event.key === 'Enter') {
+				askAiButton?.onClick()
+			}
 		}
 	}
 
@@ -413,7 +415,7 @@
 			open = false
 			goto(path)
 		} else {
-			window.open(path, "_blank")
+			window.open(path, '_blank')
 		}
 	}
 
@@ -581,8 +583,7 @@
 	let runsSearch: RunsSearch
 	let runSearchRemainingCount: number | undefined = undefined
 	let runSearchTotalCount: number | undefined = undefined
-	let indexMetadata: SearchJobsIndexResponse["index_metadata"] = undefined
-
+	let indexMetadata: SearchJobsIndexResponse['index_metadata'] = undefined
 </script>
 
 {#if open}
@@ -618,6 +619,16 @@
 							>{placeholderFromPrefix(searchTerm)}</label
 						>
 					</div>
+					{#if (itemMap[tab] ?? []).length === 0 && searchTerm.length > 0}
+						<AskAiButton
+							bind:this={askAiButton}
+							label="Ask AI"
+							initialInput={searchTerm}
+							onClick={() => {
+								closeModal()
+							}}
+						/>
+					{/if}
 					{#if queryParseErrors.length > 0}
 						<Popover notClickable placement="bottom-start">
 							<AlertTriangle size={16} class="text-yellow-500" />
@@ -682,7 +693,9 @@
 							{#if (itemMap[tab] ?? []).length === 0}
 								<div class="flex w-full justify-center items-center">
 									<div class="text-tertiary text-center">
-										<div class="text-2xl font-bold">Nothing found</div>
+										<div class="text-2xl font-bold"
+											>Nothing found, ask the AI to find what you need!</div
+										>
 										<div class="text-sm">Tip: press `esc` to quickly clear the search bar</div>
 									</div>
 								</div>
@@ -718,20 +731,20 @@
 							{/if}
 						</div>
 					{:else if tab === 'runs'}
-								<RunsSearch
-												bind:queryParseErrors
-												bind:this={runsSearch}
-												bind:selectedItem
-												bind:selectedWorkspace
-												bind:mouseMoved
-												bind:loadedRuns={itemMap['runs']}
-												bind:open
-												{selectItem}
-												searchTerm={removePrefix(searchTerm, RUNS_PREFIX)}
-												bind:runSearchRemainingCount
-												bind:runSearchTotalCount
-												bind:indexMetadata
-								/>
+						<RunsSearch
+							bind:queryParseErrors
+							bind:this={runsSearch}
+							bind:selectedItem
+							bind:selectedWorkspace
+							bind:mouseMoved
+							bind:loadedRuns={itemMap['runs']}
+							bind:open
+							{selectItem}
+							searchTerm={removePrefix(searchTerm, RUNS_PREFIX)}
+							bind:runSearchRemainingCount
+							bind:runSearchTotalCount
+							bind:indexMetadata
+						/>
 					{/if}
 				</div>
 			</div>
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
index 1fabd3b231..fa79f6a824 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
@@ -5,6 +5,7 @@
 	import { WorkspaceService } from '$lib/gen'
 	import Modal from '../common/modal/Modal.svelte'
 	import { Pen } from 'lucide-svelte'
+	import { untrack } from 'svelte'
 
 	let { open = false } = $props<{ open?: boolean }>()
 
@@ -13,7 +14,7 @@
 
 	$effect(() => {
 		if ($workspaceStore) {
-			getWorkspaceName()
+			untrack(() => getWorkspaceName())
 		}
 	})
 
diff --git a/frontend/src/lib/components/settings/CreateToken.svelte b/frontend/src/lib/components/settings/CreateToken.svelte
new file mode 100644
index 0000000000..dd25ca2da9
--- /dev/null
+++ b/frontend/src/lib/components/settings/CreateToken.svelte
@@ -0,0 +1,262 @@
+<script lang="ts">
+	import { userWorkspaces, workspaceStore, type UserWorkspace } from '$lib/stores'
+	import { Button } from '../common'
+	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import MultiSelectWrapper from '../multiselect/MultiSelectWrapper.svelte'
+	import TriggerableByAI from '../TriggerableByAI.svelte'
+	import Toggle from '../Toggle.svelte'
+	import { UserService, type NewToken } from '$lib/gen'
+	import { copyToClipboard } from '$lib/utils'
+	import { Clipboard } from 'lucide-svelte'
+	import ClipboardPanel from '../details/ClipboardPanel.svelte'
+	import { createEventDispatcher } from 'svelte'
+
+	interface Props {
+		showMcpMode?: boolean
+		openWithMcpMode?: boolean
+		newTokenLabel?: string
+		defaultNewTokenWorkspace?: string
+		scopes?: string[]
+		actions?: () => void
+		displayCreateToken?: boolean
+	}
+
+	let {
+		showMcpMode = false,
+		defaultNewTokenWorkspace,
+		scopes,
+		actions,
+		newTokenLabel = $bindable(undefined)
+	}: Props = $props()
+
+	let newToken = $state<string | undefined>(undefined)
+	let newMcpToken = $state<string | undefined>(undefined)
+	let newTokenExpiration = $state<number | undefined>(undefined)
+	let newTokenWorkspace = $state<string | undefined>(defaultNewTokenWorkspace)
+	let newMcpApps = $state<string[]>([])
+	let mcpCreationMode = $state(false)
+	let newMcpScope = $state('favorites')
+	let loadingApps = $state(false)
+	let errorFetchApps = $state(false)
+	let allApps = $state<string[]>([])
+
+	function handleCopyClick() {
+		copyToClipboard(newToken ?? '')
+	}
+	const dispatch = createEventDispatcher()
+	function ensureCurrentWorkspaceIncluded(
+		workspacesList: UserWorkspace[],
+		currentWorkspace: string | undefined
+	) {
+		if (!currentWorkspace) {
+			return workspacesList
+		}
+		const hasCurrentWorkspace = workspacesList.some((w) => w.id === currentWorkspace)
+		if (hasCurrentWorkspace) {
+			return workspacesList
+		}
+		return [{ id: currentWorkspace, name: currentWorkspace }, ...workspacesList]
+	}
+
+	async function createToken(mcpMode: boolean = false): Promise<void> {
+		try {
+			let date: Date | undefined
+			if (newTokenExpiration) {
+				date = new Date(new Date().getTime() + newTokenExpiration * 1000)
+			}
+
+			let tokenScopes = scopes
+			if (mcpMode) {
+				tokenScopes = [`mcp:${newMcpScope}`]
+				if (newMcpApps.length > 0) {
+					tokenScopes.push(`mcp:hub:${newMcpApps.join(',')}`)
+				}
+			}
+
+			const createdToken = await UserService.createToken({
+				requestBody: {
+					label: newTokenLabel,
+					expiration: date?.toISOString(),
+					scopes: tokenScopes,
+					workspace_id: mcpMode ? newTokenWorkspace || $workspaceStore : newTokenWorkspace
+				} as NewToken
+			})
+
+			if (mcpMode) {
+				newMcpToken = `${createdToken}`
+			} else {
+				newToken = `${createdToken}`
+			}
+
+			dispatch('tokenCreated', newToken ?? newMcpToken)
+			if (actions) {
+				actions()
+			}
+			mcpCreationMode = false
+		} catch (err) {
+			console.error('Failed to create token:', err)
+		}
+	}
+
+	const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore))
+	const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`)
+</script>
+
+<div>
+	{#if newToken}
+		<div
+			class="border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
+		>
+			<div>
+				Added token: <button onclick={handleCopyClick} class="inline-flex gap-2 items-center">
+					{newToken}
+					<Clipboard size={12} />
+				</button>
+			</div>
+			<div class="pt-1 text-xs ml-2">
+				Make sure to copy your personal access token now. You won't be able to see it again!
+			</div>
+		</div>
+	{/if}
+
+	{#if newMcpToken}
+		<div
+			class="border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
+		>
+			<p class="text-sm mb-2">New MCP URL:</p>
+			<ClipboardPanel content={`${mcpBaseUrl}${newMcpToken}`} />
+			<p class="pt-1 text-xs">
+				Make sure to copy this URL now. You won't be able to see it again!
+			</p>
+		</div>
+	{/if}
+
+	<div class="py-3 px-3 border rounded-md mb-6 bg-surface-secondary min-w-min">
+		<h3 class="pb-3 font-semibold">Add a new token</h3>
+
+		{#if showMcpMode}
+			<div class="mb-4 flex flex-row flex-shrink-0">
+				<TriggerableByAI
+					id="account-settings-create-mcp-token"
+					description="Create a new MCP token to authenticate to the Windmill API"
+				>
+					<Toggle
+						on:change={(e) => {
+							mcpCreationMode = e.detail
+							if (e.detail) {
+								newTokenLabel = 'MCP token'
+								newTokenExpiration = undefined
+								newTokenWorkspace = $workspaceStore
+							} else {
+								newTokenLabel = undefined
+								newTokenExpiration = undefined
+								newTokenWorkspace = defaultNewTokenWorkspace
+							}
+						}}
+						checked={mcpCreationMode}
+						options={{
+							right: 'Generate MCP URL',
+							rightTooltip:
+								'Generate a new MCP URL to make your scripts and flows available as tools through your LLM clients.',
+							rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/mcp'
+						}}
+						size="xs"
+					/>
+				</TriggerableByAI>
+			</div>
+		{/if}
+
+		{#if scopes != undefined}
+			<div class="mb-4">
+				<span class="block mb-1">Scope</span>
+				{#each scopes as scope}
+					<input disabled type="text" value={scope} class="mb-2 w-full" />
+				{/each}
+			</div>
+		{/if}
+
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			{#if mcpCreationMode}
+				<div>
+					<span class="block mb-1">Scope</span>
+					<ToggleButtonGroup bind:selected={newMcpScope} allowEmpty={false}>
+						{#snippet children({ item })}
+							<ToggleButton
+								{item}
+								value="favorites"
+								label="Favorites only"
+								tooltip="Make only your favorite scripts and flows available as tools"
+							/>
+							<ToggleButton
+								{item}
+								value="all"
+								label="All scripts/flows"
+								tooltip="Make all your scripts and flows available as tools"
+							/>
+						{/snippet}
+					</ToggleButtonGroup>
+				</div>
+
+				<div>
+					<span class="block mb-1">Hub scripts (optional)</span>
+					{#if loadingApps}
+						<div>Loading...</div>
+					{:else if errorFetchApps}
+						<div>Error fetching apps</div>
+					{:else}
+						<MultiSelectWrapper items={allApps} placeholder="Select apps" bind:value={newMcpApps} />
+					{/if}
+				</div>
+
+				<div>
+					<span class="block mb-1">Workspace</span>
+					<select bind:value={newTokenWorkspace} disabled={workspaces.length === 1} class="w-full">
+						{#each workspaces as workspace}
+							<option value={workspace.id}>{workspace.name}</option>
+						{/each}
+					</select>
+				</div>
+			{/if}
+
+			<div>
+				<span class="block mb-1">Label <span class="text-xs text-tertiary">(optional)</span></span>
+				<input type="text" bind:value={newTokenLabel} class="w-full" />
+			</div>
+
+			{#if !mcpCreationMode}
+				<div>
+					<span class="block mb-1"
+						>Expires In <span class="text-xs text-tertiary">(optional)</span></span
+					>
+					<select bind:value={newTokenExpiration} class="w-full">
+						<option value={undefined}>No expiration</option>
+						<option value={15 * 60}>15m</option>
+						<option value={30 * 60}>30m</option>
+						<option value={1 * 60 * 60}>1h</option>
+						<option value={1 * 24 * 60 * 60}>1d</option>
+						<option value={7 * 24 * 60 * 60}>7d</option>
+						<option value={30 * 24 * 60 * 60}>30d</option>
+						<option value={90 * 24 * 60 * 60}>90d</option>
+					</select>
+				</div>
+			{/if}
+		</div>
+
+		<div class="mt-4 flex justify-end gap-2 flex-row">
+			<Button
+				on:click={() => {
+					mcpCreationMode = false
+				}}
+			>
+				Cancel
+			</Button>
+			<Button
+				on:click={() => createToken(mcpCreationMode)}
+				disabled={mcpCreationMode && newTokenWorkspace == undefined}
+			>
+				New token
+			</Button>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/settings/PremiumInfo.svelte b/frontend/src/lib/components/settings/PremiumInfo.svelte
index 181a38ea7e..1ed4b2fb12 100644
--- a/frontend/src/lib/components/settings/PremiumInfo.svelte
+++ b/frontend/src/lib/components/settings/PremiumInfo.svelte
@@ -397,8 +397,8 @@
 				class="mb-4 {planTitle === 'Team'
 					? 'text-blue-500'
 					: planTitle === 'Enterprise'
-					? 'text-teal-600'
-					: ''}"
+						? 'text-teal-600'
+						: ''}"
 			>
 				{planTitle}
 			</h2>
diff --git a/frontend/src/lib/components/settings/TokensTable.svelte b/frontend/src/lib/components/settings/TokensTable.svelte
index 9cc4f30ecb..9601b92f67 100644
--- a/frontend/src/lib/components/settings/TokensTable.svelte
+++ b/frontend/src/lib/components/settings/TokensTable.svelte
@@ -13,6 +13,7 @@
 	import ClipboardPanel from '../details/ClipboardPanel.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import MultiSelectWrapper from '../multiselect/MultiSelectWrapper.svelte'
+	import TriggerableByAI from '../TriggerableByAI.svelte'
 
 	// --- Props ---
 	interface Props {
@@ -101,7 +102,7 @@
 					label: newTokenLabel,
 					expiration: date?.toISOString(),
 					scopes: tokenScopes,
-					workspace_id: mcpMode ? (newTokenWorkspace || $workspaceStore) : newTokenWorkspace
+					workspace_id: mcpMode ? newTokenWorkspace || $workspaceStore : newTokenWorkspace
 				} as NewToken
 			})
 
@@ -187,6 +188,8 @@
 	<h2 class="py-0 my-0 border-b pt-3">Tokens</h2>
 	<div class="flex justify-end border-b pb-1 gap-2">
 		<Button
+			aiId="account-settings-create-token"
+			aiDescription="Create a new token to authenticate to the Windmill API"
 			size="sm"
 			startIcon={{ icon: Plus }}
 			btnClasses={displayCreateToken ? 'hidden' : ''}
@@ -235,28 +238,33 @@
 
 			{#if showMcpMode}
 				<div class="mb-4 flex flex-row flex-shrink-0">
-					<Toggle
-						on:change={(e) => {
-							mcpCreationMode = e.detail
-							if (e.detail) {
-								newTokenLabel = 'MCP token'
-								newTokenExpiration = undefined
-								newTokenWorkspace = $workspaceStore
-							} else {
-								newTokenLabel = undefined
-								newTokenExpiration = undefined
-								newTokenWorkspace = defaultNewTokenWorkspace
-							}
-						}}
-						checked={mcpCreationMode}
-						options={{
-							right: 'Generate MCP URL',
-							rightTooltip:
-								'Generate a new MCP URL to make your scripts and flows available as tools through your LLM clients.',
-							rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/mcp'
-						}}
-						size="xs"
-					/>
+					<TriggerableByAI
+						id="account-settings-create-mcp-token"
+						description="Create a new MCP token to authenticate to the Windmill API"
+					>
+						<Toggle
+							on:change={(e) => {
+								mcpCreationMode = e.detail
+								if (e.detail) {
+									newTokenLabel = 'MCP token'
+									newTokenExpiration = undefined
+									newTokenWorkspace = $workspaceStore
+								} else {
+									newTokenLabel = undefined
+									newTokenExpiration = undefined
+									newTokenWorkspace = defaultNewTokenWorkspace
+								}
+							}}
+							checked={mcpCreationMode}
+							options={{
+								right: 'Generate MCP URL',
+								rightTooltip:
+									'Generate a new MCP URL to make your scripts and flows available as tools through your LLM clients.',
+								rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/mcp'
+							}}
+							size="xs"
+						/>
+					</TriggerableByAI>
 				</div>
 			{/if}
 
@@ -273,19 +281,21 @@
 				{#if mcpCreationMode}
 					<div>
 						<span class="block mb-1">Scope</span>
-						<ToggleButtonGroup bind:selected={newMcpScope} allowEmpty={false} let:item>
-							<ToggleButton
-								{item}
-								value="favorites"
-								label="Favorites only"
-								tooltip="Make only your favorite scripts and flows available as tools"
-							/>
-							<ToggleButton
-								{item}
-								value="all"
-								label="All scripts/flows"
-								tooltip="Make all your scripts and flows available as tools"
-							/>
+						<ToggleButtonGroup bind:selected={newMcpScope} allowEmpty={false}>
+							{#snippet children({ item })}
+								<ToggleButton
+									{item}
+									value="favorites"
+									label="Favorites only"
+									tooltip="Make only your favorite scripts and flows available as tools"
+								/>
+								<ToggleButton
+									{item}
+									value="all"
+									label="All scripts/flows"
+									tooltip="Make all your scripts and flows available as tools"
+								/>
+							{/snippet}
 						</ToggleButtonGroup>
 					</div>
 
@@ -324,21 +334,23 @@
 					<input type="text" bind:value={newTokenLabel} class="w-full" />
 				</div>
 
-				<div>
-					<span class="block mb-1"
-						>Expires In <span class="text-xs text-tertiary">(optional)</span></span
-					>
-					<select bind:value={newTokenExpiration} disabled={mcpCreationMode} class="w-full">
-						<option value={undefined}>No expiration</option>
-						<option value={15 * 60}>15m</option>
-						<option value={30 * 60}>30m</option>
-						<option value={1 * 60 * 60}>1h</option>
-						<option value={1 * 24 * 60 * 60}>1d</option>
-						<option value={7 * 24 * 60 * 60}>7d</option>
-						<option value={30 * 24 * 60 * 60}>30d</option>
-						<option value={90 * 24 * 60 * 60}>90d</option>
-					</select>
-				</div>
+				{#if !mcpCreationMode}
+					<div>
+						<span class="block mb-1"
+							>Expires In <span class="text-xs text-tertiary">(optional)</span></span
+						>
+						<select bind:value={newTokenExpiration} class="w-full">
+							<option value={undefined}>No expiration</option>
+							<option value={15 * 60}>15m</option>
+							<option value={30 * 60}>30m</option>
+							<option value={1 * 60 * 60}>1h</option>
+							<option value={1 * 24 * 60 * 60}>1d</option>
+							<option value={7 * 24 * 60 * 60}>7d</option>
+							<option value={30 * 24 * 60 * 60}>30d</option>
+							<option value={90 * 24 * 60 * 60}>90d</option>
+						</select>
+					</div>
+				{/if}
 			</div>
 
 			<div class="mt-4 flex justify-end gap-2 flex-row">
@@ -363,6 +375,7 @@
 
 <div class="overflow-auto">
 	<TableCustom>
+		<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 		<tr slot="header-row">
 			<th>prefix</th>
 			<th>label</th>
@@ -370,32 +383,34 @@
 			<th>scopes</th>
 			<th></th>
 		</tr>
-		<tbody slot="body">
-			{#if tokens && tokens.length > 0}
-				{#each tokens as { token_prefix, expiration, label, scopes }}
-					<tr>
-						<td class="grow">{token_prefix}****</td>
-						<td class="grow">{label ?? ''}</td>
-						<td class="grow">{displayDate(expiration ?? '')}</td>
-						<td class="grow">{scopes?.join(', ') ?? ''}</td>
-						<td class="grow">
-							<button
-								class="text-red-500 text-xs underline"
-								onclick={() => handleDeleteClick(token_prefix)}
-							>
-								Delete
-							</button>
-						</td>
+		{#snippet body()}
+			<tbody>
+				{#if tokens && tokens.length > 0}
+					{#each tokens as { token_prefix, expiration, label, scopes }}
+						<tr>
+							<td class="grow">{token_prefix}****</td>
+							<td class="grow">{label ?? ''}</td>
+							<td class="grow">{displayDate(expiration ?? '')}</td>
+							<td class="grow">{scopes?.join(', ') ?? ''}</td>
+							<td class="grow">
+								<button
+									class="text-red-500 text-xs underline"
+									onclick={() => handleDeleteClick(token_prefix)}
+								>
+									Delete
+								</button>
+							</td>
+						</tr>
+					{/each}
+				{:else if tokens && tokens.length === 0}
+					<tr class="px-6">
+						<td class="text-secondary italic text-xs"> There are no tokens yet</td>
 					</tr>
-				{/each}
-			{:else if tokens && tokens.length === 0}
-				<tr class="px-6">
-					<td class="text-secondary italic text-xs"> There are no tokens yet</td>
-				</tr>
-			{:else}
-				<tr><td>Loading...</td></tr>
-			{/if}
-		</tbody>
+				{:else}
+					<tr><td>Loading...</td></tr>
+				{/if}
+			</tbody>
+		{/snippet}
 	</TableCustom>
 	<div class="flex flex-row-reverse gap-2 w-full">
 		{#if tokens?.length == 100}
diff --git a/frontend/src/lib/components/settings/UserInfoSettings.svelte b/frontend/src/lib/components/settings/UserInfoSettings.svelte
index e7a46a30e6..2dc91d3ec3 100644
--- a/frontend/src/lib/components/settings/UserInfoSettings.svelte
+++ b/frontend/src/lib/components/settings/UserInfoSettings.svelte
@@ -37,7 +37,7 @@
 			<div class="text-red-600 text-2xs grow">{passwordError}</div>
 		{/if}
 		<div class="flex flex-col gap-2 w-full">
-			<div class="mt-4">
+			<form class="mt-4">
 				<label class="block w-60 mb-2 text-tertiary">
 					<div class="text-secondary">email</div>
 					<input type="text" disabled value={$usersWorkspaceStore?.email} class="input mt-1" />
@@ -46,6 +46,7 @@
 					<label class="block w-120">
 						<div class="text-secondary">password</div>
 						<input
+							autocomplete="new-password"
 							type="password"
 							bind:value={newPassword}
 							class="
@@ -66,7 +67,7 @@
 				{:else if login_type == 'github'}
 					<span class="text-sm">Authenticated through Github OAuth2. Cannot set a password.</span>
 				{/if}
-			</div>
+			</form>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte b/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
index 5b3420eaf1..96f441a51b 100644
--- a/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
+++ b/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
@@ -10,8 +10,9 @@
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
 	import { SaveIcon, EyeIcon, EyeOffIcon } from 'lucide-svelte'
+	import { untrack } from 'svelte'
 
-	let operatorWorkspaceSettings = {
+	let operatorWorkspaceSettings = $state({
 		runs: true,
 		schedules: true,
 		resources: true,
@@ -21,11 +22,11 @@
 		groups: true,
 		folders: true,
 		workers: true
-	}
+	})
 
-	let originalSettings = { ...operatorWorkspaceSettings }
-	let isChanged = false
-	let currentWorkspace: string | null = null
+	let originalSettings = $state({ ...untrack(() => operatorWorkspaceSettings) })
+	let isChanged = $state(false)
+	let currentWorkspace: string | null = $state(null)
 
 	async function saveSettings() {
 		try {
@@ -54,27 +55,33 @@
 		workers: { title: 'Workers', description: 'View workers and worker groups' }
 	}
 
-	$: if ($workspaceStore && $workspaceStore !== currentWorkspace) {
-		;(async () => {
-			currentWorkspace = $workspaceStore
-			const settings = await WorkspaceService.getSettings({
-				workspace: $workspaceStore
-			})
-			if (settings.operator_settings !== null) {
-				operatorWorkspaceSettings = settings.operator_settings ?? operatorWorkspaceSettings
-				originalSettings = { ...operatorWorkspaceSettings }
-			}
+	$effect(() => {
+		if ($workspaceStore && $workspaceStore !== currentWorkspace) {
+			;(async () => {
+				currentWorkspace = $workspaceStore
+				const settings = await WorkspaceService.getSettings({
+					workspace: $workspaceStore
+				})
+				if (settings.operator_settings !== null) {
+					operatorWorkspaceSettings = settings.operator_settings ?? operatorWorkspaceSettings
+					originalSettings = { ...operatorWorkspaceSettings }
+				}
+			})()
+		}
+	})
+
+	$effect(() => {
+		isChanged = JSON.stringify(operatorWorkspaceSettings) !== JSON.stringify(originalSettings)
+	})
+
+	let enableAllState = $derived(
+		(() => {
+			const values = Object.values(operatorWorkspaceSettings)
+			if (values.every((v) => v === true)) return 'true'
+			if (values.every((v) => v === false)) return 'false'
+			return undefined
 		})()
-	}
-
-	$: isChanged = JSON.stringify(operatorWorkspaceSettings) !== JSON.stringify(originalSettings)
-
-	$: enableAllState = (() => {
-		const values = Object.values(operatorWorkspaceSettings)
-		if (values.every((v) => v === true)) return 'true'
-		if (values.every((v) => v === false)) return 'false'
-		return undefined
-	})()
+	)
 
 	function toggleAllSettings(event) {
 		const newValue = event.detail === true
@@ -111,25 +118,23 @@
 						<Cell head first>Section</Cell>
 						<Cell head>Description</Cell>
 						<Cell head last>
-							<ToggleButtonGroup
-								bind:selected={enableAllState}
-								on:selected={toggleAllSettings}
-								let:item
-							>
-								<ToggleButton
-									icon={EyeIcon}
-									small={true}
-									value={'true'}
-									label="Enable All"
-									{item}
-								/>
-								<ToggleButton
-									icon={EyeOffIcon}
-									small={true}
-									value={'false'}
-									label="Disable All"
-									{item}
-								/>
+							<ToggleButtonGroup bind:selected={enableAllState} on:selected={toggleAllSettings}>
+								{#snippet children({ item })}
+									<ToggleButton
+										icon={EyeIcon}
+										small={true}
+										value={'true'}
+										label="Enable All"
+										{item}
+									/>
+									<ToggleButton
+										icon={EyeOffIcon}
+										small={true}
+										value={'false'}
+										label="Disable All"
+										{item}
+									/>
+								{/snippet}
 							</ToggleButtonGroup>
 						</Cell>
 					</tr>
@@ -143,10 +148,11 @@
 								<ToggleButtonGroup
 									selected={operatorWorkspaceSettings[key] ? 'on' : 'off'}
 									on:selected={({ detail }) => (operatorWorkspaceSettings[key] = detail === 'on')}
-									let:item
 								>
-									<ToggleButton icon={EyeIcon} small={true} value={'on'} label="On" {item} />
-									<ToggleButton icon={EyeOffIcon} small={true} value={'off'} label="Off" {item} />
+									{#snippet children({ item })}
+										<ToggleButton icon={EyeIcon} small={true} value={'on'} label="On" {item} />
+										<ToggleButton icon={EyeOffIcon} small={true} value={'off'} label="Off" {item} />
+									{/snippet}
 								</ToggleButtonGroup>
 							</Cell>
 						</tr>
diff --git a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
index d916ad525a..8adbc4f7b3 100644
--- a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
+++ b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
@@ -23,16 +23,16 @@
 	import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import { truncate } from '$lib/utils'
-	import { onDestroy } from 'svelte'
+	import { onDestroy, untrack } from 'svelte'
 
-	let users: User[] | undefined = undefined
-	let invites: WorkspaceInvite[] = []
-	let filteredUsers: User[] | undefined = undefined
-	let userFilter = ''
-	let auto_invite_domain: string | undefined
-	let operatorOnly: boolean | undefined = undefined
-	let autoAdd: boolean | undefined = undefined
-	let nbDisplayed = 30
+	let users: User[] | undefined = $state(undefined)
+	let invites: WorkspaceInvite[] = $state([])
+	let filteredUsers: User[] | undefined = $state(undefined)
+	let userFilter = $state('')
+	let auto_invite_domain: string | undefined = $state()
+	let operatorOnly: boolean | undefined = $state(undefined)
+	let autoAdd: boolean | undefined = $state(undefined)
+	let nbDisplayed = $state(30)
 
 	async function loadSettings(): Promise<void> {
 		const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore! })
@@ -43,18 +43,21 @@
 
 	let getUsagePromise: CancelablePromise<UserUsage[]> | undefined = undefined
 
-	let usage: Record<string, number> | undefined = undefined
+	let usage: Record<string, number> | undefined = $state(undefined)
 
 	async function getUsage() {
 		try {
 			getUsagePromise = UserService.listUsersUsage({ workspace: $workspaceStore! })
 			const res = await getUsagePromise
-			usage = res.reduce((acc, { email, executions }) => {
-				if (email) {
-					acc[email] = executions ?? 0
-				}
-				return acc
-			}, {} as Record<string, number>)
+			usage = res.reduce(
+				(acc, { email, executions }) => {
+					if (email) {
+						acc[email] = executions ?? 0
+					}
+					return acc
+				},
+				{} as Record<string, number>
+			)
 		} catch (e) {
 			console.warn(e)
 		}
@@ -68,23 +71,25 @@
 		invites = await WorkspaceService.listPendingInvites({ workspace: $workspaceStore! })
 	}
 
-	let allowedAutoDomain = false
+	let allowedAutoDomain = $state(false)
 
 	async function getDisallowedAutoDomain() {
 		allowedAutoDomain = await WorkspaceService.isDomainAllowed()
 	}
 
-	$: domain = $userStore?.email.split('@')[1]
+	let domain = $derived($userStore?.email.split('@')[1])
 
-	$: {
+	$effect(() => {
 		if ($workspaceStore) {
-			getDisallowedAutoDomain()
-			listUsers()
-			getUsage()
-			listInvites()
-			loadSettings()
+			untrack(() => {
+				getDisallowedAutoDomain()
+				listUsers()
+				getUsage()
+				listInvites()
+				loadSettings()
+			})
 		}
-	}
+	})
 
 	onDestroy(() => {
 		try {
@@ -94,7 +99,7 @@
 		}
 	})
 
-	let deleteConfirmedCallback: (() => void) | undefined = undefined
+	let deleteConfirmedCallback: (() => void) | undefined = $state(undefined)
 
 	async function removeAllInvitesFromDomain() {
 		await Promise.all(
@@ -115,10 +120,12 @@
 		)
 	}
 
-	let nbInviteDisplayed = 50
+	let nbInviteDisplayed = $state(50)
 
-	let showInvites = false
-	$: showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !autoAdd)
+	let showInvites = $state(false)
+	$effect(() => {
+		showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !autoAdd)
+	})
 </script>
 
 <SearchItems
@@ -158,7 +165,7 @@
 			floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 			usePointerDownOutside
 		>
-			<svelte:fragment slot="trigger">
+			{#snippet trigger()}
 				<Button
 					color={auto_invite_domain != undefined ? 'green' : 'red'}
 					variant="border"
@@ -169,14 +176,14 @@
 						? 'ON'
 						: 'OFF'}
 				</Button>
-			</svelte:fragment>
-			<svelte:fragment slot="content">
+			{/snippet}
+			{#snippet content()}
 				<div class="flex flex-col items-start p-4">
 					<span class="text-sm leading-6 font-semibold">
 						{isCloudHosted()
 							? `Auto-add anyone from ${
 									auto_invite_domain != undefined ? auto_invite_domain : domain
-							  }`
+								}`
 							: `Auto-add anyone joining the instance`}
 					</span>
 
@@ -205,10 +212,11 @@
 									autoAdd = e.detail === 'add'
 								}
 							}}
-							let:item
 						>
-							<ToggleButton value="invite" size="xs" label="Auto-invite" {item} />
-							<ToggleButton value="add" size="xs" label="Auto-add" {item} />
+							{#snippet children({ item })}
+								<ToggleButton value="invite" size="xs" label="Auto-invite" {item} />
+								<ToggleButton value="add" size="xs" label="Auto-add" {item} />
+							{/snippet}
 						</ToggleButtonGroup>
 					{/if}
 
@@ -225,7 +233,7 @@
 									requestBody: {
 										operator: e.detail === 'operator',
 										invite_all: !isCloudHosted(),
-										auto_add: showInvites ? autoAdd ?? false : true
+										auto_add: showInvites ? (autoAdd ?? false) : true
 									}
 								})
 								operatorOnly = e.detail === 'operator'
@@ -236,20 +244,21 @@
 								operatorOnly = e.detail === 'operator'
 							}
 						}}
-						let:item
 					>
-						<ToggleButton
-							value="operator"
-							label="Operator"
-							tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-							{item}
-						/>
-						<ToggleButton
-							value="developer"
-							label="Developer"
-							tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-							{item}
-						/>
+						{#snippet children({ item })}
+							<ToggleButton
+								value="operator"
+								label="Operator"
+								tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+								{item}
+							/>
+							<ToggleButton
+								value="developer"
+								label="Developer"
+								tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+								{item}
+							/>
+						{/snippet}
 					</ToggleButtonGroup>
 					<div class="pt-2">
 						<Toggle
@@ -263,8 +272,8 @@
 										? {
 												operator: operatorOnly ?? false,
 												invite_all: !isCloudHosted(),
-												auto_add: showInvites ? autoAdd ?? false : true
-										  }
+												auto_add: showInvites ? (autoAdd ?? false) : true
+											}
 										: { operator: undefined, auto_add: undefined }
 								})
 								loadSettings()
@@ -281,7 +290,7 @@
 						<div class="text-red-400 text-xs">{domain} domain not allowed for auto-add</div>
 					{/if}
 				</div>
-			</svelte:fragment>
+			{/snippet}
 		</Popover>
 		<AddUser
 			on:new={() => {
@@ -358,8 +367,8 @@
 											e.detail == 'admin'
 												? { is_admin: true, operator: false }
 												: e.detail == 'operator'
-												? { is_admin: false, operator: true }
-												: { is_admin: false, operator: false }
+													? { is_admin: false, operator: true }
+													: { is_admin: false, operator: false }
 										await UserService.updateUser({
 											workspace: $workspaceStore ?? '',
 											username,
@@ -367,28 +376,29 @@
 										})
 										listUsers()
 									}}
-									let:item
 								>
-									<ToggleButton
-										value="operator"
-										label="Operator"
-										tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-										{item}
-									/>
+									{#snippet children({ item })}
+										<ToggleButton
+											value="operator"
+											label="Operator"
+											tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+											{item}
+										/>
 
-									<ToggleButton
-										value="developer"
-										label="Developer"
-										tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-										{item}
-									/>
+										<ToggleButton
+											value="developer"
+											label="Developer"
+											tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+											{item}
+										/>
 
-									<ToggleButton
-										value="admin"
-										label="Admin"
-										tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-										{item}
-									/>
+										<ToggleButton
+											value="admin"
+											label="Admin"
+											tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+											{item}
+										/>
+									{/snippet}
 								</ToggleButtonGroup>
 							</div>
 						</Cell>
@@ -486,8 +496,8 @@
 												e.detail == 'admin'
 													? { is_admin: true, operator: false }
 													: e.detail == 'operator'
-													? { is_admin: false, operator: true }
-													: { is_admin: false, operator: false }
+														? { is_admin: false, operator: true }
+														: { is_admin: false, operator: false }
 											await WorkspaceService.inviteUser({
 												workspace: $workspaceStore ?? '',
 												requestBody: {
@@ -497,35 +507,36 @@
 											})
 											listUsers()
 										}}
-										let:item
 									>
-										<ToggleButton
-											value="operator"
-											label="Operator"
-											tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-											{item}
-										/>
+										{#snippet children({ item })}
+											<ToggleButton
+												value="operator"
+												label="Operator"
+												tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+												{item}
+											/>
 
-										<ToggleButton
-											value="developer"
-											label="Developer"
-											tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-											{item}
-										/>
+											<ToggleButton
+												value="developer"
+												label="Developer"
+												tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+												{item}
+											/>
 
-										<ToggleButton
-											value="admin"
-											label="Admin"
-											tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-											{item}
-										/>
+											<ToggleButton
+												value="admin"
+												label="Admin"
+												tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+												{item}
+											/>
+										{/snippet}
 									</ToggleButtonGroup>
 								</div>
 							</Cell>
 							<Cell last>
 								<button
 									class="ml-2 text-red-500"
-									on:click={async () => {
+									onclick={async () => {
 										await WorkspaceService.deleteInvite({
 											workspace: $workspaceStore ?? '',
 											requestBody: {
@@ -554,7 +565,7 @@
 		{#if invites && invites?.length > 50 && nbInviteDisplayed < invites.length}
 			<span class="text-xs"
 				>{nbInviteDisplayed} invites out of {invites.length}
-				<button class="ml-4" on:click={() => (nbInviteDisplayed += 50)}>load 50 more</button></span
+				<button class="ml-4" onclick={() => (nbInviteDisplayed += 50)}>load 50 more</button></span
 			>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/sidebar/FavoriteMenu.svelte b/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
index 3f927030f1..9866e95b23 100644
--- a/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
+++ b/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
@@ -5,19 +5,27 @@
 	import MenuButton from '$lib/components/sidebar/MenuButton.svelte'
 	import type { MenubarBuilders } from '@melt-ui/svelte'
 
-	export let lightMode: boolean = false
+	interface Props {
+		lightMode?: boolean
+		isCollapsed?: boolean
+		favoriteLinks?: any
+		createMenu: MenubarBuilders['createMenu']
+	}
 
-	export let isCollapsed: boolean = false
-	export let favoriteLinks = [] as {
-		label: string
-		href: string
-		kind: 'script' | 'flow' | 'app' | 'raw_app'
-	}[]
-	export let createMenu: MenubarBuilders['createMenu']
+	let {
+		lightMode = false,
+		isCollapsed = false,
+		favoriteLinks = [] as {
+			label: string
+			href: string
+			kind: 'script' | 'flow' | 'app' | 'raw_app'
+		}[],
+		createMenu
+	}: Props = $props()
 </script>
 
-<Menu {createMenu} let:item usePointerDownOutside>
-	<svelte:fragment slot="trigger" let:trigger>
+<Menu {createMenu} usePointerDownOutside>
+	{#snippet triggr({ trigger })}
 		<MenuButton
 			class="!text-xs"
 			icon={Star}
@@ -26,38 +34,40 @@
 			{lightMode}
 			{trigger}
 		/>
-	</svelte:fragment>
+	{/snippet}
 
-	<div class="overflow-hidden" role="none">
-		{#if !favoriteLinks.length}
-			<div class="py-1" role="none">
-				<div class="text-secondary block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
-					Star items first
+	{#snippet children({ item })}
+		<div class="overflow-hidden" role="none">
+			{#if !favoriteLinks.length}
+				<div class="py-1" role="none">
+					<div class="text-secondary block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
+						Star items first
+					</div>
 				</div>
-			</div>
-		{:else}
-			<div class="py-1 w-full max-w-full">
-				{#each favoriteLinks ?? [] as favorite (favorite.href)}
-					<MenuItem
-						href={favorite.href}
-						{item}
-						class="w-full inline-flex flex-row px-4 py-2 data-[highlighted]:bg-surface-hover"
-					>
-						<span class="center-center">
-							{#if favorite.kind == 'script'}
-								<CodeXml size={16} />
-							{:else if favorite.kind == 'flow'}
-								<BarsStaggered size={16} />
-							{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
-								<LayoutDashboard size={16} />
-							{/if}
-						</span>
-						<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
-							{favorite.label}
-						</span>
-					</MenuItem>
-				{/each}
-			</div>
-		{/if}
-	</div>
+			{:else}
+				<div class="py-1 w-full max-w-full">
+					{#each favoriteLinks ?? [] as favorite (favorite.href)}
+						<MenuItem
+							href={favorite.href}
+							{item}
+							class="w-full inline-flex flex-row px-4 py-2 data-[highlighted]:bg-surface-hover"
+						>
+							<span class="center-center">
+								{#if favorite.kind == 'script'}
+									<CodeXml size={16} />
+								{:else if favorite.kind == 'flow'}
+									<BarsStaggered size={16} />
+								{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
+									<LayoutDashboard size={16} />
+								{/if}
+							</span>
+							<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
+								{favorite.label}
+							</span>
+						</MenuItem>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/snippet}
 </Menu>
diff --git a/frontend/src/lib/components/sidebar/MenuButton.svelte b/frontend/src/lib/components/sidebar/MenuButton.svelte
index 456416aa49..2aaa4a1ae0 100644
--- a/frontend/src/lib/components/sidebar/MenuButton.svelte
+++ b/frontend/src/lib/components/sidebar/MenuButton.svelte
@@ -6,9 +6,14 @@
 	import { goto } from '$app/navigation'
 	import { conditionalMelt } from '$lib/utils'
 	import type { MenubarMenuElements } from '@melt-ui/svelte'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
 
+	export let aiId: string | undefined = undefined
+	export let aiDescription: string | undefined = undefined
 	export let label: string | undefined = undefined
 	export let icon: any | undefined = undefined
+	export let iconClasses: string | null = null
+	export let iconProps: any | null = null
 	export let isCollapsed: boolean
 	export let disabled: boolean = false
 	export let lightMode: boolean = false
@@ -19,6 +24,8 @@
 	export let trigger: MenubarMenuElements['trigger'] | undefined = undefined
 	export let href: string | undefined = undefined
 
+	let buttonRef: HTMLButtonElement | undefined = undefined
+
 	let dispatch = createEventDispatcher()
 </script>
 
@@ -30,68 +37,84 @@
 		disablePopup={!isCollapsed}
 		placement="right"
 	>
-		<button
-			on:click={(e) => {
-				if (stopPropagationOnClick) e.preventDefault()
-				if (href) {
-					goto(href)
+		<TriggerableByAI
+			id={aiId}
+			description={aiDescription}
+			onTrigger={() => {
+				if (buttonRef) {
+					buttonRef.click()
 				}
-				dispatch('click')
 			}}
-			class={twMerge(
-				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
-				lightMode
-					? 'text-primary data-[highlighted]:bg-surface-hover hover:bg-surface-hover'
-					: 'data-[highlighted]:bg-[#2A3648] hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
-				color ? 'border-4' : '',
-				'transition-all relative',
-				$$props.class
-			)}
-			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
-			use:conditionalMelt={trigger}
-			title={isCollapsed ? undefined : label}
-			{...$trigger}
 		>
-			{#if icon}
-				<svelte:component
-					this={icon}
-					size={16}
-					class={twMerge(
-						'flex-shrink-0',
-						lightMode
-							? 'text-primary group-hover:text-secondary'
-							: 'text-primary-inverse group-hover:text-secondary-inverse dark:group-hover:text-secondary dark:text-primary',
-						'transition-all'
-					)}
-				/>
-			{/if}
+			<button
+				bind:this={buttonRef}
+				on:click={(e) => {
+					if (stopPropagationOnClick) e.preventDefault()
+					if (href) {
+						goto(href)
+					}
+					dispatch('click')
+				}}
+				class={twMerge(
+					'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
+					lightMode
+						? 'text-primary data-[highlighted]:bg-surface-hover hover:bg-surface-hover'
+						: 'data-[highlighted]:bg-[#2A3648] hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
+					color ? 'border-4' : '',
+					'transition-all relative',
+					$$props.class
+				)}
+				style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
+				use:conditionalMelt={trigger}
+				title={isCollapsed ? undefined : label}
+				{...$trigger}
+			>
+				{#if icon}
+					<svelte:component
+						this={icon}
+						size={16}
+						class={twMerge(
+							'flex-shrink-0',
+							lightMode
+								? 'text-primary group-hover:text-secondary'
+								: 'text-primary-inverse group-hover:text-secondary-inverse dark:group-hover:text-secondary dark:text-primary',
+							'transition-all',
+							iconClasses
+						)}
+						{...iconProps}
+					/>
+				{/if}
 
-			{#if !isCollapsed && label}
-				<span
-					class={twMerge(
-						'whitespace-pre truncate',
-						lightMode ? 'text-primary' : 'text-primary-inverse dark:text-primary',
-						'transition-all',
-						$$props.class
-					)}
-				>
-					{label}
-					<span class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold">
-						{shortcut}
+				{#if !isCollapsed && label}
+					<span
+						class={twMerge(
+							'whitespace-pre truncate',
+							lightMode ? 'text-primary' : 'text-primary-inverse dark:text-primary',
+							'transition-all',
+							$$props.class
+						)}
+					>
+						{label}
+						<span
+							class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold"
+						>
+							{shortcut}
+						</span>
 					</span>
-				</span>
-			{/if}
+				{/if}
+
+				{#if isCollapsed && notificationsCount > 0}
+					<div class="absolute translate-x-1/2 translate-y-1/2 -top-2 right-1 flex h-fit w-fit">
+						<SideBarNotification notificationCount={notificationsCount} small={true} />
+					</div>
+				{:else if notificationsCount > 0}
+					<div class="ml-auto">
+						<SideBarNotification notificationCount={notificationsCount} small={false} />
+					</div>
+				{/if}
+			</button>
+		</TriggerableByAI>
 
-			{#if isCollapsed && notificationsCount > 0}
-				<div class="absolute translate-x-1/2 translate-y-1/2 -top-2 right-1 flex h-fit w-fit">
-					<SideBarNotification notificationCount={notificationsCount} small={true} />
-				</div>
-			{:else if notificationsCount > 0}
-				<div class="ml-auto">
-					<SideBarNotification notificationCount={notificationsCount} small={false} />
-				</div>
-			{/if}
-		</button>
 		<svelte:fragment slot="text">
 			{#if label}
 				{label}
diff --git a/frontend/src/lib/components/sidebar/MenuLink.svelte b/frontend/src/lib/components/sidebar/MenuLink.svelte
index 23cbe38093..88c8bb3070 100644
--- a/frontend/src/lib/components/sidebar/MenuLink.svelte
+++ b/frontend/src/lib/components/sidebar/MenuLink.svelte
@@ -4,7 +4,11 @@
 	import { navigating, page } from '$app/stores'
 	import Popover from '../Popover.svelte'
 	import { base } from '$app/paths'
+	import TriggerableByAI from '$lib/components/TriggerableByAI.svelte'
+	import { goto } from '$app/navigation'
 
+	export let aiId: string | undefined = undefined
+	export let aiDescription: string | undefined = undefined
 	export let label: string
 	export let href: string
 	export let icon: any | undefined = undefined
@@ -25,65 +29,73 @@
 </script>
 
 {#if !disabled}
-	<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
-		<a
-			{href}
-			class={classNames(
-				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
-				isSelected
-					? lightMode
-						? 'bg-surface-selected hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
-						: 'bg-frost-700 hover:bg-[#30404e] data-[highlighted]:bg-[#30404e]'
-					: lightMode
-					? 'hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
-					: 'hover:bg-[#2A3648] data-[highlighted]:bg-[#2A3648]',
+	<TriggerableByAI
+		id={aiId}
+		description={aiDescription}
+		onTrigger={() => {
+			goto(href)
+		}}
+	>
+		<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
+			<a
+				{href}
+				class={classNames(
+					'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
+					isSelected
+						? lightMode
+							? 'bg-surface-selected hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
+							: 'bg-frost-700 hover:bg-[#30404e] data-[highlighted]:bg-[#30404e]'
+						: lightMode
+							? 'hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
+							: 'hover:bg-[#2A3648] data-[highlighted]:bg-[#2A3648]',
 
-				'hover:transition-all',
-				$$props.class
-			)}
-			target={href.includes('http') ? '_blank' : null}
-			title={isCollapsed ? undefined : label}
-			use:conditionalMelt={item}
-			{...$item}
-		>
-			{#if icon}
-				<svelte:component
-					this={icon}
-					size={16}
-					class={classNames(
-						'flex-shrink-0',
-						isSelected
-							? lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-frost-200 group-hover:text-white'
-							: lightMode
-							? 'text-primary group-hover:text-secondary'
-							: 'text-gray-100 group-hover:text-white',
-						'transition-all'
-					)}
-				/>
-			{/if}
+					'hover:transition-all',
+					$$props.class
+				)}
+				target={href.includes('http') ? '_blank' : null}
+				title={isCollapsed ? undefined : label}
+				use:conditionalMelt={item}
+				{...$item}
+			>
+				{#if icon}
+					<svelte:component
+						this={icon}
+						size={16}
+						class={classNames(
+							'flex-shrink-0',
+							isSelected
+								? lightMode
+									? 'text-primary group-hover:text-secondary'
+									: 'text-frost-200 group-hover:text-white'
+								: lightMode
+									? 'text-primary group-hover:text-secondary'
+									: 'text-gray-100 group-hover:text-white',
+							'transition-all'
+						)}
+					/>
+				{/if}
 
-			{#if !isCollapsed}
-				<span
-					class={classNames(
-						'whitespace-pre truncate',
-						isSelected
-							? lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-frost-200 group-hover:text-white'
-							: lightMode
-							? 'text-primary group-hover:text-secondary'
-							: 'text-gray-100 group-hover:text-white',
-						'transition-all duration-75'
-					)}
-				>
-					{label}
-				</span>
-			{/if}
-		</a>
-		<svelte:fragment slot="text">
-			{label}
-		</svelte:fragment>
-	</Popover>
+				{#if !isCollapsed}
+					<span
+						class={classNames(
+							'whitespace-pre truncate',
+							isSelected
+								? lightMode
+									? 'text-primary group-hover:text-secondary'
+									: 'text-frost-200 group-hover:text-white'
+								: lightMode
+									? 'text-primary group-hover:text-secondary'
+									: 'text-gray-100 group-hover:text-white',
+							'transition-all duration-75'
+						)}
+					>
+						{label}
+					</span>
+				{/if}
+			</a>
+			<svelte:fragment slot="text">
+				{label}
+			</svelte:fragment>
+		</Popover>
+	</TriggerableByAI>
 {/if}
diff --git a/frontend/src/lib/components/sidebar/OperatorMenu.svelte b/frontend/src/lib/components/sidebar/OperatorMenu.svelte
index a067be58f0..87c6e9ba01 100644
--- a/frontend/src/lib/components/sidebar/OperatorMenu.svelte
+++ b/frontend/src/lib/components/sidebar/OperatorMenu.svelte
@@ -26,108 +26,119 @@
 	import MenuButton from './MenuButton.svelte'
 	import MenuLink from './MenuLink.svelte'
 	import { onDestroy } from 'svelte'
-	let darkMode: boolean = false
+	let darkMode: boolean = $state(false)
 
-	export let isCollapsed: boolean = false
-	export let favoriteLinks = [] as {
-		label: string
-		href: string
-		kind: 'script' | 'flow' | 'app' | 'raw_app'
-	}[]
+	interface Props {
+		isCollapsed?: boolean
+		favoriteLinks?: any
+	}
 
-	$: mainMenuLinks = [
-		{ label: 'Home', id: 'home', href: `${base}/`, icon: Home },
-		{ label: 'Runs', id: 'runs', href: `${base}/runs`, icon: Play },
-		{ label: 'Schedules', id: 'schedules', href: `${base}/schedules`, icon: Calendar }
-	].filter(
-		(link) =>
-			link.id === 'home' ||
-			($userWorkspaces &&
-				$workspaceStore &&
-				$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] ===
-					true)
+	let {
+		isCollapsed = false,
+		favoriteLinks = [] as {
+			label: string
+			href: string
+			kind: 'script' | 'flow' | 'app' | 'raw_app'
+		}[]
+	}: Props = $props()
+
+	let mainMenuLinks = $derived(
+		[
+			{ label: 'Home', id: 'home', href: `${base}/`, icon: Home },
+			{ label: 'Runs', id: 'runs', href: `${base}/runs`, icon: Play },
+			{ label: 'Schedules', id: 'schedules', href: `${base}/schedules`, icon: Calendar }
+		].filter(
+			(link) =>
+				link.id === 'home' ||
+				($userWorkspaces &&
+					$workspaceStore &&
+					$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] ===
+						true)
+		)
 	)
 
-	$: secondMenuLinks = [
-		{
-			label: 'Resources',
-			id: 'resources',
-			href: `${base}/resources`
-		},
-		{
-			label: 'Variables',
-			id: 'variables',
-			href: `${base}/variables`
-		},
-		{
-			label: 'Custom HTTP routes',
-			id: 'triggers',
-			href: `${base}/routes`
-		},
-		{
-			label: 'Websocket triggers',
-			id: 'triggers',
-			href: `${base}/websocket_triggers`
-		},
-		{
-			label: 'Postgres triggers',
-			id: 'triggers',
-			href: `${base}/postgres_triggers`
-		},
-		{
-			label: 'Kafka triggers',
-			id: 'triggers',
-			href: `${base}/kafka_triggers`
-		},
-		{
-			label: 'NATS triggers',
-			id: 'triggers',
-			href: `${base}/nats_triggers`
-		},
-		{
-			label: 'SQS triggers',
-			id: 'triggers',
-			href: `${base}/sqs_triggers`
-		},
-		{
-			label: 'GCP Pub/Sub triggers',
-			id: 'triggers',
-			href: `${base}/gcp_triggers`
-		},
-		{
-			label: 'MQTT triggers',
-			id: 'triggers',
-			href: `${base}/mqtt_triggers`
-		},
-		{
-			label: 'Audit logs',
-			id: 'audit_logs',
-			href: `${base}/audit_logs`
-		},
-		{
-			label: 'Groups',
-			id: 'groups',
-			href: `${base}/groups`
-		},
-		{
-			label: 'Folders',
-			id: 'folders',
-			href: `${base}/folders`
-		},
-		{
-			label: 'Workers',
-			id: 'workers',
-			href: `${base}/workers`
-		}
-	].filter((link) => {
-		if (!$userWorkspaces || !$workspaceStore) return false
-		return (
-			$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] === true
-		)
-	})
+	let secondMenuLinks = $derived(
+		[
+			{
+				label: 'Resources',
+				id: 'resources',
+				href: `${base}/resources`
+			},
+			{
+				label: 'Variables',
+				id: 'variables',
+				href: `${base}/variables`
+			},
+			{
+				label: 'Custom HTTP routes',
+				id: 'triggers',
+				href: `${base}/routes`
+			},
+			{
+				label: 'Websocket triggers',
+				id: 'triggers',
+				href: `${base}/websocket_triggers`
+			},
+			{
+				label: 'Postgres triggers',
+				id: 'triggers',
+				href: `${base}/postgres_triggers`
+			},
+			{
+				label: 'Kafka triggers',
+				id: 'triggers',
+				href: `${base}/kafka_triggers`
+			},
+			{
+				label: 'NATS triggers',
+				id: 'triggers',
+				href: `${base}/nats_triggers`
+			},
+			{
+				label: 'SQS triggers',
+				id: 'triggers',
+				href: `${base}/sqs_triggers`
+			},
+			{
+				label: 'GCP Pub/Sub triggers',
+				id: 'triggers',
+				href: `${base}/gcp_triggers`
+			},
+			{
+				label: 'MQTT triggers',
+				id: 'triggers',
+				href: `${base}/mqtt_triggers`
+			},
+			{
+				label: 'Audit logs',
+				id: 'audit_logs',
+				href: `${base}/audit_logs`
+			},
+			{
+				label: 'Groups',
+				id: 'groups',
+				href: `${base}/groups`
+			},
+			{
+				label: 'Folders',
+				id: 'folders',
+				href: `${base}/folders`
+			},
+			{
+				label: 'Workers',
+				id: 'workers',
+				href: `${base}/workers`
+			}
+		].filter((link) => {
+			if (!$userWorkspaces || !$workspaceStore) return false
+			return (
+				$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] === true
+			)
+		})
+	)
 
-	let moreOpen = false
-	let moreOpenTimeout: NodeJS.Timeout | undefined
+	let moreOpen = $state(false)
+	let moreOpenTimeout: NodeJS.Timeout | undefined = $state()
 
 	function debouncedSetMoreOpen(value: boolean) {
 		if (moreOpenTimeout) {
@@ -145,187 +156,191 @@
 	})
 </script>
 
-<Menubar let:createMenu>
-	<Menu {createMenu} let:item usePointerDownOutside>
-		<svelte:fragment slot="trigger" let:trigger>
-			<MenuButton
-				class="!text-xs"
-				icon={MenuIcon}
-				{isCollapsed}
-				lightMode
-				label={undefined}
-				{trigger}
-			/>
-		</svelte:fragment>
-		<div class="w-full max-w-full">
-			{#each favoriteLinks ?? [] as favorite (favorite.href)}
-				<MenuItem
-					href={favorite.href}
-					{item}
-					class={twMerge(
-						'w-full inline-flex flex-row px-2 py-2 hover:bg-surface-hover',
-						'data-[highlighted]:bg-surface-hover'
-					)}
-				>
-					<span class="center-center">
-						{#if favorite.kind == 'script'}
-							<Code2 size={16} />
-						{:else if favorite.kind == 'flow'}
-							<BarsStaggered size={16} />
-						{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
-							<LayoutDashboard size={16} />
-						{/if}
-					</span>
-					<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
-						{favorite.label}
-					</span>
-				</MenuItem>
-			{/each}
-		</div>
+<Menubar>
+	{#snippet children({ createMenu })}
+		<Menu {createMenu} usePointerDownOutside>
+			{#snippet triggr({ trigger })}
+				<MenuButton
+					class="!text-xs"
+					icon={MenuIcon}
+					{isCollapsed}
+					lightMode
+					label={undefined}
+					{trigger}
+				/>
+			{/snippet}
+			{#snippet children({ item })}
+				<div class="w-full max-w-full">
+					{#each favoriteLinks ?? [] as favorite (favorite.href)}
+						<MenuItem
+							href={favorite.href}
+							{item}
+							class={twMerge(
+								'w-full inline-flex flex-row px-2 py-2 hover:bg-surface-hover',
+								'data-[highlighted]:bg-surface-hover'
+							)}
+						>
+							<span class="center-center">
+								{#if favorite.kind == 'script'}
+									<Code2 size={16} />
+								{:else if favorite.kind == 'flow'}
+									<BarsStaggered size={16} />
+								{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
+									<LayoutDashboard size={16} />
+								{/if}
+							</span>
+							<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
+								{favorite.label}
+							</span>
+						</MenuItem>
+					{/each}
+				</div>
 
-		{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-			<MenuLink class="!text-xs" {...menuLink} {isCollapsed} lightMode {item} />
-		{/each}
+				{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} lightMode {item} />
+				{/each}
 
-		<div class="divide-y" role="none">
-			<div role="none">
-				<MenuItem
-					href={USER_SETTINGS_HASH}
-					class={twMerge(
-						'flex flex-row gap-3.5 items-center px-2 py-2 ',
-						'text-secondary text-xs',
-						'hover:bg-surface-hover hover:text-primary cursor-pointer',
-						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-					)}
-					{item}
-				>
-					<Settings size={14} />
-					Account settings
-				</MenuItem>
-			</div>
+				<div class="divide-y" role="none">
+					<div role="none">
+						<MenuItem
+							href={USER_SETTINGS_HASH}
+							class={twMerge(
+								'flex flex-row gap-3.5 items-center px-2 py-2 ',
+								'text-secondary text-xs',
+								'hover:bg-surface-hover hover:text-primary cursor-pointer',
+								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+							)}
+							{item}
+						>
+							<Settings size={14} />
+							Account settings
+						</MenuItem>
+					</div>
 
-			<div role="none">
-				<MenuItem
-					on:click={() => {
-						if (!document.documentElement.classList.contains('dark')) {
-							document.documentElement.classList.add('dark')
-							window.localStorage.setItem('dark-mode', 'dark')
-						} else {
-							document.documentElement.classList.remove('dark')
-							window.localStorage.setItem('dark-mode', 'light')
-						}
-					}}
-					class={twMerge(
-						'text-secondary block text-left px-2 py-2 font-normal text-xs hover:bg-surface-hover hover:text-primary w-full',
-						'flex flex-row items-center gap-3.5 ',
-						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-					)}
-					{item}
-				>
-					{#if darkMode}
-						<Sun size={14} />
-					{:else}
-						<Moon size={14} />
-					{/if}
-					Switch theme
-				</MenuItem>
-				<MenuItem
-					href="{base}/user/workspaces"
-					on:click={() => {
-						localStorage.removeItem('workspace')
-					}}
-					class={twMerge(
-						'text-primary flex gap-3.5 px-2 py-2 text-xs hover:bg-surface-hover hover:text-primary',
-						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-					)}
-					{item}
-				>
-					<Building size={14} />
-					All workspaces
-				</MenuItem>
+					<div role="none">
+						<MenuItem
+							on:click={() => {
+								if (!document.documentElement.classList.contains('dark')) {
+									document.documentElement.classList.add('dark')
+									window.localStorage.setItem('dark-mode', 'dark')
+								} else {
+									document.documentElement.classList.remove('dark')
+									window.localStorage.setItem('dark-mode', 'light')
+								}
+							}}
+							class={twMerge(
+								'text-secondary block text-left px-2 py-2 font-normal text-xs hover:bg-surface-hover hover:text-primary w-full',
+								'flex flex-row items-center gap-3.5 ',
+								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+							)}
+							{item}
+						>
+							{#if darkMode}
+								<Sun size={14} />
+							{:else}
+								<Moon size={14} />
+							{/if}
+							Switch theme
+						</MenuItem>
+						<MenuItem
+							href="{base}/user/workspaces"
+							on:click={() => {
+								localStorage.removeItem('workspace')
+							}}
+							class={twMerge(
+								'text-primary flex gap-3.5 px-2 py-2 text-xs hover:bg-surface-hover hover:text-primary',
+								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+							)}
+							{item}
+						>
+							<Building size={14} />
+							All workspaces
+						</MenuItem>
 
-				{#if $superadmin}
-					<MenuItem
-						href="#superadmin-settings"
-						class={twMerge(
-							'flex flex-row gap-3.5 items-center px-2 py-2 ',
-							'text-secondary text-xs',
-							'hover:bg-surface-hover hover:text-primary cursor-pointer',
-							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-						)}
-						{item}
-					>
-						<ServerCog size={14} />
-						Instance settings
-					</MenuItem>
-				{/if}
-
-				<MenuItem
-					on:click={() => logout()}
-					class={twMerge(
-						'flex flex-row gap-3.5  items-center px-2 py-2 w-full',
-						'text-secondary text-xs',
-						'hover:bg-surface-hover hover:text-primary cursor-pointer',
-						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-					)}
-					{item}
-				>
-					<LogOut size={14} />
-					Sign out
-				</MenuItem>
-			</div>
-			<div
-				on:mouseenter={() => debouncedSetMoreOpen(true)}
-				on:mouseleave={() => debouncedSetMoreOpen(false)}
-				role="none"
-			>
-				<MenuItem
-					on:m-focusin={() => debouncedSetMoreOpen(true)}
-					on:m-focusout={() => debouncedSetMoreOpen(false)}
-					{item}
-				>
-					{#if !moreOpen || secondMenuLinks.length === 0}
-						<div class="px-2 py-2 text-tertiary text-2xs">More...</div>
-					{/if}
-				</MenuItem>
-				{#if moreOpen && secondMenuLinks.length > 0}
-					{#each secondMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-						<div>
+						{#if $superadmin}
 							<MenuItem
-								href={menuLink.href}
+								href="#superadmin-settings"
 								class={twMerge(
-									'flex flex-row gap-3.5 items-center px-2 py-2 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer',
+									'flex flex-row gap-3.5 items-center px-2 py-2 ',
+									'text-secondary text-xs',
+									'hover:bg-surface-hover hover:text-primary cursor-pointer',
 									'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 								)}
 								{item}
-								on:m-focusin={() => debouncedSetMoreOpen(true)}
-								on:m-focusout={() => debouncedSetMoreOpen(false)}
 							>
-								{menuLink.label}
+								<ServerCog size={14} />
+								Instance settings
 							</MenuItem>
-						</div>
-					{/each}
+						{/if}
+
+						<MenuItem
+							on:click={() => logout()}
+							class={twMerge(
+								'flex flex-row gap-3.5  items-center px-2 py-2 w-full',
+								'text-secondary text-xs',
+								'hover:bg-surface-hover hover:text-primary cursor-pointer',
+								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+							)}
+							{item}
+						>
+							<LogOut size={14} />
+							Sign out
+						</MenuItem>
+					</div>
+					<div
+						onmouseenter={() => debouncedSetMoreOpen(true)}
+						onmouseleave={() => debouncedSetMoreOpen(false)}
+						role="none"
+					>
+						<MenuItem
+							on:m-focusin={() => debouncedSetMoreOpen(true)}
+							on:m-focusout={() => debouncedSetMoreOpen(false)}
+							{item}
+						>
+							{#if !moreOpen || secondMenuLinks.length === 0}
+								<div class="px-2 py-2 text-tertiary text-2xs">More...</div>
+							{/if}
+						</MenuItem>
+						{#if moreOpen && secondMenuLinks.length > 0}
+							{#each secondMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+								<div>
+									<MenuItem
+										href={menuLink.href}
+										class={twMerge(
+											'flex flex-row gap-3.5 items-center px-2 py-2 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer',
+											'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+										)}
+										{item}
+										on:m-focusin={() => debouncedSetMoreOpen(true)}
+										on:m-focusout={() => debouncedSetMoreOpen(false)}
+									>
+										{menuLink.label}
+									</MenuItem>
+								</div>
+							{/each}
+						{/if}
+					</div>
+				</div>
+				{#if $enterpriseLicense}
+					<div
+						onmouseenter={() => {
+							if (moreOpenTimeout) {
+								setTimeout(() => {
+									clearTimeout(moreOpenTimeout)
+								}, 15)
+							}
+						}}
+						onmouseleave={() => {
+							debouncedSetMoreOpen(false)
+						}}
+						role="none"
+					>
+						<MultiplayerMenu />
+					</div>
 				{/if}
-			</div>
-		</div>
-		{#if $enterpriseLicense}
-			<div
-				on:mouseenter={() => {
-					if (moreOpenTimeout) {
-						setTimeout(() => {
-							clearTimeout(moreOpenTimeout)
-						}, 15)
-					}
-				}}
-				on:mouseleave={() => {
-					debouncedSetMoreOpen(false)
-				}}
-				role="none"
-			>
-				<MultiplayerMenu />
-			</div>
-		{/if}
-	</Menu>
+			{/snippet}
+		</Menu>
+	{/snippet}
 </Menubar>
 
 <DarkModeObserver bind:darkMode />
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index 2c4d32139e..5399a3490e 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -62,31 +62,6 @@
 	import MenuButton from './MenuButton.svelte'
 	import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte'
 
-	export let numUnacknowledgedCriticalAlerts = 0
-
-	$: mainMenuLinks = [
-		{ label: 'Home', href: `${base}/`, icon: Home },
-		{ label: 'Runs', href: `${base}/runs`, icon: Play },
-		{
-			label: 'Variables',
-			href: `${base}/variables`,
-			icon: DollarSign,
-			disabled: $userStore?.operator
-		},
-		{ label: 'Resources', href: `${base}/resources`, icon: Boxes, disabled: $userStore?.operator }
-	]
-
-	$: triggerMenuLinks = [
-		{
-			label: 'Schedules',
-			href: `${base}/schedules`,
-			icon: Calendar,
-			disabled: !SIDEBAR_SHOW_SCHEDULES || $userStore?.operator
-		},
-		...defaultExtraTriggerLinks.filter(
-			(link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href)
-		)
-	]
 	async function leaveWorkspace() {
 		await WorkspaceService.leaveWorkspace({ workspace: $workspaceStore ?? '' })
 		sendUserToast('You left the workspace')
@@ -94,186 +69,8 @@
 		goto('/user/workspaces')
 	}
 
-	$: defaultExtraTriggerLinks = [
-		{
-			label: 'HTTP',
-			href: '/routes',
-			icon: Route,
-			disabled: $userStore?.operator,
-			kind: 'http'
-		},
-		{
-			label: 'WebSockets',
-			href: '/websocket_triggers',
-			icon: Unplug,
-			disabled: $userStore?.operator,
-			kind: 'ws'
-		},
-		{
-			label: 'Postgres',
-			href: '/postgres_triggers',
-			icon: Database,
-			disabled: $userStore?.operator,
-			kind: 'postgres'
-		},
-		{
-			label: 'Kafka' + ($enterpriseLicense ? '' : ' (EE)'),
-			href: '/kafka_triggers',
-			icon: KafkaIcon,
-			disabled: $userStore?.operator || !$enterpriseLicense,
-			kind: 'kafka'
-		},
-		{
-			label: 'NATS' + ($enterpriseLicense ? '' : ' (EE)'),
-			href: '/nats_triggers',
-			icon: NatsIcon,
-			disabled: $userStore?.operator || !$enterpriseLicense,
-			kind: 'nats'
-		},
-		{
-			label: 'SQS' + ($enterpriseLicense ? '' : ' (EE)'),
-			href: '/sqs_triggers',
-			icon: AwsIcon,
-			disabled: $userStore?.operator || !$enterpriseLicense,
-			kind: 'sqs'
-		},
-		{
-			label: 'GCP Pub/Sub' + ($enterpriseLicense ? '' : ' (EE)'),
-			href: '/gcp_triggers',
-			icon: GoogleCloudIcon,
-			disabled: $userStore?.operator || !$enterpriseLicense,
-			kind: 'gcp'
-		},
-		{
-			label: 'MQTT',
-			href: '/mqtt_triggers',
-			icon: MqttIcon,
-			disabled: $userStore?.operator,
-			kind: 'mqtt'
-		}
-	]
-
-	$: extraTriggerLinks = defaultExtraTriggerLinks.filter((link) => {
-		return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind)
-	})
-	$: secondaryMenuLinks = [
-		// {
-		// 	label: 'Workspace',
-		// 	href: '/workspace_settings',
-		// 	icon: Cog,
-		// 	disabled: !$userStore?.is_admin && !$userStore?.is_super_admin
-		// },
-		{
-			label: 'Settings',
-			icon: Settings,
-			subItems: [
-				{
-					label: 'Account',
-					href: '#user-settings',
-					icon: UserCog,
-					faIcon: undefined
-				},
-				...($userStore?.is_admin || $superadmin
-					? [
-							{
-								label: 'Workspace',
-								href: `${base}/workspace_settings`,
-								icon: FolderCog,
-								faIcon: undefined
-							}
-						]
-					: []),
-				...($superadmin
-					? [
-							{
-								label: 'Instance',
-								href: '#superadmin-settings',
-								icon: ServerCog,
-								faIcon: undefined
-							}
-						]
-					: []),
-				...(!$superadmin && !$userStore?.is_admin
-					? [
-							{
-								label: 'Leave workspace',
-								action: () => {
-									leaveWorkspaceModal = true
-								},
-								class: 'text-red-400',
-								icon: LogOut,
-								faIcon: undefined
-							}
-						]
-					: [])
-			],
-			disabled: $userStore?.operator
-		},
-		{ label: 'Workers', href: `${base}/workers`, icon: Bot, disabled: $userStore?.operator },
-		{
-			label: 'Folders & Groups',
-			icon: FolderOpen,
-			subItems: [
-				{
-					label: 'Folders',
-					href: `${base}/folders`,
-					icon: FolderOpen,
-					disabled: $userStore?.operator,
-					faIcon: undefined
-				},
-				{
-					label: 'Groups',
-					href: `${base}/groups`,
-					icon: UserCog,
-					disabled: $userStore?.operator,
-					faIcon: undefined
-				}
-			],
-			disabled: $userStore?.operator
-		},
-		$devopsRole || $userStore?.is_admin
-			? {
-					label: 'Logs',
-					icon: Logs,
-					subItems: [
-						{
-							label: 'Audit logs',
-							href: `${base}/audit_logs`,
-							icon: Eye
-						},
-						...($devopsRole
-							? [
-									{
-										label: 'Service logs',
-										href: `${base}/service_logs`,
-										icon: Logs
-									}
-								]
-							: []),
-						...($enterpriseLicense
-							? [
-									{
-										label: 'Critical alerts',
-										action: () => {
-											isCriticalAlertsUIOpen.set(true)
-										},
-										icon: AlertCircle,
-										notificationCount: numUnacknowledgedCriticalAlerts
-									}
-								]
-							: [])
-					]
-				}
-			: {
-					label: 'Audit logs',
-					href: `${base}/audit_logs`,
-					icon: Eye,
-					disabled: $userStore?.operator
-				}
-	]
-
-	let hasNewChangelogs = false
-	let recentChangelogs: Changelog[] = []
+	let hasNewChangelogs = $state(false)
+	let recentChangelogs: Changelog[] = $state([])
 	let lastOpened = localStorage.getItem('changelogsLastOpened')
 
 	onMount(() => {
@@ -298,29 +95,46 @@
 			label: 'Help',
 			icon: HelpCircle,
 			subItems: [
-				{ label: 'Docs', href: 'https://www.windmill.dev/docs/intro/', icon: BookOpen },
+				{
+					label: 'Docs',
+					href: 'https://www.windmill.dev/docs/intro/',
+					icon: BookOpen,
+					aiId: 'sidebar-menu-link-docs',
+					aiDescription: 'Button to navigate to docs'
+				},
 				{
 					label: 'Feedbacks',
 					href: 'https://discord.gg/V7PM2YHsPB',
-					icon: DiscordIcon
+					icon: DiscordIcon,
+					aiId: 'sidebar-menu-link-feedbacks',
+					aiDescription: 'Button to navigate to feedbacks'
 				},
 				{
 					label: 'Issues',
 					href: 'https://github.com/windmill-labs/windmill/issues/new',
-					icon: Github
+					icon: Github,
+					aiId: 'sidebar-menu-link-issues',
+					aiDescription: 'Button to navigate to issues'
 				},
 				{
 					label: 'Changelog',
 					href: 'https://www.windmill.dev/changelog/',
-					icon: Newspaper
+					icon: Newspaper,
+					aiId: 'sidebar-menu-link-changelog',
+					aiDescription: 'Button to navigate to changelog'
 				}
 			]
 		}
 	]
 
-	export let isCollapsed: boolean = false
+	interface Props {
+		numUnacknowledgedCriticalAlerts?: number
+		isCollapsed?: boolean
+	}
 
-	let leaveWorkspaceModal = false
+	let { numUnacknowledgedCriticalAlerts = 0, isCollapsed = false }: Props = $props()
+
+	let leaveWorkspaceModal = $state(false)
 
 	function computeAllNotificationsCount(menuItems: any[]) {
 		let count = 0
@@ -333,6 +147,278 @@
 	const itemClass = twMerge(
 		'text-secondary font-normal w-full block px-4 py-2 text-2xs data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 	)
+	let mainMenuLinks = $derived([
+		{
+			label: 'Home',
+			href: `${base}/`,
+			icon: Home,
+			aiId: 'sidebar-menu-link-home',
+			aiDescription:
+				"Button to navigate to home which contains all the user's scripts, flows and apps"
+		},
+		{
+			label: 'Runs',
+			href: `${base}/runs`,
+			icon: Play,
+			aiId: 'sidebar-menu-link-runs',
+			aiDescription: 'Button to navigate to runs'
+		},
+		{
+			label: 'Variables',
+			href: `${base}/variables`,
+			icon: DollarSign,
+			disabled: $userStore?.operator,
+			aiId: 'sidebar-menu-link-variables',
+			aiDescription: 'Button to navigate to variables'
+		},
+		{
+			label: 'Resources',
+			href: `${base}/resources`,
+			icon: Boxes,
+			disabled: $userStore?.operator,
+			aiId: 'sidebar-menu-link-resources',
+			aiDescription: 'Button to navigate to resources'
+		}
+	])
+	let defaultExtraTriggerLinks = $derived([
+		{
+			label: 'HTTP',
+			href: '/routes',
+			icon: Route,
+			disabled: $userStore?.operator,
+			kind: 'http',
+			aiId: 'sidebar-menu-link-http',
+			aiDescription: 'Button to navigate to HTTP routes'
+		},
+		{
+			label: 'WebSockets',
+			href: '/websocket_triggers',
+			icon: Unplug,
+			disabled: $userStore?.operator,
+			kind: 'ws',
+			aiId: 'sidebar-menu-link-ws',
+			aiDescription: 'Button to navigate to websocket triggers'
+		},
+		{
+			label: 'Postgres',
+			href: '/postgres_triggers',
+			icon: Database,
+			disabled: $userStore?.operator,
+			kind: 'postgres',
+			aiId: 'sidebar-menu-link-postgres',
+			aiDescription: 'Button to navigate to Postgres triggers'
+		},
+		{
+			label: 'Kafka' + ($enterpriseLicense ? '' : ' (EE)'),
+			href: '/kafka_triggers',
+			icon: KafkaIcon,
+			disabled: $userStore?.operator || !$enterpriseLicense,
+			kind: 'kafka',
+			aiId: 'sidebar-menu-link-kafka',
+			aiDescription: 'Button to navigate to Kafka triggers'
+		},
+		{
+			label: 'NATS' + ($enterpriseLicense ? '' : ' (EE)'),
+			href: '/nats_triggers',
+			icon: NatsIcon,
+			disabled: $userStore?.operator || !$enterpriseLicense,
+			kind: 'nats',
+			aiId: 'sidebar-menu-link-nats',
+			aiDescription: 'Button to navigate to NATS triggers'
+		},
+		{
+			label: 'SQS' + ($enterpriseLicense ? '' : ' (EE)'),
+			href: '/sqs_triggers',
+			icon: AwsIcon,
+			disabled: $userStore?.operator || !$enterpriseLicense,
+			kind: 'sqs',
+			aiId: 'sidebar-menu-link-sqs',
+			aiDescription: 'Button to navigate to SQS triggers'
+		},
+		{
+			label: 'GCP Pub/Sub' + ($enterpriseLicense ? '' : ' (EE)'),
+			href: '/gcp_triggers',
+			icon: GoogleCloudIcon,
+			disabled: $userStore?.operator || !$enterpriseLicense,
+			kind: 'gcp',
+			aiId: 'sidebar-menu-link-gcp',
+			aiDescription: 'Button to navigate to GCP Pub/Sub triggers'
+		},
+		{
+			label: 'MQTT',
+			href: '/mqtt_triggers',
+			icon: MqttIcon,
+			disabled: $userStore?.operator,
+			kind: 'mqtt',
+			aiId: 'sidebar-menu-link-mqtt',
+			aiDescription: 'Button to navigate to MQTT triggers'
+		}
+	])
+	let triggerMenuLinks = $derived([
+		{
+			label: 'Schedules',
+			href: `${base}/schedules`,
+			icon: Calendar,
+			disabled: !SIDEBAR_SHOW_SCHEDULES || $userStore?.operator,
+			aiId: 'sidebar-menu-link-schedules',
+			aiDescription: 'Button to navigate to schedules'
+		},
+		...defaultExtraTriggerLinks.filter(
+			(link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href)
+		)
+	])
+	let extraTriggerLinks = $derived(
+		defaultExtraTriggerLinks.filter((link) => {
+			return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind)
+		})
+	)
+	let secondaryMenuLinks = $derived([
+		// {
+		// 	label: 'Workspace',
+		// 	href: '/workspace_settings',
+		// 	icon: Cog,
+		// 	disabled: !$userStore?.is_admin && !$userStore?.is_super_admin
+		// },
+		{
+			label: 'Settings',
+			icon: Settings,
+			aiId: 'sidebar-menu-link-settings',
+			aiDescription:
+				'Button to navigate to settings, including account, workspace, and instance settings',
+			subItems: [
+				{
+					label: 'Account',
+					href: '#user-settings',
+					icon: UserCog,
+					aiId: 'sidebar-menu-link-account',
+					aiDescription: 'Button to navigate to account settings',
+					faIcon: undefined
+				},
+				...($userStore?.is_admin || $superadmin
+					? [
+							{
+								label: 'Workspace',
+								href: `${base}/workspace_settings`,
+								icon: FolderCog,
+								aiId: 'sidebar-menu-link-workspace',
+								aiDescription: 'Button to navigate to workspace settings',
+								faIcon: undefined
+							}
+						]
+					: []),
+				...($superadmin
+					? [
+							{
+								label: 'Instance',
+								href: '#superadmin-settings',
+								icon: ServerCog,
+								aiId: 'sidebar-menu-link-instance',
+								aiDescription: 'Button to navigate to instance settings',
+								faIcon: undefined
+							}
+						]
+					: []),
+				...(!$superadmin && !$userStore?.is_admin
+					? [
+							{
+								label: 'Leave workspace',
+								action: () => {
+									leaveWorkspaceModal = true
+								},
+								class: 'text-red-400',
+								icon: LogOut,
+								faIcon: undefined
+							}
+						]
+					: [])
+			],
+			disabled: $userStore?.operator
+		},
+		{
+			label: 'Workers',
+			href: `${base}/workers`,
+			icon: Bot,
+			disabled: $userStore?.operator,
+			aiId: 'sidebar-menu-link-workers',
+			aiDescription: 'Button to navigate to workers'
+		},
+		{
+			label: 'Folders & Groups',
+			icon: FolderOpen,
+			aiId: 'sidebar-menu-link-folders-groups',
+			aiDescription: 'Button to navigate to folders and groups',
+			subItems: [
+				{
+					label: 'Folders',
+					href: `${base}/folders`,
+					icon: FolderOpen,
+					disabled: $userStore?.operator,
+					aiId: 'sidebar-menu-link-folders',
+					aiDescription: 'Button to navigate to folders',
+					faIcon: undefined
+				},
+				{
+					label: 'Groups',
+					href: `${base}/groups`,
+					icon: UserCog,
+					disabled: $userStore?.operator,
+					aiId: 'sidebar-menu-link-groups',
+					aiDescription: 'Button to navigate to groups',
+					faIcon: undefined
+				}
+			],
+			disabled: $userStore?.operator
+		},
+		$devopsRole || $userStore?.is_admin
+			? {
+					label: 'Logs',
+					icon: Logs,
+					aiId: 'sidebar-menu-link-logs',
+					aiDescription: 'Button to navigate to logs',
+					subItems: [
+						{
+							label: 'Audit logs',
+							href: `${base}/audit_logs`,
+							icon: Eye,
+							aiId: 'sidebar-menu-link-audit-logs',
+							aiDescription: 'Button to navigate to audit logs'
+						},
+						...($devopsRole
+							? [
+									{
+										label: 'Service logs',
+										href: `${base}/service_logs`,
+										icon: Logs,
+										aiId: 'sidebar-menu-link-service-logs',
+										aiDescription: 'Button to navigate to service logs'
+									}
+								]
+							: []),
+						...($enterpriseLicense
+							? [
+									{
+										label: 'Critical alerts',
+										action: () => {
+											isCriticalAlertsUIOpen.set(true)
+										},
+										icon: AlertCircle,
+										notificationCount: numUnacknowledgedCriticalAlerts,
+										aiId: 'sidebar-menu-link-critical-alerts',
+										aiDescription: 'Button to navigate to critical alerts'
+									}
+								]
+							: [])
+					]
+				}
+			: {
+					label: 'Audit logs',
+					href: `${base}/audit_logs`,
+					icon: Eye,
+					disabled: $userStore?.operator,
+					aiId: 'sidebar-menu-link-audit-logs',
+					aiDescription: 'Button to navigate to audit logs'
+				}
+	])
 </script>
 
 <nav
@@ -351,151 +437,174 @@
 				class="text-gray-400 text-[0.5rem] uppercase transition-opacity"
 				class:opacity-0={isCollapsed}>Triggers</div
 			>
-			<Menubar let:createMenu class="flex flex-col gap-1">
-				{#each triggerMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
-				{/each}
-				{#if extraTriggerLinks.length > 0 && !$userStore?.operator}
-					<Menu {createMenu} let:item usePointerDownOutside>
-						<svelte:fragment slot="trigger" let:trigger>
-							<MeltButton
-								class={twMerge(
-									'w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded',
-									'data-[highlighted]:bg-[#2A3648] dark:data-[highlighted]:bg-[#30404e]'
-								)}
-								meltElement={trigger}
-							>
-								<Plus size={14} />
-							</MeltButton>
-						</svelte:fragment>
-						{#each extraTriggerLinks as subItem (subItem.href ?? subItem.label)}
-							<MenuItem
-								href={subItem.disabled ? '' : subItem.href}
-								class={twMerge(itemClass, subItem.disabled ? 'pointer-events-none opacity-50' : '')}
-								{item}
-								disabled={subItem.disabled}
-							>
-								<div class="flex flex-row items-center gap-2">
-									{#if subItem.icon}
-										<svelte:component this={subItem.icon} size={16} />
-									{/if}
-									{subItem.label}
-								</div>
-							</MenuItem>
-						{/each}
-					</Menu>
-				{/if}
+			<Menubar class="flex flex-col gap-1">
+				{#snippet children({ createMenu })}
+					{#each triggerMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+						<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
+					{/each}
+					{#if extraTriggerLinks.length > 0 && !$userStore?.operator}
+						<Menu {createMenu} usePointerDownOutside>
+							{#snippet triggr({ trigger })}
+								<MeltButton
+									aiId="sidebar-menu-link-add-trigger"
+									aiDescription="Button to add a new trigger. Can be HTTP, WebSocket, Postgres, Kafka, NATS, SQS, GCP Pub/Sub, or MQTT"
+									class={twMerge(
+										'w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded',
+										'data-[highlighted]:bg-[#2A3648] dark:data-[highlighted]:bg-[#30404e]'
+									)}
+									meltElement={trigger}
+								>
+									<Plus size={14} />
+								</MeltButton>
+							{/snippet}
+							{#snippet children({ item })}
+								{#each extraTriggerLinks as subItem (subItem.href ?? subItem.label)}
+									<MenuItem
+										aiId={subItem.aiId}
+										aiDescription={subItem.aiDescription}
+										href={subItem.disabled ? '' : subItem.href}
+										class={twMerge(
+											itemClass,
+											subItem.disabled ? 'pointer-events-none opacity-50' : ''
+										)}
+										{item}
+										disabled={subItem.disabled}
+									>
+										<div class="flex flex-row items-center gap-2">
+											{#if subItem.icon}
+												<subItem.icon size={16} />
+											{/if}
+											{subItem.label}
+										</div>
+									</MenuItem>
+								{/each}
+							{/snippet}
+						</Menu>
+					{/if}
+				{/snippet}
 			</Menubar>
 		</div>
 	</div>
 	<div class="flex flex-col h-full justify-end">
-		<Menubar let:createMenu class="flex flex-col gap-1 mb-6 md:mb-10">
-			<UserMenu {isCollapsed} {createMenu} />
+		<Menubar class="flex flex-col gap-1 mb-6 md:mb-10">
+			{#snippet children({ createMenu })}
+				<UserMenu {isCollapsed} {createMenu} />
 
-			{#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-				{#if menuLink.subItems}
-					{@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)}
-					<Menu {createMenu} let:item usePointerDownOutside>
-						<svelte:fragment slot="trigger" let:trigger>
-							<MenuButton
-								class="!text-2xs"
-								{...menuLink}
-								{isCollapsed}
-								{notificationsCount}
-								{trigger}
-							/>
-						</svelte:fragment>
+				{#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+					{#if menuLink.subItems}
+						{@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)}
+						<Menu {createMenu} usePointerDownOutside>
+							{#snippet triggr({ trigger })}
+								<MenuButton
+									class="!text-2xs"
+									{...menuLink}
+									{isCollapsed}
+									{notificationsCount}
+									{trigger}
+								/>
+							{/snippet}
 
-						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-							<MenuItem
-								class={itemClass}
-								href={subItem.href}
-								{item}
-								on:click={() => {
-									subItem?.['action']?.()
-								}}
-							>
-								<div class="flex flex-row items-center gap-2">
-									{#if subItem.icon}
-										<svelte:component this={subItem.icon} size={16} />
-									{/if}
-									{subItem.label}
-									{#if subItem?.['notificationCount']}
-										<div class="ml-auto">
-											<SideBarNotification notificationCount={subItem['notificationCount']} />
+							{#snippet children({ item })}
+								{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
+									<MenuItem
+										class={itemClass}
+										href={subItem.href}
+										{item}
+										on:click={() => {
+											subItem?.['action']?.()
+										}}
+										aiId={subItem.aiId}
+										aiDescription={subItem.aiDescription}
+									>
+										<div class="flex flex-row items-center gap-2">
+											{#if subItem.icon}
+												<subItem.icon size={16} />
+											{/if}
+											{subItem.label}
+											{#if subItem?.['notificationCount']}
+												<div class="ml-auto">
+													<SideBarNotification notificationCount={subItem['notificationCount']} />
+												</div>
+											{/if}
 										</div>
-									{/if}
+									</MenuItem>
+								{/each}
+							{/snippet}
+						</Menu>
+					{:else}
+						<MenuSingleItem {createMenu}>
+							{#snippet triggr({ trigger })}
+								<div class="w-full">
+									<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
 								</div>
-							</MenuItem>
-						{/each}
-					</Menu>
-				{:else}
-					<MenuSingleItem {createMenu} let:item>
-						<svelte:fragment slot="trigger" let:trigger>
-							<div class="w-full">
-								<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
-							</div>
-						</svelte:fragment>
-						<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} {item} />
-					</MenuSingleItem>
-				{/if}
-			{/each}
+							{/snippet}
+							{#snippet children({ item })}
+								<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} {item} />
+							{/snippet}
+						</MenuSingleItem>
+					{/if}
+				{/each}
+			{/snippet}
 		</Menubar>
 
-		<Menubar let:createMenu class="flex flex-col gap-1">
-			{#each thirdMenuLinks as menuLink (menuLink)}
-				{#if menuLink.subItems}
-					<Menu {createMenu} let:item usePointerDownOutside>
-						<svelte:fragment slot="trigger" let:trigger>
-							<button
-								class="relative w-full"
-								on:click={() => {
-									if (menuLink.label === 'Help') {
-										openChangelogs()
-									}
-								}}
-							>
-								<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
-								{#if menuLink.label === 'Help' && hasNewChangelogs}
-									<span
-										class={twMerge(
-											'flex h-2 w-2 absolute',
-											isCollapsed ? 'top-1 right-1' : 'right-2 top-1/2 -translate-y-1/2'
-										)}
-									>
+		<Menubar class="flex flex-col gap-1">
+			{#snippet children({ createMenu })}
+				{#each thirdMenuLinks as menuLink (menuLink)}
+					{#if menuLink.subItems}
+						<Menu {createMenu} usePointerDownOutside>
+							{#snippet triggr({ trigger })}
+								<button
+									class="relative w-full"
+									onclick={() => {
+										if (menuLink.label === 'Help') {
+											openChangelogs()
+										}
+									}}
+								>
+									<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
+									{#if menuLink.label === 'Help' && hasNewChangelogs}
 										<span
-											class="animate-ping absolute inline-flex h-full w-full rounded-full bg-frost-400 opacity-75"
-										></span>
-										<span class="relative inline-flex rounded-full h-2 w-2 bg-frost-500"></span>
-									</span>
-								{/if}
-							</button>
-						</svelte:fragment>
-						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-							<MenuItem href={subItem.href} class={itemClass} target="_blank" {item}>
-								<div class="flex flex-row items-center gap-2">
-									{#if subItem.icon}
-										<svelte:component this={subItem.icon} size={16} />
+											class={twMerge(
+												'flex h-2 w-2 absolute',
+												isCollapsed ? 'top-1 right-1' : 'right-2 top-1/2 -translate-y-1/2'
+											)}
+										>
+											<span
+												class="animate-ping absolute inline-flex h-full w-full rounded-full bg-frost-400 opacity-75"
+											></span>
+											<span class="relative inline-flex rounded-full h-2 w-2 bg-frost-500"></span>
+										</span>
 									{/if}
+								</button>
+							{/snippet}
+							{#snippet children({ item })}
+								{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
+									<MenuItem href={subItem.href} class={itemClass} target="_blank" {item}>
+										<div class="flex flex-row items-center gap-2">
+											{#if subItem.icon}
+												<subItem.icon size={16} />
+											{/if}
 
-									{subItem.label}
-								</div>
-							</MenuItem>
-						{/each}
-						{#if recentChangelogs.length > 0}
-							<div class="w-full h-1 border-t"></div>
-							<span class="text-xs px-4 font-bold"> Latest changelogs </span>
-							{#each recentChangelogs as changelog}
-								<MenuItem href={changelog.href} class={itemClass} target="_blank" {item}>
-									<div class="flex flex-row items-center gap-2">
-										{changelog.label}
-									</div>
-								</MenuItem>
-							{/each}
-						{/if}
-					</Menu>
-				{/if}
-			{/each}
+											{subItem.label}
+										</div>
+									</MenuItem>
+								{/each}
+								{#if recentChangelogs.length > 0}
+									<div class="w-full h-1 border-t"></div>
+									<span class="text-xs px-4 font-bold"> Latest changelogs </span>
+									{#each recentChangelogs as changelog}
+										<MenuItem href={changelog.href} class={itemClass} target="_blank" {item}>
+											<div class="flex flex-row items-center gap-2">
+												{changelog.label}
+											</div>
+										</MenuItem>
+									{/each}
+								{/if}
+							{/snippet}
+						</Menu>
+					{/if}
+				{/each}
+			{/snippet}
 		</Menubar>
 	</div>
 </nav>
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index 7df26c0269..a43257dbfd 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/frontend/src/lib/components/sidebar/UserMenu.svelte
@@ -17,11 +17,15 @@
 	import { Menu, MenuItem } from '$lib/components/meltComponents'
 	import { type MenubarBuilders } from '@melt-ui/svelte'
 
-	let darkMode: boolean = false
+	let darkMode: boolean = $state(false)
 
-	export let isCollapsed: boolean = false
-	export let lightMode: boolean = false
-	export let createMenu: MenubarBuilders['createMenu']
+	interface Props {
+		isCollapsed?: boolean
+		lightMode?: boolean
+		createMenu: MenubarBuilders['createMenu']
+	}
+
+	let { isCollapsed = false, lightMode = false, createMenu }: Props = $props()
 
 	const itemClass = twMerge(
 		'text-secondary text-left font-normal text-xs ',
@@ -30,8 +34,8 @@
 	)
 </script>
 
-<Menu {createMenu} let:item usePointerDownOutside>
-	<svelte:fragment slot="trigger" let:trigger>
+<Menu {createMenu} usePointerDownOutside>
+	{#snippet triggr({ trigger })}
 		<MenuButton
 			class="!text-xs"
 			icon={User}
@@ -40,82 +44,95 @@
 			{lightMode}
 			{trigger}
 		/>
-	</svelte:fragment>
+	{/snippet}
 
-	<div class="px-4 py-3 border-b" role="none">
-		<p class="text-sm font-medium text-primary truncate" role="none">
-			{$userStore?.email}
-		</p>
-		<span class="text-xs text-tertiary flex flex-row gap-2 items-center">
-			{#if $userStore?.is_admin}
-				Admin of this workspace <Crown size={14} />
-			{:else if $userStore?.operator}
-				Operator in this workspace <HardHat size={14} />
-			{/if}
-		</span>
-	</div>
-	<div class="py-1">
-		<MenuItem href={USER_SETTINGS_HASH} class={itemClass} {item}>
-			<Settings size={16} />
-			Account settings
-		</MenuItem>
+	{#snippet children({ item })}
+		<div class="px-4 py-3 border-b" role="none">
+			<p class="text-sm font-medium text-primary truncate" role="none">
+				{$userStore?.email}
+			</p>
+			<span class="text-xs text-tertiary flex flex-row gap-2 items-center">
+				{#if $userStore?.is_admin}
+					Admin of this workspace <Crown size={14} />
+				{:else if $userStore?.operator}
+					Operator in this workspace <HardHat size={14} />
+				{/if}
+			</span>
+		</div>
+		<div class="py-1">
+			<MenuItem href={USER_SETTINGS_HASH} class={itemClass} {item}>
+				<Settings size={16} />
+				Account settings
+			</MenuItem>
 
-		<MenuItem
-			on:click={() => {
-				if (!document.documentElement.classList.contains('dark')) {
-					document.documentElement.classList.add('dark')
-					window.localStorage.setItem('dark-mode', 'dark')
-				} else {
-					document.documentElement.classList.remove('dark')
-					window.localStorage.setItem('dark-mode', 'light')
-				}
-			}}
-			class={itemClass}
-			{item}
-		>
-			{#if darkMode}
-				<Sun size={16} />
-			{:else}
-				<Moon size={16} />
-			{/if}
-			Switch theme
-		</MenuItem>
+			<MenuItem
+				on:click={() => {
+					if (!document.documentElement.classList.contains('dark')) {
+						document.documentElement.classList.add('dark')
+						window.localStorage.setItem('dark-mode', 'dark')
+					} else {
+						document.documentElement.classList.remove('dark')
+						window.localStorage.setItem('dark-mode', 'light')
+					}
+				}}
+				class={itemClass}
+				{item}
+			>
+				{#if darkMode}
+					<Sun size={16} />
+				{:else}
+					<Moon size={16} />
+				{/if}
+				Switch theme
+			</MenuItem>
 
-		<MenuItem
-			on:click={() => logout()}
-			class={twMerge(itemClass, 'text-primary font-semibold')}
-			{item}
-		>
-			<LogOut size={16} />
-			Sign out
-		</MenuItem>
-	</div>
+			<MenuItem
+				on:click={() => logout()}
+				class={twMerge(itemClass, 'text-primary font-semibold')}
+				{item}
+			>
+				<LogOut size={16} />
+				Sign out
+			</MenuItem>
+		</div>
 
-	{#if isCloudHosted()}
-		<div class="border-t">
-			{#if !$isPremiumStore}
-				<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
-					>{$usageStore}/1000 user execs</span
-				>
-				<div class="px-4 w-full h-1 mb-1">
-					<div class="bg-gray-200 h-full rounded-sm overflow-hidden">
-						<div class="bg-blue-400 h-full" style="width: {Math.min($usageStore, 1000) / 10}%"></div>
-					</div>
-				</div>
-				{#if $workspaceStore != 'demo'}
+		{#if isCloudHosted()}
+			<div class="border-t">
+				{#if !$isPremiumStore}
 					<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
-						>{$workspaceUsageStore}/1000 free workspace execs</span
+						>{$usageStore}/1000 user execs</span
 					>
 					<div class="px-4 w-full h-1 mb-1">
 						<div class="bg-gray-200 h-full rounded-sm overflow-hidden">
-							<div
-								class="bg-blue-400 h-full"
-								style="width: {Math.min($workspaceUsageStore, 1000) / 10}%"
+							<div class="bg-blue-400 h-full" style="width: {Math.min($usageStore, 1000) / 10}%"
 							></div>
 						</div>
 					</div>
-				{/if}
-				{#if $userStore?.is_admin}
+					{#if $workspaceStore != 'demo'}
+						<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
+							>{$workspaceUsageStore}/1000 free workspace execs</span
+						>
+						<div class="px-4 w-full h-1 mb-1">
+							<div class="bg-gray-200 h-full rounded-sm overflow-hidden">
+								<div
+									class="bg-blue-400 h-full"
+									style="width: {Math.min($workspaceUsageStore, 1000) / 10}%"
+								></div>
+							</div>
+						</div>
+					{/if}
+					{#if $userStore?.is_admin}
+						<MenuItem
+							class={twMerge(itemClass, 'py-2')}
+							on:click={() => {
+								goto('/workspace_settings?tab=premium')
+							}}
+							{item}
+						>
+							Upgrade
+						</MenuItem>
+					{/if}
+				{:else}
 					<MenuItem
 						class={twMerge(itemClass, 'py-2')}
 						on:click={() => {
@@ -123,22 +140,12 @@
 						}}
 						{item}
 					>
-						Upgrade
+						Premium plan
 					</MenuItem>
 				{/if}
-			{:else}
-				<MenuItem
-					class={twMerge(itemClass, 'py-2')}
-					on:click={() => {
-						goto('/workspace_settings?tab=premium')
-					}}
-					{item}
-				>
-					Premium plan
-				</MenuItem>
-			{/if}
-		</div>
-	{/if}
+			</div>
+		{/if}
+	{/snippet}
 </Menu>
 
 <DarkModeObserver bind:darkMode />
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index f7e481b7cb..027be8a7e9 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -22,11 +22,14 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { MenubarBuilders } from '@melt-ui/svelte'
 
-	export let isCollapsed: boolean = false
-	export let createMenu: MenubarBuilders['createMenu']
+	interface Props {
+		isCollapsed?: boolean
+		createMenu: MenubarBuilders['createMenu']
+		// When used outside of the side bar, where links to workspace settings and such don't make as much sense.
+		strictWorkspaceSelect?: boolean
+	}
 
-	// When used outside of the side bar, where links to workspace settings and such don't make as much sense.
-	export let strictWorkspaceSelect = false
+	let { isCollapsed = false, createMenu, strictWorkspaceSelect = false }: Props = $props()
 
 	async function toggleSwitchWorkspace(id: string) {
 		if ($workspaceStore === id) {
@@ -55,8 +58,8 @@
 	}
 </script>
 
-<Menu {createMenu} let:item usePointerDownOutside>
-	<svelte:fragment slot="trigger" let:trigger>
+<Menu {createMenu} usePointerDownOutside>
+	{#snippet triggr({ trigger })}
 		<MenuButton
 			class="!text-xs"
 			icon={Building}
@@ -65,116 +68,119 @@
 			color={$workspaceColor}
 			{trigger}
 		/>
-	</svelte:fragment>
+	{/snippet}
 
-	<div class="divide-y" role="none">
-		<div class="py-1">
-			{#each $userWorkspaces as workspace}
-				<MenuItem
-					class={twMerge(
-						'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
-						$workspaceStore === workspace.id
-							? 'cursor-default bg-surface-selected'
-							: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
-					)}
-					on:click={async () => {
-						await toggleSwitchWorkspace(workspace.id)
-					}}
-					{item}
-				>
-					<div class="flex items-center justify-between min-w-0 w-full">
-						<div>
-							<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
-							<div
-								class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left"
-							>
-								{workspace.id}
+	{#snippet children({ item })}
+		<div class="divide-y" role="none">
+			<div class="py-1">
+				{#each $userWorkspaces as workspace}
+					<MenuItem
+						class={twMerge(
+							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
+							$workspaceStore === workspace.id
+								? 'cursor-default bg-surface-selected'
+								: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
+						)}
+						on:click={async () => {
+							await toggleSwitchWorkspace(workspace.id)
+						}}
+						{item}
+					>
+						<div class="flex items-center justify-between min-w-0 w-full">
+							<div>
+								<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div
+								>
+								<div
+									class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left"
+								>
+									{workspace.id}
+								</div>
 							</div>
+							{#if workspace.color}
+								<div
+									class="w-5 h-5 mr-2 rounded border border-gray-300 dark:border-gray-600"
+									style="background-color: {workspace.color}"
+								></div>
+							{/if}
 						</div>
-						{#if workspace.color}
-							<div
-								class="w-5 h-5 mr-2 rounded border border-gray-300 dark:border-gray-600"
-								style="background-color: {workspace.color}"
-							></div>
-						{/if}
-					</div>
-				</MenuItem>
-			{/each}
-		</div>
-		{#if (isCloudHosted() || $superadmin) && !strictWorkspaceSelect}
-			<div class="py-1" role="none">
-				<a
-					href="{base}/user/create_workspace"
-					class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
-					role="menuitem"
-					tabindex="-1"
-				>
-					<Plus size={16} />
-					Workspace
-				</a>
+					</MenuItem>
+				{/each}
 			</div>
-		{/if}
-		{#if !strictWorkspaceSelect}
-			<div class="py-1" role="none">
-				<MenuItem
-					href="{base}/user/workspaces"
-					on:click={() => {
-						localStorage.removeItem('workspace')
-					}}
-					class={twMerge(
-						'text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary',
-						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-					)}
-					{item}
-				>
-					All workspaces
-				</MenuItem>
-			</div>
-		{/if}
-		{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
-			<div class="py-1" role="none">
-				<MenuItem
-					href="{base}/workspace_settings"
-					class={twMerge(
-						'text-secondary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2',
-						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-					)}
-					{item}
-				>
-					<Settings size={16} />
-					Workspace settings
-				</MenuItem>
-			</div>
-		{/if}
-	</div>
-	{#if isCloudHosted() && !$isPremiumStore && !strictWorkspaceSelect}
-		<div class="py-1" role="none">
-			{#if $workspaceStore != 'demo'}
-				<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
-					>{$workspaceUsageStore}/1000 free workspace execs</span
-				>
-				<div class="w-full bg-gray-200 h-1">
-					<div class="bg-blue-400 h-1" style="width: {Math.min($workspaceUsageStore, 1000) / 10}%"
-					></div>
+			{#if (isCloudHosted() || $superadmin) && !strictWorkspaceSelect}
+				<div class="py-1" role="none">
+					<a
+						href="{base}/user/create_workspace"
+						class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
+						role="menuitem"
+						tabindex="-1"
+					>
+						<Plus size={16} />
+						Workspace
+					</a>
 				</div>
 			{/if}
-			{#if $userStore?.is_admin}
-				<MenuItem
-					class={twMerge(
-						'text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900',
-						'data-[highlighted]:bg-gray-100 data-[highlighted]:text-gray-900'
-					)}
-					on:click={() => {
-						goto('/workspace_settings?tab=premium')
-					}}
-					{item}
-				>
-					Upgrade
-				</MenuItem>
+			{#if !strictWorkspaceSelect}
+				<div class="py-1" role="none">
+					<MenuItem
+						href="{base}/user/workspaces"
+						on:click={() => {
+							localStorage.removeItem('workspace')
+						}}
+						class={twMerge(
+							'text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary',
+							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+						)}
+						{item}
+					>
+						All workspaces
+					</MenuItem>
+				</div>
+			{/if}
+			{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
+				<div class="py-1" role="none">
+					<MenuItem
+						href="{base}/workspace_settings"
+						class={twMerge(
+							'text-secondary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2',
+							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+						)}
+						{item}
+					>
+						<Settings size={16} />
+						Workspace settings
+					</MenuItem>
+				</div>
 			{/if}
 		</div>
-	{/if}
-	{#if $enterpriseLicense && !strictWorkspaceSelect}
-		<MultiplayerMenu />
-	{/if}
+		{#if isCloudHosted() && !$isPremiumStore && !strictWorkspaceSelect}
+			<div class="py-1" role="none">
+				{#if $workspaceStore != 'demo'}
+					<span class="text-secondary block w-full text-left px-4 py-2 text-xs"
+						>{$workspaceUsageStore}/1000 free workspace execs</span
+					>
+					<div class="w-full bg-gray-200 h-1">
+						<div class="bg-blue-400 h-1" style="width: {Math.min($workspaceUsageStore, 1000) / 10}%"
+						></div>
+					</div>
+				{/if}
+				{#if $userStore?.is_admin}
+					<MenuItem
+						class={twMerge(
+							'text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900',
+							'data-[highlighted]:bg-gray-100 data-[highlighted]:text-gray-900'
+						)}
+						on:click={() => {
+							goto('/workspace_settings?tab=premium')
+						}}
+						{item}
+					>
+						Upgrade
+					</MenuItem>
+				{/if}
+			</div>
+		{/if}
+		{#if $enterpriseLicense && !strictWorkspaceSelect}
+			<MultiplayerMenu />
+		{/if}
+	{/snippet}
 </Menu>
diff --git a/frontend/src/lib/components/splitPanes/SplitPanesOrColumnOnMobile.svelte b/frontend/src/lib/components/splitPanes/SplitPanesOrColumnOnMobile.svelte
index 39191e6ade..9a611427e0 100644
--- a/frontend/src/lib/components/splitPanes/SplitPanesOrColumnOnMobile.svelte
+++ b/frontend/src/lib/components/splitPanes/SplitPanesOrColumnOnMobile.svelte
@@ -2,36 +2,50 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import SplitPanesWrapper from './SplitPanesWrapper.svelte'
 
-	export let leftPaneSize = 30
-	export let leftPaneMinSize = 25
-	export let rightPaneSize = 70
-	export let rightPaneMinSize = 25
-	export let rightPaneIsFirstInCol = false
+	interface Props {
+		leftPaneSize?: number
+		leftPaneMinSize?: number
+		rightPaneSize?: number
+		rightPaneMinSize?: number
+		rightPaneIsFirstInCol?: boolean
+		left_pane?: import('svelte').Snippet
+		right_pane?: import('svelte').Snippet
+	}
 
-	let clientWidth = window.innerWidth
+	let {
+		leftPaneSize = 30,
+		leftPaneMinSize = 25,
+		rightPaneSize = 70,
+		rightPaneMinSize = 25,
+		rightPaneIsFirstInCol = false,
+		left_pane,
+		right_pane
+	}: Props = $props()
+
+	let clientWidth = $state(window.innerWidth)
 </script>
 
 <main class="flex-grow w-full overflow-y-auto" bind:clientWidth>
-		{#if clientWidth >= 768}
-			<SplitPanesWrapper class="hidden md:block">
-				<Splitpanes>
-					<Pane size={leftPaneSize} minSize={leftPaneMinSize}>
-						<slot name="left-pane" />
-					</Pane>
-					<Pane size={rightPaneSize} minSize={rightPaneMinSize}>
-						<slot name="right-pane" />
-					</Pane>
-				</Splitpanes>
-			</SplitPanesWrapper>
-		{:else}
-			<div class="flex flex-col">
-				{#if rightPaneIsFirstInCol}
-					<slot name="right-pane" />
-					<slot name="left-pane" />
-				{:else}
-					<slot name="left-pane" />
-					<slot name="right-pane" />
-				{/if}
-			</div>
-		{/if}
+	{#if clientWidth >= 768}
+		<SplitPanesWrapper class="hidden md:block">
+			<Splitpanes>
+				<Pane size={leftPaneSize} minSize={leftPaneMinSize}>
+					{@render left_pane?.()}
+				</Pane>
+				<Pane size={rightPaneSize} minSize={rightPaneMinSize}>
+					{@render right_pane?.()}
+				</Pane>
+			</Splitpanes>
+		</SplitPanesWrapper>
+	{:else}
+		<div class="flex flex-col">
+			{#if rightPaneIsFirstInCol}
+				{@render right_pane?.()}
+				{@render left_pane?.()}
+			{:else}
+				{@render left_pane?.()}
+				{@render right_pane?.()}
+			{/if}
+		</div>
+	{/if}
 </main>
diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 0d991dbaf9..82b2f3f401 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -1,53 +1,79 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	export type DatatableContext = {
 		size: 'xs' | 'sm' | 'md' | 'lg'
 	}
 </script>
 
 <script lang="ts">
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { createEventDispatcher, setContext, untrack } from 'svelte'
 	import Button from '../common/button/Button.svelte'
 	import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, Loader2 } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 	import List from '$lib/components/common/layout/List.svelte'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let paginated: boolean = false
-	export let currentPage: number = 1
-	export let showNext: boolean = true
-	export let loadMore: number = 0
-	export let shouldLoadMore: boolean = false
-	export let rounded: boolean = true
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
-	export let perPage: number | undefined = undefined
-	export let shouldHidePagination: boolean = false
-	export let noBorder: boolean = false
-	export let rowCount: number | undefined = undefined
-	export let hasMore: boolean = true
-	export let contentHeight: number = 0
-	export let tableFixed: boolean = false
-	export let infiniteScroll: boolean | undefined = undefined
-	export let neverShowLoader = false
-
-	let footerHeight: number = 0
-	let tableHeight: number = 0
+	let footerHeight: number = $state(0)
+	let tableHeight: number = $state(0)
 	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
-	let tableContainer: HTMLDivElement
-	export let loading = false
-	export let loadingMore = false
+	let tableContainer: HTMLDivElement | undefined = $state()
+	interface Props {
+		paginated?: boolean
+		currentPage?: number
+		showNext?: boolean
+		loadMore?: number
+		shouldLoadMore?: boolean
+		rounded?: boolean
+		size?: 'xs' | 'sm' | 'md' | 'lg'
+		perPage?: number | undefined
+		shouldHidePagination?: boolean
+		noBorder?: boolean
+		rowCount?: number | undefined
+		hasMore?: boolean
+		contentHeight?: number
+		tableFixed?: boolean
+		infiniteScroll?: boolean | undefined
+		neverShowLoader?: boolean
+		loading?: boolean
+		loadingMore?: boolean
+		children?: import('svelte').Snippet
+		emptyMessage?: import('svelte').Snippet
+	}
+
+	let {
+		paginated = false,
+		currentPage = $bindable(1),
+		showNext = true,
+		loadMore = 0,
+		shouldLoadMore = false,
+		rounded = true,
+		size = 'md',
+		perPage = $bindable(undefined),
+		shouldHidePagination = false,
+		noBorder = false,
+		rowCount = undefined,
+		hasMore = true,
+		contentHeight = $bindable(0),
+		tableFixed = false,
+		infiniteScroll = undefined,
+		neverShowLoader = false,
+		loading = false,
+		loadingMore = false,
+		children,
+		emptyMessage
+	}: Props = $props()
 	setContext<DatatableContext>('datatable', {
 		size
 	})
 
-	$: contentHeight = tableHeight - footerHeight
+	$effect(() => {
+		contentHeight = tableHeight - footerHeight
+	})
 
 	function checkScrollStatus() {
-		if (!infiniteScroll || loading) return
+		if (!infiniteScroll || loading || !tableContainer) return
 
 		const hasScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight
 		if (!hasScrollbar && hasMore) {
-			dispatchIfMounted('loadMore')
+			dispatch('loadMore')
 		}
 	}
 
@@ -64,15 +90,18 @@
 			return
 		}
 
+		if (!tableContainer) return
 		const { scrollTop, scrollHeight, clientHeight } = tableContainer
 		if (scrollHeight - (scrollTop + clientHeight) < 50) {
 			dispatch('loadMore')
 		}
 	}
 
-	$: if (tableContainer && hasMore && !loading) {
-		checkScrollStatus()
-	}
+	$effect(() => {
+		if (tableContainer && hasMore && !loading) {
+			untrack(() => checkScrollStatus())
+		}
+	})
 </script>
 
 <div
@@ -84,11 +113,11 @@
 	bind:clientHeight={tableHeight}
 >
 	<List justify="between" gap="none" hFull={true}>
-		<div class="w-full overflow-auto h-fit" bind:this={tableContainer} on:scroll={handleScroll}>
+		<div class="w-full overflow-auto h-fit" bind:this={tableContainer} onscroll={handleScroll}>
 			<table class={tableFixed ? 'table-fixed w-full' : 'min-w-full'}>
-				<slot />
+				{@render children?.()}
 			</table>
-			<slot name="emptyMessage" />
+			{@render emptyMessage?.()}
 		</div>
 		{#if paginated && !shouldHidePagination}
 			<div
diff --git a/frontend/src/lib/components/triggers/CaptureSection.svelte b/frontend/src/lib/components/triggers/CaptureSection.svelte
index 1482d39918..1b351bdd81 100644
--- a/frontend/src/lib/components/triggers/CaptureSection.svelte
+++ b/frontend/src/lib/components/triggers/CaptureSection.svelte
@@ -19,7 +19,7 @@
 		type ConnectionInfo
 	} from '../common/alert/ConnectionIndicator.svelte'
 	import CaptureTable from './CaptureTable.svelte'
-	import { createEventDispatcher, onDestroy, getContext, onMount } from 'svelte'
+	import { createEventDispatcher, onDestroy, getContext, onMount, untrack } from 'svelte'
 	import type { CaptureTriggerKind, Capture } from '$lib/gen'
 	import CaptureIcon from './CaptureIcon.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
@@ -247,9 +247,9 @@
 	// Start or stop capture listening based on active state
 	$effect(() => {
 		if (captureInfo.active) {
-			listenForCaptures()
+			untrack(() => listenForCaptures())
 		} else {
-			stopCaptureListening()
+			untrack(() => stopCaptureListening())
 		}
 	})
 
@@ -432,7 +432,7 @@
 
 								dispatch('applyArgs', {
 									kind: testKind,
-									args: { ...structuredClone(payloadData), ...trigger_extra }
+									args: { ...structuredClone($state.snapshot(payloadData)), ...trigger_extra }
 								})
 							}
 						}}
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index b93c6177e7..1001746ab6 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -7,7 +7,7 @@
 	import CustomPopover from '../CustomPopover.svelte'
 	import { Webhook, Route, Unplug, Mail, Play } from 'lucide-svelte'
 	import KafkaIcon from '$lib/components/icons/KafkaIcon.svelte'
-	import { createEventDispatcher, onDestroy } from 'svelte'
+	import { createEventDispatcher, onDestroy, untrack } from 'svelte'
 	import { type TriggerKind } from '../triggers'
 	import { CaptureService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -20,28 +20,47 @@
 	import { AwsIcon, MqttIcon } from '../icons'
 	import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte'
 
-	export let path: string
-	export let hasPreprocessor = false
-	export let canHavePreprocessor = false
-	export let isFlow = false
-	export let captureType: CaptureTriggerKind | undefined = undefined
-	export let headless = false
-	export let addButton = false
-	export let canEdit = false
-	export let fullHeight = true
-	export let limitPayloadSize = false
-	export let noBorder = false
-	export let captureActiveIndicator: boolean | undefined = undefined
+	interface Props {
+		path: string
+		hasPreprocessor?: boolean
+		canHavePreprocessor?: boolean
+		isFlow?: boolean
+		captureType?: CaptureTriggerKind | undefined
+		headless?: boolean
+		addButton?: boolean
+		canEdit?: boolean
+		fullHeight?: boolean
+		limitPayloadSize?: boolean
+		noBorder?: boolean
+		captureActiveIndicator?: boolean | undefined
+	}
 
-	let selected: number | undefined = undefined
-	let testKind: 'preprocessor' | 'main' = 'main'
-	let isEmpty: boolean = true
-	let infiniteList: InfiniteList | null = null
-	let capturesLength = 0
+	let {
+		path,
+		hasPreprocessor = false,
+		canHavePreprocessor = false,
+		isFlow = false,
+		captureType = undefined,
+		headless = false,
+		addButton = false,
+		canEdit = false,
+		fullHeight = true,
+		limitPayloadSize = false,
+		noBorder = false,
+		captureActiveIndicator = undefined
+	}: Props = $props()
+
+	let selected: number | undefined = $state(undefined)
+	let testKind: 'preprocessor' | 'main' = $state('main')
+	let isEmpty: boolean = $state(true)
+	let infiniteList: InfiniteList | null = $state(null)
+	let capturesLength = $state(0)
 	let openStates: Record<string, boolean> = {}
-	let viewerOpen = false
+	let viewerOpen = $state(false)
 
-	$: hasPreprocessor && (testKind = 'preprocessor')
+	$effect(() => {
+		hasPreprocessor && (testKind = 'preprocessor')
+	})
 
 	const dispatch = createEventDispatcher<{
 		openTriggers: {
@@ -142,7 +161,7 @@
 		} else {
 			const payloadData = await getPayload(capture)
 			selected = capture.id
-			dispatch('select', structuredClone(payloadData))
+			dispatch('select', structuredClone($state.snapshot(payloadData)))
 			dispatch('selectCapture', capture)
 		}
 	}
@@ -169,7 +188,7 @@
 					testKind === 'preprocessor' ? fullCapture.preprocessor_args : fullCapture.main_args
 			}
 		} else {
-			payloadData = structuredClone(capture.payloadData)
+			payloadData = structuredClone($state.snapshot(capture.payloadData))
 		}
 		return payloadData
 	}
@@ -218,13 +237,15 @@
 		viewerOpen = Object.values(openStates).some((state) => state)
 	}
 
-	$: path && infiniteList && initLoadCaptures()
+	$effect(() => {
+		path && infiniteList && untrack(() => initLoadCaptures())
+	})
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <Label label="Trigger captures" {headless} class="h-full {headless ? '' : 'flex flex-col gap-1'}">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		{#if addButton}
 			<div class="inline-block">
 				<CaptureButton small={true} on:openTriggers />
@@ -233,8 +254,8 @@
 		{#if captureActiveIndicator}
 			<Loader2 class="animate-spin" size={16} />
 		{/if}
-	</svelte:fragment>
-	<svelte:fragment slot="action">
+	{/snippet}
+	{#snippet action()}
 		{#if canHavePreprocessor && !isEmpty}
 			<div>
 				<ToggleButtonGroup
@@ -243,20 +264,21 @@
 					on:selected={(e) => {
 						initLoadCaptures(e.detail)
 					}}
-					let:item
 				>
-					<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small {item} />
-					<ToggleButton
-						value="preprocessor"
-						label="Preprocessor"
-						small
-						tooltip="When the runnable has a preprocessor, it receives additional information about the request"
-						{item}
-					/>
+					{#snippet children({ item })}
+						<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small {item} />
+						<ToggleButton
+							value="preprocessor"
+							label="Preprocessor"
+							small
+							tooltip="When the runnable has a preprocessor, it receives additional information about the request"
+							{item}
+						/>
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 		{/if}
-	</svelte:fragment>
+	{/snippet}
 
 	<div
 		class={fullHeight
@@ -277,14 +299,14 @@
 			{noBorder}
 			neverShowLoader={captureActiveIndicator !== undefined}
 		>
-			<svelte:fragment slot="columns">
+			{#snippet columns()}
 				<colgroup>
 					<col class="w-8" />
 					<col class="w-16" />
 					<col />
 				</colgroup>
-			</svelte:fragment>
-			<svelte:fragment let:item let:hover>
+			{/snippet}
+			{#snippet children({ item, hover })}
 				{@const captureIcon = captureKindToIcon[item.trigger_kind]}
 				<SchemaPickerRow
 					date={item.created_at}
@@ -296,13 +318,15 @@
 					{viewerOpen}
 					{limitPayloadSize}
 				>
-					<svelte:fragment slot="start">
-						<div class="center-center">
-							<svelte:component this={captureIcon} size={12} />
-						</div>
-					</svelte:fragment>
+					{#snippet start()}
+						{@const SvelteComponent = captureIcon}
 
-					<svelte:fragment slot="extra" let:isTooBig>
+						<div class="center-center">
+							<SvelteComponent size={12} />
+						</div>
+					{/snippet}
+
+					{#snippet extra({ isTooBig })}
 						{#if canEdit}
 							<div class="flex flex-row items-center gap-2 px-2">
 								{#if testKind === 'preprocessor' && !hasPreprocessor}
@@ -318,7 +342,7 @@
 										>
 											Apply args
 										</Button>
-										<svelte:fragment slot="overlay">
+										{#snippet overlay()}
 											<div class="text-sm p-2 flex flex-col gap-1 items-start">
 												<p> You need to add a preprocessor to use preprocessor captures as args </p>
 												<Button
@@ -331,7 +355,7 @@
 													Add preprocessor
 												</Button>
 											</div>
-										</svelte:fragment>
+										{/snippet}
 									</CustomPopover>
 								{:else}
 									<Button
@@ -388,12 +412,12 @@
 								/>
 							</div>
 						{/if}
-					</svelte:fragment>
+					{/snippet}
 				</SchemaPickerRow>
-			</svelte:fragment>
-			<svelte:fragment slot="empty">
+			{/snippet}
+			{#snippet empty()}
 				<div class="text-center text-xs text-tertiary py-2">No captures yet</div>
-			</svelte:fragment>
+			{/snippet}
 		</InfiniteList>
 	</div>
 </Label>
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index e46ab2bb46..133bb029a2 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { workspaceStore } from '$lib/stores'
 	import { CaptureService, type CaptureConfig, type CaptureTriggerKind } from '$lib/gen'
-	import { onDestroy } from 'svelte'
+	import { onDestroy, untrack } from 'svelte'
 	import { isObject, sendUserToast, sleep } from '$lib/utils'
 	import RouteCapture from './http/RouteCapture.svelte'
 	import type { ConnectionInfo } from '../common/alert/ConnectionIndicator.svelte'
@@ -174,7 +174,8 @@
 		}
 	}
 	$effect(() => {
-		updateConnectionInfo(config, captureActive)
+		const args = [config, captureActive] as const
+		untrack(() => updateConnectionInfo(...args))
 	})
 
 	let captureInfo: CaptureInfo = $derived({
diff --git a/frontend/src/lib/components/triggers/TriggersTable.svelte b/frontend/src/lib/components/triggers/TriggersTable.svelte
index 2d225a09ac..4309e5f105 100644
--- a/frontend/src/lib/components/triggers/TriggersTable.svelte
+++ b/frontend/src/lib/components/triggers/TriggersTable.svelte
@@ -7,6 +7,7 @@
 	import AddTriggersButton from './AddTriggersButton.svelte'
 	import TriggerLabel from './TriggerLabel.svelte'
 	import DeleteTriggerButton from './DeleteTriggerButton.svelte'
+	import TriggerableByAI from '../TriggerableByAI.svelte'
 
 	interface Props {
 		// Props
@@ -41,6 +42,8 @@
 	<div class="w-full">
 		<AddTriggersButton {onAddDraftTrigger} setDropdownWidthToButtonWidth class="w-full" {isEditor}>
 			<Button
+				aiId="add-trigger"
+				aiDescription="Add a new trigger"
 				size="xs"
 				color="blue"
 				startIcon={{ icon: Plus }}
@@ -62,54 +65,60 @@
 					)}
 					onclick={() => onSelect?.(index)}
 				>
-					<td class="w-12 text-center py-2 px-2">
-						<div class="relative flex justify-center items-center">
-							<SvelteComponent
-								size={16}
-								class={trigger.isDraft ? 'text-frost-400' : 'text-tertiary'}
-							/>
+					<TriggerableByAI
+						id={`trigger-${trigger.id}`}
+						description={`See ${trigger.type} triggers`}
+						onTrigger={() => onSelect?.(index)}
+					>
+						<td class="w-12 text-center py-2 px-2">
+							<div class="relative flex justify-center items-center">
+								<SvelteComponent
+									size={16}
+									class={trigger.isDraft ? 'text-frost-400' : 'text-tertiary'}
+								/>
 
-							{#if trigger.isPrimary}
-								<Star size={10} class="absolute -mt-3 ml-3 text-blue-400" />
-							{/if}
-						</div>
-					</td>
-					<td class="py-2 px-2 text-xs">
-						<div class="flex items-center justify-between gap-1">
-							<div class="flex items-center grow min-w-0">
-								<TriggerLabel {trigger} />
-								{#if trigger.type === 'webhook' && webhookToken}
-									<span
-										class="ml-2 px-1.5 text-xs rounded-md bg-tertiary/50 group-hover:bg-primary text-primary-inverse py-0.5"
-									>
-										{`${webhookToken} token${webhookToken > 1 ? 's' : ''}`}
-									</span>
-								{:else if trigger.type === 'email' && emailToken}
-									<span
-										class="ml-2 text-xs rounded-md bg-tertiary/50 group-hover:bg-primary text-primary-inverse px-1.5 py-0.5"
-									>
-										{`${emailToken} token${emailToken > 1 ? 's' : ''}`}
-									</span>
+								{#if trigger.isPrimary}
+									<Star size={10} class="absolute -mt-3 ml-3 text-blue-400" />
 								{/if}
 							</div>
+						</td>
+						<td class="py-2 px-2 text-xs">
+							<div class="flex items-center justify-between gap-1">
+								<div class="flex items-center grow min-w-0">
+									<TriggerLabel {trigger} />
+									{#if trigger.type === 'webhook' && webhookToken}
+										<span
+											class="ml-2 px-1.5 text-xs rounded-md bg-tertiary/50 group-hover:bg-primary text-primary-inverse py-0.5"
+										>
+											{`${webhookToken} token${webhookToken > 1 ? 's' : ''}`}
+										</span>
+									{:else if trigger.type === 'email' && emailToken}
+										<span
+											class="ml-2 text-xs rounded-md bg-tertiary/50 group-hover:bg-primary text-primary-inverse px-1.5 py-0.5"
+										>
+											{`${emailToken} token${emailToken > 1 ? 's' : ''}`}
+										</span>
+									{/if}
+								</div>
 
-							{#if !['email', 'webhook', 'cli'].includes(trigger.type)}
-								{#if trigger.isDraft}
-									<DeleteTriggerButton {trigger} onDelete={() => onDeleteDraft?.(index)} small />
-								{:else if !!trigger.draftConfig && !trigger.isDraft}
-									<Button
-										size="xs"
-										color="light"
-										btnClasses="transition-all duration-200 text-transparent hover:bg-surface group-hover:text-primary bg-transparent px-1 py-1"
-										startIcon={{ icon: RotateCcw }}
-										iconOnly
-										title="Reset to deployed version"
-										on:click={() => onReset?.(index)}
-									/>
+								{#if !['email', 'webhook', 'cli'].includes(trigger.type)}
+									{#if trigger.isDraft}
+										<DeleteTriggerButton {trigger} onDelete={() => onDeleteDraft?.(index)} small />
+									{:else if !!trigger.draftConfig && !trigger.isDraft}
+										<Button
+											size="xs"
+											color="light"
+											btnClasses="transition-all duration-200 text-transparent hover:bg-surface group-hover:text-primary bg-transparent px-1 py-1"
+											startIcon={{ icon: RotateCcw }}
+											iconOnly
+											title="Reset to deployed version"
+											on:click={() => onReset?.(index)}
+										/>
+									{/if}
 								{/if}
-							{/if}
-						</div>
-					</td>
+							</div>
+						</td>
+					</TriggerableByAI>
 				</tr>
 			{/each}
 
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
index 77ebd9ce7e..83aa8633ce 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import Section from '$lib/components/Section.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
@@ -15,34 +17,18 @@
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import { base } from '$lib/base'
 	import Toggle from '$lib/components/Toggle.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
-	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
-	import Select from '$lib/components/apps/svelte-select/lib/Select.svelte'
 	import { workspaceStore } from '$lib/stores'
 
 	import { Button, Url } from '$lib/components/common'
 	import { RefreshCw } from 'lucide-svelte'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import TestingBadge from '../testingBadge.svelte'
+	import Select from '$lib/components/Select.svelte'
 
-	export let can_write: boolean = false
-	export let headless: boolean = false
-	export let isValid: boolean = false
-	export let gcp_resource_path = ''
-	export let subscription_id = ''
-	export let topic_id = ''
-	export let delivery_type: DeliveryType | undefined = 'pull'
-	export let delivery_config: PushConfig | undefined
-	export let subscription_mode: SubscriptionMode = 'create_update'
-	export let base_endpoint: string = getBaseUrl()
-	export let path = ''
-	export let showTestingBadge: boolean = false
-
-	let topic_items: string[] = []
-	let subscription_items: string[] = []
-	let darkMode = false
-	let loadingTopic = false
-	let loadingSubscription = false
+	let topic_items: string[] = $state([])
+	let subscription_items: string[] = $state([])
+	let loadingTopic = $state(false)
+	let loadingSubscription = $state(false)
 
 	const DEFAULT_PUSH_CONFIG: PushConfig = {
 		audience: getBaseUrl(),
@@ -82,42 +68,79 @@
 		}
 	}
 
-	export let cloud_subscription_id = ''
-	export let create_update_subscription_id = ''
+	interface Props {
+		can_write?: boolean
+		headless?: boolean
+		isValid?: boolean
+		gcp_resource_path?: string
+		subscription_id?: string
+		topic_id?: string
+		delivery_type?: DeliveryType | undefined
+		delivery_config: PushConfig | undefined
+		subscription_mode?: SubscriptionMode
+		base_endpoint?: string
+		path?: string
+		showTestingBadge?: boolean
+		cloud_subscription_id?: string
+		create_update_subscription_id?: string
+	}
 
-	$: isValid =
-		!emptyStringTrimmed(gcp_resource_path) &&
-		!emptyStringTrimmed(topic_id) &&
-		!emptyStringTrimmed(subscription_id)
-	$: if (!delivery_type) {
-		delivery_type = 'pull'
-	}
-	$: if (!delivery_config) {
-		delivery_config = DEFAULT_PUSH_CONFIG
-	}
+	let {
+		can_write = false,
+		headless = false,
+		isValid = $bindable(false),
+		gcp_resource_path = $bindable(''),
+		subscription_id = $bindable(''),
+		topic_id = $bindable(''),
+		delivery_type = $bindable('pull'),
+		delivery_config = $bindable(),
+		subscription_mode = $bindable('create_update'),
+		base_endpoint = $bindable(getBaseUrl()),
+		path = '',
+		showTestingBadge = false,
+		cloud_subscription_id = $bindable(''),
+		create_update_subscription_id = $bindable('')
+	}: Props = $props()
+
+	run(() => {
+		isValid =
+			!emptyStringTrimmed(gcp_resource_path) &&
+			!emptyStringTrimmed(topic_id) &&
+			!emptyStringTrimmed(subscription_id)
+	})
+	run(() => {
+		if (!delivery_type) {
+			delivery_type = 'pull'
+		}
+	})
+	run(() => {
+		if (!delivery_config) {
+			delivery_config = DEFAULT_PUSH_CONFIG
+		}
+	})
 
 	function getBaseUrl() {
 		return `${window.location.origin}${base}/api/gcp/w/${$workspaceStore!}`
 	}
 
-	$: !base_endpoint && (base_endpoint = getBaseUrl())
+	run(() => {
+		!base_endpoint && (base_endpoint = getBaseUrl())
+	})
 
-	$: {
+	run(() => {
 		if (emptyStringTrimmed(subscription_id) && !emptyStringTrimmed(path)) {
 			subscription_id = `windmill-${$workspaceStore!}-${path.replaceAll('/', '_')}`
 		}
-	}
+	})
 </script>
 
-<DarkModeObserver bind:darkMode />
-
 <div>
 	<Section label="GCP Pub/Sub" {headless}>
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if showTestingBadge}
 				<TestingBadge />
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 		<div class="flex flex-col w-full gap-4">
 			<Subsection label="Connection setup">
 				<div class="flex flex-col gap-1 mt-2">
@@ -143,22 +166,18 @@
 						<div class="flex flex-row gap-1 mt-2">
 							<Select
 								loading={loadingTopic}
-								class="grow shrink max-w-full"
-								on:change={(e) => {
-									topic_id = e.detail.value
-									loadAllSubscriptionFromGooglePubSubTopic()
-								}}
-								on:clear={() => {
-									topic_id = ''
-								}}
-								value={topic_id}
-								items={topic_items}
+								disablePortal
+								clearable
+								class="grow shrink"
+								bind:value={
+									() => topic_id,
+									(t) => {
+										topic_id = t
+										loadAllSubscriptionFromGooglePubSubTopic()
+									}
+								}
+								items={topic_items.map((value) => ({ value }))}
 								placeholder="Choose a topic"
-								inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-								containerStyles={darkMode
-									? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-									: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-								portal={false}
 							/>
 							<Button
 								disabled={!can_write}
@@ -187,22 +206,23 @@
 									loadAllSubscriptionFromGooglePubSubTopic()
 								}
 							}}
-							let:item
 						>
-							<ToggleButton
-								label="Create/Update"
-								value="create_update"
-								tooltip="Create a new subscription or update an existing one with custom settings"
-								showTooltipIcon
-								{item}
-							/>
-							<ToggleButton
-								label="Existing subscription"
-								value="existing"
-								tooltip="Select an existing subscription from GCP Pub/Sub"
-								showTooltipIcon
-								{item}
-							/>
+							{#snippet children({ item })}
+								<ToggleButton
+									label="Create/Update"
+									value="create_update"
+									tooltip="Create a new subscription or update an existing one with custom settings"
+									showTooltipIcon
+									{item}
+								/>
+								<ToggleButton
+									label="Existing subscription"
+									value="existing"
+									tooltip="Select an existing subscription from GCP Pub/Sub"
+									showTooltipIcon
+									{item}
+								/>
+							{/snippet}
 						</ToggleButtonGroup>
 
 						{#if subscription_mode === 'create_update'}
@@ -216,7 +236,7 @@
 										autocomplete="off"
 										placeholder="Enter subscription ID (leave empty to auto-generate)"
 										bind:value={create_update_subscription_id}
-										on:input={(event) => {
+										oninput={(event) => {
 											subscription_id = event?.currentTarget.value
 										}}
 									/>
@@ -228,21 +248,23 @@
 									tooltip="Select the delivery type for the Pub/Sub subscription. If the subscription already exists and you want to keep it as-is, choose the same delivery type as in Google Cloud. You can switch the type here if the API allows it — otherwise, make the change directly in Google Cloud."
 								>
 									<div class="flex flex-col gap-2 mt-2">
-										<ToggleButtonGroup bind:selected={delivery_type} let:item>
-											<ToggleButton
-												label="Pull"
-												tooltip="Create a subscription where your service will pull messages from the queue. Suitable for services that periodically check for new messages."
-												value="pull"
-												showTooltipIcon
-												{item}
-											/>
-											<ToggleButton
-												label="Push"
-												tooltip="Windmill will auto-generate a push endpoint for this subscription. You must not modify this endpoint in Google Cloud, as it is managed internally by Windmill."
-												showTooltipIcon
-												value="push"
-												{item}
-											/>
+										<ToggleButtonGroup bind:selected={delivery_type}>
+											{#snippet children({ item })}
+												<ToggleButton
+													label="Pull"
+													tooltip="Create a subscription where your service will pull messages from the queue. Suitable for services that periodically check for new messages."
+													value="pull"
+													showTooltipIcon
+													{item}
+												/>
+												<ToggleButton
+													label="Push"
+													tooltip="Windmill will auto-generate a push endpoint for this subscription. You must not modify this endpoint in Google Cloud, as it is managed internally by Windmill."
+													showTooltipIcon
+													value="push"
+													{item}
+												/>
+											{/snippet}
 										</ToggleButtonGroup>
 									</div>
 								</Subsection>
@@ -282,22 +304,16 @@
 								<div class="flex gap-1">
 									<Select
 										loading={loadingSubscription}
-										class="grow shrink max-w-full"
-										on:change={(e) => {
-											subscription_id = e.detail.value
-											cloud_subscription_id = e.detail.value
-										}}
-										on:clear={() => {
-											subscription_id = ''
-										}}
-										value={cloud_subscription_id}
-										items={subscription_items}
+										disablePortal
+										clearable
+										class="grow shrink"
+										bind:value={
+											() => cloud_subscription_id,
+											(t) => ((subscription_id = t), (cloud_subscription_id = t))
+										}
+										onClear={() => (subscription_id = '')}
+										items={subscription_items.map((value) => ({ value }))}
 										placeholder="Choose a subscription"
-										inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-										containerStyles={darkMode
-											? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-											: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-										portal={false}
 									/>
 									<Button
 										disabled={!can_write}
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
index dc638f0a3e..eede2f1960 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
@@ -18,7 +18,7 @@
 	import Required from '$lib/components/Required.svelte'
 	import GcpTriggerEditorConfigSection from './GcpTriggerEditorConfigSection.svelte'
 	import { base } from '$app/paths'
-	import type { Snippet } from 'svelte'
+	import { untrack, type Snippet } from 'svelte'
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import { saveGcpTriggerFromCfg } from './utils'
 	import { handleConfigChange, type Trigger } from '../utils'
@@ -128,7 +128,7 @@
 			delivery_type = defaultValues?.delivery_type ?? 'pull'
 			delivery_config = defaultValues?.delivery_config ?? undefined
 			subscription_id = ''
-			topic_id = defaultValues?.topic_id
+			topic_id = defaultValues?.topic_id ?? ''
 			subscription_mode = defaultValues?.subscription_mode ?? 'create_update'
 			path = defaultValues?.path ?? ''
 			initialPath = ''
@@ -168,7 +168,7 @@
 		is_flow = cfg?.is_flow
 		path = cfg?.path
 		enabled = cfg?.enabled
-		topic_id = cfg?.topic_id
+		topic_id = cfg?.topic_id ?? ''
 		can_write = canWrite(cfg?.path, cfg?.extra_perms, $userStore)
 	}
 
@@ -234,7 +234,8 @@
 	}
 
 	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
+		const args = [captureConfig, isValid] as const
+		untrack(() => onCaptureConfigChange?.(...args))
 	})
 
 	$effect(() => {
@@ -254,9 +255,9 @@
 				: 'New GCP Pub/Sub trigger'}
 			on:close={drawer?.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				{@render actionsButtons()}
-			</svelte:fragment>
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
@@ -370,7 +371,7 @@
 				bind:delivery_config
 				bind:topic_id
 				bind:subscription_mode
-				bind:path
+				{path}
 				cloud_subscription_id={subscription_id}
 				create_update_subscription_id={subscription_id}
 				{can_write}
diff --git a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
new file mode 100644
index 0000000000..bcb83e97db
--- /dev/null
+++ b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
@@ -0,0 +1,647 @@
+<script lang="ts">
+	import { Badge, DrawerContent } from '$lib/components/common'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
+	import Required from '$lib/components/Required.svelte'
+	import Subsection from '$lib/components/Subsection.svelte'
+	import {
+		OpenapiService,
+		type OpenapiHttpRouteFilters,
+		type OpenapiSpecFormat,
+		type OpenapiV3Info,
+		type WebhookFilters
+	} from '$lib/gen'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import { base } from '$lib/base'
+	import Label from '$lib/components/Label.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { ClipboardCopy, Download, Trash } from 'lucide-svelte'
+	import Select from '$lib/components/Select.svelte'
+	import { sendUserToast } from '$lib/toast'
+	import {
+		copyToClipboard,
+		download,
+		emptyString,
+		emptyStringTrimmed,
+		generateRandomString
+	} from '$lib/utils'
+	import YAML from 'yaml'
+	import { tick } from 'svelte'
+	import CopyableCodeBlock from '$lib/components/details/CopyableCodeBlock.svelte'
+	import { bash } from 'svelte-highlight/languages'
+	import CreateToken from '$lib/components/settings/CreateToken.svelte'
+	import Alert from '$lib/components/common/alert/Alert.svelte'
+
+	type HttpRouteAndWebhook = WebhookFilters | OpenapiHttpRouteFilters
+
+	let openAPIGenerator: Drawer
+	let title = $state('')
+	let version = $state('')
+	let description = $state('')
+	let contactName = $state('')
+	let contactEmail = $state('')
+	let contactUrl = $state('')
+	let licenseName = $state('')
+	let licenseUrl = $state('')
+	let isGeneratingOpenapiSpec = $state(false)
+	let openapiDocument = $state('')
+	let lang: OpenapiSpecFormat = $state('yaml')
+	let editor: SimpleEditor | undefined = $state()
+	let generateCurlCommandDrawer: Drawer | undefined = $state()
+	let webhookAndHttpRouteFilter: HttpRouteAndWebhook[] = $state([])
+	let disabled = $derived(webhookAndHttpRouteFilter.length === 0)
+	let token = $state('')
+	let obj: Record<string, unknown> = $state({})
+
+	function isWebhookFilter(data: HttpRouteAndWebhook): data is WebhookFilters {
+		return (data as WebhookFilters).runnable_kind !== undefined
+	}
+
+	function isHttpRouteFilter(data: HttpRouteAndWebhook): data is OpenapiHttpRouteFilters {
+		return (data as OpenapiHttpRouteFilters).route_path_regex !== undefined
+	}
+
+	function getWebhookFilters() {
+		return webhookAndHttpRouteFilter.filter(isWebhookFilter)
+	}
+
+	function getHttpRouteFilters() {
+		return webhookAndHttpRouteFilter.filter(isHttpRouteFilter)
+	}
+
+	function buildInfo() {
+		const isTitle = !emptyString(title)
+		const isVersion = !emptyString(version)
+
+		let info: OpenapiV3Info | undefined = undefined
+
+		if (isTitle && !isVersion) {
+			throw new Error('Please fill version input')
+		} else if (!isTitle && isVersion) {
+			throw new Error('Please fill title input')
+		} else if (isTitle && isVersion) {
+			let isContact =
+				!emptyString(contactName) || !emptyString(contactUrl) || !emptyString(contactEmail)
+			let isLicense = !emptyString(licenseName) || !emptyString(licenseUrl)
+			info = {
+				title,
+				version,
+				description,
+				contact: isContact
+					? {
+							name: contactName,
+							url: contactUrl,
+							email: contactEmail
+						}
+					: undefined,
+				license: isLicense
+					? {
+							name: licenseName,
+							url: licenseUrl
+						}
+					: undefined
+			}
+		}
+		return info
+	}
+
+	async function copyCommandToClipboard() {
+		try {
+			const info = buildInfo()
+			obj = {
+				openapi_spec_format: lang,
+				info,
+				url: `${window.location.origin}${base}`,
+				http_route_filters: getHttpRouteFilters(),
+				webhook_filters: getWebhookFilters()
+			}
+			generateCurlCommandDrawer?.openDrawer()
+		} catch (error) {
+			sendUserToast(error.message || error, true)
+		}
+	}
+
+	async function generateOpenapiSpec(openapi_spec_format: OpenapiSpecFormat) {
+		try {
+			const info = buildInfo()
+			isGeneratingOpenapiSpec = true
+			openapiDocument = await OpenapiService.generateOpenapiSpec({
+				workspace: $workspaceStore!,
+				requestBody: {
+					openapi_spec_format,
+					info,
+					url: `${window.location.origin}${base}`,
+					http_route_filters: getHttpRouteFilters(),
+					webhook_filters: getWebhookFilters()
+				}
+			})
+		} catch (error) {
+			openapiDocument = ''
+			sendUserToast(error.body || error.message, true)
+		} finally {
+			editor?.setCode(openapiDocument, true)
+			isGeneratingOpenapiSpec = false
+		}
+	}
+
+	export function openDrawer() {
+		openAPIGenerator.openDrawer()
+	}
+</script>
+
+<Drawer
+	size="700px"
+	bind:this={generateCurlCommandDrawer}
+	on:close={() => {
+		token = ''
+	}}
+>
+	<DrawerContent on:close={generateCurlCommandDrawer.closeDrawer} title={''}>
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-3">
+				<Alert title="Full Access Warning" type="warning">
+					Any token generated using the form below will grant unrestricted access to the Windmill
+					API. Only share it with trusted parties.
+				</Alert>
+				<CreateToken
+					on:tokenCreated={(e) => {
+						token = e.detail
+					}}
+					newTokenLabel={`openapi-${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
+				/>
+			</div>
+
+			<Label label="Token">
+				<input
+					bind:value={token}
+					placeholder="paste a windmill token to alter the example below"
+					class="!text-xs !font-normal"
+				/>
+			</Label>
+
+			<Label label="Example cURL">
+				<svelte:fragment slot="header">
+					<Tooltip>
+						Use this cURL command to call the OpenAPI generation endpoint.
+
+						<br /><br />
+
+						You can either:
+						<ul class="list-disc pl-5 mt-1 text-sm leading-snug">
+							<li
+								>Paste an existing Windmill token into the <code>token variable</code> placeholder</li
+							>
+							<li>Or generate a new token</li>
+						</ul>
+
+						<br />
+					</Tooltip>
+				</svelte:fragment>
+				<CopyableCodeBlock
+					code={`token=${emptyString(token) ? '' : token}; \\
+curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi/generate" \\
+-H "Authorization: Bearer $token" \\
+-H "Content-Type: application/json" \\
+-d '${JSON.stringify(obj)}'`}
+					language={bash}
+				/>
+			</Label>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<Drawer size="1400px" bind:this={openAPIGenerator}>
+	<DrawerContent
+		title={'Generate OpenAPI document'}
+		on:close={() => openAPIGenerator.closeDrawer()}
+	>
+		<div class="flex flex-row h-full gap-2">
+			<div class="h-full w-1/2 flex flex-col justify-between border rounded-md">
+				<div class="flex flex-col gap-2 overflow-auto pl-2 pt-2">
+					<Subsection label="Info" collapsable>
+						<label class="block pb-2">
+							<span class="text-xs"
+								>The name of your API. Required for OpenAPI. <Required required={true} /></span
+							>
+							<input type="text" placeholder="API Title" bind:value={title} />
+						</label>
+						<label class="block pb-2">
+							<span class="text-xs"
+								>API version. Use semantic versioning (e.g., 1.0.0). <Required
+									required={true}
+								/></span
+							>
+							<input type="text" placeholder="1.0.0" bind:value={version} />
+						</label>
+						<label class="block pb-2">
+							<span class="text-xs">Optional longer description of what your API does.</span>
+							<textarea placeholder="Optional API-wide description" bind:value={description}
+							></textarea>
+						</label>
+						<label class="block pb-2">
+							<span class="text-xs">Person responsible for the API (e.g., maintainer or team).</span
+							>
+							<input type="text" placeholder="Jane Doe" bind:value={contactName} />
+						</label>
+						<label class="block pb-2">
+							<span class="text-xs">Email address for API-related questions or issues.</span>
+							<input type="email" placeholder="jane@example.com" bind:value={contactEmail} />
+						</label>
+						<label class="block pb-2">
+							<span class="text-xs">Link to documentation, team page, or relevant site.</span>
+							<input type="url" placeholder="https://example.com" bind:value={contactUrl} />
+						</label>
+						<label class="block pb-2">
+							<span class="text-xs">Type of license (e.g., MIT, Apache 2.0).</span>
+							<input type="text" placeholder="MIT" bind:value={licenseName} />
+						</label>
+						<label class="block pb-2">
+							<span class="text-xs">Link to the license terms and conditions.</span>
+							<input
+								type="url"
+								placeholder="https://opensource.org/licenses/MIT"
+								bind:value={licenseUrl}
+							/>
+						</label>
+					</Subsection>
+
+					{#if webhookAndHttpRouteFilter.length > 0}
+						{#each webhookAndHttpRouteFilter as filter, i}
+							{@const isHttpRouteFIlter = isHttpRouteFilter(filter)}
+							<div class="flex flex-row items-center py-2 px-4 gap-2">
+								<div class="border w-full rounded-md p-4 gap-2">
+									<Label
+										label={`${isHttpRouteFIlter ? 'HTTP route filter' : 'Webhook filter'}`}
+										headerClass="font-bold"
+									>
+										<div class="mt-2">
+											{#if isHttpRouteFIlter}
+												{@const httpRouteFilter = filter}
+												{@const postgresqlRegex = `f/${httpRouteFilter.folder_regex}/${httpRouteFilter.path_regex}`}
+												<div class="flex flex-col gap-2">
+													<Label label="Route path regex" class="w-full">
+														<input
+															type="text"
+															placeholder="products"
+															class="mt-1"
+															bind:value={httpRouteFilter.route_path_regex}
+															onchange={() => {
+																if (httpRouteFilter.route_path_regex.length === 0) {
+																	httpRouteFilter.route_path_regex = '*'
+																}
+															}}
+														/>
+													</Label>
+
+													<Label label="Path regex">
+														<div class="flex flex-col gap-2">
+															<div
+																class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 pb-0 mt-1"
+															>
+																<div>
+																	<input
+																		bind:value={httpRouteFilter.folder_regex}
+																		onchange={() => {
+																			if (httpRouteFilter.folder_regex.length === 0) {
+																				httpRouteFilter.folder_regex = '*'
+																			}
+																		}}
+																		type="text"
+																		id="folder"
+																		autocomplete="off"
+																	/>
+																</div>
+																<span class="text-xl">/</span>
+																<label class="block grow w-full max-w-md">
+																	<input
+																		bind:value={httpRouteFilter.path_regex}
+																		onchange={() => {
+																			if (httpRouteFilter.path_regex?.length === 0) {
+																				httpRouteFilter.path_regex = '*'
+																			}
+																		}}
+																		type="text"
+																		id="path"
+																		autocomplete="off"
+																	/>
+																</label>
+															</div>
+
+															<div class="flex flex-col w-full">
+																<div class="flex justify-start w-full">
+																	<Badge
+																		color="gray"
+																		class="center-center !bg-surface-secondary !text-tertiary !w-[70px] !h-[24px] rounded-r-none border"
+																	>
+																		Full path
+																	</Badge>
+																	<input
+																		type="text"
+																		readonly
+																		value={postgresqlRegex}
+																		size={postgresqlRegex.length}
+																		class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+																	/>
+																</div>
+															</div>
+														</div>
+													</Label>
+												</div>
+											{:else}
+												{@const webhookFilters = filter}
+												{@const postgresqlRegex = `${webhookFilters.user_or_folder_regex}/${webhookFilters.user_or_folder_regex_value}/${webhookFilters.path}`}
+
+												<Label label="Filter" headless>
+													<div class="flex flex-col gap-2">
+														<ToggleButtonGroup bind:selected={webhookFilters.runnable_kind}>
+															{#snippet children({ item })}
+																<ToggleButton value="script" label="script" {item} />
+																<ToggleButton value="flow" label="flow" {item} />
+															{/snippet}
+														</ToggleButtonGroup>
+
+														<Label label="Path regex">
+															<div class="flex flex-col gap-2">
+																<div
+																	class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 pb-0 mt-1"
+																>
+																	<Select
+																		clearable={false}
+																		class="grow shrink"
+																		bind:value={webhookFilters.user_or_folder_regex}
+																		items={['*', 'u', 'f'].map((value) => ({ value }))}
+																	/>
+																	<span class="text-xl">/</span>
+																	<div>
+																		<input
+																			bind:value={webhookFilters.user_or_folder_regex_value}
+																			onchange={() => {
+																				if (
+																					webhookFilters.user_or_folder_regex_value.length === 0
+																				) {
+																					webhookFilters.user_or_folder_regex_value = '*'
+																				}
+																			}}
+																			type="text"
+																			id="folder"
+																			autocomplete="off"
+																		/>
+																	</div>
+																	<span class="text-xl">/</span>
+																	<label class="block grow w-full max-w-md">
+																		<input
+																			bind:value={webhookFilters.path}
+																			onchange={() => {
+																				if (webhookFilters.path.length === 0) {
+																					webhookFilters.path = '*'
+																				}
+																			}}
+																			type="text"
+																			id="path"
+																			autocomplete="off"
+																		/>
+																	</label>
+																</div>
+
+																<div class="flex flex-col w-full">
+																	<div class="flex justify-start w-full">
+																		<Badge
+																			color="gray"
+																			class="center-center !bg-surface-secondary !text-tertiary !w-[70px] !h-[24px] rounded-r-none border"
+																		>
+																			Full path
+																		</Badge>
+																		<input
+																			type="text"
+																			readonly
+																			value={postgresqlRegex}
+																			size={postgresqlRegex.length}
+																			class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+																		/>
+																	</div>
+																</div>
+															</div>
+														</Label>
+													</div>
+												</Label>
+											{/if}
+										</div>
+									</Label>
+								</div>
+
+								<Button
+									variant="border"
+									color="light"
+									size="xs"
+									btnClasses="bg-surface-secondary hover:bg-red-500 hover:text-white p-2 rounded-full"
+									aria-label="Clear"
+									on:click={() => {
+										webhookAndHttpRouteFilter = webhookAndHttpRouteFilter.filter(
+											(_, index) => index !== i
+										)
+									}}
+								>
+									<Trash size={14} />
+								</Button>
+							</div>
+						{/each}
+					{/if}
+				</div>
+
+				<div class="flex flex-col border-t w-full p-4 gap-2">
+					<div class="flex flex-row gap-2 w-full">
+						<div class="w-1/2">
+							<Button
+								spacingSize="sm"
+								color="light"
+								btnClasses="h-10"
+								size="xs"
+								variant="border"
+								on:click={() => {
+									webhookAndHttpRouteFilter.push({
+										path: '*',
+										user_or_folder_regex: '*',
+										user_or_folder_regex_value: '*',
+										runnable_kind: 'script'
+									})
+								}}
+							>
+								Add webhook filters
+								<Tooltip>
+									<span class="text-sm leading-snug block">
+										Add a new webhook filter to include specific webhooks in the generated OpenAPI
+										spec.
+									</span>
+
+									<span class="text-sm leading-snug block mt-2"> This filter works by: </span>
+
+									<ul class="list-disc pl-5 mt-1 text-sm leading-snug">
+										<li>
+											<span>
+												Selecting a <strong>runnable kind</strong>: either <code>script</code>
+												or <code>flow</code>.
+											</span>
+										</li>
+										<li>
+											<span>
+												Defining a <strong>path regex</strong>: matches the internal Windmill path
+												of a script or flow.
+												<br />
+												Example: <code>f/notify/*</code> will match any webhook whose script or flow
+												path starts with <code>f/notify/</code>, such as
+												<code>f/notify/foo</code>
+												or <code>f/notify/bar</code>.
+											</span>
+										</li>
+									</ul>
+
+									<span class="text-sm leading-snug block mt-2">
+										Only the wildcard <code>*</code> is supported for matching.
+									</span>
+								</Tooltip>
+							</Button>
+						</div>
+						<div class="w-1/2">
+							<Button
+								size="xs"
+								btnClasses="h-10"
+								color="light"
+								variant="border"
+								on:click={() => {
+									webhookAndHttpRouteFilter.push({
+										path_regex: '*',
+										folder_regex: '*',
+										route_path_regex: '*'
+									})
+								}}
+							>
+								Add HTTP routes filters
+								<Tooltip>
+									<span class="text-sm leading-snug block">
+										Add a new HTTP route filter to include specific routes in the generated OpenAPI
+										spec.
+									</span>
+
+									<span class="text-sm leading-snug block mt-2"> You can define: </span>
+
+									<ul class="list-disc pl-5 mt-1 text-sm leading-snug">
+										<li>
+											<span>
+												<strong>route path regex</strong>: Matches the route path of the HTTP route.
+												<br />
+												Example: <code>/user/*</code> will match routes like
+												<code>/user/123</code>
+												or <code>/user/:id</code>.
+											</span>
+										</li>
+										<li>
+											<span>
+												<strong>path regex</strong>: Matches the path of the route.
+												<br />
+												Example: <code>f/test/*</code> matches any route under the
+												<code>f/test/</code> folder.
+											</span>
+										</li>
+									</ul>
+
+									<span class="text-sm leading-snug block mt-2">
+										Only the wildcard <code>*</code> is supported in both regex fields.
+									</span>
+								</Tooltip>
+							</Button>
+						</div>
+					</div>
+					<Button
+						{disabled}
+						color="light"
+						variant="border"
+						spacingSize="sm"
+						loading={isGeneratingOpenapiSpec}
+						on:click={async () => {
+							await generateOpenapiSpec(lang)
+						}}
+					>
+						Generate OpenAPI document
+					</Button>
+					<Button
+						{disabled}
+						spacingSize="sm"
+						color="light"
+						size="xs"
+						variant="border"
+						on:click={copyCommandToClipboard}
+						startIcon={{ icon: ClipboardCopy }}
+					>
+						Copy cURL command
+					</Button>
+				</div>
+			</div>
+
+			<div class="w-1/2 h-full flex flex-col gap-2">
+				<div class="flex flex-row justify-between">
+					<ToggleButtonGroup
+						bind:selected={lang}
+						on:selected={async ({ detail }) => {
+							if (!emptyStringTrimmed(openapiDocument)) {
+								try {
+									if (detail === 'yaml') {
+										const obj = JSON.parse(openapiDocument)
+										openapiDocument = YAML.stringify(obj)
+									} else {
+										const obj = YAML.parse(openapiDocument)
+										openapiDocument = JSON.stringify(obj, null, 2)
+									}
+									await tick()
+									editor?.setCode(openapiDocument, true)
+								} catch (error) {
+									const message = error instanceof Error ? error.message : JSON.stringify(error)
+									sendUserToast(`Conversion failed: ${message}`, true)
+								}
+							}
+						}}
+					>
+						{#snippet children({ item })}
+							<ToggleButton value="yaml" label="yaml" {item} />
+							<ToggleButton value="json" label="json" {item} />
+						{/snippet}
+					</ToggleButtonGroup>
+					<div class="flex flex-row gap-2">
+						<Button
+							disabled={emptyStringTrimmed(openapiDocument)}
+							spacingSize="sm"
+							color="light"
+							variant="border"
+							btnClasses="mb-2"
+							on:click={async () => {
+								await copyToClipboard(openapiDocument)
+							}}
+							startIcon={{ icon: ClipboardCopy }}
+							iconOnly
+						/>
+
+						<Button
+							disabled={emptyStringTrimmed(openapiDocument)}
+							spacingSize="sm"
+							color="light"
+							variant="border"
+							btnClasses="mb-2"
+							on:click={() => {
+								download(
+									`openapi-3.1.${lang}`,
+									openapiDocument,
+									lang === 'yaml' ? 'text/x-yaml' : 'application/json'
+								)
+							}}
+							startIcon={{ icon: Download }}
+							iconOnly
+						/>
+					</div>
+				</div>
+				<SimpleEditor bind:this={editor} class="h-full" {lang} bind:code={openapiDocument} />
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/http/RouteEditor.svelte b/frontend/src/lib/components/triggers/http/RouteEditor.svelte
index 00914e8172..79f1fa40ab 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditor.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditor.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { tick } from 'svelte'
 	import RouteEditorInner from './RouteEditorInner.svelte'
+	import type { EditHttpTrigger, HttpTrigger } from '$lib/gen'
 
 	interface Props {
 		onUpdate?: (cfg?: Record<string, any>) => void
+		customSaveBehavior?: (cfg: HttpTrigger | EditHttpTrigger) => void
 	}
 
-	let { onUpdate = undefined }: Props = $props()
+	let { onUpdate = undefined, customSaveBehavior }: Props = $props()
 
 	let open = $state(false)
 	export async function openEdit(ePath: string, isFlow: boolean) {
@@ -29,5 +31,5 @@
 </script>
 
 {#if open}
-	<RouteEditorInner {onUpdate} bind:this={drawer} />
+	<RouteEditorInner {customSaveBehavior} {onUpdate} bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
index ae51547ef7..258e280ce2 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
@@ -119,14 +119,14 @@
 				class="w-auto"
 				bind:selected={http_method}
 				disabled={!userCanEditConfig || !can_write || !!static_asset_config}
-				let:item
-				let:disabled
 			>
-				<ToggleButton label="GET" value="get" {item} {disabled} />
-				<ToggleButton label="POST" value="post" {item} {disabled} />
-				<ToggleButton label="PUT" value="put" {item} {disabled} />
-				<ToggleButton label="PATCH" value="patch" {item} {disabled} />
-				<ToggleButton label="DELETE" value="delete" {item} {disabled} />
+				{#snippet children({ item, disabled })}
+					<ToggleButton label="GET" value="get" {item} {disabled} />
+					<ToggleButton label="POST" value="post" {item} {disabled} />
+					<ToggleButton label="PUT" value="put" {item} {disabled} />
+					<ToggleButton label="PATCH" value="patch" {item} {disabled} />
+					<ToggleButton label="DELETE" value="delete" {item} {disabled} />
+				{/snippet}
 			</ToggleButtonGroup>
 			<div class="flex flex-col w-full">
 				<Url url={fullRoute} label="Production URL" />
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
index 6d2be0b264..dda278f7fe 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
@@ -32,6 +32,8 @@
 	import TestingBadge from '../testingBadge.svelte'
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import { handleConfigChange } from '../utils'
+	import autosize from '$lib/autosize'
+	import { untrack } from 'svelte'
 
 	let {
 		useDrawer = true,
@@ -46,7 +48,8 @@
 		onUpdate = undefined,
 		onDelete = undefined,
 		onReset = undefined,
-		trigger = undefined
+		trigger = undefined,
+		customSaveBehavior = undefined
 	} = $props()
 
 	// Form data state
@@ -81,7 +84,8 @@
 	let signature_options_type = $state<'custom_script' | 'custom_signature'>('custom_signature')
 	let can_write = $state(true)
 	let extraPerms = $state<Record<string, string> | undefined>(undefined)
-
+	let summary: string | undefined = $state()
+	let routeDescription: string | undefined = $state()
 	// Component references
 	let s3FilePicker = $state<S3FilePicker | null>(null)
 	let s3Editor = $state<SimpleEditor | null>(null)
@@ -198,29 +202,31 @@
 		}, 100) // if loading takes less than 100ms, we don't show the loader
 		try {
 			drawer?.openDrawer()
-			is_flow = nis_flow
+			is_flow = defaultValues?.is_flow ?? nis_flow
 			edit = false
 			itemKind = nis_flow ? 'flow' : 'script'
-			is_async = false
-			authentication_method = 'none'
+			is_async = defaultValues?.is_async ?? false
+			authentication_method = defaultValues?.authentication_method ?? 'none'
 			route_path = defaultValues?.route_path ?? ''
 			dirtyRoutePath = false
 			http_method = defaultValues?.http_method ?? 'post'
 			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath
-			static_asset_config = undefined
-			s3FileUploadRawMode = false
+			static_asset_config = defaultValues?.static_asset_config ?? undefined
+			s3FileUploadRawMode = defaultValues?.s3FileUploadRawMode ?? false
 			path = defaultValues?.path ?? ''
 			initialPath = ''
 			dirtyPath = false
-			is_static_website = false
-			workspaced_route = false
-			authentication_resource_path = ''
+			is_static_website = defaultValues?.is_static_website ?? false
+			workspaced_route = defaultValues?.workspaced_route ?? false
+			authentication_resource_path = defaultValues?.authentication_resource_path ?? ''
 			variable_path = ''
-			signature_options_type = 'custom_signature'
+			signature_options_type = defaultValues?.signature_options_type ?? 'custom_signature'
 			raw_string = defaultValues?.raw_string ?? false
 			wrap_body = defaultValues?.wrap_body ?? false
+			summary = defaultValues?.summary ?? ''
+			routeDescription = defaultValues?.description ?? ''
 		} finally {
 			clearTimeout(loader)
 			drawerLoading = false
@@ -239,6 +245,8 @@
 		workspaced_route = cfg?.workspaced_route
 		wrap_body = cfg?.wrap_body
 		raw_string = cfg?.raw_string
+		summary = cfg?.summary
+		routeDescription = cfg?.description
 		authentication_resource_path = cfg?.authentication_resource_path ?? ''
 		if (cfg?.authentication_method === 'custom_script') {
 			authentication_method = 'signature'
@@ -271,21 +279,26 @@
 	}
 
 	async function triggerScript(): Promise<void> {
-		deploymentLoading = true
-		const saveCfg = routeConfig
-		const isSaved = await saveHttpRouteFromCfg(
-			initialPath,
-			saveCfg,
-			edit,
-			$workspaceStore!,
-			!!$userStore?.is_admin || !!$userStore?.is_super_admin,
-			usedTriggerKinds
-		)
-		if (isSaved) {
-			onUpdate(saveCfg.path)
+		if (customSaveBehavior) {
+			customSaveBehavior(routeConfig)
 			drawer?.closeDrawer()
+		} else {
+			deploymentLoading = true
+			const saveCfg = routeConfig
+			const isSaved = await saveHttpRouteFromCfg(
+				initialPath,
+				saveCfg,
+				edit,
+				$workspaceStore!,
+				!!$userStore?.is_admin || !!$userStore?.is_super_admin,
+				usedTriggerKinds
+			)
+			if (isSaved) {
+				onUpdate(saveCfg.path)
+				drawer?.closeDrawer()
+			}
+			deploymentLoading = false
 		}
-		deploymentLoading = false
 	}
 
 	function getRouteConfig(): Record<string, any> {
@@ -296,6 +309,7 @@
 			authentication_method === 'signature' && signature_options_type === 'custom_script'
 				? 'custom_script'
 				: authentication_method
+
 		const nCfg = {
 			script_path,
 			is_flow,
@@ -310,8 +324,11 @@
 			authentication_method: auth_method,
 			static_asset_config,
 			is_static_website,
-			extra_perms: extraPerms
+			extra_perms: extraPerms,
+			summary,
+			description: routeDescription
 		}
+
 		return nCfg
 	}
 
@@ -329,7 +346,8 @@
 	}
 
 	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
+		const args = [captureConfig, isValid] as const
+		untrack(() => onCaptureConfigChange?.(...args))
 	})
 
 	$effect(() => {
@@ -360,19 +378,43 @@
 	{:else}
 		<div class="flex flex-col gap-12">
 			<Section label="Metadata">
-				<Label label="Path">
-					<Path
-						bind:dirty={dirtyPath}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						checkInitialPathExistence={!edit}
-						namePlaceholder="route"
-						kind="http_trigger"
-						hideUser
-						disableEditing={!can_write}
-					/>
-				</Label>
+				<div class="flex flex-col gap-2">
+					<Label label="Summary">
+						<!-- svelte-ignore a11y_autofocus -->
+						<input
+							autofocus
+							type="text"
+							placeholder="Short summary to be displayed when listed"
+							class="text-sm w-full"
+							bind:value={summary}
+							disabled={!can_write}
+						/>
+					</Label>
+
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="route"
+							kind="http_trigger"
+							hideUser
+							disableEditing={!can_write}
+						/>
+					</Label>
+
+					<Label label="Description">
+						<textarea
+							rows="4"
+							use:autosize
+							bind:value={routeDescription}
+							placeholder="Describe the route"
+							disabled={!can_write}
+						></textarea>
+					</Label>
+				</div>
 			</Section>
 
 			{#if !hideTarget}
@@ -402,12 +444,12 @@
 									static_asset_config = undefined
 								}
 							}}
-							let:item
-							let:disabled
 						>
-							<ToggleButton label="Runnable" value="runnable" {item} {disabled} />
-							<ToggleButton label="Static asset" value="static_asset" {item} {disabled} />
-							<ToggleButton label="Static website" value="static_website" {item} {disabled} />
+							{#snippet children({ item, disabled })}
+								<ToggleButton label="Runnable" value="runnable" {item} {disabled} />
+								<ToggleButton label="Static asset" value="static_asset" {item} {disabled} />
+								<ToggleButton label="Static website" value="static_website" {item} {disabled} />
+							{/snippet}
 						</ToggleButtonGroup>
 					{/if}
 
@@ -498,7 +540,7 @@
 									allowEdit={!$userStore?.operator}
 								/>
 
-								{#if script_path === undefined}
+								{#if emptyString(script_path)}
 									<Button
 										btnClasses="ml-4 mt-2"
 										color="dark"
@@ -542,23 +584,23 @@
 												is_async = detail === 'async'
 											}}
 											disabled={!can_write || !!static_asset_config}
-											let:item
-											let:disabled
 										>
-											<ToggleButton
-												label="Async"
-												value="async"
-												tooltip="The returning value is the uuid of the job assigned to execute the job."
-												{item}
-												{disabled}
-											/>
-											<ToggleButton
-												label="Sync"
-												value="sync"
-												tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-												{item}
-												{disabled}
-											/>
+											{#snippet children({ item, disabled })}
+												<ToggleButton
+													label="Async"
+													value="async"
+													tooltip="The returning value is the uuid of the job assigned to execute the job."
+													{item}
+													{disabled}
+												/>
+												<ToggleButton
+													label="Sync"
+													value="sync"
+													tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+													{item}
+													{disabled}
+												/>
+											{/snippet}
 										</ToggleButtonGroup>
 									</svelte:fragment>
 								</Label>
@@ -575,63 +617,63 @@
 										}
 									}}
 									disabled={!can_write}
-									let:item
-									let:disabled
 								>
-									{#each authentication_options as option}
-										{#if option.value === 'signature'}
-											<Popover placement="top-end" usePointerDownOutside>
-												<svelte:fragment slot="trigger">
-													<ToggleButton
-														label={option.label}
-														value={option.value}
-														tooltip={option.tooltip}
-														{item}
-														{disabled}
-													/>
-												</svelte:fragment>
-												<svelte:fragment slot="content">
-													<ToggleButtonGroup
-														class="w-auto h-full"
-														bind:selected={signature_options_type}
-														on:selected={(e) => {
-															if (e.detail === 'custom_script') {
-																if (!raw_string) {
-																	raw_string = true
+									{#snippet children({ item, disabled })}
+										{#each authentication_options as option}
+											{#if option.value === 'signature'}
+												<Popover placement="top-end" usePointerDownOutside>
+													<svelte:fragment slot="trigger">
+														<ToggleButton
+															label={option.label}
+															value={option.value}
+															tooltip={option.tooltip}
+															{item}
+															{disabled}
+														/>
+													</svelte:fragment>
+													<svelte:fragment slot="content">
+														<ToggleButtonGroup
+															class="w-auto h-full"
+															bind:selected={signature_options_type}
+															on:selected={(e) => {
+																if (e.detail === 'custom_script') {
+																	if (!raw_string) {
+																		raw_string = true
+																	}
 																}
-															}
-														}}
-														disabled={!can_write}
-														let:item
-														let:disabled
-													>
-														<ToggleButton
-															label="Signature validation"
-															value="custom_signature"
-															tooltip="Use a predefined or custom signature-based authentication scheme"
-															{item}
-															{disabled}
-														/>
-														<ToggleButton
-															label="Custom script"
-															value="custom_script"
-															tooltip="Use your own script logic"
-															{item}
-															{disabled}
-														/>
-													</ToggleButtonGroup>
-												</svelte:fragment>
-											</Popover>
-										{:else}
-											<ToggleButton
-												label={option.label}
-												value={option.value}
-												tooltip={option.tooltip}
-												{item}
-												{disabled}
-											/>
-										{/if}
-									{/each}
+															}}
+															disabled={!can_write}
+														>
+															{#snippet children({ item, disabled })}
+																<ToggleButton
+																	label="Signature validation"
+																	value="custom_signature"
+																	tooltip="Use a predefined or custom signature-based authentication scheme"
+																	{item}
+																	{disabled}
+																/>
+																<ToggleButton
+																	label="Custom script"
+																	value="custom_script"
+																	tooltip="Use your own script logic"
+																	{item}
+																	{disabled}
+																/>
+															{/snippet}
+														</ToggleButtonGroup>
+													</svelte:fragment>
+												</Popover>
+											{:else}
+												<ToggleButton
+													label={option.label}
+													value={option.value}
+													tooltip={option.tooltip}
+													{item}
+													{disabled}
+												/>
+											{/if}
+										{/each}
+									{/snippet}
 								</ToggleButtonGroup>
 							</svelte:fragment>
 						</Label>
@@ -741,9 +783,9 @@
 				: 'New route'}
 			on:close={() => drawer?.closeDrawer()}
 		>
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				{@render saveButton()}
-			</svelte:fragment>
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
@@ -776,19 +818,21 @@
 	loadItems={loadVariables}
 	buttons={{ 'Edit/View': (x) => variableEditor?.editVariable(x) }}
 >
-	<div slot="submission" class="flex flex-row">
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			startIcon={{ icon: Plus }}
-			on:click={() => {
-				variableEditor?.initNew()
-			}}
-		>
-			New variable
-		</Button>
-	</div>
+	{#snippet submission()}
+		<div class="flex flex-row">
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				startIcon={{ icon: Plus }}
+				on:click={() => {
+					variableEditor?.initNew()
+				}}
+			>
+				New variable
+			</Button>
+		</div>
+	{/snippet}
 </ItemPicker>
 
 <VariableEditor bind:this={variableEditor} on:create={(e) => variablePicker?.openDrawer()} />
diff --git a/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte b/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
new file mode 100644
index 0000000000..74ad72e3e5
--- /dev/null
+++ b/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
@@ -0,0 +1,324 @@
+<script lang="ts">
+	import { HttpTriggerService, type EditHttpTrigger, type NewHttpTrigger } from '$lib/gen'
+	import { Pen, Save } from 'lucide-svelte'
+	import Button from '../../common/button/Button.svelte'
+	import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import Section from '../../Section.svelte'
+	import SimpleEditor from '../../SimpleEditor.svelte'
+	import Subsection from '../../Subsection.svelte'
+	import RouteEditor from './RouteEditor.svelte'
+	import { generateHttpTriggerFromOpenApi, type Source } from './utils'
+	import { isCloudHosted } from '$lib/cloud'
+	import { usedTriggerKinds, workspaceStore } from '$lib/stores'
+	import FileInput from '../../common/fileInput/FileInput.svelte'
+	import { emptyStringTrimmed, sendUserToast } from '$lib/utils'
+	import FolderPicker from '../../FolderPicker.svelte'
+	import Required from '$lib/components/Required.svelte'
+	import { Drawer, DrawerContent } from '$lib/components/common'
+	import { get } from 'svelte/store'
+
+	type Props = {
+		closeFn: () => Promise<void>
+	}
+
+	let { closeFn }: Props = $props()
+
+	let routeEditor: RouteEditor
+	let routesGenerator: Drawer
+
+	let selected: Source = $state('OpenAPI')
+	let openApiUrl = $state('')
+	let openApiFile = $state('')
+	let openApiRawEditorValue = $state('')
+	let openApiFileEditorValue = $state('')
+	let openApiUrlEditorValue = $state('')
+	let isGeneratingHttpRoutes = $state(false)
+	let httpTriggers: NewHttpTrigger[] = $state([])
+	let isFetchingOpenApiSpec = $state(false)
+	let folderName: string = $state('')
+	let forceRerender = $state(false)
+	let code: string = $state('')
+	let isCreating = $state(false)
+	let acceptedFileTypes: string[] = ['.json', '.yaml']
+
+	let callback: ((cfg: NewHttpTrigger | EditHttpTrigger) => void) | undefined = $state(undefined)
+
+	let lang: 'yaml' | 'json' = $derived.by(() => {
+		if (code.trimStart().startsWith('{')) {
+			return 'json'
+		}
+
+		return 'yaml'
+	})
+
+	function openRouteEditor(_path: string, newHttpTrigger: NewHttpTrigger) {
+		routeEditor.openNew(false, '', newHttpTrigger)
+	}
+
+	let isValidUrl = $derived.by(() => {
+		try {
+			const parsed = new URL(openApiUrl)
+			return /^https?:/.test(parsed.protocol)
+		} catch (err) {
+			return false
+		}
+	})
+
+	export function openDrawer() {
+		routesGenerator.openDrawer()
+	}
+
+	async function fetchOpenApiConfig() {
+		try {
+			isFetchingOpenApiSpec = true
+			const response = await fetch(openApiUrl)
+
+			const data = await response.text()
+			openApiUrlEditorValue = data
+			code = data
+			forceRerender = !forceRerender
+		} catch (error) {
+			sendUserToast(error.message || error, true)
+		} finally {
+			isFetchingOpenApiSpec = false
+		}
+	}
+
+	async function saveHttpTrigger() {
+		try {
+			isCreating = true
+			const message = await HttpTriggerService.createHttpTriggers({
+				workspace: $workspaceStore!,
+				requestBody: httpTriggers
+			})
+			sendUserToast(message)
+			await closeFn()
+			routesGenerator.closeDrawer()
+			if (!get(usedTriggerKinds).includes('http')) {
+				usedTriggerKinds.update((t) => [...t, 'http'])
+			}
+			//reset
+			selected = 'OpenAPI'
+			openApiUrl = ''
+			openApiFile = ''
+			openApiRawEditorValue = ''
+			openApiFileEditorValue = ''
+			openApiUrlEditorValue = ''
+			httpTriggers = []
+			folderName = ''
+			code = ''
+		} catch (error) {
+			sendUserToast(error.body, true)
+		} finally {
+			isCreating = false
+		}
+	}
+
+	async function generateHttpTrigger() {
+		try {
+			isGeneratingHttpRoutes = true
+			httpTriggers = await generateHttpTriggerFromOpenApi(code, folderName)
+			if (httpTriggers.length === 0) {
+				sendUserToast('No paths defined in the OpenAPI spec. Cannot generate HTTP routes.', true)
+			}
+		} catch (error) {
+			sendUserToast(error.message || 'An unexpected error occurred', true)
+		} finally {
+			isGeneratingHttpRoutes = false
+		}
+	}
+</script>
+
+<RouteEditor customSaveBehavior={callback} bind:this={routeEditor} />
+
+<Drawer size="700px" bind:this={routesGenerator}>
+	<DrawerContent
+		title={'Generate HTTP routes from OpenAPI spec'}
+		on:close={() => routesGenerator.closeDrawer()}
+	>
+		{#snippet actions()}
+			<Button
+				size="sm"
+				loading={isCreating}
+				disabled={httpTriggers.length === 0}
+				startIcon={{ icon: Save }}
+				on:click={saveHttpTrigger}
+			>
+				Save routes
+			</Button>
+		{/snippet}
+		{@render config()}
+	</DrawerContent>
+</Drawer>
+
+{#snippet config()}
+	<div class="h-full">
+		<Section label="HTTP routes generator" headless wrapperClass="h-full">
+			<div class="flex flex-col gap-1 h-full">
+				<Subsection>
+					<div class="flex flex-col gap-1">
+						<p class="text-xs text-tertiary">
+							Pick a folder to bind the generated HTTP routes to.<Required required={true} />
+						</p>
+						<FolderPicker bind:folderName />
+					</div>
+				</Subsection>
+
+				{#if !emptyStringTrimmed(folderName)}
+					<Subsection>
+						<ToggleButtonGroup
+							on:selected={({ detail }) => {
+								if (selected === 'OpenAPI') {
+									openApiRawEditorValue = code
+								} else if (selected === 'OpenAPI_File') {
+									openApiFileEditorValue = code
+								} else {
+									openApiUrlEditorValue = code
+								}
+
+								const type = detail as Source
+
+								if (type === 'OpenAPI') {
+									code = openApiRawEditorValue
+								} else if (type === 'OpenAPI_File') {
+									code = openApiFileEditorValue
+								} else {
+									code = openApiUrlEditorValue
+								}
+								forceRerender = !forceRerender
+							}}
+							bind:selected
+						>
+							{#snippet children({ item })}
+								<ToggleButton
+									tooltip="Paste an OpenAPI JSON/YAML specification directly to generate HTTP routes."
+									showTooltipIcon
+									label="Paste OpenAPI spec"
+									value="OpenAPI"
+									{item}
+								/>
+								<ToggleButton
+									tooltip="Upload an OpenAPI file in JSON/YAML format to generate HTTP routes."
+									showTooltipIcon
+									label="From OpenAPI file"
+									value="OpenAPI_File"
+									{item}
+								/>
+								<ToggleButton
+									tooltip="Provide a publicly accessible URL to an OpenAPI specification in JSON/YAML format to generate HTTP routes."
+									showTooltipIcon
+									label="From OpenAPI URL"
+									value="OpenAPI_URL"
+									{item}
+								/>
+							{/snippet}
+						</ToggleButtonGroup>
+
+						<div class="flex flex-col gap-2 mt-2">
+							{#if selected === 'OpenAPI'}
+								<ToggleButtonGroup bind:selected={lang}>
+									{#snippet children({ item })}
+										<ToggleButton value="yaml" label="YAML" {item} />
+										<ToggleButton value="json" label="JSON" {item} />
+									{/snippet}
+								</ToggleButtonGroup>
+							{:else if selected === 'OpenAPI_File'}
+								<FileInput
+									accept={acceptedFileTypes.join(',')}
+									multiple={false}
+									convertTo={'text'}
+									iconSize={24}
+									returnFileNames={true}
+									class="text-sm py-4"
+									on:change={async ({ detail }) => {
+										if (detail && detail.length > 0) {
+											if (openApiFile.endsWith('.json')) {
+												lang = 'json'
+											} else {
+												lang = 'yaml'
+											}
+											code = detail[0].data
+											openApiFileEditorValue = code
+											openApiFile = detail[0].name as string
+											forceRerender = !forceRerender
+											return
+										}
+										openApiFile = ''
+									}}
+								/>
+							{:else if selected === 'OpenAPI_URL'}
+								<div class="flex flex-row gap-1">
+									<input type="text" placeholder="OpenAPI URL" bind:value={openApiUrl} />
+									<Button
+										color="light"
+										spacingSize="sm"
+										size="xs"
+										loading={isFetchingOpenApiSpec}
+										disabled={!isValidUrl}
+										on:click={fetchOpenApiConfig}
+									>
+										Fetch
+									</Button>
+								</div>
+							{/if}
+							{#if selected === 'OpenAPI' || (selected === 'OpenAPI_File' && !emptyStringTrimmed(openApiFile)) || (selected === 'OpenAPI_URL' && !emptyStringTrimmed(openApiUrl))}
+								{#key forceRerender}
+									<SimpleEditor class="h-96" {lang} bind:code />
+								{/key}
+							{/if}
+							<Button
+								spacingSize="sm"
+								size="xs"
+								btnClasses="h-8"
+								loading={isGeneratingHttpRoutes}
+								on:click={generateHttpTrigger}
+								disabled={code.length === 0}
+								color="light"
+								variant="border">Generate HTTP routes</Button
+							>
+						</div>
+					</Subsection>
+
+					<div class="flex flex-col gap-1 mb-2">
+						{#each httpTriggers as httpTrigger, index}
+							<div
+								class="hover:bg-surface-hover w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0
+								first-of-type:rounded-t-md last-of-type:rounded-b-md flex justify-between mt-2"
+							>
+								<div>
+									<div class="text-primary">
+										{httpTrigger.http_method.toUpperCase()}
+										{isCloudHosted() || httpTrigger.workspaced_route
+											? $workspaceStore! + '/' + httpTrigger.route_path
+											: httpTrigger.route_path}
+									</div>
+									<div class="text-secondary text-xs truncate text-left font-light">
+										{httpTrigger.path}
+									</div>
+								</div>
+
+								<div class="flex gap-2 items-center justify-end">
+									<Button
+										on:click={() => {
+											callback = (newHttpTrigger) => {
+												httpTriggers[index] = newHttpTrigger as NewHttpTrigger
+												httpTriggers = httpTriggers
+											}
+											openRouteEditor(httpTriggers[index].path, httpTriggers[index])
+										}}
+										size="xs"
+										startIcon={{ icon: Pen }}
+										color="gray"
+									>
+										Edit
+									</Button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</Section>
+	</div>
+{/snippet}
diff --git a/frontend/src/lib/components/triggers/http/utils.ts b/frontend/src/lib/components/triggers/http/utils.ts
index 04734b2c81..ca779dec78 100644
--- a/frontend/src/lib/components/triggers/http/utils.ts
+++ b/frontend/src/lib/components/triggers/http/utils.ts
@@ -1,7 +1,11 @@
 import { base } from '$lib/base'
 import { isCloudHosted } from '$lib/cloud'
+import { random_adj } from '$lib/components/random_positive_adjetive'
+import type { HttpMethod, NewHttpTrigger } from '$lib/gen'
 import { HttpTriggerService } from '$lib/gen/services.gen'
 import { sendUserToast } from '$lib/toast'
+import { generateRandomString, OpenApi as WindmillOpenApi } from '$lib/utils'
+import { type OpenAPI } from 'openapi-types'
 import type { Writable } from 'svelte/store'
 import { get } from 'svelte/store'
 
@@ -50,7 +54,9 @@ export async function saveHttpRouteFromCfg(
 		workspaced_route: routeCfg.workspaced_route,
 		authentication_resource_path: routeCfg.authentication_resource_path,
 		wrap_body: routeCfg.wrap_body,
-		raw_string: routeCfg.raw_string
+		raw_string: routeCfg.raw_string,
+		description: routeCfg.description,
+		summary: routeCfg.summary
 	}
 	try {
 		if (edit) {
@@ -76,3 +82,75 @@ export async function saveHttpRouteFromCfg(
 		return false
 	}
 }
+
+export type Source = 'OpenAPI' | 'OpenAPI_File' | 'OpenAPI_URL'
+
+function convertOpenApiPathToRoutePath(openApiPath: string) {
+	return openApiPath.replace(/{([^}]+)}/g, ':$1').slice(1)
+}
+
+const MAX_PATH_LEN = 255
+
+function generateFolderPath(folderName: string, summary?: string) {
+	let suffix: string
+	const prefix = `f/${folderName}/`
+	if (!summary) {
+		suffix = `${random_adj()}_${generateRandomString(6)}`
+	} else {
+		const remainingLen = MAX_PATH_LEN - prefix.length
+		if (summary.length > remainingLen) {
+			suffix = summary.substring(0, remainingLen).replaceAll(' ', '_')
+		} else {
+			suffix = summary.replaceAll(' ', '_')
+		}
+	}
+
+	return prefix.concat(suffix).toLocaleLowerCase()
+}
+
+function processOpenApiDocument(
+	document: OpenAPI.Document,
+	folderName: string,
+	_version?: WindmillOpenApi.OpenApiVersion
+) {
+	const paths = document.paths
+
+	const httpTrigger: NewHttpTrigger[] = []
+
+	for (const path in paths) {
+		const pathItem = paths[path]
+		if (!pathItem) continue
+
+		const methods: HttpMethod[] = ['get', 'post', 'put', 'patch', 'delete']
+
+		for (const method of methods) {
+			const routeDetail = pathItem[method]
+			if (!routeDetail) continue
+
+			httpTrigger.push({
+				route_path: convertOpenApiPathToRoutePath(path),
+				http_method: method,
+				authentication_method: 'none',
+				workspaced_route: false,
+				is_async: true,
+				script_path: '',
+				raw_string: false,
+				is_flow: false,
+				is_static_website: false,
+				wrap_body: false,
+				path: generateFolderPath(folderName, routeDetail.summary)
+			})
+		}
+	}
+
+	return httpTrigger
+}
+
+export async function generateHttpTriggerFromOpenApi(
+	api: string,
+	folderName: string
+): Promise<NewHttpTrigger[]> {
+	const [document] = await WindmillOpenApi.parse(api)
+
+	return processOpenApiDocument(document, folderName)
+}
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
index 50579c181f..94a31bf439 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
@@ -12,7 +12,7 @@
 	import { Loader2 } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
 	import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte'
-	import type { Snippet } from 'svelte'
+	import { untrack, type Snippet } from 'svelte'
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import { saveKafkaTriggerFromCfg } from './utils'
 	import { handleConfigChange, type Trigger } from '../utils'
@@ -236,7 +236,8 @@
 	}
 
 	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
+		const args = [captureConfig, isValid] as const
+		untrack(() => onCaptureConfigChange?.(...args))
 	})
 
 	$effect(() => {
@@ -256,9 +257,9 @@
 				: 'New Kafka trigger'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				{@render actionsButtons('sm')}
-			</svelte:fragment>
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggersConfigSection.svelte
index 83f4720736..1d3d62245c 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggersConfigSection.svelte
@@ -6,6 +6,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
 	import TestingBadge from '../testingBadge.svelte'
+	import { untrack } from 'svelte'
 
 	interface Props {
 		path: string
@@ -55,7 +56,7 @@
 	}
 
 	$effect(() => {
-		path && setGroupId()
+		path && untrack(() => setGroupId())
 	})
 </script>
 
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte b/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
index ae78ff3143..15ab7db886 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import Section from '$lib/components/Section.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import { Plus, X } from 'lucide-svelte'
@@ -17,21 +19,36 @@
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import TestingBadge from '../testingBadge.svelte'
 
-	export let can_write: boolean = false
-	export let headless: boolean = false
-	export let mqtt_resource_path: string = ''
-	export let subscribe_topics: MqttSubscribeTopic[] = []
-	export let v3_config: MqttV3Config = DEFAULT_V3_CONFIG
-	export let v5_config: MqttV5Config = DEFAULT_V5_CONFIG
-	export let client_version: MqttClientVersion = 'v5'
-	export let isValid: boolean = false
-	export let client_id: string = ''
-	export let showTestingBadge: boolean = false
+	interface Props {
+		can_write?: boolean
+		headless?: boolean
+		mqtt_resource_path?: string
+		subscribe_topics?: MqttSubscribeTopic[]
+		v3_config?: MqttV3Config
+		v5_config?: MqttV5Config
+		client_version?: MqttClientVersion
+		isValid?: boolean
+		client_id?: string
+		showTestingBadge?: boolean
+	}
 
-	const activateV5Options = {
+	let {
+		can_write = false,
+		headless = false,
+		mqtt_resource_path = $bindable(''),
+		subscribe_topics = $bindable([]),
+		v3_config = $bindable(DEFAULT_V3_CONFIG),
+		v5_config = $bindable(DEFAULT_V5_CONFIG),
+		client_version = $bindable('v5'),
+		isValid = $bindable(false),
+		client_id = $bindable(''),
+		showTestingBadge = false
+	}: Props = $props()
+
+	const activateV5Options = $state({
 		topic_alias: Boolean(v5_config.topic_alias),
 		session_expiry_interval: Boolean(v5_config.session_expiry_interval)
-	}
+	})
 
 	const isValidSubscribeTopics = (subscribe_topics: MqttSubscribeTopic[]): boolean => {
 		if (
@@ -43,16 +60,18 @@
 
 		return true
 	}
-	$: isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqtt_resource_path)
+	run(() => {
+		isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqtt_resource_path)
+	})
 </script>
 
 <div>
 	<Section label="MQTT" {headless}>
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if showTestingBadge}
 				<TestingBadge />
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 		<div class="flex flex-col w-full gap-4">
 			<Subsection label="Connection setup">
 				<ResourcePicker resourceType="mqtt" disabled={!can_write} bind:value={mqtt_resource_path} />
@@ -70,7 +89,7 @@
 						<div class="flex w-full gap-2 items-center">
 							<div class="w-full flex flex-col gap-2 border p-2 rounded-md">
 								<div class="flex flex-row gap-2 w-full">
-									<!-- svelte-ignore a11y-label-has-associated-control -->
+									<!-- svelte-ignore a11y_label_has_associated_control -->
 									<label class="flex flex-col w-full gap-1">
 										<div class="flex gap-2 mb-1">
 											<span class="text-secondary text-sm">
@@ -113,10 +132,12 @@
 												>
 											</span>
 										</div>
-										<ToggleButtonGroup bind:selected={v.qos} let:item>
-											<ToggleButton value={'qos0'} label="At most once (QoS 0)" {item} />
-											<ToggleButton value={'qos1'} label="At least once (QoS 1)" {item} />
-											<ToggleButton value={'qos2'} label="Exactly once (QoS 2)" {item} />
+										<ToggleButtonGroup bind:selected={v.qos}>
+											{#snippet children({ item })}
+												<ToggleButton value={'qos0'} label="At most once (QoS 0)" {item} />
+												<ToggleButton value={'qos1'} label="At least once (QoS 1)" {item} />
+												<ToggleButton value={'qos2'} label="Exactly once (QoS 2)" {item} />
+											{/snippet}
 										</ToggleButtonGroup>
 									</label>
 								</div>
@@ -144,7 +165,7 @@
 								transition:fade|local={{ duration: 100 }}
 								class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
 								aria-label="Clear"
-								on:click={() => {
+								onclick={() => {
 									subscribe_topics = subscribe_topics.filter((_, index) => index !== i)
 								}}
 							>
@@ -178,9 +199,11 @@
 
 			<Subsection label="Advanced" collapsable={true}>
 				<div class="flex p-2 flex-col gap-2 mt-3">
-					<ToggleButtonGroup bind:selected={client_version} let:item>
-						<ToggleButton value="v5" label="Version 5" {item} />
-						<ToggleButton value="v3" label="Version 3" {item} />
+					<ToggleButtonGroup bind:selected={client_version}>
+						{#snippet children({ item })}
+							<ToggleButton value="v5" label="Version 5" {item} />
+							<ToggleButton value="v3" label="Version 3" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 
 					<input
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
index dbdb0b9cc7..33444b0eaa 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
@@ -76,12 +76,12 @@
 	let drawerLoading = $state(true)
 	let showLoading = $state(false)
 	let subscribe_topics: MqttSubscribeTopic[] = $state([])
-	let v3_config: MqttV3Config | undefined = $state()
-	let v5_config: MqttV5Config | undefined = $state()
+	let v3_config: MqttV3Config | undefined = $state({})
+	let v5_config: MqttV5Config | undefined = $state({})
 	let client_version: MqttClientVersion | undefined = $state()
-	let client_id: string | undefined = $state(undefined)
-	let isValid: boolean | undefined = $state(undefined)
-	let initialConfig: Record<string, any> | undefined = undefined
+	let client_id: string | undefined = $state('')
+	let isValid: boolean = $state(false)
+	let initialConfig: Record<string, any> | undefined = {}
 	let deploymentLoading = $state(false)
 
 	const mqttConfig = $derived.by(getSaveCfg)
@@ -247,7 +247,8 @@
 	}
 
 	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid ?? false)
+		let args = [captureConfig, isValid] as const
+		onCaptureConfigChange?.(...args)
 	})
 
 	$effect(() => {
@@ -267,9 +268,9 @@
 				: 'New MQTT trigger'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
-				{@render actions()}
-			</svelte:fragment>
+			{#snippet actions()}
+				{@render actionsSnippet()}
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
@@ -281,13 +282,13 @@
 			{/if}
 		</svelte:fragment>
 		<svelte:fragment slot="action">
-			{@render actions()}
+			{@render actionsSnippet()}
 		</svelte:fragment>
 		{@render config()}
 	</Section>
 {/if}
 
-{#snippet actions()}
+{#snippet actionsSnippet()}
 	{#if !drawerLoading}
 		<TriggerEditorToolbar
 			{trigger}
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
index 07ea4a7d73..aa24034488 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
@@ -12,7 +12,7 @@
 	import { Loader2 } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
 	import NatsTriggersConfigSection from './NatsTriggersConfigSection.svelte'
-	import type { Snippet } from 'svelte'
+	import { untrack, type Snippet } from 'svelte'
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import { saveNatsTriggerFromCfg } from './utils'
 	import { handleConfigChange, type Trigger } from '../utils'
@@ -241,7 +241,8 @@
 	}
 
 	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
+		const args = [captureConfig, isValid] as const
+		untrack(() => onCaptureConfigChange?.(...args))
 	})
 
 	$effect(() => {
@@ -260,9 +261,9 @@
 				: 'New NATS trigger'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
-				{@render actions()}
-			</svelte:fragment>
+			{#snippet actions()}
+				{@render actionsSnippet()}
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
@@ -274,13 +275,13 @@
 			{/if}
 		</svelte:fragment>
 		<svelte:fragment slot="action">
-			{@render actions()}
+			{@render actionsSnippet()}
 		</svelte:fragment>
 		{@render config()}
 	</Section>
 {/if}
 
-{#snippet actions()}
+{#snippet actionsSnippet()}
 	{#if !drawerLoading}
 		<TriggerEditorToolbar
 			{trigger}
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
index d8ded46f40..b99dbabe0e 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
@@ -25,7 +25,7 @@
 	import { invalidRelations, savePostgresTriggerFromCfg } from './utils'
 	import CheckPostgresRequirement from './CheckPostgresRequirement.svelte'
 	import { base } from '$lib/base'
-	import type { Snippet } from 'svelte'
+	import { untrack, type Snippet } from 'svelte'
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import TestingBadge from '../testingBadge.svelte'
 	import { handleConfigChange, type Trigger } from '../utils'
@@ -395,7 +395,8 @@
 	}
 
 	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
+		const args = [captureConfig, isValid] as const
+		untrack(() => onCaptureConfigChange?.(...args))
 	})
 
 	$effect(() => {
@@ -434,7 +435,7 @@
 				: 'New Postgres trigger'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">{@render actions()}</svelte:fragment>
+			{#snippet actions()}{@render actionsSnippet()}{/snippet}
 			{@render content()}
 		</DrawerContent>
 	</Drawer>
@@ -446,13 +447,13 @@
 			{/if}
 		</svelte:fragment>
 		<svelte:fragment slot="action">
-			{@render actions()}
+			{@render actionsSnippet()}
 		</svelte:fragment>
 		{@render content()}
 	</Section>
 {/if}
 
-{#snippet actions()}
+{#snippet actionsSnippet()}
 	{#if !drawerLoading}
 		<TriggerEditorToolbar
 			{trigger}
@@ -526,7 +527,7 @@
 							allowEdit={!$userStore?.operator}
 						/>
 
-						{#if emptyStringTrimmed(script_path) && is_flow === false}
+						{#if emptyString(script_path) && is_flow === false}
 							<div class="flex">
 								<Button
 									disabled={!can_write}
@@ -599,7 +600,6 @@
 								--sms-open-z-index="100"
 								disabled={!can_write}
 							>
-								<!-- @migration-task: migrate this slot by hand, `remove-icon` is an invalid identifier -->
 								<svelte:fragment slot="remove-icon">
 									<div class="hover:text-primary p-0.5">
 										<X size={12} />
@@ -663,7 +663,7 @@
 										></div
 									></Tab
 								>
-								<svelte:fragment slot="content">
+								{#snippet content()}
 									<div class="mt-5 overflow-hidden bg-surface">
 										<TabContent value="basic">
 											<RelationPicker {can_write} bind:pg14 bind:relations disabled={!can_write} />
@@ -786,7 +786,7 @@
 											>
 										</TabContent>
 									</div>
-								</svelte:fragment>
+								{/snippet}
 							</Tabs>
 						</Label>
 					{/if}
diff --git a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
index 4ba863d399..428bfd68f0 100644
--- a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import Select from '$lib/components/apps/svelte-select/lib/Select.svelte'
 	import { Button } from '$lib/components/common'
-	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
+	import Select from '$lib/components/Select.svelte'
 	import type { Relations } from '$lib/gen'
 	import { PostgresTriggerService } from '$lib/gen/services.gen'
 	import { workspaceStore } from '$lib/stores'
@@ -95,32 +93,19 @@
 	}
 
 	listDatabasePublication()
-
-	let darkMode = false
+	$: publication_name && getAllRelations()
 </script>
 
-<DarkModeObserver bind:darkMode />
-
 <div class="flex gap-1">
 	<Select
 		loading={loadingPublication}
 		disabled={!can_write || disabled}
-		class="grow shrink max-w-full"
-		on:select={async (e) => {
-			publication_name = e.detail.value
-			await getAllRelations()
-		}}
-		on:clear={() => {
-			publication_name = ''
-		}}
-		value={publication_name}
-		{items}
+		class="grow shrink"
+		bind:value={publication_name}
+		items={items.map((value) => ({ value }))}
 		placeholder="Choose a publication"
-		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-		containerStyles={darkMode
-			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-		portal={false}
+		clearable
+		disablePortal
 	/>
 	<Button
 		disabled={!can_write || disabled}
diff --git a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
index 86468bbf1e..f92d5c37f9 100644
--- a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
@@ -11,32 +11,43 @@
 	import { emptyStringTrimmed, sendUserToast } from '$lib/utils'
 	import MultiSelect from 'svelte-multiselect'
 
-	export let relations: Relations[] | undefined = undefined
-	export let can_write: boolean = true
-	export let disabled: boolean = false
-	export let pg14: boolean = false
-
-	$: selected = relations && relations.length > 0 ? 'specific' : 'all'
-
-	let cached: Relations[] | undefined = relations
-
-	$: if (pg14 && relations) {
-		relations.forEach((relation) => {
-			if (relation.table_to_track.length === 0) {
-				relation.table_to_track.push({ table_name: '' })
-			} else {
-				relation.table_to_track.forEach((table_to_track) => {
-					if (table_to_track.columns_name) {
-						table_to_track.columns_name = undefined
-					}
-					if (!emptyStringTrimmed(table_to_track.where_clause)) {
-						table_to_track.where_clause = undefined
-					}
-				})
-			}
-		})
+	interface Props {
+		relations?: Relations[] | undefined
+		can_write?: boolean
+		disabled?: boolean
+		pg14?: boolean
 	}
 
+	let {
+		relations = $bindable(undefined),
+		can_write = true,
+		disabled = false,
+		pg14 = $bindable(false)
+	}: Props = $props()
+
+	let selected = $derived(relations && relations.length > 0 ? 'specific' : 'all')
+
+	let cached: Relations[] | undefined = $state(relations)
+
+	$effect(() => {
+		if (pg14 && relations) {
+			relations.forEach((relation) => {
+				if (relation.table_to_track.length === 0) {
+					relation.table_to_track.push({ table_name: '' })
+				} else {
+					relation.table_to_track.forEach((table_to_track) => {
+						if (table_to_track.columns_name) {
+							table_to_track.columns_name = undefined
+						}
+						if (!emptyStringTrimmed(table_to_track.where_clause)) {
+							table_to_track.where_clause = undefined
+						}
+					})
+				}
+			})
+		}
+	})
+
 	function addTable(name: string, index: number) {
 		if (relations) {
 			relations[index].table_to_track = relations[index].table_to_track.concat({
@@ -80,11 +91,12 @@
 					}
 				}}
 				bind:selected
-				let:item
 				{disabled}
 			>
-				<ToggleButton value="all" label="All Tables" {item} />
-				<ToggleButton value="specific" label="Specific Tables" {item} />
+				{#snippet children({ item })}
+					<ToggleButton value="all" label="All Tables" {item} />
+					<ToggleButton value="specific" label="Specific Tables" {item} />
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	</div>
@@ -95,7 +107,7 @@
 				<div class="flex w-full gap-3 items-center">
 					<div class="w-full flex flex-col gap-2 border py-2 px-4 rounded-md">
 						<Label label="Schema Name" required class="w-full">
-							<svelte:fragment slot="header">
+							{#snippet header()}
 								<Tooltip small>
 									<p>
 										Enter the name of the <strong>schema</strong> that contains the table(s) you
@@ -104,7 +116,7 @@
 										be tracked for the selected transactions (insert, update, delete).
 									</p>
 								</Tooltip>
-							</svelte:fragment>
+							{/snippet}
 
 							<input class="mt-1" type="text" bind:value={v.schema_name} {disabled} />
 						</Label>
@@ -114,9 +126,9 @@
 									class="relative rounded bg-surface-disabled p-2 flex w-full flex-col gap-4 group"
 								>
 									<Label label="Table Name" required>
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip small>Enter the name of the table you want to track.</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<input
 											type="text"
 											bind:value={table_to_track.table_name}
@@ -125,7 +137,7 @@
 										/>
 									</Label>
 									<Label label="Columns">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#selecting-specific-columns"
 												small
@@ -155,7 +167,7 @@
 													filter WHERE clause can use any column.
 												</p>
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<div class="mt-1">
 											<MultiSelect
 												options={table_to_track.columns_name ?? []}
@@ -203,6 +215,7 @@
 													})
 												}}
 											>
+												<!-- @migration-task: migrate this slot by hand, `remove-icon` is an invalid identifier -->
 												<svelte:fragment slot="remove-icon">
 													<div class="hover:text-primary p-0.5">
 														<X size={12} />
@@ -212,7 +225,7 @@
 										</div>
 									</Label>
 									<Label label="Where Clause">
-										<svelte:fragment slot="header">
+										{#snippet header()}
 											<Tooltip
 												documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#filtering-rows-with-where-condition"
 												small
@@ -244,7 +257,7 @@
 													filter WHERE clause can use any column.
 												</p>
 											</Tooltip>
-										</svelte:fragment>
+										{/snippet}
 										<input
 											disabled={pg14}
 											type="text"
@@ -284,7 +297,7 @@
 								}}
 								{disabled}
 							>
-								<svelte:fragment slot="trigger">
+								{#snippet trigger()}
 									<Button
 										wrapperClasses="w-full border border-dashed rounded-md"
 										color="light"
@@ -295,7 +308,7 @@
 									>
 										Add table
 									</Button>
-								</svelte:fragment>
+								{/snippet}
 							</AddPropertyFormV2>
 						</div>
 					</div>
@@ -343,7 +356,7 @@
 				}}
 				{disabled}
 			>
-				<svelte:fragment slot="trigger">
+				{#snippet trigger()}
 					<Button
 						variant="border"
 						color="light"
@@ -355,7 +368,7 @@
 					>
 						Add schema
 					</Button>
-				</svelte:fragment>
+				{/snippet}
 			</AddPropertyFormV2>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
index 963681485b..6d3c2557de 100644
--- a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import Select from '$lib/components/apps/svelte-select/lib/Select.svelte'
 	import { Button } from '$lib/components/common'
-	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
+	import Select from '$lib/components/Select.svelte'
 	import { PostgresTriggerService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
@@ -71,30 +69,18 @@
 	}
 
 	listDatabaseSlot()
-
-	let darkMode = false
 </script>
 
-<DarkModeObserver bind:darkMode />
-
 <div class="flex gap-1">
 	<Select
-		class="grow shrink max-w-full"
-		on:select={(e) => {
-			replication_slot_name = e.detail.value
-		}}
-		on:clear={() => {
-			replication_slot_name = ''
-		}}
 		loading={loadingSlot}
-		value={replication_slot_name}
-		{items}
+		class="grow shrink max-w-full"
+		bind:value={replication_slot_name}
+		onClear={() => (replication_slot_name = '')}
+		items={items.map((value) => ({ value }))}
 		placeholder="Choose a slot name"
-		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-		containerStyles={darkMode
-			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-		portal={false}
+		disablePortal
+		clearable
 		{disabled}
 	/>
 	<Button
diff --git a/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte b/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
index f34310ac42..fe53af4ad7 100644
--- a/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
@@ -1259,11 +1259,11 @@
 				: 'New schedule'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				<div class="flex flex-row gap-4 items-center">
 					{@render saveButton()}
 				</div>
-			</svelte:fragment>
+			{/snippet}
 			{@render content()}
 		</DrawerContent>
 	</Drawer>
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
index 55282e8762..21dfb1bbaa 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
@@ -17,34 +17,49 @@
 	import { workspaceStore } from '$lib/stores'
 	import TestingBadge from '../testingBadge.svelte'
 
-	export let can_write: boolean = false
-	export let headless: boolean = false
-	export let isValid: boolean = false
-	export let queue_url = ''
-	export let aws_resource_path = ''
-	export let aws_auth_resource_type: AwsAuthResourceType = 'credentials'
-	export let message_attributes: string[] = []
-	export let showTestingBadge: boolean = false
+	interface Props {
+		can_write?: boolean
+		headless?: boolean
+		isValid?: boolean
+		queue_url?: string
+		aws_resource_path?: string
+		aws_auth_resource_type?: AwsAuthResourceType
+		message_attributes?: string[]
+		showTestingBadge?: boolean
+	}
+
+	let {
+		can_write = false,
+		headless = false,
+		isValid = $bindable(false),
+		queue_url = $bindable(''),
+		aws_resource_path = $bindable(''),
+		aws_auth_resource_type = $bindable('credentials'),
+		message_attributes = $bindable([]),
+		showTestingBadge = false
+	}: Props = $props()
 
 	async function loadVariables() {
 		return await VariableService.listVariable({ workspace: $workspaceStore ?? '' })
 	}
-	let itemPicker: ItemPicker
-	let variableEditor: VariableEditor
-	let cached: string[] = []
+	let itemPicker: ItemPicker | undefined = $state()
+	let variableEditor: VariableEditor | undefined = $state()
+	let cached: string[] = $state([])
 	let all_attributes = message_attributes.includes('All')
-	let tab: 'specific' | 'all' = all_attributes ? 'all' : 'specific'
+	let tab: 'specific' | 'all' = $state(all_attributes ? 'all' : 'specific')
 
-	$: isValid = !emptyStringTrimmed(aws_resource_path) && !emptyStringTrimmed(queue_url)
+	$effect(() => {
+		isValid = !emptyStringTrimmed(aws_resource_path) && !emptyStringTrimmed(queue_url)
+	})
 </script>
 
 <div>
 	<Section label="SQS" {headless}>
-		<svelte:fragment slot="badge">
+		{#snippet badge()}
 			{#if showTestingBadge}
 				<TestingBadge />
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 		<div class="flex flex-col w-full gap-4">
 			<Subsection label="Connection setup">
 				<div class="flex flex-col gap-3">
@@ -58,10 +73,11 @@
 							on:selected={() => {
 								aws_resource_path = ''
 							}}
-							let:item
 						>
-							<ToggleButton label="Credentials" value="credentials" {item} />
-							<ToggleButton label="Oidc" value="oidc" {item} />
+							{#snippet children({ item })}
+								<ToggleButton label="Credentials" value="credentials" {item} />
+								<ToggleButton label="Oidc" value="oidc" {item} />
+							{/snippet}
 						</ToggleButtonGroup>
 
 						{#if aws_auth_resource_type === 'credentials'}
@@ -116,10 +132,11 @@
 							}
 							tab = detail
 						}}
-						let:item
 					>
-						<ToggleButton value="all" label="All attributes" {item} />
-						<ToggleButton value="specific" label="Specific attributes" {item} />
+						{#snippet children({ item })}
+							<ToggleButton value="all" label="All attributes" {item} />
+							<ToggleButton value="specific" label="Specific attributes" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 				<div class="flex flex-col mt-3 gap-1">
@@ -137,6 +154,7 @@
 						--sms-options-margin="4px"
 						disabled={tab === 'all'}
 					>
+						<!-- @migration-task: migrate this slot by hand, `remove-icon` is an invalid identifier -->
 						<svelte:fragment slot="remove-icon">
 							<div class="hover:text-primary p-0.5">
 								<X size={12} />
@@ -159,21 +177,23 @@
 	itemName="Variable"
 	extraField="path"
 	loadItems={loadVariables}
-	buttons={{ 'Edit/View': (x) => variableEditor.editVariable(x) }}
+	buttons={{ 'Edit/View': (x) => variableEditor?.editVariable(x) }}
 >
-	<div slot="submission" class="flex flex-row">
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			startIcon={{ icon: Plus }}
-			on:click={() => {
-				variableEditor.initNew()
-			}}
-		>
-			New variable
-		</Button>
-	</div>
+	{#snippet submission()}
+		<div class="flex flex-row">
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				startIcon={{ icon: Plus }}
+				on:click={() => {
+					variableEditor?.initNew()
+				}}
+			>
+				New variable
+			</Button>
+		</div>
+	{/snippet}
 </ItemPicker>
 
 <VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
index a2bea09901..155e44dede 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
@@ -12,7 +12,7 @@
 	import Section from '$lib/components/Section.svelte'
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import Required from '$lib/components/Required.svelte'
-	import type { Snippet } from 'svelte'
+	import { untrack, type Snippet } from 'svelte'
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import { saveSqsTriggerFromCfg } from './utils'
 	import { handleConfigChange, type Trigger } from '../utils'
@@ -230,7 +230,8 @@
 	}
 
 	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
+		const args = [captureConfig, isValid] as const
+		untrack(() => onCaptureConfigChange?.(...args))
 	})
 
 	$effect(() => {
@@ -250,9 +251,9 @@
 				: 'New SQS trigger'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
-				{@render actions()}
-			</svelte:fragment>
+			{#snippet actions()}
+				{@render actionsSnippet()}
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
@@ -264,13 +265,13 @@
 			{/if}
 		</svelte:fragment>
 		<svelte:fragment slot="action">
-			{@render actions()}
+			{@render actionsSnippet()}
 		</svelte:fragment>
 		{@render config()}
 	</Section>
 {/if}
 
-{#snippet actions()}
+{#snippet actionsSnippet()}
 	{#if !drawerLoading}
 		<TriggerEditorToolbar
 			{trigger}
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
index 1ee21df607..fa700addcc 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import Label from '../../Label.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
@@ -22,13 +24,25 @@
 	import UserSettings from '../../UserSettings.svelte'
 	import { generateRandomString } from '$lib/utils'
 
-	export let isFlow: boolean = false
-	export let path: string = ''
-	export let hash: string | undefined = undefined
-	export let token: string = ''
-	export let runnableArgs: any
-	export let triggerTokens: TriggerTokens | undefined = undefined
-	export let scopes: string[] = []
+	interface Props {
+		isFlow?: boolean
+		path?: string
+		hash?: string | undefined
+		token?: string
+		runnableArgs: any
+		triggerTokens?: TriggerTokens | undefined
+		scopes?: string[]
+	}
+
+	let {
+		isFlow = false,
+		path = '',
+		hash = undefined,
+		token = $bindable(''),
+		runnableArgs,
+		triggerTokens = $bindable(undefined),
+		scopes = []
+	}: Props = $props()
 
 	let webhooks: {
 		async: {
@@ -40,12 +54,10 @@
 			path: string
 			get_path?: string
 		}
-	}
-	let selectedTab: string = 'rest'
-	let userSettings: UserSettings
-	let url: string = ''
-
-	$: webhooks = isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path)
+	} = $derived(isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path))
+	let selectedTab: string = $state('rest')
+	let userSettings: UserSettings | undefined = $state()
+	let url: string = $state('')
 
 	function computeScriptWebhooks(hash: string | undefined, path: string) {
 		let webhookBase = `${location.origin}${base}/api/w/${$workspaceStore}/jobs`
@@ -78,13 +90,9 @@
 		}
 	}
 
-	let webhookType: 'async' | 'sync' = DEFAULT_WEBHOOK_TYPE
-	let requestType: 'hash' | 'path' | 'get_path' = isFlow ? 'path' : 'path'
-	let tokenType: 'query' | 'headers' = 'headers'
-
-	$: if (webhookType === 'async' && requestType === 'get_path') {
-		requestType = hash ? 'hash' : 'path'
-	}
+	let webhookType: 'async' | 'sync' = $state(DEFAULT_WEBHOOK_TYPE)
+	let requestType: 'hash' | 'path' | 'get_path' = $state(isFlow ? 'path' : 'path')
+	let tokenType: 'query' | 'headers' = $state('headers')
 
 	function headers() {
 		const headers = {}
@@ -98,11 +106,6 @@
 		return headers
 	}
 
-	$: cleanedRunnableArgs =
-		isObject(runnableArgs) && 'wm_trigger' in runnableArgs
-			? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
-			: runnableArgs
-
 	function fetchCode() {
 		if (webhookType === 'sync') {
 			return `
@@ -220,19 +223,31 @@ done`
 }`
 	}
 
-	$: url =
-		webhooks[webhookType][requestType] +
-		(tokenType === 'query'
-			? `?token=${token}${
-					requestType === 'get_path'
-						? `&payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
-						: ''
-				}`
-			: `${
-					requestType === 'get_path'
-						? `?payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
-						: ''
-				}`)
+	run(() => {
+		if (webhookType === 'async' && requestType === 'get_path') {
+			requestType = hash ? 'hash' : 'path'
+		}
+	})
+	let cleanedRunnableArgs = $derived(
+		isObject(runnableArgs) && 'wm_trigger' in runnableArgs
+			? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
+			: runnableArgs
+	)
+	run(() => {
+		url =
+			webhooks[webhookType][requestType] +
+			(tokenType === 'query'
+				? `?token=${token}${
+						requestType === 'get_path'
+							? `&payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
+							: ''
+					}`
+				: `${
+						requestType === 'get_path'
+							? `?payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
+							: ''
+					}`)
+	})
 </script>
 
 <UserSettings
@@ -255,7 +270,12 @@ done`
 					placeholder="paste your token here once created to alter examples below"
 					class="!text-xs !font-normal"
 				/>
-				<Button size="xs" color="light" variant="border" on:click={() => userSettings.openDrawer()}>
+				<Button
+					size="xs"
+					color="light"
+					variant="border"
+					on:click={() => userSettings?.openDrawer()}
+				>
 					Create a Webhook-specific Token
 					<Tooltip light>
 						The token will have a scope such that it can only be used to trigger this script. It is
@@ -269,65 +289,71 @@ done`
 	<div class="flex flex-col gap-2">
 		<div class="flex flex-row justify-between">
 			<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType} let:item>
-				<ToggleButton
-					label="Async"
-					value="async"
-					tooltip="The returning value is the uuid of the job assigned to execute the job."
-					{item}
-				/>
-				<ToggleButton
-					label="Sync"
-					value="sync"
-					tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-					{item}
-				/>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType}>
+				{#snippet children({ item })}
+					<ToggleButton
+						label="Async"
+						value="async"
+						tooltip="The returning value is the uuid of the job assigned to execute the job."
+						{item}
+					/>
+					<ToggleButton
+						label="Sync"
+						value="sync"
+						tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 		<div class="flex flex-row justify-between">
 			<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} let:item>
-				<ToggleButton
-					label="POST by path"
-					value="path"
-					icon={ArrowUpRight}
-					{item}
-					selectedColor="#fb923c"
-				/>
-				{#if !isFlow}
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+				{#snippet children({ item })}
 					<ToggleButton
-						label="POST by hash"
-						value="hash"
+						label="POST by path"
+						value="path"
 						icon={ArrowUpRight}
-						selectedColor="#fb923c"
-						disabled={!hash}
 						{item}
+						selectedColor="#fb923c"
 					/>
-				{/if}
+					{#if !isFlow}
+						<ToggleButton
+							label="POST by hash"
+							value="hash"
+							icon={ArrowUpRight}
+							selectedColor="#fb923c"
+							disabled={!hash}
+							{item}
+						/>
+					{/if}
 
-				<ToggleButton
-					label="GET by path"
-					value="get_path"
-					icon={ArrowDownRight}
-					disabled={webhookType !== 'sync'}
-					{item}
-					selectedColor="#14b8a6"
-				/>
+					<ToggleButton
+						label="GET by path"
+						value="get_path"
+						icon={ArrowDownRight}
+						disabled={webhookType !== 'sync'}
+						{item}
+						selectedColor="#14b8a6"
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 		<div class="flex flex-row justify-between">
 			<div class="text-sm font-normal text-secondary flex flex-row items-center"
 				>Token configuration</div
 			>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType} let:item>
-				<ToggleButton label="Token in Headers" value="headers" {item} />
-				<ToggleButton label="Token in Query" value="query" {item} />
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
+				{#snippet children({ item })}
+					<ToggleButton label="Token in Headers" value="headers" {item} />
+					<ToggleButton label="Token in Query" value="query" {item} />
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	</div>
 
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div>
 		<Tabs bind:selected={selectedTab}>
 			<Tab value="rest" size="xs">REST</Tab>
@@ -336,7 +362,7 @@ done`
 			{/if}
 			<Tab value="fetch" size="xs">Fetch</Tab>
 
-			<svelte:fragment slot="content">
+			{#snippet content()}
 				{#key token}
 					<TabContent value="rest" class="flex flex-col flex-1 h-full ">
 						<div class="flex flex-col gap-2">
@@ -366,7 +392,7 @@ done`
 										{#key tokenType}
 											<div
 												class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-												on:click={(e) => {
+												onclick={(e) => {
 													e.preventDefault()
 													copyToClipboard(curlCode())
 												}}
@@ -388,7 +414,7 @@ done`
 										{#key token}
 											<div
 												class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-												on:click={(e) => {
+												onclick={(e) => {
 													e.preventDefault()
 													copyToClipboard(fetchCode())
 												}}
@@ -400,7 +426,7 @@ done`
 						{/key}
 					</TabContent>
 				{/key}
-			</svelte:fragment>
+			{/snippet}
 		</Tabs>
 	</div>
 	<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="webhook" />
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
index a229b57215..7c24797ef7 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
@@ -12,17 +12,29 @@
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
 	import TestingBadge from '$lib/components/triggers/testingBadge.svelte'
 
-	export let url: string | undefined
-	export let url_runnable_args: Record<string, unknown> | undefined
-	export let dirtyUrl: boolean = false
-	export let can_write: boolean = false
-	export let headless: boolean = false
-	export let isValid: boolean = false
-	export let showTestingBadge: boolean = false
+	interface Props {
+		url: string | undefined
+		url_runnable_args: Record<string, unknown> | undefined
+		dirtyUrl?: boolean
+		can_write?: boolean
+		headless?: boolean
+		isValid?: boolean
+		showTestingBadge?: boolean
+	}
 
-	let areRunnableArgsValid: boolean = true
+	let {
+		url = $bindable(),
+		url_runnable_args = $bindable(),
+		dirtyUrl = $bindable(false),
+		can_write = false,
+		headless = false,
+		isValid = $bindable(false),
+		showTestingBadge = false
+	}: Props = $props()
 
-	let urlRunnableSchema: Schema | undefined = undefined
+	let areRunnableArgsValid: boolean = $state(true)
+
+	let urlRunnableSchema: Schema | undefined = $state(undefined)
 	async function loadUrlRunnableSchema(url: string | undefined) {
 		if (url?.startsWith('$')) {
 			const path = url.split(':')[1]
@@ -49,9 +61,11 @@
 			}
 		}
 	}
-	$: loadUrlRunnableSchema(url)
+	$effect(() => {
+		loadUrlRunnableSchema(url)
+	})
 
-	let urlError: string = ''
+	let urlError: string = $state('')
 	let validateTimeout: NodeJS.Timeout | undefined = undefined
 	function validateUrl(url: string | undefined) {
 		if (validateTimeout) {
@@ -72,18 +86,22 @@
 			validateTimeout = undefined
 		}, 500)
 	}
-	$: validateUrl(url)
+	$effect(() => {
+		validateUrl(url)
+	})
 
-	$: isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid)
+	$effect(() => {
+		isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid)
+	})
 </script>
 
 <div>
 	<Section label="WebSocket" {headless}>
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if showTestingBadge}
 				<TestingBadge />
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 		<div class="mb-2">
 			<ToggleButtonGroup
 				selected={url?.startsWith('$') ? 'runnable' : 'static'}
@@ -92,11 +110,11 @@
 					url_runnable_args = {}
 				}}
 				disabled={!can_write}
-				let:item
-				let:disabled
 			>
-				<ToggleButton value="static" label="Static URL" {item} {disabled} />
-				<ToggleButton value="runnable" label="Runnable result as URL" {item} {disabled} />
+				{#snippet children({ item, disabled })}
+					<ToggleButton value="static" label="Static URL" {item} {disabled} />
+					<ToggleButton value="runnable" label="Runnable result as URL" {item} {disabled} />
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 		{#if url?.startsWith('$')}
@@ -137,7 +155,7 @@
 								bind:args={url_runnable_args}
 								bind:isValid={areRunnableArgsValid}
 								shouldHideNoInputs
-								class="text-xs"
+								className="text-xs"
 								disabled={!can_write}
 							/>
 						{/key}
@@ -164,7 +182,7 @@
 							autocomplete="off"
 							bind:value={url}
 							disabled={!can_write}
-							on:input={() => {
+							oninput={() => {
 								dirtyUrl = true
 							}}
 							placeholder="ws://example.com"
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
index 7f5120e71a..157c1843a5 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
@@ -24,7 +24,7 @@
 	import JsonEditor from '$lib/components/JsonEditor.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
-	import type { Snippet } from 'svelte'
+	import { untrack, type Snippet } from 'svelte'
 
 	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
 	import { saveWebsocketTriggerFromCfg } from './utils'
@@ -256,7 +256,8 @@
 			.filter((v): v is { path: string; is_flow: boolean; args: ScriptArgs } => !!v)
 	)
 	$effect(() => {
-		loadInitialMessageRunnableSchemas(initialMessageRunnables)
+		;[initialMessageRunnables]
+		untrack(() => loadInitialMessageRunnableSchemas(initialMessageRunnables))
 	})
 
 	async function updateTrigger(): Promise<void> {
@@ -297,7 +298,8 @@
 	}
 
 	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
+		const args = [captureConfig, isValid] as const
+		untrack(() => onCaptureConfigChange?.(...args))
 	})
 
 	$effect(() => {
@@ -317,9 +319,9 @@
 				: 'New WebSocket trigger'}
 			on:close={drawer.closeDrawer}
 		>
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				{@render actionsButtons()}
-			</svelte:fragment>
+			{/snippet}
 			{@render config()}
 		</DrawerContent>
 	</Drawer>
@@ -540,7 +542,7 @@
 														{schema}
 														bind:args={v.runnable_result.args}
 														shouldHideNoInputs
-														class="text-xs"
+														className="text-xs"
 														disabled={!can_write}
 													/>
 												{/await}
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
index 68937f187d..9d3a1476b3 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
@@ -21,7 +21,7 @@
 	on:error
 	on:skipAll
 	getSteps={(driver, options) => {
-		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
+		const index = options?.indexToInsertAt ?? flowStore.val.value.modules.length
 
 		const steps = [
 			{
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
index adc08ddd5a..229ad5900d 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
@@ -23,8 +23,8 @@
 	on:error
 	on:skipAll
 	getSteps={(driver, options) => {
-		const id = nextId($flowStateStore, $flowStore)
-		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
+		const id = nextId($flowStateStore, flowStore.val)
+		const index = options?.indexToInsertAt ?? flowStore.val.value.modules.length
 
 		const steps = [
 			{
@@ -77,7 +77,7 @@
 					onNextClick: () => {
 						clickButtonBySelector('#flow-editor-edit-predicate')
 
-						updateFlowModuleById($flowStore, id, (module) => {
+						updateFlowModuleById(flowStore.val, id, (module) => {
 							if (module.value.type === 'branchone') {
 								module.value.branches[0].expr = "result.a === 'foo'"
 							}
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
index 30db93053e..8bb17125f0 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
@@ -27,7 +27,7 @@
 				title: 'Error handler tutorial',
 				description: 'Learn how to recover from an error. You can use arrow keys to navigate.',
 				onNextClick: () => {
-					$flowStore.value.modules = [
+					flowStore.val.value.modules = [
 						{
 							id: 'a',
 							value: {
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
index 8e99b5d3d1..d0c9ba51d6 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
@@ -26,8 +26,8 @@
 	on:error
 	on:skipAll
 	getSteps={(driver, options) => {
-		const id = nextId($flowStateStore, $flowStore)
-		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
+		const id = nextId($flowStateStore, flowStore.val)
+		const index = options?.indexToInsertAt ?? flowStore.val.value.modules.length
 
 		let tempId = ''
 
@@ -84,7 +84,7 @@
 					description:
 						'The iterator expression is a JavaScript expression that respresents the array to iterate on. Here we will iterate on the firstname input letter by letter',
 					onNextClick: () => {
-						updateFlowModuleById($flowStore, id, (module) => {
+						updateFlowModuleById(flowStore.val, id, (module) => {
 							if (module.value.type === 'forloopflow') {
 								if (module.value.iterator.type === 'javascript') {
 									module.value.iterator.expr = '[1,2,3]'
@@ -108,8 +108,8 @@
 					description:
 						'We can refer to the result of previous steps using the results object: results.a or use static values like [1,2,3] in this case.',
 					onNextClick: () => {
-						updateFlowModuleById($flowStore, id, (module) => {
-							const newId = nextId($flowStateStore, $flowStore)
+						updateFlowModuleById(flowStore.val, id, (module) => {
+							const newId = nextId($flowStateStore, flowStore.val)
 							tempId = newId
 
 							if (module.value.type === 'forloopflow') {
@@ -159,7 +159,6 @@
 					description: 'We added an action to the loop. Let’s configure it',
 					onNextClick: () => {
 						$selectedId = tempId
-						$flowStore = $flowStore
 
 						dispatch('reload')
 						setTimeout(() => {
@@ -204,7 +203,7 @@
 					title: 'Connect',
 					description: 'As we did before, we can connect to the iterator of the loop',
 					onNextClick: () => {
-						updateFlowModuleById($flowStore, id, (module) => {
+						updateFlowModuleById(flowStore.val, id, (module) => {
 							if (
 								module.value.type === 'forloopflow' &&
 								module.value.modules[0].value.type === 'rawscript'
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
index cc1bf443ac..dbf6870c8e 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
@@ -10,6 +10,7 @@
 		waitForElementLoading
 	} from './utils'
 	import Tutorial from './Tutorial.svelte'
+	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
 
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
@@ -25,7 +26,7 @@
 	bind:this={tutorial}
 	index={0}
 	name="action"
-	tainted={isFlowTainted($flowStore)}
+	tainted={isFlowTainted(flowStore.val)}
 	on:error
 	on:skipAll
 	getSteps={(driver) => [
@@ -182,8 +183,8 @@
 				title: 'Connection mode',
 				description: 'Once you pressed the connect button, you can choose what to connect to.',
 				onNextClick: () => {
-					if ($flowStore.value.modules[0].value.type === 'rawscript') {
-						$flowStore.value.modules[0].value.input_transforms = {
+					if (flowStore.val.value.modules[0].value.type === 'rawscript') {
+						flowStore.val.value.modules[0].value.input_transforms = {
 							x: {
 								type: 'javascript',
 								expr: 'flow_input.firstname'
@@ -191,7 +192,7 @@
 						}
 					}
 
-					$flowStore = $flowStore
+					refreshStateStore(flowStore)
 					dispatch('reload')
 
 					setTimeout(() => {
diff --git a/frontend/src/lib/components/tutorials/utils.ts b/frontend/src/lib/components/tutorials/utils.ts
index 89a49c5fdd..b0eed886b1 100644
--- a/frontend/src/lib/components/tutorials/utils.ts
+++ b/frontend/src/lib/components/tutorials/utils.ts
@@ -80,7 +80,6 @@ const emptyApp = {
 						style: ''
 					}
 				},
-				actions: [],
 				numberOfSubgrids: 1,
 				id: 'a'
 			},
@@ -163,7 +162,6 @@ const emptyApp = {
 							style: ''
 						}
 					},
-					actions: [],
 					horizontalAlignment: 'left',
 					verticalAlignment: 'center',
 					id: 'b'
@@ -190,7 +188,6 @@ const emptyApp = {
 				data: {
 					type: 'recomputeallcomponent',
 					configuration: {},
-					actions: [],
 					menuItems: [],
 					horizontalAlignment: 'right',
 					verticalAlignment: 'center',
diff --git a/frontend/src/lib/components/wizards/AppPicker.svelte b/frontend/src/lib/components/wizards/AppPicker.svelte
index 2d08435b81..6dd15edf18 100644
--- a/frontend/src/lib/components/wizards/AppPicker.svelte
+++ b/frontend/src/lib/components/wizards/AppPicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte'
-	import Select from '../apps/svelte-select/lib/Select.svelte'
+	import SelectLegacy from '../apps/svelte-select/lib/SelectLegacy.svelte'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
 	import DarkModeObserver from '../DarkModeObserver.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
@@ -44,7 +44,7 @@
 <DarkModeObserver bind:darkMode />
 
 <div class="flex flex-col gap-2 w-full">
-	<Select
+	<SelectLegacy
 		class="grow shrink max-w-full"
 		on:change={(e) => {
 			value = e.detail.value
diff --git a/frontend/src/lib/components/workspaceSettings/AISettings.svelte b/frontend/src/lib/components/workspaceSettings/AISettings.svelte
index d4ed2d7dd8..0d9ad0bef8 100644
--- a/frontend/src/lib/components/workspaceSettings/AISettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/AISettings.svelte
@@ -2,7 +2,7 @@
 	import { WorkspaceService, type AIConfig, type AIProvider } from '$lib/gen'
 	import { setCopilotInfo, workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
-	import { AI_DEFAULT_MODELS } from '../copilot/lib'
+	import { AI_DEFAULT_MODELS, fetchAvailableModels } from '../copilot/lib'
 	import TestAiKey from '../copilot/TestAIKey.svelte'
 	import Description from '../Description.svelte'
 	import Label from '../Label.svelte'
@@ -37,7 +37,14 @@
 		usingOpenaiClientCredentialsOauth: boolean
 	} = $props()
 
-	let availableAIModels = $derived(Object.values(aiProviders).flatMap((p) => p.models))
+	let fetchedAiModels = $state(false)
+	let availableAiModels = $state(
+		Object.fromEntries(
+			aiProviderLabels.map(([provider]) => [provider, AI_DEFAULT_MODELS[provider]])
+		) as Record<AIProvider, string[]>
+	)
+
+	let selectedAiModels = $derived(Object.values(aiProviders).flatMap((p) => p.models))
 	let modelProviderMap = $derived(
 		Object.fromEntries(
 			Object.entries(aiProviders).flatMap(([provider, config]) =>
@@ -52,27 +59,48 @@
 		}
 	})
 
+	$effect(() => {
+		;(async () => {
+			if (fetchedAiModels) {
+				return
+			}
+			for (const provider of Object.keys(aiProviders)) {
+				try {
+					const models = await fetchAvailableModels(
+						aiProviders[provider].resource_path,
+						$workspaceStore!,
+						provider as AIProvider
+					)
+					availableAiModels[provider] = models
+				} catch (e) {
+					console.error('failed to fetch models for provider', provider, e)
+					availableAiModels[provider] = AI_DEFAULT_MODELS[provider]
+				}
+			}
+			fetchedAiModels = true
+		})()
+	})
+
 	async function editCopilotConfig(): Promise<void> {
 		if (Object.keys(aiProviders ?? {}).length > 0) {
-			const code_completion_model = codeCompletionModel
-				? { model: codeCompletionModel, provider: modelProviderMap[codeCompletionModel] }
-				: undefined
-			const default_model = defaultModel
-				? { model: defaultModel, provider: modelProviderMap[defaultModel] }
-				: undefined
-			await WorkspaceService.editCopilotConfig({
-				workspace: $workspaceStore!,
-				requestBody: {
-					providers: aiProviders,
-					code_completion_model,
-					default_model
-				}
-			})
-			setCopilotInfo({
+			const code_completion_model =
+				codeCompletionModel && modelProviderMap[codeCompletionModel]
+					? { model: codeCompletionModel, provider: modelProviderMap[codeCompletionModel] }
+					: undefined
+			const default_model =
+				defaultModel && modelProviderMap[defaultModel]
+					? { model: defaultModel, provider: modelProviderMap[defaultModel] }
+					: undefined
+			const config: AIConfig = {
 				providers: aiProviders,
 				code_completion_model,
 				default_model
+			}
+			await WorkspaceService.editCopilotConfig({
+				workspace: $workspaceStore!,
+				requestBody: config
 			})
+			setCopilotInfo(config)
 		} else {
 			await WorkspaceService.editCopilotConfig({
 				workspace: $workspaceStore!,
@@ -111,12 +139,12 @@
 									[provider]: {
 										resource_path: '',
 										models:
-											AI_DEFAULT_MODELS[provider].length > 0 ? [AI_DEFAULT_MODELS[provider][0]] : []
+											availableAiModels[provider].length > 0 ? [availableAiModels[provider][0]] : []
 									}
 								}
 
-								if (AI_DEFAULT_MODELS[provider].length > 0 && !defaultModel) {
-									defaultModel = AI_DEFAULT_MODELS[provider][0]
+								if (availableAiModels[provider].length > 0 && !defaultModel) {
+									defaultModel = availableAiModels[provider][0]
 								}
 							} else {
 								aiProviders = Object.fromEntries(
@@ -144,26 +172,38 @@
 					{#if aiProviders[provider]}
 						<div class="mb-4 flex flex-col gap-2">
 							<div class="flex flex-row gap-1">
-								{#key aiProviders[provider].resource_path}
-									<!-- this can be removed once the parent component moves to runes -->
-									<!-- svelte-ignore binding_property_non_reactive -->
-									<ResourcePicker
-										resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
-											? 'openai_client_credentials_oauth'
-											: provider}
-										initialValue={aiProviders[provider].resource_path}
-										bind:value={aiProviders[provider].resource_path}
-										on:change={() => {
-											if (
-												aiProviders[provider]?.resource_path &&
-												aiProviders[provider]?.models.length === 0 &&
-												AI_DEFAULT_MODELS[provider].length > 0
-											) {
-												aiProviders[provider].models = AI_DEFAULT_MODELS[provider].slice(0, 1)
+								<!-- this can be removed once the parent component moves to runes -->
+								<!-- svelte-ignore binding_property_non_reactive -->
+								<ResourcePicker
+									resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
+										? 'openai_client_credentials_oauth'
+										: provider}
+									initialValue={aiProviders[provider].resource_path}
+									bind:value={aiProviders[provider].resource_path}
+									on:change={async () => {
+										if (aiProviders[provider].resource_path) {
+											try {
+												const models = await fetchAvailableModels(
+													aiProviders[provider].resource_path,
+													$workspaceStore!,
+													provider as AIProvider
+												)
+												availableAiModels[provider] = models
+											} catch (e) {
+												console.error('failed to fetch models for provider', provider, e)
+												availableAiModels[provider] = AI_DEFAULT_MODELS[provider]
 											}
-										}}
-									/>
-								{/key}
+										}
+
+										if (
+											aiProviders[provider]?.resource_path &&
+											aiProviders[provider]?.models.length === 0 &&
+											availableAiModels[provider].length > 0
+										) {
+											aiProviders[provider].models = availableAiModels[provider].slice(0, 1)
+										}
+									}}
+								/>
 								<TestAiKey
 									aiProvider={provider}
 									resourcePath={aiProviders[provider].resource_path}
@@ -175,12 +215,15 @@
 								<!-- this can be removed once the parent component moves to runes -->
 								<!-- svelte-ignore binding_property_non_reactive -->
 								<MultiSelectWrapper
-									items={AI_DEFAULT_MODELS[provider]}
+									items={availableAiModels[provider]}
 									bind:value={aiProviders[provider].models}
 									placeholder="Select models"
 									allowUserOptions="append"
 								/>
 							</Label>
+							<p class="text-xs">
+								If you don't see the model you want, you can type it manually in the selector.
+							</p>
 						</div>
 					{/if}
 				</div>
@@ -195,14 +238,13 @@
 				<Label label="Default chat model">
 					{#key Object.keys(aiProviders).length}
 						<ArgEnum
-							enum_={availableAIModels}
+							enum_={selectedAiModels}
 							bind:value={defaultModel}
 							disabled={false}
 							autofocus={false}
 							defaultValue={undefined}
 							valid={true}
 							create={false}
-							required={false}
 						/>
 					{/key}
 				</Label>
@@ -225,16 +267,15 @@
 					{#if codeCompletionModel != undefined}
 						<Label label="Code completion model">
 							<ArgEnum
-								enum_={availableAIModels}
+								enum_={selectedAiModels}
 								bind:value={codeCompletionModel}
 								disabled={false}
 								autofocus={false}
 								defaultValue={undefined}
 								valid={true}
 								create={false}
-								required={false}
 							/>
-							<p class="text-xs">
+							<p class="text-xs mt-2">
 								We highly recommend using Mistral's Codestral model for code completion.
 							</p>
 						</Label>
diff --git a/frontend/src/lib/logout.ts b/frontend/src/lib/logout.ts
index bdac6bf69b..06f468c5ec 100644
--- a/frontend/src/lib/logout.ts
+++ b/frontend/src/lib/logout.ts
@@ -4,13 +4,17 @@ import { clearStores } from './storeUtils'
 import { sendUserToast } from './toast'
 
 export async function logoutWithRedirect(rd?: string): Promise<void> {
+	console.log('logoutWithRedirect', rd)
 	await clearUser()
-	if (rd && rd != '/' && rd?.split('?')[0] != '/user/login') {
+	const splitted = rd?.split('?')[0]
+	if (rd && rd != '/' && splitted != '/user/login' && splitted != '/user/logout') {
 		const error = document.cookie.includes('token')
 			? `error=${encodeURIComponent('You have been logged out because your session has expired.')}&`
 			: ''
+		console.log('login redirect with error', error, rd)
 		goto(`/user/login?${error}${rd ? 'rd=' + encodeURIComponent(rd) : ''}`, { replaceState: true })
 	} else {
+		console.log('login redirect vanilla')
 		goto('/user/login', { replaceState: true })
 	}
 }
diff --git a/frontend/src/lib/refreshUser.ts b/frontend/src/lib/refreshUser.ts
index 1023f65ab7..17b762c880 100644
--- a/frontend/src/lib/refreshUser.ts
+++ b/frontend/src/lib/refreshUser.ts
@@ -1,7 +1,6 @@
 import { get } from 'svelte/store'
 import { UserService } from '$lib/gen'
 import { superadmin, devopsRole } from './stores.js'
-import { goto } from '$lib/navigation'
 
 export async function refreshSuperadmin(): Promise<void> {
 	if (get(superadmin) == undefined) {
@@ -14,7 +13,7 @@ export async function refreshSuperadmin(): Promise<void> {
 			}
 		} catch {
 			superadmin.set(false)
-			goto('/user/logout')
+			// goto('/user/logout')
 		}
 	}
 
@@ -28,7 +27,7 @@ export async function refreshSuperadmin(): Promise<void> {
 			}
 		} catch {
 			devopsRole.set(false)
-			goto('/user/logout')
+			// goto('/user/logout')
 		}
 	}
 }
diff --git a/frontend/src/lib/svelte5Utils.svelte.ts b/frontend/src/lib/svelte5Utils.svelte.ts
index 465eefb2e3..8435512789 100644
--- a/frontend/src/lib/svelte5Utils.svelte.ts
+++ b/frontend/src/lib/svelte5Utils.svelte.ts
@@ -1,5 +1,7 @@
 // https://github.com/sveltejs/svelte/issues/14600
 
+import type { StateStore } from './utils'
+
 export function withProps<Component, Props>(component: Component, props: Props) {
 	const ret = $state({
 		component,
@@ -7,3 +9,54 @@ export function withProps<Component, Props>(component: Component, props: Props)
 	})
 	return ret
 }
+
+export function stateSnapshot<T>(state: T) {
+	return $state.snapshot(state)
+}
+export function refreshStateStore<T>(store: StateStore<T>): void {
+	store.val = $state.snapshot(store.val) as any
+}
+
+export type UsePromiseResult<T> = (
+	| { status: 'loading'; value?: undefined; error?: undefined }
+	| { status: 'error'; error: any; value?: undefined }
+	| { status: 'ok'; value: T; error?: undefined }
+) & {
+	refresh: () => void
+}
+
+export type UsePromiseOptions = {
+	loadInit?: boolean
+}
+
+export function usePromise<T>(
+	createPromise: () => Promise<T>,
+	{ loadInit = true }: UsePromiseOptions = {}
+): UsePromiseResult<T> {
+	const ret: any = $state({
+		status: 'loading',
+		__promise: undefined,
+		refresh: () => {
+			let promise = createPromise()
+			ret.__promise = promise
+			ret.status = 'loading'
+			ret.value = undefined
+			ret.error = undefined
+
+			promise
+				.then((value) => {
+					if (ret.__promise !== promise) return
+					ret.value = value
+					ret.status = 'ok'
+				})
+				.catch((error) => {
+					if (ret.__promise !== promise) return
+					ret.error = error
+					ret.status = 'error'
+				})
+		}
+	})
+	if (loadInit) ret.refresh()
+
+	return ret
+}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 6c2bde6431..f16133547b 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -11,21 +11,91 @@ import { deepEqual } from 'fast-equals'
 import YAML from 'yaml'
 import { type UserExt } from './stores'
 import { sendUserToast } from './toast'
-import type { Job, Script } from './gen'
+import type { Job, Script, ScriptLang } from './gen'
 import type { EnumType, SchemaProperty } from './common'
 import type { Schema } from './common'
 export { sendUserToast }
 import type { AnyMeltElement } from '@melt-ui/svelte'
 import type { RunsSelectionMode } from './components/runs/RunsBatchActionsDropdown.svelte'
 import type { TriggerKind } from './components/triggers'
+import { stateSnapshot } from './svelte5Utils.svelte'
+import { validate, dereference } from '@scalar/openapi-parser'
+
+export namespace OpenApi {
+	export enum OpenApiVersion {
+		V2,
+		V3,
+		V3_1
+	}
+
+	export function isV2(doc: OpenAPI.Document): doc is OpenAPIV2.Document {
+		return 'swagger' in doc && doc.swagger === '2.0'
+	}
+
+	export function isV3(doc: OpenAPI.Document): doc is OpenAPIV3.Document {
+		return 'openapi' in doc && typeof doc.openapi === 'string' && doc.openapi.startsWith('3.0')
+	}
+
+	export function isV3_1(doc: OpenAPI.Document): doc is OpenAPIV3_1.Document {
+		return 'openapi' in doc && typeof doc.openapi === 'string' && doc.openapi.startsWith('3.1')
+	}
+
+	export function getOpenApiVersion(version: string): OpenApiVersion {
+		if (version.startsWith('2.0')) {
+			return OpenApiVersion.V2
+		} else if (version.startsWith('3.0')) {
+			return OpenApiVersion.V3
+		} else {
+			return OpenApiVersion.V3_1
+		}
+	}
+
+	/**
+	 * Parses and validates an OpenAPI specification provided as a string in either JSON or YAML format.
+	 *
+	 * @param api - A string containing a valid OpenAPI specification in JSON or YAML format.
+	 * @returns A promise that resolves to a tuple:
+	 *   - The first element is the validated OpenAPI document.
+	 *   - The second element is the detected OpenAPI version (2, 3.0, or 3.1).
+	 *
+	 * @throws Will throw an error if the specification is invalid or cannot be parsed.
+	 */
+	export async function parse(api: string): Promise<[OpenAPI.Document, OpenApiVersion]> {
+		const { valid, errors } = await validate(api)
+
+		if (!valid) {
+			const errorMessage = errors
+				? errors.map((error) => error.message).join('\n')
+				: 'Invalid OpenAPI document'
+			throw new Error(errorMessage)
+		}
+
+		const document = await dereference(api)
+
+		const version = getOpenApiVersion(document.version!)
+
+		return [document.schema, version]
+	}
+}
 
 export function isJobCancelable(j: Job): boolean {
 	return j.type === 'QueuedJob' && !j.schedule_path && !j.canceled
 }
+
 export function isJobReRunnable(j: Job): boolean {
 	return (j.job_kind === 'script' || j.job_kind === 'flow') && j.parent_job === undefined
 }
 
+export const WORKER_NAME_PREFIX = 'wk'
+export const AGENT_WORKER_NAME_PREFIX = 'ag'
+const SSH_AGENT_WORKER_SUFFIX = '/ssh'
+
+export function isAgentWorkerShell(workerName: string) {
+	return (
+		workerName.startsWith(AGENT_WORKER_NAME_PREFIX) && workerName.endsWith(SSH_AGENT_WORKER_SUFFIX)
+	)
+}
+
 export function isJobSelectable(selectionType: RunsSelectionMode) {
 	const f: (j: Job) => boolean = {
 		cancel: isJobCancelable,
@@ -211,6 +281,8 @@ interface ClickOutsideOptions {
 	exclude?: (() => Promise<HTMLElement[]>) | HTMLElement[] | undefined
 	stopPropagation?: boolean
 	customEventName?: string
+	// on:click_outside cannot be used with svelte 5
+	onClickOutside?: (event: MouseEvent) => void
 }
 
 export function clickOutside(
@@ -245,6 +317,7 @@ export function clickOutside(
 					event.stopPropagation()
 				}
 				node.dispatchEvent(new CustomEvent<MouseEvent>('click_outside', { detail: event }))
+				if (typeof options === 'object') options.onClickOutside?.(event)
 			}
 		}
 
@@ -566,6 +639,10 @@ export function formatCron(inp: string): string {
 	}
 }
 
+export function scriptLangArrayToCommaList(languages: ScriptLang[]): string {
+	return languages.join(',')
+}
+
 export function cronV1toV2(inp: string): string {
 	let splitted = inp.split(' ')
 	splitted = splitted.filter(String)
@@ -584,6 +661,18 @@ export function classNames(...classes: Array<string | undefined>): string {
 	return classes.filter(Boolean).join(' ')
 }
 
+export function download(filename: string, fileContent: string, mimeType?: string) {
+	const blob = new Blob([fileContent], {
+		type: mimeType
+	})
+	const url = window.URL.createObjectURL(blob)
+	const a = document.createElement('a')
+	a.href = url
+	a.download = filename
+	a.click()
+	setTimeout(() => URL.revokeObjectURL(url), 100)
+}
+
 export async function copyToClipboard(value?: string, sendToast = true): Promise<boolean> {
 	if (!value) {
 		return false
@@ -931,7 +1020,7 @@ export type Value = {
 }
 
 export function replaceFalseWithUndefined(obj: any) {
-	return replaceFalseWithUndefinedRec(structuredClone(obj))
+	return replaceFalseWithUndefinedRec(structuredClone(stateSnapshot(obj)))
 }
 
 function replaceFalseWithUndefinedRec(obj: any) {
@@ -960,7 +1049,7 @@ export function cleanValueProperties(obj: Value) {
 		let newObj: any = {}
 		for (const key of Object.keys(obj)) {
 			if (key !== 'parent_hash' && key !== 'draft' && key !== 'draft_only') {
-				newObj[key] = structuredClone(obj[key])
+				newObj[key] = structuredClone(stateSnapshot(obj[key]))
 			}
 		}
 		return newObj
@@ -1279,7 +1368,25 @@ export function getOS() {
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 import type { Snippet } from 'svelte'
+import { OpenAPIV2, type OpenAPI, type OpenAPIV3, type OpenAPIV3_1 } from 'openapi-types'
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
 }
+
+export type StateStore<T> = {
+	val: T
+}
+
+export function readFieldsRecursively(obj: any): void {
+	if (Array.isArray(obj)) {
+		// <= in case a new object is added. should read as undefined
+		for (let i = 0; i <= obj.length; i++) {
+			if (obj[i] && typeof obj[i] === 'object') {
+				readFieldsRecursively(obj[i])
+			}
+		}
+	} else if (obj !== null && typeof obj === 'object') {
+		Object.keys(obj).forEach((key) => readFieldsRecursively(obj[key]))
+	}
+}
diff --git a/frontend/src/lib/zIndexes.ts b/frontend/src/lib/zIndexes.ts
index c578681651..5dcc315202 100644
--- a/frontend/src/lib/zIndexes.ts
+++ b/frontend/src/lib/zIndexes.ts
@@ -4,6 +4,7 @@ export const zIndexes = {
 	splitPanelHandle: 1001,
 	colorInput: 1002,
 	disposables: 1100, // Modals and Drawers
+	aiChat: 1200,
 	svelteSelectOptions: 5000,
 	popover: 5001,
 	contextMenu: 6000,
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index dc3876ffc5..2f5976134e 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -43,33 +43,37 @@
 	import { SUPERADMIN_SETTINGS_HASH, USER_SETTINGS_HASH } from '$lib/components/sidebar/settings'
 	import { isCloudHosted } from '$lib/cloud'
 	import { syncTutorialsTodos } from '$lib/tutorialUtils'
-	import { ArrowLeft, Search } from 'lucide-svelte'
+	import { ArrowLeft, Search, WandSparkles } from 'lucide-svelte'
 	import { getUserExt } from '$lib/user'
 	import { workspaceAIClients } from '$lib/components/copilot/lib'
 	import { twMerge } from 'tailwind-merge'
 	import OperatorMenu from '$lib/components/sidebar/OperatorMenu.svelte'
 	import GlobalSearchModal from '$lib/components/search/GlobalSearchModal.svelte'
 	import MenuButton from '$lib/components/sidebar/MenuButton.svelte'
-	import { setContext } from 'svelte'
+	import { setContext, untrack } from 'svelte'
 	import { base } from '$app/paths'
 	import { Menubar } from '$lib/components/meltComponents'
+	import { aiChatManager } from '$lib/components/copilot/chat/AIChatManager.svelte'
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import AiChat from '$lib/components/copilot/chat/AIChat.svelte'
+	import { zIndexes } from '$lib/zIndexes'
+	interface Props {
+		children?: import('svelte').Snippet
+	}
 
+	let { children }: Props = $props()
 	OpenAPI.WITH_CREDENTIALS = true
-	let menuOpen = false
-	let globalSearchModal: GlobalSearchModal | undefined = undefined
-	let isCollapsed = false
-	let userSettings: UserSettings
-	let superadminSettings: SuperadminSettings
-	let menuHidden = false
+	let menuOpen = $state(false)
+	let globalSearchModal: GlobalSearchModal | undefined = $state(undefined)
+	let isCollapsed = $state(false)
+	let userSettings: UserSettings | undefined = $state()
+	let superadminSettings: SuperadminSettings | undefined = $state()
+	let menuHidden = $state(false)
 
 	if ($page.status == 404) {
 		goto('/user/login')
 	}
 
-	$: $page.url && userSettings != undefined && onQueryChangeUserSettings()
-	$: $page.url && superadminSettings != undefined && onQueryChangeAdminSettings()
-	$: $page.url && onQueryChange()
-
 	function onQueryChangeUserSettings() {
 		if (userSettings && $page.url.hash.startsWith(USER_SETTINGS_HASH)) {
 			const mcpMode = $page.url.hash.includes('-mcp')
@@ -94,8 +98,6 @@
 			$page.url.pathname.startsWith('/oauth/callback/')
 	}
 
-	$: updateUserStore($workspaceStore)
-
 	async function updateUserStore(workspace: string | undefined) {
 		if (workspace) {
 			try {
@@ -117,14 +119,15 @@
 		menuOpen = false
 	})
 
-	let innerWidth = BROWSER ? window.innerWidth : 2000
+	let innerWidth = $state(BROWSER ? window.innerWidth : 2000)
 
-	let favoriteLinks = [] as {
-		label: string
-		href: string
-		kind: 'app' | 'script' | 'flow' | 'raw_app'
-	}[]
-	$: $workspaceStore && $starStore && onLoad()
+	let favoriteLinks = $state(
+		[] as {
+			label: string
+			href: string
+			kind: 'app' | 'script' | 'flow' | 'raw_app'
+		}[]
+	)
 
 	function onLoad() {
 		loadFavorites()
@@ -249,8 +252,6 @@
 		}
 	})
 
-	$: innerWidth && changeCollapsed()
-
 	function changeCollapsed() {
 		if (innerWidth < 1248 && innerWidth >= 768 && !isCollapsed) {
 			isCollapsed = true
@@ -276,8 +277,6 @@
 		}
 	})
 
-	$: onUserStore($userStore)
-	$: $workspaceStore && $userStore && loadDefaultScripts($workspaceStore, $userStore)
 	async function loadDefaultScripts(workspace: string, user: UserExt | undefined) {
 		if (!user?.operator) {
 			$defaultScripts = await WorkspaceService.getDefaultScripts({ workspace })
@@ -297,38 +296,19 @@
 		}
 	}
 
-	$: if (isCollapsed && $userStore?.operator) {
-		isCollapsed = false
-	}
-
 	function openSearchModal(text?: string): void {
 		globalSearchModal?.openSearchWithPrefilledText(text)
 	}
 
 	setContext('openSearchWithPrefilledText', openSearchModal)
 
-	$: {
-		if (
-			$enterpriseLicense &&
-			$workspaceStore &&
-			$userStore &&
-			$devopsRole !== undefined &&
-			($devopsRole || $userStore.is_admin)
-		) {
-			mountModal = true
-			loadCriticalAlertsMuted()
-		} else {
-			mountModal = false
-		}
-	}
-
-	let numUnacknowledgedCriticalAlerts = 0
-	let mountModal = false
-	let isCriticalAlertsUiMuted = true
-	let muteSettings = {
+	let numUnacknowledgedCriticalAlerts = $state(0)
+	let mountModal = $state(false)
+	let isCriticalAlertsUiMuted = $state(true)
+	let muteSettings = $state({
 		global: true,
 		workspace: true
-	}
+	})
 	async function loadCriticalAlertsMuted() {
 		let g_muted = true
 		const ws_muted =
@@ -346,6 +326,51 @@
 
 		muteSettings = { global: g_muted, workspace: ws_muted }
 	}
+	$effect(() => {
+		$page.url && userSettings != undefined && untrack(() => onQueryChangeUserSettings())
+	})
+	$effect(() => {
+		$page.url && superadminSettings != undefined && untrack(() => onQueryChangeAdminSettings())
+	})
+	$effect(() => {
+		$page.url && untrack(() => onQueryChange())
+	})
+	$effect(() => {
+		$workspaceStore
+		untrack(() => updateUserStore($workspaceStore))
+	})
+	$effect(() => {
+		$workspaceStore && $starStore && untrack(() => onLoad())
+	})
+	$effect(() => {
+		innerWidth && untrack(() => changeCollapsed())
+	})
+	$effect(() => {
+		$userStore
+		untrack(() => onUserStore($userStore))
+	})
+	$effect(() => {
+		$workspaceStore && $userStore && untrack(() => loadDefaultScripts($workspaceStore!, $userStore))
+	})
+	$effect(() => {
+		if (isCollapsed && $userStore?.operator) {
+			isCollapsed = false
+		}
+	})
+	$effect(() => {
+		if (
+			$enterpriseLicense &&
+			$workspaceStore &&
+			$userStore &&
+			$devopsRole !== undefined &&
+			($devopsRole || $userStore.is_admin)
+		) {
+			mountModal = true
+			untrack(() => loadCriticalAlertsMuted())
+		} else {
+			mountModal = false
+		}
+	})
 </script>
 
 <svelte:window bind:innerWidth />
@@ -367,7 +392,7 @@
 	{#if mountModal}
 		<CriticalAlertModal bind:muteSettings bind:numUnacknowledgedCriticalAlerts />
 	{/if}
-	<div>
+	<div class="h-screen flex flex-col">
 		{#if !menuHidden}
 			{#if !$userStore?.operator}
 				{#if innerWidth < 768}
@@ -403,7 +428,7 @@
 								>
 									<button
 										type="button"
-										on:click={() => {
+										onclick={() => {
 											menuOpen = !menuOpen
 										}}
 										class="ml-1 flex items-center justify-center h-6 w-6 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white border border-white"
@@ -436,9 +461,11 @@
 										{/if}
 									</div>
 									<div class="px-2 py-4 border-y border-gray-500">
-										<Menubar let:createMenu>
-											<WorkspaceMenu {createMenu} />
-											<FavoriteMenu {createMenu} {favoriteLinks} />
+										<Menubar>
+											{#snippet children({ createMenu })}
+												<WorkspaceMenu {createMenu} />
+												<FavoriteMenu {createMenu} {favoriteLinks} />
+											{/snippet}
 										</Menubar>
 										<MenuButton
 											stopPropagationOnClick={true}
@@ -449,6 +476,19 @@
 											class="!text-xs"
 											shortcut={`${getModifierKey()}k`}
 										/>
+										<MenuButton
+											stopPropagationOnClick={true}
+											on:click={() => aiChatManager.toggleOpen()}
+											isCollapsed={false}
+											icon={WandSparkles}
+											iconProps={{
+												forceDarkMode: true
+											}}
+											label="Ask AI"
+											class="!text-xs"
+											iconClasses="!text-violet-400 dark:!text-violet-400"
+											shortcut={`${getModifierKey()}L`}
+										/>
 									</div>
 
 									<SidebarContent
@@ -474,7 +514,7 @@
 							class="flex-1 flex flex-col min-h-0 h-screen shadow-lg dark:bg-[#1e232e] bg-[#202125] !dark"
 						>
 							<button
-								on:click={() => {
+								onclick={() => {
 									goto('/')
 								}}
 							>
@@ -495,9 +535,11 @@
 								</div>
 							</button>
 							<div class="px-2 py-4 border-y border-gray-700 flex flex-col gap-1">
-								<Menubar let:createMenu class="flex flex-col gap-1">
-									<WorkspaceMenu {createMenu} {isCollapsed} />
-									<FavoriteMenu {createMenu} {favoriteLinks} {isCollapsed} />
+								<Menubar class="flex flex-col gap-1">
+									{#snippet children({ createMenu })}
+										<WorkspaceMenu {createMenu} {isCollapsed} />
+										<FavoriteMenu {createMenu} {favoriteLinks} {isCollapsed} />
+									{/snippet}
 								</Menubar>
 								<MenuButton
 									stopPropagationOnClick={true}
@@ -508,6 +550,19 @@
 									class="!text-xs"
 									shortcut={`${getModifierKey()}k`}
 								/>
+								<MenuButton
+									stopPropagationOnClick={true}
+									on:click={() => aiChatManager.toggleOpen()}
+									{isCollapsed}
+									icon={WandSparkles}
+									iconProps={{
+										forceDarkMode: true
+									}}
+									label="Ask AI"
+									class="!text-xs"
+									iconClasses="!text-violet-400 dark:!text-violet-400"
+									shortcut={`${getModifierKey()}L`}
+								/>
 							</div>
 
 							<SidebarContent
@@ -519,7 +574,7 @@
 
 							<div class="flex-shrink-0 flex px-4 pb-3.5">
 								<button
-									on:click={() => {
+									onclick={() => {
 										isCollapsed = !isCollapsed
 									}}
 								>
@@ -545,7 +600,7 @@
 			<div
 				class={classNames(
 					'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] dark:bg-opacity-75 bg-opacity-75 transition-opacity ease-linear duration-300  !dark',
-					'opacity-0'
+					'opacity-0 pointer-events-none'
 				)}
 			>
 				<div class={twMerge('fixed inset-0 flex ', '-z-0')}>
@@ -563,7 +618,7 @@
 						>
 							<button
 								type="button"
-								on:click={() => {
+								onclick={() => {
 									// menuSlide = !menuSlide
 								}}
 								aria-label="Close"
@@ -594,9 +649,11 @@
 							</div>
 
 							<div class="px-2 py-4 space-y-2 border-y border-gray-500">
-								<Menubar let:createMenu>
-									<WorkspaceMenu {createMenu} />
-									<FavoriteMenu {createMenu} {favoriteLinks} />
+								<Menubar>
+									{#snippet children({ createMenu })}
+										<WorkspaceMenu {createMenu} />
+										<FavoriteMenu {createMenu} {favoriteLinks} />
+									{/snippet}
 								</Menubar>
 								<MenuButton
 									stopPropagationOnClick={true}
@@ -607,6 +664,19 @@
 									class="!text-xs"
 									shortcut={`${getModifierKey()}k`}
 								/>
+								<MenuButton
+									stopPropagationOnClick={true}
+									on:click={() => aiChatManager.toggleOpen()}
+									{isCollapsed}
+									icon={WandSparkles}
+									iconProps={{
+										forceDarkMode: true
+									}}
+									label="Ask AI"
+									class="!text-xs"
+									iconClasses="!text-violet-400 dark:!text-violet-400"
+									shortcut={`${getModifierKey()}L`}
+								/>
 							</div>
 
 							<SidebarContent
@@ -620,47 +690,64 @@
 				</div>
 			</div>
 		{/if}
-		<div
-			id="content"
-			class={classNames(
-				'w-full flex flex-col flex-1 h-full',
-				devOnly || $userStore?.operator ? '!pl-0' : isCollapsed ? 'md:pl-12' : 'md:pl-40',
-				'transition-all ease-in-out duration-200'
-			)}
-		>
-			<main class="min-h-screen">
-				<div class="relative w-full h-full">
-					<div
-						class={classNames(
-							'py-2 px-2 sm:px-4 md:px-8 flex justify-between items-center shadow-sm max-w-7xl mx-auto md:hidden',
-							devOnly || $userStore?.operator ? 'hidden' : ''
-						)}
-					>
-						<button
-							aria-label="Menu"
-							type="button"
-							on:click={() => {
-								menuOpen = true
-							}}
-							class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
-						>
-							<svg
-								class="h-6 w-6"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="2"
-								stroke="currentColor"
-								aria-hidden="true"
+		<Splitpanes horizontal={false} class="flex-1 min-h-0">
+			<Pane size={99.8 - aiChatManager.size} minSize={50} class="flex flex-col min-h-0">
+				<div
+					id="content"
+					class={classNames(
+						'w-full flex-1 flex flex-col overflow-y-auto',
+						devOnly || $userStore?.operator ? '!pl-0' : isCollapsed ? 'md:pl-12' : 'md:pl-40',
+						'transition-all ease-in-out duration-200'
+					)}
+				>
+					<main class="flex-1 flex flex-col">
+						<div class="relative w-full flex-1 flex flex-col">
+							<div
+								class={classNames(
+									'pt-2 px-4 sm:px-4 flex flex-row justify-between items-center shadow-sm max-w-7xl md:hidden',
+									devOnly || $userStore?.operator ? 'hidden' : ''
+								)}
 							>
-								<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-							</svg>
-						</button>
-					</div>
-					<slot />
+								<button
+									aria-label="Menu"
+									type="button"
+									onclick={() => {
+										menuOpen = true
+									}}
+									class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+								>
+									<svg
+										class="h-6 w-6"
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="2"
+										stroke="currentColor"
+										aria-hidden="true"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M4 6h16M4 12h16M4 18h16"
+										/>
+									</svg>
+								</button>
+							</div>
+							<div class="flex-1">
+								{@render children?.()}
+							</div>
+						</div>
+					</main>
 				</div>
-			</main>
-		</div>
+			</Pane>
+			<Pane
+				bind:size={aiChatManager.size}
+				minSize={15}
+				class={`flex flex-col min-h-0 z-[${zIndexes.aiChat}]`}
+			>
+				<AiChat />
+			</Pane>
+		</Splitpanes>
 	</div>
 {:else}
 	<CenteredModal title="Loading user...">
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index 784716770d..bc95f315e7 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -81,7 +81,7 @@
 
 <Drawer bind:this={codeViewer} size="900px">
 	<DrawerContent title={codeViewerObj?.summary ?? ''} on:close={codeViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				href="{$hubBaseUrlStore}/scripts/{codeViewerObj?.app ?? ''}/{codeViewerObj?.ask_id ?? 0}"
 				variant="contained"
@@ -104,7 +104,7 @@
 			>
 				Fork
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 		{#if codeViewerObj != undefined && codeViewerLanguage != undefined}
 			<HighlightCode language={codeViewerLanguage} code={codeViewerContent} />
 		{:else}
@@ -117,7 +117,7 @@
 
 <Drawer bind:this={flowViewer} size="1200px">
 	<DrawerContent title="Hub flow" on:close={flowViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				href="{$hubBaseUrlStore}/flows/{flowViewerFlow?.flow?.id}"
 				variant="contained"
@@ -141,7 +141,7 @@
 			>
 				Fork
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 
 		{#if flowViewerFlow?.flow}
 			{#await import('$lib/components/FlowViewer.svelte')}
@@ -159,7 +159,7 @@
 
 <Drawer bind:this={appViewer} size="1200px">
 	<DrawerContent title="Hub app" on:close={appViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				href="{$hubBaseUrlStore}/apps/{appViewerApp?.app?.id}"
 				variant="contained"
@@ -183,7 +183,7 @@
 			>
 				Fork
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 
 		{#if appViewerApp?.app}
 			<div class="p-4">
@@ -214,7 +214,7 @@
 </Drawer>
 
 <div>
-	<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 h-fit-content">
+	<div class="max-w-7xl mx-auto px-4 sm:px-8 md:px-8 h-fit-content">
 		{#if $workspaceStore == 'admins'}
 			<div class="my-4"></div>
 
@@ -227,7 +227,7 @@
 			<div class="flex flex-row gap-4 flex-wrap justify-end items-center">
 				{#if !$userStore?.operator}
 					<span class="text-sm text-secondary">Create a</span>
-					<CreateActionsScript />
+					<CreateActionsScript aiId="create-script-button" aiDescription="Creates a new script" />
 					{#if HOME_SHOW_CREATE_FLOW}<CreateActionsFlow />{/if}
 					{#if HOME_SHOW_CREATE_APP}<CreateActionsApp />{/if}
 				{/if}
diff --git a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
index 9bd842f1ad..3eea4427e0 100644
--- a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
@@ -34,10 +34,10 @@
 		$importStore = undefined
 	}
 
-	const state = nodraft ? undefined : localStorage.getItem('app')
+	const appState = nodraft ? undefined : localStorage.getItem('app')
 
-	let summary = ''
-	let value: App = {
+	let summary = $state('')
+	let value: App = $state({
 		grid: [],
 		fullscreen: false,
 		unusedInlineScripts: [],
@@ -46,7 +46,7 @@
 			type: 'path',
 			path: DEFAULT_THEME
 		}
-	}
+	})
 	afterNavigate(() => {
 		if (nodraft) {
 			let url = new URL($page.url.href)
@@ -54,13 +54,13 @@
 			replaceState(url.toString(), $page.state)
 		}
 	})
-	let policy: Policy = {
+	let policy: Policy = $state({
 		on_behalf_of: $userStore?.username.includes('@')
 			? $userStore?.username
 			: `u/${$userStore?.username}`,
 		on_behalf_of_email: $userStore?.email,
 		execution_mode: 'publisher'
-	}
+	})
 
 	loadApp()
 
@@ -101,7 +101,7 @@
 			summary = hub.app.summary
 			sendUserToast('App loaded from Hub')
 			goto('?', { replaceState: true })
-		} else if (!templatePath && !hubId && state) {
+		} else if (!templatePath && !hubId && appState) {
 			sendUserToast('App restored from browser stored autosave', false, [
 				{
 					label: 'Start from blank',
@@ -116,7 +116,7 @@
 					}
 				}
 			])
-			value = decodeState(state)
+			value = decodeState(appState)
 		} else {
 			const preset = presets['topbarcomponent']
 
@@ -168,18 +168,17 @@
 				replaceStateFn={(path) => replaceState(path, $page.state)}
 				gotoFn={(path, opt) => goto(path, opt)}
 			>
-				<svelte:fragment
-					slot="unsavedConfirmationModal"
-					let:diffDrawer
-					let:additionalExitAction
-					let:getInitialAndModifiedValues
-				>
+				{#snippet unsavedConfirmationModal({
+					diffDrawer,
+					additionalExitAction,
+					getInitialAndModifiedValues
+				})}
 					<UnsavedConfirmationModal
 						{diffDrawer}
 						{additionalExitAction}
 						{getInitialAndModifiedValues}
 					/>
-				</svelte:fragment>
+				{/snippet}
 			</AppEditor>
 		{/key}
 	</div>
diff --git a/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
index 187ffcee15..ad4792090d 100644
--- a/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import AppEditor from '$lib/components/apps/editor/AppEditor.svelte'
-	import { AppService, type AppWithLastVersion, DraftService } from '$lib/gen'
+	import {
+		AppService,
+		type AppWithLastVersion,
+		type AppWithLastVersionWDraft,
+		DraftService
+	} from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { page } from '$app/stores'
 	import { cleanValueProperties, decodeState, type Value } from '$lib/utils'
@@ -10,8 +15,12 @@
 	import DiffDrawer from '$lib/components/DiffDrawer.svelte'
 	import type { App } from '$lib/components/apps/types'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
+	import { stateSnapshot } from '$lib/svelte5Utils.svelte'
+	import { untrack } from 'svelte'
 
-	let app = undefined as (AppWithLastVersion & { draft_only?: boolean; value: any }) | undefined
+	let app = $state(
+		undefined as (AppWithLastVersion & { draft_only?: boolean; value: any }) | undefined
+	)
 	let savedApp:
 		| {
 				value: App
@@ -22,8 +31,8 @@
 				draft_only?: boolean
 				custom_path?: string
 		  }
-		| undefined = undefined
-	let redraw = 0
+		| undefined = $state(undefined)
+	let redraw = $state(0)
 	let path = $page.params.path
 
 	let nodraft = $page.url.searchParams.get('nodraft')
@@ -44,7 +53,7 @@
 			path,
 			workspace: $workspaceStore!
 		})
-		const app_w_draft_ = structuredClone(app_w_draft)
+		const app_w_draft_: AppWithLastVersionWDraft = structuredClone(stateSnapshot(app_w_draft))
 		savedApp = {
 			summary: app_w_draft_.summary,
 			value: app_w_draft_.value as App,
@@ -55,14 +64,14 @@
 				app_w_draft_.draft?.['summary'] !== undefined // backward compatibility for old drafts missing metadata
 					? app_w_draft_.draft
 					: app_w_draft_.draft
-					? {
-							summary: app_w_draft_.summary,
-							value: app_w_draft_.draft,
-							path: app_w_draft_.path,
-							policy: app_w_draft_.policy,
-							custom_path: app_w_draft_.custom_path
-					  }
-					: undefined,
+						? {
+								summary: app_w_draft_.summary,
+								value: app_w_draft_.draft,
+								path: app_w_draft_.path,
+								policy: app_w_draft_.policy,
+								custom_path: app_w_draft_.custom_path
+							}
+						: undefined,
 			custom_path: app_w_draft_.custom_path
 		}
 
@@ -87,8 +96,8 @@
 				actions.push({
 					label: 'Show diff',
 					callback: async () => {
-						diffDrawer.openDrawer()
-						diffDrawer.setDiff({
+						diffDrawer?.openDrawer()
+						diffDrawer?.setDiff({
 							mode: 'simple',
 							original: draftOrDeployed,
 							current: urlScript,
@@ -133,8 +142,8 @@
 					{
 						label: 'Show diff',
 						callback: async () => {
-							diffDrawer.openDrawer()
-							diffDrawer.setDiff({
+							diffDrawer?.openDrawer()
+							diffDrawer?.setDiff({
 								mode: 'simple',
 								original: deployed,
 								current: draft,
@@ -150,18 +159,20 @@
 		}
 	}
 
-	$: {
+	$effect(() => {
 		if ($workspaceStore) {
-			loadApp()
+			untrack(() => {
+				loadApp()
+			})
 		}
-	}
+	})
 
 	async function restoreDraft() {
 		if (!savedApp || !savedApp.draft) {
 			sendUserToast('Could not restore to draft', true)
 			return
 		}
-		diffDrawer.closeDrawer()
+		diffDrawer?.closeDrawer()
 		goto(`/apps/edit/${savedApp.draft.path}`)
 		await loadApp()
 		redraw++
@@ -172,7 +183,7 @@
 			sendUserToast('Could not restore to deployed', true)
 			return
 		}
-		diffDrawer.closeDrawer()
+		diffDrawer?.closeDrawer()
 		if (savedApp.draft) {
 			await DraftService.deleteDraft({
 				workspace: $workspaceStore!,
@@ -185,12 +196,12 @@
 		redraw++
 	}
 
-	let diffDrawer: DiffDrawer
+	let diffDrawer: DiffDrawer | undefined = $state()
 
 	function onRestore(ev: any) {
 		sendUserToast('App restored from previous deployment')
 		app = ev.detail
-		const app_ = structuredClone(app!)
+		const app_ = structuredClone(stateSnapshot(app!))
 		savedApp = {
 			summary: app_.summary,
 			value: app_.value as App,
@@ -227,18 +238,17 @@
 				replaceStateFn={(path) => replaceState(path, $page.state)}
 				gotoFn={(path, opt) => goto(path, opt)}
 			>
-				<svelte:fragment
-					slot="unsavedConfirmationModal"
-					let:diffDrawer
-					let:additionalExitAction
-					let:getInitialAndModifiedValues
-				>
+				{#snippet unsavedConfirmationModal({
+					diffDrawer,
+					additionalExitAction,
+					getInitialAndModifiedValues
+				})}
 					<UnsavedConfirmationModal
 						{diffDrawer}
 						{additionalExitAction}
 						{getInitialAndModifiedValues}
 					/>
-				</svelte:fragment>
+				{/snippet}
 			</AppEditor>
 		</div>
 	{/if}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
index 02e3fde199..4988e2bfdd 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
@@ -9,6 +9,7 @@
 	import DiffDrawer from '$lib/components/DiffDrawer.svelte'
 	import type { HiddenRunnable } from '$lib/components/apps/types'
 	import RawAppEditor from '$lib/components/raw_apps/RawAppEditor.svelte'
+	import { stateSnapshot } from '$lib/svelte5Utils.svelte'
 
 	let files: Record<string, string> | undefined = undefined
 	let runnables = {}
@@ -62,7 +63,7 @@
 			path,
 			workspace: $workspaceStore!
 		})
-		const app_w_draft_ = structuredClone(app_w_draft)
+		const app_w_draft_ = structuredClone(stateSnapshot(app_w_draft))
 		savedApp = {
 			summary: app_w_draft_.summary,
 			value: app_w_draft_.value as any,
@@ -190,9 +191,9 @@
 		extractRawApp(prev)
 		savedApp = {
 			summary: prev.summary,
-			value: structuredClone(prev.value),
+			value: structuredClone(stateSnapshot(prev.value)),
 			path: prev.path,
-			policy: structuredClone(policy),
+			policy: structuredClone(stateSnapshot(policy)),
 			custom_path: prev.custom_path
 		}
 		redraw++
diff --git a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
index 34b069a46e..e28cbbb20c 100644
--- a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
@@ -15,24 +15,26 @@
 	import { enterpriseLicense, userStore, workspaceStore, userWorkspaces } from '$lib/stores'
 	import { Splitpanes, Pane } from 'svelte-splitpanes'
 
-	let username: string = $page.url.searchParams.get('username') ?? 'all'
-	let pageIndex: number | undefined = Number($page.url.searchParams.get('page')) || 0
-	let before: string | undefined = $page.url.searchParams.get('before') ?? undefined
-	let hasMore: boolean = false
-	let after: string | undefined = $page.url.searchParams.get('after') ?? undefined
-	let perPage: number | undefined = Number($page.url.searchParams.get('perPage')) || 100
-	let operation: string = $page.url.searchParams.get('operation') ?? 'all'
-	let resource: string | undefined = $page.url.searchParams.get('resource') ?? undefined
-	let scope: undefined | 'all_workspaces' | 'instance' = ($page.url.searchParams.get('scope') ??
-		undefined) as undefined | 'all_workspaces' | 'instance'
+	let username: string = $state($page.url.searchParams.get('username') ?? 'all')
+	let pageIndex: number | undefined = $state(Number($page.url.searchParams.get('page')) || 0)
+	let before: string | undefined = $state($page.url.searchParams.get('before') ?? undefined)
+	let hasMore: boolean = $state(false)
+	let after: string | undefined = $state($page.url.searchParams.get('after') ?? undefined)
+	let perPage: number | undefined = $state(Number($page.url.searchParams.get('perPage')) || 100)
+	let operation: string = $state($page.url.searchParams.get('operation') ?? 'all')
+	let resource: string | undefined = $state($page.url.searchParams.get('resource') ?? undefined)
+	let scope: undefined | 'all_workspaces' | 'instance' = $state(
+		($page.url.searchParams.get('scope') ?? undefined) as undefined | 'all_workspaces' | 'instance'
+	)
 
-	let actionKind: ActionKind | 'all' =
+	let actionKind: ActionKind | 'all' = $state(
 		($page.url.searchParams.get('actionKind') as ActionKind) ?? 'all'
+	)
 
-	let logs: AuditLog[]
+	let logs: AuditLog[] | undefined = $state()
 
-	let selectedId: number | undefined = undefined
-	let auditLogDrawer: Drawer
+	let selectedId: number | undefined = $state(undefined)
+	let auditLogDrawer: Drawer | undefined = $state()
 </script>
 
 {#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.audit_logs}
@@ -67,7 +69,7 @@
 				</div>
 				<div class="2xl:hidden">
 					<AuditLogMobileFilters>
-						<svelte:fragment slot="filters">
+						{#snippet filters()}
 							<AuditLogsFilters
 								bind:logs
 								bind:username
@@ -79,7 +81,7 @@
 								bind:scope
 								bind:hasMore
 							/>
-						</svelte:fragment>
+						{/snippet}
 					</AuditLogMobileFilters>
 				</div>
 			</div>
@@ -110,7 +112,9 @@
 					/>
 				</Pane>
 				<Pane size={30} minSize={15}>
-					<AuditLogDetails {logs} {selectedId} />
+					{#if logs}
+						<AuditLogDetails {logs} {selectedId} />
+					{/if}
 				</Pane>
 			</Splitpanes>
 		</SplitPanesWrapper>
@@ -128,7 +132,7 @@
 				on:select={(e) => {
 					selectedId = e.detail
 
-					auditLogDrawer.openDrawer()
+					auditLogDrawer?.openDrawer()
 				}}
 			/>
 		</div>
@@ -137,6 +141,8 @@
 
 <Drawer bind:this={auditLogDrawer}>
 	<DrawerContent title="Log details" on:close={auditLogDrawer.closeDrawer}>
-		<AuditLogDetails {logs} {selectedId} />
+		{#if logs}
+			<AuditLogDetails {logs} {selectedId} />
+		{/if}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
index feb950a674..cfe7c6ce0e 100644
--- a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
@@ -6,14 +6,13 @@
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import type { FlowState } from '$lib/components/flows/flowState'
-	import { importFlowStore, initFlow } from '$lib/components/flows/flowStore'
+	import { importFlowStore, initFlow } from '$lib/components/flows/flowStore.svelte'
 	import { FlowService, type Flow } from '$lib/gen'
 	import { initialArgsStore, userStore, workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
-	import { decodeState, emptySchema } from '$lib/utils'
+	import { decodeState, emptySchema, type StateStore } from '$lib/utils'
 	import { tick } from 'svelte'
 	import { writable } from 'svelte/store'
-	import type { GetInitialAndModifiedValues } from '$lib/components/common/confirmationModal/unsavedTypes'
 	import { replaceScriptPlaceholderWithItsValues } from '$lib/hub'
 	import type { Trigger } from '$lib/components/triggers/utils'
 	import type { PanesLayout } from '$lib/components/splitPanes/types'
@@ -33,35 +32,38 @@
 	const templateId = $page.url.searchParams.get('template_id')
 	const initialState = hubId || templatePath || nodraft ? undefined : localStorage.getItem('flow')
 
-	let selectedId: string = 'settings-metadata'
-	let loading = false
+	let selectedId: string = $state('settings-metadata')
+	let loading = $state(false)
 
-	let initialPath: string | undefined = undefined
-	let pathStoreInit: string | undefined = undefined
+	let initialPath: string | undefined = $state(undefined)
+	let pathStoreInit: string | undefined = $state(undefined)
 
-	let initialArgs = {}
+	let initialArgs = $state({})
 	if ($initialArgsStore) {
 		initialArgs = $initialArgsStore
 		$initialArgsStore = undefined
 	}
-	let flowBuilder: FlowBuilder | undefined = undefined
+	let flowBuilder: FlowBuilder | undefined = $state(undefined)
 
-	export const flowStore = writable<Flow>({
-		summary: '',
-		value: { modules: [] },
-		path: '',
-		edited_at: '',
-		edited_by: '',
-		archived: false,
-		extra_perms: {},
-		schema: emptySchema()
+	const flowStore: StateStore<Flow> = $state({
+		val: {
+			summary: '',
+			value: { modules: [] },
+			path: '',
+			edited_at: '',
+			edited_by: '',
+			archived: false,
+			extra_perms: {},
+			schema: emptySchema()
+		}
 	})
 	const flowStateStore = writable<FlowState>({})
 
-	let draftTriggersFromUrl: Trigger[] | undefined = undefined
-	let selectedTriggerIndexFromUrl: number | undefined = undefined
-	let splitPanesLayoutFromUrl: Record<string, PanesLayout> | undefined = undefined
-	let tabsStateFromUrl: Record<string, string> | undefined = undefined
+	let splitPanesLayoutFromUrl: Record<string, PanesLayout> | undefined = $state(undefined)
+	let tabsStateFromUrl: Record<string, string> | undefined = $state(undefined)
+	let draftTriggersFromUrl: Trigger[] | undefined = $state(undefined)
+	let selectedTriggerIndexFromUrl: number | undefined = $state(undefined)
+
 	async function loadFlow() {
 		loading = true
 		let flow: Flow = {
@@ -90,7 +92,7 @@
 				{
 					label: 'Start from blank instead',
 					callback: () => {
-						$flowStore = {
+						flowStore.val = {
 							summary: '',
 							value: { modules: [] },
 							path: '',
@@ -163,17 +165,13 @@
 	}
 
 	loadFlow()
-
-	let getSelectedId: (() => string) | undefined = undefined
-
-	let getInitialAndModifiedValues: GetInitialAndModifiedValues | undefined = undefined
 </script>
 
 <!-- <div id="monaco-widgets-root" class="monaco-editor" style="z-index: 1200;" /> -->
 
 <FlowBuilder
 	on:saveInitial={(e) => {
-		goto(`/flows/edit/${e.detail}?selected=${getSelectedId?.()}`)
+		goto(`/flows/edit/${e.detail}?selected=${flowBuilder?.getSelectedId?.()}`)
 	}}
 	on:deploy={(e) => {
 		goto(`/flows/get/${e.detail}?workspace=${$workspaceStore}`)
@@ -183,8 +181,6 @@
 	}}
 	{initialPath}
 	{pathStoreInit}
-	bind:getSelectedId
-	bind:getInitialAndModifiedValues
 	bind:this={flowBuilder}
 	newFlow
 	{initialArgs}
@@ -197,5 +193,7 @@
 	savedSplitPanesLayout={splitPanesLayoutFromUrl}
 	{tabsStateFromUrl}
 >
-	<UnsavedConfirmationModal {getInitialAndModifiedValues} />
+	<UnsavedConfirmationModal
+		getInitialAndModifiedValues={flowBuilder?.getInitialAndModifiedValues}
+	/>
 </FlowBuilder>
diff --git a/frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte
index 5b8f9a2286..456c9b07dd 100644
--- a/frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte
@@ -4,8 +4,14 @@
 	import { page } from '$app/stores'
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import { initialArgsStore, workspaceStore } from '$lib/stores'
-	import { cleanValueProperties, decodeState, emptySchema, orderedJsonStringify } from '$lib/utils'
-	import { initFlow } from '$lib/components/flows/flowStore'
+	import {
+		cleanValueProperties,
+		decodeState,
+		emptySchema,
+		orderedJsonStringify,
+		type StateStore
+	} from '$lib/utils'
+	import { initFlow } from '$lib/components/flows/flowStore.svelte'
 	import { goto } from '$lib/navigation'
 	import { afterNavigate, replaceState } from '$app/navigation'
 	import { writable } from 'svelte/store'
@@ -14,15 +20,15 @@
 	import DiffDrawer from '$lib/components/DiffDrawer.svelte'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import type { ScheduleTrigger } from '$lib/components/triggers'
-	import type { GetInitialAndModifiedValues } from '$lib/components/common/confirmationModal/unsavedTypes'
 	import type { Trigger } from '$lib/components/triggers/utils'
 	import type { PanesLayout } from '$lib/components/splitPanes/types'
+	import { untrack } from 'svelte'
 
-	let version: undefined | number = undefined
+	let version: undefined | number = $state(undefined)
 	let nodraft = $page.url.searchParams.get('nodraft')
 	const initialState = nodraft ? undefined : localStorage.getItem(`flow-${$page.params.path}`)
 	let stateLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
-	let initialArgs = {}
+	let initialArgs = $state({})
 	if ($initialArgsStore) {
 		initialArgs = $initialArgsStore
 		$initialArgsStore = undefined
@@ -32,7 +38,7 @@
 		| (Flow & {
 				draft?: Flow | undefined
 		  })
-		| undefined = undefined
+		| undefined = $state(undefined)
 
 	afterNavigate(() => {
 		if (nodraft) {
@@ -42,34 +48,39 @@
 		}
 	})
 
-	export const flowStore = writable<Flow>({
-		summary: '',
-		value: { modules: [] },
-		path: '',
-		edited_at: '',
-		edited_by: '',
-		archived: false,
-		extra_perms: {},
-		schema: emptySchema()
+	export const flowStore: StateStore<Flow> = $state({
+		val: {
+			summary: '',
+			value: { modules: [] },
+			path: '',
+			edited_at: '',
+			edited_by: '',
+			archived: false,
+			extra_perms: {},
+			schema: emptySchema()
+		}
 	})
 	const flowStateStore = writable<FlowState>({})
 
-	let loading = false
+	let loading = $state(false)
 
-	let selectedId: string = 'settings-metadata'
+	let selectedId: string = $state('settings-metadata')
 
 	let nobackenddraft = false
 
-	let savedPrimarySchedule: ScheduleTrigger | undefined = stateLoadedFromUrl?.primarySchedule
+	let savedPrimarySchedule: ScheduleTrigger | undefined = $state(
+		stateLoadedFromUrl?.primarySchedule
+	)
 
-	let draftTriggersFromUrl: Trigger[] | undefined = undefined
-	let selectedTriggerIndexFromUrl: number | undefined = undefined
-	let splitPanesLayoutFromUrl: Record<string, PanesLayout> | undefined = undefined
-	let tabsStateFromUrl: Record<string, string> | undefined = undefined
+	let splitPanesLayoutFromUrl: Record<string, PanesLayout> | undefined = $state(undefined)
+	let tabsStateFromUrl: Record<string, string> | undefined = $state(undefined)
+	let draftTriggersFromUrl: Trigger[] | undefined = $state(undefined)
+	let selectedTriggerIndexFromUrl: number | undefined = $state(undefined)
 
-	let flowBuilder: FlowBuilder | undefined = undefined
+	let flowBuilder: FlowBuilder | undefined = $state(undefined)
 
 	async function loadFlow(): Promise<void> {
+		console.log('loadFlow')
 		loading = true
 		let flow: Flow
 		let statePath = stateLoadedFromUrl?.path
@@ -89,10 +100,12 @@
 			})
 
 			const draftOrDeployed = cleanValueProperties(savedFlow?.draft || savedFlow)
-			const urlScript = cleanValueProperties({
-				...stateLoadedFromUrl.flow,
-				draft_triggers: stateLoadedFromUrl.draft_triggers
-			})
+			const urlScript = cleanValueProperties(
+				$state.snapshot({
+					...stateLoadedFromUrl.flow,
+					draft_triggers: stateLoadedFromUrl.draft_triggers
+				})
+			)
 			flow = stateLoadedFromUrl.flow
 			draftTriggersFromUrl = stateLoadedFromUrl.draft_triggers
 			selectedTriggerIndexFromUrl = stateLoadedFromUrl.selected_trigger
@@ -119,8 +132,8 @@
 					{
 						label: 'Show diff',
 						callback: async () => {
-							diffDrawer.openDrawer()
-							diffDrawer.setDiff({
+							diffDrawer?.openDrawer()
+							diffDrawer?.setDiff({
 								mode: 'simple',
 								original: draftOrDeployed,
 								current: urlScript,
@@ -146,10 +159,10 @@
 				path: $page.params.path
 			})
 			savedFlow = {
-				...structuredClone(flowWithDraft),
+				...structuredClone($state.snapshot(flowWithDraft)),
 				draft: flowWithDraft.draft
 					? {
-							...structuredClone(flowWithDraft.draft),
+							...structuredClone($state.snapshot(flowWithDraft.draft)),
 							path: flowWithDraft.draft.path ?? flowWithDraft.path // backward compatibility for old drafts missing path
 						}
 					: undefined
@@ -185,8 +198,8 @@
 						{
 							label: 'Show diff',
 							callback: async () => {
-								diffDrawer.openDrawer()
-								diffDrawer.setDiff({
+								diffDrawer?.openDrawer()
+								diffDrawer?.setDiff({
 									mode: 'simple',
 									original: deployed,
 									current: draft,
@@ -208,20 +221,20 @@
 		selectedId = stateLoadedFromUrl?.selectedId ?? $page.url.searchParams.get('selected')
 	}
 
-	$: {
+	$effect(() => {
 		if ($workspaceStore) {
-			loadFlow()
+			untrack(() => loadFlow())
 		}
-	}
+	})
 
-	let diffDrawer: DiffDrawer
+	let diffDrawer: DiffDrawer | undefined = $state()
 
 	async function restoreDraft() {
 		if (!savedFlow || !savedFlow.draft) {
 			sendUserToast('Could not restore to draft', true)
 			return
 		}
-		diffDrawer.closeDrawer()
+		diffDrawer?.closeDrawer()
 		stateLoadedFromUrl = undefined
 		goto(`/flows/edit/${savedFlow.draft.path}`)
 		loadFlow()
@@ -232,7 +245,7 @@
 			sendUserToast('Could not restore to deployed', true)
 			return
 		}
-		diffDrawer.closeDrawer()
+		diffDrawer?.closeDrawer()
 		if (savedFlow.draft) {
 			await DraftService.deleteDraft({
 				workspace: $workspaceStore!,
@@ -244,7 +257,6 @@
 		goto(`/flows/edit/${savedFlow.path}`)
 		loadFlow()
 	}
-	let getInitialAndModifiedValues: GetInitialAndModifiedValues | undefined = undefined
 </script>
 
 <!-- <div id="monaco-widgets-root" class="monaco-editor" style="z-index: 1200;" /> -->
@@ -279,8 +291,10 @@
 	{draftTriggersFromUrl}
 	{selectedTriggerIndexFromUrl}
 	{tabsStateFromUrl}
-	bind:version
-	bind:getInitialAndModifiedValues
+	{version}
 >
-	<UnsavedConfirmationModal {diffDrawer} {getInitialAndModifiedValues} />
+	<UnsavedConfirmationModal
+		{diffDrawer}
+		getInitialAndModifiedValues={flowBuilder?.getInitialAndModifiedValues}
+	/>
 </FlowBuilder>
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 55bf1d5d1c..926b1f3d7e 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -9,7 +9,7 @@
 		type TriggersCount,
 		type WorkspaceDeployUISettings
 	} from '$lib/gen'
-	import { canWrite, copyToClipboard, defaultIfEmptyString, emptyString } from '$lib/utils'
+	import { canWrite, defaultIfEmptyString, emptyString } from '$lib/utils'
 	import { isDeployable, ALL_DEPLOYABLE } from '$lib/utils_deployable'
 
 	import DetailPageLayout from '$lib/components/details/DetailPageLayout.svelte'
@@ -23,6 +23,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import SavedInputsV2 from '$lib/components/SavedInputsV2.svelte'
+	import AIFormAssistant from '$lib/components/copilot/AIFormAssistant.svelte'
 	import {
 		FolderOpen,
 		Archive,
@@ -36,8 +37,7 @@
 		Columns,
 		Pen,
 		Eye,
-		HistoryIcon,
-		ClipboardCopy
+		HistoryIcon
 	} from 'lucide-svelte'
 
 	import DetailPageHeader from '$lib/components/details/DetailPageHeader.svelte'
@@ -49,12 +49,11 @@
 	import GfmMarkdown from '$lib/components/GfmMarkdown.svelte'
 	import FlowHistory from '$lib/components/flows/FlowHistory.svelte'
 	import Star from '$lib/components/Star.svelte'
-	import { Highlight } from 'svelte-highlight'
-	import json from 'svelte-highlight/languages/json'
+
 	import { writable } from 'svelte/store'
 	import InputSelectedBadge from '$lib/components/schema/InputSelectedBadge.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
-	import { onDestroy, tick } from 'svelte'
+	import { onDestroy, tick, untrack } from 'svelte'
 	import LogViewer from '$lib/components/LogViewer.svelte'
 	import TriggersEditor from '$lib/components/triggers/TriggersEditor.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
@@ -62,37 +61,29 @@
 	import TriggersBadge from '$lib/components/graph/renderers/triggers/TriggersBadge.svelte'
 	import { Triggers } from '$lib/components/triggers/triggers.svelte'
 
-	let flow: Flow | undefined
+	let flow: Flow | undefined = $state()
 	let can_write = false
-	$: path = $page.params.path
-	let shareModal: ShareModal
+	let shareModal: ShareModal | undefined = $state()
 
-	let scheduledForStr: string | undefined = undefined
-	let invisible_to_owner: boolean | undefined = undefined
-	let overrideTag: string | undefined = undefined
-	let inputSelected: 'saved' | 'history' | undefined = undefined
-	let jsonView = false
-	let deploymentInProgress = false
+	let scheduledForStr: string | undefined = $state(undefined)
+	let invisible_to_owner: boolean | undefined = $state(undefined)
+	let overrideTag: string | undefined = $state(undefined)
+	let inputSelected: 'saved' | 'history' | undefined = $state(undefined)
+	let jsonView = $state(false)
+	let deploymentInProgress = $state(false)
 
 	let intervalId: NodeJS.Timeout | undefined = undefined
 
-	$: {
-		const cliTrigger = triggersState.triggers.find((t) => t.type === 'cli')
-		if (cliTrigger) {
-			cliTrigger.extra = {
-				cliCommand: `wmill flow run ${flow?.path} -d '${JSON.stringify(args)}'`
-			}
-		}
-	}
-
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 
 	// Add triggers context store
-	const triggersState = new Triggers([
-		{ type: 'webhook', path: '', isDraft: false },
-		{ type: 'email', path: '', isDraft: false },
-		{ type: 'cli', path: '', isDraft: false }
-	])
+	const triggersState = $state(
+		new Triggers([
+			{ type: 'webhook', path: '', isDraft: false },
+			{ type: 'email', path: '', isDraft: false },
+			{ type: 'cli', path: '', isDraft: false }
+		])
+	)
 	setContext<TriggerContext>('TriggerContext', {
 		triggersCount,
 		simplifiedPoll: writable(false),
@@ -100,17 +91,7 @@
 		triggersState
 	})
 
-	let previousPath: string | undefined = undefined
-	$: {
-		if ($workspaceStore && $userStore && $page.params.path) {
-			if (previousPath !== path) {
-				previousPath = path
-				loadFlow()
-				loadTriggersCount()
-				loadTriggers()
-			}
-		}
-	}
+	let previousPath: string | undefined = $state(undefined)
 
 	async function archiveFlow(): Promise<void> {
 		await FlowService.archiveFlowByPath({
@@ -127,7 +108,7 @@
 		goto('/')
 	}
 
-	let starred: boolean | undefined = undefined
+	let starred: boolean | undefined = $state(undefined)
 
 	async function loadTriggersCount() {
 		$triggersCount = await FlowService.getTriggersCountOfFlow({
@@ -165,8 +146,8 @@
 		can_write = canWrite(flow.path, flow.extra_perms!, $userStore)
 	}
 
-	let isValid = true
-	let loading = false
+	let isValid = $state(true)
+	let loading = $state(false)
 
 	async function syncer(): Promise<void> {
 		if (flow) {
@@ -208,7 +189,7 @@
 		}
 	}
 
-	let args: Record<string, any> | undefined = undefined
+	let args: Record<string, any> | undefined = $state(undefined)
 
 	let hash = window.location.hash
 	if (hash.length > 1) {
@@ -221,9 +202,9 @@
 		}
 	}
 
-	let moveDrawer: MoveDrawer
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let runForm: RunForm
+	let moveDrawer: MoveDrawer | undefined = $state()
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let runForm: RunForm | undefined = $state()
 
 	function getMainButtons(flow: Flow | undefined, args: object | undefined) {
 		const buttons: any = []
@@ -302,9 +283,7 @@
 		return buttons
 	}
 
-	$: mainButtons = getMainButtons(flow, args)
-
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -326,14 +305,14 @@
 
 		menuItems.push({
 			label: 'Share',
-			onclick: () => shareModal.openDrawer(flow?.path ?? '', 'flow'),
+			onclick: () => shareModal?.openDrawer(flow?.path ?? '', 'flow'),
 			Icon: Share,
 			disabled: !can_write
 		})
 
 		menuItems.push({
 			label: 'Move/Rename',
-			onclick: () => moveDrawer.openDrawer(flow?.path ?? '', flow?.summary, 'flow'),
+			onclick: () => moveDrawer?.openDrawer(flow?.path ?? '', flow?.summary, 'flow'),
 			Icon: FolderOpen
 		})
 
@@ -348,7 +327,7 @@
 		if (isDeployable('flow', flow?.path ?? '', deployUiSettings)) {
 			menuItems.push({
 				label: 'Deploy to staging/prod',
-				onclick: () => deploymentDrawer.openDrawer(flow?.path ?? '', 'flow'),
+				onclick: () => deploymentDrawer?.openDrawer(flow?.path ?? '', 'flow'),
 				Icon: ChevronUpSquare
 			})
 		}
@@ -393,11 +372,33 @@
 				break
 		}
 	}
-	let stepDetail: FlowModule | string | undefined = undefined
+	let stepDetail: FlowModule | string | undefined = $state(undefined)
 
-	let rightPaneSelected = 'saved_inputs'
-	let savedInputsV2: SavedInputsV2 | undefined = undefined
-	let flowHistory: FlowHistory | undefined = undefined
+	let rightPaneSelected = $state('saved_inputs')
+	let savedInputsV2: SavedInputsV2 | undefined = $state(undefined)
+	let flowHistory: FlowHistory | undefined = $state(undefined)
+	let path = $derived($page.params.path)
+	$effect(() => {
+		const cliTrigger = triggersState.triggers.find((t) => t.type === 'cli')
+		if (cliTrigger) {
+			cliTrigger.extra = {
+				cliCommand: `wmill flow run ${flow?.path} -d '${JSON.stringify(args)}'`
+			}
+		}
+	})
+	$effect(() => {
+		if ($workspaceStore && $userStore && $page.params.path) {
+			if (previousPath !== path) {
+				previousPath = path
+				untrack(() => {
+					loadFlow()
+					loadTriggersCount()
+					loadTriggers()
+				})
+			}
+		}
+	})
+	let mainButtons = $derived(getMainButtons(flow, args))
 </script>
 
 <Skeleton
@@ -405,7 +406,7 @@
 	loading={!flow}
 	layout={[0.75, [2, 0, 2], 2.25, [{ h: 1.5, w: 40 }], 0.2, [{ h: 1, w: 30 }]]}
 />
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 <ShareModal bind:this={shareModal} />
 <MoveDrawer
@@ -430,167 +431,184 @@
 			schema: flow.schema
 		}}
 	>
-		<svelte:fragment slot="header">
-			<DetailPageHeader
-				on:seeTriggers={() => {
-					rightPaneSelected = 'triggers'
-				}}
-				{mainButtons}
-				menuItems={getMenuItems(flow, deployUiSettings)}
-				title={defaultIfEmptyString(flow.summary, flow.path)}
-				bind:errorHandlerMuted={flow.ws_error_handler_muted}
-				scriptOrFlowPath={flow.path}
-				errorHandlerKind="flow"
-				tag={flow.tag}
-			>
-				<svelte:fragment slot="trigger-badges">
-					<TriggersBadge
-						showOnlyWithCount={true}
-						showDraft={false}
-						{path}
-						newItem={false}
-						isFlow
-						selected={rightPaneSelected == 'triggers'}
-						onSelect={async (triggerIndex: number) => {
-							rightPaneSelected = 'triggers'
-							await tick()
-							triggersState.selectedTriggerIndex = triggerIndex
-						}}
-						small={false}
-					/>
-				</svelte:fragment>
-				{#if $workspaceStore}
-					<Star
-						kind="flow"
-						path={flow.path}
-						{starred}
-						workspace_id={$workspaceStore}
-						on:starred={() => {
-							starred = !starred
-						}}
-					/>
-				{/if}
-				{#if flow?.value?.priority != undefined}
-					<div class="hidden md:block">
-						<HeaderBadge color="blue" variant="outlined" size="xs">
-							{`Priority: ${flow?.value?.priority}`}
-						</HeaderBadge>
-					</div>
-				{/if}
-				{#if flow?.value?.concurrent_limit != undefined && flow?.value?.concurrency_time_window_s != undefined}
-					<div class="hidden md:block">
-						<HeaderBadge color="gray" variant="outlined" size="xs">
-							{`Concurrency limit: ${flow?.value?.concurrent_limit} runs every ${flow?.value?.concurrency_time_window_s}s`}
-						</HeaderBadge>
-					</div>
-				{/if}
-			</DetailPageHeader>
-		</svelte:fragment>
-		<svelte:fragment slot="form">
-			<div class="flex-col flex h-full justify-between">
-				<div class="p-8 w-full max-w-3xl mx-auto gap-2 bg-surface">
-					<div class="mb-1">
-						{#if !emptyString(flow?.description)}
-							<GfmMarkdown md={defaultIfEmptyString(flow?.description, 'No description')} />
+		{#snippet header()}
+			{#if flow}
+				<DetailPageHeader
+					on:seeTriggers={() => {
+						rightPaneSelected = 'triggers'
+					}}
+					{mainButtons}
+					menuItems={getMenuItems(flow, deployUiSettings)}
+					title={defaultIfEmptyString(flow.summary, flow.path)}
+					bind:errorHandlerMuted={flow.ws_error_handler_muted}
+					scriptOrFlowPath={flow.path}
+					errorHandlerKind="flow"
+					tag={flow.tag}
+				>
+					<!-- @migration-task: migrate this slot by hand, `trigger-badges` is an invalid identifier -->
+					<svelte:fragment slot="trigger-badges">
+						<TriggersBadge
+							showOnlyWithCount={true}
+							showDraft={false}
+							{path}
+							newItem={false}
+							isFlow
+							selected={rightPaneSelected == 'triggers'}
+							onSelect={async (triggerIndex: number) => {
+								rightPaneSelected = 'triggers'
+								await tick()
+								triggersState.selectedTriggerIndex = triggerIndex
+							}}
+							small={false}
+						/>
+					</svelte:fragment>
+					{#if $workspaceStore}
+						<Star
+							kind="flow"
+							path={flow.path}
+							{starred}
+							workspace_id={$workspaceStore}
+							on:starred={() => {
+								starred = !starred
+							}}
+						/>
+					{/if}
+					{#if flow?.value?.priority != undefined}
+						<div class="hidden md:block">
+							<HeaderBadge color="blue" variant="outlined" size="xs">
+								{`Priority: ${flow?.value?.priority}`}
+							</HeaderBadge>
+						</div>
+					{/if}
+					{#if flow?.value?.concurrent_limit != undefined && flow?.value?.concurrency_time_window_s != undefined}
+						<div class="hidden md:block">
+							<HeaderBadge color="gray" variant="outlined" size="xs">
+								{`Concurrency limit: ${flow?.value?.concurrent_limit} runs every ${flow?.value?.concurrency_time_window_s}s`}
+							</HeaderBadge>
+						</div>
+					{/if}
+				</DetailPageHeader>
+			{/if}
+		{/snippet}
+		{#snippet form()}
+			{#if flow}
+				<div class="flex-col flex h-full justify-between">
+					<div class="p-8 w-full max-w-3xl mx-auto gap-2 bg-surface">
+						<div class="mb-1">
+							{#if !emptyString(flow?.description)}
+								<GfmMarkdown md={defaultIfEmptyString(flow?.description, 'No description')} />
+							{/if}
+						</div>
+
+						{#if deploymentInProgress}
+							<HeaderBadge color="yellow">
+								<Loader2 size={12} class="inline animate-spin mr-1" />
+								Deployment in progress
+							</HeaderBadge>
 						{/if}
+						{#if flow.lock_error_logs && flow.lock_error_logs != ''}
+							<div class="bg-red-100 dark:bg-red-700 border-l-4 border-red-500 p-4" role="alert">
+								<p class="font-bold">Error deploying this flow</p>
+								<p>
+									This flow has not been deployed successfully because of the following errors:
+								</p>
+								<LogViewer content={flow.lock_error_logs} isLoading={false} tag={undefined} />
+							</div>
+						{/if}
+
+						<div class="flex flex-col align-left">
+							<div class="flex flex-row justify-between">
+								<InputSelectedBadge
+									onReject={() => {
+										savedInputsV2?.resetSelected()
+									}}
+									{inputSelected}
+								/>
+								<Toggle
+									bind:checked={jsonView}
+									label="JSON View"
+									size="xs"
+									options={{
+										right: 'JSON',
+										rightTooltip: 'Fill args from JSON'
+									}}
+									lightMode
+									on:change={(e) => {
+										runForm?.setCode(JSON.stringify(args ?? {}, null, '\t'))
+									}}
+								/>
+							</div>
+
+							{#if flow.schema?.prompt_for_ai !== undefined}
+								<AIFormAssistant
+									instructions={flow.schema?.prompt_for_ai as string}
+									onEditInstructions={() => {
+										goto(`/flows/edit/${flow?.path}`)
+									}}
+									runnableType="flow"
+								/>
+							{/if}
+
+							<RunForm
+								bind:scheduledForStr
+								bind:invisible_to_owner
+								bind:overrideTag
+								viewKeybinding
+								{loading}
+								autofocus
+								detailed={false}
+								bind:isValid
+								runnable={flow}
+								runAction={runFlow}
+								bind:args
+								bind:this={runForm}
+								{jsonView}
+							/>
+						</div>
+
+						<div class="py-10"></div>
+
+						{#if !emptyString(flow.summary)}
+							<div class="mb-2">
+								<span class="!text-tertiary">{flow.path}</span>
+							</div>
+						{/if}
+						<div class="flex flex-row gap-x-2 flex-wrap items-center">
+							<span class="text-sm text-tertiary">
+								Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
+							</span>
+
+							{#if flow.archived}
+								<div class=""></div>
+								<Alert type="error" title="Archived">This flow was archived</Alert>
+							{/if}
+						</div>
 					</div>
-
-					{#if deploymentInProgress}
-						<HeaderBadge color="yellow">
-							<Loader2 size={12} class="inline animate-spin mr-1" />
-							Deployment in progress
-						</HeaderBadge>
-					{/if}
-					{#if flow.lock_error_logs && flow.lock_error_logs != ''}
-						<div class="bg-red-100 dark:bg-red-700 border-l-4 border-red-500 p-4" role="alert">
-							<p class="font-bold">Error deploying this flow</p>
-							<p> This flow has not been deployed successfully because of the following errors: </p>
-							<LogViewer content={flow.lock_error_logs} isLoading={false} tag={undefined} />
-						</div>
-					{/if}
-
-					<div class="flex flex-col align-left">
-						<div class="flex flex-row justify-between">
-							<InputSelectedBadge
-								on:click={() => {
-									savedInputsV2?.resetSelected()
-								}}
-								{inputSelected}
-							/>
-							<Toggle
-								bind:checked={jsonView}
-								label="JSON View"
-								size="xs"
-								options={{
-									right: 'JSON',
-									rightTooltip: 'Fill args from JSON'
-								}}
-								lightMode
-								on:change={(e) => {
-									runForm?.setCode(JSON.stringify(args ?? {}, null, '\t'))
-								}}
-							/>
-						</div>
-
-						<RunForm
-							bind:scheduledForStr
-							bind:invisible_to_owner
-							bind:overrideTag
-							viewKeybinding
-							{loading}
-							autofocus
-							detailed={false}
-							bind:isValid
-							runnable={flow}
-							runAction={runFlow}
-							bind:args
-							bind:this={runForm}
-							{jsonView}
+					<div class="mt-8">
+						<FlowGraphViewer
+							triggerNode={true}
+							download
+							{flow}
+							overflowAuto
+							noSide={true}
+							on:select={(e) => {
+								if (e.detail) {
+									stepDetail = e.detail
+									rightPaneSelected = 'flow_step'
+								} else {
+									stepDetail = undefined
+									rightPaneSelected = 'saved_inputs'
+								}
+							}}
+							on:triggerDetail={(e) => {
+								rightPaneSelected = 'triggers'
+							}}
 						/>
 					</div>
-
-					<div class="py-10"></div>
-
-					{#if !emptyString(flow.summary)}
-						<div class="mb-2">
-							<span class="!text-tertiary">{flow.path}</span>
-						</div>
-					{/if}
-					<div class="flex flex-row gap-x-2 flex-wrap items-center">
-						<span class="text-sm text-tertiary">
-							Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
-						</span>
-
-						{#if flow.archived}
-							<div class=""></div>
-							<Alert type="error" title="Archived">This flow was archived</Alert>
-						{/if}
-					</div>
 				</div>
-				<div class="mt-8">
-					<FlowGraphViewer
-						triggerNode={true}
-						download
-						{flow}
-						overflowAuto
-						noSide={true}
-						on:select={(e) => {
-							if (e.detail) {
-								stepDetail = e.detail
-								rightPaneSelected = 'flow_step'
-							} else {
-								stepDetail = undefined
-								rightPaneSelected = 'saved_inputs'
-							}
-						}}
-						on:triggerDetail={(e) => {
-							rightPaneSelected = 'triggers'
-						}}
-					/>
-				</div>
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="save_inputs">
+			{/if}
+		{/snippet}
+		{#snippet save_inputs()}
 			<SavedInputsV2
 				bind:this={savedInputsV2}
 				schema={flow?.schema}
@@ -604,35 +622,29 @@
 					args = nargs
 				}}
 			/>
-		</svelte:fragment>
-		<svelte:fragment slot="schema">
-			<div class="p-1 relative">
-				<button
-					on:click={() => copyToClipboard(JSON.stringify(flow?.schema, null, 4))}
-					class="absolute top-2 right-2"
-				>
-					<ClipboardCopy size={14} />
-				</button>
-				<Highlight language={json} code={JSON.stringify(flow?.schema, null, 4)} />
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="flow_step">
-			{#if stepDetail}
-				<FlowGraphViewerStep schema={flow.schema} {stepDetail} />
+		{/snippet}
+
+		{#snippet flow_step()}
+			{#if flow}
+				{#if stepDetail}
+					<FlowGraphViewerStep schema={flow.schema} {stepDetail} />
+				{/if}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="triggers">
-			<TriggersEditor
-				initialPath={flow.path}
-				currentPath={flow.path}
-				noEditor={true}
-				newItem={false}
-				isFlow={true}
-				schema={flow.schema}
-				isDeployed={true}
-				noCapture={true}
-				isEditor={false}
-			/>
-		</svelte:fragment>
+		{/snippet}
+		{#snippet triggers()}
+			{#if flow}
+				<TriggersEditor
+					initialPath={flow.path}
+					currentPath={flow.path}
+					noEditor={true}
+					newItem={false}
+					isFlow={true}
+					schema={flow.schema}
+					isDeployed={true}
+					noCapture={true}
+					isEditor={false}
+				/>
+			{/if}
+		{/snippet}
 	</DetailPageLayout>
 {/if}
diff --git a/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
index 2fd36a1cc1..729c615cbf 100644
--- a/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		GcpTriggerService,
 		WorkspaceService,
@@ -44,12 +46,12 @@
 
 	type TriggerD = GcpTrigger & { canWrite: boolean }
 
-	let triggers: TriggerD[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
-	let isDeleting = false
+	let triggers: TriggerD[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
+	let isDeleting = $state(false)
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
 			deployUiSettings = ALL_DEPLOYABLE
@@ -112,32 +114,37 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
-	}
-	let gcpTriggerEditor: GcpTriggerEditor
+	})
+	let gcpTriggerEditor: GcpTriggerEditor | undefined = $state()
 
-	let filteredItems: (TriggerD & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
-	let deleteSubscription = false
-	let deleteSubscriptionCallback: (() => Promise<void>) | undefined = undefined
-	let deleteGcpTriggerCallback: (() => Promise<void>) | undefined = undefined
-	let subscriptionToDelete: string = ''
-	let currentTopic: string = ''
+	let filteredItems: (TriggerD & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let preFilteredItems: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
+	let deleteSubscription = $state(false)
+	let deleteSubscriptionCallback: (() => Promise<void>) | undefined = $state(undefined)
+	let deleteGcpTriggerCallback: (() => Promise<void>) | undefined = $state(undefined)
+	let subscriptionToDelete: string = $state('')
+	let currentTopic: string = $state('')
 	const TRIGGER_PATH_KIND_FILTER_SETTING = 'filter_path_of'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING) as 'trigger' | 'script_flow') ?? 'trigger'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	run(() => {
+		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	run(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: TriggerD,
@@ -161,28 +168,32 @@
 		}
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? selectedFilterKind === 'trigger'
-				? triggers?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+	run(() => {
+		preFilteredItems =
+			ownerFilter != undefined
+				? selectedFilterKind === 'trigger'
+					? triggers?.filter(
+							(x) =>
+								x.path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+					: triggers?.filter(
+							(x) =>
+								x.script_path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+				: triggers?.filter((x) =>
+						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
 					)
-				: triggers?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-					)
-			: triggers?.filter((x) =>
-					filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'trigger'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -190,8 +201,11 @@
 			: Array.from(
 					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	run(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders) {
 		setQuery(
@@ -222,7 +236,9 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders)
+	run(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders)
+	})
 </script>
 
 <ConfirmationModal
@@ -274,7 +290,7 @@
 
 <CenteredPage>
 	<PageHeader title="GCP Pub/Sub triggers" tooltip="GCP Pub/Sub trigger">
-		<Button size="md" startIcon={{ icon: Plus }} on:click={() => gcpTriggerEditor.openNew(false)}>
+		<Button size="md" startIcon={{ icon: Plus }} on:click={() => gcpTriggerEditor?.openNew(false)}>
 			New&nbsp;GCP Pub/Sub trigger
 		</Button>
 	</PageHeader>
@@ -289,15 +305,17 @@
 			<input type="text" placeholder="Search triggers" bind:value={filter} class="search-item" />
 			<div class="flex flex-row items-center gap-2 mt-6">
 				<div class="text-sm shrink-0"> Filter by path of </div>
-				<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-					<ToggleButton
-						small
-						value="trigger"
-						label="GCP Pub/Sub trigger"
-						icon={GoogleCloudIcon}
-						{item}
-					/>
-					<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+				<ToggleButtonGroup bind:selected={selectedFilterKind}>
+					{#snippet children({ item })}
+						<ToggleButton
+							small
+							value="trigger"
+							label="GCP Pub/Sub trigger"
+							icon={GoogleCloudIcon}
+							{item}
+						/>
+						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 			<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
@@ -336,7 +354,7 @@
 
 							<a
 								href="#{path}"
-								on:click={() => gcpTriggerEditor?.openEdit(path, is_flow)}
+								onclick={() => gcpTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
 								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
@@ -362,17 +380,19 @@
 												/>
 												<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 											</span>
-											<div slot="text">
-												{#if enabled}
-													{#if !server_id}
-														GCP Pub/Sub trigger is starting...
+											{#snippet text()}
+												<div>
+													{#if enabled}
+														{#if !server_id}
+															GCP Pub/Sub trigger is starting...
+														{:else}
+															Could not connect to GCP Pub/Sub{error ? ': ' + error : ''}
+														{/if}
 													{:else}
-														Could not connect to GCP Pub/Sub{error ? ': ' + error : ''}
+														Disabled because of an error: {error}
 													{/if}
-												{:else}
-													Disabled because of an error: {error}
-												{/if}
-											</div>
+												</div>
+											{/snippet}
 										</Popover>
 									{:else if enabled}
 										<Popover notClickable>
@@ -382,9 +402,11 @@
 													size={12}
 												/>
 											</span>
-											<div slot="text">
-												Connected to GCP Pub/Sub{!server_id ? ' (shutting down...)' : ''}</div
-											>
+											{#snippet text()}
+												<div>
+													Connected to GCP Pub/Sub{!server_id ? ' (shutting down...)' : ''}</div
+												>
+											{/snippet}
 										</Popover>
 									{/if}
 								</div>
@@ -476,7 +498,7 @@
 														displayName: 'Deploy to prod/staging',
 														icon: FileUp,
 														action: () => {
-															deploymentDrawer.openDrawer(path, 'trigger', {
+															deploymentDrawer?.openDrawer(path, 'trigger', {
 																triggers: {
 																	kind: 'gcp'
 																}
@@ -494,7 +516,7 @@
 											displayName: canWrite ? 'Share' : 'See Permissions',
 											icon: Share,
 											action: () => {
-												shareModal.openDrawer(path, 'gcp_trigger')
+												shareModal?.openDrawer(path, 'gcp_trigger')
 											}
 										}
 									]}
@@ -519,7 +541,7 @@
 	{#if items && items?.length > 15 && nbDisplayed < items.length}
 		<span class="text-xs"
 			>{nbDisplayed} items out of {items.length}
-			<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+			<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 		>
 	{/if}
 </CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
index deb7e2993b..047eaa00be 100644
--- a/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		KafkaTriggerService,
 		WorkspaceService,
@@ -47,11 +49,11 @@
 
 	type TriggerW = KafkaTrigger & { canWrite: boolean }
 
-	let triggers: TriggerW[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let triggers: TriggerW[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -116,28 +118,33 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
-	}
-	let kafkaTriggerEditor: KafkaTriggerEditor
+	})
+	let kafkaTriggerEditor: KafkaTriggerEditor | undefined = $state()
 
-	let filteredItems: (TriggerW & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
+	let filteredItems: (TriggerW & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let preFilteredItems: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
 
 	const TRIGGER_PATH_KIND_FILTER_SETTING = 'filter_path_of'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING) as 'trigger' | 'script_flow') ?? 'trigger'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	run(() => {
+		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	run(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: TriggerW,
@@ -161,28 +168,32 @@
 		}
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? selectedFilterKind === 'trigger'
-				? triggers?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+	run(() => {
+		preFilteredItems =
+			ownerFilter != undefined
+				? selectedFilterKind === 'trigger'
+					? triggers?.filter(
+							(x) =>
+								x.path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+					: triggers?.filter(
+							(x) =>
+								x.script_path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+				: triggers?.filter((x) =>
+						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
 					)
-				: triggers?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-					)
-			: triggers?.filter((x) =>
-					filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'trigger'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -190,8 +201,11 @@
 			: Array.from(
 					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	run(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders) {
 		setQuery(
@@ -223,7 +237,9 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders)
+	run(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders)
+	})
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
@@ -250,7 +266,7 @@
 			<Button
 				size="md"
 				startIcon={{ icon: Plus }}
-				on:click={() => kafkaTriggerEditor.openNew(false)}
+				on:click={() => kafkaTriggerEditor?.openNew(false)}
 			>
 				New&nbsp;Kafka trigger
 			</Button>
@@ -272,9 +288,11 @@
 				/>
 				<div class="flex flex-row items-center gap-2 mt-6">
 					<div class="text-sm shrink-0"> Filter by path of </div>
-					<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-						<ToggleButton small value="trigger" label="Kafka trigger" icon={KafkaIcon} {item} />
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					<ToggleButtonGroup bind:selected={selectedFilterKind}>
+						{#snippet children({ item })}
+							<ToggleButton small value="trigger" label="Kafka trigger" icon={KafkaIcon} {item} />
+							<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 				<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
@@ -313,7 +331,7 @@
 
 								<a
 									href="#{path}"
-									on:click={() => kafkaTriggerEditor?.openEdit(path, is_flow)}
+									onclick={() => kafkaTriggerEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
 									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
@@ -347,17 +365,19 @@
 												/>
 												<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 											</span>
-											<div slot="text">
-												{#if enabled}
-													{#if !server_id}
-														Consumer is starting...
+											{#snippet text()}
+												<div>
+													{#if enabled}
+														{#if !server_id}
+															Consumer is starting...
+														{:else}
+															Consumer is not connected{error ? ': ' + error : ''}
+														{/if}
 													{:else}
-														Consumer is not connected{error ? ': ' + error : ''}
+														Consumer was disabled because of an error: {error}
 													{/if}
-												{:else}
-													Consumer was disabled because of an error: {error}
-												{/if}
-											</div>
+												</div>
+											{/snippet}
 										</Popover>
 									{:else if enabled}
 										<Popover notClickable>
@@ -367,7 +387,9 @@
 													size={12}
 												/>
 											</span>
-											<div slot="text"> Consumer is connected </div>
+											{#snippet text()}
+												<div> Consumer is connected </div>
+											{/snippet}
 										</Popover>
 									{/if}
 								</div>
@@ -428,7 +450,7 @@
 															displayName: 'Deploy to prod/staging',
 															icon: FileUp,
 															action: () => {
-																deploymentDrawer.openDrawer(path, 'trigger', {
+																deploymentDrawer?.openDrawer(path, 'trigger', {
 																	triggers: {
 																		kind: 'kafka'
 																	}
@@ -446,7 +468,7 @@
 												displayName: canWrite ? 'Share' : 'See Permissions',
 												icon: Share,
 												action: () => {
-													shareModal.openDrawer(path, 'kafka_trigger')
+													shareModal?.openDrawer(path, 'kafka_trigger')
 												}
 											}
 										]}
@@ -471,7 +493,7 @@
 		{#if items && items?.length > 15 && nbDisplayed < items.length}
 			<span class="text-xs"
 				>{nbDisplayed} items out of {items.length}
-				<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+				<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 			>
 		{/if}
 	</CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
index cd3c331f66..c47efd26a1 100644
--- a/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		MqttTriggerService,
 		WorkspaceService,
@@ -41,11 +43,11 @@
 
 	type TriggerM = MqttTrigger & { canWrite: boolean }
 
-	let triggers: TriggerM[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let triggers: TriggerM[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -110,28 +112,33 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
-	}
-	let mqttTriggerEditor: MqttTriggerEditor
+	})
+	let mqttTriggerEditor: MqttTriggerEditor | undefined = $state()
 
-	let filteredItems: (TriggerM & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
+	let filteredItems: (TriggerM & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let preFilteredItems: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
 
 	const TRIGGER_PATH_KIND_FILTER_SETTING = 'filter_path_of'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING) as 'trigger' | 'script_flow') ?? 'trigger'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	run(() => {
+		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	run(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: TriggerM,
@@ -155,28 +162,32 @@
 		}
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? selectedFilterKind === 'trigger'
-				? triggers?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+	run(() => {
+		preFilteredItems =
+			ownerFilter != undefined
+				? selectedFilterKind === 'trigger'
+					? triggers?.filter(
+							(x) =>
+								x.path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+					: triggers?.filter(
+							(x) =>
+								x.script_path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+				: triggers?.filter((x) =>
+						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
 					)
-				: triggers?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-					)
-			: triggers?.filter((x) =>
-					filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'trigger'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -184,8 +195,11 @@
 			: Array.from(
 					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	run(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders) {
 		setQuery(
@@ -217,7 +231,9 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders)
+	run(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders)
+	})
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
@@ -235,7 +251,7 @@
 		title="MQTT triggers"
 		tooltip="Windmill can connect to an MQTT broker, subscribe to specific topics, and trigger scripts or flows based on those topics."
 	>
-		<Button size="md" startIcon={{ icon: Plus }} on:click={() => mqttTriggerEditor.openNew(false)}>
+		<Button size="md" startIcon={{ icon: Plus }} on:click={() => mqttTriggerEditor?.openNew(false)}>
 			New&nbsp;MQTT trigger
 		</Button>
 	</PageHeader>
@@ -256,9 +272,11 @@
 			/>
 			<div class="flex flex-row items-center gap-2 mt-6">
 				<div class="text-sm shrink-0"> Filter by path of </div>
-				<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-					<ToggleButton small value="trigger" label="MQTT trigger" icon={MqttIcon} {item} />
-					<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+				<ToggleButtonGroup bind:selected={selectedFilterKind}>
+					{#snippet children({ item })}
+						<ToggleButton small value="trigger" label="MQTT trigger" icon={MqttIcon} {item} />
+						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 			<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
@@ -297,7 +315,7 @@
 
 							<a
 								href="#{path}"
-								on:click={() => mqttTriggerEditor?.openEdit(path, is_flow)}
+								onclick={() => mqttTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
 								<div class="text-secondary text-xs truncate text-left font-light">
@@ -322,26 +340,30 @@
 											/>
 											<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 										</span>
-										<div slot="text">
-											{#if enabled}
-												{#if !server_id}
-													MQTT trigger is starting...
+										{#snippet text()}
+											<div>
+												{#if enabled}
+													{#if !server_id}
+														MQTT trigger is starting...
+													{:else}
+														MQTT trigger is not connected{error ? ': ' + error : ''}
+													{/if}
 												{:else}
-													MQTT trigger is not connected{error ? ': ' + error : ''}
+													MQTT trigger was disabled because of an error: {error}
 												{/if}
-											{:else}
-												MQTT trigger was disabled because of an error: {error}
-											{/if}
-										</div>
+											</div>
+										{/snippet}
 									</Popover>
 								{:else if enabled}
 									<Popover notClickable>
 										<span class="flex h-4 w-4">
 											<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
 										</span>
-										<div slot="text">
-											MQTT trigger is connected{!server_id ? ' (shutting down...)' : ''}
-										</div>
+										{#snippet text()}
+											<div>
+												MQTT trigger is connected{!server_id ? ' (shutting down...)' : ''}
+											</div>
+										{/snippet}
 									</Popover>
 								{/if}
 							</div>
@@ -402,7 +424,7 @@
 														displayName: 'Deploy to prod/staging',
 														icon: FileUp,
 														action: () => {
-															deploymentDrawer.openDrawer(path, 'trigger', {
+															deploymentDrawer?.openDrawer(path, 'trigger', {
 																triggers: {
 																	kind: 'mqtt'
 																}
@@ -420,7 +442,7 @@
 											displayName: canWrite ? 'Share' : 'See Permissions',
 											icon: Share,
 											action: () => {
-												shareModal.openDrawer(path, 'mqtt_trigger')
+												shareModal?.openDrawer(path, 'mqtt_trigger')
 											}
 										}
 									]}
@@ -445,7 +467,7 @@
 	{#if items && items?.length > 15 && nbDisplayed < items.length}
 		<span class="text-xs"
 			>{nbDisplayed} items out of {items.length}
-			<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+			<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 		>
 	{/if}
 </CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
index d0f0c2fe96..acfc9bbf1b 100644
--- a/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		NatsTriggerService,
 		WorkspaceService,
@@ -47,11 +49,11 @@
 
 	type TriggerW = NatsTrigger & { canWrite: boolean }
 
-	let triggers: TriggerW[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let triggers: TriggerW[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -115,28 +117,33 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
-	}
-	let natsTriggerEditor: NatsTriggerEditor
+	})
+	let natsTriggerEditor: NatsTriggerEditor | undefined = $state()
 
-	let filteredItems: (TriggerW & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
+	let filteredItems: (TriggerW & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let preFilteredItems: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
 
 	const TRIGGER_PATH_KIND_FILTER_SETTING = 'filter_path_of'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING) as 'trigger' | 'script_flow') ?? 'trigger'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	run(() => {
+		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	run(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: TriggerW,
@@ -160,28 +167,32 @@
 		}
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? selectedFilterKind === 'trigger'
-				? triggers?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+	run(() => {
+		preFilteredItems =
+			ownerFilter != undefined
+				? selectedFilterKind === 'trigger'
+					? triggers?.filter(
+							(x) =>
+								x.path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+					: triggers?.filter(
+							(x) =>
+								x.script_path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+				: triggers?.filter((x) =>
+						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
 					)
-				: triggers?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-					)
-			: triggers?.filter((x) =>
-					filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'trigger'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -189,8 +200,11 @@
 			: Array.from(
 					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	run(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders) {
 		setQuery(
@@ -222,7 +236,9 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders)
+	run(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders)
+	})
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
@@ -249,7 +265,7 @@
 			<Button
 				size="md"
 				startIcon={{ icon: Plus }}
-				on:click={() => natsTriggerEditor.openNew(false)}
+				on:click={() => natsTriggerEditor?.openNew(false)}
 			>
 				New&nbsp;NATS trigger
 			</Button>
@@ -271,9 +287,11 @@
 				/>
 				<div class="flex flex-row items-center gap-2 mt-6">
 					<div class="text-sm shrink-0"> Filter by path of </div>
-					<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-						<ToggleButton small value="trigger" label="NATS trigger" icon={NatsIcon} {item} />
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					<ToggleButtonGroup bind:selected={selectedFilterKind}>
+						{#snippet children({ item })}
+							<ToggleButton small value="trigger" label="NATS trigger" icon={NatsIcon} {item} />
+							<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 				<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
@@ -312,7 +330,7 @@
 
 								<a
 									href="#{path}"
-									on:click={() => natsTriggerEditor?.openEdit(path, is_flow)}
+									onclick={() => natsTriggerEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
 									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
@@ -346,17 +364,19 @@
 												/>
 												<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 											</span>
-											<div slot="text">
-												{#if enabled}
-													{#if !server_id}
-														Consumer is starting...
+											{#snippet text()}
+												<div>
+													{#if enabled}
+														{#if !server_id}
+															Consumer is starting...
+														{:else}
+															Consumer is not connected{error ? ': ' + error : ''}
+														{/if}
 													{:else}
-														Consumer is not connected{error ? ': ' + error : ''}
+														Consumer was disabled because of an error: {error}
 													{/if}
-												{:else}
-													Consumer was disabled because of an error: {error}
-												{/if}
-											</div>
+												</div>
+											{/snippet}
 										</Popover>
 									{:else if enabled}
 										<Popover notClickable>
@@ -366,7 +386,9 @@
 													size={12}
 												/>
 											</span>
-											<div slot="text"> Consumer is connected </div>
+											{#snippet text()}
+												<div> Consumer is connected </div>
+											{/snippet}
 										</Popover>
 									{/if}
 								</div>
@@ -427,7 +449,7 @@
 															displayName: 'Deploy to prod/staging',
 															icon: FileUp,
 															action: () => {
-																deploymentDrawer.openDrawer(path, 'trigger', {
+																deploymentDrawer?.openDrawer(path, 'trigger', {
 																	triggers: {
 																		kind: 'nats'
 																	}
@@ -445,7 +467,7 @@
 												displayName: canWrite ? 'Share' : 'See Permissions',
 												icon: Share,
 												action: () => {
-													shareModal.openDrawer(path, 'nats_trigger')
+													shareModal?.openDrawer(path, 'nats_trigger')
 												}
 											}
 										]}
@@ -470,7 +492,7 @@
 		{#if items && items?.length > 15 && nbDisplayed < items.length}
 			<span class="text-xs"
 				>{nbDisplayed} items out of {items.length}
-				<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+				<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 			>
 		{/if}
 	</CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
index b6b567eea7..600110ddff 100644
--- a/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		PostgresTriggerService,
 		WorkspaceService,
@@ -41,11 +43,11 @@
 
 	type TriggerD = PostgresTrigger & { canWrite: boolean }
 
-	let triggers: TriggerD[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let triggers: TriggerD[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -109,37 +111,42 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
-	}
-	let postgresTriggerEditor: PostgresTriggerEditor
+	})
+	let postgresTriggerEditor: PostgresTriggerEditor | undefined = $state()
 
-	let filteredItems: (TriggerD & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
+	let filteredItems: (TriggerD & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let preFilteredItems: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
 
-	let isDeleting: boolean = false
-	let deleteReplicationSlot: boolean = false
-	let deletePublication: boolean = false
-	let replicationSlotToDelete = ''
-	let publicationToDelete = ''
-	let deleteReplicationSlotCallback: (() => Promise<string>) | undefined = undefined
-	let deletePublicationCallback: (() => Promise<string>) | undefined = undefined
-	let deletePostgresTriggerCallback: (() => Promise<string>) | undefined = undefined
+	let isDeleting: boolean = $state(false)
+	let deleteReplicationSlot: boolean = $state(false)
+	let deletePublication: boolean = $state(false)
+	let replicationSlotToDelete = $state('')
+	let publicationToDelete = $state('')
+	let deleteReplicationSlotCallback: (() => Promise<string>) | undefined = $state(undefined)
+	let deletePublicationCallback: (() => Promise<string>) | undefined = $state(undefined)
+	let deletePostgresTriggerCallback: (() => Promise<string>) | undefined = $state(undefined)
 
 	const TRIGGER_PATH_KIND_FILTER_SETTING = 'filter_path_of'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING) as 'trigger' | 'script_flow') ?? 'trigger'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	run(() => {
+		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	run(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: TriggerD,
@@ -163,28 +170,32 @@
 		}
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? selectedFilterKind === 'trigger'
-				? triggers?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+	run(() => {
+		preFilteredItems =
+			ownerFilter != undefined
+				? selectedFilterKind === 'trigger'
+					? triggers?.filter(
+							(x) =>
+								x.path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+					: triggers?.filter(
+							(x) =>
+								x.script_path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+				: triggers?.filter((x) =>
+						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
 					)
-				: triggers?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-					)
-			: triggers?.filter((x) =>
-					filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'trigger'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -192,8 +203,11 @@
 			: Array.from(
 					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	run(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders) {
 		setQuery(
@@ -225,7 +239,9 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders)
+	run(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders)
+	})
 </script>
 
 <ConfirmationModal
@@ -304,7 +320,7 @@
 		<Button
 			size="md"
 			startIcon={{ icon: Plus }}
-			on:click={() => postgresTriggerEditor.openNew(false)}
+			on:click={() => postgresTriggerEditor?.openNew(false)}
 		>
 			New&nbsp;Postgres trigger
 		</Button>
@@ -326,9 +342,11 @@
 			/>
 			<div class="flex flex-row items-center gap-2 mt-6">
 				<div class="text-sm shrink-0"> Filter by path of </div>
-				<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-					<ToggleButton small value="trigger" label="Postgres trigger" icon={Database} {item} />
-					<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+				<ToggleButtonGroup bind:selected={selectedFilterKind}>
+					{#snippet children({ item })}
+						<ToggleButton small value="trigger" label="Postgres trigger" icon={Database} {item} />
+						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 			<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
@@ -367,7 +385,7 @@
 
 							<a
 								href="#{path}"
-								on:click={() => postgresTriggerEditor?.openEdit(path, is_flow)}
+								onclick={() => postgresTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
 								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
@@ -395,26 +413,28 @@
 											/>
 											<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 										</span>
-										<div slot="text">
-											{#if enabled}
-												{#if !server_id}
-													Postgres trigger is starting...
+										{#snippet text()}
+											<div>
+												{#if enabled}
+													{#if !server_id}
+														Postgres trigger is starting...
+													{:else}
+														Could not connect to database{error ? ': ' + error : ''}
+													{/if}
 												{:else}
-													Could not connect to database{error ? ': ' + error : ''}
+													Disabled because of an error: {error}
 												{/if}
-											{:else}
-												Disabled because of an error: {error}
-											{/if}
-										</div>
+											</div>
+										{/snippet}
 									</Popover>
 								{:else if enabled}
 									<Popover notClickable>
 										<span class="flex h-4 w-4">
 											<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
 										</span>
-										<div slot="text">
-											Connected to database{!server_id ? ' (shutting down...)' : ''}</div
-										>
+										{#snippet text()}
+											<div> Connected to database{!server_id ? ' (shutting down...)' : ''}</div>
+										{/snippet}
 									</Popover>
 								{/if}
 							</div>
@@ -501,7 +521,7 @@
 														displayName: 'Deploy to prod/staging',
 														icon: FileUp,
 														action: () => {
-															deploymentDrawer.openDrawer(path, 'trigger', {
+															deploymentDrawer?.openDrawer(path, 'trigger', {
 																triggers: {
 																	kind: 'postgres'
 																}
@@ -519,7 +539,7 @@
 											displayName: canWrite ? 'Share' : 'See Permissions',
 											icon: Share,
 											action: () => {
-												shareModal.openDrawer(path, 'postgres_trigger')
+												shareModal?.openDrawer(path, 'postgres_trigger')
 											}
 										}
 									]}
@@ -544,7 +564,7 @@
 	{#if items && items?.length > 15 && nbDisplayed < items.length}
 		<span class="text-xs"
 			>{nbDisplayed} items out of {items.length}
-			<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+			<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 		>
 	{/if}
 </CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 5816ba85f9..85c3637722 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -55,7 +55,7 @@
 		Share,
 		Trash
 	} from 'lucide-svelte'
-	import { onMount } from 'svelte'
+	import { onMount, untrack } from 'svelte'
 	import autosize from '$lib/autosize'
 	import EditableSchemaWrapper from '$lib/components/schema/EditableSchemaWrapper.svelte'
 	import ResourceEditorDrawer from '$lib/components/ResourceEditorDrawer.svelte'
@@ -66,95 +66,53 @@
 	type ResourceW = ListableResource & { canWrite: boolean; marked?: string }
 	type ResourceTypeW = ResourceType & { canWrite: boolean }
 
-	let cacheResources: ResourceW[] | undefined
-	let stateResources: ResourceW[] | undefined
-	let resources: ResourceW[] | undefined
-	let resourceTypes: ResourceTypeW[] | undefined
+	let cacheResources: ResourceW[] | undefined = $state()
+	let stateResources: ResourceW[] | undefined = $state()
+	let resources: ResourceW[] | undefined = $state()
+	let resourceTypes: ResourceTypeW[] | undefined = $state()
 
-	let filteredItems: (ResourceW & { marked?: string })[] | undefined = undefined
+	let filteredItems: (ResourceW & { marked?: string })[] | undefined = $state(undefined) as
+		| (ResourceW & { marked?: string })[]
+		| undefined
 
-	let resourceTypeViewer: Drawer
-	let resourceTypeViewerObj = {
+	let resourceTypeViewer: Drawer | undefined = $state(undefined)
+	let resourceTypeViewerObj = $state({
 		rt: '',
 		description: '',
 		schema: emptySchema(),
 		formatExtension: undefined as string | undefined
-	}
+	})
 
-	let resourceTypeDrawer: Drawer
-	let editResourceTypeDrawer: Drawer
-	let newResourceType = {
+	let resourceTypeDrawer: Drawer | undefined = $state(undefined)
+	let editResourceTypeDrawer: Drawer | undefined = $state(undefined)
+	let newResourceType = $state({
 		name: '',
 		schema: emptySchema(),
 		description: '',
 		formatExtension: undefined
-	}
-	let isNewResourceTypeNameValid: boolean
+	})
+	let isNewResourceTypeNameValid: boolean = $state(false)
 
-	let editResourceType = {
+	let editResourceType = $state({
 		name: '',
 		schema: emptySchema(),
 		description: '',
 		formatExtension: undefined as string | undefined
-	}
-	let resourceEditor: ResourceEditorDrawer | undefined
-	let shareModal: ShareModal
-	let appConnect: AppConnect
-	let supabaseConnect: SupabaseConnect
-	let deleteConfirmedCallback: (() => void) | undefined = undefined
-	let loading = {
+	})
+	let resourceEditor: ResourceEditorDrawer | undefined = $state(undefined)
+	let shareModal: ShareModal | undefined = $state(undefined)
+	let appConnect: AppConnect | undefined = $state(undefined)
+	let supabaseConnect: SupabaseConnect | undefined = $state(undefined)
+	let deleteConfirmedCallback: (() => void) | undefined = $state(undefined)
+	let loading = $state({
 		resources: true,
 		types: true
-	}
+	})
 
-	$: owners = Array.from(
-		new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-	).sort()
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
 
-	$: types = Array.from(new Set(filteredItems?.map((x) => x.resource_type))).sort()
-
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
-
-	let typeFilter: string | undefined = undefined
-
-	$: currentResources =
-		tab == 'cache' ? cacheResources : tab == 'states' ? stateResources : resources
-
-	$: preFilteredItemsOwners =
-		ownerFilter == undefined
-			? currentResources
-			: currentResources?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
-
-	$: preFilteredType =
-		typeFilter == undefined
-			? preFilteredItemsOwners?.filter((x) => {
-					return tab === 'workspace'
-						? x.resource_type !== 'app_theme' &&
-								x.resource_type !== 'state' &&
-								x.resource_type !== 'cache'
-						: tab === 'states'
-							? x.resource_type === 'state'
-							: tab === 'cache'
-								? x.resource_type === 'cache'
-								: tab === 'theme'
-									? x.resource_type === 'app_theme'
-									: true
-				})
-			: preFilteredItemsOwners?.filter((x) => {
-					return (
-						x.resource_type === typeFilter &&
-						(tab === 'workspace'
-							? x.resource_type !== 'app_theme' &&
-								x.resource_type !== 'state' &&
-								x.resource_type !== 'cache'
-							: true)
-					)
-				})
+	let typeFilter: string | undefined = $state(undefined)
 
 	async function loadResources(): Promise<void> {
 		resources = await loadResourceInternal(undefined, 'cache,state')
@@ -226,7 +184,7 @@
 				format_extension: newResourceType.formatExtension
 			}
 		})
-		resourceTypeDrawer.closeDrawer?.()
+		resourceTypeDrawer?.closeDrawer?.()
 		sendUserToast('Resource type created')
 		loadResourceTypes()
 		$resourceTypesStore = undefined
@@ -241,7 +199,7 @@
 				description: editResourceType.description
 			}
 		})
-		editResourceTypeDrawer.closeDrawer?.()
+		editResourceTypeDrawer?.closeDrawer?.()
 		sendUserToast('Resource type updated')
 		loadResourceTypes()
 	}
@@ -271,7 +229,7 @@
 		}
 		validateResourceTypeName()
 
-		resourceTypeDrawer.openDrawer?.()
+		resourceTypeDrawer?.openDrawer?.()
 	}
 
 	async function startEditResourceType(name: string) {
@@ -282,29 +240,22 @@
 			description: rt.description ?? '',
 			formatExtension: rt.format_extension
 		}
-		editResourceTypeDrawer.openDrawer?.()
-	}
-
-	$: {
-		if ($workspaceStore && $userStore) {
-			loadResources()
-			loadResourceTypes()
-		}
+		editResourceTypeDrawer?.openDrawer?.()
 	}
 
 	onMount(() => {
 		const callback = $page.url.searchParams.get('callback')
 		if (callback == 'supabase_wizard') {
-			supabaseConnect.open?.()
+			supabaseConnect?.open?.()
 		}
 
 		const connect_app = $page.url.searchParams.get('connect_app')
 		if (connect_app) {
 			const rt = connect_app ?? undefined
 			if (rt == 'undefined') {
-				appConnect.open?.()
+				appConnect?.open?.()
 			} else {
-				appConnect.open?.(rt)
+				appConnect?.open?.(rt)
 			}
 		}
 	})
@@ -313,11 +264,16 @@
 		inferrer?.openDrawer?.()
 	}
 
-	let disableCustomPrefix = false
-	let tab: 'workspace' | 'types' | 'states' | 'cache' | 'theme' = 'workspace'
+	let disableCustomPrefix = $state(false)
+	let tab: 'workspace' | 'types' | 'states' | 'cache' | 'theme' = $state('workspace') as
+		| 'workspace'
+		| 'types'
+		| 'states'
+		| 'cache'
+		| 'theme'
 
-	let inferrer: Drawer | undefined = undefined
-	let inferrerJson = ''
+	let inferrer: Drawer | undefined = $state(undefined)
+	let inferrerJson = $state('')
 
 	function inferJson(): void {
 		try {
@@ -332,7 +288,7 @@
 		}
 		inferrer?.closeDrawer?.()
 	}
-	let deploymentDrawer: DeployWorkspaceDrawer
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state(undefined)
 
 	async function reload() {
 		loading = {
@@ -353,7 +309,7 @@
 		}
 	}
 
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -382,15 +338,82 @@
 
 	let resourceNameToFileExtMap: any = undefined
 
+	let loadingResourceNameToFileExt = false
 	async function resourceNameToFileExt(resourceName: string) {
-		if (resourceNameToFileExtMap == undefined) {
-			resourceNameToFileExtMap = await ResourceService.fileResourceTypeToFileExtMap({
-				workspace: $workspaceStore!
-			})
+		if (resourceNameToFileExtMap == undefined && !loadingResourceNameToFileExt) {
+			loadingResourceNameToFileExt = true
+			try {
+				resourceNameToFileExtMap = await ResourceService.fileResourceTypeToFileExtMap({
+					workspace: $workspaceStore!
+				})
+			} catch (e) {
+				console.error('Error loading resourceNameToFileExtMap', e)
+			} finally {
+				loadingResourceNameToFileExt = false
+			}
+		} else {
+			while (resourceNameToFileExtMap == undefined) {
+				console.log('waiting for resourceNameToFileExtMap')
+				await new Promise((resolve) => setTimeout(resolve, 100))
+			}
 		}
 
 		return resourceNameToFileExtMap[resourceName]
 	}
+
+	let owners = $derived(
+		Array.from(
+			new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
+		).sort()
+	)
+	let types = $derived(Array.from(new Set(filteredItems?.map((x) => x.resource_type))).sort())
+	$effect(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
+	let currentResources = $derived(
+		tab == 'cache' ? cacheResources : tab == 'states' ? stateResources : resources
+	)
+	let preFilteredItemsOwners = $derived(
+		ownerFilter == undefined
+			? currentResources
+			: currentResources?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
+	)
+	let preFilteredType = $derived(
+		typeFilter == undefined
+			? preFilteredItemsOwners?.filter((x) => {
+					return tab === 'workspace'
+						? x.resource_type !== 'app_theme' &&
+								x.resource_type !== 'state' &&
+								x.resource_type !== 'cache'
+						: tab === 'states'
+							? x.resource_type === 'state'
+							: tab === 'cache'
+								? x.resource_type === 'cache'
+								: tab === 'theme'
+									? x.resource_type === 'app_theme'
+									: true
+				})
+			: preFilteredItemsOwners?.filter((x) => {
+					return (
+						x.resource_type === typeFilter &&
+						(tab === 'workspace'
+							? x.resource_type !== 'app_theme' &&
+								x.resource_type !== 'state' &&
+								x.resource_type !== 'cache'
+							: true)
+					)
+				})
+	)
+	$effect(() => {
+		if ($workspaceStore && $userStore) {
+			untrack(() => {
+				loadResources()
+				loadResourceTypes()
+			})
+		}
+	})
 </script>
 
 <ConfirmationModal
@@ -429,9 +452,9 @@
 			class="h-full"
 			fixedOverflowWidgets={false}
 		/>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button size="sm" on:click={inferJson}>Infer</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
 
@@ -466,9 +489,9 @@
 
 <Drawer bind:this={editResourceTypeDrawer} size="800px">
 	<DrawerContent title="Edit resource type" on:close={editResourceTypeDrawer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button startIcon={{ icon: Save }} on:click={updateResourceType}>Update</Button>
-		</svelte:fragment>
+		{/snippet}
 		<div class="flex flex-col gap-6">
 			<label for="inp">
 				<div class="mb-1 font-semibold text-secondary gap-1 flex flex-row items-center"
@@ -515,13 +538,13 @@
 
 <Drawer bind:this={resourceTypeDrawer} size="1200px">
 	<DrawerContent title="Create resource type" on:close={resourceTypeDrawer.closeDrawer}>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button
 				startIcon={{ icon: Save }}
 				on:click={addResourceType}
 				disabled={!isNewResourceTypeNameValid}>Save</Button
 			>
-		</svelte:fragment>
+		{/snippet}
 		<div class="flex flex-col gap-6">
 			<label for="inp">
 				<div class="mb-1 font-semibold text-secondary gap-1 flex flex-row items-center"
@@ -546,7 +569,7 @@
 								type="text"
 								bind:value={newResourceType.name}
 								class={classNames('!h-8  !border ', !disableCustomPrefix ? '!rounded-l-none' : '')}
-								on:input={validateResourceTypeName}
+								oninput={validateResourceTypeName}
 							/>
 						</div>
 					</div>
@@ -561,7 +584,7 @@
 					{#if !isNewResourceTypeNameValid}
 						<p class="mt-1 px-2 text-red-600 dark:text-red-400 text-2xs"
 							>Name must be snake_case!
-							<button on:click={toSnakeCase} class="text-blue-600">Fix...</button></p
+							<button onclick={toSnakeCase} class="text-blue-600">Fix...</button></p
 						>
 					{/if}
 				{/if}
@@ -616,10 +639,23 @@
 			documentationLink="https://www.windmill.dev/docs/core_concepts/resources_and_types"
 		>
 			<div class="flex flex-row justify-end gap-4">
-				<Button variant="border" size="md" startIcon={{ icon: Plus }} on:click={startNewType}>
+				<Button
+					variant="border"
+					size="md"
+					startIcon={{ icon: Plus }}
+					on:click={startNewType}
+					aiId="resources-add-resource-type"
+					aiDescription="Add resource type"
+				>
 					Add resource type
 				</Button>
-				<Button size="md" startIcon={{ icon: Link }} on:click={() => appConnect.open?.()}>
+				<Button
+					size="md"
+					startIcon={{ icon: Link }}
+					on:click={() => appConnect?.open?.()}
+					aiId="resources-add-resource"
+					aiDescription="Add resource"
+				>
 					Add resource
 				</Button>
 			</div>
@@ -749,14 +785,14 @@
 											<a
 												class="break-all"
 												href="#{path}"
-												on:click={() => resourceEditor?.initEdit?.(path)}
+												onclick={() => resourceEditor?.initEdit?.(path)}
 												>{#if marked}{@html marked}{:else}{path}{/if}</a
 											>
 										</Cell>
 										<Cell>
 											<a
 												href="#{name}"
-												on:click={() => {
+												onclick={() => {
 													const linkedRt = resourceTypes?.find((rt) => rt.name === resource_type)
 													if (linkedRt) {
 														resourceTypeViewerObj = {
@@ -766,7 +802,7 @@
 															description: linkedRt.description ?? '',
 															formatExtension: linkedRt.format_extension
 														}
-														resourceTypeViewer.openDrawer?.()
+														resourceTypeViewer?.openDrawer?.()
 													} else {
 														sendUserToast(
 															`Resource type ${resource_type} not found in workspace.`,
@@ -793,10 +829,12 @@
 													{#if is_linked}
 														<Popover>
 															<Link />
-															<div slot="text">
-																This resource is linked with a variable of the same path. They are
-																deleted and renamed together.
-															</div>
+															{#snippet text()}
+																<div>
+																	This resource is linked with a variable of the same path. They are
+																	deleted and renamed together.
+																</div>
+															{/snippet}
 														</Popover>
 													{/if}
 												</div>
@@ -804,10 +842,12 @@
 													{#if is_refreshed}
 														<Popover>
 															<RotateCw />
-															<div slot="text">
-																The OAuth token will be kept up-to-date in the background by
-																Windmill using its refresh token
-															</div>
+															{#snippet text()}
+																<div>
+																	The OAuth token will be kept up-to-date in the background by
+																	Windmill using its refresh token
+																</div>
+															{/snippet}
 														</Popover>
 													{/if}
 												</div>
@@ -820,9 +860,11 @@
 																	class="text-red-600 animate-[pulse_5s_linear_infinite] fill-current"
 																	size={12}
 																/>
-																<div slot="text">
-																	Latest exchange of the refresh token did not succeed. Error: {refresh_error}
-																</div>
+																{#snippet text()}
+																	<div>
+																		Latest exchange of the refresh token did not succeed. Error: {refresh_error}
+																	</div>
+																{/snippet}
 															</Popover>
 														{:else if is_expired}
 															<Popover>
@@ -831,11 +873,13 @@
 																	size={12}
 																/>
 
-																<div slot="text">
-																	The access_token is expired, it will get renewed the next time
-																	this variable is fetched or you can request is to be refreshed in
-																	the dropdown on the right.
-																</div>
+																{#snippet text()}
+																	<div>
+																		The access_token is expired, it will get renewed the next time
+																		this variable is fetched or you can request is to be refreshed
+																		in the dropdown on the right.
+																	</div>
+																{/snippet}
 															</Popover>
 														{:else}
 															<Popover>
@@ -843,10 +887,12 @@
 																	class="text-green-600 animate-[pulse_5s_linear_infinite] fill-current"
 																	size={12}
 																/>
-																<div slot="text">
-																	The resource was connected through OAuth and the token is not
-																	expired.
-																</div>
+																{#snippet text()}
+																	<div>
+																		The resource was connected through OAuth and the token is not
+																		expired.
+																	</div>
+																{/snippet}
 															</Popover>
 														{/if}
 													</div>
@@ -868,7 +914,7 @@
 														displayName: !canWrite ? 'View Permissions' : 'Share',
 														icon: Share,
 														action: () => {
-															shareModal.openDrawer?.(path, 'resource')
+															shareModal?.openDrawer?.(path, 'resource')
 														}
 													},
 													{
@@ -885,7 +931,7 @@
 																	displayName: 'Deploy to prod/staging',
 																	icon: FileUp,
 																	action: () => {
-																		deploymentDrawer.openDrawer(path, 'resource')
+																		deploymentDrawer?.openDrawer(path, 'resource')
 																	}
 																}
 															]
@@ -959,7 +1005,7 @@
 										<Cell first>
 											<a
 												href="#{name}"
-												on:click={() => {
+												onclick={() => {
 													resourceTypeViewerObj = {
 														rt: name,
 														//@ts-ignore
@@ -968,7 +1014,7 @@
 														formatExtension: format_extension
 													}
 
-													resourceTypeViewer.openDrawer?.()
+													resourceTypeViewer?.openDrawer?.()
 												}}
 											>
 												<IconedResourceType
diff --git a/frontend/src/routes/(root)/(logged)/routes/+page.svelte b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
index f4ec5e51c1..d03ae50ff5 100644
--- a/frontend/src/routes/(root)/(logged)/routes/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		HttpTriggerService,
 		WorkspaceService,
@@ -11,7 +13,8 @@
 		displayDate,
 		getLocalSetting,
 		storeLocalSetting,
-		removeTriggerKindIfUnused
+		removeTriggerKindIfUnused,
+		sendUserToast
 	} from '$lib/utils'
 	import { base } from '$app/paths'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
@@ -43,14 +46,18 @@
 	import { ALL_DEPLOYABLE, isDeployable } from '$lib/utils_deployable'
 	import { isCloudHosted } from '$lib/cloud'
 	import { getHttpRoute } from '$lib/components/triggers/http/utils'
+	import RoutesGenerator from '$lib/components/triggers/http/RoutesGenerator.svelte'
+	import OpenApiSpecGenerator from '$lib/components/triggers/http/OpenAPISpecGenerator.svelte'
 
 	type TriggerW = HttpTrigger & { canWrite: boolean }
 
-	let triggers: TriggerW[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let triggers: TriggerW[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let openAPISpecGenerator: OpenApiSpecGenerator | undefined = $state()
+	let routesGenerator: RoutesGenerator | undefined = $state()
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -71,28 +78,32 @@
 		loading = false
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
-	}
-	let routeEditor: RouteEditor
-
-	let filteredItems: (TriggerW & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
+	})
+	let routeEditor: RouteEditor | undefined = $state()
+	let filteredItems: (TriggerW & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let preFilteredItems: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
 
 	const TRIGGER_PATH_KIND_FILTER_SETTING = 'filter_path_of'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING) as 'trigger' | 'script_flow') ?? 'trigger'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	run(() => {
+		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	run(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: TriggerW,
@@ -116,28 +127,32 @@
 		}
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? selectedFilterKind === 'trigger'
-				? triggers?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+	run(() => {
+		preFilteredItems =
+			ownerFilter != undefined
+				? selectedFilterKind === 'trigger'
+					? triggers?.filter(
+							(x) =>
+								x.path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+					: triggers?.filter(
+							(x) =>
+								x.script_path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+				: triggers?.filter((x) =>
+						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
 					)
-				: triggers?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-					)
-			: triggers?.filter((x) =>
-					filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'trigger'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -149,8 +164,11 @@
 							.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? []
 					)
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	run(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders) {
 		setQuery(
@@ -182,12 +200,17 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders)
+	run(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders)
+	})
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 <RouteEditor onUpdate={loadTriggers} bind:this={routeEditor} />
 
+<RoutesGenerator closeFn={loadTriggers} bind:this={routesGenerator} />
+<OpenApiSpecGenerator bind:this={openAPISpecGenerator} />
+
 <SearchItems
 	{filter}
 	items={preFilteredItems}
@@ -208,9 +231,29 @@
 			documentationLink="https://www.windmill.dev/docs/core_concepts/http_routing"
 		>
 			{#if $userStore?.is_admin || $userStore?.is_super_admin}
-				<Button size="md" startIcon={{ icon: Plus }} on:click={() => routeEditor.openNew(false)}>
-					New&nbsp;route
-				</Button>
+				<div class="flex flex-row gap-2">
+					<Button
+						size="md"
+						startIcon={{ icon: Plus }}
+						on:click={() => {
+							routesGenerator?.openDrawer()
+						}}
+					>
+						From OpenAPI spec
+					</Button>
+					<Button
+						size="md"
+						startIcon={{ icon: Plus }}
+						on:click={() => {
+							openAPISpecGenerator?.openDrawer()
+						}}
+					>
+						To OpenAPI spec
+					</Button>
+					<Button size="md" startIcon={{ icon: Plus }} on:click={() => routeEditor?.openNew(false)}>
+						New&nbsp;route
+					</Button>
+				</div>
 			{/if}
 		</PageHeader>
 		<div class="w-full h-full flex flex-col">
@@ -218,9 +261,11 @@
 				<input type="text" placeholder="Search routes" bind:value={filter} class="search-item" />
 				<div class="flex flex-row items-center gap-2 mt-6">
 					<div class="text-sm shrink-0"> Filter by path of </div>
-					<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-						<ToggleButton small value="trigger" label="Route" icon={Route} {item} />
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					<ToggleButtonGroup bind:selected={selectedFilterKind}>
+						{#snippet children({ item })}
+							<ToggleButton small value="trigger" label="Route" icon={Route} {item} />
+							<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 				<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
@@ -257,7 +302,7 @@
 
 								<a
 									href="#{path}"
-									on:click={() => routeEditor?.openEdit(path, is_flow)}
+									onclick={() => routeEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
 									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
@@ -328,11 +373,16 @@
 												disabled:
 													!canWrite || !($userStore?.is_admin || $userStore?.is_super_admin),
 												action: async () => {
-													await HttpTriggerService.deleteHttpTrigger({
-														workspace: $workspaceStore ?? '',
-														path
-													})
-													loadTriggers()
+													try {
+														await HttpTriggerService.deleteHttpTrigger({
+															workspace: $workspaceStore ?? '',
+															path
+														})
+														sendUserToast(`Successfully deleted HTTP route: ${path}`)
+														loadTriggers()
+													} catch (error) {
+														sendUserToast(error.body || error.message, true)
+													}
 												}
 											},
 											{
@@ -348,7 +398,7 @@
 															displayName: 'Deploy to prod/staging',
 															icon: FileUp,
 															action: () => {
-																deploymentDrawer.openDrawer(path, 'trigger', {
+																deploymentDrawer?.openDrawer(path, 'trigger', {
 																	triggers: {
 																		kind: 'routes'
 																	}
@@ -366,7 +416,7 @@
 												displayName: canWrite ? 'Share' : 'See Permissions',
 												icon: Share,
 												action: () => {
-													shareModal.openDrawer(path, 'http_trigger')
+													shareModal?.openDrawer(path, 'http_trigger')
 												}
 											}
 										]}
@@ -391,7 +441,7 @@
 		{#if items && items?.length > 15 && nbDisplayed < items.length}
 			<span class="text-xs"
 				>{nbDisplayed} items out of {items.length}
-				<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+				<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 			>
 		{/if}
 	</CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index cab4ef6adb..b711d76a3b 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { stopPropagation } from 'svelte/legacy'
+
 	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import {
@@ -88,35 +90,37 @@
 	import CustomPopover from '$lib/components/CustomPopover.svelte'
 	import { isWindmillTooBigObject } from '$lib/components/job_args'
 	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
+	import { untrack } from 'svelte'
+	import WorkerHostname from '$lib/components/WorkerHostname.svelte'
 
-	let job: Job | undefined
-	let jobUpdateLastFetch: Date | undefined
+	let job: Job | undefined = $state()
+	let jobUpdateLastFetch: Date | undefined = $state()
 
-	let scriptProgress: number | undefined = undefined
-	let currentJobIsLongRunning: boolean = false
+	let scriptProgress: number | undefined = $state(undefined)
+	let currentJobIsLongRunning: boolean = $state(false)
 
-	let viewTab: 'result' | 'logs' | 'code' | 'stats' = 'result'
-	let selectedJobStep: string | undefined = undefined
-	let branchOrIterationN: number = 0
+	let viewTab: 'result' | 'logs' | 'code' | 'stats' = $state('result')
+	let selectedJobStep: string | undefined = $state(undefined)
+	let branchOrIterationN: number = $state(0)
 
-	let selectedJobStepIsTopLevel: boolean | undefined = undefined
-	let selectedJobStepType: 'single' | 'forloop' | 'branchall' = 'single'
+	let selectedJobStepIsTopLevel: boolean | undefined = $state(undefined)
+	let selectedJobStepType: 'single' | 'forloop' | 'branchall' = $state('single')
 	let restartBranchNames: [number, string][] = []
 
-	let testIsLoading = false
-	let testJobLoader: TestJobLoader
+	let testIsLoading = $state(false)
+	let testJobLoader: TestJobLoader | undefined = $state(undefined)
 
-	let persistentScriptDrawer: PersistentScriptDrawer
-	let getLogs: (() => Promise<void>) | undefined = undefined
+	let persistentScriptDrawer: PersistentScriptDrawer | undefined = $state(undefined)
+	let getLogs: (() => Promise<void>) | undefined = $state(undefined)
 
-	let showExplicitProgressTip: boolean =
+	let showExplicitProgressTip: boolean = $state(
 		(localStorage.getItem('hideExplicitProgressTip') ?? 'false') == 'false'
-	$: job?.logs == undefined && job && viewTab == 'logs' && isNotFlow(job?.job_kind) && getLogs?.()
+	)
 
-	let lastJobId: string | undefined = undefined
-	let concurrencyKey: string | undefined = undefined
-	$: job?.id && lastJobId !== job.id && getConcurrencyKey(job)
-	async function getConcurrencyKey(job: Job) {
+	let lastJobId: string | undefined = $state(undefined)
+	let concurrencyKey: string | undefined = $state(undefined)
+	async function getConcurrencyKey(job: Job | undefined) {
+		if (!job) return
 		lastJobId = job.id
 		concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id })
 	}
@@ -193,7 +197,7 @@
 		}
 	}
 
-	let persistentScriptDefinition: Script | undefined = undefined
+	let persistentScriptDefinition: Script | undefined = $state(undefined)
 
 	async function onJobLoaded() {
 		// We want to set up scriptProgress once job is loaded
@@ -239,17 +243,12 @@
 		job = undefined
 		persistentScriptDefinition = undefined
 	}
-	$: $workspaceStore && $page.params.run && onRunsPageChange()
-	$: $workspaceStore && $page.params.run && testJobLoader && onRunsPageChangeWithLoader()
 
-	$: selectedJobStep !== undefined && onSelectedJobStepChange()
-	$: job && onJobLoaded()
+	let notfound = $state(false)
+	let forceCancel = $state(false)
 
-	let notfound = false
-	let forceCancel = false
-
-	let debugViewer: Drawer
-	let debugContent: any = undefined
+	let debugViewer: Drawer | undefined = $state(undefined)
+	let debugContent: any = $state(undefined)
 	async function debugInfo() {
 		if (job?.id) {
 			debugContent = await JobService.getFlowDebugInfo({ workspace: $workspaceStore!, id: job?.id })
@@ -284,7 +283,7 @@
 		)
 	}
 
-	let redactSensitive = false
+	let redactSensitive = $state(false)
 
 	function asWorkflowStatus(x: any): Record<string, WorkflowStatus> {
 		return x as Record<string, WorkflowStatus>
@@ -311,9 +310,9 @@
 		}
 	}
 
-	let scheduleEditor: ScheduleEditor
+	let scheduleEditor: ScheduleEditor | undefined = $state(undefined)
 
-	let runImmediatelyLoading = false
+	let runImmediatelyLoading = $state(false)
 	async function runImmediately() {
 		runImmediatelyLoading = true
 		try {
@@ -352,6 +351,27 @@
 			runImmediatelyLoading = false
 		}
 	}
+	$effect(() => {
+		job?.logs == undefined && job && viewTab == 'logs' && isNotFlow(job?.job_kind) && getLogs?.()
+	})
+	$effect(() => {
+		job?.id && lastJobId !== job.id && untrack(() => getConcurrencyKey(job))
+	})
+	$effect(() => {
+		$workspaceStore && $page.params.run && untrack(() => onRunsPageChange())
+	})
+	$effect(() => {
+		$workspaceStore &&
+			$page.params.run &&
+			testJobLoader &&
+			untrack(() => onRunsPageChangeWithLoader())
+	})
+	$effect(() => {
+		selectedJobStep !== undefined && untrack(() => onSelectedJobStepChange())
+	})
+	$effect(() => {
+		job && untrack(() => onJobLoaded())
+	})
 </script>
 
 <HighlightTheme />
@@ -361,7 +381,7 @@
 {#if (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)) && job?.['running'] && job?.parent_job == undefined}
 	<Drawer bind:this={debugViewer} size="800px">
 		<DrawerContent title="Debug Detail" on:close={debugViewer.closeDrawer}>
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				<div class="flex items-center gap-1">
 					<div class="w-60 pt-2">
 						<Toggle bind:checked={redactSensitive} options={{ right: 'Redact args/result/logs' }} />
@@ -377,7 +397,7 @@
 						<div class="flex gap-2 items-center">Copy <ClipboardCopy /> </div>
 					</Button>
 				</div>
-			</svelte:fragment>
+			{/snippet}
 			<pre
 				><code class="text-2xs p-2">
 					<Highlight
@@ -439,7 +459,7 @@
 		layout={[0.75, [2, 0, 2], 2.25, [{ h: 1.5, w: 40 }]]}
 	/>
 	<ActionRow class="max-w-7xl px-4 mx-auto w-full">
-		<svelte:fragment slot="left">
+		{#snippet left()}
 			{@const isScript = job?.job_kind === 'script'}
 			{@const runsHref = `/runs/${job?.script_path}${!isScript ? '?jobKind=flow' : ''}`}
 			<div class="flex gap-2 items-center">
@@ -455,9 +475,9 @@
 							}
 						]}
 					>
-						<svelte:fragment slot="buttonReplacement">
+						{#snippet buttonReplacement()}
 							<Button nonCaptureEvent variant="border" size="sm" startIcon={{ icon: Trash }} />
-						</svelte:fragment>
+						{/snippet}
 					</Dropdown>
 					{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
 						<Button
@@ -472,8 +492,8 @@
 					{/if}
 				{/if}
 			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="right">
+		{/snippet}
+		{#snippet right()}
 			{@const stem = `/${job?.job_kind}s`}
 			{@const isScript = job?.job_kind === 'script'}
 			{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
@@ -490,13 +510,13 @@
 						]}
 						class="h-auto"
 					>
-						<svelte:fragment slot="buttonReplacement">
+						{#snippet buttonReplacement()}
 							<Button nonCaptureEvent size="xs" color="light">
 								<div class="flex flex-row items-center">
 									<MoreVertical size={14} />
 								</div>
 							</Button>
-						</svelte:fragment>
+						{/snippet}
 					</Dropdown>
 				</div>
 			{/if}
@@ -517,7 +537,7 @@
 					size="md"
 					startIcon={{ icon: Activity }}
 					on:click={() => {
-						persistentScriptDrawer.open?.(persistentScriptDefinition)
+						persistentScriptDrawer?.open?.(persistentScriptDefinition)
 					}}
 				>
 					Current runs
@@ -585,13 +605,16 @@
 						<Badge baseClass="ml-1" color="indigo">
 							{selectedJobStep}
 						</Badge>
+						{#if !$enterpriseLicense}
+							(EE)
+						{/if}
 					</Button>
 				{:else}
 					<Popover
 						floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
 						contentClasses="p-4"
 					>
-						<svelte:fragment slot="trigger">
+						{#snippet trigger()}
 							<Button
 								title={`Re-start this flow from step ${selectedJobStep} (included). ${
 									!$enterpriseLicense
@@ -609,8 +632,8 @@
 									{selectedJobStep}
 								</Badge>
 							</Button>
-						</svelte:fragment>
-						<svelte:fragment slot="content">
+						{/snippet}
+						{#snippet content()}
 							<label class="block text-primary">
 								<div class="pb-1 text-sm text-secondary"
 									>{selectedJobStepType == 'forloop' ? 'From iteration #:' : 'From branch:'}</div
@@ -622,13 +645,13 @@
 											min="0"
 											bind:value={branchOrIterationN}
 											class="!w-32 grow"
-											on:click|stopPropagation={() => {}}
+											onclick={stopPropagation(() => {})}
 										/>
 									{:else}
 										<select
 											bind:value={branchOrIterationN}
 											class="!w-32 grow"
-											on:click|stopPropagation={() => {}}
+											onclick={stopPropagation(() => {})}
 										>
 											{#each restartBranchNames as [branchIdx, branchName]}
 												<option value={branchIdx}>{branchName}</option>
@@ -650,7 +673,7 @@
 									</Button>
 								</div>
 							</label>
-						</svelte:fragment>
+						{/snippet}
 					</Popover>
 				{/if}
 			{/if}
@@ -664,13 +687,13 @@
 						size="sm"
 						startIcon={{ icon: RefreshCw }}>Run again</Button
 					>
-					<svelte:fragment slot="overlay">
+					{#snippet overlay()}
 						<div class="flex flex-row gap-2">
 							<Button size="xs" loading={runImmediatelyLoading} on:click={() => runImmediately()}>
 								Run immediately with same args
 							</Button>
 						</div>
-					</svelte:fragment>
+					{/snippet}
 				</CustomPopover>
 			{/if}
 			{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
@@ -699,7 +722,7 @@
 					View {job?.job_kind}
 				</Button>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</ActionRow>
 	<div class="w-full">
 		<h1
@@ -746,7 +769,7 @@
 							<PreprocessedArgsDisplay preprocessed={job.preprocessed} />
 						{/if}
 						{#if persistentScriptDefinition}
-							<button on:click={() => persistentScriptDrawer.open?.(persistentScriptDefinition)}
+							<button onclick={() => persistentScriptDrawer?.open?.(persistentScriptDefinition)}
 								><Badge color="red">persistent</Badge></button
 							>
 						{/if}
@@ -766,10 +789,10 @@
 								<Badge color="red">
 									only visible to you
 									<Tooltip>
-										<svelte:fragment slot="text">
+										{#snippet text()}
 											The option to hide this run from the owner of this script or flow was
 											activated
-										</svelte:fragment>
+										{/snippet}
 									</Tooltip>
 								</Badge>
 							</div>
@@ -784,14 +807,14 @@
 						{#if concurrencyKey}
 							<div>
 								<Tooltip notClickable>
-									<svelte:fragment slot="text">
+									{#snippet text()}
 										This job has concurrency limits enabled with the key
 										<a
 											href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
 										>
 											{concurrencyKey}
 										</a>
-									</svelte:fragment>
+									{/snippet}
 									<a
 										href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrencyKey}`}
 									>
@@ -803,12 +826,13 @@
 						{#if job?.worker}
 							<div>
 								<Tooltip notClickable>
-									<svelte:fragment slot="text">
-										Executed on worker
+									{#snippet text()}
+										worker:
 										<a href={`${base}/runs/?job_kinds=all&worker=${job?.worker}`}>
-											{job.worker}
-										</a>
-									</svelte:fragment>
+											{job?.worker}
+										</a><br />
+										<WorkerHostname worker={job?.worker!} minTs={job?.['created_at']} />
+									{/snippet}
 									<a href={`${base}/runs/?job_kinds=all&worker=${job?.worker}`}>
 										<Badge>Worker: {truncateRev(job?.worker, 20)}</Badge></a
 									>
@@ -854,7 +878,7 @@
 						>
 							<button
 								type="button"
-								on:click={() => {
+								onclick={() => {
 									localStorage.setItem('hideExplicitProgressTip', 'true')
 									showExplicitProgressTip = false
 								}}
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index 291ed588fd..d0d7c26480 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -45,64 +45,72 @@
 	import BatchReRunOptionsPane, {
 		type BatchReRunOptions
 	} from '$lib/components/runs/BatchReRunOptionsPane.svelte'
+	import { untrack } from 'svelte'
 
-	let jobs: Job[] | undefined
-	let selectedIds: string[] = []
-	let loadingSelectedIds = false
-	$: loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250)
-	let selectedWorkspace: string | undefined = undefined
+	let jobs: Job[] | undefined = $state()
+	let selectedIds: string[] = $state([])
+	let loadingSelectedIds = $state(false)
+	let selectedWorkspace: string | undefined = $state(undefined)
 
-	let batchReRunOptions: BatchReRunOptions = { flow: {}, script: {} }
+	let batchReRunOptions: BatchReRunOptions = $state({ flow: {}, script: {} })
 
 	// All Filters
 	// Filter by
-	let path: string | null = $page.params.path
-	let worker: string | null = $page.url.searchParams.get('worker')
-	let user: string | null = $page.url.searchParams.get('user')
-	let folder: string | null = $page.url.searchParams.get('folder')
-	let label: string | null = $page.url.searchParams.get('label')
-	let allowWildcards: boolean = $page.url.searchParams.get('allow_wildcards') == 'true'
-	let concurrencyKey: string | null = $page.url.searchParams.get('concurrency_key')
-	let tag: string | null = $page.url.searchParams.get('tag')
+	let path: string | null = $state($page.params.path)
+	let worker: string | null = $state($page.url.searchParams.get('worker'))
+	let user: string | null = $state($page.url.searchParams.get('user'))
+	let folder: string | null = $state($page.url.searchParams.get('folder'))
+	let label: string | null = $state($page.url.searchParams.get('label'))
+	let allowWildcards: boolean = $state($page.url.searchParams.get('allow_wildcards') == 'true')
+	let concurrencyKey: string | null = $state($page.url.searchParams.get('concurrency_key'))
+	let tag: string | null = $state($page.url.searchParams.get('tag'))
 	// Rest of filters handled by RunsFilter
-	let success: 'running' | 'suspended' | 'waiting' | 'success' | 'failure' | undefined =
+	let success: 'running' | 'suspended' | 'waiting' | 'success' | 'failure' | undefined = $state(
 		($page.url.searchParams.get('success') ?? undefined) as
 			| 'running'
 			| 'success'
 			| 'failure'
 			| undefined
-	let isSkipped: boolean | undefined =
+	)
+	let isSkipped: boolean | undefined = $state(
 		$page.url.searchParams.get('is_skipped') != undefined
 			? $page.url.searchParams.get('is_skipped') == 'true'
 			: false
+	)
 
-	let showSchedules: boolean =
+	let showSchedules: boolean = $state(
 		$page.url.searchParams.get('show_schedules') != undefined
 			? $page.url.searchParams.get('show_schedules') == 'true'
 			: localStorage.getItem('show_schedules_in_run') == 'false'
 				? false
 				: true
-	let showFutureJobs: boolean =
+	)
+	let showFutureJobs: boolean = $state(
 		$page.url.searchParams.get('show_future_jobs') != undefined
 			? $page.url.searchParams.get('show_future_jobs') == 'true'
 			: localStorage.getItem('show_future_jobs') == 'false'
 				? false
 				: true
+	)
 
-	let argFilter: any = $page.url.searchParams.get('arg')
-		? JSON.parse(decodeURIComponent($page.url.searchParams.get('arg') ?? '{}'))
-		: undefined
-	let resultFilter: any = $page.url.searchParams.get('result')
-		? JSON.parse(decodeURIComponent($page.url.searchParams.get('result') ?? '{}'))
-		: undefined
+	let argFilter: any = $state(
+		$page.url.searchParams.get('arg')
+			? JSON.parse(decodeURIComponent($page.url.searchParams.get('arg') ?? '{}'))
+			: undefined
+	)
+	let resultFilter: any = $state(
+		$page.url.searchParams.get('result')
+			? JSON.parse(decodeURIComponent($page.url.searchParams.get('result') ?? '{}'))
+			: undefined
+	)
 
 	// Handled on the main page
-	let minTs = $page.url.searchParams.get('min_ts') ?? undefined
-	let maxTs = $page.url.searchParams.get('max_ts') ?? undefined
-	let schedulePath = $page.url.searchParams.get('schedule_path') ?? undefined
-	let jobKindsCat = $page.url.searchParams.get('job_kinds') ?? 'runs'
-	let allWorkspaces = $page.url.searchParams.get('all_workspaces') == 'true'
-	let lastFetchWentToEnd = false
+	let minTs = $state($page.url.searchParams.get('min_ts') ?? undefined)
+	let maxTs = $state($page.url.searchParams.get('max_ts') ?? undefined)
+	let schedulePath = $state($page.url.searchParams.get('schedule_path') ?? undefined)
+	let jobKindsCat = $state($page.url.searchParams.get('job_kinds') ?? 'runs')
+	let allWorkspaces = $state($page.url.searchParams.get('all_workspaces') == 'true')
+	let lastFetchWentToEnd = $state(false)
 
 	function loadFromQuery() {
 		path = $page.params.path
@@ -152,23 +160,23 @@
 		allWorkspaces = $page.url.searchParams.get('all_workspaces') == 'true'
 	}
 
-	let queue_count: Tweened<number> | undefined = undefined
-	let suspended_count: Tweened<number> | undefined = undefined
+	let queue_count: Tweened<number> | undefined = $state(undefined)
+	let suspended_count: Tweened<number> | undefined = $state(undefined)
 
 	let jobKinds: string | undefined = undefined
-	let loading: boolean = false
-	let paths: string[] = []
-	let usernames: string[] = []
-	let folders: string[] = []
-	let completedJobs: CompletedJob[] | undefined = undefined
-	let extendedJobs: ExtendedJobs | undefined = undefined
-	let argError = ''
-	let resultError = ''
+	let loading: boolean = $state(false)
+	let paths: string[] = $state([])
+	let usernames: string[] = $state([])
+	let folders: string[] = $state([])
+	let completedJobs: CompletedJob[] | undefined = $state(undefined)
+	let extendedJobs: ExtendedJobs | undefined = $state(undefined)
+	let argError = $state('')
+	let resultError = $state('')
 	let filterTimeout: NodeJS.Timeout | undefined = undefined
-	let selectedManualDate = 0
-	let autoRefresh: boolean = getAutoRefresh()
-	let runDrawer: Drawer
-	let lookback: number = 1
+	let selectedManualDate = $state(0)
+	let autoRefresh: boolean = $state(getAutoRefresh())
+	let runDrawer: Drawer | undefined = $state(undefined)
+	let lookback: number = $state(1)
 	let askingForConfirmation:
 		| undefined
 		| {
@@ -178,7 +186,7 @@
 				preContent?: string
 				onConfirm?: () => void
 				type?: ConfirmationModal['$$prop_def']['type']
-		  } = undefined
+		  } = $state(undefined)
 
 	function getAutoRefresh() {
 		try {
@@ -189,42 +197,18 @@
 		}
 	}
 
-	let innerWidth = window.innerWidth
-	let jobLoader: JobLoader | undefined = undefined
-	let externalJobs: Job[] | undefined = undefined
+	let innerWidth = $state(window.innerWidth)
+	let jobLoader: JobLoader | undefined = $state(undefined)
+	let externalJobs: Job[] | undefined = $state(undefined)
 
-	let graph: 'RunChart' | 'ConcurrencyChart' = typeOfChart($page.url.searchParams.get('graph'))
-	let graphIsRunsChart: boolean = graph === 'RunChart'
+	let graph: 'RunChart' | 'ConcurrencyChart' = $state(
+		typeOfChart($page.url.searchParams.get('graph'))
+	)
+	let graphIsRunsChart: boolean = $state(untrack(() => graph) === 'RunChart')
 
-	let manualDatePicker: ManuelDatePicker
+	let manualDatePicker: ManuelDatePicker | undefined = $state(undefined)
 
-	let runsTable: RunsTable
-
-	$: (user ||
-		worker ||
-		label ||
-		folder ||
-		path ||
-		success !== undefined ||
-		isSkipped ||
-		showSchedules ||
-		showFutureJobs ||
-		argFilter ||
-		resultFilter ||
-		schedulePath ||
-		jobKindsCat ||
-		concurrencyKey ||
-		tag ||
-		graph ||
-		maxTs ||
-		minTs ||
-		allWorkspaces ||
-		allowWildcards ||
-		$workspaceStore) &&
-		setQuery(false)
-
-	$: minTs || setQuery(true)
-	$: maxTs || setQuery(true)
+	let runsTable: RunsTable | undefined = $state(undefined)
 
 	function setQuery(replaceState: boolean) {
 		let searchParams = new URLSearchParams()
@@ -394,12 +378,6 @@
 		paths = npaths_scripts.concat(npaths_flows).sort()
 	}
 
-	$: if ($workspaceStore) {
-		loadUsernames()
-		loadFolders()
-		loadPaths()
-	}
-
 	function filterByPath(e: CustomEvent<string>) {
 		path = e.detail
 		user = null
@@ -490,7 +468,7 @@
 		allowWildcards = false
 	}
 
-	let calendarChangeTimeout: NodeJS.Timeout | undefined = undefined
+	let calendarChangeTimeout: NodeJS.Timeout | undefined = $state(undefined)
 
 	function typeOfChart(s: string | null): 'RunChart' | 'ConcurrencyChart' {
 		switch (s) {
@@ -503,7 +481,7 @@
 		}
 	}
 
-	let selectionMode: RunsSelectionMode | false = false
+	let selectionMode: RunsSelectionMode | false = $state(false)
 
 	async function onSetSelectionMode(mode: RunsSelectionMode | false) {
 		selectionMode = mode
@@ -720,11 +698,6 @@
 	const warnJobLimitMsg =
 		'The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last 1000 jobs are taken into account: a job that was started earlier than this limit will not be taken into account'
 
-	$: warnJobLimit =
-		graph === 'ConcurrencyChart' &&
-		extendedJobs !== undefined &&
-		extendedJobs.jobs.length + extendedJobs.obscured_jobs.length >= 1000
-
 	function jobsFilter(f: 'waiting' | 'suspended') {
 		path = null
 		user = null
@@ -743,7 +716,60 @@
 		jobKindsCat = 'all'
 	}
 
-	let schedulesWidth = 0
+	let schedulesWidth = $state(0)
+	$effect(() => {
+		loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250)
+	})
+	$effect(() => {
+		;[
+			user,
+			worker,
+			label,
+			folder,
+			path,
+			success !== undefined,
+			isSkipped,
+			showSchedules,
+			showFutureJobs,
+			argFilter,
+			resultFilter,
+			schedulePath,
+			jobKindsCat,
+			concurrencyKey,
+			tag,
+			graph,
+			maxTs,
+			minTs,
+			allWorkspaces,
+			allowWildcards,
+			$workspaceStore
+		]
+
+		untrack(() => setQuery(false))
+	})
+	$effect(() => {
+		minTs || untrack(() => setQuery(true))
+	})
+	$effect(() => {
+		maxTs || untrack(() => setQuery(true))
+	})
+	$effect(() => {
+		if ($workspaceStore) {
+			untrack(() => {
+				loadUsernames()
+				loadFolders()
+				loadPaths()
+			})
+		}
+	})
+	let warnJobLimit = $derived.by(() => {
+		let extended = extendedJobs as ExtendedJobs | undefined
+		return (
+			graph === 'ConcurrencyChart' &&
+			extended !== undefined &&
+			extended.jobs.length + extended.obscured_jobs.length >= 1000
+		)
+	})
 </script>
 
 <JobLoader
@@ -816,7 +842,7 @@
 
 <svelte:window
 	bind:innerWidth
-	on:popstate={() => {
+	onpopstate={() => {
 		reset()
 		loadFromQuery()
 	}}
@@ -891,16 +917,17 @@
 								graph = detail
 								graphIsRunsChart = graph === 'RunChart'
 							}}
-							let:item
 						>
-							<ToggleButton value="RunChart" label="Duration" {item} />
-							<ToggleButton
-								{item}
-								value="ConcurrencyChart"
-								label="Concurrency"
-								icon={warnJobLimit ? AlertTriangle : undefined}
-								tooltip={warnJobLimit ? warnJobLimitMsg : undefined}
-							/>
+							{#snippet children({ item })}
+								<ToggleButton value="RunChart" label="Duration" {item} />
+								<ToggleButton
+									{item}
+									value="ConcurrencyChart"
+									label="Concurrency"
+									icon={warnJobLimit ? AlertTriangle : undefined}
+									tooltip={warnJobLimit ? warnJobLimitMsg : undefined}
+								/>
+							{/snippet}
 						</ToggleButtonGroup>
 					</div>
 					{#if !graphIsRunsChart}
@@ -924,7 +951,7 @@
 								}
 							]}
 						>
-							<svelte:fragment slot="buttonReplacement">
+							{#snippet buttonReplacement()}
 								<div
 									class="mt-1 p-2 h-8 flex flex-row items-center hover:bg-surface-hover cursor-pointer rounded-md"
 								>
@@ -936,7 +963,7 @@
 										the computation of the graph
 									</Tooltip>
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</DropdownV2>
 					{/if}
 				</div>
@@ -958,7 +985,7 @@
 						jobLoader?.loadJobs(minTs, maxTs, true)
 					}}
 					on:pointClicked={(e) => {
-						runsTable.scrollToRun(e.detail)
+						runsTable?.scrollToRun(e.detail)
 					}}
 				/>
 			{:else if graph === 'ConcurrencyChart'}
@@ -1227,10 +1254,11 @@
 							graph = detail
 							graphIsRunsChart = graph == 'RunChart'
 						}}
-						let:item
 					>
-						<ToggleButton value="RunChart" label="Duration" {item} />
-						<ToggleButton value="ConcurrencyChart" label="Concurrency" {item} />
+						{#snippet children({ item })}
+							<ToggleButton value="RunChart" label="Duration" {item} />
+							<ToggleButton value="ConcurrencyChart" label="Concurrency" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 					{#if !graphIsRunsChart}
 						<DropdownV2
@@ -1253,7 +1281,7 @@
 								}
 							]}
 						>
-							<svelte:fragment slot="buttonReplacement">
+							{#snippet buttonReplacement()}
 								<div
 									class="mt-1 p-2 h-8 flex flex-row items-center hover:bg-surface-hover cursor-pointer rounded-md"
 								>
@@ -1265,7 +1293,7 @@
 										the computation of the graph
 									</Tooltip>
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</DropdownV2>
 					{/if}
 				</div>
@@ -1287,7 +1315,7 @@
 						jobLoader?.loadJobs(minTs, maxTs, true)
 					}}
 					on:pointClicked={(e) => {
-						runsTable.scrollToRun(e.detail)
+						runsTable?.scrollToRun(e.detail)
 					}}
 				/>
 			{:else if graph === 'ConcurrencyChart'}
@@ -1460,7 +1488,7 @@
 				bind:lastFetchWentToEnd
 				on:loadExtra={loadExtra}
 				on:select={() => {
-					if (!selectionMode) runDrawer.openDrawer()
+					if (!selectionMode) runDrawer?.openDrawer()
 				}}
 				on:filterByPath={filterByPath}
 				on:filterByUser={filterByUser}
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index ec1feb8aff..54501c3b39 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -41,7 +41,7 @@
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import { setQuery } from '$lib/navigation'
-	import { onMount } from 'svelte'
+	import { onMount, untrack } from 'svelte'
 	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import { ALL_DEPLOYABLE, isDeployable } from '$lib/utils_deployable'
 	import { runScheduleNow } from '$lib/components/triggers/scheduled/utils'
@@ -49,12 +49,12 @@
 
 	type ScheduleW = ScheduleWJobs & { canWrite: boolean }
 
-	let schedules: ScheduleW[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let loadingSchedulesWithJobStats = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let schedules: ScheduleW[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let loadingSchedulesWithJobStats = $state(true)
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -107,30 +107,36 @@
 		}
 	}
 
-	$: {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
-			loadSchedules()
+			untrack(() => {
+				loadSchedules()
+			})
 		}
-	}
-	let scheduleEditor: ScheduleEditor
+	})
+	let scheduleEditor: ScheduleEditor | undefined = $state()
 
-	let filteredItems: (ScheduleW & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
+	let filteredItems: (ScheduleW & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
 
-	let filterEnabledDisabled: 'all' | 'enabled' | 'disabled' = 'all'
+	let filterEnabledDisabled: 'all' | 'enabled' | 'disabled' = $state('all')
 
 	const SCHEDULE_PATH_KIND_FILTER_SETTING = 'schedulePathKindFilter'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(SCHEDULE_PATH_KIND_FILTER_SETTING) as 'schedule' | 'script_flow') ?? 'schedule'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(SCHEDULE_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	$effect(() => {
+		storeLocalSetting(SCHEDULE_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	$effect(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: ScheduleW,
@@ -163,8 +169,8 @@
 		if (filterEnabledDisabled === 'disabled') return !item.enabled
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
+	let preFilteredItems = $derived.by(() => {
+		return ownerFilter != undefined
 			? selectedFilterKind === 'schedule'
 				? schedules?.filter(
 						(x) =>
@@ -183,12 +189,15 @@
 						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders) &&
 						filterItemsBasedOnEnabledDisabled(x, filterEnabledDisabled)
 				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	$effect(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'schedule'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -196,8 +205,11 @@
 			: Array.from(
 					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	$effect(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders, filterEnabledDisabled) {
 		setQuery(new URL(window.location.href), 'filter_kind', selectedFilterKind).then(() => {
@@ -231,7 +243,9 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders, filterEnabledDisabled)
+	$effect(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders, filterEnabledDisabled)
+	})
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
@@ -256,8 +270,14 @@
 			tooltip="Trigger Scripts and Flows according to a cron schedule"
 			documentationLink="https://www.windmill.dev/docs/core_concepts/scheduling"
 		>
-			<Button size="md" startIcon={{ icon: Plus }} on:click={() => scheduleEditor.openNew(false)}>
-				New&nbsp;schedule
+			<Button
+				size="md"
+				startIcon={{ icon: Plus }}
+				on:click={() => scheduleEditor?.openNew(false)}
+				aiId="schedules-add-schedule"
+				aiDescription="Add schedule"
+			>
+				New schedule
 			</Button>
 		</PageHeader>
 		<div class="w-full h-full flex flex-col">
@@ -265,18 +285,22 @@
 				<input type="text" placeholder="Search schedule" bind:value={filter} class="search-item" />
 				<div class="flex flex-row items-center gap-2 mt-6">
 					<div class="text-sm shrink-0"> Filter by path of </div>
-					<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-						<ToggleButton small value="schedule" label="Schedule" icon={Calendar} {item} />
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					<ToggleButtonGroup bind:selected={selectedFilterKind}>
+						{#snippet children({ item })}
+							<ToggleButton small value="schedule" label="Schedule" icon={Calendar} {item} />
+							<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 				<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
 
 				<div class="flex flex-row items-center justify-end gap-4">
-					<ToggleButtonGroup class="h-6 w-auto" bind:selected={filterEnabledDisabled} let:item>
-						<ToggleButton small value="all" label="All" {item} />
-						<ToggleButton small value="enabled" label="Enabled" {item} />
-						<ToggleButton small value="disabled" label="Disabled" {item} />
+					<ToggleButtonGroup class="h-6 w-auto" bind:selected={filterEnabledDisabled}>
+						{#snippet children({ item })}
+							<ToggleButton small value="all" label="All" {item} />
+							<ToggleButton small value="enabled" label="Enabled" {item} />
+							<ToggleButton small value="disabled" label="Disabled" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 					{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
 						<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
@@ -312,7 +336,7 @@
 
 								<a
 									href="#{path}"
-									on:click={() => scheduleEditor?.openEdit(path, is_flow)}
+									onclick={() => scheduleEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
 									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
@@ -356,10 +380,12 @@
 												/>
 												<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 											</span>
-											<div slot="text">
-												The schedule disabled itself because there was an error scheduling the next
-												job: {error}
-											</div>
+											{#snippet text()}
+												<div>
+													The schedule disabled itself because there was an error scheduling the
+													next job: {error}
+												</div>
+											{/snippet}
 										</Popover>
 									{/if}
 								</div>
@@ -434,7 +460,7 @@
 															displayName: 'Deploy to prod/staging',
 															icon: FileUp,
 															action: () => {
-																deploymentDrawer.openDrawer(path, 'trigger', {
+																deploymentDrawer?.openDrawer(path, 'trigger', {
 																	triggers: {
 																		kind: 'schedules'
 																	}
@@ -468,7 +494,7 @@
 												displayName: canWrite ? 'Share' : 'See Permissions',
 												icon: Share,
 												action: () => {
-													shareModal.openDrawer(path, 'schedule')
+													shareModal?.openDrawer(path, 'schedule')
 												}
 											}
 										]}
@@ -523,7 +549,7 @@
 		{#if items && items?.length > 15 && nbDisplayed < items.length}
 			<span class="text-xs"
 				>{nbDisplayed} items out of {items.length}
-				<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+				<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 			>
 		{/if}
 	</CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
index 63b90e842b..efe9a8d159 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
@@ -9,9 +9,10 @@
 	import { goto } from '$lib/navigation'
 	import { replaceState } from '$app/navigation'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
-	import type { GetInitialAndModifiedValues } from '$lib/components/common/confirmationModal/unsavedTypes'
 	import { replaceScriptPlaceholderWithItsValues } from '$lib/hub'
 	import type { Trigger } from '$lib/components/triggers/utils'
+	import { get } from 'svelte/store'
+	import { untrack } from 'svelte'
 
 	// Default
 	let schema: Schema = emptySchema()
@@ -20,18 +21,14 @@
 	const hubPath = $page.url.searchParams.get('hub')
 	const showMeta = /true|1/i.test($page.url.searchParams.get('show_meta') ?? '0')
 
-	let initialArgs = {}
-
-	if ($initialArgsStore) {
-		initialArgs = $initialArgsStore
-		$initialArgsStore = undefined
-	}
+	let initialArgs = get(initialArgsStore) ?? {}
+	if (get(initialArgsStore)) $initialArgsStore = undefined
 
 	const path = $page.url.searchParams.get('path')
 
 	const initialState = $page.url.hash != '' ? $page.url.hash.slice(1) : undefined
 
-	let scriptBuilder: ScriptBuilder | undefined = undefined
+	let scriptBuilder: ScriptBuilder | undefined = $state(undefined)
 
 	function decodeStateAndHandleError(state) {
 		try {
@@ -60,8 +57,9 @@
 		}
 	}
 
-	let script: NewScript & { draft_triggers: Trigger[] } =
+	let script: NewScript & { draft_triggers: Trigger[] } = $state(
 		!path && initialState != undefined ? decodeStateAndHandleError(initialState) : defaultScript()
+	)
 
 	async function loadTemplate(): Promise<void> {
 		if (templatePath) {
@@ -95,13 +93,11 @@
 
 	loadHub()
 
-	$: {
+	$effect(() => {
 		if ($workspaceStore) {
-			loadTemplate()
+			untrack(() => loadTemplate())
 		}
-	}
-
-	let getInitialAndModifiedValues: GetInitialAndModifiedValues = undefined
+	})
 </script>
 
 <ScriptBuilder
@@ -116,11 +112,12 @@
 		let path = e.detail
 		goto(`/scripts/edit/${path}`)
 	}}
-	bind:getInitialAndModifiedValues
 	searchParams={$page.url.searchParams}
 	{script}
 	{showMeta}
 	replaceStateFn={(path) => replaceState(path, $page.state)}
 >
-	<UnsavedConfirmationModal {getInitialAndModifiedValues} />
+	<UnsavedConfirmationModal
+		getInitialAndModifiedValues={scriptBuilder?.getInitialAndModifiedValues}
+	/>
 </ScriptBuilder>
diff --git a/frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte
index 803b29bce8..3ee4fb7472 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte
@@ -11,35 +11,32 @@
 	import DiffDrawer from '$lib/components/DiffDrawer.svelte'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import type { ScheduleTrigger } from '$lib/components/triggers'
-	import type { GetInitialAndModifiedValues } from '$lib/components/common/confirmationModal/unsavedTypes'
 	import type { Trigger } from '$lib/components/triggers/utils'
+	import { get } from 'svelte/store'
+	import { untrack } from 'svelte'
 
 	let initialState = window.location.hash != '' ? window.location.hash.slice(1) : undefined
-	let initialArgs = {}
+	let initialArgs = get(initialArgsStore) ?? {}
+	if (get(initialArgsStore)) $initialArgsStore = undefined
 
-	if ($initialArgsStore) {
-		initialArgs = $initialArgsStore
-		$initialArgsStore = undefined
-	}
 	let topHash = $page.url.searchParams.get('topHash') ?? undefined
 
 	let hash = $page.url.searchParams.get('hash') ?? undefined
 
 	let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 
+	let script: (NewScript & { draft_triggers?: Trigger[] }) | undefined = $state(undefined)
 
-	let script: (NewScript & { draft_triggers?: Trigger[] }) | undefined = undefined
+	let initialPath: string = $state('')
 
-	let initialPath: string = ''
-
-	let scriptBuilder: ScriptBuilder | undefined = undefined
+	let scriptBuilder: ScriptBuilder | undefined = $state(undefined)
 
 	let reloadAction: () => Promise<void> = async () => {}
 
-	let savedScript: NewScriptWithDraft | undefined = undefined
-	let fullyLoaded = false
+	let savedScript: NewScriptWithDraft | undefined = $state(undefined)
+	let fullyLoaded = $state(false)
 
-	let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
+	let savedPrimarySchedule: ScheduleTrigger | undefined = $state(undefined)
 
 	async function loadScript(): Promise<void> {
 		fullyLoaded = false
@@ -70,8 +67,8 @@
 						{
 							label: 'Show diff',
 							callback: async () => {
-								diffDrawer.openDrawer()
-								diffDrawer.setDiff({
+								diffDrawer?.openDrawer()
+								diffDrawer?.setDiff({
 									mode: 'simple',
 									original: draftOrDeployed,
 									current: urlScript,
@@ -90,14 +87,14 @@
 					workspace: $workspaceStore!,
 					hash
 				})
-				savedScript = structuredClone(scriptByHash) as NewScriptWithDraft
+				savedScript = structuredClone($state.snapshot(scriptByHash)) as NewScriptWithDraft
 				script = { ...scriptByHash, parent_hash: hash, lock: undefined }
 			} else {
 				const scriptWithDraft = await ScriptService.getScriptByPathWithDraft({
 					workspace: $workspaceStore!,
 					path: $page.params.path
 				})
-				savedScript = structuredClone(scriptWithDraft)
+				savedScript = structuredClone($state.snapshot(scriptWithDraft))
 				if (scriptWithDraft.draft != undefined) {
 					script = scriptWithDraft.draft
 					scriptBuilder?.setDraftTriggers(script.draft_triggers)
@@ -127,8 +124,8 @@
 							{
 								label: 'Show diff',
 								callback: async () => {
-									diffDrawer.openDrawer()
-									diffDrawer.setDiff({
+									diffDrawer?.openDrawer()
+									diffDrawer?.setDiff({
 										mode: 'simple',
 										original: deployed,
 										current: draft,
@@ -166,20 +163,20 @@
 		fullyLoaded = true
 	}
 
-	$: {
+	$effect(() => {
 		if ($workspaceStore) {
-			loadScript()
+			untrack(() => loadScript())
 		}
-	}
+	})
 
-	let diffDrawer: DiffDrawer
+	let diffDrawer: DiffDrawer | undefined = $state()
 
 	async function restoreDraft() {
 		if (!savedScript || !savedScript.draft) {
 			sendUserToast('Could not restore to draft', true)
 			return
 		}
-		diffDrawer.closeDrawer()
+		diffDrawer?.closeDrawer()
 		goto(`/scripts/edit/${savedScript.draft.path}`)
 		scriptLoadedFromUrl = undefined
 		loadScript()
@@ -190,7 +187,7 @@
 			sendUserToast('Could not restore to deployed', true)
 			return
 		}
-		diffDrawer.closeDrawer()
+		diffDrawer?.closeDrawer()
 		if (savedScript.draft) {
 			await DraftService.deleteDraft({
 				workspace: $workspaceStore!,
@@ -202,8 +199,6 @@
 		scriptLoadedFromUrl = undefined
 		loadScript()
 	}
-
-	let getInitialAndModifiedValues: GetInitialAndModifiedValues = undefined
 </script>
 
 <DiffDrawer bind:this={diffDrawer} {restoreDraft} {restoreDeployed} />
@@ -222,7 +217,6 @@
 			let newHash = e.detail
 			goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
 		}}
-		bind:getInitialAndModifiedValues
 		on:saveInitial={(e) => {
 			let path = e.detail
 			goto(`/scripts/edit/${path}`)
@@ -235,6 +229,9 @@
 			replaceState(path, $page.state)
 		}}
 	>
-		<UnsavedConfirmationModal {diffDrawer} {getInitialAndModifiedValues} />
+		<UnsavedConfirmationModal
+			{diffDrawer}
+			getInitialAndModifiedValues={scriptBuilder?.getInitialAndModifiedValues}
+		/>
 	</ScriptBuilder>
 {/if}
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index dd4f7fa15f..4d88c4256b 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -20,8 +20,9 @@
 	import ShareModal from '$lib/components/ShareModal.svelte'
 	import { enterpriseLicense, hubBaseUrlStore, userStore, workspaceStore } from '$lib/stores'
 	import { isDeployable, ALL_DEPLOYABLE } from '$lib/utils_deployable'
+	import AIFormAssistant from '$lib/components/copilot/AIFormAssistant.svelte'
 
-	import { onDestroy, setContext, tick } from 'svelte'
+	import { onDestroy, setContext, tick, untrack } from 'svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import {
 		Tabs,
@@ -83,47 +84,32 @@
 	import TriggersEditor from '$lib/components/triggers/TriggersEditor.svelte'
 	import { Triggers } from '$lib/components/triggers/triggers.svelte'
 
-	let script: Script | undefined
-	let topHash: string | undefined
-	let can_write = false
-	let deploymentInProgress = false
+	let script: Script | undefined = $state()
+	let topHash: string | undefined = $state()
+	let can_write = $state(false)
+	let deploymentInProgress = $state(false)
 	let intervalId: NodeJS.Timeout
-	let shareModal: ShareModal
-	let runForm: RunForm
+	let shareModal: ShareModal | undefined = $state()
+	let runForm: RunForm | undefined = $state()
 
-	let scheduledForStr: string | undefined = undefined
-	let invisible_to_owner: boolean | undefined = undefined
-	let overrideTag: string | undefined = undefined
-	let inputSelected: 'saved' | 'history' | undefined = undefined
-	let jsonView = false
+	let scheduledForStr: string | undefined = $state(undefined)
+	let invisible_to_owner: boolean | undefined = $state(undefined)
+	let overrideTag: string | undefined = $state(undefined)
+	let inputSelected: 'saved' | 'history' | undefined = $state(undefined)
+	let jsonView = $state(false)
 
-	$: {
-		const cliTrigger = triggersState.triggers.find((t) => t.type === 'cli')
-		if (cliTrigger) {
-			cliTrigger.extra = {
-				cliCommand: `wmill script run ${script?.path} -d '${JSON.stringify(args)}'`
-			}
-		}
-	}
-
-	$: loading = !script
-
-	let previousHash: string | undefined = undefined
-	$: if ($workspaceStore) {
-		if (previousHash != $page.params.hash) {
-			previousHash = $page.params.hash
-			loadScript($page.params.hash)
-		}
-	}
+	let previousHash: string | undefined = $state(undefined)
 
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 
 	// Add triggers context store
-	const triggersState = new Triggers([
-		{ type: 'webhook', path: '', isDraft: false },
-		{ type: 'email', path: '', isDraft: false },
-		{ type: 'cli', path: '', isDraft: false }
-	])
+	const triggersState = $state(
+		new Triggers([
+			{ type: 'webhook', path: '', isDraft: false },
+			{ type: 'email', path: '', isDraft: false },
+			{ type: 'cli', path: '', isDraft: false }
+		])
+	)
 	setContext<TriggerContext>('TriggerContext', {
 		triggersCount,
 		simplifiedPoll: writable(false),
@@ -175,7 +161,7 @@
 			}
 		}
 	}
-	let starred: boolean | undefined = undefined
+	let starred: boolean | undefined = $state(undefined)
 
 	async function loadTriggers(path: string): Promise<void> {
 		await triggersState.fetchTriggers(
@@ -235,9 +221,9 @@
 		intervalId && clearInterval(intervalId)
 	})
 
-	let isValid = true
+	let isValid = $state(true)
 
-	let runLoading = false
+	let runLoading = $state(false)
 	async function runScript(
 		scheduledForStr: string | undefined,
 		args: Record<string, any>,
@@ -263,7 +249,7 @@
 		}
 	}
 
-	let args: Record<string, any> | undefined = undefined
+	let args: Record<string, any> | undefined = $state(undefined)
 	let hash = window.location.hash
 	if (hash.length > 1) {
 		try {
@@ -275,9 +261,9 @@
 		}
 	}
 
-	let moveDrawer: MoveDrawer
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let persistentScriptDrawer: PersistentScriptDrawer
+	let moveDrawer: MoveDrawer | undefined = $state()
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let persistentScriptDrawer: PersistentScriptDrawer | undefined = $state()
 
 	function getMainButtons(
 		script: Script | undefined,
@@ -353,7 +339,7 @@
 					label: 'Current runs',
 					buttonProps: {
 						onClick: () => {
-							persistentScriptDrawer.open?.(script)
+							persistentScriptDrawer?.open?.(script)
 						},
 						size: 'xs',
 						startIcon: Activity,
@@ -382,9 +368,8 @@
 
 		return buttons
 	}
-	$: mainButtons = getMainButtons(script, args, topHash, can_write)
 
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -408,7 +393,7 @@
 			label: 'Move/Rename',
 			Icon: FolderOpen,
 			onclick: () => {
-				moveDrawer.openDrawer(script?.path ?? '', script?.summary, 'script')
+				moveDrawer?.openDrawer(script?.path ?? '', script?.summary, 'script')
 			}
 		})
 
@@ -424,7 +409,7 @@
 			label: 'Share',
 			Icon: Share,
 			onclick: () => {
-				shareModal.openDrawer(script?.path ?? '', 'script')
+				shareModal?.openDrawer(script?.path ?? '', 'script')
 			}
 		})
 
@@ -433,7 +418,7 @@
 				label: 'Deploy to staging/prod',
 				Icon: ChevronUpSquare,
 				onclick: () => {
-					deploymentDrawer.openDrawer(script?.path ?? '', 'script')
+					deploymentDrawer?.openDrawer(script?.path ?? '', 'script')
 				}
 			})
 		}
@@ -494,7 +479,7 @@
 		return menuItems
 	}
 
-	let versionsDrawerOpen = false
+	let versionsDrawerOpen = $state(false)
 
 	function onKeyDown(event: KeyboardEvent) {
 		switch (event.key) {
@@ -511,9 +496,27 @@
 		}
 	}
 
-	let rightPaneSelected = 'saved_inputs'
+	let rightPaneSelected = $state('saved_inputs')
 
-	let savedInputsV2: SavedInputsV2 | undefined = undefined
+	let savedInputsV2: SavedInputsV2 | undefined = $state(undefined)
+	$effect(() => {
+		const cliTrigger = triggersState.triggers.find((t) => t.type === 'cli')
+		if (cliTrigger) {
+			cliTrigger.extra = {
+				cliCommand: `wmill script run ${script?.path} -d '${JSON.stringify(args)}'`
+			}
+		}
+	})
+	let loading = $derived(!script)
+	$effect(() => {
+		if ($workspaceStore) {
+			if (previousHash != $page.params.hash) {
+				previousHash = $page.params.hash
+				untrack(() => loadScript($page.params.hash))
+			}
+		}
+	})
+	let mainButtons = $derived(getMainButtons(script, args, topHash, can_write))
 </script>
 
 <MoveDrawer
@@ -524,7 +527,7 @@
 	}}
 />
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 <PersistentScriptDrawer bind:this={persistentScriptDrawer} />
@@ -547,199 +550,219 @@
 	</Drawer>
 	{#key script.hash}
 		<DetailPageLayout bind:selected={rightPaneSelected} isOperator={$userStore?.operator}>
-			<svelte:fragment slot="header">
-				<DetailPageHeader
-					{mainButtons}
-					menuItems={getMenuItems(script, deployUiSettings)}
-					title={defaultIfEmptyString(script.summary, script.path)}
-					bind:errorHandlerMuted={script.ws_error_handler_muted}
-					errorHandlerKind="script"
-					scriptOrFlowPath={script.path}
-					tag={script.tag}
-					on:seeTriggers={() => {
-						rightPaneSelected = 'triggers'
-					}}
-				>
-					<svelte:fragment slot="trigger-badges">
-						<TriggersBadge
-							showOnlyWithCount={true}
-							showDraft={false}
-							path={script.path}
-							newItem={false}
-							isFlow={false}
-							selected={rightPaneSelected === 'triggers'}
-							onSelect={async (triggerIndex: number) => {
-								if (rightPaneSelected !== 'triggers') {
-									rightPaneSelected = 'triggers'
-								}
-								await tick()
-								triggersState.selectedTriggerIndex = triggerIndex
-							}}
-						/>
-					</svelte:fragment>
-					{#if $workspaceStore}
-						<Star
-							kind="script"
-							path={script.path}
-							{starred}
-							workspace_id={$workspaceStore}
-							on:starred={() => {
-								starred = !starred
-							}}
-						/>
-					{/if}
-					{#if script.codebase}
-						<Badge
-							>bundle<Tooltip
-								>This script is deployed as a bundle and can only be deployed from the CLI for now</Tooltip
-							></Badge
-						>
-					{/if}
-					{#if script?.priority != undefined}
-						<div class="hidden md:block">
-							<Badge color="blue" variant="outlined" size="xs">
-								{`Priority: ${script.priority}`}
-							</Badge>
-						</div>
-					{/if}
-					{#if script?.restart_unless_cancelled ?? false}
-						<button on:click={() => persistentScriptDrawer.open?.(script)}>
+			{#snippet header()}
+				{#if script}
+					<DetailPageHeader
+						{mainButtons}
+						menuItems={getMenuItems(script, deployUiSettings)}
+						title={defaultIfEmptyString(script.summary, script.path)}
+						bind:errorHandlerMuted={script.ws_error_handler_muted}
+						errorHandlerKind="script"
+						scriptOrFlowPath={script.path}
+						tag={script.tag}
+						on:seeTriggers={() => {
+							rightPaneSelected = 'triggers'
+						}}
+					>
+						<!-- @migration-task: migrate this slot by hand, `trigger-badges` is an invalid identifier -->
+						<svelte:fragment slot="trigger-badges">
+							<TriggersBadge
+								showOnlyWithCount={true}
+								showDraft={false}
+								path={script.path}
+								newItem={false}
+								isFlow={false}
+								selected={rightPaneSelected === 'triggers'}
+								onSelect={async (triggerIndex: number) => {
+									if (rightPaneSelected !== 'triggers') {
+										rightPaneSelected = 'triggers'
+									}
+									await tick()
+									triggersState.selectedTriggerIndex = triggerIndex
+								}}
+							/>
+						</svelte:fragment>
+						{#if $workspaceStore}
+							<Star
+								kind="script"
+								path={script.path}
+								{starred}
+								workspace_id={$workspaceStore}
+								on:starred={() => {
+									starred = !starred
+								}}
+							/>
+						{/if}
+						{#if script.codebase}
+							<Badge
+								>bundle<Tooltip
+									>This script is deployed as a bundle and can only be deployed from the CLI for now</Tooltip
+								></Badge
+							>
+						{/if}
+						{#if script?.priority != undefined}
 							<div class="hidden md:block">
-								<Badge color="red" variant="outlined" size="xs">Persistent</Badge>
+								<Badge color="blue" variant="outlined" size="xs">
+									{`Priority: ${script.priority}`}
+								</Badge>
 							</div>
-						</button>
-					{/if}
-					{#if script?.concurrent_limit != undefined && script.concurrency_time_window_s != undefined}
-						<div class="hidden md:block">
-							<Badge color="gray" variant="outlined" size="xs">
-								{`Concurrency limit: ${script.concurrent_limit} runs every ${script.concurrency_time_window_s}s`}
-							</Badge>
-						</div>
-					{/if}
-				</DetailPageHeader>
-			</svelte:fragment>
-			<svelte:fragment slot="form">
-				<div class="p-8 w-full max-w-3xl mx-auto">
-					<div class="flex flex-col gap-0.5 mb-1">
-						{#if script.lock_error_logs || topHash || script.archived || script.deleted}
-							<div class="flex flex-col gap-2 my-2">
-								{#if script.lock_error_logs}
-									<div
-										class="bg-red-100 dark:bg-red-700 border-l-4 border-red-500 p-4"
-										role="alert"
-									>
-										<p class="font-bold">Error deploying this script</p>
-										<p>
-											This script has not been deployed successfully because of the following
-											errors:
-										</p>
-										<LogViewer content={script.lock_error_logs} isLoading={false} tag={undefined} />
-									</div>
-								{/if}
-								{#if topHash}
-									<div class="mt-2"></div>
-									<Alert type="warning" title="Not HEAD">
-										This hash is not HEAD (latest non-archived version at this path) :
-										<a href="{base}/scripts/get/{topHash}?workspace={$workspaceStore}"
-											>Go to the HEAD of this path</a
+						{/if}
+						{#if script?.restart_unless_cancelled ?? false}
+							<button onclick={() => persistentScriptDrawer?.open?.(script)}>
+								<div class="hidden md:block">
+									<Badge color="red" variant="outlined" size="xs">Persistent</Badge>
+								</div>
+							</button>
+						{/if}
+						{#if script?.concurrent_limit != undefined && script.concurrency_time_window_s != undefined}
+							<div class="hidden md:block">
+								<Badge color="gray" variant="outlined" size="xs">
+									{`Concurrency limit: ${script.concurrent_limit} runs every ${script.concurrency_time_window_s}s`}
+								</Badge>
+							</div>
+						{/if}
+					</DetailPageHeader>
+				{/if}
+			{/snippet}
+			{#snippet form()}
+				{#if script}
+					<div class="p-8 w-full max-w-3xl mx-auto">
+						<div class="flex flex-col gap-0.5 mb-1">
+							{#if script.lock_error_logs || topHash || script.archived || script.deleted}
+								<div class="flex flex-col gap-2 my-2">
+									{#if script.lock_error_logs}
+										<div
+											class="bg-red-100 dark:bg-red-700 border-l-4 border-red-500 p-4"
+											role="alert"
 										>
-									</Alert>
-								{/if}
-								{#if script.archived && !topHash}
-									<Alert type="error" title="Archived">This path was archived</Alert>
-								{/if}
-								{#if script.deleted}
-									<div
-										class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4"
-										role="alert"
-									>
-										<p class="font-bold">Deleted</p>
-										<p>The content of this script was deleted (by an admin, no less)</p>
-									</div>
-								{/if}
-							</div>
-						{/if}
+											<p class="font-bold">Error deploying this script</p>
+											<p>
+												This script has not been deployed successfully because of the following
+												errors:
+											</p>
+											<LogViewer
+												content={script.lock_error_logs}
+												isLoading={false}
+												tag={undefined}
+											/>
+										</div>
+									{/if}
+									{#if topHash}
+										<div class="mt-2"></div>
+										<Alert type="warning" title="Not HEAD">
+											This hash is not HEAD (latest non-archived version at this path) :
+											<a href="{base}/scripts/get/{topHash}?workspace={$workspaceStore}"
+												>Go to the HEAD of this path</a
+											>
+										</Alert>
+									{/if}
+									{#if script.archived && !topHash}
+										<Alert type="error" title="Archived">This path was archived</Alert>
+									{/if}
+									{#if script.deleted}
+										<div
+											class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4"
+											role="alert"
+										>
+											<p class="font-bold">Deleted</p>
+											<p>The content of this script was deleted (by an admin, no less)</p>
+										</div>
+									{/if}
+								</div>
+							{/if}
 
-						{#if !emptyString(script.description)}
-							<GfmMarkdown md={defaultIfEmptyString(script?.description, 'No description')} />
-						{/if}
-					</div>
-
-					{#if deploymentInProgress}
-						<Badge color="yellow">
-							<Loader2 size={12} class="inline animate-spin mr-1" />
-							Deployment in progress
-						</Badge>
-					{/if}
-
-					<div class="flex flex-col align-left">
-						<div class="flex flex-row justify-between">
-							<InputSelectedBadge
-								on:click={() => {
-									savedInputsV2?.resetSelected()
-								}}
-								{inputSelected}
-							/>
-							<Toggle
-								bind:checked={jsonView}
-								label="JSON View"
-								size="xs"
-								options={{
-									right: 'JSON',
-									rightTooltip: 'Fill args from JSON'
-								}}
-								lightMode
-								on:change={(e) => {
-									runForm?.setCode(JSON.stringify(args ?? {}, null, '\t'))
-								}}
-							/>
+							{#if !emptyString(script.description)}
+								<GfmMarkdown md={defaultIfEmptyString(script?.description, 'No description')} />
+							{/if}
 						</div>
 
-						<RunForm
-							bind:scheduledForStr
-							bind:invisible_to_owner
-							bind:overrideTag
-							viewKeybinding
-							loading={runLoading}
-							autofocus
-							detailed={false}
-							bind:isValid
-							runnable={script}
-							runAction={runScript}
-							bind:args
-							schedulable={true}
-							bind:this={runForm}
-							{jsonView}
-						/>
-					</div>
-
-					<div class="py-10"></div>
-					{#if !emptyString(script.summary)}
-						<div class="mb-2">
-							<span class="!text-tertiary">{script.path}</span>
-						</div>
-					{/if}
-					<div class="flex flex-row gap-x-2 flex-wrap items-center">
-						<span class="text-sm text-tertiary">
-							Edited <TimeAgo date={script.created_at || ''} /> by {script.created_by || 'unknown'}
-						</span>
-						<Badge small color="gray">
-							{truncateHash(script?.hash ?? '')}
-						</Badge>
-						{#if script?.is_template}
-							<Badge color="blue">Template</Badge>
-						{/if}
-						{#if script && script.kind !== 'script'}
-							<Badge color="blue">
-								{script?.kind}
+						{#if deploymentInProgress}
+							<Badge color="yellow">
+								<Loader2 size={12} class="inline animate-spin mr-1" />
+								Deployment in progress
 							</Badge>
 						{/if}
 
-						<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
+						<div class="flex flex-col align-left">
+							<div class="flex flex-row justify-between">
+								<InputSelectedBadge
+									onReject={() => {
+										savedInputsV2?.resetSelected()
+									}}
+									{inputSelected}
+								/>
+								<Toggle
+									bind:checked={jsonView}
+									label="JSON View"
+									size="xs"
+									options={{
+										right: 'JSON',
+										rightTooltip: 'Fill args from JSON'
+									}}
+									lightMode
+									on:change={(e) => {
+										runForm?.setCode(JSON.stringify(args ?? {}, null, '\t'))
+									}}
+								/>
+							</div>
+
+							{#if script?.schema?.prompt_for_ai !== undefined}
+								<AIFormAssistant
+									instructions={script.schema?.prompt_for_ai as string}
+									onEditInstructions={() => {
+										goto(`/scripts/edit/${script?.path}?metadata_open=true`)
+									}}
+									runnableType="script"
+								/>
+							{/if}
+
+							<RunForm
+								bind:scheduledForStr
+								bind:invisible_to_owner
+								bind:overrideTag
+								viewKeybinding
+								loading={runLoading}
+								autofocus
+								detailed={false}
+								bind:isValid
+								runnable={script}
+								runAction={runScript}
+								bind:args
+								schedulable={true}
+								bind:this={runForm}
+								{jsonView}
+							/>
+						</div>
+
+						<div class="py-10"></div>
+						{#if !emptyString(script.summary)}
+							<div class="mb-2">
+								<span class="!text-tertiary">{script.path}</span>
+							</div>
+						{/if}
+						<div class="flex flex-row gap-x-2 flex-wrap items-center">
+							<span class="text-sm text-tertiary">
+								Edited <TimeAgo date={script.created_at || ''} /> by {script.created_by ||
+									'unknown'}
+							</span>
+							<Badge small color="gray">
+								{truncateHash(script?.hash ?? '')}
+							</Badge>
+							{#if script?.is_template}
+								<Badge color="blue">Template</Badge>
+							{/if}
+							{#if script && script.kind !== 'script'}
+								<Badge color="blue">
+									{script?.kind}
+								</Badge>
+							{/if}
+
+							<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
+						</div>
 					</div>
-				</div>
-			</svelte:fragment>
-			<svelte:fragment slot="save_inputs">
+				{/if}
+			{/snippet}
+			{#snippet save_inputs()}
 				{#if args}
 					<SavedInputsV2
 						schema={script?.schema}
@@ -756,87 +779,93 @@
 						}}
 					/>
 				{/if}
-			</svelte:fragment>
-			<svelte:fragment slot="triggers">
-				<TriggersEditor
-					initialPath={script.path}
-					currentPath={script.path}
-					noEditor={true}
-					newItem={false}
-					isFlow={false}
-					schema={script.schema}
-					isDeployed={true}
-					noCapture={true}
-					isEditor={false}
-				/>
-			</svelte:fragment>
-			<svelte:fragment slot="script">
-				<div class="h-full">
-					<Skeleton {loading} layout={[[20]]} />
-
-					<Tabs selected="code">
-						<Tab value="code" size="xs">Code</Tab>
-						<Tab value="dependencies" size="xs">Lockfile</Tab>
-						<Tab value="schema" size="xs">Schema</Tab>
-						<svelte:fragment slot="content">
-							<TabContent value="code">
-								<div class="p-2 w-full">
-									<HighlightCode
-										language={script.language}
-										code={script.content}
-										class="whitespace-pre-wrap"
-									/>
-								</div>
-							</TabContent>
-							<TabContent value="dependencies">
-								<div>
-									{#if script?.lock}
-										<div class="relative overflow-x-auto w-full">
-											<Button
-												wrapperClasses="absolute top-2 right-2 z-20"
-												on:click={() => copyToClipboard(script?.lock)}
-												color="light"
-												size="xs2"
-												startIcon={{
-													icon: ClipboardCopy
-												}}
-												iconOnly
-											/>
-											<pre class="bg-surface-secondary text-sm p-2 h-full overflow-auto w-full"
-												>{script.lock}</pre
-											>
-										</div>
-									{:else}
-										<p class="bg-surface-secondary text-sm p-2">
-											There is no lock file for this script
-										</p>
-									{/if}
-								</div>
-							</TabContent>
-							<TabContent value="schema">
-								<div class="p-1 relative h-full">
-									<button
-										on:click={() => copyToClipboard(JSON.stringify(script?.schema, null, 4))}
-										class="absolute top-2 right-2"
-									>
-										<ClipboardCopy size={14} />
-									</button>
-									<Highlight language={json} code={JSON.stringify(script?.schema, null, 4)} />
-								</div>
-							</TabContent>
-						</svelte:fragment>
-					</Tabs>
-				</div>
-
-				{#if script.envs && script.envs.length > 0}
-					<h3>Static Env Variables</h3>
-					<ul>
-						{#each script.envs as e}
-							<li>{e}</li>
-						{/each}
-					</ul>
+			{/snippet}
+			{#snippet triggers()}
+				{#if script}
+					<TriggersEditor
+						initialPath={script.path}
+						currentPath={script.path}
+						noEditor={true}
+						newItem={false}
+						isFlow={false}
+						schema={script.schema}
+						isDeployed={true}
+						noCapture={true}
+						isEditor={false}
+					/>
 				{/if}
-			</svelte:fragment>
+			{/snippet}
+			{#snippet scriptRender()}
+				{#if script}
+					<div class="h-full">
+						<Skeleton {loading} layout={[[20]]} />
+
+						<Tabs selected="code">
+							<Tab value="code" size="xs">Code</Tab>
+							<Tab value="dependencies" size="xs">Lockfile</Tab>
+							<Tab value="schema" size="xs">Schema</Tab>
+							{#snippet content()}
+								{#if script}
+									<TabContent value="code">
+										<div class="p-2 w-full">
+											<HighlightCode
+												language={script.language}
+												code={script.content}
+												class="whitespace-pre-wrap"
+											/>
+										</div>
+									</TabContent>
+									<TabContent value="dependencies">
+										<div>
+											{#if script?.lock}
+												<div class="relative overflow-x-auto w-full">
+													<Button
+														wrapperClasses="absolute top-2 right-2 z-20"
+														on:click={() => copyToClipboard(script?.lock)}
+														color="light"
+														size="xs2"
+														startIcon={{
+															icon: ClipboardCopy
+														}}
+														iconOnly
+													/>
+													<pre class="bg-surface-secondary text-sm p-2 h-full overflow-auto w-full"
+														>{script.lock}</pre
+													>
+												</div>
+											{:else}
+												<p class="bg-surface-secondary text-sm p-2">
+													There is no lock file for this script
+												</p>
+											{/if}
+										</div>
+									</TabContent>
+									<TabContent value="schema">
+										<div class="p-1 relative h-full">
+											<button
+												onclick={() => copyToClipboard(JSON.stringify(script?.schema, null, 4))}
+												class="absolute top-2 right-2"
+											>
+												<ClipboardCopy size={14} />
+											</button>
+											<Highlight language={json} code={JSON.stringify(script?.schema, null, 4)} />
+										</div>
+									</TabContent>
+								{/if}
+							{/snippet}
+						</Tabs>
+					</div>
+
+					{#if script.envs && script.envs.length > 0}
+						<h3>Static Env Variables</h3>
+						<ul>
+							{#each script.envs as e}
+								<li>{e}</li>
+							{/each}
+						</ul>
+					{/if}
+				{/if}
+			{/snippet}
 		</DetailPageLayout>
 	{/key}
 {/if}
diff --git a/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
index 0870c80150..ee777f3f99 100644
--- a/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
@@ -21,7 +21,7 @@
 		</div>
 	</div>
 
-	{#if !$devopsRole}
+	{#if $devopsRole == false}
 		<Alert title="Service logs are only available to superadmins" type="warning">
 			Service logs are only available to superadmins (or devops)
 		</Alert>
diff --git a/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
index f117702fba..f461ebebde 100644
--- a/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		SqsTriggerService,
 		WorkspaceService,
@@ -41,11 +43,11 @@
 
 	type TriggerD = SqsTrigger & { canWrite: boolean }
 
-	let triggers: TriggerD[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let triggers: TriggerD[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -109,28 +111,33 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
-	}
-	let sqsTriggerEditor: SqsTriggerEditor
+	})
+	let sqsTriggerEditor: SqsTriggerEditor | undefined = $state()
 
-	let filteredItems: (TriggerD & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
+	let filteredItems: (TriggerD & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let preFilteredItems: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
 
 	const TRIGGER_PATH_KIND_FILTER_SETTING = 'filter_path_of'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING) as 'trigger' | 'script_flow') ?? 'trigger'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	run(() => {
+		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	run(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: TriggerD,
@@ -154,28 +161,32 @@
 		}
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? selectedFilterKind === 'trigger'
-				? triggers?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+	run(() => {
+		preFilteredItems =
+			ownerFilter != undefined
+				? selectedFilterKind === 'trigger'
+					? triggers?.filter(
+							(x) =>
+								x.path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+					: triggers?.filter(
+							(x) =>
+								x.script_path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+				: triggers?.filter((x) =>
+						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
 					)
-				: triggers?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-					)
-			: triggers?.filter((x) =>
-					filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'trigger'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -183,8 +194,11 @@
 			: Array.from(
 					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	run(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders) {
 		setQuery(
@@ -216,7 +230,9 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders)
+	run(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders)
+	})
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
@@ -231,7 +247,7 @@
 
 <CenteredPage>
 	<PageHeader title="SQS triggers" tooltip="SQS trigger">
-		<Button size="md" startIcon={{ icon: Plus }} on:click={() => sqsTriggerEditor.openNew(false)}>
+		<Button size="md" startIcon={{ icon: Plus }} on:click={() => sqsTriggerEditor?.openNew(false)}>
 			New&nbsp;SQS trigger
 		</Button>
 	</PageHeader>
@@ -252,9 +268,11 @@
 			/>
 			<div class="flex flex-row items-center gap-2 mt-6">
 				<div class="text-sm shrink-0"> Filter by path of </div>
-				<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-					<ToggleButton small value="trigger" label="SQS trigger" icon={AwsIcon} {item} />
-					<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+				<ToggleButtonGroup bind:selected={selectedFilterKind}>
+					{#snippet children({ item })}
+						<ToggleButton small value="trigger" label="SQS trigger" icon={AwsIcon} {item} />
+						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 			<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
@@ -293,7 +311,7 @@
 
 							<a
 								href="#{path}"
-								on:click={() => sqsTriggerEditor?.openEdit(path, is_flow)}
+								onclick={() => sqsTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
 								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
@@ -319,26 +337,28 @@
 											/>
 											<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 										</span>
-										<div slot="text">
-											{#if enabled}
-												{#if !server_id}
-													SQS trigger is starting...
+										{#snippet text()}
+											<div>
+												{#if enabled}
+													{#if !server_id}
+														SQS trigger is starting...
+													{:else}
+														Could not connect to SQS{error ? ': ' + error : ''}
+													{/if}
 												{:else}
-													Could not connect to SQS{error ? ': ' + error : ''}
+													Disabled because of an error: {error}
 												{/if}
-											{:else}
-												Disabled because of an error: {error}
-											{/if}
-										</div>
+											</div>
+										{/snippet}
 									</Popover>
 								{:else if enabled}
 									<Popover notClickable>
 										<span class="flex h-4 w-4">
 											<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
 										</span>
-										<div slot="text">
-											Connected to sqs{!server_id ? ' (shutting down...)' : ''}</div
-										>
+										{#snippet text()}
+											<div> Connected to sqs{!server_id ? ' (shutting down...)' : ''}</div>
+										{/snippet}
 									</Popover>
 								{/if}
 							</div>
@@ -403,7 +423,7 @@
 														displayName: 'Deploy to prod/staging',
 														icon: FileUp,
 														action: () => {
-															deploymentDrawer.openDrawer(path, 'trigger', {
+															deploymentDrawer?.openDrawer(path, 'trigger', {
 																triggers: {
 																	kind: 'sqs'
 																}
@@ -421,7 +441,7 @@
 											displayName: canWrite ? 'Share' : 'See Permissions',
 											icon: Share,
 											action: () => {
-												shareModal.openDrawer(path, 'sqs_trigger')
+												shareModal?.openDrawer(path, 'sqs_trigger')
 											}
 										}
 									]}
@@ -446,7 +466,7 @@
 	{#if items && items?.length > 15 && nbDisplayed < items.length}
 		<span class="text-xs"
 			>{nbDisplayed} items out of {items.length}
-			<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+			<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 		>
 	{/if}
 </CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/+layout@(root).svelte b/frontend/src/routes/(root)/(logged)/user/(user)/+layout@(root).svelte
index d9faa75e2a..5f755f2008 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/+layout@(root).svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/+layout@(root).svelte
@@ -1,3 +1,13 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let { children } = $props()
+</script>
+
 <div class="min-h-screen antialiased">
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte
index c62b7788ff..d489169927 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { goto } from '$lib/navigation'
 	import { base } from '$lib/base'
 	import {
@@ -28,18 +30,18 @@
 
 	const rd = $page.url.searchParams.get('rd')
 
-	let id = ''
-	let name = ''
-	let username = ''
+	let id = $state('')
+	let name = $state('')
+	let username = $state('')
 
-	let errorId = ''
-	let errorUser = ''
-	let aiKey = ''
-	let codeCompletionEnabled = true
-	let checking = false
+	let errorId = $state('')
+	let errorUser = $state('')
+	let aiKey = $state('')
+	let codeCompletionEnabled = $state(true)
+	let checking = $state(false)
 
-	let workspaceColor: string | null = null
-	let colorEnabled = false
+	let workspaceColor: string | null = $state(null)
+	let colorEnabled = $state(false)
 
 	function generateRandomColor() {
 		const randomColor =
@@ -50,12 +52,6 @@
 		workspaceColor = randomColor
 	}
 
-	$: id = name.toLowerCase().replace(/\s/gi, '-')
-
-	$: validateName(id)
-	$: errorUser = validateUsername(username)
-	$: colorEnabled && !workspaceColor && generateRandomColor()
-
 	async function validateName(id: string): Promise<void> {
 		checking = true
 		let exists = await WorkspaceService.existsWorkspace({ requestBody: { id } })
@@ -129,7 +125,7 @@
 							code_completion_model: codeCompletionEnabled
 								? { model: AI_DEFAULT_MODELS[selected][0], provider: selected }
 								: undefined
-					  }
+						}
 					: {}
 			})
 		}
@@ -158,11 +154,12 @@
 		}
 		if (!$usersWorkspaceStore) {
 			const url = $page.url
+			console.log('logout 2')
 			await logoutWithRedirect(url.href.replace(url.origin, ''))
 		}
 	}
 
-	let automateUsernameCreation = false
+	let automateUsernameCreation = $state(false)
 	async function getAutomateUsernameCreationSetting() {
 		automateUsernameCreation =
 			((await SettingService.getGlobal({ key: 'automate_username_creation' })) as any) ?? false
@@ -190,20 +187,31 @@
 		})
 	})
 
-	let isDomainAllowed: undefined | boolean = undefined
+	let isDomainAllowed: undefined | boolean = $state(undefined)
 
-	$: domain = $usersWorkspaceStore?.email.split('@')[1]
-
-	let auto_invite = false
-	let operatorOnly = false
-	let selected: Exclude<AIProvider, 'customai'> = 'openai'
+	let auto_invite = $state(false)
+	let operatorOnly = $state(false)
+	let selected: Exclude<AIProvider, 'customai'> = $state('openai')
+	run(() => {
+		id = name.toLowerCase().replace(/\s/gi, '-')
+	})
+	run(() => {
+		validateName(id)
+	})
+	run(() => {
+		errorUser = validateUsername(username)
+	})
+	run(() => {
+		colorEnabled && !workspaceColor && generateRandomColor()
+	})
+	let domain = $derived($usersWorkspaceStore?.email.split('@')[1])
 </script>
 
 <CenteredModal title="New Workspace">
 	<label class="block pb-4 pt-4">
 		<span class="text-secondary text-sm">Workspace name</span>
 		<span class="ml-4 text-tertiary text-xs">Displayable name</span>
-		<!-- svelte-ignore a11y-autofocus -->
+		<!-- svelte-ignore a11y_autofocus -->
 		<input autofocus type="text" bind:value={name} />
 	</label>
 	<label class="block pb-4">
@@ -239,7 +247,7 @@
 	{#if !automateUsernameCreation}
 		<label class="block pb-4">
 			<span class="text-secondary text-sm">Your username in that workspace</span>
-			<input type="text" bind:value={username} on:keyup={handleKeyUp} />
+			<input type="text" bind:value={username} onkeyup={handleKeyUp} />
 			{#if errorUser}
 				<span class="text-red-500 text-xs">{errorUser}</span>
 			{/if}
@@ -260,11 +268,13 @@
 			</span>
 
 			<div class="pb-2">
-				<ToggleButtonGroup bind:selected let:item>
-					<ToggleButton value="openai" label="OpenAI" {item} />
-					<ToggleButton value="anthropic" label="Anthropic" {item} />
-					<ToggleButton value="mistral" label="Mistral" {item} />
-					<ToggleButton value="deepseek" label="DeepSeek" {item} />
+				<ToggleButtonGroup bind:selected>
+					{#snippet children({ item })}
+						<ToggleButton value="openai" label="OpenAI" {item} />
+						<ToggleButton value="anthropic" label="Anthropic" {item} />
+						<ToggleButton value="mistral" label="Mistral" {item} />
+						<ToggleButton value="deepseek" label="DeepSeek" {item} />
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 		</label>
@@ -275,7 +285,7 @@
 				type="password"
 				autocomplete="new-password"
 				bind:value={aiKey}
-				on:keyup={handleKeyUp}
+				onkeyup={handleKeyUp}
 			/>
 			<TestAIKey
 				apiKey={aiKey}
@@ -317,10 +327,11 @@
 			on:selected={(e) => {
 				operatorOnly = e.detail == 'operator'
 			}}
-			let:item
 		>
-			<ToggleButton value="operator" size="xs" label="Operator" {item} />
-			<ToggleButton value="developer" size="xs" label="Developer" {item} />
+			{#snippet children({ item })}
+				<ToggleButton value="operator" size="xs" label="Operator" {item} />
+				<ToggleButton value="developer" size="xs" label="Developer" {item} />
+			{/snippet}
 		</ToggleButtonGroup>
 	</div>
 	<div class="flex flex-wrap flex-row justify-between pt-10 gap-1">
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
index b9c91de055..a54b13333e 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
@@ -14,6 +14,11 @@
 		} catch (err) {
 			console.error(err)
 		}
+		if ($page.url.pathname != '/user/logout' && $page.url.pathname != '/user/login') {
+			return
+		}
+
+		console.log('logout 4', rd)
 		goto(rd ?? '/user/login')
 	})
 </script>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
index abf5ce563f..8f18d94ce5 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
@@ -62,6 +62,7 @@
 			}
 		} else {
 			const url = $page.url
+			console.log('logout 1')
 			await logoutWithRedirect(url.href.replace(url.origin, ''))
 		}
 	}
@@ -133,7 +134,7 @@
 				} else {
 					await goto(rd ?? '/')
 				}
-				console.log('Workspace selected going to ' + (rd ? `rd: ${rd}` : 'home')) 
+				console.log('Workspace selected going to ' + (rd ? `rd: ${rd}` : 'home'))
 			} catch (e) {
 				console.error('Error going to', rd, e)
 				window.location.reload()
diff --git a/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
index 03baae3159..1919888d0e 100644
--- a/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import {
 		WebsocketTriggerService,
 		WorkspaceService,
@@ -40,11 +42,11 @@
 
 	type TriggerW = WebsocketTrigger & { canWrite: boolean }
 
-	let triggers: TriggerW[] = []
-	let shareModal: ShareModal
-	let loading = true
-	let deploymentDrawer: DeployWorkspaceDrawer
-	let deployUiSettings: WorkspaceDeployUISettings | undefined = undefined
+	let triggers: TriggerW[] = $state([])
+	let shareModal: ShareModal | undefined = $state()
+	let loading = $state(true)
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
+	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
 		if (!$enterpriseLicense) {
@@ -108,28 +110,33 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
-	}
-	let websocketTriggerEditor: WebsocketTriggerEditor
+	})
+	let websocketTriggerEditor: WebsocketTriggerEditor | undefined = $state()
 
-	let filteredItems: (TriggerW & { marked?: any })[] | undefined = []
-	let items: typeof filteredItems | undefined = []
-	let preFilteredItems: typeof filteredItems | undefined = []
-	let filter = ''
-	let ownerFilter: string | undefined = undefined
-	let nbDisplayed = 15
+	let filteredItems: (TriggerW & { marked?: any })[] | undefined = $state([])
+	let items: typeof filteredItems | undefined = $state([])
+	let preFilteredItems: typeof filteredItems | undefined = $state([])
+	let filter = $state('')
+	let ownerFilter: string | undefined = $state(undefined)
+	let nbDisplayed = $state(15)
 
 	const TRIGGER_PATH_KIND_FILTER_SETTING = 'filter_path_of'
 	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
-	let selectedFilterKind =
+	let selectedFilterKind = $state(
 		(getLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING) as 'trigger' | 'script_flow') ?? 'trigger'
-	let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true'
+	)
+	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	$: storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
-	$: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	run(() => {
+		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
+	})
+	run(() => {
+		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
+	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: TriggerW,
@@ -153,28 +160,32 @@
 		}
 	}
 
-	$: preFilteredItems =
-		ownerFilter != undefined
-			? selectedFilterKind === 'trigger'
-				? triggers?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+	run(() => {
+		preFilteredItems =
+			ownerFilter != undefined
+				? selectedFilterKind === 'trigger'
+					? triggers?.filter(
+							(x) =>
+								x.path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+					: triggers?.filter(
+							(x) =>
+								x.script_path.startsWith(ownerFilter + '/') &&
+								filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
+						)
+				: triggers?.filter((x) =>
+						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
 					)
-				: triggers?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-					)
-			: triggers?.filter((x) =>
-					filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders)
-				)
+	})
 
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
 
-	$: owners =
+	let owners = $derived(
 		selectedFilterKind === 'trigger'
 			? Array.from(
 					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
@@ -182,8 +193,11 @@
 			: Array.from(
 					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
 				).sort()
+	)
 
-	$: items = filter !== '' ? filteredItems : preFilteredItems
+	run(() => {
+		items = filter !== '' ? filteredItems : preFilteredItems
+	})
 
 	function updateQueryFilters(selectedFilterKind, filterUserFolders) {
 		setQuery(
@@ -215,7 +229,9 @@
 		loadQueryFilters()
 	})
 
-	$: updateQueryFilters(selectedFilterKind, filterUserFolders)
+	run(() => {
+		updateQueryFilters(selectedFilterKind, filterUserFolders)
+	})
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
@@ -236,7 +252,7 @@
 		<Button
 			size="md"
 			startIcon={{ icon: Plus }}
-			on:click={() => websocketTriggerEditor.openNew(false)}
+			on:click={() => websocketTriggerEditor?.openNew(false)}
 		>
 			New&nbsp;WebSocket trigger
 		</Button>
@@ -253,9 +269,11 @@
 			<input type="text" placeholder="Search WS triggers" bind:value={filter} class="search-item" />
 			<div class="flex flex-row items-center gap-2 mt-6">
 				<div class="text-sm shrink-0"> Filter by path of </div>
-				<ToggleButtonGroup bind:selected={selectedFilterKind} let:item>
-					<ToggleButton small value="trigger" label="WS trigger" icon={Unplug} {item} />
-					<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+				<ToggleButtonGroup bind:selected={selectedFilterKind}>
+					{#snippet children({ item })}
+						<ToggleButton small value="trigger" label="WS trigger" icon={Unplug} {item} />
+						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 			<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
@@ -294,7 +312,7 @@
 
 							<a
 								href="#{path}"
-								on:click={() => websocketTriggerEditor?.openEdit(path, is_flow)}
+								onclick={() => websocketTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
 								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
@@ -332,26 +350,30 @@
 											/>
 											<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 										</span>
-										<div slot="text">
-											{#if enabled}
-												{#if !server_id}
-													WebSocket is starting...
+										{#snippet text()}
+											<div>
+												{#if enabled}
+													{#if !server_id}
+														WebSocket is starting...
+													{:else}
+														WebSocket is not connected{error ? ': ' + error : ''}
+													{/if}
 												{:else}
-													WebSocket is not connected{error ? ': ' + error : ''}
+													WebSocket was disabled because of an error: {error}
 												{/if}
-											{:else}
-												WebSocket was disabled because of an error: {error}
-											{/if}
-										</div>
+											</div>
+										{/snippet}
 									</Popover>
 								{:else if enabled}
 									<Popover notClickable>
 										<span class="flex h-4 w-4">
 											<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
 										</span>
-										<div slot="text">
-											WebSocket is connected{!server_id ? ' (shutting down...)' : ''}
-										</div>
+										{#snippet text()}
+											<div>
+												WebSocket is connected{!server_id ? ' (shutting down...)' : ''}
+											</div>
+										{/snippet}
 									</Popover>
 								{/if}
 							</div>
@@ -412,7 +434,7 @@
 														displayName: 'Deploy to prod/staging',
 														icon: FileUp,
 														action: () => {
-															deploymentDrawer.openDrawer(path, 'trigger', {
+															deploymentDrawer?.openDrawer(path, 'trigger', {
 																triggers: {
 																	kind: 'websockets'
 																}
@@ -430,7 +452,7 @@
 											displayName: canWrite ? 'Share' : 'See Permissions',
 											icon: Share,
 											action: () => {
-												shareModal.openDrawer(path, 'websocket_trigger')
+												shareModal?.openDrawer(path, 'websocket_trigger')
 											}
 										}
 									]}
@@ -455,7 +477,7 @@
 	{#if items && items?.length > 15 && nbDisplayed < items.length}
 		<span class="text-xs"
 			>{nbDisplayed} items out of {items.length}
-			<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+			<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 		>
 	{/if}
 </CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index 7844029664..749a17755d 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import AssignableTags from '$lib/components/AssignableTags.svelte'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import { Button, Skeleton, Tab, Tabs } from '$lib/components/common'
+	import { Alert, Button, Skeleton, Tab, Tabs } from '$lib/components/common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
@@ -24,24 +24,30 @@
 		userWorkspaces
 	} from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
-	import { displayDate, groupBy, pluralize, truncate } from '$lib/utils'
-	import { AlertTriangle, LineChart, List, Plus, Search } from 'lucide-svelte'
+	import {
+		AGENT_WORKER_NAME_PREFIX,
+		displayDate,
+		groupBy,
+		isAgentWorkerShell,
+		pluralize,
+		truncate
+	} from '$lib/utils'
+	import { AlertTriangle, LineChart, List, Plus, Search, Terminal } from 'lucide-svelte'
 	import { getContext, onDestroy, onMount } from 'svelte'
-	import AutoComplete from 'simple-svelte-autocomplete'
 
 	import YAML from 'yaml'
 	import { DEFAULT_TAGS_WORKSPACES_SETTING } from '$lib/consts'
 	import AutoscalingEvents from '$lib/components/AutoscalingEvents.svelte'
 	import HttpAgentWorkerDrawer from '$lib/components/HttpAgentWorkerDrawer.svelte'
+	import WorkerRepl from '$lib/components/WorkerRepl.svelte'
+	import Select from '$lib/components/Select.svelte'
 
 	let workers: WorkerPing[] | undefined = undefined
 	let workerGroups: Record<string, any> | undefined = undefined
 	let groupedWorkers: [string, [string, WorkerPing[]][]][] = []
 	let intervalId: NodeJS.Timeout | undefined
-
 	const splitter = '_%%%_'
 	let customTags: string[] | undefined = undefined
-
 	$: groupedWorkers = groupWorkers(workers, workerGroups)
 
 	function groupWorkers(
@@ -145,7 +151,7 @@
 
 	let importConfigDrawer: Drawer | undefined = undefined
 	let importConfigCode = ''
-
+	let tag: string = ''
 	async function importSingleWorkerConfig(c: any) {
 		if (typeof c === 'object' && c !== null) {
 			if (!c.name || typeof c.name !== 'string') {
@@ -257,8 +263,12 @@
 
 		return Math.ceil(occupancy_rate * 100) + '%'
 	}
-
 	let newHttpAgentWorkerDrawer: Drawer | undefined = undefined
+	let replForWorkerDrawer: Drawer | undefined = undefined
+
+	function isWorkerMaybeAlive(last_ping: number | undefined): boolean | undefined {
+		return last_ping != undefined ? last_ping < 60 : undefined
+	}
 </script>
 
 {#if $superadmin}
@@ -276,9 +286,9 @@
 			class="h-full"
 			fixedOverflowWidgets={false}
 		/>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<Button size="sm" on:click={importConfigFromYaml} disabled={!importConfigCode}>Import</Button>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
 
@@ -291,6 +301,24 @@
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:this={replForWorkerDrawer} size="1000px">
+	<DrawerContent
+		title="Repl"
+		on:close={() => {
+			tag = ''
+			replForWorkerDrawer?.closeDrawer?.()
+		}}
+	>
+		<div class="flex flex-col gap-2">
+			<Alert title="Info" type="info" size="xs">
+				If no command has been run in the past 2 minutes, the next one may take up to 15 seconds to
+				start.
+			</Alert>
+			<WorkerRepl {tag} />
+		</div>
+	</DrawerContent>
+</Drawer>
+
 {#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.workers}
 	<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4 m-4 mt-12" role="alert">
 		<p class="font-bold">Unauthorized</p>
@@ -456,14 +484,9 @@
 			{#if (groupedWorkers ?? []).length > 5}
 				<div class="flex gap-2 items-center">
 					<div class="text-secondary text-sm">Worker group:</div>
-					<AutoComplete
-						noInputStyles
-						items={groupedWorkers.map((x) => x[0])}
-						bind:selectedItem={selectedTab}
-						hideArrow={true}
-						inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary"'}
-						dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
-						className="!font-gray-600 !font-primary !bg-surface-primary"
+					<Select
+						items={groupedWorkers.map((x) => ({ value: x[0], label: x[0] }))}
+						bind:value={selectedTab}
 					/>
 
 					<!-- <select
@@ -561,16 +584,28 @@
 									<Cell head>Memory usage<br />(Windmill)</Cell>
 									<Cell head>Limits</Cell>
 									<Cell head>Version</Cell>
-									<Cell head last>Liveness</Cell>
+									<Cell head>Liveness</Cell>
+									{#if $superadmin}
+										<Cell head>
+											Live Shell
+											<Tooltip>
+												<p class="text-sm">
+													Open a live shell to execute bash commands on the machine where the worker
+													runs — useful for quick access, inspection, and real-time debugging
+												</p>
+											</Tooltip>
+										</Cell>
+									{/if}
 								</tr>
 							</Head>
 							<tbody class="divide-y">
 								{#each worker_group[1] as [section, workers]}
+									{@const hostname = section?.split(splitter)?.[0]}
 									<tr class="border-t">
 										<Cell
 											first
 											colspan={(!config || config?.dedicated_worker == undefined) && $superadmin
-												? 11
+												? 12
 												: 9}
 											scope="colgroup"
 											class="bg-surface-secondary/30 !py-1 border-b !text-xs"
@@ -578,7 +613,7 @@
 											<div class="flex flex-row w-full">
 												<div class="min-w-64">
 													Host:
-													<span class="font-semibold">{section?.split(splitter)?.[0]}</span>
+													<span class="font-semibold">{hostname}</span>
 												</div>
 												<span class="ml-4">IP: </span>
 												<span class="font-semibold">{workers[0].ip}</span>
@@ -589,11 +624,24 @@
 											</div>
 										</Cell>
 									</tr>
-
 									{#if workers}
+										{@const sshWorker = workers.find((worker) => {
+											return (
+												isAgentWorkerShell(worker.worker) && isWorkerMaybeAlive(worker.last_ping)
+											)
+										})?.worker}
 										{#each workers as { worker, custom_tags, last_ping, started_at, jobs_executed, last_job_id, last_job_workspace_id, occupancy_rate_15s, occupancy_rate_5m, occupancy_rate_30m, occupancy_rate, wm_version, vcpus, memory, memory_usage, wm_memory_usage }}
+											{@const isWorkerAlive = isWorkerMaybeAlive(last_ping)}
 											<tr>
-												<Cell first>{worker}</Cell>
+												<Cell first>
+													{@const underscorePos = worker.search('_')}
+													{#if underscorePos === -1}
+														{worker}
+													{:else}
+														{truncate(worker, underscorePos)}
+														<Tooltip>{worker}</Tooltip>
+													{/if}
+												</Cell>
 												<Cell>
 													{#if custom_tags && custom_tags?.length > 2}
 														{truncate(custom_tags?.join(', ') ?? '', 10)}
@@ -652,21 +700,51 @@
 														{wm_version.split('-')[0]}<Tooltip>{wm_version}</Tooltip>
 													</div>
 												</Cell>
-												<Cell last>
+												<Cell>
 													<Badge
-														color={last_ping != undefined
-															? last_ping < 60
+														color={isWorkerAlive != undefined
+															? isWorkerAlive
 																? 'green'
 																: 'red'
 															: 'gray'}
 													>
-														{last_ping != undefined
-															? last_ping < 60
+														{isWorkerAlive != undefined
+															? isWorkerAlive
 																? 'Alive'
 																: 'Dead'
 															: 'Unknown'}
 													</Badge>
 												</Cell>
+												{#if $superadmin}
+													<Cell>
+														<Button
+															size="xs"
+															color="light"
+															on:click={() => {
+																if (isWorkerAlive === false) {
+																	sendUserToast('Worker must be alive', true)
+																	return
+																}
+																if (worker.startsWith(AGENT_WORKER_NAME_PREFIX)) {
+																	if (!sshWorker) {
+																		sendUserToast(
+																			'Unexpected error could not find agent worker handling repl feature',
+																			true
+																		)
+																		return
+																	}
+																	tag = sshWorker
+																} else {
+																	tag = hostname
+																}
+																replForWorkerDrawer?.openDrawer()
+															}}
+															startIcon={{ icon: Terminal }}
+														>
+															ssh
+														</Button>
+													</Cell>
+												{/if}
 											</tr>
 										{/each}
 									{/if}
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index 77593756cc..539018a5ab 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -644,46 +644,106 @@
 					goto(`?${$page.url.searchParams.toString()}`)
 				}}
 			>
-				<Tab size="xs" value="users">
+				<Tab
+					size="xs"
+					value="users"
+					aiId="workspace-settings-users"
+					aiDescription="Users workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1"> Users</div>
 				</Tab>
-				<Tab size="xs" value="git_sync">
+				<Tab
+					size="xs"
+					value="git_sync"
+					aiId="workspace-settings-git-sync"
+					aiDescription="Git sync workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1">Git Sync</div>
 				</Tab>
-				<Tab size="xs" value="deploy_to">
+				<Tab
+					size="xs"
+					value="deploy_to"
+					aiId="workspace-settings-deploy-to"
+					aiDescription="Deployment UI workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1">Deployment UI</div>
 				</Tab>
 				{#if WORKSPACE_SHOW_SLACK_CMD}
-					<Tab size="xs" value="slack">
+					<Tab
+						size="xs"
+						value="slack"
+						aiId="workspace-settings-slack"
+						aiDescription="Slack / Teams workspace settings"
+					>
 						<div class="flex gap-2 items-center my-1"> Slack / Teams</div>
 					</Tab>
 				{/if}
 				{#if isCloudHosted()}
-					<Tab size="xs" value="premium">
+					<Tab
+						size="xs"
+						value="premium"
+						aiId="workspace-settings-premium"
+						aiDescription="Premium plans workspace settings"
+					>
 						<div class="flex gap-2 items-center my-1"> Premium Plans </div>
 					</Tab>
 				{/if}
 				{#if WORKSPACE_SHOW_WEBHOOK_CLI_SYNC}
-					<Tab size="xs" value="webhook">
+					<Tab
+						size="xs"
+						value="webhook"
+						aiId="workspace-settings-webhook"
+						aiDescription="Webhook workspace settings"
+					>
 						<div class="flex gap-2 items-center my-1">Webhook</div>
 					</Tab>
 				{/if}
-				<Tab size="xs" value="error_handler">
+				<Tab
+					size="xs"
+					value="error_handler"
+					aiId="workspace-settings-error-handler"
+					aiDescription="Error handler workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1">Error Handler</div>
 				</Tab>
-				<Tab size="xs" value="ai">
+				<Tab
+					size="xs"
+					value="ai"
+					aiId="workspace-settings-ai"
+					aiDescription="Windmill AI workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1">Windmill AI</div>
 				</Tab>
-				<Tab size="xs" value="windmill_lfs">
+				<Tab
+					size="xs"
+					value="windmill_lfs"
+					aiId="workspace-settings-windmill-lfs"
+					aiDescription="Object Storage (S3) workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1"> Object Storage (S3)</div>
 				</Tab>
-				<Tab size="xs" value="default_app">
+				<Tab
+					size="xs"
+					value="default_app"
+					aiId="workspace-settings-default-app"
+					aiDescription="Default app workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1"> Default App </div>
 				</Tab>
-				<Tab size="xs" value="encryption">
+				<Tab
+					size="xs"
+					value="encryption"
+					aiId="workspace-settings-encryption"
+					aiDescription="Encryption workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1"> Encryption </div>
 				</Tab>
-				<Tab size="xs" value="general">
+				<Tab
+					size="xs"
+					value="general"
+					aiId="workspace-settings-general"
+					aiDescription="General workspace settings"
+				>
 					<div class="flex gap-2 items-center my-1"> General </div>
 				</Tab>
 			</Tabs>
diff --git a/frontend/src/routes/(root)/+layout.svelte b/frontend/src/routes/(root)/+layout.svelte
index e105ed6c02..e160580a11 100644
--- a/frontend/src/routes/(root)/+layout.svelte
+++ b/frontend/src/routes/(root)/+layout.svelte
@@ -13,6 +13,11 @@
 	import { computeDrift } from '$lib/forLater'
 	import { setLicense } from '$lib/enterpriseUtils'
 	import { deepEqual } from 'fast-equals'
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children }: Props = $props()
 
 	const monacoEditorUnhandledErrors = [
 		'Model not found',
@@ -60,8 +65,9 @@
 			}
 		} catch (e) {
 			console.error(e)
-			if ($page.url.pathname != '/user/login') {
+			if ($page.url.pathname != '/user/login' && $page.url.pathname != '/user/logout') {
 				const url = $page.url
+				console.log('logout 5', url.href.replace(url.origin, ''))
 				await logoutWithRedirect(url.href.replace(url.origin, ''))
 			}
 		}
@@ -101,10 +107,14 @@
 
 				if (status == '401') {
 					const url = $page.url
-					console.log('UNAUTHORIZED', url, url.href.replace(url.origin, ''))
+					console.log('UNAUTHORIZED', url, url.href.replace(url.origin, ''), url.pathname)
 					if (url.pathname != '/user/login' && url.pathname != '/user/logout') {
+						console.log('logout 6', url.pathname, url.href.replace(url.origin, ''))
 						logoutWithRedirect(url.href.replace(url.origin, ''))
 						return
+					} else {
+						console.log('logout ignored')
+						return
 					}
 				} else if (status == '403') {
 					sendUserToast('An endpoint required a privilege which you do not have', true)
@@ -175,4 +185,4 @@
 	}
 </script>
 
-<slot />
+{@render children?.()}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index dc715ebca9..a54c75d5b8 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -3,6 +3,11 @@
 
 	import { SvelteToast } from '@zerodevx/svelte-toast'
 	import '$lib/assets/app.css'
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children }: Props = $props()
 
 	// Default toast options
 	const toastOptions = {
@@ -30,7 +35,7 @@
 	<title>{$page.data?.stuff?.title ? `${$page.data?.stuff?.title} | ` : ''}Windmill</title>
 </svelte:head>
 
-<slot />
+{@render children?.()}
 
 <div class="wrap">
 	<SvelteToast options={toastOptions} />
diff --git a/frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte b/frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte
index 6d6ee3996d..f7a4e690e4 100644
--- a/frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte
+++ b/frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte
@@ -7,7 +7,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import FlowMetadata from '$lib/components/FlowMetadata.svelte'
 	import JobArgs from '$lib/components/JobArgs.svelte'
-	import { onDestroy, onMount } from 'svelte'
+	import { onDestroy, onMount, untrack } from 'svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
@@ -24,25 +24,19 @@
 	$workspaceStore = $page.params.workspace
 	let rd = $page.url.href.replace($page.url.origin, '')
 
-	let job: Job | undefined = undefined
-	let currentApprovers: { resume_id: number; approver: string }[] = []
+	let job: Job | undefined = $state(undefined)
+	let currentApprovers: { resume_id: number; approver: string }[] = $state([])
 	let approver = $page.url.searchParams.get('approver') ?? undefined
 
-	let completed: boolean = false
-	$: completed = job?.type == 'CompletedJob'
-	$: alreadyResumed = currentApprovers
-		.map((x) => x.resume_id)
-		.includes(new Number($page.params.resume).valueOf())
+	let completed: boolean = $state(false)
 
-	let dynamicSchema: any = {}
+	let dynamicSchema: any = $state({})
 
-	$: approvalStep = (job?.flow_status?.step ?? 1) - 1
-	$: schema = job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? dynamicSchema
 	let timeout: NodeJS.Timeout | undefined = undefined
-	let error: string | undefined = undefined
-	let default_payload: any = {}
-	let enum_payload: object = {}
-	let description: any = undefined
+	let error: string | undefined = $state(undefined)
+	let default_payload: any = $state({})
+	let enum_payload: object = $state({})
+	let description: any = $state(undefined)
 
 	setLicense()
 
@@ -72,10 +66,9 @@
 		timeout && clearInterval(timeout)
 	})
 
-	let argsFetched = false
-	$: job && !argsFetched && getDefaultArgs()
+	let argsFetched = $state(false)
 
-	let valid = true
+	let valid = $state(true)
 	async function getDefaultArgs() {
 		argsFetched = true
 		let jobId = job?.flow_status?.modules?.[approvalStep]?.job
@@ -106,7 +99,7 @@
 			signature: $page.params.hmac,
 			approver
 		})
-		job = suspendedJobFlow.job
+		job = suspendedJobFlow.job as Job
 		currentApprovers = suspendedJobFlow.approvers
 	}
 
@@ -140,11 +133,25 @@
 		userStore.set(await getUserExt($page.params.workspace))
 	}
 
-	$: if (job?.raw_flow?.modules?.[approvalStep]?.suspend?.user_auth_required && !$userStore) {
-		loadUser()
-	}
-
-	let scheduleEditor: ScheduleEditor
+	let scheduleEditor: ScheduleEditor | undefined = $state(undefined)
+	$effect(() => {
+		completed = job?.type == 'CompletedJob'
+	})
+	let alreadyResumed = $derived(
+		currentApprovers.map((x) => x.resume_id).includes(new Number($page.params.resume).valueOf())
+	)
+	let approvalStep = $derived.by(() => (job?.flow_status?.step ?? 1) - 1)
+	let schema = $derived.by(
+		() => job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? dynamicSchema
+	)
+	$effect(() => {
+		job && !argsFetched && untrack(() => getDefaultArgs())
+	})
+	$effect(() => {
+		if (job?.raw_flow?.modules?.[approvalStep]?.suspend?.user_auth_required && !$userStore) {
+			untrack(() => loadUser())
+		}
+	})
 </script>
 
 <ScheduleEditor bind:this={scheduleEditor} />
diff --git a/frontend/src/routes/flows/dev/+page.svelte b/frontend/src/routes/flows/dev/+page.svelte
index 52ed7818ab..b36920c3c1 100644
--- a/frontend/src/routes/flows/dev/+page.svelte
+++ b/frontend/src/routes/flows/dev/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { emptySchema, sendUserToast } from '$lib/utils'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import { onDestroy, onMount, setContext } from 'svelte'
+	import { onDestroy, onMount, setContext, untrack } from 'svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import FlowPreviewButtons from '$lib/components/flows/header/FlowPreviewButtons.svelte'
 	import type {
@@ -10,7 +10,7 @@
 		FlowInputEditorState
 	} from '$lib/components/flows/types'
 	import { writable } from 'svelte/store'
-	import { OpenAPI, type FlowModule, type OpenFlow, type TriggersCount } from '$lib/gen'
+	import { OpenAPI, type OpenFlow, type TriggersCount } from '$lib/gen'
 	import { initHistory } from '$lib/history'
 	import type { FlowState } from '$lib/components/flows/flowState'
 	import FlowModuleSchemaMap from '$lib/components/flows/map/FlowModuleSchemaMap.svelte'
@@ -48,33 +48,30 @@
 		userStore.set(user)
 	}
 
-	let darkModeToggle: DarkModeToggle
-	let darkMode: boolean | undefined = undefined
-	let modeInitialized = false
+	let darkModeToggle: DarkModeToggle | undefined = $state()
+	let darkMode: boolean | undefined = $state(undefined)
+	let modeInitialized = $state(false)
 	function initializeMode() {
 		modeInitialized = true
-		darkModeToggle.toggle()
+		darkModeToggle?.toggle()
 	}
-	$: darkModeToggle &&
-		themeDark != darkMode &&
-		darkMode != undefined &&
-		!modeInitialized &&
-		initializeMode()
 
-	const flowStore = writable({
-		summary: '',
-		value: { modules: [] },
-		extra_perms: {},
-		schema: emptySchema()
-	} as OpenFlow)
+	const flowStore = $state({
+		val: {
+			summary: '',
+			value: { modules: [] },
+			extra_perms: {},
+			schema: emptySchema()
+		} as OpenFlow
+	})
 
-	let initialCode = JSON.stringify($flowStore, null, 4)
+	let initialCode = JSON.stringify(flowStore, null, 4)
 	const flowStateStore = writable({} as FlowState)
 
-	const previewArgsStore = writable<Record<string, any>>({})
+	const previewArgsStore = $state({ val: {} })
 	const scriptEditorDrawer = writable(undefined)
-	const moving = writable<{ module: FlowModule; modules: FlowModule[] } | undefined>(undefined)
-	const history = initHistory($flowStore)
+	const moving = writable<{ id: string } | undefined>(undefined)
+	const history = initHistory(flowStore.val)
 
 	const testStepStore = writable<Record<string, any>>({})
 	const selectedIdStore = writable('settings-metadata')
@@ -107,7 +104,8 @@
 			selectedTab: undefined,
 			editPanelSize: undefined,
 			payloadData: undefined
-		})
+		}),
+		currentEditor: writable(undefined)
 	})
 	setContext<PropPickerContext>('PropPickerContext', {
 		flowPropPickerConfig: writable<FlowPropPickerConfig | undefined>(undefined),
@@ -215,11 +213,9 @@
 		// 	validCode = false
 		// }
 	}
-	let editor: SimpleEditor
+	let editor: SimpleEditor | undefined = $state()
 
-	$: updateCode(editor, $flowStore)
-
-	function updateCode(editor: SimpleEditor, flow: OpenFlow) {
+	function updateCode(editor: SimpleEditor | undefined, flow: OpenFlow) {
 		if (editor && !deepEqual(flow, JSON.parse(editor.getCode()))) {
 			editor.setCode(JSON.stringify(flow, null, 4))
 		}
@@ -227,18 +223,29 @@
 
 	function updateFromCode(code: string) {
 		try {
-			if (!deepEqual(JSON.parse(code), $flowStore)) {
-				$flowStore = JSON.parse(code)
+			if (!deepEqual(JSON.parse(code), flowStore)) {
+				flowStore.val = JSON.parse(code)
 			}
 		} catch (e) {
 			console.error('issue parsing new change:', code, e)
 		}
 	}
 
-	let flowPreviewButtons: FlowPreviewButtons
+	let flowPreviewButtons: FlowPreviewButtons | undefined = $state()
+	$effect(() => {
+		darkModeToggle &&
+			themeDark != darkMode &&
+			darkMode != undefined &&
+			!modeInitialized &&
+			untrack(() => initializeMode())
+	})
+	$effect(() => {
+		const args = [editor, flowStore.val] as const
+		untrack(() => updateCode(...args))
+	})
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 <main class="h-screen w-full">
 	<div class="h-full w-full grid grid-cols-2">
@@ -265,9 +272,8 @@
 			</div>
 			<Splitpanes horizontal class="h-full max-h-screen grow">
 				<Pane size={33}>
-					{#if $flowStore?.value?.modules}
+					{#if flowStore.val?.value?.modules}
 						<FlowModuleSchemaMap
-							bind:modules={$flowStore.value.modules}
 							disableAi
 							disableTutorials
 							smallErrorHandler={true}
@@ -285,7 +291,7 @@
 								$testStepStore['preprocessor'] = ev.detail.args ?? {}
 								$selectedIdStore = 'preprocessor'
 							} else {
-								$previewArgsStore = ev.detail.args ?? {}
+								previewArgsStore.val = ev.detail.args ?? {}
 								flowPreviewButtons?.openPreview()
 							}
 						}}
diff --git a/frontend/src/routes/kitchen_sink/+page.svelte b/frontend/src/routes/kitchen_sink/+page.svelte
index 106cc0e296..6902e41d7d 100644
--- a/frontend/src/routes/kitchen_sink/+page.svelte
+++ b/frontend/src/routes/kitchen_sink/+page.svelte
@@ -20,7 +20,7 @@
 <Tabs bind:selected={tab}>
 	<Tab value="button">Buttons</Tab>
 
-	<svelte:fragment slot="content">
+	{#snippet content()}
 		<TabContent value="button" class="p-4 flex gap-4 flex-col ">
 			<div class="font-bold text-md">Contained buttons</div>
 			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
@@ -72,5 +72,5 @@
 				<Button variant="border" {dropdownItems} color="red">Lorem</Button>
 			</div>
 		</TabContent>
-	</svelte:fragment>
+	{/snippet}
 </Tabs>
diff --git a/frontend/src/routes/test_dev_page_2/+page.svelte b/frontend/src/routes/test_dev_page_2/+page.svelte
index 872eb7f3d2..40fd338697 100644
--- a/frontend/src/routes/test_dev_page_2/+page.svelte
+++ b/frontend/src/routes/test_dev_page_2/+page.svelte
@@ -1,4 +1,40 @@
 <script lang="ts">
+	import EditableSchemaForm from '$lib/components/EditableSchemaForm.svelte'
+	import AddPropertyV2 from '$lib/components/schema/AddPropertyV2.svelte'
+	import { Plus } from 'lucide-svelte'
+
 	// import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
 	// initializeMode()
+	let schema = $state({
+		type: 'object',
+		properties: {
+			name: { type: 'string' }
+		}
+	})
+
+	let addPropertyV2: AddPropertyV2 | undefined = $state(undefined)
 </script>
+
+<AddPropertyV2 bind:this={addPropertyV2} bind:schema>
+	{#snippet trigger()}
+		<div
+			class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
+			id="add-flow-input-btn"
+		>
+			<Plus size={14} />
+		</div>
+	{/snippet}
+</AddPropertyV2>
+<EditableSchemaForm
+	isFlowInput
+	on:edit={(e) => {
+		addPropertyV2?.openDrawer(e.detail)
+	}}
+	on:delete={(e) => {
+		addPropertyV2?.handleDeleteArgument([e.detail])
+	}}
+	bind:schema
+	editTab="inputEditor"
+/>
+
+<pre class="text-xs">{JSON.stringify(schema, null, 2)}</pre>
diff --git a/frontend/src/routes/view_graph/+page.svelte b/frontend/src/routes/view_graph/+page.svelte
index a1804647ac..18b49846a8 100644
--- a/frontend/src/routes/view_graph/+page.svelte
+++ b/frontend/src/routes/view_graph/+page.svelte
@@ -27,4 +27,3 @@
 			)
 		)}>Download</a
 >
-the 55
diff --git a/frontend/src/types.d.ts b/frontend/src/types.d.ts
index c4007380ee..1192516536 100644
--- a/frontend/src/types.d.ts
+++ b/frontend/src/types.d.ts
@@ -1,3 +1 @@
 import type { AppComponent } from '$lib/components/apps/types'
-
-declare module 'simple-svelte-autocomplete'
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 908f2516df..ab082208fe 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -1,5 +1,6 @@
 const plugin = require('tailwindcss/plugin')
 const { tailwindClasses } = require('./src/lib/components/apps/editor/componentsPanel/tailwindUtils')
+const { zIndexes } = require('./src/lib/zIndexes')
 
 const lightTheme = {
 	surface: '#ffffff',
@@ -82,6 +83,7 @@ const config = {
 		'autocomplete-list-item-create',
 		'selected',
 		'wm-tab-selected',
+		...Object.values(zIndexes).map((zIndex) => `z-[${zIndex}]`),
 		...tailwindClasses
 	],
 	theme: {
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index a572923d27..ed6959d455 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -31,7 +31,7 @@
 		"strict": true,
 		"types": []
 	},
-	"include": ["src/**/*.js", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte", "src/lib/components/triggers/TriggersEditorSectionsvelte"],
+	"include": ["src/**/*.js", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
 	"exclude": ["src/lib/monaco_workers/*.js"],
 	"extends": "./.svelte-kit/tsconfig.json"
 }
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index c9a7d7d5c9..de346e5a5c 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -43,7 +43,10 @@ const config = {
 	preview: {
 		port: 3000
 	},
-	plugins: [sveltekit(), ...(process.env.HTTPS === 'true' ? [mkcert()] : [])],
+	plugins: [
+		sveltekit(),
+		...(process.env.HTTPS === 'true' ? [mkcert()] : [])
+	],
 	define: {
 		__pkg__: version
 	},
diff --git a/lsp/Pipfile b/lsp/Pipfile
index a375630df0..bb3d094961 100644
--- a/lsp/Pipfile
+++ b/lsp/Pipfile
@@ -4,8 +4,8 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-wmill = ">=1.494.0"
-wmill_pg = ">=1.494.0"
+wmill = ">=1.498.0"
+wmill_pg = ">=1.498.0"
 sendgrid = "*"
 mysql-connector-python = "*"
 pymongo = "*"
diff --git a/openflow.openapi.yaml b/openflow.openapi.yaml
index 8c34ffe936..a13eaee9be 100644
--- a/openflow.openapi.yaml
+++ b/openflow.openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.494.0
+  version: 1.498.0
   title: OpenFlow Spec
   contact:
     name: Ruben Fiszel
diff --git a/powershell-client/WindmillClient/WindmillClient.psd1 b/powershell-client/WindmillClient/WindmillClient.psd1
index e046e5a602..e4c28508d1 100644
--- a/powershell-client/WindmillClient/WindmillClient.psd1
+++ b/powershell-client/WindmillClient/WindmillClient.psd1
@@ -12,7 +12,7 @@
     RootModule        = 'WindmillClient.psm1'
 
     # Version number of this module.
-    ModuleVersion     = '1.494.0'
+    ModuleVersion     = '1.498.0'
 
     # Supported PSEditions
     # CompatiblePSEditions = @()
diff --git a/python-client/build.sh b/python-client/build.sh
index 76bfa4e736..780806388e 100755
--- a/python-client/build.sh
+++ b/python-client/build.sh
@@ -1,8 +1,22 @@
-#!/bin/bash
+#!/usr/bin/env bash
 set -e
 
 mkdir openapi || true
-cp  ../backend/windmill-api/openapi.yaml openapi/openapi.yaml
+# cp  ../backend/windmill-api/openapi.yaml openapi/openapi.yaml
+
+LEGACY_WILDCARD="\$ref: \"..\/..\/openflow.openapi.yaml#\/components\/schemas\""
+# We will need to use old syntax of openapi to maintain compatability with previous windmill-api versions.
+# If we use new format, many models use another namespace, thus make it not fully compatible with old versions
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    # macOS version using perl
+    perl -0777 -pe "s/# -- INLINE START --\n.*?# -- INLINE END --\n/$LEGACY_WILDCARD\n/s" \
+        ../backend/windmill-api/openapi.yaml > openapi/openapi.yaml
+else
+    # Replace everything between markers with legacy wildcard
+    sed -z "
+        s/# -- INLINE START --\n.*# -- INLINE END --\n/$LEGACY_WILDCARD\n/g;
+    " ../backend/windmill-api/openapi.yaml > openapi/openapi.yaml
+fi
 
 npx @redocly/openapi-cli@latest bundle openapi/openapi.yaml > openapi-bundled.yaml
 
@@ -10,7 +24,7 @@ if [[ "$OSTYPE" == "darwin"* ]]; then
     # sed -z is not supported on macOS, use perl instead
     perl -0777 -pe 's/FlowModuleValue:/FlowModuleValue2:/g' openapi-bundled.yaml > openapi-decycled.yaml
 else
-    sed -z 's/FlowModuleValue:/FlowModuleValue2:/' openapi-bundled.yaml > openapi-decycled.yaml
+  sed -z 's/FlowModuleValue:/FlowModuleValue2:/' openapi-bundled.yaml > openapi-decycled.yaml
 fi
 
 echo "    FlowModuleValue: {}" >> openapi-decycled.yaml
diff --git a/python-client/publish.sh b/python-client/publish.sh
index 54a18d9b0f..b6610ebf7f 100755
--- a/python-client/publish.sh
+++ b/python-client/publish.sh
@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 set -e
 
 ./build.sh
diff --git a/python-client/wmill/pyproject.toml b/python-client/wmill/pyproject.toml
index de044ea453..c547216c76 100644
--- a/python-client/wmill/pyproject.toml
+++ b/python-client/wmill/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill"
-version = "1.494.0"
+version = "1.498.0"
 description = "A client library for accessing Windmill server wrapping the Windmill client API"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
diff --git a/python-client/wmill_pg/pyproject.toml b/python-client/wmill_pg/pyproject.toml
index 12b33a4e29..a664711828 100644
--- a/python-client/wmill_pg/pyproject.toml
+++ b/python-client/wmill_pg/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill-pg"
-version = "1.494.0"
+version = "1.498.0"
 description = "An extension client for the wmill client library focused on pg"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
diff --git a/rust-client/.gitignore b/rust-client/.gitignore
new file mode 100644
index 0000000000..4924b1576c
--- /dev/null
+++ b/rust-client/.gitignore
@@ -0,0 +1,3 @@
+windmill-api/
+windmill_api/
+api/
diff --git a/rust-client/Cargo.lock b/rust-client/Cargo.lock
new file mode 100644
index 0000000000..03d1d4594a
--- /dev/null
+++ b/rust-client/Cargo.lock
@@ -0,0 +1,1821 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 4
+
+[[package]]
+name = "addr2line"
+version = "0.24.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dfbe277e56a376000877090da837660b4427aad530e3028d44e0bffe4f89a1c1"
+dependencies = [
+ "gimli",
+]
+
+[[package]]
+name = "adler2"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "512761e0bb2578dd7380c6baaa0f4ce03e84f95e960231d1dec8bf4d7d6e2627"
+
+[[package]]
+name = "android-tzdata"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e999941b234f3131b00bc13c22d06e8c5ff726d1b6318ac7eb276997bbb4fef0"
+
+[[package]]
+name = "android_system_properties"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "819e7219dbd41043ac279b19830f2efc897156490d7fd6ea916720117ee66311"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "anyhow"
+version = "1.0.98"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e16d2d3311acee920a9eb8d33b8cbc1787ce4a264e85f964c2404b969bdcd487"
+
+[[package]]
+name = "autocfg"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ace50bade8e6234aa140d9a2f552bbee1db4d353f69b8217bc503490fc1a9f26"
+
+[[package]]
+name = "backtrace"
+version = "0.3.75"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6806a6321ec58106fea15becdad98371e28d92ccbc7c8f1b3b6dd724fe8f1002"
+dependencies = [
+ "addr2line",
+ "cfg-if",
+ "libc",
+ "miniz_oxide",
+ "object",
+ "rustc-demangle",
+ "windows-targets",
+]
+
+[[package]]
+name = "base64"
+version = "0.22.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
+
+[[package]]
+name = "bitflags"
+version = "2.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b8e56985ec62d17e9c1001dc89c88ecd7dc08e47eba5ec7c29c7b5eeecde967"
+
+[[package]]
+name = "bumpalo"
+version = "3.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1628fb46dfa0b37568d12e5edd512553eccf6a22a78e8bde00bb4aed84d5bdbf"
+
+[[package]]
+name = "bytes"
+version = "1.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d71b6127be86fdcfddb610f7182ac57211d4b18a3e9c82eb2d17662f2227ad6a"
+
+[[package]]
+name = "cc"
+version = "1.2.25"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d0fc897dc1e865cc67c0e05a836d9d3f1df3cbe442aa4a9473b18e12624a4951"
+dependencies = [
+ "shlex",
+]
+
+[[package]]
+name = "cfg-if"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+
+[[package]]
+name = "cfg_aliases"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
+
+[[package]]
+name = "chrono"
+version = "0.4.41"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c469d952047f47f91b68d1cba3f10d63c11d73e4636f24f08daf0278abf01c4d"
+dependencies = [
+ "android-tzdata",
+ "iana-time-zone",
+ "num-traits",
+ "serde",
+ "windows-link",
+]
+
+[[package]]
+name = "core-foundation-sys"
+version = "0.8.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
+
+[[package]]
+name = "darling"
+version = "0.20.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc7f46116c46ff9ab3eb1597a45688b6715c6e628b5c133e288e709a29bcb4ee"
+dependencies = [
+ "darling_core",
+ "darling_macro",
+]
+
+[[package]]
+name = "darling_core"
+version = "0.20.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0d00b9596d185e565c2207a0b01f8bd1a135483d02d9b7b0a54b11da8d53412e"
+dependencies = [
+ "fnv",
+ "ident_case",
+ "proc-macro2",
+ "quote",
+ "strsim",
+ "syn",
+]
+
+[[package]]
+name = "darling_macro"
+version = "0.20.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc34b93ccb385b40dc71c6fceac4b2ad23662c7eeb248cf10d529b7e055b6ead"
+dependencies = [
+ "darling_core",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "deranged"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c9e6a11ca8224451684bc0d7d5a7adbf8f2fd6887261a1cfc3c0432f9d4068e"
+dependencies = [
+ "powerfmt",
+ "serde",
+]
+
+[[package]]
+name = "displaydoc"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "equivalent"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"
+
+[[package]]
+name = "fnv"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
+
+[[package]]
+name = "form_urlencoded"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e13624c2627564efccf4934284bdd98cbaa14e79b0b5a141218e507b3a823456"
+dependencies = [
+ "percent-encoding",
+]
+
+[[package]]
+name = "futures"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "65bc07b1a8bc7c85c5f2e110c476c7389b4554ba72af57d8445ea63a576b0876"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-executor",
+ "futures-io",
+ "futures-sink",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-channel"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2dff15bf788c671c1934e366d07e30c1814a8ef514e1af724a602e8a2fbe1b10"
+dependencies = [
+ "futures-core",
+ "futures-sink",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
+
+[[package]]
+name = "futures-executor"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e28d1d997f585e54aebc3f97d39e72338912123a67330d723fdbb564d646c9f"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-io"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9e5c1b78ca4aae1ac06c48a526a655760685149f0d465d21f37abfe57ce075c6"
+
+[[package]]
+name = "futures-macro"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "162ee34ebcb7c64a8abebc059ce0fee27c2262618d7b60ed8faf72fef13c3650"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "futures-sink"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e575fab7d1e0dcb8d0c7bcf9a63ee213816ab51902e6d244a95819acacf1d4f7"
+
+[[package]]
+name = "futures-task"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f90f7dce0722e95104fcb095585910c0977252f286e354b5e3bd38902cd99988"
+
+[[package]]
+name = "futures-util"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fa08315bb612088cc391249efdc3bc77536f16c91f6cf495e6fbe85b20a4a81"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-macro",
+ "futures-sink",
+ "futures-task",
+ "memchr",
+ "pin-project-lite",
+ "pin-utils",
+ "slab",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "335ff9f135e4384c8150d6f27c6daed433577f86b4750418338c01a1a2528592"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "libc",
+ "wasi 0.11.0+wasi-snapshot-preview1",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "26145e563e54f2cadc477553f1ec5ee650b00862f0a58bcd12cbdc5f0ea2d2f4"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "libc",
+ "r-efi",
+ "wasi 0.14.2+wasi-0.2.4",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gimli"
+version = "0.31.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07e28edb80900c19c28f1072f2e8aeca7fa06b23cd4169cefe1af5aa3260783f"
+
+[[package]]
+name = "hashbrown"
+version = "0.12.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
+
+[[package]]
+name = "hashbrown"
+version = "0.15.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "84b26c544d002229e640969970a2e74021aadf6e2f96372b9c58eff97de08eb3"
+
+[[package]]
+name = "hex"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
+
+[[package]]
+name = "http"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f4a85d31aea989eead29a3aaf9e1115a180df8282431156e533de47660892565"
+dependencies = [
+ "bytes",
+ "fnv",
+ "itoa",
+]
+
+[[package]]
+name = "http-body"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1efedce1fb8e6913f23e0c92de8e62cd5b772a67e7b3946df930a62566c93184"
+dependencies = [
+ "bytes",
+ "http",
+]
+
+[[package]]
+name = "http-body-util"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b021d93e26becf5dc7e1b75b1bed1fd93124b374ceb73f43d4d4eafec896a64a"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "http",
+ "http-body",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "httparse"
+version = "1.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
+
+[[package]]
+name = "hyper"
+version = "1.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc2b571658e38e0c01b1fdca3bbbe93c00d3d71693ff2770043f8c29bc7d6f80"
+dependencies = [
+ "bytes",
+ "futures-channel",
+ "futures-util",
+ "http",
+ "http-body",
+ "httparse",
+ "itoa",
+ "pin-project-lite",
+ "smallvec",
+ "tokio",
+ "want",
+]
+
+[[package]]
+name = "hyper-rustls"
+version = "0.27.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03a01595e11bdcec50946522c32dde3fc6914743000a68b93000965f2f02406d"
+dependencies = [
+ "http",
+ "hyper",
+ "hyper-util",
+ "rustls",
+ "rustls-pki-types",
+ "tokio",
+ "tokio-rustls",
+ "tower-service",
+ "webpki-roots",
+]
+
+[[package]]
+name = "hyper-util"
+version = "0.1.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1c293b6b3d21eca78250dc7dbebd6b9210ec5530e038cbfe0661b5c47ab06e8"
+dependencies = [
+ "base64",
+ "bytes",
+ "futures-channel",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "hyper",
+ "ipnet",
+ "libc",
+ "percent-encoding",
+ "pin-project-lite",
+ "socket2",
+ "tokio",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "iana-time-zone"
+version = "0.1.63"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b0c919e5debc312ad217002b8048a17b7d83f80703865bbfcfebb0458b0b27d8"
+dependencies = [
+ "android_system_properties",
+ "core-foundation-sys",
+ "iana-time-zone-haiku",
+ "js-sys",
+ "log",
+ "wasm-bindgen",
+ "windows-core",
+]
+
+[[package]]
+name = "iana-time-zone-haiku"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f31827a206f56af32e590ba56d5d2d085f558508192593743f16b2306495269f"
+dependencies = [
+ "cc",
+]
+
+[[package]]
+name = "icu_collections"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "200072f5d0e3614556f94a9930d5dc3e0662a652823904c3a75dc3b0af7fee47"
+dependencies = [
+ "displaydoc",
+ "potential_utf",
+ "yoke",
+ "zerofrom",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_locale_core"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0cde2700ccaed3872079a65fb1a78f6c0a36c91570f28755dda67bc8f7d9f00a"
+dependencies = [
+ "displaydoc",
+ "litemap",
+ "tinystr",
+ "writeable",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "436880e8e18df4d7bbc06d58432329d6458cc84531f7ac5f024e93deadb37979"
+dependencies = [
+ "displaydoc",
+ "icu_collections",
+ "icu_normalizer_data",
+ "icu_properties",
+ "icu_provider",
+ "smallvec",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer_data"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "00210d6893afc98edb752b664b8890f0ef174c8adbb8d0be9710fa66fbbf72d3"
+
+[[package]]
+name = "icu_properties"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "016c619c1eeb94efb86809b015c58f479963de65bdb6253345c1a1276f22e32b"
+dependencies = [
+ "displaydoc",
+ "icu_collections",
+ "icu_locale_core",
+ "icu_properties_data",
+ "icu_provider",
+ "potential_utf",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_properties_data"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "298459143998310acd25ffe6810ed544932242d3f07083eee1084d83a71bd632"
+
+[[package]]
+name = "icu_provider"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03c80da27b5f4187909049ee2d72f276f0d9f99a42c306bd0131ecfe04d8e5af"
+dependencies = [
+ "displaydoc",
+ "icu_locale_core",
+ "stable_deref_trait",
+ "tinystr",
+ "writeable",
+ "yoke",
+ "zerofrom",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "ident_case"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e0384b61958566e926dc50660321d12159025e767c18e043daf26b70104c39"
+
+[[package]]
+name = "idna"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "686f825264d630750a544639377bae737628043f20d38bbc029e8f29ea968a7e"
+dependencies = [
+ "idna_adapter",
+ "smallvec",
+ "utf8_iter",
+]
+
+[[package]]
+name = "idna_adapter"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3acae9609540aa318d1bc588455225fb2085b9ed0c4f6bd0d9d5bcd86f1a0344"
+dependencies = [
+ "icu_normalizer",
+ "icu_properties",
+]
+
+[[package]]
+name = "indexmap"
+version = "1.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd070e393353796e801d209ad339e89596eb4c8d430d18ede6a1cced8fafbd99"
+dependencies = [
+ "autocfg",
+ "hashbrown 0.12.3",
+ "serde",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cea70ddb795996207ad57735b50c5982d8844f38ba9ee5f1aedcfb708a2aa11e"
+dependencies = [
+ "equivalent",
+ "hashbrown 0.15.3",
+ "serde",
+]
+
+[[package]]
+name = "ipnet"
+version = "2.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "469fb0b9cefa57e3ef31275ee7cacb78f2fdca44e4765491884a2b119d4eb130"
+
+[[package]]
+name = "iri-string"
+version = "0.7.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dbc5ebe9c3a1a7a5127f920a418f7585e9e758e911d0466ed004f393b0e380b2"
+dependencies = [
+ "memchr",
+ "serde",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4a5f13b858c8d314ee3e8f639011f7ccefe71f97f96e50151fb991f267928e2c"
+
+[[package]]
+name = "js-sys"
+version = "0.3.77"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1cfaf33c695fc6e08064efbc1f72ec937429614f25eef83af942d0e227c3a28f"
+dependencies = [
+ "once_cell",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "libc"
+version = "0.2.172"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d750af042f7ef4f724306de029d18836c26c1765a54a6a3f094cbd23a7267ffa"
+
+[[package]]
+name = "litemap"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "241eaef5fd12c88705a01fc1066c48c4b36e0dd4377dcdc7ec3942cea7a69956"
+
+[[package]]
+name = "log"
+version = "0.4.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13dc2df351e3202783a1fe0d44375f7295ffb4049267b0f3018346dc122a1d94"
+
+[[package]]
+name = "lru-slab"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
+
+[[package]]
+name = "memchr"
+version = "2.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "78ca9ab1a0babb1e7d5695e3530886289c18cf2f87ec19a575a0abdce112e3a3"
+
+[[package]]
+name = "mime"
+version = "0.3.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
+
+[[package]]
+name = "mime_guess"
+version = "2.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7c44f8e672c00fe5308fa235f821cb4198414e1c77935c1ab6948d3fd78550e"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
+[[package]]
+name = "miniz_oxide"
+version = "0.8.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3be647b768db090acb35d5ec5db2b0e1f1de11133ca123b9eacf5137868f892a"
+dependencies = [
+ "adler2",
+]
+
+[[package]]
+name = "mio"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "78bed444cc8a2160f01cbcf811ef18cac863ad68ae8ca62092e8db51d51c761c"
+dependencies = [
+ "libc",
+ "wasi 0.11.0+wasi-snapshot-preview1",
+ "windows-sys 0.59.0",
+]
+
+[[package]]
+name = "num-conv"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
+
+[[package]]
+name = "num-traits"
+version = "0.2.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "object"
+version = "0.36.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62948e14d923ea95ea2c7c86c71013138b66525b86bdc08d2dcc262bdb497b87"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.21.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42f5e15c9953c5e4ccceeb2e7382a716482c34515315f7b03532b8b4e8393d2d"
+
+[[package]]
+name = "percent-encoding"
+version = "2.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e"
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b3cff922bd51709b605d9ead9aa71031d81447142d828eb4a6eba76fe619f9b"
+
+[[package]]
+name = "pin-utils"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
+
+[[package]]
+name = "potential_utf"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e5a7c30837279ca13e7c867e9e40053bc68740f988cb07f7ca6df43cc734b585"
+dependencies = [
+ "zerovec",
+]
+
+[[package]]
+name = "powerfmt"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
+
+[[package]]
+name = "ppv-lite86"
+version = "0.2.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85eae3c4ed2f50dcfe72643da4befc30deadb458a9b590d720cde2f2b1e97da9"
+dependencies = [
+ "zerocopy",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.95"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02b3e5e68a3a1a02aad3ec490a98007cbc13c37cbe84a3cd7b8e406d76e7f778"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quinn"
+version = "0.11.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "626214629cda6781b6dc1d316ba307189c85ba657213ce642d9c77670f8202c8"
+dependencies = [
+ "bytes",
+ "cfg_aliases",
+ "pin-project-lite",
+ "quinn-proto",
+ "quinn-udp",
+ "rustc-hash",
+ "rustls",
+ "socket2",
+ "thiserror",
+ "tokio",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-proto"
+version = "0.11.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "49df843a9161c85bb8aae55f101bc0bac8bcafd637a620d9122fd7e0b2f7422e"
+dependencies = [
+ "bytes",
+ "getrandom 0.3.3",
+ "lru-slab",
+ "rand",
+ "ring",
+ "rustc-hash",
+ "rustls",
+ "rustls-pki-types",
+ "slab",
+ "thiserror",
+ "tinyvec",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-udp"
+version = "0.5.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee4e529991f949c5e25755532370b8af5d114acae52326361d68d47af64aa842"
+dependencies = [
+ "cfg_aliases",
+ "libc",
+ "once_cell",
+ "socket2",
+ "tracing",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1885c039570dc00dcb4ff087a89e185fd56bae234ddc7f056a945bf36467248d"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "r-efi"
+version = "5.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "74765f6d916ee2faa39bc8e68e4f3ed8949b48cccdac59983d287a7cb71ce9c5"
+
+[[package]]
+name = "rand"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fbfd9d094a40bf3ae768db9361049ace4c0e04a4fd6b359518bd7b73a73dd97"
+dependencies = [
+ "rand_chacha",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb"
+dependencies = [
+ "ppv-lite86",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "99d9a13982dcf210057a8a78572b2217b667c3beacbf3a0d8b454f6f82837d38"
+dependencies = [
+ "getrandom 0.3.3",
+]
+
+[[package]]
+name = "reqwest"
+version = "0.12.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a2f8e5513d63f2e5b386eb5106dc67eaf3f84e95258e210489136b8b92ad6119"
+dependencies = [
+ "base64",
+ "bytes",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "hyper",
+ "hyper-rustls",
+ "hyper-util",
+ "ipnet",
+ "js-sys",
+ "log",
+ "mime",
+ "mime_guess",
+ "once_cell",
+ "percent-encoding",
+ "pin-project-lite",
+ "quinn",
+ "rustls",
+ "rustls-pki-types",
+ "serde",
+ "serde_json",
+ "serde_urlencoded",
+ "sync_wrapper",
+ "tokio",
+ "tokio-rustls",
+ "tower",
+ "tower-http",
+ "tower-service",
+ "url",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "webpki-roots",
+]
+
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.16",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "rustc-demangle"
+version = "0.1.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "719b953e2095829ee67db738b3bfa9fa368c94900df327b3f07fe6e794d2fe1f"
+
+[[package]]
+name = "rustc-hash"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d"
+
+[[package]]
+name = "rustls"
+version = "0.23.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "730944ca083c1c233a75c09f199e973ca499344a2b7ba9e755c457e86fb4a321"
+dependencies = [
+ "once_cell",
+ "ring",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "229a4a4c221013e7e1f1a043678c5cc39fe5171437c88fb47151a21e6f5b5c79"
+dependencies = [
+ "web-time",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e4a72fe2bcf7a6ac6fd7d0b9e5cb68aeb7d4c0a0271730218b3e92d43b4eb435"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
+[[package]]
+name = "rustversion"
+version = "1.0.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a0d197bd2c9dc6e53b84da9556a69ba4cdfab8619eb41a8bd1cc2027a0f6b1d"
+
+[[package]]
+name = "ryu"
+version = "1.0.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "28d3b2b1366ec20994f1fd18c3c594f05c5dd4bc44d8bb0c1c632c8d6829481f"
+
+[[package]]
+name = "serde"
+version = "1.0.219"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f0e2c6ed6606019b4e29e69dbaba95b11854410e5347d525002456dbbb786b6"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.219"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b0276cf7f2c73365f7157c8123c21cd9a50fbbd844757af28ca1f5925fc2a00"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.140"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "20068b6e96dc6c9bd23e01df8827e6c7e1f2fddd43c21810382803c136b99373"
+dependencies = [
+ "itoa",
+ "memchr",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "serde_repr"
+version = "0.1.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "175ee3e80ae9982737ca543e96133087cbd9a485eecc3bc4de9c1a37b47ea59c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "serde_urlencoded"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
+dependencies = [
+ "form_urlencoded",
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "serde_with"
+version = "3.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d6b6f7f2fcb69f747921f79f3926bd1e203fce4fef62c268dd3abfb6d86029aa"
+dependencies = [
+ "base64",
+ "chrono",
+ "hex",
+ "indexmap 1.9.3",
+ "indexmap 2.9.0",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "serde_with_macros",
+ "time",
+]
+
+[[package]]
+name = "serde_with_macros"
+version = "3.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8d00caa5193a3c8362ac2b73be6b9e768aa5a4b2f721d8f4b339600c3cb51f8e"
+dependencies = [
+ "darling",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "serde_yaml"
+version = "0.9.34+deprecated"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a8b1a1a2ebf674015cc02edccce75287f1a0130d394307b36743c2f5d504b47"
+dependencies = [
+ "indexmap 2.9.0",
+ "itoa",
+ "ryu",
+ "serde",
+ "unsafe-libyaml",
+]
+
+[[package]]
+name = "shlex"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
+
+[[package]]
+name = "slab"
+version = "0.4.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f92a496fb766b417c996b9c5e57daf2f7ad3b0bebe1ccfca4856390e3d3bb67"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "smallvec"
+version = "1.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8917285742e9f3e1683f0a9c4e6b57960b7314d0b08d30d1ecd426713ee2eee9"
+
+[[package]]
+name = "socket2"
+version = "0.5.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e22376abed350d73dd1cd119b57ffccad95b4e585a7cda43e286245ce23c0678"
+dependencies = [
+ "libc",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "stable_deref_trait"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8f112729512f8e442d81f95a8a7ddf2b7c6b8a1a6f509a95864142b30cab2d3"
+
+[[package]]
+name = "strsim"
+version = "0.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
+
+[[package]]
+name = "subtle"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
+
+[[package]]
+name = "syn"
+version = "2.0.101"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ce2b7fc941b3a24138a0a7cf8e858bfc6a992e7978a068a5c760deb0ed43caf"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "sync_wrapper"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0bf256ce5efdfa370213c1dabab5935a12e49f2c58d15e9eac2870d3b4f27263"
+dependencies = [
+ "futures-core",
+]
+
+[[package]]
+name = "synstructure"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "thiserror"
+version = "2.0.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "567b8a2dae586314f7be2a752ec7474332959c6460e02bde30d702a66d488708"
+dependencies = [
+ "thiserror-impl",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "2.0.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f7cf42b4507d8ea322120659672cf1b9dbb93f8f2d4ecfd6e51350ff5b17a1d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "time"
+version = "0.3.41"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a7619e19bc266e0f9c5e6686659d394bc57973859340060a69221e57dbc0c40"
+dependencies = [
+ "deranged",
+ "itoa",
+ "num-conv",
+ "powerfmt",
+ "serde",
+ "time-core",
+ "time-macros",
+]
+
+[[package]]
+name = "time-core"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c9e9a38711f559d9e3ce1cdb06dd7c5b8ea546bc90052da6d06bb76da74bb07c"
+
+[[package]]
+name = "time-macros"
+version = "0.2.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3526739392ec93fd8b359c8e98514cb3e8e021beb4e5f597b00a0221f8ed8a49"
+dependencies = [
+ "num-conv",
+ "time-core",
+]
+
+[[package]]
+name = "tinystr"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d4f6d1145dcb577acf783d4e601bc1d76a13337bb54e6233add580b07344c8b"
+dependencies = [
+ "displaydoc",
+ "zerovec",
+]
+
+[[package]]
+name = "tinyvec"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09b3661f17e86524eccd4371ab0429194e0d7c008abb45f7a7495b1719463c71"
+dependencies = [
+ "tinyvec_macros",
+]
+
+[[package]]
+name = "tinyvec_macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
+
+[[package]]
+name = "tokio"
+version = "1.45.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75ef51a33ef1da925cea3e4eb122833cb377c61439ca401b770f54902b806779"
+dependencies = [
+ "backtrace",
+ "bytes",
+ "libc",
+ "mio",
+ "pin-project-lite",
+ "socket2",
+ "tokio-macros",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "tokio-macros"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e06d43f1345a3bcd39f6a56dbb7dcab2ba47e68e8ac134855e7e2bdbaf8cab8"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "tokio-rustls"
+version = "0.26.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e727b36a1a0e8b74c376ac2211e40c2c8af09fb4013c60d910495810f008e9b"
+dependencies = [
+ "rustls",
+ "tokio",
+]
+
+[[package]]
+name = "tower"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d039ad9159c98b70ecfd540b2573b97f7f52c3e8d9f8ad57a24b916a536975f9"
+dependencies = [
+ "futures-core",
+ "futures-util",
+ "pin-project-lite",
+ "sync_wrapper",
+ "tokio",
+ "tower-layer",
+ "tower-service",
+]
+
+[[package]]
+name = "tower-http"
+version = "0.6.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "adc82fd73de2a9722ac5da747f12383d2bfdb93591ee6c58486e0097890f05f2"
+dependencies = [
+ "bitflags",
+ "bytes",
+ "futures-util",
+ "http",
+ "http-body",
+ "iri-string",
+ "pin-project-lite",
+ "tower",
+ "tower-layer",
+ "tower-service",
+]
+
+[[package]]
+name = "tower-layer"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "121c2a6cda46980bb0fcd1647ffaf6cd3fc79a013de288782836f6df9c48780e"
+
+[[package]]
+name = "tower-service"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8df9b6e13f2d32c91b9bd719c00d1958837bc7dec474d94952798cc8e69eeec3"
+
+[[package]]
+name = "tracing"
+version = "0.1.41"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "784e0ac535deb450455cbfa28a6f0df145ea1bb7ae51b821cf5e7927fdcfbdd0"
+dependencies = [
+ "pin-project-lite",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-core"
+version = "0.1.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e672c95779cf947c5311f83787af4fa8fffd12fb27e4993211a84bdfd9610f9c"
+dependencies = [
+ "once_cell",
+]
+
+[[package]]
+name = "try-lock"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
+
+[[package]]
+name = "unicase"
+version = "2.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75b844d17643ee918803943289730bec8aac480150456169e647ed0b576ba539"
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a5f39404a5da50712a4c1eecf25e90dd62b613502b7e925fd4e4d19b5c96512"
+
+[[package]]
+name = "unsafe-libyaml"
+version = "0.2.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "673aac59facbab8a9007c7f6108d11f63b603f7cabff99fabf650fea5c32b861"
+
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
+[[package]]
+name = "url"
+version = "2.5.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32f8b686cadd1473f4bd0117a5d28d36b1ade384ea9b5069a1c40aefed7fda60"
+dependencies = [
+ "form_urlencoded",
+ "idna",
+ "percent-encoding",
+]
+
+[[package]]
+name = "utf8_iter"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
+
+[[package]]
+name = "uuid"
+version = "1.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3cf4199d1e5d15ddd86a694e4d0dffa9c323ce759fea589f00fef9d81cc1931d"
+dependencies = [
+ "getrandom 0.3.3",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "want"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfa7760aed19e106de2c7c0b581b509f2f25d3dacaf737cb82ac61bc6d760b0e"
+dependencies = [
+ "try-lock",
+]
+
+[[package]]
+name = "wasi"
+version = "0.11.0+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
+
+[[package]]
+name = "wasi"
+version = "0.14.2+wasi-0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9683f9a5a998d873c0d21fcbe3c083009670149a8fab228644b8bd36b2c48cb3"
+dependencies = [
+ "wit-bindgen-rt",
+]
+
+[[package]]
+name = "wasm-bindgen"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1edc8929d7499fc4e8f0be2262a241556cfc54a0bea223790e71446f2aab1ef5"
+dependencies = [
+ "cfg-if",
+ "once_cell",
+ "rustversion",
+ "wasm-bindgen-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-backend"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f0a0651a5c2bc21487bde11ee802ccaf4c51935d0d3d42a6101f98161700bc6"
+dependencies = [
+ "bumpalo",
+ "log",
+ "proc-macro2",
+ "quote",
+ "syn",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-futures"
+version = "0.4.50"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "555d470ec0bc3bb57890405e5d4322cc9ea83cebb085523ced7be4144dac1e61"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "once_cell",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "wasm-bindgen-macro"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7fe63fc6d09ed3792bd0897b314f53de8e16568c2b3f7982f468c0bf9bd0b407"
+dependencies = [
+ "quote",
+ "wasm-bindgen-macro-support",
+]
+
+[[package]]
+name = "wasm-bindgen-macro-support"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ae87ea40c9f689fc23f209965b6fb8a99ad69aeeb0231408be24920604395de"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "wasm-bindgen-backend",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-shared"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a05d73b933a847d6cccdda8f838a22ff101ad9bf93e33684f39c1f5f0eece3d"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "web-sys"
+version = "0.3.77"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33b6dd2ef9186f1f2072e409e99cd22a975331a6b3591b12c764e0e55c60d5d2"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "web-time"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a6580f308b1fad9207618087a65c04e7a10bc77e02c8e84e9b00dd4b12fa0bb"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "webpki-roots"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2853738d1cc4f2da3a225c18ec6c3721abb31961096e9dbf5ab35fa88b19cfdb"
+dependencies = [
+ "rustls-pki-types",
+]
+
+[[package]]
+name = "windmill-api"
+version = "1.496.3"
+dependencies = [
+ "reqwest",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "serde_with",
+ "url",
+ "uuid",
+]
+
+[[package]]
+name = "windows-core"
+version = "0.61.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0fdd3ddb90610c7638aa2b3a3ab2904fb9e5cdbecc643ddb3647212781c4ae3"
+dependencies = [
+ "windows-implement",
+ "windows-interface",
+ "windows-link",
+ "windows-result",
+ "windows-strings",
+]
+
+[[package]]
+name = "windows-implement"
+version = "0.60.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a47fddd13af08290e67f4acabf4b459f647552718f683a7b415d290ac744a836"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "windows-interface"
+version = "0.59.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd9211b69f8dcdfa817bfd14bf1c97c9188afa36f4750130fcdf3f400eca9fa8"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "windows-link"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76840935b766e1b0a05c0066835fb9ec80071d4c09a16f6bd5f7e655e3c14c38"
+
+[[package]]
+name = "windows-result"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56f42bd332cc6c8eac5af113fc0c1fd6a8fd2aa08a0119358686e5160d0586c6"
+dependencies = [
+ "windows-link",
+]
+
+[[package]]
+name = "windows-strings"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56e6c93f3a0c3b36176cb1327a4958a0353d5d166c2a35cb268ace15e91d3b57"
+dependencies = [
+ "windows-link",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.59.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e38bc4d79ed67fd075bcc251a1c39b32a1776bbe92e5bef1f0bf1f8c531853b"
+dependencies = [
+ "windows-targets",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b724f72796e036ab90c1021d4780d4d3d648aca59e491e6b98e725b84e99973"
+dependencies = [
+ "windows_aarch64_gnullvm",
+ "windows_aarch64_msvc",
+ "windows_i686_gnu",
+ "windows_i686_gnullvm",
+ "windows_i686_msvc",
+ "windows_x86_64_gnu",
+ "windows_x86_64_gnullvm",
+ "windows_x86_64_msvc",
+]
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a4622180e7a0ec044bb555404c800bc9fd9ec262ec147edd5989ccd0c02cd3"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09ec2a7bb152e2252b53fa7803150007879548bc709c039df7627cabbd05d469"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e9b5ad5ab802e97eb8e295ac6720e509ee4c243f69d781394014ebfe8bbfa0b"
+
+[[package]]
+name = "windows_i686_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0eee52d38c090b3caa76c563b86c3a4bd71ef1a819287c19d586d7334ae8ed66"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "240948bc05c5e7c6dabba28bf89d89ffce3e303022809e73deaefe4f6ec56c66"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "147a5c80aabfbf0c7d901cb5895d1de30ef2907eb21fbbab29ca94c5b08b1a78"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24d5b23dc417412679681396f2b49f3de8c1473deb516bd34410872eff51ed0d"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
+
+[[package]]
+name = "wit-bindgen-rt"
+version = "0.39.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6f42320e61fe2cfd34354ecb597f86f413484a798ba44a8ca1165c58d42da6c1"
+dependencies = [
+ "bitflags",
+]
+
+[[package]]
+name = "wmill"
+version = "1.496.3"
+dependencies = [
+ "anyhow",
+ "futures",
+ "once_cell",
+ "serde",
+ "serde_json",
+ "serde_yaml",
+ "thiserror",
+ "tokio",
+ "uuid",
+ "windmill-api",
+]
+
+[[package]]
+name = "writeable"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ea2f10b9bb0928dfb1b42b65e1f9e36f7f54dbdf08457afefb38afcdec4fa2bb"
+
+[[package]]
+name = "yoke"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f41bb01b8226ef4bfd589436a297c53d118f65921786300e427be8d487695cc"
+dependencies = [
+ "serde",
+ "stable_deref_trait",
+ "yoke-derive",
+ "zerofrom",
+]
+
+[[package]]
+name = "yoke-derive"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38da3c9736e16c5d3c8c597a9aaa5d1fa565d0532ae05e27c24aa62fb32c0ab6"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
+[[package]]
+name = "zerocopy"
+version = "0.8.25"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1702d9583232ddb9174e01bb7c15a2ab8fb1bc6f227aa1233858c351a3ba0cb"
+dependencies = [
+ "zerocopy-derive",
+]
+
+[[package]]
+name = "zerocopy-derive"
+version = "0.8.25"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "28a6e20d751156648aa063f3800b706ee209a32c0b4d9f24be3d980b01be55ef"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "zerofrom"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50cc42e0333e05660c3587f3bf9d0478688e15d870fab3346451ce7f8c9fbea5"
+dependencies = [
+ "zerofrom-derive",
+]
+
+[[package]]
+name = "zerofrom-derive"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d71e5d6e06ab090c67b5e44993ec16b72dcbaabc526db883a360057678b48502"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
+[[package]]
+name = "zeroize"
+version = "1.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ced3678a2879b30306d323f4542626697a464a97c0a07c9aebf7ebca65cd4dde"
+
+[[package]]
+name = "zerotrie"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "36f0bbd478583f79edad978b407914f61b2972f5af6fa089686016be8f9af595"
+dependencies = [
+ "displaydoc",
+ "yoke",
+ "zerofrom",
+]
+
+[[package]]
+name = "zerovec"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4a05eb080e015ba39cc9e23bbe5e7fb04d5fb040350f99f34e338d5fdd294428"
+dependencies = [
+ "yoke",
+ "zerofrom",
+ "zerovec-derive",
+]
+
+[[package]]
+name = "zerovec-derive"
+version = "0.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b96237efa0c878c64bd89c436f661be4e46b2f3eff1ebb976f7ef2321d2f58f"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
diff --git a/rust-client/Cargo.toml b/rust-client/Cargo.toml
new file mode 100644
index 0000000000..5b49ab15fd
--- /dev/null
+++ b/rust-client/Cargo.toml
@@ -0,0 +1,47 @@
+[package]
+name = "wmill"
+version = """
+1.496.3
+"""
+edition = "2024"
+description = "A client library for accessing Windmill server wrapping the Windmill client API"
+license = "Apache-2.0"
+homepage = "https://windmill.dev"
+
+[workspace]
+resolver = "3"
+members = ["windmill_api"]
+
+[dependencies]
+serde_yaml = "0.9"
+serde_json = "1.0"
+serde = "1.0"
+thiserror = "2"
+anyhow = "1.0"
+uuid = "1"
+
+[dependencies.windmill-api]
+path = "./windmill_api"
+version = "1.496.3"
+
+[dependencies.futures]
+version = "0.3"
+
+[dependencies.tokio]
+version = "1"
+default-features = false
+
+[dependencies.once_cell]
+version = "1.18"
+
+[dev-dependencies.tokio]
+version = "1"
+default-features = false
+features = [
+    "rt",
+    "macros",
+]
+
+[features]
+default = []
+async = []
diff --git a/rust-client/README.md b/rust-client/README.md
new file mode 100644
index 0000000000..4fbf85010f
--- /dev/null
+++ b/rust-client/README.md
@@ -0,0 +1,195 @@
+# Windmill Rust SDK
+
+A Rust client library for interacting with [Windmill](https://www.windmill.dev/) API, providing type-safe abstractions for variables, resources, scripts, jobs, and state management.
+
+## Installation
+
+Add this to your ```Cargo.toml```:
+
+```toml
+[dependencies]
+wmill = "0.1.0"
+```
+
+For async support (recommended):
+
+```toml
+[dependencies]
+wmill = { version = "0.1.0", features = ["async"] }
+```
+
+## Usage
+
+### Initialize Client
+
+```ignore
+use wmill::Windmill;
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    // Read config from env vars
+    let wm = Windmill::default()?;
+    
+    // Or override specific values
+    let wm = Windmill::new(
+        Some("custom_token".to_string()),
+        Some("my_workspace".to_string()),
+        Some("http://localhost:8000".to_string())
+    )?;
+    
+    Ok(())
+}
+```
+
+### Variables
+
+```ignore
+// Get variable (auto-parsed)
+let db_config: serde_json::Value = wm.get_variable("u/admin/db_config").await?;
+
+// Get raw variable
+let raw_text = wm.get_variable_raw("u/user/text_note").await?;
+
+// Set variable
+wm.set_variable("new_value".to_string(), "u/user/my_var", false).await?;
+```
+
+### Resources
+
+```ignore
+// Get resource (typed)
+#[derive(serde::Deserialize)]
+struct DbConfig { host: String, port: u16 }
+
+let config: DbConfig = wm.get_resource("u/admin/db").await?;
+
+// Get raw resource
+let raw_json = wm.get_resource_any("u/admin/db").await?;
+
+// Set resource
+wm.set_resource(
+    Some(serde_json::json!({"host": "localhost", "port": 5432})),
+    "u/admin/db",
+    "postgresql"
+).await?;
+```
+
+### Scripts
+
+```ignore
+// Run script async
+let job_id = wm.run_script_async(
+    "u/user/my_script",
+    false,
+    serde_json::json!({"param": "value"}),
+    Some(10) // Schedule in 10 seconds
+).await?;
+
+// Run script sync
+let result = wm.run_script_sync(
+    "u/user/my_script",
+    false,
+    serde_json::json!({"param": "value"}),
+    Some(10),
+    Some(30), // 30s timeout
+    true,     // Verbose
+    true      // Assert result not None
+).await?;
+```
+
+### Jobs
+
+```ignore
+// Wait for job completion
+let result = wm.wait_job(&job_id, Some(60), true, true).await?;
+
+// Get job status
+let status = wm.get_job_status(&job_id).await?; // Running/Waiting/Completed
+
+// Get result directly
+let result = wm.get_result(&job_id).await?;
+```
+
+### State Management
+
+```ignore
+// Get typed state
+#[derive(serde::Deserialize)]
+struct ScriptState { counter: i32 }
+
+let state: ScriptState = wm.get_state().await?;
+
+// Get raw state
+let raw_state = wm.get_state_any().await?;
+
+// Update state
+wm.set_state(Some(serde_json::json!({"counter": 42}))).await?;
+```
+
+### Progress Tracking
+
+```ignore
+// Set job progress
+wm.set_progress(75, None).await?; // Uses current job ID from env
+
+// Get job progress
+let progress = wm.get_progress(Some(job_id.to_string())).await?;
+```
+
+### Custom API Calls
+
+The SDK provides direct access to underlying API endpoints through the ```call_api``` method, which works in both async and sync contexts:
+
+```ignore
+// Async usage
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let wm = Windmill::default()?;
+    
+    // Make direct API call to get user
+    let user = wm.call_api(wmill::apis::admin_api::get_user(
+        &wm.client_config,
+        &wm.workspace,
+        "Alice"
+    )).await;
+    
+    println!("User details: {:?}", user);
+    Ok(())
+}
+
+// Sync usage
+fn main() {
+    let wm = Windmill::default().unwrap();
+    
+    // Make direct API call to get user
+    let user = wm.call_api(wmill::apis::admin_api::get_user(
+        &wm.client_config,
+        &wm.workspace,
+        "Bob"
+    ));
+    
+    println!("User details: {:?}", user);
+}
+```
+
+This advanced feature allows access to any Windmill API endpoint, even those not covered by the SDK's convenience methods. Use this when:
+- Need to access newer/undocumented API endpoints
+- Require fine-grained control over API requests
+- Existing abstractions don't meet specific needs
+
+## Environment Variables
+
+The SDK uses these environment variables:
+
+| Variable | Required | Description |
+|---------|----------|-------------|
+| ```WM_TOKEN``` | ✅ | Authentication token |
+| ```WM_WORKSPACE``` | ✅ | Workspace name |
+| ```BASE_INTERNAL_URL``` | ✅ | API base URL (without ```/api```) |
+| ```WM_JOB_ID``` | Optional | Current job ID for progress tracking |
+| ```WM_STATE_PATH_NEW``` | Optional | State path override |
+
+## Contributions
+
+Contributions are welcome! Please open an issue or submit a PR.
+
diff --git a/rust-client/dev.nu b/rust-client/dev.nu
new file mode 100755
index 0000000000..010b84aa39
--- /dev/null
+++ b/rust-client/dev.nu
@@ -0,0 +1,81 @@
+#! /usr/bin/env nu
+
+let version = open ../version.txt;
+
+def main [ --publish(-p) --check(-c) --test(-t) ] {
+  mkdir api/a/
+
+  open ../backend/windmill-api/openapi.yaml
+    # openapi-generator confused with these two, so we just drop them
+    | reject paths."/w/{workspace}/apps/create_raw"
+    | reject paths."/w/{workspace}/apps/update_raw/{path}"
+    | save -f api/openapi.yaml;
+
+  openapi-generator-cli generate -i api/openapi.yaml -g rust -o ./windmill_api --strict-spec true --additional-properties=packageName="windmill-api"
+
+  # Patch Cargo.toml
+  open Cargo.toml
+  | update package.version $version
+  | save -f Cargo.toml
+
+  # Patch windmill_api/Cargo.toml
+  open windmill_api/Cargo.toml
+  # Use rustls - otherwise compilation will fail due to missing libssl
+  | update dependencies.reqwest.features [json, multipart, rustls-tls]
+  | insert dependencies.reqwest.default-features false
+  | update package.license "Apache-2.0"
+  | insert package.homepage "https://windmill.dev"
+  | save -f windmill_api/Cargo.toml
+  
+  # Recursively replace serde_json::from_str with our patched version
+  ls ./windmill_api/src/**/*.rs
+  | each { |file|
+      let path = $file.name
+      open $path
+      | str replace --all "serde_json::from_str" "crate::from_str_patched/* Externally injected from /build.nu */"
+      | save -f $path
+  }
+
+  # Inject patched from_str
+  echo `  
+// NOTE: Injected by rust-client/dev.nu
+pub fn from_str_patched<'a, T>(s: &'a str) -> Result<T, serde_json::Error>
+where
+    T: serde::de::DeserializeOwned + 'static,
+{
+    if std::any::TypeId::of::<T>() == std::any::TypeId::of::<String>()
+        || std::any::TypeId::of::<T>() == std::any::TypeId::of::<uuid::Uuid>() {
+        // unsafe { std::mem::transmute::<&str, T>(s) }
+        // Quote string
+        let a = format!("\"{}\"", s.replace('"', r#"\""#));
+        serde_json::from_str(&a)
+    } else {
+        serde_json::from_str(s)
+    }
+}
+  ` | save --append ./windmill_api/src/lib.rs
+
+  if $check {
+    print "Checking..."
+    cargo check --no-default-features
+    cargo check --features "async"
+  }
+
+  if $test {
+    print "Testing..."
+    cargo test --features async simple
+    cargo test --no-default-features
+  }
+
+  if $publish {
+    print "Publishing..."
+
+    print Publishing windmill-api
+    cd windmill_api
+    cargo publish --token $env.CRATES_IO_TOKEN --allow-dirty
+
+    print Publishing wmill
+    cd ../
+    cargo publish --token $env.CRATES_IO_TOKEN  --allow-dirty
+  }
+}
diff --git a/rust-client/src/client.rs b/rust-client/src/client.rs
new file mode 100644
index 0000000000..66dea99fbb
--- /dev/null
+++ b/rust-client/src/client.rs
@@ -0,0 +1,1047 @@
+#[cfg(feature = "async")]
+use futures::FutureExt;
+use windmill_api::{
+    apis::{
+        configuration::Configuration,
+        job_api,
+        resource_api::{self, get_resource_value_interpolated},
+        variable_api,
+    },
+    models::{EditResource, GetCompletedJobResultMaybe200Response},
+};
+
+use serde::Deserialize;
+use serde_json::{Value, json};
+use std::{
+    env::{self, var},
+    fmt::Debug,
+    time::{Duration, Instant},
+};
+
+use crate::{maybe_future::maybe_future::MaybeFuture, ret};
+
+#[derive(Debug, Clone)]
+pub struct Windmill {
+    pub workspace: String,
+    pub token: String,
+    pub base_internal_url: String,
+    pub client_config: Configuration,
+}
+
+impl Windmill {
+    /// Creates a new `Windmill` instance with default configuration.
+    ///
+    /// Reads configuration from environment variables:
+    /// - `WM_TOKEN` for authentication token
+    /// - `WM_WORKSPACE` for workspace name  
+    /// - `BASE_INTERNAL_URL` for API base URL (appends `/api` automatically)
+    ///
+    /// # Errors
+    /// Returns `SdkError` if:
+    /// - Required environment variables are missing
+    /// - Environment variables cannot be read
+    pub fn default() -> Result<Self, SdkError> {
+        Windmill::new(None, None, None)
+    }
+
+    /// Creates a new `Windmill` instance with optional overrides.
+    ///
+    /// Falls back to environment variables for any `None` parameters:
+    /// - `WM_TOKEN` if `token` is `None`
+    /// - `WM_WORKSPACE` if `workspace` is `None`  
+    /// - `BASE_INTERNAL_URL` + "/api" if `base_internal_url` is `None`
+    ///
+    /// # Parameters
+    /// - `token`: Optional bearer token override
+    /// - `workspace`: Optional workspace name override  
+    /// - `base_internal_url`: Optional base URL override (without `/api` suffix)
+    ///
+    /// # Errors  
+    /// Returns `SdkError` if:
+    /// - Required environment variables are missing when needed
+    /// - Environment variables cannot be read
+    pub fn new(
+        token: Option<String>,
+        workspace: Option<String>,
+        base_internal_url: Option<String>,
+    ) -> Result<Self, SdkError> {
+        use env::var;
+        let (token, base_internal_url, workspace) = (
+            token.or(var("WM_TOKEN").ok()).ok_or(SdkError::BadValue(
+                "WM_TOKEN is not set nor was provided in constructor".to_owned(),
+            ))?,
+            base_internal_url
+                .or(var("BASE_INTERNAL_URL").ok())
+                .ok_or(SdkError::BadValue(
+                    "BASE_INTERNAL_URL is not set nor was provided in constructor".to_owned(),
+                ))?
+                + "/api",
+            workspace
+                .or(var("WM_WORKSPACE").ok())
+                .ok_or(SdkError::BadValue(
+                    "WM_WORKSPACE is not set nor was provided in constructor".to_owned(),
+                ))?,
+        );
+
+        Ok(Windmill {
+            client_config: Configuration {
+                // TODO: client: reqwest::blocking::Client::new(), // Use blocking client?
+                base_path: base_internal_url.clone(),
+                bearer_access_token: Some(token.clone()),
+                ..Default::default()
+            },
+            workspace,
+            token,
+            base_internal_url,
+        })
+    }
+
+    /// Retrieves a variable from Windmill, automatically parsing it as JSON/YAML.
+    ///
+    /// This is the convenience version that attempts to parse the variable value as:
+    /// 1. JSON (primary attempt)
+    /// 2. YAML (fallback if JSON parsing fails)
+    /// 3. Raw string (final fallback if both parsings fail)
+    ///
+    /// For better performance when you know the format or don't need parsing,
+    /// use [`Self::get_variable_raw`] instead.
+    ///
+    /// # Arguments
+    /// * `path` - Variable path (e.g., "u/user/variable_name")
+    ///
+    /// # Example
+    /// ```no_run
+    ///
+    /// use wmill::Windmill;
+    /// use serde_json::json;
+    ///
+    /// let wm = Windmill::default()?;
+    ///
+    /// // For a variable containing JSON: {"key": "value"}
+    /// let json_var = wm.get_variable("u/admin/config")?;
+    ///
+    /// // For a variable containing plain text
+    /// let text_var = wm.get_variable("u/user/plaintext_note")?;
+    ///
+    /// # Ok::<(), wmill::SdkError>(())
+    /// ```
+    ///
+    /// See also: [`Self::get_variable_raw`] for the unparsed version
+    pub fn get_variable<'a>(&'a self, path: &'a str) -> MaybeFuture<'a, Result<Value, SdkError>> {
+        ret!(self.get_variable_inner(path));
+    }
+
+    async fn get_variable_inner<'a>(&'a self, path: &'a str) -> Result<Value, SdkError> {
+        let raw = self.get_variable_raw_inner(path).await?;
+        Ok(serde_json::from_str(&raw)
+            .or(serde_yaml::from_str(&raw))
+            .unwrap_or(json!(raw)))
+    }
+
+    /// This is the **faster version** when:
+    /// - You know the variable contains plain text
+    /// - You want to handle parsing yourself
+    /// - You need maximum performance
+    ///
+    /// Performance benefit comes from avoiding:
+    /// 1. JSON parsing attempt
+    /// 2. YAML parsing fallback
+    ///
+    /// # Arguments
+    /// * `path` - Variable path (e.g., "u/user/variable_name")
+    ///
+    /// # Example
+    /// ```no_run
+    /// use wmill::Windmill;
+    /// use serde_json::{json, Value};
+    ///
+    /// let wm = Windmill::default()?;
+    ///
+    /// // When you need the raw content
+    /// let raw_content = wm.get_variable_raw("u/user/custom_format")?;
+    ///
+    /// // When you know it's JSON and want to parse it differently
+    /// let json_value: Value = serde_json::from_str(
+    ///     &wm.get_variable_raw("u/admin/config")?
+    /// )?;
+    ///
+    /// # Ok::<(), wmill::SdkError>(())
+    /// ```
+    ///
+    /// See also: [`Self::get_variable`] for the auto-parsed version
+    pub fn get_variable_raw<'a>(
+        &'a self,
+        path: &'a str,
+    ) -> MaybeFuture<'a, Result<String, SdkError>> {
+        ret!(self.get_variable_raw_inner(path));
+    }
+
+    async fn get_variable_raw_inner<'a>(&'a self, path: &'a str) -> Result<String, SdkError> {
+        let v =
+            variable_api::get_variable_value(&self.client_config, &self.workspace, path).await?;
+
+        v.get(1..v.len() - 1)
+            .ok_or(SdkError::InternalError(
+                "returned value is incorrect".into(),
+            ))
+            .map(|s| s.to_owned())
+    }
+
+    /// Creates or updates a variable in the workspace.
+    ///
+    /// This function provides atomic variable management that:
+    /// - Creates a new variable if it doesn't exist
+    /// - Updates an existing variable if found
+    /// - Handles both regular and secret variables
+    ///
+    /// # Parameters
+    /// - `value`: The variable value to set
+    /// - `path`: The variable path/identifier
+    /// - `is_secret`: Whether to store as a secret (encrypted) variable
+    ///
+    /// # Errors
+    /// Returns `SdkError` if:
+    /// - Variable fetch fails for reasons other than "not found"
+    /// - Variable creation fails
+    /// - Variable update fails
+    /// - Underlying API calls fail
+    ///
+    /// # Notes
+    /// - For new variables, defaults to empty description
+    /// - Updates only modify the value (preserving other metadata)
+    /// - Secret status can only be set during creation
+    pub fn set_variable<'a>(
+        &'a self,
+        value: String,
+        path: &'a str,
+        is_secret: bool,
+    ) -> MaybeFuture<'a, Result<(), SdkError>> {
+        ret!(self.set_variable_inner(value, path, is_secret));
+    }
+
+    async fn set_variable_inner<'a>(
+        &'a self,
+        value: String,
+        path: &'a str,
+        is_secret: bool,
+    ) -> Result<(), SdkError> {
+        let res =
+            variable_api::get_variable(&self.client_config, &self.workspace, path, None, None)
+                .await;
+
+        if res.is_err() {
+            variable_api::create_variable(
+                &self.client_config,
+                &self.workspace,
+                windmill_api::models::CreateVariable {
+                    path: path.to_owned(),
+                    value,
+                    is_secret,
+                    description: "".to_owned(),
+                    account: None,
+                    is_oauth: None,
+                    expires_at: None,
+                },
+                None,
+            )
+            .await?;
+        } else {
+            variable_api::update_variable(
+                &self.client_config,
+                &self.workspace,
+                path,
+                windmill_api::models::EditVariable {
+                    path: None,
+                    value: Some(value),
+                    is_secret: None,
+                    description: None,
+                },
+                None,
+            )
+            .await?;
+        }
+        Ok(())
+    }
+
+    /// Fetches and deserializes a resource into a concrete type.
+    ///
+    /// This is the recommended way to access resources when you know the expected type.
+    /// For raw JSON access or dynamic typing, use [`Self::get_resource_any`] instead.
+    ///
+    /// # Type Parameters
+    /// * `T` - Any type implementing `DeserializeOwned` (most structs with `#[derive(Deserialize)]`)
+    ///
+    /// # Arguments
+    /// * `path` - The resource path (e.g., "u/user/resource_name")
+    ///
+    /// # Example
+    /// ```no_run
+    /// use wmill::Windmill;
+    /// use serde_json::{json, Value};
+    /// use serde::Deserialize;
+    ///
+    /// #[derive(Deserialize)]
+    /// struct DbConfig {
+    ///     url: String,
+    ///     pool_size: Option<u32>,
+    /// }
+    ///
+    /// let wm = Windmill::default()?;
+    ///
+    /// // Directly deserialize to your type
+    /// let config: DbConfig = wm.get_resource("u/admin/db_connection")?;
+    /// # Ok::<(), wmill::SdkError>(())
+    /// ```
+    ///
+    /// See also: [`Self::get_resource_any`] for untyped version
+    pub fn get_resource<'a, T: serde::de::DeserializeOwned>(
+        &'a self,
+        path: &'a str,
+    ) -> MaybeFuture<'a, Result<T, SdkError>> {
+        ret!(self.get_resource_inner(path));
+    }
+
+    async fn get_resource_inner<'a, T: serde::de::DeserializeOwned>(
+        &'a self,
+        path: &'a str,
+    ) -> Result<T, SdkError> {
+        Ok(serde_json::from_value(
+            self.get_resource_any_inner(path).await?,
+        )?)
+    }
+
+    /// Fetches a raw JSON [`Value`] from Windmill by path.
+    ///
+    /// Use this when you need the raw JSON structure or don't have a concrete type to deserialize into.
+    /// For typed deserialization, prefer [`Self::get_resource`] instead.
+    ///
+    /// # Arguments
+    /// * `path` - The resource path (e.g., "u/user/resource_name")
+    ///
+    /// # Example
+    /// ```no_run
+    /// use wmill::Windmill;
+    ///
+    /// let wm = Windmill::default()?;
+    ///
+    /// // When you need to inspect the raw structure first
+    /// let json = wm.get_resource_any("u/admin/db_connection")?;
+    ///
+    /// println!("Url is: {}", json["url"]);
+    ///
+    /// # Ok::<(), wmill::SdkError>(())
+    /// ```
+    ///
+    /// See also: [`Self::get_resource`] for typed version
+    pub fn get_resource_any<'a>(
+        &'a self,
+        path: &'a str,
+    ) -> MaybeFuture<'a, Result<Value, SdkError>> {
+        ret!(self.get_resource_any_inner(path));
+    }
+
+    async fn get_resource_any_inner<'a>(&'a self, path: &'a str) -> Result<Value, SdkError> {
+        Ok(
+            get_resource_value_interpolated(&self.client_config, &self.workspace, path, None)
+                .await?,
+        )
+    }
+
+    /// Creates or updates a resource in Windmill.
+    ///
+    /// This function sets a resource's value at the specified path, creating it if it doesn't exist
+    /// or updating it if it does. The resource will be of the specified type.
+    ///
+    /// # Arguments
+    /// * `value` - The value to set for the resource. Use `None` to create an empty resource.
+    /// * `path` - The ownership path of the resource (e.g., "u/user/resource_name").
+    ///            Defines permissions based on Windmill's path prefix system.
+    /// * `resource_type` - The type of resource to create (e.g., "postgresql", "smtp").
+    ///                     Must be a pre-existing resource type.
+    ///
+    /// # Examples
+    /// ```no_run
+    /// use wmill::Windmill;
+    ///
+    /// # fn main() -> anyhow::Result<()> {
+    /// let wm = Windmill::default()?;
+    /// wm.set_resource(
+    ///     Some(serde_json::json!({"host": "localhost", "port": 5432})),
+    ///     "u/admin/database",
+    ///     "postgresql"
+    /// )?;
+    /// # Ok(())
+    /// # }
+    /// ```
+    pub fn set_resource<'a>(
+        &'a self,
+        value: Option<Value>,
+        path: &'a str,
+        resource_type: &'a str,
+    ) -> MaybeFuture<'a, Result<(), SdkError>> {
+        ret!(self.set_resource_inner(value, path, resource_type));
+    }
+
+    async fn set_resource_inner<'a>(
+        &'a self,
+        value: Option<Value>,
+        path: &'a str,
+        resource_type: &'a str,
+    ) -> Result<(), SdkError> {
+        // if resource_api::get_resource(&self.client_config, &self.workspace, path)
+        //     .await
+        //     .is_err()
+        if !resource_api::exists_resource(&self.client_config, &self.workspace, path).await? {
+            resource_api::create_resource(
+                &self.client_config,
+                &self.workspace,
+                windmill_api::models::CreateResource {
+                    path: path.to_owned(),
+                    value,
+                    description: None,
+                    resource_type: resource_type.to_owned(),
+                    // resource_type: "any".to_owned(),
+                },
+                // Some(true),
+                None,
+            )
+            .await?;
+        } else {
+            resource_api::update_resource(
+                &self.client_config,
+                &self.workspace,
+                path,
+                EditResource {
+                    path: None,
+                    description: None,
+                    value: Some(value),
+                },
+            )
+            .await?;
+        }
+        Ok(())
+    }
+
+    /// Retrieves and deserializes the current typed state value for a script's execution context.
+    ///
+    /// This is the typed version of [`Self::get_state_any`], automatically deserializing the state
+    /// into the specified type `T` that implements [`serde::de::DeserializeOwned`].
+    ///
+    /// # Type Parameter
+    /// * `T` - The type to deserialize into (must implement `serde::de::DeserializeOwned`)
+    ///
+    /// # Examples
+    /// ```no_run
+    /// use wmill::Windmill;
+    /// use serde_json::{json, Value};
+    /// use serde::Deserialize;
+    ///
+    /// #[derive(Deserialize)]
+    /// struct ScriptState {
+    ///     counter: i32,
+    ///     last_run: String,
+    /// }
+    ///
+    /// let wm = Windmill::default()?;
+    ///
+    /// // Get typed state
+    /// let state: ScriptState = wm.get_state()?;
+    ///
+    /// println!("Counter: {}, Last run: {}", state.counter, state.last_run);
+    ///
+    /// # Ok::<(), wmill::SdkError>(())
+    /// ```
+    ///
+    /// # Behavior Details
+    /// - Uses same state path resolution as [`Self::get_state_any`] (`WM_STATE_PATH_NEW` → `WM_STATE_PATH` fallback)
+    /// - Performs runtime type checking during deserialization
+    ///
+    /// # When to Use vs [`Self::get_state_any`]
+    /// | Use Case               | `get_state<T>`          | `get_state_any`        |
+    /// |------------------------|-------------------------|------------------------|
+    /// | Known state structure  | ✅ Preferred            | ⚠️ Requires manual parsing |
+    /// | Dynamic state          | ❌ Won't compile        | ✅ Works               |
+    /// | Type safety            | ✅ Compile-time checks  | ❌ Runtime checks only |
+    ///
+    /// # Notes
+    /// - For complex types, derive `Deserialize` using Serde attributes
+    /// - Prefer this over [`Self::get_state_any`] when state schema is stable
+    /// - State modifications should use corresponding [`Self::set_state`] with matching type
+    ///
+    /// # See Also
+    /// - [`Self::get_state_any`] - Untyped state access
+    /// - [`Self::set_state`] - For updating typed states
+    /// - [Windmill State Management](https://www.windmill.dev/docs/core_concepts/persistent_storage/within_windmill#states)
+    pub fn get_state<'a, T: serde::de::DeserializeOwned>(
+        &'a self,
+    ) -> MaybeFuture<'a, Result<T, SdkError>> {
+        ret!(self.get_resource_inner(&get_state_path()?));
+    }
+
+    /// Retrieves the current state value for a script's execution context.
+    ///
+    /// States persist data between runs of the same script by the same trigger (schedule or user).
+    /// This is the untyped version that returns a generic [`Value`].
+    ///
+    /// # Examples
+    /// ```no_run
+    /// use wmill::Windmill;
+    /// use serde_json::Value;
+    /// use serde::Deserialize;
+    ///
+    /// let wm = Windmill::default()?;
+    ///
+    /// // Get state (returns serde_json::Value)
+    /// let state: Value = wm.get_state_any()?;
+    ///
+    /// // Use with default if empty
+    /// let counter = state.as_i64().unwrap_or(0);
+    /// # Ok::<(), wmill::SdkError>(())
+    /// ```
+    ///
+    /// # Behavior Details
+    /// - Automatically uses the script's state path from `WM_STATE_PATH_NEW` (falls back to `WM_STATE_PATH`)
+    /// - Returns the full state object stored as a Windmill resource
+    /// - State resources are hidden from Workspace view but visible under Resources → States
+    ///
+    /// # Typical Use Cases
+    /// 1. Maintaining counters between runs
+    /// 2. Storing last execution timestamps
+    /// 3. Keeping reference data (like previous API responses)
+    ///
+    /// # Notes
+    /// - For typed state access, use `get_state<T>` instead
+    /// - States are isolated per script and trigger combination
+    /// - Maximum state size: 5MB (compressed)
+    ///
+    /// # See Also
+    /// - [`Self::set_state`] - For updating the state
+    /// - [Windmill State Management](https://www.windmill.dev/docs/core_concepts/persistent_storage/within_windmill#states)
+    pub fn get_state_any<'a>(&'a self) -> MaybeFuture<'a, Result<Value, SdkError>> {
+        ret!(self.get_resource_any_inner(&get_state_path()?));
+    }
+
+    /// Updates or clears the script's persistent state.
+    ///
+    /// # Arguments
+    /// * `value` - New state value (`Some(Value)`) or `None` to clear state
+    ///
+    /// # Examples
+    /// ```no_run
+    /// use wmill::Windmill;
+    /// use serde_json::json;
+    ///
+    /// # async fn example() -> anyhow::Result<()> {
+    /// let wm = Windmill::default()?;
+    ///
+    /// // Set state
+    /// wm.set_state(Some(json!({"count": 42})))?;
+    ///
+    /// // Clear state
+    /// wm.set_state(None)?;
+    /// # Ok(())
+    /// # }
+    /// ```
+    ///
+    /// See also: [`Self::get_state`], [`Self::get_state_any`]
+    pub fn set_state<'a>(&'a self, value: Option<Value>) -> MaybeFuture<'a, Result<(), SdkError>> {
+        ret!(self.set_resource_inner(value, &get_state_path()?, "state"));
+    }
+
+    /// Executes a script synchronously and waits for its completion.
+    ///
+    /// This is a blocking version of `run_script_async` that handles the entire script execution
+    /// lifecycle including job scheduling and result waiting.
+    ///
+    /// # Parameters
+    /// - `ident`: Script identifier (either path or hash)
+    /// - `ident_is_hash`: Whether the identifier is a hash (true) or path (false)
+    /// - `args`: JSON arguments to pass to the script
+    /// - `scheduled_in_secs`: Optional delay before execution (in seconds)
+    /// - `timeout_secs`: Maximum time to wait for job completion (in seconds)
+    /// - `verbose`: Whether to print execution details
+    /// - `assert_result_is_not_none`: Whether to fail if the result is None
+    ///
+    /// # Errors
+    /// Returns `SdkError` if:
+    /// - Script fails to start
+    /// - Job times out
+    /// - Result assertion fails
+    /// - Underlying API calls fail
+    pub fn run_script_sync<'a>(
+        &'a self,
+        ident: &'a str,
+        ident_is_hash: bool,
+        args: Value,
+        scheduled_in_secs: Option<u32>,
+        timeout_secs: Option<u64>,
+        verbose: bool,
+        assert_result_is_not_none: bool,
+    ) -> MaybeFuture<'a, Result<Value, SdkError>> {
+        if verbose {
+            println!("running `{ident}` synchronously with {:?}", &args);
+        }
+
+        ret!(async move {
+            let job_id = self
+                .run_script_async_inner(ident, ident_is_hash, args, scheduled_in_secs)
+                .await?;
+            self.wait_job_inner(
+                &job_id.to_string(),
+                timeout_secs,
+                verbose,
+                assert_result_is_not_none,
+            )
+            .await
+        });
+    }
+
+    /// Asynchronously executes a script in Windmill and returns its job UUID.
+    ///
+    /// This function runs a script either by path or by hash, with optional:
+    /// - Parent job inheritance (when run within a flow)
+    /// - Scheduled execution delay
+    /// - Argument passing
+    ///
+    /// # Arguments
+    /// * `ident` - Script identifier (path or hash depending on `ident_is_hash`)
+    /// * `ident_is_hash` - If true, `ident` is treated as a script hash; if false, as a path
+    /// * `args` - JSON arguments to pass to the script (must be an object if using path)
+    /// * `scheduled_in_secs` - Optional delay (in seconds) before execution
+    ///
+    /// # Examples
+    /// ```no_run
+    /// use wmill::Windmill;
+    /// use serde_json::json;
+    ///
+    /// let wm = Windmill::default()?;
+    /// let job_id = wm.run_script_async(
+    ///     "u/user/script_path",
+    ///     false,
+    ///     json!({"param1": "value1"}),
+    ///     Some(10) // Run after 10 seconds
+    /// )?;
+    ///
+    /// # Ok::<(), wmill::SdkError>(())
+    /// ```
+    ///
+    /// # Behavior Details
+    /// - **Automatic Job Inheritance**:
+    ///   - Detects `WM_JOB_ID` env var → sets as `parent_job`
+    ///   - Detects `WM_ROOT_FLOW_JOB_ID` env var → sets as `root_job`
+    /// - **Scheduled Execution**:
+    ///   - When `scheduled_in_secs` is provided, sets `scheduled_in_secs` in args
+    /// - **Argument Handling**:
+    ///   - For path-based execution (`ident_is_hash=false`), args must be a JSON object
+    ///   - For hash-based execution, args can be any valid JSON value
+    ///
+    /// # Errors
+    /// - [`SdkError::BadValue`] if path-based execution receives non-object arguments
+    /// - API errors from Windmill's backend
+    pub fn run_script_async<'a>(
+        &'a self,
+        ident: &'a str,
+        ident_is_hash: bool,
+        args: Value,
+        scheduled_in_secs: Option<u32>,
+    ) -> MaybeFuture<'a, Result<uuid::Uuid, SdkError>> {
+        ret!(self.run_script_async_inner(ident, ident_is_hash, args, scheduled_in_secs));
+    }
+
+    async fn run_script_async_inner<'a>(
+        &'a self,
+        ident: &'a str,
+        ident_is_hash: bool,
+        mut args: Value,
+        scheduled_in_secs: Option<u32>,
+    ) -> Result<uuid::Uuid, SdkError> {
+        if let Ok(parent_job) = var("WM_JOB_ID") {
+            args["parent_job"] = json!(parent_job);
+        }
+
+        if let Ok(root_job) = var("WM_ROOT_FLOW_JOB_ID") {
+            args["root_job"] = json!(root_job);
+        }
+
+        if let Some(scheduled_in_secs) = scheduled_in_secs {
+            args["scheduled_in_secs"] = json!(scheduled_in_secs);
+        }
+
+        let uuid = if ident_is_hash {
+            job_api::run_script_by_hash(
+                &self.client_config,
+                &self.workspace,
+                ident,
+                args,
+                None,
+                None,
+                None,
+                None,
+                None,
+                None,
+                None,
+                None,
+                None,
+            )
+            .await?
+        } else {
+            job_api::run_script_by_path(
+                &self.client_config,
+                &self.workspace,
+                ident,
+                args.as_object()
+                    .ok_or(SdkError::BadValue(format!(
+                        "Args should be Object, but it is: {}",
+                        args
+                    )))?
+                    .clone()
+                    .into_iter()
+                    .collect(),
+                None,
+                None,
+                None,
+                None,
+                None,
+                None,
+                None,
+                None,
+            )
+            .await?
+        };
+        Ok(uuid)
+    }
+
+    /// Waits for a job to complete and returns its result.
+    ///
+    /// This function provides both synchronous and asynchronous interfaces for waiting
+    /// on job completion, with timeout handling and result validation.
+    ///
+    /// # Parameters
+    /// - `job_id`: The ID of the job to wait for
+    /// - `timeout_secs`: Maximum time to wait (in seconds) before cancelling the job
+    /// - `verbose`: Whether to print progress information
+    /// - `assert_result_is_not_none`: Whether to fail if the job returns no result
+    ///
+    /// # Errors
+    /// Returns `SdkError` if:
+    /// - Job fails or times out
+    /// - Result assertion fails when `assert_result_is_not_none` is true
+    /// - Underlying API calls fail
+    ///
+    /// # Behavior
+    /// 1. Polls job status at 500ms intervals
+    /// 2. Cancels job if timeout is reached
+    /// 3. Validates success status and optional result presence
+    /// 4. Returns either the result or appropriate error
+    pub fn wait_job<'a>(
+        &'a self,
+        job_id: &'a str,
+        timeout_secs: Option<u64>,
+        verbose: bool,
+        assert_result_is_not_none: bool,
+    ) -> MaybeFuture<'a, Result<Value, SdkError>> {
+        ret!(self.wait_job_inner(job_id, timeout_secs, verbose, assert_result_is_not_none));
+    }
+
+    async fn wait_job_inner<'a>(
+        &'a self,
+        job_id: &'a str,
+        timeout_secs: Option<u64>,
+        verbose: bool,
+        assert_result_is_not_none: bool,
+    ) -> Result<Value, SdkError> {
+        let start = Instant::now();
+        loop {
+            if let Some(timeout) = timeout_secs {
+                if start.elapsed().as_secs() > timeout {
+                    println!("WARN: reached timeout for {job_id}. Cancelling the job.");
+                    job_api::cancel_queued_job(
+                        &self.client_config,
+                        &self.workspace,
+                        job_id,
+                        windmill_api::models::CancelQueuedJobRequest {
+                            reason: Some("reached timeout".into()),
+                        },
+                    )
+                    .await?;
+                }
+            }
+            let GetCompletedJobResultMaybe200Response {
+                completed,
+                result,
+                success,
+                started,
+            } = job_api::get_completed_job_result_maybe(
+                &self.client_config,
+                &self.workspace,
+                job_id,
+                Some(true),
+            )
+            .await?;
+
+            if matches!(started, Some(false)) && verbose {
+                println!("INFO: job {job_id} has not started yet");
+            }
+
+            if completed {
+                if matches!(success, Some(true)) {
+                    if result.is_none() && assert_result_is_not_none {
+                        return Err(SdkError::ExecutionError("Result was None".into()));
+                    }
+                    return Ok(result.unwrap_or_default());
+                } else {
+                    return Err(SdkError::ExecutionError(format!(
+                        "Job {job_id} was not successful: {:?}",
+                        result
+                    )));
+                }
+            }
+            if verbose {
+                println!("INFO: sleeping 0.5 seconds for {job_id}");
+            }
+            tokio::time::sleep(Duration::from_millis(500)).await;
+        }
+    }
+
+    /// Retrieves the current status of a Windmill job by its UUID.
+    ///
+    /// This function queries the Windmill backend to determine whether a job is:
+    /// - Waiting to be executed
+    /// - Currently running
+    /// - Already completed
+    ///
+    /// # Arguments
+    /// * `job_id` - The UUID of the job to check (format: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx")
+    ///
+    /// # Job Lifecycle States
+    /// - **Waiting**: Job is queued but hasn't started execution
+    /// - **Running**: Job is currently being executed
+    /// - **Completed**: Job has finished (successfully or with errors)
+    pub fn get_job_status<'a>(
+        &'a self,
+        job_id: &'a str,
+    ) -> MaybeFuture<'a, Result<JobStatus, SdkError>> {
+        ret!(self.get_job_status_inner(job_id));
+    }
+
+    async fn get_job_status_inner<'a>(&'a self, job_id: &'a str) -> Result<JobStatus, SdkError> {
+        let job =
+            job_api::get_job(&self.client_config, &self.workspace, job_id, Some(true)).await?;
+
+        Ok(match job {
+            windmill_api::models::Job::JobOneOf(..) => JobStatus::Completed,
+            windmill_api::models::Job::JobOneOf1(job_one_of1) => {
+                if job_one_of1.running {
+                    JobStatus::Running
+                } else {
+                    JobStatus::Waiting
+                }
+            }
+        })
+    }
+
+    /// Retrieves the result of a completed job.
+    ///
+    /// This provides both synchronous and asynchronous interfaces for fetching
+    /// the final result of a successfully completed job.
+    ///
+    /// # Parameters
+    /// - `job_id`: The ID of the completed job to fetch results for
+    ///
+    /// # Errors
+    /// Returns `SdkError` if:
+    /// - Job is not found
+    /// - Job failed to complete successfully
+    /// - Underlying API calls fail
+    /// - Result cannot be parsed
+    ///
+    /// # Notes
+    /// - Only works for jobs that have already completed
+    /// - For pending/running jobs, use `wait_job` instead
+    /// - Does not handle timeouts or polling - assumes job is already complete
+    pub fn get_result<'a>(&'a self, job_id: &'a str) -> MaybeFuture<'a, Result<Value, SdkError>> {
+        ret!(self.get_result_inner(job_id));
+    }
+
+    async fn get_result_inner<'a>(&'a self, job_id: &'a str) -> Result<Value, SdkError> {
+        Ok(job_api::get_completed_job_result(
+            &self.client_config,
+            &self.workspace,
+            job_id,
+            None,
+            None,
+            None,
+            None,
+        )
+        .await?)
+    }
+
+    /// Updates the progress percentage of a running Windmill job.
+    ///
+    /// This function allows scripts to report their execution progress (0-100%) back to the Windmill UI.
+    /// Progress updates are visible in both the jobs dashboard and flow visualizations.
+    ///
+    /// # Arguments
+    /// * `value` - Progress percentage (0-100)
+    /// * `job_id` - Optional job UUID. If None, uses current job's ID from `WM_JOB_ID` environment variable
+    ///
+    /// # Examples
+    /// ```no_run
+    /// use wmill::Windmill;
+    /// # fn main () -> anyhow::Result<()>{
+    /// let wm = Windmill::default()?;
+    ///
+    /// // Report progress for current job
+    /// wm.set_progress(25, None)?;
+    /// # Ok(())
+    /// # }
+    ///
+    /// ```
+    ///
+    /// # Behavior Details
+    /// - Automatically handles flow context by detecting parent job ID
+    /// - Progress updates are reflected in real-time in the Windmill UI
+    /// - Typical usage pattern:
+    ///   ```ignore
+    ///   for (i, item) in items.iter().enumerate() {
+    ///       process(item);
+    ///       let progress = ((i + 1) * 100 / items.len()) as i32;
+    ///       wmill.set_progress(progress, None).await?;
+    ///   }
+    ///   ```
+    ///
+    /// # Notes
+    /// - Only affects jobs that are currently running
+    /// - Progress values outside 0-99 range are clamped by the server
+    /// - Progress cannot decrease
+    /// - For flows, updates the progress of both the step and parent flow
+    ///
+    /// # See Also
+    /// - [Flow Progress Tracking](https://www.windmill.dev/docs/advanced/explicit_progress)
+    /// - [`Self::get_progress`] - For reading job progress
+    pub fn set_progress<'a>(
+        &'a self,
+        value: u32,
+        job_id: Option<String>,
+    ) -> MaybeFuture<'a, Result<(), SdkError>> {
+        let f = async move {
+            let job_id = job_id.unwrap_or(var("WM_JOB_ID")?);
+            let job =
+                job_api::get_job(&self.client_config, &self.workspace, &job_id, Some(true)).await?;
+
+            let flow_id = match job {
+                windmill_api::models::Job::JobOneOf(job) => job.parent_job,
+                windmill_api::models::Job::JobOneOf1(job) => job.parent_job,
+            };
+
+            windmill_api::apis::metrics_api::set_job_progress(
+                &self.client_config,
+                &self.workspace,
+                &job_id,
+                windmill_api::models::SetJobProgressRequest {
+                    percent: Some(value as i32),
+                    flow_job_id: flow_id,
+                },
+            )
+            .await?;
+            Ok(())
+        };
+        ret!(f);
+    }
+
+    /// Retrieves the current progress percentage of a Windmill job.
+    ///
+    /// This function queries the Windmill backend to get the execution progress (0-100%)
+    /// of either a specific job or the current job context.
+    ///
+    /// # Arguments
+    /// * `job_id` - Optional job UUID. If `None`, uses current job's ID from `WM_JOB_ID` env var
+    ///
+    /// # See Also
+    /// - [Flow Progress Tracking](https://www.windmill.dev/docs/advanced/explicit_progress)
+    /// - [`Self::set_progress`] - For updating job progress
+    pub fn get_progress<'a>(
+        &'a self,
+        job_id: Option<String>,
+    ) -> MaybeFuture<'a, Result<u32, SdkError>> {
+        let f = async move {
+            let job_id = job_id.unwrap_or(var("WM_JOB_ID")?);
+            Ok(windmill_api::apis::metrics_api::get_job_progress(
+                &self.client_config,
+                &self.workspace,
+                &job_id,
+            )
+            .await
+            .map(|v| v as u32)?)
+        };
+        ret!(f);
+    }
+
+    /// Executes an API call in either asynchronous or synchronous mode based on compilation context.
+    ///
+    /// This function serves as a bridge between async and sync code, automatically adapting its behavior:
+    /// - With `async` feature: Returns a boxed future for later await
+    /// - Without `async` feature: Blocks immediately using the global runtime
+    ///
+    /// # Examples
+    ///
+    /// ## Async usage (with `async` feature)
+    /// ```ignore
+    /// use wmill::Windmill;
+    /// # #[tokio::main]
+    /// # async fn main() -> anyhow::Result<()>{
+    /// let wm = Windmill::default()?;
+    /// let user = wm.call_api(wmill::apis::admin_api::get_user(&wm.client_config, &wm.workspace, "Bob"))?;
+    /// println!("User details: {:?}", user);
+    /// # Ok(())
+    /// # }
+    /// ```
+    ///
+    /// ## Sync usage (without `async` feature)
+    /// ```ignore
+    /// use wmill::Windmill;
+    /// let wm = Windmill::new(Some("<TOKEN>".into()), Some("admins".into()), Some("http://localhost:5000/api".into()))?;
+    /// let user = wm.call_api(wmill::apis::admin_api::get_user(&wm.client_config, &wm.workspace, "Bob"));
+    /// println!("User details: {:?}", user);
+    /// # Ok::<(), wmill::SdkError>(())
+    /// ```
+    pub fn call_api<'a, T>(
+        &'a self,
+        callback: impl Future<Output = T> + std::marker::Send + 'a,
+    ) -> MaybeFuture<'a, T> {
+        ret!(callback);
+    }
+
+    // pub fn get_version() {}
+}
+
+pub enum JobStatus {
+    Running,
+    Waiting,
+    Completed,
+}
+
+fn get_state_path() -> Result<String, SdkError> {
+    Ok(var("WM_STATE_PATH_NEW").unwrap_or(var("WM_STATE_PATH")?))
+}
+
+#[derive(thiserror::Error, Debug)]
+pub enum SdkError {
+    #[error("Error: {0}")]
+    Serde(#[from] serde_json::Error),
+    #[error("Having troubles reading Env Variable: {0}")]
+    VarError(#[from] std::env::VarError),
+    #[error("Api error: {0}")]
+    ApiError(String),
+    #[error("Internal Error: {0}")]
+    InternalError(String),
+    #[error("Specified value is incorrect: {0}")]
+    BadValue(String),
+    #[error("{0}")]
+    ExecutionError(String),
+}
+impl<T: for<'a> Deserialize<'a>> From<windmill_api::apis::Error<T>> for SdkError {
+    fn from(value: windmill_api::apis::Error<T>) -> Self {
+        Self::ApiError(value.to_string())
+    }
+}
diff --git a/rust-client/src/lib.rs b/rust-client/src/lib.rs
new file mode 100644
index 0000000000..32dbb548de
--- /dev/null
+++ b/rust-client/src/lib.rs
@@ -0,0 +1,8 @@
+#![doc = include_str!("../README.md")]
+mod client;
+mod maybe_future;
+#[cfg(test)]
+mod tests;
+
+pub use client::{SdkError, Windmill};
+pub use windmill_api::apis;
diff --git a/rust-client/src/maybe_future.rs b/rust-client/src/maybe_future.rs
new file mode 100644
index 0000000000..ed9f3f086a
--- /dev/null
+++ b/rust-client/src/maybe_future.rs
@@ -0,0 +1,48 @@
+// #[cfg(feature = "async")]
+// use futures::future::BoxFuture;
+
+/// A conditional type that represents either:
+/// - A boxed future (async mode)
+/// - A direct value (sync mode)
+pub mod maybe_future {
+    #[cfg(feature = "async")]
+    pub type MaybeFuture<'a, T> = futures::future::BoxFuture<'a, T>;
+    #[cfg(not(feature = "async"))]
+    pub type MaybeFuture<'a, T> = T;
+}
+
+/// Bridges between async and sync execution contexts
+///
+/// Behavior depends on compilation:
+/// - With `async` feature: Returns a boxed future
+/// - Without `async` feature: Blocks on the global runtime
+#[macro_export]
+macro_rules! ret {
+    ($ex:expr) => {
+        #[cfg(feature = "async")]
+        return async move { $ex.await }.boxed();
+
+        #[cfg(not(feature = "async"))]
+        return crate::maybe_future::RUNTIME.block_on($ex);
+    };
+}
+
+/// The global Tokio runtime instance used in sync mode
+///
+/// Initialized lazily with:
+/// - I/O capabilities
+/// - Time utilities
+/// - Current-thread executor
+///
+/// # Panics
+///
+/// If Tokio fails to initialize the runtime
+#[cfg(not(feature = "async"))]
+pub(crate) static RUNTIME: once_cell::sync::Lazy<tokio::runtime::Runtime> =
+    once_cell::sync::Lazy::new(|| {
+        tokio::runtime::Builder::new_current_thread()
+            .enable_io()
+            .enable_time()
+            .build()
+            .unwrap()
+    });
diff --git a/rust-client/src/tests.rs b/rust-client/src/tests.rs
new file mode 100644
index 0000000000..7e3ef4cd77
--- /dev/null
+++ b/rust-client/src/tests.rs
@@ -0,0 +1,345 @@
+use serde::Deserialize;
+use serde_json::json;
+use uuid::Uuid;
+
+use super::*;
+
+fn wm() -> Windmill {
+    Windmill::new(
+        // Some("<WM_TOKEN>".into()),
+        None,
+        Some("admins".into()),
+        // Some("storage".into()),
+        Some("http://localhost:8000".into()),
+    )
+    .unwrap()
+}
+
+#[cfg(not(feature = "async"))]
+#[test]
+fn create() {
+    wm();
+}
+
+#[cfg(not(feature = "async"))]
+#[test]
+fn resources() {
+    #[derive(Deserialize, Debug, PartialEq, PartialOrd)]
+    struct MatrixResource {
+        token: String,
+        #[allow(non_snake_case)]
+        baseUrl: String,
+    }
+    let wm = wm();
+    let path = format!("f/tests/delete_me_{}", Uuid::new_v4());
+
+    {
+        wm.set_resource(
+            Some(json!({
+                "token": "token",
+                "baseUrl": "url"
+            })),
+            &path,
+            "matrix",
+        )
+        .unwrap();
+
+        let matrix: MatrixResource = wm.get_resource(&path).unwrap();
+
+        assert_eq!(
+            MatrixResource {
+                token: "token".into(),
+                baseUrl: "url".into()
+            },
+            matrix
+        );
+    }
+}
+
+#[cfg(not(feature = "async"))]
+#[test]
+fn variables() {
+    let wm = wm();
+    let path = format!("f/tests/delete_me_{}", Uuid::new_v4());
+
+    {
+        // Create new
+        wm.set_variable(
+            ":0".into(),
+            &path,
+            // TODO: Test with true
+            false,
+        )
+        .unwrap();
+
+        // Read
+        let out_val = wm.get_variable_raw(&path).unwrap();
+        assert_eq!(":0", &out_val);
+    }
+    {
+        // Update
+        let in_val = json!({
+            "a": true,
+            "b": "c"
+        });
+
+        wm.set_variable(
+            // Serialize as JSON
+            serde_yaml::to_string(&in_val).unwrap(),
+            &path,
+            false,
+        )
+        .unwrap();
+
+        // Read Updated
+        let out_val = wm.get_variable(&path).unwrap();
+
+        assert_eq!(in_val, out_val);
+    }
+}
+
+#[cfg(not(feature = "async"))]
+#[test]
+fn create_and_run() {
+    let wm = wm();
+
+    let path = format!("f/tests/delete_me_{}", Uuid::new_v4());
+    let resp = wm
+        .call_api(apis::script_api::create_script(
+            &wm.client_config,
+            &wm.workspace,
+            windmill_api::models::NewScript {
+                path: path.clone(),
+                parent_hash: None,
+                summary: "auto-generated script from rust sdk | testing".into(),
+                description: "auto-generated script from rust sdk | testing".into(),
+                content: r#"fn main() -> Result<String, String> { Ok("Hello World!".to_owned()) }"#
+                    .into(),
+                schema: None,
+                is_template: None,
+                lock: None,
+                language: windmill_api::models::ScriptLang::Rust,
+                kind: Some(windmill_api::models::new_script::Kind::Script),
+                tag: Some("rust".into()),
+                draft_only: None,
+                envs: None,
+                concurrent_limit: None,
+                concurrency_time_window_s: None,
+                cache_ttl: None,
+                dedicated_worker: None,
+                ws_error_handler_muted: None,
+                priority: None,
+                restart_unless_cancelled: None,
+                timeout: None,
+                delete_after_use: None,
+                deployment_message: None,
+                concurrency_key: None,
+                visible_to_runner_only: None,
+                no_main_func: None,
+                codebase: None,
+                has_preprocessor: None,
+                on_behalf_of_email: None,
+            },
+        ))
+        .unwrap();
+
+    assert_eq!(
+        json!("Hello World!"),
+        wm.run_script_sync(
+            //
+            &resp,
+            true,
+            json!(null),
+            None,
+            None,
+            true,
+            false,
+        )
+        .unwrap()
+    );
+}
+#[cfg(not(feature = "async"))]
+#[test]
+fn test_within() {
+    let wm = wm();
+
+    let path = format!("f/tests/delete_me_{}", Uuid::new_v4());
+    let resp = wm
+        .call_api(apis::script_api::create_script(
+            &wm.client_config,
+            &wm.workspace,
+            windmill_api::models::NewScript {
+                path: path.clone(),
+                parent_hash: None,
+                summary: "auto-generated script from rust sdk | testing".into(),
+                description: "auto-generated script from rust sdk | testing".into(),
+                content: r#"//! Add dependencies in the following partial Cargo.toml manifest
+//!
+//! ```cargo
+//! [dependencies]
+//! anyhow = "1.0.86"
+//! rand = "0.7.2"
+//! wmill = { path = "<CWD>"  }
+//! ```
+//!
+//! Note that serde is used by default with the `derive` feature.
+//! You can still reimport it if you need additional features.
+
+use anyhow::anyhow;
+use rand::seq::SliceRandom;
+use wmill::Windmill;
+use serde::Serialize;
+
+fn main() -> anyhow::Result<i32> {
+    let wm = Windmill::default()?;
+
+    // Resources
+    let inp = serde_json::json!({
+      "token": "token",
+      "baseUrl": "url"
+    });
+
+    wm.set_resource(Some(inp.clone()), "f/tests/delete_me_test_matrix", "matrix")?;
+    let out = wm.get_resource_any("f/tests/delete_me_test_matrix")?;
+    assert_eq!(inp, out);
+
+    // States
+    let inp = serde_json::json!({ "foo": 2 });
+    wm.set_state(Some(inp.clone()))?;
+    let out = wm.get_state_any()?;
+    assert_eq!(inp, out);
+
+    // Variables
+    let inp = "Foo".to_owned();
+    wm.set_variable(inp.clone(), "f/tests/my_test_var", false)?;
+    let out = wm.get_variable_raw("f/tests/my_test_var")?;
+    assert_eq!(inp, out);
+
+    Ok(0)
+}
+                    "#
+                .replace(
+                    "<CWD>",
+                    std::env::current_dir()
+                        .expect("Failed to get current directory")
+                        .to_str()
+                        .expect("Failed to parse current directory"),
+                )
+                .into(),
+                schema: None,
+                is_template: None,
+                lock: None,
+                language: windmill_api::models::ScriptLang::Rust,
+                kind: Some(windmill_api::models::new_script::Kind::Script),
+                tag: Some("rust".into()),
+                draft_only: None,
+                envs: None,
+                concurrent_limit: None,
+                concurrency_time_window_s: None,
+                cache_ttl: None,
+                dedicated_worker: None,
+                ws_error_handler_muted: None,
+                priority: None,
+                restart_unless_cancelled: None,
+                timeout: None,
+                delete_after_use: None,
+                deployment_message: None,
+                concurrency_key: None,
+                visible_to_runner_only: None,
+                no_main_func: None,
+                codebase: None,
+                has_preprocessor: None,
+                on_behalf_of_email: None,
+            },
+        ))
+        .unwrap();
+
+    assert_eq!(
+        json!(0),
+        wm.run_script_sync(
+            //
+            &resp,
+            true,
+            json!(null),
+            None,
+            None,
+            true,
+            false,
+        )
+        .unwrap()
+    );
+}
+
+// ASYNC TESTS
+#[cfg(feature = "async")]
+#[tokio::test]
+async fn simple() {
+    let wm = wm();
+    let path = format!("f/tests/delete_me_{}", Uuid::new_v4());
+
+    // Create new
+    wm.set_variable(
+        ":0".into(),
+        &path,
+        // TODO: Test with true
+        false,
+    )
+    .await
+    .unwrap();
+
+    let resp = wm
+        .call_api(apis::script_api::create_script(
+            &wm.client_config,
+            &wm.workspace,
+            windmill_api::models::NewScript {
+                path: path.clone(),
+                parent_hash: None,
+                summary: "auto-generated script from rust sdk | testing".into(),
+                description: "auto-generated script from rust sdk | testing".into(),
+                content: r#"fn main() -> Result<String, String> { Ok("Hello World!".to_owned()) }"#
+                    .into(),
+                schema: None,
+                is_template: None,
+                lock: None,
+                language: windmill_api::models::ScriptLang::Rust,
+                kind: Some(windmill_api::models::new_script::Kind::Script),
+                tag: Some("rust".into()),
+                draft_only: None,
+                envs: None,
+                concurrent_limit: None,
+                concurrency_time_window_s: None,
+                cache_ttl: None,
+                dedicated_worker: None,
+                ws_error_handler_muted: None,
+                priority: None,
+                restart_unless_cancelled: None,
+                timeout: None,
+                delete_after_use: None,
+                deployment_message: None,
+                concurrency_key: None,
+                visible_to_runner_only: None,
+                no_main_func: None,
+                codebase: None,
+                has_preprocessor: None,
+                on_behalf_of_email: None,
+            },
+        ))
+        .await
+        .unwrap();
+
+    assert_eq!(
+        json!("Hello World!"),
+        wm.run_script_sync(
+            //
+            &resp,
+            true,
+            json!(null),
+            None,
+            None,
+            true,
+            false,
+        )
+        .await
+        .unwrap()
+    );
+}
diff --git a/typescript-client/jsr.json b/typescript-client/jsr.json
index 076e774fa2..a8146e05ec 100644
--- a/typescript-client/jsr.json
+++ b/typescript-client/jsr.json
@@ -1,6 +1,6 @@
 {
   "name": "@windmill/windmill",
-  "version": "1.494.0",
+  "version": "1.498.0",
   "exports": "./src/index.ts",
   "publish": {
     "exclude": ["!src", "./s3Types.ts", "./client.ts"]
diff --git a/typescript-client/package.json b/typescript-client/package.json
index 11c77bb089..e81d522a28 100644
--- a/typescript-client/package.json
+++ b/typescript-client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "windmill-client",
   "description": "Windmill SDK client for browsers and Node.js",
-  "version": "1.494.0",
+  "version": "1.498.0",
   "author": "Ruben Fiszel",
   "license": "Apache 2.0",
   "devDependencies": {
diff --git a/version.txt b/version.txt
index 1d1c866bd4..a54f0c9fdf 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-1.494.0
+1.498.0