update Markdown skills

src/components/skills/AddSkillDialog.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import { Sparkles, Upload } from 'lucide-react';
-import { Button, Field, Input, Modal, Textarea, toast } from '@/components/ds';
+import { Button, Field, Input, Modal, Textarea } from '@/components/ds';
 import { usePreferences, useUpdatePreferences } from '@/lib/krowHooks';
 import { PAGE_KEYS, validateSkillSource } from '@/lib/skills/registry';
 import { skillTemplate, upsertCustomSkill } from '@/lib/skills/customSkills';
+import {
+  isReadableDefinition, normalizeUpload, owliverFieldsFromSource, patchFrontmatter,
+} from '@/lib/skills/skillFields';
+import { reportSave } from '@/lib/skills/saveFeedback';
 
 /**
  * Add an Owliver skill.
@@ -41,27 +45,71 @@ export function AddSkillDialog({ open, onOpenChange }) {
     setError('');
   }, [open]);
 
-  /* The fields drive the Markdown until the author edits the Markdown, after
-     which the Markdown wins — it is the thing being saved. */
+  /**
+   * A field edit, written into the definition.
+   *
+   * A fresh draft is composed from the template; once there is a definition to
+   * preserve — an uploaded file, or Markdown typed by hand — the field patches
+   * the key it owns and leaves everything else alone. It used to stop here
+   * entirely, so after an upload these four boxes edited nothing that was saved.
+   */
   const syncFromMeta = (next) => {
     setMeta(next);
-    if (touched) return;
-    setSource(skillTemplate({
-      id: next.id,
-      name: next.name,
-      description: next.description,
-      pages: next.pages.split(',').map((p) => p.trim()).filter(Boolean),
+    const pages = next.pages.split(',').map((p) => p.trim()).filter(Boolean);
+
+    if (!touched) {
+      setSource(skillTemplate({
+        id: next.id,
+        name: next.name,
+        description: next.description,
+        pages,
+      }));
+      return;
+    }
+
+    setSource(patchFrontmatter(source, {
+      id: next.id || undefined,
+      name: next.name || undefined,
+      description: next.description || undefined,
+      pages: pages.length ? pages : undefined,
     }));
   };
 
+  /**
+   * A definition uploaded from a file.
+   *
+   * Filled the Markdown box and left every field beside it empty, and said
+   * nothing about whether the file was usable until Add was pressed. Both are
+   * fixed here: the frontmatter fills the fields, and an unusable file says so
+   * at the moment it arrives.
+   */
   const readFile = (event) => {
     const file = event.target.files?.[0];
     if (!file) return;
+
     const reader = new FileReader();
+    reader.onerror = () => setError('That file could not be read.');
     reader.onload = () => {
-      setSource(String(reader.result));
+      const raw = normalizeUpload(reader.result);
+      setSource(raw);
       setTouched(true);
-      setError('');
+
+      /* Nothing readable: the fields stay as they were rather than emptying to
+         a row of placeholders that read as values. */
+      if (!isReadableDefinition(raw)) {
+        setError('That file has no frontmatter block, so there is nothing to read into the fields. '
+          + 'A definition starts with `---` on its own line.');
+        return;
+      }
+
+      setError(validateSkillSource(raw) || '');
+      const fields = owliverFieldsFromSource(raw);
+      setMeta({
+        id: fields.id,
+        name: fields.name,
+        description: fields.description,
+        pages: fields.pages.join(', '),
+      });
     };
     reader.readAsText(file);
     event.target.value = '';
@@ -76,8 +124,7 @@ export function AddSkillDialog({ open, onOpenChange }) {
 
     const { skill, next } = upsertCustomSkill(preferences.customSkills || [], source);
 
-    updatePreferences.mutate({ customSkills: next });
-    toast.success(`${skill.name} added`);
+    updatePreferences.mutate({ customSkills: next }, reportSave(`${skill.name} added`));
     onOpenChange(false);
   };
 
@@ -101,14 +148,14 @@ export function AddSkillDialog({ open, onOpenChange }) {
           <Field label="Skill name">
             <Input
               value={meta.name}
-              placeholder="Chef Training"
+              placeholder="e.g. Chef Training"
               onChange={(e) => syncFromMeta({ ...meta, name: e.target.value })}
             />
           </Field>
           <Field label="Skill ID" hint="Lower-case, dashes.">
             <Input
               value={meta.id}
-              placeholder="chef-training"
+              placeholder="e.g. chef-training"
               onChange={(e) => syncFromMeta({ ...meta, id: e.target.value })}
             />
           </Field>
@@ -117,7 +164,7 @@ export function AddSkillDialog({ open, onOpenChange }) {
         <Field label="Description">
           <Input
             value={meta.description}
-            placeholder="Helps Owliver explain chef training paths."
+            placeholder="e.g. Helps Owliver explain chef training paths."
             onChange={(e) => syncFromMeta({ ...meta, description: e.target.value })}
           />
         </Field>
@@ -142,8 +189,26 @@ export function AddSkillDialog({ open, onOpenChange }) {
             className="font-mono text-[12px] leading-relaxed"
             placeholder="---&#10;id: my-skill&#10;name: My Skill&#10;pages:&#10;  - positions&#10;---"
             onChange={(e) => {
-              setSource(e.target.value);
+              const next = e.target.value;
+              setSource(next);
               setTouched(true);
+
+              /* Markdown → fields, the direction that was missing. Same
+                 extractor the upload path uses; guarded so a half-typed
+                 definition cannot wipe fields that are already filled in.
+                 See the fuller note in the two skill editors. */
+              if (isReadableDefinition(next)) {
+                const fields = owliverFieldsFromSource(next);
+                if (fields.name) {
+                  setMeta({
+                    id: fields.id,
+                    name: fields.name,
+                    description: fields.description,
+                    pages: fields.pages.join(', '),
+                  });
+                }
+              }
+
               if (error) setError('');
             }}
           />
@@ -154,7 +219,9 @@ export function AddSkillDialog({ open, onOpenChange }) {
           <Button variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
             <Upload aria-hidden="true" /> Upload .md
           </Button>
-          <p className="text-caption text-ink-4">Markdown is stored as data. It is never executed.</p>
+          <p className="text-caption text-ink-4">
+            Stored as data in this browser, for this workspace. It is never executed.
+          </p>
         </div>
       </div>
     </Modal>