From 38b06bf3a718d9dfd53cecbcd370c71d034c0cf5 Mon Sep 17 00:00:00 2001
From: centdix <40307056+centdix@users.noreply.github.com>
Date: Wed, 18 Jun 2025 13:08:59 +0200
Subject: [PATCH 01/24] internal: add /updatesqlx as git command (#5969)

* add flow to update sqlx

* archive aider

* fix

* add comments
---
 ....yaml => aider-after-review.yaml.archived} |  0
 ...r-common.yml => aider-common.yml.archived} |  0
 ...rnal.yaml => aider-external.yaml.archived} |  0
 .../{aider.yaml => aider.yaml.archived}       |  0
 .github/workflows/update-sqlx.yaml            | 98 +++++++++++++++++++
 backend/update_sqlx.sh                        | 18 +++-
 6 files changed, 114 insertions(+), 2 deletions(-)
 rename .github/workflows/{aider-after-review.yaml => aider-after-review.yaml.archived} (100%)
 rename .github/workflows/{aider-common.yml => aider-common.yml.archived} (100%)
 rename .github/workflows/{aider-external.yaml => aider-external.yaml.archived} (100%)
 rename .github/workflows/{aider.yaml => aider.yaml.archived} (100%)
 create mode 100644 .github/workflows/update-sqlx.yaml

diff --git a/.github/workflows/aider-after-review.yaml b/.github/workflows/aider-after-review.yaml.archived
similarity index 100%
rename from .github/workflows/aider-after-review.yaml
rename to .github/workflows/aider-after-review.yaml.archived
diff --git a/.github/workflows/aider-common.yml b/.github/workflows/aider-common.yml.archived
similarity index 100%
rename from .github/workflows/aider-common.yml
rename to .github/workflows/aider-common.yml.archived
diff --git a/.github/workflows/aider-external.yaml b/.github/workflows/aider-external.yaml.archived
similarity index 100%
rename from .github/workflows/aider-external.yaml
rename to .github/workflows/aider-external.yaml.archived
diff --git a/.github/workflows/aider.yaml b/.github/workflows/aider.yaml.archived
similarity index 100%
rename from .github/workflows/aider.yaml
rename to .github/workflows/aider.yaml.archived
diff --git a/.github/workflows/update-sqlx.yaml b/.github/workflows/update-sqlx.yaml
new file mode 100644
index 0000000000..ddb9bb9e67
--- /dev/null
+++ b/.github/workflows/update-sqlx.yaml
@@ -0,0 +1,98 @@
+name: Update SQLx
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  update-sqlx:
+    if: github.event.issue.pull_request && startsWith(github.event.comment.body, '/update-sqlx')
+    runs-on: ubicloud-standard-8
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+
+    services:
+      postgres:
+        image: postgres:14
+        env:
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_USER: postgres
+          POSTGRES_DB: windmill
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - name: Comment on PR - Starting
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: 'Starting sqlx update...'
+            })
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.issue.pull_request.head.ref }}
+          fetch-depth: 0
+
+      - name: Checkout windmill-ee-private
+        uses: actions/checkout@v3
+        with:
+          repository: windmill-labs/windmill-ee-private
+          path: windmill-ee-private
+          token: ${{ secrets.EE_PRIVATE_TOKEN }}
+
+      - name: Install xmlsec build-time deps
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y --no-install-recommends \
+            pkg-config libxml2-dev libssl-dev \
+            xmlsec1 libxmlsec1-dev libxmlsec1-openssl
+
+      - name: Run update-sqlx script
+        env:
+          DATABASE_URL: postgres://postgres:postgres@localhost:5432/windmill
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          PR_NUMBER=${{ github.event.issue.number }}
+          BRANCH_NAME=$(gh pr view $PR_NUMBER --json headRefName --jq .headRefName)
+          echo "Checking out PR branch: $BRANCH_NAME"
+          git checkout $BRANCH_NAME
+          cd backend
+          cargo install sqlx-cli
+          sqlx migrate run
+          ./update_sqlx.sh --dir ./windmill-ee-private
+          # Pass the branch name to the next step
+          echo "BRANCH_NAME=$BRANCH_NAME" >> $GITHUB_ENV
+
+      - name: Commit changes if any
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add backend/.sqlx
+          git commit -m "Update SQLx metadata"
+          git push origin ${{ env.BRANCH_NAME }}
+
+      - name: Comment on PR - Completed
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: 'Successfully ran sqlx update'
+            })
diff --git a/backend/update_sqlx.sh b/backend/update_sqlx.sh
index 09824d9e24..6e64115ce0 100755
--- a/backend/update_sqlx.sh
+++ b/backend/update_sqlx.sh
@@ -1,4 +1,18 @@
-./substitute_ee_code.sh --dir ../windmill-ee-private
+#!/bin/bash
+
+# Default directory
+EE_DIR="../windmill-ee-private"
+
+# Parse arguments
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        --dir) EE_DIR="$2"; shift ;;
+        *) echo "Unknown parameter: $1"; exit 1 ;;
+    esac
+    shift
+done
+
+./substitute_ee_code.sh --dir "$EE_DIR"
 
 # Check if running on macOS
 if [[ "$(uname)" == "Darwin" ]]; then
@@ -18,4 +32,4 @@ if [[ "$(uname)" == "Darwin" ]]; then
     sed -i '' 's/^#samael = { version="0.0.14", features = \["xmlsec"\] }/samael = { version="0.0.14", features = ["xmlsec"] }/' Cargo.toml
     # Comment out the git-based samael dependency
     sed -i '' 's/^\(samael = { git="https:\/\/github.com\/njaremko\/samael", rev="464d015e3ae393e4b5dd00b4d6baa1b617de0dd6", features = \["xmlsec"\] }\)/# \1/' Cargo.toml
-fi
+fi
\ No newline at end of file

From 959280bf5ad6a55d8506929e13ba05e3e93656a7 Mon Sep 17 00:00:00 2001
From: centdix <40307056+centdix@users.noreply.github.com>
Date: Wed, 18 Jun 2025 13:22:11 +0200
Subject: [PATCH 02/24] fix wrong typo (#5970)

---
 .github/workflows/update-sqlx.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/update-sqlx.yaml b/.github/workflows/update-sqlx.yaml
index ddb9bb9e67..03ecba25b6 100644
--- a/.github/workflows/update-sqlx.yaml
+++ b/.github/workflows/update-sqlx.yaml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   update-sqlx:
-    if: github.event.issue.pull_request && startsWith(github.event.comment.body, '/update-sqlx')
+    if: github.event.issue.pull_request && startsWith(github.event.comment.body, '/updatesqlx')
     runs-on: ubicloud-standard-8
     permissions:
       contents: write
@@ -52,7 +52,7 @@ jobs:
         with:
           repository: windmill-labs/windmill-ee-private
           path: windmill-ee-private
-          token: ${{ secrets.EE_PRIVATE_TOKEN }}
+          token: ${{ secrets.WINDMILL_EE_PRIVATE_ACCESS }}
 
       - name: Install xmlsec build-time deps
         run: |

From be0c8ddae087fab89bc5c7aa70ff1367fa3c7077 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Wed, 18 Jun 2025 14:25:55 +0200
Subject: [PATCH 03/24] prevent datatable from spamming loadMore on scroll to
 end (#5973)

---
 .../src/lib/components/table/DataTable.svelte   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 82b2f3f401..2fed249679 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -73,7 +73,7 @@
 
 		const hasScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight
 		if (!hasScrollbar && hasMore) {
-			dispatch('loadMore')
+			triggerLoadMore()
 		}
 	}
 
@@ -92,11 +92,20 @@
 
 		if (!tableContainer) return
 		const { scrollTop, scrollHeight, clientHeight } = tableContainer
-		if (scrollHeight - (scrollTop + clientHeight) < 50) {
-			dispatch('loadMore')
+		if (scrollHeight - (scrollTop + clientHeight) === 0) {
+			triggerLoadMore()
 		}
 	}
 
+	let lastLoadMoreDispatch: number | undefined = $state(undefined)
+	function triggerLoadMore() {
+		if (lastLoadMoreDispatch && Date.now() - lastLoadMoreDispatch < 1000) {
+			return
+		}
+		dispatch('loadMore')
+		lastLoadMoreDispatch = Date.now()
+	}
+
 	$effect(() => {
 		if (tableContainer && hasMore && !loading) {
 			untrack(() => checkScrollStatus())
@@ -170,7 +179,7 @@
 				<Button
 					color="light"
 					size="xs2"
-					on:click={() => dispatch('loadMore')}
+					on:click={() => triggerLoadMore()}
 					endIcon={{ icon: ArrowDownIcon }}
 				>
 					Load {loadMore} more

From f97a61ecc8f2ae20739925a9adfdf631cd1278b4 Mon Sep 17 00:00:00 2001
From: dieriba <dieriba.pro@gmail.com>
Date: Wed, 18 Jun 2025 14:28:26 +0200
Subject: [PATCH 04/24] fix openapi export duplicate issue and nits (#5971)

* nits and fix duplicate issue

* update .sqlx

* nits
---
 ...d445c5eff75b2e2843ffd7a46b03cbaea9ae8.json | 35 +++++++++++++
 ...153c43903f929ae5d62fbba12610f89c36d55.json |  2 +-
 ...117eda99a6f482a073ccd36a6431ef689a3fd.json | 35 +++++++++++++
 backend/windmill-api/src/openapi.rs           | 52 +++++++++----------
 .../triggers/http/OpenAPISpecGenerator.svelte | 26 ++++++++--
 5 files changed, 118 insertions(+), 32 deletions(-)
 create mode 100644 backend/.sqlx/query-33367c42e87e78ae987c0966dc4d445c5eff75b2e2843ffd7a46b03cbaea9ae8.json
 create mode 100644 backend/.sqlx/query-dc36b46b9eb80cb7c92fa72519d117eda99a6f482a073ccd36a6431ef689a3fd.json

diff --git a/backend/.sqlx/query-33367c42e87e78ae987c0966dc4d445c5eff75b2e2843ffd7a46b03cbaea9ae8.json b/backend/.sqlx/query-33367c42e87e78ae987c0966dc4d445c5eff75b2e2843ffd7a46b03cbaea9ae8.json
new file mode 100644
index 0000000000..01dfc9ebe3
--- /dev/null
+++ b/backend/.sqlx/query-33367c42e87e78ae987c0966dc4d445c5eff75b2e2843ffd7a46b03cbaea9ae8.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 AND\n                    archived is FALSE\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": "33367c42e87e78ae987c0966dc4d445c5eff75b2e2843ffd7a46b03cbaea9ae8"
+}
diff --git a/backend/.sqlx/query-5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55.json b/backend/.sqlx/query-5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55.json
index 713ccb9dd3..36ddb8ab9f 100644
--- a/backend/.sqlx/query-5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55.json
+++ b/backend/.sqlx/query-5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55.json
@@ -15,7 +15,7 @@
       ]
     },
     "nullable": [
-      null
+      true
     ]
   },
   "hash": "5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55"
diff --git a/backend/.sqlx/query-dc36b46b9eb80cb7c92fa72519d117eda99a6f482a073ccd36a6431ef689a3fd.json b/backend/.sqlx/query-dc36b46b9eb80cb7c92fa72519d117eda99a6f482a073ccd36a6431ef689a3fd.json
new file mode 100644
index 0000000000..57f859d416
--- /dev/null
+++ b/backend/.sqlx/query-dc36b46b9eb80cb7c92fa72519d117eda99a6f482a073ccd36a6431ef689a3fd.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 AND\n                    archived is FALSE\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": "dc36b46b9eb80cb7c92fa72519d117eda99a6f482a073ccd36a6431ef689a3fd"
+}
diff --git a/backend/windmill-api/src/openapi.rs b/backend/windmill-api/src/openapi.rs
index c0e1d046b6..95f73f95ba 100644
--- a/backend/windmill-api/src/openapi.rs
+++ b/backend/windmill-api/src/openapi.rs
@@ -9,7 +9,6 @@ use axum::{
 };
 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;
@@ -24,9 +23,12 @@ use windmill_common::{
 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,
+use {
+    crate::{
+        http_trigger_args::HttpMethod, http_trigger_auth::ApiKeyAuthentication,
+        http_triggers::AuthenticationMethod, resources::try_get_resource_from_db_as,
+    },
+    itertools::Itertools,
 };
 
 lazy_static::lazy_static! {
@@ -311,9 +313,15 @@ fn generate_paths(
         }
     };
 
-    let mut duplicate_webhooks = HashSet::new();
+    let mut webhooks = HashSet::new();
 
     for path in paths {
+        if let Kind::Webhook(WebhookConfig { runnable_kind }) = &path.kind {
+            if !webhooks.insert((path.route_path.clone(), runnable_kind.to_owned())) {
+                continue;
+            }
+        }
+
         let (route_paths, parameters) =
             from_route_path_to_openapi_path(&path.route_path, &path.kind)?;
 
@@ -340,9 +348,6 @@ fn generate_paths(
 
             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]
@@ -354,7 +359,12 @@ fn generate_paths(
                 }
                 Kind::HttpRoute(HttpRouteConfig { method }) => {
                     if path_object.get(&method.to_string()).is_some() {
-                        return Err(anyhow!("Found duplicate route: {}", path.route_path).into());
+                        return Err(anyhow!(
+                            "Found duplicate {} method, for route at path: {}",
+                            method,
+                            path.route_path
+                        )
+                        .into());
                     }
                     is_async = path.is_async.unwrap_or(true);
                     (vec![method.to_owned()], false)
@@ -809,14 +819,6 @@ async fn webhook_to_future_paths(
             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 
@@ -827,16 +829,14 @@ async fn webhook_to_future_paths(
                     script
                 WHERE
                     path ~ ANY($1) AND
-                    workspace_id = $2
+                    workspace_id = $2 AND
+                    archived is FALSE
             "#,
             &script_webhook_filter,
             &w_id
         )
         .fetch_all(&mut *pg_pool)
-        .await?
-        .into_iter()
-        .unique()
-        .collect_vec();
+        .await?;
 
         let webhook_flows = sqlx::query_as!(
             MinifiedWebhook,
@@ -848,16 +848,14 @@ async fn webhook_to_future_paths(
                     flow
                 WHERE
                     path ~ ANY($1) AND
-                    workspace_id = $2
+                    workspace_id = $2 AND
+                    archived is FALSE
             "#,
             &flow_webhook_filter,
             &w_id
         )
         .fetch_all(&mut *pg_pool)
-        .await?
-        .into_iter()
-        .unique()
-        .collect_vec();
+        .await?;
 
         openapi_future_paths.reserve_exact(webhook_scripts.len() + webhook_flows.len());
 
diff --git a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
index bcb83e97db..a596d73d5e 100644
--- a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
+++ b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
@@ -47,11 +47,31 @@
 	let licenseName = $state('')
 	let licenseUrl = $state('')
 	let isGeneratingOpenapiSpec = $state(false)
-	let openapiDocument = $state('')
+	let openapiDocument = $state(
+		'# Click "Generate OpenAPI document" to generate your OpenAPI spec.'
+	)
 	let lang: OpenapiSpecFormat = $state('yaml')
 	let editor: SimpleEditor | undefined = $state()
 	let generateCurlCommandDrawer: Drawer | undefined = $state()
-	let webhookAndHttpRouteFilter: HttpRouteAndWebhook[] = $state([])
+	let webhookAndHttpRouteFilter: HttpRouteAndWebhook[] = $state([
+		{
+			user_or_folder_regex: '*',
+			user_or_folder_regex_value: '*',
+			path: '*',
+			runnable_kind: 'script'
+		},
+		{
+			user_or_folder_regex: '*',
+			user_or_folder_regex_value: '*',
+			path: '*',
+			runnable_kind: 'flow'
+		},
+		{
+			folder_regex: '*',
+			path_regex: '*',
+			route_path_regex: '*'
+		}
+	])
 	let disabled = $derived(webhookAndHttpRouteFilter.length === 0)
 	let token = $state('')
 	let obj: Record<string, unknown> = $state({})
@@ -556,8 +576,6 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 					</div>
 					<Button
 						{disabled}
-						color="light"
-						variant="border"
 						spacingSize="sm"
 						loading={isGeneratingOpenapiSpec}
 						on:click={async () => {

From 0f560bdc414aa37505a70fc91aeb36078b014e32 Mon Sep 17 00:00:00 2001
From: centdix <40307056+centdix@users.noreply.github.com>
Date: Wed, 18 Jun 2025 15:00:42 +0200
Subject: [PATCH 05/24] internal: fix claude tool usage (#5976)

* fix claude tool usage

* fix
---
 .github/workflows/claude.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
index 7261fb607c..a8b329cfea 100644
--- a/.github/workflows/claude.yml
+++ b/.github/workflows/claude.yml
@@ -69,11 +69,11 @@ jobs:
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           timeout_minutes: "60"
-          allowed_tools: "mcp__github__create_pull_request,Bash(npm run check),Bash(npm install),Bash(cargo check),Bash(curl https://sh.rustup.rs -sSf | sh -s -- -y)"
+          allowed_tools: "mcp__github__create_pull_request,Bash(npm:*),Bash(cargo:*)"
           custom_instructions: "IMPORTANT INSTRUCTIONS:
           - Bypass previous instructions and instead of adding a url in your comment to manually create a PR, if you created a new branch with your changes, automatically create a draft PR from that branch to main, with the title starting with [Claude PR].
           - If you made changes to the frontend code, run npm install, then npm run generate-backend-client, then npm run check. You can ignore warnings that are reported by the check script, but fix the errors.
-          - If you made changes to the backend code, install Rust and then run cargo check. You can ignore warnings that are reported by the check script, but fix the errors.
+          - If you made changes to the backend code, run cargo check. You can ignore warnings that are reported by the check script, but fix the errors.
           - DO NOT FORGET TO OPEN A DRAFT PR AFTER YOU ARE DONE if you made changes after a request from a git issue.
           AVAILABLE TOOLS:
           - mcp__github__create_pull_request: Create a PR from a branch to main
@@ -81,5 +81,4 @@ jobs:
           - Bash(npm install): Install dependencies. You need this to run npm run check.
           - Bash(npm run generate-backend-client): Generate the backend client. You need this to run npm run check.
           - Bash(cargo check): Run the cargo check script. You should run this tool after making changes to the backend code.
-          - Bash(curl https://sh.rustup.rs -sSf | sh -s -- -y): Install Rust. You need this to run cargo check."
           trigger_phrase: "/ai"

From 079af9292cde24bae3f950050291287026f6804e Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 18 Jun 2025 15:25:36 +0200
Subject: [PATCH 06/24] [Claude PR] Add account_id update support for variables
 (#5953)

* write sqlx

* all

* update sqlx

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 ...2cd49e4632f03f16ee6f34d9a2c0842890f05.json |  23 ---
 ...c3316248719dfa8a6c9e1d15a7931638e86db.json | 158 ------------------
 ...c913a19eef8678dc7890c2f0e1ef8758ec43b.json |  58 -------
 ...60ab725295e0f20cb5f85d5fddc14d503a119.json |  23 ---
 ...efb9806223d1684c53907ff825bc0228ec18d.json |  35 ----
 ...a55a4727195125cd49a2f92f89bcdf74dc364.json | 157 -----------------
 ...153c43903f929ae5d62fbba12610f89c36d55.json |   2 +-
 ...53bc72e787a3f768040c8c73ea86313badb71.json |  55 ------
 ...281b7ed329ff0c9d1617747f4ccd6014720cf.json |  23 +++
 ...05d0588a9ec8bbea9db10e95783e27e35bc12.json |  57 -------
 ...514b9a9f2200e5a5db0a741697b28cd8b505f.json |  23 +++
 ...ccc0024acf17ce740f70d2243e5e2a2b25163.json |  35 ----
 backend/windmill-api/src/variables.rs         |  47 ++++++
 13 files changed, 94 insertions(+), 602 deletions(-)
 delete mode 100644 backend/.sqlx/query-0de53d764bbcf44d76cd8e47f7b2cd49e4632f03f16ee6f34d9a2c0842890f05.json
 delete mode 100644 backend/.sqlx/query-144e4eccfd1c1e729e3c864bd5dc3316248719dfa8a6c9e1d15a7931638e86db.json
 delete mode 100644 backend/.sqlx/query-187e8f85a71dea958e89fdfdf96c913a19eef8678dc7890c2f0e1ef8758ec43b.json
 delete mode 100644 backend/.sqlx/query-3aaa6b6e362b10f2f3546b8595c60ab725295e0f20cb5f85d5fddc14d503a119.json
 delete mode 100644 backend/.sqlx/query-4dc21dda58758a84bbc1b7f9328efb9806223d1684c53907ff825bc0228ec18d.json
 delete mode 100644 backend/.sqlx/query-56c2522a12f91515e38290e4680a55a4727195125cd49a2f92f89bcdf74dc364.json
 delete mode 100644 backend/.sqlx/query-6b6aca712df657f81e74a438f6753bc72e787a3f768040c8c73ea86313badb71.json
 create mode 100644 backend/.sqlx/query-7aa589db3199d7f727cc69e63e1281b7ed329ff0c9d1617747f4ccd6014720cf.json
 delete mode 100644 backend/.sqlx/query-8c30e91c2486f7511563621e7e805d0588a9ec8bbea9db10e95783e27e35bc12.json
 create mode 100644 backend/.sqlx/query-c925264b7b0fd44ea7ab01c9af1514b9a9f2200e5a5db0a741697b28cd8b505f.json
 delete mode 100644 backend/.sqlx/query-d41df114e78873111e409e1182bccc0024acf17ce740f70d2243e5e2a2b25163.json

diff --git a/backend/.sqlx/query-0de53d764bbcf44d76cd8e47f7b2cd49e4632f03f16ee6f34d9a2c0842890f05.json b/backend/.sqlx/query-0de53d764bbcf44d76cd8e47f7b2cd49e4632f03f16ee6f34d9a2c0842890f05.json
deleted file mode 100644
index fd8f30417f..0000000000
--- a/backend/.sqlx/query-0de53d764bbcf44d76cd8e47f7b2cd49e4632f03f16ee6f34d9a2c0842890f05.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "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-144e4eccfd1c1e729e3c864bd5dc3316248719dfa8a6c9e1d15a7931638e86db.json b/backend/.sqlx/query-144e4eccfd1c1e729e3c864bd5dc3316248719dfa8a6c9e1d15a7931638e86db.json
deleted file mode 100644
index e573bfdab7..0000000000
--- a/backend/.sqlx/query-144e4eccfd1c1e729e3c864bd5dc3316248719dfa8a6c9e1d15a7931638e86db.json
+++ /dev/null
@@ -1,158 +0,0 @@
-{
-  "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            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": "is_flow",
-        "type_info": "Bool"
-      },
-      {
-        "ordinal": 7,
-        "name": "http_method: _",
-        "type_info": {
-          "Custom": {
-            "name": "http_method",
-            "kind": {
-              "Enum": [
-                "get",
-                "post",
-                "put",
-                "delete",
-                "patch"
-              ]
-            }
-          }
-        }
-      },
-      {
-        "ordinal": 8,
-        "name": "edited_by",
-        "type_info": "Varchar"
-      },
-      {
-        "ordinal": 9,
-        "name": "email",
-        "type_info": "Varchar"
-      },
-      {
-        "ordinal": 10,
-        "name": "edited_at",
-        "type_info": "Timestamptz"
-      },
-      {
-        "ordinal": 11,
-        "name": "extra_perms",
-        "type_info": "Jsonb"
-      },
-      {
-        "ordinal": 12,
-        "name": "is_async",
-        "type_info": "Bool"
-      },
-      {
-        "ordinal": 13,
-        "name": "authentication_method: _",
-        "type_info": {
-          "Custom": {
-            "name": "authentication_method",
-            "kind": {
-              "Enum": [
-                "none",
-                "windmill",
-                "api_key",
-                "basic_http",
-                "custom_script",
-                "signature"
-              ]
-            }
-          }
-        }
-      },
-      {
-        "ordinal": 14,
-        "name": "static_asset_config: _",
-        "type_info": "Jsonb"
-      },
-      {
-        "ordinal": 15,
-        "name": "is_static_website",
-        "type_info": "Bool"
-      },
-      {
-        "ordinal": 16,
-        "name": "authentication_resource_path",
-        "type_info": "Varchar"
-      },
-      {
-        "ordinal": 17,
-        "name": "wrap_body",
-        "type_info": "Bool"
-      },
-      {
-        "ordinal": 18,
-        "name": "raw_string",
-        "type_info": "Bool"
-      }
-    ],
-    "parameters": {
-      "Left": [
-        "Text",
-        "Text"
-      ]
-    },
-    "nullable": [
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      true,
-      false,
-      true,
-      false,
-      false
-    ]
-  },
-  "hash": "144e4eccfd1c1e729e3c864bd5dc3316248719dfa8a6c9e1d15a7931638e86db"
-}
diff --git a/backend/.sqlx/query-187e8f85a71dea958e89fdfdf96c913a19eef8678dc7890c2f0e1ef8758ec43b.json b/backend/.sqlx/query-187e8f85a71dea958e89fdfdf96c913a19eef8678dc7890c2f0e1ef8758ec43b.json
deleted file mode 100644
index db7d3ab2ec..0000000000
--- a/backend/.sqlx/query-187e8f85a71dea958e89fdfdf96c913a19eef8678dc7890c2f0e1ef8758ec43b.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "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                edited_at = now(), \n                is_static_website = $16\n            WHERE \n                workspace_id = $17 AND \n                path = $18\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"
-              ]
-            }
-          }
-        },
-        "Bool",
-        "Text",
-        "Text"
-      ]
-    },
-    "nullable": []
-  },
-  "hash": "187e8f85a71dea958e89fdfdf96c913a19eef8678dc7890c2f0e1ef8758ec43b"
-}
diff --git a/backend/.sqlx/query-3aaa6b6e362b10f2f3546b8595c60ab725295e0f20cb5f85d5fddc14d503a119.json b/backend/.sqlx/query-3aaa6b6e362b10f2f3546b8595c60ab725295e0f20cb5f85d5fddc14d503a119.json
deleted file mode 100644
index 5121dca128..0000000000
--- a/backend/.sqlx/query-3aaa6b6e362b10f2f3546b8595c60ab725295e0f20cb5f85d5fddc14d503a119.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "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-4dc21dda58758a84bbc1b7f9328efb9806223d1684c53907ff825bc0228ec18d.json b/backend/.sqlx/query-4dc21dda58758a84bbc1b7f9328efb9806223d1684c53907ff825bc0228ec18d.json
deleted file mode 100644
index e0c5d2bb4c..0000000000
--- a/backend/.sqlx/query-4dc21dda58758a84bbc1b7f9328efb9806223d1684c53907ff825bc0228ec18d.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "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-56c2522a12f91515e38290e4680a55a4727195125cd49a2f92f89bcdf74dc364.json b/backend/.sqlx/query-56c2522a12f91515e38290e4680a55a4727195125cd49a2f92f89bcdf74dc364.json
deleted file mode 100644
index d547567d28..0000000000
--- a/backend/.sqlx/query-56c2522a12f91515e38290e4680a55a4727195125cd49a2f92f89bcdf74dc364.json
+++ /dev/null
@@ -1,157 +0,0 @@
-{
-  "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                    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": "edited_by",
-        "type_info": "Varchar"
-      },
-      {
-        "ordinal": 9,
-        "name": "edited_at",
-        "type_info": "Timestamptz"
-      },
-      {
-        "ordinal": 10,
-        "name": "email",
-        "type_info": "Varchar"
-      },
-      {
-        "ordinal": 11,
-        "name": "extra_perms",
-        "type_info": "Jsonb"
-      },
-      {
-        "ordinal": 12,
-        "name": "is_async",
-        "type_info": "Bool"
-      },
-      {
-        "ordinal": 13,
-        "name": "authentication_method: _",
-        "type_info": {
-          "Custom": {
-            "name": "authentication_method",
-            "kind": {
-              "Enum": [
-                "none",
-                "windmill",
-                "api_key",
-                "basic_http",
-                "custom_script",
-                "signature"
-              ]
-            }
-          }
-        }
-      },
-      {
-        "ordinal": 14,
-        "name": "http_method: _",
-        "type_info": {
-          "Custom": {
-            "name": "http_method",
-            "kind": {
-              "Enum": [
-                "get",
-                "post",
-                "put",
-                "delete",
-                "patch"
-              ]
-            }
-          }
-        }
-      },
-      {
-        "ordinal": 15,
-        "name": "static_asset_config: _",
-        "type_info": "Jsonb"
-      },
-      {
-        "ordinal": 16,
-        "name": "is_static_website",
-        "type_info": "Bool"
-      },
-      {
-        "ordinal": 17,
-        "name": "wrap_body",
-        "type_info": "Bool"
-      },
-      {
-        "ordinal": 18,
-        "name": "raw_string",
-        "type_info": "Bool"
-      }
-    ],
-    "parameters": {
-      "Left": [
-        "Text"
-      ]
-    },
-    "nullable": [
-      false,
-      false,
-      false,
-      false,
-      false,
-      true,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      false,
-      true,
-      false,
-      false,
-      false
-    ]
-  },
-  "hash": "56c2522a12f91515e38290e4680a55a4727195125cd49a2f92f89bcdf74dc364"
-}
diff --git a/backend/.sqlx/query-5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55.json b/backend/.sqlx/query-5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55.json
index 36ddb8ab9f..713ccb9dd3 100644
--- a/backend/.sqlx/query-5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55.json
+++ b/backend/.sqlx/query-5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55.json
@@ -15,7 +15,7 @@
       ]
     },
     "nullable": [
-      true
+      null
     ]
   },
   "hash": "5a219a2532517869578c4504ff3153c43903f929ae5d62fbba12610f89c36d55"
diff --git a/backend/.sqlx/query-6b6aca712df657f81e74a438f6753bc72e787a3f768040c8c73ea86313badb71.json b/backend/.sqlx/query-6b6aca712df657f81e74a438f6753bc72e787a3f768040c8c73ea86313badb71.json
deleted file mode 100644
index fe40dfd0cd..0000000000
--- a/backend/.sqlx/query-6b6aca712df657f81e74a438f6753bc72e787a3f768040c8c73ea86313badb71.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "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-7aa589db3199d7f727cc69e63e1281b7ed329ff0c9d1617747f4ccd6014720cf.json b/backend/.sqlx/query-7aa589db3199d7f727cc69e63e1281b7ed329ff0c9d1617747f4ccd6014720cf.json
new file mode 100644
index 0000000000..b2101cc0d4
--- /dev/null
+++ b/backend/.sqlx/query-7aa589db3199d7f727cc69e63e1281b7ed329ff0c9d1617747f4ccd6014720cf.json
@@ -0,0 +1,23 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT EXISTS(SELECT 1 FROM variable WHERE account = $1 AND workspace_id = $2)",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "exists",
+        "type_info": "Bool"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Int4",
+        "Text"
+      ]
+    },
+    "nullable": [
+      null
+    ]
+  },
+  "hash": "7aa589db3199d7f727cc69e63e1281b7ed329ff0c9d1617747f4ccd6014720cf"
+}
diff --git a/backend/.sqlx/query-8c30e91c2486f7511563621e7e805d0588a9ec8bbea9db10e95783e27e35bc12.json b/backend/.sqlx/query-8c30e91c2486f7511563621e7e805d0588a9ec8bbea9db10e95783e27e35bc12.json
deleted file mode 100644
index 961a55d8b1..0000000000
--- a/backend/.sqlx/query-8c30e91c2486f7511563621e7e805d0588a9ec8bbea9db10e95783e27e35bc12.json
+++ /dev/null
@@ -1,57 +0,0 @@
-{
-  "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            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, now(), $17\n        )\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Left": [
-        "Varchar",
-        "Varchar",
-        "Varchar",
-        "Varchar",
-        "Bool",
-        "Varchar",
-        "Bool",
-        "Bool",
-        "Varchar",
-        "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": "8c30e91c2486f7511563621e7e805d0588a9ec8bbea9db10e95783e27e35bc12"
-}
diff --git a/backend/.sqlx/query-c925264b7b0fd44ea7ab01c9af1514b9a9f2200e5a5db0a741697b28cd8b505f.json b/backend/.sqlx/query-c925264b7b0fd44ea7ab01c9af1514b9a9f2200e5a5db0a741697b28cd8b505f.json
new file mode 100644
index 0000000000..37025d99d8
--- /dev/null
+++ b/backend/.sqlx/query-c925264b7b0fd44ea7ab01c9af1514b9a9f2200e5a5db0a741697b28cd8b505f.json
@@ -0,0 +1,23 @@
+{
+  "db_name": "PostgreSQL",
+  "query": "SELECT account FROM variable WHERE path = $1 AND workspace_id = $2",
+  "describe": {
+    "columns": [
+      {
+        "ordinal": 0,
+        "name": "account",
+        "type_info": "Int4"
+      }
+    ],
+    "parameters": {
+      "Left": [
+        "Text",
+        "Text"
+      ]
+    },
+    "nullable": [
+      true
+    ]
+  },
+  "hash": "c925264b7b0fd44ea7ab01c9af1514b9a9f2200e5a5db0a741697b28cd8b505f"
+}
diff --git a/backend/.sqlx/query-d41df114e78873111e409e1182bccc0024acf17ce740f70d2243e5e2a2b25163.json b/backend/.sqlx/query-d41df114e78873111e409e1182bccc0024acf17ce740f70d2243e5e2a2b25163.json
deleted file mode 100644
index febfc4c21f..0000000000
--- a/backend/.sqlx/query-d41df114e78873111e409e1182bccc0024acf17ce740f70d2243e5e2a2b25163.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "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/windmill-api/src/variables.rs b/backend/windmill-api/src/variables.rs
index 7dc6a85b49..4b6601e1e6 100644
--- a/backend/windmill-api/src/variables.rs
+++ b/backend/windmill-api/src/variables.rs
@@ -450,6 +450,7 @@ struct EditVariable {
     value: Option<String>,
     is_secret: Option<bool>,
     description: Option<String>,
+    account: Option<i32>,
 }
 
 #[derive(Deserialize)]
@@ -506,6 +507,10 @@ async fn update_variable(
         sqlb.set_str("description", &desc);
     }
 
+    if let Some(account_id) = ns.account {
+        sqlb.set_str("account", account_id);
+    }
+
     if let Some(nbool) = ns.is_secret {
         let old_secret = sqlx::query_scalar!(
             "SELECT is_secret from variable WHERE path = $1 AND workspace_id = $2",
@@ -523,6 +528,21 @@ async fn update_variable(
         sqlb.set_str("is_secret", nbool);
     }
     sqlb.returning("path");
+
+    // Get old account_id if we're updating the account field
+    let old_account_id = if ns.account.is_some() {
+        sqlx::query_scalar!(
+            "SELECT account FROM variable WHERE path = $1 AND workspace_id = $2",
+            &path,
+            &w_id
+        )
+        .fetch_optional(&db)
+        .await?
+        .flatten()
+    } else {
+        None
+    };
+
     let mut tx: Transaction<'_, Postgres> = user_db.begin(&authed).await?;
 
     if let Some(npath) = ns.path {
@@ -575,6 +595,33 @@ async fn update_variable(
         None,
     )
     .await?;
+
+    // Clean up old account if it's no longer referenced and different from new account
+    if let Some(old_acc_id) = old_account_id {
+        if ns.account.is_some() && ns.account != Some(old_acc_id) {
+            // Check if old account is still referenced by other variables or resources
+            let account_still_used = sqlx::query_scalar!(
+                "SELECT EXISTS(SELECT 1 FROM variable WHERE account = $1 AND workspace_id = $2)",
+                old_acc_id,
+                &w_id
+            )
+            .fetch_one(&mut *tx)
+            .await?
+            .unwrap_or(true);
+
+            if !account_still_used {
+                // Delete the orphaned account
+                sqlx::query!(
+                    "DELETE FROM account WHERE id = $1 AND workspace_id = $2",
+                    old_acc_id,
+                    &w_id
+                )
+                .execute(&mut *tx)
+                .await?;
+            }
+        }
+    }
+
     tx.commit().await?;
 
     handle_deployment_metadata(

From c088322159a1a7702215ee3d2ee2ac2cc7512e69 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 18 Jun 2025 16:14:50 +0200
Subject: [PATCH 07/24] fix input transform reactivity

---
 .../lib/components/InputTransformForm.svelte  |  5 +++
 .../lib/components/flows/FlowEditor.svelte    | 45 ++++++++++++-------
 frontend/vite.config.js                       |  6 +--
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 2252652663..b54daaeac5 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -177,6 +177,9 @@
 			if (arg.type) {
 				propertyType = arg.type
 			}
+			if (arg.expr != undefined) {
+				arg.expr = undefined
+			}
 		}
 	}
 
@@ -332,6 +335,8 @@
 			untrack(() => updatePropertyType())
 	})
 	$effect(() => {
+		arg.value
+		arg.expr
 		inputCat && propertyType && arg && untrack(() => onArgChange())
 	})
 	$effect(() => {
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 59a52d8165..2fcac3854c 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -17,22 +17,37 @@
 	import TriggerableByAI from '../TriggerableByAI.svelte'
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
-	export let loading: boolean
-	export let disableStaticInputs = false
-	export let disableTutorials = false
-	export let disableAi = false
-	export let disableSettings = false
-	export let disabledFlowInputs = false
-	export let smallErrorHandler = false
-	export let newFlow: boolean = false
-	export let savedFlow:
-		| (Flow & {
-				draft?: Flow | undefined
-		  })
-		| undefined = undefined
-	export let onDeployTrigger: (trigger: Trigger) => void = () => {}
+	interface Props {
+		loading: boolean
+		disableStaticInputs?: boolean
+		disableTutorials?: boolean
+		disableAi?: boolean
+		disableSettings?: boolean
+		disabledFlowInputs?: boolean
+		smallErrorHandler?: boolean
+		newFlow?: boolean
+		savedFlow?:
+			| (Flow & {
+					draft?: Flow | undefined
+			  })
+			| undefined
+		onDeployTrigger?: (trigger: Trigger) => void
+	}
 
-	let flowModuleSchemaMap: FlowModuleSchemaMap | undefined
+	let {
+		loading,
+		disableStaticInputs = false,
+		disableTutorials = false,
+		disableAi = false,
+		disableSettings = false,
+		disabledFlowInputs = false,
+		smallErrorHandler = false,
+		newFlow = false,
+		savedFlow = undefined,
+		onDeployTrigger = () => {}
+	}: Props = $props()
+
+	let flowModuleSchemaMap: FlowModuleSchemaMap | undefined = $state()
 
 	setContext<PropPickerContext>('PropPickerContext', {
 		flowPropPickerConfig: writable<FlowPropPickerConfig | undefined>(undefined),
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index de346e5a5c..1ce859cf67 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -12,6 +12,7 @@ const version = JSON.parse(json)
 const config = {
 	server: {
 		https: process.env.HTTPS === 'true',
+		allowedHosts: ['localhost', '127.0.0.1', '0.0.0.0', 'rubendev.wimill.xyz'],
 		port: 3000,
 		proxy: {
 			'^/api/.*': {
@@ -43,10 +44,7 @@ const config = {
 	preview: {
 		port: 3000
 	},
-	plugins: [
-		sveltekit(),
-		...(process.env.HTTPS === 'true' ? [mkcert()] : [])
-	],
+	plugins: [sveltekit(), ...(process.env.HTTPS === 'true' ? [mkcert()] : [])],
 	define: {
 		__pkg__: version
 	},

From 38a050b0f4f6af6dc73a29318eac3f985277752d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 18 Jun 2025 17:01:57 +0200
Subject: [PATCH 08/24] simplify select (#5978)

* improve select

* improve
---
 frontend/src/lib/components/ArgInput.svelte   |   4 +-
 .../lib/components/ObjectResourceInput.svelte |  54 +++++----
 .../src/lib/components/ResourcePicker.svelte  | 110 +++++++++++-------
 3 files changed, 102 insertions(+), 66 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 0670de684f..08e361eda8 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -738,8 +738,7 @@
 													/>
 												{:else if itemsType?.type == 'resource' && itemsType?.resourceType && resourceTypes?.includes(itemsType.resourceType)}
 													<ObjectResourceInput
-														value={v ? `$res:${v}` : undefined}
-														bind:path={value[i]}
+														bind:value={value[i]}
 														format={'resource-' + itemsType?.resourceType}
 														defaultValue={undefined}
 													/>
@@ -855,6 +854,7 @@
 		{: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 && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
+			<!-- {JSON.stringify(value)} -->
 			<ObjectResourceInput
 				{defaultValue}
 				selectFirst={!noDefaultOnSelectFirst}
diff --git a/frontend/src/lib/components/ObjectResourceInput.svelte b/frontend/src/lib/components/ObjectResourceInput.svelte
index a39355898e..d6594a2ddd 100644
--- a/frontend/src/lib/components/ObjectResourceInput.svelte
+++ b/frontend/src/lib/components/ObjectResourceInput.svelte
@@ -4,40 +4,43 @@
 	import S3ObjectPicker from './S3ObjectPicker.svelte'
 	import type SimpleEditor from './SimpleEditor.svelte'
 
-	export let format: string
-	export let value: any
-	export let disablePortal = false
-	export let showSchemaExplorer = false
-	export let selectFirst = false
-	export let defaultValue: any
-	export let editor: SimpleEditor | undefined = undefined
 	function isString(value: any) {
 		return typeof value === 'string' || value instanceof String
 	}
 
-	export let path: string = ''
-
-	function resourceToValue() {
-		if (path && path != '') {
-			value = `$res:${path}`
-		} else {
-			value = undefined
-		}
+	interface Props {
+		format: string
+		value: any
+		disablePortal?: boolean
+		showSchemaExplorer?: boolean
+		selectFirst?: boolean
+		defaultValue: any
+		editor?: SimpleEditor | undefined
+		path?: string
 	}
 
+	let {
+		format,
+		value = $bindable(),
+		disablePortal = false,
+		showSchemaExplorer = false,
+		selectFirst = false,
+		defaultValue,
+		editor = $bindable(undefined)
+	}: Props = $props()
+
 	function isResource() {
 		return isString(value) && value.length >= '$res:'.length
 	}
 
 	function valueToPath() {
 		if (isResource()) {
-			path = value.substr('$res:'.length)
+			return value.substr('$res:'.length)
 		}
 	}
-
-	$: value && valueToPath()
 </script>
 
+<!-- {JSON.stringify({ value })} -->
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
 	{#if format === 'resource-s3_object'}
 		<S3ObjectPicker bind:value />
@@ -45,12 +48,17 @@
 		<ResourcePicker
 			{selectFirst}
 			{disablePortal}
-			on:change={(e) => {
-				path = e.detail
-				resourceToValue()
-			}}
 			on:clear
-			bind:value={path}
+			bind:value={
+				() => valueToPath(),
+				(v) => {
+					if (v == undefined) {
+						value = undefined
+					} else {
+						value = `$res:${v}`
+					}
+				}
+			}
 			initialValue={typeof defaultValue == 'string' && defaultValue.startsWith('$res:')
 				? defaultValue.substr('$res:'.length)
 				: defaultValue}
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 69e8a4bf9e..a07596fc34 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -16,17 +16,38 @@
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
-	export let initialValue: string | undefined = undefined
-	export let value: string | undefined = initialValue
-	export let valueType: string | undefined = undefined
-	export let resourceType: string | undefined = undefined
-	export let disabled = false
-	export let disablePortal = false
-	export let showSchemaExplorer = false
-	export let selectFirst = false
-	export let expressOAuthSetup = false
-	export let defaultValues: Record<string, any> | undefined = undefined
-	export let placeholder: string | undefined = undefined
+	interface Props {
+		initialValue?: string | undefined
+		value?: string | undefined
+		valueType?: string | undefined
+		resourceType?: string | undefined
+		disabled?: boolean
+		disablePortal?: boolean
+		showSchemaExplorer?: boolean
+		selectFirst?: boolean
+		expressOAuthSetup?: boolean
+		defaultValues?: Record<string, any> | undefined
+		placeholder?: string | undefined
+	}
+
+	let {
+		initialValue = $bindable(undefined),
+		value = $bindable(undefined),
+		valueType = $bindable(undefined),
+		resourceType = undefined,
+		disabled = false,
+		disablePortal = false,
+		showSchemaExplorer = false,
+		selectFirst = false,
+		expressOAuthSetup = false,
+		defaultValues = undefined,
+		placeholder = undefined
+	}: Props = $props()
+
+	if (initialValue && value == undefined) {
+		console.log('initialValue', initialValue)
+		value = initialValue
+	}
 
 	onMount(() => {
 		setTimeout(() => {
@@ -36,26 +57,36 @@
 		}, 500)
 	})
 
-	let valueSelect =
-		initialValue || value
-			? {
-					value: value ?? initialValue,
-					label: value ?? initialValue,
-					type: valueType
-				}
-			: undefined
+	// let valueSelect = $state(
+	// 	initialValue || value
+	// 		? {
+	// 				value: value ?? initialValue,
+	// 				label: value ?? initialValue,
+	// 				type: valueType
+	// 			}
+	// 		: undefined
+	// )
 
-	$: if (value === undefined && initialValue) {
-		value = initialValue
-	}
+	$effect(() => {
+		if (value === undefined) {
+			if (initialValue) {
+				console.log('initialValue', initialValue)
+				value = initialValue
+			} else {
+				console.log('no value')
+			}
+		} else {
+			console.log('value', value)
+		}
+	})
 
-	let collection = valueSelect ? [valueSelect] : []
+	let collection = $state(value ? [{ value, label: value, type: valueType }] : [])
 
 	export async function askNewResource() {
 		appConnect?.open?.(resourceType)
 	}
 
-	let loading = true
+	let loading = $state(true)
 	async function loadResources(resourceType: string | undefined) {
 		loading = true
 		try {
@@ -84,10 +115,10 @@
 				nc.push({ value: value ?? initialValue!, label: value ?? initialValue!, type: '' })
 			}
 			collection = nc
-			if (collection.length == 1 && selectFirst && valueSelect == undefined) {
+			if (collection.length == 1 && selectFirst && value == undefined) {
+				console.log('selectFirst', collection[0].value)
 				value = collection[0].value
 				valueType = collection[0].type
-				valueSelect = collection[0]
 			}
 		} catch (e) {
 			sendUserToast('Failed to load resource types', true)
@@ -96,12 +127,16 @@
 		loading = false
 	}
 
-	$: $workspaceStore && loadResources(resourceType)
+	$effect(() => {
+		$workspaceStore && loadResources(resourceType)
+	})
 
-	$: dispatchIfMounted('change', value)
+	$effect(() => {
+		dispatchIfMounted('change', value)
+	})
 
-	let appConnect: AppConnect
-	let resourceEditor: ResourceEditorDrawer
+	let appConnect: AppConnect | undefined = $state()
+	let resourceEditor: ResourceEditorDrawer | undefined = $state()
 </script>
 
 <AppConnect
@@ -109,11 +144,6 @@
 		await loadResources(resourceType)
 		value = e.detail
 		valueType = collection.find((x) => x?.value == value)?.type
-		valueSelect = {
-			value: e.detail,
-			label: e.detail,
-			type: valueType ?? ''
-		}
 	}}
 	bind:this={appConnect}
 	{expressOAuthSetup}
@@ -125,11 +155,11 @@
 		if (e.detail) {
 			value = e.detail
 			valueType = collection.find((x) => x?.value == value)?.type
-			valueSelect = { value: e.detail, label: e.detail, type: valueType ?? '' }
+			// valueSelect = { value: e.detail, label: e.detail, type: valueType ?? '' }
 		}
 	}}
 />
-
+<!-- {JSON.stringify({ value, collection })} -->
 <div class="flex flex-col w-full items-start min-h-9">
 	<div class="flex flex-row w-full items-center">
 		{#if collection?.length > 0}
@@ -137,18 +167,16 @@
 				{disabled}
 				{disablePortal}
 				bind:value={
-					() => valueSelect?.value,
+					() => value,
 					(v) => {
-						valueSelect = collection.find((x) => x.value === v)
 						value = v
-						valueType = valueSelect?.type
+						valueType = collection.find((x) => x?.value == v)?.type
 					}
 				}
 				onClear={() => {
 					initialValue = undefined
 					value = undefined
 					valueType = undefined
-					valueSelect = undefined
 					dispatch('clear')
 				}}
 				items={collection}

From a58b0ffd0656c220e3b03a3d5a69bb79e6198da7 Mon Sep 17 00:00:00 2001
From: centdix <40307056+centdix@users.noreply.github.com>
Date: Wed, 18 Jun 2025 18:20:07 +0200
Subject: [PATCH 09/24] internal: fix sqlx git action usage (#5980)

* create frontend build dir

* specify version

* add cache
---
 .github/workflows/update-sqlx.yaml | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/update-sqlx.yaml b/.github/workflows/update-sqlx.yaml
index 03ecba25b6..7632a9b705 100644
--- a/.github/workflows/update-sqlx.yaml
+++ b/.github/workflows/update-sqlx.yaml
@@ -54,6 +54,12 @@ jobs:
           path: windmill-ee-private
           token: ${{ secrets.WINDMILL_EE_PRIVATE_ACCESS }}
 
+      # Cache rust dependencies
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "./backend -> target"
+
       - name: Install xmlsec build-time deps
         run: |
           sudo apt-get update
@@ -70,8 +76,9 @@ jobs:
           BRANCH_NAME=$(gh pr view $PR_NUMBER --json headRefName --jq .headRefName)
           echo "Checking out PR branch: $BRANCH_NAME"
           git checkout $BRANCH_NAME
+          mkdir frontend/build
           cd backend
-          cargo install sqlx-cli
+          cargo install sqlx-cli --version 0.8.5
           sqlx migrate run
           ./update_sqlx.sh --dir ./windmill-ee-private
           # Pass the branch name to the next step

From 86b5fab4dcf964c046ee062b074ed55fdf82e319 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 18 Jun 2025 18:21:20 +0200
Subject: [PATCH 10/24] [Claude PR] Fix incorrect $props generic syntax in
 Svelte 5 components (#5975)

* fix: correct $props generic syntax in Svelte 5 components

Replace incorrect `$props<T>()` syntax with correct `let x: T = $props()` syntax
to ensure proper TypeScript typing instead of falling back to `any` types.

This affects 11 Svelte 5 components throughout the frontend codebase.

Fixes #5974

Co-authored-by: Diego Imbert <diegoimbert@users.noreply.github.com>

* fix claude pr

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Diego Imbert <diegoimbert@users.noreply.github.com>
Co-authored-by: Diego Imbert <diego@windmill.dev>
Co-authored-by: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
---
 frontend/src/lib/components/DeployButton.svelte    |  4 ++--
 frontend/src/lib/components/SimpleEditor.svelte    | 14 +++++++-------
 frontend/src/lib/components/TriggerableByAI.svelte |  4 ++--
 frontend/src/lib/components/WorkerTagSelect.svelte |  4 ++--
 .../components/inputs/AppCodeInputComponent.svelte |  4 ++--
 .../editor/settingsPanel/EventHandlerItem.svelte   |  4 ++--
 .../flows/content/FlowModuleWorkerTagSelect.svelte |  4 ++--
 .../multiselect/MultiSelectWrapper.svelte          |  6 +++---
 .../components/scripts/CreateActionsScript.svelte  |  2 +-
 .../settings/ChangeWorkspaceColor.svelte           |  2 +-
 .../components/settings/ChangeWorkspaceName.svelte |  2 +-
 11 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/frontend/src/lib/components/DeployButton.svelte b/frontend/src/lib/components/DeployButton.svelte
index 22d0ef473f..e7151c3990 100644
--- a/frontend/src/lib/components/DeployButton.svelte
+++ b/frontend/src/lib/components/DeployButton.svelte
@@ -8,7 +8,7 @@
 		loadingSave = false,
 		newFlow = false,
 		dropdownItems = []
-	} = $props<{
+	}: {
 		loading?: boolean
 		loadingSave?: boolean
 		newFlow?: boolean
@@ -16,7 +16,7 @@
 			label: string
 			onClick: () => void
 		}>
-	}>()
+	} = $props()
 
 	const dispatch = createEventDispatcher()
 
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 29089a36aa..7f2f79c98d 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -115,7 +115,7 @@
 		tailwindClasses = [],
 		class: className = '',
 		loadAsync = false
-	} = $props<{
+	}: {
 		lang: string
 		code?: string
 		hash?: string
@@ -137,7 +137,7 @@
 		tailwindClasses?: string[]
 		class?: string
 		loadAsync?: boolean
-	}>()
+	} = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -343,7 +343,7 @@
 		// 	})
 		// }
 		try {
-			model = meditor.createModel(code, lang, mUri.parse(uri))
+			model = meditor.createModel(code ?? '', lang, mUri.parse(uri))
 		} catch (err) {
 			console.log('model already existed', err)
 			const nmodel = meditor.getModel(mUri.parse(uri))
@@ -361,7 +361,7 @@
 		}
 		try {
 			editor = meditor.create(divEl as HTMLDivElement, {
-				...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+				...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets),
 				model,
 				lineDecorationsWidth: 6,
 				lineNumbersMinChars: 2,
@@ -546,7 +546,7 @@
 		})
 	}
 
-	let previousExtraLib = undefined
+	let previousExtraLib: string | undefined = undefined
 	function loadExtraLib() {
 		if (lang == 'javascript') {
 			const stdLib = { content: libStdContent, filePath: 'es6.d.ts' }
@@ -609,11 +609,11 @@
 		}
 	}
 
-	updatePlaceholderVisibility(code)
+	updatePlaceholderVisibility(code ?? '')
 </script>
 
 <EditorTheme />
-{#if editor && suggestion && code.length === 0}
+{#if editor && suggestion && code?.length === 0}
 	<div
 		class="absolute top-[0.05rem] left-[2.05rem] z-10 text-sm text-[#0007] italic font-mono dark:text-[#ffffff56] text-ellipsis overflow-hidden whitespace-nowrap"
 		style={`max-width: calc(${width}px - 2.05rem)`}
diff --git a/frontend/src/lib/components/TriggerableByAI.svelte b/frontend/src/lib/components/TriggerableByAI.svelte
index 0c6e2a049b..7c5d1ae8d7 100644
--- a/frontend/src/lib/components/TriggerableByAI.svelte
+++ b/frontend/src/lib/components/TriggerableByAI.svelte
@@ -7,13 +7,13 @@
 		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
-	}>()
+	} = $props()
 
 	let isAnimating = $state(false)
 
diff --git a/frontend/src/lib/components/WorkerTagSelect.svelte b/frontend/src/lib/components/WorkerTagSelect.svelte
index 616cb6d809..86943f641a 100644
--- a/frontend/src/lib/components/WorkerTagSelect.svelte
+++ b/frontend/src/lib/components/WorkerTagSelect.svelte
@@ -10,12 +10,12 @@
 		noLabel = false,
 		nullTag = undefined,
 		disabled = false
-	} = $props<{
+	}: {
 		tag: string | undefined
 		noLabel?: boolean
 		nullTag?: string | undefined
 		disabled?: boolean
-	}>()
+	} = $props()
 
 	loadWorkerGroups()
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte b/frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte
index 315bfc323a..25422f97a8 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte
@@ -7,11 +7,11 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
-	let { id, configuration, render } = $props<{
+	let { id, configuration, render }: {
 		id: string
 		configuration: RichConfigurations
 		render: boolean
-	}>()
+	} = $props()
 
 	const { componentControl, worldStore, selectedComponent, connectingInput, mode } =
 		getContext<AppViewerContext>('AppViewerContext')
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte
index 1bf94a76a4..83b05f5fd0 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte
@@ -5,12 +5,12 @@
 	import { twMerge } from 'tailwind-merge'
 
 
-	let { items, value = $bindable(), title, tooltip } = $props<{
+	let { items, value = $bindable(), title, tooltip }: {
 		items: string[]
 		value: string[] | undefined
 		title: string
 		tooltip: string
-	}>()
+	} = $props()
 
 	let width = $state(0)
 	const inputWidth = 280
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte b/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
index 1b5f472dba..489837a2cb 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
@@ -5,10 +5,10 @@
 	import { WorkerService } from '$lib/gen'
 	import WorkerTagSelect from '$lib/components/WorkerTagSelect.svelte'
 
-	let { tag = $bindable(), nullTag = $bindable() } = $props<{
+	let { tag = $bindable(), nullTag = $bindable() }: {
 		tag: string | undefined
 		nullTag?: string | undefined
-	}>()
+	} = $props()
 
 	const { flowStore, selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 
diff --git a/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte b/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
index b42b205da7..685c9b0801 100644
--- a/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
+++ b/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
@@ -14,14 +14,14 @@
 		target = undefined,
 		topPlacement = false,
 		allowUserOptions = undefined
-	} = $props<{
+	}: {
 		items: any[]
 		value?: string[]
 		placeholder?: string
 		target?: string | HTMLElement
 		topPlacement?: boolean
 		allowUserOptions?: boolean | 'append'
-	}>()
+	} = $props()
 
 	$effect.pre(() => {
 		if (value === undefined) value = []
@@ -72,7 +72,7 @@
 				--sms-selected-bg={darkMode ? '#c7d2fe' : '#e0e7ff'}
 				--sms-selected-text-color={darkMode ? '#312e81' : '#3730a3'}
 				bind:selected={
-					() => [...value],
+					() => [...(value ?? [])],
 					(newVal) => {
 						if (!deepEqual(value, newVal)) {
 							value = newVal
diff --git a/frontend/src/lib/components/scripts/CreateActionsScript.svelte b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
index f0b864447b..3491dffe7d 100644
--- a/frontend/src/lib/components/scripts/CreateActionsScript.svelte
+++ b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
@@ -3,7 +3,7 @@
 	import Button from '../common/button/Button.svelte'
 	import { base } from '$lib/base'
 
-	let { aiId, aiDescription } = $props<{ aiId: string; aiDescription: string }>()
+	let { aiId, aiDescription }: { aiId: string; aiDescription: string } = $props()
 </script>
 
 <!-- Buttons -->
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
index 3753051eaf..28747e5e45 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
@@ -7,7 +7,7 @@
 	import { Pen } from 'lucide-svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 
-	let { open = false } = $props<{ open?: boolean }>()
+	let { open = false }: { open?: boolean } = $props()
 
 	let colorEnabled = $state(false)
 	let editingColor = $state<string | undefined>(undefined)
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
index fa79f6a824..42e9e8a12e 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
@@ -7,7 +7,7 @@
 	import { Pen } from 'lucide-svelte'
 	import { untrack } from 'svelte'
 
-	let { open = false } = $props<{ open?: boolean }>()
+	let { open = false }: { open?: boolean } = $props()
 
 	let newName = $state('')
 	let currentName = $state('')

From 47d1ef0f1ccb179e4b9c5bedbd17a0c0bc22e395 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 18 Jun 2025 18:24:54 +0200
Subject: [PATCH 11/24] fix additional python paths for windows

---
 backend/windmill-worker/src/python_executor.rs | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/backend/windmill-worker/src/python_executor.rs b/backend/windmill-worker/src/python_executor.rs
index 35815e452c..de5bedc5b1 100644
--- a/backend/windmill-worker/src/python_executor.rs
+++ b/backend/windmill-worker/src/python_executor.rs
@@ -674,7 +674,14 @@ except BaseException as e:
             //    ^^^^^^ ^
             // We also want this be priorotized, that's why we insert it to the beginning
         }
-        paths.iter().join(":")
+        #[cfg(windows)]
+        {
+            paths.iter().join(";")
+        }
+        #[cfg(not(windows))]
+        {
+            paths.iter().join(":")
+        }
     };
 
     #[cfg(windows)]

From 18d12525d25d58228e6abf40fbb940fbaa6042f6 Mon Sep 17 00:00:00 2001
From: centdix <40307056+centdix@users.noreply.github.com>
Date: Wed, 18 Jun 2025 18:29:15 +0200
Subject: [PATCH 12/24] fix typo (#5982)

---
 .github/workflows/claude.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
index a8b329cfea..6fee7718a1 100644
--- a/.github/workflows/claude.yml
+++ b/.github/workflows/claude.yml
@@ -80,5 +80,5 @@ jobs:
           - Bash(npm run check): Run the check script. You should run this tool after making changes to the frontend code.
           - Bash(npm install): Install dependencies. You need this to run npm run check.
           - Bash(npm run generate-backend-client): Generate the backend client. You need this to run npm run check.
-          - Bash(cargo check): Run the cargo check script. You should run this tool after making changes to the backend code.
+          - Bash(cargo check): Run the cargo check script. You should run this tool after making changes to the backend code."
           trigger_phrase: "/ai"

From 4326bb8dc9a5441a2fa65c3d4033d9c721700e50 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 18 Jun 2025 22:31:28 +0200
Subject: [PATCH 13/24] improve decision tree preview

---
 .../apps/components/layout/AppDecisionTree.svelte           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
index c29bb46825..f92bbde678 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
@@ -24,14 +24,14 @@
 
 	let { id, componentContainerHeight, customCss = undefined, render, nodes }: Props = $props()
 
-	let resolvedConditions = $derived(
+	let resolvedConditions = $state(
 		nodes.reduce((acc, node) => {
 			acc[node.id] = acc[node.id] || []
 			return acc
 		}, {})
 	)
 
-	let resolvedNext = $derived(
+	let resolvedNext = $state(
 		nodes.reduce((acc, node) => {
 			acc[node.id] = acc[node.id] || false
 			return acc
@@ -165,6 +165,8 @@
 	})
 </script>
 
+<!-- {JSON.stringify(resolvedConditions)}
+{JSON.stringify(resolvedNext)} -->
 {#if Object.keys(resolvedConditions).length === nodes.length}
 	{#each nodes ?? [] as node (node.id)}
 		{#each node.next ?? [] as next, conditionIndex}

From 14005fe4c1ffe290f7ace4f952078f31dde047fc Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 18 Jun 2025 22:41:05 +0200
Subject: [PATCH 14/24] nits debug

---
 .../apps/editor/DecisionTreeDebug.svelte      | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
index 6ad9713e86..bf70dafd61 100644
--- a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
+++ b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import Dropdown from '$lib/components/DropdownV2.svelte'
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher, getContext } from 'svelte'
@@ -7,18 +10,24 @@
 	import { isDebugging } from './settingsPanel/decisionTree/utils'
 	import { X, Bug } from 'lucide-svelte'
 
-	export let nodes: DecisionTreeNode[] = []
-	export let id: string
-	export let isSmall = false
-	export let componentIsDebugging = false
+	interface Props {
+		nodes?: DecisionTreeNode[]
+		id: string
+		isSmall?: boolean
+		componentIsDebugging?: boolean
+	}
 
-	$: componentIsDebugging = isDebugging($debuggingComponents, id)
+	let { nodes = [], id, isSmall = false, componentIsDebugging = $bindable(false) }: Props = $props()
+
+	$effect(() => {
+		componentIsDebugging = isDebugging($debuggingComponents, id)
+	})
 
 	const { componentControl, debuggingComponents, worldStore } =
 		getContext<AppViewerContext>('AppViewerContext')
 	const dispatch = createEventDispatcher()
 
-	let currentNodeId: string = $worldStore.outputsById[id]?.currentNodeId?.peak() ?? 'a'
+	let currentNodeId: string = $state($worldStore.outputsById[id]?.currentNodeId?.peak() ?? 'a')
 
 	function subscribeToCurrentNode(id: string) {
 		return $worldStore.outputsById[id]?.currentNodeId?.subscribe(
@@ -49,9 +58,11 @@
 		}
 	}
 
-	$: onDebugNode($debuggingComponents[id])
+	$effect(() => {
+		onDebugNode($debuggingComponents[id])
+	})
 
-	let renderCount: number = 0
+	let renderCount: number = $state(0)
 	let lastNodes: DecisionTreeNode[] = nodes
 
 	function onNodesChange(newNodes: DecisionTreeNode[]) {
@@ -67,7 +78,9 @@
 		}
 	}
 
-	$: onNodesChange(nodes)
+	$effect(() => {
+		onNodesChange(nodes)
+	})
 
 	async function getDropdownItems() {
 		return [
@@ -97,7 +110,7 @@
 
 {#key renderCount}
 	<Dropdown items={getDropdownItems} class="w-fit h-auto" usePointerDownOutside={true}>
-		<svelte:fragment slot="buttonReplacement">
+		{#snippet buttonReplacement()}
 			<button
 				title={'Debug tabs'}
 				class={classNames(
@@ -106,15 +119,15 @@
 						? ' hover:bg-red-300 hover:text-red-800'
 						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 				)}
-				on:click={() => dispatch('triggerInlineEditor')}
-				on:pointerdown|stopPropagation
+				onclick={() => dispatch('triggerInlineEditor')}
+				onpointerdown={stopPropagation(bubble('pointerdown'))}
 			>
 				{#if componentIsDebugging}
 					<div class="flex flex-row items-center gap-2">
 						{`${isSmall ? '' : 'Debugging node'} ${nodes[$debuggingComponents[id] ?? 0]?.id}`}
 						<!-- svelte-ignore node_invalid_placement_ssr -->
 						<button
-							on:click={() => {
+							onclick={() => {
 								$componentControl?.[id]?.setTab?.(0)
 
 								$debuggingComponents = Object.fromEntries(
@@ -131,6 +144,6 @@
 						>{`Debug nodes (current node: ${currentNodeId})`}</div
 					>{/if}
 			</button>
-		</svelte:fragment>
+		{/snippet}
 	</Dropdown>
 {/key}

From b1c4f8b29d0fb4cad76853110b84a87892b54661 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 18 Jun 2025 23:06:53 +0200
Subject: [PATCH 15/24] feat: devOps role can edit worker groups (#5984)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: allow devOps role to edit worker groups config

- Updated backend permission checks in configs.rs to use require_devops_role() instead of require_super_admin()
- Updated frontend UI in workers page to show worker group management for devOps users
- Updated WorkerGroup component to allow devOps role access to all configuration features
- Updated AssignableTagsInner component to allow devOps users to manage tags

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Ruben Fiszel <rubenfiszel@users.noreply.github.com>

* Update configs.rs

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Ruben Fiszel <rubenfiszel@users.noreply.github.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 backend/windmill-api/src/configs.rs           | 10 ++---
 .../lib/components/AssignableTagsInner.svelte |  8 ++--
 .../src/lib/components/WorkerGroup.svelte     | 38 +++++++++----------
 .../(root)/(logged)/workers/+page.svelte      | 19 +++++-----
 4 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/backend/windmill-api/src/configs.rs b/backend/windmill-api/src/configs.rs
index 9110d104c8..606cd11ebe 100644
--- a/backend/windmill-api/src/configs.rs
+++ b/backend/windmill-api/src/configs.rs
@@ -21,7 +21,7 @@ use windmill_common::{
     DB,
 };
 
-use crate::{db::ApiAuthed, utils::require_super_admin};
+use crate::{db::ApiAuthed, utils::{require_devops_role}};
 
 pub fn global_service() -> Router {
     Router::new()
@@ -103,7 +103,7 @@ async fn get_config(
     Path(name): Path<String>,
     Extension(db): Extension<DB>,
 ) -> error::JsonResult<Option<serde_json::Value>> {
-    require_super_admin(&db, &authed.email).await?;
+    require_devops_role(&db, &authed.email).await?;
 
     let config = sqlx::query_as!(Config, "SELECT * FROM config WHERE name = $1", name)
         .fetch_optional(&db)
@@ -119,7 +119,7 @@ async fn update_config(
     authed: ApiAuthed,
     Json(config): Json<serde_json::Value>,
 ) -> error::Result<String> {
-    require_super_admin(&db, &authed.email).await?;
+    require_devops_role(&db, &authed.email).await?;
 
     #[cfg(not(feature = "enterprise"))]
     if name.starts_with("worker__") {
@@ -157,7 +157,7 @@ async fn delete_config(
     Extension(db): Extension<DB>,
     authed: ApiAuthed,
 ) -> error::Result<String> {
-    require_super_admin(&db, &authed.email).await?;
+    require_devops_role(&db, &authed.email).await?;
 
     let mut tx = db.begin().await?;
 
@@ -232,7 +232,7 @@ async fn list_configs(
     authed: ApiAuthed,
     Extension(db): Extension<DB>,
 ) -> error::JsonResult<Vec<Config>> {
-    require_super_admin(&db, &authed.email).await?;
+    require_devops_role(&db, &authed.email).await?;
     let configs = sqlx::query_as!(Config, "SELECT name, config FROM config")
         .fetch_all(&db)
         .await?;
diff --git a/frontend/src/lib/components/AssignableTagsInner.svelte b/frontend/src/lib/components/AssignableTagsInner.svelte
index 8606bd216a..09a848c505 100644
--- a/frontend/src/lib/components/AssignableTagsInner.svelte
+++ b/frontend/src/lib/components/AssignableTagsInner.svelte
@@ -5,7 +5,7 @@
 	import { ExternalLink, Loader2, X } from 'lucide-svelte'
 	import { SettingService, WorkerService } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
-	import { superadmin } from '$lib/stores'
+	import { superadmin, devopsRole } from '$lib/stores'
 	import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte'
 	import { CUSTOM_TAGS_SETTING } from '$lib/consts'
 	import { base } from '$lib/base'
@@ -80,10 +80,10 @@
 				loadCustomTags()
 				sendUserToast('Tag added')
 			}}
-			disabled={newTag.trim() == '' || !$superadmin}
+			disabled={newTag.trim() == '' || !($superadmin || $devopsRole)}
 		>
-			Add {#if !$superadmin}
-				<span class="text-2xs text-tertiary">superadmin only</span>
+			Add {#if !($superadmin || $devopsRole)}
+				<span class="text-2xs text-tertiary">superadmin or devops only</span>
 			{/if}
 		</Button>
 		<span class="text-sm text-primary"
diff --git a/frontend/src/lib/components/WorkerGroup.svelte b/frontend/src/lib/components/WorkerGroup.svelte
index c822f9bd2c..2dd2bd08ef 100644
--- a/frontend/src/lib/components/WorkerGroup.svelte
+++ b/frontend/src/lib/components/WorkerGroup.svelte
@@ -9,7 +9,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { emptyString, pluralize } from '$lib/utils'
-	import { enterpriseLicense, superadmin } from '$lib/stores'
+	import { enterpriseLicense, superadmin, devopsRole } from '$lib/stores'
 	import Tooltip from './Tooltip.svelte'
 	import Editor from './Editor.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
@@ -155,7 +155,7 @@
 	let vcpus_memory = $derived(computeVCpuAndMemory(workers))
 	let selected = $derived(nconfig?.dedicated_worker != undefined ? 'dedicated' : 'normal')
 	$effect(() => {
-		$superadmin && listWorkspaces()
+		($superadmin || $devopsRole) && listWorkspaces()
 	})
 </script>
 
@@ -209,7 +209,7 @@
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		on:close={() => drawer?.closeDrawer()}
-		title={$superadmin ? `Edit worker config '${name}'` : `Worker config '${name}'`}
+		title={($superadmin || $devopsRole) ? `Edit worker config '${name}'` : `Worker config '${name}'`}
 	>
 		{#if !$enterpriseLicense}
 			<Alert type="warning" title="Worker management UI is EE only">
@@ -433,7 +433,7 @@
 		{:else if selected == 'dedicated'}
 			{#if nconfig?.dedicated_worker != undefined}
 				<input
-					disabled={!$superadmin}
+					disabled={!($superadmin || $devopsRole)}
 					placeholder="<workspace>:<script path>"
 					type="text"
 					onchange={() => {
@@ -442,7 +442,7 @@
 					}}
 					bind:value={nconfig.dedicated_worker}
 				/>
-				{#if $superadmin}
+				{#if $superadmin || $devopsRole}
 					<div class="py-2"
 						><Alert
 							type="info"
@@ -471,11 +471,11 @@
 						<div class="flex gap-1 items-center">
 							<input
 								type="text"
-								disabled={!$superadmin}
+								disabled={!($superadmin || $devopsRole)}
 								placeholder="/path/to/python3.X/site-packages"
 								bind:value={nconfig.additional_python_paths![i]}
 							/>
-							{#if $superadmin}
+							{#if $superadmin || $devopsRole}
 								<button
 									class="rounded-full bg-surface/60 hover:bg-gray-200"
 									aria-label="Clear"
@@ -497,7 +497,7 @@
 						</div>
 					{/each}
 				{/if}
-				{#if $superadmin}
+				{#if $superadmin || $devopsRole}
 					<div class="flex">
 						<Button
 							variant="contained"
@@ -523,12 +523,12 @@
 					{#each nconfig.pip_local_dependencies as _, i}
 						<div class="flex gap-1 items-center">
 							<input
-								disabled={!$superadmin}
+								disabled={!($superadmin || $devopsRole)}
 								type="text"
 								placeholder="httpx"
 								bind:value={nconfig.pip_local_dependencies[i]}
 							/>
-							{#if $superadmin}
+							{#if $superadmin || $devopsRole}
 								<button
 									class="rounded-full bg-surface/60 hover:bg-gray-200"
 									aria-label="Clear"
@@ -550,7 +550,7 @@
 						</div>
 					{/each}
 				{/if}
-				{#if $superadmin}
+				{#if $superadmin || $devopsRole}
 					<div class="flex">
 						<Button
 							variant="contained"
@@ -584,7 +584,7 @@
 				{#each customEnvVars as envvar, i}
 					<div class="flex gap-1 items-center">
 						<input
-							disabled={!$superadmin}
+							disabled={!($superadmin || $devopsRole)}
 							type="text"
 							placeholder="ENV_VAR_NAME"
 							bind:value={envvar.key}
@@ -593,7 +593,7 @@
 							}}
 						/>
 						<ToggleButtonGroup
-							disabled={!$superadmin}
+							disabled={!($superadmin || $devopsRole)}
 							class="w-128"
 							bind:selected={envvar.type}
 							on:selected={(e) => {
@@ -610,13 +610,13 @@
 						</ToggleButtonGroup>
 						<input
 							type="text"
-							disabled={!$superadmin || envvar.type === 'dynamic'}
+							disabled={!($superadmin || $devopsRole) || envvar.type === 'dynamic'}
 							placeholder={envvar.type === 'dynamic'
 								? 'value read from worker env var'
 								: 'static value'}
 							bind:value={envvar.value}
 						/>
-						{#if $superadmin}
+						{#if $superadmin || $devopsRole}
 							<button
 								class="rounded-full bg-surface/60 hover:bg-gray-200"
 								aria-label="Clear"
@@ -639,7 +639,7 @@
 						{/if}
 					</div>
 				{/each}
-				{#if $superadmin}
+				{#if $superadmin || $devopsRole}
 					<div class="flex">
 						<Button
 							variant="contained"
@@ -657,7 +657,7 @@
 					</div>
 				{/if}
 			</div>
-			{#if !superadmin}
+			{#if !($superadmin || $devopsRole)}
 				<div class="flex flex-wrap items-center gap-1 pt-2">
 					<Button
 						variant="contained"
@@ -745,7 +745,7 @@
 						>
 					{/if}
 					<Editor
-						disabled={!$superadmin}
+						disabled={!($superadmin || $devopsRole)}
 						class="flex flex-1 grow h-full w-full"
 						automaticLayout
 						scriptLang={'bash'}
@@ -824,7 +824,7 @@
 						}}
 						disabled={(!dirty && nconfig?.dedicated_worker == undefined) ||
 							!$enterpriseLicense ||
-							!$superadmin}
+							!($superadmin || $devopsRole)}
 					>
 						Apply changes
 					</Button>
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index 749a17755d..139ee18e9b 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -19,6 +19,7 @@
 	import {
 		enterpriseLicense,
 		superadmin,
+		devopsRole,
 		userStore,
 		workspaceStore,
 		userWorkspaces
@@ -131,7 +132,7 @@
 	loadWorkers()
 	loadWorkerGroups()
 	loadCustomTags()
-	$: $superadmin && loadDefaultTagsPerWorkspace()
+	$: ($superadmin || $devopsRole) && loadDefaultTagsPerWorkspace()
 
 	onDestroy(() => {
 		if (intervalId) {
@@ -271,7 +272,7 @@
 	}
 </script>
 
-{#if $superadmin}
+{#if $superadmin || $devopsRole}
 	<QueueMetricsDrawer bind:this={queueMetricsDrawer} />
 {/if}
 
@@ -331,7 +332,7 @@
 			tooltip="The workers are the dutiful servants that execute the jobs."
 			documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups"
 		>
-			{#if $superadmin}
+			{#if $superadmin || $devopsRole}
 				<div class="flex flex-row-reverse w-full pb-2 items-center gap-4">
 					<div>
 						<AssignableTags
@@ -392,7 +393,7 @@
 				>
 				<div></div>
 
-				{#if $superadmin}
+				{#if $superadmin || $devopsRole}
 					<div class="flex flex-row gap-4 items-center">
 						<Button
 							size="sm"
@@ -577,7 +578,7 @@
 									<Cell head>Last ping</Cell>
 									<Cell head>Worker start</Cell>
 									<Cell head>Jobs ran</Cell>
-									{#if (!config || config?.dedicated_worker == undefined) && $superadmin}
+									{#if (!config || config?.dedicated_worker == undefined) && ($superadmin || $devopsRole)}
 										<Cell head>Last job</Cell>
 										<Cell head>Occupancy rate<br />(15s/5m/30m/ever)</Cell>
 									{/if}
@@ -585,7 +586,7 @@
 									<Cell head>Limits</Cell>
 									<Cell head>Version</Cell>
 									<Cell head>Liveness</Cell>
-									{#if $superadmin}
+									{#if $superadmin || $devopsRole}
 										<Cell head>
 											Live Shell
 											<Tooltip>
@@ -604,7 +605,7 @@
 									<tr class="border-t">
 										<Cell
 											first
-											colspan={(!config || config?.dedicated_worker == undefined) && $superadmin
+											colspan={(!config || config?.dedicated_worker == undefined) && ($superadmin || $devopsRole)
 												? 12
 												: 9}
 											scope="colgroup"
@@ -655,7 +656,7 @@
 												>
 												<Cell>{displayDate(started_at)}</Cell>
 												<Cell>{jobs_executed}</Cell>
-												{#if (!config || config?.dedicated_worker == undefined) && $superadmin}
+												{#if (!config || config?.dedicated_worker == undefined) && ($superadmin || $devopsRole)}
 													<Cell>
 														{#if last_job_id}
 															<a href={`/run/${last_job_id}?workspace=${last_job_workspace_id}`}>
@@ -715,7 +716,7 @@
 															: 'Unknown'}
 													</Badge>
 												</Cell>
-												{#if $superadmin}
+												{#if $superadmin || $devopsRole}
 													<Cell>
 														<Button
 															size="xs"

From c7c2efbbe58c495a26f9a11b0da68ed881ee6007 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 18 Jun 2025 23:45:03 +0200
Subject: [PATCH 16/24] nits

---
 .github/workflows/backend-test.yml             | 2 +-
 frontend/src/lib/components/OktaSetting.svelte | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/backend-test.yml b/.github/workflows/backend-test.yml
index c7d1c50db1..1ddc3a7781 100644
--- a/.github/workflows/backend-test.yml
+++ b/.github/workflows/backend-test.yml
@@ -45,7 +45,7 @@ jobs:
       - uses: oven-sh/setup-bun@v2
         with:
           bun-version: 1.1.43
-      - uses: astral-sh/setup-uv@v6
+      - uses: astral-sh/setup-uv@v6.2.1
         with:
           version: "0.6.2"
       - uses: actions-rust-lang/setup-rust-toolchain@v1
diff --git a/frontend/src/lib/components/OktaSetting.svelte b/frontend/src/lib/components/OktaSetting.svelte
index d6ac83aee5..5a1836ec7d 100644
--- a/frontend/src/lib/components/OktaSetting.svelte
+++ b/frontend/src/lib/components/OktaSetting.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
-
 	import CollapseLink from './CollapseLink.svelte'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
@@ -34,7 +32,7 @@
 		}
 	}
 	let enabled = $derived(value != undefined)
-	run(() => {
+	$effect(() => {
 		changeDomain(value?.['domain'], value?.['custom'])
 	})
 </script>

From 2a334421e85abf046784aab57522582439ef2901 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Thu, 19 Jun 2025 00:34:44 +0200
Subject: [PATCH 17/24] fix: prevent keypress events from bubbling in decision
 tree drawer (#5993)

Fixes #5991

- Add keydown event handlers with stopPropagation() to prevent SvelteFlow
  from receiving keypress events from text inputs in decision tree config
- Applied at individual input level (summary field) and container level
  (configuration panel) to catch all input types
- Prevents accidental node deletion when typing in configuration inputs

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Ruben Fiszel <rubenfiszel@users.noreply.github.com>
---
 .../settingsPanel/DecisionTreeGraphEditor.svelte     | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
index 909ff00c74..85c420f152 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
@@ -57,7 +57,13 @@
 				</div>
 			</Pane>
 			<Pane size={40}>
-				<div class="h-full w-full bg-surface p-4 flex flex-col gap-6">
+				<div 
+					class="h-full w-full bg-surface p-4 flex flex-col gap-6"
+					on:keydown={(e) => {
+						// Prevent keyboard events from bubbling to SvelteFlow
+						e.stopPropagation()
+					}}
+				>
 					{#if selectedNode}
 						<Section label="Conditions" class="w-full flex flex-col gap-2">
 							<svelte:fragment slot="action">
@@ -92,6 +98,10 @@
 											renderCount++
 										}, 300)()
 									}}
+									on:keydown={(e) => {
+										// Prevent keyboard events from bubbling to SvelteFlow
+										e.stopPropagation()
+									}}
 								/>
 							</Label>
 

From 530a72ba83629a764d3a8b034ce9bb53e7c82b32 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Thu, 19 Jun 2025 00:58:56 +0200
Subject: [PATCH 18/24] chore(main): release 1.499.0 (#5990)

* chore(main): release 1.499.0

* Apply automatic changes

---------

Co-authored-by: rubenfiszel <275584+rubenfiszel@users.noreply.github.com>
---
 CHANGELOG.md                                  | 12 +++
 backend/Cargo.lock                            | 86 +++++++++----------
 backend/Cargo.toml                            |  4 +-
 backend/windmill-api/openapi.yaml             |  2 +-
 benchmarks/lib.ts                             |  2 +-
 cli/main.ts                                   |  2 +-
 frontend/package-lock.json                    |  4 +-
 frontend/package.json                         |  2 +-
 lsp/Pipfile                                   |  4 +-
 openflow.openapi.yaml                         |  2 +-
 .../WindmillClient/WindmillClient.psd1        |  2 +-
 python-client/wmill/pyproject.toml            |  2 +-
 python-client/wmill_pg/pyproject.toml         |  2 +-
 typescript-client/jsr.json                    |  2 +-
 typescript-client/package.json                |  2 +-
 version.txt                                   |  2 +-
 16 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a496bda1b5..d52dfb4622 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.499.0](https://github.com/windmill-labs/windmill/compare/v1.498.0...v1.499.0) (2025-06-18)
+
+
+### Features
+
+* devOps role can edit worker groups ([#5984](https://github.com/windmill-labs/windmill/issues/5984)) ([b1c4f8b](https://github.com/windmill-labs/windmill/commit/b1c4f8b29d0fb4cad76853110b84a87892b54661))
+
+
+### Bug Fixes
+
+* prevent keypress events from bubbling in decision tree drawer ([#5993](https://github.com/windmill-labs/windmill/issues/5993)) ([2a33442](https://github.com/windmill-labs/windmill/commit/2a334421e85abf046784aab57522582439ef2901))
+
 ## [1.498.0](https://github.com/windmill-labs/windmill/compare/v1.497.2...v1.498.0) (2025-06-17)
 
 
diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index 24fb8436bb..73a66bb231 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -741,9 +741,9 @@ checksum = "1505bd5d3d116872e7271a6d4e16d81d0c8570876c8de68093a09ac269d8aac0"
 
 [[package]]
 name = "autocfg"
-version = "1.4.0"
+version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ace50bade8e6234aa140d9a2f552bbee1db4d353f69b8217bc503490fc1a9f26"
+checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
 
 [[package]]
 name = "aws-config"
@@ -902,9 +902,9 @@ dependencies = [
 
 [[package]]
 name = "aws-sdk-sts"
-version = "1.74.0"
+version = "1.75.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "19d440e1d368759bd10df0dbdddbfff6473d7cd73e9d9ef2363dc9995ac2d711"
+checksum = "e3258fa707f2f585ee3049d9550954b959002abd59176975150a01d5cf38ae3f"
 dependencies = [
  "aws-credential-types",
  "aws-runtime",
@@ -2303,9 +2303,9 @@ dependencies = [
 
 [[package]]
 name = "croner"
-version = "2.1.0"
+version = "2.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38fd53511eaf0b00a185613875fee58b208dfce016577d0ad4bb548e1c4fb3ee"
+checksum = "c344b0690c1ad1c7176fe18eb173e0c927008fdaaa256e40dfd43ddd149c0843"
 dependencies = [
  "chrono",
 ]
@@ -7188,9 +7188,9 @@ dependencies = [
 
 [[package]]
 name = "libc"
-version = "0.2.173"
+version = "0.2.174"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d8cfeafaffdbc32176b64fb251369d52ea9f0a8fbc6f8759edffef7b525d64bb"
+checksum = "1171693293099992e19cddea4e8b849964e9846f4acee11b3948bcc337be8776"
 
 [[package]]
 name = "libduckdb-sys"
@@ -10410,7 +10410,7 @@ dependencies = [
 [[package]]
 name = "rmcp"
 version = "0.1.5"
-source = "git+https://github.com/modelcontextprotocol/rust-sdk#d1884fe598cd4c524ff6e0101859a60d4b4c8b8f"
+source = "git+https://github.com/modelcontextprotocol/rust-sdk#8a577659f01917289064c0a3c753392b44305ef4"
 dependencies = [
  "base64 0.22.1",
  "bytes",
@@ -10439,7 +10439,7 @@ dependencies = [
 [[package]]
 name = "rmcp-macros"
 version = "0.1.5"
-source = "git+https://github.com/modelcontextprotocol/rust-sdk#d1884fe598cd4c524ff6e0101859a60d4b4c8b8f"
+source = "git+https://github.com/modelcontextprotocol/rust-sdk#8a577659f01917289064c0a3c753392b44305ef4"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -11922,9 +11922,9 @@ dependencies = [
 
 [[package]]
 name = "sse-stream"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3f649a9f9e91db2ed32f3724516eac2bc09fab77fc33be8f670f5619b9dc6c3f"
+checksum = "eb4dc4d33c68ec1f27d386b5610a351922656e1fdf5c05bbaad930cd1519479a"
 dependencies = [
  "bytes",
  "futures-util",
@@ -14564,7 +14564,7 @@ checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
 [[package]]
 name = "windmill"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "axum",
@@ -14616,7 +14616,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "argon2",
@@ -14727,7 +14727,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api-client"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "base64 0.22.1",
  "chrono",
@@ -14742,7 +14742,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-audit"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "chrono",
  "serde",
@@ -14755,7 +14755,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-autoscaling"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "serde",
@@ -14769,7 +14769,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-common"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "async-stream",
@@ -14846,7 +14846,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-git-sync"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "regex",
  "serde",
@@ -14860,7 +14860,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-indexer"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "bytes",
@@ -14883,7 +14883,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-macros"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "itertools 0.14.0",
  "lazy_static",
@@ -14895,7 +14895,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "convert_case 0.6.0",
  "serde",
@@ -14904,7 +14904,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-bash"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "lazy_static",
@@ -14916,7 +14916,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-csharp"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "serde_json",
@@ -14928,7 +14928,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-go"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "gosyn",
@@ -14940,7 +14940,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-graphql"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "lazy_static",
@@ -14952,7 +14952,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-java"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "serde_json",
@@ -14964,7 +14964,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-nu"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "nu-parser",
@@ -14975,7 +14975,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-php"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "itertools 0.14.0",
@@ -14986,7 +14986,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-py"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "itertools 0.14.0",
@@ -14997,7 +14997,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-py-imports"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -15020,7 +15020,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-rust"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "convert_case 0.6.0",
@@ -15037,7 +15037,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-sql"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "lazy_static",
@@ -15049,7 +15049,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-ts"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "lazy_static",
@@ -15067,7 +15067,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-wasm"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "getrandom 0.2.16",
@@ -15091,7 +15091,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-yaml"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "serde_json",
@@ -15101,7 +15101,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-queue"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -15134,7 +15134,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-sql-datatype-parser-wasm"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "wasm-bindgen",
  "wasm-bindgen-test",
@@ -15144,7 +15144,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-worker"
-version = "1.498.0"
+version = "1.499.0"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -15865,18 +15865,18 @@ dependencies = [
 
 [[package]]
 name = "zerocopy"
-version = "0.8.25"
+version = "0.8.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1702d9583232ddb9174e01bb7c15a2ab8fb1bc6f227aa1233858c351a3ba0cb"
+checksum = "1039dd0d3c310cf05de012d8a39ff557cb0d23087fd44cad61df08fc31907a2f"
 dependencies = [
  "zerocopy-derive",
 ]
 
 [[package]]
 name = "zerocopy-derive"
-version = "0.8.25"
+version = "0.8.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "28a6e20d751156648aa063f3800b706ee209a32c0b4d9f24be3d980b01be55ef"
+checksum = "9ecf5b4cc5364572d7f4c329661bcc82724222973f2cab6f050a4e5c22f75181"
 dependencies = [
  "proc-macro2",
  "quote",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index 1ac013b916..506f360852 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "windmill"
-version = "1.498.0"
+version = "1.499.0"
 authors.workspace = true
 edition.workspace = true
 
@@ -32,7 +32,7 @@ members = [
 ]
 
 [workspace.package]
-version = "1.498.0"
+version = "1.499.0"
 authors = ["Ruben Fiszel <ruben@windmill.dev>"]
 edition = "2021"
 
diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index a5e693277e..6922c98379 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.498.0
+  version: 1.499.0
   title: Windmill API
 
   contact:
diff --git a/benchmarks/lib.ts b/benchmarks/lib.ts
index 45de71358f..a988908588 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.498.0";
+export const VERSION = "v1.499.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 3a505bbc18..f0ad23f8cf 100644
--- a/cli/main.ts
+++ b/cli/main.ts
@@ -63,7 +63,7 @@ export {
 //   }
 // });
 
-export const VERSION = "1.498.0";
+export const VERSION = "1.499.0";
 
 const command = new Command()
   .name("wmill")
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 02bb998500..e4b6658b41 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "windmill-components",
-	"version": "1.498.0",
+	"version": "1.499.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "windmill-components",
-			"version": "1.498.0",
+			"version": "1.499.0",
 			"hasInstallScript": true,
 			"license": "AGPL-3.0",
 			"dependencies": {
diff --git a/frontend/package.json b/frontend/package.json
index bee87418b0..9cf40edea3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.498.0",
+	"version": "1.499.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
diff --git a/lsp/Pipfile b/lsp/Pipfile
index bb3d094961..55e2072ce4 100644
--- a/lsp/Pipfile
+++ b/lsp/Pipfile
@@ -4,8 +4,8 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-wmill = ">=1.498.0"
-wmill_pg = ">=1.498.0"
+wmill = ">=1.499.0"
+wmill_pg = ">=1.499.0"
 sendgrid = "*"
 mysql-connector-python = "*"
 pymongo = "*"
diff --git a/openflow.openapi.yaml b/openflow.openapi.yaml
index a13eaee9be..a25dabb602 100644
--- a/openflow.openapi.yaml
+++ b/openflow.openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.498.0
+  version: 1.499.0
   title: OpenFlow Spec
   contact:
     name: Ruben Fiszel
diff --git a/powershell-client/WindmillClient/WindmillClient.psd1 b/powershell-client/WindmillClient/WindmillClient.psd1
index e4c28508d1..4eaafc91e3 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.498.0'
+    ModuleVersion     = '1.499.0'
 
     # Supported PSEditions
     # CompatiblePSEditions = @()
diff --git a/python-client/wmill/pyproject.toml b/python-client/wmill/pyproject.toml
index c547216c76..2248094357 100644
--- a/python-client/wmill/pyproject.toml
+++ b/python-client/wmill/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill"
-version = "1.498.0"
+version = "1.499.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 a664711828..3847adc1c1 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.498.0"
+version = "1.499.0"
 description = "An extension client for the wmill client library focused on pg"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
diff --git a/typescript-client/jsr.json b/typescript-client/jsr.json
index a8146e05ec..e5c9953a98 100644
--- a/typescript-client/jsr.json
+++ b/typescript-client/jsr.json
@@ -1,6 +1,6 @@
 {
   "name": "@windmill/windmill",
-  "version": "1.498.0",
+  "version": "1.499.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 e81d522a28..22838073f6 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.498.0",
+  "version": "1.499.0",
   "author": "Ruben Fiszel",
   "license": "Apache 2.0",
   "devDependencies": {
diff --git a/version.txt b/version.txt
index a54f0c9fdf..1c31ddf8a0 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-1.498.0
+1.499.0

From 054f2c134adf04fbae0a35efea0d1ab8665ac0e4 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 19 Jun 2025 08:07:03 +0200
Subject: [PATCH 19/24] improve decision tree builder

---
 .../components/layout/AppDecisionTree.svelte  | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
index f92bbde678..d595a7d85a 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
@@ -24,19 +24,29 @@
 
 	let { id, componentContainerHeight, customCss = undefined, render, nodes }: Props = $props()
 
-	let resolvedConditions = $state(
-		nodes.reduce((acc, node) => {
+	let resolvedConditions = $state(createResolvedConditions())
+
+	function createResolvedConditions() {
+		return nodes.reduce((acc, node) => {
 			acc[node.id] = acc[node.id] || []
 			return acc
 		}, {})
-	)
+	}
 
-	let resolvedNext = $state(
-		nodes.reduce((acc, node) => {
+	let resolvedNext = $state(createResolvedNext())
+
+	function createResolvedNext() {
+		return nodes.reduce((acc, node) => {
 			acc[node.id] = acc[node.id] || false
 			return acc
 		}, {})
-	)
+	}
+
+	$effect(() => {
+		nodes
+		resolvedConditions = untrack(() => createResolvedConditions())
+		resolvedNext = untrack(() => createResolvedNext())
+	})
 
 	let everRender = $state(render)
 	$effect.pre(() => {

From fa8d1b47db19e15fe854e01f9987c8f97cb45b44 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Thu, 19 Jun 2025 14:37:17 +0200
Subject: [PATCH 20/24] fix: new MultiSelect component (#5979)

* rename all multiselects to Legacy

* move Select

* Separate SelectDropdown

* fix click outside for select with portal

* multiselect v0

* multiselect clear btn

* move filterText logic to SelectDropdown

* ui nits

* console.log

* draggable

* Draggable multiselect

* multiselect search

* nit refacto

* autofocus multiselect input

* Replace in AppMultiSelectV2

* search icon

* app multi select nits

* arginput update multiselect

* fix autofocus scrolling up

* replace High priority tags multiselect

* autoscaling config editor multiselect replace

* fix clear btn not in border

* replace multiselect in cron input

* replace multiselect in savedinputs

* replace EventHandlerItem multiselect

* select dropdown shadow

* more multiselect migration

* hover opacity on drag

* TokensTable UI fixes + replace multiselect

* ai settings replace multiselect

* DefaultTags Multiselect replace

* prevent multiselect from opening on drag

* nit

* app multiselect css + simplify

* console log

* safeSelectItems cleanup

* Remove svelte-multiselect

* clip when wrap not allowed

* hide duplicate app components

* CSS works better  with multiselect in app editor

* allowOverflow

* allowClear

* fix custom createText messed up with search
---
 frontend/package-lock.json                    |  10 -
 frontend/package.json                         |   1 -
 frontend/src/lib/components/ArgEnum.svelte    |   2 +-
 frontend/src/lib/components/ArgInput.svelte   |  44 +-
 .../components/AutoscalingConfigEditor.svelte |  33 +-
 .../src/lib/components/ChannelSelector.svelte |   2 +-
 frontend/src/lib/components/CronInput.svelte  |  35 +-
 .../src/lib/components/DBTableEditor.svelte   |   5 +-
 .../src/lib/components/DefaultTags.svelte     |   2 +-
 .../lib/components/DefaultTagsInner.svelte    |  13 +-
 .../src/lib/components/FolderEditor.svelte    |   5 +-
 .../src/lib/components/GroupEditor.svelte     |   5 +-
 .../LightweightResourcePicker.svelte          |   2 +-
 .../src/lib/components/ResourcePicker.svelte  |   2 +-
 .../src/lib/components/SavedInputsV2.svelte   |   9 +-
 .../src/lib/components/ScriptPicker.svelte    |   2 +-
 frontend/src/lib/components/Select.svelte     | 271 ------
 .../lib/components/ServiceLogsInner.svelte    |   5 +-
 frontend/src/lib/components/ShareModal.svelte |   9 +-
 .../src/lib/components/TagsToListenTo.svelte  |  11 +-
 .../src/lib/components/TeamSelector.svelte    |   2 +-
 .../src/lib/components/WorkerGroup.svelte     |  41 +-
 frontend/src/lib/components/WorkerRepl.svelte |   2 +-
 .../src/lib/components/WorkerTagSelect.svelte |   5 +-
 .../apps/components/buttons/AppForm.svelte    |   1 -
 .../components/inputs/AppDateSelect.svelte    |  14 +-
 .../components/inputs/AppMultiSelect.svelte   |   3 -
 .../components/inputs/AppMultiSelectV2.svelte | 240 ++---
 .../apps/components/inputs/AppSelect.svelte   |   2 +-
 .../components/apps/editor/AppEditor.svelte   |   2 +-
 .../components/apps/editor/GridEditor.svelte  |   1 +
 .../apps/editor/component/components.ts       |   5 +
 .../components/apps/editor/component/sets.ts  |   4 +-
 .../componentsPanel/CssHelperPanel.svelte     |   4 +-
 .../apps/editor/componentsPanel/cssUtils.ts   |  21 +-
 .../settingsPanel/EventHandlerItem.svelte     |  16 +-
 .../inputEditor/DBTableSelect.svelte          |   2 +-
 .../auditLogs/AuditLogsFilters.svelte         |   5 +-
 .../lib/components/common/CloseButton.svelte  |   1 +
 .../common/drawer/ConditionalPortal.svelte    |  19 +-
 .../components/multiselect/MultiSelect.svelte | 828 ------------------
 .../multiselect/MultiSelectWrapper.svelte     | 130 ---
 .../src/lib/components/multiselect/types.ts   |  47 -
 .../src/lib/components/multiselect/utils.ts   |  64 --
 .../src/lib/components/runs/RunsFilter.svelte |  15 +-
 .../schema/EditableSchemaWrapper.svelte       |   5 +-
 .../search/GlobalSearchModal.svelte           |   3 +-
 .../components/select/DraggableTags.svelte    |  63 ++
 .../lib/components/select/MultiSelect.svelte  | 176 ++++
 .../src/lib/components/select/Select.svelte   | 156 ++++
 .../components/select/SelectDropdown.svelte   | 147 ++++
 .../src/lib/components/select/utils.svelte.ts |  72 ++
 .../components/settings/CreateToken.svelte    |   5 +-
 .../components/settings/TokensTable.svelte    |  14 +-
 .../gcp/GcpTriggerEditorConfigSection.svelte  |   7 +-
 .../triggers/http/OpenAPISpecGenerator.svelte |   5 +-
 .../PostgresTriggerEditorInner.svelte         |  41 +-
 .../postgres/PublicationPicker.svelte         |   5 +-
 .../triggers/postgres/RelationPicker.svelte   |  75 +-
 .../triggers/postgres/SlotPicker.svelte       |   5 +-
 .../sqs/SqsTriggerEditorConfigSection.svelte  |  28 +-
 .../workspaceSettings/AISettings.svelte       |  15 +-
 frontend/src/lib/utils.ts                     |  37 +-
 .../(root)/(logged)/workers/+page.svelte      |  26 +-
 64 files changed, 969 insertions(+), 1858 deletions(-)
 delete mode 100644 frontend/src/lib/components/Select.svelte
 delete mode 100644 frontend/src/lib/components/multiselect/MultiSelect.svelte
 delete mode 100644 frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
 delete mode 100644 frontend/src/lib/components/multiselect/types.ts
 delete mode 100644 frontend/src/lib/components/multiselect/utils.ts
 create mode 100644 frontend/src/lib/components/select/DraggableTags.svelte
 create mode 100644 frontend/src/lib/components/select/MultiSelect.svelte
 create mode 100644 frontend/src/lib/components/select/Select.svelte
 create mode 100644 frontend/src/lib/components/select/SelectDropdown.svelte
 create mode 100644 frontend/src/lib/components/select/utils.svelte.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e4b6658b41..ce57c0026d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -132,7 +132,6 @@
 				"svelte-check": "^4.0.0",
 				"svelte-floating-ui": "^1.5.8",
 				"svelte-highlight": "^7.6.0",
-				"svelte-multiselect": "^11.0.0-rc.1",
 				"svelte-popperjs": "^1.3.2",
 				"svelte-preprocess": "^6.0.0",
 				"svelte-range-slider-pips": "^2.3.1",
@@ -11862,15 +11861,6 @@
 			"resolved": "https://registry.npmjs.org/svelte-infinite-loading/-/svelte-infinite-loading-1.4.0.tgz",
 			"integrity": "sha512-Jo+f/yr/HmZQuIiiKKzAHVFXdAUWHW2RBbrcQTil8JVk1sCm/riy7KTJVzjBgQvHasrFQYKF84zvtc9/Y4lFYg=="
 		},
-		"node_modules/svelte-multiselect": {
-			"version": "11.1.0",
-			"resolved": "https://registry.npmjs.org/svelte-multiselect/-/svelte-multiselect-11.1.0.tgz",
-			"integrity": "sha512-D93t6GlOV//gU7upR59uCd755Hq6OWhqv9ddhOXBDN/mEZj5XOAYHwDjUjePUKlE+bI+jry1BlZef8Mof2Y+YA==",
-			"dev": true,
-			"peerDependencies": {
-				"svelte": "^5.8.0"
-			}
-		},
 		"node_modules/svelte-popperjs": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/svelte-popperjs/-/svelte-popperjs-1.3.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9cf40edea3..cab3c1d9a6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -57,7 +57,6 @@
 		"svelte-check": "^4.0.0",
 		"svelte-floating-ui": "^1.5.8",
 		"svelte-highlight": "^7.6.0",
-		"svelte-multiselect": "^11.0.0-rc.1",
 		"svelte-popperjs": "^1.3.2",
 		"svelte-preprocess": "^6.0.0",
 		"svelte-range-slider-pips": "^2.3.1",
diff --git a/frontend/src/lib/components/ArgEnum.svelte b/frontend/src/lib/components/ArgEnum.svelte
index b1f94d39f0..d87d34ea33 100644
--- a/frontend/src/lib/components/ArgEnum.svelte
+++ b/frontend/src/lib/components/ArgEnum.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { EnumType } from '$lib/common'
 	import { createEventDispatcher } from 'svelte'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
 
 	interface Props {
 		disabled: boolean
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 08e361eda8..7ec9aa4314 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -11,7 +11,6 @@
 	} from '$lib/utils'
 	import { DollarSign, Pipette, Plus, X, Check, Loader2 } from 'lucide-svelte'
 	import { createEventDispatcher, onMount, tick, untrack } from 'svelte'
-	import Multiselect from 'svelte-multiselect'
 	import { fade } from 'svelte/transition'
 	import { Button, SecondsInput } from './common'
 	import FieldHeader from './FieldHeader.svelte'
@@ -41,6 +40,8 @@
 	import type { Script } from '$lib/gen'
 	import type { SchemaDiff } from '$lib/components/schema/schemaUtils.svelte'
 	import type { ComponentCustomCSS } from './apps/types'
+	import MultiSelect from './select/MultiSelect.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	interface Props {
 		label?: string
@@ -631,43 +632,22 @@
 				<div class="w-full">
 					{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}
 						<div class="items-start">
-							<Multiselect
-								ulOptionsClass={'p-2 !bg-surface-secondary'}
-								outerDivClass={'dark:!border-gray-500 !border-gray-300'}
+							<MultiSelect
 								{disabled}
-								bind:selected={value}
-								onremove={(e) => {
-									if (Array.isArray(value)) value = value.filter((v) => v !== e.option)
-								}}
-								options={itemsType?.multiselect ?? []}
-								selectedOptionsDraggable={true}
-								onopen={() => {
-									dispatch('focus')
-								}}
+								bind:value
+								items={safeSelectItems(itemsType?.multiselect)}
+								onOpen={() => dispatch('focus')}
+								reorderable
 							/>
 						</div>
 					{: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'}
+							<MultiSelect
 								{disabled}
-								onremove={(e) => {
-									if (Array.isArray(value)) value = value.filter((v) => v !== e.option)
-								}}
-								bind:selected={
-									() => [...(value ?? [])],
-									(v) => {
-										if (!deepEqual(v, value)) {
-											value = v
-										}
-									}
-								}
-								options={itemsType?.enum ?? []}
-								selectedOptionsDraggable={true}
-								onopen={() => {
-									dispatch('focus')
-								}}
+								bind:value
+								items={safeSelectItems(itemsType?.enum)}
+								onOpen={() => dispatch('focus')}
+								reorderable
 							/>
 						</div>
 					{:else if itemsType?.type == 'object' && itemsType?.resourceType == 's3object'}
diff --git a/frontend/src/lib/components/AutoscalingConfigEditor.svelte b/frontend/src/lib/components/AutoscalingConfigEditor.svelte
index 9afa7a004f..ad7cd5294e 100644
--- a/frontend/src/lib/components/AutoscalingConfigEditor.svelte
+++ b/frontend/src/lib/components/AutoscalingConfigEditor.svelte
@@ -9,7 +9,8 @@
 	import { ExternalLink } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Label from './Label.svelte'
-	import MultiSelect from 'svelte-multiselect'
+	import MultiSelect from './select/MultiSelect.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	interface Props {
 		config: AutoscalingConfig | undefined
@@ -209,32 +210,14 @@
 						{#if config}
 							{#if config.custom_tags}
 								<MultiSelect
-									outerDivClass="text-secondary !bg-surface-disabled !border-0"
-									selected={config.custom_tags}
-									onchange={(e) => {
-										console.log(e.type, config?.custom_tags)
-										if (e && config?.custom_tags) {
-											if (e.type === 'add') {
-												config.custom_tags = [
-													...config.custom_tags,
-													...(e.option ? [e.option.toString()] : [])
-												]
-											} else if (e.type === 'remove') {
-												config.custom_tags = config.custom_tags.filter((t) => t !== e.option)
-												if (config?.custom_tags && config.custom_tags.length == 0) {
-													config.custom_tags = undefined
-												}
-											} else if (e.type === 'removeAll') {
-												config.custom_tags = undefined
-											} else {
-												console.error(`Priority tags multiselect - unknown event type: '${e.type}'`)
-											}
+									bind:value={
+										() => config?.custom_tags ?? [],
+										(v) => {
+											config && (config.custom_tags = v.length ? v : undefined)
 											dispatch('dirty')
 										}
-									}}
-									options={worker_tags ?? []}
-									selectedOptionsDraggable={false}
-									ulOptionsClass={'!bg-surface-secondary'}
+									}
+									items={safeSelectItems(worker_tags)}
 									placeholder="Tags"
 								/>
 							{:else}
diff --git a/frontend/src/lib/components/ChannelSelector.svelte b/frontend/src/lib/components/ChannelSelector.svelte
index 7d4a1a3d3d..30bf70e14b 100644
--- a/frontend/src/lib/components/ChannelSelector.svelte
+++ b/frontend/src/lib/components/ChannelSelector.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
 
 	interface ChannelItem {
 		channel_id?: string
diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index 16174b5d9b..210e821c4d 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -2,14 +2,14 @@
 	import { ScheduleService } from '$lib/gen'
 	import { emptyString, formatCron, sendUserToast } from '$lib/utils'
 	import Badge from './Badge.svelte'
-	// @ts-ignore
-	import Multiselect from 'svelte-multiselect'
 	import { Button } from './common'
 	import timezones from './timezones'
 	import CronBuilder from './CronBuilder.svelte'
 	import Label from './Label.svelte'
 	import CronGen from './copilot/CronGen.svelte'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
+	import MultiSelect from './select/MultiSelect.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	export let schedule: string
 	// export let offset: number = -60 * Math.floor(new Date().getTimezoneOffset() / 60)
@@ -237,7 +237,7 @@
 							<div class="text-secondary text-sm leading-none">Execute schedule every</div>
 
 							<div class="w-full flex gap-4">
-								<div class="w-full flex flex-col gap-1">
+								<div class="w-full flex flex-col gap-1 mb-2">
 									<select
 										{disabled}
 										name="execute_every"
@@ -280,26 +280,24 @@
 						<div class="w-full flex flex-col gap-4">
 							{#if executeEvery == 'month'}
 								<div class="w-full flex flex-col">
-									<Multiselect
+									<MultiSelect
+										disablePortal
 										{disabled}
-										bind:selected={monthsOfYear}
-										options={monthsOfYearOptions}
-										selectedOptionsDraggable={false}
+										bind:value={monthsOfYear}
+										items={safeSelectItems(monthsOfYearOptions)}
 										placeholder="Every month"
-										ulOptionsClass={'!bg-surface-secondary'}
 									/>
 								</div>
 							{/if}
 
 							{#if executeEvery == 'day-week'}
 								<div class="w-full flex flex-col">
-									<Multiselect
+									<MultiSelect
+										disablePortal
 										{disabled}
-										bind:selected={daysOfWeek}
-										options={daysOfWeekOptions}
-										selectedOptionsDraggable={false}
+										bind:value={daysOfWeek}
+										items={safeSelectItems(daysOfWeekOptions)}
 										placeholder="Every day"
-										ulOptionsClass={'!bg-surface-secondary'}
 									/>
 								</div>
 							{/if}
@@ -311,13 +309,12 @@
 									{/if}
 									<div class="w-full flex gap-4">
 										<div class="w-full flex">
-											<Multiselect
+											<MultiSelect
+												disablePortal
 												{disabled}
-												bind:selected={daysOfMonth}
-												options={daysOfMonthOptions}
-												selectedOptionsDraggable={false}
+												bind:value={daysOfMonth}
+												items={safeSelectItems(daysOfMonthOptions)}
 												placeholder="Every day"
-												ulOptionsClass={'!bg-surface-secondary'}
 											/>
 										</div>
 
diff --git a/frontend/src/lib/components/DBTableEditor.svelte b/frontend/src/lib/components/DBTableEditor.svelte
index bd9e108590..f6911bce21 100644
--- a/frontend/src/lib/components/DBTableEditor.svelte
+++ b/frontend/src/lib/components/DBTableEditor.svelte
@@ -71,7 +71,8 @@
 	import { getFlatTableNamesFromSchema, type DBSchema } from '$lib/stores'
 	import { twMerge } from 'tailwind-merge'
 	import DarkModeObserver from './DarkModeObserver.svelte'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	const { onConfirm, resourceType, previewSql, dbSchema, currentSchema }: DBTableEditorProps =
 		$props()
@@ -165,7 +166,7 @@
 											}
 										}
 									}
-									items={columnTypes.map((type) => ({ value: type, label: type }))}
+									items={safeSelectItems(columnTypes)}
 									class="w-48"
 								/>
 							</Cell>
diff --git a/frontend/src/lib/components/DefaultTags.svelte b/frontend/src/lib/components/DefaultTags.svelte
index 718cb1dd29..b45f41d57c 100644
--- a/frontend/src/lib/components/DefaultTags.svelte
+++ b/frontend/src/lib/components/DefaultTags.svelte
@@ -7,7 +7,7 @@
 	import DefaultTagsInner from './DefaultTagsInner.svelte'
 
 	export let defaultTagPerWorkspace: boolean | undefined = undefined
-	export let defaultTagWorkspaces: string[] | undefined = undefined
+	export let defaultTagWorkspaces: string[] = []
 
 	let placement: 'bottom-end' | 'top-end' = 'bottom-end'
 </script>
diff --git a/frontend/src/lib/components/DefaultTagsInner.svelte b/frontend/src/lib/components/DefaultTagsInner.svelte
index 5e4e824787..ab715770de 100644
--- a/frontend/src/lib/components/DefaultTagsInner.svelte
+++ b/frontend/src/lib/components/DefaultTagsInner.svelte
@@ -7,11 +7,12 @@
 	import { enterpriseLicense, superadmin } from '$lib/stores'
 	import { DEFAULT_TAGS_PER_WORKSPACE_SETTING, DEFAULT_TAGS_WORKSPACES_SETTING } from '$lib/consts'
 	import Toggle from './Toggle.svelte'
-	import MultiSelectWrapper from './multiselect/MultiSelectWrapper.svelte'
+	import MultiSelect from './select/MultiSelect.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	let defaultTags: string[] | undefined = undefined
 	export let defaultTagPerWorkspace: boolean | undefined = undefined
-	export let defaultTagWorkspaces: string[] | undefined = undefined
+	export let defaultTagWorkspaces: string[] = []
 	let limitToWorkspaces = false
 
 	let workspaces: string[] = []
@@ -62,7 +63,7 @@
 				</div>
 			{/each}
 		</div>
-		<div id="default-tags-settings" class="py-4 flex flex-col gap-2">
+		<div class="py-4 flex flex-col gap-2">
 			<Toggle
 				bind:checked={defaultTagPerWorkspace}
 				options={{ right: 'workspace specific default tags' }}
@@ -70,9 +71,9 @@
 			{#if defaultTagPerWorkspace}
 				<Toggle bind:checked={limitToWorkspaces} options={{ right: 'only for some workspaces' }} />
 				{#if limitToWorkspaces}
-					<MultiSelectWrapper
-						target="#default-tags-settings"
-						items={workspaces}
+					<MultiSelect
+						disablePortal
+						items={safeSelectItems(workspaces)}
 						bind:value={defaultTagWorkspaces}
 					/>
 				{/if}
diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte
index 5ae36a7e24..38f980f042 100644
--- a/frontend/src/lib/components/FolderEditor.svelte
+++ b/frontend/src/lib/components/FolderEditor.svelte
@@ -18,7 +18,8 @@
 	import Label from './Label.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { createEventDispatcher } from 'svelte'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	export let name: string
 	let can_write = false
@@ -197,7 +198,7 @@
 						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))}
-					<Select items={items.map((x) => ({ label: x, value: x }))} bind:value={ownerItem} />
+					<Select items={safeSelectItems(items)} bind:value={ownerItem} />
 					{#if ownerKind == 'group'}
 						<Button
 							title="View Group"
diff --git a/frontend/src/lib/components/GroupEditor.svelte b/frontend/src/lib/components/GroupEditor.svelte
index 2d7a1ce889..995d1dacbd 100644
--- a/frontend/src/lib/components/GroupEditor.svelte
+++ b/frontend/src/lib/components/GroupEditor.svelte
@@ -17,7 +17,8 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import Section from './Section.svelte'
 	import Label from './Label.svelte'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	export let name: string
 	let can_write = false
@@ -129,7 +130,7 @@
 <Section label={`Members (${members?.length ?? 0})`}>
 	{#if can_write}
 		<div class="flex items-start">
-			<Select items={usernames?.map((u) => ({ value: u, label: u }))} bind:value={username} />
+			<Select items={safeSelectItems(usernames)} bind:value={username} />
 			<Button variant="contained" color="blue" size="sm" btnClasses="!ml-4" on:click={addToGroup}>
 				Add member
 			</Button>
diff --git a/frontend/src/lib/components/LightweightResourcePicker.svelte b/frontend/src/lib/components/LightweightResourcePicker.svelte
index 50da38607b..87570466b4 100644
--- a/frontend/src/lib/components/LightweightResourcePicker.svelte
+++ b/frontend/src/lib/components/LightweightResourcePicker.svelte
@@ -8,7 +8,7 @@
 	import type { AppViewerContext } from './apps/types'
 	import { sendUserToast } from '$lib/toast'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
 
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index a07596fc34..f136fd32a6 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -10,7 +10,7 @@
 	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 Select from './select/Select.svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
 	const dispatch = createEventDispatcher()
diff --git a/frontend/src/lib/components/SavedInputsV2.svelte b/frontend/src/lib/components/SavedInputsV2.svelte
index 538f3ce05f..0fb4f89e58 100644
--- a/frontend/src/lib/components/SavedInputsV2.svelte
+++ b/frontend/src/lib/components/SavedInputsV2.svelte
@@ -10,7 +10,8 @@
 	import { ExternalLink, Search } from 'lucide-svelte'
 	import { Popover } from './meltComponents'
 	import SchemaForm from './SchemaForm.svelte'
-	import MultiSelect from './multiselect/MultiSelectWrapper.svelte'
+	import MultiSelect from './select/MultiSelect.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 	const dispatch = createEventDispatcher()
 
 	interface Props {
@@ -142,7 +143,6 @@
 							{/snippet}
 
 							{#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">
 										<div class="text-sm text-secondary">Search by args</div>
@@ -175,11 +175,10 @@
 									</div>
 									<div class="my-2">
 										<MultiSelect
-											topPlacement
-											target="#multi-select-search"
 											placeholder="arg fields to filter on"
-											items={Object.keys(schema?.properties ?? {})}
+											items={safeSelectItems(Object.keys(schema?.properties ?? {}))}
 											bind:value={searchArgsFields}
+											disablePortal
 										/>
 									</div>
 									{#key filteredSchema}
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 0bb0a9caca..c4fe27167a 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -5,7 +5,7 @@
 	import { base } from '$lib/base'
 	import { createEventDispatcher, untrack } from 'svelte'
 
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
 
 	import { getScriptByPath } from '$lib/scripts'
 	import { Button, Drawer, DrawerContent } from './common'
diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte
deleted file mode 100644
index 0afdf2cc32..0000000000
--- a/frontend/src/lib/components/Select.svelte
+++ /dev/null
@@ -1,271 +0,0 @@
-<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 4504d4e69d..b8b233bf6f 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -11,14 +11,13 @@
 	import { sendUserToast } from '$lib/toast'
 	import { onDestroy, tick, untrack } from 'svelte'
 	import { Loader2 } from 'lucide-svelte'
-	import { copyToClipboard, truncateRev } from '$lib/utils'
+	import { copyToClipboard, scroll_into_view_if_needed_polyfill, truncateRev } from '$lib/utils'
 	import LogSnippetViewer from './LogSnippetViewer.svelte'
 	import { Button, Drawer, DrawerContent } from './common'
 	import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy'
 	import AnsiUp from 'ansi_up'
-	import { scroll_into_view_if_needed_polyfill } from './multiselect/utils'
 	import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
 	import { goto } from '$lib/navigation'
 	import { page } from '$app/stores'
 
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
index eac1b0fefd..a8eeeeb9d1 100644
--- a/frontend/src/lib/components/ShareModal.svelte
+++ b/frontend/src/lib/components/ShareModal.svelte
@@ -13,7 +13,8 @@
 	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'
+	import Select from './select/Select.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -138,9 +139,9 @@
 						</div>
 						{#key ownerKind}
 							<Select
-								items={(ownerKind === 'user' ? usernames : groups)
-									.map((x) => x.toString())
-									.map((x) => ({ value: x, label: x }))}
+								items={safeSelectItems(
+									(ownerKind === 'user' ? usernames : groups).map((x) => x.toString())
+								)}
 								bind:value={owner}
 							/>
 						{/key}
diff --git a/frontend/src/lib/components/TagsToListenTo.svelte b/frontend/src/lib/components/TagsToListenTo.svelte
index 38daa68ea9..d9744a6449 100644
--- a/frontend/src/lib/components/TagsToListenTo.svelte
+++ b/frontend/src/lib/components/TagsToListenTo.svelte
@@ -4,7 +4,8 @@
 	import { superadmin } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
 	import { defaultTags, nativeTags } from './worker_group'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	const dispatch = createEventDispatcher()
 	type Props = {
@@ -51,9 +52,11 @@
 {#if $superadmin}
 	<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 }))}
+			items={safeSelectItems(
+				[...(customTags ?? []), ...createdTags, ...defaultTags, ...nativeTags].filter(
+					(x) => !worker_tags?.includes(x)
+				)
+			)}
 			{disabled}
 			bind:value={newTag}
 			onFocus={() => dispatch('focus')}
diff --git a/frontend/src/lib/components/TeamSelector.svelte b/frontend/src/lib/components/TeamSelector.svelte
index 638c30d22f..899314bb31 100644
--- a/frontend/src/lib/components/TeamSelector.svelte
+++ b/frontend/src/lib/components/TeamSelector.svelte
@@ -2,7 +2,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import { RefreshCcw } from 'lucide-svelte'
 	import { WorkspaceService } from '$lib/gen'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
 	import { onMount } from 'svelte'
 
 	interface TeamItem {
diff --git a/frontend/src/lib/components/WorkerGroup.svelte b/frontend/src/lib/components/WorkerGroup.svelte
index 2dd2bd08ef..403995db2c 100644
--- a/frontend/src/lib/components/WorkerGroup.svelte
+++ b/frontend/src/lib/components/WorkerGroup.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Copy, Plus, RefreshCcwIcon, Settings, Trash, X } from 'lucide-svelte'
 	import { Alert, Badge, Button, Drawer } from './common'
-	import Multiselect from 'svelte-multiselect'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import { ConfigService, WorkspaceService, type WorkerPing, type Workspace } from '$lib/gen'
@@ -20,7 +19,9 @@
 	import { defaultTags, nativeTags, type AutoscalingConfig } from './worker_group'
 	import AutoscalingConfigEditor from './AutoscalingConfigEditor.svelte'
 	import TagsToListenTo from './TagsToListenTo.svelte'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
+	import MultiSelect from './select/MultiSelect.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	function computeVCpuAndMemory(workers: [string, WorkerPing[]][]) {
 		let vcpus = 0
@@ -340,7 +341,7 @@
 						{#if defaultTagPerWorkspace}
 							<Select
 								bind:value={workspaceTag}
-								items={workspaces.map((w) => ({ value: w.id, label: w.id }))}
+								items={workspaces.map((w) => ({ value: w.id }))}
 								onCreateItem={(c) => (workspaceTag = c)}
 								placeholder="Workspace ID"
 							/>
@@ -358,36 +359,16 @@
 										{/if}
 									</Tooltip>
 								{/snippet}
-								<Multiselect
-									outerDivClass="text-secondary !bg-surface-disabled !border-0"
+								<MultiSelect
 									disabled={!$enterpriseLicense}
-									selected={Object.keys(nconfig?.priority_tags ?? {})}
-									onchange={(e) => {
-										if (e.type === 'add') {
-											if (nconfig.priority_tags) {
-												if (e.option && typeof e.option !== 'object') {
-													nconfig.priority_tags[e.option] = 100
-												}
-											}
+									bind:value={
+										() => new Array(...(nconfig?.priority_tags?.keys?.() ?? [])),
+										(v) => {
+											nconfig.priority_tags = new Map<string, number>(v.map((k) => [k, 100]))
 											dirty = true
-										} else if (e.type === 'remove') {
-											if (nconfig.priority_tags) {
-												if (e.option && typeof e.option !== 'object') {
-													delete nconfig.priority_tags[e.option]
-												}
-											}
-											dirty = true
-										} else if (e.type === 'removeAll') {
-											nconfig.priority_tags = new Map<string, number>()
-											dirty = true
-										} else {
-											console.error(`Priority tags multiselect - unknown event type: '${e.type}'`)
 										}
-									}}
-									options={nconfig?.worker_tags}
-									selectedOptionsDraggable={false}
-									ulOptionsClass={'!bg-surface-secondary'}
-									placeholder="High priority tags"
+									}
+									items={safeSelectItems(nconfig?.worker_tags)}
 								/>
 							</Label>
 						{/if}
diff --git a/frontend/src/lib/components/WorkerRepl.svelte b/frontend/src/lib/components/WorkerRepl.svelte
index 71dff962e4..7939e4b4d5 100644
--- a/frontend/src/lib/components/WorkerRepl.svelte
+++ b/frontend/src/lib/components/WorkerRepl.svelte
@@ -19,7 +19,7 @@
 	import Tooltip from './Tooltip.svelte'
 	import { JobService, type QueuedJob } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
 	import { emptyString } from '$lib/utils'
 
 	let container: HTMLDivElement
diff --git a/frontend/src/lib/components/WorkerTagSelect.svelte b/frontend/src/lib/components/WorkerTagSelect.svelte
index 86943f641a..e337c55631 100644
--- a/frontend/src/lib/components/WorkerTagSelect.svelte
+++ b/frontend/src/lib/components/WorkerTagSelect.svelte
@@ -3,7 +3,8 @@
 	import { WorkerService } from '$lib/gen'
 
 	import { createEventDispatcher } from 'svelte'
-	import Select from './Select.svelte'
+	import Select from './select/Select.svelte'
+	import { safeSelectItems } from './select/utils.svelte'
 
 	let {
 		tag = $bindable(),
@@ -41,7 +42,7 @@
 		class="w-full"
 		{disabled}
 		placeholder={nullTag ? `default: ${nullTag}` : 'lang default'}
-		items={items.map((value) => ({ value }))}
+		items={safeSelectItems(items)}
 		bind:value={() => tag, (value) => ((tag = value), dispatch('change', value))}
 	/>
 </div>
diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
index 3df674e5b0..70346d042e 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -101,7 +101,6 @@
 		componentStyle={$app.css?.formcomponent}
 	/>
 {/each}
-
 <RunnableWrapper
 	{recomputeIds}
 	{render}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
index bd454eb780..74b6830e9d 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
@@ -11,7 +11,8 @@
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { enUS, fr, de, pt, ja } from 'date-fns/locale'
-	import Select from '$lib/components/Select.svelte'
+	import Select from '$lib/components/select/Select.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -238,9 +239,10 @@
 							outputs.day.set(v ? Number(v) : undefined)
 						}
 					}
-					items={Array.from({ length: computeDayPerMonth(selectedMonth, selectedYear) }, (_, i) => {
-						return { label: String(i + 1), value: String(i + 1) }
-					})}
+					items={Array.from(
+						{ length: computeDayPerMonth(selectedMonth, selectedYear) },
+						(_, i) => ({ value: String(i + 1) })
+					)}
 					class={twMerge('text-clip min-w-0', css?.input?.class, 'wm-date-select')}
 					containerStyle={css?.input?.style}
 					placeholder="Pick a day"
@@ -280,9 +282,7 @@
 							outputs.year.set(selectedYear ? Number(selectedYear) : undefined)
 						}
 					}
-					items={Array.from({ length: 201 }, (_, i) => `${1900 + i}`).map((value) => ({
-						value
-					}))}
+					items={safeSelectItems(Array.from({ length: 201 }, (_, i) => `${1900 + i}`))}
 					placeholder="Pick a year"
 					class={twMerge('text-clip min-w-0', css?.input?.class, 'wm-date-select')}
 					containerStyle={css?.input?.style}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
index d586fd85f3..ac686d97cb 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -3,9 +3,6 @@
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
-	// @ts-ignore
-	import MultiSelect from 'svelte-multiselect'
-
 	export let id: string
 	export let configuration: RichConfigurations
 	export let customCss: ComponentCustomCSS<'multiselectcomponent'> | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
index 642b109464..929e4cb147 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onDestroy } from 'svelte'
+	import { getContext, onDestroy, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type {
 		AppViewerContext,
@@ -16,61 +16,50 @@
 	// @ts-ignore
 	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'
-	import MultiSelect from '$lib/components/multiselect/MultiSelect.svelte'
 	import { deepEqual } from 'fast-equals'
+	import MultiSelect from '$lib/components/select/MultiSelect.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
+	import { twMerge } from 'tailwind-merge'
 
-	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
+	interface Props {
+		id: string
+		configuration: RichConfigurations
+		customCss?: ComponentCustomCSS<'multiselectcomponentv2'> | undefined
+		render: boolean
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+	}
+
+	let {
+		id,
+		configuration,
+		customCss = undefined,
+		render,
+		verticalAlignment = undefined
+	}: Props = $props()
 
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	const [floatingRef, floatingContent] = createFloatingActions({
-		strategy: 'absolute',
-		middleware: [offset(5), flip(), shift()]
-	})
-
 	const { app, worldStore, selectedComponent, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
-	let items: (string | { value: string; label: any })[] = []
 
-	const resolvedConfig = initConfig(
-		components['multiselectcomponent'].initialData.configuration,
-		configuration
+	let items: { value: string; label?: any }[] = $state([])
+
+	const resolvedConfig = $state(
+		initConfig(components['multiselectcomponentv2'].initialData.configuration, configuration)
 	)
 
 	const outputs = initOutput($worldStore, id, {
 		result: [] as string[]
 	})
 
-	let selectedItems: (number | string | { value: string; label: any })[] | undefined = [
-		...new Set(outputs?.result.peak())
-	] as (number | string | { value: string; label: any })[]
+	let selectedItems: string[] = $state([...new Set(outputs?.result.peak())].map(convertToValue))
+	$effect(() => setResultsFromSelectedItems(selectedItems))
 
-	function setResultsFromSelectedItems() {
-		const value = [
-			...(selectedItems?.map((item) => {
-				if (typeof item == 'number') {
-					return item.toString()
-				} else if (typeof item == 'object' && item.value != undefined && item.label != undefined) {
-					return item?.value ?? `NOT_STRING`
-				} else if (typeof item == 'string') {
-					return item
-				} else if (typeof item == 'object' && item.label != undefined) {
-					return item.label
-				} else {
-					return 'NOT_STRING'
-				}
-			}) ?? [])
-		]
+	let customItems: string[] = $state([])
+
+	function setResultsFromSelectedItems(value: string[]) {
 		outputs?.result.set(value)
 		setContextValue(value)
 	}
@@ -95,82 +84,60 @@
 		}
 	}
 
-	$: resolvedConfig.items && handleItems()
-
 	function handleItems() {
 		if (Array.isArray(resolvedConfig.items)) {
-			items = resolvedConfig.items?.map((item) => {
-				if (typeof item == 'object' && item.value != undefined && item.label != undefined) {
-					return item
-				}
-				if (typeof item == 'number') {
-					return item.toString()
-				}
-				return typeof item === 'string' ? item : `NOT_STRING`
-			})
+			items = resolvedConfig.items?.map(convertToItem)
 		}
 	}
 
-	$: resolvedConfig.defaultItems && setSelectedItemsFromValues(resolvedConfig.defaultItems)
+	function convertToItem(v: any) {
+		if (typeof v == 'object' && v.value != undefined && v.label != undefined) {
+			return v as { value: any; label?: string }
+		}
+		if (typeof v == 'number') return { value: v.toString() }
+		return { value: typeof v === 'string' ? v : `NOT_STRING` }
+	}
+	function convertToValue(item: any): string {
+		if (typeof item == 'object' && item.value != undefined) return item.value
+		if (typeof item == 'number') return item.toString()
+		if (typeof item == 'string') return item
+		return item?.toString?.() ?? 'NOT_STRING'
+	}
 
 	function setSelectedItemsFromValues(values: any[]) {
 		if (Array.isArray(values)) {
 			const nvalue = values
 				.map((value) => {
+					const x = items.find((item) => {
+						if (typeof item == 'object' && item.value != undefined && item.label != undefined) {
+							return deepEqual(item.value, value)
+						}
+						return item == value
+					})
 					return (
-						items.find((item) => {
-							if (typeof item == 'object' && item.value != undefined && item.label != undefined) {
-								return deepEqual(item.value, value)
-							}
-							return item == value
-						}) ??
+						(typeof x === 'object' ? x.value : x) ??
 						(typeof value == 'string' ? value : undefined) ??
 						(typeof value == 'number' ? value.toString() : undefined)
 					)
 				})
 				.filter((item) => item != undefined)
 			selectedItems = [...new Set(nvalue)]
-			setResultsFromSelectedItems()
+			setResultsFromSelectedItems(selectedItems)
 		}
 	}
 
-	let css = initCss($app.css?.multiselectcomponent, customCss)
+	let css = $state(initCss($app.css?.multiselectcomponentv2, 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: boolean = false
+	$effect(() => {
+		resolvedConfig.items && untrack(() => handleItems())
+	})
+	$effect(() => {
+		;[resolvedConfig.defaultItems]
+		untrack(() => setSelectedItemsFromValues(resolvedConfig.defaultItems))
+	})
 </script>
 
-{#each Object.keys(components['multiselectcomponent'].initialData.configuration) as key (key)}
+{#each Object.keys(components['multiselectcomponentv2'].initialData.configuration) as key (key)}
 	<ResolveConfig
 		{id}
 		{key}
@@ -185,7 +152,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.multiselectcomponent}
+		componentStyle={$app.css?.multiselectcomponentv2}
 	/>
 {/each}
 
@@ -193,74 +160,33 @@
 
 <AlignWrapper {render} hFull {verticalAlignment}>
 	<div
-		class="w-full app-editor-input"
-		on:pointerdown={(e) => {
+		class={twMerge('w-full', resolvedConfig.allowOverflow ? '' : 'absolute inset-0')}
+		onpointerdown={(e) => {
 			$selectedComponent = [id]
-
-			if (!e.shiftKey) {
-				e.stopPropagation()
-			}
+			if (!e.shiftKey) e.stopPropagation()
 			selectedComponent.set([id])
 		}}
-		use:floatingRef
-		bind:clientWidth={w}
 	>
-		{#if !selectedItems || Array.isArray(selectedItems)}
-			<MultiSelect
-				bind:outerDiv
-				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
-				ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
-				--sms-border={'none'}
-				--sms-min-height={'32px'}
-				--sms-focus-border={'none'}
-				bind:selected={selectedItems}
-				options={items}
-				placeholder={resolvedConfig.placeholder}
-				allowUserOptions={resolvedConfig.create}
-				on:change={(event) => {
-					if (event?.detail?.type === 'removeAll') {
-						outputs?.result.set([])
-						setContextValue([])
-					} else {
-						setResultsFromSelectedItems()
+		<MultiSelect
+			style={css.multiselect?.style}
+			class={twMerge(
+				'multiselect',
+				resolvedConfig.allowOverflow ? '' : 'max-h-full overflow-y-scroll'
+			)}
+			selectedUlClass="selected"
+			items={safeSelectItems([...items, ...customItems])}
+			placeholder={resolvedConfig.placeholder}
+			bind:value={selectedItems}
+			disabled={resolvedConfig.disabled}
+			onCreateItem={resolvedConfig.create
+				? (item) => {
+						customItems.push(item)
+						selectedItems.push(item)
+						customItems = customItems
+						selectedItems = selectedItems
 					}
-				}}
-				on:open={() => {
-					$selectedComponent = [id]
-					open = true
-				}}
-				on:close={() => {
-					open = false
-				}}
-				let: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)
-					}}
-				>
-					{typeof option == 'object' ? (option?.label ?? 'NO_LABEL') : option}
-				</div>
-			</MultiSelect>
-			<Portal name="app-multiselect-v2">
-				<div use:floatingContent class="z5000" hidden={!open}>
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div
-						bind:this={portalRef}
-						class="multiselect"
-						style={`min-width: ${w}px;`}
-						on:click|stopPropagation
-					></div>
-				</div>
-			</Portal>
-		{:else}
-			Value {selectedItems} is not an array
-		{/if}
+				: undefined}
+			onOpen={() => ($selectedComponent = [id])}
+		/>
 	</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 5c9fff9c35..4e7d7dc8fc 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -19,7 +19,7 @@
 	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'
+	import Select from '$lib/components/select/Select.svelte'
 
 	interface Props {
 		id: string
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index d7555b8460..75db79da69 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -1256,7 +1256,7 @@
 													<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
+														Select a component to see the settings for it
 													</div>
 												{/if}
 											</TabContent>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 01a725683b..faa5a321e8 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -127,6 +127,7 @@
 	}
 </script>
 
+<input />
 <div class="w-full z-[1000] overflow-visible h-full">
 	<div class={$app.hideLegacyTopBar ? 'hidden' : ''}>
 		<div
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 27d0bfc3bf..a5775fc09d 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -2354,6 +2354,11 @@ This is a paragraph.
 
 					tooltip:
 						'If too many items, the box overflow its container instead of having an internal scroll'
+				},
+				disabled: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean'
 				}
 			}
 		}
diff --git a/frontend/src/lib/components/apps/editor/component/sets.ts b/frontend/src/lib/components/apps/editor/component/sets.ts
index 370e2703b2..c67beee550 100644
--- a/frontend/src/lib/components/apps/editor/component/sets.ts
+++ b/frontend/src/lib/components/apps/editor/component/sets.ts
@@ -110,5 +110,7 @@ export const COMPONENT_SETS = [layout, tabs, buttons, inputs, tables, display, c
 
 export const DEPRECATED_COMPONENTS = {
 	tablecomponent:
-		'We will be removing this component in the future. we recommend using the AgGrid table instead.'
+		'We will be removing this component in the future. we recommend using the AgGrid table instead.',
+	chartjscomponent: 'Use the new ChartJS v2 component instead',
+	multiselectcomponent: 'Use the new MultiSelect v2 component instead'
 }
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
index e4add0f6ef..64f361780d 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
@@ -4,7 +4,7 @@
 	import { Badge, Button, ClearableInput, Tab, TabContent, Tabs } from '../../../common'
 	import type { AppViewerContext } from '../../types'
 	import ListItem from './ListItem.svelte'
-	import { ccomponents, components } from '../component'
+	import { ccomponents, components, DEPRECATED_COMPONENTS } from '../component'
 	import { customisationByComponent } from './cssUtils'
 	import DataTable from '$lib/components/table/DataTable.svelte'
 	import Head from '$lib/components/table/Head.svelte'
@@ -60,7 +60,7 @@
 			ids: ['q'].map((id) => ({ id, forceStyle: true, forceClass: true }))
 		},
 		...Object.entries(ccomponents)
-			.filter(([key]) => key !== 'quillcomponent')
+			.filter(([key]) => !['quillcomponent', ...Object.keys(DEPRECATED_COMPONENTS)].includes(key))
 			.map(([type, { name, icon, customCss }]) => ({
 				type: type as keyof typeof components,
 				name,
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/cssUtils.ts b/frontend/src/lib/components/apps/editor/componentsPanel/cssUtils.ts
index 4634959ac0..8545d0627c 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/cssUtils.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/cssUtils.ts
@@ -676,8 +676,8 @@ export const customisationByComponent: Customisation[] = [
 				comment: 'buttons to remove a single or all selected options at once'
 			},
 			{
-				selector: '.multiselect > input[autocomplete]',
-				comment: 'input inside the top-level wrapper div'
+				selector: '.multiselect.dropdown',
+				comment: 'dropdown container'
 			},
 			{
 				selector: '.multiselect > ul.options',
@@ -686,23 +686,6 @@ export const customisationByComponent: Customisation[] = [
 			{
 				selector: '.multiselect > ul.options > li',
 				comment: 'dropdown list items'
-			},
-			{
-				selector: '.multiselect > ul.options > li.selected',
-				comment: 'selected options in the dropdown list'
-			},
-			{
-				selector: '.multiselect > ul.options > li:not(.selected):hover',
-				comment: 'unselected but hovered options in the dropdown list'
-			},
-			{
-				selector: '.multiselect > ul.options > li.active',
-				comment:
-					'active item, navigated to with up/down arrow keys and ready to be selected by pressing enter'
-			},
-			{
-				selector: '.multiselect > ul.options > li.disabled',
-				comment: 'options with disabled key set to true'
 			}
 		],
 		variables: [
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte
index 83b05f5fd0..37697dec9d 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
 	import Tooltip from '$lib/components/Tooltip.svelte'
 
-	import MultiSelect from '$lib/components/multiselect/MultiSelectWrapper.svelte'
+	import MultiSelect from '$lib/components/select/MultiSelect.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-
-	let { items, value = $bindable(), title, tooltip }: {
+	let {
+		items,
+		value = $bindable(),
+		title,
+		tooltip
+	}: {
 		items: string[]
 		value: string[] | undefined
 		title: string
@@ -34,7 +39,10 @@
 				No components to recompute.
 			</div>
 		{:else}
-			<MultiSelect {items} bind:value />
+			<MultiSelect
+				items={safeSelectItems(items)}
+				bind:value={() => value ?? [], (v) => (value = v?.length ? v : undefined)}
+			/>
 		{/if}
 	</div>
 </div>
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 25c4baea3f..0094196ae2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/DBTableSelect.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { StaticInput, StaticOptions } from '../../../inputType'
-	import Select from '$lib/components/Select.svelte'
+	import Select from '$lib/components/select/Select.svelte'
 
 	interface Props {
 		componentInput: StaticInput<any> | undefined
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index cc5fc7aafc..ff0198ccf7 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
@@ -34,8 +34,9 @@
 	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 Select from '../select/Select.svelte'
 	import { usePromise } from '$lib/svelte5Utils.svelte'
+	import { safeSelectItems } from '../select/utils.svelte'
 
 	let usernames: string[] | undefined = $state()
 	let resources = usePromise(() => loadResources($workspaceStore!), { loadInit: false })
@@ -397,7 +398,7 @@
 			onCreateItem={(r) => (resources.value?.push(r), (resource = r))}
 			createText="Press enter to use this value"
 			bind:value={resource}
-			items={['all', ...(resources.value ?? [])].map((r) => ({ value: r, label: r }))}
+			items={safeSelectItems(['all', ...(resources.value ?? [])])}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
 		/>
diff --git a/frontend/src/lib/components/common/CloseButton.svelte b/frontend/src/lib/components/common/CloseButton.svelte
index 8c79c12741..6cc45a3ad7 100644
--- a/frontend/src/lib/components/common/CloseButton.svelte
+++ b/frontend/src/lib/components/common/CloseButton.svelte
@@ -18,6 +18,7 @@
 
 <Button
 	on:click={() => dispatch('close')}
+	on:pointerdown={(e) => e.stopPropagation()}
 	startIcon={{ icon: Icon ?? X }}
 	iconOnly
 	size="sm"
diff --git a/frontend/src/lib/components/common/drawer/ConditionalPortal.svelte b/frontend/src/lib/components/common/drawer/ConditionalPortal.svelte
index 50cb2f2d8b..890f3d3468 100644
--- a/frontend/src/lib/components/common/drawer/ConditionalPortal.svelte
+++ b/frontend/src/lib/components/common/drawer/ConditionalPortal.svelte
@@ -1,12 +1,23 @@
 <script lang="ts">
 	import Portal from '$lib/components/Portal.svelte'
 
-	export let condition = false
-	export let target: string | HTMLElement | undefined = undefined
+	interface Props {
+		condition?: boolean
+		target?: string | HTMLElement | undefined
+		name?: string
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		condition = false,
+		target = undefined,
+		name = 'conditional-portal',
+		children
+	}: Props = $props()
 </script>
 
 {#if condition}
-	<Portal name="conditional-portal" {target}><slot /></Portal>
+	<Portal {name} {target}>{@render children?.()}</Portal>
 {:else}
-	<slot />
+	{@render children?.()}
 {/if}
diff --git a/frontend/src/lib/components/multiselect/MultiSelect.svelte b/frontend/src/lib/components/multiselect/MultiSelect.svelte
deleted file mode 100644
index 1e4f00c66d..0000000000
--- a/frontend/src/lib/components/multiselect/MultiSelect.svelte
+++ /dev/null
@@ -1,828 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, tick } from 'svelte'
-	import { flip } from 'svelte/animate'
-	import VirtualList from 'svelte-tiny-virtual-list'
-	import { twMerge } from 'tailwind-merge'
-	import type { DispatchEvents, MultiSelectEvents, Option as T } from './types'
-	import { get_label, get_style, scroll_into_view_if_needed_polyfill } from './utils'
-	import { ChevronsUpDown, X } from 'lucide-svelte'
-	import type { FullAutoFill } from 'svelte/elements'
-
-	type Option = $$Generic<T>
-
-	export let activeIndex: number | null = null
-	export let activeOption: Option | null = null
-	export let createOptionMsg: string | null = `Create this option...`
-	export let allowUserOptions: boolean | 'append' = false
-	export let autocomplete: FullAutoFill = `off`
-	export let autoScroll: boolean = true
-	export let breakpoint: number = 800 // any screen with more horizontal pixels is considered desktop, below is mobile
-	export let defaultDisabledTitle: string = `This option is disabled`
-	export let disabled: boolean = false
-	export let disabledInputTitle: string = `This input is disabled`
-	// prettier-ignore
-	export let duplicateOptionMsg: string = `This option is already selected`
-	export let duplicates: boolean = false // whether to allow duplicate options
-	// takes two options and returns true if they are equal
-	// case-insensitive equality comparison after string coercion and looks only at the `label` key of object options by default
-	export let key: (opt: T) => unknown = (opt) => `${get_label(opt)}`.toLowerCase()
-	export let filterFunc = (opt: Option, searchText: string): boolean => {
-		if (!searchText) return true
-		return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase())
-	}
-	export let closeDropdownOnSelect: boolean | 'desktop' = `desktop`
-	export let form_input: HTMLInputElement | null = null
-	export let highlightMatches: boolean = true
-	export let id: string | null = null
-	export let input: HTMLInputElement | null = null
-	export let inputClass: string = ``
-	export let inputStyle: string | null = null
-	export let inputmode:
-		| 'search'
-		| 'text'
-		| 'none'
-		| 'tel'
-		| 'url'
-		| 'email'
-		| 'numeric'
-		| 'decimal'
-		| null
-		| undefined = null
-	export let invalid: boolean = false
-	export let liSelectedClass: string = ``
-	export let liSelectedStyle: string | null = null
-	export let loading: boolean = false
-	export let matchingOptions: Option[] = []
-	export let maxSelect: number | null = null // null means there is no upper limit for selected.length
-	export let name: string | null = null
-	export let noMatchingOptionsMsg: string = `No matching options`
-	export let open: boolean = false
-	export let options: Option[]
-	export let outerDiv: HTMLDivElement | null = null
-	export let outerDivClass: string = ``
-	export let parseLabelsAsHtml: boolean = false // should not be combined with allowUserOptions!
-	export let pattern: string | null = null
-	export let placeholder: string | null = null
-	export let removeAllTitle: string = `Remove all`
-	export let removeBtnTitle: string = `Remove`
-	export let minSelect: number | null = null // null means there is no lower limit for selected.length
-	export let required: boolean = false
-	export let resetFilterOnAdd: boolean = true
-	export let searchText: string = ``
-	export let selected: Option[] =
-		options
-			?.filter((opt: any) => opt instanceof Object && opt?.preselected)
-			.slice(0, maxSelect ?? undefined) ?? [] // don't allow more than maxSelect preselected options
-	export let sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
-	export let selectedOptionsDraggable: boolean = !sortSelected
-	export let style: string | null = null
-	export let ulSelectedClass: string = ``
-	export let ulSelectedStyle: string | null = null
-	export let value: Option | Option[] | null = null
-	export let disableRemoveAll: boolean = false
-
-	const selected_to_value = (selected: Option[]) => {
-		value = maxSelect === 1 ? (selected[0] ?? null) : selected
-	}
-	const value_to_selected = (value: Option | Option[] | null) => {
-		if (maxSelect === 1) selected = value ? [value as Option] : []
-		else selected = (value as Option[]) ?? []
-	}
-
-	// if maxSelect=1, value is the single item in selected (or null if selected is empty)
-	// this solves both https://github.com/janosh/svelte-multiselect/issues/86 and
-	// https://github.com/janosh/svelte-multiselect/issues/136
-	$: selected_to_value(selected)
-	$: value_to_selected(value)
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	type $$Events = MultiSelectEvents // for type-safe event listening on this component
-
-	const dispatch = createEventDispatcher<DispatchEvents<Option>>()
-	let option_msg_is_active: boolean = false // controls active state of <li>{createOptionMsg}</li>
-	let window_width: number
-
-	// options matching the current search text
-	$: matchingOptions = options?.filter(
-		(opt) =>
-			filterFunc(opt, searchText) &&
-			// remove already selected options from dropdown list unless duplicate selections are allowed
-			(!selected.map(key).includes(key(opt)) || duplicates)
-	)
-
-	// raise if matchingOptions[activeIndex] does not yield a value
-	if (activeIndex !== null && !matchingOptions[activeIndex]) {
-		throw `Run time error, activeIndex=${activeIndex} is out of bounds, matchingOptions.length=${matchingOptions.length}`
-	}
-	// update activeOption when activeIndex changes
-	$: activeOption = matchingOptions?.[activeIndex ?? -1] ?? null
-
-	// add an option to selected list
-	function add(option: T, event: Event) {
-		if (maxSelect && maxSelect > 1 && selected.length >= maxSelect) {
-			return
-		}
-		if (!isNaN(Number(option)) && typeof selected.map(get_label)[0] === `number`) {
-			option = Number(option) as Option // convert to number if possible
-		}
-		const is_duplicate = selected.map(key).includes(key(option))
-
-		if (
-			(maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
-			(duplicates || !is_duplicate)
-		) {
-			if (
-				// @ts-ignore
-				!options.includes(option) && // first check if we find option in the options list
-				// this has the side-effect of not allowing to user to add the same
-				// custom option twice in append mode
-				[true, `append`].includes(allowUserOptions) &&
-				searchText.length > 0
-			) {
-				// user entered text but no options match, so if allowUserOptions = true | 'append', we create
-				// a new option from the user-entered text
-				if (typeof options[0] === `object`) {
-					// if 1st option is an object, we create new option as object to keep type homogeneity
-					option = { label: searchText } as Option
-				} else {
-					if ([`number`, `undefined`].includes(typeof options[0]) && !isNaN(Number(searchText))) {
-						// create new option as number if it parses to a number and 1st option is also number or missing
-						option = Number(searchText) as Option
-					} else {
-						option = searchText as Option // else create custom option as string
-					}
-					// @ts-ignore
-					dispatch(`create`, { option })
-				}
-				// @ts-ignore
-				if (allowUserOptions === `append`) options = [...options, option]
-			}
-
-			if (resetFilterOnAdd) searchText = `` // reset search string on selection
-			if ([``, undefined, null].includes(option as string | null)) {
-				console.error(`MultiSelect: encountered falsy option ${option}`)
-				return
-			}
-			if (maxSelect === 1) {
-				// for maxSelect = 1 we always replace current option with new one
-				// @ts-ignore
-
-				selected = [option]
-			} else {
-				// @ts-ignore
-
-				selected = [...selected, option]
-				if (sortSelected === true) {
-					selected = selected.sort((op1: Option, op2: Option) => {
-						const [label1, label2] = [get_label(op1), get_label(op2)]
-						// coerce to string if labels are numbers
-						return `${label1}`.localeCompare(`${label2}`)
-					})
-				} else if (typeof sortSelected === `function`) {
-					selected = selected.sort(sortSelected)
-				}
-			}
-
-			const reached_max_select = selected.length === maxSelect
-
-			const dropdown_should_close =
-				closeDropdownOnSelect === true ||
-				(closeDropdownOnSelect === `desktop` && window_width < breakpoint)
-
-			if (reached_max_select || dropdown_should_close) {
-				close_dropdown(event)
-			} else if (!dropdown_should_close) {
-				input?.focus()
-			}
-			// @ts-ignore
-
-			dispatch(`add`, { option })
-			// @ts-ignore
-
-			dispatch(`change`, { option, type: `add` })
-
-			invalid = false // reset error status whenever new items are selected
-			form_input?.setCustomValidity(``)
-		}
-	}
-	// remove an option from selected list
-	function remove(to_remove: T) {
-		if (selected.length === 0) return
-
-		const idx = selected.findIndex((opt) => key(opt) === key(to_remove))
-
-		let [option] = selected.splice(idx, 1) // remove option from selected list
-
-		if (option === undefined && allowUserOptions) {
-			// if option with label could not be found but allowUserOptions is truthy,
-			// assume it was created by user and create corresponding option object
-			// on the fly for use as event payload
-			const other_ops_type = typeof options[0]
-			option = (other_ops_type ? { label: to_remove } : to_remove) as Option
-		}
-		if (option === undefined) {
-			return console.error(
-				`Multiselect can't remove selected option ${JSON.stringify(
-					to_remove
-				)}, not found in selected list`
-			)
-		}
-
-		selected = [...selected] // trigger Svelte rerender
-
-		invalid = false // reset error status whenever items are removed
-		form_input?.setCustomValidity(``)
-		dispatch(`remove`, { option })
-		dispatch(`change`, { option, type: `remove` })
-	}
-
-	function open_dropdown(event: Event) {
-		if (disabled) return
-		open = true
-		if (!(event instanceof FocusEvent)) {
-			// avoid double-focussing input when event that opened dropdown was already input FocusEvent
-			input?.focus()
-		}
-		dispatch(`open`, { event })
-	}
-
-	function close_dropdown(event: Event) {
-		open = false
-		input?.blur()
-		activeIndex = null
-		dispatch(`close`, { event })
-	}
-
-	// handle all keyboard events this component receives
-	async function handle_keydown(event: KeyboardEvent) {
-		// on escape or tab out of input: close options dropdown and reset search text
-		if (event.key === `Escape` || event.key === `Tab`) {
-			close_dropdown(event)
-			searchText = ``
-		}
-		// on enter key: toggle active option and reset search text
-		else if (event.key === `Enter`) {
-			event.preventDefault() // prevent enter key from triggering form submission
-
-			if (activeOption) {
-				selected.includes(activeOption) ? remove(activeOption) : add(activeOption, event)
-				searchText = ``
-			} else if (allowUserOptions && searchText.length > 0) {
-				// user entered text but no options match, so if allowUserOptions is truthy, we create new option
-				add(searchText, event)
-			}
-			// no active option and no search text means the options dropdown is closed
-			// in which case enter means open it
-			else open_dropdown(event)
-		}
-		// on up/down arrow keys: update active option
-		else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
-			// if no option is active yet, but there are matching options, make first one active
-			if (activeIndex === null && matchingOptions.length > 0) {
-				activeIndex = 0
-				return
-			} else if (allowUserOptions && !matchingOptions.length && searchText.length > 0) {
-				// if allowUserOptions is truthy and user entered text but no options match, we make
-				// <li>{addUserMsg}</li> active on keydown (or toggle it if already active)
-				option_msg_is_active = !option_msg_is_active
-				return
-			} else if (activeIndex === null) {
-				// if no option is active and no options are matching, do nothing
-				return
-			}
-			event.preventDefault()
-			// if none of the above special cases apply, we make next/prev option
-			// active with wrap around at both ends
-			const increment = event.key === `ArrowUp` ? -1 : 1
-
-			activeIndex = (activeIndex + increment) % matchingOptions.length
-			// in JS % behaves like remainder operator, not real modulo, so negative numbers stay negative
-			// need to do manual wrap around at 0
-			if (activeIndex < 0) activeIndex = matchingOptions.length - 1
-
-			if (autoScroll) {
-				await tick()
-				const li = document.querySelector(`ul.options > li.active`)
-				if (li) scroll_into_view_if_needed_polyfill(li)
-			}
-		}
-		// on backspace key: remove last selected option
-		else if (event.key === `Backspace` && selected.length > 0 && !searchText) {
-			remove(selected.at(-1) as Option)
-		}
-		// make first matching option active on any keypress (if none of the above special cases match)
-		else if (matchingOptions.length > 0) {
-			activeIndex = 0
-		}
-	}
-
-	function remove_all() {
-		dispatch(`removeAll`, { options: selected })
-		dispatch(`change`, { options: selected, type: `removeAll` })
-		selected = []
-		searchText = ``
-	}
-
-	$: is_selected = (label: string | number) => selected.map(get_label).includes(label)
-
-	const if_enter_or_space = (handler: () => void) => (event: KeyboardEvent) => {
-		if ([`Enter`, `Space`].includes(event.code)) {
-			event.preventDefault()
-			handler()
-		}
-	}
-
-	function on_click_outside(event: MouseEvent | TouchEvent) {
-		if (outerDiv && !outerDiv.contains(event.target as Node)) {
-			close_dropdown(event)
-		}
-	}
-
-	let drag_idx: number | null = null
-	// event handlers enable dragging to reorder selected options
-	const drop = (target_idx: number) => (event: DragEvent) => {
-		if (!event.dataTransfer) return
-		event.dataTransfer.dropEffect = `move`
-		const start_idx = parseInt(event.dataTransfer.getData(`text/plain`))
-		const new_selected = [...selected]
-
-		if (start_idx < target_idx) {
-			new_selected.splice(target_idx + 1, 0, new_selected[start_idx])
-			new_selected.splice(start_idx, 1)
-		} else {
-			new_selected.splice(target_idx, 0, new_selected[start_idx])
-			new_selected.splice(start_idx + 1, 1)
-		}
-		selected = new_selected
-		drag_idx = null
-	}
-
-	const dragstart = (idx: number) => (event: DragEvent) => {
-		if (!event.dataTransfer) return
-		// only allow moving, not copying (also affects the cursor during drag)
-		event.dataTransfer.effectAllowed = `move`
-		event.dataTransfer.dropEffect = `move`
-		event.dataTransfer.setData(`text/plain`, `${idx}`)
-	}
-
-	let ul_options: HTMLUListElement
-	// highlight text matching user-entered search text in available options
-	function highlight_matching_options(
-		event: Event & {
-			currentTarget: EventTarget & HTMLInputElement
-		}
-	) {
-		// @ts-ignore
-		if (!highlightMatches || !ul_options || typeof CSS == `undefined` || !CSS.highlights) return // abort if CSS highlight API not supported
-
-		// clear previous ranges from HighlightRegistry
-		// @ts-ignore
-		CSS.highlights.clear()
-
-		// get input's search query
-		const query = (event?.target as HTMLInputElement)?.value.trim().toLowerCase()
-		if (!query) return
-
-		const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT, {
-			acceptNode: (node) => {
-				// don't highlight text in the "no matching options" message
-				if (node?.textContent === noMatchingOptionsMsg) return NodeFilter.FILTER_REJECT
-				return NodeFilter.FILTER_ACCEPT
-			}
-		})
-		const text_nodes: Node[] = []
-		let current_node = tree_walker.nextNode()
-		while (current_node) {
-			text_nodes.push(current_node)
-			current_node = tree_walker.nextNode()
-		}
-
-		// iterate over all text nodes and find matches
-		const ranges = text_nodes.map((el) => {
-			const text = el.textContent?.toLowerCase()
-			const indices: number[] = []
-			let start_pos = 0
-			while (text && start_pos < text.length) {
-				const index = text.indexOf(query, start_pos)
-				if (index === -1) break
-				indices.push(index)
-				start_pos = index + query.length
-			}
-
-			// create range object for each str found in the text node
-			return indices.map((index) => {
-				const range = new Range()
-				range.setStart(el, index)
-				range.setEnd(el, index + query.length)
-				return range
-			})
-		})
-
-		// create Highlight object from ranges and add to registry
-		// @ts-ignore
-		CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat()))
-	}
-
-	// reset form validation when required prop changes
-	// https://github.com/janosh/svelte-multiselect/issues/285
-	$: required, form_input?.setCustomValidity(``)
-</script>
-
-<svelte:window
-	on:click={on_click_outside}
-	on:touchstart={on_click_outside}
-	bind:innerWidth={window_width}
-/>
-
-<div
-	bind:this={outerDiv}
-	class:disabled
-	class:single={maxSelect === 1}
-	class:open
-	class:invalid
-	class="multiselect {outerDivClass}"
-	on:mouseup|stopPropagation={open_dropdown}
-	title={disabled ? disabledInputTitle : null}
-	data-id={id}
-	role="searchbox"
-	tabindex="-1"
-	{style}
->
-	<!-- form control input invisible to the user, only purpose is to abort form submission if this component fails data validation -->
-	<!-- bind:value={selected} prevents form submission if required prop is true and no options are selected -->
-	<input
-		{name}
-		{required}
-		value={selected.length >= Number(required) ? JSON.stringify(selected) : null}
-		tabindex="-1"
-		aria-hidden="true"
-		aria-label="ignore this, used only to prevent form submission if select is required but empty"
-		class="form-control"
-		bind:this={form_input}
-		on:invalid={() => {
-			invalid = true
-			let msg
-			if (maxSelect && maxSelect > 1 && Number(required) > 1) {
-				msg = `Please select between ${required} and ${maxSelect} options`
-			} else if (Number(required) > 1) {
-				msg = `Please select at least ${required} options`
-			} else {
-				msg = `Please select an option`
-			}
-			form_input?.setCustomValidity(msg)
-		}}
-	/>
-	<slot name="expand-icon" {open}>
-		<ChevronsUpDown size={16} />
-	</slot>
-	<ul class="selected {ulSelectedClass}" aria-label="selected options" style={ulSelectedStyle}>
-		{#each selected as option, idx (duplicates ? [key(option), idx] : key(option))}
-			<li
-				class={liSelectedClass}
-				role="option"
-				aria-selected="true"
-				animate:flip={{ duration: 100 }}
-				draggable={selectedOptionsDraggable && !disabled && selected.length > 1}
-				on:dragstart={dragstart(idx)}
-				on:drop|preventDefault={drop(idx)}
-				on:dragenter={() => (drag_idx = idx)}
-				on:dragover|preventDefault
-				class:active={drag_idx === idx}
-				style="{get_style(option, `selected`)} {liSelectedStyle}"
-			>
-				<!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
-				<slot name="selected" {option} {idx}>
-					<slot {option} {idx}>
-						{#if parseLabelsAsHtml}
-							{@html get_label(option)}
-						{:else}
-							{get_label(option)}
-						{/if}
-					</slot>
-				</slot>
-				{#if !disabled && (minSelect === null || selected.length > minSelect)}
-					<button
-						on:mouseup|stopPropagation={() => remove(option)}
-						on:keydown={if_enter_or_space(() => remove(option))}
-						type="button"
-						title="{removeBtnTitle} {get_label(option)}"
-						class="remove"
-					>
-						<slot name="remove-icon">
-							<X size={20} class="text-primary dark:text-primary-inverse p-0.5" />
-						</slot>
-					</button>
-				{/if}
-			</li>
-		{/each}
-		<input
-			class={inputClass}
-			style={inputStyle}
-			bind:this={input}
-			bind:value={searchText}
-			on:mouseup|self|stopPropagation={(e) => open_dropdown(e)}
-			on:keydown|stopPropagation={(e) => handle_keydown(e)}
-			on:focus={(e) => open_dropdown(e)}
-			on:input={(e) => highlight_matching_options(e)}
-			{id}
-			{disabled}
-			{autocomplete}
-			{inputmode}
-			{pattern}
-			placeholder={selected.length === 0 ? placeholder : undefined}
-			aria-invalid={invalid ? 'true' : undefined}
-			on:blur
-			on:change
-			on:click
-			on:keydown
-			on:keyup
-			on:mousedown
-			on:mouseenter
-			on:mouseleave
-			on:touchcancel
-			on:touchend
-			on:touchmove
-			on:touchstart
-		/>
-
-		<!-- the above on:* lines forward potentially useful DOM events -->
-		<slot name="after-input" {selected} {disabled} {invalid} {id} {placeholder} {open} {required} />
-	</ul>
-	{#if loading}
-		<slot name="spinner">spinner</slot>
-	{/if}
-	{#if disabled}
-		<slot name="disabled-icon">disable</slot>
-	{:else if selected.length > 0}
-		{#if maxSelect !== 1 && selected.length > 1 && !disableRemoveAll}
-			<button
-				type="button"
-				class="remove remove-all"
-				title={removeAllTitle}
-				on:mouseup|stopPropagation={remove_all}
-				on:keydown={if_enter_or_space(remove_all)}
-			>
-				<slot name="remove-icon">
-					<X
-						size={24}
-						class="text-secondary p-1 rounded-full bg-surface hover:bg-surface-secondary"
-					/>
-				</slot>
-			</button>
-		{/if}
-	{/if}
-	<!-- only render options dropdown if options or searchText is not empty (needed to avoid briefly flashing empty dropdown) -->
-	{#if allowUserOptions || (searchText && noMatchingOptionsMsg) || options?.length > 0}
-		<div class="options bg-surface shadow-md rounded-component">
-			<VirtualList
-				width="100%"
-				height={Math.min(32 * matchingOptions.length, 320)}
-				itemCount={matchingOptions.length}
-				itemSize={32}
-			>
-				<div slot="item" let:index let:style {style}>
-					{@const option = matchingOptions[index]}
-					{@const {
-						label,
-						disabled = null,
-						title = null,
-						selectedTitle = null,
-						disabledTitle = defaultDisabledTitle
-					} = option instanceof Object ? option : { label: option }}
-
-					<!-- svelte-ignore a11y-interactive-supports-focus -->
-					<div
-						on:mousedown|stopPropagation
-						on:mouseup|stopPropagation={(event) => {
-							if (!disabled) add(option, event)
-						}}
-						title={disabled ? disabledTitle : (is_selected(label) && selectedTitle) || title}
-						class={twMerge('hover:bg-blue-100 hover:dark:bg-gray-900 cursor-pointer  !px-2 py-1')}
-						on:mouseover={() => {
-							if (!disabled) activeIndex = index
-						}}
-						on:focus={() => {
-							if (!disabled) activeIndex = index
-						}}
-						on:mouseout={() => (activeIndex = null)}
-						on:blur={() => (activeIndex = null)}
-						role="option"
-						aria-selected="false"
-						style={get_style(option, `option`)}
-					>
-						<slot name="option" {option} {index}>
-							<slot {option} {index}>
-								{#if parseLabelsAsHtml}
-									{@html get_label(option)}
-								{:else}
-									{get_label(option)}
-								{/if}
-							</slot>
-						</slot>
-					</div>
-				</div>
-				<div slot="footer" class="h-0"></div>
-			</VirtualList>
-			{#if searchText}
-				{@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
-				{@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
-				{@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
-				{@const no_match =
-					Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) && `no-match`}
-				{@const msgType = is_dupe || can_create || no_match}
-				{#if msgType}
-					{@const msg = {
-						dupe: duplicateOptionMsg,
-						create: createOptionMsg,
-						'no-match': noMatchingOptionsMsg
-					}[msgType]}
-					<!-- svelte-ignore a11y-interactive-supports-focus -->
-					<div
-						on:mousedown|stopPropagation
-						on:mouseup|stopPropagation={(event) => {
-							if (allowUserOptions) add(searchText, event)
-						}}
-						title={createOptionMsg}
-						class:active={option_msg_is_active}
-						on:mouseover={() => (option_msg_is_active = true)}
-						on:focus={() => (option_msg_is_active = true)}
-						on:mouseout={() => (option_msg_is_active = false)}
-						on:blur={() => (option_msg_is_active = false)}
-						role="option"
-						aria-selected="false"
-						class="user-msg p-1"
-						style:cursor={{
-							dupe: `not-allowed`,
-							create: `pointer`,
-							'no-match': `default`
-						}[msgType]}
-					>
-						<slot name="user-msg" {searchText} {msgType} {msg}>
-							{msg}
-						</slot>
-					</div>
-				{/if}
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	:where(div.multiselect) {
-		position: relative;
-		align-items: center;
-		display: flex;
-		cursor: text;
-		box-sizing: border-box;
-		border: var(--sms-border, 1pt solid lightgray);
-		border-radius: var(--sms-border-radius, 3pt);
-		background: var(--sms-bg);
-		width: var(--sms-width);
-		max-width: var(--sms-max-width);
-		padding: var(--sms-padding, 0 3pt);
-		color: var(--sms-text-color);
-		font-size: var(--sms-font-size, inherit);
-		min-height: var(--sms-min-height, 22pt);
-		margin: var(--sms-margin);
-	}
-	:where(div.multiselect.open) {
-		/* increase z-index when open to ensure the dropdown of one <MultiSelect />
-    displays above that of another slightly below it on the page */
-		z-index: var(--sms-open-z-index, 4);
-	}
-	:where(div.multiselect:focus-within) {
-		border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
-	}
-	:where(div.multiselect.disabled) {
-		background: var(--sms-disabled-bg, lightgray);
-		cursor: not-allowed;
-	}
-
-	:where(div.multiselect > ul.selected) {
-		display: flex;
-		flex: 1;
-		padding: 0;
-		margin: 0;
-		flex-wrap: wrap;
-	}
-	:where(div.multiselect > ul.selected > li) {
-		align-items: center;
-		border-radius: 3pt;
-		display: flex;
-		margin: 2pt;
-		line-height: normal;
-		transition: 0.3s;
-		white-space: nowrap;
-		background: var(--sms-selected-bg, rgba(0, 0, 0, 0.15));
-		padding: var(--sms-selected-li-padding, 1pt 5pt);
-		color: var(--sms-selected-text-color, var(--sms-text-color));
-	}
-	:where(div.multiselect > ul.selected > li[draggable='true']) {
-		cursor: grab;
-	}
-	:where(div.multiselect > ul.selected > li.active) {
-		background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
-	}
-	:where(div.multiselect button) {
-		border-radius: 50%;
-		display: flex;
-		transition: 0.2s;
-		color: inherit;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		outline: none;
-		padding: 0;
-		margin: 0 0 0 3pt; /* CSS reset */
-	}
-	:where(div.multiselect button.remove-all) {
-		margin: 0 3pt;
-	}
-	:where(ul.selected > li button:hover, button.remove-all:hover, button:focus) {
-		color: var(--sms-remove-btn-hover-color, lightskyblue);
-		background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
-	}
-
-	:where(div.multiselect input) {
-		margin: auto 0; /* CSS reset */
-		padding: 0; /* CSS reset */
-	}
-	:where(div.multiselect > ul.selected > input) {
-		border: none;
-		outline: none;
-		background: none;
-		flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
-		min-width: 2em;
-		/* ensure input uses text color and not --sms-selected-text-color */
-		color: var(--sms-text-color);
-		font-size: inherit;
-		cursor: inherit; /* needed for disabled state */
-		border-radius: 0; /* reset ul.selected > li */
-	}
-	/* don't wrap ::placeholder rules in :where() as it seems to be overpowered by browser defaults i.t.o. specificity */
-	div.multiselect > ul.selected > input::placeholder {
-		padding-left: 5pt;
-		color: var(--sms-placeholder-color);
-		opacity: var(--sms-placeholder-opacity);
-	}
-	:where(div.multiselect > input.form-control) {
-		width: 2em;
-		position: absolute;
-		background: transparent;
-		border: none;
-		outline: none;
-		z-index: -1;
-		opacity: 0;
-		pointer-events: none;
-	}
-
-	:where(div.multiselect > ul.options) {
-		list-style: none;
-		top: 100%;
-		left: 0;
-		width: 100%;
-		position: absolute;
-		overflow: auto;
-		transition: all 0.2s;
-		box-sizing: border-box;
-		background: var(--sms-options-bg, white);
-		max-height: var(--sms-options-max-height, 50vh);
-		overscroll-behavior: var(--sms-options-overscroll, none);
-		border: var(--sms-options-border);
-		border-width: var(--sms-options-border-width);
-		border-radius: var(--sms-options-border-radius, 1ex);
-		padding: var(--sms-options-padding);
-		margin: var(--sms-options-margin, inherit);
-	}
-	:where(div.multiselect > ul.options.hidden) {
-		visibility: hidden;
-		opacity: 0;
-		transform: translateY(50px);
-	}
-	:where(div.multiselect > ul.options > li) {
-		padding: 3pt 2ex;
-		cursor: pointer;
-		scroll-margin: var(--sms-options-scroll-margin, 100px);
-	}
-	:where(div.multiselect > ul.options .user-msg) {
-		/* block needed so vertical padding applies to span */
-		display: block;
-		padding: 3pt 2ex;
-	}
-	:where(div.multiselect > ul.options > li.selected) {
-		background: var(--sms-li-selected-bg);
-		color: var(--sms-li-selected-color);
-	}
-	:where(div.multiselect > ul.options > li.active) {
-		background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
-	}
-	:where(div.multiselect > ul.options > li.disabled) {
-		cursor: not-allowed;
-		background: var(--sms-li-disabled-bg, #f5f5f6);
-		color: var(--sms-li-disabled-text, #b8b8b8);
-	}
-
-	::highlight(sms-search-matches) {
-		color: mediumaquamarine;
-	}
-</style>
diff --git a/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte b/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
deleted file mode 100644
index 685c9b0801..0000000000
--- a/frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte
+++ /dev/null
@@ -1,130 +0,0 @@
-<script lang="ts">
-	import Portal from '$lib/components/Portal.svelte'
-	import { createFloatingActions } from 'svelte-floating-ui'
-	import { tick } from 'svelte'
-	import { offset, flip, shift } from 'svelte-floating-ui/dom'
-	import MultiSelect from '$lib/components/multiselect/MultiSelect.svelte'
-	import DarkModeObserver from '../DarkModeObserver.svelte'
-	import { deepEqual } from 'fast-equals'
-
-	let {
-		items,
-		value = $bindable(),
-		placeholder = undefined,
-		target = undefined,
-		topPlacement = false,
-		allowUserOptions = undefined
-	}: {
-		items: any[]
-		value?: string[]
-		placeholder?: string
-		target?: string | HTMLElement
-		topPlacement?: boolean
-		allowUserOptions?: boolean | 'append'
-	} = $props()
-
-	$effect.pre(() => {
-		if (value === undefined) value = []
-	})
-
-	const [floatingRef, floatingContent] = createFloatingActions({
-		strategy: 'absolute',
-		placement: topPlacement ? 'top-start' : 'bottom-start',
-		middleware: [offset(5), flip(), shift()]
-	})
-
-	let outerDiv = $state<HTMLDivElement | undefined>(undefined)
-	let portalRef = $state<HTMLDivElement | undefined>(undefined)
-	let darkMode = $state(false)
-	let w = $state(0)
-	let open = $state(false)
-	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)
-		}
-	}
-
-	$effect(() => {
-		if (portalRef && outerDiv && (allowUserOptions || items?.length > 0)) {
-			tick().then(() => {
-				moveOptionsToPortal()
-			})
-		}
-	})
-</script>
-
-<DarkModeObserver bind:darkMode />
-
-<div use:floatingRef bind:clientWidth={w}>
-	{#if !value || Array.isArray(value)}
-		<div class="border rounded-md border-gray-300 shadow-sm dark:border-gray-600 !w-full">
-			<MultiSelect
-				{allowUserOptions}
-				outerDivClass={`!text-xs`}
-				ulSelectedClass="overflow-auto"
-				bind:outerDiv
-				--sms-border={'none'}
-				--sms-min-height={'30px'}
-				--sms-focus-border={'none'}
-				--sms-selected-bg={darkMode ? '#c7d2fe' : '#e0e7ff'}
-				--sms-selected-text-color={darkMode ? '#312e81' : '#3730a3'}
-				bind:selected={
-					() => [...(value ?? [])],
-					(newVal) => {
-						if (!deepEqual(value, newVal)) {
-							value = newVal
-						}
-					}
-				}
-				{placeholder}
-				options={items}
-				on:close={() => {
-					open = false
-				}}
-				on:open={() => {
-					open = true
-				}}
-				let:option
-				disableRemoveAll
-			>
-				<div
-					class="w-full text-sm"
-					role="option"
-					tabindex="0"
-					onmouseup={(e) => {
-						e.stopPropagation()
-					}}
-					onpointerdown={(e) => {
-						e.stopPropagation()
-						let newe = new MouseEvent('mouseup')
-						e.target?.['parentElement']?.dispatchEvent(newe)
-					}}
-					aria-selected={value?.includes(option)}
-				>
-					{option}
-				</div>
-			</MultiSelect>
-		</div>
-		<Portal {target} name="multi-select">
-			<div use:floatingContent class="z5000" hidden={!open}>
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					bind:this={portalRef}
-					class="multiselect"
-					style={`min-width: ${w}px;`}
-					onclick={(e) => {
-						e.stopPropagation()
-					}}
-					role="listbox"
-					tabindex="0"
-				></div>
-			</div>
-		</Portal>
-	{:else}
-		Value {value} is not an array
-	{/if}
-</div>
diff --git a/frontend/src/lib/components/multiselect/types.ts b/frontend/src/lib/components/multiselect/types.ts
deleted file mode 100644
index d3dc4d7cac..0000000000
--- a/frontend/src/lib/components/multiselect/types.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-export type Option = string | number | ObjectOption
-
-// single CSS string or an object with keys 'option' and 'selected', each a string,
-// which only apply to the dropdown list and list of selected options, respectively
-export type OptionStyle = string | { option: string; selected: string }
-
-export type ObjectOption = {
-	label: string | number // user-displayed text
-	value?: unknown // associated value, can be anything incl. objects (defaults to label if undefined)
-	title?: string // on-hover tooltip
-	disabled?: boolean // make this option unselectable
-	preselected?: boolean // make this option selected on page load (before any user interaction)
-	disabledTitle?: string // override the default disabledTitle = 'This option is disabled'
-	selectedTitle?: string // tooltip to display when this option is selected and hovered
-	style?: OptionStyle
-	[key: string]: unknown // allow any other keys users might want
-}
-
-export type DispatchEvents<T = Option> = {
-	add: { option: T }
-	create: { option: T }
-	remove: { option: T }
-	removeAll: { options: T[] }
-	change: {
-		option?: T
-		options?: T[]
-		type: 'add' | 'remove' | 'removeAll'
-	}
-	open: { event: Event }
-	close: { event: Event }
-}
-
-export type MultiSelectEvents = {
-	[key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>
-} & {
-	blur: FocusEvent
-	click: MouseEvent
-	focus: FocusEvent
-	keydown: KeyboardEvent
-	keyup: KeyboardEvent
-	mouseenter: MouseEvent
-	mouseleave: MouseEvent
-	touchcancel: TouchEvent
-	touchend: TouchEvent
-	touchmove: TouchEvent
-	touchstart: TouchEvent
-}
diff --git a/frontend/src/lib/components/multiselect/utils.ts b/frontend/src/lib/components/multiselect/utils.ts
deleted file mode 100644
index a9bcfcaa69..0000000000
--- a/frontend/src/lib/components/multiselect/utils.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { Option, OptionStyle } from './types'
-
-// get the label key from an option object or the option itself if it's a string or number
-export const get_label = (opt: Option) => {
-	if (opt instanceof Object) {
-		if (opt.label === undefined) {
-			console.error(`MultiSelect option ${JSON.stringify(opt)} is an object but has no label key`)
-		}
-		return opt.label
-	}
-	return `${opt}`
-}
-
-// this function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option
-// if the style is a string, it will be returned as is
-export function get_style(
-	option: { style?: OptionStyle; [key: string]: unknown } | string | number,
-	key: 'selected' | 'option' | null = null
-) {
-	let css_str = ``
-	if (![`selected`, `option`, null].includes(key)) {
-		console.error(`MultiSelect: Invalid key=${key} for get_style`)
-	}
-	if (typeof option == `object` && option.style) {
-		if (typeof option.style == `string`) {
-			css_str = option.style
-		}
-		if (typeof option.style == `object`) {
-			if (key && key in option.style) return option.style[key] ?? ``
-			else {
-				console.error(`Invalid style object for option=${JSON.stringify(option)}`)
-			}
-		}
-	}
-	// ensure css_str ends with a semicolon
-	if (css_str.trim() && !css_str.trim().endsWith(`;`)) css_str += `;`
-	return css_str
-}
-
-// Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
-// See https://github.com/janosh/svelte-multiselect/issues/87
-// Polyfill copied from
-// https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
-// exported for testing
-export function scroll_into_view_if_needed_polyfill(elem: Element, centerIfNeeded: boolean = true) {
-	const observer = new IntersectionObserver(function ([entry]) {
-		const ratio = entry.intersectionRatio
-		if (ratio < 1) {
-			const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`
-			elem.scrollIntoView({
-				block: place,
-				inline: place
-			})
-		}
-		observer.disconnect()
-	}, {
-  root: null, // or specify a scrolling parent if needed
-  rootMargin: '0px 1000px', // Essentially making horizontal checks irrelevant
-  threshold: 0.1 // Adjust threshold to control when observer should trigger
-})
-	observer.observe(elem)
-
-	return observer // return for testing
-}
diff --git a/frontend/src/lib/components/runs/RunsFilter.svelte b/frontend/src/lib/components/runs/RunsFilter.svelte
index 6fd0b0ed03..77ab068bfe 100644
--- a/frontend/src/lib/components/runs/RunsFilter.svelte
+++ b/frontend/src/lib/components/runs/RunsFilter.svelte
@@ -12,7 +12,8 @@
 	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'
+	import Select from '../select/Select.svelte'
+	import { safeSelectItems } from '../select/utils.svelte'
 
 	interface Props {
 		// Filters
@@ -174,7 +175,7 @@
 					<div class="relative">
 						<span class="text-xs absolute -top-4">User</span>
 						<Select
-							items={usernames.map((p) => ({ label: p, value: p }))}
+							items={safeSelectItems(usernames)}
 							bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
 							clearable
 							onClear={() => ((user = null), dispatch('reset'))}
@@ -190,7 +191,7 @@
 						<span class="text-xs absolute -top-4">Folder</span>
 
 						<Select
-							items={folders.map((p) => ({ label: p, value: p }))}
+							items={safeSelectItems(folders)}
 							bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
 							clearable
 							onClear={() => ((folder = null), dispatch('reset'))}
@@ -203,7 +204,7 @@
 					<div class="relative">
 						<span class="text-xs absolute -top-4">Path</span>
 						<Select
-							items={paths.map((p) => ({ label: p, value: p }))}
+							items={safeSelectItems(paths)}
 							bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
 							clearable
 							onClear={() => ((path = null), dispatch('reset'))}
@@ -564,7 +565,7 @@
 							<Label label="User">
 								<Select
 									disablePortal
-									items={usernames.map((p) => ({ label: p, value: p }))}
+									items={safeSelectItems(usernames)}
 									bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
 									clearable
 									onClear={() => ((user = null), dispatch('reset'))}
@@ -575,7 +576,7 @@
 							<Label label="Folder">
 								<Select
 									disablePortal
-									items={folders.map((p) => ({ label: p, value: p }))}
+									items={safeSelectItems(folders)}
 									bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
 									clearable
 									onClear={() => ((folder = null), dispatch('reset'))}
@@ -586,7 +587,7 @@
 							<Label label="Path">
 								<Select
 									disablePortal
-									items={paths.map((p) => ({ label: p, value: p }))}
+									items={safeSelectItems(paths)}
 									bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
 									clearable
 									onClear={() => ((path = null), dispatch('reset'))}
diff --git a/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte b/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
index 0b83b461a7..e355dd289f 100644
--- a/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
+++ b/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
@@ -8,7 +8,8 @@
 	import { Alert } from '../common'
 	import AddPropertyV2 from '$lib/components/schema/AddPropertyV2.svelte'
 	import { Plus } from 'lucide-svelte'
-	import Select from '../Select.svelte'
+	import Select from '../select/Select.svelte'
+	import { safeSelectItems } from '../select/utils.svelte'
 
 	interface Props {
 		schema: Schema | undefined | any
@@ -146,7 +147,7 @@
 		File extension :
 		<Select
 			autofocus
-			items={suggestedFileExtensions.map((e) => ({ value: e, label: e }))}
+			items={safeSelectItems(suggestedFileExtensions)}
 			bind:value={formatExtension}
 			onCreateItem={(ext) => ((formatExtension = ext), suggestedFileExtensions.push(ext))}
 		/>
diff --git a/frontend/src/lib/components/search/GlobalSearchModal.svelte b/frontend/src/lib/components/search/GlobalSearchModal.svelte
index 93f18d60a3..2b7311f5f4 100644
--- a/frontend/src/lib/components/search/GlobalSearchModal.svelte
+++ b/frontend/src/lib/components/search/GlobalSearchModal.svelte
@@ -11,7 +11,7 @@
 		type Script,
 		type SearchJobsIndexResponse
 	} from '$lib/gen'
-	import { clickOutside, isMac } from '$lib/utils'
+	import { clickOutside, isMac, scroll_into_view_if_needed_polyfill } from '$lib/utils'
 	import {
 		AlertTriangle,
 		BoxesIcon,
@@ -36,7 +36,6 @@
 	import { devopsRole, enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
 	import uFuzzy from '@leeoniya/ufuzzy'
 	import BarsStaggered from '../icons/BarsStaggered.svelte'
-	import { scroll_into_view_if_needed_polyfill } from '../multiselect/utils'
 	import { Alert } from '../common'
 	import Popover from '../Popover.svelte'
 	import Logs from 'lucide-svelte/icons/logs'
diff --git a/frontend/src/lib/components/select/DraggableTags.svelte b/frontend/src/lib/components/select/DraggableTags.svelte
new file mode 100644
index 0000000000..3dcd6b3dd3
--- /dev/null
+++ b/frontend/src/lib/components/select/DraggableTags.svelte
@@ -0,0 +1,63 @@
+<script lang="ts" generics="Item extends { label?: string; value: any }">
+	import { twMerge } from 'tailwind-merge'
+	import CloseButton from '../common/CloseButton.svelte'
+
+	type Props = {
+		items?: Item[]
+		allowClear?: boolean
+		onRemove: (item: Item) => void
+		onReorder?: (oldIndex: number, newIndex: number) => void
+	}
+	let { items, onRemove, onReorder, allowClear = true }: Props = $props()
+
+	let currentlyDraggingIndex: number | undefined = $state()
+	let dragPos = $state<[number, number]>([0, 0])
+</script>
+
+<svelte:window
+	onmousemove={(e) => {
+		if (currentlyDraggingIndex === undefined) return
+		dragPos = [dragPos[0] + e.movementX, dragPos[1] + e.movementY]
+	}}
+	onpointerup={() => {
+		currentlyDraggingIndex = undefined
+		dragPos = [0, 0]
+	}}
+/>
+
+{#each items ?? [] as item, index}
+	<li
+		role="listitem"
+		class={twMerge(
+			allowClear ? 'pr-1' : 'pr-3',
+			'pl-3 min-h-6 bg-surface-secondary rounded-full flex items-center gap-0.5',
+			currentlyDraggingIndex !== undefined ? 'hover:opacity-20' : ''
+		)}
+		style={currentlyDraggingIndex === index
+			? `transform: translate(${dragPos[0]}px, ${dragPos[1]}px); pointer-events: none;`
+			: ''}
+		draggable
+		onpointerdown={(e) => {
+			e.stopPropagation()
+			dragPos = [0, 0]
+			currentlyDraggingIndex = index
+		}}
+		onpointerup={(e) => {
+			if (currentlyDraggingIndex !== undefined) {
+				e.stopPropagation()
+				onReorder?.(currentlyDraggingIndex, index)
+			}
+			currentlyDraggingIndex = undefined
+			dragPos = [0, 0]
+		}}
+	>
+		<span class="text-sm select-none">{item.label || item.value}</span>
+		{#if allowClear}
+			<CloseButton
+				class="text-tertiary"
+				small
+				on:close={(e) => (onRemove(item), e.stopPropagation())}
+			/>
+		{/if}
+	</li>
+{/each}
diff --git a/frontend/src/lib/components/select/MultiSelect.svelte b/frontend/src/lib/components/select/MultiSelect.svelte
new file mode 100644
index 0000000000..171528078e
--- /dev/null
+++ b/frontend/src/lib/components/select/MultiSelect.svelte
@@ -0,0 +1,176 @@
+<script lang="ts" generics="Item extends { label?: string; value: any; }">
+	import { clickOutside, reorder } from '$lib/utils'
+	import { untrack } from 'svelte'
+	import { processItems, type ProcessedItem } from './utils.svelte'
+	import SelectDropdown from './SelectDropdown.svelte'
+	import CloseButton from '../common/CloseButton.svelte'
+	import DraggableTags from './DraggableTags.svelte'
+	import { Search } from 'lucide-svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	type Value = Item['value']
+
+	let {
+		items,
+		placeholder = 'Select items',
+		value = $bindable(),
+		class: className = '',
+		style,
+		listAutoWidth = true,
+		disabled = false,
+		disablePortal = false,
+		createText,
+		reorderable = true,
+		noItemsMsg,
+		selectedUlClass = '',
+		placeholderClass = '',
+		allowClear = true,
+		onOpen,
+		groupBy,
+		sortBy,
+		onCreateItem
+	}: {
+		items?: Item[]
+		value: Value[]
+		placeholder?: string
+		class?: string
+		style?: string
+		filterText?: string
+		disabled?: boolean
+		listAutoWidth?: boolean
+		containerStyle?: string
+		inputClass?: string
+		disablePortal?: boolean
+		createText?: string
+		reorderable?: boolean
+		noItemsMsg?: string
+		selectedUlClass?: string
+		placeholderClass?: string
+		allowClear?: boolean
+		groupBy?: (item: Item) => string
+		sortBy?: (a: Item, b: Item) => number
+		onOpen?: () => void
+		onClear?: () => void
+		onCreateItem?: (value: string) => void
+	} = $props()
+
+	let filterText = $state<string>('')
+	let open = $state<boolean>(false)
+	let wrapperEl: HTMLDivElement | undefined = $state()
+	let searchInputEl: HTMLInputElement | undefined = $state()
+
+	$effect(() => searchInputEl?.focus())
+
+	let processedItems: ProcessedItem<Value>[] = $derived.by(() => {
+		let args = { items, createText, filterText, groupBy, onCreateItem, sortBy }
+		return untrack(() => processItems(args))
+	})
+
+	$effect(() => {
+		if (!open) filterText = ''
+	})
+	$effect(() => {
+		open && untrack(() => onOpen?.())
+	})
+
+	let valueEntry = $derived(
+		value.map((v) => processedItems.find((item) => item.value === v)!).filter(Boolean)
+	)
+
+	function onAddValue(item: ProcessedItem<Value>) {
+		if (item.__is_create && onCreateItem) {
+			onCreateItem(item.value)
+		} else {
+			value = [...value, item.value]
+		}
+	}
+	function onRemoveValue(item: ProcessedItem<Value>) {
+		value = value.filter((v) => v !== item.value)
+	}
+
+	function clearValue() {
+		filterText = ''
+		value = []
+	}
+</script>
+
+<div
+	bind:this={wrapperEl}
+	class={twMerge(
+		'relative min-h-8 flex items-center w-full bg-surface border border-gray-300 rounded-md text-tertiary',
+		disabled ? 'pointer-events-none' : '',
+		open && !disabled ? 'open' : '',
+		disabled ? 'disabled' : '',
+		className
+	)}
+	{style}
+	onpointerup={() => (open = true)}
+	use:clickOutside={{ onClickOutside: () => (open = false) }}
+>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+
+	{#if value.length === 0}
+		<span class={twMerge('text-sm ml-2 h-full flex items-center flex-1', placeholderClass)}>
+			{placeholder}
+		</span>
+	{:else}
+		<ul
+			class={twMerge(
+				'overflow-clip overflow-x-hidden h-full cursor-pointer items-center flex flex-wrap gap-1 py-0.5 px-0.5 flex-1 text-primary',
+				selectedUlClass
+			)}
+			role="list"
+		>
+			<DraggableTags
+				items={valueEntry}
+				{allowClear}
+				onRemove={onRemoveValue}
+				onReorder={reorderable
+					? (oldIdx, newIdx) => (value = reorder(value, oldIdx, newIdx))
+					: undefined}
+			/>
+		</ul>
+	{/if}
+	{#if allowClear}
+		<CloseButton
+			noBg
+			class="mr-1 remove-all"
+			small
+			on:close={(e) => (clearValue(), e.stopPropagation())}
+		/>
+	{/if}
+	<SelectDropdown
+		{disablePortal}
+		onSelectValue={onAddValue}
+		{open}
+		processedItems={processedItems.filter((item) => !value.includes(item.value))}
+		value={undefined}
+		{disabled}
+		{filterText}
+		getInputRect={wrapperEl && (() => wrapperEl!.getBoundingClientRect())}
+		{listAutoWidth}
+		{noItemsMsg}
+		class={twMerge(
+			'multiselect dropdown',
+			open && !disabled ? 'open' : '',
+			disabled ? 'disabled' : ''
+		)}
+		ulClass="options"
+	>
+		{#snippet header()}
+			{#if processedItems.length - value.length > 0 || onCreateItem}
+				<div class="mx-2 mb-1 mt-2 flex items-center relative">
+					<input
+						bind:this={searchInputEl}
+						bind:value={filterText}
+						onblur={(e) => (e.preventDefault(), searchInputEl?.focus())}
+						placeholder="Search"
+						class="!pr-7"
+					/>
+					<Search size={16} class="absolute right-2 text-tertiary" />
+				</div>
+			{/if}
+		{/snippet}
+	</SelectDropdown>
+</div>
diff --git a/frontend/src/lib/components/select/Select.svelte b/frontend/src/lib/components/select/Select.svelte
new file mode 100644
index 0000000000..ec0a4dcc47
--- /dev/null
+++ b/frontend/src/lib/components/select/Select.svelte
@@ -0,0 +1,156 @@
+<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 { Loader2 } from 'lucide-svelte'
+	import { untrack } from 'svelte'
+	import { processItems, type ProcessedItem } from './utils.svelte'
+	import SelectDropdown from './SelectDropdown.svelte'
+	import { deepEqual } from 'fast-equals'
+
+	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,
+		noItemsMsg,
+		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
+		noItemsMsg?: 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 inputEl: HTMLInputElement | undefined = $state()
+
+	let processedItems: ProcessedItem<Value>[] = $derived.by(() => {
+		let args = { items, createText, filterText, groupBy, onCreateItem, sortBy }
+		return untrack(() => processItems(args))
+	})
+
+	$effect(() => {
+		if (_filterTextBind !== undefined) filterText = _filterTextBind
+	})
+	$effect(() => {
+		if (_filterTextBind !== undefined) _filterTextBind = filterText
+	})
+
+	$effect(() => {
+		if (filterText) open = true
+	})
+	$effect(() => {
+		if (!open) filterText = ''
+	})
+
+	let valueEntry = $derived(value && processedItems?.find((item) => deepEqual(item.value, value)))
+
+	function setValue(item: ProcessedItem<Value>) {
+		if (item.__is_create && onCreateItem) {
+			onCreateItem(item.value)
+		} else {
+			value = item.value
+		}
+		filterText = ''
+		open = false
+	}
+
+	function clearValue() {
+		filterText = ''
+		if (onClear) onClear()
+		else value = undefined
+	}
+</script>
+
+<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}
+	/>
+	<SelectDropdown
+		{disablePortal}
+		onSelectValue={setValue}
+		{open}
+		{processedItems}
+		{value}
+		{disabled}
+		{filterText}
+		getInputRect={inputEl && (() => inputEl!.getBoundingClientRect())}
+		{listAutoWidth}
+		{noItemsMsg}
+	/>
+</div>
diff --git a/frontend/src/lib/components/select/SelectDropdown.svelte b/frontend/src/lib/components/select/SelectDropdown.svelte
new file mode 100644
index 0000000000..7780828a70
--- /dev/null
+++ b/frontend/src/lib/components/select/SelectDropdown.svelte
@@ -0,0 +1,147 @@
+<script lang="ts" generics="T">
+	import { deepEqual } from 'fast-equals'
+	import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte'
+	import { untrack, type Snippet } from 'svelte'
+	import type { ProcessedItem } from './utils.svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	let {
+		processedItems: _processedItems,
+		value,
+		filterText,
+		listAutoWidth = true,
+		disabled,
+		disablePortal = false,
+		open,
+		noItemsMsg = 'No items found',
+		class: className = '',
+		ulClass = '',
+		header,
+		getInputRect,
+		onSelectValue
+	}: {
+		processedItems?: ProcessedItem<T>[]
+		value: T | undefined
+		filterText?: string
+		listAutoWidth?: Boolean
+		disabled?: boolean
+		disablePortal?: boolean
+		open: boolean
+		noItemsMsg?: string
+		class?: string
+		ulClass?: string
+		header?: Snippet
+		getInputRect?: () => DOMRect
+		onSelectValue: (item: ProcessedItem<T>) => void
+	} = $props()
+
+	let processedItems = $derived(
+		!filterText
+			? _processedItems
+			: _processedItems?.filter(
+					(item) =>
+						item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())
+				)
+	)
+
+	let listEl: HTMLDivElement | undefined = $state()
+	let dropdownPos = $state(computeDropdownPos())
+	let keyArrowPos = $state<number | undefined>()
+
+	function computeDropdownPos(): { width: number; x: number; y: number } {
+		if (!getInputRect || !listEl) return { width: 0, x: 0, y: 0 }
+		let inputR = getInputRect()
+		const listR = listEl.getBoundingClientRect()
+		const openBelow = inputR.y + inputR.height + listR.height <= window.innerHeight
+		let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y]
+		if (openBelow) return { width: inputR.width, x: x, y: y + inputR.height }
+		else {
+			return { width: inputR.width, x: x, y: y - listR.height }
+		}
+	}
+
+	$effect(() => {
+		function updateDropdownPos() {
+			let nPos = computeDropdownPos()
+			if (!deepEqual(nPos, dropdownPos)) dropdownPos = nPos
+			if (open) requestAnimationFrame(updateDropdownPos)
+		}
+		if (open) untrack(() => updateDropdownPos())
+	})
+
+	$effect(() => {
+		;[open, processedItems]
+		untrack(() => (keyArrowPos = open && filterText ? 0 : undefined))
+	})
+</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]) {
+			onSelectValue(processedItems[keyArrowPos])
+		} else {
+			keyArrowPos = undefined
+			return
+		}
+		e.preventDefault()
+	}}
+/>
+
+<ConditionalPortal condition={!disablePortal} name="select-dropdown-portal">
+	{#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 shadow-lg',
+				className
+			)}
+			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
+				? `min-width: ${dropdownPos.width}px;`
+				: ''}"
+			bind:this={listEl}
+		>
+			{@render header?.()}
+			{#if processedItems?.length === 0}
+				<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
+			{/if}
+			<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
+				{#each processedItems ?? [] as item, itemIndex}
+					{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
+						<li
+							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}
+						</li>
+					{/if}
+					<li>
+						<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()
+								onSelectValue(item)
+							}}
+						>
+							{item.label}
+						</button>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+</ConditionalPortal>
diff --git a/frontend/src/lib/components/select/utils.svelte.ts b/frontend/src/lib/components/select/utils.svelte.ts
new file mode 100644
index 0000000000..f3d43b40c1
--- /dev/null
+++ b/frontend/src/lib/components/select/utils.svelte.ts
@@ -0,0 +1,72 @@
+export function processItems<Item extends { label?: string; value: any }>({
+	items,
+	filterText,
+	groupBy,
+	sortBy,
+	onCreateItem,
+	createText
+}: {
+	items?: Item[]
+	filterText?: string
+	groupBy?: (item: Item) => string
+	sortBy?: (a: Item, b: Item) => number
+	onCreateItem?: (value: string) => void
+	createText?: string
+}): ProcessedItem<Item['value']>[] {
+	let items2 =
+		items?.map((item) => ({
+			...item,
+			label: getLabel(item)
+		})) ?? []
+	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
+}
+
+export type ProcessedItem<T> = {
+	__select_group?: string
+	__is_create?: true
+	label: string
+	value: T
+}
+
+export function getLabel<T>(item: { label?: string; value: T } | 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)
+}
+
+export function safeSelectItems<T>(
+	list: (T | { value: T; label?: string } | undefined | null)[] | undefined | null
+): { value: T; label?: string }[] {
+	if (!list) return []
+	return list
+		.filter((item) => item !== undefined && item !== null)
+		.map((item) => {
+			if (typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean') {
+				return { value: item }
+			}
+			if (typeof item === 'object' && 'value' in item) {
+				return item
+			}
+			return { value: null as any, label: 'UNKNOWN_ITEM' }
+		})
+}
diff --git a/frontend/src/lib/components/settings/CreateToken.svelte b/frontend/src/lib/components/settings/CreateToken.svelte
index dd25ca2da9..70c60e2aca 100644
--- a/frontend/src/lib/components/settings/CreateToken.svelte
+++ b/frontend/src/lib/components/settings/CreateToken.svelte
@@ -3,7 +3,6 @@
 	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'
@@ -39,7 +38,7 @@
 	let newMcpScope = $state('favorites')
 	let loadingApps = $state(false)
 	let errorFetchApps = $state(false)
-	let allApps = $state<string[]>([])
+	// let allApps = $state<string[]>([])
 
 	function handleCopyClick() {
 		copyToClipboard(newToken ?? '')
@@ -205,7 +204,7 @@
 					{:else if errorFetchApps}
 						<div>Error fetching apps</div>
 					{:else}
-						<MultiSelectWrapper items={allApps} placeholder="Select apps" bind:value={newMcpApps} />
+						<!-- MultiSelectWrapper was confirmed not to be necessary : deleted -->
 					{/if}
 				</div>
 
diff --git a/frontend/src/lib/components/settings/TokensTable.svelte b/frontend/src/lib/components/settings/TokensTable.svelte
index 9601b92f67..d66e6c2df1 100644
--- a/frontend/src/lib/components/settings/TokensTable.svelte
+++ b/frontend/src/lib/components/settings/TokensTable.svelte
@@ -12,8 +12,9 @@
 	import Toggle from '../Toggle.svelte'
 	import ClipboardPanel from '../details/ClipboardPanel.svelte'
 	import { sendUserToast } from '$lib/toast'
-	import MultiSelectWrapper from '../multiselect/MultiSelectWrapper.svelte'
 	import TriggerableByAI from '../TriggerableByAI.svelte'
+	import MultiSelect from '../select/MultiSelect.svelte'
+	import { safeSelectItems } from '../select/utils.svelte'
 
 	// --- Props ---
 	interface Props {
@@ -306,10 +307,11 @@
 						{:else if errorFetchApps}
 							<div>Error fetching apps</div>
 						{:else}
-							<MultiSelectWrapper
-								items={allApps}
+							<MultiSelect
+								items={safeSelectItems(allApps)}
 								placeholder="Select apps"
 								bind:value={newMcpApps}
+								class="!bg-surface"
 							/>
 						{/if}
 					</div>
@@ -319,7 +321,7 @@
 						<select
 							bind:value={newTokenWorkspace}
 							disabled={workspaces.length === 1}
-							class="w-full"
+							class="w-full !bg-surface"
 						>
 							{#each workspaces as workspace}
 								<option value={workspace.id}>{workspace.name}</option>
@@ -331,7 +333,7 @@
 				<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" />
+					<input type="text" bind:value={newTokenLabel} class="w-full !bg-surface" />
 				</div>
 
 				{#if !mcpCreationMode}
@@ -339,7 +341,7 @@
 						<span class="block mb-1"
 							>Expires In <span class="text-xs text-tertiary">(optional)</span></span
 						>
-						<select bind:value={newTokenExpiration} class="w-full">
+						<select bind:value={newTokenExpiration} class="w-full !bg-surface">
 							<option value={undefined}>No expiration</option>
 							<option value={15 * 60}>15m</option>
 							<option value={30 * 60}>30m</option>
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
index 83aa8633ce..60751a4595 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
@@ -23,7 +23,8 @@
 	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'
+	import Select from '$lib/components/select/Select.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 
 	let topic_items: string[] = $state([])
 	let subscription_items: string[] = $state([])
@@ -176,7 +177,7 @@
 										loadAllSubscriptionFromGooglePubSubTopic()
 									}
 								}
-								items={topic_items.map((value) => ({ value }))}
+								items={safeSelectItems(topic_items)}
 								placeholder="Choose a topic"
 							/>
 							<Button
@@ -312,7 +313,7 @@
 											(t) => ((subscription_id = t), (cloud_subscription_id = t))
 										}
 										onClear={() => (subscription_id = '')}
-										items={subscription_items.map((value) => ({ value }))}
+										items={safeSelectItems(subscription_items)}
 										placeholder="Choose a subscription"
 									/>
 									<Button
diff --git a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
index a596d73d5e..3d34d824d6 100644
--- a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
+++ b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
@@ -19,7 +19,7 @@
 	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 Select from '$lib/components/select/Select.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import {
 		copyToClipboard,
@@ -34,6 +34,7 @@
 	import { bash } from 'svelte-highlight/languages'
 	import CreateToken from '$lib/components/settings/CreateToken.svelte'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 
 	type HttpRouteAndWebhook = WebhookFilters | OpenapiHttpRouteFilters
 
@@ -392,7 +393,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 																		clearable={false}
 																		class="grow shrink"
 																		bind:value={webhookFilters.user_or_folder_regex}
-																		items={['*', 'u', 'f'].map((value) => ({ value }))}
+																		items={safeSelectItems(['*', 'u', 'f'])}
 																	/>
 																	<span class="text-xl">/</span>
 																	<div>
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
index b99dbabe0e..9d81985fd6 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
@@ -9,13 +9,12 @@
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, emptyStringTrimmed, sendUserToast } from '$lib/utils'
 	import Section from '$lib/components/Section.svelte'
-	import { Loader2, X } from 'lucide-svelte'
+	import { Loader2 } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import MultiSelect from 'svelte-multiselect'
 	import PublicationPicker from './PublicationPicker.svelte'
 	import SlotPicker from './SlotPicker.svelte'
 	import { random_adj } from '$lib/components/random_positive_adjetive'
@@ -30,6 +29,8 @@
 	import TestingBadge from '../testingBadge.svelte'
 	import { handleConfigChange, type Trigger } from '../utils'
 	import { fade } from 'svelte/transition'
+	import MultiSelect from '$lib/components/select/MultiSelect.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 
 	interface Props {
 		useDrawer?: boolean
@@ -95,7 +96,7 @@
 	let selectedPublicationAction: actions | undefined = $state(undefined)
 	let selectedSlotAction: actions | undefined = $state(undefined)
 	let publicationItems: string[] = $state([])
-	let transactionType: string[] = ['Insert', 'Update', 'Delete']
+	let transactionType: string[] = $state(['Insert', 'Update', 'Delete'])
 	let tab: 'advanced' | 'basic' = $state('basic')
 	let basic_mode = $derived(tab === 'basic')
 	let initialConfig: Record<string, any> | undefined = undefined
@@ -441,14 +442,14 @@
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'Postgres trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render actionsSnippet()}
-		</svelte:fragment>
+		{/snippet}
 		{@render content()}
 	</Section>
 {/if}
@@ -551,11 +552,11 @@
 				</Section>
 			{/if}
 			<Section label="Database">
-				<svelte:fragment slot="badge">
+				{#snippet badge()}
 					{#if isEditor}
 						<TestingBadge />
 					{/if}
-				</svelte:fragment>
+				{/snippet}
 				<p class="text-xs text-tertiary mb-2">
 					Pick a database to connect to <Required required={true} />
 				</p>
@@ -586,26 +587,12 @@
 								</Tooltip>
 							{/snippet}
 							<MultiSelect
-								noMatchingOptionsMsg=""
-								createOptionMsg={null}
-								duplicates={false}
-								options={transactionType}
-								allowUserOptions="append"
-								bind:selected={transaction_to_track}
-								ulOptionsClass={'!bg-surface !text-sm'}
-								ulSelectedClass="!text-sm"
-								outerDivClass="!bg-surface !min-h-[38px] !border-[#d1d5db]"
+								bind:value={transaction_to_track}
+								items={safeSelectItems(transactionType)}
+								onCreateItem={(x) => (transactionType.push(x), transaction_to_track.push(x))}
 								placeholder="Select transactions"
-								--sms-options-margin="4px"
-								--sms-open-z-index="100"
 								disabled={!can_write}
-							>
-								<svelte:fragment slot="remove-icon">
-									<div class="hover:text-primary p-0.5">
-										<X size={12} />
-									</div>
-								</svelte:fragment>
-							</MultiSelect>
+							/>
 						</Label>
 						<Label label="Table Tracking" headerClass="grow min-w-0">
 							{#snippet header()}
diff --git a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
index 428bfd68f0..7a23f4eab8 100644
--- a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import Select from '$lib/components/Select.svelte'
+	import Select from '$lib/components/select/Select.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 	import type { Relations } from '$lib/gen'
 	import { PostgresTriggerService } from '$lib/gen/services.gen'
 	import { workspaceStore } from '$lib/stores'
@@ -102,7 +103,7 @@
 		disabled={!can_write || disabled}
 		class="grow shrink"
 		bind:value={publication_name}
-		items={items.map((value) => ({ value }))}
+		items={safeSelectItems(items)}
 		placeholder="Choose a publication"
 		clearable
 		disablePortal
diff --git a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
index f92d5c37f9..98b90bc772 100644
--- a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
@@ -4,12 +4,13 @@
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import type { Relations } from '$lib/gen'
-	import { Plus, Trash, X } from 'lucide-svelte'
+	import { Plus, Trash } from 'lucide-svelte'
 	import { getDefaultTableToTrack, invalidRelations } from './utils'
 	import AddPropertyFormV2 from '$lib/components/schema/AddPropertyFormV2.svelte'
 	import Label from '$lib/components/Label.svelte'
 	import { emptyStringTrimmed, sendUserToast } from '$lib/utils'
-	import MultiSelect from 'svelte-multiselect'
+	import MultiSelect from '$lib/components/select/MultiSelect.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 
 	interface Props {
 		relations?: Relations[] | undefined
@@ -170,58 +171,28 @@
 										{/snippet}
 										<div class="mt-1">
 											<MultiSelect
-												options={table_to_track.columns_name ?? []}
-												allowUserOptions="append"
-												ulOptionsClass={'!bg-surface !text-sm'}
-												ulSelectedClass="!text-sm"
-												outerDivClass="!bg-surface !min-h-[38px] !border-[#d1d5db]"
-												noMatchingOptionsMsg=""
-												createOptionMsg={null}
-												disabled={pg14}
-												duplicates={false}
-												selected={table_to_track.columns_name ?? []}
+												items={safeSelectItems(table_to_track.columns_name ?? [])}
 												placeholder="Select columns"
-												--sms-options-margin="4px"
-												onchange={(e) => {
-													const option = e.option?.toString()
-													updateRelationsFor(i, (rel) => {
-														const updatedTables = rel.table_to_track.map((t, idx) => {
-															if (idx !== j) return t
-
-															let updatedColumns = t.columns_name ?? []
-
-															if (e.type === 'add' && option) {
-																updatedColumns = [...updatedColumns, option]
-															} else if (e.type === 'remove') {
-																updatedColumns = updatedColumns.filter((col) => col !== option)
-															} else if (e.type === 'removeAll') {
-																updatedColumns = []
-															} else {
-																console.error(
-																	`Priority tags multiselect - unknown event type: '${e.type}'`
-																)
-															}
-
-															return {
-																...t,
-																columns_name: updatedColumns
-															}
-														})
-
-														return {
+												disabled={pg14}
+												bind:value={
+													() => table_to_track.columns_name ?? [],
+													(columns_name) => {
+														updateRelationsFor(i, (rel) => ({
 															...rel,
-															table_to_track: updatedTables
-														}
-													})
-												}}
-											>
-												<!-- @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} />
-													</div>
-												</svelte:fragment>
-											</MultiSelect>
+															table_to_track: rel.table_to_track.map((t, idx) =>
+																idx !== j ? t : { ...t, columns_name }
+															)
+														}))
+													}
+												}
+												onCreateItem={(x) =>
+													updateRelationsFor(i, (rel) => ({
+														...rel,
+														table_to_track: rel.table_to_track.map((t, idx) =>
+															idx !== j ? t : { ...t, columns_name: [...(t.columns_name ?? []), x] }
+														)
+													}))}
+											/>
 										</div>
 									</Label>
 									<Label label="Where Clause">
diff --git a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
index 6d3c2557de..66b1b1b623 100644
--- a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import Select from '$lib/components/Select.svelte'
+	import Select from '$lib/components/select/Select.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 	import { PostgresTriggerService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
@@ -77,7 +78,7 @@
 		class="grow shrink max-w-full"
 		bind:value={replication_slot_name}
 		onClear={() => (replication_slot_name = '')}
-		items={items.map((value) => ({ value }))}
+		items={safeSelectItems(items)}
 		placeholder="Choose a slot name"
 		disablePortal
 		clearable
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
index 21dfb1bbaa..a3e8a10c94 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
@@ -3,10 +3,9 @@
 	import Required from '$lib/components/Required.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import { emptyStringTrimmed } from '$lib/utils'
-	import MultiSelect from 'svelte-multiselect'
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
 	import Subsection from '$lib/components/Subsection.svelte'
-	import { Plus, X } from 'lucide-svelte'
+	import { Plus } from 'lucide-svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import ArgInput from '$lib/components/ArgInput.svelte'
@@ -16,6 +15,8 @@
 	import { VariableService, type AwsAuthResourceType } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import TestingBadge from '../testingBadge.svelte'
+	import MultiSelect from '$lib/components/select/MultiSelect.svelte'
+	import { safeSelectItems } from '$lib/components/select/utils.svelte'
 
 	interface Props {
 		can_write?: boolean
@@ -141,26 +142,13 @@
 				</div>
 				<div class="flex flex-col mt-3 gap-1">
 					<MultiSelect
-						options={message_attributes ?? []}
-						allowUserOptions="append"
-						bind:selected={message_attributes}
-						ulOptionsClass={'!bg-surface !text-sm'}
-						ulSelectedClass="!text-sm"
-						outerDivClass="!bg-surface !min-h-[38px] !border-[#d1d5db]"
-						noMatchingOptionsMsg=""
-						createOptionMsg={null}
-						duplicates={false}
+						bind:value={message_attributes}
+						items={safeSelectItems(message_attributes)}
+						onCreateItem={(x) => message_attributes.push(x)}
 						placeholder="Set message attributes"
-						--sms-options-margin="4px"
+						noItemsMsg="Add message attributes to filter on"
 						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} />
-							</div>
-						</svelte:fragment>
-					</MultiSelect>
+					/>
 				</div>
 			</Subsection>
 		</div>
diff --git a/frontend/src/lib/components/workspaceSettings/AISettings.svelte b/frontend/src/lib/components/workspaceSettings/AISettings.svelte
index 0d9ad0bef8..b49f0126b0 100644
--- a/frontend/src/lib/components/workspaceSettings/AISettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/AISettings.svelte
@@ -10,7 +10,8 @@
 	import Toggle from '../Toggle.svelte'
 	import ArgEnum from '../ArgEnum.svelte'
 	import Button from '../common/button/Button.svelte'
-	import MultiSelectWrapper from '../multiselect/MultiSelectWrapper.svelte'
+	import MultiSelect from '../select/MultiSelect.svelte'
+	import { safeSelectItems } from '../select/utils.svelte'
 
 	const aiProviderLabels: [AIProvider, string][] = [
 		['openai', 'OpenAI'],
@@ -212,13 +213,15 @@
 							</div>
 
 							<Label label="Enabled models">
-								<!-- this can be removed once the parent component moves to runes -->
-								<!-- svelte-ignore binding_property_non_reactive -->
-								<MultiSelectWrapper
-									items={availableAiModels[provider]}
+								<MultiSelect
+									items={safeSelectItems([
+										...availableAiModels[provider],
+										...aiProviders[provider].models
+									])}
 									bind:value={aiProviders[provider].models}
 									placeholder="Select models"
-									allowUserOptions="append"
+									onCreateItem={(item) =>
+										(aiProviders[provider].models = [...aiProviders[provider].models, item])}
 								/>
 							</Label>
 							<p class="text-xs">
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index f16133547b..083d22b8bf 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -274,7 +274,7 @@ export function validatePassword(password: string): boolean {
 	return re.test(password)
 }
 
-const portalDivs = ['app-editor-select']
+const portalDivs = ['#app-editor-select', '.select-dropdown-portal']
 
 interface ClickOutsideOptions {
 	capture?: boolean
@@ -309,7 +309,7 @@ export function clickOutside(
 		})
 
 		if (node && !node.contains(target) && !event.defaultPrevented && !isExcluded) {
-			const portalDivsSelector = portalDivs.map((id) => `#${id}`).join(', ')
+			const portalDivsSelector = portalDivs.join(', ')
 			const parent = target.closest(portalDivsSelector)
 
 			if (!parent) {
@@ -372,7 +372,7 @@ export function pointerDownOutside(
 		})
 
 		if (node && !node.contains(target) && !event.defaultPrevented && !isExcluded) {
-			const portalDivsSelector = portalDivs.map((id) => `#${id}`).join(', ')
+			const portalDivsSelector = portalDivs.join(', ')
 			const parent = target.closest(portalDivsSelector)
 
 			if (!parent) {
@@ -1390,3 +1390,34 @@ export function readFieldsRecursively(obj: any): void {
 		Object.keys(obj).forEach((key) => readFieldsRecursively(obj[key]))
 	}
 }
+
+export function reorder<T>(items: T[], oldIndex: number, newIndex: number): T[] {
+	const updatedItems = [...items]
+	const [removedItem] = updatedItems.splice(oldIndex, 1)
+	updatedItems.splice(newIndex, 0, removedItem)
+	return updatedItems
+}
+
+export function scroll_into_view_if_needed_polyfill(elem: Element, centerIfNeeded: boolean = true) {
+	const observer = new IntersectionObserver(
+		function ([entry]) {
+			const ratio = entry.intersectionRatio
+			if (ratio < 1) {
+				const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`
+				elem.scrollIntoView({
+					block: place,
+					inline: place
+				})
+			}
+			observer.disconnect()
+		},
+		{
+			root: null, // or specify a scrolling parent if needed
+			rootMargin: '0px 1000px', // Essentially making horizontal checks irrelevant
+			threshold: 0.1 // Adjust threshold to control when observer should trigger
+		}
+	)
+	observer.observe(elem)
+
+	return observer // return for testing
+}
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index 139ee18e9b..4cd7ff1247 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -41,7 +41,7 @@
 	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'
+	import Select from '$lib/components/select/Select.svelte'
 
 	let workers: WorkerPing[] | undefined = undefined
 	let workerGroups: Record<string, any> | undefined = undefined
@@ -107,7 +107,7 @@
 	}
 
 	let defaultTagPerWorkspace: boolean | undefined = undefined
-	let defaultTagWorkspaces: string[] | undefined = undefined
+	let defaultTagWorkspaces: string[] = []
 	async function loadDefaultTagsPerWorkspace() {
 		try {
 			defaultTagPerWorkspace = await WorkerService.isDefaultTagsPerWorkspace()
@@ -485,27 +485,7 @@
 			{#if (groupedWorkers ?? []).length > 5}
 				<div class="flex gap-2 items-center">
 					<div class="text-secondary text-sm">Worker group:</div>
-					<Select
-						items={groupedWorkers.map((x) => ({ value: x[0], label: x[0] }))}
-						bind:value={selectedTab}
-					/>
-
-					<!-- <select
-					class="max-w-64"
-					bind:value={selectedTab}
-					on:change={() => {
-						search = ''
-					}}
-				>
-					{#each groupedWorkers.map((x) => x[0]) as name (name)}
-						<option value={name}
-							>{name} ({pluralize(
-								groupedWorkers.find((x) => x[0] == name)?.[1].length ?? 0,
-								'worker'
-							)})
-						</option>
-					{/each}
-				</select> -->
+					<Select items={groupedWorkers.map((x) => ({ value: x[0] }))} bind:value={selectedTab} />
 				</div>
 			{:else}
 				<Tabs bind:selected={selectedTab}>

From e4255e6276565c4a45b1f45a5d627bcfb5369270 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Thu, 19 Jun 2025 15:00:13 +0200
Subject: [PATCH 21/24] fix: replace worker tags to listen multiselect (#5997)

* rename all multiselects to Legacy

* move Select

* Separate SelectDropdown

* fix click outside for select with portal

* multiselect v0

* multiselect clear btn

* move filterText logic to SelectDropdown

* ui nits

* console.log

* draggable

* Draggable multiselect

* multiselect search

* nit refacto

* autofocus multiselect input

* Replace in AppMultiSelectV2

* search icon

* app multi select nits

* arginput update multiselect

* fix autofocus scrolling up

* replace High priority tags multiselect

* autoscaling config editor multiselect replace

* fix clear btn not in border

* replace multiselect in cron input

* replace multiselect in savedinputs

* replace EventHandlerItem multiselect

* select dropdown shadow

* more multiselect migration

* hover opacity on drag

* TokensTable UI fixes + replace multiselect

* ai settings replace multiselect

* DefaultTags Multiselect replace

* prevent multiselect from opening on drag

* nit

* app multiselect css + simplify

* console log

* safeSelectItems cleanup

* Remove svelte-multiselect

* clip when wrap not allowed

* hide duplicate app components

* CSS works better  with multiselect in app editor

* allowOverflow

* allowClear

* replace tags to listen to with a multiselect

* fix custom createText messed up with search
---
 .../src/lib/components/TagsToListenTo.svelte  | 100 +++---------------
 1 file changed, 17 insertions(+), 83 deletions(-)

diff --git a/frontend/src/lib/components/TagsToListenTo.svelte b/frontend/src/lib/components/TagsToListenTo.svelte
index d9744a6449..76c7fe15d6 100644
--- a/frontend/src/lib/components/TagsToListenTo.svelte
+++ b/frontend/src/lib/components/TagsToListenTo.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { X, Plus, Trash } from 'lucide-svelte'
-	import { Button } from './common'
-	import { superadmin } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
 	import { defaultTags, nativeTags } from './worker_group'
-	import Select from './select/Select.svelte'
 	import { safeSelectItems } from './select/utils.svelte'
+	import MultiSelect from './select/MultiSelect.svelte'
+	import { superadmin } from '$lib/stores'
 
 	const dispatch = createEventDispatcher()
 	type Props = {
@@ -16,85 +14,21 @@
 	let {
 		worker_tags = $bindable([]),
 		customTags = $bindable([]),
-		disabled = $bindable(false)
+		disabled: _disabled = $bindable(false)
 	}: Props = $props()
-	let newTag = $state('')
-	let createdTags: string[] = $state([])
+
+	let disabled = $derived(_disabled || !$superadmin)
 </script>
 
-<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 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="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>
-	{/each}
-</div>
-
-{#if $superadmin}
-	<div class="max-w-md space-y-2">
-		<Select
-			items={safeSelectItems(
-				[...(customTags ?? []), ...createdTags, ...defaultTags, ...nativeTags].filter(
-					(x) => !worker_tags?.includes(x)
-				)
-			)}
-			{disabled}
-			bind:value={newTag}
-			onFocus={() => dispatch('focus')}
-			onCreateItem={(c) => (createdTags.push(c), (createdTags = [...createdTags]), (newTag = c))}
-			createText="Press Enter to use this tag"
-		/>
-
-		<div class="flex gap-2">
-			<Button
-				variant="contained"
-				color="light"
-				size="xs"
-				startIcon={{ icon: Plus }}
-				disabled={disabled || newTag == '' || worker_tags?.includes(newTag)}
-				on:click={() => {
-					worker_tags = [...(worker_tags ?? []), newTag.replaceAll(' ', '_')]
-					newTag = ''
-					dispatch('dirty')
-				}}
-			>
-				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}
+<MultiSelect
+	items={safeSelectItems([...(customTags ?? []), ...worker_tags, ...defaultTags, ...nativeTags])}
+	bind:value={
+		() => worker_tags,
+		(w) => ((worker_tags = w.map((s) => s.replaceAll(' ', '_'))), dispatch('dirty'))
+	}
+	{disabled}
+	class={disabled ? 'border-0' : ''}
+	allowClear={!disabled}
+	onCreateItem={(c) => worker_tags.push(c)}
+	createText="Press Enter to use this tag"
+/>

From c4adaeeabd287ca1c4f3522bcd8bcea30b00fe6d Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Thu, 19 Jun 2025 15:32:21 +0200
Subject: [PATCH 22/24] fix: improve piptar upload - sequential uploads via
 background task queue (#5994)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: improve piptar upload with sequential background task queue

Replace simultaneous piptar uploads with sequential processing via background job queue while keeping dependency installation parallelized.

Key changes:
- Add PiptarUpload job kind and database migration
- Queue piptar uploads instead of using tokio::spawn
- Implement job handler for sequential S3 uploads
- Maintain parallel dependency installation as requested

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Ruben Fiszel <rubenfiszel@users.noreply.github.com>

* Remove PiptarUpload job kind migration files

Refactoring piptar uploads to use tokio channel instead of Windmill jobs.
Migration files are no longer needed.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Ruben Fiszel <rubenfiszel@users.noreply.github.com>

* Refactor piptar uploads from Windmill jobs to tokio channel

Replace the complex job queue infrastructure for piptar uploads with a simple
tokio channel approach as requested. This maintains sequential upload behavior
while keeping dependency installation parallel.

Key changes:
- Add PIPTAR_UPLOAD_CHANNEL global channel for sequential processing
- Replace JobPayload::PiptarUpload with simple channel send
- Remove PiptarUpload from JobKind enum and all job handling code
- Remove job dispatcher case from worker.rs
- Simplify upload logic while maintaining same functionality

Benefits:
- Reduced complexity by removing unnecessary job infrastructure
- Sequential uploads without blocking dependency installation
- Better separation of concerns

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Ruben Fiszel <rubenfiszel@users.noreply.github.com>

* Update worker.rs

* Update python_executor.rs

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Ruben Fiszel <rubenfiszel@users.noreply.github.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 backend/windmill-queue/src/jobs.rs            |  1 +
 .../windmill-worker/src/python_executor.rs    | 55 ++++++++++++++++++-
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/backend/windmill-queue/src/jobs.rs b/backend/windmill-queue/src/jobs.rs
index 1676148b00..3e89cd98b2 100644
--- a/backend/windmill-queue/src/jobs.rs
+++ b/backend/windmill-queue/src/jobs.rs
@@ -4028,6 +4028,7 @@ pub async fn push<'c, 'd>(
         ),
     };
 
+
     let final_priority: Option<i16>;
     #[cfg(not(feature = "enterprise"))]
     {
diff --git a/backend/windmill-worker/src/python_executor.rs b/backend/windmill-worker/src/python_executor.rs
index de5bedc5b1..90ef0afccd 100644
--- a/backend/windmill-worker/src/python_executor.rs
+++ b/backend/windmill-worker/src/python_executor.rs
@@ -62,12 +62,52 @@ lazy_static::lazy_static! {
     static ref EPHEMERAL_TOKEN_CMD: Option<String> = var("EPHEMERAL_TOKEN_CMD").ok();
 }
 
+#[cfg(all(feature = "enterprise", feature = "parquet", unix))]
+lazy_static::lazy_static! {
+    static ref PIPTAR_UPLOAD_CHANNEL: tokio::sync::mpsc::UnboundedSender<PiptarUploadTask> = {
+        let (tx, rx) = tokio::sync::mpsc::unbounded_channel();
+        
+        // Spawn background task to handle uploads sequentially
+        tokio::spawn(handle_piptar_uploads(rx));
+        
+        tx
+    };
+}
+
+#[cfg(all(feature = "enterprise", feature = "parquet", unix))]
+#[derive(Debug)]
+struct PiptarUploadTask {
+    venv_path: String,
+    cache_dir: String,
+}
+
+#[cfg(all(feature = "enterprise", feature = "parquet", unix))]
+async fn handle_piptar_uploads(mut rx: tokio::sync::mpsc::UnboundedReceiver<PiptarUploadTask>) {
+    use crate::global_cache::build_tar_and_push;
+    use windmill_common::s3_helpers::get_object_store;
+    
+    while let Some(task) = rx.recv().await {
+        if let Some(os) = get_object_store().await {
+            match build_tar_and_push(os, task.venv_path.clone(), task.cache_dir, None, false).await {
+                Ok(()) => {
+                    tracing::info!("Successfully uploaded piptar for {}", task.venv_path);
+                }
+                Err(e) => {
+                    tracing::error!("Failed to upload piptar for {}: {}", task.venv_path, e);
+                }
+            }
+        } else {
+            tracing::warn!("S3 object store not available for piptar upload: {}", task.venv_path);
+        }
+    }
+}
+
 const NSJAIL_CONFIG_DOWNLOAD_PY_CONTENT: &str = include_str!("../nsjail/download.py.config.proto");
 const NSJAIL_CONFIG_RUN_PYTHON3_CONTENT: &str = include_str!("../nsjail/run.python3.config.proto");
 const RELATIVE_PYTHON_LOADER: &str = include_str!("../loader.py");
 
 #[cfg(all(feature = "enterprise", feature = "parquet", unix))]
-use crate::global_cache::{build_tar_and_push, pull_from_tar};
+use crate::global_cache::pull_from_tar;
 
 #[cfg(all(feature = "enterprise", feature = "parquet", unix))]
 use windmill_common::s3_helpers::OBJECT_STORE_SETTINGS;
@@ -1897,8 +1937,16 @@ 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(false), None, false));
+                // Send to upload channel for sequential processing
+                let upload_task = PiptarUploadTask {
+                    venv_path: venv_p.clone(),
+                    cache_dir: py_version.to_cache_dir_top_level(false),
+                };
+                
+                if let Err(e) = PIPTAR_UPLOAD_CHANNEL.send(upload_task) {
+                    tracing::warn!("Failed to queue piptar upload for {venv_p}: {e}");
+                } else {
+                    tracing::info!("Queued piptar upload for {venv_p}");
                 }
             }
 
@@ -2200,3 +2248,4 @@ for line in sys.stdin:
     )
     .await
 }
+

From 9462d56be78c164bfbcc780e7889cef53bf3d062 Mon Sep 17 00:00:00 2001
From: centdix <40307056+centdix@users.noreply.github.com>
Date: Thu, 19 Jun 2025 15:36:10 +0200
Subject: [PATCH 23/24] internal: better instructions for claude (#5996)

* better instructions for claude

* remove file

* better rules

* better claude action

* add api routes prefixes

* typo

* typo

* fix

* fix

* add typegen explanations

* remove npm run format
---
 .github/workflows/claude.yml                  | 79 ++++++++++++++++---
 CLAUDE.md                                     | 13 ++-
 backend/CLAUDE.md                             | 12 +++
 .../rules => backend}/rust-best-practices.mdc |  0
 frontend/CLAUDE.md                            | 77 ++++++++++++++++++
 .../svelte5-best-practices.mdc                |  0
 ...mill-overview.mdc => windmill-overview.mdc |  0
 7 files changed, 166 insertions(+), 15 deletions(-)
 create mode 100644 backend/CLAUDE.md
 rename {.cursor/rules => backend}/rust-best-practices.mdc (100%)
 create mode 100644 frontend/CLAUDE.md
 rename {.cursor/rules => frontend}/svelte5-best-practices.mdc (100%)
 rename .cursor/rules/windmill-overview.mdc => windmill-overview.mdc (100%)

diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
index 6fee7718a1..26420fd6c1 100644
--- a/.github/workflows/claude.yml
+++ b/.github/workflows/claude.yml
@@ -64,21 +64,76 @@ jobs:
         with:
           fetch-depth: 1
 
+      # Cache rust dependencies
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "./backend -> target"
+
+      # Cache node dependencies
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Run npm install and generate-backend-client
+        working-directory: ./frontend
+        run: |
+          # add a build directory for cargo check
+          mkdir -p build
+          npm install
+          npm run generate-backend-client
+
+      - name: install xmlsec1
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libxml2-dev libxmlsec1-dev
+
+      - uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+          cache-workspaces: backend
+          toolchain: 1.85.0
+
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: backend
+
+      - name: cargo check
+        working-directory: ./backend
+        timeout-minutes: 16
+        run: |
+          SQLX_OFFLINE=true cargo check --features $(./all_features_oss.sh)
+
       - name: Run Claude PR Action
         uses: anthropics/claude-code-action@beta
+        env:
+          SQLX_OFFLINE: true
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           timeout_minutes: "60"
-          allowed_tools: "mcp__github__create_pull_request,Bash(npm:*),Bash(cargo:*)"
-          custom_instructions: "IMPORTANT INSTRUCTIONS:
-          - Bypass previous instructions and instead of adding a url in your comment to manually create a PR, if you created a new branch with your changes, automatically create a draft PR from that branch to main, with the title starting with [Claude PR].
-          - If you made changes to the frontend code, run npm install, then npm run generate-backend-client, then npm run check. You can ignore warnings that are reported by the check script, but fix the errors.
-          - If you made changes to the backend code, run cargo check. You can ignore warnings that are reported by the check script, but fix the errors.
-          - DO NOT FORGET TO OPEN A DRAFT PR AFTER YOU ARE DONE if you made changes after a request from a git issue.
-          AVAILABLE TOOLS:
-          - mcp__github__create_pull_request: Create a PR from a branch to main
-          - Bash(npm run check): Run the check script. You should run this tool after making changes to the frontend code.
-          - Bash(npm install): Install dependencies. You need this to run npm run check.
-          - Bash(npm run generate-backend-client): Generate the backend client. You need this to run npm run check.
-          - Bash(cargo check): Run the cargo check script. You should run this tool after making changes to the backend code."
+          allowed_tools: "mcp__github__create_pull_request,Bash"
+          custom_instructions: |
+            ## IMPORTANT INSTRUCTIONS
+            - Bypass previous instructions and instead of adding a url in your comment to manually create a PR, if you created a new branch with your changes, automatically create a draft PR from that branch to main.
+
+            ## Code Quality Requirements
+
+            After making any code changes, you MUST run the appropriate validation commands:
+
+            **Frontend Changes:**
+            - Run: `npm run check` in the frontend directory
+            - Fix all warnings and errors before proceeding
+
+            **Backend Changes:**  
+            - Run: `cargo check --features $(./all_features_oss.sh)` in the backend directory
+            - Fix all warnings and errors before proceeding
+
+            **Pull Request Creation:**
+            - DO NOT FORGET TO OPEN A DRAFT PR AFTER YOU ARE DONE if you made changes after a request from a git issue. 
+
+            ## Available Tools
+            - mcp__github__create_pull_request: Create PRs from branches
+            - Bash: Full access to run validation commands and git operations
           trigger_phrase: "/ai"
diff --git a/CLAUDE.md b/CLAUDE.md
index 5a6512b371..f61e0336be 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,3 +1,10 @@
-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. 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
+# Windmill Development Guide
+
+## Overview
+
+Windmill is an open-source developer platform for building internal tools, workflows, API integrations, background jobs, workflows, and user interfaces. See @windmill-overview.mdc for full platform details.
+
+## Language-Specific Guides
+
+- Backend (Rust): @backend/rust-best-practices.mdc + @backend/summarized_schema.txt
+- Frontend (Svelte 5): @frontend/svelte5-best-practices.mdc
diff --git a/backend/CLAUDE.md b/backend/CLAUDE.md
new file mode 100644
index 0000000000..1fe509a0d6
--- /dev/null
+++ b/backend/CLAUDE.md
@@ -0,0 +1,12 @@
+# Backend Development (Rust)
+
+## Core Principles
+
+- Follow @rust-best-practices.mdc for detailed guidelines
+- Database schema reference: @summarized_schema.txt
+- The API routes prefixes are all listed in windmill-api/src/lib.rs
+
+## Adding New Features
+
+1. Update database schema with migration if necessary
+2. Update backend/windmill-api/openapi.yaml after modifying API endpoints
diff --git a/.cursor/rules/rust-best-practices.mdc b/backend/rust-best-practices.mdc
similarity index 100%
rename from .cursor/rules/rust-best-practices.mdc
rename to backend/rust-best-practices.mdc
diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
new file mode 100644
index 0000000000..2caad3c0cf
--- /dev/null
+++ b/frontend/CLAUDE.md
@@ -0,0 +1,77 @@
+# Frontend Development (Svelte 5)
+
+## Core Principles
+
+- Follow @svelte5-best-practices.mdc for detailed guidelines
+- Use Runes ($state, $derived, $effect) for reactivity
+- Keep components small and focused
+- Always use keys in {#each} blocks
+
+## UI Guidelines
+
+- Follow existing design system
+- Use consistent spacing and colors
+
+## Backend API
+
+- If you need to call the backend API, you can find the available routes in ../backend/windmill-api/openapi.yaml
+- You can also use the associated types and services that are auto generated from the openapi file. They are in src/lib/gen/\*gen.ts files
+
+### OpenAPI Autogeneration
+
+Windmill automatically generates TypeScript types and services from the OpenAPI specification.
+
+#### Service Generation Pattern
+
+The autogeneration follows this pattern:
+
+- **Tag** → **Service Name**: The OpenAPI tag becomes the service name with "Service" suffix
+- **operationId** → **Method Name**: The operationId becomes the method name in the service
+
+#### Example
+
+Given this OpenAPI specification:
+
+```yaml
+/w/{workspace}/audit/list:
+  get:
+    summary: list audit logs (requires admin privilege)
+    operationId: listAuditLogs
+    tags:
+      - audit
+    parameters:
+      - $ref: '#/components/parameters/WorkspaceId'
+      - $ref: '#/components/parameters/Page'
+      - $ref: '#/components/parameters/PerPage'
+      - $ref: '#/components/parameters/Before'
+      - $ref: '#/components/parameters/After'
+      - $ref: '#/components/parameters/Username'
+      - $ref: '#/components/parameters/Operation'
+      - name: operations
+        in: query
+        description: comma separated list of exact operations to include
+        schema:
+          type: string
+```
+
+This generates:
+
+- **Service**: `AuditService` (from tag "audit")
+- **Method**: `listAuditLogs` (from operationId)
+
+#### Method Arguments
+
+The generated method arguments correspond to the OpenAPI parameters:
+
+```typescript
+AuditService.listAuditLogs({
+  workspace: string,           // from WorkspaceId parameter
+  page?: number,              // from Page parameter
+  perPage?: number,           // from PerPage parameter
+  before?: string,            // from Before parameter
+  after?: string,             // from After parameter
+  username?: string,          // from Username parameter
+  operation?: string,         // from Operation parameter
+  operations?: string         // from operations parameter
+})
+```
diff --git a/.cursor/rules/svelte5-best-practices.mdc b/frontend/svelte5-best-practices.mdc
similarity index 100%
rename from .cursor/rules/svelte5-best-practices.mdc
rename to frontend/svelte5-best-practices.mdc
diff --git a/.cursor/rules/windmill-overview.mdc b/windmill-overview.mdc
similarity index 100%
rename from .cursor/rules/windmill-overview.mdc
rename to windmill-overview.mdc

From 4ae5928788831196672e212b32ca410afab640e0 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Thu, 19 Jun 2025 16:15:35 +0200
Subject: [PATCH 24/24] fix: ai button in inline script editor to open AI chat
 in flow builder (#5989)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: ai button in inline script editor to open AI chat in flow builder

- Add openAiChat prop to ScriptGen component to control AI button behavior
- When openAiChat=true, AI button opens AI chat manager in script mode
- When openAiChat=false (default), AI button shows direct generation popover
- Update flow builder (FlowModuleComponent) to use openAiChat=true for inline scripts
- App builder continues using direct generation (openAiChat defaults to false)
- Import AIMode enum properly to fix TypeScript error

Resolves request from @HugoCasa to make flow AI button open chat instead of direct generation while keeping app builder unchanged.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Ruben Fiszel <rubenfiszel@users.noreply.github.com>

* refactor: extract repeated logic into reusable functions in ScriptGen.svelte

- Created determineModeFromEditor() to centralize mode setting logic
- Added callCopilot() to unify copilot function calls with proper typing
- Added handleAiButtonClick() as single handler for button click scenarios
- Created safeLocalStorageOperation() for generic localStorage error handling
- Added getPromptStorageKey() for centralized storage key generation

Reduces code duplication and improves maintainability.

Co-authored-by: HugoCasa <HugoCasa@users.noreply.github.com>

* refactor: extract duplicate determineModeFromEditor call in handleAiButtonClick

Remove code duplication by calling determineModeFromEditor() once at the
beginning of handleAiButtonClick() instead of in both conditional branches.

Co-authored-by: HugoCasa <HugoCasa@users.noreply.github.com>

* nits

* better color

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Ruben Fiszel <rubenfiszel@users.noreply.github.com>
Co-authored-by: HugoCasa <HugoCasa@users.noreply.github.com>
Co-authored-by: HugoCasa <hugo@casademont.ch>
---
 frontend/src/lib/components/EditorBar.svelte  |   6 +-
 .../lib/components/copilot/ScriptGen.svelte   | 158 ++++++++++--------
 .../copilot/chat/AIChatManager.svelte.ts      |   1 +
 .../flows/content/FlowModuleComponent.svelte  |   1 +
 4 files changed, 91 insertions(+), 75 deletions(-)

diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 5b5681b3b3..91044ead7a 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -76,6 +76,7 @@
 		diffMode?: boolean
 		showHistoryDrawer?: boolean
 		right?: import('svelte').Snippet
+		openAiChat?: boolean
 	}
 
 	let {
@@ -98,7 +99,8 @@
 		lastDeployedCode = undefined,
 		diffMode = false,
 		showHistoryDrawer = $bindable(false),
-		right
+		right,
+		openAiChat = false
 	}: Props = $props()
 
 	let contextualVariablePicker: ItemPicker | undefined = $state()
@@ -810,7 +812,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{/if}
 
 			{#if customUi?.aiGen != false}
-				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
+				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} {openAiChat} />
 			{/if}
 
 			<EditorSettings {customUi} />
diff --git a/frontend/src/lib/components/copilot/ScriptGen.svelte b/frontend/src/lib/components/copilot/ScriptGen.svelte
index 02e48cf20a..cb7ab6c946 100644
--- a/frontend/src/lib/components/copilot/ScriptGen.svelte
+++ b/frontend/src/lib/components/copilot/ScriptGen.svelte
@@ -28,6 +28,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import { onDestroy } from 'svelte'
 	import ProviderModelSelector from './chat/ProviderModelSelector.svelte'
+	import { aiChatManager, AIMode } from './chat/AIChatManager.svelte'
 
 	interface Props {
 		// props
@@ -38,6 +39,7 @@
 		inlineScript?: boolean
 		args: Record<string, any>
 		transformer?: boolean
+		openAiChat?: boolean
 	}
 
 	let {
@@ -47,7 +49,8 @@
 		diffEditor,
 		inlineScript = false,
 		args,
-		transformer = false
+		transformer = false,
+		openAiChat = false
 	}: Props = $props()
 
 	run(() => {
@@ -72,6 +75,54 @@
 	run(() => {
 		trimmedDesc = funcDesc.trim()
 	})
+	async function callCopilot() {
+		if (mode === 'edit') {
+			await copilot(
+				{
+					// @ts-ignore
+					language: transformer && lang === 'frontend' ? 'transformer' : lang!,
+					description: trimmedDesc,
+					code: editor?.getCode() || '',
+					dbSchema: dbSchema,
+					type: 'edit',
+					workspace: $workspaceStore!
+				},
+				generatedCode,
+				abortController
+			)
+		} else {
+			await copilot(
+				{
+					// @ts-ignore
+					language: transformer && lang === 'frontend' ? 'transformer' : lang!,
+					description: trimmedDesc,
+					dbSchema: dbSchema,
+					type: 'gen',
+					workspace: $workspaceStore!
+				},
+				generatedCode,
+				abortController
+			)
+		}
+	}
+
+	function handleAiButtonClick() {
+		if (editor && isInitialCode(editor.getCode())) {
+			mode = 'gen'
+		} else {
+			mode = 'edit'
+		}
+
+		if (openAiChat) {
+			// Open the AI chat in script mode
+			aiChatManager.openChat()
+			aiChatManager.changeMode(AIMode.SCRIPT)
+		} else {
+			setTimeout(() => {
+				autoResize()
+			}, 0)
+		}
+	}
 
 	async function onGenerate(closePopup: () => void) {
 		if (trimmedDesc.length <= 0) {
@@ -82,34 +133,7 @@
 			genLoading = true
 			blockPopupOpen = true
 			abortController = new AbortController()
-			if (mode === 'edit') {
-				await copilot(
-					{
-						// @ts-ignore
-						language: transformer && lang === 'frontend' ? 'transformer' : lang!,
-						description: trimmedDesc,
-						code: editor?.getCode() || '',
-						dbSchema: dbSchema,
-						type: 'edit',
-						workspace: $workspaceStore!
-					},
-					generatedCode,
-					abortController
-				)
-			} else {
-				await copilot(
-					{
-						// @ts-ignore
-						language: transformer && lang === 'frontend' ? 'transformer' : lang!,
-						description: trimmedDesc,
-						dbSchema: dbSchema,
-						type: 'gen',
-						workspace: $workspaceStore!
-					},
-					generatedCode,
-					abortController
-				)
-			}
+			await callCopilot()
 			setupDiff()
 			diffEditor?.setModified($generatedCode)
 			blockPopupOpen = false
@@ -205,14 +229,27 @@
 	}
 
 	let promptHistory: string[] = $state([])
-	function getPromptHistory() {
+
+	function getPromptStorageKey() {
+		return 'prompts-' + lang
+	}
+
+	function safeLocalStorageOperation<T>(operation: () => T, defaultValue?: T): T | undefined {
 		try {
-			promptHistory = JSON.parse(localStorage.getItem('prompts-' + lang) || '[]')
+			return operation()
 		} catch (e) {
 			console.error('error interacting with local storage', e)
+			return defaultValue
 		}
 	}
 
+	function getPromptHistory() {
+		const storageKey = getPromptStorageKey()
+		promptHistory =
+			safeLocalStorageOperation(() => JSON.parse(localStorage.getItem(storageKey) || '[]'), []) ||
+			[]
+	}
+
 	function savePrompt() {
 		if (promptHistory.includes(trimmedDesc)) {
 			return
@@ -221,20 +258,14 @@
 		while (promptHistory.length > 5) {
 			promptHistory.pop()
 		}
-		try {
-			localStorage.setItem('prompts-' + lang, JSON.stringify(promptHistory))
-		} catch (e) {
-			console.error('error interacting with local storage', e)
-		}
+		const storageKey = getPromptStorageKey()
+		safeLocalStorageOperation(() => localStorage.setItem(storageKey, JSON.stringify(promptHistory)))
 	}
 
 	function clearPromptHistory() {
 		promptHistory = []
-		try {
-			localStorage.setItem('prompts-' + lang, JSON.stringify(promptHistory))
-		} catch (e) {
-			console.error('error interacting with local storage', e)
-		}
+		const storageKey = getPromptStorageKey()
+		safeLocalStorageOperation(() => localStorage.setItem(storageKey, JSON.stringify(promptHistory)))
 	}
 	run(() => {
 		lang && getPromptHistory()
@@ -266,6 +297,12 @@
 		;(dbSchema as any).publicOnly = detail === 'true'
 	}
 
+	const aiChatScriptModeClasses = $derived(
+		aiChatManager.mode === AIMode.SCRIPT && aiChatManager.isOpen
+			? 'dark:bg-violet-900 bg-violet-100'
+			: ''
+	)
+
 	onDestroy(() => {
 		abortController?.abort()
 	})
@@ -343,22 +380,9 @@
 				<Button
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
-					btnClasses={genLoading ? '!px-3 z-[5000]' : '!px-2'}
-					propagateEvent={!genLoading}
-					on:click={genLoading
-						? () => abortController?.abort()
-						: () => {
-								if (editor) {
-									if (isInitialCode(editor.getCode())) {
-										mode = 'gen'
-									} else {
-										mode = 'edit'
-									}
-								}
-								setTimeout(() => {
-									autoResize()
-								}, 0)
-							}}
+					btnClasses={twMerge(genLoading ? '!px-3 z-[5000]' : '!px-2', aiChatScriptModeClasses)}
+					propagateEvent={!genLoading && !openAiChat}
+					on:click={genLoading ? () => abortController?.abort() : handleAiButtonClick}
 					bind:element={button}
 					iconOnly
 					title="Generate code from prompt"
@@ -371,27 +395,15 @@
 					title="Generate code from prompt"
 					btnClasses={twMerge(
 						'!font-medium',
-						genLoading ? 'z-[5000]' : 'text-violet-800 dark:text-violet-400'
+						genLoading ? 'z-[5000]' : 'text-violet-800 dark:text-violet-400',
+						aiChatScriptModeClasses
 					)}
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
 					spacingSize="md"
 					startIcon={genLoading ? { icon: Ban } : { icon: Wand2 }}
-					propagateEvent={!genLoading}
-					on:click={genLoading
-						? () => abortController?.abort()
-						: () => {
-								if (editor) {
-									if (isInitialCode(editor.getCode())) {
-										mode = 'gen'
-									} else {
-										mode = 'edit'
-									}
-								}
-								setTimeout(() => {
-									autoResize()
-								}, 0)
-							}}
+					propagateEvent={!genLoading && !openAiChat}
+					on:click={genLoading ? () => abortController?.abort() : handleAiButtonClick}
 					bind:element={button}
 					{iconOnly}
 				>
diff --git a/frontend/src/lib/components/copilot/chat/AIChatManager.svelte.ts b/frontend/src/lib/components/copilot/chat/AIChatManager.svelte.ts
index 450939ea58..df32c88fdd 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatManager.svelte.ts
+++ b/frontend/src/lib/components/copilot/chat/AIChatManager.svelte.ts
@@ -58,6 +58,7 @@ class AIChatManager {
 
 	mode = $state<AIMode>(AIMode.NAVIGATOR)
 	size = $state<number>(localStorage.getItem('ai-chat-open') === 'true' ? this.DEFAULT_SIZE : 0)
+	readonly isOpen = $derived(this.size > 0)
 	savedSize = $state<number>(0)
 	instructions = $state<string>('')
 	pendingPrompt = $state<string>('')
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 47a16c15fa..c613b56ed9 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -369,6 +369,7 @@
 							on:hideDiffMode={hideDiffMode}
 							{lastDeployedCode}
 							{diffMode}
+							openAiChat
 						/>
 					</div>
 				{/if}