github-to-mcp-monorepo 1.0.0

package/apps/web/hooks/useBatchConversion.ts

@@ -0,0 +1,271 @@
+/**
+ * useBatchConversion Hook - Batch conversion state management
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+import { useState, useCallback, useRef, useMemo } from 'react';
+import type { BatchConversionItem, BatchConversionState, ConversionResult, ApiError } from '@/types';
+
+interface UseBatchConversionOptions {
+  maxConcurrent?: number;
+  onItemComplete?: (item: BatchConversionItem) => void;
+  onItemError?: (item: BatchConversionItem, error: string) => void;
+  onBatchComplete?: (items: BatchConversionItem[]) => void;
+}
+
+interface UseBatchConversionReturn {
+  items: BatchConversionItem[];
+  state: BatchConversionState;
+  stats: {
+    total: number;
+    pending: number;
+    converting: number;
+    success: number;
+    error: number;
+    progress: number;
+    totalTools: number;
+  };
+  addUrl: (url: string) => boolean;
+  addUrls: (urls: string[]) => number;
+  removeItem: (id: string) => void;
+  clearAll: () => void;
+  clearCompleted: () => void;
+  retryFailed: () => void;
+  start: () => Promise<void>;
+  pause: () => void;
+  resume: () => Promise<void>;
+}
+
+const isValidGithubUrl = (url: string): boolean => {
+  const pattern = /^https?:\/\/(www\.)?github\.com\/[\w-]+\/[\w.-]+\/?$/i;
+  return pattern.test(url.trim());
+};
+
+export function useBatchConversion(
+  options: UseBatchConversionOptions = {}
+): UseBatchConversionReturn {
+  const {
+    maxConcurrent = 3,
+    onItemComplete,
+    onItemError,
+    onBatchComplete,
+  } = options;
+
+  const [items, setItems] = useState<BatchConversionItem[]>([]);
+  const [state, setState] = useState<BatchConversionState>('idle');
+  
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Computed stats
+  const stats = useMemo(() => {
+    const pending = items.filter(i => i.status === 'pending').length;
+    const converting = items.filter(i => i.status === 'converting').length;
+    const success = items.filter(i => i.status === 'success').length;
+    const error = items.filter(i => i.status === 'error').length;
+    const total = items.length;
+    const progress = total > 0 ? ((success + error) / total) * 100 : 0;
+    const totalTools = items.reduce((sum, item) => sum + (item.result?.tools.length || 0), 0);
+
+    return { pending, converting, success, error, total, progress, totalTools };
+  }, [items]);
+
+  // Add single URL
+  const addUrl = useCallback((url: string): boolean => {
+    const trimmedUrl = url.trim();
+    if (!trimmedUrl || !isValidGithubUrl(trimmedUrl)) return false;
+
+    // Check for duplicates
+    if (items.some(item => item.url.toLowerCase() === trimmedUrl.toLowerCase())) {
+      return false;
+    }
+
+    const newItem: BatchConversionItem = {
+      id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      url: trimmedUrl,
+      status: 'pending',
+    };
+
+    setItems(prev => [...prev, newItem]);
+    return true;
+  }, [items]);
+
+  // Add multiple URLs
+  const addUrls = useCallback((urls: string[]): number => {
+    let added = 0;
+    urls.forEach(url => {
+      if (addUrl(url)) added++;
+    });
+    return added;
+  }, [addUrl]);
+
+  // Remove item
+  const removeItem = useCallback((id: string) => {
+    setItems(prev => prev.filter(item => item.id !== id));
+  }, []);
+
+  // Clear all
+  const clearAll = useCallback(() => {
+    setItems([]);
+    setState('idle');
+  }, []);
+
+  // Clear completed
+  const clearCompleted = useCallback(() => {
+    setItems(prev => prev.filter(item => item.status !== 'success'));
+  }, []);
+
+  // Retry failed
+  const retryFailed = useCallback(() => {
+    setItems(prev =>
+      prev.map(item =>
+        item.status === 'error'
+          ? { ...item, status: 'pending', error: undefined, progress: 0 }
+          : item
+      )
+    );
+  }, []);
+
+  // Convert single item
+  const convertItem = useCallback(
+    async (item: BatchConversionItem, signal: AbortSignal) => {
+      // Update to converting status
+      setItems(prev =>
+        prev.map(i =>
+          i.id === item.id ? { ...i, status: 'converting', progress: 10 } : i
+        )
+      );
+
+      try {
+        // Simulate progress
+        const progressInterval = setInterval(() => {
+          setItems(prev =>
+            prev.map(i =>
+              i.id === item.id && i.status === 'converting'
+                ? { ...i, progress: Math.min((i.progress || 10) + Math.random() * 20, 90) }
+                : i
+            )
+          );
+        }, 500);
+
+        // API call
+        const response = await fetch('/api/convert', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url: item.url }),
+          signal,
+        });
+
+        clearInterval(progressInterval);
+
+        if (!response.ok) {
+          const errorData = (await response.json()) as ApiError;
+          throw new Error(errorData.error || 'Conversion failed');
+        }
+
+        const result = (await response.json()) as ConversionResult;
+
+        const updatedItem: BatchConversionItem = {
+          ...item,
+          status: 'success',
+          result,
+          progress: 100,
+        };
+
+        setItems(prev =>
+          prev.map(i => (i.id === item.id ? updatedItem : i))
+        );
+
+        onItemComplete?.(updatedItem);
+        return result;
+      } catch (err: any) {
+        if (err.name === 'AbortError') {
+          setItems(prev =>
+            prev.map(i =>
+              i.id === item.id ? { ...i, status: 'pending', progress: 0 } : i
+            )
+          );
+          return null;
+        }
+
+        const updatedItem: BatchConversionItem = {
+          ...item,
+          status: 'error',
+          error: { error: err.message, code: 'CONVERSION_FAILED' },
+          progress: 0,
+        };
+
+        setItems(prev =>
+          prev.map(i => (i.id === item.id ? updatedItem : i))
+        );
+
+        onItemError?.(updatedItem, err.message);
+        return null;
+      }
+    },
+    [onItemComplete, onItemError]
+  );
+
+  // Start batch conversion
+  const start = useCallback(async () => {
+    if (state === 'running') return;
+
+    setState('running');
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
+
+    const pendingItems = items.filter(i => i.status === 'pending');
+    const queue = [...pendingItems];
+    const running: Promise<any>[] = [];
+
+    while ((queue.length > 0 || running.length > 0) && !signal.aborted) {
+      // Fill up to maxConcurrent
+      while (queue.length > 0 && running.length < maxConcurrent) {
+        const item = queue.shift()!;
+        const promise = convertItem(item, signal).finally(() => {
+          running.splice(running.indexOf(promise), 1);
+        });
+        running.push(promise);
+      }
+
+      // Wait for at least one to complete
+      if (running.length > 0) {
+        await Promise.race(running);
+      }
+    }
+
+    // Wait for remaining
+    await Promise.all(running);
+
+    if (!signal.aborted) {
+      setState('complete');
+      onBatchComplete?.(items);
+    }
+  }, [items, state, maxConcurrent, convertItem, onBatchComplete]);
+
+  // Pause batch
+  const pause = useCallback(() => {
+    abortControllerRef.current?.abort();
+    setState('paused');
+  }, []);
+
+  // Resume batch
+  const resume = useCallback(async () => {
+    await start();
+  }, [start]);
+
+  return {
+    items,
+    state,
+    stats,
+    addUrl,
+    addUrls,
+    removeItem,
+    clearAll,
+    clearCompleted,
+    retryFailed,
+    start,
+    pause,
+    resume,
+  };
+}

package/apps/web/hooks/useDockerConfig.ts

@@ -0,0 +1,161 @@
+/**
+ * useDockerConfig Hook - Generate Docker configuration
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+import { useState, useMemo, useCallback } from 'react';
+import type { DockerConfig, DockerExportOptions, ConversionResult } from '@/types';
+
+const DEFAULT_OPTIONS: DockerExportOptions = {
+  baseImage: 'node:20-alpine',
+  port: 3000,
+  exposePorts: [3000],
+  envVars: {},
+  volumes: [],
+  healthCheck: true,
+  multiStage: true,
+  runAsNonRoot: true,
+  labels: true,
+};
+
+interface UseDockerConfigReturn {
+  options: DockerExportOptions;
+  config: DockerConfig;
+  setOptions: (options: Partial<DockerExportOptions>) => void;
+  resetOptions: () => void;
+  downloadAll: () => void;
+}
+
+export function useDockerConfig(
+  result: ConversionResult,
+  serverName: string = 'mcp-server'
+): UseDockerConfigReturn {
+  const [options, setOptionsState] = useState<DockerExportOptions>(DEFAULT_OPTIONS);
+
+  const sanitizedServerName = useMemo(
+    () => serverName.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/--+/g, '-'),
+    [serverName]
+  );
+
+  const setOptions = useCallback((newOptions: Partial<DockerExportOptions>) => {
+    setOptionsState(prev => ({ ...prev, ...newOptions }));
+  }, []);
+
+  const resetOptions = useCallback(() => {
+    setOptionsState(DEFAULT_OPTIONS);
+  }, []);
+
+  // Generate Dockerfile content
+  const dockerfile = useMemo(() => {
+    const isNode = options.baseImage.includes('node');
+    const isAlpine = options.baseImage.includes('alpine');
+
+    let content = `# ${sanitizedServerName} MCP Server\n# Generated by github-to-mcp\n\n`;
+
+    if (options.multiStage && isNode) {
+      content += `FROM ${options.baseImage} AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY . .\nRUN npm run build --if-present\n\nFROM ${options.baseImage} AS production\n\n`;
+    } else {
+      content += `FROM ${options.baseImage}\n\n`;
+    }
+
+    if (options.labels) {
+      content += `LABEL org.opencontainers.image.title="${sanitizedServerName}"\nLABEL org.opencontainers.image.description="MCP Server with ${result.tools.length} tools"\n\n`;
+    }
+
+    content += `WORKDIR /app\n\n`;
+
+    if (options.runAsNonRoot) {
+      if (isAlpine) {
+        content += `RUN addgroup -g 1001 -S mcpuser && adduser -S -D -H -u 1001 -s /sbin/nologin -G mcpuser mcpuser\n\n`;
+      } else {
+        content += `RUN groupadd -g 1001 mcpuser && useradd -r -u 1001 -g mcpuser mcpuser\n\n`;
+      }
+    }
+
+    if (options.multiStage && isNode) {
+      content += `COPY --from=builder /app/node_modules ./node_modules\nCOPY --from=builder /app/dist ./dist\nCOPY --from=builder /app/package.json ./\n\n`;
+    } else if (isNode) {
+      content += `COPY package*.json ./\nRUN npm ci --only=production\nCOPY . .\n\n`;
+    }
+
+    content += `ENV NODE_ENV=production\nENV PORT=${options.port}\n\n`;
+    content += `EXPOSE ${options.port}\n\n`;
+
+    if (options.healthCheck) {
+      content += `HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 CMD node -e "require('http').get('http://localhost:${options.port}/health', (r) => process.exit(r.statusCode === 200 ? 0 : 1))"\n\n`;
+    }
+
+    if (options.runAsNonRoot) {
+      content += `USER mcpuser\n\n`;
+    }
+
+    content += isAlpine
+      ? `ENTRYPOINT ["dumb-init", "--"]\nCMD ["node", "dist/index.js"]\n`
+      : `CMD ["node", "dist/index.js"]\n`;
+
+    return content;
+  }, [options, sanitizedServerName, result.tools.length]);
+
+  // Generate docker-compose.yml
+  const dockerCompose = useMemo(() => {
+    let content = `version: '3.8'\n\nservices:\n  ${sanitizedServerName}:\n    build:\n      context: .\n      dockerfile: Dockerfile\n    container_name: ${sanitizedServerName}\n    restart: unless-stopped\n    ports:\n`;
+
+    options.exposePorts.forEach(port => {
+      content += `      - "${port}:${port}"\n`;
+    });
+
+    content += `    environment:\n      - NODE_ENV=production\n`;
+
+    if (options.healthCheck) {
+      content += `    healthcheck:\n      test: ["CMD", "curl", "-f", "http://localhost:${options.port}/health"]\n      interval: 30s\n      timeout: 10s\n      retries: 3\n`;
+    }
+
+    content += `    networks:\n      - mcp-network\n\nnetworks:\n  mcp-network:\n    driver: bridge\n`;
+
+    return content;
+  }, [options, sanitizedServerName]);
+
+  // Generate .env.example
+  const envExample = useMemo(() => {
+    return `# ${sanitizedServerName} Environment Variables\nPORT=${options.port}\nNODE_ENV=production\n`;
+  }, [options.port, sanitizedServerName]);
+
+  const config: DockerConfig = useMemo(
+    () => ({
+      dockerfile,
+      dockerCompose,
+      envExample,
+      buildCommand: `docker build -t ${sanitizedServerName}:latest .`,
+      runCommand: `docker run -d --name ${sanitizedServerName} -p ${options.port}:${options.port} ${sanitizedServerName}:latest`,
+      serverName: sanitizedServerName,
+    }),
+    [dockerfile, dockerCompose, envExample, sanitizedServerName, options.port]
+  );
+
+  const downloadFile = useCallback((content: string, filename: string) => {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  const downloadAll = useCallback(() => {
+    downloadFile(dockerfile, 'Dockerfile');
+    downloadFile(dockerCompose, 'docker-compose.yml');
+    downloadFile(envExample, '.env.example');
+  }, [dockerfile, dockerCompose, envExample, downloadFile]);
+
+  return {
+    options,
+    config,
+    setOptions,
+    resetOptions,
+    downloadAll,
+  };
+}

package/apps/web/hooks/usePlatformDetection.ts

@@ -0,0 +1,80 @@
+/**
+ * usePlatformDetection Hook - Detect user's platform and environment
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import type { PlatformDetection, InstallPlatform } from '@/types';
+
+interface UsePlatformDetectionReturn {
+  detection: PlatformDetection | null;
+  isDetecting: boolean;
+  platform: InstallPlatform;
+  refresh: () => void;
+}
+
+export function usePlatformDetection(): UsePlatformDetectionReturn {
+  const [detection, setDetection] = useState<PlatformDetection | null>(null);
+  const [isDetecting, setIsDetecting] = useState(true);
+  const [platform, setPlatform] = useState<InstallPlatform>('linux');
+
+  const detect = useCallback(() => {
+    setIsDetecting(true);
+
+    try {
+      const ua = navigator.userAgent.toLowerCase();
+      let os: InstallPlatform = 'linux';
+
+      if (ua.includes('mac') || ua.includes('darwin')) {
+        os = 'macos';
+      } else if (ua.includes('win')) {
+        os = 'windows';
+      } else if (ua.includes('linux') || ua.includes('x11')) {
+        os = 'linux';
+      }
+
+      // Detect architecture
+      const arch = ua.includes('arm') || ua.includes('aarch64') ? 'arm64' : 'x64';
+
+      // Check for platform-specific hints
+      const platform = (navigator as any).userAgentData?.platform?.toLowerCase();
+      if (platform) {
+        if (platform.includes('mac')) os = 'macos';
+        else if (platform.includes('win')) os = 'windows';
+        else if (platform.includes('linux')) os = 'linux';
+      }
+
+      const detectionResult: PlatformDetection = {
+        os,
+        arch,
+        // These would ideally come from a backend check or browser extension
+        nodeVersion: undefined,
+        npmVersion: undefined,
+        hasDocker: undefined,
+        hasPython: undefined,
+        pythonVersion: undefined,
+      };
+
+      setDetection(detectionResult);
+      setPlatform(os);
+    } catch (error) {
+      console.error('Platform detection failed:', error);
+      setDetection({ os: 'linux', arch: 'x64' });
+      setPlatform('linux');
+    } finally {
+      setIsDetecting(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    detect();
+  }, [detect]);
+
+  return {
+    detection,
+    isDetecting,
+    platform,
+    refresh: detect,
+  };
+}

package/apps/web/hooks/useStreaming.ts

@@ -0,0 +1,199 @@
+/**
+ * useStreaming Hook - SSE streaming connection management
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { 
+  StreamingEvent, 
+  StreamingStatus, 
+  StreamingProgressData,
+  Tool,
+  ConversionResult,
+} from '@/types';
+
+interface UseStreamingOptions {
+  autoStart?: boolean;
+  onProgress?: (progress: StreamingProgressData) => void;
+  onTool?: (tool: Tool, index: number, total: number) => void;
+  onComplete?: (result: ConversionResult) => void;
+  onError?: (error: string) => void;
+}
+
+interface UseStreamingReturn {
+  status: StreamingStatus;
+  progress: number;
+  currentStep: StreamingProgressData | null;
+  discoveredTools: Tool[];
+  error: string | null;
+  elapsedTime: number;
+  start: () => void;
+  stop: () => void;
+  reset: () => void;
+}
+
+export function useStreaming(
+  url: string,
+  options: UseStreamingOptions = {}
+): UseStreamingReturn {
+  const { autoStart = false, onProgress, onTool, onComplete, onError } = options;
+
+  const [status, setStatus] = useState<StreamingStatus>('idle');
+  const [progress, setProgress] = useState(0);
+  const [currentStep, setCurrentStep] = useState<StreamingProgressData | null>(null);
+  const [discoveredTools, setDiscoveredTools] = useState<Tool[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [elapsedTime, setElapsedTime] = useState(0);
+
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Elapsed time tracking
+  useEffect(() => {
+    if (status === 'streaming') {
+      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]);
+
+  // Start streaming
+  const start = useCallback(() => {
+    if (!url) return;
+
+    // Cleanup existing connection
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    // Reset state
+    setStatus('connecting');
+    setProgress(0);
+    setCurrentStep(null);
+    setDiscoveredTools([]);
+    setError(null);
+    setElapsedTime(0);
+    startTimeRef.current = null;
+
+    const encodedUrl = encodeURIComponent(url);
+    const eventSource = new EventSource(`/api/stream?url=${encodedUrl}`);
+    eventSourceRef.current = eventSource;
+
+    eventSource.onopen = () => {
+      setStatus('streaming');
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data: StreamingEvent = JSON.parse(event.data);
+
+        switch (data.type) {
+          case 'progress': {
+            const progressData = data.data as StreamingProgressData;
+            setCurrentStep(progressData);
+            setProgress(progressData.progress);
+            onProgress?.(progressData);
+            break;
+          }
+
+          case 'tool': {
+            const toolData = data.data as { tool: Tool; index: number; total: number };
+            setDiscoveredTools(prev => [...prev, toolData.tool]);
+            setProgress(prev => Math.min(90, prev + 5));
+            onTool?.(toolData.tool, toolData.index, toolData.total);
+            break;
+          }
+
+          case 'complete': {
+            const completeData = data.data as { result: ConversionResult };
+            setStatus('complete');
+            setProgress(100);
+            eventSource.close();
+            onComplete?.(completeData.result);
+            break;
+          }
+
+          case 'error': {
+            const errorData = data.data as { error: string };
+            setStatus('error');
+            setError(errorData.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');
+        setError('Connection lost');
+        eventSource.close();
+        onError?.('Connection lost');
+      }
+    };
+  }, [url, onProgress, onTool, onComplete, onError, status]);
+
+  // Stop streaming
+  const stop = useCallback(() => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    setStatus('idle');
+  }, []);
+
+  // Reset state
+  const reset = useCallback(() => {
+    stop();
+    setProgress(0);
+    setCurrentStep(null);
+    setDiscoveredTools([]);
+    setError(null);
+    setElapsedTime(0);
+    startTimeRef.current = null;
+  }, [stop]);
+
+  // Auto-start
+  useEffect(() => {
+    if (autoStart && url && status === 'idle') {
+      start();
+    }
+
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+      }
+    };
+  }, [autoStart, url]); // Intentionally not including start/status to prevent loops
+
+  return {
+    status,
+    progress,
+    currentStep,
+    discoveredTools,
+    error,
+    elapsedTime,
+    start,
+    stop,
+    reset,
+  };
+}