admin/DeskClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): prevent render crashes on malformed backend arrays (#384)

Browse Source
This commit is contained in:
paisley
2026-03-10 14:43:19 +08:00
committed by GitHub
Unverified
parent 1bae8229af
commit 19b5b2d540
4 changed files with 143 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/Channels/index.tsx
View File

@@ -111,18 +111,20 @@ export function Channels() {
); );
} }
const safeChannels = Array.isArray(channels) ? channels : [];
return ( return (
<div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden"> <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
<div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16"> <div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
{/* Header */} {/* Header */}
<div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4"> <div className="flex flex-col md:flex-row md:items-start justify-between mb-8 shrink-0 gap-4">
<div> <div>
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}> <h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
{t('title', 'Messaging Channels')} {t('title') || 'Channels'}
</h1> </h1>
<p className="text-[17px] text-foreground/80 font-medium"> <p className="text-[17px] text-foreground/80 font-medium">
{t('subtitle', 'Manage your messaging channels and connections')} {t('subtitle') || 'Connect to messaging platforms.'}
</p> </p>
</div> </div>
@@ -133,15 +135,16 @@ export function Channels() {
void fetchChannels(); void fetchChannels();
void fetchConfiguredTypes(); void fetchConfiguredTypes();
}} }}
disabled={gatewayStatus.state !== 'running'}
className="h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground transition-colors" className="h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground transition-colors"
> >
<RefreshCw className="h-3.5 w-3.5 mr-2" /> <RefreshCw className={cn("h-3.5 w-3.5 mr-2", loading && "animate-spin")} />
{t('refresh')} {t('refresh')}
</Button> </Button>
</div> </div>
</div> </div>
{/* Content Area */} {/* Content Area */}
<div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2"> <div className="flex-1 overflow-y-auto min-h-0 pr-2 -mr-2 space-y-8 pb-10">
{/* Gateway Warning */} {/* Gateway Warning */}
{gatewayStatus.state !== 'running' && ( {gatewayStatus.state !== 'running' && (
@@ -164,13 +167,13 @@ export function Channels() {
)} )}
{/* Available Channels (Configured) */} {/* Available Channels (Configured) */}
{channels.length > 0 && ( {safeChannels.length > 0 && (
<div className="mb-12"> <div className="mb-12">
<h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}> <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
Available Channels Available Channels
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{channels.map((channel) => ( {safeChannels.map((channel) => (
<ChannelCard <ChannelCard
key={channel.id} key={channel.id}
channel={channel} channel={channel}
@@ -190,7 +193,7 @@ export function Channels() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
{displayedChannelTypes.map((type) => { {displayedChannelTypes.map((type) => {
const meta = CHANNEL_META[type]; const meta = CHANNEL_META[type];
const isConfigured = channels.some(c => c.type === type) || configuredTypes.includes(type); const isConfigured = safeChannels.some(c => c.type === type) || configuredTypes.includes(type);
// Hide already configured channels from "Supported Channels" section // Hide already configured channels from "Supported Channels" section
if (isConfigured) return null; if (isConfigured) return null;

35
src/pages/Cron/index.tsx
View File

@@ -284,8 +284,8 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
onClick={() => setSchedule(preset.value)} onClick={() => setSchedule(preset.value)}
className={cn( className={cn(
"justify-start h-10 rounded-xl font-medium text-[13px] transition-all", "justify-start h-10 rounded-xl font-medium text-[13px] transition-all",
schedule === preset.value schedule === preset.value
? "bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border-transparent" ? "bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border-transparent"
: "bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground" : "bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground"
)} )}
> >
@@ -387,7 +387,7 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
}; };
return ( return (
<div <div
className="group flex flex-col p-5 rounded-2xl bg-transparent border border-transparent hover:bg-black/5 dark:hover:bg-white/5 transition-all relative overflow-hidden cursor-pointer" className="group flex flex-col p-5 rounded-2xl bg-transparent border border-transparent hover:bg-black/5 dark:hover:bg-white/5 transition-all relative overflow-hidden cursor-pointer"
onClick={onEdit} onClick={onEdit}
> >
@@ -399,11 +399,11 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
<div className="flex flex-col min-w-0"> <div className="flex flex-col min-w-0">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<h3 className="text-[16px] font-semibold text-foreground truncate">{job.name}</h3> <h3 className="text-[16px] font-semibold text-foreground truncate">{job.name}</h3>
<div <div
className={cn( className={cn(
"w-2 h-2 rounded-full shrink-0", "w-2 h-2 rounded-full shrink-0",
job.enabled ? "bg-green-500" : "bg-muted-foreground" job.enabled ? "bg-green-500" : "bg-muted-foreground"
)} )}
title={job.enabled ? t('stats.active') : t('stats.paused')} title={job.enabled ? t('stats.active') : t('stats.paused')}
/> />
</div> </div>
@@ -413,7 +413,7 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-center gap-2" onClick={e => e.stopPropagation()}> <div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
<Switch <Switch
checked={job.enabled} checked={job.enabled}
@@ -421,7 +421,7 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
/> />
</div> </div>
</div> </div>
<div className="flex-1 flex flex-col justify-end mt-2 pl-[62px]"> <div className="flex-1 flex flex-col justify-end mt-2 pl-[62px]">
<div className="flex items-start gap-2 mb-3"> <div className="flex items-start gap-2 mb-3">
<MessageSquare className="h-3.5 w-3.5 mt-0.5 text-muted-foreground shrink-0" /> <MessageSquare className="h-3.5 w-3.5 mt-0.5 text-muted-foreground shrink-0" />
@@ -483,9 +483,9 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
)} )}
{t('card.runNow')} {t('card.runNow')}
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={handleDelete} onClick={handleDelete}
className="h-8 px-3 text-destructive/70 hover:text-destructive hover:bg-destructive/10 rounded-lg text-[13px] font-medium transition-colors" className="h-8 px-3 text-destructive/70 hover:text-destructive hover:bg-destructive/10 rounded-lg text-[13px] font-medium transition-colors"
> >
@@ -516,9 +516,10 @@ export function Cron() {
}, [fetchJobs, isGatewayRunning]); }, [fetchJobs, isGatewayRunning]);
// Statistics // Statistics
const activeJobs = jobs.filter((j) => j.enabled); const safeJobs = Array.isArray(jobs) ? jobs : [];
const pausedJobs = jobs.filter((j) => !j.enabled); const activeJobs = safeJobs.filter((j) => j.enabled);
const failedJobs = jobs.filter((j) => j.lastRun && !j.lastRun.success); const pausedJobs = safeJobs.filter((j) => !j.enabled);
const failedJobs = safeJobs.filter((j) => j.lastRun && !j.lastRun.success);
const handleSave = useCallback(async (input: CronJobCreateInput) => { const handleSave = useCallback(async (input: CronJobCreateInput) => {
if (editingJob) { if (editingJob) {
@@ -615,11 +616,11 @@ export function Cron() {
</div> </div>
</div> </div>
<div className="mt-4 flex items-baseline gap-3"> <div className="mt-4 flex items-baseline gap-3">
<p className="text-[40px] leading-none font-serif text-foreground">{jobs.length}</p> <p className="text-[40px] leading-none font-serif text-foreground">{safeJobs.length}</p>
<p className="text-[14px] font-medium text-muted-foreground">{t('stats.total')}</p> <p className="text-[14px] font-medium text-muted-foreground">{t('stats.total')}</p>
</div> </div>
</div> </div>
<div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors"> <div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="h-11 w-11 rounded-full bg-green-500/10 flex items-center justify-center"> <div className="h-11 w-11 rounded-full bg-green-500/10 flex items-center justify-center">
@@ -658,7 +659,7 @@ export function Cron() {
</div> </div>
{/* Jobs List */} {/* Jobs List */}
{jobs.length === 0 ? ( {safeJobs.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed"> <div className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
<Clock className="h-10 w-10 mb-4 opacity-50" /> <Clock className="h-10 w-10 mb-4 opacity-50" />
<h3 className="text-lg font-medium mb-2 text-foreground">{t('empty.title')}</h3> <h3 className="text-lg font-medium mb-2 text-foreground">{t('empty.title')}</h3>
@@ -679,7 +680,7 @@ export function Cron() {
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
{jobs.map((job) => ( {safeJobs.map((job) => (
<CronJobCard <CronJobCard
key={job.id} key={job.id}
job={job} job={job}

4
src/pages/Dashboard/index.tsx
View File

@@ -225,7 +225,7 @@ export function Dashboard() {
<CardTitle className="text-lg">{t('connectedChannels')}</CardTitle> <CardTitle className="text-lg">{t('connectedChannels')}</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{channels.length === 0 ? ( {(!Array.isArray(channels) || channels.length === 0) ? (
<FeedbackState <FeedbackState
state="empty" state="empty"
title={t('noChannels')} title={t('noChannels')}
@@ -269,7 +269,7 @@ export function Dashboard() {
<CardTitle className="text-lg">{t('activeSkills')}</CardTitle> <CardTitle className="text-lg">{t('activeSkills')}</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{skills.filter((s) => s.enabled).length === 0 ? ( {(!Array.isArray(skills) || skills.filter((s) => s.enabled).length === 0) ? (
<FeedbackState <FeedbackState
state="empty" state="empty"
title={t('noSkills')} title={t('noSkills')}

221
src/pages/Skills/index.tsx
View File

@@ -56,7 +56,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
// Initialize config from skill // Initialize config from skill
useEffect(() => { useEffect(() => {
if (!skill) return; if (!skill) return;
// API Key // API Key
if (skill.config?.apiKey) { if (skill.config?.apiKey) {
setApiKey(String(skill.config.apiKey)); setApiKey(String(skill.config.apiKey));
@@ -88,14 +88,14 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
method: 'POST', method: 'POST',
body: JSON.stringify({ slug: skill.slug }), body: JSON.stringify({ slug: skill.slug }),
}); });
if (result.success) { if (result.success) {
toast.success(t('toast.openedEditor')); toast.success(t('toast.openedEditor'));
} else { } else {
toast.error(result.error || t('toast.failedEditor')); toast.error(result.error || t('toast.failedEditor'));
}
} catch (err) {
toast.error(t('toast.failedEditor') + ': ' + String(err));
} }
} catch (err) {
toast.error(t('toast.failedEditor') + ': ' + String(err));
}
}; };
const handleAddEnv = () => { const handleAddEnv = () => {
@@ -157,20 +157,20 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
return ( return (
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}> <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
<SheetContent <SheetContent
className="w-full sm:max-w-[450px] p-0 flex flex-col border-l border-black/10 dark:border-white/10 bg-[#f3f1e9] dark:bg-[#1a1a19] shadow-[0_0_40px_rgba(0,0,0,0.2)]" className="w-full sm:max-w-[450px] p-0 flex flex-col border-l border-black/10 dark:border-white/10 bg-[#f3f1e9] dark:bg-[#1a1a19] shadow-[0_0_40px_rgba(0,0,0,0.2)]"
side="right" side="right"
> >
{/* Scrollable Content */} {/* Scrollable Content */}
<div className="flex-1 overflow-y-auto px-8 py-10"> <div className="flex-1 overflow-y-auto px-8 py-10">
<div className="flex flex-col items-center mb-8"> <div className="flex flex-col items-center mb-8">
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-[#2c2c2a] border border-black/5 dark:border-white/5 shrink-0 mb-4 relative shadow-sm"> <div className="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-[#2c2c2a] border border-black/5 dark:border-white/5 shrink-0 mb-4 relative shadow-sm">
<span className="text-3xl">{skill.icon || '🔧'}</span> <span className="text-3xl">{skill.icon || '🔧'}</span>
{skill.isCore && ( {skill.isCore && (
<div className="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-[#1a1a19] rounded-full p-1 shadow-sm border border-black/5 dark:border-white/5"> <div className="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-[#1a1a19] rounded-full p-1 shadow-sm border border-black/5 dark:border-white/5">
<Lock className="h-3 w-3 text-muted-foreground shrink-0" /> <Lock className="h-3 w-3 text-muted-foreground shrink-0" />
</div> </div>
)} )}
</div> </div>
<h2 className="text-[28px] font-serif text-foreground font-normal mb-3 text-center tracking-tight"> <h2 className="text-[28px] font-serif text-foreground font-normal mb-3 text-center tracking-tight">
{skill.name} {skill.name}
@@ -239,7 +239,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
<div className="space-y-2"> <div className="space-y-2">
{envVars.length === 0 && ( {envVars.length === 0 && (
<div className="text-[13px] text-foreground/50 font-medium italic flex items-center bg-[#eeece3] dark:bg-[#151514] border border-black/5 dark:border-white/5 rounded-xl px-4 py-3 shadow-sm"> <div className="text-[13px] text-foreground/50 font-medium italic flex items-center bg-[#eeece3] dark:bg-[#151514] border border-black/5 dark:border-white/5 rounded-xl px-4 py-3 shadow-sm">
{t('detail.noEnvVars', 'No environment variables configured.')} {t('detail.noEnvVars', 'No environment variables configured.')}
</div> </div>
)} )}
@@ -286,14 +286,14 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
</div> </div>
)} )}
</div> </div>
{/* Centered Footer Buttons */} {/* Centered Footer Buttons */}
<div className="pt-8 pb-4 flex items-center justify-center gap-4 w-full px-2 max-w-[340px] mx-auto"> <div className="pt-8 pb-4 flex items-center justify-center gap-4 w-full px-2 max-w-[340px] mx-auto">
{!skill.isCore && ( {!skill.isCore && (
<Button <Button
onClick={handleSaveConfig} onClick={handleSaveConfig}
className={cn( className={cn(
"flex-1 h-[42px] text-[13px] rounded-full font-semibold shadow-sm border border-transparent transition-all", "flex-1 h-[42px] text-[13px] rounded-full font-semibold shadow-sm border border-transparent transition-all",
"bg-[#0a84ff] hover:bg-[#007aff] text-white" "bg-[#0a84ff] hover:bg-[#007aff] text-white"
)} )}
disabled={isSaving} disabled={isSaving}
@@ -301,7 +301,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
{isSaving ? t('detail.saving', 'Saving...') : 'Save Configuration'} {isSaving ? t('detail.saving', 'Saving...') : 'Save Configuration'}
</Button> </Button>
)} )}
{!skill.isCore && ( {!skill.isCore && (
<Button <Button
variant="outline" variant="outline"
@@ -315,8 +315,8 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
} }
}} }}
> >
{!skill.isBundled && onUninstall {!skill.isBundled && onUninstall
? 'Uninstall' ? 'Uninstall'
: (skill.enabled ? t('detail.disable', 'Disable') : t('detail.enable', 'Enable'))} : (skill.enabled ? t('detail.disable', 'Disable') : t('detail.enable', 'Enable'))}
</Button> </Button>
)} )}
@@ -380,7 +380,8 @@ export function Skills() {
}, [fetchSkills, isGatewayRunning]); }, [fetchSkills, isGatewayRunning]);
// Filter skills // Filter skills
const filteredSkills = skills.filter((skill) => { const safeSkills = Array.isArray(skills) ? skills : [];
const filteredSkills = safeSkills.filter((skill) => {
const matchesSearch = skill.name.toLowerCase().includes(searchQuery.toLowerCase()) || const matchesSearch = skill.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
skill.description.toLowerCase().includes(searchQuery.toLowerCase()); skill.description.toLowerCase().includes(searchQuery.toLowerCase());
@@ -404,9 +405,9 @@ export function Skills() {
}); });
const sourceStats = { const sourceStats = {
all: skills.length, all: safeSkills.length,
builtIn: skills.filter(s => s.isBundled).length, builtIn: safeSkills.filter(s => s.isBundled).length,
marketplace: skills.filter(s => !s.isBundled).length, marketplace: safeSkills.filter(s => !s.isBundled).length,
}; };
const bulkToggleVisible = useCallback(async (enable: boolean) => { const bulkToggleVisible = useCallback(async (enable: boolean) => {
@@ -453,7 +454,7 @@ export function Skills() {
} }
}, [enableSkill, disableSkill, t]); }, [enableSkill, disableSkill, t]);
const hasInstalledSkills = skills.some(s => !s.isBundled); const hasInstalledSkills = safeSkills.some(s => !s.isBundled);
const handleOpenSkillsFolder = useCallback(async () => { const handleOpenSkillsFolder = useCallback(async () => {
try { try {
@@ -548,7 +549,7 @@ export function Skills() {
return ( return (
<div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden"> <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
<div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16"> <div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
{/* Header */} {/* Header */}
<div className="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4"> <div className="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
<div> <div>
@@ -559,11 +560,11 @@ export function Skills() {
{t('subtitle') || 'Browse and manage AI capabilities.'} {t('subtitle') || 'Browse and manage AI capabilities.'}
</p> </p>
</div> </div>
<div className="flex items-center gap-3 md:mt-2"> <div className="flex items-center gap-3 md:mt-2">
{hasInstalledSkills && ( {hasInstalledSkills && (
<button <button
onClick={handleOpenSkillsFolder} onClick={handleOpenSkillsFolder}
className="hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 dark:border-white/10 flex items-center justify-center text-foreground/80 hover:text-foreground" className="hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 dark:border-white/10 flex items-center justify-center text-foreground/80 hover:text-foreground"
> >
<FolderOpen className="h-4 w-4 mr-2" /> <FolderOpen className="h-4 w-4 mr-2" />
@@ -678,56 +679,56 @@ export function Skills() {
)} )}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
{activeTab === 'all' && ( {activeTab === 'all' && (
filteredSkills.length === 0 ? ( filteredSkills.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground"> <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
<Puzzle className="h-10 w-10 mb-4 opacity-50" /> <Puzzle className="h-10 w-10 mb-4 opacity-50" />
<p>{searchQuery ? t('noSkillsSearch') : t('noSkillsAvailable')}</p> <p>{searchQuery ? t('noSkillsSearch') : t('noSkillsAvailable')}</p>
</div>
) : (
filteredSkills.map((skill) => (
<div
key={skill.id}
className="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer border-b border-black/5 dark:border-white/5 last:border-0"
onClick={() => setSelectedSkill(skill)}
>
<div className="flex items-start gap-4 flex-1 overflow-hidden pr-4">
<div className="h-10 w-10 shrink-0 flex items-center justify-center text-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl overflow-hidden">
{skill.icon || '🧩'}
</div>
<div className="flex flex-col overflow-hidden">
<div className="flex items-center gap-2 mb-1">
<h3 className="text-[15px] font-semibold text-foreground truncate">{skill.name}</h3>
{skill.isCore ? (
<Lock className="h-3 w-3 text-muted-foreground" />
) : skill.isBundled ? (
<Puzzle className="h-3 w-3 text-blue-500/70" />
) : null}
</div>
<p className="text-[13.5px] text-muted-foreground line-clamp-1 pr-6 leading-relaxed">
{skill.description}
</p>
</div>
</div>
<div className="flex items-center gap-6 shrink-0" onClick={e => e.stopPropagation()}>
{skill.version && (
<span className="text-[13px] font-mono text-muted-foreground">
v{skill.version}
</span>
)}
<Switch
checked={skill.enabled}
onCheckedChange={(checked) => handleToggle(skill.id, checked)}
disabled={skill.isCore}
/>
</div>
</div> </div>
)) ) : (
) filteredSkills.map((skill) => (
)} <div
key={skill.id}
className="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer border-b border-black/5 dark:border-white/5 last:border-0"
onClick={() => setSelectedSkill(skill)}
>
<div className="flex items-start gap-4 flex-1 overflow-hidden pr-4">
<div className="h-10 w-10 shrink-0 flex items-center justify-center text-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl overflow-hidden">
{skill.icon || '🧩'}
</div>
<div className="flex flex-col overflow-hidden">
<div className="flex items-center gap-2 mb-1">
<h3 className="text-[15px] font-semibold text-foreground truncate">{skill.name}</h3>
{skill.isCore ? (
<Lock className="h-3 w-3 text-muted-foreground" />
) : skill.isBundled ? (
<Puzzle className="h-3 w-3 text-blue-500/70" />
) : null}
</div>
<p className="text-[13.5px] text-muted-foreground line-clamp-1 pr-6 leading-relaxed">
{skill.description}
</p>
</div>
</div>
<div className="flex items-center gap-6 shrink-0" onClick={e => e.stopPropagation()}>
{skill.version && (
<span className="text-[13px] font-mono text-muted-foreground">
v{skill.version}
</span>
)}
<Switch
checked={skill.enabled}
onCheckedChange={(checked) => handleToggle(skill.id, checked)}
disabled={skill.isCore}
/>
</div>
</div>
))
)
)}
{activeTab === 'marketplace' && ( {activeTab === 'marketplace' && (
<div className="flex flex-col gap-1 mt-2"> <div className="flex flex-col gap-1 mt-2">
{searchError && ( {searchError && (
<div className="mb-4 p-4 rounded-xl border border-destructive/50 bg-destructive/10 text-destructive text-sm font-medium flex items-center gap-2"> <div className="mb-4 p-4 rounded-xl border border-destructive/50 bg-destructive/10 text-destructive text-sm font-medium flex items-center gap-2">
<AlertCircle className="h-5 w-5 shrink-0" /> <AlertCircle className="h-5 w-5 shrink-0" />
@@ -738,7 +739,7 @@ export function Skills() {
</span> </span>
</div> </div>
)} )}
{activeTab === 'marketplace' && marketplaceQuery && searching && ( {activeTab === 'marketplace' && marketplaceQuery && searching && (
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground"> <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
<LoadingSpinner size="lg" /> <LoadingSpinner size="lg" />
@@ -748,9 +749,9 @@ export function Skills() {
{searchResults.length > 0 ? ( {searchResults.length > 0 ? (
searchResults.map((skill) => { searchResults.map((skill) => {
const isInstalled = skills.some(s => s.id === skill.slug || s.name === skill.name); const isInstalled = safeSkills.some(s => s.id === skill.slug || s.name === skill.name);
const isInstallLoading = !!installing[skill.slug]; const isInstallLoading = !!installing[skill.slug];
return ( return (
<div <div
key={skill.slug} key={skill.slug}
@@ -774,32 +775,32 @@ export function Skills() {
</div> </div>
</div> </div>
<div className="flex items-center gap-4 shrink-0" onClick={e => e.stopPropagation()}> <div className="flex items-center gap-4 shrink-0" onClick={e => e.stopPropagation()}>
{skill.version && ( {skill.version && (
<span className="text-[13px] font-mono text-muted-foreground mr-2"> <span className="text-[13px] font-mono text-muted-foreground mr-2">
v{skill.version} v{skill.version}
</span> </span>
)} )}
{isInstalled ? ( {isInstalled ? (
<Button <Button
variant="destructive" variant="destructive"
size="sm" size="sm"
onClick={() => handleUninstall(skill.slug)} onClick={() => handleUninstall(skill.slug)}
disabled={isInstallLoading} disabled={isInstallLoading}
className="h-8 shadow-none" className="h-8 shadow-none"
> >
{isInstallLoading ? <LoadingSpinner size="sm" /> : <Trash2 className="h-3.5 w-3.5" />} {isInstallLoading ? <LoadingSpinner size="sm" /> : <Trash2 className="h-3.5 w-3.5" />}
</Button> </Button>
) : ( ) : (
<Button <Button
variant="default" variant="default"
size="sm" size="sm"
onClick={() => handleInstall(skill.slug)} onClick={() => handleInstall(skill.slug)}
disabled={isInstallLoading} disabled={isInstallLoading}
className="h-8 px-4 rounded-full shadow-none font-medium text-xs" className="h-8 px-4 rounded-full shadow-none font-medium text-xs"
> >
{isInstallLoading ? <LoadingSpinner size="sm" /> : t('marketplace.install', 'Install')} {isInstallLoading ? <LoadingSpinner size="sm" /> : t('marketplace.install', 'Install')}
</Button> </Button>
)} )}
</div> </div>
</div> </div>
); );