mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-11 02:33:51 +08:00
447 lines
16 KiB
TypeScript
447 lines
16 KiB
TypeScript
// ========================================
|
|
// Skills Manager Page
|
|
// ========================================
|
|
// Browse and manage skills library with search/filter
|
|
|
|
import { useState, useMemo, useCallback } from 'react';
|
|
import { useIntl } from 'react-intl';
|
|
import {
|
|
Sparkles,
|
|
Search,
|
|
Plus,
|
|
RefreshCw,
|
|
Power,
|
|
PowerOff,
|
|
Tag,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
EyeOff,
|
|
List,
|
|
Grid3x3,
|
|
} from 'lucide-react';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogContent,
|
|
AlertDialogHeader,
|
|
AlertDialogFooter,
|
|
AlertDialogTitle,
|
|
AlertDialogDescription,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
} from '@/components/ui';
|
|
import { SkillCard, SkillDetailPanel } from '@/components/shared';
|
|
import { LocationSwitcher } from '@/components/commands/LocationSwitcher';
|
|
import { useSkills, useSkillMutations } from '@/hooks';
|
|
import { fetchSkillDetail } from '@/lib/api';
|
|
import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
|
|
import type { Skill } from '@/lib/api';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
// ========== Skill Grid Component ==========
|
|
|
|
interface SkillGridProps {
|
|
skills: Skill[];
|
|
isLoading: boolean;
|
|
onToggle: (skill: Skill, enabled: boolean) => void;
|
|
onClick: (skill: Skill) => void;
|
|
isToggling: boolean;
|
|
compact?: boolean;
|
|
}
|
|
|
|
function SkillGrid({ skills, isLoading, onToggle, onClick, isToggling, compact }: SkillGridProps) {
|
|
const { formatMessage } = useIntl();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className={cn(
|
|
'grid gap-4',
|
|
compact ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-3'
|
|
)}>
|
|
{[1, 2, 3, 4, 5, 6].map((i) => (
|
|
<div key={i} className="h-48 bg-muted animate-pulse rounded-lg" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (skills.length === 0) {
|
|
return (
|
|
<Card className="p-8 text-center">
|
|
<Sparkles className="w-12 h-12 mx-auto text-muted-foreground/50" />
|
|
<h3 className="mt-4 text-lg font-medium text-foreground">{formatMessage({ id: 'skills.emptyState.title' })}</h3>
|
|
<p className="mt-2 text-muted-foreground">
|
|
{formatMessage({ id: 'skills.emptyState.message' })}
|
|
</p>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn(
|
|
'grid gap-4',
|
|
compact ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-3'
|
|
)}>
|
|
{skills.map((skill) => (
|
|
<SkillCard
|
|
key={skill.name}
|
|
skill={skill}
|
|
onToggle={onToggle}
|
|
onClick={onClick}
|
|
isToggling={isToggling}
|
|
compact={compact}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========== Main Page Component ==========
|
|
|
|
export function SkillsManagerPage() {
|
|
const { formatMessage } = useIntl();
|
|
const projectPath = useWorkflowStore(selectProjectPath);
|
|
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [categoryFilter, setCategoryFilter] = useState<string>('all');
|
|
const [sourceFilter, setSourceFilter] = useState<string>('all');
|
|
const [enabledFilter, setEnabledFilter] = useState<'all' | 'enabled' | 'disabled'>('all');
|
|
const [viewMode, setViewMode] = useState<'grid' | 'compact'>('grid');
|
|
const [showDisabledSection, setShowDisabledSection] = useState(false);
|
|
const [confirmDisable, setConfirmDisable] = useState<{ skill: Skill; enable: boolean } | null>(null);
|
|
const [locationFilter, setLocationFilter] = useState<'project' | 'user'>('project');
|
|
|
|
// Skill detail panel state
|
|
const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);
|
|
const [isDetailLoading, setIsDetailLoading] = useState(false);
|
|
const [isDetailPanelOpen, setIsDetailPanelOpen] = useState(false);
|
|
|
|
const {
|
|
skills,
|
|
categories,
|
|
projectSkills,
|
|
userSkills,
|
|
isLoading,
|
|
isFetching,
|
|
refetch,
|
|
} = useSkills({
|
|
filter: {
|
|
search: searchQuery || undefined,
|
|
category: categoryFilter !== 'all' ? categoryFilter : undefined,
|
|
source: sourceFilter !== 'all' ? sourceFilter as Skill['source'] : undefined,
|
|
enabledOnly: enabledFilter === 'enabled',
|
|
location: locationFilter,
|
|
},
|
|
});
|
|
|
|
const { toggleSkill, isToggling } = useSkillMutations();
|
|
|
|
// Filter skills based on enabled filter
|
|
const filteredSkills = useMemo(() => {
|
|
if (enabledFilter === 'disabled') {
|
|
return skills.filter((s) => !s.enabled);
|
|
}
|
|
return skills;
|
|
}, [skills, enabledFilter]);
|
|
|
|
// Calculate counts based on current location filter (from skills, not allSkills)
|
|
const currentLocationEnabledCount = useMemo(() => skills.filter(s => s.enabled).length, [skills]);
|
|
const currentLocationTotalCount = skills.length;
|
|
const currentLocationDisabledCount = currentLocationTotalCount - currentLocationEnabledCount;
|
|
|
|
const handleToggle = async (skill: Skill, enabled: boolean) => {
|
|
// Use the skill's location property
|
|
const location = skill.location || 'project';
|
|
// Use folderName for API calls (actual folder name), fallback to name if not available
|
|
const skillIdentifier = skill.folderName || skill.name;
|
|
|
|
// Debug logging
|
|
console.log('[SkillToggle] Toggling skill:', {
|
|
name: skill.name,
|
|
folderName: skill.folderName,
|
|
location,
|
|
enabled,
|
|
skillIdentifier
|
|
});
|
|
|
|
try {
|
|
await toggleSkill(skillIdentifier, enabled, location);
|
|
} catch (error) {
|
|
console.error('[SkillToggle] Toggle failed:', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const handleToggleWithConfirm = (skill: Skill, enabled: boolean) => {
|
|
if (!enabled) {
|
|
// Show confirmation dialog when disabling
|
|
setConfirmDisable({ skill, enable: false });
|
|
} else {
|
|
// Enable directly without confirmation
|
|
handleToggle(skill, true);
|
|
}
|
|
};
|
|
|
|
const handleConfirmDisable = async () => {
|
|
if (confirmDisable) {
|
|
await handleToggle(confirmDisable.skill, false);
|
|
setConfirmDisable(null);
|
|
}
|
|
};
|
|
|
|
// Skill detail panel handlers
|
|
const handleSkillClick = useCallback(async (skill: Skill) => {
|
|
setIsDetailLoading(true);
|
|
setIsDetailPanelOpen(true);
|
|
setSelectedSkill(skill);
|
|
|
|
try {
|
|
// Fetch full skill details from API
|
|
const data = await fetchSkillDetail(
|
|
skill.name,
|
|
skill.location || 'project',
|
|
projectPath
|
|
);
|
|
setSelectedSkill(data.skill);
|
|
} catch (error) {
|
|
console.error('Failed to fetch skill details:', error);
|
|
// Keep the basic skill info if fetch fails
|
|
} finally {
|
|
setIsDetailLoading(false);
|
|
}
|
|
}, [projectPath]);
|
|
|
|
const handleCloseDetailPanel = useCallback(() => {
|
|
setIsDetailPanelOpen(false);
|
|
setSelectedSkill(null);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Page Header */}
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
|
|
<Sparkles className="w-6 h-6 text-primary" />
|
|
{formatMessage({ id: 'skills.title' })}
|
|
</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
{formatMessage({ id: 'skills.description' })}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => refetch()} disabled={isFetching}>
|
|
<RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
|
|
{formatMessage({ id: 'common.actions.refresh' })}
|
|
</Button>
|
|
<Button>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
{formatMessage({ id: 'skills.actions.install' })}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Location Switcher */}
|
|
<LocationSwitcher
|
|
currentLocation={locationFilter}
|
|
onLocationChange={setLocationFilter}
|
|
projectCount={projectSkills.length}
|
|
userCount={userSkills.length}
|
|
disabled={isToggling}
|
|
translationPrefix="skills"
|
|
/>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-2">
|
|
<Sparkles className="w-5 h-5 text-primary" />
|
|
<span className="text-2xl font-bold">{currentLocationTotalCount}</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'common.stats.totalSkills' })}</p>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-2">
|
|
<Power className="w-5 h-5 text-success" />
|
|
<span className="text-2xl font-bold">{currentLocationEnabledCount}</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.state.enabled' })}</p>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-2">
|
|
<PowerOff className="w-5 h-5 text-muted-foreground" />
|
|
<span className="text-2xl font-bold">{currentLocationDisabledCount}</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.state.disabled' })}</p>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-2">
|
|
<Tag className="w-5 h-5 text-info" />
|
|
<span className="text-2xl font-bold">{categories.length}</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.card.category' })}</p>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Filters and Search */}
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder={formatMessage({ id: 'skills.filters.searchPlaceholder' })}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue placeholder={formatMessage({ id: 'skills.card.category' })} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{formatMessage({ id: 'skills.filters.all' })}</SelectItem>
|
|
{categories.map((cat) => (
|
|
<SelectItem key={cat} value={cat}>{cat}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={sourceFilter} onValueChange={setSourceFilter}>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue placeholder={formatMessage({ id: 'skills.card.source' })} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{formatMessage({ id: 'skills.filters.allSources' })}</SelectItem>
|
|
<SelectItem value="builtin">{formatMessage({ id: 'skills.source.builtin' })}</SelectItem>
|
|
<SelectItem value="custom">{formatMessage({ id: 'skills.source.custom' })}</SelectItem>
|
|
<SelectItem value="community">{formatMessage({ id: 'skills.source.community' })}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={enabledFilter} onValueChange={(v) => setEnabledFilter(v as 'all' | 'enabled' | 'disabled')}>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue placeholder={formatMessage({ id: 'skills.state.enabled' })} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{formatMessage({ id: 'skills.filters.all' })}</SelectItem>
|
|
<SelectItem value="enabled">{formatMessage({ id: 'skills.filters.enabled' })}</SelectItem>
|
|
<SelectItem value="disabled">{formatMessage({ id: 'skills.filters.disabled' })}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Filters */}
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setEnabledFilter('all')}
|
|
className={enabledFilter === 'all' ? 'bg-primary text-primary-foreground' : ''}
|
|
>
|
|
<Sparkles className="w-4 h-4 mr-1" />
|
|
{formatMessage({ id: 'skills.filters.all' })} ({currentLocationTotalCount})
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setEnabledFilter('enabled')}
|
|
className={enabledFilter === 'enabled' ? 'bg-primary text-primary-foreground' : ''}
|
|
>
|
|
<Power className="w-4 h-4 mr-1" />
|
|
{formatMessage({ id: 'skills.state.enabled' })} ({currentLocationEnabledCount})
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setEnabledFilter('disabled')}
|
|
className={enabledFilter === 'disabled' ? 'bg-primary text-primary-foreground' : ''}
|
|
>
|
|
<PowerOff className="w-4 h-4 mr-1" />
|
|
{formatMessage({ id: 'skills.state.disabled' })} ({currentLocationDisabledCount})
|
|
</Button>
|
|
<div className="flex-1" />
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setViewMode(viewMode === 'grid' ? 'compact' : 'grid')}
|
|
>
|
|
{viewMode === 'grid' ? <List className="w-4 h-4 mr-1" /> : <Grid3x3 className="w-4 h-4 mr-1" />}
|
|
{formatMessage({ id: viewMode === 'grid' ? 'skills.view.compact' : 'skills.view.grid' })}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Skills Grid */}
|
|
<SkillGrid
|
|
skills={filteredSkills}
|
|
isLoading={isLoading}
|
|
onToggle={handleToggleWithConfirm}
|
|
onClick={handleSkillClick}
|
|
isToggling={isToggling || !!confirmDisable}
|
|
compact={viewMode === 'compact'}
|
|
/>
|
|
|
|
{/* Disabled Skills Section */}
|
|
{enabledFilter === 'all' && currentLocationDisabledCount > 0 && (
|
|
<div className="mt-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setShowDisabledSection(!showDisabledSection)}
|
|
className="mb-4 text-muted-foreground hover:text-foreground"
|
|
>
|
|
{showDisabledSection ? <ChevronDown className="w-4 h-4 mr-2" /> : <ChevronRight className="w-4 h-4 mr-2" />}
|
|
<EyeOff className="w-4 h-4 mr-2" />
|
|
{formatMessage({ id: 'skills.disabledSkills.title' })} ({currentLocationDisabledCount})
|
|
</Button>
|
|
|
|
{showDisabledSection && (
|
|
<SkillGrid
|
|
skills={skills.filter((s) => !s.enabled)}
|
|
isLoading={false}
|
|
onToggle={handleToggleWithConfirm}
|
|
onClick={handleSkillClick}
|
|
isToggling={isToggling || !!confirmDisable}
|
|
compact={true}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Disable Confirmation Dialog */}
|
|
<AlertDialog open={!!confirmDisable} onOpenChange={(open) => !open && setConfirmDisable(null)}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{formatMessage({ id: 'skills.disableConfirm.title' })}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{formatMessage(
|
|
{ id: 'skills.disableConfirm.message' },
|
|
{ name: confirmDisable?.skill.name || '' }
|
|
)}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>{formatMessage({ id: 'skills.actions.cancel' })}</AlertDialogCancel>
|
|
<AlertDialogAction onClick={handleConfirmDisable} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
|
|
{formatMessage({ id: 'skills.actions.confirmDisable' })}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
{/* Skill Detail Panel */}
|
|
<SkillDetailPanel
|
|
skill={selectedSkill}
|
|
isOpen={isDetailPanelOpen}
|
|
onClose={handleCloseDetailPanel}
|
|
isLoading={isDetailLoading}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SkillsManagerPage;
|