@decido/plugin-dev-console 1.0.0

package/src/engine/SecurityProxy.ts

@@ -0,0 +1,34 @@
+import { kernel } from '@decido/kernel-bridge';
+
+/**
+ * Creates a secure and limited version of the kernel for AI-generated components.
+ */
+export const createSanitizedKernel = (missionTitle: string) => {
+    return new Proxy(kernel, {
+        get(target, prop) {
+            // TOTAL BLOCK of dangerous commands
+            if (prop === 'execute') {
+                return async (command: string, args: any) => {
+                    const forbidden = ['run_command', 'write_file', 'kill_agent', 'initiate_singularity'];
+                    const essential = ['notify', 'execute', 'send_message', 'stop_live_monitor'];
+
+                    if (forbidden.includes(command) || !essential.includes(command)) {
+                        console.error(`[Security Shield] 🛑 Bloqueado intento de ejecutar '${command}' desde UI Generativa: ${missionTitle}`);
+                        kernel.notify('⚠️ Alerta de Seguridad', `El componente '${missionTitle}' intentó ejecutar un comando no autorizado: ${command}`);
+                        throw new Error(`Permiso denegado para: ${command}. En Sandbox restrictivo.`);
+                    }
+
+                    // Allow read data or safe notifications
+                    return target.execute(command, args);
+                };
+            }
+
+            // Block access to bridge internal config
+            if (prop === 'config' || prop === 'internals') {
+                return undefined;
+            }
+
+            return (target as any)[prop];
+        }
+    });
+};

package/src/index.ts

@@ -0,0 +1,142 @@
+import { definePlugin } from '@decido/sdk';
+import type { DecidoApp } from '@decido/sdk';
+import { DeveloperPlaygroundWidget } from './widgets/DeveloperPlaygroundWidget';
+import { ForgeTerminalWidget } from './widgets/ForgeTerminalWidget';
+import { SDKShowcaseWidget } from './widgets/SDKShowcaseWidget';
+import { PlaygroundEngine } from './engine/PlaygroundEngine';
+
+// Re-export core utilities for consumers (App.tsx, etc.)
+export { PlaygroundEngine, ForgeTerminalWidget, SDKShowcaseWidget };
+
+// ── Developer Playground ──
+
+export const DeveloperPlaygroundPlugin = definePlugin({
+    manifest: {
+        id: 'decido-developer-playground',
+        name: 'Developer Playground',
+        version: '2.0.0',
+        description: 'Entorno de pruebas y tutorial interactivo para desarrolladores de Decido OS',
+        author: 'Decido',
+        icon: 'code',
+        permissions: [],
+        intents: ['open-developer-playground'],
+        widgets: [
+            {
+                id: 'developer-playground',
+                name: 'Developer Playground',
+                defaultZone: 'ide-editor',
+                component: DeveloperPlaygroundWidget,
+            },
+            {
+                id: 'sdk-showcase',
+                name: 'SDK Hooks Showcase',
+                defaultZone: 'ide-editor',
+                component: SDKShowcaseWidget,
+            },
+        ],
+        blueprints: [],
+    },
+
+    onMount: (app: DecidoApp) => {
+        app.logger.log('Developer Playground ready');
+    },
+
+    onUnmount: () => {
+        console.log('[DevPlayground] Cleaned up.');
+    },
+});
+
+// ── The Forge (Terminal Lab) ──
+
+let forgeUnsubscribers: (() => void)[] = [];
+
+export const PlaygroundPlugin = definePlugin({
+    manifest: {
+        id: 'macia-playground',
+        name: 'The Forge',
+        version: '2.0.0',
+        description: 'Laboratorio de pruebas para Inferencia MLX y Enigo',
+        author: 'Decido',
+        icon: 'terminal',
+        permissions: [],
+        intents: ['open-forge', 'quick-dispatch'],
+        widgets: [
+            {
+                id: 'forge-terminal',
+                name: 'Terminal de Misiones',
+                defaultZone: 'ide-panel',
+                component: ForgeTerminalWidget,
+            },
+        ],
+        blueprints: [],
+    },
+
+    onMount: (app: DecidoApp) => {
+        app.logger.log('The Forge ready');
+
+        const unsub = app.subscribeToEvent('intent:quick-dispatch', (payload: any) => {
+            const intentText = payload?.text || payload?.matches?.[0] || '';
+            PlaygroundEngine.dispatchMission(intentText);
+        });
+
+        forgeUnsubscribers = [unsub];
+    },
+
+    onUnmount: () => {
+        forgeUnsubscribers.forEach(u => u());
+        forgeUnsubscribers = [];
+        console.log('[Forge] Cleaned up.');
+    },
+});
+
+// ── Node DevOps Bridge ──
+
+let devOpsUnsubscribers: (() => void)[] = [];
+
+export const NodeDevOpsPlugin = definePlugin({
+    manifest: {
+        id: 'macia-node-devops',
+        name: 'Node DevOps Bridge',
+        version: '2.0.0',
+        description: 'Enruta comandos de consola y archivos al Agente Node especializado vía Redis.',
+        author: 'Decido',
+        icon: 'server',
+        permissions: ['shell:execute'],
+        intents: ['node-filesystem'],
+        widgets: [],
+        blueprints: [],
+    },
+
+    onMount: (app: DecidoApp) => {
+        app.logger.log('Node DevOps Bridge ready');
+
+        const unsub = app.subscribeToEvent('intent:node-filesystem', async (payload: any) => {
+            const query = payload?.text || payload?.input || '';
+            app.logger.log(`Delegando a Node Agent: ${query}`);
+
+            await app.notify('Delegando a Experto Node', 'Enviando directiva a través del enjambre Redis...');
+
+            await app.callKernel('send_message', {
+                from: 'System_UI',
+                to: 'devops-expert',
+                intent: 'execute_task',
+                payload: query,
+                priority: 'high',
+            });
+        });
+
+        devOpsUnsubscribers = [unsub];
+    },
+
+    onUnmount: () => {
+        devOpsUnsubscribers.forEach(u => u());
+        devOpsUnsubscribers = [];
+        console.log('[DevOps Bridge] Cleaned up.');
+    },
+
+    onError: (error, phase) => {
+        console.error(`[DevOps Bridge] Error during ${phase}:`, error);
+    },
+});
+
+export default DeveloperPlaygroundPlugin;

package/src/widgets/DeveloperPlaygroundWidget.tsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Play, Terminal, CheckCircle2, RefreshCw, ArrowRight } from 'lucide-react';
+import {
+  ReactFlow,
+  Background,
+  MarkerType,
+  useNodesState,
+  useEdgesState,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+// Import extracted components and data
+import { OSNode } from '../components/ui/OSNode';
+import { CodeSnippet } from '../components/ui/CodeSnippet';
+import { TUTORIAL_STEPS, Sparkles } from '../data/tutorialSteps';
+
+const nodeTypes = { osNode: OSNode };
+
+export const DeveloperPlaygroundWidget = () => {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [executionFinished, setExecutionFinished] = useState(false);
+
+  const step = TUTORIAL_STEPS[currentStepIndex];
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(step.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(step.edges);
+
+  useEffect(() => {
+    // Reset flow when step changes
+    setNodes(step.nodes);
+    setEdges(step.edges);
+    setIsExecuting(false);
+    setExecutionFinished(false);
+  }, [currentStepIndex, step.nodes, step.edges, setNodes, setEdges]);
+
+  const handleExecute = () => {
+    if (isExecuting || executionFinished) return;
+    setIsExecuting(true);
+
+    // Timeline Animation Simulation
+    setTimeout(() => {
+      // Modify ReactFlow elements to show "active" state based on declarative data
+      setNodes((nds) =>
+        nds.map((n) => {
+          const update = step.nodeUpdatesOnExecute?.find(u => u.id === n.id);
+          if (update) {
+            return { ...n, data: { ...n.data, isActive: update.isActive, status: update.status } };
+          }
+          return n;
+        })
+      );
+
+      setEdges((eds) =>
+        eds.map((e) => ({
+          ...e,
+          animated: true,
+          style: { stroke: '#06b6d4', strokeWidth: 3 },
+          markerEnd: { type: MarkerType.ArrowClosed, color: '#06b6d4' }
+        }))
+      );
+
+      setIsExecuting(false);
+      setExecutionFinished(true);
+    }, 1500);
+  };
+
+  const nextStep = () => {
+    if (currentStepIndex < TUTORIAL_STEPS.length - 1) {
+      setCurrentStepIndex(i => i + 1);
+    }
+  };
+
+  return (
+    <div className="w-full h-screen bg-black flex flex-col font-sans !overflow-hidden">
+      {/* Navbar Minimalist */}
+      <nav className="h-16 border-b border-white/10 flex items-center px-6 justify-between bg-zinc-950/50 backdrop-blur-md relative z-10 shrink-0">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center shadow-[0_0_15px_rgba(249,115,22,0.4)]">
+            <Terminal className="w-4 h-4 text-white" />
+          </div>
+          <div>
+            <h1 className="font-bold text-white leading-tight">Decido Developer Playground</h1>
+            <p className="text-[10px] text-zinc-400 font-mono">onboarding_mode: active</p>
+          </div>
+        </div>
+
+        {/* Progress Dots */}
+        <div className="flex items-center gap-2">
+          {TUTORIAL_STEPS.map((_, i) => (
+            <div key={i} className={`w-2 h-2 rounded-full transition-all duration-500 ${i === currentStepIndex ? 'bg-orange-500 w-6' : i < currentStepIndex ? 'bg-zinc-500' : 'bg-zinc-800'}`} />
+          ))}
+        </div>
+      </nav>
+
+      {/* Main Split Interface */}
+      <div className="flex-1 flex flex-col md:flex-row min-h-0 bg-[#0a0a0a]">
+
+        {/* Left Side: Code & Content */}
+        <div className="w-full md:w-[45%] lg:w-[40%] flex flex-col border-r border-white/5 bg-zinc-950/30 overflow-y-auto">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentStepIndex}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              transition={{ duration: 0.4 }}
+              className="p-8 flex-1 flex flex-col"
+            >
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs font-bold mb-6 w-max">
+                Paso 0{currentStepIndex + 1} // {TUTORIAL_STEPS.length}
+              </div>
+
+              <h2 className="text-3xl font-black text-white tracking-tight mb-4">
+                {step.title}
+              </h2>
+
+              <p className="text-zinc-400 mb-8 leading-relaxed">
+                {step.description}
+              </p>
+
+              {/* Code Snippet Box */}
+              <div className="relative mb-8 flex-1 flex flex-col">
+                <div className="absolute -inset-1 bg-gradient-to-r from-orange-500/20 to-purple-500/20 rounded-xl blur-lg opacity-50 z-0"></div>
+                <div className="relative z-10 flex-1">
+                  <CodeSnippet code={step.code} />
+                </div>
+              </div>
+
+              {/* Action Area */}
+              <div className="mt-auto pt-6 border-t border-white/5 flex items-center justify-between">
+                <button
+                  onClick={handleExecute}
+                  disabled={isExecuting || executionFinished}
+                  className={`px-6 py-3 rounded-lg font-bold flex items-center gap-2 transition-all ${executionFinished
+                    ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30'
+                    : isExecuting
+                      ? 'bg-orange-500/50 text-white border border-transparent cursor-not-allowed'
+                      : 'bg-orange-600 hover:bg-orange-500 text-white shadow-[0_0_20px_rgba(234,88,12,0.4)] active:scale-95'
+                    }`}
+                >
+                  {executionFinished ? (
+                    <><CheckCircle2 className="w-5 h-5" /> Ejecutado exitosamente</>
+                  ) : isExecuting ? (
+                    <><RefreshCw className="w-5 h-5 animate-spin" /> Compilando y ejecutando...</>
+                  ) : (
+                    <><Play className="w-5 h-5 fill-current" /> {step.actionLabel}</>
+                  )}
+                </button>
+
+                {executionFinished && currentStepIndex < TUTORIAL_STEPS.length - 1 && (
+                  <motion.button
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    onClick={nextStep}
+                    className="flex items-center gap-2 text-sm font-bold text-white bg-white/10 hover:bg-white/20 px-4 py-3 rounded-lg border border-white/10 transition-colors"
+                  >
+                    Siguiente Lección <ArrowRight className="w-4 h-4" />
+                  </motion.button>
+                )}
+
+                {executionFinished && currentStepIndex === TUTORIAL_STEPS.length - 1 && (
+                  <motion.button
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    onClick={() => window.location.reload()}
+                    className="flex items-center gap-2 text-sm font-bold text-orange-400 bg-orange-500/10 border border-orange-500/30 hover:bg-orange-500/20 px-4 py-3 rounded-lg transition-colors"
+                  >
+                    Entrar el Sistema <Sparkles className="w-4 h-4" />
+                  </motion.button>
+                )}
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+
+        {/* Right Side: Visual Data Flow Simulator */}
+        <div className="w-full md:w-[55%] lg:w-[60%] flex-1 relative bg-[#050505] overflow-hidden">
+          {/* Grid Background Effect */}
+          <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E')] opacity-10 mix-blend-overlay z-10 pointer-events-none"></div>
+          <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent z-10 pointer-events-none"></div>
+
+          <div className="w-full h-full relative z-0">
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              nodeTypes={nodeTypes}
+              fitView
+              fitViewOptions={{ padding: 0.5 }}
+              proOptions={{ hideAttribution: true }}
+            >
+              <Background color="#27272a" gap={24} size={2} />
+            </ReactFlow>
+          </div>
+
+          {/* Overlays */}
+          <div className="absolute top-4 right-4 z-20 flex gap-2">
+            <div className="px-3 py-1.5 rounded bg-black/50 border border-white/10 backdrop-blur-md text-xs font-mono text-zinc-400 flex items-center gap-2">
+              <div className={`w-2 h-2 rounded-full ${isExecuting ? 'bg-orange-500 animate-pulse' : 'bg-emerald-500'}`}></div>
+              Tauri / Rust Bridge: ACTIVO
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};

package/src/widgets/ForgeTerminalWidget.tsx

@@ -0,0 +1,202 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useStore } from 'zustand';
+import { useShellStore } from '@decido/shell';
+import { playgroundStore, PlaygroundEngine } from '../engine/PlaygroundEngine';
+import { Terminal, Play, Loader, Command, X, Cpu, Zap, Search, LayoutDashboard } from 'lucide-react';
+
+export const ForgeTerminalWidget: React.FC<{
+    isGlobalOverlay?: boolean;
+}> = ({ isGlobalOverlay = false }) => {
+    const { logs, isExecuting } = useStore(playgroundStore);
+    const [objective, setObjective] = useState('');
+    const logsEndRef = useRef<HTMLDivElement>(null);
+
+    // Global toggle integration
+    const { isForgeTerminalOpen, setForgeTerminalOpen } = useShellStore();
+
+    // Auto-scroll on new logs
+    useEffect(() => {
+        logsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [logs]);
+
+    const handleExecute = (cmd?: string) => {
+        const targetCommand = cmd || objective;
+        if (!targetCommand.trim() || isExecuting) return;
+        PlaygroundEngine.dispatchMission(targetCommand);
+        setObjective('');
+    };
+
+    const isVisible = isGlobalOverlay ? isForgeTerminalOpen : true;
+
+    if (!isVisible) return null;
+
+    const quickMissions = [
+        { icon: <LayoutDashboard size={14} />, label: "Generar UI (Lucide)", cmd: "Construye un Sales Dashboard moderno usando Tailwind. Asegúrate de incluir 3 iconos de lucide-react (ej. Activity, DollarSign, Users). Devuelve un intent ui:spawn_dynamic_widget" },
+        { icon: <Search size={14} />, label: "Read Cargo.toml", cmd: "Lee el archivo Cargo.toml de la raíz y dime qué dependencias de Rust tienes." },
+        { icon: <Zap size={14} />, label: "List Root", cmd: "Lista los archivos del directorio actual." },
+        { icon: <Cpu size={14} />, label: "System Info", cmd: "Dime quién eres, qué herramientas tienes y cuál es tu propósito." },
+    ];
+
+    const content = (
+        <div style={{
+            display: 'flex', flexDirection: 'column', height: '100%',
+            background: isGlobalOverlay ? 'rgba(15, 17, 21, 0.95)' : '#0f1115',
+            color: '#c1c2c5', fontFamily: 'var(--font-mono, monospace)',
+            backdropFilter: isGlobalOverlay ? 'blur(12px)' : 'none',
+            border: isGlobalOverlay ? '1px solid rgba(0, 242, 224, 0.2)' : 'none',
+            borderRadius: isGlobalOverlay ? '12px' : '0px',
+            boxShadow: isGlobalOverlay ? '0 20px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05)' : 'none',
+            overflow: 'hidden'
+        }}>
+            {/* Header */}
+            <div style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '16px 20px', background: 'rgba(0,0,0,0.2)',
+                borderBottom: '1px solid rgba(255,255,255,0.05)'
+            }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                    <div style={{
+                        background: 'linear-gradient(135deg, #00f2e0 0%, #0099ff 100%)',
+                        padding: '6px', borderRadius: '8px', display: 'flex'
+                    }}>
+                        <Terminal size={18} color="#000" />
+                    </div>
+                    <div>
+                        <h3 style={{ margin: 0, fontSize: '13px', fontWeight: 600, color: '#fff', letterSpacing: '0.5px' }}>
+                            THE FORGE LAB
+                        </h3>
+                        <div style={{ fontSize: '10px', color: '#00f2e0', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '4px', marginTop: '2px' }}>
+                            <div style={{ width: 6, height: 6, borderRadius: '50%', background: isExecuting ? '#f5a623' : '#00f2e0', boxShadow: '0 0 8px currentColor' }} />
+                            {isExecuting ? 'AWAITING RESPONSE...' : 'SYSTEM SECURE & READY'}
+                        </div>
+                    </div>
+                </div>
+
+                {isGlobalOverlay && (
+                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                        <div style={{ fontSize: '10px', color: '#666', background: 'rgba(255,255,255,0.05)', padding: '4px 8px', borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                            <Command size={10} /> J
+                        </div>
+                        <button
+                            onClick={() => setForgeTerminalOpen(false)}
+                            style={{ background: 'transparent', border: 'none', color: '#888', cursor: 'pointer', padding: '4px', borderRadius: '4px' }}
+                            onMouseOver={e => e.currentTarget.style.color = '#fff'}
+                            onMouseOut={e => e.currentTarget.style.color = '#888'}
+                        >
+                            <X size={18} />
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            {/* Quick Missions */}
+            <div style={{ display: 'flex', gap: '8px', padding: '12px 20px', background: 'rgba(255,255,255,0.02)', overflowX: 'auto', borderBottom: '1px solid rgba(255,255,255,0.02)' }}>
+                {quickMissions.map((q, i) => (
+                    <button
+                        key={i}
+                        onClick={() => handleExecute(q.cmd)}
+                        disabled={isExecuting}
+                        style={{
+                            background: 'rgba(0, 242, 224, 0.05)', border: '1px solid rgba(0, 242, 224, 0.15)',
+                            color: '#00f2e0', padding: '6px 12px', borderRadius: '6px', fontSize: '11px',
+                            cursor: isExecuting ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
+                            whiteSpace: 'nowrap', transition: 'all 0.2s', opacity: isExecuting ? 0.5 : 1
+                        }}
+                        onMouseOver={e => { if (!isExecuting) e.currentTarget.style.background = 'rgba(0, 242, 224, 0.1)'; }}
+                        onMouseOut={e => { if (!isExecuting) e.currentTarget.style.background = 'rgba(0, 242, 224, 0.05)'; }}
+                    >
+                        {q.icon} {q.label}
+                    </button>
+                ))}
+            </div>
+
+            {/* Terminal Output */}
+            <div style={{
+                flex: 1, overflowY: 'auto', padding: '20px', fontSize: '12px',
+                lineHeight: '1.6', color: '#a0aabc'
+            }}>
+                {logs.length === 0 && (
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', opacity: 0.3, gap: '10px' }}>
+                        <Terminal size={48} />
+                        <span style={{ fontFamily: 'inherit' }}>Initialization Complete. Awaiting Directives.</span>
+                    </div>
+                )}
+                {logs.map((log, i) => {
+                    // Simple highlighting for common patterns
+                    const isThought = log.includes('Pensamiento');
+                    const isAction = log.includes('Acción');
+                    const isSystem = log.includes('Sistema en línea') || log.includes('Misión enviada');
+
+                    let color = '#a0aabc';
+                    if (isThought) color = '#b48ead';
+                    if (isAction) color = '#ebcb8b';
+                    if (isSystem) color = '#a3be8c';
+
+                    return (
+                        <div key={i} style={{ marginBottom: '8px', color, wordBreak: 'break-word' }}>
+                            {log}
+                        </div>
+                    );
+                })}
+                <div ref={logsEndRef} />
+            </div>
+
+            {/* Input Area */}
+            <div style={{ padding: '16px 20px', background: 'rgba(0,0,0,0.3)', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+                <div style={{ display: 'flex', gap: '10px', position: 'relative' }}>
+                    <div style={{ position: 'absolute', left: '12px', top: '12px', color: '#00f2e0' }}>
+                        ❯
+                    </div>
+                    <input
+                        type="text"
+                        value={objective}
+                        onChange={e => setObjective(e.target.value)}
+                        placeholder="Assign an objective to the swarm..."
+                        style={{
+                            flex: 1, padding: '12px 12px 12px 32px', background: 'rgba(255,255,255,0.03)',
+                            border: '1px solid rgba(255,255,255,0.1)', color: 'white', borderRadius: '8px',
+                            outline: 'none', fontSize: '13px', transition: 'border-color 0.2s', fontFamily: 'inherit'
+                        }}
+                        onFocus={e => e.currentTarget.style.borderColor = 'rgba(0, 242, 224, 0.4)'}
+                        onBlur={e => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'}
+                        onKeyDown={e => e.key === 'Enter' && handleExecute()}
+                        autoFocus={isGlobalOverlay}
+                    />
+                    <button
+                        onClick={() => handleExecute()}
+                        disabled={isExecuting || !objective.trim()}
+                        style={{
+                            background: isExecuting ? 'rgba(255,255,255,0.05)' : 'linear-gradient(135deg, #00f2e0 0%, #0099ff 100%)',
+                            color: isExecuting ? '#666' : '#000',
+                            border: 'none', padding: '0 20px', borderRadius: '8px', cursor: isExecuting ? 'not-allowed' : 'pointer',
+                            display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 600, fontSize: '13px',
+                            transition: 'opacity 0.2s, transform 0.1s'
+                        }}
+                        onMouseDown={e => { if (!isExecuting) e.currentTarget.style.transform = 'scale(0.96)'; }}
+                        onMouseUp={e => { if (!isExecuting) e.currentTarget.style.transform = 'scale(1)'; }}
+                        onMouseLeave={e => { if (!isExecuting) e.currentTarget.style.transform = 'scale(1)'; }}
+                    >
+                        {isExecuting ? <Loader size={16} className="animate-spin" /> : <Play size={16} />}
+                        {isExecuting ? 'EXECUTING' : 'DISPATCH'}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+
+    if (isGlobalOverlay) {
+        return (
+            <div style={{
+                position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                padding: '40px', background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)'
+            }}>
+                <div style={{ width: '100%', maxWidth: '800px', height: '80vh', display: 'flex', flexDirection: 'column' }}>
+                    {content}
+                </div>
+            </div>
+        );
+    }
+
+    return <>{content}</>;
+};