skillverse 0.1.0

package/client/src/components/SkillCard.tsx

@@ -0,0 +1,269 @@
+import { clsx } from 'clsx';
+import { GitBranch, Upload, Link2, ExternalLink, MoreVertical, Trash2, RefreshCw, ArrowUpCircle, FileText, X, Loader2 } from 'lucide-react';
+import type { Skill } from '@skillverse/shared';
+import { useState } from 'react';
+import { useAppStore } from '../stores/appStore';
+import { skillsApi } from '../lib/api';
+import Tooltip from './Tooltip';
+
+interface SkillCardProps {
+    skill: Skill;
+    onLink?: () => void;
+    onDelete?: () => void;
+    onView?: () => void;
+}
+
+export default function SkillCard({ skill, onLink, onDelete, onView }: SkillCardProps) {
+    const [showMenu, setShowMenu] = useState(false);
+    const [showSkillMdModal, setShowSkillMdModal] = useState(false);
+    const [skillMdContent, setSkillMdContent] = useState<string | null>(null);
+    const [skillMdLoading, setSkillMdLoading] = useState(false);
+    const { checkUpdate, upgradeSkill, skillUpdates, skillUpdateChecking } = useAppStore();
+
+    const linkedCount = (skill as any).linkedWorkspaces?.length || 0;
+    // Use store state for real-time updates, fallback to persisted state
+    const hasUpdate = skillUpdates[skill.id] || skill.updateAvailable;
+    const isChecking = skillUpdateChecking[skill.id];
+    const isGit = skill.source === 'git';
+
+    const handleCheckUpdate = async () => {
+        setShowMenu(false);
+        await checkUpdate(skill.id);
+    };
+
+    const handleUpgrade = async () => {
+        if (confirm(`Are you sure you want to upgrade "${skill.name}"? This will overwrite existing files.`)) {
+            await upgradeSkill(skill.id);
+        }
+    };
+
+    const handleViewSkillMd = async () => {
+        setShowMenu(false);
+        setSkillMdLoading(true);
+        setShowSkillMdModal(true);
+        try {
+            const result = await skillsApi.getSkillMd(skill.id);
+            setSkillMdContent(result.exists ? result.content : null);
+        } catch (err) {
+            console.error('Failed to load SKILL.md:', err);
+            setSkillMdContent(null);
+        } finally {
+            setSkillMdLoading(false);
+        }
+    };
+
+    return (
+        <>
+            <div className="card group relative h-full flex flex-col">
+                {/* Header */}
+                <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 relative 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" />
+                            )}
+                            {hasUpdate && (
+                                <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-dark-800" />
+                            )}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                            <h3 className="font-semibold text-dark-100 group-hover:text-primary-400 transition-colors flex items-center gap-2">
+                                <Tooltip content={skill.name} position="top">
+                                    {isGit && (skill.sourceUrl || skill.repoUrl) ? (
+                                        <a
+                                            href={skill.sourceUrl || skill.repoUrl}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="truncate max-w-[160px] sm:max-w-[200px] lg:max-w-[220px] hover:underline cursor-pointer"
+                                            onClick={(e) => e.stopPropagation()}
+                                        >
+                                            {skill.name}
+                                        </a>
+                                    ) : (
+                                        <span className="truncate max-w-[160px] sm:max-w-[200px] lg:max-w-[220px]">
+                                            {skill.name}
+                                        </span>
+                                    )}
+                                </Tooltip>
+                                {hasUpdate && (
+                                    <span className="text-[10px] bg-red-500/10 text-red-400 px-1.5 py-0.5 rounded uppercase font-bold tracking-wide shrink-0 group-hover:hidden">
+                                        Update
+                                    </span>
+                                )}
+                            </h3>
+                            <p className="text-xs text-dark-500 mt-0.5">
+                                {skill.source === 'git' ? 'Git Repository' : 'Local Upload'}
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Actions Menu */}
+                    <div className="relative shrink-0">
+                        <button
+                            onClick={() => setShowMenu(!showMenu)}
+                            className="btn-icon opacity-0 group-hover:opacity-100 transition-opacity"
+                        >
+                            <MoreVertical className="w-4 h-4" />
+                        </button>
+
+                        {showMenu && (
+                            <>
+                                <div
+                                    className="fixed inset-0 z-10"
+                                    onClick={() => setShowMenu(false)}
+                                />
+                                <div className="absolute right-0 top-full mt-1 w-48 py-1 bg-dark-700 border border-dark-600 rounded-lg shadow-xl z-20 animate-scale-in">
+                                    {/* Preview SKILL.md */}
+                                    <button
+                                        onClick={handleViewSkillMd}
+                                        className="w-full px-3 py-2 text-left text-sm text-dark-200 hover:bg-dark-600 flex items-center gap-2"
+                                    >
+                                        <FileText className="w-4 h-4" />
+                                        View SKILL.md
+                                    </button>
+                                    {onView && (
+                                        <button
+                                            onClick={() => {
+                                                setShowMenu(false);
+                                                onView();
+                                            }}
+                                            className="w-full px-3 py-2 text-left text-sm text-dark-200 hover:bg-dark-600 flex items-center gap-2"
+                                        >
+                                            <ExternalLink className="w-4 h-4" />
+                                            View Details
+                                        </button>
+                                    )}
+                                    {isGit && (
+                                        <button
+                                            onClick={handleCheckUpdate}
+                                            disabled={isChecking}
+                                            className="w-full px-3 py-2 text-left text-sm text-dark-200 hover:bg-dark-600 flex items-center gap-2"
+                                        >
+                                            <RefreshCw className={clsx("w-4 h-4", isChecking && "animate-spin")} />
+                                            {isChecking ? 'Checking...' : 'Check for Updates'}
+                                        </button>
+                                    )}
+                                    {onLink && (
+                                        <button
+                                            onClick={() => {
+                                                setShowMenu(false);
+                                                onLink();
+                                            }}
+                                            className="w-full px-3 py-2 text-left text-sm text-dark-200 hover:bg-dark-600 flex items-center gap-2"
+                                        >
+                                            <Link2 className="w-4 h-4" />
+                                            Link to Workspace
+                                        </button>
+                                    )}
+                                    {onDelete && (
+                                        <button
+                                            onClick={() => {
+                                                setShowMenu(false);
+                                                onDelete();
+                                            }}
+                                            className="w-full px-3 py-2 text-left text-sm text-red-400 hover:bg-dark-600 flex items-center gap-2"
+                                        >
+                                            <Trash2 className="w-4 h-4" />
+                                            Delete
+                                        </button>
+                                    )}
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                {/* Description with Popover */}
+                <div className="mt-3 relative group/desc flex-1">
+                    {skill.description ? (
+                        <>
+                            <Tooltip content={skill.description} position="bottom">
+                                <p className="text-sm text-dark-400 line-clamp-2 text-justified">
+                                    {skill.description}
+                                </p>
+                            </Tooltip>
+                        </>
+                    ) : (
+                        <p className="text-sm text-dark-500 italic">No description</p>
+                    )}
+                </div>
+
+                {/* Upgrade Button - pushed down if needed, but flex-col handles it */}
+                {hasUpdate && (
+                    <div className="mt-4">
+                        <button
+                            onClick={handleUpgrade}
+                            className="w-full btn-primary py-1.5 text-xs flex items-center justify-center gap-2"
+                        >
+                            <ArrowUpCircle className="w-3.5 h-3.5" />
+                            Upgrade to Latest Version
+                        </button>
+                    </div>
+                )}
+
+                {/* Footer */}
+                <div className={clsx("pt-4 border-t border-dark-700 flex items-center justify-between mt-4")}>
+                    <div className="flex items-center gap-2 text-xs text-dark-500">
+                        <Link2 className="w-3.5 h-3.5" />
+                        <span>{linkedCount} workspace{linkedCount !== 1 ? 's' : ''}</span>
+                    </div>
+                    <div className="text-xs text-dark-500">
+                        {new Date(skill.installDate).toLocaleDateString()}
+                    </div>
+                </div>
+            </div>
+
+            {/* SKILL.md Preview Modal */}
+            {showSkillMdModal && (
+                <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={() => setShowSkillMdModal(false)}
+                    />
+                    <div className="relative w-full max-w-2xl bg-dark-800 border border-dark-700 rounded-2xl shadow-2xl animate-scale-in max-h-[85vh] flex flex-col">
+                        <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-dark-700 shrink-0">
+                            <div className="flex items-center gap-3">
+                                <FileText className="w-5 h-5 text-primary-400" />
+                                <div>
+                                    <h2 className="text-lg font-semibold text-dark-100">SKILL.md</h2>
+                                    <p className="text-xs text-dark-500">{skill.name}</p>
+                                </div>
+                            </div>
+                            <button onClick={() => setShowSkillMdModal(false)} className="btn-icon">
+                                <X className="w-5 h-5" />
+                            </button>
+                        </div>
+                        <div className="flex-1 overflow-y-auto p-4 sm:p-6">
+                            {skillMdLoading ? (
+                                <div className="flex items-center justify-center py-12">
+                                    <Loader2 className="w-6 h-6 animate-spin text-primary-400" />
+                                </div>
+                            ) : skillMdContent ? (
+                                <pre className="text-sm text-dark-200 whitespace-pre-wrap font-mono bg-dark-750 rounded-lg p-4 overflow-x-auto">
+                                    {skillMdContent}
+                                </pre>
+                            ) : (
+                                <div className="text-center py-12">
+                                    <FileText className="w-12 h-12 mx-auto text-dark-600 mb-3" />
+                                    <p className="text-dark-400">No SKILL.md found</p>
+                                    <p className="text-sm text-dark-500 mt-1">
+                                        This skill doesn't have a SKILL.md file
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

package/client/src/components/Toast.tsx

@@ -0,0 +1,44 @@
+import { useAppStore } from '../stores/appStore';
+import { CheckCircle, XCircle, Info, X } from 'lucide-react';
+import { clsx } from 'clsx';
+
+export default function Toast() {
+    const { toast, hideToast } = useAppStore();
+
+    if (!toast) return null;
+
+    const icons = {
+        success: CheckCircle,
+        error: XCircle,
+        info: Info,
+    };
+
+    const colors = {
+        success: 'from-green-500/20 to-green-500/5 border-green-500/30 text-green-400',
+        error: 'from-red-500/20 to-red-500/5 border-red-500/30 text-red-400',
+        info: 'from-primary-500/20 to-primary-500/5 border-primary-500/30 text-primary-400',
+    };
+
+    const Icon = icons[toast.type];
+
+    return (
+        <div className="fixed bottom-6 right-6 z-50 animate-slide-in">
+            <div
+                className={clsx(
+                    'flex items-center gap-3 px-4 py-3 rounded-xl border',
+                    'bg-gradient-to-r backdrop-blur-lg shadow-lg',
+                    colors[toast.type]
+                )}
+            >
+                <Icon className="w-5 h-5 flex-shrink-0" />
+                <span className="text-sm font-medium text-dark-100">{toast.message}</span>
+                <button
+                    onClick={hideToast}
+                    className="ml-2 p-1 rounded-lg hover:bg-dark-700/50 transition-colors"
+                >
+                    <X className="w-4 h-4" />
+                </button>
+            </div>
+        </div>
+    );
+}

package/client/src/components/Tooltip.tsx

@@ -0,0 +1,132 @@
+import { clsx } from 'clsx';
+import { useState, useRef, useEffect, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+interface TooltipProps {
+    content: string;
+    children: ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+}
+
+/**
+ * Reusable Tooltip component using Portal to avoid overflow clipping
+ */
+export default function Tooltip({
+    content,
+    children,
+    position = 'top',
+    className,
+}: TooltipProps) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (isVisible && triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            const tooltipPadding = 8;
+
+            let top = 0;
+            let left = 0;
+
+            switch (position) {
+                case 'top':
+                    top = rect.top - tooltipPadding;
+                    left = rect.left + rect.width / 2;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + tooltipPadding;
+                    left = rect.left + rect.width / 2;
+                    break;
+                case 'left':
+                    top = rect.top + rect.height / 2;
+                    left = rect.left - tooltipPadding;
+                    break;
+                case 'right':
+                    top = rect.top + rect.height / 2;
+                    left = rect.right + tooltipPadding;
+                    break;
+            }
+
+            setCoords({ top, left });
+        }
+    }, [isVisible, position]);
+
+    if (!content) {
+        return <>{children}</>;
+    }
+
+    const tooltipContent = isVisible && createPortal(
+        <div
+            className={clsx(
+                'fixed z-[9999] px-2.5 py-1.5 text-xs rounded-lg',
+                'bg-dark-700 text-dark-100 border border-dark-600 shadow-xl',
+                'animate-fade-in pointer-events-none'
+            )}
+            style={{
+                top: position === 'top' ? coords.top : position === 'bottom' ? coords.top : coords.top,
+                left: coords.left,
+                transform: position === 'top'
+                    ? 'translate(-50%, -100%)'
+                    : position === 'bottom'
+                        ? 'translate(-50%, 0)'
+                        : position === 'left'
+                            ? 'translate(-100%, -50%)'
+                            : 'translate(0, -50%)',
+                maxWidth: '320px',
+                wordBreak: 'break-all',
+            }}
+        >
+            {content}
+        </div>,
+        document.body
+    );
+
+    return (
+        <>
+            <div
+                ref={triggerRef}
+                className={clsx('inline-flex', className)}
+                onMouseEnter={() => setIsVisible(true)}
+                onMouseLeave={() => setIsVisible(false)}
+            >
+                {children}
+            </div>
+            {tooltipContent}
+        </>
+    );
+}
+
+/**
+ * TruncatedText component - shows text with ellipsis and tooltip on hover
+ */
+interface TruncatedTextProps {
+    text: string;
+    className?: string;
+    maxWidth?: string;
+    lines?: number;
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export function TruncatedText({
+    text,
+    className,
+    maxWidth = '100%',
+    lines = 1,
+    tooltipPosition = 'top',
+}: TruncatedTextProps) {
+    return (
+        <Tooltip content={text} position={tooltipPosition}>
+            <span
+                className={clsx(
+                    lines === 1 ? 'truncate' : `line-clamp-${lines}`,
+                    className
+                )}
+                style={{ maxWidth, display: 'inline-block' }}
+            >
+                {text}
+            </span>
+        </Tooltip>
+    );
+}

package/client/src/index.css

@@ -0,0 +1,168 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Base styles */
+:root {
+  --color-bg: #0f172a;
+  --color-surface: #1e293b;
+  --color-surface-hover: #334155;
+  --color-border: #334155;
+  --color-text: #f8fafc;
+  --color-text-muted: #94a3b8;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-surface);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #475569;
+}
+
+/* Glass effect */
+@layer utilities {
+  .glass {
+    background: rgba(30, 41, 59, 0.8);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(51, 65, 85, 0.5);
+  }
+
+  .glass-light {
+    background: rgba(248, 250, 252, 0.05);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(148, 163, 184, 0.1);
+  }
+}
+
+/* Button base */
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply btn bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:from-primary-600 hover:to-primary-700 shadow-lg hover:shadow-glow active:scale-[0.98];
+  }
+
+  .btn-secondary {
+    @apply btn bg-dark-700 text-dark-100 border border-dark-600 hover:bg-dark-600 hover:border-dark-500;
+  }
+
+  .btn-ghost {
+    @apply btn text-dark-300 hover:text-dark-100 hover:bg-dark-700;
+  }
+
+  .btn-danger {
+    @apply btn bg-red-500/10 text-red-400 border border-red-500/30 hover:bg-red-500/20 hover:border-red-500/50;
+  }
+
+  .btn-icon {
+    @apply p-2 rounded-lg transition-colors duration-200 text-dark-400 hover:text-dark-100 hover:bg-dark-700;
+  }
+
+  /* Input styles */
+  .input {
+    @apply w-full px-4 py-2.5 rounded-lg bg-dark-800 border border-dark-600 text-dark-100 placeholder-dark-400 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500/50 transition-all duration-200;
+  }
+
+  /* Card styles */
+  .card {
+    @apply bg-dark-800 border border-dark-700 rounded-xl p-6 transition-all duration-200 hover:border-dark-600;
+  }
+
+  .card-interactive {
+    @apply card cursor-pointer hover:bg-dark-750 hover:shadow-lg;
+  }
+}
+
+/* Text utilities */
+@layer utilities {
+
+  /* Multi-line text justified alignment for clean edges */
+  .text-justified {
+    text-align: justify;
+    text-justify: inter-word;
+  }
+}
+
+/* Tooltip component styles */
+.tooltip-wrapper {
+  @apply relative inline-flex;
+}
+
+.tooltip-wrapper .tooltip-content {
+  @apply absolute z-50 px-2.5 py-1.5 text-xs rounded-lg bg-dark-700 text-dark-100 border border-dark-600 opacity-0 invisible transition-all duration-200 pointer-events-none shadow-xl;
+  max-width: 320px;
+  width: max-content;
+  white-space: normal;
+  word-wrap: break-word;
+  word-break: break-all;
+  transform: translateY(4px);
+}
+
+.tooltip-wrapper:hover .tooltip-content {
+  @apply opacity-100 visible;
+  transform: translateY(0);
+}
+
+/* Tooltip positions */
+.tooltip-content.tooltip-top {
+  @apply bottom-full left-1/2 mb-2;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+.tooltip-wrapper:hover .tooltip-content.tooltip-top {
+  transform: translateX(-50%) translateY(0);
+}
+
+.tooltip-content.tooltip-bottom {
+  @apply top-full left-1/2 mt-2;
+  transform: translateX(-50%) translateY(4px);
+}
+
+.tooltip-wrapper:hover .tooltip-content.tooltip-bottom {
+  transform: translateX(-50%) translateY(0);
+}
+
+.tooltip-content.tooltip-left {
+  @apply right-full top-1/2 mr-2;
+  transform: translateY(-50%) translateX(4px);
+}
+
+.tooltip-wrapper:hover .tooltip-content.tooltip-left {
+  transform: translateY(-50%) translateX(0);
+}
+
+.tooltip-content.tooltip-right {
+  @apply left-full top-1/2 ml-2;
+  transform: translateY(-50%) translateX(-4px);
+}
+
+.tooltip-wrapper:hover .tooltip-content.tooltip-right {
+  transform: translateY(-50%) translateX(0);
+}