github-to-mcp-monorepo 1.0.0

package/apps/web/components/playground/EmptyStates.tsx

@@ -0,0 +1,305 @@
+/**
+ * EmptyStates Component - Empty state displays for playground
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import {
+  Plug,
+  Wrench,
+  FileText,
+  MessageSquare,
+  Rocket,
+  ArrowRight,
+  Sparkles,
+  Terminal,
+  Globe,
+  Zap,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export type EmptyStateType =
+  | 'not-connected'
+  | 'no-tools'
+  | 'no-resources'
+  | 'no-prompts'
+  | 'first-time';
+
+export interface EmptyStatesProps {
+  /** Type of empty state to display */
+  type: EmptyStateType;
+  /** Callback when primary action is clicked */
+  onAction?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+interface EmptyStateConfig {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  action?: string;
+  secondaryText?: string;
+}
+
+const EMPTY_STATE_CONFIG: Record<EmptyStateType, EmptyStateConfig> = {
+  'not-connected': {
+    icon: <Plug className="w-12 h-12" />,
+    title: 'Not Connected',
+    description:
+      'Configure your transport settings and connect to an MCP server to start testing.',
+    action: 'Connect',
+  },
+  'no-tools': {
+    icon: <Wrench className="w-12 h-12" />,
+    title: 'No Tools Available',
+    description:
+      'This MCP server doesn\'t expose any tools, or tools capability is not enabled.',
+    secondaryText: 'Check the server configuration or try a different server.',
+  },
+  'no-resources': {
+    icon: <FileText className="w-12 h-12" />,
+    title: 'No Resources Available',
+    description:
+      'This MCP server doesn\'t expose any resources, or resources capability is not enabled.',
+    secondaryText: 'Check the server configuration or try a different server.',
+  },
+  'no-prompts': {
+    icon: <MessageSquare className="w-12 h-12" />,
+    title: 'No Prompts Available',
+    description:
+      'This MCP server doesn\'t expose any prompts, or prompts capability is not enabled.',
+    secondaryText: 'Check the server configuration or try a different server.',
+  },
+  'first-time': {
+    icon: <Rocket className="w-12 h-12" />,
+    title: 'Welcome to MCP Playground',
+    description:
+      'Test and debug MCP servers interactively. Connect to a server using stdio, SSE, or streamable HTTP transport.',
+    action: 'Get Started',
+  },
+};
+
+/**
+ * EmptyStates - Display contextual empty states
+ */
+export default function EmptyStates({
+  type,
+  onAction,
+  className = '',
+}: EmptyStatesProps) {
+  const config = EMPTY_STATE_CONFIG[type];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={cn(
+        'flex flex-col items-center justify-center text-center p-8',
+        className
+      )}
+    >
+      <div className="text-neutral-600 mb-4">{config.icon}</div>
+      <h3 className="text-lg font-semibold text-white mb-2">{config.title}</h3>
+      <p className="text-sm text-neutral-400 max-w-md mb-4">
+        {config.description}
+      </p>
+      {config.secondaryText && (
+        <p className="text-xs text-neutral-500 max-w-md mb-4">
+          {config.secondaryText}
+        </p>
+      )}
+      {config.action && onAction && (
+        <Button
+          onClick={onAction}
+          rightIcon={<ArrowRight className="w-4 h-4" />}
+        >
+          {config.action}
+        </Button>
+      )}
+    </motion.div>
+  );
+}
+
+/**
+ * First-time user guide component with more details
+ */
+export function FirstTimeGuide({
+  onGetStarted,
+  className = '',
+}: {
+  onGetStarted?: () => void;
+  className?: string;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={cn('p-8', className)}
+    >
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-500/10 border border-green-500/30 text-green-400 text-sm mb-4">
+            <Sparkles className="w-4 h-4" />
+            MCP Playground
+          </div>
+          <h1 className="text-2xl font-bold text-white mb-2">
+            Test MCP Servers Interactively
+          </h1>
+          <p className="text-neutral-400">
+            Connect to any MCP server and explore its tools, resources, and
+            prompts.
+          </p>
+        </div>
+
+        {/* Transport options */}
+        <div className="grid gap-4 md:grid-cols-3 mb-8">
+          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-900/50">
+            <Terminal className="w-8 h-8 text-blue-400 mb-3" />
+            <h3 className="font-medium text-white mb-1">STDIO</h3>
+            <p className="text-xs text-neutral-400">
+              Run a local MCP server command and communicate via standard I/O.
+            </p>
+          </div>
+          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-900/50">
+            <Globe className="w-8 h-8 text-green-400 mb-3" />
+            <h3 className="font-medium text-white mb-1">SSE</h3>
+            <p className="text-xs text-neutral-400">
+              Connect to a remote MCP server using Server-Sent Events.
+            </p>
+          </div>
+          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-900/50">
+            <Zap className="w-8 h-8 text-purple-400 mb-3" />
+            <h3 className="font-medium text-white mb-1">Streamable HTTP</h3>
+            <p className="text-xs text-neutral-400">
+              Connect to a remote MCP server using streamable HTTP transport.
+            </p>
+          </div>
+        </div>
+
+        {/* Quick start steps */}
+        <div className="p-6 rounded-xl border border-neutral-800 bg-neutral-900/50 mb-8">
+          <h3 className="font-medium text-white mb-4">Quick Start</h3>
+          <ol className="space-y-3 text-sm">
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-white/10 text-white text-xs flex items-center justify-center">
+                1
+              </span>
+              <div>
+                <p className="text-neutral-300">Choose a transport type</p>
+                <p className="text-neutral-500 text-xs">
+                  Select STDIO for local servers or SSE/HTTP for remote ones.
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-white/10 text-white text-xs flex items-center justify-center">
+                2
+              </span>
+              <div>
+                <p className="text-neutral-300">Configure connection settings</p>
+                <p className="text-neutral-500 text-xs">
+                  Enter the command, URL, or paste generated server code.
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-white/10 text-white text-xs flex items-center justify-center">
+                3
+              </span>
+              <div>
+                <p className="text-neutral-300">Connect and explore</p>
+                <p className="text-neutral-500 text-xs">
+                  Browse tools, resources, and prompts exposed by the server.
+                </p>
+              </div>
+            </li>
+          </ol>
+        </div>
+
+        {/* CTA */}
+        {onGetStarted && (
+          <div className="text-center">
+            <Button
+              size="lg"
+              onClick={onGetStarted}
+              rightIcon={<ArrowRight className="w-4 h-4" />}
+            >
+              Get Started
+            </Button>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+/**
+ * Connecting state display
+ */
+export function ConnectingState({ className = '' }: { className?: string }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className={cn(
+        'flex flex-col items-center justify-center text-center p-8',
+        className
+      )}
+    >
+      <div className="relative mb-4">
+        <Plug className="w-12 h-12 text-neutral-600" />
+        <motion.div
+          className="absolute inset-0 border-2 border-yellow-400 rounded-full"
+          animate={{ scale: [1, 1.5, 1], opacity: [0.5, 0, 0.5] }}
+          transition={{ duration: 1.5, repeat: Infinity }}
+        />
+      </div>
+      <h3 className="text-lg font-semibold text-white mb-2">Connecting...</h3>
+      <p className="text-sm text-neutral-400 max-w-md">
+        Establishing connection to the MCP server. This may take a few seconds.
+      </p>
+    </motion.div>
+  );
+}
+
+/**
+ * Error state display
+ */
+export function ErrorState({
+  error,
+  onRetry,
+  className = '',
+}: {
+  error: string;
+  onRetry?: () => void;
+  className?: string;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={cn(
+        'flex flex-col items-center justify-center text-center p-8',
+        className
+      )}
+    >
+      <div className="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center mb-4">
+        <Plug className="w-6 h-6 text-red-400" />
+      </div>
+      <h3 className="text-lg font-semibold text-white mb-2">Connection Failed</h3>
+      <p className="text-sm text-red-300 max-w-md mb-4">{error}</p>
+      {onRetry && (
+        <Button variant="secondary" onClick={onRetry}>
+          Try Again
+        </Button>
+      )}
+    </motion.div>
+  );
+}

package/apps/web/components/playground/ExecutionLog.tsx

@@ -0,0 +1,260 @@
+/**
+ * ExecutionLog Component - Real-time output display for MCP server
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Terminal,
+  ChevronDown,
+  ChevronUp,
+  Trash2,
+  Download,
+  Copy,
+  Check,
+  ArrowRight,
+  AlertTriangle,
+  Info,
+  XCircle,
+  CheckCircle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { ExecutionLog as ExecutionLogType } from '@/hooks/use-mcp-execution';
+import { copyToClipboard } from '@/lib/utils';
+
+export interface ExecutionLogProps {
+  logs: ExecutionLogType[];
+  onClear?: () => void;
+  defaultExpanded?: boolean;
+  maxHeight?: number;
+  className?: string;
+}
+
+const LOG_TYPE_STYLES: Record<ExecutionLogType['type'], string> = {
+  stdout: 'text-neutral-300',
+  stderr: 'text-orange-400',
+  info: 'text-blue-400',
+  error: 'text-red-400',
+  success: 'text-green-400',
+};
+
+const LOG_TYPE_ICONS: Record<ExecutionLogType['type'], React.ReactNode> = {
+  stdout: <ArrowRight className="w-3 h-3" />,
+  stderr: <AlertTriangle className="w-3 h-3" />,
+  info: <Info className="w-3 h-3" />,
+  error: <XCircle className="w-3 h-3" />,
+  success: <CheckCircle className="w-3 h-3" />,
+};
+
+function formatTimestamp(date: Date): string {
+  return date.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    fractionalSecondDigits: 3,
+  });
+}
+
+export default function ExecutionLog({
+  logs,
+  onClear,
+  defaultExpanded = false,
+  maxHeight = 300,
+  className = '',
+}: ExecutionLogProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [copied, setCopied] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new logs arrive
+  useEffect(() => {
+    if (autoScroll && scrollRef.current && isExpanded) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs, autoScroll, isExpanded]);
+
+  // Expand when first log arrives
+  useEffect(() => {
+    if (logs.length === 1 && !isExpanded) {
+      setIsExpanded(true);
+    }
+  }, [logs.length, isExpanded]);
+
+  const handleCopyLogs = useCallback(async () => {
+    const logText = logs
+      .map(log => `[${formatTimestamp(log.timestamp)}] [${log.type.toUpperCase()}] ${log.message}`)
+      .join('\n');
+    
+    const success = await copyToClipboard(logText);
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [logs]);
+
+  const handleDownloadLogs = useCallback(() => {
+    const logText = logs
+      .map(log => `[${formatTimestamp(log.timestamp)}] [${log.type.toUpperCase()}] ${log.toolName ? `[${log.toolName}] ` : ''}${log.message}`)
+      .join('\n');
+
+    const blob = new Blob([logText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `mcp-execution-log-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [logs]);
+
+  const handleScroll = useCallback(() => {
+    if (scrollRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+      // If user scrolls up more than 50px from bottom, disable auto-scroll
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+      setAutoScroll(isAtBottom);
+    }
+  }, []);
+
+  const recentLogs = logs.slice(-100); // Limit display to last 100 logs
+  const hasLogs = logs.length > 0;
+
+  return (
+    <div className={`rounded-xl border border-neutral-800 bg-neutral-900/50 overflow-hidden ${className}`}>
+      {/* Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full px-4 py-3 flex items-center justify-between hover:bg-white/5 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <Terminal className="w-4 h-4 text-neutral-400" />
+          <span className="text-sm font-medium text-white">Execution Log</span>
+          {hasLogs && (
+            <span className="px-1.5 py-0.5 text-xs rounded bg-neutral-700 text-neutral-300">
+              {logs.length}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {hasLogs && isExpanded && (
+            <>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleCopyLogs();
+                }}
+                title="Copy logs"
+              >
+                {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleDownloadLogs();
+                }}
+                title="Download logs"
+              >
+                <Download className="w-3 h-3" />
+              </Button>
+              {onClear && (
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onClear();
+                  }}
+                  title="Clear logs"
+                >
+                  <Trash2 className="w-3 h-3" />
+                </Button>
+              )}
+            </>
+          )}
+          {isExpanded ? (
+            <ChevronUp className="w-4 h-4 text-neutral-400" />
+          ) : (
+            <ChevronDown className="w-4 h-4 text-neutral-400" />
+          )}
+        </div>
+      </button>
+
+      {/* Log content */}
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: 0 }}
+            className="overflow-hidden"
+          >
+            <div
+              ref={scrollRef}
+              onScroll={handleScroll}
+              className="border-t border-neutral-800 bg-black/50 font-mono text-xs overflow-y-auto"
+              style={{ maxHeight }}
+            >
+              {!hasLogs ? (
+                <div className="p-4 text-center text-neutral-500">
+                  No logs yet. Connect to a server and execute a tool to see output.
+                </div>
+              ) : (
+                <div className="p-2 space-y-0.5">
+                  {recentLogs.map((log) => (
+                    <motion.div
+                      key={log.id}
+                      initial={{ opacity: 0, x: -10 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      className="flex items-start gap-2 py-0.5 hover:bg-white/5 rounded px-1"
+                    >
+                      <span className="text-neutral-600 flex-shrink-0 select-none">
+                        {formatTimestamp(log.timestamp)}
+                      </span>
+                      <span className={`flex-shrink-0 ${LOG_TYPE_STYLES[log.type]}`}>
+                        {LOG_TYPE_ICONS[log.type]}
+                      </span>
+                      {log.toolName && (
+                        <span className="text-purple-400 flex-shrink-0">
+                          [{log.toolName}]
+                        </span>
+                      )}
+                      <span className={LOG_TYPE_STYLES[log.type]}>
+                        {log.message}
+                      </span>
+                    </motion.div>
+                  ))}
+                </div>
+              )}
+            </div>
+            
+            {/* Auto-scroll indicator */}
+            {hasLogs && !autoScroll && (
+              <button
+                onClick={() => {
+                  setAutoScroll(true);
+                  if (scrollRef.current) {
+                    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+                  }
+                }}
+                className="w-full py-1 text-xs text-center text-blue-400 hover:text-blue-300 bg-blue-500/10 transition-colors flex items-center justify-center gap-1"
+              >
+                <ChevronDown className="w-3 h-3" /> Scroll to bottom (auto-scroll paused)
+              </button>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}