nitrostack 1.0.65 → 1.0.67

package/src/studio/lib/log-manager.ts

@@ -0,0 +1,76 @@
+// Log Manager for MCP Server
+// Captures stdout/stderr from MCP server process and streams to clients
+
+export interface LogEntry {
+  timestamp: number;
+  level: 'info' | 'error' | 'warn' | 'debug';
+  message: string;
+  source: 'stdout' | 'stderr' | 'system';
+}
+
+class LogManager {
+  private logs: LogEntry[] = [];
+  private maxLogs = 1000; // Keep last 1000 logs in memory
+  private listeners: Set<(log: LogEntry) => void> = new Set();
+
+  addLog(message: string, level: LogEntry['level'] = 'info', source: LogEntry['source'] = 'system') {
+    const entry: LogEntry = {
+      timestamp: Date.now(),
+      level,
+      message: message.trim(),
+      source,
+    };
+
+    this.logs.push(entry);
+
+    // Keep only last maxLogs entries
+    if (this.logs.length > this.maxLogs) {
+      this.logs = this.logs.slice(-this.maxLogs);
+    }
+
+    // Notify all listeners
+    this.listeners.forEach(listener => {
+      try {
+        listener(entry);
+      } catch (error) {
+        console.error('Error in log listener:', error);
+      }
+    });
+  }
+
+  getLogs(limit?: number): LogEntry[] {
+    if (limit) {
+      return this.logs.slice(-limit);
+    }
+    return [...this.logs];
+  }
+
+  clearLogs() {
+    this.logs = [];
+    this.addLog('Logs cleared', 'info', 'system');
+  }
+
+  subscribe(listener: (log: LogEntry) => void): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  getLogCount(): number {
+    return this.logs.length;
+  }
+}
+
+// Global singleton
+declare global {
+  var __logManager: LogManager | undefined;
+}
+
+export function getLogManager(): LogManager {
+  if (!global.__logManager) {
+    global.__logManager = new LogManager();
+  }
+  return global.__logManager;
+}
+

package/src/studio/lib/mcp-client.ts

@@ -0,0 +1,258 @@
+// MCP Client for Studio
+// Communicates with MCP server via stdio or HTTP
+
+import { spawn, ChildProcess } from 'child_process';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+import { HttpClientTransport } from '@/lib/http-client-transport';
+import { getLogManager } from '@/lib/log-manager';
+
+export type TransportType = 'stdio' | 'http';
+
+export interface StdioClientConfig {
+  type: 'stdio';
+  command: string;
+  args: string[];
+  env?: Record<string, string>;
+  cwd?: string;
+}
+
+export interface HttpClientConfig {
+  type: 'http';
+  baseUrl: string;
+  basePath?: string;
+  headers?: Record<string, string>;
+}
+
+export type McpClientConfig = StdioClientConfig | HttpClientConfig;
+
+export class McpClient {
+  private client: Client | null = null;
+  private transport: StdioClientTransport | HttpClientTransport | null = null;
+  private transportType: TransportType | null = null;
+  private childProcess: ChildProcess | null = null;
+
+  async connect(config: McpClientConfig): Promise<void> {
+    if (this.client && this.transport) {
+      console.log('⚠️  Already connected, reusing existing connection');
+      return;
+    }
+
+    // Clean up any existing connections
+    if (this.client || this.transport) {
+      console.log('🧹 Cleaning up stale connection...');
+      try {
+        if (this.client) await this.client.close();
+        if (this.transport) await this.transport.close();
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+      this.client = null;
+      this.transport = null;
+    }
+
+    this.transportType = config.type;
+
+    // Create appropriate transport based on type
+    if (config.type === 'stdio') {
+      console.log('🚀 Connecting to MCP server via STDIO:', config.command, config.args);
+      console.log('📝 Environment vars:', Object.keys(config.env || {}).join(', '));
+      
+      const logManager = getLogManager();
+      logManager.addLog(`Starting MCP server: ${config.command} ${config.args.join(' ')}`, 'info', 'system');
+
+      // Create STDIO transport (it will spawn the process internally)
+      this.transport = new StdioClientTransport({
+        command: config.command,
+        args: config.args,
+        env: { ...process.env, ...config.env },
+        cwd: config.cwd,
+      });
+
+      // Access the child process from the transport to capture logs
+      // The transport stores the process in a private property, so we need to access it
+      setTimeout(() => {
+        const transport = this.transport as any;
+        if (transport._process || transport.process) {
+          this.childProcess = transport._process || transport.process;
+          
+          // Capture stdout
+          this.childProcess?.stdout?.on('data', (data: Buffer) => {
+            const message = data.toString();
+            logManager.addLog(message, 'info', 'stdout');
+          });
+
+          // Capture stderr
+          this.childProcess?.stderr?.on('data', (data: Buffer) => {
+            const message = data.toString();
+            logManager.addLog(message, 'error', 'stderr');
+          });
+
+          // Handle process errors
+          this.childProcess?.on('error', (error: Error) => {
+            logManager.addLog(`Process error: ${error.message}`, 'error', 'system');
+          });
+
+          // Handle process exit
+          this.childProcess?.on('exit', (code: number | null, signal: string | null) => {
+            if (code !== null) {
+              logManager.addLog(`MCP server exited with code ${code}`, code === 0 ? 'info' : 'error', 'system');
+            } else if (signal) {
+              logManager.addLog(`MCP server killed with signal ${signal}`, 'warn', 'system');
+            }
+          });
+        }
+      }, 100); // Small delay to ensure transport has spawned the process
+    } else if (config.type === 'http') {
+      console.log('🌐 Connecting to MCP server via HTTP:', config.baseUrl);
+
+      // Create HTTP transport
+      this.transport = new HttpClientTransport({
+        baseUrl: config.baseUrl,
+        basePath: config.basePath,
+        headers: config.headers,
+      });
+
+      // Start the HTTP transport (establish SSE connection)
+      await this.transport.start();
+    } else {
+      throw new Error(`Unknown transport type: ${(config as any).type}`);
+    }
+
+    // Create client
+    this.client = new Client(
+      {
+        name: 'nitrostack-studio',
+        version: '3.1.0',
+      },
+      {
+        capabilities: {
+          sampling: {},
+          roots: { listChanged: true },
+        },
+      }
+    );
+
+    // Handle connection errors
+    this.client.onerror = (error) => {
+      console.error('❌ MCP Client error:', error);
+      this.client = null;
+      this.transport = null;
+      this.transportType = null;
+    };
+
+    this.client.onclose = () => {
+      console.log('🔌 MCP Client connection closed');
+      this.client = null;
+      this.transport = null;
+      this.transportType = null;
+    };
+
+    // Connect
+    try {
+      await this.client.connect(this.transport);
+      console.log(`✅ MCP Client connected and ready (${config.type.toUpperCase()} transport)`);
+    } catch (error) {
+      console.error('❌ Failed to connect MCP client:', error);
+      this.client = null;
+      this.transport = null;
+      this.transportType = null;
+      throw error;
+    }
+  }
+
+  async disconnect(): Promise<void> {
+    console.log('🛑 Disconnecting MCP client...');
+    
+    const logManager = getLogManager();
+    
+    if (this.client) {
+      await this.client.close();
+      this.client = null;
+    }
+
+    if (this.transport) {
+      await this.transport.close();
+      this.transport = null;
+    }
+
+    if (this.childProcess) {
+      logManager.addLog('Stopping MCP server process', 'info', 'system');
+      this.childProcess.kill('SIGTERM');
+      this.childProcess = null;
+    }
+
+    this.transportType = null;
+  }
+
+  isConnected(): boolean {
+    return this.client !== null;
+  }
+
+  getTransportType(): TransportType | null {
+    return this.transportType;
+  }
+
+  async listTools() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.listTools();
+  }
+
+  async callTool(name: string, args: any) {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.callTool({ name, arguments: args });
+  }
+
+  async listResources() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.listResources();
+  }
+
+  async readResource(uri: string) {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.readResource({ uri });
+  }
+
+  async listPrompts() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.listPrompts();
+  }
+
+  async getPrompt(name: string, args: any) {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.getPrompt({ name, arguments: args });
+  }
+
+  async ping() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.ping();
+  }
+
+  async listRoots() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.listRoots();
+  }
+
+  async executeTool(name: string, args: any) {
+    return await this.callTool(name, args);
+  }
+
+  async createCompletion(params: any) {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.createCompletion(params);
+  }
+}
+
+// Global singleton that persists across HMR
+declare global {
+  var __mcpClient: McpClient | undefined;
+}
+
+export function getMcpClient(): McpClient {
+  if (!global.__mcpClient) {
+    console.log('🆕 Creating new MCP client instance');
+    global.__mcpClient = new McpClient();
+  }
+  return global.__mcpClient;
+}
+

package/src/studio/lib/store.ts

@@ -0,0 +1,192 @@
+import { create } from 'zustand';
+import type {
+  Tool,
+  Resource,
+  Prompt,
+  ChatMessage,
+  ConnectionStatus,
+  TabType,
+  PingResult,
+  HealthCheck,
+  OAuthState,
+} from './types';
+
+interface StudioState {
+  // Connection
+  connection: ConnectionStatus;
+  setConnection: (status: ConnectionStatus) => void;
+
+  // Navigation
+  currentTab: TabType;
+  setCurrentTab: (tab: TabType) => void;
+
+  // Data
+  tools: Tool[];
+  setTools: (tools: Tool[]) => void;
+
+  resources: Resource[];
+  setResources: (resources: Resource[]) => void;
+
+  prompts: Prompt[];
+  setPrompts: (prompts: Prompt[]) => void;
+
+  // Chat
+  chatMessages: ChatMessage[];
+  addChatMessage: (message: ChatMessage) => void;
+  clearChat: () => void;
+  currentProvider: 'openai' | 'gemini';
+  setCurrentProvider: (provider: 'openai' | 'gemini') => void;
+  currentImage: { data: string; type: string; name: string } | null;
+  setCurrentImage: (image: { data: string; type: string; name: string } | null) => void;
+
+  // Auth
+  jwtToken: string | null;
+  setJwtToken: (token: string | null) => void;
+
+  apiKey: string | null;
+  setApiKey: (key: string | null) => void;
+
+  oauthState: OAuthState;
+  setOAuthState: (state: Partial<OAuthState>) => void;
+
+  // Ping
+  pingHistory: PingResult[];
+  addPingResult: (result: PingResult) => void;
+
+  // Health
+  healthChecks: HealthCheck[];
+  setHealthChecks: (checks: HealthCheck[]) => void;
+
+  // Modal
+  enlargeModal: {
+    open: boolean;
+    type: 'tool' | 'resource' | null;
+    item: any;
+  };
+  openEnlargeModal: (type: 'tool' | 'resource', item: any) => void;
+  closeEnlargeModal: () => void;
+
+  // Loading states
+  loading: {
+    tools: boolean;
+    resources: boolean;
+    prompts: boolean;
+    chat: boolean;
+  };
+  setLoading: (key: keyof StudioState['loading'], value: boolean) => void;
+}
+
+export const useStudioStore = create<StudioState>((set) => ({
+  // Connection
+  connection: { connected: false, status: 'connecting' },
+  setConnection: (connection) => set({ connection }),
+
+  // Navigation
+  currentTab: 'tools',
+  setCurrentTab: (currentTab) => set({ currentTab }),
+
+  // Data
+  tools: [],
+  setTools: (tools) => set({ tools }),
+
+  resources: [],
+  setResources: (resources) => set({ resources }),
+
+  prompts: [],
+  setPrompts: (prompts) => set({ prompts }),
+
+  // Chat
+  chatMessages: [],
+  addChatMessage: (message) =>
+    set((state) => ({ chatMessages: [...state.chatMessages, message] })),
+  clearChat: () => set({ chatMessages: [] }),
+  currentProvider: 'gemini',
+  setCurrentProvider: (currentProvider) => set({ currentProvider }),
+  currentImage: null,
+  setCurrentImage: (currentImage) => set({ currentImage }),
+
+  // Auth
+  jwtToken: typeof window !== 'undefined' ? localStorage.getItem('mcp_jwt_token') : null,
+  setJwtToken: (jwtToken) => {
+    if (typeof window !== 'undefined') {
+      if (jwtToken) {
+        localStorage.setItem('mcp_jwt_token', jwtToken);
+      } else {
+        localStorage.removeItem('mcp_jwt_token');
+      }
+    }
+    set({ jwtToken });
+  },
+
+  apiKey: typeof window !== 'undefined' ? localStorage.getItem('mcp_api_key') : null,
+  setApiKey: (apiKey) => {
+    if (typeof window !== 'undefined') {
+      if (apiKey) {
+        localStorage.setItem('mcp_api_key', apiKey);
+      } else {
+        localStorage.removeItem('mcp_api_key');
+      }
+    }
+    set({ apiKey });
+  },
+
+  oauthState: typeof window !== 'undefined' 
+    ? JSON.parse(localStorage.getItem('mcp_oauth_state') || 'null') || {
+        authServerUrl: null,
+        resourceMetadata: null,
+        authServerMetadata: null,
+        clientRegistration: null,
+        selectedScopes: [],
+        currentToken: null,
+      }
+    : {
+        authServerUrl: null,
+        resourceMetadata: null,
+        authServerMetadata: null,
+        clientRegistration: null,
+        selectedScopes: [],
+        currentToken: null,
+      },
+  setOAuthState: (newState) => {
+    const updatedState = (state: any) => {
+      const newOAuthState = { ...state.oauthState, ...newState };
+      
+      // Persist to localStorage
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('mcp_oauth_state', JSON.stringify(newOAuthState));
+      }
+      
+      return { oauthState: newOAuthState };
+    };
+    set(updatedState);
+  },
+
+  // Ping
+  pingHistory: [],
+  addPingResult: (result) =>
+    set((state) => ({
+      pingHistory: [result, ...state.pingHistory].slice(0, 10),
+    })),
+
+  // Health
+  healthChecks: [],
+  setHealthChecks: (healthChecks) => set({ healthChecks }),
+
+  // Modal
+  enlargeModal: { open: false, type: null, item: null },
+  openEnlargeModal: (type, item) =>
+    set({ enlargeModal: { open: true, type, item } }),
+  closeEnlargeModal: () =>
+    set({ enlargeModal: { open: false, type: null, item: null } }),
+
+  // Loading
+  loading: {
+    tools: false,
+    resources: false,
+    prompts: false,
+    chat: false,
+  },
+  setLoading: (key, value) =>
+    set((state) => ({ loading: { ...state.loading, [key]: value } })),
+}));
+

package/src/studio/lib/theme-provider.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light';
+
+type ThemeContextType = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('dark');
+
+  useEffect(() => {
+    // Load theme from localStorage
+    const stored = localStorage.getItem('theme') as Theme;
+    if (stored) {
+      setTheme(stored);
+      document.documentElement.classList.toggle('dark', stored === 'dark');
+    } else {
+      // Default to dark theme
+      document.documentElement.classList.add('dark');
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+}
+

package/src/studio/lib/types.ts

@@ -0,0 +1,107 @@
+// NitroStack Studio Type Definitions
+
+export interface Tool {
+  name: string;
+  description?: string;
+  inputSchema?: {
+    type: string;
+    properties?: Record<string, any>;
+    required?: string[];
+  };
+  examples?: {
+    request?: any;
+    response?: any;
+  };
+  widget?: {
+    route: string;
+  };
+  outputTemplate?: string;
+  _meta?: {
+    'openai/outputTemplate'?: string;
+    'ui/template'?: string;
+    [key: string]: any;
+  };
+}
+
+export interface Resource {
+  name: string;
+  uri: string;
+  description?: string;
+  mimeType?: string;
+  examples?: {
+    response?: any;
+  };
+  _meta?: Record<string, any>;
+}
+
+export interface Prompt {
+  name: string;
+  description?: string;
+  arguments?: Array<{
+    name: string;
+    description?: string;
+    required?: boolean;
+  }>;
+}
+
+export interface Root {
+  uri: string;
+  name?: string;
+}
+
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'tool' | 'system';
+  content: string;
+  toolCalls?: ToolCall[];
+  toolCallId?: string;
+  image?: {
+    data: string;
+    type: string;
+    name: string;
+  };
+}
+
+export interface ToolCall {
+  id: string;
+  name: string;
+  arguments: any;
+  result?: any;
+}
+
+export interface PingResult {
+  time: Date;
+  latency: number;
+}
+
+export interface ConnectionStatus {
+  connected: boolean;
+  status: 'connected' | 'connecting' | 'disconnected';
+}
+
+export interface HealthCheck {
+  name: string;
+  status: 'up' | 'down' | 'degraded';
+  lastCheck: Date;
+  message?: string;
+}
+
+export interface OAuthState {
+  authServerUrl: string | null;
+  resourceMetadata: any;
+  authServerMetadata: any;
+  clientRegistration: any;
+  selectedScopes: string[];
+  currentToken: any;
+}
+
+export type TabType =
+  | 'tools'
+  | 'chat'
+  | 'resources'
+  | 'prompts'
+  | 'auth'
+  | 'health'
+  | 'ping'
+  | 'sampling'
+  | 'roots';
+