import React, { useState, useEffect, useRef } from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function WorkerBee() { const { useDocument, useLiveQuery, database } = useFireproof("workerbee-hive-db") // Worker creation form const { doc: newWorker, merge: mergeWorker, submit: submitWorker } = useDocument({ name: "", type: "worker", script: "", status: "created", createdAt: Date.now() }) // Worker execution form const { doc: execRequest, merge: mergeExec } = useDocument({ workerId: "", type: "execution-request", endpoint: "/health", method: "GET", body: "" }) // App settings document for persistence const { doc: appSettings, merge: mergeSettings } = useDocument({ _id: "app-settings", type: "app-settings", consoleVisible: true, consoleFilter: "all", activeTab: "created-workers", selectedWorker: null, lastUpdated: Date.now() }) // Live queries const { docs: workers } = useLiveQuery("type", { key: "worker" }) const { docs: executions } = useLiveQuery("type", { key: "execution", descending: true, limit: 50 }) const { docs: logs } = useLiveQuery("type", { key: "log", descending: true, limit: 50 }) const { docs: consoleEntries } = useLiveQuery("type", { key: "console-entry", descending: true, limit: 200 }) const { docs: settings } = useLiveQuery("type", { key: "app-settings" }) // UI state (restored from persistence) const [activeTab, setActiveTab] = useState("created-workers") const [selectedWorker, setSelectedWorker] = useState(null) const [isGeneratingScript, setIsGeneratingScript] = useState(false) const [isDeploying, setIsDeploying] = useState(false) const [consoleVisible, setConsoleVisible] = useState(true) const [consoleFilter, setConsoleFilter] = useState("all") const [isExecuting, setIsExecuting] = useState(false) const [dataLoaded, setDataLoaded] = useState(false) const [deletingWorker, setDeletingWorker] = useState(null) // Console ref for auto-scrolling const consoleEndRef = useRef(null) // Helper function to add console entries const addConsoleEntry = async (level, message, data = null, workerId = null) => { try { await database.put({ type: "console-entry", level, message, data, workerId, timestamp: Date.now() }) } catch (error) { console.error("Failed to add console entry:", error) } } // Restore UI state from saved settings useEffect(() => { if (settings && settings.length > 0) { const savedSettings = settings[0] setActiveTab(savedSettings.activeTab || "created-workers") setSelectedWorker(savedSettings.selectedWorker) setConsoleVisible(savedSettings.consoleVisible !== false) setConsoleFilter(savedSettings.consoleFilter || "all") setDataLoaded(true) addConsoleEntry("info", "🔄 Hive state restored from previous session") } else { mergeSettings({ consoleVisible: true, consoleFilter: "all", activeTab: "created-workers", selectedWorker: null, lastUpdated: Date.now() }) setDataLoaded(true) } }, [settings]) // Save UI state when it changes useEffect(() => { if (dataLoaded) { mergeSettings({ consoleVisible, consoleFilter, activeTab, selectedWorker, lastUpdated: Date.now() }) } }, [consoleVisible, consoleFilter, activeTab, selectedWorker, dataLoaded]) // Auto-scroll console to bottom useEffect(() => { if (consoleVisible && consoleEndRef.current) { consoleEndRef.current.scrollIntoView({ behavior: "smooth" }) } }, [consoleEntries, consoleVisible]) // Log app startup useEffect(() => { const logStartup = async () => { await addConsoleEntry("info", "🐝 WorkerBee hive initializing...") await addConsoleEntry("info", `🍯 Found ${workers.length} worker bees in the hive`) await addConsoleEntry("info", `📋 Found ${executions.length} task records`) } if (dataLoaded) { logStartup() } }, [dataLoaded, workers.length]) // Generate worker script with AI const generateWorkerScript = async () => { if (!newWorker.name.trim()) return setIsGeneratingScript(true) await addConsoleEntry("info", `🤖 Queen bee generating worker script for: ${newWorker.name}`) try { const script = await callAI(`Generate a production-ready Puter.js worker script for: ${newWorker.name}. Include proper routing, error handling, health checks, and logging. Make it bee-themed where appropriate.`, { schema: { properties: { script: { type: "string" }, description: { type: "string" }, endpoints: { type: "array", items: { type: "string" } }, requiresAuth: { type: "boolean" } } } }) const scriptData = JSON.parse(script) mergeWorker({ script: scriptData.script, description: scriptData.description, endpoints: scriptData.endpoints || [], requiresAuth: scriptData.requiresAuth || false }) await addConsoleEntry("info", `✅ Worker bee script ready with ${scriptData.endpoints?.length || 0} endpoints`) await database.put({ type: "log", level: "info", message: `Generated script for worker bee: ${newWorker.name}`, timestamp: Date.now() }) } catch (error) { await addConsoleEntry("error", `❌ Script generation failed: ${error.message}`) } setIsGeneratingScript(false) } // Deploy worker const deployWorker = async (worker) => { setIsDeploying(true) await addConsoleEntry("info", `🚀 Sending worker bee ${worker.name} to the field...`) try { await addConsoleEntry("info", "📦 Preparing worker bee for deployment...") await new Promise(resolve => setTimeout(resolve, 500)) await addConsoleEntry("info", "☁️ Worker bee taking flight to the cloud...") await new Promise(resolve => setTimeout(resolve, 800)) const deployedUrl = `https://${worker.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}-${Date.now()}.workerbee.buzz` await database.put({ ...worker, status: "deployed", deployedUrl, deployedAt: Date.now() }) await addConsoleEntry("info", `✅ Worker bee deployed successfully and buzzing!`) await addConsoleEntry("info", `🌐 Hive URL: ${deployedUrl}`) } catch (error) { await database.put({ ...worker, status: "deployment_failed", deploymentError: error.message }) await addConsoleEntry("error", `❌ Deployment failed - bee couldn't take flight: ${error.message}`) } setIsDeploying(false) } // Execute worker endpoint const executeWorker = async (worker, endpoint, method = "GET", body = null) => { setIsExecuting(true) const startTime = Date.now() try { await addConsoleEntry("execution", `🐝 Worker bee ${worker.name} starting task: ${method} ${endpoint}`) await addConsoleEntry("execution", `🔗 Hive location: ${worker.deployedUrl}${endpoint}`) const execDoc = { type: "execution", workerId: worker._id, workerName: worker.name, endpoint, method, body, timestamp: Date.now(), status: "executing" } const savedExec = await database.put(execDoc) await new Promise(resolve => setTimeout(resolve, Math.random() * 1000 + 500)) // Generate mock response let mockResponse = "" let statusCode = 200 const executionTime = Date.now() - startTime if (endpoint === "/health") { mockResponse = JSON.stringify({ status: "buzzing", message: "Worker bee is healthy and ready to work!", timestamp: new Date().toISOString(), worker: worker.name, uptime: Math.floor(Math.random() * 86400), hiveLoad: Math.floor(Math.random() * 100) }, null, 2) } else { mockResponse = JSON.stringify({ message: "Task completed successfully!", endpoint, method, worker: worker.name, data: { processed: true, timestamp: new Date().toISOString(), honeyProduced: Math.floor(Math.random() * 100) } }, null, 2) } await addConsoleEntry("execution", `✅ Task completed in ${executionTime}ms - worker bee returns to hive`) await addConsoleEntry("execution", `🍯 Sweet results:`, mockResponse) await database.put({ ...savedExec, status: "completed", response: mockResponse, statusCode, executionTime, completedAt: Date.now() }) } catch (error) { await addConsoleEntry("error", `❌ Task failed - worker bee encountered trouble: ${error.message}`) } finally { setIsExecuting(false) } } // Enhanced delete worker function const deleteWorker = async (worker) => { if (deletingWorker === worker._id) { // Confirm deletion - actually delete try { setDeletingWorker(null) await addConsoleEntry("warning", `🗑️ Removing worker bee ${worker.name} from the hive...`) // Mark as deleted instead of actually deleting to preserve history await database.put({ ...worker, status: "deleted", deletedAt: Date.now() }) // Close view if this worker was selected if (selectedWorker === worker._id) { setSelectedWorker(null) } await addConsoleEntry("warning", `✅ Worker bee '${worker.name}' has left the hive`) await database.put({ type: "log", level: "warning", message: `Worker bee '${worker.name}' removed from hive (was: ${worker.status})`, timestamp: Date.now(), workerId: worker._id }) } catch (error) { await addConsoleEntry("error", `❌ Failed to remove worker bee: ${error.message}`) } } else { // First click - show confirmation setDeletingWorker(worker._id) await addConsoleEntry("warning", `⚠️ Click REMOVE again to send worker bee ${worker.name} away from hive`) } } // Cancel delete confirmation const cancelDelete = (worker) => { setDeletingWorker(null) addConsoleEntry("info", `🐝 Worker bee ${worker.name} stays in the hive`) } // Permanently remove worker from database const permanentlyDeleteWorker = async (worker) => { try { await addConsoleEntry("warning", `💥 Permanently removing worker bee ${worker.name} from hive records...`) await database.del(worker._id) // Close view if this worker was selected if (selectedWorker === worker._id) { setSelectedWorker(null) } await addConsoleEntry("warning", `✅ Worker bee '${worker.name}' completely removed from hive database`) } catch (error) { await addConsoleEntry("error", `❌ Failed to permanently remove worker bee: ${error.message}`) } } // Clear console const clearConsole = async () => { const count = consoleEntries.length const consoleEntriesToDelete = consoleEntries for (const entry of consoleEntriesToDelete) { await database.del(entry._id) } setTimeout(async () => { await addConsoleEntry("info", `🧹 Hive console cleaned (${count} entries removed)`) }, 200) } // Filter console entries const getFilteredConsoleEntries = () => { if (consoleFilter === "all") return consoleEntries return consoleEntries.filter(entry => entry.level === consoleFilter) } const getStatusColor = (status) => { switch (status) { case "deployed": return "bg-[#ffd670] text-[#8B4513] shadow-inner" case "deployment_failed": return "bg-[#ff9770] text-[#8B0000] shadow-inner" case "deleted": return "bg-[#D2B48C] text-[#8B4513] shadow-inner" case "executing": return "bg-[#70d6ff] text-[#003d5c] shadow-inner" case "completed": return "bg-[#e9ff70] text-[#4a5c00] shadow-inner" case "failed": return "bg-[#ff70a6] text-[#8B0000] shadow-inner" default: return "bg-[#F5DEB3] text-[#8B4513] shadow-inner" } } const getConsoleEntryColor = (level) => { switch (level) { case "info": return "text-[#ffd670]" case "warning": return "text-[#ff9770]" case "error": return "text-[#ff70a6]" case "execution": return "text-[#70d6ff]" default: return "text-[#F5DEB3]" } } // Loading screen while data loads if (!dataLoaded) { return (

🐝

WorkerBee

*Buzzing to life... Restoring your **worker bees**, **hive settings**, and **task history** from the honeycomb database. All your hard work is safely stored in the hive!*

) } return (

{/* Header */}

🐝

WorkerBee

*Manage your **worker bee swarm** with Puter.js serverless technology. Create AI-powered bee scripts, deploy to the cloud hive, and monitor all tasks with our **real-time honeycomb console**. Your hive data **persists forever**!*

{/* Status Overview - Honeycomb Grid */}

{[ { label: "Active Bees", value: workers.filter(w => w.status !== "deleted").length, icon: "🐝", color: "from-[#e9ff70] to-[#ffd670]" }, { label: "Larvae", value: workers.filter(w => w.status === "created").length, icon: "🥚", color: "from-[#F5DEB3] to-[#DDD8B8]" }, { label: "Flying", value: workers.filter(w => w.status === "deployed").length, icon: "🌸", color: "from-[#ffd670] to-[#ff9770]" }, { label: "Tasks Done", value: executions.length, icon: "🍯", color: "from-[#ff9770] to-[#ff70a6]" }, { label: "Retired", value: workers.filter(w => w.status === "deleted").length, icon: "🪦", color: "from-[#D2B48C] to-[#BC9A6A]" } ].map((stat, index) => (

{stat.icon}

{stat.value}

{stat.label}

))}

{/* Navigation Tabs - Honeycomb Style */}

{[ { id: "created-workers", label: "🥚 LARVAE", desc: "New Bees" }, { id: "deployed-workers", label: "🐝 WORKERS", desc: "Active Bees" }, { id: "executions", label: "🍯 TASKS", desc: "Completed Work" }, { id: "logs", label: "📋 HIVE LOG", desc: "System & Cleanup" } ].map((tab) => ( ))} {/* Console Toggle */}

{/* Main Content Grid with Console */}

{/* Main Content Area */}

{/* Created Workers Tab */} {activeTab === "created-workers" && (

{/* Create Worker Form */}

🥚

Birth New Worker Bee

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

Bee Name mergeWorker({ name: e.target.value })} className="w-full p-4 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_8px_8px_16px_rgba(139,69,19,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)] focus:outline-none focus:shadow-[inset_12px_12px_24px_rgba(139,69,19,0.15),inset_-12px_-12px_24px_rgba(255,255,255,0.95)]" placeholder="e.g., honey-collector, pollen-processor, nectar-handler" />

Worker Bee DNA (Script)

mergeWorker({ script: e.target.value })}
                        className="w-full h-40 p-4 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] font-mono text-sm shadow-[inset_8px_8px_16px_rgba(139,69,19,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)] focus:outline-none resize-none"
                        placeholder="// Worker bee genetic code goes here..."
                      />
                    </div>

<button
                      type="submit"
                      className="w-full py-4 bg-gradient-to-br from-[#e9ff70] to-[#ffd670] text-[#8B4513] font-bold rounded-2xl shadow-[8px_8px_16px_rgba(139,69,19,0.1),-8px_-8px_16px_rgba(255,255,255,0.9)] hover:shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] active:shadow-[inset_4px_4px_8px_rgba(139,69,19,0.2),inset_-4px_-4px_8px_rgba(255,255,255,0.8)] transform hover:scale-105 transition-all duration-200"
                    >
                      🐝 BIRTH WORKER BEE
                    </button>
                  </form>
                </div>

{/* Created Workers List */}
                <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-3xl shadow-[20px_20px_40px_rgba(139,69,19,0.1),-20px_-20px_40px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)]">
                  <div className="flex items-center gap-3 mb-6">
                    <span className="text-2xl">🥚</span>
                    <h2 className="text-2xl font-bold text-[#8B4513]">Larvae Nursery ({workers.filter(w => w.status === "created").length})</h2>
                  </div>
                  <div className="space-y-4 max-h-96 overflow-y-auto pr-2">
                    {workers.filter(w => w.status === "created").map((worker) => (
                      <div key={worker._id} className="bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] p-6 rounded-2xl shadow-[inset_3px_3px_6px_rgba(139,69,19,0.1),inset_-3px_-3px_6px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.05)]">
                        <div className="flex justify-between items-start mb-3">
                          <h3 className="font-bold text-[#8B4513] text-lg">🥚 {worker.name}</h3>
                          <span className={`px-3 py-1 text-xs font-bold rounded-full ${getStatusColor(worker.status)}`}>
                            LARVA
                          </span>
                        </div>
                        
                        {worker.description && (
                          <p className="text-sm text-[#8B4513] mb-3 opacity-80">{worker.description}</p>
                        )}
                        
                        {worker.endpoints && worker.endpoints.length > 0 && (
                          <div className="text-xs text-[#8B4513] mb-3 opacity-70">
                            <strong>🌸 Will visit:</strong> {worker.endpoints.join(", ")}
                          </div>
                        )}
                        
                        <div className="text-xs text-[#8B4513] mb-4 opacity-60">
                          🕐 Born: {new Date(worker.createdAt).toLocaleString()}
                        </div>
                        
                        <div className="flex gap-2 flex-wrap">
                          {/* Deploy button */}
                          <button
                            onClick={() => deployWorker(worker)}
                            disabled={isDeploying}
                            className="px-4 py-2 bg-gradient-to-br from-[#e9ff70] to-[#ffd670] text-[#8B4513] text-sm font-bold rounded-xl disabled:opacity-50 shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] hover:shadow-[2px_2px_4px_rgba(139,69,19,0.1),-2px_-2px_4px_rgba(255,255,255,0.9)] active:shadow-[inset_2px_2px_4px_rgba(139,69,19,0.15),inset_-2px_-2px_4px_rgba(255,255,255,0.8)] transition-all duration-150"
                          >
                            {isDeploying ? "🚀 Metamorphosis..." : "🚀 Send to Field"}
                          </button>
                          
                          {/* Delete button */}
                          {deletingWorker === worker._id ? (
                            <div className="flex gap-2">
                              <button
                                onClick={() => deleteWorker(worker)}
                                className="px-3 py-2 bg-gradient-to-br from-[#ff9770] to-[#ff70a6] text-[#8B0000] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] hover:shadow-[2px_2px_4px_rgba(139,69,19,0.1),-2px_-2px_4px_rgba(255,255,255,0.9)] active:shadow-[inset_2px_2px_4px_rgba(139,69,19,0.15),inset_-2px_-2px_4px_rgba(255,255,255,0.8)]"
                              >
                                ☠️ CONFIRM
                              </button>
                              <button
                                onClick={() => cancelDelete(worker)}
                                className="px-3 py-2 bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] text-[#8B4513] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)]"
                              >
                                🐝 SAVE
                              </button>
                            </div>
                          ) : (
                            <button
                              onClick={() => deleteWorker(worker)}
                              className="px-3 py-2 bg-gradient-to-br from-[#ff70a6] to-[#ff9770] text-[#8B0000] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] hover:shadow-[2px_2px_4px_rgba(139,69,19,0.1),-2px_-2px_4px_rgba(255,255,255,0.9)]"
                            >
                              🗑️ REMOVE
                            </button>
                          )}
                          
                          {/* View/Hide Script button */}
                          <button
                            onClick={() => setSelectedWorker(selectedWorker === worker._id ? null : worker._id)}
                            className="px-3 py-2 bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] hover:shadow-[2px_2px_4px_rgba(139,69,19,0.1),-2px_-2px_4px_rgba(255,255,255,0.9)]"
                          >
                            {selectedWorker === worker._id ? "👁️ HIDE DNA" : "🧬 VIEW DNA"}
                          </button>
                        </div>
                        
                        {selectedWorker === worker._id && (
                          <div className="mt-4 p-4 bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-xl shadow-[inset_4px_4px_8px_rgba(139,69,19,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.05)]">
                            <h4 className="font-bold text-[#8B4513] text-sm mb-3 flex items-center gap-2">
                              🧬 Worker Bee DNA Code
                            </h4>
                            <pre className="text-xs text-[#8B4513] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-lg p-3 border border-[rgba(139,69,19,0.1)]">
                              {worker.script || "// No genetic code available"}
                            </pre>
                          </div>
                        )}
                      </div>
                    ))}
                    
                    {workers.filter(w => w.status === "created").length === 0 && (
                      <div className="text-center py-12 text-[#8B4513] opacity-50">
                        <div className="text-4xl mb-4">🥚</div>
                        <p className="text-sm italic">The nursery is empty.</p>
                        <p className="text-xs mt-2">Create your first worker bee above!</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

{/* Deployed Workers Tab */}
            {activeTab === "deployed-workers" && (
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* Test Worker Form */}
                <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-3xl shadow-[20px_20px_40px_rgba(139,69,19,0.1),-20px_-20px_40px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)]">
                  <div className="flex items-center gap-3 mb-6">
                    <span className="text-2xl">🌸</span>
                    <h2 className="text-2xl font-bold text-[#8B4513]">Send Bee on Mission</h2>
                  </div>
                  <div className="space-y-6">
                    <div>
                      <label className="block text-[#8B4513] font-bold mb-3 text-sm">Choose Worker Bee</label>
                      <select
                        value={execRequest.workerId}
                        onChange={(e) => mergeExec({ workerId: e.target.value })}
                        className="w-full p-4 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_8px_8px_16px_rgba(139,69,19,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)] focus:outline-none"
                      >
                        <option value="">Select a flying bee...</option>
                        {workers.filter(w => w.status === "deployed").map(worker => (
                          <option key={worker._id} value={worker._id}>
                            🐝 {worker.name}
                          </option>
                        ))}
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-[#8B4513] font-bold mb-3 text-sm">Flower to Visit</label>
                      <input
                        type="text"
                        value={execRequest.endpoint}
                        onChange={(e) => mergeExec({ endpoint: e.target.value })}
                        className="w-full p-4 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_8px_8px_16px_rgba(139,69,19,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)] focus:outline-none"
                        placeholder="/health"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-[#8B4513] font-bold mb-3 text-sm">Mission Type</label>
                      <select
                        value={execRequest.method}
                        onChange={(e) => mergeExec({ method: e.target.value })}
                        className="w-full p-4 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_8px_8px_16px_rgba(139,69,19,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)] focus:outline-none"
                      >
                        <option value="GET">🔍 Reconnaissance (GET)</option>
                        <option value="POST">📦 Delivery (POST)</option>
                        <option value="PUT">🔄 Update (PUT)</option>
                        <option value="DELETE">🗑️ Cleanup (DELETE)</option>
                      </select>
                    </div>
                    
                    {execRequest.method !== "GET" && (
                      <div>
                        <label className="block text-[#8B4513] font-bold mb-3 text-sm">Cargo Data (JSON)</label>
                        <textarea
                          value={execRequest.body}
                          onChange={(e) => mergeExec({ body: e.target.value })}
                          className="w-full h-24 p-4 rounded-2xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] font-mono text-sm shadow-[inset_8px_8px_16px_rgba(139,69,19,0.1),inset_-8px_-8px_16px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)] focus:outline-none resize-none"
                          placeholder='{"nectar": "sweet", "pollen": "gathered"}'
                        />
                      </div>
                    )}
                    
                    <button
                      onClick={async () => {
                        const worker = workers.find(w => w._id === execRequest.workerId)
                        if (worker) {
                          try {
                            await executeWorker(worker, execRequest.endpoint, execRequest.method, execRequest.body)
                          } catch (error) {
                            console.error("Mission failed:", error)
                          }
                        }
                      }}
                      disabled={!execRequest.workerId || !execRequest.endpoint || isExecuting}
                      className="w-full py-4 bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513] font-bold rounded-2xl disabled:opacity-50 shadow-[8px_8px_16px_rgba(139,69,19,0.1),-8px_-8px_16px_rgba(255,255,255,0.9)] hover:shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] active:shadow-[inset_4px_4px_8px_rgba(139,69,19,0.2),inset_-4px_-4px_8px_rgba(255,255,255,0.8)] transform hover:scale-105 transition-all duration-200"
                    >
                      {isExecuting ? "🐝 Bee Flying..." : "🚀 LAUNCH MISSION"}
                    </button>
                  </div>
                </div>

{/* Deployed Workers List */}
                <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-3xl shadow-[20px_20px_40px_rgba(139,69,19,0.1),-20px_-20px_40px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)]">
                  <div className="flex items-center gap-3 mb-6">
                    <span className="text-2xl">🐝</span>
                    <h2 className="text-2xl font-bold text-[#8B4513]">Active Field Workers ({workers.filter(w => w.status === "deployed").length})</h2>
                  </div>
                  <div className="space-y-4 max-h-96 overflow-y-auto pr-2">
                    {workers.filter(w => w.status === "deployed").map((worker) => (
                      <div key={worker._id} className="bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] p-6 rounded-2xl shadow-[inset_3px_3px_6px_rgba(139,69,19,0.1),inset_-3px_-3px_6px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.05)]">
                        <div className="flex justify-between items-start mb-3">
                          <h3 className="font-bold text-[#8B4513] text-lg">🐝 {worker.name}</h3>
                          <span className={`px-3 py-1 text-xs font-bold rounded-full ${getStatusColor(worker.status)}`}>
                            BUZZING
                          </span>
                        </div>
                        
                        {worker.description && (
                          <p className="text-sm text-[#8B4513] mb-3 opacity-80">{worker.description}</p>
                        )}
                        
                        <p className="text-xs text-[#8B4513] mb-3 font-mono bg-gradient-to-r from-[#FFF8DC] to-[#F5DEB3] p-2 rounded-lg border border-[rgba(139,69,19,0.1)]">
                          🌐 {worker.deployedUrl}
                        </p>
                        
                        {worker.endpoints && worker.endpoints.length > 0 && (
                          <div className="text-xs text-[#8B4513] mb-3 opacity-70">
                            <strong>🌸 Knows flowers:</strong> {worker.endpoints.join(", ")}
                          </div>
                        )}
                        
                        <div className="text-xs text-[#8B4513] mb-4 opacity-60">
                          🚀 Deployed: {new Date(worker.deployedAt).toLocaleString()}
                        </div>
                        
                        <div className="flex gap-2 flex-wrap">
                          {/* Test button */}
                          <button
                            onClick={() => executeWorker(worker, "/health", "GET")}
                            disabled={isExecuting}
                            className="px-4 py-2 bg-gradient-to-br from-[#70d6ff] to-[#ff70a6] text-[#2C1810] text-sm font-bold rounded-xl disabled:opacity-50 shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] hover:shadow-[2px_2px_4px_rgba(139,69,19,0.1),-2px_-2px_4px_rgba(255,255,255,0.9)] active:shadow-[inset_2px_2px_4px_rgba(139,69,19,0.15),inset_-2px_-2px_4px_rgba(255,255,255,0.8)] transition-all duration-150"
                          >
                            {isExecuting ? "🔍 Checking..." : "🔍 Health Check"}
                          </button>
                          
                          {/* Delete button */}
                          {deletingWorker === worker._id ? (
                            <div className="flex gap-2">
                              <button
                                onClick={() => deleteWorker(worker)}
                                className="px-3 py-2 bg-gradient-to-br from-[#ff9770] to-[#ff70a6] text-[#8B0000] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)]"
                              >
                                ☠️ CONFIRM
                              </button>
                              <button
                                onClick={() => cancelDelete(worker)}
                                className="px-3 py-2 bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] text-[#8B4513] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)]"
                              >
                                🐝 SAVE
                              </button>
                            </div>
                          ) : (
                            <button
                              onClick={() => deleteWorker(worker)}
                              className="px-3 py-2 bg-gradient-to-br from-[#ff70a6] to-[#ff9770] text-[#8B0000] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)]"
                            >
                              🏠 RECALL
                            </button>
                          )}
                          
                          {/* View/Hide Script button */}
                          <button
                            onClick={() => setSelectedWorker(selectedWorker === worker._id ? null : worker._id)}
                            className="px-3 py-2 bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)]"
                          >
                            {selectedWorker === worker._id ? "👁️ HIDE DNA" : "🧬 VIEW DNA"}
                          </button>
                        </div>
                        
                        {selectedWorker === worker._id && (
                          <div className="mt-4 p-4 bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-xl shadow-[inset_4px_4px_8px_rgba(139,69,19,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.05)]">
                            <h4 className="font-bold text-[#8B4513] text-sm mb-3 flex items-center gap-2">
                              🧬 Active Worker DNA
                            </h4>
                            <pre className="text-xs text-[#8B4513] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-lg p-3 border border-[rgba(139,69,19,0.1)]">
                              {worker.script || "// No genetic code available"}
                            </pre>
                          </div>
                        )}
                      </div>
                    ))}
                    
                    {workers.filter(w => w.status === "deployed").length === 0 && (
                      <div className="text-center py-12 text-[#8B4513] opacity-50">
                        <div className="text-4xl mb-4">🌸</div>
                        <p className="text-sm italic">No bees are currently in the field.</p>
                        <p className="text-xs mt-2">Deploy some larvae to get started!</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

{/* Executions Tab */}
            {activeTab === "executions" && (
              <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-3xl shadow-[20px_20px_40px_rgba(139,69,19,0.1),-20px_-20px_40px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)]">
                <div className="flex items-center gap-3 mb-6">
                  <span className="text-2xl">🍯</span>
                  <h2 className="text-2xl font-bold text-[#8B4513]">Honey Production Log</h2>
                </div>
                <div className="space-y-4 max-h-96 overflow-y-auto pr-2">
                  {executions.map((execution) => (
                    <div key={execution._id} className="bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] p-6 rounded-2xl shadow-[inset_3px_3px_6px_rgba(139,69,19,0.1),inset_-3px_-3px_6px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.05)]">
                      <div className="flex justify-between items-start mb-3">
                        <div>
                          <h3 className="font-bold text-[#8B4513] text-lg">🐝 {execution.workerName}</h3>
                          <p className="text-sm text-[#8B4513] opacity-80">🌸 {execution.method} {execution.endpoint}</p>
                        </div>
                        <span className={`px-3 py-1 text-xs font-bold rounded-full ${getStatusColor(execution.status)}`}>
                          {execution.statusCode ? `${execution.statusCode} ✓` : execution.status.toUpperCase()}
                        </span>
                      </div>
                      
                      <div className="text-xs text-[#8B4513] mb-3 opacity-60">
                        🕐 {new Date(execution.timestamp).toLocaleString()}
                        {execution.executionTime && ` • ⚡ ${execution.executionTime}ms`}
                      </div>
                      
                      {execution.response && (
                        <div className="mt-3 p-4 bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-xl shadow-[inset_4px_4px_8px_rgba(139,69,19,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.05)]">
                          <h4 className="text-xs font-bold text-[#8B4513] mb-2 flex items-center gap-1">
                            🍯 Honey Collected:
                          </h4>
                          <pre className="text-xs text-[#8B4513] whitespace-pre-wrap overflow-x-auto max-h-32 overflow-y-auto">
                            {execution.response}
                          </pre>
                        </div>
                      )}
                    </div>
                  ))}
                  
                  {executions.length === 0 && (
                    <div className="text-center py-12 text-[#8B4513] opacity-50">
                      <div className="text-4xl mb-4">🍯</div>
                      <p className="text-sm italic">No honey has been produced yet.</p>
                      <p className="text-xs mt-2">Send your worker bees on missions!</p>
                    </div>
                  )}
                </div>
              </div>
            )}

{/* Logs Tab with Deleted Workers Section */}
            {activeTab === "logs" && (
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* System Logs */}
                <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-3xl shadow-[20px_20px_40px_rgba(139,69,19,0.1),-20px_-20px_40px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)]">
                  <div className="flex items-center gap-3 mb-6">
                    <span className="text-2xl">📋</span>
                    <h2 className="text-2xl font-bold text-[#8B4513]">Hive Activity Log</h2>
                  </div>
                  <div className="space-y-3 max-h-96 overflow-y-auto pr-2">
                    {logs.map((log) => {
                      const worker = workers.find(w => w._id === log.workerId)
                      const levelColors = {
                        info: "bg-gradient-to-br from-[#70d6ff] to-[#e9ff70] text-[#2C1810]",
                        warning: "bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513]",
                        error: "bg-gradient-to-br from-[#ff9770] to-[#ff70a6] text-[#8B0000]"
                      }
                      
                      return (
                        <div key={log._id} className="bg-gradient-to-br from-[#F5DEB3] to-[#DDD8B8] p-4 rounded-2xl shadow-[inset_3px_3px_6px_rgba(139,69,19,0.1),inset_-3px_-3px_6px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.05)]">
                          <div className="flex justify-between items-start mb-2">
                            <span className={`px-3 py-1 text-xs font-bold rounded-full shadow-inner ${levelColors[log.level]}`}>
                              {log.level.toUpperCase()}
                            </span>
                            <span className="text-xs text-[#8B4513] opacity-60">
                              {new Date(log.timestamp).toLocaleString()}
                            </span>
                          </div>
                          <p className="text-sm text-[#8B4513] mb-1">{log.message}</p>
                          {worker && (
                            <p className="text-xs text-[#8B4513] opacity-70">🐝 Worker: {worker.name}</p>
                          )}
                        </div>
                      )
                    })}
                  </div>
                </div>

{/* Deleted Workers Management */}
                <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-8 rounded-3xl shadow-[20px_20px_40px_rgba(139,69,19,0.1),-20px_-20px_40px_rgba(255,255,255,0.9)] border border-[rgba(139,69,19,0.1)]">
                  <div className="flex items-center gap-3 mb-6">
                    <span className="text-2xl">🪦</span>
                    <h2 className="text-2xl font-bold text-[#8B4513]">Retired Bees ({workers.filter(w => w.status === "deleted").length})</h2>
                  </div>
                  <div className="space-y-4 max-h-96 overflow-y-auto pr-2">
                    {workers.filter(w => w.status === "deleted").map((worker) => (
                      <div key={worker._id} className="bg-gradient-to-br from-[#D2B48C] to-[#BC9A6A] p-6 rounded-2xl shadow-[inset_3px_3px_6px_rgba(139,69,19,0.2),inset_-3px_-3px_6px_rgba(255,255,255,0.7)] border border-[rgba(139,69,19,0.1)] opacity-75">
                        <div className="flex justify-between items-start mb-3">
                          <div>
                            <h3 className="font-bold text-[#8B4513] text-lg">🪦 {worker.name}</h3>
                            <p className="text-xs text-[#8B4513] opacity-70">
                              Was: {worker.status === "deleted" ? "Created" : worker.status}
                            </p>
                          </div>
                          <span className={`px-3 py-1 text-xs font-bold rounded-full ${getStatusColor(worker.status)}`}>
                            RETIRED
                          </span>
                        </div>
                        
                        {worker.description && (
                          <p className="text-sm text-[#8B4513] mb-3 opacity-60">{worker.description}</p>
                        )}
                        
                        <div className="text-xs text-[#8B4513] mb-4 opacity-60">
                          <p>🥚 Born: {new Date(worker.createdAt).toLocaleString()}</p>
                          <p>🪦 Retired: {new Date(worker.deletedAt).toLocaleString()}</p>
                          {worker.deployedAt && (
                            <p>🚀 Served: {new Date(worker.deployedAt).toLocaleString()}</p>
                          )}
                        </div>
                        
                        <div className="flex gap-2">
                          <button
                            onClick={() => permanentlyDeleteWorker(worker)}
                            className="px-4 py-2 bg-gradient-to-br from-[#ff9770] to-[#ff70a6] text-[#8B0000] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] hover:shadow-[2px_2px_4px_rgba(139,69,19,0.1),-2px_-2px_4px_rgba(255,255,255,0.9)]"
                          >
                            💥 ERASE FOREVER
                          </button>
                          
                          <button
                            onClick={() => setSelectedWorker(selectedWorker === worker._id ? null : worker._id)}
                            className="px-3 py-2 bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)]"
                          >
                            {selectedWorker === worker._id ? "👁️ HIDE" : "🧬 MEMORIAL"}
                          </button>
                        </div>
                        
                        {selectedWorker === worker._id && (
                          <div className="mt-4 p-4 bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-xl shadow-[inset_4px_4px_8px_rgba(139,69,19,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.05)] opacity-75">
                            <h4 className="font-bold text-[#8B4513] text-sm mb-3 flex items-center gap-2">
                              🪦 In Memory - Worker DNA
                            </h4>
                            <pre className="text-xs text-[#8B4513] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] rounded-lg p-3 border border-[rgba(139,69,19,0.1)]">
                              {worker.script || "// No genetic legacy preserved"}
                            </pre>
                          </div>
                        )}
                      </div>
                    ))}
                    
                    {workers.filter(w => w.status === "deleted").length === 0 && (
                      <div className="text-center py-12 text-[#8B4513] opacity-50">
                        <div className="text-4xl mb-4">🐝</div>
                        <p className="text-sm italic">All bees are still active in the hive.</p>
                        <p className="text-xs mt-2">Retired bees will rest here peacefully.</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>

{/* Console Panel - Honeycomb Style */}
          {consoleVisible && (
            <div className="bg-gradient-to-br from-[#2C1810] to-[#1a0f08] rounded-3xl shadow-[20px_20px_40px_rgba(0,0,0,0.3),-20px_-20px_40px_rgba(255,248,220,0.1)] border border-[rgba(255,248,220,0.1)]">
              {/* Console Header */}
              <div className="bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] p-4 rounded-t-3xl border-b border-[rgba(139,69,19,0.1)] flex justify-between items-center">
                <div className="flex items-center gap-4">
                  <h3 className="font-bold text-[#8B4513] flex items-center gap-2">
                    <span className="text-xl">🖥️</span>
                    HIVE CONSOLE
                  </h3>
                  <select
                    value={consoleFilter}
                    onChange={(e) => setConsoleFilter(e.target.value)}
                    className="px-3 py-2 text-sm rounded-xl bg-gradient-to-br from-[#FFF8DC] to-[#F5DEB3] text-[#8B4513] shadow-[inset_4px_4px_8px_rgba(139,69,19,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.8)] border border-[rgba(139,69,19,0.1)] focus:outline-none"
                  >
                    <option value="all">All Buzz ({consoleEntries.length})</option>
                    <option value="info">Info ({consoleEntries.filter(e => e.level === "info").length})</option>
                    <option value="warning">Warnings ({consoleEntries.filter(e => e.level === "warning").length})</option>
                    <option value="error">Errors ({consoleEntries.filter(e => e.level === "error").length})</option>
                    <option value="execution">Missions ({consoleEntries.filter(e => e.level === "execution").length})</option>
                  </select>
                </div>
                <div className="flex gap-3">
                  <button
                    onClick={clearConsole}
                    className="px-4 py-2 bg-gradient-to-br from-[#ff70a6] to-[#ff9770] text-[#8B0000] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] hover:shadow-[2px_2px_4px_rgba(139,69,19,0.1),-2px_-2px_4px_rgba(255,255,255,0.9)]"
                  >
                    🧹 CLEAN
                  </button>
                  <button
                    onClick={() => setConsoleVisible(false)}
                    className="px-4 py-2 bg-gradient-to-br from-[#ffd670] to-[#ff9770] text-[#8B4513] text-sm font-bold rounded-xl shadow-[4px_4px_8px_rgba(139,69,19,0.1),-4px_-4px_8px_rgba(255,255,255,0.9)] hover:shadow-[2px_2px_4px_rgba(139,69,19,0.1),-2px_-2px_4px_rgba(255,255,255,0.9)]"
                  >
                    👁️ HIDE
                  </button>
                </div>
              </div>
              
              {/* Console Content */}
              <div className="p-4 h-80 overflow-y-auto bg-gradient-to-br from-[#2C1810] to-[#1a0f08] font-mono text-sm rounded-b-3xl">
                {getFilteredConsoleEntries().map((entry) => (
                  <div key={entry._id} className="mb-2">
                    <span className="text-[#ffd670] text-xs">
                      [{new Date(entry.timestamp).toLocaleTimeString()}]
                    </span>
                    <span className={`ml-2 ${getConsoleEntryColor(entry.level)}`}>
                      {entry.message}
                    </span>
                    {entry.data && (
                      <pre className="text-[#e9ff70] mt-1 ml-4 text-xs whitespace-pre-wrap overflow-x-auto bg-gradient-to-r from-[rgba(139,69,19,0.1)] to-[rgba(255,248,220,0.05)] p-2 rounded border border-[rgba(255,248,220,0.1)]">
                        {entry.data}
                      </pre>
                    )}
                  </div>
                ))}
                <div ref={consoleEndRef} />
              </div>
            </div>
          )}
        </div>

{/* Demo Data Button */}
        <div className="mt-8 text-center">
          <button
            onClick={async () => {
              await addConsoleEntry("info", "🤖 Queen bee summoning worker bees with AI magic...")
              const demoData = await callAI("Generate 3 different Puter.js worker bee scripts: a honey-api-collector, a pollen-webhook-handler, and a nectar-file-processor. Each should have comprehensive bee-themed router endpoints, proper error handling, and demonstrate different Puter.js capabilities with bee and hive terminology.", {
                schema: {
                  properties: {
                    workers: {
                      type: "array",
                      items: {
                        type: "object",
                        properties: {
                          name: { type: "string" },
                          description: { type: "string" },
                          script: { type: "string" },
                          endpoints: { 
                            type: "array", 
                            items: { type: "string" } 
                          },
                          requiresAuth: { type: "boolean" }
                        }
                      }
                    }
                  }
                }
              })
              
              const parsed = JSON.parse(demoData)
              await addConsoleEntry("info", `✅ Queen created ${parsed.workers.length} new worker bee larvae`)
              
              for (const worker of parsed.workers) {
                await database.put({
                  ...worker,
                  type: "worker",
                  status: "created",
                  createdAt: Date.now()
                })
                await addConsoleEntry("info", `🥚 New larva in nursery: ${worker.name}`)
              }
            }}
            className="px-8 py-4 bg-gradient-to-br from-[#ff70a6] to-[#ffd670] text-[#8B4513] font-bold text-lg rounded-3xl shadow-[12px_12px_24px_rgba(139,69,19,0.15),-12px_-12px_24px_rgba(255,255,255,0.9)] hover:shadow-[6px_6px_12px_rgba(139,69,19,0.15),-6px_-6px_12px_rgba(255,255,255,0.9)] active:shadow-[inset_6px_6px_12px_rgba(139,69,19,0.2),inset_-6px_-6px_12px_rgba(255,255,255,0.8)] transform hover:scale-105 transition-all duration-300"
          >
            🐝 SUMMON DEMO WORKER BEES 🐝
          </button>
        </div>
      </div>
    </div>
  )
}</article></body></html>