@jiangxiaosheng/digital-agent-platform 1.0.0

package/src/app/globals.css

@@ -0,0 +1,176 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: 210 15% 96%;
+  --foreground: 220 10% 12%;
+  --card: 210 15% 98%;
+  --card-foreground: 220 10% 12%;
+  --popover: 210 15% 98%;
+  --popover-foreground: 220 10% 12%;
+  --primary: 210 70% 50%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 210 15% 92%;
+  --secondary-foreground: 220 10% 12%;
+  --muted: 210 15% 92%;
+  --muted-foreground: 220 8% 30%;
+  --accent: 210 70% 55%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 72% 50%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 210 15% 88%;
+  --input: 210 15% 88%;
+  --ring: 210 70% 50%;
+  --radius: 1rem;
+  --sidebar-width: 280px;
+
+  /* 新拟态配色 */
+  --neo-bg: 210 15% 96%;
+  --neo-shadow-dark: 210 15% 80%;
+  --neo-shadow-light: 0 0% 100%;
+}
+
+.dark {
+  --background: 240 10% 8%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 12%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 12%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 271 81% 56%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 189 100% 50%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 20%;
+  --input: 240 3.7% 20%;
+  --ring: 189 100% 50%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+/* 网格背景 - 浅色模式无网格 */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.dark body::before {
+  background-image:
+    linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);
+  background-size: 50px 50px;
+}
+
+/* 玻璃态效果 - 仅深色模式 */
+.dark .glass-effect {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* 霓虹发光效果 - 仅深色模式 */
+.dark .neon-glow {
+  box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
+}
+
+.dark .neon-glow-purple {
+  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
+}
+
+.dark .neon-glow-green {
+  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+}
+
+/* 新拟态效果 - 仅浅色模式 - 柔和版本 */
+.neo-card {
+  background: hsl(var(--neo-bg));
+  box-shadow: 6px 6px 12px hsl(var(--neo-shadow-dark) / 0.3),
+              -6px -6px 12px hsl(var(--neo-shadow-light) / 0.8);
+  border: none;
+}
+
+.neo-card-inset {
+  background: hsl(var(--neo-bg));
+  box-shadow: inset 4px 4px 8px hsl(var(--neo-shadow-dark) / 0.25),
+              inset -4px -4px 8px hsl(var(--neo-shadow-light) / 0.8);
+  border: none;
+}
+
+.neo-button {
+  background: hsl(var(--neo-bg));
+  box-shadow: 4px 4px 8px hsl(var(--neo-shadow-dark) / 0.25),
+              -4px -4px 8px hsl(var(--neo-shadow-light) / 0.8);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.neo-button:hover {
+  box-shadow: 3px 3px 6px hsl(var(--neo-shadow-dark)),
+              -3px -3px 6px hsl(var(--neo-shadow-light));
+}
+
+.neo-button:active {
+  box-shadow: inset 3px 3px 6px hsl(var(--neo-shadow-dark)),
+              inset -3px -3px 6px hsl(var(--neo-shadow-light));
+}
+
+/* 深色模式替换新拟态为科技风格 */
+.dark .neo-card,
+.dark .neo-card-inset,
+.dark .neo-button {
+  background: transparent;
+  box-shadow: none;
+}
+
+/* 浅色模式全局组件新拟态样式 */
+[data-theme="light"] [class*="card"],
+[class*="card"]:not(.dark *) {
+  box-shadow: 8px 8px 16px hsl(var(--neo-shadow-dark) / 0.4),
+              -8px -8px 16px hsl(var(--neo-shadow-light));
+}
+
+/* 深色模式移除组件新拟态效果 */
+.dark [class*="card"] {
+  box-shadow: none;
+}
+
+/* 输入框新拟态样式（浅色模式） - 排除textarea */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="search"],
+input[type="url"],
+select {
+  background: hsl(var(--neo-bg));
+  box-shadow: inset 2px 2px 4px hsl(var(--neo-shadow-dark) / 0.2),
+              inset -2px -2px 4px hsl(var(--neo-shadow-light) / 0.6);
+}
+
+.dark input[type="text"],
+.dark input[type="email"],
+.dark input[type="password"],
+.dark input[type="number"],
+.dark input[type="search"],
+.dark input[type="url"],
+.dark select {
+  background: transparent;
+  box-shadow: none;
+}

package/src/app/layout.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+import "@/app/globals.css";
+
+export const metadata: Metadata = {
+  title: "Digital Agent Platform",
+  description: "Configure and chat with your AI digital agents",
+};
+
+// Minimal root layout required by Next.js App Router.
+// Locale-specific layout (with Providers, Sidebar, etc.) lives in [locale]/layout.tsx.
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

package/src/app/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+// Root `/` → `/zh` (default locale)
+export default function RootPage() {
+  redirect("/zh");
+}

package/src/components/agents/agent-form.tsx

@@ -0,0 +1,457 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import {
+  Terminal, FileText, FilePen, Search, FolderSearch,
+  Globe, Calculator, Mic, Volume2, Zap, Check,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ModelSelector, useModelCaps } from "@/components/agents/model-selector";
+import { SkillsManager } from "@/components/agents/skills-manager";
+import { DirectoryPicker } from "@/components/ui/directory-picker";
+import { AVATAR_OPTIONS } from "@/types/agent";
+import type { CreateAgentInput, DigitalAgent } from "@/types/agent";
+import type { KnowledgeBase } from "@/types/knowledge";
+import { cn } from "@/lib/utils";
+import type { ModelCaps } from "@/components/agents/model-selector";
+
+const THINKING_LABELS: Record<string, string> = {
+  off: "关闭", minimal: "最低", low: "低",
+  medium: "中等", high: "高", xhigh: "极高", max: "最大",
+};
+
+// ─── Tool card definitions ────────────────────────────────────────────────────
+type ToolKey = keyof CreateAgentInput["tools"];
+const TOOL_CARDS: {
+  key: ToolKey;
+  icon: React.ElementType;
+  color: string;
+  labelKey: string;
+  hintKey: string;
+}[] = [
+  { key: "bash",      icon: Terminal,     color: "bg-orange-100 text-orange-600 dark:bg-orange-900/40 dark:text-orange-400",  labelKey: "bash",      hintKey: "bashHint"      },
+  { key: "fileRead",  icon: FileText,     color: "bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-400",          labelKey: "fileRead",  hintKey: "fileReadHint"  },
+  { key: "fileWrite", icon: FilePen,      color: "bg-violet-100 text-violet-600 dark:bg-violet-900/40 dark:text-violet-400",  labelKey: "fileWrite", hintKey: "fileWriteHint" },
+  { key: "grep",      icon: Search,       color: "bg-green-100 text-green-600 dark:bg-green-900/40 dark:text-green-400",      labelKey: "grep",      hintKey: "grepHint"      },
+  { key: "find",      icon: FolderSearch, color: "bg-teal-100 text-teal-600 dark:bg-teal-900/40 dark:text-teal-400",          labelKey: "find",      hintKey: "findHint"      },
+  { key: "calculator",icon: Calculator,   color: "bg-yellow-100 text-yellow-600 dark:bg-yellow-900/40 dark:text-yellow-400",  labelKey: "calculator",hintKey: "calculatorHint"},
+];
+
+interface AgentFormProps {
+  initialValues: CreateAgentInput | DigitalAgent;
+  onSave: (data: CreateAgentInput) => Promise<void>;
+  saving?: boolean;
+  submitLabel?: string;
+}
+
+export function AgentForm({ initialValues, onSave, saving, submitLabel }: AgentFormProps) {
+  const t = useTranslations("agents.form");
+  const tc = useTranslations("common");
+
+  const [form, setForm] = useState<CreateAgentInput>({ ...initialValues });
+  const [kbs, setKbs] = useState<KnowledgeBase[]>([]);
+
+  const resolvedCaps = useModelCaps(form.model.provider, form.model.modelId);
+  const [modelCaps, setModelCaps] = useState<ModelCaps>(resolvedCaps);
+
+  useEffect(() => {
+    setModelCaps(resolvedCaps);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resolvedCaps.supportsThinking, resolvedCaps.supportsTemperature, resolvedCaps.contextWindow, resolvedCaps.maxTokens]);
+
+  useEffect(() => {
+    fetch("/api/knowledge").then((r) => r.json()).then(setKbs).catch(() => {});
+  }, []);
+
+  // ── helpers ──────────────────────────────────────────────────────────────
+  const update = <K extends keyof CreateAgentInput>(key: K, val: CreateAgentInput[K]) =>
+    setForm((p) => ({ ...p, [key]: val }));
+  const updateModel = (key: keyof CreateAgentInput["model"], val: unknown) =>
+    setForm((p) => ({ ...p, model: { ...p.model, [key]: val } }));
+  const updatePersona = (key: keyof CreateAgentInput["persona"], val: string) =>
+    setForm((p) => ({ ...p, persona: { ...p.persona, [key]: val } }));
+  const toggleTool = (key: ToolKey) =>
+    setForm((p) => ({ ...p, tools: { ...p.tools, [key]: !p.tools[key] } }));
+  const toggleKb = (id: string) =>
+    setForm((p) => ({
+      ...p,
+      knowledgeBases: p.knowledgeBases.includes(id)
+        ? p.knowledgeBases.filter((x) => x !== id)
+        : [...p.knowledgeBases, id],
+    }));
+
+  const handleModelChange = (pid: string, mid: string, caps: ModelCaps) => {
+    setModelCaps(caps);
+    setForm((p) => ({
+      ...p,
+      model: {
+        ...p.model,
+        provider: pid,
+        modelId: mid,
+        thinkingLevel: (caps.supportsThinking
+          ? (p.model.thinkingLevel !== "off" ? p.model.thinkingLevel : (caps.thinkingLevels[0] ?? "medium"))
+          : "off") as CreateAgentInput["model"]["thinkingLevel"],
+      },
+    }));
+  };
+
+  const thinkingOptions =
+    modelCaps.supportsThinking && modelCaps.thinkingLevels.length > 0
+      ? modelCaps.thinkingLevels
+      : modelCaps.supportsThinking
+      ? ["low", "medium", "high", "xhigh", "max"]
+      : [];
+
+  const safeThinkingLevel =
+    thinkingOptions.includes(form.model.thinkingLevel)
+      ? form.model.thinkingLevel
+      : thinkingOptions[0] ?? "off";
+
+  const enabledToolCount = Object.values(form.tools).filter(Boolean).length;
+  const enabledSkillCount = (form.enabledSkills ?? []).length;
+
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); onSave(form); }}>
+      <Tabs defaultValue="basic">
+        <TabsList className="mb-6 w-full grid grid-cols-5 h-10">
+          <TabsTrigger value="basic" className="text-xs">基本信息</TabsTrigger>
+          <TabsTrigger value="model" className="text-xs">{t("modelConfig")}</TabsTrigger>
+          <TabsTrigger value="tools" className="text-xs relative">
+            {t("toolsConfig")}
+            {enabledToolCount > 0 && (
+              <span className="ml-1 inline-flex items-center justify-center h-4 w-4 rounded-full bg-primary text-primary-foreground text-[9px] font-bold">
+                {enabledToolCount}
+              </span>
+            )}
+          </TabsTrigger>
+          <TabsTrigger value="skills" className="text-xs relative">
+            Skills
+            {enabledSkillCount > 0 && (
+              <span className="ml-1 inline-flex items-center justify-center h-4 w-4 rounded-full bg-purple-500 text-white text-[9px] font-bold">
+                {enabledSkillCount}
+              </span>
+            )}
+          </TabsTrigger>
+        </TabsList>
+
+        {/* ── 基本信息 ──────────────────────────────────── */}
+        <TabsContent value="basic" className="space-y-5">
+          <div className="space-y-2">
+            <Label>{t("avatar")}</Label>
+            <div className="flex flex-wrap gap-2">
+              {AVATAR_OPTIONS.map((emoji) => (
+                <button key={emoji} type="button" onClick={() => update("avatar", emoji)}
+                  className={cn("h-10 w-10 rounded-xl text-xl transition-all hover:scale-110",
+                    form.avatar === emoji && "ring-2 ring-primary ring-offset-2 bg-secondary")}>
+                  {emoji}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="name">{t("name")} *</Label>
+              <Input id="name" required value={form.name}
+                onChange={(e) => update("name", e.target.value)}
+                placeholder={t("namePlaceholder")} />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="desc">{t("description")}</Label>
+              <Input id="desc" value={form.description}
+                onChange={(e) => update("description", e.target.value)}
+                placeholder={t("descriptionPlaceholder")} />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="prompt">{t("systemPrompt")}</Label>
+            <Textarea id="prompt" rows={8} value={form.systemPrompt}
+              onChange={(e) => update("systemPrompt", e.target.value)}
+              placeholder={t("systemPromptPlaceholder")} />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <Label>{t("tone")}</Label>
+              <Select value={form.persona.tone} onValueChange={(v) => updatePersona("tone", v)}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {(["formal","casual","friendly","professional"] as const).map((tone) => (
+                    <SelectItem key={tone} value={tone}>{t(`tones.${tone}`)}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label>{t("language")}</Label>
+              <Select value={form.persona.language} onValueChange={(v) => updatePersona("language", v)}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="zh-CN">中文（简体）</SelectItem>
+                  <SelectItem value="zh-TW">中文（繁體）</SelectItem>
+                  <SelectItem value="en-US">English</SelectItem>
+                  <SelectItem value="ja-JP">日本語</SelectItem>
+                  <SelectItem value="ko-KR">한국어</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          {/* Knowledge Bases */}
+          <div className="space-y-2">
+            <Label className="text-gray-700 dark:text-gray-300">{t("knowledgeConfig")}</Label>
+            <p className="text-xs text-gray-600 dark:text-muted-foreground">{t("knowledgeHint")}</p>
+            {kbs.length === 0
+              ? <p className="text-sm text-gray-600 dark:text-muted-foreground py-2">{t("noKnowledge")}</p>
+              : kbs.map((kb) => (
+                <div key={kb.id} className="neo-card flex items-center gap-3 rounded-lg p-3 bg-white dark:bg-slate-800/50 hover:scale-[1.01] transition-transform">
+                  <Switch id={`kb-${kb.id}`}
+                    checked={form.knowledgeBases.includes(kb.id)}
+                    onCheckedChange={() => toggleKb(kb.id)} />
+                  <Label htmlFor={`kb-${kb.id}`} className="cursor-pointer font-normal flex-1 text-gray-800 dark:text-white">
+                    {kb.name}
+                    <span className="ml-2 text-xs text-gray-600 dark:text-muted-foreground">
+                      {kb.documentCount} 文档 · {kb.chunkCount} 块
+                    </span>
+                  </Label>
+                </div>
+              ))
+            }
+          </div>
+          {/* 工作区路径 */}
+          <div className="space-y-1.5">
+            <Label className="flex items-center gap-1.5">
+              工作区目录
+              <span className="text-xs text-muted-foreground font-normal">（可选）</span>
+            </Label>
+            <DirectoryPicker
+              value={form.workspacePath ?? ""}
+              onChange={(p) => update("workspacePath", p)}
+              placeholder="~/projects/my-project  （留空使用默认工作区）"
+            />
+            <p className="text-xs text-muted-foreground">
+              数字人使用工具时（bash/read/write）的根目录。留空则自动创建专属工作区。
+            </p>
+          </div>
+        </TabsContent>
+
+        {/* ── 模型配置 ───────────────────────────────────── */}
+        <TabsContent value="model" className="space-y-5">
+          <div className="space-y-1.5">
+            <Label>{t("modelId")}</Label>
+            <ModelSelector providerId={form.model.provider} modelId={form.model.modelId} onChange={handleModelChange} />
+            <div className="flex flex-wrap gap-1.5 pt-1">
+              <Badge variant="secondary" className="text-xs font-normal">上下文 {fmtN(modelCaps.contextWindow)}</Badge>
+              <Badge variant="secondary" className="text-xs font-normal">输出最大 {fmtN(modelCaps.maxTokens)}</Badge>
+              {modelCaps.supportsThinking && (
+                <Badge className="text-xs font-normal bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300 border-0 hover:bg-purple-100">🧠 支持 Thinking</Badge>
+              )}
+              {!modelCaps.supportsTemperature && (
+                <Badge variant="outline" className="text-xs font-normal text-amber-600 dark:text-amber-400 border-amber-300 dark:border-amber-600">🌡 无 Temperature</Badge>
+              )}
+            </div>
+          </div>
+          {modelCaps.supportsThinking && thinkingOptions.length > 0 && (
+            <div className="space-y-1.5">
+              <Label>{t("thinkingLevel")}</Label>
+              <Select value={safeThinkingLevel} onValueChange={(v) => updateModel("thinkingLevel", v)}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {thinkingOptions.map((l) => (
+                    <SelectItem key={l} value={l}>{THINKING_LABELS[l] ?? l}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">思考深度越高，推理越准确，Token 消耗也会增加。</p>
+            </div>
+          )}
+          {modelCaps.supportsTemperature && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label>{t("temperature")}</Label>
+                <span className="text-sm tabular-nums text-muted-foreground">{form.model.temperature.toFixed(2)}</span>
+              </div>
+              <Slider min={0} max={1} step={0.01} value={[form.model.temperature]}
+                onValueChange={([v]) => updateModel("temperature", v)} />
+              <div className="flex justify-between text-[11px] text-muted-foreground px-0.5">
+                <span>精确 0.00</span><span>平衡 0.70</span><span>创意 1.00</span>
+              </div>
+            </div>
+          )}
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
+              <Label>{t("maxTokens")}</Label>
+              <span className="text-xs text-muted-foreground">上限 {fmtN(modelCaps.maxTokens)}</span>
+            </div>
+            <Input type="number" min={256} max={modelCaps.maxTokens || 200000}
+              value={form.model.maxTokens}
+              onChange={(e) => updateModel("maxTokens", Math.min(Number(e.target.value), modelCaps.maxTokens || 200000))} />
+          </div>
+        </TabsContent>
+
+        {/* ── 工具配置（card style）──────────────────────── */}
+        <TabsContent value="tools" className="space-y-3">
+          <p className="text-xs text-gray-600 dark:text-muted-foreground">
+            开启后数字人可在对话中使用对应工具。点击卡片切换。
+          </p>
+          <div className="grid grid-cols-1 gap-2">
+            {TOOL_CARDS.map(({ key, icon: Icon, color, labelKey, hintKey }) => {
+              const enabled = form.tools[key];
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => toggleTool(key)}
+                  className={cn(
+                    "flex items-center gap-4 rounded-xl p-4 text-left transition-all",
+                    enabled
+                      ? "neo-card-inset border-2 border-blue-200 bg-blue-50 dark:border-[#57BE6B]/60 dark:bg-[#57BE6B]/20 shadow-sm"
+                      : "neo-button bg-white dark:bg-transparent border border-gray-200 dark:border-border hover:border-blue-300 dark:hover:border-zinc-600 hover:scale-[1.01]",
+                  )}
+                >
+                  {/* Icon */}
+                  <div className={cn("h-10 w-10 rounded-xl flex items-center justify-center shrink-0", color)}>
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  {/* Text */}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-gray-800 dark:text-white">
+                      {t(`tools.${labelKey}` as Parameters<typeof t>[0])}
+                    </p>
+                    <p className="text-xs text-gray-600 dark:text-muted-foreground mt-0.5">
+                      {t(`tools.${hintKey}` as Parameters<typeof t>[0])}
+                    </p>
+                  </div>
+                  {/* Toggle knob */}
+                  <ToggleKnob enabled={enabled} />
+                </button>
+              );
+            })}
+
+            {/* Voice 语音功能 */}
+            <button
+              type="button"
+              onClick={() => setForm(p => ({ ...p, voice: { enabled: !p.voice.enabled } }))}
+              className={cn(
+                "flex items-center gap-4 rounded-xl p-4 text-left transition-all",
+                form.voice.enabled
+                  ? "neo-card-inset border-2 border-green-200 bg-green-50 dark:border-green-500/60 dark:bg-green-500/20 shadow-sm"
+                  : "neo-button bg-white dark:bg-transparent border border-gray-200 dark:border-border hover:border-green-300 dark:hover:border-zinc-600 hover:scale-[1.01]",
+              )}
+            >
+              <div className={cn(
+                "h-10 w-10 rounded-xl flex items-center justify-center shrink-0",
+                form.voice.enabled ? "bg-green-500 text-white" : "bg-gray-100 text-gray-500 dark:bg-muted dark:text-muted-foreground"
+              )}>
+                <Volume2 className="h-5 w-5" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-semibold text-gray-800 dark:text-white">语音功能</p>
+                <p className="text-xs text-gray-600 dark:text-muted-foreground mt-0.5">
+                  启用语音朗读功能（全局供应商在设置中配置）
+                </p>
+              </div>
+              <ToggleKnob enabled={form.voice.enabled} />
+            </button>
+          </div>
+        </TabsContent>
+
+        {/* ── Skills 管理 ────────────────────────────────── */}
+        <TabsContent value="skills" className="space-y-3">
+          <div className="neo-card flex items-start gap-3 rounded-xl border-2 border-purple-200 dark:border-purple-800 bg-purple-50 dark:bg-purple-900/20 p-4">
+            <div className="flex-1">
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                Skills 功能允许agent使用自定义工具和能力。
+              </p>
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      <div className="mt-6 flex justify-end">
+        <Button type="submit" disabled={saving || !form.name.trim()} className="neo-button bg-gradient-to-r from-blue-500 to-indigo-500 dark:from-cyan-600 dark:to-blue-600 hover:from-blue-600 hover:to-indigo-600 dark:hover:from-cyan-500 dark:hover:to-blue-500 text-white">
+          {saving ? tc("loading") : (submitLabel ?? tc("save"))}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+function fmtN(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K`;
+  return String(n);
+}
+
+/** 统一风格的滑块开关指示器 */
+function ToggleKnob({ enabled, color = "default" }: { enabled: boolean; color?: "default" | "green" }) {
+  const onBg = color === "green" ? "bg-[#57BE6B]" : "bg-[#57BE6B]";
+  return (
+    <div className={cn(
+      "h-[22px] w-10 rounded-full transition-colors duration-200 shrink-0 relative",
+      enabled ? onBg : "bg-zinc-300 dark:bg-zinc-600",
+    )}>
+      <div className={cn(
+        "absolute top-[3px] h-4 w-4 rounded-full bg-white shadow-md transition-transform duration-200",
+        enabled ? "translate-x-[19px]" : "translate-x-[3px]",
+      )} />
+    </div>
+  );
+}
+
+// ─── AgentSkillToggleList — only enable/disable, no install ──────────────────
+function AgentSkillToggleList({
+  enabledSkills, onChange,
+}: { enabledSkills: string[]; onChange: (s: string[]) => void }) {
+  const [installed, setInstalled] = useState<{ name: string; description: string }[]>([]);
+  useEffect(() => {
+    fetch("/api/skills").then(r => r.json()).then(setInstalled).catch(() => {});
+  }, []);
+
+  if (installed.length === 0) {
+    return (
+      <div className="neo-card rounded-xl border-2 border-dashed border-gray-300 dark:border-slate-700 p-6 text-center text-sm text-gray-600 dark:text-muted-foreground bg-white dark:bg-slate-800/30">
+        还没有安装任何 Skill。前往
+        <Link href="/zh/settings" className="underline mx-1 text-purple-600 dark:text-purple-400">系统设置 → Skills 管理</Link>
+        安装。
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {installed.map((skill) => {
+        const enabled = enabledSkills.includes(skill.name);
+        return (
+          <button key={skill.name} type="button"
+            onClick={() => onChange(enabled ? enabledSkills.filter(s => s !== skill.name) : [...enabledSkills, skill.name])}
+            className={cn(
+              "w-full flex items-center gap-3 rounded-xl p-3.5 text-left transition-all",
+              enabled
+                ? "neo-card-inset border-2 border-blue-200 bg-blue-50 dark:border-[#57BE6B]/60 dark:bg-[#57BE6B]/20 shadow-sm"
+                : "neo-button bg-white dark:bg-transparent border border-gray-200 dark:border-border hover:border-blue-300 dark:hover:border-zinc-600 hover:scale-[1.01]",
+            )}>
+            <div className={cn(
+              "h-5 w-5 rounded-full shrink-0 flex items-center justify-center transition-all",
+              enabled ? "bg-blue-500 dark:bg-[#57BE6B]" : "bg-gray-200 dark:bg-zinc-600 border-2 border-gray-300 dark:border-zinc-500",
+            )}>
+              {enabled && <Check className="h-3 w-3 text-white stroke-[3]" />}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-mono text-sm font-medium text-gray-800 dark:text-white">{skill.name}</p>
+              <p className="text-xs text-gray-600 dark:text-muted-foreground mt-0.5 truncate">{skill.description || "暂无描述"}</p>
+            </div>
+            <ToggleKnob enabled={enabled} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}