skillverse 0.1.0

package/client/src/pages/Marketplace.tsx

@@ -0,0 +1,282 @@
+import { useEffect, useState } from 'react';
+import { useAppStore } from '../stores/appStore';
+import {
+    Store,
+    Search,
+    Download,
+    GitBranch,
+    Upload,
+    Loader2,
+    Share2,
+} from 'lucide-react';
+import { LoadingPage, EmptyState } from '../components/LoadingSpinner';
+import { marketplaceApi } from '../lib/api';
+import { clsx } from 'clsx';
+import Tooltip from '../components/Tooltip';
+import type { Skill, MarketplaceSkill } from '@skillverse/shared';
+
+export default function Marketplace() {
+    const {
+        marketplaceSkills,
+        marketplaceLoading,
+        fetchMarketplace,
+        skills,
+        fetchSkills,
+        showToast,
+        addSkill,
+    } = useAppStore();
+    const [search, setSearch] = useState('');
+    const [tab, setTab] = useState<'browse' | 'publish'>('browse');
+    const [installing, setInstalling] = useState<string | null>(null);
+    const [publishing, setPublishing] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetchMarketplace(1, search || undefined);
+    }, [fetchMarketplace, search]);
+
+    useEffect(() => {
+        if (tab === 'publish' && skills.length === 0) {
+            fetchSkills();
+        }
+    }, [tab, skills.length, fetchSkills]);
+
+    const handleInstall = async (item: MarketplaceSkill) => {
+        setInstalling(item.id);
+        try {
+            const skill = await marketplaceApi.install(item.id);
+            addSkill(skill);
+            showToast(`Installed "${item.skill.name}" successfully!`, 'success');
+        } catch (err: any) {
+            showToast(err.message || 'Failed to install skill', 'error');
+        } finally {
+            setInstalling(null);
+        }
+    };
+
+    const handlePublish = async (skill: Skill) => {
+        setPublishing(skill.id);
+        try {
+            await marketplaceApi.publish({ skillId: skill.id });
+            showToast(`Published "${skill.name}" to marketplace!`, 'success');
+            fetchMarketplace();
+        } catch (err: any) {
+            showToast(err.message || 'Failed to publish skill', 'error');
+        } finally {
+            setPublishing(null);
+        }
+    };
+
+    const publishedSkillIds = new Set(marketplaceSkills.map((m) => m.skillId));
+
+    return (
+        <div className="space-y-6 animate-fade-in">
+            {/* Header */}
+            <div>
+                <h1 className="text-2xl sm:text-3xl font-bold text-dark-100">Marketplace</h1>
+                <p className="text-dark-400 mt-1 text-sm sm:text-base">
+                    Browse and share skills with your team
+                </p>
+            </div>
+
+            {/* Tabs */}
+            <div className="flex border-b border-dark-700 overflow-x-auto">
+                <button
+                    onClick={() => setTab('browse')}
+                    className={clsx(
+                        'flex items-center gap-2 px-4 sm:px-6 py-3 text-sm font-medium transition-colors whitespace-nowrap',
+                        tab === 'browse'
+                            ? 'text-primary-400 border-b-2 border-primary-400'
+                            : 'text-dark-400 hover:text-dark-200'
+                    )}
+                >
+                    <Store className="w-4 h-4" />
+                    Browse
+                </button>
+                <button
+                    onClick={() => setTab('publish')}
+                    className={clsx(
+                        'flex items-center gap-2 px-4 sm:px-6 py-3 text-sm font-medium transition-colors whitespace-nowrap',
+                        tab === 'publish'
+                            ? 'text-accent-400 border-b-2 border-accent-400'
+                            : 'text-dark-400 hover:text-dark-200'
+                    )}
+                >
+                    <Share2 className="w-4 h-4" />
+                    Publish
+                </button>
+            </div>
+
+            {tab === 'browse' ? (
+                <>
+                    {/* Search */}
+                    <div className="relative max-w-md">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-dark-400" />
+                        <input
+                            type="text"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search marketplace..."
+                            className="input pl-10"
+                        />
+                    </div>
+
+                    {/* Marketplace Grid - Responsive */}
+                    {marketplaceLoading && marketplaceSkills.length === 0 ? (
+                        <LoadingPage />
+                    ) : marketplaceSkills.length > 0 ? (
+                        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
+                            {marketplaceSkills.map((item) => (
+                                <div key={item.id} className="card group">
+                                    <div className="flex items-start justify-between gap-2">
+                                        <div className="flex items-center gap-3 min-w-0 flex-1">
+                                            <div
+                                                className={clsx(
+                                                    'w-10 h-10 rounded-xl flex items-center justify-center shrink-0',
+                                                    item.skill.source === 'git'
+                                                        ? 'bg-primary-500/10 text-primary-400'
+                                                        : 'bg-accent-500/10 text-accent-400'
+                                                )}
+                                            >
+                                                {item.skill.source === 'git' ? (
+                                                    <GitBranch className="w-5 h-5" />
+                                                ) : (
+                                                    <Upload className="w-5 h-5" />
+                                                )}
+                                            </div>
+                                            <div className="min-w-0 flex-1">
+                                                <Tooltip content={item.skill.name} position="top">
+                                                    <h3 className="font-semibold text-dark-100 truncate max-w-[180px] sm:max-w-[200px]">
+                                                        {item.skill.name}
+                                                    </h3>
+                                                </Tooltip>
+                                                <p className="text-xs text-dark-500 truncate">
+                                                    by {item.publisherName || 'Anonymous'}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {item.skill.description && (
+                                        <Tooltip content={item.skill.description} position="bottom">
+                                            <p className="mt-3 text-sm text-dark-400 line-clamp-2 text-justified">
+                                                {item.skill.description}
+                                            </p>
+                                        </Tooltip>
+                                    )}
+
+                                    <div className="mt-4 pt-4 border-t border-dark-700 flex items-center justify-between gap-2">
+                                        <div className="flex items-center gap-2 text-xs text-dark-500">
+                                            <Download className="w-3.5 h-3.5" />
+                                            <span>{item.downloads} downloads</span>
+                                        </div>
+                                        <button
+                                            onClick={() => handleInstall(item)}
+                                            disabled={installing === item.id || item.skill.source !== 'git'}
+                                            className="btn-primary text-xs py-1.5 px-3 shrink-0"
+                                        >
+                                            {installing === item.id ? (
+                                                <Loader2 className="w-3 h-3 animate-spin" />
+                                            ) : (
+                                                <>
+                                                    <Download className="w-3 h-3" />
+                                                    Install
+                                                </>
+                                            )}
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ) : (
+                        <EmptyState
+                            icon={Store}
+                            title="Marketplace is empty"
+                            description="No skills have been published yet. Be the first to share!"
+                        />
+                    )}
+                </>
+            ) : (
+                /* Publish Tab */
+                <div>
+                    <p className="text-dark-400 mb-6 text-sm sm:text-base text-justified">
+                        Share your skills with other team members by publishing them to the
+                        marketplace.
+                    </p>
+
+                    {skills.length > 0 ? (
+                        <div className="space-y-3 sm:space-y-4">
+                            {skills.map((skill) => {
+                                const isPublished = publishedSkillIds.has(skill.id);
+                                return (
+                                    <div
+                                        key={skill.id}
+                                        className="card flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
+                                    >
+                                        <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
+                                            <div
+                                                className={clsx(
+                                                    'w-10 h-10 rounded-xl flex items-center justify-center shrink-0',
+                                                    skill.source === 'git'
+                                                        ? 'bg-primary-500/10 text-primary-400'
+                                                        : 'bg-accent-500/10 text-accent-400'
+                                                )}
+                                            >
+                                                {skill.source === 'git' ? (
+                                                    <GitBranch className="w-5 h-5" />
+                                                ) : (
+                                                    <Upload className="w-5 h-5" />
+                                                )}
+                                            </div>
+                                            <div className="min-w-0 flex-1">
+                                                <Tooltip content={skill.name} position="top">
+                                                    <h3 className="font-medium text-dark-100 truncate">{skill.name}</h3>
+                                                </Tooltip>
+                                                <p className="text-xs sm:text-sm text-dark-500">
+                                                    {skill.source === 'git' ? 'Git Repository' : 'Local Upload'}
+                                                </p>
+                                            </div>
+                                        </div>
+
+                                        <div className="self-end sm:self-auto shrink-0">
+                                            {isPublished ? (
+                                                <span className="text-sm text-green-400 flex items-center gap-1">
+                                                    <Share2 className="w-4 h-4" />
+                                                    Published
+                                                </span>
+                                            ) : skill.source === 'git' ? (
+                                                <button
+                                                    onClick={() => handlePublish(skill)}
+                                                    disabled={publishing === skill.id}
+                                                    className="btn-secondary"
+                                                >
+                                                    {publishing === skill.id ? (
+                                                        <Loader2 className="w-4 h-4 animate-spin" />
+                                                    ) : (
+                                                        <>
+                                                            <Share2 className="w-4 h-4" />
+                                                            Publish
+                                                        </>
+                                                    )}
+                                                </button>
+                                            ) : (
+                                                <span className="text-xs text-dark-500">
+                                                    Only Git skills can be published
+                                                </span>
+                                            )}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    ) : (
+                        <EmptyState
+                            icon={Store}
+                            title="No skills to publish"
+                            description="Add some skills first to share them with your team."
+                        />
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/client/src/pages/Settings.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { FolderOpen, Database, Info, Save, Loader2 } from 'lucide-react';
+import { useAppStore } from '../stores/appStore';
+
+export default function Settings() {
+    const { showToast } = useAppStore();
+    const [skillversePath, setSkillversePath] = useState(
+        import.meta.env.VITE_SKILLVERSE_HOME || '~/.skillverse'
+    );
+    const [apiUrl, setApiUrl] = useState(
+        import.meta.env.VITE_API_URL || 'http://localhost:3001/api'
+    );
+    const [saving, setSaving] = useState(false);
+
+    const handleSave = async () => {
+        setSaving(true);
+        // In a real app, this would save to backend/localStorage
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        showToast('Settings saved successfully!', 'success');
+        setSaving(false);
+    };
+
+    return (
+        <div className="space-y-6 animate-fade-in max-w-2xl">
+            {/* Header */}
+            <div>
+                <h1 className="text-2xl sm:text-3xl font-bold text-dark-100">Settings</h1>
+                <p className="text-dark-400 mt-1 text-sm sm:text-base">
+                    Configure your SkillVerse preferences
+                </p>
+            </div>
+
+            {/* Storage Settings */}
+            <div className="card">
+                <div className="flex items-center gap-3 mb-4 sm:mb-6">
+                    <div className="w-10 h-10 rounded-xl bg-primary-500/10 flex items-center justify-center shrink-0">
+                        <FolderOpen className="w-5 h-5 text-primary-400" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                        <h2 className="font-semibold text-dark-100">Storage</h2>
+                        <p className="text-xs sm:text-sm text-dark-500">Configure skill storage location</p>
+                    </div>
+                </div>
+
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-dark-300 mb-2">
+                            SkillVerse Home Directory
+                        </label>
+                        <input
+                            type="text"
+                            value={skillversePath}
+                            onChange={(e) => setSkillversePath(e.target.value)}
+                            className="input"
+                        />
+                        <p className="mt-1 text-xs text-dark-500">
+                            Where skills and configuration are stored
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {/* API Settings */}
+            <div className="card">
+                <div className="flex items-center gap-3 mb-4 sm:mb-6">
+                    <div className="w-10 h-10 rounded-xl bg-accent-500/10 flex items-center justify-center shrink-0">
+                        <Database className="w-5 h-5 text-accent-400" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                        <h2 className="font-semibold text-dark-100">API</h2>
+                        <p className="text-xs sm:text-sm text-dark-500">Backend connection settings</p>
+                    </div>
+                </div>
+
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-dark-300 mb-2">
+                            API URL
+                        </label>
+                        <input
+                            type="text"
+                            value={apiUrl}
+                            onChange={(e) => setApiUrl(e.target.value)}
+                            className="input"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* About */}
+            <div className="card">
+                <div className="flex items-center gap-3 mb-4 sm:mb-6">
+                    <div className="w-10 h-10 rounded-xl bg-dark-700 flex items-center justify-center shrink-0">
+                        <Info className="w-5 h-5 text-dark-400" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                        <h2 className="font-semibold text-dark-100">About</h2>
+                        <p className="text-xs sm:text-sm text-dark-500">Application information</p>
+                    </div>
+                </div>
+
+                <div className="space-y-3 text-sm">
+                    <div className="flex justify-between items-center gap-4">
+                        <span className="text-dark-400">Version</span>
+                        <span className="text-dark-100">0.1.0</span>
+                    </div>
+                    <div className="flex justify-between items-center gap-4">
+                        <span className="text-dark-400">Platform</span>
+                        <span className="text-dark-100 truncate max-w-[200px]">{navigator.platform}</span>
+                    </div>
+                    <div className="flex justify-between items-center gap-4">
+                        <span className="text-dark-400">License</span>
+                        <span className="text-dark-100">MIT</span>
+                    </div>
+                </div>
+            </div>
+
+            {/* Save Button */}
+            <div className="flex justify-end">
+                <button onClick={handleSave} className="btn-primary w-full sm:w-auto" disabled={saving}>
+                    {saving ? (
+                        <>
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                            Saving...
+                        </>
+                    ) : (
+                        <>
+                            <Save className="w-4 h-4" />
+                            Save Settings
+                        </>
+                    )}
+                </button>
+            </div>
+        </div>
+    );
+}

package/client/src/pages/SkillLibrary.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react';
+import { useAppStore } from '../stores/appStore';
+import { Package, Plus, Search, Grid, List } from 'lucide-react';
+import { LoadingPage, EmptyState } from '../components/LoadingSpinner';
+import SkillCard from '../components/SkillCard';
+import AddSkillDialog from '../components/AddSkillDialog';
+import LinkWorkspaceDialog from '../components/LinkWorkspaceDialog';
+import { skillsApi } from '../lib/api';
+import { clsx } from 'clsx';
+import type { Skill } from '@skillverse/shared';
+
+
+export default function SkillLibrary() {
+    const { skills, skillsLoading, fetchSkills, removeSkill, showToast, checkAllUpdates } = useAppStore();
+    const [showAddDialog, setShowAddDialog] = useState(false);
+    const [linkDialogSkillId, setLinkDialogSkillId] = useState<string | null>(null);
+    const [search, setSearch] = useState('');
+    const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+
+    const linkDialogSkill = skills.find(s => s.id === linkDialogSkillId) || null;
+
+    useEffect(() => {
+        fetchSkills().then(() => {
+            // Check for updates in background after fetching
+            checkAllUpdates();
+        });
+    }, [fetchSkills, checkAllUpdates]);
+
+    const handleDelete = async (skill: Skill) => {
+        if (!confirm(`Are you sure you want to delete "${skill.name}"?`)) return;
+
+        try {
+            await skillsApi.delete(skill.id);
+            removeSkill(skill.id);
+            showToast(`Skill "${skill.name}" deleted`, 'success');
+        } catch (err: any) {
+            showToast(err.message || 'Failed to delete skill', 'error');
+        }
+    };
+
+    const filteredSkills = skills.filter(
+        (skill) =>
+            skill.name.toLowerCase().includes(search.toLowerCase()) ||
+            skill.description?.toLowerCase().includes(search.toLowerCase())
+    );
+
+    if (skillsLoading && skills.length === 0) {
+        return <LoadingPage />;
+    }
+
+    return (
+        <div className="space-y-6 animate-fade-in">
+            {/* Header - Responsive layout */}
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                    <h1 className="text-2xl sm:text-3xl font-bold text-dark-100 truncate">Skill Library</h1>
+                    <p className="text-dark-400 mt-1 text-sm sm:text-base">
+                        Manage your installed skills
+                    </p>
+                </div>
+                <button
+                    onClick={() => setShowAddDialog(true)}
+                    className="btn-primary shrink-0 w-full sm:w-auto"
+                >
+                    <Plus className="w-4 h-4" />
+                    Add Skill
+                </button>
+            </div>
+
+            {/* Filters - Responsive layout */}
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4">
+                <div className="flex-1 relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-dark-400" />
+                    <input
+                        type="text"
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                        placeholder="Search skills..."
+                        className="input pl-10"
+                    />
+                </div>
+                <div className="flex items-center gap-1 bg-dark-800 border border-dark-700 rounded-lg p-1 self-end sm:self-auto">
+                    <button
+                        onClick={() => setViewMode('grid')}
+                        className={clsx(
+                            'p-2 rounded-md transition-colors',
+                            viewMode === 'grid'
+                                ? 'bg-dark-700 text-dark-100'
+                                : 'text-dark-400 hover:text-dark-200'
+                        )}
+                    >
+                        <Grid className="w-4 h-4" />
+                    </button>
+                    <button
+                        onClick={() => setViewMode('list')}
+                        className={clsx(
+                            'p-2 rounded-md transition-colors',
+                            viewMode === 'list'
+                                ? 'bg-dark-700 text-dark-100'
+                                : 'text-dark-400 hover:text-dark-200'
+                        )}
+                    >
+                        <List className="w-4 h-4" />
+                    </button>
+                </div>
+            </div>
+
+            {/* Skills Grid/List - Enhanced responsive breakpoints */}
+            {filteredSkills.length > 0 ? (
+                <div
+                    className={clsx(
+                        viewMode === 'grid'
+                            ? 'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6'
+                            : 'space-y-3 sm:space-y-4'
+                    )}
+                >
+                    {filteredSkills.map((skill) => (
+                        <SkillCard
+                            key={skill.id}
+                            skill={skill}
+                            onLink={() => setLinkDialogSkillId(skill.id)}
+                            onDelete={() => handleDelete(skill)}
+                        />
+                    ))}
+                </div>
+            ) : skills.length === 0 ? (
+                <EmptyState
+                    icon={Package}
+                    title="No skills yet"
+                    description="Add your first skill from a Git repository or local file to get started."
+                    action={
+                        <button
+                            onClick={() => setShowAddDialog(true)}
+                            className="btn-primary"
+                        >
+                            <Plus className="w-4 h-4" />
+                            Add Your First Skill
+                        </button>
+                    }
+                />
+            ) : (
+                <EmptyState
+                    icon={Search}
+                    title="No results found"
+                    description={`No skills matching "${search}"`}
+                />
+            )}
+
+            {/* Dialogs */}
+            <AddSkillDialog
+                isOpen={showAddDialog}
+                onClose={() => setShowAddDialog(false)}
+            />
+            {linkDialogSkillId && (
+                <LinkWorkspaceDialog
+                    isOpen={!!linkDialogSkillId}
+                    skill={linkDialogSkill}
+                    onClose={() => setLinkDialogSkillId(null)}
+                />
+            )}
+        </div>
+    );
+}