faet(frontend): Add tour manager store

Merge branch 'main' into tutorials
feat(frontend): Add app editor tour
2023-03-10 20:11:25 +01:00 · 2023-03-10 19:13:04 +01:00 · 2023-03-10 19:11:34 +01:00 · 2023-03-10 18:41:27 +01:00 · 2023-03-10 18:36:53 +01:00 · 2023-03-10 15:04:34 +01:00
292 changed files with 11344 additions and 2794 deletions
--- a/.github/workflows/deploy_to_windmill.yml
+++ b/.github/workflows/deploy_to_windmill.yml
@@ -1,20 +0,0 @@
-name: Deploy to windmill.dev
-
-on:
-  push:
-    branches: [main]
-    paths:
-      - "community/**"
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Deploy to windmill.dev
-        uses: windmill-labs/windmill-gh-action-deploy@v2.0.0
-        with:
-          dry_run: false
-          input_dir: community
-          windmill_workspace: starter
-          windmill_token: ${{ secrets.WINDMILL_API_TOKEN }}
--- a/.github/workflows/docker-image-arm.yml.archived
+++ b/.github/workflows/docker-image-arm.yml.archived
--- a/.github/workflows/docker-image.yml
+++ b/.github/workflows/docker-image.yml
@@ -109,38 +109,38 @@ jobs:
            ${{ steps.meta-ee-public.outputs.labels }}
            org.opencontainers.image.licenses=Windmill-Enterprise-License

-
-  playwright:
-    runs-on: [self-hosted, new]
-    needs: [build]
-    services:
-      postgres:
-        image: postgres
-        env:
-          POSTGRES_DB: windmill
-          POSTGRES_USER: admin
-          POSTGRES_PASSWORD: changeme
-        ports:
-          - 5432:5432
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-    steps:
-      - uses: actions/checkout@v3
-      - name: "Docker"
-        run: echo "::set-output name=id::$(docker run --network=host --rm -d -p 8000:8000 --privileged -it -e DATABASE_URL=postgres://admin:changeme@localhost:5432/windmill -e BASE_INTERNAL_URL=http://localhost:8000 ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest)"
-        id: docker-container
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - name: "Playwright run"
-        timeout-minutes: 2
-        run: cd frontend && npm ci @playwright/test && npx playwright install && export BASE_URL=http://localhost:8000 && npm run test
-      - name: "Clean up"
-        run: docker kill ${{ steps.docker-container.outputs.id }}
-        if: always()
+  # disabled until we make it 100% reliable and add more meaningful tests
+  # playwright:
+  #   runs-on: [self-hosted, new]
+  #   needs: [build]
+  #   services:
+  #     postgres:
+  #       image: postgres
+  #       env:
+  #         POSTGRES_DB: windmill
+  #         POSTGRES_USER: admin
+  #         POSTGRES_PASSWORD: changeme
+  #       ports:
+  #         - 5432:5432
+  #       options: >-
+  #         --health-cmd pg_isready
+  #         --health-interval 10s
+  #         --health-timeout 5s
+  #         --health-retries 5
+  #   steps:
+  #     - uses: actions/checkout@v3
+  #     - name: "Docker"
+  #       run: echo "::set-output name=id::$(docker run --network=host --rm -d -p 8000:8000 --privileged -it -e DATABASE_URL=postgres://admin:changeme@localhost:5432/windmill -e BASE_INTERNAL_URL=http://localhost:8000 ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest)"
+  #       id: docker-container
+  #     - uses: actions/setup-node@v3
+  #       with:
+  #         node-version: 16
+  #     - name: "Playwright run"
+  #       timeout-minutes: 2
+  #       run: cd frontend && npm ci @playwright/test && npx playwright install && export BASE_URL=http://localhost:8000 && npm run test
+  #     - name: "Clean up"
+  #       run: docker kill ${{ steps.docker-container.outputs.id }}
+  #       if: always()


  publish_privately_heavy:
--- a/.github/workflows/uffizzi-build.yml.archived
+++ b/.github/workflows/uffizzi-build.yml.archived
--- a/.github/workflows/uffizzi-preview.yml.archived
+++ b/.github/workflows/uffizzi-preview.yml.archived
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,69 @@
 # Changelog


+## [1.74.2](https://github.com/windmill-labs/windmill/compare/v1.74.1...v1.74.2) (2023-03-09)
+
+
+### Bug Fixes
+
+* **frontend:** fix splitpanes navigation ([#1276](https://github.com/windmill-labs/windmill/issues/1276)) ([8d5c5b8](https://github.com/windmill-labs/windmill/commit/8d5c5b88a35d7a3bad1d8ddf2d940026825241eb))
+
+## [1.74.1](https://github.com/windmill-labs/windmill/compare/v1.74.0...v1.74.1) (2023-03-09)
+
+
+### Bug Fixes
+
+* **apps:** proper reactivity for non rendered static components ([ae53baf](https://github.com/windmill-labs/windmill/commit/ae53bafaf6777f928113f84b2c6ed6a2ed341844))
+* **ci:** make windmill compile again by pinning swc deps ([2ea15d5](https://github.com/windmill-labs/windmill/commit/2ea15d5035e5e15473968db3c0501a4dddff5cd0))
+
+## [1.74.0](https://github.com/windmill-labs/windmill/compare/v1.73.1...v1.74.0) (2023-03-09)
+
+
+### Features
+
+* add delete by path for scripts ([0c2cf92](https://github.com/windmill-labs/windmill/commit/0c2cf92dd3df9610e649f15e23921a4ca0d94e6a))
+* **frontend:** Add color picker input to app ([#1270](https://github.com/windmill-labs/windmill/issues/1270)) ([88e537a](https://github.com/windmill-labs/windmill/commit/88e537ad1fb4c207f38fbe951c82106bef6491a3))
+* **frontend:** add expand ([#1268](https://github.com/windmill-labs/windmill/issues/1268)) ([b854ee3](https://github.com/windmill-labs/windmill/commit/b854ee34393534bde104e2e6f606108fd66d38dc))
+* **frontend:** add hash to ctx in apps ([b1a45b1](https://github.com/windmill-labs/windmill/commit/b1a45b1e708aa6f19f8be9c949507083e044f2d8))
+* **frontend:** Add key navigation in app editor ([#1273](https://github.com/windmill-labs/windmill/issues/1273)) ([6b0fb75](https://github.com/windmill-labs/windmill/commit/6b0fb75d23e2151c88b07814139d203c1bd0578d))
+
+
+### Bug Fixes
+
+* **cli:** improve visibility of the active workspace ([e6344da](https://github.com/windmill-labs/windmill/commit/e6344dac6d1be04b46231fa8ef8579fd12ca8f37))
+* **frontend:** add confirmation modal to delete script/flow/app ([a4adcb5](https://github.com/windmill-labs/windmill/commit/a4adcb5192c11f7bf47a0d259825e474779378d7))
+* **frontend:** Clean up app editor ([#1267](https://github.com/windmill-labs/windmill/issues/1267)) ([0a5e181](https://github.com/windmill-labs/windmill/commit/0a5e181a3aa966fb8211bee0d9174fc16353b31f))
+* **frontend:** Minor changes ([#1272](https://github.com/windmill-labs/windmill/issues/1272)) ([3b6ae0c](https://github.com/windmill-labs/windmill/commit/3b6ae0cc49461b858d9cfff79eae9a7569465235))
+* **frontend:** simplify input bindings ([b2de531](https://github.com/windmill-labs/windmill/commit/b2de531a46e4b120d7106d361b727746bec516dd))
+
+## [1.73.1](https://github.com/windmill-labs/windmill/compare/v1.73.0...v1.73.1) (2023-03-07)
+
+
+### Bug Fixes
+
+* **frontend:** load flow is not initialized ([719d475](https://github.com/windmill-labs/windmill/commit/719d4752621d462b1cfaa0d27930fba7586be779))
+
+## [1.73.0](https://github.com/windmill-labs/windmill/compare/v1.72.0...v1.73.0) (2023-03-07)
+
+
+### Features
+
+* **frontend:** add a way to automatically resize ([#1259](https://github.com/windmill-labs/windmill/issues/1259)) ([24f58ef](https://github.com/windmill-labs/windmill/commit/24f58efd9994a2201c1b1d9bbfb11734c57068e3))
+* **frontend:** add ability to move nodes ([614fb50](https://github.com/windmill-labs/windmill/commit/614fb5022aa7d5428fb96b7ee3a20794edd1e9d3))
+* **frontend:** Add app PDF viewer ([#1254](https://github.com/windmill-labs/windmill/issues/1254)) ([3e5d09e](https://github.com/windmill-labs/windmill/commit/3e5d09ef0b5619186bee5ec6d442cbfd12a6e8d5))
+* **frontend:** add fork/save buttons + consistent styling for slider/range ([9e9f8ef](https://github.com/windmill-labs/windmill/commit/9e9f8efb8ee389ea75e99b67ef720756959ca737))
+* **frontend:** add history to flows and apps ([9e4d90a](https://github.com/windmill-labs/windmill/commit/9e4d90ad37a57ff1f515eea0c82cf603649e915d))
+* **frontend:** Fix object viewer style ([#1255](https://github.com/windmill-labs/windmill/issues/1255)) ([94f1aad](https://github.com/windmill-labs/windmill/commit/94f1aadef2b09ac1962478f11b27cc708b8328f1))
+* **frontend:** refactor entire flow builder UX ([2ac51b0](https://github.com/windmill-labs/windmill/commit/2ac51b0af08bdef7ce3c7e874e9983b9fc00478a))
+
+
+### Bug Fixes
+
+* **frontend:** arginput + apppreview fixes ([e2c4545](https://github.com/windmill-labs/windmill/commit/e2c45452401022b00285b21551ffaf35a114be33))
+* **frontend:** fix app map reactivity ([#1260](https://github.com/windmill-labs/windmill/issues/1260)) ([2557e13](https://github.com/windmill-labs/windmill/commit/2557e136bd0df1a023819b7d9b2235e30d7140b6))
+* **frontend:** fix branch deletion ([#1261](https://github.com/windmill-labs/windmill/issues/1261)) ([a999eb2](https://github.com/windmill-labs/windmill/commit/a999eb21121a7c0010621448324e0c77caf2b3f6))
+* **frontend:** Side menu z-index issue ([#1265](https://github.com/windmill-labs/windmill/issues/1265)) ([c638897](https://github.com/windmill-labs/windmill/commit/c638897fdcd58f55b0929f91641b21a6f9d25ead))
+
 ## [1.72.0](https://github.com/windmill-labs/windmill/compare/v1.71.0...v1.72.0) (2023-03-02)


--- a/7
+++ b/7
@@ -73,7 +73,7 @@ ARG features=""

 COPY --from=planner /windmill/recipe.json recipe.json

-RUN CARGO_NET_GIT_FETCH_WITH_CLI=true cargo chef cook --release --features "$features" --recipe-path recipe.json
+RUN CARGO_NET_GIT_FETCH_WITH_CLI=true RUST_BACKTRACE=1 cargo chef cook --release --features "$features" --recipe-path recipe.json

 COPY ./openflow.openapi.yaml /openflow.openapi.yaml
 COPY ./backend ./
@@ -86,6 +86,7 @@ RUN CARGO_NET_GIT_FETCH_WITH_CLI=true cargo build --release --features "$feature


 FROM python:3.11.2-slim-buster
+ARG TARGETPLATFORM

 ARG APP=/usr/src/app

@@ -129,6 +130,10 @@ COPY --from=nsjail /nsjail/nsjail /bin/nsjail

 COPY --from=denoland/deno:latest /usr/bin/deno /usr/bin/deno

+# docker does not support conditional COPY and we want to use the same Dockerfile for both amd64 and arm64 and privilege the official image
+COPY --from=lukechannings/deno:latest /usr/bin/deno /usr/bin/deno-arm
+RUN if [ "$TARGETPLATFORM" = "linux/amd64" ]; then rm /usr/bin/deno-arm; elif [ "$TARGETPLATFORM" = "linux/arm64" ]; then mv /usr/bin/deno-arm /usr/bin/deno; fi
+
 RUN mkdir -p ${APP}

 WORKDIR ${APP}
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -67,9 +67,9 @@ checksum = "224afbd727c3d6e4b90103ece64b8d1b67fbb1973b1046c2281eed3f3803f800"

 [[package]]
 name = "argon2"
-version = "0.4.1"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "db4ce4441f99dbd377ca8a8f57b698c44d0d6e712d8329b5040da5a64aa1ce73"
+checksum = "95c2fcf79ad1932ac6269a738109997a83c227c09b75842ae564dc8ede6a861c"
 dependencies = [
 "base64ct",
 "blake2",
@@ -202,9 +202,9 @@ dependencies = [

 [[package]]
 name = "async-trait"
-version = "0.1.64"
+version = "0.1.66"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1cd7fce9ba8c3c042128ce72d8b2ddbf3a05747efb67ea0313c635e10bda47a2"
+checksum = "b84f9ebcc6c1f5b8cb160f6990096a5c127f423fcb6e1ccc46c370cbdfb75dfc"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -254,9 +254,9 @@ checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"

 [[package]]
 name = "axum"
-version = "0.6.9"
+version = "0.6.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6137c6234afb339e75e764c866e3594900f0211e1315d33779f269bbe2ec6967"
+checksum = "2fb79c228270dcf2426e74864cabc94babb5dbab01a4314e702d2f16540e1591"
 dependencies = [
 "async-trait",
 "axum-core",
@@ -281,16 +281,16 @@ dependencies = [
 "sync_wrapper",
 "tokio",
 "tower",
- "tower-http",
+ "tower-http 0.3.5",
 "tower-layer",
 "tower-service",
 ]

 [[package]]
 name = "axum-core"
-version = "0.3.2"
+version = "0.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1cae3e661676ffbacb30f1a824089a8c9150e71017f7e1e38f2aa32009188d34"
+checksum = "b2f958c80c248b34b9a877a643811be8dbca03ca5ba827f2b63baf3a81e5fc4e"
 dependencies = [
 "async-trait",
 "bytes",
@@ -378,9 +378,9 @@ dependencies = [

 [[package]]
 name = "block-buffer"
-version = "0.10.3"
+version = "0.10.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "69cce20737498f97b993470a6e536b8523f0af7892a4f928cceb1ac5e52ebe7e"
+checksum = "3078c7629b62d3f0439517fa394996acacc5cbc91c5a20d8c658e77abd503a71"
 dependencies = [
 "generic-array",
 ]
@@ -719,9 +719,9 @@ dependencies = [

 [[package]]
 name = "cxx"
-version = "1.0.91"
+version = "1.0.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "86d3488e7665a7a483b57e25bdd90d0aeb2bc7608c8d0346acf2ad3f1caf1d62"
+checksum = "9a140f260e6f3f79013b8bfc65e7ce630c9ab4388c6a89c71e07226f49487b72"
 dependencies = [
 "cc",
 "cxxbridge-flags",
@@ -731,9 +731,9 @@ dependencies = [

 [[package]]
 name = "cxx-build"
-version = "1.0.91"
+version = "1.0.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "48fcaf066a053a41a81dfb14d57d99738b767febb8b735c3016e469fac5da690"
+checksum = "da6383f459341ea689374bf0a42979739dc421874f112ff26f829b8040b8e613"
 dependencies = [
 "cc",
 "codespan-reporting",
@@ -746,15 +746,15 @@ dependencies = [

 [[package]]
 name = "cxxbridge-flags"
-version = "1.0.91"
+version = "1.0.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a2ef98b8b717a829ca5603af80e1f9e2e48013ab227b68ef37872ef84ee479bf"
+checksum = "90201c1a650e95ccff1c8c0bb5a343213bdd317c6e600a93075bca2eff54ec97"

 [[package]]
 name = "cxxbridge-macro"
-version = "1.0.91"
+version = "1.0.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "086c685979a698443656e5cf7856c95c642295a38599f12fb1ff76fb28d19892"
+checksum = "0b75aed41bb2e6367cae39e6326ef817a851db13c13e4f3263714ca3cfb8de56"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -895,7 +895,7 @@ version = "0.10.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8168378f4e5023e7218c89c891c0fd8ecdb5e5e4f18cb78f38cf245dd021e76f"
 dependencies = [
- "block-buffer 0.10.3",
+ "block-buffer 0.10.4",
 "const-oid",
 "crypto-common",
 "subtle",
@@ -1612,9 +1612,9 @@ dependencies = [

 [[package]]
 name = "io-lifetimes"
-version = "1.0.5"
+version = "1.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1abeb7a0dd0f8181267ff8adc397075586500b81b28a73e8a0208b00fc170fb3"
+checksum = "cfa919a82ea574332e2de6e74b4c36e74d41982b335080fa59d4ef31be20fdf3"
 dependencies = [
 "libc",
 "windows-sys 0.45.0",
@@ -1662,9 +1662,9 @@ dependencies = [

 [[package]]
 name = "itoa"
-version = "1.0.5"
+version = "1.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fad582f4b9e86b6caa621cabeb0963332d92eea04729ab12892c2533951e6440"
+checksum = "453ad9f582a441959e5f0d088b02ce04cfe8d51a8eaf077f12ac6d3e94164ca6"

 [[package]]
 name = "jobserver"
@@ -1815,9 +1815,9 @@ dependencies = [

 [[package]]
 name = "libc"
-version = "0.2.139"
+version = "0.2.140"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "201de327520df007757c1f0adce6e827fe8562fbc28bfd9c15571c66ca1f5f79"
+checksum = "99227334921fae1a979cf0bfdfcc6b3e5ce376ef57e16fb6fb3ea2ed6095f80c"

 [[package]]
 name = "libgit2-sys"
@@ -2263,9 +2263,9 @@ dependencies = [

 [[package]]
 name = "password-hash"
-version = "0.4.2"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7676374caaee8a325c9e7a2ae557f216c5563a171d6997b0ef8a65af35147700"
+checksum = "346f04948ba92c43e8469c1ee6736c7563d71012b17d40745260fe106aac2166"
 dependencies = [
 "base64ct",
 "rand_core 0.6.4",
@@ -2274,9 +2274,9 @@ dependencies = [

 [[package]]
 name = "paste"
-version = "1.0.11"
+version = "1.0.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d01a5bd0424d00070b0098dd17ebca6f961a959dead1dbcbbbc1d1cd8d3deeba"
+checksum = "9f746c4065a8fa3fe23974dd82f15431cc8d40779821001404d10d2e79ca7d79"

 [[package]]
 name = "pem-rfc7468"
@@ -2295,9 +2295,9 @@ checksum = "478c572c3d73181ff3c2539045f6eb99e5491218eae919370993b890cdbdd98e"

 [[package]]
 name = "pest"
-version = "2.5.5"
+version = "2.5.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "028accff104c4e513bad663bbcd2ad7cfd5304144404c31ed0a77ac103d00660"
+checksum = "8cbd939b234e95d72bc393d51788aec68aeeb5d51e748ca08ff3aad58cb722f7"
 dependencies = [
 "thiserror",
 "ucd-trie",
@@ -2525,7 +2525,7 @@ dependencies = [
 [[package]]
 name = "progenitor"
 version = "0.2.1-dev"
-source = "git+https://github.com/oxidecomputer/progenitor#cbe875ad1a4c650cf3af595c90df6fd7421b47c2"
+source = "git+https://github.com/oxidecomputer/progenitor#e9b6970d4485ad5813f93e95570480195528b0a9"
 dependencies = [
 "anyhow",
 "built",
@@ -2543,7 +2543,7 @@ dependencies = [
 [[package]]
 name = "progenitor-client"
 version = "0.2.1-dev"
-source = "git+https://github.com/oxidecomputer/progenitor#cbe875ad1a4c650cf3af595c90df6fd7421b47c2"
+source = "git+https://github.com/oxidecomputer/progenitor#e9b6970d4485ad5813f93e95570480195528b0a9"
 dependencies = [
 "bytes",
 "futures-core",
@@ -2557,7 +2557,7 @@ dependencies = [
 [[package]]
 name = "progenitor-impl"
 version = "0.2.1-dev"
-source = "git+https://github.com/oxidecomputer/progenitor#cbe875ad1a4c650cf3af595c90df6fd7421b47c2"
+source = "git+https://github.com/oxidecomputer/progenitor#e9b6970d4485ad5813f93e95570480195528b0a9"
 dependencies = [
 "getopts",
 "heck",
@@ -2579,7 +2579,7 @@ dependencies = [
 [[package]]
 name = "progenitor-macro"
 version = "0.2.1-dev"
-source = "git+https://github.com/oxidecomputer/progenitor#cbe875ad1a4c650cf3af595c90df6fd7421b47c2"
+source = "git+https://github.com/oxidecomputer/progenitor#e9b6970d4485ad5813f93e95570480195528b0a9"
 dependencies = [
 "openapiv3",
 "proc-macro2",
@@ -2846,9 +2846,9 @@ dependencies = [

 [[package]]
 name = "rust-embed"
-version = "6.4.2"
+version = "6.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "283ffe2f866869428c92e0d61c2f35dfb4355293cdfdc48f49e895c15f1333d1"
+checksum = "cb133b9a38b5543fad3807fb2028ea47c5f2b566f4f5e28a11902f1a358348b6"
 dependencies = [
 "rust-embed-impl",
 "rust-embed-utils",
@@ -2857,9 +2857,9 @@ dependencies = [

 [[package]]
 name = "rust-embed-impl"
-version = "6.3.1"
+version = "6.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "31ab23d42d71fb9be1b643fe6765d292c5e14d46912d13f3ae2815ca048ea04d"
+checksum = "4d4e0f0ced47ded9a68374ac145edd65a6c1fa13a96447b873660b2a568a0fd7"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -2870,9 +2870,9 @@ dependencies = [

 [[package]]
 name = "rust-embed-utils"
-version = "7.3.0"
+version = "7.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c1669d81dfabd1b5f8e2856b8bbe146c6192b0ba22162edc738ac0a5de18f054"
+checksum = "512b0ab6853f7e14e3c8754acb43d6f748bb9ced66aa5915a6553ac8213f7731"
 dependencies = [
 "sha2 0.10.6",
 "walkdir",
@@ -2917,9 +2917,9 @@ dependencies = [

 [[package]]
 name = "rustix"
-version = "0.36.8"
+version = "0.36.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f43abb88211988493c1abb44a70efa56ff0ce98f233b7b276146f1f3f7ba9644"
+checksum = "fd5c6ff11fecd55b40746d1995a02f2eb375bf8c00d192d521ee09f42bef37bc"
 dependencies = [
 "bitflags",
 "errno",
@@ -2953,7 +2953,7 @@ dependencies = [
 [[package]]
 name = "rustpython-ast"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#6e4c2fe7866f705bb427200a36d6c9fb46508de3"
+source = "git+https://github.com/RustPython/RustPython#87728c44527272ece739cddbb4942ad7e176dd79"
 dependencies = [
 "num-bigint",
 "rustpython-compiler-core",
@@ -2962,7 +2962,7 @@ dependencies = [
 [[package]]
 name = "rustpython-compiler-core"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#6e4c2fe7866f705bb427200a36d6c9fb46508de3"
+source = "git+https://github.com/RustPython/RustPython#87728c44527272ece739cddbb4942ad7e176dd79"
 dependencies = [
 "bitflags",
 "bstr",
@@ -2975,7 +2975,7 @@ dependencies = [
 [[package]]
 name = "rustpython-parser"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#6e4c2fe7866f705bb427200a36d6c9fb46508de3"
+source = "git+https://github.com/RustPython/RustPython#87728c44527272ece739cddbb4942ad7e176dd79"
 dependencies = [
 "ahash",
 "anyhow",
@@ -2998,15 +2998,15 @@ dependencies = [

 [[package]]
 name = "rustversion"
-version = "1.0.11"
+version = "1.0.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5583e89e108996506031660fe09baa5011b9dd0341b89029313006d1fb508d70"
+checksum = "4f3208ce4d8448b3f3e7d168a73f5e0c43a61e32930de3bceeccedb388b6bf06"

 [[package]]
 name = "ryu"
-version = "1.0.12"
+version = "1.0.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b4b9743ed687d4b4bcedf9ff5eaa7398495ae14e61cba0a295704edbc7decde"
+checksum = "f91339c0467de62360649f8d3e185ca8de4224ff281f66000de5eb2a77a79041"

 [[package]]
 name = "same-file"
@@ -3066,9 +3066,9 @@ checksum = "d29ab0c6d3fc0ee92fe66e2d99f700eab17a8d57d1c1d3b748380fb20baa78cd"

 [[package]]
 name = "scratch"
-version = "1.0.3"
+version = "1.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ddccb15bcce173023b3fedd9436f882a0739b8dfb45e4f6b6002bee5929f61b2"
+checksum = "1792db035ce95be60c3f8853017b3999209281c24e2ba5bc8e59bf97a0c590c1"

 [[package]]
 name = "sct"
@@ -3147,9 +3147,9 @@ dependencies = [

 [[package]]
 name = "serde"
-version = "1.0.152"
+version = "1.0.154"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bb7d1f0d3021d347a83e556fc4683dea2ea09d87bccdf88ff5c12545d89d5efb"
+checksum = "8cdd151213925e7f1ab45a9bbfb129316bd00799784b174b7cc7bcd16961c49e"
 dependencies = [
 "serde_derive",
 ]
@@ -3176,9 +3176,9 @@ dependencies = [

 [[package]]
 name = "serde_derive"
-version = "1.0.152"
+version = "1.0.154"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "af487d118eecd09402d70a5d72551860e788df87b464af30e5ea6a38c75c541e"
+checksum = "4fc80d722935453bcafdc2c9a73cd6fac4dc1938f0346035d84bf99fa9e33217"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -3198,9 +3198,9 @@ dependencies = [

 [[package]]
 name = "serde_json"
-version = "1.0.93"
+version = "1.0.94"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cad406b69c91885b5107daf2c29572f6c8cdb3c66826821e286c533490c0bc76"
+checksum = "1c533a59c9d8a93a09c6ab31f0fd5e5f4dd1b8fc9434804029839884765d04ea"
 dependencies = [
 "indexmap",
 "itoa",
@@ -3210,9 +3210,9 @@ dependencies = [

 [[package]]
 name = "serde_path_to_error"
-version = "0.1.9"
+version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "26b04f22b563c91331a10074bda3dd5492e3cc39d56bd557e91c0af42b6c7341"
+checksum = "db0969fff533976baadd92e08b1d102c5a3d8a8049eadfd69d4d1e3c5b2ed189"
 dependencies = [
 "serde",
 ]
@@ -3241,9 +3241,9 @@ dependencies = [

 [[package]]
 name = "serde_tokenstream"
-version = "0.1.6"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "274f512d6748a01e67cbcde5b4307ab2c9d52a98a2b870a980ef0793a351deff"
+checksum = "797ba1d80299b264f3aac68ab5d12e5825a561749db4df7cd7c8083900c5d4e9"
 dependencies = [
 "proc-macro2",
 "serde",
@@ -3278,9 +3278,9 @@ dependencies = [

 [[package]]
 name = "serde_yaml"
-version = "0.9.17"
+version = "0.9.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8fb06d4b6cdaef0e0c51fa881acb721bed3c924cfaa71d9c94a3b771dfdf6567"
+checksum = "f82e6c8c047aa50a7328632d067bcae6ef38772a79e28daf32f735e0e4f3dd10"
 dependencies = [
 "indexmap",
 "itoa",
@@ -3384,6 +3384,17 @@ dependencies = [
 "syn",
 ]

+[[package]]
+name = "smartstring"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fb72c633efbaa2dd666986505016c32c3044395ceaf881518399d2f4127ee29"
+dependencies = [
+ "autocfg",
+ "static_assertions",
+ "version_check",
+]
+
 [[package]]
 name = "smol_str"
 version = "0.1.24"
@@ -3395,9 +3406,9 @@ dependencies = [

 [[package]]
 name = "socket2"
-version = "0.4.7"
+version = "0.4.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "02e2d2db9033d13a1567121ddd7a095ee144db4e1ca1b1bda3419bc0da294ebd"
+checksum = "64a4a911eed85daf18834cfaa86a79b7d266ff93ff5ba14005426219480ed662"
 dependencies = [
 "libc",
 "winapi",
@@ -3581,9 +3592,9 @@ checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"

 [[package]]
 name = "string_cache"
-version = "0.8.4"
+version = "0.8.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "213494b7a2b503146286049378ce02b482200519accc31872ee8be91fa820a08"
+checksum = "f91138e76242f575eb1d3b38b4f1362f10d3a43f47d182a5b359af488a02293b"
 dependencies = [
 "new_debug_unreachable",
 "once_cell",
@@ -3642,9 +3653,9 @@ checksum = "6bdef32e8150c2a081110b42772ffe7d7c9032b606bc226c8260fd97e0976601"

 [[package]]
 name = "swc_atoms"
-version = "0.4.38"
+version = "0.4.39"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a172f2e444ae1378286cd27ff2a5cb26eadfd7a77c98ccb0edde8992857be1e"
+checksum = "2ebef84c2948cd0d1ba25acbf1b4bd9d80ab6f057efdbe35d8449b8d54699401"
 dependencies = [
 "once_cell",
 "rustc-hash",
@@ -3656,9 +3667,9 @@ dependencies = [

 [[package]]
 name = "swc_common"
-version = "0.29.33"
+version = "0.29.35"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a8a75c46065858a37cdda2c1c6fd056986e3b7752d5ec332e91ce312c6a22749"
+checksum = "2d515be281f603cb97afaa89896aca5e5c748fde11c7f926e35cdaa8ff8da705"
 dependencies = [
 "ahash",
 "ast_node",
@@ -3683,9 +3694,9 @@ dependencies = [

 [[package]]
 name = "swc_ecma_ast"
-version = "0.98.0"
+version = "0.98.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b1f6bc913d0f1daf0fa713a64660aed27848e0047ee671ab2206ad602730d1f"
+checksum = "305d2aa5e36a775e0d376552b35b325fccf0d7d8c633da1e4aec8e16460251cf"
 dependencies = [
 "bitflags",
 "is-macro",
@@ -3700,9 +3711,9 @@ dependencies = [

 [[package]]
 name = "swc_ecma_parser"
-version = "0.127.0"
+version = "0.128.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3875db58a1515382c670679062133294e5ec88aff08776f5fb6e4f3c09c0f5f9"
+checksum = "35e349e3f4c5561645b9042caae162dbaf55502be7b583ac99f3ccf3e65bccb7"
 dependencies = [
 "either",
 "enum_kind",
@@ -3710,6 +3721,7 @@ dependencies = [
 "num-bigint",
 "serde",
 "smallvec",
+ "smartstring",
 "stacker",
 "swc_atoms",
 "swc_common",
@@ -3818,18 +3830,18 @@ dependencies = [

 [[package]]
 name = "thiserror"
-version = "1.0.38"
+version = "1.0.39"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6a9cd18aa97d5c45c6603caea1da6628790b37f7a34b6ca89522331c5180fed0"
+checksum = "a5ab016db510546d856297882807df8da66a16fb8c4101cb8b30054b0d5b2d9c"
 dependencies = [
 "thiserror-impl",
 ]

 [[package]]
 name = "thiserror-impl"
-version = "1.0.38"
+version = "1.0.39"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fb327af4685e4d03fa8cbcf1716380da910eeb2bb8be417e7f9fd3fb164f36f"
+checksum = "5420d42e90af0c38c3290abcca25b9b3bdf379fc9f55c528f53a269d9c9a267e"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -4095,6 +4107,25 @@ dependencies = [
 "tower-service",
 ]

+[[package]]
+name = "tower-http"
+version = "0.3.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f873044bf02dd1e8239e9c1293ea39dad76dc594ec16185d0a1bf31d8dc8d858"
+dependencies = [
+ "bitflags",
+ "bytes",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-range-header",
+ "pin-project-lite",
+ "tower",
+ "tower-layer",
+ "tower-service",
+]
+
 [[package]]
 name = "tower-http"
 version = "0.4.0"
@@ -4109,7 +4140,6 @@ dependencies = [
 "http-body",
 "http-range-header",
 "pin-project-lite",
- "tower",
 "tower-layer",
 "tower-service",
 "tracing",
@@ -4244,7 +4274,7 @@ checksum = "497961ef93d974e23eb6f433eb5fe1b7930b659f06d12dec6fc44a8f554c0bba"
 [[package]]
 name = "typify"
 version = "0.0.11-dev"
-source = "git+https://github.com/oxidecomputer/typify#05d65ea62be9061c1abd0c31d955d0248120d301"
+source = "git+https://github.com/oxidecomputer/typify#18e7faf1957812626e3bf459e20fbe16785de2d4"
 dependencies = [
 "typify-impl",
 "typify-macro",
@@ -4253,7 +4283,7 @@ dependencies = [
 [[package]]
 name = "typify-impl"
 version = "0.0.11-dev"
-source = "git+https://github.com/oxidecomputer/typify#05d65ea62be9061c1abd0c31d955d0248120d301"
+source = "git+https://github.com/oxidecomputer/typify#18e7faf1957812626e3bf459e20fbe16785de2d4"
 dependencies = [
 "heck",
 "log",
@@ -4271,7 +4301,7 @@ dependencies = [
 [[package]]
 name = "typify-macro"
 version = "0.0.11-dev"
-source = "git+https://github.com/oxidecomputer/typify#05d65ea62be9061c1abd0c31d955d0248120d301"
+source = "git+https://github.com/oxidecomputer/typify#18e7faf1957812626e3bf459e20fbe16785de2d4"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -4362,9 +4392,9 @@ dependencies = [

 [[package]]
 name = "unicode-bidi"
-version = "0.3.10"
+version = "0.3.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d54675592c1dbefd78cbd98db9bacd89886e1ca50692a0692baefffdeb92dd58"
+checksum = "524b68aca1d05e03fdf03fcdce2c6c94b6daf6d16861ddaa7e4f2b6638a9052c"

 [[package]]
 name = "unicode-general-category"
@@ -4380,9 +4410,9 @@ checksum = "d70b6494226b36008c8366c288d77190b3fad2eb4c10533139c1c1f461127f1a"

 [[package]]
 name = "unicode-ident"
-version = "1.0.6"
+version = "1.0.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "84a22b9f218b40614adcb3f4ff08b703773ad44fa9423e4e0d346d5db86e4ebc"
+checksum = "e5464a87b239f13a63a501f2701565754bae92d243d4bb7eb12f6d57d2269bf4"

 [[package]]
 name = "unicode-normalization"
@@ -4420,16 +4450,16 @@ checksum = "39ec24b3121d976906ece63c9daad25b85969647682eee313cb5779fdd69e14e"
 [[package]]
 name = "unicode_names2"
 version = "0.6.0"
-source = "git+https://github.com/youknowone/unicode_names2.git?tag=v0.6.0+character-alias#4ce16aa85cbcdd9cc830410f1a72ef9a235f2fde"
+source = "git+https://github.com/youknowone/unicode_names2.git?rev=4ce16aa85cbcdd9cc830410f1a72ef9a235f2fde#4ce16aa85cbcdd9cc830410f1a72ef9a235f2fde"
 dependencies = [
 "phf",
 ]

 [[package]]
 name = "unsafe-libyaml"
-version = "0.2.5"
+version = "0.2.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bc7ed8ba44ca06be78ea1ad2c3682a43349126c8818054231ee6f4748012aed2"
+checksum = "ad2024452afd3874bf539695e04af6732ba06517424dbf958fdb16a01f3bef6c"

 [[package]]
 name = "untrusted"
@@ -4712,7 +4742,7 @@ checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"

 [[package]]
 name = "windmill"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "axum",
@@ -4739,7 +4769,7 @@ dependencies = [

 [[package]]
 name = "windmill-api"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "argon2",
@@ -4778,7 +4808,7 @@ dependencies = [
 "tokio-util",
 "tower",
 "tower-cookies",
- "tower-http",
+ "tower-http 0.4.0",
 "tracing",
 "tracing-subscriber",
 "urlencoding",
@@ -4794,7 +4824,7 @@ dependencies = [

 [[package]]
 name = "windmill-api-client"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "base64 0.21.0",
 "chrono",
@@ -4809,7 +4839,7 @@ dependencies = [

 [[package]]
 name = "windmill-audit"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "chrono",
 "serde",
@@ -4822,7 +4852,7 @@ dependencies = [

 [[package]]
 name = "windmill-common"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "axum",
@@ -4847,7 +4877,7 @@ dependencies = [

 [[package]]
 name = "windmill-parser"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "serde",
 "serde_json",
@@ -4855,13 +4885,14 @@ dependencies = [

 [[package]]
 name = "windmill-parser-bash"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "itertools",
 "lazy_static",
 "phf",
 "regex",
+ "serde_json",
 "unicode-general-category",
 "windmill-common",
 "windmill-parser",
@@ -4869,7 +4900,7 @@ dependencies = [

 [[package]]
 name = "windmill-parser-go"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "itertools",
@@ -4881,7 +4912,7 @@ dependencies = [

 [[package]]
 name = "windmill-parser-py"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "itertools",
@@ -4896,7 +4927,7 @@ dependencies = [

 [[package]]
 name = "windmill-parser-ts"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "deno_core",
@@ -4910,7 +4941,7 @@ dependencies = [

 [[package]]
 name = "windmill-queue"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "chrono",
@@ -4933,7 +4964,7 @@ dependencies = [

 [[package]]
 name = "windmill-worker"
-version = "1.72.0"
+version = "1.74.2"
 dependencies = [
 "anyhow",
 "async-recursion",
@@ -5049,9 +5080,9 @@ checksum = "447660ad36a13288b1db4d4248e857b510e8c3a225c822ba4fb748c0aafecffd"

 [[package]]
 name = "winnow"
-version = "0.3.3"
+version = "0.3.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "faf09497b8f8b5ac5d3bb4d05c0a99be20f26fd3d5f2db7b0716e946d5103658"
+checksum = "ee7b2c67f962bf5042bfd8b6a916178df33a26eec343ae064cb8e069f638fa6f"
 dependencies = [
 "memchr",
 ]
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "windmill"
-version = "1.72.0"
+version = "1.74.2"
 authors.workspace = true
 edition.workspace = true

@@ -19,7 +19,7 @@ members = [
 ]

 [workspace.package]
-version = "1.72.0"
+version = "1.74.2"
 authors = ["Ruben Fiszel <ruben@windmill.dev>"]
 edition = "2021"

@@ -123,8 +123,8 @@ regex = "^1"
 deno_core = "^0"
 async-recursion = "^1"
 swc_common = "^0"
-swc_ecma_parser = "^0"
-swc_ecma_ast = "^0"
+swc_ecma_parser = "0.128.2"
+swc_ecma_ast = "0.98.1"
 base64 = "0.21.0"
 unicode-general-category = "^0"
 hmac = "0.12.1"
--- a/backend/migrations/20230303064952_add_root_leaf_jobs.down.sql
+++ b/backend/migrations/20230303064952_add_root_leaf_jobs.down.sql
@@ -0,0 +1 @@
+-- Add down migration script here
--- a/backend/migrations/20230303064952_add_root_leaf_jobs.up.sql
+++ b/backend/migrations/20230303064952_add_root_leaf_jobs.up.sql
@@ -0,0 +1,3 @@
+-- Add up migration script here
+ALTER TABLE queue ADD COLUMN root_job uuid;
+ALTER TABLE queue ADD COLUMN leaf_jobs jsonb;
--- a/backend/parsers/windmill-parser-bash/Cargo.toml
+++ b/backend/parsers/windmill-parser-bash/Cargo.toml
@@ -16,4 +16,5 @@ unicode-general-category.workspace = true
 itertools.workspace = true
 anyhow.workspace = true
 regex.workspace = true
-lazy_static.workspace = true
+lazy_static.workspace = true
+serde_json.workspace = true
--- a/backend/parsers/windmill-parser-bash/src/lib.rs
+++ b/backend/parsers/windmill-parser-bash/src/lib.rs
@@ -1,6 +1,8 @@
 #![allow(non_snake_case)] // TODO: switch to parse_* function naming

+use anyhow::anyhow;
 use regex::Regex;
+use serde_json::json;

 use std::collections::HashMap;
 use windmill_parser::{Arg, MainArgSignature, Typ};
@@ -17,19 +19,32 @@ pub fn parse_bash_sig(code: &str) -> windmill_common::error::Result<MainArgSigna
    }
 }

+lazy_static::lazy_static! {
+    static ref RE: Regex = Regex::new(r#"(?m)^(\w+)="\$(?:(\d+)|\{(\d+):-(.*)\})"$"#).unwrap();
+}
+
 fn parse_file(code: &str) -> anyhow::Result<Option<Vec<Arg>>> {
-    let mut hm = HashMap::new();
-    let re = Regex::new(r#"(?m)^(\w+)="\$(\d+)"$"#).unwrap();
-    for cap in re.captures_iter(code) {
-        hm.insert(cap[2].parse::<i32>()?, cap[1].to_string());
+    let mut hm: HashMap<i32, (String, Option<String>)> = HashMap::new();
+    for cap in RE.captures_iter(code) {
+        hm.insert(
+            cap.get(2)
+                .or(cap.get(3))
+                .and_then(|x| x.as_str().parse::<i32>().ok())
+                .ok_or_else(|| anyhow!("Impossible to parse arg digit"))?,
+            (
+                cap[1].to_string(),
+                cap.get(4).map(|x| x.as_str().to_string()),
+            ),
+        );
    }
    let mut args = vec![];
    for i in 1..20 {
        if hm.contains_key(&i) {
+            let (name, default) = hm.get(&i).unwrap();
            args.push(Arg {
-                name: hm[&i].clone(),
+                name: name.clone(),
                typ: Typ::Str(None),
-                default: None,
+                default: default.clone().map(|x| json!(x)),
                otyp: None,
                has_default: false,
            });
@@ -43,6 +58,8 @@ fn parse_file(code: &str) -> anyhow::Result<Option<Vec<Arg>>> {
 #[cfg(test)]
 mod tests {

+    use serde_json::json;
+
    use super::*;

    #[test]
@@ -50,8 +67,7 @@ mod tests {
        let code = r#"
 token="$1"
 image="$2"
-digest="${3:-latest}"
-foo="$4"
+digest="${3:-latest with spaces}"

 "#;
        //println!("{}", serde_json::to_string()?);
@@ -74,6 +90,13 @@ foo="$4"
                        typ: Typ::Str(None),
                        default: None,
                        has_default: false
+                    },
+                    Arg {
+                        otyp: None,
+                        name: "digest".to_string(),
+                        typ: Typ::Str(None),
+                        default: Some(json!("latest with spaces")),
+                        has_default: false
                    }
                ]
            }
--- a/backend/sqlx-data.json
+++ b/backend/sqlx-data.json
@@ -468,6 +468,27 @@
    },
    "query": "DELETE FROM workspace_settings WHERE workspace_id = $1"
  },
+  "0e7d95f4913e5775651971d741a3b5c1ef5dfe079be5325abe2866d39a7fe5fb": {
+    "describe": {
+      "columns": [
+        {
+          "name": "path",
+          "ordinal": 0,
+          "type_info": "Varchar"
+        }
+      ],
+      "nullable": [
+        false
+      ],
+      "parameters": {
+        "Left": [
+          "Text",
+          "Text"
+        ]
+      }
+    },
+    "query": "DELETE FROM script WHERE path = $1 AND workspace_id = $2 RETURNING path"
+  },
  "11b1586acdfc180c5a077861ee1f7201fcbcec9d0ebada464f9d952c9c3e400d": {
    "describe": {
      "columns": [],
@@ -645,27 +666,6 @@
    },
    "query": "SELECT * FROM workspace_settings WHERE workspace_id = $1"
  },
-  "176afff6dfceac701d499663f15fb7f569fd9d449406df4c5ecc811414429d42": {
-    "describe": {
-      "columns": [
-        {
-          "name": "flow_status",
-          "ordinal": 0,
-          "type_info": "Jsonb"
-        }
-      ],
-      "nullable": [
-        null
-      ],
-      "parameters": {
-        "Left": [
-          "Uuid",
-          "Text"
-        ]
-      }
-    },
-    "query": "SELECT flow_status FROM completed_job WHERE id = $1 AND workspace_id = $2 \n            UNION ALL SELECT flow_status FROM queue WHERE id = $1 AND workspace_id = $2 "
-  },
  "187a27d18f78f068319a0ec684f71a76c49dd09c5c74c2c777e35233c4f5a281": {
    "describe": {
      "columns": [
@@ -826,75 +826,6 @@
    },
    "query": "\n        SELECT id, flow_status, suspend, script_path\n        FROM queue\n        WHERE id = $1\n        "
  },
-  "1e35c39bc786d638252e5483ca4efae9a041f7e845341f8bfd715ddd9e899499": {
-    "describe": {
-      "columns": [
-        {
-          "name": "id",
-          "ordinal": 0,
-          "type_info": "Uuid"
-        }
-      ],
-      "nullable": [
-        false
-      ],
-      "parameters": {
-        "Left": [
-          "Varchar",
-          "Uuid",
-          "Bool",
-          "Uuid",
-          "Varchar",
-          "Varchar",
-          "Timestamptz",
-          "Int8",
-          "Varchar",
-          "Text",
-          "Text",
-          "Jsonb",
-          {
-            "Custom": {
-              "kind": {
-                "Enum": [
-                  "script",
-                  "preview",
-                  "flow",
-                  "dependencies",
-                  "flowpreview",
-                  "script_hub",
-                  "identity",
-                  "flowdependencies"
-                ]
-              },
-              "name": "job_kind"
-            }
-          },
-          "Varchar",
-          "Jsonb",
-          "Jsonb",
-          "Bool",
-          {
-            "Custom": {
-              "kind": {
-                "Enum": [
-                  "python3",
-                  "deno",
-                  "go",
-                  "bash"
-                ]
-              },
-              "name": "script_lang"
-            }
-          },
-          "Bool",
-          "Text",
-          "Varchar",
-          "Bool"
-        ]
-      }
-    },
-    "query": "INSERT INTO queue\n            (workspace_id, id, running, parent_job, created_by, permissioned_as, scheduled_for, \n                script_hash, script_path, raw_code, raw_lock, args, job_kind, schedule_path, raw_flow, flow_status, is_flow_step, language, started_at, same_worker, pre_run_error, email, visible_to_owner)\n            VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, CASE WHEN $3 THEN now() END, $19, $20, $21, $22) RETURNING id"
-  },
  "1eaf8d677d520c7f2f303a731de6b6d939918e41ad0d1c748d80db3fd33cb9d3": {
    "describe": {
      "columns": [],
@@ -1176,6 +1107,20 @@
    },
    "query": "SELECT set_config('session.folders_read', $1, true)"
  },
+  "2a3ebe1b0eae5b2164894321e138cc4dc0293788aeb98d05d95d18dfc708d6a6": {
+    "describe": {
+      "columns": [],
+      "nullable": [],
+      "parameters": {
+        "Left": [
+          "Text",
+          "Jsonb",
+          "Uuid"
+        ]
+      }
+    },
+    "query": "\n            UPDATE queue\n               SET leaf_jobs = JSONB_SET(coalesce(leaf_jobs, '{}'::jsonb), ARRAY[$1::TEXT], $2)\n             WHERE COALESCE((SELECT root_job FROM queue WHERE id = $3), $3) = id\n            "
+  },
  "2a4be8334db7d39f3d954193a8b0169cc4a4a07e081d2fa61d8764879d6a8ff5": {
    "describe": {
      "columns": [],
@@ -3657,33 +3602,6 @@
    },
    "query": "SELECT is_admin FROM usr where username = $1 AND workspace_id = $2 AND disabled = false"
  },
-  "92ce38eaaef9e793a49788bf3b7fc88340e83da57b785364a477f08c776f66f3": {
-    "describe": {
-      "columns": [
-        {
-          "name": "flow_status",
-          "ordinal": 0,
-          "type_info": "Jsonb"
-        },
-        {
-          "name": "parent_job",
-          "ordinal": 1,
-          "type_info": "Uuid"
-        }
-      ],
-      "nullable": [
-        null,
-        null
-      ],
-      "parameters": {
-        "Left": [
-          "Uuid",
-          "Text"
-        ]
-      }
-    },
-    "query": "SELECT flow_status, parent_job FROM completed_job WHERE id = $1 AND workspace_id = $2 \n                UNION ALL SELECT flow_status, parent_job FROM queue WHERE id = $1 AND workspace_id = $2 "
-  },
  "930ad84a4db26fa6d2c8447d447099e944a0ea7b1266b4d02cee620fe3d761a5": {
    "describe": {
      "columns": [],
@@ -4009,6 +3927,76 @@
    },
    "query": "SELECT content FROM script WHERE path = $1 AND workspace_id = $2 AND\n         created_at = (SELECT max(created_at) FROM script WHERE path = $1 AND archived = false AND workspace_id = $2)"
  },
+  "a1c41bbeb2d64fa1e7dfd2ed053191a1de5d786ae8c22e225e450865ecac94e9": {
+    "describe": {
+      "columns": [
+        {
+          "name": "id",
+          "ordinal": 0,
+          "type_info": "Uuid"
+        }
+      ],
+      "nullable": [
+        false
+      ],
+      "parameters": {
+        "Left": [
+          "Varchar",
+          "Uuid",
+          "Bool",
+          "Uuid",
+          "Varchar",
+          "Varchar",
+          "Timestamptz",
+          "Int8",
+          "Varchar",
+          "Text",
+          "Text",
+          "Jsonb",
+          {
+            "Custom": {
+              "kind": {
+                "Enum": [
+                  "script",
+                  "preview",
+                  "flow",
+                  "dependencies",
+                  "flowpreview",
+                  "script_hub",
+                  "identity",
+                  "flowdependencies"
+                ]
+              },
+              "name": "job_kind"
+            }
+          },
+          "Varchar",
+          "Jsonb",
+          "Jsonb",
+          "Bool",
+          {
+            "Custom": {
+              "kind": {
+                "Enum": [
+                  "python3",
+                  "deno",
+                  "go",
+                  "bash"
+                ]
+              },
+              "name": "script_lang"
+            }
+          },
+          "Bool",
+          "Text",
+          "Varchar",
+          "Bool",
+          "Uuid"
+        ]
+      }
+    },
+    "query": "INSERT INTO queue\n            (workspace_id, id, running, parent_job, created_by, permissioned_as, scheduled_for, \n                script_hash, script_path, raw_code, raw_lock, args, job_kind, schedule_path, raw_flow, flow_status, is_flow_step, language, started_at, same_worker, pre_run_error, email, visible_to_owner, root_job)\n            VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, CASE WHEN $3 THEN now() END, $19, $20, $21, $22, $23) RETURNING id"
+  },
  "a227548b6604c56bfc15eb780bd8ee72a89dc6701a50f5048e928bd87baa7b9a": {
    "describe": {
      "columns": [
@@ -4119,6 +4107,28 @@
    },
    "query": "UPDATE flow SET dependency_job = $1 WHERE path = $2 AND workspace_id = $3"
  },
+  "a5f9fb82791103e2bbaf9cb6d87e8c50495d12d87f8ed83382068203a8dd7a67": {
+    "describe": {
+      "columns": [
+        {
+          "name": "?column?",
+          "ordinal": 0,
+          "type_info": "Jsonb"
+        }
+      ],
+      "nullable": [
+        null
+      ],
+      "parameters": {
+        "Left": [
+          "Text",
+          "Uuid",
+          "Text"
+        ]
+      }
+    },
+    "query": "SELECT leaf_jobs->$1::text FROM queue WHERE COALESCE((SELECT root_job FROM queue WHERE id = $2), $2) = id AND workspace_id = $3"
+  },
  "a6145b0482c9e5da245059a80b1563cad20318fd2dd8aef33f9ca97de1826b8b": {
    "describe": {
      "columns": [],
@@ -4875,27 +4885,6 @@
    },
    "query": "SELECT result FROM completed_job WHERE id = $1"
  },
-  "c2d0e44faab6981a21ca28dfd6f4eef9dfcafb471852e701c0bbc8ae11344325": {
-    "describe": {
-      "columns": [
-        {
-          "name": "parent_job",
-          "ordinal": 0,
-          "type_info": "Uuid"
-        }
-      ],
-      "nullable": [
-        null
-      ],
-      "parameters": {
-        "Left": [
-          "Uuid",
-          "Text"
-        ]
-      }
-    },
-    "query": "SELECT parent_job FROM completed_job WHERE id = $1 AND workspace_id = $2 UNION ALL SELECT parent_job FROM queue WHERE id = $1 AND workspace_id = $2"
-  },
  "c2d6cb56c1dea4498e2aab9ea9301dbbaa127602a38f57f5add4108fdc209b1a": {
    "describe": {
      "columns": [
@@ -5051,6 +5040,18 @@
    },
    "query": "\n        SELECT id, flow_status, suspend, script_path\n        FROM queue\n        WHERE id = ( SELECT parent_job FROM queue WHERE id = $1 UNION ALL SELECT parent_job FROM completed_job WHERE id = $1)\n        FOR UPDATE\n        "
  },
+  "c9d97800eb0ec87df8e8959b283dacb2c6cce422365ed394375641488ceb6b65": {
+    "describe": {
+      "columns": [],
+      "nullable": [],
+      "parameters": {
+        "Left": [
+          "Text"
+        ]
+      }
+    },
+    "query": "UPDATE worker_ping SET ping_at = now() WHERE worker = $1"
+  },
  "cac594031a21b4806de9c4616317d3541522ef9712a83ecff7bd8b5f6e870748": {
    "describe": {
      "columns": [],
--- a/backend/tests/worker.rs
+++ b/backend/tests/worker.rs
@@ -836,6 +836,7 @@ impl RunJob {
            /* scheduled_for_o */ None,
            /* schedule_path */ None,
            /* parent_job */ None,
+            /* root job  */ None,
            /* is_flow_step */ false,
            /* running */ false,
            None,
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"

 info:
-  version: 1.72.0
+  version: 1.74.2
  title: Windmill API

  contact:
@@ -2278,7 +2278,7 @@ paths:

  /w/{workspace}/scripts/delete/h/{hash}:
    post:
-      summary: delete script by hash (erase content but keep hash)
+      summary: delete script by hash (erase content but keep hash, require admin)
      operationId: deleteScriptByHash
      tags:
        - script
@@ -2293,6 +2293,23 @@ paths:
              schema:
                $ref: "#/components/schemas/Script"

+  /w/{workspace}/scripts/delete/p/{path}:
+    post:
+      summary: delete all scripts at a given path (require admin)
+      operationId: deleteScriptByPath
+      tags:
+        - script
+      parameters:
+        - $ref: "#/components/parameters/WorkspaceId"
+        - $ref: "#/components/parameters/ScriptPath"
+      responses:
+        "200":
+          description: script path
+          content:
+            application/json:
+              schema:
+                type: string
+
  /w/{workspace}/scripts/get/p/{path}:
    get:
      summary: get script by path
@@ -2538,11 +2555,6 @@ paths:
          required: true
          schema:
            type: string
-        - name: skip_direct
-          description: Skip checking that the node is part of the given flow.
-          in: query
-          schema:
-            type: boolean
      responses:
        "200":
          description: job result
--- a/backend/windmill-api/src/apps.rs
+++ b/backend/windmill-api/src/apps.rs
@@ -313,10 +313,13 @@ async fn create_app(
    Extension(user_db): Extension<UserDB>,
    Extension(webhook): Extension<WebhookShared>,
    Path(w_id): Path<String>,
-    Json(app): Json<CreateApp>,
+    Json(mut app): Json<CreateApp>,
 ) -> Result<(StatusCode, String)> {
    let mut tx = user_db.begin(&authed).await?;

+    app.policy.on_behalf_of = Some(username_to_permissioned_as(&authed.username));
+    app.policy.on_behalf_of_email = Some(authed.email);
+
    let id = sqlx::query_scalar!(
        "INSERT INTO app
            (workspace_id, path, summary, policy, versions)
@@ -463,7 +466,9 @@ async fn update_app(
            sqlb.set_str("summary", nsummary);
        }

-        if let Some(npolicy) = ns.policy {
+        if let Some(mut npolicy) = ns.policy {
+            npolicy.on_behalf_of = Some(username_to_permissioned_as(&authed.username));
+            npolicy.on_behalf_of_email = Some(authed.email);
            sqlb.set(
                "policy",
                &format!(
@@ -670,6 +675,7 @@ async fn execute_component(
        None,
        None,
        None,
+        None,
        false,
        false,
        None,
@@ -727,6 +733,9 @@ fn build_args(
    path: String,
    args: &Map<String, Value>,
 ) -> Result<Map<String, Value>> {
+    // disallow var and res access in args coming from the user for security reasons
+    args.into_iter()
+        .try_for_each(|x| disallow_var_res_access(x.1))?;
    let static_args = policy
        .triggerables
        .get(&path)
@@ -747,3 +756,20 @@ fn build_args(
    }
    Ok(args)
 }
+
+fn disallow_var_res_access(args: &serde_json::Value) -> Result<()> {
+    match args {
+        Value::Object(v) => v.into_iter().try_for_each(|x| disallow_var_res_access(x.1)),
+        Value::Array(arr) => arr.into_iter().try_for_each(|v| disallow_var_res_access(v)),
+        Value::String(s) => {
+            if s.starts_with("$var:") || s.starts_with("$res:") {
+                Err(Error::BadRequest(format!(
+                    "For security reasons, variable or resource access is not allowed as dynamic argument"
+                )))
+            } else {
+                Ok(())
+            }
+        }
+        _ => Ok(()),
+    }
+}
--- a/backend/windmill-api/src/flows.rs
+++ b/backend/windmill-api/src/flows.rs
@@ -237,6 +237,7 @@ async fn create_flow(
        None,
        None,
        None,
+        None,
        false,
        false,
        None,
@@ -393,6 +394,7 @@ async fn update_flow(
        None,
        None,
        None,
+        None,
        false,
        false,
        None,
@@ -638,8 +640,6 @@ mod tests {
                "type": "script",
                "path": "test"
              },
-              "stop_after_if": null,
-              "summary": null
            },
            {
              "id": "b",
@@ -648,15 +648,12 @@ mod tests {
                "input_transforms": {},
                "type": "rawscript",
                "content": "test",
-                "lock": null,
-                "path": null,
                "language": "deno"
              },
              "stop_after_if": {
                  "expr": "foo = 'bar'",
                  "skip_if_stopped": false
-              },
-              "summary": null
+              }
            },
            {
              "id": "c",
@@ -678,8 +675,7 @@ mod tests {
              "stop_after_if": {
                  "expr": "previous.isEmpty()",
                  "skip_if_stopped": false,
-              },
-              "summary": null
+              }
            }
          ],
          "failure_module": {
@@ -693,8 +689,7 @@ mod tests {
            "stop_after_if": {
                "expr": "previous.isEmpty()",
                "skip_if_stopped": false
-            },
-            "summary": null
+            }
          }
        });
        assert_eq!(dbg!(serde_json::json!(fv)), dbg!(expect));
--- a/backend/windmill-api/src/jobs.rs
+++ b/backend/windmill-api/src/jobs.rs
@@ -102,10 +102,9 @@ pub fn global_service() -> Router {

 async fn get_result_by_id(
    Extension(db): Extension<DB>,
-    Query(ResultByIdQuery { skip_direct }): Query<ResultByIdQuery>,
-    Path((w_id, flow_id, node_id)): Path<(String, String, String)>,
+    Path((w_id, flow_id, node_id)): Path<(String, Uuid, String)>,
 ) -> windmill_common::error::JsonResult<serde_json::Value> {
-    let res = windmill_queue::get_result_by_id(db, skip_direct, w_id, flow_id, node_id).await?;
+    let res = windmill_queue::get_result_by_id(db, w_id, flow_id, node_id).await?;
    Ok(Json(res))
 }

@@ -177,11 +176,6 @@ async fn get_job(
    Ok(Json(job))
 }

-#[derive(Deserialize)]
-pub struct ResultByIdQuery {
-    pub skip_direct: bool,
-}
-
 pub async fn get_job_by_id<'c>(
    mut tx: Transaction<'c, Postgres>,
    w_id: &str,
@@ -1078,6 +1072,8 @@ impl From<UnifiedJob> for Job {
                visible_to_owner: uj.visible_to_owner,
                suspend: uj.suspend,
                mem_peak: uj.mem_peak,
+                root_job: None,
+                leaf_jobs: None,
            }),
            t => panic!("job type {} not valid", t),
        }
@@ -1173,6 +1169,7 @@ pub async fn run_flow_by_path(
        scheduled_for,
        None,
        run_query.parent_job,
+        run_query.parent_job,
        false,
        false,
        None,
@@ -1208,6 +1205,7 @@ pub async fn run_job_by_path(
        scheduled_for,
        None,
        run_query.parent_job,
+        run_query.parent_job,
        false,
        false,
        None,
@@ -1360,6 +1358,7 @@ pub async fn run_wait_result_job_by_path(
        scheduled_for,
        None,
        run_query.parent_job,
+        run_query.parent_job,
        false,
        false,
        None,
@@ -1406,6 +1405,7 @@ pub async fn run_wait_result_job_by_hash(
        scheduled_for,
        None,
        run_query.parent_job,
+        run_query.parent_job,
        false,
        false,
        None,
@@ -1451,6 +1451,7 @@ pub async fn run_wait_result_flow_by_path(
        scheduled_for,
        None,
        run_query.parent_job,
+        run_query.parent_job,
        false,
        false,
        None,
@@ -1513,6 +1514,7 @@ async fn run_preview_job(
        scheduled_for,
        None,
        None,
+        None,
        false,
        false,
        None,
@@ -1546,6 +1548,7 @@ async fn run_preview_flow_job(
        scheduled_for,
        None,
        None,
+        None,
        false,
        false,
        None,
@@ -1581,6 +1584,7 @@ pub async fn run_job_by_hash(
        scheduled_for,
        None,
        run_query.parent_job,
+        run_query.parent_job,
        false,
        false,
        None,
--- a/backend/windmill-api/src/oauth2.rs
+++ b/backend/windmill-api/src/oauth2.rs
@@ -734,14 +734,10 @@ async fn slack_command(
        .map_err(|_| error::Error::BadRequest("invalid payload".to_string()))?;

    let body = String::from_utf8_lossy(&body);
-    if SLACK_SIGNING_SECRET
-        .as_ref()
-        .as_ref()
-        .map(|sv| sv.verify(&ts, &body, &sig).ok())
-        .flatten()
-        .is_none()
-    {
-        return Err(error::Error::BadRequest("verification failed".to_owned()));
+    if let Some(sv) = SLACK_SIGNING_SECRET.as_ref() {
+        if sv.verify(&ts, &body, &sig).ok().is_none() {
+            return Err(error::Error::BadRequest("verification failed".to_owned()));
+        }
    }

    let mut tx = db.begin().await?;
@@ -785,6 +781,7 @@ async fn slack_command(
                None,
                None,
                None,
+                None,
                false,
                false,
                None,
--- a/backend/windmill-api/src/scripts.rs
+++ b/backend/windmill-api/src/scripts.rs
@@ -70,6 +70,7 @@ pub fn workspaced_service() -> Router {
        .route("/exists/p/*path", get(exists_script_by_path))
        .route("/archive/h/:hash", post(archive_script_by_hash))
        .route("/delete/h/:hash", post(delete_script_by_hash))
+        .route("/delete/p/*path", post(delete_script_by_path))
        .route("/get/h/:hash", get(get_script_by_hash))
        .route("/raw/h/:hash", get(raw_script_by_hash))
        .route("/deployment_status/h/:hash", get(get_deployment_status))
@@ -123,6 +124,7 @@ async fn list_scripts(
            AND workspace_id = ?)"
                .bind(&w_id),
        );
+        sqlb.and_where_eq("archived", true);
    } else {
        sqlb.and_where_eq("archived", false);
    }
@@ -377,6 +379,7 @@ async fn create_script(
            None,
            None,
            None,
+            None,
            false,
            false,
            None,
@@ -718,6 +721,46 @@ async fn delete_script_by_hash(
    Ok(Json(script))
 }

+async fn delete_script_by_path(
+    authed: Authed,
+    Extension(user_db): Extension<UserDB>,
+    Extension(webhook): Extension<WebhookShared>,
+    Extension(db): Extension<DB>,
+    Path((w_id, path)): Path<(String, StripPath)>,
+) -> JsonResult<String> {
+    let mut tx = user_db.begin(&authed).await?;
+    let path = path.to_path();
+
+    require_admin(authed.is_admin, &authed.username)?;
+    let script = sqlx::query_scalar!(
+        "DELETE FROM script WHERE path = $1 AND workspace_id = $2 RETURNING path",
+        path,
+        w_id
+    )
+    .fetch_one(&db)
+    .await
+    .map_err(|e| Error::InternalErr(format!("deleting script by path {w_id}: {e}")))?;
+
+    audit_log(
+        &mut tx,
+        &authed.username,
+        "scripts.delete",
+        ActionKind::Delete,
+        &w_id,
+        Some(&path),
+        Some([("workspace", w_id.as_str())].into()),
+    )
+    .await?;
+    tx.commit().await?;
+
+    webhook.send_message(
+        w_id.clone(),
+        WebhookMessage::DeleteScriptPath { workspace: w_id, path: path.to_string() },
+    );
+
+    Ok(Json(script))
+}
+
 async fn parse_python_code_to_jsonschema(
    Json(code): Json<String>,
 ) -> JsonResult<windmill_parser::MainArgSignature> {
--- a/backend/windmill-api/src/webhook_util.rs
+++ b/backend/windmill-api/src/webhook_util.rs
@@ -37,6 +37,7 @@ pub enum WebhookMessage {
    CreateScript { workspace: String, path: String, hash: String },
    UpdateScript { workspace: String, path: String, hash: String },
    DeleteScript { workspace: String, hash: String },
+    DeleteScriptPath { workspace: String, path: String },
    CreateVariable { workspace: String, path: String },
    UpdateVariable { workspace: String, old_path: String, new_path: String },
    DeleteVariable { workspace: String, path: String },
--- a/backend/windmill-common/src/flow_status.rs
+++ b/backend/windmill-common/src/flow_status.rs
@@ -125,7 +125,7 @@ pub enum FlowStatusModule {
    },
 }

-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Serialize, Deserialize)]
 pub enum JobResult {
    SingleJob(Uuid),
    ListJob(Vec<Uuid>),
--- a/backend/windmill-queue/src/jobs.rs
+++ b/backend/windmill-queue/src/jobs.rs
@@ -6,10 +6,7 @@
 * LICENSE-AGPL for a copy of the license.
 */

-use std::{
-    collections::{HashMap, VecDeque},
-    str::FromStr,
-};
+use std::collections::HashMap;

 use anyhow::Context;
 use reqwest::Client;
@@ -20,7 +17,7 @@ use ulid::Ulid;
 use uuid::Uuid;
 use windmill_audit::{audit_log, ActionKind};
 use windmill_common::{
-    error::{self, to_anyhow, Error},
+    error::{self, Error},
    flow_status::{FlowStatus, JobResult, MAX_RETRY_ATTEMPTS, MAX_RETRY_INTERVAL},
    flows::{FlowModule, FlowModuleValue, FlowValue},
    scripts::{get_full_hub_script_by_path, HubScript, ScriptHash, ScriptLang},
@@ -153,102 +150,26 @@ pub async fn pull(
    Ok(job)
 }

-pub async fn find_recursively_downward(
-    db: &Pool<Postgres>,
-    w_id: &str,
-    flow_id: Uuid,
-    node_id: &str,
-) -> windmill_common::error::Result<Option<JobResult>> {
-    let mut bfs_stack = VecDeque::new();
-    bfs_stack.push_back(flow_id);
-    while bfs_stack.len() > 0 {
-        let parent_id = bfs_stack.pop_front().unwrap();
-        let job = sqlx::query_scalar!(
-            "SELECT flow_status FROM completed_job WHERE id = $1 AND workspace_id = $2 
-            UNION ALL SELECT flow_status FROM queue WHERE id = $1 AND workspace_id = $2 ",
-            parent_id,
-            w_id
-        )
-        .fetch_optional(db)
-        .await?
-        .flatten();
-        if let Some(r) = job {
-            let status = serde_json::from_value::<FlowStatus>(r).map_err(to_anyhow)?;
-            for m in status.modules.iter() {
-                let id = m.id();
-                if id == node_id {
-                    return Ok(m.job_result());
-                }
-                if let Some(job_id) = m.job() {
-                    bfs_stack.push_back(job_id);
-                }
-            }
-        }
-    }
-    Ok(None)
-}
-
 pub async fn get_result_by_id(
    db: Pool<Postgres>,
-    mut skip_direct: bool,
    w_id: String,
-    flow_id: String,
+    flow_id: Uuid,
    node_id: String,
 ) -> error::Result<serde_json::Value> {
-    let mut result_id: Option<JobResult> = None;
-    let mut parent_id = Uuid::from_str(&flow_id).ok();
-    let mut lparent_id = parent_id.clone();
-    while result_id.is_none() && parent_id.is_some() {
-        if !skip_direct {
-            let r = sqlx::query!(
-                "SELECT flow_status, parent_job FROM completed_job WHERE id = $1 AND workspace_id = $2 
-                UNION ALL SELECT flow_status, parent_job FROM queue WHERE id = $1 AND workspace_id = $2 ",
-                parent_id.unwrap(),
-                w_id,
-            )
-            .fetch_optional(&db)
-            .await?;
-            if let Some(r) = r {
-                let value = r
-                    .flow_status
-                    .as_ref()
-                    .ok_or_else(|| Error::InternalErr(format!("requiring a flow status value")))?
-                    .to_owned();
-                lparent_id = parent_id;
-                parent_id = r.parent_job;
-                let status_o = serde_json::from_value::<FlowStatus>(value).ok();
-                result_id = status_o.and_then(|status| {
-                    status
-                        .modules
-                        .iter()
-                        .find(|m| m.id() == node_id)
-                        .and_then(|m| m.job_result())
-                });
-            } else {
-                parent_id = None;
-            }
-        } else {
-            let q_parent = sqlx::query_scalar!(
-                "SELECT parent_job FROM completed_job WHERE id = $1 AND workspace_id = $2 UNION ALL SELECT parent_job FROM queue WHERE id = $1 AND workspace_id = $2",
-                parent_id.unwrap(),
-                w_id,
-            )
-            .fetch_optional(&db)
-            .await?
-            .flatten();
-            lparent_id = parent_id;
-            parent_id = q_parent;
-            skip_direct = false
-        }
-    }
-    // we could not find the node going upward from the flow by looking at all the jobs (in progress or completed)
-    // we now look downward from the flow root to the all the children completed job for a job that might hide itself
-    // in a deep non-direct parent job such as in nested branches
-    if result_id.is_none() && lparent_id.is_some() {
-        result_id = find_recursively_downward(&db, &w_id, lparent_id.unwrap(), &node_id).await?;
-    }
+    let job_result: Option<JobResult> = sqlx::query_scalar!(
+        "SELECT leaf_jobs->$1::text FROM queue WHERE COALESCE((SELECT root_job FROM queue WHERE id = $2), $2) = id AND workspace_id = $3",
+        node_id,
+        flow_id,
+        w_id,
+    )
+    .fetch_optional(&db)
+    .await?
+    .flatten()
+    .map(|x| serde_json::from_value(x).ok())
+    .flatten();
+
    let result_id = windmill_common::utils::not_found_if_none(
-        result_id,
+        job_result,
        "Flow result by id",
        format!("{}, {}", flow_id, node_id),
    )?;
@@ -330,6 +251,7 @@ pub async fn push<'c>(
    scheduled_for_o: Option<chrono::DateTime<chrono::Utc>>,
    schedule_path: Option<String>,
    parent_job: Option<Uuid>,
+    root_job: Option<Uuid>,
    is_flow_step: bool,
    mut same_worker: bool,
    pre_run_error: Option<&windmill_common::error::Error>,
@@ -582,12 +504,13 @@ pub async fn push<'c>(
        .unwrap_or_else(|| (None, None));

    let flow_status = raw_flow.as_ref().map(FlowStatus::new);
+
    let uuid = sqlx::query_scalar!(
        "INSERT INTO queue
            (workspace_id, id, running, parent_job, created_by, permissioned_as, scheduled_for, 
                script_hash, script_path, raw_code, raw_lock, args, job_kind, schedule_path, raw_flow, \
-         flow_status, is_flow_step, language, started_at, same_worker, pre_run_error, email, visible_to_owner)
-            VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, CASE WHEN $3 THEN now() END, $19, $20, $21, $22) \
+         flow_status, is_flow_step, language, started_at, same_worker, pre_run_error, email, visible_to_owner, root_job)
+            VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, CASE WHEN $3 THEN now() END, $19, $20, $21, $22, $23) \
         RETURNING id",
        workspace_id,
        job_id,
@@ -610,7 +533,8 @@ pub async fn push<'c>(
        same_worker,
        pre_run_error.map(|e| e.to_string()),
        email,
-        visible_to_owner
+        visible_to_owner,
+        root_job
    )
    .fetch_one(&mut tx)
    .await
@@ -723,6 +647,10 @@ pub struct QueuedJob {
    pub suspend: Option<i32>,
    #[serde(skip_serializing_if = "Option::is_none")]
    pub mem_peak: Option<i32>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub root_job: Option<Uuid>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub leaf_jobs: Option<serde_json::Value>,
 }

 impl QueuedJob {
--- a/backend/windmill-queue/src/schedule.rs
+++ b/backend/windmill-queue/src/schedule.rs
@@ -85,6 +85,7 @@ pub async fn push_scheduled_job<'c>(
        Some(next),
        Some(schedule.path.clone()),
        None,
+        None,
        false,
        false,
        None,
--- a/backend/windmill-worker/src/js_eval.rs
+++ b/backend/windmill-worker/src/js_eval.rs
@@ -40,7 +40,7 @@ pub async fn eval_timeout(
    let (sender, mut receiver) = oneshot::channel::<IsolateHandle>();
    let base_internal_url: String = base_internal_url.to_string();
    timeout(
-        std::time::Duration::from_millis(2000),
+        std::time::Duration::from_millis(3000),
        tokio::task::spawn_blocking(move || {
            let mut ops = vec![];

@@ -104,7 +104,7 @@ pub async fn eval_timeout(
            isolate.terminate_execution();
        };
        Error::ExecutionErr(format!(
-            "The expression of evaluation `{expr2}` took too long to execute (>2000ms)"
+            "The expression of evaluation `{expr2}` took too long to execute (>3000ms)"
        ))
    })??
 }
@@ -315,7 +315,7 @@ async fn op_get_id(args: Vec<String>) -> Result<Option<serde_json::Value>, anyho

    let client = windmill_api_client::create_client(base_url, token.clone());
    let result = client
-        .result_by_id(workspace, flow_job_id, node_id, Some(true))
+        .result_by_id(workspace, flow_job_id, node_id)
        .await
        .map_or(None, |e| Some(e.into_inner()));

--- a/backend/windmill-worker/src/worker.rs
+++ b/backend/windmill-worker/src/worker.rs
@@ -34,7 +34,7 @@ use tokio::{
    io::{AsyncBufReadExt, AsyncReadExt, AsyncWriteExt, BufReader},
    process::{Child, Command},
    sync::{
-        mpsc::{self, Sender},  watch,
+        mpsc::{self, Sender},  watch, broadcast,
    },
    time::{interval, sleep, Instant, MissedTickBehavior},
 };
@@ -840,7 +840,7 @@ async fn handle_queued_job(
    job_dir: &str,
    metrics: Metrics,
    same_worker_tx: Sender<Uuid>,
-    base_internal_url: &str
+    base_internal_url: &str,
 ) -> windmill_common::error::Result<()> {
    if job.canceled {
        return Err(Error::JsonErr(canceled_job_to_result(&job)))?;
@@ -888,10 +888,10 @@ async fn handle_queued_job(
            logs.push_str(&format!("job {} on worker {}\n", &job.id, &worker_name));
            let result = match job.job_kind {
                JobKind::Dependencies => {
-                    handle_dependency_job(&job, &mut logs, job_dir, db).await
+                    handle_dependency_job(&job, &mut logs, job_dir, db, worker_name).await
                }
                JobKind::FlowDependencies => {
-                    handle_flow_dependency_job(&job, &mut logs, job_dir, db)
+                    handle_flow_dependency_job(&job, &mut logs, job_dir, db, worker_name)
                        .await
                        .map(|()| Value::Null)
                }
@@ -912,7 +912,8 @@ async fn handle_queued_job(
                        job_dir,
                        worker_dir,
                        &mut logs,
-                        base_internal_url
+                        base_internal_url,
+                        worker_name
                    )
                    .await
                }
@@ -1064,7 +1065,9 @@ async fn handle_code_execution_job(
    job_dir: &str,
    worker_dir: &str,
    logs: &mut String,
-    base_internal_url: &str
+    base_internal_url: &str,
+    worker_name: &str
+
 ) -> error::Result<serde_json::Value> {
    let (inner_content, requirements_o, language) = match job.job_kind {
        JobKind::Preview | JobKind::Script_Hub => (
@@ -1086,7 +1089,6 @@ async fn handle_code_execution_job(
            "handle_code_execution_job should never be reachable with a non-code execution job"
        ),
    };
-    let worker_name = worker_dir.split("/").last().unwrap_or("unknown");
    let lang_str = job
        .language
        .as_ref()
@@ -1136,7 +1138,7 @@ mount {{
                token,
                &inner_content,
                &shared_mount,
-                base_internal_url
+                base_internal_url,
            )
            .await
        }
@@ -1151,7 +1153,8 @@ mount {{
                &inner_content,
                &shared_mount,
                requirements_o,
-                base_internal_url
+                base_internal_url,
+                worker_name
            )
            .await
        }
@@ -1166,7 +1169,8 @@ mount {{
                job_dir,
                requirements_o,
                &shared_mount,
-                base_internal_url
+                base_internal_url,
+                worker_name
            )
            .await
        }
@@ -1179,7 +1183,8 @@ mount {{
                &inner_content,
                job_dir,
                &shared_mount,
-                base_internal_url
+                base_internal_url,
+                worker_name
            )
            .await
        }
@@ -1208,6 +1213,7 @@ async fn handle_go_job(
    requirements_o: Option<String>,
    shared_mount: &str,
    base_internal_url: &str,
+    worker_name: &str,
 ) -> Result<serde_json::Value, Error> {
    //go does not like executing modules at temp root
    let job_dir = &format!("{job_dir}/go");
@@ -1236,6 +1242,7 @@ async fn handle_go_job(
        db,
        true,
        skip_go_mod,
+        worker_name
    )
    .await?;

@@ -1353,7 +1360,7 @@ func Run(req Req) (interface{{}}, error){{
            .stdout(Stdio::piped())
            .stderr(Stdio::piped())
            .spawn()?;
-        handle_child(&job.id, db, logs,  build_go, false).await?;
+        handle_child(&job.id, db, logs,  build_go, false, worker_name).await?;

        Command::new(NSJAIL_PATH.as_str())
            .current_dir(job_dir)
@@ -1379,7 +1386,7 @@ func Run(req Req) (interface{{}}, error){{
            .stderr(Stdio::piped())
            .spawn()?
    };
-    handle_child(&job.id, db, logs, child, !*DISABLE_NSJAIL).await?;
+    handle_child(&job.id, db, logs, child, !*DISABLE_NSJAIL, worker_name).await?;
    read_result(job_dir).await
 }

@@ -1393,6 +1400,7 @@ async fn handle_bash_job(
    job_dir: &str,
    shared_mount: &str,
    base_internal_url: &str,
+    worker_name: &str,
 ) -> Result<serde_json::Value, Error> {
    logs.push_str("\n\n--- BASH CODE EXECUTION ---\n");
    set_logs(logs, &job.id, db).await;
@@ -1456,7 +1464,7 @@ async fn handle_bash_job(
            .stderr(Stdio::piped())
            .spawn()?
    };
-    handle_child(&job.id, db, logs,  child, !*DISABLE_NSJAIL).await?;
+    handle_child(&job.id, db, logs,  child, !*DISABLE_NSJAIL, worker_name).await?;
    //for now bash jobs have an empty result object
    Ok(serde_json::json!(logs
        .lines()
@@ -1484,7 +1492,8 @@ async fn handle_deno_job(
    inner_content: &String,
    shared_mount: &str,
    lockfile: Option<String>,
-    base_internal_url: &str
+    base_internal_url: &str,
+    worker_name: &str
 ) -> error::Result<serde_json::Value> {
    logs.push_str("\n\n--- DENO CODE EXECUTION ---\n");
    set_logs(logs, &job.id, db).await;
@@ -1619,7 +1628,7 @@ run().catch(async (e) => {{
    }
    .instrument(trace_span!("create_deno_jail"))
    .await?;
-    handle_child(&job.id, db, logs, child, !*DISABLE_NSJAIL).await?;
+    handle_child(&job.id, db, logs, child, !*DISABLE_NSJAIL, worker_name).await?;
    read_result(job_dir).await
 }

@@ -1657,7 +1666,7 @@ async fn handle_python_job(
    token: String,
    inner_content: &String,
    shared_mount: &str,
-    base_internal_url: &str
+    base_internal_url: &str,
 ) -> error::Result<serde_json::Value> {
    create_dependencies_dir(job_dir).await;

@@ -1671,7 +1680,7 @@ async fn handle_python_job(
            if requirements.is_empty() {
                "".to_string()
            } else {
-                pip_compile(&job.id, &requirements, logs, job_dir, db)
+                pip_compile(&job.id, &requirements, logs, job_dir, db, worker_name)
                    .await
                    .map_err(|e| {
                        Error::ExecutionErr(format!("pip compile failed: {}", e.to_string()))
@@ -1888,7 +1897,7 @@ mount {{
            .spawn()?
    };

-    handle_child(&job.id, db, logs, child, !*DISABLE_NSJAIL).await?;
+    handle_child(&job.id, db, logs, child, !*DISABLE_NSJAIL, worker_name).await?;
    read_result(job_dir).await
 }

@@ -1918,6 +1927,7 @@ async fn handle_dependency_job(
    logs: &mut String,
    job_dir: &str,
    db: &sqlx::Pool<sqlx::Postgres>,
+    worker_name: &str,
 ) -> error::Result<serde_json::Value> {
    let content = capture_dependency_job(
        &job.id,
@@ -1932,7 +1942,8 @@ async fn handle_dependency_job(
            .unwrap_or_else(|| "no raw code"),
        logs,
        job_dir,
-        db
+        db,
+        worker_name
    )
    .await;
    match content {
@@ -1967,6 +1978,7 @@ async fn handle_flow_dependency_job(
    logs: &mut String,
    job_dir: &str,
    db: &sqlx::Pool<sqlx::Postgres>,
+    worker_name: &str,
 ) -> error::Result<()> {
    let path = job.script_path.clone().ok_or_else(|| {
        error::Error::InternalErr(
@@ -1997,6 +2009,7 @@ async fn handle_flow_dependency_job(
            logs,
            job_dir,
            db,
+            worker_name
        )
        .await;
        match new_lock {
@@ -2111,12 +2124,13 @@ async fn capture_dependency_job(
    job_raw_code: &str,
    logs: &mut String,
    job_dir: &str,
-    db: &sqlx::Pool<sqlx::Postgres>
+    db: &sqlx::Pool<sqlx::Postgres>,
+    worker_name: &str
 ) -> error::Result<String> {
    match job_language {
        ScriptLang::Python3 => {
            create_dependencies_dir(job_dir).await;
-            pip_compile(job_id, job_raw_code, logs, job_dir, db ).await
+            pip_compile(job_id, job_raw_code, logs, job_dir, db, worker_name).await
        }
        ScriptLang::Go => {
            install_go_dependencies(
@@ -2127,6 +2141,7 @@ async fn capture_dependency_job(
                db,
                false,
                false,
+                worker_name
            )
            .await
        }
@@ -2144,6 +2159,7 @@ async fn pip_compile(
    logs: &mut String,
    job_dir: &str,
    db: &Pool<Postgres>,
+    worker_name: &str
 ) -> error::Result<String> {
    logs.push_str(&format!("\nresolving dependencies..."));
    set_logs(logs, job_id, db).await;
@@ -2176,7 +2192,7 @@ async fn pip_compile(
        .stdout(Stdio::piped())
        .stderr(Stdio::piped())
        .spawn()?;
-    handle_child(job_id, db, logs,  child, false)
+    handle_child(job_id, db, logs,  child, false, worker_name)
        .await
        .map_err(|e| Error::ExecutionErr(format!("Lock file generation failed: {e:?}")))?;
    let path_lock = format!("{job_dir}/requirements.txt");
@@ -2199,6 +2215,7 @@ async fn install_go_dependencies(
    db: &sqlx::Pool<sqlx::Postgres>,
    preview: bool,
    skip_go_mod: bool,
+    worker_name: &str
 ) -> error::Result<String> {
    if !skip_go_mod {
        gen_go_mymod(code, job_dir).await?;
@@ -2209,7 +2226,7 @@ async fn install_go_dependencies(
            .stderr(Stdio::piped())
            .spawn()?;

-        handle_child(job_id, db, logs,   child, false).await?;
+        handle_child(job_id, db, logs,   child, false, worker_name).await?;
    }
    let child = Command::new(GO_PATH.as_str())
        .current_dir(job_dir)
@@ -2217,7 +2234,7 @@ async fn install_go_dependencies(
        .stdout(Stdio::piped())
        .stderr(Stdio::piped())
        .spawn()?;
-    handle_child(job_id, db, logs,  child, false)
+    handle_child(job_id, db, logs,  child, false, worker_name)
        .await
        .map_err(|e| Error::ExecutionErr(format!("Lock file generation failed: {e:?}")))?;

@@ -2323,6 +2340,7 @@ async fn handle_child(
    logs: &mut String,
    mut child: Child,
    nsjail: bool,
+    worker_name: &str,
 ) -> error::Result<()> {
    let update_job_interval = Duration::from_millis(500);
    let write_logs_delay = Duration::from_millis(500);
@@ -2336,11 +2354,14 @@ async fn handle_child(
        tracing::info!("could not get child pid");
    }
    let (set_too_many_logs, mut too_many_logs) = watch::channel::<bool>(false);
+    let (tx, mut rx) = broadcast::channel::<()>(3);
+    let mut rx2 = tx.subscribe();
+

    let output = child_joined_output_stream(&mut child);
+
    let job_id = job_id.clone();

-    let (tx, mut rx) = mpsc::channel::<()>(1);

    /* the cancellation future is polled on by `wait_on_child` while
     * waiting for the child to exit normally */
@@ -2350,10 +2371,22 @@ async fn handle_child(
        let mut interval = interval(update_job_interval);
        interval.set_missed_tick_behavior(MissedTickBehavior::Skip);

+        let mut i = 1;
        loop {
            tokio::select!(
                _ = rx.recv() => break,
                _ = interval.tick() => {
+                    // update the last_ping column every 5 seconds
+                    i+=1;
+                    if i % 10 == 0 {
+                        sqlx::query!(
+                            "UPDATE worker_ping SET ping_at = now() WHERE worker = $1",
+                            &worker_name
+                        )
+                        .execute(&db)
+                        .await
+                        .expect("update worker ping");
+                    }
                    let mem_peak = get_mem_peak(pid, nsjail).await;
                    tracing::info!("{job_id} still running. mem peak: {}kB", mem_peak);
                    let mem_peak = if mem_peak > 0 { Some(mem_peak) } else { None };
@@ -2387,10 +2420,10 @@ async fn handle_child(
            biased;
            result = child.wait() => return result.map(Ok),
            Ok(()) = too_many_logs.changed() => KillReason::TooManyLogs,
-            _ = update_job => KillReason::Cancelled,
            _ = sleep(*TIMEOUT_DURATION) => KillReason::Timeout,
+            _ = update_job => KillReason::Cancelled,
        };
-        tx.send(()).await.expect("rx should never be dropped");
+        tx.send(()).expect("rx should never be dropped");
        drop(tx);

        let set_reason = async {
@@ -2413,7 +2446,7 @@ async fn handle_child(
                }
            }
        };
-
+        
        /* send SIGKILL and reap child process */
        let (_, kill) = future::join(set_reason, child.kill()).await;
        kill.map(|()| Err(kill_reason))
@@ -2429,12 +2462,13 @@ async fn handle_child(
        /* log_remaining is zero when output limit was reached */
        let mut log_remaining = max_log_size.saturating_sub(logs.chars().count());
        let mut result = io::Result::Ok(());
-        let mut output = output;
+        let mut output = output.take_until(rx2.recv()).boxed();
        /* `do_write` resolves the task, but does not contain the Result.
         * It's useful to know if the task completed. */
        let (mut do_write, mut write_result) = tokio::spawn(ready(())).remote_handle();

-        while let Some(line) = output.by_ref().next().await {
+        while let Some(line) =  output.by_ref().next().await {
+
            let do_write_ = do_write.shared();

            let mut read_lines = stream::once(async { line })
@@ -2449,11 +2483,14 @@ async fn handle_child(
            let mut joined = String::new();

            while let Some(line) = read_lines.next().await {
+
                match line {
                    Ok(_) if log_remaining == 0 => (),
                    Ok(line) => {
+                        if line.is_empty() {
+                            continue;
+                        }
                        append_with_limit(&mut joined, &line, &mut log_remaining);
-
                        if log_remaining == 0 {
                            tracing::info!(%job_id, "Too many logs lines for job {job_id}");
                            let _ = set_too_many_logs.send(true);
@@ -2473,6 +2510,7 @@ async fn handle_child(

            logs.push_str(&joined);

+
            /* Ensure the last flush completed before starting a new one.
             *
             * This shouldn't pause since `take_until()` reads lines until `do_write`
@@ -2489,8 +2527,7 @@ async fn handle_child(
                panic::resume_unwind(p);
            }

-            (do_write, write_result) =
-                tokio::spawn(append_logs(job_id, joined, db.clone())).remote_handle();
+            (do_write, write_result) = tokio::spawn(append_logs(job_id, joined, db.clone())).remote_handle();

            if let Err(err) = result {
                tracing::error!(%job_id, %err, "error reading output for job {job_id}: {err}");
@@ -2500,6 +2537,7 @@ async fn handle_child(
            if *set_too_many_logs.borrow() {
                break;
            }
+
        }

        /* drop our end of the pipe */
@@ -2813,7 +2851,7 @@ async fn handle_python_reqs(
                .spawn()?
        };

-        let child = handle_child(&job.id, db, logs, child, false).await;
+        let child = handle_child(&job.id, db, logs, child, false, worker_name).await;
        tracing::info!(
            worker_name = %worker_name,
            job_id = %job.id,
--- a/backend/windmill-worker/src/worker_flow.rs
+++ b/backend/windmill-worker/src/worker_flow.rs
@@ -326,6 +326,21 @@ pub async fn update_flow_status_after_job_completion(
            )
            .execute(&mut tx)
            .await?;
+
+            if let Some(job_result) = new_status.job_result() {
+                sqlx::query!(
+                    "
+            UPDATE queue
+               SET leaf_jobs = JSONB_SET(coalesce(leaf_jobs, '{}'::jsonb), ARRAY[$1::TEXT], $2)
+             WHERE COALESCE((SELECT root_job FROM queue WHERE id = $3), $3) = id
+            ",
+                    new_status.id(),
+                    json!(job_result),
+                    flow
+                )
+                .execute(&mut tx)
+                .await?;
+            }
        }
    }

@@ -1237,6 +1252,7 @@ async fn push_next_flow_job(
            Ok(v) => (Some(v), None),
            Err(e) => (None, Some(e)),
        };
+        let root_job = flow_job.root_job.or_else(|| Some(flow_job.id));
        let (uuid, inner_tx) = push(
            tx,
            &flow_job.workspace_id,
@@ -1248,6 +1264,7 @@ async fn push_next_flow_job(
            scheduled_for_o,
            flow_job.schedule_path.clone(),
            Some(flow_job.id),
+            root_job,
            true,
            continue_on_same_worker,
            err,
--- a/cli/main.ts
+++ b/cli/main.ts
@@ -13,7 +13,7 @@ import sync from "./sync.ts";
 import { tryResolveVersion } from "./context.ts";
 import { GlobalOptions } from "./types.ts";

-const VERSION = "v1.72.0";
+const VERSION = "v1.74.2";

 let command: any = new Command()
  .name("wmill")
--- a/cli/workspace.ts
+++ b/cli/workspace.ts
@@ -139,6 +139,8 @@ async function list(opts: GlobalOptions) {
      }),
    )
    .render();
+
+  console.log('Active: ' + colors.green.bold(activeName || 'none'))
 }

 async function switchC(opts: GlobalOptions, workspaceName: string) {
@@ -313,6 +315,8 @@ async function remove(_opts: GlobalOptions, name: string) {
 async function whoami(_opts: GlobalOptions) {
  await requireLogin(_opts)
  console.log(await UserService.globalWhoami())
+  const activeName = await getActiveWorkspaceName(_opts);
+  console.log('Active: ' + colors.green.bold(activeName || 'none'))
 }

 const command = new Command()
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -38,7 +38,9 @@ services:
    depends_on:
      db:
        condition: service_healthy
-
+    # volumes:
+      # - ./oauth.json/:/usr/src/app/oauth.json
+      
  windmill_worker:
    image: ghcr.io/windmill-labs/windmill:main
    deploy:
@@ -61,7 +63,6 @@ services:
    # to mount the worker folder to debug,, KEEP_JOB_DIR=true and mount /tmp/windmill
    volumes:
      - worker_dependency_cache:/tmp/windmill/cache
-      # - ./oauth.json/:/usr/src/app/oauth.json

  lsp:
    image: ghcr.io/windmill-labs/windmill-lsp:latest
--- a/frontend/README_DEV.md
+++ b/frontend/README_DEV.md
@@ -1,6 +1,6 @@
 # Developing

-## Starting the Development Server
+## Starting The Development Server

 Once you've created a project and installed dependencies with `npm install` (or
 `pnpm install` or `yarn`), start a development server:
@@ -17,7 +17,7 @@ In the root folder:

 ```bash
 docker build . -t windmill
-docker-compose up db server
+docker-compose up db windmill_server windmill_worker
 ```

 ### 2. Backend is run by cargo
@@ -25,9 +25,9 @@ docker-compose up db server
 **Prerequisites**

 - Install Rust [as explained on the website](https://www.rust-lang.org/tools/install).
- Install llvm 
+- Install llvm

-  **on OSX:**
+  **On OSX:**
  ```bash
  brew install llvm caddy gsed
  
@@ -36,7 +36,20 @@ docker-compose up db server
  
  # now, restart your shell. You should now have the `lld` binary on your PATH.
  ```
-  
+- To test that you have Rust and Cargo installed run `cargo --version`
+
+- In your terminal, go to the backend directory and run `cargo build`
+- Run `cargo run`
+
+**Known issue on M1 Mac while running `cargo build`**
+- You may encounter `linking with cc failed` build time error.
+- To solve this run:
+  ```bash
+  echo 'export RUSTFLAGS="-L/opt/homebrew/opt/libomp/lib"' >> ~/.zshrc
+  source ~/.zshrc
+  ```
+
+
 **Do a Frontend Build**

 In order to run the backend, you need to have a frontend build inside `frontend/build/`.
@@ -56,6 +69,14 @@ npm run build
 # now, you'll have a `frontend/build` folder.
 ```

+**Known issue while running `npm run build`**
+- You may encounter `FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory` error.
+- To solve this run:
+```bash
+export NODE_OPTIONS=--max_old_space_size=8096
+```
+- run `npm run build` again
+
 In the root folder:

 ```bash
@@ -82,7 +103,7 @@ sudo caddy run --config ./Caddyfile

 and then go to <http://localhost>

-### Backend is run by remote!
+### 3. Backend is run by remote!

 ```bash
 sudo caddy run --config ./CaddyfileRemote
@@ -119,8 +140,8 @@ Recommended config for VS Code:

 ```json
 "[svelte]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    }
+"editor.defaultFormatter": "esbenp.prettier-vscode"
+}
 ```

 - turn _format on save_ on
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "windmill",
-	"version": "1.72.0",
+	"version": "1.74.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -21,12 +21,13 @@
 		"@sveltejs/package": "^1.0.2",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.8",
+		"@types/d3": "^7.4.0",
+		"@types/d3-zoom": "^3.0.2",
 		"@types/node": "^18.11.18",
 		"@types/vscode": "~1.74.0",
 		"@typescript-eslint/eslint-plugin": "^5.49.0",
 		"@typescript-eslint/parser": "^5.48.0",
 		"@windmill-labs/svelte-grid": "^5.1.6",
-		"@windmill-labs/svelvet": "^4.0.20",
 		"@zerodevx/svelte-toast": "^0.8.1",
 		"autoprefixer": "^10.4.13",
 		"cssnano": "^5.1.14",
@@ -37,14 +38,17 @@
 		"ol": "^7.2.2",
 		"openapi-typescript-codegen": "^0.23.0",
 		"path-browserify": "^1.0.1",
+		"pdfjs-dist": "^3.4.120",
 		"postcss": "^8.4.18",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.3",
 		"prettier-plugin-svelte": "^2.9.0",
+		"shepherd.js": "^10.0.1",
 		"simple-svelte-autocomplete": "^2.5.1",
 		"stylelint-config-recommended": "^9.0.0",
 		"svelte": "^3.55.1",
 		"svelte-awesome": "^3.0.0",
+		"svelte-awesome-color-picker": "^2.4.1",
 		"svelte-check": "^3.0.2",
 		"svelte-highlight": "^6.2.1",
 		"svelte-overlay": "^1.4.1",
@@ -72,6 +76,7 @@
 		"chart.js": "^3.9.1",
 		"chartjs-adapter-date-fns": "^3.0.0",
 		"chartjs-plugin-zoom": "^2.0.0",
+		"d3-zoom": "^3.0.0",
 		"date-fns": "^2.29.3",
 		"fast-equals": "^4.0.3",
 		"highlight.js": "^11.7.0",
--- a/frontend/src/lib/assets/app.css
+++ b/frontend/src/lib/assets/app.css
@@ -50,12 +50,23 @@
 	.Template-editor span.mtk20 {
 		color: black !important;
 	}
+
+	::-webkit-scrollbar {
+		width: 9px;
+		height: 9px;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(155, 155, 155, 0.5);
+		border: transparent;
+	}
 }

@layer components {
 	/* Flow graph viewer -> Svelvet library internal class overwrite */
 	.Node {
 		display: flex !important;
-		cursor: pointer !important;
 	}
 }
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -110,7 +110,7 @@
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
-				as JSON&nbsp;<input type="checkbox" bind:checked={forceJson} /></div
+				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
 				class="mb-2 min-w-[400px] text-sm text-gray-700 relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -232,8 +232,14 @@
 		<Badge color={validCode ? 'green' : 'red'} class="min-w-[60px] mr-3">
 			{validCode ? 'Valid' : 'Invalid'}
 		</Badge>
-		<div class="flex items-center divide-x">
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="pr-1" disablePopup={!iconOnly}>
+		<div id="script-tutorial-3" class="flex items-center divide-x">
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="pr-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					color="light"
 					btnClasses="!font-medium !h-full"
@@ -245,11 +251,15 @@
 				>
 					+Context Var
 				</Button>
-				<svelte:fragment slot="text">
-					Add context variable
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add context variable</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					color="light"
 					btnClasses="!font-medium !h-full"
@@ -261,11 +271,15 @@
 				>
 					+Variable
 				</Button>
-				<svelte:fragment slot="text">
-					Add variable
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add variable</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -277,11 +291,15 @@
 				>
 					+Resource
 				</Button>
-				<svelte:fragment slot="text">
-					Add resource
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add resource</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -293,11 +311,15 @@
 				>
 					Reset
 				</Button>
-				<svelte:fragment slot="text">
-					Reset
-				</svelte:fragment>
+				<svelte:fragment slot="text">Reset</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -320,11 +342,15 @@
 						{/if}
 					</span>
 				</Button>
-				<svelte:fragment slot="text">
-					Reload assistant
-				</svelte:fragment>
+				<svelte:fragment slot="text">Reload assistant</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium"
 					size="xs"
@@ -342,7 +368,13 @@
 			</Popover>
 		</div>
 	</div>
-	<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+	<Popover
+		notClickable
+		placement="bottom"
+		disapperTimoout={0}
+		class="px-1"
+		disablePopup={!iconOnly}
+	>
 		<Button
 			btnClasses="!font-medium"
 			size="xs"
@@ -354,9 +386,7 @@
 		>
 			Script
 		</Button>
-		<svelte:fragment slot="text">
-			Script
-		</svelte:fragment>
+		<svelte:fragment slot="text">Script</svelte:fragment>
 	</Popover>
 </div>

--- a/frontend/src/lib/components/FieldHeader.svelte
+++ b/frontend/src/lib/components/FieldHeader.svelte
@@ -11,17 +11,21 @@
 		| undefined = undefined
 </script>

-<div class="inline-flex flex-row items-center">
+<div class="inline-flex flex-row items-center truncated">
 	<span class="font-semibold">
 		{label}
 	</span>
 	<Required {required} class="!ml-0" />

-	<span class="text-sm italic ml-1 text-indigo-800">
-		({type ?? 'any'}{contentEncoding && contentEncoding != ''
-			? `, encoding: ${contentEncoding}`
-			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
-			? ` of ${itemsType?.type}s`
-			: ''})</span
-	>
+	{#if format && format != ''}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({format})
+		</span>
+	{:else}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({type ?? 'any'}{contentEncoding && contentEncoding != ''
+				? `, encoding: ${contentEncoding}`
+				: ''})</span
+		>
+	{/if}
 </div>
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -1,34 +1,34 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
-	import { page } from '$app/stores'
-	import { FlowService, ScheduleService, type Flow } from '$lib/gen'
+	import { FlowService, ScheduleService, type Flow, type FlowModule } from '$lib/gen'
+	import { initHistory, redo, undo } from '$lib/history'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { encodeState, formatCron, loadHubScripts, sendUserToast } from '$lib/utils'
-	import { faCalendarAlt, faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons'
+	import { faCalendarAlt, faPen, faSave } from '@fortawesome/free-solid-svg-icons'
 	import { setContext } from 'svelte'
-	import { writable } from 'svelte/store'
+	import { writable, type Writable } from 'svelte/store'
 	import CenteredPage from './CenteredPage.svelte'
-	import { Button, Drawer, DrawerContent } from './common'
+	import { Button, ButtonPopup, ButtonPopupItem, UndoRedo } from './common'
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
-	import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { OFFSET } from './CronInput.svelte'
-	import FlowGraphViewer from './FlowGraphViewer.svelte'
 	import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte'
 	import FlowEditor from './flows/FlowEditor.svelte'
-	import { flowStateStore } from './flows/flowState'
-	import { flowStore } from './flows/flowStore'
+	import type { FlowState } from './flows/flowState'
+	import { dfs } from './flows/flowStore'
 	import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte'
 	import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte'
 	import { loadFlowSchedule, type Schedule } from './flows/scheduleUtils'
 	import type { FlowEditorContext } from './flows/types'
 	import { cleanInputs } from './flows/utils'
+	import { Tour } from './tutorial'

 	export let initialPath: string = ''
 	export let selectedId: string | undefined
 	export let initialArgs: Record<string, any> = {}
 	export let loading = false
-
-	let pathError = ''
+	export let flowStore: Writable<Flow>
+	export let flowStateStore: Writable<FlowState>
+	export let tour = false

 	async function createSchedule(path: string) {
 		const { cron, args, enabled } = $scheduleStore
@@ -51,7 +51,10 @@
 		}
 	}

-	async function saveFlow(): Promise<void> {
+	let loadingSave = false
+
+	async function saveFlow(leave: boolean): Promise<void> {
+		loadingSave = true
 		const flow = cleanInputs($flowStore)
 		const { cron, args, enabled } = $scheduleStore
 		$dirtyStore = false
@@ -113,7 +116,12 @@
 				await createSchedule(flow.path)
 			}
 		}
-		goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`)
+		loadingSave = false
+		if (leave) {
+			goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`)
+		} else if (initialPath !== $flowStore.path) {
+			goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`)
+		}
 	}

 	let timeout: NodeJS.Timeout | undefined = undefined
@@ -141,11 +149,15 @@
 		}, 500)
 	}

-	const selectedIdStore = writable<string>(selectedId)
+	const selectedIdStore = writable<string>(selectedId ?? 'settings-metadata')

 	const scheduleStore = writable<Schedule>({ args: {}, cron: '', enabled: false })
 	const previewArgsStore = writable<Record<string, any>>(initialArgs)
 	const scriptEditorDrawer = writable<ScriptEditorDrawer | undefined>(undefined)
+	const moving = writable<{ module: FlowModule; modules: FlowModule[] } | undefined>(undefined)
+	const history = initHistory($flowStore)
+
+	const testStepStore = writable<Record<string, any>>({})

 	function select(selectedId: string) {
 		selectedIdStore.set(selectedId)
@@ -154,9 +166,13 @@
 	setContext<FlowEditorContext>('FlowEditorContext', {
 		selectedId: selectedIdStore,
 		schedule: scheduleStore,
-		select,
 		previewArgs: previewArgsStore,
-		scriptEditorDrawer
+		scriptEditorDrawer,
+		moving,
+		history,
+		flowStateStore,
+		flowStore,
+		testStepStore
 	})

 	async function loadSchedule() {
@@ -179,39 +195,86 @@

 	loadHubScripts()

-	let flowViewer: Drawer
+	function onKeyDown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'Z':
+				if (event.ctrlKey) {
+					$flowStore = redo(history)
+					event.preventDefault()
+				}
+				break
+			case 'z':
+				if (event.ctrlKey) {
+					$flowStore = undo(history, $flowStore)
+					$selectedIdStore = 'Input'
+					event.preventDefault()
+				}
+				break
+			case 's':
+				if (event.ctrlKey) {
+					saveFlow(false)
+					event.preventDefault()
+				}
+				break
+			case 'ArrowDown': {
+				let ids = generateIds()
+				let idx = ids.indexOf($selectedIdStore)
+				if (idx > -1 && idx < ids.length - 1) {
+					$selectedIdStore = ids[idx + 1]
+					event.preventDefault()
+				}
+				break
+			}
+			case 'ArrowUp': {
+				let ids = generateIds()
+				let idx = ids.indexOf($selectedIdStore)
+				if (idx > 0 && idx < ids.length) {
+					$selectedIdStore = ids[idx - 1]
+					event.preventDefault()
+				}
+				break
+			}
+		}
+	}
+
+	function generateIds() {
+		return [
+			'settings-metadata',
+			'constants',
+			...dfs($flowStore.value.modules, (module) => module.id)
+		]
+	}
 </script>

+<svelte:window on:keydown={onKeyDown} />
+
+{#if tour}
+	<Tour tutorial="flow" />
+{/if}
+
 {#if !$userStore?.operator}
 	<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
-	<UnsavedConfirmationModal />
-
-	<Drawer bind:this={flowViewer} size="75%">
-		<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
-			<div class="overflow-hidden h-full w-full">
-				<FlowGraphViewer flow={$flowStore} />
-			</div>
-		</DrawerContent>
-	</Drawer>

 	<div class="flex flex-col flex-1 h-screen">
 		<!-- Nav between steps-->
 		<div
 			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
 		>
-			<div class="flex flex-row">
+			<div class="flex flex-row gap-4 items-center">
 				<FlowImportExportMenu />
-				<Button
-					btnClasses="inline-flex"
-					startIcon={{ icon: faEye }}
-					variant="border"
-					color="light"
-					size="sm"
-					on:click={flowViewer.openDrawer}
-				>
-					Graph
-				</Button>
+				<UndoRedo
+					undoProps={{ disabled: $history.index === 0 }}
+					redoProps={{ disabled: $history.index === $history.history.length - 1 }}
+					on:undo={() => {
+						$flowStore = undo(history, $flowStore)
+						$selectedIdStore = 'Input'
+					}}
+					on:redo={() => {
+						$flowStore = redo(history)
+					}}
+				/>
 			</div>
+
 			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
 				{#if $scheduleStore.enabled}
 					<Button
@@ -258,12 +321,22 @@
 			<div class="flex flex-row space-x-2">
 				<FlowPreviewButtons />
 				<div class="center-center">
-					<Button
-						disabled={pathError != ''}
-						startIcon={{ icon: faSave }}
+					<ButtonPopup
+						loading={loadingSave}
 						size="sm"
-						on:click={saveFlow}>Save</Button
+						startIcon={{ icon: faSave }}
+						on:click={() => saveFlow(false)}
 					>
+						<svelte:fragment slot="main">Save</svelte:fragment>
+						<ButtonPopupItem on:click={() => saveFlow(true)}>Save and exit</ButtonPopupItem>
+						{#if initialPath != ''}
+							<ButtonPopupItem
+								on:click={() => {
+									window.open(`/flows/add?template=${initialPath}`)
+								}}>Fork</ButtonPopupItem
+							>
+						{/if}
+					</ButtonPopup>
 				</div>
 			</div>
 		</div>
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -79,14 +79,13 @@
 </Drawer>
 <div class="grid grid-cols-3 w-full">
 	<div
-		bind:clientHeight={topHeight}
 		class="{noSide
 			? 'col-span-3'
-			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 h-screen"
+			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 max-h-screen"
 		class:overflow-auto={overflowAuto}
 	>
 		<FlowGraph
-			minHeight={topHeight}
+			minHeight={400}
 			modules={flow?.value?.modules}
 			failureModule={flow?.value?.failure_module}
 			on:click={(e) => (stepDetail = e.detail)}
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -5,13 +5,12 @@
 	import { Button, Kbd } from './common'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import { dfs, flowStore } from './flows/flowStore'
+	import { dfs } from './flows/flowStore'
 	import type { FlowEditorContext } from './flows/types'
 	import { runFlowPreview } from './flows/utils'
 	import SchemaForm from './SchemaForm.svelte'
 	import FlowStatusViewer from '../components/FlowStatusViewer.svelte'
 	import FlowProgressBar from './flows/FlowProgressBar.svelte'
-	import { flowStateStore } from './flows/flowState'
 	import CapturePayload from './flows/content/CapturePayload.svelte'
 	import { Loader2 } from 'lucide-svelte'

@@ -24,7 +23,8 @@
 	let isRunning: boolean = false
 	let jobProgressReset: () => void

-	const { selectedId, previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { selectedId, previewArgs, flowStateStore, flowStore } =
+		getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()

 	function sliceModules(modules: FlowModule[], upTo: number, idOrders: string[]): FlowModule[] {
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -452,13 +452,17 @@
 					<FlowGraph
 						success={isSuccess(job?.['success'])}
 						flowModuleStates={localFlowModuleStates}
-						on:click={(e) => {
-							if (e.detail.id) {
+						on:select={(e) => {
+							if (typeof e.detail == 'string') {
+								if (e.detail == 'Input') {
+									selectedNode = 'start'
+								} else if (e.detail == 'Result') {
+									selectedNode = 'end'
+								} else {
+									selectedNode = e.detail
+								}
+							} else {
 								selectedNode = e.detail.id
-							} else if (e.detail == 'Result') {
-								selectedNode = 'end'
-							} else if (e.detail == 'Input') {
-								selectedNode = 'start'
 							}
 						}}
 						modules={job.raw_flow?.modules ?? []}
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -148,7 +148,7 @@
 			{/if}
 		</div>
 		{#if !noDynamicToggle}
-			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap">
+			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap z-10">
 				<ToggleButtonGroup
 					bind:selected={propertyType}
 					on:selected={(e) => {
@@ -190,10 +190,10 @@
 				>
 					{#if isStaticTemplate(inputCat)}
 						<ToggleButton light position="left" value="static" size="xs">
-							{'${} '}Template &nbsp; <Tooltip
-								>Write javascript expressions between "{openBracket}" and "{closeBracket}". You may
-								refer to contextual objects like 'flow_input', or 'result' or functions like
-								'resource' and 'variable'
+							{'${} '}&nbsp;
+							<Tooltip
+								>Write text or surround javascript with "{openBracket}" and "{closeBracket}". Use
+								`result` to connect to another node's output.
 							</Tooltip></ToggleButton
 						>
 					{:else}
@@ -206,9 +206,11 @@
 						value="javascript"
 						startIcon={{ icon: faCode }}
 						size="xs"
+						>&nbsp;<Tooltip
+							>Write javascript expressions directly, using 'flow_input' or 'result'. You can use
+							multiline javascript.
+						</Tooltip></ToggleButton
 					>
-						Dynamic (JS)
-					</ToggleButton>
 				</ToggleButtonGroup>
 				<Button
 					variant="contained"
@@ -299,6 +301,4 @@
 			Not recognized input type {argName}
 		{/if}
 	</div>
-{:else}
-	<p class="text-sm text-gray-700">Argument at {argName} is undefined</p>
 {/if}
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { Schema } from '$lib/common'
+	import { VariableService, type InputTransform } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
+	import { allTrue } from '$lib/utils'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
+	import { Button } from './common'
+	import InputTransformForm from './InputTransformForm.svelte'
+	import ItemPicker from './ItemPicker.svelte'
+	import VariableEditor from './VariableEditor.svelte'
+
+	export let schema: Schema
+	export let args: Record<string, InputTransform | any> = {}
+
+	export let isValid: boolean = true
+	export let extraLib: string = 'missing extraLib'
+	export let previousModuleId: string | undefined = undefined
+
+	export let filter: string[] | undefined = undefined
+	export let noDynamicToggle = false
+
+	let clazz: string = ''
+	export { clazz as class }
+
+	let inputCheck: { [id: string]: boolean } = {}
+	$: isValid = allTrue(inputCheck) ?? false
+
+	$: if (args == undefined || typeof args !== 'object') {
+		args = {}
+	}
+
+	function removeExtraKey() {
+		const nargs = {}
+		Object.keys(args ?? {}).forEach((key) => {
+			if (keys.includes(key)) {
+				nargs[key] = args[key]
+			}
+		})
+		args = nargs
+	}
+
+	let pickForField: string | undefined
+	let itemPicker: ItemPicker | undefined = undefined
+	let variableEditor: VariableEditor | undefined = undefined
+
+	let keys: string[] = []
+	$: {
+		let lkeys = Object.keys(schema?.properties ?? {})
+		if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
+			keys = lkeys
+			removeExtraKey()
+		}
+	}
+</script>
+
+<div class="w-full {clazz}">
+	{#if keys.length > 0}
+		{#each keys as argName, i (argName)}
+			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
+				<div class="z-10">
+					<InputTransformForm
+						{previousModuleId}
+						bind:arg={args[argName]}
+						bind:schema
+						bind:argName
+						bind:inputCheck={inputCheck[argName]}
+						bind:extraLib
+						{variableEditor}
+						{itemPicker}
+						bind:pickForField
+						{noDynamicToggle}
+					/>
+				</div>
+			{/if}
+		{/each}
+	{:else}
+		<div class="text-gray-500 text-sm">No inputs</div>
+	{/if}
+</div>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		if (pickForField) {
+			args[pickForField].value = '$var:' + path
+		}
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			startIcon={{ icon: faPlus }}
+			on:click={() => {
+				variableEditor?.initNew?.()
+			}}
+		>
+			New variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} />
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -42,7 +42,7 @@
 				<button on:click={logViewer.openDrawer}>Expand</button>
 				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
 					Auto scroll
-					<input type="checkbox" bind:checked={scroll} />
+					<input class="windmillapp" type="checkbox" bind:checked={scroll} />
 				</div>
 			</div>
 		</div>
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -8,14 +8,17 @@
 	import LogViewer from './LogViewer.svelte'
 	import DisplayResult from './DisplayResult.svelte'
 	import Button from './common/button/Button.svelte'
-	import { flowStateStore, testStepStore } from './flows/flowState'
-	import { flowStore } from './flows/flowStore'
 	import { workspaceStore } from '$lib/stores'
 	import { Loader2 } from 'lucide-svelte'
+	import { getContext } from 'svelte'
+	import type { FlowEditorContext } from './flows/types'

 	export let mod: FlowModule
 	export let schema: Schema

+	const { flowStore, flowStateStore, testStepStore } =
+		getContext<FlowEditorContext>('FlowEditorContext')
+
 	// Test
 	let testJobLoader: TestJobLoader
 	let testIsLoading = false
--- a/frontend/src/lib/components/Multiselect.svelte
+++ b/frontend/src/lib/components/Multiselect.svelte
@@ -167,7 +167,7 @@
 	{#if showOptions}
 		<ul
 			class="options"
-			transition:fly={{ duration: 200, y: 5 }}
+			transition:fly|local={{ duration: 200, y: 5 }}
 			on:mousedown|preventDefault={handleOptionMousedown}
 		>
 			{#each filtered as option}
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -409,8 +409,8 @@
 		{/if}
 	</div>

-	<div class="flex-row flex justify-between">
-		<div><span class="font-mono text-sm">{path}</span></div>
+	<div class="flex-row flex justify-between w-full">
+		<div><span class="font-mono text-sm break-all">{path}</span></div>
 		<div class="text-red-600 text-2xs">{error}</div>
 	</div>
 </div>
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -49,22 +49,11 @@
 </script>

 {#if notClickable}
-	<span
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		class={$$props.class}
-	>
+	<span use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
 		<slot />
 	</span>
 {:else}
-	<button
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		on:click
-		class={$$props.class}
-	>
+	<button use:popperRef on:mouseenter={open} on:mouseleave={close} on:click class={$$props.class}>
 		<slot />
 	</button>
 {/if}
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -11,17 +11,38 @@
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'

 	const dispatch = createEventDispatcher()
-	let resources: Resource[] = []

 	export let initialValue: string | undefined = undefined
 	export let value: string | undefined = initialValue
 	export let resourceType: string | undefined = undefined

+	let valueSelect =
+		initialValue || value
+			? {
+					value: value ?? initialValue,
+					label: value ?? initialValue
+			  }
+			: undefined
+
+	let collection = [valueSelect]
+
 	async function loadResources(resourceType: string | undefined) {
-		const v = value
-		resources = await ResourceService.listResource({ workspace: $workspaceStore!, resourceType })
-		value = v
+		const nc = (
+			await ResourceService.listResource({
+				workspace: $workspaceStore!,
+				resourceType
+			})
+		).map((x) => ({
+			value: x.path,
+			label: x.path
+		}))
+
+		if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+			nc.push({ value: value ?? initialValue!, label: value ?? initialValue! })
+		}
+		collection = nc
 	}
+
 	$: {
 		if ($workspaceStore) {
 			loadResources(resourceType)
@@ -29,10 +50,6 @@
 	}
 	$: dispatch('change', value)

-	$: collection = resources.map((x) => ({
-		value: x.path,
-		label: x.path
-	}))
 	let appConnect: AppConnect
 	let resourceEditor: ResourceEditor
 </script>
@@ -41,6 +58,7 @@
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
 		value = e.detail
+		valueSelect = { value: e.detail, label: e.detail }
 	}}
 	newPageOAuth
 	bind:this={appConnect}
@@ -50,18 +68,24 @@
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
-		console.log(e)
 		if (e.detail) {
 			value = e.detail
+			valueSelect = { value: e.detail, label: e.detail }
 		}
 	}}
 />

 <div class="flex flex-row gap-x-1 w-full">
 	<Select
-		listAutoWidth={false}
-		value={collection.find((x) => x.value == value)}
-		bind:justValue={value}
+		value={valueSelect}
+		on:change={(e) => {
+			value = e.detail.value
+			valueSelect = e.detail
+		}}
+		on:clear={() => {
+			value = undefined
+			valueSelect = undefined
+		}}
 		items={collection}
 		class="text-clip grow min-w-0"
 		placeholder="{resourceType} resource"
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -6,11 +6,9 @@
 	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 	import ArgInput from './ArgInput.svelte'
 	import { Button } from './common'
-	import InputTransformForm from './InputTransformForm.svelte'
 	import ItemPicker from './ItemPicker.svelte'
 	import VariableEditor from './VariableEditor.svelte'

-	export let inputTransform = false
 	export let schema: Schema
 	export let args: Record<string, InputTransform | any> = {}
 	export let disabledArgs: string[] = []
@@ -18,16 +16,12 @@

 	export let editableSchema = false
 	export let isValid: boolean = true
-	export let extraLib: string = 'missing extraLib'
 	export let autofocus = false
-	export let previousModuleId: string | undefined = undefined

 	export let shouldHideNoInputs: boolean = false
 	export let compact = false
 	export let password: string | undefined = undefined
 	export let noVariablePicker = false
-	export let filter: string[] | undefined = undefined
-	export let noDynamicToggle = false
 	export let flexWrap = false
 	export let noDelete = false

@@ -42,17 +36,19 @@
 	}

 	function removeExtraKey() {
+		const nargs = {}
 		Object.keys(args ?? {}).forEach((key) => {
-			if (!keys.includes(key)) {
-				delete args[key]
-				delete inputCheck[key]
+			if (keys.includes(key)) {
+				nargs[key] = args[key]
 			}
 		})
+		args = nargs
 	}

 	let pickForField: string | undefined
 	let itemPicker: ItemPicker | undefined = undefined
 	let variableEditor: VariableEditor | undefined = undefined
+
 	let keys: string[] = []
 	$: {
 		let lkeys = Object.keys(schema?.properties ?? {})
@@ -68,48 +64,60 @@
 <div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 gap-y-2' : ''}">
 	{#if keys.length > 0}
 		{#each keys as argName, i (argName)}
-			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
+			{#if Object.keys(schema.properties ?? {}).includes(argName)}
 				<div>
-					{#if inputTransform}
-						<InputTransformForm
-							{previousModuleId}
-							bind:arg={args[argName]}
-							bind:schema
-							bind:argName
-							bind:inputCheck={inputCheck[argName]}
-							bind:extraLib
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							{noDynamicToggle}
-						/>
-					{:else if typeof args == 'object' && schema?.properties[argName]}
-						<ArgInput
-							autofocus={i == 0 && autofocus}
-							label={argName}
-							bind:description={schema.properties[argName].description}
-							bind:value={args[argName]}
-							type={schema.properties[argName].type}
-							required={schema.required.includes(argName)}
-							bind:pattern={schema.properties[argName].pattern}
-							bind:valid={inputCheck[argName]}
-							defaultValue={schema.properties[argName].default}
-							bind:enum_={schema.properties[argName].enum}
-							bind:format={schema.properties[argName].format}
-							contentEncoding={schema.properties[argName].contentEncoding}
-							properties={schema.properties[argName].properties}
-							bind:itemsType={schema.properties[argName].items}
-							disabled={disabledArgs.includes(argName) || disabled}
-							{editableSchema}
-							{compact}
-							password={argName == password}
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							bind:extra={schema.properties[argName]}
-						/>
-					{:else}
-						Expected argument to be an object, got {JSON.stringify(args)} instead
+					{#if typeof args == 'object' && schema?.properties[argName]}
+						{#if editableSchema}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								bind:description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								bind:pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								bind:enum_={schema.properties[argName].enum}
+								bind:format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								bind:itemsType={schema.properties[argName].items}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								bind:extra={schema.properties[argName]}
+							/>
+						{:else}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								enum_={schema.properties[argName].enum}
+								format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								itemsType={schema.properties[argName].items}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								extra={schema.properties[argName]}
+							/>
+						{/if}
 					{/if}
 				</div>
 			{/if}
@@ -124,11 +132,7 @@
 		bind:this={itemPicker}
 		pickCallback={(path, _) => {
 			if (pickForField) {
-				if (inputTransform) {
-					args[pickForField].value = '$var:' + path
-				} else {
-					args[pickForField] = '$var:' + path
-				}
+				args[pickForField] = '$var:' + path
 			}
 		}}
 		itemName="Variable"
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -12,9 +12,8 @@
 	import ScriptEditor from './ScriptEditor.svelte'
 	import ScriptSchema from './ScriptSchema.svelte'
 	import CenteredPage from './CenteredPage.svelte'
-	import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
-	import { Button, Kbd } from './common'
+	import { Button, ButtonPopup, ButtonPopupItem, Kbd } from './common'
 	import { faChevronDown, faChevronUp, faPen, faSave } from '@fortawesome/free-solid-svg-icons'
 	import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte'
 	import LanguageIcon from './common/languageIcons/LanguageIcon.svelte'
@@ -54,7 +53,9 @@
 		script.content = initialCode(language, kind, template)
 	}

-	async function editScript(): Promise<void> {
+	let loadingSave = false
+	async function editScript(leave: boolean): Promise<void> {
+		loadingSave = true
 		try {
 			$dirtyStore = false
 			localStorage.removeItem(script.path)
@@ -83,11 +84,17 @@
 					kind: script.kind
 				}
 			})
-			history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`)
-			goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`)
+			if (leave) {
+				history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`)
+				goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`)
+			} else {
+				await goto(`/scripts/edit/${newHash}?step=2`)
+				script.hash = newHash
+			}
 		} catch (error) {
-			sendUserToast(`Impossible to save the script: ${error.body}`, true)
+			sendUserToast(`Impossible to save the script: ${error.body || error.message}`, true)
 		}
+		loadingSave = false
 	}

 	async function changeStep(step: number) {
@@ -113,10 +120,7 @@
 	}
 </script>

-<svelte:window on:keydown={onKeyDown} />
-
 {#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
 	<div class="flex flex-col h-screen">
 		<!-- Nav between steps-->
 		<div class="flex flex-col w-full px-2 py-1  border-b shadow-sm">
@@ -182,14 +186,24 @@
 					>
 						Next {#if step == 1}<Kbd>Enter</Kbd>{/if}
 					</Button>
-					<Button
+					<ButtonPopup
+						loading={loadingSave}
 						size="sm"
 						variant={step == 1 ? 'border' : 'contained'}
 						disabled={step === 1 && pathError !== ''}
-						btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
 						startIcon={{ icon: faSave }}
-						on:click={editScript}>Save</Button
+						on:click={() => editScript(false)}
 					>
+						<svelte:fragment slot="main">Save</svelte:fragment>
+						<ButtonPopupItem on:click={() => editScript(true)}>Save and exit</ButtonPopupItem>
+						{#if initialPath != ''}
+							<ButtonPopupItem
+								on:click={() => {
+									window.open(`/scripts/add?template=${initialPath}`)
+								}}>Fork</ButtonPopupItem
+							>
+						{/if}
+					</ButtonPopup>
 				</div>
 			</div>
 		</div>
@@ -332,6 +346,7 @@
 				lang={script.language}
 				{initialArgs}
 				{kind}
+				tour
 			/>
 		{:else if step === 3}
 			<CenteredPage>
@@ -342,3 +357,5 @@
 {:else}
 	Script Builder not available to operators
 {/if}
+
+<svelte:window on:keydown={onKeyDown} />
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -17,6 +17,7 @@
 	import { Button, Kbd } from './common'
 	import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte'
 	import WindmillIcon from './icons/WindmillIcon.svelte'
+	import { Tour } from './tutorial'

 	// Exported
 	export let schema: Schema = emptySchema()
@@ -27,6 +28,7 @@
 	export let initialArgs: Record<string, any> = {}
 	export let fixedOverflowWidgets = true
 	export let noSyncFromGithub = false
+	export let tour = false

 	let websocketAlive = { pyright: false, black: false, deno: false, go: false }

@@ -114,6 +116,10 @@

 <svelte:window on:keydown={onKeyDown} />

+{#if tour}
+	<Tour tutorial="script" />
+{/if}
+
 <div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		<EditorBar
@@ -146,6 +152,7 @@
 	<Splitpanes class="!overflow-visible">
 		<Pane size={60} minSize={10} class="!overflow-visible">
 			<div
+				id="script-tutorial-1"
 				class="pl-2 h-full !overflow-visible"
 				on:mouseleave={() => {
 					inferSchema(code)
@@ -180,7 +187,7 @@
 		</Pane>
 		<Pane size={40} minSize={10}>
 			<div class="flex flex-col h-full">
-				<div class="px-2 w-full border-b py-1">
+				<div id="script-tutorial-4" class="px-2 w-full border-b py-1">
 					{#if testIsLoading}
 						<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
 							<WindmillIcon
@@ -211,7 +218,7 @@
 				</div>
 				<Splitpanes horizontal class="!max-h-[calc(100%-43px)]">
 					<Pane size={33}>
-						<div class="px-2">
+						<div id="script-tutorial-2" class="px-2">
 							<div class="break-words relative font-sans">
 								<SchemaForm compact {schema} bind:args bind:isValid />
 							</div>
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -209,7 +209,7 @@
 	})
 </script>

-<div bind:this={divEl} class="{$$props.class} editor" bind:clientWidth={width} />
+<div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />

 <style>
 	.editor {
--- a/frontend/src/lib/components/Slider.svelte
+++ b/frontend/src/lib/components/Slider.svelte
@@ -12,5 +12,5 @@
 	{#if !view}<ChevronDown />{:else}<ChevronUp />{/if}</Button
 >
 {#if view}
-	<div class="my-4 px-2" transition:slide><slot /></div>
+	<div class="my-4 px-2" transition:slide|local><slot /></div>
 {/if}
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -596,7 +596,7 @@
 <div
 	bind:this={divEl}
 	style="height: 18px;"
-	class="{$$props.class} template rounded-lg min-h-4 mx-0.5"
+	class="{$$props.class ?? ''} template rounded-lg min-h-4 mx-0.5 overflow-clip"
 	bind:clientWidth={width}
 />

--- a/frontend/src/lib/components/TestJobLoader.svelte
+++ b/frontend/src/lib/components/TestJobLoader.svelte
@@ -186,9 +186,9 @@
 		syncIteration++
 		await loadTestJob(id)
 		let nextIteration = 50
-		if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {
+		if (syncIteration > ITERATIONS_BEFORE_SLOW_REFRESH) {
 			nextIteration = 500
-		} else if (syncIteration == ITERATIONS_BEFORE_SUPER_SLOW_REFRESH) {
+		} else if (syncIteration > ITERATIONS_BEFORE_SUPER_SLOW_REFRESH) {
 			nextIteration = 2000
 		}
 		setTimeout(() => syncer(id), nextIteration)
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -16,7 +16,7 @@
 	const dispatch = createEventDispatcher()
 </script>

-<span class="{$$props.class} z-auto">
+<span class="{$$props.class ?? ''} z-auto">
 	<label
 		for={id}
 		class="inline-flex items-center mt-2 duration-200 {disabled
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -13,7 +13,7 @@
 <Popover notClickable {placement} class={wrapperClass}>
 	<Icon
 		class="{light
-			? 'text-gray-300'
+			? 'text-gray-400'
 			: ' text-gray-500'} font-thin inline-block align-middle w-4 {$$props.class}"
 		data={faInfoCircle}
 		{scale}
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -3,7 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type RunnableComponent from '../helpers/RunnableComponent.svelte'
@@ -22,10 +22,11 @@
 	export let noWFull = false
 	export let preclickAction: (() => Promise<void>) | undefined = undefined
 	export let customCss: ComponentCustomCSS<'button'> | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['loading', 'result']

-	const { runnableComponents, worldStore, app } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents, worldStore, app } = getContext<AppViewerContext>('AppViewerContext')

 	let labelValue: string
 	let color: ButtonType.Color
@@ -86,6 +87,33 @@
 	$: errorsMessage = Object.values(errors)
 		.filter((x) => x != '')
 		.join('\n')
+
+	async function handleClick(event: CustomEvent) {
+		event?.stopPropagation()
+		event?.preventDefault()
+
+		if (preclickAction) {
+			await preclickAction()
+		}
+
+		ownClick = true
+
+		if (!runnableComponent) {
+			if (gotoUrl) {
+				if (gotoNewTab) {
+					window.open(gotoUrl, '_blank')
+				} else {
+					goto(gotoUrl)
+				}
+			}
+		} else {
+			await runnableComponent?.runComponent()
+		}
+
+		if (recomputeIds) {
+			await Promise.all(recomputeIds.map((id) => $runnableComponents?.[id]?.()))
+		}
+	}
 </script>

 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -114,6 +142,7 @@
 	autoRefresh={false}
 	goto={gotoUrl}
 	{gotoNewTab}
+	{render}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
 		{#if errorsMessage}
@@ -131,42 +160,17 @@
 				e?.stopPropagation()
 				window.dispatchEvent(new Event('pointerup'))
 			}}
-			on:click={async (e) => {
-				if (preclickAction) {
-					await preclickAction()
-				}
-				e?.stopPropagation()
-				e?.preventDefault()
-				ownClick = true
-
-				if (!runnableComponent) {
-					if (gotoUrl) {
-						if (gotoNewTab) {
-							window.open(gotoUrl, '_blank')
-						} else {
-							goto(gotoUrl)
-						}
-					}
-				} else {
-					await runnableComponent?.runComponent()
-				}
-
-				if (recomputeIds) {
-					recomputeIds.forEach((id) => {
-						$runnableComponents[id]?.()
-					})
-				}
-			}}
+			on:click={handleClick}
 			{size}
 			{color}
 			{loading}
 		>
 			<span class="truncate inline-flex gap-2 items-center">
-				{#if beforeIconComponent}
+				{#if beforeIcon && beforeIconComponent}
 					<svelte:component this={beforeIconComponent} size={14} />
 				{/if}
 				<div>{labelValue}</div>
-				{#if afterIconComponent}
+				{#if afterIcon && afterIconComponent}
 					<svelte:component this={afterIconComponent} size={14} />
 				{/if}
 			</span>
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -5,7 +5,7 @@
 	import { Icon } from 'svelte-awesome'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -19,11 +19,12 @@
 	export let extraQueryParams: Record<string, any> = {}
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let customCss: ComponentCustomCSS<'container' | 'button'> | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['loading', 'result']

 	const { app, runnableComponents, worldStore, stateId } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')

 	let labelValue: string = 'Default label'
 	let color: ButtonType.Color
@@ -61,6 +62,7 @@
 <InputValue {id} input={configuration.size} bind:value={size} />

 <RunnableWrapper
+	{render}
 	bind:runnableComponent
 	{componentInput}
 	{id}
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -5,7 +5,7 @@
 	import { Icon } from 'svelte-awesome'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type RunnableComponent from '../helpers/RunnableComponent.svelte'
@@ -22,10 +22,11 @@
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let customCss: ComponentCustomCSS<'button' | 'popup'> | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['loading', 'result']

-	const { app, runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, runnableComponents, worldStore } = getContext<AppViewerContext>('AppViewerContext')

 	let labelValue: string = 'Default label'
 	let color: ButtonType.Color
@@ -93,6 +94,7 @@
 		}}
 	>
 		<RunnableWrapper
+			{render}
 			bind:runnableComponent
 			{componentInput}
 			{id}
--- a/frontend/src/lib/components/apps/components/display/AppBarChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppBarChart.svelte
@@ -17,16 +17,17 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'

 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')

 	ChartJS.register(
 		Title,
@@ -89,7 +90,7 @@
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />

-<RunnableWrapper flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			{#if lineChart}
--- a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
@@ -5,7 +5,7 @@
 	import type { AppInput } from '../../inputType'
 	import {
 		IS_APP_PUBLIC_CONTEXT_KEY,
-		type AppEditorContext,
+		type AppViewerContext,
 		type ComponentCustomCSS
 	} from '../../types'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
@@ -14,15 +14,16 @@
 	export let componentInput: AppInput | undefined
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'header' | 'container'> | undefined = undefined
+	export let render: boolean

 	const requireHtmlApproval = getContext<boolean | undefined>(IS_APP_PUBLIC_CONTEXT_KEY)
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 	let result: any = undefined

 	export const staticOutputs: string[] = ['result', 'loading']
 </script>

-<RunnableWrapper flexWrap {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 	<div
 		class={twMerge(
 			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
--- a/frontend/src/lib/components/apps/components/display/AppHtml.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppHtml.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'

@@ -9,9 +9,10 @@
 	export let componentInput: AppInput | undefined
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['result', 'loading']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')

 	let result: string | undefined = undefined
 	let h: number | undefined = undefined
@@ -28,7 +29,15 @@
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<RunnableWrapper autoRefresh flexWrap {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper
+		{render}
+		autoRefresh
+		flexWrap
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
+	>
 		{#key result}
 			<iframe
 				frameborder="0"
--- a/frontend/src/lib/components/apps/components/display/AppIcon.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppIcon.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import { AlignWrapper, InputValue } from '../helpers'
 	import { loadIcon } from '../icon'
@@ -12,8 +12,9 @@
 	export let configuration: Record<string, AppInput>
 	export const staticOutputs: string[] = []
 	export let customCss: ComponentCustomCSS<'container' | 'icon'> | undefined = undefined
+	export let render: boolean

-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')

 	let icon: string | undefined = undefined
 	let size: number
@@ -21,12 +22,10 @@
 	let strokeWidth: number
 	let iconComponent: any

-	$: icon && handleIcon()
+	$: handleIcon(icon)

-	async function handleIcon() {
-		if (icon) {
-			iconComponent = await loadIcon(icon)
-		}
+	async function handleIcon(i?: string) {
+		iconComponent = i ? await loadIcon(i) : undefined
 	}

 	$: css = concatCustomCss($app.css?.iconcomponent, customCss)
@@ -38,12 +37,13 @@
 <InputValue {id} input={configuration.strokeWidth} bind:value={strokeWidth} />

 <AlignWrapper
+	{render}
 	{horizontalAlignment}
 	{verticalAlignment}
 	class={css?.container?.class ?? ''}
 	style={css?.container?.style ?? ''}
 >
-	{#if iconComponent}
+	{#if icon && iconComponent}
 		<svelte:component
 			this={iconComponent}
 			size={size || 24}
--- a/frontend/src/lib/components/apps/components/display/AppImage.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppImage.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { staticValues } from '../../editor/componentsPanel/componentStaticValues'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'

@@ -13,8 +13,9 @@
 	export let configuration: Record<string, AppInput>
 	export const staticOutputs: string[] = ['loading']
 	export let customCss: ComponentCustomCSS<'image'> | undefined = undefined
+	export let render: boolean

-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 	const fit: Record<FitOption, string> = {
 		cover: 'object-cover',
 		contain: 'object-contain',
@@ -32,10 +33,12 @@
 <InputValue {id} input={configuration.imageFit} bind:value={imageFit} />
 <InputValue {id} input={configuration.altText} bind:value={altText} />

-<img
-	on:pointerdown|preventDefault
-	src={source}
-	alt={altText}
-	style={css?.image?.style ?? ''}
-	class={twMerge(`w-full h-full ${fit[imageFit || 'cover']}`, css?.image?.class ?? '')}
-/>
+{#if render}
+	<img
+		on:pointerdown|preventDefault
+		src={source}
+		alt={altText}
+		style={css?.image?.style ?? ''}
+		class={twMerge(`w-full h-full ${fit[imageFit || 'cover']}`, css?.image?.class ?? '')}
+	/>
+{/if}
--- a/frontend/src/lib/components/apps/components/display/AppMap.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMap.svelte
@@ -2,7 +2,7 @@
 	import { getContext, onMount } from 'svelte'
 	import { concatCustomCss } from '../../utils'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { InputValue } from '../helpers'
 	import { twMerge } from 'tailwind-merge'
 	import { Map, View, Feature } from 'ol'
@@ -32,9 +32,10 @@
 	export let configuration: Record<string, AppInput>
 	export const staticOutputs: string[] = ['mapRegion']
 	export let customCss: ComponentCustomCSS<'map'> | undefined = undefined
+	export let render: boolean

 	const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')

 	$: outputs = $worldStore?.outputsById[id] as {
 		mapRegion: Output<{
@@ -147,7 +148,6 @@
 	})

 	$: css = concatCustomCss($app.css?.mapcomponent, customCss)
-	$: gridItem = findGridItem($app, id)

 	function updateRegionOutput() {
 		if (map) {
@@ -164,6 +164,7 @@
 	}

 	function handleSyncRegion() {
+		const gridItem = findGridItem($app, id)
 		if (!map || !gridItem) {
 			return
 		}
@@ -192,23 +193,25 @@
 <InputValue {id} input={configuration.zoom} bind:value={zoom} />
 <InputValue {id} input={configuration.markers} bind:value={markers} />

-<div class="relative h-full w-full">
-	<div
-		on:pointerdown|stopPropagation={selectComponent}
-		bind:this={mapElement}
-		class={twMerge(`w-full h-full`, css?.map?.class ?? '')}
-		style={css?.map?.style ?? ''}
-	/>
-
-	{#if $mode !== 'preview'}
+{#if render}
+	<div class="relative h-full w-full">
 		<div
-			class="absolute bottom-0 left-0 px-1 py-0.5 bg-indigo-500 text-white text-2xs"
-			on:pointerdown={handleSyncRegion}
-		>
-			Set region
-		</div>
-	{/if}
-</div>
+			on:pointerdown|stopPropagation={selectComponent}
+			bind:this={mapElement}
+			class={twMerge(`w-full h-full`, css?.map?.class ?? '')}
+			style={css?.map?.style ?? ''}
+		/>
+
+		{#if $mode !== 'preview'}
+			<div
+				class="absolute bottom-0 left-0 px-1 py-0.5 bg-indigo-500 text-white text-2xs"
+				on:pointerdown={handleSyncRegion}
+			>
+				Set region
+			</div>
+		{/if}
+	</div>
+{/if}

 <style global lang="postcss">
 	.ol-overlaycontainer-stopevent {
--- a/frontend/src/lib/components/apps/components/display/AppPdf.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
@@ -0,0 +1,321 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import { twMerge } from 'tailwind-merge'
+	import { getDocument, type PDFDocumentProxy, type PDFPageProxy } from 'pdfjs-dist'
+	import 'pdfjs-dist/build/pdf.worker.entry'
+	import type { AppInput } from '../../inputType'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
+	import { concatCustomCss } from '../../utils'
+	import InputValue from '../helpers/InputValue.svelte'
+	import { throttle } from '../../../../utils'
+	import { Button } from '../../../common'
+	import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte'
+	import { fade } from 'svelte/transition'
+	import { findGridItem } from '../../editor/appUtils'
+
+	export let id: string
+	export let configuration: Record<string, AppInput>
+	export const staticOutputs: string[] = ['loading']
+	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
+	export let render: boolean
+
+	const { app, mode, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
+
+	let source: string | ArrayBuffer | undefined = undefined
+	let wrapper: HTMLDivElement | undefined = undefined
+	let error: string | undefined = undefined
+	let doc: PDFDocumentProxy | undefined = undefined
+	let pages: PDFPageProxy[] = []
+	let zoom: number | undefined = undefined
+	let controlsWidth: number | undefined = undefined
+	let controlsHeight: number | undefined = undefined
+	let pageNumber = 1
+
+	$: if (source == '') {
+		resetDoc()
+		error = 'Set the "Source" attribute of the PDF component'
+	}
+	$: zoom && handleZoom()
+	$: wrapper && loadDocument(source)
+	$: wideView = controlsWidth && controlsWidth > 450
+
+	async function resetDoc() {
+		await doc?.destroy()
+		doc = undefined
+	}
+
+	function handleZoom() {
+		if (zoom && wrapper) {
+			try {
+				renderPdf(false)
+			} catch (err) {
+				error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF')
+			}
+		}
+	}
+
+	async function loadDocument(src: string | ArrayBuffer | undefined) {
+		if (!src) {
+			return
+		}
+		try {
+			await resetDoc()
+			doc = await getDocument(src).promise
+			pageNumber = 1
+			await renderPdf(false, false)
+			error = undefined
+		} catch (err) {
+			await resetDoc()
+			error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF')
+			console.log(err)
+		}
+	}
+
+	async function renderPdf(scaleToViewport = true, resizing = false) {
+		if (!(doc && wrapper && zoom)) {
+			return
+		}
+		const scrollPosition = wrapper.scrollTop / wrapper.scrollHeight
+		if (!resizing) {
+			pages = []
+		}
+		const nextPages: typeof pages = []
+		const nextChildren: HTMLCanvasElement[] = []
+		const { width } = wrapper.getBoundingClientRect()
+		let scale = zoom / 100
+		if (scaleToViewport) {
+			const firstViewport = (await doc.getPage(1)).getViewport({ scale: 1 })
+			// Rounded to the first integer that is a multiple of 10 and is less than the viewport width
+			zoom = Math.floor((width / firstViewport.width) * 10) * 10
+			scale = zoom / 100
+		}
+
+		for (let i = 0; i < doc.numPages; i++) {
+			const canvas = document.createElement('canvas')
+			const canvasContext = canvas.getContext('2d')
+			if (!canvasContext) {
+				console.warn('Could not get canvas context for PDF page ' + i)
+				continue
+			}
+			const page = await doc.getPage(i + 1)
+			nextPages.push(page)
+			const viewport = page.getViewport({ scale })
+			canvas.height = viewport.height
+			canvas.width = viewport.width
+			canvas.classList.add('mx-auto', 'my-4', 'shadow-sm')
+			await page.render({ canvasContext, viewport }).promise
+			nextChildren.push(canvas)
+		}
+		while (wrapper.firstChild) {
+			wrapper.removeChild(wrapper.firstChild)
+		}
+		pages = [...nextPages]
+		wrapper.append(...nextChildren)
+		wrapper.scrollTo({
+			top: scrollPosition * wrapper.scrollHeight
+		})
+	}
+
+	function scrollToPage(page: number) {
+		page = pageNumber = minMax(page, 1, pages.length)
+		const offset = (wrapper?.children.item(page - 1) as HTMLCanvasElement | null)?.offsetTop
+		if (!offset) {
+			return
+		}
+		//                       controlsHeight + 2px border + half of the top margin
+		const padding = (controlsHeight ? controlsHeight + 2 : 0) + 8
+		wrapper?.scrollTo({
+			top: offset - padding
+		})
+	}
+
+	const throttledScroll = throttle(onScroll, 400)
+	function onScroll() {
+		if (!wrapper) {
+			return
+		}
+		const THRESHOLD = 50
+		let scrollPosition = wrapper.scrollTop + THRESHOLD + (controlsHeight ?? 0)
+		let page = 1
+		for (let i = 0; i < pages.length; i++) {
+			const canvas = wrapper.children.item(i) as HTMLCanvasElement | null
+			if (scrollPosition < (canvas?.offsetTop ?? wrapper.scrollHeight)) {
+				break
+			}
+			page = i + 1
+		}
+		pageNumber = page
+	}
+
+	function syncZoomValue() {
+		const gridItem = findGridItem($app, id)
+
+		if (gridItem && gridItem.data.configuration.zoom.value !== zoom) {
+			gridItem.data.configuration.zoom.value = zoom
+		}
+
+		$app = $app
+	}
+
+	async function downloadPdf() {
+		if (!doc) {
+			return
+		}
+		const data = await doc.saveDocument()
+		const url = URL.createObjectURL(new Blob([data.buffer]))
+		const link = document.createElement('a')
+		link.href = url
+		link.download = 'document.pdf'
+		link.click()
+		URL.revokeObjectURL(url)
+	}
+
+	function minMax(value: number, min: number, max: number) {
+		if (value < min) {
+			return min
+		} else if (value > max) {
+			return max
+		}
+		return value
+	}
+
+	$: css = concatCustomCss($app.css?.pdfcomponent, customCss)
+</script>
+
+<InputValue {id} input={configuration.source} bind:value={source} />
+<InputValue {id} input={configuration.zoom} bind:value={zoom} />
+
+{#if render}
+	<div class="relative w-full h-full bg-gray-100">
+		{#if source && zoom}
+			{#if pages?.length}
+				<div
+					bind:clientWidth={controlsWidth}
+					bind:clientHeight={controlsHeight}
+					class="fixed flex {$mode !== 'preview'
+						? 'w-[calc(100%-2px)] top-[1px]'
+						: 'w-full top-0'} {wideView
+						? 'justify-center gap-14'
+						: '!justify-between'} overflow-x-auto bg-white border mx-auto py-1"
+				>
+					<div class="flex justify-start items-center px-2 text-gray-600 text-sm">
+						<Button
+							on:click={() => zoom && (zoom -= 10)}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Zoom out"
+							aria-label="Zoom out"
+							btnClasses="!rounded-r-none !px-2"
+						>
+							<ZoomOut size={16} />
+						</Button>
+						{#if wideView}
+							<Button
+								on:click={() => (zoom = 100)}
+								disabled={!doc}
+								size="xs"
+								color="light"
+								variant="border"
+								title="Reset zoom"
+								aria-label="Reset zoom"
+								btnClasses="!w-[50px] !font-medium !rounded-none !border-l-0 !px-1"
+							>
+								{zoom.toFixed(0)}%
+							</Button>
+						{/if}
+						<Button
+							on:click={() => renderPdf(true, true)}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Scale to viewport"
+							aria-label="Scale to viewport"
+							btnClasses="!rounded-none !border-l-0 !px-2"
+						>
+							<MoveHorizontal size={16} />
+						</Button>
+						<Button
+							on:click={() => zoom && (zoom += 10)}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Zoom in"
+							aria-label="Zoom in"
+							btnClasses="!rounded-l-none !px-2 !border-l-0"
+						>
+							<ZoomIn size={16} />
+						</Button>
+					</div>
+					<div class="center-center px-2 text-gray-600 text-sm">
+						<input
+							on:input={({ currentTarget }) => {
+								scrollToPage(currentTarget.valueAsNumber)
+							}}
+							min="1"
+							max={pages.length}
+							value={pageNumber}
+							disabled={!doc}
+							type="number"
+							class="!w-[45px] !px-1 !py-0"
+						/>
+						<span class="whitespace-nowrap pl-1">
+							/ {pages.length}
+						</span>
+					</div>
+					<div class="flex justify-end items-center px-2 text-gray-600 text-sm">
+						<Button
+							on:click={downloadPdf}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Download PDF"
+							aria-label="Download PDF"
+							btnClasses="!font-medium !px-2"
+						>
+							{#if wideView}
+								<span class="mr-1"> Download </span>
+							{/if}
+							<Download size={16} />
+						</Button>
+					</div>
+				</div>
+			{:else}
+				<div
+					out:fade={{ duration: 200 }}
+					class="absolute inset-0 center-center flex-col text-center text-sm bg-white text-gray-600"
+				>
+					<Loader2 class="animate-spin mb-2" />
+					Loading PDF
+				</div>
+			{/if}
+			<div
+				bind:this={wrapper}
+				on:scroll={throttledScroll}
+				class={twMerge('w-full h-full overflow-auto', css?.container?.class ?? '', 'bg-gray-100')}
+				style="padding-top: {controlsHeight ?? 0}px; {css?.container?.style ?? ''}"
+			/>
+		{/if}
+		{#if $mode !== 'preview' && $selectedComponent === id}
+			<button
+				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90 
+			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"
+				on:click={() => syncZoomValue()}
+			>
+				Sync zoom value
+			</button>
+		{/if}
+		{#if error}
+			<div
+				class="absolute inset-0 z-20 center-center 
+		bg-gray-100 text-center text-gray-600 text-sm"
+			>
+				{error}
+			</div>
+		{/if}
+	</div>
+{/if}
--- a/frontend/src/lib/components/apps/components/display/AppPieChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppPieChart.svelte
@@ -14,7 +14,7 @@
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import type { AppInput } from '../../inputType'
 	import InputValue from '../helpers/InputValue.svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'

@@ -23,9 +23,10 @@
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')

 	ChartJS.register(
 		Title,
@@ -72,7 +73,7 @@
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />

-<RunnableWrapper flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			{#if doughnut}
--- a/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte
@@ -19,19 +19,20 @@
 	import type { ChartOptions, ChartData } from 'chart.js'
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'

 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
+	export let render: boolean

 	let zoomable = false
 	let pannable = false

 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')

 	ChartJS.register(
 		Title,
@@ -78,7 +79,7 @@
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />

-<RunnableWrapper flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			<Scatter {data} {options} />
--- a/frontend/src/lib/components/apps/components/display/AppText.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -8,8 +8,9 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import { twMerge } from 'tailwind-merge'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { getContext } from 'svelte'
+	import ResizeWrapper from '../helpers/ResizeWrapper.svelte'

 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -18,14 +19,16 @@
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'text'> | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['result', 'loading']

-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')

 	let result: string | undefined = undefined
 	let style: 'Title' | 'Subtitle' | 'Body' | 'Caption' | 'Label' | undefined = undefined
 	let copyButton: boolean
+	let fitContent = false

 	function getComponent() {
 		switch (style) {
@@ -63,36 +66,39 @@

 <InputValue {id} input={configuration.style} bind:value={style} />
 <InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
+<InputValue {id} input={configuration.fitContent} bind:value={fitContent} />

-<RunnableWrapper flexWrap {componentInput} {id} bind:initializing bind:result>
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		{#if !result || result === ''}
-			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
-				No text
-			</div>
-		{:else}
-			<div class="flex flex-wrap gap-2 pb-0.5 overflow-x-auto">
-				<svelte:element
-					this={component}
-					class={twMerge(
-						'whitespace-pre-wrap',
-						$app.css?.['textcomponent']?.['text']?.class,
-						customCss?.text?.class,
-						classes
-					)}
-					style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
-				>
-					{String(result)}
-				</svelte:element>
-				{#if copyButton && result}
-					<Popover notClickable>
-						<Button size="xs" btnClasses="!px-2" on:click={() => copyToClipboard(result)}>
-							<Clipboard size={14} strokeWidth={2} />
-						</Button>
-						<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
-					</Popover>
-				{/if}
-			</div>
-		{/if}
-	</AlignWrapper>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
+	<ResizeWrapper {id} shouldWrap={fitContent}>
+		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+			{#if !result || result === ''}
+				<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
+					No text
+				</div>
+			{:else}
+				<div class="flex flex-wrap gap-2 pb-0.5 overflow-x-auto">
+					<svelte:element
+						this={component}
+						class={twMerge(
+							'whitespace-pre-wrap',
+							$app.css?.['textcomponent']?.['text']?.class,
+							customCss?.text?.class,
+							classes
+						)}
+						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
+					>
+						{String(result)}
+					</svelte:element>
+					{#if copyButton && result}
+						<Popover notClickable>
+							<Button size="xs" btnClasses="!px-2" on:click={() => copyToClipboard(result)}>
+								<Clipboard size={14} strokeWidth={2} />
+							</Button>
+							<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
+						</Popover>
+					{/if}
+				</div>
+			{/if}
+		</AlignWrapper>
+	</ResizeWrapper>
 </RunnableWrapper>
--- a/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte
@@ -20,7 +20,7 @@
 	import { Scatter } from 'svelte-chartjs'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type { ChartOptions, ChartData } from 'chart.js'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { getContext } from 'svelte'
 	import { concatCustomCss } from '../../utils'

@@ -29,9 +29,10 @@
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')

 	let logarithmicScale = false
 	let zoomable = false
@@ -93,7 +94,7 @@
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />

-<RunnableWrapper flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			<Scatter {data} {options} />
--- a/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte
+++ b/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte
@@ -7,6 +7,7 @@
 	export let componentInput: AppInput | undefined
 	// export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['result', 'loading']

@@ -15,18 +16,17 @@

 	let Plotly
 	onMount(async () => {
-		if (divEl) {
-			//@ts-ignore
-			await import('https://cdn.plot.ly/plotly-2.18.0.min.js')
+		//@ts-ignore
+		await import('https://cdn.plot.ly/plotly-2.18.0.min.js')

-			Plotly = window['Plotly']
-		}
+		Plotly = window['Plotly']
 	})

 	let h: number | undefined = undefined
 	let w: number | undefined = undefined

 	$: Plotly &&
+		render &&
 		result &&
 		divEl &&
 		h &&
@@ -40,7 +40,7 @@
 </script>

 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper flexWrap {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>
--- a/frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte
+++ b/frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte
@@ -8,6 +8,7 @@
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['result', 'loading']

@@ -52,7 +53,7 @@
 <InputValue {id} input={configuration.canvas} bind:value={canvas} />

 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper flexWrap {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>
--- a/frontend/src/lib/components/apps/components/display/index.ts
+++ b/frontend/src/lib/components/apps/components/display/index.ts
@@ -6,6 +6,7 @@ export { default as AppHtml } from './AppHtml.svelte'
 export { default as AppIcon } from './AppIcon.svelte'
 export { default as AppImage } from './AppImage.svelte'
 export { default as AppMap } from './AppMap.svelte'
+export { default as AppPdf } from './AppPdf.svelte'
 export { default as AppPieChart } from './AppPieChart.svelte'
 export { default as AppScatterChart } from './AppScatterChart.svelte'
 export { default as AppText } from './AppText.svelte'
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -5,7 +5,7 @@

 	import { getContext, onMount } from 'svelte'
 	import type { Output } from '../../../rx'
-	import type { AppEditorContext } from '../../../types'
+	import type { AppViewerContext } from '../../../types'
 	import InputValue from '../../helpers/InputValue.svelte'
 	import type { AppInput } from '../../../inputType'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
@@ -17,16 +17,13 @@
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = ['selectedRow', 'loading', 'result', 'selectedRowIndex']

 	let result: Record<string, any>[] | undefined = undefined

-	const {
-		worldStore,
-		staticOutputs: staticOutputsStore,
-		selectedComponent
-	} = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')

 	let selectedRowIndex = -1

@@ -84,7 +81,7 @@
 <InputValue {id} input={configuration.pagination} bind:value={pagination} />
 <InputValue {id} input={configuration.pageSize} bind:value={pageSize} />

-<RunnableWrapper flexWrap {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full"
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte'
 	import type { Output } from '../../../rx'
-	import type { AppEditorContext, BaseAppComponent, ComponentCustomCSS } from '../../../types'
+	import type { AppViewerContext, BaseAppComponent, ComponentCustomCSS } from '../../../types'
 	import InputValue from '../../helpers/InputValue.svelte'
 	import type { AppInput } from '../../../inputType'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
@@ -25,6 +25,7 @@
 	export let customCss:
 		| ComponentCustomCSS<'container' | 'tableHeader' | 'tableBody' | 'tableFooter'>
 		| undefined = undefined
+	export let render: boolean

 	export const staticOutputs: string[] = [
 		'selectedRow',
@@ -60,15 +61,15 @@
 		app,
 		worldStore,
 		staticOutputs: staticOutputsStore
-	} = getContext<AppEditorContext>('AppEditorContext')
+	} = getContext<AppViewerContext>('AppViewerContext')

 	let selectedRowIndex = -1

-	function toggleRow(row: Record<string, any>, rowIndex: number) {
-		if (selectedRowIndex !== rowIndex) {
+	function toggleRow(row: Record<string, any>, rowIndex: number, force: boolean = false) {
+		if (selectedRowIndex !== rowIndex || force) {
 			selectedRowIndex = rowIndex
-			outputs?.selectedRow.set(row.original)
-			outputs?.selectedRowIndex.set(rowIndex)
+			outputs?.selectedRow.set(row.original, force)
+			outputs?.selectedRowIndex.set(rowIndex, force)
 		}
 	}

@@ -138,6 +139,9 @@

 	function rerender() {
 		table = createSvelteTable(options)
+		if (result) {
+			toggleRow({ original: result[0] }, 0, true)
+		}
 	}

 	$: result && rerender()
@@ -147,7 +151,7 @@

 <InputValue {id} input={configuration.search} bind:value={search} />

-<RunnableWrapper flexWrap {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div
 			class={twMerge(
@@ -242,16 +246,30 @@
 									<td class="p-2 " on:click={() => toggleRow(row, rowIndex)}>
 										<div class="center-center h-full w-full flex-wrap gap-1">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
-												<AppButton
-													noWFull
-													{...actionButton}
-													preclickAction={async () => {
-														toggleRow(row, rowIndex)
-													}}
-													extraQueryParams={{ row: row.original }}
-													bind:componentInput={actionButton.componentInput}
-													bind:staticOutputs={$staticOutputsStore[actionButton.id]}
-												/>
+												{#if rowIndex == 0}
+													<AppButton
+														{render}
+														noWFull
+														{...actionButton}
+														preclickAction={async () => {
+															toggleRow(row, rowIndex)
+														}}
+														extraQueryParams={{ row: row.original }}
+														bind:componentInput={actionButton.componentInput}
+														bind:staticOutputs={$staticOutputsStore[actionButton.id]}
+													/>
+												{:else}
+													<AppButton
+														{render}
+														noWFull
+														{...actionButton}
+														preclickAction={async () => {
+															toggleRow(row, rowIndex)
+														}}
+														extraQueryParams={{ row: row.original }}
+														bind:componentInput={actionButton.componentInput}
+													/>
+												{/if}
 											{/each}
 										</div>
 									</td>
--- a/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte
@@ -8,6 +8,7 @@
 	let c = ''
 	export { c as class }
 	export let style = ''
+	export let render: boolean = true

 	function tailwindHorizontalAlignment(alignment?: HorizontalAlignment) {
 		if (!alignment) return ''
@@ -39,6 +40,8 @@
 	)
 </script>

-<div class={classes} {style}>
-	<slot />
-</div>
+{#if render}
+	<div class={classes} {style}>
+		<slot />
+	</div>
+{/if}
--- a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte
@@ -19,6 +19,7 @@
 </script>

 <RunnableComponent
+	render={false}
 	{id}
 	{fields}
 	bind:result
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -3,7 +3,7 @@
 	import { deepEqual } from 'fast-equals'
 	import { getContext } from 'svelte'
 	import type { AppInput, EvalAppInput, UploadAppInput } from '../../inputType'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { accessPropertyByPath } from '../../utils'

 	type T = string | number | boolean | Record<string | number, any> | undefined
@@ -17,18 +17,36 @@

 	$: if (input && !deepEqual(input, lastInput)) {
 		lastInput = JSON.parse(JSON.stringify(input))
+		// Needed because of file uploads
+		if (input?.['value'] instanceof ArrayBuffer) {
+			lastInput.value = input?.['value']
+		}
 	}

-	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')

 	$: state = $worldStore?.state

-	$: lastInput && $worldStore && handleConnection()
-	$: lastInput && lastInput.type == 'template' && $state && (value = getValue(lastInput))
-	$: lastInput && lastInput.type == 'eval' && $state && (value = evalExpr(lastInput))
+	let timeout: NodeJS.Timeout | undefined = undefined
+	const debounce_ms = 50
+	function debounce(cb: () => void) {
+		if (timeout) {
+			clearTimeout(timeout)
+		}
+		timeout = setTimeout(cb, debounce_ms)
+	}
+
+	$: lastInput && $worldStore && debounce(handleConnection)
+	$: lastInput &&
+		lastInput.type == 'template' &&
+		$state &&
+		debounce(() => (value = getValue(lastInput)))
+	$: lastInput &&
+		lastInput.type == 'eval' &&
+		$state &&
+		debounce(() => (value = evalExpr(lastInput)))

 	function handleConnection() {
-		// console.log('handle connection', id, lastInput)
 		if (lastInput.type === 'connected') {
 			$worldStore?.connect<any>(lastInput, onValueChange)
 		} else if (lastInput.type === 'static' || lastInput.type == 'template') {
@@ -110,7 +128,6 @@
 	function onValueChange(newValue: any): void {
 		if (lastInput.type === 'connected' && newValue !== undefined && newValue !== null) {
 			const { connection } = lastInput
-
 			if (!connection) {
 				// No connection
 				return
--- a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
+	import { Loader2 } from 'lucide-svelte'
 	import { getContext } from 'svelte'
+	import { fade } from 'svelte/transition'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import InputValue from './InputValue.svelte'

 	export let componentInput: AppInput
 	export let id: string
 	export let result: any
+	export let render: boolean

 	// Sync the result to the output
-	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')

 	$: outputs = $worldStore?.outputsById[id] as {
 		loading: Output<boolean>
@@ -32,4 +35,16 @@
 	<InputValue {id} input={componentInput} bind:value={result} />
 {/if}

-<slot />
+{#if render}
+	<slot />
+{:else}
+	<div class="w-full h-full">
+		<div
+			out:fade|local={{ duration: 50 }}
+			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+		>
+			<Loader2 class="animate-spin" size={16} />
+			<span class="text-xs mt-1">Loading</span>
+		</div>
+	</div>
+{/if}
--- a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
@@ -3,11 +3,11 @@
 	import { faRefresh } from '@fortawesome/free-solid-svg-icons'
 	import { RefreshCcw, RefreshCw } from 'lucide-svelte'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'

 	export let componentId: string

-	const { runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents, worldStore } = getContext<AppViewerContext>('AppViewerContext')

 	async function refresh() {
 		window.dispatchEvent(new Event('pointerup'))
--- a/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import { findGridItem } from '../../editor/appUtils'
+	import type { AppViewerContext } from '../../types'
+
+	export let id: string
+	export let shouldWrap: boolean = false
+	const { app, breakpoint } = getContext<AppViewerContext>('AppViewerContext')
+
+	$: gridItem = findGridItem($app, id)
+
+	let wrapper: HTMLElement
+
+	$: {
+		if (wrapper && gridItem && shouldWrap) {
+			const wrapperHeight = wrapper.getBoundingClientRect().height
+			const width = $breakpoint === 'sm' ? 3 : 12
+			gridItem[width].h = Math.ceil(wrapperHeight / 36)
+			gridItem = gridItem
+		}
+	}
+</script>
+
+{#if shouldWrap}
+	<div bind:this={wrapper}>
+		<slot />
+	</div>
+{:else}
+	<slot />
+{/if}
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -2,14 +2,17 @@
 	import { goto } from '$app/navigation'
 	import type { Schema } from '$lib/common'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import Popover from '$lib/components/Popover.svelte'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
 	import { AppService, type CompletedJob } from '$lib/gen'
-	import { defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
+	import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
+	import { Bug, Loader2 } from 'lucide-svelte'
 	import { getContext, onMount } from 'svelte'
+	import { fade } from 'svelte/transition'
 	import type { AppInputs, Runnable } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import InputValue from './InputValue.svelte'
 	import RefreshButton from './RefreshButton.svelte'

@@ -27,6 +30,7 @@
 	export let initializing: boolean | undefined = undefined
 	export let gotoUrl: string | undefined = undefined
 	export let gotoNewTab: boolean | undefined = undefined
+	export let render: boolean

 	const {
 		worldStore,
@@ -39,7 +43,7 @@
 		errorByComponent,
 		mode,
 		stateId
-	} = getContext<AppEditorContext>('AppEditorContext')
+	} = getContext<AppViewerContext>('AppViewerContext')

 	onMount(() => {
 		if (autoRefresh) {
@@ -50,7 +54,7 @@
 		}
 	})

-	let args: Record<string, any> = {}
+	let args: Record<string, any> | undefined = undefined
 	let testIsLoading = false
 	let runnableInputValues: Record<string, any> = {}
 	let executeTimeout: NodeJS.Timeout | undefined = undefined
@@ -83,9 +87,7 @@
 	}

 	$: fields && (lazyStaticValues = computeStaticValues())
-	$: runnableInputValues &&
-		extraQueryParams &&
-		args &&
+	$: (runnableInputValues || extraQueryParams || args) &&
 		autoRefresh &&
 		testJobLoader &&
 		setDebouncedExecute()
@@ -104,7 +106,6 @@
 	}

 	$: outputs?.loading?.set(testIsLoading)
-
 	$: schemaStripped = stripSchema(fields, $stateId)

 	function stripSchema(inputs: AppInputs, s: any): Schema {
@@ -163,7 +164,7 @@
 				if (field?.type == 'static' && fields[k]) {
 					staticRunnableInputs[k] = field.value
 				} else if (field?.type == 'user') {
-					nonStaticRunnableInputs[k] = args[k]
+					nonStaticRunnableInputs[k] = args?.[k]
 				} else {
 					nonStaticRunnableInputs[k] = runnableInputValues[k]
 				}
@@ -257,45 +258,61 @@
 	bind:this={testJobLoader}
 />

-<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
-	{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
-		<div class="px-2 h-fit min-h-0">
-			<SchemaForm
-				{flexWrap}
-				schema={schemaStripped}
-				bind:args
-				{disabledArgs}
-				shouldHideNoInputs
-				noVariablePicker
-			/>
-		</div>
-	{/if}
+{#if render}
+	<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
+		{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
+			<div class="px-2 h-fit min-h-0">
+				<SchemaForm
+					{flexWrap}
+					schema={schemaStripped}
+					bind:args
+					{disabledArgs}
+					shouldHideNoInputs
+					noVariablePicker
+				/>
+			</div>
+		{/if}

-	{#if !runnable && autoRefresh}
-		<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
-			Please select a runnable
-		</Alert>
-	{:else if result?.error && $mode === 'preview'}
-		<div class="p-2">
-			<Alert type="error" title="Error during execution">
-				<div class="flex flex-col gap-2">
-					An error occured, please contact the app author.
-					<span class="font-semibold">Job id: {testJob?.id}</span>
-					<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs"
-						>{JSON.stringify(result.error, null, 4)}
-				</pre>
-				</div>
+		{#if !runnable && autoRefresh}
+			<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
+				Please select a runnable
 			</Alert>
-			<slot />
-		</div>
-	{:else}
-		<div class="block grow w-full max-h-full">
-			<slot />
-		</div>
-	{/if}
-	{#if !initializing && autoRefresh === true}
-		<div class="flex absolute top-1 right-1 z-50">
-			<RefreshButton componentId={id} />
-		</div>
-	{/if}
-</div>
+		{:else if result?.error && $mode === 'preview'}
+			<div
+				title="Error"
+				class={classNames(
+					'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-2  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
+					'bg-red-100/80'
+				)}
+			>
+				<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+					<Bug size={14} />
+					<span slot="text">
+						<div class="bg-white">
+							<Alert type="error" title="Error during execution">
+								<div class="flex flex-col gap-2">
+									An error occured, please contact the app author.
+									<span class="font-semibold">Job id: {testJob?.id}</span>
+								</div>
+							</Alert>
+						</div>
+					</span>
+				</Popover>
+			</div>
+			<div class="block grow w-full max-h-full border border-red-300 bg-red-50 relative">
+				<slot />
+			</div>
+		{:else}
+			<div class="block grow w-full max-h-full">
+				<slot />
+			</div>
+		{/if}
+		{#if !initializing && autoRefresh === true}
+			<div class="flex absolute top-1 right-1 z-50">
+				<RefreshButton componentId={id} />
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="w-full h-full" />
+{/if}
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils'
 	import NonRunnableComponent from './NonRunnableComponent.svelte'
 	import RunnableComponent from './RunnableComponent.svelte'
@@ -20,8 +20,9 @@
 	export let runnableStyle = ''
 	export let goto: string | undefined = undefined
 	export let gotoNewTab: boolean | undefined = undefined
+	export let render: boolean

-	const { staticExporter, noBackend } = getContext<AppEditorContext>('AppEditorContext')
+	const { staticExporter, noBackend } = getContext<AppViewerContext>('AppViewerContext')

 	$: if (initializing && result) {
 		initializing = false
@@ -57,11 +58,12 @@
 		{initializing}
 		wrapperClass={runnableClass}
 		wrapperStyle={runnableStyle}
+		{render}
 	>
 		<slot />
 	</RunnableComponent>
 {:else}
-	<NonRunnableComponent bind:result {id} {componentInput}>
+	<NonRunnableComponent {render} bind:result {id} {componentInput}>
 		<slot />
 	</NonRunnableComponent>
 {/if}
--- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
@@ -3,7 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -13,8 +13,9 @@
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let customCss: ComponentCustomCSS<'text'> | undefined = undefined
+	export let render: boolean

-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')

 	export const staticOutputs: string[] = ['result']

@@ -36,7 +37,7 @@
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />

-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
 		on:pointerdown={(e) => {
 			e?.stopPropagation()
--- a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
@@ -3,36 +3,38 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'

 	export let id: string
 	export let configuration: Record<string, AppInput>
-	export let inputType: 'date' | 'time' | 'datetime-local'
+	export let inputType: 'date'
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
+	export let render: boolean

-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
-	let input: HTMLInputElement
+	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	let labelValue: string = 'Title'
 	let minValue: string = ''
 	let maxValue: string = ''
 	let defaultValue: string | undefined = undefined

+	let value: string | undefined = undefined
+
 	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<string>
+		result: Output<string | undefined>
 	}

-	function handleInput() {
-		outputs?.result.set(input.value)
+	$: handleDefault(defaultValue)
+
+	$: outputs?.result.set(value)
+
+	function handleDefault(defaultValue: string | undefined) {
+		value = defaultValue
 	}
-
-	$: input && handleInput()
-
 	$: css = concatCustomCss($app.css?.dateinputcomponent, customCss)
 </script>

@@ -41,17 +43,18 @@
 <InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />

-<InputDefaultValue bind:input {defaultValue} />
-
-<AlignWrapper {verticalAlignment}>
-	<input
-		type={inputType}
-		bind:this={input}
-		on:input={handleInput}
-		min={minValue}
-		max={maxValue}
-		placeholder="Type..."
-		class={twMerge('mx-0.5', css?.input?.class ?? '')}
-		style={css?.input?.style ?? ''}
-	/>
+<AlignWrapper {render} {verticalAlignment}>
+	{#if inputType === 'date'}
+		<input
+			on:focus={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation
+			type="date"
+			bind:value
+			min={minValue}
+			max={maxValue}
+			placeholder="Type..."
+			class={twMerge('mx-0.5', css?.input?.class ?? '')}
+			style={css?.input?.style ?? ''}
+		/>
+	{/if}
 </AlignWrapper>
--- a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
@@ -4,7 +4,7 @@
 	import { FileInput } from '../../../common'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'

@@ -12,8 +12,9 @@
 	export let configuration: Record<string, AppInput>
 	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
+	export let render: boolean

-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')

 	let acceptedFileTypes: string[] | undefined = undefined
 	let allowMultiple: boolean | undefined = undefined
@@ -35,17 +36,19 @@
 <InputValue {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
 <InputValue {id} input={configuration.text} bind:value={text} />

-<div class="w-full h-full p-1">
-	<FileInput
-		accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
-		multiple={allowMultiple}
-		convertTo="base64"
-		on:change={({ detail }) => {
-			handleChange(detail)
-		}}
-		class={twMerge('w-full h-full', css?.container?.class)}
-		style={css?.container?.style}
-	>
-		{text}
-	</FileInput>
-</div>
+{#if render}
+	<div class="w-full h-full p-1">
+		<FileInput
+			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
+			multiple={allowMultiple}
+			convertTo="base64"
+			on:change={({ detail }) => {
+				handleChange(detail)
+			}}
+			class={twMerge('w-full h-full', css?.container?.class)}
+			style={css?.container?.style}
+		>
+			{text}
+		</FileInput>
+	</div>
+{/if}
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -3,12 +3,11 @@
 	import Select from 'svelte-select'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
-	import { stopPropagation } from 'ol/events/Event'

 	export const staticOutputs: string[] = ['result']
 	export let id: string
@@ -16,9 +15,10 @@
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
+	export let render: boolean

 	const { app, worldStore, connectingInput, selectedComponent } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 	let items: { label: string; value: string }[]
 	let placeholder: string = 'Select an item'

@@ -57,16 +57,20 @@
 <InputValue {id} input={configuration.items} bind:value={labels} />
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />

-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<div class="app-select w-full mx-0.5" style="height: 34px" on:pointerdown|stopPropagation>
 		{#if !value || Array.isArray(value)}
 			<Select
+				--border-radius="0"
+				--border-color="#999"
 				multiple
 				on:change={(e) => e.stopPropagation()}
 				{items}
 				class={css?.input?.class ?? ''}
 				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles + css?.input?.style}
+				containerStyles={'border-color: #999;' +
+					SELECT_INPUT_DEFAULT_STYLE.containerStyles +
+					css?.input?.style}
 				bind:value
 				{placeholder}
 				on:click={() => {
--- a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
+	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'

 	export let id: string
@@ -13,28 +13,29 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
+	export let render: boolean

-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
-	let input: HTMLInputElement
+	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')

 	let defaultValue: number | undefined = undefined
 	let placeholder: string | undefined = undefined
+	let value: number | undefined = undefined

 	let min: number | undefined = undefined
 	let max: number | undefined = undefined
 	let step = 1

 	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<number | null>
+		result: Output<number | undefined>
 	}

-	function handleInput() {
-		const value = input?.value
-		const num = isNaN(+value) ? null : +value
-		outputs?.result.set(num)
-	}
+	$: handleDefault(defaultValue)

-	$: input && handleInput()
+	$: outputs?.result.set(value)
+
+	function handleDefault(defaultValue: number | undefined) {
+		value = defaultValue
+	}

 	$: css = concatCustomCss($app.css?.numberinputcomponent, customCss)
 </script>
@@ -44,18 +45,17 @@
 <InputValue {id} input={configuration.max} bind:value={max} />
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputDefaultValue bind:input {defaultValue} />

-<AlignWrapper {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	<input
-		class="mx-0.5 {css?.input?.class ?? ''}"
+		on:pointerdown|stopPropagation
+		on:focus={() => ($selectedComponent = id)}
+		class={twMerge(
+			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+			css?.input?.class ?? ''
+		)}
 		style={css?.input?.style ?? ''}
-		bind:this={input}
-		on:input={handleInput}
-		on:focus={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
+		bind:value
 		{min}
 		{max}
 		{step}
--- a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
@@ -3,7 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { concatCustomCss } from '../../utils'
@@ -15,8 +15,9 @@
 	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'handles' | 'bar' | 'limits' | 'values'> | undefined =
 		undefined
+	export let render: boolean

-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 	let min = 0
 	let max = 42
 	let step = 1
@@ -48,13 +49,18 @@
 <InputValue {id} input={configuration.defaultLow} bind:value={values[0]} />
 <InputValue {id} input={configuration.defaultHigh} bind:value={values[1]} />

-<AlignWrapper {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	<div class="flex flex-col w-full">
 		<div class="flex items-center w-full gap-1 px-1">
 			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
 				{+min}
 			</span>
-			<div class="grow" on:pointerdown|stopPropagation>
+			<div
+				class="grow"
+				style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
+					''}"
+				on:pointerdown|stopPropagation
+			>
 				<RangeSlider
 					bind:slider
 					bind:values
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -3,7 +3,7 @@
 	import Select from 'svelte-select'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -15,9 +15,10 @@
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
+	export let render: boolean

 	const { app, worldStore, connectingInput, selectedComponent } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 	let items: { label: string; value: any; created?: boolean }[]
 	let placeholder: string = 'Select an item'

@@ -96,17 +97,20 @@
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 <InputValue {id} input={configuration.create} bind:value={create} />

-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-	<div class="app-select w-full mx-0.5" style="height: 34px" on:pointerdown|stopPropagation>
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<div class="app-select w-full mx-0.5" style="height: 34px;" on:pointerdown|stopPropagation>
 		<Select
+			--border-radius="0"
+			--border-color="#999"
 			bind:filterText
 			on:filter={handleFilter}
 			on:clear={onChange}
 			on:change={onChange}
 			items={listItems}
-			class={css?.input?.class ?? ''}
 			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles + css?.input?.style}
+			containerStyles={'border-color: #999;' +
+				SELECT_INPUT_DEFAULT_STYLE.containerStyles +
+				css?.input?.style}
 			{value}
 			{placeholder}
 			on:click={() => {
--- a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
@@ -3,7 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -13,9 +13,11 @@
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
-	export let customCss: ComponentCustomCSS<'handle' | 'limits' | 'value'> | undefined = undefined
+	export let customCss: ComponentCustomCSS<'handle' | 'limits' | 'value' | 'bar'> | undefined =
+		undefined
+	export let render: boolean

-	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	let min = 0
 	let max = 42
 	let step = 1
@@ -55,12 +57,17 @@
 <InputValue {id} input={configuration.max} bind:value={max} />
 <InputValue {id} input={configuration.defaultValue} bind:value={values[0]} />

-<AlignWrapper {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	<div class="flex items-center w-full gap-1 px-1">
 		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
 			{+min}
 		</span>
-		<div class="grow" on:pointerdown|stopPropagation={() => ($selectedComponent = id)}>
+		<div
+			class="grow"
+			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
+				''}"
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+		>
 			<RangeSlider bind:slider bind:values {step} min={+min} max={+max} />
 		</div>
 		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
--- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -3,10 +3,9 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'

 	export let id: string
@@ -15,42 +14,73 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
-	export let appCssKey: 'textinputcomponent' | 'passwordinputcomponent' = 'textinputcomponent'
+	export let appCssKey: 'textinputcomponent' | 'passwordinputcomponent' | 'emailinputcomponent' =
+		'textinputcomponent'
+	export let render: boolean

-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
-	let input: HTMLInputElement
+	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')

 	let placeholder: string | undefined = undefined
 	let defaultValue: string | undefined = undefined
+	let value: string | undefined = undefined

 	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<string>
+		result: Output<string | undefined>
 	}

-	function handleInput() {
-		outputs?.result.set(input.value)
-	}
+	$: handleDefault(defaultValue)

-	$: input && handleInput()
+	$: outputs?.result.set(value)
+
+	function handleDefault(defaultValue: string | undefined) {
+		value = defaultValue
+	}

 	$: css = concatCustomCss($app.css?.[appCssKey], customCss)
 </script>

 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputDefaultValue bind:input {defaultValue} />

-<AlignWrapper {verticalAlignment}>
-	<input
-		class={twMerge('mx-0.5', css?.input?.class ?? '')}
-		style={css?.input?.style ?? ''}
-		on:focus={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
-		type={inputType}
-		bind:this={input}
-		on:input={handleInput}
-		{placeholder}
-	/>
+<AlignWrapper {render} {verticalAlignment}>
+	{#if inputType === 'password'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
+			type="password"
+			bind:value
+			{placeholder}
+		/>
+	{:else if inputType === 'text'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
+			type="text"
+			bind:value
+			{placeholder}
+		/>
+	{:else if inputType === 'email'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
+			type="email"
+			bind:value
+			{placeholder}
+		/>
+	{/if}
 </AlignWrapper>
--- a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
+	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../../inputType'
 	import type { Output } from '../../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../../types'
 	import { concatCustomCss } from '../../../utils'
 	import AlignWrapper from '../../helpers/AlignWrapper.svelte'
 	import InputValue from '../../helpers/InputValue.svelte'
@@ -13,8 +14,9 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
+	export let render: boolean

-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')

 	let defaultValue: number | undefined = undefined

@@ -48,15 +50,15 @@
 <InputValue {id} input={configuration.currency} bind:value={currency} />
 <InputValue {id} input={configuration.locale} bind:value={locale} />

-<AlignWrapper {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	{#key isNegativeAllowed}
 		{#key locale}
 			{#key currency}
 				<CurrencyInput
 					inputClasses={{
-						formatted: 'p-0 ' + css?.input?.class,
-						wrapper: 'w-full',
-						formattedZero: 'text-black ' + css?.input?.class
+						formatted: twMerge('px-2 w-full py-1.5 windmillapp', css?.input?.class),
+						wrapper: 'w-full windmillapp',
+						formattedZero: twMerge('text-black windmillapp ', css?.input?.class)
 					}}
 					style={css?.input?.style}
 					bind:value
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS, GridItem } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS, GridItem } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'

@@ -10,11 +10,12 @@
 	export let configuration: Record<string, AppInput>
 	export let componentContainerHeight: number
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
+	export let render: boolean

 	let noPadding: boolean | undefined = undefined

 	export const staticOutputs: string[] = []
-	const { app, focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, focusedGrid, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')

 	function onFocus() {
 		$focusedGrid = {
@@ -30,9 +31,10 @@

 <InputValue {id} input={configuration.noPadding} bind:value={noPadding} />

-<div class="border">
+<div>
 	{#if $app.subgrids?.[`${id}-0`]}
 		<SubGridEditor
+			visible={render}
 			{noPadding}
 			{id}
 			class={css?.container.class}
--- a/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type {
-		AppEditorContext,
+		AppViewerContext,
 		ComponentCustomCSS,
 		HorizontalAlignment,
 		VerticalAlignment
@@ -18,8 +18,9 @@
 	export let verticalAlignment: VerticalAlignment | undefined = undefined
 	export let customCss: ComponentCustomCSS<'container' | 'divider'> | undefined = undefined
 	export let position: 'horizontal' | 'vertical'
+	export let render: boolean

-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 	let size = 2
 	let color = '#00000060'

@@ -34,6 +35,7 @@
 	{verticalAlignment}
 	class={twMerge(css?.container?.class, 'h-full')}
 	style={css?.container?.style}
+	{render}
 >
 	<div
 		class={twMerge(
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
 	import Portal from 'svelte-portal'
 	import { concatCustomCss } from '../../utils'
@@ -16,8 +16,9 @@
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let noWFull = false
+	export let render: boolean

-	const { app, focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, focusedGrid, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')

 	let gridContent: string[] | undefined = undefined
 	let noPadding: boolean | undefined = undefined
@@ -69,7 +70,7 @@
 <InputValue {id} input={configuration.fillContainer} bind:value={fillContainer} />

 <Portal target="#app-editor-top-level-drawer">
-	<Drawer bind:this={appDrawer} size="800px" alwaysOpen positionClass="!absolute">
+	<Drawer let:open bind:this={appDrawer} size="800px" alwaysOpen positionClass="!absolute">
 		<DrawerContent
 			title={drawerTitle}
 			on:close={() => {
@@ -79,6 +80,7 @@
 		>
 			{#if $app.subgrids?.[`${id}-0`]}
 				<SubGridEditor
+					visible={open && render}
 					{noPadding}
 					{id}
 					class={css?.container.class}
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppEditorContext, AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
@@ -14,10 +14,11 @@
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let horizontal: boolean = false
 	export let panes: number[]
+	export let render: boolean

-	export const staticOutputs: string[] = []
+	const { app, focusedGrid, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')

-	const { app, focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { componentControl } = getContext<AppEditorContext>('AppEditorContext')

 	let noPadding: boolean | undefined = undefined

@@ -31,6 +32,31 @@
 	$: $selectedComponent === id && onFocus()
 	$: css = concatCustomCss($app.css?.containercomponent, customCss)

+	$componentControl[id] = {
+		left: () => {
+			if ($focusedGrid?.subGridIndex) {
+				const index = $focusedGrid?.subGridIndex ?? 0
+				if (index > 0) {
+					$focusedGrid.subGridIndex = index - 1
+					return true
+				}
+			}
+			return false
+		},
+		right: () => {
+			// subGridIndex can be 0
+			if ($focusedGrid?.subGridIndex !== undefined) {
+				const index = $focusedGrid?.subGridIndex ?? 0
+
+				if (index < panes.length - 1) {
+					$focusedGrid.subGridIndex = index + 1
+					return true
+				}
+			}
+			return false
+		}
+	}
+
 	let sumedup = [50, 50]
 	$: {
 		let ns = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100)
@@ -48,6 +74,7 @@
 			<Pane size={paneSize} minSize={20}>
 				{#if $app.subgrids?.[`${id}-${index}`]}
 					<SubGridEditor
+						visible={render}
 						noYPadding
 						{noPadding}
 						{id}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ádám Kovács	b76426ba83	faet(frontend): Add tour manager store	2023-03-10 20:11:25 +01:00
Ádám Kovács	1cb2a177c6	Merge branch 'main' into tutorials	2023-03-10 19:13:04 +01:00
Ádám Kovács	db87577a1b	feat(frontend): Add app editor tour	2023-03-10 19:11:34 +01:00
Ruben Fiszel	bc440f8d41	feat(frontend-apps): add variable picker for static string input on apps	2023-03-10 18:41:27 +01:00
Ádám Kovács	c219eb0ee9	feat(frontend): Add flow editor tour	2023-03-10 18:36:53 +01:00
Ruben Fiszel	1d5c194f09	feat(bash): add default argument handling for bash	2023-03-10 15:04:34 +01:00
Ruben Fiszel	7a9d230459	disable playwright for now	2023-03-10 12:54:00 +01:00
Ruben Fiszel	4d5e2499cf	cleanup .workflows	2023-03-10 12:48:02 +01:00
Ruben Fiszel	686275fd46	trim tailwindcss	2023-03-10 12:44:08 +01:00
Ruben Fiszel	99399f4f77	fix serde test	2023-03-10 12:19:56 +01:00
Ruben Fiszel	6e09194313	fix compile	2023-03-10 12:12:10 +01:00
Ruben Fiszel	7c825c212d	fix(backend): add killpill for lines reading	2023-03-10 12:04:05 +01:00
Ádám Kovács	bfe5b56c99	feat(frontend): Add script editor tour	2023-03-10 09:38:34 +01:00
Ruben Fiszel	480fd781b6	worker ping at least every 5s even when running long jobs	2023-03-10 01:38:12 +01:00
Ruben Fiszel	4f2079f624	trim tailwind safelist	2023-03-10 01:06:55 +01:00
Ruben Fiszel	43c45d930c	chore(main): release 1.74.2 (#1277 ) * chore(main): release 1.74.2 * Apply automatic changes --------- Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>	2023-03-10 00:55:13 +01:00
Faton Ramadani	8d5c5b88a3	fix(frontend): fix splitpanes navigation (#1276 )	2023-03-10 00:32:33 +01:00
Ruben Fiszel	cc8bedd0c7	make frontend configurable through consts.ts	2023-03-09 22:54:25 +01:00
Ruben Fiszel	74c3d6443c	chore(main): release 1.74.1 (#1275 ) * chore(main): release 1.74.1 * Apply automatic changes --------- Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>	2023-03-09 22:45:53 +01:00
Ruben Fiszel	c7be313210	fix importjson	2023-03-09 22:42:47 +01:00
Ruben Fiszel	ae53bafaf6	fix(apps): proper reactivity for non rendered static components	2023-03-09 22:29:19 +01:00
Ruben Fiszel	2ea15d5035	fix(ci): make windmill compile again by pinning swc deps	2023-03-09 22:20:31 +01:00
Ruben Fiszel	0f187d66dd	show backtrace for cook	2023-03-09 21:22:36 +01:00
Ádám Kovács	4453690521	feat(frontend): Add onboarding tour to home page	2023-03-09 20:11:27 +01:00
Ruben Fiszel	6691b19b24	chore(main): release 1.74.0 (#1269 ) * chore(main): release 1.74.0 * Apply automatic changes --------- Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>	2023-03-09 19:58:21 +01:00
Ruben Fiszel	2f9ccff65c	app nits	2023-03-09 19:56:47 +01:00
Ruben Fiszel	09db6fd867	fix key navigation	2023-03-09 19:41:12 +01:00
Ruben Fiszel	fd52740d5d	improve reactivity check for big objects on app	2023-03-09 18:34:36 +01:00
Faton Ramadani	6b0fb75d23	feat(frontend): Add key navigation in app editor (#1273 ) * feat(frontend): add expand * feat(frontend): fix container height * feat(frontend): remove code duplication * feat(frontend): add historic * feat(frontend): add key navigation * feat(frontend): simplfiy * feat(frontend): add support for subgrids * feat(frontend): update key navigation * feat(frontend): update key navigation * feat(frontend): fix nested component * feat(frontend): fix build * feat(frontend): remove code duplication * feat(frontend): support tabs * feat(frontend): support tabs * feat(frontend): Fix AppTabs + handle tab navigation * feat(frontend): support splitpanes	2023-03-09 18:23:12 +01:00
Ruben Fiszel	b1a45b1e70	feat(frontend): add hash to ctx in apps	2023-03-09 14:57:43 +01:00
Ruben Fiszel	b2de531a46	fix(frontend): simplify input bindings	2023-03-09 14:25:08 +01:00
Ruben Fiszel	a4adcb5192	fix(frontend): add confirmation modal to delete script/flow/app	2023-03-09 13:19:03 +01:00
Ruben Fiszel	0c2cf92dd3	feat: add delete by path for scripts	2023-03-09 12:44:49 +01:00
Ruben Fiszel	e6344dac6d	fix(cli): improve visibility of the active workspace	2023-03-09 11:21:16 +01:00
Ruben Fiszel	8fb2454e83	enforce on_behalf_of by the backend, not frontend	2023-03-09 11:12:28 +01:00
Ádám Kovács	3b6ae0cc49	fix(frontend): Minor changes (#1272 ) * fix(frontend): Output seach fixed on top * fix(frontend): Use undo-redo component in flows	2023-03-09 09:42:51 +01:00
Ruben Fiszel	96ff2eebc1	fix publishing app as a superadmin	2023-03-09 02:08:52 +01:00
Ruben Fiszel	ed29d51c36	fix app json import	2023-03-09 01:16:57 +01:00
Ádám Kovács	88e537ad1f	feat(frontend): Add color picker input to app (#1270 ) * feat(frontend): Add color picker input to app * fix(frontend): Add color input to dividers	2023-03-08 22:57:34 +01:00
Faton Ramadani	b854ee3439	feat(frontend): add expand (#1268 ) * feat(frontend): add expand * feat(frontend): fix container height * feat(frontend): remove code duplication * feat(frontend): add historic	2023-03-08 22:56:30 +01:00
Ádám Kovács	0a5e181a3a	fix(frontend): Clean up app editor (#1267 ) * fix(frontend): Clean up app editor * fix(frontend): Add outputs search empty state * fix(frontend): Add remove button to icon input * label * fix(frontend): Iconed app button	2023-03-08 19:02:19 +01:00
Ruben Fiszel	8cc59225d8	improve resource picker	2023-03-08 19:00:26 +01:00
Ruben Fiszel	9c41346dde	fix subtle plotly import bug	2023-03-08 18:27:19 +01:00
Ruben Fiszel	41a398f50e	fix frontend build error	2023-03-08 16:59:14 +01:00
Ruben Fiszel	3436061ad4	make windmill compatible with arm64	2023-03-08 16:55:00 +01:00
Ruben Fiszel	569b5d2516	improve rendering performances for non visible elements	2023-03-08 16:39:16 +01:00
Ruben Fiszel	a08cdd7b86	chore(main): release 1.73.1 (#1266 ) * chore(main): release 1.73.1 * Apply automatic changes --------- Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>	2023-03-08 00:41:42 +01:00
Ruben Fiszel	719d475262	fix(frontend): load flow is not initialized	2023-03-08 00:37:58 +01:00
Ruben Fiszel	5b3e1183e5	revert import on tailwind colors for faster builds	2023-03-08 00:20:12 +01:00
Ruben Fiszel	7ed301b186	chore(main): release 1.73.0 (#1257 ) * chore(main): release 1.73.0 * Apply automatic changes --------- Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>	2023-03-07 22:35:56 +01:00
Ruben Fiszel	46b6e4371b	improve undo/redo + keybindings	2023-03-07 21:16:15 +01:00
Ruben Fiszel	e0d3465b07	fix z-stacking on chrome for flow builder	2023-03-07 19:27:35 +01:00
Ruben Fiszel	7f8fe8dc17	fix z-stacking on chrome for flow builder	2023-03-07 19:23:41 +01:00
Faton Ramadani	24f58efd99	feat(frontend): add a way to automatically resize (#1259 ) * feat(frontend): add a way to automatically resize (wip) + add automatic resizable component * feat(frontend): fix text resize * feat(frontend): remvove useless softWrap * feat(frontend): remove useless softWrap * feat(frontend): Fix recomputeIds + app table * feat(frontend): Fix app preview error display	2023-03-07 16:53:29 +01:00
Ruben Fiszel	67d8009dcf	fix multiple app nits	2023-03-07 15:51:02 +01:00
Ruben Fiszel	95ccc9edf8	fix z-index for flowbuilder	2023-03-07 14:57:51 +01:00
Ruben Fiszel	9e4d90ad37	feat(frontend): add history to flows and apps	2023-03-07 14:47:17 +01:00
Ádám Kovács	c638897fdc	fix(frontend): Side menu z-index issue (#1265 )	2023-03-07 09:53:19 +01:00
Ruben Fiszel	71305e5154	show archived + fix graphs	2023-03-07 01:59:35 +01:00
Ruben Fiszel	9e9f8efb8e	feat(frontend): add fork/save buttons + consistent styling for slider/range	2023-03-06 22:35:25 +01:00
Ádám Kovács	3e5d09ef0b	feat(frontend): Add app PDF viewer (#1254 ) * feat(frontend): Add app PDF viewer (wip) * fix(frontend): Handle file upload * fix(frontend): Handle multi page pdf * feat(frontend): Add pdf page numbering * feat(frontend): Add more pdf viewer controls * save * fix(frontend): Pdf loading * fix(frontend): Resize PDF in small window * fix(frontend): Minor fixes * feat(frontend): Add pdf zoom configuration * fix wip * save * bg color * save progress * pdf scaling * feat(frontend): fix zoom synchro * fix(frontend): Pdf scroll tracking * fix(frontend): Double scrollbar * nits * fixes --------- Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com> Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>	2023-03-06 20:17:36 +01:00
Ruben Fiszel	614fb5022a	feat(frontend): add ability to move nodes	2023-03-06 18:41:20 +01:00
Ruben Fiszel	0beadfd1ac	fix z-index of inputransformform	2023-03-06 16:04:32 +01:00
Ruben Fiszel	25580c1272	add trigger button	2023-03-06 14:11:17 +01:00
Faton Ramadani	2557e136bd	fix(frontend): fix app map reactivity (#1260 )	2023-03-06 11:26:00 +01:00
Ruben Fiszel	200cb69d82	make default branch non removable for branchone	2023-03-06 11:19:56 +01:00
Ruben Fiszel	9ee261fe1a	Update docker-compose.yml	2023-03-06 10:39:00 +01:00
Ruben Fiszel	8e563a42f5	Update docker-compose.yml with oauth example	2023-03-06 10:38:01 +01:00
Faton Ramadani	a999eb2112	fix(frontend): fix branch deletion (#1261 ) * fix(frontend): fix branch deletion * fix(frontend): fix branch deletion * fix(frontend): fix branch deletion	2023-03-06 09:01:19 +01:00
Ruben Fiszel	e5dbe7076c	handle larger sized graphs	2023-03-06 08:33:53 +01:00
Ruben Fiszel	2ac51b0af0	feat(frontend): refactor entire flow builder UX	2023-03-05 23:00:43 +01:00
Ruben Fiszel	f3232062c3	make tailwind inputs class configurable	2023-03-03 22:32:35 +01:00
Ruben Fiszel	b11a5a2df6	only bind the staticoutputs of the first row	2023-03-03 18:00:09 +01:00
Ruben Fiszel	e2c4545240	fix(frontend): arginput + apppreview fixes	2023-03-03 17:34:08 +01:00
Faton Ramadani	70dd6f759c	App small fixes (#1258 ) * fix(frontend): Fix runnable editor * fix(frontend): remove isopenstore * fix(frontend): add output searchbar * fix(frontend): fix build * fix(frontend): add missing clear button	2023-03-03 15:15:29 +01:00
Ruben Fiszel	dcfb29fb80	fix sqlx offline	2023-03-03 13:04:24 +01:00
Faton Ramadani	94f1aadef2	feat(frontend): Fix object viewer style (#1255 ) Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>	2023-03-03 12:47:55 +01:00
Ruben Fiszel	58300eb6ac	introduce root_job and leaf_jobs for efficient result_by_id	2023-03-03 12:44:44 +01:00
Ashutosh Narang	304dea4b74	update build instructions (#1256 )	2023-03-03 11:19:12 +01:00