Merge remote-tracking branch 'origin/main'

This commit is contained in:
lpf
2026-02-26 15:35:40 +08:00
2 changed files with 189 additions and 39 deletions

View File

@@ -583,8 +583,69 @@ func (s *RegistryServer) handleWebUISkills(w http.ResponseWriter, r *http.Reques
}
_ = os.MkdirAll(skillsDir, 0755)
resolveSkillPath := func(name string) (string, error) {
name = strings.TrimSpace(name)
if name == "" {
return "", fmt.Errorf("name required")
}
cands := []string{
filepath.Join(skillsDir, name),
filepath.Join(skillsDir, name+".disabled"),
filepath.Join("/root/clawgo/workspace/skills", name),
filepath.Join("/root/clawgo/workspace/skills", name+".disabled"),
}
for _, p := range cands {
if st, err := os.Stat(p); err == nil && st.IsDir() {
return p, nil
}
}
return "", fmt.Errorf("skill not found: %s", name)
}
switch r.Method {
case http.MethodGet:
if id := strings.TrimSpace(r.URL.Query().Get("id")); id != "" {
skillPath, err := resolveSkillPath(id)
if err != nil {
http.Error(w, err.Error(), http.StatusNotFound)
return
}
if strings.TrimSpace(r.URL.Query().Get("files")) == "1" {
var files []string
_ = filepath.WalkDir(skillPath, func(path string, d os.DirEntry, err error) error {
if err != nil {
return nil
}
if d.IsDir() {
return nil
}
rel, _ := filepath.Rel(skillPath, path)
if strings.HasPrefix(rel, "..") {
return nil
}
files = append(files, filepath.ToSlash(rel))
return nil
})
_ = json.NewEncoder(w).Encode(map[string]interface{}{"ok": true, "id": id, "files": files})
return
}
if f := strings.TrimSpace(r.URL.Query().Get("file")); f != "" {
clean := filepath.Clean(f)
if strings.HasPrefix(clean, "..") {
http.Error(w, "invalid file path", http.StatusBadRequest)
return
}
full := filepath.Join(skillPath, clean)
b, err := os.ReadFile(full)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
_ = json.NewEncoder(w).Encode(map[string]interface{}{"ok": true, "id": id, "file": filepath.ToSlash(clean), "content": string(b)})
return
}
}
type skillItem struct {
ID string `json:"id"`
Name string `json:"name"`
@@ -709,6 +770,29 @@ func (s *RegistryServer) handleWebUISkills(w http.ResponseWriter, r *http.Reques
}
}
_ = json.NewEncoder(w).Encode(map[string]interface{}{"ok": true})
case "write_file":
skillPath, err := resolveSkillPath(name)
if err != nil {
http.Error(w, err.Error(), http.StatusNotFound)
return
}
filePath, _ := body["file"].(string)
clean := filepath.Clean(strings.TrimSpace(filePath))
if clean == "" || strings.HasPrefix(clean, "..") {
http.Error(w, "invalid file path", http.StatusBadRequest)
return
}
content, _ := body["content"].(string)
full := filepath.Join(skillPath, clean)
if err := os.MkdirAll(filepath.Dir(full), 0755); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
if err := os.WriteFile(full, []byte(content), 0644); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
_ = json.NewEncoder(w).Encode(map[string]interface{}{"ok": true, "name": name, "file": filepath.ToSlash(clean)})
case "create", "update":
desc, _ := body["description"].(string)
sys, _ := body["system_prompt"].(string)

View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Plus, RefreshCw, Trash2, Edit2, Zap, X, Code } from 'lucide-react';
import { Plus, RefreshCw, Trash2, Edit2, Zap, X, FileText, Save } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { useTranslation } from 'react-i18next';
import { useAppContext } from '../context/AppContext';
@@ -21,6 +21,12 @@ const Skills: React.FC = () => {
const [editingSkill, setEditingSkill] = useState<Skill | null>(null);
const [form, setForm] = useState<Omit<Skill, 'id'>>(initialSkillForm);
const [isFileModalOpen, setIsFileModalOpen] = useState(false);
const [activeSkill, setActiveSkill] = useState<string>('');
const [skillFiles, setSkillFiles] = useState<string[]>([]);
const [activeFile, setActiveFile] = useState<string>('');
const [fileContent, setFileContent] = useState('');
async function deleteSkill(id: string) {
if (!confirm('Are you sure you want to delete this skill?')) return;
try {
@@ -55,7 +61,7 @@ const Skills: React.FC = () => {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action, ...(editingSkill && { id: editingSkill.id }), ...form })
});
if (r.ok) {
setIsModalOpen(false);
await refreshSkills();
@@ -63,13 +69,58 @@ const Skills: React.FC = () => {
alert(await r.text());
}
} catch (e) {
alert(e);
alert(String(e));
}
}
async function openFileManager(skillId: string) {
setActiveSkill(skillId);
setIsFileModalOpen(true);
const r = await fetch(`/webui/api/skills${q ? `${q}&id=${encodeURIComponent(skillId)}&files=1` : `?id=${encodeURIComponent(skillId)}&files=1`}`);
if (!r.ok) {
alert(await r.text());
return;
}
const j = await r.json();
const files = Array.isArray(j.files) ? j.files : [];
setSkillFiles(files);
if (files.length > 0) {
await openFile(skillId, files[0]);
} else {
setActiveFile('');
setFileContent('');
}
}
async function openFile(skillId: string, file: string) {
const url = `/webui/api/skills${q ? `${q}&id=${encodeURIComponent(skillId)}&file=${encodeURIComponent(file)}` : `?id=${encodeURIComponent(skillId)}&file=${encodeURIComponent(file)}`}`;
const r = await fetch(url);
if (!r.ok) {
alert(await r.text());
return;
}
const j = await r.json();
setActiveFile(file);
setFileContent(String(j.content || ''));
}
async function saveFile() {
if (!activeSkill || !activeFile) return;
const r = await fetch(`/webui/api/skills${q}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'write_file', id: activeSkill, file: activeFile, content: fileContent }),
});
if (!r.ok) {
alert(await r.text());
return;
}
alert('Saved');
}
return (
<div className="p-8 max-w-7xl mx-auto space-y-8">
<div className="flex items-center justify-between">
<div className="flex items-center justify-between gap-3 flex-wrap">
<h1 className="text-2xl font-semibold tracking-tight">{t('skills')}</h1>
<div className="flex items-center gap-2">
<input value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder="skill name" className="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm" />
@@ -99,7 +150,7 @@ const Skills: React.FC = () => {
</div>
</div>
</div>
<p className="text-sm text-zinc-400 mb-6 line-clamp-2">{s.description || 'No description provided.'}</p>
<div className="space-y-4 mb-6">
@@ -112,33 +163,32 @@ const Skills: React.FC = () => {
{(!Array.isArray(s.tools) || s.tools.length === 0) && <span className="text-xs text-zinc-600 italic">No tools defined</span>}
</div>
</div>
{s.system_prompt && (
<div>
<div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-2">System Prompt</div>
<div className="p-3 bg-zinc-950/50 rounded-lg border border-zinc-800/50 text-xs text-zinc-400 line-clamp-3 italic">
{s.system_prompt}
</div>
</div>
)}
</div>
<div className="flex items-center gap-2 pt-4 border-t border-zinc-800/50 mt-auto">
<button
onClick={() => {
setEditingSkill(s);
<button
onClick={() => {
setEditingSkill(s);
setForm({
name: s.name,
description: s.description,
tools: Array.isArray(s.tools) ? s.tools : [],
system_prompt: s.system_prompt || ''
});
setIsModalOpen(true);
});
setIsModalOpen(true);
}}
className="flex-1 flex items-center justify-center gap-2 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-xs font-medium transition-colors text-zinc-300"
>
<Edit2 className="w-3.5 h-3.5" /> Edit Skill
</button>
<button
<button
onClick={() => openFileManager(s.id)}
className="p-2 bg-indigo-500/10 text-indigo-400 hover:bg-indigo-500/20 rounded-lg transition-colors"
title="Files"
>
<FileText className="w-4 h-4" />
</button>
<button
onClick={() => deleteSkill(s.id)}
className="p-2 bg-red-500/10 text-red-500 hover:bg-red-500/20 rounded-lg transition-colors"
>
@@ -147,12 +197,6 @@ const Skills: React.FC = () => {
</div>
</div>
))}
{skills.length === 0 && (
<div className="col-span-full py-20 bg-zinc-900/20 border border-dashed border-zinc-800 rounded-3xl flex flex-col items-center justify-center text-zinc-500">
<Zap className="w-12 h-12 mb-4 opacity-20" />
<p className="text-lg font-medium">No skills defined</p>
</div>
)}
</div>
<AnimatePresence>
@@ -167,30 +211,24 @@ const Skills: React.FC = () => {
<div className="p-6 space-y-4 max-h-[70vh] overflow-y-auto">
<label className="block">
<span className="text-sm font-medium text-zinc-400 mb-1.5 block">Name</span>
<input type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
<input type="text" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
</label>
<label className="block">
<span className="text-sm font-medium text-zinc-400 mb-1.5 block">Description</span>
<input type="text" value={form.description} onChange={e => setForm({...form, description: e.target.value})} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
<input type="text" value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
</label>
<label className="block">
<span className="text-sm font-medium text-zinc-400 mb-1.5 block">Tools (Comma separated)</span>
<input
type="text"
value={form.tools.join(', ')}
onChange={e => setForm({...form, tools: e.target.value.split(',').map(t => t.trim()).filter(t => t)})}
placeholder="google_search, calculator, shell"
className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm font-mono focus:border-indigo-500 outline-none"
<input
type="text"
value={form.tools.join(', ')}
onChange={e => setForm({ ...form, tools: e.target.value.split(',').map(t => t.trim()).filter(t => t) })}
className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm font-mono focus:border-indigo-500 outline-none"
/>
</label>
<label className="block">
<span className="text-sm font-medium text-zinc-400 mb-1.5 block">System Prompt</span>
<textarea
value={form.system_prompt}
onChange={e => setForm({...form, system_prompt: e.target.value})}
rows={6}
className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none resize-none"
/>
<textarea value={form.system_prompt} onChange={e => setForm({ ...form, system_prompt: e.target.value })} rows={6} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none resize-none" />
</label>
</div>
<div className="p-6 border-t border-zinc-800 bg-zinc-900/50 flex justify-end gap-3">
@@ -203,6 +241,34 @@ const Skills: React.FC = () => {
</div>
)}
</AnimatePresence>
<AnimatePresence>
{isFileModalOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setIsFileModalOpen(false)} className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
<motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.96 }} className="relative w-full max-w-6xl h-[80vh] bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl overflow-hidden flex">
<aside className="w-72 border-r border-zinc-800 bg-zinc-950/60 p-3 overflow-y-auto">
<div className="text-sm font-semibold mb-3">{activeSkill} files</div>
<div className="space-y-1">
{skillFiles.map(f => (
<button key={f} onClick={() => openFile(activeSkill, f)} className={`w-full text-left px-2 py-1.5 rounded text-xs font-mono ${activeFile===f ? 'bg-indigo-500/20 text-indigo-200' : 'text-zinc-300 hover:bg-zinc-800'}`}>{f}</button>
))}
</div>
</aside>
<main className="flex-1 flex flex-col">
<div className="px-4 py-3 border-b border-zinc-800 flex items-center justify-between">
<div className="text-sm text-zinc-300 font-mono truncate">{activeFile || '(no file selected)'}</div>
<div className="flex items-center gap-2">
<button onClick={saveFile} className="px-3 py-1.5 rounded bg-emerald-600 hover:bg-emerald-500 text-white text-xs flex items-center gap-1"><Save className="w-3 h-3"/>Save</button>
<button onClick={() => setIsFileModalOpen(false)} className="p-2 hover:bg-zinc-800 rounded-full transition-colors text-zinc-400"><X className="w-4 h-4" /></button>
</div>
</div>
<textarea value={fileContent} onChange={(e)=>setFileContent(e.target.value)} className="flex-1 bg-zinc-950 text-zinc-200 font-mono text-sm p-4 resize-none outline-none" />
</main>
</motion.div>
</div>
)}
</AnimatePresence>
</div>
);
};