refac

src/lib/components/admin/Functions/FunctionEditor.svelte

@@ -4,7 +4,7 @@
 
 	const i18n = getContext('i18n');
 
-	import { nameToId } from '$lib/utils';
+	import { extractFrontmatter, formatSkillName, nameToId } from '$lib/utils';
 	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
@@ -375,6 +375,16 @@ class Pipe:
 						{boilerplate}
 						onChange={(e) => {
 							_content = e;
+							if (!edit) {
+								const fm = extractFrontmatter(e);
+								if (fm.title && !name) {
+									name = formatSkillName(fm.title);
+									id = nameToId(fm.title);
+								}
+								if (fm.description && !meta.description) {
+									meta = { ...meta, description: fm.description };
+								}
+							}
 						}}
 						onSave={async () => {
 							if (formElement) {

src/lib/components/workspace/Skills/SkillEditor.svelte

@@ -30,47 +30,21 @@
 
 	let accessGrants = [];
 	let showAccessControlModal = false;
-	let hasManualEdit = false;
+	$: if (!edit && !clone && name) {
-	let hasManualName = false;
+		id = slugify(name);
-	let hasManualDescription = false;
+	}
-	let isFrontmatterDetected = false;
 
-	// Auto-detect frontmatter and fill name/description in create mode
+	const handleContentInput = () => {
-	$: if (!edit && content) {
+		if (edit) return;
 		const fm = parseFrontmatter(content);
-		if (fm.name) {
+		if (fm.name && !name) {
-			isFrontmatterDetected = true;
+			name = formatSkillName(fm.name);
-			if (!hasManualName) {
+			id = fm.name;
-				name = formatSkillName(fm.name);
-			}
-			if (!hasManualEdit) {
-				id = fm.name;
-			}
-		} else {
-			isFrontmatterDetected = false;
 		}
-		if (fm.description && !hasManualDescription) {
+		if (fm.description && !description) {
 			description = fm.description;
 		}
-	} else if (!edit && !content) {
+	};
-		isFrontmatterDetected = false;
-	}
-
-	$: if (!edit && !hasManualEdit && !isFrontmatterDetected) {
-		id = name !== '' ? slugify(name) : '';
-	}
-
-	function handleIdInput(e: Event) {
-		hasManualEdit = true;
-	}
-
-	function handleNameInput(e: Event) {
-		hasManualName = true;
-	}
-
-	function handleDescriptionInput(e: Event) {
-		hasManualDescription = true;
-	}
 
 	const submitHandler = async () => {
 		if (disabled) {
@@ -100,10 +74,6 @@
 			description = skill.description || '';
 			content = skill.content || '';
 			accessGrants = skill?.access_grants === undefined ? [] : skill?.access_grants;
-
-			if (name) hasManualName = true;
-			if (description) hasManualDescription = true;
-			if (id) hasManualEdit = true;
 		}
 	});
 </script>
@@ -156,7 +126,6 @@
 									placeholder={$i18n.t('Skill Name')}
 									aria-label={$i18n.t('Skill Name')}
 									bind:value={name}
-									on:input={handleNameInput}
 									required
 									{disabled}
 								/>
@@ -202,7 +171,6 @@
 									placeholder={$i18n.t('Skill ID')}
 									aria-label={$i18n.t('Skill ID')}
 									bind:value={id}
-									on:input={handleIdInput}
 									required
 									disabled={edit}
 								/>
@@ -220,7 +188,6 @@
 								placeholder={$i18n.t('Skill Description')}
 								aria-label={$i18n.t('Skill Description')}
 								bind:value={description}
-								on:input={handleDescriptionInput}
 								{disabled}
 							/>
 						</Tooltip>
@@ -240,6 +207,7 @@
 								<textarea
 									class="w-full flex-1 text-xs bg-transparent outline-hidden resize-none font-mono px-4 py-3"
 									bind:value={content}
+									on:input={handleContentInput}
 									placeholder={$i18n.t('Enter skill instructions in markdown...')}
 									aria-label={$i18n.t('Skill Instructions')}
 									required

src/lib/components/workspace/Tools/ToolkitEditor.svelte

@@ -8,7 +8,7 @@
 	import { user } from '$lib/stores';
 	import { updateToolAccessGrants } from '$lib/apis/tools';
 
-	import { nameToId } from '$lib/utils';
+	import { extractFrontmatter, formatSkillName, nameToId } from '$lib/utils';
 	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
@@ -312,6 +312,16 @@ class Tools:
 						{boilerplate}
 						onChange={(e) => {
 							_content = e;
+							if (!edit) {
+								const fm = extractFrontmatter(e);
+								if (fm.title && !name) {
+									name = formatSkillName(fm.title);
+									id = nameToId(fm.title);
+								}
+								if (fm.description && !meta.description) {
+									meta = { ...meta, description: fm.description };
+								}
+							}
 						}}
 						onSave={async () => {
 							if (formElement) {