nitrostack 1.0.70 → 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/llm-service.ts

@@ -9,6 +9,11 @@ export interface ChatMessage {
   toolCalls?: ToolCall[];
   toolCallId?: string; // For tool responses - the ID of the call being responded to
   toolName?: string;   // For tool responses - the name of the tool (required by Gemini)
+  file?: {
+    data: string;
+    type: string;
+    name: string;
+  };
 }
 
 export interface ToolCall {
@@ -187,6 +192,53 @@ User: "list all resources"
         };
       }
 
+      if (msg.role === 'user' && msg.file) {
+        // Handle file attachments for OpenAI
+        const contentParts: any[] = [
+          { type: 'text', text: msg.content || ' ' } // Ensure some text exists
+        ];
+
+        if (msg.file.type.startsWith('image/')) {
+          contentParts.push({
+            type: 'image_url',
+            image_url: {
+              url: msg.file.data,
+            }
+          });
+        } else {
+          // For non-image files, append as text if it's a text file, or note unavailable
+          // OpenAI (without Vision/File Search) can't natively handle arbitrary files in chat completions
+          // So we append it as context if it looks like text
+          if (msg.file.type.startsWith('text/') || msg.file.name.endsWith('.txt') || msg.file.name.endsWith('.md') || msg.file.name.endsWith('.json')) {
+            // For text files, we might need to decode base64 if it's base64 encoded
+            // Assuming data is "data:mime;base64,..."
+            try {
+              const base64Content = msg.file.data.split(',')[1];
+              const textContent = Buffer.from(base64Content, 'base64').toString('utf-8');
+              contentParts.push({
+                type: 'text',
+                text: `\n\n[Attached File: ${msg.file.name}]\n${textContent}`
+              });
+            } catch (e) {
+              contentParts.push({
+                type: 'text',
+                text: `\n\n[Attached File: ${msg.file.name}] (Could not decode content)`
+              });
+            }
+          } else {
+            contentParts.push({
+              type: 'text',
+              text: `\n\n[Attached File: ${msg.file.name}] (Type: ${msg.file.type})`
+            });
+          }
+        }
+
+        return {
+          role: msg.role,
+          content: contentParts,
+        };
+      }
+
       return {
         role: msg.role,
         content: msg.content,
@@ -334,9 +386,60 @@ User: "list all resources"
         i++;
       } else {
         // Regular user or assistant message
+        const parts: any[] = [];
+
+        if (msg.content) {
+          parts.push({ text: msg.content });
+        }
+
+        if (msg.role === 'user' && msg.file) {
+          // Extract base64 and mime type
+          const matches = msg.file.data.match(/^data:([^;]+);base64,(.+)$/);
+          if (matches) {
+            const mimeType = matches[1];
+            const data = matches[2];
+
+            // Gemini supports: PDF, image/*, video/*, audio/*
+            const isSupported =
+              mimeType === 'application/pdf' ||
+              mimeType.startsWith('image/') ||
+              mimeType.startsWith('video/') ||
+              mimeType.startsWith('audio/');
+
+            if (isSupported) {
+              parts.push({
+                inlineData: {
+                  mimeType: mimeType,
+                  data: data
+                }
+              });
+            } else {
+              // For unsupported types (DOCX, TXT, JSON, etc.), try to decode and pass as text context
+              // This acts as a "poor man's" file processing for text-based formats
+              try {
+                const textContent = Buffer.from(data, 'base64').toString('utf-8');
+                // Clean up non-printable characters if it's a binary file like DOCX appearing as text
+                // Note: For real DOCX parsing we'd need a library, but for now we pass raw or decoded text
+                // If the user wants to process it with a tool, the *tool* will get the raw base64.
+                // Here we just want to avoid crashing Gemini.
+
+                parts.push({
+                  text: `\n\n[Attached File: ${msg.file.name} (${mimeType})]\n(File content is available to tools via file_content parameter)`
+                });
+              } catch (e) {
+                parts.push({
+                  text: `\n\n[Attached File: ${msg.file.name} (${mimeType})]\n(Content available to tools)`
+                });
+              }
+            }
+          } else {
+            console.warn('Could not parse file data URI:', msg.file.name);
+          }
+        }
+
         contents.push({
           role: msg.role === 'assistant' ? 'model' : 'user',
-          parts: [{ text: msg.content }],
+          parts,
         });
         i++;
       }

package/src/studio/lib/store.ts

@@ -36,8 +36,8 @@ interface StudioState {
   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;
+  currentFile: { data: string; type: string; name: string } | null;
+  setCurrentFile: (file: { data: string; type: string; name: string } | null) => void;
 
   // Auth
   jwtToken: string | null;
@@ -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;
 
@@ -102,8 +105,8 @@ export const useStudioStore = create<StudioState>((set) => ({
   clearChat: () => set({ chatMessages: [] }),
   currentProvider: 'gemini',
   setCurrentProvider: (currentProvider) => set({ currentProvider }),
-  currentImage: null,
-  setCurrentImage: (currentImage) => set({ currentImage }),
+  currentFile: null,
+  setCurrentFile: (currentFile) => set({ currentFile }),
 
   // Auth
   jwtToken: typeof window !== 'undefined' ? localStorage.getItem('mcp_jwt_token') : null,
@@ -130,32 +133,44 @@ export const useStudioStore = create<StudioState>((set) => ({
     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,
+  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,
+      resourceMetadata: null,
+      authServerMetadata: null,
+      clientRegistration: null,
+      selectedScopes: [],
+      currentToken: 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);

package/src/studio/lib/types.ts

@@ -54,7 +54,7 @@ export interface ChatMessage {
   content: string;
   toolCalls?: ToolCall[];
   toolCallId?: string;
-  image?: {
+  file?: {
     data: string;
     type: string;
     name: string;