fix ts and add warning if using app tools on official web

Author: Roy3838

app/src/components/AgentCard/AgentCard.tsx

@@ -53,12 +53,13 @@ interface AgentCardProps {
   onSave: (agent: CompleteAgent, code: string) => Promise<void>;
   isProUser?: boolean;
   onAIEdit?: (agentId: string) => void;
+  hostingContext?: 'official-web' | 'self-hosted' | 'tauri';
 }
 
 
 const AgentCard: React.FC<AgentCardProps> = ({
   agent, code, isRunning, isStarting, isMemoryFlashing, onEdit, onDelete, onToggle,
-  onMemory, onActivity, onShowJupyterModal, hasQuotaError, onUpgradeClick, onSave, isProUser = false, onAIEdit
+  onMemory, onActivity, onShowJupyterModal, hasQuotaError, onUpgradeClick, onSave, isProUser = false, onAIEdit, hostingContext
 }) => {
   const [isPythonAgent, setIsPythonAgent] = useState(false);
   const [startWarning, setStartWarning] = useState<string | null>(null);
@@ -246,6 +247,7 @@ const AgentCard: React.FC<AgentCardProps> = ({
               onModelChange={setCurrentModel}
               startWarning={startWarning}
               isProUser={isProUser}
+              hostingContext={hostingContext}
               // REMOVED: communicationWarnings prop is gone
             />
           )}

app/src/components/AgentCard/StaticAgentView.tsx

@@ -12,12 +12,12 @@ import { detectAgentCapabilities } from './agentCapabilities';
 
 // --- GENERIC HELPER COMPONENTS ---
 
-const InfoTag: React.FC<{ icon: React.ElementType; label: string; warning?: string }> = ({ icon: Icon, label, warning }) => (
+const InfoTag: React.FC<{ icon: React.ElementType; label: string; warning?: string; isBlocking?: boolean }> = ({ icon: Icon, label, warning, isBlocking }) => (
     <div className="relative group">
         <div className="inline-flex items-center gap-1.5 bg-gray-100 text-gray-700 px-2 py-1 rounded-md text-xs font-medium cursor-default">
             <Icon className="w-3.5 h-3.5" />
             <span>{label}</span>
-            {warning && <AlertTriangle className="w-3.5 h-3.5 ml-1 text-orange-500" />}
+            {warning && <AlertTriangle className={`w-3.5 h-3.5 ml-1 ${isBlocking ? 'text-red-500' : 'text-orange-500'}`} />}
         </div>
         {warning && (
             <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-xs p-2 bg-gray-800 text-white text-xs rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
@@ -151,6 +151,7 @@ interface StaticAgentViewProps {
     onModelChange: (modelName: string) => void;
     startWarning: string | null;
     isProUser?: boolean;
+    hostingContext?: 'official-web' | 'self-hosted' | 'tauri';
 }
 
 
@@ -162,14 +163,15 @@ const StaticAgentView: React.FC<StaticAgentViewProps> = ({
     onModelChange,
     startWarning,
     isProUser = false,
+    hostingContext,
 }) => {
     const [detectedSensors, setDetectedSensors] = useState<any[]>([]);
     const [detectedTools, setDetectedTools] = useState<any[]>([]);
 
     useEffect(() => {
         const loadCapabilities = async () => {
             try {
-                const capabilities = await detectAgentCapabilities(agent.system_prompt || '', code || '');
+                const capabilities = await detectAgentCapabilities(agent.system_prompt || '', code || '', hostingContext);
                 setDetectedSensors(capabilities.sensors);
                 setDetectedTools(capabilities.tools);
             } catch (error) {
@@ -180,7 +182,7 @@ const StaticAgentView: React.FC<StaticAgentViewProps> = ({
         };
 
         loadCapabilities();
-    }, [agent.system_prompt, code]);
+    }, [agent.system_prompt, code, hostingContext]);
 
     return (
         <div className="space-y-4 animate-fade-in">
@@ -220,6 +222,7 @@ const StaticAgentView: React.FC<StaticAgentViewProps> = ({
                                 icon={tool.icon}
                                 label={tool.label}
                                 warning={tool.warning}
+                                isBlocking={tool.isBlocking}
                             />
                         ))}
                     </div>

app/src/components/AgentCard/agentCapabilities.tsx

@@ -14,6 +14,7 @@ export interface DetectedTool {
     label: string;
     icon: React.ElementType;
     warning?: string;
+    isBlocking?: boolean;
 }
 
 export interface AgentCapabilities {
@@ -133,17 +134,30 @@ export async function detectAgentSensors(systemPrompt: string): Promise<Detected
 /**
  * Detects which tools an agent uses based on its code
  */
-export async function detectAgentTools(code: string): Promise<DetectedTool[]> {
+export async function detectAgentTools(code: string, hostingContext?: 'official-web' | 'self-hosted' | 'tauri'): Promise<DetectedTool[]> {
     const foundTools: DetectedTool[] = [];
 
+    // Tools that don't work in official web environment
+    const webIncompatibleTools = ['overlay', 'message', 'ask', 'system_notify'];
+
     for (const [key, tool] of Object.entries(TOOL_CONFIG)) {
         if (code.match(tool.regex)) {
             const icon = await loadToolIcon(key);
+            let warning = tool.warning;
+
+            // Add web incompatibility warning if in official web context
+            let isBlocking = false;
+            if (hostingContext === 'official-web' && webIncompatibleTools.includes(key)) {
+                warning = 'These tools are only available when using the Observer App';
+                isBlocking = true;
+            }
+
             foundTools.push({
                 key,
                 label: tool.label,
                 icon,
-                warning: tool.warning
+                warning,
+                isBlocking
             });
         }
     }
@@ -154,10 +168,10 @@ export async function detectAgentTools(code: string): Promise<DetectedTool[]> {
 /**
  * Detects all capabilities of an agent (sensors + tools)
  */
-export async function detectAgentCapabilities(systemPrompt: string, code: string): Promise<AgentCapabilities> {
+export async function detectAgentCapabilities(systemPrompt: string, code: string, hostingContext?: 'official-web' | 'self-hosted' | 'tauri'): Promise<AgentCapabilities> {
     const [sensors, tools] = await Promise.all([
         detectAgentSensors(systemPrompt),
-        detectAgentTools(code)
+        detectAgentTools(code, hostingContext)
     ]);
 
     return {

app/src/web/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { Terminal, Server } from 'lucide-react';
+import { Terminal } from 'lucide-react';
 import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import {
@@ -629,6 +629,7 @@ function AppContent() {
                       onSave={handleSaveAgent}
                       isProUser={isProUser}
                       onAIEdit={handleAIEditClick}
+                      hostingContext={hostingContext}
                     />
                   </div>
                 );