sparkecoder 0.1.120 → 0.1.122

package/web/.next/standalone/web/src/app/(main)/settings/page.tsx

@@ -6,6 +6,7 @@ import {
   Copy, RotateCw, Trash2, Plus, Check, Eye, EyeOff, Bot, Cpu, Key,
   BookOpen, X as XIcon, ShieldCheck, Plug, List as ListIcon,
   ChevronLeft, ChevronRight, RefreshCw, Search,
+  Sparkles, FolderPlus, FileText, FolderOpen, Save, Pencil, Upload,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -62,12 +63,13 @@ async function jsonFetch<T>(path: string, init?: RequestInit): Promise<T> {
   return res.json();
 }
 
-type TabId = 'general' | 'integrations' | 'mcp' | 'schedules' | 'webhooks' | 'audit' | 'models' | 'apikeys';
+type TabId = 'general' | 'integrations' | 'mcp' | 'schedules' | 'webhooks' | 'audit' | 'models' | 'apikeys' | 'skills';
 
 const TABS: Array<{ id: TabId; label: string; icon: React.ComponentType<{ className?: string }> }> = [
   { id: 'general', label: 'General', icon: Bot },
   { id: 'integrations', label: 'Integrations', icon: Slack },
   { id: 'mcp', label: 'MCP', icon: Plug },
+  { id: 'skills', label: 'Skills', icon: Sparkles },
   { id: 'schedules', label: 'Schedules', icon: CalendarIcon },
   { id: 'webhooks', label: 'Webhooks', icon: WebhookIcon },
   { id: 'audit', label: 'Audit log', icon: ListIcon },
@@ -149,6 +151,7 @@ export default function SettingsPage() {
           {tab === 'audit' && <AuditSection />}
           {tab === 'models' && <ModelsSection />}
           {tab === 'apikeys' && <ApiKeysSection />}
+          {tab === 'skills' && <SkillsSection />}
         </div>
       </div>
     </div>
@@ -1421,6 +1424,466 @@ function formatEventTime(iso: string): string {
   return `${date} ${time}`;
 }
 
+// ────────────────────────────────────────────────────────────────────
+// Skills — markdown skill files from default + global directories
+// ────────────────────────────────────────────────────────────────────
+
+interface SkillRow {
+  id: string;
+  name: string;
+  description: string;
+  filePath: string;
+  fileName: string;
+  sourceDir: string;
+  sourceLabel: string;
+  sourceType: 'builtin' | 'project' | 'additional';
+  alwaysApply: boolean;
+  globs: string[];
+  sizeBytes: number;
+}
+interface SkillDirectory {
+  path: string;
+  label: string;
+  source: 'builtin' | 'project' | 'additional';
+  alwaysApply: boolean;
+  exists: boolean;
+  writable: boolean;
+}
+interface SkillsResponse {
+  directories: SkillDirectory[];
+  skills: SkillRow[];
+}
+
+function SkillsSection() {
+  const [data, setData] = useState<SkillsResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('');
+  const [editing, setEditing] = useState<SkillRow | null>(null);
+  const [creatingInDir, setCreatingInDir] = useState<string | null>(null);
+  const [addDirOpen, setAddDirOpen] = useState(false);
+  const [dragTargetDir, setDragTargetDir] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try { setData(await jsonFetch<SkillsResponse>('/api/skills')); }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  if (loading || !data) {
+    return <div className="flex items-center justify-center py-12"><Loader2 className="size-5 animate-spin text-muted-foreground" /></div>;
+  }
+
+  const grouped = data.directories.map((dir) => ({
+    dir,
+    items: data.skills.filter((s) => s.sourceDir === dir.path)
+      .filter((s) => !filter || s.name.toLowerCase().includes(filter.toLowerCase()) || s.description.toLowerCase().includes(filter.toLowerCase())),
+  }));
+
+  const handleDropFiles = async (files: FileList | null, targetDir: string) => {
+    if (!files || files.length === 0) return;
+    for (const file of Array.from(files)) {
+      if (!/\.(md|mdc|markdown|txt)$/i.test(file.name)) continue;
+      const text = await file.text();
+      try {
+        await jsonFetch('/api/skills', {
+          method: 'POST',
+          body: JSON.stringify({ directory: targetDir, fileName: file.name, content: text }),
+        });
+      } catch (err) {
+        console.error('skill upload failed', err);
+      }
+    }
+    refresh();
+  };
+
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-3">
+        <SectionHeader
+          title="Skills"
+          description="Markdown skill files the orchestrator loads on demand. Pulled from built-in defaults plus any directories below — drop .md files in or create new ones from here."
+        />
+        <div className="flex gap-2">
+          <Button size="sm" variant="outline" onClick={() => setAddDirOpen(true)}>
+            <FolderPlus className="size-3.5 mr-1" />Add folder
+          </Button>
+          <Button size="sm" variant="ghost" onClick={refresh}>
+            <RefreshCw className="size-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="mb-3">
+        <div className="relative max-w-sm">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+          <Input
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Search skills…"
+            className="pl-7 h-8 text-xs"
+          />
+        </div>
+      </div>
+
+      {addDirOpen && (
+        <AddSkillDirectoryForm
+          onCancel={() => setAddDirOpen(false)}
+          onSaved={() => { setAddDirOpen(false); refresh(); }}
+        />
+      )}
+
+      <div className="space-y-3">
+        {grouped.map(({ dir, items }) => (
+          <div
+            key={dir.path}
+            onDragOver={(e) => {
+              if (!dir.writable) return;
+              e.preventDefault();
+              setDragTargetDir(dir.path);
+            }}
+            onDragLeave={() => setDragTargetDir((d) => (d === dir.path ? null : d))}
+            onDrop={(e) => {
+              e.preventDefault();
+              setDragTargetDir(null);
+              if (!dir.writable) return;
+              void handleDropFiles(e.dataTransfer.files, dir.path);
+            }}
+            className={cn(
+              'rounded-lg border bg-card/40 p-3 transition-colors',
+              dragTargetDir === dir.path ? 'border-primary bg-primary/5' : 'border-border/60',
+            )}
+          >
+            <div className="flex items-center gap-2 mb-2">
+              <FolderOpen className={cn('size-4', dir.alwaysApply ? 'text-amber-500' : 'text-muted-foreground')} />
+              <span className="text-sm font-medium">{dir.label}</span>
+              <span className="text-[10px] uppercase tracking-wide text-muted-foreground">{dir.source}</span>
+              {dir.alwaysApply && <span className="text-[10px] uppercase tracking-wide text-amber-500">always-on</span>}
+              {!dir.exists && <span className="text-[10px] text-rose-500">missing</span>}
+              <code className="ml-auto text-[10px] text-muted-foreground/70 font-mono truncate max-w-[280px]">{dir.path}</code>
+              {dir.writable && (
+                <Button size="sm" variant="ghost" className="h-6 px-2"
+                  onClick={() => setCreatingInDir(dir.path)}>
+                  <Plus className="size-3 mr-1" />New
+                </Button>
+              )}
+              {dir.source === 'additional' && (
+                <Button size="sm" variant="ghost" className="h-6 px-1 text-rose-500"
+                  onClick={async () => {
+                    if (!confirm(`Stop loading skills from ${dir.path}?`)) return;
+                    await jsonFetch(`/api/skills/directories?path=${encodeURIComponent(dir.path)}`, { method: 'DELETE' });
+                    refresh();
+                  }}>
+                  <Trash2 className="size-3" />
+                </Button>
+              )}
+            </div>
+
+            {creatingInDir === dir.path && (
+              <NewSkillForm
+                directory={dir.path}
+                onCancel={() => setCreatingInDir(null)}
+                onSaved={() => { setCreatingInDir(null); refresh(); }}
+              />
+            )}
+
+            {items.length === 0 ? (
+              <p className="text-[11px] text-muted-foreground italic px-1">
+                {dir.writable ? 'No skills here yet — drop .md files or click New.' : 'No skills here.'}
+              </p>
+            ) : (
+              <div className="divide-y divide-border/30">
+                {items.map((s) => (
+                  <button
+                    key={s.id}
+                    type="button"
+                    onClick={() => setEditing(s)}
+                    className="w-full flex items-start gap-2 px-1 py-2 text-left hover:bg-accent/40 rounded transition-colors"
+                  >
+                    <FileText className="size-3.5 text-muted-foreground shrink-0 mt-0.5" />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-medium truncate">{s.name}</span>
+                        <code className="text-[10px] text-muted-foreground font-mono truncate">{s.fileName}</code>
+                        {s.alwaysApply && <span className="text-[10px] text-amber-500 uppercase tracking-wide">always</span>}
+                        {s.globs.length > 0 && (
+                          <span className="text-[10px] text-muted-foreground">{s.globs.join(', ')}</span>
+                        )}
+                      </div>
+                      {s.description && (
+                        <p className="text-[11px] text-muted-foreground line-clamp-2 mt-0.5">{s.description}</p>
+                      )}
+                    </div>
+                    <Pencil className="size-3 text-muted-foreground/60 mt-1" />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {editing && (
+        <SkillEditorModal
+          skill={editing}
+          onClose={() => setEditing(null)}
+          onSaved={() => { setEditing(null); refresh(); }}
+        />
+      )}
+    </section>
+  );
+}
+
+function AddSkillDirectoryForm({ onCancel, onSaved }: { onCancel: () => void; onSaved: () => void }) {
+  const [path, setPath] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Browsers can't expose absolute filesystem paths even when the user
+  // picks a directory. We let them pick a folder so we can suggest the
+  // folder NAME, but they still have to paste/confirm the absolute path
+  // (or a path relative to the working directory) so the orchestrator
+  // can read files server-side.
+  const folderInputRef = useRef<HTMLInputElement | null>(null);
+
+  const onPickFolder = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    const first = files[0];
+    // webkitRelativePath is "<folder>/file.md"; first segment = folder.
+    const rel = (first as any).webkitRelativePath || first.name;
+    const folderName = rel.split('/')[0];
+    if (!path) setPath(folderName);
+  };
+
+  const save = async () => {
+    setError(null);
+    if (!path.trim()) return;
+    setSaving(true);
+    try {
+      const r = await jsonFetch<{ ok?: boolean; error?: string }>('/api/skills/directories', {
+        method: 'POST',
+        body: JSON.stringify({ path: path.trim() }),
+      });
+      if ((r as any).error) { setError((r as any).error); return; }
+      onSaved();
+    } finally { setSaving(false); }
+  };
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-card/40 p-3 mb-3 space-y-2">
+      <Label className="text-xs">Directory path</Label>
+      <p className="text-[11px] text-muted-foreground">
+        Absolute path (recommended) or a path relative to the orchestrator's working directory. All <code>.md</code> / <code>.mdc</code> files inside are picked up automatically.
+      </p>
+      <div className="flex gap-2">
+        <Input
+          value={path}
+          onChange={(e) => setPath(e.target.value)}
+          placeholder="/Users/you/skills  or  ./my-skills"
+          className="text-xs font-mono"
+        />
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => folderInputRef.current?.click()}
+          title="Pick a folder to suggest its name (browser security: you'll still need to paste the absolute path)"
+        >
+          <FolderOpen className="size-3.5 mr-1" />Browse
+        </Button>
+        <input
+          ref={folderInputRef}
+          type="file"
+          // @ts-expect-error non-standard but widely supported
+          webkitdirectory=""
+          directory=""
+          multiple
+          hidden
+          onChange={onPickFolder}
+        />
+      </div>
+      {error && <p className="text-[11px] text-rose-500">{error}</p>}
+      <div className="flex gap-2 pt-1">
+        <Button size="sm" onClick={save} disabled={saving || !path.trim()}>
+          {saving ? <Loader2 className="size-3.5 animate-spin" /> : 'Add folder'}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>
+      </div>
+    </div>
+  );
+}
+
+function NewSkillForm({ directory, onCancel, onSaved }: { directory: string; onCancel: () => void; onSaved: () => void }) {
+  const [fileName, setFileName] = useState('');
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [body, setBody] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const buildContent = () => {
+    const fm: string[] = ['---'];
+    if (name) fm.push(`name: ${name}`);
+    if (description) fm.push(`description: ${description.replace(/\n/g, ' ')}`);
+    fm.push('---', '');
+    return fm.join('\n') + (body || `# ${name || 'New skill'}\n\nDescribe what this skill does and when to use it.`);
+  };
+
+  const save = async () => {
+    setError(null);
+    const finalFileName = fileName.trim() || (name ? name.toLowerCase().replace(/[^a-z0-9]+/g, '-') + '.md' : 'untitled.md');
+    setSaving(true);
+    try {
+      const r = await jsonFetch<{ error?: string }>('/api/skills', {
+        method: 'POST',
+        body: JSON.stringify({ directory, fileName: finalFileName, content: buildContent() }),
+      });
+      if (r.error) { setError(r.error); return; }
+      onSaved();
+    } finally { setSaving(false); }
+  };
+
+  const onPickFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || !files[0]) return;
+    const file = files[0];
+    setFileName(file.name);
+    setBody(await file.text());
+  };
+
+  return (
+    <div className="rounded-md border border-border/60 bg-background/50 p-3 mb-2 space-y-2">
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <Label className="text-xs">Skill name</Label>
+          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="React Performance" className="text-xs" />
+        </div>
+        <div>
+          <Label className="text-xs">File name</Label>
+          <Input value={fileName} onChange={(e) => setFileName(e.target.value)} placeholder="react-performance.md" className="text-xs font-mono" />
+        </div>
+      </div>
+      <div>
+        <Label className="text-xs">Description</Label>
+        <Input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="When to use this skill (one sentence)." className="text-xs" />
+      </div>
+      <div>
+        <Label className="text-xs">Body (markdown)</Label>
+        <textarea
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          rows={6}
+          placeholder="# How to do X&#10;&#10;Step 1…"
+          className="w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs font-mono"
+        />
+      </div>
+      {error && <p className="text-[11px] text-rose-500">{error}</p>}
+      <div className="flex gap-2 pt-1">
+        <Button size="sm" onClick={save} disabled={saving}>
+          {saving ? <Loader2 className="size-3.5 animate-spin" /> : <><Save className="size-3.5 mr-1" />Save</>}
+        </Button>
+        <Button size="sm" variant="outline" onClick={() => fileInputRef.current?.click()}>
+          <Upload className="size-3.5 mr-1" />Import .md
+        </Button>
+        <input ref={fileInputRef} type="file" hidden accept=".md,.mdc,.markdown,.txt" onChange={onPickFile} />
+        <Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>
+      </div>
+    </div>
+  );
+}
+
+function SkillEditorModal({ skill, onClose, onSaved }: { skill: SkillRow; onClose: () => void; onSaved: () => void }) {
+  const [content, setContent] = useState<string | null>(null);
+  const [writable, setWritable] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [savedFlash, setSavedFlash] = useState(false);
+  const [original, setOriginal] = useState('');
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const r = await jsonFetch<{ content: string; writable: boolean }>(`/api/skills/${skill.id}`);
+      if (cancelled) return;
+      setContent(r.content);
+      setOriginal(r.content);
+      setWritable(r.writable);
+    })();
+    return () => { cancelled = true; };
+  }, [skill.id]);
+
+  const dirty = content !== null && content !== original;
+
+  const save = async () => {
+    if (content === null || !writable) return;
+    setSaving(true);
+    try {
+      await jsonFetch(`/api/skills/${skill.id}`, { method: 'PUT', body: JSON.stringify({ content }) });
+      setOriginal(content);
+      setSavedFlash(true);
+      setTimeout(() => setSavedFlash(false), 1200);
+    } finally { setSaving(false); }
+  };
+
+  const remove = async () => {
+    if (!confirm(`Delete skill "${skill.name}"? This removes the file from disk.`)) return;
+    await jsonFetch(`/api/skills/${skill.id}`, { method: 'DELETE' });
+    onSaved();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4" onClick={onClose}>
+      <div className="bg-card rounded-lg border border-border max-w-3xl w-full max-h-[85vh] flex flex-col shadow-2xl" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between px-5 py-3 border-b border-border/60">
+          <div className="min-w-0">
+            <h2 className="text-base font-semibold flex items-center gap-2 truncate">
+              <FileText className="size-4 text-muted-foreground" />
+              {skill.name}
+              {!writable && <span className="text-[10px] uppercase tracking-wide text-muted-foreground">read-only</span>}
+            </h2>
+            <code className="text-[11px] text-muted-foreground font-mono truncate block">{skill.filePath}</code>
+          </div>
+          <Button size="icon" variant="ghost" onClick={onClose}><XIcon className="size-4" /></Button>
+        </div>
+
+        <div className="flex-1 min-h-0 overflow-hidden flex flex-col p-4">
+          {content === null ? (
+            <div className="flex items-center justify-center flex-1"><Loader2 className="size-5 animate-spin text-muted-foreground" /></div>
+          ) : (
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              readOnly={!writable}
+              spellCheck={false}
+              className="flex-1 w-full rounded-md border border-input bg-background px-3 py-2 text-xs font-mono resize-none focus:outline-none focus:ring-2 focus:ring-primary/40"
+            />
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 px-5 py-3 border-t border-border/60">
+          {writable && (
+            <>
+              <Button size="sm" onClick={save} disabled={!dirty || saving}>
+                {saving ? <Loader2 className="size-3.5 animate-spin mr-1" /> : <Save className="size-3.5 mr-1" />}
+                Save
+              </Button>
+              {savedFlash && <span className="text-xs text-emerald-500">Saved ✓</span>}
+              <Button size="sm" variant="ghost" onClick={remove} className="text-rose-500 hover:text-rose-600 ml-auto">
+                <Trash2 className="size-3.5 mr-1" />Delete
+              </Button>
+            </>
+          )}
+          {!writable && (
+            <p className="text-[11px] text-muted-foreground">
+              Built-in skills can't be edited from the UI. Copy the contents into a custom folder to override.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function StatusPill({ status }: { status: WebhookEventRow['status'] }) {
   const colors: Record<WebhookEventRow['status'], string> = {
     routed:    'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',