nitrostack 1.0.15 → 1.0.16

package/src/studio/components/Sidebar.tsx

@@ -12,17 +12,22 @@ import {
   Activity, 
   Shield, 
   Wifi,
-  Zap
+  Zap,
+  Settings,
+  Sparkles,
+  Terminal
 } from 'lucide-react';
 
-const navItems: Array<{ id: TabType; label: string; icon: any; path: string }> = [
+const navItems: Array<{ id: TabType | 'settings' | 'logs'; label: string; icon: any; path: string }> = [
   { id: 'tools', label: 'Tools', icon: Wrench, path: '/' },
   { id: 'chat', label: 'AI Chat', icon: MessageSquare, path: '/chat' },
   { id: 'resources', label: 'Resources', icon: Package, path: '/resources' },
   { id: 'prompts', label: 'Prompts', icon: FileText, path: '/prompts' },
   { id: 'health', label: 'Health', icon: Activity, path: '/health' },
+  { id: 'logs', label: 'Logs', icon: Terminal, path: '/logs' },
   { id: 'auth', label: 'OAuth 2.1', icon: Shield, path: '/auth' },
   { id: 'ping', label: 'Ping', icon: Wifi, path: '/ping' },
+  { id: 'settings', label: 'Settings', icon: Settings, path: '/settings' },
 ];
 
 export function Sidebar() {
@@ -30,11 +35,15 @@ export function Sidebar() {
   const router = useRouter();
   const pathname = usePathname();
   const [mounted, setMounted] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   useEffect(() => {
     setMounted(true);
     // Force dark mode
     document.documentElement.className = 'dark antialiased';
+    // Load collapse state from localStorage
+    const saved = localStorage.getItem('sidebar_collapsed');
+    if (saved !== null) setIsCollapsed(saved === 'true');
   }, []);
 
   const handleNavigation = (path: string) => {
@@ -47,53 +56,157 @@ export function Sidebar() {
     return 'disconnected';
   };
 
+  const toggleSidebar = () => {
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    localStorage.setItem('sidebar_collapsed', String(newState));
+    // Dispatch custom event to update layout
+    window.dispatchEvent(new Event('sidebar-toggle'));
+  };
+
   if (!mounted) return null;
 
   return (
-    <nav className="fixed left-0 top-0 h-screen w-64 glass flex flex-col z-50">
-      {/* Header */}
-      <div className="p-6 border-b border-border">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center shadow-lg">
-            <Zap className="w-6 h-6 text-black" />
+    <nav className={`fixed left-0 top-0 h-screen glass flex flex-col z-50 border-r border-border/50 transition-all duration-300 ease-in-out ${
+      isCollapsed ? 'w-16' : 'w-60'
+    }`}>
+      {/* Compact Professional Header */}
+      <div className="relative p-3 border-b border-border/50 bg-gradient-to-b from-card/80 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          {/* Minimalist Professional Logo */}
+          <div 
+            className="flex items-center gap-2 group cursor-pointer flex-1"
+            onClick={() => handleNavigation('/')}
+          >
+            <div className="relative flex-shrink-0">
+              <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-primary to-amber-500 blur opacity-30 group-hover:opacity-50 transition-opacity duration-300" />
+              <div className="relative w-9 h-9 rounded-lg bg-gradient-to-br from-slate-900 to-slate-800 border border-primary/30 flex items-center justify-center shadow-lg group-hover:shadow-primary/30 transition-all duration-300 overflow-hidden">
+                {/* Geometric N logo */}
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="relative z-10">
+                  <path d="M4 16V4L16 16V4" stroke="url(#gradient)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  <defs>
+                    <linearGradient id="gradient" x1="4" y1="4" x2="16" y2="16">
+                      <stop offset="0%" stopColor="#F59E0B" />
+                      <stop offset="100%" stopColor="#F97316" />
+                    </linearGradient>
+                  </defs>
+                </svg>
+                {/* Subtle glow effect */}
+                <div className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-amber-500/20 group-hover:opacity-100 opacity-0 transition-opacity duration-300" />
+              </div>
           </div>
-          <div>
-            <h1 className="text-xl font-bold bg-gradient-to-r from-primary to-amber-500 bg-clip-text text-transparent">
-              NitroStack
+            
+            {!isCollapsed && (
+              <div className="flex-1 overflow-hidden">
+                <h1 className="text-base font-bold bg-gradient-to-r from-primary to-amber-500 bg-clip-text text-transparent tracking-tight whitespace-nowrap">
+                  NitroStudio
             </h1>
-            <p className="text-xs text-muted-foreground font-medium">Studio v3.1</p>
+                <p className="text-[9px] text-muted-foreground font-medium uppercase tracking-wider">
+                  MCP Suite
+                </p>
+              </div>
+            )}
           </div>
+          
+          {/* Toggle Button */}
+          <button
+            onClick={toggleSidebar}
+            className="flex-shrink-0 w-7 h-7 rounded-md bg-muted/50 hover:bg-muted border border-border/50 hover:border-primary/30 flex items-center justify-center transition-all duration-300 group/toggle"
+            title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            <svg 
+              width="14" 
+              height="14" 
+              viewBox="0 0 24 24" 
+              fill="none" 
+              className={`text-muted-foreground group-hover/toggle:text-primary transition-all duration-300 ${
+                isCollapsed ? 'rotate-180' : ''
+              }`}
+            >
+              <path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
         </div>
 
+        {/* Compact Status Indicators */}
+        {!isCollapsed ? (
+          <div className="space-y-1.5">
         {/* Connection Status */}
-        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50 border border-border/50">
-          <div className="relative flex items-center justify-center">
+            <div className="relative group">
+              <div className="relative flex items-center gap-2 px-2 py-1.5 rounded-md bg-card/60 border border-border/50 backdrop-blur-sm group-hover:border-primary/30 transition-all duration-300">
+                <div className="relative flex items-center justify-center flex-shrink-0">
+                  {getConnectionStatus() === 'connected' && (
+                    <div className="absolute inset-0 rounded-full bg-emerald-500/30 animate-ping" />
+                  )}
             <div 
-              className={`w-2.5 h-2.5 rounded-full ${
+                    className={`relative w-2 h-2 rounded-full transition-all duration-300 ${
                 getConnectionStatus() === 'connected' 
                   ? 'bg-emerald-500' 
                   : getConnectionStatus() === 'connecting'
-                  ? 'bg-amber-500'
+                        ? 'bg-amber-500 animate-pulse'
                   : 'bg-rose-500'
               }`}
               style={{
                 boxShadow: getConnectionStatus() === 'connected'
-                  ? '0 0 12px rgba(34, 197, 94, 0.6)'
+                        ? '0 0 8px rgba(34, 197, 94, 0.6)'
                   : getConnectionStatus() === 'connecting'
-                  ? '0 0 12px rgba(245, 158, 11, 0.6)'
-                  : '0 0 12px rgba(239, 68, 68, 0.6)'
+                        ? '0 0 8px rgba(245, 158, 11, 0.6)'
+                        : '0 0 8px rgba(239, 68, 68, 0.6)'
               }}
             />
           </div>
-          <span className="text-xs font-semibold uppercase tracking-wide text-foreground">
+                <span className="text-[10px] font-semibold uppercase tracking-wide text-foreground">
             {connection.status}
           </span>
         </div>
       </div>
 
-      {/* Navigation */}
-      <div className="flex-1 overflow-y-auto py-4 px-2">
-        <div className="space-y-1">
+            {/* Transport Mode */}
+            <div className="relative group">
+              <div className="relative px-2 py-1.5 rounded-md bg-primary/5 border border-primary/20 backdrop-blur-sm group-hover:border-primary/30 transition-all duration-300">
+                <div className="flex items-center justify-between text-[10px]">
+                  <span className="font-medium text-muted-foreground">Transport:</span>
+                  <span className="font-bold text-primary uppercase">
+                    {typeof localStorage !== 'undefined' ? localStorage.getItem('mcp_transport') || 'STDIO' : 'STDIO'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-1.5">
+            {/* Collapsed: Just the status dot */}
+            <div 
+              className="relative w-7 h-7 rounded-md bg-card/60 border border-border/50 flex items-center justify-center group hover:border-primary/30 transition-all"
+              title={`Status: ${connection.status}`}
+            >
+              {getConnectionStatus() === 'connected' && (
+                <div className="absolute inset-0 rounded-md bg-emerald-500/20 animate-ping" />
+              )}
+              <div 
+                className={`relative w-2 h-2 rounded-full ${
+                  getConnectionStatus() === 'connected' 
+                    ? 'bg-emerald-500' 
+                    : getConnectionStatus() === 'connecting'
+                    ? 'bg-amber-500 animate-pulse'
+                    : 'bg-rose-500'
+                }`}
+                style={{
+                  boxShadow: getConnectionStatus() === 'connected'
+                    ? '0 0 8px rgba(34, 197, 94, 0.8)'
+                    : getConnectionStatus() === 'connecting'
+                    ? '0 0 8px rgba(245, 158, 11, 0.8)'
+                    : '0 0 8px rgba(239, 68, 68, 0.8)'
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Compact Navigation */}
+      <div className="flex-1 overflow-y-auto py-2 px-2 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+        <div className={`space-y-0.5 ${isCollapsed ? 'flex flex-col items-center' : ''}`}>
           {navItems.map((item) => {
             const Icon = item.icon;
             const isActive = pathname === item.path;
@@ -102,31 +215,80 @@ export function Sidebar() {
               <button
                 key={item.id}
                 onClick={() => handleNavigation(item.path)}
+                title={isCollapsed ? item.label : undefined}
                 className={`
-                  w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg transition-all group
+                  relative flex items-center gap-2 text-sm font-medium rounded-lg transition-all duration-300 group overflow-hidden
+                  ${isCollapsed ? 'w-10 h-10 justify-center' : 'w-full px-3 py-2'}
                   ${isActive 
-                    ? 'bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20' 
-                    : 'text-foreground hover:bg-muted hover:text-primary'
+                    ? 'bg-gradient-to-r from-primary/15 to-amber-500/10 text-primary shadow-md ring-1 ring-primary/30' 
+                    : 'text-foreground/70 hover:bg-primary/5 hover:text-primary'
                   }
                 `}
               >
-                <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : 'text-muted-foreground group-hover:text-primary'}`} />
-                <span>{item.label}</span>
+                {/* Active indicator */}
+                {isActive && !isCollapsed && (
+                  <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-6 bg-gradient-to-b from-primary to-amber-500 rounded-r-full" />
+                )}
+                
+                {/* Icon */}
+                <div className={`relative flex-shrink-0 ${isActive ? 'scale-105' : 'group-hover:scale-105'} transition-transform duration-300`}>
+                  <Icon 
+                    className={`w-4 h-4 ${
+                      isActive 
+                        ? 'text-primary' 
+                        : 'text-muted-foreground group-hover:text-primary'
+                    }`}
+                    strokeWidth={isActive ? 2.5 : 2}
+                  />
+                </div>
+                
+                {/* Label - only show when expanded */}
+                {!isCollapsed && (
+                  <span className="text-xs whitespace-nowrap overflow-hidden">
+                    {item.label}
+                  </span>
+                )}
+                
+                {/* Subtle shine effect */}
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out pointer-events-none" />
               </button>
             );
           })}
         </div>
       </div>
 
-      {/* Footer */}
-      <div className="p-4 border-t border-border bg-card/50 backdrop-blur">
-        {/* Version */}
-        <div className="px-4 py-2 text-xs text-muted-foreground">
-          <div className="flex items-center justify-between">
-            <span>MCP Protocol</span>
-            <span className="font-mono font-semibold text-primary">v1.0</span>
+      {/* Compact Footer */}
+      <div className="p-2 border-t border-border/50 bg-gradient-to-t from-card/60 to-transparent backdrop-blur-sm">
+        {!isCollapsed ? (
+          <div className="space-y-1.5">
+            {/* Version info */}
+            <div className="px-2 py-1.5 rounded-md bg-muted/30 border border-border/30">
+              <div className="flex items-center justify-between text-[9px]">
+                <span className="font-medium text-muted-foreground uppercase tracking-wide">MCP v1.0</span>
+                <span className="font-bold text-foreground">NitroStack</span>
+              </div>
+            </div>
+            
+            {/* Copyright */}
+            <div className="text-center">
+              <p className="text-[8px] text-muted-foreground/50 font-medium">
+                © 2025 NitroStudio
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center">
+            {/* Collapsed: Minimal version indicator */}
+            <div 
+              className="w-10 h-10 rounded-md bg-muted/30 border border-border/30 flex items-center justify-center group hover:border-primary/30 transition-all"
+              title="MCP v1.0 • NitroStack"
+            >
+              <span className="text-[9px] font-bold text-primary group-hover:scale-110 transition-transform">
+                v1
+              </span>
           </div>
         </div>
+        )}
       </div>
     </nav>
   );

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

@@ -0,0 +1,222 @@
+/**
+ * HTTP Client Transport for MCP
+ * 
+ * Implements HTTP-based communication with MCP servers using SSE for server-to-client messages
+ * and POST for client-to-server messages.
+ * 
+ * Note: This uses EventSource which is browser-only. For server-side usage, you need eventsource polyfill.
+ */
+
+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;
+
+export interface HttpClientTransportOptions {
+  /**
+   * Base URL of the MCP server (e.g., http://localhost:3000)
+   */
+  baseUrl: string;
+  
+  /**
+   * Base path for MCP endpoints (default: '/mcp')
+   */
+  basePath?: string;
+  
+  /**
+   * Optional headers to include in requests (e.g., Authorization)
+   */
+  headers?: Record<string, string>;
+}
+
+/**
+ * HTTP Client Transport
+ * 
+ * Connects to an MCP server over HTTP using:
+ * - SSE (Server-Sent Events) for receiving messages from server
+ * - HTTP POST for sending messages to server
+ */
+export class HttpClientTransport implements Transport {
+  private baseUrl: string;
+  private basePath: string;
+  private headers: Record<string, string>;
+  private eventSource: EventSourceType | null = null;
+  private clientId: string;
+  private messageHandler?: (message: JSONRPCMessage) => Promise<void>;
+  private closeHandler?: () => void;
+  private errorHandler?: (error: Error) => void;
+  private isConnected = false;
+  private EventSourceImpl: any;
+
+  constructor(options: HttpClientTransportOptions) {
+    this.baseUrl = options.baseUrl.replace(/\/$/, ''); // Remove trailing slash
+    this.basePath = options.basePath || '/mcp';
+    this.headers = options.headers || {};
+    this.clientId = `client_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    
+    // Use native EventSource in browser, require polyfill in Node.js
+    if (typeof EventSource !== 'undefined') {
+      this.EventSourceImpl = EventSource;
+    } else {
+      // In Node.js environment, try to load eventsource package
+      try {
+        this.EventSourceImpl = require('eventsource');
+      } catch (e) {
+        throw new Error(
+          'EventSource is not available. In Node.js, install "eventsource" package: npm install eventsource'
+        );
+      }
+    }
+  }
+
+  /**
+   * Start the transport by connecting to SSE endpoint
+   */
+  async start(): Promise<void> {
+    if (this.isConnected) {
+      console.warn('⚠️  HTTP transport already connected');
+      return;
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        const sseUrl = `${this.baseUrl}${this.basePath}/sse?clientId=${this.clientId}`;
+        console.log('🔌 Connecting to SSE endpoint:', sseUrl);
+
+        // Create EventSource for receiving server messages
+        this.eventSource = new this.EventSourceImpl(sseUrl) as EventSourceType;
+
+        this.eventSource.onopen = () => {
+          console.log('✅ SSE connection established');
+          this.isConnected = true;
+          resolve();
+        };
+
+        this.eventSource.onmessage = (event) => {
+          try {
+            const message = JSON.parse(event.data) as JSONRPCMessage;
+            console.log('📨 Received message from server:', message);
+            
+            if (this.messageHandler) {
+              this.messageHandler(message).catch((error) => {
+                console.error('Error handling message:', error);
+                if (this.errorHandler) {
+                  this.errorHandler(error);
+                }
+              });
+            }
+          } catch (error) {
+            console.error('Failed to parse SSE message:', error);
+            if (this.errorHandler) {
+              this.errorHandler(error as Error);
+            }
+          }
+        };
+
+        this.eventSource.onerror = (error) => {
+          console.error('❌ SSE connection error:', error);
+          this.isConnected = false;
+          
+          if (this.errorHandler) {
+            this.errorHandler(new Error('SSE connection failed'));
+          }
+          
+          if (!this.isConnected) {
+            // Connection failed during initial setup
+            reject(new Error('Failed to establish SSE connection'));
+          }
+        };
+
+        // Set a timeout for connection establishment
+        setTimeout(() => {
+          if (!this.isConnected) {
+            this.eventSource?.close();
+            reject(new Error('SSE connection timeout'));
+          }
+        }, 10000); // 10 second timeout
+
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  /**
+   * Send a message to the server
+   */
+  async send(message: JSONRPCMessage): Promise<void> {
+    if (!this.isConnected) {
+      throw new Error('HTTP transport not connected');
+    }
+
+    try {
+      const url = `${this.baseUrl}${this.basePath}/message`;
+      console.log('📤 Sending message to server:', message);
+
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...this.headers,
+        },
+        body: JSON.stringify({
+          clientId: this.clientId,
+          message,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`HTTP ${response.status}: ${errorText}`);
+      }
+
+      console.log('✅ Message sent successfully');
+    } catch (error) {
+      console.error('Failed to send message:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Close the transport
+   */
+  async close(): Promise<void> {
+    console.log('🛑 Closing HTTP transport...');
+    
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
+    }
+    
+    this.isConnected = false;
+    
+    if (this.closeHandler) {
+      this.closeHandler();
+    }
+    
+    console.log('✅ HTTP transport closed');
+  }
+
+  /**
+   * Set handler for incoming messages
+   */
+  onmessage = (handler: (message: JSONRPCMessage) => Promise<void>): void => {
+    this.messageHandler = handler;
+  };
+
+  /**
+   * Set handler for connection close
+   */
+  onclose = (handler: () => void): void => {
+    this.closeHandler = handler;
+  };
+
+  /**
+   * Set handler for errors
+   */
+  onerror = (handler: (error: Error) => void): void => {
+    this.errorHandler = handler;
+  };
+}
+

package/src/studio/lib/llm-service.ts

@@ -24,12 +24,109 @@ export interface ChatResponse {
 }
 
 export class LLMService {
+  // System prompt to improve tool usage (especially for Gemini)
+  private getSystemPrompt(tools: any[]): string {
+    return `You are an intelligent AI assistant with access to ${tools.length} powerful tools. Your goal is to help users accomplish their tasks efficiently and intelligently.
+
+**CORE PRINCIPLES FOR TOOL USAGE:**
+
+1. **Be Proactive & Infer Context**: 
+   - Infer obvious information instead of asking (e.g., "Bangalore" → Karnataka, India; "New York" → NY, USA)
+   - Use common sense defaults when reasonable
+   - Don't ask for information you can deduce from context
+
+2. **Chain Tools Intelligently**: 
+   - Use multiple tools in sequence to accomplish complex tasks
+   - If a task requires multiple steps, execute them automatically
+   - Example: login → fetch data → process → display results
+   - Don't ask permission for each step in an obvious workflow
+
+3. **Maintain Context Awareness**: 
+   - Remember information from previous tool calls in THIS conversation
+   - Extract and reuse data (IDs, names, values) from previous tool results
+   - Example: If browse_products returned products with IDs, use those IDs for add_to_cart
+   - Match user requests to previous data (e.g., "apple" → find product with name "Apple" → use its ID)
+   - Track state across the conversation (logged in status, product IDs, order IDs, etc.)
+   - NEVER ask for information you already have from a previous tool call
+
+4. **Use Smart Defaults**: 
+   - Apply sensible default values when parameters are optional
+   - Common defaults: page=1, limit=10, sort=recent, etc.
+   - Only ask for clarification when truly ambiguous
+
+5. **Minimize User Friction**: 
+   - Don't ask for every detail - use inference and defaults
+   - Chain related operations seamlessly
+   - Provide concise summaries after multi-step operations
+   - Be conversational but efficient
+
+6. **Handle Errors Gracefully**:
+   - If authentication required, guide user to login
+   - If prerequisite missing, suggest the required step
+   - If operation fails, explain why and suggest alternatives
+   - Always provide a helpful next step
+
+7. **Tool Call Best Practices**:
+   - Read tool descriptions carefully to understand their purpose
+   - Use exact parameter names as specified in the schema
+   - Pay attention to required vs optional parameters
+   - If a tool says "Requires authentication" - CALL IT ANYWAY! Auth is handled automatically
+   - Don't ask for credentials preemptively - only if a tool explicitly fails
+   - Look for examples in tool schemas for guidance
+
+**AUTHENTICATION HANDLING:**
+
+- Authentication tokens are AUTOMATICALLY handled in the background
+- If a tool says "Requires authentication", you can STILL call it directly - auth is transparent
+- NEVER ask users for credentials unless a tool explicitly fails with an auth error
+- If you get an auth error, THEN suggest the user login using the login tool
+- Once a user logs in (or if already logged in), the session persists automatically
+- You don't need to check if user is authenticated - just call the tool and let the system handle it
+
+**EXAMPLES:**
+
+**Authentication:**
+User: "whoami" → Call whoami tool directly (don't ask for login)
+User: "show my orders" → Call get_order_history directly (don't ask for login)
+User: "what's in my cart" → Call view_cart directly (don't ask for login)
+
+**Context Awareness:**
+1. browse_products returns: [{id: "prod-3", name: "Apple", price: 0.99}, ...]
+2. User: "add apple to cart" → Extract ID "prod-3" from previous result → Call add_to_cart({product_id: "prod-3", quantity: 1})
+3. User: "add 2 more" → Remember prod-3 → Call add_to_cart({product_id: "prod-3", quantity: 2})
+
+**NEVER do this:**
+❌ User: "add apple to cart" → "What is the product ID?" (You already have it!)
+❌ User: "add to cart" → "Which product?" (Look at conversation context!)
+
+Only if tool returns auth error → THEN suggest: "Please login with your credentials"
+
+**REMEMBER:** 
+
+- You have access to real, functional tools - use them!
+- Call tools directly - don't ask for permission or credentials first
+- Your goal is to be helpful, efficient, and reduce user friction
+- Think through multi-step workflows and execute them seamlessly
+- Use your intelligence to fill gaps rather than always asking questions`;
+  }
+
   async chat(
     provider: LLMProvider,
     messages: ChatMessage[],
     tools: any[],
     apiKey: string
   ): Promise<ChatResponse> {
+    // Inject system prompt at the beginning if not already present
+    if (messages.length > 0 && messages[0].role !== 'system') {
+      messages = [
+        {
+          role: 'system',
+          content: this.getSystemPrompt(tools),
+        },
+        ...messages,
+      ];
+    }
+    
     if (provider === 'openai') {
       return this.chatOpenAI(messages, tools, apiKey);
     } else if (provider === 'gemini') {