mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-06 16:31:12 +08:00
642 lines
22 KiB
TypeScript
642 lines
22 KiB
TypeScript
// ========================================
|
|
// SkillDetailPanel Component
|
|
// ========================================
|
|
// Right-side slide-out panel for viewing skill details
|
|
|
|
import { useEffect, useState, useMemo, useCallback } from 'react';
|
|
import { useIntl } from 'react-intl';
|
|
import {
|
|
X,
|
|
FileText,
|
|
Edit,
|
|
Trash2,
|
|
Folder,
|
|
Lock,
|
|
Tag,
|
|
MapPin,
|
|
Code,
|
|
ChevronRight,
|
|
ChevronDown,
|
|
Eye,
|
|
Loader2,
|
|
Maximize2,
|
|
} from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Card } from '@/components/ui/Card';
|
|
import type { Skill } from '@/lib/api';
|
|
import { buildSkillFileTree, getDefaultExpandedPaths } from '@/utils/skill-files';
|
|
import type { FileSystemNode } from '@/types/file-explorer';
|
|
import { readSkillFile } from '@/lib/api';
|
|
import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
|
|
|
|
export interface SkillDetailPanelProps {
|
|
skill: Skill | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onEdit?: (skill: Skill) => void;
|
|
onDelete?: (skill: Skill) => void;
|
|
onEditFile?: (skillName: string, fileName: string, location: 'project' | 'user') => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function SkillDetailPanel({
|
|
skill,
|
|
isOpen,
|
|
onClose,
|
|
onEdit,
|
|
onDelete,
|
|
onEditFile,
|
|
isLoading = false,
|
|
}: SkillDetailPanelProps) {
|
|
const { formatMessage } = useIntl();
|
|
const projectPath = useWorkflowStore(selectProjectPath);
|
|
const [cliMode] = useState<'claude' | 'codex'>('claude');
|
|
|
|
// Tree view state
|
|
const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set());
|
|
const [selectedFile, setSelectedFile] = useState<string | null>(null);
|
|
const [previewContent, setPreviewContent] = useState<string | null>(null);
|
|
const [isPreviewLoading, setIsPreviewLoading] = useState(false);
|
|
const [showPreviewPanel, setShowPreviewPanel] = useState(false);
|
|
|
|
// Prevent body scroll when panel is open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = '';
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = '';
|
|
};
|
|
}, [isOpen]);
|
|
|
|
// Build file tree from supportingFiles
|
|
const fileTree = useMemo(() => {
|
|
if (!skill?.supportingFiles) return [];
|
|
return buildSkillFileTree(skill.supportingFiles);
|
|
}, [skill?.supportingFiles]);
|
|
|
|
// Initialize expanded paths when skill changes
|
|
useEffect(() => {
|
|
if (fileTree.length > 0) {
|
|
setExpandedPaths(getDefaultExpandedPaths(fileTree));
|
|
}
|
|
}, [fileTree]);
|
|
|
|
// Load file content for preview
|
|
const loadFilePreview = useCallback(async (filePath: string) => {
|
|
if (!skill) return;
|
|
|
|
setIsPreviewLoading(true);
|
|
setShowPreviewPanel(true);
|
|
setSelectedFile(filePath);
|
|
setPreviewContent(null);
|
|
|
|
try {
|
|
const data = await readSkillFile({
|
|
skillName: skill.folderName || skill.name,
|
|
fileName: filePath,
|
|
location: skill.location || 'project',
|
|
projectPath: projectPath,
|
|
cliType: cliMode,
|
|
});
|
|
setPreviewContent(data.content);
|
|
} catch (error) {
|
|
console.error('Failed to load file preview:', error);
|
|
setPreviewContent(`Error loading preview: ${error instanceof Error ? error.message : String(error)}`);
|
|
} finally {
|
|
setIsPreviewLoading(false);
|
|
}
|
|
}, [skill, projectPath, cliMode]);
|
|
|
|
const handleClosePreview = () => {
|
|
setShowPreviewPanel(false);
|
|
};
|
|
|
|
// Close preview on panel close
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
handleClosePreview();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
if (!isOpen || !skill) {
|
|
return null;
|
|
}
|
|
|
|
const hasAllowedTools = skill.allowedTools && skill.allowedTools.length > 0;
|
|
const hasSupportingFiles = skill.supportingFiles && skill.supportingFiles.length > 0;
|
|
const folderName = skill.folderName || skill.name;
|
|
|
|
const handleEditFile = (fileName: string) => {
|
|
onEditFile?.(folderName, fileName, skill.location || 'project');
|
|
};
|
|
|
|
// Toggle directory expanded state
|
|
const togglePath = (path: string) => {
|
|
setExpandedPaths(prev => {
|
|
const next = new Set(prev);
|
|
if (next.has(path)) {
|
|
next.delete(path);
|
|
} else {
|
|
next.add(path);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Overlay */}
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-50 transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Panel */}
|
|
<div className="fixed top-0 right-0 w-full sm:w-[480px] md:w-[560px] lg:w-[640px] h-full bg-background border-l border-border shadow-xl z-50 flex flex-col transition-transform">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div className={cn(
|
|
'p-2 rounded-lg flex-shrink-0',
|
|
skill.enabled ? 'bg-primary/10' : 'bg-muted'
|
|
)}>
|
|
<Tag className={cn('w-5 h-5', skill.enabled ? 'text-primary' : 'text-muted-foreground')} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h3 className="text-lg font-semibold text-foreground truncate">{skill.name}</h3>
|
|
{skill.version && (
|
|
<p className="text-sm text-muted-foreground">v{skill.version}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-8 h-8 flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-6">
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center h-48">
|
|
<div className="animate-spin text-muted-foreground">
|
|
<Tag className="w-8 h-8" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{/* Description */}
|
|
<section>
|
|
<h4 className="text-sm font-semibold text-foreground mb-2 flex items-center gap-2">
|
|
<FileText className="w-4 h-4 text-muted-foreground" />
|
|
{formatMessage({ id: 'skills.card.description' })}
|
|
</h4>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
{skill.description || formatMessage({ id: 'skills.noDescription' })}
|
|
</p>
|
|
</section>
|
|
|
|
{/* Metadata */}
|
|
<section>
|
|
<h4 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
|
|
<MapPin className="w-4 h-4 text-muted-foreground" />
|
|
{formatMessage({ id: 'skills.metadata' })}
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Card className="p-3 bg-muted/50">
|
|
<span className="text-xs text-muted-foreground block mb-1">
|
|
{formatMessage({ id: 'skills.location' })}
|
|
</span>
|
|
<p className="text-sm font-medium text-foreground">
|
|
{skill.location === 'project' ? formatMessage({ id: 'skills.projectSkills' }) : formatMessage({ id: 'skills.userSkills' })}
|
|
</p>
|
|
</Card>
|
|
{skill.version && (
|
|
<Card className="p-3 bg-muted/50">
|
|
<span className="text-xs text-muted-foreground block mb-1">
|
|
{formatMessage({ id: 'skills.card.version' })}
|
|
</span>
|
|
<p className="text-sm font-medium text-foreground">v{skill.version}</p>
|
|
</Card>
|
|
)}
|
|
{skill.author && (
|
|
<Card className="p-3 bg-muted/50">
|
|
<span className="text-xs text-muted-foreground block mb-1">
|
|
{formatMessage({ id: 'skills.card.author' })}
|
|
</span>
|
|
<p className="text-sm font-medium text-foreground">{skill.author}</p>
|
|
</Card>
|
|
)}
|
|
{skill.source && (
|
|
<Card className="p-3 bg-muted/50">
|
|
<span className="text-xs text-muted-foreground block mb-1">
|
|
{formatMessage({ id: 'skills.card.source' })}
|
|
</span>
|
|
<p className="text-sm font-medium text-foreground">
|
|
{formatMessage({ id: `skills.source.${skill.source}` })}
|
|
</p>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Triggers */}
|
|
{skill.triggers && skill.triggers.length > 0 && (
|
|
<section>
|
|
<h4 className="text-sm font-semibold text-foreground mb-2 flex items-center gap-2">
|
|
<Tag className="w-4 h-4 text-muted-foreground" />
|
|
{formatMessage({ id: 'skills.card.triggers' })}
|
|
</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{skill.triggers.map((trigger) => (
|
|
<Badge key={trigger} variant="secondary" className="text-sm">
|
|
{trigger}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Allowed Tools */}
|
|
{hasAllowedTools && (
|
|
<section>
|
|
<h4 className="text-sm font-semibold text-foreground mb-2 flex items-center gap-2">
|
|
<Lock className="w-4 h-4 text-muted-foreground" />
|
|
{formatMessage({ id: 'skills.allowedTools' })}
|
|
</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{skill.allowedTools!.map((tool) => (
|
|
<Badge key={tool} variant="outline" className="text-xs font-mono">
|
|
{tool}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Files */}
|
|
<section>
|
|
<h4 className="text-sm font-semibold text-foreground mb-2 flex items-center gap-2">
|
|
<Folder className="w-4 h-4 text-muted-foreground" />
|
|
{formatMessage({ id: 'skills.files' })}
|
|
</h4>
|
|
<div className="space-y-3">
|
|
{/* SKILL.md (main file) */}
|
|
<div className="flex items-center justify-between p-3 bg-primary/5 border border-primary/20 rounded-lg hover:bg-primary/10 transition-colors">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="w-4 h-4 text-primary" />
|
|
<span className="text-sm font-mono text-foreground font-medium">SKILL.md</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-primary hover:bg-primary/20"
|
|
onClick={() => loadFilePreview('SKILL.md')}
|
|
>
|
|
<Eye className="w-3.5 h-3.5" />
|
|
</Button>
|
|
{onEditFile && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-primary hover:bg-primary/20"
|
|
onClick={() => handleEditFile('SKILL.md')}
|
|
>
|
|
<Edit className="w-3.5 h-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Supporting Files Tree */}
|
|
{hasSupportingFiles && fileTree.length > 0 && (
|
|
<div className="border border-border rounded-lg p-2 bg-muted/30">
|
|
<SkillFileTree
|
|
nodes={fileTree}
|
|
expandedPaths={expandedPaths}
|
|
onTogglePath={togglePath}
|
|
onEditFile={handleEditFile}
|
|
onPreviewFile={loadFilePreview}
|
|
depth={0}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty state */}
|
|
{hasSupportingFiles && fileTree.length === 0 && (
|
|
<div className="text-sm text-muted-foreground p-3">
|
|
{formatMessage({ id: 'skills.files.empty' })}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* File Preview Modal */}
|
|
<FilePreviewModal
|
|
fileName={selectedFile}
|
|
content={previewContent}
|
|
isLoading={isPreviewLoading}
|
|
isOpen={showPreviewPanel}
|
|
onClose={handleClosePreview}
|
|
/>
|
|
|
|
{/* Path */}
|
|
{skill.path && (
|
|
<section>
|
|
<h4 className="text-sm font-semibold text-foreground mb-2 flex items-center gap-2">
|
|
<Code className="w-4 h-4 text-muted-foreground" />
|
|
{formatMessage({ id: 'skills.path' })}
|
|
</h4>
|
|
<Card className="p-3 bg-muted">
|
|
<code className="text-xs font-mono text-muted-foreground break-all">
|
|
{skill.path}
|
|
</code>
|
|
</Card>
|
|
</section>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer Actions */}
|
|
<div className="px-6 py-4 border-t border-border flex justify-between">
|
|
{onDelete && (
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => onDelete(skill)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
{formatMessage({ id: 'common.actions.delete' })}
|
|
</Button>
|
|
)}
|
|
<div className="flex gap-2 ml-auto">
|
|
{onEdit && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => onEdit(skill)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
{formatMessage({ id: 'common.actions.edit' })}
|
|
</Button>
|
|
)}
|
|
<Button onClick={onClose}>
|
|
{formatMessage({ id: 'common.actions.close' })}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// SkillFileTree Component
|
|
// ========================================
|
|
// Recursive tree view for skill files
|
|
|
|
interface SkillFileTreeNodeProps {
|
|
node: FileSystemNode;
|
|
depth: number;
|
|
expandedPaths: Set<string>;
|
|
onTogglePath: (path: string) => void;
|
|
onEditFile: (fileName: string) => void;
|
|
onPreviewFile: (fileName: string) => void;
|
|
}
|
|
|
|
function SkillFileTreeNode({
|
|
node,
|
|
depth,
|
|
expandedPaths,
|
|
onTogglePath,
|
|
onEditFile,
|
|
onPreviewFile,
|
|
}: SkillFileTreeNodeProps) {
|
|
const isDirectory = node.type === 'directory';
|
|
const isExpanded = expandedPaths.has(node.path);
|
|
const hasChildren = node.children && node.children.length > 0;
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (isDirectory) {
|
|
onTogglePath(node.path);
|
|
} else {
|
|
// Preview file on click
|
|
onPreviewFile(node.path);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="select-none group">
|
|
<div
|
|
className={cn(
|
|
'flex items-center gap-2 px-2 py-1.5 rounded-sm hover:bg-muted transition-colors cursor-pointer',
|
|
isDirectory && 'font-medium'
|
|
)}
|
|
style={{ paddingLeft: `${depth * 16 + 8}px` }}
|
|
onClick={handleClick}
|
|
>
|
|
{/* Chevron for directories */}
|
|
{isDirectory && (
|
|
<span className="w-4 h-4 flex items-center justify-center text-muted-foreground">
|
|
{hasChildren && (
|
|
isExpanded ? (
|
|
<ChevronDown className="w-3.5 h-3.5" />
|
|
) : (
|
|
<ChevronRight className="w-3.5 h-3.5" />
|
|
)
|
|
)}
|
|
</span>
|
|
)}
|
|
|
|
{/* Icon */}
|
|
{isDirectory ? (
|
|
<Folder className={cn(
|
|
'w-4 h-4 flex-shrink-0',
|
|
isExpanded ? 'text-blue-500' : 'text-blue-400'
|
|
)} />
|
|
) : (
|
|
<FileText className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
|
|
)}
|
|
|
|
{/* Name */}
|
|
<span className="text-sm font-mono flex-1 truncate">{node.name}</span>
|
|
|
|
{/* Preview button for files */}
|
|
{!isDirectory && (
|
|
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0 hover:bg-primary/20 hover:text-primary"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onPreviewFile(node.path);
|
|
}}
|
|
title="Preview file"
|
|
>
|
|
<Eye className="w-3.5 h-3.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0 hover:bg-primary/20 hover:text-primary"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onEditFile(node.path);
|
|
}}
|
|
title="Edit file"
|
|
>
|
|
<Edit className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Children */}
|
|
{isDirectory && isExpanded && hasChildren && (
|
|
<div className="border-l border-border ml-4">
|
|
{node.children!.map((child) => (
|
|
<SkillFileTreeNode
|
|
key={child.path}
|
|
node={child}
|
|
depth={depth + 1}
|
|
expandedPaths={expandedPaths}
|
|
onTogglePath={onTogglePath}
|
|
onEditFile={onEditFile}
|
|
onPreviewFile={onPreviewFile}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface SkillFileTreeProps {
|
|
nodes: FileSystemNode[];
|
|
expandedPaths: Set<string>;
|
|
onTogglePath: (path: string) => void;
|
|
onEditFile: (fileName: string) => void;
|
|
onPreviewFile: (fileName: string) => void;
|
|
depth: number;
|
|
}
|
|
|
|
function SkillFileTree({
|
|
nodes,
|
|
expandedPaths,
|
|
onTogglePath,
|
|
onEditFile,
|
|
onPreviewFile,
|
|
depth,
|
|
}: SkillFileTreeProps) {
|
|
return (
|
|
<div className="space-y-0.5" role="tree">
|
|
{nodes.map((node) => (
|
|
<SkillFileTreeNode
|
|
key={node.path}
|
|
node={node}
|
|
depth={depth}
|
|
expandedPaths={expandedPaths}
|
|
onTogglePath={onTogglePath}
|
|
onEditFile={onEditFile}
|
|
onPreviewFile={onPreviewFile}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// File Preview Modal Component
|
|
// ========================================
|
|
|
|
interface FilePreviewModalProps {
|
|
fileName: string | null;
|
|
content: string | null;
|
|
isLoading: boolean;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
function FilePreviewModal({ fileName, content, isLoading, isOpen, onClose }: FilePreviewModalProps) {
|
|
const { formatMessage } = useIntl();
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<>
|
|
{/* Overlay */}
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-50 transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-background rounded-lg shadow-2xl w-full max-w-3xl max-h-[80vh] flex flex-col animate-in fade-in zoom-in duration-200">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="w-4 h-4 text-primary" />
|
|
<span className="text-sm font-mono font-medium">{fileName}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
// Full screen toggle could be implemented here
|
|
}}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<Maximize2 className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={onClose} className="h-8 w-8 p-0">
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-auto p-4 min-h-[300px]">
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : content ? (
|
|
<Card className="p-4 bg-muted/30">
|
|
<pre className="text-xs font-mono whitespace-pre-wrap break-words text-foreground">
|
|
{content}
|
|
</pre>
|
|
</Card>
|
|
) : (
|
|
<div className="text-sm text-muted-foreground py-8 text-center">
|
|
{formatMessage({ id: 'skills.files.preview.empty' })}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-4 py-3 border-t border-border flex justify-end">
|
|
<Button onClick={onClose}>
|
|
{formatMessage({ id: 'common.actions.close' })}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SkillDetailPanel;
|