windmill-components 1.558.3 → 1.596.0

package/package/components/runs/RunRow.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">import { base } from '../../base';
 import { goto } from '../../navigation';
-import { displayDate, truncateHash, truncateRev, isScriptPreview, isJobSelectable, msToReadableTime, isFlowPreview } from '../../utils';
+import { displayDate, truncateHash, truncateRev, isScriptPreview, isJobSelectable, msToReadableTime, isFlowPreview, getJobKindIcon } from '../../utils';
 import { Badge, Button } from '../common';
 import ScheduleEditor from '../triggers/schedules/ScheduleEditor.svelte';
-import BarsStaggered from '../icons/BarsStaggered.svelte';
-import { Bot, Calendar, Check, Clock, Code, ExternalLink, FastForward, Hourglass, ListFilterPlus, Package, Play, ShieldQuestion, X } from 'lucide-svelte';
+import { Calendar, Check, Clock, ExternalLink, FastForward, Hourglass, ListFilterPlus, Play, ShieldQuestion, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import TimeAgo from '../TimeAgo.svelte';
 import { forLater } from '../../forLater';
@@ -13,36 +12,12 @@ import Portal from '../Portal.svelte';
 import WaitTimeWarning from '../common/waitTimeWarning/WaitTimeWarning.svelte';
 import DropdownV2 from '../DropdownV2.svelte';
 import { Tooltip } from '../meltComponents';
-import { GitIcon } from '../icons';
 import RunLabels from './RunLabels.svelte';
 import './runs-grid.css';
 const dispatch = createEventDispatcher();
 let { job, selected = false, containerWidth = 0, containsLabel = false, showTag = true, activeLabel, selectionMode = false } = $props();
 let scheduleEditor = $state(undefined);
 let isExternal = $derived(job && job.id === '-');
-function getJobKindIcon(jobKind) {
-    if (jobKind === 'flow' || isFlowPreview(jobKind)) {
-        return BarsStaggered;
-    }
-    else if (jobKind === 'deploymentcallback') {
-        return GitIcon;
-    }
-    else if (jobKind === 'dependencies' ||
-        jobKind === 'appdependencies' ||
-        jobKind === 'flowdependencies') {
-        return Package;
-    }
-    else if (jobKind === 'script' ||
-        isScriptPreview(jobKind) ||
-        jobKind === 'script_hub' ||
-        jobKind === 'singlestepflow') {
-        return Code;
-    }
-    else if (jobKind === 'aiagent') {
-        return Bot;
-    }
-    return Code;
-}
 let labelWidth = $state(0);
 let isJobRecent = $state(true);
 </script>
@@ -55,7 +30,7 @@ let isJobRecent = $state(true);
 <div
 	class={twMerge(
 		'hover:bg-surface-hover cursor-pointer',
-		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+		selected ? 'bg-surface-accent-selected' : '',
 		'grid items-center h-full'
 	)}
 	class:grid-runs-table={!containsLabel && !selectionMode && showTag}
@@ -129,9 +104,14 @@ let isJobRecent = $state(true);
 	<div class="overflow-hidden min-w-0">
 		<div class="flex flex-row items-center gap-1 text-secondary text-2xs">
 			{#if job}
-				{#if 'started_at' in job && job.started_at}
-					{isJobRecent ? 'Started' : ''}
-					<TimeAgo bind:isRecent={isJobRecent} agoOnlyIfRecent date={job.started_at ?? ''} />
+				{#if ('started_at' in job && job.started_at) || ('completed_at' in job && job.completed_at)}
+					{#if 'completed_at' in job && job.completed_at}
+						{isJobRecent ? 'Ended' : ''}
+						<TimeAgo bind:isRecent={isJobRecent} agoOnlyIfRecent date={job.completed_at ?? ''} />
+					{:else if 'started_at' in job && job.started_at}
+						{isJobRecent ? 'Started' : ''}
+						<TimeAgo bind:isRecent={isJobRecent} agoOnlyIfRecent date={job.started_at ?? ''} />
+					{/if}
 					{#if job && (job.self_wait_time_ms || job.aggregate_wait_time_ms)}
 						<WaitTimeWarning
 							self_wait_time_ms={job.self_wait_time_ms}
@@ -148,19 +128,16 @@ let isJobRecent = $state(true);
 						Cancelling job... (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
 					{/if}
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
-					Waiting for executor (scheduled for <TimeAgo
-						agoOnlyIfRecent
-						date={job.scheduled_for || ''}
-					/>)
+					Waiting executor (<TimeAgo agoOnlyIfRecent date={job.scheduled_for || ''} />)
 				{:else}
-					Waiting for executor (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
+					Waiting executor (<TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
 				{/if}
 			{/if}
 		</div>
 	</div>
 
 	<!-- Job duration-->
-	<div class="text-2xs font-normal text-secondary pr-2">
+	<div class="text-2xs font-normal text-primary pr-2">
 		{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 			{msToReadableTime(job.duration_ms, 2)}
 		{:else}
@@ -178,7 +155,7 @@ let isJobRecent = $state(true);
 				<Tooltip class="h-full">
 					<div class="relative">
 						{#if job && job.parent_job}
-							<span class="absolute -top-1 -right-1 text-xs text-blue-500">*</span>
+							<span class="absolute -top-1 -right-1 text-xs text-accent">*</span>
 						{/if}
 						<JobKindIcon size={14} />
 					</div>
@@ -202,7 +179,7 @@ let isJobRecent = $state(true);
 					{/snippet}
 				</Tooltip>
 
-				<div class="whitespace-nowrap text-xs text-secondary truncate">
+				<div class="whitespace-nowrap text-xs text-primary truncate">
 					{#if job.script_path}
 						<div class="flex flex-row gap-1 items-center">
 							{#if isExternal}
@@ -240,11 +217,7 @@ let isJobRecent = $state(true);
 									class="w-fit"
 								>
 									{#snippet buttonReplacement()}
-										<div
-											class="p-1 hover:bg-surface cursor-pointer rounded-md text-gray-300 hover:text-primary"
-										>
-											<ListFilterPlus size={14} />
-										</div>
+										{@render filterButton()}
 									{/snippet}
 								</DropdownV2>
 							{/if}
@@ -274,7 +247,7 @@ let isJobRecent = $state(true);
 		</div>
 	{/if}
 	<!-- Author and schedule-->
-	<div class="flex justify-start pr-4 text-secondary">
+	<div class="flex justify-start pr-4 text-primary">
 		{#if job && job.schedule_path}
 			<div class="flex flex-row items-center gap-1 w-full -ml-2">
 				<Button
@@ -285,7 +258,11 @@ let isJobRecent = $state(true);
 				>
 					<Calendar size={14} />
 				</Button>
-				<div class="text-xs truncate text-ellipsis text-left" dir="rtl" title={job.schedule_path}>
+				<div
+					class="text-xs text-primary font-normal truncate text-ellipsis text-left"
+					dir="rtl"
+					title={job.schedule_path}
+				>
 					{job.schedule_path}
 				</div>
 				<DropdownV2
@@ -298,17 +275,17 @@ let isJobRecent = $state(true);
 					class="w-fit"
 				>
 					{#snippet buttonReplacement()}
-						<div
-							class="p-1 hover:bg-surface cursor-pointer rounded-md text-gray-300 hover:text-primary"
-						>
-							<ListFilterPlus size={14} />
-						</div>
+						{@render filterButton()}
 					{/snippet}
 				</DropdownV2>
 			</div>
 		{:else}
 			<div class="flex flex-row gap-1 items-center w-full">
-				<div class="text-xs truncate text-ellipsis text-left" dir="rtl" title={job.created_by}>
+				<div
+					class="text-xs font-normal text-primary truncate text-ellipsis text-left"
+					dir="rtl"
+					title={job.created_by}
+				>
 					{job.created_by ?? ''}
 				</div>
 				{#if !isExternal}
@@ -323,11 +300,7 @@ let isJobRecent = $state(true);
 						class="w-fit"
 					>
 						{#snippet buttonReplacement()}
-							<div
-								class="p-1 hover:bg-surface cursor-pointer rounded-md text-gray-300 hover:text-primary"
-							>
-								<ListFilterPlus size={14} />
-							</div>
+							{@render filterButton()}
 						{/snippet}
 					</DropdownV2>
 				{/if}
@@ -339,7 +312,7 @@ let isJobRecent = $state(true);
 	{#if showTag}
 		<div class="flex justify-start gap-1">
 			{#if job.tag}
-				<span class="text-xs text-secondary truncate" title={job.tag}>{job.tag}</span>
+				<span class="text-xs text-primary font-normal truncate" title={job.tag}>{job.tag}</span>
 			{/if}
 		</div>
 	{/if}
@@ -352,9 +325,7 @@ let isJobRecent = $state(true);
 				href="{base}/run/{job.id}?workspace={job.workspace_id}"
 				class={twMerge(
 					'text-right float-right  px-2',
-					selected
-						? 'text-blue-500 hover:text-primary'
-						: 'text-gray-300 dark:text-gray-500 hover:text-primary dark:hover:text-primary'
+					selected ? 'text-accent' : 'text-secondary hover:text-accent'
 				)}
 				title="See run detail in a new tab"
 			>
@@ -363,3 +334,9 @@ let isJobRecent = $state(true);
 		</div>
 	{/if}
 </div>
+
+{#snippet filterButton()}
+	<div class="p-1 cursor-pointer rounded-md text-hint/50 hover:text-primary">
+		<ListFilterPlus size={14} />
+	</div>
+{/snippet}

package/package/components/runs/RunRow.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Job } from '../../gen';
-import type { RunsSelectionMode } from './RunsBatchActionsDropdown.svelte';
+import { type RunsSelectionMode } from '../../utils';
 import './runs-grid.css';
 interface Props {
     job: Job;

package/package/components/runs/RunsBatchActionsDropdown.svelte

@@ -1,6 +1,3 @@
-<script lang="ts" module>export {};
-</script>
-
 <script lang="ts">import { userStore, superadmin } from '../../stores';
 import { X, Check, ChevronDown, Loader2, SquareMousePointer } from 'lucide-svelte';
 import { Button } from '../common';
@@ -19,18 +16,18 @@ function jobCountString(count) {
 	<div class="h-8 flex flex-row items-center gap-1">
 		<Button
 			startIcon={{ icon: X }}
-			size="xs"
-			color="gray"
-			variant="contained"
+			iconOnly
+			unifiedSize="md"
+			variant="default"
 			on:click={() => onSetSelectionMode(false)}
 		/>
 		{#if selectionMode == 'cancel'}
 			<Button
 				disabled={selectionCount == 0}
 				startIcon={{ icon: Check }}
-				size="xs"
-				color="red"
-				variant="contained"
+				unifiedSize="md"
+				variant="accent"
+				destructive
 				on:click={onCancelSelectedJobs}
 			>
 				Cancel {jobCountString(selectionCount)}
@@ -40,9 +37,8 @@ function jobCountString(count) {
 			<Button
 				disabled={selectionCount == 0}
 				startIcon={{ icon: Check }}
-				size="xs"
-				color="green"
-				variant="contained"
+				unifiedSize="md"
+				variant="accent"
 				on:click={onReRunSelectedJobs}
 			>
 				Re-run {jobCountString(selectionCount)}
@@ -70,15 +66,17 @@ function jobCountString(count) {
 		]}
 	>
 		{#snippet buttonReplacement()}
-			<div
-				class="px-2 h-[30px] border flex flex-row items-center hover:bg-surface-hover cursor-pointer rounded-md gap-2"
+			<Button
+				nonCaptureEvent
+				variant="default"
+				unifiedSize="md"
+				startIcon={{ icon: SquareMousePointer }}
+				endIcon={{ icon: ChevronDown }}
 			>
-				<SquareMousePointer size={16} />
 				{#if !small}
-					<span class="text-xs min-w-[5rem]">Batch actions</span>
+					<span>Batch actions</span>
 				{/if}
-				<ChevronDown size={16} />
-			</div>
+			</Button>
 		{/snippet}
 	</DropdownV2>
 {/if}

package/package/components/runs/RunsBatchActionsDropdown.svelte.d.ts

@@ -1,4 +1,4 @@
-export type RunsSelectionMode = 'cancel' | 're-run';
+import type { RunsSelectionMode } from '../../utils';
 interface Props {
     isLoading?: boolean;
     selectionCount: number;

package/package/components/runs/RunsFilter.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { Button } from '../common';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import Tooltip from '../Tooltip.svelte';
 import { CircleAlert, CircleCheck, Hourglass, ListFilterPlus, CirclePlay, X } from 'lucide-svelte';
 import JsonEditor from '../JsonEditor.svelte';
 import Toggle from '../Toggle.svelte';
@@ -16,7 +15,9 @@ import { safeSelectItems } from '../select/utils.svelte';
 import RunOption from './RunOption.svelte';
 import DropdownSelect from '../DropdownSelect.svelte';
 import TooltipV2 from '../meltComponents/Tooltip.svelte';
-let { path = $bindable(null), label = $bindable(null), concurrencyKey = $bindable(null), worker = $bindable(null), tag = $bindable(null), success = $bindable(undefined), isSkipped = $bindable(undefined), argFilter = $bindable(), argError = $bindable(), resultFilter = $bindable(), resultError = $bindable(), jobKindsCat = $bindable(), user = $bindable(null), folder = $bindable(null), mobile = false, schedulePath = $bindable(), allowWildcards = $bindable(false), paths = [], usernames = [], folders = [], allWorkspaces = $bindable(false), filterBy = $bindable('path'), small = false, calendarSmall = false } = $props();
+import TextInput from '../text_input/TextInput.svelte';
+import { jobTriggerKinds, triggerDisplayNamesMap } from '../triggers/utils';
+let { path = $bindable(null), label = $bindable(null), concurrencyKey = $bindable(null), worker = $bindable(null), tag = $bindable(null), success = $bindable(undefined), showSkipped = $bindable(undefined), argFilter = $bindable(), argError = $bindable(), resultFilter = $bindable(), jobTriggerKind = $bindable(), resultError = $bindable(), jobKindsCat = $bindable(), user = $bindable(null), folder = $bindable(null), mobile = false, schedulePath = $bindable(), allowWildcards = $bindable(false), paths = [], usernames = [], folders = [], allWorkspaces = $bindable(false), filterBy = $bindable('path'), small = false, calendarSmall = false } = $props();
 let copyArgFilter = $state(argFilter);
 let copyResultFilter = $state(resultFilter);
 const dispatch = createEventDispatcher();
@@ -121,10 +122,9 @@ function resetFilter() {
 		</RunOption>
 	{/if}
 	<!-- Filter by -->
-	<div class="flex flex-row gap-4">
+	<div class="flex flex-row gap-2">
 		<RunOption label="Filter by" for="filter-by">
 			<ToggleButtonGroup
-				class="h-9"
 				bind:selected={filterBy}
 				on:selected={(e) => {
 					if (e.detail != filterBy) {
@@ -165,7 +165,6 @@ function resetFilter() {
 						bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
 						clearable
 						onClear={() => ((user = null), dispatch('reset'))}
-						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (usernames.push(item), (user = item))}
 						createText="Press enter to use this value"
 						id="user"
@@ -180,7 +179,6 @@ function resetFilter() {
 						bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
 						clearable
 						onClear={() => ((folder = null), dispatch('reset'))}
-						inputClass="!max-h-9 min-w-36 border-none"
 						id="folder"
 					/>
 				{/key}
@@ -193,7 +191,6 @@ function resetFilter() {
 						bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
 						clearable
 						onClear={() => ((path = null), dispatch('reset'))}
-						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (paths.push(item), (path = item))}
 						createText="Press enter to use this value"
 						id="path"
@@ -223,20 +220,21 @@ function resetFilter() {
 						{/if}
 
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs min-w-36"
-							bind:value={displayedLabel}
-							onkeydown={(e) => {
-								if (labelTimeout) {
-									clearTimeout(labelTimeout)
-								}
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								type: 'text',
+								onkeydown: (e) => {
+									if (labelTimeout) {
+										clearTimeout(labelTimeout)
+									}
 
-								labelTimeout = setTimeout(() => {
-									label = displayedLabel
-								}, 1000)
+									labelTimeout = setTimeout(() => {
+										label = displayedLabel
+									}, 1000)
+								}
 							}}
+							bind:value={() => displayedLabel ?? undefined, (v) => (displayedLabel = v ?? null)}
 						/>
 						<div class="absolute -top-4 right-0">
 							<Toggle
@@ -271,21 +269,24 @@ function resetFilter() {
 					{/if}
 
 					<!-- svelte-ignore a11y_autofocus -->
-					<input
-						autofocus
-						type="text"
-						class="!h-[32px] py-1 !text-xs min-w-36"
-						bind:value={displayedConcurrencyKey}
-						onkeydown={(e) => {
-							if (concurrencyKeyTimeout) {
-								clearTimeout(concurrencyKeyTimeout)
-							}
+					<TextInput
+						inputProps={{
+							autofocus: true,
+							type: 'text',
+							onkeydown: (e) => {
+								if (concurrencyKeyTimeout) {
+									clearTimeout(concurrencyKeyTimeout)
+								}
 
-							concurrencyKeyTimeout = setTimeout(() => {
-								concurrencyKey = displayedConcurrencyKey
-							}, 1000)
+								concurrencyKeyTimeout = setTimeout(() => {
+									concurrencyKey = displayedConcurrencyKey
+								}, 1000)
+							}
 						}}
-						id="concurrencyKey"
+						bind:value={
+							() => displayedConcurrencyKey ?? undefined,
+							(v) => (displayedConcurrencyKey = v ?? null)
+						}
 					/>
 				{/key}
 			</RunOption>
@@ -306,21 +307,22 @@ function resetFilter() {
 						{/if}
 
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs min-w-36"
-							bind:value={displayedTag}
-							onkeydown={(e) => {
-								if (tagTimeout) {
-									clearTimeout(tagTimeout)
-								}
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								type: 'text',
+								id: 'tag',
+								onkeydown: (e) => {
+									if (tagTimeout) {
+										clearTimeout(tagTimeout)
+									}
 
-								tagTimeout = setTimeout(() => {
-									tag = displayedTag
-								}, 1000)
+									tagTimeout = setTimeout(() => {
+										tag = displayedTag
+									}, 1000)
+								}
 							}}
-							id="tag"
+							bind:value={() => displayedTag ?? undefined, (v) => (displayedTag = v ?? null)}
 						/>
 						<div class="absolute -top-4 right-0">
 							<Toggle
@@ -349,21 +351,22 @@ function resetFilter() {
 						{/if}
 
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs min-w-36"
-							bind:value={displayedSchedule}
-							onkeydown={(e) => {
-								if (tagTimeout) {
-									clearTimeout(tagTimeout)
-								}
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								type: 'text',
+								onkeydown: (e) => {
+									if (tagTimeout) {
+										clearTimeout(tagTimeout)
+									}
 
-								tagTimeout = setTimeout(() => {
-									schedulePath = displayedSchedule
-								}, 1000)
+									tagTimeout = setTimeout(() => {
+										schedulePath = displayedSchedule
+									}, 1000)
+								},
+								id: 'schedulePath'
 							}}
-							id="schedulePath"
+							bind:value={displayedSchedule}
 						/>
 					</div>
 				{/key}
@@ -385,21 +388,21 @@ function resetFilter() {
 						{/if}
 
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs min-w-36"
-							bind:value={displayedWorker}
-							onkeydown={(e) => {
-								if (workerTimeout) {
-									clearTimeout(workerTimeout)
-								}
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								onkeydown: (e) => {
+									if (workerTimeout) {
+										clearTimeout(workerTimeout)
+									}
 
-								workerTimeout = setTimeout(() => {
-									worker = displayedWorker
-								}, 1000)
+									workerTimeout = setTimeout(() => {
+										worker = displayedWorker
+									}, 1000)
+								},
+								id: 'worker'
 							}}
-							id="worker"
+							bind:value={() => displayedWorker ?? undefined, (v) => (displayedWorker = v ?? null)}
 						/>
 						<div class="absolute -top-4 right-0">
 							<Toggle
@@ -463,7 +466,7 @@ function resetFilter() {
 				selected={jobKindsCat}
 			/>
 		{:else}
-			<ToggleButtonGroup bind:selected={jobKindsCat} class="h-9">
+			<ToggleButtonGroup bind:selected={jobKindsCat}>
 				{#snippet children({ item })}
 					<ToggleButton value="all" label="All" {item} />
 					<ToggleButton
@@ -510,7 +513,6 @@ function resetFilter() {
 	<!-- Status -->
 	<RunOption label="Status" for="status">
 		<ToggleButtonGroup
-			class="h-9"
 			selected={success ?? 'all'}
 			on:selected={({ detail }) => {
 				success = detail === 'all' ? undefined : detail
@@ -525,7 +527,10 @@ function resetFilter() {
 					tooltip="Running"
 					class="whitespace-nowrap"
 					icon={CirclePlay}
-					selectedColor="yellow"
+					iconProps={{
+						class:
+							'group-data-[state=on]:text-yellow-600 dark:group-data-[state=on]:text-yellow-400'
+					}}
 					{item}
 				/>
 				<ToggleButton
@@ -533,7 +538,9 @@ function resetFilter() {
 					tooltip="Success"
 					class="whitespace-nowrap"
 					icon={CircleCheck}
-					selectedColor="green"
+					iconProps={{
+						class: 'group-data-[state=on]:text-green-500 dark:group-data-[state=on]:text-green-300'
+					}}
 					{item}
 				/>
 				<ToggleButton
@@ -541,7 +548,9 @@ function resetFilter() {
 					tooltip="Failure"
 					class="whitespace-nowrap"
 					icon={CircleAlert}
-					selectedColor="red"
+					iconProps={{
+						class: 'group-data-[state=on]:text-red-500 dark:group-data-[state=on]:text-red-300'
+					}}
 					{item}
 				/>
 				{#if success == 'waiting'}
@@ -577,19 +586,17 @@ function resetFilter() {
 	>
 		{#snippet trigger()}
 			<Button
-				color="light"
-				variant="contained"
-				size="xs"
+				variant="default"
+				unifiedSize="md"
 				nonCaptureEvent={true}
 				startIcon={{ icon: ListFilterPlus }}
 				iconOnly
-				btnClasses="bg-surface-secondary py-[8.5px]"
 			></Button>
 		{/snippet}
 
 		{#snippet content()}
 			<Section label="Filters">
-				<div class="w-102 flex flex-col gap-4">
+				<div class="w-102 flex flex-col gap-6">
 					{#if mobile}
 						{#if $workspaceStore == 'admins'}
 							<Label label="Workspaces">
@@ -880,28 +887,47 @@ function resetFilter() {
 					{/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="xs" bind:checked={isSkipped} />
-							<Tooltip>Skipped flows are flows that did an early break</Tooltip>
+							<Toggle size="sm" bind:checked={showSkipped} />
 						</div>
 					</Label>
 
-					<div class="flex flex-col gap-1">
-						<span class="text-xs leading-6">
-							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
+					<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}
+							clearable
+						/>
+					</Label>
+
+					<div class="flex flex-col gap-6">
 						<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>
 
 					<div class="flex flex-row gap-2 justify-between">
 						<Button
-							size="xs"
-							color="light"
+							unifiedSize="md"
+							variant="default"
 							on:click={() => {
 								argFilter = ''
 								resultFilter = ''
@@ -911,8 +937,8 @@ function resetFilter() {
 						</Button>
 
 						<Button
-							size="xs"
-							color="dark"
+							unifiedSize="md"
+							variant="accent"
 							on:click={() => {
 								argFilter = copyArgFilter
 								resultFilter = copyResultFilter