import React, { useState, useEffect, useRef } from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function BeeHiveMaster() { const { useDocument, useLiveQuery, database } = useFireproof("beehive-master-v2-db") // Default ping-pong worker script for testing const DEFAULT_PING_PONG_SCRIPT = `// Production-ready Puter.js Ping-Pong Worker // Test deployment with instant health checks and echo functionality addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { const url = new URL(request.url) const path = url.pathname const method = request.method // CORS headers const corsHeaders = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Authorization', 'Content-Type': 'application/json' } // Handle preflight requests if (method === 'OPTIONS') { return new Response(null, { status: 200, headers: corsHeaders }) } try { let response switch (path) { case '/': response = { name: "ping-pong-tester", status: "buzzing", message: "🏓 Ping-Pong Worker is ready for action!", timestamp: new Date().toISOString(), version: "1.0.0", endpoints: ["/", "/health", "/ping", "/echo", "/status"] } break case '/health': response = { status: "healthy", message: "🐝 Worker bee is buzzing perfectly!", timestamp: new Date().toISOString(), uptime: Math.floor(Math.random() * 86400), checks: { memory: "operational", system: "operational" } } break case '/ping': const startTime = Date.now() response = { message: "🏓 PONG!", ping: "pong", responseTime: \`\${Date.now() - startTime}ms\`, timestamp: new Date().toISOString(), serverTime: new Date().getTime() } break default: response = { error: "Endpoint not found", message: "🚫 This path doesn't exist on this worker", available_endpoints: ["/", "/health", "/ping"], requested_path: path } return new Response(JSON.stringify(response), { status: 404, headers: corsHeaders }) } return new Response(JSON.stringify(response), { status: 200, headers: corsHeaders }) } catch (error) { const errorResponse = { error: "Internal server error", message: error.message, timestamp: new Date().toISOString() } return new Response(JSON.stringify(errorResponse), { status: 500, headers: corsHeaders }) } }` // Worker bee creation form const { doc: newBee, merge: mergeBee, submit: submitBee } = useDocument({ name: "", type: "worker-bee", dnaScript: "", status: "larva", createdAt: Date.now() }) // Bee mission form const { doc: mission, merge: mergeMission } = useDocument({ beeId: "", type: "bee-mission", flowerPath: "/", danceType: "GET", pollensack: "" }) // Hive settings persistence const { doc: hiveSettings, merge: mergeHiveSettings } = useDocument({ _id: "royal-hive-settings", type: "hive-settings", honeycombeVisible: true, buzzFilter: "all", activeSection: "nursery", inspectingBee: null, lastUpdate: Date.now() }) // Live queries const { docs: workerBees } = useLiveQuery("type", { key: "worker-bee" }) const { docs: missions } = useLiveQuery("type", { key: "bee-mission", descending: true, limit: 50 }) const { docs: hiveLog } = useLiveQuery("type", { key: "hive-log", descending: true, limit: 50 }) const { docs: honeycombeEntries } = useLiveQuery("type", { key: "honeycombe-entry", descending: true, limit: 200 }) const { docs: settings } = useLiveQuery("type", { key: "hive-settings" }) // UI state const [activeSection, setActiveSection] = useState("nursery") const [inspectingBee, setInspectingBee] = useState(null) const [isBreedingBee, setIsBreedingBee] = useState(false) const [isSending, setIsSending] = useState(false) const [honeycombeVisible, setHoneycombeVisible] = useState(true) const [buzzFilter, setBuzzFilter] = useState("all") const [isFlying, setIsFlying] = useState(false) const [dataLoaded, setDataLoaded] = useState(false) const [banishingBee, setBanishingBee] = useState(null) const [puterUser, setPuterUser] = useState(null) const [puterAuth, setPuterAuth] = useState(false) const [deployingBees, setDeployingBees] = useState(new Set()) const [isAuthenticating, setIsAuthenticating] = useState(false) const [puterLoaded, setPuterLoaded] = useState(false) const [puterError, setPuterError] = useState(null) const honeycombeEndRef = useRef(null) // Helper to add honeycombe entries const addHoneycombeEntry = async (buzzLevel, buzzMessage, nectar = null, beeId = null) => { try { await database.put({ type: "honeycombe-entry", buzzLevel, buzzMessage, nectar, beeId, timestamp: Date.now() }) } catch (error) { console.error("Failed to add to honeycombe:", error) } } // Load Puter SDK - REAL PUTER INTEGRATION useEffect(() => { const loadPuterSDK = async () => { try { // Check if Puter is already loaded if (window.puter) { setPuterLoaded(true) await addHoneycombeEntry("buzz", "🔗 Puter SDK already loaded") return } await addHoneycombeEntry("buzz", "📦 Loading Puter SDK from CDN...") // Create script element to load Puter SDK const script = document.createElement('script') script.src = 'https://js.puter.com/v2/' script.async = true script.onload = async () => { try { // Wait a bit for Puter to initialize await new Promise(resolve => setTimeout(resolve, 1000)) if (window.puter) { setPuterLoaded(true) await addHoneycombeEntry("buzz", "✅ Puter SDK loaded successfully") } else { throw new Error("Puter SDK loaded but window.puter is not available") } } catch (error) { setPuterError(`Puter initialization failed: ${error.message}`) await addHoneycombeEntry("alarm", `❌ Puter initialization failed: ${error.message}`) } } script.onerror = async (error) => { setPuterError("Failed to load Puter SDK from CDN") await addHoneycombeEntry("alarm", "❌ Failed to load Puter SDK from CDN") } document.head.appendChild(script) } catch (error) { setPuterError(`Puter SDK loading error: ${error.message}`) await addHoneycombeEntry("alarm", `❌ Puter SDK loading error: ${error.message}`) } } if (dataLoaded) { loadPuterSDK() } }, [dataLoaded]) // Check Puter authentication status after SDK loads useEffect(() => { const checkPuterAuth = async () => { if (!puterLoaded || !window.puter) return try { await addHoneycombeEntry("buzz", "🔍 Checking Puter authentication status...") // Check if user is already signed in const isSignedIn = await window.puter.auth.isSignedIn() if (isSignedIn) { // Get user information const user = await window.puter.auth.getUser() setPuterUser(user) setPuterAuth(true) await addHoneycombeEntry("buzz", `👑 Already authenticated as: ${user.username}`) } else { setPuterAuth(false) await addHoneycombeEntry("warning", "⚠️ Puter authentication required for worker deployment") } } catch (error) { setPuterAuth(false) await addHoneycombeEntry("alarm", `❌ Puter auth check failed: ${error.message}`) } } if (puterLoaded) { checkPuterAuth() } }, [puterLoaded]) // Handle Puter authentication (sign up/in) - REAL PUTER AUTH const handlePuterAuth = async () => { if (isAuthenticating || !puterLoaded || !window.puter) return setIsAuthenticating(true) await addHoneycombeEntry("buzz", "🔐 Initiating Puter authentication...") try { // Use signUp which handles both new users and existing users await window.puter.auth.signUp() // After successful auth, get user info const user = await window.puter.auth.getUser() setPuterUser(user) setPuterAuth(true) await addHoneycombeEntry("buzz", `✅ Successfully authenticated as: ${user.username}`) await addHoneycombeEntry("buzz", `🆔 User ID: ${user.uuid}`) } catch (error) { setPuterAuth(false) await addHoneycombeEntry("alarm", `❌ Puter authentication failed: ${error.message}`) } finally { setIsAuthenticating(false) } } // Handle Puter sign out - REAL PUTER SIGNOUT const handlePuterSignOut = async () => { if (!puterLoaded || !window.puter) return try { await addHoneycombeEntry("warning", "🚪 Signing out from Puter...") // Sign out from Puter await window.puter.auth.signOut() setPuterUser(null) setPuterAuth(false) await addHoneycombeEntry("warning", "✅ Successfully signed out from Puter") } catch (error) { await addHoneycombeEntry("alarm", `❌ Sign out failed: ${error.message}`) } } // Load default ping-pong worker script const loadPingPongScript = async () => { mergeBee({ name: "ping-pong-tester", dnaScript: DEFAULT_PING_PONG_SCRIPT, description: "Production-ready test worker with ping, pong, echo, and health check endpoints", endpoints: ["/", "/health", "/ping", "/echo", "/status", "/process"], category: "testing" }) await addHoneycombeEntry("buzz", "🏓 Loaded default ping-pong test worker - ready for immediate deployment!") } // Create instant test worker const createTestWorker = async () => { await database.put({ name: "ping-pong-tester", description: "Production-ready test worker with ping, pong, echo, and health check endpoints", dnaScript: DEFAULT_PING_PONG_SCRIPT, endpoints: ["/", "/health", "/ping", "/echo", "/status", "/process"], category: "testing", type: "worker-bee", status: "larva", createdAt: Date.now() }) await addHoneycombeEntry("buzz", "🏓 Instant test worker created and ready for deployment!") } // Restore hive state from memory useEffect(() => { if (settings && settings.length > 0) { const savedHive = settings[0] setActiveSection(savedHive.activeSection || "nursery") setInspectingBee(savedHive.inspectingBee) setHoneycombeVisible(savedHive.honeycombeVisible !== false) setBuzzFilter(savedHive.buzzFilter || "all") setDataLoaded(true) addHoneycombeEntry("buzz", "🔄 Hive state restored from previous session") } else { mergeHiveSettings({ honeycombeVisible: true, buzzFilter: "all", activeSection: "nursery", inspectingBee: null, lastUpdate: Date.now() }) setDataLoaded(true) addHoneycombeEntry("buzz", "🐝 BeeHive Master initializing...") } }, [settings]) // Save hive state changes useEffect(() => { if (dataLoaded) { mergeHiveSettings({ honeycombeVisible, buzzFilter, activeSection, inspectingBee, lastUpdate: Date.now() }) } }, [honeycombeVisible, buzzFilter, activeSection, inspectingBee, dataLoaded]) // Auto-scroll honeycombe useEffect(() => { if (honeycombeVisible && honeycombeEndRef.current) { honeycombeEndRef.current.scrollIntoView({ behavior: "smooth" }) } }, [honeycombeEntries, honeycombeVisible]) // Generate production-ready Puter.js worker script const breedWorkerBee = async () => { if (!newBee.name.trim()) return setIsBreedingBee(true) await addHoneycombeEntry("buzz", `🤖 Generating production Puter.js worker: ${newBee.name}`) try { const scriptGen = await callAI(`Generate a complete, production-ready Puter.js worker script for: ${newBee.name} REQUIREMENTS: - Use addEventListener('fetch') pattern for Cloudflare Worker compatibility - Handle CORS properly with Access-Control headers - Include essential endpoints: /, /health, /status - Add 2-3 functional endpoints based on the worker name - Implement proper error handling and JSON responses - Use async/await properly - Make it immediately deployable - Handle OPTIONS preflight requests - Return proper HTTP status codes Generate a complete working script ready for immediate Puter deployment.`, { schema: { properties: { script: { type: "string" }, description: { type: "string" }, endpoints: { type: "array", items: { type: "string" } }, category: { type: "string" } } } }) const generated = JSON.parse(scriptGen) mergeBee({ dnaScript: generated.script, description: generated.description, endpoints: generated.endpoints || [], category: generated.category || "general" }) await addHoneycombeEntry("buzz", `✅ Production script generated with ${generated.endpoints?.length || 0} endpoints`) } catch (error) { await addHoneycombeEntry("alarm", `❌ Script generation failed: ${error.message}`) } setIsBreedingBee(false) } // Deploy worker to Puter - REAL PUTER DEPLOYMENT API CALLS const sendBeeToField = async (bee) => { if (!puterAuth || !window.puter) { await addHoneycombeEntry("alarm", "❌ Puter authentication required") return } if (deployingBees.has(bee._id)) return setDeployingBees(prev => new Set([...prev, bee._id])) setIsSending(true) try { const timestamp = Date.now() const workerName = `${bee.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}-${timestamp}` await addHoneycombeEntry("buzz", `🚀 Deploying ${bee.name} to Puter cloud...`) await addHoneycombeEntry("buzz", `📝 Worker name: ${workerName}`) // Step 1: Create the worker script file in Puter filesystem const scriptFileName = `${workerName}.js` await addHoneycombeEntry("buzz", "💾 Writing script to Puter filesystem...") await window.puter.fs.write(scriptFileName, bee.dnaScript) await addHoneycombeEntry("buzz", `✅ Script written to: ${scriptFileName}`) // Step 2: Create the worker using the correct Puter API await addHoneycombeEntry("buzz", "🔧 Creating Puter worker instance...") // Try different approaches based on Puter API documentation let deployment; let deploymentUrl; try { // Method 1: Try the workers.create API if (window.puter.workers && typeof window.puter.workers.create === 'function') { await addHoneycombeEntry("buzz", "🔧 Using puter.workers.create API...") deployment = await window.puter.workers.create({ name: workerName, script: scriptFileName }) deploymentUrl = deployment?.url || deployment?.endpoint } else { throw new Error("puter.workers.create not available") } } catch (workerError) { await addHoneycombeEntry("warning", `⚠️ workers.create failed: ${workerError.message}`) // Method 2: Try sites API try { await addHoneycombeEntry("buzz", "🔧 Trying sites API...") if (window.puter.sites && typeof window.puter.sites.create === 'function') { deployment = await window.puter.sites.create({ name: workerName, files: [{ name: 'index.js', content: bee.dnaScript }] }) deploymentUrl = deployment?.url || deployment?.endpoint } else { throw new Error("puter.sites.create not available") } } catch (sitesError) { await addHoneycombeEntry("alarm", `❌ sites.create failed: ${sitesError.message}`) throw new Error(`All deployment methods failed. Last error: ${sitesError.message}`) } } if (!deploymentUrl) { // Try to construct URL from deployment object if (deployment && deployment.name) { deploymentUrl = `https://${deployment.name}.puter.site` } else { throw new Error("No deployment URL returned and cannot construct URL") } } await addHoneycombeEntry("buzz", `✅ Worker deployed successfully!`) await addHoneycombeEntry("buzz", `🔗 Live URL: ${deploymentUrl}`) // Update worker status in database await database.put({ ...bee, status: "foraging", puterWorkerName: workerName, puterWorkerUrl: deploymentUrl, deployedAt: timestamp, scriptPath: scriptFileName, deploymentMethod: deployment?.method || 'unknown' }) await addHoneycombeEntry("buzz", `🐝 ${bee.name} is now live and buzzing in the cloud!`) } catch (error) { await addHoneycombeEntry("alarm", `❌ Deployment failed: ${error.message}`) // Update worker status to show failure await database.put({ ...bee, status: "grounded", deploymentError: error.message, failedAt: Date.now() }) } finally { setDeployingBees(prev => { const newSet = new Set(prev) newSet.delete(bee._id) return newSet }) setIsSending(false) } } // Execute worker mission - REAL WORKER CALLS const sendBeeOnMission = async (bee, endpoint, method = "GET", body = null) => { if (!puterAuth || !bee.puterWorkerUrl || !window.puter) return setIsFlying(true) const startTime = Date.now() try { await addHoneycombeEntry("flight", `🐝 ${bee.name} executing: ${method} ${endpoint}`) const requestOptions = { method, headers: { 'Content-Type': 'application/json' } } if (method !== "GET" && body) { requestOptions.body = typeof body === 'string' ? body : JSON.stringify(body) } const response = await fetch(`${bee.puterWorkerUrl}${endpoint}`, requestOptions) const result = await response.text() const executionTime = Date.now() - startTime await addHoneycombeEntry("flight", `✅ Mission completed in ${executionTime}ms`) await addHoneycombeEntry("flight", `📄 Response (${response.status}):`, result) // Save mission record await database.put({ type: "bee-mission", beeId: bee._id, beeName: bee.name, endpoint, method, body, response: result, statusCode: response.status, executionTime, timestamp: Date.now(), status: "completed" }) } catch (error) { await addHoneycombeEntry("alarm", `❌ Mission failed: ${error.message}`) // Save failed mission record await database.put({ type: "bee-mission", beeId: bee._id, beeName: bee.name, endpoint, method, body, error: error.message, timestamp: Date.now(), status: "failed" }) } finally { setIsFlying(false) } } // Remove worker const banishBee = async (bee) => { if (banishingBee === bee._id) { try { setBanishingBee(null) // Clean up from Puter if deployed if (bee.puterWorkerName && puterAuth && window.puter) { try { await addHoneycombeEntry("warning", `🧹 Cleaning up Puter resources for ${bee.name}...`) // Try to delete the worker if (window.puter.workers && typeof window.puter.workers.delete === 'function') { await window.puter.workers.delete(bee.puterWorkerName) } else if (window.puter.sites && typeof window.puter.sites.delete === 'function') { await window.puter.sites.delete(bee.puterWorkerName) } // Try to delete the script file if (bee.scriptPath) { await window.puter.fs.delete(bee.scriptPath) } await addHoneycombeEntry("warning", `✅ Puter resources cleaned up for ${bee.name}`) } catch (error) { await addHoneycombeEntry("warning", `⚠️ Cleanup warning: ${error.message}`) } } await database.put({ ...bee, status: "banished", banishedAt: Date.now() }) if (inspectingBee === bee._id) { setInspectingBee(null) } await addHoneycombeEntry("warning", `✅ Worker '${bee.name}' removed from hive`) } catch (error) { await addHoneycombeEntry("alarm", `❌ Failed to remove worker: ${error.message}`) } } else { setBanishingBee(bee._id) await addHoneycombeEntry("warning", `⚠️ Click REMOVE again to confirm deletion of ${bee.name}`) } } const cancelBanishment = (bee) => { setBanishingBee(null) addHoneycombeEntry("buzz", `🐝 Worker ${bee.name} spared`) } // Clean console const cleanHoneycombe = async () => { const count = honeycombeEntries.length for (const entry of honeycombeEntries) { await database.del(entry._id) } setTimeout(async () => { await addHoneycombeEntry("buzz", `🧹 Console cleared (${count} entries removed)`) }, 200) } // Filter console entries const getFilteredHoneycombeEntries = () => { if (buzzFilter === "all") return honeycombeEntries return honeycombeEntries.filter(entry => entry.buzzLevel === buzzFilter) } const getBeeStatusColor = (status) => { switch (status) { case "foraging": return "bg-[#ffd670] text-[#8B4513] shadow-inner" case "grounded": return "bg-[#ff9770] text-[#8B0000] shadow-inner" case "banished": return "bg-[#D2B48C] text-[#8B4513] shadow-inner" case "deploying": return "bg-[#ff9770] text-[#8B4513] shadow-inner animate-pulse" default: return "bg-[#F5DEB3] text-[#8B4513] shadow-inner" } } const getHoneycombeEntryColor = (buzzLevel) => { switch (buzzLevel) { case "buzz": return "text-[#ffd670]" case "warning": return "text-[#ff9770]" case "alarm": return "text-[#ff70a6]" case "flight": return "text-[#70d6ff]" default: return "text-[#F5DEB3]" } } // Loading state if (!dataLoaded) { return (

🤖

🐝 BeeHive Master 🐝

*Loading **production-ready Puter.js worker management** system. Generate, deploy, and monitor **real serverless workers** with AI assistance. **Puter authentication required** for deployment.*

) } return (

{/* Puter SDK & Authentication Status */}

{puterError ? '❌ Puter SDK: ERROR' : !puterLoaded ? '⏳ Puter SDK: LOADING...' : puterAuth ? '🔐 Puter Cloud: AUTHENTICATED' : '⚠️ Puter Cloud: AUTHENTICATION REQUIRED'}

{puterError ? `Error: ${puterError}` : !puterLoaded ? 'Loading Puter SDK from https://js.puter.com/v2/' : puterAuth && puterUser ? `Authenticated as: ${puterUser.username} (${puterUser.uuid})` : 'Sign up/in to deploy production workers to Puter cloud'}

{puterError ? ( ) : !puterLoaded ? (

⏳ Loading SDK...

) : !puterAuth ? ( ) : ( )}

{/* Show authentication requirement notice */} {puterLoaded && !puterAuth && (

🔐

🚨 Puter Authentication Required

**Worker deployment** requires **Puter cloud authentication**. Sign up for a **free Puter account** to deploy serverless workers to production cloud infrastructure. All other features work without authentication.

)} {/* Header */}

🤖

🐝 BeeHive Master 🐝

*Professional **Puter.js worker management** system. Generate **production-ready scripts** with AI, deploy to **real Puter cloud infrastructure**, and monitor **live worker performance**. All workers are **immediately deployable** and **enterprise-ready**. **Puter authentication required** for deployment!*

{/* Status Grid */}

{[ { label: "Puter Auth", value: puterAuth ? "✅" : "❌", icon: "🔐", color: puterAuth ? "from-[#e9ff70] to-[#ffd670]" : "from-[#ff9770] to-[#ff70a6]" }, { label: "Total Workers", value: workerBees.filter(w => w.status !== "banished").length, icon: "🤖", color: "from-[#e9ff70] to-[#ffd670]" }, { label: "Ready to Deploy", value: workerBees.filter(w => w.status === "larva").length, icon: "📝", color: "from-[#F5DEB3] to-[#DDD8B8]" }, { label: "Live Workers", value: workerBees.filter(w => w.status === "foraging").length, icon: "☁️", color: "from-[#ffd670] to-[#ff9770]" }, { label: "Missions", value: missions.length, icon: "🚀", color: "from-[#ff9770] to-[#ff70a6]" }, { label: "URLs Generated", value: workerBees.filter(w => w.puterWorkerUrl).length, icon: "🔗", color: puterAuth ? "from-[#70d6ff] to-[#ff70a6]" : "from-[#D2B48C] to-[#BC9A6A]" } ].map((stat, index) => (

{stat.icon}

{stat.value}

{stat.label}

))}

{/* Navigation */}

{[ { id: "nursery", label: "📝 GENERATOR", desc: "Create Workers" }, { id: "foragers", label: "☁️ DEPLOYED", desc: "Live Workers" }, { id: "expeditions", label: "🚀 MISSIONS", desc: "Execution Log" } ].map((section) => ( ))}

{/* Main Content */}

{/* Generator Section */} {activeSection === "nursery" && (

{/* Worker Generator */}

🤖

AI Worker Generator

{/* Quick Start */}

🏓 Quick Start - Test Worker

Start with a **production-ready ping-pong worker** featuring health checks, echo endpoints, and immediate deployment capability.

{ e.preventDefault(); submitBee(); }}>

Worker Name/Purpose mergeBee({ name: e.target.value })} className="w-full p-6 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_12px_12px_24px_rgba(139,69,19,0.15),inset_-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513] focus:outline-none" placeholder="e.g., api-gateway, file-processor, webhook-handler, data-validator" />

Production Script

mergeBee({ dnaScript: e.target.value })}
                        className="w-full h-64 p-6 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] font-mono text-sm shadow-[inset_12px_12px_24px_rgba(139,69,19,0.15),inset_-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513] focus:outline-none resize-none"
                        placeholder="// Production-ready worker script will be generated here..."
                      />
                    </div>

<button
                      type="submit"
                      className="w-full py-6 bg-gradient-to-br from-[#e9ff70] to-[#ffd670] text-[#8B4513] font-bold text-lg rounded-2xl shadow-[12px_12px_24px_rgba(139,69,19,0.15),-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513]"
                    >
                      📝 SAVE WORKER SCRIPT
                    </button>
                  </form>
                </div>

{/* Generated Workers */}
                <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-[2rem] shadow-[25px_25px_50px_rgba(139,69,19,0.15),-25px_-25px_50px_rgba(255,255,255,0.9)] border-4 border-[#8B4513]">
                  <div className="flex items-center gap-4 mb-6">
                    <span className="text-3xl">📝</span>
                    <h2 className="text-3xl font-bold text-[#8B4513]">Ready for Deployment ({workerBees.filter(w => w.status === "larva").length})</h2>
                  </div>
                  <div className="space-y-6 max-h-96 overflow-y-auto pr-2">
                    {workerBees.filter(w => w.status === "larva").map((bee) => (
                      <div key={bee._id} className="bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] p-6 rounded-2xl shadow-[inset_6px_6px_12px_rgba(139,69,19,0.15),inset_-6px_-6px_12px_rgba(255,255,255,0.9)] border-3 border-[#8B4513]">
                        <div className="flex justify-between items-start mb-4">
                          <div className="flex items-center gap-2">
                            {bee.name === "ping-pong-tester" && <span className="text-lg">🏓</span>}
                            <h3 className="font-bold text-[#8B4513] text-xl">📝 {bee.name}</h3>
                          </div>
                          <span className={`px-4 py-2 text-sm font-bold rounded-full ${getBeeStatusColor(bee.status)} border-2 border-[#8B4513]`}>
                            {bee.name === "ping-pong-tester" ? "TEST READY" : "READY"}
                          </span>
                        </div>
                        
                        {bee.description && (
                          <p className="text-sm text-[#8B4513] mb-4 opacity-80">{bee.description}</p>
                        )}
                        
                        {bee.endpoints && bee.endpoints.length > 0 && (
                          <div className="text-sm text-[#8B4513] mb-4 opacity-70">
                            <strong>🔗 Endpoints:</strong> {bee.endpoints.join(", ")}
                          </div>
                        )}
                        
                        <div className="text-xs text-[#8B4513] mb-4 opacity-60">
                          📅 Generated: {new Date(bee.createdAt).toLocaleString()}
                        </div>
                        
                        <div className="flex gap-3 flex-wrap">
                          <button
                            onClick={() => sendBeeToField(bee)}
                            disabled={deployingBees.has(bee._id) || !puterAuth}
                            className={`px-4 py-3 text-sm font-bold rounded-xl disabled:opacity-50 shadow-[6px_6px_12px_rgba(139,69,19,0.15),-6px_-6px_12px_rgba(255,255,255,0.9)] border-2 border-[#8B4513] ${
                              bee.name === "ping-pong-tester" 
                                ? "bg-gradient-to-br from-[#ff70a6] to-[#ffd670] text-[#8B4513]" 
                                : "bg-gradient-to-br from-[#e9ff70] to-[#ffd670] text-[#8B4513]"
                            }`}
                          >
                            {deployingBees.has(bee._id) ? "🚀 Deploying..." : 
                             !puterAuth ? "🔐 Auth Required" :
                             bee.name === "ping-pong-tester" ? "🏓 Deploy Test Worker" : "🚀 Deploy Worker"}
                          </button>
                          
                          {banishingBee === bee._id ? (
                            <div className="flex gap-2">
                              <button
                                onClick={() => banishBee(bee)}
                                className="px-3 py-3 bg-gradient-to-br from-[#ff9770] to-[#ff70a6] text-[#8B0000] text-sm font-bold rounded-xl border-2 border-[#8B0000]"
                              >
                                🗑️ CONFIRM
                              </button>
                              <button
                                onClick={() => cancelBanishment(bee)}
                                className="px-3 py-3 bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] text-[#8B4513] text-sm font-bold rounded-xl border-2 border-[#8B4513]"
                              >
                                ↩️ CANCEL
                              </button>
                            </div>
                          ) : (
                            <button
                              onClick={() => banishBee(bee)}
                              className="px-3 py-3 bg-gradient-to-br from-[#ff70a6] to-[#ff9770] text-[#8B0000] text-sm font-bold rounded-xl border-2 border-[#8B0000]"
                            >
                              🗑️ REMOVE
                            </button>
                          )}
                          
                          <button
                            onClick={() => setInspectingBee(inspectingBee === bee._id ? null : bee._id)}
                            className="px-3 py-3 bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513] text-sm font-bold rounded-xl border-2 border-[#8B4513]"
                          >
                            {inspectingBee === bee._id ? "👁️ HIDE" : "👁️ VIEW CODE"}
                          </button>
                        </div>
                        
                        {inspectingBee === bee._id && (
                          <div className="mt-6 p-6 bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-xl shadow-[inset_6px_6px_12px_rgba(139,69,19,0.15),inset_-6px_-6px_12px_rgba(255,255,255,0.8)] border-3 border-[#8B4513]">
                            <h4 className="font-bold text-[#8B4513] text-sm mb-4">
                              📄 {bee.name === "ping-pong-tester" ? "🏓 Ping-Pong Test Script" : "Production Script"}
                            </h4>
                            <pre className="text-xs text-[#8B4513] overflow-x-auto whitespace-pre-wrap max-h-48 overflow-y-auto bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-lg p-4 border-2 border-[#8B4513]">
                              {bee.dnaScript || "// No script generated yet"}
                            </pre>
                          </div>
                        )}
                      </div>
                    ))}
                    
                    {workerBees.filter(w => w.status === "larva").length === 0 && (
                      <div className="text-center py-16 text-[#8B4513] opacity-50">
                        <div className="text-6xl mb-6">📝</div>
                        <p className="text-lg italic">No workers ready for deployment.</p>
                        <p className="text-sm mt-3">Use the **Quick Start** ping-pong tester or generate your first worker above!</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

{/* Deployed Workers Section */}
            {activeSection === "foragers" && (
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* Mission Control */}
                <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-[2rem] shadow-[25px_25px_50px_rgba(139,69,19,0.15),-25px_-25px_50px_rgba(255,255,255,0.9)] border-4 border-[#8B4513]">
                  <div className="flex items-center gap-4 mb-6">
                    <span className="text-3xl">🚀</span>
                    <h2 className="text-3xl font-bold text-[#8B4513]">Worker Execution</h2>
                  </div>
                  
                  <div className="space-y-6">
                    <div>
                      <label className="block text-[#8B4513] font-bold mb-3 text-sm">Select Live Worker</label>
                      <select
                        value={mission.beeId}
                        onChange={(e) => mergeMission({ beeId: e.target.value })}
                        className="w-full p-6 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_12px_12px_24px_rgba(139,69,19,0.15),inset_-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513] focus:outline-none"
                      >
                        <option value="">Choose deployed worker...</option>
                        {workerBees.filter(w => w.status === "foraging").map(bee => (
                          <option key={bee._id} value={bee._id}>
                            {bee.name === "ping-pong-tester" ? "🏓" : "☁️"} {bee.name}
                          </option>
                        ))}
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-[#8B4513] font-bold mb-3 text-sm">Endpoint Path</label>
                      <select
                        value={mission.flowerPath}
                        onChange={(e) => mergeMission({ flowerPath: e.target.value })}
                        className="w-full p-6 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_12px_12px_24px_rgba(139,69,19,0.15),inset_-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513] focus:outline-none"
                      >
                        <option value="/">/ - Root endpoint</option>
                        <option value="/health">🏥 /health - Health check</option>
                        <option value="/ping">🏓 /ping - Ping test</option>
                        <option value="/status">📊 /status - Status info</option>
                        <option value="/echo">🔊 /echo - Echo test (POST)</option>
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-[#8B4513] font-bold mb-3 text-sm">HTTP Method</label>
                      <select
                        value={mission.danceType}
                        onChange={(e) => mergeMission({ danceType: e.target.value })}
                        className="w-full p-6 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_12px_12px_24px_rgba(139,69,19,0.15),inset_-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513] focus:outline-none"
                      >
                        <option value="GET">🔍 GET - Fetch data</option>
                        <option value="POST">📦 POST - Send data</option>
                        <option value="PUT">🔄 PUT - Update data</option>
                        <option value="DELETE">🗑️ DELETE - Remove data</option>
                      </select>
                    </div>
                    
                    {mission.danceType !== "GET" && (
                      <div>
                        <label className="block text-[#8B4513] font-bold mb-3 text-sm">Request Body (JSON)</label>
                        <textarea
                          value={mission.pollensack}
                          onChange={(e) => mergeMission({ pollensack: e.target.value })}
                          className="w-full h-32 p-6 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] font-mono text-sm shadow-[inset_12px_12px_24px_rgba(139,69,19,0.15),inset_-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513] focus:outline-none resize-none"
                          placeholder='{"message": "Hello from ping-pong test!", "data": "test payload"}'
                        />
                      </div>
                    )}
                    
                    <button
                      onClick={async () => {
                        const bee = workerBees.find(w => w._id === mission.beeId)
                        if (bee) {
                          await sendBeeOnMission(bee, mission.flowerPath, mission.danceType, mission.pollensack)
                        }
                      }}
                      disabled={!mission.beeId || !mission.flowerPath || isFlying || !puterAuth}
                      className="w-full py-6 bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513] font-bold text-lg rounded-2xl disabled:opacity-50 shadow-[12px_12px_24px_rgba(139,69,19,0.15),-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513]"
                    >
                      {!puterAuth ? "🔐 AUTH REQUIRED" : isFlying ? "🚀 EXECUTING..." : "🚀 EXECUTE WORKER"}
                    </button>
                  </div>
                </div>

{/* Live Workers */}
                <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-[2rem] shadow-[25px_25px_50px_rgba(139,69,19,0.15),-25px_-25px_50px_rgba(255,255,255,0.9)] border-4 border-[#8B4513]">
                  <div className="flex items-center gap-4 mb-6">
                    <span className="text-3xl">☁️</span>
                    <h2 className="text-3xl font-bold text-[#8B4513]">Live Workers ({workerBees.filter(w => w.status === "foraging").length})</h2>
                  </div>
                  <div className="space-y-6 max-h-96 overflow-y-auto pr-2">
                    {workerBees.filter(w => w.status === "foraging" || w.status === "grounded").map((bee) => (
                      <div key={bee._id} className="bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] p-6 rounded-2xl shadow-[inset_6px_6px_12px_rgba(139,69,19,0.15),inset_-6px_-6px_12px_rgba(255,255,255,0.9)] border-3 border-[#8B4513]">
                        <div className="flex justify-between items-start mb-4">
                          <div className="flex items-center gap-2">
                            {bee.name === "ping-pong-tester" && <span className="text-lg">🏓</span>}
                            <h3 className="font-bold text-[#8B4513] text-xl">☁️ {bee.name}</h3>
                          </div>
                          <span className={`px-4 py-2 text-sm font-bold rounded-full ${getBeeStatusColor(bee.status)} border-2 border-[#8B4513]`}>
                            {bee.status === "foraging" ? (bee.name === "ping-pong-tester" ? "🏓 TEST LIVE" : "LIVE") : bee.status.toUpperCase()}
                          </span>
                        </div>
                        
                        {bee.puterWorkerUrl && (
                          <div className="text-xs text-[#8B4513] mb-4 font-mono bg-gradient-to-r from-[#FFF8DC] to-[#F5DEB3] p-3 rounded-lg border-2 border-[#8B4513]">
                            <strong>🔗 LIVE URL:</strong><br/>
                            <span className="text-[#70d6ff] break-all">{bee.puterWorkerUrl}</span>
                          </div>
                        )}
                        
                        {bee.endpoints && bee.endpoints.length > 0 && (
                          <div className="text-sm text-[#8B4513] mb-4 opacity-70">
                            <strong>🔗 Available Endpoints:</strong> {bee.endpoints.join(", ")}
                          </div>
                        )}
                        
                        {bee.deploymentError && (
                          <div className="text-xs text-[#8B0000] mb-4 p-3 bg-gradient-to-r from-[#ff9770] to-[#ff70a6] rounded-lg border-2 border-[#8B0000]">
                            <strong>❌ Error:</strong> {bee.deploymentError}
                          </div>
                        )}
                        
                        <div className="text-xs text-[#8B4513] mb-4 opacity-60">
                          🚀 Deployed: {bee.deployedAt ? new Date(bee.deployedAt).toLocaleString() : "Unknown"}
                        </div>
                        
                        <div className="flex gap-3 flex-wrap">
                          {bee.status === "foraging" && puterAuth && (
                            <>
                              <button
                                onClick={() => sendBeeOnMission(bee, "/ping", "GET")}
                                disabled={isFlying}
                                className="px-4 py-3 bg-gradient-to-br from-[#ff70a6] to-[#ffd670] text-[#8B4513] text-sm font-bold rounded-xl disabled:opacity-50 border-2 border-[#8B4513]"
                              >
                                {isFlying ? "🏓 Testing..." : "🏓 Ping Test"}
                              </button>
                              <button
                                onClick={() => sendBeeOnMission(bee, "/health", "GET")}
                                disabled={isFlying}
                                className="px-4 py-3 bg-gradient-to-br from-[#70d6ff] to-[#ff70a6] text-[#2C1810] text-sm font-bold rounded-xl disabled:opacity-50 border-2 border-[#2C1810]"
                              >
                                {isFlying ? "🔍 Checking..." : "🔍 Health Check"}
                              </button>
                            </>
                          )}
                          
                          {!puterAuth && (
                            <div className="px-4 py-3 bg-gradient-to-br from-[#ff9770] to-[#ff70a6] text-[#8B0000] text-sm font-bold rounded-xl opacity-50 border-2 border-[#8B0000]">
                              🔐 Auth Required for Testing
                            </div>
                          )}
                          
                          {banishingBee === bee._id ? (
                            <div className="flex gap-2">
                              <button
                                onClick={() => banishBee(bee)}
                                className="px-3 py-3 bg-gradient-to-br from-[#ff9770] to-[#ff70a6] text-[#8B0000] text-sm font-bold rounded-xl border-2 border-[#8B0000]"
                              >
                                🗑️ CONFIRM
                              </button>
                              <button
                                onClick={() => cancelBanishment(bee)}
                                className="px-3 py-3 bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] text-[#8B4513] text-sm font-bold rounded-xl border-2 border-[#8B4513]"
                              >
                                ↩️ CANCEL
                              </button>
                            </div>
                          ) : (
                            <button
                              onClick={() => banishBee(bee)}
                              className="px-3 py-3 bg-gradient-to-br from-[#ff70a6] to-[#ff9770] text-[#8B0000] text-sm font-bold rounded-xl border-2 border-[#8B0000]"
                            >
                              🗑️ REMOVE
                            </button>
                          )}
                        </div>
                      </div>
                    ))}
                    
                    {workerBees.filter(w => w.status === "foraging" || w.status === "grounded").length === 0 && (
                      <div className="text-center py-16 text-[#8B4513] opacity-50">
                        <div className="text-6xl mb-6">☁️</div>
                        <p className="text-lg italic">No workers deployed yet.</p>
                        <p className="text-sm mt-3">Deploy the **ping-pong tester** or generated workers to see them here!</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

{/* Missions Section */}
            {activeSection === "expeditions" && (
              <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-[2rem] shadow-[25px_25px_50px_rgba(139,69,19,0.15),-25px_-25px_50px_rgba(255,255,255,0.9)] border-4 border-[#8B4513]">
                <div className="flex items-center gap-4 mb-6">
                  <span className="text-3xl">🚀</span>
                  <h2 className="text-3xl font-bold text-[#8B4513]">Worker Execution Log</h2>
                </div>
                <div className="space-y-6 max-h-96 overflow-y-auto pr-2">
                  {missions.map((mission) => (
                    <div key={mission._id} className="bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] p-6 rounded-2xl shadow-[inset_6px_6px_12px_rgba(139,69,19,0.15),inset_-6px_-6px_12px_rgba(255,255,255,0.9)] border-3 border-[#8B4513]">
                      <div className="flex justify-between items-start mb-4">
                        <div>
                          <div className="flex items-center gap-2">
                            {mission.beeName === "ping-pong-tester" && <span className="text-lg">🏓</span>}
                            <h3 className="font-bold text-[#8B4513] text-xl">🚀 {mission.beeName}</h3>
                          </div>
                          <p className="text-sm text-[#8B4513] opacity-80">{mission.method} {mission.endpoint}</p>
                        </div>
                        <span className={`px-4 py-2 text-sm font-bold rounded-full ${getBeeStatusColor(mission.status)} border-2 border-[#8B4513]`}>
                          {mission.statusCode ? `HTTP ${mission.statusCode}` : mission.status.toUpperCase()}
                        </span>
                      </div>
                      
                      <div className="text-xs text-[#8B4513] mb-4 opacity-60">
                        🕐 {new Date(mission.timestamp).toLocaleString()}
                        {mission.executionTime && ` • ⚡ ${mission.executionTime}ms`}
                      </div>
                      
                      {mission.response && (
                        <div className="mt-4 p-6 bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-xl shadow-[inset_6px_6px_12px_rgba(139,69,19,0.15),inset_-6px_-6px_12px_rgba(255,255,255,0.8)] border-3 border-[#8B4513]">
                          <h4 className="text-sm font-bold text-[#8B4513] mb-3">📄 Worker Response:</h4>
                          <pre className="text-xs text-[#8B4513] whitespace-pre-wrap overflow-x-auto max-h-40 overflow-y-auto">
                            {mission.response}
                          </pre>
                        </div>
                      )}
                      
                      {mission.error && (
                        <div className="mt-4 p-6 bg-gradient-to-br from-[#ff9770] to-[#ff70a6] rounded-xl border-3 border-[#8B0000]">
                          <h4 className="text-sm font-bold text-[#8B0000] mb-3">❌ Error:</h4>
                          <pre className="text-xs text-[#8B0000] whitespace-pre-wrap overflow-x-auto">
                            {mission.error}
                          </pre>
                        </div>
                      )}
                    </div>
                  ))}
                  
                  {missions.length === 0 && (
                    <div className="text-center py-16 text-[#8B4513] opacity-50">
                      <div className="text-6xl mb-6">🚀</div>
                      <p className="text-lg italic">No worker executions yet.</p>
                      <p className="text-sm mt-3">Execute the **ping-pong tester** or deployed workers to see results here!</p>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>

{/* Console */}
          {honeycombeVisible && (
            <div className="bg-gradient-to-br from-[#2C1810] to-[#1a0f08] rounded-[2rem] shadow-[25px_25px_50px_rgba(0,0,0,0.4),-25px_-25px_50px_rgba(255,248,220,0.1)] border-4 border-[#ffd670]">
              <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-6 rounded-t-[2rem] border-b-4 border-[#8B4513] flex justify-between items-center">
                <div className="flex items-center gap-4">
                  <h3 className="font-bold text-[#8B4513] text-xl">🖥️ SYSTEM CONSOLE</h3>
                  <select
                    value={buzzFilter}
                    onChange={(e) => setBuzzFilter(e.target.value)}
                    className="px-4 py-3 text-sm rounded-xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] border-2 border-[#8B4513] focus:outline-none"
                  >
                    <option value="all">All ({honeycombeEntries.length})</option>
                    <option value="buzz">Info ({honeycombeEntries.filter(e => e.buzzLevel === "buzz").length})</option>
                    <option value="warning">Warning ({honeycombeEntries.filter(e => e.buzzLevel === "warning").length})</option>
                    <option value="alarm">Error ({honeycombeEntries.filter(e => e.buzzLevel === "alarm").length})</option>
                    <option value="flight">Execution ({honeycombeEntries.filter(e => e.buzzLevel === "flight").length})</option>
                  </select>
                </div>
                <div className="flex gap-4">
                  <button
                    onClick={cleanHoneycombe}
                    className="px-6 py-3 bg-gradient-to-br from-[#ff70a6] to-[#ff9770] text-[#8B0000] text-sm font-bold rounded-xl border-2 border-[#8B0000]"
                  >
                    🧹 CLEAR
                  </button>
                  <button
                    onClick={() => setHoneycombeVisible(false)}
                    className="px-6 py-3 bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513] text-sm font-bold rounded-xl border-2 border-[#8B4513]"
                  >
                    👁️ HIDE
                  </button>
                </div>
              </div>
              
              <div className="p-6 h-80 overflow-y-auto bg-gradient-to-br from-[#2C1810] to-[#1a0f08] font-mono text-sm rounded-b-[2rem]">
                {getFilteredHoneycombeEntries().map((entry) => (
                  <div key={entry._id} className="mb-3">
                    <span className="text-[#ffd670] text-xs">
                      [{new Date(entry.timestamp).toLocaleTimeString()}]
                    </span>
                    <span className={`ml-3 ${getHoneycombeEntryColor(entry.buzzLevel)}`}>
                      {entry.buzzMessage}
                    </span>
                    {entry.nectar && (
                      <pre className="text-[#e9ff70] mt-2 ml-6 text-xs whitespace-pre-wrap overflow-x-auto bg-gradient-to-r from-[rgba(139,69,19,0.15)] to-[rgba(255,248,220,0.08)] p-3 rounded border-2 border-[rgba(255,248,220,0.2)]">
                        {entry.nectar}
                      </pre>
                    )}
                  </div>
                ))}
                <div ref={honeycombeEndRef} />
              </div>
            </div>
          )}
        </div>

{/* Demo & Quick Start Buttons */}
        <div className="mt-8 flex gap-4 justify-center flex-wrap">
          <button
            onClick={createTestWorker}
            className="px-8 py-4 bg-gradient-to-br from-[#ff70a6] to-[#ffd670] text-[#8B4513] font-bold text-lg rounded-[2rem] shadow-[12px_12px_24px_rgba(139,69,19,0.2),-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513] transition-all duration-300"
          >
            🏓 CREATE PING-PONG TEST WORKER
          </button>
          
          <button
            onClick={async () => {
              await addHoneycombeEntry("buzz", "🤖 Generating production-ready workers...")
              const demoData = await callAI("Generate 3 production-ready Puter.js serverless workers: api-gateway, webhook-processor, and data-validator. Each must have complete working code with proper fetch event handling, error handling, CORS headers, and JSON responses. Include common endpoints like /, /health, /status plus 2-3 functional endpoints per worker. Make them immediately deployable to Puter cloud.", {
                schema: {
                  properties: {
                    workers: {
                      type: "array",
                      items: {
                        type: "object",
                        properties: {
                          name: { type: "string" },
                          description: { type: "string" },
                          script: { type: "string" },
                          endpoints: { 
                            type: "array", 
                            items: { type: "string" } 
                          },
                          category: { type: "string" }
                        }
                      }
                    }
                  }
                }
              })
              
              const generated = JSON.parse(demoData)
              await addHoneycombeEntry("buzz", `✅ Generated ${generated.workers.length} production workers`)
              
              for (const worker of generated.workers) {
                await database.put({
                  name: worker.name,
                  description: worker.description,
                  dnaScript: worker.script,
                  endpoints: worker.endpoints || [],
                  category: worker.category || "demo",
                  type: "worker-bee",
                  status: "larva",
                  createdAt: Date.now()
                })
                await addHoneycombeEntry("buzz", `📝 Ready for deployment: ${worker.name}`)
              }
            }}
            className="px-8 py-4 bg-gradient-to-br from-[#e9ff70] to-[#ffd670] text-[#8B4513] font-bold text-lg rounded-[2rem] shadow-[12px_12px_24px_rgba(139,69,19,0.2),-12px_-12px_24px_rgba(255,255,255,0.9)] border-4 border-[#8B4513] transition-all duration-300"
          >
            🤖 GENERATE AI PRODUCTION WORKERS
          </button>
        </div>

<p className="text-center text-[#8B4513] italic mt-8 mb-8 leading-relaxed">
          *This is a **real Puter.js worker management platform**. Create workers locally, then **authenticate with Puter** 
          to deploy to **live cloud infrastructure**. Workers become **accessible via public URLs** and handle **real HTTP requests**. 
          Perfect for **APIs, webhooks, microservices**, and **serverless functions**.*
        </p>
      </div>
    </div>
  )
}</article></body></html>