refac

src/lib/components/AutomationModal.svelte

@@ -225,12 +225,14 @@
 			if (automation) {
 				await updateAutomationById(localStorage.token, automation.id, form);
 				toast.success($i18n.t('Automation updated'));
+				show = false;
+				dispatch('save', { id: automation.id });
 			} else {
-				await createAutomation(localStorage.token, form);
+				const created = await createAutomation(localStorage.token, form);
 				toast.success($i18n.t('Automation created'));
+				show = false;
+				dispatch('save', { id: created?.id });
 			}
-			show = false;
-			dispatch('save');
 		} catch (e: any) {
 			toast.error(e?.detail ?? `${e}` ?? 'Failed to save');
 		} finally {

src/lib/components/automations/AutomationEditor.svelte

@@ -0,0 +1,907 @@
+<script lang="ts">
+	import { onMount, getContext } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import { goto } from '$app/navigation';
+
+	import dayjs from 'dayjs';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+	import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+	import { models, WEBUI_NAME, showSidebar } from '$lib/stores';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
+
+	import {
+		updateAutomationById,
+		toggleAutomationById,
+		runAutomationById,
+		deleteAutomationById,
+		getAutomationRuns,
+		type AutomationForm,
+		type AutomationResponse,
+		type AutomationRunModel
+	} from '$lib/apis/automations';
+	import { getTerminalServers, type TerminalServer } from '$lib/apis/terminal/index';
+
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Search from '$lib/components/icons/Search.svelte';
+	import Cloud from '$lib/components/icons/Cloud.svelte';
+	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
+	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+
+	dayjs.extend(relativeTime);
+	dayjs.extend(localizedFormat);
+
+	const i18n = getContext('i18n');
+
+	export let automation: AutomationResponse;
+
+	let name = '';
+	let prompt = '';
+	let model_id = '';
+	let is_active = true;
+
+	let frequency = 'DAILY';
+	let interval = 1;
+	let hour = 9;
+	let minute = 0;
+	let selectedDays: string[] = [];
+	let monthDay = 1;
+	let onceDate = '';
+	let onceTime = '09:00';
+	let customRrule = '';
+
+	let terminalServers: TerminalServer[] = [];
+	let terminalServerId = '';
+	let terminalCwd = '';
+
+	let loading = false;
+	let saving = false;
+	let showDeleteConfirm = false;
+	let showScheduleDropdown = false;
+	let showModelDropdown = false;
+	let showTerminalDropdown = false;
+	let modelSearch = '';
+
+	let runs: AutomationRunModel[] = [];
+	let runsLoading = false;
+	let isDirty = false;
+
+	$: terminalLabel = terminalServerId
+		? terminalServers.find((s) => s.id === terminalServerId)?.name || 'Terminal'
+		: $i18n.t('None');
+
+	$: modelLabel = model_id
+		? $models.find((m) => m.id === model_id)?.name || model_id
+		: $i18n.t('Select model');
+
+	$: filteredModels = modelSearch
+		? $models.filter(
+				(m) =>
+					m.name.toLowerCase().includes(modelSearch.toLowerCase()) ||
+					m.id.toLowerCase().includes(modelSearch.toLowerCase())
+			)
+		: $models;
+
+	const FREQUENCIES = [
+		{ key: 'ONCE', label: 'Once' },
+		{ key: 'HOURLY', label: 'Hourly' },
+		{ key: 'DAILY', label: 'Daily' },
+		{ key: 'WEEKLY', label: 'Weekly' },
+		{ key: 'MONTHLY', label: 'Monthly' },
+		{ key: 'CUSTOM', label: 'Custom' }
+	];
+
+	const DAYS = [
+		{ key: 'MO', label: 'Mo' },
+		{ key: 'TU', label: 'Tu' },
+		{ key: 'WE', label: 'We' },
+		{ key: 'TH', label: 'Th' },
+		{ key: 'FR', label: 'Fr' },
+		{ key: 'SA', label: 'Sa' },
+		{ key: 'SU', label: 'Su' }
+	];
+
+	let lastVisualFrequency = 'DAILY';
+	let prevFrequency = 'DAILY';
+
+	$: if (frequency !== 'CUSTOM') {
+		lastVisualFrequency = frequency;
+	}
+
+	$: if (frequency === 'ONCE' && !onceDate) {
+		const soon = new Date(Date.now() + 5 * 60_000);
+		onceDate = soon.toISOString().split('T')[0];
+		onceTime = `${String(soon.getHours()).padStart(2, '0')}:${String(soon.getMinutes()).padStart(2, '0')}`;
+	}
+
+	$: {
+		if (frequency === 'CUSTOM' && prevFrequency !== 'CUSTOM') {
+			customRrule = buildVisualRrule();
+		}
+		prevFrequency = frequency;
+	}
+
+	const buildVisualRrule = (): string => {
+		if (lastVisualFrequency === 'ONCE') {
+			const dt = onceDate.replace(/-/g, '') + 'T' + onceTime.replace(/:/g, '') + '00';
+			return `DTSTART:${dt}\nRRULE:FREQ=DAILY;COUNT=1`;
+		}
+		let parts = [`FREQ=${lastVisualFrequency}`];
+		if (interval > 1) parts.push(`INTERVAL=${interval}`);
+		if (lastVisualFrequency === 'WEEKLY' && selectedDays.length)
+			parts.push(`BYDAY=${selectedDays.join(',')}`);
+		if (lastVisualFrequency === 'MONTHLY') parts.push(`BYMONTHDAY=${monthDay}`);
+		if (['DAILY', 'WEEKLY', 'MONTHLY'].includes(lastVisualFrequency)) parts.push(`BYHOUR=${hour}`);
+		parts.push(`BYMINUTE=${minute}`);
+		return `RRULE:${parts.join(';')}`;
+	};
+
+	const buildRrule = (): string => {
+		if (frequency === 'CUSTOM') return customRrule;
+		if (frequency === 'ONCE') {
+			const dt = onceDate.replace(/-/g, '') + 'T' + onceTime.replace(/:/g, '') + '00';
+			return `DTSTART:${dt}\nRRULE:FREQ=DAILY;COUNT=1`;
+		}
+		let parts = [`FREQ=${frequency}`];
+		if (interval > 1) parts.push(`INTERVAL=${interval}`);
+		if (frequency === 'WEEKLY' && selectedDays.length)
+			parts.push(`BYDAY=${selectedDays.join(',')}`);
+		if (frequency === 'MONTHLY') parts.push(`BYMONTHDAY=${monthDay}`);
+		if (['DAILY', 'WEEKLY', 'MONTHLY'].includes(frequency)) parts.push(`BYHOUR=${hour}`);
+		parts.push(`BYMINUTE=${minute}`);
+		return `RRULE:${parts.join(';')}`;
+	};
+
+	const parseRrule = (s: string) => {
+		if (s.includes('COUNT=1')) {
+			frequency = 'ONCE';
+			const match = s.match(/DTSTART:(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})/);
+			if (match) {
+				onceDate = `${match[1]}-${match[2]}-${match[3]}`;
+				onceTime = `${match[4]}:${match[5]}`;
+			}
+			return;
+		}
+		const parts: Record<string, string> = {};
+		s.replace('RRULE:', '')
+			.split(';')
+			.forEach((p) => {
+				const [k, v] = p.split('=');
+				if (k && v) parts[k] = v;
+			});
+		const freq = parts.FREQ || 'DAILY';
+		if (!['HOURLY', 'DAILY', 'WEEKLY', 'MONTHLY'].includes(freq)) {
+			frequency = 'CUSTOM';
+			customRrule = s;
+			return;
+		}
+		frequency = freq;
+		interval = parseInt(parts.INTERVAL || '1');
+		hour = parseInt(parts.BYHOUR || '9');
+		minute = parseInt(parts.BYMINUTE || '0');
+		selectedDays = parts.BYDAY ? parts.BYDAY.split(',') : [];
+		monthDay = parseInt(parts.BYMONTHDAY || '1');
+	};
+
+	$: scheduleLabel = (() => {
+		if (frequency === 'ONCE') return 'Once';
+		if (frequency === 'HOURLY') return interval > 1 ? `Every ${interval}h` : 'Hourly';
+		if (frequency === 'DAILY') {
+			const ampm = hour >= 12 ? 'PM' : 'AM';
+			const h12 = hour % 12 || 12;
+			return `Daily at ${h12}:${String(minute).padStart(2, '0')} ${ampm}`;
+		}
+		if (frequency === 'WEEKLY') return 'Weekly';
+		if (frequency === 'MONTHLY') return 'Monthly';
+		if (frequency === 'CUSTOM') return 'Custom';
+		return 'Schedule';
+	})();
+
+	const formatRunTime = (ts: number): string => {
+		const now = Date.now();
+		const diff = now - ts / 1_000_000;
+
+		const seconds = Math.floor(diff / 1000);
+		const minutes = Math.floor(seconds / 60);
+		const hours = Math.floor(minutes / 60);
+		const days = Math.floor(hours / 24);
+		const weeks = Math.floor(days / 7);
+		const years = Math.floor(days / 365);
+
+		if (years > 0) return $i18n.t('{{COUNT}}y', { COUNT: years, context: 'time_ago' });
+		if (weeks > 0) return $i18n.t('{{COUNT}}w', { COUNT: weeks, context: 'time_ago' });
+		if (days > 0) return $i18n.t('{{COUNT}}d', { COUNT: days, context: 'time_ago' });
+		if (hours > 0) return $i18n.t('{{COUNT}}h', { COUNT: hours, context: 'time_ago' });
+		if (minutes > 0) return $i18n.t('{{COUNT}}m', { COUNT: minutes, context: 'time_ago' });
+		return $i18n.t('1m', { context: 'time_ago' });
+	};
+
+	const formatNextRun = (ts: number | null): string => {
+		if (!ts) return $i18n.t('Not scheduled');
+		const d = dayjs(ts / 1_000_000);
+		if (d.isSame(dayjs(), 'day')) return `${$i18n.t('Today at')} ${d.format('LT')}`;
+		return d.format('L LT');
+	};
+
+	const saveHandler = async () => {
+		if (!name.trim() || !prompt.trim() || !model_id.trim()) {
+			toast.error($i18n.t('Name, prompt, and model are required'));
+			return;
+		}
+		saving = true;
+		try {
+			const form: AutomationForm = {
+				name: name.trim(),
+				data: {
+					prompt: prompt.trim(),
+					model_id: model_id.trim(),
+					rrule: buildRrule(),
+					...(terminalServerId
+						? {
+								terminal: {
+									server_id: terminalServerId,
+									...(terminalCwd.trim() ? { cwd: terminalCwd.trim() } : {})
+								}
+							}
+						: {})
+				},
+				is_active
+			};
+			const updated = await updateAutomationById(localStorage.token, automation.id, form);
+			if (updated) {
+				automation = updated;
+				isDirty = false;
+				toast.success($i18n.t('Automation updated'));
+			}
+		} catch (e: any) {
+			toast.error(e?.detail ?? `${e}` ?? 'Failed to save');
+		} finally {
+			saving = false;
+		}
+	};
+
+	const toggleHandler = async () => {
+		const res = await toggleAutomationById(localStorage.token, automation.id).catch((err) => {
+			toast.error(`${err}`);
+			return null;
+		});
+		if (res) {
+			is_active = res.is_active;
+			automation = res;
+		}
+	};
+
+	const runNowHandler = async () => {
+		loading = true;
+		const res = await runAutomationById(localStorage.token, automation.id).catch((err) => {
+			toast.error(`${err}`);
+			return null;
+		});
+		if (res) {
+			toast.success($i18n.t('Automation triggered'));
+			setTimeout(loadRuns, 2000);
+		}
+		loading = false;
+	};
+
+	const deleteHandler = async () => {
+		const res = await deleteAutomationById(localStorage.token, automation.id).catch((err) => {
+			toast.error(`${err}`);
+			return null;
+		});
+		if (res) {
+			toast.success($i18n.t(`Deleted {{name}}`, { name: automation.name }));
+			goto('/automations');
+		}
+	};
+
+	const loadRuns = async () => {
+		runsLoading = true;
+		try {
+			runs = (await getAutomationRuns(localStorage.token, automation.id, 0, 50)) ?? [];
+		} catch {
+			runs = [];
+		}
+		runsLoading = false;
+	};
+
+	const markDirty = () => {
+		isDirty = true;
+	};
+
+	onMount(async () => {
+		name = automation.name;
+		prompt = automation.data.prompt;
+		model_id = automation.data.model_id;
+		is_active = automation.is_active;
+		parseRrule(automation.data.rrule);
+		terminalServerId = automation.data.terminal?.server_id || '';
+		terminalCwd = automation.data.terminal?.cwd || '';
+
+		try {
+			terminalServers = await getTerminalServers(localStorage.token);
+		} catch {
+			terminalServers = [];
+		}
+		await loadRuns();
+	});
+</script>
+
+<svelte:head>
+	<title>{name || $i18n.t('Automation')} • {$WEBUI_NAME}</title>
+</svelte:head>
+
+<DeleteConfirmDialog
+	bind:show={showDeleteConfirm}
+	title={$i18n.t('Delete automation?')}
+	on:confirm={deleteHandler}
+>
+	<div class="text-sm text-gray-500 truncate">
+		{$i18n.t('This will delete')} <span class="">{automation.name}</span>.
+	</div>
+</DeleteConfirmDialog>
+
+<div
+	class="flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
+		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
+		: ''} max-w-full"
+>
+	<div class="flex-1 max-h-full flex flex-col pt-3 pb-1 px-3 md:px-[18px]">
+		<!-- Header Segment (Shrink-0 so it doesn't compress) -->
+		<div class="flex items-start justify-between gap-4 shrink-0 mb-0.5">
+			<div class="flex-1 min-w-0">
+				<div class="flex items-center gap-1.5 mb-1.5">
+					<Tooltip content={$i18n.t('Back')}>
+						<button
+							class="text-sm p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg transition"
+							aria-label={$i18n.t('Back')}
+							on:click={() => goto('/automations')}
+							type="button"
+						>
+							<ChevronLeft strokeWidth="2.5" />
+						</button>
+					</Tooltip>
+					<input
+						class="text-2xl w-full bg-transparent outline-hidden"
+						placeholder={$i18n.t('Automation Name')}
+						bind:value={name}
+						on:input={markDirty}
+					/>
+				</div>
+			</div>
+
+			<div class="flex items-center gap-2 shrink-0">
+				<Tooltip content={$i18n.t('Delete')}>
+					<button
+						class="p-2 rounded-full bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 text-gray-500 hover:text-black dark:hover:text-white transition"
+						on:click={() => (showDeleteConfirm = true)}
+						type="button"
+					>
+						<GarbageBin />
+					</button>
+				</Tooltip>
+
+				{#if isDirty}
+					<button
+						class="px-4 py-1.5 text-sm bg-black text-white dark:bg-white dark:text-black rounded-full hover:opacity-90 transition flex items-center gap-1.5"
+						on:click={saveHandler}
+						disabled={saving}
+						type="button"
+					>
+						{$i18n.t('Save')}
+						{#if saving}
+							<Spinner className="size-3" />
+						{/if}
+					</button>
+				{/if}
+
+				<button
+					class="px-4 py-1.5 text-sm border border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full flex items-center gap-1.5"
+					on:click={runNowHandler}
+					type="button"
+					disabled={loading}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="size-3.5"
+					>
+						<path
+							d="M6.3 2.84A1.5 1.5 0 0 0 4 4.11v11.78a1.5 1.5 0 0 0 2.3 1.27l9.344-5.891a1.5 1.5 0 0 0 0-2.538L6.3 2.841Z"
+						/>
+					</svg>
+					<div class="hidden md:block">{$i18n.t('Run now')}</div>
+					{#if loading}
+						<Spinner className="size-3" />
+					{/if}
+				</button>
+			</div>
+		</div>
+
+		<!-- Content Segment: Independent Scrolling Columns based on PromptEditor -->
+		<div class="flex flex-col md:flex-row gap-4 flex-1 overflow-hidden pb-2 px-1">
+			<!-- Main Input Column -->
+			<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
+				<div class="flex items-center justify-between mb-2 shrink-0 px-1">
+					<div class="text-gray-500 text-xs">{$i18n.t('Instructions')}</div>
+				</div>
+				<div class="relative flex-1 min-h-0">
+					<div
+						class="bg-gray-50 dark:bg-gray-900 rounded-2xl p-4 border border-gray-100/50 dark:border-gray-850/50 h-full"
+					>
+						<textarea
+							class="w-full h-full text-sm bg-transparent outline-hidden resize-none placeholder:text-gray-300 dark:placeholder:text-gray-700"
+							bind:value={prompt}
+							on:input={markDirty}
+							placeholder={$i18n.t('Enter the prompt instructions for this automation...')}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<!-- Sidebar Configuration Column -->
+			<div class="hidden md:flex w-full md:w-80 shrink-0 overflow-y-auto px-1 flex-col gap-5">
+				<div>
+					<div class="text-gray-500 text-xs mb-3">{$i18n.t('Configuration')}</div>
+					<div class="space-y-2">
+						<!-- Schedule -->
+						<div class="flex items-center justify-between text-xs">
+							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Repeats')}</span>
+							<Dropdown bind:show={showScheduleDropdown} side="bottom" align="end">
+								<button
+									type="button"
+									class="flex items-center gap-1.5 px-3 py-1.5 rounded-2xl text-xs transition text-gray-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 bg-gray-50 dark:bg-gray-850/50 max-w-40 truncate"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-3.5 text-gray-400 shrink-0"
+										><path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+										/></svg
+									>
+									<span class="truncate">{scheduleLabel}</span>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="2"
+										stroke="currentColor"
+										class="size-3 text-gray-400 shrink-0"
+										><path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="m19.5 8.25-7.5 7.5-7.5-7.5"
+										/></svg
+									>
+								</button>
+								<div
+									slot="content"
+									class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-64 p-1"
+								>
+									<div class="px-2 text-xs text-gray-500 py-1">
+										{$i18n.t('Schedule')}
+									</div>
+									<div class="px-1.5 mt-0.5 mb-2">
+										<select
+											class="w-full bg-transparent rounded-xl text-xs py-2 px-2 outline-hidden border-none"
+											bind:value={frequency}
+											on:click={(e) => e.stopPropagation()}
+											on:change={markDirty}
+										>
+											{#each FREQUENCIES as f}<option value={f.key}>{f.label}</option>{/each}
+										</select>
+									</div>
+									{#if frequency === 'CUSTOM'}
+										<div class="px-2 pb-2">
+											<input
+												type="text"
+												bind:value={customRrule}
+												placeholder="RRULE:FREQ=DAILY;BYHOUR=9;BYMINUTE=0"
+												class="w-full bg-transparent outline-hidden text-xs placeholder:text-gray-400 dark:placeholder:text-gray-600"
+												on:click={(e) => e.stopPropagation()}
+												on:input={markDirty}
+											/>
+										</div>
+									{:else if frequency !== 'HOURLY'}
+										<div class="flex gap-2 flex-wrap items-center px-3 pb-2 text-xs">
+											{#if frequency === 'ONCE'}
+												<input
+													type="date"
+													bind:value={onceDate}
+													min={new Date().toISOString().split('T')[0]}
+													class="bg-transparent outline-hidden text-xs dark:color-scheme-dark"
+													on:click={(e) => e.stopPropagation()}
+													on:input={markDirty}
+												/>
+												<input
+													type="time"
+													bind:value={onceTime}
+													class="bg-transparent outline-hidden text-xs dark:color-scheme-dark"
+													on:click={(e) => e.stopPropagation()}
+													on:input={markDirty}
+												/>
+											{:else}
+												<span class="text-xs text-gray-500 mr-0.5">{$i18n.t('Time')}</span>
+												<input
+													type="time"
+													value={`${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`}
+													on:input={(e) => {
+														const [h, m] = e.currentTarget.value.split(':').map(Number);
+														hour = h;
+														minute = m;
+														markDirty();
+													}}
+													class="bg-transparent text-center outline-hidden text-xs dark:color-scheme-dark"
+													on:click={(e) => e.stopPropagation()}
+												/>
+											{/if}
+											{#if frequency === 'MONTHLY'}
+												<span class="text-xs text-gray-500">{$i18n.t('Day')}</span>
+												<input
+													type="number"
+													bind:value={monthDay}
+													min={1}
+													max={31}
+													class="w-8 bg-transparent text-center outline-hidden text-xs"
+													on:click={(e) => e.stopPropagation()}
+													on:input={markDirty}
+												/>
+											{/if}
+										</div>
+										{#if frequency === 'WEEKLY'}
+											<div class="flex gap-1 px-2 pb-2">
+												{#each DAYS as d}
+													<button
+														type="button"
+														class="flex-1 py-1 text-xs rounded-xl transition {selectedDays.includes(
+															d.key
+														)
+															? 'bg-black dark:bg-white text-white dark:text-black'
+															: 'bg-gray-50 dark:bg-gray-800 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'}"
+														on:click={() => {
+															selectedDays = selectedDays.includes(d.key)
+																? selectedDays.filter((x) => x !== d.key)
+																: [...selectedDays, d.key];
+															markDirty();
+														}}
+													>
+														{d.label}
+													</button>
+												{/each}
+											</div>
+										{/if}
+									{/if}
+								</div>
+							</Dropdown>
+						</div>
+
+						<!-- Model -->
+						<div class="flex items-center justify-between text-xs">
+							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Model')}</span>
+							<Dropdown bind:show={showModelDropdown} side="bottom" align="end">
+								<button
+									type="button"
+									class="flex items-center gap-1.5 px-3 py-1.5 rounded-2xl text-xs transition text-gray-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 bg-gray-50 dark:bg-gray-850/50 max-w-40 truncate"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-3.5 shrink-0 text-gray-400"
+										><path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 0 0 2.455 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
+										/></svg
+									>
+									<span class="truncate">{modelLabel}</span>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="2"
+										stroke="currentColor"
+										class="size-3 shrink-0 text-gray-400"
+										><path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="m19.5 8.25-7.5 7.5-7.5-7.5"
+										/></svg
+									>
+								</button>
+								<div
+									slot="content"
+									class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-72 p-1"
+								>
+									<div
+										class="flex items-center gap-2 px-2.5 py-1.5 border-b border-gray-100 dark:border-gray-800/50 mb-1"
+									>
+										<Search className="size-3.5 text-gray-400" strokeWidth="2.5" />
+										<input
+											bind:value={modelSearch}
+											class="w-full text-xs bg-transparent outline-hidden"
+											placeholder={$i18n.t('Search a model')}
+											autocomplete="off"
+											on:click={(e) => e.stopPropagation()}
+										/>
+									</div>
+									<div class="overflow-y-auto scrollbar-thin max-h-60 pt-1">
+										{#each filteredModels as model (model.id)}
+											<button
+												class="px-2.5 py-2 rounded-xl w-full text-left text-xs {model_id ===
+												model.id
+													? 'bg-gray-50 dark:bg-gray-800/60'
+													: 'hover:bg-gray-50 dark:hover:bg-gray-800/30'}"
+												type="button"
+												on:click={() => {
+													model_id = model.id;
+													showModelDropdown = false;
+													modelSearch = '';
+													markDirty();
+												}}
+											>
+												<div class="flex items-center text-black dark:text-gray-100 line-clamp-1">
+													<img
+														src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${encodeURIComponent(model.id)}`}
+														alt={model?.name ?? model.id}
+														class="rounded-full size-5 shrink-0 mr-2"
+														loading="lazy"
+														on:error={(e) => {
+															e.currentTarget.src = '/favicon.png';
+														}}
+													/>
+													<div class="truncate">{model.name}</div>
+												</div>
+											</button>
+										{:else}
+											<div class="block px-3 py-2 text-xs text-gray-500">
+												{$i18n.t('No results found')}
+											</div>
+										{/each}
+									</div>
+								</div>
+							</Dropdown>
+						</div>
+
+						<!-- Terminal -->
+						{#if terminalServers.length > 0}
+							<div class="flex items-center justify-between text-xs">
+								<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Terminal')}</span>
+								<Dropdown bind:show={showTerminalDropdown} side="bottom" align="end">
+									<button
+										type="button"
+										class="flex items-center gap-1.5 px-3 py-1.5 rounded-2xl text-xs transition text-gray-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 bg-gray-50 dark:bg-gray-850/50 max-w-40 truncate"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											class="size-3.5 shrink-0 text-gray-400"
+											><path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+											/></svg
+										>
+										<span class="truncate">{terminalLabel}</span>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="2"
+											stroke="currentColor"
+											class="size-3 shrink-0 text-gray-400"
+											><path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="m19.5 8.25-7.5 7.5-7.5-7.5"
+											/></svg
+										>
+									</button>
+									<div
+										slot="content"
+										class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 min-w-56 max-w-56 p-1"
+									>
+										<div class="px-2 text-xs text-gray-500 py-1">
+											{$i18n.t('Terminal Setting')}
+										</div>
+										{#each terminalServers as server (server.id)}
+											<button
+												class="flex w-full justify-between gap-2 items-center px-3 py-2 text-xs cursor-pointer rounded-xl {terminalServerId ===
+												server.id
+													? 'bg-gray-50 dark:bg-gray-800/80 '
+													: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
+												type="button"
+												on:click={() => {
+													if (terminalServerId === server.id) {
+														terminalServerId = '';
+														terminalCwd = '';
+													} else {
+														terminalServerId = server.id;
+													}
+													showTerminalDropdown = false;
+													markDirty();
+												}}
+											>
+												<div class="flex flex-1 gap-2 items-center truncate">
+													<Cloud
+														className="size-4 shrink-0 {terminalServerId === server.id
+															? 'text-emerald-500'
+															: 'text-gray-400'}"
+														strokeWidth="2.5"
+													/>
+													<span class="truncate">{server.name || server.id}</span>
+												</div>
+												{#if terminalServerId === server.id}
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														viewBox="0 0 20 20"
+														fill="currentColor"
+														class="size-4 text-emerald-600 dark:text-emerald-400 shrink-0"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+												{/if}
+											</button>
+										{/each}
+										{#if terminalServerId}
+											<div
+												class="border-t border-gray-100 dark:border-gray-800 mt-1.5 pt-1.5 px-0.5"
+											>
+												<div class="px-2.5 py-1 text-xs text-gray-500">
+													{$i18n.t('Working Directory')}
+												</div>
+												<div class="px-2 pb-1">
+													<input
+														type="text"
+														bind:value={terminalCwd}
+														placeholder="/home/user/project"
+														class="w-full bg-gray-50 dark:bg-gray-900 rounded-lg outline-hidden text-xs py-2 px-2.5 border-none placeholder:text-gray-400 dark:placeholder:text-gray-600"
+														on:click={(e) => e.stopPropagation()}
+														on:input={markDirty}
+													/>
+												</div>
+											</div>
+										{/if}
+									</div>
+								</Dropdown>
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Status section -->
+				<div>
+					<div class="text-gray-500 text-xs mb-3">{$i18n.t('Status')}</div>
+					<div class="space-y-2.5">
+						<div class="flex items-center justify-between text-xs">
+							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('State')}</span>
+							<div
+								class="flex items-center gap-1.5 px-2.5 py-1 rounded-xl text-xs transition {is_active
+									? 'text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10'
+									: 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800'}"
+							>
+								<span
+									class="inline-block size-1.5 rounded-full {is_active
+										? 'bg-emerald-500'
+										: 'bg-gray-400'}"
+								></span>
+								<span>{is_active ? $i18n.t('Active') : $i18n.t('Paused')}</span>
+							</div>
+						</div>
+
+						<div class="flex items-center justify-between text-xs">
+							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Next run')}</span>
+							<span class=" text-gray-700 dark:text-gray-300"
+								>{formatNextRun(automation.next_runs?.[0] ?? automation.next_run_at)}</span
+							>
+						</div>
+						<div class="flex items-center justify-between text-xs">
+							<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Last ran')}</span>
+							<span class=" text-gray-700 dark:text-gray-300"
+								>{automation.last_run_at
+									? formatNextRun(automation.last_run_at)
+									: $i18n.t('Never')}</span
+							>
+						</div>
+					</div>
+				</div>
+
+				<div class="flex-1 flex flex-col min-h-0">
+					<div class="text-gray-500 text-xs mb-2 shrink-0">
+						{$i18n.t('Execution Logs')}
+					</div>
+					<div class="flex-1 overflow-y-auto scrollbar-hidden w-full">
+						{#if runsLoading}
+							<div class="flex justify-center py-4">
+								<Spinner className="size-4" />
+							</div>
+						{:else if runs.length === 0}
+							<div class="text-xs text-gray-400 py-4 tabular-nums">
+								{$i18n.t('No execution logs available yet')}
+							</div>
+						{:else}
+							<div class="space-y-0.5 w-full">
+								{#each runs as run (run.id)}
+									<button
+										class="w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-xl hover:bg-gray-100/80 dark:hover:bg-gray-850/80 transition-colors {run.chat_id
+											? 'cursor-pointer'
+											: 'cursor-default'}"
+										on:click={() => {
+											if (run.chat_id) goto(`/c/${run.chat_id}`);
+										}}
+										type="button"
+									>
+										<div class="shrink-0 flex items-center justify-center">
+											{#if run.status === 'success'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="size-3 text-emerald-500"
+													><path
+														fill-rule="evenodd"
+														d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+														clip-rule="evenodd"
+													/></svg
+												>
+											{:else if run.status === 'error'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="size-3 text-red-500"
+													><path
+														fill-rule="evenodd"
+														d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+														clip-rule="evenodd"
+													/></svg
+												>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="size-3 text-blue-500"
+													><path
+														d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
+													/></svg
+												>
+											{/if}
+										</div>
+										<div class="flex-1 min-w-0">
+											<div class="text-xs text-gray-800 dark:text-gray-200 truncate">
+												{automation.name}
+											</div>
+										</div>
+										<span class="shrink-0 text-[10px] text-gray-500 font-mono"
+											>{formatRunTime(run.created_at)}</span
+										>
+									</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/routes/(app)/automations/+page.svelte

@@ -36,8 +36,7 @@
 	let total: number | null = null;
 	let loading = false;
 
-	let showEditor = false;
-	let editingAutomation: AutomationResponse | null = null;
+	let showCreateModal = false;
 
 	let showDeleteConfirm = false;
 	let deleteTarget: AutomationResponse | null = null;
@@ -203,11 +202,13 @@
 </DeleteConfirmDialog>
 
 <AutomationModal
-	bind:show={showEditor}
-	automation={editingAutomation}
-	on:save={() => {
-		editingAutomation = null;
+	bind:show={showCreateModal}
+	automation={null}
+	on:save={(e) => {
 		getAutomationList();
+		if (e.detail?.id) {
+			goto(`/automations/${e.detail.id}`);
+		}
 	}}
 />
 
@@ -249,8 +250,7 @@
 							<button
 								class="px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-medium text-sm flex items-center"
 								on:click={() => {
-									editingAutomation = null;
-									showEditor = true;
+									showCreateModal = true;
 								}}
 							>
 								<Plus className="size-3" strokeWidth="2.5" />
@@ -354,18 +354,11 @@
 					{:else}
 						<div class="gap-2 grid my-2 px-3">
 							{#each automations as automation (automation.id)}
-								<div
+								<a
 									class="flex space-x-4 text-left w-full px-3 py-2.5 dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl"
+									href={`/automations/${automation.id}`}
 								>
-									<!-- svelte-ignore a11y-no-static-element-interactions -->
-									<!-- svelte-ignore a11y-click-events-have-key-events -->
-									<div
-										class="flex-1 cursor-pointer"
-										on:click={() => {
-											editingAutomation = automation;
-											showEditor = true;
-										}}
-									>
+									<div class="flex-1">
 										<div class="line-clamp-1 text-sm">{automation.name}</div>
 										<div class="text-xs text-gray-500 line-clamp-1">
 											{formatRRule(automation.data.rrule)}
@@ -375,8 +368,7 @@
 									<div class="flex flex-row gap-0.5 self-center">
 										<AutomationMenu
 											editHandler={() => {
-												editingAutomation = automation;
-												showEditor = true;
+												goto(`/automations/${automation.id}`);
 											}}
 											runHandler={() => {
 												runNowHandler(automation);
@@ -412,7 +404,7 @@
 											</Tooltip>
 										</button>
 									</div>
-								</div>
+								</a>
 							{/each}
 						</div>
 

src/routes/(app)/automations/[id]/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { goto } from '$app/navigation';
+	import { onMount, getContext } from 'svelte';
+
+	import { page } from '$app/stores';
+	import { user, showSidebar } from '$lib/stores';
+	import { getAutomationById } from '$lib/apis/automations';
+
+	import AutomationEditor from '$lib/components/automations/AutomationEditor.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+
+	const i18n = getContext('i18n');
+
+	let automation = null;
+	let loaded = false;
+
+	$: automationId = $page.params.id;
+
+	onMount(async () => {
+		if (
+			$user?.role !== 'admin' &&
+			!($user?.permissions?.features?.automations ?? false)
+		) {
+			goto('/');
+			return;
+		}
+
+		if (automationId) {
+			const res = await getAutomationById(localStorage.token, automationId).catch((error) => {
+				toast.error(`${error}`);
+				return null;
+			});
+
+			if (res) {
+				automation = res;
+				loaded = true;
+			} else {
+				goto('/automations');
+			}
+		} else {
+			goto('/automations');
+		}
+	});
+</script>
+
+{#if loaded && automation}
+	<AutomationEditor {automation} />
+{:else}
+	<div
+		class="w-full h-screen max-h-[100dvh] flex justify-center items-center transition-width duration-200 ease-in-out {$showSidebar
+			? 'md:max-w-[calc(100%-var(--sidebar-width))]'
+			: ''}"
+	>
+		<Spinner className="size-5" />
+	</div>
+{/if}