work-agent 0.1.0

package/app/(admin)/skills/page.tsx

@@ -0,0 +1,406 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { 
+  Plus, 
+  Puzzle, 
+  Trash2, 
+  Code, 
+  FileText, 
+  Shield, 
+  RefreshCw
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Terminal } from '@/components/ai-elements/terminal';
+
+interface Skill {
+  name: string;
+  displayName?: string;
+  description?: string;
+  version?: string;
+  author?: string;
+  type?: string;
+  categories?: string[];
+  scriptCount: number;
+  apiDocCount: number;
+  isBuiltin: boolean;
+  builtinEnabled: boolean;
+}
+
+export default function SkillsPage() {
+  const [skills, setSkills] = useState<Skill[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [deleteTarget, setDeleteTarget] = useState<Skill | null>(null);
+  const [deleting, setDeleting] = useState(false);
+  const [savingBuiltin, setSavingBuiltin] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const fetchSkills = async () => {
+    try {
+      const res = await fetch('/api/skills');
+      if (res.ok) {
+        const data = await res.json();
+        setSkills(data);
+      }
+    } catch (error) {
+      console.error('Failed to fetch skills:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchSkills();
+  }, []);
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    setDeleting(true);
+    try {
+      const res = await fetch(`/api/skills/${deleteTarget.name}`, { method: 'DELETE' });
+      if (res.ok) {
+        setMessage({ type: 'success', text: `Skill "${deleteTarget.displayName || deleteTarget.name}" 已删除` });
+        fetchSkills();
+      } else {
+        const data = await res.json();
+        setMessage({ type: 'error', text: data.error || '删除失败' });
+      }
+    } catch (error) {
+      setMessage({ type: 'error', text: '删除失败' });
+    } finally {
+      setDeleting(false);
+      setDeleteTarget(null);
+    }
+  };
+
+  const toggleBuiltin = async (skillName: string, enabled: boolean) => {
+    setSavingBuiltin(skillName);
+    try {
+      const res = await fetch('/api/skills', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ skillName, enabled })
+      });
+      if (res.ok) {
+        setSkills(prev => prev.map(s => 
+          s.name === skillName ? { ...s, builtinEnabled: enabled } : s
+        ));
+        setMessage({ 
+          type: 'success', 
+          text: enabled ? `已启用内置 Skill "${skillName}"` : `已禁用内置 Skill "${skillName}"` 
+        });
+      } else {
+        setMessage({ type: 'error', text: '操作失败' });
+      }
+    } catch (error) {
+      setMessage({ type: 'error', text: '操作失败' });
+    } finally {
+      setSavingBuiltin(null);
+    }
+  };
+
+  // 分类skills：
+  // 1. API Skills: 从Swagger生成的，有scripts或APIs目录
+  // 2. 通用Skills: 只有SKILL.json/SKILL.md的skill（知识型、命令型等）
+  const apiSkills = skills.filter(s => !s.isBuiltin && (s.scriptCount > 0 || s.apiDocCount > 0));
+  const generalSkills = skills.filter(s =>
+    !s.isBuiltin &&
+    s.scriptCount === 0 &&
+    s.apiDocCount === 0 &&
+    (s.type === 'documentation' || s.type === 'command' || s.type === 'workflow' || s.type === 'hybrid' || s.version)
+  );
+  const otherSkills = skills.filter(s =>
+    !s.isBuiltin &&
+    s.scriptCount === 0 &&
+    s.apiDocCount === 0 &&
+    !generalSkills.includes(s)
+  );
+  const systemSkills = skills.filter(s => s.isBuiltin);
+
+  return (
+    <div className="p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold">Skill 管理</h1>
+            <p className="text-muted-foreground mt-1">管理 Skills，支持通用类型和 Swagger/API 生成</p>
+          </div>
+          <div className="flex gap-3">
+            <Button variant="outline" onClick={fetchSkills}>
+              <RefreshCw className="w-4 h-4 mr-2" />
+              刷新
+            </Button>
+            <Link href="/skills/new">
+              <Button>
+                <Plus className="w-4 h-4 mr-2" />
+                创建 Skill
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        {message && (
+          <div className={`mb-6 p-4 rounded-lg ${message.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
+            {message.text}
+          </div>
+        )}
+
+        {loading ? (
+          <div className="flex items-center justify-center h-64">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {systemSkills.length > 0 && (
+              <div>
+                <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Shield className="w-5 h-5 text-primary" />
+                  系统内置 Skills ({systemSkills.length})
+                </h2>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {systemSkills.map((skill) => (
+                    <Card key={skill.name} className={skill.builtinEnabled ? "border-primary/20 bg-primary/5" : "border-dashed opacity-60"}>
+                      <CardHeader>
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                              <Code className="w-5 h-5 text-primary" />
+                            </div>
+                            <div>
+                              <CardTitle className="text-base">{skill.displayName || skill.name}</CardTitle>
+                              <CardDescription>v{skill.version}</CardDescription>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Button
+                              variant={skill.builtinEnabled ? "default" : "outline"}
+                              size="sm"
+                              disabled={savingBuiltin === skill.name}
+                              onClick={() => toggleBuiltin(skill.name, !skill.builtinEnabled)}
+                            >
+                              {skill.builtinEnabled ? "已启用" : "启用"}
+                            </Button>
+                          </div>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-sm text-muted-foreground mb-4 line-clamp-2">{skill.description}</p>
+                        <div className="flex gap-2">
+                          <Link href={`/skills/${skill.name}`} className="flex-1">
+                            <Button variant="outline" size="sm" className="w-full">
+                              查看详情
+                            </Button>
+                          </Link>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {apiSkills.length > 0 && (
+              <div>
+                <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Puzzle className="w-5 h-5" />
+                  API Skills ({apiSkills.length})
+                </h2>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {apiSkills.map((skill) => (
+                    <Card key={skill.name} className="hover:shadow-md transition-shadow">
+                      <CardHeader>
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center">
+                              <Puzzle className="w-5 h-5 text-muted-foreground" />
+                            </div>
+                            <div>
+                              <CardTitle className="text-base">{skill.displayName || skill.name}</CardTitle>
+                              <CardDescription>v{skill.version}</CardDescription>
+                            </div>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="text-muted-foreground hover:text-destructive"
+                            onClick={() => setDeleteTarget(skill)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-sm text-muted-foreground mb-4 line-clamp-2">{skill.description}</p>
+                        <div className="flex flex-wrap gap-2 mb-4">
+                          {skill.categories?.slice(0, 3).map((cat) => (
+                            <Badge key={cat} variant="outline" className="text-xs">
+                              {cat}
+                            </Badge>
+                          ))}
+                        </div>
+                        <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
+                          <span className="flex items-center gap-1">
+                            <Code className="w-4 h-4" />
+                            {skill.scriptCount} 脚本
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <FileText className="w-4 h-4" />
+                            {skill.apiDocCount} API
+                          </span>
+                        </div>
+                        <div className="flex gap-2">
+                          <Link href={`/skills/${skill.name}`} className="flex-1">
+                            <Button variant="outline" size="sm" className="w-full">
+                              查看详情
+                            </Button>
+                          </Link>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-destructive hover:text-destructive"
+                            onClick={() => setDeleteTarget(skill)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {generalSkills.length > 0 && (
+              <div>
+                <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <FileText className="w-5 h-5" />
+                  通用 Skills ({generalSkills.length})
+                </h2>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {generalSkills.map((skill) => (
+                    <Card key={skill.name}>
+                      <CardHeader>
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center">
+                              <FileText className="w-5 h-5 text-muted-foreground" />
+                            </div>
+                            <div>
+                              <CardTitle className="text-base">{skill.displayName || skill.name}</CardTitle>
+                              <CardDescription>{skill.type || '通用'} · v{skill.version}</CardDescription>
+                            </div>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="text-muted-foreground hover:text-destructive"
+                            onClick={() => setDeleteTarget(skill)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-sm text-muted-foreground mb-4 line-clamp-2">{skill.description}</p>
+                        <div className="flex gap-2">
+                          <Link href={`/skills/${skill.name}`} className="flex-1">
+                            <Button variant="outline" size="sm" className="w-full">
+                              查看详情
+                            </Button>
+                          </Link>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {otherSkills.length > 0 && (
+              <div>
+                <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                  <Puzzle className="w-5 h-5" />
+                  其他 Skills ({otherSkills.length})
+                </h2>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {otherSkills.map((skill) => (
+                    <Card key={skill.name} className="border-dashed">
+                      <CardHeader>
+                        <div className="flex items-start justify-between">
+                          <div>
+                            <CardTitle className="text-base">{skill.displayName || skill.name}</CardTitle>
+                            <CardDescription>v{skill.version || '未知'}</CardDescription>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="text-muted-foreground hover:text-destructive"
+                            onClick={() => setDeleteTarget(skill)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-sm text-muted-foreground mb-4">{skill.description}</p>
+                        <div className="flex gap-2">
+                          <Link href={`/skills/${skill.name}`} className="flex-1">
+                            <Button variant="outline" size="sm" className="w-full">
+                              查看详情
+                            </Button>
+                          </Link>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {skills.length === 0 && (
+              <Card className="border-dashed">
+                <CardContent className="flex flex-col items-center justify-center py-12">
+                  <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+                    <Puzzle className="w-8 h-8 text-muted-foreground" />
+                  </div>
+                  <h3 className="text-lg font-medium mb-2">暂无 Skill</h3>
+                  <p className="text-muted-foreground text-center mb-4">
+                    创建通用 Skill 或从 Swagger/OpenAPI 生成 API Skill
+                  </p>
+                  <Link href="/skills/new">
+                    <Button>
+                      <Plus className="w-4 h-4 mr-2" />
+                      创建第一个 Skill
+                    </Button>
+                  </Link>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        )}
+
+        <Dialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>确认删除</DialogTitle>
+              <DialogDescription>
+                确定要删除 Skill "{deleteTarget?.displayName || deleteTarget?.name}" 吗？
+                此操作不可恢复，将删除该 skill 的所有文件。
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setDeleteTarget(null)}>取消</Button>
+              <Button onClick={handleDelete} disabled={deleting}>
+                {deleting ? '删除中...' : '确认删除'}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}