github-to-mcp-monorepo 1.0.0

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

@@ -0,0 +1,477 @@
+/**
+ * SchemaForm Component - Dynamic form generation from JSON Schema
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Plus,
+  Trash2,
+  ChevronDown,
+  ChevronRight,
+  AlertCircle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import type { JsonSchema, JsonSchemaProperty } from './types';
+
+export interface SchemaFormProps {
+  /** JSON Schema defining the form structure */
+  schema: JsonSchema;
+  /** Current form values */
+  value: Record<string, unknown>;
+  /** Callback when values change */
+  onChange: (value: Record<string, unknown>) => void;
+  /** Whether the form is disabled */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+interface FieldProps {
+  name: string;
+  property: JsonSchemaProperty;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  required: boolean;
+  disabled: boolean;
+  path: string;
+}
+
+/**
+ * Render a single schema field based on its type
+ */
+function SchemaField({
+  name,
+  property,
+  value,
+  onChange,
+  required,
+  disabled,
+  path,
+}: FieldProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const fieldId = `${path}-${name}`;
+
+  // String field
+  if (property.type === 'string') {
+    // Enum select
+    if (property.enum && property.enum.length > 0) {
+      return (
+        <div className="space-y-1.5">
+          <label
+            htmlFor={fieldId}
+            className="block text-sm font-medium text-neutral-300"
+          >
+            {name}
+            {required && <span className="text-red-400 ml-1">*</span>}
+          </label>
+          {property.description && (
+            <p className="text-xs text-neutral-500">{property.description}</p>
+          )}
+          <select
+            id={fieldId}
+            value={(value as string) || (property.default as string) || ''}
+            onChange={(e) => onChange(e.target.value)}
+            disabled={disabled}
+            className={cn(
+              'w-full h-11 px-4 py-2 rounded-xl border bg-black text-white text-sm',
+              'focus:outline-none focus:ring-2 focus:ring-white/10 focus:border-neutral-600',
+              disabled && 'opacity-50 cursor-not-allowed',
+              'border-neutral-700'
+            )}
+          >
+            <option value="">Select {name}...</option>
+            {property.enum.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+        </div>
+      );
+    }
+
+    // Long text (textarea)
+    const isLongText =
+      property.format === 'textarea' ||
+      (property.maxLength && property.maxLength > 200) ||
+      name.toLowerCase().includes('body') ||
+      name.toLowerCase().includes('content') ||
+      name.toLowerCase().includes('description');
+
+    if (isLongText) {
+      return (
+        <div className="space-y-1.5">
+          <label
+            htmlFor={fieldId}
+            className="block text-sm font-medium text-neutral-300"
+          >
+            {name}
+            {required && <span className="text-red-400 ml-1">*</span>}
+          </label>
+          {property.description && (
+            <p className="text-xs text-neutral-500">{property.description}</p>
+          )}
+          <textarea
+            id={fieldId}
+            value={(value as string) || ''}
+            onChange={(e) => onChange(e.target.value)}
+            disabled={disabled}
+            placeholder={`Enter ${name}...`}
+            className={cn(
+              'w-full min-h-[100px] px-4 py-2 rounded-xl border bg-black text-white text-sm resize-y',
+              'placeholder:text-neutral-500',
+              'focus:outline-none focus:ring-2 focus:ring-white/10 focus:border-neutral-600',
+              disabled && 'opacity-50 cursor-not-allowed',
+              'border-neutral-700'
+            )}
+          />
+        </div>
+      );
+    }
+
+    // Regular string input
+    return (
+      <div className="space-y-1.5">
+        <label
+          htmlFor={fieldId}
+          className="block text-sm font-medium text-neutral-300"
+        >
+          {name}
+          {required && <span className="text-red-400 ml-1">*</span>}
+        </label>
+        {property.description && (
+          <p className="text-xs text-neutral-500">{property.description}</p>
+        )}
+        <Input
+          id={fieldId}
+          type={property.format === 'password' ? 'password' : 'text'}
+          value={(value as string) || ''}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          placeholder={`Enter ${name}...`}
+        />
+      </div>
+    );
+  }
+
+  // Number field
+  if (property.type === 'number' || property.type === 'integer') {
+    return (
+      <div className="space-y-1.5">
+        <label
+          htmlFor={fieldId}
+          className="block text-sm font-medium text-neutral-300"
+        >
+          {name}
+          {required && <span className="text-red-400 ml-1">*</span>}
+        </label>
+        {property.description && (
+          <p className="text-xs text-neutral-500">{property.description}</p>
+        )}
+        <Input
+          id={fieldId}
+          type="number"
+          value={value !== undefined ? String(value) : ''}
+          onChange={(e) => {
+            const val = e.target.value;
+            if (val === '') {
+              onChange(undefined);
+            } else {
+              onChange(
+                property.type === 'integer' ? parseInt(val, 10) : parseFloat(val)
+              );
+            }
+          }}
+          disabled={disabled}
+          placeholder={`Enter ${name}...`}
+          min={property.minimum}
+          max={property.maximum}
+          step={property.type === 'integer' ? 1 : 'any'}
+        />
+      </div>
+    );
+  }
+
+  // Boolean field
+  if (property.type === 'boolean') {
+    return (
+      <div className="flex items-start gap-3">
+        <input
+          id={fieldId}
+          type="checkbox"
+          checked={Boolean(value)}
+          onChange={(e) => onChange(e.target.checked)}
+          disabled={disabled}
+          className={cn(
+            'mt-1 w-4 h-4 rounded border-neutral-600 bg-black text-green-500',
+            'focus:ring-2 focus:ring-white/10',
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+        />
+        <div>
+          <label
+            htmlFor={fieldId}
+            className="block text-sm font-medium text-neutral-300 cursor-pointer"
+          >
+            {name}
+            {required && <span className="text-red-400 ml-1">*</span>}
+          </label>
+          {property.description && (
+            <p className="text-xs text-neutral-500">{property.description}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Array field
+  if (property.type === 'array') {
+    const arrayValue = Array.isArray(value) ? value : [];
+    const itemType = property.items?.type || 'string';
+
+    const addItem = () => {
+      const defaultValue =
+        itemType === 'string'
+          ? ''
+          : itemType === 'number' || itemType === 'integer'
+          ? 0
+          : itemType === 'boolean'
+          ? false
+          : itemType === 'object'
+          ? {}
+          : null;
+      onChange([...arrayValue, defaultValue]);
+    };
+
+    const removeItem = (index: number) => {
+      onChange(arrayValue.filter((_, i) => i !== index));
+    };
+
+    const updateItem = (index: number, itemValue: unknown) => {
+      const newArray = [...arrayValue];
+      newArray[index] = itemValue;
+      onChange(newArray);
+    };
+
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="block text-sm font-medium text-neutral-300">
+            {name}
+            {required && <span className="text-red-400 ml-1">*</span>}
+            <span className="text-neutral-500 ml-2">({arrayValue.length} items)</span>
+          </label>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={addItem}
+            disabled={disabled}
+            leftIcon={<Plus className="w-3 h-3" />}
+          >
+            Add
+          </Button>
+        </div>
+        {property.description && (
+          <p className="text-xs text-neutral-500">{property.description}</p>
+        )}
+        <div className="space-y-2 pl-4 border-l-2 border-neutral-800">
+          <AnimatePresence>
+            {arrayValue.map((item, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10 }}
+                className="flex items-start gap-2"
+              >
+                <div className="flex-1">
+                  {property.items && (
+                    <SchemaField
+                      name={`[${index}]`}
+                      property={property.items}
+                      value={item}
+                      onChange={(val) => updateItem(index, val)}
+                      required={false}
+                      disabled={disabled}
+                      path={`${path}-${name}-${index}`}
+                    />
+                  )}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => removeItem(index)}
+                  disabled={disabled}
+                  className="mt-6"
+                >
+                  <Trash2 className="w-3 h-3" />
+                </Button>
+              </motion.div>
+            ))}
+          </AnimatePresence>
+          {arrayValue.length === 0 && (
+            <p className="text-xs text-neutral-600 italic py-2">
+              No items. Click &quot;Add&quot; to add one.
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Object field
+  if (property.type === 'object') {
+    const objectValue = (value as Record<string, unknown>) || {};
+    const properties = property.properties || {};
+    const requiredFields = new Set(property.required || []);
+
+    return (
+      <div className="space-y-2">
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center gap-2 text-sm font-medium text-neutral-300 hover:text-white transition-colors"
+        >
+          {isExpanded ? (
+            <ChevronDown className="w-4 h-4" />
+          ) : (
+            <ChevronRight className="w-4 h-4" />
+          )}
+          {name}
+          {required && <span className="text-red-400 ml-1">*</span>}
+        </button>
+        {property.description && (
+          <p className="text-xs text-neutral-500 ml-6">{property.description}</p>
+        )}
+        <AnimatePresence>
+          {isExpanded && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className="space-y-3 pl-4 border-l-2 border-neutral-800"
+            >
+              {Object.entries(properties).map(([propName, propSchema]) => (
+                <SchemaField
+                  key={propName}
+                  name={propName}
+                  property={propSchema}
+                  value={objectValue[propName]}
+                  onChange={(val) => {
+                    if (val === undefined) {
+                      const { [propName]: _, ...rest } = objectValue;
+                      onChange(rest);
+                    } else {
+                      onChange({ ...objectValue, [propName]: val });
+                    }
+                  }}
+                  required={requiredFields.has(propName)}
+                  disabled={disabled}
+                  path={`${path}-${name}`}
+                />
+              ))}
+              {Object.keys(properties).length === 0 && (
+                <p className="text-xs text-neutral-600 italic py-2">
+                  No properties defined for this object.
+                </p>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  }
+
+  // Unknown type
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-sm font-medium text-neutral-300">
+        {name}
+        {required && <span className="text-red-400 ml-1">*</span>}
+      </label>
+      {property.description && (
+        <p className="text-xs text-neutral-500">{property.description}</p>
+      )}
+      <div className="flex items-center gap-2 text-xs text-yellow-400">
+        <AlertCircle className="w-3 h-3" />
+        Unknown type: {property.type}
+      </div>
+      <Input
+        value={typeof value === 'string' ? value : JSON.stringify(value || '')}
+        onChange={(e) => {
+          try {
+            onChange(JSON.parse(e.target.value));
+          } catch {
+            onChange(e.target.value);
+          }
+        }}
+        disabled={disabled}
+        placeholder={`Enter ${name}...`}
+      />
+    </div>
+  );
+}
+
+/**
+ * SchemaForm - Dynamic form generation from JSON Schema
+ */
+export default function SchemaForm({
+  schema,
+  value,
+  onChange,
+  disabled = false,
+  className = '',
+}: SchemaFormProps) {
+  const properties = schema.properties || {};
+  const requiredFields = useMemo(
+    () => new Set(schema.required || []),
+    [schema.required]
+  );
+
+  // Handle field change
+  const handleFieldChange = useCallback(
+    (fieldName: string, fieldValue: unknown) => {
+      if (fieldValue === undefined) {
+        const { [fieldName]: _, ...rest } = value;
+        onChange(rest);
+      } else {
+        onChange({ ...value, [fieldName]: fieldValue });
+      }
+    },
+    [value, onChange]
+  );
+
+  // Check if there are any fields
+  if (Object.keys(properties).length === 0) {
+    return (
+      <div className={cn('text-sm text-neutral-500 italic py-4', className)}>
+        This tool has no input parameters.
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {Object.entries(properties).map(([name, property]) => (
+        <SchemaField
+          key={name}
+          name={name}
+          property={property}
+          value={value[name]}
+          onChange={(val) => handleFieldChange(name, val)}
+          required={requiredFields.has(name)}
+          disabled={disabled}
+          path="root"
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,151 @@
+/**
+ * ServerStatus Component - Shows MCP server connection status
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { motion } from 'framer-motion';
+import {
+  Wifi,
+  WifiOff,
+  Loader2,
+  RefreshCw,
+  Power,
+  AlertTriangle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export interface ServerStatusProps {
+  isConnected: boolean;
+  isConnecting: boolean;
+  sessionId: string | null;
+  error: string | null;
+  isDemoMode?: boolean;
+  onConnect?: () => void;
+  onDisconnect?: () => void;
+  className?: string;
+}
+
+export default function ServerStatus({
+  isConnected,
+  isConnecting,
+  sessionId,
+  error,
+  isDemoMode = false,
+  onConnect,
+  onDisconnect,
+  className = '',
+}: ServerStatusProps) {
+  // Demo mode display
+  if (isDemoMode) {
+    return (
+      <div className={`flex items-center gap-3 p-3 rounded-lg border border-yellow-500/30 bg-yellow-500/10 ${className}`}>
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <WifiOff className="w-4 h-4 text-yellow-400" />
+          </div>
+          <span className="text-sm font-medium text-yellow-300">Demo Mode</span>
+        </div>
+        <span className="text-xs text-yellow-400/70">Not connected to real server</span>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error && !isConnecting) {
+    return (
+      <div className={`flex items-center justify-between gap-3 p-3 rounded-lg border border-red-500/30 bg-red-500/10 ${className}`}>
+        <div className="flex items-center gap-2 min-w-0">
+          <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
+          <span className="text-sm font-medium text-red-300 truncate">{error}</span>
+        </div>
+        {onConnect && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onConnect}
+            leftIcon={<RefreshCw className="w-3 h-3" />}
+            className="flex-shrink-0 text-red-300 hover:text-red-200"
+          >
+            Retry
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  // Connecting state
+  if (isConnecting) {
+    return (
+      <div className={`flex items-center gap-3 p-3 rounded-lg border border-blue-500/30 bg-blue-500/10 ${className}`}>
+        <div className="flex items-center gap-2">
+          <Loader2 className="w-4 h-4 text-blue-400 animate-spin" />
+          <span className="text-sm font-medium text-blue-300">Connecting to MCP server...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Connected state
+  if (isConnected) {
+    return (
+      <div className={`flex items-center justify-between gap-3 p-3 rounded-lg border border-green-500/30 bg-green-500/10 ${className}`}>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              className="relative"
+            >
+              <Wifi className="w-4 h-4 text-green-400" />
+              <motion.div
+                className="absolute inset-0 rounded-full bg-green-400/30"
+                animate={{ scale: [1, 1.5, 1], opacity: [1, 0, 1] }}
+                transition={{ duration: 2, repeat: Infinity }}
+              />
+            </motion.div>
+            <span className="text-sm font-medium text-green-300">Connected</span>
+          </div>
+          {sessionId && (
+            <span className="text-xs text-green-400/70 font-mono hidden sm:inline">
+              Session: {sessionId.slice(0, 8)}...
+            </span>
+          )}
+        </div>
+        {onDisconnect && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onDisconnect}
+            leftIcon={<Power className="w-3 h-3" />}
+            className="flex-shrink-0 text-green-300 hover:text-red-300"
+          >
+            Disconnect
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  // Disconnected state
+  return (
+    <div className={`flex items-center justify-between gap-3 p-3 rounded-lg border border-neutral-700 bg-neutral-800/50 ${className}`}>
+      <div className="flex items-center gap-2">
+        <WifiOff className="w-4 h-4 text-neutral-500" />
+        <span className="text-sm font-medium text-neutral-400">Not connected</span>
+      </div>
+      {onConnect && (
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={onConnect}
+          leftIcon={<Wifi className="w-3 h-3" />}
+        >
+          Connect
+        </Button>
+      )}
+    </div>
+  );
+}