github-to-mcp-monorepo 1.0.0

package/apps/web/app/playground/v2/providers.tsx

@@ -0,0 +1,214 @@
+/**
+ * Playground V2 Providers - Context providers for the playground
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { ReactNode, createContext, useContext, useState, useCallback } from 'react';
+
+// ============================================================================
+// Execution History Context
+// ============================================================================
+
+export interface ExecutionHistoryEntry {
+  id: string;
+  type: 'tool' | 'resource' | 'prompt';
+  name: string;
+  params?: unknown;
+  result?: unknown;
+  error?: string;
+  success: boolean;
+  timestamp: Date;
+  executionTime?: number;
+}
+
+interface ExecutionHistoryContextValue {
+  entries: ExecutionHistoryEntry[];
+  add: (entry: Omit<ExecutionHistoryEntry, 'id' | 'timestamp'>) => void;
+  clear: () => void;
+  remove: (id: string) => void;
+}
+
+const ExecutionHistoryContext = createContext<ExecutionHistoryContextValue | null>(null);
+
+export function useExecutionHistoryContext(): ExecutionHistoryContextValue {
+  const context = useContext(ExecutionHistoryContext);
+  if (!context) {
+    throw new Error('useExecutionHistoryContext must be used within a PlaygroundV2Providers');
+  }
+  return context;
+}
+
+// ============================================================================
+// Notifications Context
+// ============================================================================
+
+export interface Notification {
+  id: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+  message: string;
+  description?: string;
+  duration?: number;
+}
+
+interface NotificationsContextValue {
+  notifications: Notification[];
+  add: (notification: Omit<Notification, 'id'>) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+}
+
+const NotificationsContext = createContext<NotificationsContextValue | null>(null);
+
+export function useNotifications(): NotificationsContextValue {
+  const context = useContext(NotificationsContext);
+  if (!context) {
+    throw new Error('useNotifications must be used within a PlaygroundV2Providers');
+  }
+  return context;
+}
+
+// ============================================================================
+// Playground Settings Context
+// ============================================================================
+
+export interface PlaygroundSettings {
+  autoConnect: boolean;
+  persistHistory: boolean;
+  maxHistorySize: number;
+  showLogs: boolean;
+  theme: 'system' | 'light' | 'dark';
+}
+
+const DEFAULT_SETTINGS: PlaygroundSettings = {
+  autoConnect: false,
+  persistHistory: true,
+  maxHistorySize: 1000,
+  showLogs: true,
+  theme: 'system',
+};
+
+interface PlaygroundSettingsContextValue {
+  settings: PlaygroundSettings;
+  updateSettings: (updates: Partial<PlaygroundSettings>) => void;
+  resetSettings: () => void;
+}
+
+const PlaygroundSettingsContext = createContext<PlaygroundSettingsContextValue | null>(null);
+
+export function usePlaygroundSettings(): PlaygroundSettingsContextValue {
+  const context = useContext(PlaygroundSettingsContext);
+  if (!context) {
+    throw new Error('usePlaygroundSettings must be used within a PlaygroundV2Providers');
+  }
+  return context;
+}
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+// ============================================================================
+// Provider Component
+// ============================================================================
+
+interface PlaygroundV2ProvidersProps {
+  children: ReactNode;
+}
+
+export function PlaygroundV2Providers({ children }: PlaygroundV2ProvidersProps) {
+  // Execution History State
+  const [historyEntries, setHistoryEntries] = useState<ExecutionHistoryEntry[]>([]);
+
+  const addHistoryEntry = useCallback((entry: Omit<ExecutionHistoryEntry, 'id' | 'timestamp'>) => {
+    const newEntry: ExecutionHistoryEntry = {
+      ...entry,
+      id: generateId(),
+      timestamp: new Date(),
+    };
+    setHistoryEntries((prev) => [newEntry, ...prev].slice(0, DEFAULT_SETTINGS.maxHistorySize));
+  }, []);
+
+  const removeHistoryEntry = useCallback((id: string) => {
+    setHistoryEntries((prev) => prev.filter((entry) => entry.id !== id));
+  }, []);
+
+  const clearHistory = useCallback(() => {
+    setHistoryEntries([]);
+  }, []);
+
+  // Notifications State
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const addNotification = useCallback((notification: Omit<Notification, 'id'>) => {
+    const id = generateId();
+    const newNotification: Notification = { ...notification, id };
+    setNotifications((prev) => [...prev, newNotification]);
+
+    // Auto-remove after duration
+    const duration = notification.duration ?? 5000;
+    if (duration > 0) {
+      setTimeout(() => {
+        setNotifications((prev) => prev.filter((n) => n.id !== id));
+      }, duration);
+    }
+  }, []);
+
+  const removeNotification = useCallback((id: string) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+
+  const clearNotifications = useCallback(() => {
+    setNotifications([]);
+  }, []);
+
+  // Settings State
+  const [settings, setSettings] = useState<PlaygroundSettings>(DEFAULT_SETTINGS);
+
+  const updateSettings = useCallback((updates: Partial<PlaygroundSettings>) => {
+    setSettings((prev) => ({ ...prev, ...updates }));
+  }, []);
+
+  const resetSettings = useCallback(() => {
+    setSettings(DEFAULT_SETTINGS);
+  }, []);
+
+  // Context Values
+  const executionHistoryValue: ExecutionHistoryContextValue = {
+    entries: historyEntries,
+    add: addHistoryEntry,
+    clear: clearHistory,
+    remove: removeHistoryEntry,
+  };
+
+  const notificationsValue: NotificationsContextValue = {
+    notifications,
+    add: addNotification,
+    remove: removeNotification,
+    clear: clearNotifications,
+  };
+
+  const settingsValue: PlaygroundSettingsContextValue = {
+    settings,
+    updateSettings,
+    resetSettings,
+  };
+
+  return (
+    <ExecutionHistoryContext.Provider value={executionHistoryValue}>
+      <NotificationsContext.Provider value={notificationsValue}>
+        <PlaygroundSettingsContext.Provider value={settingsValue}>
+          {children}
+        </PlaygroundSettingsContext.Provider>
+      </NotificationsContext.Provider>
+    </ExecutionHistoryContext.Provider>
+  );
+}
+
+export default PlaygroundV2Providers;

package/apps/web/app/playground/v2/use-shortcuts.ts

@@ -0,0 +1,209 @@
+/**
+ * useShortcuts Hook - Keyboard shortcuts handler for playground
+ * @copyright 2024-2026 nirholas
+ * @license MIT
+ */
+
+'use client';
+
+import { useEffect, useCallback } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface UseShortcutsOptions {
+  /** Callback when execute shortcut is triggered (Cmd/Ctrl+Enter) */
+  onExecute?: () => void;
+  /** Callback when search focus shortcut is triggered (Cmd/Ctrl+K) */
+  onFocusSearch?: () => void;
+  /** Callback when tab switch shortcut is triggered (Cmd/Ctrl+1/2/3) */
+  onSwitchToTab?: (tabNumber: 1 | 2 | 3) => void;
+  /** Callback when clear selection shortcut is triggered (Escape) */
+  onClearSelection?: () => void;
+  /** Callback when copy result shortcut is triggered (Cmd/Ctrl+Shift+C) */
+  onCopyLastResult?: () => void;
+  /** Callback when toggle history shortcut is triggered (Cmd/Ctrl+H) */
+  onToggleHistory?: () => void;
+  /** Callback when help shortcut is triggered (Cmd/Ctrl+/) */
+  onShowHelp?: () => void;
+  /** Whether shortcuts are enabled */
+  enabled?: boolean;
+}
+
+export interface ShortcutInfo {
+  key: string;
+  description: string;
+  modifier: 'cmd' | 'ctrl' | 'shift' | 'alt' | 'none';
+}
+
+// ============================================================================
+// Shortcut Definitions
+// ============================================================================
+
+export const SHORTCUTS: ShortcutInfo[] = [
+  { key: 'Enter', description: 'Execute selected tool', modifier: 'cmd' },
+  { key: 'K', description: 'Focus search', modifier: 'cmd' },
+  { key: '1', description: 'Switch to Tools tab', modifier: 'cmd' },
+  { key: '2', description: 'Switch to Resources tab', modifier: 'cmd' },
+  { key: '3', description: 'Switch to Prompts tab', modifier: 'cmd' },
+  { key: 'Escape', description: 'Clear selection', modifier: 'none' },
+  { key: 'C', description: 'Copy last result', modifier: 'shift' },
+  { key: 'H', description: 'Toggle history panel', modifier: 'cmd' },
+  { key: '/', description: 'Show keyboard shortcuts', modifier: 'cmd' },
+];
+
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+
+export function useShortcuts(options: UseShortcutsOptions): void {
+  const {
+    onExecute,
+    onFocusSearch,
+    onSwitchToTab,
+    onClearSelection,
+    onCopyLastResult,
+    onToggleHistory,
+    onShowHelp,
+    enabled = true,
+  } = options;
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!enabled) return;
+
+      // Don't handle shortcuts when typing in input fields
+      const target = event.target as HTMLElement;
+      const isInputField =
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable;
+
+      // Allow Escape in input fields
+      if (isInputField && event.key !== 'Escape') {
+        return;
+      }
+
+      const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      const cmdOrCtrl = isMac ? event.metaKey : event.ctrlKey;
+
+      // Cmd/Ctrl+Enter: Execute
+      if (cmdOrCtrl && event.key === 'Enter') {
+        event.preventDefault();
+        onExecute?.();
+        return;
+      }
+
+      // Cmd/Ctrl+K: Focus search
+      if (cmdOrCtrl && event.key.toLowerCase() === 'k') {
+        event.preventDefault();
+        onFocusSearch?.();
+        return;
+      }
+
+      // Cmd/Ctrl+1/2/3: Switch tabs
+      if (cmdOrCtrl && ['1', '2', '3'].includes(event.key)) {
+        event.preventDefault();
+        onSwitchToTab?.(parseInt(event.key) as 1 | 2 | 3);
+        return;
+      }
+
+      // Escape: Clear selection
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClearSelection?.();
+        return;
+      }
+
+      // Cmd/Ctrl+Shift+C: Copy last result
+      if (cmdOrCtrl && event.shiftKey && event.key.toLowerCase() === 'c') {
+        event.preventDefault();
+        onCopyLastResult?.();
+        return;
+      }
+
+      // Cmd/Ctrl+H: Toggle history
+      if (cmdOrCtrl && event.key.toLowerCase() === 'h') {
+        event.preventDefault();
+        onToggleHistory?.();
+        return;
+      }
+
+      // Cmd/Ctrl+/: Show help
+      if (cmdOrCtrl && event.key === '/') {
+        event.preventDefault();
+        onShowHelp?.();
+        return;
+      }
+    },
+    [
+      enabled,
+      onExecute,
+      onFocusSearch,
+      onSwitchToTab,
+      onClearSelection,
+      onCopyLastResult,
+      onToggleHistory,
+      onShowHelp,
+    ]
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [enabled, handleKeyDown]);
+}
+
+// ============================================================================
+// Shortcut Display Utilities
+// ============================================================================
+
+/**
+ * Get the display string for a modifier key based on platform
+ */
+export function getModifierDisplay(modifier: ShortcutInfo['modifier']): string {
+  const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+  switch (modifier) {
+    case 'cmd':
+      return isMac ? '⌘' : 'Ctrl';
+    case 'ctrl':
+      return isMac ? '⌃' : 'Ctrl';
+    case 'shift':
+      return isMac ? '⇧' : 'Shift';
+    case 'alt':
+      return isMac ? '⌥' : 'Alt';
+    case 'none':
+      return '';
+  }
+}
+
+/**
+ * Get the full display string for a shortcut
+ */
+export function getShortcutDisplay(shortcut: ShortcutInfo): string {
+  const modifier = getModifierDisplay(shortcut.modifier);
+  const key = shortcut.key === 'Enter' ? '↵' : shortcut.key;
+  
+  if (modifier) {
+    return `${modifier}+${key}`;
+  }
+  return key;
+}
+
+/**
+ * Format all shortcuts for display
+ */
+export function formatShortcuts(): Array<{ key: string; description: string }> {
+  return SHORTCUTS.map((shortcut) => ({
+    key: getShortcutDisplay(shortcut),
+    description: shortcut.description,
+  }));
+}
+
+export default useShortcuts;