github-to-mcp-monorepo 1.0.0

package/apps/web/hooks/use-playground-store.ts

@@ -0,0 +1,299 @@
+/**
+ * Playground Store Hook - Convenient access to playground state
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  usePlaygroundStore as useStore,
+  createPlaygroundError,
+  createAnalyticsTracker,
+  type PlaygroundState,
+  type PlaygroundError,
+  type ExecuteToolRequest,
+  type ExecuteToolResponse,
+} from '@/lib/playground-store';
+import type { ConversionResult, Tool } from '@/types';
+
+export { type PlaygroundState, type PlaygroundError, type ExecuteToolRequest, type ExecuteToolResponse };
+
+/**
+ * Main hook for accessing playground state and actions
+ */
+export function usePlaygroundState() {
+  const { state, dispatch, setConversionResult, setError, clearState, generateShareableLink, loadFromUrl, loadFromGist } = useStore();
+
+  return {
+    // State
+    generatedCode: state.generatedCode,
+    generatedPythonCode: state.generatedPythonCode,
+    tools: state.tools,
+    repoName: state.repoName,
+    repoUrl: state.repoUrl,
+    sessionId: state.sessionId,
+    lastConversion: state.lastConversion,
+    conversionResult: state.conversionResult,
+    error: state.error,
+    isLoading: state.isLoading,
+    
+    // Computed
+    hasCode: !!state.generatedCode,
+    toolCount: state.tools.length,
+    
+    // Actions
+    setConversionResult,
+    setError,
+    clearState,
+    generateShareableLink,
+    loadFromUrl,
+    loadFromGist,
+    
+    // Dispatch for advanced use
+    dispatch,
+  };
+}
+
+/**
+ * Hook for navigating from conversion to playground
+ */
+export function usePlaygroundNavigation() {
+  const router = useRouter();
+  const { setConversionResult, generateShareableLink } = useStore();
+
+  const navigateToPlayground = useCallback((result: ConversionResult) => {
+    // Store the result first
+    setConversionResult(result);
+    
+    // Navigate to playground
+    router.push('/playground');
+  }, [router, setConversionResult]);
+
+  const navigateWithCode = useCallback((code: string, name?: string) => {
+    // For sharing purposes, encode in URL
+    const params = new URLSearchParams();
+    try {
+      params.set('code', btoa(encodeURIComponent(code)));
+      if (name) {
+        params.set('name', name);
+      }
+      router.push(`/playground?${params.toString()}`);
+    } catch (error) {
+      console.error('Failed to encode code for URL:', error);
+      router.push('/playground');
+    }
+  }, [router]);
+
+  return {
+    navigateToPlayground,
+    navigateWithCode,
+    generateShareableLink,
+  };
+}
+
+/**
+ * Hook for managing playground errors
+ */
+export function usePlaygroundErrors() {
+  const { state, setError, dispatch } = useStore();
+
+  const setSyntaxError = useCallback((message: string, details?: string) => {
+    setError(createPlaygroundError('syntax', message, details, false));
+  }, [setError]);
+
+  const setServerError = useCallback((message: string, details?: string) => {
+    setError(createPlaygroundError('server', message, details, true));
+  }, [setError]);
+
+  const setExecutionError = useCallback((message: string, details?: string) => {
+    setError(createPlaygroundError('execution', message, details, true));
+  }, [setError]);
+
+  const setNetworkError = useCallback((message: string, details?: string) => {
+    setError(createPlaygroundError('network', message, details, true));
+  }, [setError]);
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, [setError]);
+
+  const incrementRetry = useCallback(() => {
+    dispatch({ type: 'INCREMENT_RETRY' });
+  }, [dispatch]);
+
+  return {
+    error: state.error,
+    hasError: !!state.error,
+    isRecoverable: state.error?.recoverable ?? false,
+    retryCount: state.error?.retryCount ?? 0,
+    setSyntaxError,
+    setServerError,
+    setExecutionError,
+    setNetworkError,
+    clearError,
+    incrementRetry,
+  };
+}
+
+/**
+ * Hook for tool execution within the playground
+ */
+export function useToolExecution() {
+  const { state, dispatch } = useStore();
+  const analytics = useMemo(() => createAnalyticsTracker(), []);
+
+  const executeToolLocally = useCallback(async (
+    tool: Tool,
+    params: Record<string, unknown>
+  ): Promise<ExecuteToolResponse> => {
+    if (!state.generatedCode) {
+      return {
+        success: false,
+        error: 'No generated code available',
+        sessionId: state.sessionId || '',
+        executionTime: 0,
+      };
+    }
+
+    const startTime = Date.now();
+    
+    try {
+      // Call the API to execute the tool
+      const request: ExecuteToolRequest = {
+        generatedCode: state.generatedCode,
+        toolName: tool.name,
+        toolParams: params,
+        sessionId: state.sessionId || undefined,
+      };
+
+      const response = await fetch('/api/playground/execute', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(request),
+      });
+
+      const executionTime = Date.now() - startTime;
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
+        analytics.trackToolExecution(tool.name, false, executionTime);
+        return {
+          success: false,
+          error: errorData.error || `HTTP ${response.status}`,
+          sessionId: state.sessionId || '',
+          executionTime,
+        };
+      }
+
+      const result: ExecuteToolResponse = await response.json();
+      
+      // Update session ID if returned
+      if (result.sessionId && result.sessionId !== state.sessionId) {
+        dispatch({ type: 'SET_SESSION_ID', payload: result.sessionId });
+      }
+
+      analytics.trackToolExecution(tool.name, result.success, executionTime);
+      return result;
+    } catch (error) {
+      const executionTime = Date.now() - startTime;
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      
+      analytics.trackToolExecution(tool.name, false, executionTime);
+      
+      return {
+        success: false,
+        error: errorMessage,
+        sessionId: state.sessionId || '',
+        executionTime,
+      };
+    }
+  }, [state.generatedCode, state.sessionId, dispatch, analytics]);
+
+  return {
+    executeToolLocally,
+    sessionId: state.sessionId,
+    hasCode: !!state.generatedCode,
+  };
+}
+
+/**
+ * Hook for analytics tracking
+ */
+export function usePlaygroundAnalytics() {
+  const analytics = useMemo(() => createAnalyticsTracker(), []);
+  
+  return analytics;
+}
+
+/**
+ * Hook for sharing playground state
+ */
+export function usePlaygroundSharing() {
+  const { state, generateShareableLink } = useStore();
+  const analytics = useMemo(() => createAnalyticsTracker(), []);
+
+  const copyShareLink = useCallback(async (): Promise<boolean> => {
+    const link = generateShareableLink();
+    if (!link) return false;
+
+    try {
+      await navigator.clipboard.writeText(link);
+      analytics.trackShare('url');
+      return true;
+    } catch (error) {
+      console.error('Failed to copy share link:', error);
+      return false;
+    }
+  }, [generateShareableLink, analytics]);
+
+  const createGistAndShare = useCallback(async (token: string): Promise<string | null> => {
+    if (!state.generatedCode) return null;
+
+    try {
+      const response = await fetch('https://api.github.com/gists', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `token ${token}`,
+        },
+        body: JSON.stringify({
+          description: `MCP Server: ${state.repoName || 'Generated'}`,
+          public: false,
+          files: {
+            [`${state.repoName || 'mcp-server'}.ts`]: {
+              content: state.generatedCode,
+            },
+            ...(state.generatedPythonCode ? {
+              [`${state.repoName || 'mcp-server'}.py`]: {
+                content: state.generatedPythonCode,
+              },
+            } : {}),
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to create Gist: ${response.status}`);
+      }
+
+      const gist = await response.json();
+      const shareUrl = `${window.location.origin}/playground?gist=${gist.id}`;
+      
+      analytics.trackShare('gist');
+      return shareUrl;
+    } catch (error) {
+      console.error('Failed to create Gist:', error);
+      return null;
+    }
+  }, [state.generatedCode, state.generatedPythonCode, state.repoName, analytics]);
+
+  return {
+    canShare: !!state.generatedCode,
+    copyShareLink,
+    createGistAndShare,
+    generateShareableLink,
+  };
+}

package/apps/web/hooks/use-playground.ts

@@ -0,0 +1,184 @@
+/**
+ * usePlayground Hook
+ * Unified hook that combines all MCP playground hooks with UI state management
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { useMcpConnection } from './use-mcp-connection';
+import { useMcpTools } from './use-mcp-tools';
+import { useMcpResources } from './use-mcp-resources';
+import { useMcpPrompts } from './use-mcp-prompts';
+import type {
+  UsePlaygroundOptions,
+  UsePlaygroundReturn,
+  PlaygroundTab,
+  McpTool,
+  McpResource,
+  McpPrompt,
+  McpCapabilities,
+  TransportConfig,
+  McpEventEmitter,
+  McpEvent,
+  ToolExecution,
+  ResourceRead,
+  PromptExecution,
+} from './types';
+import { createDebugLogger, McpEventEmitter as EventEmitterClass } from './types';
+
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+
+export function usePlayground(options: UsePlaygroundOptions = {}): UsePlaygroundReturn {
+  const {
+    debug = false,
+    timeout,
+    cacheTtl,
+    heartbeatInterval,
+    onConnect,
+    onDisconnect,
+    onError,
+  } = options;
+
+  // Create debug logger
+  const log = useMemo(
+    () => createDebugLogger('usePlayground', { enabled: debug }),
+    [debug]
+  );
+
+  // Create shared event emitter
+  const eventEmitter = useMemo<McpEventEmitter>(() => {
+    const emitter = new EventEmitterClass();
+    
+    // Log all events in debug mode
+    if (debug) {
+      emitter.subscribe((event: McpEvent) => {
+        log.debug(`Event: ${event.type}`, event.data);
+      });
+    }
+    
+    return emitter;
+  }, [debug, log]);
+
+  // UI State
+  const [activeTab, setActiveTab] = useState<PlaygroundTab>('tools');
+  const [selectedTool, setSelectedTool] = useState<McpTool | null>(null);
+  const [selectedResource, setSelectedResource] = useState<McpResource | null>(null);
+  const [selectedPrompt, setSelectedPrompt] = useState<McpPrompt | null>(null);
+  const [transportConfig, setTransportConfig] = useState<TransportConfig | null>(null);
+
+  // Initialize sub-hooks with shared event emitter and debug settings
+  const connection = useMcpConnection({
+    debug,
+    timeout,
+    heartbeatInterval,
+    eventEmitter,
+  });
+
+  const tools = useMcpTools({
+    sessionId: connection.sessionId,
+    autoLoad: true,
+    debug,
+    timeout,
+    cacheTtl,
+    eventEmitter,
+  });
+
+  const resources = useMcpResources({
+    sessionId: connection.sessionId,
+    autoLoad: true,
+    debug,
+    timeout,
+    cacheTtl,
+    eventEmitter,
+  });
+
+  const prompts = useMcpPrompts({
+    sessionId: connection.sessionId,
+    autoLoad: true,
+    debug,
+    timeout,
+    cacheTtl,
+    eventEmitter,
+  });
+
+  // Subscribe to connection events for callbacks
+  useEffect(() => {
+    const unsubscribe = eventEmitter.subscribe((event: McpEvent) => {
+      switch (event.type) {
+        case 'connection:connected':
+          log.info('Connected', { sessionId: event.sessionId });
+          if (event.sessionId) {
+            onConnect?.(event.sessionId);
+          }
+          break;
+        case 'connection:disconnected':
+          log.info('Disconnected', { sessionId: event.sessionId });
+          onDisconnect?.();
+          // Clear selections on disconnect
+          setSelectedTool(null);
+          setSelectedResource(null);
+          setSelectedPrompt(null);
+          break;
+        case 'connection:error':
+        case 'tools:error':
+        case 'resources:error':
+        case 'prompts:error':
+          const errorMsg = (event.data as { error?: string })?.error || 'Unknown error';
+          log.error(`Error: ${event.type}`, { error: errorMsg });
+          onError?.(new Error(errorMsg));
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, [eventEmitter, onConnect, onDisconnect, onError, log]);
+
+  // Computed: is playground ready to use
+  const isReady = useMemo(() => {
+    return connection.status === 'connected' && connection.sessionId !== null;
+  }, [connection.status, connection.sessionId]);
+
+  // Check if server has a specific capability
+  const hasCapability = useCallback(
+    (cap: keyof McpCapabilities): boolean => {
+      if (!connection.capabilities) return false;
+      return !!connection.capabilities[cap];
+    },
+    [connection.capabilities]
+  );
+
+  return {
+    // Connection
+    connection,
+
+    // Data
+    tools,
+    resources,
+    prompts,
+
+    // UI State
+    activeTab,
+    setActiveTab,
+    selectedTool,
+    setSelectedTool,
+    selectedResource,
+    setSelectedResource,
+    selectedPrompt,
+    setSelectedPrompt,
+
+    // Transport Config
+    transportConfig,
+    setTransportConfig,
+
+    // Convenience
+    isReady,
+    hasCapability,
+  };
+}
+
+export default usePlayground;

package/apps/web/hooks/use-streaming-conversion.ts

@@ -0,0 +1,227 @@
+/**
+ * useStreamingConversion Hook - Real-time conversion progress
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import type { ConversionResult, ConversionStatus, ApiError } from '@/types';
+
+export interface StreamingStep {
+  id: string;
+  label: string;
+  description: string;
+  status: 'pending' | 'in-progress' | 'complete' | 'error';
+  progress?: number;
+  detail?: string;
+}
+
+const INITIAL_STEPS: StreamingStep[] = [
+  { id: 'validate', label: 'Validating GitHub URL', description: 'Checking repository accessibility', status: 'pending' },
+  { id: 'fetch', label: 'Fetching repository', description: 'Downloading repository metadata', 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: 'generate-py', label: 'Generating Python server', description: 'Creating Python alternative', status: 'pending' },
+  { id: 'configs', label: 'Creating configurations', description: 'Building platform configs', status: 'pending' },
+  { id: 'complete', label: 'Conversion complete', description: 'MCP server ready', status: 'pending' },
+];
+
+interface UseStreamingConversionReturn {
+  status: ConversionStatus;
+  result: ConversionResult | null;
+  error: ApiError | null;
+  steps: StreamingStep[];
+  currentStep: string | null;
+  progress: number;
+  convert: (url: string) => Promise<void>;
+  reset: () => void;
+  cancel: () => void;
+}
+
+export function useStreamingConversion(): UseStreamingConversionReturn {
+  const [status, setStatus] = useState<ConversionStatus>('idle');
+  const [result, setResult] = useState<ConversionResult | null>(null);
+  const [error, setError] = useState<ApiError | null>(null);
+  const [steps, setSteps] = useState<StreamingStep[]>(INITIAL_STEPS);
+  const [currentStep, setCurrentStep] = useState<string | null>(null);
+  const [progress, setProgress] = useState(0);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const updateStep = useCallback((stepId: string, updates: Partial<StreamingStep>) => {
+    setSteps(prev => prev.map(step => 
+      step.id === stepId ? { ...step, ...updates } : step
+    ));
+  }, []);
+
+  const convert = useCallback(async (url: string) => {
+    // Reset state
+    setStatus('loading');
+    setError(null);
+    setResult(null);
+    setSteps(INITIAL_STEPS);
+    setCurrentStep(null);
+    setProgress(0);
+
+    // Create abort controller
+    abortControllerRef.current = new AbortController();
+
+    try {
+      const response = await fetch(`/api/convert/stream?url=${encodeURIComponent(url)}`, {
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Conversion failed');
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error('No response body');
+      }
+
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          if (line.startsWith('event: ')) {
+            const eventType = line.slice(7);
+            const dataLineIndex = lines.indexOf(line) + 1;
+            const dataLine = lines[dataLineIndex];
+            
+            if (dataLine?.startsWith('data: ')) {
+              const data = JSON.parse(dataLine.slice(6));
+              
+              switch (eventType) {
+                case 'progress':
+                  setCurrentStep(data.step);
+                  setProgress(data.progress || 0);
+                  updateStep(data.step, {
+                    status: data.status === 'complete' ? 'complete' : 'in-progress',
+                    detail: data.description,
+                  });
+                  break;
+                  
+                case 'result':
+                  setResult({
+                    ...data,
+                    stats: {
+                      totalTools: data.tools.length,
+                      filesAnalyzed: data.sources?.reduce((acc: number, s: { count: number }) => acc + s.count, 0) || 0,
+                      processingTimeMs: 0,
+                      cacheHit: false,
+                    },
+                    repository: {
+                      owner: url.split('/')[3] || '',
+                      name: data.name,
+                      fullName: `${url.split('/')[3]}/${data.name}`,
+                      url,
+                    },
+                    generatedAt: new Date().toISOString(),
+                  });
+                  break;
+                  
+                case 'error':
+                  setError({
+                    error: data.error,
+                    code: data.code || 'UNKNOWN_ERROR',
+                  });
+                  setStatus('error');
+                  updateStep(currentStep || 'validate', { status: 'error' });
+                  return;
+                  
+                case 'done':
+                  setStatus('success');
+                  setProgress(100);
+                  break;
+              }
+            }
+          } else if (line.startsWith('data: ')) {
+            // Handle data-only lines
+            try {
+              const data = JSON.parse(line.slice(6));
+              if (data.step) {
+                setCurrentStep(data.step);
+                setProgress(data.progress || 0);
+                updateStep(data.step, {
+                  status: data.status === 'complete' ? 'complete' : 'in-progress',
+                  detail: data.description,
+                });
+              }
+              if (data.error) {
+                setError({
+                  error: data.error,
+                  code: data.code || 'UNKNOWN_ERROR',
+                });
+                setStatus('error');
+                return;
+              }
+            } catch {
+              // Ignore parse errors for incomplete data
+            }
+          }
+        }
+      }
+
+      // If we got here without setting success, do it now
+      if (status === 'loading') {
+        setStatus('success');
+      }
+
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') {
+        setStatus('idle');
+        return;
+      }
+      
+      setError({
+        error: err instanceof Error ? err.message : 'Network error',
+        code: 'NETWORK_ERROR',
+        details: 'Failed to connect to the server.',
+      });
+      setStatus('error');
+    }
+  }, [updateStep, currentStep, status]);
+
+  const reset = useCallback(() => {
+    setStatus('idle');
+    setResult(null);
+    setError(null);
+    setSteps(INITIAL_STEPS);
+    setCurrentStep(null);
+    setProgress(0);
+  }, []);
+
+  const cancel = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    reset();
+  }, [reset]);
+
+  return {
+    status,
+    result,
+    error,
+    steps,
+    currentStep,
+    progress,
+    convert,
+    reset,
+    cancel,
+  };
+}