@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/settings/McpSkillRow.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Trash2, Pencil, Loader2, AlertCircle } from 'lucide-react';
+import { Toggle } from './Primitives';
+import dynamic from 'next/dynamic';
+import type { SkillInfo } from './types';
+
+const MarkdownView = dynamic(() => import('@/components/MarkdownView'), { ssr: false });
+
+/** Strip YAML frontmatter (first `---` … `---` block) from markdown content. */
+function stripFrontmatter(content: string): string {
+  if (!content.startsWith('---')) return content;
+  const end = content.indexOf('\n---', 3);
+  if (end === -1) return content;
+  return content.slice(end + 4).replace(/^\n+/, '');
+}
+
+interface SkillRowProps {
+  skill: SkillInfo;
+  expanded: boolean;
+  onExpand: (name: string) => void;
+  onToggle: (name: string, enabled: boolean) => void;
+  onDelete: (name: string) => void;
+  onEditStart: (name: string) => void;
+  onEditSave: (name: string) => void;
+  onEditCancel: () => void;
+  editing: string | null;
+  editContent: string;
+  setEditContent: (v: string) => void;
+  editError: string;
+  saving: boolean;
+  fullContent: Record<string, string>;
+  loadingContent: string | null;
+  loadErrors: Record<string, string>;
+  m: Record<string, any> | undefined;
+}
+
+export default function SkillRow({
+  skill, expanded, onExpand, onToggle, onDelete,
+  onEditStart, onEditSave, onEditCancel,
+  editing, editContent, setEditContent, editError, saving,
+  fullContent, loadingContent, loadErrors, m,
+}: SkillRowProps) {
+  return (
+    <div className="border border-border rounded-lg overflow-hidden">
+      <div
+        className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"
+        onClick={() => onExpand(skill.name)}
+      >
+        {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+        <span className="text-xs font-medium flex-1">{skill.name}</span>
+        <span className={`text-2xs px-1.5 py-0.5 rounded ${
+          skill.source === 'builtin' ? 'bg-muted text-muted-foreground' : 'bg-[var(--amber-subtle)] text-[var(--amber-text)]'
+        }`}>
+          {skill.source === 'builtin' ? (m?.skillBuiltin ?? 'Built-in') : (m?.skillUser ?? 'Custom')}
+        </span>
+        <Toggle size="sm" checked={skill.enabled} onClick={(e: React.MouseEvent) => { e.stopPropagation(); onToggle(skill.name, !skill.enabled); }} />
+      </div>
+
+      {expanded && (
+        <div className="px-3 py-2 border-t border-border text-xs space-y-2 bg-muted/20">
+          <p className="text-muted-foreground">{skill.description || 'No description'}</p>
+          <p className="text-muted-foreground font-mono text-2xs">{skill.path}</p>
+
+          {loadingContent === skill.name ? (
+            <div className="flex items-center gap-1.5 text-muted-foreground">
+              <Loader2 size={10} className="animate-spin" />
+              <span className="text-2xs">Loading...</span>
+            </div>
+          ) : fullContent[skill.name] ? (
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between">
+                <span className="text-2xs text-muted-foreground font-medium">{m?.skillContent ?? 'Content'}</span>
+                <div className="flex items-center gap-2">
+                  {skill.editable && editing !== skill.name && (
+                    <button
+                      onClick={() => onEditStart(skill.name)}
+                      className="flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <Pencil size={10} />
+                      {m?.editSkill ?? 'Edit'}
+                    </button>
+                  )}
+                  {skill.editable && (
+                    <button
+                      onClick={() => onDelete(skill.name)}
+                      className="flex items-center gap-1 text-2xs text-destructive hover:underline"
+                    >
+                      <Trash2 size={10} />
+                      {m?.deleteSkill ?? 'Delete'}
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {editing === skill.name ? (
+                <div className="space-y-1.5">
+                  <textarea
+                    value={editContent}
+                    onChange={e => setEditContent(e.target.value)}
+                    rows={Math.min(20, (editContent.match(/\n/g) || []).length + 3)}
+                    className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y font-mono"
+                  />
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => onEditSave(skill.name)}
+                      disabled={saving}
+                      className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors bg-[var(--amber)] text-[var(--amber-foreground)]"
+                    >
+                      {saving && <Loader2 size={10} className="animate-spin" />}
+                      {m?.saveSkill ?? 'Save'}
+                    </button>
+                    <button
+                      onClick={onEditCancel}
+                      className="px-2.5 py-1 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {m?.cancelSkill ?? 'Cancel'}
+                    </button>
+                  </div>
+                  {editError && (
+                    <p className="text-2xs text-destructive flex items-center gap-1">
+                      <AlertCircle size={10} />
+                      {editError}
+                    </p>
+                  )}
+                </div>
+              ) : (
+                <div className="w-full rounded-md border border-border bg-background/50 max-h-[300px] overflow-y-auto px-2.5 py-1.5 text-xs [&_.prose]:max-w-none [&_.prose]:text-xs [&_h1]:text-sm [&_h2]:text-xs [&_h3]:text-xs [&_pre]:text-2xs [&_code]:text-2xs">
+                  <MarkdownView content={stripFrontmatter(fullContent[skill.name])} />
+                </div>
+              )}
+            </div>
+          ) : loadErrors[skill.name] ? (
+            <p className="text-2xs text-destructive flex items-center gap-1">
+              <AlertCircle size={10} />
+              {loadErrors[skill.name]}
+            </p>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}

package/_standalone/components/settings/McpSkillsSection.tsx

@@ -0,0 +1,460 @@
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  Loader2, ChevronDown, ChevronRight,
+  Plus, X, Search, Copy,
+} from 'lucide-react';
+import { toast } from '@/lib/toast';
+import { apiFetch } from '@/lib/api';
+import { useMcpDataOptional } from '@/lib/stores/mcp-store';
+import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
+import { copyToClipboard } from '@/lib/clipboard';
+import type { SkillInfo, McpSkillsSectionProps } from './types';
+import SkillRow from './McpSkillRow';
+import SkillCreateForm from './McpSkillCreateForm';
+import CustomSelect from '@/components/CustomSelect';
+import type { SelectItem } from '@/components/CustomSelect';
+
+/* ── Skills Section ────────────────────────────────────────────── */
+
+export default function SkillsSection({ t }: McpSkillsSectionProps) {
+  const m = t.settings?.mcp;
+  const mcp = useMcpDataOptional();
+  const [skills, setSkills] = useState<SkillInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const [adding, setAdding] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [createError, setCreateError] = useState('');
+
+  const [search, setSearch] = useState('');
+  const [builtinCollapsed, setBuiltinCollapsed] = useState(true);
+  const [editing, setEditing] = useState<string | null>(null);
+  const [editContent, setEditContent] = useState('');
+  const [editError, setEditError] = useState('');
+  const [fullContent, setFullContent] = useState<Record<string, string>>({});
+  const [loadingContent, setLoadingContent] = useState<string | null>(null);
+  const [loadErrors, setLoadErrors] = useState<Record<string, string>>({});
+  const [switchingLang, setSwitchingLang] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+
+  const fetchSkills = useCallback(async () => {
+    try {
+      const data = await apiFetch<{ skills: SkillInfo[] }>('/api/skills');
+      setSkills(data.skills);
+      setLoadErrors({});
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Failed to load skills';
+      console.error('fetchSkills error:', msg);
+      setLoadErrors(prev => ({ ...prev, _root: msg }));
+    }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { fetchSkills(); }, [fetchSkills]);
+
+  // Filtered + grouped
+  const filtered = useMemo(() => {
+    if (!search) return skills;
+    const q = search.toLowerCase();
+    return skills.filter(s => s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q));
+  }, [skills, search]);
+
+  const customSkills = useMemo(() => filtered.filter(s => s.source === 'user'), [filtered]);
+  const builtinSkills = useMemo(() => filtered.filter(s => s.source === 'builtin'), [filtered]);
+
+  // ── Handlers ──
+
+  const handleToggle = async (name: string, enabled: boolean) => {
+    if (mcp) {
+      await mcp.toggleSkill(name, enabled);
+      setSkills(prev => prev.map(s => s.name === name ? { ...s, enabled } : s));
+      return;
+    }
+    try {
+      await apiFetch('/api/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'toggle', name, enabled }),
+      });
+      setSkills(prev => prev.map(s => s.name === name ? { ...s, enabled } : s));
+      setLoadErrors(prev => { const next = { ...prev }; delete next[name]; return next; });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Failed to toggle skill';
+      console.error('handleToggle error:', msg);
+      setLoadErrors(prev => ({ ...prev, [name]: msg }));
+    }
+  };
+
+  const handleDelete = (name: string) => {
+    setDeleteTarget(name);
+  };
+
+  const doDelete = async (name: string) => {
+    try {
+      await apiFetch('/api/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'delete', name }),
+      });
+      setFullContent(prev => { const n = { ...prev }; delete n[name]; return n; });
+      if (editing === name) setEditing(null);
+      if (expanded === name) setExpanded(null);
+      setLoadErrors(prev => { const next = { ...prev }; delete next[name]; return next; });
+      fetchSkills();
+      window.dispatchEvent(new Event('mindos:skills-changed'));
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Failed to delete skill';
+      console.error('handleDelete error:', msg);
+      setLoadErrors(prev => ({ ...prev, [name]: msg }));
+    }
+  };
+
+  const loadFullContent = async (name: string) => {
+    if (fullContent[name]) return;
+    setLoadingContent(name);
+    try {
+      const data = await apiFetch<{ content: string }>('/api/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'read', name }),
+      });
+      setFullContent(prev => ({ ...prev, [name]: data.content }));
+      setLoadErrors(prev => { const n = { ...prev }; delete n[name]; return n; });
+    } catch (err: unknown) {
+      setLoadErrors(prev => ({ ...prev, [name]: err instanceof Error ? err.message : 'Failed to load skill content' }));
+    } finally {
+      setLoadingContent(null);
+    }
+  };
+
+  const handleExpand = (name: string) => {
+    const next = expanded === name ? null : name;
+    setExpanded(next);
+    if (next) loadFullContent(name);
+    if (editing && editing !== name) setEditing(null);
+  };
+
+  const handleEditStart = (name: string) => {
+    setEditing(name);
+    setEditContent(fullContent[name] || '');
+    setEditError('');
+  };
+
+  const handleEditSave = async (name: string) => {
+    setSaving(true);
+    setEditError('');
+    try {
+      await apiFetch('/api/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'update', name, content: editContent }),
+      });
+      setFullContent(prev => ({ ...prev, [name]: editContent }));
+      setEditing(null);
+      fetchSkills();
+      window.dispatchEvent(new Event('mindos:skills-changed'));
+    } catch (err: unknown) {
+      setEditError(err instanceof Error ? err.message : 'Failed to save skill');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleEditCancel = () => {
+    setEditing(null);
+    setEditContent('');
+    setEditError('');
+  };
+
+  const handleCreate = async (name: string, content: string) => {
+    if (!name) return;
+    setSaving(true);
+    setCreateError('');
+    try {
+      await apiFetch('/api/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'create', name, content }),
+      });
+      setAdding(false);
+      fetchSkills();
+      window.dispatchEvent(new Event('mindos:skills-changed'));
+    } catch (err: unknown) {
+      setCreateError(err instanceof Error ? err.message : 'Failed to create skill');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-4">
+        <Loader2 size={16} className="animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  // ── Render ──
+
+  return (
+    <div className="space-y-3 pt-2">
+      {/* Search */}
+      <div className="relative">
+        <Search size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <input
+          type="text"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder={m?.searchSkills ?? 'Search skills...'}
+          className="w-full pl-7 pr-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+        {search && (
+          <button onClick={() => setSearch('')} className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
+            <X size={10} />
+          </button>
+        )}
+      </div>
+
+      {/* Skill language switcher */}
+      {(() => {
+        const mindosEnabled = skills.find(s => s.name === 'mindos')?.enabled ?? true;
+        const currentLang = mindosEnabled ? 'en' : 'zh';
+        const handleLangSwitch = async (lang: 'en' | 'zh') => {
+          if (lang === currentLang || switchingLang) return;
+          setSwitchingLang(true);
+          try {
+            if (lang === 'en') {
+              await handleToggle('mindos', true);
+              await handleToggle('mindos-zh', false);
+            } else {
+              await handleToggle('mindos-zh', true);
+              await handleToggle('mindos', false);
+            }
+          } catch (err) {
+            console.error('Lang switch failed:', err);
+          } finally {
+            setSwitchingLang(false);
+          }
+        };
+        return (
+          <div className="flex items-center gap-2 text-xs">
+            <span className="text-muted-foreground">{m?.skillLanguage ?? 'Skill Language'}</span>
+            <div className="flex rounded-md border border-border overflow-hidden">
+              <button
+                onClick={() => handleLangSwitch('en')}
+                disabled={switchingLang}
+                className={`px-2.5 py-1 text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
+                  currentLang === 'en' ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium' : 'text-muted-foreground hover:bg-muted'
+                }`}
+              >
+                {m?.skillLangEn ?? 'English'}
+              </button>
+              <button
+                onClick={() => handleLangSwitch('zh')}
+                disabled={switchingLang}
+                className={`px-2.5 py-1 text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-l border-border ${
+                  currentLang === 'zh' ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium' : 'text-muted-foreground hover:bg-muted'
+                }`}
+              >
+                {m?.skillLangZh ?? '中文'}
+              </button>
+            </div>
+          </div>
+        );
+      })()}
+
+      {/* Empty search result */}
+      {filtered.length === 0 && search && (
+        <p className="text-xs text-muted-foreground text-center py-3">
+          {m?.noSkillsMatch ? m.noSkillsMatch(search) : `No skills match "${search}"`}
+        </p>
+      )}
+
+      {/* Custom group */}
+      {customSkills.length > 0 && (
+        <div className="space-y-1.5">
+          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+            <span>{m?.customGroup ?? 'Custom'} ({customSkills.length})</span>
+          </div>
+          <div className="space-y-1.5">
+            {customSkills.map(skill => (
+              <SkillRow
+                key={skill.name}
+                skill={skill}
+                expanded={expanded === skill.name}
+                onExpand={handleExpand}
+                onToggle={handleToggle}
+                onDelete={handleDelete}
+                onEditStart={handleEditStart}
+                onEditSave={handleEditSave}
+                onEditCancel={handleEditCancel}
+                editing={editing}
+                editContent={editContent}
+                setEditContent={setEditContent}
+                editError={editError}
+                saving={saving}
+                fullContent={fullContent}
+                loadingContent={loadingContent}
+                loadErrors={loadErrors}
+                m={m}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Built-in group */}
+      {builtinSkills.length > 0 && (
+        <div className="space-y-1.5">
+          <div
+            className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+            onClick={() => setBuiltinCollapsed(!builtinCollapsed)}
+          >
+            {builtinCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+            <span>{m?.builtinGroup ?? 'Built-in'} ({builtinSkills.length})</span>
+          </div>
+          {!builtinCollapsed && (
+            <div className="space-y-1.5">
+              {builtinSkills.map(skill => (
+                <SkillRow
+                  key={skill.name}
+                  skill={skill}
+                  expanded={expanded === skill.name}
+                  onExpand={handleExpand}
+                  onToggle={handleToggle}
+                  onDelete={handleDelete}
+                  onEditStart={handleEditStart}
+                  onEditSave={handleEditSave}
+                  onEditCancel={handleEditCancel}
+                  editing={editing}
+                  editContent={editContent}
+                  setEditContent={setEditContent}
+                  editError={editError}
+                  saving={saving}
+                  fullContent={fullContent}
+                  loadingContent={loadingContent}
+                  loadErrors={loadErrors}
+                  m={m}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Add skill */}
+      {adding ? (
+        <SkillCreateForm
+          onSave={handleCreate}
+          onCancel={() => { setAdding(false); setCreateError(''); }}
+          saving={saving}
+          error={createError}
+          m={m}
+        />
+      ) : (
+        <button
+          onClick={() => setAdding(true)}
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <Plus size={12} />
+          {m?.addSkill ?? '+ Add Skill'}
+        </button>
+      )}
+
+      {/* CLI install hint with agent selector */}
+      <SkillCliHint
+        agents={mcp?.agents ?? []}
+        skillName={(() => {
+          const mindosEnabled = skills.find(s => s.name === 'mindos')?.enabled ?? true;
+          return mindosEnabled ? 'mindos' : 'mindos-zh';
+        })()}
+        m={m}
+      />
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        title="Delete skill?"
+        message={deleteTarget ? (m?.skillDeleteConfirm?.(deleteTarget) ?? `Delete skill "${deleteTarget}"?`) : ''}
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        variant="destructive"
+        onConfirm={async () => {
+          const name = deleteTarget!;
+          setDeleteTarget(null);
+          await doDelete(name);
+        }}
+        onCancel={() => setDeleteTarget(null)}
+      />
+    </div>
+  );
+}
+
+/* ── Skill CLI Install Hint ── */
+
+function SkillCliHint({ agents, skillName, m }: {
+  agents: { key: string; name: string; present?: boolean; installed?: boolean }[];
+  skillName: string;
+  m: Record<string, any> | undefined;
+}) {
+  const [selectedAgent, setSelectedAgent] = useState('claude-code');
+  const cmd = `npx skills add GeminiLight/MindOS --skill ${skillName} -a ${selectedAgent} -g -y`;
+  const skillPath = `~/.agents/skills/${skillName}/SKILL.md`;
+
+  const handleCopy = async () => {
+    const ok = await copyToClipboard(cmd);
+    if (ok) toast.copy();
+  };
+
+  // Group agents: connected first, then detected, then not found
+  const connected = agents.filter(a => a.present && a.installed);
+  const detected = agents.filter(a => a.present && !a.installed);
+  const notFound = agents.filter(a => !a.present);
+
+  return (
+    <div className="border-t border-border pt-3 mt-3 space-y-2.5">
+      <p className="text-2xs font-medium text-muted-foreground">
+        {m?.cliInstallHint ?? 'Install via CLI:'}
+      </p>
+
+      {/* Agent selector */}
+      <CustomSelect
+        value={selectedAgent}
+        onChange={setSelectedAgent}
+        size="sm"
+        options={[
+          ...(connected.length > 0 ? [{
+            label: m?.connectedGroup ?? 'Connected',
+            options: connected.map(a => ({ value: a.key, label: a.name })),
+          }] : []),
+          ...(detected.length > 0 ? [{
+            label: m?.detectedGroup ?? 'Detected',
+            options: detected.map(a => ({ value: a.key, label: a.name })),
+          }] : []),
+          ...(notFound.length > 0 ? [{
+            label: m?.notFoundGroup ?? 'Not Installed',
+            options: notFound.map(a => ({ value: a.key, label: a.name })),
+          }] : []),
+        ] as SelectItem[]}
+      />
+
+      {/* Command */}
+      <div className="flex items-center gap-1.5">
+        <code className="flex-1 text-[10px] font-mono bg-muted/50 border border-border rounded-lg px-2.5 py-2 text-muted-foreground select-all overflow-x-auto whitespace-nowrap">
+          {cmd}
+        </code>
+        <button onClick={handleCopy}
+          className="p-1.5 rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
+          <Copy size={11} />
+        </button>
+      </div>
+
+      {/* Path hint */}
+      <p className="text-2xs text-muted-foreground">
+        {m?.skillPathHint ?? 'Skill files installed at:'}{' '}
+        <code className="font-mono text-[10px] bg-muted px-1 py-0.5 rounded">{skillPath}</code>
+      </p>
+    </div>
+  );
+}