fix: delete_variable endpoint also deleting resource

2026-09-16 08:02:28 +00:00 · 2026-03-05 18:00:22 +01:00
455 changed files with 2902 additions and 4885 deletions
@@ -9,7 +9,23 @@ export async function main() {
 '{"$schema":"https://json-schema.org/draft/2020-12/schema","properties":{},"required":[],"type":"object"}',
 '',
 '',
-'f/leafs/ts', 500001, 'bun', '');
+'f/leafs/ts', 500001, 'nativets', '');
+
+INSERT INTO public.script(workspace_id, created_by, content, schema, summary, description, path, hash, language, lock) VALUES (
+'test-workspace',
+'test-user',
+'
+package main
+
+import "fmt"
+
+func main() {
+    fmt.Println("Go leaf")
+}',
+'{"$schema":"https://json-schema.org/draft/2020-12/schema","properties":{},"required":[],"type":"object"}',
+'',
+'',
+'f/leafs/go', 500002, 'go', '');

 INSERT INTO public.script(workspace_id, created_by, content, schema, summary, description, path, hash, language, lock) VALUES (
 'test-workspace',
@@ -36,9 +52,3 @@ function main() {
 '',
 'f/leafs/php', 500004, 'php', '');

-- Link scripts to named workspace dependencies (name: "test")
-INSERT INTO dependency_map (workspace_id, importer_path, importer_kind, imported_path, importer_node_id) VALUES
-    ('test-workspace', 'f/leafs/ts', 'script', 'dependencies/test.package.json', ''),
-    ('test-workspace', 'f/leafs/python', 'script', 'dependencies/test.requirements.in', ''),
-    ('test-workspace', 'f/leafs/php', 'script', 'dependencies/test.composer.json', '');
-
@@ -1,17 +1,21 @@
 mod workspace_dependencies {

-    use sqlx::{Pool, Postgres};
-    use tokio_stream::StreamExt;
-    use windmill_common::scripts::ScriptLang;
-    use windmill_common::workspace_dependencies::WorkspaceDependencies;
-    use windmill_dep_map::workspace_dependencies::NewWorkspaceDependencies;
    use windmill_test_utils::in_test_worker;
    use windmill_test_utils::init_client;
    use windmill_test_utils::listen_for_completed_jobs;
-
+    use sqlx::{Pool, Postgres};
+    use tokio_stream::StreamExt;
+    use windmill_common::scripts::ScriptLang;
+    use windmill_dep_map::workspace_dependencies::NewWorkspaceDependencies;
    mod deps {
        pub const REQUIREMENTS_IN: &'static str = "tiny==0.1.3";
-        pub const REQUIREMENTS_IN_V2: &'static str = "tiny==0.2.0";
+        //     pub const GO_MOD: &'static str = r##"
+        // module example.com/project
+
+        // go 1.20
+
+        // require github.com/gin-gonic/gin v1.8.1
+        // "##;

        pub const PACKAGE_JSON: &'static str = r##"
    {
@@ -21,18 +25,6 @@ mod workspace_dependencies {
        "express": "^4.17.1"
      }
    }
-    "##;
-
-        #[allow(dead_code)]
-        pub const PACKAGE_JSON_V2: &'static str = r##"
-    {
-      "name": "example-project",
-      "version": "2.0.0",
-      "dependencies": {
-        "express": "^4.18.0",
-        "axios": "^1.0.0"
-      }
-    }
    "##;

        pub const COMPOSER_JSON: &'static str = r##"
@@ -45,510 +37,9 @@ mod workspace_dependencies {
    "##;
    }

-    // =========================================================================
-    // CRUD Tests
-    // =========================================================================
-
-    /// Test: Create workspace dependencies and verify they are stored correctly.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_create_workspace_dependencies(db: Pool<Postgres>) -> anyhow::Result<()> {
-        let id = NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN.into(),
-            name: Some("test-deps".to_owned()),
-            description: Some("Test dependencies".to_owned()),
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        assert!(id > 0, "Should return a valid ID");
-
-        // Verify it was stored correctly
-        let stored = WorkspaceDependencies::get(id, "test-workspace".to_owned(), &db).await?;
-        assert_eq!(stored.name, Some("test-deps".to_owned()));
-        assert_eq!(stored.content, deps::REQUIREMENTS_IN);
-        assert_eq!(stored.language, ScriptLang::Python3);
-
-        Ok(())
-    }
-
-    /// Test: Create unnamed (default) workspace dependencies.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_create_unnamed_workspace_dependencies(db: Pool<Postgres>) -> anyhow::Result<()> {
-        let id = NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Bun,
-            content: deps::PACKAGE_JSON.into(),
-            name: None, // Unnamed = default
-            description: None,
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        assert!(id > 0, "Should return a valid ID");
-
-        // Verify it was stored correctly
-        let stored = WorkspaceDependencies::get(id, "test-workspace".to_owned(), &db).await?;
-        assert_eq!(stored.name, None);
-        assert_eq!(stored.language, ScriptLang::Bun);
-
-        Ok(())
-    }
-
-    /// Test: List workspace dependencies returns all active entries.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_list_workspace_dependencies(db: Pool<Postgres>) -> anyhow::Result<()> {
-        // Create multiple workspace dependencies
-        for (lang, content, name) in [
-            (ScriptLang::Python3, deps::REQUIREMENTS_IN, Some("python-deps")),
-            (ScriptLang::Bun, deps::PACKAGE_JSON, Some("bun-deps")),
-            (ScriptLang::Bun, deps::PACKAGE_JSON, None), // Default bun deps
-        ] {
-            NewWorkspaceDependencies {
-                workspace_id: "test-workspace".into(),
-                language: lang,
-                content: content.into(),
-                name: name.map(|s| s.to_owned()),
-                description: None,
-            }
-            .create(
-                (
-                    "test@test.com".to_owned(),
-                    "u/test".to_owned(),
-                    "test".to_owned(),
-                ),
-                db.clone(),
-            )
-            .await?;
-        }
-
-        let list = WorkspaceDependencies::list("test-workspace", &db).await?;
-        assert_eq!(list.len(), 3, "Should have 3 workspace dependencies");
-
-        Ok(())
-    }
-
-    /// Test: Archive workspace dependencies marks them as archived.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_archive_workspace_dependencies(db: Pool<Postgres>) -> anyhow::Result<()> {
-        // Create workspace dependencies
-        let _id = NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN.into(),
-            name: Some("to-archive".to_owned()),
-            description: None,
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        // Verify it exists
-        let list_before = WorkspaceDependencies::list("test-workspace", &db).await?;
-        assert_eq!(list_before.len(), 1);
-
-        // Archive it
-        WorkspaceDependencies::archive(
-            Some("to-archive".to_owned()),
-            ScriptLang::Python3,
-            "test-workspace",
-            &db,
-        )
-        .await?;
-
-        // Verify it's no longer in the active list
-        let list_after = WorkspaceDependencies::list("test-workspace", &db).await?;
-        assert_eq!(list_after.len(), 0, "Archived deps should not appear in list");
-
-        Ok(())
-    }
-
-    /// Test: Delete workspace dependencies permanently removes them.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_delete_workspace_dependencies(db: Pool<Postgres>) -> anyhow::Result<()> {
-        // Create workspace dependencies
-        let id = NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN.into(),
-            name: Some("to-delete".to_owned()),
-            description: None,
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        // Verify it exists
-        assert!(
-            WorkspaceDependencies::get(id, "test-workspace".to_owned(), &db)
-                .await
-                .is_ok()
-        );
-
-        // Delete it
-        WorkspaceDependencies::delete(
-            Some("to-delete".to_owned()),
-            ScriptLang::Python3,
-            "test-workspace",
-            &db,
-        )
-        .await?;
-
-        // Verify it's gone (should error)
-        let result = WorkspaceDependencies::get(id, "test-workspace".to_owned(), &db).await;
-        assert!(result.is_err(), "Deleted deps should not be retrievable");
-
-        Ok(())
-    }
-
-    // =========================================================================
-    // Version History Tests
-    // =========================================================================
-
-    /// Test: Creating new version archives the old one.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_versioning_archives_previous(db: Pool<Postgres>) -> anyhow::Result<()> {
-        // Create first version
-        let id1 = NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN.into(),
-            name: Some("versioned".to_owned()),
-            description: Some("Version 1".to_owned()),
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        // Create second version with same name
-        let id2 = NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN_V2.into(),
-            name: Some("versioned".to_owned()),
-            description: Some("Version 2".to_owned()),
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        assert_ne!(id1, id2, "Should create a new entry");
-
-        // List should only show the active (latest) version
-        let list = WorkspaceDependencies::list("test-workspace", &db).await?;
-        assert_eq!(list.len(), 1, "Should only have 1 active entry");
-        assert_eq!(list[0].content, deps::REQUIREMENTS_IN_V2);
-
-        // History should show both versions
-        let history = WorkspaceDependencies::get_history(
-            Some("versioned".to_owned()),
-            ScriptLang::Python3,
-            "test-workspace",
-            &db,
-        )
-        .await?;
-        assert_eq!(history.len(), 2, "Should have 2 versions in history");
-
-        Ok(())
-    }
-
-    /// Test: Description is inherited from previous version if not provided.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_description_inheritance(db: Pool<Postgres>) -> anyhow::Result<()> {
-        // Create first version with description
-        NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN.into(),
-            name: Some("inherit-desc".to_owned()),
-            description: Some("Original description".to_owned()),
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        // Create second version without description
-        let id2 = NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN_V2.into(),
-            name: Some("inherit-desc".to_owned()),
-            description: None, // Should inherit
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        let stored = WorkspaceDependencies::get(id2, "test-workspace".to_owned(), &db).await?;
-        assert_eq!(
-            stored.description,
-            Some("Original description".to_owned()),
-            "Description should be inherited from previous version"
-        );
-
-        Ok(())
-    }
-
-    // =========================================================================
-    // Workspace Isolation Tests
-    // =========================================================================
-
-    /// Test: Workspace dependencies are isolated between workspaces.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_workspace_isolation(db: Pool<Postgres>) -> anyhow::Result<()> {
-        // Create another workspace
-        sqlx::query!(
-            "INSERT INTO workspace (id, name, owner) VALUES ('other-workspace', 'other', 'test-user')"
-        )
-        .execute(&db)
-        .await?;
-        sqlx::query!("INSERT INTO workspace_settings (workspace_id) VALUES ('other-workspace')")
-            .execute(&db)
-            .await?;
-
-        // Create deps in test-workspace
-        NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN.into(),
-            name: Some("shared-name".to_owned()),
-            description: None,
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        // Create deps in other-workspace with same name
-        NewWorkspaceDependencies {
-            workspace_id: "other-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN_V2.into(),
-            name: Some("shared-name".to_owned()),
-            description: None,
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        // Each workspace should have exactly 1 entry
-        let list1 = WorkspaceDependencies::list("test-workspace", &db).await?;
-        let list2 = WorkspaceDependencies::list("other-workspace", &db).await?;
-
-        assert_eq!(list1.len(), 1);
-        assert_eq!(list2.len(), 1);
-
-        // Content should be different
-        assert_eq!(list1[0].content, deps::REQUIREMENTS_IN);
-        assert_eq!(list2[0].content, deps::REQUIREMENTS_IN_V2);
-
-        Ok(())
-    }
-
-    // =========================================================================
-    // Language-specific Tests
-    // =========================================================================
-
-    /// Test: Different languages can have same-named workspace dependencies.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_same_name_different_languages(db: Pool<Postgres>) -> anyhow::Result<()> {
-        // Create Python deps
-        NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Python3,
-            content: deps::REQUIREMENTS_IN.into(),
-            name: Some("common".to_owned()),
-            description: None,
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        // Create Bun deps with same name
-        NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Bun,
-            content: deps::PACKAGE_JSON.into(),
-            name: Some("common".to_owned()),
-            description: None,
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        let list = WorkspaceDependencies::list("test-workspace", &db).await?;
-        assert_eq!(list.len(), 2, "Should have 2 entries (different languages)");
-
-        let python_deps: Vec<_> = list
-            .iter()
-            .filter(|d| d.language == ScriptLang::Python3)
-            .collect();
-        let bun_deps: Vec<_> = list
-            .iter()
-            .filter(|d| d.language == ScriptLang::Bun)
-            .collect();
-
-        assert_eq!(python_deps.len(), 1);
-        assert_eq!(bun_deps.len(), 1);
-
-        Ok(())
-    }
-
-    /// Test: Nativets and Bunnative use Bun workspace dependencies.
-    #[sqlx::test(fixtures("base"))]
-    async fn test_nativets_uses_bun_deps(db: Pool<Postgres>) -> anyhow::Result<()> {
-        use windmill_common::worker::Connection;
-
-        // Create Bun deps (which Nativets should use)
-        NewWorkspaceDependencies {
-            workspace_id: "test-workspace".into(),
-            language: ScriptLang::Bun,
-            content: deps::PACKAGE_JSON.into(),
-            name: None,
-            description: None,
-        }
-        .create(
-            (
-                "test@test.com".to_owned(),
-                "u/test".to_owned(),
-                "test".to_owned(),
-            ),
-            db.clone(),
-        )
-        .await?;
-
-        // Query for Nativets should return Bun deps
-        let result = WorkspaceDependencies::get_latest(
-            None,
-            ScriptLang::Nativets,
-            "test-workspace",
-            Connection::Sql(db.clone()),
-        )
-        .await?;
-
-        assert!(result.is_some(), "Nativets should find Bun deps");
-        assert_eq!(result.unwrap().language, ScriptLang::Bun);
-
-        Ok(())
-    }
-
-    // =========================================================================
-    // Path Generation Tests
-    // =========================================================================
-
-    /// Test: to_path generates correct paths for named and unnamed deps.
-    #[test]
-    fn test_to_path_generation() {
-        // Unnamed (default) deps
-        let path = WorkspaceDependencies::to_path(&None, ScriptLang::Python3).unwrap();
-        assert_eq!(path, "dependencies/requirements.in");
-
-        let path = WorkspaceDependencies::to_path(&None, ScriptLang::Bun).unwrap();
-        assert_eq!(path, "dependencies/package.json");
-
-        let path = WorkspaceDependencies::to_path(&None, ScriptLang::Php).unwrap();
-        assert_eq!(path, "dependencies/composer.json");
-
-        // Named deps
-        let path =
-            WorkspaceDependencies::to_path(&Some("custom".to_owned()), ScriptLang::Python3).unwrap();
-        assert_eq!(path, "dependencies/custom.requirements.in");
-
-        let path =
-            WorkspaceDependencies::to_path(&Some("custom".to_owned()), ScriptLang::Bun).unwrap();
-        assert_eq!(path, "dependencies/custom.package.json");
-    }
-
-    /// Test: to_path returns error for unsupported languages.
-    #[test]
-    fn test_to_path_unsupported_language() {
-        // Deno doesn't support workspace dependencies
-        let result = WorkspaceDependencies::to_path(&None, ScriptLang::Deno);
-        assert!(result.is_err(), "Deno should not support workspace deps");
-    }
-
-    /// Test E2E: Creating named workspace dependencies triggers re-lock jobs for dependent scripts.
-    ///
-    /// This test:
-    /// 1. Uses fixture with Python, Bun, PHP scripts linked to named workspace deps via dependency_map
-    /// 2. Creates named workspace dependencies for each language
-    /// 3. Verifies dependency jobs are triggered for all linked scripts
    #[cfg(feature = "python")]
    #[sqlx::test(fixtures("base", "workspace_dependencies_leafs"))]
+    #[ignore]
    async fn basic_manual_named(db: Pool<Postgres>) -> anyhow::Result<()> {
        let ((_client, port, _s), db, mut completed) = (
            init_client(db.clone()).await,
@@ -556,69 +47,67 @@ mod workspace_dependencies {
            listen_for_completed_jobs(&db).await,
        );

-        // Create named workspace dependencies for Python, Bun, and PHP
-        // These will trigger dependency jobs for scripts linked via dependency_map
-        for (lang, content) in [
+        for (idx, (l, c)) in [
            (ScriptLang::Python3, deps::REQUIREMENTS_IN),
            (ScriptLang::Bun, deps::PACKAGE_JSON),
            (ScriptLang::Php, deps::COMPOSER_JSON),
-        ] {
-            NewWorkspaceDependencies {
+            // (ScriptLang::Go, deps::GO_MOD),
+        ]
+        .iter()
+        .enumerate()
+        {
+            let id = NewWorkspaceDependencies {
                workspace_id: "test-workspace".into(),
-                language: lang,
-                content: content.into(),
+                language: *l,
+                content: (*c).into(),
                name: Some("test".to_owned()),
                description: None,
            }
-            .create(
-                (
-                    "test@test.com".to_owned(),
-                    "u/test-user".to_owned(),
-                    "test-user".to_owned(),
-                ),
-                db.clone(),
-            )
-            .await?;
+            .create(("".to_owned(), "".to_owned(), "".to_owned()), db.clone())
+            .await
+            .unwrap();
+
+            assert_eq!(idx + 1, id as usize);
        }

-        // Wait for 3 dependency jobs (one per script in fixture)
-        let mut completed_paths = vec![];
-        for _ in 0..3 {
-            let job_id = in_test_worker(db, async { completed.next().await }, port)
-                .await
-                .expect("Expected a dependency job to complete");
+        // Wait for 4 jobs.
+        // Creating those dependencies will trigger redeployment of all scripts in workspace_dependencies_leafs.sql
+        in_test_worker(
+            db,
+            async {
+                completed.next().await;
+                completed.next().await;
+                completed.next().await;
+                // completed.next().await;
+            },
+            port,
+        )
+        .await;

-            let job_path = sqlx::query_scalar!(
-                "SELECT runnable_path FROM v2_job WHERE id = $1",
-                job_id
-            )
-            .fetch_one(db)
-            .await?;
+        // Verify all scripts have correct locks
+        // let mut langs = vec![];
+        // for r in sqlx::query!(
+        //     r#"SELECT language AS "language: ScriptLang",lock FROM script WHERE archived = false"#
+        // )
+        // .fetch_all(db)
+        // .await
+        // .unwrap()
+        // {
+        //     match r.language {
+        //         ScriptLang::Python3 => assert_eq!("", &r.lock.unwrap()),
+        //         ScriptLang::Go => todo!(),
+        //         ScriptLang::Bun => todo!(),
+        //         ScriptLang::Bunnative => todo!(),
+        //         ScriptLang::Php => todo!(),
+        //         _ => panic!("Unsupported language"),
+        //     }

-            if let Some(path) = job_path {
-                completed_paths.push(path);
-            }
-        }
+        //     langs.push(r.language);
+        // }

-        // Verify all 3 scripts received dependency jobs
-        completed_paths.sort();
-        let expected = vec![
-            "f/leafs/php".to_string(),
-            "f/leafs/python".to_string(),
-            "f/leafs/ts".to_string(),
-        ];
-
-        assert_eq!(
-            completed_paths, expected,
-            "All scripts should have received dependency jobs"
-        );
-
-        // Verify no extra jobs were created
-        let total_jobs = sqlx::query_scalar!("SELECT COUNT(*) FROM v2_job")
-            .fetch_one(db)
-            .await?;
-
-        assert_eq!(total_jobs, Some(3), "Should have exactly 3 jobs");
+        // langs.sort();
+        // // Just tiny additional verification for peace of mind.
+        // assert_eq!(langs.as_slice(), &[]);

        Ok(())
    }
@@ -536,13 +536,6 @@ async fn delete_variable(
    )
    .execute(&mut *tx)
    .await?;
-    sqlx::query!(
-        "DELETE FROM resource WHERE path = $1 AND workspace_id = $2",
-        path,
-        w_id
-    )
-    .execute(&mut *tx)
-    .await?;
    audit_log(
        &mut *tx,
        &authed,
@@ -2626,7 +2626,6 @@ export async function push(
        let [_basePath, changes] = queue.shift()!;
        const promise = (async () => {
          const alreadySynced: string[] = [];
-          const deletedVarsResPaths: string[] = [];
          const isRawApp = isRawAppFile(changes[0].path);
          if (isRawApp) {
            const deleteRawApp = changes.find(
@@ -2871,23 +2870,12 @@ export async function push(
                    name: change.path.split(SEP)[1],
                  });
                  break;
-                case "resource": {
-                  const resourcePath = removeSuffix(target, ".resource.json");
-                  try {
-                    await wmill.deleteResource({
-                      workspace: workspaceId,
-                      path: resourcePath,
-                    });
-                  } catch (e: any) {
-                    if (e?.status === 404 && deletedVarsResPaths.includes(resourcePath)) {
-                      log.debug(`Resource ${resourcePath} already deleted by linked variable`);
-                    } else {
-                      throw e;
-                    }
-                  }
-                  deletedVarsResPaths.push(resourcePath);
+                case "resource":
+                  await wmill.deleteResource({
+                    workspace: workspaceId,
+                    path: removeSuffix(target, ".resource.json"),
+                  });
                  break;
-                }
                case "resource-type":
                  await wmill.deleteResourceType({
                    workspace: workspaceId,
@@ -3024,23 +3012,12 @@ export async function push(
                  });
                  break;
                }
-                case "variable": {
-                  const variablePath = removeSuffix(target, ".variable.json");
-                  try {
-                    await wmill.deleteVariable({
-                      workspace: workspaceId,
-                      path: variablePath,
-                    });
-                  } catch (e: any) {
-                    if (e?.status === 404 && deletedVarsResPaths.includes(variablePath)) {
-                      log.debug(`Variable ${variablePath} already deleted by linked resource`);
-                    } else {
-                      throw e;
-                    }
-                  }
-                  deletedVarsResPaths.push(variablePath);
+                case "variable":
+                  await wmill.deleteVariable({
+                    workspace: workspaceId,
+                    path: removeSuffix(target, ".variable.json"),
+                  });
                  break;
-                }
                case "user": {
                  const users = await wmill.listUsers({
                    workspace: workspaceId,
@@ -408,8 +408,7 @@ async function remove(_opts: GlobalOptions, name: string) {

 async function whoami(_opts: GlobalOptions) {
  await requireLogin(_opts);
-  const whoamiInfo = await wmill.globalWhoami();
-  log.info(JSON.stringify(whoamiInfo, null, 2));
+  log.info(await wmill.globalWhoami());
  const activeName = await getActiveWorkspaceName(_opts);
  log.info("Active: " + colors.green.bold(activeName || "none"));
 }
@@ -1,39 +0,0 @@
-# Svelte 5 Migration - Bug Report
-# Testing started: 2026-03-02
-
-## Warnings (not blocking but worth fixing)
-
-1. [WARNING] binding_property_non_reactive in Grid.svelte:372:5
-   - `bind:this={moveResizes[item.id]}` is binding to a non-reactive property
-   - File: src/lib/components/apps/svelte-grid/Grid.svelte
-   - Appears multiple times in App editor
-   - Status: NOT FIXED (non-blocking warning)
-
-2. [WARNING] legacy_recursive_reactive_block in RecomputeAllComponents.svelte
-   - Migrated `$:` reactive block that both accesses and updates the same reactive value
-   - File: src/lib/components/apps/editor/RecomputeAllComponents.svelte
-   - May cause recursive updates when converted to $effect
-   - Status: NOT FIXED (non-blocking warning)
-
-3. [WARNING] ownership_invalid_mutation in SchemaForm.svelte:70:16
-   - Mutating unbound props (`schema`) is strongly discouraged
-   - Parent: src/lib/components/ApiConnectForm.svelte should use `bind:schema={...}`
-   - Appears when opening PostgreSQL resource creation form
-   - Status: NOT FIXED (non-blocking warning)
-
-4. [WARNING] ownership_invalid_binding in InputTransformSchemaForm.svelte
-   - Passes `schema` to InputTransformForm.svelte with `bind:`, but parent Pane.svelte didn't declare `schema` as binding
-   - Appears in flow editor when adding a TypeScript step
-   - Status: NOT FIXED (non-blocking warning)
-
-## Bugs
-
-1. [BUG] state_descriptors_fixed in Chart.svelte (Queue metrics drawer)
-   - Error: "Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`."
-   - Triggered by: Clicking "Queue metrics" on /workers page
-   - File: src/lib/components/chartjs-wrappers/Chart.svelte
-   - Root cause: Chart.js's `listenArrayEvents` calls Object.defineProperty on data arrays that are Svelte 5 $state proxies, which reject non-standard property descriptors
-   - Fix: Use $state.snapshot() to pass plain copies of data and options to Chart.js
-   - Status: FIXED
-
-
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
-
 	import { createEventDispatcher } from 'svelte'
 	import { Button, Drawer } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
@@ -8,37 +6,32 @@
 	import AppConnectInner from './AppConnectInner.svelte'
 	import DarkModeObserver from './DarkModeObserver.svelte'

-	interface Props {
-		expressOAuthSetup?: boolean
-	}
+	export let expressOAuthSetup = false

-	let { expressOAuthSetup = false }: Props = $props()
+	let drawer: Drawer
+	let resourceType = ''
+	let step = 1
+	let disabled = false
+	let isGoogleSignin = false
+	let manual = true

-	let drawer: Drawer | undefined = $state()
-	let resourceType = $state('')
-	let step = $state(1)
-	let disabled = $state(false)
-	let isGoogleSignin = $state(false)
-	let manual = $state(true)
+	let appConnectInner: AppConnectInner | undefined = undefined

-	let appConnectInner: AppConnectInner | undefined = $state(undefined)
-
-	let rtToLoad: string | undefined = $state('')
+	let rtToLoad: string | undefined = ''
 	export async function open(rt?: string) {
 		rtToLoad = rt
-		drawer?.openDrawer?.()
+		drawer.openDrawer?.()
 	}

+	$: appConnectInner && onRtToLoadChange(rtToLoad)
+
 	function onRtToLoadChange(rtToLoad: string | undefined) {
 		appConnectInner?.open(rtToLoad)
 	}

 	const dispatch = createEventDispatcher()

-	let darkMode: boolean = $state(false)
-	run(() => {
-		appConnectInner && onRtToLoadChange(rtToLoad)
-	})
+	let darkMode: boolean = false
 </script>

 <DarkModeObserver bind:darkMode />
@@ -54,7 +47,7 @@
 	<DrawerContent
 		title="Add a resource"
 		id="add-resource-drawer"
-		on:close={drawer?.closeDrawer}
+		on:close={drawer.closeDrawer}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
 	>
@@ -75,7 +68,7 @@
 					<Button variant="default" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
 				{/if}
 				{#if isGoogleSignin}
-					<button {disabled} onclick={appConnectInner?.next}>
+					<button {disabled} on:click={appConnectInner?.next}>
 						<img
 							class="h-10 w-auto object-contain"
 							src={darkMode ? '/google_signin_dark.png' : '/google_signin_light.png'}
@@ -405,7 +405,6 @@
 			}
 		} else {
 			if (!path) {
-				if (step == 2) return
 				throw Error('Path is not set')
 			}
 			let exists = await VariableService.existsVariable({
@@ -3,7 +3,7 @@
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
 	import { Button } from '$lib/components/common'
 	import { workspaceStore } from '$lib/stores'
-	import { onMount, untrack } from 'svelte'
+	import { onMount } from 'svelte'

 	interface Props {
 		resourceType?: string | undefined
@@ -21,8 +21,8 @@

 	let darkMode: boolean = $state(false)

-	if (untrack(() => workspace)) {
-		$workspaceStore = untrack(() => workspace)
+	if (workspace) {
+		$workspaceStore = workspace
 	}

 	onMount(async () => {
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import AppEditor from './apps/editor/AppEditor.svelte'
 	import type { AppEditorProps } from './apps/types'

 	let { app: oldApp, ...props }: AppEditorProps = $props()

-	let app = $state(untrack(() => oldApp))
+	let app = $state(oldApp)
 </script>

 <AppEditor {app} {...props} />
@@ -1,20 +1,16 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 	import Toggle from './Toggle.svelte'
 	import SettingCard from './instanceSettings/SettingCard.svelte'

-	interface Props {
-		value: any;
-	}
+	export let value: any

-	let { value = $bindable() }: Props = $props();
+	$: enabled = value != undefined

+	let org = ''

-	let org = $state('')
-
+	$: changeOrg(org)

 	function changeOrg(org) {
 		if (value) {
@@ -34,14 +30,10 @@
 			}
 		}
 	}
-	let enabled = $derived(value != undefined)
-	run(() => {
-		changeOrg(org)
-	});
 </script>

 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'authelia'} after={true} /></div><Toggle
 			checked={enabled}
@@ -1,18 +1,16 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
 	import SettingCard from './instanceSettings/SettingCard.svelte'

-	interface Props {
-		value: any;
-	}
-
-	let { value = $bindable() }: Props = $props();
+	export let value: any

+	$: enabled = value != undefined

+	// Initialize org from existing auth_url
+	$: org = value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? ''

+	$: changeOrg(org)

 	function changeOrg(org) {
 		if (value && org) {
@@ -32,16 +30,10 @@
 			}
 		}
 	}
-	let enabled = $derived(value != undefined)
-	// Initialize org from existing auth_url
-	let org = $derived(value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? '')
-	run(() => {
-		changeOrg(org)
-	});
 </script>

 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'authentik'} after={true} /></div><Toggle
 			checked={enabled}
@@ -1,48 +1,38 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { ExternalLink } from 'lucide-svelte'
 	import OauthScopes from './OauthScopes.svelte'

-	interface Props {
-		connect_config?: {
+	export let connect_config: {
 		scopes: string[]
 		auth_url: string
 		token_url: string
 		req_body_auth: boolean
 		extra_params: { tenant_id: string }
 		extra_params_callback: Record<string, any>
-	};
-	}
-
-	let { connect_config = $bindable({
+	} = {
 		scopes: ['offline_access'],
 		auth_url: '',
 		token_url: '',
 		req_body_auth: true,
 		extra_params: { tenant_id: '' },
 		extra_params_callback: {}
-	}) }: Props = $props();
+	}

-	run(() => {
-		if (!connect_config) {
-			connect_config = {
-				scopes: ['offline_access'],
-				auth_url: '',
-				token_url: '',
-				req_body_auth: true,
-				extra_params: { tenant_id: '' },
-				extra_params_callback: {}
-			}
+	$: if (!connect_config) {
+		connect_config = {
+			scopes: ['offline_access'],
+			auth_url: '',
+			token_url: '',
+			req_body_auth: true,
+			extra_params: { tenant_id: '' },
+			extra_params_callback: {}
 		}
-	});
+	}

-	run(() => {
-		if (connect_config.extra_params.tenant_id) {
-			connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`
-			connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`
-		}
-	});
+	$: if (connect_config.extra_params.tenant_id) {
+		connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`
+		connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`
+	}
 </script>

 <label class="flex flex-col gap-1" for="tenant-id">
@@ -1,22 +1,12 @@
 <script lang="ts">
 	import Tooltip from './Tooltip.svelte'
-	interface Props {
-		twBgColor?: string;
-		twTextColor?: string;
-		tooltip?: string | undefined;
-		children?: import('svelte').Snippet;
-	}
-
-	let {
-		twBgColor = 'bg-blue-200',
-		twTextColor = 'text-secondary',
-		tooltip = undefined,
-		children
-	}: Props = $props();
+	export let twBgColor = 'bg-blue-200'
+	export let twTextColor = 'text-secondary'
+	export let tooltip: string | undefined = undefined
 </script>

 <span class="{twBgColor} {twTextColor} text-2xs rounded px-1 whitespace-nowrap">
-	{@render children?.()}
+	<slot />
 	{#if tooltip && tooltip != ''}
 		<Tooltip>{tooltip}</Tooltip>
 	{/if}
@@ -5,21 +5,12 @@
 	import Alert from './common/alert/Alert.svelte'
 	import { createEventDispatcher } from 'svelte'

-	interface Props {
-		email: string;
-		username: string;
-		isConflict?: boolean;
-		noPadding?: boolean;
-	}
+	export let email: string
+	export let username: string
+	export let isConflict = false
+	export let noPadding = false

-	let {
-		email,
-		username = $bindable(),
-		isConflict = false,
-		noPadding = false
-	}: Props = $props();
-
-	let loading = $state(false)
+	let loading = false

 	let usernameInfo:
 		| {
@@ -29,7 +20,7 @@
 					username: string
 				}[]
 		  }
-		| undefined = $state(undefined)
+		| undefined = undefined

 	function handleKeyUp(event: KeyboardEvent) {
 		const key = event.key
@@ -92,7 +83,7 @@
 	<input
 		type="text"
 		class="mb-4"
-		onkeyup={handleKeyUp}
+		on:keyup={handleKeyUp}
 		bind:value={username}
 		disabled={isConflict}
 	/>
@@ -13,25 +13,25 @@

 	const dispatch = createEventDispatcher()

-	let edit: boolean = $state(false)
-	let name: string = $state('')
-	let value: string = $state('')
+	let edit: boolean = false
+	let name: string = ''
+	let value: string = ''

 	export function initNew(): void {
 		edit = false
 		name = ''
 		value = ''
-		drawer?.openDrawer()
+		drawer.openDrawer()
 	}

 	export function editVariable(editName: string, editValue: string): void {
 		edit = true
 		name = editName
 		value = editValue
-		drawer?.openDrawer()
+		drawer.openDrawer()
 	}

-	let drawer: Drawer | undefined = $state()
+	let drawer: Drawer

 	async function updateVariable(): Promise<void> {
 		await WorkspaceService.setEnvironmentVariable({
@@ -48,7 +48,7 @@
 		)
 		dispatch('update')

-		drawer?.closeDrawer()
+		drawer.closeDrawer()
 		setTimeout(() => {
 			dispatch('update')
 		}, 5000)
@@ -58,7 +58,7 @@
 <Drawer bind:this={drawer} size="900px">
 	<DrawerContent
 		title={edit ? `Update contextual variable ${name}` : 'Create a contextual variable'}
-		on:close={drawer?.closeDrawer}
+		on:close={drawer.closeDrawer}
 	>
 		<div class="flex flex-col gap-8">
 			{#if !edit}
@@ -1,32 +1,28 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import OauthExtraParams from './OauthExtraParams.svelte'
 	import OauthScopes from './OauthScopes.svelte'
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'

-	let { connect_config = $bindable({
+	export let connect_config = {
 		scopes: [],
 		auth_url: '',
 		token_url: '',
 		req_body_auth: false,
 		extra_params: {},
 		extra_params_callback: {}
-	}) } = $props();
+	}

-	run(() => {
-		if (!connect_config) {
-			connect_config = {
-				scopes: [],
-				auth_url: '',
-				token_url: '',
-				req_body_auth: false,
-				extra_params: {},
-				extra_params_callback: {}
-			}
+	$: if (!connect_config) {
+		connect_config = {
+			scopes: [],
+			auth_url: '',
+			token_url: '',
+			req_body_auth: false,
+			extra_params: {},
+			extra_params_callback: {}
 		}
-	});
+	}
 </script>

 <div class="flex flex-col gap-6">
@@ -46,12 +42,12 @@
 			bind:value={connect_config.token_url}
 		/>
 	</label>
-	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs">Scopes</span>
 		<OauthScopes bind:scopes={connect_config.scopes} />
 	</label>
-	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -61,14 +57,14 @@
 		>
 		<OauthExtraParams bind:extra_params={connect_config.extra_params} />
 	</label>
-	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 		>
 		<OauthExtraParams bind:extra_params={connect_config.extra_params_callback} />
 	</label>
-	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Payload <Tooltip
@@ -5,7 +5,6 @@
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
 	import Portal from '$lib/components/Portal.svelte'
-	import { untrack } from 'svelte'

 	interface Props {
 		placement?: PopoverPlacement
@@ -34,10 +33,10 @@
 		children,
 		overlay
 	}: Props = $props()
-	const [popperRef, popperContent] = createPopperActions({ placement: untrack(() => placement) })
+	const [popperRef, popperContent] = createPopperActions({ placement })

 	const popperOptions: PopperOptions<{}> = {
-		placement: untrack(() => placement),
+		placement,
 		strategy: 'fixed',
 		modifiers: [
 			{ name: 'offset', options: { offset: [8, 8] } },
@@ -1,12 +1,10 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import OauthExtraParams from './OauthExtraParams.svelte'
 	import OauthScopes from './OauthScopes.svelte'
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'

-	let { login_config = $bindable({
+	export let login_config = {
 		scopes: [],
 		auth_url: '',
 		token_url: '',
@@ -14,21 +12,19 @@
 		req_body_auth: false,
 		extra_params: {},
 		extra_params_callback: {}
-	}) } = $props();
+	}

-	run(() => {
-		if (!login_config) {
-			login_config = {
-				scopes: [],
-				auth_url: '',
-				token_url: '',
-				userinfo_url: '',
-				req_body_auth: false,
-				extra_params: {},
-				extra_params_callback: {}
-			}
+	$: if (!login_config) {
+		login_config = {
+			scopes: [],
+			auth_url: '',
+			token_url: '',
+			userinfo_url: '',
+			req_body_auth: false,
+			extra_params: {},
+			extra_params_callback: {}
 		}
-	});
+	}
 </script>

 <label class="block pb-6">
@@ -55,12 +51,12 @@
 		bind:value={login_config.userinfo_url}
 	/>
 </label>
-<!-- svelte-ignore a11y_label_has_associated_control -->
+<!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Scopes</span>
 	<OauthScopes bind:scopes={login_config.scopes} />
 </label>
-<!-- svelte-ignore a11y_label_has_associated_control -->
+<!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -70,14 +66,14 @@
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params} />
 </label>
-<!-- svelte-ignore a11y_label_has_associated_control -->
+<!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params_callback} />
 </label>
-<!-- svelte-ignore a11y_label_has_associated_control -->
+<!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Payload <Tooltip
@@ -1,5 +1,4 @@
 <script lang="ts" module>
-	import { untrack } from 'svelte'
 	function validate(values: TableEditorValues, dbSchema?: DBSchema) {
 		const columnNamesErrs = values.columns.flatMap((column) => {
 			const isUnique = values.columns.filter((c) => c.name === column.name).length === 1
@@ -93,7 +92,7 @@
 		computePreview
 	}: Props = $props()

-	const columnTypes = DB_TYPES[untrack(() => dbType)]
+	const columnTypes = DB_TYPES[dbType]
 	const defaultColumnType = (
 		{
 			postgresql: 'BIGSERIAL',
@@ -103,10 +102,10 @@
 			mysql: 'varchar',
 			duckdb: 'string'
 		} satisfies Record<DbType, string>
-	)[untrack(() => dbType)]
+	)[dbType]

 	const values: TableEditorValues = $state(
-		$state.snapshot(untrack(() => initialValues)) ?? {
+		$state.snapshot(initialValues) ?? {
 			name: '',
 			columns: [],
 			foreignKeys: []
@@ -123,8 +122,8 @@
 			...(primaryKey && { primaryKey })
 		})
 	}
-	if (!untrack(() => initialValues)) {
-		addColumn({ name: 'id', primaryKey: untrack(() => features)?.primaryKeys })
+	if (!initialValues) {
+		addColumn({ name: 'id', primaryKey: features?.primaryKeys })
 	}

 	const errors: ReturnType<typeof validate> = $derived(validate(values, dbSchema))
@@ -69,7 +69,6 @@
 	let randomId = 'datetarget-' + Math.random().toString(36).substring(7)
 </script>

-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex flex-row gap-1 items-center w-full"
 	id={randomId}
@@ -119,7 +119,6 @@
 	let randomId = 'datetarget-' + Math.random().toString(36).substring(7)
 </script>

-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex flex-row gap-1 items-center w-full relative"
 	id={randomId}
@@ -6,20 +6,16 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import DefaultScriptsInner from './DefaultScriptsInner.svelte'

-	interface Props {
-		placement?: 'left' | 'right'
-		size?: 'xs3' | 'xs2'
-		noText?: boolean
-	}
+	let drawer: Drawer
+	export let placement: 'left' | 'right' = 'left'

-	let { placement = 'left', size = 'xs2', noText = false }: Props = $props()
-
-	let drawer: Drawer | undefined = $state()
+	export let size: 'xs3' | 'xs2' = 'xs2'
+	export let noText = false
 </script>

 {#if $userStore?.is_admin || $userStore?.is_super_admin}
 	<Drawer bind:this={drawer} {placement}>
-		<DrawerContent title="Edit Default Scripts" on:close={drawer?.closeDrawer}>
+		<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
 			<DefaultScriptsInner />
 		</DrawerContent>
 	</Drawer>
@@ -6,11 +6,8 @@
 	import { defaultScriptLanguages } from '$lib/scripts'
 	import Alert from './common/alert/Alert.svelte'

-	interface Props {
-		small?: boolean;
-	}
-
-	let { small = false }: Props = $props();
+	export let small = false
+	$: langs = computeLangs($defaultScripts)

 	function computeLangs(defaultScripts: WorkspaceDefaultScripts | undefined): Script['language'][] {
 		const allLangs = Object.keys(defaultScriptLanguages) as Script['language'][]
@@ -33,7 +30,6 @@
 			requestBody: $defaultScripts
 		})
 	}
-	let langs = $derived(computeLangs($defaultScripts))
 </script>

 <Alert title="Global to workspace" type="info" class="mb-4" size={small ? 'xs' : 'sm'}>
@@ -51,7 +47,7 @@
 			<div>
 				{#if i > 0}
 					<button
-						onclick={() => changePosition(i ?? 0, true)}
+						on:click={() => changePosition(i ?? 0, true)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move up"
 					>
@@ -60,7 +56,7 @@
 				{/if}
 				{#if i < langs.length - 1}
 					<button
-						onclick={() => changePosition(i ?? 0, false)}
+						on:click={() => changePosition(i ?? 0, false)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move down">&downarrow;</button
 					>
@@ -2,19 +2,11 @@
 	import { ExternalLink } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'

-
-	interface Props {
-		link?: string | undefined;
-		class?: string;
-		children?: import('svelte').Snippet;
-	}
-
-	let { link = undefined, class: className = '', children }: Props = $props();
-	
+	export let link: string | undefined = undefined
 </script>

-<div class={twMerge('text-xs text-primary font-normal', className)}>
-	{@render children?.()}
+<div class={twMerge('text-xs text-primary font-normal', $$props.class)}>
+	<slot />
 	{#if link}
 		<a href={link} target="_blank" class="whitespace-nowrap"
 			>Learn more <ExternalLink size={12} class="inline-block" /></a
@@ -22,7 +22,7 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { onDestroy, onMount, setContext, untrack } from 'svelte'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
-	import { page } from '$app/state'
+	import { page } from '$app/stores'
 	import { getUserExt } from '$lib/user'
 	import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte'
 	import FlowModuleSchemaMap from './flows/map/FlowModuleSchemaMap.svelte'
@@ -169,12 +169,11 @@
 	let loadingCodebaseButton = $state(false)
 	let lastCommandId = ''

-	const untrackedInitial = untrack(() => initial)
-	if (untrackedInitial) {
-		if (untrackedInitial.type == 'script') {
-			replaceScript(untrackedInitial.script)
-		} else if (untrackedInitial.type == 'flow') {
-			replaceFlow(untrackedInitial.flow)
+	if (initial) {
+		if (initial.type == 'script') {
+			replaceScript(initial.script)
+		} else if (initial.type == 'flow') {
+			replaceFlow(initial.flow)
 		}
 		modeInitialized = true
 	}
@@ -597,9 +596,9 @@
 			}
 		})
 	}
-	let token = $derived(page.url.searchParams.get('wm_token') ?? undefined)
-	let workspace = $derived(page.url.searchParams.get('workspace') ?? undefined)
-	let themeDarkRaw = $derived(page.url.searchParams.get('activeColorTheme'))
+	let token = $derived($page.url.searchParams.get('wm_token') ?? undefined)
+	let workspace = $derived($page.url.searchParams.get('workspace') ?? undefined)
+	let themeDarkRaw = $derived($page.url.searchParams.get('activeColorTheme'))
 	let themeDark = $derived(themeDarkRaw == '2' || themeDarkRaw == '4')

 	$effect.pre(() => {
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import MenuItem from '$lib/components/meltComponents/MenuItem.svelte'
 	import { melt } from '@melt-ui/svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -19,7 +18,7 @@
 	const {
 		elements: { subTrigger, subMenu },
 		states: { subOpen }
-	} = untrack(() => builders).createSubmenu()
+	} = builders.createSubmenu()

 	let subItems = $derived((item.submenuItems ?? []).filter((i) => !i.hide))
 </script>
@@ -76,7 +76,7 @@
 		ids: { menu: dropdownId }
 	} = createDropdownMenu({
 		positioning: {
-			placement: untrack(() => placement)
+			placement
 		},
 		loop: true,
 		onOpenChange: ({ next }) => {
@@ -4,13 +4,9 @@
 	import { Hourglass } from 'lucide-svelte'
 	import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte'

-	interface Props {
-		duration_ms: number;
-		self_wait_time_ms?: number | undefined;
-		aggregate_wait_time_ms?: number | undefined;
-	}
-
-	let { duration_ms, self_wait_time_ms = undefined, aggregate_wait_time_ms = undefined }: Props = $props();
+	export let duration_ms: number
+	export let self_wait_time_ms: number | undefined = undefined
+	export let aggregate_wait_time_ms: number | undefined = undefined
 </script>

 <div>
@@ -113,10 +113,10 @@
 		}
 	})

-	let lastArgs = $state.snapshot(untrack(() => otherArgs))
+	let lastArgs = $state.snapshot(otherArgs)

 	let timeout: number | undefined = $state()
-	let nargs = $state($state.snapshot(untrack(() => otherArgs)))
+	let nargs = $state($state.snapshot(otherArgs))
 	$effect(() => {
 		otherArgs
 		untrack(() => clearTimeout(timeout))
@@ -286,7 +286,7 @@
 		}
 	}

-	let jsonView: boolean = $state(untrack(() => customUi)?.jsonOnly == true)
+	let jsonView: boolean = $state(customUi?.jsonOnly == true)
 	let schemaString: string = $state(JSON.stringify(schema, null, '\t'))
 	let error: string | undefined = $state(undefined)
 	let editor: SimpleEditor | undefined = $state(undefined)
@@ -296,8 +296,8 @@
 		editor?.setCode(schemaString)
 	}

-	const editTabDefaultSize = untrack(() => noPreview) ? 100 : 50
-	editPanelSize = untrack(() => editTab) ? (untrack(() => editPanelInitialSize) ?? editTabDefaultSize) : 0
+	const editTabDefaultSize = noPreview ? 100 : 50
+	editPanelSize = editTab ? (editPanelInitialSize ?? editTabDefaultSize) : 0
 	let inputPanelSize = $state(100 - editPanelSize)
 	let editPanelSizeSmooth = tweened(editPanelSize, {
 		duration: 150
@@ -592,7 +592,7 @@
 												{argName}
 												{#if !uiOnly}
 													<div onclick={stopPropagation(preventDefault(bubble('click')))}>
-														<Popover placement="bottom-end" closeButton>
+														<Popover placement="bottom-end" containerClasses="p-4" closeButton>
 															{#snippet trigger()}
 																<Button
 																	variant="subtle"
@@ -189,11 +189,11 @@
 		}
 	})

-	let lang = $state(scriptLangToEditorLang(untrack(() => scriptLang)))
+	let lang = $state(scriptLangToEditorLang(scriptLang))

-	let filePath = $state(computePath(untrack(() => path)))
+	let filePath = $state(computePath(path))

-	let initialPath: string | undefined = $state(untrack(() => path))
+	let initialPath: string | undefined = $state(path)

 	let websockets: WebSocket[] = []
 	let languageClients: MonacoLanguageClient[] = []
@@ -209,7 +209,7 @@
 	let destroyed = false
 	const uri = computeUri(
 		untrack(() => filePath),
-		untrack(() => scriptLang)
+		scriptLang
 	)

 	console.log('uri', uri)
@@ -1,40 +1,32 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { type Job } from '$lib/gen'
 	import { isScriptPreview } from '$lib/utils'
 	import { onDestroy } from 'svelte'

-	
-	
-	
-	
-	interface Props {
-		job?: Job | undefined;
-		/** Execution duration of current active job (in ms) */
-		executionDuration?: number;
-		/** Is current job running more than specified value in `longDefinition` seconds */
-		longRunning?: boolean;
-		/** What do we count as "long" (in ms)*/
-		longDefinition?: number;
-		/** How often component updates execution duration (in ms)
+	export let job: Job | undefined = undefined
+	/** Execution duration of current active job (in ms) */
+	export let executionDuration: number = 0
+	/** Is current job running more than specified value in `longDefinition` seconds */
+	export let longRunning: boolean = false
+	/** What do we count as "long" (in ms)*/
+	export let longDefinition: number = 30_000
+	/** How often component updates execution duration (in ms)
 	 *   Higher value -> more efficient component is, less accuracy it has
 	 *   Lower value -> less efficient component is, more accuracy it has
 	 */
-		updateResolution?: number;
-	}
-
-	let {
-		job = undefined,
-		executionDuration = $bindable(0),
-		longRunning = $bindable(false),
-		longDefinition = 30_000,
-		updateResolution = 5_000
-	}: Props = $props();
+	export let updateResolution: number = 5_000

 	let startedAt: number | undefined = undefined
-	let busy: boolean = $state(false)
+	let busy: boolean = false
 	let interval: number | undefined
+	// Detect when execution of job started
+	$: if (
+		!busy &&
+		job &&
+		'running' in job &&
+		(job.job_kind == 'script' || isScriptPreview(job?.job_kind))
+	)
+		start(job)

 	function start(job: Job) {
 		busy = true
@@ -58,14 +50,4 @@
 		// Clear the interval when the component is destroyed
 		clearInterval(interval)
 	})
-	// Detect when execution of job started
-	run(() => {
-		if (
-			!busy &&
-			job &&
-			'running' in job &&
-			(job.job_kind == 'script' || isScriptPreview(job?.job_kind))
-		)
-			start(job)
-	});
 </script>
@@ -1,7 +1,6 @@
 <!-- Used to avoid height jitter when loading monaco asynchronously -->

 <script lang="ts">
-	import { untrack } from 'svelte'
 	import { getOS } from '$lib/utils'
 	import { MONACO_Y_PADDING } from './vscode'

@@ -46,7 +45,7 @@

 	const charWidth = 9 // try to match as closely as possible to monaco editor

-	const lineHeight = untrack(() => fontSize) * GOLDEN_LINE_HEIGHT_RATIO
+	const lineHeight = fontSize * GOLDEN_LINE_HEIGHT_RATIO

 	let [clientWidth, clientHeight] = $state([0, 0])
 	let showHorizontalScrollbar = $derived(
@@ -5,37 +5,19 @@
 	import Tooltip from './meltComponents/Tooltip.svelte'
 	import { InfoIcon } from 'lucide-svelte'

-	interface Props {
-		label: string;
-		format?: string;
-		contentEncoding?: string;
-		type?: string | undefined;
-		disabled?: boolean;
-		required?: boolean;
-		displayType?: boolean;
-		labelClass?: string;
-		prettify?: boolean;
-		simpleTooltip?: string | undefined;
-		lightHeader?: boolean;
-		SimpleTooltipIcon?: any;
-		simpleTooltipIconClass?: string;
-	}
-
-	let {
-		label,
-		format = '',
-		contentEncoding = '',
-		type = undefined,
-		disabled = false,
-		required = false,
-		displayType = true,
-		labelClass = '',
-		prettify = false,
-		simpleTooltip = undefined,
-		lightHeader = false,
-		SimpleTooltipIcon = InfoIcon,
-		simpleTooltipIconClass = ''
-	}: Props = $props();
+	export let label: string
+	export let format: string = ''
+	export let contentEncoding = ''
+	export let type: string | undefined = undefined
+	export let disabled: boolean = false
+	export let required = false
+	export let displayType: boolean = true
+	export let labelClass: string = ''
+	export let prettify = false
+	export let simpleTooltip: string | undefined = undefined
+	export let lightHeader = false
+	export let SimpleTooltipIcon = InfoIcon
+	export let simpleTooltipIconClass = ''
 </script>

 <div class="inline-flex flex-row items-baseline truncated">
@@ -72,11 +54,9 @@
 	{#if !emptyString(simpleTooltip)}
 		<Tooltip class="ml-2" placement="bottom">
 			<SimpleTooltipIcon size="14" class={'-mb-0.5 ' + simpleTooltipIconClass} />
-			{#snippet text()}
-						<span class="text-xs" >
-					{simpleTooltip}
-				</span>
-					{/snippet}
+			<span class="text-xs" slot="text">
+				{simpleTooltip}
+			</span>
 		</Tooltip>
 	{/if}
 </div>
@@ -228,9 +228,7 @@
 		}
 	}

-	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(
-		untrack(() => savedPrimarySchedule)
-	) // kept for legacy reasons
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule) // kept for legacy reasons
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	const simplifiedPoll = writable(false)

@@ -603,8 +601,8 @@
 	const selectionManager = new SelectionManager()
 	const selectedIdStore = $derived(selectionManager.getSelectedId())
 	// Initialize with selected id if provided
-	if (untrack(() => selectedId)) {
-		selectionManager.selectId(untrack(() => selectedId) ?? '')
+	if (selectedId) {
+		selectionManager.selectId(selectedId)
 	} else {
 		selectionManager.selectId('settings-metadata')
 	}
@@ -613,11 +611,11 @@
 		return selectedIdStore
 	}

-	const previewArgsStore = $state({ val: untrack(() => initialArgs) })
+	const previewArgsStore = $state({ val: initialArgs })
 	const scriptEditorDrawer = writable<ScriptEditorDrawer | undefined>(undefined)
 	const flowEditorDrawer = writable<FlowEditorDrawer | undefined>(undefined)
-	const history = initHistory(untrack(() => flowStore).val)
-	const pathStore = writable<string>(untrack(() => pathStoreInit) ?? initialPath)
+	const history = initHistory(flowStore.val)
+	const pathStore = writable<string>(pathStoreInit ?? initialPath)
 	const captureOn = writable<boolean>(false)
 	const showCaptureHint = writable<boolean | undefined>(undefined)
 	const flowInputEditorStateStore = writable<FlowInputEditorState>({
@@ -644,15 +642,15 @@
 		scriptEditorDrawer,
 		flowEditorDrawer,
 		history,
-		flowStateStore: untrack(() => flowStateStore),
-		flowStore: untrack(() => flowStore),
+		flowStateStore,
+		flowStore,
 		pathStore,
 		stepsInputArgs,
 		saveDraft,
 		initialPathStore,
 		fakeInitialPath,
 		flowInputsStore: writable<FlowInput>({}),
-		customUi: untrack(() => customUi),
+		customUi,
 		insertButtonOpen,
 		executionCount: writable(0),
 		flowInputEditorState: flowInputEditorStateStore,
@@ -663,13 +661,10 @@
 	})

 	// Set up NoteEditor context for note editing capabilities
-	const noteEditor = new NoteEditor(
-		untrack(() => flowStore),
-		() => {
-			// Enable notes display when a note is created
-			flowEditor?.enableNotes?.()
-		}
-	)
+	const noteEditor = new NoteEditor(flowStore, () => {
+		// Enable notes display when a note is created
+		flowEditor?.enableNotes?.()
+	})
 	setNoteEditorContext(noteEditor)

 	setContext(
@@ -683,9 +678,9 @@
 			[
 				{ type: 'webhook', path: '', isDraft: false },
 				{ type: 'default_email', path: '', isDraft: false },
-				...(untrack(() => draftTriggersFromUrl) ?? savedFlow?.draft?.draft_triggers ?? [])
+				...(draftTriggersFromUrl ?? savedFlow?.draft?.draft_triggers ?? [])
 			],
-			untrack(() => selectedTriggerIndexFromUrl),
+			selectedTriggerIndexFromUrl,
 			saveSessionDraft
 		)
 	)
@@ -809,7 +804,7 @@
 		onClick: () => void
 	}> = []

-	if (untrack(() => customUi).topBar?.extraDeployOptions != false) {
+	if (customUi.topBar?.extraDeployOptions != false) {
 		if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
 			dropdownItems.push({
 				label: 'Exit & see details',
@@ -817,14 +812,14 @@
 			})
 		}

-		if (!untrack(() => newFlow)) {
+		if (!newFlow) {
 			dropdownItems.push({
 				label: 'Fork',
 				onClick: () => window.open(`/flows/add?template=${initialPath}`)
 			})
 		}

-		if (!untrack(() => newFlow) && !isCloudHosted() && !isRuleActive('DisableWorkspaceForking')) {
+		if (!newFlow && !isCloudHosted() && !isRuleActive('DisableWorkspaceForking')) {
 			dropdownItems.push({
 				label: 'Edit in workspace fork',
 				onClick: () => window.open(buildForkEditUrl('flow', initialPath))
@@ -1041,10 +1036,10 @@
 	}

 	let stepHistoryLoader = new StepHistoryLoader(
-		untrack(() => loadedFromHistoryFromUrl)?.stepsState ?? {},
-		untrack(() => loadedFromHistoryFromUrl)?.flowJobInitial,
+		loadedFromHistoryFromUrl?.stepsState ?? {},
+		loadedFromHistoryFromUrl?.flowJobInitial,
 		saveSessionDraft,
-		untrack(() => noInitial)
+		noInitial
 	)
 	setStepHistoryLoaderContext(stepHistoryLoader)

@@ -9,38 +9,23 @@
 	import { dfs } from './flows/dfs'
 	import { workspaceStore } from '$lib/stores'

-
-	interface Props {
-		flow: {
+	export let flow: {
 		summary: string
 		description?: string
 		value: FlowValue
 		schema?: any
 		path?: string
-	};
-		overflowAuto?: boolean;
-		noSide?: boolean;
-		download?: boolean;
-		noGraph?: boolean;
-		triggerNode?: boolean;
-		stepDetail?: FlowModule | string | undefined;
-		workspace?: string | undefined;
-		minHeight?: number;
-		noBorder?: boolean;
 	}

-	let {
-		flow,
-		overflowAuto = false,
-		noSide = false,
-		download = false,
-		noGraph = false,
-		triggerNode = false,
-		stepDetail = $bindable(undefined),
-		workspace = $workspaceStore,
-		minHeight = 400,
-		noBorder = false
-	}: Props = $props();
+	export let overflowAuto = false
+	export let noSide = false
+	export let download = false
+	export let noGraph = false
+	export let triggerNode = false
+	export let stepDetail: FlowModule | string | undefined = undefined
+	export let workspace: string | undefined = $workspaceStore
+	export let minHeight = 400
+	export let noBorder = false

 	const dispatch = createEventDispatcher()
 </script>
@@ -19,20 +19,17 @@
 	import HighlightTheme from './HighlightTheme.svelte'
 	import LanguageIcon from './common/languageIcons/LanguageIcon.svelte'

-	interface Props {
-		schema?: any | undefined
-		stepDetail?: FlowModule | string | undefined
-		jobScriptHash?: string | undefined
-	}
+	export let schema: any | undefined = undefined

-	let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined }: Props = $props()
-	let codeViewer: Drawer | undefined = $state()
+	export let stepDetail: FlowModule | string | undefined = undefined
+	export let jobScriptHash: string | undefined = undefined
+	let codeViewer: Drawer
 </script>

 <HighlightTheme />

 <Drawer bind:this={codeViewer} size="900px">
-	<DrawerContent title={'Expanded Code'} on:close={codeViewer?.closeDrawer}>
+	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
 		{#if stepDetail && typeof stepDetail != 'string'}
 			{#if stepDetail.value.type == 'script'}
 				<div class="mb-4">
@@ -186,7 +183,7 @@
 					<Button
 						unifiedSize="sm"
 						variant="subtle"
-						onClick={codeViewer?.openDrawer}
+						onClick={codeViewer.openDrawer}
 						startIcon={{ icon: Expand }}>Expand</Button
 					>
 				</div>
@@ -224,7 +221,7 @@
 						<Button
 							unifiedSize="sm"
 							variant="subtle"
-							onClick={codeViewer?.openDrawer}
+							onClick={codeViewer.openDrawer}
 							startIcon={{ icon: Expand }}>Expand</Button
 						>
 					</div>
@@ -3,11 +3,7 @@

 	import FieldHeader from './FieldHeader.svelte'

-	interface Props {
-		schema: Schema | { [key: string]: unknown } | undefined;
-	}
-
-	let { schema }: Props = $props();
+	export let schema: Schema | { [key: string]: unknown } | undefined
 </script>

 <ul class="my-2">
@@ -62,7 +62,7 @@
 	const timelineItems = $derived(timelineCompute?.items ?? undefined)
 	const timelineNow = $derived(timelineCompute?.now ?? Date.now())

-	let moduleTracker = new ChangeTracker($state.snapshot(untrack(() => job).raw_flow?.modules ?? []))
+	let moduleTracker = new ChangeTracker($state.snapshot(job.raw_flow?.modules ?? []))
 	$effect(() => {
 		readFieldsRecursively(job.raw_flow?.modules ?? [])
 		untrack(() => moduleTracker.track($state.snapshot(job.raw_flow?.modules ?? [])))
@@ -123,7 +123,7 @@
 	}

 	let timelineAvailableWidths = $state<Record<string, number>>({})
-	let lastJobId: string | undefined = $state(untrack(() => job).id)
+	let lastJobId: string | undefined = $state(job.id)

 	const timelinelWidth = $derived.by(() => {
 		const widths = Object.values(timelineAvailableWidths)
@@ -4,13 +4,9 @@
 	import AnimatedButton from './common/button/AnimatedButton.svelte'
 	import { twMerge } from 'tailwind-merge'

-	interface Props {
-		connecting: boolean;
-		id?: undefined | string;
-		wrapperClasses?: string;
-	}
-
-	let { connecting, id = undefined, wrapperClasses = '' }: Props = $props();
+	export let connecting: boolean
+	export let id: undefined | string = undefined
+	export let wrapperClasses = ''
 </script>

 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
@@ -62,7 +62,7 @@
 		showLogsWithResult = false
 	}: Props = $props()

-	let lastJobId: string = untrack(() => jobId)
+	let lastJobId: string = jobId

 	let retryStatus = $state({ val: {} })
 	let globalRefreshes: Record<string, ((clear, root) => Promise<void>)[]> = $state({})
@@ -71,11 +71,11 @@
 		flowState,
 		suspendStatus,
 		retryStatus,
-		hideDownloadInGraph: untrack(() => hideDownloadInGraph),
-		hideNodeDefinition: untrack(() => hideNodeDefinition),
-		hideTimeline: untrack(() => hideTimeline),
-		hideJobId: untrack(() => hideJobId),
-		hideDownloadLogs: untrack(() => hideDownloadLogs)
+		hideDownloadInGraph,
+		hideNodeDefinition,
+		hideTimeline,
+		hideJobId,
+		hideDownloadLogs
 	})

 	function loadOwner(path: string) {
@@ -181,7 +181,7 @@

 	let resultStreams: Record<string, string | undefined> = $state({})

-	if (untrack(() => onResultStreamUpdate) == undefined) {
+	if (onResultStreamUpdate == undefined) {
 		onResultStreamUpdate = ({
 			jobId,
 			result_stream
@@ -234,7 +234,7 @@
 	})

 	let jobResults: any[] = $state(
-		untrack(() => flowJobIds)?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []
+		flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []
 	)

 	let retry_selected = $state('')
@@ -805,7 +805,7 @@

 	let destroyed = false

-	updateRecursiveRefresh(untrack(() => jobId))
+	updateRecursiveRefresh(jobId)

 	async function updateJobId() {
 		if (jobId !== job?.id || innerModules == undefined) {
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import { type FlowValue, FlowService } from '$lib/gen'
 	import { Tab, Tabs, TabContent } from './common'
 	import SchemaViewer from './SchemaViewer.svelte'
@@ -52,14 +51,13 @@
 	}: Props = $props()

 	let open: { [id: number]: boolean } = {}
-	const untrackedInitialOpen = untrack(() => initialOpen)
-	if (untrackedInitialOpen) {
-		open[untrackedInitialOpen] = true
+	if (initialOpen) {
+		open[initialOpen] = true
 	}

 	let previousVersionId: number | undefined = $state(undefined)
 	let previousFlow: PreviousFlow | undefined = $state(undefined)
-	let tab: TabValue = $state(untrack(() => initTab) ?? 'diff')
+	let tab: TabValue = $state(initTab ?? 'diff')

 	let previousFlowCache: Record<number, PreviousFlow> = {}

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import AiChatLayout from './copilot/chat/AiChatLayout.svelte'
 	import type { FlowBuilderProps } from './flow_builder'
 	import FlowBuilder from './FlowBuilder.svelte'
@@ -12,12 +11,12 @@
 		...props
 	}: FlowBuilderProps & { light?: boolean } = $props()

-	let flowStore = $state(untrack(() => oldFlowStore))
-	let flowStateStore = $state(untrack(() => oldFlowStateStore))
+	let flowStore = $state(oldFlowStore)
+	let flowStateStore = $state(oldFlowStateStore)

 	let trialRender = $state(true)

-	if (untrack(() => light)) {
+	if (light) {
 		setTimeout(() => {
 			trialRender = false
 		}, 1000 * 300)
@@ -270,14 +270,12 @@
 			{/if}
 			{#if perms}
 				<TableCustom>
-
-					{#snippet headerRow()}
-										<tr >
-							<th>user/group</th>
-							<th></th>
-							<th></th>
-						</tr>
-									{/snippet}
+					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+					<tr slot="header-row">
+						<th>user/group</th>
+						<th></th>
+						<th></th>
+					</tr>
 					{#snippet body()}
 						<tbody>
 							{#each perms ?? [] as { owner_name, role }}<tr>
@@ -409,7 +407,7 @@
 				<p class="text-primary text-sm">No folder is managing this folder</p>
 			{:else}
 				<TableCustom>
-					<tr slot="headerRow">
+					<tr slot="header-row">
 						<th>folder</th>
 						<th />
 					</tr>
@@ -1,27 +1,19 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { FolderService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import Cell from './table/Cell.svelte'

-	interface Props {
-		name: string;
-		tabular?: boolean;
-		order?: any;
-	}
+	export let name: string
+	export let tabular = false
+	export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources']

-	let { name, tabular = false, order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'] }: Props = $props();
+	$: $workspaceStore && loadUsage()

-
-	let usage: Record<string, number> = $state({})
+	let usage: Record<string, number> = {}

 	async function loadUsage() {
 		usage = await FolderService.getFolderUsage({ workspace: $workspaceStore!, name })
 	}
-	run(() => {
-		$workspaceStore && loadUsage()
-	});
 </script>

 {#if tabular}
@@ -5,17 +5,10 @@

 	import { onDestroy, onMount } from 'svelte'

-	let divEl: HTMLDivElement | null = $state(null)
+	let divEl: HTMLDivElement | null = null
 	let editor: meditor.IStandaloneCodeEditor

-
-	interface Props {
-		code?: string;
-		class?: string;
-	}
-
-	let { code = '', class: className = '' }: Props = $props();
-	
+	export let code: string = ''

 	async function loadMonaco() {
 		editor = meditor.create(divEl as HTMLDivElement, {
@@ -50,4 +43,4 @@
 	})
 </script>

-<div bind:this={divEl} class="{className} editor"></div>
+<div bind:this={divEl} class="{$$props.class ?? ''} editor"></div>
@@ -159,14 +159,12 @@
 		{/if}
 		{#if members}
 			<TableCustom>
-
-				{#snippet headerRow()}
-								<tr >
-						<th>user</th>
-						<th></th>
-						<th></th>
-					</tr>
-							{/snippet}
+				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+				<tr slot="header-row">
+					<th>user</th>
+					<th></th>
+					<th></th>
+				</tr>
 				{#snippet body()}
 					<tbody>
 						{#each members ?? [] as { member_name, role }}<tr>
@@ -303,12 +301,10 @@
 			{#if instance_group?.emails}
 				<h2 class="mt-6 text-emphasis text-xs font-semibold">Members from the instance group</h2>
 				<TableCustom>
-	
-					{#snippet headerRow()}
-										<tr >
-							<th>user</th>
-						</tr>
-									{/snippet}
+					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+					<tr slot="header-row">
+						<th>user</th>
+					</tr>
 					{#snippet body()}
 						<tbody>
 							{#each instance_group?.emails ?? [] as email}<tr>
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import { stopPropagation, createBubbler } from 'svelte/legacy'

 	const bubble = createBubbler()
@@ -35,7 +34,7 @@
 	}: Props = $props()

 	let error = $state('')
-	const regex = untrack(() => acceptUnderScores) ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/
+	const regex = acceptUnderScores ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/

 	function validateId(id: string, reservedIds: string[], reservedPrefixes: string[]) {
 		if (id == initialId) {
@@ -407,7 +407,6 @@
 	}

 	function updatePropsBeingEdited(focused: boolean) {
-		if (!exprBeingEdited) return
 		let newPropsBeingEdited = [...$exprBeingEdited]
 		if (focused) {
 			newPropsBeingEdited.push(argName)
@@ -7,12 +7,8 @@
 	import Cell from './table/Cell.svelte'
 	import Row from './table/Row.svelte'

-	interface Props {
-		inputTransforms: Record<string, InputTransform>;
-	}
-
-	let { inputTransforms }: Props = $props();
-	let entries = $derived(Object.entries(inputTransforms))
+	export let inputTransforms: Record<string, InputTransform>
+	$: entries = Object.entries(inputTransforms)
 </script>

 {#if entries.length}
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { GroupService, type InstanceGroup } from '$lib/gen'
 	import { createEventDispatcher } from 'svelte'
 	import autosize from '$lib/autosize'
@@ -10,18 +8,17 @@
 	import { sendUserToast } from '$lib/toast'
 	import { Loader2 } from 'lucide-svelte'

-	interface Props {
-		name: string;
-	}
+	export let name: string

-	let { name }: Props = $props();
-
-	let email = $state('')
-	let instance_group: InstanceGroup | undefined = $state()
-	let members: { member_email: string }[] | undefined = $state(undefined)
+	let email = ''
+	let instance_group: InstanceGroup | undefined
+	let members: { member_email: string }[] | undefined = undefined

 	const dispatch = createEventDispatcher()

+	$: {
+		load()
+	}

 	async function load() {
 		return Promise.all([loadInstanceGroup()])
@@ -35,9 +32,6 @@
 				})
 			: []
 	}
-	run(() => {
-		load()
-	});
 </script>

 <div class="flex flex-col gap-6">
@@ -91,20 +85,17 @@
 		</div>
 		{#if members}
 			<TableCustom>
-				{#snippet headerRow()}
-								<tr >
-						<th>user</th>
-						<th></th>
-					</tr>
-							{/snippet}
-				{#snippet body()}
-								<tbody >
-						{#each members as { member_email }}<tr>
-								<td>{member_email}</td>
-								<td>
-									<button
-										class="ml-2 text-red-500"
-										onclick={async () => {
+				<tr slot="header-row">
+					<th>user</th>
+					<th></th>
+				</tr>
+				<tbody slot="body">
+					{#each members as { member_email }}<tr>
+							<td>{member_email}</td>
+							<td>
+								<button
+									class="ml-2 text-red-500"
+									on:click={async () => {
 										await GroupService.removeUserFromInstanceGroup({
 											name,
 											requestBody: { email: member_email }
@@ -113,11 +104,10 @@
 										sendUserToast('User removed')
 										loadInstanceGroup()
 									}}>remove</button
-									>
-								</td>
-							</tr>{/each}
-					</tbody>
-							{/snippet}
+								>
+							</td>
+						</tr>{/each}
+				</tbody>
 			</TableCustom>
 		{:else}
 			<div class="flex flex-col">
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { Pencil } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from './common/button/Button.svelte'
@@ -12,23 +9,13 @@
 	import { sendUserToast } from '$lib/toast'
 	import TextInput from './text_input/TextInput.svelte'

-	interface Props {
-		value: string | undefined
-		email: string
-		username?: string | undefined
-		automateUsernameCreation?: boolean
-		login_type: string
-	}
+	export let value: string | undefined
+	export let email: string
+	export let username: string | undefined = undefined
+	export let automateUsernameCreation: boolean = false
+	export let login_type: string

-	let {
-		value = $bindable(),
-		email,
-		username = undefined,
-		automateUsernameCreation = false,
-		login_type = $bindable()
-	}: Props = $props()
-
-	let password: string = $state('')
+	let password: string = ''

 	const dispatch = createEventDispatcher()

@@ -59,12 +46,12 @@
 	}}
 	closeButton
 >
-	{#snippet trigger()}
+	<svelte:fragment slot="trigger">
 		<Button unifiedSize="sm" nonCaptureEvent={true} variant="subtle" startIcon={{ icon: Pencil }}
 			>Edit</Button
 		>
-	{/snippet}
-	{#snippet content()}
+	</svelte:fragment>
+	<svelte:fragment slot="content">
 		<div class="flex flex-col gap-8 max-w-sm p-4">
 			{#if automateUsernameCreation && username}
 				<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
@@ -109,11 +96,10 @@
 						type="password"
 						bind:value={password}
 						class="!w-auto grow"
-						onclick={stopPropagation(() => {})}
-						onkeydown={stopPropagation(bubble('keydown'))}
-						onkeypress={(e) => {
-							e.stopPropagation()
-							if (e.key === 'Enter') {
+						on:click|stopPropagation={() => {}}
+						on:keydown|stopPropagation
+						on:keypress|stopPropagation={({ key }) => {
+							if (key === 'Enter') {
 								savePassword()
 							}
 						}}
@@ -140,11 +126,10 @@
 						type="text"
 						bind:value={login_type}
 						class="!w-auto grow"
-						onclick={stopPropagation(() => {})}
-						onkeydown={stopPropagation(bubble('keydown'))}
-						onkeypress={(e) => {
-							e.stopPropagation()
-							if (e.key === 'Enter') {
+						on:click|stopPropagation={() => {}}
+						on:keydown|stopPropagation
+						on:keypress|stopPropagation={({ key }) => {
+							if (key === 'Enter') {
 								saveLoginType()
 							}
 						}}
@@ -168,5 +153,5 @@
 				</Button>
 			</label>
 		</div>
-	{/snippet}
+	</svelte:fragment>
 </Popover>
@@ -8,17 +8,13 @@
 	import { generateRandomString } from '$lib/utils'
 	import { globalEmailInvite } from '$lib/stores'

-	interface Props {
-		close?: (() => void) | undefined;
-	}
-
-	let { close = undefined }: Props = $props();
+	export let close: (() => void) | undefined = undefined

 	const dispatch = createEventDispatcher()

-	let is_super_admin = $state(false)
-	let password: string = $state(generateRandomString(10))
-	let name: string | undefined = $state()
+	let is_super_admin = false
+	let password: string = generateRandomString(10)
+	let name: string | undefined
 	let company: string | undefined

 	async function addUser() {
@@ -89,7 +89,7 @@
 	let lastStartedAt: number = Date.now()
 	let currentId: string | undefined = $state(undefined)
 	let noPingTimeout: number | undefined = undefined
-	let lastNoLogs = $state(untrack(() => noLogs))
+	let lastNoLogs = $state(noLogs)
 	let lastCompletedJobId = $state<string | undefined>(undefined)

 	let token = getContext<{ token?: string }>('AuthToken')
@@ -1,22 +1,24 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 	import Toggle from './Toggle.svelte'
 	import SettingCard from './instanceSettings/SettingCard.svelte'

-	interface Props {
-		value: any;
-	}
-
-	let { value = $bindable() }: Props = $props();
+	export let value: any

 	const AUTH_URL_SUFFIX = '/ui/oauth2'

+	$: enabled = value != undefined

-	let proxyUrlValue = $state(undefined)
+	// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
+	//
+	// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
+	// also allow lazy/async binding of the `value` prop.
+	$: derivedBaseUrl = value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, '')
+	let proxyUrlValue = undefined
+	$: baseUrl = proxyUrlValue ?? derivedBaseUrl ?? ''

+	$: changeValues({ baseUrl, id: value?.id ?? '' })

 	function changeValues({ baseUrl, id }) {
 		if (value) {
@@ -38,20 +40,10 @@
 			proxyUrlValue = baseUrl
 		}
 	}
-	let enabled = $derived(value != undefined)
-	// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
-	//
-	// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
-	// also allow lazy/async binding of the `value` prop.
-	let derivedBaseUrl = $derived(value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, ''))
-	let baseUrl = $derived(proxyUrlValue ?? derivedBaseUrl ?? '')
-	run(() => {
-		changeValues({ baseUrl, id: value?.id ?? '' })
-	});
 </script>

 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'kanidm'} after={true} /></div><Toggle
 			checked={enabled}
@@ -63,10 +63,7 @@
 				<span class="text-secondary font-normal text-xs"
 					>{'REALM_URL/protocol/openid-connect/auth'}</span
 				>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'yourorg' }}
-					bind:value={value['org']}
-				/>
+				<TextInput inputProps={{ type: 'text', placeholder: 'yourorg' }} bind:value={value['org']} />
 			</label>
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Custom Name</span>
@@ -1,13 +1,5 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
+	export let id: string

-	interface Props {
-		id: string;
-	}
-
-	let { id }: Props = $props();
-
-	run(() => {
-		id && console.log('updateJobId')
-	});
+	$: id && console.log('updateJobId')
 </script>
@@ -1,14 +1,8 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import { AnsiUp } from 'ansi_up'

-	interface Props {
-		content: string
-		highlighted: any[]
-		onClick?: () => void
-	}
-
-	let { content, highlighted, onClick }: Props = $props()
+	export let content: string
+	export let highlighted: any[]

 	const ansi_up = new AnsiUp()
 	ansi_up.use_classes = true
@@ -33,10 +27,10 @@
 		return html2
 	}

-	let html = highlightSnippet(untrack(() => content))
+	let html = highlightSnippet(content)
 </script>

-<button onclick={onClick} class="font-light !m-0 !p-0">
+<button on:click class="font-light !m-0 !p-0">
 	<pre
 		class="bg-surface-secondary hover:bg-surface px-2 py-1 text-secondary text-xs w-[100%] whitespace-pre border min-w-full text-start">
 {@html html}
@@ -1,5 +1,4 @@
 <script lang="ts" module>
-	import { untrack } from 'svelte'
 	const s3LogPrefixes = [
 		'[windmill] Previous logs have been saved to object storage at logs/',
 		'[windmill] Previous logs have been saved to disk at logs/',
@@ -74,7 +73,7 @@
 	let LOG_INC = 10000
 	let LOG_LIMIT = $state(LOG_INC)

-	let lastJobId = $state(untrack(() => jobId))
+	let lastJobId = $state(jobId)

 	let loadedFromObjectStore = $state('')

@@ -5,7 +5,6 @@

 	import { fade } from 'svelte/transition'
 	import { twMerge } from 'tailwind-merge'
-	import { untrack } from 'svelte'

 	export async function refresh() {
 		await getInstance()?.update()
@@ -27,9 +26,7 @@
 		content
 	}: Props = $props()

-	const [popperRef, popperContent, getInstance] = createPopperActions({
-		placement: untrack(() => placement)
-	})
+	const [popperRef, popperContent, getInstance] = createPopperActions({ placement })

 	export function open() {
 		showTooltip = true
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { Map, View, Feature } from 'ol'
 	import { Fill, Stroke, Style, Text } from 'ol/style.js'
 	import { useGeographic } from 'ol/proj.js'
@@ -20,26 +18,17 @@
 		strokeColor?: string
 	}

-	interface Props {
-		lon?: number | undefined;
-		lat?: number | undefined;
-		zoom?: number | undefined;
-		markers?: Marker[] | string | undefined;
-	}
-
-	let {
-		lon = undefined,
-		lat = undefined,
-		zoom = undefined,
-		markers = undefined
-	}: Props = $props();
+	export let lon: number | undefined = undefined
+	export let lat: number | undefined = undefined
+	export let zoom: number | undefined = undefined
+	export let markers: Marker[] | string | undefined = undefined

 	const LAYER_NAME = {
 		MARKER: 'Marker'
 	} as const

-	let map: Map | undefined = $state(undefined)
-	let mapElement: HTMLDivElement | undefined = $state(undefined)
+	let map: Map | undefined = undefined
+	let mapElement: HTMLDivElement | undefined = undefined

 	function getLayersByName(name: keyof typeof LAYER_NAME) {
 		return map
@@ -111,38 +100,36 @@
 		createMarkerLayers()?.forEach((l) => map?.addLayer(l))
 	}

-	run(() => {
-		if (!map && mapElement) {
-			useGeographic()
-			map = new Map({
-				target: mapElement,
-				layers: [
-					new TileLayer({
-						source: new OSM()
-					}),
-					...(createMarkerLayers() || [])
-				],
-				view: new View({
-					center: [lon ?? 0, lat ?? 0],
-					zoom: zoom ?? 2
+	$: if (!map && mapElement) {
+		useGeographic()
+		map = new Map({
+			target: mapElement,
+			layers: [
+				new TileLayer({
+					source: new OSM()
 				}),
-				controls: defaultControls({
-					attribution: false
-				})
+				...(createMarkerLayers() || [])
+			],
+			view: new View({
+				center: [lon ?? 0, lat ?? 0],
+				zoom: zoom ?? 2
+			}),
+			controls: defaultControls({
+				attribution: false
 			})
-			if (lat && lon) {
-				map.getView().setCenter([lon, lat])
-			}
-
-			if (map && zoom) {
-				map.getView().setZoom(zoom)
-			}
-
-			if (map && markers) {
-				updateMarkers()
-			}
+		})
+		if (lat && lon) {
+			map.getView().setCenter([lon, lat])
 		}
-	});
+
+		if (map && zoom) {
+			map.getView().setZoom(zoom)
+		}
+
+		if (map && markers) {
+			updateMarkers()
+		}
+	}
 </script>

 <div bind:this={mapElement} class="w-full h-[300px]"></div>
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { type MetricDataPoint, MetricsService } from '$lib/gen'
 	import { displayTime } from '$lib/utils'
 	import { workspaceStore } from '$lib/stores'
@@ -19,20 +17,16 @@

 	ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale)

-	interface Props {
-		jobId: string;
-		jobUpdateLastFetch: Date | undefined;
-	}
-
-	let { jobId, jobUpdateLastFetch }: Props = $props();
+	export let jobId: string
+	export let jobUpdateLastFetch: Date | undefined

 	let jobMetricsLastFetch: Date | undefined = undefined
-	let jobMemoryStats: MetricDataPoint[] | undefined = $state(undefined)
+	let jobMemoryStats: MetricDataPoint[] | undefined = undefined

 	let data: {
 		x: number
 		y: number
-	}[] = $state([])
+	}[] = []
 	let labels: string[] = []

 	async function loadMetricsData() {
@@ -72,9 +66,7 @@
 		data = [...data]
 	}

-	run(() => {
-		jobUpdateLastFetch && loadMetricsData()
-	});
+	$: jobUpdateLastFetch && loadMetricsData()
 </script>

 <div class="relative max-h-100">
@@ -5,13 +5,9 @@
 	import { displayDate } from '$lib/utils'
 	import { Hourglass } from 'lucide-svelte'

-	interface Props {
-		type: FlowStatusModule['type'];
-		scheduled_for: Date | undefined;
-		skipped?: boolean;
-	}
-
-	let { type, scheduled_for, skipped = false }: Props = $props();
+	export let type: FlowStatusModule['type']
+	export let scheduled_for: Date | undefined
+	export let skipped: boolean = false
 </script>

 {#if type == 'WaitingForEvents'}
@@ -8,7 +8,7 @@
 	} from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { getScriptByPath } from '$lib/scripts'
-	import { getContext, untrack } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from './flows/types'
 	import JobLoader, { type Callbacks } from './JobLoader.svelte'
 	import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte'
@@ -167,8 +167,8 @@
 		testJob = modulesTestStates.states?.[mod.id]?.testJob
 	})

-	modulesTestStates.states[untrack(() => mod).id] = {
-		...(modulesTestStates.states?.[untrack(() => mod).id] ?? { loading: false }),
+	modulesTestStates.states[mod.id] = {
+		...(modulesTestStates.states?.[mod.id] ?? { loading: false }),
 		loading: testIsLoading,
 		testJob: testJob
 	}
@@ -2,13 +2,9 @@
 	import { Button } from './common'
 	import { X, Plus } from 'lucide-svelte'

-	interface Props {
-		extra_params?: Record<string, string>;
-	}
+	export let extra_params: Record<string, string> = {}

-	let { extra_params = $bindable({}) }: Props = $props();
-
-	let extra_params_vec: [string, string][] = $state(Object.entries(extra_params))
+	let extra_params_vec: [string, string][] = Object.entries(extra_params)

 	function sync() {
 		extra_params = Object.fromEntries(extra_params_vec)
@@ -17,8 +13,8 @@

 {#each extra_params_vec as o}
 	<div class="flex flex-row max-w-md mb-2 gap-2">
-		<input type="text" onkeyup={sync} bind:value={o[0]} />
-		<input type="text" onkeyup={sync} bind:value={o[1]} />
+		<input type="text" on:keyup={sync} bind:value={o[0]} />
+		<input type="text" on:keyup={sync} bind:value={o[1]} />
 		<Button
 			variant="subtle"
 			destructive
@@ -2,17 +2,13 @@
 	import { Button } from './common'
 	import { Minus, Plus } from 'lucide-svelte'

-	interface Props {
-		scopes?: string[]
-	}
-
-	let { scopes = $bindable([]) }: Props = $props()
+	export let scopes: string[] = []
 </script>

 {#if scopes && Array.isArray(scopes)}
-	{#each scopes as v, i}
+	{#each scopes as v}
 		<div class="flex flex-row max-w-md mb-2">
-			<input type="text" bind:value={scopes[i]} />
+			<input type="text" bind:value={v} />
 			<Button
 				variant="default"
 				size="xs"
@@ -119,65 +119,61 @@
 </script>

 <MeltPopover placement="bottom" on:openChange={(e) => e.detail && loadUsers()}>
-	{#snippet trigger()}
-	
-			<span class="inline-flex items-center gap-1">
-				<UserCog class="w-4 h-4 {selected ? 'text-green-500' : 'text-yellow-500'}" />
-				{#if selectedDisplayName}
-					<span class="text-xs truncate max-w-24">{selectedDisplayName}</span>
-				{/if}
-			</span>
-		
-	{/snippet}
-	{#snippet content({ close: closePopover })}
-		<div   class="p-3 flex flex-col gap-2 min-w-48">
-			<div class="text-xs font-medium text-secondary mb-1">{label}</div>
-			<!-- Target option -->
-			{#if targetEmail}
-				<button
-					class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover {!canPreserve
-						? 'opacity-50 cursor-not-allowed'
-						: ''}"
-					disabled={!canPreserve}
-					onclick={() => onSelect('target')}
-				>
-					<Check class="w-3 h-3 {selected === 'target' ? 'opacity-100' : 'opacity-0'}" />
-					<span class="truncate max-w-40">{targetUsername}</span>
-					<span class="text-xs text-tertiary">{isDeployment ? '(target)' : '(current)'}</span>
-				</button>
+	<svelte:fragment slot="trigger">
+		<span class="inline-flex items-center gap-1">
+			<UserCog class="w-4 h-4 {selected ? 'text-green-500' : 'text-yellow-500'}" />
+			{#if selectedDisplayName}
+				<span class="text-xs truncate max-w-24">{selectedDisplayName}</span>
 			{/if}
-			<!-- Me option -->
-			<button
-				class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover"
-				onclick={() => onSelect('me')}
-			>
-				<Check class="w-3 h-3 {selected === 'me' ? 'opacity-100' : 'opacity-0'}" />
-				<span class="truncate max-w-40">{$userStore?.username}</span>
-				<span class="text-xs text-tertiary">(me)</span>
-			</button>
-			<!-- Custom / Pick from workspace -->
+		</span>
+	</svelte:fragment>
+	<div slot="content" let:close={closePopover} class="p-3 flex flex-col gap-2 min-w-48">
+		<div class="text-xs font-medium text-secondary mb-1">{label}</div>
+		<!-- Target option -->
+		{#if targetEmail}
 			<button
 				class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover {!canPreserve
 					? 'opacity-50 cursor-not-allowed'
 					: ''}"
 				disabled={!canPreserve}
-				onclick={() => {
-					closePopover()
-					openModal()
-				}}
+				onclick={() => onSelect('target')}
 			>
-				{#if selected === 'custom' && customUsername}
-					<Check class="w-3 h-3 opacity-100" />
-					<span class="truncate max-w-40">{customUsername}</span>
-					<span class="text-xs text-tertiary">(custom)</span>
-				{:else}
-					<Check class="w-3 h-3 opacity-0" />
-					<Users class="w-3 h-3 text-tertiary" />
-					<span>Pick from workspace&hellip;</span>
-				{/if}
+				<Check class="w-3 h-3 {selected === 'target' ? 'opacity-100' : 'opacity-0'}" />
+				<span class="truncate max-w-40">{targetUsername}</span>
+				<span class="text-xs text-tertiary">{isDeployment ? '(target)' : '(current)'}</span>
 			</button>
-		</div>
-	{/snippet}
+		{/if}
+		<!-- Me option -->
+		<button
+			class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover"
+			onclick={() => onSelect('me')}
+		>
+			<Check class="w-3 h-3 {selected === 'me' ? 'opacity-100' : 'opacity-0'}" />
+			<span class="truncate max-w-40">{$userStore?.username}</span>
+			<span class="text-xs text-tertiary">(me)</span>
+		</button>
+		<!-- Custom / Pick from workspace -->
+		<button
+			class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover {!canPreserve
+				? 'opacity-50 cursor-not-allowed'
+				: ''}"
+			disabled={!canPreserve}
+			onclick={() => {
+				closePopover()
+				openModal()
+			}}
+		>
+			{#if selected === 'custom' && customUsername}
+				<Check class="w-3 h-3 opacity-100" />
+				<span class="truncate max-w-40">{customUsername}</span>
+				<span class="text-xs text-tertiary">(custom)</span>
+			{:else}
+				<Check class="w-3 h-3 opacity-0" />
+				<Users class="w-3 h-3 text-tertiary" />
+				<span>Pick from workspace&hellip;</span>
+			{/if}
+		</button>
+	</div>
 </MeltPopover>

 <!-- User selection modal -->
@@ -1,23 +1,11 @@
 <script lang="ts">
 	import Tooltip from './Tooltip.svelte'

-	interface Props {
-		title: string;
-		tooltip?: string;
-		documentationLink?: string | undefined;
-		primary?: boolean;
-		childrenWrapperDivClasses?: string;
-		children?: import('svelte').Snippet;
-	}
-
-	let {
-		title,
-		tooltip = '',
-		documentationLink = undefined,
-		primary = true,
-		childrenWrapperDivClasses = '',
-		children
-	}: Props = $props();
+	export let title: string
+	export let tooltip: string = ''
+	export let documentationLink: string | undefined = undefined
+	export let primary: boolean = true
+	export let childrenWrapperDivClasses: string = ''
 </script>

 <div class="flex flex-row flex-wrap justify-between items-center pb-2 my-4 mr-2 min-h-16">
@@ -43,9 +31,9 @@
 		</span>
 	{/if}

-	{#if children}
+	{#if $$slots.default}
 		<div class="my-2 {childrenWrapperDivClasses}">
-			{@render children?.()}
+			<slot />
 		</div>
 	{/if}
 </div>
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
-
 	import { type GridApi, createGrid, type IDatasource } from 'ag-grid-community'

 	import 'ag-grid-community/styles/ag-grid.css'
@@ -16,19 +14,15 @@
 	// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'

 	let selectedRowIndex = -1
-	interface Props {
-		s3resource: string
-		storage: string | undefined
-		workspaceId: string | undefined
-		disable_download?: boolean
-	}
-
-	let { s3resource, storage, workspaceId, disable_download = false }: Props = $props()
+	export let s3resource: string
+	export let storage: string | undefined
+	export let workspaceId: string | undefined
+	export let disable_download: boolean = false

 	let lastSearch: string | undefined = undefined

-	let nbRows: number | undefined = $state(undefined)
-	let csvSeparatorChar: string = $state(',')
+	let nbRows: number | undefined = undefined
+	let csvSeparatorChar: string = ','
 	let datasource: IDatasource = {
 		rowCount: 0,
 		getRows: async function (params) {
@@ -101,9 +95,11 @@
 		toggleRow(rows[0])
 	}

-	let eGui: HTMLDivElement | undefined = $state()
+	let eGui: HTMLDivElement

-	let error: string | undefined = $state(undefined)
+	$: eGui && mountGrid()
+
+	let error: string | undefined = undefined
 	async function mountGrid() {
 		if (eGui) {
 			try {
@@ -174,10 +170,7 @@
 		}
 	}

-	let darkMode: boolean = $state(false)
-	run(() => {
-		eGui && mountGrid()
-	})
+	let darkMode: boolean = false
 </script>

 <DarkModeObserver bind:darkMode />
@@ -189,7 +182,7 @@
 				<label for="csvSeparatorChar" class="text-2xs text-secondary">Separator</label>

 				<div class="w-12 ml-2 mr-2">
-					<select class="h-8" bind:value={csvSeparatorChar} onchange={(e) => mountGrid()}>
+					<select class="h-8" bind:value={csvSeparatorChar} on:change={(e) => mountGrid()}>
 						<option value=",">,</option>
 						<option value=";">;</option>
 						<option value="\t">\t</option>
@@ -79,14 +79,12 @@
 		<p class="text-primary text-sm">No permission changes recorded yet</p>
 	{:else}
 		<TableCustom>
-			{#snippet headerRow()}
-								<tr >
-					<th>Changed By</th>
-					<th>Change Type</th>
-					<th>Affected</th>
-					<th>Date</th>
-				</tr>
-							{/snippet}
+			<tr slot="header-row">
+				<th>Changed By</th>
+				<th>Change Type</th>
+				<th>Affected</th>
+				<th>Date</th>
+			</tr>
 			{#snippet body()}
 				<tbody>
 					{#each history as change}
@@ -10,19 +10,19 @@
 	import { Hourglass, Loader2, Play, RefreshCw } from 'lucide-svelte'

 	let dispatch = createEventDispatcher()
-	let drawer: Drawer | undefined = $state()
+	let drawer: Drawer

-	let script: Script | undefined = $state()
-	let loadQueuedJobs = $state(true)
-	let queuedJobsLoading = $state(false)
+	let script: Script
+	let loadQueuedJobs = true
+	let queuedJobsLoading = false
 	let queuedJobs: {
 		status: 'running' | 'queued'
 		jobId: string
 		scheduledFor: string
 		scriptHash: string
-	}[] = $state([])
+	}[] = []

-	let cancellingInProgress = $state(false)
+	let cancellingInProgress = false

 	async function continuouslyLoadQueuedJobs() {
 		while (loadQueuedJobs) {
@@ -40,7 +40,7 @@
 		let qjs = await JobService.listQueue({
 			workspace: $workspaceStore ?? '',
 			orderDesc: false,
-			scriptPathExact: script?.path
+			scriptPathExact: script.path
 		})
 		let loadingQueuedJobs: {
 			status: 'running' | 'queued'
@@ -71,12 +71,12 @@
 		cancellingInProgress = true
 		await JobService.cancelPersistentQueuedJobs({
 			workspace: $workspaceStore ?? '',
-			path: script?.path ?? '',
+			path: script.path,
 			requestBody: {
 				reason: undefined
 			}
 		})
-		sendUserToast(`All jobs cancelled for ${script?.path}`)
+		sendUserToast(`All jobs cancelled for ${script.path}`)
 		cancellingInProgress = false
 	}

@@ -88,12 +88,12 @@
 		script = persistentScript!
 		loadQueuedJobs = true
 		continuouslyLoadQueuedJobs()
-		drawer?.openDrawer?.()
+		drawer.openDrawer?.()
 	}

 	async function exit() {
 		loadQueuedJobs = false
-		drawer?.closeDrawer?.()
+		drawer.closeDrawer?.()
 	}

 	onDestroy(() => {
@@ -117,57 +117,51 @@
 	>
 		<div class="flex gap-2 items-center justify-between">
 			<h2>
-				Queued jobs for {script?.path}
+				Queued jobs for {script.path}
 			</h2>
 			<Button size="md" btnClasses="w-full h-8" variant="default" on:click={loadQueuedJobsOnce}>
 				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size={14} />
 			</Button>
 		</div>
 		<TableCustom>
-			{#snippet headerRow()}
-				<tr>
-					<th class="text-xs">Script Hash</th>
-					<th class="text-xs">Job ID</th>
-					<th class="text-xs">Status</th>
-					<th class="text-xs">Scheduled For</th>
-				</tr>
-			{/snippet}
-			{#snippet body()}
-				<tbody>
-					{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
-						<tr class="">
-							<td class="text-xs">
-								<a
-									class="pr-3"
-									href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
-									target="_blank"
-								>
-									{scriptHash}
-								</a>
-							</td>
-							<td class="text-xs">
-								<a
-									class="pr-3"
-									href="{base}/run/{jobId}?workspace={$workspaceStore}"
-									target="_blank">{jobId.substring(24)}</a
-								>
-							</td>
-							<td class="text-xs">
-								{#if status === 'running'}
-									<Badge color="yellow" baseClass="!px-1.5">
-										<Play size={14} />
-									</Badge>
-								{:else}
-									<Badge baseClass="!px-1.5">
-										<Hourglass size={14} />
-									</Badge>
-								{/if}
-							</td>
-							<td class="text-xs">{scheduledFor}</td>
-						</tr>
-					{/each}
-				</tbody>
-			{/snippet}
+			<tr slot="header-row">
+				<th class="text-xs">Script Hash</th>
+				<th class="text-xs">Job ID</th>
+				<th class="text-xs">Status</th>
+				<th class="text-xs">Scheduled For</th>
+			</tr>
+			<tbody slot="body">
+				{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
+					<tr class="">
+						<td class="text-xs">
+							<a
+								class="pr-3"
+								href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
+								target="_blank"
+							>
+								{scriptHash}
+							</a>
+						</td>
+						<td class="text-xs">
+							<a class="pr-3" href="{base}/run/{jobId}?workspace={$workspaceStore}" target="_blank"
+								>{jobId.substring(24)}</a
+							>
+						</td>
+						<td class="text-xs">
+							{#if status === 'running'}
+								<Badge color="yellow" baseClass="!px-1.5">
+									<Play size={14} />
+								</Badge>
+							{:else}
+								<Badge baseClass="!px-1.5">
+									<Hourglass size={14} />
+								</Badge>
+							{/if}
+						</td>
+						<td class="text-xs">{scheduledFor}</td>
+					</tr>
+				{/each}
+			</tbody>
 		</TableCustom>

 		{#snippet actions()}
@@ -43,10 +43,10 @@
 		onClick
 	}: Props = $props()

-	const [popperRef, popperContent] = createPopperActions({ placement: untrack(() => placement) })
+	const [popperRef, popperContent] = createPopperActions({ placement })

 	const popperOptions: PopperOptions<{}> = {
-		placement: untrack(() => placement),
+		placement,
 		strategy: 'fixed',
 		modifiers: [
 			{ name: 'offset', options: { offset: [8, 8] } },
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	let {
 		prefix = '',
 		value = $bindable(''),
@@ -9,7 +8,7 @@
 	} = $props()

 	let inputElement: HTMLInputElement = $state(null!)
-	let internalValue = $state(untrack(() => prefix) + value)
+	let internalValue = $state(prefix + value)

 	// Update internal value when prop changes
 	$effect(() => {
@@ -3,7 +3,7 @@
 	import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte'
 	import QueueAlerts from './QueueAlerts.svelte'

-	let drawer: Drawer | undefined = $state()
+	let drawer: Drawer
 	export function openDrawer() {
 		drawer?.openDrawer()
 	}
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import 'chartjs-adapter-date-fns'
 	import { Line } from '$lib/components/chartjs-wrappers/chartJs'

@@ -24,7 +22,7 @@
 	import Alert from './common/alert/Alert.svelte'
 	import { Section } from './common'

-	let loading: boolean = $state(true)
+	let loading: boolean = true

 	const colorTuples = [
 		['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
@@ -66,12 +64,12 @@
 		LogarithmicScale
 	)

-	let countData: ChartData<'line', Point[], undefined> | undefined = $state(undefined)
-	let delayData: ChartData<'line', Point[], undefined> | undefined = $state(undefined)
+	let countData: ChartData<'line', Point[], undefined> | undefined = undefined
+	let delayData: ChartData<'line', Point[], undefined> | undefined = undefined

-	let minDate = $state(new Date())
+	let minDate = new Date()

-	let noMetrics = $state(false)
+	let noMetrics = false

 	function fillData(
 		data: {
@@ -181,14 +179,10 @@

 	loadMetrics()

-	let darkMode = $state(false)
+	let darkMode = false

-	run(() => {
-		ChartJS.defaults.color = darkMode ? '#ccc' : '#666'
-	});
-	run(() => {
-		ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
-	});
+	$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666'
+	$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
 </script>

 <DarkModeObserver bind:darkMode />
@@ -1,24 +1,13 @@
 <script lang="ts">
+	export let label = ''
+	export let options: [string | { title: string; desc: string }, any][]
+	export let value: any
+	export let disabled = false
+	export let labelClass = ''
+	export let inputClass = ''

 	import { createEventDispatcher } from 'svelte'
 	import Tooltip from './Tooltip.svelte'
-	interface Props {
-		label?: string;
-		options: [string | { title: string; desc: string }, any][];
-		value: any;
-		disabled?: boolean;
-		labelClass?: string;
-		inputClass?: string;
-	}
-
-	let {
-		label = '',
-		options,
-		value = $bindable(),
-		disabled = false,
-		labelClass = '',
-		inputClass = ''
-	}: Props = $props();

 	const dispatch = createEventDispatcher()
 </script>
@@ -39,7 +28,7 @@
 					class="sr-only"
 					bind:group={value}
 					aria-labelledby="memory-option-0-label"
-					onclick={() => dispatch('change', val)}
+					on:click={() => dispatch('change', val)}
 				/>
 				<p>
 					{#if typeof label !== 'string'}
@@ -1,47 +1,29 @@
 <script lang="ts">
-	import { run, createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import RangeSlider from 'svelte-range-slider-pips'

-	interface Props {
-		min?: number
-		max?: number
-		initialValue?: number
-		value?: any
-		disabled?: boolean
-		defaultValue?: number | undefined
-		format?: (value: number) => string
-		hideInput?: boolean
-	}
-
-	let {
-		min = 0,
-		max = 100,
-		initialValue = 0,
-		value = $bindable(typeof initialValue === 'string' ? parseInt(initialValue) : initialValue),
-		disabled = false,
-		defaultValue = undefined,
-		format = (v) => `${v}`,
-		hideInput = false
-	}: Props = $props()
+	export let min = 0
+	export let max = 100
+	export let initialValue = 0
+	export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
+	export let disabled: boolean = false
+	export let defaultValue: number | undefined = undefined
+	export let format: (value: number) => string = (v) => `${v}`
+	export let hideInput: boolean = false

 	let step: number = 1

-	let slider: HTMLElement | undefined = $state()
+	let slider: HTMLElement

 	function calculateAxisStep(min: number, max: number): number {
 		const range = max - min
 		return range < 100 ? 1 : range / 20
 	}

-	run(() => {
-		if (value === null) {
-			value = 0
-		}
-	})
+	$: if (value === null) {
+		value = 0
+	}

-	let axisStep = $derived(calculateAxisStep(min, max))
+	$: axisStep = calculateAxisStep(min, max)

 	function handleKeyDown(event: KeyboardEvent) {
 		if (disabled) return
@@ -62,17 +44,17 @@
 	}

 	// Calculate the handle width based on the length of the max value
-	let handleWidth = $derived(`${Math.max(max.toString().length ?? 2, 2)}em`)
+	$: handleWidth = `${Math.max(max.toString().length ?? 2, 2)}em`
 </script>

 <div class="flex flex-row w-full mx-2 items-center gap-8">
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->

 	<div
 		class={'grow'}
 		style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; --handle-width: {handleWidth}; --handle-border: 4px;"
-		onpointerdown={stopPropagation(bubble('pointerdown'))}
-		onkeydown={handleKeyDown}
+		on:pointerdown|stopPropagation
+		on:keydown={handleKeyDown}
 		>{#if max <= min}
 			<div class="text-secondary text-sm"
 				>Impossible to display range: {`max (${max}) <= min (${min})`}</div
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import { GitSyncService } from '$lib/gen'
 	import Select from './select/Select.svelte'

@@ -33,7 +32,7 @@
 	}: Props = $props()

 	// Track all loaded repositories across pages
-	let loadedRepositories = $state<Repository[]>(untrack(() => initialRepositories))
+	let loadedRepositories = $state<Repository[]>(initialRepositories)
 	let currentPage = $state(1)
 	let isLoadingMore = $state(false)

@@ -1,19 +1,12 @@
 <script lang="ts">
-
-	interface Props {
-		required: boolean;
-		detail?: string;
-		class?: string;
-	}
-
-	let { required, detail = '', class: className = '' }: Props = $props();
-	
+	export let required: boolean
+	export let detail = ''
 </script>

 {#if required}
-	<span class="text-red-500 dark:text-red-400 text-sm font-normal {className}">*</span>
+	<span class="text-red-500 dark:text-red-400 text-sm font-normal {$$props.class}">*</span>
 {:else if detail || detail != ''}
-	<span class="text-sm text-primary ml-2 font-normal {className}"
+	<span class="text-sm text-primary ml-2 font-normal {$$props.class}"
 		>({detail != '' ? `${detail}` : ''})</span
 	>
 {/if}
@@ -30,6 +30,7 @@
 		canSave?: boolean
 		resource_type?: string | undefined
 		path?: string
+		newResource?: boolean
 		hidePath?: boolean
 		onChange?: (args: { path: string; args: Record<string, any>; description: string }) => void
 		defaultValues?: Record<string, any> | undefined
@@ -39,6 +40,7 @@
 		canSave = $bindable(true),
 		resource_type = $bindable(undefined),
 		path = $bindable(''),
+		newResource = false,
 		hidePath = false,
 		onChange,
 		defaultValues = undefined
@@ -61,7 +63,6 @@
 	let resourceTypeInfo: ResourceType | undefined = $state(undefined)
 	let editDescription = $state(false)
 	let viewJsonSchema = $state(false)
-	let newResource = $derived(!path)

 	const dispatch = createEventDispatcher()

@@ -81,7 +82,7 @@
 			.map(([k, _]) => k)
 	}

-	if (!untrack(() => newResource)) {
+	if (!newResource) {
 		initEdit()
 	} else if (resource_type) {
 		loadResourceType()
@@ -5,44 +5,50 @@

 	import { Loader2, Save } from 'lucide-svelte'

-	let drawer: Drawer | undefined = $state()
-	let canSave = $state(true)
-	let resource_type: string | undefined = $state(undefined)
-	let defaultValues: Record<string, any> | undefined = $state(undefined)
+	let drawer: Drawer
+	let canSave = true
+	let resource_type: string | undefined = undefined
+	let defaultValues: Record<string, any> | undefined = undefined

 	let resourceEditor: { editResource: () => void; createResource: () => void } | undefined =
-		$state(undefined)
+		undefined

-	let path: string | undefined = $state(undefined)
+	let path: string | undefined = undefined

+	let newResource = false
 	export async function initEdit(p: string): Promise<void> {
 		resource_type = undefined
+		newResource = false
 		path = p
-		drawer?.openDrawer?.()
+		drawer.openDrawer?.()
 	}

 	export async function initNew(
 		resourceType: string,
 		nDefaultValues?: Record<string, any>
 	): Promise<void> {
+		newResource = true
 		path = undefined
 		resource_type = resourceType
 		defaultValues = nDefaultValues
-		drawer?.openDrawer?.()
+		drawer.openDrawer?.()
 	}

-	let mode: 'edit' | 'new' = $derived(!path ? 'new' : 'edit')
+	let mode: 'edit' | 'new' = newResource ? 'new' : 'edit'
+
+	$: path ? (mode = 'edit') : (mode = 'new')
 </script>

 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		title={mode == 'edit' ? 'Edit ' + path : 'Add a resource'}
-		on:close={drawer?.closeDrawer}
+		on:close={drawer.closeDrawer}
 	>
 		{#await import('./ResourceEditor.svelte')}
 			<Loader2 class="animate-spin" />
 		{:then Module}
 			<Module.default
+				{newResource}
 				{path}
 				{resource_type}
 				{defaultValues}
@@ -62,7 +68,7 @@
 					} else {
 						resourceEditor?.createResource()
 					}
-					drawer?.closeDrawer()
+					drawer.closeDrawer()
 				}}
 				disabled={!canSave}
 			>
@@ -152,7 +152,7 @@
 		loading = false
 	}

-	let previousResourceType = untrack(() => resourceType)
+	let previousResourceType = resourceType

 	$effect(() => {
 		$workspaceStore && resourceType
@@ -15,7 +15,7 @@
 	import Popover from './meltComponents/Popover.svelte'
 	import { Calendar, Check, CornerDownLeft } from 'lucide-svelte'
 	import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte'
-	import { page } from '$app/state'
+	import { page } from '$app/stores'
 	import { replaceState } from '$app/navigation'
 	import JsonInputs from '$lib/components/JsonInputs.svelte'
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
@@ -108,7 +108,7 @@
 				nurl.hash = computeSharableHash(args)

 				try {
-					replaceState(nurl.toString(), page.state)
+					replaceState(nurl.toString(), $page.state)
 				} catch (e) {
 					console.error(e)
 				}
@@ -8,9 +8,7 @@
 	import { WorkerService } from '$lib/gen'
 	import DateTimeInput from './DateTimeInput.svelte'

-
-	interface Props {
-		runnable: 
+	export let runnable:
 		| {
 				summary?: string
 				description?: string
@@ -23,18 +21,11 @@
 				created_by?: string
 				extra_perms?: Record<string, boolean>
 		  }
-		| undefined;
-		scheduledForStr: string | undefined;
-		invisible_to_owner: boolean | undefined;
-		overrideTag: string | undefined;
-	}
+		| undefined

-	let {
-		runnable,
-		scheduledForStr = $bindable(),
-		invisible_to_owner = $bindable(),
-		overrideTag = $bindable()
-	}: Props = $props();
+	export let scheduledForStr: string | undefined
+	export let invisible_to_owner: boolean | undefined
+	export let overrideTag: string | undefined
 	loadWorkerGroups()

 	async function loadWorkerGroups() {
@@ -96,8 +96,8 @@
 	let batchRerunOptionsIsOpen = $state(false)

 	// Initialize path filter from route param if provided and not already set via query params
-	if (untrack(() => initialPath) && !filters.val.path) {
-		filters.val.path = untrack(() => initialPath)
+	if (initialPath && !filters.val.path) {
+		filters.val.path = initialPath
 	}

 	// Apply persistent toggle values from local storage if URL doesn't specify them
@@ -11,19 +11,15 @@
 	import S3FilePicker from './S3FilePicker.svelte'
 	import FileUpload from './common/fileUpload/FileUpload.svelte'

-	interface Props {
-		value: any
-		editor?: SimpleEditor | undefined
-	}
-
-	let { value = $bindable(), editor = $bindable(undefined) }: Props = $props()
+	export let value: any
+	export let editor: SimpleEditor | undefined = undefined

 	const dispatch = createEventDispatcher()

-	let s3FilePicker: S3FilePicker | undefined = $state()
-	let s3FileUploadRawMode: boolean | undefined = $state()
+	let s3FilePicker: S3FilePicker
+	let s3FileUploadRawMode: false
 	let el: HTMLTextAreaElement | undefined = undefined
-	let rawValue: string | undefined = $state(undefined)
+	let rawValue: string | undefined = undefined

 	function evalValueToRaw() {
 		rawValue = JSON.stringify(value, null, 2)
@@ -10,25 +10,14 @@

 	const dispatch = createEventDispatcher()

-	interface Props {
-		runnableId: string | undefined;
-		runnableType: RunnableType | undefined;
-		args: object;
-		disabled?: boolean;
-		small?: boolean | undefined;
-		showTooltip?: boolean | undefined;
-	}
+	export let runnableId: string | undefined
+	export let runnableType: RunnableType | undefined
+	export let args: object
+	export let disabled: boolean = false
+	export let small: boolean | undefined = undefined
+	export let showTooltip: boolean | undefined = undefined

-	let {
-		runnableId,
-		runnableType,
-		args,
-		disabled = false,
-		small = undefined,
-		showTooltip = undefined
-	}: Props = $props();
-
-	let savingInputs = $state(false)
+	let savingInputs = false

 	async function saveInput(args: object) {
 		savingInputs = true
@@ -1,34 +1,20 @@
 <script lang="ts">
-	import { run, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { Button } from '$lib/components/common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import ObjectViewerWrapper from '$lib/components/propertyPicker/ObjectViewerWrapper.svelte'
 	import { copyToClipboard, isObjectTooBig } from '$lib/utils'
 	import { Eye, CopyIcon, Loader2 } from 'lucide-svelte'
-	import { createEventDispatcher, untrack } from 'svelte'
+	import { createEventDispatcher } from 'svelte'

-	interface Props {
-		payloadData: any
-		limitPayloadSize?: boolean
-		hover?: boolean
-		viewerOpen?: boolean
-		maxWidth?: number | undefined
-		editOptions?: boolean
-	}
-
-	let {
-		payloadData,
-		limitPayloadSize = false,
-		hover = false,
-		viewerOpen = false,
-		maxWidth = undefined,
-		editOptions = true
-	}: Props = $props()
+	export let payloadData: any
+	export let limitPayloadSize: boolean = false
+	export let hover: boolean = false
+	export let viewerOpen: boolean = false
+	export let maxWidth: number | undefined = undefined
+	export let editOptions: boolean = true

 	const dispatch = createEventDispatcher()
-	const payloadTooBigForPreview = untrack(() => payloadData) != 'WINDMILL_TOO_BIG' && isObjectTooBig(untrack(() => payloadData))
+	const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData)
 	const buttonWidth = 34
 	const floatingConfig = {
 		placement: 'bottom-end',
@@ -44,13 +30,13 @@
 			}
 		]
 	}
-	const xOffset = untrack(() => editOptions) ? 218 : 168 // width of the optional buttons on the right
+	const xOffset = editOptions ? 218 : 168 // width of the optional buttons on the right

-	let popover: Popover | undefined = $state()
+	let popover: Popover | undefined
 	let popoverOpen = false
 	let hoverTimeout: ReturnType<typeof setTimeout> | undefined
-	let objectViewerLoaded = $state(false)
-	let popoverFullyOpened = $state(false)
+	let objectViewerLoaded = false
+	let popoverFullyOpened = false

 	function handlePopoverChange(event: CustomEvent<boolean>) {
 		const isOpen = event.detail
@@ -87,10 +73,8 @@
 		}
 	}

-	run(() => {
-		handleHoverChange(hover)
-	})
-	let ajustedWidth = $derived(maxWidth ? Math.abs(maxWidth - xOffset) : undefined)
+	$: handleHoverChange(hover)
+	$: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined
 </script>

 <Popover
@@ -101,10 +85,10 @@
 		e.stopPropagation()
 	}}
 	closeOnOtherPopoverOpen
-	closeOnOutsideClick={false}
+	closeOnClickOutside={false}
 	usePointerDownOutside
 >
-	{#snippet trigger({ isOpen })}
+	<svelte:fragment slot="trigger" let:isOpen>
 		<Button
 			variant="subtle"
 			unifiedSize="sm"
@@ -114,8 +98,8 @@
 			nonCaptureEvent
 			startIcon={{ icon: Eye }}
 		/>
-	{/snippet}
-	{#snippet content()}
+	</svelte:fragment>
+	<svelte:fragment slot="content">
 		<div
 			class="p-2 overflow-auto"
 			style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
@@ -134,10 +118,10 @@
 					role="button"
 					tabindex="0"
 					aria-label="Copy JSON payload to clipboard"
-					onclick={() => {
+					on:click={() => {
 						copyToClipboard(JSON.stringify(payloadData))
 					}}
-					onkeydown={bubble('keydown')}
+					on:keydown
 				>
 					{#if !objectViewerLoaded && payloadTooBigForPreview}
 						<div class="flex justify-center items-center py-4">
@@ -174,5 +158,5 @@
 				</div>
 			{/if}
 		</div>
-	{/snippet}
+	</svelte:fragment>
 </Popover>
@@ -2,11 +2,7 @@
 	import type { SchemaProperty } from '$lib/common'
 	import Badge from './common/badge/Badge.svelte'

-	interface Props {
-		property: SchemaProperty;
-	}
-
-	let { property }: Props = $props();
+	export let property: SchemaProperty
 </script>

 <div class="flex flex-row flex-wrap gap-1">
@@ -157,7 +157,7 @@
 	let deployedBy: string | undefined = $state(undefined) // Author
 	let confirmCallback: () => void = $state(() => {}) // What happens when user clicks `override` in warning
 	let open: boolean = $state(false) // Is confirmation modal open
-	let args: Record<string, any> = $state(untrack(() => initialArgs)) // Test args input
+	let args: Record<string, any> = $state(initialArgs) // Test args input
 	let selectedInputTab: 'main' | 'preprocessor' = $state('main')
 	let hasPreprocessor = $state(false)
 	let preserveOnBehalfOf = $state(false)
@@ -170,12 +170,12 @@
 	let customOnBehalfOfEmail: string = $state('')

 	let metadataOpen = $state(
-		!untrack(() => neverShowMeta) &&
-			(untrack(() => showMeta) ||
-				untrack(() => searchParams).get('metadata_open') == 'true' ||
+		!neverShowMeta &&
+			(showMeta ||
+				searchParams.get('metadata_open') == 'true' ||
 				(initialPath == '' &&
-					untrack(() => searchParams).get('state') == undefined &&
-					untrack(() => searchParams).get('collab') == undefined))
+					searchParams.get('state') == undefined &&
+					searchParams.get('collab') == undefined))
 	)

 	let editor: Editor | undefined = $state(undefined)
@@ -193,15 +193,10 @@
 		confirmDeploymentCallback(selectedTriggers)
 	}

-	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(
-		untrack(() => savedPrimarySchedule)
-	) // keep for legacy
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule) // keep for legacy
 	const triggersCount = writable<TriggersCount | undefined>(
-		untrack(() => savedPrimarySchedule)
-			? {
-					schedule_count: 1,
-					primary_schedule: { schedule: untrack(() => savedPrimarySchedule)!.cron }
-				}
+		savedPrimarySchedule
+			? { schedule_count: 1, primary_schedule: { schedule: savedPrimarySchedule.cron } }
 			: undefined
 	)
 	const simplifiedPoll = writable(false)
@@ -864,7 +859,7 @@
 		})()
 	)

-	setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true)
+	setContext('disableTooltips', customUi?.disableTooltips === true)

 	function langToLanguage(lang: SupportedLanguage | 'docker' | 'bunnative'): SupportedLanguage {
 		if (lang == 'docker') {
@@ -1677,10 +1672,8 @@
 													/>
 												{:else if script.on_behalf_of_email && !canPreserve}
 													<span class="text-xs text-tertiary">
-														Currently: <span class="font-medium"
-															>{originalOnBehalfOfEmail ?? script.on_behalf_of_email}</span
-														>. Will be set to <span class="font-medium">{$userStore?.email}</span> on
-														deploy (requires admin or wm_deployers group to override)
+														Currently: <span class="font-medium">{originalOnBehalfOfEmail ?? script.on_behalf_of_email}</span>.
+														Will be set to <span class="font-medium">{$userStore?.email}</span> on deploy (requires admin or wm_deployers group to override)
 													</span>
 												{/if}
 											</span>
@@ -123,7 +123,7 @@
 		lastDeployedCode?: string | undefined
 		disableAi?: boolean
 		assets?: AssetWithAltAccessType[]
-		editorBarRight?: import('svelte').Snippet
+		editor_bar_right?: import('svelte').Snippet
 		enablePreprocessorSnippet?: boolean
 	}

@@ -155,7 +155,7 @@
 		lastDeployedCode = undefined,
 		disableAi = false,
 		assets = $bindable(),
-		editorBarRight,
+		editor_bar_right,
 		enablePreprocessorSnippet = false
 	}: Props = $props()

@@ -883,7 +883,7 @@
 		}
 	}

-	setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true)
+	setContext('disableTooltips', customUi?.disableTooltips === true)

 	let codePanelSize = $state(70)
 	let testPanelSize = $state(30)
@@ -1042,7 +1042,7 @@
 				bind:showHistoryDrawer
 			>
 				{#snippet right()}
-					{@render editorBarRight?.()}
+					{@render editor_bar_right?.()}
 				{/snippet}
 			</EditorBar>
 		{/if}
@@ -52,7 +52,7 @@
 	let lang: SupportedLanguage | undefined = $state()

 	let options: [[string, any, any, string | undefined]] = [['Script', 'script', Code2, undefined]]
-	untrack(() => allowFlow) && options.push(['Flow', 'flow', FlowIcon, '#14b8a6'])
+	allowFlow && options.push(['Flow', 'flow', FlowIcon, '#14b8a6'])
 	const dispatch = createEventDispatcher()

 	async function loadItems(): Promise<void> {
@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
 	import AiChatLayout from './copilot/chat/AiChatLayout.svelte'
 	import type { ScriptBuilderProps } from './script_builder'

 	let { script: oldScript, disableAi, ...props }: ScriptBuilderProps = $props()

-	let script = $state(untrack(() => oldScript))
+	let script = $state(oldScript)
 </script>

 <AiChatLayout noPadding {disableAi}>
@@ -2,19 +2,14 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { twMerge } from 'tailwind-merge'

-	let isAtBottom: boolean = $state(false)
-	let isScrollable = $state(false)
+	let isAtBottom: boolean = false
+	let isScrollable = false

-	interface Props {
-		id?: string | null | undefined
-		scrollableClass?: string
-		shiftedShadow?: boolean
-		children?: import('svelte').Snippet
-	}
-
-	let { id = undefined, scrollableClass = '', shiftedShadow = false, children }: Props = $props()
+	export let id: string | null | undefined = undefined
+	export let scrollableClass: string = ''
+	export let shiftedShadow: boolean = false
 	let mutationObserver: MutationObserver
-	let el: HTMLDivElement | undefined = $state()
+	let el: HTMLDivElement

 	function handleScroll(event) {
 		const scrollableElement = event.target
@@ -25,8 +20,7 @@
 	}

 	function checkIfScrollable(el) {
-		if (!el) return false
-		return el?.scrollHeight > el?.clientHeight
+		return el.scrollHeight > el.clientHeight
 	}

 	function observeScrollability(el) {
@@ -39,7 +33,7 @@
 	}

 	export function scrollIntoView(top: number) {
-		el?.scrollTo({ top, behavior: 'smooth' })
+		el.scrollTo({ top, behavior: 'smooth' })
 	}
 	onMount(() => {
 		observeScrollability(el)
@@ -51,8 +45,8 @@
 </script>

 <div {id} class={twMerge('relative pb-1', scrollableClass)}>
-	<div bind:this={el} onscroll={handleScroll} class="w-full h-full overflow-y-auto">
-		{@render children?.()}
+	<div bind:this={el} on:scroll={handleScroll} class="w-full h-full overflow-y-auto">
+		<slot />
 	</div>
 	{#if !isAtBottom && isScrollable}
 		<div
@@ -12,7 +12,7 @@

 	let { filter = '', items, f, filteredItems = $bindable(), opts = {} }: Props = $props()

-	let uf = new uFuzzy(untrack(() => opts))
+	let uf = new uFuzzy(opts)

 	function filterItems() {
 		let trimmed = filter.trim()
@@ -22,7 +22,7 @@
 	import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte'
 	import Select from './select/Select.svelte'
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/state'
+	import { page } from '$app/stores'
 	import { watch } from 'runed'

 	interface Props {
@@ -169,13 +169,13 @@

 	type Selected = { mode: string; workerGroup: string; hostname: string }
 	let initialSelected =
-		page.url.searchParams.get('mode') &&
-		page.url.searchParams.get('workerGroup') &&
-		page.url.searchParams.get('hostname')
+		$page.url.searchParams.get('mode') &&
+		$page.url.searchParams.get('workerGroup') &&
+		$page.url.searchParams.get('hostname')
 			? {
-					mode: page.url.searchParams.get('mode')!,
-					workerGroup: page.url.searchParams.get('workerGroup')!,
-					hostname: page.url.searchParams.get('hostname')!
+					mode: $page.url.searchParams.get('mode')!,
+					workerGroup: $page.url.searchParams.get('workerGroup')!,
+					hostname: $page.url.searchParams.get('hostname')!
 				}
 			: undefined
 	let selected: Selected | undefined = $state(initialSelected)
@@ -663,7 +663,7 @@
 								<LogSnippetViewer
 									content={snippet_fragment || document.logs[0]}
 									highlighted={snippet_highlighted}
-									onClick={() => {
+									on:click={() => {
 										let logLineNumber = document.line_number[0]
 										let logFile = document.file_name[0]
 										let host = document.host[0]
@@ -159,14 +159,12 @@
 				{/if}
 				{#if acls?.length > 0}
 					<TableCustom>
-
-						{#snippet headerRow()}
-												<tr >
-								<th>owner</th>
-								<th></th>
-								<th></th>
-							</tr>
-											{/snippet}
+						<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+						<tr slot="header-row">
+							<th>owner</th>
+							<th></th>
+							<th></th>
+						</tr>
 						{#snippet body()}
 							<tbody>
 								{#each acls as [owner, write]}
--- a/Show More
+++ b/Show More