github-to-mcp-monorepo 1.0.0

package/apps/web/components/playground/types.ts

@@ -0,0 +1,202 @@
+/**
+ * Playground Component Types
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+/**
+ * Transport type for MCP connections
+ */
+export type TransportType = 'stdio' | 'sse' | 'streamable-http';
+
+/**
+ * Configuration for stdio transport
+ */
+export interface StdioTransportConfig {
+  type: 'stdio';
+  command: string;
+  args?: string[];
+  env?: Record<string, string>;
+  generatedCode?: string;
+}
+
+/**
+ * Configuration for SSE transport
+ */
+export interface SseTransportConfig {
+  type: 'sse';
+  url: string;
+  headers?: Record<string, string>;
+}
+
+/**
+ * Configuration for streamable HTTP transport
+ */
+export interface StreamableHttpTransportConfig {
+  type: 'streamable-http';
+  url: string;
+  headers?: Record<string, string>;
+}
+
+/**
+ * Union type for all transport configurations
+ */
+export type TransportConfig =
+  | StdioTransportConfig
+  | SseTransportConfig
+  | StreamableHttpTransportConfig;
+
+/**
+ * MCP server capabilities
+ */
+export interface McpCapabilities {
+  tools?: boolean | { listChanged?: boolean };
+  resources?: boolean | { subscribe?: boolean; listChanged?: boolean };
+  prompts?: boolean | { listChanged?: boolean };
+  logging?: boolean;
+  sampling?: boolean;
+}
+
+/**
+ * MCP server information
+ */
+export interface ServerInfo {
+  name: string;
+  version: string;
+}
+
+/**
+ * JSON Schema type for tool input
+ */
+export interface JsonSchema {
+  type: string;
+  properties?: Record<string, JsonSchemaProperty>;
+  required?: string[];
+  description?: string;
+  additionalProperties?: boolean;
+}
+
+/**
+ * JSON Schema property definition
+ */
+export interface JsonSchemaProperty {
+  type: string;
+  description?: string;
+  default?: unknown;
+  enum?: string[];
+  items?: JsonSchemaProperty;
+  properties?: Record<string, JsonSchemaProperty>;
+  required?: string[];
+  minimum?: number;
+  maximum?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  format?: string;
+}
+
+/**
+ * MCP Tool definition
+ */
+export interface McpTool {
+  name: string;
+  description?: string;
+  inputSchema?: JsonSchema;
+}
+
+/**
+ * MCP Resource definition
+ */
+export interface McpResource {
+  uri: string;
+  name?: string;
+  description?: string;
+  mimeType?: string;
+}
+
+/**
+ * Resource contents from reading
+ */
+export interface ResourceContents {
+  uri: string;
+  mimeType?: string;
+  text?: string;
+  blob?: string;
+}
+
+/**
+ * MCP Prompt definition
+ */
+export interface McpPrompt {
+  name: string;
+  description?: string;
+  arguments?: PromptArgument[];
+}
+
+/**
+ * Prompt argument definition
+ */
+export interface PromptArgument {
+  name: string;
+  description?: string;
+  required?: boolean;
+}
+
+/**
+ * Prompt message from execution
+ */
+export interface PromptMessage {
+  role: 'user' | 'assistant' | 'system';
+  content: TextContent | ImageContent | ResourceContent;
+}
+
+/**
+ * Text content in prompt message
+ */
+export interface TextContent {
+  type: 'text';
+  text: string;
+}
+
+/**
+ * Image content in prompt message
+ */
+export interface ImageContent {
+  type: 'image';
+  data: string;
+  mimeType: string;
+}
+
+/**
+ * Resource content in prompt message
+ */
+export interface ResourceContent {
+  type: 'resource';
+  resource: {
+    uri: string;
+    mimeType?: string;
+    text?: string;
+    blob?: string;
+  };
+}
+
+/**
+ * Log entry for execution logs
+ */
+export interface LogEntry {
+  id: string;
+  timestamp: Date;
+  type: 'info' | 'request' | 'response' | 'error' | 'stdout' | 'stderr' | 'success';
+  message: string;
+  data?: unknown;
+}
+
+/**
+ * Connection status type
+ */
+export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+
+/**
+ * Capability tab type
+ */
+export type CapabilityTab = 'tools' | 'resources' | 'prompts';

package/apps/web/components/streaming/StreamingProgress.tsx

@@ -0,0 +1,441 @@
+/**
+ * Streaming Progress Component - Real-time conversion progress via SSE
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Github,
+  Code2,
+  Package,
+  Terminal,
+  Check,
+  Loader2,
+  AlertCircle,
+  Wifi,
+  WifiOff,
+  Play,
+  Pause,
+  X,
+  RefreshCw,
+  Zap,
+  FileJson,
+  Database,
+  Search,
+} from 'lucide-react';
+import type { 
+  StreamingEvent, 
+  StreamingProgressData, 
+  StreamingToolData,
+  StreamingStatus,
+  Tool,
+  ConversionResult,
+} from '@/types';
+
+interface StreamingProgressProps {
+  url: string;
+  onComplete: (result: ConversionResult) => void;
+  onError: (error: string) => void;
+  onCancel?: () => void;
+  autoStart?: boolean;
+}
+
+const STEP_ICONS: Record<string, typeof Github> = {
+  'fetch': Github,
+  'clone': Github,
+  'analyze': Search,
+  'parse': Code2,
+  'extract': Package,
+  'generate': Terminal,
+  'openapi': FileJson,
+  'graphql': Database,
+  'readme': FileJson,
+  'code': Code2,
+  'complete': Check,
+};
+
+const STEP_COLORS: Record<string, string> = {
+  'fetch': 'from-blue-500/20 to-blue-600/10',
+  'clone': 'from-blue-500/20 to-blue-600/10',
+  'analyze': 'from-purple-500/20 to-purple-600/10',
+  'parse': 'from-green-500/20 to-green-600/10',
+  'extract': 'from-orange-500/20 to-orange-600/10',
+  'generate': 'from-pink-500/20 to-pink-600/10',
+  'complete': 'from-emerald-500/20 to-emerald-600/10',
+};
+
+export default function StreamingProgress({
+  url,
+  onComplete,
+  onError,
+  onCancel,
+  autoStart = true,
+}: StreamingProgressProps) {
+  const [status, setStatus] = useState<StreamingStatus>('idle');
+  const [currentProgress, setCurrentProgress] = useState<StreamingProgressData | null>(null);
+  const [discoveredTools, setDiscoveredTools] = useState<Tool[]>([]);
+  const [logs, setLogs] = useState<Array<{ message: string; timestamp: string; type: 'info' | 'tool' | 'error' }>>([]);
+  const [overallProgress, setOverallProgress] = useState(0);
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Elapsed time timer
+  useEffect(() => {
+    if (status === 'streaming' && !isPaused) {
+      startTimeRef.current = startTimeRef.current || Date.now();
+      timerRef.current = setInterval(() => {
+        if (startTimeRef.current) {
+          setElapsedTime(Math.floor((Date.now() - startTimeRef.current) / 1000));
+        }
+      }, 100);
+    } else {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    }
+    
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [status, isPaused]);
+
+  const addLog = useCallback((message: string, type: 'info' | 'tool' | 'error' = 'info') => {
+    setLogs(prev => [...prev, { 
+      message, 
+      timestamp: new Date().toISOString(),
+      type,
+    }].slice(-50)); // Keep last 50 logs
+  }, []);
+
+  const startStreaming = useCallback(() => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    setStatus('connecting');
+    setDiscoveredTools([]);
+    setLogs([]);
+    setOverallProgress(0);
+    setElapsedTime(0);
+    startTimeRef.current = null;
+    addLog('Connecting to conversion stream...');
+
+    const encodedUrl = encodeURIComponent(url);
+    const eventSource = new EventSource(`/api/stream?url=${encodedUrl}`);
+    eventSourceRef.current = eventSource;
+
+    eventSource.onopen = () => {
+      setStatus('streaming');
+      addLog('Connected. Starting conversion...');
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data: StreamingEvent = JSON.parse(event.data);
+        
+        switch (data.type) {
+          case 'progress': {
+            const progressData = data.data as StreamingProgressData;
+            setCurrentProgress(progressData);
+            setOverallProgress(progressData.progress);
+            addLog(`${progressData.step}: ${progressData.description}`);
+            break;
+          }
+          
+          case 'tool': {
+            const toolData = data.data as StreamingToolData;
+            setDiscoveredTools(prev => [...prev, toolData.tool]);
+            setOverallProgress(Math.min(90, 50 + (toolData.index / toolData.total) * 40));
+            addLog(`Discovered tool: ${toolData.tool.name}`, 'tool');
+            break;
+          }
+          
+          case 'complete': {
+            const completeData = data.data as { result: ConversionResult; totalTime: number };
+            setStatus('complete');
+            setOverallProgress(100);
+            addLog(`Conversion complete! Found ${completeData.result.tools.length} tools in ${(completeData.totalTime / 1000).toFixed(1)}s`);
+            eventSource.close();
+            onComplete(completeData.result);
+            break;
+          }
+          
+          case 'error': {
+            const errorData = data.data as { error: string; code: string };
+            setStatus('error');
+            addLog(`Error: ${errorData.error}`, 'error');
+            eventSource.close();
+            onError(errorData.error);
+            break;
+          }
+        }
+      } catch (err) {
+        console.error('Failed to parse streaming event:', err);
+      }
+    };
+
+    eventSource.onerror = () => {
+      if (status !== 'complete' && status !== 'error') {
+        setStatus('error');
+        addLog('Connection lost. Please try again.', 'error');
+        eventSource.close();
+        onError('Connection to server lost');
+      }
+    };
+  }, [url, onComplete, onError, addLog, status]);
+
+  const stopStreaming = useCallback(() => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    setStatus('idle');
+    addLog('Conversion cancelled');
+    onCancel?.();
+  }, [onCancel, addLog]);
+
+  const togglePause = useCallback(() => {
+    setIsPaused(prev => !prev);
+    // Note: True pause would require server-side support
+    // This just pauses the UI timer
+  }, []);
+
+  // Auto-start if configured
+  useEffect(() => {
+    if (autoStart && status === 'idle' && url) {
+      startStreaming();
+    }
+    
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+      }
+    };
+  }, [autoStart, url]); // Intentionally not including startStreaming to prevent loops
+
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+  };
+
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'connecting':
+        return <Wifi className="w-5 h-5 text-blue-400 animate-pulse" />;
+      case 'streaming':
+        return <Zap className="w-5 h-5 text-green-400 animate-pulse" />;
+      case 'complete':
+        return <Check className="w-5 h-5 text-green-400" />;
+      case 'error':
+        return <WifiOff className="w-5 h-5 text-red-400" />;
+      default:
+        return <Loader2 className="w-5 h-5 text-neutral-400" />;
+    }
+  };
+
+  const StepIcon = currentProgress?.step ? (STEP_ICONS[currentProgress.step] || Code2) : Code2;
+  const stepColor = currentProgress?.step ? (STEP_COLORS[currentProgress.step] || 'from-neutral-500/20 to-neutral-600/10') : 'from-neutral-500/20 to-neutral-600/10';
+
+  return (
+    <div className="space-y-6">
+      {/* Main progress card */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl overflow-hidden"
+      >
+        {/* Header */}
+        <div className={`p-6 bg-gradient-to-br ${stepColor}`}>
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              {getStatusIcon()}
+              <div>
+                <h3 className="text-lg font-semibold text-white">
+                  {status === 'connecting' && 'Connecting...'}
+                  {status === 'streaming' && 'Converting Repository'}
+                  {status === 'complete' && 'Conversion Complete'}
+                  {status === 'error' && 'Conversion Failed'}
+                  {status === 'idle' && 'Ready to Convert'}
+                </h3>
+                <p className="text-sm text-neutral-400">
+                  {status === 'streaming' && `Elapsed: ${formatTime(elapsedTime)}`}
+                  {status === 'complete' && `Completed in ${formatTime(elapsedTime)}`}
+                  {status === 'idle' && 'Click start to begin'}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {status === 'streaming' && (
+                <>
+                  <button
+                    onClick={togglePause}
+                    className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                    title={isPaused ? 'Resume' : 'Pause'}
+                  >
+                    {isPaused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
+                  </button>
+                  <button
+                    onClick={stopStreaming}
+                    className="p-2 rounded-lg bg-white/10 hover:bg-red-500/20 transition-colors"
+                    title="Cancel"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </>
+              )}
+              {(status === 'error' || status === 'idle') && (
+                <button
+                  onClick={startStreaming}
+                  className="flex items-center gap-2 px-4 py-2 bg-white text-black rounded-lg font-medium hover:bg-neutral-200 transition-colors"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                  {status === 'error' ? 'Retry' : 'Start'}
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Progress bar */}
+          <div className="relative h-2 bg-black/30 rounded-full overflow-hidden">
+            <motion.div
+              className="absolute inset-y-0 left-0 bg-white rounded-full"
+              initial={{ width: 0 }}
+              animate={{ width: `${overallProgress}%` }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+            />
+            {status === 'streaming' && (
+              <motion.div
+                className="absolute inset-y-0 w-20 bg-gradient-to-r from-transparent via-white/30 to-transparent"
+                animate={{ x: ['-100%', '500%'] }}
+                transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}
+              />
+            )}
+          </div>
+          <div className="flex justify-between mt-2 text-xs text-neutral-400">
+            <span>{currentProgress?.description || 'Waiting...'}</span>
+            <span>{Math.round(overallProgress)}%</span>
+          </div>
+        </div>
+
+        {/* Current step detail */}
+        {currentProgress && status === 'streaming' && (
+          <div className="p-4 border-t border-neutral-800">
+            <div className="flex items-center gap-4">
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
+                className="w-12 h-12 rounded-xl bg-white/5 border border-neutral-700 flex items-center justify-center"
+              >
+                <StepIcon className="w-6 h-6 text-white" />
+              </motion.div>
+              <div className="flex-1">
+                <div className="font-medium text-white capitalize">{currentProgress.step}</div>
+                <div className="text-sm text-neutral-400">{currentProgress.description}</div>
+                {currentProgress.details && (
+                  <div className="text-xs text-neutral-500 mt-1 font-mono">{currentProgress.details}</div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </motion.div>
+
+      {/* Discovered tools */}
+      <AnimatePresence>
+        {discoveredTools.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="rounded-xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl overflow-hidden"
+          >
+            <div className="p-4 border-b border-neutral-800">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Package className="w-4 h-4 text-green-400" />
+                  <span className="font-medium text-white">Discovered Tools</span>
+                </div>
+                <span className="text-sm text-neutral-400">{discoveredTools.length} found</span>
+              </div>
+            </div>
+            <div className="max-h-60 overflow-y-auto">
+              <div className="p-2 space-y-1">
+                {discoveredTools.map((tool, index) => (
+                  <motion.div
+                    key={`${tool.name}-${index}`}
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: index * 0.05 }}
+                    className="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors"
+                  >
+                    <div className="w-6 h-6 rounded bg-white/10 flex items-center justify-center">
+                      <Check className="w-3 h-3 text-green-400" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="font-mono text-sm text-white truncate">{tool.name}</div>
+                      <div className="text-xs text-neutral-500 truncate">{tool.description}</div>
+                    </div>
+                    <span className="text-xs text-neutral-600 px-1.5 py-0.5 bg-white/5 rounded">
+                      {tool.source?.type || 'unknown'}
+                    </span>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Live logs */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.2 }}
+        className="rounded-xl border border-neutral-800 bg-black/50 overflow-hidden"
+      >
+        <div className="flex items-center justify-between p-3 border-b border-neutral-800">
+          <div className="flex items-center gap-2">
+            <Terminal className="w-4 h-4 text-neutral-500" />
+            <span className="text-sm font-medium text-neutral-400">Live Log</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            <span className="text-xs text-neutral-500">Live</span>
+          </div>
+        </div>
+        <div className="h-40 overflow-y-auto font-mono text-xs p-3 space-y-1 scrollbar-thin">
+          {logs.map((log, index) => (
+            <div
+              key={index}
+              className={`flex gap-2 ${
+                log.type === 'error' ? 'text-red-400' : 
+                log.type === 'tool' ? 'text-green-400' : 
+                'text-neutral-500'
+              }`}
+            >
+              <span className="text-neutral-600 flex-shrink-0">
+                {new Date(log.timestamp).toLocaleTimeString()}
+              </span>
+              <span>{log.message}</span>
+            </div>
+          ))}
+          {logs.length === 0 && (
+            <div className="text-neutral-600">Waiting for events...</div>
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/apps/web/components/streaming/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Streaming components barrel export
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+export { default as StreamingProgress } from './StreamingProgress';

package/apps/web/components/ui/badge.tsx

@@ -0,0 +1,42 @@
+/**
+ * Badge Component
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'bg-white/10 text-white border border-neutral-700',
+        secondary: 'bg-white/5 text-neutral-400 border border-neutral-800',
+        success: 'bg-green-500/20 text-green-300 border border-green-500/30',
+        warning: 'bg-amber-500/20 text-amber-300 border border-amber-500/30',
+        destructive: 'bg-red-500/20 text-red-300 border border-red-500/30',
+        blue: 'bg-blue-500/20 text-blue-300 border border-blue-500/30',
+        purple: 'bg-purple-500/20 text-purple-300 border border-purple-500/30',
+        outline: 'bg-transparent border border-neutral-700 text-neutral-400',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };