From b535c13be5ce6a473d3729f8ac72a33cd57c656a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 24 May 2025 13:26:38 +0200
Subject: [PATCH] squashed 2

---
 .github/workflows/aider-after-review.yaml     |  129 +-
 .github/workflows/aider-external.yaml         |   70 +-
 .github/workflows/aider.yaml                  |  310 +++-
 .github/workflows/claude.yml                  |    6 +-
 .github/workflows/create-docs.yml             |   28 +-
 backend/.vscode/settings.json                 |    3 +-
 backend/ee-repo-ref.txt                       |    6 +-
 backend/src/main.rs                           |   25 +-
 backend/src/monitor.rs                        |    2 +-
 backend/windmill-api/openapi.yaml             |    9 +
 backend/windmill-api/src/jobs.rs              |   16 +-
 .../src/postgres_triggers/handler.rs          |    5 +-
 .../windmill-api/src/postgres_triggers/mod.rs |    5 +-
 .../src/postgres_triggers/trigger.rs          |   76 +-
 backend/windmill-api/src/scripts.rs           |   11 +-
 backend/windmill-api/src/utils.rs             |   13 -
 backend/windmill-common/src/agent_workers.rs  |    4 +-
 backend/windmill-common/src/jwt.rs            |    1 -
 backend/windmill-common/src/scripts.rs        |   61 +-
 backend/windmill-common/src/utils.rs          |   78 +-
 backend/windmill-common/src/worker.rs         |   20 +-
 backend/windmill-queue/src/jobs.rs            |   21 +-
 backend/windmill-worker/src/agent_workers.rs  |   12 +-
 backend/windmill-worker/src/common.rs         |    1 +
 backend/windmill-worker/src/handle_child.rs   |    1 +
 .../windmill-worker/src/result_processor.rs   |  387 ++++-
 backend/windmill-worker/src/worker.rs         |   98 +-
 backend/windmill-worker/src/worker_flow.rs    |   16 +-
 backend/windmill-worker/src/worker_utils.rs   |    4 +
 frontend/package-lock.json                    |   45 +-
 frontend/package.json                         |    5 +-
 frontend/src/app.html                         |    2 +-
 .../AgentWorkerExtraBehavior.svelte           |   36 +
 .../components/DBManagerDrawerButton.svelte   |    4 +-
 .../src/lib/components/Description.svelte     |    4 +-
 frontend/src/lib/components/Dev.svelte        |   14 +-
 .../src/lib/components/DisplayResult.svelte   |   10 +-
 .../components/DisplayResultControlBar.svelte |    2 +-
 frontend/src/lib/components/DropdownV2.svelte |   19 +-
 .../src/lib/components/DropdownV2Inner.svelte |   18 +-
 .../src/lib/components/FlowBuilder.svelte     |  325 ++--
 .../components/HttpAgentWorkerDrawer.svelte   |  129 +-
 frontend/src/lib/components/Label.svelte      |    6 +-
 frontend/src/lib/components/Path.svelte       |   46 +-
 .../src/lib/components/PrimarySchedule.svelte |   86 +
 .../lib/components/RunPageSchedules.svelte    |  245 +++
 .../src/lib/components/SchedulePanel.svelte   |   53 -
 .../src/lib/components/ScriptBuilder.svelte   |  301 ++--
 .../src/lib/components/ScriptPicker.svelte    |    2 +-
 frontend/src/lib/components/Section.svelte    |    4 +-
 frontend/src/lib/components/SqlRepl.svelte    |    4 +-
 .../lib/components/StringTypeNarrowing.svelte |    2 +-
 .../src/lib/components/TagsToListenTo.svelte  |   87 +-
 frontend/src/lib/components/Toggle.svelte     |   18 +-
 .../src/lib/components/TooltipInner.svelte    |   29 -
 frontend/src/lib/components/WorkerRepl.svelte |  295 ++++
 .../apps/components/display/dbtable/utils.ts  |    4 +-
 frontend/src/lib/components/common/Url.svelte |   22 -
 .../components/common/button/Button.svelte    |    9 +-
 .../src/lib/components/common/button/model.ts |    1 -
 .../ConfirmationModal.svelte                  |   19 +-
 .../DraftTriggersConfirmationModal.svelte     |  178 --
 frontend/src/lib/components/common/index.ts   |    1 -
 .../components/common/table/FlowRow.svelte    |    2 +-
 .../components/common/table/ScriptRow.svelte  |    2 +-
 .../toggleButton-v2/ToggleButton.svelte       |    1 -
 .../toggleButton-v2/ToggleButtonGroup.svelte  |    2 +-
 frontend/src/lib/components/dbOps.ts          |   14 +-
 .../components/details/ClipboardPanel.svelte  |    5 +-
 .../details/CopyableCodeBlock.svelte          |   10 +-
 .../details/DetailPageDetailPanel.svelte      |   33 +-
 .../details/DetailPageHeader.svelte           |   16 +-
 .../details/DetailPageLayout.svelte           |   76 +-
 .../details/EmailTriggerCaptures.svelte       |   70 -
 .../details/EmailTriggerConfigSection.svelte  |   35 +
 .../details/EmailTriggerPanel.svelte          |   34 +-
 .../lib/components/flows/FlowEditor.svelte    |    4 -
 .../components/flows/common/FlowCard.svelte   |    4 +-
 .../flows/content/FlowEditorPanel.svelte      |   17 +-
 .../flows/content/FlowModuleWrapper.svelte    |   33 +-
 .../flows/content/FlowPathViewer.svelte       |   14 +-
 .../flows/map/FlowModuleSchemaMap.svelte      |    4 +-
 .../flows/map/InsertModuleButton.svelte       |  153 +-
 .../flows/map/InsertModuleInner.svelte        |  167 --
 .../flows/propPicker/StepHistory.svelte       |    1 -
 .../src/lib/components/flows/scheduleUtils.ts |   64 +-
 .../graph/renderers/nodes/TriggersNode.svelte |   53 +-
 .../renderers/triggers/TriggersBadge.svelte   |  381 +----
 .../renderers/triggers/TriggersWrapper.svelte |  133 +-
 .../components/icons/GoogleCloudIcon.svelte   |    7 +-
 frontend/src/lib/components/jobs/utils.ts     |   14 +-
 .../meltComponents/MeltButton.svelte          |   13 +-
 .../lib/components/meltComponents/Menu.svelte |    9 +-
 .../components/meltComponents/Tooltip.svelte  |   31 +-
 .../src/lib/components/runs/RunRow.svelte     |    2 +-
 .../schema/AddPropertyFormV2.svelte           |    6 +-
 .../src/lib/components/table/DataTable.svelte |    6 +-
 frontend/src/lib/components/triggers.ts       |   42 +-
 .../triggers/AddTriggersButton.svelte         |  133 --
 .../components/triggers/CaptureSection.svelte |  508 +-----
 .../components/triggers/CaptureTable.svelte   |    6 +-
 .../components/triggers/CaptureWrapper.svelte |  297 ++--
 .../triggers/TriggerEditorToolbar.svelte      |  137 --
 .../components/triggers/TriggerLabel.svelte   |   43 -
 .../components/triggers/TriggersEditor.svelte |  579 +++----
 .../triggers/TriggersEditorSection.svelte     |  135 ++
 .../components/triggers/TriggersTable.svelte  |  139 --
 .../triggers/TriggersWrapper.svelte           |  280 ++-
 .../components/triggers/gcp/GcpCapture.svelte |   71 -
 .../triggers/gcp/GcpTriggerEditor.svelte      |   11 +-
 .../gcp/GcpTriggerEditorConfigSection.svelte  |  104 +-
 .../triggers/gcp/GcpTriggerEditorInner.svelte |  459 ++---
 .../triggers/gcp/GcpTriggerPanel.svelte       |  159 +-
 .../src/lib/components/triggers/gcp/utils.ts  |   52 -
 .../http/RouteBodyTransformerOption.svelte    |   44 +-
 .../triggers/http/RouteCapture.svelte         |   87 -
 .../triggers/http/RouteEditor.svelte          |   16 +-
 .../http/RouteEditorConfigSection.svelte      |  115 +-
 .../triggers/http/RouteEditorInner.svelte     |  800 ++++-----
 .../triggers/http/RoutesPanel.svelte          |  154 +-
 .../src/lib/components/triggers/http/utils.ts |   51 -
 .../triggers/kafka/KafkaCapture.svelte        |   58 -
 .../triggers/kafka/KafkaTriggerEditor.svelte  |    8 +-
 .../kafka/KafkaTriggerEditorInner.svelte      |  447 ++---
 .../kafka/KafkaTriggersConfigSection.svelte   |  290 +++-
 .../triggers/kafka/KafkaTriggersPanel.svelte  |  168 +-
 .../lib/components/triggers/kafka/utils.ts    |   43 -
 .../triggers/mqtt/MqttCapture.svelte          |   58 -
 .../mqtt/MqttEditorConfigSection.svelte       |   25 +-
 .../triggers/mqtt/MqttTriggerEditor.svelte    |    8 +-
 .../mqtt/MqttTriggerEditorInner.svelte        |  445 ++---
 .../triggers/mqtt/MqttTriggersPanel.svelte    |  164 +-
 .../src/lib/components/triggers/mqtt/utils.ts |   48 -
 .../triggers/nats/NatsCapture.svelte          |   58 -
 .../triggers/nats/NatsTriggerEditor.svelte    |    8 +-
 .../nats/NatsTriggerEditorInner.svelte        |  439 ++---
 .../nats/NatsTriggersConfigSection.svelte     |  318 +++-
 .../triggers/nats/NatsTriggersPanel.svelte    |  170 +-
 .../src/lib/components/triggers/nats/utils.ts |   48 -
 .../triggers/postgres/PostgresCapture.svelte  |   58 -
 .../PostgresEditorConfigSection.svelte        |  141 ++
 .../postgres/PostgresTriggerEditor.svelte     |   14 +-
 .../PostgresTriggerEditorInner.svelte         |  955 +++++------
 .../postgres/PostgresTriggersPanel.svelte     |  166 +-
 .../postgres/PublicationPicker.svelte         |   12 +-
 .../triggers/postgres/RelationPicker.svelte   |   17 +-
 .../triggers/postgres/SlotPicker.svelte       |    5 +-
 .../lib/components/triggers/postgres/utils.ts |   59 +-
 .../triggers/schedules/ScheduleEditor.svelte  |   10 +-
 .../schedules/ScheduleEditorInner.svelte      | 1511 ++++++++---------
 .../components/triggers/sqs/SqsCapture.svelte |   52 -
 .../triggers/sqs/SqsTriggerEditor.svelte      |    8 +-
 .../sqs/SqsTriggerEditorConfigSection.svelte  |   35 +-
 .../triggers/sqs/SqsTriggerEditorInner.svelte |  426 ++---
 .../triggers/sqs/SqsTriggerPanel.svelte       |  162 +-
 .../src/lib/components/triggers/sqs/utils.ts  |   46 -
 .../components/triggers/testingBadge.svelte   |    9 -
 .../components/triggers/triggers.svelte.ts    |  456 -----
 frontend/src/lib/components/triggers/utils.ts |  529 ------
 .../triggers/webhook/WebhooksCapture.svelte   |   80 -
 .../webhook/WebhooksConfigSection.svelte      |  332 ++--
 .../triggers/webhook/WebhooksPanel.svelte     |   60 +-
 .../websocket/WebsocketCapture.svelte         |   55 -
 .../WebsocketEditorConfigSection.svelte       |   37 +-
 .../websocket/WebsocketTriggerEditor.svelte   |   27 +-
 .../WebsocketTriggerEditorInner.svelte        |  867 ++++------
 .../websocket/WebsocketTriggersPanel.svelte   |  164 +-
 .../components/triggers/websocket/utils.ts    |   46 -
 frontend/src/lib/script_helpers.ts            |   19 +-
 frontend/src/lib/utils.ts                     |   56 +-
 .../(root)/(logged)/flows/add/+page.svelte    |   15 +-
 .../flows/edit/[...path]/+page.svelte         |   29 +-
 .../(logged)/flows/get/[...path]/+page.svelte |  160 +-
 .../(root)/(logged)/gcp_triggers/+page.svelte |    2 +-
 .../(logged)/kafka_triggers/+page.svelte      |    2 +-
 .../(logged)/mqtt_triggers/+page.svelte       |    2 +-
 .../(logged)/nats_triggers/+page.svelte       |    2 +-
 .../(logged)/postgres_triggers/+page.svelte   |    2 +-
 .../(root)/(logged)/routes/+page.svelte       |    2 +-
 .../(root)/(logged)/schedules/+page.svelte    |    2 +-
 .../(root)/(logged)/scripts/add/+page.svelte  |    7 +-
 .../scripts/edit/[...path]/+page.svelte       |   11 +-
 .../scripts/get/[...hash]/+page.svelte        |  167 +-
 .../(root)/(logged)/sqs_triggers/+page.svelte |    2 +-
 .../(logged)/websocket_triggers/+page.svelte  |    2 +-
 .../(root)/(logged)/workers/+page.svelte      |   90 +-
 frontend/src/routes/flows/dev/+page.svelte    |   14 +-
 187 files changed, 8563 insertions(+), 10446 deletions(-)
 create mode 100644 frontend/src/lib/components/AgentWorkerExtraBehavior.svelte
 create mode 100644 frontend/src/lib/components/PrimarySchedule.svelte
 create mode 100644 frontend/src/lib/components/RunPageSchedules.svelte
 delete mode 100644 frontend/src/lib/components/SchedulePanel.svelte
 delete mode 100644 frontend/src/lib/components/TooltipInner.svelte
 create mode 100644 frontend/src/lib/components/WorkerRepl.svelte
 delete mode 100644 frontend/src/lib/components/common/Url.svelte
 delete mode 100644 frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
 delete mode 100644 frontend/src/lib/components/details/EmailTriggerCaptures.svelte
 delete mode 100644 frontend/src/lib/components/flows/map/InsertModuleInner.svelte
 delete mode 100644 frontend/src/lib/components/triggers/AddTriggersButton.svelte
 delete mode 100644 frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
 delete mode 100644 frontend/src/lib/components/triggers/TriggerLabel.svelte
 create mode 100644 frontend/src/lib/components/triggers/TriggersEditorSection.svelte
 delete mode 100644 frontend/src/lib/components/triggers/TriggersTable.svelte
 delete mode 100644 frontend/src/lib/components/triggers/gcp/GcpCapture.svelte
 delete mode 100644 frontend/src/lib/components/triggers/gcp/utils.ts
 delete mode 100644 frontend/src/lib/components/triggers/http/RouteCapture.svelte
 delete mode 100644 frontend/src/lib/components/triggers/kafka/KafkaCapture.svelte
 delete mode 100644 frontend/src/lib/components/triggers/kafka/utils.ts
 delete mode 100644 frontend/src/lib/components/triggers/mqtt/MqttCapture.svelte
 delete mode 100644 frontend/src/lib/components/triggers/mqtt/utils.ts
 delete mode 100644 frontend/src/lib/components/triggers/nats/NatsCapture.svelte
 delete mode 100644 frontend/src/lib/components/triggers/nats/utils.ts
 delete mode 100644 frontend/src/lib/components/triggers/postgres/PostgresCapture.svelte
 create mode 100644 frontend/src/lib/components/triggers/postgres/PostgresEditorConfigSection.svelte
 delete mode 100644 frontend/src/lib/components/triggers/sqs/SqsCapture.svelte
 delete mode 100644 frontend/src/lib/components/triggers/sqs/utils.ts
 delete mode 100644 frontend/src/lib/components/triggers/testingBadge.svelte
 delete mode 100644 frontend/src/lib/components/triggers/triggers.svelte.ts
 delete mode 100644 frontend/src/lib/components/triggers/utils.ts
 delete mode 100644 frontend/src/lib/components/triggers/webhook/WebhooksCapture.svelte
 delete mode 100644 frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
 delete mode 100644 frontend/src/lib/components/triggers/websocket/utils.ts

diff --git a/.github/workflows/aider-after-review.yaml b/.github/workflows/aider-after-review.yaml
index 87d48ddb4c..bbaf2e8c20 100644
--- a/.github/workflows/aider-after-review.yaml
+++ b/.github/workflows/aider-after-review.yaml
@@ -5,42 +5,12 @@ on:
     types: [submitted]
 
 jobs:
-  check-membership:
+  auto-fix-review:
     if: github.event.review.state == 'changes_requested' && contains(github.event.pull_request.title, '[Aider PR]')
-    runs-on: ubicloud-standard-2
-    outputs:
-      is_member: ${{ steps.check-membership.outputs.is_member }}
-    steps:
-      - name: Check organization membership
-        id: check-membership
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GITHUB_REPOSITORY: ${{ github.repository }}
-          REVIEWER: ${{ github.event.review.user.login }}
-          ORG_ACCESS_TOKEN: ${{ secrets.ORG_ACCESS_TOKEN }}
-        run: |
-          ORG="windmill-labs"
-          STATUS=$(curl -s -o /dev/null -w "%{http_code}" \
-            -H "Authorization: token $ORG_ACCESS_TOKEN" \
-            -H "Accept: application/vnd.github+json" \
-            -H "X-GitHub-Api-Version: 2022-11-28" \
-            "https://api.github.com/orgs/$ORG/members/$REVIEWER")
-
-          if [ "$STATUS" -eq 204 ]; then
-            echo "is_member=true" >> $GITHUB_OUTPUT
-          else
-            echo "is_member=false" >> $GITHUB_OUTPUT
-          fi
-
-  check-and-prepare:
-    needs: check-membership
-    if: github.event.review.state == 'changes_requested' && contains(github.event.pull_request.title, '[Aider PR]') && needs.check-membership.outputs.is_member == 'true'
-    runs-on: ubicloud-standard-2
+    runs-on: ubicloud-standard-8
     permissions:
       contents: write
       pull-requests: write
-    outputs:
-      prompt_content: ${{ steps.prepare_prompt.outputs.prompt_content }}
     env:
       GEMINI_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
       GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
@@ -49,39 +19,96 @@ jobs:
       WINDMILL_TOKEN: ${{ secrets.WINDMILL_TOKEN }}
 
     steps:
-      - name: Acknowledge Request
+      - name: Harden Runner
+        uses: step-security/harden-runner@v2
+        with:
+          egress-policy: audit
+
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure Git User
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Checkout PR Branch
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GITHUB_REPOSITORY: ${{ github.repository }}
         run: |
-          echo "Commenting on PR #${{ github.event.pull_request.number }} to acknowledge the /aider command."
-          gh pr comment ${{ github.event.pull_request.number }} --body "🤖 Aider is starting to work on your request. Please be patient, this might take a few minutes." --repo $GITHUB_REPOSITORY
+          echo "PR review trigger: Checking out PR branch..."
+          PR_NUMBER=${{ github.event.pull_request.number }}
+          PR_HEAD_REF=$(gh pr view $PR_NUMBER --json headRefName -q .headRefName --repo $GITHUB_REPOSITORY)
+          if [[ -z "$PR_HEAD_REF" || "$PR_HEAD_REF" == "null" ]]; then
+             echo "::error::Could not determine PR head branch for PR #$PR_NUMBER via gh CLI."
+             exit 1
+          fi
+          echo "Checking out PR head branch: $PR_HEAD_REF for PR #$PR_NUMBER"
+          git fetch origin "refs/heads/${PR_HEAD_REF}:refs/remotes/origin/${PR_HEAD_REF}" --no-tags
+          git checkout "$PR_HEAD_REF"
+          echo "Successfully checked out branch $(git rev-parse --abbrev-ref HEAD)"
 
-      - name: Prepare prompt for Aider
-        id: prepare_prompt
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Install Aider and Dependencies
+        run: |
+          python -m pip install aider-install; aider-install
+          pip install -U google-generativeai
+          sudo apt-get update && sudo apt-get install -y jq
+
+      - name: Generate Prompt from Review
+        id: generate_prompt
         shell: bash
-        env:
-          GITHUB_REPOSITORY: ${{ github.repository }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          REVIEW_BODY: ${{ github.event.review.body }}
         run: |
-          REVIEW_BODY_ESCAPED="${REVIEW_BODY//\\/\\\\}"
-          REVIEW_BODY_ESCAPED="${REVIEW_BODY_ESCAPED//\"/\\\"}"
+          mkdir -p .github/aider
+          PROMPT_FILE_PATH=".github/aider/review-prompt.txt"
 
+          # Get PR review body
+          REVIEW_BODY="${{ github.event.review.body }}"
+          REVIEW_BODY_Q=$(printf '%q' "$REVIEW_BODY")
+
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+
+          # Get PR description for context NOT USED FOR NOW
+          # PR_DETAILS=$(gh pr view $PR_NUMBER --json title,body --repo $GITHUB_REPOSITORY)
+          # PR_TITLE=$(echo "$PR_DETAILS" | jq -r .title)
+          # PR_BODY=$(echo "$PR_DETAILS" | jq -r .body)
+
+          # Get all PR review comments
           ALL_REVIEW_COMMENTS=$(gh api \
             -H "Accept: application/vnd.github+json" \
             -H "X-GitHub-Api-Version: 2022-11-28" \
-            /repos/$GITHUB_REPOSITORY/pulls/$PR_NUMBER/comments)
-
-          FORMATTED_COMMENTS=$(jq -r '[.[] | {diff_hunk: .diff_hunk, path: .path, body: .body}]' <<< "$ALL_REVIEW_COMMENTS")
+            /repos/$GITHUB_REPOSITORY/pulls/$PR_NUMBER/comments \
+            | jq '[.[] | {diff_hunk: .diff_hunk, path: .path, body: .body}]')
 
           BASE_PROMPT="Fix the following issues in the PR based on the review feedback. The review body is prepended with REVIEW. The review comments are prepended with REVIEW_COMMENTS. The review body and comments are separated by a blank line."
+          COMPLETE_PROMPT=$(printf "%s\nREVIEW:\n%s\nREVIEW_COMMENTS:\n%s" \
+            "$BASE_PROMPT" "$REVIEW_BODY_Q" "$ALL_REVIEW_COMMENTS")
+          echo "$COMPLETE_PROMPT" > "$PROMPT_FILE_PATH"
+          echo "PROMPT_FILE_PATH=$PROMPT_FILE_PATH" >> $GITHUB_OUTPUT
 
-          COMPLETE_PROMPT="${BASE_PROMPT}"$'\n'"REVIEW:"$'\n'"${REVIEW_BODY_ESCAPED}"$'\n'"REVIEW_COMMENTS:"$'\n'"${FORMATTED_COMMENTS}"
+      - name: Probe Chat for Relevant Files
+        id: probe_files
+        env:
+          PROMPT_CONTENT_FILE: ${{ steps.generate_prompt.outputs.PROMPT_FILE_PATH }}
+        run: |
+          echo "Running probe-chat to find relevant files..."
+          if [[ ! -f "$PROMPT_CONTENT_FILE" ]]; then
+            echo "::error::Prompt file $PROMPT_CONTENT_FILE not found!"
+            exit 1
+          fi
+          PROMPT_CONTENT=$(cat "$PROMPT_CONTENT_FILE")
+          if [ -z "$PROMPT_CONTENT" ]; then
+             echo "::error::Prompt content is empty!"
+             exit 1
+          fi
 
-          echo "prompt_content<<EOF" >> $GITHUB_OUTPUT
-          echo "$COMPLETE_PROMPT" >> $GITHUB_OUTPUT
-          echo "EOF" >> $GITHUB_OUTPUT
+          PROMPT_ESCAPED=$(jq -Rs . <<< "$PROMPT_CONTENT")
 
   run-aider:
     needs: [check-membership, check-and-prepare]
diff --git a/.github/workflows/aider-external.yaml b/.github/workflows/aider-external.yaml
index cfdb03d352..86ef7c466d 100644
--- a/.github/workflows/aider-external.yaml
+++ b/.github/workflows/aider-external.yaml
@@ -5,21 +5,19 @@ on:
     types: [external_issue_fix]
 
 jobs:
-  check-and-prepare:
-    runs-on: ubicloud-standard-2
+  auto-fix:
+    runs-on: ubicloud-standard-8
     permissions:
       contents: write
       pull-requests: write
-    outputs:
-      issue_title: ${{ steps.determine_inputs.outputs.ISSUE_TITLE }}
-      issue_body: ${{ steps.determine_inputs.outputs.ISSUE_BODY }}
-      instruction: ${{ steps.determine_inputs.outputs.INSTRUCTION }}
+      issues: write
     env:
       GEMINI_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
       GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       WINDMILL_TOKEN: ${{ secrets.WINDMILL_TOKEN }}
+<<<<<<< Updated upstream:.github/workflows/aider-external.yaml
       LINEAR_API_KEY: ${{ secrets.LINEAR_API_KEY }}
       DISCORD_BOT_TOKEN: ${{ secrets.DISCORD_AI_BOT_TOKEN }}
 
@@ -44,29 +42,53 @@ jobs:
               "https://discord.com/api/v10/channels/${{ github.event.client_payload.channel_id }}/messages" \
               -d "{\"content\":\"🤖 Aider is starting to work on your request. I'll update you here once I have a PR ready. Please be patient, this might take a few minutes.\"}"
           fi
+=======
 
-      - name: Determine inputs for Aider
-        id: determine_inputs
-        shell: bash
-        env:
-          ISSUE_TITLE: ${{ github.event.client_payload.issue_title }}
-          ISSUE_BODY: ${{ github.event.client_payload.issue_body }}
-          INSTRUCTION: ${{ github.event.client_payload.instruction }}
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@v2
+        with:
+          egress-policy: audit
+>>>>>>> Stashed changes:.github/workflows/linear-issue.yaml
+
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure Git User
         run: |
-          echo "Determining inputs for Aider..."
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
 
-          echo "ISSUE_TITLE<<EOF_AIDER_TITLE" >> "$GITHUB_OUTPUT"
-          echo "$ISSUE_TITLE" >> "$GITHUB_OUTPUT"
-          echo "EOF_AIDER_TITLE" >> "$GITHUB_OUTPUT"
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
 
-          echo "ISSUE_BODY<<EOF_AIDER_BODY" >> "$GITHUB_OUTPUT"
-          echo "$ISSUE_BODY" >> "$GITHUB_OUTPUT"
-          echo "EOF_AIDER_BODY" >> "$GITHUB_OUTPUT"
+      - name: Install Aider and Dependencies
+        run: |
+          python -m pip install aider-install; aider-install
+          pip install -U google-generativeai
+          sudo apt-get update && sudo apt-get install -y jq
 
-          echo "INSTRUCTION<<EOF_AIDER_INSTRUCTION" >> "$GITHUB_OUTPUT"
-          echo "$INSTRUCTION" >> "$GITHUB_OUTPUT"
-          echo "EOF_AIDER_INSTRUCTION" >> "$GITHUB_OUTPUT"
-          echo "Finished determining inputs."
+      - name: Create Prompt for Aider
+        id: create_prompt
+        shell: bash
+        run: |
+          PROMPT_FILE_PATH=".github/aider/issue-prompt.txt"
+          mkdir -p .github/aider
+
+          ISSUE_TITLE="${{ github.event.client_payload.issue_title }}"
+          INSTRUCTION="${{ github.event.client_payload.instruction }}"
+          ISSUE_BODY=$(printf '%q' "${{ github.event.client_payload.issue_body }}")
+
+          echo "Processing issue with title: $ISSUE_TITLE"
+
+          JSON_PAYLOAD=$(jq -n \
+            --arg title "$ISSUE_TITLE" \
+            --arg body "$ISSUE_BODY" \
+            '{"body":{"issue_title":$title,"issue_body":$body}}')
 
   run-aider:
     needs: check-and-prepare
diff --git a/.github/workflows/aider.yaml b/.github/workflows/aider.yaml
index e7609597e3..4454bde051 100644
--- a/.github/workflows/aider.yaml
+++ b/.github/workflows/aider.yaml
@@ -5,40 +5,12 @@ on:
     types: [created]
 
 jobs:
-  check-membership:
-    runs-on: ubicloud-standard-2
+  auto-fix:
+    runs-on: ubicloud-standard-8
     if: |
       github.event_name == 'issue_comment' &&
       contains(github.event.comment.body, '/aider') &&
       !contains(github.event.comment.user.login, '[bot]')
-    outputs:
-      is_member: ${{ steps.check-membership.outputs.is_member }}
-    steps:
-      - name: Check organization membership
-        id: check-membership
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GITHUB_REPOSITORY: ${{ github.repository }}
-          COMMENTER: ${{ github.event.comment.user.login }}
-          ORG_ACCESS_TOKEN: ${{ secrets.ORG_ACCESS_TOKEN }}
-        run: |
-          ORG="windmill-labs"
-          STATUS=$(curl -s -o /dev/null -w "%{http_code}" \
-            -H "Authorization: token $ORG_ACCESS_TOKEN" \
-            -H "Accept: application/vnd.github+json" \
-            -H "X-GitHub-Api-Version: 2022-11-28" \
-            "https://api.github.com/orgs/$ORG/members/$COMMENTER")
-
-          if [ "$STATUS" -eq 204 ]; then
-            echo "is_member=true" >> $GITHUB_OUTPUT
-          else
-            echo "is_member=false" >> $GITHUB_OUTPUT
-          fi
-
-  check-and-prepare:
-    needs: check-membership
-    runs-on: ubicloud-standard-2
-    if: needs.check-membership.outputs.is_member == 'true'
     permissions:
       contents: write
       pull-requests: write
@@ -49,23 +21,53 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       WINDMILL_TOKEN: ${{ secrets.WINDMILL_TOKEN }}
-    outputs:
-      issue_title: ${{ steps.determine_inputs.outputs.ISSUE_TITLE }}
-      issue_body: ${{ steps.determine_inputs.outputs.ISSUE_BODY }}
-      comment_content: ${{ steps.determine_inputs.outputs.COMMENT_CONTENT }}
-      pr_branch: ${{ steps.checkout_pr.outputs.PR_BRANCH }}
 
     steps:
-      - name: Acknowledge Request
+      - name: Harden Runner
+        uses: step-security/harden-runner@v2
+        with:
+          egress-policy: audit
+
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure Git User
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Checkout PR Branch
+        if: github.event_name == 'issue_comment' && github.event.issue.pull_request
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GITHUB_REPOSITORY: ${{ github.repository }}
         run: |
-          echo "Commenting on issue/PR #${{ github.event.issue.number }} to acknowledge the /aider command."
-          gh issue comment ${{ github.event.issue.number }} --body "🤖 Aider is starting to work on your request. I'll update you here once I have a PR ready. Please be patient, this might take a few minutes." --repo $GITHUB_REPOSITORY
+          echo "Issue comment trigger: Checking out PR branch..."
+          PR_NUMBER=${{ github.event.issue.number }}
+          PR_HEAD_REF=$(gh pr view $PR_NUMBER --json headRefName -q .headRefName --repo $GITHUB_REPOSITORY)
+          if [[ -z "$PR_HEAD_REF" || "$PR_HEAD_REF" == "null" ]]; then
+             echo "::error::Could not determine PR head branch for PR #$PR_NUMBER via gh CLI."
+             exit 1
+          fi
+          echo "Checking out PR head branch: $PR_HEAD_REF for PR #$PR_NUMBER"
+          git fetch origin "refs/heads/${PR_HEAD_REF}:refs/remotes/origin/${PR_HEAD_REF}" --no-tags
+          git checkout "$PR_HEAD_REF"
+          echo "Successfully checked out branch $(git rev-parse --abbrev-ref HEAD)"
 
-      - name: Determine inputs for Aider
-        id: determine_inputs
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Install Aider and Dependencies
+        run: |
+          python -m pip install aider-install; aider-install
+          pip install -U google-generativeai
+          sudo apt-get update && sudo apt-get install -y jq
+
+      - name: Determine Prompt for Aider
+        id: determine_prompt
         shell: bash
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -74,21 +76,16 @@ jobs:
           GITHUB_REPOSITORY: ${{ github.repository }}
           LINEAR_API_KEY: ${{ secrets.LINEAR_API_KEY }}
         run: |
-          echo "Determining inputs for Aider..."
-          ISSUE_TITLE_VAL=""
-          ISSUE_BODY_VAL=""
+          PROMPT_FILE_PATH=".github/aider/issue-prompt.txt"
+          mkdir -p .github/aider
 
+          # Determine if this is a PR comment or regular issue comment
           if [[ ! -z "${{ github.event.issue.pull_request }}" ]]; then
             echo "This is a comment on a Pull Request"
-            PR_NUMBER="$ISSUE_NUMBER"
+            PR_NUMBER="${{ github.event.issue.number }}"
             
-            PR_BODY_JSON=$(gh pr view "$PR_NUMBER" --json body --repo "$GITHUB_REPOSITORY")
-            if [[ $? -ne 0 ]]; then
-              echo "Error fetching PR body for PR #$PR_NUMBER"
-              PR_BODY_VAL=""
-            else
-              PR_BODY_VAL=$(jq -r '.body // ""' <<< "$PR_BODY_JSON")
-            fi
+            # Get PR description to check for issue references
+            PR_BODY=$(gh pr view $PR_NUMBER --json body -q .body --repo $GITHUB_REPOSITORY)
             
             if [[ ! -z "$PR_BODY_VAL" ]]; then
               REFERENCED_ISSUE=""
@@ -119,29 +116,214 @@ jobs:
                   ISSUE_TITLE_VAL=$(jq -r '.title // ""' <<< "$ISSUE_DETAILS_JSON")
                   ISSUE_BODY_VAL=$(jq -r '.body // ""' <<< "$ISSUE_DETAILS_JSON")
                 fi
+                printf "%s\nISSUE:\n%s\nINSTRUCTION:\n%s" \
+                  "$BASE_PROMPT" "$PROCESSED_ISSUE_PROMPT" "$COMMENT_CONTENT" > "$PROMPT_FILE_PATH"
+              else
+                echo "::warning::API call failed (HTTP $HTTP_CODE). Using PR comment with issue context."
+                printf "%s\nISSUE:\n%s\nINSTRUCTION:\n%s" \
+                  "$BASE_PROMPT" "$ISSUE_BODY_Q" "$COMMENT_CONTENT" > "$PROMPT_FILE_PATH"
               fi
+              rm -f /tmp/api_response.txt
             else
-              echo "PR body is empty or could not be fetched."
+              echo "No referenced issue found in PR description, using comment content only"
+              # Use comment content directly as with regular issue comments
+              echo '${{ github.event.comment.body }}' > /tmp/raw_comment.txt
+              RAW_COMMENT_BODY=$(cat /tmp/raw_comment.txt)
+              COMMENT_CONTENT=$(echo "$RAW_COMMENT_BODY" | sed 's|^/aider||' | sed -e 's/^[[:space:]]*//' -e 's/[[:space:]]*$//')
+              
+              if [[ -z "$COMMENT_CONTENT" ]]; then
+                echo "::error::Comment with /aider provided, but no instruction found after it. Cannot proceed."
+                printf "Error: /aider command found but no instruction followed." > "$PROMPT_FILE_PATH"
+                exit 1
+              else
+                echo "Using comment content as prompt."
+                printf '%s' "$COMMENT_CONTENT" > "$PROMPT_FILE_PATH"
+              fi
             fi
           else
             echo "This is a comment on a regular issue"
             
-            ISSUE_DETAILS_JSON=$(gh issue view "$ISSUE_NUMBER" --json title,body --repo "$GITHUB_REPOSITORY")
-            if [[ $? -ne 0 ]]; then
-              echo "Error fetching issue details for #$ISSUE_NUMBER"
+            # Fetch the issue details
+            ISSUE_NUMBER="${{ github.event.issue.number }}"
+            ISSUE_DETAILS=$(gh issue view $ISSUE_NUMBER --json title,body --repo $GITHUB_REPOSITORY)
+            ISSUE_TITLE=$(echo "$ISSUE_DETAILS" | jq -r .title)
+            ISSUE_BODY=$(echo "$ISSUE_DETAILS" | jq -r .body)
+            
+            # Store raw comment body in a file first to avoid shell interpretation issues
+            echo '${{ github.event.comment.body }}' > /tmp/raw_comment.txt
+            # Extract the command part safely
+            RAW_COMMENT_BODY=$(cat /tmp/raw_comment.txt)
+            # Remove the /aider prefix and trim whitespace
+            COMMENT_CONTENT=$(echo "$RAW_COMMENT_BODY" | sed 's|^/aider||' | sed -e 's/^[[:space:]]*//' -e 's/[[:space:]]*$//')
+
+            if [[ -z "$COMMENT_CONTENT" ]]; then
+              echo "::error::Comment with /aider provided, but no instruction found after it. Cannot proceed."
+              printf "Error: /aider command found but no instruction followed." > "$PROMPT_FILE_PATH"
+              exit 1
             else
-              ISSUE_TITLE_VAL=$(jq -r '.title // ""' <<< "$ISSUE_DETAILS_JSON")
-              ISSUE_BODY_VAL=$(jq -r '.body // ""' <<< "$ISSUE_DETAILS_JSON") 
+              echo "Sending issue content and issue comment to external API…"
+              
+              ISSUE_TITLE_Q=$(printf '%q' "$ISSUE_TITLE")
+              ISSUE_BODY_Q=$(printf '%q' "$ISSUE_BODY")
+              COMMENT_CONTENT_Q=$(printf '%q' "$COMMENT_CONTENT")
+              
+              JSON_PAYLOAD=$(jq -n \
+                --arg title "$ISSUE_TITLE_Q" \
+                --arg body "$ISSUE_BODY_Q" \
+                --arg comment "$COMMENT_CONTENT_Q" \
+                '{"body":{"issue_title":$title,"issue_body":$body,"issue_comment":$comment}}')
+              
+              API_RESULT=$(curl -s -w "\n%{http_code}" \
+                -X POST "https://app.windmill.dev/api/w/windmill-labs/jobs/run_wait_result/p/f/ai/quiet_script" \
+                -H "Content-Type: application/json" \
+                -H "Authorization: Bearer $WINDMILL_TOKEN" \
+                --data-binary "$JSON_PAYLOAD" \
+                --max-time 90)
+              
+              HTTP_CODE=$(echo "$API_RESULT" | tail -n1)
+              BODY=$(echo "$API_RESULT" | sed '$d')
+              
+              echo "$BODY" > /tmp/api_response.txt
+              
+              BASE_PROMPT="Try to fix the following issue based on the instruction given by the user. The issue is prepended with the word ISSUE. The instruction is prepended with the word INSTRUCTION. The issue and instruction are separated by a blank line."
+              if [[ "$HTTP_CODE" -eq 200 ]]; then
+                PROCESSED_ISSUE_PROMPT=$(jq -r '.effective_body // empty' /tmp/api_response.txt)
+                if [[ -z "$PROCESSED_ISSUE_PROMPT" || "$PROCESSED_ISSUE_PROMPT" == "null" ]]; then
+                  PROCESSED_ISSUE_PROMPT=""
+                fi
+                printf "%s\nISSUE:\n%s\nINSTRUCTION:\n%s" \
+                  "$BASE_PROMPT" "$PROCESSED_ISSUE_PROMPT" "$COMMENT_CONTENT" > "$PROMPT_FILE_PATH"
+              else
+                echo "::warning::API call failed (HTTP $HTTP_CODE). Using PR comment with issue context."
+                printf "%s\nISSUE:\n%s\nINSTRUCTION:\n%s" \
+                  "$BASE_PROMPT" "$ISSUE_BODY_Q" "$COMMENT_CONTENT" > "$PROMPT_FILE_PATH"
+              fi
+
+              rm -f /tmp/api_response.txt
+            fi
+          fi
+          echo "Prompt determined and written to $PROMPT_FILE_PATH"
+          echo "PROMPT_FILE_PATH=$PROMPT_FILE_PATH" >> $GITHUB_OUTPUT
+
+      - name: Probe Chat for Relevant Files
+        id: probe_files
+        env:
+          PROMPT_CONTENT_FILE: ${{ steps.determine_prompt.outputs.PROMPT_FILE_PATH }}
+        run: |
+          echo "Running probe-chat to find relevant files..."
+          if [[ ! -f "$PROMPT_CONTENT_FILE" ]]; then
+            echo "::error::Prompt file $PROMPT_CONTENT_FILE not found!"
+            exit 1
+          fi
+          PROMPT_CONTENT=$(cat "$PROMPT_CONTENT_FILE")
+          if [ -z "$PROMPT_CONTENT" ]; then
+             echo "::error::Prompt content is empty!"
+             exit 1
+          fi
+
+          PROMPT_ESCAPED=$(jq -Rs . <<< "$PROMPT_CONTENT")
+
+          MESSAGE_FOR_PROBE=$(jq -n --arg prompt_escaped "$PROMPT_ESCAPED" \
+            '{ "message": "I'\''m giving you a request that needs to be implemented. Your role is ONLY to give me the files that are relevant to the request and nothing else. The request is prepended with the word REQUEST.\\nREQUEST: \($prompt_escaped). Give me all the files relevant to this request. Your output MUST be a single json array that can be parsed with programatic json parsing, with the relevant files. Files can be rust or typescript or javascript files. DO NOT INCLUDE ANY OTHER TEXT IN YOUR OUTPUT. ONLY THE JSON ARRAY. Example of output: [\"file1.py\", \"file2.py\"]" }' | jq -r .message)
+
+          set -o pipefail
+          PROBE_OUTPUT=$(npx --yes @buger/probe-chat@latest --max-iterations 50 --model-name gemini-2.5-pro-preview-05-06 --message "$MESSAGE_FOR_PROBE") || {
+            echo "::error::probe-chat command failed. Output:"
+            echo "$PROBE_OUTPUT"
+            exit 1
+          }
+          set +o pipefail
+          echo "Probe-chat raw output:"
+          echo "$PROBE_OUTPUT"
+
+          JSON_FILES=$(echo "$PROBE_OUTPUT" | sed -n '/^\s*\[/,$p' | sed '/^\s*\]/q')
+          echo "Extracted JSON block:"
+          echo "$JSON_FILES"
+
+          FILES_LIST=$(echo "$JSON_FILES" | jq -e -r '[.[] | select(type == "string" and . != "" and . != null and (endswith("/") | not))] | map(@sh) | join(" ")' || echo "")
+
+          if [[ -z "$FILES_LIST" ]]; then
+             echo "::warning::probe-chat did not identify any relevant files."
+             exit 1
+          fi
+
+          echo "Formatted files list for aider: $FILES_LIST"
+          echo "FILES_TO_EDIT=$FILES_LIST" >> $GITHUB_ENV
+
+      - name: Run Aider with external prompt
+        run: |
+          echo "Files identified by probe-chat: ${{ env.FILES_TO_EDIT }}"
+          aider \
+            --read CLAUDE.md \
+            --read backend/CLAUDE.md \
+            --read frontend/CLAUDE.md \
+            ${{ env.FILES_TO_EDIT }} \
+            --model gemini/gemini-2.5-pro-preview-05-06 \
+            --message-file .github/aider/issue-prompt.txt \
+            --yes \
+            --no-check-update \
+            --auto-commits \
+            --no-analytics \
+            --no-gitignore \
+            | tee .github/aider/aider-output.txt || true
+          echo "Aider command completed. Output saved to .github/aider/aider-output.txt"
+
+      - name: Clean up prompt file
+        if: always()
+        run: rm -f .github/aider/issue-prompt.txt
+
+      - name: Commit and Push Changes
+        id: commit_and_push
+        if: ${{ success() }}
+        run: |
+          if [[ -z "${{ github.event.issue.pull_request }}" ]]; then
+            BRANCH_NAME="aider-fix-issue-${{ github.event.issue.number }}"
+            
+            # Check if branch exists remotely
+            if git ls-remote --heads origin $BRANCH_NAME | grep -q $BRANCH_NAME; then
+              echo "Branch $BRANCH_NAME already exists remotely, fetching it"
+              git fetch origin $BRANCH_NAME
+              git checkout $BRANCH_NAME
+              git pull origin $BRANCH_NAME
+            else
+              echo "Creating new branch $BRANCH_NAME"
+              git checkout -b $BRANCH_NAME
+            fi
+            
+            echo "Created/checked out branch $BRANCH_NAME for issue #${{ github.event.issue.number }}"
+            git push origin $BRANCH_NAME
+            echo "Pushed to branch $BRANCH_NAME"
+            echo "PR_BRANCH_NAME=$BRANCH_NAME" >> $GITHUB_OUTPUT
+            echo "CHANGES_APPLIED_MESSAGE=Aider changes pushed to branch $BRANCH_NAME." >> $GITHUB_OUTPUT
+          else
+            CURRENT_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
+            echo "Attempting to push changes to PR branch $CURRENT_BRANCH_NAME for PR #${{ github.event.issue.number }}"
+            if git push origin $CURRENT_BRANCH_NAME; then
+              echo "Push to $CURRENT_BRANCH_NAME successful (or no new changes to push)."
+              echo "CHANGES_APPLIED_MESSAGE=Aider changes (if any) pushed to PR branch $CURRENT_BRANCH_NAME." >> $GITHUB_OUTPUT
+              echo "PR_BRANCH_NAME=$CURRENT_BRANCH_NAME" >> $GITHUB_OUTPUT
+            else
+              echo "::warning::Push to PR branch $CURRENT_BRANCH_NAME failed."
+              echo "CHANGES_APPLIED_MESSAGE=Aider ran, but failed to push changes to PR branch $CURRENT_BRANCH_NAME." >> $GITHUB_OUTPUT
             fi
           fi
 
-          echo "ISSUE_TITLE<<EOF_AIDER_TITLE" >> "$GITHUB_OUTPUT"
-          echo "$ISSUE_TITLE_VAL" >> "$GITHUB_OUTPUT"
-          echo "EOF_AIDER_TITLE" >> "$GITHUB_OUTPUT"
+      - name: Create Pull Request
+        if: success() && github.event_name == 'issue_comment' && !github.event.issue.pull_request && steps.commit_and_push.outputs.PR_BRANCH_NAME != ''
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_BRANCH: ${{ steps.commit_and_push.outputs.PR_BRANCH_NAME }}
+          ISSUE_NUM: ${{ github.event.issue.number }}
+        run: |
+          # Create PR description in a temporary file to avoid command line length limits
+          cat > /tmp/pr-description.md << EOL
+          This PR was created automatically by Aider to fix issue #${ISSUE_NUM}.
 
-          echo "ISSUE_BODY<<EOF_AIDER_BODY" >> "$GITHUB_OUTPUT"
-          echo "$ISSUE_BODY_VAL" >> "$GITHUB_OUTPUT"
-          echo "EOF_AIDER_BODY" >> "$GITHUB_OUTPUT"
+          ## Aider Output
+          \`\`\`
+          $(cat .github/aider/aider-output.txt || echo "No output available")
+          \`\`\`
+          EOL
 
           CLEAN_COMMENT="${COMMENT_BODY/\/aider/}"
           CLEAN_COMMENT="${CLEAN_COMMENT#"${CLEAN_COMMENT%%[![:space:]]*}"}"
diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
index 66eff9dc57..0348e09547 100644
--- a/.github/workflows/claude.yml
+++ b/.github/workflows/claude.yml
@@ -49,9 +49,11 @@ jobs:
           fi
 
   claude-code-action:
-    needs: check-membership
     if: |
-      needs.check-membership.outputs.is_member == 'true'
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '/aider')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '/aider')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '/aider')) ||
+      (github.event_name == 'issues' && contains(github.event.issue.body, '/aider'))
     runs-on: ubicloud-standard-8
     permissions:
       contents: read
diff --git a/.github/workflows/create-docs.yml b/.github/workflows/create-docs.yml
index 209883d24c..6c280ae5f9 100644
--- a/.github/workflows/create-docs.yml
+++ b/.github/workflows/create-docs.yml
@@ -3,34 +3,8 @@ on:
     types: [created]
 
 jobs:
-  check-membership:
-    if: ${{ github.event.issue.pull_request && startsWith(github.event.comment.body, '/docs') && github.event.comment.user.type != 'Bot' }}
-    runs-on: ubicloud-standard-2
-    outputs:
-      is_member: ${{ steps.check-membership.outputs.is_member }}
-    steps:
-      - name: Check organization membership
-        id: check-membership
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          COMMENTER: ${{ github.event.comment.user.login }}
-        run: |
-          ORG="windmill-labs"
-          STATUS=$(curl -s -o /dev/null -w "%{http_code}" \
-            -H "Authorization: token $GH_TOKEN" \
-            -H "Accept: application/vnd.github+json" \
-            -H "X-GitHub-Api-Version: 2022-11-28" \
-            "https://api.github.com/orgs/$ORG/members/$COMMENTER")
-
-          if [ "$STATUS" -eq 204 ]; then
-            echo "is_member=true" >> $GITHUB_OUTPUT
-          else
-            echo "is_member=false" >> $GITHUB_OUTPUT
-          fi
-
   trigger-docs:
-    needs: check-membership
-    if: ${{ github.event.issue.pull_request && startsWith(github.event.comment.body, '/docs') && needs.check-membership.outputs.is_member == 'true' }}
+    if: ${{ github.event.issue.pull_request && startsWith(github.event.comment.body, '/docs') }}
     uses: windmill-labs/windmilldocs/.github/workflows/create-docs.yml@main
     with:
       pr_number: ${{ github.event.issue.number }}
diff --git a/backend/.vscode/settings.json b/backend/.vscode/settings.json
index 6ebd36cf07..817f8da4f9 100644
--- a/backend/.vscode/settings.json
+++ b/backend/.vscode/settings.json
@@ -11,5 +11,6 @@
   "remote.autoForwardPorts": true,
   "conventionalCommits.scopes": [
     "restructring triggers, decoding trigger message on work"
-  ]
+  ],
+  "rust-analyzer.cargo.features": ["license", "enterprise", "agent_worker_server"]
 }
diff --git a/backend/ee-repo-ref.txt b/backend/ee-repo-ref.txt
index 9b39544645..baf3c8cf48 100644
--- a/backend/ee-repo-ref.txt
+++ b/backend/ee-repo-ref.txt
@@ -1 +1,5 @@
-72e6260ca886628cf1ba271bc058e6ecfdecdae5
\ No newline at end of file
+<<<<<<< Updated upstream
+72e6260ca886628cf1ba271bc058e6ecfdecdae5
+=======
+0cf6424295774980cd04f10986b826fbe09542a0
+>>>>>>> Stashed changes
diff --git a/backend/src/main.rs b/backend/src/main.rs
index 8c451f63a0..2f5f9117eb 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -15,6 +15,7 @@ use monitor::{
     send_logs_to_object_store, WORKERS_NAMES,
 };
 use rand::Rng;
+use serde_json::{Map, Value};
 use sqlx::postgres::PgListener;
 use std::{
     collections::HashMap,
@@ -48,10 +49,13 @@ use windmill_common::{
         SAML_METADATA_SETTING, SCIM_TOKEN_SETTING, SMTP_SETTING, TEAMS_SETTING,
         TIMEOUT_WAIT_RESULT_SETTING,
     },
+    jwt::decode_without_verify,
     scripts::ScriptLang,
     stats_ee::schedule_stats,
     triggers::TriggerKind,
-    utils::{hostname, rd_string, Mode, GIT_VERSION, MODE_AND_ADDONS},
+    utils::{
+        rd_string, Mode, AGENT_JWT_PREFIX, AGENT_TOKEN, GIT_VERSION, HOSTNAME, MODE_AND_ADDONS,
+    },
     worker::{
         reload_custom_tags_setting, Connection, HUB_CACHE_DIR, TMP_DIR, TMP_LOGS_DIR, WORKER_GROUP,
     },
@@ -261,7 +265,7 @@ async fn windmill_main() -> anyhow::Result<()> {
         tracing::error!("Failed to install rustls crypto provider");
     }
 
-    let hostname = hostname();
+    let hostname = HOSTNAME.to_owned();
 
     let mode_and_addons = MODE_AND_ADDONS.clone();
     let mode = mode_and_addons.mode;
@@ -675,12 +679,27 @@ Windmill Community Edition {GIT_VERSION}
                 let base_internal_url = base_internal_rx.await?;
                 if worker_mode {
                     let mut workers = vec![];
+
+                    let suffix_to_append = match mode {
+                        Mode::Agent => {
+                            let decoded_token = decode_without_verify::<Map<String, Value>>(
+                                AGENT_TOKEN.trim_start_matches(AGENT_JWT_PREFIX),
+                            )?;
+                            let suffix_to_append = decoded_token["suffix"].as_str();
+                            suffix_to_append.map(|s| s.to_owned())
+                        }
+                        _ => None,
+                    };
+
                     for i in 0..num_workers {
-                        let suffix: String = if i == 0 && first_suffix.as_ref().is_some() {
+                        let mut suffix = if i == 0 && first_suffix.is_some() {
                             first_suffix.as_ref().unwrap().clone()
                         } else {
                             windmill_common::utils::worker_suffix(&hostname, &rd_string(5))
                         };
+                        if let Some(suffix_to_append) = suffix_to_append.as_ref() {
+                            suffix = format!("{}_{}", suffix, &suffix_to_append);
+                        }
                         let worker_conn = WorkerConn {
                             conn: if i == 0 || mode != Mode::Agent {
                                 conn.clone()
diff --git a/backend/src/monitor.rs b/backend/src/monitor.rs
index 5c4d166beb..ecce80e901 100644
--- a/backend/src/monitor.rs
+++ b/backend/src/monitor.rs
@@ -1986,7 +1986,7 @@ async fn handle_zombie_jobs(db: &Pool<Postgres>, base_internal_url: &str, worker
             None,
             error::Error::ExecutionErr(error_message),
             true,
-            same_worker_tx_never_used,
+            Some(&same_worker_tx_never_used),
             "",
             worker_name,
             send_result_never_used,
diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index fd3e81f209..fdcee4cf9d 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -4498,6 +4498,13 @@ paths:
           in: query
           schema:
             type: boolean
+        - name: languages
+          in: query
+          description: |
+            Filter to only include scripts written in the given languages.
+            Accepts multiple values as a comma-separated list.
+          schema:
+            type: string
       responses:
         "200":
           description: All scripts
@@ -11142,6 +11149,8 @@ paths:
                   type: array
                   items:
                     type: string
+                suffix:
+                  type: string
                 exp:
                   type: integer
               required:
diff --git a/backend/windmill-api/src/jobs.rs b/backend/windmill-api/src/jobs.rs
index 5c2041fd85..2e2121650f 100644
--- a/backend/windmill-api/src/jobs.rs
+++ b/backend/windmill-api/src/jobs.rs
@@ -3154,11 +3154,12 @@ async fn check_tag_available_for_workspace(
         let tags = get_scope_tags(authed);
 
         if let Some(tags) = tags {
-            if !tags.contains(&tag.as_str()) {
+            if !tags.contains(&tag.as_str()) && !authed.is_admin {
                 return Err(Error::BadRequest(format!(
-                    "Tag {tag} is not available in your scope"
+                    "Tag '{tag}' is not available in your scope. Only admins can use tags outside of the allowed set: {:?}",
+                    tags
                 )));
-            }
+            }            
         }
 
         let custom_tags_per_w = CUSTOM_TAGS_PER_WORKSPACE.read().await;
@@ -3172,11 +3173,14 @@ async fn check_tag_available_for_workspace(
                 .contains(&w_id.to_string())
         {
             Ok(())
-        } else {
+        } else if !authed.is_admin {
             return Err(error::Error::BadRequest(format!(
-                "Tag {tag} cannot be used on workspace {w_id}: (CUSTOM_TAGS: {:?})",
-                custom_tags_per_w
+                "Tag '{tag}' cannot be used on workspace '{w_id}' by non-admin users. \
+                Only admins are allowed to use tags that are not included in the allowed CUSTOM_TAGS: {:?}",
+                custom_tags_per_w.0
             )));
+        } else {
+            Ok(())
         }
     } else {
         Ok(())
diff --git a/backend/windmill-api/src/postgres_triggers/handler.rs b/backend/windmill-api/src/postgres_triggers/handler.rs
index 933582670c..cf13a967d1 100644
--- a/backend/windmill-api/src/postgres_triggers/handler.rs
+++ b/backend/windmill-api/src/postgres_triggers/handler.rs
@@ -25,7 +25,7 @@ use windmill_common::error::Error;
 use windmill_common::{
     db::UserDB,
     error::{self, JsonResult, Result},
-    utils::{not_found_if_none, paginate, Pagination, StripPath, empty_as_none},
+    utils::{not_found_if_none, paginate, Pagination, StripPath},
     worker::CLOUD_HOSTED,
 };
 use windmill_git_sync::{handle_deployment_metadata, DeployedObject};
@@ -46,8 +46,7 @@ pub struct Postgres {
     pub dbname: String,
     #[serde(default)]
     pub sslmode: String,
-    #[serde(default, deserialize_with = "empty_as_none")]
-    pub root_certificate_pem: Option<String>,
+    pub root_certificate_pem: String,
 }
 
 #[derive(Debug, Clone, FromRow, Serialize, Deserialize)]
diff --git a/backend/windmill-api/src/postgres_triggers/mod.rs b/backend/windmill-api/src/postgres_triggers/mod.rs
index d557ca67cc..0be19d6c4c 100644
--- a/backend/windmill-api/src/postgres_triggers/mod.rs
+++ b/backend/windmill-api/src/postgres_triggers/mod.rs
@@ -84,8 +84,8 @@ pub async fn get_raw_postgres_connection(
             }
         };
 
-        let options = if let Some(root_certificate_pem) = &db.root_certificate_pem {
-            options.ssl_root_cert_from_pem(root_certificate_pem.as_bytes().to_vec())
+        let options = if !db.root_certificate_pem.is_empty() {
+            options.ssl_root_cert_from_pem(db.root_certificate_pem.as_bytes().to_vec())
         } else {
             options
         };
@@ -96,6 +96,7 @@ pub async fn get_raw_postgres_connection(
             options
         }
     };
+
     Ok(PgConnection::connect_with(&options).await?)
 }
 
diff --git a/backend/windmill-api/src/postgres_triggers/trigger.rs b/backend/windmill-api/src/postgres_triggers/trigger.rs
index 71daffb4a9..aff7a30589 100644
--- a/backend/windmill-api/src/postgres_triggers/trigger.rs
+++ b/backend/windmill-api/src/postgres_triggers/trigger.rs
@@ -19,10 +19,10 @@ use crate::{
 use bytes::{BufMut, Bytes, BytesMut};
 use chrono::TimeZone;
 use futures::{pin_mut, SinkExt, StreamExt};
-use native_tls::{Certificate, TlsConnector};
+use native_tls::TlsConnector;
 use pg_escape::{quote_identifier, quote_literal};
 use rand::seq::SliceRandom;
-use rust_postgres::{config::SslMode, Client, Config, CopyBothDuplex, NoTls, SimpleQueryMessage};
+use rust_postgres::{config::SslMode, Client, Config, CopyBothDuplex, SimpleQueryMessage};
 use rust_postgres_native_tls::MakeTlsConnector;
 use serde::Deserialize;
 use serde_json::value::RawValue;
@@ -79,45 +79,6 @@ enum Error {
     Tls(#[from] native_tls::Error),
 }
 
-fn build_tls_connector(
-    ssl_mode: SslMode,
-    root_certificate_pem: Option<&String>,
-) -> Result<Option<MakeTlsConnector>, Error> {
-    let get_tls_builder_for_verify = |root_certificate: Option<&String>| {
-        let mut builder = TlsConnector::builder();
-        if let Some(root_certificate) = root_certificate {
-            let root_certificate_pem = Certificate::from_pem(root_certificate.as_bytes()).map_err(|e| {
-                Error::Common(error::Error::BadConfig(format!("Invalid Certs: {e:#}")))
-            })?;
-            builder.add_root_certificate(root_certificate_pem);
-        }
-        Ok::<_, Error>(builder)
-    };
-    let connector = match ssl_mode {
-        SslMode::Disable => return Ok(None),
-        SslMode::Require | SslMode::Prefer => {
-            let mut builder = TlsConnector::builder();
-            builder.danger_accept_invalid_certs(true);
-            builder.danger_accept_invalid_hostnames(true);
-            builder
-        }
-
-        SslMode::VerifyCa => {
-            let mut builder = get_tls_builder_for_verify(root_certificate_pem)?;
-            builder.danger_accept_invalid_hostnames(true);
-            builder
-        }
-
-        SslMode::VerifyFull => {
-            let builder = get_tls_builder_for_verify(root_certificate_pem)?;
-            builder
-        }
-        _ => unreachable!(),
-    };
-
-    Ok(Some(MakeTlsConnector::new(connector.build()?)))
-}
-
 pub struct PostgresSimpleClient(Client);
 
 impl PostgresSimpleClient {
@@ -151,27 +112,20 @@ impl PostgresSimpleClient {
             config.password(&database.password);
         }
 
-        let connector = build_tls_connector(ssl_mode, database.root_certificate_pem.as_ref())?;
+        if !database.root_certificate_pem.is_empty() {
+            config.ssl_root_cert(database.root_certificate_pem.as_bytes());
+        }
 
-        let client = if let Some(connector) = connector {
-            let (client, connection) = config.connect(connector).await?;
-            tokio::spawn(async move {
-                if let Err(e) = connection.await {
-                    tracing::debug!("{:#?}", e);
-                };
-                tracing::info!("Successfully Connected into database");
-            });
-            client
-        } else {
-            let (client, connection) = config.connect(NoTls).await?;
-            tokio::spawn(async move {
-                if let Err(e) = connection.await {
-                    tracing::debug!("{:#?}", e);
-                };
-                tracing::info!("Successfully Connected into database");
-            });
-            client
-        };
+        let connector = MakeTlsConnector::new(TlsConnector::new()?);
+
+        let (client, connection) = config.connect(connector).await?;
+
+        tokio::spawn(async move {
+            if let Err(e) = connection.await {
+                tracing::debug!("{:#?}", e);
+            };
+            tracing::info!("Successfully Connected into database");
+        });
 
         Ok(PostgresSimpleClient(client))
     }
diff --git a/backend/windmill-api/src/scripts.rs b/backend/windmill-api/src/scripts.rs
index 90da2187dc..25e890015a 100644
--- a/backend/windmill-api/src/scripts.rs
+++ b/backend/windmill-api/src/scripts.rs
@@ -206,7 +206,6 @@ async fn list_scripts(
     Query(lq): Query<ListScriptQuery>,
 ) -> JsonResult<Vec<ListableScript>> {
     let (per_page, offset) = paginate(pagination);
-
     let mut sqlb = SqlBuilder::select_from("script as o")
         .fields(&[
             "hash",
@@ -321,6 +320,16 @@ async fn list_scripts(
             .fields(&["dm.deployment_msg"]);
     }
 
+    if let Some(languages) = lq.languages {
+        sqlb.and_where_in(
+            "language",
+            &languages
+                .iter()
+                .map(|language| quote(language.as_str()))
+                .collect_vec(),
+        );
+    }
+
     let sql = sqlb.sql().map_err(|e| Error::internal_err(e.to_string()))?;
     let mut tx = user_db.begin(&authed).await?;
     let rows = sqlx::query_as::<_, ListableScript>(&sql)
diff --git a/backend/windmill-api/src/utils.rs b/backend/windmill-api/src/utils.rs
index 5eef389138..b59d5d4d7f 100644
--- a/backend/windmill-api/src/utils.rs
+++ b/backend/windmill-api/src/utils.rs
@@ -5,9 +5,6 @@
  * Please see the included NOTICE for copyright information and
  * LICENSE-AGPL for a copy of the license.
  */
-
-use std::fmt::Display;
-
 use axum::{body::Body, response::Response};
 use regex::Regex;
 use serde::{Deserialize, Deserializer};
@@ -38,16 +35,6 @@ pub enum RunnableKind {
     Flow,
 }
 
-impl Display for RunnableKind {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        let runnable_kind = match self {
-            RunnableKind::Script => "script",
-            RunnableKind::Flow => "flow"
-        };
-        write!(f, "{}", runnable_kind)
-    }
-}
-
 pub async fn require_super_admin(db: &DB, email: &str) -> error::Result<()> {
     let is_admin = is_super_admin_email(db, email).await?;
 
diff --git a/backend/windmill-common/src/agent_workers.rs b/backend/windmill-common/src/agent_workers.rs
index 7c91ec2165..0d7a0810ed 100644
--- a/backend/windmill-common/src/agent_workers.rs
+++ b/backend/windmill-common/src/agent_workers.rs
@@ -11,12 +11,11 @@ use std::time::Duration;
 use reqwest_middleware::ClientBuilder;
 use reqwest_retry::{policies::ExponentialBackoff, RetryTransientMiddleware};
 
-use crate::{jwt::decode_without_verify, worker::HttpClient};
+use crate::{jwt::decode_without_verify, utils::{AGENT_JWT_PREFIX, AGENT_TOKEN}, worker::HttpClient};
 
 lazy_static! {
     pub static ref BASE_INTERNAL_URL: String =
         std::env::var("BASE_INTERNAL_URL").unwrap_or("http://localhost:8080".to_string());
-    pub static ref AGENT_TOKEN: String = std::env::var("AGENT_TOKEN").unwrap_or_default();
     pub static ref DECODED_AGENT_TOKEN: Option<AgentAuth> = {
         if AGENT_TOKEN.is_empty() {
             None
@@ -35,7 +34,6 @@ pub struct AgentAuth {
     pub exp: Option<usize>,
 }
 
-pub const AGENT_JWT_PREFIX: &str = "jwt_agent_";
 pub fn build_agent_http_client(worker_suffix: &str) -> HttpClient {
     let client = ClientBuilder::new(
         reqwest::Client::builder()
diff --git a/backend/windmill-common/src/jwt.rs b/backend/windmill-common/src/jwt.rs
index 8ebdb8dacb..624c6ab847 100644
--- a/backend/windmill-common/src/jwt.rs
+++ b/backend/windmill-common/src/jwt.rs
@@ -20,7 +20,6 @@ pub async fn encode_with_internal_secret<T: Serialize>(claims: T) -> error::Resu
         &jsonwebtoken::EncodingKey::from_secret(jwt_secret.as_bytes()),
     )
     .map_err(to_anyhow)?;
-
     Ok(token)
 }
 
diff --git a/backend/windmill-common/src/scripts.rs b/backend/windmill-common/src/scripts.rs
index e0391767f8..8e75d4d83e 100644
--- a/backend/windmill-common/src/scripts.rs
+++ b/backend/windmill-common/src/scripts.rs
@@ -9,6 +9,7 @@
 use std::{
     fmt::{self, Display},
     hash::{Hash, Hasher},
+    str::FromStr,
 };
 
 use crate::{
@@ -21,6 +22,7 @@ use crate::worker::HUB_CACHE_DIR;
 use anyhow::Context;
 use backon::ConstantBuilder;
 use backon::{BackoffBuilder, Retryable};
+use itertools::Itertools;
 use serde::de::Error as _;
 use serde::{ser::SerializeSeq, Deserialize, Deserializer, Serialize};
 
@@ -84,6 +86,40 @@ impl ScriptLang {
     }
 }
 
+impl FromStr for ScriptLang {
+    type Err = Error;
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        let language = match s.to_lowercase().as_str() {
+            "bun" => ScriptLang::Bun,
+            "bunnative" => ScriptLang::Bunnative,
+            "nativets" => ScriptLang::Nativets,
+            "deno" => ScriptLang::Deno,
+            "python3" => ScriptLang::Python3,
+            "go" => ScriptLang::Go,
+            "bash" => ScriptLang::Bash,
+            "powershell" => ScriptLang::Powershell,
+            "postgresql" => ScriptLang::Postgresql,
+            "mysql" => ScriptLang::Mysql,
+            "bigquery" => ScriptLang::Bigquery,
+            "snowflake" => ScriptLang::Snowflake,
+            "mssql" => ScriptLang::Mssql,
+            "graphql" => ScriptLang::Graphql,
+            "oracledb" => ScriptLang::OracleDB,
+            "php" => ScriptLang::Php,
+            "rust" => ScriptLang::Rust,
+            "ansible" => ScriptLang::Ansible,
+            "csharp" => ScriptLang::CSharp,
+            "nu" => ScriptLang::Nu,
+            "java" => ScriptLang::Java,
+            language => {
+                return Err(anyhow::anyhow!("{} is currently not supported", language).into())
+            }
+        };
+
+        Ok(language)
+    }
+}
+
 #[derive(Eq, PartialEq, Debug, Hash, Clone, Copy, sqlx::Type)]
 #[sqlx(transparent)]
 pub struct ScriptHash(pub i64);
@@ -366,7 +402,7 @@ where
     deserializer.deserialize_any(StringOrArrayVisitor)
 }
 
-#[derive(Deserialize)]
+#[derive(Debug, Deserialize)]
 pub struct ListScriptQuery {
     pub path_start: Option<String>,
     pub path_exact: Option<String>,
@@ -383,6 +419,29 @@ pub struct ListScriptQuery {
     pub include_without_main: Option<bool>,
     pub include_draft_only: Option<bool>,
     pub with_deployment_msg: Option<bool>,
+    #[serde(default, deserialize_with = "from_seq")]
+    pub languages: Option<Vec<ScriptLang>>,
+}
+
+fn from_seq<'de, D>(deserializer: D) -> Result<Option<Vec<ScriptLang>>, D::Error>
+where
+    D: Deserializer<'de>,
+{
+    let s = <String>::deserialize(deserializer)?;
+
+    let languages: Vec<ScriptLang> = s
+        .split(",")
+        .map(ScriptLang::from_str)
+        .try_collect()
+        .map_err(|e| serde::de::Error::custom(e.to_string()))?;
+
+    let languages = if languages.is_empty() {
+        None
+    } else {
+        Some(languages)
+    };
+
+    Ok(languages)
 }
 
 pub fn to_i64(s: &str) -> crate::error::Result<i64> {
diff --git a/backend/windmill-common/src/utils.rs b/backend/windmill-common/src/utils.rs
index 3f1a1bd385..89c30c5363 100644
--- a/backend/windmill-common/src/utils.rs
+++ b/backend/windmill-common/src/utils.rs
@@ -14,11 +14,13 @@ use crate::error::{to_anyhow, Error, Result};
 use crate::global_settings::UNIQUE_ID_SETTING;
 use crate::DB;
 use anyhow::Context;
+use axum::http::{HeaderName, HeaderValue};
 use gethostname::gethostname;
 use git_version::git_version;
 
 use chrono::Utc;
 use croner::Cron;
+use hyper::HeaderMap;
 use rand::{distr::Alphanumeric, rng, Rng};
 use reqwest::Client;
 use semver::Version;
@@ -33,6 +35,10 @@ pub const DEFAULT_PER_PAGE: usize = 1000;
 pub const GIT_VERSION: &str =
     git_version!(args = ["--tag", "--always"], fallback = "unknown-version");
 
+pub const AGENT_JWT_PREFIX: &str = "jwt_agent_";
+pub const WORKER_NAME_PREFIX: &str = "wk";
+pub const AGENT_WORKER_NAME_PREFIX: &str = "ag";
+
 use crate::CRITICAL_ALERT_MUTE_UI_ENABLED;
 use std::panic::{self, AssertUnwindSafe, Location};
 use std::sync::atomic::Ordering;
@@ -53,6 +59,12 @@ lazy_static::lazy_static! {
         }
     ).unwrap_or(Version::new(0, 1, 0));
 
+    pub static ref HOSTNAME :String = std::env::var("FORCE_HOSTNAME").unwrap_or_else(|_| {
+        gethostname()
+            .to_str()
+            .map(|x| x.to_string())
+            .unwrap_or_else(|| rd_string(5))
+    });
 
     pub static ref MODE_AND_ADDONS: ModeAndAddons = {
         let mut search_addon = false;
@@ -120,6 +132,33 @@ lazy_static::lazy_static! {
     };
 }
 
+lazy_static::lazy_static! {
+    pub static ref AGENT_TOKEN: String = std::env::var("AGENT_TOKEN").unwrap_or_default();
+}
+
+#[derive(Clone, Debug, PartialEq)]
+#[non_exhaustive]
+pub enum AgentWorkerSuffix {
+    EnableLiveShell,
+}
+
+impl TryFrom<&str> for AgentWorkerSuffix {
+    type Error = Error;
+    fn try_from(value: &str) -> std::result::Result<Self, Self::Error> {
+        let suffix = match value {
+            "enable.live.shell" => AgentWorkerSuffix::EnableLiveShell,
+            suffix => {
+                return Err(Error::Anyhow {
+                    error: anyhow::anyhow!("Unknown suffix: {}", suffix),
+                    location: "utils.rs@149".to_string(),
+                })
+            }
+        };
+
+        Ok(suffix)
+    }
+}
+
 #[derive(Clone)]
 pub struct ModeAndAddons {
     pub indexer: bool,
@@ -167,15 +206,6 @@ pub async fn require_admin_or_devops(
     Ok(())
 }
 
-pub fn hostname() -> String {
-    std::env::var("FORCE_HOSTNAME").unwrap_or_else(|_| {
-        gethostname()
-            .to_str()
-            .map(|x| x.to_string())
-            .unwrap_or_else(|| rd_string(5))
-    })
-}
-
 fn instance_name(hostname: &str) -> String {
     hostname
         .replace(" ", "")
@@ -190,11 +220,22 @@ pub fn worker_suffix(hostname: &str, rd_string: &str) -> String {
     format!("{}-{}", instance_name(hostname), rd_string)
 }
 
+pub fn check_if_ag_worker_has_specific_suffix(
+    suffix_to_check: AgentWorkerSuffix,
+    suffix: &str,
+) -> bool {
+    suffix
+        .split('_')
+        .step_by(1)
+        .filter_map(|sub_suffix| TryInto::<AgentWorkerSuffix>::try_into(sub_suffix).ok())
+        .any(|parsed_suffix| parsed_suffix == suffix_to_check)
+}
+
 pub fn worker_name_with_suffix(is_agent: bool, worker_group: &str, suffix: &str) -> String {
     if is_agent {
-        format!("ag-{}-{}", worker_group, suffix)
+        format!("{}-{}-{}", AGENT_WORKER_NAME_PREFIX, worker_group, suffix)
     } else {
-        format!("wk-{}-{}", worker_group, suffix)
+        format!("{}-{}-{}", WORKER_NAME_PREFIX, worker_group, suffix)
     }
 }
 
@@ -747,3 +788,18 @@ impl<F: Future> Future for WarnAfterFuture<F> {
         }
     }
 }
+
+pub fn from_iter_to_header_map<'header_name, 'header_value, T>(headers: T) -> Result<HeaderMap>
+where
+    T: IntoIterator<Item = (&'header_name str, &'header_value str)>,
+{
+    let mut map = HeaderMap::new();
+
+    for (name_str, value_str) in headers {
+        let name = HeaderName::from_str(name_str).map_err(to_anyhow)?;
+        let value = HeaderValue::from_str(value_str).map_err(to_anyhow)?;
+        map.insert(name, value);
+    }
+
+    Ok(map)
+}
diff --git a/backend/windmill-common/src/worker.rs b/backend/windmill-common/src/worker.rs
index 2d1e295432..ec3698458c 100644
--- a/backend/windmill-common/src/worker.rs
+++ b/backend/windmill-common/src/worker.rs
@@ -1,4 +1,5 @@
 use anyhow::anyhow;
+use axum::http::HeaderMap;
 use bytes::Bytes;
 use const_format::concatcp;
 use itertools::Itertools;
@@ -34,7 +35,7 @@ use crate::{
 
 pub const DEFAULT_CLOUD_TIMEOUT: u64 = 900;
 pub const DEFAULT_SELFHOSTED_TIMEOUT: u64 = 604800; // 7 days
-
+pub const AGENT_WORKER_SHELL_TAG_HEADER_NAME: &'static str = "ag-wk-shell-tag";
 lazy_static::lazy_static! {
     pub static ref WORKER_GROUP: String = std::env::var("WORKER_GROUP").unwrap_or_else(|_| {
         #[cfg(not(feature = "enterprise"))]
@@ -158,12 +159,20 @@ impl HttpClient {
     pub async fn post<T: Serialize, R: DeserializeOwned>(
         &self,
         url: &str,
+        headers: Option<HeaderMap>,
         body: &T,
     ) -> anyhow::Result<R> {
-        let response = self
+        let response_builder = self
             .0
             .post(format!("{}{}", *BASE_INTERNAL_URL, url))
-            .json(body)
+            .json(body);
+
+        let response_builder = match headers {
+            Some(headers) => response_builder.headers(headers),
+            None => response_builder,
+        };
+
+        let response = response_builder
             .send()
             .await
             .map_err(|e| anyhow::anyhow!(e))?;
@@ -307,7 +316,7 @@ pub async fn store_suspended_pull_query(wc: &WorkerConfig) {
 }
 
 pub fn make_pull_query(tags: &[String]) -> String {
-    format_pull_query(format!(
+    let query = format_pull_query(format!(
         "SELECT id
         FROM v2_job_queue
         WHERE running = false AND tag IN ({}) AND scheduled_for <= now()
@@ -315,7 +324,8 @@ pub fn make_pull_query(tags: &[String]) -> String {
         FOR UPDATE SKIP LOCKED
         LIMIT 1",
         tags.iter().map(|x| format!("'{x}'")).join(", ")
-    ))
+    ));
+    query
 }
 
 pub async fn store_pull_query(wc: &WorkerConfig) {
diff --git a/backend/windmill-queue/src/jobs.rs b/backend/windmill-queue/src/jobs.rs
index de64071c42..e3f0c713c1 100644
--- a/backend/windmill-queue/src/jobs.rs
+++ b/backend/windmill-queue/src/jobs.rs
@@ -391,6 +391,7 @@ pub async fn append_logs(
             if let Err(e) = client
             .post::<_, String>(
                 &format!("/api/w/{}/agent_workers/push_logs/{}", workspace.as_ref(), job_id),
+                None,
                 &logs.as_ref(),
             )
             .await {
@@ -980,7 +981,6 @@ pub async fn add_completed_job<T: Serialize + Send + Sync + ValidableJson>(
             is_flow_step = queued_job.is_flow_step(),
             language = ?queued_job.script_lang,
             scheduled_for = ?queued_job.scheduled_for,
-            workspace_id = ?queued_job.workspace_id,
             success,
             "inserted completed job: {} (success: {success})",
             queued_job.id
@@ -2123,11 +2123,15 @@ pub struct PulledJob {
     pub permissioned_as_folders: Option<Vec<serde_json::Value>>,
 }
 
+<<<<<<< Updated upstream
 
 // NOTE:
 // Precomputed by the server
 // Used to offload work from agent workers to server
 #[derive(Serialize, Deserialize)]
+=======
+#[derive(Debug, Serialize, Deserialize)]
+>>>>>>> Stashed changes
 pub enum PrecomputedAgentInfo {
     Bun { local: String, remote: String },
     Python {
@@ -2138,7 +2142,7 @@ pub enum PrecomputedAgentInfo {
         requirements: Option<String> },
 }
 
-#[derive(Serialize, Deserialize)]
+#[derive(Debug, Serialize, Deserialize)]
 pub struct JobAndPerms {
     pub job: MiniPulledJob,
     pub raw_code: Option<String>,
@@ -2290,16 +2294,20 @@ pub async fn pull(
     db: &Pool<Postgres>,
     suspend_first: bool,
     worker_name: &str,
-    query_o: Option<(String, String)>,
+    query_o: Option<&(String, String)>,
     #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
 ) -> windmill_common::error::Result<PulledJobResult> {
     loop {
-        if let Some((query_suspended, query_no_suspend)) = query_o.as_ref() {
+        if let Some((query_suspended, query_no_suspend)) = query_o {
             let njob = {
-                let job = sqlx::query_as::<_, PulledJob>(query_suspended)
+                let job = if query_suspended.is_empty() {
+                    None
+                } else {
+                    sqlx::query_as::<_, PulledJob>(query_suspended)
                     .bind(worker_name)
                     .fetch_optional(db)
-                    .await?;
+                    .await?
+                };
                 if let Some(job) = job {
                     PulledJobResult { job: Some(job), suspended: true }
                 } else {
@@ -2549,7 +2557,6 @@ async fn pull_single_job_and_mark_as_running_no_concurrency_limit<'c>(
             tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
             return Ok((None, false));
         }
-
         let r = if suspend_first {
             // tracing::info!("Pulling job with query: {}", query);
             sqlx::query_as::<_, PulledJob>(&query)
diff --git a/backend/windmill-worker/src/agent_workers.rs b/backend/windmill-worker/src/agent_workers.rs
index 192ae7ae37..f19963575f 100644
--- a/backend/windmill-worker/src/agent_workers.rs
+++ b/backend/windmill-worker/src/agent_workers.rs
@@ -1,3 +1,4 @@
+use reqwest::header::HeaderMap;
 use uuid::Uuid;
 use windmill_common::{agent_workers::QueueInitJob, worker::HttpClient};
 use windmill_queue::{JobAndPerms, JobCompleted};
@@ -6,14 +7,20 @@ pub async fn queue_init_job(client: &HttpClient, content: &str) -> anyhow::Resul
     client
         .post(
             "/api/agent_workers/queue_init_job",
+            None,
             &QueueInitJob { content: content.to_string() },
         )
         .await
         .and_then(|x: String| Uuid::parse_str(&x).map_err(|e| anyhow::anyhow!(e)))
 }
 
-pub async fn pull_job(client: &HttpClient) -> anyhow::Result<Option<JobAndPerms>> {
-    client.post("/api/agent_workers/pull_job", &()).await
+pub async fn pull_job(
+    client: &HttpClient,
+    headers: Option<HeaderMap>,
+) -> anyhow::Result<Option<JobAndPerms>> {
+    client
+        .post("/api/agent_workers/pull_job", headers, &())
+        .await
 }
 
 pub async fn send_result(client: &HttpClient, jc: JobCompleted) -> anyhow::Result<String> {
@@ -23,6 +30,7 @@ pub async fn send_result(client: &HttpClient, jc: JobCompleted) -> anyhow::Resul
                 "/api/w/{}/agent_workers/send_result/{}",
                 jc.job.workspace_id, jc.job.id
             ),
+            None,
             &jc,
         )
         .await
diff --git a/backend/windmill-worker/src/common.rs b/backend/windmill-worker/src/common.rs
index bec5f4c7ef..47bae5ff97 100644
--- a/backend/windmill-worker/src/common.rs
+++ b/backend/windmill-worker/src/common.rs
@@ -494,6 +494,7 @@ pub async fn update_worker_ping_for_failed_init_script(
             if let Err(e) = client
                 .post::<_, ()>(
                     UPDATE_PING_URL,
+                    None,
                     &Ping {
                         last_job_executed: Some(last_job_id),
                         last_job_workspace_id: None,
diff --git a/backend/windmill-worker/src/handle_child.rs b/backend/windmill-worker/src/handle_child.rs
index 3eb9e95dc9..436c2fe9f4 100644
--- a/backend/windmill-worker/src/handle_child.rs
+++ b/backend/windmill-worker/src/handle_child.rs
@@ -227,6 +227,7 @@ pub async fn handle_child(
                         if let Err(err) = client
                             .post::<_, ()>(
                                 &format!("/api/agent_workers/set_job_cancelled/{}", job_id),
+                                None,
                                 &JobCancelled {
                                     canceled_by: "timeout".to_string(),
                                     reason: format!("duration > {}", timeout_duration.as_secs()),
diff --git a/backend/windmill-worker/src/result_processor.rs b/backend/windmill-worker/src/result_processor.rs
index 2ca1539b85..14a9bc565b 100644
--- a/backend/windmill-worker/src/result_processor.rs
+++ b/backend/windmill-worker/src/result_processor.rs
@@ -9,6 +9,7 @@ use std::{
         atomic::{AtomicBool, AtomicU16, Ordering},
         Arc,
     },
+    time::Duration,
 };
 use tracing::{field, Instrument};
 #[cfg(not(feature = "otel"))]
@@ -20,8 +21,10 @@ use windmill_common::{
     add_time,
     error::{self, Error},
     jobs::JobKind,
-    utils::WarnAfterExt,
-    worker::{to_raw_value, Connection, WORKER_GROUP},
+    utils::{from_iter_to_header_map, WarnAfterExt},
+    worker::{
+        make_pull_query, to_raw_value, Connection, AGENT_WORKER_SHELL_TAG_HEADER_NAME, WORKER_GROUP,
+    },
     KillpillSender, DB,
 };
 
@@ -29,23 +32,24 @@ use windmill_common::{
 use windmill_common::bench::{BenchmarkInfo, BenchmarkIter};
 
 use windmill_queue::{
-    append_logs, get_queued_job,  CanceledBy, JobCompleted, MiniPulledJob,
+    append_logs, get_queued_job, pull, CanceledBy, JobAndPerms, JobCompleted, MiniPulledJob,
     WrappedError,
 };
 
-use serde_json::{json, value::RawValue};
+use serde_json::{json, value::RawValue, Value};
 
-use tokio::task::JoinHandle;
+use tokio::{fs::DirBuilder, task::JoinHandle, time::Instant};
 
 use windmill_queue::{add_completed_job, add_completed_job_error};
 
 use crate::{
     bash_executor::ANSI_ESCAPE_RE,
-    common::{error_to_value, read_result, save_in_cache},
+    common::{error_to_value, read_result, save_in_cache, OccupancyMetrics},
+    handle_queued_job,
     otel_ee::add_root_flow_job_to_otlp,
     worker_flow::update_flow_status_after_job_completion,
-    AuthedClient, JobCompletedReceiver, JobCompletedSender, SameWorkerSender, SendResult,
-    UpdateFlow, INIT_SCRIPT_TAG,
+    AuthedClient, JobCompletedReceiver, JobCompletedSender, NextJob, SameWorkerSender, SendResult,
+    UpdateFlow, INIT_SCRIPT_TAG, KEEP_JOB_DIR, SAME_WORKER_REQUIREMENTS, SLEEP_QUEUE,
 };
 
 async fn process_jc(
@@ -54,7 +58,7 @@ async fn process_jc(
     base_internal_url: &str,
     db: &DB,
     worker_dir: &str,
-    same_worker_tx: &SameWorkerSender,
+    same_worker_tx: Option<&SameWorkerSender>,
     job_completed_sender: &JobCompletedSender,
     #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
 ) {
@@ -105,7 +109,7 @@ async fn process_jc(
         &base_internal_url,
         &db,
         &worker_dir,
-        &same_worker_tx,
+        same_worker_tx,
         &worker_name,
         job_completed_sender.clone(),
         #[cfg(feature = "benchmark")]
@@ -119,6 +123,291 @@ async fn process_jc(
     }
 }
 
+enum JobCompletedRx {
+    JobCompleted(SendResult),
+    Killpill,
+}
+
+const NAP_TIME_DURATION: u64 = 15;
+
+const RESET: u64 = 2 * 60;
+
+pub fn start_interactive_worker_shell(
+    conn: Connection,
+    hostname: String,
+    worker_name: String,
+    mut killpill_rx: tokio::sync::broadcast::Receiver<()>,
+    base_internal_url: String,
+    worker_dir: String,
+) {
+    tokio::spawn(async move {
+        let mut occupancy_metrics = OccupancyMetrics::new(Instant::now());
+        let mut has_been_killed = false;
+
+        let (job_completed_tx, job_completed_rx) = JobCompletedSender::new(&conn, 10);
+        if let Some(db) = conn.as_sql() {
+            let db = db.clone();
+            let job_completed_tx = job_completed_tx.clone();
+            let worker_name = worker_name.clone();
+            let base_internal_url = base_internal_url.clone();
+            let worker_dir = worker_dir.clone();
+            tokio::spawn(async move {
+                let job_completed_rx = job_completed_rx.unwrap();
+                let JobCompletedReceiver { bounded_rx, mut killpill_rx, unbounded_rx } =
+                    job_completed_rx;
+                while let Some(sr) = {
+                    if has_been_killed {
+                        unbounded_rx
+                            .try_recv()
+                            .ok()
+                            .map(JobCompletedRx::JobCompleted)
+                            .or_else(|| {
+                                bounded_rx.try_recv().ok().map(JobCompletedRx::JobCompleted)
+                            })
+                    } else {
+                        tokio::select! {
+                            biased;
+                            result = unbounded_rx.recv_async() => {
+                                result.ok().map(JobCompletedRx::JobCompleted)
+                            }
+                            result = bounded_rx.recv_async() => {
+                                result.ok().map(JobCompletedRx::JobCompleted)
+                            }
+
+                            _ = killpill_rx.recv() => {
+                                Some(JobCompletedRx::Killpill)
+                            }
+                        }
+                    }
+                } {
+                    #[cfg(feature = "benchmark")]
+                    let mut bench = BenchmarkIter::new();
+
+                    match sr {
+                        JobCompletedRx::JobCompleted(SendResult::JobCompleted(jc)) => {
+                            process_jc(
+                                jc,
+                                &worker_name,
+                                &base_internal_url,
+                                &db,
+                                &worker_dir,
+                                None,
+                                &job_completed_tx,
+                                #[cfg(feature = "benchmark")]
+                                &mut bench,
+                            )
+                            .await;
+                        }
+                        JobCompletedRx::Killpill => {
+                            has_been_killed = true;
+                        }
+                        _ => {}
+                    }
+                }
+            });
+        }
+        let mut killpill_rx2 = killpill_rx.resubscribe();
+        let mut last_executed_job: Option<Instant> =
+            Instant::now().checked_sub(Duration::from_millis(2500));
+
+        #[cfg(feature = "benchmark")]
+        let mut bench = BenchmarkIter::new();
+
+        loop {
+            #[cfg(feature = "enterprise")]
+            {
+                if let Ok(_) = killpill_rx.try_recv() {
+                    tracing::info!(worker = %worker_name, hostname = %hostname, "killpill received on worker waiting for valid key");
+                    break;
+                }
+            }
+
+            if let Ok(_) = killpill_rx.try_recv() {
+                break;
+            } else {
+                let pulled_job = match &conn {
+                    Connection::Sql(db) => {
+                        let query = ("".to_string(), make_pull_query(&[hostname.to_owned()]));
+
+                        #[cfg(feature = "benchmark")]
+                        let mut bench = windmill_common::bench::BenchmarkIter::new();
+                        let job = pull(
+                            &db,
+                            false,
+                            &worker_name,
+                            Some(&query),
+                            #[cfg(feature = "benchmark")]
+                            &mut bench,
+                        )
+                        .await;
+
+                        job.map(|x| x.job.map(NextJob::Sql))
+                    }
+                    Connection::Http(client) => {
+                        let header_map = from_iter_to_header_map([(
+                            AGENT_WORKER_SHELL_TAG_HEADER_NAME,
+                            hostname.as_str(),
+                        )])
+                        .ok();
+
+                        if header_map.is_none() {
+                            tracing::error!(
+                                "An error has occured header map is none, it should not happen"
+                            );
+                        }
+                        crate::agent_workers::pull_job(&client, header_map)
+                            .await
+                            .map_err(|e| error::Error::InternalErr(e.to_string()))
+                            .map(|x| x.map(|y| NextJob::Http(y)))
+                    }
+                };
+                match pulled_job {
+                    Ok(Some(job)) => {
+                        tracing::debug!(worker = %worker_name, hostname = %hostname, "started handling of job {}", job.id);
+
+                        let job_dir = format!("{worker_dir}/{}", job.id);
+
+                        DirBuilder::new()
+                            .recursive(true)
+                            .create(&job_dir)
+                            .await
+                            .expect("could not create job dir");
+
+                        let target = &format!("{job_dir}/shared");
+
+                        DirBuilder::new()
+                            .recursive(true)
+                            .create(target)
+                            .await
+                            .expect("could not create shared dir");
+
+                        let JobAndPerms {
+                            job,
+                            raw_code,
+                            raw_lock,
+                            raw_flow,
+                            parent_runnable_path,
+                            token,
+                            precomputed_agent_info: precomputed_bundle,
+                        } = match (job, &conn) {
+                            (NextJob::Sql(job), Connection::Sql(db)) => {
+                                job.get_job_and_perms(db).await
+                            }
+                            (NextJob::Sql(_), Connection::Http(_)) => {
+                                panic!("sql job on http connection")
+                            }
+                            (NextJob::Http(job), _) => job,
+                        };
+
+                        // let token = create_token(&db, &job, job_perms).await;
+                        let authed_client = AuthedClient {
+                            base_internal_url: base_internal_url.to_string(),
+                            token,
+                            workspace: job.workspace_id.to_string(),
+                            force_client: None,
+                        };
+
+                        let arc_job = Arc::new(job);
+                        add_time!(bench, "handle_queued_job START");
+
+                        let span = tracing::span!(tracing::Level::INFO, "job",
+                                    job_id = %arc_job.id, workspace_id = %arc_job.workspace_id,  worker = %worker_name, hostname = %hostname, tag = %arc_job.tag,
+                                    language = "bash", otel.name = "job");
+
+                        windmill_common::otel_ee::set_span_parent(&span, &arc_job.id);
+                        // span.context().span().add_event_with_timestamp("job created".to_string(), arc_job.created_at.into(), vec![]);
+
+                        match handle_queued_job(
+                            arc_job.clone(),
+                            raw_code,
+                            raw_lock,
+                            raw_flow,
+                            parent_runnable_path,
+                            &conn,
+                            &authed_client,
+                            &hostname,
+                            &worker_name,
+                            &worker_dir,
+                            &job_dir,
+                            None,
+                            &base_internal_url,
+                            job_completed_tx.clone(),
+                            &mut occupancy_metrics,
+                            &mut killpill_rx2,
+                            precomputed_bundle,
+                            #[cfg(feature = "benchmark")]
+                            &mut bench,
+                        )
+                        .instrument(span)
+                        .await
+                        {
+                            Err(err) => match &conn {
+                                Connection::Sql(db) => {
+                                    let _ = handle_non_flow_job_error(
+                                        db,
+                                        arc_job.as_ref(),
+                                        0,
+                                        None,
+                                        error_to_value(err),
+                                        &worker_name,
+                                    )
+                                    .await;
+                                }
+                                Connection::Http(_) => {
+                                    job_completed_tx
+                                        .send_job(
+                                            JobCompleted {
+                                                preprocessed_args: None,
+                                                job: arc_job.clone(),
+                                                result: Arc::new(
+                                                    windmill_common::worker::to_raw_value(
+                                                        &error_to_value(err),
+                                                    ),
+                                                ),
+                                                result_columns: None,
+                                                mem_peak: 0,
+                                                canceled_by: None,
+                                                success: false,
+                                                cached_res_path: None,
+                                                token: authed_client.token.clone(),
+                                                duration: None,
+                                            },
+                                            false,
+                                        )
+                                        .await
+                                        .expect("send job completed");
+                                }
+                            },
+                            _ => {}
+                        }
+
+                        if !KEEP_JOB_DIR.load(Ordering::Relaxed) && !arc_job.same_worker {
+                            let _ = tokio::fs::remove_dir_all(job_dir).await;
+                        }
+
+                        last_executed_job = Some(Instant::now());
+                    }
+                    Ok(None) => {
+                        let now = Instant::now();
+                        match last_executed_job {
+                            Some(last) if now.duration_since(last).as_secs() > RESET => {
+                                tokio::time::sleep(Duration::from_secs(NAP_TIME_DURATION)).await;
+                            }
+                            _ => {
+                                tokio::time::sleep(Duration::from_millis(*SLEEP_QUEUE)).await;
+                            }
+                        }
+                    }
+
+                    Err(err) => {
+                        tracing::error!(worker = %worker_name, hostname = %hostname, "Failed to pull jobs: {}", err);
+                    }
+                };
+            }
+        }
+    });
+}
+
 pub fn start_background_processor(
     job_completed_rx: JobCompletedReceiver,
     job_completed_sender: JobCompletedSender,
@@ -140,10 +429,6 @@ pub fn start_background_processor(
         #[cfg(feature = "benchmark")]
         let mut infos = BenchmarkInfo::new();
 
-        enum JobCompletedRx {
-            JobCompleted(SendResult),
-            Killpill,
-        }
         //if we have been killed, we want to drain the queue of jobs
         while let Some(sr) = {
             if has_been_killed && same_worker_queue_size.load(Ordering::SeqCst) == 0 {
@@ -186,7 +471,7 @@ pub fn start_background_processor(
                         &base_internal_url,
                         &db,
                         &worker_dir,
-                        &same_worker_tx,
+                        Some(&same_worker_tx),
                         &job_completed_sender,
                         #[cfg(feature = "benchmark")]
                         &mut bench,
@@ -241,7 +526,7 @@ pub fn start_background_processor(
                         success,
                         Arc::new(result),
                         true,
-                        same_worker_tx.clone(),
+                        &same_worker_tx,
                         &worker_dir,
                         stop_early_override,
                         &worker_name,
@@ -273,16 +558,18 @@ pub fn start_background_processor(
     })
 }
 
-async fn send_job_completed(
-    job_completed_tx: JobCompletedSender,
-    jc: JobCompleted,
-
-) {
-    job_completed_tx
+async fn send_job_completed(job_completed_tx: JobCompletedSender, jc: JobCompleted) {
+    let result = job_completed_tx
         .send_job(jc, true)
         .with_context(windmill_common::otel_ee::otel_ctx())
-        .await
-        .expect("send job completed")
+        .await;
+
+    match result {
+        Ok(()) => tracing::debug!("send job completed"),
+        Err(err) => {
+            tracing::error!("An error occurend while sending job completed: {:#?}", err)
+        }
+    }
 }
 
 pub async fn process_result(
@@ -301,7 +588,6 @@ pub async fn process_result(
 ) -> error::Result<bool> {
     match result {
         Ok(result) => {
-
             send_job_completed(
                 job_completed_tx,
                 JobCompleted {
@@ -391,7 +677,7 @@ pub async fn handle_receive_completed_job(
     base_internal_url: &str,
     db: &DB,
     worker_dir: &str,
-    same_worker_tx: &SameWorkerSender,
+    same_worker_tx: Option<&SameWorkerSender>,
     worker_name: &str,
     job_completed_tx: JobCompletedSender,
     #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
@@ -459,7 +745,7 @@ pub async fn process_completed_job(
     client: &AuthedClient,
     db: &DB,
     worker_dir: &str,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: Option<&SameWorkerSender>,
     worker_name: &str,
     job_completed_tx: JobCompletedSender,
     #[cfg(feature = "benchmark")] bench: &mut BenchmarkIter,
@@ -535,7 +821,7 @@ pub async fn process_completed_job(
                     true,
                     result,
                     false,
-                    same_worker_tx.clone(),
+                    &same_worker_tx.expect(SAME_WORKER_REQUIREMENTS).to_owned(),
                     &worker_dir,
                     None,
                     worker_name,
@@ -575,7 +861,7 @@ pub async fn process_completed_job(
                     false,
                     Arc::new(serde_json::value::to_raw_value(&result).unwrap()),
                     false,
-                    same_worker_tx,
+                    &same_worker_tx.expect(SAME_WORKER_REQUIREMENTS).to_owned(),
                     &worker_dir,
                     None,
                     worker_name,
@@ -592,6 +878,34 @@ pub async fn process_completed_job(
     return Ok(None);
 }
 
+async fn handle_non_flow_job_error(
+    db: &DB,
+    job: &MiniPulledJob,
+    mem_peak: i32,
+    canceled_by: Option<CanceledBy>,
+    err: Value,
+    worker_name: &str,
+) -> Result<WrappedError, Error> {
+    append_logs(
+        &job.id,
+        &job.workspace_id,
+        format!("Unexpected error during job execution:\n{err:#?}"),
+        &db.into(),
+    )
+    .await;
+    add_completed_job_error(
+        db,
+        job,
+        mem_peak,
+        canceled_by,
+        err,
+        worker_name,
+        false,
+        None,
+    )
+    .await
+}
+
 #[tracing::instrument(name = "job_error", level = "info", skip_all, fields(job_id = %job.id))]
 pub async fn handle_job_error(
     db: &DB,
@@ -601,7 +915,7 @@ pub async fn handle_job_error(
     canceled_by: Option<CanceledBy>,
     err: Error,
     unrecoverable: bool,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: Option<&SameWorkerSender>,
     worker_dir: &str,
     worker_name: &str,
     job_completed_tx: JobCompletedSender,
@@ -610,22 +924,13 @@ pub async fn handle_job_error(
     let err = error_to_value(err);
 
     let update_job_future = || async {
-        append_logs(
-            &job.id,
-            &job.workspace_id,
-            format!("Unexpected error during job execution:\n{err:#?}"),
-            &db.into(),
-        )
-        .await;
-        add_completed_job_error(
+        handle_non_flow_job_error(
             db,
             job,
             mem_peak,
             canceled_by.clone(),
             err.clone(),
             worker_name,
-            false,
-            None,
         )
         .await
     };
@@ -654,7 +959,7 @@ pub async fn handle_job_error(
             false,
             Arc::new(serde_json::value::to_raw_value(&wrapped_error).unwrap()),
             unrecoverable,
-            same_worker_tx,
+            &same_worker_tx.expect(SAME_WORKER_REQUIREMENTS).clone(),
             worker_dir,
             None,
             worker_name,
diff --git a/backend/windmill-worker/src/worker.rs b/backend/windmill-worker/src/worker.rs
index 92fc0f0351..3976ed79d8 100644
--- a/backend/windmill-worker/src/worker.rs
+++ b/backend/windmill-worker/src/worker.rs
@@ -17,7 +17,9 @@ use windmill_common::{
     cache::{future::FutureCachedExt, ScriptData, ScriptMetadata},
     schema::{should_validate_schema, SchemaValidator},
     scripts::PREVIEW_IS_TAR_CODEBASE_HASH,
-    utils::WarnAfterExt,
+    utils::{
+        check_if_ag_worker_has_specific_suffix, AgentWorkerSuffix, WarnAfterExt, WORKER_NAME_PREFIX,
+    },
     worker::{
         write_file, Connection, HttpClient, MAX_TIMEOUT, ROOT_CACHE_DIR, ROOT_CACHE_NOMOUNT_DIR,
         TMP_DIR,
@@ -112,7 +114,9 @@ use crate::{
     job_logger::NO_LOGS_AT_ALL,
     js_eval::{eval_fetch_timeout, transpile_ts},
     pg_executor::do_postgresql,
-    result_processor::{process_result, start_background_processor},
+    result_processor::{
+        process_result, start_background_processor, start_interactive_worker_shell,
+    },
     schema::schema_validator_from_main_arg_sig,
     worker_flow::handle_flow,
     worker_lockfiles::{
@@ -244,6 +248,8 @@ lazy_static::lazy_static! {
 const DOTNET_DEFAULT_PATH: &str = "C:\\Program Files\\dotnet\\dotnet.exe";
 #[cfg(unix)]
 const DOTNET_DEFAULT_PATH: &str = "/usr/bin/dotnet";
+pub const SAME_WORKER_REQUIREMENTS: &'static str =
+    "SameWorkerSender is required because this job may be part of a flow";
 
 lazy_static::lazy_static! {
 
@@ -388,6 +394,31 @@ lazy_static::lazy_static! {
     pub static ref WIN_ENVS: Envs = vec![];
 }
 
+#[derive(Debug)]
+pub enum NextJob {
+    Sql(PulledJob),
+    Http(JobAndPerms),
+}
+
+impl NextJob {
+    pub fn job(self) -> MiniPulledJob {
+        match self {
+            NextJob::Sql(job) => job.job,
+            NextJob::Http(job) => job.job,
+        }
+    }
+}
+
+impl std::ops::Deref for NextJob {
+    type Target = MiniPulledJob;
+    fn deref(&self) -> &Self::Target {
+        match self {
+            NextJob::Sql(job) => &job.job,
+            NextJob::Http(job) => &job.job,
+        }
+    }
+}
+
 //only matter if CLOUD_HOSTED
 pub const MAX_RESULT_SIZE: usize = 1024 * 1024 * 2; // 2MB
 
@@ -1124,6 +1155,29 @@ pub async fn run_worker(
     let job_completed_processor_is_done =
         Arc::new(AtomicBool::new(matches!(conn, Connection::Http(_))));
 
+    let is_agent_worker_allowed_to_enable_live_shell = || {
+        worker_name
+            .split("-")
+            .last()
+            .map(|suffix| {
+                check_if_ag_worker_has_specific_suffix(AgentWorkerSuffix::EnableLiveShell, suffix)
+            })
+            .unwrap_or(false)
+    };
+
+    
+    if worker_name.starts_with(WORKER_NAME_PREFIX) || is_agent_worker_allowed_to_enable_live_shell() {
+        tracing::debug!("Worker {} now listening for host tag", &worker_name);
+        start_interactive_worker_shell(
+            conn.clone(),
+            hostname.to_owned(),
+            worker_name.clone(),
+            killpill_rx.resubscribe(),
+            base_internal_url.to_owned(),
+            worker_dir.clone(),
+        );
+    }
+
     let send_result = match (conn, job_completed_rx) {
         (Connection::Sql(db), Some(job_completed_receiver)) => Some(start_background_processor(
             job_completed_receiver,
@@ -1250,7 +1304,7 @@ pub async fn run_worker(
             if !valid_key {
                 tracing::error!(
                     worker = %worker_name, hostname = %hostname,
-                    "Invalid license key, workers require a valid license key, sleeping for 30s waiting for valid key to be set"
+                    "Invalid license key, workers require a valid license key, sleeping for 10s waiting for valid key to be set"
                 );
                 tokio::time::sleep(Duration::from_secs(10)).await;
                 continue;
@@ -1320,29 +1374,6 @@ pub async fn run_worker(
         } else {
             tracing::info!("benchmark not finished, still pulling jobs {}", infos.iters);
         }
-        enum NextJob {
-            Sql(PulledJob),
-            Http(JobAndPerms),
-        }
-
-        impl NextJob {
-            pub fn job(self) -> MiniPulledJob {
-                match self {
-                    NextJob::Sql(job) => job.job,
-                    NextJob::Http(job) => job.job,
-                }
-            }
-        }
-
-        impl std::ops::Deref for NextJob {
-            type Target = MiniPulledJob;
-            fn deref(&self) -> &Self::Target {
-                match self {
-                    NextJob::Sql(job) => &job.job,
-                    NextJob::Http(job) => &job.job,
-                }
-            }
-        }
 
         let next_job = {
             // println!("2: {:?}",  instant.elapsed());
@@ -1383,6 +1414,7 @@ pub async fn run_worker(
                                 "/api/agent_workers/same_worker_job/{}",
                                 same_worker_job.job_id
                             ),
+                            None,
                             &same_worker_job,
                         )
                         .await
@@ -1488,7 +1520,7 @@ pub async fn run_worker(
                         }
                         job.map(|x| x.job.map(NextJob::Sql))
                     }
-                    Connection::Http(client) => crate::agent_workers::pull_job(&client)
+                    Connection::Http(client) => crate::agent_workers::pull_job(&client, None)
                         .await
                         .map_err(|e| error::Error::InternalErr(e.to_string()))
                         .map(|x| x.map(|y| NextJob::Http(y))),
@@ -1536,6 +1568,7 @@ pub async fn run_worker(
                         }
                     }
                 }
+
                 if matches!(job.kind, JobKind::Noop) {
                     add_time!(bench, "send job completed START");
                     job_completed_tx
@@ -1733,7 +1766,7 @@ pub async fn run_worker(
                         &worker_name,
                         &worker_dir,
                         &job_dir,
-                        same_worker_tx.clone(),
+                        Some(same_worker_tx.clone()),
                         base_internal_url,
                         job_completed_tx.clone(),
                         &mut occupancy_metrics,
@@ -1756,7 +1789,7 @@ pub async fn run_worker(
                                         None,
                                         err,
                                         false,
-                                        same_worker_tx.clone(),
+                                        Some(&same_worker_tx),
                                         &worker_dir,
                                         &worker_name,
                                         job_completed_tx.clone(),
@@ -2006,7 +2039,7 @@ pub struct PreviousResult<'a> {
     pub previous_result: Option<&'a RawValue>,
 }
 
-async fn handle_queued_job(
+pub async fn handle_queued_job(
     job: Arc<MiniPulledJob>,
     raw_code: Option<String>,
     raw_lock: Option<String>,
@@ -2018,7 +2051,7 @@ async fn handle_queued_job(
     worker_name: &str,
     worker_dir: &str,
     job_dir: &str,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: Option<SameWorkerSender>,
     base_internal_url: &str,
     job_completed_tx: JobCompletedSender,
     occupancy_metrics: &mut OccupancyMetrics,
@@ -2167,7 +2200,7 @@ async fn handle_queued_job(
                 db,
                 &client,
                 None,
-                same_worker_tx,
+                &same_worker_tx.expect(SAME_WORKER_REQUIREMENTS),
                 worker_dir,
                 job_completed_tx.clone(),
                 worker_name,
@@ -2336,7 +2369,6 @@ async fn handle_queued_job(
         {
             return Ok(false);
         }
-
         process_result(
             job,
             result.map(|x| Arc::new(x)),
diff --git a/backend/windmill-worker/src/worker_flow.rs b/backend/windmill-worker/src/worker_flow.rs
index 0af2bfcc72..85e053317c 100644
--- a/backend/windmill-worker/src/worker_flow.rs
+++ b/backend/windmill-worker/src/worker_flow.rs
@@ -80,7 +80,7 @@ pub async fn update_flow_status_after_job_completion(
     success: bool,
     result: Arc<Box<RawValue>>,
     unrecoverable: bool,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: &SameWorkerSender,
     worker_dir: &str,
     stop_early_override: Option<bool>,
     worker_name: &str,
@@ -109,7 +109,7 @@ pub async fn update_flow_status_after_job_completion(
             rec.success,
             rec.result,
             unrecoverable,
-            same_worker_tx.clone(),
+            same_worker_tx,
             worker_dir,
             rec.stop_early_override,
             rec.skip_error_handler,
@@ -134,7 +134,7 @@ pub async fn update_flow_status_after_job_completion(
                         error: json!(e.to_string()),
                     }))),
                     true,
-                    same_worker_tx.clone(),
+                    same_worker_tx,
                     worker_dir,
                     rec.stop_early_override,
                     rec.skip_error_handler,
@@ -226,7 +226,7 @@ pub async fn update_flow_status_after_job_completion_internal(
     mut success: bool,
     result: Arc<Box<RawValue>>,
     unrecoverable: bool,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: &SameWorkerSender,
     worker_dir: &str,
     stop_early_override: Option<bool>,
     skip_error_handler: bool,
@@ -1289,7 +1289,7 @@ pub async fn update_flow_status_after_job_completion_internal(
             db,
             client,
             Some(nresult.clone()),
-            same_worker_tx.clone(),
+            same_worker_tx,
             worker_dir,
             job_completed_tx,
             worker_name,
@@ -1586,7 +1586,7 @@ pub async fn handle_flow(
     db: &sqlx::Pool<sqlx::Postgres>,
     client: &AuthedClient,
     last_result: Option<Arc<Box<RawValue>>>,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: &SameWorkerSender,
     worker_dir: &str,
     job_completed_tx: JobCompletedSender,
     worker_name: &str,
@@ -1643,7 +1643,7 @@ pub async fn handle_flow(
             db,
             client,
             last_result.clone(),
-            same_worker_tx.clone(),
+            same_worker_tx,
             worker_dir,
             worker_name,
         )
@@ -1736,7 +1736,7 @@ async fn push_next_flow_job(
     db: &sqlx::Pool<sqlx::Postgres>,
     client: &AuthedClient,
     last_job_result: Option<Arc<Box<RawValue>>>,
-    same_worker_tx: SameWorkerSender,
+    same_worker_tx: &SameWorkerSender,
     worker_dir: &str,
     worker_name: &str,
 ) -> error::Result<PushNextFlowJob> {
diff --git a/backend/windmill-worker/src/worker_utils.rs b/backend/windmill-worker/src/worker_utils.rs
index e1ea849999..4da318d37b 100644
--- a/backend/windmill-worker/src/worker_utils.rs
+++ b/backend/windmill-worker/src/worker_utils.rs
@@ -125,6 +125,7 @@ async fn update_worker_ping_full_inner(
             client
                 .post::<_, ()>(
                     UPDATE_PING_URL,
+                    None,
                     &Ping {
                         last_job_executed: None,
                         last_job_workspace_id: None,
@@ -190,6 +191,7 @@ pub async fn insert_ping(
             client
                 .post::<_, ()>(
                     UPDATE_PING_URL,
+                    None,
                     &Ping {
                         last_job_executed: None,
                         last_job_workspace_id: None,
@@ -249,6 +251,7 @@ pub async fn update_worker_ping_from_job(
             client
                 .post::<Ping, ()>(
                     UPDATE_PING_URL,
+                    None,
                     &Ping {
                         last_job_executed: Some(job_id.clone()),
                         last_job_workspace_id: Some(w_id.to_string()),
@@ -287,6 +290,7 @@ pub async fn ping_job_status(
             client
                 .post(
                     &format!("/api/agent_workers/ping_job_status/{}", job_id),
+                    None,
                     &PingJobStatus { mem_peak, current_mem },
                 )
                 .await
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 899306ebf0..f605ce6d4f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
 				"@redocly/json-to-json-schema": "^0.0.1",
 				"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
 				"@windmill-labs/svelte-dnd-action": "^0.9.48",
+				"@xterm/addon-fit": "^0.10.0",
 				"@xyflow/svelte": "^0.1.15",
 				"ag-charts-community": "^9.0.1",
 				"ag-charts-enterprise": "^9.0.1",
@@ -79,6 +80,8 @@
 				"windmill-parser-wasm-ts": "^1.486.1",
 				"windmill-parser-wasm-yaml": "^1.429.0",
 				"windmill-sql-datatype-parser-wasm": "^1.318.0",
+				"xterm": "^5.3.0",
+				"xterm-readline": "^1.1.2",
 				"y-monaco": "^0.1.4",
 				"y-websocket": "^1.5.4",
 				"yaml": "^2.3.4",
@@ -3795,6 +3798,22 @@
 				"svelte": ">=3.23.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/@xterm/addon-fit": {
+			"version": "0.10.0",
+			"resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+			"integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@xterm/xterm": "^5.0.0"
+			}
+		},
+		"node_modules/@xterm/xterm": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+			"integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+			"license": "MIT",
+			"peer": true
+		},
 		"node_modules/@xyflow/svelte": {
 			"version": "0.1.39",
 			"resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.1.39.tgz",
@@ -3953,7 +3972,6 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
 			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -5485,8 +5503,7 @@
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-			"dev": true
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
 		},
 		"node_modules/encoding-down": {
 			"version": "6.3.0",
@@ -7179,7 +7196,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
 			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -11163,7 +11179,6 @@
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
 			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-			"dev": true,
 			"dependencies": {
 				"emoji-regex": "^8.0.0",
 				"is-fullwidth-code-point": "^3.0.0",
@@ -11192,7 +11207,6 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
 			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-			"dev": true,
 			"dependencies": {
 				"ansi-regex": "^5.0.1"
 			},
@@ -13029,6 +13043,25 @@
 				"node": ">=0.4"
 			}
 		},
+		"node_modules/xterm": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
+			"integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==",
+			"deprecated": "This package is now deprecated. Move to @xterm/xterm instead.",
+			"license": "MIT"
+		},
+		"node_modules/xterm-readline": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/xterm-readline/-/xterm-readline-1.1.2.tgz",
+			"integrity": "sha512-1+W2nVuQvCYz9OUYwFBiolrSQUui51aDDyacKXt4PuxeBHqzvabQEJ2kwdBDzsmOjz5BwlDTAjJmYpH2OGqLFA==",
+			"license": "MIT",
+			"dependencies": {
+				"string-width": "^4"
+			},
+			"peerDependencies": {
+				"@xterm/xterm": "^5.5.0"
+			}
+		},
 		"node_modules/y-leveldb": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/y-leveldb/-/y-leveldb-0.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 51c7820491..4d2948726d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -81,18 +81,19 @@
 	"dependencies": {
 		"@aws-crypto/sha256-js": "^4.0.0",
 		"@codingame/monaco-vscode-configuration-service-override": "~16.1.1",
+		"@codingame/monaco-vscode-editor-api": "~16.1.1",
 		"@codingame/monaco-vscode-standalone-css-language-features": "~16.1.1",
 		"@codingame/monaco-vscode-standalone-html-language-features": "^16.1.1",
 		"@codingame/monaco-vscode-standalone-json-language-features": "~16.1.1",
 		"@codingame/monaco-vscode-standalone-languages": "~16.1.1",
 		"@codingame/monaco-vscode-standalone-typescript-language-features": "~16.1.1",
-		"@codingame/monaco-vscode-editor-api": "~16.1.1",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
 		"@redocly/json-to-json-schema": "^0.0.1",
 		"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
 		"@windmill-labs/svelte-dnd-action": "^0.9.48",
+		"@xterm/addon-fit": "^0.10.0",
 		"@xyflow/svelte": "^0.1.15",
 		"ag-charts-community": "^9.0.1",
 		"ag-charts-enterprise": "^9.0.1",
@@ -148,6 +149,8 @@
 		"windmill-parser-wasm-ts": "^1.486.1",
 		"windmill-parser-wasm-yaml": "^1.429.0",
 		"windmill-sql-datatype-parser-wasm": "^1.318.0",
+		"xterm": "^5.3.0",
+		"xterm-readline": "^1.1.2",
 		"y-monaco": "^0.1.4",
 		"y-websocket": "^1.5.4",
 		"yaml": "^2.3.4",
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 718800105a..f7fb8efe20 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -25,7 +25,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-code="viewport" class="outline-none focus:outline-none">
+	<body data-sveltekit-preload-code="viewport" class="outline-none overflow-x-hidden focus:outline-none">
 		<div style="display: contents">
 			<div id="svelte-global-loader">
 				<div id="mainbg" style="position: absolute; bottom: 0; left: 0; width: 100%; height: 100vh">
diff --git a/frontend/src/lib/components/AgentWorkerExtraBehavior.svelte b/frontend/src/lib/components/AgentWorkerExtraBehavior.svelte
new file mode 100644
index 0000000000..5e5ed1162c
--- /dev/null
+++ b/frontend/src/lib/components/AgentWorkerExtraBehavior.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { AgentKnownSuffix, concatAgentSuffix, removeAgentSuffix } from '$lib/utils'
+	import Section from './Section.svelte'
+	import Toggle from './Toggle.svelte'
+
+	type Props = {
+		suffix: string | undefined
+	}
+
+	let enable_ssh_repl_like = $state(false)
+
+	let { suffix = $bindable() }: Props = $props()
+</script>
+
+<Section label="Extra behavior">
+	<Toggle
+		textClass="font-normal text-sm"
+		color="nord"
+		size="xs"
+		checked={enable_ssh_repl_like}
+		on:change={() => {
+			enable_ssh_repl_like = !enable_ssh_repl_like
+			if (enable_ssh_repl_like) {
+				suffix = concatAgentSuffix(suffix, AgentKnownSuffix.ENABLE_LIVE_SHELL)
+				return
+			}
+			suffix = removeAgentSuffix(suffix, AgentKnownSuffix.ENABLE_LIVE_SHELL)
+		}}
+		options={{
+			right: "Enable live shell on worker's host machine",
+			rightTooltip:
+				"Allow you to open a live shell and interact with the agent worker's host machine"
+		}}
+		class="py-1"
+	/>
+</Section>
diff --git a/frontend/src/lib/components/DBManagerDrawerButton.svelte b/frontend/src/lib/components/DBManagerDrawerButton.svelte
index 1120f4211f..d0a1b68624 100644
--- a/frontend/src/lib/components/DBManagerDrawerButton.svelte
+++ b/frontend/src/lib/components/DBManagerDrawerButton.svelte
@@ -18,7 +18,7 @@
 	import { Alert } from './common'
 	import { dbDeleteTableActionWithPreviewScript, dbTableOpsWithPreviewScripts } from './dbOps'
 	import { makeCreateTableQuery } from './apps/components/display/dbtable/queries/createTable'
-	import { runPreviewJobAndPollResult } from './jobs/utils'
+	import { runScriptAndPollResult } from './jobs/utils'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import SqlRepl from './SqlRepl.svelte'
 	import SimpleAgTable from './SimpleAgTable.svelte'
@@ -208,7 +208,7 @@
 								previewSql: (values) =>
 									makeCreateTableQuery(values, resourceType, selectedSchemaKey),
 								async onConfirm(values) {
-									await runPreviewJobAndPollResult({
+									await runScriptAndPollResult({
 										workspace: $workspaceStore,
 										requestBody: {
 											args: { database: '$res:' + resourcePath },
diff --git a/frontend/src/lib/components/Description.svelte b/frontend/src/lib/components/Description.svelte
index 0074928f53..59e233aaa8 100644
--- a/frontend/src/lib/components/Description.svelte
+++ b/frontend/src/lib/components/Description.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { twMerge } from 'tailwind-merge'
-
 	export let link: string | undefined = undefined
 </script>
 
-<div class={twMerge('text-xs text-tertiary font-normal opacity-80', $$props.class)}>
+<div class="text-xs text-tertiary font-normal">
 	<slot />
 	{#if link}
 		<a href={link} target="_blank">Learn more</a>
diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index 7a91c3b34e..9e72afec65 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -47,11 +47,10 @@
 		parseTypescriptDeps
 	} from '$lib/relative_imports'
 	import Tooltip from './Tooltip.svelte'
-	import type { TriggerContext } from './triggers'
+	import type { ScheduleTrigger, TriggerContext } from './triggers'
 	import { workspaceAIClients } from './copilot/lib'
 	import type { FlowPropPickerConfig, PropPickerContext } from './prop_picker'
 	import type { PickableProperties } from './flows/previousResults'
-	import { Triggers } from './triggers/triggers.svelte'
 	$: token = $page.url.searchParams.get('wm_token') ?? undefined
 	$: workspace = $page.url.searchParams.get('workspace') ?? undefined
 	$: themeDarkRaw = $page.url.searchParams.get('activeColorTheme')
@@ -494,13 +493,20 @@
 
 	const testStepStore = writable<Record<string, any>>({})
 	const selectedIdStore = writable('settings-metadata')
+	const selectedTriggerStore = writable<
+		'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll'
+	>('webhooks')
 
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(undefined)
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	setContext<TriggerContext>('TriggerContext', {
+		primarySchedule: primaryScheduleStore,
+		selectedTrigger: selectedTriggerStore,
 		triggersCount: triggersCount,
 		simplifiedPoll: writable(false),
-		showCaptureHint: writable(undefined),
-		triggersState: new Triggers()
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined),
+		showCaptureHint: writable(undefined)
 	})
 	setContext<FlowEditorContext>('FlowEditorContext', {
 		selectedId: selectedIdStore,
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index c03cfbf597..aa39489723 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -35,7 +35,6 @@
 	import PdfViewer from './display/PdfViewer.svelte'
 	import type { DisplayResultUi } from './custom_ui'
 	import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte'
-	import { toJsonStr } from '$lib/utils'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
 	export let result: any
@@ -270,6 +269,15 @@
 	let jsonViewer: Drawer
 	let s3FileViewer: S3FilePicker
 
+	function toJsonStr(result: any) {
+		try {
+			// console.log(result)
+			return JSON.stringify(result ?? null, null, 4) ?? 'null'
+		} catch (e) {
+			return 'error stringifying object: ' + e.toString()
+		}
+	}
+
 	function checkIfHasBigInt(result: any) {
 		if (typeof result === 'number' && Number.isInteger(result) && !Number.isSafeInteger(result)) {
 			return true
diff --git a/frontend/src/lib/components/DisplayResultControlBar.svelte b/frontend/src/lib/components/DisplayResultControlBar.svelte
index bfcdf24c85..ea5920357d 100644
--- a/frontend/src/lib/components/DisplayResultControlBar.svelte
+++ b/frontend/src/lib/components/DisplayResultControlBar.svelte
@@ -26,7 +26,7 @@
 	}
 </script>
 
-<div class={twMerge('flex flex-row gap-2.5 z-10 text-tertiary -mt-1 items-center')}>
+<div class={twMerge('flex flex-row gap-2.5 z-10 text-tertiary -mt-1')}>
 	{#if customUi?.disableDownload !== true}
 		<a
 			download="{filename ?? 'result'}.json"
diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index 6843c12927..7a7f6a3beb 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -25,8 +25,6 @@
 	export let fixedHeight = true
 	export let hidePopup = false
 	export let open = false
-	export let customWidth: number | undefined = undefined
-	export let customMenu = false
 
 	const {
 		elements: { menu, item, trigger },
@@ -108,16 +106,11 @@
 </button>
 
 {#if open && !hidePopup}
-	<div use:melt={$menu} data-menu class="z-[6000] transition-all duration-100">
-		{#if customMenu}
-			<slot name="menu" />
-		{:else}
-			<div
-				class="bg-surface border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
-				style={customWidth ? `width: ${customWidth}px` : ''}
-			>
-				<DropdownV2Inner items={computeItems} meltItem={item} />
-			</div>
-		{/if}
+	<div use:melt={$menu} data-menu class="z-[6000]">
+		<div
+			class="bg-surface border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
+		>
+			<DropdownV2Inner items={computeItems} meltItem={item} />
+		</div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte
index 3c657d7678..1566e146d0 100644
--- a/frontend/src/lib/components/DropdownV2Inner.svelte
+++ b/frontend/src/lib/components/DropdownV2Inner.svelte
@@ -4,15 +4,10 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { MenubarMenuElements } from '@melt-ui/svelte'
 	import type { Item } from '$lib/utils'
+	export let items: Item[] | (() => Item[]) | (() => Promise<Item[]>) = []
+	export let meltItem: MenubarMenuElements['item']
 
-	interface Props {
-		items?: Item[] | (() => Item[]) | (() => Promise<Item[]>)
-		meltItem: MenubarMenuElements['item']
-	}
-
-	let { items = [], meltItem }: Props = $props()
-
-	let computedItems: Item[] | undefined = $state(undefined)
+	let computedItems: Item[] | undefined = undefined
 	async function computeItems() {
 		if (typeof items === 'function') {
 			computedItems = ((await items()) ?? []).filter((item) => !item.hide)
@@ -43,12 +38,9 @@
 				item={meltItem}
 			>
 				{#if item.icon}
-					<item.icon size={14} color={item.iconColor} />
+					<svelte:component this={item.icon} size={14} color={item.iconColor} />
 				{/if}
-				<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
-					{item.displayName}
-				</p>
-				{@render item.extra?.()}
+				{item.displayName}
 			</MenuItem>
 		{/each}
 	</div>
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index b28eb4bcec..8854901c0f 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import {
 		FlowService,
+		ScheduleService,
 		type Flow,
 		type FlowModule,
 		DraftService,
@@ -18,12 +19,12 @@
 		enterpriseLicense,
 		tutorialsToDo,
 		userStore,
-		workspaceStore,
-		usedTriggerKinds
+		workspaceStore
 	} from '$lib/stores'
 	import {
 		cleanValueProperties,
 		encodeState,
+		formatCron,
 		generateRandomString,
 		orderedJsonStringify,
 		replaceFalseWithUndefined,
@@ -75,14 +76,6 @@
 	import { type TriggerContext, type ScheduleTrigger } from './triggers'
 	import type { SavedAndModifiedValue } from './common/confirmationModal/unsavedTypes'
 	import DeployButton from './DeployButton.svelte'
-	import type { FlowWithDraftAndDraftTriggers, Trigger } from './triggers/utils'
-	import {
-		deployTriggers,
-		filterDraftTriggers,
-		handleSelectTriggerFromKind
-	} from './triggers/utils'
-	import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte'
-	import { Triggers } from './triggers/triggers.svelte'
 
 	export let initialPath: string = ''
 	export let pathStoreInit: string | undefined = undefined
@@ -92,16 +85,18 @@
 	export let loading = false
 	export let flowStore: Writable<OpenFlow>
 	export let flowStateStore: Writable<FlowState>
-	export let savedFlow: FlowWithDraftAndDraftTriggers | undefined = undefined
+	export let savedFlow:
+		| (Flow & {
+				draft?: Flow | undefined
+		  })
+		| undefined = undefined
 	export let diffDrawer: DiffDrawer | undefined = undefined
 	export let customUi: FlowBuilderWhitelabelCustomUi = {}
 	export let disableAi: boolean = false
 	export let disabledFlowInputs = false
-	export let savedPrimarySchedule: ScheduleTrigger | undefined = undefined // used to set the primary schedule in the legacy primaryScheduleStore
+	export let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
 	export let version: number | undefined = undefined
 	export let setSavedraftCb: ((cb: () => void) => void) | undefined = undefined
-	export let draftTriggersFromUrl: Trigger[] | undefined = undefined
-	export let selectedTriggerIndexFromUrl: number | undefined = undefined
 
 	let initialPathStore = writable(initialPath)
 	$: initialPathStore.set(initialPath)
@@ -121,26 +116,12 @@
 	let confirmCallback: () => void = () => {} // What happens when user clicks `override` in warning
 	let open: boolean = false // Is confirmation modal open
 
-	// Draft triggers confirmation modal
-	let draftTriggersModalOpen = false
-	let confirmDeploymentCallback: (triggersToDeploy: Trigger[]) => void = () => {}
-
-	async function handleDraftTriggersConfirmed(event: CustomEvent<{ selectedTriggers: Trigger[] }>) {
-		const { selectedTriggers } = event.detail
-		// Continue with saving the flow
-		draftTriggersModalOpen = false
-		confirmDeploymentCallback(selectedTriggers)
-	}
-
 	$: setContext('customUi', customUi)
 
 	export function getInitialAndModifiedValues(): SavedAndModifiedValue {
 		return {
 			savedValue: savedFlow,
-			modifiedValue: {
-				...$flowStore,
-				draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
-			}
+			modifiedValue: $flowStore
 		}
 	}
 	let onLatest = true
@@ -167,25 +148,42 @@
 
 	const dispatch = createEventDispatcher()
 
-	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule) // kept for legacy reasons
-	const triggersCount = writable<TriggersCount | undefined>(undefined)
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule)
+	const triggersCount = writable<TriggersCount | undefined>(
+		savedPrimarySchedule
+			? { schedule_count: 1, primary_schedule: { schedule: savedPrimarySchedule.cron } }
+			: undefined
+	)
 	const simplifiedPoll = writable(false)
-
-	// used to set the primary schedule in the legacy primaryScheduleStore
 	export function setPrimarySchedule(schedule: ScheduleTrigger | undefined | false) {
 		primaryScheduleStore.set(schedule)
-	}
-
-	export function setDraftTriggers(triggers: Trigger[] | undefined) {
-		triggersState.setTriggers([
-			...(triggers ?? []),
-			...triggersState.triggers.filter((t) => !t.draftConfig)
-		])
 		loadTriggers()
 	}
 
-	export function setSelectedTriggerIndex(index: number | undefined) {
-		triggersState.selectedTriggerIndex = index
+	async function createSchedule(path: string) {
+		if ($primaryScheduleStore) {
+			const { cron, timezone, args, enabled, summary } = $primaryScheduleStore
+
+			try {
+				await ScheduleService.createSchedule({
+					workspace: $workspaceStore!,
+					requestBody: {
+						path: path,
+						schedule: formatCron(cron),
+						timezone,
+						script_path: path,
+						is_flow: true,
+						args,
+						enabled,
+						summary
+					}
+				})
+			} catch (err) {
+				sendUserToast(`The primary schedule could not be created: ${err}`, true)
+			}
+		} else {
+			sendUserToast('The primary schedule could not be created: no schedule data', true)
+		}
 	}
 
 	let loadingSave = false
@@ -197,12 +195,7 @@
 		}
 		if (savedFlow) {
 			const draftOrDeployed = cleanValueProperties(savedFlow.draft || savedFlow)
-			const currentDraftTriggers = structuredClone(triggersState.getDraftTriggersSnapshot())
-			const current = cleanValueProperties({
-				...$flowStore,
-				path: $pathStore,
-				draft_triggers: currentDraftTriggers
-			})
+			const current = cleanValueProperties({ ...$flowStore, path: $pathStore })
 			if (!forceSave && orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
 				sendUserToast('No changes detected, ignoring', false, [
 					{
@@ -266,7 +259,7 @@
 					value: {
 						...flow,
 						path: $pathStore,
-						draft_triggers: triggersState.getDraftTriggersSnapshot()
+						primary_schedule: $primaryScheduleStore
 					}
 				}
 			})
@@ -277,14 +270,15 @@
 							...structuredClone($flowStore),
 							path: $pathStore,
 							draft_only: true
-						}
+					  }
 					: savedFlow),
 				draft: {
 					...structuredClone($flowStore),
-					path: $pathStore,
-					draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
+					path: $pathStore
 				}
-			} as FlowWithDraftAndDraftTriggers
+			} as Flow & {
+				draft?: Flow
+			}
 
 			let savedAtNewPath = false
 			if (newFlow) {
@@ -357,19 +351,7 @@
 		deployedBy = flow.edited_by
 	}
 
-	async function saveFlow(deploymentMsg?: string, triggersToDeploy?: Trigger[]): Promise<void> {
-		if (!triggersToDeploy) {
-			// Check if there are draft triggers that need confirmation
-			const draftTriggers = triggersState.triggers.filter((trigger) => trigger.draftConfig)
-			if (draftTriggers.length > 0) {
-				draftTriggersModalOpen = true
-				confirmDeploymentCallback = async (triggersToDeploy: Trigger[]) => {
-					await saveFlow(deploymentMsg, triggersToDeploy)
-				}
-				return
-			}
-		}
-
+	async function saveFlow(deploymentMsg?: string): Promise<void> {
 		loadingSave = true
 		try {
 			const flow = cleanInputs($flowStore)
@@ -408,15 +390,8 @@
 					},
 					runnableKind: 'flow'
 				})
-				if (triggersToDeploy) {
-					await deployTriggers(
-						triggersToDeploy,
-						$workspaceStore,
-						!!$userStore?.is_admin || !!$userStore?.is_super_admin,
-						usedTriggerKinds,
-						$pathStore,
-						true
-					)
+				if ($primaryScheduleStore && $primaryScheduleStore.enabled) {
+					await createSchedule($pathStore)
 				}
 			} else {
 				try {
@@ -425,14 +400,51 @@
 					console.error('error interacting with local storage', e)
 				}
 
-				if (triggersToDeploy) {
-					await deployTriggers(
-						triggersToDeploy,
-						$workspaceStore,
-						!!$userStore?.is_admin || !!$userStore?.is_super_admin,
-						usedTriggerKinds,
-						initialPath
-					)
+				const scheduleExists = await ScheduleService.existsSchedule({
+					workspace: $workspaceStore ?? '',
+					path: initialPath
+				})
+
+				if (scheduleExists) {
+					const schedule = await ScheduleService.getSchedule({
+						workspace: $workspaceStore ?? '',
+						path: initialPath
+					})
+					if ($primaryScheduleStore) {
+						const { cron, timezone, args, enabled, summary } = $primaryScheduleStore
+
+						if (
+							JSON.stringify(schedule.args) != JSON.stringify(args) ||
+							schedule.schedule != cron ||
+							schedule.timezone != timezone ||
+							schedule.summary != summary
+						) {
+							await ScheduleService.updateSchedule({
+								workspace: $workspaceStore ?? '',
+								path: initialPath,
+								requestBody: {
+									schedule: formatCron(cron),
+									timezone,
+									args,
+									summary
+								}
+							})
+						}
+						if (enabled != schedule.enabled) {
+							await ScheduleService.setScheduleEnabled({
+								workspace: $workspaceStore ?? '',
+								path: initialPath,
+								requestBody: { enabled }
+							})
+						}
+					} else if (scheduleExists && !$triggersCount?.primary_schedule) {
+						await ScheduleService.deleteSchedule({
+							workspace: $workspaceStore ?? '',
+							path: $pathStore
+						})
+					}
+				} else if ($primaryScheduleStore && $primaryScheduleStore.enabled) {
+					await createSchedule(initialPath)
 				}
 
 				await FlowService.updateFlow({
@@ -453,15 +465,10 @@
 					}
 				})
 			}
-
-			const { draft_triggers: _, ...newSavedFlow } = $flowStore as OpenFlow & {
-				draft_triggers: Trigger[]
-			}
 			savedFlow = {
-				...structuredClone(newSavedFlow),
+				...structuredClone($flowStore),
 				path: $pathStore
 			} as Flow
-			triggersState.setTriggers([])
 			loadingSave = false
 			dispatch('deploy', $pathStore)
 		} catch (err) {
@@ -489,8 +496,7 @@
 						flow: $flowStore,
 						path: $pathStore,
 						selectedId: $selectedIdStore,
-						draft_triggers: triggersState.getDraftTriggersSnapshot(),
-						selected_trigger: triggersState.getSelectedTriggerSnapshot()
+						primarySchedule: $primaryScheduleStore
 					})
 				)
 			} catch (err) {
@@ -500,6 +506,16 @@
 	}
 
 	const selectedIdStore = writable<string>(selectedId ?? 'settings-metadata')
+	const selectedTriggerStore = writable<
+		| 'webhooks'
+		| 'emails'
+		| 'schedules'
+		| 'cli'
+		| 'routes'
+		| 'websockets'
+		| 'postgres'
+		| 'scheduledPoll'
+	>('webhooks')
 
 	export function getSelectedId() {
 		return $selectedIdStore
@@ -525,6 +541,20 @@
 		selectedIdStore.set(selectedId)
 	}
 
+	function selectTrigger(
+		selectedTrigger:
+			| 'webhooks'
+			| 'emails'
+			| 'schedules'
+			| 'cli'
+			| 'routes'
+			| 'websockets'
+			| 'postgres'
+			| 'scheduledPoll'
+	) {
+		selectedTriggerStore.set(selectedTrigger)
+	}
+
 	let insertButtonOpen = writable<boolean>(false)
 
 	setContext<FlowEditorContext>('FlowEditorContext', {
@@ -547,42 +577,29 @@
 		flowInputEditorState: flowInputEditorStateStore
 	})
 
-	// Add triggers context store
-	const triggersState = new Triggers(
-		[
-			{ type: 'webhook', path: '', isDraft: false },
-			{ type: 'email', path: '', isDraft: false },
-			...(draftTriggersFromUrl ?? savedFlow?.draft?.draft_triggers ?? [])
-		],
-		selectedTriggerIndexFromUrl,
-		saveSessionDraft
-	)
-
 	setContext<TriggerContext>('TriggerContext', {
+		selectedTrigger: selectedTriggerStore,
+		primarySchedule: primaryScheduleStore,
 		triggersCount,
 		simplifiedPoll,
-		showCaptureHint,
-		triggersState
+		defaultValues: writable(undefined),
+		captureOn,
+		showCaptureHint
 	})
 
-	export async function loadTriggers() {
+	async function loadTriggers() {
 		$triggersCount = await FlowService.getTriggersCountOfFlow({
 			workspace: $workspaceStore!,
 			path: initialPath
 		})
-
-		// Initialize triggers using utility function
-		await triggersState.fetchTriggers(
-			triggersCount,
-			$workspaceStore,
-			initialPath,
-			true,
-			$primaryScheduleStore,
-			$userStore
-		)
-
-		if (savedFlow && savedFlow.draft) {
-			savedFlow = filterDraftTriggers(savedFlow, triggersState) as FlowWithDraftAndDraftTriggers
+		if ($primaryScheduleStore && $triggersCount.primary_schedule == undefined) {
+			$triggersCount = {
+				...($triggersCount ?? {}),
+				schedule_count: ($triggersCount.schedule_count ?? 0) + 1,
+				primary_schedule: {
+					schedule: $primaryScheduleStore.cron
+				}
+			}
 		}
 	}
 
@@ -854,6 +871,16 @@
 				}
 			}
 
+			if (module.type === 'trigger') {
+				$primaryScheduleStore = {
+					summary: 'Scheduled poll of flow',
+					args: {},
+					cron: '0 */15 * * *',
+					timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+					enabled: true
+				}
+			}
+
 			const flowModule: FlowModule & {
 				value: RawScript | PathScript
 			} = {
@@ -863,7 +890,7 @@
 						? {
 								expr: 'result == undefined || Array.isArray(result) && result.length == 0',
 								skip_if_stopped: true
-							}
+						  }
 						: undefined,
 				value: {
 					input_transforms: {},
@@ -947,7 +974,7 @@
 					pastModule?.value.type === 'rawscript' || pastModule?.value.type === 'script'
 						? (pastModule as FlowModule & {
 								value: RawScript | PathScript
-							})
+						  })
 						: undefined,
 					isFirstInLoop,
 					abortController
@@ -1067,8 +1094,8 @@
 										? isFirstInLoop
 											? 'flow_input.iter.value'
 											: pastModule
-												? 'results.' + pastModule.id
-												: 'flow_input.' + snakeKey
+											? 'results.' + pastModule.id
+											: 'flow_input.' + snakeKey
 										: 'flow_input.' + snakeKey
 							}
 							$shouldUpdatePropertyType[key] = 'javascript'
@@ -1201,7 +1228,7 @@
 							},
 							disabled: newFlow
 						}
-					]
+				  ]
 				: []),
 			...(customUi?.topBar?.history != false
 				? [
@@ -1215,23 +1242,11 @@
 							icon: FileJson,
 							action: () => yamlEditorDrawer?.openDrawer()
 						}
-					]
+				  ]
 				: [])
 		]
 	}
 
-	function handleDeployTrigger(trigger: Trigger) {
-		const { id, path, type } = trigger
-		//Update the saved flow to remove the draft trigger that is deployed
-		if (savedFlow && savedFlow.draft && savedFlow.draft.draft_triggers) {
-			const newSavedDraftTrigers = savedFlow.draft.draft_triggers.filter(
-				(t) => t.id !== id || t.path !== path || t.type !== type
-			)
-			savedFlow.draft.draft_triggers =
-				newSavedDraftTrigers.length > 0 ? newSavedDraftTrigers : undefined
-		}
-	}
-
 	let flowPreviewButtons: FlowPreviewButtons
 </script>
 
@@ -1248,16 +1263,6 @@
 	currentValue={$flowStore}
 />
 
-<DraftTriggersConfirmationModal
-	bind:open={draftTriggersModalOpen}
-	draftTriggers={triggersState.triggers.filter((t) => t.draftConfig)}
-	isFlow={true}
-	on:canceled={() => {
-		draftTriggersModalOpen = false
-	}}
-	on:confirmed={handleDraftTriggersConfirmed}
-/>
-
 {#key renderCount}
 	{#if !$userStore?.operator}
 		<FlowCopilotDrawer {getHubCompletions} {genFlow} bind:flowCopilotMode />
@@ -1327,9 +1332,7 @@
 				</div>
 
 				<div class="gap-4 flex-row hidden md:flex w-full max-w-md">
-					{#if triggersState.triggers?.some((t) => t.type === 'schedule')}
-						{@const primaryScheduleIndex = triggersState.triggers.findIndex((t) => t.isPrimary)}
-						{@const scheduleIndex = triggersState.triggers.findIndex((t) => t.type === 'schedule')}
+					{#if $primaryScheduleStore != undefined ? $primaryScheduleStore && $primaryScheduleStore?.enabled : $triggersCount?.primary_schedule}
 						<Button
 							btnClasses="hidden lg:inline-flex"
 							startIcon={{ icon: Calendar }}
@@ -1338,15 +1341,14 @@
 							size="xs"
 							on:click={async () => {
 								select('triggers')
-								const selected = primaryScheduleIndex ?? scheduleIndex
-								if (selected) {
-									triggersState.selectedTriggerIndex = selected
-								}
+								selectTrigger('schedules')
 							}}
 						>
-							{triggersState.triggers[primaryScheduleIndex]?.draftConfig?.schedule ??
-								triggersState.triggers[primaryScheduleIndex]?.lightConfig?.schedule ??
-								''}
+							{$primaryScheduleStore != undefined
+								? $primaryScheduleStore
+									? $primaryScheduleStore?.cron
+									: ''
+								: $triggersCount?.primary_schedule?.schedule}
 						</Button>
 					{/if}
 
@@ -1407,16 +1409,12 @@
 
 								await syncWithDeployed()
 
-								const currentDraftTriggers = structuredClone(
-									triggersState.getDraftTriggersSnapshot()
-								)
-
 								diffDrawer?.openDrawer()
 								diffDrawer?.setDiff({
 									mode: 'normal',
 									deployed: deployedValue ?? savedFlow,
-									draft: savedFlow?.draft,
-									current: { ...$flowStore, path: $pathStore, draft_triggers: currentDraftTriggers }
+									draft: savedFlow['draft'],
+									current: { ...$flowStore, path: $pathStore }
 								})
 							}}
 							disabled={!savedFlow}
@@ -1439,7 +1437,7 @@
 					<FlowPreviewButtons
 						on:openTriggers={(e) => {
 							select('triggers')
-							handleSelectTriggerFromKind(triggersState, triggersCount, initialPath, e.detail.kind)
+							selectTrigger(e.detail.kind)
 							captureOn.set(true)
 							showCaptureHint.set(true)
 						}}
@@ -1491,7 +1489,6 @@
 						flowPreviewButtons?.openPreview(true)
 					}}
 					{savedFlow}
-					onDeployTrigger={handleDeployTrigger}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>
diff --git a/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte b/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
index 7250a906c8..bdfd880cf2 100644
--- a/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
+++ b/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
@@ -7,22 +7,25 @@
 	import TagsToListenTo from './TagsToListenTo.svelte'
 	import { enterpriseLicense, superadmin } from '$lib/stores'
 	import CollapseLink from './CollapseLink.svelte'
+	import AgentWorkerExtraBehavior from './AgentWorkerExtraBehavior.svelte'
 
-	export let customTags: string[] | undefined
-	let selectedTags: string[] = !$enterpriseLicense ? ['agent_test'] : []
+	type Props = {
+		customTags: string[] | undefined
+	}
+	let { customTags = $bindable() }: Props = $props()
+	let selectedTags: string[] = $state(!$enterpriseLicense ? ['agent_test'] : [])
+	let workerGroup: string = $state('agent')
+	let token: string = $state('')
 
-	let workerGroup: string = 'agent'
+	let suffix: string | undefined = $state(undefined)
 
-	let token: string = ''
-
-	$: selectedTags && selectedTags.length > 0 && $superadmin && workerGroup && refreshToken()
-
-	async function refreshToken() {
+	async function refreshToken(workerGroup: string, selectedTags: string[], suffix?: string) {
 		try {
 			const newToken = await AgentWorkersService.createAgentToken({
 				requestBody: {
 					worker_group: workerGroup,
 					tags: selectedTags,
+					suffix,
 					exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 365 * 3 // 3 years
 				}
 			})
@@ -32,6 +35,12 @@
 			sendUserToast('Error creating agent token: ' + error.toString(), true)
 		}
 	}
+
+	$effect(() => {
+		if (selectedTags.length > 0 && $superadmin) {
+			refreshToken(workerGroup, selectedTags, suffix)
+		}
+	})
 </script>
 
 <div class="flex flex-col gap-y-4">
@@ -55,64 +64,84 @@
 		{/if}
 		<TagsToListenTo disabled={!$enterpriseLicense} bind:worker_tags={selectedTags} {customTags} />
 	</Section>
+
+	<Section label="Extra behavior" headless eeOnly>
+		{#if !$enterpriseLicense}
+			<div class="text-sm text-secondary mb-2 max-w-md">
+				Agent workers are only available in the enterprise edition. For evaluation purposes, you can
+				only use the tag `agent_test` tag and it is limited to 100 jobs.
+			</div>
+		{/if}
+		<AgentWorkerExtraBehavior bind:suffix />
+	</Section>
 	<Section label="Generated JWT token" primary>
-		<div class="relative max-w-md">
+		<div class="relative max-w-md group">
+			<!-- svelte-ignore event_directive_deprecated -->
 			<input
-				on:click|preventDefault|stopPropagation|capture={() => {
-					navigator.clipboard.writeText(token)
-					sendUserToast('Copied to clipboard')
+				on:click|preventDefault|stopPropagation={() => {
+					if (token) {
+						navigator.clipboard.writeText(token)
+						sendUserToast('Copied to clipboard')
+					}
 				}}
-				placeholder="Select tags to generate a jwt token"
+				placeholder="Select tags to generate a JWT token"
 				type="text"
 				disabled
 				value={token}
-				class="pr-8 text-sm text-secondary"
+				class="w-full pr-10 pl-3 py-2 text-sm text-gray-600 bg-gray-50 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition truncate"
 			/>
+
+			<!-- svelte-ignore event_directive_deprecated -->
 			<button
-				class="absolute right-2 top-1/2 -translate-y-1/2 text-primary"
+				class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 group-hover:text-blue-600 hover:scale-105 transition"
+				aria-label="Copy token to clipboard"
 				on:click|preventDefault|stopPropagation={() => {
-					navigator.clipboard.writeText(token)
-					sendUserToast('Copied to clipboard')
+					if (token) {
+						navigator.clipboard.writeText(token)
+						sendUserToast('Copied to clipboard')
+					}
 				}}
 			>
-				<Copy size={16} />
+				<Copy size={18} />
 			</button>
 		</div>
 
-		<div class="text-sm text-secondary mt-2 mb-12 max-w-md">
-			Pass the env variables:
-			<ul class="my-1">
-				<li>MODE=agent</li>
-				<li>AGENT_TOKEN={'"<token above>"'}</li>
-				<li>BASE_INTERNAL_URL={'"<base internal url>"'}</li>
+		<div class="flex flex-col gap-2 text-sm mt-3 leading-relaxed">
+			Set the following environment variables:
+			<ul class="list-disc list-inside mt-1">
+				<li><code>MODE=agent</code></li>
+				<li><code>AGENT_TOKEN=&lt;token&gt;</code></li>
+				<li><code>BASE_INTERNAL_URL=&lt;base url&gt;</code></li>
 			</ul>
-			to a worker to have it act as an HTTP agent worker. INIT_SCRIPT, if needed, must be passed as an
-			env variable.
-
-			<p class="mt-4">
-				Remember to have at least one normal worker that listens to the tags `flow` and `dependency`
-				(or `flow-$workspace` and `dependency-$workspace` if using workspace specific default tags)
-				to have flow and dependency job being runnable as agent workers can't run dependency jobs
-				nor can run the flow state machine (but can run the subjobs within them).
+			<p class="text-sm leading-relaxed">
+				to a worker to have it act as an HTTP agent worker.
+				<code>INIT_SCRIPT</code>, if needed, must be passed as an env variable.
 			</p>
+			<Alert type="warning" size="sm" title="Agent Worker Limitations">
+				Ensure at least one normal worker is running and listening to the tags
+				<code>flow</code> and <code>dependency</code>
+				(or <code>flow-&lt;workspace&gt;</code> and <code>dependency-&lt;workspace&gt;</code> if
+				using workspace-specific default tags), because agent workers
+				<strong>cannot run dependency jobs</strong>
+				nor execute the
+				<strong>flow state machine</strong>. They can, however, run subjobs within flows.
+			</Alert>
+			<CollapseLink text="Automate JWT token generation" small>
+				<div class="text-xs mt-2">
+					Use the following API endpoint with a superadmin bearer token:
+					<code class="block mt-1 mb-2">POST /api/agent_workers/create_agent_token</code>
+					<pre class=" p-2 rounded-lg text-xs overflow-auto">
+	<code
+							>{`
+	  "worker_group": "agent",
+	  "tags": ["tag1", "tag2"],
+	  "exp": 1717334400
+	`}</code
+						>
+					</pre>
+					The JSON response will contain the generated JWT token.
+				</div>
+			</CollapseLink>
 		</div>
-
-		<CollapseLink text="Automate JWT token generation" small>
-			<div class="text-xs text-secondary">
-				Use the following api endpoint with a superadmin bearer token:
-				<code class="text-primary"> POST /api/agent_workers/create_agent_token </code>
-				with body:
-				<pre>
-			<code class="text-primary">
-{`{
-	"worker_group": "agent",
-	"tags": ["tag1", "tag2"],
-	"exp": 1717334400 // 3 years from now
-}`}
-					</code>
-				</pre>
-				JSON response will be the JWT token.
-			</div>
-		</CollapseLink>
 	</Section>
 </div>
diff --git a/frontend/src/lib/components/Label.svelte b/frontend/src/lib/components/Label.svelte
index 30b8b75aca..9f60433442 100644
--- a/frontend/src/lib/components/Label.svelte
+++ b/frontend/src/lib/components/Label.svelte
@@ -7,15 +7,13 @@
 	export let disabled = false
 	export let headless = false
 	export let required = false
-	export let headerClass = ''
 </script>
 
 <div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
 	<div class="flex flex-row justify-between items-center w-full">
 		{#if !headless}
-			<div class={twMerge('flex flex-row items-center gap-2', headerClass)}>
-				<span
-					class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6 whitespace-nowrap"
+			<div class="flex flex-row items-center gap-2">
+				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6"
 					>{label}
 					{#if required}
 						<Required required={true} />
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 994df893ff..08af2df548 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -35,7 +35,6 @@
 	import { random_adj } from './random_positive_adjetive'
 	import { Eye, Folder, Loader2, Plus, SearchCode, User } from 'lucide-svelte'
 	import Tooltip from './Tooltip.svelte'
-	import { tick } from 'svelte'
 
 	type PathKind =
 		| 'resource'
@@ -65,7 +64,6 @@
 	export let dirty = false
 	export let kind: PathKind
 	export let hideUser: boolean = false
-	export let disableEditing = false
 
 	let inputP: HTMLInputElement | undefined = undefined
 
@@ -302,8 +300,7 @@
 		}
 	}
 
-	async function initPath() {
-		await tick()
+	function initPath() {
 		if (path != undefined && path != '') {
 			meta = pathToMeta(path, hideUser)
 			onMetaChange()
@@ -428,12 +425,11 @@
 								}
 							}
 						}}
-						disabled={disabled || disableEditing}
 						let:item
 					>
 						<ToggleButton
 							icon={User}
-							disabled={disabled || disableEditing}
+							{disabled}
 							light
 							size="xs"
 							value="user"
@@ -444,7 +440,7 @@
 						<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
 						<ToggleButton
 							icon={Folder}
-							disabled={disabled || disableEditing}
+							{disabled}
 							light
 							size="xs"
 							value="folder"
@@ -466,20 +462,14 @@
 							type="text"
 							bind:value={meta.owner}
 							placeholder={$userStore?.username ?? ''}
-							disabled={disabled ||
-								!($superadmin || ($userStore?.is_admin ?? false)) ||
-								disableEditing}
+							disabled={disabled || !($superadmin || ($userStore?.is_admin ?? false))}
 							on:keydown={setDirty}
 						/>
 					</label>
 				{:else if meta.ownerKind === 'folder'}
 					<label class="block grow w-48">
 						<div class="flex flex-row items-center gap-1 w-full">
-							<select
-								class="grow w-full"
-								disabled={disabled || disableEditing}
-								bind:value={meta.owner}
-							>
+							<select class="grow w-full" {disabled} bind:value={meta.owner}>
 								{#if folders?.length == 0}
 									<option disabled>No folders</option>
 								{/if}
@@ -498,19 +488,17 @@
 								iconOnly
 								startIcon={{ icon: Eye }}
 							/>
-							{#if !disableEditing}
-								<Button
-									title="New folder"
-									btnClasses="!p-1.5"
-									variant="border"
-									color="light"
-									size="xs"
-									{disabled}
-									on:click={newFolder.openDrawer}
-									iconOnly
-									startIcon={{ icon: Plus }}
-								/>
-							{/if}
+							<Button
+								title="New folder"
+								btnClasses="!p-1.5"
+								variant="border"
+								color="light"
+								size="xs"
+								{disabled}
+								on:click={newFolder.openDrawer}
+								iconOnly
+								startIcon={{ icon: Plus }}
+							/>
 						</div>
 					</label>
 				{/if}
@@ -519,7 +507,7 @@
 			<label class="block grow w-full max-w-md">
 				<!-- svelte-ignore a11y-autofocus -->
 				<input
-					disabled={disabled || disableEditing}
+					{disabled}
 					type="text"
 					id="path"
 					{autofocus}
diff --git a/frontend/src/lib/components/PrimarySchedule.svelte b/frontend/src/lib/components/PrimarySchedule.svelte
new file mode 100644
index 0000000000..aed861e8e0
--- /dev/null
+++ b/frontend/src/lib/components/PrimarySchedule.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { Badge, Button } from './common'
+	import { sendUserToast } from '$lib/toast'
+	import { base } from '$lib/base'
+	import Toggle from './Toggle.svelte'
+	import { ListOrdered, PenBox } from 'lucide-svelte'
+	import JobArgs from './JobArgs.svelte'
+	import Tooltip from './Tooltip.svelte'
+	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
+	import { type Schedule } from '$lib/gen'
+
+	export let schedule: any
+	export let can_write: boolean
+	export let path: string
+	export let isFlow: boolean
+	export let scheduleEditor: ScheduleEditor
+	export let setScheduleEnabled: (path: string, enabled: boolean) => void
+
+	$: schedule = typeof schedule === 'boolean' ? undefined : (schedule as Schedule | undefined)
+</script>
+
+<div class="flex flex-col gap-2 grow w-full">
+	<div class="grid grid-cols-3 w-full">
+		<div class="flex justify-start">
+			<Badge color="indigo" small>
+				Primary&nbsp;
+				<Tooltip light>
+					Share the same path as the script or flow it is attached to and its path get renamed
+					whenever the source path is renamed
+				</Tooltip>
+			</Badge>
+		</div>
+		<div class="flex justify-center">
+			<div class="flex flex-row gap-2 items-center">
+				<input
+					size="9"
+					class="!text-xs !h-6 !text-primary"
+					type="text"
+					id="cron-schedule"
+					name="cron-schedule"
+					placeholder="*/30 * * * *"
+					value={schedule?.schedule ?? ''}
+					disabled={true}
+				/>
+				<Toggle
+					checked={schedule?.enabled ?? false}
+					on:change={(e) => {
+						if (can_write) {
+							setScheduleEnabled(path, e.detail)
+						} else {
+							sendUserToast('not enough permission', true)
+						}
+					}}
+					options={{
+						right: 'On'
+					}}
+					size="xs"
+					textClass="text-primary font-normal text-xs"
+				/>
+			</div>
+		</div>
+		<div class="flex justify-end">
+			<div class="flex flex-row gap-2 items-center">
+				<Button size={'xs'} variant="border" color="light" href={`${base}/runs/${path}`}>
+					<span>Runs</span>
+					<ListOrdered size={14} />
+				</Button>
+				<Button
+					size="xs"
+					color="dark"
+					on:click={() => scheduleEditor?.openEdit(path ?? '', isFlow)}
+				>
+					<PenBox size={14} />
+				</Button>
+			</div>
+		</div>
+	</div>
+
+	{#if Object.keys(schedule?.args ?? {}).length > 0}
+		<div class="">
+			<JobArgs args={schedule?.args ?? {}} />
+		</div>
+	{:else}
+		<div class="text-xs text-tertiary"> No arguments </div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/RunPageSchedules.svelte b/frontend/src/lib/components/RunPageSchedules.svelte
new file mode 100644
index 0000000000..8597dc97bd
--- /dev/null
+++ b/frontend/src/lib/components/RunPageSchedules.svelte
@@ -0,0 +1,245 @@
+<script lang="ts">
+	import { Button } from './common'
+	import { workspaceStore } from '$lib/stores'
+	import { ScheduleService, type Schedule } from '$lib/gen'
+	import { Calendar, Trash, Save } from 'lucide-svelte'
+	import Skeleton from './common/skeleton/Skeleton.svelte'
+	import Label from '$lib/components/Label.svelte'
+	import { getContext } from 'svelte'
+	import type { ScheduleTrigger, TriggerContext } from './triggers'
+	import CronInput from './CronInput.svelte'
+	import SchemaForm from './SchemaForm.svelte'
+	import { emptyString, sendUserToast } from '$lib/utils'
+	import Toggle from './Toggle.svelte'
+	import { loadSchedules, saveSchedule } from './flows/scheduleUtils'
+	import { type Writable, writable } from 'svelte/store'
+	import Description from '$lib/components/Description.svelte'
+	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
+
+	export let schema: any
+	export let isFlow: boolean
+	export let path: string
+	export let can_write: boolean
+	export let newItem: boolean = false
+
+	const { primarySchedule, triggersCount } = getContext<TriggerContext>('TriggerContext')
+
+	let scheduleEditor: ScheduleEditor
+	let schedules: Writable<Schedule[] | undefined> = writable(undefined)
+	let initialPrimarySchedule: Writable<ScheduleTrigger | false | undefined> = writable(undefined)
+
+	async function updateSchedules(forceRefresh: boolean) {
+		const loadPrimarySchedule = true
+		loadSchedules(
+			forceRefresh,
+			path,
+			isFlow,
+			schedules,
+			primarySchedule,
+			initialPrimarySchedule,
+			$workspaceStore ?? '',
+			triggersCount,
+			loadPrimarySchedule
+		)
+	}
+
+	$: updateSchedules(false) || path
+
+	async function save() {
+		await saveSchedule(path, newItem, $workspaceStore ?? '', primarySchedule, isFlow)
+		updateSchedules(true)
+	}
+</script>
+
+<div class="flex flex-col gap-4 w-full">
+	<Description link="https://www.windmill.dev/docs/core_concepts/scheduling">
+		Run scripts and flows automatically on a recurring basis using cron expressions. Each script or
+		flow can have multiple schedules, with one designated as primary.
+	</Description>
+	<ScheduleEditor
+		on:update={() => {
+			updateSchedules(true)
+		}}
+		bind:this={scheduleEditor}
+	/>
+
+	{#if $primarySchedule == undefined}
+		<Skeleton layout={[[12]]} />
+	{:else if $primarySchedule}
+		<div class="w-full flex flex-col mb-4">
+			{#if can_write}
+				<div class="w-full flex-row-reverse flex mb-2">
+					<div class="flex flex-row gap-4">
+						<Button
+							on:click={() => {
+								$primarySchedule = false
+								$triggersCount = {
+									...($triggersCount ?? {}),
+									schedule_count: ($triggersCount?.schedule_count ?? 1) - 1,
+									primary_schedule: undefined
+								}
+							}}
+							variant="border"
+							color="light"
+							size="xs"
+							startIcon={{ icon: Trash }}
+						/>
+						{#if initialPrimarySchedule && !newItem}
+							<Toggle
+								disabled={emptyString($primarySchedule.cron)}
+								bind:checked={$primarySchedule.enabled}
+								options={{
+									right: 'Enabled'
+								}}
+								on:change={async (e) => {
+									if (!newItem && $initialPrimarySchedule != false) {
+										await ScheduleService.setScheduleEnabled({
+											path: path,
+											workspace: $workspaceStore ?? '',
+											requestBody: { enabled: e.detail }
+										})
+
+										sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${path}`)
+									}
+								}}
+							/>
+						{/if}
+
+						{#if !newItem}
+							<Button
+								on:click={save}
+								color="dark"
+								size="sm"
+								startIcon={{ icon: Save }}
+								disabled={JSON.stringify({ ...$primarySchedule, enabled: true }) ==
+									JSON.stringify({ ...initialPrimarySchedule, enabled: true })}
+								>Apply changes now</Button
+							>
+						{:else}
+							<div class="text-sm text-secondary mt-1 text-center"
+								>Deployed automatically with {isFlow ? 'flow' : 'script'}</div
+							>
+						{/if}
+					</div>
+				</div>
+			{/if}
+
+			<!-- svelte-ignore a11y-autofocus -->
+			<div class="mt-5">
+				<Label label="Summary" class="font-semibold" primary>
+					<input
+						autofocus
+						type="text"
+						placeholder="Short summary to be displayed when listed"
+						class="text-sm w-full"
+						bind:value={$primarySchedule.summary}
+					/>
+				</Label>
+			</div>
+		</div>
+		<CronInput bind:schedule={$primarySchedule.cron} bind:timezone={$primarySchedule.timezone} />
+		<SchemaForm onlyMaskPassword {schema} bind:args={$primarySchedule.args} />
+		{#if emptyString($primarySchedule.cron)}
+			<p class="text-xs text-tertiary mt-10">Define a schedule frequency first</p>
+		{/if}
+
+		{#if $initialPrimarySchedule != false && !newItem}
+			<div class="flex">
+				<Button size="xs" color="light" on:click={() => scheduleEditor?.openEdit(path, isFlow)}
+					>Advanced</Button
+				>
+			</div>
+		{/if}
+	{:else}
+		<div class="flex flex-row gap-4 mt-2">
+			<div class="flex items-center">
+				<Button
+					on:click={() => {
+						$primarySchedule = {
+							summary: '',
+							args: {},
+							cron: '0 0 */1 * * *',
+							timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+							enabled: true
+						}
+						$triggersCount = {
+							...($triggersCount ?? {}),
+							schedule_count: ($triggersCount?.schedule_count ?? 0) + 1,
+							primary_schedule: { schedule: $primarySchedule.cron }
+						}
+					}}
+					variant="contained"
+					color="dark"
+					size="sm"
+					startIcon={{ icon: Calendar }}
+				>
+					Set primary schedule
+				</Button>
+			</div>
+			{#if $initialPrimarySchedule != undefined && $initialPrimarySchedule != false && !newItem}
+				<Button on:click={save} color="dark" size="md" startIcon={{ icon: Save }}>
+					Apply changes now
+				</Button>
+			{:else}
+				<div class="text-sm text-center text-secondary mt-2"
+					>Deployed automatically with {isFlow ? 'flow' : 'script'}</div
+				>
+			{/if}
+		</div>
+
+		<Label label="Summary" class="font-semibold" primary>
+			<input
+				type="text"
+				disabled
+				placeholder="Short summary to be displayed when listed"
+				class="text-sm w-full"
+			/>
+		</Label>
+		<CronInput schedule={''} disabled timezone={Intl.DateTimeFormat().resolvedOptions().timeZone} />
+
+		<SchemaForm disabled {schema} />
+	{/if}
+
+	{#if !newItem}
+		<div class="mt-10"></div>
+		{#if $primarySchedule}
+			<Button
+				on:click={() => scheduleEditor?.openNew(isFlow, path)}
+				variant="border"
+				color="light"
+				size="xs"
+				startIcon={{ icon: Calendar }}
+			>
+				New schedule
+			</Button>
+		{/if}
+
+		<Label label="Other schedules">
+			{#if $schedules}
+				{#if $schedules.length == 0 || $schedules == undefined}
+					<div class="text-xs text-tertiary"> No other schedules </div>
+				{:else}
+					<div class="flex flex-col divide-y">
+						{#each $schedules as schedule (schedule.path)}
+							<div class="grid grid-cols-6 text-xs items-center py-2">
+								<div class="col-span-3 truncate">{schedule.path}</div>
+								<div class="col-span-2 flex flex-row gap-4 flex-nowrap">
+									<div>{schedule.schedule}</div>
+									<div>{schedule.enabled ? 'on' : 'off'}</div>
+								</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => scheduleEditor?.openEdit(schedule.path, isFlow)}
+										class="px-2">Edit</button
+									>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			{:else}
+				<Skeleton layout={[[8]]} />
+			{/if}
+		</Label>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/SchedulePanel.svelte b/frontend/src/lib/components/SchedulePanel.svelte
deleted file mode 100644
index b6240534b4..0000000000
--- a/frontend/src/lib/components/SchedulePanel.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-	import ScheduleEditorInner from '$lib/components/triggers/schedules/ScheduleEditorInner.svelte'
-	import Description from '$lib/components/Description.svelte'
-	import { onMount } from 'svelte'
-	let scheduleEditor = $state<ScheduleEditorInner | null>(null)
-	let {
-		selectedTrigger,
-		isFlow,
-		path,
-		defaultValues = undefined,
-		schema,
-		customLabel = undefined,
-		...restProps
-	} = $props()
-
-	function openScheduleEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			scheduleEditor?.openNew(isFlow, path, defaultValues)
-		} else {
-			scheduleEditor?.openEdit(selectedTrigger.path, isFlow, defaultValues)
-		}
-	}
-
-	onMount(() => {
-		selectedTrigger?.type === 'schedule' &&
-			scheduleEditor &&
-			openScheduleEditor(isFlow, selectedTrigger.isDraft ?? false)
-	})
-</script>
-
-<ScheduleEditorInner
-	useDrawer={false}
-	bind:this={scheduleEditor}
-	hideTarget
-	allowDraft
-	hasDraft={!!selectedTrigger.draftConfig}
-	isDraftOnly={selectedTrigger.isDraft}
-	primary={selectedTrigger.isPrimary}
-	draftSchema={schema}
-	{customLabel}
-	{...restProps}
->
-	{#snippet docDescription()}
-		<div class="flex flex-col gap-2 pb-4">
-			<Description link="https://www.windmill.dev/docs/core_concepts/scheduling">
-				Run scripts and flows automatically on a recurring basis using cron expressions.
-			</Description>
-		</div>
-	{/snippet}
-</ScheduleEditorInner>
-<!-- hideTarget
-	hidePath
-    {header} -->
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 5fa096f06e..6908cf66f3 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -4,6 +4,7 @@
 		type NewScript,
 		ScriptService,
 		type NewScriptWithDraft,
+		ScheduleService,
 		type Script,
 		type TriggersCount,
 		PostgresTriggerService,
@@ -11,18 +12,13 @@
 	} from '$lib/gen'
 	import { inferArgs } from '$lib/infer'
 	import { initialCode } from '$lib/script_helpers'
-	import {
-		defaultScripts,
-		enterpriseLicense,
-		usedTriggerKinds,
-		userStore,
-		workspaceStore
-	} from '$lib/stores'
+	import { defaultScripts, enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
 	import {
 		cleanValueProperties,
 		emptySchema,
 		emptyString,
 		encodeState,
+		formatCron,
 		generateRandomString,
 		orderedJsonStringify,
 		replaceFalseWithUndefined,
@@ -72,7 +68,7 @@
 	import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui'
 	import DeployOverrideConfirmationModal from '$lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte'
 	import TriggersEditor from './triggers/TriggersEditor.svelte'
-	import type { ScheduleTrigger, TriggerContext } from './triggers'
+	import type { ScheduleTrigger, TriggerContext, TriggerKind } from './triggers'
 	import {
 		TS_PREPROCESSOR_MODULE_CODE,
 		TS_PREPROCESSOR_SCRIPT_INTRO,
@@ -83,17 +79,8 @@
 	import type { SavedAndModifiedValue } from './common/confirmationModal/unsavedTypes'
 	import type { ScriptBuilderFunctionExports } from './scriptBuilder'
 	import DeployButton from './DeployButton.svelte'
-	import {
-		type NewScriptWithDraftAndDraftTriggers,
-		type Trigger,
-		deployTriggers,
-		filterDraftTriggers,
-		handleSelectTriggerFromKind
-	} from './triggers/utils'
-	import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte'
-	import { Triggers } from './triggers/triggers.svelte'
 
-	export let script: NewScript & { draft_triggers?: Trigger[] }
+	export let script: NewScript
 	export let fullyLoaded: boolean = true
 	export let initialPath: string = ''
 	export let template: 'docker' | 'bunnative' | 'script' = 'script'
@@ -102,7 +89,7 @@
 	export let showMeta: boolean = false
 	export let neverShowMeta: boolean = false
 	export let diffDrawer: DiffDrawer | undefined = undefined
-	export let savedScript: NewScriptWithDraftAndDraftTriggers | undefined = undefined
+	export let savedScript: NewScriptWithDraft | undefined = undefined
 	export let searchParams: URLSearchParams = new URLSearchParams()
 	export let disableHistoryChange = false
 	export let replaceStateFn: (url: string) => void = (url) =>
@@ -115,10 +102,7 @@
 	export function getInitialAndModifiedValues(): SavedAndModifiedValue {
 		return {
 			savedValue: savedScript,
-			modifiedValue: {
-				...script,
-				draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
-			}
+			modifiedValue: script
 		}
 	}
 
@@ -150,38 +134,20 @@
 	let scriptEditor: ScriptEditor | undefined = undefined
 	let captureTable: CaptureTable | undefined = undefined
 
-	// Draft triggers confirmation modal
-	let draftTriggersModalOpen = false
-	let confirmDeploymentCallback: (triggersToDeploy: Trigger[]) => void = () => {}
-
-	async function handleDraftTriggersConfirmed(event: CustomEvent<{ selectedTriggers: Trigger[] }>) {
-		const { selectedTriggers } = event.detail
-		// Continue with saving the flow
-		draftTriggersModalOpen = false
-		confirmDeploymentCallback(selectedTriggers)
-	}
-
-	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule) // keep for legacy
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule)
 	const triggersCount = writable<TriggersCount | undefined>(
 		savedPrimarySchedule
 			? { schedule_count: 1, primary_schedule: { schedule: savedPrimarySchedule.cron } }
 			: undefined
 	)
 	const simplifiedPoll = writable(false)
+	const selectedTriggerStore = writable<TriggerKind>('webhooks')
 
 	export function setPrimarySchedule(schedule: ScheduleTrigger | undefined | false) {
 		primaryScheduleStore.set(schedule)
 		loadTriggers()
 	}
 
-	export function setDraftTriggers(triggers: Trigger[] | undefined) {
-		triggersState.setTriggers([
-			...(triggers ?? []),
-			...triggersState.triggers.filter((t) => !t.draftConfig)
-		])
-		loadTriggers()
-	}
-
 	const dispatch = createEventDispatcher()
 
 	$: initialPath != '' && loadTriggers()
@@ -210,42 +176,29 @@
 			workspace: $workspaceStore!,
 			path: initialPath
 		})
-
-		await triggersState.fetchTriggers(
-			triggersCount,
-			$workspaceStore,
-			initialPath,
-			false,
-			$primaryScheduleStore,
-			$userStore
-		)
-
-		if (savedScript && savedScript.draft && savedScript.draft.draft_triggers) {
-			savedScript = filterDraftTriggers(
-				savedScript,
-				triggersState
-			) as NewScriptWithDraftAndDraftTriggers
+		if ($primaryScheduleStore && $triggersCount.primary_schedule == undefined) {
+			$triggersCount = {
+				...($triggersCount ?? {}),
+				schedule_count: ($triggersCount.schedule_count ?? 0) + 1,
+				primary_schedule: {
+					schedule: $primaryScheduleStore.cron
+				}
+			}
 		}
 	}
 
-	// Add triggers context store
-	const triggersState = new Triggers(
-		[
-			{ type: 'webhook', path: '', isDraft: false },
-			{ type: 'email', path: '', isDraft: false },
-			...(script.draft_triggers ?? [])
-		],
-		undefined,
-		saveSessionDraft
-	)
+	const triggerDefaultValuesStore = writable<Record<string, any> | undefined>(undefined)
 
 	const captureOn = writable<boolean | undefined>(undefined)
 	const showCaptureHint = writable<boolean | undefined>(undefined)
 	setContext<TriggerContext>('TriggerContext', {
+		selectedTrigger: selectedTriggerStore,
+		primarySchedule: primaryScheduleStore,
 		triggersCount,
 		simplifiedPoll,
-		showCaptureHint: showCaptureHint,
-		triggersState
+		defaultValues: triggerDefaultValuesStore,
+		captureOn: captureOn,
+		showCaptureHint: showCaptureHint
 	})
 
 	const enterpriseLangs = ['bigquery', 'snowflake', 'mssql', 'oracledb']
@@ -321,26 +274,8 @@
 		})
 	}
 
-	$: !disableHistoryChange && encodeScriptState(script)
-
-	function encodeScriptState(script: NewScript) {
-		replaceStateFn(
-			'#' +
-				encodeState({
-					...script,
-					draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
-				})
-		)
-	}
-
-	let timeout: NodeJS.Timeout | undefined = undefined
-	function saveSessionDraft() {
-		timeout && clearTimeout(timeout)
-		timeout = setTimeout(() => {
-			encodeScriptState(script)
-		}, 500)
-	}
-
+	$: !disableHistoryChange &&
+		replaceStateFn('#' + encodeState({ ...script, primarySchedule: $primaryScheduleStore }))
 	if (script.content == '') {
 		initContent(script.language, script.kind, template)
 	}
@@ -382,6 +317,31 @@
 		}
 	}
 
+	async function createSchedule(path: string) {
+		if (!$primaryScheduleStore) {
+			return
+		}
+		const { cron, timezone, args, enabled, summary } = $primaryScheduleStore
+
+		try {
+			await ScheduleService.createSchedule({
+				workspace: $workspaceStore!,
+				requestBody: {
+					path: path,
+					schedule: formatCron(cron),
+					timezone,
+					script_path: path,
+					is_flow: false,
+					args,
+					enabled,
+					summary
+				}
+			})
+		} catch (err) {
+			sendUserToast(`The primary schedule could not be created: ${err}`, true)
+		}
+	}
+
 	async function handleEditScript(stay: boolean, deployMsg?: string): Promise<void> {
 		// Fetch latest version and fetch entire script after if needed
 		let actual_parent_hash: string | undefined = undefined
@@ -459,21 +419,8 @@
 	async function editScript(
 		stay: boolean,
 		parentHash: string,
-		deploymentMsg?: string,
-		triggersToDeploy?: Trigger[]
+		deploymentMsg?: string
 	): Promise<void> {
-		if (!triggersToDeploy) {
-			// Check if there are draft triggers that need confirmation
-			const draftTriggers = triggersState.triggers.filter((trigger) => trigger.draftConfig)
-			if (draftTriggers.length > 0) {
-				draftTriggersModalOpen = true
-				confirmDeploymentCallback = async (triggersToDeploy: Trigger[]) => {
-					await editScript(stay, parentHash, deploymentMsg, triggersToDeploy)
-				}
-				return
-			}
-		}
-
 		loadingSave = true
 		try {
 			try {
@@ -543,21 +490,55 @@
 				})
 			}
 
-			if (triggersToDeploy) {
-				await deployTriggers(
-					triggersToDeploy,
-					$workspaceStore,
-					!!$userStore?.is_admin || !!$userStore?.is_super_admin,
-					usedTriggerKinds,
-					script.path,
-					true
-				)
+			const scheduleExists =
+				initialPath != '' &&
+				(await ScheduleService.existsSchedule({
+					workspace: $workspaceStore ?? '',
+					path: script.path
+				}))
+			if ($primaryScheduleStore) {
+				const { enabled, timezone, args, cron, summary } = $primaryScheduleStore
+
+				if (scheduleExists) {
+					const schedule = await ScheduleService.getSchedule({
+						workspace: $workspaceStore ?? '',
+						path: script.path
+					})
+					if (
+						JSON.stringify(schedule.args) != JSON.stringify(args) ||
+						schedule.schedule != cron ||
+						schedule.timezone != timezone ||
+						schedule.summary != summary
+					) {
+						await ScheduleService.updateSchedule({
+							workspace: $workspaceStore ?? '',
+							path: script.path,
+							requestBody: {
+								schedule: formatCron(cron),
+								timezone,
+								args,
+								summary
+							}
+						})
+					}
+					if (enabled != schedule.enabled) {
+						await ScheduleService.setScheduleEnabled({
+							workspace: $workspaceStore ?? '',
+							path: script.path,
+							requestBody: { enabled }
+						})
+					}
+				} else if (enabled) {
+					await createSchedule(script.path)
+				}
+			} else if (scheduleExists && !$triggersCount?.primary_schedule) {
+				await ScheduleService.deleteSchedule({
+					workspace: $workspaceStore ?? '',
+					path: script.path
+				})
 			}
 
-			const { draft_triggers: _, ...newScript } = structuredClone(script)
-			savedScript = structuredClone(newScript) as NewScriptWithDraft
-			triggersState.setTriggers([])
-
+			savedScript = structuredClone(script) as NewScriptWithDraft
 			if (!disableHistoryChange) {
 				history.replaceState(history.state, '', `/scripts/edit/${script.path}`)
 			}
@@ -581,8 +562,7 @@
 
 		if (savedScript) {
 			const draftOrDeployed = cleanValueProperties(savedScript.draft || savedScript)
-			const currentTriggers = structuredClone(triggersState.getDraftTriggersSnapshot())
-			const current = cleanValueProperties({ ...script, draft_triggers: currentTriggers })
+			const current = cleanValueProperties(script)
 			if (!forceSave && orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
 				sendUserToast('No changes detected, ignoring', false, [
 					{
@@ -673,16 +653,12 @@
 					}
 				})
 			}
-			const draftTriggers = triggersState.getDraftTriggersSnapshot()
 			await DraftService.createDraft({
 				workspace: $workspaceStore!,
 				requestBody: {
 					path: initialPath == '' || savedScript?.draft_only ? script.path : initialPath,
 					typ: 'script',
-					value: {
-						...script,
-						draft_triggers: draftTriggers
-					}
+					value: { ...script, primary_schedule: $primaryScheduleStore }
 				}
 			})
 
@@ -690,11 +666,8 @@
 				...(initialPath == '' || savedScript?.draft_only
 					? { ...structuredClone(script), draft_only: true }
 					: savedScript),
-				draft: {
-					...structuredClone(script),
-					draft_triggers: draftTriggers
-				}
-			} as NewScriptWithDraftAndDraftTriggers
+				draft: structuredClone(script)
+			} as NewScriptWithDraft
 
 			let savedAtNewPath = false
 			if (initialPath == '' || (savedScript?.draft_only && script.path !== initialPath)) {
@@ -717,7 +690,7 @@
 
 	function computeDropdownItems(
 		initialPath: string,
-		savedScript: NewScriptWithDraftAndDraftTriggers | undefined,
+		savedScript: NewScriptWithDraft | undefined,
 		diffDrawer: DiffDrawer | undefined
 	) {
 		let dropdownItems: { label: string; onClick: () => void }[] =
@@ -745,19 +718,12 @@
 											}
 											await syncWithDeployed()
 
-											const currentDraftTriggers = structuredClone(
-												triggersState.getDraftTriggersSnapshot()
-											)
-
 											diffDrawer?.openDrawer()
 											diffDrawer?.setDiff({
 												mode: 'normal',
 												deployed: deployedValue ?? savedScript,
 												draft: savedScript['draft'],
-												current: {
-													...script,
-													draft_triggers: currentDraftTriggers
-												}
+												current: script
 											})
 										}
 									}
@@ -833,7 +799,8 @@
 	function openTriggers(ev) {
 		metadataOpen = true
 		selectedTab = 'triggers'
-		handleSelectTriggerFromKind(triggersState, triggersCount, initialPath, ev.detail.kind)
+		selectedTriggerStore.set(ev.detail.kind)
+		triggerDefaultValuesStore.set(ev.detail.config)
 		captureOn.set(true)
 	}
 
@@ -857,18 +824,6 @@
 		}
 		selectedInputTab = 'preprocessor'
 	}
-
-	function handleDeployTrigger(trigger: Trigger) {
-		const { id, path, type } = trigger
-		//Update the saved script to remove the draft trigger that is deployed
-		if (savedScript && savedScript.draft && savedScript.draft.draft_triggers) {
-			const newSavedDraftTrigers = savedScript.draft.draft_triggers.filter(
-				(t) => t.id !== id || t.path !== path || t.type !== type
-			)
-			savedScript.draft.draft_triggers =
-				newSavedDraftTrigers.length > 0 ? newSavedDraftTrigers : undefined
-		}
-	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -882,21 +837,11 @@
 	bind:deployedValue
 	currentValue={script}
 />
-
-<DraftTriggersConfirmationModal
-	bind:open={draftTriggersModalOpen}
-	draftTriggers={triggersState.triggers.filter((t) => t.draftConfig)}
-	on:canceled={() => {
-		draftTriggersModalOpen = false
-	}}
-	on:confirmed={handleDraftTriggersConfirmed}
-/>
-
 {#if !$userStore?.operator}
 	<Drawer
 		placement="right"
 		bind:open={metadataOpen}
-		size={selectedTab === 'ui' || selectedTab === 'triggers' ? '1200px' : '800px'}
+		size={selectedTab === 'ui' ? '1200px' : '800px'}
 	>
 		<DrawerContent noPadding title="Settings" on:close={() => (metadataOpen = false)}>
 			<!-- svelte-ignore a11y-autofocus -->
@@ -1514,30 +1459,27 @@
 									customUi={customUi?.settingsPanel?.metadata?.editableSchemaForm}
 								/>
 							</TabContent>
-							<TabContent value="triggers" class="h-full">
+							<TabContent value="triggers">
 								<TriggersEditor
 									on:applyArgs={applyArgs}
 									on:addPreprocessor={addPreprocessor}
 									on:exitTriggers={() => {
 										captureTable?.loadCaptures(true)
 									}}
-									currentPath={script.path}
+									args={hasPreprocessor && selectedInputTab !== 'preprocessor' ? {} : args}
 									{initialPath}
 									{fakeInitialPath}
+									schema={script.schema}
 									noEditor={true}
-									newItem={initialPath == ''}
 									isFlow={false}
-									{hasPreprocessor}
+									currentPath={script.path}
+									hash={script.parent_hash}
+									newItem={initialPath == ''}
 									canHavePreprocessor={script.language === 'bun' ||
 										script.language === 'deno' ||
 										script.language === 'python3'}
-									args={hasPreprocessor && selectedInputTab !== 'preprocessor' ? {} : args}
-									isDeployed={savedScript && !savedScript?.draft_only}
-									schema={script.schema}
-									hash={script.parent_hash}
-									onDeployTrigger={handleDeployTrigger}
+									{hasPreprocessor}
 								/>
-
 								<!-- <ScriptSchedules {initialPath} schema={script.schema} schedule={scheduleStore} /> -->
 							</TabContent>
 						</div>
@@ -1568,10 +1510,7 @@
 				</div>
 
 				<div class="gap-4 flex">
-					{#if triggersState.triggers?.some((t) => t.type === 'schedule')}
-						{@const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary)}
-						{@const schedule = triggersState.triggers.findIndex((t) => t.type === 'schedule')}
-
+					{#if $primaryScheduleStore != undefined ? $primaryScheduleStore && $primaryScheduleStore?.enabled : $triggersCount?.primary_schedule}
 						<Button
 							btnClasses="hidden lg:inline-flex"
 							startIcon={{ icon: Calendar }}
@@ -1581,12 +1520,14 @@
 							on:click={async () => {
 								metadataOpen = true
 								selectedTab = 'triggers'
-								triggersState.selectedTriggerIndex = primarySchedule ?? schedule
+								$selectedTriggerStore = 'schedules'
 							}}
 						>
-							{triggersState.triggers[primarySchedule]?.draftConfig?.schedule ??
-								triggersState.triggers[primarySchedule]?.lightConfig?.schedule ??
-								''}
+							{$primaryScheduleStore != undefined
+								? $primaryScheduleStore
+									? $primaryScheduleStore?.cron
+									: ''
+								: $triggersCount?.primary_schedule?.schedule}
 						</Button>
 					{/if}
 					{#if customUi?.topBar?.path != false}
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 6423fb9bdb..a7b88704e7 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -94,7 +94,7 @@
 	{/if}
 
 	{#if disabled}
-		<input type="text" value={scriptPath ?? initialPath ?? ''} disabled />
+		<input type="text" value={scriptPath ?? ''} disabled />
 	{:else}
 		<Select
 			value={items?.find((x) => x.value == initialPath)}
diff --git a/frontend/src/lib/components/Section.svelte b/frontend/src/lib/components/Section.svelte
index 1e9e178ecf..a8211960cf 100644
--- a/frontend/src/lib/components/Section.svelte
+++ b/frontend/src/lib/components/Section.svelte
@@ -11,7 +11,6 @@
 	export let eeOnly = false
 	export let small: boolean = false
 	export let wrapperClass: string = ''
-	export let headerClass: string = ''
 
 	export let collapsable: boolean = false
 	export let collapsed: boolean = true
@@ -27,8 +26,7 @@
 				class={twMerge(
 					'font-semibold flex flex-row items-center gap-1',
 					breakAll ? 'break-all' : '',
-					small ? 'text-sm' : 'text-base',
-					headerClass
+					small ? 'text-sm' : 'text-base'
 				)}
 			>
 				{#if collapsable}
diff --git a/frontend/src/lib/components/SqlRepl.svelte b/frontend/src/lib/components/SqlRepl.svelte
index 727334cf1d..e1b7ba8a85 100644
--- a/frontend/src/lib/components/SqlRepl.svelte
+++ b/frontend/src/lib/components/SqlRepl.svelte
@@ -41,7 +41,7 @@
 	import { CornerDownLeft } from 'lucide-svelte'
 	import Button from './common/button/Button.svelte'
 	import Editor from './Editor.svelte'
-	import { runPreviewJobAndPollResult } from './jobs/utils'
+	import { runScriptAndPollResult } from './jobs/utils'
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
 	import { untrack } from 'svelte'
@@ -91,7 +91,7 @@
 					.join(';')
 			}
 
-			let { job, result } = (await runPreviewJobAndPollResult(
+			let { job, result } = (await runScriptAndPollResult(
 				{
 					workspace: $workspaceStore,
 					requestBody: {
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index bbecfae658..955ccd6fde 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -67,7 +67,7 @@
 
 	$: {
 		if (format == 'email') {
-			pattern = '^[\\w-+.]+@([\\w-]+\\.)+[\\w-]{2,63}$'
+			pattern = '^[\\w-+.]+@([\\w-]+\\.)+[\\w-]{2,4}$'
 		}
 	}
 
diff --git a/frontend/src/lib/components/TagsToListenTo.svelte b/frontend/src/lib/components/TagsToListenTo.svelte
index ce56a575e8..c80d12b2bb 100644
--- a/frontend/src/lib/components/TagsToListenTo.svelte
+++ b/frontend/src/lib/components/TagsToListenTo.svelte
@@ -1,47 +1,55 @@
 <script lang="ts">
-	import { X } from 'lucide-svelte'
+	import { X, Plus, Trash } from 'lucide-svelte'
 	import { Button } from './common'
-	import { Plus } from 'lucide-svelte'
 	import { superadmin } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
 	import AutoComplete from 'simple-svelte-autocomplete'
 	import { defaultTags, nativeTags } from './worker_group'
 
 	const dispatch = createEventDispatcher()
-
-	export let worker_tags: string[] = []
-	export let customTags: string[] = []
-	export let disabled = false
-
-	let newTag = ''
-	let createdTags: string[] = []
+	type Props = {
+		worker_tags: string[]
+		customTags: string[] | undefined
+		disabled?: boolean
+	}
+	let {
+		worker_tags = $bindable([]),
+		customTags = $bindable([]),
+		disabled = $bindable(false)
+	}: Props = $props()
+	let newTag = $state('')
+	let createdTags: string[] = $state([])
 </script>
 
-<div class="flex gap-3 gap-y-2 flex-wrap pb-2">
-	{#if worker_tags?.length == 0}
+<div class="flex gap-2 gap-y-2 flex-wrap pb-3">
+	{#if worker_tags?.length === 0}
 		<div class="text-xs text-secondary">No tags selected</div>
 	{/if}
+
 	{#each worker_tags as tag}
-		<div class="flex gap-0.5 items-center"
-			><div class="text-2xs p-1 rounded border text-primary">{tag}</div>
+		<div
+			class="flex items-center gap-1 px-2 py-1 rounded-full border border-primary text-2xs text-primary bg-surface-primary"
+		>
+			<span>{tag}</span>
 			{#if $superadmin && !disabled}
-				<button
-					class={'z-10 rounded-full p-1 duration-200 hover:bg-gray-200'}
-					aria-label="Remove item"
-					on:click|preventDefault|stopPropagation={() => {
-						worker_tags = worker_tags?.filter((t) => t != tag) ?? []
+				<Button
+					class="p-1 rounded-full hover:bg-surface-hover transition"
+					aria-label="Remove tag"
+					on:click={() => {
+						worker_tags = worker_tags?.filter((t) => t !== tag) ?? []
 						dispatch('dirty')
 						dispatch('deletePriorityTag', tag)
 					}}
 				>
 					<X size={12} />
-				</button>
-			{/if}</div
-		>
+				</Button>
+			{/if}
+		</div>
 	{/each}
 </div>
+
 {#if $superadmin}
-	<div class="max-w-md">
+	<div class="max-w-md space-y-2">
 		<AutoComplete
 			noInputStyles
 			items={[...(customTags ?? []), ...createdTags, ...defaultTags, ...nativeTags].filter(
@@ -50,26 +58,23 @@
 			{disabled}
 			bind:selectedItem={newTag}
 			hideArrow={true}
-			inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary"'}
-			dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
-			className="w-full !font-gray-600 !font-primary !bg-surface-primary"
-			onFocus={() => {
-				dispatch('focus')
-			}}
+			inputClassName="w-full text-sm bg-surface-primary border border-gray-300 rounded-md px-3 py-2 text-primary placeholder-secondary focus:outline-none"
+			dropdownClassName="!text-sm !py-2 !rounded-md !border-gray-200 !border !shadow-md bg-white"
+			className="w-full font-primary text-primary"
+			onFocus={() => dispatch('focus')}
 			create
-			onCreate={(c) => {
+			onCreate={(c: string) => {
 				createdTags.push(c)
 				createdTags = [...createdTags]
 				return c
 			}}
-			createText="Press enter to use this tag"
+			createText="Press Enter to use this tag"
 		/>
 
-		<div class="mt-1"></div>
-		<div class="flex">
+		<div class="flex gap-2">
 			<Button
 				variant="contained"
-				color="blue"
+				color="light"
 				size="xs"
 				startIcon={{ icon: Plus }}
 				disabled={disabled || newTag == '' || worker_tags?.includes(newTag)}
@@ -81,6 +86,22 @@
 			>
 				Add tag
 			</Button>
+			<Button
+				variant="contained"
+				color="red"
+				size="xs"
+				startIcon={{ icon: Trash }}
+				disabled={disabled || worker_tags.length === 0}
+				on:click={() => {
+					worker_tags = worker_tags.filter((tag) => {
+						dispatch('deletePriorityTag', tag)
+						return false
+					})
+					dispatch('dirty')
+				}}
+			>
+				Remove all selected tags
+			</Button>
 		</div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index e97745bee2..3edc2e64a6 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -21,7 +21,7 @@
 	export let lightMode: boolean = false
 	export let eeOnly: boolean = false
 
-	export let size: 'sm' | 'xs' | '2xs' | '2sm' = 'sm'
+	export let size: 'sm' | 'xs' | '2xs' = 'sm'
 
 	const dispatch = createEventDispatcher<{ change: boolean }>()
 	const bothOptions = Boolean(options.left) && Boolean(options.right)
@@ -40,7 +40,7 @@
 			class={twMerge(
 				'mr-2 font-medium duration-50 select-none',
 				bothOptions || textDisabled ? (checked ? 'text-disabled' : 'text-primary') : 'text-primary',
-				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-[0.5rem]' : 'text-sm',
+				size === 'xs' ? 'text-xs' : size === '2xs' ? 'text-[0.5rem]' : 'text-sm',
 				textClass
 			)}
 			style={textStyle}
@@ -73,15 +73,13 @@
 				color == 'red'
 					? 'peer-checked:bg-red-600'
 					: color == 'blue'
-						? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
-						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-400',
+					? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
+					: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-400',
 				size === 'sm'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
-					: size === '2sm'
-						? 'w-9 h-5 after:top-0.5 after:left-[2px] after:h-4 after:w-4'
-						: size === '2xs'
-							? 'w-5 h-3 after:top-0.5 after:left-[2px] after:h-2 after:w-2'
-							: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
+					: size === '2xs'
+					? 'w-5 h-3 after:top-0.5 after:left-[2px] after:h-2 after:w-2'
+					: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
 			)}
 		></div>
 	</div>
@@ -90,7 +88,7 @@
 			class={twMerge(
 				'ml-2 font-medium duration-50 select-none',
 				bothOptions || textDisabled ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
-				size === 'xs' || size === '2sm' ? 'text-xs' : 'text-sm',
+				size === 'xs' ? 'text-xs' : 'text-sm',
 				textClass
 			)}
 			style={textStyle}
diff --git a/frontend/src/lib/components/TooltipInner.svelte b/frontend/src/lib/components/TooltipInner.svelte
deleted file mode 100644
index af4c56ac70..0000000000
--- a/frontend/src/lib/components/TooltipInner.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import Markdown from 'svelte-exmarkdown'
-	import { ExternalLink } from 'lucide-svelte'
-	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
-	export let documentationLink: string | undefined = undefined
-	export let markdownTooltip: string | undefined = undefined
-	const plugins = [gfmPlugin()]
-</script>
-
-<div
-	class="shadow max-w-sm break-words py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left"
->
-	{#if markdownTooltip}
-		<div class="prose-sm">
-			<Markdown md={markdownTooltip} {plugins} />
-		</div>
-	{:else}
-		<slot />
-	{/if}
-
-	{#if documentationLink}
-		<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
-			<div class="flex flex-row gap-2 mt-4">
-				See documentation
-				<ExternalLink size="16" />
-			</div>
-		</a>
-	{/if}
-</div>
diff --git a/frontend/src/lib/components/WorkerRepl.svelte b/frontend/src/lib/components/WorkerRepl.svelte
new file mode 100644
index 0000000000..fe5c82b9f0
--- /dev/null
+++ b/frontend/src/lib/components/WorkerRepl.svelte
@@ -0,0 +1,295 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { Terminal } from 'xterm'
+	import 'xterm/css/xterm.css'
+	import { runScriptAndPollResult } from './jobs/utils'
+	import { workspaceStore } from '$lib/stores'
+	import { Badge, Button, Drawer, DrawerContent, Skeleton } from './common'
+	import DarkModeObserver from './DarkModeObserver.svelte'
+	import { Library, Play } from 'lucide-svelte'
+	import Editor from './Editor.svelte'
+	import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte'
+	import ToggleHubWorkspace from './ToggleHubWorkspace.svelte'
+	import type { SupportedLanguage } from '$lib/common'
+	import HighlightCode from './HighlightCode.svelte'
+	import PickHubScript from './flows/pickers/PickHubScript.svelte'
+	import { getScriptByPath } from '$lib/scripts'
+	import { FitAddon } from '@xterm/addon-fit'
+	import { Readline } from 'xterm-readline'
+	import Tooltip from './Tooltip.svelte'
+	let bashEditorDrawer: Drawer | undefined = undefined
+
+	let container: HTMLDivElement
+	let term: Terminal
+	let input = ''
+	type Props = {
+		tag: string
+		width?: number
+	}
+	let scriptPicker: Drawer | undefined = $state()
+	let editor = $state<Editor | null>(null)
+	let darkMode = $state(false)
+	let pick_existing: 'workspace' | 'hub' = $state('workspace')
+	let codeViewer: Drawer | undefined = $state()
+	let filter = $state('')
+	let { tag }: Props = $props()
+	let code: string = $state('')
+	let working_directory = $state('~')
+	let homeDirectory: string = '~'
+	let prompt = $derived(
+		`$-${working_directory === '/' ? '/' : working_directory.split('/').at(-1)} `
+	)
+	let codeObj: { language: SupportedLanguage; content: string } | undefined = $state(undefined)
+	function resolvePath(currentDir: string, newPath: string): string {
+		if (newPath.startsWith('/') || newPath.startsWith('~')) {
+			return newPath
+		}
+
+		let parts = currentDir.split('/').filter(Boolean)
+		const segments = newPath.split('/').filter(Boolean)
+
+		for (const segment of segments) {
+			if (segment === '..') {
+				parts.pop()
+			} else if (segment !== '.') {
+				parts.push(segment)
+			}
+		}
+
+		return (currentDir.startsWith('~') ? '' : '/') + parts.join('/')
+	}
+
+	function ensureTrailingLineBreak(input: any): boolean {
+		if (typeof input !== 'string') {
+			return false
+		}
+		return input.endsWith('\r\n') || input.endsWith('\n')
+	}
+
+	function isSimpleCdCommand(command: string): boolean {
+		const trimmed = command.trim()
+
+		// Matches:
+		// - Starts with "cd"
+		// - Followed by any number of valid args (quoted or not)
+		// - No use of &, |, ; outside quotes
+		// - No other commands
+		const cdRegex = /^cd(\s+("[^"]*"|'[^']*'|[^\s"'&|;]+))*\s*$/
+
+		return cdRegex.test(trimmed)
+	}
+
+	async function handleCommand(command: string) {
+		try {
+			const trimmedCommand = command.trim()
+
+			if (trimmedCommand.length === 0) return
+
+			const isOnlyCdCommand = isSimpleCdCommand(trimmedCommand)
+			let wDirectory = working_directory
+			if (isOnlyCdCommand) {
+				const parts = trimmedCommand.split(' ')
+				if (parts.length > 1) {
+					const path = parts.slice(1).join(' ')
+					const newPath = resolvePath(working_directory, path)
+					wDirectory = newPath
+				} else {
+					wDirectory = homeDirectory
+				}
+			}
+
+			let result: any = await runScriptAndPollResult({
+				workspace: $workspaceStore!,
+				requestBody: {
+					language: 'bash',
+					content: `(cd ${wDirectory} && ${isOnlyCdCommand ? 'pwd' : `${trimmedCommand}`}) > result.out`,
+					tag,
+					args: {}
+				}
+			})
+			if (isOnlyCdCommand) {
+				working_directory = (result as string).replace(/(\r\n|\n|\r)/g, '')
+				result = ''
+			} else if (!ensureTrailingLineBreak(result)) {
+				result += '\r\n'
+			}
+			rl.write(result)
+		} catch (e) {
+			term.writeln(`Error: ${e}`)
+		}
+	}
+
+	const rl = new Readline()
+
+	onMount(async () => {
+		term = new Terminal({
+			cursorBlink: true,
+			fontSize: 14,
+			theme: {
+				background: '#1e1e1e',
+				foreground: '#ffffff'
+			},
+			fontFamily: 'monospace',
+			convertEol: true,
+			rightClickSelectsWord: true
+		})
+
+		term.loadAddon(rl)
+
+		function readLine() {
+			rl.read(prompt).then(processLine)
+		}
+
+		async function processLine(text: string) {
+			await handleCommand(text)
+			setTimeout(readLine)
+		}
+
+		const fitAddon = new FitAddon()
+		term.loadAddon(fitAddon)
+		term.open(container)
+		term.focus()
+
+		fitAddon.fit()
+
+		const resizeObserver = new ResizeObserver(() => fitAddon.fit())
+		resizeObserver.observe(container)
+
+		readLine()
+	})
+
+	function clearPrompt() {
+		const buffer = term.buffer.active
+		const lastLineIndex = buffer.baseY + buffer.cursorY
+		for (let i = lastLineIndex; i >= 0; i--) {
+			const line = buffer.getLine(i)
+
+			if (!line) break
+
+			const text = line.translateToString()
+			const postion = text.indexOf(prompt)
+			if (postion !== -1) {
+				const x = postion + prompt.length + 1
+				term.write(`\x1b[${x}G`)
+
+				const numSpaces = text.length - x
+				term.write(' '.repeat(numSpaces))
+
+				term.write(`\x1b[${x}G`)
+				break
+			} else {
+				term.write('\x1b[2K\r')
+			}
+
+			term.write(`\x1b[1A`)
+		}
+	}
+
+	async function onScriptPick(e: { detail: { path: string } }) {
+		codeObj = undefined
+		codeViewer?.openDrawer?.()
+		codeObj = await getScriptByPath(e.detail.path ?? '')
+	}
+
+	async function replacePromptWithCommand(command: string) {
+		clearPrompt()
+		if (!ensureTrailingLineBreak(command)) {
+			command += '\r\n'
+		}
+		input = command
+		rl.appendHistory(command)
+		term.write(command)
+		await handleCommand(input)
+		term.write(prompt)
+	}
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<Drawer bind:this={codeViewer} size="600px">
+	<DrawerContent title="Code" on:close={codeViewer.closeDrawer}>
+		{#if codeObj}
+			<HighlightCode language={codeObj?.language} code={codeObj?.content} />
+		{:else}
+			<Skeleton layout={[[40]]} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={scriptPicker} size="900px">
+	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
+		{#if pick_existing == 'hub'}
+			<PickHubScript bind:filter kind={'script'} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</PickHubScript>
+		{:else}
+			<WorkspaceScriptPicker bind:filter kind={'script'} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</WorkspaceScriptPicker>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+
+
+<div class="h-screen flex flex-col">
+	<div class="m-1">
+		<div class="flex flex-col">
+			<div class="flex justify-start w-full mb-2">
+				<div class="flex flex-row">
+					<Badge
+						color="gray"
+						class="relative center-center !bg-gray-300 !text-tertiary dark:!bg-gray-700 dark:!text-gray-300 !h-[40px] rounded-r-none rounded-l-none"
+					>
+						Full path
+
+						<Tooltip
+							markdownTooltip="Commands run in the default directory. Run a standalone `cd` to change it. Chained or invalid `cd` commands won’t apply."
+							class="absolute top-0.5"
+						/>
+					</Badge>
+				</div>
+				<input type="text" disabled bind:value={working_directory} />
+			</div>
+		</div>
+
+		<div bind:this={container}></div>
+	</div>
+	<div class="flex flex-col h-full gap-1 mt-2">
+		<div class="flex flex-row w-full justify-between">
+			<div class="flex flex-row">
+				<Button
+					btnClasses="!font-medium text-tertiary "
+					size="xs"
+					spacingSize="md"
+					color="light"
+					startIcon={{ icon: Play }}
+					title="Run bash script"
+					on:click={async () => {
+						await replacePromptWithCommand(code)
+					}}
+				>
+					Run
+				</Button>
+				<Button
+					btnClasses="!font-medium text-tertiary "
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={scriptPicker.openDrawer}
+					startIcon={{ icon: Library }}
+					title="Explore other scripts"
+				>
+					Library
+				</Button>
+			</div>
+		</div>
+		<Editor bind:this={editor} bind:code lang="bash" scriptLang="bash" class="w-full h-full" />
+	</div>
+</div>
+
+<style>
+	:global(.xterm-screen) {
+		padding-left: 10px;
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/utils.ts b/frontend/src/lib/components/apps/components/display/dbtable/utils.ts
index 0c3fce722f..05b30ec1f2 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/utils.ts
+++ b/frontend/src/lib/components/apps/components/display/dbtable/utils.ts
@@ -8,7 +8,7 @@ import {
 } from 'graphql'
 import { tryEvery } from '$lib/utils'
 import { stringifySchema } from '$lib/components/copilot/lib'
-import { runPreviewJobAndPollResult } from '$lib/components/jobs/utils'
+import { runScriptAndPollResult } from '$lib/components/jobs/utils'
 
 export enum ColumnIdentity {
 	ByDefault = 'By Default',
@@ -114,7 +114,7 @@ export async function loadAllTablesMetaData(
 	}
 
 	try {
-		let result = (await runPreviewJobAndPollResult({
+		let result = (await runScriptAndPollResult({
 			workspace: workspace,
 			requestBody: {
 				language: getLanguageByResourceType(resourceType),
diff --git a/frontend/src/lib/components/common/Url.svelte b/frontend/src/lib/components/common/Url.svelte
deleted file mode 100644
index 2adb226eb4..0000000000
--- a/frontend/src/lib/components/common/Url.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { Badge } from '$lib/components/common'
-	import ClipboardPanel from '$lib/components/details/ClipboardPanel.svelte'
-
-	interface Props {
-		url?: string
-		disabled?: boolean
-		label?: string
-	}
-
-	let { url = '', disabled = false, label = '' }: Props = $props()
-</script>
-
-<div class="flex justify-start w-full">
-	<Badge color="gray" class="rounded-r-none h-[27px]">{label}</Badge>
-
-	<ClipboardPanel
-		content={url}
-		class="rounded-l-none bg-surface border-none outline outline-2 outline-surface-secondary outline-offset-[-2px]"
-		{disabled}
-	/>
-</div>
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index c013443598..13fff1ffef 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -198,7 +198,6 @@
 					this={startIcon.icon}
 					class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
 					size={lucideIconSize}
-					{...startIcon.props}
 				/>
 			{/if}
 
@@ -247,7 +246,6 @@
 					this={startIcon.icon}
 					class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
 					size={lucideIconSize}
-					{...startIcon.props}
 				/>
 			{/if}
 
@@ -290,13 +288,12 @@
 				<div
 					class={twMerge(
 						buttonClass,
-						'rounded-md m-0 p-0 center-center h-full',
+						'rounded-md m-0 p-0 !w-10 center-center h-full',
 						variant === 'border' ? 'border-0 border-r border-y ' : 'border-0',
-						'rounded-r-md !rounded-l-none',
-						size === 'xs2' ? '!w-8' : '!w-10'
+						'rounded-r-md !rounded-l-none'
 					)}
 				>
-					<ChevronDown size={lucideIconSize} />
+					<ChevronDown class="w-5 h-5" />
 				</div>
 			</svelte:fragment>
 		</Dropdown>
diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts
index 4b497f6ebf..430cbfcfaa 100644
--- a/frontend/src/lib/components/common/button/model.ts
+++ b/frontend/src/lib/components/common/button/model.ts
@@ -10,7 +10,6 @@ export namespace ButtonType {
 		icon?: any | undefined
 		classes?: string
 		faIcon?: any | undefined
-		props?: any
 	}
 
 	export const FontSizeClasses: Record<ButtonType.Size, string> = {
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index 6bb4f1f0e5..d334dc8c4c 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -4,7 +4,6 @@
 	import { fade } from 'svelte/transition'
 	import Button from '../button/Button.svelte'
 	import { AlertTriangle, CornerDownLeft, Loader2, RefreshCcw } from 'lucide-svelte'
-	import { twMerge } from 'tailwind-merge'
 
 	type Props = {
 		title: string
@@ -13,7 +12,6 @@
 		loading?: boolean
 		open?: boolean
 		type?: 'danger' | 'reload'
-		showIcon?: boolean
 	}
 
 	const {
@@ -22,8 +20,7 @@
 		keyListen = true,
 		loading = false,
 		open = false,
-		type: _type,
-		showIcon = true
+		type: _type
 	}: Props = $props()
 	const type = $derived(_type ?? 'danger')
 
@@ -95,14 +92,12 @@
 					)}
 				>
 					<div class="flex">
-						{#if showIcon}
-							<div
-								class={`flex h-12 w-12 items-center justify-center rounded-full ${theme[type].classes.iconWrapper}`}
-							>
-								<Icon class={theme[type].classes.icon} />
-							</div>
-						{/if}
-						<div class={twMerge('ml-0 text-left flex-1 ', showIcon ? 'ml-4' : '')}>
+						<div
+							class={`flex h-12 w-12 items-center justify-center rounded-full ${theme[type].classes.iconWrapper}`}
+						>
+							<Icon class={theme[type].classes.icon} />
+						</div>
+						<div class="ml-4 text-left flex-1">
 							<h3 class="text-lg font-medium text-primary">
 								{title}
 							</h3>
diff --git a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
deleted file mode 100644
index 15dee9fdf8..0000000000
--- a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
+++ /dev/null
@@ -1,178 +0,0 @@
-<script lang="ts">
-	import ConfirmationModal from './ConfirmationModal.svelte'
-	import { createEventDispatcher } from 'svelte'
-	import type { Trigger } from '$lib/components/triggers/utils'
-	import DataTable from '$lib/components/table/DataTable.svelte'
-	import { twMerge } from 'tailwind-merge'
-	import TriggerLabel from '$lib/components/triggers/TriggerLabel.svelte'
-	import { triggerIconMap } from '$lib/components/triggers/utils'
-	import { Star } from 'lucide-svelte'
-	import ToggleButtonGroup from '../toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from '../toggleButton-v2/ToggleButton.svelte'
-	import { userStore } from '$lib/stores'
-
-	interface Props {
-		open?: boolean
-		draftTriggers?: Trigger[]
-		isFlow?: boolean
-	}
-
-	let { open = $bindable(false), draftTriggers = [], isFlow = false }: Props = $props()
-
-	let selectedTriggers: Trigger[] = $state(draftTriggers)
-
-	const dispatch = createEventDispatcher<{
-		canceled: void
-		confirmed: { selectedTriggers: Trigger[] }
-	}>()
-
-	function toggleTrigger(trigger: Trigger, selected: 'discard' | 'deploy') {
-		if (selected === 'discard') {
-			if (trigger.isDraft) {
-				selectedTriggers = selectedTriggers.filter((t) => !t.isDraft || t.id !== trigger.id)
-			} else {
-				selectedTriggers = selectedTriggers.filter(
-					(t) => t.isDraft || t.type !== trigger.type || t.path !== trigger.path
-				)
-			}
-		} else if (!isSelected(selectedTriggers, trigger)) {
-			selectedTriggers = [...selectedTriggers, trigger]
-		}
-	}
-
-	function isSelected(triggers: Trigger[], trigger: Trigger): boolean {
-		if (trigger.isDraft) {
-			return triggers.some((t) => t.id === trigger.id)
-		} else {
-			return triggers.some((t) => t.path === trigger.path && t.type === trigger.type)
-		}
-	}
-
-	function checkSavePermissions(trigger: Trigger) {
-		// Creating http trigger is forbidden for non-admin users
-		const adminOnly =
-			trigger.type === 'http' &&
-			!$userStore?.is_admin &&
-			!$userStore?.is_super_admin &&
-			trigger.isDraft
-
-		const invalidConfig = !trigger.draftConfig?.canSave
-
-		return invalidConfig ? 'invalid-config' : adminOnly ? 'admin-only' : 'deploy'
-	}
-
-	$effect(() => {
-		open &&
-			(selectedTriggers = [...draftTriggers].filter((t) => checkSavePermissions(t) === 'deploy'))
-	})
-</script>
-
-<ConfirmationModal
-	{open}
-	title="Draft triggers detected !"
-	confirmationText={isFlow ? 'Deploy Flow' : 'Deploy Script'}
-	type="reload"
-	showIcon={false}
-	on:canceled={() => dispatch('canceled')}
-	on:confirmed={() => dispatch('confirmed', { selectedTriggers })}
->
-	<div class="flex flex-col w-full gap-8 pb-4">
-		<div class="text-secondary text-sm">
-			{`${isFlow ? 'Your flow' : 'Your script'} has draft triggers. Select which draft triggers to deploy with the ${isFlow ? 'flow' : 'script'}. Undeployed
-			draft triggers will be permanently deleted.`}
-		</div>
-
-		<div class={draftTriggers.length > 5 ? 'h-[300px]' : ''}>
-			<DataTable size="sm" tableFixed={true}>
-				<thead>
-					<tr class="bg-gray-50 dark:bg-gray-700 text-secondary dark:text-gray-300 text-xs">
-						<th class="text-left py-2 px-4">Triggers to deploy</th>
-						<th class="w-32 text-center py-2 px-1 justify-center"> </th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each draftTriggers as trigger}
-						{@const SvelteComponent = triggerIconMap[trigger.type]}
-						{@const permission = checkSavePermissions(trigger)}
-						{@const isSelectedTrigger = isSelected(selectedTriggers, trigger)}
-						<tr
-							class={twMerge(
-								'transition-colors h-12 border-t border-gray-200 dark:border-gray-700 whitespace-nowrap',
-								permission === 'deploy' ? 'hover:bg-surface-hover ' : ''
-							)}
-						>
-							<td class={twMerge('text-center py-1 px-4')}>
-								<div class="flex flex-row items-center gap-2">
-									<div class="relative flex justify-center items-center">
-										<SvelteComponent
-											size={14}
-											class={isSelectedTrigger
-												? 'text-blue-500'
-												: 'text-gray-500 dark:text-gray-400'}
-										/>
-										{#if trigger.isPrimary}
-											<Star size={8} class="absolute -mt-3 ml-3 text-blue-400" />
-										{/if}
-									</div>
-									<div class="flex grow min-w-0 items-center text-left">
-										<TriggerLabel {trigger} discard={!isSelectedTrigger} />
-									</div>
-								</div>
-							</td>
-
-							<td class="text-left py-1">
-								{#if permission === 'deploy'}
-									<div class="flex justify-start">
-										<ToggleButtonGroup
-											let:item
-											class="w-fit h-fit"
-											selected={isSelectedTrigger ? 'deploy' : 'discard'}
-											on:selected={(e) => toggleTrigger(trigger, e.detail)}
-										>
-											<ToggleButton
-												label={!trigger.isDraft && trigger.draftConfig ? 'Reset' : 'Discard'}
-												value={'discard'}
-												{item}
-												small
-												class="data-[state=on]:text-white data-[state=on]:bg-red-400 w-[54px] justify-center"
-											/>
-											<ToggleButton
-												label={!trigger.isDraft && trigger.draftConfig ? 'Update' : 'Deploy'}
-												value={'deploy'}
-												{item}
-												small
-												class="data-[state=on]:bg-marine-400 data-[state=on]:text-white data-[state=on]:dark:bg-marine-50 data-[state=on]:dark:text-primary-inverse w-[54px] justify-center"
-											/>
-										</ToggleButtonGroup>
-									</div>
-								{:else if permission === 'admin-only'}
-									<div
-										class="text-xs font-semibold px-1.5 py-1.5 bg-red-400 text-white rounded whitespace-nowrap w-[114px] text-center"
-										title="Only admins can deploy http triggers"
-									>
-										Admin only
-									</div>
-								{:else if permission === 'invalid-config'}
-									<div
-										class="text-xs font-semibold px-1.5 py-1.5 bg-red-400 text-white rounded whitespace-nowrap w-[114px] text-center"
-										title="Invalid config"
-									>
-										Invalid config
-									</div>
-								{/if}
-							</td>
-						</tr>
-					{/each}
-
-					{#if draftTriggers.length === 0}
-						<tr>
-							<td colspan="3" class="text-center py-6 text-gray-500 dark:text-gray-400 text-sm">
-								No draft triggers found
-							</td>
-						</tr>
-					{/if}
-				</tbody>
-			</DataTable>
-		</div>
-	</div>
-</ConfirmationModal>
diff --git a/frontend/src/lib/components/common/index.ts b/frontend/src/lib/components/common/index.ts
index 4dd5670ba0..57d201ce15 100644
--- a/frontend/src/lib/components/common/index.ts
+++ b/frontend/src/lib/components/common/index.ts
@@ -17,7 +17,6 @@ export { default as Tabs } from './tabs/Tabs.svelte'
 export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte'
 export { default as FileInput } from './fileInput/FileInput.svelte'
 export { default as Section } from '../Section.svelte'
-export { default as Url } from './Url.svelte'
 
 export * from './alert/model'
 export * from './badge/model'
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index 78f2ca6959..e40ccc56bc 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -76,7 +76,7 @@
 </script>
 
 {#if menuOpen}
-	<ScheduleEditor onUpdate={() => goto('/schedules')} bind:this={scheduleEditor} />
+	<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 	<FlowHistory bind:this={flowHistory} path={flow.path} />
 {/if}
 
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index 286e0778ab..d0bd0fadfe 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -88,7 +88,7 @@
 </script>
 
 {#if menuOpen}
-	<ScheduleEditor onUpdate={() => goto('/schedules')} bind:this={scheduleEditor} />
+	<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 {/if}
 
 <Row
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
index 5a2556900f..3df23a6552 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
@@ -35,7 +35,6 @@
 			light ? 'font-medium' : '',
 			'data-[state=on]:bg-surface data-[state=on]:shadow-md',
 			'bg-surface-secondary hover:bg-surface-hover',
-			disabled ? '!shadow-none' : '',
 			$$props.class
 		)}
 		use:melt={$item(value)}
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index 57531fd040..9e54bfc7f2 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
@@ -48,6 +48,6 @@
 	{id}
 >
 	<div class={twMerge('flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full ', tabListClass)}>
-		<slot {item} {disabled} />
+		<slot {item} />
 	</div>
 </div>
diff --git a/frontend/src/lib/components/dbOps.ts b/frontend/src/lib/components/dbOps.ts
index ff37853a7a..7f68c67bfd 100644
--- a/frontend/src/lib/components/dbOps.ts
+++ b/frontend/src/lib/components/dbOps.ts
@@ -4,7 +4,7 @@ import {
 	type DbType
 } from './apps/components/display/dbtable/utils'
 import { makeSelectQuery } from './apps/components/display/dbtable/queries/select'
-import { runPreviewJobAndPollResult } from './jobs/utils'
+import { runScriptAndPollResult } from './jobs/utils'
 import { makeCountQuery } from './apps/components/display/dbtable/queries/count'
 import { makeUpdateQuery } from './apps/components/display/dbtable/queries/update'
 import { makeDeleteQuery } from './apps/components/display/dbtable/queries/delete'
@@ -55,7 +55,7 @@ export function dbTableOpsWithPreviewScripts({
 		colDefs,
 		getCount: async ({ quicksearch }) => {
 			const countQuery = makeCountQuery(resourceType, tableKey, undefined, colDefs)
-			const result = await runPreviewJobAndPollResult({
+			const result = await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath, quicksearch },
@@ -68,7 +68,7 @@ export function dbTableOpsWithPreviewScripts({
 		},
 		getRows: async (params) => {
 			const query = makeSelectQuery(tableKey, colDefs, undefined, resourceType as DbType)
-			let items = (await runPreviewJobAndPollResult({
+			let items = (await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath, ...params },
@@ -85,7 +85,7 @@ export function dbTableOpsWithPreviewScripts({
 		onUpdate: async ({ values }, colDef, newValue) => {
 			const updateQuery = makeUpdateQuery(tableKey, colDef, colDefs, resourceType)
 
-			await runPreviewJobAndPollResult({
+			await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: {
@@ -101,7 +101,7 @@ export function dbTableOpsWithPreviewScripts({
 		onDelete: async ({ values }) => {
 			const deleteQuery = makeDeleteQuery(tableKey, colDefs, resourceType)
 
-			await runPreviewJobAndPollResult({
+			await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath, ...values },
@@ -112,7 +112,7 @@ export function dbTableOpsWithPreviewScripts({
 		},
 		onInsert: async ({ values }) => {
 			const insertQuery = makeInsertQuery(tableKey, colDefs, resourceType)
-			runPreviewJobAndPollResult({
+			runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath, ...values },
@@ -155,7 +155,7 @@ export function dbDeleteTableActionWithPreviewScript({
 		successText: `Table '${tableKey}' deleted successfully`,
 		action: async () => {
 			const deleteQuery = makeDeleteTableQuery(tableKey, resourceType)
-			await runPreviewJobAndPollResult({
+			await runScriptAndPollResult({
 				workspace,
 				requestBody: {
 					args: { database: '$res:' + resourcePath },
diff --git a/frontend/src/lib/components/details/ClipboardPanel.svelte b/frontend/src/lib/components/details/ClipboardPanel.svelte
index cc2e16e086..c0a230f1f7 100644
--- a/frontend/src/lib/components/details/ClipboardPanel.svelte
+++ b/frontend/src/lib/components/details/ClipboardPanel.svelte
@@ -16,10 +16,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class={twMerge(
-		'grow min-w-0 w-full px-2 py-1 border flex items-center bg-surface-secondary text-primary justify-between rounded-md',
-		$$props.class
-	)}
+	class="grow min-w-0 w-full px-2 py-1 border flex items-center bg-surface-secondary text-primary justify-between rounded-md"
 	class:cursor-not-allowed={disabled}
 	class:cursor-pointer={!disabled}
 	on:click={(e) => {
diff --git a/frontend/src/lib/components/details/CopyableCodeBlock.svelte b/frontend/src/lib/components/details/CopyableCodeBlock.svelte
index e9e5c13808..1a98f81412 100644
--- a/frontend/src/lib/components/details/CopyableCodeBlock.svelte
+++ b/frontend/src/lib/components/details/CopyableCodeBlock.svelte
@@ -12,7 +12,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="flex flex-col flex-1 border rounded-md relative"
+	class="flex flex-row flex-1 border p-2 rounded-md overflow-auto relative"
 	class:cursor-not-allowed={disabled}
 	on:click={(e) => {
 		if (disabled) {
@@ -22,10 +22,6 @@
 		copyToClipboard(code)
 	}}
 >
-	<div class="absolute top-2 right-1 z-10 pointer-events-none">
-		<Clipboard size={14} class="w-8 cursor-pointer pointer-events-auto" />
-	</div>
-	<div class="p-2 overflow-auto w-full">
-		<Highlight {language} {code} class="pointer-events-none" />
-	</div>
+	<Highlight {language} {code} class="pointer-events-none" />
+	<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
 </div>
diff --git a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
index 722020e0a3..64433c1f47 100644
--- a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
+++ b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
@@ -3,8 +3,24 @@
 
 	import HighlightTheme from '../HighlightTheme.svelte'
 	import FlowViewerInner from '../FlowViewerInner.svelte'
+	import DetailPageTriggerPanel from './DetailPageTriggerPanel.svelte'
 
+	export let triggerSelected:
+		| 'webhooks'
+		| 'emails'
+		| 'schedules'
+		| 'cli'
+		| 'routes'
+		| 'websockets'
+		| 'postgres'
+		| 'scheduledPoll'
+		| 'kafka'
+		| 'mqtt'
+		| 'sqs'
+		| 'gcp'
+		| 'nats' = 'webhooks'
 	export let flow_json: any | undefined = undefined
+	export let simplfiedPoll: boolean = false
 
 	export let isOperator: boolean = false
 
@@ -36,8 +52,21 @@
 				<TabContent value="script" class="h-full">
 					<slot name="script" />
 				</TabContent>
-				<TabContent value="triggers" class="h-full">
-					<slot name="triggers" />
+				<TabContent value="triggers" class="h-full pt-2">
+					<DetailPageTriggerPanel {simplfiedPoll} bind:triggerSelected>
+						<slot slot="webhooks" name="webhooks" />
+						<slot slot="routes" name="routes" />
+						<slot slot="websockets" name="websockets" />
+						<slot slot="postgres" name="postgres" />
+						<slot slot="kafka" name="kafka" />
+						<slot slot="nats" name="nats" />
+						<slot slot="mqtt" name="mqtt" />
+						<slot slot="sqs" name="sqs" />
+						<slot slot="gcp" name="gcp" />
+						<slot slot="emails" name="emails" />
+						<slot slot="schedules" name="schedules" />
+						<slot slot="cli" name="cli" />
+					</DetailPageTriggerPanel>
 				</TabContent>
 				{#if flow_json}
 					<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto p-2">
diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte
index 20fb3ff693..abf4a004bf 100644
--- a/frontend/src/lib/components/details/DetailPageHeader.svelte
+++ b/frontend/src/lib/components/details/DetailPageHeader.svelte
@@ -5,7 +5,7 @@
 	import ErrorHandlerToggleButton from './ErrorHandlerToggleButton.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { userStore } from '$lib/stores'
-	import { createEventDispatcher, getContext, tick } from 'svelte'
+	import { createEventDispatcher, getContext } from 'svelte'
 	import type { TriggerContext } from '../triggers'
 	import { Calendar } from 'lucide-svelte'
 
@@ -23,7 +23,7 @@
 		color?: 'red'
 	}
 
-	const { triggersCount, triggersState } = getContext<TriggerContext>('TriggerContext')
+	const { triggersCount, selectedTrigger } = getContext<TriggerContext>('TriggerContext')
 
 	export let mainButtons: MainButton[] = []
 	export let menuItems: MenuItemButton[] = []
@@ -52,20 +52,16 @@
 					<Badge>tag: {tag}</Badge>
 				{/if}
 				<slot />
-				{#if triggersState?.triggers?.some((t) => t.isPrimary && !t.isDraft)}
-					{@const primarySchedule = triggersState.triggers.findIndex(
-						(t) => t.isPrimary && !t.isDraft
-					)}
+				{#if $triggersCount?.primary_schedule}
 					<Button
 						btnClasses="inline-flex"
 						startIcon={{ icon: Calendar }}
 						variant="contained"
 						color="light"
 						size="xs"
-						on:click={async () => {
-							dispatch('seeTriggers')
-							await tick()
-							triggersState.selectedTriggerIndex = primarySchedule
+						on:click={() => {
+							$selectedTrigger = 'schedules'
+							dispatch('triggerDetail')
 						}}
 					>
 						{$triggersCount?.primary_schedule?.schedule ?? ''}
diff --git a/frontend/src/lib/components/details/DetailPageLayout.svelte b/frontend/src/lib/components/details/DetailPageLayout.svelte
index 0bc3ddadfa..b8d3c03f67 100644
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -3,14 +3,48 @@
 	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import DetailPageDetailPanel from './DetailPageDetailPanel.svelte'
+	import type { ScheduleTrigger, TriggerContext } from '../triggers'
+	import { setContext } from 'svelte'
+	import { writable, type Writable } from 'svelte/store'
+	import type { TriggersCount } from '$lib/gen'
+	import DetailPageTriggerPanel from './DetailPageTriggerPanel.svelte'
 
 	export let isOperator: boolean = false
 	export let flow_json: any | undefined = undefined
 	export let selected: string
+	export let triggersCount: Writable<TriggersCount | undefined>
 
 	let mobileTab: 'form' | 'detail' = 'form'
 
 	let clientWidth = window.innerWidth
+
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(undefined)
+	const selectedTriggerStore = writable<
+		| 'webhooks'
+		| 'emails'
+		| 'schedules'
+		| 'cli'
+		| 'routes'
+		| 'websockets'
+		| 'postgres'
+		| 'scheduledPoll'
+		| 'kafka'
+		| 'nats'
+		| 'mqtt'
+		| 'sqs'
+		| 'gcp'
+	>('webhooks')
+
+	const simplifiedPoll = writable(false)
+	setContext<TriggerContext>('TriggerContext', {
+		selectedTrigger: selectedTriggerStore,
+		primarySchedule: primaryScheduleStore,
+		triggersCount,
+		simplifiedPoll,
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined),
+		showCaptureHint: writable(undefined)
+	})
 </script>
 
 <main class="h-screen w-full" bind:clientWidth>
@@ -23,11 +57,28 @@
 						<slot name="form" />
 					</Pane>
 					<Pane size={35} minSize={15}>
-						<DetailPageDetailPanel bind:selected {isOperator} {flow_json}>
+						<DetailPageDetailPanel
+							simplfiedPoll={$simplifiedPoll}
+							bind:triggerSelected={$selectedTriggerStore}
+							bind:selected
+							{isOperator}
+							{flow_json}
+						>
+							<slot slot="webhooks" name="webhooks" />
+							<slot slot="routes" name="routes" />
+							<slot slot="websockets" name="websockets" />
+							<slot slot="postgres" name="postgres" />
+							<slot slot="kafka" name="kafka" />
+							<slot slot="nats" name="nats" />
+							<slot slot="mqtt" name="mqtt" />
+							<slot slot="sqs" name="sqs" />
+							<slot slot="gcp" name="gcp" />
+							<slot slot="emails" name="emails" />
+							<slot slot="schedules" name="schedules" />
+							<slot slot="cli" name="cli" />
 							<slot slot="script" name="script" />
 							<slot slot="save_inputs" name="save_inputs" />
 							<slot slot="flow_step" name="flow_step" />
-							<slot slot="triggers" name="triggers" />
 						</DetailPageDetailPanel>
 					</Pane>
 				</Splitpanes>
@@ -57,8 +108,25 @@
 						<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
 							<slot name="save_inputs" />
 						</TabContent>
-						<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
-							<slot name="triggers" />
+						<TabContent value="triggers" class="flex flex-col flex-1 h-full">
+							<DetailPageTriggerPanel
+								simplfiedPoll={$simplifiedPoll}
+								bind:triggerSelected={$selectedTriggerStore}
+							>
+								<slot slot="webhooks" name="webhooks" />
+								<slot slot="routes" name="routes" />
+								<slot slot="script" name="script" />
+								<slot slot="websockets" name="websockets" />
+								<slot slot="postgres" name="postgres" />
+								<slot slot="kafka" name="kafka" />
+								<slot slot="nats" name="nats" />
+								<slot slot="mqtt" name="mqtt" />
+								<slot slot="sqs" name="sqs" />
+								<slot slot="gcp" name="gcp" />
+								<slot slot="emails" name="emails" />
+								<slot slot="schedules" name="schedules" />
+								<slot slot="cli" name="cli" />
+							</DetailPageTriggerPanel>
 						</TabContent>
 						<TabContent value="script" class="flex flex-col flex-1 h-full">
 							<slot name="script" />
diff --git a/frontend/src/lib/components/details/EmailTriggerCaptures.svelte b/frontend/src/lib/components/details/EmailTriggerCaptures.svelte
deleted file mode 100644
index 80fa612f30..0000000000
--- a/frontend/src/lib/components/details/EmailTriggerCaptures.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-	import Label from '$lib/components/Label.svelte'
-	import { workspaceStore } from '$lib/stores'
-	import { base32 } from 'rfc4648'
-	import ClipboardPanel from './ClipboardPanel.svelte'
-	import CaptureSection, { type CaptureInfo } from '../triggers/CaptureSection.svelte'
-	import { fade } from 'svelte/transition'
-
-	interface Props {
-		isFlow?: boolean
-		path: string
-		emailDomain?: string | null
-		captureInfo?: CaptureInfo | undefined
-		hasPreprocessor?: boolean
-		captureLoading?: boolean
-	}
-
-	let {
-		isFlow = false,
-		path,
-		emailDomain = null,
-		captureInfo = undefined,
-		hasPreprocessor = false,
-		captureLoading = false
-	}: Props = $props()
-
-	function getCaptureEmail() {
-		const cleanedPath = path.replaceAll('/', '.')
-		const plainPrefix = `capture+${$workspaceStore}+${(isFlow ? 'flow.' : '') + cleanedPath}`
-		const encodedPrefix = base32
-			.stringify(new TextEncoder().encode(plainPrefix), {
-				pad: false
-			})
-			.toLowerCase()
-		return `${encodedPrefix}@${emailDomain}`
-	}
-
-	let captureEmail = $derived(getCaptureEmail())
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="email"
-		disabled={false}
-		{captureInfo}
-		{captureLoading}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Send an email to the test address below to simulate an email trigger.
-				</p>
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to email events on this test address.
-				</p>
-			{/if}
-		{/snippet}
-		<Label label="Test email address" disabled={!captureInfo.active}>
-			<ClipboardPanel content={captureEmail} disabled={!captureInfo.active} />
-		</Label>
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte b/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte
index aedbbcb865..eba48136aa 100644
--- a/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte
@@ -10,6 +10,8 @@
 	import ClipboardPanel from './ClipboardPanel.svelte'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import { base32 } from 'rfc4648'
+	import CaptureSection, { type CaptureInfo } from '../triggers/CaptureSection.svelte'
+	import CaptureTable from '../triggers/CaptureTable.svelte'
 
 	export let token: string = ''
 	export let isFlow: boolean = false
@@ -17,9 +19,25 @@
 	export let path: string
 	export let userSettings: any
 	export let emailDomain: string | null = null
+	export let showCapture: boolean = false
+	export let captureInfo: CaptureInfo | undefined = undefined
+	export let captureTable: CaptureTable | undefined = undefined
 
 	let requestType: 'hash' | 'path' = 'path'
 
+	function getCaptureEmail() {
+		const cleanedPath = path.replaceAll('/', '.')
+		const plainPrefix = `capture+${$workspaceStore}+${(isFlow ? 'flow.' : '') + cleanedPath}`
+		const encodedPrefix = base32
+			.stringify(new TextEncoder().encode(plainPrefix), {
+				pad: false
+			})
+			.toLowerCase()
+		return `${encodedPrefix}@${emailDomain}`
+	}
+
+	$: captureEmail = getCaptureEmail()
+
 	function emailAddress(
 		requestType: 'hash' | 'path',
 		path: string,
@@ -45,6 +63,23 @@
 </script>
 
 <div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			bind:captureTable
+			captureType="email"
+			disabled={false}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+		>
+			<Label label="Email address">
+				<ClipboardPanel content={captureEmail} disabled={!captureInfo.active} />
+			</Label>
+		</CaptureSection>
+	{/if}
 	<div class="flex flex-col gap-4">
 		{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
 			<Label label="Token">
diff --git a/frontend/src/lib/components/details/EmailTriggerPanel.svelte b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
index a38aa4c035..3687c1e710 100644
--- a/frontend/src/lib/components/details/EmailTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
@@ -7,20 +7,20 @@
 	import { SettingService } from '$lib/gen'
 	import Skeleton from '../common/skeleton/Skeleton.svelte'
 	import TriggerTokens from '../triggers/TriggerTokens.svelte'
+	import TriggersEditorSection from '../triggers/TriggersEditorSection.svelte'
 	import Description from '../Description.svelte'
-	import Section from '../Section.svelte'
-	import { createEventDispatcher } from 'svelte'
-	import EmailTriggerConfigSection from './EmailTriggerConfigSection.svelte'
 
 	let userSettings: UserSettings
 
-	const dispatch = createEventDispatcher()
-
 	export let token: string
 	export let scopes: string[] = []
 	export let isFlow: boolean = false
 	export let hash: string | undefined = undefined
 	export let path: string
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
+	export let newItem: boolean = false
 
 	let emailDomain: string | null = null
 	let triggerTokens: TriggerTokens | undefined = undefined
@@ -35,8 +35,6 @@
 	}
 
 	getEmailDomain()
-
-	$: emailDomain && dispatch('email-domain', emailDomain)
 </script>
 
 <HighlightTheme />
@@ -52,7 +50,7 @@
 	{scopes}
 />
 
-<Section label="Email trigger" class="flex flex-col gap-4">
+<div class="flex flex-col w-full gap-4">
 	<Description link="https://www.windmill.dev/docs/advanced/email_triggers">
 		Email triggers execute scripts and flows when emails are sent to specific addresses. Each
 		trigger has its own unique email address that can be used to invoke the script or flow.
@@ -61,7 +59,23 @@
 		<Skeleton layout={[[18]]} />
 	{:else}
 		{#if emailDomain}
-			<EmailTriggerConfigSection {hash} {token} {path} {isFlow} {userSettings} {emailDomain} />
+			<TriggersEditorSection
+				cloudDisabled={false}
+				triggerType="email"
+				{isFlow}
+				noSave
+				data={{ emailDomain, userSettings, token, hash, path }}
+				{isEditor}
+				{path}
+				{canHavePreprocessor}
+				{hasPreprocessor}
+				on:applyArgs
+				on:addPreprocessor
+				on:updateSchema
+				on:testWithArgs
+				{newItem}
+				alwaysOpened={true}
+			/>
 		{:else}
 			<div>
 				<Alert title="Email triggers are disabled" size="xs" type="warning">
@@ -81,4 +95,4 @@
 
 		<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="email" />
 	{/if}
-</Section>
+</div>
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index a7c22a2e16..411a5e9311 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -13,7 +13,6 @@
 	import type { PropPickerContext, FlowPropPickerConfig } from '$lib/components/prop_picker'
 	import type { PickableProperties } from '$lib/components/flows/previousResults'
 	import type { Flow } from '$lib/gen'
-	import type { Trigger } from '$lib/components/triggers/utils'
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	export let loading: boolean
@@ -29,8 +28,6 @@
 				draft?: Flow | undefined
 		  })
 		| undefined = undefined
-	export let onDeployTrigger: (trigger: Trigger) => void = () => {}
-
 	let size = 50
 
 	const { currentStepStore: copilotCurrentStepStore } =
@@ -87,7 +84,6 @@
 					enableAi={!disableAi}
 					on:applyArgs
 					on:testWithArgs
-					{onDeployTrigger}
 				/>
 			{/if}
 		</Pane>
diff --git a/frontend/src/lib/components/flows/common/FlowCard.svelte b/frontend/src/lib/components/flows/common/FlowCard.svelte
index d2e14015ae..9b1969adaf 100644
--- a/frontend/src/lib/components/flows/common/FlowCard.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCard.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
 	import type { FlowModuleValue } from '$lib/gen'
 	import FlowCardHeader from './FlowCardHeader.svelte'
-
 	export let title: string | undefined = undefined
 	export let summary: string | undefined = undefined
 	export let noEditor: boolean
-	export let noHeader = false
 	export let flowModuleValue: FlowModuleValue | undefined = undefined
 </script>
 
 <div class="flex flex-col h-full">
-	{#if !noEditor && !noHeader}
+	{#if !noEditor}
 		<div>
 			<FlowCardHeader on:setHash on:reload {title} bind:summary {flowModuleValue}>
 				<slot name="header" />
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 613145f6c2..9e4f439fb0 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -6,14 +6,13 @@
 	import FlowInput from './FlowInput.svelte'
 	import FlowFailureModule from './FlowFailureModule.svelte'
 	import FlowConstants from './FlowConstants.svelte'
+	import TriggersEditor from '../../triggers/TriggersEditor.svelte'
 	import type { FlowModule, Flow } from '$lib/gen'
 	import { initFlowStepWarnings } from '../utils'
 	import { dfs } from '../dfs'
 	import FlowPreprocessorModule from './FlowPreprocessorModule.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
 	import { insertNewPreprocessorModule } from '../flowStateUtils'
-	import TriggersEditor from '../../triggers/TriggersEditor.svelte'
-	import { handleSelectTriggerFromKind, type Trigger } from '$lib/components/triggers/utils'
 
 	export let noEditor = false
 	export let enableAi = false
@@ -24,7 +23,7 @@
 				draft?: Flow | undefined
 		  })
 		| undefined = undefined
-	export let onDeployTrigger: (trigger: Trigger) => void = () => {}
+
 	const {
 		selectedId,
 		flowStore,
@@ -37,7 +36,7 @@
 		flowInputEditorState
 	} = getContext<FlowEditorContext>('FlowEditorContext')
 
-	const { showCaptureHint, triggersState, triggersCount } =
+	const { selectedTrigger, defaultValues, captureOn, showCaptureHint } =
 		getContext<TriggerContext>('TriggerContext')
 	function checkDup(modules: FlowModule[]): string | undefined {
 		let seenModules: string[] = []
@@ -83,7 +82,9 @@
 		disabled={disabledFlowInputs}
 		on:openTriggers={(ev) => {
 			$selectedId = 'triggers'
-			handleSelectTriggerFromKind(triggersState, triggersCount, savedFlow?.path, ev.detail.kind)
+			selectedTrigger.set(ev.detail.kind)
+			defaultValues.set(ev.detail.config)
+			captureOn.set(true)
 			showCaptureHint.set(true)
 		}}
 		on:applyArgs
@@ -117,18 +118,16 @@
 			}
 		}}
 		on:testWithArgs
+		args={$previewArgs}
 		currentPath={$pathStore}
 		initialPath={$initialPathStore}
 		{fakeInitialPath}
+		schema={$flowStore.schema}
 		{noEditor}
 		newItem={newFlow}
 		isFlow={true}
 		hasPreprocessor={!!$flowStore.value.preprocessor_module}
 		canHavePreprocessor={true}
-		args={$previewArgs}
-		isDeployed={savedFlow && !savedFlow?.draft_only}
-		schema={$flowStore.schema}
-		{onDeployTrigger}
 	/>
 {:else if $selectedId.startsWith('subflow:')}
 	<div class="p-4"
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
index 32d0cfa707..bb939a9133 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
@@ -21,7 +21,6 @@
 	import { initFlowStepWarnings } from '../utils'
 	import { dfs } from '../dfs'
 	import type { TriggerContext } from '$lib/components/triggers'
-	import { formatCron } from '$lib/utils'
 
 	export let flowModule: FlowModule
 	export let noEditor: boolean = false
@@ -31,7 +30,7 @@
 	const { selectedId, flowStateStore, flowInputsStore, flowStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
-	const { triggersState, triggersCount } = getContext<TriggerContext>('TriggerContext')
+	const { primarySchedule } = getContext<TriggerContext>('TriggerContext')
 
 	let scriptKind: 'script' | 'trigger' | 'approval' = 'script'
 	let scriptTemplate: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' = 'script'
@@ -43,33 +42,19 @@
 	export let previousModule: FlowModule | undefined = undefined
 
 	function initializePrimaryScheduleForTriggerScript(module: FlowModule) {
-		const primaryIndex = triggersState.triggers.findIndex((t) => t.isPrimary)
-		if (primaryIndex === -1) {
-			const primaryCfg = {
+		if (!$primarySchedule) {
+			$primarySchedule = {
 				summary: 'Scheduled poll of flow',
 				args: {},
-				schedule: formatCron('0 */15 * * *'),
+				cron: '0 */15 * * *',
 				timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-				enabled: true,
-				is_flow: true
-			}
-			triggersState.addDraftTrigger(triggersCount, 'schedule', undefined, primaryCfg)
-		} else if (triggersState.triggers[primaryIndex].draftConfig) {
-			//If there is a primary schedule draft update it
-			const newCfg = { ...triggersState.triggers[primaryIndex].draftConfig }
-			let updated = false
-			if (!newCfg.schedule) {
-				newCfg.schedule = formatCron('0 */15 * * *')
-				updated = true
-			}
-			if (!newCfg.enabled) {
-				newCfg.enabled = true
-				updated = true
-			}
-			if (updated) {
-				triggersState.triggers[primaryIndex].draftConfig = newCfg
+				enabled: true
 			}
 		}
+		if (!$primarySchedule.cron) {
+			$primarySchedule.cron = '0 */15 * * *'
+		}
+		$primarySchedule.enabled = true
 
 		module.stop_after_if = {
 			expr: 'result == undefined || Array.isArray(result) && result.length == 0',
diff --git a/frontend/src/lib/components/flows/content/FlowPathViewer.svelte b/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
index 31593fbf43..cb7e4afdfe 100644
--- a/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
+++ b/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import FlowGraphViewer from '$lib/components/FlowGraphViewer.svelte'
-	import type { TriggerContext } from '$lib/components/triggers'
-	import { Triggers } from '$lib/components/triggers/triggers.svelte'
+	import type { ScheduleTrigger, TriggerContext } from '$lib/components/triggers'
 	import { FlowService, type Flow, type TriggersCount } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { setContext } from 'svelte'
@@ -13,12 +12,19 @@
 
 	let flow: Flow | undefined = undefined
 
+	const selectedTriggerStore = writable<
+		'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'scheduledPoll'
+	>('webhooks')
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(undefined)
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	setContext<TriggerContext>('TriggerContext', {
+		primarySchedule: primaryScheduleStore,
+		selectedTrigger: selectedTriggerStore,
 		triggersCount: triggersCount,
 		simplifiedPoll: writable(false),
-		showCaptureHint: writable(undefined),
-		triggersState: new Triggers()
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined),
+		showCaptureHint: writable(undefined)
 	})
 
 	async function loadFlow(path: string) {
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 6bf5b11e85..10c5136384 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -60,7 +60,7 @@
 		flowInputsStore,
 		pathStore
 	} = getContext<FlowEditorContext>('FlowEditorContext')
-	const { triggersCount, triggersState } = getContext<TriggerContext>('TriggerContext')
+	const { primarySchedule, triggersCount } = getContext<TriggerContext>('TriggerContext')
 
 	const { flowPropPickerConfig } = getContext<PropPickerContext>('PropPickerContext')
 	async function insertNewModuleAtIndex(
@@ -433,7 +433,7 @@
 										undefined
 									)
 									setExpr(detail.modules[index + 1], `results.${id}`)
-									setScheduledPollSchedule(triggersState, triggersCount)
+									setScheduledPollSchedule(primarySchedule, triggersCount)
 								}
 
 								if (`flow` in detail) {
diff --git a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
index 938681f4b8..ffcc1f2572 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, getContext } from 'svelte'
 	import { Cross } from 'lucide-svelte'
-	import InsertModuleInner from './InsertModuleInner.svelte'
+	import StepGenQuick from '$lib/components/copilot/StepGenQuick.svelte'
+	import FlowInputsQuick from '../content/FlowInputsQuick.svelte'
+	import type { FlowModule } from '$lib/gen'
+	import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui'
+	import ToggleHubWorkspaceQuick from '$lib/components/ToggleHubWorkspaceQuick.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import type { ComputeConfig } from 'svelte-floating-ui'
-
+	import TopLevelNode from '../pickers/TopLevelNode.svelte'
 	import PopupV2 from '$lib/components/common/popup/PopupV2.svelte'
 	import { flip, offset } from 'svelte-floating-ui/dom'
 	import { SchedulePollIcon } from '$lib/components/icons'
@@ -12,9 +16,13 @@
 	// import type { Writable } from 'svelte/store'
 
 	const dispatch = createEventDispatcher()
+	export let stop = false
 	export let index: number = 0
 	export let funcDesc = ''
+	export let modules: FlowModule[] = []
+	export let disableAi = false
 	export let kind: 'script' | 'trigger' | 'preprocessor' | 'failure' = 'script'
+	export let allowTrigger = true
 	export let iconSize = 12
 
 	type Alignment = 'start' | 'end' | 'center'
@@ -31,8 +39,19 @@
 		autoUpdate: true
 	}
 	$: !open && (funcDesc = '')
-
+	let customUi: undefined | FlowBuilderWhitelabelCustomUi = getContext('customUi')
+	let selectedKind: 'script' | 'trigger' | 'preprocessor' | 'approval' | 'flow' | 'failure' = kind
+	let preFilter: 'all' | 'workspace' | 'hub' = 'all'
+	let loading = false
+	let small = false
 	let open = false
+
+	let width = 0
+	let height = 0
+
+	$: displayPath = width > 650 || height > 400
+
+	$: small = kind === 'preprocessor' || kind === 'failure'
 </script>
 
 <!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
@@ -74,5 +93,129 @@ shouldUsePortal={true} -->
 			{/if}
 		</button>
 	</svelte:fragment>
-	<InsertModuleInner on:close={() => close(null)} on:insert on:new on:pickFlow on:pickScript />
+	<div
+		id="flow-editor-insert-module"
+		class="flex flex-col h-[400px] {small
+			? 'w-[450px]'
+			: 'w-[650px]'} pt-1 pr-1 pl-1 gap-1.5 resize overflow-auto {small
+			? 'min-w-[450px]'
+			: 'min-w-[650px]'} min-h-[400px]"
+		on:wheel={(e) => {
+			e.stopPropagation()
+		}}
+		role="none"
+		bind:clientWidth={width}
+		bind:clientHeight={height}
+	>
+		<div class="flex flex-row items-center gap-2">
+			<StepGenQuick
+				on:escape={() => close(null)}
+				{disableAi}
+				on:insert
+				bind:funcDesc
+				{preFilter}
+				{loading}
+			/>
+			{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
+				<ToggleHubWorkspaceQuick bind:selected={preFilter} />
+			{/if}
+		</div>
+
+		<div class="flex flex-row grow min-h-0">
+			{#if kind === 'script'}
+				<div class="flex-none flex flex-col text-xs text-primary">
+					<TopLevelNode
+						label="Action"
+						selected={selectedKind === 'script'}
+						on:select={() => {
+							selectedKind = 'script'
+						}}
+					/>
+					{#if customUi?.triggers != false && allowTrigger}
+						<TopLevelNode
+							label="Trigger"
+							selected={selectedKind === 'trigger'}
+							on:select={() => {
+								selectedKind = 'trigger'
+							}}
+						/>
+					{/if}
+					<TopLevelNode
+						label="Approval/Prompt"
+						selected={selectedKind === 'approval'}
+						on:select={() => {
+							selectedKind = 'approval'
+						}}
+					/>
+					{#if customUi?.flowNode != false}
+						<TopLevelNode
+							label="Flow"
+							selected={selectedKind === 'flow'}
+							on:select={() => {
+								selectedKind = 'flow'
+							}}
+						/>
+					{/if}
+					{#if stop}
+						<TopLevelNode
+							label="End flow"
+							selected={selectedKind === 'script'}
+							on:select={() => {
+								selectedKind = 'script'
+							}}
+						/>
+					{/if}
+
+					<TopLevelNode
+						label="For loop"
+						on:select={() => {
+							close(null)
+							dispatch('new', { kind: 'forloop' })
+						}}
+					/>
+					<TopLevelNode
+						label="While loop"
+						on:select={() => {
+							close(null)
+							dispatch('new', { kind: 'whileloop' })
+						}}
+					/>
+					<TopLevelNode
+						label="Branch to one"
+						on:select={() => {
+							close(null)
+							dispatch('new', { kind: 'branchone' })
+						}}
+					/>
+					<TopLevelNode
+						label="Branch to all"
+						on:select={() => {
+							close(null)
+							dispatch('new', { kind: 'branchall' })
+						}}
+					/>
+				</div>
+			{/if}
+
+			<FlowInputsQuick
+				{selectedKind}
+				bind:loading
+				filter={funcDesc}
+				{modules}
+				{index}
+				{disableAi}
+				{funcDesc}
+				{kind}
+				on:close={() => {
+					close(null)
+				}}
+				on:new
+				on:pickScript
+				on:pickFlow
+				{preFilter}
+				{small}
+				{displayPath}
+			/>
+		</div>
+	</div>
 </PopupV2>
diff --git a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
deleted file mode 100644
index cbc3870338..0000000000
--- a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
+++ /dev/null
@@ -1,167 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
-	import StepGenQuick from '$lib/components/copilot/StepGenQuick.svelte'
-	import FlowInputsQuick from '../content/FlowInputsQuick.svelte'
-	import type { FlowModule } from '$lib/gen'
-	import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui'
-	import ToggleHubWorkspaceQuick from '$lib/components/ToggleHubWorkspaceQuick.svelte'
-	import TopLevelNode from '../pickers/TopLevelNode.svelte'
-
-	// import type { Writable } from 'svelte/store'
-
-	const dispatch = createEventDispatcher()
-	export let stop = false
-	export let index: number = 0
-	export let funcDesc = ''
-	export let modules: FlowModule[] = []
-	export let disableAi = false
-	export let kind: 'script' | 'trigger' | 'preprocessor' | 'failure' = 'script'
-	export let allowTrigger = true
-
-	let customUi: undefined | FlowBuilderWhitelabelCustomUi = getContext('customUi')
-	let selectedKind: 'script' | 'trigger' | 'preprocessor' | 'approval' | 'flow' | 'failure' = kind
-	let preFilter: 'all' | 'workspace' | 'hub' = 'all'
-	let loading = false
-	let small = false
-
-	let width = 0
-	let height = 0
-
-	$: displayPath = width > 650 || height > 400
-
-	$: small = kind === 'preprocessor' || kind === 'failure'
-</script>
-
-<!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
-
-<!-- {floatingConfig}
-floatingClasses="mt-2"
-containerClasses="border rounded-lg shadow-lg  bg-surface"
-noTransition
-shouldUsePortal={true} -->
-
-<div
-	id="flow-editor-insert-module"
-	class="flex flex-col h-[400px] {small
-		? 'w-[450px]'
-		: 'w-[650px]'} pt-1 pr-1 pl-1 gap-1.5 resize overflow-auto {small
-		? 'min-w-[450px]'
-		: 'min-w-[650px]'} min-h-[400px]"
-	on:wheel={(e) => {
-		e.stopPropagation()
-	}}
-	role="none"
-	bind:clientWidth={width}
-	bind:clientHeight={height}
->
-	<div class="flex flex-row items-center gap-2">
-		<StepGenQuick
-			on:escape={() => dispatch('close')}
-			{disableAi}
-			on:insert
-			bind:funcDesc
-			{preFilter}
-			{loading}
-		/>
-		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
-			<ToggleHubWorkspaceQuick bind:selected={preFilter} />
-		{/if}
-	</div>
-
-	<div class="flex flex-row grow min-h-0">
-		{#if kind === 'script'}
-			<div class="flex-none flex flex-col text-xs text-primary">
-				<TopLevelNode
-					label="Action"
-					selected={selectedKind === 'script'}
-					on:select={() => {
-						selectedKind = 'script'
-					}}
-				/>
-				{#if customUi?.triggers != false && allowTrigger}
-					<TopLevelNode
-						label="Trigger"
-						selected={selectedKind === 'trigger'}
-						on:select={() => {
-							selectedKind = 'trigger'
-						}}
-					/>
-				{/if}
-				<TopLevelNode
-					label="Approval/Prompt"
-					selected={selectedKind === 'approval'}
-					on:select={() => {
-						selectedKind = 'approval'
-					}}
-				/>
-				{#if customUi?.flowNode != false}
-					<TopLevelNode
-						label="Flow"
-						selected={selectedKind === 'flow'}
-						on:select={() => {
-							selectedKind = 'flow'
-						}}
-					/>
-				{/if}
-				{#if stop}
-					<TopLevelNode
-						label="End flow"
-						selected={selectedKind === 'script'}
-						on:select={() => {
-							selectedKind = 'script'
-						}}
-					/>
-				{/if}
-
-				<TopLevelNode
-					label="For loop"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'forloop' })
-					}}
-				/>
-				<TopLevelNode
-					label="While loop"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'whileloop' })
-					}}
-				/>
-				<TopLevelNode
-					label="Branch to one"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'branchone' })
-					}}
-				/>
-				<TopLevelNode
-					label="Branch to all"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'branchall' })
-					}}
-				/>
-			</div>
-		{/if}
-
-		<FlowInputsQuick
-			{selectedKind}
-			bind:loading
-			filter={funcDesc}
-			{modules}
-			{index}
-			{disableAi}
-			{funcDesc}
-			{kind}
-			on:close={() => {
-				dispatch('close')
-			}}
-			on:new
-			on:pickScript
-			on:pickFlow
-			{preFilter}
-			{small}
-			{displayPath}
-		/>
-	</div>
-</div>
diff --git a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
index 56f1f3c3ae..779d844e82 100644
--- a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
+++ b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
@@ -70,7 +70,6 @@
 			return undefined
 		}
 	}
-
 	$: infiniteList && !noHistory && initLoadInputs()
 
 	function handleSelect(e: CustomEvent) {
diff --git a/frontend/src/lib/components/flows/scheduleUtils.ts b/frontend/src/lib/components/flows/scheduleUtils.ts
index 6d77a87e51..bc81db7483 100644
--- a/frontend/src/lib/components/flows/scheduleUtils.ts
+++ b/frontend/src/lib/components/flows/scheduleUtils.ts
@@ -1,7 +1,6 @@
 import { ScheduleService, type Schedule, type TriggersCount } from '$lib/gen'
 import type { ScheduleTrigger } from '../triggers'
 import type { Writable } from 'svelte/store'
-import { writable } from 'svelte/store'
 import { get } from 'svelte/store'
 import { sendUserToast } from '$lib/utils'
 
@@ -39,8 +38,7 @@ export async function loadSchedules(
 	initialPrimarySchedule: Writable<ScheduleTrigger | false | undefined>,
 	workspace: string,
 	triggersCount: Writable<TriggersCount | undefined>,
-	loadPrimarySchedule: boolean = false,
-	isDeployed: Writable<boolean | undefined> = writable(undefined)
+	loadPrimarySchedule: boolean = false
 ) {
 	if (!path || path == '') {
 		schedules.set([])
@@ -55,9 +53,6 @@ export async function loadSchedules(
 			isFlow
 		})
 		const primary = allSchedules.find((s) => s.path == path)
-		if (primary) {
-			isDeployed.set(true)
-		}
 		let remotePrimarySchedule: ScheduleTrigger | false | undefined = undefined
 		if (loadPrimarySchedule && primary) {
 			remotePrimarySchedule = await loadSchedule(path, workspace)
@@ -69,7 +64,7 @@ export async function loadSchedules(
 						cron: primary.schedule,
 						timezone: primary.timezone,
 						enabled: primary.enabled
-					}
+				  }
 				: false
 		}
 		primarySchedule.update((ps) => (ps === undefined || forceRefresh ? remotePrimarySchedule : ps))
@@ -142,58 +137,3 @@ export async function saveSchedule(
 		}
 	}
 }
-
-export async function saveScheduleFromCfg(
-	scheduleCfg: Record<string, any>,
-	edit: boolean,
-	workspace: string
-): Promise<boolean> {
-	const requestBody = {
-		schedule: scheduleCfg.schedule,
-		timezone: scheduleCfg.timezone,
-		args: scheduleCfg.args,
-		on_failure: scheduleCfg.on_failure,
-		on_failure_times: scheduleCfg.on_failure_times,
-		on_failure_exact: scheduleCfg.on_failure_exact,
-		on_failure_extra_args: scheduleCfg.on_failure_extra_args,
-		on_recovery: scheduleCfg.on_recovery,
-		on_recovery_times: scheduleCfg.on_recovery_times,
-		on_recovery_extra_args: scheduleCfg.on_recovery_extra_args,
-		on_success: scheduleCfg.on_success,
-		on_success_extra_args: scheduleCfg.on_success_extra_args,
-		ws_error_handler_muted: scheduleCfg.ws_error_handler_muted,
-		retry: scheduleCfg.retry,
-		summary: scheduleCfg.summary,
-		description: scheduleCfg.description,
-		no_flow_overlap: scheduleCfg.no_flow_overlap,
-		tag: scheduleCfg.tag,
-		paused_until: scheduleCfg.paused_until,
-		cron_version: scheduleCfg.cron_version
-	}
-	try {
-		if (edit) {
-			await ScheduleService.updateSchedule({
-				workspace,
-				path: scheduleCfg.path,
-				requestBody: requestBody
-			})
-			sendUserToast(`Schedule ${scheduleCfg.path} updated`)
-		} else {
-			await ScheduleService.createSchedule({
-				workspace,
-				requestBody: {
-					path: scheduleCfg.path,
-					script_path: scheduleCfg.script_path,
-					is_flow: scheduleCfg.is_flow,
-					...requestBody,
-					enabled: true
-				}
-			})
-			sendUserToast(`Schedule ${scheduleCfg.path} created`)
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
-}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
index 667c0e0904..3479292e8e 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
@@ -2,15 +2,13 @@
 	import NodeWrapper from './NodeWrapper.svelte'
 	import TriggersWrapper from '../triggers/TriggersWrapper.svelte'
 	import { type GraphEventHandlers, type SimplifiableFlow } from '../../graphBuilder'
-	import type { FlowModule, TriggersCount } from '$lib/gen'
+	import type { FlowModule } from '$lib/gen'
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
 	import { Maximize2, Minimize2, Calendar } from 'lucide-svelte'
 	import { getStateColor, getStateHoverColor } from '../../util'
 	import { setScheduledPollSchedule, type TriggerContext } from '$lib/components/triggers'
 	import VirtualItemWrapper from '$lib/components/flows/map/VirtualItemWrapper.svelte'
-	import { type Trigger, type TriggerType } from '$lib/components/triggers/utils'
-	import { tick } from 'svelte'
 
 	export let data: {
 		path: string
@@ -28,24 +26,11 @@
 		selectedId: Writable<string | undefined>
 	}>('FlowGraphContext')
 
-	const { triggersCount, triggersState } = getContext<TriggerContext>('TriggerContext')
-
-	function getScheduleCfg(primary: Trigger | undefined, triggersCount: TriggersCount | undefined) {
-		return primary?.draftConfig
-			? {
-					enabled: primary?.draftConfig?.enabled,
-					schedule: primary?.draftConfig?.schedule
-				}
-			: primary?.lightConfig
-				? { enabled: primary?.lightConfig?.enabled, schedule: primary?.lightConfig?.schedule }
-				: {
-						enabled: !!triggersCount?.primary_schedule,
-						schedule: triggersCount?.primary_schedule?.schedule
-					}
-	}
+	const { primarySchedule, triggersCount, selectedTrigger } =
+		getContext<TriggerContext>('TriggerContext')
 </script>
 
-<NodeWrapper wrapperClass="shadow-md rounded-sm" let:darkMode>
+<NodeWrapper wrapperClass="shadow-md" let:darkMode>
 	{#if data.simplifiableFlow?.simplifiedFlow != true}
 		<TriggersWrapper
 			disableAi={data.disableAi}
@@ -53,7 +38,6 @@
 			path={data.path}
 			bgColor={getStateColor(undefined, darkMode)}
 			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			showDraft={data.isEditor ?? false}
 			on:new={(e) => {
 				data?.eventHandlers.insert({
 					modules: data.modules,
@@ -73,24 +57,14 @@
 				data?.eventHandlers?.simplifyFlow(true)
 			}}
 			on:openScheduledPoll={(e) => {
-				const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary && !t.isDraft)
-				triggersState.selectedTriggerIndex = primarySchedule
+				$selectedTrigger = 'scheduledPoll'
 			}}
-			on:select={() => data?.eventHandlers?.select('triggers')}
-			onSelect={async (triggerIndex: number) => {
+			on:select={(e) => {
 				data?.eventHandlers?.select('triggers')
-				await tick()
-				triggersState.selectedTriggerIndex = triggerIndex
 			}}
 			on:delete={(e) => {
 				data.eventHandlers.delete(e, '')
 			}}
-			onAddDraftTrigger={async (type: TriggerType) => {
-				const newTrigger = triggersState.addDraftTrigger(triggersCount, type)
-				data?.eventHandlers?.select('triggers')
-				await tick()
-				triggersState.selectedTriggerIndex = newTrigger
-			}}
 			selected={$selectedId == 'triggers'}
 			newItem={data.newFlow}
 			modules={data.modules}
@@ -106,23 +80,22 @@
 				data?.eventHandlers?.select(e.detail)
 			}}
 		>
-			{#if triggersState.triggers.some((t) => t.isPrimary) || $triggersCount?.primary_schedule}
-				{@const { enabled, schedule } = getScheduleCfg(
-					triggersState.triggers.find((t) => t.isPrimary),
-					$triggersCount
-				)}
+			{#if $primarySchedule || ($primarySchedule == undefined && $triggersCount?.primary_schedule?.schedule)}
 				<div class="text-2xs text-primary p-2 flex gap-2 items-center">
 					<Calendar size={12} />
 					<div>
-						Schedule every {schedule}
-						{enabled ? '' : ' (disabled)'}
+						Schedule every {$primarySchedule?.cron ?? $triggersCount?.primary_schedule?.schedule}
+						{$primarySchedule?.enabled ||
+						($primarySchedule == undefined && $triggersCount?.primary_schedule?.schedule)
+							? ''
+							: ' (disabled)'}
 					</div>
 				</div>
 			{:else}
 				<button
 					class="px-2 py-1 hover:bg-surface-inverse w-full hover:text-primary-inverse"
 					on:click={() => {
-						setScheduledPollSchedule(triggersState, triggersCount)
+						setScheduledPollSchedule(primarySchedule, triggersCount)
 					}}
 				>
 					Set primary schedule
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
index 4f9d2b4467..0ed191d335 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
@@ -1,313 +1,110 @@
 <script lang="ts">
-	import { Calendar, Mail, Webhook, Unplug, Database, Terminal } from 'lucide-svelte'
-	import { Loader2 } from 'lucide-svelte'
-	import { type ComponentType } from 'svelte'
+	import { Calendar, Mail, Webhook, Unplug, Database, PlugZap } from 'lucide-svelte'
+	import TriggerButton from './TriggerButton.svelte'
+
+	import Popover from '$lib/components/Popover.svelte'
+	import TriggerCount from './TriggerCount.svelte'
+	import { createEventDispatcher, onMount, type ComponentType } from 'svelte'
 	import { Route } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import { type TriggerContext } from '$lib/components/triggers'
-	import { enterpriseLicense } from '$lib/stores'
-	import { MqttIcon, NatsIcon, KafkaIcon, AwsIcon, GoogleCloudIcon } from '$lib/components/icons'
-	import { type Trigger, type TriggerType } from '$lib/components/triggers/utils'
-	import { Menu, Menubar, MeltButton, MenuItem, Tooltip } from '$lib/components/meltComponents'
-	import { twMerge } from 'tailwind-merge'
-	import SchedulePollIcon from '$lib/components/icons/SchedulePollIcon.svelte'
-	import TriggerLabel from '$lib/components/triggers/TriggerLabel.svelte'
+	import { FlowService, ScriptService } from '$lib/gen'
+	import { enterpriseLicense, workspaceStore } from '$lib/stores'
+	import { MqttIcon, NatsIcon, KafkaIcon, AwsIcon } from '$lib/components/icons'
+	import GoogleCloudIcon from '$lib/components/icons/GoogleCloudIcon.svelte'
 
-	const { triggersState, triggersCount } = getContext<TriggerContext>('TriggerContext')
+	const { selectedTrigger, triggersCount } = getContext<TriggerContext>('TriggerContext')
 
-	interface Props {
-		path: string
-		newItem: boolean
-		isFlow: boolean
-		selected: boolean
-		showOnlyWithCount: boolean
-		numberOfTriggers?: number
-		small?: boolean
-		vertical?: boolean
-		limit?: number
-		showDraft?: boolean
-		onSelect?: (triggerIndex: number) => void
+	export let path: string
+	export let newItem: boolean
+	export let isFlow: boolean
+	export let selected: boolean
+	export let showOnlyWithCount: boolean
+	export let triggersToDisplay: (
+		| 'webhooks'
+		| 'schedules'
+		| 'routes'
+		| 'websockets'
+		| 'kafka'
+		| 'nats'
+		| 'mqtt'
+		| 'emails'
+		| 'eventStreams'
+		| 'postgres'
+		| 'sqs'
+		| 'gcp'
+	)[] = showOnlyWithCount
+		? ['webhooks', 'schedules', 'routes', 'websockets', 'kafka', 'nats', 'emails']
+		: ['webhooks', 'schedules', 'routes', 'websockets', 'eventStreams', 'emails']
+	const dispatch = createEventDispatcher()
+
+	onMount(() => {
+		if (!newItem) {
+			loadCount()
+		}
+	})
+
+	async function loadCount() {
+		if (isFlow) {
+			$triggersCount = await FlowService.getTriggersCountOfFlow({
+				workspace: $workspaceStore!,
+				path
+			})
+		} else {
+			$triggersCount = await ScriptService.getTriggersCountOfScript({
+				workspace: $workspaceStore!,
+				path
+			})
+		}
 	}
 
-	let {
-		selected,
-		showOnlyWithCount,
-		// @ts-ignore - This is an output-only prop used with bind:
-		numberOfTriggers = $bindable(0),
-		small = true,
-		vertical = false,
-		limit,
-		showDraft = true,
-		onSelect
-	}: Props = $props()
-
-	let menuOpen = $state(false)
-
 	const triggerTypeConfig: {
-		[key in TriggerType]: { icon: ComponentType; countKey?: string; disabled?: boolean }
+		[key: string]: { icon: ComponentType; countKey?: string }
 	} = {
-		webhook: { icon: Webhook, countKey: 'webhook_count' },
-		schedule: { icon: Calendar, countKey: 'schedule_count' },
-		http: { icon: Route, countKey: 'http_routes_count' },
-		websocket: { icon: Unplug, countKey: 'websocket_count' },
+		webhooks: { icon: Webhook, countKey: 'webhook_count' },
+		schedules: { icon: Calendar, countKey: 'schedule_count' },
+		routes: { icon: Route, countKey: 'http_routes_count' },
+		websockets: { icon: Unplug, countKey: 'websocket_count' },
 		postgres: { icon: Database, countKey: 'postgres_count' },
-		kafka: { icon: KafkaIcon, countKey: 'kafka_count', disabled: !$enterpriseLicense },
-		email: { icon: Mail, countKey: 'email_count' },
-		nats: { icon: NatsIcon, countKey: 'nats_count', disabled: !$enterpriseLicense },
-		mqtt: { icon: MqttIcon, countKey: 'mqtt_count', disabled: !$enterpriseLicense },
-		sqs: { icon: AwsIcon, countKey: 'sqs_count', disabled: !$enterpriseLicense },
-		gcp: { icon: GoogleCloudIcon, countKey: 'gcp_count', disabled: !$enterpriseLicense },
-		poll: { icon: SchedulePollIcon },
-		cli: { icon: Terminal }
+		kafka: { icon: KafkaIcon, countKey: 'kafka_count' },
+		emails: { icon: Mail, countKey: 'email_count' },
+		nats: { icon: NatsIcon, countKey: 'nats_count' },
+		mqtt: { icon: MqttIcon, countKey: 'mqtt_count' },
+		sqs: { icon: AwsIcon, countKey: 'sqs_count' },
+		gcp: { icon: GoogleCloudIcon, countKey: 'gcp_count' },
+		eventStreams: { icon: PlugZap }
 	}
 
-	const allTypes = [
-		'webhook',
-		'schedule',
-		'http',
-		'websocket',
-		'postgres',
-		'kafka',
-		'email',
-		'nats',
-		'mqtt',
-		'sqs',
-		'gcp',
-		'poll',
-		'cli'
-	]
-
 	function camelCaseToWords(s: string) {
 		const result = s.replace(/([A-Z])/g, ' $1')
 		return result.charAt(0).toUpperCase() + result.slice(1).toLowerCase()
 	}
-
-	const itemClass = twMerge(
-		'text-secondary text-left font-normal w-full block px-4 py-2 text-2xs data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary flex flex-row items-center flex-nowrap'
-	)
-
-	// Group triggers by their mapped type
-	let triggersGrouped = $derived.by(() => {
-		const triggersWithIndex = triggersState.triggers.map((trigger, index) => ({
-			...trigger,
-			index
-		}))
-		const triggersFiltered = showDraft
-			? triggersWithIndex
-			: triggersWithIndex.filter((trigger) => !trigger.isDraft)
-		return triggersFiltered.reduce(
-			(acc, trigger) => {
-				const configType = trigger.type
-
-				if (!acc[configType]) {
-					acc[configType] = []
-				}
-				acc[configType].push(trigger)
-				return acc
-			},
-			{} as Record<TriggerType, Trigger[]>
-		)
-	})
-
-	const noTriggers = $derived(triggersState.triggers.length === 0)
-
-	// Extract unique trigger types for display, only keep the first
-	let allTriggerTypes = $derived.by(() => {
-		const types = !noTriggers ? (Object.keys(triggersGrouped) as TriggerType[]) : allTypes
-		//filter out types if showOnlyTriggersWithCount is true and there are no triggers for that type
-		return types.filter(
-			(type) =>
-				(!showOnlyTriggersWithCount ||
-					((triggerTypeConfig[type].countKey &&
-						($triggersCount?.[triggerTypeConfig[type].countKey] ?? 0)) ||
-						0) > 0) &&
-				!triggerTypeConfig[type].disabled
-		)
-	})
-	let triggersToDisplay = $derived(limit ? allTriggerTypes.slice(0, limit) : allTriggerTypes)
-	let extraTriggers = $derived(
-		limit && allTriggerTypes.length > limit
-			? allTriggerTypes.slice(limit).flatMap((type) => triggersGrouped[type])
-			: []
-	)
-	// Fallback for when there are no triggers in the store but we have the types
-	let extraTriggersType = $derived(
-		limit && allTriggerTypes.length > limit ? allTriggerTypes.slice(limit) : []
-	)
-	let showOnlyTriggersWithCount = $derived(showOnlyWithCount || triggersState.triggers.length === 0)
-
-	$effect(() => {
-		if (allTriggerTypes) {
-			numberOfTriggers = allTriggerTypes?.length
-		}
-	})
 </script>
 
-<Menubar
-	class={twMerge(
-		'items-center justify-center',
-		vertical ? 'flex flex-col gap-2' : 'flex flex-row gap-1'
-	)}
->
-	{#snippet children({ createMenu })}
-		{#each triggersToDisplay as type}
-			{@const isSelected =
-				selected && triggersState.selectedTrigger && triggersState.selectedTrigger?.type === type}
-			{@const singleItem =
-				type === 'webhook' ||
-				type === 'email' ||
-				type === 'cli' ||
-				(triggersGrouped[type] && triggersGrouped[type].length === 1)}
-			<Tooltip
-				disablePopup={menuOpen}
-				placement={vertical ? 'right' : 'bottom'}
-				on:click={(e) => e.stopPropagation()}
+{#each triggersToDisplay as type}
+	{@const { icon, countKey } = triggerTypeConfig[type]}
+	{#if (!showOnlyWithCount || ((countKey && $triggersCount?.[countKey]) || 0) > 0) && !(type === 'gcp' && !$enterpriseLicense) && !(type === 'sqs' && !$enterpriseLicense) && !(type === 'kafka' && !$enterpriseLicense) && !(type === 'nats' && !$enterpriseLicense) && !(type === 'mqtt')}
+		<Popover>
+			<svelte:fragment slot="text">{camelCaseToWords(type)}</svelte:fragment>
+			<TriggerButton
+				on:click={() => {
+					$selectedTrigger = type === 'eventStreams' ? 'kafka' : type
+					dispatch('select')
+				}}
+				selected={selected &&
+					($selectedTrigger === type ||
+						(type === 'eventStreams' &&
+							($selectedTrigger === 'kafka' ||
+								$selectedTrigger === 'nats' ||
+								$selectedTrigger === 'sqs' ||
+								$selectedTrigger === 'mqtt' ||
+								$selectedTrigger === 'gcp')))}
 			>
-				{#snippet text()}
-					{camelCaseToWords(type)}
-				{/snippet}
-				{#if singleItem}
-					{@render triggerButton({ type, isSelected, singleItem })}
-				{:else}
-					<Menu
-						{createMenu}
-						usePointerDownOutside
-						placement={vertical ? 'right-start' : 'bottom'}
-						menuClass={'max-w-56'}
-						class="h-fit"
-						bind:open={menuOpen}
-						disabled={!triggersGrouped[type]}
-					>
-						{#snippet trigger({ trigger })}
-							{@render triggerButton({
-								type,
-								isSelected,
-								meltElement: trigger
-							})}
-						{/snippet}
-
-						{#snippet children({ item })}
-							{#if triggersGrouped[type] && triggersGrouped[type].length > 0}
-								{#each triggersGrouped[type] as trigger}
-									{@render triggerItem({ triggerIndex: trigger.index, item })}
-								{/each}
-							{:else}
-								<div class="text-xs text-gray-400 p-2">No {camelCaseToWords(type)} triggers</div>
-							{/if}
-						{/snippet}
-					</Menu>
+				{#if countKey}
+					<TriggerCount count={$triggersCount?.[countKey]} />
 				{/if}
-			</Tooltip>
-		{/each}
-		{#if extraTriggers.length > 0}
-			<Menu
-				{createMenu}
-				usePointerDownOutside
-				placement="bottom"
-				menuClass={'w-56'}
-				class="h-fit center-center mr-1"
-				bind:open={menuOpen}
-			>
-				{#snippet trigger({ trigger })}
-					<MeltButton
-						class="w-[23px] h-[23px] rounded-md center-center text-[12px] hover:bg-slate-300 transition-all duration-100 font-normal text-secondary hover:text-primary"
-						meltElement={trigger}
-					>
-						+{extraTriggers.length}
-					</MeltButton>
-				{/snippet}
-
-				{#snippet children({ item })}
-					{#if extraTriggers.length > 0}
-						{#each extraTriggers as trigger}
-							{@render triggerItem({ triggerIndex: trigger.index, item })}
-						{/each}
-					{:else if extraTriggersType.length > 0}
-						{#each extraTriggersType as type}
-							{@render simpleTriggerItem({ item, type })}
-						{/each}
-					{/if}
-				{/snippet}
-			</Menu>
-		{/if}
-	{/snippet}
-</Menubar>
-
-{#snippet triggerButton({ type, isSelected, meltElement = undefined, singleItem = false })}
-	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig[type]}
-
-	<MeltButton
-		class={twMerge(
-			'hover:bg-surface-hover rounded-md shadow-sm text-xs relative center-center cursor-pointer bg-slate-100 dark:bg-slate-700',
-			'dark:outline dark:outline-1 outline-tertiary/20 group',
-			isSelected ? 'outline-tertiary outline' : '',
-			small ? 'w-[23px] h-[23px] outline-[1.5px]' : 'p-2 outline-[2px]'
-		)}
-		on:click={(e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			if (singleItem) {
-				onSelect?.(triggersGrouped[type][0].index)
-			}
-		}}
-		{meltElement}
-	>
-		{#if countKey}
-			{@const count = $triggersCount?.[countKey] ?? 0}
-			{#if count > 0}
-				<div
-					class={twMerge(
-						// Base styles that apply in all cases
-						'absolute z-10 rounded-full overflow-hidden',
-						'flex center-center text-primary-inverse font-mono',
-						'bg-tertiary/50 group-hover:bg-primary transition-all duration-[100ms]',
-						noTriggers ? 'bg-primary' : '',
-
-						// Size variants based on small prop
-						small
-							? '-right-[3px] -top-[3px] h-3 w-3 text-[8px]'
-							: '-right-1.5 -top-1.5 h-4 w-4 text-xs',
-
-						// Special case for no triggers
-						noTriggers && small ? 'h-3 w-3 text-[8px] -right-0.5 -top-0.5' : '',
-						noTriggers && !small ? 'h-4 w-4 text-xs -right-1 -top-1' : ''
-					)}
-				>
-					{#if count === undefined}
-						<Loader2 class="animate-spin text-2xs" />
-					{:else}
-						<p>{count}</p>
-					{/if}
-				</div>
-			{/if}
-		{/if}
-		<SvelteComponent size={small ? 12 : 14} />
-	</MeltButton>
-{/snippet}
-
-{#snippet triggerItem({ triggerIndex, item })}
-	<MenuItem
-		{item}
-		class={itemClass}
-		on:click={() => {
-			onSelect?.(triggerIndex)
-		}}
-	>
-		<TriggerLabel trigger={triggersState.triggers[triggerIndex]} />
-	</MenuItem>
-{/snippet}
-
-{#snippet simpleTriggerItem({ item, type })}
-	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig[type]}
-	<MenuItem {item} class={itemClass}>
-		<div class="flex flex-row items-center gap-2">
-			<SvelteComponent size={14} />
-			{camelCaseToWords(type)}
-			{#if countKey}
-				<div class="text-xs text-gray-400">
-					{$triggersCount?.[countKey] ?? 0}
-				</div>
-			{/if}
-		</div>
-	</MenuItem>
-{/snippet}
+				<svelte:component this={icon} size={12} />
+			</TriggerButton>
+		</Popover>
+	{/if}
+{/each}
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
index 36fbcbb39b..0dd46fb194 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -1,124 +1,59 @@
 <script lang="ts">
 	import { NODE } from '../../util'
+
 	import { createEventDispatcher } from 'svelte'
-	import type { TriggerType } from '$lib/components/triggers/utils'
+
 	import TriggersBadge from './TriggersBadge.svelte'
+	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
 	import type { FlowModule } from '$lib/gen'
-	import { Plus } from 'lucide-svelte'
-	import InsertModuleInner from '$lib/components/flows/map/InsertModuleInner.svelte'
-	import AddTriggersButton from '$lib/components/triggers/AddTriggersButton.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	interface Props {
-		path: string
-		newItem: boolean
-		selected: boolean
-		isEditor?: boolean
-		disableAi?: boolean
-		modules?: FlowModule[]
-		bgColor: string
-		bgHoverColor?: string
-		showDraft?: boolean
-		onSelect?: (triggerIndex: number) => void
-		onAddDraftTrigger?: (type: TriggerType) => void
-	}
-
-	let {
-		path,
-		newItem,
-		selected,
-		isEditor = false,
-		disableAi = false,
-		modules = [],
-		bgColor,
-		bgHoverColor = '',
-		showDraft,
-		onSelect,
-		onAddDraftTrigger
-	}: Props = $props()
-
-	let showTriggerScriptPicker = $state(false)
-	let numberOfTriggers = $state(0)
+	export let path: string
+	export let newItem: boolean
+	export let selected: boolean
+	export let isEditor: boolean = false
+	export let disableAi: boolean = false
+	export let modules: FlowModule[] = []
+	export let bgColor: string
+	export let bgHoverColor: string = ''
 
 	const dispatch = createEventDispatcher()
 
-	let hover = $state(false)
-	let addTriggersButton = $state<AddTriggersButton | undefined>(undefined)
+	let hover = false
 </script>
 
 <div style={`width: ${NODE.width}px;`}>
 	<button
 		style="background-color: {hover && bgHoverColor ? bgHoverColor : bgColor};"
-		class="relative flex w-full flex-row gap-1.5 px-2 p-1 items-center justify-center rounded-sm {selected
-			? 'outline  outline-2  outline-gray-600 dark:bg-white/5 dark:outline-gray-400'
+		class="flex w-full flex-row gap-1 px-2 p-1 items-center {selected
+			? 'outline  outline-2  outline-gray-600 rounded-sm dark:bg-white/5 dark:outline-gray-400'
 			: ''}"
-		onclick={() => {
+		on:pointerdown={() => {
 			dispatch('select')
 		}}
-		onmouseenter={() => (hover = true)}
-		onmouseleave={() => (hover = false)}
+		on:mouseenter={() => (hover = true)}
+		on:mouseleave={() => (hover = false)}
 	>
-		<div
-			class={twMerge(
-				'flex flex-row items-center text-2xs font-normal',
-				numberOfTriggers > 6 ? 'absolute left-0 -top-[20px]' : ''
-			)}
-		>
-			Triggers
+		<div class="flex flex-col mr-1 ml-1">
+			<div class="flex flex-row items-center text-2xs font-normal"> Triggers </div>
 		</div>
-
-		<TriggersBadge
-			showOnlyWithCount={false}
-			{showDraft}
-			{path}
-			{newItem}
-			isFlow
-			{selected}
-			bind:numberOfTriggers
-			limit={isEditor ? 7 : 8}
-			{onSelect}
-		/>
-
+		<TriggersBadge showOnlyWithCount={false} {path} {newItem} isFlow {selected} on:select />
 		{#if isEditor}
-			<AddTriggersButton
-				bind:this={addTriggersButton}
-				onAddScheduledPoll={() => {
-					showTriggerScriptPicker = true
+			<InsertModuleButton
+				{disableAi}
+				on:new
+				on:pickScript
+				on:select
+				on:open={() => {
+					dispatch('openScheduledPoll')
 				}}
-				class="w-fit h-fit"
-				triggerScriptPicker={showTriggerScriptPicker ? triggerScriptPicker : undefined}
-				onClose={() => {
-					showTriggerScriptPicker = false
-				}}
-				isEditor
-				{onAddDraftTrigger}
-			>
-				<button
-					class="hover:bg-slate-300 dark:hover:bg-slate-600 rounded-md outline-1 outline-dashed outline-secondary outline-offset-[-1px] text-xs w-[23px] h-[23px] relative center-center cursor-pointer text-secondary"
-				>
-					<Plus size={12} />
-				</button>
-			</AddTriggersButton>
+				kind="trigger"
+				index={0}
+				{modules}
+				class={twMerge(
+					'hover:bg-surface-hover rounded-md border text-xs w-[23px] h-[23px] relative center-center cursor-pointer bg-surface outline-0'
+				)}
+			/>
 		{/if}
 	</button>
 </div>
-
-{#snippet triggerScriptPicker()}
-	<div class="border rounded-lg shadow-lg bg-surface z5000">
-		<InsertModuleInner
-			{disableAi}
-			on:new
-			on:pickScript
-			on:select
-			on:open={() => {
-				dispatch('openScheduledPoll')
-			}}
-			on:close={() => {
-				addTriggersButton?.close()
-			}}
-			kind="trigger"
-			index={0}
-			{modules}
-		/>
-	</div>
-{/snippet}
diff --git a/frontend/src/lib/components/icons/GoogleCloudIcon.svelte b/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
index 65a725c8f6..398fb378ee 100644
--- a/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
+++ b/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	export let size: number = 16
+	export let height = '20px'
+	export let width = '20px'
 </script>
 
 <svg
-	width={size}
-	height={size}
+	{width}
+	{height}
 	viewBox="0 -25 256 256"
 	version="1.1"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/jobs/utils.ts b/frontend/src/lib/components/jobs/utils.ts
index 018726bdef..6e5f570529 100644
--- a/frontend/src/lib/components/jobs/utils.ts
+++ b/frontend/src/lib/components/jobs/utils.ts
@@ -1,11 +1,15 @@
-import { JobService, type RunScriptPreviewData } from '$lib/gen'
+import { JobService, type RunScriptByPathData, type RunScriptPreviewData } from '$lib/gen'
 
-export async function runPreviewJobAndPollResult(
-	data: RunScriptPreviewData,
+
+function isRunScriptByPathData(arg:RunScriptPreviewData | RunScriptByPathData): arg is RunScriptByPathData {
+  return (arg as RunScriptByPathData).path !== undefined;
+}
+
+export async function runScriptAndPollResult(
+	data: RunScriptPreviewData | RunScriptByPathData,
 	{ maxRetries = 7, withJobData }: { maxRetries?: number; withJobData?: boolean } = {}
 ): Promise<unknown> {
-	const uuid = await JobService.runScriptPreview(data)
-
+	const uuid = (isRunScriptByPathData(data) ? await JobService.runScriptByPath(data) : await JobService.runScriptPreview(data)) as string
 	let attempts = 0
 	while (attempts < maxRetries) {
 		try {
diff --git a/frontend/src/lib/components/meltComponents/MeltButton.svelte b/frontend/src/lib/components/meltComponents/MeltButton.svelte
index 5d4eeecccc..be528e38fe 100644
--- a/frontend/src/lib/components/meltComponents/MeltButton.svelte
+++ b/frontend/src/lib/components/meltComponents/MeltButton.svelte
@@ -1,21 +1,12 @@
 <script lang="ts">
 	import { type AnyMeltElement } from '@melt-ui/svelte'
-	import { conditionalMelt } from '$lib/utils'
 
-	export let meltElement: AnyMeltElement | undefined = undefined
+	export let meltElement: AnyMeltElement
 	export let type: 'button' | 'submit' | 'reset' | null | undefined = undefined
 	export let title: string = ''
 	export let id: string | undefined = undefined
 </script>
 
-<button
-	use:conditionalMelt={meltElement}
-	class={$$props.class}
-	{type}
-	{title}
-	{id}
-	{...$meltElement}
-	on:click
->
+<button use:meltElement class={$$props.class} {type} {title} {id} {...$meltElement}>
 	<slot />
 </button>
diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte
index a53a2399ff..e218dda475 100644
--- a/frontend/src/lib/components/meltComponents/Menu.svelte
+++ b/frontend/src/lib/components/meltComponents/Menu.svelte
@@ -15,8 +15,6 @@
 	export let createMenu: MenubarBuilders['createMenu']
 	export let invisible: boolean = false
 	export let usePointerDownOutside: boolean = false
-	export let menuClass: string = ''
-	export let open = false
 
 	// Use the passed createMenu function
 	const menu = createMenu({
@@ -34,6 +32,8 @@
 		states
 	} = menu
 
+	let open = false
+
 	const sync = createSync(states)
 	$: sync.open(open, (v) => (open = Boolean(v)))
 
@@ -76,13 +76,12 @@
 			class={twMerge(
 				'z-[6000] border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto',
 				lightMode ? 'bg-surface-inverse' : 'bg-surface',
-				invisible ? 'opacity-0' : '',
-				menuClass
+				invisible ? 'opacity-0' : ''
 			)}
 			on:click
 		>
 			<div class="py-1" style="max-height: {maxHeight}px; ">
-				<slot {item} {open} />
+				<slot {item} />
 			</div>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/meltComponents/Tooltip.svelte b/frontend/src/lib/components/meltComponents/Tooltip.svelte
index 71f41fad04..45c9591857 100644
--- a/frontend/src/lib/components/meltComponents/Tooltip.svelte
+++ b/frontend/src/lib/components/meltComponents/Tooltip.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+	import Markdown from 'svelte-exmarkdown'
 	import type { Placement } from '@floating-ui/core'
-	import { InfoIcon } from 'lucide-svelte'
+	import { ExternalLink, InfoIcon } from 'lucide-svelte'
+	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	import { zIndexes } from '$lib/zIndexes'
 
 	import { createTooltip, melt } from '@melt-ui/svelte'
 	import { fade } from 'svelte/transition'
-	import TooltipInner from '../TooltipInner.svelte'
 
 	export let light = false
 	export let placement: Placement | undefined = 'bottom'
@@ -17,6 +18,8 @@
 	export let closeDelay: number = 0
 	export let portal: string | undefined | null = 'body'
 
+	const plugins = [gfmPlugin()]
+
 	const {
 		elements: { trigger, content },
 		states: { open }
@@ -46,9 +49,27 @@
 {/if}
 
 {#if $open && !disablePopup}
-	<div use:melt={$content} transition:fade={{ duration: 100 }} style="z-index: {zIndexes.tooltip}">
-		<TooltipInner {documentationLink} {markdownTooltip}>
+	<div
+		use:melt={$content}
+		transition:fade={{ duration: 100 }}
+		class="shadow max-w-sm break-words py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left"
+		style="z-index: {zIndexes.tooltip}"
+	>
+		{#if markdownTooltip}
+			<div class="prose-sm">
+				<Markdown md={markdownTooltip} {plugins} />
+			</div>
+		{:else}
 			<slot name="text" />
-		</TooltipInner>
+		{/if}
+
+		{#if documentationLink}
+			<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
+				<div class="flex flex-row gap-2 mt-4">
+					See documentation
+					<ExternalLink size="16" />
+				</div>
+			</a>
+		{/if}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 10c778f669..e2bb280c91 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <Portal name="run-row">
-	<ScheduleEditor onUpdate={() => goto('/schedules')} bind:this={scheduleEditor} />
+	<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 </Portal>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
index 1dd5352614..7a15c4f31a 100644
--- a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
@@ -6,7 +6,6 @@
 
 	let name: string = ''
 	export let customName: string | undefined = undefined
-	export let disabled: boolean = false
 
 	const dispatch = createEventDispatcher()
 
@@ -16,7 +15,7 @@
 	}
 </script>
 
-<Popover closeButton={false} class="w-full" {disabled}>
+<Popover closeButton={false} class="w-full">
 	<svelte:fragment slot="trigger">
 		<slot name="trigger" />
 	</svelte:fragment>
@@ -31,7 +30,6 @@
 						close()
 					}
 				}}
-				{disabled}
 			/>
 			<Button
 				variant="contained"
@@ -42,7 +40,7 @@
 					addField()
 					close()
 				}}
-				disabled={!name || disabled}
+				disabled={!name}
 				shortCut={{ Icon: CornerDownLeft, withoutModifier: true }}
 			>
 				Add {customName ? customName.toLowerCase() : 'field'}
diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 0d991dbaf9..2452ae44a2 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -76,11 +76,7 @@
 </script>
 
 <div
-	class={twMerge(
-		'h-full',
-		rounded ? 'rounded-md overflow-hidden' : '',
-		noBorder ? 'border-0' : 'border'
-	)}
+	class={twMerge('h-full', rounded ? 'rounded-md' : '', noBorder ? 'border-0' : 'border')}
 	bind:clientHeight={tableHeight}
 >
 	<List justify="between" gap="none" hFull={true}>
diff --git a/frontend/src/lib/components/triggers.ts b/frontend/src/lib/components/triggers.ts
index a9a817fe0d..ad3ded6b1d 100644
--- a/frontend/src/lib/components/triggers.ts
+++ b/frontend/src/lib/components/triggers.ts
@@ -1,7 +1,5 @@
 import type { CaptureTriggerKind, TriggersCount } from '$lib/gen'
-import { type Writable } from 'svelte/store'
-import { formatCron } from '$lib/utils'
-import { Triggers } from './triggers/triggers.svelte'
+import type { Writable } from 'svelte/store'
 
 export type ScheduleTrigger = {
 	summary: string | undefined
@@ -13,32 +11,34 @@ export type ScheduleTrigger = {
 }
 
 export type TriggerContext = {
+	selectedTrigger: Writable<TriggerKind>
+	primarySchedule: Writable<ScheduleTrigger | undefined | false>
 	triggersCount: Writable<TriggersCount | undefined>
 	simplifiedPoll: Writable<boolean | undefined>
+	defaultValues: Writable<Record<string, any> | undefined>
+	captureOn: Writable<boolean | undefined>
 	showCaptureHint: Writable<boolean | undefined>
-	triggersState: Triggers
 }
 
 export function setScheduledPollSchedule(
-	triggersState: Triggers,
+	primarySchedule: Writable<ScheduleTrigger | undefined | false>,
 	triggersCount: Writable<TriggersCount | undefined>
 ) {
-	const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary)
-	if (primarySchedule !== -1) {
-		triggersState.selectedTriggerIndex = primarySchedule
-	} else {
-		const draftCfg = {
-			enabled: true,
-			summary: 'Check for new events every 5 minutes',
-			schedule: formatCron('0 */5 * * * *'),
-			timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-			args: {},
-			is_flow: true
+	const cron = '0 */5 * * * *'
+	primarySchedule.set({
+		enabled: true,
+		summary: 'Check for new events every 5 minutes',
+		cron: cron,
+		timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		args: {}
+	})
+	triggersCount.update((triggersCount) => {
+		return {
+			...(triggersCount ?? {}),
+			schedule_count: (triggersCount?.schedule_count ?? 0) + 1,
+			primary_schedule: { schedule: cron }
 		}
-
-		triggersState.addDraftTrigger(triggersCount, 'schedule', undefined, draftCfg)
-		triggersState.selectedTriggerIndex = triggersState.triggers.length - 1
-	}
+	})
 }
 
 export type TriggerKind =
@@ -74,7 +74,7 @@ export function captureTriggerKindToTriggerKind(kind: CaptureTriggerKind): Trigg
 		case 'sqs':
 			return 'sqs'
 		case 'postgres':
-			return 'postgres'
+			return  'postgres'
 		case 'gcp':
 			return 'gcp'
 		default:
diff --git a/frontend/src/lib/components/triggers/AddTriggersButton.svelte b/frontend/src/lib/components/triggers/AddTriggersButton.svelte
deleted file mode 100644
index 4eea6fee9f..0000000000
--- a/frontend/src/lib/components/triggers/AddTriggersButton.svelte
+++ /dev/null
@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { triggerIconMap, type TriggerType } from './utils'
-	import DropdownV2 from '$lib/components/DropdownV2.svelte'
-	import { SchedulePollIcon } from '$lib/components/icons'
-	import type { Placement } from '@floating-ui/core'
-	import { isCloudHosted } from '$lib/cloud'
-	import { CloudOff } from 'lucide-svelte'
-
-	interface Props {
-		setDropdownWidthToButtonWidth?: boolean
-		children?: import('svelte').Snippet
-		triggerScriptPicker?: import('svelte').Snippet | undefined
-		class?: string
-		placement?: Placement
-		isEditor?: boolean
-		onAddDraftTrigger?: (type: TriggerType) => void
-		onAddScheduledPoll?: () => void
-		onClose?: () => void
-	}
-
-	let {
-		setDropdownWidthToButtonWidth = false,
-		children,
-		class: className,
-		triggerScriptPicker,
-		placement = 'bottom',
-		isEditor = false,
-		onAddDraftTrigger,
-		onAddScheduledPoll,
-		onClose
-	}: Props = $props()
-
-	let dropdown: DropdownV2 | undefined
-
-	const cloudHosted = isCloudHosted()
-
-	// Dropdown items for adding new triggers
-	const addTriggerItems: Item[] = [
-		{
-			displayName: 'Schedule',
-			action: () => onAddDraftTrigger?.('schedule'),
-			icon: triggerIconMap.schedule
-		},
-		{ displayName: 'HTTP', action: () => onAddDraftTrigger?.('http'), icon: triggerIconMap.http },
-		{
-			displayName: 'WebSocket',
-			action: () => onAddDraftTrigger?.('websocket'),
-			icon: triggerIconMap.websocket,
-			extra: cloudHosted ? extra : undefined
-		},
-		{
-			displayName: 'Postgres',
-			action: () => onAddDraftTrigger?.('postgres'),
-			icon: triggerIconMap.postgres,
-			extra: cloudHosted ? extra : undefined
-		},
-		{
-			displayName: 'Kafka',
-			action: () => onAddDraftTrigger?.('kafka'),
-			icon: triggerIconMap.kafka,
-			extra: cloudHosted ? extra : undefined
-		},
-		{
-			displayName: 'NATS',
-			action: () => onAddDraftTrigger?.('nats'),
-			icon: triggerIconMap.nats,
-			extra: cloudHosted ? extra : undefined
-		},
-		{
-			displayName: 'MQTT',
-			action: () => onAddDraftTrigger?.('mqtt'),
-			icon: triggerIconMap.mqtt,
-			extra: cloudHosted ? extra : undefined
-		},
-		{
-			displayName: 'SQS',
-			action: () => onAddDraftTrigger?.('sqs'),
-			icon: triggerIconMap.sqs,
-			extra: cloudHosted ? extra : undefined
-		},
-		{
-			displayName: 'GCP Pub/Sub',
-			action: () => onAddDraftTrigger?.('gcp'),
-			icon: triggerIconMap.gcp,
-			extra: cloudHosted ? extra : undefined
-		},
-		{
-			displayName: 'Scheduled Poll',
-			action: (e) => {
-				e.preventDefault()
-				onAddDraftTrigger?.('poll')
-				onAddScheduledPoll?.()
-			},
-			icon: SchedulePollIcon,
-			hidden: !isEditor
-		}
-	].filter((item) => !item.hidden)
-
-	let triggersButtonWidth = $state(0)
-
-	export function close() {
-		dropdown?.close()
-	}
-</script>
-
-{#snippet extra()}
-	<p
-		class="text-xs text-yellow-700 dark:text-yellow-100/90 bg-yellow-50 dark:bg-yellow-900/40 rounded-md p-1 px-2 -my-1"
-		title="Disabled in multi-tenant cloud"
-	>
-		<CloudOff size={14} />
-	</p>
-{/snippet}
-
-<DropdownV2
-	bind:this={dropdown}
-	items={addTriggerItems}
-	{placement}
-	class={className}
-	customWidth={setDropdownWidthToButtonWidth ? triggersButtonWidth : undefined}
-	usePointerDownOutside
-	customMenu={!!triggerScriptPicker}
-	on:close={() => onClose?.()}
->
-	{#snippet buttonReplacement()}
-		<div class={className} bind:clientWidth={triggersButtonWidth}>
-			{@render children?.()}
-		</div>
-	{/snippet}
-	{#snippet menu()}
-		{@render triggerScriptPicker?.()}
-	{/snippet}
-</DropdownV2>
diff --git a/frontend/src/lib/components/triggers/CaptureSection.svelte b/frontend/src/lib/components/triggers/CaptureSection.svelte
index e02ef909f1..1237683dcc 100644
--- a/frontend/src/lib/components/triggers/CaptureSection.svelte
+++ b/frontend/src/lib/components/triggers/CaptureSection.svelte
@@ -1,4 +1,4 @@
-<script module lang="ts">
+<script context="module" lang="ts">
 	export type CaptureInfo = {
 		active: boolean
 		hasPreprocessor: boolean
@@ -6,70 +6,33 @@
 		isFlow: boolean
 		path: string
 		connectionInfo: ConnectionInfo | undefined
+		loading?: boolean
 	}
 </script>
 
 <script lang="ts">
-	import { fade } from 'svelte/transition'
+	import { slide } from 'svelte/transition'
 	import AnimatedButton from '../common/button/AnimatedButton.svelte'
 	import PulseButton from '../common/button/PulseButton.svelte'
 	import Button from '../common/button/Button.svelte'
-	import { CircleStop, History, Play, Loader2 } from 'lucide-svelte'
+	import { CircleStop } from 'lucide-svelte'
 	import ConnectionIndicator, {
 		type ConnectionInfo
 	} from '../common/alert/ConnectionIndicator.svelte'
 	import CaptureTable from './CaptureTable.svelte'
-	import { createEventDispatcher, onDestroy, getContext, onMount } from 'svelte'
-	import type { CaptureTriggerKind, Capture } from '$lib/gen'
+	import { createEventDispatcher, onDestroy, getContext } from 'svelte'
+	import type { CaptureTriggerKind } from '$lib/gen'
 	import CaptureIcon from './CaptureIcon.svelte'
+	import Tooltip from '../Tooltip.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import { Popover } from '$lib/components/meltComponents'
-	import { CaptureService } from '$lib/gen'
-	import { workspaceStore } from '$lib/stores'
-	import { isObject, sendUserToast } from '$lib/utils'
-	import { triggerIconMap } from './utils'
-	import { formatDateShort } from '$lib/utils'
-	import DisplayResult from '$lib/components/DisplayResult.svelte'
-	import DisplayResultControlBar from '$lib/components/DisplayResultControlBar.svelte'
-	import { base } from '$lib/base'
-	import Description from '$lib/components/Description.svelte'
-	import { twMerge } from 'tailwind-merge'
-	import { FlaskConical } from 'lucide-svelte'
-	import Alert from '../common/alert/Alert.svelte'
-
-	interface Props {
-		disabled?: boolean | undefined
-		captureType: CaptureTriggerKind
-		captureInfo: CaptureInfo
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		captureLoading?: boolean
-		description?: import('svelte').Snippet
-		children?: import('svelte').Snippet
-		displayAlert?: boolean
-	}
-
-	let {
-		disabled = undefined,
-		captureType,
-		captureInfo,
-		hasPreprocessor = false,
-		isFlow = false,
-		captureLoading = false,
-		description,
-		children,
-		displayAlert = false
-	}: Props = $props()
-
-	const testKind: 'preprocessor' | 'main' = $derived(hasPreprocessor ? 'preprocessor' : 'main')
+	export let disabled: boolean
+	export let captureType: CaptureTriggerKind
+	export let captureInfo: CaptureInfo
+	export let captureTable: CaptureTable | undefined
 
 	const dispatch = createEventDispatcher<{
 		captureToggle: { disableOnly?: boolean }
-		updateSchema: { payloadData: Record<string, any>; redirect: boolean; args?: boolean }
-		addPreprocessor: null
-		testWithArgs: Record<string, any>
-		applyArgs: { kind: 'main' | 'preprocessor'; args: Record<string, any> }
+		updateSchema: { payloadData: Record<string, any>; redirect: boolean }
 	}>()
 
 	const { showCaptureHint } = getContext<TriggerContext>('TriggerContext')
@@ -81,16 +44,16 @@
 				disableOnly: true
 			})
 		}
-		stopCaptureListening()
 	})
 
-	/* function handleUpdateSchema(e: any) {
+	function handleUpdateSchema(e: any) {
 		dispatch('updateSchema', {
 			payloadData: e.detail.payloadData,
 			redirect: e.detail.redirect
 		})
-	} */
+	}
 
+	let openingDuration = 400
 	let pulseButton: PulseButton | undefined
 	function updateShowCaptureHint(show: boolean | undefined) {
 		if (show) {
@@ -100,400 +63,77 @@
 			}, 300)
 		}
 	}
-	$effect(() => {
-		updateShowCaptureHint($showCaptureHint)
-	})
-
-	let selectedCapture: Capture | undefined = $state(undefined)
-	function handleSelectCapture(e: any) {
-		if (e.detail) {
-			selectCapture(e.detail)
-		} else if (lastCapture) {
-			selectCapture(lastCapture)
-		}
-	}
-
-	// New code for capture fetching and management
-	let lastCapture: Capture | undefined = $state(undefined)
-	let newCaptureReceived = $state(false)
-	let isLoadingBigPayload = $state(false)
-	let capturePollingInterval: ReturnType<typeof setInterval> | undefined = undefined
-	let lastCaptureId: number | undefined = undefined
-	let displayResult: DisplayResult | undefined = $state(undefined)
-	let toolbarLocation: 'internal' | 'external' | undefined = $state(undefined)
-
-	function selectCapture(capture: Capture) {
-		selectedCapture = capture
-		if (
-			capture.main_args === 'WINDMILL_TOO_BIG' ||
-			capture.preprocessor_args === 'WINDMILL_TOO_BIG'
-		) {
-			loadBigPayload(capture)
-		}
-	}
-
-	// Function to fetch the last capture when component mounts
-	async function fetchLastCapture() {
-		try {
-			if (!captureInfo.path) return
-
-			const captures = await CaptureService.listCaptures({
-				workspace: $workspaceStore!,
-				runnableKind: captureInfo.isFlow ? 'flow' : 'script',
-				path: captureInfo.path,
-				triggerKind: captureType,
-				page: 1,
-				perPage: 1
-			})
-
-			if (captures.length > 0) {
-				lastCapture = captures[0]
-				lastCaptureId = lastCapture.id
-
-				selectCapture(lastCapture)
-			}
-		} catch (error) {
-			console.error('Failed to fetch last capture:', error)
-		}
-	}
-
-	// Function to listen for new captures (polls every 100ms)
-	function listenForCaptures() {
-		if (capturePollingInterval) return
-
-		capturePollingInterval = setInterval(async () => {
-			if (!captureInfo.active) return
-
-			try {
-				const captures = await CaptureService.listCaptures({
-					workspace: $workspaceStore!,
-					runnableKind: captureInfo.isFlow ? 'flow' : 'script',
-					path: captureInfo.path,
-					triggerKind: captureType,
-					page: 1,
-					perPage: 1
-				})
-
-				if (captures.length > 0 && lastCaptureId !== captures[0].id) {
-					lastCapture = captures[0]
-					lastCaptureId = lastCapture.id
-
-					// Trigger animation for new capture
-					showNewCaptureAnimation()
-
-					selectCapture(lastCapture)
-				}
-			} catch (error) {
-				console.error('Error polling for new captures:', error)
-			}
-		}, 100)
-	}
-
-	// Stop listening for captures
-	function stopCaptureListening() {
-		if (capturePollingInterval) {
-			clearInterval(capturePollingInterval)
-			capturePollingInterval = undefined
-		}
-	}
-
-	// Show animation when new capture arrives
-	function showNewCaptureAnimation() {
-		newCaptureReceived = true
-		setTimeout(() => {
-			newCaptureReceived = false
-		}, 2000) // Animation duration
-	}
-
-	// Load big payload when requested
-	async function loadBigPayload(capture: Capture | undefined) {
-		if (!capture) return
-
-		try {
-			isLoadingBigPayload = true
-			const fullCapture = await CaptureService.getCapture({
-				workspace: $workspaceStore!,
-				id: capture.id
-			})
-
-			capture.main_args = fullCapture.main_args
-			capture.preprocessor_args = fullCapture.preprocessor_args
-			isLoadingBigPayload = false
-		} catch (error) {
-			sendUserToast('Failed to load large payload', true)
-			isLoadingBigPayload = false
-		}
-	}
-
-	function getCapturePayload(capture: Capture) {
-		let payloadData: any = {}
-		const preprocessor_args = isObject(capture.preprocessor_args) ? capture.preprocessor_args : {}
-		if ('wm_trigger' in preprocessor_args) {
-			// v1
-			payloadData =
-				testKind === 'preprocessor'
-					? {
-							...(typeof capture.main_args === 'object' ? capture.main_args : {}),
-							...preprocessor_args
-						}
-					: capture.main_args
-		} else {
-			// v2
-			payloadData = testKind === 'preprocessor' ? capture.preprocessor_args : capture.main_args
-		}
-		return payloadData
-	}
-
-	// Start or stop capture listening based on active state
-	$effect(() => {
-		if (captureInfo.active) {
-			listenForCaptures()
-		} else {
-			stopCaptureListening()
-		}
-	})
-
-	// Fetch last capture when component mounts
-	onMount(() => {
-		fetchLastCapture()
-	})
+	$: updateShowCaptureHint($showCaptureHint)
 </script>
 
-<Splitpanes>
-	<Pane size={50} minSize={30}>
-		<div
-			class="flex flex-col gap-1 px-4 py-2 h-full w-full overflow-auto"
-			style="scrollbar-gutter: stable"
-		>
-			<div class="text-sm text-secondary flex items-center gap-1">
-				<FlaskConical size={16} />
-				Test trigger
-			</div>
-			<div class="flex flex-col gap-1 mb-4 w-full">
-				<div class="flex justify-center w-full">
-					<div class="relative h-fit">
-						<AnimatedButton
-							animate={captureInfo.active}
-							wrapperClasses={captureInfo.active ? 'm-[-2px]' : ''}
-							baseRadius="7px"
+<div transition:slide={{ duration: openingDuration }} class="pb-12 overflow-hidden">
+	<div class="border p-4 rounded-lg">
+		<div class="flex flex-col gap-1 mb-4">
+			<div class="flex flex-row items-center justify-start gap-1">
+				<PulseButton bind:this={pulseButton} numberOfPulses={1} pulseDuration={1}>
+					<AnimatedButton
+						animate={captureInfo.active || captureInfo.loading}
+						baseRadius="6px"
+						wrapperClasses="ml-[-2px]"
+					>
+						<Button
+							size="xs2"
+							on:click={() => dispatch('captureToggle', {})}
+							variant="border"
+							{disabled}
+							color="light"
+							btnClasses={captureInfo.active ? 'text-blue-500 hover:text-blue-500' : ''}
 						>
-							<Button
-								size="xs"
-								on:click={() => dispatch('captureToggle', {})}
-								{disabled}
-								color={captureInfo.active ? 'light' : 'dark'}
-								btnClasses={captureInfo.active ? 'text-blue-500' : ''}
-								startIcon={captureInfo.active
-									? { icon: CircleStop }
-									: { icon: CaptureIcon, props: { variant: 'redDot' } }}
-								loading={captureLoading}
-							>
+							<div class="flex flex-row items-center gap-1 w-28 justify-center">
 								{#if captureInfo.active}
-									<p class="w-24" transition:fade={{ duration: 300 }}>Stop capturing</p>
+									<CircleStop size={14} />
 								{:else}
-									<p class="w-24" transition:fade={{ duration: 300 }}>Start capturing</p>
+									<CaptureIcon variant="redDot" size={14} />
 								{/if}
-							</Button>
-						</AnimatedButton>
+								{captureInfo.active ? 'Stop' : 'Start capturing'}
+							</div>
+						</Button>
+					</AnimatedButton>
+				</PulseButton>
 
-						<div class="absolute top-1/2 -translate-y-1/2 -right-5">
-							{#if captureInfo.active}
-								<ConnectionIndicator connectionInfo={captureInfo.connectionInfo} />
-							{/if}
-						</div>
-					</div>
-				</div>
-
-				<div class="mt-4 mb-2">
-					{#if displayAlert}
-						<Alert type="warning" title="Trigger deployed" size="xs" class="mb-4">
-							Capturing will suscribe to the trigger endpoint. Treat carefully.
-						</Alert>
-					{/if}
-					<Description>
-						<div class="relative min-h-8">
-							{#key (captureInfo.active, disabled)}
-								<div
-									class={twMerge(
-										'absolute top-0 left-0 w-full text-center',
-										disabled === true ? 'text-red-600 dark:text-red-400' : ''
-									)}
-									in:fade={{ duration: 100, delay: 50 }}
-									out:fade={{ duration: 50 }}
-								>
-									{#if disabled === true}
-										Enter a valid configuration to start capturing.
-									{:else}
-										{@render description?.()}
-									{/if}
-								</div>
-							{/key}
-						</div>
-					</Description>
-				</div>
-
-				{#if children}
-					<div class="grow min-h-0 flex flex-col gap-4">
-						{@render children?.()}
-					</div>
-				{/if}
-			</div>
-		</div>
-	</Pane>
-
-	<Pane minSize={30} class="flex flex-col">
-		<div class="flex flex-row gap-1 justify-between min-h-[33.5px] pl-1 pr-4">
-			<div class="flex flex-row gap-1 items-center">
-				{#if lastCapture}
-					<Popover
-						placement="left"
-						contentClasses="w-48 min-h-48 max-h-64 overflow-auto"
-						floatingConfig={{
-							placement: 'left-start',
-							offset: { mainAxis: 8, crossAxis: -4.5 },
-							gutter: 0 // hack to make offset effective, see https://github.com/melt-ui/melt-ui/issues/528
-						}}
-						usePointerDownOutside
-					>
-						{#snippet trigger()}
-							<Button
-								size="xs2"
-								color="light"
-								iconOnly
-								startIcon={{ icon: History }}
-								nonCaptureEvent
-								btnClasses="h-[27px]"
-							></Button>
-						{/snippet}
-						{#snippet content()}
-							<CaptureTable
-								{captureType}
-								isFlow={captureInfo.isFlow}
-								path={captureInfo.path}
-								on:selectCapture={handleSelectCapture}
-								fullHeight
-								headless
-								addButton={false}
-								noBorder
-							/>
-						{/snippet}
-					</Popover>
-				{/if}
-				{#if selectedCapture}
-					{@const SvelteComponent = triggerIconMap[captureType]}
-					<div
-						class={'min-w-16 text-secondary flex flex-row w-fit items-center gap-2 rounded-md bg-surface-secondary p-1 px-2 h-[27px]'}
-					>
-						<SvelteComponent size={12} />
-						<span class="text-xs text-secondary truncate">
-							Capture {formatDateShort(selectedCapture?.created_at)}
-						</span>
-					</div>
-				{/if}
-
-				{#if selectedCapture}
-					{@const label = isFlow && testKind === 'main' ? 'Test flow with args' : 'Apply args'}
-					{@const title =
-						isFlow && testKind === 'main'
-							? 'Test flow using captured data'
-							: testKind === 'preprocessor'
-								? 'Apply args to preprocessor'
-								: 'Apply args to inputs'}
-					<Button
-						size="xs2"
-						color="dark"
-						btnClasses="h-[27px]"
-						dropdownItems={[
-							{
-								label: 'Use as input schema',
-								onClick: async () => {
-									if (!lastCapture) return
-									const payloadData = selectedCapture?.main_args
-									dispatch('updateSchema', {
-										payloadData: payloadData ?? {},
-										redirect: true,
-										args: true
-									})
-								},
-								disabled: !selectedCapture,
-								hidden: !isFlow || testKind !== 'main'
-							}
-						].filter((item) => !item.hidden)}
-						on:click={async () => {
-							if (!selectedCapture) return
-							const payloadData = selectedCapture?.main_args ?? {}
-							if (isFlow && testKind === 'main') {
-								dispatch('testWithArgs', payloadData)
-							} else {
-								const trigger_extra = isObject(selectedCapture.preprocessor_args)
-									? selectedCapture.preprocessor_args
-									: {}
-
-								dispatch('applyArgs', {
-									kind: testKind,
-									args: { ...structuredClone(payloadData), ...trigger_extra }
-								})
-							}
-						}}
-						disabled={testKind === 'preprocessor' && !hasPreprocessor}
-						{title}
-						startIcon={isFlow && testKind === 'main' ? { icon: Play } : {}}
-					>
-						{label}
-					</Button>
+				{#if captureInfo.active}
+					<ConnectionIndicator connectionInfo={captureInfo.connectionInfo} />
+				{:else}
+					<Tooltip>
+						Start capturing to test your runnables with real data. Once active, all incoming
+						payloads will be captured and displayed below, allowing you to test your runnables
+						effectively.
+					</Tooltip>
 				{/if}
 			</div>
 
-			{#if displayResult && toolbarLocation === 'external'}
-				<DisplayResultControlBar
-					{base}
-					result={selectedCapture?.main_args}
-					disableTooltips={false}
-					on:open-drawer={() => {
-						if (displayResult && typeof displayResult.openDrawer === 'function') {
-							displayResult.openDrawer()
-						}
-					}}
-				/>
-			{/if}
-		</div>
-		<div class="grow min-h-0 rounded-md w-full pl-2 py-1 pb-2 overflow-auto">
-			{#if isLoadingBigPayload}
-				<Loader2 class="animate-spin" />
-			{:else if selectedCapture?.main_args}
-				<div class="bg-surface rounded-md text-sm" class:animate-highlight={newCaptureReceived}>
-					<DisplayResult
-						bind:this={displayResult}
-						workspaceId={undefined}
-						jobId={undefined}
-						result={getCapturePayload(selectedCapture)}
-						externalToolbarAvailable
-						on:toolbar-location-changed={({ detail }) => {
-							toolbarLocation = detail
-						}}
-					/>
+			{#if disabled}
+				<div class="text-sm font-normal text-red-600 dark:text-red-400" transition:slide>
+					Enter a valid configuration to start capturing.
 				</div>
-			{:else}
-				<div class="text-center text-tertiary p-4 bg-surface rounded-md"
-					>No captures to show yet.</div
-				>
 			{/if}
 		</div>
-	</Pane>
-</Splitpanes>
 
-<style>
-	@keyframes highlight {
-		0% {
-			color: rgba(59, 130, 246, 1);
-			background-color: rgba(59, 130, 246, 0.1);
-		}
-		100% {
-			color: inherit;
-		}
-	}
+		{#if $$slots.default}
+			<div class:opacity-50={disabled || !captureInfo.active} class="flex flex-col gap-4 mb-4">
+				<slot />
+			</div>
+		{/if}
 
-	.animate-highlight {
-		animation: highlight 2s ease-out forwards;
-	}
-</style>
+		<CaptureTable
+			bind:this={captureTable}
+			{captureType}
+			hasPreprocessor={captureInfo.hasPreprocessor}
+			canHavePreprocessor={captureInfo.canHavePreprocessor}
+			isFlow={captureInfo.isFlow}
+			path={captureInfo.path}
+			canEdit={true}
+			on:applyArgs
+			on:updateSchema={handleUpdateSchema}
+			on:addPreprocessor
+			on:testWithArgs
+			fullHeight={false}
+			captureActiveIndicator={captureInfo.active}
+		/>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index b93c6177e7..cc784e33b6 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -30,7 +30,6 @@
 	export let canEdit = false
 	export let fullHeight = true
 	export let limitPayloadSize = false
-	export let noBorder = false
 	export let captureActiveIndicator: boolean | undefined = undefined
 
 	let selected: number | undefined = undefined
@@ -60,7 +59,6 @@
 		}
 		select: any
 		testWithArgs: any
-		selectCapture: Capture | undefined
 	}>()
 
 	interface CaptureWithPayload extends Capture {
@@ -143,7 +141,6 @@
 			const payloadData = await getPayload(capture)
 			selected = capture.id
 			dispatch('select', structuredClone(payloadData))
-			dispatch('selectCapture', capture)
 		}
 	}
 
@@ -274,7 +271,6 @@
 			on:error={(e) => handleError(e.detail)}
 			on:select={(e) => handleSelect(e.detail)}
 			bind:length={capturesLength}
-			{noBorder}
 			neverShowLoader={captureActiveIndicator !== undefined}
 		>
 			<svelte:fragment slot="columns">
@@ -392,7 +388,7 @@
 				</SchemaPickerRow>
 			</svelte:fragment>
 			<svelte:fragment slot="empty">
-				<div class="text-center text-xs text-tertiary py-2">No captures yet</div>
+				<div class="text-center text-xs text-tertiary my-2">No captures yet</div>
 			</svelte:fragment>
 		</InfiniteList>
 	</div>
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 05a59f755b..e767edce1c 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -2,55 +2,36 @@
 	import { workspaceStore } from '$lib/stores'
 	import { CaptureService, type CaptureConfig, type CaptureTriggerKind } from '$lib/gen'
 	import { onDestroy } from 'svelte'
-	import { isObject, sendUserToast, sleep } from '$lib/utils'
-	import RouteCapture from './http/RouteCapture.svelte'
+	import { capitalize, isObject, sendUserToast, sleep } from '$lib/utils'
+	import { isCloudHosted } from '$lib/cloud'
+	import Alert from '../common/alert/Alert.svelte'
+	import RouteEditorConfigSection from './http/RouteEditorConfigSection.svelte'
+	import WebsocketEditorConfigSection from './websocket/WebsocketEditorConfigSection.svelte'
+	import WebhooksConfigSection from './webhook/WebhooksConfigSection.svelte'
+	import EmailTriggerConfigSection from '../details/EmailTriggerConfigSection.svelte'
+	import KafkaTriggersConfigSection from './kafka/KafkaTriggersConfigSection.svelte'
 	import type { ConnectionInfo } from '../common/alert/ConnectionIndicator.svelte'
 	import type { CaptureInfo } from './CaptureSection.svelte'
+	import CaptureTable from './CaptureTable.svelte'
+	import NatsTriggersConfigSection from './nats/NatsTriggersConfigSection.svelte'
+	import MqttEditorConfigSection from './mqtt/MqttEditorConfigSection.svelte'
+	import SqsTriggerEditorConfigSection from './sqs/SqsTriggerEditorConfigSection.svelte'
+	import PostgresEditorConfigSection from './postgres/PostgresEditorConfigSection.svelte'
 	import { invalidRelations } from './postgres/utils'
-	import WebhooksCapture from './webhook/WebhooksCapture.svelte'
-	import EmailTriggerCaptures from '../details/EmailTriggerCaptures.svelte'
-	import WebsocketCapture from './websocket/WebsocketCapture.svelte'
-	import PostgresCapture from './postgres/PostgresCapture.svelte'
-	import KafkaCapture from './kafka/KafkaCapture.svelte'
-	import NatsCapture from './nats/NatsCapture.svelte'
-	import MqttCapture from './mqtt/MqttCapture.svelte'
-	import SqsCapture from './sqs/SqsCapture.svelte'
-	import GcpCapture from './gcp/GcpCapture.svelte'
+	import { DEFAULT_V3_CONFIG, DEFAULT_V5_CONFIG } from './mqtt/constant'
+	import GcpTriggerEditorConfigSection from './gcp/GcpTriggerEditorConfigSection.svelte'
 
-	interface Props {
-		isFlow: boolean
-		path: string
-		hasPreprocessor: boolean
-		canHavePreprocessor: boolean
-		captureType?: CaptureTriggerKind
-		data?: any
-		connectionInfo?: ConnectionInfo | undefined
-		args?: Record<string, any>
-		isValid?: boolean
-		triggerDeployed?: boolean
-	}
-
-	let {
-		isFlow,
-		path,
-		hasPreprocessor,
-		canHavePreprocessor,
-		captureType = 'webhook',
-		data = {},
-		connectionInfo = $bindable(undefined),
-		args = $bindable({}),
-		isValid = false,
-		triggerDeployed = false
-	}: Props = $props()
-
-	let captureLoading = $state(false)
-	let captureActive = $state(false)
-	let captureConfigs: {
-		[key: string]: CaptureConfig
-	} = $state({})
-	let ready = $state(false)
-
-	const config: CaptureConfig | undefined = $derived(captureConfigs[captureType])
+	export let isFlow: boolean
+	export let path: string
+	export let hasPreprocessor: boolean
+	export let canHavePreprocessor: boolean
+	export let captureType: CaptureTriggerKind = 'webhook'
+	export let showCapture = false
+	export let data: any = {}
+	export let connectionInfo: ConnectionInfo | undefined = undefined
+	export let loading = false
+	export let args: Record<string, any> = {}
+	export let captureTable: CaptureTable | undefined = undefined
 
 	export async function setConfig(): Promise<boolean> {
 		if (captureType === 'postgres') {
@@ -58,18 +39,18 @@
 				sendUserToast('Table to track must be set', true)
 				return false
 			}
-
 			if (
 				invalidRelations(args.publication.table_to_track, {
 					showError: true,
 					trackSchemaTableError: true
-				}) !== ''
+				}) === true
 			) {
 				return false
 			}
 		}
 		try {
-			await CaptureService.setCaptureConfig({
+			loading = true
+			args = await CaptureService.setCaptureConfig({
 				requestBody: {
 					trigger_kind: captureType,
 					path,
@@ -78,19 +59,22 @@
 				},
 				workspace: $workspaceStore!
 			})
+			loading = false
 			return true
 		} catch (error) {
+			loading = false
 			sendUserToast(error.body, true)
 			return false
 		}
 	}
 
-	function isStreamingCapture() {
-		if (captureType === 'gcp' && args.delivery_type === 'push') {
-			return false
-		}
-		return ['mqtt', 'sqs', 'websocket', 'postgres', 'kafka', 'nats', 'gcp'].includes(captureType)
-	}
+	let captureActive = false
+
+	let captureConfigs: {
+		[key: string]: CaptureConfig
+	} = {}
+
+	const STREAMING_CAPTURES = ['mqtt', 'sqs', 'websocket', 'postgres', 'kafka', 'nats', 'gcp']
 
 	async function getCaptureConfigs() {
 		const captureConfigsList = await CaptureService.getCaptureConfigs({
@@ -98,12 +82,10 @@
 			runnableKind: isFlow ? 'flow' : 'script',
 			path
 		})
-
 		captureConfigs = captureConfigsList.reduce((acc, c) => {
 			acc[c.trigger_kind] = c
 			return acc
 		}, {})
-
 		if (isStreamingCapture() && captureActive) {
 			const config = captureConfigs[captureType]
 			if (config && config.error) {
@@ -133,15 +115,30 @@
 			}
 			i++
 			await sleep(1000)
+			captureTable?.loadCaptures(true)
 		}
 	}
 
+	let ready = false
 	function setDefaultArgs(captureConfigs: { [key: string]: CaptureConfig }) {
 		if (captureType in captureConfigs) {
 			const triggerConfig = captureConfigs[captureType].trigger_config
 			args = isObject(triggerConfig) ? triggerConfig : {}
 		} else {
-			args = {}
+			switch (captureType) {
+				case 'mqtt':
+					//define these field so any reactive statement that may use them will not crash trying to access their property
+					args = {
+						v3_config: DEFAULT_V3_CONFIG,
+						v5_config: DEFAULT_V5_CONFIG,
+						client_version: 'v5',
+						subscribe_topics: []
+					}
+					break
+
+				default:
+					args = {}
+			}
 		}
 		ready = true
 	}
@@ -161,19 +158,25 @@
 		if (captureActive || e.detail.disableOnly) {
 			captureActive = false
 		} else {
-			try {
-				captureLoading = true
-				const configSet = await setConfig()
-
-				if (configSet) {
-					capture()
-				}
-			} finally {
-				captureLoading = false
+			const configSet = await setConfig()
+			if (configSet) {
+				capture()
 			}
 		}
 	}
 
+	let config: CaptureConfig | undefined
+	$: config = captureConfigs[captureType]
+
+	let cloudDisabled = STREAMING_CAPTURES.includes(captureType) && isCloudHosted()
+
+	function isStreamingCapture() {
+		if (captureType === 'gcp' && args.delivery_type === 'push') {
+			return false
+		}
+		return ['mqtt', 'sqs', 'websocket', 'postgres', 'kafka', 'nats', 'gcp'].includes(captureType)
+	}
+
 	function updateConnectionInfo(config: CaptureConfig | undefined, captureActive: boolean) {
 		if (isStreamingCapture() && config && captureActive) {
 			const serverEnabled = getServerEnabled(config)
@@ -189,31 +192,37 @@
 			connectionInfo = undefined
 		}
 	}
-	$effect(() => {
-		updateConnectionInfo(config, captureActive)
-	})
+	$: updateConnectionInfo(config, captureActive)
 
-	let captureInfo: CaptureInfo = $derived({
+	let captureInfo: CaptureInfo
+	$: captureInfo = {
 		active: captureActive,
 		hasPreprocessor,
 		canHavePreprocessor,
 		isFlow,
 		path,
-		connectionInfo
-	})
+		connectionInfo,
+		loading: loading
+	}
 
-	$effect(() => {
-		args && (captureActive = false)
-	})
+	$: args && (captureActive = false)
 </script>
 
 {#key ready}
-	<div class="flex flex-col gap-4 w-full h-full">
-		{#if captureType === 'websocket'}
-			<WebsocketCapture
-				{isValid}
+	<div class="flex flex-col gap-4 w-full">
+		{#if cloudDisabled}
+			<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+				{capitalize(captureType)} triggers are disabled in the multi-tenant cloud.
+			</Alert>
+		{:else if captureType === 'websocket'}
+			<WebsocketEditorConfigSection
+				can_write={true}
+				headless={true}
+				bind:url={args.url}
+				bind:url_runnable_args={args.url_runnable_args}
+				{showCapture}
 				{captureInfo}
-				{captureLoading}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
@@ -221,13 +230,14 @@
 				on:testWithArgs
 			/>
 		{:else if captureType === 'postgres'}
-			<PostgresCapture
+			<PostgresEditorConfigSection
+				bind:postgres_resource_path={args.postgres_resource_path}
+				bind:publication={args.publication}
+				{showCapture}
 				{captureInfo}
-				{captureLoading}
-				postgres_resource_path={args.postgres_resource_path}
-				{hasPreprocessor}
-				{isFlow}
-				{triggerDeployed}
+				can_write={true}
+				headless={true}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
@@ -235,13 +245,16 @@
 				on:testWithArgs
 			/>
 		{:else if captureType === 'webhook'}
-			<WebhooksCapture
-				{hasPreprocessor}
+			<WebhooksConfigSection
 				{isFlow}
 				{path}
+				hash={data?.hash}
+				token={data?.token}
 				runnableArgs={data?.args}
+				scopes={data?.scopes}
+				{showCapture}
 				{captureInfo}
-				{captureLoading}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
@@ -249,15 +262,18 @@
 				on:testWithArgs
 			/>
 		{:else if captureType === 'http'}
-			<RouteCapture
+			<RouteEditorConfigSection
+				{showCapture}
+				can_write={true}
 				runnableArgs={data?.args}
-				route_path={args.route_path}
-				http_method={args.http_method}
-				{isValid}
+				bind:route_path={args.route_path}
+				bind:http_method={args.http_method}
+				bind:raw_string={args.raw_string}
+				bind:wrap_body={args.wrap_body}
+				capture_mode={true}
+				headless
 				{captureInfo}
-				{hasPreprocessor}
-				{isFlow}
-				{captureLoading}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
@@ -265,13 +281,16 @@
 				on:testWithArgs
 			/>
 		{:else if captureType === 'email'}
-			<EmailTriggerCaptures
+			<EmailTriggerConfigSection
+				hash={data?.hash}
+				token={data?.token}
 				{path}
 				{isFlow}
+				userSettings={data?.userSettings}
 				emailDomain={data?.emailDomain}
+				{showCapture}
 				{captureInfo}
-				{hasPreprocessor}
-				{captureLoading}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
@@ -279,13 +298,14 @@
 				on:testWithArgs
 			/>
 		{:else if captureType === 'kafka'}
-			<KafkaCapture
-				{isValid}
+			<KafkaTriggersConfigSection
+				headless={true}
+				{path}
+				bind:args
+				staticInputDisabled={false}
+				{showCapture}
 				{captureInfo}
-				{hasPreprocessor}
-				{isFlow}
-				{captureLoading}
-				{triggerDeployed}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
@@ -293,27 +313,32 @@
 				on:testWithArgs
 			/>
 		{:else if captureType === 'nats'}
-			<NatsCapture
-				{isValid}
+			<NatsTriggersConfigSection
+				headless={true}
+				bind:args
+				{path}
+				staticInputDisabled={false}
+				{showCapture}
 				{captureInfo}
-				{hasPreprocessor}
-				{isFlow}
-				{captureLoading}
-				{triggerDeployed}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
 				on:captureToggle={handleCapture}
-				on:testWithArgs
 			/>
 		{:else if captureType === 'mqtt'}
-			<MqttCapture
-				{isValid}
+			<MqttEditorConfigSection
+				can_write={true}
+				headless={true}
+				{showCapture}
 				{captureInfo}
-				{hasPreprocessor}
-				{isFlow}
-				{captureLoading}
-				{triggerDeployed}
+				bind:v3_config={args.v3_config}
+				bind:v5_config={args.v5_config}
+				bind:client_version={args.client_version}
+				bind:subscribe_topics={args.subscribe_topics}
+				bind:mqtt_resource_path={args.mqtt_resource_path}
+				bind:client_id={args.client_id}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
@@ -321,13 +346,16 @@
 				on:testWithArgs
 			/>
 		{:else if captureType === 'sqs'}
-			<SqsCapture
-				{isValid}
+			<SqsTriggerEditorConfigSection
+				can_write={true}
+				headless={true}
+				bind:queue_url={args.queue_url}
+				bind:aws_resource_path={args.aws_resource_path}
+				bind:message_attributes={args.message_attributes}
+				bind:aws_auth_resource_type={args.aws_auth_resource_type}
+				{showCapture}
 				{captureInfo}
-				{hasPreprocessor}
-				{isFlow}
-				{captureLoading}
-				{triggerDeployed}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
@@ -335,14 +363,21 @@
 				on:testWithArgs
 			/>
 		{:else if captureType === 'gcp'}
-			<GcpCapture
-				{isValid}
+			<GcpTriggerEditorConfigSection
+				can_write={true}
+				headless={true}
+				bind:gcp_resource_path={args.gcp_resource_path}
+				bind:topic_id={args.topic_id}
+				bind:subscription_id={args.subscription_id}
+				bind:cloud_subscription_id={args.subscription_id}
+				bind:create_update_subscription_id={args.subscription_id}
+				bind:delivery_config={args.delivery_config}
+				bind:delivery_type={args.delivery_type}
+				bind:subscription_mode={args.subscription_mode}
+				bind:base_endpoint={args.base_endpoint}
+				{showCapture}
 				{captureInfo}
-				{hasPreprocessor}
-				{isFlow}
-				{triggerDeployed}
-				deliveryType={args.delivery_type}
-				{captureLoading}
+				bind:captureTable
 				on:applyArgs
 				on:updateSchema
 				on:addPreprocessor
diff --git a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
deleted file mode 100644
index 84ab67c97f..0000000000
--- a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
+++ /dev/null
@@ -1,137 +0,0 @@
-<script lang="ts">
-	import Button from '$lib/components/common/button/Button.svelte'
-	import { Trash, Save, RotateCcw } from 'lucide-svelte'
-	import { type Snippet } from 'svelte'
-	import Toggle from '$lib/components/Toggle.svelte'
-	import { Tooltip } from '../meltComponents'
-
-	interface Props {
-		isDraftOnly: any
-		hasDraft: any
-		saveDisabled: any
-		enabled: boolean | undefined
-		allowDraft: any
-		edit: any
-		isLoading: any
-		permissions: 'write' | 'create' | 'none'
-		isDeployed: boolean
-		extra?: Snippet
-		onDelete?: () => void
-		onReset?: () => void
-		onToggleEnabled?: (enabled: boolean) => void
-		onUpdate?: () => void
-		cloudDisabled?: boolean
-		triggerType?: string
-	}
-
-	let {
-		isDraftOnly,
-		hasDraft,
-		saveDisabled,
-		enabled,
-		allowDraft,
-		edit,
-		isLoading,
-		permissions,
-		isDeployed,
-		extra,
-		onDelete,
-		onReset,
-		onToggleEnabled,
-		onUpdate,
-		cloudDisabled = false
-	}: Props = $props()
-
-	const canSave = $derived((permissions === 'write' && edit) || permissions === 'create')
-</script>
-
-{#if !allowDraft}
-	{@render extra?.()}
-	{#if edit && enabled !== undefined}
-		<Toggle
-			size="sm"
-			disabled={permissions === 'none'}
-			checked={enabled}
-			options={{ right: 'enable', left: 'disable' }}
-			on:change={({ detail }) => {
-				onToggleEnabled?.(detail)
-			}}
-		/>
-	{/if}
-	{#if canSave}
-		<Button
-			size="sm"
-			startIcon={{ icon: Save }}
-			disabled={saveDisabled}
-			on:click={() => {
-				onUpdate?.()
-			}}
-			loading={isLoading}
-		>
-			Save
-		</Button>
-	{/if}
-{:else}
-	<div class="flex flex-row gap-2 items-center">
-		{#if !isDraftOnly && !hasDraft && enabled !== undefined}
-			<div class="center-center">
-				<Toggle
-					size="2sm"
-					disabled={permissions === 'none'}
-					checked={enabled}
-					options={{ right: 'enable', left: 'disable' }}
-					on:change={({ detail }) => {
-						onToggleEnabled?.(detail)
-					}}
-				/>
-			</div>
-		{/if}
-		{#if isDraftOnly}
-			<Button
-				size="xs"
-				startIcon={{ icon: Trash }}
-				iconOnly
-				color={'light'}
-				on:click={() => {
-					onDelete?.()
-				}}
-				btnClasses="hover:bg-red-500 hover:text-white"
-			/>
-		{:else if hasDraft}
-			<Button
-				size="xs"
-				startIcon={{ icon: RotateCcw }}
-				color={'light'}
-				on:click={() => {
-					onReset?.()
-				}}
-			>
-				Reset changes
-			</Button>
-		{/if}
-		{#if canSave && (isDraftOnly || hasDraft)}
-			<Tooltip placement="bottom-end" disablePopup={!saveDisabled && !cloudDisabled && isDeployed}>
-				<Button
-					size="xs"
-					startIcon={{ icon: Save }}
-					disabled={saveDisabled || cloudDisabled || !isDeployed}
-					on:click={() => {
-						onUpdate?.()
-					}}
-					loading={isLoading}
-				>
-					{isDraftOnly ? 'Deploy' : 'Update'}
-				</Button>
-				<span slot="text">
-					{#if !isDeployed}
-						Deploy the runnable to enable trigger creation
-					{:else if cloudDisabled}
-						This trigger is disabled in the multi-tenant cloud
-					{:else}
-						Enter a valid config to {isDraftOnly ? 'deploy' : 'update'} the trigger
-					{/if}
-				</span>
-			</Tooltip>
-		{/if}
-	</div>
-{/if}
diff --git a/frontend/src/lib/components/triggers/TriggerLabel.svelte b/frontend/src/lib/components/triggers/TriggerLabel.svelte
deleted file mode 100644
index 5010b3fa38..0000000000
--- a/frontend/src/lib/components/triggers/TriggerLabel.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { getTriggerLabel, type Trigger } from './utils'
-	import { twMerge } from 'tailwind-merge'
-
-	let { trigger, discard }: { trigger: Trigger; discard?: boolean } = $props()
-
-	let label = $derived.by(() => getTriggerLabel(trigger))
-</script>
-
-<span
-	class={twMerge(
-		trigger.isDraft ? 'text-frost-400 italic dark:text-frost-200' : 'font-normal',
-		'truncate pr-1',
-		discard ? 'line-through' : ''
-	)}
-	title={label}
->
-	{label}
-</span>
-
-{#if trigger.isPrimary}
-	<span
-		class="ml-2 bg-blue-50 dark:bg-blue-900/40 px-1.5 py-0.5 rounded text-xs text-blue-700 dark:text-blue-100 whitespace-nowrap"
-	>
-		Primary
-	</span>
-{/if}
-
-{#if trigger.draftConfig && !trigger.isDraft}
-	<span
-		class="ml-2 text-xs bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-100 px-1.5 py-0.5 rounded whitespace-nowrap"
-	>
-		Modified
-	</span>
-{/if}
-
-{#if trigger.isDraft}
-	<span
-		class="ml-2 text-xs bg-frost-400 dark:bg-frost-900 text-white px-1.5 py-0.5 rounded whitespace-nowrap"
-	>
-		New
-	</span>
-{/if}
diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index 5eeed48bec..7b4968d77c 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -1,348 +1,269 @@
 <script lang="ts">
-	import { userStore, workspaceStore } from '$lib/stores'
+	import Tab from '$lib/components/common/tabs/Tab.svelte'
+	import { Tabs } from '$lib/components/common'
+	import WebhooksPanel from '$lib/components/triggers/webhook/WebhooksPanel.svelte'
+	import EmailTriggerPanel from '$lib/components/details/EmailTriggerPanel.svelte'
+	import RoutesPanel from '$lib/components/triggers/http/RoutesPanel.svelte'
+	import RunPageSchedules from '$lib/components/RunPageSchedules.svelte'
+	import { canWrite } from '$lib/utils'
+	import { userStore } from '$lib/stores'
 	import FlowCard from '../flows/common/FlowCard.svelte'
 	import { getContext, onDestroy, createEventDispatcher } from 'svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import TriggersTable from './TriggersTable.svelte'
-	import CaptureWrapper from './CaptureWrapper.svelte'
-	import { fade } from 'svelte/transition'
-	import TriggersBadge from '../graph/renderers/triggers/TriggersBadge.svelte'
-	import { twMerge } from 'tailwind-merge'
-	import AddTriggersButton from '$lib/components/triggers/AddTriggersButton.svelte'
-	import { Plus } from 'lucide-svelte'
-	import Button from '../common/button/Button.svelte'
-	import TriggersWrapperV2 from './TriggersWrapper.svelte'
-	import {
-		triggerTypeToCaptureKind,
-		type TriggerType,
-		CLOUD_DISABLED_TRIGGER_TYPES,
-		type Trigger
-	} from './utils'
-	import { isCloudHosted } from '$lib/cloud'
+	import ScheduledPollPanel from './scheduled/ScheduledPollPanel.svelte'
+	import WebsocketTriggersPanel from './websocket/WebsocketTriggersPanel.svelte'
+	import PostgresTriggersPanel from './postgres/PostgresTriggersPanel.svelte'
+	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
+	import { KafkaIcon, MqttIcon, NatsIcon, AwsIcon, GoogleCloudIcon } from '../icons'
+	import KafkaTriggersPanel from './kafka/KafkaTriggersPanel.svelte'
+	import NatsTriggersPanel from './nats/NatsTriggersPanel.svelte'
+	import MqttTriggersPanel from './mqtt/MqttTriggersPanel.svelte'
+	import SqsTriggerPanel from './sqs/SqsTriggerPanel.svelte'
+	import GcpTriggerPanel from './gcp/GcpTriggerPanel.svelte'
 
-	interface Props {
-		noEditor: boolean
-		newItem?: boolean
-		currentPath: string
-		fakeInitialPath?: string
-		hash?: string | undefined
-		args?: Record<string, any>
-		initialPath: string
-		isFlow: boolean
-		canHavePreprocessor?: boolean
-		hasPreprocessor?: boolean
-		isDeployed?: boolean
-		schema?: Record<string, any> | undefined
-		noCapture?: boolean
-		isEditor?: boolean
-		onDeployTrigger?: (trigger: Trigger) => void
+	export let noEditor: boolean
+	export let newItem = false
+	export let currentPath: string
+	export let fakeInitialPath: string
+	export let hash: string | undefined = undefined
+	export let initialPath: string
+	export let schema: any
+	export let isFlow: boolean
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
+	export let args: Record<string, any> = {}
+	let eventStreamType: 'kafka' | 'nats' | 'sqs' | 'mqtt' | 'gcp' = 'kafka'
+
+	$: {
+		if (
+			$selectedTrigger === 'kafka' ||
+			$selectedTrigger === 'nats' ||
+			$selectedTrigger === 'sqs' ||
+			$selectedTrigger === 'mqtt' ||
+			$selectedTrigger === 'gcp'
+		) {
+			eventStreamType = $selectedTrigger
+		}
 	}
 
-	let {
-		noEditor,
-		newItem = false,
-		currentPath,
-		fakeInitialPath = '',
-		hash = undefined,
-		args = {},
-		initialPath,
-		isFlow,
-		canHavePreprocessor = false,
-		hasPreprocessor = false,
-		isDeployed = false,
-		schema = undefined,
-		noCapture = false,
-		isEditor = true,
-		onDeployTrigger
-	}: Props = $props()
-
-	let config: Record<string, any> = $state({})
-	let width = $state(0)
-	let emailDomain: string | undefined = $state(undefined)
-	let isValid = $state(false)
-	let renderCount = $state(0)
-	let loading = $state(false)
-
-	const useVerticalTriggerBar = $derived(width < 1000)
-	const { triggersState, triggersCount } = getContext<TriggerContext>('TriggerContext')
+	const { selectedTrigger, simplifiedPoll } = getContext<TriggerContext>('TriggerContext')
 
 	const dispatch = createEventDispatcher()
 	onDestroy(() => {
 		dispatch('exitTriggers')
 	})
-
-	// Handle trigger selection
-	function onSelect(triggerIndex: number) {
-		triggersState.selectedTriggerIndex = triggerIndex
-	}
-
-	function deleteDraftTrigger(triggerIndex: number | undefined) {
-		if (triggerIndex === undefined) {
-			return
-		}
-		triggersState.deleteTrigger(triggersCount, triggerIndex)
-		triggersState.selectedTriggerIndex = triggersState.triggers.length - 1
-	}
-
-	async function handleUpdate(trigger: number | undefined, path: string) {
-		if (!trigger || trigger === -1) {
-			return
-		}
-
-		const { type: triggerType, id: triggerId, path: triggerPath } = triggersState.triggers[trigger]
-		loading = true
-
-		triggersState.selectedTriggerIndex = undefined
-		triggersState.deleteTrigger(triggersCount, trigger)
-
-		if (triggerType === 'schedule') {
-			await triggersState.fetchSchedules(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				undefined,
-				$userStore
-			)
-		} else if (triggerType === 'websocket') {
-			await triggersState.fetchWebsocketTriggers(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				$userStore
-			)
-		} else if (triggerType === 'postgres') {
-			await triggersState.fetchPostgresTriggers(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				$userStore
-			)
-		} else if (triggerType === 'kafka') {
-			await triggersState.fetchKafkaTriggers(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				$userStore
-			)
-		} else if (triggerType === 'nats') {
-			await triggersState.fetchNatsTriggers(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				$userStore
-			)
-		} else if (triggerType === 'gcp') {
-			await triggersState.fetchGcpTriggers(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				$userStore
-			)
-		} else if (triggerType === 'sqs') {
-			await triggersState.fetchSqsTriggers(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				$userStore
-			)
-		} else if (triggerType === 'mqtt') {
-			await triggersState.fetchMqttTriggers(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				$userStore
-			)
-		} else if (triggerType === 'http') {
-			await triggersState.fetchHttpTriggers(
-				triggersCount,
-				$workspaceStore,
-				currentPath,
-				isFlow,
-				$userStore
-			)
-		}
-
-		triggersState.selectedTriggerIndex = triggersState.triggers.findIndex(
-			(t) => t.path === path && t.type === triggerType
-		)
-		loading = false
-
-		onDeployTrigger?.({ type: triggerType, id: triggerId, path: triggerPath })
-	}
-
-	function handleUpdateDraftConfig(
-		triggerIndex: number | undefined,
-		newConfig: Record<string, any>,
-		saveDisabled: boolean
-	) {
-		if (triggerIndex && triggerIndex !== -1 && newConfig) {
-			triggersState.setDraftConfig(triggerIndex, { ...newConfig, canSave: !saveDisabled })
-		}
-	}
-
-	function handleResetDraft(trigger: number | undefined) {
-		if (!trigger) {
-			return
-		}
-		triggersState.setDraftConfig(trigger, undefined)
-		renderCount++
-	}
-
-	function handleAddTrigger(type: TriggerType) {
-		const newTrigger = triggersState.addDraftTrigger(
-			triggersCount,
-			type,
-			type === 'schedule' ? initialPath : undefined
-		)
-		triggersState.selectedTriggerIndex = newTrigger
-	}
-
-	const cloudDisabled = $derived(
-		CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersState.selectedTrigger?.type ?? '') &&
-			isCloudHosted()
-	)
 </script>
 
-<div bind:clientWidth={width} class="h-full w-full">
-	<FlowCard {noEditor} noHeader>
-		<Splitpanes horizontal>
-			<Pane>
-				<div class="flex flex-row h-full">
-					<!-- Left Pane - Triggers List -->
-					{#if !useVerticalTriggerBar}
-						<div class="w-[350px] flex-shrink-0 overflow-auto pr-2 pl-4 pt-2 pb-2">
-							<TriggersTable
-								selectedTrigger={triggersState.selectedTriggerIndex}
-								{onSelect}
-								triggers={triggersState.triggers}
-								{isEditor}
-								onAddDraftTrigger={handleAddTrigger}
-								onDeleteDraft={deleteDraftTrigger}
-								onReset={handleResetDraft}
-								webhookToken={$triggersCount?.webhook_count}
-								emailToken={$triggersCount?.email_count}
-							/>
-						</div>
-					{:else}
-						<div class="p-2 flex flex-col gap-2 border-r">
-							<AddTriggersButton
-								onAddDraftTrigger={handleAddTrigger}
-								class="w-fit h-fit"
-								placement="right-start"
-							>
-								<Button size="xs" nonCaptureEvent btnClasses="p-2 w-fit" wrapperClasses="p-0">
-									<Plus size="14" />
-								</Button>
-							</AddTriggersButton>
-							<TriggersBadge
-								showOnlyWithCount={false}
-								path={initialPath || fakeInitialPath}
-								{newItem}
-								isFlow
-								selected={true}
-								small={false}
-								vertical
-								onSelect={(triggerIndex: number) => {
-									triggersState.selectedTriggerIndex = triggerIndex
-								}}
-							/>
-						</div>
-					{/if}
-
-					<div
-						class={twMerge(
-							'flex-grow overflow-auto pl-2 pr-4 pb-4 pt-2',
-							useVerticalTriggerBar ? 'pl-4 pt-2' : ''
-						)}
-						style="scrollbar-gutter: stable"
+<FlowCard {noEditor} title="Triggers">
+	{#if !$simplifiedPoll}
+		<div class="h-full flex flex-col">
+			<Tabs bind:selected={$selectedTrigger} wrapperClass="overflow-hidden shrink-0">
+				<Tab value="webhooks" selectedClass="text-primary font-semibold">Webhooks</Tab>
+				<Tab value="schedules" selectedClass="text-primary text-sm font-semibold">Schedules</Tab>
+				<Tab value="routes" selectedClass="text-primary text-sm font-semibold">HTTP</Tab>
+				<Tab value="websockets" selectedClass="text-primary text-sm font-semibold">WebSockets</Tab>
+				<Tab value="postgres" selectedClass="text-primary text-sm font-semibold">Postgres</Tab>
+				<Tab
+					value="kafka"
+					otherValues={['nats', 'sqs', 'mqtt', 'gcp']}
+					selectedClass="text-primary text-sm font-semibold"
+				>
+					Event streams
+				</Tab>
+				<Tab value="emails" selectedClass="text-primary text-sm font-semibold">Email</Tab>
+				{#if isFlow}
+					<Tab value="scheduledPoll" selectedClass="text-primary text-sm font-semibold"
+						>Scheduled Poll</Tab
 					>
-						{#if loading}
-							<div
-								class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full"
-							></div>
-						{:else if triggersState.selectedTrigger}
-							{#key [renderCount, triggersState.selectedTriggerIndex].join('-')}
-								<div in:fade={{ duration: 100, delay: 100 }} out:fade={{ duration: 100 }}>
-									<TriggersWrapperV2
-										selectedTrigger={triggersState.selectedTrigger}
-										{isFlow}
-										{initialPath}
-										{fakeInitialPath}
-										{currentPath}
-										{hash}
-										{isDeployed}
-										small={useVerticalTriggerBar}
-										{args}
+				{/if}
+
+				<svelte:fragment slot="content">
+					<div class="min-h-0 grow overflow-y-auto">
+						{#if $selectedTrigger === 'webhooks'}
+							<div class="p-4">
+								<WebhooksPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
+									path={initialPath || fakeInitialPath}
+									{hash}
+									{isFlow}
+									{args}
+									token=""
+									{newItem}
+									isEditor={true}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'emails'}
+							<div class="p-4">
+								<EmailTriggerPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									token=""
+									scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
+									path={initialPath || fakeInitialPath}
+									{isFlow}
+									isEditor={true}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+									{newItem}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'routes'}
+							<div class="p-4">
+								<RoutesPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									{newItem}
+									{args}
+									path={initialPath || fakeInitialPath}
+									{isFlow}
+									isEditor={true}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'websockets'}
+							<div class="p-4">
+								<WebsocketTriggersPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									{newItem}
+									path={initialPath || fakeInitialPath}
+									{isFlow}
+									isEditor={true}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'postgres'}
+							<div class="p-4">
+								<PostgresTriggersPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									{newItem}
+									path={initialPath || fakeInitialPath}
+									{isFlow}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+									isEditor={true}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'kafka' || $selectedTrigger === 'nats' || $selectedTrigger === 'sqs' || $selectedTrigger === 'mqtt' || $selectedTrigger === 'gcp'}
+							<div class="p-4 flex flex-col gap-2">
+								<ToggleButtonGroup bind:selected={eventStreamType} let:item>
+									<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} {item} />
+									<ToggleButton value="nats" label="NATS" icon={NatsIcon} {item} />
+									<ToggleButton value="mqtt" label="MQTT" icon={MqttIcon} {item} />
+									<ToggleButton value="sqs" label="SQS" icon={AwsIcon} {item} />
+									<ToggleButton value="gcp" label="GCP" icon={GoogleCloudIcon} {item} />
+								</ToggleButtonGroup>
+								{#if eventStreamType === 'kafka'}
+									<KafkaTriggersPanel
+										on:applyArgs
+										on:addPreprocessor
+										on:updateSchema
+										on:testWithArgs
 										{newItem}
-										{schema}
-										{isEditor}
-										onDelete={() => {
-											deleteDraftTrigger(triggersState.selectedTriggerIndex)
-										}}
-										onUpdate={(path) => {
-											handleUpdate(triggersState.selectedTriggerIndex, path)
-										}}
-										onConfigChange={(cfg, canSave, updated) => {
-											if (updated) {
-												handleUpdateDraftConfig(triggersState.selectedTriggerIndex, cfg, canSave)
-											}
-										}}
-										onCaptureConfigChange={(cfg, isValidConfig) => {
-											config = cfg
-											isValid = isValidConfig
-										}}
-										onReset={() => {
-											handleResetDraft(triggersState.selectedTriggerIndex)
-										}}
-										on:email-domain={({ detail }) => {
-											emailDomain = detail
-										}}
+										path={initialPath || fakeInitialPath}
+										{isFlow}
+										isEditor={true}
+										{canHavePreprocessor}
+										{hasPreprocessor}
 									/>
-								</div>
-							{/key}
-						{:else}
-							<span class="text-sm text-tertiary text-center mx-auto mt-2"
-								>{`Select a trigger from the ${useVerticalTriggerBar ? 'left toolbar' : 'table'} or a create a new one`}</span
-							>
+								{:else if eventStreamType === 'nats'}
+									<NatsTriggersPanel
+										on:applyArgs
+										on:addPreprocessor
+										{newItem}
+										path={initialPath || fakeInitialPath}
+										{isFlow}
+										isEditor={true}
+										{canHavePreprocessor}
+										{hasPreprocessor}
+									/>
+								{:else if eventStreamType === 'sqs'}
+									<SqsTriggerPanel
+										on:applyArgs
+										on:addPreprocessor
+										on:updateSchema
+										on:testWithArgs
+										{newItem}
+										path={initialPath || fakeInitialPath}
+										{isFlow}
+										isEditor={true}
+										{canHavePreprocessor}
+										{hasPreprocessor}
+									/>
+								{:else if eventStreamType === 'mqtt'}
+									<MqttTriggersPanel
+										on:applyArgs
+										on:addPreprocessor
+										on:updateSchema
+										on:testWithArgs
+										{newItem}
+										path={initialPath || fakeInitialPath}
+										{isFlow}
+										isEditor={true}
+										{canHavePreprocessor}
+										{hasPreprocessor}
+									/>
+								{:else if eventStreamType === 'gcp'}
+									<GcpTriggerPanel
+										on:applyArgs
+										on:addPreprocessor
+										on:updateSchema
+										on:testWithArgs
+										{newItem}
+										path={initialPath || fakeInitialPath}
+										{isFlow}
+										isEditor={true}
+										{canHavePreprocessor}
+										{hasPreprocessor}
+									/>
+								{/if}
+							</div>
+						{:else if $selectedTrigger === 'schedules'}
+							<div class="p-4">
+								<RunPageSchedules
+									{schema}
+									{isFlow}
+									path={initialPath}
+									{newItem}
+									can_write={canWrite(currentPath, {}, $userStore)}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'scheduledPoll'}
+							<div class="p-4">
+								<ScheduledPollPanel />
+							</div>
 						{/if}
 					</div>
-				</div>
-			</Pane>
-			{#if !cloudDisabled && triggersState.selectedTrigger && triggersState.selectedTrigger.type !== 'schedule' && triggersState.selectedTrigger.type != 'poll' && !noCapture}
-				{@const captureKind = triggersState.selectedTrigger
-					? triggerTypeToCaptureKind(triggersState.selectedTrigger.type)
-					: undefined}
-				{#if captureKind}
-					{#key captureKind}
-						<Pane minSize={20} size={40}>
-							<CaptureWrapper
-								path={initialPath || fakeInitialPath}
-								{isFlow}
-								captureType={captureKind}
-								{hasPreprocessor}
-								{canHavePreprocessor}
-								args={config}
-								data={{ args, hash, emailDomain }}
-								{isValid}
-								triggerDeployed={!triggersState.selectedTrigger.isDraft}
-								on:applyArgs
-								on:updateSchema
-								on:addPreprocessor
-								on:testWithArgs
-							/>
-						</Pane>
-					{/key}
-				{/if}
-			{/if}
-		</Splitpanes>
-	</FlowCard>
-</div>
+				</svelte:fragment>
+			</Tabs>
+		</div>
+	{:else}
+		<div class="px-4 pb-2">
+			<RunPageSchedules
+				{schema}
+				{isFlow}
+				path={initialPath}
+				{newItem}
+				can_write={canWrite(currentPath, {}, $userStore)}
+			/>
+		</div>
+	{/if}
+</FlowCard>
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
new file mode 100644
index 0000000000..c6e1f0ba2d
--- /dev/null
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+	import Button from '$lib/components/common/button/Button.svelte'
+	import { ChevronDown, Save } from 'lucide-svelte'
+	import CaptureWrapper from './CaptureWrapper.svelte'
+	import { capitalize } from '$lib/utils'
+	import Popover from '../Popover.svelte'
+	import Section from '../Section.svelte'
+	import { createEventDispatcher, getContext } from 'svelte'
+	import { type CaptureTriggerKind } from '$lib/gen'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import TriggersWrapper from './TriggersWrapper.svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	export let cloudDisabled: boolean
+	export let triggerType: CaptureTriggerKind
+	export let isFlow: boolean = false
+	export let data: any = {}
+	export let noSave = false
+	export let isEditor: boolean = false
+	export let path: string = ''
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
+	export let newItem: boolean
+	export let openForm: boolean = false
+	export let alwaysOpened: boolean = false
+	export let showCapture: boolean = false
+
+	const captureTypeLabels: Record<CaptureTriggerKind, string> = {
+		http: 'custom HTTP route',
+		websocket: 'WebSocket trigger',
+		webhook: 'Webhook',
+		kafka: 'Kafka trigger',
+		email: 'Email trigger',
+		nats: 'NATS trigger',
+		mqtt: 'MQTT trigger',
+		sqs: 'SQS trigger',
+		postgres: 'Postgres trigger',
+		gcp: 'GCP Pub/Sub trigger'
+	}
+
+	const { captureOn } = getContext<TriggerContext>('TriggerContext')
+
+	let args: Record<string, any> = {}
+	$: collapsed = !openForm
+
+	const dispatch = createEventDispatcher()
+
+	let init = false
+	$: updateShowCapture(!!$captureOn)
+	function updateShowCapture(show: boolean) {
+		if (show && !init) {
+			$captureOn = undefined
+			showCapture = true
+			init = true
+		}
+	}
+</script>
+
+<Section
+	label={`+ New ${captureTypeLabels[triggerType]}`}
+	collapsable={!alwaysOpened}
+	bind:collapsed
+>
+	<svelte:fragment slot="action">
+		{#if !collapsed || alwaysOpened}
+			<div class="flex flex-row grow w-min-0 gap-2 items-center justify-end">
+				{#if isEditor}
+					<Button
+						size="xs2"
+						on:click={() => {
+							showCapture = !showCapture
+						}}
+						variant="border"
+						color="light"
+						endIcon={{
+							icon: ChevronDown,
+							classes: twMerge('transition', showCapture ? 'rotate-180' : '')
+						}}
+					>
+						Test trigger
+					</Button>
+				{/if}
+
+				{#if !noSave}
+					{@const disabled = newItem || cloudDisabled}
+					<Popover notClickable>
+						<Button
+							size="xs2"
+							{disabled}
+							startIcon={{ icon: Save }}
+							on:click={() => {
+								dispatch('saveTrigger', {
+									config: args
+								})
+							}}
+						>
+							Save
+						</Button>
+						<svelte:fragment slot="text">
+							{#if disabled}
+								{#if newItem}
+									Deploy the runnable to enable trigger creation
+								{:else if cloudDisabled}
+									{capitalize(triggerType)} triggers are disabled in the multi-tenant cloud
+								{/if}
+							{:else}
+								Create new {captureTypeLabels[triggerType].toLowerCase()}
+							{/if}
+						</svelte:fragment>
+					</Popover>
+				{/if}
+			</div>
+		{/if}
+	</svelte:fragment>
+
+	{#if isEditor}
+		<CaptureWrapper
+			{path}
+			{isFlow}
+			captureType={triggerType}
+			{hasPreprocessor}
+			{canHavePreprocessor}
+			on:applyArgs
+			on:addPreprocessor
+			on:updateSchema
+			on:saveTrigger
+			on:testWithArgs
+			bind:args
+			{data}
+			{showCapture}
+		/>
+	{:else}
+		<TriggersWrapper {path} {isFlow} {triggerType} {cloudDisabled} {args} {data} />
+	{/if}
+</Section>
diff --git a/frontend/src/lib/components/triggers/TriggersTable.svelte b/frontend/src/lib/components/triggers/TriggersTable.svelte
deleted file mode 100644
index 3d185ace89..0000000000
--- a/frontend/src/lib/components/triggers/TriggersTable.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-	import DataTable from '$lib/components/table/DataTable.svelte'
-	import Button from '$lib/components/common/button/Button.svelte'
-	import { Plus, Star, Loader2, Trash, RotateCcw } from 'lucide-svelte'
-	import { twMerge } from 'tailwind-merge'
-	import { triggerIconMap, type Trigger, type TriggerType } from './utils'
-	import AddTriggersButton from './AddTriggersButton.svelte'
-	import TriggerLabel from './TriggerLabel.svelte'
-
-	interface Props {
-		// Props
-		selectedTrigger?: number | undefined
-		triggers?: Trigger[]
-		isEditor?: boolean
-		webhookToken?: number
-		emailToken?: number
-		onSelect?: (trigger: number) => void
-		onAddDraftTrigger?: (type: TriggerType) => void
-		onDeleteDraft?: (triggerIndex: number) => void
-		onReset?: (triggerIndex: number) => void
-	}
-
-	let {
-		selectedTrigger = undefined,
-		triggers = [],
-		isEditor = false,
-		webhookToken,
-		emailToken,
-		onSelect,
-		onAddDraftTrigger,
-		onDeleteDraft,
-		onReset
-	}: Props = $props()
-
-	// Component state
-	let loading = false
-</script>
-
-<div class="flex flex-col space-y-2 w-full">
-	<div class="w-full">
-		<AddTriggersButton {onAddDraftTrigger} setDropdownWidthToButtonWidth class="w-full" {isEditor}>
-			<Button
-				size="xs"
-				color="blue"
-				startIcon={{ icon: Plus }}
-				nonCaptureEvent
-				btnClasses="w-full justify-center"
-			>
-				<span>Add trigger</span>
-			</Button>
-		</AddTriggersButton>
-	</div>
-	<DataTable {loading} size="sm" tableFixed={true}>
-		<tbody>
-			{#each triggers as trigger, index}
-				{@const SvelteComponent = triggerIconMap[trigger.type]}
-				<tr
-					class={twMerge(
-						'hover:bg-surface-hover cursor-pointer h-10 group',
-						selectedTrigger === index ? 'bg-surface-hover ' : ''
-					)}
-					onclick={() => onSelect?.(index)}
-				>
-					<td class="w-12 text-center py-2 px-2">
-						<div class="relative flex justify-center items-center">
-							<SvelteComponent
-								size={16}
-								class={trigger.isDraft ? 'text-frost-400' : 'text-tertiary'}
-							/>
-
-							{#if trigger.isPrimary}
-								<Star size={10} class="absolute -mt-3 ml-3 text-blue-400" />
-							{/if}
-						</div>
-					</td>
-					<td class="py-2 px-2 text-xs">
-						<div class="flex items-center justify-between gap-1">
-							<div class="flex items-center grow min-w-0">
-								<TriggerLabel {trigger} />
-								{#if trigger.type === 'webhook' && webhookToken}
-									<span
-										class="ml-2 px-1.5 text-xs rounded-md bg-tertiary/50 group-hover:bg-primary text-primary-inverse py-0.5"
-									>
-										{`${webhookToken} token${webhookToken > 1 ? 's' : ''}`}
-									</span>
-								{:else if trigger.type === 'email' && emailToken}
-									<span
-										class="ml-2 text-xs rounded-md bg-tertiary/50 group-hover:bg-primary text-primary-inverse px-1.5 py-0.5"
-									>
-										{`${emailToken} token${emailToken > 1 ? 's' : ''}`}
-									</span>
-								{/if}
-							</div>
-
-							{#if !['email', 'webhook', 'cli'].includes(trigger.type)}
-								{#if trigger.isDraft}
-									<Button
-										size="xs"
-										color="light"
-										btnClasses="transition-all duration-200 text-transparent hover:bg-surface group-hover:text-primary bg-transparent px-1 py-1"
-										startIcon={{ icon: Trash }}
-										iconOnly
-										on:click={() => onDeleteDraft?.(index)}
-									/>
-								{:else if !!trigger.draftConfig && !trigger.isDraft}
-									<Button
-										size="xs"
-										color="light"
-										btnClasses="transition-all duration-200 text-transparent hover:bg-surface group-hover:text-primary bg-transparent px-1 py-1"
-										startIcon={{ icon: RotateCcw }}
-										iconOnly
-										title="Reset to deployed version"
-										on:click={() => onReset?.(index)}
-									/>
-								{/if}
-							{/if}
-						</div>
-					</td>
-				</tr>
-			{/each}
-
-			{#if !loading && triggers.length === 0}
-				<tr>
-					<td colspan="2" class="text-center py-4 text-tertiary text-sm"> No triggers found </td>
-				</tr>
-			{/if}
-			{#if loading && triggers.length === 0}
-				<tr>
-					<td colspan="2" class="text-center py-4 text-tertiary text-sm">
-						<div class="flex justify-center items-center gap-2">
-							<Loader2 class="animate-spin" size={16} />
-							<span>Loading triggers...</span>
-						</div>
-					</td>
-				</tr>
-			{/if}
-		</tbody>
-	</DataTable>
-</div>
diff --git a/frontend/src/lib/components/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/triggers/TriggersWrapper.svelte
index 7ff6c88f8a..7c971f46c1 100644
--- a/frontend/src/lib/components/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/triggers/TriggersWrapper.svelte
@@ -1,173 +1,117 @@
 <script lang="ts">
-	import RoutesPanel from './http/RoutesPanel.svelte'
-	import WebhooksPanel from './webhook/WebhooksPanel.svelte'
-	import EmailTriggerPanel from '../details/EmailTriggerPanel.svelte'
-	import SchedulePanel from '$lib/components/SchedulePanel.svelte'
-	import PostgresTriggersPanel from './postgres/PostgresTriggersPanel.svelte'
-	import KafkaTriggerPanel from './kafka/KafkaTriggersPanel.svelte'
-	import NatsTriggersPanel from './nats/NatsTriggersPanel.svelte'
-	import MqttTriggerPanel from './mqtt/MqttTriggersPanel.svelte'
-	import SqsTriggerPanel from './sqs/SqsTriggerPanel.svelte'
-	import GcpTriggerPanel from './gcp/GcpTriggerPanel.svelte'
-	import ScheduledPollPanel from './scheduled/ScheduledPollPanel.svelte'
-	import WebsocketTriggersPanel from './websocket/WebsocketTriggersPanel.svelte'
-	import { triggerIconMap, type Trigger } from './utils'
-	import ClipboardPanel from '../details/ClipboardPanel.svelte'
-	import CliHelpBox from '../CliHelpBox.svelte'
-	import TriggerLabel from './TriggerLabel.svelte'
-	import { twMerge } from 'tailwind-merge'
+	import { type CaptureTriggerKind } from '$lib/gen'
+	import { capitalize } from '$lib/utils'
+	import Alert from '../common/alert/Alert.svelte'
+	import RouteEditorConfigSection from './http/RouteEditorConfigSection.svelte'
+	import WebsocketEditorConfigSection from './websocket/WebsocketEditorConfigSection.svelte'
+	import WebhooksConfigSection from './webhook/WebhooksConfigSection.svelte'
+	import EmailTriggerConfigSection from '../details/EmailTriggerConfigSection.svelte'
+	import KafkaTriggersConfigSection from './kafka/KafkaTriggersConfigSection.svelte'
+	import NatsTriggersConfigSection from './nats/NatsTriggersConfigSection.svelte'
+	import MqttEditorConfigSection from './mqtt/MqttEditorConfigSection.svelte'
+	import SqsTriggerEditorConfigSection from './sqs/SqsTriggerEditorConfigSection.svelte'
+	import PostgresEditorConfigSection from './postgres/PostgresEditorConfigSection.svelte'
+	import GcpTriggerEditorConfigSection from './gcp/GcpTriggerEditorConfigSection.svelte'
 
-	interface Props {
-		selectedTrigger: Trigger
-		isFlow: boolean
-		initialPath: string
-		fakeInitialPath: string
-		currentPath: string
-		hash?: string
-		isDeployed: boolean
-		small: boolean
-		args: Record<string, any>
-		newItem: boolean
-		schema: Record<string, any> | undefined
-		isEditor?: boolean
-		onConfigChange?: (cfg: Record<string, any>, canSave: boolean, updated: boolean) => void
-		onCaptureConfigChange?: (cfg: Record<string, any>, isValidConfig: boolean) => void
-		onUpdate?: (path: string) => void
-		onDelete?: () => void
-		onReset?: () => void
-	}
-
-	let {
-		selectedTrigger,
-		isFlow = false,
-		initialPath,
-		fakeInitialPath,
-		currentPath,
-		hash,
-		small,
-		args,
-		newItem,
-		schema,
-		...props
-	}: Props = $props()
+	export let triggerType: CaptureTriggerKind = 'webhook'
+	export let cloudDisabled: boolean = false
+	export let args: any
+	export let isFlow: boolean = false
+	export let path: string = ''
+	export let data: any = {}
 </script>
 
-{#if selectedTrigger.type === 'http'}
-	<RoutesPanel
-		{selectedTrigger}
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'webhook'}
-	<WebhooksPanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{hash}
-		token=""
-		{args}
-		scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
-		{newItem}
-	/>
-{:else if selectedTrigger.type === 'email'}
-	<EmailTriggerPanel
-		token=""
-		scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
-		path={initialPath || fakeInitialPath}
-		{isFlow}
-		on:email-domain
-	/>
-{:else if selectedTrigger.type === 'schedule'}
-	<SchedulePanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{selectedTrigger}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		{schema}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'websocket'}
-	<WebsocketTriggersPanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{selectedTrigger}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'kafka'}
-	<KafkaTriggerPanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{selectedTrigger}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'postgres'}
-	<PostgresTriggersPanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{selectedTrigger}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'nats'}
-	<NatsTriggersPanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{selectedTrigger}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'mqtt'}
-	<MqttTriggerPanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{selectedTrigger}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'sqs'}
-	<SqsTriggerPanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{selectedTrigger}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'gcp'}
-	<GcpTriggerPanel
-		{isFlow}
-		path={initialPath || fakeInitialPath}
-		{selectedTrigger}
-		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
-		customLabel={small ? customLabel : undefined}
-		{...props}
-	/>
-{:else if selectedTrigger.type === 'poll'}
-	<ScheduledPollPanel />
-{:else if selectedTrigger.type === 'cli'}
-	<div class="py-1 flex flex-col gap-4">
-		<ClipboardPanel content={selectedTrigger.extra?.cliCommand ?? ''} />
-		<CliHelpBox />
-	</div>
-{/if}
-
-{#snippet customLabel()}
-	{@const IconComponent = triggerIconMap[selectedTrigger.type]}
-	<div class="flex flex-row gap-2 items-center grow min-w-0 pr-2">
-		<IconComponent
-			size={16}
-			class={twMerge(selectedTrigger.isDraft ? 'text-frost-400' : '', 'shrink-0')}
+<div class="flex flex-col gap-4 w-full">
+	{#if cloudDisabled}
+		<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+			{capitalize(triggerType)} triggers are disabled in the multi-tenant cloud.
+		</Alert>
+	{:else if triggerType === 'websocket'}
+		<WebsocketEditorConfigSection
+			can_write={true}
+			headless={true}
+			bind:url={args.url}
+			bind:url_runnable_args={args.url_runnable_args}
+			showCapture={false}
 		/>
-		<TriggerLabel trigger={selectedTrigger} />
-	</div>
-{/snippet}
+	{:else if triggerType === 'postgres'}
+		<PostgresEditorConfigSection
+			can_write={true}
+			headless={true}
+			showCapture={false}
+			bind:publication={args.publication}
+			bind:postgres_resource_path={args.postgres_resource_path}
+		/>
+	{:else if triggerType === 'webhook'}
+		<WebhooksConfigSection
+			{isFlow}
+			{path}
+			hash={data?.hash}
+			token={data?.token}
+			runnableArgs={data?.args}
+			scopes={data?.scopes}
+			showCapture={false}
+		/>
+	{:else if triggerType === 'http'}
+		<RouteEditorConfigSection
+			showCapture={false}
+			can_write={true}
+			bind:route_path={args.route_path}
+			bind:http_method={args.http_method}
+			bind:raw_string={args.raw_string}
+			bind:wrap_body={args.wrap_body}
+			capture_mode={true}
+			headless
+		/>
+	{:else if triggerType === 'email'}
+		<EmailTriggerConfigSection
+			hash={data?.hash}
+			token={data?.token}
+			{path}
+			{isFlow}
+			userSettings={data?.userSettings}
+			emailDomain={data?.emailDomain}
+		/>
+	{:else if triggerType === 'kafka'}
+		<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} {path} />
+	{:else if triggerType === 'nats'}
+		<NatsTriggersConfigSection headless={true} bind:args staticInputDisabled={false} {path} />
+	{:else if triggerType === 'mqtt'}
+		<MqttEditorConfigSection
+			bind:v3_config={args.v3_config}
+			bind:v5_config={args.v5_config}
+			bind:client_version={args.client_version}
+			bind:subscribe_topics={args.subscribe_topics}
+			bind:mqtt_resource_path={args.mqtt_resource_path}
+			bind:client_id={args.client_id}
+			showCapture={false}
+			headless={true}
+			can_write={true}
+		/>
+	{:else if triggerType === 'sqs'}
+		<SqsTriggerEditorConfigSection
+			bind:queue_url={args.queue_url}
+			bind:aws_resource_path={args.aws_resource_path}
+			bind:message_attributes={args.message_attributes}
+			bind:aws_auth_resource_type={args.aws_auth_resource_type}
+			headless={true}
+			can_write={true}
+			showCapture={false}
+		/>
+	{:else if triggerType === 'gcp'}
+		<GcpTriggerEditorConfigSection
+			bind:gcp_resource_path={args.gcp_resource_path}
+			bind:topic_id={args.topic_id}
+			bind:subscription_id={args.subscription_id}
+			bind:delivery_config={args.delivery_config}
+			bind:delivery_type={args.delivery_type}
+			bind:subscription_mode={args.subscription_mode}
+			bind:cloud_subscription_id={args.subscription_id}
+			bind:create_update_subscription_id={args.subscription_id}
+			bind:base_endpoint={args.base_endpoint}
+			headless={true}
+			can_write={true}
+			showCapture={false}
+		/>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/triggers/gcp/GcpCapture.svelte b/frontend/src/lib/components/triggers/gcp/GcpCapture.svelte
deleted file mode 100644
index 7538026782..0000000000
--- a/frontend/src/lib/components/triggers/gcp/GcpCapture.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-	import type { CaptureInfo } from '../CaptureSection.svelte'
-	import CaptureSection from '../CaptureSection.svelte'
-	import { workspaceStore } from '$lib/stores'
-	import { Url } from '$lib/components/common'
-	import { fade } from 'svelte/transition'
-	import { base } from '$lib/base'
-
-	interface Props {
-		captureInfo?: CaptureInfo | undefined
-		isValid?: boolean | undefined
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		deliveryType?: 'push' | 'pull'
-		captureLoading?: boolean
-		triggerDeployed?: boolean
-	}
-
-	let {
-		captureInfo = undefined,
-		isValid = undefined,
-		hasPreprocessor = false,
-		isFlow = false,
-		deliveryType = 'pull',
-		captureLoading = false,
-		triggerDeployed = false
-	}: Props = $props()
-
-	function getCaptureUrl(captureInfo: CaptureInfo | undefined) {
-		if (!captureInfo) {
-			return
-		}
-		return `${window.location.origin}${base}/api/w/${$workspaceStore}/capture_u/gcp/${
-			captureInfo.isFlow ? 'flow' : 'script'
-		}/${captureInfo.path}`
-	}
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="gcp"
-		disabled={isValid === false}
-		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-		{captureLoading}
-		displayAlert={triggerDeployed}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Listening to GCP Pub/Sub events...
-				</p>
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to GCP Pub/Sub events.
-				</p>
-			{/if}
-		{/snippet}
-
-		{#if deliveryType === 'push'}
-			{@const captureUrl = getCaptureUrl(captureInfo)}
-			<Url url={captureUrl} label="Test URL" />
-		{/if}
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditor.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditor.svelte
index 2a7c31512a..1b2f8cf389 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditor.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditor.svelte
@@ -2,9 +2,7 @@
 	import { tick } from 'svelte'
 	import GcpTriggerEditorInner from './GcpTriggerEditorInner.svelte'
 
-	let { onUpdate }: { onUpdate?: (path?: string) => void } = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
@@ -14,17 +12,16 @@
 	export async function openNew(
 		is_flow: boolean,
 		initial_script_path?: string,
-		defaultValues?: Record<string, any>,
-		newDraft?: boolean
+		defaultValues?: Record<string, any>
 	) {
 		open = true
 		await tick()
 		drawer?.openNew(is_flow, initial_script_path, defaultValues)
 	}
 
-	let drawer: GcpTriggerEditorInner | undefined = $state()
+	let drawer: GcpTriggerEditorInner
 </script>
 
 {#if open}
-	<GcpTriggerEditorInner {onUpdate} bind:this={drawer} />
+	<GcpTriggerEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
index 0fff25fab4..816dffd90f 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import Section from '$lib/components/Section.svelte'
+	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
-	import { emptyStringTrimmed } from '$lib/utils'
+	import { copyToClipboard, emptyStringTrimmed } from '$lib/utils'
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
 	import Subsection from '$lib/components/Subsection.svelte'
 	import {
@@ -13,6 +15,8 @@
 	} from '$lib/gen'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import Label from '$lib/components/Label.svelte'
+	import ClipboardPanel from '$lib/components/details/ClipboardPanel.svelte'
 	import { base } from '$lib/base'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
@@ -20,13 +24,15 @@
 	import Select from '$lib/components/apps/svelte-select/lib/Select.svelte'
 	import { workspaceStore } from '$lib/stores'
 
-	import { Button, Url } from '$lib/components/common'
-	import { RefreshCw } from 'lucide-svelte'
+	import { Button } from '$lib/components/common'
+	import { ClipboardCopy, RefreshCw } from 'lucide-svelte'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
-	import TestingBadge from '../testingBadge.svelte'
 
 	export let can_write: boolean = false
 	export let headless: boolean = false
+	export let showCapture: boolean = false
+	export let captureTable: CaptureTable | undefined = undefined
+	export let captureInfo: CaptureInfo | undefined = undefined
 	export let isValid: boolean = false
 	export let gcp_resource_path = ''
 	export let subscription_id = ''
@@ -34,17 +40,16 @@
 	export let delivery_type: DeliveryType | undefined = 'pull'
 	export let delivery_config: PushConfig | undefined
 	export let subscription_mode: SubscriptionMode = 'create_update'
-	export let base_endpoint: string = getBaseUrl()
-	export let path = ''
-	export let showTestingBadge: boolean = false
+	export let base_endpoint: string = getBaseUrl(captureInfo)
+	export let path = captureInfo ? captureInfo.path : ''
 
 	let topic_items: string[] = []
 	let subscription_items: string[] = []
 	let darkMode = false
 
 	const DEFAULT_PUSH_CONFIG: PushConfig = {
-		audience: getBaseUrl(),
-		authenticate: false
+		audience: '',
+		authenticate: false,
 	}
 
 	async function loadAllPubSubTopicsFromProject() {
@@ -71,10 +76,7 @@
 	export let cloud_subscription_id = ''
 	export let create_update_subscription_id = ''
 
-	$: isValid =
-		!emptyStringTrimmed(gcp_resource_path) &&
-		!emptyStringTrimmed(topic_id) &&
-		!emptyStringTrimmed(subscription_id)
+	$: isValid = !emptyStringTrimmed(gcp_resource_path) && !emptyStringTrimmed(topic_id)
 	$: if (!delivery_type) {
 		delivery_type = 'pull'
 	}
@@ -82,28 +84,43 @@
 		delivery_config = DEFAULT_PUSH_CONFIG
 	}
 
-	function getBaseUrl() {
-		return `${window.location.origin}${base}/api/gcp/w/${$workspaceStore!}`
-	}
-
-	$: !base_endpoint && (base_endpoint = getBaseUrl())
-
-	$: {
-		if (emptyStringTrimmed(subscription_id) && !emptyStringTrimmed(path)) {
-			subscription_id = `windmill-${$workspaceStore!}-${path.replaceAll('/', '_')}`
+	function getBaseUrl(captureInfo: CaptureInfo | undefined) {
+		if (captureInfo) {
+			return `${window.location.origin}${base}/api/w/${$workspaceStore}/capture_u/gcp/${
+				captureInfo.isFlow ? 'flow' : 'script'
+			}`
+		} else {
+			return `${window.location.origin}${base}/api/gcp/w/${$workspaceStore!}`
 		}
 	}
+
+	$: !base_endpoint && (base_endpoint = getBaseUrl(captureInfo))
 </script>
 
 <DarkModeObserver bind:darkMode />
 
 <div>
-	<Section label="GCP Pub/Sub" {headless}>
-		<svelte:fragment slot="header">
-			{#if showTestingBadge}
-				<TestingBadge />
+	{#if showCapture && captureInfo}
+		{@const captureURL = `${base_endpoint}/${path}`}
+		<CaptureSection
+			captureType="gcp"
+			disabled={!isValid}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+			bind:captureTable
+		>
+			{#if delivery_type === 'push'}
+				<Label label="URL">
+					<ClipboardPanel content={captureURL} disabled={!captureInfo.active} />
+				</Label>
 			{/if}
-		</svelte:fragment>
+		</CaptureSection>
+	{/if}
+	<Section label="GCP Pub/Sub" {headless}>
 		<div class="flex flex-col w-full gap-4">
 			<Subsection label="Connection setup">
 				<div class="flex flex-col gap-1 mt-2">
@@ -191,7 +208,7 @@
 						{#if subscription_mode === 'create_update'}
 							<Subsection
 								label="Subscription id"
-								tooltip="The unique identifier for the Pub/Sub subscription."
+								tooltip="The unique identifier for the Pub/Sub subscription. Leave it empty to let the system automatically generate a subscription ID, or provide a custom one if needed."
 							>
 								<div class="mt-2">
 									<input
@@ -231,9 +248,28 @@
 								</Subsection>
 								{#if delivery_type === 'push' && delivery_config}
 									<div class="flex flex-col gap-3 mt-1">
-										<div class="flex gap-2">
-											<Url url={`${base_endpoint}/${path}`} label="Production URL" />
-										</div>
+										<Subsection
+											label="URL"
+											tooltip="The URL of the service that receives push messages."
+										>
+											<div class="flex gap-2">
+												<input
+													type="text"
+													autocomplete="off"
+													placeholder="URL"
+													disabled
+													value={`${base_endpoint}/${path}`}
+												/>
+												<Button
+													on:click={() => copyToClipboard(`${base_endpoint}/${path}`)}
+													color="dark"
+													size="xs"
+													startIcon={{ icon: ClipboardCopy }}
+												>
+													Copy URL
+												</Button>
+											</div>
+										</Subsection>
 										<Subsection label="Authenticate">
 											<p class="text-xs mb-2 text-tertiary">
 												Enable Google Cloud authentication for push delivery using a verified token.<Required
@@ -293,9 +329,9 @@
 								</div>
 								<Alert title="Push Subscription URL Requirements" type="warning">
 									If the subscription uses <strong>push delivery</strong>, its endpoint URL must
-									match the following format: <strong>{`${base_endpoint}/${path}`}/*</strong>,
-									meaning it must start with
-									<strong>{`${base_endpoint}/${path}`}</strong> followed by any path segment.
+									match the following format: <strong>{base_endpoint}/*</strong>, meaning it must
+									start with
+									<strong>{base_endpoint}</strong> followed by any path segment.
 								</Alert>
 							</div>
 						{/if}
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
index 3c1f7fd5d7..993fc6611a 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
@@ -5,8 +5,10 @@
 	import Path from '$lib/components/Path.svelte'
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, sendUserToast } from '$lib/utils'
-	import { Loader2 } from 'lucide-svelte'
+	import { createEventDispatcher } from 'svelte'
+	import { Loader2, Save } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 	import {
 		GcpTriggerService,
 		type DeliveryType,
@@ -18,83 +20,34 @@
 	import Required from '$lib/components/Required.svelte'
 	import GcpTriggerEditorConfigSection from './GcpTriggerEditorConfigSection.svelte'
 	import { base } from '$app/paths'
-	import type { Snippet } from 'svelte'
-	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
-	import { saveGcpTriggerFromCfg } from './utils'
-	import { handleConfigChange } from '../utils'
 
-	let drawer: Drawer | undefined = $state(undefined)
-	let is_flow: boolean = $state(false)
-	let initialPath = $state('')
-	let edit = $state(true)
-	let delivery_type: DeliveryType = $state('pull')
-	let itemKind: 'flow' | 'script' = $state('script')
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let fixedScriptPath = $state('')
-	let path: string = $state('')
-	let pathError = $state('')
-	let enabled = $state(false)
-	let dirtyPath = $state(false)
-	let can_write = $state(true)
-	let drawerLoading = $state(true)
-	let topic_id: string = $state('')
-	let gcp_resource_path: string = $state('')
-	let subscription_id: string = $state('')
-	let isValid = $state(false)
-	let delivery_config: PushConfig | undefined = $state(undefined)
-	let subscription_mode: SubscriptionMode = $state('create_update')
-	let initialConfig: Record<string, any> | undefined = undefined
-	let deploymentLoading = $state(false)
-	let base_endpoint = $derived(`${window.location.origin}${base}`)
+	let is_loading = false
+	let drawer: Drawer
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
+	let delivery_type: DeliveryType = 'pull'
+	let itemKind: 'flow' | 'script' = 'script'
+	let script_path = ''
+	let initialScriptPath = ''
+	let fixedScriptPath = ''
+	let path: string = ''
+	let pathError = ''
+	let enabled = false
+	let dirtyPath = false
+	let can_write = true
+	let drawerLoading = true
+	let topic_id: string = ''
+	let gcp_resource_path: string = ''
+	let subscription_id: string = ''
+	let isValid = false
+	let delivery_config: PushConfig | undefined = undefined
+	let subscription_mode: SubscriptionMode = 'create_update'
+	const dispatch = createEventDispatcher()
 
-	let {
-		useDrawer = true,
-		description = undefined,
-		hideTarget = false,
-		hideTooltips = false,
-		isEditor = false,
-		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
-		isDeployed = false,
-		customLabel = undefined,
-		onConfigChange = undefined,
-		onCaptureConfigChange = undefined,
-		onUpdate = undefined,
-		onDelete = undefined,
-		onReset = undefined,
-		cloudDisabled = false
-	}: {
-		useDrawer?: boolean
-		description?: Snippet | undefined
-		hideTarget?: boolean
-		hideTooltips?: boolean
-		isEditor?: boolean
-		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
-		isDeployed?: boolean
-		customLabel?: Snippet
-		onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
-		onCaptureConfigChange?: (cfg: Record<string, any>, isValid: boolean) => void
-		onUpdate?: (path?: string) => void
-		onDelete?: () => void
-		onReset?: () => void
-		cloudDisabled?: boolean
-	} = $props()
+	$: is_flow = itemKind === 'flow'
 
-	const gcpConfig = $derived.by(getGcpConfig)
-	const saveDisabled = $derived(
-		pathError != '' || emptyString(script_path) || !isValid || !can_write
-	)
-	const captureConfig = $derived.by(isEditor ? getGcpCaptureConfig : () => ({}))
-
-	export async function openEdit(
-		ePath: string,
-		isFlow: boolean,
-		defaultValues?: Record<string, any>
-	) {
+	export async function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -102,14 +55,11 @@
 			itemKind = isFlow ? 'flow' : 'script'
 			edit = true
 			dirtyPath = false
-			await loadTrigger(defaultValues)
+			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load GCP Pub/Sub trigger: ${err.body}`, true)
 		} finally {
 			drawerLoading = false
-			if (!defaultValues) {
-				initialConfig = structuredClone($state.snapshot(getGcpConfig()))
-			}
 		}
 	}
 
@@ -132,183 +82,144 @@
 			subscription_id = ''
 			topic_id = defaultValues?.topic_id
 			subscription_mode = defaultValues?.subscription_mode ?? 'create_update'
-			path = defaultValues?.path ?? ''
+			path = ''
 			initialPath = ''
 			edit = false
 			dirtyPath = false
-			enabled = defaultValues?.enabled ?? false
 		} finally {
 			drawerLoading = false
 		}
 	}
 
-	async function loadTrigger(defaultConfig?: Record<string, any>): Promise<void> {
-		if (defaultConfig) {
-			loadTriggerConfig(defaultConfig)
-			return
-		} else {
-			try {
-				const s = await GcpTriggerService.getGcpTrigger({
-					workspace: $workspaceStore!,
-					path: initialPath
-				})
-				loadTriggerConfig(s)
-			} catch (error) {
-				sendUserToast(`Could not load GCP Pub/Sub trigger: ${error.body}`, true)
-			}
+	async function loadTrigger(): Promise<void> {
+		try {
+			const s = await GcpTriggerService.getGcpTrigger({
+				workspace: $workspaceStore!,
+				path: initialPath
+			})
+			script_path = s.script_path
+			initialScriptPath = s.script_path
+			gcp_resource_path = s.gcp_resource_path
+			delivery_type = s.delivery_type
+			subscription_id = s.subscription_id
+			delivery_config = s.delivery_config
+			subscription_mode = s.subscription_mode
+			is_flow = s.is_flow
+			path = s.path
+			enabled = s.enabled
+			topic_id = s.topic_id
+			can_write = canWrite(s.path, s.extra_perms, $userStore)
+		} catch (error) {
+			sendUserToast(`Could not load GCP Pub/Sub trigger: ${error.body}`, true)
 		}
 	}
 
-	async function loadTriggerConfig(cfg?: Record<string, any>): Promise<void> {
-		script_path = cfg?.script_path
-		initialScriptPath = cfg?.script_path
-		gcp_resource_path = cfg?.gcp_resource_path
-		delivery_type = cfg?.delivery_type
-		subscription_id = cfg?.subscription_id
-		delivery_config = cfg?.delivery_config
-		subscription_mode = cfg?.subscription_mode
-		is_flow = cfg?.is_flow
-		path = cfg?.path
-		enabled = cfg?.enabled
-		topic_id = cfg?.topic_id
-		can_write = canWrite(cfg?.path, cfg?.extra_perms, $userStore)
-	}
-
 	async function updateTrigger(): Promise<void> {
-		deploymentLoading = true
-		const cfg = gcpConfig
-		if (!cfg) {
-			return
-		}
-		const isSaved = await saveGcpTriggerFromCfg(
-			initialPath,
-			cfg,
-			edit,
-			$workspaceStore!,
-			usedTriggerKinds
-		)
-		if (isSaved) {
-			onUpdate?.(cfg.path)
-			drawer?.closeDrawer()
-		}
-		deploymentLoading = false
-	}
+		try {
+			is_loading = true
+			const base_endpoint = `${window.location.origin}${base}`
+			if (delivery_type === 'push') {
+				if (!delivery_config) {
+					sendUserToast('Must set route path when delivery type is push', true)
+					return
+				}
+			} else {
+				delivery_config = undefined
+			}
+			if (edit) {
+				await GcpTriggerService.updateGcpTrigger({
+					workspace: $workspaceStore!,
+					path: initialPath,
+					requestBody: {
+						gcp_resource_path,
+						subscription_mode,
+						subscription_id,
+						delivery_type,
+						delivery_config,
+						base_endpoint,
+						topic_id,
+						path,
+						script_path,
+						enabled,
+						is_flow
+					}
+				})
+				sendUserToast(`GCP Pub/Sub trigger ${path} updated`)
+			} else {
+				await GcpTriggerService.createGcpTrigger({
+					workspace: $workspaceStore!,
+					requestBody: {
+						gcp_resource_path,
+						subscription_mode,
+						subscription_id,
+						delivery_type,
+						delivery_config,
+						base_endpoint,
+						topic_id,
+						path,
+						script_path,
+						enabled: true,
+						is_flow
+					}
+				})
+				sendUserToast(`GCP Pub/Sub trigger ${path} created`)
+			}
 
-	function getGcpConfig() {
-		return {
-			gcp_resource_path,
-			subscription_mode,
-			subscription_id,
-			delivery_type,
-			delivery_config,
-			base_endpoint,
-			topic_id,
-			path,
-			script_path,
-			enabled,
-			is_flow
+			if (!$usedTriggerKinds.includes('gcp')) {
+				$usedTriggerKinds = [...$usedTriggerKinds, 'gcp']
+			}
+			dispatch('update')
+			drawer.closeDrawer()
+			is_loading = false
+		} catch (error) {
+			is_loading = false
+			sendUserToast(error.body, true)
 		}
 	}
-
-	function getGcpCaptureConfig() {
-		return {
-			gcp_resource_path,
-			subscription_mode,
-			subscription_id,
-			delivery_type,
-			delivery_config,
-			base_endpoint,
-			topic_id,
-			path
-		}
-	}
-
-	async function handleToggleEnabled(toggleEnabled: boolean) {
-		enabled = toggleEnabled
-		if (!isDraftOnly && !hasDraft) {
-			await GcpTriggerService.setGcpTriggerEnabled({
-				path: initialPath,
-				workspace: $workspaceStore ?? '',
-				requestBody: { enabled: toggleEnabled }
-			})
-			sendUserToast(`${toggleEnabled ? 'enabled' : 'disabled'} GCP Pub/Sub trigger ${initialPath}`)
-		}
-	}
-
-	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
-	})
-
-	$effect(() => {
-		if (!drawerLoading) {
-			handleConfigChange(gcpConfig, initialConfig, saveDisabled, edit, onConfigChange)
-		}
-	})
 </script>
 
-{#if useDrawer}
-	<Drawer size="800px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit GCP Pub/Sub trigger ${initialPath}`
-					: `GCP Pub/Sub trigger ${initialPath}`
-				: 'New GCP Pub/Sub trigger'}
-			on:close={drawer?.closeDrawer}
-		>
-			<svelte:fragment slot="actions">
-				{@render actionsButtons()}
-			</svelte:fragment>
-			{@render config()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'GCP Pub/Sub trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit GCP Pub/Sub trigger ${initialPath}`
+				: `GCP Pub/Sub trigger ${initialPath}`
+			: 'New GCP Pub/Sub trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading && can_write}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								sendUserToast(
+									`${e.detail ? 'enabled' : 'disabled'} GCP Pub/Sub trigger ${initialPath}`
+								)
+							}}
+						/>
+					</div>
+				{/if}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || emptyString(script_path) || !isValid || !can_write}
+					on:click={updateTrigger}
+					loading={is_loading}
+				>
+					Save
+				</Button>
 			{/if}
 		</svelte:fragment>
-		<svelte:fragment slot="action">
-			{@render actionsButtons()}
-		</svelte:fragment>
-		{@render config()}
-	</Section>
-{/if}
-
-{#snippet actionsButtons()}
-	{#if !drawerLoading && can_write}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={drawerLoading || !can_write ? 'none' : 'create'}
-			{saveDisabled}
-			{enabled}
-			isLoading={deploymentLoading}
-			{edit}
-			{allowDraft}
-			{isDeployed}
-			onUpdate={updateTrigger}
-			{onReset}
-			{onDelete}
-			onToggleEnabled={handleToggleEnabled}
-			{cloudDisabled}
-		/>
-	{/if}
-{/snippet}
-
-{#snippet config()}
-	{#if drawerLoading}
-		<div class="flex flex-col items-center justify-center h-full w-full">
-			<Loader2 size="50" class="animate-spin" />
-			<p>Loading...</p>
-		</div>
-	{:else}
-		<div class="flex flex-col gap-5">
-			{#if description}
-				{@render description()}
-			{/if}
-			{#if !hideTooltips}
+		{#if drawerLoading}
+			<div class="flex flex-col items-center justify-center h-full w-full">
+				<Loader2 size="50" class="animate-spin" />
+				<p>Loading...</p>
+			</div>
+		{:else}
+			<div class="flex flex-col gap-5">
 				<Alert title="Info" type="info">
 					{#if edit}
 						Changes can take up to 30 seconds to take effect.
@@ -316,26 +227,23 @@
 						New GCP Pub/Sub trigger can take up to 30 seconds to start listening.
 					{/if}
 				</Alert>
-			{/if}
-		</div>
-		<div class="flex flex-col gap-12 mt-6">
-			<div class="flex flex-col gap-4">
-				<Label label="Path">
-					<Path
-						bind:dirty={dirtyPath}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						checkInitialPathExistence={!edit}
-						namePlaceholder="gcp_trigger"
-						kind="gcp_trigger"
-						disabled={!can_write}
-						disableEditing={!can_write}
-					/>
-				</Label>
 			</div>
+			<div class="flex flex-col gap-12 mt-6">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="gcp_trigger"
+							kind="gcp_trigger"
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
 
-			{#if !hideTarget}
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
 						Pick a script or flow to be triggered <Required required={true} />
@@ -348,38 +256,35 @@
 							allowFlow={true}
 							bind:itemKind
 							bind:scriptPath={script_path}
-							allowRefresh={can_write}
-							allowEdit={!$userStore?.operator}
+							allowRefresh
 						/>
 						{#if emptyString(script_path)}
 							<Button
 								btnClasses="ml-4 mt-2"
 								color="dark"
 								size="xs"
-								disabled={!can_write}
 								href={itemKind === 'flow' ? '/flows/add?hub=68' : '/scripts/add?hub=hub%2F19662'}
 								target="_blank">Create from template</Button
 							>
 						{/if}
 					</div>
 				</Section>
-			{/if}
 
-			<GcpTriggerEditorConfigSection
-				bind:isValid
-				bind:gcp_resource_path
-				bind:subscription_id
-				bind:delivery_type
-				bind:delivery_config
-				bind:topic_id
-				bind:subscription_mode
-				bind:path
-				cloud_subscription_id={subscription_id}
-				create_update_subscription_id={subscription_id}
-				{can_write}
-				headless={true}
-				showTestingBadge={isEditor}
-			/>
-		</div>
-	{/if}
-{/snippet}
+				<GcpTriggerEditorConfigSection
+					bind:isValid
+					bind:gcp_resource_path
+					bind:subscription_id
+					bind:delivery_type
+					bind:delivery_config
+					bind:topic_id
+					bind:subscription_mode
+					bind:path
+					cloud_subscription_id={subscription_id}
+					create_update_subscription_id={subscription_id}
+					{can_write}
+					headless={true}
+				/>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerPanel.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerPanel.svelte
index 348a3a17b8..fe9c587c1b 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerPanel.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerPanel.svelte
@@ -1,68 +1,131 @@
 <script lang="ts">
+	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
+	import { GcpTriggerService, type GcpTrigger } from '$lib/gen'
+
+	import { canWrite } from '$lib/utils'
+	import { getContext, onMount } from 'svelte'
 	import { isCloudHosted } from '$lib/cloud'
+	import Section from '$lib/components/Section.svelte'
 	import { Alert } from '$lib/components/common'
 	import Description from '$lib/components/Description.svelte'
-	import { enterpriseLicense } from '$lib/stores'
-	import GcpTriggerEditorInner from './GcpTriggerEditorInner.svelte'
-	import { onMount } from 'svelte'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
+	import GcpTriggerEditor from './GcpTriggerEditor.svelte'
+	export let isFlow: boolean
+	export let path: string
+	export let newItem: boolean = false
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
-	let {
-		selectedTrigger,
-		isFlow,
-		path,
-		isDeployed = false,
-		defaultValues = undefined,
-		customLabel = undefined,
-		...restProps
-	} = $props()
-	let gcpTriggerEditor: GcpTriggerEditorInner | undefined = $state(undefined)
+	let gcpTriggerEditor: GcpTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
-	async function openGcpTriggerEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			gcpTriggerEditor?.openNew(isFlow, path, defaultValues)
-		} else {
-			gcpTriggerEditor?.openEdit(selectedTrigger.path, isFlow, defaultValues)
-		}
-	}
+	$: path && loadTriggers()
+
+	const { triggersCount, selectedTrigger, defaultValues } =
+		getContext<TriggerContext>('TriggerContext')
 
 	onMount(() => {
-		gcpTriggerEditor && openGcpTriggerEditor(isFlow, selectedTrigger.isDraft ?? false)
+		if (
+			defaultValues &&
+			$selectedTrigger === 'gcp' &&
+			Object.keys($defaultValues ?? {}).length > 0
+		) {
+			gcpTriggerEditor.openNew(isFlow, path, $defaultValues)
+			defaultValues.set(undefined)
+		}
 	})
 
-	const cloudDisabled = $derived(isCloudHosted())
+	let gcpTriggers: (GcpTrigger & { canWrite: boolean })[] | undefined = undefined
+	export async function loadTriggers() {
+		try {
+			gcpTriggers = (
+				await GcpTriggerService.listGcpTriggers({
+					workspace: $workspaceStore ?? '',
+					path,
+					isFlow
+				})
+			).map((x) => {
+				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
+			})
+			$triggersCount = { ...($triggersCount ?? {}), gcp_count: gcpTriggers?.length }
+			openForm = gcpTriggers?.length === 0 || dontCloseOnLoad
+		} catch (e) {
+			console.error('impossible to load GCP Pub/Sub triggers', e)
+		}
+	}
 </script>
 
+<GcpTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={gcpTriggerEditor}
+/>
+
 {#if !$enterpriseLicense}
 	<Alert title="EE Only" type="warning" size="xs">
 		GCP Pub/Sub triggers are an enterprise only feature.
 	</Alert>
+{:else if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		GCP Pub/Sub triggers are disabled in the multi-tenant cloud.
+	</Alert>
 {:else}
 	<div class="flex flex-col gap-4">
-		<GcpTriggerEditorInner
-			bind:this={gcpTriggerEditor}
-			useDrawer={false}
-			hideTarget
-			hideTooltips={!isDeployed || cloudDisabled}
-			allowDraft={true}
-			hasDraft={!!selectedTrigger.draftConfig}
-			isDraftOnly={selectedTrigger.isDraft}
-			{customLabel}
-			{isDeployed}
-			{cloudDisabled}
-			{...restProps}
-		>
-			{#snippet description()}
-				{#if cloudDisabled}
-					<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-						GCP Pub/Sub triggers are disabled in the multi-tenant cloud.
-					</Alert>
-				{:else}
-					<Description link="https://www.windmill.dev/docs/core_concepts/gcp_triggers">
-						GCP Pub/Sub triggers execute scripts and flows in response to messages published to
-						Google Cloud Pub/Sub topics.
-					</Description>
-				{/if}
-			{/snippet}
-		</GcpTriggerEditorInner>
+		<Description link="https://cloud.google.com/pubsub/docs?hl=en">
+			GCP Pub/Sub triggers allow your scripts or flows to process messages from Google Cloud
+			Pub/Sub in real time. Each trigger listens to a Pub/Sub subscription and executes a script or
+			a flow when new messages are published to the corresponding topic.
+		</Description>
+
+		{#if !newItem && gcpTriggers && gcpTriggers.length > 0}
+			<Section label="GCP Pub/Sub">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each gcpTriggers as gcpTrigger (gcpTrigger.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{gcpTrigger.path}</div>
+
+								<div class="flex justify-end">
+									<button
+										on:click={() => gcpTriggerEditor?.openEdit(gcpTrigger.path, isFlow)}
+										class="px-2"
+									>
+										{#if gcpTrigger.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+
+		<TriggersEditorSection
+			on:applyArgs
+			on:saveTrigger={(e) => {
+				gcpTriggerEditor?.openNew(isFlow, path, e.detail.config)
+			}}
+			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
+			cloudDisabled={false}
+			triggerType="gcp"
+			{isFlow}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
+		/>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/triggers/gcp/utils.ts b/frontend/src/lib/components/triggers/gcp/utils.ts
deleted file mode 100644
index e2bebce6cd..0000000000
--- a/frontend/src/lib/components/triggers/gcp/utils.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { GcpTriggerService } from '$lib/gen'
-import { sendUserToast } from '$lib/toast'
-import { get, type Writable } from 'svelte/store'
-
-export async function saveGcpTriggerFromCfg(
-	initialPath: string,
-	cfg: Record<string, any>,
-	edit: boolean,
-	workspace: string,
-	usedTriggerKinds: Writable<string[]>
-): Promise<boolean> {
-	try {
-		const requestBody = {
-			gcp_resource_path: cfg.gcp_resource_path,
-			subscription_mode: cfg.subscription_mode,
-			subscription_id: cfg.subscription_id,
-			delivery_type: cfg.delivery_type,
-			delivery_config: cfg.delivery_config,
-			base_endpoint: cfg.base_endpoint,
-			topic_id: cfg.topic_id,
-			path: cfg.path,
-			script_path: cfg.script_path,
-			enabled: cfg.enabled,
-			is_flow: cfg.is_flow
-		}
-		if (edit) {
-			await GcpTriggerService.updateGcpTrigger({
-				workspace,
-				path: initialPath,
-				requestBody
-			})
-			sendUserToast(`GCP Pub/Sub trigger ${cfg.path} updated`)
-		} else {
-			await GcpTriggerService.createGcpTrigger({
-				workspace: workspace,
-				requestBody: {
-					...requestBody,
-					enabled: true
-				}
-			})
-			sendUserToast(`GCP Pub/Sub trigger ${cfg.path} created`)
-		}
-
-		if (!get(usedTriggerKinds).includes('gcp')) {
-			usedTriggerKinds.update((t) => [...t, 'gcp'])
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
-}
diff --git a/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte b/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
index 1fa781d089..d9f129851f 100644
--- a/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
@@ -2,25 +2,13 @@
 	import Label from '$lib/components/Label.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import type { Snippet } from 'svelte'
 
-	interface Props {
-		raw_string: boolean
-		wrap_body: boolean
-		disabled?: boolean
-		testingBadge?: Snippet | undefined
-	}
-
-	let {
-		raw_string = $bindable(),
-		wrap_body = $bindable(),
-		disabled = false,
-		testingBadge = undefined
-	}: Props = $props()
+	export let raw_string: boolean
+	export let wrap_body: boolean
 </script>
 
 <Label label="Raw body" class="w-full">
-	{#snippet header()}
+	<svelte:fragment slot="header">
 		<Tooltip
 			documentationLink="https://www.windmill.dev/docs/core_concepts/http_routing#body-processing-options"
 		>
@@ -28,39 +16,31 @@
 			script authentication method and useful for signature verification or other advanced use
 			cases.
 		</Tooltip>
-		{#if testingBadge}
-			{@render testingBadge()}
-		{/if}
-	{/snippet}
-	{#snippet action()}
+	</svelte:fragment>
+	<svelte:fragment slot="action">
 		<Toggle
 			checked={raw_string}
 			on:change={() => {
 				raw_string = !raw_string
 			}}
-			{disabled}
 		/>
-	{/snippet}
+	</svelte:fragment>
 </Label>
 <Label label="Wrap body" class="w-full">
-	{#snippet header()}
+	<svelte:fragment slot="header">
 		<Tooltip
 			documentationLink="https://www.windmill.dev/docs/core_concepts/http_routing#body-processing-options"
 		>
-			Wraps the body in a JSON object with the key 'body'. Useful for compatibility with existing
-			code that expects a JSON object.
+			Wraps the payload in an object under the 'body' key, useful for handling unknown payloads.
+			Note that this will have no effect when using a preprocessor.
 		</Tooltip>
-		{#if testingBadge}
-			{@render testingBadge()}
-		{/if}
-	{/snippet}
-	{#snippet action()}
+	</svelte:fragment>
+	<svelte:fragment slot="action">
 		<Toggle
 			checked={wrap_body}
 			on:change={() => {
 				wrap_body = !wrap_body
 			}}
-			{disabled}
 		/>
-	{/snippet}
+	</svelte:fragment>
 </Label>
diff --git a/frontend/src/lib/components/triggers/http/RouteCapture.svelte b/frontend/src/lib/components/triggers/http/RouteCapture.svelte
deleted file mode 100644
index 983c6f3cd3..0000000000
--- a/frontend/src/lib/components/triggers/http/RouteCapture.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
-	import { workspaceStore } from '$lib/stores'
-	import Label from '$lib/components/Label.svelte'
-	import CopyableCodeBlock from '$lib/components/details/CopyableCodeBlock.svelte'
-	import { bash } from 'svelte-highlight/languages'
-	// import { page } from '$app/stores'
-	import { base } from '$lib/base'
-	import type { CaptureInfo } from '../CaptureSection.svelte'
-	import CaptureSection from '../CaptureSection.svelte'
-	import { isObject } from '$lib/utils'
-	import { Url } from '$lib/components/common'
-	import { fade } from 'svelte/transition'
-
-	interface Props {
-		route_path: string | undefined
-		http_method: 'get' | 'post' | 'put' | 'patch' | 'delete' | undefined
-		captureInfo?: CaptureInfo | undefined
-		runnableArgs?: any
-		isValid?: boolean | undefined
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		captureLoading?: boolean
-	}
-
-	let {
-		route_path,
-		http_method,
-		captureInfo = undefined,
-		runnableArgs = {},
-		isValid = undefined,
-		hasPreprocessor = false,
-		isFlow = false,
-		captureLoading = false
-	}: Props = $props()
-
-	let captureURL = $derived(
-		`${location.origin}${base}/api/w/${$workspaceStore}/capture_u/http/${
-			captureInfo?.isFlow ? 'flow' : 'script'
-		}/${captureInfo?.path.replaceAll('/', '.')}/${route_path ?? ''}`
-	)
-	let cleanedRunnableArgs = $derived(
-		isObject(runnableArgs) && 'wm_trigger' in runnableArgs
-			? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
-			: runnableArgs
-	)
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="http"
-		disabled={isValid === false}
-		{captureInfo}
-		{captureLoading}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Send a POST request to the URL below to simulate a http event.
-				</p>
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to HTTP requests on this test URL.
-				</p>
-			{/if}
-		{/snippet}
-
-		<Url url={captureURL} label="Test URL" />
-
-		<Label label="Example cURL" disabled={!captureInfo.active}>
-			<CopyableCodeBlock
-				disabled={!captureInfo.active}
-				code={`curl \\
--X ${(http_method ?? 'post').toUpperCase()} ${captureURL} \\
--H 'Content-Type: application/json' \\
--d '${JSON.stringify(cleanedRunnableArgs ?? {}, null, 2)}'`}
-				language={bash}
-			/>
-		</Label>
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/http/RouteEditor.svelte b/frontend/src/lib/components/triggers/http/RouteEditor.svelte
index 00914e8172..ce093aa976 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditor.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditor.svelte
@@ -2,13 +2,7 @@
 	import { tick } from 'svelte'
 	import RouteEditorInner from './RouteEditorInner.svelte'
 
-	interface Props {
-		onUpdate?: (cfg?: Record<string, any>) => void
-	}
-
-	let { onUpdate = undefined }: Props = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
@@ -25,9 +19,13 @@
 		drawer?.openNew(is_flow, initial_script_path, defaultValues)
 	}
 
-	let drawer: RouteEditorInner | undefined = $state()
+	export async function getTriggers() {
+		return drawer?.getTriggers()
+	}
+
+	let drawer: RouteEditorInner
 </script>
 
 {#if open}
-	<RouteEditorInner {onUpdate} bind:this={drawer} />
+	<RouteEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
index ae51547ef7..0c523decd5 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
@@ -1,16 +1,25 @@
 <script lang="ts">
-	import { Alert, Url } from '$lib/components/common'
+	import { Alert, Badge } from '$lib/components/common'
 	import Required from '$lib/components/Required.svelte'
 	import Section from '$lib/components/Section.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
+	import Label from '$lib/components/Label.svelte'
+	import CopyableCodeBlock from '$lib/components/details/CopyableCodeBlock.svelte'
+	import { bash } from 'svelte-highlight/languages'
 	import { HttpTriggerService } from '$lib/gen'
 	// import { page } from '$app/stores'
+	import { base } from '$lib/base'
+	import type { CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureSection from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
+	import ClipboardPanel from '../../details/ClipboardPanel.svelte'
+	import { isObject } from '$lib/utils'
 	import { getHttpRoute } from './utils'
+	import RouteBodyTransformerOption from './RouteBodyTransformerOption.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import Toggle from '$lib/components/Toggle.svelte'
-	import TestingBadge from '../testingBadge.svelte'
 
 	export let initialTriggerPath: string | undefined = undefined
 	export let dirtyRoutePath: boolean = false
@@ -19,12 +28,16 @@
 	export let can_write: boolean = false
 	export let static_asset_config: { s3: string; storage?: string; filename?: string } | undefined =
 		undefined
+	export let showCapture = false
 	export let headless: boolean = false
+	export let captureInfo: CaptureInfo | undefined = undefined
+	export let captureTable: CaptureTable | undefined = undefined
 	export let workspaced_route: boolean = false
 	export let isValid = false
-	export let isDraftOnly: boolean = true
-	export let showTestingBadge: boolean = false
-
+	export let runnableArgs: any = {}
+	export let raw_string: boolean = false
+	export let wrap_body: boolean = false
+	export let capture_mode: boolean
 	let validateTimeout: NodeJS.Timeout | undefined = undefined
 
 	let routeError: string = ''
@@ -71,20 +84,47 @@
 
 	$: !http_method && (http_method = 'post')
 	$: route_path === undefined && (route_path = '')
-
-	$: userIsAdmin = $userStore?.is_admin || $userStore?.is_super_admin
-	$: userCanEditConfig = userIsAdmin || isDraftOnly // User can edit config if they are admin or if the trigger is a draft which will not be saved
 </script>
 
 <div>
+	{#if showCapture && captureInfo}
+		{@const captureURL = `${location.origin}${base}/api/w/${$workspaceStore}/capture_u/http/${
+			captureInfo.isFlow ? 'flow' : 'script'
+		}/${captureInfo.path.replaceAll('/', '.')}/${route_path}`}
+		{@const cleanedRunnableArgs =
+			isObject(runnableArgs) && 'wm_trigger' in runnableArgs
+				? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
+				: runnableArgs}
+		<CaptureSection
+			captureType="http"
+			disabled={!isValid}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+			bind:captureTable
+		>
+			<Label label="URL">
+				<ClipboardPanel content={captureURL} disabled={!captureInfo.active} />
+			</Label>
+
+			<Label label="Example cUrl">
+				<CopyableCodeBlock
+					disabled={!captureInfo.active}
+					code={`curl \\
+-X ${(http_method ?? 'post').toUpperCase()} ${captureURL} \\
+-H 'Content-Type: application/json' \\
+-d '${JSON.stringify(cleanedRunnableArgs ?? {}, null, 2)}'`}
+					language={bash}
+				/>
+			</Label>
+		</CaptureSection>
+	{/if}
 	<Section label="HTTP" {headless}>
-		<svelte:fragment slot="header">
-			{#if showTestingBadge}
-				<TestingBadge />
-			{/if}
-		</svelte:fragment>
-		{#if !userCanEditConfig && isDraftOnly}
-			<Alert type="info" title="Admin only" collapsible size="xs">
+		{#if !($userStore?.is_admin || $userStore?.is_super_admin)}
+			<Alert type="info" title="Admin only" collapsible>
 				Route endpoints can only be edited by workspace admins
 			</Alert>
 			<div class="my-2"></div>
@@ -104,7 +144,7 @@
 						type="text"
 						autocomplete="off"
 						bind:value={route_path}
-						disabled={!userCanEditConfig || !can_write}
+						disabled={!($userStore?.is_admin || $userStore?.is_super_admin) || !can_write}
 						class={routeError === ''
 							? ''
 							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
@@ -118,28 +158,44 @@
 			<ToggleButtonGroup
 				class="w-auto"
 				bind:selected={http_method}
-				disabled={!userCanEditConfig || !can_write || !!static_asset_config}
+				disabled={!($userStore?.is_admin || $userStore?.is_super_admin) ||
+					!can_write ||
+					!!static_asset_config}
 				let:item
-				let:disabled
 			>
-				<ToggleButton label="GET" value="get" {item} {disabled} />
-				<ToggleButton label="POST" value="post" {item} {disabled} />
-				<ToggleButton label="PUT" value="put" {item} {disabled} />
-				<ToggleButton label="PATCH" value="patch" {item} {disabled} />
-				<ToggleButton label="DELETE" value="delete" {item} {disabled} />
+				<ToggleButton label="GET" value="get" {item} />
+				<ToggleButton label="POST" value="post" {item} />
+				<ToggleButton label="PUT" value="put" {item} />
+				<ToggleButton label="PATCH" value="patch" {item} />
+				<ToggleButton label="DELETE" value="delete" {item} />
 			</ToggleButtonGroup>
-			<div class="flex flex-col w-full">
-				<Url url={fullRoute} label="Production URL" />
-
+			<div class="flex flex-col w-full mt-2">
+				<div class="flex justify-start w-full">
+					<Badge
+						color="gray"
+						class="center-center !bg-surface-secondary !text-tertiary !w-[90px] !h-[24px] rounded-r-none border"
+					>
+						Full endpoint
+					</Badge>
+					<input
+						type="text"
+						readonly
+						value={fullRoute}
+						size={fullRoute.length || 50}
+						class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+						on:focus={({ currentTarget }) => {
+							currentTarget.select()
+						}}
+					/>
+				</div>
 				<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
 					>{dirtyRoutePath ? routeError : ''}</div
 				>
-				{#if !isCloudHosted()}
+				{#if !capture_mode && !isCloudHosted()}
 					<div class="mt-1">
 						<Toggle
 							size="sm"
 							checked={workspaced_route}
-							disabled={!can_write}
 							on:change={() => {
 								workspaced_route = !workspaced_route
 								dirtyRoutePath = true
@@ -155,6 +211,9 @@
 					</div>
 				{/if}
 			</div>
+			{#if capture_mode}
+				<RouteBodyTransformerOption bind:raw_string bind:wrap_body />
+			{/if}
 		</div>
 	</Section>
 </div>
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
index 59661b89d9..427540b288 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
@@ -8,8 +8,9 @@
 	import { HttpTriggerService, VariableService, type AuthenticationMethod } from '$lib/gen'
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, sendUserToast } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
-	import { Loader2, Pipette, Plus } from 'lucide-svelte'
+	import { Loader2, Save, Pipette, Plus } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
 	import VariableEditor from '../../VariableEditor.svelte'
 	import { json } from 'svelte-highlight/languages'
@@ -26,94 +27,42 @@
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import ItemPicker from '../../ItemPicker.svelte'
 	import { Popover } from '$lib/components/meltComponents'
-	import { HUB_SCRIPT_ID, saveHttpRouteFromCfg, SECRET_KEY_PATH } from './utils'
+	import { HUB_SCRIPT_ID, SECRET_KEY_PATH } from './utils'
 	import { HubFlow } from '$lib/hub'
 	import RouteBodyTransformerOption from './RouteBodyTransformerOption.svelte'
-	import TestingBadge from '../testingBadge.svelte'
-	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
-	import { handleConfigChange } from '../utils'
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
 
-	let {
-		useDrawer = true,
-		hideTarget = false,
-		description = undefined,
-		isEditor = false,
-		customLabel = undefined,
-		isDraftOnly = false,
-		allowDraft = false,
-		hasDraft = false,
-		isDeployed = false,
-		onConfigChange = undefined,
-		onCaptureConfigChange = undefined,
-		onUpdate = undefined,
-		onDelete = undefined,
-		onReset = undefined
-	} = $props()
+	let itemKind: 'flow' | 'script' = 'script'
 
-	// Form data state
-	let initialPath = $state('')
-	let edit = $state(true)
-	let itemKind = $state<'flow' | 'script'>('script')
-	let is_flow = $state(false)
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let fixedScriptPath = $state('')
-	let path = $state('')
-	let pathError = $state('')
-	let isValid = $state(false)
-	let dirtyRoutePath = $state(false)
-	let dirtyPath = $state(false)
-	let is_async = $state(false)
-	let authentication_method = $state<AuthenticationMethod>('none')
-	let route_path = $state('')
-	let http_method = $state<'get' | 'post' | 'put' | 'patch' | 'delete'>('post')
-	let static_asset_config = $state<{ s3: string; storage?: string; filename?: string } | undefined>(
+	$: is_flow = itemKind === 'flow'
+
+	let script_path = ''
+	let initialScriptPath = ''
+	let fixedScriptPath = ''
+	let path: string = ''
+	let pathError = ''
+	let isValid = false
+	let dirtyRoutePath = false
+	let is_async = false
+	let authentication_method: AuthenticationMethod = 'none'
+	let route_path = ''
+	let http_method: 'get' | 'post' | 'put' | 'patch' | 'delete' = 'post'
+	let static_asset_config: { s3: string; storage?: string; filename?: string } | undefined =
 		undefined
-	)
-	let is_static_website = $state(false)
-	let s3FileUploadRawMode = $state(false)
-	let workspaced_route = $state(false)
-	let raw_string = $state(false)
-	let wrap_body = $state(false)
-	let drawerLoading = $state(true)
-	let showLoader = $state(false)
-	let authentication_resource_path = $state('')
-	let variable_path = $state('')
-	let signature_options_type = $state<'custom_script' | 'custom_signature'>('custom_signature')
-	let can_write = $state(true)
-	let extraPerms = $state<Record<string, string> | undefined>(undefined)
-
-	// Component references
-	let s3FilePicker = $state<S3FilePicker | null>(null)
-	let s3Editor = $state<SimpleEditor | null>(null)
-	let variablePicker = $state<ItemPicker | null>(null)
-	let variableEditor = $state<VariableEditor | null>(null)
-	let drawer = $state<Drawer | null>(null)
-	let initialConfig: Record<string, any> | undefined = undefined
-	let deploymentLoading = $state(false)
-
-	const isAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin)
-	const routeConfig = $derived.by(getRouteConfig)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
-	const saveDisabled = $derived(
-		drawerLoading ||
-			!can_write ||
-			pathError != '' ||
-			!isValid ||
-			(!static_asset_config && emptyString(script_path))
-	)
-
-	$effect(() => {
-		is_flow = itemKind === 'flow'
-	})
-
-	// Update is_static_website based on static_asset_config
-	$effect(() => {
-		if (!static_asset_config) {
-			is_static_website = false
-		}
-	})
-
+	let is_static_website: boolean = false
+	let s3FilePicker: S3FilePicker
+	let s3FileUploadRawMode = false
+	let s3Editor: SimpleEditor | undefined = undefined
+	let workspaced_route: boolean = false
+	let raw_string = false
+	let wrap_body = false
+	let drawerLoading = true
+	let authentication_resource_path: string = ''
+	let variablePicker: ItemPicker
+	let variableEditor: VariableEditor
+	let variable_path: string = ''
 	type AuthenticationOption = {
 		label: string
 		value: AuthenticationMethod
@@ -125,6 +74,8 @@
 		return await VariableService.listVariable({ workspace: $workspaceStore ?? '' })
 	}
 
+	let signature_options_type: 'custom_script' | 'custom_signature' = 'custom_signature'
+
 	const authentication_options: AuthenticationOption[] = [
 		{
 			label: 'No Auth',
@@ -157,34 +108,20 @@
 		}
 	]
 
-	export async function openEdit(
-		ePath: string,
-		isFlow: boolean,
-		defaultConfig?: Record<string, any>
-	) {
+	export async function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
-		let loader = setTimeout(() => {
-			showLoader = true
-		}, 100) // if loading takes less than 100ms, we don't show the loader
 		try {
 			drawer?.openDrawer()
 			initialPath = ePath
-			path = ePath
 			itemKind = isFlow ? 'flow' : 'script'
 			edit = true
 			dirtyPath = false
 			dirtyRoutePath = false
-			await loadTrigger(defaultConfig)
+			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load route: ${err}`, true)
 		} finally {
-			if (!defaultConfig) {
-				// If the route is loaded from the backend, we to set the initial config
-				initialConfig = structuredClone($state.snapshot(getRouteConfig()))
-			}
-			clearTimeout(loader)
 			drawerLoading = false
-			showLoader = false
 		}
 	}
 
@@ -194,9 +131,6 @@
 		defaultValues?: Record<string, any>
 	) {
 		drawerLoading = true
-		let loader = setTimeout(() => {
-			showLoader = true
-		}, 100) // if loading takes less than 100ms, we don't show the loader
 		try {
 			drawer?.openDrawer()
 			is_flow = nis_flow
@@ -212,7 +146,7 @@
 			script_path = fixedScriptPath
 			static_asset_config = undefined
 			s3FileUploadRawMode = false
-			path = defaultValues?.path ?? ''
+			path = ''
 			initialPath = ''
 			dirtyPath = false
 			is_static_website = false
@@ -223,73 +157,47 @@
 			raw_string = defaultValues?.raw_string ?? false
 			wrap_body = defaultValues?.wrap_body ?? false
 		} finally {
-			clearTimeout(loader)
 			drawerLoading = false
-			showLoader = false
 		}
 	}
 
-	function loadTriggerConfig(cfg?: Record<string, any>): void {
-		script_path = cfg?.script_path
-		initialScriptPath = cfg?.script_path
-		is_flow = cfg?.is_flow
-		path = cfg?.path
-		route_path = cfg?.route_path
-		http_method = cfg?.http_method ?? 'post'
-		is_async = cfg?.is_async
-		workspaced_route = cfg?.workspaced_route
-		wrap_body = cfg?.wrap_body
-		raw_string = cfg?.raw_string
-		authentication_resource_path = cfg?.authentication_resource_path ?? ''
-		if (cfg?.authentication_method === 'custom_script') {
+	const dispatch = createEventDispatcher()
+
+	let can_write = true
+	async function loadTrigger(): Promise<void> {
+		const s = await HttpTriggerService.getHttpTrigger({
+			workspace: $workspaceStore!,
+			path: initialPath
+		})
+
+		script_path = s.script_path
+		initialScriptPath = s.script_path
+		is_flow = s.is_flow
+		path = s.path
+		route_path = s.route_path
+		http_method = s.http_method ?? 'post'
+		is_async = s.is_async
+		workspaced_route = s.workspaced_route
+		wrap_body = s.wrap_body
+		raw_string = s.raw_string
+		authentication_resource_path = s.authentication_resource_path ?? ''
+		if (s.authentication_method === 'custom_script') {
 			authentication_method = 'signature'
 			signature_options_type = 'custom_script'
 		} else {
-			authentication_method = cfg?.authentication_method
+			authentication_method = s.authentication_method
 			signature_options_type = 'custom_signature'
 		}
 		if (!isCloudHosted()) {
-			static_asset_config = cfg?.static_asset_config
-			s3FileUploadRawMode = !!cfg?.static_asset_config
-			is_static_website = cfg?.is_static_website
+			static_asset_config = s.static_asset_config
+			s3FileUploadRawMode = !!static_asset_config
+			is_static_website = s.is_static_website
 		}
-		extraPerms = cfg?.extra_perms
-		can_write = canWrite(path, cfg?.extra_perms, $userStore)
-	}
 
-	async function loadTrigger(defaultConfig?: Record<string, any>): Promise<void> {
-		if (defaultConfig) {
-			loadTriggerConfig(defaultConfig)
-			return
-		} else {
-			const s = await HttpTriggerService.getHttpTrigger({
-				workspace: $workspaceStore!,
-				path: initialPath
-			})
-
-			loadTriggerConfig(s)
-		}
+		can_write = canWrite(s.path, s.extra_perms, $userStore)
 	}
 
 	async function triggerScript(): Promise<void> {
-		deploymentLoading = true
-		const saveCfg = routeConfig
-		const isSaved = await saveHttpRouteFromCfg(
-			initialPath,
-			saveCfg,
-			edit,
-			$workspaceStore!,
-			!!$userStore?.is_admin || !!$userStore?.is_super_admin,
-			usedTriggerKinds
-		)
-		if (isSaved) {
-			onUpdate(saveCfg.path)
-			drawer?.closeDrawer()
-		}
-		deploymentLoading = false
-	}
-
-	function getRouteConfig(): Record<string, any> {
 		// If the user selects "signature" with the "custom_script" option,
 		// we explicitly set the authentication method to "custom_script"
 		// (which is a valid enum on its own in the backend)
@@ -297,47 +205,60 @@
 			authentication_method === 'signature' && signature_options_type === 'custom_script'
 				? 'custom_script'
 				: authentication_method
-		const nCfg = {
-			script_path,
-			is_flow,
-			path,
-			route_path,
-			http_method,
-			is_async,
-			workspaced_route,
-			wrap_body,
-			raw_string,
-			authentication_resource_path,
-			authentication_method: auth_method,
-			static_asset_config,
-			is_static_website,
-			extra_perms: extraPerms
+
+		if (edit) {
+			await HttpTriggerService.updateHttpTrigger({
+				workspace: $workspaceStore!,
+				path: initialPath,
+				requestBody: {
+					path,
+					script_path,
+					is_flow,
+					is_async,
+					authentication_method: auth_method,
+					route_path: $userStore?.is_admin || $userStore?.is_super_admin ? route_path : undefined,
+					http_method,
+					static_asset_config,
+					is_static_website,
+					workspaced_route,
+					authentication_resource_path,
+					wrap_body,
+					raw_string
+				}
+			})
+			sendUserToast(`Route ${path} updated`)
+		} else {
+			await HttpTriggerService.createHttpTrigger({
+				workspace: $workspaceStore!,
+				requestBody: {
+					path,
+					script_path,
+					is_flow,
+					is_async,
+					authentication_method: auth_method,
+					route_path,
+					http_method,
+					static_asset_config,
+					is_static_website,
+					workspaced_route,
+					authentication_resource_path,
+					wrap_body,
+					raw_string
+				}
+			})
+			sendUserToast(`Route ${path} created`)
 		}
-		return nCfg
+		if (!$usedTriggerKinds.includes('http')) {
+			$usedTriggerKinds = [...$usedTriggerKinds, 'http']
+		}
+		dispatch('update')
+		drawer.closeDrawer()
 	}
+	let drawer: Drawer
 
-	// Update config for captures
-	function getCaptureConfig() {
-		const newCaptureConfig = {
-			route_path: routeConfig.route_path,
-			http_method: routeConfig.http_method,
-			raw_string: routeConfig.raw_string,
-			wrap_body: routeConfig.wrap_body,
-			path: routeConfig.path
-		}
-		//
-		return newCaptureConfig
-	}
+	let dirtyPath = false
 
-	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
-	})
-
-	$effect(() => {
-		if (!drawerLoading) {
-			handleConfigChange(routeConfig, initialConfig, saveDisabled, edit, onConfigChange)
-		}
-	})
+	$: !static_asset_config && (is_static_website = false)
 </script>
 
 {#if static_asset_config}
@@ -353,30 +274,46 @@
 	/>
 {/if}
 
-{#snippet config()}
-	{#if drawerLoading}
-		{#if showLoader}
+<Drawer size="700px" bind:this={drawer}>
+	<DrawerContent
+		title={edit ? (can_write ? `Edit route ${initialPath}` : `Route ${initialPath}`) : 'New route'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading && can_write}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' ||
+						!isValid ||
+						(!static_asset_config && emptyString(script_path)) ||
+						(static_asset_config && emptyString(static_asset_config.s3)) ||
+						!can_write}
+					on:click={triggerScript}
+				>
+					Save
+				</Button>
+			{/if}
+		</svelte:fragment>
+		{#if drawerLoading}
 			<Loader2 class="animate-spin" />
-		{/if}
-	{:else}
-		<div class="flex flex-col gap-12">
-			<Section label="Metadata">
-				<Label label="Path">
-					<Path
-						bind:dirty={dirtyPath}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						checkInitialPathExistence={!edit}
-						namePlaceholder="route"
-						kind="http_trigger"
-						hideUser
-						disableEditing={!can_write}
-					/>
-				</Label>
-			</Section>
+		{:else}
+			<div class="flex flex-col gap-12">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="route"
+							kind="http_trigger"
+							hideUser
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
 
-			{#if !hideTarget}
 				<Section label="Target">
 					{#if !isCloudHosted()}
 						<ToggleButtonGroup
@@ -404,11 +341,10 @@
 								}
 							}}
 							let:item
-							let:disabled
 						>
-							<ToggleButton label="Runnable" value="runnable" {item} {disabled} />
-							<ToggleButton label="Static asset" value="static_asset" {item} {disabled} />
-							<ToggleButton label="Static website" value="static_website" {item} {disabled} />
+							<ToggleButton label="Runnable" value="runnable" {item} />
+							<ToggleButton label="Static asset" value="static_asset" {item} />
+							<ToggleButton label="Static website" value="static_website" {item} />
 						</ToggleButtonGroup>
 					{/if}
 
@@ -435,7 +371,13 @@
 								{#if s3FileUploadRawMode}
 									{#if can_write}
 										<JsonEditor
-											bind:editor={s3Editor as any}
+											bind:editor={s3Editor}
+											on:focus={(e) => {
+												dispatch('focus')
+											}}
+											on:blur={(e) => {
+												dispatch('blur')
+											}}
 											code={JSON.stringify(static_asset_config ?? { s3: '' }, null, 2)}
 											bind:value={static_asset_config}
 										/>
@@ -514,257 +456,183 @@
 						</div>
 					{/if}
 				</Section>
-			{/if}
 
-			<RouteEditorConfigSection
-				initialTriggerPath={initialPath}
-				bind:route_path
-				bind:isValid
-				bind:dirtyRoutePath
-				bind:http_method
-				bind:workspaced_route
-				{can_write}
-				bind:static_asset_config
-				showTestingBadge={isEditor}
-				{isDraftOnly}
-			/>
+				<RouteEditorConfigSection
+					initialTriggerPath={initialPath}
+					bind:route_path
+					bind:isValid
+					bind:dirtyRoutePath
+					bind:http_method
+					bind:workspaced_route
+					{can_write}
+					capture_mode={false}
+					bind:static_asset_config
+				/>
 
-			{#if !is_static_website}
-				<Section label="Advanced" collapsable>
-					<div class="flex flex-col gap-4">
-						{#if !static_asset_config}
-							<div class="flex flex-row justify-between">
-								<Label label="Request type" class="w-full">
-									<svelte:fragment slot="action">
-										<ToggleButtonGroup
-											class="w-auto h-full"
-											selected={is_async ? 'async' : 'sync'}
-											on:selected={({ detail }) => {
-												is_async = detail === 'async'
-											}}
-											disabled={!can_write || !!static_asset_config}
-											let:item
-											let:disabled
-										>
-											<ToggleButton
-												label="Async"
-												value="async"
-												tooltip="The returning value is the uuid of the job assigned to execute the job."
-												{item}
-												{disabled}
-											/>
-											<ToggleButton
-												label="Sync"
-												value="sync"
-												tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-												{item}
-												{disabled}
-											/>
-										</ToggleButtonGroup>
-									</svelte:fragment>
-								</Label>
-							</div>
-						{/if}
-						<Label label="Authentication" class="w-full">
-							<svelte:fragment slot="action">
-								<ToggleButtonGroup
-									class="w-auto h-full"
-									bind:selected={authentication_method}
-									on:selected={(e) => {
-										if (e.detail === 'signature' && signature_options_type === 'custom_script') {
-											raw_string = true
-										}
-									}}
-									disabled={!can_write}
-									let:item
-									let:disabled
-								>
-									{#each authentication_options as option}
-										{#if option.value === 'signature'}
-											<Popover placement="top-end" usePointerDownOutside>
-												<svelte:fragment slot="trigger">
-													<ToggleButton
-														label={option.label}
-														value={option.value}
-														tooltip={option.tooltip}
-														{item}
-														{disabled}
-													/>
-												</svelte:fragment>
-												<svelte:fragment slot="content">
-													<ToggleButtonGroup
-														class="w-auto h-full"
-														bind:selected={signature_options_type}
-														on:selected={(e) => {
-															if (e.detail === 'custom_script') {
-																if (!raw_string) {
-																	raw_string = true
-																}
-															}
-														}}
-														disabled={!can_write}
-														let:item
-														let:disabled
-													>
-														<ToggleButton
-															label="Signature validation"
-															value="custom_signature"
-															tooltip="Use a predefined or custom signature-based authentication scheme"
-															{item}
-															{disabled}
-														/>
-														<ToggleButton
-															label="Custom script"
-															value="custom_script"
-															tooltip="Use your own script logic"
-															{item}
-															{disabled}
-														/>
-													</ToggleButtonGroup>
-												</svelte:fragment>
-											</Popover>
-										{:else}
-											<ToggleButton
-												label={option.label}
-												value={option.value}
-												tooltip={option.tooltip}
-												{item}
-												{disabled}
-											/>
-										{/if}
-									{/each}
-								</ToggleButtonGroup>
-							</svelte:fragment>
-						</Label>
-
-						{#each authentication_options as option}
-							{#if option.resource_type && authentication_method === option.value}
-								<ResourcePicker
-									bind:value={authentication_resource_path}
-									resourceType={option.resource_type}
-									disabled={!can_write}
-								/>
-							{/if}
-						{/each}
-
-						{#if authentication_method === 'signature'}
-							{#if signature_options_type === 'custom_signature'}
-								<ResourcePicker
-									bind:value={authentication_resource_path}
-									resourceType={'signature_auth'}
-									disabled={!can_write}
-								/>
-							{:else if signature_options_type === 'custom_script'}
-								<p class="text-xs mt-3 mb-1 text-tertiary">
-									Pick a secret variable or create one which will be used as a secret key for your
-									custom script/flow<Required required={true} /><br />
-								</p>
-								<div class="flex flex-row gap-2">
-									<div class="flex flex-row gap-2 w-full">
-										<input
-											type="text"
-											autocomplete="off"
-											bind:value={variable_path}
-											readonly
-											disabled={true}
-										/>
-										<Button
-											title="Add variable"
-											on:click={() => variablePicker?.openDrawer()}
-											size="xs"
-											color="dark"
-											disabled={!can_write}
-										>
-											Pick variable
-										</Button>
-									</div>
-									<Button
-										disabled={emptyString(variable_path) || !can_write}
-										color="dark"
-										size="xs"
-										href={itemKind === 'flow'
-											? `/flows/add?${SECRET_KEY_PATH}=${encodeURIComponent(variable_path)}&hub=${
-													HubFlow.SIGNATURE_TEMPLATE
-												}`
-											: `/scripts/add?${SECRET_KEY_PATH}=${encodeURIComponent(
-													variable_path
-												)}&hub=hub%2F${HUB_SCRIPT_ID}`}
-										target="_blank">Create from template</Button
-									>
+				{#if !is_static_website}
+					<Section label="Advanced">
+						<div class="flex flex-col gap-4">
+							{#if !static_asset_config}
+								<div class="flex flex-row justify-between">
+									<Label label="Request type" class="w-full">
+										<svelte:fragment slot="action">
+											<ToggleButtonGroup
+												class="w-auto h-full"
+												selected={is_async ? 'async' : 'sync'}
+												on:selected={({ detail }) => {
+													is_async = detail === 'async'
+												}}
+												disabled={!can_write || !!static_asset_config}
+												let:item
+											>
+												<ToggleButton
+													label="Async"
+													value="async"
+													tooltip="The returning value is the uuid of the job assigned to execute the job."
+													{item}
+												/>
+												<ToggleButton
+													label="Sync"
+													value="sync"
+													tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+													{item}
+												/>
+											</ToggleButtonGroup>
+										</svelte:fragment>
+									</Label>
 								</div>
 							{/if}
-						{/if}
+							<Label label="Authentication" class="w-full">
+								<svelte:fragment slot="action">
+									<ToggleButtonGroup
+										class="w-auto h-full"
+										bind:selected={authentication_method}
+										on:selected={(e) => {
+											if (e.detail === 'signature' && signature_options_type === 'custom_script') {
+												raw_string = true
+											}
+										}}
+										disabled={!can_write}
+										let:item
+									>
+										{#each authentication_options as option}
+											{#if option.value === 'signature'}
+												<Popover placement="top-end" usePointerDownOutside>
+													<svelte:fragment slot="trigger">
+														<ToggleButton
+															label={option.label}
+															value={option.value}
+															tooltip={option.tooltip}
+															{item}
+														/>
+													</svelte:fragment>
+													<svelte:fragment slot="content">
+														<ToggleButtonGroup
+															class="w-auto h-full"
+															bind:selected={signature_options_type}
+															on:selected={(e) => {
+																if (e.detail === 'custom_script') {
+																	if (!raw_string) {
+																		raw_string = true
+																	}
+																}
+															}}
+															disabled={!can_write}
+															let:item
+														>
+															<ToggleButton
+																label="Signature validation"
+																value="custom_signature"
+																tooltip="Use a predefined or custom signature-based authentication scheme"
+																{item}
+															/>
+															<ToggleButton
+																label="Custom script"
+																value="custom_script"
+																tooltip="Use your own script logic"
+																{item}
+															/>
+														</ToggleButtonGroup>
+													</svelte:fragment>
+												</Popover>
+											{:else}
+												<ToggleButton
+													label={option.label}
+													value={option.value}
+													tooltip={option.tooltip}
+													{item}
+												/>
+											{/if}
+										{/each}
+									</ToggleButtonGroup>
+								</svelte:fragment>
+							</Label>
 
-						<RouteBodyTransformerOption
-							bind:raw_string
-							bind:wrap_body
-							disabled={!can_write}
-							{testingBadge}
-						/>
-					</div>
-				</Section>
-			{/if}
-		</div>
-	{/if}
-{/snippet}
+							{#each authentication_options as option}
+								{#if option.resource_type && authentication_method === option.value}
+									<ResourcePicker
+										bind:value={authentication_resource_path}
+										resourceType={option.resource_type}
+									/>
+								{/if}
+							{/each}
 
-{#snippet testingBadge()}
-	{#if isEditor}
-		<TestingBadge />
-	{/if}
-{/snippet}
+							{#if authentication_method === 'signature'}
+								{#if signature_options_type === 'custom_signature'}
+									<ResourcePicker
+										bind:value={authentication_resource_path}
+										resourceType={'signature_auth'}
+									/>
+								{:else if signature_options_type === 'custom_script'}
+									<p class="text-xs mt-3 mb-1 text-tertiary">
+										Pick a secret variable or create one which will be used as a secret key for your
+										custom script/flow<Required required={true} /><br />
+									</p>
+									<div class="flex flex-row gap-2">
+										<div class="flex flex-row gap-2 w-full">
+											<input
+												type="text"
+												autocomplete="off"
+												bind:value={variable_path}
+												readonly
+												disabled={true}
+											/>
+											<Button
+												title="Add variable"
+												on:click={variablePicker.openDrawer}
+												size="xs"
+												color="dark"
+											>
+												Pick variable
+											</Button>
+										</div>
+										<Button
+											disabled={emptyString(variable_path)}
+											color="dark"
+											size="xs"
+											href={itemKind === 'flow'
+												? `/flows/add?${SECRET_KEY_PATH}=${encodeURIComponent(variable_path)}&hub=${
+														HubFlow.SIGNATURE_TEMPLATE
+													}`
+												: `/scripts/add?${SECRET_KEY_PATH}=${encodeURIComponent(
+														variable_path
+													)}&hub=hub%2F${HUB_SCRIPT_ID}`}
+											target="_blank">Create from template</Button
+										>
+									</div>
+								{/if}
+							{/if}
 
-{#snippet saveButton()}
-	{#if !drawerLoading}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={drawerLoading || !can_write ? 'none' : can_write && isAdmin ? 'create' : 'write'}
-			{saveDisabled}
-			enabled={undefined}
-			{allowDraft}
-			{edit}
-			isLoading={deploymentLoading}
-			onUpdate={triggerScript}
-			{onReset}
-			{onDelete}
-			{isDeployed}
-		/>
-	{/if}
-{/snippet}
-
-{#if useDrawer}
-	<Drawer size="700px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit route ${initialPath}`
-					: `Route ${initialPath}`
-				: 'New route'}
-			on:close={() => drawer?.closeDrawer()}
-		>
-			<svelte:fragment slot="actions">
-				{@render saveButton()}
-			</svelte:fragment>
-			{@render config()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'HTTP Route' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
-			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
-			{@render saveButton()}
-		</svelte:fragment>
-		{#if description}
-			{@render description()}
+							{#if !static_asset_config}
+								<RouteBodyTransformerOption bind:raw_string bind:wrap_body />
+							{/if}
+						</div>
+					</Section>
+				{/if}
+			</div>
 		{/if}
-		{@render config()}
-	</Section>
-{/if}
+	</DrawerContent>
+</Drawer>
 
 <ItemPicker
 	bind:this={variablePicker}
@@ -776,7 +644,7 @@
 	itemName="Variable"
 	extraField="path"
 	loadItems={loadVariables}
-	buttons={{ 'Edit/View': (x) => variableEditor?.editVariable(x) }}
+	buttons={{ 'Edit/View': (x) => variableEditor.editVariable(x) }}
 >
 	<div slot="submission" class="flex flex-row">
 		<Button
@@ -785,7 +653,7 @@
 			size="sm"
 			startIcon={{ icon: Plus }}
 			on:click={() => {
-				variableEditor?.initNew()
+				variableEditor.initNew()
 			}}
 		>
 			New variable
@@ -793,4 +661,4 @@
 	</div>
 </ItemPicker>
 
-<VariableEditor bind:this={variableEditor} on:create={(e) => variablePicker?.openDrawer()} />
+<VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
diff --git a/frontend/src/lib/components/triggers/http/RoutesPanel.svelte b/frontend/src/lib/components/triggers/http/RoutesPanel.svelte
index 3e34e3a56d..4c215022d4 100644
--- a/frontend/src/lib/components/triggers/http/RoutesPanel.svelte
+++ b/frontend/src/lib/components/triggers/http/RoutesPanel.svelte
@@ -1,57 +1,123 @@
 <script lang="ts">
-	import RouteEditorInner from './RouteEditorInner.svelte'
-	import Description from '$lib/components/Description.svelte'
-	import { userStore } from '$lib/stores'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { HttpTriggerService, type HttpTrigger } from '$lib/gen'
+	import RouteEditor from './RouteEditor.svelte'
+	import { canWrite } from '$lib/utils'
+	import { getContext, onMount } from 'svelte'
+	import Section from '$lib/components/Section.svelte'
 	import { Alert } from '$lib/components/common'
-	import { onMount } from 'svelte'
+	import Description from '$lib/components/Description.svelte'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
 
-	let routeEditor = $state<RouteEditorInner | null>(null)
-	let {
-		selectedTrigger,
-		isFlow,
-		path,
-		defaultValues = undefined,
-		isEditor = false,
-		customLabel = undefined,
-		...restProps
-	} = $props()
+	export let isFlow: boolean
+	export let path: string
+	export let newItem: boolean = false
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
+	export let args: Record<string, any> = {}
 
-	async function openRouteEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			routeEditor?.openNew(isFlow, path, defaultValues)
-		} else {
-			routeEditor?.openEdit(selectedTrigger.path, isFlow, defaultValues)
-		}
-	}
+	let routeEditor: RouteEditor
+	let openForm = true
+	let dontCloseOnLoad = false
+
+	$: path && loadTriggers()
+	const { triggersCount, selectedTrigger, defaultValues } =
+		getContext<TriggerContext>('TriggerContext')
 
 	onMount(() => {
-		if (routeEditor) {
-			openRouteEditor(isFlow, selectedTrigger.isDraft ?? false)
+		if (
+			defaultValues &&
+			$selectedTrigger === 'routes' &&
+			Object.keys($defaultValues ?? {}).length > 0
+		) {
+			routeEditor.openNew(isFlow, path, $defaultValues)
+			defaultValues.set(undefined)
 		}
 	})
+
+	let httpTriggers: (HttpTrigger & { canWrite: boolean })[] | undefined = undefined
+	export async function loadTriggers() {
+		try {
+			httpTriggers = (
+				await HttpTriggerService.listHttpTriggers({
+					workspace: $workspaceStore ?? '',
+					path,
+					isFlow
+				})
+			).map((x) => {
+				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
+			})
+			$triggersCount = { ...($triggersCount ?? {}), http_routes_count: httpTriggers?.length }
+			openForm = httpTriggers?.length === 0 || dontCloseOnLoad
+		} catch (e) {
+			console.error('impossible to load http routes', e)
+		}
+	}
 </script>
 
-<RouteEditorInner
-	useDrawer={false}
+<RouteEditor
+	on:update={() => {
+		loadTriggers()
+	}}
 	bind:this={routeEditor}
-	hideTarget
-	{isEditor}
-	{customLabel}
-	isDraftOnly={selectedTrigger.isDraft}
-	allowDraft
-	hasDraft={!!selectedTrigger.draftConfig}
-	{...restProps}
->
-	{#snippet description()}
-		<div class="flex flex-col gap-2 pb-4">
-			<Description link="https://www.windmill.dev/docs/core_concepts/http_routing"
-				>Routes expose your scripts and flows as HTTP endpoints. Each route can be configured with a
-				specific HTTP method and path.</Description
-			>
+/>
 
-			{#if !$userStore?.is_admin && !$userStore?.is_super_admin && selectedTrigger.isDraft}
-				<Alert title="Only workspace admins can create routes" type="info" size="xs" />
+<div class="flex flex-col gap-4">
+	<Description link="https://www.windmill.dev/docs/core_concepts/http_routing">
+		Routes expose your scripts and flows as HTTP endpoints. Each route can be configured with a
+		specific HTTP method and path.
+	</Description>
+	{#if !newItem && httpTriggers && httpTriggers.length > 0}
+		<Section label="Routes">
+			{#if !$userStore?.is_admin && !$userStore?.is_super_admin}
+				<Alert title="Only workspace admins can create routes" type="warning" size="xs" />
 			{/if}
-		</div>
-	{/snippet}
-</RouteEditorInner>
+
+			<div class="flex flex-col divide-y pt-2">
+				{#each httpTriggers as httpTriggers (httpTriggers.path)}
+					<div class="grid grid-cols-5 text-2xs items-center py-2">
+						<div class="col-span-2 truncate">{httpTriggers.path}</div>
+						<div class="col-span-2 truncate">
+							{httpTriggers.http_method.toUpperCase()} /{httpTriggers.route_path}
+						</div>
+						<div class="flex justify-end">
+							<button
+								on:click={() => routeEditor?.openEdit(httpTriggers.path, isFlow)}
+								class="px-2"
+							>
+								{#if httpTriggers.canWrite}
+									Edit
+								{:else}
+									View
+								{/if}
+							</button>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</Section>
+	{/if}
+
+	<TriggersEditorSection
+		on:saveTrigger={(e) => {
+			routeEditor?.openNew(isFlow, path, e.detail.config)
+		}}
+		on:applyArgs
+		on:addPreprocessor
+		on:updateSchema
+		on:testWithArgs
+		bind:showCapture={dontCloseOnLoad}
+		cloudDisabled={false}
+		triggerType="http"
+		{isFlow}
+		{path}
+		{isEditor}
+		{canHavePreprocessor}
+		{hasPreprocessor}
+		{newItem}
+		data={{ args }}
+		bind:openForm
+	/>
+</div>
diff --git a/frontend/src/lib/components/triggers/http/utils.ts b/frontend/src/lib/components/triggers/http/utils.ts
index 04734b2c81..4deb21fc4c 100644
--- a/frontend/src/lib/components/triggers/http/utils.ts
+++ b/frontend/src/lib/components/triggers/http/utils.ts
@@ -1,9 +1,5 @@
 import { base } from '$lib/base'
 import { isCloudHosted } from '$lib/cloud'
-import { HttpTriggerService } from '$lib/gen/services.gen'
-import { sendUserToast } from '$lib/toast'
-import type { Writable } from 'svelte/store'
-import { get } from 'svelte/store'
 
 export const SECRET_KEY_PATH = 'secret_key_path'
 export const HUB_SCRIPT_ID = 19670
@@ -29,50 +25,3 @@ export function replacePlaceholderForSignatureScriptTemplate(content: string) {
 		`$1${secret_key_path}$2`
 	)
 }
-
-export async function saveHttpRouteFromCfg(
-	initialPath: string,
-	routeCfg: Record<string, any>,
-	edit: boolean,
-	workspace: string,
-	isAdmin: boolean,
-	usedTriggerKinds: Writable<string[]>
-): Promise<boolean> {
-	const requestBody = {
-		path: routeCfg.path,
-		script_path: routeCfg.script_path,
-		is_flow: routeCfg.is_flow,
-		is_async: routeCfg.is_async,
-		authentication_method: routeCfg.authentication_method,
-		route_path: isAdmin || !edit ? routeCfg.route_path : undefined,
-		http_method: routeCfg.http_method,
-		is_static_website: routeCfg.is_static_website,
-		workspaced_route: routeCfg.workspaced_route,
-		authentication_resource_path: routeCfg.authentication_resource_path,
-		wrap_body: routeCfg.wrap_body,
-		raw_string: routeCfg.raw_string
-	}
-	try {
-		if (edit) {
-			await HttpTriggerService.updateHttpTrigger({
-				workspace: workspace,
-				path: initialPath,
-				requestBody: requestBody
-			})
-			sendUserToast(`Route ${routeCfg.path} updated`)
-		} else {
-			await HttpTriggerService.createHttpTrigger({
-				workspace: workspace,
-				requestBody: requestBody
-			})
-			sendUserToast(`Route ${routeCfg.path} created`)
-		}
-		if (!get(usedTriggerKinds).includes('http')) {
-			usedTriggerKinds.update((t) => [...t, 'http'])
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
-}
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaCapture.svelte b/frontend/src/lib/components/triggers/kafka/KafkaCapture.svelte
deleted file mode 100644
index ce02db0b94..0000000000
--- a/frontend/src/lib/components/triggers/kafka/KafkaCapture.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition'
-	import type { CaptureInfo } from '../CaptureSection.svelte'
-	import CaptureSection from '../CaptureSection.svelte'
-
-	interface Props {
-		captureInfo?: CaptureInfo | undefined
-		isValid?: boolean | undefined
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		captureLoading?: boolean
-		triggerDeployed?: boolean
-	}
-
-	let {
-		captureInfo = undefined,
-		isValid = undefined,
-		hasPreprocessor = false,
-		isFlow = false,
-		captureLoading = false,
-		triggerDeployed = false
-	}: Props = $props()
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="kafka"
-		disabled={isValid === false}
-		{captureInfo}
-		{captureLoading}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-		displayAlert={triggerDeployed}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listening to Kafka events...
-					</p>
-				{:else}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to kafka...
-					</p>
-				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to Kafka events.
-				</p>
-			{/if}
-		{/snippet}
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditor.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditor.svelte
index dac8ec1dc7..4044225223 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditor.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditor.svelte
@@ -2,9 +2,7 @@
 	import { tick } from 'svelte'
 	import KafkaTriggerEditorInner from './KafkaTriggerEditorInner.svelte'
 
-	let { onUpdate }: { onUpdate?: (path?: string) => void } = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
@@ -21,9 +19,9 @@
 		drawer?.openNew(is_flow, initial_script_path, defaultValues)
 	}
 
-	let drawer: KafkaTriggerEditorInner | undefined = $state()
+	let drawer: KafkaTriggerEditorInner
 </script>
 
 {#if open}
-	<KafkaTriggerEditorInner {onUpdate} bind:this={drawer} />
+	<KafkaTriggerEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
index 7349e07d6c..792fd7f744 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
@@ -8,107 +8,35 @@
 	import { KafkaTriggerService } from '$lib/gen'
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, sendUserToast } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
-	import { Loader2 } from 'lucide-svelte'
+	import { Loader2, Save } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 	import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte'
-	import type { Snippet } from 'svelte'
-	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
-	import { saveKafkaTriggerFromCfg } from './utils'
-	import { handleConfigChange } from '../utils'
 
-	interface Props {
-		useDrawer?: boolean
-		description?: Snippet | undefined
-		hideTarget?: boolean
-		hideTooltips?: boolean
-		isEditor?: boolean
-		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
-		customLabel?: Snippet
-		isDeployed?: boolean
-		cloudDisabled?: boolean
-		onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
-		onCaptureConfigChange?: (cfg: Record<string, any>, isValid: boolean) => void
-		onUpdate?: (path?: string) => void
-		onDelete?: () => void
-		onReset?: () => void
-	}
+	let drawer: Drawer
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
+	let itemKind: 'flow' | 'script' = 'script'
+	let script_path = ''
+	let initialScriptPath = ''
+	let fixedScriptPath = ''
+	let path: string = ''
+	let pathError = ''
+	let enabled = false
+	let dirtyPath = false
+	let can_write = true
+	let drawerLoading = true
+	let defaultValues: Record<string, any> | undefined = undefined
+	let args: Record<string, any> = {}
 
-	let {
-		useDrawer = true,
-		description = undefined,
-		hideTarget = false,
-		hideTooltips = false,
-		isEditor = false,
-		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
-		customLabel,
-		isDeployed = false,
-		cloudDisabled = false,
-		onConfigChange = undefined,
-		onCaptureConfigChange = undefined,
-		onUpdate = undefined,
-		onDelete = undefined,
-		onReset = undefined
-	}: Props = $props()
+	const dispatch = createEventDispatcher()
 
-	let drawer: Drawer | undefined = $state()
-	let is_flow: boolean = $state(false)
-	let initialPath = $state('')
-	let edit = $state(true)
-	let itemKind: 'flow' | 'script' = $state('script')
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let fixedScriptPath = $state('')
-	let path: string = $state('')
-	let pathError = $state('')
-	let enabled = $state(false)
-	let dirtyPath = $state(false)
-	let can_write = $state(true)
-	let drawerLoading = $state(true)
-	let showLoading = $state(false)
-	let initialConfig: Record<string, any> | undefined = undefined
-	let extra_perms = $state<Record<string, any> | undefined>(undefined)
-	let kafkaCfgValid = $state(false)
-	let kafkaResourcePath = $state('')
-	let kafkaCfg: Record<string, any> = $state({})
-	let deploymentLoading = $state(false)
+	$: is_flow = itemKind === 'flow'
 
-	const isValid = $derived(
-		!!kafkaResourcePath &&
-			kafkaCfgValid &&
-			kafkaCfg.topics &&
-			kafkaCfg.topics.length > 0 &&
-			kafkaCfg.topics.every((b) => /^[a-zA-Z0-9-_.]+$/.test(b))
-	)
-	const saveDisabled = $derived(
-		pathError !== '' ||
-			!isValid ||
-			drawerLoading ||
-			!can_write ||
-			emptyString(script_path) ||
-			emptyString(kafkaResourcePath) ||
-			kafkaCfg.topics.length === 0 ||
-			kafkaCfg.topics.some((t) => emptyString(t))
-	)
-	const kafkaConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
-
-	$effect(() => {
-		is_flow = itemKind === 'flow'
-	})
-
-	export async function openEdit(
-		ePath: string,
-		isFlow: boolean,
-		defaultConfig?: Record<string, any>
-	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
+	export async function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -116,16 +44,11 @@
 			itemKind = isFlow ? 'flow' : 'script'
 			edit = true
 			dirtyPath = false
-			await loadTrigger(defaultConfig)
+			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load Kafka trigger: ${err}`, true)
 		} finally {
-			if (!defaultConfig) {
-				initialConfig = structuredClone($state.snapshot(getSaveCfg()))
-			}
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
@@ -134,209 +57,164 @@
 		fixedScriptPath_?: string,
 		nDefaultValues?: Record<string, any>
 	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
 			is_flow = nis_flow
 			edit = false
 			itemKind = nis_flow ? 'flow' : 'script'
-			kafkaResourcePath = nDefaultValues?.kafka_resource_path ?? ''
-			kafkaCfg = {
-				group_id: nDefaultValues?.group_id ?? '',
-				topics: nDefaultValues?.topics ?? ['']
-			}
+			args.kafka_resource_path = nDefaultValues?.kafka_resource_path ?? ''
+			args.group_id = nDefaultValues?.group_id ?? ''
+			args.topics = nDefaultValues?.topics ?? ['']
 			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath
-			path = nDefaultValues?.path ?? ''
+			path = ''
 			initialPath = ''
 			dirtyPath = false
+			defaultValues = nDefaultValues
 		} finally {
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
-	function loadTriggerConfig(cfg?: Record<string, any>): void {
-		script_path = cfg?.script_path
-		initialScriptPath = cfg?.script_path
-		is_flow = cfg?.is_flow
-		path = cfg?.path
-		kafkaResourcePath = cfg?.kafka_resource_path
-		kafkaCfg = {
-			group_id: cfg?.group_id,
-			topics: cfg?.topics
-		}
-		enabled = cfg?.enabled
-		extra_perms = cfg?.extra_perms
-		can_write = canWrite(path, cfg?.extra_perms, $userStore)
-	}
+	async function loadTrigger(): Promise<void> {
+		const s = await KafkaTriggerService.getKafkaTrigger({
+			workspace: $workspaceStore!,
+			path: initialPath
+		})
+		script_path = s.script_path
+		initialScriptPath = s.script_path
 
-	async function loadTrigger(defaultConfig?: Record<string, any>): Promise<void> {
-		if (defaultConfig) {
-			loadTriggerConfig(defaultConfig)
-			return
-		} else {
-			const s = await KafkaTriggerService.getKafkaTrigger({
-				workspace: $workspaceStore!,
-				path: initialPath
-			})
-			loadTriggerConfig(s)
-		}
-	}
+		is_flow = s.is_flow
+		path = s.path
+		args.kafka_resource_path = s.kafka_resource_path
+		args.group_id = s.group_id
+		args.topics = s.topics
+		enabled = s.enabled
 
-	function getSaveCfg(): Record<string, any> {
-		return {
-			path,
-			script_path,
-			is_flow,
-			kafka_resource_path: kafkaResourcePath,
-			group_id: kafkaCfg.group_id,
-			topics: kafkaCfg.topics,
-			enabled,
-			extra_perms: extra_perms
-		}
+		can_write = canWrite(s.path, s.extra_perms, $userStore)
 	}
 
 	async function updateTrigger(): Promise<void> {
-		deploymentLoading = true
-		const cfg = getSaveCfg()
-		const isSaved = await saveKafkaTriggerFromCfg(
-			initialPath,
-			cfg,
-			edit,
-			$workspaceStore!,
-			usedTriggerKinds
+		if (edit) {
+			await KafkaTriggerService.updateKafkaTrigger({
+				workspace: $workspaceStore!,
+				path: initialPath,
+				requestBody: {
+					path,
+					script_path,
+					is_flow,
+					kafka_resource_path: args.kafka_resource_path,
+					group_id: args.group_id,
+					topics: args.topics
+				}
+			})
+			sendUserToast(`Kafka trigger ${path} updated`)
+		} else {
+			await KafkaTriggerService.createKafkaTrigger({
+				workspace: $workspaceStore!,
+				requestBody: {
+					path,
+					script_path,
+					is_flow,
+					enabled: true,
+					kafka_resource_path: args.kafka_resource_path,
+					group_id: args.group_id,
+					topics: args.topics
+				}
+			})
+			sendUserToast(`Kafka trigger ${path} created`)
+		}
+		if (!$usedTriggerKinds.includes('kafka')) {
+			$usedTriggerKinds = [...$usedTriggerKinds, 'kafka']
+		}
+		dispatch('update')
+		drawer.closeDrawer()
+	}
+
+	function useDefaultValues() {
+		if (args.kafka_resource_path && args.kafka_resource_path != '') {
+			return false
+		}
+		if (!defaultValues) {
+			return false
+		}
+		return (
+			defaultValues.brokers &&
+			defaultValues.brokers.length > 0 &&
+			defaultValues.brokers.some((broker: string) => broker.trim() !== '')
 		)
-		if (isSaved) {
-			onUpdate?.(cfg.path)
-			drawer?.closeDrawer()
-		}
-		deploymentLoading = false
 	}
 
-	function getCaptureConfig(): Record<string, any> {
-		return {
-			kafka_resource_path: kafkaResourcePath,
-			group_id: kafkaCfg.group_id,
-			topics: structuredClone($state.snapshot(kafkaCfg.topics)),
-			path
-		}
-	}
-
-	async function handleToggleEnabled(nEnabled: boolean) {
-		await KafkaTriggerService.setKafkaTriggerEnabled({
-			path: initialPath,
-			workspace: $workspaceStore ?? '',
-			requestBody: { enabled: nEnabled }
-		})
-		sendUserToast(`${nEnabled ? 'enabled' : 'disabled'} Kafka trigger ${initialPath}`)
-	}
-
-	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
-	})
-
-	$effect(() => {
-		if (!drawerLoading) {
-			handleConfigChange(kafkaConfig, initialConfig, saveDisabled, edit, onConfigChange)
-		}
-	})
+	let isValid = false
 </script>
 
-{#if useDrawer}
-	<Drawer size="800px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit Kafka trigger ${initialPath}`
-					: `Kafka trigger ${initialPath}`
-				: 'New Kafka trigger'}
-			on:close={drawer.closeDrawer}
-		>
-			<svelte:fragment slot="actions">
-				{@render actionsButtons('sm')}
-			</svelte:fragment>
-			{@render config()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'Kafka trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit Kafka trigger ${initialPath}`
+				: `Kafka trigger ${initialPath}`
+			: 'New Kafka trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								await KafkaTriggerService.setKafkaTriggerEnabled({
+									path: initialPath,
+									workspace: $workspaceStore ?? '',
+									requestBody: { enabled: e.detail }
+								})
+								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} Kafka trigger ${initialPath}`)
+							}}
+						/>
+					</div>
+				{/if}
+				{#if can_write}
+					<Button
+						startIcon={{ icon: Save }}
+						disabled={pathError != '' || emptyString(script_path) || !can_write || !isValid}
+						on:click={updateTrigger}
+					>
+						Save
+					</Button>
+				{/if}
 			{/if}
 		</svelte:fragment>
-		<svelte:fragment slot="action">
-			{@render actionsButtons('xs')}
-		</svelte:fragment>
-		{@render config()}
-	</Section>
-{/if}
-
-{#snippet actionsButtons(size: 'xs' | 'sm' = 'sm')}
-	{#if !drawerLoading}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={drawerLoading || !can_write ? 'none' : 'create'}
-			{enabled}
-			{allowDraft}
-			{edit}
-			isLoading={deploymentLoading}
-			{isDeployed}
-			{saveDisabled}
-			onUpdate={updateTrigger}
-			{onReset}
-			{onDelete}
-			onToggleEnabled={handleToggleEnabled}
-			{cloudDisabled}
-		/>
-	{/if}
-{/snippet}
-
-{#snippet config()}
-	{#if drawerLoading}
-		{#if showLoading}
+		{#if drawerLoading}
 			<Loader2 class="animate-spin" />
-		{/if}
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#if description}
-				{@render description()}
-			{/if}
-			{#if !hideTooltips}
-				<Alert title="Info" type="info" size="xs">
-					{#if edit}
-						Changes can take up to 30 seconds to take effect.
-					{:else}
-						Kafka consumers can take up to 30 seconds to start.
-					{/if}
-				</Alert>
-			{/if}
-		</div>
-		<div class="flex flex-col gap-12 mt-6">
-			<div class="flex flex-col gap-4">
-				<Label label="Path">
-					<Path
-						bind:dirty={dirtyPath}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						checkInitialPathExistence={!edit}
-						namePlaceholder="kafka_trigger"
-						kind="kafka_trigger"
-						disabled={!can_write}
-						disableEditing={!can_write}
-					/>
-				</Label>
-			</div>
+		{:else}
+			<Alert title="Info" type="info">
+				{#if edit}
+					Changes can take up to 30 seconds to take effect.
+				{:else}
+					Kafka consumers can take up to 30 seconds to start.
+				{/if}
+			</Alert>
+			<div class="flex flex-col gap-12 mt-6">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="kafka_trigger"
+							kind="kafka_trigger"
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
 
-			{#if !hideTarget}
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
 						Pick a script or flow to be triggered<Required required={true} />
@@ -357,23 +235,20 @@
 								btnClasses="ml-4 mt-2"
 								color="dark"
 								size="xs"
-								disabled={!can_write}
 								href={itemKind === 'flow' ? '/flows/add?hub=65' : '/scripts/add?hub=hub%2F19659'}
 								target="_blank">Create from template</Button
 							>
 						{/if}
 					</div>
 				</Section>
-			{/if}
 
-			<KafkaTriggersConfigSection
-				bind:kafkaCfgValid
-				bind:kafkaResourcePath
-				bind:kafkaCfg
-				{path}
-				{can_write}
-				showTestingBadge={isEditor}
-			/>
-		</div>
-	{/if}
-{/snippet}
+				<KafkaTriggersConfigSection
+					bind:args
+					bind:isValid
+					{path}
+					defaultValues={useDefaultValues() ? defaultValues : undefined}
+				/>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggersConfigSection.svelte
index 83f4720736..0b287d040e 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggersConfigSection.svelte
@@ -1,31 +1,162 @@
 <script lang="ts">
 	import ResourcePicker from '../../ResourcePicker.svelte'
+	import { Boxes } from 'lucide-svelte'
 	import Section from '$lib/components/Section.svelte'
 	import Subsection from '$lib/components/Subsection.svelte'
+	import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import SchemaForm from '../../SchemaForm.svelte'
+	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
 	import { workspaceStore } from '$lib/stores'
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
-	import TestingBadge from '../testingBadge.svelte'
+	export let path: string
+	export let defaultValues: Record<string, any> | undefined = undefined
+	export let headless: boolean = false
+	export let args: Record<string, any> = {}
+	export let staticInputDisabled: boolean = true
+	export let showCapture: boolean = false
+	export let captureInfo: CaptureInfo | undefined = undefined
+	export let captureTable: CaptureTable | undefined = undefined
+	export let isValid: boolean = false
 
-	interface Props {
-		path: string
-		kafkaCfgValid?: boolean
-		kafkaResourcePath?: string
-		kafkaCfg?: Record<string, any>
-		can_write?: boolean
-		showTestingBadge?: boolean
+	let selected: 'resource' | 'static' = staticInputDisabled ? 'resource' : 'static'
+
+	const connnectionSchema = {
+		$schema: 'http://json-schema.org/draft-07/schema#',
+		type: 'object',
+		properties: {
+			brokers: {
+				type: 'array',
+				items: {
+					type: 'string'
+				},
+				nullable: false,
+				title: 'Brokers',
+				default: ['']
+			},
+			security: {
+				type: 'object',
+				title: 'Security',
+				oneOf: [
+					{
+						type: 'object',
+						title: 'PLAINTEXT',
+						properties: {
+							label: {
+								enum: ['PLAINTEXT'],
+								type: 'string'
+							}
+						}
+					},
+					{
+						type: 'object',
+						order: ['mechanism', 'username', 'password'],
+						title: 'SASL_PLAINTEXT',
+						required: ['mechanism', 'username', 'password'],
+						properties: {
+							label: {
+								enum: ['SASL_PLAINTEXT'],
+								type: 'string'
+							},
+							password: {
+								type: 'string',
+								password: true
+							},
+							username: {
+								type: 'string'
+							},
+							mechanism: {
+								enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
+								type: 'string',
+								disableCreate: true
+							}
+						}
+					},
+					{
+						type: 'object',
+						title: 'SSL',
+						order: ['ca', 'certificate', 'key', 'key_password'],
+						properties: {
+							label: {
+								enum: ['SSL'],
+								type: 'string'
+							},
+							ca: {
+								type: 'string',
+								description: 'CA certificate to verify the server certificate, in PEM format'
+							},
+							certificate: {
+								type: 'string',
+								description: 'Client certificate for authentication to the server, in PEM format'
+							},
+							key: {
+								type: 'string',
+								description: 'Client key for authentication to the server, in PEM format'
+							},
+							key_password: {
+								type: 'string',
+								description: 'Password to decrypt the client key, if encrypted',
+								password: true
+							}
+						}
+					},
+					{
+						type: 'object',
+						order: [
+							'mechanism',
+							'username',
+							'password',
+							'ca',
+							'certificate',
+							'key',
+							'key_password'
+						],
+						title: 'SASL_SSL',
+						required: ['mechanism', 'username', 'password'],
+						properties: {
+							label: {
+								enum: ['SASL_SSL'],
+								type: 'string'
+							},
+							password: {
+								type: 'string',
+								password: true
+							},
+							username: {
+								type: 'string'
+							},
+							mechanism: {
+								enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
+								type: 'string',
+								disableCreate: true
+							},
+							ca: {
+								type: 'string',
+								description: 'CA certificate to verify the server certificate, in PEM format'
+							},
+							certificate: {
+								type: 'string',
+								description: 'Client certificate for authentication to the server, in PEM format'
+							},
+							key: {
+								type: 'string',
+								description: 'Client key for authentication to the server, in PEM format'
+							},
+							key_password: {
+								type: 'string',
+								description: 'Password to decrypt the client key, if encrypted',
+								password: true
+							}
+						}
+					}
+				]
+			}
+		},
+		required: ['brokers', 'security']
 	}
 
-	let {
-		path,
-		kafkaCfgValid = $bindable(false),
-		kafkaResourcePath = $bindable(''),
-		kafkaCfg = $bindable({}),
-		can_write = true,
-		showTestingBadge = false
-	}: Props = $props()
-
-	const kafkaConfigSchema = {
+	const argsSchema = {
 		$schema: 'http://json-schema.org/draft-07/schema#',
 		type: 'object',
 		properties: {
@@ -48,39 +179,105 @@
 		required: ['topics', 'group_id']
 	}
 
+	let isStaticConnectionValid = false
+	let otherArgsValid = false
+
+	$: isConnectionValid =
+		selected === 'resource'
+			? !!args.kafka_resource_path
+			: isStaticConnectionValid &&
+				args.brokers &&
+				args.brokers.length > 0 &&
+				args.brokers.every((b) => b.length > 0)
+
+	$: isValid =
+		isConnectionValid &&
+		otherArgsValid &&
+		args.topics &&
+		args.topics.length > 0 &&
+		args.topics.every((b) => /^[a-zA-Z0-9-_.]+$/.test(b))
+
+	$: usingResource = !!args.kafka_resource_path
+	$: usingResource && (selected = 'resource')
+
 	function setGroupId() {
-		if (!kafkaCfg.group_id) {
-			kafkaCfg.group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
+		if (!args.group_id) {
+			args.group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
 		}
 	}
-
-	$effect(() => {
-		path && setGroupId()
-	})
+	$: path && setGroupId()
 </script>
 
 <div>
-	<Section label="Kafka">
-		{#snippet header()}
-			{#if showTestingBadge}
-				<TestingBadge />
-			{/if}
-		{/snippet}
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			captureType="kafka"
+			disabled={!isValid}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+			bind:captureTable
+		/>
+	{/if}
+	<Section label="Kafka" {headless}>
 		<div class="flex flex-col w-full gap-4">
 			<div class="block grow w-full">
 				<Subsection label="Connection">
-					<ResourcePicker
-						resourceType="kafka"
-						bind:value={kafkaResourcePath}
-						disabled={!can_write}
-					/>
-					{#if !!kafkaResourcePath}
+					<svelte:fragment slot="header">
+						{#if !staticInputDisabled}
+							<ToggleButtonGroup
+								bind:selected
+								class="h-full"
+								on:selected={(ev) => {
+									if (ev.detail === 'static') {
+										delete args.kafka_resource_path
+										args.brokers = ['']
+										args.security = {
+											label: 'PLAINTEXT'
+										}
+									} else {
+										delete args.brokers
+										delete args.security
+									}
+								}}
+								let:item
+							>
+								<ToggleButton value="static" label="Static" small={true} {item} />
+								<ToggleButton value="resource" label="Resource" icon={Boxes} small={true} {item} />
+							</ToggleButtonGroup>
+						{/if}
+					</svelte:fragment>
+
+					{#if selected === 'resource'}
+						<ResourcePicker
+							resourceType="kafka"
+							bind:value={args.kafka_resource_path}
+							{defaultValues}
+						/>
+					{:else}
+						<SchemaForm
+							schema={connnectionSchema}
+							bind:args={
+								() => args,
+								(v) => {
+									args = {
+										...args,
+										...v
+									}
+								}
+							}
+							bind:isValid={isStaticConnectionValid}
+							lightHeader={true}
+						/>
+					{/if}
+					{#if isConnectionValid}
 						<TestTriggerConnection
 							kind="kafka"
 							args={{
-								connection: {
-									kafka_resource_path: kafkaResourcePath
-								}
+								connection: args
 							}}
 						/>
 					{/if}
@@ -90,11 +287,18 @@
 			<div class="block grow w-full">
 				<Subsection headless={true}>
 					<SchemaForm
-						schema={kafkaConfigSchema}
-						bind:args={kafkaCfg}
-						bind:isValid={kafkaCfgValid}
+						schema={argsSchema}
+						bind:args={
+							() => args,
+							(v) => {
+								args = {
+									...args,
+									...v
+								}
+							}
+						}
+						bind:isValid={otherArgsValid}
 						lightHeader={true}
-						disabled={!can_write}
 					/>
 				</Subsection>
 			</div>
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggersPanel.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggersPanel.svelte
index d11fe49768..364a976921 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggersPanel.svelte
@@ -1,69 +1,137 @@
 <script lang="ts">
-	import KafkaTriggerEditorInner from './KafkaTriggerEditorInner.svelte'
+	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
+	import { KafkaTriggerService, type KafkaTrigger } from '$lib/gen'
+	import { canWrite } from '$lib/utils'
+	import { getContext, onMount } from 'svelte'
+	import KafkaTriggerEditor from './KafkaTriggerEditor.svelte'
 	import { isCloudHosted } from '$lib/cloud'
-	import { Alert } from '$lib/components/common'
+	import Section from '$lib/components/Section.svelte'
 	import Description from '$lib/components/Description.svelte'
-	import { enterpriseLicense } from '$lib/stores'
-	import { onMount } from 'svelte'
+	import { Alert } from '$lib/components/common'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
 
-	let {
-		selectedTrigger,
-		isFlow,
-		path,
-		isDeployed = false,
-		defaultValues = undefined,
-		newDraft = false,
-		customLabel = undefined,
-		...restProps
-	} = $props()
-	let kafkaTriggerEditor: KafkaTriggerEditorInner | undefined = $state(undefined)
+	export let isFlow: boolean
+	export let path: string
+	export let newItem: boolean = false
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
-	async function openKafkaTriggerEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			kafkaTriggerEditor?.openNew(isFlow, path, defaultValues)
-		} else {
-			kafkaTriggerEditor?.openEdit(selectedTrigger.path, isFlow, defaultValues)
+	let kafkaTriggerEditor: KafkaTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
+
+	$: path && loadTriggers()
+
+	const { triggersCount, selectedTrigger, defaultValues } =
+		getContext<TriggerContext>('TriggerContext')
+
+	onMount(() => {
+		if (
+			defaultValues &&
+			$selectedTrigger === 'kafka' &&
+			Object.keys($defaultValues ?? {}).length > 0
+		) {
+			kafkaTriggerEditor.openNew(isFlow, path, $defaultValues)
+			defaultValues.set(undefined)
+		}
+	})
+
+	let kafkaTriggers: (KafkaTrigger & { canWrite: boolean })[] | undefined = undefined
+	export async function loadTriggers() {
+		try {
+			kafkaTriggers = (
+				await KafkaTriggerService.listKafkaTriggers({
+					workspace: $workspaceStore ?? '',
+					path,
+					isFlow
+				})
+			).map((x) => {
+				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
+			})
+			$triggersCount = { ...($triggersCount ?? {}), kafka_count: kafkaTriggers?.length }
+			openForm = kafkaTriggers?.length === 0 || dontCloseOnLoad
+		} catch (e) {
+			console.error('impossible to load Kafka triggers', e)
 		}
 	}
 
-	onMount(() => {
-		openKafkaTriggerEditor(isFlow, selectedTrigger.isDraft ?? false)
-	})
+	let data = {
+		kafkaTriggers: [],
+		newItem
+	}
 
-	const cloudDisabled = $derived(isCloudHosted())
+	function saveTrigger(path: string, args?: Record<string, any>) {
+		kafkaTriggerEditor?.openNew(isFlow, path, args)
+	}
 </script>
 
+<KafkaTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={kafkaTriggerEditor}
+/>
+
 {#if !$enterpriseLicense}
 	<Alert title="EE Only" type="warning" size="xs">
 		Kafka triggers are an enterprise only feature.
 	</Alert>
+{:else if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		Kafka triggers are disabled in the multi-tenant cloud.
+	</Alert>
 {:else}
 	<div class="flex flex-col gap-4">
-		<KafkaTriggerEditorInner
-			bind:this={kafkaTriggerEditor}
-			useDrawer={false}
-			hideTarget
-			hideTooltips={!isDeployed || cloudDisabled}
-			allowDraft={true}
-			hasDraft={!!selectedTrigger.draftConfig}
-			isDraftOnly={selectedTrigger.isDraft}
-			{customLabel}
-			{isDeployed}
-			{cloudDisabled}
-			{...restProps}
-		>
-			{#snippet description()}
-				{#if cloudDisabled}
-					<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-						Kafka triggers are disabled in the multi-tenant cloud.
-					</Alert>
-				{:else}
-					<Description link="https://www.windmill.dev/docs/core_concepts/kafka_triggers">
-						Kafka triggers execute scripts and flows in response to messages published to Kafka
-						topics.
-					</Description>
-				{/if}
-			{/snippet}
-		</KafkaTriggerEditorInner>
+		<Description link="https://www.windmill.dev/docs/core_concepts/kafka_triggers">
+			Kafka triggers execute scripts and flows in response to messages published to Kafka topics.
+		</Description>
+		{#if !newItem && kafkaTriggers && kafkaTriggers.length > 0}
+			<Section label="Kafka triggers">
+				<div class="flex flex-col divide-y pt-2">
+					{#each kafkaTriggers as kafkaTrigger (kafkaTrigger.path)}
+						<div class="grid grid-cols-5 text-2xs items-center py-2">
+							<div class="col-span-2 truncate">{kafkaTrigger.path}</div>
+							<div class="col-span-2 truncate">
+								{kafkaTrigger.kafka_resource_path}
+							</div>
+							<div class="flex justify-end">
+								<button
+									on:click={() => kafkaTriggerEditor?.openEdit(kafkaTrigger.path, isFlow)}
+									class="px-2"
+								>
+									{#if kafkaTrigger.canWrite}
+										Edit
+									{:else}
+										View
+									{/if}
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</Section>
+		{/if}
+		<TriggersEditorSection
+			on:saveTrigger={(e) => {
+				saveTrigger(path, e.detail.config)
+			}}
+			on:applyArgs
+			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
+			cloudDisabled={false}
+			triggerType="kafka"
+			{isFlow}
+			{data}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
+		/>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/triggers/kafka/utils.ts b/frontend/src/lib/components/triggers/kafka/utils.ts
deleted file mode 100644
index d87a730d1b..0000000000
--- a/frontend/src/lib/components/triggers/kafka/utils.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { KafkaTriggerService } from '$lib/gen'
-import { sendUserToast } from '$lib/toast'
-import { get, type Writable } from 'svelte/store'
-
-export async function saveKafkaTriggerFromCfg(
-	initialPath: string,
-	cfg: Record<string, any>,
-	edit: boolean,
-	workspace: string,
-	usedTriggerKinds: Writable<string[]>
-): Promise<boolean> {
-	const requestBody = {
-		path: cfg.path,
-		script_path: cfg.script_path,
-		is_flow: cfg.is_flow,
-		kafka_resource_path: cfg.kafka_resource_path,
-		group_id: cfg.group_id,
-		topics: cfg.topics
-	}
-	try {
-		if (edit) {
-			await KafkaTriggerService.updateKafkaTrigger({
-				workspace,
-				path: initialPath,
-				requestBody
-			})
-			sendUserToast(`Kafka trigger ${cfg.path} updated`)
-		} else {
-			await KafkaTriggerService.createKafkaTrigger({
-				workspace,
-				requestBody: { ...requestBody, enabled: true }
-			})
-			sendUserToast(`Kafka trigger ${cfg.path} created`)
-		}
-		if (!get(usedTriggerKinds).includes('kafka')) {
-			usedTriggerKinds.update((t) => [...t, 'kafka'])
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
-}
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttCapture.svelte b/frontend/src/lib/components/triggers/mqtt/MqttCapture.svelte
deleted file mode 100644
index e31e8edd6f..0000000000
--- a/frontend/src/lib/components/triggers/mqtt/MqttCapture.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition'
-	import type { CaptureInfo } from '../CaptureSection.svelte'
-	import CaptureSection from '../CaptureSection.svelte'
-
-	interface Props {
-		captureInfo?: CaptureInfo | undefined
-		isValid?: boolean | undefined
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		captureLoading?: boolean
-		triggerDeployed?: boolean
-	}
-
-	let {
-		captureInfo = undefined,
-		isValid = undefined,
-		hasPreprocessor = false,
-		isFlow = false,
-		captureLoading = false,
-		triggerDeployed = false
-	}: Props = $props()
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="mqtt"
-		disabled={isValid === false}
-		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-		{captureLoading}
-		displayAlert={triggerDeployed}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listening to MQTT messages...
-					</p>
-				{:else}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to mqtt...
-					</p>
-				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to MQTT messages.
-				</p>
-			{/if}
-		{/snippet}
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte b/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
index ae78ff3143..b2c11571ae 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Section from '$lib/components/Section.svelte'
+	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import { Plus, X } from 'lucide-svelte'
 	import Subsection from '$lib/components/Subsection.svelte'
@@ -15,18 +17,19 @@
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import TestingBadge from '../testingBadge.svelte'
 
 	export let can_write: boolean = false
 	export let headless: boolean = false
+	export let showCapture: boolean = false
 	export let mqtt_resource_path: string = ''
 	export let subscribe_topics: MqttSubscribeTopic[] = []
+	export let captureTable: CaptureTable | undefined = undefined
+	export let captureInfo: CaptureInfo | undefined = undefined
 	export let v3_config: MqttV3Config = DEFAULT_V3_CONFIG
 	export let v5_config: MqttV5Config = DEFAULT_V5_CONFIG
 	export let client_version: MqttClientVersion = 'v5'
 	export let isValid: boolean = false
 	export let client_id: string = ''
-	export let showTestingBadge: boolean = false
 
 	const activateV5Options = {
 		topic_alias: Boolean(v5_config.topic_alias),
@@ -47,12 +50,20 @@
 </script>
 
 <div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			captureType="mqtt"
+			disabled={!isValid}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+			bind:captureTable
+		/>
+	{/if}
 	<Section label="MQTT" {headless}>
-		<svelte:fragment slot="header">
-			{#if showTestingBadge}
-				<TestingBadge />
-			{/if}
-		</svelte:fragment>
 		<div class="flex flex-col w-full gap-4">
 			<Subsection label="Connection setup">
 				<ResourcePicker resourceType="mqtt" disabled={!can_write} bind:value={mqtt_resource_path} />
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditor.svelte b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditor.svelte
index ac74859255..2bf129ae4d 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditor.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditor.svelte
@@ -2,9 +2,7 @@
 	import { tick } from 'svelte'
 	import MqttTriggerEditorInner from './MqttTriggerEditorInner.svelte'
 
-	let { onUpdate }: { onUpdate?: (path?: string) => void } = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
@@ -21,9 +19,9 @@
 		drawer?.openNew(is_flow, initial_script_path, defaultValues)
 	}
 
-	let drawer: MqttTriggerEditorInner | undefined = $state()
+	let drawer: MqttTriggerEditorInner
 </script>
 
 {#if open}
-	<MqttTriggerEditorInner {onUpdate} bind:this={drawer} />
+	<MqttTriggerEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
index 0f4b31465e..3a94f63a9d 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
@@ -7,9 +7,11 @@
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, sendUserToast } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
-	import { Loader2 } from 'lucide-svelte'
+	import { Loader2, Save } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 	import {
 		MqttTriggerService,
 		type MqttClientVersion,
@@ -18,92 +20,33 @@
 		type MqttSubscribeTopic
 	} from '$lib/gen'
 	import MqttEditorConfigSection from './MqttEditorConfigSection.svelte'
-	import type { Snippet } from 'svelte'
-	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
-	import { saveMqttTriggerFromCfg } from './utils'
-	import { handleConfigChange } from '../utils'
 
-	interface Props {
-		useDrawer?: boolean
-		description?: Snippet | undefined
-		hideTarget?: boolean
-		hideTooltips?: boolean
-		isEditor?: boolean
-		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
-		customLabel?: Snippet
-		isDeployed?: boolean
-		cloudDisabled?: boolean
-		onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
-		onCaptureConfigChange?: (cfg: Record<string, any>, isValid: boolean) => void
-		onUpdate?: (path?: string) => void
-		onDelete?: () => void
-		onReset?: () => void
-	}
+	let mqtt_resource_path: string = ''
+	let drawer: Drawer
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
+	let itemKind: 'flow' | 'script' = 'script'
+	let script_path = ''
+	let initialScriptPath = ''
+	let fixedScriptPath = ''
+	let path: string = ''
+	let pathError = ''
+	let enabled = false
+	let dirtyPath = false
+	let can_write = true
+	let drawerLoading = true
+	let subscribe_topics: MqttSubscribeTopic[] = []
+	let v3_config: MqttV3Config | undefined
+	let v5_config: MqttV5Config | undefined
+	let client_version: MqttClientVersion | undefined
+	let client_id: string
+	let isValid: boolean
+	const dispatch = createEventDispatcher()
 
-	let {
-		useDrawer = true,
-		description = undefined,
-		hideTarget = false,
-		hideTooltips = false,
-		isEditor = false,
-		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
-		customLabel = undefined,
-		isDeployed = false,
-		onConfigChange = undefined,
-		onCaptureConfigChange = undefined,
-		onUpdate = undefined,
-		onDelete = undefined,
-		onReset = undefined,
-		cloudDisabled = false
-	}: Props = $props()
+	$: is_flow = itemKind === 'flow'
 
-	let mqtt_resource_path: string = $state('')
-	let drawer: Drawer | undefined = $state(undefined)
-	let is_flow: boolean = $state(false)
-	let initialPath = $state('')
-	let edit = $state(true)
-	let itemKind: 'flow' | 'script' = $state('script')
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let fixedScriptPath = $state('')
-	let path: string = $state('')
-	let pathError = $state('')
-	let enabled = $state(false)
-	let dirtyPath = $state(false)
-	let can_write = $state(true)
-	let drawerLoading = $state(true)
-	let showLoading = $state(false)
-	let subscribe_topics: MqttSubscribeTopic[] = $state([])
-	let v3_config: MqttV3Config | undefined = $state()
-	let v5_config: MqttV5Config | undefined = $state()
-	let client_version: MqttClientVersion | undefined = $state()
-	let client_id: string | undefined = $state(undefined)
-	let isValid: boolean | undefined = $state(undefined)
-	let initialConfig: Record<string, any> | undefined = undefined
-	let deploymentLoading = $state(false)
-
-	const mqttConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
-	const saveDisabled = $derived(
-		pathError != '' || emptyString(script_path) || !can_write || !isValid
-	)
-
-	$effect(() => {
-		is_flow = itemKind === 'flow'
-	})
-
-	export async function openEdit(
-		ePath: string,
-		isFlow: boolean,
-		defaultConfig?: Record<string, any>
-	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
+	export async function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -111,16 +54,11 @@
 			itemKind = isFlow ? 'flow' : 'script'
 			edit = true
 			dirtyPath = false
-			await loadTrigger(defaultConfig)
+			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load mqtt trigger: ${err.body}`, true)
 		} finally {
-			if (!defaultConfig) {
-				initialConfig = structuredClone($state.snapshot(getSaveCfg()))
-			}
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
@@ -129,12 +67,9 @@
 		fixedScriptPath_?: string,
 		defaultValues?: Record<string, any>
 	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100)
 		drawerLoading = true
 		try {
-			mqtt_resource_path = defaultValues?.mqtt_resource_path ?? ''
+			mqtt_resource_path = ''
 			drawer?.openDrawer()
 			is_flow = nis_flow
 			itemKind = nis_flow ? 'flow' : 'script'
@@ -142,212 +77,149 @@
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath
 			subscribe_topics = defaultValues?.topics ?? []
-			path = defaultValues?.path ?? ''
+			path = ''
 			initialPath = ''
 			edit = false
 			dirtyPath = false
 			client_version = defaultValues?.client_version ?? 'v5'
 			client_id = defaultValues?.client_id ?? ''
-			enabled = defaultValues?.enabled ?? false
 		} finally {
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
-	async function loadTriggerConfig(cfg?: Record<string, any>): Promise<void> {
+	async function loadTrigger(): Promise<void> {
 		try {
-			mqtt_resource_path = cfg?.mqtt_resource_path
-			subscribe_topics = cfg?.subscribe_topics
-			script_path = cfg?.script_path
-			initialScriptPath = cfg?.script_path
-			is_flow = cfg?.is_flow
-			path = cfg?.path
-			enabled = cfg?.enabled
-			client_version = cfg?.client_version
-			v3_config = cfg?.v3_config
-			v5_config = cfg?.v5_config
-			client_id = cfg?.client_id ?? ''
-			can_write = canWrite(cfg?.path, cfg?.extra_perms, $userStore)
-		} catch (error) {
-			sendUserToast(`Could not load mqtt trigger config: ${error.body}`, true)
-		}
-	}
-
-	async function loadTrigger(defaultConfig?: Record<string, any>): Promise<void> {
-		try {
-			if (defaultConfig) {
-				loadTriggerConfig(defaultConfig)
-				return
-			} else {
-				const s = await MqttTriggerService.getMqttTrigger({
-					workspace: $workspaceStore!,
-					path: initialPath
-				})
-				loadTriggerConfig(s)
-			}
+			const s = await MqttTriggerService.getMqttTrigger({
+				workspace: $workspaceStore!,
+				path: initialPath
+			})
+			mqtt_resource_path = s.mqtt_resource_path
+			subscribe_topics = s.subscribe_topics
+			script_path = s.script_path
+			initialScriptPath = s.script_path
+			is_flow = s.is_flow
+			path = s.path
+			enabled = s.enabled
+			client_version = s.client_version
+			v3_config = s.v3_config
+			v5_config = s.v5_config
+			client_id = s.client_id ?? ''
+			can_write = canWrite(s.path, s.extra_perms, $userStore)
 		} catch (error) {
 			sendUserToast(`Could not load mqtt trigger: ${error.body}`, true)
 		}
 	}
 
-	function getSaveCfg(): Record<string, any> {
-		return {
-			client_id,
-			client_version,
-			v3_config,
-			v5_config,
-			mqtt_resource_path,
-			subscribe_topics,
-			path,
-			script_path,
-			enabled,
-			is_flow
-		}
-	}
-
-	function getCaptureConfig(): Record<string, any> {
-		return {
-			mqtt_resource_path,
-			subscribe_topics,
-			client_version,
-			v3_config,
-			v5_config,
-			client_id,
-			path
-		}
-	}
-
 	async function updateTrigger(): Promise<void> {
-		deploymentLoading = true
-		const cfg = getSaveCfg()
-		const isSaved = await saveMqttTriggerFromCfg(
-			initialPath,
-			cfg,
-			edit,
-			$workspaceStore!,
-			usedTriggerKinds
-		)
-		if (isSaved) {
-			onUpdate?.(cfg.path)
-			drawer?.closeDrawer()
-		}
-		deploymentLoading = false
-	}
-
-	async function handleToggleEnabled(newEnabled: boolean) {
-		enabled = newEnabled
-		if (!isDraftOnly && !hasDraft) {
-			await MqttTriggerService.setMqttTriggerEnabled({
+		if (edit) {
+			await MqttTriggerService.updateMqttTrigger({
+				workspace: $workspaceStore!,
 				path: initialPath,
-				workspace: $workspaceStore ?? '',
-				requestBody: { enabled: newEnabled }
+				requestBody: {
+					client_id,
+					client_version,
+					v3_config,
+					v5_config,
+					mqtt_resource_path,
+					subscribe_topics,
+					path,
+					script_path,
+					enabled,
+					is_flow
+				}
 			})
-			sendUserToast(`${newEnabled ? 'enabled' : 'disabled'} MQTT trigger ${initialPath}`)
+			sendUserToast(`MQTT trigger ${path} updated`)
+		} else {
+			await MqttTriggerService.createMqttTrigger({
+				workspace: $workspaceStore!,
+				requestBody: {
+					client_id,
+					client_version,
+					v3_config,
+					v5_config,
+					mqtt_resource_path,
+					subscribe_topics,
+					enabled: true,
+					path,
+					script_path,
+					is_flow
+				}
+			})
+			sendUserToast(`MQTT trigger ${path} created`)
 		}
+
+		if (!$usedTriggerKinds.includes('mqtt')) {
+			$usedTriggerKinds = [...$usedTriggerKinds, 'mqtt']
+		}
+		dispatch('update')
+		drawer.closeDrawer()
 	}
-
-	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid ?? false)
-	})
-
-	$effect(() => {
-		if (!drawerLoading) {
-			handleConfigChange(mqttConfig, initialConfig, saveDisabled, edit, onConfigChange)
-		}
-	})
 </script>
 
-{#if useDrawer}
-	<Drawer size="800px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit MQTT trigger ${initialPath}`
-					: `MQTT trigger ${initialPath}`
-				: 'New MQTT trigger'}
-			on:close={drawer.closeDrawer}
-		>
-			<svelte:fragment slot="actions">
-				{@render actions()}
-			</svelte:fragment>
-			{@render config()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'MQTT trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit MQTT trigger ${initialPath}`
+				: `MQTT trigger ${initialPath}`
+			: 'New MQTT trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading && can_write}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} mqtt trigger ${initialPath}`)
+							}}
+						/>
+					</div>
+				{/if}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || emptyString(script_path) || !can_write || !isValid}
+					on:click={updateTrigger}
+				>
+					Save
+				</Button>
 			{/if}
 		</svelte:fragment>
-		<svelte:fragment slot="action">
-			{@render actions()}
-		</svelte:fragment>
-		{@render config()}
-	</Section>
-{/if}
-
-{#snippet actions()}
-	{#if !drawerLoading}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={drawerLoading || !can_write ? 'none' : 'create'}
-			{saveDisabled}
-			{enabled}
-			{allowDraft}
-			{edit}
-			isLoading={deploymentLoading}
-			{isDeployed}
-			onUpdate={updateTrigger}
-			{onReset}
-			{onDelete}
-			onToggleEnabled={handleToggleEnabled}
-			{cloudDisabled}
-		/>
-	{/if}
-{/snippet}
-
-{#snippet config()}
-	{#if drawerLoading}
-		{#if showLoading}
-			<Loader2 class="animate-spin" />
-		{/if}
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#if description}
-				{@render description()}
-			{/if}
-			{#if !hideTooltips}
-				<Alert title="Info" type="info" size="xs">
+		{#if drawerLoading}
+			<div class="flex flex-col items-center justify-center h-full w-full">
+				<Loader2 size="50" class="animate-spin" />
+				<p>Loading...</p>
+			</div>
+		{:else}
+			<div class="flex flex-col gap-5">
+				<Alert title="Info" type="info">
 					{#if edit}
 						Changes can take up to 30 seconds to take effect.
 					{:else}
 						New MQTT triggers can take up to 30 seconds to start listening.
 					{/if}
 				</Alert>
-			{/if}
-		</div>
-		<div class="flex flex-col gap-12 mt-6">
-			<div class="flex flex-col gap-4">
-				<Label label="Path">
-					<Path
-						bind:dirty={dirtyPath}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						checkInitialPathExistence={!edit}
-						namePlaceholder="mqtt_trigger"
-						kind="mqtt_trigger"
-						disabled={!can_write}
-						disableEditing={!can_write}
-					/>
-				</Label>
 			</div>
+			<div class="flex flex-col gap-12 mt-6">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="mqtt_trigger"
+							kind="mqtt_trigger"
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
 
-			{#if !hideTarget}
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
 						Pick a script or flow to be triggered<Required required={true} />
@@ -360,37 +232,32 @@
 							allowFlow={true}
 							bind:itemKind
 							bind:scriptPath={script_path}
-							allowRefresh={can_write}
-							allowEdit={!$userStore?.operator}
+							allowRefresh
 						/>
 						{#if emptyString(script_path)}
 							<Button
 								btnClasses="ml-4 mt-2"
 								color="dark"
 								size="xs"
-								disabled={!can_write}
 								href={itemKind === 'flow' ? '/flows/add?hub=61' : '/scripts/add?hub=hub%2F19655'}
-								target="_blank"
+								target="_blank">Create from template</Button
 							>
-								Create from template
-							</Button>
 						{/if}
 					</div>
 				</Section>
-			{/if}
 
-			<MqttEditorConfigSection
-				bind:mqtt_resource_path
-				bind:subscribe_topics
-				{can_write}
-				bind:client_version
-				bind:v3_config
-				bind:v5_config
-				bind:isValid
-				bind:client_id
-				headless={true}
-				showTestingBadge={isEditor}
-			/>
-		</div>
-	{/if}
-{/snippet}
+				<MqttEditorConfigSection
+					bind:mqtt_resource_path
+					bind:subscribe_topics
+					bind:can_write
+					bind:client_version
+					bind:v3_config
+					bind:v5_config
+					bind:isValid
+					bind:client_id
+					headless={true}
+				/>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttTriggersPanel.svelte b/frontend/src/lib/components/triggers/mqtt/MqttTriggersPanel.svelte
index 7b918726f2..834b6c16bb 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttTriggersPanel.svelte
@@ -1,62 +1,126 @@
 <script lang="ts">
-	import MqttTriggerEditorInner from './MqttTriggerEditorInner.svelte'
+	import { userStore, workspaceStore } from '$lib/stores'
+
+	import { canWrite } from '$lib/utils'
+	import { getContext, onMount } from 'svelte'
 	import { isCloudHosted } from '$lib/cloud'
+	import Section from '$lib/components/Section.svelte'
 	import { Alert } from '$lib/components/common'
 	import Description from '$lib/components/Description.svelte'
-	import { onMount } from 'svelte'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
+	import MqttTriggerEditor from './MqttTriggerEditor.svelte'
+	import { MqttTriggerService, type MqttTrigger } from '$lib/gen'
+	export let isFlow: boolean
+	export let path: string
+	export let newItem: boolean = false
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
-	let {
-		selectedTrigger,
-		isFlow,
-		path,
-		isDeployed = false,
-		defaultValues = undefined,
-		newDraft = false,
-		customLabel = undefined,
-		...props
-	} = $props()
-	let mqttTriggerEditor: MqttTriggerEditorInner | undefined = $state(undefined)
+	let mqttTriggerEditor: MqttTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
-	async function openMqttTriggerEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			mqttTriggerEditor?.openNew(isFlow, path, defaultValues)
-		} else {
-			mqttTriggerEditor?.openEdit(selectedTrigger.path, isFlow, selectedTrigger.draftConfig)
-		}
-	}
+	$: path && loadTriggers()
+
+	const { triggersCount, selectedTrigger, defaultValues } =
+		getContext<TriggerContext>('TriggerContext')
 
 	onMount(() => {
-		mqttTriggerEditor && openMqttTriggerEditor(isFlow, selectedTrigger.isDraft ?? false)
+		if (
+			defaultValues &&
+			$selectedTrigger === 'mqtt' &&
+			Object.keys($defaultValues ?? {}).length > 0
+		) {
+			mqttTriggerEditor.openNew(isFlow, path, $defaultValues)
+			defaultValues.set(undefined)
+		}
 	})
 
-	const cloudDisabled = $derived(isCloudHosted())
+	let mqttTriggers: (MqttTrigger & { canWrite: boolean })[] | undefined = undefined
+	export async function loadTriggers() {
+		try {
+			mqttTriggers = (
+				await MqttTriggerService.listMqttTriggers({
+					workspace: $workspaceStore ?? '',
+					path,
+					isFlow
+				})
+			).map((x) => {
+				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
+			})
+			$triggersCount = { ...($triggersCount ?? {}), mqtt_count: mqttTriggers?.length }
+			openForm = mqttTriggers?.length === 0 || dontCloseOnLoad
+		} catch (e) {
+			console.error('impossible to load mqtt triggers', e)
+		}
+	}
 </script>
 
-<div class="flex flex-col gap-4">
-	<MqttTriggerEditorInner
-		bind:this={mqttTriggerEditor}
-		useDrawer={false}
-		hideTarget
-		hideTooltips={!isDeployed || cloudDisabled}
-		allowDraft={true}
-		hasDraft={!!selectedTrigger.draftConfig}
-		isDraftOnly={selectedTrigger.isDraft}
-		{customLabel}
-		{isDeployed}
-		{cloudDisabled}
-		{...props}
-	>
-		{#snippet description()}
-			{#if cloudDisabled}
-				<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-					MQTT triggers are disabled in the multi-tenant cloud.
-				</Alert>
-			{:else}
-				<Description link="https://www.windmill.dev/docs/core_concepts/mqtt_triggers">
-					MQTT triggers allow you to execute scripts and flows in response to MQTT messages. They
-					can be configured to subscribe to specific topics with different QoS levels.
-				</Description>
-			{/if}
-		{/snippet}
-	</MqttTriggerEditorInner>
-</div>
+<MqttTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={mqttTriggerEditor}
+/>
+
+{#if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		MQTT triggers are disabled in the multi-tenant cloud.
+	</Alert>
+{:else}
+	<div class="flex flex-col gap-4">
+		<Description link="https://mqtt.org/">
+			Windmill can connect to an MQTT broker and subscribes to specific topics thus allowing the
+			execution of script/flows based on the event triggered by those subscribed topics
+		</Description>
+
+		{#if !newItem && mqttTriggers && mqttTriggers.length > 0}
+			<Section label="MQTT">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each mqttTriggers as mqttTriggers (mqttTriggers.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{mqttTriggers.path}</div>
+
+								<div class="flex justify-end">
+									<button
+										on:click={() => mqttTriggerEditor?.openEdit(mqttTriggers.path, isFlow)}
+										class="px-2"
+									>
+										{#if mqttTriggers.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+
+		<TriggersEditorSection
+			on:applyArgs
+			on:saveTrigger={(e) => {
+				mqttTriggerEditor?.openNew(isFlow, path, e.detail.config)
+			}}
+			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
+			cloudDisabled={false}
+			triggerType="mqtt"
+			{isFlow}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
+		/>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/triggers/mqtt/utils.ts b/frontend/src/lib/components/triggers/mqtt/utils.ts
deleted file mode 100644
index 14e264a088..0000000000
--- a/frontend/src/lib/components/triggers/mqtt/utils.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { MqttTriggerService } from '$lib/gen'
-import { sendUserToast } from '$lib/toast'
-import { get, type Writable } from 'svelte/store'
-
-export async function saveMqttTriggerFromCfg(
-	initialPath: string,
-	cfg: Record<string, any>,
-	edit: boolean,
-	workspace: string,
-	usedTriggerKinds: Writable<string[]>
-): Promise<boolean> {
-	const requestBody = {
-		client_id: cfg.client_id,
-		client_version: cfg.client_version,
-		v3_config: cfg.v3_config,
-		v5_config: cfg.v5_config,
-		mqtt_resource_path: cfg.mqtt_resource_path,
-		subscribe_topics: cfg.subscribe_topics,
-		path: cfg.path,
-		script_path: cfg.script_path,
-		enabled: cfg.enabled,
-		is_flow: cfg.is_flow
-	}
-	try {
-		if (edit) {
-			await MqttTriggerService.updateMqttTrigger({
-				workspace,
-				path: initialPath,
-				requestBody
-			})
-			sendUserToast(`MQTT trigger ${cfg.path} updated`)
-		} else {
-			await MqttTriggerService.createMqttTrigger({
-				workspace,
-				requestBody: { ...requestBody, enabled: true }
-			})
-			sendUserToast(`MQTT trigger ${cfg.path} created`)
-		}
-
-		if (!get(usedTriggerKinds).includes('mqtt')) {
-			usedTriggerKinds.update((t) => [...t, 'mqtt'])
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
-}
diff --git a/frontend/src/lib/components/triggers/nats/NatsCapture.svelte b/frontend/src/lib/components/triggers/nats/NatsCapture.svelte
deleted file mode 100644
index c44fb8b5d7..0000000000
--- a/frontend/src/lib/components/triggers/nats/NatsCapture.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition'
-	import type { CaptureInfo } from '../CaptureSection.svelte'
-	import CaptureSection from '../CaptureSection.svelte'
-
-	interface Props {
-		captureInfo?: CaptureInfo | undefined
-		isValid?: boolean | undefined
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		captureLoading?: boolean
-		triggerDeployed?: boolean
-	}
-
-	let {
-		captureInfo = undefined,
-		isValid = undefined,
-		hasPreprocessor = false,
-		isFlow = false,
-		captureLoading = false,
-		triggerDeployed = false
-	}: Props = $props()
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="nats"
-		disabled={isValid === false}
-		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-		{captureLoading}
-		displayAlert={triggerDeployed}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listening to NATS messages...
-					</p>
-				{:else}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to nats...
-					</p>
-				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to NATS messages.
-				</p>
-			{/if}
-		{/snippet}
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggerEditor.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggerEditor.svelte
index ef01c1e51d..e4b74437d9 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggerEditor.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggerEditor.svelte
@@ -2,9 +2,7 @@
 	import { tick } from 'svelte'
 	import NatsTriggerEditorInner from './NatsTriggerEditorInner.svelte'
 
-	let { onUpdate } = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
@@ -21,9 +19,9 @@
 		drawer?.openNew(is_flow, initial_script_path, defaultValues)
 	}
 
-	let drawer: NatsTriggerEditorInner | undefined = $state()
+	let drawer: NatsTriggerEditorInner
 </script>
 
 {#if open}
-	<NatsTriggerEditorInner {onUpdate} bind:this={drawer} />
+	<NatsTriggerEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
index d1a0b87bee..6d3cab175f 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
@@ -8,97 +8,35 @@
 	import { NatsTriggerService } from '$lib/gen'
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, sendUserToast } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
-	import { Loader2 } from 'lucide-svelte'
+	import { Loader2, Save } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
 	import NatsTriggersConfigSection from './NatsTriggersConfigSection.svelte'
-	import type { Snippet } from 'svelte'
-	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
-	import { saveNatsTriggerFromCfg } from './utils'
-	import { handleConfigChange } from '../utils'
+	import Toggle from '$lib/components/Toggle.svelte'
 
-	interface Props {
-		useDrawer?: boolean
-		description?: Snippet | undefined
-		hideTarget?: boolean
-		hideTooltips?: boolean
-		useEditButton?: boolean
-		isEditor?: boolean
-		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
-		isDeployed?: boolean
-		cloudDisabled?: boolean
-		customLabel?: Snippet
-		onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
-		onCaptureConfigChange?: (cfg: Record<string, any>, isValid: boolean) => void
-		onUpdate?: (path?: string) => void
-		onDelete?: () => void
-		onReset?: () => void
-	}
+	let drawer: Drawer
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
+	let itemKind: 'flow' | 'script' = 'script'
+	let script_path = ''
+	let initialScriptPath = ''
+	let fixedScriptPath = ''
+	let path: string = ''
+	let pathError = ''
+	let enabled = false
+	let dirtyPath = false
+	let can_write = true
+	let drawerLoading = true
+	let defaultValues: Record<string, any> | undefined = undefined
+	let args: Record<string, any> = {}
 
-	let {
-		useDrawer = true,
-		description = undefined,
-		hideTarget = false,
-		hideTooltips = false,
-		isEditor = false,
-		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
-		isDeployed = false,
-		cloudDisabled = false,
-		customLabel = undefined,
-		onConfigChange = undefined,
-		onCaptureConfigChange = undefined,
-		onUpdate = undefined,
-		onDelete = undefined,
-		onReset = undefined
-	}: Props = $props()
+	const dispatch = createEventDispatcher()
 
-	let drawer: Drawer | undefined = $state(undefined)
-	let is_flow: boolean = $state(false)
-	let initialPath = $state('')
-	let edit = $state(true)
-	let itemKind: 'flow' | 'script' = $state('script')
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let fixedScriptPath = $state('')
-	let path: string = $state('')
-	let pathError = $state('')
-	let enabled = $state(false)
-	let dirtyPath = $state(false)
-	let can_write = $state(true)
-	let drawerLoading = $state(true)
-	let showLoading = $state(false)
-	let defaultValues: Record<string, any> | undefined = $state(undefined)
-	let natsResourcePath = $state('')
-	let subjects = $state([''])
-	let useJetstream = $state(false)
-	let streamName = $state('')
-	let consumerName = $state('')
-	let initialConfig: Record<string, any> | undefined = undefined
-	let deploymentLoading = $state(false)
-	let isValid = $state(false)
+	$: is_flow = itemKind === 'flow'
 
-	const saveDisabled = $derived(
-		pathError != '' || emptyString(script_path) || !can_write || !isValid
-	)
-	const natsConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
-
-	$effect(() => {
-		is_flow = itemKind === 'flow'
-	})
-
-	export async function openEdit(
-		ePath: string,
-		isFlow: boolean,
-		defaultConfig?: Record<string, any>
-	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
+	export async function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -106,16 +44,11 @@
 			itemKind = isFlow ? 'flow' : 'script'
 			edit = true
 			dirtyPath = false
-			await loadTrigger(defaultConfig)
+			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load nats trigger: ${err}`, true)
 		} finally {
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
-			if (!defaultConfig) {
-				initialConfig = structuredClone($state.snapshot(getSaveCfg()))
-			}
 		}
 	}
 
@@ -124,95 +57,92 @@
 		fixedScriptPath_?: string,
 		nDefaultValues?: Record<string, any>
 	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100)
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
 			is_flow = nis_flow
 			edit = false
 			itemKind = nis_flow ? 'flow' : 'script'
-			natsResourcePath = nDefaultValues?.nats_resource_path ?? ''
-			subjects = nDefaultValues?.subjects ?? ['']
-			useJetstream = nDefaultValues?.use_jetstream ?? false
-			streamName = useJetstream ? (nDefaultValues?.stream_name ?? '') : undefined
-			consumerName = useJetstream ? (nDefaultValues?.consumer_name ?? '') : undefined
+			args.nats_resource_path = nDefaultValues?.nats_resource_path ?? ''
+			args.subjects = nDefaultValues?.subjects ?? ['']
+			args.use_jetstream = nDefaultValues?.use_jetstream ?? false
+			args.stream_name = args.use_jetstream ? (nDefaultValues?.stream_name ?? '') : undefined
+			args.consumer_name = args.use_jetstream ? (nDefaultValues?.consumer_name ?? '') : undefined
 			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath
-			path = nDefaultValues?.path ?? ''
+			path = ''
 			initialPath = ''
 			dirtyPath = false
 			defaultValues = nDefaultValues
-			enabled = nDefaultValues?.enabled ?? false
 		} finally {
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
-	async function loadTriggerConfig(cfg?: Record<string, any>): Promise<void> {
-		script_path = cfg?.script_path
-		initialScriptPath = cfg?.script_path
-		is_flow = cfg?.is_flow
-		path = cfg?.path
-		natsResourcePath = cfg?.nats_resource_path
-		streamName = cfg?.stream_name
-		consumerName = cfg?.consumer_name
-		subjects = cfg?.subjects || ['']
-		useJetstream = cfg?.use_jetstream || false
-		enabled = cfg?.enabled
-		can_write = canWrite(cfg?.path, cfg?.extra_perms, $userStore)
-	}
+	async function loadTrigger(): Promise<void> {
+		const s = await NatsTriggerService.getNatsTrigger({
+			workspace: $workspaceStore!,
+			path: initialPath
+		})
+		script_path = s.script_path
+		initialScriptPath = s.script_path
 
-	async function loadTrigger(defaultConfig?: Record<string, any>): Promise<void> {
-		if (defaultConfig) {
-			loadTriggerConfig(defaultConfig)
-			return
-		} else {
-			const s = await NatsTriggerService.getNatsTrigger({
-				workspace: $workspaceStore!,
-				path: initialPath
-			})
-			loadTriggerConfig(s)
-		}
-	}
+		is_flow = s.is_flow
+		path = s.path
+		args.nats_resource_path = s.nats_resource_path
+		args.stream_name = s.stream_name
+		args.consumer_name = s.consumer_name
+		args.subjects = s.subjects
+		args.use_jetstream = s.use_jetstream
+		enabled = s.enabled
 
-	function getSaveCfg() {
-		return {
-			path,
-			script_path,
-			is_flow,
-			enabled,
-			nats_resource_path: natsResourcePath,
-			stream_name: streamName,
-			consumer_name: consumerName,
-			subjects,
-			use_jetstream: useJetstream
-		}
+		can_write = canWrite(s.path, s.extra_perms, $userStore)
 	}
 
 	async function updateTrigger(): Promise<void> {
-		deploymentLoading = true
-		const cfg = natsConfig
-		const isSaved = await saveNatsTriggerFromCfg(
-			initialPath,
-			cfg,
-			edit,
-			$workspaceStore!,
-			usedTriggerKinds
-		)
-		if (isSaved) {
-			onUpdate?.(cfg.path)
-			drawer?.closeDrawer()
+		if (edit) {
+			await NatsTriggerService.updateNatsTrigger({
+				workspace: $workspaceStore!,
+				path: initialPath,
+				requestBody: {
+					path,
+					script_path,
+					is_flow,
+					nats_resource_path: args.nats_resource_path,
+					stream_name: args.stream_name,
+					consumer_name: args.consumer_name,
+					subjects: args.subjects,
+					use_jetstream: args.use_jetstream
+				}
+			})
+			sendUserToast(`Nats trigger ${path} updated`)
+		} else {
+			await NatsTriggerService.createNatsTrigger({
+				workspace: $workspaceStore!,
+				requestBody: {
+					path,
+					script_path,
+					is_flow,
+					enabled: true,
+					nats_resource_path: args.nats_resource_path,
+					stream_name: args.stream_name,
+					consumer_name: args.consumer_name,
+					subjects: args.subjects,
+					use_jetstream: args.use_jetstream
+				}
+			})
+			sendUserToast(`Nats trigger ${path} created`)
 		}
-		deploymentLoading = false
+		if (!$usedTriggerKinds.includes('nats')) {
+			$usedTriggerKinds = [...$usedTriggerKinds, 'nats']
+		}
+		dispatch('update')
+		drawer.closeDrawer()
 	}
 
 	function useDefaultValues() {
-		if (natsResourcePath && natsResourcePath != '') {
+		if (args.nats_resource_path && args.nats_resource_path != '') {
 			return false
 		}
 		if (!defaultValues) {
@@ -225,120 +155,73 @@
 		)
 	}
 
-	async function handleToggleEnabled(toggleEnabled: boolean) {
-		enabled = toggleEnabled
-		if (!isDraftOnly && !hasDraft) {
-			await NatsTriggerService.setNatsTriggerEnabled({
-				path: initialPath,
-				workspace: $workspaceStore ?? '',
-				requestBody: { enabled: toggleEnabled }
-			})
-			sendUserToast(`${toggleEnabled ? 'enabled' : 'disabled'} NATS trigger ${initialPath}`)
-		}
-	}
-
-	function getCaptureConfig() {
-		const { nats_resource_path, subjects, stream_name, consumer_name, use_jetstream } = natsConfig
-		return { nats_resource_path, subjects, stream_name, consumer_name, use_jetstream }
-	}
-
-	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
-	})
-
-	$effect(() => {
-		!drawerLoading &&
-			handleConfigChange(natsConfig, initialConfig, saveDisabled, edit, onConfigChange)
-	})
+	let isValid = false
 </script>
 
-{#if useDrawer}
-	<Drawer size="800px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit NATS trigger ${initialPath}`
-					: `NATS trigger ${initialPath}`
-				: 'New NATS trigger'}
-			on:close={drawer.closeDrawer}
-		>
-			<svelte:fragment slot="actions">
-				{@render actions()}
-			</svelte:fragment>
-			{@render config()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'NATS trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit NATS trigger ${initialPath}`
+				: `NATS trigger ${initialPath}`
+			: 'New NATS trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								await NatsTriggerService.setNatsTriggerEnabled({
+									path: initialPath,
+									workspace: $workspaceStore ?? '',
+									requestBody: { enabled: e.detail }
+								})
+								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} NATS trigger ${initialPath}`)
+							}}
+						/>
+					</div>
+				{/if}
+				{#if can_write}
+					<Button
+						startIcon={{ icon: Save }}
+						disabled={pathError != '' || emptyString(script_path) || !can_write || !isValid}
+						on:click={updateTrigger}
+					>
+						Save
+					</Button>
+				{/if}
 			{/if}
 		</svelte:fragment>
-		<svelte:fragment slot="action">
-			{@render actions()}
-		</svelte:fragment>
-		{@render config()}
-	</Section>
-{/if}
-
-{#snippet actions()}
-	{#if !drawerLoading}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={drawerLoading || !can_write ? 'none' : 'create'}
-			{saveDisabled}
-			{enabled}
-			{allowDraft}
-			{edit}
-			isLoading={deploymentLoading}
-			{isDeployed}
-			onUpdate={updateTrigger}
-			{onReset}
-			{onDelete}
-			onToggleEnabled={handleToggleEnabled}
-			{cloudDisabled}
-		/>
-	{/if}
-{/snippet}
-
-{#snippet config()}
-	{#if drawerLoading}
-		{#if showLoading}
+		{#if drawerLoading}
 			<Loader2 class="animate-spin" />
-		{/if}
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#if description}
-				{@render description()}
-			{/if}
-			{#if !hideTooltips}
-				<Alert title="Info" type="info" size="xs">
-					{#if edit}
-						Changes can take up to 30 seconds to take effect.
-					{:else}
-						NATS consumers can take up to 30 seconds to start.
-					{/if}
-				</Alert>
-			{/if}
-		</div>
-		<div class="flex flex-col gap-12 mt-6">
-			<div class="flex flex-col gap-4">
-				<Label label="Path">
-					<Path
-						bind:dirty={dirtyPath}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						checkInitialPathExistence={!edit}
-						namePlaceholder="nats_trigger"
-						kind="nats_trigger"
-						disabled={!can_write}
-					/>
-				</Label>
-			</div>
-			{#if !hideTarget}
+		{:else}
+			<Alert title="Info" type="info">
+				{#if edit}
+					Changes can take up to 30 seconds to take effect.
+				{:else}
+					NATS consumers can take up to 30 seconds to start.
+				{/if}
+			</Alert>
+			<div class="flex flex-col gap-12 mt-6">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="nats_trigger"
+							kind="nats_trigger"
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
 						Pick a script or flow to be triggered<Required required={true} />
@@ -360,29 +243,19 @@
 								color="dark"
 								size="xs"
 								href={itemKind === 'flow' ? '/flows/add?hub=66' : '/scripts/add?hub=hub%2F19663'}
-								target="_blank"
+								target="_blank">Create from template</Button
 							>
-								Create from template
-							</Button>
 						{/if}
 					</div>
 				</Section>
-			{/if}
 
-			<NatsTriggersConfigSection
-				{path}
-				bind:natsResourcePath
-				bind:subjects
-				bind:useJetstream
-				bind:streamName
-				bind:consumerName
-				on:valid-config={({ detail }) => {
-					isValid = detail
-				}}
-				defaultValues={useDefaultValues() ? defaultValues : undefined}
-				{can_write}
-				showTestingBadge={isEditor}
-			/>
-		</div>
-	{/if}
-{/snippet}
+				<NatsTriggersConfigSection
+					{path}
+					bind:args
+					bind:isValid
+					defaultValues={useDefaultValues() ? defaultValues : undefined}
+				/>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte
index d925552ff0..0a00b449a1 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte
@@ -1,49 +1,135 @@
 <script lang="ts">
+	import { Boxes } from 'lucide-svelte'
 	import Section from '$lib/components/Section.svelte'
 	import Subsection from '$lib/components/Subsection.svelte'
 	import { workspaceStore } from '$lib/stores'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
+	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
-	import TestingBadge from '../testingBadge.svelte'
-	import { createEventDispatcher } from 'svelte'
+	export let defaultValues: Record<string, any> | undefined = undefined
+	export let headless: boolean = false
+	export let args: Record<string, any> = {}
+	export let staticInputDisabled: boolean = true
+	export let showCapture: boolean = false
+	export let captureInfo: CaptureInfo | undefined = undefined
+	export let captureTable: CaptureTable | undefined = undefined
+	export let isValid: boolean = false
+	export let path: string
+	let selected: 'resource' | 'static' = staticInputDisabled ? 'resource' : 'static'
 
-	interface Props {
-		defaultValues?: Record<string, any> | undefined
-		headless?: boolean
-		natsResourcePath: string
-		subjects: string[]
-		useJetstream: boolean
-		streamName: string
-		consumerName: string
-		path: string
-		can_write?: boolean
-		showTestingBadge?: boolean
+	const connnectionSchema = {
+		$schema: 'http://json-schema.org/draft-07/schema#',
+		type: 'object',
+		properties: {
+			servers: {
+				type: 'array',
+				items: {
+					type: 'string'
+				},
+				title: 'Servers',
+				default: ['']
+			},
+			require_tls: {
+				type: 'boolean',
+				title: 'Require TLS',
+				default: false
+			},
+			auth: {
+				type: 'object',
+				title: 'Authentication',
+				default: {
+					label: 'NO_AUTH'
+				},
+				oneOf: [
+					{
+						type: 'object',
+						title: 'NO_AUTH',
+						properties: {
+							label: {
+								enum: ['NO_AUTH'],
+								type: 'string'
+							}
+						}
+					},
+					{
+						type: 'object',
+						order: ['token'],
+						title: 'TOKEN',
+						required: ['token'],
+						properties: {
+							label: {
+								enum: ['TOKEN'],
+								type: 'string'
+							},
+							token: {
+								type: 'string',
+								password: true
+							}
+						}
+					},
+					{
+						type: 'object',
+						title: 'USER_PASSWORD',
+						required: ['user', 'password'],
+						properties: {
+							label: {
+								enum: ['USER_PASSWORD'],
+								type: 'string'
+							},
+							user: {
+								type: 'string'
+							},
+							password: {
+								type: 'string',
+								password: true
+							}
+						}
+					},
+					{
+						type: 'object',
+						order: ['nkey'],
+						title: 'NKEY',
+						required: ['nkey'],
+						properties: {
+							label: {
+								enum: ['NKEY'],
+								type: 'string'
+							},
+							seed: {
+								type: 'string',
+								password: true
+							}
+						}
+					},
+					{
+						type: 'object',
+						title: 'JWT',
+						required: ['jwt', 'seed'],
+						properties: {
+							label: {
+								enum: ['JWT'],
+								type: 'string'
+							},
+							jwt: {
+								type: 'string',
+								password: true
+							},
+							seed: {
+								type: 'string',
+								password: true
+							}
+						}
+					}
+				]
+			}
+		},
+		required: ['servers', 'auth', 'require_tls']
 	}
 
-	const dispatch = createEventDispatcher()
-
-	let {
-		defaultValues = undefined,
-		headless = false,
-		natsResourcePath = $bindable(),
-		subjects = $bindable(),
-		useJetstream = $bindable(),
-		streamName = $bindable(),
-		consumerName = $bindable(),
-		path,
-		can_write = true,
-		showTestingBadge = false
-	}: Props = $props()
-
-	let otherArgsValid = $state(false)
-	let globalError = $derived(
-		!useJetstream && subjects && subjects.length > 1
-			? 'Only one subject is supported if not using JetStream.'
-			: ''
-	)
-	let isConnectionValid = $derived(!!natsResourcePath)
-
 	const argsSchema = {
 		$schema: 'http://json-schema.org/draft-07/schema#',
 		type: 'object',
@@ -87,71 +173,116 @@
 		required: ['subjects', 'use_jetstream', 'stream_name', 'consumer_name']
 	}
 
-	$effect(() => {
-		const valid =
-			isConnectionValid &&
-			otherArgsValid &&
-			!!subjects &&
-			subjects.length > 0 &&
-			subjects.every((b) => /^[a-zA-Z0-9-_.*>]+$/.test(b)) &&
-			globalError === ''
-		dispatch('valid-config', valid)
-	})
+	let isStaticConnectionValid = false
+	let otherArgsValid = false
+	let globalError = ''
+
+	$: globalError =
+		!args.use_jetstream && args.subjects && args.subjects.length > 1
+			? 'Only one subject is supported if not using JetStream.'
+			: ''
+
+	$: isConnectionValid =
+		selected === 'resource'
+			? !!args.nats_resource_path
+			: isStaticConnectionValid &&
+				args.servers &&
+				args.servers.length > 0 &&
+				args.servers.every((b) => b.length > 0) &&
+				args.require_tls !== undefined &&
+				args.require_tls !== null
+
+	$: isValid =
+		isConnectionValid &&
+		otherArgsValid &&
+		args.subjects &&
+		args.subjects.length > 0 &&
+		args.subjects.every((b) => /^[a-zA-Z0-9-_.*>]+$/.test(b)) &&
+		globalError === ''
+
+	$: usingResource = !!args.nats_resource_path
+	$: usingResource && (selected = 'resource')
 
 	function setStreamAndConsumerNames() {
-		if (!streamName) {
-			streamName = `windmill_stream-${$workspaceStore}-${path.replaceAll('/', '__')}`
+		if (!args.stream_name) {
+			args.stream_name = `windmill_stream-${$workspaceStore}-${path.replaceAll('/', '__')}`
 		}
-		if (!consumerName) {
-			consumerName = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
-		}
-	}
-
-	function setNewArgs(args: Record<string, any>) {
-		subjects = args.subjects
-		useJetstream = args.use_jetstream
-		streamName = args.stream_name
-		consumerName = args.consumer_name
-		if (args.use_jetstream) {
-			setStreamAndConsumerNames()
-		}
-	}
-
-	function getNatsArgsCfg() {
-		return {
-			subjects,
-			use_jetstream: useJetstream,
-			stream_name: streamName,
-			consumer_name: consumerName
+		if (!args.consumer_name) {
+			args.consumer_name = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
 		}
 	}
+	$: useJetStream = args.use_jetstream
+	$: useJetStream && setStreamAndConsumerNames()
 </script>
 
 <div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			captureType="nats"
+			disabled={!isValid}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			bind:captureTable
+		/>
+	{/if}
 	<Section label="NATS" {headless}>
-		{#snippet badge()}
-			{#if showTestingBadge}
-				<TestingBadge />
-			{/if}
-		{/snippet}
 		<div class="flex flex-col w-full gap-4">
 			<div class="block grow w-full">
 				<Subsection label="Connection">
-					<ResourcePicker
-						resourceType="nats"
-						bind:value={natsResourcePath}
-						{defaultValues}
-						disabled={!can_write}
-					/>
-					{#if isConnectionValid}
-						<TestTriggerConnection
-							kind="nats"
-							args={{
-								connection: {
-									nats_resource_path: natsResourcePath
-								}
-							}}
+					<svelte:fragment slot="header">
+						{#if !staticInputDisabled}
+							<ToggleButtonGroup
+								bind:selected
+								class="h-full"
+								on:selected={(ev) => {
+									if (ev.detail === 'static') {
+										delete args.nats_resource_path
+										args.require_tls = false
+										args.servers = ['']
+										args.auth = {
+											label: 'NO_AUTH'
+										}
+									} else {
+										delete args.servers
+										delete args.auth
+										delete args.require_tls
+									}
+								}}
+								let:item
+							>
+								<ToggleButton value="static" label="Static" small={true} {item} />
+								<ToggleButton value="resource" label="Resource" icon={Boxes} small={true} {item} />
+							</ToggleButtonGroup>
+						{/if}
+					</svelte:fragment>
+
+					{#if selected === 'resource'}
+						<ResourcePicker
+							resourceType="nats"
+							bind:value={args.nats_resource_path}
+							{defaultValues}
 						/>
+					{:else}
+						<SchemaForm
+							schema={connnectionSchema}
+							bind:args={
+								() => args,
+								(v) => {
+									args = {
+										...args,
+										...v
+									}
+								}
+							}
+							bind:isValid={isStaticConnectionValid}
+							lightHeader={true}
+						/>
+					{/if}
+					{#if isConnectionValid}
+						<TestTriggerConnection kind="nats" args={{ connection: args }} />
 					{/if}
 				</Subsection>
 			</div>
@@ -160,10 +291,17 @@
 				<Subsection headless={true}>
 					<SchemaForm
 						schema={argsSchema}
-						bind:args={getNatsArgsCfg, (args) => setNewArgs(args)}
+						bind:args={
+							() => args,
+							(v) => {
+								args = {
+									...args,
+									...v
+								}
+							}
+						}
 						bind:isValid={otherArgsValid}
 						lightHeader={true}
-						disabled={!can_write}
 					/>
 				</Subsection>
 				<span class="text-xs text-red-500">{globalError}</span>
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggersPanel.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggersPanel.svelte
index 20bfe8d5dc..12cd385e3a 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggersPanel.svelte
@@ -1,69 +1,137 @@
 <script lang="ts">
-	import NatsTriggerEditorInner from './NatsTriggerEditorInner.svelte'
+	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
+	import { NatsTriggerService, type NatsTrigger } from '$lib/gen'
+	import { canWrite } from '$lib/utils'
+	import { getContext, onMount } from 'svelte'
+	import NatsTriggerEditor from './NatsTriggerEditor.svelte'
 	import { isCloudHosted } from '$lib/cloud'
-	import { Alert } from '$lib/components/common'
+	import Section from '$lib/components/Section.svelte'
+	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import Description from '$lib/components/Description.svelte'
-	import { onMount } from 'svelte'
-	import { enterpriseLicense } from '$lib/stores'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
 
-	let {
-		selectedTrigger,
-		isFlow,
-		path,
-		isDeployed = false,
-		defaultValues = undefined,
-		customLabel = undefined,
-		...props
-	} = $props()
-	let natsTriggerEditor: NatsTriggerEditorInner | undefined = $state(undefined)
+	export let isFlow: boolean
+	export let path: string
+	export let newItem: boolean = false
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
-	async function openNatsTriggerEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			natsTriggerEditor?.openNew(isFlow, path, defaultValues)
-		} else {
-			natsTriggerEditor?.openEdit(selectedTrigger.path, isFlow, selectedTrigger.draftConfig)
+	let natsTriggerEditor: NatsTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
+
+	$: path && loadTriggers()
+
+	const { triggersCount, selectedTrigger, defaultValues } =
+		getContext<TriggerContext>('TriggerContext')
+
+	onMount(() => {
+		if (
+			defaultValues &&
+			$selectedTrigger === 'nats' &&
+			Object.keys($defaultValues ?? {}).length > 0
+		) {
+			natsTriggerEditor.openNew(isFlow, path, $defaultValues)
+			defaultValues.set(undefined)
+		}
+	})
+
+	let natsTriggers: (NatsTrigger & { canWrite: boolean })[] | undefined = undefined
+	export async function loadTriggers() {
+		try {
+			natsTriggers = (
+				await NatsTriggerService.listNatsTriggers({
+					workspace: $workspaceStore ?? '',
+					path,
+					isFlow
+				})
+			).map((x) => {
+				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
+			})
+			$triggersCount = { ...($triggersCount ?? {}), nats_count: natsTriggers?.length }
+			openForm = natsTriggers?.length === 0 || dontCloseOnLoad
+		} catch (e) {
+			console.error('impossible to load nats triggers', e)
 		}
 	}
 
-	onMount(() => {
-		natsTriggerEditor && openNatsTriggerEditor(isFlow, selectedTrigger.isDraft ?? false)
-	})
+	let data = {
+		natsTriggers: [],
+		newItem
+	}
 
-	const cloudDisabled = $derived(isCloudHosted())
+	function saveTrigger(path: string, args?: Record<string, any>) {
+		natsTriggerEditor?.openNew(isFlow, path, args)
+	}
 </script>
 
+<NatsTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={natsTriggerEditor}
+/>
+
 {#if !$enterpriseLicense}
 	<Alert title="EE Only" type="warning" size="xs">
-		NATS triggers are an enterprise only feature.
+		Nats triggers are an enterprise only feature.
+	</Alert>
+{:else if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		Nats triggers are disabled in the multi-tenant cloud.
 	</Alert>
 {:else}
 	<div class="flex flex-col gap-4">
-		<NatsTriggerEditorInner
-			bind:this={natsTriggerEditor}
-			useDrawer={false}
-			hideTarget
-			hideTooltips={!isDeployed}
-			useEditButton
-			allowDraft={true}
-			hasDraft={!!selectedTrigger.draftConfig}
-			isDraftOnly={selectedTrigger.isDraft}
-			{customLabel}
-			{isDeployed}
-			{cloudDisabled}
-			{...props}
-		>
-			{#snippet description()}
-				{#if cloudDisabled}
-					<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-						NATS triggers are disabled in the multi-tenant cloud.
-					</Alert>
-				{:else}
-					<Description link="https://www.windmill.dev/docs/core_concepts/nats_triggers">
-						NATS triggers allow you to execute scripts and flows in response to NATS messages. They
-						can be configured to listen to specific subjects and to use JetStream or not.
-					</Description>
-				{/if}
-			{/snippet}
-		</NatsTriggerEditorInner>
+		<Description link="https://www.windmill.dev/docs/core_concepts/nats_triggers">
+			NATS triggers execute scripts and flows in response to messages published to NATS subjects.
+		</Description>
+
+		{#if !newItem && natsTriggers && natsTriggers.length > 0}
+			<Section label="NATS Triggers">
+				<div class="flex flex-col divide-y pt-2">
+					{#each natsTriggers as natsTrigger (natsTrigger.path)}
+						<div class="grid grid-cols-5 text-2xs items-center py-2">
+							<div class="col-span-2 truncate">{natsTrigger.path}</div>
+							<div class="col-span-2 truncate">
+								{natsTrigger.nats_resource_path}
+							</div>
+							<div class="flex justify-end">
+								<button
+									on:click={() => natsTriggerEditor?.openEdit(natsTrigger.path, isFlow)}
+									class="px-2"
+								>
+									{#if natsTrigger.canWrite}
+										Edit
+									{:else}
+										View
+									{/if}
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</Section>
+		{/if}
+
+		<TriggersEditorSection
+			on:saveTrigger={(e) => {
+				saveTrigger(path, e.detail.config)
+			}}
+			on:applyArgs
+			on:addPreprocessor
+			cloudDisabled={false}
+			triggerType="nats"
+			{isFlow}
+			{data}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
+		/>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/triggers/nats/utils.ts b/frontend/src/lib/components/triggers/nats/utils.ts
deleted file mode 100644
index 926956314c..0000000000
--- a/frontend/src/lib/components/triggers/nats/utils.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { NatsTriggerService } from '$lib/gen'
-import { sendUserToast } from '$lib/toast'
-import { get, type Writable } from 'svelte/store'
-
-export async function saveNatsTriggerFromCfg(
-	initialPath: string,
-	cfg: Record<string, any>,
-	edit: boolean,
-	workspace: string,
-	usedTriggerKinds: Writable<string[]>
-): Promise<boolean> {
-	const requestBody = {
-		path: cfg.path,
-		script_path: cfg.script_path,
-		is_flow: cfg.is_flow,
-		nats_resource_path: cfg.nats_resource_path,
-		stream_name: cfg.stream_name,
-		consumer_name: cfg.consumer_name,
-		subjects: cfg.subjects,
-		use_jetstream: cfg.use_jetstream
-	}
-	try {
-		if (edit) {
-			await NatsTriggerService.updateNatsTrigger({
-				workspace,
-				path: initialPath,
-				requestBody
-			})
-			sendUserToast(`Nats trigger ${cfg.path} updated`)
-		} else {
-			await NatsTriggerService.createNatsTrigger({
-				workspace,
-				requestBody: {
-					...requestBody,
-					enabled: true
-				}
-			})
-			sendUserToast(`Nats trigger ${cfg.path} created`)
-		}
-		if (!get(usedTriggerKinds).includes('nats')) {
-			usedTriggerKinds.update((t) => [...t, 'nats'])
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
-}
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresCapture.svelte b/frontend/src/lib/components/triggers/postgres/PostgresCapture.svelte
deleted file mode 100644
index 6e1238d7df..0000000000
--- a/frontend/src/lib/components/triggers/postgres/PostgresCapture.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition'
-	import type { CaptureInfo } from '../CaptureSection.svelte'
-	import CaptureSection from '../CaptureSection.svelte'
-
-	interface Props {
-		captureInfo?: CaptureInfo | undefined
-		postgres_resource_path?: string
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		captureLoading?: boolean
-		triggerDeployed?: boolean
-	}
-
-	let {
-		captureInfo = undefined,
-		postgres_resource_path = '',
-		hasPreprocessor = false,
-		isFlow = false,
-		captureLoading = false,
-		triggerDeployed = false
-	}: Props = $props()
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="postgres"
-		disabled={!postgres_resource_path}
-		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-		{captureLoading}
-		displayAlert={triggerDeployed}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listening to Postgres database transactions...
-					</p>
-				{:else}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to Postgres database...
-					</p>
-				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to Postgres database transactions.
-				</p>
-			{/if}
-		{/snippet}
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresEditorConfigSection.svelte b/frontend/src/lib/components/triggers/postgres/PostgresEditorConfigSection.svelte
new file mode 100644
index 0000000000..00018eca3c
--- /dev/null
+++ b/frontend/src/lib/components/triggers/postgres/PostgresEditorConfigSection.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
+	import Section from '$lib/components/Section.svelte'
+	import Label from '$lib/components/Label.svelte'
+	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
+	import TestTriggerConnection from '../TestTriggerConnection.svelte'
+	import Required from '$lib/components/Required.svelte'
+	import MultiSelect from 'svelte-multiselect'
+	import RelationPicker from './RelationPicker.svelte'
+	import type { PublicationData } from '$lib/gen'
+	import { emptyString } from '$lib/utils'
+	import CheckPostgresRequirement from './CheckPostgresRequirement.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { X } from 'lucide-svelte'
+	const DEFAULT_PUBLICATION: PublicationData = {
+		transaction_to_track: ['Insert', 'Update', 'Delete'],
+		table_to_track: [
+			{
+				schema_name: 'public',
+				table_to_track: []
+			}
+		]
+	}
+
+	let transactionType: string[] = ['Insert', 'Update', 'Delete']
+	let isValid: boolean = false
+
+	export let headless: boolean = false
+	export let can_write: boolean = false
+	export let showCapture: boolean = false
+	export let captureTable: CaptureTable | undefined = undefined
+	export let captureInfo: CaptureInfo | undefined = undefined
+	export let postgres_resource_path: string = ''
+	export let publication: PublicationData = DEFAULT_PUBLICATION
+
+	function updateValidity(publication: PublicationData) {
+		isValid =
+			!emptyString(postgres_resource_path) &&
+			(!publication.table_to_track || publication.table_to_track.length !== 0)
+	}
+
+	$: updateValidity(publication)
+
+	let testTriggerConnection: TestTriggerConnection | undefined = undefined
+</script>
+
+<div class="h-full">
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			disabled={!isValid}
+			on:captureToggle
+			captureType="postgres"
+			{captureInfo}
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+			bind:captureTable
+		/>
+	{/if}
+	<Section label="Postgres config" {headless}>
+		<div class="flex flex-col gap-4">
+			<div class="mb-2">
+				<p class="text-xs mb-1 text-tertiary">
+					Pick a database to connect to <Required required={true} />
+				</p>
+				<ResourcePicker
+					disabled={!can_write}
+					bind:value={postgres_resource_path}
+					resourceType={'postgresql'}
+					on:change={() => {
+						if (emptyString(postgres_resource_path)) {
+							publication = { ...DEFAULT_PUBLICATION }
+						}
+					}}
+				/>
+				{#if postgres_resource_path}
+					<TestTriggerConnection
+						kind="postgres"
+						args={{ postgres_resource_path }}
+						noButton
+						bind:this={testTriggerConnection}
+					/>
+					<CheckPostgresRequirement
+						bind:postgres_resource_path
+						bind:can_write
+						checkConnection={testTriggerConnection?.testTriggerConnection}
+					/>
+				{/if}
+			</div>
+			{#if postgres_resource_path}
+				<Label label="Transactions">
+					<svelte:fragment slot="header">
+						<Tooltip small>
+							Choose the types of database transactions that should trigger a script or flow. You
+							can select from <strong>Insert</strong>, <strong>Update</strong>,
+							<strong>Delete</strong>, or any combination of these operations to define when the
+							trigger should activate.
+						</Tooltip>
+					</svelte:fragment>
+					<MultiSelect
+						noMatchingOptionsMsg=""
+						createOptionMsg={null}
+						duplicates={false}
+						options={transactionType}
+						allowUserOptions="append"
+						bind:selected={publication.transaction_to_track}
+						ulOptionsClass={'!bg-surface !text-sm'}
+						ulSelectedClass="!text-sm"
+						outerDivClass="!bg-surface !min-h-[38px] !border-[#d1d5db]"
+						placeholder="Select transactions"
+						--sms-options-margin="4px"
+					>
+						<svelte:fragment slot="remove-icon">
+							<div class="hover:text-primary p-0.5">
+								<X size={12} />
+							</div>
+						</svelte:fragment>
+					</MultiSelect>
+				</Label>
+				<Label label="Table tracking">
+					<svelte:fragment slot="header">
+						<Tooltip
+							documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#define-what-to-track"
+							small
+						>
+							Select the tables to track. You can choose to track
+							<strong>all tables in your database</strong>,
+							<strong>all tables within a specific schema</strong>,
+							<strong>specific tables in a schema</strong>, or even
+							<strong>specific columns of a table</strong>. Additionally, you can apply a
+							<strong>filter</strong> to retrieve only rows that do not match the specified criteria.
+						</Tooltip>
+					</svelte:fragment>
+					<RelationPicker bind:relations={publication.table_to_track} />
+				</Label>
+			{/if}
+		</div>
+	</Section>
+</div>
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditor.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditor.svelte
index ac36f4ffc2..9b46ac2b0b 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditor.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditor.svelte
@@ -2,28 +2,22 @@
 	import { tick } from 'svelte'
 	import PostgresTriggerEditorInner from './PostgresTriggerEditorInner.svelte'
 
-	let { onUpdate } = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
 		drawer?.openEdit(ePath, isFlow)
 	}
 
-	export async function openNew(
-		is_flow: boolean,
-		initial_script_path?: string,
-		defaultValues?: Record<string, any>
-	) {
+	export async function openNew(is_flow: boolean, initial_script_path?: string, defaultValues?: Record<string, any>) {
 		open = true
 		await tick()
 		drawer?.openNew(is_flow, initial_script_path, defaultValues)
 	}
 
-	let drawer: PostgresTriggerEditorInner | undefined = $state()
+	let drawer: PostgresTriggerEditorInner
 </script>
 
 {#if open}
-	<PostgresTriggerEditorInner {onUpdate} bind:this={drawer} />
+	<PostgresTriggerEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
index 3c5253aa72..988152f00c 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
@@ -8,9 +8,11 @@
 	import { PostgresTriggerService, type Language, type Relations } from '$lib/gen'
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, emptyStringTrimmed, sendUserToast } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
-	import { Loader2, X } from 'lucide-svelte'
+	import { Loader2, Save, X } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
@@ -22,124 +24,38 @@
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import RelationPicker from './RelationPicker.svelte'
-	import { invalidRelations, savePostgresTriggerFromCfg } from './utils'
+	import { invalidRelations } from './utils'
 	import CheckPostgresRequirement from './CheckPostgresRequirement.svelte'
 	import { base } from '$lib/base'
-	import type { Snippet } from 'svelte'
-	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
-	import TestingBadge from '../testingBadge.svelte'
-	import { handleConfigChange } from '../utils'
-	import { fade } from 'svelte/transition'
 
-	interface Props {
-		useDrawer?: boolean
-		description?: Snippet | undefined
-		hideTarget?: boolean
-		isEditor?: boolean
-		hideTooltips?: boolean
-		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
-		isDeployed?: boolean
-		cloudDisabled?: boolean
-		customLabel?: Snippet
-		onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
-		onCaptureConfigChange?: (cfg: Record<string, any>, isValid: boolean) => void
-		onUpdate?: (path?: string) => void
-		onDelete?: () => void
-		onReset?: () => void
-	}
-
-	let {
-		useDrawer = true,
-		description = undefined,
-		hideTarget = false,
-		isEditor = false,
-		hideTooltips = false,
-		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
-		isDeployed = false,
-		cloudDisabled = false,
-		customLabel = undefined,
-		onConfigChange = undefined,
-		onCaptureConfigChange = undefined,
-		onUpdate = undefined,
-		onDelete = undefined,
-		onReset = undefined
-	}: Props = $props()
-
-	let drawer: Drawer | undefined = $state(undefined)
-	let is_flow: boolean = $state(false)
-	let initialPath = $state('')
-	let edit = $state(true)
-	let itemKind: 'flow' | 'script' = $state('script')
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let fixedScriptPath = $state('')
-	let path: string = $state('')
-	let pathError = $state('')
-	let enabled = $state(false)
-	let dirtyPath = $state(false)
-	let can_write = $state(true)
-	let drawerLoading = $state(true)
-	let showLoading = $state(false)
-	let postgres_resource_path = $state('')
-	let publication_name: string = $state('')
-	let replication_slot_name: string = $state('')
-	let relations: Relations[] | undefined = $state([])
-	let transaction_to_track: string[] = $state([])
+	let drawer: Drawer
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
+	let itemKind: 'flow' | 'script' = 'script'
+	let script_path = ''
+	let initialScriptPath = ''
+	let fixedScriptPath = ''
+	let path: string = ''
+	let pathError = ''
+	let enabled = false
+	let dirtyPath = false
+	let can_write = true
+	let drawerLoading = true
+	let postgres_resource_path = ''
+	let publication_name: string = ''
+	let replication_slot_name: string = ''
+	let relations: Relations[] | undefined = []
+	let transaction_to_track: string[] = []
 	let language: Language = 'Typescript'
-	let loading = $state(false)
+	let loading = false
 	type actions = 'create' | 'get'
-	let selectedPublicationAction: actions | undefined = $state(undefined)
-	let selectedSlotAction: actions | undefined = $state(undefined)
-	let publicationItems: string[] = $state([])
+	let selectedPublicationAction: actions
+	let selectedSlotAction: actions
+	let publicationItems: string[] = []
 	let transactionType: string[] = ['Insert', 'Update', 'Delete']
-	let tab: 'advanced' | 'basic' = $state('basic')
-	let initialConfig: Record<string, any> | undefined = undefined
-	let deploymentLoading = $state(false)
-
-	const errorMessage = $derived.by(() => {
-		if (relations && relations.length > 0) {
-			return invalidRelations(relations, {
-				showError: true,
-				trackSchemaTableError: true
-			})
-		}
-		return ''
-	})
-
-	const isValid = $derived(
-		!emptyString(postgres_resource_path) &&
-			!emptyString(script_path) &&
-			!emptyString(publication_name) &&
-			!emptyString(replication_slot_name) &&
-			!errorMessage
-	)
-	const postgresConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
-
-	function isAdvancedTab(t: 'advanced' | 'basic'): boolean {
-		return t === 'advanced'
-	}
-
-	function isBasicTab(t: 'advanced' | 'basic'): boolean {
-		return t === 'basic'
-	}
-
-	let saveDisabled = $derived(
-		pathError !== '' ||
-			emptyString(postgres_resource_path) ||
-			emptyString(script_path) ||
-			(isAdvancedTab(tab) && emptyString(replication_slot_name)) ||
-			emptyString(publication_name) ||
-			(relations && isBasicTab(tab) && relations.length === 0) ||
-			transaction_to_track.length === 0 ||
-			drawerLoading ||
-			!can_write
-	)
-
+	let tab: 'advanced' | 'basic' = 'basic'
+	let isLoading = false
 	async function createPublication() {
 		try {
 			const message = await PostgresTriggerService.createPostgresPublication({
@@ -173,18 +89,11 @@
 		}
 	}
 
-	$effect(() => {
-		is_flow = itemKind === 'flow'
-	})
+	const dispatch = createEventDispatcher()
 
-	export async function openEdit(
-		ePath: string,
-		isFlow: boolean,
-		defaultConfig?: Record<string, any>
-	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
+	$: is_flow = itemKind === 'flow'
+
+	export async function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -199,28 +108,19 @@
 			relations = []
 			transaction_to_track = []
 			tab = 'basic'
-			await loadTrigger(defaultConfig)
+			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load postgres trigger: ${err.body}`, true)
 		} finally {
-			if (!defaultConfig) {
-				initialConfig = structuredClone($state.snapshot(getSaveCfg()))
-			}
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
 	export async function openNew(
 		nis_flow: boolean,
 		fixedScriptPath_?: string,
-		defaultValues?: Record<string, any>,
-		newDraft?: boolean
+		defaultValues?: Record<string, any>
 	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
 		drawerLoading = true
 		try {
 			selectedPublicationAction = 'create'
@@ -230,127 +130,120 @@
 			drawer?.openDrawer()
 			is_flow = nis_flow
 			itemKind = nis_flow ? 'flow' : 'script'
-			initialScriptPath = defaultValues?.script_path ?? ''
+			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath
-			path = defaultValues?.path ?? ''
+			path = ''
 			initialPath = ''
 			postgres_resource_path = defaultValues?.postgres_resource_path ?? ''
 			edit = false
 			dirtyPath = false
-			publication_name = defaultValues?.publication_name ?? `windmill_publication_${random_adj()}`
-			replication_slot_name =
-				defaultValues?.replication_slot_name ?? `windmill_replication_${random_adj()}`
-			transaction_to_track = defaultValues?.publication?.transaction_to_track || [
+			publication_name = `windmill_publication_${random_adj()}`
+			replication_slot_name = `windmill_replication_${random_adj()}`
+			transaction_to_track = defaultValues?.publication.transaction_to_track || [
 				'Insert',
 				'Update',
 				'Delete'
 			]
-			relations = defaultValues?.publication?.table_to_track || [
+			relations = defaultValues?.publication.table_to_track || [
 				{
 					schema_name: 'public',
 					table_to_track: []
 				}
 			]
 		} finally {
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
-	function getSaveCfg(): Record<string, any> {
-		const cfg = {
-			script_path: script_path,
-			initialScriptPath: initialScriptPath,
-			is_flow: is_flow,
-			path: path,
-			postgres_resource_path: postgres_resource_path,
-			publication_name: edit || tab === 'advanced' ? publication_name : undefined,
-			replication_slot_name: edit || tab === 'advanced' ? replication_slot_name : undefined,
-			publication:
-				!edit || tab === 'basic'
-					? {
-							transaction_to_track: transaction_to_track,
-							table_to_track: relations
-						}
-					: undefined
-		}
-		return cfg
-	}
+	async function loadTrigger(): Promise<void> {
+		const s = await PostgresTriggerService.getPostgresTrigger({
+			workspace: $workspaceStore!,
+			path: initialPath
+		})
+		script_path = s.script_path
+		initialScriptPath = s.script_path
 
-	async function loadTriggerConfig(cfg?: Record<string, any>): Promise<void> {
-		script_path = cfg?.script_path
-		initialScriptPath = cfg?.script_path
-		is_flow = cfg?.is_flow
-		path = cfg?.path
-		enabled = cfg?.enabled
-		postgres_resource_path = cfg?.postgres_resource_path
-		publication_name = cfg?.publication_name
-		replication_slot_name = cfg?.replication_slot_name
-		can_write = canWrite(path, cfg?.extra_perms, $userStore)
-		transaction_to_track = [...cfg?.publication?.transaction_to_track]
-		relations = cfg?.publication?.table_to_track ?? []
-	}
+		is_flow = s.is_flow
+		path = s.path
+		enabled = s.enabled
+		postgres_resource_path = s.postgres_resource_path
+		publication_name = s.publication_name
+		replication_slot_name = s.replication_slot_name
 
-	async function loadTrigger(defaultConfig?: Record<string, any>): Promise<void> {
-		if (defaultConfig) {
-			loadTriggerConfig(defaultConfig)
-			if (defaultConfig?.publication) {
-				transaction_to_track = [...defaultConfig.publication.transaction_to_track]
-				relations = defaultConfig.publication.table_to_track ?? []
-			}
-			return
-		} else {
-			const s = await PostgresTriggerService.getPostgresTrigger({
-				workspace: $workspaceStore!,
-				path: initialPath
-			})
-
-			const publication_data = await PostgresTriggerService.getPostgresPublication({
-				path: s.postgres_resource_path,
-				workspace: $workspaceStore!,
-				publication: s.publication_name
-			})
-
-			loadTriggerConfig({ ...s, publication: publication_data })
-		}
-	}
-
-	function getCaptureConfig() {
-		return {
-			postgres_resource_path,
-			publication:
-				!edit || tab === 'basic'
-					? {
-							transaction_to_track: transaction_to_track,
-							table_to_track: relations
-						}
-					: undefined,
-			publication_name: edit || tab !== 'basic' ? publication_name : undefined,
-			replication_slot_name: edit || tab !== 'basic' ? replication_slot_name : undefined,
-			path
-		}
+		const publication_data = await PostgresTriggerService.getPostgresPublication({
+			path: postgres_resource_path,
+			workspace: $workspaceStore!,
+			publication: publication_name
+		})
+		transaction_to_track = [...publication_data.transaction_to_track]
+		relations = publication_data.table_to_track ?? []
+		can_write = canWrite(s.path, s.extra_perms, $userStore)
 	}
 
 	async function updateTrigger(): Promise<void> {
-		const cfg = postgresConfig
-		if (!cfg) {
+		if (
+			relations &&
+			invalidRelations(relations, {
+				showError: true,
+				trackSchemaTableError: true
+			}) === true
+		) {
 			return
 		}
-		deploymentLoading = true
-		const isSaved = await savePostgresTriggerFromCfg(
-			initialPath,
-			cfg,
-			edit,
-			$workspaceStore!,
-			usedTriggerKinds
-		)
-		if (isSaved) {
-			onUpdate?.(path)
-			drawer?.closeDrawer()
+		isLoading = true
+		try {
+			if (edit) {
+				await PostgresTriggerService.updatePostgresTrigger({
+					workspace: $workspaceStore!,
+					path: initialPath,
+					requestBody: {
+						path,
+						script_path,
+						is_flow,
+						postgres_resource_path,
+						enabled,
+						replication_slot_name,
+						publication_name,
+						publication:
+							tab === 'basic'
+								? {
+										transaction_to_track,
+										table_to_track: relations
+									}
+								: undefined
+					}
+				})
+				sendUserToast(`PostgresTrigger ${path} updated`)
+			} else {
+				await PostgresTriggerService.createPostgresTrigger({
+					workspace: $workspaceStore!,
+					requestBody: {
+						path,
+						script_path,
+						is_flow,
+						enabled: true,
+						postgres_resource_path,
+						replication_slot_name: tab === 'basic' ? undefined : replication_slot_name,
+						publication_name: tab === 'basic' ? undefined : publication_name,
+						publication: {
+							transaction_to_track,
+							table_to_track: relations
+						}
+					}
+				})
+				sendUserToast(`PostgresTrigger ${path} created`)
+			}
+			isLoading = false
+			if (!$usedTriggerKinds.includes('postgres')) {
+				$usedTriggerKinds = [...$usedTriggerKinds, 'postgres']
+			}
+			dispatch('update')
+			drawer.closeDrawer()
+		} catch (error) {
+			isLoading = false
+			sendUserToast(error.body || error.message, true)
 		}
-		deploymentLoading = false
 	}
 
 	const getTemplateScript = async () => {
@@ -375,115 +268,81 @@
 			sendUserToast(error.body, true)
 		}
 	}
-
-	async function handleToggleEnabled(toggleEnabled: boolean) {
-		enabled = toggleEnabled
-		if (!isDraftOnly && !hasDraft) {
-			await PostgresTriggerService.setPostgresTriggerEnabled({
-				path: initialPath,
-				workspace: $workspaceStore ?? '',
-				requestBody: { enabled: toggleEnabled }
-			})
-			sendUserToast(`${toggleEnabled ? 'enabled' : 'disabled'} postgres trigger ${initialPath}`)
-		}
-	}
-
-	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
-	})
-
-	$effect(() => {
-		if (!drawerLoading) {
-			handleConfigChange(postgresConfig, initialConfig, saveDisabled, edit, onConfigChange)
-		}
-	})
 </script>
 
-{#if useDrawer}
-	<Drawer size="800px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit Postgres trigger ${initialPath}`
-					: `Postgres trigger ${initialPath}`
-				: 'New Postgres trigger'}
-			on:close={drawer.closeDrawer}
-		>
-			<svelte:fragment slot="actions">{@render actions()}</svelte:fragment>
-			{@render content()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'Postgres trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit Postgres trigger ${initialPath}`
+				: `Postgres trigger ${initialPath}`
+			: 'New Postgres trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading && can_write}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								await PostgresTriggerService.setPostgresTriggerEnabled({
+									path: initialPath,
+									workspace: $workspaceStore ?? '',
+									requestBody: { enabled: e.detail }
+								})
+								sendUserToast(
+									`${e.detail ? 'enabled' : 'disabled'} postgres trigger ${initialPath}`
+								)
+							}}
+						/>
+					</div>
+				{/if}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' ||
+						emptyString(postgres_resource_path) ||
+						emptyString(script_path) ||
+						(tab === 'advanced' && emptyString(replication_slot_name)) ||
+						emptyString(publication_name) ||
+						(relations && tab === 'basic' && relations.length === 0) ||
+						transaction_to_track.length === 0 ||
+						!can_write}
+					on:click={updateTrigger}
+					loading={isLoading}
+				>
+					Save
+				</Button>
 			{/if}
 		</svelte:fragment>
-		<svelte:fragment slot="action">
-			{@render actions()}
-		</svelte:fragment>
-		{@render content()}
-	</Section>
-{/if}
-
-{#snippet actions()}
-	{#if !drawerLoading}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={drawerLoading || !can_write ? 'none' : 'create'}
-			{saveDisabled}
-			{allowDraft}
-			{edit}
-			isLoading={deploymentLoading}
-			{enabled}
-			{isDeployed}
-			onUpdate={updateTrigger}
-			{onReset}
-			{onDelete}
-			onToggleEnabled={handleToggleEnabled}
-			{cloudDisabled}
-		/>
-	{/if}
-{/snippet}
-
-{#snippet content()}
-	{#if drawerLoading}
-		{#if showLoading}
-			<Loader2 size="50" class="animate-spin" />
-			<p>Loading...</p>
-		{/if}
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#if description}
-				{@render description()}
-			{/if}
-			{#if !hideTooltips}
-				<Alert title="Info" type="info" size="xs">
-					{#if edit}
-						Changes can take up to 30 seconds to take effect.
-					{:else}
-						New postgres triggers can take up to 30 seconds to start listening.
-					{/if}
-				</Alert>
-			{/if}
-		</div>
-		<div class="flex flex-col gap-12 mt-6">
-			<Label label="Path">
-				<Path
-					bind:dirty={dirtyPath}
-					bind:error={pathError}
-					bind:path
-					{initialPath}
-					checkInitialPathExistence={!edit}
-					namePlaceholder="postgres_trigger"
-					kind="postgres_trigger"
-					disabled={!can_write}
-					disableEditing={!can_write}
-				/>
-			</Label>
-			{#if !hideTarget}
+		{#if drawerLoading}
+			<div class="flex flex-col items-center justify-center h-full w-full">
+				<Loader2 size="50" class="animate-spin" />
+				<p>Loading...</p>
+			</div>
+		{:else}
+			<Alert title="Info" type="info">
+				{#if edit}
+					Changes can take up to 30 seconds to take effect.
+				{:else}
+					New postgres triggers can take up to 30 seconds to start listening.
+				{/if}
+			</Alert>
+			<div class="flex flex-col gap-12 mt-6">
+				<Label label="Path">
+					<Path
+						bind:dirty={dirtyPath}
+						bind:error={pathError}
+						bind:path
+						{initialPath}
+						checkInitialPathExistence={!edit}
+						namePlaceholder="postgres_trigger"
+						kind="postgres_trigger"
+						disabled={!can_write}
+					/>
+				</Label>
 				<Section label="Runnable">
 					<p class="text-xs text-tertiary">
 						Pick a script or flow to be triggered <Required required={true} />
@@ -496,8 +355,7 @@
 							allowFlow={true}
 							bind:itemKind
 							bind:scriptPath={script_path}
-							allowRefresh={can_write}
-							allowEdit={!$userStore?.operator}
+							allowRefresh
 						/>
 
 						{#if emptyStringTrimmed(script_path) && is_flow === false}
@@ -522,239 +380,218 @@
 						{/if}
 					</div>
 				</Section>
-			{/if}
-			<Section label="Database">
-				<svelte:fragment slot="badge">
-					{#if isEditor}
-						<TestingBadge />
-					{/if}
-				</svelte:fragment>
-				<p class="text-xs text-tertiary mb-2">
-					Pick a database to connect to <Required required={true} />
-				</p>
-				<div class="flex flex-col gap-8">
-					<div class="flex flex-col gap-2">
-						<ResourcePicker
-							disabled={!can_write}
-							bind:value={postgres_resource_path}
-							resourceType={'postgresql'}
-						/>
-						<CheckPostgresRequirement bind:postgres_resource_path bind:can_write />
-					</div>
-
-					{#if postgres_resource_path}
-						<Label label="Transactions">
-							{#snippet header()}
-								<Tooltip>
-									<p>
-										Choose the types of database transactions that should trigger a script or flow.
-										You can select from <strong>Insert</strong>, <strong>Update</strong>,
-										<strong>Delete</strong>, or any combination of these operations to define when
-										the trigger should activate.
-									</p>
-								</Tooltip>
-							{/snippet}
-							<MultiSelect
-								noMatchingOptionsMsg=""
-								createOptionMsg={null}
-								duplicates={false}
-								options={transactionType}
-								allowUserOptions="append"
-								bind:selected={transaction_to_track}
-								ulOptionsClass={'!bg-surface !text-sm'}
-								ulSelectedClass="!text-sm"
-								outerDivClass="!bg-surface !min-h-[38px] !border-[#d1d5db]"
-								placeholder="Select transactions"
-								--sms-options-margin="4px"
-								--sms-open-z-index="100"
+				<Section label="Database">
+					<p class="text-xs text-tertiary mb-2">
+						Pick a database to connect to <Required required={true} />
+					</p>
+					<div class="flex flex-col gap-8">
+						<div class="flex flex-col gap-2">
+							<ResourcePicker
 								disabled={!can_write}
-							>
-								<!-- @migration-task: migrate this slot by hand, `remove-icon` is an invalid identifier -->
-								<svelte:fragment slot="remove-icon">
-									<div class="hover:text-primary p-0.5">
-										<X size={12} />
-									</div>
+								bind:value={postgres_resource_path}
+								resourceType={'postgresql'}
+							/>
+							<CheckPostgresRequirement bind:postgres_resource_path bind:can_write />
+						</div>
+
+						{#if postgres_resource_path}
+							<Label label="Transactions">
+								<svelte:fragment slot="header">
+									<Tooltip>
+										<p>
+											Choose the types of database transactions that should trigger a script or
+											flow. You can select from <strong>Insert</strong>, <strong>Update</strong>,
+											<strong>Delete</strong>, or any combination of these operations to define when
+											the trigger should activate.
+										</p>
+									</Tooltip>
 								</svelte:fragment>
-							</MultiSelect>
-						</Label>
-						<Label label="Table Tracking" headerClass="grow min-w-0">
-							{#snippet header()}
-								<Tooltip
-									documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#define-what-to-track"
+								<MultiSelect
+									noMatchingOptionsMsg=""
+									createOptionMsg={null}
+									duplicates={false}
+									options={transactionType}
+									allowUserOptions="append"
+									bind:selected={transaction_to_track}
+									ulOptionsClass={'!bg-surface !text-sm'}
+									ulSelectedClass="!text-sm"
+									outerDivClass="!bg-surface !min-h-[38px] !border-[#d1d5db]"
+									placeholder="Select transactions"
+									--sms-options-margin="4px"
+									--sms-open-z-index="100"
 								>
-									<p>
-										Select the tables to track. You can choose to track
-										<strong>all tables in your database</strong>,
-										<strong>all tables within a specific schema</strong>,
-										<strong>specific tables in a schema</strong>, or even
-										<strong>specific columns of a table</strong>. Additionally, you can apply a
-										<strong>filter</strong> to retrieve only rows that do not match the specified criteria.
-									</p>
-								</Tooltip>
-								{#if !emptyStringTrimmed(errorMessage)}
-									<p
-										class="text-red-500 text-xs truncate w-full whitespace-nowrap"
-										title={errorMessage}
-										transition:fade={{ duration: 100 }}
+									<svelte:fragment slot="remove-icon">
+										<div class="hover:text-primary p-0.5">
+											<X size={12} />
+										</div>
+									</svelte:fragment>
+								</MultiSelect>
+							</Label>
+							<Label label="Table Tracking">
+								<svelte:fragment slot="header">
+									<Tooltip
+										documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#define-what-to-track"
 									>
-										{errorMessage}
-									</p>
-								{/if}
-							{/snippet}
-							<Tabs bind:selected={tab}>
-								<Tab value="basic"
-									><div class="flex flex-row gap-1"
-										>Basic<Tooltip
-											documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#define-what-to-track"
-											><p
-												>Choose the <strong>relations</strong> to track without worrying about the
-												underlying mechanics of creating a
-												<strong>publication</strong>
-												or <strong>slot</strong>. This simplified option lets you focus only on the
-												data you want to monitor.</p
-											></Tooltip
-										></div
-									></Tab
-								>
-								<Tab value="advanced"
-									><div class="flex flex-row gap-1"
-										>Advanced<Tooltip
-											documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#advanced"
-											><p
-												>Select a specific <strong>publication</strong> from your database to track,
-												and manage it by <strong>creating</strong>,
-												<strong>updating</strong>, or <strong>deleting</strong>. For
-												<strong>slots</strong>, you can <strong>create</strong> or
-												<strong>delete</strong>
-												them. Both <strong>non-active slots</strong> and the
-												<strong>currently used slot</strong> by the trigger will be retrieved from your
-												database for management.</p
-											></Tooltip
-										></div
-									></Tab
-								>
-								<svelte:fragment slot="content">
-									<div class="mt-5 overflow-hidden bg-surface">
-										<TabContent value="basic">
-											<RelationPicker {can_write} bind:relations disabled={!can_write} />
-										</TabContent>
-										<TabContent value="advanced">
-											<div class="flex flex-col gap-6"
-												><Section
-													small
-													label="Replication slot"
-													tooltip="Choose and manage the slots for your trigger. You can create or delete slots. Both non-active slots and the currently used slot by the trigger (if any) will be retrieved from your database for management."
-													documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#managing-postgres-replication-slots"
-												>
-													<div class="flex flex-col gap-3">
-														<ToggleButtonGroup
-															bind:selected={selectedSlotAction}
-															on:selected={() => {
-																replication_slot_name = ''
-															}}
-															disabled={!can_write}
-														>
-															{#snippet children({ item })}
+										<p>
+											Select the tables to track. You can choose to track
+											<strong>all tables in your database</strong>,
+											<strong>all tables within a specific schema</strong>,
+											<strong>specific tables in a schema</strong>, or even
+											<strong>specific columns of a table</strong>. Additionally, you can apply a
+											<strong>filter</strong> to retrieve only rows that do not match the specified criteria.
+										</p>
+									</Tooltip>
+								</svelte:fragment>
+								<Tabs bind:selected={tab}>
+									<Tab value="basic"
+										><div class="flex flex-row gap-1"
+											>Basic<Tooltip
+												documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#define-what-to-track"
+												><p
+													>Choose the <strong>relations</strong> to track without worrying about the
+													underlying mechanics of creating a
+													<strong>publication</strong>
+													or <strong>slot</strong>. This simplified option lets you focus only on
+													the data you want to monitor.</p
+												></Tooltip
+											></div
+										></Tab
+									>
+									<Tab value="advanced"
+										><div class="flex flex-row gap-1"
+											>Advanced<Tooltip
+												documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#advanced"
+												><p
+													>Select a specific <strong>publication</strong> from your database to
+													track, and manage it by <strong>creating</strong>,
+													<strong>updating</strong>, or <strong>deleting</strong>. For
+													<strong>slots</strong>, you can <strong>create</strong> or
+													<strong>delete</strong>
+													them. Both <strong>non-active slots</strong> and the
+													<strong>currently used slot</strong> by the trigger will be retrieved from
+													your database for management.</p
+												></Tooltip
+											></div
+										></Tab
+									>
+									<svelte:fragment slot="content">
+										<div class="mt-5 overflow-hidden bg-surface">
+											<TabContent value="basic">
+												<RelationPicker {can_write} bind:relations />
+											</TabContent>
+											<TabContent value="advanced">
+												<div class="flex flex-col gap-6"
+													><Section
+														small
+														label="Replication slot"
+														tooltip="Choose and manage the slots for your trigger. You can create or delete slots. Both non-active slots and the currently used slot by the trigger (if any) will be retrieved from your database for management."
+														documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#managing-postgres-replication-slots"
+													>
+														<div class="flex flex-col gap-3">
+															<ToggleButtonGroup
+																bind:selected={selectedSlotAction}
+																on:selected={() => {
+																	replication_slot_name = ''
+																}}
+																disabled={!can_write}
+																let:item
+															>
 																<ToggleButton value="create" label="Create Slot" {item} />
 																<ToggleButton value="get" label="Get Slot" {item} />
-															{/snippet}
-														</ToggleButtonGroup>
-														{#if selectedSlotAction === 'create'}
-															<div class="flex gap-3">
-																<input
-																	type="text"
-																	bind:value={replication_slot_name}
-																	placeholder={'Choose a slot name'}
-																	disabled={!can_write}
+															</ToggleButtonGroup>
+															{#if selectedSlotAction === 'create'}
+																<div class="flex gap-3">
+																	<input
+																		type="text"
+																		bind:value={replication_slot_name}
+																		placeholder={'Choose a slot name'}
+																	/>
+																	<Button
+																		color="light"
+																		size="xs"
+																		variant="border"
+																		disabled={emptyStringTrimmed(replication_slot_name)}
+																		on:click={createSlot}>Create</Button
+																	>
+																</div>
+															{:else}
+																<SlotPicker
+																	bind:edit
+																	{postgres_resource_path}
+																	bind:replication_slot_name
 																/>
-																<Button
-																	color="light"
-																	size="xs"
-																	variant="border"
-																	disabled={emptyStringTrimmed(replication_slot_name) || !can_write}
-																	on:click={createSlot}>Create</Button
-																>
-															</div>
-														{:else}
-															<SlotPicker
-																bind:edit
-																{postgres_resource_path}
-																bind:replication_slot_name
+															{/if}
+														</div>
+													</Section>
+
+													<Section
+														small
+														label="Publication"
+														tooltip="Select and manage the publications for tracking data. You can create, update, or delete publications. Only existing publications in your database will be available for selection, giving you full control over what data is tracked."
+														documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#managing-postgres-publications"
+													>
+														<div class="flex flex-col gap-3">
+															<ToggleButtonGroup
+																selected={selectedPublicationAction}
 																disabled={!can_write}
-															/>
-														{/if}
-													</div>
-												</Section>
+																on:selected={({ detail }) => {
+																	selectedPublicationAction = detail
+																	if (selectedPublicationAction === 'create') {
+																		publication_name = `windmill_publication_${random_adj()}`
+																		relations = [{ schema_name: 'public', table_to_track: [] }]
+																		return
+																	}
 
-												<Section
-													small
-													label="Publication"
-													tooltip="Select and manage the publications for tracking data. You can create, update, or delete publications. Only existing publications in your database will be available for selection, giving you full control over what data is tracked."
-													documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#managing-postgres-publications"
-												>
-													<div class="flex flex-col gap-3">
-														<ToggleButtonGroup
-															selected={selectedPublicationAction}
-															disabled={!can_write}
-															on:selected={({ detail }) => {
-																selectedPublicationAction = detail
-																if (selectedPublicationAction === 'create') {
-																	publication_name = `windmill_publication_${random_adj()}`
-																	relations = [{ schema_name: 'public', table_to_track: [] }]
-																	return
-																}
-
-																publication_name = ''
-																relations = []
-																transaction_to_track = []
-															}}
-														>
-															{#snippet children({ item })}
+																	publication_name = ''
+																	relations = []
+																	transaction_to_track = []
+																}}
+																let:item
+															>
 																<ToggleButton value="create" label="Create Publication" {item} />
 																<ToggleButton value="get" label="Get Publication" {item} />
-															{/snippet}
-														</ToggleButtonGroup>
-														{#if selectedPublicationAction === 'create'}
-															<div class="flex gap-3">
-																<input
-																	disabled={!can_write}
-																	type="text"
-																	bind:value={publication_name}
-																	placeholder={'Publication Name'}
+															</ToggleButtonGroup>
+															{#if selectedPublicationAction === 'create'}
+																<div class="flex gap-3">
+																	<input
+																		disabled={!can_write}
+																		type="text"
+																		bind:value={publication_name}
+																		placeholder={'Publication Name'}
+																	/>
+																	<Button
+																		color="light"
+																		size="xs"
+																		variant="border"
+																		disabled={emptyStringTrimmed(publication_name) ||
+																			(relations && relations.length === 0) ||
+																			!can_write}
+																		on:click={createPublication}>Create</Button
+																	>
+																</div>
+															{:else}
+																<PublicationPicker
+																	{can_write}
+																	{postgres_resource_path}
+																	bind:transaction_to_track
+																	bind:relations
+																	bind:items={publicationItems}
+																	bind:publication_name
 																/>
-																<Button
-																	color="light"
-																	size="xs"
-																	variant="border"
-																	disabled={emptyStringTrimmed(publication_name) ||
-																		(relations && relations.length === 0) ||
-																		!can_write}
-																	on:click={createPublication}>Create</Button
-																>
-															</div>
-														{:else}
-															<PublicationPicker
-																{can_write}
-																{postgres_resource_path}
-																bind:transaction_to_track
-																bind:relations
-																bind:items={publicationItems}
-																bind:publication_name
-																disabled={!can_write}
-															/>
-														{/if}
-														<RelationPicker {can_write} bind:relations disabled={!can_write} />
-													</div>
-												</Section></div
-											>
-										</TabContent>
-									</div>
-								</svelte:fragment>
-							</Tabs>
-						</Label>
-					{/if}
-				</div>
-			</Section>
-		</div>
-	{/if}
-{/snippet}
+															{/if}
+															<RelationPicker {can_write} bind:relations />
+														</div>
+													</Section></div
+												>
+											</TabContent>
+										</div>
+									</svelte:fragment>
+								</Tabs>
+							</Label>
+						{/if}
+					</div>
+				</Section>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggersPanel.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggersPanel.svelte
index 0a007d6db0..cd707bb5d3 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggersPanel.svelte
@@ -1,67 +1,125 @@
 <script lang="ts">
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { PostgresTriggerService, type PostgresTrigger } from '$lib/gen'
+
+	import { canWrite, sendUserToast } from '$lib/utils'
+	import { getContext, onMount } from 'svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import { Alert } from '$lib/components/common'
-	import PostgresTriggerEditorInner from './PostgresTriggerEditorInner.svelte'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import PostgresTriggerEditor from './PostgresTriggerEditor.svelte'
 	import Description from '$lib/components/Description.svelte'
-	import { onMount } from 'svelte'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
+	import Section from '$lib/components/Section.svelte'
 
-	let {
-		isFlow,
-		path,
-		selectedTrigger,
-		isDeployed = false,
-		isEditor = false,
-		defaultValues = undefined,
-		newDraft = false,
-		customLabel = undefined,
-		...props
-	} = $props()
+	export let isFlow: boolean
+	export let path: string
+	export let newItem: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
+	export let isEditor: boolean = false
 
-	let postgresTriggerEditor: PostgresTriggerEditorInner | undefined = $state(undefined)
+	let postgresTriggerEditor: PostgresTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
-	async function openPostgresTriggerEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			postgresTriggerEditor?.openNew(isFlow, path, defaultValues, newDraft)
-		} else {
-			postgresTriggerEditor?.openEdit(selectedTrigger.path, isFlow, defaultValues)
-		}
-	}
+	$: path && loadTriggers()
+
+	const { triggersCount, selectedTrigger, defaultValues } =
+		getContext<TriggerContext>('TriggerContext')
 
 	onMount(() => {
-		postgresTriggerEditor && openPostgresTriggerEditor(isFlow, selectedTrigger.isDraft ?? false)
+		if (
+			defaultValues &&
+			$selectedTrigger === 'postgres' &&
+			Object.keys($defaultValues ?? {}).length > 0
+		) {
+			postgresTriggerEditor.openNew(isFlow, path, $defaultValues)
+			defaultValues.set(undefined)
+		}
 	})
 
-	const cloudDisabled = $derived(isCloudHosted())
+	let postgresTriggers: (PostgresTrigger & { canWrite: boolean })[] | undefined = undefined
+	export async function loadTriggers() {
+		try {
+			postgresTriggers = (
+				await PostgresTriggerService.listPostgresTriggers({
+					workspace: $workspaceStore ?? '',
+					path,
+					isFlow
+				})
+			).map((x) => {
+				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
+			})
+			$triggersCount = { ...($triggersCount ?? {}), postgres_count: postgresTriggers?.length }
+			openForm = postgresTriggers?.length === 0 || dontCloseOnLoad
+		} catch (err) {
+			sendUserToast(`Could not load postgres triggers ${err.body}`, true)
+		}
+	}
 </script>
 
-<div class="flex flex-col gap-4">
-	<PostgresTriggerEditorInner
-		bind:this={postgresTriggerEditor}
-		useDrawer={false}
-		hideTarget
-		hideTooltips={!isDeployed || cloudDisabled}
-		allowDraft={true}
-		hasDraft={!!selectedTrigger.draftConfig}
-		isDraftOnly={selectedTrigger.isDraft}
-		{isEditor}
-		{isDeployed}
-		{cloudDisabled}
-		{customLabel}
-		{...props}
-	>
-		{#snippet description()}
-			{#if cloudDisabled}
-				<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-					Postgres triggers are disabled in the multi-tenant cloud.
-				</Alert>
-			{:else}
-				<Description link="https://www.windmill.dev/docs/core_concepts/postgres_triggers">
-					Windmill can connect to a Postgres database and trigger runnables (scripts, flows) in
-					response to database transactions (INSERT, UPDATE, DELETE) on specified tables, schemas,
-					or the entire database. Listening is done using Postgres's logical replication streaming
-					protocol, ensuring efficient and low-latency triggering.
-				</Description>
-			{/if}
-		{/snippet}
-	</PostgresTriggerEditorInner>
-</div>
+<PostgresTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={postgresTriggerEditor}
+/>
+{#if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning">
+		Postgres triggers are disabled in the multi-tenant cloud.
+	</Alert>
+{:else}
+	<div class="flex flex-col gap-4">
+		<Description link="https://www.windmill.dev/docs/core_concepts/postgres_triggers">
+			Windmill can connect to a Postgres database and trigger runnables (scripts, flows) in response
+			to database transactions (INSERT, UPDATE, DELETE) on specified tables, schemas, or the entire
+			database. Listening is done using Postgres's logical replication streaming protocol, ensuring
+			efficient and low-latency triggering.
+		</Description>
+
+		{#if !newItem && postgresTriggers && postgresTriggers.length > 0}
+			<Section label="Postgres">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each postgresTriggers as postgresTriggers (postgresTriggers.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{postgresTriggers.path}</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => postgresTriggerEditor?.openEdit(postgresTriggers.path, isFlow)}
+										class="px-2"
+									>
+										{#if postgresTriggers.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+		<TriggersEditorSection
+			on:applyArgs
+			on:saveTrigger={(e) => {
+				postgresTriggerEditor?.openNew(isFlow, path, e.detail.config)
+			}}
+			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
+			cloudDisabled={false}
+			triggerType="postgres"
+			{isFlow}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+		/>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
index 840d9a6856..77b168a0f8 100644
--- a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
@@ -16,7 +16,6 @@
 	export let postgres_resource_path: string = ''
 	export let relations: Relations[] | undefined = undefined
 	export let transaction_to_track: string[] = []
-	export let disabled: boolean = false
 
 	async function listDatabasePublication() {
 		try {
@@ -85,17 +84,18 @@
 	listDatabasePublication()
 
 	let darkMode = false
+
 </script>
 
 <DarkModeObserver bind:darkMode />
 
 <div class="flex gap-1">
 	<Select
-		disabled={!can_write || disabled}
+		disabled={!can_write}
 		class="grow shrink max-w-full"
 		on:select={async (e) => {
 			publication_name = e.detail.value
-			await getAllRelations()
+		    await getAllRelations();
 		}}
 		on:clear={() => {
 			publication_name = ''
@@ -110,7 +110,7 @@
 		portal={false}
 	/>
 	<Button
-		disabled={!can_write || disabled}
+		disabled={!can_write}
 		variant="border"
 		color="light"
 		wrapperClasses="self-stretch"
@@ -122,14 +122,14 @@
 		color="light"
 		size="xs"
 		variant="border"
-		disabled={emptyString(publication_name) || !can_write || disabled}
+		disabled={emptyString(publication_name) || !can_write}
 		on:click={updatePublication}>Update</Button
 	>
 	<Button
 		color="light"
 		size="xs"
 		variant="border"
-		disabled={emptyString(publication_name) || !can_write || disabled}
+		disabled={emptyString(publication_name) || !can_write}
 		on:click={deletePublication}>Delete</Button
 	>
 </div>
diff --git a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
index b720cea4ae..42b1944720 100644
--- a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
@@ -13,7 +13,6 @@
 
 	export let relations: Relations[] | undefined = undefined
 	export let can_write: boolean = true
-	export let disabled: boolean = false
 	let selected: 'all' | 'specific' = relations && relations.length > 0 ? 'specific' : 'all'
 	let cached: Relations[] | undefined = relations
 
@@ -52,7 +51,6 @@
 				}}
 				bind:selected
 				let:item
-				{disabled}
 			>
 				<ToggleButton value="all" label="All Tables" {item} />
 				<ToggleButton value="specific" label="Specific Tables" {item} />
@@ -77,7 +75,7 @@
 								</Tooltip>
 							</svelte:fragment>
 
-							<input class="mt-1" type="text" bind:value={v.schema_name} {disabled} />
+							<input class="mt-1" type="text" bind:value={v.schema_name} />
 						</Label>
 						<div class="flex flex-col w-full gap-4 items-center p-5">
 							{#each v.table_to_track as table_to_track, j}
@@ -92,7 +90,6 @@
 											type="text"
 											bind:value={table_to_track.table_name}
 											class="!bg-surface mt-1"
-											{disabled}
 										/>
 									</Label>
 									<!-- svelte-ignore a11y-label-has-associated-control -->
@@ -131,7 +128,6 @@
 												selected={table_to_track.columns_name ?? []}
 												placeholder="Select columns"
 												--sms-options-margin="4px"
-												{disabled}
 												onchange={(e) => {
 													const option = e.option?.toString()
 													if (e.type === 'add') {
@@ -185,7 +181,6 @@
 											type="text"
 											bind:value={table_to_track.where_clause}
 											class="!bg-surface mt-1"
-											{disabled}
 										/>
 									</Label>
 									<Button
@@ -199,7 +194,6 @@
 										}}
 										iconOnly
 										startIcon={{ icon: Trash }}
-										{disabled}
 									/>
 								</div>
 							{/each}
@@ -208,14 +202,12 @@
 								on:add={({ detail }) => {
 									addTable(detail.name, i)
 								}}
-								{disabled}
 							>
 								<svelte:fragment slot="trigger">
 									<Button
 										wrapperClasses="w-full border border-dashed rounded-md"
 										color="light"
 										size="xs"
-										{disabled}
 										startIcon={{ icon: Plus }}
 										nonCaptureEvent
 									>
@@ -225,6 +217,7 @@
 							</AddPropertyFormV2>
 						</div>
 					</div>
+
 					<Button
 						variant="border"
 						color="light"
@@ -236,7 +229,6 @@
 								relations = relations.filter((_, index) => index !== i)
 							}
 						}}
-						{disabled}
 					>
 						<Trash size={14} />
 					</Button>
@@ -266,13 +258,12 @@
 							invalidRelations(appendedRelations, {
 								showError: true,
 								trackSchemaTableError: false
-							}) === ''
+							}) === false
 						) {
 							relations = appendedRelations
 						}
 					}
 				}}
-				{disabled}
 			>
 				<svelte:fragment slot="trigger">
 					<Button
@@ -280,7 +271,7 @@
 						color="light"
 						size="xs"
 						btnClasses="w-full"
-						disabled={!can_write || disabled}
+						disabled={!can_write}
 						startIcon={{ icon: Plus }}
 						nonCaptureEvent
 					>
diff --git a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
index 5265f18350..5150506c3f 100644
--- a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
@@ -12,7 +12,6 @@
 	export let edit: boolean
 	export let replication_slot_name: string = ''
 	export let postgres_resource_path: string = ''
-	export let disabled: boolean = false
 	let items: (string | undefined)[] = []
 	async function listDatabaseSlot() {
 		try {
@@ -85,7 +84,6 @@
 			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
 			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 		portal={false}
-		{disabled}
 	/>
 	<Button
 		variant="border"
@@ -94,13 +92,12 @@
 		on:click={listDatabaseSlot}
 		startIcon={{ icon: RefreshCw }}
 		iconOnly
-		{disabled}
 	/>
 	<Button
 		color="light"
 		size="xs"
 		variant="border"
-		disabled={emptyString(replication_slot_name) || disabled}
+		disabled={emptyString(replication_slot_name)}
 		on:click={deleteSlot}>Delete</Button
 	>
 </div>
diff --git a/frontend/src/lib/components/triggers/postgres/utils.ts b/frontend/src/lib/components/triggers/postgres/utils.ts
index 8122da726d..6b4e3e91b5 100644
--- a/frontend/src/lib/components/triggers/postgres/utils.ts
+++ b/frontend/src/lib/components/triggers/postgres/utils.ts
@@ -1,8 +1,6 @@
-import { PostgresTriggerService, type Relations } from '$lib/gen'
+import type { Relations } from '$lib/gen'
 import { sendUserToast } from '$lib/toast'
 import { emptyString } from '$lib/utils'
-import type { Writable } from 'svelte/store'
-import { get } from 'svelte/store'
 
 type RelationError = {
 	schemaIndex: number
@@ -20,9 +18,7 @@ export function invalidRelations(
 		trackSchemaTableError?: boolean
 		showError?: boolean
 	}
-): string {
-	let errorMessage: string = ''
-
+): boolean {
 	let error: RelationError = {
 		schemaIndex: -1,
 		tableIndex: -1,
@@ -86,6 +82,8 @@ export function invalidRelations(
 			error.trackAllTablesInSchema &&
 			error.trackSpecificColumnsInTable)
 	if ((options?.showError ?? false) && errorFound) {
+		let errorMessage: string = ''
+
 		if (error.schemaError) {
 			errorMessage = `Schema Error: Please enter a name for schema number ${error.schemaIndex}`
 		} else if (error.tableError) {
@@ -97,53 +95,8 @@ export function invalidRelations(
 			errorMessage =
 				'Configuration Error: Schema-level tracking and specific table tracking with column selection cannot be used together. Refer to the documentation for valid configurations.'
 		}
+		sendUserToast(errorMessage, true)
 	}
 
-	return errorMessage
-}
-
-export async function savePostgresTriggerFromCfg(
-	initialPath: string,
-	config: Record<string, any>,
-	edit: boolean,
-	workspace: string,
-	usedTriggerKinds: Writable<string[]>
-): Promise<boolean> {
-	try {
-		const requestBody = {
-			path: config.path,
-			script_path: config.script_path,
-			is_flow: config.is_flow,
-			postgres_resource_path: config.postgres_resource_path,
-			replication_slot_name: config.replication_slot_name,
-			publication_name: config.publication_name,
-			publication: config.publication,
-			enabled: config.enabled
-		}
-		if (edit) {
-			await PostgresTriggerService.updatePostgresTrigger({
-				workspace: workspace,
-				path: initialPath,
-				requestBody
-			})
-			sendUserToast(`PostgresTrigger ${config.path} updated`)
-		} else {
-			await PostgresTriggerService.createPostgresTrigger({
-				workspace: workspace,
-				requestBody: {
-					...requestBody,
-					enabled: true
-				}
-			})
-			sendUserToast(`PostgresTrigger ${config.path} created`)
-		}
-
-		if (!get(usedTriggerKinds).includes('postgres')) {
-			usedTriggerKinds.update((t) => [...t, 'postgres'])
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
+	return errorFound
 }
diff --git a/frontend/src/lib/components/triggers/schedules/ScheduleEditor.svelte b/frontend/src/lib/components/triggers/schedules/ScheduleEditor.svelte
index c75e215e79..f70e3a48cb 100644
--- a/frontend/src/lib/components/triggers/schedules/ScheduleEditor.svelte
+++ b/frontend/src/lib/components/triggers/schedules/ScheduleEditor.svelte
@@ -2,9 +2,7 @@
 	import { tick } from 'svelte'
 	import ScheduleEditorInner from './ScheduleEditorInner.svelte'
 
-	let { onUpdate }: { onUpdate?: (path?: string) => void } = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
@@ -18,12 +16,12 @@
 	) {
 		open = true
 		await tick()
-		drawer?.openNew(is_flow, initial_script_path, undefined, schedule_path)
+		drawer?.openNew(is_flow, initial_script_path, schedule_path)
 	}
 
-	let drawer: ScheduleEditorInner | undefined = $state()
+	let drawer: ScheduleEditorInner
 </script>
 
 {#if open}
-	<ScheduleEditorInner {onUpdate} bind:this={drawer} />
+	<ScheduleEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte b/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
index 91dc02c2b0..69fe6c77d4 100644
--- a/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
@@ -23,122 +23,77 @@
 	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, formatCron, sendUserToast, cronV1toV2 } from '$lib/utils'
 	import { base } from '$lib/base'
+	import { createEventDispatcher } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
 	import { List, Loader2, Save, AlertTriangle } from 'lucide-svelte'
 	import autosize from '$lib/autosize'
-	import TriggerEditorToolbar from '$lib/components/triggers/TriggerEditorToolbar.svelte'
-	import { saveScheduleFromCfg } from '$lib/components/flows/scheduleUtils'
 	import DateTimeInput from '$lib/components/DateTimeInput.svelte'
 	import FlowRetries from '$lib/components/flows/content/FlowRetries.svelte'
 	import Label from '$lib/components/Label.svelte'
 	import WorkerTagPicker from '$lib/components/WorkerTagPicker.svelte'
 	import { runScheduleNow } from '../scheduled/utils'
-	import { handleConfigChange } from '../utils'
-
-	let {
-		useDrawer = true,
-		hideTarget = false,
-		docDescription = undefined,
-		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
-		primary = false,
-		draftSchema = undefined,
-		customLabel = undefined,
-		isDeployed = false,
-		onUpdate = undefined,
-		onConfigChange = undefined,
-		onDelete = undefined,
-		onReset = undefined
-	} = $props()
 
 	let optionTabSelected: 'error_handler' | 'recovery_handler' | 'success_handler' | 'retries' =
-		$state('error_handler')
-	let is_flow: boolean = $state(false)
-	let initialPath = $state('')
-	let edit = $state(true)
-	let schedule: string = $state('0 0 12 * *')
-	let cronVersion: string = $state('v2')
-	let isLatestCron = $state(true)
-	let initialCronVersion: string = $state('v2')
+		'error_handler'
+
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
+	let schedule: string = '0 0 12 * *'
+	let cronVersion: string = 'v2'
+	let isLatestCron = true
+	let initialCronVersion: string = 'v2'
 	let initialSchedule: string
-	let timezone: string = $state(Intl.DateTimeFormat().resolvedOptions().timeZone)
-	let paused_until: string | undefined = $state(undefined)
-	let itemKind: 'flow' | 'script' = $state('script')
-	let errorHandleritemKind: 'flow' | 'script' = $state('script')
-	let wsErrorHandlerMuted: boolean = $state(false)
-	let errorHandlerPath: string | undefined = $state(undefined)
-	let errorHandlerCustomInitialPath: string | undefined = $state(undefined)
-	let errorHandlerSelected: 'custom' | 'slack' | 'teams' = $state('slack')
-	let errorHandlerExtraArgs: Record<string, any> = $state({})
-	let recoveryHandlerPath: string | undefined = $state(undefined)
-	let recoveryHandlerCustomInitialPath: string | undefined = $state(undefined)
-	let recoveryHandlerSelected: 'custom' | 'slack' | 'teams' = $state('slack')
-	let recoveryHandlerItemKind: 'flow' | 'script' = $state('script')
-	let recoveryHandlerExtraArgs: Record<string, any> = $state({})
-	let successHandlerPath: string | undefined = $state(undefined)
-	let successHandlerCustomInitialPath: string | undefined = $state(undefined)
-	let successHandlerSelected: 'custom' | 'slack' | 'teams' = $state('slack')
-	let successHandlerItemKind: 'flow' | 'script' = $state('script')
-	let successHandlerExtraArgs: Record<string, any> = $state({})
-	let failedTimes = $state(1)
-	let failedExact = $state(false)
-	let recoveredTimes = $state(1)
-	let retry: Retry | undefined = $state(undefined)
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let runnable: Script | Flow | undefined = $state()
-	let args: Record<string, any> = $state({})
-	let loading = $state(false)
-	let drawerLoading = $state(true)
-	let showLoading = $state(false)
-	let initialConfig: Record<string, any> | undefined = undefined
-	let extraPerms: Record<string, boolean> = $state({})
-	let can_write = $state(true)
-	let initNewPath = $state(false)
-	let path: string = $state('')
-	let enabled: boolean = $state(false)
-	let pathError = $state('')
-	let summary = $state('')
-	let description = $state('')
-	let no_flow_overlap = $state(false)
-	let tag: string | undefined = $state(undefined)
-	let validCRON = $state(true)
-	let isValid = $state(true)
-	let allowSchedule = $derived(isValid && validCRON && script_path != '')
-	let deploymentLoading = $state(false)
+	let timezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone
+	let paused_until: string | undefined = undefined
 
-	const saveDisabled = $derived(
-		!allowSchedule ||
-			pathError != '' ||
-			emptyString(script_path) ||
-			(errorHandlerSelected == 'slack' &&
-				!emptyString(errorHandlerPath) &&
-				emptyString(errorHandlerExtraArgs['channel'])) ||
-			!can_write
-	)
-	const scheduleCfg = $derived.by(getScheduleCfg)
+	let itemKind: 'flow' | 'script' = 'script'
+	let errorHandleritemKind: 'flow' | 'script' = 'script'
+	let wsErrorHandlerMuted: boolean = false
+	let errorHandlerPath: string | undefined = undefined
+	let errorHandlerCustomInitialPath: string | undefined = undefined
+	let errorHandlerSelected: 'custom' | 'slack' | 'teams' = 'slack'
+	let errorHandlerExtraArgs: Record<string, any> = {}
+	let recoveryHandlerPath: string | undefined = undefined
+	let recoveryHandlerCustomInitialPath: string | undefined = undefined
+	let recoveryHandlerSelected: 'custom' | 'slack' | 'teams' = 'slack'
+	let recoveryHandlerItemKind: 'flow' | 'script' = 'script'
+	let recoveryHandlerExtraArgs: Record<string, any> = {}
+	let successHandlerPath: string | undefined = undefined
+	let successHandlerCustomInitialPath: string | undefined = undefined
+	let successHandlerSelected: 'custom' | 'slack' | 'teams' = 'slack'
+	let successHandlerItemKind: 'flow' | 'script' = 'script'
+	let successHandlerExtraArgs: Record<string, any> = {}
+	let failedTimes = 1
+	let failedExact = false
+	let recoveredTimes = 1
+	let duplicate = false
+	let retry: Retry | undefined = undefined
 
-	export async function openEdit(ePath: string, isFlow: boolean, defaultCfg?: Record<string, any>) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
+	let script_path = ''
+	let initialScriptPath = ''
+
+	let runnable: Script | Flow | undefined
+	let args: Record<string, any> = {}
+
+	let loading = false
+
+	let drawerLoading = true
+	export function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
 			is_flow = isFlow
 			initialPath = ePath
 			itemKind = is_flow ? 'flow' : 'script'
-			path = defaultCfg?.path ?? ePath
-			await loadSchedule(defaultCfg)
+			if (path == ePath) {
+				loadSchedule()
+			} else {
+				path = ePath
+			}
 			edit = true
 		} finally {
-			if (!defaultCfg) {
-				initialConfig = structuredClone($state.snapshot(getScheduleCfg()))
-			}
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
@@ -192,7 +147,8 @@
 				successHandlerSelected = 'slack'
 				successHandlerExtraArgs = {}
 			}
-		} else {
+		}
+		else {
 			let defaultErrorHandlerMaybe = undefined
 			let defaultRecoveryHandlerMaybe = undefined
 			let defaultSuccessHandlerMaybe = undefined
@@ -265,12 +221,8 @@
 	export async function openNew(
 		nis_flow: boolean,
 		initial_script_path?: string,
-		defaultValues?: Schedule,
 		schedule_path?: string
 	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
 		drawerLoading = true
 		try {
 			let s: Schedule | undefined
@@ -279,9 +231,7 @@
 					workspace: $workspaceStore!,
 					path: schedule_path
 				})
-				initNewPath = true
-			} else if (defaultValues) {
-				s = defaultValues
+				duplicate = true
 			}
 			drawer?.openDrawer()
 			runnable = undefined
@@ -289,7 +239,7 @@
 			edit = false
 			itemKind = is_flow ? 'flow' : 'script'
 			initialScriptPath = initial_script_path ?? ''
-			path = initNewPath ? '' : (defaultValues?.path ?? initialScriptPath)
+			path = duplicate === true ? '' : initialScriptPath
 
 			initialPath = path
 			cronVersion = s?.cron_version ?? 'v2'
@@ -314,9 +264,7 @@
 
 			await setScheduleHandler(s)
 		} finally {
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
@@ -326,18 +274,28 @@
 		}
 	}
 
-	$effect(() => {
-		;(is_flow = itemKind == 'flow') && resetRetries()
-	})
+	$: (is_flow = itemKind == 'flow') && resetRetries()
+
+	let isValid = true
+
+	let path: string = ''
+	let enabled: boolean = false
+	let pathError = ''
+	let summary = ''
+	let description = ''
+	let no_flow_overlap = false
+	let tag: string | undefined = undefined
+
+	let validCRON = true
+	$: allowSchedule = isValid && validCRON && script_path != ''
 
 	// set isValid to true when a script/flow without any properties is selected
-	$effect(() => {
-		setDefaultValid(draftSchema ?? runnable?.schema)
-	})
+	$: runnable?.schema &&
+		runnable.schema.properties &&
+		Object.keys(runnable.schema.properties).length === 0 &&
+		(isValid = true)
 
-	function setDefaultValid(schema: Record<string, any> | undefined) {
-		isValid = schema?.properties && Object.keys(schema.properties).length === 0
-	}
+	const dispatch = createEventDispatcher()
 
 	async function loadScript(p: string | undefined): Promise<void> {
 		if (p) {
@@ -437,108 +395,129 @@
 		}
 	}
 
-	async function loadSchedule(defaultCfg?: Record<string, any>): Promise<void> {
-		if (!defaultCfg) {
-			try {
-				const s = await ScheduleService.getSchedule({
-					workspace: $workspaceStore!,
-					path: initialPath
-				})
-				await loadScheduleCfg(s)
-			} catch (err) {
-				sendUserToast(`Could not load schedule: ${err}`, true)
-			}
-		} else {
-			await loadScheduleCfg(defaultCfg)
-		}
-	}
-
-	async function loadScheduleCfg(cfg: Record<string, any>): Promise<void> {
+	let can_write = true
+	async function loadSchedule(): Promise<void> {
 		loading = true
+		try {
+			const s = await ScheduleService.getSchedule({
+				workspace: $workspaceStore!,
+				path: initialPath
+			})
+			is_flow = s.is_flow
+			cronVersion = s.cron_version ?? 'v2'
+			initialCronVersion = cronVersion
+			isLatestCron = cronVersion == 'v2'
+			enabled = s.enabled
+			schedule = s.schedule
+			initialSchedule = schedule
+			timezone = s.timezone
+			paused_until = s.paused_until
+			showPauseUntil = paused_until !== undefined
+			summary = s.summary ?? ''
+			description = s.description ?? ''
+			script_path = s.script_path ?? ''
+			args = s.args ?? {}
+			can_write = canWrite(s.path, s.extra_perms, $userStore)
+			tag = s.tag
 
-		cronVersion = cfg.cron_version ?? 'v2'
-		initialCronVersion = cronVersion
-		isLatestCron = cronVersion == 'v2'
-		enabled = cfg.enabled
-		schedule = cfg.schedule
-		initialSchedule = schedule
-		timezone = cfg.timezone
-		paused_until = cfg.paused_until
-		showPauseUntil = paused_until !== undefined
-		summary = cfg.summary ?? ''
-		description = cfg.description ?? ''
-		script_path = cfg.script_path ?? ''
-		await loadScript(script_path)
+			await loadScript(script_path)
 
-		is_flow = cfg.is_flow
-		no_flow_overlap = cfg.no_flow_overlap ?? false
-		wsErrorHandlerMuted = cfg.ws_error_handler_muted ?? false
-		retry = cfg.retry
-		if (cfg.on_failure) {
-			let splitted = cfg.on_failure.split('/')
-			errorHandleritemKind = splitted[0] as 'flow' | 'script'
-			errorHandlerPath = splitted.slice(1)?.join('/')
-			errorHandlerCustomInitialPath = errorHandlerPath
-			failedTimes = cfg.on_failure_times ?? 1
-			failedExact = cfg.on_failure_exact ?? false
-			errorHandlerExtraArgs = cfg.on_failure_extra_args ?? {}
-			errorHandlerSelected = getHandlerType('error', errorHandlerPath ?? '')
-		} else {
-			errorHandlerPath = undefined
-			errorHandleritemKind = 'script'
-			errorHandlerCustomInitialPath = undefined
-			errorHandlerExtraArgs = {}
-			failedExact = false
-			failedTimes = 1
-			errorHandlerSelected = 'slack'
+			no_flow_overlap = s.no_flow_overlap ?? false
+			wsErrorHandlerMuted = s.ws_error_handler_muted ?? false
+			retry = s.retry
+			await setScheduleHandler(s)
+		} catch (err) {
+			sendUserToast(`Could not load schedule: ${err}`, true)
 		}
-		if (cfg.on_recovery) {
-			let splitted = cfg.on_recovery.split('/')
-			recoveryHandlerItemKind = splitted[0] as 'flow' | 'script'
-			recoveryHandlerPath = splitted.slice(1)?.join('/')
-			recoveryHandlerCustomInitialPath = recoveryHandlerPath
-			recoveredTimes = cfg.on_recovery_times ?? 1
-			recoveryHandlerExtraArgs = cfg.on_recovery_extra_args ?? {}
-			recoveryHandlerSelected = getHandlerType('recovery', recoveryHandlerPath ?? '')
-		} else {
-			recoveryHandlerPath = undefined
-			recoveryHandlerItemKind = 'script'
-			recoveryHandlerCustomInitialPath = undefined
-			recoveredTimes = 1
-			recoveryHandlerSelected = 'slack'
-			recoveryHandlerExtraArgs = {}
-		}
-		if (cfg.on_success) {
-			let splitted = cfg.on_success.split('/')
-			successHandlerItemKind = splitted[0] as 'flow' | 'script'
-			successHandlerPath = splitted.slice(1)?.join('/')
-			successHandlerCustomInitialPath = successHandlerPath
-			successHandlerExtraArgs = cfg.on_success_extra_args ?? {}
-			successHandlerSelected = getHandlerType('success', successHandlerPath ?? '')
-		} else {
-			successHandlerPath = undefined
-			successHandlerItemKind = 'script'
-			successHandlerCustomInitialPath = undefined
-			successHandlerSelected = 'slack'
-			successHandlerExtraArgs = {}
-		}
-		args = cfg.args ?? {}
-		extraPerms = cfg.extra_perms ?? {}
-		can_write = canWrite(cfg.path, cfg.extra_perms, $userStore)
-		tag = cfg.tag
-
 		loading = false
 	}
 
 	async function scheduleScript(): Promise<void> {
-		const scheduleCfg = getScheduleCfg()
-		deploymentLoading = true
-		const isSaved = await saveScheduleFromCfg(scheduleCfg, edit, $workspaceStore!)
-		if (isSaved) {
-			onUpdate?.(scheduleCfg.path)
-			drawer?.closeDrawer()
+		if (errorHandlerPath !== undefined && isSlackHandler('error', errorHandlerPath)) {
+			errorHandlerExtraArgs['slack'] = '$res:f/slack_bot/bot_token'
+		} else {
+			errorHandlerExtraArgs['slack'] = undefined
 		}
-		deploymentLoading = false
+		if (recoveryHandlerPath !== undefined && isSlackHandler('recovery', recoveryHandlerPath)) {
+			recoveryHandlerExtraArgs['slack'] = '$res:f/slack_bot/bot_token'
+		} else {
+			recoveryHandlerExtraArgs['slack'] = undefined
+		}
+		if (successHandlerPath !== undefined && isSlackHandler('success', successHandlerPath)) {
+			successHandlerExtraArgs['slack'] = '$res:f/slack_bot/bot_token'
+		} else {
+			successHandlerExtraArgs['slack'] = undefined
+		}
+		if (edit) {
+			await ScheduleService.updateSchedule({
+				workspace: $workspaceStore!,
+				path: initialPath,
+				requestBody: {
+					schedule: formatCron(schedule),
+					timezone,
+					args,
+					on_failure: errorHandlerPath ? `${errorHandleritemKind}/${errorHandlerPath}` : undefined,
+					on_failure_times: failedTimes,
+					on_failure_exact: failedExact,
+					on_failure_extra_args: errorHandlerPath ? errorHandlerExtraArgs : undefined,
+					on_recovery: recoveryHandlerPath
+						? `${recoveryHandlerItemKind}/${recoveryHandlerPath}`
+						: undefined,
+					on_recovery_times: recoveredTimes,
+					on_recovery_extra_args: recoveryHandlerPath ? recoveryHandlerExtraArgs : {},
+					on_success: successHandlerPath
+						? `${successHandlerItemKind}/${successHandlerPath}`
+						: undefined,
+					on_success_extra_args: successHandlerPath ? successHandlerExtraArgs : {},
+					ws_error_handler_muted: wsErrorHandlerMuted,
+					retry: retry,
+					summary: summary != '' ? summary : undefined,
+					description: description,
+					no_flow_overlap: no_flow_overlap,
+					tag: tag,
+					paused_until: paused_until,
+					cron_version: cronVersion
+				}
+			})
+			sendUserToast(`Schedule ${path} updated`)
+		} else {
+			await ScheduleService.createSchedule({
+				workspace: $workspaceStore!,
+				requestBody: {
+					path,
+					schedule: formatCron(schedule),
+					timezone,
+					script_path,
+					is_flow,
+					args,
+					enabled: true,
+					on_failure: errorHandlerPath ? `${errorHandleritemKind}/${errorHandlerPath}` : undefined,
+					on_failure_times: failedTimes,
+					on_failure_exact: failedExact,
+					on_failure_extra_args: errorHandlerPath ? errorHandlerExtraArgs : undefined,
+					on_recovery: recoveryHandlerPath
+						? `${recoveryHandlerItemKind}/${recoveryHandlerPath}`
+						: undefined,
+					on_recovery_times: recoveredTimes,
+					on_recovery_extra_args: recoveryHandlerPath ? recoveryHandlerExtraArgs : {},
+					on_success: successHandlerPath
+						? `${successHandlerItemKind}/${successHandlerPath}`
+						: undefined,
+					on_success_extra_args: successHandlerPath ? successHandlerExtraArgs : {},
+					ws_error_handler_muted: wsErrorHandlerMuted,
+					retry: retry,
+					summary: summary != '' ? summary : undefined,
+					description: description,
+					no_flow_overlap: no_flow_overlap,
+					tag: tag,
+					paused_until: paused_until,
+					cron_version: cronVersion
+				}
+			})
+			sendUserToast(`Schedule ${path} created`)
+		}
+		dispatch('update')
+		drawer.closeDrawer()
 	}
 
 	function getHandlerType(
@@ -583,15 +562,21 @@
 		}
 	}
 
-	let drawer: Drawer | undefined = $state()
+	$: {
+		if ($workspaceStore) {
+			if (edit && path != '') {
+				loadSchedule()
+			}
+		}
+	}
 
-	let pathC: Path | undefined = $state()
-	let dirtyPath = $state(false)
+	let drawer: Drawer
 
-	let showPauseUntil = $state(false)
-	$effect(() => {
-		!showPauseUntil && (paused_until = undefined)
-	})
+	let pathC: Path
+	let dirtyPath = false
+
+	let showPauseUntil = false
+	$: !showPauseUntil && (paused_until = undefined)
 
 	function onVersionChange() {
 		cronVersion = isLatestCron ? 'v2' : 'v1'
@@ -607,99 +592,20 @@
 			schedule = initialSchedule
 		}
 	}
-
-	function getScheduleCfg(): Record<string, any> {
-		let errorHadlerExtraArgsDerived = structuredClone($state.snapshot(errorHandlerExtraArgs))
-		if (errorHandlerPath !== undefined && isSlackHandler('error', errorHandlerPath)) {
-			errorHadlerExtraArgsDerived['slack'] = '$res:f/slack_bot/bot_token'
-		} else {
-			errorHadlerExtraArgsDerived['slack'] = undefined
-		}
-
-		let recoveryHandlerExtraArgsDerived = structuredClone($state.snapshot(recoveryHandlerExtraArgs))
-		if (recoveryHandlerPath !== undefined && isSlackHandler('recovery', recoveryHandlerPath)) {
-			recoveryHandlerExtraArgsDerived['slack'] = '$res:f/slack_bot/bot_token'
-		} else {
-			recoveryHandlerExtraArgsDerived['slack'] = undefined
-		}
-
-		let successHandlerExtraArgsDerived = structuredClone($state.snapshot(successHandlerExtraArgs))
-		if (successHandlerPath !== undefined && isSlackHandler('success', successHandlerPath)) {
-			successHandlerExtraArgsDerived['slack'] = '$res:f/slack_bot/bot_token'
-		} else {
-			successHandlerExtraArgsDerived['slack'] = undefined
-		}
-		return {
-			path: path,
-			schedule: formatCron(schedule),
-			timezone: timezone,
-			script_path: script_path,
-			is_flow: is_flow,
-			args: args,
-			enabled: enabled,
-			on_failure: errorHandlerPath ? `${errorHandleritemKind}/${errorHandlerPath}` : undefined,
-			on_failure_times: failedTimes,
-			on_failure_exact: failedExact,
-			on_failure_extra_args: errorHandlerPath ? errorHadlerExtraArgsDerived : undefined,
-			on_recovery: recoveryHandlerPath
-				? `${recoveryHandlerItemKind}/${recoveryHandlerPath}`
-				: undefined,
-			on_recovery_times: recoveredTimes,
-			on_recovery_extra_args: recoveryHandlerPath ? recoveryHandlerExtraArgsDerived : {},
-			on_success: successHandlerPath
-				? `${successHandlerItemKind}/${successHandlerPath}`
-				: undefined,
-			on_success_extra_args: successHandlerPath ? successHandlerExtraArgsDerived : {},
-			ws_error_handler_muted: wsErrorHandlerMuted,
-			retry: retry,
-			summary: summary != '' ? summary : undefined,
-			description: description,
-			no_flow_overlap: no_flow_overlap,
-			tag: tag,
-			paused_until: paused_until,
-			cron_version: cronVersion,
-			extra_perms: extraPerms
-		}
-	}
-
-	async function handleToggleEnabled(nEnabled: boolean) {
-		enabled = nEnabled
-		if (!isDraftOnly && !hasDraft) {
-			await ScheduleService.setScheduleEnabled({
-				path: initialPath,
-				workspace: $workspaceStore ?? '',
-				requestBody: { enabled: nEnabled }
-			})
-			sendUserToast(`${nEnabled ? 'enabled' : 'disabled'} schedule ${initialPath}`)
-		}
-	}
-
-	$effect(() => {
-		if (!drawerLoading) {
-			handleConfigChange(scheduleCfg, initialConfig, saveDisabled, edit, onConfigChange)
-		}
-	})
 </script>
 
-{#snippet saveButton()}
-	{#if !drawerLoading}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={drawerLoading || !can_write ? 'none' : 'create'}
-			{saveDisabled}
-			{enabled}
-			{allowDraft}
-			{edit}
-			isLoading={deploymentLoading}
-			onUpdate={scheduleScript}
-			{onReset}
-			{onDelete}
-			onToggleEnabled={handleToggleEnabled}
-			{isDeployed}
-		>
-			{#snippet extra()}
-				{#if !drawerLoading && edit}
+<Drawer size="900px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit schedule ${initialPath}`
+				: `View schedule ${initialPath}`
+			: 'New schedule'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading}
+				{#if edit}
 					<div class="mr-8 flex flex-row gap-3">
 						<Button
 							size="sm"
@@ -721,153 +627,174 @@
 							Run now
 						</Button>
 					</div>
-				{/if}
-			{/snippet}
-		</TriggerEditorToolbar>
-	{/if}
-{/snippet}
-
-{#snippet content()}
-	{#if drawerLoading}
-		{#if showLoading}
-			<Loader2 class="animate-spin" />
-		{/if}
-	{:else}
-		<div class="flex flex-col gap-12">
-			<div class="flex flex-col gap-4">
-				<div>
-					<h2 class="text-base font-semibold mb-2">Metadata</h2>
-					<Label label="Summary">
-						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							placeholder="Short summary to be displayed when listed"
-							class="text-sm w-full"
-							bind:value={summary}
-							disabled={!can_write}
-							onkeyup={() => {
-								if (!edit && summary?.length > 0 && !dirtyPath) {
-									pathC?.setName(
-										summary
-											.toLowerCase()
-											.replace(/[^a-z0-9_]/g, '_')
-											.replace(/-+/g, '_')
-											.replace(/^-|-$/g, '')
-									)
-								}
-							}}
-						/>
-					</Label>
-				</div>
-				<Label label="Path">
-					{#if !edit && !primary}
-						<Path
-							bind:dirty={dirtyPath}
-							bind:this={pathC}
-							checkInitialPathExistence
-							bind:error={pathError}
-							bind:path
-							{initialPath}
-							namePlaceholder="schedule"
-							kind="schedule"
-							disableEditing={!can_write}
-						/>
-					{:else}
-						<div class="flex justify-start w-full">
-							<Badge
-								color="gray"
-								class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
-							>
-								Schedule path (not editable)
-							</Badge>
-							<input
-								type="text"
-								readonly
-								value={path}
-								size={path?.length || 50}
-								class="font-mono !text-xs grow shrink overflow-x-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-								onfocus={({ currentTarget }) => {
-									currentTarget.select()
+					{#if can_write}
+						<div class="mr-8 center-center -mt-1">
+							<Toggle
+								disabled={!can_write}
+								checked={enabled}
+								options={{ right: 'Enabled' }}
+								on:change={async (e) => {
+									await ScheduleService.setScheduleEnabled({
+										path: initialPath,
+										workspace: $workspaceStore ?? '',
+										requestBody: { enabled: e.detail }
+									})
+									dispatch('update')
+									sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${initialPath}`)
 								}}
 							/>
-							<!-- <span class="font-mono text-sm break-all">{path}</span> -->
 						</div>
 					{/if}
-				</Label>
-
-				<Label label="Description">
-					<textarea
-						rows="4"
-						use:autosize
-						bind:value={description}
-						placeholder="What this schedule does and how to use it"
-						disabled={!can_write}
-					></textarea>
-				</Label>
-			</div>
-
-			<Section label="Schedule">
-				{#snippet header()}
-					{#if cronVersion === 'v1'}
-						<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
-					{:else}
-						<Tooltip
-							>Schedules use <a
-								href="https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax"
-								>extended CRON syntax</a
-							>.</Tooltip
-						>
-					{/if}
-				{/snippet}
-				{#if initialCronVersion !== 'v2'}
-					<div class="flex flex-row">
-						<AlertTriangle color="orange" class="mr-2" size={16} />
-						<Toggle
-							options={{
-								right: 'enable latest Cron syntax',
-								rightTooltip:
-									'The latest Cron syntax is more flexible and allows for more complex schedules. See the documentation for more information.',
-								rightDocumentationLink:
-									'https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax'
-							}}
-							size="xs"
-							bind:checked={isLatestCron}
-							on:change={onVersionChange}
-							disabled={!can_write}
-						/>
+				{/if}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={!allowSchedule ||
+						pathError != '' ||
+						emptyString(script_path) ||
+						(errorHandlerSelected == 'slack' &&
+							!emptyString(errorHandlerPath) &&
+							emptyString(errorHandlerExtraArgs['channel'])) ||
+						!can_write}
+					on:click={scheduleScript}
+				>
+					{edit ? 'Save' : 'Schedule'}
+				</Button>
+			{/if}
+		</svelte:fragment>
+		{#if drawerLoading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<div class="flex flex-col gap-12">
+				<div class="flex flex-col gap-4">
+					<div>
+						<h2 class="text-base font-semibold mb-2">Metadata</h2>
+						<Label label="Summary">
+							<!-- svelte-ignore a11y-autofocus -->
+							<input
+								autofocus
+								type="text"
+								placeholder="Short summary to be displayed when listed"
+								class="text-sm w-full"
+								bind:value={summary}
+								disabled={!can_write}
+								on:keyup={() => {
+									if (!edit && summary?.length > 0 && !dirtyPath) {
+										pathC?.setName(
+											summary
+												.toLowerCase()
+												.replace(/[^a-z0-9_]/g, '_')
+												.replace(/-+/g, '_')
+												.replace(/^-|-$/g, '')
+										)
+									}
+								}}
+							/>
+						</Label>
 					</div>
-				{/if}
-				<CronInput
-					disabled={!can_write}
-					bind:schedule
-					bind:timezone
-					bind:validCRON
-					bind:cronVersion
-				/>
-				<Toggle
-					options={{
-						right: 'Pause schedule until...',
-						rightTooltip:
-							'Pausing the schedule will program the next job to run as if the schedule starts at the time the pause is lifted, instead of now.'
-					}}
-					bind:checked={showPauseUntil}
-					size="xs"
-					disabled={!can_write}
-				/>
-				{#if showPauseUntil}
-					<DateTimeInput bind:value={paused_until} />
-				{/if}
-			</Section>
+					<Label label="Path">
+						{#if !edit}
+							<Path
+								bind:dirty={dirtyPath}
+								bind:this={pathC}
+								checkInitialPathExistence
+								bind:error={pathError}
+								bind:path
+								{initialPath}
+								namePlaceholder="schedule"
+								kind="schedule"
+							/>
+						{:else}
+							<div class="flex justify-start w-full">
+								<Badge
+									color="gray"
+									class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
+								>
+									Schedule path (not editable)
+								</Badge>
+								<input
+									type="text"
+									readonly
+									value={path}
+									size={path?.length || 50}
+									class="font-mono !text-xs grow shrink overflow-x-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+									on:focus={({ currentTarget }) => {
+										currentTarget.select()
+									}}
+								/>
+								<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+							</div>
+						{/if}
+					</Label>
 
-			<Section label="Runnable">
-				{#if !hideTarget}
+					<Label label="Description">
+						<textarea
+							rows="4"
+							use:autosize
+							bind:value={description}
+							placeholder="What this schedule does and how to use it"
+						></textarea>
+					</Label>
+				</div>
+
+				<Section label="Schedule">
+					<svelte:fragment slot="header">
+						{#if cronVersion === 'v1'}
+							<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
+						{:else}
+							<Tooltip
+								>Schedules use <a
+									href="https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax"
+									>extended CRON syntax</a
+								>.</Tooltip
+							>
+						{/if}
+					</svelte:fragment>
+					{#if initialCronVersion !== 'v2'}
+						<div class="flex flex-row">
+							<AlertTriangle color="orange" class="mr-2" size={16} />
+							<Toggle
+								options={{
+									right: 'enable latest Cron syntax',
+									rightTooltip:
+										'The latest Cron syntax is more flexible and allows for more complex schedules. See the documentation for more information.',
+									rightDocumentationLink:
+										'https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax'
+								}}
+								size="xs"
+								bind:checked={isLatestCron}
+								on:change={onVersionChange}
+								disabled={!can_write}
+							/>
+						</div>
+					{/if}
+					<CronInput
+						disabled={!can_write}
+						bind:schedule
+						bind:timezone
+						bind:validCRON
+						bind:cronVersion
+					/>
+					<Toggle
+						options={{
+							right: 'Pause schedule until...',
+							rightTooltip:
+								'Pausing the schedule will program the next job to run as if the schedule starts at the time the pause is lifted, instead of now.'
+						}}
+						bind:checked={showPauseUntil}
+						size="xs"
+						disabled={!can_write}
+					/>
+					{#if showPauseUntil}
+						<DateTimeInput bind:value={paused_until} />
+					{/if}
+				</Section>
+				<Section label="Runnable">
 					{#if !edit}
 						<p class="text-xs mb-1 text-tertiary">
 							Pick a script or flow to be triggered by the schedule<Required required={true} />
 						</p>
 						<ScriptPicker
-							disabled={(initialScriptPath != '' && !initNewPath) || !can_write}
+							disabled={(initialScriptPath != '' && !duplicate) || !can_write}
 							initialPath={initialScriptPath}
 							kinds={['script']}
 							allowFlow={true}
@@ -909,381 +836,349 @@
 							>
 						</div>
 					{/if}
-				{/if}
-				<div class={!hideTarget ? 'mt-6' : ''}>
-					{#if !loading}
-						{#if runnable || draftSchema}
-							{@const schema = draftSchema ?? runnable?.schema}
-							{#if schema && schema.properties && Object.keys(schema.properties).length > 0}
-								{#await import('$lib/components/SchemaForm.svelte')}
-									<Loader2 class="animate-spin" />
-								{:then Module}
-									<Module.default
-										showReset
-										disabled={!can_write}
-										schema={$state.snapshot(schema)}
-										bind:isValid
-										bind:args
-									/>
-								{/await}
+					<div class="mt-6">
+						{#if !loading}
+							{#if runnable}
+								{#if runnable?.schema && runnable.schema.properties && Object.keys(runnable.schema.properties).length > 0}
+									{#await import('$lib/components/SchemaForm.svelte')}
+										<Loader2 class="animate-spin" />
+									{:then Module}
+										<Module.default
+											showReset
+											disabled={!can_write}
+											schema={runnable.schema}
+											bind:isValid
+											bind:args
+										/>
+									{/await}
+								{:else}
+									<div class="text-xs texg-gray-700">
+										This {is_flow ? 'flow' : 'script'} takes no argument
+									</div>
+								{/if}
+							{:else if script_path != ''}
+								<div class="text-xs texg-gray-700 my-2">
+									You cannot see the the {is_flow ? 'flow' : 'script'} input form as you do not have
+									access to it.
+								</div>
 							{:else}
-								<div class="text-xs texg-gray-700">
-									This {is_flow ? 'flow' : 'script'} takes no argument
+								<div class="text-xs texg-gray-700 my-2">
+									Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
 								</div>
 							{/if}
-						{:else if script_path != ''}
-							<div class="text-xs texg-gray-700 my-2">
-								You cannot see the the {is_flow ? 'flow' : 'script'} input form as you do not have access
-								to it.
-							</div>
 						{:else}
-							<div class="text-xs texg-gray-700 my-2">
-								Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
-							</div>
+							<Loader2 class="animate-spin" />
+						{/if}
+					</div>
+				</Section>
+
+				<div class="flex flex-col gap-2">
+					{#if !loading}
+						<Tabs bind:selected={optionTabSelected}>
+							<Tab value="error_handler">Error Handler</Tab>
+							<Tab value="recovery_handler">Recovery Handler</Tab>
+							<Tab value="success_handler">Success Handler</Tab>
+							{#if itemKind === 'script'}
+								<Tab value="retries">Retries</Tab>
+								<Tab value="tag">Custom tag</Tab>
+							{/if}
+						</Tabs>
+						<div class="pt-0.5"></div>
+						{#if optionTabSelected === 'error_handler'}
+							<Section label="Error handler">
+								<svelte:fragment slot="header">
+									<div class="flex flex-row gap-2">
+										{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span
+											>{/if}
+									</div>
+								</svelte:fragment>
+								<svelte:fragment slot="action">
+									<div class="flex flex-row items-center gap-1 text-2xs text-tertiary">
+										defaults
+										<Dropdown
+											disabled={!can_write}
+											items={[
+												{
+													displayName: `Override future schedules only`,
+													action: () => saveAsDefaultErrorHandler(false)
+												},
+												{
+													displayName: 'Override all existing',
+													type: 'delete',
+													action: () => saveAsDefaultErrorHandler(true)
+												}
+											]}
+										>
+											<svelte:fragment>
+												<Save size={12} class="mr-1" />
+												Set as default
+											</svelte:fragment>
+										</Dropdown>
+									</div>
+								</svelte:fragment>
+								<div class="flex flex-row py-2">
+									<Toggle
+										size="xs"
+										disabled={!can_write || !$enterpriseLicense}
+										bind:checked={wsErrorHandlerMuted}
+										options={{ right: 'Mute workspace error handler for this schedule' }}
+									/>
+								</div>
+
+								<ErrorOrRecoveryHandler
+									isEditable={can_write}
+									errorOrRecovery="error"
+									showScriptHelpText={true}
+									bind:handlerSelected={errorHandlerSelected}
+									bind:handlerPath={errorHandlerPath}
+									customInitialScriptPath={errorHandlerCustomInitialPath}
+									toggleText="Alert channel on error"
+									customScriptTemplate="/scripts/add?hub=hub%2F9081%2Fwindmill%2Fschedule_error_handler_template"
+									bind:customHandlerKind={errorHandleritemKind}
+									bind:handlerExtraArgs={errorHandlerExtraArgs}
+								>
+									<svelte:fragment slot="custom-tab-tooltip">
+										<Tooltip>
+											<div class="flex gap-20 items-start mt-3">
+												<div class="text-sm"
+													>The following args will be passed to the error handler:
+													<ul class="mt-1 ml-2">
+														<li><b>path</b>: The path of the script or flow that failed.</li>
+														<li><b>is_flow</b>: Whether the runnable is a flow.</li>
+														<li><b>schedule_path</b>: The path of the schedule.</li>
+														<li><b>error</b>: The error details.</li>
+														<li
+															><b>failed_times</b>: Minimum number of times the schedule failed
+															before calling the error handler.</li
+														>
+														<li
+															><b>started_at</b>: The start datetime of the latest job that failed.</li
+														>
+													</ul>
+												</div>
+											</div>
+										</Tooltip>
+									</svelte:fragment>
+								</ErrorOrRecoveryHandler>
+								<div class="flex flex-row items-center justify-between">
+									<div class="flex flex-row items-center mt-4 font-semibold text-sm gap-2">
+										<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}>
+											Triggered when schedule failed</p
+										>
+										<select
+											class="!w-14"
+											bind:value={failedExact}
+											disabled={!$enterpriseLicense || emptyString(errorHandlerPath)}
+										>
+											<option value={false}>&gt;=</option>
+											<option value={true}>==</option>
+										</select>
+										<input
+											type="number"
+											class="!w-14 text-center {emptyString(errorHandlerPath)
+												? 'text-tertiary'
+												: ''}"
+											bind:value={failedTimes}
+											disabled={!$enterpriseLicense}
+											min="1"
+										/>
+										<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}
+											>time{failedTimes > 1 ? 's in a row' : ''}</p
+										>
+									</div>
+								</div>
+							</Section>
+						{:else if optionTabSelected === 'recovery_handler'}
+							{@const disabled = !can_write || emptyString($enterpriseLicense)}
+							<Section label="Recovery handler">
+								<svelte:fragment slot="header">
+									<div class="flex flex-row gap-2">
+										{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span
+											>{/if}
+									</div>
+								</svelte:fragment>
+								<svelte:fragment slot="action">
+									<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
+										defaults
+										<Dropdown
+											{disabled}
+											items={[
+												{
+													displayName: `Override future schedules only`,
+													action: () => saveAsDefaultRecoveryHandler(false)
+												},
+												{
+													displayName: 'Override all existing',
+													type: 'delete',
+													action: () => saveAsDefaultRecoveryHandler(true)
+												}
+											]}
+										>
+											<svelte:fragment>
+												<Save size={12} class="mr-1" />
+												Set as default
+											</svelte:fragment>
+										</Dropdown>
+									</div>
+								</svelte:fragment>
+								<ErrorOrRecoveryHandler
+									isEditable={!disabled}
+									errorOrRecovery="recovery"
+									bind:handlerSelected={recoveryHandlerSelected}
+									bind:handlerPath={recoveryHandlerPath}
+									customInitialScriptPath={recoveryHandlerCustomInitialPath}
+									toggleText="Alert channel when error recovered"
+									customScriptTemplate="/scripts/add?hub=hub%2F9082%2Fwindmill%2Fschedule_recovery_handler_template"
+									bind:customHandlerKind={recoveryHandlerItemKind}
+									bind:handlerExtraArgs={recoveryHandlerExtraArgs}
+								>
+									<svelte:fragment slot="custom-tab-tooltip">
+										<Tooltip>
+											<div class="flex gap-20 items-start mt-3">
+												<div class=" text-sm"
+													>The following args will be passed to the recovery handler:
+													<ul class="mt-1 ml-2">
+														<li><b>path</b>: The path of the script or flow that recovered.</li>
+														<li><b>is_flow</b>: Whether the runnable is a flow.</li>
+														<li><b>schedule_path</b>: The path of the schedule.</li>
+														<li><b>error</b>: The error of the last job that errored</li>
+														<li
+															><b>error_started_at</b>: The start datetime of the last job that
+															errored</li
+														>
+														<li
+															><b>success_times</b>: The number of times the schedule succeeded
+															before calling the recovery handler.</li
+														>
+														<li><b>success_result</b>: The result of the latest successful job</li>
+														<li
+															><b>success_started_at</b>: The start datetime of the latest
+															successful job</li
+														>
+													</ul>
+												</div>
+											</div>
+										</Tooltip>
+									</svelte:fragment>
+								</ErrorOrRecoveryHandler>
+								<div class="flex flex-row items-center justify-between">
+									<div
+										class="flex flex-row items-center mt-5 font-semibold text-sm {emptyString(
+											recoveryHandlerPath
+										)
+											? 'text-tertiary'
+											: ''}"
+									>
+										<p>Triggered when schedule recovered</p>
+										<input
+											type="number"
+											class="!w-14 mx-2 text-center"
+											bind:value={recoveredTimes}
+											min="1"
+											{disabled}
+										/>
+										<p>time{recoveredTimes > 1 ? 's in a row' : ''}</p>
+									</div>
+								</div>
+							</Section>
+						{:else if optionTabSelected === 'success_handler'}
+							{@const disabled = !can_write || emptyString($enterpriseLicense)}
+							<Section label="Success handler">
+								<svelte:fragment slot="header">
+									<div class="flex flex-row gap-2">
+										{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span
+											>{/if}
+									</div>
+								</svelte:fragment>
+								<svelte:fragment slot="action">
+									<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
+										defaults
+										<Dropdown
+											{disabled}
+											items={[
+												{
+													displayName: `Override future schedules only`,
+													action: () => saveAsDefaultSuccessHandler(false)
+												},
+												{
+													displayName: 'Override all existing',
+													type: 'delete',
+													action: () => saveAsDefaultSuccessHandler(true)
+												}
+											]}
+										>
+											<svelte:fragment>
+												<Save size={12} class="mr-1" />
+												Set as default
+											</svelte:fragment>
+										</Dropdown>
+									</div>
+								</svelte:fragment>
+								<ErrorOrRecoveryHandler
+									isEditable={!disabled}
+									errorOrRecovery="success"
+									bind:handlerSelected={successHandlerSelected}
+									bind:handlerPath={successHandlerPath}
+									customInitialScriptPath={successHandlerCustomInitialPath}
+									toggleText="Alert channel when successful"
+									customScriptTemplate="/scripts/add?hub=hub%2F9071%2Fwindmill%2Fschedule_success_handler_template"
+									bind:customHandlerKind={successHandlerItemKind}
+									bind:handlerExtraArgs={successHandlerExtraArgs}
+								>
+									<svelte:fragment slot="custom-tab-tooltip">
+										<Tooltip>
+											<div class="flex gap-20 items-start mt-3">
+												<div class=" text-sm"
+													>The following args will be passed to the success handler:
+													<ul class="mt-1 ml-2">
+														<li><b>path</b>: The path of the script or flow that succeeded.</li>
+														<li><b>is_flow</b>: Whether the runnable is a flow.</li>
+														<li><b>schedule_path</b>: The path of the schedule.</li>
+														<li><b>success_result</b>: The result of the successful job</li>
+														<li
+															><b>success_started_at</b>: The start datetime of the successful job</li
+														>
+													</ul>
+												</div>
+											</div>
+										</Tooltip>
+									</svelte:fragment>
+								</ErrorOrRecoveryHandler>
+							</Section>
+						{:else if optionTabSelected === 'retries'}
+							{@const disabled = !can_write || emptyString($enterpriseLicense)}
+							<Section label="Retries">
+								<svelte:fragment slot="header">
+									<div class="flex flex-row gap-2">
+										{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span
+											>{/if}
+									</div>
+									<Tooltip>
+										If defined, upon error this schedule will be retried with a delay and a maximum
+										number of attempts as defined below.
+										<br />
+										This is only available for individual script. For flows, retries can be set on each
+										flow step in the flow editor.
+									</Tooltip>
+								</svelte:fragment>
+								<FlowRetries
+									bind:flowModuleRetry={retry}
+									disabled={itemKind !== 'script' || disabled}
+								/>
+							</Section>
+						{:else if optionTabSelected === 'tag'}
+							<Section
+								label="Custom script tag"
+								tooltip="When set, the script tag will be overridden by this tag"
+							>
+								<WorkerTagPicker bind:tag popupPlacement="top-end" disabled={!can_write} />
+							</Section>
 						{/if}
 					{:else}
 						<Loader2 class="animate-spin" />
 					{/if}
 				</div>
-			</Section>
-
-			<Section label="Advanced" collapsable>
-				{@render errorHandler()}
-			</Section>
-		</div>
-	{/if}
-{/snippet}
-
-{#snippet errorHandler()}
-	<div class="flex flex-col gap-2">
-		{#if !loading}
-			<Tabs bind:selected={optionTabSelected}>
-				<Tab value="error_handler">Error Handler</Tab>
-				<Tab value="recovery_handler">Recovery Handler</Tab>
-				<Tab value="success_handler">Success Handler</Tab>
-				{#if itemKind === 'script'}
-					<Tab value="retries">Retries</Tab>
-					<Tab value="tag">Custom tag</Tab>
-				{/if}
-			</Tabs>
-			<div class="pt-0.5"></div>
-			{#if optionTabSelected === 'error_handler'}
-				<Section label="Error handler">
-					{#snippet header()}
-						<div class="flex flex-row gap-2">
-							{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-						</div>
-					{/snippet}
-					{#snippet action()}
-						<div class="flex flex-row items-center gap-1 text-2xs text-tertiary">
-							defaults
-							<Dropdown
-								disabled={!can_write}
-								items={[
-									{
-										displayName: `Override future schedules only`,
-										action: () => saveAsDefaultErrorHandler(false)
-									},
-									{
-										displayName: 'Override all existing',
-										type: 'delete',
-										action: () => saveAsDefaultErrorHandler(true)
-									}
-								]}
-							>
-								{#snippet children()}
-									<Save size={12} class="mr-1" />
-									Set as default
-								{/snippet}
-							</Dropdown>
-						</div>
-					{/snippet}
-					<div class="flex flex-row py-2">
-						<Toggle
-							size="xs"
-							disabled={!can_write || !$enterpriseLicense}
-							bind:checked={wsErrorHandlerMuted}
-							options={{ right: 'Mute workspace error handler for this schedule' }}
-						/>
-					</div>
-
-					<ErrorOrRecoveryHandler
-						isEditable={can_write}
-						errorOrRecovery="error"
-						showScriptHelpText={true}
-						bind:handlerSelected={errorHandlerSelected}
-						bind:handlerPath={errorHandlerPath}
-						customInitialScriptPath={errorHandlerCustomInitialPath}
-						toggleText="Alert channel on error"
-						customScriptTemplate="/scripts/add?hub=hub%2F9081%2Fwindmill%2Fschedule_error_handler_template"
-						bind:customHandlerKind={errorHandleritemKind}
-						bind:handlerExtraArgs={errorHandlerExtraArgs}
-					>
-						<!-- @migration-task: migrate this slot by hand, `custom-tab-tooltip` is an invalid identifier -->
-						<svelte:fragment slot="custom-tab-tooltip">
-							<Tooltip>
-								<div class="flex gap-20 items-start mt-3">
-									<div class="text-sm"
-										>The following args will be passed to the error handler:
-										<ul class="mt-1 ml-2">
-											<li><b>path</b>: The path of the script or flow that failed.</li>
-											<li><b>is_flow</b>: Whether the runnable is a flow.</li>
-											<li><b>schedule_path</b>: The path of the schedule.</li>
-											<li><b>error</b>: The error details.</li>
-											<li
-												><b>failed_times</b>: Minimum number of times the schedule failed before
-												calling the error handler.</li
-											>
-											<li><b>started_at</b>: The start datetime of the latest job that failed.</li>
-										</ul>
-									</div>
-								</div>
-							</Tooltip>
-						</svelte:fragment>
-					</ErrorOrRecoveryHandler>
-					<div class="flex flex-row items-center justify-between">
-						<div class="flex flex-row items-center mt-4 font-semibold text-sm gap-2">
-							<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}>
-								Triggered when schedule failed</p
-							>
-							<select
-								class="!w-14"
-								bind:value={failedExact}
-								disabled={!$enterpriseLicense || emptyString(errorHandlerPath)}
-							>
-								<option value={false}>&gt;=</option>
-								<option value={true}>==</option>
-							</select>
-							<input
-								type="number"
-								class="!w-14 text-center {emptyString(errorHandlerPath) ? 'text-tertiary' : ''}"
-								bind:value={failedTimes}
-								disabled={!$enterpriseLicense}
-								min="1"
-							/>
-							<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}
-								>time{failedTimes > 1 ? 's in a row' : ''}</p
-							>
-						</div>
-					</div>
-				</Section>
-			{:else if optionTabSelected === 'recovery_handler'}
-				{@const disabled = !can_write || emptyString($enterpriseLicense)}
-				<Section label="Recovery handler">
-					{#snippet header()}
-						<div class="flex flex-row gap-2">
-							{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-						</div>
-					{/snippet}
-					{#snippet action()}
-						<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
-							defaults
-							<Dropdown
-								{disabled}
-								items={[
-									{
-										displayName: `Override future schedules only`,
-										action: () => saveAsDefaultRecoveryHandler(false)
-									},
-									{
-										displayName: 'Override all existing',
-										type: 'delete',
-										action: () => saveAsDefaultRecoveryHandler(true)
-									}
-								]}
-							>
-								{#snippet children()}
-									<Save size={12} class="mr-1" />
-									Set as default
-								{/snippet}
-							</Dropdown>
-						</div>
-					{/snippet}
-					<ErrorOrRecoveryHandler
-						isEditable={!disabled}
-						errorOrRecovery="recovery"
-						bind:handlerSelected={recoveryHandlerSelected}
-						bind:handlerPath={recoveryHandlerPath}
-						customInitialScriptPath={recoveryHandlerCustomInitialPath}
-						toggleText="Alert channel when error recovered"
-						customScriptTemplate="/scripts/add?hub=hub%2F9082%2Fwindmill%2Fschedule_recovery_handler_template"
-						bind:customHandlerKind={recoveryHandlerItemKind}
-						bind:handlerExtraArgs={recoveryHandlerExtraArgs}
-					>
-						<!-- @migration-task: migrate this slot by hand, `custom-tab-tooltip` is an invalid identifier -->
-						<svelte:fragment slot="custom-tab-tooltip">
-							<Tooltip>
-								<div class="flex gap-20 items-start mt-3">
-									<div class=" text-sm"
-										>The following args will be passed to the recovery handler:
-										<ul class="mt-1 ml-2">
-											<li><b>path</b>: The path of the script or flow that recovered.</li>
-											<li><b>is_flow</b>: Whether the runnable is a flow.</li>
-											<li><b>schedule_path</b>: The path of the schedule.</li>
-											<li><b>error</b>: The error of the last job that errored</li>
-											<li
-												><b>error_started_at</b>: The start datetime of the last job that errored</li
-											>
-											<li
-												><b>success_times</b>: The number of times the schedule succeeded before
-												calling the recovery handler.</li
-											>
-											<li><b>success_result</b>: The result of the latest successful job</li>
-											<li
-												><b>success_started_at</b>: The start datetime of the latest successful job</li
-											>
-										</ul>
-									</div>
-								</div>
-							</Tooltip>
-						</svelte:fragment>
-					</ErrorOrRecoveryHandler>
-					<div class="flex flex-row items-center justify-between">
-						<div
-							class="flex flex-row items-center mt-5 font-semibold text-sm {emptyString(
-								recoveryHandlerPath
-							)
-								? 'text-tertiary'
-								: ''}"
-						>
-							<p>Triggered when schedule recovered</p>
-							<input
-								type="number"
-								class="!w-14 mx-2 text-center"
-								bind:value={recoveredTimes}
-								min="1"
-								{disabled}
-							/>
-							<p>time{recoveredTimes > 1 ? 's in a row' : ''}</p>
-						</div>
-					</div>
-				</Section>
-			{:else if optionTabSelected === 'success_handler'}
-				{@const disabled = !can_write || emptyString($enterpriseLicense)}
-				<Section label="Success handler">
-					{#snippet header()}
-						<div class="flex flex-row gap-2">
-							{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-						</div>
-					{/snippet}
-					{#snippet action()}
-						<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
-							defaults
-							<Dropdown
-								{disabled}
-								items={[
-									{
-										displayName: `Override future schedules only`,
-										action: () => saveAsDefaultSuccessHandler(false)
-									},
-									{
-										displayName: 'Override all existing',
-										type: 'delete',
-										action: () => saveAsDefaultSuccessHandler(true)
-									}
-								]}
-							>
-								{#snippet children()}
-									<Save size={12} class="mr-1" />
-									Set as default
-								{/snippet}
-							</Dropdown>
-						</div>
-					{/snippet}
-					<ErrorOrRecoveryHandler
-						isEditable={!disabled}
-						errorOrRecovery="success"
-						bind:handlerSelected={successHandlerSelected}
-						bind:handlerPath={successHandlerPath}
-						customInitialScriptPath={successHandlerCustomInitialPath}
-						toggleText="Alert channel when successful"
-						customScriptTemplate="/scripts/add?hub=hub%2F9071%2Fwindmill%2Fschedule_success_handler_template"
-						bind:customHandlerKind={successHandlerItemKind}
-						bind:handlerExtraArgs={successHandlerExtraArgs}
-					>
-						<!-- @migration-task: migrate this slot by hand, `custom-tab-tooltip` is an invalid identifier -->
-						<svelte:fragment slot="custom-tab-tooltip">
-							<Tooltip>
-								<div class="flex gap-20 items-start mt-3">
-									<div class=" text-sm"
-										>The following args will be passed to the success handler:
-										<ul class="mt-1 ml-2">
-											<li><b>path</b>: The path of the script or flow that succeeded.</li>
-											<li><b>is_flow</b>: Whether the runnable is a flow.</li>
-											<li><b>schedule_path</b>: The path of the schedule.</li>
-											<li><b>success_result</b>: The result of the successful job</li>
-											<li><b>success_started_at</b>: The start datetime of the successful job</li>
-										</ul>
-									</div>
-								</div>
-							</Tooltip>
-						</svelte:fragment>
-					</ErrorOrRecoveryHandler>
-				</Section>
-			{:else if optionTabSelected === 'retries'}
-				{@const disabled = !can_write || emptyString($enterpriseLicense)}
-				<Section label="Retries">
-					{#snippet header()}
-						<div class="flex flex-row gap-2">
-							{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-						</div>
-						<Tooltip>
-							If defined, upon error this schedule will be retried with a delay and a maximum number
-							of attempts as defined below.
-							<br />
-							This is only available for individual script. For flows, retries can be set on each flow
-							step in the flow editor.
-						</Tooltip>
-					{/snippet}
-					<FlowRetries bind:flowModuleRetry={retry} disabled={itemKind !== 'script' || disabled} />
-				</Section>
-			{:else if optionTabSelected === 'tag'}
-				<Section
-					label="Custom script tag"
-					tooltip="When set, the script tag will be overridden by this tag"
-				>
-					<WorkerTagPicker bind:tag popupPlacement="top-end" disabled={!can_write} />
-				</Section>
-			{/if}
-		{:else}
-			<Loader2 class="animate-spin" />
-		{/if}
-	</div>
-{/snippet}
-
-{#if useDrawer}
-	<Drawer size="900px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit schedule ${initialPath}`
-					: `View schedule ${initialPath}`
-				: 'New schedule'}
-			on:close={drawer.closeDrawer}
-		>
-			<svelte:fragment slot="actions">
-				<div class="flex flex-row gap-4 items-center">
-					{@render saveButton()}
-				</div>
-			</svelte:fragment>
-			{@render content()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'Schedule' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
-			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
-			<div class="flex flex-row gap-2 items-center">
-				{@render saveButton()}
 			</div>
-		</svelte:fragment>
-		{#if docDescription}
-			{@render docDescription()}
 		{/if}
-		{@render content()}
-	</Section>
-{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/sqs/SqsCapture.svelte b/frontend/src/lib/components/triggers/sqs/SqsCapture.svelte
deleted file mode 100644
index d61e663d0c..0000000000
--- a/frontend/src/lib/components/triggers/sqs/SqsCapture.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition'
-	import type { CaptureInfo } from '../CaptureSection.svelte'
-	import CaptureSection from '../CaptureSection.svelte'
-
-	interface Props {
-		captureInfo?: CaptureInfo | undefined
-		isValid?: boolean | undefined
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		captureLoading?: boolean
-		triggerDeployed?: boolean
-	}
-
-	let {
-		captureInfo = undefined,
-		isValid = undefined,
-		hasPreprocessor = false,
-		isFlow = false,
-		captureLoading = false,
-		triggerDeployed = false
-	}: Props = $props()
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="sqs"
-		disabled={isValid === false}
-		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-		{captureLoading}
-		displayAlert={triggerDeployed}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Listening to SQS messages...
-				</p>
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to SQS messages.
-				</p>
-			{/if}
-		{/snippet}
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditor.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditor.svelte
index 2e1cc47727..2de3e17567 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditor.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditor.svelte
@@ -2,9 +2,7 @@
 	import { tick } from 'svelte'
 	import SqsTriggerEditorInner from './SqsTriggerEditorInner.svelte'
 
-	let { onUpdate } = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
@@ -21,9 +19,9 @@
 		drawer?.openNew(is_flow, initial_script_path, defaultValues)
 	}
 
-	let drawer: SqsTriggerEditorInner | undefined = $state()
+	let drawer: SqsTriggerEditorInner
 </script>
 
 {#if open}
-	<SqsTriggerEditorInner {onUpdate} bind:this={drawer} />
+	<SqsTriggerEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
index 55282e8762..3de41919fb 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Section from '$lib/components/Section.svelte'
+	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import { emptyStringTrimmed } from '$lib/utils'
@@ -15,16 +17,17 @@
 	import { Button } from '$lib/components/common'
 	import { VariableService, type AwsAuthResourceType } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import TestingBadge from '../testingBadge.svelte'
 
 	export let can_write: boolean = false
 	export let headless: boolean = false
+	export let showCapture: boolean = false
+	export let captureTable: CaptureTable | undefined = undefined
+	export let captureInfo: CaptureInfo | undefined = undefined
 	export let isValid: boolean = false
 	export let queue_url = ''
 	export let aws_resource_path = ''
 	export let aws_auth_resource_type: AwsAuthResourceType = 'credentials'
 	export let message_attributes: string[] = []
-	export let showTestingBadge: boolean = false
 
 	async function loadVariables() {
 		return await VariableService.listVariable({ workspace: $workspaceStore ?? '' })
@@ -39,12 +42,20 @@
 </script>
 
 <div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			captureType="sqs"
+			disabled={!isValid}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+			bind:captureTable
+		/>
+	{/if}
 	<Section label="SQS" {headless}>
-		<svelte:fragment slot="badge">
-			{#if showTestingBadge}
-				<TestingBadge />
-			{/if}
-		</svelte:fragment>
 		<div class="flex flex-col w-full gap-4">
 			<Subsection label="Connection setup">
 				<div class="flex flex-col gap-3">
@@ -53,13 +64,9 @@
 							Select an AWS resource to authenticate your account. <Required required={true} />
 						</p>
 
-						<ToggleButtonGroup
-							bind:selected={aws_auth_resource_type}
-							on:selected={() => {
-								aws_resource_path = ''
-							}}
-							let:item
-						>
+						<ToggleButtonGroup bind:selected={aws_auth_resource_type} on:selected={() => {
+							aws_resource_path = ''
+						}} let:item>
 							<ToggleButton label="Credentials" value="credentials" {item} />
 							<ToggleButton label="Oidc" value="oidc" {item} />
 						</ToggleButtonGroup>
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
index c23a683b2c..eee25de840 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
@@ -5,96 +5,40 @@
 	import Path from '$lib/components/Path.svelte'
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptyString, sendUserToast } from '$lib/utils'
-	import { Loader2 } from 'lucide-svelte'
+	import { createEventDispatcher } from 'svelte'
+	import { Loader2, Save } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 	import { SqsTriggerService, type AwsAuthResourceType } from '$lib/gen'
 	import SqsTriggerEditorConfigSection from './SqsTriggerEditorConfigSection.svelte'
 	import Section from '$lib/components/Section.svelte'
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import Required from '$lib/components/Required.svelte'
-	import type { Snippet } from 'svelte'
-	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
-	import { saveSqsTriggerFromCfg } from './utils'
-	import { handleConfigChange } from '../utils'
 
-	interface Props {
-		useDrawer?: boolean
-		description?: Snippet | undefined
-		hideTarget?: boolean
-		hideTooltips?: boolean
-		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
-		isEditor?: boolean
-		customLabel?: Snippet
-		isDeployed?: boolean
-		cloudDisabled?: boolean
-		onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
-		onCaptureConfigChange?: (cfg: Record<string, any>, isValid: boolean) => void
-		onUpdate?: (path?: string) => void
-		onDelete?: () => void
-		onReset?: () => void
-	}
+	let drawer: Drawer
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
+	let itemKind: 'flow' | 'script' = 'script'
+	let script_path = ''
+	let initialScriptPath = ''
+	let fixedScriptPath = ''
+	let path: string = ''
+	let pathError = ''
+	let enabled = false
+	let dirtyPath = false
+	let can_write = true
+	let drawerLoading = true
+	let aws_resource_path: string = ''
+	let queue_url = ''
+	let message_attributes: string[] = []
+	let aws_auth_resource_type: AwsAuthResourceType = 'credentials'
+	let isValid = false
+	const dispatch = createEventDispatcher()
 
-	let {
-		useDrawer = true,
-		description = undefined,
-		hideTarget = false,
-		hideTooltips = false,
-		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
-		isEditor = false,
-		customLabel = undefined,
-		isDeployed = false,
-		cloudDisabled = false,
-		onConfigChange = undefined,
-		onCaptureConfigChange = undefined,
-		onUpdate = undefined,
-		onDelete = undefined,
-		onReset = undefined
-	}: Props = $props()
+	$: is_flow = itemKind === 'flow'
 
-	let drawer: Drawer | undefined = $state(undefined)
-	let is_flow: boolean = $state(false)
-	let initialPath = $state('')
-	let edit = $state(true)
-	let itemKind: 'flow' | 'script' = $state('script')
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let fixedScriptPath = $state('')
-	let path: string = $state('')
-	let pathError = $state('')
-	let enabled = $state(false)
-	let dirtyPath = $state(false)
-	let can_write = $state(true)
-	let drawerLoading = $state(true)
-	let showLoading = $state(false)
-	let aws_resource_path: string = $state('')
-	let queue_url = $state('')
-	let message_attributes: string[] = $state([])
-	let aws_auth_resource_type: AwsAuthResourceType = $state('credentials')
-	let isValid = $state(false)
-	let initialConfig: Record<string, any> | undefined = undefined
-	let deploymentLoading = $state(false)
-
-	const sqsConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(getCaptureConfig)
-	const saveDisabled = $derived(
-		pathError != '' || emptyString(script_path) || !isValid || !can_write
-	)
-	$effect(() => {
-		is_flow = itemKind === 'flow'
-	})
-
-	export async function openEdit(
-		ePath: string,
-		isFlow: boolean,
-		defaultConfig?: Record<string, any>
-	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
+	export async function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -102,13 +46,11 @@
 			itemKind = isFlow ? 'flow' : 'script'
 			edit = true
 			dirtyPath = false
-			await loadTrigger(defaultConfig)
+			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load sqs trigger: ${err.body}`, true)
 		} finally {
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
@@ -117,9 +59,6 @@
 		fixedScriptPath_?: string,
 		defaultValues?: Record<string, any>
 	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100)
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -130,207 +69,143 @@
 			script_path = fixedScriptPath
 			aws_resource_path = defaultValues?.aws_resource_path ?? ''
 			queue_url = defaultValues?.queue_url ?? ''
-			path = defaultValues?.path ?? ''
+			path = ''
 			message_attributes = defaultValues?.message_attributes ?? []
 			aws_auth_resource_type = defaultValues?.aws_auth_resource_type ?? 'credentials'
 			initialPath = ''
 			edit = false
 			dirtyPath = false
-			enabled = defaultValues?.enabled ?? false
 		} finally {
-			initialConfig = structuredClone($state.snapshot(getSaveCfg()))
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
-	async function loadTriggerConfig(cfg?: Record<string, any>): Promise<void> {
+	async function loadTrigger(): Promise<void> {
 		try {
-			script_path = cfg?.script_path
-			initialScriptPath = cfg?.script_path
-			aws_resource_path = cfg?.aws_resource_path
-			queue_url = cfg?.queue_url
-			is_flow = cfg?.is_flow
-			message_attributes = cfg?.message_attributes ?? []
-			path = cfg?.path
-			enabled = cfg?.enabled
-			aws_auth_resource_type = cfg?.aws_auth_resource_type
-			can_write = canWrite(cfg?.path, cfg?.extra_perms, $userStore)
-		} catch (error) {
-			sendUserToast(`Could not load SQS trigger config: ${error.body}`, true)
-		}
-	}
-
-	async function loadTrigger(defaultConfig?: Record<string, any>): Promise<void> {
-		try {
-			if (defaultConfig) {
-				loadTriggerConfig(defaultConfig)
-				return
-			} else {
-				const s = await SqsTriggerService.getSqsTrigger({
-					workspace: $workspaceStore!,
-					path: initialPath
-				})
-				loadTriggerConfig(s)
-			}
+			const s = await SqsTriggerService.getSqsTrigger({
+				workspace: $workspaceStore!,
+				path: initialPath
+			})
+			script_path = s.script_path
+			initialScriptPath = s.script_path
+			aws_resource_path = s.aws_resource_path
+			queue_url = s.queue_url
+			is_flow = s.is_flow
+			message_attributes = s.message_attributes ?? []
+			path = s.path
+			enabled = s.enabled
+			aws_auth_resource_type = s.aws_auth_resource_type
+			can_write = canWrite(s.path, s.extra_perms, $userStore)
 		} catch (error) {
 			sendUserToast(`Could not load SQS trigger: ${error.body}`, true)
 		}
 	}
 
-	function getSaveCfg(): Record<string, any> {
-		return {
-			script_path,
-			is_flow,
-			path,
-			aws_resource_path,
-			queue_url,
-			message_attributes,
-			aws_auth_resource_type,
-			enabled
-		}
-	}
-
-	async function handleToggleEnabled(nEnabled: boolean) {
-		enabled = nEnabled
-		if (!isDraftOnly && !hasDraft) {
-			await SqsTriggerService.setSqsTriggerEnabled({
-				path: initialPath,
-				workspace: $workspaceStore ?? '',
-				requestBody: { enabled: nEnabled }
-			})
-			sendUserToast(`${nEnabled ? 'enabled' : 'disabled'} SQS trigger ${initialPath}`)
-		}
-	}
-
 	async function updateTrigger(): Promise<void> {
-		deploymentLoading = true
-		const cfg = getSaveCfg()
-		const isSaved = await saveSqsTriggerFromCfg(
-			initialPath,
-			cfg,
-			edit,
-			$workspaceStore!,
-			usedTriggerKinds
-		)
-		if (isSaved) {
-			onUpdate?.(cfg.path)
-			drawer?.closeDrawer()
+		if (edit) {
+			await SqsTriggerService.updateSqsTrigger({
+				workspace: $workspaceStore!,
+				path: initialPath,
+				requestBody: {
+					path,
+					script_path,
+					aws_auth_resource_type,
+					enabled,
+					is_flow,
+					queue_url,
+					aws_resource_path,
+					message_attributes
+				}
+			})
+			sendUserToast(`SQS trigger ${path} updated`)
+		} else {
+			await SqsTriggerService.createSqsTrigger({
+				workspace: $workspaceStore!,
+				requestBody: {
+					enabled: true,
+					aws_resource_path,
+					queue_url,
+					aws_auth_resource_type,
+					path,
+					script_path,
+					is_flow,
+					message_attributes
+				}
+			})
+			sendUserToast(`SQS trigger ${path} created`)
 		}
-		deploymentLoading = false
+
+		if (!$usedTriggerKinds.includes('sqs')) {
+			$usedTriggerKinds = [...$usedTriggerKinds, 'sqs']
+		}
+		dispatch('update')
+		drawer.closeDrawer()
 	}
-
-	function getCaptureConfig(): Record<string, any> {
-		return {
-			aws_resource_path,
-			queue_url,
-			message_attributes,
-			aws_auth_resource_type,
-			path
-		}
-	}
-
-	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
-	})
-
-	$effect(() => {
-		if (!drawerLoading) {
-			handleConfigChange(sqsConfig, initialConfig, saveDisabled, edit, onConfigChange)
-		}
-	})
 </script>
 
-{#if useDrawer}
-	<Drawer size="800px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit SQS trigger ${initialPath}`
-					: `SQS trigger ${initialPath}`
-				: 'New SQS trigger'}
-			on:close={drawer.closeDrawer}
-		>
-			<svelte:fragment slot="actions">
-				{@render actions()}
-			</svelte:fragment>
-			{@render config()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'SQS trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit SQS trigger ${initialPath}`
+				: `SQS trigger ${initialPath}`
+			: 'New SQS trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading && can_write}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} sqs trigger ${initialPath}`)
+							}}
+						/>
+					</div>
+				{/if}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || emptyString(script_path) || !isValid || !can_write}
+					on:click={updateTrigger}
+				>
+					Save
+				</Button>
 			{/if}
 		</svelte:fragment>
-		<svelte:fragment slot="action">
-			{@render actions()}
-		</svelte:fragment>
-		{@render config()}
-	</Section>
-{/if}
-
-{#snippet actions()}
-	{#if !drawerLoading}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={drawerLoading || !can_write ? 'none' : 'create'}
-			{saveDisabled}
-			{enabled}
-			{allowDraft}
-			{edit}
-			isLoading={deploymentLoading}
-			{isDeployed}
-			onUpdate={updateTrigger}
-			{onReset}
-			{onDelete}
-			onToggleEnabled={handleToggleEnabled}
-			{cloudDisabled}
-		/>
-	{/if}
-{/snippet}
-
-{#snippet config()}
-	{#if drawerLoading}
-		{#if showLoading}
-			<Loader2 class="animate-spin" />
-		{/if}
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#if description}
-				{@render description()}
-			{/if}
-			{#if !hideTooltips}
-				<Alert title="Info" type="info" size="xs">
+		{#if drawerLoading}
+			<div class="flex flex-col items-center justify-center h-full w-full">
+				<Loader2 size="50" class="animate-spin" />
+				<p>Loading...</p>
+			</div>
+		{:else}
+			<div class="flex flex-col gap-5">
+				<Alert title="Info" type="info">
 					{#if edit}
 						Changes can take up to 30 seconds to take effect.
 					{:else}
-						New SQS triggers can take up to 30 seconds to start listening.
+						New postgres triggers can take up to 30 seconds to start listening.
 					{/if}
 				</Alert>
-			{/if}
-		</div>
-		<div class="flex flex-col gap-12 mt-6">
-			<div class="flex flex-col gap-4">
-				<Label label="Path">
-					<Path
-						bind:dirty={dirtyPath}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						checkInitialPathExistence={!edit}
-						namePlaceholder="sqs_trigger"
-						kind="sqs_trigger"
-						disabled={!can_write}
-						disableEditing={!can_write}
-					/>
-				</Label>
 			</div>
+			<div class="flex flex-col gap-12 mt-6">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="sqs_trigger"
+							kind="sqs_trigger"
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
 
-			{#if !hideTarget}
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
 						Pick a script or flow to be triggered <Required required={true} />
@@ -343,35 +218,30 @@
 							allowFlow={true}
 							bind:itemKind
 							bind:scriptPath={script_path}
-							allowRefresh={can_write}
-							allowEdit={!$userStore?.operator}
+							allowRefresh
 						/>
 						{#if emptyString(script_path)}
 							<Button
 								btnClasses="ml-4 mt-2"
 								color="dark"
 								size="xs"
-								disabled={!can_write}
 								href={itemKind === 'flow' ? '/flows/add?hub=59' : '/scripts/add?hub=hub%2F19657'}
-								target="_blank"
+								target="_blank">Create from template</Button
 							>
-								Create from template
-							</Button>
 						{/if}
 					</div>
 				</Section>
-			{/if}
 
-			<SqsTriggerEditorConfigSection
-				bind:isValid
-				bind:queue_url
-				bind:message_attributes
-				bind:aws_resource_path
-				bind:aws_auth_resource_type
-				{can_write}
-				headless={true}
-				showTestingBadge={isEditor}
-			/>
-		</div>
-	{/if}
-{/snippet}
+				<SqsTriggerEditorConfigSection
+					bind:isValid
+					bind:queue_url
+					bind:message_attributes
+					bind:aws_resource_path
+					bind:aws_auth_resource_type
+					{can_write}
+					headless={true}
+				/>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerPanel.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerPanel.svelte
index 24bd1137f0..e981d7dedf 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerPanel.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerPanel.svelte
@@ -1,69 +1,135 @@
 <script lang="ts">
-	import SqsTriggerEditorInner from './SqsTriggerEditorInner.svelte'
+	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
+	import { SqsTriggerService, type SqsTrigger } from '$lib/gen'
+
+	import { canWrite } from '$lib/utils'
+	import { getContext, onMount } from 'svelte'
 	import { isCloudHosted } from '$lib/cloud'
+	import Section from '$lib/components/Section.svelte'
 	import { Alert } from '$lib/components/common'
 	import Description from '$lib/components/Description.svelte'
-	import { onMount } from 'svelte'
-	import { enterpriseLicense } from '$lib/stores'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
+	import SqsTriggerEditor from './SqsTriggerEditor.svelte'
+	export let isFlow: boolean
+	export let path: string
+	export let newItem: boolean = false
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
-	let {
-		selectedTrigger,
-		isFlow,
-		path,
-		isDeployed = false,
-		defaultValues = undefined,
-		newDraft = false,
-		customLabel = undefined,
-		...props
-	} = $props()
-	let sqsTriggerEditor: SqsTriggerEditorInner | undefined = $state(undefined)
+	let sqsTriggerEditor: SqsTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
-	async function openSqsTriggerEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			sqsTriggerEditor?.openNew(isFlow, path, defaultValues)
-		} else {
-			sqsTriggerEditor?.openEdit(selectedTrigger.path, isFlow, selectedTrigger.draftConfig)
-		}
-	}
+	$: path && loadTriggers()
+
+	const { triggersCount, selectedTrigger, defaultValues } =
+		getContext<TriggerContext>('TriggerContext')
 
 	onMount(() => {
-		sqsTriggerEditor && openSqsTriggerEditor(isFlow, selectedTrigger.isDraft ?? false)
+		if (
+			defaultValues &&
+			$selectedTrigger === 'sqs' &&
+			Object.keys($defaultValues ?? {}).length > 0
+		) {
+			sqsTriggerEditor.openNew(isFlow, path, $defaultValues)
+			defaultValues.set(undefined)
+		}
 	})
 
-	const cloudDisabled = $derived(isCloudHosted())
+	let sqsTriggers: (SqsTrigger & { canWrite: boolean })[] | undefined = undefined
+	export async function loadTriggers() {
+		try {
+			sqsTriggers = (
+				await SqsTriggerService.listSqsTriggers({
+					workspace: $workspaceStore ?? '',
+					path,
+					isFlow
+				})
+			).map((x) => {
+				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
+			})
+			$triggersCount = { ...($triggersCount ?? {}), sqs_count: sqsTriggers?.length }
+			openForm = sqsTriggers?.length === 0 || dontCloseOnLoad
+		} catch (e) {
+			console.error('impossible to load SQS triggers', e)
+		}
+	}
 </script>
 
+<SqsTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={sqsTriggerEditor}
+/>
+
 {#if !$enterpriseLicense}
 	<Alert title="EE Only" type="warning" size="xs">
 		SQS triggers are an enterprise only feature.
 	</Alert>
+{:else if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		SQS triggers are disabled in the multi-tenant cloud.
+	</Alert>
 {:else}
 	<div class="flex flex-col gap-4">
-		<SqsTriggerEditorInner
-			bind:this={sqsTriggerEditor}
-			useDrawer={false}
-			hideTarget
-			hideTooltips={!isDeployed || cloudDisabled}
-			allowDraft={true}
-			hasDraft={!!selectedTrigger.draftConfig}
-			isDraftOnly={selectedTrigger.isDraft}
-			{customLabel}
-			{isDeployed}
-			{cloudDisabled}
-			{...props}
+		<Description
+			link="https://docs.aws.amazon.com/AWSSimpleQueueService/latest/SQSDeveloperGuide/sqs-how-it-works.html"
 		>
-			{#snippet description()}
-				{#if cloudDisabled}
-					<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-						SQS triggers are disabled in the multi-tenant cloud.
-					</Alert>
-				{:else}
-					<Description link="https://www.windmill.dev/docs/core_concepts/sqs_triggers">
-						SQS triggers allow you to execute scripts and flows in response to messages in an AWS
-						SQS queue. They can be configured to filter messages based on message attributes.
-					</Description>
-				{/if}
-			{/snippet}
-		</SqsTriggerEditorInner>
+			SQS triggers allow your scripts/flows to process messages from Amazon Simple Queue Service
+			(SQS) in real time. Each trigger listens to an SQS queue and executes a script or a flow when
+			new messages arrive.
+		</Description>
+
+		{#if !newItem && sqsTriggers && sqsTriggers.length > 0}
+			<Section label="SQS">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each sqsTriggers as sqsTriggers (sqsTriggers.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{sqsTriggers.path}</div>
+								<div class="col-span-2 truncate">
+									{sqsTriggers.queue_url}
+								</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => sqsTriggerEditor?.openEdit(sqsTriggers.path, isFlow)}
+										class="px-2"
+									>
+										{#if sqsTriggers.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+
+		<TriggersEditorSection
+			on:applyArgs
+			on:saveTrigger={(e) => {
+				sqsTriggerEditor?.openNew(isFlow, path, e.detail.config)
+			}}
+			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
+			cloudDisabled={false}
+			triggerType="sqs"
+			{isFlow}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
+		/>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/triggers/sqs/utils.ts b/frontend/src/lib/components/triggers/sqs/utils.ts
deleted file mode 100644
index 7ef1afa60b..0000000000
--- a/frontend/src/lib/components/triggers/sqs/utils.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { SqsTriggerService } from '$lib/gen'
-import { sendUserToast } from '$lib/toast'
-import { get, type Writable } from 'svelte/store'
-
-export async function saveSqsTriggerFromCfg(
-	initialPath: string,
-	cfg: Record<string, any>,
-	edit: boolean,
-	workspace: string,
-	usedTriggerKinds: Writable<string[]>
-): Promise<boolean> {
-	const requestBody = {
-		path: cfg.path,
-		script_path: cfg.script_path,
-		is_flow: cfg.is_flow,
-		aws_resource_path: cfg.aws_resource_path,
-		queue_url: cfg.queue_url,
-		message_attributes: cfg.message_attributes,
-		aws_auth_resource_type: cfg.aws_auth_resource_type,
-		enabled: cfg.enabled
-	}
-	try {
-		if (edit) {
-			await SqsTriggerService.updateSqsTrigger({
-				workspace,
-				path: initialPath,
-				requestBody
-			})
-			sendUserToast(`SQS trigger ${cfg.path} updated`)
-		} else {
-			await SqsTriggerService.createSqsTrigger({
-				workspace,
-				requestBody: { ...requestBody, enabled: true }
-			})
-			sendUserToast(`SQS trigger ${cfg.path} created`)
-		}
-
-		if (!get(usedTriggerKinds).includes('sqs')) {
-			usedTriggerKinds.update((t) => [...t, 'sqs'])
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
-}
diff --git a/frontend/src/lib/components/triggers/testingBadge.svelte b/frontend/src/lib/components/triggers/testingBadge.svelte
deleted file mode 100644
index eb8d288fbf..0000000000
--- a/frontend/src/lib/components/triggers/testingBadge.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { FlaskConical } from 'lucide-svelte'
-	import { Tooltip } from '$lib/components/meltComponents'
-</script>
-
-<Tooltip>
-	<FlaskConical size={14} class="text-tertiary inline-block" />
-	<span slot="text">Config used for creating a testing endpoint</span>
-</Tooltip>
diff --git a/frontend/src/lib/components/triggers/triggers.svelte.ts b/frontend/src/lib/components/triggers/triggers.svelte.ts
deleted file mode 100644
index 5f40fb6126..0000000000
--- a/frontend/src/lib/components/triggers/triggers.svelte.ts
+++ /dev/null
@@ -1,456 +0,0 @@
-import {
-	KafkaTriggerService,
-	MqttTriggerService,
-	NatsTriggerService,
-	PostgresTriggerService,
-	ScheduleService,
-	SqsTriggerService,
-	WebsocketTriggerService,
-	type GcpTrigger,
-	type KafkaTrigger,
-	type PostgresTrigger,
-	type Schedule,
-	type TriggersCount,
-	type HttpTrigger,
-	HttpTriggerService,
-	GcpTriggerService
-} from '$lib/gen'
-import { getLightConfig, sortTriggers, updateTriggersCount, type Trigger } from './utils'
-import type { Writable } from 'svelte/store'
-import type { TriggerType } from './utils'
-import type { UserExt } from '$lib/stores'
-import type { ScheduleTrigger } from '../triggers'
-import { canWrite, formatCron } from '$lib/utils'
-
-export class Triggers {
-	#triggers = $state<Trigger[]>([])
-	#selectedTriggerIndex = $state<number | undefined>(undefined)
-	#selectedTrigger = $derived(
-		this.#selectedTriggerIndex !== undefined
-			? this.#triggers[this.#selectedTriggerIndex]
-			: undefined
-	)
-	#updateDraftCallback: (() => void) | undefined = undefined
-
-	constructor(
-		triggers: Trigger[] = [],
-		selectedIndex?: number,
-		updateDraftCallback?: (() => void) | undefined
-	) {
-		this.#triggers = triggers
-		this.#selectedTriggerIndex = selectedIndex
-		this.#updateDraftCallback = updateDraftCallback
-	}
-
-	get selectedTrigger(): Trigger | undefined {
-		return this.#selectedTrigger
-	}
-
-	get selectedTriggerIndex(): number | undefined {
-		return this.#selectedTriggerIndex
-	}
-
-	set selectedTriggerIndex(index: number | undefined) {
-		if (index === undefined || index < 0 || index >= this.#triggers.length) {
-			this.#selectedTriggerIndex = undefined
-		} else {
-			this.#selectedTriggerIndex = index
-		}
-		this.#updateDraftCallback?.()
-	}
-
-	get triggers(): Trigger[] {
-		return this.#triggers
-	}
-
-	setTriggers(triggers: Trigger[]) {
-		this.#triggers = triggers
-		this.#updateDraftCallback?.()
-	}
-
-	setDraftConfig(triggerIndex: number, draftConfig: Record<string, any> | undefined) {
-		if (triggerIndex === undefined || triggerIndex < 0 || triggerIndex >= this.#triggers.length) {
-			return
-		}
-		this.#triggers[triggerIndex].draftConfig = draftConfig
-		this.#updateDraftCallback?.()
-	}
-
-	getDraftTriggersSnapshot(): Trigger[] | undefined {
-		const draftTriggers = this.#triggers.filter((t) => t.draftConfig)
-		return draftTriggers.length > 0 ? $state.snapshot(draftTriggers) : undefined
-	}
-
-	getSelectedTriggerSnapshot(): number | undefined {
-		return $state.snapshot(this.#selectedTriggerIndex)
-	}
-
-	addDraftTrigger(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		type: TriggerType,
-		path?: string,
-		draftCfg?: Record<string, any>
-	): number {
-		const primaryScheduleExists = this.#triggers.some((t) => t.type === 'schedule' && t.isPrimary)
-
-		// Create the new draft trigger
-		const draftId = crypto.randomUUID()
-		const isPrimary = type === 'schedule' && !primaryScheduleExists
-		const newTrigger = {
-			id: draftId,
-			type,
-			path,
-			isPrimary,
-			isDraft: true,
-			draftConfig: draftCfg
-		}
-
-		this.#triggers.push(newTrigger)
-		this.#updateDraftCallback?.()
-
-		updateTriggersCount(triggersCountStore, type, 'add', newTrigger.draftConfig)
-
-		return this.#triggers.length - 1
-	}
-
-	deleteTrigger(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		triggerIndex: number
-	): void {
-		if (triggerIndex === undefined || triggerIndex < 0 || triggerIndex >= this.#triggers.length) {
-			return
-		}
-		const { type } = this.#triggers[triggerIndex]
-
-		this.#triggers = this.#triggers.filter((_, index) => index !== triggerIndex)
-
-		updateTriggersCount(triggersCountStore, type, 'remove')
-		this.#updateDraftCallback?.()
-	}
-
-	updateTriggers(
-		remoteTriggers: any[],
-		type: TriggerType,
-		user: UserExt | undefined = undefined
-	): number {
-		const currentTriggers = this.#triggers
-		// Identify triggers with draftConfig to preserve
-		const configuredTriggers = currentTriggers.filter(
-			(t) => t.type === type && !t.isDraft && t.draftConfig
-		)
-
-		const configMap = new Map<string, { draftConfig: Record<string, any> }>()
-
-		configuredTriggers.forEach((t) => {
-			configMap.set(t.path ?? '', { draftConfig: t.draftConfig! })
-		})
-
-		const backendTriggers = remoteTriggers.map((trigger) => {
-			const { draftConfig } = configMap.get(trigger.path) ?? {}
-			return {
-				type: type as TriggerType,
-				path: trigger.path,
-				isPrimary: type === 'schedule' && trigger.path === trigger.script_path,
-				isDraft: false,
-				canWrite: canWrite(trigger.path, trigger.extra_perms, user),
-				draftConfig: draftConfig,
-				lightConfig: getLightConfig(type, trigger)
-			}
-		})
-
-		const filteredTriggers = currentTriggers.filter((t) => t.type !== type || t.isDraft)
-		const newTriggers = sortTriggers([...filteredTriggers, ...backendTriggers])
-		this.#triggers = newTriggers
-
-		this.#updateDraftCallback?.()
-		return newTriggers.filter((t) => t.type === type).length
-	}
-
-	async fetchSchedules(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		primarySchedule?: ScheduleTrigger | undefined | false,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			//First update the store with legacy primary schedule
-			if (primarySchedule && !this.#triggers.some((s) => s.isPrimary)) {
-				const primary = {
-					type: 'schedule' as TriggerType,
-					path,
-					isPrimary: true,
-					isDraft: false,
-					draftConfig: {
-						schedule: primarySchedule.cron ? formatCron(primarySchedule.cron) : undefined,
-						args: primarySchedule.args,
-						timezone: primarySchedule.timezone,
-						summary: primarySchedule.summary,
-						description: primarySchedule.description,
-						enabled: primarySchedule.enabled
-					}
-				}
-				this.#triggers = [...this.#triggers, primary]
-			}
-
-			const allDeployedSchedules: Schedule[] = await ScheduleService.listSchedules({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-
-			const scheduleCount = this.updateTriggers(allDeployedSchedules, 'schedule', user)
-			const updatedPrimarySchedule = this.#triggers.find((s) => s.isPrimary)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					schedule_count: scheduleCount,
-					primary_schedule: {
-						schedule:
-							updatedPrimarySchedule?.draftConfig?.schedule ??
-							updatedPrimarySchedule?.lightConfig?.schedule
-					}
-				}
-			})
-
-			return
-		} catch (error) {
-			console.error('Failed to fetch schedules:', error)
-			return
-		}
-	}
-
-	async fetchWebsocketTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			const wsTriggers = await WebsocketTriggerService.listWebsocketTriggers({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-			const wsCount = this.updateTriggers(wsTriggers, 'websocket', user)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					websocket_count: wsCount
-				}
-			})
-		} catch (error) {
-			console.error('Failed to fetch Websocket triggers:', error)
-		}
-	}
-
-	async fetchPostgresTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			const pgTriggers: PostgresTrigger[] = await PostgresTriggerService.listPostgresTriggers({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-			const pgCount = this.updateTriggers(pgTriggers, 'postgres', user)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					postgres_count: pgCount
-				}
-			})
-		} catch (error) {
-			console.error('Failed to fetch Postgres triggers:', error)
-		}
-	}
-
-	async fetchKafkaTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			const kafkaTriggers: KafkaTrigger[] = await KafkaTriggerService.listKafkaTriggers({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-			const kafkaCount = this.updateTriggers(kafkaTriggers, 'kafka', user)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					kafka_count: kafkaCount
-				}
-			})
-		} catch (error) {
-			console.error('Failed to fetch Kafka triggers:', error)
-		}
-	}
-
-	async fetchNatsTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			const natsTriggers = await NatsTriggerService.listNatsTriggers({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-			const natsCount = this.updateTriggers(natsTriggers, 'nats', user)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					nats_count: natsCount
-				}
-			})
-		} catch (error) {
-			console.error('Failed to fetch NATS triggers:', error)
-		}
-	}
-
-	async fetchMqttTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			const mqttTriggers = await MqttTriggerService.listMqttTriggers({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-			const mqttCount = this.updateTriggers(mqttTriggers, 'mqtt', user)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					mqtt_count: mqttCount
-				}
-			})
-		} catch (error) {
-			console.error('Failed to fetch MQTT triggers:', error)
-		}
-	}
-
-	async fetchSqsTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			const sqsTriggers = await SqsTriggerService.listSqsTriggers({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-			const sqsCount = this.updateTriggers(sqsTriggers, 'sqs', user)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					sqs_count: sqsCount
-				}
-			})
-		} catch (error) {
-			console.error('Failed to fetch SQS triggers:', error)
-		}
-	}
-
-	async fetchGcpTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			const gcpTriggers: GcpTrigger[] = await GcpTriggerService.listGcpTriggers({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-			const gcpCount = this.updateTriggers(gcpTriggers, 'gcp', user)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					gcp_count: gcpCount
-				}
-			})
-		} catch (error) {
-			console.error('Failed to fetch GCP Pub/Sub triggers:', error)
-		}
-	}
-
-	async fetchHttpTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-		try {
-			const httpTriggers: HttpTrigger[] = await HttpTriggerService.listHttpTriggers({
-				workspace: workspaceId,
-				path,
-				isFlow
-			})
-			const httpCount = this.updateTriggers(httpTriggers, 'http', user)
-			triggersCountStore.update((triggersCount) => {
-				return {
-					...(triggersCount ?? {}),
-					http_routes_count: httpCount
-				}
-			})
-		} catch (error) {
-			console.error('Failed to fetch HTTP triggers:', error)
-		}
-	}
-
-	async fetchTriggers(
-		triggersCountStore: Writable<TriggersCount | undefined>,
-		workspaceId: string | undefined,
-		path: string,
-		isFlow: boolean,
-		primarySchedule: ScheduleTrigger | undefined | false = undefined,
-		user: UserExt | undefined = undefined
-	): Promise<void> {
-		if (!workspaceId) return
-
-		// Fetch each type of trigger
-		await Promise.all([
-			this.fetchSchedules(triggersCountStore, workspaceId, path, isFlow, primarySchedule, user),
-			this.fetchHttpTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-			this.fetchWebsocketTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-			this.fetchPostgresTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-			this.fetchKafkaTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-			this.fetchNatsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-			this.fetchMqttTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-			this.fetchSqsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-			this.fetchGcpTriggers(triggersCountStore, workspaceId, path, isFlow, user)
-		])
-	}
-}
diff --git a/frontend/src/lib/components/triggers/utils.ts b/frontend/src/lib/components/triggers/utils.ts
deleted file mode 100644
index 7daf829366..0000000000
--- a/frontend/src/lib/components/triggers/utils.ts
+++ /dev/null
@@ -1,529 +0,0 @@
-import { Webhook, Mail, Calendar, Route, Unplug, Database, Terminal } from 'lucide-svelte'
-import KafkaIcon from '$lib/components/icons/KafkaIcon.svelte'
-import NatsIcon from '$lib/components/icons/NatsIcon.svelte'
-import MqttIcon from '$lib/components/icons/MqttIcon.svelte'
-import AwsIcon from '$lib/components/icons/AwsIcon.svelte'
-import GoogleCloudIcon from '$lib/components/icons/GoogleCloudIcon.svelte'
-import type { CaptureTriggerKind, Flow, NewScript, TriggersCount } from '$lib/gen/types.gen'
-import type { Writable } from 'svelte/store'
-import SchedulePollIcon from '../icons/SchedulePollIcon.svelte'
-import { type TriggerKind } from '$lib/components/triggers'
-import { saveScheduleFromCfg } from '$lib/components/flows/scheduleUtils'
-import { saveHttpRouteFromCfg } from './http/utils'
-import { saveWebsocketTriggerFromCfg } from './websocket/utils'
-import { savePostgresTriggerFromCfg } from './postgres/utils'
-import { saveKafkaTriggerFromCfg } from './kafka/utils'
-import { saveSqsTriggerFromCfg } from './sqs/utils'
-import { saveNatsTriggerFromCfg } from './nats/utils'
-import { saveMqttTriggerFromCfg } from './mqtt/utils'
-import { saveGcpTriggerFromCfg } from './gcp/utils'
-import type { Triggers } from './triggers.svelte'
-import { emptyString } from '$lib/utils'
-
-export const CLOUD_DISABLED_TRIGGER_TYPES = [
-	'nats',
-	'kafka',
-	'sqs',
-	'mqtt',
-	'gcp',
-	'websocket',
-	'postgres'
-]
-
-export type TriggerType =
-	| 'webhook'
-	| 'email'
-	| 'schedule'
-	| 'http'
-	| 'websocket'
-	| 'postgres'
-	| 'kafka'
-	| 'nats'
-	| 'mqtt'
-	| 'sqs'
-	| 'gcp'
-	| 'poll'
-	| 'cli'
-
-export type Trigger = {
-	type: TriggerType
-	path?: string
-	isDraft?: boolean
-	isPrimary?: boolean
-	canWrite?: boolean
-	id?: string
-	draftConfig?: Record<string, any>
-	captureConfig?: Record<string, any>
-	extra?: Record<string, any>
-	lightConfig?: Record<string, any>
-}
-
-// Map of trigger kinds to icons
-export const triggerIconMap = {
-	webhook: Webhook,
-	email: Mail,
-	schedule: Calendar,
-	http: Route,
-	websocket: Unplug,
-	postgres: Database,
-	kafka: KafkaIcon,
-	nats: NatsIcon,
-	mqtt: MqttIcon,
-	sqs: AwsIcon,
-	gcp: GoogleCloudIcon,
-	primary_schedule: Calendar,
-	poll: SchedulePollIcon,
-	cli: Terminal
-}
-
-/**
- * Converts a TriggerType to a CaptureTriggerKind when a mapping exists
- * @param triggerType The trigger type to convert
- * @returns The corresponding CaptureTriggerKind or undefined if no mapping exists
- */
-export function triggerTypeToCaptureKind(triggerType: TriggerType): CaptureTriggerKind | undefined {
-	// Define types that can be mapped to CaptureTriggerKind
-	const capturableTriggerTypes: TriggerType[] = [
-		'webhook',
-		'email',
-		'http',
-		'websocket',
-		'postgres',
-		'kafka',
-		'nats',
-		'mqtt',
-		'sqs',
-		'gcp',
-		'cli'
-	]
-
-	if (capturableTriggerTypes.includes(triggerType)) {
-		return triggerType as CaptureTriggerKind
-	}
-
-	return undefined
-}
-
-export function updateTriggersCount(
-	triggersCountStore: Writable<TriggersCount | undefined>,
-	type: TriggerType,
-	action: 'add' | 'remove',
-	primaryCfg?: Record<string, any>,
-	isPrimary?: boolean
-) {
-	// Map trigger types to their corresponding count property names
-	const countPropertyMap: Record<TriggerType, string | undefined> = {
-		webhook: undefined,
-		email: undefined,
-		schedule: 'schedule_count',
-		http: 'http_routes_count',
-		websocket: 'websocket_count',
-		postgres: 'postgres_count',
-		kafka: 'kafka_count',
-		nats: 'nats_count',
-		mqtt: 'mqtt_count',
-		sqs: 'sqs_count',
-		gcp: 'gcp_count',
-		poll: undefined,
-		cli: undefined
-	}
-
-	const countProperty = countPropertyMap[type]
-
-	triggersCountStore.update((triggersCount) => {
-		// Handle special case for schedule
-		if (type === 'schedule') {
-			if (action === 'add' && primaryCfg) {
-				return {
-					...(triggersCount ?? {}),
-					schedule_count: (triggersCount?.schedule_count ?? 0) + 1,
-					primary_schedule: primaryCfg?.schedule
-				}
-			} else if (action === 'remove') {
-				return {
-					...(triggersCount ?? {}),
-					schedule_count: (triggersCount?.schedule_count ?? 1) - 1,
-					primary_schedule: isPrimary ? undefined : triggersCount?.primary_schedule
-				}
-			}
-		}
-
-		// Handle standard count updates
-		if (countProperty && action === 'add') {
-			return {
-				...(triggersCount ?? {}),
-				[countProperty]: (triggersCount?.[countProperty] ?? 0) + 1
-			}
-		} else if (countProperty && action === 'remove') {
-			return {
-				...(triggersCount ?? {}),
-				[countProperty]: (triggersCount?.[countProperty] ?? 1) - 1
-			}
-		}
-
-		return triggersCount
-	})
-}
-
-// TODO: Remove this once we've migrated all the trigger kinds to the new TriggerType enum
-export function triggerKindToTriggerType(kind: TriggerKind): TriggerType | undefined {
-	switch (kind) {
-		case 'webhooks':
-			return 'webhook'
-		case 'emails':
-			return 'email'
-		case 'schedules':
-			return 'schedule'
-		case 'routes':
-			return 'http'
-		case 'websockets':
-			return 'websocket'
-		case 'postgres':
-			return 'postgres'
-		case 'kafka':
-			return 'kafka'
-		case 'nats':
-			return 'nats'
-		case 'mqtt':
-			return 'mqtt'
-		case 'sqs':
-			return 'sqs'
-		case 'gcp':
-			return 'gcp'
-		case 'scheduledPoll':
-			return 'poll'
-		default:
-			throw new Error(`Unknown TriggerKind: ${kind}`)
-	}
-}
-
-export async function deployTriggers(
-	triggersToDeploy: Trigger[],
-	workspaceId: string | undefined,
-	isAdmin: boolean,
-	usedTriggerKinds: Writable<string[]>,
-	initialPath?: string,
-	isNew?: boolean
-) {
-	if (!workspaceId) return
-
-	if (isNew && initialPath) {
-		triggersToDeploy.forEach((trigger) => {
-			trigger.draftConfig = {
-				...trigger.draftConfig,
-				script_path: initialPath
-			}
-		})
-	}
-
-	// Map of trigger types to their save functions
-	const triggerSaveFunctions: Record<TriggerType, Function | undefined> = {
-		webhook: undefined,
-		email: undefined,
-		schedule: (trigger: Trigger) => {
-			if (trigger.isPrimary && initialPath) {
-				trigger.draftConfig = {
-					...trigger.draftConfig,
-					path: initialPath,
-					script_path: initialPath
-				}
-			}
-			return saveScheduleFromCfg(trigger.draftConfig ?? {}, !trigger.isDraft, workspaceId)
-		},
-		http: (trigger: Trigger) =>
-			saveHttpRouteFromCfg(
-				trigger.path ?? trigger.draftConfig?.path ?? '',
-				trigger.draftConfig ?? {},
-				!trigger.isDraft,
-				workspaceId,
-				isAdmin,
-				usedTriggerKinds
-			),
-		websocket: (trigger: Trigger) =>
-			saveWebsocketTriggerFromCfg(
-				trigger.path ?? trigger.draftConfig?.path ?? '',
-				trigger.draftConfig ?? {},
-				!trigger.isDraft,
-				workspaceId,
-				usedTriggerKinds
-			),
-		postgres: (trigger: Trigger) =>
-			savePostgresTriggerFromCfg(
-				trigger.path ?? trigger.draftConfig?.path ?? '',
-				trigger.draftConfig ?? {},
-				!trigger.isDraft,
-				workspaceId,
-				usedTriggerKinds
-			),
-		kafka: (trigger: Trigger) =>
-			saveKafkaTriggerFromCfg(
-				trigger.path ?? trigger.draftConfig?.path ?? '',
-				trigger.draftConfig ?? {},
-				!trigger.isDraft,
-				workspaceId,
-				usedTriggerKinds
-			),
-		nats: (trigger: Trigger) =>
-			saveNatsTriggerFromCfg(
-				trigger.path ?? trigger.draftConfig?.path ?? '',
-				trigger.draftConfig ?? {},
-				!trigger.isDraft,
-				workspaceId,
-				usedTriggerKinds
-			),
-		mqtt: (trigger: Trigger) =>
-			saveMqttTriggerFromCfg(
-				trigger.path ?? trigger.draftConfig?.path ?? '',
-				trigger.draftConfig ?? {},
-				!trigger.isDraft,
-				workspaceId,
-				usedTriggerKinds
-			),
-		sqs: (trigger: Trigger) =>
-			saveSqsTriggerFromCfg(
-				trigger.path ?? trigger.draftConfig?.path ?? '',
-				trigger.draftConfig ?? {},
-				!trigger.isDraft,
-				workspaceId,
-				usedTriggerKinds
-			),
-		gcp: (trigger: Trigger) =>
-			saveGcpTriggerFromCfg(
-				trigger.path ?? trigger.draftConfig?.path ?? '',
-				trigger.draftConfig ?? {},
-				!trigger.isDraft,
-				workspaceId,
-				usedTriggerKinds
-			),
-		poll: undefined,
-		cli: undefined
-	}
-
-	await Promise.all(
-		triggersToDeploy.map(async (trigger) => {
-			const saveFunction = triggerSaveFunctions[trigger.type]
-			if (saveFunction) {
-				await saveFunction(trigger)
-			} else {
-				console.warn(`No save function defined for trigger type: ${trigger.type}`)
-			}
-		})
-	)
-}
-
-export function handleSelectTriggerFromKind(
-	triggersState: Triggers,
-	triggersCountStore: Writable<TriggersCount | undefined>,
-	initialPath: string | undefined,
-	triggerKind: TriggerKind
-) {
-	const triggerType = triggerKindToTriggerType(triggerKind)
-
-	if (!triggerType) {
-		return
-	}
-
-	const existingTriggerIndex = triggersState.triggers.findIndex(
-		(trigger) => trigger.type === triggerType
-	)
-
-	if (existingTriggerIndex !== -1) {
-		triggersState.selectedTriggerIndex = existingTriggerIndex
-	} else {
-		const newTrigger = triggersState.addDraftTrigger(
-			triggersCountStore,
-			triggerType,
-			triggerType === 'schedule' ? initialPath : undefined
-		)
-		triggersState.selectedTriggerIndex = newTrigger
-	}
-}
-
-export function handleConfigChange(
-	nCfg: Record<string, any>,
-	initialConfig: Record<string, any> | undefined,
-	saveDisabled: boolean,
-	edit: boolean,
-	onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
-) {
-	let updated = false
-	if (!edit || !initialConfig) {
-		updated = true
-	} else {
-		// We ignore changes to enabled
-		let newCfg = { ...nCfg }
-		if ('enabled' in newCfg) {
-			delete newCfg.enabled
-		}
-		let initialCfg = { ...initialConfig }
-		if ('enabled' in initialCfg) {
-			delete initialCfg.enabled
-		}
-		if (JSON.stringify(newCfg) !== JSON.stringify(initialCfg)) {
-			updated = true
-		}
-	}
-
-	onConfigChange?.(nCfg, saveDisabled, updated)
-}
-
-export function getLightConfig(
-	triggerType: TriggerType,
-	trigger: Record<string, any>
-): Record<string, any> | undefined {
-	if (triggerType === 'schedule') {
-		return { schedule: trigger.schedule, enable: trigger.enable, summary: trigger.summary }
-	} else if (triggerType === 'http') {
-		return { route_path: trigger.route_path, http_method: trigger.http_method }
-	} else if (triggerType === 'websocket') {
-		return { url: trigger.url }
-	} else if (triggerType === 'postgres') {
-		return { postgres_resource_path: trigger.postgres_resource_path }
-	} else if (triggerType === 'kafka') {
-		return { kafka_resource_path: trigger.kafka_resource_path, topics: trigger.topics }
-	} else if (triggerType === 'nats') {
-		return { nats_resource_path: trigger.nats_resource_path, subjects: trigger.subjects }
-	} else if (triggerType === 'mqtt') {
-		return {
-			mqtt_resource_path: trigger.mqtt_resource_path,
-			subscribe_topics: trigger.subscribe_topics
-		}
-	} else if (triggerType === 'sqs') {
-		return { queue_url: trigger.queue_url }
-	} else if (triggerType === 'gcp') {
-		return { gcp_resource_path: trigger.gcp_resource_path, topic: trigger.topic }
-	} else {
-		return undefined
-	}
-}
-
-export function getTriggerLabel(trigger: Trigger): string {
-	const { type, isDraft, draftConfig, lightConfig, path } = trigger
-	const config = draftConfig ?? lightConfig
-
-	if (type === 'webhook') {
-		return 'Webhook'
-	} else if (type === 'email') {
-		return 'Email'
-	} else if (type === 'cli') {
-		return 'CLI'
-	} else if (type === 'http' && !emptyString(config?.route_path)) {
-		return `${(draftConfig?.http_method ?? lightConfig?.http_method ?? 'post').toUpperCase()} ${draftConfig?.route_path ?? lightConfig?.route_path}`
-	} else if (type === 'schedule' && config?.summary) {
-		return `${config?.summary}`
-	} else if (type === 'kafka' && config?.topics && config?.kafka_resource_path) {
-		return `${config?.kafka_resource_path} - ${config?.topics.join(', ')}`
-	} else if (type === 'nats' && config?.subjects && config?.nats_resource_path) {
-		return `${config?.nats_resource_path} - ${config?.subjects.join(', ')}`
-	} else if (type === 'mqtt' && config?.subscribe_topics && config?.mqtt_resource_path) {
-		const topics = config?.subscribe_topics.map((topic: any) => topic.topic).join(', ')
-		return `${config?.mqtt_resource_path} - ${topics}`
-	} else if (type === 'sqs' && config?.queue_url) {
-		return `${config?.queue_url}`
-	} else if (type === 'gcp' && config?.gcp_resource_path && config?.topic) {
-		return `${config?.gcp_resource_path} - ${config?.topic}`
-	} else if (type === 'websocket' && config?.url) {
-		return `${config?.url}`
-	} else if (isDraft && draftConfig?.path) {
-		return `${draftConfig?.path}`
-	} else if (isDraft) {
-		return `New ${type.replace(/s$/, '')} trigger`
-	} else {
-		return path ?? ''
-	}
-}
-
-export function sortTriggers(triggers: Trigger[]): Trigger[] {
-	const triggerTypeOrder = [
-		'webhook',
-		'cli',
-		'email',
-		'poll',
-		'schedule',
-		'http',
-		'websocket',
-		'postgres',
-		'kafka',
-		'nats',
-		'mqtt',
-		'sqs',
-		'gcp'
-	]
-
-	return triggers.sort((a, b) => {
-		// Draft triggers always come last
-		if (a.isDraft && !b.isDraft) return 1
-		if (!a.isDraft && b.isDraft) return -1
-
-		// If both are drafts or both are not drafts, sort by type order
-		if (a.isDraft === b.isDraft) {
-			const aIndex = triggerTypeOrder.indexOf(a.type)
-			const bIndex = triggerTypeOrder.indexOf(b.type)
-
-			// If both types are in the order array, sort by their position
-			if (aIndex >= 0 && bIndex >= 0) {
-				return aIndex - bIndex
-			}
-
-			// If only one type is in the order array, it comes first
-			if (aIndex >= 0) return -1
-			if (bIndex >= 0) return 1
-
-			// If neither type is in the order array, maintain original order
-			return 0
-		}
-
-		return 0
-	})
-}
-
-export type FlowWithDraftAndDraftTriggers = Flow & {
-	draft?: Flow & {
-		draft_triggers?: Trigger[]
-	}
-}
-
-export type NewScriptWithDraftAndDraftTriggers = NewScript & {
-	draft?: NewScript & { draft_triggers?: Trigger[] }
-	hash: string
-}
-
-// Get rid of deployed triggers from the saved flow in the case there is a match with a deployed trigger
-export function filterDraftTriggers(
-	savedValue: FlowWithDraftAndDraftTriggers | NewScriptWithDraftAndDraftTriggers,
-	triggersState: Triggers
-): FlowWithDraftAndDraftTriggers | NewScriptWithDraftAndDraftTriggers {
-	const deployedTriggers = triggersState.triggers.filter((t) => !t.draftConfig && !t.isDraft)
-	let newSavedValue = savedValue
-
-	const filterMatchingTriggers = (savedTriggers: Trigger[], deployedTriggers: Trigger[]) => {
-		return savedTriggers.filter(
-			(savedTrigger) =>
-				!deployedTriggers.some(
-					(deployedTrigger) =>
-						deployedTrigger.path === savedTrigger.draftConfig?.path &&
-						deployedTrigger.type === savedTrigger.type
-				)
-		)
-	}
-
-	const savedDraftTriggersFiltered = filterMatchingTriggers(
-		newSavedValue?.draft?.draft_triggers ?? [],
-		deployedTriggers
-	)
-	if (newSavedValue?.draft?.draft_triggers) {
-		newSavedValue = {
-			...newSavedValue,
-			draft: {
-				...newSavedValue.draft,
-				draft_triggers:
-					savedDraftTriggersFiltered.length > 0 ? savedDraftTriggersFiltered : undefined
-			}
-		} as typeof newSavedValue
-	}
-	triggersState.setTriggers([
-		...triggersState.triggers.filter((t) => !t.draftConfig),
-		...savedDraftTriggersFiltered
-	])
-	return newSavedValue
-}
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksCapture.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksCapture.svelte
deleted file mode 100644
index b6392bf41b..0000000000
--- a/frontend/src/lib/components/triggers/webhook/WebhooksCapture.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script lang="ts">
-	import Label from '../../Label.svelte'
-	import bash from 'svelte-highlight/languages/bash'
-	import { isObject } from '$lib/utils'
-	import CopyableCodeBlock from '../../details/CopyableCodeBlock.svelte'
-	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
-	import { workspaceStore } from '$lib/stores'
-	import { Url } from '$lib/components/common'
-	import { fade } from 'svelte/transition'
-
-	interface Props {
-		isFlow?: boolean
-		path?: string
-		runnableArgs: any
-		captureInfo?: CaptureInfo | undefined
-		hasPreprocessor?: boolean
-		captureLoading?: boolean
-	}
-
-	let {
-		isFlow = false,
-		path = '',
-		runnableArgs,
-		captureInfo = undefined,
-		hasPreprocessor = false,
-		captureLoading = false
-	}: Props = $props()
-
-	let cleanedRunnableArgs = $derived(
-		isObject(runnableArgs) && 'wm_trigger' in runnableArgs
-			? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
-			: runnableArgs
-	)
-
-	let captureUrl = $derived(
-		`${location.origin}/api/w/${$workspaceStore}/capture_u/webhook/${
-			isFlow ? 'flow' : 'script'
-		}/${path}`
-	)
-
-	function captureCurlCode() {
-		return `curl \\
--X POST ${captureUrl} \\
--H 'Content-Type: application/json' \\
--d '${JSON.stringify(cleanedRunnableArgs ?? {}, null, 2)}'`
-	}
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		{captureInfo}
-		disabled={false}
-		on:captureToggle
-		captureType="webhook"
-		{captureLoading}
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{isFlow}
-		{hasPreprocessor}
-	>
-		{#snippet description()}
-			{#if captureInfo.active}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Send a POST request to the URL below to simulate a webhook event.
-				</p>
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to webhook events on this test URL.
-				</p>
-			{/if}
-		{/snippet}
-		<Url label="Test URL" url={captureUrl} />
-
-		<Label label="Example cURL" disabled={!captureInfo.active}>
-			<CopyableCodeBlock code={captureCurlCode()} language={bash} disabled={!captureInfo.active} />
-		</Label>
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
index 1ee21df607..bd8bb7d044 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
@@ -21,6 +21,9 @@
 	import { workspaceStore, userStore } from '$lib/stores'
 	import UserSettings from '../../UserSettings.svelte'
 	import { generateRandomString } from '$lib/utils'
+	import CopyableCodeBlock from '../../details/CopyableCodeBlock.svelte'
+	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
 
 	export let isFlow: boolean = false
 	export let path: string = ''
@@ -29,6 +32,9 @@
 	export let runnableArgs: any
 	export let triggerTokens: TriggerTokens | undefined = undefined
 	export let scopes: string[] = []
+	export let showCapture: boolean = false
+	export let captureTable: CaptureTable | undefined = undefined
+	export let captureInfo: CaptureInfo | undefined = undefined
 
 	let webhooks: {
 		async: {
@@ -192,6 +198,17 @@ function waitForJobCompletion(UUID) {
 		return `${mainFunction}\n\n${triggerJobFunction}\n\n${waitForJobCompletionFunction}`
 	}
 
+	let captureUrl = `${location.origin}/api/w/${$workspaceStore}/capture_u/webhook/${
+		isFlow ? 'flow' : 'script'
+	}/${path}`
+
+	function captureCurlCode() {
+		return `curl \\
+-X POST ${captureUrl} \\
+-H 'Content-Type: application/json' \\
+-d '${JSON.stringify(cleanedRunnableArgs ?? {}, null, 2)}'`
+	}
+
 	function curlCode() {
 		return `TOKEN='${token}'
 ${requestType !== 'get_path' ? `BODY='${JSON.stringify(cleanedRunnableArgs ?? {})}'` : ''}
@@ -246,162 +263,195 @@ done`
 	{scopes}
 />
 
-<div class="flex flex-col gap-8">
-	{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
-		<Label label="Token">
-			<div class="flex flex-row justify-between gap-2">
-				<input
-					bind:value={token}
-					placeholder="paste your token here once created to alter examples below"
-					class="!text-xs !font-normal"
+<div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			{captureInfo}
+			disabled={false}
+			on:captureToggle
+			captureType="webhook"
+			bind:captureTable
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+		>
+			<Label label="URL">
+				<ClipboardPanel content={captureUrl} disabled={!captureInfo.active} />
+			</Label>
+
+			<Label label="Example cURL">
+				<CopyableCodeBlock
+					code={captureCurlCode()}
+					language={bash}
+					disabled={!captureInfo.active}
 				/>
-				<Button size="xs" color="light" variant="border" on:click={() => userSettings.openDrawer()}>
-					Create a Webhook-specific Token
-					<Tooltip light>
-						The token will have a scope such that it can only be used to trigger this script. It is
-						safe to share as it cannot be used to impersonate you.
-					</Tooltip>
-				</Button>
-			</div>
-		</Label>
+			</Label>
+		</CaptureSection>
 	{/if}
 
-	<div class="flex flex-col gap-2">
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType} let:item>
-				<ToggleButton
-					label="Async"
-					value="async"
-					tooltip="The returning value is the uuid of the job assigned to execute the job."
-					{item}
-				/>
-				<ToggleButton
-					label="Sync"
-					value="sync"
-					tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-					{item}
-				/>
-			</ToggleButtonGroup>
-		</div>
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} let:item>
-				<ToggleButton
-					label="POST by path"
-					value="path"
-					icon={ArrowUpRight}
-					{item}
-					selectedColor="#fb923c"
-				/>
-				{#if !isFlow}
+	<div class="flex flex-col gap-8">
+		{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
+			<Label label="Token">
+				<div class="flex flex-row justify-between gap-2">
+					<input
+						bind:value={token}
+						placeholder="paste your token here once created to alter examples below"
+						class="!text-xs !font-normal"
+					/>
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						on:click={() => userSettings.openDrawer()}
+					>
+						Create a Webhook-specific Token
+						<Tooltip light>
+							The token will have a scope such that it can only be used to trigger this script. It
+							is safe to share as it cannot be used to impersonate you.
+						</Tooltip>
+					</Button>
+				</div>
+			</Label>
+		{/if}
+
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-row justify-between">
+				<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div
+				>
+				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType} let:item>
 					<ToggleButton
-						label="POST by hash"
-						value="hash"
-						icon={ArrowUpRight}
-						selectedColor="#fb923c"
-						disabled={!hash}
+						label="Async"
+						value="async"
+						tooltip="The returning value is the uuid of the job assigned to execute the job."
 						{item}
 					/>
+					<ToggleButton
+						label="Sync"
+						value="sync"
+						tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+						{item}
+					/>
+				</ToggleButtonGroup>
+			</div>
+			<div class="flex flex-row justify-between">
+				<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
+				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} let:item>
+					<ToggleButton
+						label="POST by path"
+						value="path"
+						icon={ArrowUpRight}
+						{item}
+						selectedColor="#fb923c"
+					/>
+					{#if !isFlow}
+						<ToggleButton
+							label="POST by hash"
+							value="hash"
+							icon={ArrowUpRight}
+							selectedColor="#fb923c"
+							disabled={!hash}
+							{item}
+						/>
+					{/if}
+
+					<ToggleButton
+						label="GET by path"
+						value="get_path"
+						icon={ArrowDownRight}
+						disabled={webhookType !== 'sync'}
+						{item}
+						selectedColor="#14b8a6"
+					/>
+				</ToggleButtonGroup>
+			</div>
+			<div class="flex flex-row justify-between">
+				<div class="text-sm font-normal text-secondary flex flex-row items-center"
+					>Token configuration</div
+				>
+				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType} let:item>
+					<ToggleButton label="Token in Headers" value="headers" {item} />
+					<ToggleButton label="Token in Query" value="query" {item} />
+				</ToggleButtonGroup>
+			</div>
+		</div>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div>
+			<Tabs bind:selected={selectedTab}>
+				<Tab value="rest" size="xs">REST</Tab>
+				{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
+					<Tab value="curl" size="xs">Curl</Tab>
 				{/if}
+				<Tab value="fetch" size="xs">Fetch</Tab>
 
-				<ToggleButton
-					label="GET by path"
-					value="get_path"
-					icon={ArrowDownRight}
-					disabled={webhookType !== 'sync'}
-					{item}
-					selectedColor="#14b8a6"
-				/>
-			</ToggleButtonGroup>
-		</div>
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center"
-				>Token configuration</div
-			>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType} let:item>
-				<ToggleButton label="Token in Headers" value="headers" {item} />
-				<ToggleButton label="Token in Query" value="query" {item} />
-			</ToggleButtonGroup>
-		</div>
-	</div>
-
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div>
-		<Tabs bind:selected={selectedTab}>
-			<Tab value="rest" size="xs">REST</Tab>
-			{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
-				<Tab value="curl" size="xs">Curl</Tab>
-			{/if}
-			<Tab value="fetch" size="xs">Fetch</Tab>
-
-			<svelte:fragment slot="content">
-				{#key token}
-					<TabContent value="rest" class="flex flex-col flex-1 h-full ">
-						<div class="flex flex-col gap-2">
-							<Label label="Url">
-								<ClipboardPanel content={url} />
-							</Label>
-
-							{#if requestType !== 'get_path'}
-								<Label label="Body">
-									<ClipboardPanel content={JSON.stringify(cleanedRunnableArgs ?? {}, null, 2)} />
+				<svelte:fragment slot="content">
+					{#key token}
+						<TabContent value="rest" class="flex flex-col flex-1 h-full ">
+							<div class="flex flex-col gap-2">
+								<Label label="Url">
+									<ClipboardPanel content={url} />
 								</Label>
-							{/if}
-							{#key requestType}
-								{#key tokenType}
-									<Label label="Headers">
-										<ClipboardPanel content={JSON.stringify(headers(), null, 2)} />
+
+								{#if requestType !== 'get_path'}
+									<Label label="Body">
+										<ClipboardPanel content={JSON.stringify(cleanedRunnableArgs ?? {}, null, 2)} />
 									</Label>
+								{/if}
+								{#key requestType}
+									{#key tokenType}
+										<Label label="Headers">
+											<ClipboardPanel content={JSON.stringify(headers(), null, 2)} />
+										</Label>
+									{/key}
 								{/key}
-							{/key}
-						</div>
-					</TabContent>
-					<TabContent value="curl" class="flex flex-col flex-1 h-full">
-						<div class="relative">
+							</div>
+						</TabContent>
+						<TabContent value="curl" class="flex flex-col flex-1 h-full">
+							<div class="relative">
+								{#key runnableArgs}
+									{#key requestType}
+										{#key webhookType}
+											{#key tokenType}
+												<div
+													class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
+													on:click={(e) => {
+														e.preventDefault()
+														copyToClipboard(curlCode())
+													}}
+												>
+													<Highlight language={bash} code={curlCode()} />
+													<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
+												</div>
+											{/key}
+										{/key}
+									{/key}
+								{/key}
+							</div>
+						</TabContent>
+						<TabContent value="fetch">
 							{#key runnableArgs}
 								{#key requestType}
 									{#key webhookType}
 										{#key tokenType}
-											<div
-												class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-												on:click={(e) => {
-													e.preventDefault()
-													copyToClipboard(curlCode())
-												}}
-											>
-												<Highlight language={bash} code={curlCode()} />
-												<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
-											</div>
-										{/key}
-									{/key}
-								{/key}
+											{#key token}
+												<div
+													class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
+													on:click={(e) => {
+														e.preventDefault()
+														copyToClipboard(fetchCode())
+													}}
+												>
+													<Highlight language={typescript} code={fetchCode()} />
+													<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
+												</div>
+											{/key}{/key}{/key}{/key}
 							{/key}
-						</div>
-					</TabContent>
-					<TabContent value="fetch">
-						{#key runnableArgs}
-							{#key requestType}
-								{#key webhookType}
-									{#key tokenType}
-										{#key token}
-											<div
-												class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-												on:click={(e) => {
-													e.preventDefault()
-													copyToClipboard(fetchCode())
-												}}
-											>
-												<Highlight language={typescript} code={fetchCode()} />
-												<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
-											</div>
-										{/key}{/key}{/key}{/key}
-						{/key}
-					</TabContent>
-				{/key}
-			</svelte:fragment>
-		</Tabs>
+						</TabContent>
+					{/key}
+				</svelte:fragment>
+			</Tabs>
+		</div>
+		<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="webhook" />
 	</div>
-	<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="webhook" />
 </div>
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte
index 5893ee2a17..485a433e97 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte
@@ -2,40 +2,30 @@
 	import { Alert } from '$lib/components/common'
 	import Description from '$lib/components/Description.svelte'
 	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
-	import WebhooksConfigSection from './WebhooksConfigSection.svelte'
-	import { Section } from '$lib/components/common'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
 
-	interface Props {
-		token: string
-		args?: Record<string, any>
-		scopes?: string[]
-		isFlow?: boolean
-		hash?: string | undefined
-		path: string
-		newItem?: boolean
-	}
+	export let token: string
+	export let args: Record<string, any> = {}
+	export let scopes: string[] = []
+	export let isFlow: boolean = false
+	export let hash: string | undefined = undefined
+	export let path: string
+	export let newItem: boolean = false
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
-	let {
-		token,
-		args = {},
-		scopes = [],
-		isFlow = false,
-		hash = undefined,
-		path,
-		newItem = false
-	}: Props = $props()
-
-	let data = $derived({
+	$: data = {
 		hash,
 		token,
 		scopes,
 		args
-	})
+	}
 </script>
 
 <HighlightTheme />
 
-<Section label="Webhooks" class="flex flex-col gap-4">
+<div class="flex flex-col w-full gap-4">
 	<Description link="https://www.windmill.dev/docs/core_concepts/webhooks">
 		Webhooks trigger scripts or flows via HTTP requests. Each webhook can be configured to run
 		synchronously or asynchronously. You can secure webhooks using tokens with specific permissions.
@@ -47,12 +37,22 @@
 		</Alert>
 	{/if}
 
-	<WebhooksConfigSection
+	<TriggersEditorSection
+		on:applyArgs
+		on:addPreprocessor
+		on:refreshCaptures
+		on:updateSchema
+		on:testWithArgs
+		cloudDisabled={false}
+		triggerType="webhook"
 		{isFlow}
+		{data}
+		noSave
 		{path}
-		hash={data?.hash}
-		token={data?.token}
-		runnableArgs={data?.args}
-		scopes={data?.scopes}
+		{isEditor}
+		{canHavePreprocessor}
+		{hasPreprocessor}
+		{newItem}
+		alwaysOpened={true}
 	/>
-</Section>
+</div>
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
deleted file mode 100644
index ba64404e12..0000000000
--- a/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition'
-	import type { CaptureInfo } from '../CaptureSection.svelte'
-	import CaptureSection from '../CaptureSection.svelte'
-
-	interface Props {
-		captureInfo?: CaptureInfo | undefined
-		isValid?: boolean | undefined
-		hasPreprocessor?: boolean
-		isFlow?: boolean
-		captureLoading?: boolean
-	}
-
-	let {
-		captureInfo = undefined,
-		isValid = undefined,
-		hasPreprocessor = false,
-		isFlow = false,
-		captureLoading = false
-	}: Props = $props()
-</script>
-
-{#if captureInfo}
-	<CaptureSection
-		captureType="websocket"
-		disabled={isValid === false}
-		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
-		{hasPreprocessor}
-		{isFlow}
-		{captureLoading}
-	>
-		<svelte:fragment slot="description">
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listenning to websocket events...
-					</p>
-				{:else}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to websocket...
-					</p>
-				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to websocket events.
-				</p>
-			{/if}
-		</svelte:fragment>
-	</CaptureSection>
-{/if}
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
index a229b57215..4f773de7ed 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
@@ -5,20 +5,23 @@
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import { Loader2 } from 'lucide-svelte'
+	import CaptureSection, { type CaptureInfo } from '../CaptureSection.svelte'
+	import CaptureTable from '../CaptureTable.svelte'
 	import { sendUserToast } from '$lib/utils'
 	import type { Schema } from '$lib/common'
 	import { FlowService, ScriptService, type Flow, type Script } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import TestTriggerConnection from '../TestTriggerConnection.svelte'
-	import TestingBadge from '$lib/components/triggers/testingBadge.svelte'
 
 	export let url: string | undefined
 	export let url_runnable_args: Record<string, unknown> | undefined
 	export let dirtyUrl: boolean = false
 	export let can_write: boolean = false
 	export let headless: boolean = false
+	export let showCapture: boolean = false
+	export let captureTable: CaptureTable | undefined = undefined
+	export let captureInfo: CaptureInfo | undefined = undefined
 	export let isValid: boolean = false
-	export let showTestingBadge: boolean = false
 
 	let areRunnableArgsValid: boolean = true
 
@@ -32,11 +35,11 @@
 						? await FlowService.getFlowByPath({
 								workspace: $workspaceStore!,
 								path: url.split(':')[1]
-							})
+						  })
 						: await ScriptService.getScriptByPath({
 								workspace: $workspaceStore!,
 								path: url.split(':')[1]
-							})
+						  })
 					urlRunnableSchema = scriptOrFlow.schema as Schema
 				} catch (err) {
 					sendUserToast(
@@ -78,12 +81,20 @@
 </script>
 
 <div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			disabled={!isValid}
+			on:captureToggle
+			captureType="websocket"
+			{captureInfo}
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:testWithArgs
+			bind:captureTable
+		/>
+	{/if}
 	<Section label="WebSocket" {headless}>
-		<svelte:fragment slot="header">
-			{#if showTestingBadge}
-				<TestingBadge />
-			{/if}
-		</svelte:fragment>
 		<div class="mb-2">
 			<ToggleButtonGroup
 				selected={url?.startsWith('$') ? 'runnable' : 'static'}
@@ -91,12 +102,10 @@
 					url = ev.detail === 'runnable' ? '$script:' : ''
 					url_runnable_args = {}
 				}}
-				disabled={!can_write}
 				let:item
-				let:disabled
 			>
-				<ToggleButton value="static" label="Static URL" {item} {disabled} />
-				<ToggleButton value="runnable" label="Runnable result as URL" {item} {disabled} />
+				<ToggleButton value="static" label="Static URL" {item} />
+				<ToggleButton value="runnable" label="Runnable result as URL" {item} />
 			</ToggleButtonGroup>
 		</div>
 		{#if url?.startsWith('$')}
@@ -117,7 +126,6 @@
 							const { path, itemKind } = ev.detail
 							url = `$${itemKind}:${path ?? ''}`
 						}}
-						disabled={!can_write}
 					/>
 					<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
 						{dirtyUrl ? urlError : ''}
@@ -138,7 +146,6 @@
 								bind:isValid={areRunnableArgsValid}
 								shouldHideNoInputs
 								class="text-xs"
-								disabled={!can_write}
 							/>
 						{/key}
 					{/await}
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditor.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditor.svelte
index d1112ccd20..65c0f7f1b3 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditor.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditor.svelte
@@ -1,23 +1,8 @@
 <script lang="ts">
 	import { tick } from 'svelte'
 	import WebsocketTriggerEditorInner from './WebsocketTriggerEditorInner.svelte'
-	import type { Snippet } from 'svelte'
 
-	interface Props {
-		useDrawer?: boolean
-		description?: Snippet | undefined
-		hideTarget?: boolean
-		onUpdate?: (path?: string) => void
-	}
-
-	let {
-		useDrawer = true,
-		description = undefined,
-		hideTarget = false,
-		onUpdate = undefined
-	}: Props = $props()
-
-	let open = $state(false)
+	let open = false
 	export async function openEdit(ePath: string, isFlow: boolean) {
 		open = true
 		await tick()
@@ -34,15 +19,9 @@
 		drawer?.openNew(is_flow, initial_script_path, defaultValues)
 	}
 
-	let drawer: WebsocketTriggerEditorInner | undefined = $state(undefined)
+	let drawer: WebsocketTriggerEditorInner
 </script>
 
 {#if open}
-	<WebsocketTriggerEditorInner
-		{onUpdate}
-		bind:this={drawer}
-		{useDrawer}
-		{description}
-		{hideTarget}
-	/>
+	<WebsocketTriggerEditorInner on:update bind:this={drawer} />
 {/if}
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
index fda17690e8..fea948ee30 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
@@ -16,118 +16,45 @@
 	} from '$lib/gen'
 	import { usedTriggerKinds, userStore, workspaceStore } from '$lib/stores'
 	import { canWrite, emptySchema, emptyString, sendUserToast } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
-	import { Loader2, X, Plus } from 'lucide-svelte'
+	import { Loader2, Save, X, Plus } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
 	import { fade } from 'svelte/transition'
 	import type { Schema } from '$lib/common'
 	import JsonEditor from '$lib/components/JsonEditor.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
-	import type { Snippet } from 'svelte'
 
-	import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte'
-	import { saveWebsocketTriggerFromCfg } from './utils'
-	import { handleConfigChange } from '../utils'
-
-	interface Props {
-		useDrawer?: boolean
-		description?: Snippet | undefined
-		hideTarget?: boolean
-		hideTooltips?: boolean
-		useEditButton?: boolean
-		isEditor?: boolean
-		allowDraft?: boolean
-		hasDraft?: boolean
-		isDraftOnly?: boolean
-		isDeployed?: boolean
-		cloudDisabled?: boolean
-		customLabel?: Snippet
-		onConfigChange?: (cfg: Record<string, any>, saveDisabled: boolean, updated: boolean) => void
-		onCaptureConfigChange?: (cfg: Record<string, any>, isValid: boolean) => void
-		onUpdate?: (path?: string) => void
-		onDelete?: () => void
-		onReset?: () => void
-	}
-
-	let {
-		useDrawer = true,
-		description = undefined,
-		hideTarget = false,
-		hideTooltips = false,
-		isEditor = false,
-		allowDraft = false,
-		hasDraft = false,
-		isDraftOnly = false,
-		isDeployed = false,
-		customLabel = undefined,
-		onConfigChange = undefined,
-		onCaptureConfigChange = undefined,
-		onUpdate = undefined,
-		onDelete = undefined,
-		onReset = undefined,
-		cloudDisabled = false
-	}: Props = $props()
-
-	let drawer: Drawer | undefined = $state()
-	let is_flow: boolean = $state(false)
-	let initialPath = $state('')
-	let edit = $state(true)
-	let itemKind: 'flow' | 'script' = $state('script')
-	let script_path = $state('')
-	let initialScriptPath = $state('')
-	let fixedScriptPath = $state('')
-	let path: string = $state('')
-	let pathError = $state('')
-	let url = $state('')
-	let dirtyUrl = $state(false)
-	let enabled = $state(false)
+	let drawer: Drawer
+	let is_flow: boolean = false
+	let initialPath = ''
+	let edit = true
+	let itemKind: 'flow' | 'script' = 'script'
+	let script_path = ''
+	let initialScriptPath = ''
+	let fixedScriptPath = ''
+	let path: string = ''
+	let pathError = ''
+	let url = ''
+	let dirtyUrl = false
+	let enabled = false
 	let filters: {
 		key: string
 		value: any
-	}[] = $state([])
-	let initial_messages: WebsocketTriggerInitialMessage[] = $state([])
-	let url_runnable_args: Record<string, any> | undefined = $state({})
-	let can_return_message = $state(false)
-	let dirtyPath = $state(false)
-	let can_write = $state(true)
-	let drawerLoading = $state(true)
-	let showLoading = $state(false)
-	let initialConfig: Record<string, any> | undefined = undefined
-	let deploymentLoading = $state(false)
-	let isValid = $state(false)
+	}[] = []
+	let initial_messages: WebsocketTriggerInitialMessage[] = []
+	let url_runnable_args: Record<string, any> | undefined = {}
+	let can_return_message = false
+	let dirtyPath = false
+	let can_write = true
+	let drawerLoading = true
 
-	const websocketCfg = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
-	const saveDisabled = $derived.by(() => {
-		const invalidInitialMessages = initial_messages.some((v) => {
-			if ('runnable_result' in v) {
-				return !v.runnable_result.path
-			}
-			return false
-		})
-		return (
-			pathError !== '' ||
-			!isValid ||
-			invalidInitialMessages ||
-			drawerLoading ||
-			!can_write ||
-			emptyString(script_path)
-		)
-	})
+	const dispatch = createEventDispatcher()
 
-	$effect(() => {
-		is_flow = itemKind === 'flow'
-	})
+	$: is_flow = itemKind === 'flow'
 
-	export async function openEdit(
-		ePath: string,
-		isFlow: boolean,
-		defaultConfig?: Record<string, any>
-	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
+	export async function openEdit(ePath: string, isFlow: boolean) {
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -136,16 +63,11 @@
 			edit = true
 			dirtyPath = false
 			dirtyUrl = false
-			await loadTrigger(defaultConfig)
+			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load websocket trigger: ${err}`, true)
 		} finally {
-			if (!defaultConfig) {
-				initialConfig = structuredClone($state.snapshot(getSaveCfg()))
-			}
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
@@ -154,9 +76,6 @@
 		fixedScriptPath_?: string,
 		defaultValues?: Record<string, any>
 	) {
-		let loadingTimeout = setTimeout(() => {
-			showLoading = true
-		}, 100) // Do not show loading spinner for the first 100ms
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -168,7 +87,7 @@
 			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath
-			path = defaultValues?.path ?? ''
+			path = ''
 			initialPath = ''
 			filters = []
 			initial_messages = []
@@ -176,55 +95,31 @@
 			dirtyPath = false
 			can_return_message = false
 		} finally {
-			clearTimeout(loadingTimeout)
 			drawerLoading = false
-			showLoading = false
 		}
 	}
 
-	function loadTriggerConfig(cfg?: Record<string, any>): void {
-		script_path = cfg?.script_path
-		initialScriptPath = cfg?.script_path
-		is_flow = cfg?.is_flow
-		path = cfg?.path
-		url = cfg?.url
-		enabled = cfg?.enabled
-		filters = cfg?.filters
-		initial_messages = cfg?.initial_messages ?? []
-		url_runnable_args = cfg?.url_runnable_args
-		can_return_message = cfg?.can_return_message
-		can_write = canWrite(path, cfg?.extra_perms, $userStore)
+	async function loadTrigger(): Promise<void> {
+		const s = await WebsocketTriggerService.getWebsocketTrigger({
+			workspace: $workspaceStore!,
+			path: initialPath
+		})
+		script_path = s.script_path
+		initialScriptPath = s.script_path
+
+		is_flow = s.is_flow
+		path = s.path
+		url = s.url
+		enabled = s.enabled
+		filters = s.filters
+		initial_messages = s.initial_messages ?? []
+		url_runnable_args = s.url_runnable_args
+		can_return_message = s.can_return_message
+
+		can_write = canWrite(s.path, s.extra_perms, $userStore)
 	}
 
-	function getSaveCfg() {
-		return {
-			script_path,
-			initialScriptPath,
-			is_flow,
-			path,
-			url,
-			filters,
-			initial_messages,
-			url_runnable_args,
-			can_return_message,
-			enabled
-		}
-	}
-
-	async function loadTrigger(defaultConfig?: Record<string, any>): Promise<void> {
-		if (defaultConfig) {
-			loadTriggerConfig(defaultConfig)
-			return
-		} else {
-			const s = await WebsocketTriggerService.getWebsocketTrigger({
-				workspace: $workspaceStore!,
-				path: initialPath
-			})
-			loadTriggerConfig(s)
-		}
-	}
-
-	let initialMessageRunnableSchemas: Record<string, Schema> = $state({})
+	let initialMessageRunnableSchemas: Record<string, Schema> = {}
 	async function loadInitialMessageRunnableSchemas(
 		initialMessageRunnables: {
 			path: string
@@ -252,152 +147,133 @@
 			}
 		}
 	}
-	let initialMessageRunnables = $derived(
-		initial_messages
-			.map((v) => ('runnable_result' in v ? v.runnable_result : undefined))
-			.filter((v): v is { path: string; is_flow: boolean; args: ScriptArgs } => !!v)
-	)
-	$effect(() => {
-		loadInitialMessageRunnableSchemas(initialMessageRunnables)
+	$: initialMessageRunnables = initial_messages
+		.map((v) => ('runnable_result' in v ? v.runnable_result : undefined))
+		.filter((v): v is { path: string; is_flow: boolean; args: ScriptArgs } => !!v)
+	$: loadInitialMessageRunnableSchemas(initialMessageRunnables)
+
+	$: invalidInitialMessages = initial_messages.some((v) => {
+		if ('runnable_result' in v) {
+			return !v.runnable_result.path
+		}
+		return false
 	})
 
 	async function updateTrigger(): Promise<void> {
-		deploymentLoading = true
-		const saveCfg = getSaveCfg()
-		const isSaved = await saveWebsocketTriggerFromCfg(
-			initialPath,
-			saveCfg,
-			edit,
-			$workspaceStore!,
-			usedTriggerKinds
-		)
-		if (isSaved) {
-			onUpdate?.(saveCfg.path)
-			drawer?.closeDrawer()
-		}
-		deploymentLoading = false
-	}
-
-	function getCaptureConfig() {
-		return {
-			url,
-			url_runnable_args,
-			path
-		}
-	}
-
-	async function handleToggleEnabled(newEnabled: boolean) {
-		enabled = newEnabled
-		if (!isDraftOnly && !hasDraft) {
-			await WebsocketTriggerService.setWebsocketTriggerEnabled({
-				path: initialPath,
+		if (edit) {
+			await WebsocketTriggerService.updateWebsocketTrigger({
 				workspace: $workspaceStore!,
-				requestBody: { enabled: newEnabled }
+				path: initialPath,
+				requestBody: {
+					path,
+					script_path,
+					is_flow,
+					url,
+					filters,
+					initial_messages,
+					url_runnable_args,
+					can_return_message
+				}
 			})
-			sendUserToast(`${newEnabled ? 'enabled' : 'disabled'} websocket trigger ${initialPath}`)
+			sendUserToast(`Websocket trigger ${path} updated`)
+		} else {
+			await WebsocketTriggerService.createWebsocketTrigger({
+				workspace: $workspaceStore!,
+				requestBody: {
+					path,
+					script_path,
+					is_flow,
+					url,
+					enabled: true,
+					filters,
+					initial_messages,
+					url_runnable_args,
+					can_return_message
+				}
+			})
+			sendUserToast(`Websocket trigger ${path} created`)
 		}
+		if (!$usedTriggerKinds.includes('ws')) {
+			$usedTriggerKinds = [...$usedTriggerKinds, 'ws']
+		}
+		dispatch('update')
+		drawer.closeDrawer()
 	}
 
-	$effect(() => {
-		onCaptureConfigChange?.(captureConfig, isValid)
-	})
-
-	$effect(() => {
-		if (!drawerLoading) {
-			handleConfigChange(websocketCfg, initialConfig, saveDisabled, edit, onConfigChange)
-		}
-	})
+	let isValid = false
 </script>
 
-{#if useDrawer}
-	<Drawer size="800px" bind:this={drawer}>
-		<DrawerContent
-			title={edit
-				? can_write
-					? `Edit WebSocket trigger ${initialPath}`
-					: `WebSocket trigger ${initialPath}`
-				: 'New WebSocket trigger'}
-			on:close={drawer.closeDrawer}
-		>
-			<svelte:fragment slot="actions">
-				{@render actionsButtons()}
-			</svelte:fragment>
-			{@render config()}
-		</DrawerContent>
-	</Drawer>
-{:else}
-	<Section label={!customLabel ? 'WebSocket trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
-			{#if customLabel}
-				{@render customLabel()}
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit WebSocket trigger ${initialPath}`
+				: `WebSocket trigger ${initialPath}`
+			: 'New WebSocket trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								await WebsocketTriggerService.setWebsocketTriggerEnabled({
+									path: initialPath,
+									workspace: $workspaceStore ?? '',
+									requestBody: { enabled: e.detail }
+								})
+								sendUserToast(
+									`${e.detail ? 'enabled' : 'disabled'} websocket trigger ${initialPath}`
+								)
+							}}
+						/>
+					</div>
+				{/if}
+				{#if can_write}
+					<Button
+						startIcon={{ icon: Save }}
+						disabled={pathError != '' ||
+							!isValid ||
+							invalidInitialMessages ||
+							emptyString(script_path) ||
+							!can_write}
+						on:click={updateTrigger}
+					>
+						Save
+					</Button>
+				{/if}
 			{/if}
 		</svelte:fragment>
-		<svelte:fragment slot="action">
-			{@render actionsButtons()}
-		</svelte:fragment>
-		{@render config()}
-	</Section>
-{/if}
-
-{#snippet actionsButtons()}
-	{#if !drawerLoading}
-		<TriggerEditorToolbar
-			{isDraftOnly}
-			{hasDraft}
-			permissions={!drawerLoading && can_write ? 'create' : 'none'}
-			{enabled}
-			{allowDraft}
-			{edit}
-			isLoading={deploymentLoading}
-			{saveDisabled}
-			{isDeployed}
-			onUpdate={updateTrigger}
-			{onDelete}
-			{onReset}
-			onToggleEnabled={handleToggleEnabled}
-			{cloudDisabled}
-		/>
-	{/if}
-{/snippet}
-
-{#snippet config()}
-	{#if drawerLoading}
-		{#if showLoading}
+		{#if drawerLoading}
 			<Loader2 class="animate-spin" />
-		{/if}
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#if description}
-				{@render description()}
-			{/if}
-			{#if !hideTooltips}
-				<Alert title="Info" type="info" size="xs">
-					{#if edit}
-						Changes can take up to 30 seconds to take effect.
-					{:else}
-						New WebSocket triggers can take up to 30 seconds to start listening.
-					{/if}
-				</Alert>
-			{/if}
-		</div>
-		<div class="flex flex-col gap-12 mt-6">
-			<div class="flex flex-col gap-4">
-				<Label label="Path">
-					<Path
-						bind:dirty={dirtyPath}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						checkInitialPathExistence={!edit}
-						namePlaceholder="ws_trigger"
-						kind="websocket_trigger"
-						disabled={!can_write}
-						disableEditing={!can_write}
-					/>
-				</Label>
-			</div>
+		{:else}
+			<Alert title="Info" type="info">
+				{#if edit}
+					Changes can take up to 30 seconds to take effect.
+				{:else}
+					New WebSocket triggers can take up to 30 seconds to start listening.
+				{/if}
+			</Alert>
+			<div class="flex flex-col gap-12 mt-6">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="ws_trigger"
+							kind="websocket_trigger"
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
 
-			{#if !hideTarget}
 				<Section label="Runnable" class="flex flex-col gap-4">
 					<div>
 						<p class="text-xs mb-1 text-tertiary">
@@ -419,12 +295,9 @@
 									btnClasses="ml-4 mt-2"
 									color="dark"
 									size="xs"
-									disabled={!can_write}
 									href={itemKind === 'flow' ? '/flows/add?hub=64' : '/scripts/add?hub=hub%2F19660'}
-									target="_blank"
+									target="_blank">Create from template</Button
 								>
-									Create from template
-								</Button>
 							{/if}
 						</div>
 					</div>
@@ -439,244 +312,230 @@
 							rightTooltip:
 								'Whether the runnable result should be sent as a message to the websocket server when not null.'
 						}}
-						disabled={!can_write}
 					/>
 				</Section>
-			{/if}
 
-			<WebsocketEditorConfigSection
-				bind:url
-				bind:url_runnable_args
-				{dirtyUrl}
-				{can_write}
-				bind:isValid
-				showTestingBadge={isEditor}
-			/>
+				<WebsocketEditorConfigSection
+					bind:url
+					bind:url_runnable_args
+					{dirtyUrl}
+					{can_write}
+					bind:isValid
+				/>
 
-			<Section label="Initial messages">
-				<p class="text-xs mb-1 text-tertiary">
-					Initial messages are sent at the beginning of the connection. They are sent in order.<br
-					/>
-					Raw messages and runnable results are supported.
-				</p>
-				<div class="flex flex-col gap-4 mt-1">
-					{#each initial_messages as v, i}
-						<div class="flex w-full gap-2 items-center">
-							<div class="w-full flex flex-col gap-2 border p-2 rounded-md">
-								<div class="flex flex-row gap-2 w-full">
-									<label class="flex flex-col w-full">
-										<div class="text-secondary text-sm mb-2">Type</div>
-										<select
-											class="w-20"
-											onchange={(e) => {
-												if (e.target?.['value'] === 'raw_message') {
-													initial_messages[i] = {
-														raw_message: '""'
-													}
-												} else {
-													initial_messages[i] = {
-														runnable_result: {
-															path: '',
-															args: {},
-															is_flow: false
+				<Section label="Initial messages">
+					<p class="text-xs mb-1 text-tertiary">
+						Initial messages are sent at the beginning of the connection. They are sent in order.<br
+						/>
+						Raw messages and runnable results are supported.
+					</p>
+					<div class="flex flex-col gap-4 mt-1">
+						{#each initial_messages as v, i}
+							<div class="flex w-full gap-2 items-center">
+								<div class="w-full flex flex-col gap-2 border p-2 rounded-md">
+									<div class="flex flex-row gap-2 w-full">
+										<label class="flex flex-col w-full">
+											<div class="text-secondary text-sm mb-2">Type</div>
+											<select
+												class="w-20"
+												on:change={(e) => {
+													if (e.target?.['value'] === 'raw_message') {
+														initial_messages[i] = {
+															raw_message: '""'
+														}
+													} else {
+														initial_messages[i] = {
+															runnable_result: {
+																path: '',
+																args: {},
+																is_flow: false
+															}
 														}
 													}
-												}
-											}}
-											value={'runnable_result' in v ? 'runnable_result' : 'raw_message'}
-											disabled={!can_write}
-										>
-											<option value="raw_message">Raw message</option>
-											<option value="runnable_result">Runnable result</option>
-										</select>
-									</label>
-								</div>
-								{#if 'raw_message' in v}
-									<div class="flex flex-col w-full">
-										<div class="text-secondary text-sm mb-2">
-											Raw JSON message (if a string, wrapping quotes will be discarded)
+												}}
+												value={'runnable_result' in v ? 'runnable_result' : 'raw_message'}
+											>
+												<option value="raw_message">Raw message</option>
+												<option value="runnable_result">Runnable result</option>
+											</select>
+										</label>
+									</div>
+									{#if 'raw_message' in v}
+										<div class="flex flex-col w-full">
+											<div class="text-secondary text-sm mb-2">
+												Raw JSON message (if a string, wrapping quotes will be discarded)
+											</div>
+											<JsonEditor
+												on:change={(ev) => {
+													const { code } = ev.detail
+													v = {
+														raw_message: code
+													}
+												}}
+												code={v.raw_message}
+											/>
 										</div>
-										<JsonEditor
-											on:change={(ev) => {
-												const { code } = ev.detail
-												initial_messages[i] = {
-													raw_message: code
-												}
-											}}
-											code={v.raw_message}
-											disabled={!can_write}
-										/>
-									</div>
-								{:else if 'runnable_result' in v}
-									<div class="flex flex-col w-full">
-										<div class="text-secondary text-sm">Runnable</div>
-										<ScriptPicker
-											allowFlow={true}
-											itemKind={v.runnable_result?.is_flow ? 'flow' : 'script'}
-											initialPath={v.runnable_result?.path ?? ''}
-											on:select={(ev) => {
-												const { path, itemKind } = ev.detail
-												initial_messages[i] = {
-													runnable_result: {
-														path: path ?? '',
-														args: {},
-														is_flow: itemKind === 'flow'
+									{:else if 'runnable_result' in v}
+										<div class="flex flex-col w-full">
+											<div class="text-secondary text-sm">Runnable</div>
+											<ScriptPicker
+												allowFlow={true}
+												itemKind={v.runnable_result?.is_flow ? 'flow' : 'script'}
+												initialPath={v.runnable_result?.path ?? ''}
+												on:select={(ev) => {
+													const { path, itemKind } = ev.detail
+													v = {
+														runnable_result: {
+															path: path ?? '',
+															args: {},
+															is_flow: itemKind === 'flow'
+														}
 													}
-												}
-											}}
-											disabled={!can_write}
-										/>
+												}}
+											/>
 
-										{#if v.runnable_result?.path}
-											{@const schema =
-												initialMessageRunnableSchemas[
-													v.runnable_result.is_flow
-														? 'flow/' + v.runnable_result.path
-														: v.runnable_result.path
-												]}
-											{#if schema}
-												<p class="font-semibold text-sm mt-4 mb-2">Arguments</p>
-												{#await import('$lib/components/SchemaForm.svelte')}
+											{#if v.runnable_result?.path}
+												{@const schema =
+													initialMessageRunnableSchemas[
+														v.runnable_result.is_flow
+															? 'flow/' + v.runnable_result.path
+															: v.runnable_result.path
+													]}
+												{#if schema}
+													<p class="font-semibold text-sm mt-4 mb-2">Arguments</p>
+													{#await import('$lib/components/SchemaForm.svelte')}
+														<Loader2 class="animate-spin mt-2" />
+													{:then Module}
+														<Module.default
+															{schema}
+															bind:args={v.runnable_result.args}
+															shouldHideNoInputs
+															class="text-xs"
+														/>
+													{/await}
+													{#if schema && schema.properties && Object.keys(schema.properties).length === 0}
+														<div class="text-xs texg-gray-700">This runnable takes no arguments</div
+														>
+													{/if}
+												{:else}
 													<Loader2 class="animate-spin mt-2" />
-												{:then Module}
-													<Module.default
-														{schema}
-														bind:args={v.runnable_result.args}
-														shouldHideNoInputs
-														class="text-xs"
-														disabled={!can_write}
-													/>
-												{/await}
-												{#if schema && schema.properties && Object.keys(schema.properties).length === 0}
-													<div class="text-xs texg-gray-700">This runnable takes no arguments</div>
 												{/if}
-											{:else}
-												<Loader2 class="animate-spin mt-2" />
 											{/if}
-										{/if}
-									</div>
-								{:else}
-									Unknown type
-								{/if}
+										</div>
+									{:else}
+										Unknown type
+									{/if}
+								</div>
+								<button
+									transition:fade|local={{ duration: 100 }}
+									class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
+									aria-label="Clear"
+									on:click={() => {
+										initial_messages = initial_messages.filter((_, index) => index !== i)
+									}}
+								>
+									<X size={14} />
+								</button>
 							</div>
-							<button
-								transition:fade|local={{ duration: 100 }}
-								class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
-								aria-label="Clear"
-								onclick={() => {
-									initial_messages = initial_messages.filter((_, index) => index !== i)
+						{/each}
+
+						<div class="flex items-baseline">
+							<Button
+								variant="border"
+								color="light"
+								size="xs"
+								btnClasses="mt-1"
+								on:click={() => {
+									if (initial_messages == undefined || !Array.isArray(initial_messages)) {
+										initial_messages = []
+									}
+									initial_messages = initial_messages.concat({
+										raw_message: '""'
+									})
 								}}
-								disabled={!can_write}
+								startIcon={{ icon: Plus }}
 							>
-								<X size={14} />
-							</button>
+								Add item
+							</Button>
 						</div>
-					{/each}
-
-					<div class="flex items-baseline">
-						<Button
-							variant="border"
-							color="light"
-							size="xs"
-							btnClasses="mt-1"
-							on:click={() => {
-								if (initial_messages == undefined || !Array.isArray(initial_messages)) {
-									initial_messages = []
-								}
-								initial_messages = initial_messages.concat({
-									raw_message: '""'
-								})
-							}}
-							disabled={!can_write}
-							startIcon={{ icon: Plus }}
-						>
-							Add item
-						</Button>
 					</div>
-				</div>
-			</Section>
+				</Section>
 
-			<Section label="Filters">
-				<p class="text-xs mb-1 text-tertiary">
-					Filters will limit the execution of the trigger to only messages that match all criteria.<br
-					/>
-					The JSON filter checks if the value at the key is equal or a superset of the filter value.
-				</p>
-				<div class="flex flex-col gap-4 mt-1">
-					{#each filters as v, i}
-						<div class="flex w-full gap-2 items-center">
-							<div class="w-full flex flex-col gap-2 border p-2 rounded-md">
-								<div class="flex flex-row gap-2 w-full">
-									<label class="flex flex-col w-full">
-										<div class="text-secondary text-sm mb-2">Type</div>
-										<select
-											class="w-20"
-											onchange={(e) => {
-												if (e.target?.['value']) {
-													filters[i] = {
-														key: '',
-														value: ''
+				<Section label="Filters">
+					<p class="text-xs mb-1 text-tertiary">
+						Filters will limit the execution of the trigger to only messages that match all
+						criteria.<br />
+						The JSON filter checks if the value at the key is equal or a superset of the filter value.
+					</p>
+					<div class="flex flex-col gap-4 mt-1">
+						{#each filters as v, i}
+							<div class="flex w-full gap-2 items-center">
+								<div class="w-full flex flex-col gap-2 border p-2 rounded-md">
+									<div class="flex flex-row gap-2 w-full">
+										<label class="flex flex-col w-full">
+											<div class="text-secondary text-sm mb-2">Type</div>
+											<select
+												class="w-20"
+												on:change={(e) => {
+													if (e.target?.['value']) {
+														filters[i] = {
+															key: '',
+															value: ''
+														}
 													}
-												}
-											}}
-											value={'json'}
-											disabled={!can_write}
-										>
-											<option value="json">JSON</option>
-										</select>
+												}}
+												value={'json'}
+											>
+												<option value="json">JSON</option>
+											</select>
+										</label>
+									</div>
+									<label class="flex flex-col w-full">
+										<div class="text-secondary text-sm mb-2">Key</div>
+										<input type="text" bind:value={v.key} />
+									</label>
+									<!-- svelte-ignore a11y-label-has-associated-control -->
+									<label class="flex flex-col w-full">
+										<div class="text-secondary text-sm mb-2">Value</div>
+										<JsonEditor bind:value={v.value} code={JSON.stringify(v.value)} />
 									</label>
 								</div>
-								<label class="flex flex-col w-full">
-									<div class="text-secondary text-sm mb-2">Key</div>
-									<input type="text" bind:value={v.key} disabled={!can_write} />
-								</label>
-								<!-- svelte-ignore a11y_label_has_associated_control -->
-								<label class="flex flex-col w-full">
-									<div class="text-secondary text-sm mb-2">Value</div>
-									<JsonEditor
-										bind:value={v.value}
-										code={JSON.stringify(v.value)}
-										disabled={!can_write}
-									/>
-								</label>
+								<button
+									transition:fade|local={{ duration: 100 }}
+									class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
+									aria-label="Clear"
+									on:click={() => {
+										filters = filters.filter((_, index) => index !== i)
+									}}
+								>
+									<X size={14} />
+								</button>
 							</div>
-							<button
-								transition:fade|local={{ duration: 100 }}
-								class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
-								aria-label="Clear"
-								onclick={() => {
-									filters = filters.filter((_, index) => index !== i)
-								}}
-								disabled={!can_write}
-							>
-								<X size={14} />
-							</button>
-						</div>
-					{/each}
+						{/each}
 
-					<div class="flex items-baseline">
-						<Button
-							variant="border"
-							color="light"
-							size="xs"
-							btnClasses="mt-1"
-							on:click={() => {
-								if (filters == undefined || !Array.isArray(filters)) {
-									filters = []
-								}
-								filters = filters.concat({
-									key: '',
-									value: ''
-								})
-							}}
-							disabled={!can_write}
-							startIcon={{ icon: Plus }}
-						>
-							Add item
-						</Button>
+						<div class="flex items-baseline">
+							<Button
+								variant="border"
+								color="light"
+								size="xs"
+								btnClasses="mt-1"
+								on:click={() => {
+									if (filters == undefined || !Array.isArray(filters)) {
+										filters = []
+									}
+									filters = filters.concat({
+										key: '',
+										value: ''
+									})
+								}}
+								startIcon={{ icon: Plus }}
+							>
+								Add item
+							</Button>
+						</div>
 					</div>
-				</div>
-			</Section>
-		</div>
-	{/if}
-{/snippet}
+				</Section>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketTriggersPanel.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketTriggersPanel.svelte
index 269d69bb94..12142f8343 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketTriggersPanel.svelte
@@ -1,61 +1,127 @@
 <script lang="ts">
-	import WebsocketTriggerEditorInner from './WebsocketTriggerEditorInner.svelte'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { WebsocketTriggerService, type WebsocketTrigger } from '$lib/gen'
+
+	import { canWrite } from '$lib/utils'
+	import { getContext, onMount } from 'svelte'
+	import WebsocketTriggerEditor from './WebsocketTriggerEditor.svelte'
 	import { isCloudHosted } from '$lib/cloud'
+	import Section from '$lib/components/Section.svelte'
 	import { Alert } from '$lib/components/common'
 	import Description from '$lib/components/Description.svelte'
-	import { onMount } from 'svelte'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import TriggersEditorSection from '../TriggersEditorSection.svelte'
+	export let isFlow: boolean
+	export let path: string
+	export let newItem: boolean = false
+	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
-	let {
-		selectedTrigger,
-		isFlow,
-		path,
-		isDeployed = false,
-		defaultValues = undefined,
-		customLabel = undefined,
-		...restProps
-	} = $props()
-	let wsTriggerEditor: WebsocketTriggerEditorInner | undefined = $state(undefined)
+	let wsTriggerEditor: WebsocketTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
-	async function openWebsocketTriggerEditor(isFlow: boolean, isDraft: boolean) {
-		if (isDraft) {
-			wsTriggerEditor?.openNew(isFlow, path, defaultValues)
-		} else {
-			wsTriggerEditor?.openEdit(selectedTrigger.path, isFlow, selectedTrigger.draftConfig)
-		}
-	}
+	$: path && loadTriggers()
+
+	const { triggersCount, selectedTrigger, defaultValues } =
+		getContext<TriggerContext>('TriggerContext')
 
 	onMount(() => {
-		openWebsocketTriggerEditor(isFlow, selectedTrigger.isDraft ?? false)
+		if (
+			defaultValues &&
+			$selectedTrigger === 'websockets' &&
+			Object.keys($defaultValues ?? {}).length > 0
+		) {
+			wsTriggerEditor.openNew(isFlow, path, $defaultValues)
+			defaultValues.set(undefined)
+		}
 	})
 
-	const cloudDisabled = $derived(isCloudHosted())
+	let wsTriggers: (WebsocketTrigger & { canWrite: boolean })[] | undefined = undefined
+	export async function loadTriggers() {
+		try {
+			wsTriggers = (
+				await WebsocketTriggerService.listWebsocketTriggers({
+					workspace: $workspaceStore ?? '',
+					path,
+					isFlow
+				})
+			).map((x) => {
+				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
+			})
+			$triggersCount = { ...($triggersCount ?? {}), websocket_count: wsTriggers?.length }
+			openForm = wsTriggers?.length === 0 || dontCloseOnLoad
+		} catch (e) {
+			console.error('impossible to load WS triggers', e)
+		}
+	}
 </script>
 
-<div class="flex flex-col gap-4">
-	<WebsocketTriggerEditorInner
-		bind:this={wsTriggerEditor}
-		useDrawer={false}
-		hideTarget
-		hideTooltips={!isDeployed || cloudDisabled}
-		allowDraft={true}
-		hasDraft={!!selectedTrigger.draftConfig}
-		isDraftOnly={selectedTrigger.isDraft}
-		{customLabel}
-		{isDeployed}
-		{cloudDisabled}
-		{...restProps}
-	>
-		{#snippet description()}
-			{#if cloudDisabled}
-				<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-					WebSocket triggers are disabled in the multi-tenant cloud.
-				</Alert>
-			{:else}
-				<Description link="https://www.windmill.dev/docs/core_concepts/websocket_triggers">
-					WebSocket triggers allow real-time bidirectional communication between your scripts/flows
-					and external systems. Each trigger creates a unique WebSocket endpoint.
-				</Description>
-			{/if}
-		{/snippet}
-	</WebsocketTriggerEditorInner>
-</div>
+<WebsocketTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={wsTriggerEditor}
+/>
+
+{#if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		WebSocket triggers are disabled in the multi-tenant cloud.
+	</Alert>
+{:else}
+	<div class="flex flex-col gap-4">
+		<Description link="https://www.windmill.dev/docs/core_concepts/websocket_triggers">
+			WebSocket triggers allow real-time bidirectional communication between your scripts/flows and
+			external systems. Each trigger creates a unique WebSocket endpoint.
+		</Description>
+
+		{#if !newItem && wsTriggers && wsTriggers.length > 0}
+			<Section label="WebSockets">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each wsTriggers as wsTriggers (wsTriggers.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{wsTriggers.path}</div>
+								<div class="col-span-2 truncate">
+									{wsTriggers.url}
+								</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => wsTriggerEditor?.openEdit(wsTriggers.path, isFlow)}
+										class="px-2"
+									>
+										{#if wsTriggers.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+
+		<TriggersEditorSection
+			on:applyArgs
+			on:saveTrigger={(e) => {
+				wsTriggerEditor?.openNew(isFlow, path, e.detail.config)
+			}}
+			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
+			cloudDisabled={false}
+			triggerType="websocket"
+			{isFlow}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+			{openForm}
+		/>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/triggers/websocket/utils.ts b/frontend/src/lib/components/triggers/websocket/utils.ts
deleted file mode 100644
index c112cb0f1a..0000000000
--- a/frontend/src/lib/components/triggers/websocket/utils.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { WebsocketTriggerService } from '$lib/gen'
-import { sendUserToast } from '$lib/toast'
-import type { Writable } from 'svelte/store'
-import { get } from 'svelte/store'
-
-export async function saveWebsocketTriggerFromCfg(
-	initialPath: string,
-	triggerCfg: Record<string, any>,
-	edit: boolean,
-	workspace: string,
-	usedTriggerKinds: Writable<string[]>
-): Promise<boolean> {
-	const requestBody = {
-		path: triggerCfg.path,
-		script_path: triggerCfg.script_path,
-		is_flow: triggerCfg.is_flow,
-		url: triggerCfg.url,
-		filters: triggerCfg.filters,
-		initial_messages: triggerCfg.initial_messages,
-		url_runnable_args: triggerCfg.url_runnable_args,
-		can_return_message: triggerCfg.can_return_message
-	}
-	try {
-		if (edit) {
-			await WebsocketTriggerService.updateWebsocketTrigger({
-				workspace: workspace,
-				path: initialPath,
-				requestBody: requestBody
-			})
-			sendUserToast(`Websocket trigger ${triggerCfg.path} updated`)
-		} else {
-			await WebsocketTriggerService.createWebsocketTrigger({
-				workspace: workspace,
-				requestBody: { ...requestBody, enabled: true }
-			})
-			sendUserToast(`Websocket trigger ${triggerCfg.path} created`)
-		}
-		if (!get(usedTriggerKinds).includes('ws')) {
-			usedTriggerKinds.update((t) => [...t, 'ws'])
-		}
-		return true
-	} catch (error) {
-		sendUserToast(error.body || error.message, true)
-		return false
-	}
-}
diff --git a/frontend/src/lib/script_helpers.ts b/frontend/src/lib/script_helpers.ts
index ceb6644c42..1f61ecc553 100644
--- a/frontend/src/lib/script_helpers.ts
+++ b/frontend/src/lib/script_helpers.ts
@@ -498,15 +498,28 @@ const FETCH_INIT_CODE = `export async function main(
 }`
 
 const BASH_INIT_CODE = `# shellcheck shell=bash
-# arguments of the form X="$I" are parsed as parameters X of type string
+# Arguments of the form X="$1" are parsed as parameters X of type string.
 msg="$1"
 dflt="\${2:-default value}"
 
-# the last line of the stdout is the return value
-# unless you write json to './result.json' or a string to './result.out'
+# Output behavior:
+# By default, the last line printed to stdout will be used as the return value.
+#
+# To override this behavior:
+# - Write a valid JSON object to './result.json' if the output should be parsed as structured JSON.
+#   ⚠️ The contents must be valid JSON, or the result will be rejected.
+#   Example:
+#     echo '{ "message": "Hello world" }' > ./result.json
+#
+# - Write a plain string to './result.out' if the output should be returned as a raw string.
+#   Example:
+#     echo "Hello world" > ./result.out
+
+# Default behavior (return the string via stdout)
 echo "Hello $msg"
 `
 
+
 const DENO_INIT_CODE_TRIGGER = `import * as wmill from "npm:windmill-client@${__pkg__.version}"
 
 export async function main() {
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 6c2bde6431..607428fae3 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -11,7 +11,7 @@ import { deepEqual } from 'fast-equals'
 import YAML from 'yaml'
 import { type UserExt } from './stores'
 import { sendUserToast } from './toast'
-import type { Job, Script } from './gen'
+import type { Job, Script, ScriptLang } from './gen'
 import type { EnumType, SchemaProperty } from './common'
 import type { Schema } from './common'
 export { sendUserToast }
@@ -22,10 +22,49 @@ import type { TriggerKind } from './components/triggers'
 export function isJobCancelable(j: Job): boolean {
 	return j.type === 'QueuedJob' && !j.schedule_path && !j.canceled
 }
+
 export function isJobReRunnable(j: Job): boolean {
 	return (j.job_kind === 'script' || j.job_kind === 'flow') && j.parent_job === undefined
 }
 
+export enum AgentKnownSuffix {
+	ENABLE_LIVE_SHELL = 'enable.live.shell'
+}
+
+export function concatAgentSuffix(
+	suffix: string | undefined,
+	suffixToAppend: string
+): string | undefined {
+	return suffix === undefined ? suffixToAppend : suffix.concat(`_${suffixToAppend}`)
+}
+
+export function checkIfWorkerHasSpecificSuffix(
+	suffixToCheck: AgentKnownSuffix,
+	suffix: string
+): boolean {
+	return suffix
+		.split('_')
+		.slice(1)
+		.some((part) => part === suffixToCheck)
+}
+
+export function removeAgentSuffix(
+	suffix: string | undefined,
+	suffixToRemove: string
+): string | undefined {
+	if (suffix) {
+		const regex = new RegExp(`(?:_${suffixToRemove}|${suffixToRemove})$`)
+		suffix = suffix.replace(regex, '')
+		if (suffix.trim().length === 0) {
+			suffix = undefined
+		}
+	}
+	return suffix
+}
+
+export const WORKER_NAME_PREFIX = 'wk'
+export const AGENT_WORKER_NAME_PREFIX = 'ag'
+
 export function isJobSelectable(selectionType: RunsSelectionMode) {
 	const f: (j: Job) => boolean = {
 		cancel: isJobCancelable,
@@ -566,6 +605,10 @@ export function formatCron(inp: string): string {
 	}
 }
 
+export function scriptLangArrayToCommaList(languages: ScriptLang[]): string {
+	return languages.join(',')
+}
+
 export function cronV1toV2(inp: string): string {
 	let splitted = inp.split(' ')
 	splitted = splitted.filter(String)
@@ -1161,7 +1204,6 @@ export type Item = {
 	disabled?: boolean
 	type?: 'action' | 'delete'
 	hide?: boolean | undefined
-	extra?: Snippet
 }
 
 export function isObjectTooBig(obj: any): boolean {
@@ -1246,15 +1288,6 @@ export function formatDateShort(dateString: string | undefined): string {
 	}).format(date)
 }
 
-export function toJsonStr(result: any) {
-	try {
-		// console.log(result)
-		return JSON.stringify(result ?? null, null, 4) ?? 'null'
-	} catch (e) {
-		return 'error stringifying object: ' + e.toString()
-	}
-}
-
 export function getOS() {
 	const userAgent = window.navigator.userAgent
 	const platform = window.navigator.platform
@@ -1278,7 +1311,6 @@ export function getOS() {
 
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import type { Snippet } from 'svelte'
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
diff --git a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
index 056424922b..e291917235 100644
--- a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
@@ -13,9 +13,9 @@
 	import { decodeState, emptySchema } from '$lib/utils'
 	import { tick } from 'svelte'
 	import { writable } from 'svelte/store'
+	import type { ScheduleTrigger } from '$lib/components/triggers'
 	import type { GetInitialAndModifiedValues } from '$lib/components/common/confirmationModal/unsavedTypes'
 	import { replaceScriptPlaceholderWithItsValues } from '$lib/hub'
-	import type { Trigger } from '$lib/components/triggers/utils'
 
 	let nodraft = $page.url.searchParams.get('nodraft')
 
@@ -43,7 +43,6 @@
 		initialArgs = $initialArgsStore
 		$initialArgsStore = undefined
 	}
-	let flowBuilder: FlowBuilder | undefined = undefined
 
 	export const flowStore = writable<Flow>({
 		summary: '',
@@ -57,8 +56,7 @@
 	})
 	const flowStateStore = writable<FlowState>({})
 
-	let draftTriggersFromUrl: Trigger[] | undefined = undefined
-	let selectedTriggerIndexFromUrl: number | undefined = undefined
+	let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
 	async function loadFlow() {
 		loading = true
 		let flow: Flow = {
@@ -103,10 +101,7 @@
 
 			flow = state.flow
 			pathStoreInit = state.path
-			draftTriggersFromUrl = state.draft_triggers
-			selectedTriggerIndexFromUrl = state.selected_trigger
-			flowBuilder?.setDraftTriggers(draftTriggersFromUrl)
-			flowBuilder?.setSelectedTriggerIndex(selectedTriggerIndexFromUrl)
+			savedPrimarySchedule = state.primarySchedule
 			state?.selectedId && (selectedId = state?.selectedId)
 		} else {
 			if (templatePath) {
@@ -158,6 +153,7 @@
 	loadFlow()
 
 	let getSelectedId: (() => string) | undefined = undefined
+	let flowBuilder: FlowBuilder | undefined = undefined
 
 	let getInitialAndModifiedValues: GetInitialAndModifiedValues | undefined = undefined
 </script>
@@ -185,8 +181,7 @@
 	{flowStateStore}
 	{selectedId}
 	{loading}
-	{draftTriggersFromUrl}
-	{selectedTriggerIndexFromUrl}
+	{savedPrimarySchedule}
 >
 	<UnsavedConfirmationModal {getInitialAndModifiedValues} />
 </FlowBuilder>
diff --git a/frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte
index 8001ee0281..51e0e9d6e3 100644
--- a/frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte
@@ -15,7 +15,6 @@
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import type { ScheduleTrigger } from '$lib/components/triggers'
 	import type { GetInitialAndModifiedValues } from '$lib/components/common/confirmationModal/unsavedTypes'
-	import type { Trigger } from '$lib/components/triggers/utils'
 
 	let version: undefined | number = undefined
 	let nodraft = $page.url.searchParams.get('nodraft')
@@ -61,9 +60,6 @@
 
 	let savedPrimarySchedule: ScheduleTrigger | undefined = stateLoadedFromUrl?.primarySchedule
 
-	let draftTriggersFromUrl: Trigger[] | undefined = undefined
-	let selectedTriggerIndexFromUrl: number | undefined = undefined
-
 	let flowBuilder: FlowBuilder | undefined = undefined
 
 	async function loadFlow(): Promise<void> {
@@ -86,19 +82,12 @@
 			})
 
 			const draftOrDeployed = cleanValueProperties(savedFlow?.draft || savedFlow)
-			const urlScript = cleanValueProperties({
-				...stateLoadedFromUrl.flow,
-				draft_triggers: stateLoadedFromUrl.draft_triggers
-			})
+			const urlScript = cleanValueProperties(stateLoadedFromUrl.flow)
 			flow = stateLoadedFromUrl.flow
-			draftTriggersFromUrl = stateLoadedFromUrl.draft_triggers
-			selectedTriggerIndexFromUrl = stateLoadedFromUrl.selected_trigger
-			flowBuilder?.setDraftTriggers(draftTriggersFromUrl)
-			flowBuilder?.setSelectedTriggerIndex(selectedTriggerIndexFromUrl)
-			const selectedId = stateLoadedFromUrl?.selectedId ?? 'settings-metadata'
+			savedPrimarySchedule = stateLoadedFromUrl.primarySchedule
 			const reloadAction = () => {
 				stateLoadedFromUrl = undefined
-				goto(`/flows/edit/${statePath}?selected=${selectedId}`)
+				goto(`/flows/edit/${statePath}`)
 				loadFlow()
 			}
 			if (orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(urlScript)) {
@@ -144,18 +133,15 @@
 					? {
 							...structuredClone(flowWithDraft.draft),
 							path: flowWithDraft.draft.path ?? flowWithDraft.path // backward compatibility for old drafts missing path
-						}
+					  }
 					: undefined
 			} as Flow & {
-				draft?: Flow & {
-					draft_triggers?: Trigger[]
-				}
+				draft?: Flow
 			}
 			if (flowWithDraft.draft != undefined && !nobackenddraft) {
 				flow = flowWithDraft.draft
 				savedPrimarySchedule = flowWithDraft?.draft?.['primary_schedule']
 				flowBuilder?.setPrimarySchedule(savedPrimarySchedule)
-				flowBuilder?.setDraftTriggers(flowWithDraft?.draft?.['draft_triggers'])
 
 				if (!flowWithDraft.draft_only) {
 					const deployed = cleanValueProperties(flowWithDraft)
@@ -192,7 +178,6 @@
 				}
 			} else {
 				flow = flowWithDraft
-				flowBuilder?.setDraftTriggers(undefined)
 			}
 		}
 
@@ -215,7 +200,6 @@
 			return
 		}
 		diffDrawer.closeDrawer()
-		stateLoadedFromUrl = undefined
 		goto(`/flows/edit/${savedFlow.draft.path}`)
 		loadFlow()
 	}
@@ -233,7 +217,6 @@
 				path: savedFlow.path
 			})
 		}
-		stateLoadedFromUrl = undefined
 		goto(`/flows/edit/${savedFlow.path}`)
 		loadFlow()
 	}
@@ -268,8 +251,6 @@
 	bind:savedFlow
 	{diffDrawer}
 	{savedPrimarySchedule}
-	{draftTriggersFromUrl}
-	{selectedTriggerIndexFromUrl}
 	bind:version
 	bind:getInitialAndModifiedValues
 >
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 55bf1d5d1c..a20cfd427a 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -41,26 +41,35 @@
 	} from 'lucide-svelte'
 
 	import DetailPageHeader from '$lib/components/details/DetailPageHeader.svelte'
+	import WebhooksPanel from '$lib/components/triggers/webhook/WebhooksPanel.svelte'
+	import CliHelpBox from '$lib/components/CliHelpBox.svelte'
 	import FlowGraphViewer from '$lib/components/FlowGraphViewer.svelte'
+	import RunPageSchedules from '$lib/components/RunPageSchedules.svelte'
 	import { createAppFromFlow } from '$lib/components/details/createAppFromScript'
 	import { importStore } from '$lib/components/apps/store'
 	import TimeAgo from '$lib/components/TimeAgo.svelte'
+	import ClipboardPanel from '$lib/components/details/ClipboardPanel.svelte'
 	import FlowGraphViewerStep from '$lib/components/FlowGraphViewerStep.svelte'
 	import GfmMarkdown from '$lib/components/GfmMarkdown.svelte'
 	import FlowHistory from '$lib/components/flows/FlowHistory.svelte'
+	import EmailTriggerPanel from '$lib/components/details/EmailTriggerPanel.svelte'
 	import Star from '$lib/components/Star.svelte'
+	import RoutesPanel from '$lib/components/triggers/http/RoutesPanel.svelte'
 	import { Highlight } from 'svelte-highlight'
 	import json from 'svelte-highlight/languages/json'
 	import { writable } from 'svelte/store'
-	import InputSelectedBadge from '$lib/components/schema/InputSelectedBadge.svelte'
-	import Toggle from '$lib/components/Toggle.svelte'
-	import { onDestroy, tick } from 'svelte'
-	import LogViewer from '$lib/components/LogViewer.svelte'
-	import TriggersEditor from '$lib/components/triggers/TriggersEditor.svelte'
-	import type { TriggerContext } from '$lib/components/triggers'
-	import { setContext } from 'svelte'
 	import TriggersBadge from '$lib/components/graph/renderers/triggers/TriggersBadge.svelte'
-	import { Triggers } from '$lib/components/triggers/triggers.svelte'
+	import InputSelectedBadge from '$lib/components/schema/InputSelectedBadge.svelte'
+	import WebsocketTriggersPanel from '$lib/components/triggers/websocket/WebsocketTriggersPanel.svelte'
+	import KafkaTriggersPanel from '$lib/components/triggers/kafka/KafkaTriggersPanel.svelte'
+	import NatsTriggersPanel from '$lib/components/triggers/nats/NatsTriggersPanel.svelte'
+	import PostgresTriggersPanel from '$lib/components/triggers/postgres/PostgresTriggersPanel.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
+	import MqttTriggersPanel from '$lib/components/triggers/mqtt/MqttTriggersPanel.svelte'
+	import SqsTriggerPanel from '$lib/components/triggers/sqs/SqsTriggerPanel.svelte'
+	import { onDestroy } from 'svelte'
+	import LogViewer from '$lib/components/LogViewer.svelte'
+	import GcpTriggerPanel from '$lib/components/triggers/gcp/GcpTriggerPanel.svelte'
 
 	let flow: Flow | undefined
 	let can_write = false
@@ -76,29 +85,9 @@
 
 	let intervalId: NodeJS.Timeout | undefined = undefined
 
-	$: {
-		const cliTrigger = triggersState.triggers.find((t) => t.type === 'cli')
-		if (cliTrigger) {
-			cliTrigger.extra = {
-				cliCommand: `wmill flow run ${flow?.path} -d '${JSON.stringify(args)}'`
-			}
-		}
-	}
-
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 
-	// Add triggers context store
-	const triggersState = new Triggers([
-		{ type: 'webhook', path: '', isDraft: false },
-		{ type: 'email', path: '', isDraft: false },
-		{ type: 'cli', path: '', isDraft: false }
-	])
-	setContext<TriggerContext>('TriggerContext', {
-		triggersCount,
-		simplifiedPoll: writable(false),
-		showCaptureHint: writable(undefined),
-		triggersState
-	})
+	$: cliCommand = `wmill flow run ${flow?.path} -d '${JSON.stringify(args)}'`
 
 	let previousPath: string | undefined = undefined
 	$: {
@@ -107,7 +96,6 @@
 				previousPath = path
 				loadFlow()
 				loadTriggersCount()
-				loadTriggers()
 			}
 		}
 	}
@@ -136,17 +124,6 @@
 		})
 	}
 
-	async function loadTriggers(): Promise<void> {
-		await triggersState.fetchTriggers(
-			triggersCount,
-			$workspaceStore,
-			path,
-			true,
-			undefined,
-			$userStore
-		)
-	}
-
 	async function loadFlow(): Promise<void> {
 		flow = await FlowService.getFlowByPath({
 			workspace: $workspaceStore!,
@@ -394,7 +371,7 @@
 		}
 	}
 	let stepDetail: FlowModule | string | undefined = undefined
-
+	let token = 'TOKEN_TO_CREATE'
 	let rightPaneSelected = 'saved_inputs'
 	let savedInputsV2: SavedInputsV2 | undefined = undefined
 	let flowHistory: FlowHistory | undefined = undefined
@@ -421,6 +398,7 @@
 
 {#if flow}
 	<DetailPageLayout
+		{triggersCount}
 		bind:selected={rightPaneSelected}
 		isOperator={$userStore?.operator}
 		flow_json={{
@@ -446,17 +424,13 @@
 				<svelte:fragment slot="trigger-badges">
 					<TriggersBadge
 						showOnlyWithCount={true}
-						showDraft={false}
 						{path}
 						newItem={false}
 						isFlow
 						selected={rightPaneSelected == 'triggers'}
-						onSelect={async (triggerIndex: number) => {
+						on:select={() => {
 							rightPaneSelected = 'triggers'
-							await tick()
-							triggersState.selectedTriggerIndex = triggerIndex
 						}}
-						small={false}
 					/>
 				</svelte:fragment>
 				{#if $workspaceStore}
@@ -616,23 +590,89 @@
 				<Highlight language={json} code={JSON.stringify(flow?.schema, null, 4)} />
 			</div>
 		</svelte:fragment>
+		<svelte:fragment slot="webhooks">
+			<div class="p-2">
+				<WebhooksPanel
+					bind:token
+					scopes={[`run:flow/${flow?.path}`]}
+					path={flow?.path}
+					isFlow={true}
+					{args}
+				/>
+			</div>
+		</svelte:fragment>
+		<svelte:fragment slot="routes">
+			<div class="p-2">
+				<RoutesPanel path={flow.path ?? ''} isFlow />
+			</div>
+		</svelte:fragment>
+		<svelte:fragment slot="websockets">
+			<div class="p-2">
+				<WebsocketTriggersPanel path={flow.path ?? ''} isFlow />
+			</div>
+		</svelte:fragment>
+
+		<svelte:fragment slot="kafka">
+			<div class="p-2">
+				<KafkaTriggersPanel path={flow.path ?? ''} isFlow />
+			</div>
+		</svelte:fragment>
+
+		<svelte:fragment slot="postgres">
+			<div class="p-2">
+				<PostgresTriggersPanel path={flow.path ?? ''} isFlow />
+			</div>
+		</svelte:fragment>
+
+		<svelte:fragment slot="nats">
+			<div class="p-2">
+				<NatsTriggersPanel path={flow.path ?? ''} isFlow />
+			</div>
+		</svelte:fragment>
+		<svelte:fragment slot="mqtt">
+			<div class="p-2">
+				<MqttTriggersPanel path={flow.path ?? ''} isFlow />
+			</div>
+		</svelte:fragment>
+
+		<svelte:fragment slot="sqs">
+			<div class="p-2">
+				<SqsTriggerPanel path={flow.path ?? ''} isFlow />
+			</div>
+		</svelte:fragment>
+
+		<svelte:fragment slot="gcp">
+			<div class="p-2">
+				<GcpTriggerPanel path={flow.path ?? ''} isFlow />
+			</div>
+		</svelte:fragment>
+
+		<svelte:fragment slot="emails">
+			<div class="p-2">
+				<EmailTriggerPanel
+					bind:token
+					scopes={[`run:flow/${flow?.path}`]}
+					path={flow?.path}
+					isFlow={true}
+				/>
+			</div>
+		</svelte:fragment>
+		<svelte:fragment slot="schedules">
+			<div class="p-2">
+				<RunPageSchedules schema={flow.schema} isFlow={true} path={flow.path ?? ''} {can_write} />
+			</div>
+		</svelte:fragment>
+		<svelte:fragment slot="cli">
+			<div class="p-2">
+				<ClipboardPanel content={cliCommand} />
+				<CliHelpBox />
+			</div>
+		</svelte:fragment>
+
 		<svelte:fragment slot="flow_step">
 			{#if stepDetail}
 				<FlowGraphViewerStep schema={flow.schema} {stepDetail} />
 			{/if}
 		</svelte:fragment>
-		<svelte:fragment slot="triggers">
-			<TriggersEditor
-				initialPath={flow.path}
-				currentPath={flow.path}
-				noEditor={true}
-				newItem={false}
-				isFlow={true}
-				schema={flow.schema}
-				isDeployed={true}
-				noCapture={true}
-				isEditor={false}
-			/>
-		</svelte:fragment>
 	</DetailPageLayout>
 {/if}
diff --git a/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
index 2fd36a1cc1..9fcaa0f202 100644
--- a/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
@@ -263,7 +263,7 @@
 </ConfirmationModal>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<GcpTriggerEditor onUpdate={loadTriggers} bind:this={gcpTriggerEditor} />
+<GcpTriggerEditor on:update={loadTriggers} bind:this={gcpTriggerEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
index deb7e2993b..5d8c6ba86e 100644
--- a/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
@@ -227,7 +227,7 @@
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<KafkaTriggerEditor onUpdate={loadTriggers} bind:this={kafkaTriggerEditor} />
+<KafkaTriggerEditor on:update={loadTriggers} bind:this={kafkaTriggerEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
index cd3c331f66..4a78f7e35e 100644
--- a/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
@@ -221,7 +221,7 @@
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<MqttTriggerEditor onUpdate={loadTriggers} bind:this={mqttTriggerEditor} />
+<MqttTriggerEditor on:update={loadTriggers} bind:this={mqttTriggerEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
index d0f0c2fe96..9e18225165 100644
--- a/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
@@ -226,7 +226,7 @@
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<NatsTriggerEditor onUpdate={loadTriggers} bind:this={natsTriggerEditor} />
+<NatsTriggerEditor on:update={loadTriggers} bind:this={natsTriggerEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
index b6b567eea7..a23c23381e 100644
--- a/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
@@ -287,7 +287,7 @@
 </ConfirmationModal>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<PostgresTriggerEditor onUpdate={loadTriggers} bind:this={postgresTriggerEditor} />
+<PostgresTriggerEditor on:update={loadTriggers} bind:this={postgresTriggerEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/routes/+page.svelte b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
index f4ec5e51c1..89163b464a 100644
--- a/frontend/src/routes/(root)/(logged)/routes/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
@@ -186,7 +186,7 @@
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<RouteEditor onUpdate={loadTriggers} bind:this={routeEditor} />
+<RouteEditor on:update={loadTriggers} bind:this={routeEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index ec1feb8aff..4c1b11b663 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -235,7 +235,7 @@
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<ScheduleEditor onUpdate={loadSchedules} bind:this={scheduleEditor} />
+<ScheduleEditor on:update={loadSchedules} bind:this={scheduleEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
index 63b90e842b..129f01a47c 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
@@ -9,9 +9,9 @@
 	import { goto } from '$lib/navigation'
 	import { replaceState } from '$app/navigation'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
+	import type { ScheduleTrigger } from '$lib/components/triggers'
 	import type { GetInitialAndModifiedValues } from '$lib/components/common/confirmationModal/unsavedTypes'
 	import { replaceScriptPlaceholderWithItsValues } from '$lib/hub'
-	import type { Trigger } from '$lib/components/triggers/utils'
 
 	// Default
 	let schema: Schema = emptySchema()
@@ -32,10 +32,12 @@
 	const initialState = $page.url.hash != '' ? $page.url.hash.slice(1) : undefined
 
 	let scriptBuilder: ScriptBuilder | undefined = undefined
+	let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
 
 	function decodeStateAndHandleError(state) {
 		try {
 			const decoded = decodeState(state)
+			savedPrimarySchedule = decoded.primarySchedule
 			return decoded
 		} catch (e) {
 			console.error('Error decoding state', e)
@@ -60,7 +62,7 @@
 		}
 	}
 
-	let script: NewScript & { draft_triggers: Trigger[] } =
+	let script: NewScript =
 		!path && initialState != undefined ? decodeStateAndHandleError(initialState) : defaultScript()
 
 	async function loadTemplate(): Promise<void> {
@@ -120,6 +122,7 @@
 	searchParams={$page.url.searchParams}
 	{script}
 	{showMeta}
+	{savedPrimarySchedule}
 	replaceStateFn={(path) => replaceState(path, $page.state)}
 >
 	<UnsavedConfirmationModal {getInitialAndModifiedValues} />
diff --git a/frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte
index 803b29bce8..fbe85f83c0 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte
@@ -12,7 +12,6 @@
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import type { ScheduleTrigger } from '$lib/components/triggers'
 	import type { GetInitialAndModifiedValues } from '$lib/components/common/confirmationModal/unsavedTypes'
-	import type { Trigger } from '$lib/components/triggers/utils'
 
 	let initialState = window.location.hash != '' ? window.location.hash.slice(1) : undefined
 	let initialArgs = {}
@@ -27,8 +26,7 @@
 
 	let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 
-
-	let script: (NewScript & { draft_triggers?: Trigger[] }) | undefined = undefined
+	let script: NewScript | undefined = undefined
 
 	let initialPath: string = ''
 
@@ -39,7 +37,7 @@
 	let savedScript: NewScriptWithDraft | undefined = undefined
 	let fullyLoaded = false
 
-	let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
+	let savedPrimarySchedule: ScheduleTrigger | undefined = scriptLoadedFromUrl?.primarySchedule
 
 	async function loadScript(): Promise<void> {
 		fullyLoaded = false
@@ -100,12 +98,10 @@
 				savedScript = structuredClone(scriptWithDraft)
 				if (scriptWithDraft.draft != undefined) {
 					script = scriptWithDraft.draft
-					scriptBuilder?.setDraftTriggers(script.draft_triggers)
 					if (script['primary_schedule']) {
 						savedPrimarySchedule = script['primary_schedule']
 						scriptBuilder?.setPrimarySchedule(savedPrimarySchedule)
 					}
-
 					if (!scriptWithDraft.draft_only) {
 						reloadAction = async () => {
 							scriptLoadedFromUrl = undefined
@@ -157,7 +153,6 @@
 
 		if (script) {
 			initialPath = script.path
-			scriptBuilder?.setDraftTriggers(script.draft_triggers)
 			scriptBuilder?.setCode(script.content)
 			if (topHash) {
 				script.parent_hash = topHash
@@ -181,7 +176,6 @@
 		}
 		diffDrawer.closeDrawer()
 		goto(`/scripts/edit/${savedScript.draft.path}`)
-		scriptLoadedFromUrl = undefined
 		loadScript()
 	}
 
@@ -199,7 +193,6 @@
 			})
 		}
 		goto(`/scripts/edit/${savedScript.path}`)
-		scriptLoadedFromUrl = undefined
 		loadScript()
 	}
 
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index dd4f7fa15f..0a7d41a4dc 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -21,7 +21,7 @@
 	import { enterpriseLicense, hubBaseUrlStore, userStore, workspaceStore } from '$lib/stores'
 	import { isDeployable, ALL_DEPLOYABLE } from '$lib/utils_deployable'
 
-	import { onDestroy, setContext, tick } from 'svelte'
+	import { onDestroy } from 'svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import {
 		Tabs,
@@ -42,8 +42,10 @@
 	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 
 	import SavedInputsV2 from '$lib/components/SavedInputsV2.svelte'
+	import WebhooksPanel from '$lib/components/triggers/webhook/WebhooksPanel.svelte'
 	import DetailPageLayout from '$lib/components/details/DetailPageLayout.svelte'
 	import DetailPageHeader from '$lib/components/details/DetailPageHeader.svelte'
+	import CliHelpBox from '$lib/components/CliHelpBox.svelte'
 	import {
 		Activity,
 		Archive,
@@ -66,22 +68,30 @@
 	import { scriptToHubUrl } from '$lib/hub'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import ScriptVersionHistory from '$lib/components/ScriptVersionHistory.svelte'
+	import RunPageSchedules from '$lib/components/RunPageSchedules.svelte'
 	import { createAppFromScript } from '$lib/components/details/createAppFromScript'
 	import { importStore } from '$lib/components/apps/store'
 	import TimeAgo from '$lib/components/TimeAgo.svelte'
+	import ClipboardPanel from '$lib/components/details/ClipboardPanel.svelte'
 	import PersistentScriptDrawer from '$lib/components/PersistentScriptDrawer.svelte'
 	import GfmMarkdown from '$lib/components/GfmMarkdown.svelte'
+	import EmailTriggerPanel from '$lib/components/details/EmailTriggerPanel.svelte'
 	import Star from '$lib/components/Star.svelte'
 	import LogViewer from '$lib/components/LogViewer.svelte'
+	import RoutesPanel from '$lib/components/triggers/http/RoutesPanel.svelte'
 	import { Highlight } from 'svelte-highlight'
 	import json from 'svelte-highlight/languages/json'
 	import { writable } from 'svelte/store'
+	import TriggersBadge from '$lib/components/graph/renderers/triggers/TriggersBadge.svelte'
+	import WebsocketTriggersPanel from '$lib/components/triggers/websocket/WebsocketTriggersPanel.svelte'
+	import KafkaTriggersPanel from '$lib/components/triggers/kafka/KafkaTriggersPanel.svelte'
+	import NatsTriggersPanel from '$lib/components/triggers/nats/NatsTriggersPanel.svelte'
+	import PostgresTriggersPanel from '$lib/components/triggers/postgres/PostgresTriggersPanel.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import InputSelectedBadge from '$lib/components/schema/InputSelectedBadge.svelte'
-	import type { TriggerContext } from '$lib/components/triggers'
-	import TriggersBadge from '$lib/components/graph/renderers/triggers/TriggersBadge.svelte'
-	import TriggersEditor from '$lib/components/triggers/TriggersEditor.svelte'
-	import { Triggers } from '$lib/components/triggers/triggers.svelte'
+	import MqttTriggersPanel from '$lib/components/triggers/mqtt/MqttTriggersPanel.svelte'
+	import SqsTriggerPanel from '$lib/components/triggers/sqs/SqsTriggerPanel.svelte'
+	import GcpTriggerPanel from '$lib/components/triggers/gcp/GcpTriggerPanel.svelte'
 
 	let script: Script | undefined
 	let topHash: string | undefined
@@ -97,14 +107,7 @@
 	let inputSelected: 'saved' | 'history' | undefined = undefined
 	let jsonView = false
 
-	$: {
-		const cliTrigger = triggersState.triggers.find((t) => t.type === 'cli')
-		if (cliTrigger) {
-			cliTrigger.extra = {
-				cliCommand: `wmill script run ${script?.path} -d '${JSON.stringify(args)}'`
-			}
-		}
-	}
+	$: cliCommand = `wmill script run ${script?.path} -d '${JSON.stringify(args)}'`
 
 	$: loading = !script
 
@@ -118,19 +121,6 @@
 
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 
-	// Add triggers context store
-	const triggersState = new Triggers([
-		{ type: 'webhook', path: '', isDraft: false },
-		{ type: 'email', path: '', isDraft: false },
-		{ type: 'cli', path: '', isDraft: false }
-	])
-	setContext<TriggerContext>('TriggerContext', {
-		triggersCount,
-		simplifiedPoll: writable(false),
-		showCaptureHint: writable(undefined),
-		triggersState
-	})
-
 	async function deleteScript(hash: string): Promise<void> {
 		try {
 			await ScriptService.deleteScriptByHash({ workspace: $workspaceStore!, hash })
@@ -177,15 +167,11 @@
 	}
 	let starred: boolean | undefined = undefined
 
-	async function loadTriggers(path: string): Promise<void> {
-		await triggersState.fetchTriggers(
-			triggersCount,
-			$workspaceStore,
-			path,
-			false,
-			undefined,
-			$userStore
-		)
+	async function loadTriggersCount(path: string) {
+		$triggersCount = await ScriptService.getTriggersCountOfScript({
+			workspace: $workspaceStore!,
+			path: path
+		})
 	}
 
 	async function loadScript(hash: string): Promise<void> {
@@ -208,7 +194,7 @@
 		can_write =
 			script.workspace_id == $workspaceStore &&
 			canWrite(script.path, script.extra_perms!, $userStore)
-		loadTriggers(script.path)
+		loadTriggersCount(script.path)
 
 		if (script.path && script.archived) {
 			const script_by_path = await ScriptService.getScriptByPath({
@@ -511,6 +497,7 @@
 		}
 	}
 
+	let token = 'TOKEN_TO_CREATE'
 	let rightPaneSelected = 'saved_inputs'
 
 	let savedInputsV2: SavedInputsV2 | undefined = undefined
@@ -546,7 +533,11 @@
 		</DrawerContent>
 	</Drawer>
 	{#key script.hash}
-		<DetailPageLayout bind:selected={rightPaneSelected} isOperator={$userStore?.operator}>
+		<DetailPageLayout
+			{triggersCount}
+			bind:selected={rightPaneSelected}
+			isOperator={$userStore?.operator}
+		>
 			<svelte:fragment slot="header">
 				<DetailPageHeader
 					{mainButtons}
@@ -556,24 +547,16 @@
 					errorHandlerKind="script"
 					scriptOrFlowPath={script.path}
 					tag={script.tag}
-					on:seeTriggers={() => {
-						rightPaneSelected = 'triggers'
-					}}
 				>
 					<svelte:fragment slot="trigger-badges">
 						<TriggersBadge
 							showOnlyWithCount={true}
-							showDraft={false}
 							path={script.path}
 							newItem={false}
 							isFlow={false}
-							selected={rightPaneSelected === 'triggers'}
-							onSelect={async (triggerIndex: number) => {
-								if (rightPaneSelected !== 'triggers') {
-									rightPaneSelected = 'triggers'
-								}
-								await tick()
-								triggersState.selectedTriggerIndex = triggerIndex
+							selected={rightPaneSelected == 'triggers'}
+							on:select={() => {
+								rightPaneSelected = 'triggers'
 							}}
 						/>
 					</svelte:fragment>
@@ -757,18 +740,76 @@
 					/>
 				{/if}
 			</svelte:fragment>
-			<svelte:fragment slot="triggers">
-				<TriggersEditor
-					initialPath={script.path}
-					currentPath={script.path}
-					noEditor={true}
-					newItem={false}
-					isFlow={false}
-					schema={script.schema}
-					isDeployed={true}
-					noCapture={true}
-					isEditor={false}
-				/>
+			<svelte:fragment slot="webhooks">
+				<div class="p-2">
+					<WebhooksPanel
+						bind:token
+						scopes={[`run:script/${script?.path}`]}
+						hash={script.hash}
+						path={script.path}
+						{args}
+					/>
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="routes">
+				<div class="p-2">
+					<RoutesPanel path={script.path ?? ''} isFlow={false} />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="websockets">
+				<div class="p-2">
+					<WebsocketTriggersPanel path={script.path ?? ''} isFlow={false} />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="postgres">
+				<div class="p-2">
+					<PostgresTriggersPanel path={script.path ?? ''} isFlow={false} />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="kafka">
+				<div class="p-2">
+					<KafkaTriggersPanel path={script.path ?? ''} isFlow={false} />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="nats">
+				<div class="p-2">
+					<NatsTriggersPanel path={script.path ?? ''} isFlow={false} />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="mqtt">
+				<div class="p-2">
+					<MqttTriggersPanel path={script.path ?? ''} isFlow={false} />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="sqs">
+				<div class="p-2">
+					<SqsTriggerPanel path={script.path ?? ''} isFlow={false} />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="gcp">
+				<div class="p-2">
+					<GcpTriggerPanel path={script.path ?? ''} isFlow={false} />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="emails">
+				<div class="p-2">
+					<EmailTriggerPanel
+						bind:token
+						scopes={[`run:script/${script?.path}`]}
+						hash={script.hash}
+						path={script.path}
+					/>
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="schedules">
+				<div class="p-2 mt-2">
+					<RunPageSchedules
+						schema={script.schema}
+						isFlow={false}
+						path={script.path ?? ''}
+						{can_write}
+					/>
+				</div>
 			</svelte:fragment>
 			<svelte:fragment slot="script">
 				<div class="h-full">
@@ -837,6 +878,12 @@
 					</ul>
 				{/if}
 			</svelte:fragment>
+			<svelte:fragment slot="cli">
+				<div class="p-2 flex flex-col gap-4">
+					<ClipboardPanel content={cliCommand} />
+					<CliHelpBox />
+				</div>
+			</svelte:fragment>
 		</DetailPageLayout>
 	{/key}
 {/if}
diff --git a/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
index f117702fba..b5a5522652 100644
--- a/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
@@ -220,7 +220,7 @@
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<SqsTriggerEditor onUpdate={loadTriggers} bind:this={sqsTriggerEditor} />
+<SqsTriggerEditor on:update={loadTriggers} bind:this={sqsTriggerEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
index 03baae3159..ceaf3950c4 100644
--- a/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
@@ -219,7 +219,7 @@
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<WebsocketTriggerEditor onUpdate={loadTriggers} bind:this={websocketTriggerEditor} />
+<WebsocketTriggerEditor on:update={loadTriggers} bind:this={websocketTriggerEditor} />
 
 <SearchItems
 	{filter}
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index 7844029664..a7d48a3490 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import AssignableTags from '$lib/components/AssignableTags.svelte'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import { Button, Skeleton, Tab, Tabs } from '$lib/components/common'
+	import { Alert, Button, Skeleton, Tab, Tabs } from '$lib/components/common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
@@ -24,8 +24,16 @@
 		userWorkspaces
 	} from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
-	import { displayDate, groupBy, pluralize, truncate } from '$lib/utils'
-	import { AlertTriangle, LineChart, List, Plus, Search } from 'lucide-svelte'
+	import {
+		AGENT_WORKER_NAME_PREFIX,
+		AgentKnownSuffix,
+		checkIfWorkerHasSpecificSuffix,
+		displayDate,
+		groupBy,
+		pluralize,
+		truncate
+	} from '$lib/utils'
+	import { AlertTriangle, LineChart, List, Plus, Search, Terminal } from 'lucide-svelte'
 	import { getContext, onDestroy, onMount } from 'svelte'
 	import AutoComplete from 'simple-svelte-autocomplete'
 
@@ -33,15 +41,14 @@
 	import { DEFAULT_TAGS_WORKSPACES_SETTING } from '$lib/consts'
 	import AutoscalingEvents from '$lib/components/AutoscalingEvents.svelte'
 	import HttpAgentWorkerDrawer from '$lib/components/HttpAgentWorkerDrawer.svelte'
+	import WorkerRepl from '$lib/components/WorkerRepl.svelte'
 
 	let workers: WorkerPing[] | undefined = undefined
 	let workerGroups: Record<string, any> | undefined = undefined
 	let groupedWorkers: [string, [string, WorkerPing[]][]][] = []
 	let intervalId: NodeJS.Timeout | undefined
-
 	const splitter = '_%%%_'
 	let customTags: string[] | undefined = undefined
-
 	$: groupedWorkers = groupWorkers(workers, workerGroups)
 
 	function groupWorkers(
@@ -145,7 +152,7 @@
 
 	let importConfigDrawer: Drawer | undefined = undefined
 	let importConfigCode = ''
-
+	let tag: string = ''
 	async function importSingleWorkerConfig(c: any) {
 		if (typeof c === 'object' && c !== null) {
 			if (!c.name || typeof c.name !== 'string') {
@@ -257,8 +264,8 @@
 
 		return Math.ceil(occupancy_rate * 100) + '%'
 	}
-
 	let newHttpAgentWorkerDrawer: Drawer | undefined = undefined
+	let replForWorkerDrawer: Drawer | undefined = undefined
 </script>
 
 {#if $superadmin}
@@ -291,6 +298,24 @@
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:this={replForWorkerDrawer} size="1000px">
+	<DrawerContent
+		title="Repl"
+		on:close={() => {
+			tag = ''
+			replForWorkerDrawer?.closeDrawer?.()
+		}}
+	>
+		<div class="flex flex-col gap-2">
+			<Alert title="Info" type="info" size="xs">
+				If no command has been run in the past 2 minutes, the next one may take up to 15 seconds to
+				start.
+			</Alert>
+			<WorkerRepl {tag} />
+		</div>
+	</DrawerContent>
+</Drawer>
+
 {#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.workers}
 	<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4 m-4 mt-12" role="alert">
 		<p class="font-bold">Unauthorized</p>
@@ -561,11 +586,20 @@
 									<Cell head>Memory usage<br />(Windmill)</Cell>
 									<Cell head>Limits</Cell>
 									<Cell head>Version</Cell>
-									<Cell head last>Liveness</Cell>
+									<Cell head>Liveness</Cell>
+									<Cell head last
+										>Live Shell <Tooltip>
+											<p class="text-sm">
+												Open a live shell to execute bash commands on the machine where the worker
+												runs — useful for quick access, inspection, and real-time debugging
+											</p>
+										</Tooltip></Cell
+									>
 								</tr>
 							</Head>
 							<tbody class="divide-y">
 								{#each worker_group[1] as [section, workers]}
+									{@const hostname = section?.split(splitter)?.[0]}
 									<tr class="border-t">
 										<Cell
 											first
@@ -578,7 +612,7 @@
 											<div class="flex flex-row w-full">
 												<div class="min-w-64">
 													Host:
-													<span class="font-semibold">{section?.split(splitter)?.[0]}</span>
+													<span class="font-semibold">{hostname}</span>
 												</div>
 												<span class="ml-4">IP: </span>
 												<span class="font-semibold">{workers[0].ip}</span>
@@ -593,7 +627,15 @@
 									{#if workers}
 										{#each workers as { worker, custom_tags, last_ping, started_at, jobs_executed, last_job_id, last_job_workspace_id, occupancy_rate_15s, occupancy_rate_5m, occupancy_rate_30m, occupancy_rate, wm_version, vcpus, memory, memory_usage, wm_memory_usage }}
 											<tr>
-												<Cell first>{worker}</Cell>
+												<Cell first>
+													{@const underscorePos = worker.search('_')}
+													{#if underscorePos === -1}
+														{worker}
+													{:else}
+														{truncate(worker, underscorePos)}
+														<Tooltip>{worker}</Tooltip>
+													{/if}
+												</Cell>
 												<Cell>
 													{#if custom_tags && custom_tags?.length > 2}
 														{truncate(custom_tags?.join(', ') ?? '', 10)}
@@ -652,7 +694,7 @@
 														{wm_version.split('-')[0]}<Tooltip>{wm_version}</Tooltip>
 													</div>
 												</Cell>
-												<Cell last>
+												<Cell>
 													<Badge
 														color={last_ping != undefined
 															? last_ping < 60
@@ -667,6 +709,32 @@
 															: 'Unknown'}
 													</Badge>
 												</Cell>
+												<Cell last>
+													<Button
+														size="xs"
+														color="light"
+														on:click={() => {
+															if (
+																worker.startsWith(AGENT_WORKER_NAME_PREFIX) &&
+																!checkIfWorkerHasSpecificSuffix(
+																	AgentKnownSuffix.ENABLE_LIVE_SHELL,
+																	worker
+																)
+															) {
+																sendUserToast(
+																	`Worker ${worker} has no right to open live shell with his host machine, please create a new token and enable live shell to be able to use this feature`,
+																	true
+																)
+																return
+															}
+															tag = hostname
+															replForWorkerDrawer?.openDrawer?.()
+														}}
+														startIcon={{ icon: Terminal }}
+													>
+														Command
+													</Button>
+												</Cell>
 											</tr>
 										{/each}
 									{/if}
diff --git a/frontend/src/routes/flows/dev/+page.svelte b/frontend/src/routes/flows/dev/+page.svelte
index 52ed7818ab..cffef6240c 100644
--- a/frontend/src/routes/flows/dev/+page.svelte
+++ b/frontend/src/routes/flows/dev/+page.svelte
@@ -20,10 +20,9 @@
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { getUserExt } from '$lib/user'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
-	import type { TriggerContext } from '$lib/components/triggers'
+	import type { ScheduleTrigger, TriggerContext } from '$lib/components/triggers'
 	import type { FlowPropPickerConfig, PropPickerContext } from '$lib/components/prop_picker'
 	import type { PickableProperties } from '$lib/components/flows/previousResults'
-	import { Triggers } from '$lib/components/triggers/triggers.svelte'
 
 	let token = $page.url.searchParams.get('wm_token') ?? undefined
 	let workspace = $page.url.searchParams.get('workspace') ?? undefined
@@ -78,12 +77,19 @@
 
 	const testStepStore = writable<Record<string, any>>({})
 	const selectedIdStore = writable('settings-metadata')
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(undefined)
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
+	const selectedTriggerStore = writable<
+		'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll'
+	>('webhooks')
 	setContext<TriggerContext>('TriggerContext', {
+		primarySchedule: primaryScheduleStore,
+		selectedTrigger: selectedTriggerStore,
 		triggersCount: triggersCount,
 		simplifiedPoll: writable(false),
-		showCaptureHint: writable(undefined),
-		triggersState: new Triggers()
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined),
+		showCaptureHint: writable(undefined)
 	})
 
 	setContext<FlowEditorContext>('FlowEditorContext', {