nitrostack 1.0.71 → 1.0.73

package/src/studio/components/tools/ToolsCanvas.tsx

@@ -0,0 +1,327 @@
+'use client';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import ReactFlow, {
+    Background,
+    Controls,
+    Edge,
+    Node,
+    ReactFlowProvider,
+    useNodesState,
+    useEdgesState,
+    Handle,
+    Position,
+    MarkerType,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import { Tool, Resource, Prompt } from '@/lib/types';
+import { WrenchScrewdriverIcon, BoltIcon, SparklesIcon, CubeIcon, DocumentTextIcon, GlobeAltIcon } from '@heroicons/react/24/outline';
+
+interface ToolsCanvasProps {
+    tools: Tool[];
+    resources?: Resource[];
+    prompts?: Prompt[];
+    onToolClick?: (tool: Tool) => void;
+    onResourceClick?: (resource: Resource) => void;
+    onPromptClick?: (prompt: Prompt) => void;
+}
+
+// Custom Agent Node (Center)
+const AgentNode = ({ data }: { data: { label: string } }) => {
+    return (
+        <div className="relative group">
+            {/* Glow Effect */}
+            <div className="absolute -inset-4 bg-primary/20 rounded-full blur-xl group-hover:bg-primary/30 transition-all duration-500"></div>
+
+            <div className="relative w-32 h-32 rounded-full border-2 border-primary bg-card/90 backdrop-blur-md shadow-2xl flex flex-col items-center justify-center z-10 animate-pulse-slow">
+                <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-2">
+                    <CubeIcon className="w-7 h-7 text-primary" />
+                </div>
+                <div className="text-[10px] font-mono text-primary uppercase tracking-widest mb-1">AGENT</div>
+                <div className="text-xs font-bold text-foreground text-center px-4 leading-tight">{data.label}</div>
+
+                <Handle type="source" position={Position.Top} className="!bg-primary !w-3 !h-3 !border-2 !border-background" />
+                <Handle type="source" position={Position.Right} className="!bg-primary !w-3 !h-3 !border-2 !border-background" />
+                <Handle type="source" position={Position.Bottom} className="!bg-primary !w-3 !h-3 !border-2 !border-background" />
+                <Handle type="source" position={Position.Left} className="!bg-primary !w-3 !h-3 !border-2 !border-background" />
+            </div>
+        </div>
+    );
+};
+
+// Custom Tool Node (Satellite)
+const ToolNode = ({ data }: { data: { tool: Tool } }) => {
+    const Icon = data.tool.name.toLowerCase().includes('run') || data.tool.name.toLowerCase().includes('exec')
+        ? BoltIcon
+        : data.tool.description?.toLowerCase().includes('ai')
+            ? SparklesIcon
+            : WrenchScrewdriverIcon;
+
+    return (
+        <div className="w-[200px] rounded-lg border border-teal-500/20 bg-card/80 backdrop-blur-sm shadow-xl p-4 transition-all duration-300 hover:border-teal-500/60 hover:shadow-teal-500/10 group cursor-pointer">
+            <Handle type="target" position={Position.Left} className="!bg-muted-foreground !w-2 !h-2" />
+
+            <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-lg bg-teal-500/10 flex items-center justify-center shrink-0 group-hover:bg-teal-500/20 transition-colors">
+                    <Icon className="w-4 h-4 text-teal-500 group-hover:text-teal-400 transition-colors" />
+                </div>
+                <div>
+                    <div className="text-[10px] font-mono text-teal-500 uppercase tracking-wider mb-0.5">TOOL</div>
+                    <div className="font-semibold text-foreground text-sm line-clamp-1">{data.tool.name}</div>
+                    <div className="text-xs text-muted-foreground line-clamp-2 mt-1">{data.tool.description}</div>
+                </div>
+            </div>
+
+            {/* Argument Pills */}
+            {data.tool.inputSchema?.properties && Object.keys(data.tool.inputSchema.properties).length > 0 && (
+                <div className="flex flex-wrap gap-1 mt-3">
+                    {Object.keys(data.tool.inputSchema.properties).slice(0, 3).map(arg => (
+                        <span key={arg} className="px-1.5 py-0.5 rounded text-[10px] bg-muted/50 text-muted-foreground border border-border">
+                            {arg}
+                        </span>
+                    ))}
+                    {Object.keys(data.tool.inputSchema.properties).length > 3 && (
+                        <span className="px-1.5 py-0.5 rounded text-[10px] bg-muted/50 text-muted-foreground border border-border">+{Object.keys(data.tool.inputSchema.properties).length - 3}</span>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Custom Resource Node
+const ResourceNode = ({ data }: { data: { resource: Resource } }) => {
+    return (
+        <div className="w-[200px] rounded-lg border border-indigo-500/20 bg-card/80 backdrop-blur-sm shadow-xl p-4 transition-all duration-300 hover:border-indigo-500/60 hover:shadow-indigo-500/10 group cursor-pointer">
+            <Handle type="target" position={Position.Left} className="!bg-muted-foreground !w-2 !h-2" />
+
+            <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center shrink-0 group-hover:bg-indigo-500/20 transition-colors">
+                    <CubeIcon className="w-4 h-4 text-indigo-500 group-hover:text-indigo-400 transition-colors" />
+                </div>
+                <div>
+                    <div className="text-[10px] font-mono text-indigo-500 uppercase tracking-wider mb-0.5">RESOURCE</div>
+                    <div className="font-semibold text-foreground text-sm line-clamp-1">{data.resource.name}</div>
+                    <div className="text-xs text-muted-foreground line-clamp-2 mt-1">{data.resource.uri}</div>
+                </div>
+            </div>
+            <div className="flex flex-wrap gap-1 mt-3">
+                <span className="px-1.5 py-0.5 rounded text-[10px] bg-indigo-500/5 text-indigo-500 border border-indigo-500/10">
+                    {data.resource.mimeType || 'text/plain'}
+                </span>
+            </div>
+        </div>
+    );
+};
+
+// Custom Prompt Node
+const PromptNode = ({ data }: { data: { prompt: Prompt } }) => {
+    return (
+        <div className="w-[200px] rounded-lg border border-amber-500/20 bg-card/80 backdrop-blur-sm shadow-xl p-4 transition-all duration-300 hover:border-amber-500/60 hover:shadow-amber-500/10 group cursor-pointer">
+            <Handle type="target" position={Position.Left} className="!bg-muted-foreground !w-2 !h-2" />
+
+            <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center shrink-0 group-hover:bg-amber-500/20 transition-colors">
+                    <DocumentTextIcon className="w-4 h-4 text-amber-500 group-hover:text-amber-400 transition-colors" />
+                </div>
+                <div>
+                    <div className="text-[10px] font-mono text-amber-500 uppercase tracking-wider mb-0.5">PROMPT</div>
+                    <div className="font-semibold text-foreground text-sm line-clamp-1">{data.prompt.name}</div>
+                    <div className="text-xs text-muted-foreground line-clamp-2 mt-1">{data.prompt.description || 'No description'}</div>
+                </div>
+            </div>
+
+            {/* Arguments */}
+            {data.prompt.arguments && data.prompt.arguments.length > 0 && (
+                <div className="flex flex-wrap gap-1 mt-3">
+                    {data.prompt.arguments.slice(0, 3).map(arg => (
+                        <span key={arg.name} className="px-1.5 py-0.5 rounded text-[10px] bg-amber-500/5 text-amber-500 border border-amber-500/10">
+                            {arg.name}
+                        </span>
+                    ))}
+                    {data.prompt.arguments.length > 3 && (
+                        <span className="px-1.5 py-0.5 rounded text-[10px] bg-muted/50 text-muted-foreground border border-border">+{data.prompt.arguments.length - 3}</span>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+const nodeTypes = {
+    agent: AgentNode,
+    tool: ToolNode,
+    resource: ResourceNode,
+    prompt: PromptNode,
+};
+
+export function ToolsCanvas({ tools, resources = [], prompts = [], onToolClick, onResourceClick, onPromptClick }: ToolsCanvasProps) {
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+    // Calculate Layout (Categorical Zones)
+    useEffect(() => {
+        const centerX = 400;
+        const centerY = 300;
+        const zoneRadius = 350; // Distance of zone centers from main center
+
+        const newNodes: Node[] = [
+            {
+                id: 'agent-root',
+                type: 'agent',
+                position: { x: centerX - 64, y: centerY - 64 }, // Center minus half width/height
+                data: { label: 'NitroStack Agent' },
+            },
+        ];
+
+        const newEdges: Edge[] = [];
+
+        // Helper to place items in a grid within a zone
+        const placeItemsInZone = (items: (Tool | Resource | Prompt)[], type: string, startX: number, startY: number, cols: number = 3) => {
+            items.forEach((item, index) => {
+                const col = index % cols;
+                const row = Math.floor(index / cols);
+
+                // Grid spacing
+                const gapX = 240;
+                const gapY = 150;
+
+                const x = startX + (col * gapX);
+                const y = startY + (row * gapY);
+
+                let nodeId = '';
+                let nodeData = {};
+                let strokeColor = '#52525b';
+
+                if (type === 'tool') {
+                    const tool = item as Tool;
+                    nodeId = `tool-${tool.name}`;
+                    nodeData = { tool };
+                    strokeColor = '#14b8a6'; // Teal
+                } else if (type === 'resource') {
+                    const resource = item as Resource;
+                    nodeId = `resource-${resource.uri}`;
+                    nodeData = { resource };
+                    strokeColor = '#6366f1'; // Indigo
+                } else if (type === 'prompt') {
+                    const prompt = item as Prompt;
+                    nodeId = `prompt-${prompt.name}`;
+                    nodeData = { prompt };
+                    strokeColor = '#f59e0b'; // Amber
+                }
+
+                newNodes.push({
+                    id: nodeId,
+                    type: type,
+                    position: { x, y },
+                    data: nodeData,
+                });
+
+                newEdges.push({
+                    id: `e-root-${nodeId}`,
+                    source: 'agent-root',
+                    target: nodeId,
+                    type: 'default',
+                    animated: true,
+                    style: { stroke: strokeColor, strokeWidth: 1.5, opacity: 0.3 },
+                    markerEnd: {
+                        type: MarkerType.ArrowClosed,
+                        color: strokeColor,
+                    }
+                });
+            });
+        }
+
+        // 1. Prompts (Top Left)
+        // Center of zone is approx (-zoneRadius, -zoneRadius) relative to main center
+        // We'll define start point for the grid
+        if (prompts && prompts.length > 0) {
+            const startX = centerX - 600;
+            const startY = centerY - 400;
+            placeItemsInZone(prompts, 'prompt', startX, startY, 2);
+        }
+
+        // 2. Resources (Top Right)
+        if (resources && resources.length > 0) {
+            const startX = centerX + 200;
+            const startY = centerY - 400;
+            placeItemsInZone(resources, 'resource', startX, startY, 2);
+        }
+
+        // 3. Tools (Bottom)
+        if (tools && tools.length > 0) {
+            // Center the tools grid at the bottom
+            const cols = 4;
+            const gridWidth = Math.min(tools.length, cols) * 240;
+            const startX = centerX - (gridWidth / 2) + 100; // Adjust to center
+            const startY = centerY + 200;
+            placeItemsInZone(tools, 'tool', startX, startY, cols);
+        }
+
+        setNodes(newNodes);
+        setEdges(newEdges);
+    }, [tools, resources, prompts, setNodes, setEdges]); // Re-calc when any data changes
+
+    const handleNodeClick = useCallback((event: React.MouseEvent, node: Node) => {
+        if (node.type === 'tool' && node.data.tool && onToolClick) {
+            onToolClick(node.data.tool);
+        } else if (node.type === 'resource' && node.data.resource && onResourceClick) {
+            onResourceClick(node.data.resource);
+        } else if (node.type === 'prompt' && node.data.prompt && onPromptClick) {
+            onPromptClick(node.data.prompt);
+        }
+    }, [onToolClick, onResourceClick, onPromptClick]);
+
+    return (
+        <div className="w-full h-full min-h-[600px] bg-[#09090b] rounded-xl overflow-hidden border border-border/50 shadow-inner relative group/canvas">
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                nodeTypes={nodeTypes}
+                onNodeClick={handleNodeClick}
+                fitView
+                className="bg-[#09090b]" // Zinc-950 dark background
+            >
+                <Background
+                    color="#27272a" // Zinc-800 dots
+                    gap={20}
+                    size={1.5}
+                    variant="dots"
+                />
+                <Controls
+                    position="bottom-right"
+                    showInteractive={false}
+                    className="!flex !flex-row !gap-1 !p-1 !bg-card/90 !backdrop-blur !border !border-border !rounded-lg !shadow-lg !m-4"
+                />
+            </ReactFlow>
+
+            {/* Legend / Key */}
+            <div className="absolute top-4 left-4 flex gap-3 pointer-events-none">
+                <div className="bg-card/80 backdrop-blur px-3 py-1.5 rounded-lg border border-border text-xs text-muted-foreground">
+                    Interactive Canvas
+                </div>
+                <div className="flex gap-2">
+                    <span className="flex items-center gap-1.5 px-2 py-1 bg-teal-500/10 border border-teal-500/20 rounded-md text-[10px] text-teal-500 uppercase tracking-wide font-medium">
+                        <WrenchScrewdriverIcon className="w-3 h-3" /> Tools
+                    </span>
+                    <span className="flex items-center gap-1.5 px-2 py-1 bg-indigo-500/10 border border-indigo-500/20 rounded-md text-[10px] text-indigo-500 uppercase tracking-wide font-medium">
+                        <CubeIcon className="w-3 h-3" /> Resources
+                    </span>
+                    <span className="flex items-center gap-1.5 px-2 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md text-[10px] text-amber-500 uppercase tracking-wide font-medium">
+                        <DocumentTextIcon className="w-3 h-3" /> Prompts
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default function ToolsCanvasWrapper(props: ToolsCanvasProps) {
+    return (
+        <ReactFlowProvider>
+            <ToolsCanvas {...props} />
+        </ReactFlowProvider>
+    )
+}

package/src/studio/lib/api.ts

@@ -1,7 +1,26 @@
 // NitroStack Studio API Client
 
+import type {
+  JsonValue,
+  ChatMessage,
+  PKCEParams,
+  ClientRegistration,
+} from './types';
+
 const API_BASE = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000';
 
+/**
+ * Client registration metadata for OAuth
+ */
+interface ClientRegistrationMetadata {
+  client_name?: string;
+  redirect_uris: string[];
+  token_endpoint_auth_method?: string;
+  grant_types?: string[];
+  response_types?: string[];
+  [key: string]: JsonValue | undefined;
+}
+
 export class StudioAPI {
   private baseUrl: string;
   private initialized: boolean = false;
@@ -11,7 +30,7 @@ export class StudioAPI {
   }
 
   // Initialize MCP connection (call once on app start)
-  async initialize() {
+  async initialize(): Promise<void> {
     if (this.initialized) return;
     try {
       await fetch(`${this.baseUrl}/api/init`, { method: 'POST' });
@@ -22,111 +41,111 @@ export class StudioAPI {
   }
 
   // Connection
-  async checkConnection() {
+  async checkConnection(): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/health`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Tools
-  async listTools() {
+  async listTools(): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/tools`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
   
-  async getTools() {
+  async getTools(): Promise<JsonValue> {
     return this.listTools();
   }
 
-  async callTool(name: string, args: any, jwtToken?: string, apiKey?: string) {
+  async callTool(name: string, args: JsonValue, jwtToken?: string, apiKey?: string): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/tools/${name}/call`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ args, jwtToken, apiKey }),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Resources
-  async getResources() {
+  async getResources(): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/resources`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
-  async getResource(uri: string) {
+  async getResource(uri: string): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/resources/${encodeURIComponent(uri)}`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Prompts
-  async getPrompts() {
+  async getPrompts(): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/prompts`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
-  async executePrompt(name: string, args: any) {
+  async executePrompt(name: string, args: Record<string, string>): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/prompts/${name}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(args),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Ping
-  async ping() {
+  async ping(): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/ping`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Sampling
-  async sample(params: { prompt: string; maxTokens: number; model?: string }) {
+  async sample(params: { prompt: string; maxTokens: number; model?: string }): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/sampling`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(params),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Roots
-  async getRoots() {
+  async getRoots(): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/roots`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Chat
   async chat(params: {
     provider: string;
-    messages: any[];
+    messages: ChatMessage[];
     apiKey: string; // LLM API key (OpenAI/Gemini)
     jwtToken?: string; // MCP server JWT token
     mcpApiKey?: string; // MCP server API key
-  }) {
+  }): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/chat`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(params),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Auth (OAuth 2.1)
-  async discoverAuth(url: string, type: 'resource' | 'auth-server') {
+  async discoverAuth(url: string, type: 'resource' | 'auth-server'): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/auth/fetch-metadata`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ url, type }),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
-  async registerClient(endpoint: string, metadata: any) {
+  async registerClient(endpoint: string, metadata: ClientRegistrationMetadata): Promise<ClientRegistration> {
     const response = await fetch(`${this.baseUrl}/api/auth/register-client`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ endpoint, metadata }),
     });
-    return response.json();
+    return response.json() as Promise<ClientRegistration>;
   }
 
   async startOAuthFlow(params: {
@@ -135,30 +154,30 @@ export class StudioAPI {
     redirectUri: string;
     scope: string;
     resource: string;
-  }) {
+  }): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/auth/start-flow`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(params),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   async exchangeToken(params: {
     code: string;
-    pkce: any;
+    pkce: PKCEParams;
     tokenEndpoint: string;
     clientId: string;
     clientSecret?: string;
     redirectUri: string;
     resource: string;
-  }) {
+  }): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/auth/exchange-token`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(params),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   async refreshToken(params: {
@@ -167,13 +186,13 @@ export class StudioAPI {
     clientId: string;
     clientSecret?: string;
     resource: string;
-  }) {
+  }): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/auth/refresh-token`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(params),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   async revokeToken(params: {
@@ -181,25 +200,25 @@ export class StudioAPI {
     revocationEndpoint: string;
     clientId: string;
     clientSecret?: string;
-  }) {
+  }): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/auth/revoke-token`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(params),
     });
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Health
-  async getHealth() {
+  async getHealth(): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/health/checks`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 
   // Widget Examples
-  async getWidgetExamples() {
+  async getWidgetExamples(): Promise<JsonValue> {
     const response = await fetch(`${this.baseUrl}/api/widget-examples`);
-    return response.json();
+    return response.json() as Promise<JsonValue>;
   }
 }
 

package/src/studio/lib/http-client-transport.ts

@@ -11,7 +11,7 @@ import { Transport } from '@modelcontextprotocol/sdk/shared/transport.js';
 import { JSONRPCMessage } from '@modelcontextprotocol/sdk/types.js';
 
 // EventSource type that works in both browser and Node.js
-type EventSourceType = typeof EventSource extends { prototype: infer T } ? T : any;
+type EventSourceType = typeof EventSource extends { prototype: infer T } ? T : EventSource;
 
 export interface HttpClientTransportOptions {
   /**
@@ -47,7 +47,7 @@ export class HttpClientTransport implements Transport {
   private closeHandler?: () => void;
   private errorHandler?: (error: Error) => void;
   private isConnected = false;
-  private EventSourceImpl: any;
+  private EventSourceImpl: typeof EventSource;
 
   constructor(options: HttpClientTransportOptions) {
     this.baseUrl = options.baseUrl.replace(/\/$/, ''); // Remove trailing slash