github-to-mcp-monorepo 1.0.0

package/apps/web/components/ui/button.tsx

@@ -0,0 +1,88 @@
+/**
+ * Button Component
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Loader2 } from 'lucide-react';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-black disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-white text-black hover:bg-neutral-200',
+        destructive:
+          'bg-red-500/20 text-red-300 border border-red-500/30 hover:bg-red-500/30',
+        outline:
+          'border border-neutral-700 bg-transparent text-white hover:bg-white/5 hover:border-neutral-600',
+        secondary:
+          'bg-white/10 text-white border border-neutral-700 hover:bg-white/20 hover:border-neutral-600',
+        ghost:
+          'text-neutral-400 hover:text-white hover:bg-white/5',
+        link:
+          'text-white underline-offset-4 hover:underline',
+        success:
+          'bg-green-500/20 text-green-300 border border-green-500/30 hover:bg-green-500/30',
+      },
+      size: {
+        default: 'h-10 px-5 py-2',
+        sm: 'h-8 rounded-lg px-3 text-xs',
+        lg: 'h-11 rounded-xl px-6 text-sm',
+        xl: 'h-12 rounded-xl px-8 text-base',
+        icon: 'h-10 w-10',
+        'icon-sm': 'h-8 w-8 rounded-lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, loading, leftIcon, rightIcon, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <Loader2 className="animate-spin" />
+            {typeof children === 'string' ? 'Loading...' : children}
+          </>
+        ) : (
+          <>
+            {leftIcon}
+            {children}
+            {rightIcon}
+          </>
+        )}
+      </Comp>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/apps/web/components/ui/card.tsx

@@ -0,0 +1,75 @@
+/**
+ * Card Components
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'rounded-xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm text-white shadow-sm transition-all hover:border-neutral-700',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 p-6 pb-4', className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-neutral-400', className)}
+      {...props}
+    />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center p-6 pt-0', className)}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/apps/web/components/ui/code-block.tsx

@@ -0,0 +1,122 @@
+/**
+ * Code Block Component with Syntax Highlighting
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import * as React from 'react';
+import { Check, Copy, Download } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { copyToClipboard, downloadAsFile } from '@/lib/utils';
+import { Button } from './button';
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  filename?: string;
+  showLineNumbers?: boolean;
+  maxHeight?: string;
+  className?: string;
+  showCopy?: boolean;
+  showDownload?: boolean;
+  onCopy?: () => void;
+}
+
+export function CodeBlock({
+  code,
+  language = 'typescript',
+  filename,
+  showLineNumbers = true,
+  maxHeight = '400px',
+  className,
+  showCopy = true,
+  showDownload = false,
+  onCopy,
+}: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = async () => {
+    const success = await copyToClipboard(code);
+    if (success) {
+      setCopied(true);
+      onCopy?.();
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleDownload = () => {
+    const ext = language === 'typescript' ? 'ts' : language === 'json' ? 'json' : 'txt';
+    downloadAsFile(code, filename || `code.${ext}`, 'text/plain');
+  };
+
+  const lines = code.split('\n');
+
+  return (
+    <div className={cn('group relative overflow-hidden rounded-xl border border-neutral-800', className)}>
+      {/* Header */}
+      {filename && (
+        <div className="flex items-center justify-between border-b border-neutral-800 bg-neutral-900/50 px-4 py-2">
+          <span className="font-mono text-xs text-neutral-400">{filename}</span>
+          <span className="text-[10px] font-medium uppercase tracking-wider text-neutral-600">{language}</span>
+        </div>
+      )}
+      
+      {/* Actions */}
+      <div className="absolute right-2 top-2 z-10 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+        {showCopy && (
+          <Button
+            variant="secondary"
+            size="icon-sm"
+            onClick={handleCopy}
+            className="h-7 w-7 shadow-sm"
+            title="Copy code"
+          >
+            {copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
+          </Button>
+        )}
+        {showDownload && (
+          <Button
+            variant="secondary"
+            size="icon-sm"
+            onClick={handleDownload}
+            className="h-7 w-7 shadow-sm"
+            title="Download file"
+          >
+            <Download className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
+
+      {/* Code */}
+      <div 
+        className="overflow-auto bg-black text-neutral-300"
+        style={{ maxHeight }}
+      >
+        <pre className="p-4 font-mono text-[13px] leading-relaxed">
+          <code>
+            {showLineNumbers ? (
+              <table className="w-full border-collapse">
+                <tbody>
+                  {lines.map((line, i) => (
+                    <tr key={i} className="hover:bg-white/[0.03]">
+                      <td className="w-10 select-none pr-4 text-right align-top text-neutral-700">
+                        {i + 1}
+                      </td>
+                      <td className="whitespace-pre-wrap break-all">
+                        {line || ' '}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              code
+            )}
+          </code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/apps/web/components/ui/index.ts

@@ -0,0 +1,12 @@
+/**
+ * UI Component Exports
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+export * from './button';
+export * from './input';
+export * from './card';
+export * from './badge';
+export * from './tabs';
+export * from './code-block';

package/apps/web/components/ui/input.tsx

@@ -0,0 +1,55 @@
+/**
+ * Input Component
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  error?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, leftIcon, rightIcon, error, ...props }, ref) => {
+    return (
+      <div className="relative w-full">
+        {leftIcon && (
+          <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+            {leftIcon}
+          </div>
+        )}
+        <input
+          type={type}
+          className={cn(
+            'flex h-11 w-full rounded-xl border bg-black px-4 py-2 text-sm text-white transition-all',
+            'placeholder:text-neutral-500',
+            'focus:outline-none focus:ring-2 focus:ring-white/10 focus:border-neutral-600',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            leftIcon && 'pl-11',
+            rightIcon && 'pr-11',
+            error
+              ? 'border-red-500 focus:ring-red-500/20 focus:border-red-500'
+              : 'border-neutral-700 hover:border-neutral-600',
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {rightIcon && (
+          <div className="absolute right-3.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+            {rightIcon}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

package/apps/web/components/ui/tabs.tsx

@@ -0,0 +1,61 @@
+/**
+ * Tabs Component
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-lg bg-neutral-900/50 border border-neutral-800 p-1 text-neutral-400',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/apps/web/hooks/index.ts

@@ -0,0 +1,85 @@
+/**
+ * Hooks barrel export
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+export { useStreaming } from './useStreaming';
+export { useBatchConversion } from './useBatchConversion';
+export { usePlatformDetection } from './usePlatformDetection';
+export { useDockerConfig } from './useDockerConfig';
+export { useMcpExecution } from './use-mcp-execution';
+export type { 
+  UseMcpExecutionOptions, 
+  UseMcpExecutionReturn, 
+  ExecutionLog, 
+  ExecuteToolResult 
+} from './use-mcp-execution';
+
+// Enhanced MCP Client hooks
+export { 
+  useMcpClient,
+  useHttpMcpClient,
+  useWebSocketMcpClient,
+  usePlaygroundMcpClient,
+} from './use-mcp-client';
+export type {
+  UseMcpClientOptions,
+  UseMcpClientReturn,
+  McpClientHookState,
+  McpClientLog,
+} from './use-mcp-client';
+
+// Playground hooks (legacy)
+export {
+  usePlaygroundState,
+  usePlaygroundNavigation,
+  usePlaygroundErrors,
+  useToolExecution,
+  usePlaygroundAnalytics,
+  usePlaygroundSharing,
+} from './use-playground-store';
+export type {
+  PlaygroundState,
+  PlaygroundError,
+  ExecuteToolRequest,
+  ExecuteToolResponse,
+} from './use-playground-store';
+
+// ============================================================================
+// New Playground V2 Hooks
+// ============================================================================
+
+// Shared Types
+export * from './types';
+
+// Connection Hook
+export { useMcpConnection, useMcpConnectionWithRetry } from './use-mcp-connection';
+export type { UseMcpConnectionWithRetryOptions } from './use-mcp-connection';
+
+// Tools Hook
+export { useMcpTools } from './use-mcp-tools';
+
+// Resources Hook
+export { useMcpResources } from './use-mcp-resources';
+
+// Prompts Hook
+export { useMcpPrompts } from './use-mcp-prompts';
+
+// Execution History Hook
+export { 
+  useExecutionHistory,
+  filterHistoryByType,
+  filterHistoryBySuccess,
+  filterHistoryByDateRange,
+  getHistoryStats,
+} from './use-execution-history';
+export type { 
+  UseExecutionHistoryOptions,
+  HistoryStats,
+} from './use-execution-history';
+
+// Unified Playground Hook
+export {
+  usePlayground,
+} from './use-playground';