nitrostack 1.0.71 → 1.0.72

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: any[], 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" as any}
+                />
+                <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/store.ts

@@ -46,6 +46,9 @@ interface StudioState {
   apiKey: string | null;
   setApiKey: (key: string | null) => void;
 
+  elevenLabsApiKey: string | null;
+  setElevenLabsApiKey: (key: string | null) => void;
+
   oauthState: OAuthState;
   setOAuthState: (state: Partial<OAuthState>) => void;
 
@@ -130,6 +133,18 @@ export const useStudioStore = create<StudioState>((set) => ({
     set({ apiKey });
   },
 
+  elevenLabsApiKey: typeof window !== 'undefined' ? localStorage.getItem('mcp_elevenlabs_key') : null,
+  setElevenLabsApiKey: (elevenLabsApiKey) => {
+    if (typeof window !== 'undefined') {
+      if (elevenLabsApiKey) {
+        localStorage.setItem('mcp_elevenlabs_key', elevenLabsApiKey);
+      } else {
+        localStorage.removeItem('mcp_elevenlabs_key');
+      }
+    }
+    set({ elevenLabsApiKey });
+  },
+
   oauthState: typeof window !== 'undefined'
     ? JSON.parse(localStorage.getItem('mcp_oauth_state') || 'null') || {
       authServerUrl: null,