skillverse 0.1.0

package/client/src/stores/appStore.ts

@@ -0,0 +1,222 @@
+import { create } from 'zustand';
+import type { Skill, Workspace, DashboardStats, MarketplaceSkill } from '@skillverse/shared';
+import { skillsApi, workspacesApi, dashboardApi, marketplaceApi } from '../lib/api';
+
+interface AppState {
+    // Skills
+    skills: Skill[];
+    skillsLoading: boolean;
+    skillsError: string | null;
+    fetchSkills: () => Promise<void>;
+    addSkill: (skill: Skill) => void;
+    updateSkill: (id: string, skill: Partial<Skill>) => void;
+    removeSkill: (id: string) => void;
+    checkUpdate: (id: string) => Promise<void>;
+    checkAllUpdates: () => Promise<void>;
+    upgradeSkill: (id: string) => Promise<void>;
+    skillUpdates: Record<string, boolean>; // Map of skillId -> hasUpdate
+    skillUpdateChecking: Record<string, boolean>; // Map of skillId -> isChecking
+
+    // Workspaces
+    workspaces: Workspace[];
+    workspacesLoading: boolean;
+    workspacesError: string | null;
+    fetchWorkspaces: () => Promise<void>;
+    addWorkspace: (workspace: Workspace) => void;
+    updateWorkspace: (id: string, workspace: Partial<Workspace>) => void;
+    removeWorkspace: (id: string) => void;
+
+    // Dashboard
+    stats: DashboardStats | null;
+    statsLoading: boolean;
+    fetchStats: () => Promise<void>;
+
+    // Marketplace
+    marketplaceSkills: MarketplaceSkill[];
+    marketplaceLoading: boolean;
+    marketplaceTotal: number;
+    fetchMarketplace: (page?: number, search?: string) => Promise<void>;
+
+    // UI State
+    toast: { message: string; type: 'success' | 'error' | 'info' } | null;
+    showToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+    hideToast: () => void;
+}
+
+export const useAppStore = create<AppState>((set, get) => ({
+    // Skills state
+    skills: [],
+    skillsLoading: false,
+    skillsError: null,
+
+    fetchSkills: async () => {
+        set({ skillsLoading: true, skillsError: null });
+        try {
+            const skills = await skillsApi.getAll();
+            set({ skills, skillsLoading: false });
+        } catch (error: any) {
+            set({ skillsError: error.message, skillsLoading: false });
+        }
+    },
+
+    addSkill: (skill) => {
+        set((state) => ({ skills: [skill, ...state.skills] }));
+    },
+
+    updateSkill: (id, updatedSkill) => {
+        set((state) => ({
+            skills: state.skills.map((s) => (s.id === id ? { ...s, ...updatedSkill } : s)),
+        }));
+    },
+
+    removeSkill: (id) => {
+        set((state) => ({ skills: state.skills.filter((s) => s.id !== id) }));
+    },
+
+    skillUpdates: {},
+    skillUpdateChecking: {},
+
+    checkUpdate: async (id) => {
+        set((state) => ({
+            skillUpdateChecking: { ...state.skillUpdateChecking, [id]: true }
+        }));
+        try {
+            const result = await skillsApi.checkUpdate(id);
+            if (result.hasUpdate) {
+                set((state) => ({
+                    skillUpdates: { ...state.skillUpdates, [id]: true }
+                }));
+                // Optionally show toast or notification
+                get().showToast(`Update available for skill`, 'info');
+            } else {
+                get().showToast(`Skill is up to date`, 'success');
+            }
+        } catch (error: any) {
+            get().showToast(error.message || 'Failed to check for updates', 'error');
+        } finally {
+            set((state) => ({
+                skillUpdateChecking: { ...state.skillUpdateChecking, [id]: false }
+            }));
+        }
+    },
+
+    checkAllUpdates: async () => {
+        // Mark all git skills as checking? Or adds a global checking state?
+        // For now just background check
+        try {
+            const results = await skillsApi.checkUpdates();
+            const updates: Record<string, boolean> = {};
+
+            Object.entries(results).forEach(([id, result]) => {
+                if (result.hasUpdate) {
+                    updates[id] = true;
+                }
+            });
+
+            if (Object.keys(updates).length > 0) {
+                set(state => ({
+                    skillUpdates: { ...state.skillUpdates, ...updates }
+                }));
+                get().showToast(`${Object.keys(updates).length} skills have updates available`, 'info');
+            }
+        } catch (error) {
+            console.error('Failed to check all updates:', error);
+        }
+    },
+
+    upgradeSkill: async (id) => {
+        // Can add loading state for upgrade if needed, for now reuse skillsLoading or local state
+        set({ skillsLoading: true });
+        try {
+            const upgradedSkill = await skillsApi.upgrade(id);
+            set((state) => ({
+                skills: state.skills.map(s => s.id === id ? upgradedSkill : s),
+                skillUpdates: { ...state.skillUpdates, [id]: false }, // Clear update flag
+                skillsLoading: false
+            }));
+            get().showToast(`Skill "${upgradedSkill.name}" upgraded successfully`, 'success');
+        } catch (error: any) {
+            set({ skillsLoading: false });
+            get().showToast(error.message || 'Failed to upgrade skill', 'error');
+        }
+    },
+
+    // Workspaces state
+    workspaces: [],
+    workspacesLoading: false,
+    workspacesError: null,
+
+    fetchWorkspaces: async () => {
+        set({ workspacesLoading: true, workspacesError: null });
+        try {
+            const workspaces = await workspacesApi.getAll();
+            set({ workspaces, workspacesLoading: false });
+        } catch (error: any) {
+            set({ workspacesError: error.message, workspacesLoading: false });
+        }
+    },
+
+    addWorkspace: (workspace) => {
+        set((state) => ({ workspaces: [workspace, ...state.workspaces] }));
+    },
+
+    updateWorkspace: (id, updatedWorkspace) => {
+        set((state) => ({
+            workspaces: state.workspaces.map((w) => (w.id === id ? { ...w, ...updatedWorkspace } : w)),
+        }));
+    },
+
+    removeWorkspace: (id) => {
+        set((state) => ({ workspaces: state.workspaces.filter((w) => w.id !== id) }));
+    },
+
+    // Dashboard state
+    stats: null,
+    statsLoading: false,
+
+    fetchStats: async () => {
+        set({ statsLoading: true });
+        try {
+            const stats = await dashboardApi.getStats();
+            set({ stats, statsLoading: false });
+        } catch (error) {
+            set({ statsLoading: false });
+        }
+    },
+
+    // Marketplace state
+    marketplaceSkills: [],
+    marketplaceLoading: false,
+    marketplaceTotal: 0,
+
+    fetchMarketplace: async (page = 1, search) => {
+        set({ marketplaceLoading: true });
+        try {
+            const result = await marketplaceApi.getSkills(page, 20, search);
+            set({
+                marketplaceSkills: result.items,
+                marketplaceTotal: result.total,
+                marketplaceLoading: false,
+            });
+        } catch (error) {
+            set({ marketplaceLoading: false });
+        }
+    },
+
+    // UI State
+    toast: null,
+
+    showToast: (message, type = 'info') => {
+        set({ toast: { message, type } });
+        // Auto hide after 4 seconds
+        setTimeout(() => {
+            if (get().toast?.message === message) {
+                set({ toast: null });
+            }
+        }, 4000);
+    },
+
+    hideToast: () => {
+        set({ toast: null });
+    },
+}));

package/client/tailwind.config.js

@@ -0,0 +1,82 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+          950: '#082f49',
+        },
+        accent: {
+          50: '#fdf4ff',
+          100: '#fae8ff',
+          200: '#f5d0fe',
+          300: '#f0abfc',
+          400: '#e879f9',
+          500: '#d946ef',
+          600: '#c026d3',
+          700: '#a21caf',
+          800: '#86198f',
+          900: '#701a75',
+          950: '#4a044e',
+        },
+        dark: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        },
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-out',
+        'slide-in': 'slideIn 0.3s ease-out',
+        'scale-in': 'scaleIn 0.2s ease-out',
+        'pulse-subtle': 'pulseSubtle 2s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideIn: {
+          '0%': { opacity: '0', transform: 'translateY(-10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        pulseSubtle: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.8' },
+        },
+      },
+      boxShadow: {
+        'glow': '0 0 20px rgba(14, 165, 233, 0.3)',
+        'glow-accent': '0 0 20px rgba(217, 70, 239, 0.3)',
+      },
+    },
+  },
+  plugins: [],
+}

package/client/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/client/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/client/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/client/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    outDir: '../server/public',
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+})

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "skillverse",
+  "version": "0.1.0",
+  "private": false,
+  "description": "A unified management platform for Claude Skills",
+  "workspaces": [
+    "client",
+    "server",
+    "shared",
+    "registry"
+  ],
+  "scripts": {
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:server": "npm run dev --workspace=server",
+    "dev:client": "npm run dev --workspace=client",
+    "start": "npm run start:cli --workspace=server",
+    "build": "npm run build --workspace=shared && npm run build --workspace=client && npm run build --workspace=server",
+    "build:server": "npm run build --workspace=server",
+    "build:client": "npm run build --workspace=client",
+    "lint": "npm run lint --workspaces",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "typecheck": "npm run typecheck --workspaces"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.5",
+    "concurrently": "^8.2.2",
+    "prettier": "^3.2.4",
+    "typescript": "^5.3.3"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  }
+}

package/registry/.env.example

@@ -0,0 +1,5 @@
+// Registry Server Environment Variables
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/skillverse_registry"
+JWT_SECRET="your-super-secret-jwt-key-change-in-production"
+PORT=4000
+STORAGE_PATH="./uploads"

package/registry/Dockerfile

@@ -0,0 +1,42 @@
+# SkillVerse Registry Server Dockerfile
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* ./
+COPY registry/package.json ./registry/
+
+# Install dependencies
+RUN npm install --workspace=registry
+
+# Copy source
+COPY registry ./registry
+
+# Generate Prisma client and build
+WORKDIR /app/registry
+RUN npx prisma generate
+RUN npm run build
+
+# Production image
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Copy built files
+COPY --from=builder /app/registry/dist ./dist
+COPY --from=builder /app/registry/package.json ./
+COPY --from=builder /app/registry/prisma ./prisma
+COPY --from=builder /app/node_modules ./node_modules
+
+# Create uploads directory
+RUN mkdir -p uploads/bundles
+
+# Environment
+ENV NODE_ENV=production
+ENV PORT=4000
+ENV STORAGE_PATH=/app/uploads
+
+EXPOSE 4000
+
+CMD ["node", "dist/index.js"]

package/registry/docker-compose.yml

@@ -0,0 +1,33 @@
+version: '3.8'
+
+services:
+  registry:
+    build:
+      context: ..
+      dockerfile: registry/Dockerfile
+    ports:
+      - "4000:4000"
+    environment:
+      - DATABASE_URL=postgresql://postgres:postgres@db:5432/skillverse_registry
+      - JWT_SECRET=${JWT_SECRET:-change-this-in-production}
+      - PORT=4000
+      - STORAGE_PATH=/app/uploads
+    volumes:
+      - registry_uploads:/app/uploads
+    depends_on:
+      - db
+    restart: unless-stopped
+
+  db:
+    image: postgres:15-alpine
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_DB=skillverse_registry
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    restart: unless-stopped
+
+volumes:
+  registry_uploads:
+  postgres_data:

package/registry/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "@skillverse/registry",
+    "version": "0.1.0",
+    "description": "SkillVerse Registry Server - Centralized skill catalog and distribution",
+    "type": "module",
+    "main": "dist/index.js",
+    "scripts": {
+        "dev": "tsx watch src/index.ts",
+        "build": "tsc",
+        "start": "node dist/index.js",
+        "db:generate": "prisma generate",
+        "db:push": "prisma db push",
+        "db:migrate": "prisma migrate dev"
+    },
+    "dependencies": {
+        "@prisma/client": "^5.22.0",
+        "bcryptjs": "^2.4.3",
+        "cors": "^2.8.5",
+        "dotenv": "^16.4.5",
+        "express": "^4.21.0",
+        "jsonwebtoken": "^9.0.2",
+        "multer": "^1.4.5-lts.1",
+        "uuid": "^10.0.0"
+    },
+    "devDependencies": {
+        "@types/bcryptjs": "^2.4.6",
+        "@types/cors": "^2.8.17",
+        "@types/express": "^4.17.21",
+        "@types/jsonwebtoken": "^9.0.6",
+        "@types/multer": "^1.4.11",
+        "@types/node": "^20.11.24",
+        "@types/uuid": "^10.0.0",
+        "prisma": "^5.22.0",
+        "tsx": "^4.7.1",
+        "typescript": "^5.3.3"
+    }
+}

package/registry/prisma/schema.prisma

@@ -0,0 +1,59 @@
+// This is the Prisma schema for the SkillVerse Registry Server
+// Uses PostgreSQL for production scalability
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id            String   @id @default(uuid())
+  username      String   @unique
+  email         String   @unique
+  passwordHash  String
+  displayName   String?
+  avatarUrl     String?
+  
+  skills        RegistrySkill[]
+  
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+}
+
+model RegistrySkill {
+  id            String   @id @default(uuid())
+  name          String   @unique
+  version       String   @default("1.0.0")
+  description   String?
+  readme        String?  // Full README content
+  keywords      String[] // Tags for search
+  
+  // Publisher info
+  publisherId   String
+  publisher     User     @relation(fields: [publisherId], references: [id])
+  
+  // Storage
+  bundlePath    String   // Path to stored bundle
+  bundleSize    Int      // Size in bytes
+  checksum      String?  // SHA256 of bundle
+  
+  // Source info (optional)
+  sourceType    String?  // 'git' or null
+  sourceUrl     String?  // Git URL if applicable
+  
+  // Stats
+  downloads     Int      @default(0)
+  
+  // Versioning
+  isLatest      Boolean  @default(true)
+  
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+  
+  @@index([name])
+  @@index([publisherId])
+}

package/registry/src/index.ts

@@ -0,0 +1,34 @@
+import express from 'express';
+import cors from 'cors';
+import { config } from 'dotenv';
+import authRoutes from './routes/auth.js';
+import skillsRoutes from './routes/skills.js';
+import { errorHandler } from './middleware/errorHandler.js';
+
+config();
+
+const app = express();
+const PORT = process.env.PORT || 4000;
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Health check
+app.get('/health', (req, res) => {
+    res.json({ status: 'ok', service: 'skillverse-registry' });
+});
+
+// Routes
+app.use('/api/auth', authRoutes);
+app.use('/api/skills', skillsRoutes);
+
+// Error handling
+app.use(errorHandler);
+
+// Start server
+app.listen(PORT, () => {
+    console.log(`🚀 SkillVerse Registry running on http://localhost:${PORT}`);
+});
+
+export default app;

package/registry/src/lib/db.ts

@@ -0,0 +1,3 @@
+import { PrismaClient } from '@prisma/client';
+
+export const prisma = new PrismaClient();

package/registry/src/middleware/errorHandler.ts

@@ -0,0 +1,35 @@
+import { Request, Response, NextFunction } from 'express';
+
+export class AppError extends Error {
+    statusCode: number;
+    code: string;
+
+    constructor(code: string, message: string, statusCode: number = 500) {
+        super(message);
+        this.code = code;
+        this.statusCode = statusCode;
+    }
+}
+
+export function errorHandler(
+    err: Error | AppError,
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    console.error('Error:', err);
+
+    if (err instanceof AppError) {
+        return res.status(err.statusCode).json({
+            success: false,
+            error: err.message,
+            code: err.code,
+        });
+    }
+
+    res.status(500).json({
+        success: false,
+        error: 'Internal server error',
+        code: 'INTERNAL_ERROR',
+    });
+}