diff --git a/.claude/skills/svelte-frontend/SKILL.md b/.claude/skills/svelte-frontend/SKILL.md
index 41d65a12be..f51d36672a 100644
--- a/.claude/skills/svelte-frontend/SKILL.md
+++ b/.claude/skills/svelte-frontend/SKILL.md
@@ -226,4 +226,93 @@ When generating Svelte 5 code, prioritize frontend performance by applying the f
       Hello
     </div>
     ```
-5.  **Stay Updated**: Keep Svelte and its related packages up to date to benefit from the latest features, performance improvements, and security fixes.
\ No newline at end of file
+5.  **Stay Updated**: Keep Svelte and its related packages up to date to benefit from the latest features, performance improvements, and security fixes.
+
+## Windmill UI Component Rules (MUST follow)
+
+Always use Windmill's own design-system components instead of raw HTML elements. Using raw HTML elements produces inconsistent styling and breaks the design language.
+
+### Icons — use `lucide-svelte`
+
+**Never** write inline SVGs. Import icons from `lucide-svelte`.
+
+```svelte
+<script>
+  import { ChevronLeft, ChevronRight, X } from 'lucide-svelte'
+</script>
+
+<ChevronLeft size={16} />
+```
+
+### Buttons — use `<Button>`
+
+**Never** use `<button>`. Import and use `Button` from `$lib/components/common`.
+
+```svelte
+<script>
+  import { Button } from '$lib/components/common'
+  import { ChevronLeft, ChevronRight } from 'lucide-svelte'
+</script>
+
+<!-- Regular button -->
+<Button variant="default" onclick={handleClick}>Label</Button>
+
+<!-- Icon-only button (no label) -->
+<Button startIcon={{ icon: ChevronLeft }} iconOnly onclick={prevMonth} />
+<Button startIcon={{ icon: ChevronRight }} iconOnly onclick={nextMonth} />
+```
+
+Key `Button` props:
+- `variant?: 'accent' | 'accent-secondary' | 'default' | 'subtle'`
+- `unifiedSize?: 'sm' | 'md' | 'lg'`
+- `startIcon?: { icon: SvelteComponent }` — renders an icon before the label
+- `iconOnly?: boolean` — renders icon with no surrounding label text
+- `disabled?: boolean`
+
+### Text inputs — use `<TextInput>`
+
+**Never** use `<input>`. Import and use `TextInput` from `$lib/components/common`.
+
+```svelte
+<script>
+  import { TextInput } from '$lib/components/common'
+  let val = $state('')
+</script>
+
+<TextInput bind:value={val} placeholder="Enter value" />
+```
+
+Key `TextInput` props:
+- `value?: string | number` (bindable)
+- `placeholder?: string`
+- `disabled?: boolean`
+- `error?: string | boolean`
+- `size?: 'sm' | 'md' | 'lg'`
+- `inputProps?` — forwarded to the underlying `<input>`
+
+### Selects — use `<Select>`
+
+**Never** use `<select>`. Import and use `Select` from `$lib/components/select/Select.svelte`.
+
+```svelte
+<script>
+  import Select from '$lib/components/select/Select.svelte'
+
+  const monthItems = [
+    { label: 'January', value: 1 },
+    { label: 'February', value: 2 },
+    // ...
+  ]
+  let selectedMonth = $state(1)
+</script>
+
+<Select items={monthItems} bind:value={selectedMonth} />
+```
+
+Key `Select` props:
+- `items?: Array<{ label?: string; value: any; subtitle?: string; disabled?: boolean }>`
+- `value` (bindable) — the currently selected `.value`
+- `placeholder?: string`
+- `clearable?: boolean`
+- `disabled?: boolean`
+- `size?: 'sm' | 'md' | 'lg'`
\ No newline at end of file
diff --git a/backend/windmill-api-assets/src/lib.rs b/backend/windmill-api-assets/src/lib.rs
index 368bf98a26..48817cfdd1 100644
--- a/backend/windmill-api-assets/src/lib.rs
+++ b/backend/windmill-api-assets/src/lib.rs
@@ -27,9 +27,13 @@ struct ListAssetsQuery {
     per_page: i64,
     cursor_created_at: Option<chrono::DateTime<chrono::Utc>>,
     cursor_id: Option<i64>,
-    asset_path: Option<String>,
-    usage_path: Option<String>,
-    asset_kinds: Option<String>,
+    pub asset_path: Option<String>,
+    pub usage_path: Option<String>,
+    pub asset_kinds: Option<String>,
+    // Exact path match filter
+    pub path: Option<String>,
+    // Filter by matching a subset of the columns using base64 encoded json subset
+    pub columns: Option<String>,
 }
 
 fn default_per_page() -> i64 {
@@ -75,12 +79,24 @@ async fn list_assets(
 
     let mut param_count = 2; // $1 = workspace_id, $2 = limit
 
-    // Asset path filter
+    // Asset path filter (ILIKE pattern match)
     if query.asset_path.is_some() {
         param_count += 1;
         asset_summary_filters.push(format!("asset.path ILIKE ${}", param_count));
     }
 
+    // Exact path filter
+    if query.path.is_some() {
+        param_count += 1;
+        asset_summary_filters.push(format!("asset.path = ${}", param_count));
+    }
+
+    // Columns filter (check if JSONB has all specified keys)
+    if query.columns.is_some() {
+        param_count += 1;
+        asset_summary_filters.push(format!("asset.columns ?& ${}", param_count));
+    }
+
     // Usage path filter - for jobs, also check runnable_path
     let needs_job_join_in_cte = query.usage_path.is_some();
     if query.usage_path.is_some() {
@@ -211,6 +227,20 @@ async fn list_assets(
         query_builder = query_builder.bind(format!("%{}%", asset_path));
     }
 
+    if let Some(ref path) = query.path {
+        query_builder = query_builder.bind(path);
+    }
+
+    if let Some(ref columns) = query.columns {
+        // Columns is a comma-separated string, split into array for ?& operator
+        let columns_array: Vec<String> = columns
+            .split(',')
+            .map(|s| s.trim().to_string())
+            .filter(|s| !s.is_empty())
+            .collect();
+        query_builder = query_builder.bind(columns_array);
+    }
+
     if let Some(ref usage_path) = query.usage_path {
         query_builder = query_builder.bind(format!("%{}%", usage_path));
     }
diff --git a/backend/windmill-api-jobs/src/lib.rs b/backend/windmill-api-jobs/src/lib.rs
index 7479ec1496..50396a15fa 100644
--- a/backend/windmill-api-jobs/src/lib.rs
+++ b/backend/windmill-api-jobs/src/lib.rs
@@ -10,9 +10,11 @@ pub mod concurrency_groups;
 pub mod execution;
 pub mod job_metrics;
 pub mod jobs_export;
+pub mod negated_filter;
 pub mod query;
 pub mod types;
 
 pub use execution::*;
+pub use negated_filter::{NegatedFilter, NegatedListFilter};
 pub use query::*;
 pub use types::*;
diff --git a/backend/windmill-api-jobs/src/negated_filter.rs b/backend/windmill-api-jobs/src/negated_filter.rs
new file mode 100644
index 0000000000..edd7ab1504
--- /dev/null
+++ b/backend/windmill-api-jobs/src/negated_filter.rs
@@ -0,0 +1,126 @@
+/*
+ * Author: Windmill Labs, Inc
+ * Copyright: Windmill Labs, Inc 2024
+ * This file and its contents are licensed under the AGPLv3 License.
+ * Please see the included NOTICE for copyright information and
+ * LICENSE-AGPL for a copy of the license.
+ */
+
+//! Filter wrappers that support an optional `!` negation prefix.
+//!
+//! - [`NegatedFilter<T>`] — a single value, e.g. `"schedule"` or `"!schedule"`.
+//! - [`NegatedListFilter<T>`] — comma-separated values, e.g. `"!schedule,!email"` or `"http,webhook"`.
+//!   Every item in the list shares the same negated/non-negated sense; mixing is not supported
+
+use serde::{
+    de::{self, DeserializeOwned},
+    Deserializer,
+};
+use std::{fmt, marker::PhantomData};
+
+// ── NegatedFilter<T> ──────────────────────────────────────────────────────────
+
+/// A single filter value optionally prefixed with `!` to indicate negation.
+///
+/// Deserializes `"schedule"` → `NegatedFilter { value: Schedule, negated: false }`
+/// Deserializes `"!schedule"` → `NegatedFilter { value: Schedule, negated: true }`
+#[derive(Debug, Clone)]
+pub struct NegatedFilter<T> {
+    pub value: T,
+    pub negated: bool,
+}
+
+impl<T> NegatedFilter<T> {
+    pub fn positive(value: T) -> Self {
+        Self { value, negated: false }
+    }
+
+    pub fn negated(value: T) -> Self {
+        Self { value, negated: true }
+    }
+}
+
+struct NegatedFilterVisitor<T>(PhantomData<T>);
+
+impl<'de, T: DeserializeOwned> de::Visitor<'de> for NegatedFilterVisitor<T> {
+    type Value = NegatedFilter<T>;
+
+    fn expecting(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        write!(f, "a string optionally prefixed with '!'")
+    }
+
+    fn visit_str<E: de::Error>(self, s: &str) -> Result<Self::Value, E> {
+        let (negated, raw) = match s.strip_prefix('!') {
+            Some(rest) => (true, rest),
+            None => (false, s),
+        };
+        let value = serde_json::from_value(serde_json::Value::String(raw.to_owned()))
+            .map_err(|e| E::custom(format!("invalid filter value {:?}: {}", raw, e)))?;
+        Ok(NegatedFilter { value, negated })
+    }
+}
+
+impl<'de, T: DeserializeOwned> de::Deserialize<'de> for NegatedFilter<T> {
+    fn deserialize<D: Deserializer<'de>>(deserializer: D) -> Result<Self, D::Error> {
+        deserializer.deserialize_str(NegatedFilterVisitor(PhantomData))
+    }
+}
+
+// ── NegatedListFilter<T> ──────────────────────────────────────────────────────
+
+/// A comma-separated list of filter values, all sharing the same negation sense.
+///
+/// Deserializes `"schedule,email"` → `NegatedListFilter { values: [Schedule, Email], negated: false }`
+/// Deserializes `"!schedule,!email"` → `NegatedListFilter { values: [Schedule, Email], negated: true }`
+///
+/// The `!` is read from the **first** item only; subsequent items may or may not carry
+/// `!` and it is stripped regardless, keeping the API forgiving.
+#[derive(Debug, Clone)]
+pub struct NegatedListFilter<T> {
+    pub values: Vec<T>,
+    pub negated: bool,
+}
+
+impl<T> NegatedListFilter<T> {
+    pub fn positive(values: Vec<T>) -> Self {
+        Self { values, negated: false }
+    }
+}
+
+struct NegatedListFilterVisitor<T>(PhantomData<T>);
+
+impl<'de, T: DeserializeOwned> de::Visitor<'de> for NegatedListFilterVisitor<T> {
+    type Value = NegatedListFilter<T>;
+
+    fn expecting(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        write!(f, "a comma-separated string optionally prefixed with '!'")
+    }
+
+    fn visit_str<E: de::Error>(self, s: &str) -> Result<Self::Value, E> {
+        let mut negated = false;
+        let values = s
+            .split(',')
+            .enumerate()
+            .map(|(i, item)| {
+                let raw = match item.strip_prefix('!') {
+                    Some(rest) => {
+                        if i == 0 {
+                            negated = true;
+                        }
+                        rest
+                    }
+                    None => item,
+                };
+                serde_json::from_value::<T>(serde_json::Value::String(raw.to_owned()))
+                    .map_err(|e| E::custom(format!("invalid filter value {:?}: {}", raw, e)))
+            })
+            .collect::<Result<Vec<T>, E>>()?;
+        Ok(NegatedListFilter { values, negated })
+    }
+}
+
+impl<'de, T: DeserializeOwned> de::Deserialize<'de> for NegatedListFilter<T> {
+    fn deserialize<D: Deserializer<'de>>(deserializer: D) -> Result<Self, D::Error> {
+        deserializer.deserialize_str(NegatedListFilterVisitor(PhantomData))
+    }
+}
diff --git a/backend/windmill-api-jobs/src/query.rs b/backend/windmill-api-jobs/src/query.rs
index ee7877438a..d3cc87fa07 100644
--- a/backend/windmill-api-jobs/src/query.rs
+++ b/backend/windmill-api-jobs/src/query.rs
@@ -14,6 +14,17 @@ use windmill_common::utils::{paginate_without_limits, Pagination};
 
 use crate::types::{ListCompletedQuery, ListQueueQuery};
 
+/// Build a `NOT IN (...)` clause that also includes `OR col IS NULL`, so that
+/// rows where the nullable column is NULL are not silently excluded.
+fn not_in_nullable(col: &str, quoted: &[String]) -> String {
+    format!(
+        "({} IS NULL OR {} NOT IN ({}))",
+        col,
+        col,
+        quoted.join(", ")
+    )
+}
+
 pub fn filter_list_queue_query(
     mut sqlb: SqlBuilder,
     lq: &ListQueueQuery,
@@ -33,18 +44,62 @@ pub fn filter_list_queue_query(
     }
 
     if let Some(w) = &lq.worker {
+        let quoted: Vec<_> = w.values.iter().map(|v| quote(v)).collect();
         if lq.allow_wildcards.unwrap_or(false) {
-            sqlb.and_where_like_left("v2_job_queue.worker", w.replace("*", "%"));
+            let clauses: Vec<_> = w
+                .values
+                .iter()
+                .map(|v| {
+                    let p = v.replace("*", "%").replace("'", "''");
+                    if w.negated {
+                        format!("v2_job_queue.worker NOT LIKE '{p}'")
+                    } else {
+                        format!("v2_job_queue.worker LIKE '{p}'")
+                    }
+                })
+                .collect();
+            let sep = if w.negated { " AND " } else { " OR " };
+            let inner = clauses.join(sep);
+            if w.negated {
+                sqlb.and_where(format!("(v2_job_queue.worker IS NULL OR ({inner}))"));
+            } else {
+                sqlb.and_where(format!("({inner})"));
+            }
+        } else if w.negated {
+            sqlb.and_where(not_in_nullable("v2_job_queue.worker", &quoted));
         } else {
-            sqlb.and_where_eq("v2_job_queue.worker", "?".bind(w));
+            sqlb.and_where_in("v2_job_queue.worker", &quoted);
         }
     }
 
     if let Some(ps) = &lq.script_path_start {
-        sqlb.and_where_like_left("runnable_path", ps);
+        let clauses: Vec<_> = ps
+            .values
+            .iter()
+            .map(|v| {
+                let e = v.replace("'", "''");
+                if ps.negated {
+                    format!("runnable_path NOT LIKE '{e}%'")
+                } else {
+                    format!("runnable_path LIKE '{e}%'")
+                }
+            })
+            .collect();
+        let sep = if ps.negated { " AND " } else { " OR " };
+        let inner = clauses.join(sep);
+        if ps.negated {
+            sqlb.and_where(format!("(runnable_path IS NULL OR ({inner}))"));
+        } else {
+            sqlb.and_where(format!("({inner})"));
+        }
     }
     if let Some(p) = &lq.script_path_exact {
-        sqlb.and_where_eq("runnable_path", "?".bind(p));
+        let quoted: Vec<_> = p.values.iter().map(|v| quote(v)).collect();
+        if p.negated {
+            sqlb.and_where(not_in_nullable("runnable_path", &quoted));
+        } else {
+            sqlb.and_where_in("runnable_path", &quoted);
+        }
     }
     if let Some(p) = &lq.schedule_path {
         sqlb.and_where_eq("trigger", "?".bind(p));
@@ -54,13 +109,34 @@ pub fn filter_list_queue_query(
         sqlb.and_where_eq("runnable_id", "?".bind(h));
     }
     if let Some(cb) = &lq.created_by {
-        sqlb.and_where_eq("created_by", "?".bind(cb));
+        let quoted: Vec<_> = cb.values.iter().map(|v| quote(v)).collect();
+        if cb.negated {
+            sqlb.and_where_not_in("created_by", &quoted);
+        } else {
+            sqlb.and_where_in("created_by", &quoted);
+        }
     }
     if let Some(t) = &lq.tag {
+        let quoted: Vec<_> = t.values.iter().map(|v| quote(v)).collect();
         if lq.allow_wildcards.unwrap_or(false) {
-            sqlb.and_where_like_left("v2_job.tag", t.replace("*", "%"));
+            let clauses: Vec<_> = t
+                .values
+                .iter()
+                .map(|v| {
+                    let p = v.replace("*", "%").replace("'", "''");
+                    if t.negated {
+                        format!("v2_job.tag NOT LIKE '{p}'")
+                    } else {
+                        format!("v2_job.tag LIKE '{p}'")
+                    }
+                })
+                .collect();
+            let sep = if t.negated { " AND " } else { " OR " };
+            sqlb.and_where(format!("({})", clauses.join(sep)));
+        } else if t.negated {
+            sqlb.and_where_not_in("v2_job.tag", &quoted);
         } else {
-            sqlb.and_where_eq("v2_job.tag", "?".bind(t));
+            sqlb.and_where_in("v2_job.tag", &quoted);
         }
     }
 
@@ -115,10 +191,12 @@ pub fn filter_list_queue_query(
     }
 
     if let Some(jk) = &lq.job_kinds {
-        sqlb.and_where_in(
-            "kind",
-            &jk.split(',').into_iter().map(quote).collect::<Vec<_>>(),
-        );
+        let quoted: Vec<_> = jk.values.iter().map(|v| quote(v)).collect();
+        if jk.negated {
+            sqlb.and_where_not_in("kind", &quoted);
+        } else {
+            sqlb.and_where_in("kind", &quoted);
+        }
     }
 
     if let Some(args) = &lq.args {
@@ -134,11 +212,21 @@ pub fn filter_list_queue_query(
     }
 
     if let Some(tk) = &lq.trigger_kind {
-        sqlb.and_where_eq("trigger_kind", "?".bind(&format!("{}", tk)));
+        let quoted: Vec<_> = tk.values.iter().map(|v| quote(&format!("{}", v))).collect();
+        if tk.negated {
+            sqlb.and_where(not_in_nullable("trigger_kind", &quoted));
+        } else {
+            sqlb.and_where_in("trigger_kind", &quoted);
+        }
     }
 
     if let Some(tp) = &lq.trigger_path {
-        sqlb.and_where_eq("trigger", "?".bind(tp));
+        let quoted: Vec<_> = tp.values.iter().map(|v| quote(v)).collect();
+        if tp.negated {
+            sqlb.and_where(not_in_nullable("trigger", &quoted));
+        } else {
+            sqlb.and_where_in("trigger", &quoted);
+        }
     }
 
     sqlb
@@ -187,25 +275,71 @@ pub fn filter_list_completed_query(
 
     if let Some(label) = &lq.label {
         if lq.allow_wildcards.unwrap_or(false) {
-            let wh = format!(
-                    "EXISTS (SELECT 1 FROM jsonb_array_elements_text(result->'wm_labels') label WHERE jsonb_typeof(result->'wm_labels') = 'array' AND label LIKE '{}')",
-                    &label.replace("*", "%").replace("'", "''")
-                );
-            sqlb.and_where("result ? 'wm_labels'");
-            sqlb.and_where(&wh);
+            let clauses: Vec<_> = label
+                .values
+                .iter()
+                .map(|v| {
+                    let p = v.replace("*", "%").replace("'", "''");
+                    if label.negated {
+                        format!(
+                            "NOT EXISTS (SELECT 1 FROM jsonb_array_elements_text(result->'wm_labels') lbl WHERE jsonb_typeof(result->'wm_labels') = 'array' AND lbl LIKE '{p}')"
+                        )
+                    } else {
+                        format!(
+                            "EXISTS (SELECT 1 FROM jsonb_array_elements_text(result->'wm_labels') lbl WHERE jsonb_typeof(result->'wm_labels') = 'array' AND lbl LIKE '{p}')"
+                        )
+                    }
+                })
+                .collect();
+            let sep = if label.negated { " AND " } else { " OR " };
+            if !label.negated {
+                sqlb.and_where("result ? 'wm_labels'");
+            }
+            sqlb.and_where(format!("({})", clauses.join(sep)));
+        } else if label.negated {
+            let clauses: Vec<_> = label
+                .values
+                .iter()
+                .map(|v| format!("NOT (result->'wm_labels' ? '{}')", v.replace("'", "''")))
+                .collect();
+            sqlb.and_where(format!("({})", clauses.join(" AND ")));
         } else {
-            let mut wh = format!("result->'wm_labels' ? ");
-            wh.push_str(&format!("'{}'", &label.replace("'", "''")));
+            let clauses: Vec<_> = label
+                .values
+                .iter()
+                .map(|v| format!("result->'wm_labels' ? '{}'", v.replace("'", "''")))
+                .collect();
             sqlb.and_where("result ? 'wm_labels'");
-            sqlb.and_where(&wh);
+            sqlb.and_where(format!("({})", clauses.join(" OR ")));
         }
     }
 
     if let Some(worker) = &lq.worker {
+        let quoted: Vec<_> = worker.values.iter().map(|v| quote(v)).collect();
         if lq.allow_wildcards.unwrap_or(false) {
-            sqlb.and_where_like_left("v2_job_completed.worker", worker.replace("*", "%"));
+            let clauses: Vec<_> = worker
+                .values
+                .iter()
+                .map(|v| {
+                    let p = v.replace("*", "%").replace("'", "''");
+                    if worker.negated {
+                        format!("v2_job_completed.worker NOT LIKE '{p}'")
+                    } else {
+                        format!("v2_job_completed.worker LIKE '{p}'")
+                    }
+                })
+                .collect();
+            let sep = if worker.negated { " AND " } else { " OR " };
+            let inner = clauses.join(sep);
+            if worker.negated {
+                sqlb.and_where(format!("(v2_job_completed.worker IS NULL OR ({inner}))"));
+            } else {
+                sqlb.and_where(format!("({inner})"));
+            }
+        } else if worker.negated {
+            sqlb.and_where(not_in_nullable("v2_job_completed.worker", &quoted));
         } else {
-            sqlb.and_where_eq("v2_job_completed.worker", "?".bind(worker));
+            sqlb.and_where_in("v2_job_completed.worker", &quoted);
         }
     }
 
@@ -220,24 +354,68 @@ pub fn filter_list_completed_query(
     }
 
     if let Some(ps) = &lq.script_path_start {
-        sqlb.and_where_like_left("runnable_path", ps);
+        let clauses: Vec<_> = ps
+            .values
+            .iter()
+            .map(|v| {
+                let e = v.replace("'", "''");
+                if ps.negated {
+                    format!("runnable_path NOT LIKE '{e}%'")
+                } else {
+                    format!("runnable_path LIKE '{e}%'")
+                }
+            })
+            .collect();
+        let sep = if ps.negated { " AND " } else { " OR " };
+        let inner = clauses.join(sep);
+        if ps.negated {
+            sqlb.and_where(format!("(runnable_path IS NULL OR ({inner}))"));
+        } else {
+            sqlb.and_where(format!("({inner})"));
+        }
     }
     if let Some(p) = &lq.script_path_exact {
-        sqlb.and_where_eq("runnable_path", "?".bind(p));
+        let quoted: Vec<_> = p.values.iter().map(|v| quote(v)).collect();
+        if p.negated {
+            sqlb.and_where(not_in_nullable("runnable_path", &quoted));
+        } else {
+            sqlb.and_where_in("runnable_path", &quoted);
+        }
     }
     if let Some(h) = &lq.script_hash {
         sqlb.and_where_eq("runnable_id", "?".bind(h));
     }
     if let Some(t) = &lq.tag {
+        let quoted: Vec<_> = t.values.iter().map(|v| quote(v)).collect();
         if lq.allow_wildcards.unwrap_or(false) {
-            sqlb.and_where_like_left("v2_job.tag", t.replace("*", "%"));
+            let clauses: Vec<_> = t
+                .values
+                .iter()
+                .map(|v| {
+                    let p = v.replace("*", "%").replace("'", "''");
+                    if t.negated {
+                        format!("v2_job.tag NOT LIKE '{p}'")
+                    } else {
+                        format!("v2_job.tag LIKE '{p}'")
+                    }
+                })
+                .collect();
+            let sep = if t.negated { " AND " } else { " OR " };
+            sqlb.and_where(format!("({})", clauses.join(sep)));
+        } else if t.negated {
+            sqlb.and_where_not_in("v2_job.tag", &quoted);
         } else {
-            sqlb.and_where_eq("v2_job.tag", "?".bind(t));
+            sqlb.and_where_in("v2_job.tag", &quoted);
         }
     }
 
     if let Some(cb) = &lq.created_by {
-        sqlb.and_where_eq("created_by", "?".bind(cb));
+        let quoted: Vec<_> = cb.values.iter().map(|v| quote(v)).collect();
+        if cb.negated {
+            sqlb.and_where_not_in("created_by", &quoted);
+        } else {
+            sqlb.and_where_in("created_by", &quoted);
+        }
     }
     if let Some(r) = &lq.success {
         if *r {
@@ -308,10 +486,12 @@ pub fn filter_list_completed_query(
         }
     }
     if let Some(jk) = &lq.job_kinds {
-        sqlb.and_where_in(
-            "kind",
-            &jk.split(',').into_iter().map(quote).collect::<Vec<_>>(),
-        );
+        let quoted: Vec<_> = jk.values.iter().map(|v| quote(v)).collect();
+        if jk.negated {
+            sqlb.and_where_not_in("kind", &quoted);
+        } else {
+            sqlb.and_where_in("kind", &quoted);
+        }
     }
 
     if let Some(args) = &lq.args {
@@ -327,11 +507,21 @@ pub fn filter_list_completed_query(
     }
 
     if let Some(tk) = &lq.trigger_kind {
-        sqlb.and_where_eq("trigger_kind", "?".bind(&format!("{}", tk)));
+        let quoted: Vec<_> = tk.values.iter().map(|v| quote(&format!("{}", v))).collect();
+        if tk.negated {
+            sqlb.and_where(not_in_nullable("trigger_kind", &quoted));
+        } else {
+            sqlb.and_where_in("trigger_kind", &quoted);
+        }
     }
 
     if let Some(tp) = &lq.trigger_path {
-        sqlb.and_where_eq("trigger", "?".bind(tp));
+        let quoted: Vec<_> = tp.values.iter().map(|v| quote(v)).collect();
+        if tp.negated {
+            sqlb.and_where(not_in_nullable("trigger", &quoted));
+        } else {
+            sqlb.and_where_in("trigger", &quoted);
+        }
     }
 
     sqlb
@@ -375,6 +565,7 @@ pub fn list_completed_jobs_query(
 #[cfg(test)]
 mod tests {
     use super::*;
+    use crate::negated_filter::NegatedListFilter;
 
     fn empty_queue_query() -> ListQueueQuery {
         ListQueueQuery {
@@ -478,7 +669,7 @@ mod tests {
     #[test]
     fn test_queue_filter_script_path_start() {
         let lq = ListQueueQuery {
-            script_path_start: Some("f/test".to_string()),
+            script_path_start: Some(NegatedListFilter::positive(vec!["f/test".to_string()])),
             ..empty_queue_query()
         };
         let sqlb = filter_list_queue_query(
@@ -495,7 +686,9 @@ mod tests {
     #[test]
     fn test_queue_filter_script_path_exact() {
         let lq = ListQueueQuery {
-            script_path_exact: Some("f/test/script".to_string()),
+            script_path_exact: Some(NegatedListFilter::positive(vec![
+                "f/test/script".to_string()
+            ])),
             ..empty_queue_query()
         };
         let sqlb = filter_list_queue_query(
@@ -510,10 +703,7 @@ mod tests {
 
     #[test]
     fn test_queue_filter_running() {
-        let lq = ListQueueQuery {
-            running: Some(true),
-            ..empty_queue_query()
-        };
+        let lq = ListQueueQuery { running: Some(true), ..empty_queue_query() };
         let sqlb = filter_list_queue_query(
             SqlBuilder::select_from("v2_job_queue").clone(),
             &lq,
@@ -527,7 +717,10 @@ mod tests {
     #[test]
     fn test_queue_filter_job_kinds() {
         let lq = ListQueueQuery {
-            job_kinds: Some("script,flow".to_string()),
+            job_kinds: Some(NegatedListFilter::positive(vec![
+                "script".to_string(),
+                "flow".to_string(),
+            ])),
             ..empty_queue_query()
         };
         let sqlb = filter_list_queue_query(
@@ -543,10 +736,7 @@ mod tests {
 
     #[test]
     fn test_queue_filter_suspended() {
-        let lq = ListQueueQuery {
-            suspended: Some(true),
-            ..empty_queue_query()
-        };
+        let lq = ListQueueQuery { suspended: Some(true), ..empty_queue_query() };
         let sqlb = filter_list_queue_query(
             SqlBuilder::select_from("v2_job_queue").clone(),
             &lq,
@@ -559,10 +749,7 @@ mod tests {
 
     #[test]
     fn test_queue_filter_is_not_schedule() {
-        let lq = ListQueueQuery {
-            is_not_schedule: Some(true),
-            ..empty_queue_query()
-        };
+        let lq = ListQueueQuery { is_not_schedule: Some(true), ..empty_queue_query() };
         let sqlb = filter_list_queue_query(
             SqlBuilder::select_from("v2_job_queue").clone(),
             &lq,
@@ -575,10 +762,7 @@ mod tests {
 
     #[test]
     fn test_queue_filter_has_null_parent() {
-        let lq = ListQueueQuery {
-            has_null_parent: Some(true),
-            ..empty_queue_query()
-        };
+        let lq = ListQueueQuery { has_null_parent: Some(true), ..empty_queue_query() };
         let sqlb = filter_list_queue_query(
             SqlBuilder::select_from("v2_job_queue").clone(),
             &lq,
@@ -591,10 +775,7 @@ mod tests {
 
     #[test]
     fn test_queue_filter_is_flow_step_true() {
-        let lq = ListQueueQuery {
-            is_flow_step: Some(true),
-            ..empty_queue_query()
-        };
+        let lq = ListQueueQuery { is_flow_step: Some(true), ..empty_queue_query() };
         let sqlb = filter_list_queue_query(
             SqlBuilder::select_from("v2_job_queue").clone(),
             &lq,
@@ -607,10 +788,7 @@ mod tests {
 
     #[test]
     fn test_queue_filter_is_flow_step_false() {
-        let lq = ListQueueQuery {
-            is_flow_step: Some(false),
-            ..empty_queue_query()
-        };
+        let lq = ListQueueQuery { is_flow_step: Some(false), ..empty_queue_query() };
         let sqlb = filter_list_queue_query(
             SqlBuilder::select_from("v2_job_queue").clone(),
             &lq,
@@ -623,10 +801,7 @@ mod tests {
 
     #[test]
     fn test_queue_admins_all_workspaces() {
-        let lq = ListQueueQuery {
-            all_workspaces: Some(true),
-            ..empty_queue_query()
-        };
+        let lq = ListQueueQuery { all_workspaces: Some(true), ..empty_queue_query() };
         let sqlb = filter_list_queue_query(
             SqlBuilder::select_from("v2_job_queue").clone(),
             &lq,
@@ -639,10 +814,7 @@ mod tests {
 
     #[test]
     fn test_queue_non_admins_ignores_all_workspaces() {
-        let lq = ListQueueQuery {
-            all_workspaces: Some(true),
-            ..empty_queue_query()
-        };
+        let lq = ListQueueQuery { all_workspaces: Some(true), ..empty_queue_query() };
         let sqlb = filter_list_queue_query(
             SqlBuilder::select_from("v2_job_queue").clone(),
             &lq,
@@ -695,10 +867,7 @@ mod tests {
 
     #[test]
     fn test_completed_filter_success_true() {
-        let lq = ListCompletedQuery {
-            success: Some(true),
-            ..empty_completed_query()
-        };
+        let lq = ListCompletedQuery { success: Some(true), ..empty_completed_query() };
         let sqlb = filter_list_completed_query(
             SqlBuilder::select_from("v2_job_completed").clone(),
             &lq,
@@ -711,10 +880,7 @@ mod tests {
 
     #[test]
     fn test_completed_filter_success_false() {
-        let lq = ListCompletedQuery {
-            success: Some(false),
-            ..empty_completed_query()
-        };
+        let lq = ListCompletedQuery { success: Some(false), ..empty_completed_query() };
         let sqlb = filter_list_completed_query(
             SqlBuilder::select_from("v2_job_completed").clone(),
             &lq,
@@ -739,7 +905,7 @@ mod tests {
     #[test]
     fn test_completed_filter_label() {
         let lq = ListCompletedQuery {
-            label: Some("deploy".to_string()),
+            label: Some(NegatedListFilter::positive(vec!["deploy".to_string()])),
             ..empty_completed_query()
         };
         let sqlb = filter_list_completed_query(
@@ -754,10 +920,7 @@ mod tests {
 
     #[test]
     fn test_completed_filter_is_skipped() {
-        let lq = ListCompletedQuery {
-            is_skipped: Some(true),
-            ..empty_completed_query()
-        };
+        let lq = ListCompletedQuery { is_skipped: Some(true), ..empty_completed_query() };
         let sqlb = filter_list_completed_query(
             SqlBuilder::select_from("v2_job_completed").clone(),
             &lq,
diff --git a/backend/windmill-api-jobs/src/types.rs b/backend/windmill-api-jobs/src/types.rs
index 5ca13645e7..33f312e0b4 100644
--- a/backend/windmill-api-jobs/src/types.rs
+++ b/backend/windmill-api-jobs/src/types.rs
@@ -27,6 +27,8 @@ use windmill_common::{
 
 use windmill_api_sse::{Job, JobExtended};
 
+use crate::negated_filter::NegatedListFilter;
+
 // ------------ RunJobQuery ------------
 
 #[derive(Debug, Deserialize, Clone, Default)]
@@ -89,10 +91,10 @@ impl RunJobQuery {
 
 #[derive(Deserialize, Clone)]
 pub struct ListQueueQuery {
-    pub script_path_start: Option<String>,
-    pub script_path_exact: Option<String>,
+    pub script_path_start: Option<NegatedListFilter<String>>,
+    pub script_path_exact: Option<NegatedListFilter<String>>,
     pub script_hash: Option<String>,
-    pub created_by: Option<String>,
+    pub created_by: Option<NegatedListFilter<String>>,
     pub started_before: Option<chrono::DateTime<chrono::Utc>>,
     pub started_after: Option<chrono::DateTime<chrono::Utc>>,
     pub created_before: Option<chrono::DateTime<chrono::Utc>>,
@@ -103,12 +105,12 @@ pub struct ListQueueQuery {
     pub schedule_path: Option<String>,
     pub parent_job: Option<String>,
     pub order_desc: Option<bool>,
-    pub job_kinds: Option<String>,
+    pub job_kinds: Option<NegatedListFilter<String>>,
     pub suspended: Option<bool>,
-    pub worker: Option<String>,
+    pub worker: Option<NegatedListFilter<String>>,
     // filter by matching a subset of the args using base64 encoded json subset
     pub args: Option<String>,
-    pub tag: Option<String>,
+    pub tag: Option<NegatedListFilter<String>>,
     pub scheduled_for_before_now: Option<bool>,
     pub all_workspaces: Option<bool>,
     pub is_flow_step: Option<bool>,
@@ -116,17 +118,17 @@ pub struct ListQueueQuery {
     pub is_not_schedule: Option<bool>,
     pub concurrency_key: Option<String>,
     pub allow_wildcards: Option<bool>,
-    pub trigger_kind: Option<JobTriggerKind>,
-    pub trigger_path: Option<String>,
+    pub trigger_kind: Option<NegatedListFilter<JobTriggerKind>>,
+    pub trigger_path: Option<NegatedListFilter<String>>,
     pub include_args: Option<bool>,
 }
 
 #[derive(Deserialize, Clone)]
 pub struct ListCompletedQuery {
-    pub script_path_start: Option<String>,
-    pub script_path_exact: Option<String>,
+    pub script_path_start: Option<NegatedListFilter<String>>,
+    pub script_path_exact: Option<NegatedListFilter<String>>,
     pub script_hash: Option<String>,
-    pub created_by: Option<String>,
+    pub created_by: Option<NegatedListFilter<String>>,
     pub started_before: Option<chrono::DateTime<chrono::Utc>>,
     pub started_after: Option<chrono::DateTime<chrono::Utc>>,
     pub created_before: Option<chrono::DateTime<chrono::Utc>>,
@@ -142,7 +144,7 @@ pub struct ListCompletedQuery {
     pub running: Option<bool>,
     pub parent_job: Option<String>,
     pub order_desc: Option<bool>,
-    pub job_kinds: Option<String>,
+    pub job_kinds: Option<NegatedListFilter<String>>,
     pub is_skipped: Option<bool>,
     pub is_flow_step: Option<bool>,
     pub suspended: Option<bool>,
@@ -151,17 +153,17 @@ pub struct ListCompletedQuery {
     pub args: Option<String>,
     // filter by matching a subset of the result using base64 encoded json subset
     pub result: Option<String>,
-    pub tag: Option<String>,
+    pub tag: Option<NegatedListFilter<String>>,
     pub scheduled_for_before_now: Option<bool>,
     pub all_workspaces: Option<bool>,
     pub has_null_parent: Option<bool>,
-    pub label: Option<String>,
+    pub label: Option<NegatedListFilter<String>>,
     pub is_not_schedule: Option<bool>,
     pub concurrency_key: Option<String>,
-    pub worker: Option<String>,
+    pub worker: Option<NegatedListFilter<String>>,
     pub allow_wildcards: Option<bool>,
-    pub trigger_kind: Option<JobTriggerKind>,
-    pub trigger_path: Option<String>,
+    pub trigger_kind: Option<NegatedListFilter<JobTriggerKind>>,
+    pub trigger_path: Option<NegatedListFilter<String>>,
     pub include_args: Option<bool>,
 }
 
@@ -578,8 +580,7 @@ mod tests {
 
     #[test]
     fn test_decode_payload_valid() {
-        let payload = base64::engine::general_purpose::STANDARD
-            .encode(r#"{"key": "value"}"#);
+        let payload = base64::engine::general_purpose::STANDARD.encode(r#"{"key": "value"}"#);
         let result: HashMap<String, serde_json::Value> = decode_payload(payload).unwrap();
         assert_eq!(result["key"], json!("value"));
     }
@@ -644,22 +645,15 @@ mod tests {
 
     #[test]
     fn test_run_job_query_payload_as_args_valid() {
-        let encoded = base64::engine::general_purpose::STANDARD
-            .encode(r#"{"x": 42}"#);
-        let q = RunJobQuery {
-            payload: Some(encoded),
-            ..Default::default()
-        };
+        let encoded = base64::engine::general_purpose::STANDARD.encode(r#"{"x": 42}"#);
+        let q = RunJobQuery { payload: Some(encoded), ..Default::default() };
         let result = q.payload_as_args().unwrap();
         assert!(result.contains_key("x"));
     }
 
     #[test]
     fn test_run_job_query_payload_as_args_invalid() {
-        let q = RunJobQuery {
-            payload: Some("invalid!!!".to_string()),
-            ..Default::default()
-        };
+        let q = RunJobQuery { payload: Some("invalid!!!".to_string()), ..Default::default() };
         assert!(q.payload_as_args().is_err());
     }
 
@@ -668,10 +662,10 @@ mod tests {
     #[test]
     fn test_list_completed_to_queue_query_conversion() {
         let lcq = ListCompletedQuery {
-            script_path_start: Some("f/test".to_string()),
+            script_path_start: Some(NegatedListFilter::positive(vec!["f/test".to_string()])),
             script_path_exact: None,
             script_hash: None,
-            created_by: Some("admin".to_string()),
+            created_by: Some(NegatedListFilter::positive(vec!["admin".to_string()])),
             started_before: None,
             started_after: None,
             created_before: Some(chrono::Utc::now()),
@@ -687,14 +681,17 @@ mod tests {
             running: Some(true),
             parent_job: None,
             order_desc: Some(true),
-            job_kinds: Some("script,flow".to_string()),
+            job_kinds: Some(NegatedListFilter::positive(vec![
+                "script".to_string(),
+                "flow".to_string(),
+            ])),
             is_skipped: None,
             is_flow_step: None,
             suspended: None,
             schedule_path: None,
             args: None,
             result: None,
-            tag: Some("custom".to_string()),
+            tag: Some(NegatedListFilter::positive(vec!["custom".to_string()])),
             scheduled_for_before_now: None,
             all_workspaces: None,
             has_null_parent: None,
@@ -709,11 +706,24 @@ mod tests {
         };
 
         let lqq: ListQueueQuery = lcq.into();
-        assert_eq!(lqq.script_path_start, Some("f/test".to_string()));
-        assert_eq!(lqq.created_by, Some("admin".to_string()));
+        assert_eq!(
+            lqq.script_path_start
+                .as_ref()
+                .and_then(|f| f.values.first().cloned()),
+            Some("f/test".to_string())
+        );
+        assert_eq!(
+            lqq.created_by
+                .as_ref()
+                .and_then(|f| f.values.first().cloned()),
+            Some("admin".to_string())
+        );
         assert_eq!(lqq.running, Some(true));
-        assert_eq!(lqq.job_kinds, Some("script,flow".to_string()));
-        assert_eq!(lqq.tag, Some("custom".to_string()));
+        assert_eq!(lqq.job_kinds.as_ref().map(|f| f.values.len()), Some(2));
+        assert_eq!(
+            lqq.tag.as_ref().and_then(|f| f.values.first().cloned()),
+            Some("custom".to_string())
+        );
     }
 
     #[test]
diff --git a/backend/windmill-api-schedule/src/lib.rs b/backend/windmill-api-schedule/src/lib.rs
index bc01a7525c..162b1f15e4 100644
--- a/backend/windmill-api-schedule/src/lib.rs
+++ b/backend/windmill-api-schedule/src/lib.rs
@@ -6,8 +6,6 @@
  * LICENSE-AGPL for a copy of the license.
  */
 
-use windmill_api_auth::{check_scopes, maybe_refresh_folders, require_super_admin, ApiAuthed};
-use windmill_common::DB;
 use axum::{
     extract::{Extension, Path, Query},
     routing::{delete, get, post},
@@ -18,8 +16,10 @@ use serde::{Deserialize, Serialize};
 use sql_builder::{prelude::Bind, SqlBuilder};
 use sqlx::{Postgres, Transaction};
 use std::str::FromStr;
+use windmill_api_auth::{check_scopes, maybe_refresh_folders, require_super_admin, ApiAuthed};
 use windmill_audit::audit_oss::audit_log;
 use windmill_audit::ActionKind;
+use windmill_common::DB;
 use windmill_common::{
     db::UserDB,
     error::{Error, JsonResult, Result},
@@ -486,8 +486,15 @@ pub struct ListScheduleQuery {
     pub per_page: Option<usize>,
     pub path: Option<String>,
     pub is_flow: Option<bool>,
+    // filter by matching a subset of the args using base64 encoded json subset
     pub args: Option<String>,
     pub path_start: Option<String>,
+    // exact match on schedule path
+    pub schedule_path: Option<String>,
+    // filter on description (pattern match)
+    pub description: Option<String>,
+    // filter on summary (pattern match)
+    pub summary: Option<String>,
 }
 
 #[derive(sqlx::FromRow, Serialize, Deserialize, Debug, Clone)]
@@ -543,6 +550,18 @@ async fn list_schedule(
     if let Some(path_start) = &lsq.path_start {
         sqlb.and_where_like_left("path", path_start);
     }
+    if let Some(schedule_path) = &lsq.schedule_path {
+        sqlb.and_where_eq("path", "?".bind(schedule_path));
+    }
+    if let Some(description) = &lsq.description {
+        sqlb.and_where(&format!(
+            "description ILIKE '%{}%'",
+            description.replace("'", "''")
+        ));
+    }
+    if let Some(summary) = &lsq.summary {
+        sqlb.and_where(&format!("summary ILIKE '%{}%'", summary.replace("'", "''")));
+    }
     let sql = sqlb.sql().map_err(|e| Error::internal_err(e.to_string()))?;
     let rows = sqlx::query_as::<_, ScheduleLight>(&sql)
         .fetch_all(&mut *tx)
diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index 27e535f8bf..f2796962c8 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -4091,6 +4091,21 @@ paths:
           in: query
           schema:
             type: string
+        - name: path
+          description: exact path match filter
+          in: query
+          schema:
+            type: string
+        - name: description
+          description: pattern match filter for description field (case-insensitive)
+          in: query
+          schema:
+            type: string
+        - name: value
+          description: pattern match filter for non-secret variable values (case-insensitive)
+          in: query
+          schema:
+            type: string
         - $ref: "#/components/parameters/Page"
         - $ref: "#/components/parameters/PerPage"
       responses:
@@ -5090,6 +5105,21 @@ paths:
           in: query
           schema:
             type: string
+        - name: path
+          description: exact path match filter
+          in: query
+          schema:
+            type: string
+        - name: description
+          description: pattern match filter for description field (case-insensitive)
+          in: query
+          schema:
+            type: string
+        - name: value
+          description: JSONB subset match filter using base64 encoded JSON
+          in: query
+          schema:
+            type: string
       responses:
         "200":
           description: resource list
@@ -11120,7 +11150,7 @@ paths:
         - $ref: "#/components/parameters/PerPage"
         - $ref: "#/components/parameters/ArgsFilter"
         - name: path
-          description: filter by path
+          description: filter by path (script path)
           in: query
           schema:
             type: string
@@ -11134,6 +11164,21 @@ paths:
           in: query
           schema:
             type: string
+        - name: schedule_path
+          description: exact match on the schedule's path
+          in: query
+          schema:
+            type: string
+        - name: description
+          description: pattern match filter for description field (case-insensitive)
+          in: query
+          schema:
+            type: string
+        - name: summary
+          description: pattern match filter for summary field (case-insensitive)
+          in: query
+          schema:
+            type: string
       responses:
         "200":
           description: schedule list
@@ -16885,6 +16930,16 @@ paths:
           description: Filter by asset kinds (multiple values allowed)
           schema:
             type: string
+        - name: path
+          in: query
+          description: exact path match filter
+          schema:
+            type: string
+        - name: columns
+          in: query
+          description: JSONB subset match filter for columns using base64 encoded JSON
+          schema:
+            type: string
       responses:
         "200":
           description: paginated assets in the workspace
@@ -17258,10 +17313,10 @@ components:
         type: integer
     JobTriggerKind:
       name: trigger_kind
-      description: trigger kind (schedule, http, websocket...)
+      description: "filter by trigger kind. Supports comma-separated list (e.g. 'schedule,webhook') and negation by prefixing all values with '!' (e.g. '!schedule,!webhook')"
       in: query
       schema:
-        $ref: "#/components/schemas/JobTriggerKind"
+        type: string
     OrderDesc:
       name: order_desc
       description: order by desc order (default true)
@@ -17270,19 +17325,19 @@ components:
         type: boolean
     CreatedBy:
       name: created_by
-      description: mask to filter exact matching user creator
+      description: "filter by exact matching user creator. Supports comma-separated list (e.g. 'alice,bob') and negation by prefixing all values with '!' (e.g. '!alice,!bob')"
       in: query
       schema:
         type: string
     Label:
       name: label
-      description: mask to filter exact matching job's label (job labels are completed jobs with as a result an object containing a string in the array at key 'wm_labels')
+      description: "filter by exact matching job label. Supports comma-separated list (e.g. 'deploy,release') and negation by prefixing all values with '!' (e.g. '!deploy,!release')"
       in: query
       schema:
         type: string
     Worker:
       name: worker
-      description: worker this job was ran on
+      description: "filter by worker this job ran on. Supports comma-separated list (e.g. 'worker-1,worker-2') and negation by prefixing all values with '!' (e.g. '!worker-1,!worker-2')"
       in: query
       schema:
         type: string
@@ -17348,7 +17403,7 @@ components:
         type: string
     ScriptStartPath:
       name: script_path_start
-      description: mask to filter matching starting path
+      description: "filter by script path prefix. Supports comma-separated list (e.g. 'f/folder1,f/folder2') and negation by prefixing all values with '!' (e.g. '!f/folder1,!f/folder2')"
       in: query
       schema:
         type: string
@@ -17360,13 +17415,13 @@ components:
         type: string
     TriggerPath:
       name: trigger_path
-      description: mask to filter by trigger path
+      description: "filter by trigger path. Supports comma-separated list (e.g. 'f/trigger1,f/trigger2') and negation by prefixing all values with '!' (e.g. '!f/trigger1,!f/trigger2')"
       in: query
       schema:
         type: string
     ScriptExactPath:
       name: script_path_exact
-      description: mask to filter exact matching path
+      description: "filter by exact matching script path. Supports comma-separated list (e.g. 'f/script1,f/script2') and negation by prefixing all values with '!' (e.g. '!f/script1,!f/script2')"
       in: query
       schema:
         type: string
@@ -17481,7 +17536,7 @@ components:
         type: string
     Tag:
       name: tag
-      description: filter on jobs with a given tag/worker group
+      description: "filter by tag/worker group. Supports comma-separated list (e.g. 'gpu,highmem') and negation by prefixing all values with '!' (e.g. '!gpu,!highmem')"
       in: query
       schema:
         type: string
@@ -17525,9 +17580,7 @@ components:
         enum: [Create, Update, Delete, Execute]
     JobKinds:
       name: job_kinds
-      description:
-        filter on job kind (values 'preview', 'script', 'dependencies', 'flow')
-        separated by,
+      description: "filter by job kind. Supports comma-separated list of values ('preview', 'script', 'dependencies', 'flow') and negation by prefixing all values with '!' (e.g. '!preview,!dependencies')"
       in: query
       schema:
         type: string
diff --git a/backend/windmill-store/src/resources.rs b/backend/windmill-store/src/resources.rs
index 18377abfae..07fcd6c93b 100644
--- a/backend/windmill-store/src/resources.rs
+++ b/backend/windmill-store/src/resources.rs
@@ -160,9 +160,13 @@ struct EditResource {
 
 #[derive(Deserialize)]
 pub struct ListResourceQuery {
-    resource_type: Option<String>,
-    resource_type_exclude: Option<String>,
-    path_start: Option<String>,
+    pub resource_type: Option<String>,
+    pub resource_type_exclude: Option<String>,
+    pub path_start: Option<String>,
+    pub path: Option<String>,
+    pub description: Option<String>,
+    // filter by matching a subset of the value using base64 encoded json subset
+    pub value: Option<String>,
 }
 
 #[derive(Serialize, FromRow)]
@@ -282,6 +286,18 @@ async fn list_resources(
         sqlb.and_where_like_left("resource.path", path_start);
     }
 
+    if let Some(path) = &lq.path {
+        sqlb.and_where_eq("resource.path", "?".bind(path));
+    }
+
+    if let Some(description) = &lq.description {
+        sqlb.and_where("resource.description ILIKE ?".bind(&format!("%{}%", description)));
+    }
+
+    if let Some(value) = &lq.value {
+        sqlb.and_where("resource.value @> ?".bind(&value.replace("'", "''")));
+    }
+
     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::<_, ListableResource>(&sql)
diff --git a/backend/windmill-store/src/variables.rs b/backend/windmill-store/src/variables.rs
index 1a2a2c83a2..0a6ecb643a 100644
--- a/backend/windmill-store/src/variables.rs
+++ b/backend/windmill-store/src/variables.rs
@@ -96,7 +96,11 @@ async fn list_contextual_variables(
 
 #[derive(Deserialize)]
 struct ListVariableQuery {
-    path_start: Option<String>,
+    pub path_start: Option<String>,
+    pub path: Option<String>,
+    pub description: Option<String>,
+    // filter by matching the non-encrypted value (for non-secrets only)
+    pub value: Option<String>,
 }
 
 async fn list_variables(
@@ -106,33 +110,76 @@ async fn list_variables(
     Query(lq): Query<ListVariableQuery>,
     Query(pagination): Query<Pagination>,
 ) -> JsonResult<Vec<ListableVariable>> {
+    use sql_builder::{bind::Bind, SqlBuilder};
+
     let (per_page, offset) = paginate(pagination);
 
-    let mut tx = user_db.begin(&authed).await?;
+    let mut sqlb = SqlBuilder::select_from("variable")
+        .fields(&[
+            "variable.workspace_id",
+            "variable.path",
+            "CASE WHEN is_secret IS TRUE THEN null ELSE variable.value::text END as value",
+            "is_secret",
+            "variable.description",
+            "variable.extra_perms",
+            "account",
+            "is_oauth",
+            "(now() > account.expires_at) as is_expired",
+            "account.refresh_error",
+            "resource.path IS NOT NULL as is_linked",
+            "account.refresh_token != '' as is_refreshed",
+            "variable.expires_at",
+        ])
+        .left()
+        .join("account")
+        .on(&format!(
+            "variable.account = account.id AND account.workspace_id = '{}'",
+            w_id
+        ))
+        .left()
+        .join("resource")
+        .on(&format!(
+            "resource.path = variable.path AND resource.workspace_id = '{}'",
+            w_id
+        ))
+        .and_where("variable.workspace_id = ?".bind(&w_id))
+        .and_where(&format!(
+            "variable.path NOT LIKE 'u/' || '{}' || '/secret_arg/%'",
+            authed.username
+        ))
+        .order_by("path", false)
+        .limit(per_page)
+        .offset(offset)
+        .clone();
 
-    let rows = sqlx::query_as::<_, ListableVariable>(
-        "SELECT variable.workspace_id, variable.path, CASE WHEN is_secret IS TRUE THEN null ELSE variable.value::text END as value,
-         is_secret, variable.description, variable.extra_perms, account, is_oauth, (now() > account.expires_at) as is_expired,
-         account.refresh_error,
-         resource.path IS NOT NULL as is_linked,
-         account.refresh_token != '' as is_refreshed,
-         variable.expires_at
-         from variable
-         LEFT JOIN account ON variable.account = account.id AND account.workspace_id = $1
-         LEFT JOIN resource ON resource.path = variable.path AND resource.workspace_id = $1
-         WHERE variable.workspace_id = $1 AND variable.path NOT LIKE 'u/' || $2 || '/secret_arg/%'
-            AND variable.path LIKE $3 || '%'
-         ORDER BY path
-         LIMIT $4 OFFSET $5
-",
-    )
-    .bind(&w_id)
-    .bind(&authed.username)
-    .bind(&lq.path_start.unwrap_or_default())
-    .bind(per_page as i32)
-    .bind(offset as i32)
-    .fetch_all(&mut *tx)
-    .await?;
+    if let Some(path_start) = &lq.path_start {
+        sqlb.and_where_like_left("variable.path", path_start);
+    }
+
+    if let Some(path) = &lq.path {
+        sqlb.and_where_eq("variable.path", "?".bind(path));
+    }
+
+    if let Some(description) = &lq.description {
+        sqlb.and_where(&format!(
+            "variable.description ILIKE '%{}%'",
+            description.replace("'", "''")
+        ));
+    }
+
+    if let Some(value) = &lq.value {
+        // Only filter on non-secret variables' value
+        sqlb.and_where(&format!(
+            "(is_secret = FALSE AND variable.value ILIKE '%{}%')",
+            value.replace("'", "''")
+        ));
+    }
+
+    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::<_, ListableVariable>(&sql)
+        .fetch_all(&mut *tx)
+        .await?;
 
     tx.commit().await?;
     Ok(Json(rows))
diff --git a/frontend/src/lib/components/ConcurrentJobsChart.svelte b/frontend/src/lib/components/ConcurrentJobsChart.svelte
index d9d976bdb5..5ba2ad4e37 100644
--- a/frontend/src/lib/components/ConcurrentJobsChart.svelte
+++ b/frontend/src/lib/components/ConcurrentJobsChart.svelte
@@ -260,6 +260,6 @@
 	} as any)
 </script>
 
-<div class="relative max-h-40">
+<div class="relative h-44">
 	<Line {data} {options} />
 </div>
diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte
index d919c97100..ba3a848ff9 100644
--- a/frontend/src/lib/components/DateTimeInput.svelte
+++ b/frontend/src/lib/components/DateTimeInput.svelte
@@ -184,13 +184,13 @@
 			unifiedSize="md"
 			wrapperClasses="h-full"
 			{disabled}
+			iconOnly
+			endIcon={{ icon: X }}
 			on:click={() => {
 				value = null
 				dispatch('clear')
 			}}
-		>
-			<X size={14} />
-		</Button>
+		></Button>
 	{/if}
 	<!-- <div>
 		<ToggleButtonGroup bind:selected={format} let:item>
diff --git a/frontend/src/lib/components/DropdownMenu.svelte b/frontend/src/lib/components/DropdownMenu.svelte
new file mode 100644
index 0000000000..83355a8fbd
--- /dev/null
+++ b/frontend/src/lib/components/DropdownMenu.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	type Item = {
+		label: string
+		icon?: any
+		right?: string
+		onClick?: () => void
+		onHover?: (hover: boolean) => void
+	}
+	export type Props = {
+		closeCallback?: () => void
+		items: Item[]
+	}
+	let { items, closeCallback }: Props = $props()
+</script>
+
+<ul class="bg-surface-tertiary rounded-md border w-56 relative drop-shadow-base">
+	{#each items as item}
+		<li class="w-full">
+			<button
+				class="px-3 h-9 text-xs cursor-pointer hover:bg-surface-hover font-normal w-full text-left flex items-center gap-2.5"
+				onclick={() => {
+					item.onClick?.()
+					item.onHover?.(false)
+					closeCallback?.()
+				}}
+				onmouseenter={() => item.onHover?.(true)}
+				onmouseleave={() => item.onHover?.(false)}
+			>
+				{#if item.icon}
+					<item.icon size="16"></item.icon>
+				{/if}
+				<span class="flex-1">
+					{item.label}
+				</span>
+				{#if item.right}
+					<span class="text-xs text-hint">{item.right}</span>
+				{/if}
+			</button>
+		</li>
+	{/each}
+	{#if items.length === 0}
+		<li class="w-full">
+			<div
+				class="px-3 h-9 text-xs font-normal w-full text-left flex items-center gap-2.5 text-hint"
+			>
+				No actions available
+			</div>
+		</li>
+	{/if}
+</ul>
diff --git a/frontend/src/lib/components/DropdownSelect.svelte b/frontend/src/lib/components/DropdownSelect.svelte
deleted file mode 100644
index 7a31f3435b..0000000000
--- a/frontend/src/lib/components/DropdownSelect.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-	import DropdownV2 from '$lib/components/DropdownV2.svelte'
-	import { ChevronDown } from 'lucide-svelte'
-	import { twMerge } from 'tailwind-merge'
-	import type { Item } from '$lib/utils'
-
-	interface Props {
-		items?: Item[]
-		extraLabel?: import('svelte').Snippet
-		selected: string
-		selectedDisplayName?: string
-		btnClasses?: string
-	}
-
-	let { items = [], extraLabel, selected, selectedDisplayName, btnClasses }: Props = $props()
-
-	const filteredItems = $derived(items.filter((item) => item.id !== selected))
-</script>
-
-<DropdownV2 items={filteredItems}>
-	{#snippet buttonReplacement()}
-		<div
-			class={twMerge(
-				'p-2 h-8 flex flex-row items-center gap-2 border hover:bg-surface-hover cursor-pointer rounded-md',
-				btnClasses
-			)}
-		>
-			<div class="flex flex-row items-center gap-1 pr-2 justify-between w-full">
-				<span class="text-xs whitespace-nowrap">
-					{selectedDisplayName ?? items.find((item) => item.id === selected)?.displayName ?? ''}
-				</span>
-
-				{@render extraLabel?.()}
-			</div>
-			<ChevronDown size={12} />
-		</div>
-	{/snippet}
-</DropdownV2>
diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index 493dec8f1f..902de661aa 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -157,7 +157,7 @@
 			variant="subtle"
 			startIcon={{ icon: EllipsisVertical }}
 			btnClasses="bg-transparent"
-			iconOnly
+			iconOnly={!btnText}
 		>
 			{btnText}
 		</Button>
diff --git a/frontend/src/lib/components/FilterSearchbar.svelte b/frontend/src/lib/components/FilterSearchbar.svelte
new file mode 100644
index 0000000000..1b7f426d98
--- /dev/null
+++ b/frontend/src/lib/components/FilterSearchbar.svelte
@@ -0,0 +1,735 @@
+<script lang="ts" module>
+	import { z } from 'zod'
+	import { useSearchParams } from '$lib/svelte5UtilsKit.svelte'
+	import { formatDatePretty, parsePrettyDate, type IconType } from '$lib/utils'
+
+	export type FilterSchemaRec = Record<string, FilterSchema>
+	export type FilterSchema = (
+		| {
+				type: 'string' | 'number' | 'boolean'
+				allowMultiple?: boolean
+				format?: 'json'
+		  }
+		| {
+				type: 'date'
+				mode?: 'single' | 'end' | 'start'
+				otherField?: string // For range display
+				allowMultiple?: undefined
+		  }
+		| {
+				type: 'oneof'
+				options: { value: string; label?: string; description?: string }[]
+				allowCustomValue?: boolean
+				allowNegative?: boolean
+				allowMultiple?: boolean
+		  }
+	) & {
+		label?: string
+		description?: string
+		icon?: IconType
+	}
+	export type FilterInstanceRec<T extends FilterSchemaRec> = {
+		[K in keyof T]: FilterInstance<T[K]>
+	}
+	export type FilterInstance<T extends FilterSchema> = T extends { type: 'string' }
+		? string
+		: T extends { type: 'number' }
+			? number
+			: T extends { type: 'boolean' }
+				? boolean
+				: T extends { type: 'date' }
+					? Date
+					: T extends { type: 'oneof'; options: any; allowCustomValue?: infer A }
+						? A extends true
+							? string
+							: T['options'] extends { value: string }[]
+								? _NegativeFilterInstance<T>
+								: never
+						: never
+
+	type _NegativeFilterInstance<T extends { options: { value: string }[] }> = T extends {
+		allowNegative: true
+	}
+		? T['options'][number]['value'] | `!${T['options'][number]['value']}`
+		: T['options'][number]['value']
+
+	/**
+	 * Converts a FilterSchemaRec to a Zod schema for validation
+	 */
+	export function filterSchemaRecToZodSchema<T extends FilterSchemaRec>(
+		schemaRec: T
+	): z.ZodObject<{
+		[K in keyof T]: z.ZodType<FilterInstance<T[K]>>
+	}> {
+		const zodSchemaShape: Record<string, z.ZodType> = {}
+
+		for (const [key, filterSchema] of Object.entries(schemaRec)) {
+			let fieldSchema: z.ZodType
+
+			if (filterSchema.type === 'string') {
+				fieldSchema = z.string().nullable().default(null)
+			} else if (filterSchema.type === 'number') {
+				fieldSchema = z.number().nullable().default(null)
+			} else if (filterSchema.type === 'boolean') {
+				fieldSchema = z.boolean().nullable().default(null)
+			} else if (filterSchema.type === 'date') {
+				fieldSchema = z.string().nullable().default(null)
+			} else if (filterSchema.type === 'oneof') {
+				if (filterSchema.allowCustomValue) {
+					// If custom values are allowed, accept any string
+					fieldSchema = z.string().nullable().default(null)
+				} else {
+					// Extract the enum values from options
+					const values = filterSchema.options.map((o) => o.value) as [string, ...string[]]
+					fieldSchema = z.enum(values).nullable().default(null)
+				}
+			} else {
+				// Fallback for unknown types
+				fieldSchema = z.any().nullable().default(null)
+			}
+
+			zodSchemaShape[key] = fieldSchema
+		}
+
+		return z.object(zodSchemaShape) as any
+	}
+
+	/**
+	 * Creates a URL-synced filter instance that automatically syncs with URL search parameters
+	 */
+	export function useUrlSyncedFilterInstance<T extends FilterSchemaRec>(
+		schemaRec: T
+	): { val: Partial<FilterInstanceRec<T>> } {
+		// Build the Zod schema from the filter schema
+		const zodSchema = filterSchemaRecToZodSchema(schemaRec)
+
+		// Create URL-synced search params
+		const urlFilter = useSearchParams(zodSchema) as Record<string, unknown>
+
+		// Create the filter instance object
+		const filterInstance: { val: Partial<FilterInstanceRec<T>> } = $state({ val: {} })
+
+		// Sync URL params to filter instance on initialization and when URL changes
+		for (const key of Object.keys(schemaRec)) {
+			let urlValue = urlFilter[key]
+			if (schemaRec[key].type === 'date' && typeof urlValue === 'string') {
+				const d = new Date(urlValue)
+				urlValue = isNaN(d.getTime()) ? null : d
+			}
+			if (urlValue !== undefined && urlValue !== null) {
+				;(filterInstance.val as any)[key] = urlValue
+			}
+		}
+
+		// Sync filter instance changes back to URL params
+		for (const key of Object.keys(schemaRec)) {
+			$effect(() => {
+				let filterValue = (filterInstance.val as any)[key]
+				if (schemaRec[key].type === 'date' && filterValue instanceof Date) {
+					// Convert Date to ISO string for URL
+					filterValue = filterValue.toISOString()
+				}
+				if (untrack(() => urlFilter[key]) == filterValue) return // Avoid unnecessary updates
+				if (filterValue !== undefined && filterValue !== null) {
+					urlFilter[key] = filterValue
+				} else {
+					urlFilter[key] = null
+				}
+			})
+		}
+
+		return filterInstance
+	}
+
+	function filterToText<F extends FilterSchema>(filter: FilterInstance<F>, schema: F): string {
+		if (schema.type === 'date') {
+			const date =
+				typeof filter === 'string'
+					? new Date(filter)
+					: typeof filter === 'number'
+						? new Date(filter)
+						: (filter as Date)
+			return formatDatePretty(date)
+		}
+		return String(filter)
+	}
+
+	function textToFilter(text: string, schema: FilterSchema): FilterInstance<FilterSchema> | null {
+		if (schema.type === 'string') return text
+		if (schema.type === 'number') {
+			const num = Number(text)
+			return isNaN(num) ? null : (num as any)
+		}
+		if (schema.type === 'boolean') {
+			if (text.toLowerCase() === 'true') return true as any
+			if (text.toLowerCase() === 'false') return false as any
+			return null
+		}
+		if (schema.type === 'date') {
+			const date = parsePrettyDate(text)
+			return date ? (date as any) : null
+		}
+		if (schema.type === 'oneof') {
+			return text
+		}
+		return null
+	}
+
+	export type FilterValidationError = { fields: string[]; error: string }
+
+	/**
+	 * Validates a filter instance against its schema.
+	 * Returns a list of validation errors, each with the affected fields and an error message.
+	 */
+	export function validateFilterInstance<T extends FilterSchemaRec>(
+		schemaRec: T,
+		instance: Partial<FilterInstanceRec<T>>
+	): FilterValidationError[] {
+		const errors: FilterValidationError[] = []
+
+		for (const [key, rawValue] of Object.entries(instance)) {
+			const schema = schemaRec[key]
+			if (!schema) continue
+
+			if (schema.type === 'date') {
+				if (!rawValue || !((rawValue as any) instanceof Date) || isNaN(rawValue.getTime())) {
+					errors.push({ fields: [key], error: `Invalid date format` })
+				}
+			} else if (schema.type === 'oneof') {
+				const strValue = String(rawValue)
+				const elements = schema.allowMultiple ? strValue.split(',') : [strValue]
+				const validValues = schema.options.map((o) => o.value)
+
+				if (schema.allowMultiple && schema.allowNegative) {
+					const hasPositive = elements.some((v) => !v.startsWith('!'))
+					const hasNegative = elements.some((v) => v.startsWith('!'))
+					if (hasPositive && hasNegative) {
+						errors.push({
+							fields: [key],
+							error: `Cannot mix positive and negative values`
+						})
+						continue
+					}
+				}
+
+				if (!schema.allowCustomValue) {
+					const invalid = elements
+						.map((v) => v.replace(/^!/, ''))
+						.filter((v) => !validValues.includes(v))
+					if (invalid.length > 0) {
+						errors.push({
+							fields: [key],
+							error: `Invalid value${invalid.length > 1 ? 's' : ''}: ${invalid.join(', ')}`
+						})
+					}
+				}
+			} else if (schema.type === 'string' && schema.format === 'json') {
+				try {
+					JSON.parse(String(rawValue))
+				} catch (e) {
+					errors.push({ fields: [key], error: `Invalid JSON format` })
+				}
+			}
+		}
+
+		return errors
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge'
+	import { inputBaseClass, inputBorderClass, inputSizeClasses } from './text_input/TextInput.svelte'
+	import { MinusIcon, SearchIcon } from 'lucide-svelte'
+	import { assignObjInPlace, clone } from '$lib/utils'
+	import GenericDropdown from './select/GenericDropdown.svelte'
+	import SimpleEditor from './SimpleEditor.svelte'
+	import TaggedTextInput from './TaggedTextInput.svelte'
+	import { DebouncedTempValue, useTransformedSyncedValue } from '$lib/svelte5Utils.svelte'
+	import { untrack } from 'svelte'
+	import CloseButton from './common/CloseButton.svelte'
+	import Popover from './meltComponents/Popover.svelte'
+	import Button from './common/button/Button.svelte'
+	import Badge from './common/badge/Badge.svelte'
+	import InlineCalendarInput, {
+		fromCalendarDate,
+		toCalendarDate
+	} from './common/InlineCalendarInput.svelte'
+	import { ButtonType } from './common'
+
+	type Props<SchemaT extends FilterSchemaRec> = {
+		schema: SchemaT
+		value: Partial<FilterInstanceRec<SchemaT>>
+		presets?: { name: string; value: string }[]
+		class?: string
+		placeholder?: string
+	}
+
+	type SchemaT = FilterSchemaRec // TODO: Generic
+	let {
+		schema,
+		value: valueInput = $bindable(),
+		presets: _presets = [],
+		class: className,
+		placeholder = 'Filter...'
+	}: Props<SchemaT> = $props()
+
+	let _value = new DebouncedTempValue(
+		() => clone(valueInput),
+		(v) => !errors.length && (valueInput = clone(v)),
+		(t) => Object.entries(t)
+	)
+	let value = $derived(_value.current)
+	let errors = $derived(validateFilterInstance(schema, value))
+
+	let currentTag: keyof SchemaT | undefined = $state()
+	let currentTextSegment = $state({ text: '', start: 0, end: 0 })
+	let open = $state(false)
+	let inputElement: HTMLDivElement | undefined = $state()
+	let highlightedIndex = $state(0)
+	let taggedTextInput: TaggedTextInput | undefined = $state()
+
+	let tags = $derived(
+		Object.entries(schema).map(([key, filterSchema]) => ({
+			regex: new RegExp(`\\b${key}:(?:\\\\.|[^\\s])*`, 'g'),
+			id: key,
+			onClear: () => (delete value[key], asText.reparse())
+		}))
+	)
+
+	let keyHighlightRegex = $derived(new RegExp(`\\b(${Object.keys(schema).join('|')}):`, 'g'))
+
+	let errorKeys = $derived(new Set(errors.flatMap((e) => e.fields)))
+	let errorHighlights = $derived(
+		[...errorKeys].map((key) => ({
+			regex: new RegExp(`(?<=\\b${key}:)(?:\\\\.|[^\\s])+`),
+			classes: 'text-red-500 dark:text-red-400'
+		}))
+	)
+
+	let menuItems = $derived.by(() => {
+		if (!currentTag) {
+			const searchText = currentTextSegment.text.trim().toLowerCase()
+			return Object.entries(schema)
+				.filter(([k, _]) => !(k in value))
+				.filter(([k, filterSchema]) => {
+					if (!searchText) return true
+					const label = (filterSchema.label || k).toLowerCase()
+					const key = k.toLowerCase()
+					return label.includes(searchText) || key.includes(searchText)
+				})
+				.map(([key, filterSchema]) => ({
+					type: 'filter' as const,
+					key,
+					filterSchema,
+					onClick: () => {
+						// Replace the text segment with the new filter tag
+						const before = asText.val.slice(0, currentTextSegment.start)
+						const after = asText.val.slice(currentTextSegment.end)
+						asText.val =
+							`${before}${before && !before.endsWith(' ') ? ' ' : ''}${key}:\\\u00A0${after}`.trim() +
+							'\u00A0'
+					}
+				}))
+		} else {
+			const filter = schema[currentTag]
+			if (filter.type === 'oneof') {
+				// When allowMultiple, split on comma and match against the last segment
+				const currentVal = String(value[currentTag!] ?? '')
+				let searchSuffix: string
+				if (filter.allowMultiple) {
+					const parts = currentVal.split(',')
+					searchSuffix = parts[parts.length - 1].replace(/^!/, '').trim()
+				} else {
+					searchSuffix = currentVal
+				}
+
+				// Already-selected values (for allowMultiple, to avoid suggesting duplicates)
+				const selectedValues = filter.allowMultiple
+					? currentVal
+							.split(',')
+							.slice(0, -1)
+							.map((v) => v.replace(/^!/, '').trim())
+					: []
+
+				return filter.options
+					.filter((o) => {
+						if (selectedValues.includes(o.value)) return false
+						if (!searchSuffix) return true
+						return o.value.includes(searchSuffix)
+					})
+					.map((option) => ({
+						type: 'option' as const,
+						option,
+						onClick: () =>
+							appendOrSetValueForCurrentTag((currentVal.includes('!') ? '!' : '') + option.value),
+						onNegativeClick: filter.allowNegative
+							? () => appendOrSetValueForCurrentTag('!' + option.value)
+							: undefined
+					}))
+			} else if (filter.type === 'boolean') {
+				return [
+					{
+						type: 'boolean' as const,
+						value: true,
+						label: 'True',
+						onClick: () => setValueForCurrentTag(true)
+					},
+					{
+						type: 'boolean' as const,
+						value: false,
+						label: 'False',
+						onClick: () => setValueForCurrentTag(false)
+					}
+				]
+			}
+		}
+		return []
+	})
+
+	// Reset highlighted index when menu items change
+	$effect(() => {
+		menuItems
+		open
+		highlightedIndex = 0
+	})
+
+	const kvRegex = /\b(\w+):((?:[^\s\\]|\\.)*)/g
+
+	function parseFromText(text: string): Partial<FilterInstanceRec<SchemaT>> {
+		const parsed: Record<string, string> = {}
+		let match
+		while ((match = kvRegex.exec(text)) !== null) {
+			let [_, key, val] = match
+			if (key in schema) {
+				val ??= ''
+				val = val.replace(/\\(.)/g, (_: string, c: string) => {
+					if (c === 'n') return '\n'
+					if (c === 'r') return '\r'
+					return c
+				}) // Unescape escaped characters
+				val = val.trim()
+				parsed[key] = textToFilter(val, schema[key]) as any
+			}
+		}
+		return parsed
+	}
+
+	function parseToText(v: Partial<FilterInstanceRec<SchemaT>>): string {
+		return (
+			Object.entries(v)
+				.map(([key, val]) =>
+					`${key}: ${filterToText(val as any, schema[key])}`
+						.replace(/ /g, '\\ ')
+						.replace(/\n/g, '\\n')
+						.replace(/\r/g, '\\r')
+				)
+				.join(' ') + '\u00A0'
+		)
+	}
+
+	let asText = useTransformedSyncedValue(
+		[() => (Object.entries(value), value), (v) => assignObjInPlace(value, v)],
+		parseToText,
+		parseFromText
+	)
+
+	function setValueForCurrentTag(val: any) {
+		if (!currentTag) return
+		value[currentTag!] = val
+		asText.reparse()
+	}
+
+	/**
+	 * For allowMultiple fields: appends a new value to the existing comma-separated list,
+	 * replacing the last (in-progress) segment. For non-allowMultiple fields, behaves like setValueForCurrentTag.
+	 */
+	function appendOrSetValueForCurrentTag(val: string) {
+		if (!currentTag) return
+		const filter = schema[currentTag]
+		if (filter.allowMultiple) {
+			const existing = String(value[currentTag!] ?? '')
+			const parts = existing.split(',')
+			// If any existing part is negative, force the new value to be negative too
+			const isNegativeContext = parts.slice(0, -1).some((p) => p.startsWith('!'))
+			if (isNegativeContext && !val.startsWith('!')) val = '!' + val
+			// Replace the last in-progress segment with the selected value
+			parts[parts.length - 1] = val
+			value[currentTag!] = parts.join(',')
+		} else {
+			value[currentTag!] = val
+		}
+		asText.reparse()
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (!open) return
+		if (e.key === 'Escape') {
+			open = false
+			return
+		}
+
+		if (menuItems.length && e.key === 'ArrowDown') {
+			highlightedIndex = (highlightedIndex + 1) % menuItems.length
+		} else if (menuItems.length && e.key === 'ArrowUp') {
+			highlightedIndex = (highlightedIndex - 1 + menuItems.length) % menuItems.length
+		} else if (e.key === 'Enter') {
+			if (menuItems[highlightedIndex]) {
+				menuItems[highlightedIndex].onClick()
+			} else {
+				setValueForCurrentTag(value[currentTag!])
+				taggedTextInput?.focusAtEnd()
+			}
+			const currTagSchema = currentTag ? schema[currentTag] : undefined
+			if (currTagSchema && 'format' in currTagSchema && currTagSchema.format === 'json') {
+				return
+			}
+		} else {
+			return
+		}
+		e.preventDefault()
+	}
+
+	type Preset = { name: string; value: string }
+	let presets: Preset[] = $derived(
+		_presets.filter((p) => {
+			// Only show presets that aren't already applied in asText
+			return !asText.val.includes(p.value)
+		})
+	)
+
+	function appendFilterAsText(presetValue: string) {
+		if (!asText.val.endsWith('\u00A0') && !asText.val.endsWith(' ')) asText.val += ' '
+		asText.val += presetValue + '\u00A0'
+	}
+</script>
+
+<svelte:window onmousedown={() => (open = false)} onkeydown={handleKeyDown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+	class={twMerge(
+		'flex items-center rounded-md bg-surface-input overflow-clip',
+		inputBorderClass({ error: errors.length > 0, forceFocus: open }),
+		ButtonType.UnifiedHeightClasses.md,
+		className
+	)}
+	onmousedown={(e) => {
+		if (!open) {
+			e.preventDefault()
+			if (!asText.val.endsWith('\u00A0') && !asText.val.endsWith(' ')) asText.val += '\u00A0'
+			taggedTextInput?.focusAtEnd()
+		}
+		open = true
+		e.stopPropagation()
+	}}
+	bind:this={inputElement}
+>
+	<TaggedTextInput
+		bind:this={taggedTextInput}
+		bind:value={asText.val}
+		{tags}
+		highlights={[
+			{ regex: /![a-zA-Z0-9_\-\/]+/, classes: 'text-yellow-600 dark:text-yellow-500' },
+			{ regex: keyHighlightRegex, classes: 'text-hint' },
+			{ regex: /,/, classes: 'text-hint mr-0.5' },
+			...errorHighlights
+		]}
+		onCurrentTagChange={(tag) => (currentTag = tag ? (tag.id as keyof SchemaT) : undefined)}
+		onTextSegmentAtCursorChange={(segment) => (currentTextSegment = segment)}
+		class={twMerge(
+			'overflow-x-auto !pr-24 bg-surface-input outline-none scrollbar-hidden text-nowrap flex-1 mr-2 mt-0.5',
+			inputBaseClass,
+			inputSizeClasses.md
+		)}
+		{placeholder}
+	/>
+	{#if asText.val}
+		<CloseButton small class="mr-1.5" onClick={() => (_value.current = {})} />
+	{:else}
+		<div class="mr-3">
+			<SearchIcon size={16} class="text-hint" />
+		</div>
+	{/if}
+</div>
+
+<GenericDropdown
+	{open}
+	getInputRect={() => inputElement?.getBoundingClientRect() ?? new DOMRect()}
+	innerClass="!max-h-[30rem]"
+	strictWidth
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div class="py-1 p-2 overflow-y-auto" onmousedown={(e) => e.stopPropagation()}>
+		{#if !currentTag || !schema[currentTag]}
+			{#if presets.length}
+				<div class="text-xs px-2 my-2 font-bold">Presets</div>
+				<div class="mb-3 px-2 flex gap-2 flex-wrap">
+					{#each presets as preset}
+						{@render presetTag(preset)}
+					{/each}
+				</div>
+			{/if}
+			<div class="text-xs px-2 my-2 font-bold">Filters</div>
+			{#each menuItems as item, index}
+				{#if item.type === 'filter' && item.filterSchema}
+					{@render menuItem({
+						Icon: item.filterSchema.icon || SearchIcon,
+						onClick: item.onClick,
+						label: item.filterSchema.label || item.key,
+						description: item.filterSchema.description,
+						highlighted: index === highlightedIndex
+					})}
+				{/if}
+			{/each}
+		{:else}
+			{#key currentTag}
+				{@render suggestion(schema[currentTag])}
+			{/key}
+		{/if}
+	</div>
+</GenericDropdown>
+
+{#snippet suggestion(filter: FilterSchema)}
+	{#if filter.description}
+		<div class="text-xs text-secondary px-2 my-2">{filter.description}</div>
+	{/if}
+	{#if filter.allowMultiple && (filter.type === 'string' || filter.type === 'oneof')}
+		<div class="text-2xs text-hint px-2 -mt-1 mb-2">Separate multiple values with commas</div>
+	{/if}
+	{#if filter.type === 'oneof'}
+		<div class="max-h-60 overflow-y-auto">
+			{#each menuItems as item, index}
+				{#if item.type === 'option' && item.option}
+					{@render menuItem({
+						onClick: item.onClick,
+						label: item.option.label || item.option.value,
+						highlighted: index === highlightedIndex,
+						onNegativeClick: item.onNegativeClick
+					})}
+				{/if}
+			{/each}
+		</div>
+	{:else if filter.type === 'boolean'}
+		{#each menuItems as item, index}
+			{#if item.type === 'boolean' && item.label}
+				{@render menuItem({
+					onClick: item.onClick,
+					label: item.label,
+					highlighted: index === highlightedIndex
+				})}
+			{/if}
+		{/each}
+	{:else if filter.type === 'date'}
+		{@const filterMode = filter.mode}
+		<div class="p-3 mb-1">
+			{#if !filterMode || filterMode === 'single'}
+				<InlineCalendarInput
+					bind:value={
+						() => toCalendarDate(value[currentTag!]),
+						(v) => {
+							setValueForCurrentTag(fromCalendarDate(v))
+							taggedTextInput?.preventCursorMoveOnNextSync()
+						}
+					}
+				/>
+			{:else}
+				{@const curr = toCalendarDate(value[currentTag!])}
+				{@const obj =
+					filterMode === 'end'
+						? { start: toCalendarDate(value[filter.otherField as keyof SchemaT]), end: curr }
+						: { end: toCalendarDate(value[filter.otherField as keyof SchemaT]), start: curr }}
+				<InlineCalendarInput
+					mode="range"
+					onClickBehavior={`set-${filterMode}`}
+					infiniteRange
+					bind:value={
+						() => obj,
+						(v) => {
+							setValueForCurrentTag(fromCalendarDate(v[filterMode]))
+							taggedTextInput?.preventCursorMoveOnNextSync()
+						}
+					}
+				/>
+			{/if}
+		</div>
+	{:else if filter.type === 'string' && filter.format === 'json'}
+		<div class="px-2 pb-2">
+			<SimpleEditor
+				autofocus={String(value[currentTag!] ?? '').length === 0}
+				lang="json"
+				autoHeight
+				small
+				bind:code={
+					() => String(value[currentTag!] ?? ''),
+					(v) => {
+						setValueForCurrentTag(v ?? '')
+						taggedTextInput?.preventCursorMoveOnNextSync()
+					}
+				}
+				class="border border-border-light rounded min-h-[4rem]"
+			/>
+		</div>
+	{/if}
+{/snippet}
+
+{#snippet menuItem({
+	Icon,
+	onClick,
+	label,
+	description,
+	highlighted = false,
+	onNegativeClick
+}: {
+	Icon?: IconType
+	onClick: () => void
+	label: string
+	description?: string
+	highlighted?: boolean
+	onNegativeClick?: () => void
+})}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class={twMerge(
+			'py-1.5 px-2 rounded-md hover:bg-surface-hover cursor-pointer text-sm flex items-center gap-3',
+			highlighted && 'bg-surface-hover'
+		)}
+		onclick={onClick}
+	>
+		{#if Icon}
+			<Icon size={16} class="inline" />
+		{/if}
+		<div class="inline flex-1 relative min-w-0">
+			<div class="text-sm ellipsize">{label}</div>
+			{#if description}
+				<div class="text-xs text-hint">{description}</div>
+			{/if}
+		</div>
+		{#if onNegativeClick}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<Popover openOnHover portal={null}>
+				{#snippet trigger()}
+					<Button
+						onClick={(e) => (e?.stopPropagation(), onNegativeClick?.())}
+						iconOnly
+						endIcon={{ icon: MinusIcon }}
+						unifiedSize="xs"
+						destructive
+					/>
+				{/snippet}
+				{#snippet content()}
+					<div class="text-xs">Exclude {label}</div>
+				{/snippet}
+			</Popover>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet presetTag({ name, value }: Preset)}
+	<Badge onclick={() => appendFilterAsText(value)} clickable>
+		{name}
+	</Badge>
+{/snippet}
diff --git a/frontend/src/lib/components/HistoricInputs.svelte b/frontend/src/lib/components/HistoricInputs.svelte
index e141400c4d..ca01013e0a 100644
--- a/frontend/src/lib/components/HistoricInputs.svelte
+++ b/frontend/src/lib/components/HistoricInputs.svelte
@@ -104,14 +104,13 @@
 				filters: {
 					show_skipped: false,
 					path: runnableId,
-					success: 'running',
-					arg: searchArgs ? JSON.stringify(searchArgs) : '',
-					per_page: 5
+					status: 'running',
+					arg: searchArgs ? JSON.stringify(searchArgs) : ''
 				},
+				perPage: 5,
 				jobKinds: getJobKinds(runnableType),
 				syncQueuedRunsCount: false,
 				refreshRate: 10000,
-				computeMinAndMax: undefined,
 				currentWorkspace: $workspaceStore ?? '',
 				skip: !runnableId
 			}) satisfies UseJobLoaderArgs
diff --git a/frontend/src/lib/components/RightClickPopover.svelte b/frontend/src/lib/components/RightClickPopover.svelte
new file mode 100644
index 0000000000..1315ddcf4b
--- /dev/null
+++ b/frontend/src/lib/components/RightClickPopover.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { clickOutside } from '$lib/utils'
+	import { fly } from 'svelte/transition'
+	import Portal from './Portal.svelte'
+	import type { Snippet } from 'svelte'
+
+	type Props = {
+		children: Snippet
+	}
+
+	const { children }: Props = $props()
+
+	let _isOpen = $state(false)
+	let mousePos = $state({ x: 0, y: 0 })
+	export function open(e: MouseEvent) {
+		e.preventDefault()
+		_isOpen = true
+		mousePos = { x: e.clientX, y: e.clientY }
+	}
+	export function close() {
+		_isOpen = false
+	}
+	export function isOpen() {
+		return _isOpen
+	}
+</script>
+
+<Portal>
+	{#if _isOpen}
+		<div
+			in:fly={{ x: 0, y: -10, duration: 120 }}
+			use:clickOutside={{
+				onClickOutside: (e) => {
+					_isOpen = false
+					e.preventDefault()
+					e.stopPropagation()
+				}
+			}}
+			class="absolute left-0 top-0 z-[9999] w-fit"
+			style="transform: translate({mousePos.x + 2}px, {mousePos.y + 2}px)"
+		>
+			{@render children()}
+		</div>
+	{/if}
+</Portal>
diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index 73216c8284..e2f2adca38 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import 'chartjs-adapter-date-fns'
 	import zoomPlugin from 'chartjs-plugin-zoom'
-	import Tooltip2 from '$lib/components/Tooltip.svelte'
 	import {
 		Chart as ChartJS,
 		Title,
@@ -17,7 +16,6 @@
 	} from 'chart.js'
 	import type { CompletedJob } from '$lib/gen'
 	import { getDbClockNow } from '$lib/forLater'
-	import Button from './common/button/Button.svelte'
 	import { Scatter } from '$lib/components/chartjs-wrappers/chartJs'
 	import DarkModeObserver from './DarkModeObserver.svelte'
 
@@ -28,10 +26,7 @@
 		maxTimeSet?: string | null
 		selectedIds?: string[]
 		canSelect?: boolean
-		lastFetchWentToEnd?: boolean
-		totalRowsFetched: number
 		onPointClicked: (ids: string[]) => void
-		onLoadExtra: () => void
 		onZoom: (zoom: { min: Date; max: Date }) => void
 	}
 
@@ -42,10 +37,7 @@
 		maxTimeSet = null,
 		selectedIds = $bindable([]),
 		canSelect = true,
-		lastFetchWentToEnd = false,
-		totalRowsFetched,
 		onPointClicked,
-		onLoadExtra,
 		onZoom
 	}: Props = $props()
 
@@ -299,23 +291,6 @@
 
 <DarkModeObserver bind:darkMode />
 
-<!-- {JSON.stringify(minTime)}
-{JSON.stringify(maxTime)}
-
-{JSON.stringify(jobs?.map((x) => x.started_at))} -->
-<!-- {minTime}
-{maxTime} -->
-<!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
-<div class="relative max-h-40">
-	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-28px] left-[220px]">
-			<Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}>
-				Load more
-				<Tooltip2>
-					There are more jobs to load but only the first {totalRowsFetched} were fetched
-				</Tooltip2>
-			</Button>
-		</div>
-	{/if}
+<div class="relative h-44">
 	<Scatter {data} options={scatterOptions} />
 </div>
diff --git a/frontend/src/lib/components/RunsPage.svelte b/frontend/src/lib/components/RunsPage.svelte
index e81ad7977a..660a9daf28 100644
--- a/frontend/src/lib/components/RunsPage.svelte
+++ b/frontend/src/lib/components/RunsPage.svelte
@@ -10,82 +10,92 @@
 	} from '$lib/gen'
 
 	import { sendUserToast } from '$lib/toast'
-	import { userStore, workspaceStore, userWorkspaces } from '$lib/stores'
-	import { Button, Drawer, DrawerContent, Skeleton } from '$lib/components/common'
+	import { userStore, workspaceStore, userWorkspaces, superadmin } from '$lib/stores'
+	import {
+		Button,
+		ButtonType,
+		Drawer,
+		DrawerContent,
+		Skeleton,
+		Tab,
+		Tabs
+	} from '$lib/components/common'
 	import RunChart from '$lib/components/RunChart.svelte'
 
 	import JobRunsPreview from '$lib/components/runs/JobRunsPreview.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import CalendarPicker from '$lib/components/common/calendarPicker/CalendarPicker.svelte'
 
 	import RunsTable from '$lib/components/runs/RunsTable.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import RunsFilter, { runsFiltersSchema } from '$lib/components/runs/RunsFilter.svelte'
+	import {
+		allowWildcards,
+		buildRunsFilterSearchbarSchema,
+		buildRunsFilterPresets
+	} from '$lib/components/runs/runsFilter'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import RunsQueue from '$lib/components/runs/RunsQueue.svelte'
 	import { twMerge } from 'tailwind-merge'
-	import ManuelDatePicker from '$lib/components/runs/ManuelDatePicker.svelte'
 	import { computeJobKinds, useJobsLoader } from '$lib/components/runs/useJobsLoader.svelte'
-	import { Calendar, Clock, TriangleAlert } from 'lucide-svelte'
 	import ConcurrentJobsChart from '$lib/components/ConcurrentJobsChart.svelte'
-	import { isJobSelectable, type RunsSelectionMode } from '$lib/utils'
+	import { pluralize } from '$lib/utils'
 	import BatchReRunOptionsPane, {
 		type BatchReRunOptions
 	} from '$lib/components/runs/BatchReRunOptionsPane.svelte'
 	import { untrack } from 'svelte'
 	import { page } from '$app/state'
-	import RunOption from '$lib/components/runs/RunOption.svelte'
-	import TooltipV2 from '$lib/components/meltComponents/Tooltip.svelte'
-	import DropdownSelect from '$lib/components/DropdownSelect.svelte'
-	import RunsBatchActionsDropdown from '$lib/components/runs/RunsBatchActionsDropdown.svelte'
-	import { createBubbler } from 'svelte/legacy'
-	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import Select from '$lib/components/select/Select.svelte'
 	import AnimatedPane from '$lib/components/splitPanes/AnimatedPane.svelte'
-	import { useSearchParams } from '$lib/svelte5UtilsKit.svelte'
-	import { StaleWhileLoading } from '$lib/svelte5Utils.svelte'
+	import { StaleWhileLoading, useLocalStorageValue } from '$lib/svelte5Utils.svelte'
+	import { CircleAlert, CircleCheck, CirclePlay, Hourglass, TriangleAlertIcon } from 'lucide-svelte'
+	import DropdownV2 from './DropdownV2.svelte'
+	import TimeframeSelect, {
+		buildManualTimeframe,
+		runsTimeframes,
+		useSyncedTimeframe
+	} from './runs/TimeframeSelect.svelte'
+	import FilterSearchbar, { useUrlSyncedFilterInstance } from './FilterSearchbar.svelte'
+	import { jobTriggerKinds } from './triggers/utils'
+	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonMore from './common/toggleButton-v2/ToggleButtonMore.svelte'
 
 	interface Props {
 		/** Initial path from route params (e.g., /runs/u/user/script) */
 		initialPath?: string
 	}
 
-	let { initialPath }: Props = $props()
-
-	let filters = useSearchParams(runsFiltersSchema)
-
-	// Initialize path filter from route param if provided and not already set via query params
-	if (initialPath && !filters.path) {
-		filters.path = initialPath
-	}
-
-	// Initialize toggle filters from localStorage if not set via URL params
-	// Check if URL has the params explicitly set; if not, use localStorage values
-	const urlParams = new URLSearchParams(window.location.search)
-	if (!urlParams.has('show_schedules')) {
-		filters.show_schedules = getShowSchedules()
-	}
-	if (!urlParams.has('show_future_jobs')) {
-		filters.show_future_jobs = getShowFutureJobs()
-	}
-
-	let selectedIds: string[] = $state([])
-	let loadingSelectedIds = $state(false)
-	let selectedWorkspace: string | undefined = $state(undefined)
-
-	let batchReRunOptions: BatchReRunOptions = $state({ flow: {}, script: {} })
-
-	let jobKinds: string | undefined = $derived(computeJobKinds(filters.job_kinds))
 	let paths: string[] = $state([])
 	let usernames: string[] = $state([])
 	let folders: string[] = $state([])
+	let runsFilterSearchbarSchema = $derived(
+		buildRunsFilterSearchbarSchema({
+			paths,
+			usernames,
+			folders,
+			jobTriggerKinds,
+			isSuperAdmin: !!$superadmin
+		})
+	)
+	let perPage = useLocalStorageValue('runs_per_page', 1000, 'number')
+	let filters = useUrlSyncedFilterInstance(untrack(() => runsFilterSearchbarSchema))
+
+	let { initialPath }: Props = $props()
+
+	let batchRerunOptionsIsOpen = $state(false)
+
+	// Initialize path filter from route param if provided and not already set via query params
+	if (initialPath && !filters.val.path) {
+		filters.val.path = initialPath
+	}
+
+	let selectedIds: string[] = $state([])
+	let selectedWorkspace: string | undefined = $state(undefined)
+
+	let jobKinds: string | undefined = $derived(computeJobKinds(filters.val.job_kinds ?? null))
 	let argError = $state('')
 	let resultError = $state('')
-	let filterTimeout: ReturnType<typeof setInterval> | undefined = undefined
-	let selectedManualDate = $state(0)
-	let autoRefresh: boolean = $state(getAutoRefresh())
+	let autoRefresh = useLocalStorageValue('auto_refresh_in_runs', true, 'boolean')
 	let runDrawer: Drawer | undefined = $state(undefined)
 	let lookback: number = $state(1)
 	let askingForConfirmation:
@@ -99,55 +109,43 @@
 				type?: ConfirmationModal['$$prop_def']['type']
 		  } = $state(undefined)
 
-	function getAutoRefresh() {
-		try {
-			return localStorage.getItem('auto_refresh_in_runs') != 'false'
-		} catch (e) {
-			console.error('Error getting auto refresh', e)
-			return true
+	let automaticTimeframeState = useLocalStorageValue('runs_automatic_timeframe', 'null', 'string')
+	let _timeframe = useSyncedTimeframe(
+		runsTimeframes,
+		() => ({
+			maxTs: filters.val.max_ts?.toISOString(),
+			minTs: filters.val.min_ts?.toISOString(),
+			timeframe: automaticTimeframeState.val === 'null' ? null : automaticTimeframeState.val
+		}),
+		(v) => {
+			v.maxTs ? (filters.val.max_ts = new Date(v.maxTs)) : delete filters.val.max_ts
+			v.minTs ? (filters.val.min_ts = new Date(v.minTs)) : delete filters.val.min_ts
+			automaticTimeframeState.val = v.timeframe ?? 'null'
 		}
-	}
+	)
+	let timeframe = $derived(_timeframe.val)
 
-	function getShowSchedules() {
-		try {
-			return localStorage.getItem('show_schedules_in_runs') != 'false'
-		} catch (e) {
-			console.error('Error getting show schedules', e)
-			return true
-		}
-	}
+	let manualTimeframe = $derived(timeframe.type === 'manual' ? timeframe : undefined)
 
-	function getShowFutureJobs() {
-		try {
-			return localStorage.getItem('show_future_jobs_in_runs') != 'false'
-		} catch (e) {
-			console.error('Error getting show future jobs', e)
-			return true
-		}
-	}
-
-	let manualDatePicker: ManuelDatePicker | undefined = $state(undefined)
 	let graph: 'RunChart' | 'ConcurrencyChart' = $state(
 		typeOfChart(page.url.searchParams.get('graph'))
 	)
-	let graphIsRunsChart: boolean = $state(untrack(() => graph) === 'RunChart')
 	let innerWidth = $state(window.innerWidth)
 	let jobsLoader = useJobsLoader(() => ({
-		filters,
-		computeMinAndMax: manualDatePicker?.computeMinMax,
+		filters: filters.val,
+		timeframe,
 		jobKinds,
-		autoRefresh,
+		autoRefresh: autoRefresh.val,
 		argError,
 		resultError,
-		lookback: graphIsRunsChart ? 0 : lookback,
-		onSetPerPage: (p) => (filters.per_page = p),
-		onSetMinMaxTs: (minTs, maxTs) => ((filters.min_ts = minTs), (filters.max_ts = maxTs)),
+		perPage: perPage.val,
+		lookback: graph === 'RunChart' ? 0 : lookback,
+		onSetPerPage: (p) => (perPage.val = p),
 		currentWorkspace: $workspaceStore ?? ''
 	}))
 	let lastFetchWentToEnd = $derived(jobsLoader.lastFetchWentToEnd)
 	let queue_count = $derived(jobsLoader.queue_count)
 	let suspended_count = $derived(jobsLoader.suspended_count)
-	let loading = $derived(jobsLoader.loading)
 	let externalJobs = $derived(jobsLoader.externalJobs)
 	let extendedJobs = $derived(jobsLoader.extendedJobs)
 	// Avoid flicker, but still show empty if loading takes too long
@@ -158,23 +156,10 @@
 
 	let runsTable: RunsTable | undefined = $state(undefined)
 
-	function reloadJobsWithoutFilterError() {
-		if (resultError == '' && argError == '') {
-			filterTimeout && clearTimeout(filterTimeout)
-			filterTimeout = setTimeout(() => {
-				jobsLoader?.loadJobs(true)
-			}, 2000)
-		}
-	}
-
 	function reset() {
-		filters.min_ts = null
-		filters.max_ts = null
-		selectedManualDate = 0
+		_timeframe.val = { ...runsTimeframes[0] }
 		selectedIds = []
-		filters.schedule_path = null
-		batchReRunOptions = { flow: {}, script: {} }
-		selectionMode = false
+		delete filters.val.schedule_path
 		selectedWorkspace = undefined
 		jobsLoader?.loadJobs(true)
 	}
@@ -197,26 +182,26 @@
 
 	function resetAndFilterBy(setter: (string) => void) {
 		return (e: CustomEvent<string>) => {
-			filters.path = null
-			filters.user = null
-			filters.folder = null
-			filters.label = null
-			filters.concurrency_key = null
-			filters.tag = null
-			filters.worker = null
-			filters.schedule_path = null
+			delete filters.val.path
+			delete filters.val.user
+			delete filters.val.folder
+			delete filters.val.label
+			delete filters.val.concurrency_key
+			delete filters.val.tag
+			delete filters.val.worker
+			delete filters.val.schedule_path
 			setter(e.detail)
 		}
 	}
 
-	const filterByPath = resetAndFilterBy((s) => (filters.path = s))
-	const filterByUser = resetAndFilterBy((s) => (filters.user = s))
-	const filterByFolder = resetAndFilterBy((s) => (filters.folder = s))
-	const filterByLabel = resetAndFilterBy((s) => (filters.label = s))
-	const filterByConcurrencyKey = resetAndFilterBy((s) => (filters.concurrency_key = s))
-	const filterByTag = resetAndFilterBy((s) => (filters.tag = s))
-	const filterBySchedule = resetAndFilterBy((s) => (filters.schedule_path = s))
-	const filterByWorker = resetAndFilterBy((s) => (filters.worker = s))
+	const filterByPath = resetAndFilterBy((s) => (filters.val.path = s))
+	const filterByUser = resetAndFilterBy((s) => (filters.val.user = s))
+	const filterByFolder = resetAndFilterBy((s) => (filters.val.folder = s))
+	const filterByLabel = resetAndFilterBy((s) => (filters.val.label = s))
+	const filterByConcurrencyKey = resetAndFilterBy((s) => (filters.val.concurrency_key = s))
+	const filterByTag = resetAndFilterBy((s) => (filters.val.tag = s))
+	const filterBySchedule = resetAndFilterBy((s) => (filters.val.schedule_path = s))
+	const filterByWorker = resetAndFilterBy((s) => (filters.val.worker = s))
 
 	function typeOfChart(s: string | null): 'RunChart' | 'ConcurrencyChart' {
 		switch (s) {
@@ -229,88 +214,62 @@
 		}
 	}
 
-	let selectionMode: RunsSelectionMode | false = $state(false)
-
-	async function onSetSelectionMode(mode: RunsSelectionMode | false) {
-		selectionMode = mode
-		if (!mode) {
-			selectedIds = []
-			batchReRunOptions = { flow: {}, script: {} }
-			return
-		}
-		const selectableIds = jobs?.filter(isJobSelectable(mode)).map((j) => j.id) ?? []
-		selectedIds = []
-
-		if (!selectableIds?.length) {
-			sendUserToast(
-				'There are no visible jobs that can be ' +
-					{ cancel: 'cancelled', 're-run': 're-ran' }[mode],
-				true
-			)
-		}
-	}
-
 	function getSelectedFilters() {
-		const argFilter = filters.arg && JSON.parse(filters.arg)
-		const resultFilter = filters.result && JSON.parse(filters.result)
+		const argFilter = filters.val.arg && JSON.parse(filters.val.arg)
+		const resultFilter = filters.val.result && JSON.parse(filters.val.result)
+		const { minTs, maxTs } = timeframe.computeMinMax()
 		return {
 			workspace: $workspaceStore ?? '',
-			startedBefore: filters.max_ts ?? undefined,
-			startedAfter: filters.min_ts ?? undefined,
-			schedulePath: filters.schedule_path ?? undefined,
-			scriptPathExact: filters.path === null || filters.path === '' ? undefined : filters.path,
-			createdBy: filters.user || undefined,
-			scriptPathStart: filters.folder ? `f/${filters.folder}/` : undefined,
+			startedBefore: maxTs ?? undefined,
+			startedAfter: minTs ?? undefined,
+			schedulePath: filters.val.schedule_path ?? undefined,
+			scriptPathExact:
+				filters.val.path === null || filters.val.path === '' ? undefined : filters.val.path,
+			createdBy: filters.val.user || undefined,
+			scriptPathStart: filters.val.folder ? `f/${filters.val.folder}/` : undefined,
 			jobKinds: jobKinds == '' ? undefined : jobKinds,
 			success:
-				filters.success == 'success' ? true : filters.success == 'failure' ? false : undefined,
-			running:
-				filters.success == 'running' || filters.success == 'suspended'
+				filters.val.status == 'success'
 					? true
-					: filters.success == 'waiting'
+					: filters.val.status == 'failure'
 						? false
 						: undefined,
-			isSkipped: filters.show_skipped ? undefined : false,
+			running:
+				filters.val.status == 'running' || filters.val.status == 'suspended'
+					? true
+					: filters.val.status == 'waiting'
+						? false
+						: undefined,
+			isSkipped: filters.val.show_skipped ? undefined : false,
 			// isFlowStep: jobKindsCat != 'all' ? false : undefined,
 			hasNullParent:
-				filters.path != undefined || filters.path != undefined || filters.job_kinds != 'all'
+				filters.val.path != undefined ||
+				filters.val.path != undefined ||
+				filters.val.job_kinds != 'all'
 					? true
 					: undefined,
-			label: filters.label || undefined,
-			tag: filters.tag || undefined,
-			isNotSchedule: filters.show_schedules == false ? true : undefined,
+			label: filters.val.label || undefined,
+			tag: filters.val.tag || undefined,
 			suspended:
-				filters.success == 'waiting' ? false : filters.success == 'suspended' ? true : undefined,
+				filters.val.status == 'waiting'
+					? false
+					: filters.val.status == 'suspended'
+						? true
+						: undefined,
 			scheduledForBeforeNow:
-				filters.show_future_jobs == false ||
-				filters.success == 'waiting' ||
-				filters.success == 'suspended'
+				filters.val.show_future_jobs == false ||
+				filters.val.status == 'waiting' ||
+				filters.val.status == 'suspended'
 					? true
 					: undefined,
 			args: argFilter && Object.keys(argFilter).length && !argError ? argFilter : undefined,
 			result:
 				resultFilter && Object.keys(resultFilter).length && !resultError ? resultFilter : undefined,
-			jobTriggerKind: filters.job_trigger_kind || undefined,
-			allWorkspaces: filters.all_workspaces || undefined,
-			allowWildcards: filters.allow_wildcards || undefined
+			jobTriggerKind: filters.val.job_trigger_kind || undefined,
+			allWorkspaces: filters.val.all_workspaces || undefined,
+			allowWildcards: allowWildcards(filters.val) || undefined
 		}
 	}
-
-	$effect(() => {
-		if (filters.job_trigger_kind === 'schedule' && !filters.show_schedules) {
-			filters.show_schedules = true
-		}
-	})
-
-	// Persist toggle filters to localStorage
-	$effect(() => {
-		localStorage.setItem('show_schedules_in_runs', filters.show_schedules ? 'true' : 'false')
-	})
-
-	$effect(() => {
-		localStorage.setItem('show_future_jobs_in_runs', filters.show_future_jobs ? 'true' : 'false')
-	})
-
 	async function cancelJobs(uuidsToCancel: string[], forceCancel: boolean = false) {
 		const uuids = await JobService.cancelSelection({
 			workspace: $workspaceStore ?? '',
@@ -320,10 +279,9 @@
 		selectedIds = []
 		jobsLoader?.loadJobs(true, true)
 		sendUserToast(`Canceled ${uuids.length} jobs`)
-		selectionMode = false
 	}
 
-	async function onCancelFilteredJobs() {
+	async function onCancelAllJobsMatchingFilters() {
 		forceCancelInPopup = false
 		askingForConfirmation = {
 			title: 'Confirm cancelling all jobs corresponding to the selected filters',
@@ -345,18 +303,18 @@
 		}
 	}
 
-	async function onCancelSelectedJobs() {
+	async function onCancelSelectedJobs(jobIdsToCancel: string[]) {
 		forceCancelInPopup = true
 		askingForConfirmation = {
-			confirmBtnText: `Cancel ${selectedIds.length} jobs`,
-			title: 'Confirm cancelling the selected jobs',
+			confirmBtnText: `Cancel ${jobIdsToCancel.length} jobs`,
+			title: `Confirm cancelling ${jobIdsToCancel.length} jobs`,
 			onConfirm: (forceCancel) => {
-				cancelJobs(selectedIds, forceCancel)
+				cancelJobs(jobIdsToCancel, forceCancel)
 			}
 		}
 	}
 
-	async function reRunJobs(jobIdsToReRun: string[]) {
+	async function reRunJobs(jobIdsToReRun: string[], batchReRunOptions: BatchReRunOptions) {
 		if (!$workspaceStore) return
 
 		if (askingForConfirmation) {
@@ -365,8 +323,8 @@
 
 		const body: Parameters<typeof JobService.batchReRunJobs>[0]['requestBody'] = {
 			job_ids: jobIdsToReRun,
-			script_options_by_path: batchReRunOptions.script,
-			flow_options_by_path: batchReRunOptions.flow
+			script_options_by_path: batchReRunOptions.script ?? {},
+			flow_options_by_path: batchReRunOptions.flow ?? {}
 		}
 
 		// workaround because EventSource does not support POST requests
@@ -424,66 +382,57 @@
 		})
 
 		selectedIds = []
-		batchReRunOptions = { flow: {}, script: {} }
 		jobsLoader?.loadJobs(true, true)
-		selectionMode = false
 	}
 
-	async function onReRunFilteredJobs() {
+	async function onRerunAllJobsMatchingFilters() {
 		const selectedFilters = getSelectedFilters()
 		selectedIds = []
-		loadingSelectedIds = true
 
-		if (filters.job_kinds !== 'runs') {
+		const loadingToast = sendUserToast('Loading job ids', 'info')
+
+		if (filters.val.job_kinds !== 'runs') {
 			sendUserToast('Batch re-run is only supported for scripts and flows', true)
+			loadingToast.destroy()
+			return
 		}
 		selectedIds = await JobService.listFilteredJobsUuids({
 			...selectedFilters,
 			jobKinds: 'script,flow'
 		})
-		selectionMode = 're-run'
+		loadingToast.destroy()
+		batchRerunOptionsIsOpen = true
 	}
 
-	async function onReRunSelectedJobs() {
+	async function onReRunSelectedJobs(batchReRunOptions: BatchReRunOptions) {
 		const jobIdsToReRun = selectedIds
 		askingForConfirmation = {
 			title: `Confirm re-running the selected jobs`,
 			confirmBtnText: `Re-run ${jobIdsToReRun.length} jobs`,
 			type: 'reload',
 			onConfirm: async () => {
-				await reRunJobs(jobIdsToReRun)
+				await reRunJobs(jobIdsToReRun, batchReRunOptions)
 			}
 		}
 	}
 
-	function setLookback(lookbackInDays: number) {
-		lookback = lookbackInDays
-	}
-
 	async function loadExtra() {
 		await jobsLoader?.loadExtraJobs()
 	}
 
 	function jobsFilter(f: 'waiting' | 'suspended') {
-		filters.path = null
-		filters.user = null
-		filters.folder = null
-		filters.label = null
-		filters.concurrency_key = null
-		filters.tag = null
-		filters.worker = null
-		filters.schedule_path = null
-		if (filters.success == f) {
-			filters.success = null
-		} else {
-			filters.success = f
-		}
-		filters.job_kinds = 'all'
+		filters.val.path = undefined
+		filters.val.user = undefined
+		filters.val.folder = undefined
+		filters.val.label = undefined
+		filters.val.concurrency_key = undefined
+		filters.val.tag = undefined
+		filters.val.worker = undefined
+		filters.val.schedule_path = undefined
+		filters.val.status = filters.val.status == f ? undefined : f
+		filters.val.job_kinds = 'all'
 	}
 
-	$effect(() => {
-		loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250)
-	})
 	$effect(() => {
 		if ($workspaceStore) {
 			untrack(() => {
@@ -502,38 +451,15 @@
 		)
 	})
 
-	const bubble = createBubbler()
-
-	function selectAll() {
-		if (!selectionMode) return
-		if (allSelected) {
-			allSelected = false
-			selectedIds = []
-		} else {
-			allSelected = true
-			selectedIds = jobs?.filter(isJobSelectable(selectionMode)).map((j) => j.id) ?? []
-		}
-	}
-
-	let allSelected = $derived.by(() => {
-		return selectionMode && selectedIds.length === selectableJobCount
-	})
-
-	const selectableJobCount = $derived.by(() => {
-		if (!selectionMode) return 0
-		return jobs?.filter(isJobSelectable(selectionMode)).length ?? 0
-	})
-
-	let tableTopBarWidth = $state(0)
-
 	const smallScreenWidth = 1920
-	const verySmallScreenWidth = 1300
 
 	let forceCancelInPopup = $state(false)
 
 	const warnJobLimitMsg = $derived(
-		`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${filters.per_page} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`
+		`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${perPage.val} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`
 	)
+
+	let manualSelectionMode: undefined | 'cancel' | 'rerun' = $state()
 </script>
 
 <ConfirmationModal
@@ -603,29 +529,27 @@
 {:else}
 	<div class="w-full h-screen flex flex-col" bind:clientWidth={innerWidth}>
 		<!-- Header and filters -->
-		<div class="flex flex-row items-start w-full border-b px-4 gap-8">
-			<div class="flex flex-row items-center h-full gap-6">
-				<div class="flex flex-row items-center gap-1">
-					<h1
-						class={twMerge(
-							'!text-2xl font-semibold leading-6 tracking-tight',
-							$userStore?.operator ? 'pl-10' : ''
-						)}
-					>
-						Runs
-					</h1>
+		<div class="flex flex-row items-start w-full px-4 gap-3 py-4 flex-wrap">
+			<div class="flex flex-row items-center gap-6">
+				<h1
+					class={twMerge(
+						'!text-2xl font-semibold leading-6 tracking-tight',
+						$userStore?.operator ? 'pl-10' : ''
+					)}
+				>
+					Runs
+				</h1>
 
-					<Tooltip
-						documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
-					>
-						All past and schedule executions of scripts and flows, including previews. You only see
-						your own runs or runs of groups you belong to unless you are an admin.
-					</Tooltip>
-				</div>
+				<Tooltip
+					documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
+				>
+					All past and schedule executions of scripts and flows, including previews. You only see
+					your own runs or runs of groups you belong to unless you are an admin.
+				</Tooltip>
 
 				<!-- Queue -->
 				<RunsQueue
-					success={filters.success}
+					success={filters.val.status ?? null}
 					{queue_count}
 					{suspended_count}
 					onJobsWaiting={() => {
@@ -638,178 +562,169 @@
 				/>
 			</div>
 
-			<div class="py-2 flex items-start gap-x-4 gap-y-2 flex-row grow min-w-0 justify-end">
-				<!-- Dates -->
-				<div class="flex flex-row gap-2">
-					<RunOption label="From" for="min-datetimes">
-						{#if filters.min_ts || filters.max_ts}
-							<input
-								type="text"
-								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={filters.min_ts
-									? new Date(filters.min_ts).toLocaleString()
-									: 'zoom x axis to set min'}
-								disabled
-								name="min-datetimes"
+			<div class="hidden xl:flex gap-2 ml-6">
+				<ToggleButtonGroup
+					tabListClass="hidden 2xl:flex"
+					bind:selected={
+						() => filters.val.job_kinds ?? 'runs',
+						(v) => (v === 'runs' ? delete filters.val.job_kinds : (filters.val.job_kinds = v))
+					}
+				>
+					{#snippet children({ item })}
+						<ToggleButton value="all" label="All" {item} />
+						<ToggleButton
+							value="runs"
+							label="Runs"
+							showTooltipIcon
+							tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
+							{item}
+						/>
+						<ToggleButton
+							value="dependencies"
+							label="Deps"
+							showTooltipIcon
+							tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
+							{item}
+						/>
+						<ToggleButtonMore
+							togglableItems={[
+								{
+									label: 'Previews',
+									value: 'previews',
+									tooltip: "Previews are jobs that have been started in the editor as 'Tests'"
+								},
+								{
+									label: 'Sync',
+									value: 'deploymentcallbacks',
+									tooltip:
+										'Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings'
+								}
+							]}
+							{item}
+							bind:selected={filters.val.job_kinds}
+						/>
+					{/snippet}
+				</ToggleButtonGroup>
+				<ToggleButtonGroup
+					bind:selected={
+						() => filters.val.status ?? 'all',
+						(v) => (v === 'all' ? delete filters.val.status : (filters.val.status = v))
+					}
+					id="status"
+				>
+					{#snippet children({ item })}
+						<ToggleButton value={'all'} label="All" {item} />
+						<ToggleButton
+							value={'running'}
+							tooltip="Running"
+							class="whitespace-nowrap"
+							icon={CirclePlay}
+							iconProps={{
+								class:
+									'group-data-[state=on]:text-yellow-600 dark:group-data-[state=on]:text-yellow-400'
+							}}
+							{item}
+						/>
+						<ToggleButton
+							value={'success'}
+							tooltip="Success"
+							class="whitespace-nowrap"
+							icon={CircleCheck}
+							iconProps={{
+								class:
+									'group-data-[state=on]:text-green-500 dark:group-data-[state=on]:text-green-300'
+							}}
+							{item}
+						/>
+						<ToggleButton
+							value={'failure'}
+							tooltip="Failure"
+							class="whitespace-nowrap"
+							icon={CircleAlert}
+							iconProps={{
+								class: 'group-data-[state=on]:text-red-500 dark:group-data-[state=on]:text-red-300'
+							}}
+							{item}
+						/>
+						{#if filters.val.status == 'waiting'}
+							<ToggleButton
+								value={'waiting'}
+								tooltip="Waiting"
+								class="whitespace-nowrap"
+								icon={Hourglass}
+								selectedColor="blue"
+								{item}
+							/>
+						{:else if filters.val.status == 'suspended'}
+							<ToggleButton
+								value={'suspended'}
+								tooltip="Suspended"
+								class="whitespace-nowrap"
+								icon={Hourglass}
+								selectedColor="purple"
+								{item}
 							/>
 						{/if}
-						<CalendarPicker
-							clearable={true}
-							bind:date={filters.min_ts}
-							on:clear={() => (filters.min_ts = null)}
-							label="From"
-							class={filters.min_ts || filters.max_ts
-								? ''
-								: 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
-						/>
-					</RunOption>
-
-					<RunOption label="To" for="max-datetimes">
-						{#if filters.max_ts || filters.min_ts}
-							<input
-								type="text"
-								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={filters.max_ts
-									? new Date(filters.max_ts).toLocaleString()
-									: 'zoom x axis to set max'}
-								name="max-datetimes"
-								disabled
-							/>
-						{/if}
-						<CalendarPicker
-							clearable={true}
-							on:clear={() => (filters.max_ts = null)}
-							bind:date={filters.max_ts}
-							label="To"
-							class={filters.min_ts || filters.max_ts
-								? ''
-								: 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
-						/>
-					</RunOption>
-
-					{#if filters.min_ts || filters.max_ts}
-						<RunOption label="Reset" for="reset" noLabel>
-							<Button variant="default" size="xs" onClick={reset} btnClasses="h-9">Reset</Button>
-						</RunOption>
-					{/if}
-				</div>
-
-				<!-- Filters 1 -->
-				<div class="flex flex-row gap-2">
-					<RunsFilter
-						bind:allowWildcards={filters.allow_wildcards}
-						bind:user={filters.user}
-						bind:folder={filters.folder}
-						bind:label={filters.label}
-						bind:concurrencyKey={filters.concurrency_key}
-						bind:tag={filters.tag}
-						bind:worker={filters.worker}
-						bind:showSkipped={filters.show_skipped}
-						bind:path={filters.path}
-						bind:success={filters.success}
-						bind:jobTriggerKind={filters.job_trigger_kind}
-						bind:argError
-						bind:resultError
-						bind:jobKindsCat={filters.job_kinds}
-						bind:allWorkspaces={filters.all_workspaces}
-						bind:schedulePath={filters.schedule_path}
-						bind:argFilter={filters.arg}
-						bind:resultFilter={filters.result}
-						on:change={reloadJobsWithoutFilterError}
-						on:successChange={(e) => {
-							if (e.detail == 'running' && filters.max_ts != undefined) {
-								filters.max_ts = null
-							}
-						}}
-						{usernames}
-						{folders}
-						{paths}
-						mobile={innerWidth < verySmallScreenWidth}
-						small={innerWidth < smallScreenWidth}
-						calendarSmall={!filters.min_ts && !filters.max_ts}
-					/>
-				</div>
+					{/snippet}
+				</ToggleButtonGroup>
 			</div>
+
+			<TimeframeSelect
+				wrapperClasses="ml-auto"
+				onClick={() => jobsLoader?.loadJobs(true)}
+				loading={jobsLoader?.loading}
+				items={runsTimeframes}
+				bind:value={_timeframe.val}
+			/>
+			<FilterSearchbar
+				class="flex-1 relative max-w-[34rem] min-w-[18rem] {ButtonType.UnifiedMinHeightClasses.md}"
+				schema={runsFilterSearchbarSchema}
+				presets={buildRunsFilterPresets({ isSuperadmin: !!$superadmin })}
+				bind:value={filters.val}
+				placeholder="Filter runs..."
+			/>
 		</div>
 
 		<!-- Graph -->
-		<div class="p-2 px-4 pt-8 w-full border-b">
-			<div class="relative z-10">
-				<div class="absolute left-0 -top-7 flex flex-row gap-2 items-center min-w-24">
-					<ToggleButtonGroup
-						selected={graph}
-						on:selected={({ detail }) => {
-							graph = detail
-							graphIsRunsChart = graph === 'RunChart'
-						}}
-					>
-						{#snippet children({ item })}
-							<ToggleButton value="RunChart" label="Duration" {item} />
-							<ToggleButton
-								{item}
-								value="ConcurrencyChart"
-								label="Concurrency"
-								icon={warnJobLimit ? TriangleAlert : undefined}
-								tooltip={warnJobLimit ? warnJobLimitMsg : undefined}
-							/>
+		<div class="p-2 px-4 bg-surface-tertiary mx-4 border rounded-md">
+			<div class="relative z-10 mb-2 flex gap-2">
+				<Tabs bind:selected={graph}>
+					<Tab value="RunChart" label="Duration" />
+					<Tab value="ConcurrencyChart" label="Concurrency">
+						{#snippet extra()}
+							{#if warnJobLimit}
+								<Tooltip Icon={TriangleAlertIcon}>{warnJobLimitMsg}</Tooltip>
+							{/if}
 						{/snippet}
-					</ToggleButtonGroup>
+					</Tab>
+				</Tabs>
 
-					{#if !graphIsRunsChart}
-						<DropdownSelect
-							items={[
-								{
-									displayName: 'None',
-									action: () => setLookback(0),
-									id: '0'
-								},
-								{
-									displayName: '1 day',
-									action: () => setLookback(1),
-									id: '1'
-								},
-								{
-									displayName: '3 days',
-									action: () => setLookback(3),
-									id: '3'
-								},
-								{
-									displayName: '7 days',
-									action: () => setLookback(7),
-									id: '7'
-								}
-							]}
-							selected={lookback.toString()}
-							selectedDisplayName={`${lookback} days lookback`}
-						>
-							{#snippet extraLabel()}
-								<TooltipV2>
-									{#snippet text()}
-										How far behind the min datetime to start considering jobs for the concurrency
-										graph. Change this value to include jobs started before the set time window for
-										the computation of the graph
-									{/snippet}
-								</TooltipV2>
-							{/snippet}
-						</DropdownSelect>
-					{/if}
-				</div>
+				{#if graph !== 'RunChart'}
+					<Select
+						class="ml-2"
+						bind:value={lookback}
+						items={[
+							{ label: 'None', value: 0 },
+							{ label: '1 day', value: 1 },
+							{ label: '3 days', value: 3 },
+							{ label: '7 days', value: 7 }
+						]}
+						transformInputSelectedText={(_, v) => `${pluralize(v, 'day')} lookback`}
+						tooltip={'How far behind the min datetime to start considering jobs for the concurrency graph. Change this value to include jobs started before the set time window for the computation of the graph'}
+					/>
+				{/if}
 			</div>
 			{#if graph === 'RunChart'}
+				{@const manualTimeframe = timeframe.type === 'manual' ? timeframe : undefined}
 				<RunChart
-					{lastFetchWentToEnd}
 					bind:selectedIds
-					canSelect={!selectionMode}
-					minTimeSet={filters.min_ts}
-					maxTimeSet={filters.max_ts}
-					totalRowsFetched={jobs?.length ?? 0}
-					maxIsNow={filters.max_ts == undefined}
-					onLoadExtra={loadExtra}
+					canSelect
+					minTimeSet={manualTimeframe?.minTs}
+					maxTimeSet={manualTimeframe?.maxTs}
+					maxIsNow={manualTimeframe?.maxTs == undefined}
 					jobs={completedJobs}
 					onZoom={async (zoom) => {
-						filters.min_ts = zoom.min.toISOString()
-						filters.max_ts = zoom.max.toISOString()
-						manualDatePicker?.resetChoice()
+						_timeframe.val = buildManualTimeframe(zoom.min.toISOString(), zoom.max.toISOString())
 						jobsLoader?.loadJobs(true)
 					}}
 					onPointClicked={(ids) => {
@@ -818,197 +733,189 @@
 				/>
 			{:else if graph === 'ConcurrencyChart'}
 				<ConcurrentJobsChart
-					minTimeSet={filters.min_ts}
-					maxTimeSet={filters.max_ts}
-					maxIsNow={filters.max_ts == undefined}
+					minTimeSet={manualTimeframe?.minTs}
+					maxTimeSet={manualTimeframe?.maxTs}
+					maxIsNow={manualTimeframe?.maxTs == undefined}
 					{extendedJobs}
 					onZoom={async (zoom) => {
-						filters.min_ts = zoom.min.toISOString()
-						filters.max_ts = zoom.max.toISOString()
+						_timeframe.val = buildManualTimeframe(zoom.min.toISOString(), zoom.max.toISOString())
 						jobsLoader?.loadJobs(true)
 					}}
 				/>
 			{/if}
 		</div>
 
-		<div class="grow min-h-0">
+		<div class="grow min-h-0 bottom-splitpane-wrapper">
 			<Splitpanes>
 				<Pane minSize={40}>
-					<div class="flex flex-col h-full">
-						<!-- Runs table top bar -->
-						<div
-							class="flex flex-row gap-4 items-center px-2 py-1 grow-0 justify-between"
-							bind:clientWidth={tableTopBarWidth}
-						>
-							<div class="flex flex-row gap-4 items-center">
-								{#if selectionMode && selectableJobCount}
-									<div class="flex flex-row items-center font-semibold text-sm">
-										<div class="px-2">
-											<input
-												onfocus={bubble('focus')}
-												type="checkbox"
-												checked={allSelected}
-												id="select-all"
-												class={twMerge(
-													'cursor-pointer',
-													allSelected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
-													'flex flex-row items-center p-2 pr-4 top-0 font-semibold text-sm'
-												)}
-												onclick={selectAll}
-											/>
-										</div>
-										<label
-											class="cursor-pointer whitespace-nowrap text-xs text-emphasis font-semibold"
-											for="select-all">Select all</label
-										>
+					<div class="h-full flex">
+						<div class="flex flex-col flex-1 m-4 mt-2 mr-2">
+							<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
+							<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
+								{#if jobs}
+									<RunsTable
+										{jobs}
+										externalJobs={externalJobs ?? []}
+										omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
+										showExternalJobs={graph !== 'RunChart'}
+										activeLabel={filters.val.label}
+										{lastFetchWentToEnd}
+										bind:selectedIds
+										bind:selectedWorkspace
+										on:loadExtra={loadExtra}
+										on:filterByPath={filterByPath}
+										on:filterByUser={filterByUser}
+										on:filterByFolder={filterByFolder}
+										on:filterByLabel={filterByLabel}
+										on:filterByConcurrencyKey={filterByConcurrencyKey}
+										on:filterByTag={filterByTag}
+										on:filterBySchedule={filterBySchedule}
+										on:filterByWorker={filterByWorker}
+										bind:this={runsTable}
+										perPage={perPage.val}
+										bind:batchRerunOptionsIsOpen
+										onCancelJobs={onCancelSelectedJobs}
+										{manualSelectionMode}
+									></RunsTable>
+								{:else}
+									<div class="gap-1 flex flex-col">
+										{#each new Array(8) as _}
+											<Skeleton layout={[[3]]} />
+										{/each}
 									</div>
 								{/if}
-
-								<RunsBatchActionsDropdown
-									isLoading={loadingSelectedIds}
-									{selectionMode}
-									selectionCount={selectedIds.length}
-									{onSetSelectionMode}
-									{onCancelFilteredJobs}
-									{onCancelSelectedJobs}
-									{onReRunFilteredJobs}
-									{onReRunSelectedJobs}
-									small={tableTopBarWidth < 800}
+							</div>
+							<div
+								class="bg-surface-tertiary border rounded-b-md flex text-xs px-2 py-1 items-center gap-4"
+							>
+								{#if !manualSelectionMode}
+									<DropdownV2
+										btnText="Batch actions"
+										size="xs"
+										items={[
+											{
+												displayName: 'Cancel jobs',
+												action: () => ((manualSelectionMode = 'cancel'), (selectedIds = []))
+											},
+											{
+												displayName: 'Re-run jobs',
+												action: () => {
+													manualSelectionMode = 'rerun'
+													selectedIds = []
+													batchRerunOptionsIsOpen = true
+												}
+											},
+											{
+												displayName: 'Cancel all jobs matching filters',
+												action: () => onCancelAllJobsMatchingFilters()
+											},
+											{
+												displayName: 'Re-run all jobs matching filters',
+												action: () => onRerunAllJobsMatchingFilters()
+											}
+										]}
+									/>
+								{:else}
+									<Button
+										size="xs"
+										destructive
+										onClick={() => {
+											manualSelectionMode = undefined
+											batchRerunOptionsIsOpen = false
+										}}
+									>
+										Exit selection mode
+									</Button>
+								{/if}
+								<div class="flex-1"></div>
+								<Toggle
+									size="xs"
+									bind:checked={autoRefresh.val}
+									options={{ right: 'Auto-refresh' }}
+									textClass="whitespace-nowrap"
+								/>
+								<Select
+									class="w-24"
+									bind:value={
+										() => perPage.val,
+										(newPerPage) => {
+											perPage.val = newPerPage
+											if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
+										}
+									}
+									onCreateItem={(v) => (perPage.val = parseInt(v))}
+									items={[
+										{ value: 25, label: '25' },
+										{ value: 100, label: '100' },
+										{ value: 1000, label: '1000' },
+										{ value: 10000, label: '10000' }
+									]}
+									transformInputSelectedText={(_, v) => `${v} / page`}
 								/>
 							</div>
-
-							<div class="flex flex-row gap-4 items-center">
-								{#if !filters.job_trigger_kind}
-									<div class="flex flex-row gap-1 items-center">
-										<Toggle
-											id="cron-schedules"
-											bind:checked={filters.show_schedules}
-											options={tableTopBarWidth < 800 || selectionMode
-												? {}
-												: { right: 'Schedules' }}
-										/>
-										<span title="Schedules">
-											<Calendar size="14" />
-										</span>
-									</div>
-								{/if}
-
-								<div class="flex flex-row gap-1 items-center">
-									<Toggle
-										size="sm"
-										bind:checked={filters.show_future_jobs}
-										id="planned-later"
-										options={tableTopBarWidth < 800 || selectionMode
-											? {}
-											: { right: 'Planned later' }}
-									/>
-									<span title="Planned later">
-										<Clock size={14} />
-									</span>
-								</div>
-								<div class="flex flex-row gap-2 items-center">
-									<ManuelDatePicker
-										on:loadJobs={() => {
-											jobsLoader?.loadJobs(true)
-										}}
-										bind:minTs={filters.min_ts}
-										bind:maxTs={filters.max_ts}
-										bind:selectedManualDate
-										{loading}
-										bind:this={manualDatePicker}
-										numberOfLastJobsToFetch={filters.per_page}
-									/>
-									<Toggle
-										size="sm"
-										bind:checked={autoRefresh}
-										on:change={() => {
-											localStorage.setItem('auto_refresh_in_runs', autoRefresh ? 'true' : 'false')
-										}}
-										options={{ right: 'Auto-refresh' }}
-										textClass="whitespace-nowrap"
-									/>
-								</div>
-							</div>
-						</div>
-
-						<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
-						<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
-							{#if jobs}
-								<RunsTable
-									{jobs}
-									externalJobs={externalJobs ?? []}
-									omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
-									showExternalJobs={!graphIsRunsChart}
-									activeLabel={filters.label}
-									{selectionMode}
-									{lastFetchWentToEnd}
-									bind:selectedIds
-									bind:selectedWorkspace
-									on:loadExtra={loadExtra}
-									on:filterByPath={filterByPath}
-									on:filterByUser={filterByUser}
-									on:filterByFolder={filterByFolder}
-									on:filterByLabel={filterByLabel}
-									on:filterByConcurrencyKey={filterByConcurrencyKey}
-									on:filterByTag={filterByTag}
-									on:filterBySchedule={filterBySchedule}
-									on:filterByWorker={filterByWorker}
-									bind:this={runsTable}
-									perPage={filters.per_page}
-								></RunsTable>
-							{:else}
-								<div class="gap-1 flex flex-col">
-									{#each new Array(8) as _}
-										<Skeleton layout={[[3]]} />
-									{/each}
-								</div>
-							{/if}
-						</div>
-						<div
-							class="bg-surface-secondary border-t flex text-xs px-2 py-1 items-center justify-end gap-2"
-						>
-							Per page:
-							<Select
-								class="w-20"
-								bind:value={
-									() => filters.per_page,
-									(newPerPage) => {
-										filters.per_page = newPerPage
-										if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
-									}
-								}
-								onCreateItem={(v) => (filters.per_page = parseInt(v))}
-								items={[
-									{ value: 25, label: '25' },
-									{ value: 100, label: '100' },
-									{ value: 1000, label: '1000' },
-									{ value: 10000, label: '10000' }
-								]}
-							/>
 						</div>
 					</div>
 				</Pane>
-				<AnimatedPane size={40} minSize={15} class="flex flex-col" opened={selectedIds.length > 0}>
-					{#if selectionMode === 're-run'}
-						<BatchReRunOptionsPane {selectedIds} bind:options={batchReRunOptions} />
-					{:else if selectedIds.length === 1}
-						{#if selectedIds[0] === '-'}
-							<div class="p-4">There is no information available for this job</div>
-						{:else}
-							<JobRunsPreview
-								id={selectedIds[0]}
-								workspace={selectedWorkspace}
-								on:filterByConcurrencyKey={filterByConcurrencyKey}
-								on:filterByWorker={filterByWorker}
+				<AnimatedPane
+					size={40}
+					minSize={15}
+					class="flex flex-col"
+					opened={selectedIds.length > 0 || !!manualSelectionMode}
+				>
+					<div class="mt-12 overflow-y-auto pr-4 ml-2 relative flex-1">
+						{#if manualSelectionMode === 'cancel'}
+							<div
+								class="rounded-md bg-surface-tertiary border absolute inset-0 mb-4 flex flex-col items-center justify-center"
+							>
+								<Button
+									destructive
+									variant="accent"
+									disabled={!selectedIds.length}
+									onClick={() => onCancelSelectedJobs(selectedIds)}
+								>
+									Cancel {selectedIds.length} jobs
+								</Button>
+							</div>
+						{:else if batchRerunOptionsIsOpen}
+							<BatchReRunOptionsPane
+								{selectedIds}
+								onCancel={() => (
+									(batchRerunOptionsIsOpen = false),
+									(manualSelectionMode = undefined)
+								)}
+								onConfirm={async (options) => {
+									await onReRunSelectedJobs(options)
+								}}
 							/>
+						{:else if selectedIds.length === 1}
+							{#if selectedIds[0] === '-'}
+								<div class="p-4">There is no information available for this job</div>
+							{:else}
+								<JobRunsPreview
+									id={selectedIds[0]}
+									workspace={selectedWorkspace}
+									on:filterByConcurrencyKey={filterByConcurrencyKey}
+									on:filterByWorker={filterByWorker}
+								/>
+							{/if}
+						{:else if selectedIds.length > 1}
+							<div
+								class="rounded-md bg-surface-tertiary border absolute inset-0 mb-4 flex items-center justify-center"
+							>
+								<div class="text-xs m-4"> {selectedIds.length} jobs selected</div>
+							</div>
 						{/if}
-					{:else if selectedIds.length > 1}
-						<div class="text-xs m-4"
-							>There are {selectedIds.length} jobs selected. Choose 1 to see detailed information</div
-						>
-					{/if}
+					</div>
 				</AnimatedPane>
 			</Splitpanes>
 		</div>
 	</div>
 {/if}
+
+<style>
+	:global(.bottom-splitpane-wrapper .splitpanes__splitter) {
+		background-color: transparent !important;
+		border: none !important;
+		/* opacity: 0 !important; */
+	}
+</style>
diff --git a/frontend/src/lib/components/ServiceLogsInner.svelte b/frontend/src/lib/components/ServiceLogsInner.svelte
index cdf2ed5c0f..0f4f923cd6 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -4,12 +4,15 @@
 	const bubble = createBubbler()
 	import { IndexSearchService, ServiceLogsService } from '$lib/gen'
 
-	import ManuelDatePicker from './runs/ManuelDatePicker.svelte'
+	import TimeframeSelect, {
+		serviceLogsTimeframes,
+		useUrlSyncedTimeframe
+	} from './runs/TimeframeSelect.svelte'
 	import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte'
 	import LogViewer from './LogViewer.svelte'
 	import Toggle from './Toggle.svelte'
 	import { sendUserToast } from '$lib/toast'
-	import { onDestroy, tick, untrack } from 'svelte'
+	import { onDestroy, tick } from 'svelte'
 	import { Loader2 } from 'lucide-svelte'
 	import { copyToClipboard, scroll_into_view_if_needed_polyfill, truncateRev } from '$lib/utils'
 	import LogSnippetViewer from './LogSnippetViewer.svelte'
@@ -20,6 +23,7 @@
 	import Select from './select/Select.svelte'
 	import { goto } from '$lib/navigation'
 	import { page } from '$app/stores'
+	import { watch } from 'runed'
 
 	interface Props {
 		searchTerm: string
@@ -32,9 +36,6 @@
 	let minTs: undefined | string = $state(undefined)
 	let maxTs: undefined | string = $state(undefined)
 
-	let minTsManual: undefined | string = $state($page.url.searchParams.get('minTs') ?? undefined)
-	let maxTsManual: undefined | string = $state($page.url.searchParams.get('maxTs') ?? undefined)
-
 	let max_lines: undefined | number = $state(undefined)
 
 	// let lastSeen: undefined | string = undefined
@@ -58,15 +59,17 @@
 	let timeout: number | undefined = $state(undefined)
 
 	let allLogs: ByMode | undefined = $state(undefined)
-	let manualPicker: ManuelDatePicker | undefined = $state(undefined)
+
+	let _timeframe = useUrlSyncedTimeframe(serviceLogsTimeframes)
+	let timeframe = $derived(_timeframe.timeframe)
+
+	let [minTsManual, maxTsManual] = $derived(
+		timeframe.type === 'manual' ? [timeframe.minTs ?? undefined, timeframe.maxTs ?? undefined] : []
+	)
 
 	let upTo: undefined | string = $state(undefined)
 	let upToIsLatest = $state(true)
 
-	function onManualChanges() {
-		getAllLogs(minTsManual ?? maxTs, maxTsManual)
-	}
-
 	function getAllLogs(queryMinTs: string | undefined, queryMaxTs: string | undefined) {
 		timeout && clearTimeout(timeout)
 		loading = true
@@ -151,11 +154,6 @@
 				if (autoRefresh && searchTerm === '' && !maxTsManual) {
 					timeout = setTimeout(() => {
 						if (searchTerm !== '') return
-						let minMax = manualPicker?.computeMinMax()
-						if (minMax) {
-							maxTsManual = minMax?.maxTs ?? undefined
-							minTsManual = minMax?.minTs ?? undefined
-						}
 						let maxTsPlus1 = maxTs ? new Date(new Date(maxTs).getTime() + 1000) : undefined
 						getAllLogs(maxTsPlus1?.toISOString(), undefined)
 					}, 5000)
@@ -315,8 +313,6 @@
 	) {
 		const params = new URLSearchParams()
 		if (searchTerm) params.set('searchTerm', searchTerm)
-		if (minTs) params.set('minTs', minTs)
-		if (maxTs) params.set('maxTs', maxTs)
 		if (selected?.mode) params.set('mode', selected.mode)
 		if (selected?.workerGroup) params.set('workerGroup', selected.workerGroup)
 		if (selected?.hostname) params.set('hostname', selected.hostname)
@@ -435,13 +431,22 @@
 		)
 	}
 
-	$effect(() => {
-		minTsManual || maxTsManual || untrack(() => onManualChanges())
-	})
-	$effect(() => {
-		;[searchTerm, selected, minTsManual, maxTsManual, allLogs]
-		untrack(() => searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs))
-	})
+	watch(
+		() => timeframe,
+		() => {
+			const ts = timeframe.computeMinMax()
+			minTs = undefined
+			maxTs = undefined
+			allLogs = undefined
+			getAllLogs(ts.minTs ?? undefined, ts.maxTs ?? undefined)
+		}
+	)
+	watch(
+		() => [searchTerm, selected, timeframe, allLogs],
+		() => {
+			searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs)
+		}
+	)
 </script>
 
 <Drawer bind:this={logDrawer} bind:open={logDrawerOpen} size="1400px">
@@ -477,71 +482,19 @@
 				class="flex flex-col lg:flex-row gap-y-1 justify-between w-full relative pb-4 gap-x-0.5"
 				id="service-logs-date-pickers"
 			>
-				<div class="flex relative">
-					<input
-						type="text"
-						value={minTsManual
-							? new Date(minTsManual).toLocaleTimeString([], {
-									day: '2-digit',
-									month: '2-digit',
-									hour: '2-digit',
-									minute: '2-digit'
-								})
-							: 'min datetime'}
-						disabled
-					/>
-					<CalendarPicker
-						label="min datetime"
-						date={minTsManual}
-						on:change={({ detail }) => {
-							minTs = undefined
-							maxTs = undefined
-							allLogs = undefined
-							minTsManual = detail
-							getAllLogs(minTsManual, maxTsManual)
-						}}
-						placement="top-start"
-					/>
-				</div>
-				<ManuelDatePicker
-					bind:minTs={() => minTsManual ?? null, (v) => (minTsManual = v ?? undefined)}
-					bind:maxTs={() => maxTsManual ?? null, (v) => (maxTsManual = v ?? undefined)}
-					bind:this={manualPicker}
+				<TimeframeSelect
+					items={serviceLogsTimeframes}
+					bind:value={timeframe}
 					{loading}
-					on:loadJobs={() => {
+					wrapperClasses="w-full"
+					onClick={() => {
 						minTs = undefined
 						maxTs = undefined
 						allLogs = undefined
-						getAllLogs(minTsManual, maxTsManual)
+						const ts = timeframe.computeMinMax()
+						getAllLogs(ts.minTs ?? undefined, ts.maxTs ?? undefined)
 					}}
-					serviceLogsChoices
-					loadText={searchTerm === '' ? 'Last 1000 logfiles' : 'All time'}
 				/>
-				<div class="flex relative">
-					<input
-						type="text"
-						value={maxTsManual
-							? new Date(maxTsManual).toLocaleTimeString([], {
-									day: '2-digit',
-									month: '2-digit',
-									hour: '2-digit',
-									minute: '2-digit'
-								})
-							: 'max datetime'}
-						disabled
-					/>
-					<CalendarPicker
-						label="max datetime"
-						date={maxTsManual}
-						on:change={({ detail }) => {
-							minTs = undefined
-							maxTs = undefined
-							allLogs = undefined
-							maxTsManual = detail
-							getAllLogs(minTsManual, maxTsManual)
-						}}
-					/>
-				</div>
 			</div>
 			<div class="flex w-full flex-row-reverse pb-4 -mt-2 gap-2"
 				><Toggle
diff --git a/frontend/src/lib/components/TaggedTextInput.svelte b/frontend/src/lib/components/TaggedTextInput.svelte
new file mode 100644
index 0000000000..ecf4904711
--- /dev/null
+++ b/frontend/src/lib/components/TaggedTextInput.svelte
@@ -0,0 +1,524 @@
+<script lang="ts">
+	let {
+		tags,
+		value = $bindable(''),
+		placeholder = '',
+		highlights,
+		onCurrentTagChange,
+		onTextSegmentAtCursorChange,
+		class: className = ''
+	}: {
+		tags: { regex: RegExp; id: string; onClear?: () => void }[]
+		value?: string
+		placeholder?: string
+		highlights?: { regex: RegExp; classes: string }[]
+		onCurrentTagChange?: (tag: { id: string } | null) => void
+		onTextSegmentAtCursorChange?: (segment: { text: string; start: number; end: number }) => void
+		class?: string
+	} = $props()
+
+	let contentEditableDiv: HTMLDivElement
+	let isUpdating = false
+
+	$effect(() => {
+		if (!value.trim() && value !== '') value = ''
+	})
+
+	let _preventCursorMoveOnNextSync = false
+	// Update the displayed HTML when value changes externally
+	$effect(() => {
+		if (contentEditableDiv && !isUpdating) {
+			const currentText = getTextContent()
+			if (currentText !== value) {
+				updateDisplay(value)
+				if (!_preventCursorMoveOnNextSync) {
+					restoreCursor(value.length)
+					const cursorPos = getCursorPosition()
+					updateCurrentTag(cursorPos)
+				}
+			}
+		}
+		_preventCursorMoveOnNextSync = false
+	})
+
+	export function preventCursorMoveOnNextSync() {
+		_preventCursorMoveOnNextSync = true
+	}
+
+	function getTextContent(): string {
+		if (!contentEditableDiv) return ''
+		return contentEditableDiv.textContent || ''
+	}
+
+	function updateDisplay(text: string) {
+		if (!contentEditableDiv) return
+
+		const html = highlightText(text)
+		contentEditableDiv.innerHTML = html
+	}
+
+	/** Apply secondary highlight spans within a raw-text chunk. Returns HTML. */
+	function applyHighlightsToChunk(rawText: string): string {
+		if (!highlights || highlights.length === 0) return escapeHtml(rawText)
+
+		// Find all highlight matches in the raw text
+		const hlMatches: Array<{ start: number; end: number; classes: string }> = []
+		for (const hl of highlights) {
+			const regex = new RegExp(hl.regex, 'g')
+			let m
+			while ((m = regex.exec(rawText)) !== null) {
+				hlMatches.push({ start: m.index, end: m.index + m[0].length, classes: hl.classes })
+			}
+		}
+		if (hlMatches.length === 0) return escapeHtml(rawText)
+
+		// Sort and deduplicate (keep first on overlap)
+		hlMatches.sort((a, b) => a.start - b.start)
+		const filtered: typeof hlMatches = []
+		let lastEnd = -1
+		for (const m of hlMatches) {
+			if (m.start >= lastEnd) {
+				filtered.push(m)
+				lastEnd = m.end
+			}
+		}
+
+		let result = ''
+		let idx = 0
+		for (const m of filtered) {
+			if (m.start > idx) {
+				result += escapeHtml(rawText.slice(idx, m.start))
+			}
+			result += `<span class="${m.classes}">${escapeHtml(rawText.slice(m.start, m.end))}</span>`
+			idx = m.end
+		}
+		if (idx < rawText.length) {
+			result += escapeHtml(rawText.slice(idx))
+		}
+		return result
+	}
+
+	function highlightText(text: string): string {
+		if (!text) return ''
+
+		// Create a list of all matches with their positions
+		const matches: Array<{ start: number; end: number; tagIndex: number }> = []
+
+		tags.forEach((tag, tagIndex) => {
+			const regex = new RegExp(tag.regex, 'g')
+			let match
+			while ((match = regex.exec(text)) !== null) {
+				matches.push({
+					start: match.index,
+					end: match.index + match[0].length,
+					tagIndex
+				})
+			}
+		})
+
+		// Sort matches by start position
+		matches.sort((a, b) => a.start - b.start)
+
+		// Remove overlapping matches (keep the first one)
+		const filteredMatches: Array<{ start: number; end: number; tagIndex: number }> = []
+		let lastEnd = -1
+		for (const match of matches) {
+			if (match.start >= lastEnd) {
+				filteredMatches.push(match)
+				lastEnd = match.end
+			}
+		}
+
+		// Build HTML with highlighted segments
+		let html = ''
+		let lastIndex = 0
+
+		for (const match of filteredMatches) {
+			// Add text before the match (apply secondary highlights)
+			if (match.start > lastIndex) {
+				html += applyHighlightsToChunk(text.slice(lastIndex, match.start))
+			}
+
+			// Add highlighted match (with secondary highlights applied inside)
+			const matchedText = text.slice(match.start, match.end)
+			const tagId = tags[match.tagIndex].id
+			const hasClear = !!tags[match.tagIndex].onClear
+			const clearBtn = hasClear
+				? `<span data-clear-tag="${tagId}" class="inline-flex w-2.5 h-3 ml-1 cursor-pointer opacity-50 hover:opacity-100" style="vertical-align: middle;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="pointer-events:none"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>`
+				: ''
+			html += `<span class="bg-surface-sunken/50 border border-border-light py-0.5 px-1.5 rounded" data-tag-id="${tagId}">${applyHighlightsToChunk(matchedText)}${clearBtn}</span>`
+
+			lastIndex = match.end
+		}
+
+		// Add remaining text (apply secondary highlights)
+		if (lastIndex < text.length) {
+			html += applyHighlightsToChunk(text.slice(lastIndex))
+		}
+
+		return html
+	}
+
+	function escapeHtml(text: string): string {
+		const div = document.createElement('div')
+		div.textContent = text
+		let html = div.innerHTML
+		html = html.replace(/\\(n|r|.)/g, (match, c) => {
+			const display = c === 'n' ? '↵' : c === 'r' ? '↵' : c
+			return (
+				'<span style="display: inline; width: 0; height: 0; overflow: hidden; position: absolute;">\\</span>' +
+				display
+			)
+		})
+		return html
+	}
+
+	let lastText = ''
+
+	function applyTextUpdate(newText: string, newCursorPos: number) {
+		value = newText
+		updateDisplay(newText)
+		restoreCursor(newCursorPos)
+		updateCurrentTag(newCursorPos)
+		lastText = newText
+		isUpdating = false
+	}
+
+	function handleInput() {
+		isUpdating = true
+		const cursorPos = getCursorPosition()
+		let newText = getTextContent()
+
+		// Remove any "\." sequences that were added by browser smart punctuation
+		// These would only be created by macOS/browser when user double-presses space
+		if (newText.includes('\\.')) {
+			const cleanedText = newText.replace(/\\\./g, '')
+			const removedCount = (newText.length - cleanedText.length) / 2 // Each "\." is 2 chars
+			applyTextUpdate(cleanedText, cursorPos - removedCount * 2)
+			return
+		}
+
+		// Escape any literal newlines (e.g. from Shift+Enter or IME input)
+		if (newText.includes('\n') || newText.includes('\r')) {
+			const before = newText.slice(0, cursorPos)
+			const newlinesBefore = (before.match(/[\n\r]/g) || []).length
+			const cleanedText = newText.replace(/\r\n/g, '\\n').replace(/[\n\r]/g, '\\n')
+			// Each newline becomes 2 chars (\n), so cursor shifts by +1 per newline before it
+			applyTextUpdate(cleanedText, cursorPos + newlinesBefore)
+			return
+		}
+
+		// Check if user just typed an escaped character
+		if (
+			newText.length > lastText.length &&
+			(newText[cursorPos - 1] === ' ' ||
+				newText[cursorPos - 1] === '\u00A0' ||
+				newText[cursorPos - 1] === '\\')
+		) {
+			// Check if there's already an escaped space right before the cursor (e.g., "tag\ |")
+			// If user types another space, just remove the backslash instead of adding "\ \"
+			if (
+				(newText[cursorPos - 1] === ' ' || newText[cursorPos - 1] === '\u00A0') &&
+				newText[cursorPos - 3] === '\\' &&
+				(newText[cursorPos - 2] === ' ' || newText[cursorPos - 2] === '\u00A0')
+			) {
+				// Remove the backslash before the existing space
+				newText = newText.slice(0, cursorPos - 3) + newText.slice(cursorPos - 2)
+				applyTextUpdate(newText, cursorPos - 1)
+				return
+			}
+
+			// Escape the space/backslash by adding backslash before it
+			newText = newText.slice(0, cursorPos - 1) + '\\' + newText.slice(cursorPos - 1)
+			applyTextUpdate(newText, cursorPos + 1)
+			return
+		}
+
+		applyTextUpdate(newText, cursorPos)
+	}
+
+	function getTextSegmentAtCursor(cursorPos: number): {
+		text: string
+		start: number
+		end: number
+	} | null {
+		// Find all tag positions
+		const tagPositions: Array<{ start: number; end: number }> = []
+		for (const tag of tags) {
+			const regex = new RegExp(tag.regex, 'g')
+			let match
+			while ((match = regex.exec(value)) !== null) {
+				tagPositions.push({
+					start: match.index,
+					end: match.index + match[0].length
+				})
+			}
+		}
+
+		// Sort by start position
+		tagPositions.sort((a, b) => a.start - b.start)
+
+		// Find the text segment containing the cursor
+		let segmentStart = 0
+		let segmentEnd = value.length
+
+		for (const tag of tagPositions) {
+			if (cursorPos <= tag.start) {
+				// Cursor is before this tag
+				segmentEnd = tag.start
+				break
+			} else if (cursorPos > tag.end) {
+				// Cursor is after this tag
+				segmentStart = tag.end
+			} else {
+				// Cursor is inside a tag
+				return null
+			}
+		}
+
+		return {
+			text: value.slice(segmentStart, segmentEnd).trim(),
+			start: segmentStart,
+			end: segmentEnd
+		}
+	}
+
+	function updateCurrentTag(cursorPos: number) {
+		let currentTag: { id: string } | null = null
+
+		for (const tag of tags) {
+			const regex = new RegExp(tag.regex, 'g')
+			let match
+			while ((match = regex.exec(value)) !== null) {
+				const start = match.index
+				const end = match.index + match[0].length
+				if (cursorPos >= start && cursorPos <= end) {
+					currentTag = { id: tag.id }
+
+					onCurrentTagChange?.(currentTag)
+					onTextSegmentAtCursorChange?.({ text: '', start: 0, end: 0 })
+					return
+				}
+			}
+		}
+
+		onCurrentTagChange?.(null)
+
+		// Get text segment at cursor when not in a tag
+		const textSegment = getTextSegmentAtCursor(cursorPos)
+		if (textSegment) {
+			onTextSegmentAtCursorChange?.(textSegment)
+		}
+	}
+
+	function handleClick(e: MouseEvent) {
+		// Check if the click landed on a clear button
+		const target = e.target as HTMLElement | null
+		const clearTarget = target?.closest<HTMLElement>('[data-clear-tag]')
+		if (clearTarget) {
+			const tagId = clearTarget.dataset.clearTag!
+			const tag = tags.find((t) => t.id === tagId)
+			tag?.onClear?.()
+			return
+		}
+		const cursorPos = getCursorPosition()
+		updateCurrentTag(cursorPos)
+	}
+
+	function handleKeyup(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') return
+		const cursorPos = getCursorPosition()
+		updateCurrentTag(cursorPos)
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') return
+		const cursorPos = getCursorPosition()
+		const text = getTextContent()
+
+		// Handle Backspace key to remove escape sequences
+		if (e.key === 'Backspace') {
+			// Check if we're right after an escaped character (e.g., "abc\ |def")
+			// We want to remove both the backslash and the escaped character
+			if (cursorPos >= 2 && text[cursorPos - 2] === '\\') {
+				e.preventDefault()
+				isUpdating = true
+				const newText = text.slice(0, cursorPos - 2) + text.slice(cursorPos)
+				applyTextUpdate(newText, cursorPos - 2)
+				return
+			}
+		}
+
+		// Handle Delete key to remove escape sequences
+		if (e.key === 'Delete') {
+			// Check if the character at cursor position is a backslash (escape character)
+			if (cursorPos < text.length && text[cursorPos] === '\\' && cursorPos + 1 < text.length) {
+				e.preventDefault()
+				isUpdating = true
+				const newText = text.slice(0, cursorPos) + text.slice(cursorPos + 2)
+				applyTextUpdate(newText, cursorPos)
+				return
+			}
+		}
+
+		// Handle arrow key navigation to skip escape sequences
+		if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+			if (e.key === 'ArrowLeft' && cursorPos > 0) {
+				// Moving left: check if we're right after an escaped character (e.g., "abc\ |def")
+				// We want to skip over the backslash and the escaped character
+				if (cursorPos >= 2 && text[cursorPos - 2] === '\\') {
+					e.preventDefault()
+					isUpdating = true
+					restoreCursor(cursorPos - 2)
+					updateCurrentTag(cursorPos - 2)
+					isUpdating = false
+					return
+				}
+			} else if (e.key === 'ArrowRight') {
+				// Moving right: check if we're at a backslash (e.g., "abc|\ def")
+				// We want to skip over the backslash and the escaped character
+				if (cursorPos < text.length && text[cursorPos] === '\\' && cursorPos + 1 < text.length) {
+					e.preventDefault()
+					isUpdating = true
+					restoreCursor(cursorPos + 2)
+					updateCurrentTag(cursorPos + 2)
+					isUpdating = false
+					return
+				}
+
+				// If user pressed right arrow and is at the end, add a space if needed
+				if (
+					cursorPos === text.length &&
+					text.length > 0 &&
+					((text[text.length - 1] !== ' ' && text[text.length - 1] !== '\u00A0') ||
+						text[text.length - 2] === '\\')
+				) {
+					e.preventDefault()
+					isUpdating = true
+					const newText = text + '\u00A0'
+					applyTextUpdate(newText, newText.length)
+					return
+				}
+			}
+		}
+	}
+
+	function getCursorPosition(): number {
+		if (!contentEditableDiv) return 0
+
+		const selection = window.getSelection()
+		if (!selection || selection.rangeCount === 0) return 0
+
+		const range = selection.getRangeAt(0)
+		const preCaretRange = range.cloneRange()
+		preCaretRange.selectNodeContents(contentEditableDiv)
+		preCaretRange.setEnd(range.endContainer, range.endOffset)
+
+		return preCaretRange.toString().length
+	}
+
+	function restoreCursor(position: number) {
+		if (!contentEditableDiv) return
+
+		const selection = window.getSelection()
+		if (!selection) return
+
+		let currentPos = 0
+		let node: Node | null = null
+		let offset = 0
+
+		function traverse(n: Node): boolean {
+			if (n.nodeType === Node.TEXT_NODE) {
+				const textLength = n.textContent?.length || 0
+				if (currentPos + textLength >= position) {
+					node = n
+					offset = position - currentPos
+					return true
+				}
+				currentPos += textLength
+			} else {
+				for (let i = 0; i < n.childNodes.length; i++) {
+					if (traverse(n.childNodes[i])) {
+						return true
+					}
+				}
+			}
+			return false
+		}
+
+		traverse(contentEditableDiv)
+
+		if (node) {
+			const range = document.createRange()
+			range.setStart(node, offset)
+			range.collapse(true)
+			selection.removeAllRanges()
+			selection.addRange(range)
+
+			// Ensure cursor is visible by scrolling if needed
+			ensureCursorVisible()
+		}
+	}
+
+	function ensureCursorVisible() {
+		if (!contentEditableDiv) return
+
+		const selection = window.getSelection()
+		if (!selection || selection.rangeCount === 0) return
+
+		const range = selection.getRangeAt(0)
+		const rect = range.getBoundingClientRect()
+		const containerRect = contentEditableDiv.getBoundingClientRect()
+
+		// Check if cursor is outside the visible area horizontally
+		if (rect.left < containerRect.left) {
+			// Cursor is to the left of visible area
+			contentEditableDiv.scrollLeft -= containerRect.left - rect.left + 10
+		} else if (rect.right > containerRect.right) {
+			// Cursor is to the right of visible area
+			contentEditableDiv.scrollLeft += rect.right - containerRect.right + 10
+		}
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		e.preventDefault()
+		let text = e.clipboardData?.getData('text/plain') || ''
+		// Escape backslashes, spaces, and newlines
+		text = text
+			.replace(/\\/g, '\\\\')
+			.replace(/ /g, '\\ ')
+			.replace(/\r\n/g, '\\n')
+			.replace(/[\n\r]/g, '\\n')
+		document.execCommand('insertText', false, text)
+	}
+
+	export function focusAtEnd() {
+		if (!contentEditableDiv) return
+		contentEditableDiv.focus()
+		restoreCursor(value.length)
+		updateCurrentTag(value.length)
+		contentEditableDiv.scrollLeft = contentEditableDiv.scrollWidth
+	}
+</script>
+
+<div
+	bind:this={contentEditableDiv}
+	contenteditable="true"
+	oninput={handleInput}
+	onpaste={handlePaste}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+	onkeyup={handleKeyup}
+	class="outline-none text-nowrap pt-[0.45rem] {className}"
+	class:text-hint={value === ''}
+	data-placeholder={placeholder}
+	role="textbox"
+	tabindex="0"
+	spellcheck="false"
+></div>
+
+<style>
+	[contenteditable][data-placeholder]:empty::before {
+		content: attr(data-placeholder);
+	}
+</style>
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index a2a975897c..d9ded1f249 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -19,6 +19,7 @@
 		markdownTooltip?: string | undefined
 		customSize?: string
 		class?: string
+		Icon?: typeof InfoIcon
 		children?: import('svelte').Snippet
 	}
 
@@ -31,6 +32,7 @@
 		markdownTooltip = undefined,
 		customSize = '100%',
 		class: classNames = '',
+		Icon = InfoIcon,
 		children
 	}: Props = $props()
 	const plugins = [gfmPlugin()]
@@ -53,7 +55,7 @@
 				? 'text-primary-inverse'
 				: 'text-primary'} {classNames} relative"
 		>
-			<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
+			<Icon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
 		</div>
 		{#snippet text()}
 			{#if markdownTooltip}
diff --git a/frontend/src/lib/components/assets/assetsFilter.ts b/frontend/src/lib/components/assets/assetsFilter.ts
new file mode 100644
index 0000000000..6f44770121
--- /dev/null
+++ b/frontend/src/lib/components/assets/assetsFilter.ts
@@ -0,0 +1,51 @@
+import { FileCode, FolderIcon, Box, Braces } from 'lucide-svelte'
+import type { FilterSchemaRec } from '../FilterSearchbar.svelte'
+
+export function buildAssetsFilterSchema({
+	paths,
+	assetKinds
+}: {
+	paths: string[]
+	assetKinds: string[]
+}) {
+	return {
+		asset_path: {
+			type: 'string' as const,
+			label: 'Asset path pattern',
+			icon: FolderIcon,
+			description: 'Filter by asset path pattern (case-insensitive)'
+		},
+		asset_kinds: {
+			type: 'oneof' as const,
+			options: assetKinds.map((s) => ({ label: s, value: s })),
+			allowCustomValue: false,
+			allowNegative: false,
+			allowMultiple: true,
+			label: 'Asset kind',
+			icon: Box,
+			description: 'Filter by asset kind (s3object, resource, variable, etc.)'
+		},
+		usage_path: {
+			type: 'string' as const,
+			label: 'Usage path pattern',
+			icon: FileCode,
+			description: 'Filter by usage path pattern (case-insensitive)'
+		},
+		path: {
+			type: 'oneof' as const,
+			options: paths.map((s) => ({ label: s, value: s })),
+			allowCustomValue: true,
+			allowNegative: false,
+			allowMultiple: false,
+			label: 'Asset path',
+			icon: FileCode,
+			description: 'Filter by exact asset path'
+		},
+		columns: {
+			type: 'string' as const,
+			label: 'Columns',
+			icon: Braces,
+			description: 'Filter by comma-separated column names (e.g., col1,col2,col3)'
+		}
+	} satisfies FilterSchemaRec
+}
diff --git a/frontend/src/lib/components/common/InlineCalendarInput.svelte b/frontend/src/lib/components/common/InlineCalendarInput.svelte
new file mode 100644
index 0000000000..bbcd9e9060
--- /dev/null
+++ b/frontend/src/lib/components/common/InlineCalendarInput.svelte
@@ -0,0 +1,629 @@
+<script module lang="ts">
+	export interface CalendarDate {
+		day: number | null
+		month: number | null // 1-indexed
+		year: number | null
+		hour: number | null
+		minute: number | null
+	}
+
+	export interface CalendarRange {
+		start: CalendarDate
+		end: CalendarDate
+	}
+
+	export function fromCalendarDate(cd: CalendarDate | null | undefined): Date | null {
+		if (calendarDateIsNull(cd)) return null
+		const now = new Date()
+		return new Date(
+			cd?.year ?? now.getFullYear(),
+			(cd?.month ?? now.getMonth() + 1) - 1,
+			cd?.day ?? now.getDate(),
+			cd?.hour ?? 0,
+			cd?.minute ?? 0
+		)
+	}
+	export function toCalendarDate(date: Date | null | undefined): CalendarDate {
+		if (!date) {
+			return { day: null, month: null, year: null, hour: null, minute: null }
+		}
+		return {
+			day: date.getDate(),
+			month: date.getMonth() + 1,
+			year: date.getFullYear(),
+			hour: date.getHours(),
+			minute: date.getMinutes()
+		}
+	}
+	function calendarDateIsNull(cd: CalendarDate | undefined | null): boolean {
+		if (!cd) return true
+		return cd.day == null || cd.month == null || cd.year == null
+	}
+</script>
+
+<script lang="ts">
+	import { startOfWeek, endOfWeek, eachDayOfInterval, isSameMonth, getDaysInMonth } from 'date-fns'
+	import { ChevronLeft, ChevronRight, ClockIcon } from 'lucide-svelte'
+	import { twMerge } from 'tailwind-merge'
+	import Button from './button/Button.svelte'
+	import Select from '../select/Select.svelte'
+	import { isUSLocale } from '$lib/utils'
+
+	interface DateProps {
+		mode?: 'date'
+		value?: CalendarDate
+	}
+
+	interface RangeProps {
+		mode: 'range'
+		value?: CalendarRange
+		onClickBehavior?: 'set-range' | 'set-start' | 'set-end'
+		infiniteRange?: boolean
+	}
+
+	type Props = (DateProps | RangeProps) & {
+		class?: string
+	}
+
+	let { mode = 'date', value = $bindable(), class: className, ...rest }: Props = $props()
+
+	const onClickBehavior = $derived(
+		mode === 'range' ? ((rest as RangeProps).onClickBehavior ?? 'set-range') : 'set-range'
+	)
+
+	const infiniteRange = $derived(mode === 'range' && !!(rest as RangeProps).infiniteRange)
+
+	const emptyDate: CalendarDate = { day: null, month: null, year: null, hour: null, minute: null }
+
+	export function calendarDateIsNull(cd: CalendarDate | null | undefined): boolean {
+		return !cd || (cd.day == null && cd.month == null && cd.year == null)
+	}
+
+	// Pick the date that should be visible on mount
+	function initialViewDate(): { month: number; year: number } {
+		const fallback = { month: today.getMonth() + 1, year: today.getFullYear() }
+
+		let cd: CalendarDate | null | undefined
+		if (mode === 'date') {
+			cd = value as CalendarDate | undefined
+		} else {
+			const v = value as CalendarRange | undefined
+			const behavior = (rest as RangeProps).onClickBehavior ?? 'set-range'
+			if (behavior === 'set-start') {
+				cd = v?.start
+			} else if (behavior === 'set-end') {
+				cd = v?.end
+			} else {
+				cd = !calendarDateIsNull(v?.start) ? v?.start : v?.end
+			}
+		}
+
+		if (!calendarDateIsNull(cd) && cd!.month != null && cd!.year != null) {
+			return { month: cd!.month, year: cd!.year }
+		}
+		return fallback
+	}
+
+	const today = new Date()
+
+	// Internal navigation state (what month/year is displayed in the calendar)
+	const _init = initialViewDate()
+	let viewMonth = $state(_init.month)
+	let viewYear = $state(_init.year)
+
+	// The date whose month/year the calendar should track (mirrors initialViewDate logic)
+	const trackedDate = $derived.by((): CalendarDate | null => {
+		if (mode === 'date') {
+			const v = value as CalendarDate | undefined
+			return v && !calendarDateIsNull(v) ? v : null
+		}
+		const v = value as CalendarRange | undefined
+		if (onClickBehavior === 'set-start')
+			return v?.start && !calendarDateIsNull(v.start) ? v.start : null
+		if (onClickBehavior === 'set-end') return v?.end && !calendarDateIsNull(v.end) ? v.end : null
+		return null
+	})
+
+	// Keep the view in sync when value is changed externally
+	$effect(() => {
+		if (trackedDate?.month != null && trackedDate?.year != null) {
+			viewMonth = trackedDate.month
+			viewYear = trackedDate.year
+		}
+	})
+
+	// Range hover tracking
+	let hoverDate: CalendarDate | null = $state(null)
+	let rangeSelectingStart: boolean = $state(false)
+
+	// Month names for selector
+	const MONTH_NAMES = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	]
+
+	const YEAR_LIST_DELTA = 4
+	const YEAR_LIST = Array.from(
+		{ length: YEAR_LIST_DELTA * 2 + 1 },
+		(_, i) => new Date().getFullYear() - YEAR_LIST_DELTA + i
+	)
+
+	const DAY_LABELS = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
+
+	// Build the grid: 6 rows × 7 cols of CalendarDate (with nullish fields for padding)
+	const calendarDays = $derived.by(() => {
+		const firstDay = new Date(viewYear, viewMonth - 1, 1)
+		const lastDay = new Date(viewYear, viewMonth - 1, getDaysInMonth(firstDay))
+		const gridStart = startOfWeek(firstDay, { weekStartsOn: 0 })
+		const gridEnd = endOfWeek(lastDay, { weekStartsOn: 0 })
+		const allDays = eachDayOfInterval({ start: gridStart, end: gridEnd })
+		return allDays.map((d) => ({
+			day: d.getDate(),
+			month: d.getMonth() + 1,
+			year: d.getFullYear(),
+			hour: null as number | null,
+			minute: null as number | null,
+			isCurrentMonth: isSameMonth(d, firstDay)
+		}))
+	})
+
+	// Year options for selector (current year ± 50)
+	function calendarDateToDate(cd: CalendarDate): Date | null {
+		if (cd.day == null || cd.month == null || cd.year == null) return null
+		return new Date(cd.year, cd.month - 1, cd.day)
+	}
+
+	function isSameCalDate(a: CalendarDate | null, b: CalendarDate | null): boolean {
+		if (!a || !b) return false
+		return a.day === b.day && a.month === b.month && a.year === b.year
+	}
+
+	function isDaySelected(cell: CalendarDate): boolean {
+		if (mode === 'date') {
+			const v = value as CalendarDate | undefined
+			if (!v) return false
+			return isSameCalDate(cell, v)
+		} else {
+			const v = value as CalendarRange | undefined
+			if (!v) return false
+			if (onClickBehavior === 'set-start') return isSameCalDate(cell, v.start)
+			if (onClickBehavior === 'set-end') return isSameCalDate(cell, v.end)
+			return isSameCalDate(cell, v.start) || isSameCalDate(cell, v.end)
+		}
+	}
+
+	function isDayInRange(cell: CalendarDate): boolean {
+		if (mode !== 'range') return false
+		const v = value as CalendarRange | undefined
+		const startDate = v?.start ? calendarDateToDate(v.start) : null
+		const endDate = v?.end ? calendarDateToDate(v.end) : null
+		const cellDate = calendarDateToDate(cell)
+		if (!cellDate) return false
+
+		// If actively selecting (first click done, hovering), show hover range
+		if (rangeSelectingStart && startDate && hoverDate) {
+			const hDate = calendarDateToDate(hoverDate)
+			if (hDate) {
+				const lo = startDate < hDate ? startDate : hDate
+				const hi = startDate < hDate ? hDate : startDate
+				return cellDate > lo && cellDate < hi
+			}
+		}
+
+		if (infiniteRange) {
+			if (!startDate && !endDate) return false
+			if (!startDate) return cellDate < endDate!
+			if (!endDate) return cellDate > startDate
+		}
+		if (!startDate || !endDate) return false
+		return cellDate > startDate && cellDate < endDate
+	}
+
+	function isDayRangeStart(cell: CalendarDate): boolean {
+		if (mode !== 'range') return false
+		const v = value as CalendarRange | undefined
+		return isSameCalDate(cell, v?.start ?? null)
+	}
+
+	function isDayDisabled(cell: CalendarDate): boolean {
+		if (mode !== 'range') return false
+		const v = value as CalendarRange | undefined
+		const cellDate = calendarDateToDate(cell)
+		if (!cellDate) return false
+
+		if (onClickBehavior === 'set-start') {
+			const endDate = v?.end ? calendarDateToDate(v.end) : null
+			return endDate != null && cellDate > endDate
+		}
+		if (onClickBehavior === 'set-end') {
+			const startDate = v?.start ? calendarDateToDate(v.start) : null
+			return startDate != null && cellDate < startDate
+		}
+		return false
+	}
+
+	function isDayRangeEnd(cell: CalendarDate): boolean {
+		if (mode !== 'range') return false
+		const v = value as CalendarRange | undefined
+		if (rangeSelectingStart && hoverDate) {
+			const startDate = v?.start ? calendarDateToDate(v.start) : null
+			const hDate = calendarDateToDate(hoverDate)
+			const cellDate = calendarDateToDate(cell)
+			if (startDate && hDate && cellDate) {
+				const end = startDate < hDate ? hoverDate : (v?.start ?? null)
+				return isSameCalDate(cell, end)
+			}
+		}
+		return isSameCalDate(cell, v?.end ?? null)
+	}
+
+	function handleDayClick(cell: {
+		day: number
+		month: number
+		year: number
+		isCurrentMonth: boolean
+	}) {
+		const cd: CalendarDate = {
+			day: cell.day,
+			month: cell.month,
+			year: cell.year,
+			hour: null,
+			minute: null
+		}
+
+		if (mode === 'date') {
+			const v = value as CalendarDate | undefined
+			value = isSameCalDate(cd, v ?? null)
+				? emptyDate
+				: { ...cd, hour: v?.hour ?? null, minute: v?.minute ?? null }
+		} else {
+			const v = value as CalendarRange | undefined
+
+			if (onClickBehavior === 'set-start') {
+				const newStart = isSameCalDate(cd, v?.start ?? null)
+					? emptyDate
+					: { ...cd, hour: v?.start?.hour ?? null, minute: v?.start?.minute ?? null }
+				value = { start: newStart, end: v?.end ?? emptyDate }
+			} else if (onClickBehavior === 'set-end') {
+				const newEnd = isSameCalDate(cd, v?.end ?? null)
+					? emptyDate
+					: { ...cd, hour: v?.end?.hour ?? null, minute: v?.end?.minute ?? null }
+				value = { start: v?.start ?? emptyDate, end: newEnd }
+			} else {
+				// 'set-range': two-click flow
+				if (!rangeSelectingStart) {
+					// First click: toggle start (deselect if same day), clear end
+					if (isSameCalDate(cd, v?.start ?? null)) {
+						value = { start: emptyDate, end: emptyDate }
+					} else {
+						value = { start: cd, end: emptyDate }
+						rangeSelectingStart = true
+					}
+				} else {
+					// Second click: set end, auto-swap if needed
+					const start = v?.start ?? emptyDate
+					const startDate = calendarDateToDate(start)
+					const endDate = calendarDateToDate(cd)
+					if (startDate && endDate && endDate < startDate) {
+						value = { start: cd, end: start }
+					} else {
+						value = { start, end: cd }
+					}
+					rangeSelectingStart = false
+					hoverDate = null
+				}
+			}
+		}
+
+		// Navigate to that month if clicking an out-of-month day
+		if (!cell.isCurrentMonth) {
+			viewMonth = cell.month
+			viewYear = cell.year
+		}
+	}
+
+	function prevMonth() {
+		if (viewMonth === 1) {
+			viewMonth = 12
+			viewYear -= 1
+		} else {
+			viewMonth -= 1
+		}
+	}
+
+	function nextMonth() {
+		if (viewMonth === 12) {
+			viewMonth = 1
+			viewYear += 1
+		} else {
+			viewMonth += 1
+		}
+	}
+
+	// The CalendarDate whose hour/minute the time inputs control
+	const timeTarget = $derived.by((): CalendarDate | null => {
+		if (mode === 'date') return (value as CalendarDate | undefined) ?? null
+		const v = value as CalendarRange | undefined
+		if (onClickBehavior === 'set-start') return v?.start ?? null
+		if (onClickBehavior === 'set-end') return v?.end ?? null
+		return null // set-range: no single time target
+	})
+
+	const showTime = $derived(timeTarget !== null)
+
+	// Returns the base CalendarDate to mutate, falling back to today if no date selected yet
+	function withTodayFallback(cd: CalendarDate): CalendarDate {
+		if (cd.day != null && cd.month != null && cd.year != null) return cd
+		const t = new Date()
+		return {
+			...cd,
+			day: cd.day ?? t.getDate(),
+			month: cd.month ?? t.getMonth() + 1,
+			year: cd.year ?? t.getFullYear()
+		}
+	}
+
+	const usLocale = $derived(isUSLocale())
+
+	function selectAllOnFocus(e: FocusEvent) {
+		;(e.target as HTMLInputElement).select()
+	}
+
+	function patchTarget(patch: Partial<CalendarDate>) {
+		if (mode === 'date') {
+			value = { ...withTodayFallback(value as CalendarDate), ...patch }
+		} else {
+			const v = value as CalendarRange
+			if (onClickBehavior === 'set-start')
+				value = { start: { ...withTodayFallback(v.start), ...patch }, end: v.end }
+			else if (onClickBehavior === 'set-end')
+				value = { start: v.start, end: { ...withTodayFallback(v.end), ...patch } }
+		}
+	}
+
+	function setDay(raw: string) {
+		const d = parseInt(raw, 10)
+		if (isNaN(d)) return
+		patchTarget({ day: Math.max(1, Math.min(31, d)) })
+	}
+
+	function setMonth(raw: string) {
+		const mo = parseInt(raw, 10)
+		if (isNaN(mo)) return
+		patchTarget({ month: Math.max(1, Math.min(12, mo)) })
+	}
+
+	function setYear(raw: string) {
+		const y = parseInt(raw, 10)
+		if (isNaN(y)) return
+		patchTarget({ year: y })
+	}
+</script>
+
+<div class="flex flex-col {className}">
+	<!-- Header -->
+	<div class="mb-3 flex items-center gap-1.5">
+		<Button
+			endIcon={{ icon: ChevronLeft }}
+			iconOnly
+			unifiedSize="md"
+			onClick={prevMonth}
+			wrapperClasses="bg-surface-input"
+		/>
+
+		<div class="flex flex-1 divide-x">
+			<Select
+				class="basis-1/2"
+				inputClass="text-center !rounded-r-none !border-r-0"
+				disablePortal
+				bind:value={viewMonth}
+				items={MONTH_NAMES.map((name, i) => ({ label: name, value: i + 1 }))}
+			/>
+			<Select
+				class="basis-1/2"
+				inputClass="text-center !rounded-l-none !border-l-0"
+				disablePortal
+				bind:value={viewYear}
+				onCreateItem={(val) => (viewYear = parseInt(val) || viewYear)}
+				items={YEAR_LIST.map((year) => ({ label: year.toString(), value: year }))}
+			/>
+		</div>
+
+		<Button
+			endIcon={{ icon: ChevronRight }}
+			iconOnly
+			unifiedSize="md"
+			onClick={nextMonth}
+			wrapperClasses="bg-surface-input"
+		/>
+	</div>
+
+	<!-- Day-of-week labels -->
+	<div class="mb-1 grid grid-cols-7">
+		{#each DAY_LABELS as label (label)}
+			<div
+				class="flex h-7 items-center justify-center text-3xs font-medium uppercase tracking-wide text-secondary"
+			>
+				{label}
+			</div>
+		{/each}
+	</div>
+
+	<!-- Day grid -->
+	<div class="grid grid-cols-7">
+		{#each calendarDays as cell (`${cell.year}-${cell.month}-${cell.day}`)}
+			{@const selected = isDaySelected(cell)}
+			{@const inRange = isDayInRange(cell)}
+			{@const isStart = isDayRangeStart(cell)}
+			{@const isEnd = isDayRangeEnd(cell)}
+			{@const disabled = isDayDisabled(cell)}
+			{@const isToday =
+				cell.day === today.getDate() &&
+				cell.month === today.getMonth() + 1 &&
+				cell.year === today.getFullYear()}
+			<button
+				type="button"
+				onclick={() => !disabled && handleDayClick(cell)}
+				onmouseenter={() => {
+					if (rangeSelectingStart) hoverDate = cell
+				}}
+				onmouseleave={() => {
+					if (rangeSelectingStart) hoverDate = null
+				}}
+				class={twMerge(
+					'relative flex my-0.5 h-9 min-w-9 w-full items-center justify-center text-sm transition-colors focus:outline-none',
+					disabled ? 'opacity-15' : !cell.isCurrentMonth ? 'text-hint' : 'text-primary',
+					!disabled && selected ? 'font-semibold' : 'font-normal',
+					!disabled && inRange ? 'bg-surface-secondary' : '',
+					!disabled && (isStart || isEnd) ? 'bg-surface-secondary' : '',
+					!disabled && isStart && mode === 'range' ? 'rounded-l' : '',
+					!disabled && isEnd && mode === 'range' ? 'rounded-r' : ''
+				)}
+				aria-label="{cell.year}-{String(cell.month).padStart(2, '0')}-{String(cell.day).padStart(
+					2,
+					'0'
+				)}"
+				aria-pressed={selected}
+				aria-disabled={disabled}
+			>
+				<!-- Selection circle / highlight -->
+				{#if selected}
+					<span class="absolute inset-0 z-0 rounded-md bg-surface-accent-primary"></span>
+				{/if}
+				<span
+					class={twMerge(
+						'relative z-10',
+						selected ? 'text-white dark:text-white' : isToday && !disabled ? 'text-accent' : ''
+					)}
+				>
+					{cell.day}
+				</span>
+			</button>
+		{/each}
+	</div>
+
+	<div class="flex-1"></div>
+
+	<!-- Time inputs -->
+	{#if showTime}
+		<div class="border-t my-4"></div>
+		<div class="flex justify-center">
+			<div
+				class="px-2 !h-8 flex border bg-surface-secondary dark:bg-surface rounded-l-md w-fit items-center gap-0"
+			>
+				{#if usLocale}
+					<!-- MM / DD / YYYY -->
+					<input
+						type="text"
+						inputmode="numeric"
+						maxlength="2"
+						value={timeTarget?.month != null ? String(timeTarget.month).padStart(2, '0') : ''}
+						placeholder="MM"
+						onfocus={selectAllOnFocus}
+						onchange={(e) => setMonth((e.target as HTMLInputElement).value)}
+						style="background: transparent !important;"
+						class="!border-none !w-8 !h-7 !px-1.5 text-center font-mono"
+						aria-label="Month"
+					/>
+					<span class="text-sm font-medium font-mono text-secondary">/</span>
+					<input
+						type="text"
+						inputmode="numeric"
+						maxlength="2"
+						value={timeTarget?.day != null ? String(timeTarget.day).padStart(2, '0') : ''}
+						placeholder="DD"
+						onfocus={selectAllOnFocus}
+						onchange={(e) => setDay((e.target as HTMLInputElement).value)}
+						style="background: transparent !important;"
+						class="!border-none !w-8 !h-7 !px-1.5 text-center font-mono"
+						aria-label="Day"
+					/>
+				{:else}
+					<!-- DD / MM / YYYY -->
+					<input
+						type="text"
+						inputmode="numeric"
+						maxlength="2"
+						value={timeTarget?.day != null ? String(timeTarget.day).padStart(2, '0') : ''}
+						placeholder="DD"
+						onfocus={selectAllOnFocus}
+						onchange={(e) => setDay((e.target as HTMLInputElement).value)}
+						style="background: transparent !important;"
+						class="!border-none !w-8 !h-7 !px-1.5 text-center font-mono"
+						aria-label="Day"
+					/>
+					<span class="text-sm font-medium font-mono text-secondary">/</span>
+					<input
+						type="text"
+						inputmode="numeric"
+						maxlength="2"
+						value={timeTarget?.month != null ? String(timeTarget.month).padStart(2, '0') : ''}
+						placeholder="MM"
+						onfocus={selectAllOnFocus}
+						onchange={(e) => setMonth((e.target as HTMLInputElement).value)}
+						style="background: transparent !important;"
+						class="!border-none !w-8 !h-7 !px-1.5 text-center font-mono"
+						aria-label="Month"
+					/>
+				{/if}
+				<span class="text-sm font-medium font-mono text-secondary">/</span>
+				<input
+					type="text"
+					inputmode="numeric"
+					maxlength="4"
+					value={timeTarget?.year != null ? String(timeTarget.year) : ''}
+					placeholder="YYYY"
+					onfocus={selectAllOnFocus}
+					onchange={(e) => setYear((e.target as HTMLInputElement).value)}
+					style="background: transparent !important;"
+					class="!border-none !w-12 !h-7 !px-1.5 text-center font-mono"
+					aria-label="Year"
+				/>
+			</div>
+			<div
+				class="pl-2 !h-8 flex border border-l-0 rounded-r-md w-fit items-center gap-0 bg-surface-input"
+			>
+				<input
+					type="text"
+					inputmode="numeric"
+					maxlength="2"
+					value={timeTarget?.hour != null ? String(timeTarget.hour).padStart(2, '0') : ''}
+					placeholder="HH"
+					onfocus={selectAllOnFocus}
+					onchange={(e) => {
+						const h = Math.max(0, Math.min(23, parseInt((e.target as HTMLInputElement).value, 10)))
+						if (!isNaN(h)) patchTarget({ hour: h })
+					}}
+					class="!border-none !w-8 !h-7 !px-1.5 text-right font-mono"
+					aria-label="Hour"
+				/>
+				<span class="text-sm font-medium font-mono text-secondary">:</span>
+				<input
+					type="text"
+					inputmode="numeric"
+					maxlength="2"
+					value={timeTarget?.minute != null ? String(timeTarget.minute).padStart(2, '0') : ''}
+					placeholder="MM"
+					onfocus={selectAllOnFocus}
+					onchange={(e) => {
+						const m = Math.max(0, Math.min(59, parseInt((e.target as HTMLInputElement).value, 10)))
+						if (!isNaN(m)) patchTarget({ minute: m })
+					}}
+					class="!border-none !w-8 !h-7 !px-1.5 text-left font-mono"
+					aria-label="Minute"
+				/>
+				<ClockIcon size={14} class="mr-3" />
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/flows/flowStore.svelte.ts b/frontend/src/lib/components/flows/flowStore.svelte.ts
index f73747e915..9f504c5c03 100644
--- a/frontend/src/lib/components/flows/flowStore.svelte.ts
+++ b/frontend/src/lib/components/flows/flowStore.svelte.ts
@@ -34,9 +34,11 @@ export async function copyFirstStepSchema(
 			})
 			return
 		}
-		return sendUserToast('Only scripts can be used as a input schema', true)
+		sendUserToast('Only scripts can be used as a input schema', true)
+		return
 	}
-	return sendUserToast('No first step found', true)
+	sendUserToast('No first step found', true)
+	return
 }
 
 export async function getFirstStepSchema(flowState: FlowState, flow: OpenFlow) {
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte b/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
index 8764cf45ff..2091f76340 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
@@ -24,7 +24,7 @@
 							[])
 					: undefined
 			} catch (err) {
-				console.error('Error fetching top hub scripts')
+				sendUserToast('Failed to fetch hub scripts: ' + err, 'error')
 				return undefined
 			}
 		},
@@ -38,7 +38,7 @@
 <script lang="ts">
 	import { createEventDispatcher, untrack } from 'svelte'
 	import { Skeleton } from '$lib/components/common'
-	import { classNames, createCache } from '$lib/utils'
+	import { classNames, createCache, sendUserToast } from '$lib/utils'
 	import { APP_TO_ICON_COMPONENT } from '$lib/components/icons'
 	import { IntegrationService, ScriptService, type HubScriptKind } from '$lib/gen'
 	import { Circle, ExternalLink } from 'lucide-svelte'
@@ -100,7 +100,7 @@
 				(x) => x.name
 			)
 		} catch (err) {
-			console.error('Hub is not available')
+			sendUserToast('Failed to fetch hub integrations: ' + err, 'error')
 			allApps = []
 			hubNotAvailable = true
 		}
@@ -144,7 +144,7 @@
 			try {
 				await ScriptService.pickHubScriptByPath({ path: item.path })
 			} catch (error) {
-				console.error('Failed to track hub script pick:', error)
+				sendUserToast('Failed to call ScriptService.pickHubScriptByPath: ' + error, 'error')
 				// Don't block the flow if tracking fails
 			}
 		}
diff --git a/frontend/src/lib/components/resources/resourcesFilter.ts b/frontend/src/lib/components/resources/resourcesFilter.ts
new file mode 100644
index 0000000000..a95851fde0
--- /dev/null
+++ b/frontend/src/lib/components/resources/resourcesFilter.ts
@@ -0,0 +1,75 @@
+import { Boxes, FileCode, FileText, FolderIcon, Braces, Users } from 'lucide-svelte'
+import type { FilterSchemaRec } from '../FilterSearchbar.svelte'
+
+export function buildResourcesFilterSchema({
+	paths,
+	resourceTypes,
+	owners,
+	showUserFoldersFilter,
+	userFoldersLabel
+}: {
+	paths: string[]
+	resourceTypes: string[]
+	owners: string[]
+	showUserFoldersFilter?: boolean
+	userFoldersLabel?: string
+}) {
+	return {
+		resource_type: {
+			type: 'oneof' as const,
+			options: resourceTypes.map((s) => ({ label: s, value: s })),
+			allowNegative: false,
+			allowMultiple: true,
+			label: 'Resource type',
+			icon: Boxes,
+			description: 'Filter by resource type'
+		},
+		owner: {
+			type: 'oneof' as const,
+			options: owners.map((s) => ({ label: s, value: s })),
+			allowNegative: false,
+			allowMultiple: false,
+			label: 'Owner',
+			icon: FolderIcon,
+			description: 'Filter by owner (folder or user path)'
+		},
+		path: {
+			type: 'oneof' as const,
+			options: paths.map((s) => ({ label: s, value: s })),
+			allowNegative: true,
+			allowMultiple: true,
+			label: 'Path',
+			icon: FileCode,
+			description: 'Filter by exact resource path'
+		},
+		path_start: {
+			type: 'string' as const,
+			label: 'Path prefix',
+			icon: FolderIcon,
+			description: 'Filter by path prefix (e.g., "f/folder/")'
+		},
+		description: {
+			type: 'string' as const,
+			label: 'Description',
+			icon: FileText,
+			description: 'Search in resource description'
+		},
+		value: {
+			type: 'string' as const,
+			format: 'json' as const,
+			label: 'Value subset',
+			icon: Braces,
+			description: 'Filter by JSON subset match (e.g., {"bucket": "my-bucket"})'
+		},
+		...(showUserFoldersFilter
+			? {
+					user_folders_only: {
+						type: 'boolean' as const,
+						label: userFoldersLabel || 'User folders only',
+						icon: Users,
+						description: 'Show only resources in user folders'
+					}
+				}
+			: {})
+	} satisfies FilterSchemaRec
+}
diff --git a/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte b/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
index b73a5a2eed..3124333e4b 100644
--- a/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
+++ b/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
@@ -17,7 +17,7 @@
 	import type { Schema } from '$lib/common'
 	import InputTransformForm from '../InputTransformForm.svelte'
 	import type { FlowPropPickerConfig, PropPickerContext } from '../prop_picker'
-	import { setContext, untrack } from 'svelte'
+	import { setContext } from 'svelte'
 	import { writable } from 'svelte/store'
 	import type { PickableProperties } from '../flows/previousResults'
 	import Alert from '../common/alert/Alert.svelte'
@@ -27,27 +27,34 @@
 		mergeSchemasForBatchReruns
 	} from '$lib/components/jobs/batchReruns'
 	import Toggle from '../Toggle.svelte'
-	import { TriangleAlert } from 'lucide-svelte'
+	import { RefreshCwIcon, TriangleAlert } from 'lucide-svelte'
 	import { readFieldsRecursively } from '$lib/utils'
 	import Button from '../common/button/Button.svelte'
 	import ResizeTransitionWrapper from '../common/ResizeTransitionWrapper.svelte'
+	import { resource, watch } from 'runed'
 
 	let {
 		selectedIds,
-		options = $bindable()
+		onCancel,
+		onConfirm
 	}: {
 		selectedIds: string[]
-		options: BatchReRunOptions
+		onCancel: () => void
+		onConfirm: (options: BatchReRunOptions) => void
 	} = $props()
 
 	let selected: JobGroup | undefined = $state()
-	$effect(() => {
-		jobGroupsPromise.then((jobGroups) => {
+	let options: BatchReRunOptions = $state({ flow: {}, script: {} })
+	watch(
+		() => jobGroups.current,
+		() => {
 			selected = selected
-				? jobGroups.find((g) => g.script_path === selected?.script_path && g.kind === selected.kind)
-				: jobGroups[0]
-		})
-	})
+				? jobGroups.current?.find(
+						(g) => g.script_path === selected?.script_path && g.kind === selected.kind
+					)
+				: jobGroups.current?.[0]
+		}
+	)
 
 	setContext<PropPickerContext>('PropPickerContext', {
 		flowPropPickerConfig: writable<FlowPropPickerConfig | undefined>(undefined),
@@ -108,7 +115,7 @@
 				group.schemas.find((s) => s.script_hash === jobSchema.script_hash) ??
 				group.schemas[
 					group.schemas.push({
-						schema: jobSchema.schema as Schema,
+						schema: (jobSchema.schema as Schema) ?? {},
 						job_ids: [],
 						script_hash: jobSchema.script_hash
 					}) - 1
@@ -130,7 +137,7 @@
 	}
 	function propertyAlwaysExists(propertyName: string, group: JobGroup): boolean {
 		for (const s of group.schemas) {
-			if (!(propertyName in (s.schema as Schema).properties)) return false
+			if (!(propertyName in ((s.schema as Schema)?.properties ?? {}))) return false
 		}
 		return true
 	}
@@ -138,7 +145,7 @@
 	function propertyAlwaysHasSameType(propertyName: string, group: JobGroup): boolean {
 		let prevType = 'INIT'
 		for (const s of group.schemas) {
-			const currType = (s.schema as Schema).properties[propertyName]?.type
+			const currType = (s.schema as Schema)?.properties?.[propertyName]?.type
 			if (currType === undefined) continue
 			if (prevType !== 'INIT' && currType !== prevType) return false
 			prevType = currType
@@ -152,25 +159,23 @@
 				(options[selected.kind][selected.script_path]?.use_latest_version ?? false))
 	)
 
-	const jobGroupsPromise = $derived.by(() => {
-		readFieldsRecursively(selectedIds)
-		return untrack(() => fetchJobGroups())
-	})
+	const jobGroups = resource(() => readFieldsRecursively(selectedIds), fetchJobGroups)
+
+	let hideRunnableSelector = $derived(!(jobGroups.current?.length !== 1 && selectedIds.length > 1))
 </script>
 
-<div class="flex-1 flex flex-col">
-	<p class="ml-4 mt-4 text-xs font-semibold truncate">Batch re-run options</p>
-	<div class="border overflow-auto rounded-md m-4 flex-1">
+<div class="flex-1 flex flex-col h-full">
+	<div class="border overflow-auto rounded-md mb-4 flex-1">
 		<Splitpanes>
-			<Pane size={32} class="bg-surface-secondary relative">
-				<PanelSection
-					title="Runnables"
-					class="bg-surface-secondary overflow-y-scroll absolute inset-0"
-					id="batch-rerun-options-runnable-list"
-				>
-					<div class="w-full flex flex-col gap-1">
-						{#await jobGroupsPromise then jobGroup}
-							{#each jobGroup as group}
+			{#if !hideRunnableSelector}
+				<Pane size={32} class="bg-surface-secondary relative">
+					<PanelSection
+						title="Runnables"
+						class="bg-surface-secondary overflow-y-scroll absolute inset-0"
+						id="batch-rerun-options-runnable-list"
+					>
+						<div class="w-full flex flex-col gap-1">
+							{#each jobGroups.current ?? [] as group}
 								<Button
 									variant="default"
 									unifiedSize="sm"
@@ -183,101 +188,113 @@
 									<span class="text-hint">({jobGroupTotalCount(group)})</span>
 								</Button>
 							{/each}
-						{/await}
-					</div>
-				</PanelSection>
-			</Pane>
-			<Pane size={68} class="relative">
-				<PanelSection
-					title="Inputs"
-					class="overflow-y-scroll absolute inset-0"
-					id="batch-rerun-options-args"
-				>
-					{#if selected}
-						<div class="text-sm w-full pb-2">
-							<Alert type="info" title="Available expressions :">
-								Use the <code>job</code> object to access data about the original job
-							</Alert>
 						</div>
-						<Toggle
-							checked={selectedUsesLatestSchema}
-							disabled={selected?.kind === 'flow'}
-							on:change={(e) => {
-								if (!selected) return
-								;(options[selected.kind][selected.script_path] ??= {}).use_latest_version =
-									e.detail as boolean
-							}}
-							size="sm"
-							options={{
-								right: 'Always use latest version',
-								rightTooltip:
-									selected.kind === 'flow'
-										? 'Flow jobs will always run on the latest version of the flow'
-										: 'Run all jobs with the latest version of the script even if they originally ran an older version'
-							}}
-						/>
+					</PanelSection>
+				</Pane>
+			{/if}
+			<Pane size={hideRunnableSelector ? 100 : 68} class="relative">
+				<div class="flex flex-col absolute inset-0 bg-surface-tertiary">
+					<PanelSection
+						title="Inputs"
+						class="overflow-y-scroll flex-1"
+						id="batch-rerun-options-args"
+					>
+						{#if selected}
+							<div class="text-sm w-full pb-2">
+								<Alert type="info" title="Available expressions :">
+									Use the <code>job</code> object to access data about the original job
+								</Alert>
+							</div>
+							<Toggle
+								checked={selectedUsesLatestSchema}
+								disabled={selected?.kind === 'flow'}
+								on:change={(e) => {
+									if (!selected) return
+									;(options[selected.kind][selected.script_path] ??= {}).use_latest_version =
+										e.detail as boolean
+								}}
+								size="sm"
+								options={{
+									right: 'Always use latest version',
+									rightTooltip:
+										selected.kind === 'flow'
+											? 'Flow jobs will always run on the latest version of the flow'
+											: 'Run all jobs with the latest version of the script even if they originally ran an older version'
+								}}
+							/>
 
-						<!-- Even if we use the latest schema, we want the editor -->
-						<!-- to only lint the original jobs' values -->
-						{@const displayedSchema = selectedUsesLatestSchema
-							? (selected.latest_schema as Schema)
-							: mergeSchemasForBatchReruns(selected.schemas.map((s) => s.schema as Schema))}
-						{@const extraLib = buildExtraLibForBatchReruns({
-							schemas: selected.schemas,
-							script_path: selected.script_path
-						})}
-						<div class="w-full h-full">
-							{#key [selected, displayedSchema]}
-								{#each Object.keys(displayedSchema.properties) as propertyName}
-									<ResizeTransitionWrapper vertical innerClass="w-full">
-										<InputTransformForm
-											class="items-start mb-6"
-											arg={options[selected.kind][selected.script_path]?.input_transforms?.[
-												propertyName
-											] ?? {
-												type: 'javascript',
-												expr: batchReRunDefaultPropertyExpr(propertyName, selected.schemas)
-											}}
-											on:change={(e) => {
-												if (!selected) return
-												const newArg = e.detail.arg as InputTransform
-												;((options[selected.kind][selected.script_path] ??= {}).input_transforms ??=
-													{})[propertyName] = newArg
-											}}
-											argName={propertyName}
-											schema={displayedSchema}
-											{extraLib}
-											previousModuleId={undefined}
-											pickableProperties={{
-												hasResume: false,
-												previousId: undefined,
-												priorIds: {},
-												flow_input: {}
-											}}
-											hideHelpButton
-											{...propertyAlwaysExists(propertyName, selected)
-												? {}
-												: {
-														headerTooltip:
-															'This property does not exist on all versions of the script. You can handle different cases in the code below',
-														HeaderTooltipIcon: TriangleAlert,
-														headerTooltipIconClass: 'text-orange-500'
-													}}
-											{...propertyAlwaysHasSameType(propertyName, selected)
-												? {}
-												: {
-														headerTooltip:
-															'This property does not always have the same type depending on the version of the script. You can handle different cases in the code below',
-														HeaderTooltipIcon: TriangleAlert,
-														headerTooltipIconClass: 'text-orange-500'
-													}}
-										/>
-									</ResizeTransitionWrapper>
-								{/each}
-							{/key}
-						</div>
-					{/if}
-				</PanelSection>
+							<!-- Even if we use the latest schema, we want the editor -->
+							<!-- to only lint the original jobs' values -->
+							{@const displayedSchema = selectedUsesLatestSchema
+								? (selected.latest_schema as Schema | undefined)
+								: mergeSchemasForBatchReruns(
+										selected.schemas.map((s) => (s.schema as Schema) ?? {})
+									)}
+							{@const extraLib = buildExtraLibForBatchReruns({
+								schemas: selected.schemas,
+								script_path: selected.script_path
+							})}
+							<div class="w-full h-full">
+								{#key [selected, displayedSchema]}
+									{#each Object.keys(displayedSchema?.properties ?? {}) as propertyName}
+										<ResizeTransitionWrapper vertical innerClass="w-full">
+											<InputTransformForm
+												class="items-start mb-6"
+												arg={options[selected.kind][selected.script_path]?.input_transforms?.[
+													propertyName
+												] ?? {
+													type: 'javascript',
+													expr: batchReRunDefaultPropertyExpr(propertyName, selected.schemas)
+												}}
+												on:change={(e) => {
+													if (!selected) return
+													const newArg = e.detail.arg as InputTransform
+													;((options[selected.kind][selected.script_path] ??=
+														{}).input_transforms ??= {})[propertyName] = newArg
+												}}
+												argName={propertyName}
+												schema={displayedSchema ?? {}}
+												{extraLib}
+												previousModuleId={undefined}
+												pickableProperties={{
+													hasResume: false,
+													previousId: undefined,
+													priorIds: {},
+													flow_input: {}
+												}}
+												hideHelpButton
+												{...propertyAlwaysExists(propertyName, selected)
+													? {}
+													: {
+															headerTooltip:
+																'This property does not exist on all versions of the script. You can handle different cases in the code below',
+															HeaderTooltipIcon: TriangleAlert,
+															headerTooltipIconClass: 'text-orange-500'
+														}}
+												{...propertyAlwaysHasSameType(propertyName, selected)
+													? {}
+													: {
+															headerTooltip:
+																'This property does not always have the same type depending on the version of the script. You can handle different cases in the code below',
+															HeaderTooltipIcon: TriangleAlert,
+															headerTooltipIconClass: 'text-orange-500'
+														}}
+											/>
+										</ResizeTransitionWrapper>
+									{/each}
+								{/key}
+							</div>
+						{/if}
+					</PanelSection>
+					<div class="flex justify-end gap-2 w-full pt-2 pb-2 pr-4">
+						<Button variant="subtle" onClick={onCancel}>Cancel</Button>
+						<Button
+							variant="accent"
+							onClick={() => onConfirm(options)}
+							endIcon={{ icon: RefreshCwIcon }}>Run again</Button
+						>
+					</div>
+				</div>
 			</Pane>
 		</Splitpanes>
 	</div>
diff --git a/frontend/src/lib/components/runs/JobRunsPreview.svelte b/frontend/src/lib/components/runs/JobRunsPreview.svelte
index 9d40dc616d..637848c83c 100644
--- a/frontend/src/lib/components/runs/JobRunsPreview.svelte
+++ b/frontend/src/lib/components/runs/JobRunsPreview.svelte
@@ -119,8 +119,8 @@
 	bind:this={jobLoader}
 />
 
-<div class="h-full overflow-y-auto">
-	<div class="flex flex-col items-start p-4 pb-8 min-h-full">
+<div class="h-full">
+	<div class="flex flex-col items-start pb-4 min-h-full">
 		{#if isLoadingJobDetails}
 			<div class="w-full flex-1 flex items-center justify-center">
 				<div class="text-center">
diff --git a/frontend/src/lib/components/runs/ManuelDatePicker.svelte b/frontend/src/lib/components/runs/ManuelDatePicker.svelte
deleted file mode 100644
index ceb393799b..0000000000
--- a/frontend/src/lib/components/runs/ManuelDatePicker.svelte
+++ /dev/null
@@ -1,125 +0,0 @@
-<script lang="ts">
-	import { RefreshCw } from 'lucide-svelte'
-	import { Button } from '../common'
-	import { createEventDispatcher } from 'svelte'
-
-	interface Props {
-		minTs: string | null
-		maxTs: string | null
-		loading?: boolean
-		selectedManualDate?: number
-		loadText?: string | undefined
-		serviceLogsChoices?: boolean
-		numberOfLastJobsToFetch?: number
-	}
-
-	let {
-		minTs = $bindable(),
-		maxTs = $bindable(),
-		loading = false,
-		selectedManualDate = $bindable(0),
-		loadText = undefined,
-		serviceLogsChoices = false,
-		numberOfLastJobsToFetch = 1000
-	}: Props = $props()
-
-	export function computeMinMax(): { minTs: string; maxTs: string | null } | undefined {
-		return manualDates[selectedManualDate].computeMinMax()
-	}
-
-	export function resetChoice() {
-		selectedManualDate = 0
-	}
-
-	function computeMinMaxInc(inc: number) {
-		let minTs = new Date(new Date().getTime() - inc).toISOString()
-		let maxTs = null
-		return { minTs, maxTs }
-	}
-
-	const fixedManualDates: {
-		label: string
-		computeMinMax: () => { minTs: string; maxTs: string | null } | undefined
-	}[] = [
-		...(!serviceLogsChoices
-			? [
-					{
-						label: 'Within 30 seconds',
-						computeMinMax: () => computeMinMaxInc(30 * 1000)
-					},
-					{
-						label: 'Within last minute',
-						computeMinMax: () => computeMinMaxInc(60 * 1000)
-					}
-				]
-			: []),
-		{
-			label: 'Within last 5 minutes',
-			computeMinMax: () => computeMinMaxInc(5 * 60 * 1000)
-		},
-		{
-			label: 'Within last 30 minutes',
-			computeMinMax: () => computeMinMaxInc(30 * 60 * 1000)
-		},
-		{
-			label: 'Within last 24 hours',
-			computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000)
-		},
-		{
-			label: 'Within last 7 days',
-			computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000)
-		},
-		{
-			label: 'Within last month',
-			computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000)
-		}
-	]
-
-	let manualDates = $derived([
-		{
-			label: loadText ?? `Last ${numberOfLastJobsToFetch} runs`,
-			computeMinMax: () => {
-				return undefined
-			}
-		},
-		...fixedManualDates
-	])
-
-	const dispatch = createEventDispatcher()
-</script>
-
-<Button
-	unifiedSize="md"
-	variant="default"
-	on:click={() => {
-		const ts = computeMinMax()
-		if (ts) {
-			minTs = ts.minTs
-			maxTs = ts.maxTs
-		}
-		dispatch('loadJobs', { minTs, maxTs })
-	}}
-	dropdownItems={[
-		...manualDates.map((d, i) => ({
-			label: d.label,
-			onClick: (e) => {
-				e.preventDefault()
-				selectedManualDate = i
-				const ts = d.computeMinMax()
-				if (ts) {
-					minTs = ts.minTs
-					maxTs = ts.maxTs
-				} else {
-					minTs = null
-					maxTs = null
-				}
-				dispatch('loadJobs')
-			}
-		}))
-	]}
->
-	<div class="flex flex-row items-center gap-2">
-		<RefreshCw size={14} class={loading ? 'animate-spin' : ''} />
-		{manualDates[selectedManualDate].label}
-	</div>
-</Button>
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 10eaf9f2f9..3a14c71111 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -7,10 +7,8 @@
 		truncateHash,
 		truncateRev,
 		isScriptPreview,
-		isJobSelectable,
 		msToReadableTime,
 		isFlowPreview,
-		type RunsSelectionMode,
 		getJobKindIcon
 	} from '$lib/utils'
 	import { Button } from '../common'
@@ -39,7 +37,7 @@
 		containsLabel?: boolean
 		showTag?: boolean
 		activeLabel: string | null
-		selectionMode?: RunsSelectionMode | false
+		manualSelectionMode?: undefined | 'cancel' | 'rerun'
 	}
 
 	let {
@@ -49,7 +47,7 @@
 		containsLabel = false,
 		showTag = true,
 		activeLabel,
-		selectionMode = false
+		manualSelectionMode
 	}: Props = $props()
 
 	let scheduleEditor: ScheduleEditor | undefined = $state(undefined)
@@ -68,36 +66,33 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={twMerge(
-		'hover:bg-surface-hover cursor-pointer',
-		selected ? 'bg-surface-accent-selected' : '',
+		'cursor-pointer',
+		selected ? 'bg-surface-accent-selected' : 'hover:bg-surface-hover',
 		'grid items-center h-full'
 	)}
-	class:grid-runs-table={!containsLabel && !selectionMode && showTag}
-	class:grid-runs-table-with-labels={containsLabel && !selectionMode && showTag}
-	class:grid-runs-table-selection={!containsLabel && selectionMode && showTag}
-	class:grid-runs-table-with-labels-selection={containsLabel && selectionMode && showTag}
-	class:grid-runs-table-no-tag={!containsLabel && !selectionMode && !showTag}
-	class:grid-runs-table-with-labels-no-tag={containsLabel && !selectionMode && !showTag}
-	class:grid-runs-table-selection-no-tag={!containsLabel && selectionMode && !showTag}
-	class:grid-runs-table-with-labels-selection-no-tag={containsLabel && selectionMode && !showTag}
+	class:grid-runs-table={!containsLabel && !manualSelectionMode && showTag}
+	class:grid-runs-table-with-labels={containsLabel && !manualSelectionMode && showTag}
+	class:grid-runs-table-selection={!containsLabel && manualSelectionMode && showTag}
+	class:grid-runs-table-with-labels-selection={containsLabel && manualSelectionMode && showTag}
+	class:grid-runs-table-no-tag={!containsLabel && !manualSelectionMode && !showTag}
+	class:grid-runs-table-with-labels-no-tag={containsLabel && !manualSelectionMode && !showTag}
+	class:grid-runs-table-selection-no-tag={!containsLabel && manualSelectionMode && !showTag}
+	class:grid-runs-table-with-labels-selection-no-tag={containsLabel &&
+		manualSelectionMode &&
+		!showTag}
 	style="width: {containerWidth}px"
-	onclick={() => {
-		if (!selectionMode || isJobSelectable(selectionMode)(job)) {
-			dispatch('select')
-		}
-	}}
+	onclick={() => dispatch('select')}
+	oncontextmenu={(e) => !selected && dispatch('select')}
 >
 	<!-- Selection column (only when in selection mode) -->
-	{#if selectionMode}
-		<div class="flex items-center justify-center">
-			<div class="w-4 h-4">
-				<input type="checkbox" checked={selected} disabled={!isJobSelectable(selectionMode)(job)} />
-			</div>
+	{#if manualSelectionMode}
+		<div class="w-4 h-4 ml-4 pointer-events-none">
+			<input type="checkbox" checked={selected} />
 		</div>
 	{/if}
 
 	<!-- Status -->
-	<div class="flex items-center justify-start pl-2">
+	<div class="flex items-center justify-start pl-4">
 		<JobStatusIcon {job} {isExternal} />
 	</div>
 
diff --git a/frontend/src/lib/components/runs/RunsBatchActionsDropdown.svelte b/frontend/src/lib/components/runs/RunsBatchActionsDropdown.svelte
deleted file mode 100644
index 81892e605a..0000000000
--- a/frontend/src/lib/components/runs/RunsBatchActionsDropdown.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-	import { userStore, superadmin } from '$lib/stores'
-	import { X, Check, ChevronDown, Loader2, SquareMousePointer } from 'lucide-svelte'
-	import { Button } from '../common'
-	import DropdownV2 from '../DropdownV2.svelte'
-	import type { RunsSelectionMode } from '$lib/utils'
-
-	interface Props {
-		isLoading?: boolean
-		selectionCount: number
-		selectionMode: RunsSelectionMode | false
-		small?: boolean
-		onSetSelectionMode: (mode: RunsSelectionMode | false) => void
-		onCancelSelectedJobs: () => void
-		onCancelFilteredJobs: () => void
-		onReRunSelectedJobs: () => void
-		onReRunFilteredJobs: () => void
-	}
-
-	let {
-		isLoading = false,
-		selectionCount,
-		selectionMode,
-		small = false,
-		onSetSelectionMode,
-		onCancelSelectedJobs,
-		onCancelFilteredJobs,
-		onReRunSelectedJobs,
-		onReRunFilteredJobs
-	}: Props = $props()
-
-	function jobCountString(count: number) {
-		return `${count} ${count == 1 ? 'job' : 'jobs'}`
-	}
-</script>
-
-{#if isLoading}
-	<Button size="xs" color="light" disabled>
-		<Loader2 class="animate-spin" size={20} />
-	</Button>
-{:else if selectionMode}
-	<div class="h-8 flex flex-row items-center gap-1">
-		<Button
-			startIcon={{ icon: X }}
-			iconOnly
-			unifiedSize="md"
-			variant="default"
-			on:click={() => onSetSelectionMode(false)}
-		/>
-		{#if selectionMode == 'cancel'}
-			<Button
-				disabled={selectionCount == 0}
-				startIcon={{ icon: Check }}
-				unifiedSize="md"
-				variant="accent"
-				destructive
-				on:click={onCancelSelectedJobs}
-			>
-				Cancel {jobCountString(selectionCount)}
-			</Button>
-		{/if}
-		{#if selectionMode == 're-run'}
-			<Button
-				disabled={selectionCount == 0}
-				startIcon={{ icon: Check }}
-				unifiedSize="md"
-				variant="accent"
-				on:click={onReRunSelectedJobs}
-			>
-				Re-run {jobCountString(selectionCount)}
-			</Button>
-		{/if}
-	</div>
-{:else}
-	<DropdownV2
-		class="w-fit"
-		items={[
-			{
-				displayName: 'Select jobs to cancel',
-				action: () => onSetSelectionMode('cancel')
-			},
-			...($userStore?.is_admin || $superadmin
-				? [{ displayName: 'Cancel all jobs matching filters', action: onCancelFilteredJobs }]
-				: []),
-			{
-				displayName: 'Select jobs to re-run',
-				action: () => onSetSelectionMode('re-run')
-			},
-			...($userStore?.is_admin || $superadmin
-				? [{ displayName: 'Re-run all jobs matching filters', action: onReRunFilteredJobs }]
-				: [])
-		]}
-	>
-		{#snippet buttonReplacement()}
-			<Button
-				nonCaptureEvent
-				variant="default"
-				unifiedSize="md"
-				startIcon={{ icon: SquareMousePointer }}
-				endIcon={{ icon: ChevronDown }}
-			>
-				{#if !small}
-					<span>Batch actions</span>
-				{/if}
-			</Button>
-		{/snippet}
-	</DropdownV2>
-{/if}
diff --git a/frontend/src/lib/components/runs/RunsFilter.svelte b/frontend/src/lib/components/runs/RunsFilter.svelte
deleted file mode 100644
index 89fc83422b..0000000000
--- a/frontend/src/lib/components/runs/RunsFilter.svelte
+++ /dev/null
@@ -1,1036 +0,0 @@
-<script module lang="ts">
-	export const runsFiltersSchema = z.object({
-		path: z.string().nullable().default(null),
-		worker: z.string().nullable().default(null),
-		user: z.string().nullable().default(null),
-		folder: z.string().nullable().default(null),
-		label: z.string().nullable().default(null),
-		concurrency_key: z.string().nullable().default(null),
-		tag: z.string().nullable().default(null),
-		allow_wildcards: z.boolean().default(false),
-		show_future_jobs: z.boolean().default(true),
-		success: z
-			.enum(['running', 'suspended', 'waiting', 'success', 'failure'])
-			.nullable()
-			.default(null),
-		show_skipped: z.boolean().default(false),
-		show_schedules: z.boolean().default(true),
-		min_ts: z.string().nullable().default(null),
-		max_ts: z.string().nullable().default(null),
-		schedule_path: z.string().nullable().default(null),
-		job_kinds: z.string().default('runs'),
-		all_workspaces: z.boolean().default(false),
-		arg: z.string().default(''),
-		result: z.string().default(''),
-		job_trigger_kind: z
-			.string()
-			.transform((s) => s as JobTriggerKind)
-			.nullable()
-			.default(null),
-		per_page: z.number().default(1000)
-	})
-	export type RunsFilters = z.infer<typeof runsFiltersSchema>
-</script>
-
-<script lang="ts">
-	import { Button } from '../common'
-	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
-	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import { CircleAlert, CircleCheck, Hourglass, ListFilterPlus, CirclePlay, X } from 'lucide-svelte'
-	import JsonEditor from '../JsonEditor.svelte'
-	import Toggle from '../Toggle.svelte'
-	import Label from '../Label.svelte'
-	import Section from '../Section.svelte'
-	import { enterpriseLicense, workspaceStore } from '$lib/stores'
-	import { createEventDispatcher } from 'svelte'
-	import ToggleButtonMore from '../common/toggleButton-v2/ToggleButtonMore.svelte'
-	import Popover from '$lib/components/meltComponents/Popover.svelte'
-	import Select from '../select/Select.svelte'
-	import { safeSelectItems } from '../select/utils.svelte'
-	import RunOption from './RunOption.svelte'
-	import DropdownSelect from '../DropdownSelect.svelte'
-	import TooltipV2 from '$lib/components/meltComponents/Tooltip.svelte'
-	import TextInput from '../text_input/TextInput.svelte'
-	import { jobTriggerKinds, triggerDisplayNamesMap } from '../triggers/utils'
-	import type { JobTriggerKind } from '$lib/gen'
-	import { Debounced, watch } from 'runed'
-	import z from 'zod'
-
-	interface Props {
-		// Filters
-		path?: string | null
-		label?: string | null
-		concurrencyKey?: string | null
-		worker?: string | null
-		tag?: string | null
-		success?: 'running' | 'waiting' | 'suspended' | 'queued' | 'success' | 'failure' | null
-		showSkipped?: boolean | undefined
-		argFilter: string
-		argError: string
-		resultFilter: string
-		jobTriggerKind: JobTriggerKind | null
-		resultError: string
-		jobKindsCat: string
-		user?: string | null
-		folder?: string | null
-		mobile?: boolean
-		schedulePath: string | null
-		allowWildcards?: boolean
-		// Autocomplete data
-		paths?: string[]
-		usernames?: string[]
-		folders?: string[]
-		allWorkspaces?: boolean
-		filterBy?:
-			| 'path'
-			| 'user'
-			| 'folder'
-			| 'label'
-			| 'concurrencyKey'
-			| 'worker'
-			| 'tag'
-			| 'schedulePath'
-		small?: boolean
-		calendarSmall?: boolean
-	}
-
-	let {
-		path = $bindable(),
-		label = $bindable(),
-		concurrencyKey = $bindable(),
-		worker = $bindable(),
-		tag = $bindable(),
-		success = $bindable(),
-		showSkipped = $bindable(),
-		argFilter = $bindable(),
-		argError = $bindable(),
-		resultFilter = $bindable(),
-		jobTriggerKind = $bindable(),
-		resultError = $bindable(),
-		jobKindsCat = $bindable(),
-		user = $bindable(),
-		folder = $bindable(),
-		mobile = false,
-		schedulePath = $bindable(),
-		allowWildcards = $bindable(),
-		paths = [],
-		usernames = [],
-		folders = [],
-		allWorkspaces = $bindable(),
-		filterBy = $bindable(),
-		small = false,
-		calendarSmall = false
-	}: Props = $props()
-
-	const dispatch = createEventDispatcher()
-
-	function autosetFilter() {
-		if (path && filterBy !== 'path') {
-			filterBy = 'path'
-		} else if (user && filterBy !== 'user') {
-			filterBy = 'user'
-		} else if (folder && filterBy !== 'folder') {
-			filterBy = 'folder'
-		} else if (label && filterBy !== 'label') {
-			filterBy = 'label'
-		} else if (concurrencyKey && filterBy !== 'concurrencyKey') {
-			filterBy = 'concurrencyKey'
-		} else if (tag && filterBy !== 'tag') {
-			filterBy = 'tag'
-		} else if (schedulePath && filterBy !== 'schedulePath') {
-			filterBy = 'schedulePath'
-		} else if (worker && filterBy !== 'worker') {
-			filterBy = 'worker'
-		}
-	}
-
-	let labelTimeout: ReturnType<typeof setInterval> | undefined = $state()
-	let concurrencyKeyTimeout: ReturnType<typeof setInterval> | undefined = $state(undefined)
-	let tagTimeout: ReturnType<typeof setInterval> | undefined = $state(undefined)
-	let workerTimeout: ReturnType<typeof setInterval> | undefined = $state(undefined)
-
-	let allWorkspacesValue = $state(allWorkspaces ? 'all' : 'admins')
-	let displayedLabel = $derived(label)
-	let displayedConcurrencyKey = $derived(concurrencyKey)
-	let displayedTag = $derived(tag)
-	let displayedSchedule = $derived(schedulePath ?? undefined)
-	let displayedWorker = $derived(worker)
-
-	watch([() => [path, user, folder, label, worker, concurrencyKey, tag, schedulePath]], () => {
-		autosetFilter()
-	})
-
-	let [copyArgFilter, copyResultFilter] = $state([argFilter, resultFilter])
-	let debouncedArgAndResultFilters = new Debounced(() => [copyArgFilter, copyResultFilter], 500)
-	watch(
-		() => debouncedArgAndResultFilters.current,
-		() => {
-			if (!argError) argFilter = copyArgFilter || ''
-			if (!resultError) resultFilter = copyResultFilter || ''
-		}
-	)
-
-	function resetFilter() {
-		path = null
-		user = null
-		folder = null
-		label = null
-		concurrencyKey = null
-		tag = null
-		schedulePath = null
-		worker = null
-	}
-</script>
-
-{#snippet runsTooltip()}
-	<TooltipV2 placement="right">
-		{#snippet text()}
-			'Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they
-			start), they have been triggered through the UI, a schedule or webhook'
-		{/snippet}
-	</TooltipV2>
-{/snippet}
-{#snippet previewsTooltip()}
-	<TooltipV2 placement="right">
-		{#snippet text()}
-			'Previews are jobs that have been started in the editor as "Tests"'
-		{/snippet}
-	</TooltipV2>
-{/snippet}
-{#snippet dependenciesTooltip()}
-	<TooltipV2 placement="right">
-		{#snippet text()}
-			'Deploying a script, flow or an app launch a dependency job that creates and then attaches the
-			lockfile to the deployed item. This mechanism ensures that logic is always executed with the
-			exact same direct and indirect dependencies.'
-		{/snippet}
-	</TooltipV2>
-{/snippet}
-{#snippet syncTooltip()}
-	<TooltipV2 placement="right">
-		{#snippet text()}
-			'Sync jobs that are triggered on every script deployment to sync the workspace with the Git
-			repository configured in the workspace settings'
-		{/snippet}
-	</TooltipV2>
-{/snippet}
-
-{#if !mobile}
-	{#if $workspaceStore == 'admins'}
-		<RunOption label="Workspaces" for="workspaces">
-			<ToggleButtonGroup
-				bind:selected={allWorkspacesValue}
-				on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
-			>
-				{#snippet children({ item })}
-					<ToggleButton value={'admins'} label="Admins" {item} />
-					<ToggleButton value={'all'} label="All" {item} />
-				{/snippet}
-			</ToggleButtonGroup>
-		</RunOption>
-	{/if}
-	<!-- Filter by -->
-	<div class="flex flex-row gap-2">
-		<RunOption label="Filter by" for="filter-by">
-			<ToggleButtonGroup
-				bind:selected={filterBy}
-				on:selected={(e) => {
-					if (e.detail != filterBy) {
-						resetFilter()
-					}
-				}}
-			>
-				{#snippet children({ item })}
-					<ToggleButton value="path" label="Path" {item} />
-					<ToggleButton value="user" label="User" {item} />
-					<ToggleButton value="folder" label="Folder" {item} />
-					<ToggleButtonMore
-						togglableItems={[
-							{ label: 'Schedule path', value: 'schedulePath' },
-							{ label: 'Concurrency key', value: 'concurrencyKey' },
-							{ label: 'Label', value: 'label' },
-							{ label: 'Tag', value: 'tag' },
-							{ label: 'Worker', value: 'worker' }
-						]}
-						{item}
-						bind:selected={
-							() => filterBy,
-							(v) => {
-								resetFilter()
-								filterBy = v
-							}
-						}
-					/>
-				{/snippet}
-			</ToggleButtonGroup>
-		</RunOption>
-
-		{#if filterBy == 'user'}
-			{#key user}
-				<RunOption label="User" for="user">
-					<Select
-						items={safeSelectItems(usernames)}
-						bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
-						clearable
-						onClear={() => ((user = null), dispatch('reset'))}
-						onCreateItem={(item) => (usernames.push(item), (user = item))}
-						createText="Press enter to use this value"
-						id="user"
-					/>
-				</RunOption>
-			{/key}
-		{:else if filterBy == 'folder'}
-			<RunOption label="Folder" for="folder">
-				{#key folder}
-					<Select
-						items={safeSelectItems(folders)}
-						bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
-						clearable
-						onClear={() => ((folder = null), dispatch('reset'))}
-						id="folder"
-					/>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'path'}
-			<RunOption label="Path" for="path">
-				{#key path}
-					<Select
-						items={safeSelectItems(paths)}
-						bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
-						clearable
-						onClear={() => ((path = null), dispatch('reset'))}
-						onCreateItem={(item) => (paths.push(item), (path = item))}
-						createText="Press enter to use this value"
-						id="path"
-					/>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'label'}
-			<RunOption label="Label" for="label">
-				{#snippet tooltip()}
-					<a
-						href="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#jobs-labels"
-						target="_blank">Job Labels</a
-					> are string values in the array at the result field 'wm_labels' to easily filter them.
-				{/snippet}
-				{#key label}
-					<div class="relative">
-						{#if label}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									label = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-
-						<!-- svelte-ignore a11y_autofocus -->
-						<TextInput
-							inputProps={{
-								autofocus: true,
-								type: 'text',
-								onkeydown: (e) => {
-									if (labelTimeout) {
-										clearTimeout(labelTimeout)
-									}
-
-									labelTimeout = setTimeout(() => {
-										label = displayedLabel
-									}, 1000)
-								}
-							}}
-							bind:value={() => displayedLabel ?? undefined, (v) => (displayedLabel = v ?? null)}
-						/>
-						<div class="absolute -top-4 right-0">
-							<Toggle
-								bind:checked={allowWildcards}
-								size="2xs"
-								options={{ right: '(*)', title: 'allow wildcards (*)' }}
-							></Toggle>
-						</div>
-					</div>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'concurrencyKey'}
-			<RunOption label="Concurrency Key" for="concurrencyKey">
-				{#snippet tooltip()}
-					For concurrency limited jobs, the concurrency key defines a group of jobs that share the
-					same limits.
-					{#if !$enterpriseLicense}
-						Concurrency limits are an EE feature.
-					{/if}
-				{/snippet}
-				{#key concurrencyKey}
-					{#if concurrencyKey}
-						<button
-							class="absolute top-2 right-2 z-50"
-							onclick={() => {
-								concurrencyKey = null
-								dispatch('reset')
-							}}
-						>
-							<X size={14} />
-						</button>
-					{/if}
-
-					<!-- svelte-ignore a11y_autofocus -->
-					<TextInput
-						inputProps={{
-							autofocus: true,
-							type: 'text',
-							onkeydown: (e) => {
-								if (concurrencyKeyTimeout) {
-									clearTimeout(concurrencyKeyTimeout)
-								}
-
-								concurrencyKeyTimeout = setTimeout(() => {
-									concurrencyKey = displayedConcurrencyKey
-								}, 1000)
-							}
-						}}
-						bind:value={
-							() => displayedConcurrencyKey ?? undefined,
-							(v) => (displayedConcurrencyKey = v ?? null)
-						}
-					/>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'tag'}
-			<RunOption label="Tag" for="tag">
-				{#key tag}
-					<div class="relative">
-						{#if tag}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									tag = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-
-						<!-- svelte-ignore a11y_autofocus -->
-						<TextInput
-							inputProps={{
-								autofocus: true,
-								type: 'text',
-								id: 'tag',
-								onkeydown: (e) => {
-									if (tagTimeout) {
-										clearTimeout(tagTimeout)
-									}
-
-									tagTimeout = setTimeout(() => {
-										tag = displayedTag
-									}, 1000)
-								}
-							}}
-							bind:value={() => displayedTag ?? undefined, (v) => (displayedTag = v ?? null)}
-						/>
-						<div class="absolute -top-4 right-0">
-							<Toggle
-								bind:checked={allowWildcards}
-								size="2xs"
-								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
-							></Toggle>
-						</div>
-					</div>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'schedulePath'}
-			<RunOption label="Schedule Path" for="schedulePath">
-				{#key tag}
-					<div class="relative">
-						{#if tag}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									schedulePath = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-
-						<!-- svelte-ignore a11y_autofocus -->
-						<TextInput
-							inputProps={{
-								autofocus: true,
-								type: 'text',
-								onkeydown: (e) => {
-									if (tagTimeout) {
-										clearTimeout(tagTimeout)
-									}
-
-									tagTimeout = setTimeout(() => {
-										schedulePath = displayedSchedule ?? null
-									}, 1000)
-								},
-								id: 'schedulePath'
-							}}
-							bind:value={displayedSchedule}
-						/>
-					</div>
-				{/key}
-			</RunOption>
-		{:else if filterBy === 'worker'}
-			<RunOption label="Worker" for="worker">
-				{#key worker}
-					<div class="relative">
-						{#if worker}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									worker = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-
-						<!-- svelte-ignore a11y_autofocus -->
-						<TextInput
-							inputProps={{
-								autofocus: true,
-								onkeydown: (e) => {
-									if (workerTimeout) {
-										clearTimeout(workerTimeout)
-									}
-
-									workerTimeout = setTimeout(() => {
-										worker = displayedWorker
-									}, 1000)
-								},
-								id: 'worker'
-							}}
-							bind:value={() => displayedWorker ?? undefined, (v) => (displayedWorker = v ?? null)}
-						/>
-						<div class="absolute -top-4 right-0">
-							<Toggle
-								bind:checked={allowWildcards}
-								size="2xs"
-								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
-							></Toggle>
-						</div>
-					</div>
-				{/key}
-			</RunOption>
-		{/if}
-	</div>
-
-	<!-- Kind -->
-	<RunOption label="Kind" for="kind">
-		{#if small && !calendarSmall}
-			<DropdownSelect
-				btnClasses="min-w-24 h-9 bg-surface-secondary font-normal"
-				items={[
-					{
-						displayName: 'All',
-						action: () => {
-							jobKindsCat = 'all'
-						},
-						id: 'all'
-					},
-					{
-						displayName: 'Runs',
-						action: () => {
-							jobKindsCat = 'runs'
-						},
-						id: 'runs',
-						extra: runsTooltip
-					},
-					{
-						displayName: 'Previews',
-						action: () => {
-							jobKindsCat = 'previews'
-						},
-						id: 'previews',
-						extra: previewsTooltip
-					},
-					{
-						displayName: 'Deps',
-						action: () => {
-							jobKindsCat = 'dependencies'
-						},
-						id: 'dependencies',
-						extra: dependenciesTooltip
-					},
-					{
-						displayName: 'Sync',
-						action: () => {
-							jobKindsCat = 'deploymentcallbacks'
-						},
-						id: 'deploymentcallbacks',
-						extra: syncTooltip
-					}
-				]}
-				selected={jobKindsCat}
-			/>
-		{:else}
-			<ToggleButtonGroup bind:selected={jobKindsCat}>
-				{#snippet children({ item })}
-					<ToggleButton value="all" label="All" {item} />
-					<ToggleButton
-						value="runs"
-						label="Runs"
-						showTooltipIcon
-						tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
-						{item}
-					/>
-					<ToggleButton
-						value="dependencies"
-						label="Deps"
-						showTooltipIcon
-						tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
-						{item}
-					/>
-					<ToggleButtonMore
-						togglableItems={[
-							{
-								label: 'Previews',
-								value: 'previews',
-								tooltip: "Previews are jobs that have been started in the editor as 'Tests'"
-							},
-							{
-								label: 'Sync',
-								value: 'deploymentcallbacks',
-								tooltip:
-									'Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings'
-							}
-						]}
-						{item}
-						bind:selected={
-							() => jobKindsCat,
-							(v) => {
-								resetFilter()
-								jobKindsCat = v
-							}
-						}
-					/>
-				{/snippet}
-			</ToggleButtonGroup>
-		{/if}
-	</RunOption>
-	<!-- Status -->
-	<RunOption label="Status" for="status">
-		<ToggleButtonGroup
-			selected={success ?? 'all'}
-			on:selected={({ detail }) => {
-				success = detail === 'all' ? null : detail
-				dispatch('successChange', success)
-			}}
-			id="status"
-		>
-			{#snippet children({ item })}
-				<ToggleButton value={'all'} label="All" {item} />
-				<ToggleButton
-					value={'running'}
-					tooltip="Running"
-					class="whitespace-nowrap"
-					icon={CirclePlay}
-					iconProps={{
-						class:
-							'group-data-[state=on]:text-yellow-600 dark:group-data-[state=on]:text-yellow-400'
-					}}
-					{item}
-				/>
-				<ToggleButton
-					value={'success'}
-					tooltip="Success"
-					class="whitespace-nowrap"
-					icon={CircleCheck}
-					iconProps={{
-						class: 'group-data-[state=on]:text-green-500 dark:group-data-[state=on]:text-green-300'
-					}}
-					{item}
-				/>
-				<ToggleButton
-					value={'failure'}
-					tooltip="Failure"
-					class="whitespace-nowrap"
-					icon={CircleAlert}
-					iconProps={{
-						class: 'group-data-[state=on]:text-red-500 dark:group-data-[state=on]:text-red-300'
-					}}
-					{item}
-				/>
-				{#if success == 'waiting'}
-					<ToggleButton
-						value={'waiting'}
-						tooltip="Waiting"
-						class="whitespace-nowrap"
-						icon={Hourglass}
-						selectedColor="blue"
-						{item}
-					/>
-				{:else if success == 'suspended'}
-					<ToggleButton
-						value={'suspended'}
-						tooltip="Suspended"
-						class="whitespace-nowrap"
-						icon={Hourglass}
-						selectedColor="purple"
-						{item}
-					/>
-				{/if}
-			{/snippet}
-		</ToggleButtonGroup>
-	</RunOption>
-{/if}
-
-<RunOption label="_" for="more-filters" noLabel>
-	<Popover
-		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-		contentClasses="p-4"
-		closeButton
-		usePointerDownOutside
-	>
-		{#snippet trigger()}
-			<Button
-				variant="default"
-				unifiedSize="md"
-				nonCaptureEvent={true}
-				startIcon={{ icon: ListFilterPlus }}
-				iconOnly
-			></Button>
-		{/snippet}
-
-		{#snippet content()}
-			<Section label="Filters">
-				<div class="w-102 flex flex-col gap-6">
-					{#if mobile}
-						{#if $workspaceStore == 'admins'}
-							<Label label="Workspaces">
-								<ToggleButtonGroup
-									bind:selected={allWorkspacesValue}
-									on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
-								>
-									{#snippet children({ item })}
-										<ToggleButton value={'admins'} label="Admins" {item} />
-										<ToggleButton value={'all'} label="All" {item} />
-									{/snippet}
-								</ToggleButtonGroup>
-							</Label>
-						{/if}
-						<Label label="Filter by">
-							<ToggleButtonGroup
-								bind:selected={filterBy}
-								on:selected={(e) => {
-									if (e.detail != filterBy) {
-										path = null
-										user = null
-										folder = null
-										label = null
-										concurrencyKey = null
-										tag = null
-										schedulePath = null
-									}
-								}}
-							>
-								{#snippet children({ item })}
-									<ToggleButton value="path" label="Path" {item} />
-									<ToggleButton value="user" label="User" {item} />
-									<ToggleButton value="folder" label="Folder" {item} />
-									<ToggleButton value="schedulePath" label="Schedule" {item} />
-									<ToggleButton value="concurrencyKey" label="Concurrency" {item} />
-									<ToggleButton value="tag" label="Tag" {item} />
-									<ToggleButton value="label" label="Label" {item} />
-									<ToggleButton value="worker" label="Worker" {item} />
-								{/snippet}
-							</ToggleButtonGroup>
-						</Label>
-
-						{#if filterBy == 'user'}
-							<Label label="User">
-								<Select
-									disablePortal
-									items={safeSelectItems(usernames)}
-									bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
-									clearable
-									onClear={() => ((user = null), dispatch('reset'))}
-									inputClass="!h-[32px]"
-								/>
-							</Label>
-						{:else if filterBy == 'folder'}
-							<Label label="Folder">
-								<Select
-									disablePortal
-									items={safeSelectItems(folders)}
-									bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
-									clearable
-									onClear={() => ((folder = null), dispatch('reset'))}
-									inputClass="!h-[32px]"
-								/>
-							</Label>
-						{:else if filterBy === 'path'}
-							<Label label="Path">
-								<Select
-									disablePortal
-									items={safeSelectItems(paths)}
-									bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
-									clearable
-									onClear={() => ((path = null), dispatch('reset'))}
-									inputClass="!h-[32px]"
-								/>
-							</Label>
-						{:else if filterBy === 'tag'}
-							{#key tag}
-								<Label label="Tag">
-									<div class="relative w-full">
-										{#if tag}
-											<button
-												class="absolute top-2 right-2 z-50"
-												onclick={() => {
-													tag = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{/if}
-
-										<!-- svelte-ignore a11y_autofocus -->
-										<input
-											autofocus
-											type="text"
-											class="!h-[32px] py-1 !text-xs !w-80"
-											bind:value={displayedTag}
-											onkeydown={(e) => {
-												if (tagTimeout) {
-													clearTimeout(tagTimeout)
-												}
-
-												tagTimeout = setTimeout(() => {
-													tag = displayedTag
-													console.log(tag)
-												}, 1000)
-											}}
-										/>
-									</div></Label
-								>
-							{/key}
-						{:else if filterBy === 'label'}
-							{#key label}
-								<Label label="Label">
-									<div class="relative w-full">
-										{#if label}
-											<button
-												class="absolute top-2 right-2 z-50"
-												onclick={() => {
-													label = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{/if}
-
-										<!-- svelte-ignore a11y_autofocus -->
-										<input
-											autofocus
-											type="text"
-											class="!h-[32px] py-1 !text-xs !w-80"
-											bind:value={displayedLabel}
-											onkeydown={(e) => {
-												if (labelTimeout) {
-													clearTimeout(labelTimeout)
-												}
-
-												labelTimeout = setTimeout(() => {
-													label = displayedLabel
-												}, 1000)
-											}}
-										/>
-									</div></Label
-								>
-							{/key}
-						{:else if filterBy === 'concurrencyKey'}
-							{#key concurrencyKey}
-								<Label label="Concurrency key">
-									<div class="relative w-full">
-										{#if concurrencyKey}
-											<button
-												class="absolute top-2 right-2 z-50"
-												onclick={() => {
-													concurrencyKey = null
-													// dispatch('reset')
-												}}
-											>
-												<X size={14} />
-											</button>
-										{/if}
-
-										<!-- svelte-ignore a11y_autofocus -->
-										<input
-											autofocus
-											type="text"
-											class="!h-[32px] py-1 !text-xs !w-80"
-											bind:value={displayedConcurrencyKey}
-											onkeydown={(e) => {
-												if (concurrencyKeyTimeout) {
-													clearTimeout(concurrencyKeyTimeout)
-												}
-
-												concurrencyKeyTimeout = setTimeout(() => {
-													concurrencyKey = displayedConcurrencyKey
-												}, 1000)
-											}}
-										/>
-									</div>
-								</Label>
-							{/key}
-						{:else if filterBy === 'worker'}
-							{#key worker}
-								<Label label="worker">
-									<div class="relative w-full">
-										{#if concurrencyKey}
-											<button
-												class="absolute top-2 right-2 z-50"
-												onclick={() => {
-													worker = null
-													// dispatch('reset')
-												}}
-											>
-												<X size={14} />
-											</button>
-										{/if}
-
-										<!-- svelte-ignore a11y_autofocus -->
-										<input
-											autofocus
-											type="text"
-											class="!h-[32px] py-1 !text-xs !w-80"
-											bind:value={displayedWorker}
-											onkeydown={(e) => {
-												if (workerTimeout) {
-													clearTimeout(workerTimeout)
-												}
-
-												workerTimeout = setTimeout(() => {
-													worker = displayedWorker
-												}, 1000)
-											}}
-										/>
-									</div>
-								</Label>
-							{/key}
-						{/if}
-
-						{#if filterBy === 'tag' || filterBy === 'label' || filterBy === 'worker'}
-							<Toggle
-								bind:checked={allowWildcards}
-								size="2xs"
-								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
-							></Toggle>
-						{/if}
-						<Label label="Kind">
-							<ToggleButtonGroup bind:selected={jobKindsCat}>
-								{#snippet children({ item })}
-									<ToggleButton value="all" label="All" {item} />
-									<ToggleButton
-										value="runs"
-										label="Runs"
-										showTooltipIcon
-										tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
-										{item}
-									/>
-									<ToggleButton
-										value="previews"
-										label="Previews"
-										showTooltipIcon
-										tooltip="Previews are jobs that have been started in the editor as 'Tests'"
-										{item}
-									/>
-									<ToggleButton
-										value="dependencies"
-										label="Deps"
-										showTooltipIcon
-										tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
-										{item}
-									/>
-									<ToggleButton
-										value="deploymentcallbacks"
-										label="Sync"
-										showTooltipIcon
-										tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
-										{item}
-									/>
-								{/snippet}
-							</ToggleButtonGroup>
-						</Label>
-
-						<Label label="Status">
-							<ToggleButtonGroup
-								selected={success ?? 'all'}
-								on:selected={({ detail }) => (success = detail === 'all' ? null : detail)}
-							>
-								{#snippet children({ item })}
-									<ToggleButton value={'all'} label="All" {item} />
-									<ToggleButton
-										value={'running'}
-										label="Running"
-										class="whitespace-nowrap"
-										{item}
-									/>
-									<ToggleButton
-										value={'success'}
-										label="Success"
-										class="whitespace-nowrap"
-										{item}
-									/>
-									<ToggleButton
-										value={'failure'}
-										label="Failure"
-										class="whitespace-nowrap"
-										{item}
-									/>
-								{/snippet}
-							</ToggleButtonGroup>
-						</Label>
-					{/if}
-
-					<Label label="Show skipped flows">
-						<span class="text-2xs text-secondary">
-							Skipped flows are flows that did an early break
-						</span>
-						<div class="flex flex-row gap-1 items-center">
-							<Toggle size="sm" bind:checked={showSkipped} />
-						</div>
-					</Label>
-
-					<Label label="Filter by trigger kind">
-						<span class="text-2xs text-secondary">
-							{`Filter by what kind of trigger started the run.`}
-						</span>
-						<Select
-							items={jobTriggerKinds.map((value) => ({
-								label: triggerDisplayNamesMap[value],
-								value
-							}))}
-							bind:value={() => jobTriggerKind ?? undefined, (v) => (jobTriggerKind = v ?? null)}
-							clearable
-						/>
-					</Label>
-
-					<Label label="Filter by args">
-						<span class="text-2xs text-secondary">
-							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
-						</span>
-						<JsonEditor bind:error={argError} bind:code={copyArgFilter} />
-					</Label>
-					<Label label="Filter by result">
-						<span class="text-2xs text-secondary">
-							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
-						</span>
-						<JsonEditor bind:error={resultError} bind:code={copyResultFilter} />
-					</Label>
-				</div>
-			</Section>
-		{/snippet}
-	</Popover>
-</RunOption>
diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte
index 5548bbb9d1..07486a4b16 100644
--- a/frontend/src/lib/components/runs/RunsTable.svelte
+++ b/frontend/src/lib/components/runs/RunsTable.svelte
@@ -2,13 +2,25 @@
 	import type { Job } from '$lib/gen'
 	import RunRow from './RunRow.svelte'
 	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list'
-	import { createEventDispatcher, onMount } from 'svelte'
+	import { createEventDispatcher } from 'svelte'
 	import Tooltip from '../Tooltip.svelte'
-	import { AlertTriangle } from 'lucide-svelte'
+	import {
+		AlertTriangle,
+		CircleXIcon,
+		Code2Icon,
+		ExternalLinkIcon,
+		RefreshCwIcon
+	} from 'lucide-svelte'
 	import Popover from '../Popover.svelte'
 	import { workspaceStore } from '$lib/stores'
 	import './runs-grid.css'
-	import type { RunsSelectionMode } from '$lib/utils'
+	import { useKeyPressed } from '$lib/svelte5Utils.svelte'
+	import { twMerge } from 'tailwind-merge'
+	import RightClickPopover from '../RightClickPopover.svelte'
+	import DropdownMenu, { type Props as DropdownMenuProps } from '../DropdownMenu.svelte'
+	import { clickOutside, isJobCancelable, isJobReRunnable } from '$lib/utils'
+	import { goto } from '$lib/navigation'
+	import BarsStaggered from '../icons/BarsStaggered.svelte'
 
 	interface Props {
 		//import InfiniteLoading from 'svelte-infinite-loading'
@@ -16,13 +28,15 @@
 		externalJobs?: Job[]
 		omittedObscuredJobs: boolean
 		showExternalJobs?: boolean
-		selectionMode?: RunsSelectionMode | false
 		selectedIds?: string[]
 		selectedWorkspace?: string | undefined
 		activeLabel?: string | null
 		// const loadMoreQuantity: number = 100
 		lastFetchWentToEnd?: boolean
 		perPage?: number
+		batchRerunOptionsIsOpen?: boolean
+		manualSelectionMode: undefined | 'cancel' | 'rerun'
+		onCancelJobs: (jobIds: string[]) => void
 	}
 
 	let {
@@ -30,14 +44,44 @@
 		externalJobs = [],
 		omittedObscuredJobs,
 		showExternalJobs = false,
-		selectionMode = false,
 		selectedIds = $bindable([]),
 		selectedWorkspace = $bindable(undefined),
 		activeLabel = null,
 		lastFetchWentToEnd = false,
-		perPage = 1000
+		perPage = 1000,
+		manualSelectionMode,
+		onCancelJobs,
+		batchRerunOptionsIsOpen = $bindable()
 	}: Props = $props()
 
+	let hasClickFocus = $state(false)
+	const keysPressed = useKeyPressed(['Shift', 'Control', 'Meta', 'A', 'ArrowDown', 'ArrowUp'], {
+		onKeyDown(key, e) {
+			if (!hasClickFocus) return
+			if (key === 'A' && (keysPressed.Control || keysPressed.Meta)) {
+				if (batchRerunOptionsIsOpen) return
+				e.preventDefault()
+				e.stopPropagation()
+				selectedIds = flatJobs
+					? flatJobs
+							.filter((jobOrDate) => jobOrDate.type === 'job')
+							.map((jobOrDate) => jobOrDate.job.id)
+					: []
+			} else if ((key === 'ArrowDown' || key === 'ArrowUp') && selectedIds.length === 1) {
+				const idx = flatJobs?.findIndex(
+					(jobOrDate) => jobOrDate.type === 'job' && jobOrDate.job.id === selectedIds[0]
+				)
+				if (idx == undefined) return
+				let nextJob = flatJobs?.[idx + (key === 'ArrowDown' ? 1 : -1)]
+				if (nextJob?.type === 'date') nextJob = flatJobs?.[idx + (key === 'ArrowDown' ? 2 : -2)]
+				if (nextJob?.type !== 'job') return
+				selectedIds = [nextJob.job.id]
+				e.preventDefault()
+			}
+		}
+	})
+	let rightClickPopover: RightClickPopover | undefined = $state(undefined)
+
 	function getTime(job: Job): string | undefined {
 		return job['completed_at'] ?? job['started_at'] ?? job['scheduled_for'] ?? job['created_at']
 	}
@@ -116,7 +160,6 @@
 	}
 
 	let tableHeight: number = $state(0)
-	let headerHeight: number = $state(0)
 	let containerWidth: number = $state(0)
 	// const MAX_ITEMS = perPage
 
@@ -136,22 +179,21 @@
 	}
 	*/
 
-	function jobCountString(jobCount: number | undefined, lastFetchWentToEnd: boolean): string {
+	function jobCountString(
+		jobCount: number | undefined,
+		lastFetchWentToEnd: boolean,
+		hideLabel?: boolean
+	): string {
 		if (jobCount === undefined) {
 			return ''
 		}
 		const jc = jobCount
 		const isTruncated = jc >= perPage && !lastFetchWentToEnd
 
-		return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`
+		if (hideLabel) return `${jc}${isTruncated ? '+' : ''}`
+		else return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`
 	}
 
-	function computeHeight() {
-		tableHeight = document.querySelector('#runs-table-wrapper')!.parentElement?.clientHeight ?? 0
-	}
-	onMount(() => {
-		computeHeight()
-	})
 	const dispatch = createEventDispatcher()
 
 	let scrollToIndex = $state(0)
@@ -193,34 +235,129 @@
 		return nstickyIndices
 	})
 
-	const showTag = $derived(containerWidth > 700)
+	let showTag = $derived(containerWidth > 700)
+	let selectedIdsPossibleActions = $derived.by(() => {
+		const cancellableJobIds: string[] = []
+		const rerunnableJobIds: string[] = []
+		for (const jobId of selectedIds) {
+			const job = flatJobs?.find(
+				(jobOrDate) => jobOrDate.type === 'job' && jobOrDate.job.id === jobId
+			)
+			if (job?.type === 'job') {
+				if (isJobCancelable(job.job)) cancellableJobIds.push(job.job.id)
+				if (isJobReRunnable(job.job)) rerunnableJobIds.push(job.job.id)
+			}
+		}
+		return { cancellableJobIds, rerunnableJobIds }
+	})
+	let hoveredDropdownAction: 'cancel' | 'rerun' | null = $state(null)
+
+	let dropdownActions: DropdownMenuProps['items'] = $derived.by(() => {
+		let rerunnable = selectedIdsPossibleActions.rerunnableJobIds.length
+		let cancellable = selectedIdsPossibleActions.cancellableJobIds.length
+		const actions: DropdownMenuProps['items'] = []
+		if (selectedIds.length === 1) {
+			actions.push({
+				label: 'Show run details',
+				icon: ExternalLinkIcon,
+				onClick: () => goto(`/run/${selectedIds[0]}`)
+			})
+			const job = flatJobs?.find(
+				(jobOrDate) => jobOrDate.type === 'job' && jobOrDate.job.id === selectedIds[0]
+			)
+			if (job?.type === 'job') {
+				if (job.job.job_kind === 'script') {
+					actions.push({
+						label: 'Go to script page',
+						icon: Code2Icon,
+						onClick: () => goto(`/scripts/get/${job.job.script_hash}`)
+					})
+				}
+				if (job.job.job_kind === 'flow') {
+					actions.push({
+						label: 'Go to flow page',
+						icon: BarsStaggered,
+						onClick: () => goto(`/flows/get/${job.job.script_path}`)
+					})
+				}
+			}
+		}
+		if (rerunnable)
+			actions.push({
+				label: 'Run again',
+				icon: RefreshCwIcon,
+				right: selectedIds.length >= 2 ? `${rerunnable}` : undefined,
+				onClick: () => {
+					selectedIds = selectedIdsPossibleActions.rerunnableJobIds
+					batchRerunOptionsIsOpen = true
+				},
+				onHover: (hover) => (hoveredDropdownAction = hover ? 'rerun' : null)
+			})
+		if (cancellable)
+			actions.push({
+				label: 'Cancel',
+				icon: CircleXIcon,
+				right: selectedIds.length >= 2 ? `${cancellable}` : undefined,
+				onClick: () => onCancelJobs?.(selectedIdsPossibleActions.cancellableJobIds),
+				onHover: (hover) => (hoveredDropdownAction = hover ? 'cancel' : null)
+			})
+		return actions
+	})
+
+	function jobIsSelectable(job: Job) {
+		if (
+			(rightClickPopover?.isOpen() && hoveredDropdownAction === 'cancel') ||
+			manualSelectionMode === 'cancel'
+		)
+			return isJobCancelable(job)
+		if (
+			(rightClickPopover?.isOpen() && hoveredDropdownAction === 'rerun') ||
+			manualSelectionMode === 'rerun' ||
+			batchRerunOptionsIsOpen
+		)
+			return isJobReRunnable(job)
+		return true
+	}
+
+	let selectableJobs = $derived(jobs?.filter(jobIsSelectable) ?? [])
 </script>
 
-<svelte:window onresize={() => computeHeight()} />
-
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="divide-y h-full border min-w-[650px]"
+	class="divide-y h-full flex flex-col min-w-[650px]"
 	id="runs-table-wrapper"
+	onclick={() => (hasClickFocus = true)}
+	use:clickOutside={{ onClickOutside: () => (hasClickFocus = false) }}
 	bind:clientWidth={containerWidth}
 >
-	<div bind:clientHeight={headerHeight}>
+	<div>
 		<div
-			class="grid bg-surface-secondary sticky top-0 w-full py-2 pr-4"
-			class:grid-runs-table={!containsLabel && !selectionMode && showTag}
-			class:grid-runs-table-with-labels={containsLabel && !selectionMode && showTag}
-			class:grid-runs-table-selection={!containsLabel && selectionMode && showTag}
-			class:grid-runs-table-with-labels-selection={containsLabel && selectionMode && showTag}
-			class:grid-runs-table-no-tag={!containsLabel && !selectionMode && !showTag}
-			class:grid-runs-table-with-labels-no-tag={containsLabel && !selectionMode && !showTag}
-			class:grid-runs-table-selection-no-tag={!containsLabel && selectionMode && !showTag}
+			class="grid sticky top-0 w-full min-h-6 my-2 pr-4 items-end"
+			class:grid-runs-table={!containsLabel && !manualSelectionMode && showTag}
+			class:grid-runs-table-with-labels={containsLabel && !manualSelectionMode && showTag}
+			class:grid-runs-table-selection={!containsLabel && manualSelectionMode && showTag}
+			class:grid-runs-table-with-labels-selection={containsLabel && manualSelectionMode && showTag}
+			class:grid-runs-table-no-tag={!containsLabel && !manualSelectionMode && !showTag}
+			class:grid-runs-table-with-labels-no-tag={containsLabel && !manualSelectionMode && !showTag}
+			class:grid-runs-table-selection-no-tag={!containsLabel && manualSelectionMode && !showTag}
 			class:grid-runs-table-with-labels-selection-no-tag={containsLabel &&
-				selectionMode &&
+				manualSelectionMode &&
 				!showTag}
 		>
-			{#if selectionMode}
-				<div class="text-xs font-semibold pl-4"></div>
+			{#if manualSelectionMode}
+				{@const allSelected = selectedIds.length === selectableJobs?.length}
+				<div class="w-4 h-4 ml-4">
+					<input
+						type="checkbox"
+						bind:checked={
+							() => allSelected,
+							() => (selectedIds = allSelected ? [] : (selectableJobs.map((j) => j.id) ?? []))
+						}
+					/>
+				</div>
 			{/if}
-			<div class="text-2xs px-2 flex flex-row items-center gap-2">
+			<div class="text-2xs px-4 flex flex-row items-center gap-2 leading-3">
 				{#if showExternalJobs && externalJobs.length > 0}
 					<div class="flex flex-row">
 						{jobs
@@ -239,125 +376,186 @@
 						</Popover>
 					</div>
 				{:else}
-					{jobs ? jobCountString(jobs.length, lastFetchWentToEnd) : ''}
+					{@const jobCount = jobs
+						? jobCountString(jobs.length, lastFetchWentToEnd, selectedIds.length >= 2)
+						: ''}
+					{selectedIds.length >= 2 ? `${selectedIds.length}/` : ''}<wbr />
+					{jobCount}
 				{/if}
 			</div>
-			<div class="text-xs font-semibold"></div>
-			<div class="text-xs font-semibold">Duration</div>
-			<div class="text-xs font-semibold">Path</div>
+			<div class="text-xs font-semibold leading-3">Started</div>
+			<div class="text-xs font-semibold leading-3">Duration</div>
+			<div class="text-xs font-semibold leading-3">Path</div>
 			{#if containsLabel}
-				<div class="text-xs font-semibold">Label</div>
+				<div class="text-xs font-semibold leading-3">Label</div>
 			{/if}
-			<div class="text-xs font-semibold">Triggered by</div>
+			<div class="text-xs font-semibold leading-3">Triggered by</div>
 			{#if showTag}
-				<div class="text-xs font-semibold">Tag</div>
+				<div class="text-xs font-semibold leading-3">Tag</div>
 			{/if}
-			<div class=""></div>
+			<div> </div>
 		</div>
 	</div>
-	{#if jobs?.length == 0 && (!showExternalJobs || externalJobs?.length == 0)}
-		<div class="text-xs text-secondary p-8"> No jobs found for the selected filters. </div>
-	{:else}
-		<VirtualList
-			width="100%"
-			height={tableHeight - headerHeight}
-			itemCount={flatJobs?.length ?? 3}
-			itemSize={42}
-			overscanCount={20}
-			{stickyIndices}
-			{scrollToIndex}
-			scrollToAlignment="center"
-		>
-			{#snippet header()}{/snippet}
-			{#snippet item({ index, style })}
-				<div {style} class="w-full">
-					{#if flatJobs}
-						{@const jobOrDate = flatJobs[index]}
-
-						{#if jobOrDate}
-							{#if jobOrDate?.type === 'date'}
-								<div
-									class="bg-surface-secondary py-2 font-semibold text-xs pl-2 h-[42px] flex items-center"
-								>
-									{jobOrDate.date}
-								</div>
+	<div
+		bind:clientHeight={tableHeight}
+		class="relative flex-1 border rounded-t-md overflow-clip bg-surface-tertiary [&>.virtual-list-wrapper::-webkit-scrollbar-track]:bg-surface-tertiary"
+	>
+		{#if jobs?.length == 0 && (!showExternalJobs || externalJobs?.length == 0)}
+			<div class="text-xs text-secondary p-8"> No jobs found for the selected filters. </div>
+		{:else}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="absolute inset-0 -mt-3"
+				oncontextmenu={(e) => {
+					e.preventDefault()
+					rightClickPopover?.open(e)
+				}}
+			>
+				<VirtualList
+					width="100%"
+					height={tableHeight}
+					itemCount={flatJobs?.length ?? 3}
+					itemSize={42}
+					overscanCount={20}
+					{stickyIndices}
+					{scrollToIndex}
+					scrollToAlignment="center"
+				>
+					{#snippet header()}{/snippet}
+					{#snippet item({ index, style })}
+						<div {style} class="w-full bg-surface-tertiary">
+							{#if flatJobs}
+								{@const jobOrDate = flatJobs[index]}
+								{#if jobOrDate}
+									{#if jobOrDate?.type === 'date'}
+										<div
+											class={twMerge(
+												'border-b py-1.5 font-semibold text-xs pl-4 h-[42px] flex items-end bg-surface-tertiary'
+											)}
+										>
+											{jobOrDate.date}
+										</div>
+									{:else}
+										{@const selected =
+											jobOrDate.job.id !== '-' && selectedIds.includes(jobOrDate.job.id)}
+										{@const nonSelectable = !jobIsSelectable(jobOrDate.job)}
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
+										<div
+											class={twMerge(
+												'flex flex-row items-center h-full w-full select-none transition-opacity',
+												nonSelectable || (rightClickPopover?.isOpen() && !selected)
+													? 'opacity-20'
+													: ''
+											)}
+										>
+											<RunRow
+												{manualSelectionMode}
+												{containsLabel}
+												{showTag}
+												job={jobOrDate.job}
+												{selected}
+												on:select={() => {
+													const jobId = jobOrDate.job.id
+													if (keysPressed.Shift && selectedIds.length > 0) {
+														if (nonSelectable) return
+														const lastSelectedId = selectedIds[selectedIds.length - 1]
+														const lastSelectedIndex = flatJobs?.findIndex(
+															(jobOrDate) =>
+																jobOrDate.type === 'job' && jobOrDate.job.id === lastSelectedId
+														)
+														if (lastSelectedIndex != undefined && flatJobs) {
+															const [start, end] =
+																index < lastSelectedIndex
+																	? [index, lastSelectedIndex]
+																	: [lastSelectedIndex, index]
+															const newSelectedIds = flatJobs
+																.slice(start, end + 1)
+																.filter((jobOrDate) => jobOrDate.type === 'job')
+																.map((jobOrDate) => jobOrDate.job.id)
+															selectedIds = Array.from(new Set([...selectedIds, ...newSelectedIds]))
+														}
+													} else if (
+														keysPressed.Control ||
+														keysPressed.Meta ||
+														manualSelectionMode
+													) {
+														if (nonSelectable) return
+														if (selectedIds.includes(jobOrDate.job.id)) {
+															selectedIds = selectedIds.filter((id) => id != jobId)
+														} else {
+															selectedIds.push(jobId)
+															selectedIds = selectedIds
+														}
+													} else {
+														if (batchRerunOptionsIsOpen) batchRerunOptionsIsOpen = false
+														if (
+															selectedIds.length !== 1 ||
+															selectedIds[0] !== jobOrDate.job.id ||
+															selectedWorkspace !== jobOrDate.job.workspace_id
+														) {
+															selectedWorkspace = jobOrDate.job.workspace_id
+															selectedIds = [jobOrDate.job.id]
+															dispatch('select')
+														} else {
+															selectedIds = []
+															selectedWorkspace = undefined
+															dispatch('select')
+														}
+													}
+												}}
+												{activeLabel}
+												on:filterByLabel
+												on:filterByPath
+												on:filterByUser
+												on:filterByFolder
+												on:filterByConcurrencyKey
+												on:filterBySchedule
+												on:filterByWorker
+												{containerWidth}
+											/>
+										</div>
+									{/if}
+								{:else}
+									{JSON.stringify(jobOrDate)}
+								{/if}
 							{:else}
 								<div class="flex flex-row items-center h-full w-full">
-									<RunRow
-										{containsLabel}
-										{showTag}
-										job={jobOrDate.job}
-										selected={jobOrDate.job.id !== '-' && selectedIds.includes(jobOrDate.job.id)}
-										{selectionMode}
-										on:select={() => {
-											const jobId = jobOrDate.job.id
-											if (selectionMode) {
-												if (selectedIds.includes(jobOrDate.job.id)) {
-													selectedIds = selectedIds.filter((id) => id != jobId)
-												} else {
-													selectedIds.push(jobId)
-													selectedIds = selectedIds
-												}
-											} else {
-												if (
-													JSON.stringify(selectedIds) !== JSON.stringify([jobOrDate.job.id]) ||
-													selectedWorkspace !== jobOrDate.job.workspace_id
-												) {
-													selectedWorkspace = jobOrDate.job.workspace_id
-													selectedIds = [jobOrDate.job.id]
-													dispatch('select')
-												} else {
-													selectedIds = []
-													selectedWorkspace = undefined
-													dispatch('select')
-												}
-											}
-										}}
-										{activeLabel}
-										on:filterByLabel
-										on:filterByPath
-										on:filterByUser
-										on:filterByFolder
-										on:filterByConcurrencyKey
-										on:filterBySchedule
-										on:filterByWorker
-										{containerWidth}
-									/>
+									<div class="w-1/12 text-2xs">...</div>
+									<div class="w-4/12 text-xs">...</div>
+									<div class="w-4/12 text-xs">...</div>
+									<div class="w-3/12 text-xs">...</div>
 								</div>
 							{/if}
-						{:else}
-							{JSON.stringify(jobOrDate)}
-						{/if}
-					{:else}
-						<div class="flex flex-row items-center h-full w-full">
-							<div class="w-1/12 text-2xs">...</div>
-							<div class="w-4/12 text-xs">...</div>
-							<div class="w-4/12 text-xs">...</div>
-							<div class="w-3/12 text-xs">...</div>
 						</div>
-					{/if}
-				</div>
-			{/snippet}
-			{#snippet footer()}
-				<div
-					>{#if !lastFetchWentToEnd && jobs && jobs.length >= perPage}
-						<button
-							class="text-xs text-accent text-center w-full pb-2"
-							onclick={() => {
-								dispatch('loadExtra')
-							}}
+					{/snippet}
+					{#snippet footer()}
+						<div
+							>{#if !lastFetchWentToEnd && jobs && jobs.length >= perPage}
+								<button
+									class="text-xs text-accent text-center w-full pb-2"
+									onclick={() => {
+										dispatch('loadExtra')
+									}}
+								>
+									Load next {perPage} jobs
+								</button>
+							{/if}</div
 						>
-							Load next {perPage} jobs
-						</button>
-					{/if}</div
-				>
-			{/snippet}
-		</VirtualList>
-	{/if}
+					{/snippet}
+				</VirtualList>
+			</div>
+		{/if}
+	</div>
 </div>
 
+<RightClickPopover bind:this={rightClickPopover}>
+	<DropdownMenu closeCallback={() => rightClickPopover?.close()} items={dropdownActions} />
+</RightClickPopover>
+
 <style>
-	:global(.virtual-list-wrapper:hover::-webkit-scrollbar) {
+	:global(.virtual-list-wrapper::-webkit-scrollbar) {
 		width: 8px !important;
 		height: 8px !important;
 	}
diff --git a/frontend/src/lib/components/runs/TimeframeSelect.svelte b/frontend/src/lib/components/runs/TimeframeSelect.svelte
new file mode 100644
index 0000000000..feb223f213
--- /dev/null
+++ b/frontend/src/lib/components/runs/TimeframeSelect.svelte
@@ -0,0 +1,235 @@
+<script module lang="ts">
+	function computeMinMaxInc(inc: number) {
+		let minTs = new Date(new Date().getTime() - inc).toISOString()
+		let maxTs = new Date().toISOString()
+		return { minTs, maxTs }
+	}
+
+	export type Timeframe =
+		| {
+				label: string
+				computeMinMax: () => { minTs: string | null; maxTs: string | null }
+				type: 'dynamic'
+		  }
+		| {
+				label: string
+				computeMinMax: () => { minTs: string | null; maxTs: string | null }
+				minTs: string | null
+				maxTs: string | null
+				type: 'manual'
+		  }
+
+	export function buildManualTimeframe(minTs: string | null, maxTs: string | null): Timeframe {
+		return {
+			label: formatDateRange(minTs ?? undefined, maxTs ?? undefined),
+			minTs,
+			maxTs,
+			type: 'manual',
+			computeMinMax: () => ({ minTs, maxTs })
+		}
+	}
+
+	export const serviceLogsTimeframes: Timeframe[] = [
+		{ label: '1000 last service logs', computeMinMax: () => ({ minTs: null, maxTs: null }) },
+		{ label: 'Within last 5 minutes', computeMinMax: () => computeMinMaxInc(5 * 60 * 1000) },
+		{ label: 'Within last 30 minutes', computeMinMax: () => computeMinMaxInc(30 * 60 * 1000) },
+		{ label: 'Within last 24 hours', computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000) },
+		{ label: 'Within last 7 days', computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000) },
+		{ label: 'Within last month', computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000) }
+	].map((item) => ({ ...item, type: 'dynamic' }))
+
+	export const runsTimeframes: Timeframe[] = [
+		{ label: 'Latest runs', computeMinMax: () => ({ minTs: null, maxTs: null }) },
+		{ label: 'Within 30 seconds', computeMinMax: () => computeMinMaxInc(30 * 1000) },
+		{ label: 'Within last minute', computeMinMax: () => computeMinMaxInc(60 * 1000) },
+		{ label: 'Within last 5 minutes', computeMinMax: () => computeMinMaxInc(5 * 60 * 1000) },
+		{ label: 'Within last 30 minutes', computeMinMax: () => computeMinMaxInc(30 * 60 * 1000) },
+		{ label: 'Within last 24 hours', computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000) },
+		{ label: 'Within last 7 days', computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000) },
+		{ label: 'Within last month', computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000) }
+	].map((item) => ({ ...item, type: 'dynamic' }))
+
+	export function useUrlSyncedTimeframe(timeframes: Timeframe[]) {
+		let obj = $state({ timeframe: timeframes[0] })
+		let timeframe = $derived(obj.timeframe)
+		watch(
+			() => [page, timeframe],
+			() => {
+				const url = new URL(page.url)
+
+				if (timeframe.type === 'manual' && timeframe.minTs)
+					url.searchParams.set('min_ts', timeframe.minTs)
+				else url.searchParams.delete('min_ts')
+
+				if (timeframe.type === 'manual' && timeframe.maxTs)
+					url.searchParams.set('max_ts', timeframe.maxTs)
+				else url.searchParams.delete('max_ts')
+
+				if (timeframe.type === 'dynamic' && timeframe.label !== timeframes[0].label)
+					url.searchParams.set('timeframe', timeframe.label)
+				else url.searchParams.delete('timeframe')
+
+				history.replaceState(null, '', url)
+			}
+		)
+
+		if (page.url.searchParams.get('min_ts') || page.url.searchParams.get('max_ts')) {
+			obj.timeframe = buildManualTimeframe(
+				page.url.searchParams.get('min_ts') || null,
+				page.url.searchParams.get('max_ts') || null
+			)
+		} else {
+			const tfLabel = page.url.searchParams.get('timeframe')
+			const tf = timeframes.find((tf) => tf.label === tfLabel)
+			if (tf) obj.timeframe = { ...tf }
+		}
+
+		return obj
+	}
+
+	export function useSyncedTimeframe(
+		timeframes: Timeframe[],
+		getter: () => { minTs?: string | null; maxTs?: string | null; timeframe?: string | null },
+		setter: (v: { minTs?: string | null; maxTs?: string | null; timeframe?: string | null }) => void
+	) {
+		const val = $derived.by(() => {
+			const v = getter()
+			if (v.minTs || v.maxTs) {
+				return buildManualTimeframe(v.minTs ?? null, v.maxTs ?? null)
+			} else if (v.timeframe) {
+				const tf = timeframes.find((tf) => tf.label === v.timeframe)
+				if (tf) return { ...tf }
+			}
+			return timeframes[0]
+		})
+		return {
+			get val() {
+				return val
+			},
+			set val(v: Timeframe) {
+				if (v.type === 'manual') {
+					setter({ minTs: v.minTs, maxTs: v.maxTs, timeframe: null })
+				} else {
+					setter({ minTs: null, maxTs: null, timeframe: v.label })
+				}
+			}
+		}
+	}
+</script>
+
+<script lang="ts">
+	import { CalendarIcon, RefreshCw } from 'lucide-svelte'
+	import { Button } from '../common'
+	import Popover from '../meltComponents/Popover.svelte'
+	import { formatDateRange } from '$lib/utils'
+	import { watch } from 'runed'
+	import { page } from '$app/state'
+	import InlineCalendarInput, {
+		fromCalendarDate,
+		toCalendarDate
+	} from '../common/InlineCalendarInput.svelte'
+
+	interface Props {
+		loading?: boolean
+		items: Timeframe[]
+		value: Timeframe
+		wrapperClasses?: string
+		onClick?: () => void
+	}
+
+	let { loading = false, onClick, items, value = $bindable(), wrapperClasses }: Props = $props()
+
+	let isOpen = $state(false)
+
+	function onManualInput(input: { minTs?: string | null; maxTs?: string | null }) {
+		if (value.type !== 'manual')
+			value = buildManualTimeframe(input.minTs ?? null, input.maxTs ?? null)
+		else {
+			value = buildManualTimeframe(
+				'minTs' in input ? (input.minTs ?? null) : value.minTs,
+				'maxTs' in input ? (input.maxTs ?? null) : value.maxTs
+			)
+		}
+		if (value.type == 'manual' && value.minTs == null && value.maxTs == null) {
+			value = { ...items[0] }
+		}
+	}
+</script>
+
+<div class="relative flex {wrapperClasses}">
+	<Button
+		unifiedSize="md"
+		wrapperClasses="flex-1"
+		btnClasses="!rounded-r-none whitespace-nowrap"
+		onClick={() => onClick?.()}
+	>
+		<div class="flex flex-row items-center gap-2">
+			<RefreshCw size={14} class={loading ? 'animate-spin' : ''} />
+			{value.label}
+		</div>
+	</Button>
+	{#if value.type === 'manual'}
+		<Button
+			btnClasses="!rounded-none border-l-0"
+			unifiedSize="md"
+			onClick={() => (value = { ...items[0] })}
+		>
+			Reset
+		</Button>
+	{/if}
+	<Popover enableFlyTransition bind:isOpen>
+		{#snippet trigger()}
+			<Button
+				unifiedSize="md"
+				iconOnly
+				btnClasses="!rounded-l-none border-l-0"
+				endIcon={{ icon: CalendarIcon }}
+			/>
+		{/snippet}
+		{#snippet content()}
+			{@const range = {
+				end: toCalendarDate(
+					value.type === 'manual' && value.maxTs ? new Date(value.maxTs) : undefined
+				),
+				start: toCalendarDate(
+					value.type === 'manual' && value.minTs ? new Date(value.minTs) : undefined
+				)
+			}}
+			<div class="flex divide-x">
+				<div class="flex flex-col p-2">
+					{#each items as item}
+						<Button
+							onClick={() => (value = { ...item })}
+							variant="subtle"
+							unifiedSize="md"
+							selected={value.label === item.label}
+							btnClasses="justify-start text-nowrap"
+						>
+							{item.label}
+						</Button>
+					{/each}
+				</div>
+				<InlineCalendarInput
+					class="p-4 max-w-[18rem]"
+					infiniteRange
+					mode="range"
+					onClickBehavior="set-start"
+					bind:value={
+						() => range,
+						(v) => onManualInput({ minTs: fromCalendarDate(v.start)?.toISOString() ?? null })
+					}
+				/>
+				<InlineCalendarInput
+					class="p-4 max-w-[18rem]"
+					infiniteRange
+					mode="range"
+					onClickBehavior="set-end"
+					bind:value={
+						() => range,
+						(v) => onManualInput({ maxTs: fromCalendarDate(v.end)?.toISOString() ?? null })
+					}
+				/>
+			</div>
+		{/snippet}
+	</Popover>
+</div>
diff --git a/frontend/src/lib/components/runs/runsFilter.ts b/frontend/src/lib/components/runs/runsFilter.ts
new file mode 100644
index 0000000000..ace021abed
--- /dev/null
+++ b/frontend/src/lib/components/runs/runsFilter.ts
@@ -0,0 +1,221 @@
+import type { JobTriggerKind } from '$lib/gen'
+import {
+	Braces,
+	Calendar,
+	Clock,
+	ServerCog,
+	FileCode,
+	FolderIcon,
+	Hash,
+	ListFilter,
+	Lock,
+	Tag,
+	UserIcon,
+	Zap,
+	CirclePlayIcon
+} from 'lucide-svelte'
+import { triggerDisplayNamesMap } from '../triggers/utils'
+import type { FilterInstanceRec, FilterSchemaRec } from '../FilterSearchbar.svelte'
+
+export function buildRunsFilterSearchbarSchema({
+	paths,
+	usernames,
+	folders,
+	jobTriggerKinds,
+	isSuperAdmin
+}: {
+	paths: string[]
+	usernames: string[]
+	folders: string[]
+	jobTriggerKinds: JobTriggerKind[]
+	isSuperAdmin: boolean
+}) {
+	return {
+		min_ts: {
+			type: 'date' as const,
+			label: 'From',
+			icon: Calendar,
+			description: 'Only include jobs that completed after this date',
+			mode: 'start',
+			otherField: 'max_ts'
+		},
+		max_ts: {
+			type: 'date' as const,
+			label: 'To',
+			icon: Calendar,
+			description: 'Only include jobs that completed before this date',
+			mode: 'end',
+			otherField: 'min_ts'
+		},
+		path: {
+			type: 'oneof' as const,
+			options: paths.map((s) => ({ label: s, value: s })),
+			allowCustomValue: true,
+			allowNegative: true,
+			allowMultiple: true,
+			label: 'Path',
+			icon: FileCode,
+			description: 'Filter by script or flow path'
+		},
+		user: {
+			type: 'oneof' as const,
+			options: usernames.map((s) => ({ label: s, value: s })),
+			allowCustomValue: true,
+			allowNegative: true,
+			allowMultiple: true,
+			label: 'User',
+			icon: UserIcon,
+			description: 'Filter by user who created the job'
+		},
+		folder: {
+			type: 'oneof' as const,
+			options: folders.map((s) => ({ label: s, value: s })),
+			allowCustomValue: true,
+			allowNegative: true,
+			allowMultiple: true,
+			label: 'Folder',
+			icon: FolderIcon,
+			description: 'Filter by folder containing the script or flow'
+		},
+		label: {
+			type: 'string' as const,
+			allowMultiple: true,
+			label: 'Label',
+			icon: Tag,
+			description: 'Filter by custom label attached to jobs'
+		},
+		tag: {
+			type: 'string' as const,
+			allowMultiple: true,
+			label: 'Tag',
+			icon: Hash,
+			description: 'Filter by worker tag'
+		},
+		worker: {
+			type: 'string' as const,
+			allowMultiple: true,
+			label: 'Worker',
+			icon: ServerCog,
+			description: 'Filter by specific worker instance'
+		},
+		schedule_path: {
+			type: 'string' as const,
+			label: 'Schedule path',
+			icon: Clock,
+			description: 'Filter by schedule that triggered the job'
+		},
+		concurrency_key: {
+			type: 'string' as const,
+			label: 'Concurrency key',
+			icon: Lock,
+			description: 'Filter by concurrency limit key'
+		},
+		job_kinds: {
+			type: 'oneof' as const,
+			options: [
+				{ label: 'All', value: 'all' as const },
+				{
+					label: 'Runs (default)',
+					value: 'runs' as const,
+					description:
+						'Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook'
+				},
+				{
+					label: 'Dependencies',
+					value: 'dependencies' as const,
+					description:
+						'Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies.'
+				},
+				{
+					label: 'Previews',
+					value: 'previews' as const,
+					description: 'Previews are jobs that have been started in the editor as "Tests"'
+				},
+				{
+					label: 'Sync',
+					value: 'deploymentcallbacks' as const,
+					description:
+						'Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings'
+				}
+			],
+			label: 'Job kinds',
+			icon: ListFilter,
+			description: 'Filter by job category'
+		},
+		status: {
+			type: 'oneof' as const,
+			options: [
+				{ label: 'All (default)', value: 'all' as const },
+				{ label: 'Running', value: 'running' as const },
+				{ label: 'Success', value: 'success' as const },
+				{ label: 'Failure', value: 'failure' as const },
+				{ label: 'Waiting', value: 'waiting' as const },
+				{ label: 'Suspended', value: 'suspended' as const }
+			],
+			label: 'Status',
+			icon: CirclePlayIcon,
+			description: 'Filter by job execution status'
+		},
+		show_skipped: {
+			type: 'boolean' as const,
+			label: 'Show skipped',
+			description: 'Include skipped flow steps'
+		},
+		job_trigger_kind: {
+			type: 'oneof' as const,
+			label: 'Trigger kind',
+			icon: Zap,
+			options: jobTriggerKinds.map((value) => ({
+				label: triggerDisplayNamesMap[value],
+				value
+			})),
+			allowNegative: true,
+			allowMultiple: true,
+			description: 'Filter by how the job was triggered'
+		},
+		arg: {
+			type: 'string' as const,
+			format: 'json' as const,
+			label: 'Args',
+			icon: Braces,
+			description: 'Filter by job arguments (JSON format)'
+		},
+		result: {
+			type: 'string' as const,
+			format: 'json' as const,
+			label: 'Result',
+			icon: Braces,
+			description: 'Filter by job result (JSON format)'
+		},
+		show_future_jobs: {
+			type: 'boolean' as const,
+			label: 'Show future jobs (Default: true)',
+			description: 'Include jobs that are planned later'
+		},
+		...(isSuperAdmin && {
+			all_workspaces: {
+				type: 'boolean' as const,
+				label: 'All workspaces',
+				description: 'Show jobs of all workspaces (superadmin only)'
+			}
+		})
+	} satisfies FilterSchemaRec
+}
+
+export type RunsFilterSearchbarSchema = ReturnType<typeof buildRunsFilterSearchbarSchema>
+export type RunsFilterInstance = FilterInstanceRec<RunsFilterSearchbarSchema>
+
+export function allowWildcards(filters: Partial<RunsFilterInstance> | undefined) {
+	return (
+		filters?.label?.includes('*') ||
+		filters?.worker?.includes('*') ||
+		filters?.tag?.includes('*') ||
+		false
+	)
+}
+
+export const buildRunsFilterPresets = ({ isSuperadmin }: { isSuperadmin: boolean }) => [
+	{ name: 'Hide schedules', value: 'job_trigger_kind:\\ !schedule' },
+	{ name: 'Hide future jobs', value: 'show_future_jobs:\\ false' },
+	...(isSuperadmin ? [{ name: 'All workspaces', value: 'all_workspaces:\\ true' }] : [])
+]
diff --git a/frontend/src/lib/components/runs/useJobsLoader.svelte.ts b/frontend/src/lib/components/runs/useJobsLoader.svelte.ts
index f26f5c6d56..d853149fd9 100644
--- a/frontend/src/lib/components/runs/useJobsLoader.svelte.ts
+++ b/frontend/src/lib/components/runs/useJobsLoader.svelte.ts
@@ -15,7 +15,8 @@ import { sendUserToast } from '$lib/toast'
 import { tweened, type Tweened } from 'svelte/motion'
 import { subtractDaysFromDateString } from '$lib/utils'
 import { CancelablePromiseUtils } from '$lib/cancelable-promise-utils'
-import type { RunsFilters } from './RunsFilter.svelte'
+import type { Timeframe } from './TimeframeSelect.svelte'
+import { allowWildcards as _allowWildcards, type RunsFilterInstance } from './runsFilter'
 
 export function computeJobKinds(jobKindsCat: string | null): string {
 	if (jobKindsCat == 'all') {
@@ -46,7 +47,8 @@ export function computeJobKinds(jobKindsCat: string | null): string {
 
 export interface UseJobLoaderArgs {
 	currentWorkspace: string
-	filters?: Partial<RunsFilters>
+	filters?: Partial<RunsFilterInstance>
+	timeframe?: Timeframe
 	jobKinds?: string
 	autoRefresh?: boolean
 	argError?: string
@@ -54,9 +56,8 @@ export interface UseJobLoaderArgs {
 	refreshRate?: number
 	syncQueuedRunsCount?: boolean
 	skip?: boolean
-	computeMinAndMax?: (() => { minTs: string; maxTs: string | null } | undefined) | undefined
 	lookback?: number
-	onSetMinMaxTs?: (minTs: string | null, maxTs: string | null) => void
+	perPage?: number
 	onSetPerPage?: (perPage: number) => void
 }
 
@@ -71,32 +72,29 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 	let resultError = $derived(_args.resultError ?? '')
 	let refreshRate = $derived(_args.refreshRate ?? 5000)
 	let syncQueuedRunsCount = $derived(_args.syncQueuedRunsCount ?? true)
-	let computeMinAndMax = $derived(_args.computeMinAndMax)
 	let lookback = $derived(_args.lookback ?? 0)
-	let onSetMinMaxTs = $derived(_args.onSetMinMaxTs)
 	let onSetPerPage = $derived(_args.onSetPerPage)
+	let timeframe = $derived(_args?.timeframe)
+	let perPage = $derived(_args?.perPage ?? 1000)
 
 	let label = $derived(filters?.label ?? null)
 	let worker = $derived(filters?.worker ?? null)
-	let success = $derived(filters?.success ?? null)
+	let success = $derived(filters?.status ?? null)
 	let showSkipped = $derived(filters?.show_skipped ?? false)
-	let showSchedules = $derived(filters?.show_schedules ?? true)
+	let showSchedules = $derived(!filters?.job_trigger_kind?.includes('!schedule'))
 	let showFutureJobs = $derived(filters?.show_future_jobs ?? true)
 	let resultFilter = $derived(filters?.result)
 	let jobTriggerKind = $derived(filters?.job_trigger_kind ?? null)
 	let schedulePath = $derived(filters?.schedule_path ?? null)
 	let jobKindsCat = $derived(filters?.job_kinds ?? null)
 	let allWorkspaces = $derived(filters?.all_workspaces ?? false)
-	let allowWildcards = $derived(filters?.allow_wildcards ?? false)
+	let allowWildcards = $derived(_allowWildcards(filters))
 	let concurrencyKey = $derived(filters?.concurrency_key)
 	let tag = $derived(filters?.tag)
 	let user = $derived(filters?.user)
 	let folder = $derived(filters?.folder)
 	let path = $derived(filters?.path)
 	let argFilter = $derived(filters?.arg)
-	let minTs = $derived(filters?.min_ts ?? null)
-	let maxTs = $derived(filters?.max_ts ?? null)
-	let perPage = $derived(filters?.per_page ?? 100)
 
 	let queue_count: Tweened<number> | undefined = $state()
 	let suspended_count: Tweened<number> | undefined = $state()
@@ -162,6 +160,7 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 			// const minCreated = lastJob?.created_at
 			const minCreated = new Date(new Date(ts).getTime() - 1).toISOString()
 
+			const minTs = timeframe?.computeMinMax().minTs ?? null
 			let olderJobs = await fetchJobs(minCreated, minTs, undefined)
 			jobs = updateWithNewJobs(olderJobs ?? [], jobs ?? [])
 			computeCompletedJobs()
@@ -178,8 +177,8 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 	): CancelablePromise<Job[]> {
 		if (_args.skip) return CancelablePromiseUtils.pure<Job[]>([])
 		loadingFetch = true
-		let scriptPathStart = folder === null || folder === '' ? undefined : `f/${folder}/`
-		let scriptPathExact = path === null || path === '' ? undefined : path
+		let scriptPathStart = folder == null || folder === '' ? undefined : `f/${folder}/`
+		let scriptPathExact = path == null || path === '' ? undefined : path
 		let promise = JobService.listJobs({
 			workspace: currentWorkspace,
 			completedBefore: completedBefore ?? undefined,
@@ -187,7 +186,7 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 			createdAfterQueue,
 			schedulePath: schedulePath ?? undefined,
 			scriptPathExact,
-			createdBy: user === null || user === '' ? undefined : user,
+			createdBy: user == null || user === '' ? undefined : user,
 			scriptPathStart: scriptPathStart,
 			jobKinds: jobKindsCat == 'all' || jobKinds == '' ? undefined : jobKinds,
 			success: success == 'success' ? true : success == 'failure' ? false : undefined,
@@ -200,9 +199,9 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 			isSkipped: showSkipped ? undefined : false,
 			// isFlowStep: jobKindsCat != 'all' ? false : undefined,
 			hasNullParent: jobKindsCat != 'all' ? true : undefined,
-			label: label === null || label === '' ? undefined : label,
-			tag: tag === null || tag === '' ? undefined : tag,
-			worker: worker === null || worker === '' ? undefined : worker,
+			label: label == null || label === '' ? undefined : label,
+			tag: tag == null || tag === '' ? undefined : tag,
+			worker: worker == null || worker === '' ? undefined : worker,
 			isNotSchedule: showSchedules == false ? true : undefined,
 			suspended: success == 'waiting' ? false : success == 'suspended' ? true : undefined,
 			scheduledForBeforeNow:
@@ -250,16 +249,16 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 			// createdOrStartedAfter: startedAfter,
 			// createdOrStartedAfterCompletedJobs: startedAfterCompletedJobs,
 			schedulePath: schedulePath ?? undefined,
-			scriptPathExact: path === null || path === '' ? undefined : path,
-			createdBy: user === null || user === '' ? undefined : user,
-			scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
+			scriptPathExact: path == null || path === '' ? undefined : path,
+			createdBy: user == null || user === '' ? undefined : user,
+			scriptPathStart: folder == null || folder === '' ? undefined : `f/${folder}/`,
 			jobKinds: jobKindsCat == 'all' || jobKinds == '' ? undefined : jobKinds,
 			success: success == 'success' ? true : success == 'failure' ? false : undefined,
 			running: success == 'running' ? true : undefined,
 			isSkipped: showSkipped ? undefined : false,
 			isFlowStep: jobKindsCat != 'all' ? false : undefined,
-			label: label === null || label === '' ? undefined : label,
-			tag: tag === null || tag === '' ? undefined : tag,
+			label: label == null || label === '' ? undefined : label,
+			tag: tag == null || tag === '' ? undefined : tag,
 			isNotSchedule: showSchedules == false ? true : undefined,
 			scheduledForBeforeNow: showFutureJobs == false ? true : undefined,
 			args:
@@ -299,6 +298,7 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 		intervalId = setInterval(syncer, refreshRate)
 	}
 	function loadJobsIntern(shouldGetCount?: boolean): CancelablePromise<void> {
+		const { minTs, maxTs } = timeframe?.computeMinMax() ?? { minTs: null, maxTs: null }
 		if (shouldGetCount) {
 			getCount()
 		}
@@ -374,9 +374,6 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 	let lastQueueTs: string | undefined = undefined
 
 	async function syncer() {
-		if (success == 'waiting') {
-			onSetMinMaxTs?.(null, null)
-		}
 		if (loadingFetch) {
 			return
 		}
@@ -385,15 +382,8 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 				getCount()
 			}
 
-			const ts = computeMinAndMax?.()
-			if (ts) {
-				onSetMinMaxTs?.(ts.minTs, ts.maxTs)
-				if (maxTs != undefined) {
-					loadJobsIntern(false)
-				}
-			}
-
-			if (jobs && maxTs == undefined) {
+			const { minTs, maxTs } = timeframe?.computeMinMax() ?? { minTs: null, maxTs: null }
+			if (jobs) {
 				if (success == 'running') {
 					loadJobsIntern(false)
 				} else {
@@ -531,9 +521,13 @@ export function useJobsLoader(args: () => UseJobLoaderArgs) {
 		}
 	})
 	$effect(() => {
-		Object.keys(filters ?? {}).map((k) => filters?.[k as keyof RunsFilters])
+		Object.keys(filters ?? {}).map((k) => filters?.[k as keyof RunsFilterInstance])
 		currentWorkspace
 		lookback
+		timeframe
+		perPage
+		showSchedules
+		showFutureJobs
 		let p = untrack(() => onParamChanges())
 		return () => p.cancel()
 	})
diff --git a/frontend/src/lib/components/schedules/schedulesFilter.ts b/frontend/src/lib/components/schedules/schedulesFilter.ts
new file mode 100644
index 0000000000..746c34777e
--- /dev/null
+++ b/frontend/src/lib/components/schedules/schedulesFilter.ts
@@ -0,0 +1,72 @@
+import { FileCode, FileText, Clock, Braces, Users } from 'lucide-svelte'
+import type { FilterSchemaRec } from '../FilterSearchbar.svelte'
+
+export function buildSchedulesFilterSchema({
+	paths,
+	scriptPaths,
+	showUserFoldersFilter,
+	userFoldersLabel
+}: {
+	paths: string[]
+	scriptPaths: string[]
+	showUserFoldersFilter?: boolean
+	userFoldersLabel?: string
+}) {
+	return {
+		schedule_path: {
+			type: 'oneof' as const,
+			options: paths.map((s) => ({ label: s, value: s })),
+			allowCustomValue: true,
+			allowNegative: false,
+			allowMultiple: false,
+			label: 'Schedule path',
+			icon: Clock,
+			description: 'Filter by exact schedule path'
+		},
+		path_start: {
+			type: 'string' as const,
+			label: 'Path prefix',
+			icon: FileCode,
+			description: 'Filter by schedule path prefix'
+		},
+		path: {
+			type: 'oneof' as const,
+			options: scriptPaths.map((s) => ({ label: s, value: s })),
+			allowCustomValue: true,
+			allowNegative: false,
+			allowMultiple: false,
+			label: 'Script/Flow path',
+			icon: FileCode,
+			description: 'Filter by the script or flow path that the schedule runs'
+		},
+		description: {
+			type: 'string' as const,
+			label: 'Description',
+			icon: FileText,
+			description: 'Search in schedule description'
+		},
+		summary: {
+			type: 'string' as const,
+			label: 'Summary',
+			icon: FileText,
+			description: 'Search in schedule summary'
+		},
+		args: {
+			type: 'string' as const,
+			format: 'json' as const,
+			label: 'Args subset',
+			icon: Braces,
+			description: 'Filter by JSON args subset match (e.g., {"param": "value"})'
+		},
+		...(showUserFoldersFilter
+			? {
+					user_folders_only: {
+						type: 'boolean' as const,
+						label: userFoldersLabel || 'User folders only',
+						icon: Users,
+						description: 'Show only schedules in user folders'
+					}
+				}
+			: {})
+	} satisfies FilterSchemaRec
+}
diff --git a/frontend/src/lib/components/select/GenericDropdown.svelte b/frontend/src/lib/components/select/GenericDropdown.svelte
new file mode 100644
index 0000000000..d4da4c959e
--- /dev/null
+++ b/frontend/src/lib/components/select/GenericDropdown.svelte
@@ -0,0 +1,144 @@
+<script lang="ts" generics="T">
+	import { deepEqual } from 'fast-equals'
+	import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte'
+	import { untrack, type Snippet } from 'svelte'
+	import { twMerge } from 'tailwind-merge'
+	import { useReducedMotion } from '$lib/svelte5Utils.svelte'
+	import { watch } from 'runed'
+
+	let {
+		listAutoWidth = true,
+		strictWidth = false,
+		disablePortal = false,
+		open,
+		disabled = false,
+		class: className = '',
+		innerClass = '',
+		maxHeight = 256,
+		getInputRect,
+		children
+	}: {
+		listAutoWidth?: boolean
+		strictWidth?: boolean
+		disablePortal?: boolean
+		open: boolean
+		disabled?: boolean
+		class?: string
+		innerClass?: string
+		maxHeight?: number
+		getInputRect?: () => DOMRect
+		children?: Snippet
+	} = $props()
+
+	let listEl: HTMLDivElement | undefined = $state()
+	let dropdownPos = $state(computeDropdownPos())
+	let reducedMotion = useReducedMotion()
+
+	function computeDropdownPos(): {
+		width: number
+		height: number
+		x: number
+		y: number
+		isBelow: boolean
+	} {
+		if (!getInputRect || !listEl) return { width: 0, height: 0, x: 0, y: 0, isBelow: true }
+		let inputR = getInputRect()
+		const listR = listEl.getBoundingClientRect()
+		const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight
+		let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y]
+		if (isBelow)
+			return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow }
+		else {
+			return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow }
+		}
+	}
+
+	$effect(() => {
+		function updateDropdownPos() {
+			let nPos = computeDropdownPos()
+			if (!deepEqual(nPos, dropdownPos)) dropdownPos = nPos
+			if (open) requestAnimationFrame(updateDropdownPos)
+		}
+		if (open) untrack(() => updateDropdownPos())
+	})
+
+	// We do not want to render the dropdown when it is closed for performance reasons
+	// but we want to keep it in the DOM for a short time to allow for transitions to finish
+	//
+	// We do not use Svelte transitions because they can not animate in the opposite direction
+	// when the dropdown is opens above the input
+	// Also CSS transitions are smoother because they do not rely on JS / animation frames
+	let uiState = $state({ domExists: open, visible: open, timeout: null as number | null })
+	let initial = true
+	watch(
+		() => open && !disabled,
+		(isOpen) => {
+			untrack(() => {
+				if (initial) {
+					initial = false
+					return
+				}
+				if (reducedMotion.val) {
+					uiState = {
+						domExists: open && !disabled,
+						visible: open && !disabled,
+						timeout: null
+					}
+					return
+				}
+				if (uiState.timeout) clearTimeout(uiState.timeout)
+				uiState = {
+					domExists: true,
+					visible: !isOpen,
+					timeout: setTimeout(() => {
+						if (isOpen) {
+							uiState.visible = true
+							uiState.timeout = null
+						} else if (!isOpen) {
+							uiState.visible = false
+							uiState.timeout = setTimeout(() => {
+								uiState.domExists = false
+								uiState.timeout = null
+							}, 500) // leave time for transition to finish
+						}
+					}, 0) // We need the height to be 0 then change immediately for the transition to play
+				}
+			})
+		}
+	)
+</script>
+
+<ConditionalPortal condition={!disablePortal} name="dropdown-portal">
+	{#if uiState.domExists}
+		<div
+			class={twMerge(
+				open ? 'dropdown-open' : 'dropdown-closed',
+				disablePortal ? 'absolute z-[5002]' : 'fixed z-[10000]',
+				'text-primary text-sm select-none',
+				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
+				uiState.visible ? '' : 'pointer-events-none',
+				className
+			)}
+			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
+				? `${strictWidth ? 'width' : 'min-width'}: ${dropdownPos.width}px; height: ${dropdownPos.height}px;`
+				: ''}"
+		>
+			<div
+				class={twMerge(
+					'overflow-clip rounded-md drop-shadow-base',
+					!reducedMotion.val ? 'transition-height' : '',
+					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
+				)}
+				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
+			>
+				<div
+					bind:this={listEl}
+					class="flex flex-col rounded-md bg-surface-input {innerClass}"
+					style="max-height: {maxHeight}px;"
+				>
+					{@render children?.()}
+				</div>
+			</div>
+		</div>
+	{/if}
+</ConditionalPortal>
diff --git a/frontend/src/lib/components/select/Select.svelte b/frontend/src/lib/components/select/Select.svelte
index c869ec6045..b39e662433 100644
--- a/frontend/src/lib/components/select/Select.svelte
+++ b/frontend/src/lib/components/select/Select.svelte
@@ -16,6 +16,7 @@
 		inputSizeClasses
 	} from '../text_input/TextInput.svelte'
 	import { ButtonType } from '../common/button/model'
+	import Tooltip from '../Tooltip.svelte'
 
 	type Value = Item['value']
 
@@ -37,6 +38,7 @@
 		RightIcon,
 		createText,
 		noItemsMsg,
+		tooltip,
 		open = $bindable(false),
 		id,
 		itemLabelWrapperClasses,
@@ -72,12 +74,13 @@
 		createText?: string
 		noItemsMsg?: string
 		open?: boolean
+		tooltip?: string
 		id?: string
 		itemLabelWrapperClasses?: string
 		itemButtonWrapperClasses?: string
 		size?: 'sm' | 'md' | 'lg'
 		showPlaceholderOnOpen?: boolean
-		transformInputSelectedText?: (text: string) => string
+		transformInputSelectedText?: (text: string, value: Value) => string
 		groupBy?: (item: Item) => string
 		sortBy?: (a: Item, b: Item) => number
 		onFocus?: () => void
@@ -106,7 +109,9 @@
 		if (!open) filterText = ''
 	})
 
-	let valueEntry = $derived(value && processedItems?.find((item) => deepEqual(item.value, value)))
+	let valueEntry = $derived(
+		value != null ? processedItems?.find((item) => deepEqual(item.value, value)) : undefined
+	)
 
 	function setValue(item: ProcessedItem<Value>) {
 		if (item.__is_create && onCreateItem) {
@@ -126,12 +131,12 @@
 
 	let inputText = $derived.by(() => {
 		let text = valueEntry?.label ?? getLabel({ value }) ?? ''
-		return transformInputSelectedText?.(text) ?? text
+		return transformInputSelectedText?.(text, value) ?? text
 	})
 </script>
 
 <div
-	class={`relative ${className}`}
+	class={`relative h-fit ${className}`}
 	use:clickOutside={{ onClickOutside: () => (open = false) }}
 	onpointerdown={() => onFocus?.()}
 	onfocus={() => onFocus?.()}
@@ -155,6 +160,13 @@
 			<RightIcon size={iconSize} class="text-secondary" />
 		</div>
 	{/if}
+
+	{#if tooltip}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<Tooltip>{tooltip}</Tooltip>
+		</div>
+	{/if}
+
 	<!-- svelte-ignore a11y_autofocus -->
 	<input
 		{autofocus}
diff --git a/frontend/src/lib/components/select/SelectDropdown.svelte b/frontend/src/lib/components/select/SelectDropdown.svelte
index 08ebadd909..efed21b988 100644
--- a/frontend/src/lib/components/select/SelectDropdown.svelte
+++ b/frontend/src/lib/components/select/SelectDropdown.svelte
@@ -1,12 +1,10 @@
 <script lang="ts" generics="T">
-	import { deepEqual } from 'fast-equals'
-	import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte'
 	import { untrack, type Snippet } from 'svelte'
 	import type { ProcessedItem } from './utils.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { PlusIcon } from 'lucide-svelte'
-	import { useReducedMotion } from '$lib/svelte5Utils.svelte'
-	import { watch } from 'runed'
+	import GenericDropdown from './GenericDropdown.svelte'
+	import { Debounced } from 'runed'
 
 	let {
 		processedItems: _processedItems,
@@ -33,7 +31,7 @@
 		processedItems?: ProcessedItem<T>[]
 		value: T | undefined
 		filterText?: string
-		listAutoWidth?: Boolean
+		listAutoWidth?: boolean
 		disabled?: boolean
 		disablePortal?: boolean
 		open: boolean
@@ -62,93 +60,25 @@
 				)
 	)
 
-	let listEl: HTMLDivElement | undefined = $state()
-	let dropdownPos = $state(computeDropdownPos())
 	let keyArrowPos = $state<number | undefined>()
-	let reducedMotion = useReducedMotion()
-
-	function computeDropdownPos(): {
-		width: number
-		height: number
-		x: number
-		y: number
-		isBelow: boolean
-	} {
-		if (!getInputRect || !listEl) return { width: 0, height: 0, x: 0, y: 0, isBelow: true }
-		let inputR = getInputRect()
-		const listR = listEl.getBoundingClientRect()
-		const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight
-		let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y]
-		if (isBelow)
-			return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow }
-		else {
-			return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow }
-		}
-	}
-
-	$effect(() => {
-		function updateDropdownPos() {
-			let nPos = computeDropdownPos()
-			if (!deepEqual(nPos, dropdownPos)) dropdownPos = nPos
-			if (open) requestAnimationFrame(updateDropdownPos)
-		}
-		if (open) untrack(() => updateDropdownPos())
-	})
 
 	$effect(() => {
 		;[open, processedItems]
 		untrack(() => (keyArrowPos = open && (filterText || highlightFirstOnOpen) ? 0 : undefined))
 	})
 
-	// We do not want to render the dropdown when it is closed for performance reasons
-	// but we want to keep it in the DOM for a short time to allow for transitions to finish
-	//
-	// We do not use Svelte transitions because they can not animate in the opposite direction
-	// when the dropdown is opens above the input
-	// Also CSS transitions are smoother because they do not rely on JS / animation frames
-	let uiState = $state({ domExists: open, visible: open, timeout: null as number | null })
-	let initial = true
-	watch(
-		() => open && !disabled,
-		(isOpen) => {
-			untrack(() => {
-				if (initial) {
-					initial = false
-					return
-				}
-				if (reducedMotion.val) {
-					uiState = {
-						domExists: open && !disabled,
-						visible: open && !disabled,
-						timeout: null
-					}
-					return
-				}
-				if (uiState.timeout) clearTimeout(uiState.timeout)
-				uiState = {
-					domExists: true,
-					visible: !isOpen,
-					timeout: setTimeout(() => {
-						if (isOpen) {
-							uiState.visible = true
-							uiState.timeout = null
-						} else if (!isOpen) {
-							uiState.visible = false
-							uiState.timeout = setTimeout(() => {
-								uiState.domExists = false
-								uiState.timeout = null
-							}, 500) // leave time for transition to finish
-						}
-					}, 0) // We need the height to be 0 then change immediately for the transition to play
-				}
-			})
-		}
-	)
+	// Expose whether the dropdown is visually open for keyboard nav guard.
+	// We mirror the same logic GenericDropdown uses: open && !disabled.
+	let isVisible = $derived(open && !disabled)
+
+	// Dirty fix to prevent a rendering bug where the ul is present in the layout but
+	// displays as empty. It only happens with overflow-y-auto set.
+	let enableOverflowYAuto = new Debounced(() => isVisible, 15)
 </script>
 
 <svelte:window
 	on:keydown={(e) => {
-		if (!uiState.visible || !processedItems?.length) return
+		if (!isVisible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
 		} else if (e.key === 'ArrowDown') {
@@ -167,85 +97,68 @@
 	}}
 />
 
-<ConditionalPortal condition={!disablePortal} name="select-dropdown-portal">
-	{#if uiState.domExists}
-		<div
-			class={twMerge(
-				open ? 'select-dropdown-open' : 'select-dropdown-closed',
-				disablePortal ? 'absolute z-[5002]' : 'fixed z-[10000]',
-				'text-primary text-sm select-none',
-				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
-				uiState.visible ? '' : 'pointer-events-none',
-				className
-			)}
-			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
-				? `min-width: ${dropdownPos.width}px; height: ${dropdownPos.height}px;`
-				: ''}"
-		>
-			<div
-				class={twMerge(
-					'overflow-clip rounded-md drop-shadow-base',
-					!reducedMotion.val ? 'transition-height' : '',
-					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
-				)}
-				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
-			>
-				<div
-					bind:this={listEl}
-					class="flex flex-col rounded-md bg-surface-input"
-					style="max-height: {maxHeight}px;"
-				>
-					{@render header?.()}
-					{#if processedItems?.length === 0}
-						<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
-					{/if}
-					<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
-						{#each processedItems ?? [] as item, itemIndex}
-							{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
-								<li
-									class={twMerge(
-										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b border-border-light',
-										itemIndex === 0 ? 'mt-3' : 'mt-6'
-									)}
-								>
-									{item.__select_group}
-								</li>
-							{/if}
-							<li>
-								<button
-									class={twMerge(
-										'py-2 px-4 w-full font-normal text-left text-primary text-xs',
-										itemIndex === keyArrowPos || item.value === value
-											? 'bg-surface-secondary dark:bg-surface-tertiary'
-											: 'hover:bg-surface-hover',
-										endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
-										itemButtonWrapperClasses,
-										item.disabled ? 'cursor-not-allowed text-disabled' : ''
-									)}
-									onclick={(e) => {
-										e.stopImmediatePropagation()
-										if (!item.disabled) onSelectValue(item)
-									}}
-								>
-									{@render startSnippet?.({ item, close: () => (open = false) })}
-									<span class={itemLabelWrapperClasses}>
-										{item.label || '\xa0'}
-									</span>
-									{#if item.__is_create}
-										<PlusIcon class="inline ml-auto" size={16} />
-									{:else}
-										{@render endSnippet?.({ item, close: () => (open = false) })}
-									{/if}
-									{#if item.subtitle}
-										<div class="text-2xs text-secondary">{item.subtitle}</div>
-									{/if}
-								</button>
-							</li>
-						{/each}
-					</ul>
-					{@render bottomSnippet?.({ close: () => (open = false) })}
-				</div>
-			</div>
-		</div>
+<GenericDropdown
+	{listAutoWidth}
+	{disablePortal}
+	{open}
+	{disabled}
+	{maxHeight}
+	{getInputRect}
+	class={className}
+>
+	{@render header?.()}
+	{#if processedItems?.length === 0}
+		<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
 	{/if}
-</ConditionalPortal>
+	<ul
+		class={twMerge(
+			'flex-1 flex flex-col',
+			enableOverflowYAuto.current ? 'overflow-y-auto' : '',
+			ulClass
+		)}
+	>
+		{#each processedItems ?? [] as item, itemIndex (item.value)}
+			{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
+				<li
+					class={twMerge(
+						'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b border-border-light',
+						itemIndex === 0 ? 'mt-3' : 'mt-6'
+					)}
+				>
+					{item.__select_group}
+				</li>
+			{/if}
+			<li>
+				<button
+					class={twMerge(
+						'py-2 px-4 w-full font-normal text-left text-primary text-xs',
+						itemIndex === keyArrowPos || item.value === value
+							? 'bg-surface-secondary dark:bg-surface-tertiary'
+							: 'hover:bg-surface-hover',
+						endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
+						itemButtonWrapperClasses,
+						item.disabled ? 'cursor-not-allowed text-disabled' : ''
+					)}
+					onclick={(e) => {
+						e.stopImmediatePropagation()
+						if (!item.disabled) onSelectValue(item)
+					}}
+				>
+					{@render startSnippet?.({ item, close: () => (open = false) })}
+					<span class={itemLabelWrapperClasses}>
+						{item.label || '\xa0'}
+					</span>
+					{#if item.__is_create}
+						<PlusIcon class="inline ml-auto" size={16} />
+					{:else}
+						{@render endSnippet?.({ item, close: () => (open = false) })}
+					{/if}
+					{#if item.subtitle}
+						<div class="text-2xs text-secondary">{item.subtitle}</div>
+					{/if}
+				</button>
+			</li>
+		{/each}
+	</ul>
+	{@render bottomSnippet?.({ close: () => (open = false) })}
+</GenericDropdown>
diff --git a/frontend/src/lib/components/variables/variablesFilter.ts b/frontend/src/lib/components/variables/variablesFilter.ts
new file mode 100644
index 0000000000..1b6235fe7f
--- /dev/null
+++ b/frontend/src/lib/components/variables/variablesFilter.ts
@@ -0,0 +1,63 @@
+import { FileCode, FileText, FolderIcon, Key, Users } from 'lucide-svelte'
+import type { FilterSchemaRec } from '../FilterSearchbar.svelte'
+
+export function buildVariablesFilterSchema({
+	paths,
+	owners,
+	showUserFoldersFilter,
+	userFoldersLabel
+}: {
+	paths: string[]
+	owners: string[]
+	showUserFoldersFilter?: boolean
+	userFoldersLabel?: string
+}) {
+	return {
+		owner: {
+			type: 'oneof' as const,
+			options: owners.map((s) => ({ label: s, value: s })),
+			allowNegative: false,
+			allowMultiple: false,
+			label: 'Owner',
+			icon: FolderIcon,
+			description: 'Filter by owner (folder or user path)'
+		},
+		path: {
+			type: 'oneof' as const,
+			options: paths.map((s) => ({ label: s, value: s })),
+			allowNegative: true,
+			allowMultiple: true,
+			label: 'Path',
+			icon: FileCode,
+			description: 'Filter by exact variable path'
+		},
+		path_start: {
+			type: 'string' as const,
+			label: 'Path prefix',
+			icon: FolderIcon,
+			description: 'Filter by path prefix (e.g., "f/folder/")'
+		},
+		description: {
+			type: 'string' as const,
+			label: 'Description',
+			icon: FileText,
+			description: 'Search in variable description'
+		},
+		value: {
+			type: 'string' as const,
+			label: 'Value',
+			icon: Key,
+			description: 'Search in non-secret variable values'
+		},
+		...(showUserFoldersFilter
+			? {
+					user_folders_only: {
+						type: 'boolean' as const,
+						label: userFoldersLabel || 'User folders only',
+						icon: Users,
+						description: 'Show only variables in user folders'
+					}
+				}
+			: {})
+	} satisfies FilterSchemaRec
+}
diff --git a/frontend/src/lib/svelte5Utils.svelte.ts b/frontend/src/lib/svelte5Utils.svelte.ts
index b912f5ebd3..807e54c176 100644
--- a/frontend/src/lib/svelte5Utils.svelte.ts
+++ b/frontend/src/lib/svelte5Utils.svelte.ts
@@ -415,3 +415,187 @@ export function useInfiniteQuery<TData, TPageParam = number>(
 		reset
 	}
 }
+
+export function useKeyPressed<Key extends string>(
+	keys: Key[],
+	params?: {
+		onKeyUp?: (key: Key, e: KeyboardEvent) => void
+		onKeyDown?: (key: Key, e: KeyboardEvent) => void
+	}
+): Record<Key, boolean> {
+	if (typeof window === 'undefined')
+		return Object.fromEntries(keys.map((key) => [key, false])) as Record<Key, boolean>
+	let obj = $state(Object.fromEntries(keys.map((key) => [key, false])) as Record<Key, boolean>)
+	$effect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			for (const key of keys) {
+				if (event.key.toLowerCase() === key.toLowerCase()) {
+					obj[key] = true
+					params?.onKeyDown?.(key, event)
+				}
+			}
+		}
+
+		const handleKeyUp = (event: KeyboardEvent) => {
+			for (const key of keys) {
+				if (event.key.toLowerCase() === key.toLowerCase()) {
+					obj[key] = false
+					params?.onKeyUp?.(key, event)
+				}
+			}
+		}
+
+		// Reset all keys when window loses focus or visibility changes to prevent stuck keys
+		const resetAllKeys = () => {
+			for (const key of keys) obj[key] = false
+		}
+
+		window.addEventListener('keydown', handleKeyDown)
+		window.addEventListener('keyup', handleKeyUp)
+		window.addEventListener('blur', resetAllKeys)
+		document.addEventListener('visibilitychange', resetAllKeys)
+		return () => {
+			window.removeEventListener('keydown', handleKeyDown)
+			window.removeEventListener('keyup', handleKeyUp)
+			window.removeEventListener('blur', resetAllKeys)
+			document.removeEventListener('visibilitychange', resetAllKeys)
+		}
+	})
+	return obj
+}
+
+export function useTransformedSyncedValue<T, U>(
+	source: [() => T, (val: T) => void],
+	transform: (val: T) => U,
+	inverseTransform: (val: U) => T
+) {
+	let st = $state(transform(source[0]()))
+
+	let skipUpdate = false
+	watch(source[0], (val) => {
+		if (skipUpdate) {
+			skipUpdate = false
+			return
+		}
+		st = transform(val)
+	})
+
+	return {
+		get val() {
+			return st
+		},
+		set val(newVal) {
+			skipUpdate = true
+			st = newVal
+			source[1](inverseTransform(newVal))
+			setTimeout(() => {
+				skipUpdate = false
+			})
+		},
+		reparse() {
+			st = transform(source[0]())
+		}
+	}
+}
+
+/**
+ * Maintains a local copy of a value that syncs back to the parent state in a debounced way.
+ *
+ * Useful for inputs where you want immediate local reactivity but don't want to
+ * flood the parent with updates (e.g. text fields, sliders).
+ *
+ * @param getter - Reads the canonical value from the parent
+ * @param setter - Writes a new canonical value to the parent (called debounced)
+ * @param react - A function that reads the fields to react to.
+ * @param delay - Debounce delay in ms (default: 300)
+ *
+ * @example
+ * const debounced = new DebouncedTempValue(
+ *   () => props.value,
+ *   (v) => { props.value = v },
+ *   (t) => t, // react to the value itself
+ *   300
+ * )
+ * // Use debounced.current in the template; writes are debounced to the parent.
+ */
+export class DebouncedTempValue<T> {
+	current: T
+	#timer: ReturnType<typeof setTimeout> | undefined
+	#skipNextParentUpdate = false
+	#skipNextCurrentUpdate = false
+
+	constructor(
+		getter: () => T,
+		private setter: (val: T) => void,
+		react: (t: T) => void,
+		private delay: number = 300
+	) {
+		this.current = $state(untrack(getter))
+
+		watch(getter, (val) => {
+			if (this.#timer !== undefined) {
+				// An in-flight local edit is pending — don't overwrite it with stale parent data
+				return
+			}
+			if (this.#skipNextParentUpdate) {
+				// The parent just updated in response to our local edit — skip this update as it's not new data
+				this.#skipNextParentUpdate = false
+				return
+			}
+			this.#skipNextCurrentUpdate = true
+			this.current = val
+			setTimeout(() => (this.#skipNextCurrentUpdate = false), 0)
+		})
+
+		watch(
+			() => react(this.current),
+			() => {
+				if (this.#skipNextCurrentUpdate) return
+				if (this.#timer !== undefined) clearTimeout(this.#timer)
+				this.#timer = setTimeout(() => {
+					this.#timer = undefined
+					this.#skipNextParentUpdate = true
+					this.setter(this.current)
+					setTimeout(() => (this.#skipNextParentUpdate = false), 0)
+				}, this.delay)
+			}
+		)
+	}
+
+	/** Flush any pending debounced write immediately. */
+	flush(): void {
+		if (this.#timer !== undefined) {
+			clearTimeout(this.#timer)
+			this.#timer = undefined
+			this.setter(this.current)
+		}
+	}
+}
+
+export function useLocalStorageValue<T>(
+	key: string,
+	defaultValue: T,
+	typ?: 'string' | 'number' | 'boolean'
+): { val: T } {
+	const serialize = (val: T) =>
+		typ === 'string' || typ === 'number' || typ === 'boolean' ? String(val) : JSON.stringify(val)
+	const deserialize = (val: string): T => {
+		if (typ === 'string') return val as any
+		if (typ === 'number') return Number(val) as any
+		if (typ === 'boolean') return (val === 'true') as any
+		return JSON.parse(val) as T
+	}
+
+	if (typeof window === 'undefined') return { val: defaultValue }
+	const savedValue = localStorage.getItem(key)
+	let s = $state(savedValue ? (deserialize(savedValue) as T) : defaultValue)
+	return {
+		get val() {
+			return s
+		},
+		set val(newVal: T) {
+			localStorage.setItem(key, serialize(newVal))
+			s = newVal
+		}
+	}
+}
diff --git a/frontend/src/lib/svelte5UtilsKit.svelte.ts b/frontend/src/lib/svelte5UtilsKit.svelte.ts
index 2df637b51a..cadd2dee1e 100644
--- a/frontend/src/lib/svelte5UtilsKit.svelte.ts
+++ b/frontend/src/lib/svelte5UtilsKit.svelte.ts
@@ -1,35 +1,121 @@
 // SvelteKit-specific utilities
 // This file should only be imported in SvelteKit apps as it depends on $app/environment
 
-import * as runed from 'runed/kit'
-import type z from 'zod'
+import { z } from 'zod'
 
-// The original from runed has a weird behavior with dedup reads causing duplicate effect runs
-// (Every field has to be derived to avoid it : https://runed.dev/docs/utilities/use-search-params)
-export function useSearchParams<S extends z.ZodType>(
-	schema: S,
-	options?: runed.SearchParamsOptions
-): runed.ReturnUseSearchParams<S> {
-	let params = runed.useSearchParams(schema, options)
-	let keys = Object.keys((schema as any).shape ?? {})
-	let obj = { ...params }
+export type SearchParamsResult<S extends z.ZodType> =
+	S extends z.ZodObject<infer Shape>
+		? { -readonly [K in keyof Shape]: z.infer<Shape[K]> } & Record<string, unknown>
+		: z.infer<S> & Record<string, unknown>
+
+/** Serialize a value to a URL search param string. Primitives are written as-is; anything else is JSON. */
+function serializeParam(value: unknown): string {
+	if (typeof value === 'string') return value
+	if (typeof value === 'number') return String(value)
+	if (typeof value === 'boolean') return String(value)
+	return JSON.stringify(value)
+}
+
+/** Parse a raw string from the URL back to a typed value guided by the zod field schema. */
+function deserializeParam(raw: string, fieldSchema: z.ZodType): unknown {
+	// Unwrap nullable / optional / default wrappers to get the inner type
+	let inner: z.ZodType = fieldSchema
+	while (
+		inner instanceof (z as any).ZodNullable ||
+		inner instanceof (z as any).ZodOptional ||
+		inner instanceof (z as any).ZodDefault
+	) {
+		inner = (inner as any)._def.innerType ?? (inner as any)._def.type
+	}
+
+	if (inner instanceof (z as any).ZodNumber) {
+		const n = Number(raw)
+		return isNaN(n) ? null : n
+	}
+	if (inner instanceof (z as any).ZodBoolean) {
+		if (raw === 'true') return true
+		if (raw === 'false') return false
+		return null
+	}
+	// ZodString, ZodEnum, ZodLiteral, ZodAny, or unknown → try as plain string first,
+	// fall back to JSON parse for non-string schemas
+	if (
+		inner instanceof (z as any).ZodString ||
+		inner instanceof (z as any).ZodEnum ||
+		inner instanceof (z as any).ZodLiteral
+	) {
+		return raw
+	}
+	// For any other type (object, array, …) try JSON
+	try {
+		return JSON.parse(raw)
+	} catch {
+		return raw
+	}
+}
+
+/**
+ * Returns a reactive object whose properties are synced to the browser's URL search params.
+ * Reading a property returns the current value from the URL (reactive).
+ * Writing a property updates the URL via history.replaceState (no navigation).
+ *
+ * Primitive types (string / number / boolean) are serialized as plain text.
+ * Everything else is JSON-serialized.
+ */
+export function useSearchParams<S extends z.ZodType>(schema: S): SearchParamsResult<S> {
+	const shape: Record<string, z.ZodType> = (schema as any).shape ?? {}
+	const keys = Object.keys(shape)
+
+	// Reactive snapshot of search params - one $state cell per key
+	const values: Record<string, unknown> = $state(
+		Object.fromEntries(
+			keys.map((k) => {
+				const raw = new URLSearchParams(window.location.search).get(k)
+				const parsed = raw != null ? deserializeParam(raw, shape[k]) : null
+				return [k, parsed]
+			})
+		)
+	)
+
+	function syncFromUrl() {
+		const sp = new URLSearchParams(window.location.search)
+		for (const k of keys) {
+			const raw = sp.get(k)
+			const parsed = raw != null ? deserializeParam(raw, shape[k]) : null
+			;(values as any)[k] = parsed
+		}
+	}
+
+	// Keep in sync when the user navigates back/forward
+	$effect(() => {
+		window.addEventListener('popstate', syncFromUrl)
+		return () => window.removeEventListener('popstate', syncFromUrl)
+	})
+
+	// Build the proxy object: reads come from $state, writes go to the URL + $state
+	const proxy: Record<string, unknown> = {}
 	for (const key of keys) {
-		// Somehow using $derived does not trigger reactivity sometimes ...
-		// (e.g: filters.arg in RunsPage.svelte updates in the URL but does not trigger reactivity)
-		let derivedVal = $state(params[key])
-		Object.defineProperty(obj, key, {
-			get: () => {
-				if (typeof derivedVal === 'string') return decodeURIComponent(derivedVal)
-				return derivedVal
+		Object.defineProperty(proxy, key, {
+			get() {
+				return (values as any)[key]
 			},
-			set: (v) => {
-				const val = typeof v === 'string' ? encodeURIComponent(v) : v
-				params[key] = val
-				derivedVal = val
+			set(v: unknown) {
+				;(values as any)[key] = v
+				const sp = new URLSearchParams(window.location.search)
+				if (v == null) {
+					sp.delete(key)
+				} else {
+					sp.set(key, serializeParam(v))
+				}
+				const newUrl = sp.toString()
+					? `${window.location.pathname}?${sp}`
+					: window.location.pathname
+				history.replaceState(history.state, '', newUrl)
 			},
 			enumerable: true,
 			configurable: true
 		})
 	}
-	return obj
+
+	return proxy as SearchParamsResult<S>
 }
diff --git a/frontend/src/lib/toast.ts b/frontend/src/lib/toast.ts
index af09f01e5e..56dda53be3 100644
--- a/frontend/src/lib/toast.ts
+++ b/frontend/src/lib/toast.ts
@@ -18,7 +18,9 @@ export function sendUserToast(
 	actions: ToastAction[] = [],
 	errorMessage: string | undefined = undefined,
 	duration: number = 5000
-): void {
+): {
+	destroy: () => void
+} {
 	const type = typeof _type === 'boolean' ? (_type ? 'error' : 'success') : _type
 	const error = type === 'error'
 	if (globalThis.windmillToast) {
@@ -30,9 +32,9 @@ export function sendUserToast(
 			errorMessage,
 			duration
 		})
-		return
+		return { destroy: () => {} }
 	}
-	toast.push({
+	const id = toast.push({
 		component: {
 			// https://github.com/zerodevx/svelte-toast/issues/115
 			// Svelte 5 changed its component type and svelte-toast is not up to date yet
@@ -59,4 +61,8 @@ export function sendUserToast(
 			'--toastBoxShadow': 'none'
 		}
 	})
+
+	return {
+		destroy: () => toast.pop(id)
+	}
 }
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 1ddebf1aec..3fa1b3256a 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -19,8 +19,6 @@ import type { TriggerKind } from './components/triggers'
 import { stateSnapshot } from './svelte5Utils.svelte'
 import { validate, dereference } from '@scalar/openapi-parser'
 
-export type RunsSelectionMode = 'cancel' | 're-run'
-
 export namespace OpenApi {
 	export enum OpenApiVersion {
 		V2,
@@ -88,14 +86,6 @@ export function isJobReRunnable(j: Job): boolean {
 
 export const WORKER_NAME_PREFIX = 'wk'
 
-export function isJobSelectable(selectionType: RunsSelectionMode) {
-	const f: (j: Job) => boolean = {
-		cancel: isJobCancelable,
-		're-run': isJobReRunnable
-	}[selectionType]
-	return f
-}
-
 export function escapeHtml(unsafe: string) {
 	return unsafe
 		.replace(/&/g, '&amp;')
@@ -1590,6 +1580,44 @@ export function formatDateShort(dateString: string | undefined): string {
 	}).format(date)
 }
 
+export function formatDateRange(
+	start: string | Date | undefined,
+	end: string | Date | undefined
+): string {
+	if (typeof start === 'string') start = new Date(start)
+	if (typeof end === 'string') end = new Date(end)
+
+	if (start && end) {
+		const differentDays =
+			start.getFullYear() !== end.getFullYear() ||
+			start.getMonth() !== end.getMonth() ||
+			start.getDate() !== end.getDate()
+
+		const differentYears = start.getFullYear() !== end.getFullYear()
+
+		if (differentDays || differentYears) {
+			// Clone to avoid mutating originals
+			start = new Date(start)
+			end = new Date(end)
+			// Zero out time for display
+			start.setHours(0, 0, 0, 0)
+			end.setHours(0, 0, 0, 0)
+		}
+
+		if (differentYears) {
+			// Zero out month and day for display
+			start.setMonth(0, 1)
+			end.setMonth(0, 1)
+		}
+
+		return `${formatDatePretty(start)} to ${formatDatePretty(end)}`
+	}
+
+	if (!end && start) return `After ${formatDatePretty(start)}`
+	if (!start && end) return `Before ${formatDatePretty(end)}`
+	return 'No input'
+}
+
 export function toJsonStr(result: any) {
 	try {
 		// console.log(result)
@@ -2053,3 +2081,160 @@ export function formatMemory(
 
 	return display
 }
+
+export function assignObjInPlace(
+	target: Record<string, any>,
+	source: Record<string, any>,
+	options: { onDelete?: 'Delete' | 'SetNull' } = { onDelete: 'Delete' }
+) {
+	for (const key in target) {
+		if (!(key in source)) {
+			if (options?.onDelete === 'Delete') delete target[key]
+			else if (options?.onDelete === 'SetNull') target[key] = null
+		}
+	}
+	for (const key in source) target[key] = source[key]
+}
+
+export function isUSLocale(): boolean {
+	try {
+		const locale = Intl.DateTimeFormat().resolvedOptions().locale
+		return locale.startsWith('en-US')
+	} catch {
+		return false
+	}
+}
+
+export function formatDatePretty(date: Date): string {
+	if (!date || isNaN(date.getTime())) return ''
+
+	const now = new Date()
+	const year = date.getFullYear()
+	const month = date.getMonth() + 1
+	const day = date.getDate()
+	const hours = date.getHours()
+	const minutes = date.getMinutes()
+
+	const isCurrentYear = year === now.getFullYear()
+	const isToday = isCurrentYear && month === now.getMonth() + 1 && day === now.getDate()
+	const isOnlyYear = month === 1 && day === 1 && hours === 0 && minutes === 0
+	const hasTime = hours !== 0 || minutes !== 0
+
+	// If only year is defined (rest is 01/01 00:00)
+	if (isOnlyYear) {
+		return String(year)
+	}
+
+	// Format month/day depending on locale: MM/DD for US, DD/MM otherwise
+	const mm = String(month).padStart(2, '0')
+	const dd = String(day).padStart(2, '0')
+	const monthDay = isUSLocale() ? `${mm}/${dd}` : `${dd}/${mm}`
+	// Format time if present (12-hour format with AM/PM)
+	let timeStr = ''
+	if (hasTime) {
+		const isPM = hours >= 12
+		const displayHours = hours % 12 || 12
+		const displayMinutes = String(minutes).padStart(2, '0')
+		timeStr = ` ${displayHours}:${displayMinutes} ${isPM ? 'PM' : 'AM'}`
+	}
+
+	// If today and same year, only show time (if present)
+	if (isToday) {
+		return timeStr ? timeStr.trim() : monthDay
+	}
+
+	// If same year, show month/day and time (if present)
+	if (isCurrentYear) {
+		return `${monthDay}${timeStr}`
+	}
+
+	// Otherwise, show full date with year and time (if present)
+	return `${monthDay}/${year}${timeStr}`
+}
+
+export function parsePrettyDate(text: string): Date | null {
+	if (!text) return null
+
+	const now = new Date()
+	const currentYear = now.getFullYear()
+
+	// Try parsing as year-only (e.g., "2025")
+	if (/^\d{4}$/.test(text)) {
+		const year = parseInt(text)
+		return new Date(year, 0, 1, 0, 0, 0)
+	}
+
+	// Try parsing time-only (e.g., "11:02 AM") - assumes today
+	const timeOnlyMatch = text.match(/^(\d{1,2}):(\d{2})\s+(AM|PM)$/i)
+	if (timeOnlyMatch) {
+		const [, hourStr, minuteStr, meridiem] = timeOnlyMatch
+		let hours = parseInt(hourStr)
+		const minutes = parseInt(minuteStr)
+
+		if (meridiem.toUpperCase() === 'PM' && hours !== 12) hours += 12
+		if (meridiem.toUpperCase() === 'AM' && hours === 12) hours = 0
+
+		return new Date(currentYear, now.getMonth(), now.getDate(), hours, minutes, 0)
+	}
+
+	const usLocale = isUSLocale()
+
+	// Parse a "first/second" pair as month/day (US) or day/month (non-US)
+	function parseFirstSecond(firstStr: string, secondStr: string): { month: number; day: number } {
+		const first = parseInt(firstStr)
+		const second = parseInt(secondStr)
+		return usLocale ? { month: first - 1, day: second } : { month: second - 1, day: first }
+	}
+
+	// Try parsing NN/NN (e.g., "01/04") - assumes current year, no time
+	// US: MM/DD, non-US: DD/MM
+	const monthDayMatch = text.match(/^(\d{2})\/(\d{2})$/)
+	if (monthDayMatch) {
+		const { month, day } = parseFirstSecond(monthDayMatch[1], monthDayMatch[2])
+		return new Date(currentYear, month, day, 0, 0, 0)
+	}
+
+	// Try parsing NN/NN TIME (e.g., "01/04 11:02 AM") - assumes current year with time
+	// US: MM/DD TIME, non-US: DD/MM TIME
+	const monthDayTimeMatch = text.match(/^(\d{2})\/(\d{2})\s+(\d{1,2}):(\d{2})\s+(AM|PM)$/i)
+	if (monthDayTimeMatch) {
+		const { month, day } = parseFirstSecond(monthDayTimeMatch[1], monthDayTimeMatch[2])
+		let hours = parseInt(monthDayTimeMatch[3])
+		const minutes = parseInt(monthDayTimeMatch[4])
+		const meridiem = monthDayTimeMatch[5]
+
+		if (meridiem.toUpperCase() === 'PM' && hours !== 12) hours += 12
+		if (meridiem.toUpperCase() === 'AM' && hours === 12) hours = 0
+
+		return new Date(currentYear, month, day, hours, minutes, 0)
+	}
+
+	// Try parsing NN/NN/YYYY (e.g., "01/04/2025") - no time
+	// US: MM/DD/YYYY, non-US: DD/MM/YYYY
+	const fullDateMatch = text.match(/^(\d{2})\/(\d{2})\/(\d{4})$/)
+	if (fullDateMatch) {
+		const { month, day } = parseFirstSecond(fullDateMatch[1], fullDateMatch[2])
+		const year = parseInt(fullDateMatch[3])
+		return new Date(year, month, day, 0, 0, 0)
+	}
+
+	// Try parsing NN/NN/YYYY TIME (e.g., "01/04/2025 3:00 PM")
+	// US: MM/DD/YYYY TIME, non-US: DD/MM/YYYY TIME
+	const fullDateTimeMatch = text.match(/^(\d{2})\/(\d{2})\/(\d{4})\s+(\d{1,2}):(\d{2})\s+(AM|PM)$/i)
+	if (fullDateTimeMatch) {
+		const { month, day } = parseFirstSecond(fullDateTimeMatch[1], fullDateTimeMatch[2])
+		const year = parseInt(fullDateTimeMatch[3])
+		let hours = parseInt(fullDateTimeMatch[4])
+		const minutes = parseInt(fullDateTimeMatch[5])
+		const meridiem = fullDateTimeMatch[6]
+
+		if (meridiem.toUpperCase() === 'PM' && hours !== 12) hours += 12
+		if (meridiem.toUpperCase() === 'AM' && hours === 12) hours = 0
+
+		return new Date(year, month, day, hours, minutes, 0)
+	}
+
+	// Fallback to standard Date parsing (e.g., ISO strings)
+	const date = new Date(text)
+	return isNaN(date.getTime()) ? null : date
+}
diff --git a/frontend/src/routes/(root)/(logged)/assets/+page.svelte b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
index 5679187c1e..6a8c261b14 100644
--- a/frontend/src/routes/(root)/(logged)/assets/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
@@ -23,28 +23,47 @@
 	import { AlertTriangle, Loader2, SettingsIcon, StarIcon } from 'lucide-svelte'
 	import { StaleWhileLoading, useInfiniteQuery, useScrollToBottom } from '$lib/svelte5Utils.svelte'
 	import { Debounced, resource, watch, type ResourceReturn } from 'runed'
-	import Label from '$lib/components/Label.svelte'
-	import MultiSelect from '$lib/components/select/MultiSelect.svelte'
-	import TextInput from '$lib/components/text_input/TextInput.svelte'
 	import RefreshButton from '$lib/components/common/button/RefreshButton.svelte'
 	import Section from '$lib/components/Section.svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { favoriteManager, parseFavoriteAsset } from '$lib/components/sidebar/FavoriteMenu.svelte'
+	import FilterSearchbar, {
+		useUrlSyncedFilterInstance
+	} from '$lib/components/FilterSearchbar.svelte'
+	import { buildAssetsFilterSchema } from '$lib/components/assets/assetsFilter'
+	import { untrack } from 'svelte'
 
 	interface AssetCursor {
 		created_at?: string
 		id?: number
 	}
 
-	let assetPathFilter: string = $state('')
-	let usagePathFilter: string = $state('')
-	let assetKindsFilter: Array<AssetKind> = $state([])
+	// Collect unique values for filter autocomplete
+	let allPaths: string[] = $state([])
+	let allAssetKinds: string[] = $state([
+		's3object',
+		'resource',
+		'variable',
+		'ducklake',
+		'datatable'
+	])
+
+	// FilterSearchbar setup
+	let assetsFilterSchema = $derived(
+		buildAssetsFilterSchema({
+			paths: allPaths,
+			assetKinds: allAssetKinds
+		})
+	)
+	let filterValues = useUrlSyncedFilterInstance(untrack(() => assetsFilterSchema))
 
 	let filters = new Debounced(
 		() => ({
-			assetPath: assetPathFilter || undefined,
-			usagePath: usagePathFilter || undefined,
-			assetKinds: assetKindsFilter.join(',') || undefined
+			assetPath: filterValues.val.asset_path || undefined,
+			usagePath: filterValues.val.usage_path || undefined,
+			assetKinds: filterValues.val.asset_kinds || undefined,
+			path: filterValues.val.path || undefined,
+			columns: filterValues.val.columns || undefined
 		}),
 		500
 	)
@@ -252,29 +271,15 @@
 			</div>
 		</Section>
 		<Section label="Latest assets used">
-			<div class="flex gap-2 mb-4 items-end justify-between">
-				<div class="flex gap-2">
-					<Label class="lg:min-w-[16rem] max-w-[30rem]" label="Asset path">
-						<TextInput bind:value={assetPathFilter} />
-					</Label>
-					<Label class="lg:min-w-[16rem] max-w-[30rem]" label="Usage path">
-						<TextInput bind:value={usagePathFilter} />
-					</Label>
-					<Label class="lg:min-w-[8rem] max-w-[30rem]" label="Asset kinds">
-						<MultiSelect
-							hideMainClearBtn
-							bind:value={assetKindsFilter}
-							items={[
-								{ label: 'S3 Object', value: 's3object' },
-								{ label: 'Ducklake', value: 'ducklake' },
-								{ label: 'Data Table', value: 'datatable' },
-								{ label: 'Resource', value: 'resource' }
-							]}
-						/>
-					</Label>
-				</div>
+			{#snippet action()}
 				<RefreshButton onClick={() => assetsQuery.reset()} loading={assetsQuery.isLoading} />
-			</div>
+			{/snippet}
+			<FilterSearchbar
+				schema={assetsFilterSchema}
+				bind:value={filterValues.val}
+				placeholder="Filter assets..."
+				class="mb-4"
+			/>
 			{@render table()}
 			{#if assetsQuery.isFetchingNextPage}
 				<Loader2 size={32} class="mx-auto my-4 text-primary animate-spin" />
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index b3028f9844..51ca41d8ba 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -9,14 +9,16 @@
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import Dropdown from '$lib/components/DropdownV2.svelte'
-	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import { resourceTypesStore } from '$lib/components/resourceTypesStore'
 	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
-	import SearchItems from '$lib/components/SearchItems.svelte'
+	import FilterSearchbar, {
+		useUrlSyncedFilterInstance
+	} from '$lib/components/FilterSearchbar.svelte'
+	import { buildResourcesFilterSchema } from '$lib/components/resources/resourcesFilter'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import ShareModal from '$lib/components/ShareModal.svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
@@ -81,9 +83,10 @@
 	let resources: ResourceW[] | undefined = $state()
 	let resourceTypes: ResourceTypeW[] | undefined = $state()
 
-	let filteredItems: (ResourceW & { marked?: string })[] | undefined = $state(undefined) as
-		| (ResourceW & { marked?: string })[]
-		| undefined
+	// Collect unique paths, types, owners for filter autocomplete
+	let allPaths: string[] = $state([])
+	let allResourceTypes: string[] = $state([])
+	let allOwners: string[] = $state([])
 
 	let resourceTypeViewer: Drawer | undefined = $state(undefined)
 	let resourceTypeViewerObj = $state({
@@ -120,12 +123,27 @@
 		types: true
 	})
 
-	let filter = $state('')
-	let ownerFilter: string | undefined = $state(undefined)
-
 	let showCreateButtons = $state(false)
 
-	let typeFilter: string | undefined = $state(undefined)
+	// FilterSearchbar setup
+	let userFoldersFilterType = $derived(
+		$userStore?.is_super_admin && $userStore.username.includes('@')
+			? 'only f/*'
+			: $userStore?.is_admin || $userStore?.is_super_admin
+				? 'u/username and f/*'
+				: undefined
+	)
+	let resourcesFilterSchema = $derived(
+		buildResourcesFilterSchema({
+			paths: allPaths,
+			resourceTypes: allResourceTypes,
+			owners: allOwners,
+			showUserFoldersFilter: userFoldersFilterType !== undefined,
+			userFoldersLabel:
+				userFoldersFilterType === 'only f/*' ? 'Only f/*' : `Only u/${$userStore?.username} and f/*`
+		})
+	)
+	let filters = useUrlSyncedFilterInstance(untrack(() => resourcesFilterSchema))
 
 	async function loadResources(): Promise<void> {
 		resources = await loadResourceInternal(undefined, 'cache,state')
@@ -146,19 +164,48 @@
 		resourceType: string | undefined,
 		resourceTypeExclude: string | undefined
 	): Promise<ResourceW[]> {
-		return (
-			await ResourceService.listResource({
-				workspace: $workspaceStore!,
-				resourceTypeExclude,
-				resourceType
-			})
-		).map((x) => {
+		const currentFilters = filters.val
+
+		// Build API parameters from filters
+		const apiParams: any = {
+			workspace: $workspaceStore!,
+			resourceTypeExclude,
+			resourceType: resourceType || (currentFilters.resource_type as string | undefined)
+		}
+
+		if (currentFilters.path) {
+			// path filter can be comma-separated for multiple values
+			apiParams.path = currentFilters.path
+		}
+		if (currentFilters.path_start) {
+			apiParams.pathStart = currentFilters.path_start
+		}
+		if (currentFilters.description) {
+			apiParams.description = currentFilters.description
+		}
+		if (currentFilters.value) {
+			apiParams.value = currentFilters.value
+		}
+		if (currentFilters.owner) {
+			apiParams.pathStart = currentFilters.owner
+		}
+
+		const result = (await ResourceService.listResource(apiParams)).map((x) => {
 			return {
 				canWrite:
 					canWrite(x.path, x.extra_perms!, $userStore) && $workspaceStore! == x.workspace_id,
 				...x
 			}
 		})
+
+		// Extract unique values for autocomplete
+		allPaths = Array.from(new Set(result.map((x) => x.path))).sort()
+		allResourceTypes = Array.from(new Set(result.map((x) => x.resource_type))).sort()
+		allOwners = Array.from(
+			new Set(result.map((x) => x.path.split('/').slice(0, 2).join('/')))
+		).sort()
+
+		return result
 	}
 
 	async function loadResourceTypes(): Promise<void> {
@@ -409,59 +456,39 @@
 		return resourceNameToFileExtMap[resourceName]
 	}
 
-	let owners = $derived(
-		Array.from(
-			new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-		).sort()
-	)
-	let types = $derived(Array.from(new Set(filteredItems?.map((x) => x.resource_type))).sort())
-	$effect(() => {
-		if ($workspaceStore) {
-			ownerFilter = undefined
-		}
-	})
+	// Current resources based on tab
 	let currentResources = $derived(
 		tab == 'cache' ? cacheResources : tab == 'states' ? stateResources : resources
 	)
-	let preFilteredItemsOwners = $derived(
-		ownerFilter == undefined
-			? currentResources
-			: currentResources?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
-	)
-	let preFilteredType = $derived.by(() => {
-		let l =
-			typeFilter == undefined
-				? preFilteredItemsOwners?.filter((x) => {
-						return tab === 'workspace'
-							? x.resource_type !== 'app_theme' &&
-									x.resource_type !== 'state' &&
-									x.resource_type !== 'cache'
-							: tab === 'states'
-								? x.resource_type === 'state'
-								: tab === 'cache'
-									? x.resource_type === 'cache'
-									: tab === 'theme'
-										? x.resource_type === 'app_theme'
-										: true
-					})
-				: preFilteredItemsOwners?.filter((x) => {
-						return (
-							x.resource_type === typeFilter &&
-							(tab === 'workspace'
-								? x.resource_type !== 'app_theme' &&
-									x.resource_type !== 'state' &&
-									x.resource_type !== 'cache'
-								: true)
-						)
-					})
-		if (filterUserFolders) {
-			l = l?.filter((item) => {
-				if (filterUserFoldersType === 'only f/*') return item.path.startsWith('f/')
-				if (filterUserFoldersType === 'u/username and f/*')
+
+	// Filter resources client-side for user folder filtering (admin feature)
+	let filteredItems = $derived.by(() => {
+		let items = currentResources
+		if (filters.val.user_folders_only && items) {
+			items = items.filter((item) => {
+				if (userFoldersFilterType === 'only f/*') return item.path.startsWith('f/')
+				if (userFoldersFilterType === 'u/username and f/*')
 					return item.path.startsWith('f/') || item.path.startsWith(`u/${$userStore?.username}/`)
+				return true
+			})
+		}
+		return items
+	})
+
+	// Reload resources when filters change
+	$effect(() => {
+		filters.val
+		if ($workspaceStore) {
+			untrack(() => {
+				if (tab === 'workspace' || tab === 'theme') {
+					loadResources()
+				} else if (tab === 'cache') {
+					loadCache()
+				} else if (tab === 'states') {
+					loadState()
+				}
 			})
 		}
-		return l
 	})
 	$effect(() => {
 		if ($workspaceStore && $userStore) {
@@ -482,15 +509,6 @@
 	})
 
 	let dbManagerDrawer = $derived(globalDbManagerDrawer.val) as any
-
-	let filterUserFolders = $state(false)
-	let filterUserFoldersType: 'only f/*' | 'u/username and f/*' | undefined = $derived(
-		$userStore?.is_super_admin && $userStore.username.includes('@')
-			? 'only f/*'
-			: $userStore?.is_admin || $userStore?.is_super_admin
-				? 'u/username and f/*'
-				: undefined
-	)
 </script>
 
 <ConfirmationModal
@@ -711,13 +729,6 @@
 	</DrawerContent>
 </Drawer>
 
-<SearchItems
-	{filter}
-	items={preFilteredType}
-	bind:filteredItems
-	f={(x) => x.path + ' ' + x.resource_type + ' ' + x.description + ' '}
-/>
-
 {#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.resources}
 	<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>
@@ -820,33 +831,20 @@
 			</div>
 		</div>
 		{#if tab == 'workspace' || tab == 'states' || tab == 'cache' || tab == 'theme'}
-			<div class="pt-2">
-				<input placeholder="Search Resource" bind:value={filter} class="input mt-1" />
-			</div>
-			<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
-			{#if tab != 'states' && tab != 'cache'}
-				<ListFilters
-					queryName="app_filter"
-					bind:selectedFilter={typeFilter}
-					filters={types}
-					resourceType
-				/>
-			{:else}
-				<div class="h-4"></div>
-			{/if}
+			<FilterSearchbar
+				schema={resourcesFilterSchema}
+				bind:value={filters.val}
+				placeholder="Filter resources..."
+				class="mt-4"
+				presets={[
+					{
+						name: resourcesFilterSchema.user_folders_only?.label ?? '?',
+						value: 'user_folders_only:\\ true'
+					}
+				]}
+			/>
 
-			<div class="overflow-x-auto pb-40 mt-4"
-				><div class="flex flex-row items-center justify-end gap-4 pb-2">
-					{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
-						<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
-					{:else if $userStore?.is_admin || $userStore?.is_super_admin}
-						<Toggle
-							size="xs"
-							bind:checked={filterUserFolders}
-							options={{ right: `Only u/${$userStore.username} and f/*` }}
-						/>
-					{/if}
-				</div>
+			<div class="overflow-x-auto pb-40 mt-4">
 				{#if loading.resources}
 					<Skeleton layout={[0.5, [2], 1]} />
 					{#each new Array(6) as _}
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index 61e498a58b..94ef6b5cc4 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -17,9 +17,7 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { userStore, workspaceStore, userWorkspaces, enterpriseLicense } from '$lib/stores'
 	import {
-		Calendar,
 		Circle,
-		Code,
 		Copy,
 		Eye,
 		FileUp,
@@ -33,15 +31,14 @@
 	} from 'lucide-svelte'
 	import { goto } from '$lib/navigation'
 	import { sendUserToast } from '$lib/toast'
-	import SearchItems from '$lib/components/SearchItems.svelte'
+	import FilterSearchbar, { useUrlSyncedFilterInstance } from '$lib/components/FilterSearchbar.svelte'
+	import { buildSchedulesFilterSchema } from '$lib/components/schedules/schedulesFilter'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
 	import RowIcon from '$lib/components/common/table/RowIcon.svelte'
 	import JobPreview from '$lib/components/jobs/JobPreview.svelte'
-	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
-	import { setQuery } from '$lib/navigation'
-	import { onMount, untrack } from 'svelte'
+	import { untrack } from 'svelte'
 	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import { ALL_DEPLOYABLE, isDeployable } from '$lib/utils_deployable'
 	import { runScheduleNow } from '$lib/components/triggers/scheduled/utils'
@@ -66,9 +63,41 @@
 	}
 	getDeployUiSettings()
 	async function loadSchedules(): Promise<void> {
-		schedules = (await ScheduleService.listSchedules({ workspace: $workspaceStore! })).map((x) => {
+		const currentFilters = filters.val
+
+		// Build API parameters from filters
+		const apiParams: any = {
+			workspace: $workspaceStore!
+		}
+
+		if (currentFilters.schedule_path) {
+			apiParams.schedulePath = currentFilters.schedule_path
+		}
+		if (currentFilters.path_start) {
+			apiParams.pathStart = currentFilters.path_start
+		}
+		if (currentFilters.path) {
+			apiParams.path = currentFilters.path
+		}
+		if (currentFilters.description) {
+			apiParams.description = currentFilters.description
+		}
+		if (currentFilters.summary) {
+			apiParams.summary = currentFilters.summary
+		}
+		if (currentFilters.args) {
+			apiParams.args = currentFilters.args
+		}
+
+		const result = (await ScheduleService.listSchedules(apiParams)).map((x) => {
 			return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
 		})
+
+		// Extract unique values for autocomplete
+		allPaths = Array.from(new Set(result.map((x) => x.path))).sort()
+		allScriptPaths = Array.from(new Set(result.map((x) => x.script_path))).sort()
+
+		schedules = result
 		loading = false
 		// after the schedule core data has been loaded, load all the job stats
 		// TODO: we could potentially not reload the job stats on every call to loadSchedules, but for now it's
@@ -76,6 +105,14 @@
 		loadSchedulesWithJobStats()
 	}
 
+	// Reload schedules when filters change
+	$effect(() => {
+		filters.val
+		if ($workspaceStore) {
+			untrack(() => loadSchedules())
+		}
+	})
+
 	async function loadSchedulesWithJobStats(): Promise<void> {
 		loadingSchedulesWithJobStats = true
 		let schedulesWithJobsByPath = new Map<string, ScheduleW>()
@@ -116,35 +153,50 @@
 	})
 	let scheduleEditor: ScheduleEditor | undefined = $state()
 
-	let filteredItems: (ScheduleW & { marked?: any })[] | undefined = $state([])
-	let items: typeof filteredItems | undefined = $state([])
-	let filter = $state('')
-	let ownerFilter: string | undefined = $state(undefined)
-	let nbDisplayed = $state(15)
+	// Collect unique values for filter autocomplete
+	let allPaths: string[] = $state([])
+	let allScriptPaths: string[] = $state([])
 
+	// FilterSearchbar setup
+	let userFoldersFilterType = $derived(
+		$userStore?.is_super_admin && $userStore.username.includes('@')
+			? 'only f/*'
+			: $userStore?.is_admin || $userStore?.is_super_admin
+				? 'u/username and f/*'
+				: undefined
+	)
+	let schedulesFilterSchema = $derived(
+		buildSchedulesFilterSchema({
+			paths: allPaths,
+			scriptPaths: allScriptPaths,
+			showUserFoldersFilter: userFoldersFilterType !== undefined,
+			userFoldersLabel:
+				userFoldersFilterType === 'only f/*'
+					? 'Only f/*'
+					: `Only u/${$userStore?.username} and f/*`
+		})
+	)
+	let filters = useUrlSyncedFilterInstance(untrack(() => schedulesFilterSchema))
+
+	let nbDisplayed = $state(15)
 	let filterEnabledDisabled: 'all' | 'enabled' | 'disabled' = $state('all')
 
 	const SCHEDULE_PATH_KIND_FILTER_SETTING = 'schedulePathKindFilter'
-	const FILTER_USER_FOLDER_SETTING_NAME = 'user_and_folders_only'
 	let selectedFilterKind = $state(
 		(getLocalSetting(SCHEDULE_PATH_KIND_FILTER_SETTING) as 'schedule' | 'script_flow') ?? 'schedule'
 	)
-	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
 	$effect(() => {
 		storeLocalSetting(SCHEDULE_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	$effect(() => {
-		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
-	})
 
 	function filterItemsPathsBaseOnUserFilters(
 		item: ScheduleW,
 		selectedFilterKind: 'schedule' | 'script_flow',
-		filterUserFolders: boolean
+		userFoldersOnly: boolean
 	) {
 		if ($workspaceStore == 'admins') return true
-		if (filterUserFolders) {
+		if (userFoldersOnly) {
 			if (selectedFilterKind === 'schedule') {
 				return (
 					!item.path.startsWith('u/') || item.path.startsWith('u/' + $userStore?.username + '/')
@@ -169,95 +221,21 @@
 		if (filterEnabledDisabled === 'disabled') return !item.enabled
 	}
 
-	let preFilteredItems = $derived.by(() => {
-		return ownerFilter != undefined
-			? selectedFilterKind === 'schedule'
-				? schedules?.filter(
-						(x) =>
-							x.path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders) &&
-							filterItemsBasedOnEnabledDisabled(x, filterEnabledDisabled)
-					)
-				: schedules?.filter(
-						(x) =>
-							x.script_path.startsWith(ownerFilter + '/') &&
-							filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders) &&
-							filterItemsBasedOnEnabledDisabled(x, filterEnabledDisabled)
-					)
-			: schedules?.filter(
-					(x) =>
-						filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, filterUserFolders) &&
-						filterItemsBasedOnEnabledDisabled(x, filterEnabledDisabled)
-				)
+	// Filter schedules client-side for enabled/disabled and user folders
+	let filteredItems = $derived.by(() => {
+		return schedules?.filter(
+			(x) =>
+				filterItemsPathsBaseOnUserFilters(x, selectedFilterKind, !!filters.val.user_folders_only) &&
+				filterItemsBasedOnEnabledDisabled(x, filterEnabledDisabled)
+		)
 	})
 
-	$effect(() => {
-		if ($workspaceStore) {
-			ownerFilter = undefined
-		}
-	})
-
-	let owners = $derived(
-		selectedFilterKind === 'schedule'
-			? Array.from(
-					new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-				).sort()
-			: Array.from(
-					new Set(filteredItems?.map((x) => x.script_path.split('/').slice(0, 2).join('/')) ?? [])
-				).sort()
-	)
-
-	$effect(() => {
-		items = filter !== '' ? filteredItems : preFilteredItems
-	})
-
-	function updateQueryFilters(selectedFilterKind, filterUserFolders, filterEnabledDisabled) {
-		setQuery(new URL(window.location.href), 'filter_kind', selectedFilterKind).then(() => {
-			setQuery(
-				new URL(window.location.href),
-				'user_and_folders_only',
-				String(filterUserFolders)
-			).then(() => {
-				setQuery(new URL(window.location.href), 'status', filterEnabledDisabled)
-			})
-		})
-	}
-
-	function loadQueryFilters() {
-		let url = new URL(window.location.href)
-		let queryFilterKind = url.searchParams.get('filter_kind')
-		let queryFilterUserFolders = url.searchParams.get('user_and_folders_only')
-		let queryFilterEnabledDisabled = url.searchParams.get('status')
-		if (queryFilterKind) {
-			selectedFilterKind = queryFilterKind as 'schedule' | 'script_flow'
-		}
-		if (queryFilterUserFolders) {
-			filterUserFolders = queryFilterUserFolders == 'true'
-		}
-		if (queryFilterEnabledDisabled) {
-			filterEnabledDisabled = queryFilterEnabledDisabled as 'all' | 'enabled' | 'disabled'
-		}
-	}
-
-	onMount(() => {
-		loadQueryFilters()
-	})
-
-	$effect(() => {
-		updateQueryFilters(selectedFilterKind, filterUserFolders, filterEnabledDisabled)
-	})
+	let items = $derived(filteredItems)
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 <ScheduleEditor onUpdate={loadSchedules} bind:this={scheduleEditor} />
 
-<SearchItems
-	{filter}
-	items={preFilteredItems}
-	bind:filteredItems
-	f={(x) => (x.summary ?? '') + ' ' + x.path + ' (' + x.script_path + ')'}
-/>
-
 {#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.schedules}
 	<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>
@@ -283,19 +261,9 @@
 		</PageHeader>
 		<div class="w-full h-full flex flex-col">
 			<div class="w-full pb-4 pt-6">
-				<input type="text" placeholder="Search schedule" bind:value={filter} class="search-item" />
-				<div class="flex flex-row items-center gap-2 mt-2">
-					<div class="text-xs font-semibold text-emphasis shrink-0"> Filter by path of </div>
-					<ToggleButtonGroup bind:selected={selectedFilterKind}>
-						{#snippet children({ item })}
-							<ToggleButton value="schedule" label="Schedule" icon={Calendar} {item} />
-							<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
-						{/snippet}
-					</ToggleButtonGroup>
-				</div>
-				<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
+				<FilterSearchbar schema={schedulesFilterSchema} bind:value={filters.val} />
 
-				<div class="flex flex-row items-center justify-end gap-4">
+				<div class="flex flex-row items-center justify-end gap-4 mt-4">
 					<ToggleButtonGroup class="w-auto" bind:selected={filterEnabledDisabled}>
 						{#snippet children({ item })}
 							<ToggleButton small value="all" label="All" {item} />
@@ -303,15 +271,6 @@
 							<ToggleButton small value="disabled" label="Disabled" {item} />
 						{/snippet}
 					</ToggleButtonGroup>
-					{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
-						<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
-					{:else if $userStore?.is_admin || $userStore?.is_super_admin}
-						<Toggle
-							size="xs"
-							bind:checked={filterUserFolders}
-							options={{ right: `Only u/${$userStore.username} and f/*` }}
-						/>
-					{/if}
 				</div>
 			</div>
 			{#if loading}
@@ -322,7 +281,7 @@
 				<div class="text-center text-xs font-semibold text-emphasis mt-2"> No schedules </div>
 			{:else if items?.length}
 				<div class="border rounded-md divide-y">
-					{#each items.slice(0, nbDisplayed) as { path, error, summary, edited_by, edited_at, schedule, timezone, enabled, script_path, is_flow, extra_perms, canWrite, marked, jobs, paused_until } (path)}
+					{#each items.slice(0, nbDisplayed) as { path, error, summary, edited_by, edited_at, schedule, timezone, enabled, script_path, is_flow, extra_perms, canWrite, jobs, paused_until } (path)}
 						{@const href = `${is_flow ? '/flows/get' : '/scripts/get'}/${script_path}`}
 						{@const avg_s = jobs
 							? jobs.reduce((acc, x) => acc + x.duration_ms, 0) / jobs.length
@@ -343,13 +302,7 @@
 									<div
 										class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate"
 									>
-										{#if marked}
-											<span class="text-xs">
-												{@html marked}
-											</span>
-										{:else}
-											{summary || script_path}
-										{/if}
+										{summary || script_path}
 									</div>
 									<div class="text-secondary text-xs truncate text-left">
 										schedule: {path}
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index 262219e580..ab5e4fc23b 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -5,11 +5,13 @@
 	import ContextualVariableEditor from '$lib/components/ContextualVariableEditor.svelte'
 	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import Dropdown from '$lib/components/DropdownV2.svelte'
-	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import NoDirectDeployAlert from '$lib/components/NoDirectDeployAlert.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import Popover from '$lib/components/Popover.svelte'
-	import SearchItems from '$lib/components/SearchItems.svelte'
+	import FilterSearchbar, {
+		useUrlSyncedFilterInstance
+	} from '$lib/components/FilterSearchbar.svelte'
+	import { buildVariablesFilterSchema } from '$lib/components/variables/variablesFilter'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import ShareModal from '$lib/components/ShareModal.svelte'
 	import Cell from '$lib/components/table/Cell.svelte'
@@ -17,7 +19,6 @@
 	import Head from '$lib/components/table/Head.svelte'
 	import Row from '$lib/components/table/Row.svelte'
 	import TableSimple from '$lib/components/TableSimple.svelte'
-	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import VariableEditor from '$lib/components/VariableEditor.svelte'
 	import type { ContextualVariable, ListableVariable, WorkspaceDeployUISettings } from '$lib/gen'
@@ -43,11 +44,31 @@
 
 	type ListableVariableW = ListableVariable & { canWrite: boolean }
 
-	let filter = $state('')
 	let variables = $state(undefined) as ListableVariableW[] | undefined
-	let filteredItems = $state(undefined) as (ListableVariableW & { marked?: string })[] | undefined
-
 	let showCreateButtons = $state(false)
+
+	// Collect unique values for filter autocomplete
+	let allPaths: string[] = $state([])
+	let allOwners: string[] = $state([])
+
+	// FilterSearchbar setup
+	let userFoldersFilterType = $derived(
+		$userStore?.is_super_admin && $userStore.username.includes('@')
+			? 'only f/*'
+			: $userStore?.is_admin || $userStore?.is_super_admin
+				? 'u/username and f/*'
+				: undefined
+	)
+	let variablesFilterSchema = $derived(
+		buildVariablesFilterSchema({
+			paths: allPaths,
+			owners: allOwners,
+			showUserFoldersFilter: userFoldersFilterType !== undefined,
+			userFoldersLabel:
+				userFoldersFilterType === 'only f/*' ? 'Only f/*' : `Only u/${$userStore?.username} and f/*`
+		})
+	)
+	let filters = useUrlSyncedFilterInstance(untrack(() => variablesFilterSchema))
 	let contextualVariables: ContextualVariable[] = $state([])
 	let shareModal: ShareModal | undefined = $state()
 	let variableEditor: VariableEditor | undefined = $state()
@@ -59,45 +80,69 @@
 	let deleteConfirmedCallback: (() => void) | undefined = $state(undefined)
 	let open = $derived(Boolean(deleteConfirmedCallback))
 
-	let owners = $derived(
-		Array.from(
-			new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-		).sort()
-	)
-
-	let ownerFilter: string | undefined = $state(undefined)
-
-	$effect(() => {
-		if ($workspaceStore) {
-			ownerFilter = undefined
-		}
-	})
-
-	let preFilteredItems = $derived.by(() => {
-		let l =
-			ownerFilter == undefined
-				? variables
-				: variables?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
-		if (filterUserFolders) {
-			l = l?.filter((item) => {
-				if (filterUserFoldersType === 'only f/*') return item.path.startsWith('f/')
-				if (filterUserFoldersType === 'u/username and f/*')
+	// Filter variables client-side for user folder filtering (admin feature)
+	let filteredItems = $derived.by(() => {
+		let items = variables
+		if (filters.val.user_folders_only && items) {
+			items = items.filter((item) => {
+				if (userFoldersFilterType === 'only f/*') return item.path.startsWith('f/')
+				if (userFoldersFilterType === 'u/username and f/*')
 					return item.path.startsWith('f/') || item.path.startsWith(`u/${$userStore?.username}/`)
+				return true
 			})
 		}
-		return l
+		return items
 	})
 
 	// If relative, the dropdown is positioned relative to its button
 	async function loadVariables(): Promise<void> {
-		variables = (await VariableService.listVariable({ workspace: $workspaceStore! })).map((x) => {
+		const currentFilters = filters.val
+
+		// Build API parameters from filters
+		const apiParams: any = {
+			workspace: $workspaceStore!
+		}
+
+		if (currentFilters.path) {
+			apiParams.path = currentFilters.path
+		}
+		if (currentFilters.path_start) {
+			apiParams.pathStart = currentFilters.path_start
+		}
+		if (currentFilters.description) {
+			apiParams.description = currentFilters.description
+		}
+		if (currentFilters.value) {
+			apiParams.value = currentFilters.value
+		}
+		if (currentFilters.owner) {
+			apiParams.pathStart = currentFilters.owner
+		}
+
+		const result = (await VariableService.listVariable(apiParams)).map((x) => {
 			return {
 				canWrite: canWrite(x.path, x.extra_perms!, $userStore) && x.workspace_id == $workspaceStore,
 				...x
 			}
 		})
+
+		// Extract unique values for autocomplete
+		allPaths = Array.from(new Set(result.map((x) => x.path))).sort()
+		allOwners = Array.from(
+			new Set(result.map((x) => x.path.split('/').slice(0, 2).join('/')))
+		).sort()
+
+		variables = result
 	}
 
+	// Reload variables when filters change
+	$effect(() => {
+		filters.val
+		if ($workspaceStore) {
+			untrack(() => loadVariables())
+		}
+	})
+
 	let deployUiSettings: WorkspaceDeployUISettings | undefined = $state(undefined)
 
 	async function getDeployUiSettings() {
@@ -154,26 +199,10 @@
 			loadContextualVariables()
 		}, 5000)
 	}
-
-	let filterUserFolders = $state(false)
-	let filterUserFoldersType: 'only f/*' | 'u/username and f/*' | undefined = $derived(
-		$userStore?.is_super_admin && $userStore.username.includes('@')
-			? 'only f/*'
-			: $userStore?.is_admin || $userStore?.is_super_admin
-				? 'u/username and f/*'
-				: undefined
-	)
 </script>
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 
-<SearchItems
-	{filter}
-	items={preFilteredItems}
-	bind:filteredItems
-	f={(x) => x.path + ' ' + x.description}
-/>
-
 {#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.variables}
 	<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>
@@ -210,7 +239,7 @@
 				</div>
 			{/if}
 		</PageHeader>
-		<NoDirectDeployAlert onUpdateCanEditStatus={(v) => showCreateButtons = v} />
+		<NoDirectDeployAlert onUpdateCanEditStatus={(v) => (showCreateButtons = v)} />
 
 		<VariableEditor bind:this={variableEditor} on:create={loadVariables} />
 		<ContextualVariableEditor
@@ -238,24 +267,19 @@
 			</Tab>
 		</Tabs>
 		{#if tab == 'workspace'}
-			<div class="pt-2">
-				<input placeholder="Search Variable" bind:value={filter} class="input mt-1" />
-			</div>
-			<div class="min-h-[56px]">
-				<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
-			</div>
-			<div class="relative overflow-x-auto pb-40 pr-4">
-				<div class="flex flex-row items-center justify-end gap-4 pb-2">
-					{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
-						<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
-					{:else if $userStore?.is_admin || $userStore?.is_super_admin}
-						<Toggle
-							size="xs"
-							bind:checked={filterUserFolders}
-							options={{ right: `Only u/${$userStore.username} and f/*` }}
-						/>
-					{/if}
-				</div>
+			<FilterSearchbar
+				class="my-4"
+				schema={variablesFilterSchema}
+				bind:value={filters.val}
+				placeholder="Filter variables..."
+				presets={[
+					{
+						name: variablesFilterSchema.user_folders_only?.label ?? '?',
+						value: 'user_folders_only:\\ true'
+					}
+				]}
+			/>
+			<div class="relative overflow-x-auto pb-40">
 				{#if !filteredItems}
 					<Skeleton layout={[0.5, [2], 1]} />
 					{#each new Array(3) as _}
@@ -281,7 +305,7 @@
 							</tr>
 						</Head>
 						<tbody class="divide-y">
-							{#each filteredItems as { path, value, is_secret, description, extra_perms, canWrite, account, is_refreshed, is_expired, refresh_error, is_linked, marked }}
+							{#each filteredItems as { path, value, is_secret, description, extra_perms, canWrite, account, is_refreshed, is_expired, refresh_error, is_linked }}
 								<Row>
 									<Cell class="!px-0 text-center w-12" first>
 										<SharedBadge {canWrite} extraPerms={extra_perms} />
@@ -293,11 +317,7 @@
 											onclick={() => variableEditor?.editVariable(path)}
 											href="#{path}"
 										>
-											{#if marked}
-												{@html marked}
-											{:else}
-												{path}
-											{/if}
+											{path}
 										</a>
 									</Cell>
 									<Cell>