update ui design for all pages

src/components/skills/AddSkillDialog.jsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { Sparkles, Upload } from 'lucide-react';
+import { Button, Field, Input, Modal, Textarea, toast } from '@/components/ds';
+import { usePreferences, useUpdatePreferences } from '@/lib/krowHooks';
+import { PAGE_KEYS, parseSkill, validateSkillSource } from '@/lib/skills/registry';
+
+/**
+ * Add an Owliver skill.
+ *
+ * One dialog, opened from Settings and from Owliver's own header, writing to
+ * one registry — a second registration path would be a second source of truth
+ * by another name.
+ *
+ * What is stored is the Markdown itself, not a parsed record. A custom skill is
+ * then exactly the artefact a file on disk is, read by the same parser, and can
+ * be copied into `src/skills/` later without conversion.
+ *
+ * The fields above the editor are a starting point, not a second schema: typing
+ * in them composes frontmatter in the existing format, which the author can
+ * then edit directly. The Markdown is always what gets saved.
+ */
+
+const TEMPLATE = ({ id, name, description, pages }) => `---
+id: ${id || 'my-skill'}
+name: ${name || 'My Skill'}
+description: ${description || 'What this skill helps Owliver do.'}
+pages:
+${(pages || ['positions']).map((p) => `  - ${p}`).join('\n')}
+status: active
+triggers:
+  - ${(name || 'my skill').toLowerCase()}
+---
+
+# ${name || 'My Skill'}
+
+## Purpose
+
+Describe what Owliver should help with on these pages.
+
+## Capabilities
+
+- Describe one thing the skill can do.
+- Add more as needed.
+`;
+
+export function AddSkillDialog({ open, onOpenChange }) {
+  const preferences = usePreferences();
+  const updatePreferences = useUpdatePreferences();
+
+  const [meta, setMeta] = React.useState({ id: '', name: '', description: '', pages: '' });
+  const [source, setSource] = React.useState('');
+  const [touched, setTouched] = React.useState(false);
+  const [error, setError] = React.useState('');
+  const fileRef = React.useRef(null);
+
+  /* A fresh sheet each time it opens, so an abandoned draft is not waiting the
+     next time someone adds a skill. */
+  React.useEffect(() => {
+    if (!open) return;
+    setMeta({ id: '', name: '', description: '', pages: '' });
+    setSource('');
+    setTouched(false);
+    setError('');
+  }, [open]);
+
+  /* The fields drive the Markdown until the author edits the Markdown, after
+     which the Markdown wins — it is the thing being saved. */
+  const syncFromMeta = (next) => {
+    setMeta(next);
+    if (touched) return;
+    setSource(TEMPLATE({
+      id: next.id,
+      name: next.name,
+      description: next.description,
+      pages: next.pages.split(',').map((p) => p.trim()).filter(Boolean),
+    }));
+  };
+
+  const readFile = (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      setSource(String(reader.result));
+      setTouched(true);
+      setError('');
+    };
+    reader.readAsText(file);
+    event.target.value = '';
+  };
+
+  const save = () => {
+    const problem = validateSkillSource(source);
+    if (problem) {
+      setError(problem);
+      return;
+    }
+
+    const skill = parseSkill(source, { custom: true });
+    const existing = preferences.customSkills || [];
+    const next = [
+      ...existing.filter((entry) => parseSkill(entry.raw, { custom: true }).id !== skill.id),
+      { path: `custom/${skill.id}.md`, raw: source },
+    ];
+
+    updatePreferences.mutate({ customSkills: next });
+    toast.success(`${skill.name} added`);
+    onOpenChange(false);
+  };
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Add Owliver skill"
+      description="Define a skill in Markdown. It attaches itself to the pages it names."
+      icon={Sparkles}
+      size="lg"
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+          <Button onClick={save} loading={updatePreferences.isPending}>Add skill</Button>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <Field label="Skill name">
+            <Input
+              value={meta.name}
+              placeholder="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"
+              onChange={(e) => syncFromMeta({ ...meta, id: e.target.value })}
+            />
+          </Field>
+        </div>
+
+        <Field label="Description">
+          <Input
+            value={meta.description}
+            placeholder="Helps Owliver explain chef training paths."
+            onChange={(e) => syncFromMeta({ ...meta, description: e.target.value })}
+          />
+        </Field>
+
+        <Field label="Pages" hint={`Comma separated. Known pages: ${PAGE_KEYS.join(', ')}`}>
+          <Input
+            value={meta.pages}
+            placeholder="university"
+            onChange={(e) => syncFromMeta({ ...meta, pages: e.target.value })}
+          />
+        </Field>
+
+        <Field
+          label="Markdown definition"
+          hint="This is what gets saved. Edit it directly if you prefer."
+          error={error}
+        >
+          <Textarea
+            value={source}
+            rows={12}
+            spellCheck={false}
+            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);
+              setTouched(true);
+              if (error) setError('');
+            }}
+          />
+        </Field>
+
+        <div className="flex items-center gap-2">
+          <input ref={fileRef} type="file" accept=".md,text/markdown" onChange={readFile} className="hidden" />
+          <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>
+        </div>
+      </div>
+    </Modal>
+  );
+}