diff --git a/backend/open_webui/routers/prompts.py b/backend/open_webui/routers/prompts.py
index 0b6354b0b6..967d1b59ea 100644
--- a/backend/open_webui/routers/prompts.py
+++ b/backend/open_webui/routers/prompts.py
@@ -635,6 +635,50 @@ async def get_prompt_history(
     return history
 
 
+@router.get('/id/{prompt_id}/history/diff')
+async def get_prompt_diff(
+    prompt_id: str,
+    from_id: str,
+    to_id: str,
+    user=Depends(get_verified_user),
+    db: AsyncSession = Depends(get_async_session),
+):
+    """Get diff between two versions."""
+    prompt = await Prompts.get_prompt_by_id(prompt_id, db=db)
+
+    if not prompt:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=ERROR_MESSAGES.NOT_FOUND,
+        )
+
+    # Check read access
+    if not (
+        user.role == 'admin'
+        or prompt.user_id == user.id
+        or await AccessGrants.has_access(
+            user_id=user.id,
+            resource_type='prompt',
+            resource_id=prompt.id,
+            permission='read',
+            db=db,
+        )
+    ):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
+        )
+
+    diff = await PromptHistories.compute_diff(from_id, to_id, prompt.id, db=db)
+    if not diff:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=ERROR_MESSAGES.NOT_FOUND,
+        )
+
+    return diff
+
+
 @router.get('/id/{prompt_id}/history/{history_id}', response_model=PromptHistoryModel)
 async def get_prompt_history_entry(
     prompt_id: str,
@@ -726,47 +770,3 @@ async def delete_prompt_history_entry(
         )
 
     return success
-
-
-@router.get('/id/{prompt_id}/history/diff')
-async def get_prompt_diff(
-    prompt_id: str,
-    from_id: str,
-    to_id: str,
-    user=Depends(get_verified_user),
-    db: AsyncSession = Depends(get_async_session),
-):
-    """Get diff between two versions."""
-    prompt = await Prompts.get_prompt_by_id(prompt_id, db=db)
-
-    if not prompt:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=ERROR_MESSAGES.NOT_FOUND,
-        )
-
-    # Check read access
-    if not (
-        user.role == 'admin'
-        or prompt.user_id == user.id
-        or await AccessGrants.has_access(
-            user_id=user.id,
-            resource_type='prompt',
-            resource_id=prompt.id,
-            permission='read',
-            db=db,
-        )
-    ):
-        raise HTTPException(
-            status_code=status.HTTP_401_UNAUTHORIZED,
-            detail=ERROR_MESSAGES.ACCESS_PROHIBITED,
-        )
-
-    diff = await PromptHistories.compute_diff(from_id, to_id, prompt.id, db=db)
-    if not diff:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=ERROR_MESSAGES.NOT_FOUND,
-        )
-
-    return diff
diff --git a/backend/open_webui/routers/skills.py b/backend/open_webui/routers/skills.py
index 033b2bd5af..933966cb9f 100644
--- a/backend/open_webui/routers/skills.py
+++ b/backend/open_webui/routers/skills.py
@@ -664,7 +664,8 @@ async def diff_skill_file(
     return {
         'binary': False,
         'diff': ''.join(
-            difflib.unified_diff(
+            line if line.endswith('\n') else line + '\n\\ No newline at end of file\n'
+            for line in difflib.unified_diff(
                 (files[0] or {}).get('content', '').splitlines(True),
                 (files[1] or {}).get('content', '').splitlines(True),
                 fromfile=f'{from_id[:7]}/{path}',
diff --git a/src/lib/components/chat/FileNav/FileEntryRow.svelte b/src/lib/components/chat/FileNav/FileEntryRow.svelte
index ea3b61a1ba..eecfa45386 100644
--- a/src/lib/components/chat/FileNav/FileEntryRow.svelte
+++ b/src/lib/components/chat/FileNav/FileEntryRow.svelte
@@ -339,7 +339,7 @@
 					{entry.name}
 				</span>
 			{/if}
-			{#if !writable && !renaming}
+			{#if !writable && !renaming && variant !== 'workspace'}
 				<span class="text-[0.625rem] text-gray-400 shrink-0">{$i18n.t('Read-only')}</span>
 			{/if}
 			{#if entry.type === 'file' && entry.size !== undefined && !renaming}
diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte
index 26f41406fc..011714d891 100644
--- a/src/lib/components/common/Tooltip.svelte
+++ b/src/lib/components/common/Tooltip.svelte
@@ -41,7 +41,7 @@
 		if (elementId) {
 			tooltipContent = document.getElementById(elementId);
 		} else {
-			tooltipContent = DOMPurify.sanitize(content);
+			tooltipContent = allowHTML ? DOMPurify.sanitize(content) : content;
 		}
 
 		// After the element changes, the old instance must be destroyed, otherwise the detached tippy floating DOM will be left behind
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index e2fb76af85..979c3c1db6 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -258,10 +258,7 @@
 	};
 
 	const createPromptHandler = async (prompt: PromptDraft) => {
-		const res = await createNewPrompt(localStorage.token, prompt).catch((error) => {
-			toast.error(`${error}`);
-			return null;
-		});
+		const res = await createNewPrompt(localStorage.token, prompt);
 
 		if (res) {
 			toast.success($i18n.t('Prompt created successfully'));
@@ -269,6 +266,7 @@
 			await getPromptList();
 			await closeCreateModal();
 		}
+		return res;
 	};
 
 	const cloneHandler = async (prompt) => {
diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index fef9a6219e..57e2330c63 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -1,24 +1,28 @@
 <script lang="ts">
-	import { onMount, tick, getContext } from 'svelte';
+	import { onMount, onDestroy, tick, getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import type { i18n as i18nType } from 'i18next';
-	import { goto } from '$app/navigation';
-
-	import Textarea from '$lib/components/common/Textarea.svelte';
+	import { goto, beforeNavigate } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import AccessButton from '$lib/components/common/AccessButton.svelte';
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Clipboard from '$lib/components/icons/Clipboard.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import AccessControlModal from '../common/AccessControlModal.svelte';
 	import { user } from '$lib/stores';
 	import { slugify, formatDate, copyToClipboard } from '$lib/utils';
 	import Spinner from '$lib/components/common/Spinner.svelte';
-	import Modal from '$lib/components/common/Modal.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import {
 		getPromptHistory,
+		getPromptDiff,
+		getPromptHistoryEntry,
 		setProductionPromptVersion,
 		deletePromptHistoryVersion,
 		updatePromptMetadata,
@@ -29,9 +33,10 @@
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
 	import PromptHistoryMenu from './PromptHistoryMenu.svelte';
 	import Tags from '$lib/components/common/Tags.svelte';
+	import VersionMenuItem from '../common/VersionMenuItem.svelte';
+	import VersionDiff from '../common/VersionDiff.svelte';
 
 	dayjs.extend(localizedFormat);
-
 	export let onSubmit: Function;
 	export let edit = false;
 	export let prompt: any = null;
@@ -39,225 +44,279 @@
 	export let disabled = false;
 	export let modal = false;
 	export let onCancel: Function = () => {};
-
 	const i18n = getContext<Writable<i18nType>>('i18n');
 
 	let loading = false;
-	let showEditModal = false;
-
+	let ready = false;
 	let name = '';
 	let command = '';
 	let content = '';
-	let tags = [];
+	let savedContent = '';
+	let tags: { name: string }[] = [];
 	let commitMessage = '';
 	let isProduction = true;
-
 	let accessGrants = [];
 	let showAccessControlModal = false;
 	let hasManualEdit = false;
-
 	let history: any[] = [];
+	let productionEntry: any = null;
 	let historyLoading = false;
+	let historyError = false;
 	let selectedHistoryEntry: any = null;
 	let historyPage = 0;
-	let historyHasMore = true;
+	let historyHasMore = false;
+	let showHistory = false;
+	let editingHistory = false;
+	let historyDiff: any = null;
+	let comparing = false;
 	let contentCopied = false;
-
-	// For debounced auto-save of name/command
+	let contentInput: HTMLTextAreaElement;
 	let originalName = '';
 	let originalCommand = '';
-	let originalTags = [];
+	let originalTags: { name: string }[] = [];
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+	let copyTimer: ReturnType<typeof setTimeout> | null = null;
+	let metadataSave: Promise<void> = Promise.resolve();
+	let suggestionTags: { name: string }[] = [];
+	let showDiscard = false;
+	let discardAction: () => void = () => {};
 
-	let suggestionTags = [];
+	$: selectedVersionId = selectedHistoryEntry?.id ?? prompt?.version_id;
+	$: historical = edit && !!selectedHistoryEntry && selectedVersionId !== prompt?.version_id;
+	$: readOnly = disabled || (historical && !editingHistory);
+	$: metadataDirty =
+		name !== originalName ||
+		command !== originalCommand ||
+		JSON.stringify(tags) !== JSON.stringify(originalTags);
+	$: dirty = ready && !disabled && (content !== savedContent || !!commitMessage || metadataDirty);
+	$: if (!edit && !hasManualEdit) command = name !== '' ? slugify(name) : '';
 
-	$: if (!edit && !hasManualEdit) {
-		command = name !== '' ? slugify(name) : '';
-	}
-
-	function handleCommandInput(e: Event) {
-		hasManualEdit = true;
-	}
-
-	const submitHandler = async () => {
-		if (loading) return;
-		if (disabled) {
-			toast.error($i18n.t('You do not have permission to edit this prompt.'));
-			return;
-		}
-		loading = true;
-
-		if (validateCommandString(command)) {
-			try {
-				await onSubmit({
-					id: prompt?.id,
-					name,
-					command,
-					content,
-					tags: tags.map((tag) => tag.name),
-					access_grants: accessGrants,
-					commit_message: commitMessage || undefined,
-					is_production: isProduction
-				});
-				showEditModal = false;
-				commitMessage = '';
-				isProduction = true;
-				await loadHistory(true); // Reset and reload
-				// Select the newest version after saving
-				if (history.length > 0) {
-					selectedHistoryEntry = history[0];
-				}
-			} catch (error) {
-				toast.error(`${error}`);
-			}
-		} else {
-			toast.error(
-				$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
-			);
-		}
-
-		loading = false;
+	const confirmDiscard = (action: () => void) => {
+		if (dirty) {
+			discardAction = action;
+			showDiscard = true;
+		} else action();
 	};
+	beforeNavigate(({ cancel }) => {
+		if (dirty && !loading && !window.confirm($i18n.t('Discard unsaved changes?'))) cancel();
+	});
 
-	const validateCommandString = (inputString) => {
-		const regex = /^[a-zA-Z0-9-_]+$/;
-		return regex.test(inputString);
+	const validateCommandString = (value: string) => /^[a-zA-Z0-9_-]+$/.test(value);
+	const rememberMetadata = () => {
+		originalName = name;
+		originalCommand = command;
+		originalTags = tags;
 	};
-
 	const loadHistory = async (reset = false) => {
-		if (!prompt?.id || !edit) return;
-		if (historyLoading) return;
-		if (!reset && !historyHasMore) return;
-
+		if (!prompt?.id || !edit || historyLoading) return;
 		historyLoading = true;
-
-		if (reset) {
-			historyPage = 0;
-			historyHasMore = true;
-		}
-
+		historyError = false;
+		const page = reset ? 0 : historyPage;
 		try {
-			const newEntries = await getPromptHistory(localStorage.token, prompt.id, historyPage);
-
-			if (reset) {
-				history = newEntries;
-			} else {
-				history = [...history, ...newEntries];
+			const entries = await getPromptHistory(localStorage.token, prompt.id, page);
+			history = reset ? entries : [...history, ...entries];
+			historyHasMore = entries.length === 20;
+			historyPage = page + 1;
+			if (prompt.version_id) {
+				productionEntry =
+					history.find((entry) => entry.id === prompt.version_id) ||
+					(productionEntry?.id === prompt.version_id
+						? productionEntry
+						: await getPromptHistoryEntry(localStorage.token, prompt.id, prompt.version_id));
 			}
-
-			historyHasMore = newEntries.length > 0;
-			historyPage = historyPage + 1;
 		} catch (error) {
-			console.error('Failed to load history:', error);
-			if (reset) {
-				history = [];
-			}
-		}
-		historyLoading = false;
-	};
-
-	const handleHistoryScroll = (e: Event) => {
-		const target = e.target as HTMLElement;
-		const nearBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 50;
-		if (nearBottom && historyHasMore && !historyLoading) {
-			loadHistory(false);
+			historyError = true;
+			toast.error(`${error}`);
+		} finally {
+			historyLoading = false;
 		}
 	};
-
-	const copyContent = async () => {
-		const textToCopy = selectedHistoryEntry?.snapshot?.content || content;
-		const success = await copyToClipboard(textToCopy);
-		if (success) {
-			contentCopied = true;
-			setTimeout(() => {
-				contentCopied = false;
-			}, 2000);
+	const selectVersion = (entry: any = null) => {
+		historyDiff = null;
+		selectedHistoryEntry = entry?.id === prompt?.version_id ? null : entry;
+		content = selectedHistoryEntry
+			? (selectedHistoryEntry.snapshot.content ?? '')
+			: (prompt?.content ?? '');
+		savedContent = content;
+		commitMessage = '';
+		editingHistory = false;
+		isProduction = !selectedHistoryEntry;
+	};
+	const chooseVersion = (entry: any = null) => {
+		showHistory = false;
+		if ((entry?.id ?? prompt?.version_id) !== selectedVersionId)
+			confirmDiscard(() => selectVersion(entry));
+	};
+	const editVersion = async () => {
+		historyDiff = null;
+		editingHistory = true;
+		isProduction = false;
+		await tick();
+		contentInput?.focus();
+	};
+	const compareToCurrent = async () => {
+		if (comparing || historyDiff || !historical || editingHistory) return;
+		const fromId = selectedVersionId;
+		const toId = prompt.version_id;
+		comparing = true;
+		try {
+			const result = await getPromptDiff(localStorage.token, prompt.id, fromId, toId);
+			if (selectedVersionId !== fromId || prompt.version_id !== toId || editingHistory) return;
+			const before = result.from_snapshot as Record<string, unknown>;
+			const after = result.to_snapshot as Record<string, unknown>;
+			historyDiff = {
+				fromId,
+				toId,
+				metadata: Object.fromEntries(
+					['name', 'tags'].map((key) => [key, { before: before[key], after: after[key] }])
+				),
+				files: result.content_diff.length
+					? [{ path: $i18n.t('Prompt Content'), status: 'modified', binary: false }]
+					: [],
+				content: result.content_diff
+					.map((line, index) =>
+						line.endsWith('\n')
+							? line
+							: line +
+								'\n' +
+								(index >= 3 && !line.startsWith('@@') ? '\\ No newline at end of file\n' : '')
+					)
+					.join('')
+			};
+		} catch (error) {
+			toast.error(`${error}`);
+		} finally {
+			comparing = false;
 		}
 	};
-
-	const setAsProduction = async (historyEntry: any) => {
-		if (disabled) {
-			toast.error($i18n.t('You do not have permission to edit this prompt.'));
+	const submitHandler = async () => {
+		if (loading || readOnly || historyLoading) return;
+		if (!name.trim() || !content.trim() || !validateCommandString(command)) {
+			toast.error($i18n.t('Enter a name, content, and a valid command.'));
 			return;
 		}
-
+		if (debounceTimer) clearTimeout(debounceTimer);
+		loading = true;
 		try {
-			const res = await setProductionPromptVersion(localStorage.token, prompt.id, historyEntry.id);
-			// Update local prompt object to trigger reactivity
-			prompt = { ...prompt, ...(res ?? {}), version_id: historyEntry.id };
-
-			name = prompt.name || '';
-			content = prompt.content ?? '';
-			tags = (prompt.tags || []).map((tag) => ({ name: tag }));
-			originalName = name;
-			originalTags = tags;
+			await metadataSave;
+			const previousIds = new Set(history.map((entry) => entry.id));
+			const production = isProduction;
+			const result = await onSubmit({
+				id: prompt?.id,
+				name,
+				command,
+				content,
+				tags: tags.map((tag) => tag.name),
+				access_grants: accessGrants,
+				commit_message: commitMessage || undefined,
+				is_production: production
+			});
+			if (!result) throw new Error($i18n.t('Failed to save prompt'));
+			prompt = result;
+			savedContent = content;
+			commitMessage = '';
+			rememberMetadata();
+			if (edit) {
+				await loadHistory(true);
+				if (production) selectVersion();
+				else {
+					const saved = history.find(
+						(entry) => !previousIds.has(entry.id) && entry.snapshot.content === content
+					);
+					if (saved) selectVersion(saved);
+				}
+			}
+		} catch (error) {
+			toast.error(`${error}`);
+		} finally {
+			loading = false;
+		}
+	};
+	const copyContent = async () => {
+		if (await copyToClipboard(content)) {
+			contentCopied = true;
+			if (copyTimer) clearTimeout(copyTimer);
+			copyTimer = setTimeout(() => (contentCopied = false), 2000);
+		}
+	};
+	const setAsProduction = async () => {
+		if (disabled || !selectedHistoryEntry || loading) return;
+		if (debounceTimer) clearTimeout(debounceTimer);
+		loading = true;
+		try {
+			await metadataSave;
+			const result = await setProductionPromptVersion(
+				localStorage.token,
+				prompt.id,
+				selectedHistoryEntry.id
+			);
+			if (!result) throw new Error($i18n.t('Failed to save prompt'));
+			prompt = result;
+			name = result.name;
+			tags = (result.tags || []).map((tag: string) => ({ name: tag }));
+			rememberMetadata();
+			selectVersion();
 			toast.success($i18n.t('Production version updated'));
 		} catch (error) {
 			toast.error(`${error}`);
+		} finally {
+			loading = false;
 		}
 	};
-
 	const handleDeleteHistory = async (historyId: string) => {
-		if (disabled) return;
-
+		if (disabled || loading) return;
+		loading = true;
 		try {
 			await deletePromptHistoryVersion(localStorage.token, prompt.id, historyId);
-			toast.success($i18n.t('Version deleted'));
-			// Reload history from scratch
+			if (selectedHistoryEntry?.id === historyId) selectVersion();
 			await loadHistory(true);
-			// Reset selection if deleted entry was selected
-			if (selectedHistoryEntry?.id === historyId) {
-				selectedHistoryEntry = history.length > 0 ? history[0] : null;
-			}
+			toast.success($i18n.t('Version deleted'));
 		} catch (error) {
 			toast.error(`${error}`);
+		} finally {
+			loading = false;
 		}
 	};
-
-	const renderDate = (timestamp: number) => {
-		const dateVal = timestamp * 1000;
-		return $i18n.t(formatDate(dateVal), {
-			LOCALIZED_TIME: dayjs(dateVal).locale($i18n.language).format('LT'),
-			LOCALIZED_DATE: dayjs(dateVal).locale($i18n.language).format('L')
+	const renderDate = (timestamp: number) =>
+		$i18n.t(formatDate(timestamp * 1000), {
+			LOCALIZED_TIME: dayjs(timestamp * 1000)
+				.locale($i18n.language)
+				.format('LT'),
+			LOCALIZED_DATE: dayjs(timestamp * 1000)
+				.locale($i18n.language)
+				.format('L')
 		});
-	};
-
 	const debouncedSaveMetadata = () => {
 		if (disabled || !edit) return;
-
-		if (debounceTimer) {
-			clearTimeout(debounceTimer);
-		}
-
-		debounceTimer = setTimeout(async () => {
-			if (!validateCommandString(command)) {
-				toast.error(
-					$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
-				);
-				command = originalCommand;
-				return;
-			}
-
-			try {
-				await updatePromptMetadata(
-					localStorage.token,
-					prompt?.id,
-					name,
-					command,
-					tags.map((tag) => tag.name)
-				);
-				// Update originals on success
-				originalName = name;
-				originalCommand = command;
-				originalTags = tags;
-				toast.success($i18n.t('Saved'));
-			} catch (error) {
-				toast.error(`${error}`);
-				// Revert on error (collision)
-				name = originalName;
-				command = originalCommand;
-				tags = originalTags;
-			}
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			metadataSave = metadataSave.then(async () => {
+				if (!validateCommandString(command)) {
+					toast.error(
+						$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
+					);
+					command = originalCommand;
+					return;
+				}
+				const savedName = name,
+					savedCommand = command,
+					savedTags = tags;
+				try {
+					const result = await updatePromptMetadata(
+						localStorage.token,
+						prompt.id,
+						savedName,
+						savedCommand,
+						savedTags.map((tag) => tag.name)
+					);
+					prompt = { ...prompt, ...result };
+					originalName = savedName;
+					originalCommand = savedCommand;
+					originalTags = savedTags;
+				} catch (error) {
+					toast.error(`${error}`);
+				}
+			});
 		}, 500);
 	};
 
@@ -265,32 +324,27 @@
 		if (prompt) {
 			name = prompt.name || '';
 			await tick();
-			command = prompt.command.at(0) === '/' ? prompt.command.slice(1) : prompt.command;
-			content = prompt.content;
-			tags = (prompt.tags || []).map((tag) => ({ name: tag }));
-			accessGrants = prompt?.access_grants === undefined ? [] : prompt?.access_grants;
-
-			// Store originals for revert on collision
-			originalName = name;
-			originalCommand = command;
-			originalTags = tags;
-
-			if (edit) {
-				await loadHistory();
-				// Auto-select production version
-				if (prompt.version_id && history.length > 0) {
-					selectedHistoryEntry = history.find((h) => h.id === prompt.version_id) || history[0];
-				} else if (history.length > 0) {
-					selectedHistoryEntry = history[0];
-				}
-			}
+			command = prompt.command.replace(/^\//, '');
+			hasManualEdit = true;
+			content = prompt.content ?? '';
+			tags = (prompt.tags || []).map((tag: string) => ({ name: tag }));
+			accessGrants = prompt.access_grants ?? [];
 		}
-
-		const res = await getPromptTags(localStorage.token);
-		if (res) {
-			suggestionTags = res.map((tag) => ({ name: tag }));
+		savedContent = content;
+		rememberMetadata();
+		ready = true;
+		if (edit) await loadHistory(true);
+		try {
+			const result = await getPromptTags(localStorage.token);
+			suggestionTags = (result || []).map((tag: string) => ({ name: tag }));
+		} catch (error) {
+			console.error('Failed to load prompt tags:', error);
 		}
 	});
+	onDestroy(() => {
+		if (debounceTimer) clearTimeout(debounceTimer);
+		if (copyTimer) clearTimeout(copyTimer);
+	});
 </script>
 
 <AccessControlModal
@@ -313,140 +367,97 @@
 	}}
 />
 
-<!-- Edit Modal -->
-<Modal size="lg" bind:show={showEditModal}>
-	<div class="px-4 pt-3 pb-4">
-		<div class="flex justify-between items-center mb-2 dark:text-gray-100">
-			<div class="text-xs">{$i18n.t('Edit Prompt')}</div>
-			<button
-				class="rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-				aria-label={$i18n.t('Close')}
-				on:click={() => (showEditModal = false)}
-			>
-				<XMark className="size-4" />
-			</button>
+<ConfirmDialog
+	bind:show={showDiscard}
+	title={$i18n.t('Discard unsaved changes?')}
+	confirmLabel={$i18n.t('Discard')}
+	onConfirm={discardAction}
+/>
+
+<div
+	class="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden {modal
+		? 'px-5 pt-3 pb-1'
+		: ''}"
+>
+	<form
+		class="flex h-full min-h-0 min-w-0 flex-col"
+		inert={loading}
+		on:submit|preventDefault={submitHandler}
+	>
+		<div class="flex min-h-7 shrink-0 items-center justify-between gap-2">
+			{#if modal}
+				<span class="text-xs text-gray-500"
+					>{$i18n.t(clone ? 'Clone Prompt' : 'Create Prompt')}</span
+				>
+			{:else}
+				<button
+					type="button"
+					class="flex h-6 w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-md text-xs text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
+					on:click={() => goto('/workspace/prompts')}
+				>
+					<ChevronLeft className="size-3" strokeWidth="2" />{$i18n.t('Back')}
+				</button>
+			{/if}
+			<div class="flex shrink-0 items-center gap-1 pr-0.5">
+				{#if !disabled}<AccessButton on:click={() => (showAccessControlModal = true)} />
+				{:else}<span class="px-2 py-1 text-xs text-gray-500">{$i18n.t('Read Only')}</span>{/if}
+				{#if modal}<button
+						type="button"
+						aria-label={$i18n.t('Close')}
+						class="p-1 text-gray-500 hover:text-gray-900 dark:hover:text-gray-100"
+						on:click={() => confirmDiscard(() => onCancel())}><XMark className="size-4" /></button
+					>{/if}
+			</div>
 		</div>
 
-		<form on:submit|preventDefault={submitHandler}>
-			<div class="my-2">
-				<div class="flex w-full justify-between">
-					<div class="text-gray-500 text-xs">{$i18n.t('Prompt Content')}</div>
-				</div>
-
-				<div class="mt-1">
-					<Textarea
-						className="text-xs w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
-						placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
-						bind:value={content}
-						aria-label={$i18n.t('Prompt Content')}
-						rows={6}
-						required
-					/>
-				</div>
-			</div>
-
-			<div class="my-2">
-				<div class="text-gray-500 text-xs">{$i18n.t('Commit Message')} ({$i18n.t('optional')})</div>
-				<div class="mt-1">
-					<input
-						class="w-full bg-transparent text-xs outline-hidden"
-						placeholder={$i18n.t('Describe what changed...')}
-						aria-label={$i18n.t('Commit Message')}
-						bind:value={commitMessage}
-					/>
-				</div>
-			</div>
-
-			<div class="mt-4 flex items-center justify-between">
-				<label class="flex items-center gap-2 cursor-pointer">
-					<input
-						type="checkbox"
-						bind:checked={isProduction}
-						class="w-4 h-4 rounded border-gray-300 dark:border-gray-600"
-					/>
-					<span class="text-xs text-gray-700 dark:text-gray-300"
-						>{$i18n.t('Set as Production')}</span
-					>
-				</label>
-				<div>
-					<button
-						class="px-3 py-1.5 text-xs transition rounded-full {loading
-							? 'cursor-not-allowed bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
-							: 'bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'} flex justify-center"
-						type="submit"
-						disabled={loading}
-					>
-						<div class="font-normal">{$i18n.t('Save')}</div>
-						{#if loading}
-							<div class="ml-1.5">
-								<Spinner />
-							</div>
-						{/if}
-					</button>
-				</div>
-			</div>
-		</form>
-	</div>
-</Modal>
-
-{#if edit}
-	<!-- Edit mode: Read-only view with history -->
-	<div class="flex h-full max-h-[100dvh] w-full flex-col">
-		<button
-			class="mb-1 flex h-6 w-fit items-center gap-1 rounded-md text-xs text-gray-400 transition-colors duration-75 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
-			type="button"
-			on:click={() => {
-				goto('/workspace/prompts');
-			}}
-		>
-			<ChevronLeft className="size-3" strokeWidth="2" />
-			<span>{$i18n.t('Back')}</span>
-		</button>
-
-		<div class="flex shrink-0 items-start justify-between gap-3 pb-1">
-			<div class="min-w-0 flex-1">
-				<input
-					class="w-full bg-transparent text-sm outline-hidden"
-					placeholder={$i18n.t('Prompt Name')}
-					bind:value={name}
-					on:input={debouncedSaveMetadata}
-					{disabled}
-				/>
-
-				<div class="mt-0.5 flex min-w-0 items-center gap-2 text-xs text-gray-500">
-					<div class="flex min-w-0 flex-1 items-center gap-0.5">
+		<div class="shrink-0 px-1 pb-2">
+			<input
+				class="w-full bg-transparent text-sm outline-hidden"
+				placeholder={$i18n.t('Prompt Name')}
+				aria-label={$i18n.t('Prompt Name')}
+				bind:value={name}
+				on:input={debouncedSaveMetadata}
+				required
+				{disabled}
+			/>
+			<div class="mt-0.5 flex min-w-0 items-center gap-2 text-xs text-gray-500">
+				<Tooltip
+					className="min-w-0 flex-1"
+					content={$i18n.t('Activate this command by typing "/{{COMMAND}}" to chat input.', {
+						COMMAND: command
+					})}
+					placement="bottom-start"
+				>
+					<div class="flex min-w-0 items-center gap-0.5">
 						<span>/</span>
 						<input
 							class="min-w-0 flex-1 bg-transparent outline-hidden"
-							placeholder={$i18n.t('command')}
+							placeholder={$i18n.t('Command')}
+							aria-label={$i18n.t('Command')}
 							bind:value={command}
-							on:input={debouncedSaveMetadata}
+							on:input={() => {
+								hasManualEdit = true;
+								debouncedSaveMetadata();
+							}}
+							required
 							{disabled}
 						/>
 					</div>
-				</div>
-			</div>
-
-			<div class="flex shrink-0 items-center gap-1.5 pr-0.5">
-				{#if !disabled}
-					<button
-						class="flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
-						on:click={() => (showEditModal = true)}
-					>
-						{$i18n.t('Edit')}
-					</button>
-
-					<AccessButton on:click={() => (showAccessControlModal = true)} />
-				{:else}
-					<span class="rounded-lg bg-gray-100 px-2 py-1 text-xs text-gray-500 dark:bg-gray-850">
-						{$i18n.t('Read Only')}
-					</span>
+				</Tooltip>
+				{#if edit}
+					<Tooltip className="min-w-0 max-w-[45%]" content={$i18n.t('Click to copy ID')}>
+						<button
+							type="button"
+							class="w-full truncate font-mono text-xs text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+							on:click={async () => {
+								if (await copyToClipboard(prompt.id))
+									toast.success($i18n.t('ID copied to clipboard'));
+							}}>{prompt.id}</button
+						>
+					</Tooltip>
 				{/if}
 			</div>
-		</div>
-
-		<div class="mb-1 flex justify-between items-center gap-2">
-			<div class="flex-1 min-w-0">
+			<div class="mt-1">
 				<Tags
 					{tags}
 					{disabled}
@@ -461,282 +472,185 @@
 					}}
 				/>
 			</div>
-
-			<Tooltip content={$i18n.t('Click to copy ID')}>
-				<button
-					class="min-w-0 max-w-[14rem] shrink-0 truncate rounded-md px-1 py-0.5 font-mono text-xs text-gray-400 transition hover:text-gray-700 dark:hover:text-gray-300"
-					on:click={() => {
-						copyToClipboard(prompt.id);
-						toast.success($i18n.t('ID copied to clipboard'));
-					}}
-				>
-					{prompt.id}
-				</button>
-			</Tooltip>
 		</div>
 
-		<div class="flex flex-1 flex-col gap-3 overflow-hidden pb-4 md:flex-row">
-			<!-- Desktop History Sidebar -->
-			<div class="hidden w-64 shrink-0 overflow-hidden md:flex md:flex-col">
-				<div class="flex-1 overflow-y-auto">
-					{@render historySection()}
-				</div>
-			</div>
-
-			<!-- Prompt Content -->
-			<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
-				<div class="flex items-center justify-between mb-1 shrink-0">
-					<div class="flex items-center gap-2">
-						<div class="text-gray-500 text-xs">
-							{$i18n.t('Prompt Content')}
-						</div>
-						{#if selectedHistoryEntry}
-							<span class="px-1 font-mono text-xs text-gray-500">
-								{selectedHistoryEntry.id.slice(0, 7)}
-							</span>
-						{/if}
-					</div>
-
-					{#if selectedHistoryEntry && !disabled}
-						<div class="flex items-center gap-2">
-							{#if selectedHistoryEntry.id === prompt?.version_id}
-								<span class="inline-flex items-center text-xs text-gray-400 dark:text-gray-500">
-									{$i18n.t('Live')}
-								</span>
-							{:else}
-								<button
-									class="text-xs text-gray-500 hover:text-gray-900 dark:hover:text-gray-300 hover:underline transition"
-									on:click={() => setAsProduction(selectedHistoryEntry)}
-								>
-									{$i18n.t('Set as Production')}
-								</button>
-							{/if}
-							<PromptHistoryMenu
-								isProduction={selectedHistoryEntry.id === prompt?.version_id}
-								onDelete={() => handleDeleteHistory(selectedHistoryEntry.id)}
-								onClose={() => {}}
-							/>
-						</div>
-					{/if}
-				</div>
-				<!-- Content container with copy button -->
-				<div class="relative flex-1 min-h-0">
-					<!-- Copy button - outside scroll area -->
-					<div class="absolute top-2 right-2 z-10">
-						<button
-							class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
-							aria-label={$i18n.t('Copy content')}
-							on:click={copyContent}
-						>
-							{#if contentCopied}
-								<Check className="size-4 text-green-500" />
-							{:else}
-								<Clipboard className="size-4 text-gray-500" />
-							{/if}
-						</button>
-					</div>
-					<!-- Scrollable content -->
-					<div
-						class="h-full overflow-y-auto rounded-lg bg-gray-50/60 px-3 py-2 dark:bg-white/[0.03]"
-					>
-						<pre
-							class="whitespace-pre-wrap pr-8 font-mono text-[0.6875rem] leading-relaxed">{selectedHistoryEntry
-								?.snapshot?.content || content}</pre>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-{:else}
-	<!-- Create mode: Form -->
-	<div class="w-full max-h-full {modal ? 'h-full flex flex-col' : ''}">
-		{#if modal}
-			<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-2">
-				<h3 class="text-sm">{$i18n.t('Create Prompt')}</h3>
-				<button
-					class="self-center shrink-0 ml-2"
-					aria-label={$i18n.t('Close')}
-					type="button"
-					on:click={() => {
-						onCancel();
-					}}
-				>
-					<XMark className="size-5" />
-				</button>
-			</div>
-		{/if}
-
-		<form
-			class="flex flex-col w-full {modal ? 'px-5 pb-3 flex-1 min-h-0' : 'mb-10'}"
-			on:submit|preventDefault={submitHandler}
+		<div
+			class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white dark:border-white/5 dark:bg-gray-900"
 		>
-			<div class="mb-2 shrink-0">
-				<Tooltip
-					content={`${$i18n.t('Only alphanumeric characters and hyphens are allowed')} - ${$i18n.t('Activate this command by typing "/{{COMMAND}}" to chat input.', { COMMAND: command })}`}
-					placement="bottom-start"
+			{#if historyDiff}
+				<VersionDiff
+					diff={historyDiff}
+					currentLabel="Production"
+					loadFileDiff={async () => ({ diff: historyDiff.content })}
+					onClose={() => (historyDiff = null)}
+				/>
+			{:else}
+				<div
+					class="flex shrink-0 items-center gap-1 bg-gray-50/60 px-2.5 py-1.5 text-xs dark:bg-black"
 				>
-					<div class="flex flex-col w-full">
-						<div class="flex items-center">
-							<input
-								class="w-full bg-transparent text-sm outline-hidden"
-								placeholder={$i18n.t('Name')}
-								bind:value={name}
-								required
-							/>
-							<div class="self-center shrink-0">
-								<AccessButton on:click={() => (showAccessControlModal = true)} />
-							</div>
-						</div>
-						<div class="flex gap-0.5 items-center text-xs text-gray-500">
-							<div>/</div>
-							<input
-								class="w-full bg-transparent outline-hidden"
-								placeholder={$i18n.t('Command')}
-								bind:value={command}
-								on:input={handleCommandInput}
-								required
-							/>
-						</div>
-
-						<div class="mt-1">
-							<Tags
-								{tags}
-								{suggestionTags}
-								on:add={(e) => {
-									tags = [...tags, { name: e.detail }];
-								}}
-								on:delete={(e) => {
-									tags = tags.filter((tag) => tag.name !== e.detail);
-								}}
-							/>
-						</div>
+					<div class="min-w-0 flex-1">
+						{#if edit}
+							<Dropdown bind:show={showHistory}>
+								<button
+									type="button"
+									aria-label={$i18n.t('Select version')}
+									class="flex max-w-full items-center gap-2 py-0.5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-100"
+									disabled={loading}
+								>
+									<span class="truncate"
+										>{historical
+											? selectedHistoryEntry.commit_message || selectedVersionId.slice(0, 7)
+											: $i18n.t('Production')}{editingHistory
+											? ` · ${$i18n.t('Editing')}`
+											: ''}</span
+									><ChevronDown className="size-3 shrink-0" />
+								</button>
+								<div slot="content">
+									<DropdownMenu className="w-56 max-w-[calc(100vw-2rem)] max-h-80 overflow-y-auto">
+										<VersionMenuItem
+											entry={history.find((entry) => entry.id === prompt?.version_id) ||
+												(productionEntry?.id === prompt?.version_id ? productionEntry : null)}
+											status={$i18n.t('Production')}
+											selected={!historical}
+											onSelect={() => chooseVersion()}
+										/>
+										{#if history.some((entry) => entry.id !== prompt?.version_id)}<hr
+												class="border-gray-100 dark:border-gray-800"
+											/>{/if}
+										{#each history.filter((entry) => entry.id !== prompt?.version_id) as entry (entry.id)}
+											<VersionMenuItem
+												{entry}
+												selected={selectedVersionId === entry.id}
+												onSelect={() => chooseVersion(entry)}
+											/>
+										{/each}
+										{#if historyLoading}<div
+												class="flex items-center gap-2 px-2 py-1 text-xs text-gray-500"
+											>
+												<Spinner className="size-3" />{$i18n.t('Loading...')}
+											</div>
+										{:else if historyError}<button
+												type="button"
+												on:click={() => loadHistory(historyPage === 0)}>{$i18n.t('Retry')}</button
+											>
+										{:else if historyHasMore}<hr class="border-gray-100 dark:border-gray-800" />
+											<button type="button" on:click={() => loadHistory()}
+												>{$i18n.t('Load more')}</button
+											>{/if}
+									</DropdownMenu>
+								</div>
+							</Dropdown>
+						{:else}<span class="text-gray-500">{$i18n.t('Prompt Content')}</span>{/if}
 					</div>
-				</Tooltip>
-			</div>
-
-			<div class={modal ? 'my-2 flex-1 min-h-0 flex flex-col' : 'my-2'}>
-				<div class="text-gray-500 text-xs">{$i18n.t('Prompt Content')}</div>
-				<div class={modal ? 'mt-1 flex-1 min-h-0 flex flex-col' : 'mt-1'}>
-					{#if modal}
-						<textarea
-							class="w-full flex-1 min-h-0 resize-none bg-transparent text-xs outline-hidden"
-							placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
-							bind:value={content}
-							required
-						></textarea>
-					{:else}
-						<Textarea
-							className="text-xs w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
-							placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
-							bind:value={content}
-							rows={6}
-							required
-						/>
-					{/if}
-					<div class="text-xs text-gray-400 dark:text-gray-500">
-						ⓘ {$i18n.t('Use')}
-						<span class="font-normal text-gray-600 dark:text-gray-300"
-							>{'{{'}{$i18n.t('variable')}{'}}'}</span
-						>
-						{$i18n.t('for placeholders')}
-					</div>
-				</div>
-			</div>
-
-			<div class="flex justify-end {modal ? 'pt-3 gap-2 shrink-0' : 'my-4 pb-20'}">
-				{#if modal}
-					<button
-						class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
-						type="button"
-						on:click={() => {
-							onCancel();
-						}}
+					<Tooltip content={$i18n.t('Use {{variable}} for placeholders')}
+						><span class="px-1 text-gray-400">{'{{variable}}'}</span></Tooltip
 					>
-						{$i18n.t('Cancel')}
-					</button>
-				{/if}
-
-				<button
-					class="{modal
-						? 'px-3.5 py-1.5 text-xs rounded-full w-fit'
-						: 'text-xs w-full lg:w-fit px-4 py-2 rounded-xl'} transition bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black flex justify-center disabled:cursor-not-allowed disabled:opacity-50"
-					type="submit"
-					disabled={loading}
-				>
-					<div class="font-normal">{$i18n.t('Save & Create')}</div>
-					{#if loading}
-						<div class="ml-1.5">
-							<Spinner />
-						</div>
+					<button
+						type="button"
+						aria-label={$i18n.t('Copy content')}
+						class="shrink-0 p-0.5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-100"
+						on:click={copyContent}
+						>{#if contentCopied}<Check className="size-3.5 text-green-500" />{:else}<Clipboard
+								className="size-3.5"
+							/>{/if}</button
+					>
+					{#if edit && !disabled && selectedVersionId && !editingHistory}
+						<PromptHistoryMenu
+							isProduction={!historical}
+							onDelete={() => handleDeleteHistory(selectedVersionId)}
+							onClose={() => {}}
+						>
+							<button
+								type="button"
+								aria-label={$i18n.t('More Options')}
+								class="shrink-0 p-0.5 text-gray-500 hover:text-gray-900 dark:hover:text-gray-100"
+								><EllipsisHorizontal className="size-3.5" /></button
+							>
+						</PromptHistoryMenu>
 					{/if}
-				</button>
-			</div>
-		</form>
-	</div>
-{/if}
-
-{#snippet historySection()}
-	<div class="flex flex-col h-full">
-		<div class="flex items-center justify-between mb-2 shrink-0">
-			<div class="text-gray-500 text-xs">{$i18n.t('History')}</div>
+				</div>
+				<textarea
+					bind:this={contentInput}
+					bind:value={content}
+					aria-label={$i18n.t('Prompt Content')}
+					placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
+					readonly={readOnly}
+					required
+					spellcheck="false"
+					class="min-h-0 w-full flex-1 resize-none bg-transparent px-3 py-2 font-mono text-xs leading-relaxed outline-hidden"
+					on:keydown={(event) => {
+						if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {
+							event.preventDefault();
+							submitHandler();
+						}
+					}}
+				></textarea>
+			{/if}
 		</div>
 
-		{#if history.length > 0}
-			<div class="space-y-0 flex-1 overflow-y-auto" on:scroll={handleHistoryScroll}>
-				{#each history as entry, index}
-					<button
-						class="group relative w-full px-1.5 py-1.5 pl-3 text-left transition {selectedHistoryEntry?.id ===
-						entry.id
-							? 'text-gray-900 dark:text-white'
-							: 'text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-200'}"
-						on:click={() => (selectedHistoryEntry = entry)}
-					>
-						<span
-							class="absolute left-0 top-1.5 h-[calc(100%-0.75rem)] w-px rounded-full transition {selectedHistoryEntry?.id ===
-							entry.id
-								? 'bg-gray-900 dark:bg-gray-200'
-								: 'bg-transparent'}"
-						></span>
-
-						<div class="flex items-center gap-2 mb-1">
-							<div class="truncate text-xs">
-								{entry.commit_message || $i18n.t('Update')}
-							</div>
-							{#if entry.id === prompt?.version_id}
-								<span
-									class="inline-flex shrink-0 items-center text-xs text-gray-400 dark:text-gray-500"
-								>
-									{$i18n.t('Live')}
-								</span>
-							{/if}
-						</div>
-
-						<div class="flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
-							{#if entry.user}
-								<img
-									src={`/api/v1/users/${entry.user.id}/profile/image`}
-									alt={entry.user.name}
-									class="size-3 rounded-full mr-0.5"
-									on:error={(e) => (e.target.src = '/user.png')}
-								/>
-								<span class="truncate">{entry.user.name}</span>
-								<span>•</span>
-							{/if}
-							<span class="shrink-0">{renderDate(entry.created_at)}</span>
-						</div>
-					</button>
-				{/each}
-
-				{#if historyLoading}
-					<div class="flex justify-center py-2">
-						<Spinner className="size-3" />
-					</div>
-				{/if}
-			</div>
-		{:else if !historyLoading}
-			<div class="text-xs text-gray-400 text-center py-6 italic">
-				{$i18n.t('No history available')}
+		{#if historical}
+			<div
+				class="flex shrink-0 flex-wrap items-center justify-between gap-2 px-1 py-2 text-xs text-gray-500"
+			>
+				<span
+					>{selectedHistoryEntry.id.slice(0, 7)} · {renderDate(
+						selectedHistoryEntry.created_at
+					)}</span
+				>
+				{#if !editingHistory}<div class="ml-auto flex flex-wrap justify-end gap-2">
+						<button
+							type="button"
+							class="flex h-7 items-center rounded-lg bg-gray-100 px-2.5 text-xs text-gray-700 disabled:opacity-60 dark:bg-gray-850 dark:text-gray-200"
+							disabled={comparing || !!historyDiff}
+							on:click={compareToCurrent}
+							>{#if comparing}<Spinner className="mr-1.5 size-3" />{/if}{$i18n.t(
+								'Compare to current'
+							)}</button
+						>
+						{#if !disabled}
+							<button
+								type="button"
+								class="flex h-7 items-center rounded-lg bg-gray-100 px-2.5 text-xs text-gray-700 dark:bg-gray-850 dark:text-gray-200"
+								on:click={editVersion}>{$i18n.t('Edit as new version')}</button
+							><button
+								type="button"
+								class="flex h-7 items-center rounded-lg bg-gray-900 px-2.5 text-xs text-white transition hover:bg-black dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+								on:click={() => confirmDiscard(setAsProduction)}
+								>{$i18n.t('Set as Production')}</button
+							>
+						{/if}
+					</div>{/if}
 			</div>
 		{/if}
-	</div>
-{/snippet}
+
+		{#if !readOnly}
+			<div class="flex shrink-0 flex-wrap items-center gap-2 py-2">
+				{#if edit}<input
+						class="min-w-0 flex-1 bg-transparent px-2 text-xs outline-hidden"
+						placeholder={$i18n.t('Describe this change')}
+						aria-label={$i18n.t('Commit Message')}
+						bind:value={commitMessage}
+					/>{:else}<div class="flex-1"></div>{/if}
+				<div class="ml-auto flex shrink-0 items-center gap-3">
+					{#if edit}<label
+							class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-xs text-gray-500"
+							><input
+								type="checkbox"
+								bind:checked={isProduction}
+								class="size-3 rounded border-gray-300 dark:border-gray-600"
+							/><span>{$i18n.t('Set as Production')}</span></label
+						>{/if}
+					<button
+						type="submit"
+						class="flex h-7 shrink-0 items-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+						disabled={loading || !ready || historyLoading}
+					>
+						{$i18n.t(edit ? 'Save' : 'Save & Create')}{#if loading}<Spinner
+								className="size-3"
+							/>{/if}
+					</button>
+				</div>
+			</div>
+		{/if}
+	</form>
+</div>
diff --git a/src/lib/components/workspace/Skills/SkillEditor.svelte b/src/lib/components/workspace/Skills/SkillEditor.svelte
index b8da223aa5..9753744a56 100644
--- a/src/lib/components/workspace/Skills/SkillEditor.svelte
+++ b/src/lib/components/workspace/Skills/SkillEditor.svelte
@@ -6,7 +6,7 @@
 	import AccessButton from '$lib/components/common/AccessButton.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
-	import Check from '$lib/components/icons/Check.svelte';
+	import VersionMenuItem from '../common/VersionMenuItem.svelte';
 	import Download from '$lib/components/icons/Download.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
@@ -21,6 +21,7 @@
 	import { updateSkillAccessGrants } from '$lib/apis/skills';
 	import { goto, beforeNavigate } from '$app/navigation';
 	import SkillFiles from './SkillFiles.svelte';
+	import VersionDiff from '../common/VersionDiff.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import {
 		getSkillHistory,
@@ -55,16 +56,16 @@
 	let versionId: string | null = null;
 	let currentVersionId: string | null = null;
 	let history: any[] = [];
+	let currentHistoryEntry: any = null;
 	let historyPage = 1;
 	let showHistory = false;
 	let historyLoading = false;
 	let historyError = false;
-	let currentVersionName = '';
 	let commitMessage = '';
 	let conflict = false;
 	let baseline = '';
 	let historyDiff: any = null;
-	let fileDiff = '';
+	let comparing = false;
 	let discard = false;
 	let discardAction = () => {};
 	$: historical = edit && versionId !== currentVersionId;
@@ -88,6 +89,11 @@
 		historyError = false;
 		try {
 			history = await getSkillHistory(localStorage.token, id, historyPage);
+			currentHistoryEntry =
+				history.find((entry) => entry.id === currentVersionId) ||
+				(currentHistoryEntry?.id === currentVersionId
+					? currentHistoryEntry
+					: await getSkillVersion(localStorage.token, id, currentVersionId!));
 		} catch (error) {
 			historyError = true;
 			toast.error(skillError(error));
@@ -100,17 +106,23 @@
 		if (selected !== versionId) confirmDiscard(() => selectVersion(selected));
 	};
 	const compareToCurrent = async () => {
+		if (comparing || historyDiff) return;
+		const fromId = versionId!;
+		const toId = currentVersionId!;
+		comparing = true;
 		try {
-			historyDiff = await (
+			const result = await (
 				await skillRequest(
 					localStorage.token,
-					`/id/${id}/history/diff?${new URLSearchParams({ from_id: versionId!, to_id: currentVersionId! })}`
+					`/id/${id}/history/diff?${new URLSearchParams({ from_id: fromId, to_id: toId })}`
 				)
 			).json();
-			historyDiff.fromId = versionId;
-			fileDiff = '';
+			if (versionId === fromId && currentVersionId === toId)
+				historyDiff = { ...result, fromId, toId };
 		} catch (error) {
 			toast.error(skillError(error));
+		} finally {
+			comparing = false;
 		}
 	};
 	const selectVersion = async (selected: string) => {
@@ -123,7 +135,6 @@
 			reloadKey++;
 			remember();
 			historyDiff = null;
-			fileDiff = '';
 		} catch (error) {
 			toast.error(skillError(error));
 		}
@@ -132,7 +143,6 @@
 		try {
 			const latest = await getSkillById(localStorage.token, id);
 			currentVersionId = latest.version_id;
-			currentVersionName = latest.name;
 			await selectVersion(latest.version_id);
 			conflict = false;
 		} catch (error) {
@@ -148,10 +158,8 @@
 				currentVersionId!
 			);
 			currentVersionId = restored.version_id;
-			currentVersionName = restored.name;
 			versionId = restored.version_id;
 			historyDiff = null;
-			fileDiff = '';
 			remember();
 			await loadHistory();
 			toast.success($i18n.t('Saved'));
@@ -224,7 +232,6 @@
 			});
 			if (result) {
 				currentVersionId = result.version_id;
-				currentVersionName = result.name;
 				versionId = result.version_id;
 				commitMessage = '';
 				conflict = false;
@@ -249,7 +256,6 @@
 			description = skill.description || '';
 			content = skill.content || '';
 			currentVersionId = skill.version_id || null;
-			currentVersionName = skill.name;
 			versionId = currentVersionId;
 			accessGrants = skill?.access_grants === undefined ? [] : skill?.access_grants;
 		}
@@ -373,57 +379,6 @@
 			</div>
 		</div>
 
-		{#if historical}
-			<div class="flex w-full flex-wrap items-center gap-3 px-1 py-2 text-xs text-gray-500">
-				<span>{$i18n.t('Read Only')}</span>
-				<button
-					type="button"
-					class="hover:text-gray-900 dark:hover:text-gray-100"
-					on:click={compareToCurrent}>{$i18n.t('Compare to current')}</button
-				>
-				{#if !disabled}<button
-						type="button"
-						class="hover:text-gray-900 dark:hover:text-gray-100"
-						on:click={restore}>{$i18n.t('Restore as new version')}</button
-					>{/if}
-			</div>
-		{/if}
-		{#if historyDiff}
-			<div
-				class="max-h-56 shrink-0 overflow-auto rounded-lg border border-gray-100 p-2 text-xs dark:border-gray-800"
-			>
-				<button
-					type="button"
-					class="mb-2 text-gray-500"
-					on:click={() => {
-						historyDiff = null;
-						fileDiff = '';
-					}}>{$i18n.t('Close')}</button
-				>
-
-				{#each Object.entries(historyDiff.metadata) as [key, values]}<p>
-						{key}: {JSON.stringify(values)}
-					</p>{/each}
-				{#each historyDiff.files as file}<button
-						type="button"
-						class="block py-1"
-						on:click={async () => {
-							try {
-								const result = await (
-									await skillRequest(
-										localStorage.token,
-										`/id/${id}/history/diff/file?${new URLSearchParams({ from_id: historyDiff.fromId, to_id: currentVersionId!, path: file.path })}`
-									)
-								).json();
-								fileDiff = result.binary ? 'Binary file changed' : result.diff;
-							} catch (error) {
-								toast.error(skillError(error));
-							}
-						}}>{file.status}: {file.path}</button
-					>{/each}
-				<pre class="whitespace-pre-wrap">{fileDiff}</pre>
-			</div>
-		{/if}
 		{#if conflict}<div
 				role="alert"
 				class="flex flex-wrap gap-3 bg-amber-50 p-3 text-xs text-amber-900 dark:bg-amber-950 dark:text-amber-100"
@@ -439,7 +394,24 @@
 		<div
 			class="min-h-0 flex-1 overflow-hidden rounded-2xl border border-gray-100 bg-gray-50/60 dark:border-white/5 dark:bg-white/[0.03]"
 		>
-			{#if ready}<SkillFiles
+			{#if historyDiff}
+				<VersionDiff
+					diff={historyDiff}
+					onClose={() => (historyDiff = null)}
+					loadFileDiff={async (path) => {
+						try {
+							return await (
+								await skillRequest(
+									localStorage.token,
+									`/id/${id}/history/diff/file?${new URLSearchParams({ from_id: historyDiff.fromId, to_id: historyDiff.toId, path })}`
+								)
+							).json();
+						} catch (error) {
+							throw new Error(skillError(error));
+						}
+					}}
+				/>
+			{:else if ready}<SkillFiles
 					bind:this={fileEditor}
 					skillId={id}
 					{versionId}
@@ -477,21 +449,17 @@
 										<ChevronDown className="size-3 shrink-0" />
 									</button>
 									<div slot="content">
-										<DropdownMenu className="w-56 max-w-[calc(100vw-2rem)]">
-											<button
-												type="button"
-												role="menuitemradio"
-												aria-checked={versionId === currentVersionId}
-												on:click={() => chooseVersion(currentVersionId!)}
-												title={currentVersionId || ''}
-											>
-												<span class="min-w-0 flex-1 truncate text-left"
-													>{currentVersionName} · {$i18n.t('Current')}</span
-												>
-												{#if versionId === currentVersionId}<Check
-														className="size-3.5 text-blue-500"
-													/>{/if}
-											</button>
+										<DropdownMenu
+											className="w-56 max-w-[calc(100vw-2rem)] max-h-80 overflow-y-auto"
+										>
+											<VersionMenuItem
+												entry={currentHistoryEntry?.id === currentVersionId
+													? currentHistoryEntry
+													: null}
+												status={$i18n.t('Current')}
+												selected={versionId === currentVersionId}
+												onSelect={() => chooseVersion(currentVersionId!)}
+											/>
 											{#if historyLoading || historyError || history.some((entry) => entry.id !== currentVersionId)}
 												<hr class="border-gray-100 dark:border-gray-800" />
 											{/if}
@@ -503,20 +471,11 @@
 												<button type="button" on:click={loadHistory}>{$i18n.t('Retry')}</button>
 											{:else}
 												{#each history.filter((entry) => entry.id !== currentVersionId) as entry}
-													<button
-														type="button"
-														role="menuitemradio"
-														aria-checked={entry.id === versionId}
-														title={`${entry.id} · ${new Date(entry.created_at * 1000).toLocaleString()} · ${entry.user?.name || entry.user_id}`}
-														on:click={() => chooseVersion(entry.id)}
-													>
-														<span class="min-w-0 flex-1 truncate text-left"
-															>{entry.commit_message || entry.id.slice(0, 7)}</span
-														>
-														{#if entry.id === versionId}<Check
-																className="size-3.5 text-blue-500"
-															/>{/if}
-													</button>
+													<VersionMenuItem
+														{entry}
+														selected={entry.id === versionId}
+														onSelect={() => chooseVersion(entry.id)}
+													/>
 												{:else}
 													{#if historyPage > 1}
 														<div class="px-2 py-2 text-xs text-gray-500">
@@ -565,6 +524,30 @@
 				</SkillFiles>{/if}
 		</div>
 
+		{#if historical}
+			<div
+				class="flex w-full shrink-0 flex-wrap items-center gap-2 px-1 py-2 text-xs text-gray-500"
+			>
+				<span class="mr-auto">{$i18n.t('Read Only')}</span>
+				<div class="ml-auto flex flex-wrap justify-end gap-2">
+					<button
+						type="button"
+						class="flex h-7 items-center rounded-lg bg-gray-100 px-2.5 text-xs text-gray-700 disabled:opacity-60 dark:bg-gray-850 dark:text-gray-200"
+						disabled={comparing || !!historyDiff}
+						on:click={compareToCurrent}
+						>{#if comparing}<Spinner className="mr-1.5 size-3" />{/if}{$i18n.t(
+							'Compare to current'
+						)}</button
+					>
+					{#if !disabled}<button
+							type="button"
+							class="flex h-7 items-center rounded-lg bg-gray-900 px-2.5 text-xs text-white transition hover:bg-black dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+							on:click={restore}>{$i18n.t('Restore as new version')}</button
+						>{/if}
+				</div>
+			</div>
+		{/if}
+
 		{#if !readOnly}
 			<div class="flex shrink-0 justify-end gap-3 py-2">
 				<input
diff --git a/src/lib/components/workspace/Skills/SkillFiles.svelte b/src/lib/components/workspace/Skills/SkillFiles.svelte
index 011b81f8d8..794458cc21 100644
--- a/src/lib/components/workspace/Skills/SkillFiles.svelte
+++ b/src/lib/components/workspace/Skills/SkillFiles.svelte
@@ -17,6 +17,8 @@
 	import Folder from '$lib/components/icons/Folder.svelte';
 	import ArrowUpTray from '$lib/components/icons/ArrowUpTray.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import FileCodeEditor from '$lib/components/chat/FileNav/FileCodeEditor.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import {
@@ -651,6 +653,15 @@
 	<div class="h-full min-h-0 w-full overflow-auto p-1.5">
 		<div class="mb-1 flex w-full items-center gap-1">
 			<div class="min-w-0 flex-1">{@render version()}</div>
+			{#if readOnly}
+				<Tooltip content={$i18n.t('Read Only')}>
+					<span
+						class="flex items-center px-0.5 text-gray-400"
+						role="img"
+						aria-label={$i18n.t('Read Only')}><LockClosed className="size-3" /></span
+					>
+				</Tooltip>
+			{/if}
 			{#if !readOnly || canExport}
 				<Dropdown closeOnSelect align="end">
 					<button
diff --git a/src/lib/components/workspace/common/VersionDiff.svelte b/src/lib/components/workspace/common/VersionDiff.svelte
new file mode 100644
index 0000000000..26bbb99dd5
--- /dev/null
+++ b/src/lib/components/workspace/common/VersionDiff.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import DiffBlock from '$lib/components/chat/Messages/DiffBlock.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+
+	export let currentLabel = 'Current';
+	export let loadFileDiff: (path: string) => Promise<{ binary?: boolean; diff?: string }>;
+	export let diff: {
+		fromId: string;
+		toId: string;
+		metadata: Record<string, { before: unknown; after: unknown }>;
+		files: { path: string; status: 'added' | 'deleted' | 'modified'; binary: boolean }[];
+	};
+	export let onClose: () => void;
+	const i18n = getContext<any>('i18n');
+	let selectedPath: string | null = null;
+	let results: Record<
+		string,
+		{ loading?: boolean; error?: string; binary?: boolean; diff?: string }
+	> = {};
+
+	const isObject = (value: unknown): value is Record<string, unknown> =>
+		!!value && typeof value === 'object' && !Array.isArray(value);
+	const displayValue = (value: unknown): string => {
+		if (value == null) return '';
+		if (Array.isArray(value)) return value.map(displayValue).join(', ');
+		if (isObject(value))
+			return Object.entries(value)
+				.map(([key, item]) => `${key}: ${displayValue(item)}`)
+				.join(', ');
+		return String(value);
+	};
+	function changes(
+		path: string[],
+		before: unknown,
+		after: unknown
+	): { path: string[]; before: string; after: string }[] {
+		if (
+			(isObject(before) || isObject(after)) &&
+			(before == null || isObject(before)) &&
+			(after == null || isObject(after))
+		) {
+			const a = isObject(before) ? before : {};
+			const b = isObject(after) ? after : {};
+			return [...new Set([...Object.keys(a), ...Object.keys(b)])].flatMap((key) =>
+				changes([...path, key], a[key], b[key])
+			);
+		}
+		const a = displayValue(before);
+		const b = displayValue(after);
+		return a === b ? [] : [{ path, before: a, after: b }];
+	}
+	$: metadata = Object.entries(diff.metadata).flatMap(([key, value]) =>
+		changes(key === 'meta' ? [] : [key], value.before, value.after)
+	);
+	const labels: Record<string, string> = {
+		name: 'Name',
+		description: 'Description',
+		tags: 'Tags',
+		i18n: 'Translations'
+	};
+	const statuses = { added: 'Added', deleted: 'Deleted', modified: 'Modified' };
+
+	async function loadFile(path: string) {
+		if (results[path]?.loading || results[path]?.diff !== undefined || results[path]?.binary)
+			return;
+		results = { ...results, [path]: { loading: true } };
+		try {
+			results = { ...results, [path]: await loadFileDiff(path) };
+		} catch (error) {
+			results = {
+				...results,
+				[path]: { error: error instanceof Error ? error.message : String(error) }
+			};
+		}
+	}
+	function selectFile(path: string) {
+		selectedPath = selectedPath === path ? null : path;
+		if (selectedPath) loadFile(path);
+	}
+	onMount(() => {
+		if (diff.files.length) selectFile(diff.files[0].path);
+	});
+</script>
+
+<section
+	class="flex h-full min-h-0 flex-col bg-white text-xs dark:bg-gray-900"
+	aria-label={$i18n.t('Compare to current')}
+>
+	<div class="flex shrink-0 items-center gap-2 bg-gray-50/60 px-3 py-1.5 dark:bg-black">
+		<span class="min-w-0 flex-1 font-medium">{$i18n.t('Compare to current')}</span>
+		<button
+			type="button"
+			class="p-1 text-gray-500 hover:text-gray-900 dark:hover:text-gray-100"
+			aria-label={$i18n.t('Close')}
+			on:click={onClose}><XMark className="size-3.5" /></button
+		>
+	</div>
+	<div class="grid shrink-0 grid-cols-2 border-b border-gray-100 dark:border-white/5">
+		<div class="min-w-0 px-3 py-2 text-gray-500">
+			<span class="text-red-600 dark:text-red-400">−</span>
+			{$i18n.t('Selected version')} <span class="font-mono">{diff.fromId.slice(0, 7)}</span>
+		</div>
+		<div class="min-w-0 px-3 py-2 text-gray-500">
+			<span class="text-green-600 dark:text-green-400">+</span>
+			{$i18n.t(currentLabel)} <span class="font-mono">{diff.toId.slice(0, 7)}</span>
+		</div>
+	</div>
+	<div class="min-h-0 flex-1 overflow-auto">
+		{#each metadata as change}
+			<div class="border-b border-gray-100 dark:border-white/5">
+				<div class="px-3 py-1.5 font-medium text-gray-600 dark:text-gray-300">
+					{change.path.map((key) => $i18n.t(labels[key] || key)).join(' / ')}
+				</div>
+				<div class="grid grid-cols-2">
+					<div
+						class="min-w-0 whitespace-pre-wrap break-words bg-red-50 px-3 py-2 text-red-800 dark:bg-red-950/30 dark:text-red-200"
+					>
+						{change.before || '—'}
+					</div>
+					<div
+						class="min-w-0 whitespace-pre-wrap break-words bg-green-50 px-3 py-2 text-green-800 dark:bg-green-950/30 dark:text-green-200"
+					>
+						{change.after || '—'}
+					</div>
+				</div>
+			</div>
+		{/each}
+		{#each diff.files as file, index}
+			<div class="border-b border-gray-100 dark:border-white/5">
+				<button
+					type="button"
+					class="flex w-full items-center gap-2 px-3 py-2 text-left"
+					aria-expanded={selectedPath === file.path}
+					aria-controls={`version-diff-file-${index}`}
+					on:click={() => selectFile(file.path)}
+				>
+					<span class:rotate-[-90deg]={selectedPath !== file.path}
+						><ChevronDown className="size-3 shrink-0 text-gray-400" /></span
+					>
+					<span class="min-w-0 flex-1 truncate font-mono" title={file.path}>{file.path}</span>
+					<span
+						class="shrink-0 rounded px-1.5 py-0.5 text-[0.625rem] {file.status === 'added'
+							? 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-400'
+							: file.status === 'deleted'
+								? 'bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-400'
+								: 'bg-gray-100 text-gray-500 dark:bg-gray-850 dark:text-gray-400'}"
+						>{$i18n.t(statuses[file.status])}</span
+					>
+				</button>
+				{#if selectedPath === file.path}
+					<div id={`version-diff-file-${index}`} class="min-w-0 [&_.diff-block]:text-xs">
+						{#if results[file.path]?.loading}
+							<div class="flex items-center gap-2 px-3 py-3 text-gray-500" role="status">
+								<Spinner className="size-3" />{$i18n.t('Loading...')}
+							</div>
+						{:else if results[file.path]?.error}
+							<div class="px-3 py-3 text-gray-500" role="alert">
+								{results[file.path].error}<button
+									type="button"
+									class="ml-2 underline"
+									on:click={() => loadFile(file.path)}>{$i18n.t('Retry')}</button
+								>
+							</div>
+						{:else if results[file.path]?.binary}
+							<p class="px-3 py-3 text-gray-500">
+								{$i18n.t('Binary file — text comparison is unavailable.')}
+							</p>
+						{:else if results[file.path]?.diff}
+							<DiffBlock code={results[file.path].diff} />
+						{:else}
+							<p class="px-3 py-3 text-gray-500">{$i18n.t('No text differences')}</p>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/each}
+		{#if !metadata.length && !diff.files.length}
+			<p class="px-3 py-4 text-gray-500">{$i18n.t('No differences')}</p>
+		{/if}
+	</div>
+</section>
diff --git a/src/lib/components/workspace/common/VersionMenuItem.svelte b/src/lib/components/workspace/common/VersionMenuItem.svelte
new file mode 100644
index 0000000000..733e53c199
--- /dev/null
+++ b/src/lib/components/workspace/common/VersionMenuItem.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { user } from '$lib/stores';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import ProfileImage from '$lib/components/chat/Messages/ProfileImage.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
+
+	export let entry: {
+		id: string;
+		commit_message?: string | null;
+		created_at?: number;
+		user_id?: string;
+		user?: { id?: string; name?: string } | null;
+	} | null = null;
+	export let status = '';
+	export let selected = false;
+	export let onSelect: () => void;
+	const i18n = getContext<any>('i18n');
+	$: authorId = entry?.user?.id || entry?.user_id;
+	$: message = entry?.commit_message || entry?.id.slice(0, 7) || status;
+	$: author =
+		entry?.user?.name ||
+		($user?.id === authorId ? $user.name : authorId ? $i18n.t('Unknown user') : '');
+	$: date = entry?.created_at ? new Date(entry.created_at * 1000) : null;
+</script>
+
+<button
+	type="button"
+	role="menuitemradio"
+	aria-label={status || message}
+	aria-checked={selected}
+	class="text-left"
+	title={entry
+		? `${entry.id}${date ? ` · ${date.toLocaleString($i18n.language)}` : ''}`
+		: undefined}
+	on:click={onSelect}
+>
+	<Tooltip as="span" className="flex shrink-0" content={author} allowHTML={false}>
+		<ProfileImage
+			src={authorId ? `/api/v1/users/${authorId}/profile/image` : '/user.png'}
+			className="size-4 shrink-0 rounded-full!"
+		/>
+	</Tooltip>
+	<Tooltip as="span" className="block min-w-0 flex-1" content={message} allowHTML={false}>
+		<span class="block truncate text-xs">{message}</span>
+	</Tooltip>
+	{#if status && entry}<span class="shrink-0 text-[0.625rem] text-gray-400">{status}</span>{/if}
+	{#if selected}<Check className="size-3.5 shrink-0 text-blue-500" />{/if}
+</button>
diff --git a/src/routes/(app)/workspace/prompts/[id]/+page.svelte b/src/routes/(app)/workspace/prompts/[id]/+page.svelte
index d16d235d42..6a10adca10 100644
--- a/src/routes/(app)/workspace/prompts/[id]/+page.svelte
+++ b/src/routes/(app)/workspace/prompts/[id]/+page.svelte
@@ -17,12 +17,7 @@
 	$: promptId = $page.params.id;
 
 	const onSubmit = async (_prompt) => {
-		console.log(_prompt);
-		const updatedPrompt = await updatePromptById(localStorage.token, _prompt).catch((error) => {
-			toast.error(`${error}`);
-			return null;
-		});
-
+		const updatedPrompt = await updatePromptById(localStorage.token, _prompt);
 		if (updatedPrompt) {
 			toast.success($i18n.t('Prompt updated successfully'));
 			// Update local prompt state to reflect the new version
@@ -37,6 +32,7 @@
 					updatedPrompt?.access_grants === undefined ? [] : updatedPrompt?.access_grants
 			};
 		}
+		return updatedPrompt;
 	};
 
 	onMount(async () => {