skillverse 0.1.0

package/client/src/components/AddSkillDialog.tsx

@@ -0,0 +1,249 @@
+import { useState } from 'react';
+import { X, GitBranch, Upload, Loader2 } from 'lucide-react';
+import { clsx } from 'clsx';
+import { useDropzone } from 'react-dropzone';
+import { skillsApi } from '../lib/api';
+import { useAppStore } from '../stores/appStore';
+
+interface AddSkillDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export default function AddSkillDialog({ isOpen, onClose }: AddSkillDialogProps) {
+    const [tab, setTab] = useState<'git' | 'local'>('git');
+    const [gitUrl, setGitUrl] = useState('');
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [file, setFile] = useState<File | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    const { addSkill, showToast } = useAppStore();
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        accept: { 'application/zip': ['.zip'] },
+        maxFiles: 1,
+        onDrop: (acceptedFiles) => {
+            if (acceptedFiles.length > 0) {
+                setFile(acceptedFiles[0]);
+                if (!name) {
+                    setName(acceptedFiles[0].name.replace('.zip', ''));
+                }
+            }
+        },
+    });
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            let skill;
+            if (tab === 'git') {
+                if (!gitUrl) {
+                    setError('Git URL is required');
+                    setLoading(false);
+                    return;
+                }
+                skill = await skillsApi.createFromGit({ gitUrl, description });
+            } else {
+                if (!name || !file) {
+                    setError('Name and file are required');
+                    setLoading(false);
+                    return;
+                }
+                skill = await skillsApi.createFromLocal(name, file, description);
+            }
+
+            addSkill(skill);
+            showToast(`Skill "${skill.name}" added successfully!`, 'success');
+            handleClose();
+        } catch (err: any) {
+            setError(err.message || 'Failed to add skill');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setGitUrl('');
+        setName('');
+        setDescription('');
+        setFile(null);
+        setError('');
+        setTab('git');
+        onClose();
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4">
+            {/* Backdrop */}
+            <div
+                className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm"
+                onClick={handleClose}
+            />
+
+            {/* Dialog */}
+            <div className="relative w-full max-w-lg bg-dark-800 border border-dark-700 rounded-2xl shadow-2xl animate-scale-in max-h-[90vh] overflow-y-auto">
+                {/* Header */}
+                <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-dark-700 sticky top-0 bg-dark-800 z-10">
+                    <h2 className="text-lg font-semibold text-dark-100">Add New Skill</h2>
+                    <button onClick={handleClose} className="btn-icon">
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Tabs */}
+                <div className="flex border-b border-dark-700">
+                    <button
+                        onClick={() => setTab('git')}
+                        className={clsx(
+                            'flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-colors',
+                            tab === 'git'
+                                ? 'text-primary-400 border-b-2 border-primary-400 bg-primary-500/5'
+                                : 'text-dark-400 hover:text-dark-200'
+                        )}
+                    >
+                        <GitBranch className="w-4 h-4" />
+                        <span className="hidden sm:inline">From Git</span>
+                        <span className="sm:hidden">Git</span>
+                    </button>
+                    <button
+                        onClick={() => setTab('local')}
+                        className={clsx(
+                            'flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-colors',
+                            tab === 'local'
+                                ? 'text-accent-400 border-b-2 border-accent-400 bg-accent-500/5'
+                                : 'text-dark-400 hover:text-dark-200'
+                        )}
+                    >
+                        <Upload className="w-4 h-4" />
+                        <span className="hidden sm:inline">Local Upload</span>
+                        <span className="sm:hidden">Upload</span>
+                    </button>
+                </div>
+
+                {/* Content */}
+                <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-4">
+                    {tab === 'git' ? (
+                        <div>
+                            <label className="block text-sm font-medium text-dark-300 mb-2">
+                                Git Repository URL
+                            </label>
+                            <input
+                                type="url"
+                                value={gitUrl}
+                                onChange={(e) => setGitUrl(e.target.value)}
+                                placeholder="https://github.com/user/skill-repo.git"
+                                className="input"
+                                disabled={loading}
+                            />
+                            <p className="mt-2 text-xs text-dark-500">
+                                Enter the Git URL to clone the skill repository
+                            </p>
+                        </div>
+                    ) : (
+                        <>
+                            <div>
+                                <label className="block text-sm font-medium text-dark-300 mb-2">
+                                    Skill Name
+                                </label>
+                                <input
+                                    type="text"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    placeholder="my-awesome-skill"
+                                    className="input"
+                                    disabled={loading}
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-dark-300 mb-2">
+                                    Upload ZIP File
+                                </label>
+                                <div
+                                    {...getRootProps()}
+                                    className={clsx(
+                                        'border-2 border-dashed rounded-xl p-6 sm:p-8 text-center cursor-pointer transition-all',
+                                        isDragActive
+                                            ? 'border-accent-400 bg-accent-500/10'
+                                            : 'border-dark-600 hover:border-dark-500 hover:bg-dark-750',
+                                        loading && 'opacity-50 pointer-events-none'
+                                    )}
+                                >
+                                    <input {...getInputProps()} />
+                                    <Upload className="w-8 h-8 sm:w-10 sm:h-10 mx-auto text-dark-400 mb-3" />
+                                    {file ? (
+                                        <p className="text-dark-100 font-medium text-sm sm:text-base truncate">{file.name}</p>
+                                    ) : isDragActive ? (
+                                        <p className="text-accent-400 text-sm sm:text-base">Drop the file here...</p>
+                                    ) : (
+                                        <>
+                                            <p className="text-dark-300 text-sm sm:text-base">
+                                                Drag & drop a ZIP file here, or click to select
+                                            </p>
+                                            <p className="text-xs text-dark-500 mt-1">
+                                                Only .zip files are supported
+                                            </p>
+                                        </>
+                                    )}
+                                </div>
+                            </div>
+                        </>
+                    )}
+
+                    <div>
+                        <label className="block text-sm font-medium text-dark-300 mb-2">
+                            Description (optional)
+                        </label>
+                        <textarea
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder="A brief description of this skill..."
+                            rows={3}
+                            className="input resize-none"
+                            disabled={loading}
+                        />
+                    </div>
+
+                    {error && (
+                        <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+                            {error}
+                        </div>
+                    )}
+
+                    {/* Actions */}
+                    <div className="flex gap-3 pt-2">
+                        <button
+                            type="button"
+                            onClick={handleClose}
+                            className="btn-secondary flex-1"
+                            disabled={loading}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            className="btn-primary flex-1"
+                            disabled={loading}
+                        >
+                            {loading ? (
+                                <>
+                                    <Loader2 className="w-4 h-4 animate-spin" />
+                                    Adding...
+                                </>
+                            ) : (
+                                'Add Skill'
+                            )}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

package/client/src/components/Layout.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
+import {
+    LayoutDashboard,
+    Package,
+    FolderOpen,
+    Store,
+    Settings,
+    Sparkles,
+    Menu,
+    X,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import Toast from './Toast';
+
+const navItems = [
+    { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
+    { to: '/skills', icon: Package, label: 'Skill Library' },
+    { to: '/workspaces', icon: FolderOpen, label: 'Workspaces' },
+    { to: '/marketplace', icon: Store, label: 'Marketplace' },
+    { to: '/settings', icon: Settings, label: 'Settings' },
+];
+
+export default function Layout() {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+    // Close mobile menu when window resizes above mobile breakpoint
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth >= 768) {
+                setIsMobileMenuOpen(false);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    // Close mobile menu on navigation
+    const handleNavClick = () => {
+        setIsMobileMenuOpen(false);
+    };
+
+    return (
+        <div className="flex h-screen bg-dark-900">
+            {/* Mobile Menu Toggle */}
+            <button
+                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                className="fixed top-4 left-4 z-50 md:hidden btn-icon bg-dark-800 border border-dark-700 shadow-lg"
+                aria-label="Toggle menu"
+            >
+                {isMobileMenuOpen ? (
+                    <X className="w-5 h-5" />
+                ) : (
+                    <Menu className="w-5 h-5" />
+                )}
+            </button>
+
+            {/* Mobile Backdrop */}
+            {isMobileMenuOpen && (
+                <div
+                    className="fixed inset-0 z-30 bg-dark-950/80 backdrop-blur-sm md:hidden"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                />
+            )}
+
+            {/* Sidebar */}
+            <aside
+                className={clsx(
+                    'fixed md:relative z-40 h-full bg-dark-800 border-r border-dark-700 flex flex-col',
+                    'w-64 lg:w-64 md:w-16',
+                    'transition-transform duration-300 ease-in-out',
+                    isMobileMenuOpen
+                        ? 'translate-x-0'
+                        : '-translate-x-full md:translate-x-0'
+                )}
+            >
+                {/* Logo */}
+                <div className="h-16 flex items-center gap-3 px-6 md:px-3 lg:px-6 border-b border-dark-700">
+                    <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center shrink-0">
+                        <Sparkles className="w-5 h-5 text-white" />
+                    </div>
+                    <span className="text-xl font-bold bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent md:hidden lg:block">
+                        SkillVerse
+                    </span>
+                </div>
+
+                {/* Navigation */}
+                <nav className="flex-1 p-4 md:p-2 lg:p-4 space-y-1">
+                    {navItems.map((item) => (
+                        <NavLink
+                            key={item.to}
+                            to={item.to}
+                            onClick={handleNavClick}
+                            className={({ isActive }) =>
+                                clsx(
+                                    'flex items-center gap-3 px-4 md:px-3 lg:px-4 py-3 rounded-xl transition-all duration-200',
+                                    'md:justify-center lg:justify-start',
+                                    isActive
+                                        ? 'bg-primary-500/10 text-primary-400 shadow-lg shadow-primary-500/5'
+                                        : 'text-dark-400 hover:text-dark-100 hover:bg-dark-700'
+                                )
+                            }
+                            title={item.label}
+                        >
+                            <item.icon className="w-5 h-5 shrink-0" />
+                            <span className="font-medium md:hidden lg:block">
+                                {item.label}
+                            </span>
+                        </NavLink>
+                    ))}
+                </nav>
+
+                {/* Footer */}
+                <div className="p-4 md:p-2 lg:p-4 border-t border-dark-700">
+                    <div className="glass-light rounded-xl p-4 md:p-2 lg:p-4">
+                        <p className="text-sm text-dark-400 md:hidden lg:block">Version 0.1.0</p>
+                        <p className="text-xs text-dark-500 mt-1 md:hidden lg:block">Claude Skills Manager</p>
+                        <p className="text-xs text-dark-500 md:block lg:hidden hidden">v0.1</p>
+                    </div>
+                </div>
+            </aside>
+
+            {/* Main Content */}
+            <main className="flex-1 flex flex-col overflow-hidden md:ml-0">
+                <div className="flex-1 overflow-auto p-4 pt-16 md:pt-8 md:p-6 lg:p-8">
+                    <Outlet />
+                </div>
+            </main>
+
+            {/* Toast */}
+            <Toast />
+        </div>
+    );
+}

package/client/src/components/LinkWorkspaceDialog.tsx

@@ -0,0 +1,196 @@
+import { useState, useEffect } from 'react';
+import { X, Loader2, Check, FolderOpen } from 'lucide-react';
+import { clsx } from 'clsx';
+import { useAppStore } from '../stores/appStore';
+import { skillsApi } from '../lib/api';
+import Tooltip from './Tooltip';
+import type { Skill } from '@skillverse/shared';
+
+interface LinkWorkspaceDialogProps {
+    isOpen: boolean;
+    skill: Skill | null;
+    onClose: () => void;
+}
+
+export default function LinkWorkspaceDialog({
+    isOpen,
+    skill,
+    onClose,
+}: LinkWorkspaceDialogProps) {
+    const { workspaces, fetchWorkspaces, showToast, fetchSkills } = useAppStore();
+    const [selectedId, setSelectedId] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    // Get linked workspace IDs
+    const linkedWorkspaceIds = new Set(
+        (skill as any)?.linkedWorkspaces?.map((lw: any) => lw.workspaceId) || []
+    );
+
+    useEffect(() => {
+        if (isOpen && workspaces.length === 0) {
+            fetchWorkspaces();
+        }
+    }, [isOpen, workspaces.length, fetchWorkspaces]);
+
+    const handleLink = async () => {
+        if (!skill || !selectedId) return;
+
+        setLoading(true);
+        try {
+            await skillsApi.linkToWorkspace(skill.id, selectedId);
+            showToast(`Skill linked to workspace successfully!`, 'success');
+            fetchSkills(); // Refresh to update linked count
+            onClose();
+        } catch (err: any) {
+            showToast(err.message || 'Failed to link skill', 'error');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleUnlink = async (workspaceId: string) => {
+        if (!skill) return;
+
+        setLoading(true);
+        try {
+            await skillsApi.unlinkFromWorkspace(skill.id, workspaceId);
+            showToast('Skill unlinked from workspace', 'success');
+            fetchSkills();
+        } catch (err: any) {
+            showToast(err.message || 'Failed to unlink skill', 'error');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (!isOpen || !skill) return null;
+
+    const availableWorkspaces = workspaces.filter((w) => !linkedWorkspaceIds.has(w.id));
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4">
+            <div
+                className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm"
+                onClick={onClose}
+            />
+
+            <div className="relative w-full max-w-md bg-dark-800 border border-dark-700 rounded-2xl shadow-2xl animate-scale-in max-h-[90vh] overflow-y-auto">
+                <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-dark-700 sticky top-0 bg-dark-800 z-10">
+                    <div className="min-w-0 flex-1 pr-4">
+                        <h2 className="text-lg font-semibold text-dark-100">Link to Workspace</h2>
+                        <Tooltip content={skill.name} position="bottom">
+                            <p className="text-sm text-dark-400 mt-0.5 truncate">{skill.name}</p>
+                        </Tooltip>
+                    </div>
+                    <button onClick={onClose} className="btn-icon shrink-0">
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                <div className="p-4 sm:p-6 space-y-4">
+                    {/* Already Linked */}
+                    {linkedWorkspaceIds.size > 0 && (
+                        <div>
+                            <h3 className="text-sm font-medium text-dark-300 mb-2">Linked Workspaces</h3>
+                            <div className="space-y-2">
+                                {workspaces
+                                    .filter((w) => linkedWorkspaceIds.has(w.id))
+                                    .map((workspace) => (
+                                        <div
+                                            key={workspace.id}
+                                            className="flex items-center justify-between p-3 rounded-lg bg-primary-500/10 border border-primary-500/30 gap-2"
+                                        >
+                                            <div className="flex items-center gap-3 min-w-0 flex-1">
+                                                <FolderOpen className="w-4 h-4 text-primary-400 shrink-0" />
+                                                <Tooltip content={workspace.name} position="top">
+                                                    <span className="text-sm text-dark-100 truncate">{workspace.name}</span>
+                                                </Tooltip>
+                                            </div>
+                                            <button
+                                                onClick={() => handleUnlink(workspace.id)}
+                                                className="text-xs text-dark-400 hover:text-red-400 transition-colors shrink-0"
+                                                disabled={loading}
+                                            >
+                                                Unlink
+                                            </button>
+                                        </div>
+                                    ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Available Workspaces */}
+                    {availableWorkspaces.length > 0 ? (
+                        <div>
+                            <h3 className="text-sm font-medium text-dark-300 mb-2">
+                                Available Workspaces
+                            </h3>
+                            <div className="space-y-2 max-h-60 overflow-auto">
+                                {availableWorkspaces.map((workspace) => (
+                                    <button
+                                        key={workspace.id}
+                                        onClick={() => setSelectedId(workspace.id)}
+                                        className={clsx(
+                                            'w-full flex items-center justify-between p-3 rounded-lg border transition-all gap-2',
+                                            selectedId === workspace.id
+                                                ? 'bg-primary-500/10 border-primary-500/50 text-dark-100'
+                                                : 'bg-dark-750 border-dark-600 text-dark-300 hover:border-dark-500'
+                                        )}
+                                        disabled={loading}
+                                    >
+                                        <div className="flex items-center gap-3 min-w-0 flex-1">
+                                            <FolderOpen className="w-4 h-4 shrink-0" />
+                                            <div className="text-left min-w-0 flex-1">
+                                                <p className="text-sm font-medium truncate">{workspace.name}</p>
+                                                <p className="text-xs text-dark-500">{workspace.type}</p>
+                                            </div>
+                                        </div>
+                                        {selectedId === workspace.id && (
+                                            <Check className="w-4 h-4 text-primary-400 shrink-0" />
+                                        )}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    ) : linkedWorkspaceIds.size === 0 ? (
+                        <div className="text-center py-6 sm:py-8">
+                            <FolderOpen className="w-10 h-10 sm:w-12 sm:h-12 mx-auto text-dark-600 mb-3" />
+                            <p className="text-dark-400 text-sm sm:text-base">No workspaces available</p>
+                            <p className="text-xs sm:text-sm text-dark-500 mt-1">
+                                Add a workspace first to link skills
+                            </p>
+                        </div>
+                    ) : null}
+
+                    {/* Actions */}
+                    <div className="flex gap-3 pt-2">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="btn-secondary flex-1"
+                            disabled={loading}
+                        >
+                            Close
+                        </button>
+                        {availableWorkspaces.length > 0 && (
+                            <button
+                                onClick={handleLink}
+                                className="btn-primary flex-1"
+                                disabled={loading || !selectedId}
+                            >
+                                {loading ? (
+                                    <>
+                                        <Loader2 className="w-4 h-4 animate-spin" />
+                                        Linking...
+                                    </>
+                                ) : (
+                                    'Link Skill'
+                                )}
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/client/src/components/LoadingSpinner.tsx

@@ -0,0 +1,57 @@
+import { Loader2 } from 'lucide-react';
+import { clsx } from 'clsx';
+
+interface LoadingSpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+
+export default function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+    const sizes = {
+        sm: 'w-4 h-4',
+        md: 'w-6 h-6',
+        lg: 'w-10 h-10',
+    };
+
+    return (
+        <Loader2
+            className={clsx('animate-spin text-primary-400', sizes[size], className)}
+        />
+    );
+}
+
+export function LoadingPage() {
+    return (
+        <div className="flex-1 flex items-center justify-center">
+            <div className="text-center">
+                <LoadingSpinner size="lg" />
+                <p className="mt-4 text-dark-400">Loading...</p>
+            </div>
+        </div>
+    );
+}
+
+export function EmptyState({
+    icon: Icon,
+    title,
+    description,
+    action,
+}: {
+    icon: React.ComponentType<{ className?: string }>;
+    title: string;
+    description: string;
+    action?: React.ReactNode;
+}) {
+    return (
+        <div className="flex-1 flex items-center justify-center">
+            <div className="text-center max-w-md">
+                <div className="w-16 h-16 mx-auto rounded-2xl bg-dark-800 border border-dark-700 flex items-center justify-center mb-4">
+                    <Icon className="w-8 h-8 text-dark-400" />
+                </div>
+                <h3 className="text-lg font-semibold text-dark-100 mb-2">{title}</h3>
+                <p className="text-dark-400 mb-6">{description}</p>
+                {action}
+            </div>
+        </div>
+    );
+}