@aion0/forge 0.6.1 → 0.6.3

package/.forge/worktrees/pipeline-ecd7cb0f/components/SkillsPanel.tsx

@@ -1,969 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
-import { useSidebarResize } from '@/hooks/useSidebarResize';
-
-const PluginsPanel = lazy(() => import('./PluginsPanel'));
-
-type ItemType = 'skill' | 'command';
-
-interface Skill {
-  name: string;
-  type: ItemType;
-  displayName: string;
-  description: string;
-  author: string;
-  version: string;
-  tags: string[];
-  score: number;
-  rating: number;
-  sourceUrl: string;
-  installedGlobal: boolean;
-  installedVersion: string;
-  hasUpdate: boolean;
-  installedProjects: string[];
-  deletedRemotely: boolean;
-}
-
-interface ProjectInfo {
-  path: string;
-  name: string;
-}
-
-// ─── Skill File Tree (collapsible directories) ──────────
-
-interface TreeNode {
-  name: string;
-  path: string;
-  type: 'file' | 'dir';
-  children: TreeNode[];
-}
-
-function buildTree(files: { name: string; path: string; type: string }[]): TreeNode[] {
-  const root: TreeNode[] = [];
-  const dirMap = new Map<string, TreeNode>();
-
-  for (const f of files) {
-    const parts = f.path.split('/');
-    if (f.type === 'dir') {
-      const node: TreeNode = { name: f.name.replace(/\/$/, ''), path: f.path, type: 'dir', children: [] };
-      dirMap.set(f.path, node);
-      // Find parent
-      const parentPath = parts.slice(0, -1).join('/');
-      const parent = parentPath ? dirMap.get(parentPath) : null;
-      if (parent) parent.children.push(node);
-      else root.push(node);
-    } else {
-      const node: TreeNode = { name: f.name, path: f.path, type: 'file', children: [] };
-      const parentPath = parts.slice(0, -1).join('/');
-      const parent = parentPath ? dirMap.get(parentPath) : null;
-      if (parent) parent.children.push(node);
-      else root.push(node);
-    }
-  }
-  return root;
-}
-
-function SkillFileTree({ files, activeFile, onSelect }: {
-  files: { name: string; path: string; type: string }[];
-  activeFile: string | null;
-  onSelect: (path: string) => void;
-}) {
-  const tree = buildTree(files);
-  return <TreeNodeList nodes={tree} depth={0} activeFile={activeFile} onSelect={onSelect} />;
-}
-
-function TreeNodeList({ nodes, depth, activeFile, onSelect }: {
-  nodes: TreeNode[]; depth: number; activeFile: string | null; onSelect: (path: string) => void;
-}) {
-  const [expanded, setExpanded] = useState<Set<string>>(new Set(
-    // Auto-expand first level
-    nodes.filter(n => n.type === 'dir').map(n => n.path)
-  ));
-
-  const toggle = (path: string) => {
-    setExpanded(prev => {
-      const next = new Set(prev);
-      next.has(path) ? next.delete(path) : next.add(path);
-      return next;
-    });
-  };
-
-  return (
-    <>
-      {nodes.map(node => (
-        node.type === 'dir' ? (
-          <div key={node.path}>
-            <button
-              onClick={() => toggle(node.path)}
-              className="w-full text-left px-1 py-0.5 text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-0.5"
-              style={{ paddingLeft: `${depth * 10 + 4}px` }}
-            >
-              <span className="text-[8px]">{expanded.has(node.path) ? '▼' : '▶'}</span>
-              <span>📁 {node.name}</span>
-            </button>
-            {expanded.has(node.path) && (
-              <TreeNodeList nodes={node.children} depth={depth + 1} activeFile={activeFile} onSelect={onSelect} />
-            )}
-          </div>
-        ) : (
-          <button
-            key={node.path}
-            onClick={() => onSelect(node.path)}
-            className={`w-full text-left py-0.5 text-[10px] truncate ${
-              activeFile === node.path
-                ? 'bg-[var(--accent)]/15 text-[var(--accent)]'
-                : 'text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]'
-            }`}
-            style={{ paddingLeft: `${depth * 10 + 14}px` }}
-            title={node.path}
-          >
-            {node.name}
-          </button>
-        )
-      ))}
-    </>
-  );
-}
-
-export default function SkillsPanel({ projectFilter }: { projectFilter?: string }) {
-  const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 224, minWidth: 140, maxWidth: 400 });
-  const [skills, setSkills] = useState<Skill[]>([]);
-  const [projects, setProjects] = useState<ProjectInfo[]>([]);
-  const [syncing, setSyncing] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [installTarget, setInstallTarget] = useState<{ skill: string; show: boolean }>({ skill: '', show: false });
-  const [typeFilter, setTypeFilter] = useState<'all' | 'skill' | 'command' | 'local' | 'rules' | 'plugins'>('all');
-  const [localItems, setLocalItems] = useState<{ name: string; type: string; scope: string; fileCount: number; projectPath?: string }[]>([]);
-  // Rules (CLAUDE.md templates)
-  const [rulesTemplates, setRulesTemplates] = useState<{ id: string; name: string; description: string; tags: string[]; builtin: boolean; isDefault: boolean; content: string }[]>([]);
-  const [rulesProjects, setRulesProjects] = useState<{ name: string; path: string }[]>([]);
-  const [rulesSelectedTemplate, setRulesSelectedTemplate] = useState<string | null>(null);
-  const [rulesEditing, setRulesEditing] = useState(false);
-  const [rulesEditId, setRulesEditId] = useState('');
-  const [rulesEditName, setRulesEditName] = useState('');
-  const [rulesEditDesc, setRulesEditDesc] = useState('');
-  const [rulesEditContent, setRulesEditContent] = useState('');
-  const [rulesEditDefault, setRulesEditDefault] = useState(false);
-  const [rulesShowNew, setRulesShowNew] = useState(false);
-  const [rulesBatchProjects, setRulesBatchProjects] = useState<Set<string>>(new Set());
-  const [searchQuery, setSearchQuery] = useState('');
-  const [collapsedLocalSections, setCollapsedLocalSections] = useState<Set<string>>(new Set());
-  const [expandedSkill, setExpandedSkill] = useState<string | null>(null);
-  const [skillFiles, setSkillFiles] = useState<{ name: string; path: string; type: string }[]>([]);
-  const [activeFile, setActiveFile] = useState<string | null>(null);
-  const [fileContent, setFileContent] = useState<string>('');
-
-  const fetchSkills = useCallback(async () => {
-    try {
-      const [registryRes, localRes] = await Promise.all([
-        fetch('/api/skills'),
-        fetch('/api/skills/local?action=scan&all=1'),
-      ]);
-      const data = await registryRes.json();
-      setSkills(data.skills || []);
-      setProjects(data.projects || []);
-      const localData = await localRes.json();
-      // Filter out items already in registry
-      const registryNames = new Set((data.skills || []).map((s: any) => s.name));
-      setLocalItems((localData.items || []).filter((i: any) => !registryNames.has(i.name)));
-    } catch {}
-    setLoading(false);
-  }, []);
-
-  useEffect(() => { fetchSkills(); }, [fetchSkills]);
-
-  const fetchRules = useCallback(async () => {
-    try {
-      const res = await fetch('/api/claude-templates?action=list');
-      const data = await res.json();
-      setRulesTemplates(data.templates || []);
-      setRulesProjects(data.projects || []);
-    } catch {}
-  }, []);
-
-  useEffect(() => { if (typeFilter === 'rules') fetchRules(); }, [typeFilter, fetchRules]);
-
-  const saveRule = async () => {
-    if (!rulesEditId || !rulesEditName || !rulesEditContent) return;
-    await fetch('/api/claude-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'save', id: rulesEditId, name: rulesEditName, description: rulesEditDesc, tags: [], content: rulesEditContent, isDefault: rulesEditDefault }),
-    });
-    setRulesEditing(false);
-    setRulesShowNew(false);
-    fetchRules();
-  };
-
-  const deleteRule = async (id: string) => {
-    if (!confirm(`Delete template "${id}"?`)) return;
-    await fetch('/api/claude-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'delete', id }),
-    });
-    if (rulesSelectedTemplate === id) setRulesSelectedTemplate(null);
-    fetchRules();
-  };
-
-  const toggleDefault = async (id: string, isDefault: boolean) => {
-    await fetch('/api/claude-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'set-default', id, isDefault }),
-    });
-    fetchRules();
-  };
-
-  const batchInject = async (templateId: string) => {
-    const projects = [...rulesBatchProjects];
-    if (!projects.length) return;
-    await fetch('/api/claude-templates', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'inject', templateId, projects }),
-    });
-    setRulesBatchProjects(new Set());
-    fetchRules();
-  };
-
-  const [syncProgress, setSyncProgress] = useState('');
-  const sync = async () => {
-    setSyncing(true);
-    setSyncProgress('');
-    try {
-      let enrichedTotal = 0;
-      let total = 0;
-      // Loop: each call enriches a batch of info.json, continue until all done
-      for (let round = 0; round < 20; round++) { // safety limit
-        setSyncProgress(total > 0 ? `${Math.min(enrichedTotal, total)}/${total}` : '');
-        const res = await fetch('/api/skills', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ action: 'sync' }),
-        });
-        const data = await res.json();
-        if (data.error) {
-          alert(`Sync error: ${data.error}`);
-          break;
-        }
-        total = data.total || 0;
-        enrichedTotal += data.enriched || 0;
-        await fetchSkills();
-        // If remaining is 0 or enriched nothing, we're done
-        if (!data.remaining || data.enriched === 0) break;
-      }
-    } catch (err: any) {
-      alert(`Sync failed: ${err.message || 'Network error'}`);
-    } finally {
-      setSyncing(false);
-      setSyncProgress('');
-    }
-  };
-
-  const install = async (name: string, target: string) => {
-    await fetch('/api/skills', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'install', name, target }),
-    });
-    setInstallTarget({ skill: '', show: false });
-    fetchSkills();
-    alert(`"${name}" installed. Restart Claude in terminal to apply.`);
-  };
-
-  const toggleDetail = async (name: string) => {
-    if (expandedSkill === name) {
-      setExpandedSkill(null);
-      return;
-    }
-    setExpandedSkill(name);
-    setSkillFiles([]);
-    setActiveFile(null);
-    setFileContent('');
-    // Fetch file list from GitHub API
-    try {
-      const res = await fetch(`/api/skills?action=files&name=${encodeURIComponent(name)}`);
-      const data = await res.json();
-      const files = data.files || [];
-      setSkillFiles(files);
-      // Auto-select skill.md if exists, otherwise first file
-      const defaultFile = files.find((f: any) => f.name === 'skill.md') || files.find((f: any) => f.type === 'file');
-      if (defaultFile) loadFile(name, defaultFile.path);
-    } catch { setSkillFiles([]); }
-  };
-
-  const loadFile = async (skillName: string, filePath: string, isLocalItem?: boolean, localType?: string, localProject?: string) => {
-    setActiveFile(filePath);
-    setFileContent('Loading...');
-    try {
-      let res;
-      if (isLocalItem) {
-        const projectParam = localProject ? `&project=${encodeURIComponent(localProject)}` : '';
-        res = await fetch(`/api/skills/local?action=read&name=${encodeURIComponent(skillName)}&type=${localType || 'command'}&path=${encodeURIComponent(filePath)}${projectParam}`);
-      } else {
-        res = await fetch(`/api/skills?action=file&name=${encodeURIComponent(skillName)}&path=${encodeURIComponent(filePath)}`);
-      }
-      const data = await res.json();
-      setFileContent(data.content || '(Empty)');
-    } catch { setFileContent('(Failed to load)'); }
-  };
-
-  const uninstall = async (name: string, target: string) => {
-    await fetch('/api/skills', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'uninstall', name, target }),
-    });
-    fetchSkills();
-  };
-
-  // Filter by project, type, and search
-  const q = searchQuery.toLowerCase();
-  const filtered = (typeFilter === 'local' ? [] : skills
-    .filter(s => projectFilter ? (s.installedGlobal || s.installedProjects.includes(projectFilter)) : true)
-    .filter(s => typeFilter === 'all' ? true : s.type === typeFilter)
-    .filter(s => !q || s.name.toLowerCase().includes(q) || s.displayName.toLowerCase().includes(q) || s.description.toLowerCase().includes(q)
-      || s.author.toLowerCase().includes(q) || s.tags.some(t => t.toLowerCase().includes(q)))
-  ).sort((a, b) => a.displayName.localeCompare(b.displayName));
-
-  const filteredLocal = localItems
-    .filter(item => typeFilter === 'local' || typeFilter === 'all' || item.type === typeFilter)
-    .filter(item => !q || item.name.toLowerCase().includes(q))
-    .sort((a, b) => a.name.localeCompare(b.name));
-
-  // Group local items by scope
-  const localGroups = new Map<string, typeof localItems>();
-  for (const item of filteredLocal) {
-    const key = item.scope;
-    if (!localGroups.has(key)) localGroups.set(key, []);
-    localGroups.get(key)!.push(item);
-  }
-
-  const toggleLocalSection = (section: string) => {
-    setCollapsedLocalSections(prev => {
-      const next = new Set(prev);
-      if (next.has(section)) next.delete(section);
-      else next.add(section);
-      return next;
-    });
-  };
-
-  const skillCount = skills.filter(s => s.type === 'skill').length;
-  const commandCount = skills.filter(s => s.type === 'command').length;
-  const localCount = localItems.length;
-
-  if (loading) {
-    return <div className="p-4 text-xs text-[var(--text-secondary)]">Loading skills...</div>;
-  }
-
-  return (
-    <div className="flex-1 flex flex-col min-h-0">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--border)] shrink-0">
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-[var(--text-primary)]">Marketplace</span>
-          <div className="flex items-center bg-[var(--bg-tertiary)] rounded p-0.5">
-            {([['all', `All (${skills.length})`], ['skill', `Skills (${skillCount})`], ['command', `Commands (${commandCount})`], ['local', `Local (${localCount})`], ['rules', 'Rules'], ['plugins', 'Plugins']] as const).map(([value, label]) => (
-              <button
-                key={value}
-                onClick={() => setTypeFilter(value)}
-                className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                  typeFilter === value
-                    ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
-                    : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-                }`}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-        </div>
-        <span className="text-[8px] px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-400">Claude Code</span>
-        <button
-          onClick={sync}
-          disabled={syncing}
-          className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
-        >
-          {syncing ? `Syncing${syncProgress ? ` ${syncProgress}` : '...'}` : 'Sync'}
-        </button>
-      </div>
-      {/* Search — hide on rules tab */}
-      {typeFilter !== 'rules' && typeFilter !== 'plugins' && <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0">
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={e => setSearchQuery(e.target.value)}
-          placeholder="Search skills & commands..."
-          className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-[10px] text-[var(--text-primary)] placeholder:text-[var(--text-secondary)] focus:outline-none focus:border-[var(--accent)]"
-        />
-      </div>}
-
-      {typeFilter === 'rules' || typeFilter === 'plugins' ? null : skills.length === 0 ? (
-        <div className="flex-1 flex flex-col items-center justify-center gap-2 text-[var(--text-secondary)]">
-          <p className="text-xs">No skills yet</p>
-          <button onClick={sync} className="text-xs px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90">
-            Sync from Registry
-          </button>
-        </div>
-      ) : (
-        <div className="flex-1 flex min-h-0">
-          {/* Left: skill list */}
-          <div style={{ width: sidebarWidth }} className="overflow-y-auto shrink-0">
-            {/* Registry items */}
-            {filtered.map(skill => {
-              const isInstalled = skill.installedGlobal || skill.installedProjects.length > 0;
-              const isActive = expandedSkill === skill.name;
-              return (
-                <div
-                  key={skill.name}
-                  className={`px-3 py-2.5 border-b border-[var(--border)]/50 cursor-pointer ${
-                    isActive ? 'bg-[var(--accent)]/10 border-l-2 border-l-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] border-l-2 border-l-transparent'
-                  }`}
-                  onClick={() => toggleDetail(skill.name)}
-                >
-                  <div className="flex items-center gap-2">
-                    <span className="text-[11px] font-semibold text-[var(--text-primary)] truncate flex-1">{skill.displayName}</span>
-                    <span className="text-[8px] text-[var(--text-secondary)] font-mono shrink-0">v{skill.version}</span>
-                    {skill.rating > 0 && (
-                      <span className="text-[8px] text-[var(--yellow)] shrink-0" title={`Rating: ${skill.rating}/5`}>
-                        {'★'.repeat(Math.round(skill.rating))}{'☆'.repeat(5 - Math.round(skill.rating))}
-                      </span>
-                    )}
-                    {skill.score > 0 && !skill.rating && (
-                      <span className="text-[8px] text-[var(--text-secondary)] shrink-0">{skill.score}pt</span>
-                    )}
-                  </div>
-                  <p className="text-[9px] text-[var(--text-secondary)] mt-0.5 line-clamp-1">{skill.description}</p>
-                  <div className="flex items-center gap-1.5 mt-1">
-                    <span className={`text-[7px] px-1 rounded font-medium ${
-                      skill.type === 'skill' ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
-                    }`}>{skill.type === 'skill' ? 'SKILL' : 'CMD'}</span>
-                    <span className="text-[8px] text-[var(--text-secondary)]">{skill.author}</span>
-                    {skill.tags.slice(0, 3).map(t => (
-                      <span key={t} className="text-[7px] px-1 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">{t}</span>
-                    ))}
-                    {skill.deletedRemotely && <span className="text-[8px] text-[var(--red)] ml-auto">deleted remotely</span>}
-                    {!skill.deletedRemotely && skill.hasUpdate && <span className="text-[8px] text-[var(--yellow)] ml-auto">update</span>}
-                    {!skill.deletedRemotely && isInstalled && !skill.hasUpdate && <span className="text-[8px] text-[var(--green)] ml-auto">installed</span>}
-                  </div>
-                </div>
-              );
-            })}
-            {/* Local items — collapsible by scope group */}
-            {(typeFilter === 'all' || typeFilter === 'local') && filteredLocal.length > 0 && (
-              <>
-                {/* Local section header — collapsible */}
-                {typeFilter !== 'local' && (
-                  <button
-                    onClick={() => toggleLocalSection('__local__')}
-                    className="w-full px-3 py-1 text-[8px] text-[var(--text-secondary)] uppercase bg-[var(--bg-tertiary)] border-b border-[var(--border)]/50 flex items-center gap-1 hover:text-[var(--text-primary)]"
-                  >
-                    <span>{collapsedLocalSections.has('__local__') ? '▸' : '▾'}</span>
-                    Local ({filteredLocal.length})
-                  </button>
-                )}
-                {(typeFilter === 'local' || !collapsedLocalSections.has('__local__')) && (
-                  <>
-                    {[...localGroups.entries()].sort(([a], [b]) => a === 'global' ? -1 : b === 'global' ? 1 : a.localeCompare(b)).map(([scope, items]) => (
-                      <div key={scope}>
-                        {/* Scope group header — collapsible */}
-                        <button
-                          onClick={() => toggleLocalSection(scope)}
-                          className="w-full px-3 py-1 text-[8px] text-[var(--text-secondary)] border-b border-[var(--border)]/30 flex items-center gap-1.5 hover:bg-[var(--bg-tertiary)]"
-                        >
-                          <span className="text-[7px]">{collapsedLocalSections.has(scope) ? '▸' : '▾'}</span>
-                          <span className={scope === 'global' ? 'text-green-400' : 'text-[var(--accent)]'}>{scope}</span>
-                          <span className="text-[var(--text-secondary)]">({items.length})</span>
-                        </button>
-                        {!collapsedLocalSections.has(scope) && items.map(item => {
-                          const key = `local:${item.name}:${item.scope}`;
-                          const isActive = expandedSkill === key;
-                          const projectParam = item.projectPath ? encodeURIComponent(item.projectPath) : '';
-                          return (
-                            <div
-                              key={key}
-                              className={`px-3 py-2 border-b border-[var(--border)]/50 cursor-pointer ${
-                                isActive ? 'bg-[var(--accent)]/10 border-l-2 border-l-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] border-l-2 border-l-transparent'
-                              }`}
-                              onClick={() => {
-                                if (expandedSkill === key) { setExpandedSkill(null); return; }
-                                setExpandedSkill(key);
-                                setSkillFiles([]);
-                                setActiveFile(null);
-                                setFileContent('');
-                                const fetchUrl = `/api/skills/local?action=files&name=${encodeURIComponent(item.name)}&type=${item.type}${projectParam ? `&project=${projectParam}` : ''}`;
-                                fetch(fetchUrl)
-                                  .then(r => r.json())
-                                  .then(d => {
-                                    const files = (d.files || []).map((f: any) => ({ name: f.path.split('/').pop(), path: f.path, type: 'file' }));
-                                    setSkillFiles(files);
-                                    const first = files.find((f: any) => f.name?.endsWith('.md'));
-                                    if (first) {
-                                      setActiveFile(first.path);
-                                      fetch(`/api/skills/local?action=read&name=${encodeURIComponent(item.name)}&type=${item.type}&path=${encodeURIComponent(first.path)}${projectParam ? `&project=${projectParam}` : ''}`)
-                                        .then(r => r.json())
-                                        .then(rd => setFileContent(rd.content || ''))
-                                        .catch(() => {});
-                                    }
-                                  })
-                                  .catch(() => {});
-                              }}
-                            >
-                              <div className="flex items-center gap-2">
-                                <span className={`text-[7px] px-1 rounded font-medium ${
-                                  item.type === 'skill' ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
-                                }`}>{item.type === 'skill' ? 'S' : 'C'}</span>
-                                <span className="text-[10px] text-[var(--text-primary)] truncate flex-1">{item.name}</span>
-                                <span className="text-[8px] text-[var(--text-secondary)]">{item.fileCount}</span>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    ))}
-                  </>
-                )}
-              </>
-            )}
-          </div>
-
-          {/* Sidebar resize handle */}
-          <div
-            onMouseDown={onSidebarDragStart}
-            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
-          />
-
-          {/* Right: detail panel */}
-          <div className="flex-1 flex flex-col min-w-0">
-            {expandedSkill ? (() => {
-              const isLocal = expandedSkill.startsWith('local:');
-              // Key format: "local:<name>:<scope>" — extract name (could contain colons in scope)
-              const localParts = isLocal ? expandedSkill.slice(6).split(':') : [];
-              const itemName = isLocal ? localParts[0] : expandedSkill;
-              const localScope = isLocal ? localParts.slice(1).join(':') : '';
-              const skill = isLocal ? null : skills.find(s => s.name === expandedSkill);
-              const localItem = isLocal ? localItems.find(i => i.name === itemName && i.scope === localScope) : null;
-              if (!skill && !localItem) return null;
-              const isInstalled = skill ? (skill.installedGlobal || skill.installedProjects.length > 0) : true;
-              return (
-                <>
-                  {/* Skill header */}
-                  <div className="px-4 py-2 border-b border-[var(--border)] shrink-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm font-semibold text-[var(--text-primary)]">{skill?.displayName || localItem?.name || itemName}</span>
-                      <span className={`text-[8px] px-1.5 py-0.5 rounded font-medium ${
-                        (skill?.type || localItem?.type) === 'skill' ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
-                      }`}>{(skill?.type || localItem?.type) === 'skill' ? 'Skill' : 'Command'}</span>
-                      {isLocal && <span className="text-[7px] px-1 rounded bg-green-500/10 text-green-400">local</span>}
-                      {skill?.deletedRemotely && <span className="text-[7px] px-1.5 py-0.5 rounded bg-red-500/20 text-red-400 font-medium">Deleted remotely</span>}
-                      {skill && !skill.deletedRemotely && <span className="text-[9px] text-[var(--text-secondary)] font-mono">v{skill.version}</span>}
-                      {skill?.installedVersion && skill.installedVersion !== skill.version && (
-                        <span className="text-[9px] text-[var(--yellow)] font-mono">installed: v{skill.installedVersion}</span>
-                      )}
-                      {skill && skill.rating > 0 && (
-                        <span className="text-[9px] text-[var(--yellow)]" title={`Rating: ${skill.rating}/5`}>
-                          {'★'.repeat(Math.round(skill.rating))}{'☆'.repeat(5 - Math.round(skill.rating))}
-                        </span>
-                      )}
-                      {skill && skill.score > 0 && <span className="text-[9px] text-[var(--text-secondary)]">{skill.score}pt</span>}
-
-                      {/* Update button */}
-                      {skill?.hasUpdate && !skill.deletedRemotely && (
-                        <button
-                          onClick={async () => {
-                            if (skill.installedGlobal) await install(skill.name, 'global');
-                            for (const pp of skill.installedProjects) await install(skill.name, pp);
-                          }}
-                          className="text-[9px] px-2 py-1 bg-[var(--yellow)]/20 text-[var(--yellow)] border border-[var(--yellow)]/50 rounded hover:bg-[var(--yellow)]/30 transition-colors"
-                        >
-                          Update
-                        </button>
-                      )}
-
-                      {/* Delete button for skills removed from remote registry */}
-                      {skill?.deletedRemotely && (
-                        <button
-                          onClick={async () => {
-                            if (!confirm(`"${skill.name}" was deleted from the remote repository.\n\nDelete the local installation as well?`)) return;
-                            await fetch('/api/skills', {
-                              method: 'POST',
-                              headers: { 'Content-Type': 'application/json' },
-                              body: JSON.stringify({ action: 'purge-deleted', name: skill.name }),
-                            });
-                            setExpandedSkill(null);
-                            fetchSkills();
-                          }}
-                          className="text-[9px] px-2 py-1 bg-red-500/20 text-red-400 border border-red-500/40 rounded hover:bg-red-500/30 transition-colors ml-auto"
-                        >
-                          Delete local
-                        </button>
-                      )}
-
-                      {/* Local item actions: install to other projects, delete */}
-                      {isLocal && localItem && (
-                        <>
-                          <div className="relative ml-auto">
-                            <button
-                              onClick={() => setInstallTarget(prev =>
-                                prev.skill === itemName && prev.show ? { skill: '', show: false } : { skill: itemName, show: true }
-                              )}
-                              className="text-[9px] px-2 py-1 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white transition-colors"
-                            >
-                              Install to...
-                            </button>
-                            {installTarget.skill === itemName && installTarget.show && (
-                              <>
-                                <div className="fixed inset-0 z-40" onClick={() => setInstallTarget({ skill: '', show: false })} />
-                                <div className="absolute right-0 top-7 w-[200px] bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl z-50 py-1">
-                                  <button
-                                    onClick={async () => {
-                                      const res = await fetch('/api/skills/local', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-                                        body: JSON.stringify({ action: 'install-local', name: itemName, type: localItem.type, sourceProject: localItem.projectPath, target: 'global', force: true }) });
-                                      const data = await res.json();
-                                      if (!data.ok) alert(data.error);
-                                      else alert(`"${itemName}" installed globally. Restart Claude to apply.`);
-                                      setInstallTarget({ skill: '', show: false });
-                                      fetchSkills();
-                                    }}
-                                    className="w-full text-left text-[10px] px-3 py-1.5 hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]"
-                                  >Global (~/.claude)</button>
-                                  <div className="border-t border-[var(--border)] my-0.5" />
-                                  {projects.map(p => (
-                                    <button
-                                      key={p.path}
-                                      onClick={async () => {
-                                        const res = await fetch('/api/skills/local', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-                                          body: JSON.stringify({ action: 'install-local', name: itemName, type: localItem.type, sourceProject: localItem.projectPath, target: p.path, force: true }) });
-                                        const data = await res.json();
-                                        if (!data.ok) alert(data.error);
-                                        else alert(`"${itemName}" installed to ${p.name}. Restart Claude to apply.`);
-                                        setInstallTarget({ skill: '', show: false });
-                                        fetchSkills();
-                                      }}
-                                      className="w-full text-left text-[10px] px-3 py-1.5 hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)] truncate"
-                                      title={p.path}
-                                    >{p.name}</button>
-                                  ))}
-                                </div>
-                              </>
-                            )}
-                          </div>
-                          <button
-                            onClick={async () => {
-                              if (!confirm(`Delete "${itemName}" from ${localScope}?`)) return;
-                              await fetch('/api/skills/local', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({ action: 'delete-local', name: itemName, type: localItem.type, project: localItem.projectPath }) });
-                              setExpandedSkill(null);
-                              fetchSkills();
-                            }}
-                            className="text-[9px] text-[var(--red)] hover:underline"
-                          >Delete</button>
-                        </>
-                      )}
-
-                      {/* Install dropdown — registry items only (not deleted remotely) */}
-                      {skill && !skill.deletedRemotely && <div className="relative ml-auto">
-                        <button
-                          onClick={() => setInstallTarget(prev =>
-                            prev.skill === skill.name && prev.show ? { skill: '', show: false } : { skill: skill.name, show: true }
-                          )}
-                          className="text-[9px] px-2 py-1 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white transition-colors"
-                        >
-                          Install
-                        </button>
-                        {installTarget.skill === skill.name && installTarget.show && (
-                          <>
-                            <div className="fixed inset-0 z-40" onClick={() => setInstallTarget({ skill: '', show: false })} />
-                            <div className="absolute right-0 top-7 w-[180px] bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl z-50 py-1">
-                              <button
-                                onClick={() => install(skill.name, 'global')}
-                                className={`w-full text-left text-[10px] px-3 py-1.5 hover:bg-[var(--bg-tertiary)] ${
-                                  skill.installedGlobal ? 'text-[var(--green)]' : 'text-[var(--text-primary)]'
-                                }`}
-                              >
-                                {skill.installedGlobal ? '✓ ' : ''}Global (~/.claude)
-                              </button>
-                              <div className="border-t border-[var(--border)] my-0.5" />
-                              {projects.map(p => {
-                                const inst = skill.installedProjects.includes(p.path);
-                                return (
-                                  <button
-                                    key={p.path}
-                                    onClick={() => install(skill.name, p.path)}
-                                    className={`w-full text-left text-[10px] px-3 py-1.5 hover:bg-[var(--bg-tertiary)] truncate ${
-                                      inst ? 'text-[var(--green)]' : 'text-[var(--text-primary)]'
-                                    }`}
-                                    title={p.path}
-                                  >
-                                    {inst ? '✓ ' : ''}{p.name}
-                                  </button>
-                                );
-                              })}
-                            </div>
-                          </>
-                        )}
-                      </div>}
-                    </div>
-                    <p className="text-[10px] text-[var(--text-secondary)] mt-0.5">{skill?.description || ''}</p>
-                    {skill?.author && (
-                      <div className="text-[9px] text-[var(--text-secondary)] mt-1">By {skill.author}</div>
-                    )}
-                    {skill?.tags && skill.tags.length > 0 && (
-                      <div className="flex flex-wrap gap-1 mt-1">
-                        {skill.tags.map(t => (
-                          <span key={t} className="text-[8px] px-1.5 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">{t}</span>
-                        ))}
-                      </div>
-                    )}
-                    {skill?.sourceUrl && (
-                      <a href={skill.sourceUrl} target="_blank" rel="noopener noreferrer" className="text-[9px] text-[var(--accent)] hover:underline mt-0.5 block truncate">{skill.sourceUrl.replace(/^https?:\/\//, '').slice(0, 60)}</a>
-                    )}
-                    {/* Installed indicators */}
-                    {skill && isInstalled && (
-                      <div className="flex items-center gap-2 mt-1">
-                        {skill.installedGlobal && (
-                          <span className="flex items-center gap-1 text-[8px] text-[var(--green)]">
-                            Global
-                            <button onClick={() => { if (confirm(`Uninstall "${skill.name}" from global?`)) uninstall(skill.name, 'global'); }} className="text-[var(--text-secondary)] hover:text-[var(--red)]">x</button>
-                          </span>
-                        )}
-                        {skill.installedProjects.map(pp => (
-                          <span key={pp} className="flex items-center gap-1 text-[8px] text-[var(--accent)]">
-                            {pp.split('/').pop()}
-                            <button onClick={() => { if (confirm(`Uninstall "${skill.name}" from ${pp.split('/').pop()}?`)) uninstall(skill.name, pp); }} className="text-[var(--text-secondary)] hover:text-[var(--red)]">x</button>
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* File browser */}
-                  <div className="flex-1 flex min-h-0 overflow-hidden">
-                    {/* File tree */}
-                    <div className="w-36 border-r border-[var(--border)] overflow-y-auto shrink-0">
-                      {skillFiles.length === 0 ? (
-                        <div className="p-2 text-[9px] text-[var(--text-secondary)]">Loading...</div>
-                      ) : (
-                        <SkillFileTree
-                          files={skillFiles}
-                          activeFile={activeFile}
-                          onSelect={(path) => loadFile(itemName, path, isLocal, localItem?.type, localItem?.projectPath)}
-                        />
-                      )}
-                      {skill?.sourceUrl && (
-                        <div className="border-t border-[var(--border)] p-2">
-                          <a
-                            href={skill.sourceUrl.replace(/\/blob\/main\/.*/, '')}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-[9px] text-[var(--accent)] hover:underline"
-                          >
-                            GitHub
-                          </a>
-                        </div>
-                      )}
-                    </div>
-                    {/* File content */}
-                    <div className="flex-1 flex flex-col" style={{ width: 0 }}>
-                      {activeFile && (
-                        <div className="px-3 py-1 border-b border-[var(--border)] text-[9px] text-[var(--text-secondary)] font-mono shrink-0 truncate">
-                          {activeFile}
-                        </div>
-                      )}
-                      <div className="flex-1 overflow-auto">
-                        <pre className="p-3 text-[11px] text-[var(--text-primary)] font-mono whitespace-pre-wrap break-all">
-                          {fileContent}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-                </>
-              );
-            })() : (
-              <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
-                <p className="text-xs">Select a skill to view details</p>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Rules (CLAUDE.md Templates) — full-page view */}
-      {typeFilter === 'rules' && (
-        <div className="flex-1 flex min-h-0">
-          {/* Left: template list */}
-          <div className="w-56 border-r border-[var(--border)] overflow-y-auto shrink-0 flex flex-col">
-            <div className="px-3 py-1.5 border-b border-[var(--border)] flex items-center justify-between">
-              <span className="text-[9px] text-[var(--text-secondary)] uppercase">Rule Templates</span>
-              <button
-                onClick={() => { setRulesShowNew(true); setRulesEditing(true); setRulesEditId(''); setRulesEditName(''); setRulesEditDesc(''); setRulesEditContent(''); setRulesEditDefault(false); setRulesSelectedTemplate(null); }}
-                className="text-[9px] text-[var(--accent)] hover:underline"
-              >+ New</button>
-            </div>
-            <div className="flex-1 overflow-y-auto">
-              {rulesTemplates.map(t => {
-                const isActive = rulesSelectedTemplate === t.id;
-                return (
-                  <div
-                    key={t.id}
-                    className={`px-3 py-2 border-b border-[var(--border)]/50 cursor-pointer ${
-                      isActive ? 'bg-[var(--accent)]/10 border-l-2 border-l-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] border-l-2 border-l-transparent'
-                    }`}
-                    onClick={() => { setRulesSelectedTemplate(t.id); setRulesEditing(false); setRulesShowNew(false); }}
-                  >
-                    <div className="flex items-center gap-1.5">
-                      <span className="text-[10px] text-[var(--text-primary)] truncate flex-1">{t.name}</span>
-                      {t.builtin && <span className="text-[7px] text-[var(--text-secondary)]">built-in</span>}
-                      <button
-                        onClick={(e) => { e.stopPropagation(); toggleDefault(t.id, !t.isDefault); }}
-                        className={`text-[7px] px-1 rounded ${t.isDefault ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
-                        title={t.isDefault ? 'Default: auto-applied to new projects' : 'Click to set as default'}
-                      >{t.isDefault ? 'default' : 'set default'}</button>
-                    </div>
-                    <p className="text-[8px] text-[var(--text-secondary)] mt-0.5 line-clamp-1">{t.description}</p>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Right: template detail / editor / batch apply */}
-          <div className="flex-1 flex flex-col min-w-0">
-            {rulesShowNew || rulesEditing ? (
-              /* Edit / New form */
-              <div className="flex-1 flex flex-col overflow-hidden">
-                <div className="px-4 py-2 border-b border-[var(--border)] shrink-0">
-                  <div className="text-[11px] font-semibold text-[var(--text-primary)]">{rulesShowNew ? 'New Rule Template' : 'Edit Template'}</div>
-                </div>
-                <div className="flex-1 overflow-auto p-4 space-y-3">
-                  <div className="flex gap-2">
-                    <input
-                      type="text"
-                      value={rulesEditId}
-                      onChange={e => setRulesEditId(e.target.value.replace(/[^a-z0-9-]/g, ''))}
-                      placeholder="template-id (kebab-case)"
-                      disabled={!rulesShowNew}
-                      className="flex-1 px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-[10px] text-[var(--text-primary)] font-mono disabled:opacity-50"
-                    />
-                    <input
-                      type="text"
-                      value={rulesEditName}
-                      onChange={e => setRulesEditName(e.target.value)}
-                      placeholder="Display Name"
-                      className="flex-1 px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-[10px] text-[var(--text-primary)]"
-                    />
-                  </div>
-                  <input
-                    type="text"
-                    value={rulesEditDesc}
-                    onChange={e => setRulesEditDesc(e.target.value)}
-                    placeholder="Description"
-                    className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-[10px] text-[var(--text-primary)]"
-                  />
-                  <textarea
-                    value={rulesEditContent}
-                    onChange={e => setRulesEditContent(e.target.value)}
-                    placeholder="Template content (markdown)..."
-                    className="w-full flex-1 min-h-[200px] p-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-[10px] font-mono text-[var(--text-primary)] resize-none"
-                    spellCheck={false}
-                  />
-                  <div className="flex items-center gap-3">
-                    <label className="flex items-center gap-1.5 text-[10px] text-[var(--text-secondary)] cursor-pointer">
-                      <input type="checkbox" checked={rulesEditDefault} onChange={e => setRulesEditDefault(e.target.checked)} className="accent-[var(--accent)]" />
-                      Auto-apply to new projects
-                    </label>
-                    <div className="flex gap-2 ml-auto">
-                      <button onClick={saveRule} className="text-[10px] px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90">Save</button>
-                      <button onClick={() => { setRulesEditing(false); setRulesShowNew(false); }} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]">Cancel</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : rulesSelectedTemplate ? (() => {
-              const tmpl = rulesTemplates.find(t => t.id === rulesSelectedTemplate);
-              if (!tmpl) return null;
-              return (
-                <div className="flex-1 flex flex-col overflow-hidden">
-                  {/* Template header */}
-                  <div className="px-4 py-2 border-b border-[var(--border)] shrink-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm font-semibold text-[var(--text-primary)]">{tmpl.name}</span>
-                      {tmpl.builtin && <span className="text-[8px] px-1 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">built-in</span>}
-                      <div className="ml-auto flex gap-1.5">
-                        <button
-                          onClick={() => { setRulesEditing(true); setRulesShowNew(false); setRulesEditId(tmpl.id); setRulesEditName(tmpl.name); setRulesEditDesc(tmpl.description); setRulesEditContent(tmpl.content); setRulesEditDefault(tmpl.isDefault); }}
-                          className="text-[9px] text-[var(--accent)] hover:underline"
-                        >Edit</button>
-                        {!tmpl.builtin && (
-                          <button onClick={() => deleteRule(tmpl.id)} className="text-[9px] text-[var(--red)] hover:underline">Delete</button>
-                        )}
-                      </div>
-                    </div>
-                    <p className="text-[9px] text-[var(--text-secondary)] mt-0.5">{tmpl.description}</p>
-                  </div>
-
-                  {/* Content + batch apply */}
-                  <div className="flex-1 flex min-h-0 overflow-hidden">
-                    {/* Template content */}
-                    <div className="flex-1 min-w-0 overflow-auto">
-                      <pre className="p-3 text-[11px] font-mono text-[var(--text-primary)] whitespace-pre-wrap break-words">
-                        {tmpl.content}
-                      </pre>
-                    </div>
-
-                    {/* Batch apply panel */}
-                    <div className="w-48 border-l border-[var(--border)] overflow-y-auto shrink-0 flex flex-col">
-                      <div className="px-2 py-1.5 border-b border-[var(--border)] text-[9px] text-[var(--text-secondary)] uppercase">Apply to Projects</div>
-                      <div className="flex-1 overflow-y-auto">
-                        {rulesProjects.map(p => (
-                          <label key={p.path} className="flex items-center gap-1.5 px-2 py-1 hover:bg-[var(--bg-tertiary)] cursor-pointer">
-                            <input
-                              type="checkbox"
-                              checked={rulesBatchProjects.has(p.path)}
-                              onChange={() => {
-                                setRulesBatchProjects(prev => {
-                                  const next = new Set(prev);
-                                  if (next.has(p.path)) next.delete(p.path); else next.add(p.path);
-                                  return next;
-                                });
-                              }}
-                              className="accent-[var(--accent)]"
-                            />
-                            <span className="text-[9px] text-[var(--text-primary)] truncate">{p.name}</span>
-                          </label>
-                        ))}
-                      </div>
-                      {rulesBatchProjects.size > 0 && (
-                        <div className="p-2 border-t border-[var(--border)]">
-                          <button
-                            onClick={() => batchInject(tmpl.id)}
-                            className="w-full text-[9px] px-2 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90"
-                          >
-                            Apply to {rulesBatchProjects.size} project{rulesBatchProjects.size > 1 ? 's' : ''}
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              );
-            })() : (
-              <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
-                <p className="text-xs">Select a template or create a new one</p>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Plugins — full-page view */}
-      {typeFilter === 'plugins' && (
-        <Suspense fallback={<div className="p-4 text-xs text-[var(--text-secondary)]">Loading...</div>}>
-          <PluginsPanel />
-        </Suspense>
-      )}
-    </div>
-  );
-}