github-to-mcp-monorepo 1.0.0

package/apps/web/components/convert/InlinePlayground.tsx

@@ -0,0 +1,259 @@
+/**
+ * InlinePlayground Component - Test tools inline in the conversion result
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Play,
+  Loader2,
+  AlertCircle,
+  Check,
+  ChevronRight,
+  Package,
+  Search,
+  Zap,
+  Terminal,
+} from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import PlaygroundToolTester from '@/components/PlaygroundToolTester';
+import type { Tool } from '@/types';
+import { useMcpExecution } from '@/hooks/use-mcp-execution';
+
+interface InlinePlaygroundProps {
+  tools: Tool[];
+  generatedCode: string;
+  className?: string;
+}
+
+const SOURCE_COLORS: Record<string, string> = {
+  readme: 'bg-blue-500/10 text-blue-400',
+  code: 'bg-purple-500/10 text-purple-400',
+  openapi: 'bg-green-500/10 text-green-400',
+  graphql: 'bg-pink-500/10 text-pink-400',
+  'mcp-introspect': 'bg-yellow-500/10 text-yellow-400',
+  universal: 'bg-neutral-500/10 text-neutral-400',
+};
+
+export default function InlinePlayground({
+  tools,
+  generatedCode,
+  className = '',
+}: InlinePlaygroundProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedTool, setSelectedTool] = useState<Tool | null>(tools[0] || null);
+
+  // MCP execution hook
+  const {
+    isConnected,
+    isConnecting,
+    isLoading,
+    error: connectionError,
+    connect,
+    disconnect,
+    executeTool,
+  } = useMcpExecution({
+    generatedCode,
+    onToolsLoaded: (loadedTools) => {
+      if (loadedTools.length > 0 && !selectedTool) {
+        setSelectedTool(loadedTools[0]);
+      }
+    },
+  });
+
+  // Filter tools based on search
+  const filteredTools = useMemo(() => {
+    if (!searchQuery) return tools;
+    const query = searchQuery.toLowerCase();
+    return tools.filter(
+      tool =>
+        tool.name.toLowerCase().includes(query) ||
+        tool.description?.toLowerCase().includes(query)
+    );
+  }, [tools, searchQuery]);
+
+  // Handle tool execution
+  const handleExecute = useCallback(async (tool: Tool, params: Record<string, unknown>) => {
+    if (isConnected) {
+      return await executeTool(tool.name, params);
+    }
+
+    // Mock execution when not connected
+    await new Promise(resolve => setTimeout(resolve, 600 + Math.random() * 400));
+
+    return {
+      success: true,
+      tool: tool.name,
+      timestamp: new Date().toISOString(),
+      params,
+      response: {
+        message: `Demo response for ${tool.name}`,
+        note: 'Connect to server for real execution',
+        data: {
+          id: Math.random().toString(36).substring(7),
+          ...params,
+        },
+      },
+    };
+  }, [isConnected, executeTool]);
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      {/* Connection status bar */}
+      <div className="flex items-center justify-between p-3 rounded-lg bg-black/30 border border-neutral-800">
+        <div className="flex items-center gap-3">
+          <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-neutral-500'}`} />
+          <span className="text-sm text-neutral-300">
+            {isConnecting
+              ? 'Connecting...'
+              : isConnected
+              ? 'Connected to MCP Server'
+              : 'Demo Mode (not connected)'}
+          </span>
+          {!isConnected && (
+            <span className="text-xs text-neutral-500">
+              Results will be simulated
+            </span>
+          )}
+        </div>
+
+        <Button
+          onClick={isConnected ? disconnect : connect}
+          disabled={isConnecting}
+          variant={isConnected ? 'outline' : 'default'}
+          size="sm"
+          className="gap-2"
+        >
+          {isConnecting ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : isConnected ? (
+            <Check className="w-4 h-4" />
+          ) : (
+            <Zap className="w-4 h-4" />
+          )}
+          {isConnecting ? 'Connecting...' : isConnected ? 'Disconnect' : 'Connect'}
+        </Button>
+      </div>
+
+      {connectionError && (
+        <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+          <AlertCircle className="w-4 h-4 inline-block mr-2" />
+          {connectionError}
+        </div>
+      )}
+
+      {/* Main layout */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        {/* Tool list - left sidebar */}
+        <div className="lg:col-span-1 rounded-xl border border-neutral-800 bg-neutral-900/50 overflow-hidden">
+          <div className="p-3 border-b border-neutral-800">
+            <div className="flex items-center gap-2 mb-3">
+              <Package className="w-4 h-4 text-neutral-400" />
+              <span className="text-sm font-medium text-white">
+                Tools ({tools.length})
+              </span>
+              {isConnected && (
+                <span className="px-1.5 py-0.5 text-xs rounded bg-green-500/20 text-green-400">
+                  Live
+                </span>
+              )}
+            </div>
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
+              <Input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search tools..."
+                className="pl-9 h-9 text-sm"
+              />
+            </div>
+          </div>
+
+          <div className="max-h-[400px] overflow-y-auto">
+            {filteredTools.length === 0 ? (
+              <div className="p-4 text-center">
+                <AlertCircle className="w-8 h-8 text-neutral-600 mx-auto mb-2" />
+                <p className="text-sm text-neutral-500">No tools found</p>
+              </div>
+            ) : (
+              filteredTools.map((tool) => {
+                const isSelected = selectedTool?.name === tool.name;
+                const sourceColor = SOURCE_COLORS[tool.source?.type || 'universal'] || SOURCE_COLORS.universal;
+
+                return (
+                  <button
+                    key={tool.name}
+                    onClick={() => setSelectedTool(tool)}
+                    className={`w-full p-3 flex items-start gap-3 text-left transition-colors ${
+                      isSelected
+                        ? 'bg-white/10 border-l-2 border-white'
+                        : 'hover:bg-white/5 border-l-2 border-transparent'
+                    }`}
+                  >
+                    <div className="flex-shrink-0 mt-0.5">
+                      <ChevronRight
+                        className={`w-4 h-4 transition-transform ${
+                          isSelected ? 'text-white rotate-90' : 'text-neutral-500'
+                        }`}
+                      />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <span
+                        className={`font-medium truncate block ${
+                          isSelected ? 'text-white' : 'text-neutral-300'
+                        }`}
+                      >
+                        {tool.name}
+                      </span>
+                      <p className="text-xs text-neutral-500 line-clamp-2 mt-0.5">
+                        {tool.description || 'No description'}
+                      </p>
+                      <div className="flex items-center gap-2 mt-1.5">
+                        <span className={`px-1.5 py-0.5 text-xs rounded ${sourceColor}`}>
+                          {tool.source?.type || 'unknown'}
+                        </span>
+                        <span className="text-xs text-neutral-600">
+                          {Object.keys(tool.inputSchema?.properties || {}).length} params
+                        </span>
+                      </div>
+                    </div>
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+
+        {/* Tool tester - right panel */}
+        <div className="lg:col-span-2">
+          {selectedTool ? (
+            <PlaygroundToolTester
+              tool={selectedTool}
+              onExecute={handleExecute}
+              isDemoMode={!isConnected}
+              isExecuting={isLoading}
+            />
+          ) : (
+            <div className="h-full flex items-center justify-center rounded-xl border border-neutral-800 bg-neutral-900/50 p-8">
+              <div className="text-center">
+                <Terminal className="w-12 h-12 text-neutral-600 mx-auto mb-4" />
+                <h3 className="text-lg font-medium text-neutral-400 mb-2">
+                  Select a Tool
+                </h3>
+                <p className="text-sm text-neutral-500">
+                  Choose a tool from the list to test it
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/web/components/convert/LoadingSteps.tsx

@@ -0,0 +1,311 @@
+/**
+ * Loading Steps Component - Shows conversion progress with real-time streaming
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  Github, 
+  Code2, 
+  Package, 
+  Terminal, 
+  Check, 
+  Loader2,
+  FileSearch,
+  Layers,
+  FileJson,
+  Sparkles,
+  AlertCircle,
+  Braces,
+} from 'lucide-react';
+import type { StreamingStep } from '@/hooks/use-streaming-conversion';
+
+// Icon mapping for each step
+const STEP_ICONS: Record<string, typeof Github> = {
+  'validate': Github,
+  'fetch': Github,
+  'classify': Layers,
+  'readme': FileSearch,
+  'openapi': FileJson,
+  'code': Braces,
+  'generate-ts': Terminal,
+  'generate-py': Code2,
+  'configs': Package,
+  'complete': Sparkles,
+};
+
+interface LoadingStepsProps {
+  steps?: StreamingStep[];
+  currentStep?: string | null;
+  progress?: number;
+  isStreaming?: boolean;
+}
+
+// Step status type
+type StepStatus = 'pending' | 'in-progress' | 'complete' | 'error';
+
+// Internal step type
+interface InternalStep {
+  id: string;
+  label: string;
+  description: string;
+  detail?: string;
+  status: StepStatus;
+}
+
+// Default steps for fallback/non-streaming mode
+const DEFAULT_STEPS: InternalStep[] = [
+  { id: 'fetch', label: 'Fetching repository', description: 'Cloning and analyzing repo structure', status: 'pending' },
+  { id: 'classify', label: 'Classifying repository', description: 'Detecting repo type and structure', status: 'pending' },
+  { id: 'readme', label: 'Analyzing README', description: 'Extracting documentation and examples', status: 'pending' },
+  { id: 'openapi', label: 'Scanning for OpenAPI specs', description: 'Looking for API definitions', status: 'pending' },
+  { id: 'code', label: 'Analyzing code', description: 'Extracting functions and patterns', status: 'pending' },
+  { id: 'generate-ts', label: 'Generating TypeScript server', description: 'Creating MCP server code', status: 'pending' },
+  { id: 'configs', label: 'Creating configurations', description: 'Building platform configs', status: 'pending' },
+];
+
+export default function LoadingSteps({ 
+  steps: externalSteps, 
+  currentStep: externalCurrentStep,
+  progress: externalProgress = 0,
+  isStreaming = false,
+}: LoadingStepsProps) {
+  const [internalSteps, setInternalSteps] = useState<InternalStep[]>(DEFAULT_STEPS);
+  const [internalCurrentStep, setInternalCurrentStep] = useState(0);
+  const [internalProgress, setInternalProgress] = useState(0);
+
+  // Use external steps if streaming, otherwise use internal simulation
+  const displaySteps = isStreaming && externalSteps ? externalSteps : internalSteps;
+  const displayProgress = isStreaming ? externalProgress : internalProgress;
+
+  // Simulate progress for non-streaming mode
+  useEffect(() => {
+    if (isStreaming) return;
+
+    const timers: NodeJS.Timeout[] = [];
+    let totalTime = 0;
+    const stepDurations = [800, 1200, 1000, 1500, 1200, 800, 600];
+
+    DEFAULT_STEPS.forEach((step, index) => {
+      const duration = stepDurations[index] || 1000;
+      
+      // Start step
+      const startTimer = setTimeout(() => {
+        setInternalCurrentStep(index);
+        setInternalSteps(prev => prev.map((s, i) => ({
+          ...s,
+          status: i < index ? 'complete' as const : i === index ? 'in-progress' as const : 'pending' as const,
+        })));
+        setInternalProgress(Math.round((index / DEFAULT_STEPS.length) * 100));
+      }, totalTime);
+      timers.push(startTimer);
+
+      // Complete step
+      const completeTimer = setTimeout(() => {
+        setInternalSteps(prev => prev.map((s, i) => ({
+          ...s,
+          status: i <= index ? 'complete' as const : s.status,
+        })));
+        setInternalProgress(Math.round(((index + 1) / DEFAULT_STEPS.length) * 100));
+      }, totalTime + duration - 200);
+      timers.push(completeTimer);
+
+      totalTime += duration;
+    });
+
+    return () => {
+      timers.forEach(timer => clearTimeout(timer));
+    };
+  }, [isStreaming]);
+
+  // Filter to show relevant steps (skip validate step as it's instant)
+  const visibleSteps = displaySteps.filter(s => s.id !== 'validate' && s.id !== 'complete');
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <div className="rounded-2xl border border-neutral-800 p-8 bg-neutral-900/50 backdrop-blur-xl">
+        {/* Header with animated progress ring */}
+        <div className="text-center mb-8">
+          <div className="relative inline-flex items-center justify-center w-20 h-20 mb-4">
+            {/* Background ring */}
+            <svg className="absolute inset-0 w-20 h-20 -rotate-90">
+              <circle
+                cx="40"
+                cy="40"
+                r="36"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+                className="text-neutral-800"
+              />
+              <motion.circle
+                cx="40"
+                cy="40"
+                r="36"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+                strokeLinecap="round"
+                className="text-white"
+                initial={{ pathLength: 0 }}
+                animate={{ pathLength: displayProgress / 100 }}
+                transition={{ duration: 0.5, ease: 'easeOut' }}
+                style={{
+                  strokeDasharray: '226.19',
+                  strokeDashoffset: 0,
+                }}
+              />
+            </svg>
+            {/* Center content */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span className="text-2xl font-bold text-white font-mono">{displayProgress}%</span>
+            </div>
+          </div>
+          
+          <h2 className="text-2xl font-bold text-white mb-2">Converting Repository</h2>
+          <p className="text-neutral-400">
+            {isStreaming ? 'Real-time extraction in progress...' : 'Analyzing and extracting tools...'}
+          </p>
+        </div>
+
+        {/* Progress bar */}
+        <div className="mb-8">
+          <div className="h-1.5 bg-neutral-800 rounded-full overflow-hidden">
+            <motion.div
+              className="h-full bg-gradient-to-r from-white to-neutral-400 rounded-full"
+              initial={{ width: 0 }}
+              animate={{ width: `${displayProgress}%` }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+            />
+          </div>
+        </div>
+
+        {/* Steps list */}
+        <div className="space-y-3">
+          <AnimatePresence mode="popLayout">
+            {visibleSteps.map((step) => {
+              const Icon = STEP_ICONS[step.id] || Package;
+              const isActive = step.status === 'in-progress';
+              const isCompleted = step.status === 'complete';
+              const isError = step.status === 'error';
+              const isPending = step.status === 'pending';
+
+              return (
+                <motion.div
+                  key={step.id}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: 20 }}
+                  layout
+                  className={`flex items-center gap-4 p-4 rounded-xl border transition-all duration-300 ${
+                    isActive
+                      ? 'border-white/30 bg-white/5 shadow-lg shadow-white/5'
+                      : isCompleted
+                      ? 'border-green-500/20 bg-green-500/5'
+                      : isError
+                      ? 'border-red-500/30 bg-red-500/5'
+                      : 'border-neutral-800/50 bg-transparent opacity-50'
+                  }`}
+                >
+                  {/* Icon */}
+                  <div className={`w-10 h-10 rounded-lg flex items-center justify-center transition-all ${
+                    isCompleted
+                      ? 'bg-green-500/20 border border-green-500/30'
+                      : isError
+                      ? 'bg-red-500/20 border border-red-500/30'
+                      : isActive
+                      ? 'bg-white/10 border border-white/20'
+                      : 'bg-neutral-800/50 border border-neutral-700/50'
+                  }`}>
+                    {isCompleted ? (
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        transition={{ type: 'spring', stiffness: 300 }}
+                      >
+                        <Check className="w-5 h-5 text-green-400" />
+                      </motion.div>
+                    ) : isError ? (
+                      <AlertCircle className="w-5 h-5 text-red-400" />
+                    ) : isActive ? (
+                      <motion.div
+                        animate={{ rotate: 360 }}
+                        transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
+                      >
+                        <Icon className="w-5 h-5 text-white" />
+                      </motion.div>
+                    ) : (
+                      <Icon className="w-5 h-5 text-neutral-500" />
+                    )}
+                  </div>
+
+                  {/* Text content */}
+                  <div className="flex-1 min-w-0">
+                    <div className={`font-medium transition-colors ${
+                      isCompleted ? 'text-green-400' : 
+                      isError ? 'text-red-400' :
+                      isActive ? 'text-white' : 
+                      'text-neutral-500'
+                    }`}>
+                      {step.label}
+                    </div>
+                    <div className={`text-sm truncate transition-colors ${
+                      isActive ? 'text-neutral-400' : 'text-neutral-600'
+                    }`}>
+                      {(step.detail ?? step.description) || ''}
+                    </div>
+                  </div>
+
+                  {/* Status indicator */}
+                  {isActive && (
+                    <motion.div
+                      className="flex items-center gap-1"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                    >
+                      <motion.div
+                        className="w-1.5 h-1.5 rounded-full bg-white"
+                        animate={{ opacity: [1, 0.3, 1] }}
+                        transition={{ duration: 1, repeat: Infinity }}
+                      />
+                      <motion.div
+                        className="w-1.5 h-1.5 rounded-full bg-white"
+                        animate={{ opacity: [0.3, 1, 0.3] }}
+                        transition={{ duration: 1, repeat: Infinity }}
+                      />
+                      <motion.div
+                        className="w-1.5 h-1.5 rounded-full bg-white"
+                        animate={{ opacity: [1, 0.3, 1] }}
+                        transition={{ duration: 1, repeat: Infinity, delay: 0.3 }}
+                      />
+                    </motion.div>
+                  )}
+
+                  {isCompleted && (
+                    <span className="text-xs text-green-400/70 font-mono">✓</span>
+                  )}
+                </motion.div>
+              );
+            })}
+          </AnimatePresence>
+        </div>
+
+        {/* Fun tip at bottom */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 2 }}
+          className="mt-6 pt-6 border-t border-neutral-800"
+        >
+          <p className="text-xs text-neutral-500 text-center">
+            💡 Tip: Generated MCP servers work with Claude Desktop, Cursor, and other MCP-compatible tools
+          </p>
+        </motion.div>
+      </div>
+    </div>
+  );
+}