windmill-components 1.613.5 → 1.623.1

package/package/components/runs/RunsFilter.svelte

@@ -1,35 +1,3 @@
-<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)
-        .nullable()
-        .default(null),
-    per_page: z.number().default(1000)
-});
-</script>
-
 <script lang="ts">import { Button } from '../common';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -39,7 +7,7 @@ import Toggle from '../Toggle.svelte';
 import Label from '../Label.svelte';
 import Section from '../Section.svelte';
 import { enterpriseLicense, workspaceStore } from '../../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import ToggleButtonMore from '../common/toggleButton-v2/ToggleButtonMore.svelte';
 import Popover from '../meltComponents/Popover.svelte';
 import Select from '../select/Select.svelte';
@@ -49,37 +17,37 @@ import DropdownSelect from '../DropdownSelect.svelte';
 import TooltipV2 from '../meltComponents/Tooltip.svelte';
 import TextInput from '../text_input/TextInput.svelte';
 import { jobTriggerKinds, triggerDisplayNamesMap } from '../triggers/utils';
-import { Debounced, watch } from 'runed';
-import z from 'zod';
-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();
+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();
 function autosetFilter() {
-    if (path && filterBy !== 'path') {
+    if (path !== null && path !== '' && filterBy !== 'path') {
         filterBy = 'path';
     }
-    else if (user && filterBy !== 'user') {
+    else if (user !== null && user !== '' && filterBy !== 'user') {
         filterBy = 'user';
     }
-    else if (folder && filterBy !== 'folder') {
+    else if (folder !== null && folder !== '' && filterBy !== 'folder') {
         filterBy = 'folder';
     }
-    else if (label && filterBy !== 'label') {
+    else if (label !== null && label !== '' && filterBy !== 'label') {
         filterBy = 'label';
     }
-    else if (concurrencyKey && filterBy !== 'concurrencyKey') {
+    else if (concurrencyKey !== null && concurrencyKey !== '' && filterBy !== 'concurrencyKey') {
         filterBy = 'concurrencyKey';
     }
-    else if (tag && filterBy !== 'tag') {
+    else if (tag !== null && tag !== '' && filterBy !== 'tag') {
         filterBy = 'tag';
     }
-    else if (schedulePath && filterBy !== 'schedulePath') {
+    else if (schedulePath !== undefined && schedulePath !== '' && filterBy !== 'schedulePath') {
         filterBy = 'schedulePath';
     }
-    else if (worker && filterBy !== 'worker') {
+    else if (worker !== null && worker !== '' && filterBy !== 'worker') {
         filterBy = 'worker';
     }
 }
-let labelTimeout = $state();
+let labelTimeout = $state(undefined);
 let concurrencyKeyTimeout = $state(undefined);
 let tagTimeout = $state(undefined);
 let workerTimeout = $state(undefined);
@@ -87,18 +55,12 @@ let allWorkspacesValue = $state(allWorkspaces ? 'all' : 'admins');
 let displayedLabel = $derived(label);
 let displayedConcurrencyKey = $derived(concurrencyKey);
 let displayedTag = $derived(tag);
-let displayedSchedule = $derived(schedulePath ?? undefined);
+let displayedSchedule = $derived(schedulePath);
 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 || '';
+$effect(() => {
+    ;
+    (path || user || folder || label || worker || concurrencyKey || tag || schedulePath) &&
+        untrack(() => autosetFilter());
 });
 function resetFilter() {
     path = null;
@@ -107,7 +69,7 @@ function resetFilter() {
     label = null;
     concurrencyKey = null;
     tag = null;
-    schedulePath = null;
+    schedulePath = undefined;
     worker = null;
 }
 </script>
@@ -380,7 +342,7 @@ function resetFilter() {
 							<button
 								class="absolute top-2 right-2 z-50"
 								onclick={() => {
-									schedulePath = null
+									schedulePath = undefined
 									dispatch('reset')
 								}}
 							>
@@ -399,7 +361,7 @@ function resetFilter() {
 									}
 
 									tagTimeout = setTimeout(() => {
-										schedulePath = displayedSchedule ?? null
+										schedulePath = displayedSchedule
 									}, 1000)
 								},
 								id: 'schedulePath'
@@ -553,7 +515,7 @@ function resetFilter() {
 		<ToggleButtonGroup
 			selected={success ?? 'all'}
 			on:selected={({ detail }) => {
-				success = detail === 'all' ? null : detail
+				success = detail === 'all' ? undefined : detail
 				dispatch('successChange', success)
 			}}
 			id="status"
@@ -660,7 +622,7 @@ function resetFilter() {
 										label = null
 										concurrencyKey = null
 										tag = null
-										schedulePath = null
+										schedulePath = undefined
 									}
 								}}
 							>
@@ -897,7 +859,7 @@ function resetFilter() {
 						<Label label="Status">
 							<ToggleButtonGroup
 								selected={success ?? 'all'}
-								on:selected={({ detail }) => (success = detail === 'all' ? null : detail)}
+								on:selected={({ detail }) => (success = detail === 'all' ? undefined : detail)}
 							>
 								{#snippet children({ item })}
 									<ToggleButton value={'all'} label="All" {item} />
@@ -942,23 +904,49 @@ function resetFilter() {
 								label: triggerDisplayNamesMap[value],
 								value
 							}))}
-							bind:value={() => jobTriggerKind ?? undefined, (v) => (jobTriggerKind = v ?? null)}
+							bind:value={jobTriggerKind}
 							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 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
+							unifiedSize="md"
+							variant="default"
+							on:click={() => {
+								argFilter = ''
+								resultFilter = ''
+							}}
+						>
+							Clear
+						</Button>
+
+						<Button
+							unifiedSize="md"
+							variant="accent"
+							on:click={() => {
+								argFilter = copyArgFilter
+								resultFilter = copyResultFilter
+							}}
+						>
+							Set args/result filter
+						</Button>
+					</div>
 				</div>
 			</Section>
 		{/snippet}

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

@@ -1,53 +1,22 @@
-export declare const runsFiltersSchema: z.ZodObject<{
-    path: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    worker: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    user: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    folder: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    label: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    concurrency_key: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    tag: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    allow_wildcards: z.ZodDefault<z.ZodBoolean>;
-    show_future_jobs: z.ZodDefault<z.ZodBoolean>;
-    success: z.ZodDefault<z.ZodNullable<z.ZodEnum<{
-        failure: "failure";
-        running: "running";
-        success: "success";
-        suspended: "suspended";
-        waiting: "waiting";
-    }>>>;
-    show_skipped: z.ZodDefault<z.ZodBoolean>;
-    show_schedules: z.ZodDefault<z.ZodBoolean>;
-    min_ts: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    max_ts: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    schedule_path: z.ZodDefault<z.ZodNullable<z.ZodString>>;
-    job_kinds: z.ZodDefault<z.ZodString>;
-    all_workspaces: z.ZodDefault<z.ZodBoolean>;
-    arg: z.ZodDefault<z.ZodString>;
-    result: z.ZodDefault<z.ZodString>;
-    job_trigger_kind: z.ZodDefault<z.ZodNullable<z.ZodPipe<z.ZodString, z.ZodTransform<"schedule" | "email" | "webhook" | "http" | "websocket" | "kafka" | "nats" | "postgres" | "sqs" | "gcp" | "default_email" | "mqtt", string>>>>;
-    per_page: z.ZodDefault<z.ZodNumber>;
-}, z.core.$strip>;
-export type RunsFilters = z.infer<typeof runsFiltersSchema>;
 import type { JobTriggerKind } from '../../gen';
-import z from 'zod';
 interface Props {
     path?: string | null;
     label?: string | null;
     concurrencyKey?: string | null;
     worker?: string | null;
     tag?: string | null;
-    success?: 'running' | 'waiting' | 'suspended' | 'queued' | 'success' | 'failure' | null;
+    success?: 'running' | 'waiting' | 'suspended' | 'queued' | 'success' | 'failure' | undefined;
     showSkipped?: boolean | undefined;
     argFilter: string;
     argError: string;
     resultFilter: string;
-    jobTriggerKind: JobTriggerKind | null;
+    jobTriggerKind: JobTriggerKind | undefined;
     resultError: string;
     jobKindsCat: string;
     user?: string | null;
     folder?: string | null;
     mobile?: boolean;
-    schedulePath: string | null;
+    schedulePath: string | undefined;
     allowWildcards?: boolean;
     paths?: string[];
     usernames?: string[];
@@ -75,6 +44,6 @@ declare const RunsFilter: $$__sveltets_2_IsomorphicComponent<Props, {
     successChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "path" | "user" | "folder" | "tag" | "success" | "worker" | "label" | "concurrencyKey" | "schedulePath" | "showSkipped" | "argFilter" | "argError" | "resultFilter" | "jobTriggerKind" | "resultError" | "jobKindsCat" | "allowWildcards" | "allWorkspaces" | "filterBy">;
+}, {}, {}, "path" | "user" | "folder" | "tag" | "success" | "worker" | "label" | "showSkipped" | "argFilter" | "resultFilter" | "jobTriggerKind" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
 type RunsFilter = InstanceType<typeof RunsFilter>;
 export default RunsFilter;

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

@@ -2,7 +2,7 @@ import type { Tweened } from 'svelte/motion';
 interface Props {
     queue_count?: Tweened<number> | undefined;
     suspended_count?: Tweened<number> | undefined;
-    success: string | null;
+    success: string | undefined;
     small?: boolean;
     onJobsWaiting?: () => void;
     onJobsSuspended?: () => void;

package/package/components/runs/RunsTable.svelte

@@ -6,7 +6,7 @@ import { AlertTriangle } from 'lucide-svelte';
 import Popover from '../Popover.svelte';
 import { workspaceStore } from '../../stores';
 import './runs-grid.css';
-let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectionMode = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = false, perPage = 1000 } = $props();
+let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectionMode = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = $bindable(false), perPage = 1000 } = $props();
 function getTime(job) {
     return job['completed_at'] ?? job['started_at'] ?? job['scheduled_for'] ?? job['created_at'];
 }

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

@@ -40,6 +40,6 @@ declare const RunsTable: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     scrollToRun: (ids: string[]) => void;
-}, "selectedIds" | "selectedWorkspace">;
+}, "selectedIds" | "lastFetchWentToEnd" | "selectedWorkspace">;
 type RunsTable = InstanceType<typeof RunsTable>;
 export default RunsTable;

package/package/components/schema/SchemaPicker.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">import CustomPopover from '../CustomPopover.svelte';
+import { copyToClipboard } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import ObjectViewer from '../propertyPicker/ObjectViewer.svelte';
+import { twMerge } from 'tailwind-merge';
+export let payloadData;
+export let date;
+export let selected = false;
+const dispatch = createEventDispatcher();
+let hovering = false;
+function formatDate(dateString) {
+    if (!dateString)
+        return '';
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    }).format(date);
+}
+</script>
+
+<button
+	class={twMerge(
+		'w-full rounded-sm px-2',
+		hovering ? 'bg-surface-hover' : '',
+		selected ? 'bg-surface-selected' : ''
+	)}
+	on:click={() => {
+		dispatch('select')
+	}}
+	on:mouseenter={() => {
+		hovering = true
+	}}
+	on:mouseleave={() => {
+		hovering = false
+	}}
+>
+	<div class="flex flex-row gap-2">
+		<slot name="start" />
+
+		<div
+			class="text-2xs font-normal text-left p-2 rounded-md overflow-auto grow-0 text-ellipsis whitespace-nowrap scrollbar-none"
+			title={formatDate(date)}
+		>
+			{formatDate(date)}
+		</div>
+
+		<CustomPopover class="grow min-w-12 ">
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class={twMerge(
+					'text-xs border font-normal text-left p-1 rounded-md overflow-auto grow whitespace-nowrap scrollbar-none',
+					hovering && 'border-surface'
+				)}
+				on:click={() => {
+					if (selected) {
+						copyToClipboard(JSON.stringify(payloadData))
+					}
+				}}
+				on:mouseenter={() => {
+					hovering = true
+				}}
+				on:mouseleave={() => {
+					hovering = false
+				}}
+			>
+				{JSON.stringify(payloadData)}
+			</div>
+			<svelte:fragment slot="overlay">
+				<ObjectViewer json={payloadData} />
+			</svelte:fragment>
+		</CustomPopover>
+
+		{#if hovering}
+			<slot name="extra" />
+		{/if}
+	</div>
+</button>
+
+<style>
+	.scrollbar-none {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
+	.scrollbar-none::-webkit-scrollbar {
+		display: none; /* Chrome, Safari and Opera */
+	}</style>

package/package/components/{tutorials/RunsTutorial.svelte.d.ts → schema/SchemaPicker.svelte.d.ts}

@@ -1,6 +1,3 @@
-interface Props {
-    index: number;
-}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -14,13 +11,17 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RunsTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
-    error: CustomEvent<any>;
-    skipAll: CustomEvent<any>;
+declare const SchemaPicker: $$__sveltets_2_IsomorphicComponent<{
+    payloadData: Record<string, any>;
+    date: string | undefined;
+    selected?: boolean;
+}, {
+    select: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {
-    runTutorial: () => Promise<void>;
-}, "">;
-type RunsTutorial = InstanceType<typeof RunsTutorial>;
-export default RunsTutorial;
+}, {
+    start: {};
+    extra: {};
+}, {}, string>;
+type SchemaPicker = InstanceType<typeof SchemaPicker>;
+export default SchemaPicker;

package/package/components/scriptEditor/LogPanel.svelte

@@ -14,14 +14,13 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import { CheckCircle2, Loader2, XCircle } from 'lucide-svelte';
 import ScriptFix from '../copilot/ScriptFix.svelte';
-import JobOtelTraces from '../JobOtelTraces.svelte';
 import Cell from '../table/Cell.svelte';
 import DataTable from '../table/DataTable.svelte';
 import Head from '../table/Head.svelte';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
 import Tooltip from '../Tooltip.svelte';
 import { getStringError } from '../copilot/chat/utils';
-let { lang, previewIsLoading = false, previewJob, pastPreviews = [], editor = undefined, diffEditor = undefined, args = undefined, workspace = undefined, showCaptures = false, customUi = undefined, children, capturesTab, customResultPanel, showCustomResultPanel = false } = $props();
+let { lang, previewIsLoading = false, previewJob, pastPreviews = [], editor = undefined, diffEditor = undefined, args = undefined, workspace = undefined, showCaptures = false, customUi = undefined, children, capturesTab } = $props();
 let selectedTab = $state('logs');
 let drawerOpen = $state(false);
 let drawerContent = $state(undefined);
@@ -71,7 +70,6 @@ let forceJson = $state(false);
 		{#if showCaptures && customUi?.disableTriggerCaptures !== true}
 			<Tab value="captures" label="Trigger captures" />
 		{/if}
-		<Tab value="tracing" label="Tracing" />
 
 		{#snippet content()}
 			<div class="grow min-h-0">
@@ -100,11 +98,7 @@ let forceJson = $state(false);
 							</Pane>
 							<Pane>
 								{@render children?.()}
-								{#if showCustomResultPanel && customResultPanel}
-									<div class="h-full">
-										{@render customResultPanel()}
-									</div>
-								{:else if previewJob != undefined && (previewJob.result_stream || previewJob.result)}
+								{#if previewJob != undefined && (previewJob.result_stream || previewJob.result)}
 									<div class="relative w-full h-full p-2">
 										<div class="relative h-full">
 											<DisplayResult
@@ -243,15 +237,6 @@ let forceJson = $state(false);
 				{#if selectedTab === 'captures'}
 					{@render capturesTab?.()}
 				{/if}
-				{#if selectedTab === 'tracing'}
-					{#if previewJob?.id}
-						<JobOtelTraces jobId={previewJob.id} />
-					{:else}
-						<div class="p-4 text-secondary">
-							Run a preview to see HTTP request traces
-						</div>
-					{/if}
-				{/if}
 			</div>
 		{/snippet}
 	</Tabs>

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -19,8 +19,6 @@ interface Props {
     customUi?: PreviewPanelUi | undefined;
     children?: import('svelte').Snippet;
     capturesTab?: import('svelte').Snippet;
-    customResultPanel?: import('svelte').Snippet;
-    showCustomResultPanel?: boolean;
 }
 declare const LogPanel: import("svelte").Component<Props, {
     setFocusToLogs: () => void;

package/package/components/select/SelectDropdown.svelte

@@ -102,8 +102,8 @@ $effect(() => {
 	{#if uiState.domExists}
 		<div
 			class={twMerge(
-				disablePortal ? 'absolute z-[5002]' : 'fixed z-[10000]',
-				'text-primary text-sm select-none',
+				disablePortal ? 'absolute' : 'fixed',
+				'z-[5002] text-primary text-sm select-none',
 				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
 				uiState.visible ? '' : 'pointer-events-none',
 				className

package/package/components/settings/ChangeWorkspaceColor.svelte

@@ -71,7 +71,7 @@ async function changeWorkspaceColor() {
 	</p>
 </div>
 
-<Modal bind:open title="Change workspace color">
+<Modal bind:open title="Change Workspace Color">
 	<div class="flex flex-col gap-4">
 		<label class="block">
 			<span class="text-secondary text-sm">Workspace color</span>
@@ -91,15 +91,14 @@ async function changeWorkspaceColor() {
 		</label>
 	</div>
 
-	{#snippet actions()}
+	<svelte:fragment slot="actions">
 		<Button
 			size="sm"
-			variant="accent"
 			on:click={() => {
 				changeWorkspaceColor()
 			}}
 		>
 			Save
 		</Button>
-	{/snippet}
+	</svelte:fragment>
 </Modal>

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -76,22 +76,19 @@ export let open = false;
 
 <Modal bind:open title="Change workspace ID">
 	<div class="flex flex-col gap-4">
-		<Alert type="info" title="Changing the workspace ID may take a few minutes to complete">
-			Once finished, please update your webhook calls and adjust your CLI sync configuration
-			accordingly.
+		<Alert type="warning" title="Warning">
+			Renaming the workspace may take a few minutes to complete. Once finished, please update your
+			webhook calls and adjust your CLI sync configuration accordingly.
 		</Alert>
-		<Alert type="warning" title="Running jobs and queued flow steps will not be migrated.">
-			Make sure that all your jobs are completed before changing the workspace ID.
-		</Alert>
-		<p class="text-secondary text-xs"
-			>Current ID <br /> <span class="text-emphasis">{$workspaceStore ?? ''}</span></p
+		<p class="text-secondary text-sm"
+			>Current ID <br /> <span class="font-bold">{$workspaceStore ?? ''}</span></p
 		>
-		<label class="flex flex-col gap-1">
-			<span class="text-emphasis text-xs">New name</span>
+		<label class="block">
+			<span class="text-secondary text-sm">New name</span>
 			<input type="text" bind:value={newName} />
 		</label>
 		<label class="block">
-			<span class="text-emphasis text-xs">New ID</span>
+			<span class="text-secondary text-sm">New ID</span>
 			<input type="text" bind:value={newId} />
 			{#if errorId}
 				<div class="text-red-500 text-xs mt-1">{errorId}</div>
@@ -99,10 +96,9 @@ export let open = false;
 		</label>
 	</div>
 
-	{#snippet actions()}
+	<svelte:fragment slot="actions">
 		<Button
 			size="sm"
-			variant="accent"
 			disabled={checking || errorId.length > 0 || !newName || !newId}
 			{loading}
 			on:click={() => {
@@ -111,5 +107,5 @@ export let open = false;
 		>
 			Save
 		</Button>
-	{/snippet}
+	</svelte:fragment>
 </Modal>

package/package/components/settings/ChangeWorkspaceName.svelte

@@ -54,20 +54,19 @@ async function renameWorkspace() {
 <Modal bind:open title="Change workspace name">
 	<div class="flex flex-col gap-4 mt-4">
 		{#if currentName}
-			<p class="text-secondary text-xs"
-				>Current name <br /> <span class="text-emphasis">{currentName}</span></p
+			<p class="text-secondary text-sm"
+				>Current name <br /> <span class="font-bold">{currentName}</span></p
 			>
 		{/if}
-		<label class="flex flex-col gap-1">
-			<span class="text-emphasis text-xs">New name</span>
+		<label class="block">
+			<span class="text-secondary text-sm">New name</span>
 			<input type="text" bind:value={newName} />
 		</label>
 	</div>
 
-	{#snippet actions()}
+	<svelte:fragment slot="actions">
 		<Button
 			size="sm"
-			variant="accent"
 			disabled={!newName}
 			on:click={() => {
 				renameWorkspace()
@@ -75,5 +74,5 @@ async function renameWorkspace() {
 		>
 			Save
 		</Button>
-	{/snippet}
+	</svelte:fragment>
 </Modal>

package/package/components/settings/CreateToken.svelte

@@ -135,7 +135,7 @@ async function createToken(mcpMode = false) {
     }
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
-const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/mcp?token=`);
+const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
 const warning = $derived(newMcpScope === 'all'
     ? 'Create your first scripts or flows to make them available via MCP.'
     : newMcpScope === 'favorites'