github-to-mcp-monorepo 1.0.0

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

@@ -0,0 +1,133 @@
+/**
+ * Conversion Hook - Handles all conversion logic
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { 
+  ConversionResult, 
+  ConversionStatus, 
+  ConversionOptions,
+  ApiError,
+  ConversionHistory 
+} from '@/types';
+import { useLocalStorage } from './use-local-storage';
+import { generateId, parseGitHubUrl } from '@/lib/utils';
+import { MAX_HISTORY_ITEMS } from '@/lib/constants';
+
+interface UseConversionReturn {
+  status: ConversionStatus;
+  result: ConversionResult | null;
+  error: ApiError | null;
+  convert: (url: string, options?: ConversionOptions) => Promise<void>;
+  reset: () => void;
+  history: ConversionHistory[];
+  clearHistory: () => void;
+  removeFromHistory: (id: string) => void;
+}
+
+export function useConversion(): UseConversionReturn {
+  const [status, setStatus] = useState<ConversionStatus>('idle');
+  const [result, setResult] = useState<ConversionResult | null>(null);
+  const [error, setError] = useState<ApiError | null>(null);
+  const [history, setHistory] = useLocalStorage<ConversionHistory[]>('conversion-history', []);
+
+  const convert = useCallback(async (url: string, options?: ConversionOptions) => {
+    setStatus('loading');
+    setError(null);
+    setResult(null);
+
+    const startTime = performance.now();
+
+    try {
+      const response = await fetch('/api/convert', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ url, options }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        const apiError: ApiError = {
+          error: data.error || 'Conversion failed',
+          code: data.code || 'UNKNOWN_ERROR',
+          details: data.details,
+          retryAfter: response.status === 429 ? parseInt(response.headers.get('Retry-After') || '60') : undefined,
+        };
+        setError(apiError);
+        setStatus('error');
+        return;
+      }
+
+      // Enrich result with timing
+      const endTime = performance.now();
+      const enrichedResult: ConversionResult = {
+        ...data,
+        stats: {
+          ...data.stats,
+          processingTimeMs: Math.round(endTime - startTime),
+        },
+        generatedAt: new Date().toISOString(),
+      };
+
+      setResult(enrichedResult);
+      setStatus('success');
+
+      // Add to history
+      const parsed = parseGitHubUrl(url);
+      const historyEntry: ConversionHistory = {
+        id: generateId(),
+        url,
+        name: enrichedResult.name,
+        toolCount: enrichedResult.tools.length,
+        classification: enrichedResult.classification.type,
+        convertedAt: new Date().toISOString(),
+      };
+
+      setHistory(prev => {
+        const filtered = prev.filter(h => h.url !== url);
+        return [historyEntry, ...filtered].slice(0, MAX_HISTORY_ITEMS);
+      });
+
+    } catch (err) {
+      const apiError: ApiError = {
+        error: err instanceof Error ? err.message : 'Network error',
+        code: 'NETWORK_ERROR',
+        details: 'Failed to connect to the server. Please check your internet connection.',
+      };
+      setError(apiError);
+      setStatus('error');
+    }
+  }, [setHistory]);
+
+  const reset = useCallback(() => {
+    setStatus('idle');
+    setResult(null);
+    setError(null);
+  }, []);
+
+  const clearHistory = useCallback(() => {
+    setHistory([]);
+  }, [setHistory]);
+
+  const removeFromHistory = useCallback((id: string) => {
+    setHistory(prev => prev.filter(h => h.id !== id));
+  }, [setHistory]);
+
+  return {
+    status,
+    result,
+    error,
+    convert,
+    reset,
+    history,
+    clearHistory,
+    removeFromHistory,
+  };
+}

package/apps/web/hooks/use-execution-history.ts

@@ -0,0 +1,376 @@
+/**
+ * useExecutionHistory Hook
+ * Tracks execution history across tools, resources, and prompts
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type {
+  ExecutionHistoryEntry,
+  ExecutionType,
+  UseExecutionHistoryReturn,
+  ToolExecution,
+  ResourceRead,
+  PromptExecution,
+  UseExecutionHistoryOptions as TypedOptions,
+} from './types';
+import { generateId } from './types';
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const LOCAL_STORAGE_KEY = 'mcp-playground-execution-history';
+const MAX_HISTORY_SIZE = 1000;
+
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+
+export interface UseExecutionHistoryOptions {
+  /** Maximum number of history entries to keep */
+  maxSize?: number;
+  /** Alias for maxSize */
+  maxItems?: number;
+  /** Whether to persist history to localStorage */
+  persist?: boolean;
+  /** Alias for persist */
+  persistToStorage?: boolean;
+  /** Custom storage key */
+  storageKey?: string;
+}
+
+export function useExecutionHistory(
+  options: UseExecutionHistoryOptions = {}
+): UseExecutionHistoryReturn {
+  const {
+    maxSize = MAX_HISTORY_SIZE,
+    maxItems,
+    persist = false,
+    persistToStorage,
+    storageKey = LOCAL_STORAGE_KEY,
+  } = options;
+
+  // Support both naming conventions
+  const effectiveMaxSize = maxItems ?? maxSize;
+  const effectivePersist = persistToStorage ?? persist;
+
+  // State
+  const [history, setHistory] = useState<ExecutionHistoryEntry[]>([]);
+
+  // Refs
+  const mountedRef = useRef(true);
+  const initializedRef = useRef(false);
+
+  // Load from localStorage on mount
+  useEffect(() => {
+    mountedRef.current = true;
+
+    if (effectivePersist && !initializedRef.current && typeof window !== 'undefined') {
+      initializedRef.current = true;
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored) {
+          const parsed = JSON.parse(stored) as ExecutionHistoryEntry[];
+          // Convert date strings back to Date objects
+          const entries = parsed.map(entry => ({
+            ...entry,
+            timestamp: new Date(entry.timestamp),
+          }));
+          setHistory(entries);
+        }
+      } catch (err) {
+        console.warn('[useExecutionHistory] Failed to load history from localStorage:', err);
+      }
+    }
+
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [effectivePersist, storageKey]);
+
+  // Save to localStorage when history changes
+  useEffect(() => {
+    if (effectivePersist && initializedRef.current && typeof window !== 'undefined') {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(history));
+      } catch (err) {
+        console.warn('[useExecutionHistory] Failed to save history to localStorage:', err);
+      }
+    }
+  }, [history, effectivePersist, storageKey]);
+
+  /**
+   * Add a new entry to the history
+   */
+  const add = useCallback(
+    (entry: Omit<ExecutionHistoryEntry, 'id' | 'timestamp'>): void => {
+      const newEntry: ExecutionHistoryEntry = {
+        ...entry,
+        id: generateId(),
+        timestamp: new Date(),
+      };
+
+      if (mountedRef.current) {
+        setHistory(prev => {
+          const updated = [newEntry, ...prev];
+          // Trim to max size
+          if (updated.length > effectiveMaxSize) {
+            return updated.slice(0, effectiveMaxSize);
+          }
+          return updated;
+        });
+      }
+    },
+    [effectiveMaxSize]
+  );
+
+  /**
+   * Add a tool execution to history
+   */
+  const addExecution = useCallback(
+    (execution: ToolExecution): void => {
+      add({
+        type: 'tool',
+        name: execution.toolName,
+        params: execution.params,
+        result: execution.result,
+        error: execution.error,
+        success: execution.status === 'success',
+        executionTime: execution.executionTime,
+      });
+    },
+    [add]
+  );
+
+  /**
+   * Add a resource read to history
+   */
+  const addResourceRead = useCallback(
+    (read: ResourceRead): void => {
+      add({
+        type: 'resource',
+        name: read.uri,
+        result: read.contents,
+        error: read.error,
+        success: read.status === 'success',
+      });
+    },
+    [add]
+  );
+
+  /**
+   * Add a prompt execution to history
+   */
+  const addPromptExecution = useCallback(
+    (execution: PromptExecution): void => {
+      add({
+        type: 'prompt',
+        name: execution.name || execution.promptName || 'unknown',
+        params: execution.args || execution.arguments,
+        result: execution.messages,
+        error: execution.error,
+        success: execution.status === 'success',
+      });
+    },
+    [add]
+  );
+
+  /**
+   * Clear all history
+   */
+  const clear = useCallback((): void => {
+    if (mountedRef.current) {
+      setHistory([]);
+    }
+
+    if (effectivePersist && typeof window !== 'undefined') {
+      try {
+        localStorage.removeItem(storageKey);
+      } catch (err) {
+        console.warn('[useExecutionHistory] Failed to clear localStorage:', err);
+      }
+    }
+  }, [effectivePersist, storageKey]);
+
+  /** Alias for clear */
+  const clearHistory = clear;
+
+  /**
+   * Get entries by type
+   */
+  const getByType = useCallback(
+    (type: ExecutionType): ExecutionHistoryEntry[] => {
+      return history.filter(entry => entry.type === type);
+    },
+    [history]
+  );
+
+  /**
+   * Get entries by success status
+   */
+  const getByStatus = useCallback(
+    (success: boolean): ExecutionHistoryEntry[] => {
+      return history.filter(entry => entry.success === success);
+    },
+    [history]
+  );
+
+  /**
+   * Export history as JSON string
+   */
+  const exportHistory = useCallback((): string => {
+    return JSON.stringify(history, null, 2);
+  }, [history]);
+
+  /**
+   * Import history from JSON string
+   */
+  const importHistory = useCallback((json: string): void => {
+    try {
+      const parsed = JSON.parse(json) as ExecutionHistoryEntry[];
+      
+      // Validate structure
+      if (!Array.isArray(parsed)) {
+        throw new Error('Invalid history format: expected an array');
+      }
+
+      // Convert and validate entries
+      const entries = parsed.map((entry, index) => {
+        if (!entry.type || !entry.name || typeof entry.success !== 'boolean') {
+          throw new Error(`Invalid entry at index ${index}`);
+        }
+        return {
+          ...entry,
+          id: entry.id || generateId(),
+          timestamp: new Date(entry.timestamp || Date.now()),
+        };
+      });
+
+      if (mountedRef.current) {
+        setHistory(entries.slice(0, maxSize));
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to import history';
+      console.error('[useExecutionHistory] Import failed:', message);
+      throw new Error(`Failed to import history: ${message}`);
+    }
+  }, [maxSize]);
+
+  return {
+    history,
+    add,
+    addExecution,
+    addResourceRead,
+    addPromptExecution,
+    clear,
+    clearHistory,
+    getByType,
+    getByStatus,
+    export: exportHistory,
+    exportHistory,
+    import: importHistory,
+    importHistory,
+  };
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Filter history by type
+ */
+export function filterHistoryByType(
+  history: ExecutionHistoryEntry[],
+  type: ExecutionType
+): ExecutionHistoryEntry[] {
+  return history.filter(entry => entry.type === type);
+}
+
+/**
+ * Filter history by success/failure
+ */
+export function filterHistoryBySuccess(
+  history: ExecutionHistoryEntry[],
+  success: boolean
+): ExecutionHistoryEntry[] {
+  return history.filter(entry => entry.success === success);
+}
+
+/**
+ * Filter history by date range
+ */
+export function filterHistoryByDateRange(
+  history: ExecutionHistoryEntry[],
+  start: Date,
+  end: Date
+): ExecutionHistoryEntry[] {
+  return history.filter(
+    entry => entry.timestamp >= start && entry.timestamp <= end
+  );
+}
+
+/**
+ * Get history statistics
+ */
+export interface HistoryStats {
+  total: number;
+  tools: number;
+  resources: number;
+  prompts: number;
+  successes: number;
+  failures: number;
+  averageExecutionTime: number | null;
+}
+
+export function getHistoryStats(history: ExecutionHistoryEntry[]): HistoryStats {
+  const stats: HistoryStats = {
+    total: history.length,
+    tools: 0,
+    resources: 0,
+    prompts: 0,
+    successes: 0,
+    failures: 0,
+    averageExecutionTime: null,
+  };
+
+  let totalExecutionTime = 0;
+  let executionTimeCount = 0;
+
+  for (const entry of history) {
+    switch (entry.type) {
+      case 'tool':
+        stats.tools++;
+        break;
+      case 'resource':
+        stats.resources++;
+        break;
+      case 'prompt':
+        stats.prompts++;
+        break;
+    }
+
+    if (entry.success) {
+      stats.successes++;
+    } else {
+      stats.failures++;
+    }
+
+    if (entry.executionTime !== undefined) {
+      totalExecutionTime += entry.executionTime;
+      executionTimeCount++;
+    }
+  }
+
+  if (executionTimeCount > 0) {
+    stats.averageExecutionTime = totalExecutionTime / executionTimeCount;
+  }
+
+  return stats;
+}
+
+export default useExecutionHistory;

package/apps/web/hooks/use-generation-progress.ts

@@ -0,0 +1,147 @@
+/**
+ * useGenerationProgress Hook - Manages generation step state and progress
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useCallback, useMemo } from 'react';
+import type { GenerationStep, GenerationStepId, GenerationStepStatus } from '@/components/GenerationProgress';
+
+const INITIAL_STEPS: GenerationStep[] = [
+  {
+    id: 'fetching',
+    label: 'Fetching Repository',
+    description: 'Downloading repository metadata and files',
+    status: 'pending',
+  },
+  {
+    id: 'classifying',
+    label: 'Classifying Repo',
+    description: 'Detecting repository type and structure',
+    status: 'pending',
+  },
+  {
+    id: 'extracting',
+    label: 'Extracting Tools',
+    description: 'Analyzing code and documentation',
+    status: 'pending',
+  },
+  {
+    id: 'generating',
+    label: 'Generating Server',
+    description: 'Creating MCP server code and configs',
+    status: 'pending',
+  },
+];
+
+export interface UseGenerationProgressReturn {
+  steps: GenerationStep[];
+  currentStep: GenerationStepId | null;
+  totalToolsFound: number;
+  statusMessage: string;
+  progress: number;
+  isComplete: boolean;
+  hasError: boolean;
+  startStep: (stepId: GenerationStepId, detail?: string) => void;
+  completeStep: (stepId: GenerationStepId, toolsFound?: number) => void;
+  errorStep: (stepId: GenerationStepId, errorDetail?: string) => void;
+  setStatusMessage: (message: string) => void;
+  addToolsFound: (count: number) => void;
+  reset: () => void;
+}
+
+export function useGenerationProgress(): UseGenerationProgressReturn {
+  const [steps, setSteps] = useState<GenerationStep[]>(INITIAL_STEPS);
+  const [currentStep, setCurrentStep] = useState<GenerationStepId | null>(null);
+  const [totalToolsFound, setTotalToolsFound] = useState(0);
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const updateStepStatus = useCallback((stepId: GenerationStepId, status: GenerationStepStatus, updates: Partial<GenerationStep> = {}) => {
+    setSteps(prev => prev.map(step => 
+      step.id === stepId ? { ...step, status, ...updates } : step
+    ));
+  }, []);
+
+  const startStep = useCallback((stepId: GenerationStepId, detail?: string) => {
+    // Mark previous steps as complete if not already
+    setSteps(prev => prev.map(step => {
+      const stepIndex = prev.findIndex(s => s.id === stepId);
+      const currentIndex = prev.findIndex(s => s.id === step.id);
+      
+      if (currentIndex < stepIndex && step.status !== 'complete' && step.status !== 'error') {
+        return { ...step, status: 'complete' as const };
+      }
+      if (step.id === stepId) {
+        return { ...step, status: 'in-progress' as const, detail };
+      }
+      return step;
+    }));
+    setCurrentStep(stepId);
+  }, []);
+
+  const completeStep = useCallback((stepId: GenerationStepId, toolsFound?: number) => {
+    updateStepStatus(stepId, 'complete', { toolsFound });
+    if (toolsFound) {
+      setTotalToolsFound(prev => prev + toolsFound);
+    }
+  }, [updateStepStatus]);
+
+  const errorStep = useCallback((stepId: GenerationStepId, errorDetail?: string) => {
+    updateStepStatus(stepId, 'error', { detail: errorDetail });
+  }, [updateStepStatus]);
+
+  const addToolsFound = useCallback((count: number) => {
+    setTotalToolsFound(prev => prev + count);
+    // Also update the current step's tools found
+    if (currentStep) {
+      setSteps(prev => prev.map(step =>
+        step.id === currentStep
+          ? { ...step, toolsFound: (step.toolsFound || 0) + count }
+          : step
+      ));
+    }
+  }, [currentStep]);
+
+  const reset = useCallback(() => {
+    setSteps(INITIAL_STEPS);
+    setCurrentStep(null);
+    setTotalToolsFound(0);
+    setStatusMessage('');
+  }, []);
+
+  const progress = useMemo(() => {
+    const weights = { pending: 0, 'in-progress': 0.5, complete: 1, error: 0 };
+    const totalProgress = steps.reduce((acc, step) => acc + weights[step.status], 0);
+    return Math.round((totalProgress / steps.length) * 100);
+  }, [steps]);
+
+  const isComplete = useMemo(() => 
+    steps.every(step => step.status === 'complete'),
+    [steps]
+  );
+
+  const hasError = useMemo(() =>
+    steps.some(step => step.status === 'error'),
+    [steps]
+  );
+
+  return {
+    steps,
+    currentStep,
+    totalToolsFound,
+    statusMessage,
+    progress,
+    isComplete,
+    hasError,
+    startStep,
+    completeStep,
+    errorStep,
+    setStatusMessage,
+    addToolsFound,
+    reset,
+  };
+}
+
+export default useGenerationProgress;