@decido/plugin-agent-manager 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,9 @@
+
+Debugger listening on ws://127.0.0.1:53305/d3f610b6-810b-42b6-8437-6de49c8ffc0d
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+
+> @macia/agent-manager-plugin@1.0.0 build /Users/julioramirez/dev/active/Decido/packages/plugins/agent-manager-plugin
+> tsc
+
+Waiting for the debugger to disconnect...

package/errors.log

@@ -0,0 +1,29 @@
+Debugger listening on ws://127.0.0.1:65474/5960d5f4-2baf-4d97-bf89-c5111ed8ec77
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+
+> @macia/agent-manager-plugin@1.0.0 build /Users/julioramirez/dev/active/Decido/packages/agent-manager-plugin
+> tsc
+
+Debugger listening on ws://127.0.0.1:65476/b733e089-f2f2-4870-9f07-eae60becbf3a
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+src/widgets/VaultWidget.tsx(1,8): error TS6133: 'React' is declared but its value is never read.
+src/widgets/VaultWidget.tsx(12,27): error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<any[]>'.
+../plugins/madefront-ai/ui/src/components/GlobalErrorBoundary.tsx(1,8): error TS6133: 'React' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/components/SkeletonCard.tsx(1,1): error TS6133: 'React' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/components/widgets/ThreeDRoomWidget.tsx(1,8): error TS6133: 'React' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/components/widgets/ThreeDRoomWidget.tsx(16,15): error TS6133: 'state' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/BaseNode.tsx(1,17): error TS6133: 'memo' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/GraphCanvas.tsx(1,17): error TS6133: 'useCallback' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/GraphCanvas.tsx(7,5): error TS6133: 'useNodesState' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/GraphCanvas.tsx(8,5): error TS6133: 'useEdgesState' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/GraphCanvas.tsx(13,5): error TS6133: 'addEdge' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/nodes/GatewayNode.tsx(1,8): error TS6133: 'React' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/nodes/MasterBrainNode.tsx(1,8): error TS6133: 'React' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/SmartEdge.tsx(10,5): error TS6133: 'id' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/SmartEdge.tsx(20,5): error TS6133: 'label' is declared but its value is never read.
+../plugins/madefront-ai/ui/src/graph-engine/SmartEdge.tsx(34,9): error TS6133: 'animated' is declared but its value is never read.
+Waiting for the debugger to disconnect...
+ ELIFECYCLE  Command failed with exit code 2.
+Waiting for the debugger to disconnect...

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@decido/plugin-agent-manager",
+  "version": "1.0.0",
+  "description": "AgentManager Plugin for Decido OS with Advanced Canvas",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "dependencies": {
+    "@tauri-apps/api": "^2.0.0-rc.0",
+    "@xyflow/react": "^12.0.0",
+    "lucide-react": "^0.575.0",
+    "qrcode.react": "^4.1.0",
+    "recharts": "^3.7.0",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@decido/canvas-core": "0.1.0",
+    "@decido/kernel-bridge": "1.0.0",
+    "@decido/sdk": "1.0.0"
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "lint": "eslint \"src/**/*.ts*\"",
+    "build": "tsup src/index.ts --format esm --dts --minify --clean"
+  }
+}

package/src/index.ts

@@ -0,0 +1,122 @@
+import { definePlugin } from '@decido/sdk';
+import type { DecidoApp } from '@decido/sdk';
+import { TelemetryHUDWidget } from './widgets/TelemetryHUDWidget';
+import { AdvancedCanvasWidget } from './widgets/AdvancedCanvasWidget';
+import { MindExplorerWidget } from './widgets/MindExplorerWidget';
+import { PromptHubWidget } from './widgets/PromptHubWidget';
+import { MobileLinkWidget } from './widgets/MobileLinkWidget';
+import { SystemSentinelWidget } from './widgets/SystemSentinelWidget';
+
+export const AgentManagerPlugin = definePlugin({
+    manifest: {
+        id: 'macia-agent-manager-core',
+        name: 'AgentManager 3D Core',
+        version: '2.1.0',
+        description: 'Advanced 3D visualization, Fleet telemetry and Agent orchestration.',
+        author: 'Decido',
+        icon: 'brain',
+        permissions: ['cortex:view', 'shell:layout'],
+        intents: [],
+        widgets: [
+            {
+                id: 'agent-manager-telemetry',
+                name: 'Fleet Telemetry',
+                defaultZone: 'ide-panel',
+                component: TelemetryHUDWidget,
+            },
+            {
+                id: 'agent-manager-3d-canvas',
+                name: 'Structural Agent Canvas',
+                defaultZone: 'ide-editor',
+                component: AdvancedCanvasWidget,
+            },
+            {
+                id: 'agent-manager-mind-explorer',
+                name: 'Vector Mind Explorer',
+                defaultZone: 'ide-panel',
+                component: MindExplorerWidget,
+            },
+            {
+                id: 'agent-manager-prompt-hub',
+                name: 'Prompt Hub Framework',
+                defaultZone: 'ide-panel',
+                component: PromptHubWidget,
+            },
+            {
+                id: 'agent-manager-mobile-link',
+                name: 'Thin Client Link',
+                defaultZone: 'ide-panel',
+                component: MobileLinkWidget,
+            },
+            {
+                id: 'agent-manager-system-sentinel',
+                name: 'System Sentinel',
+                defaultZone: 'ide-panel',
+                component: SystemSentinelWidget,
+            },
+        ],
+        blueprints: [],
+    },
+
+    onMount: async (app: DecidoApp) => {
+        app.logger.log('Bootstrapping 3-Panel View Transition');
+
+        // Register workspace layout via kernel RPC (instead of direct shell store)
+        const canvasWorkspace = {
+            id: 'agent-manager-workspace',
+            name: 'Thought Canvas',
+            icon: null,
+            layout: {
+                id: 'root-split-horizontal',
+                type: 'split-horizontal' as const,
+                children: [
+                    {
+                        id: 'left-sidebar',
+                        type: 'widget' as const,
+                        widgetId: 'agent-manager-telemetry',
+                        size: 20,
+                    },
+                    {
+                        id: 'main-center-split',
+                        type: 'split-vertical' as const,
+                        size: 60,
+                        children: [
+                            {
+                                id: 'main-canvas',
+                                type: 'widget' as const,
+                                widgetId: 'agent-manager-3d-canvas',
+                                size: 70,
+                            },
+                            {
+                                id: 'forge-panel',
+                                type: 'widget' as const,
+                                widgetId: 'forge-terminal',
+                                size: 30,
+                            },
+                        ],
+                    },
+                    {
+                        id: 'right-telemetry',
+                        type: 'widget' as const,
+                        widgetId: 'agent-manager-prompt-hub',
+                        size: 25,
+                    },
+                ],
+            },
+        };
+
+        await app.callKernel('add_workspace', canvasWorkspace);
+        await app.callKernel('set_active_workspace', { workspaceId: canvasWorkspace.id });
+    },
+
+    onUnmount: () => {
+        console.log('[AgentManager] Cleaned up.');
+    },
+
+    onError: (error, phase) => {
+        console.error(`[AgentManager] Error during ${phase}:`, error);
+    },
+});
+
+export default AgentManagerPlugin;
+

package/src/intents/agentManagerIntents.ts

@@ -0,0 +1,70 @@
+import { MaciaIntent, useShellStore } from '@decido/shell';
+import { kernel } from '@decido/kernel-bridge';
+
+export const agentManagerIntents: MaciaIntent[] = [
+    {
+        id: 'intent-scan-fleet',
+        name: 'Scan Agent Fleet',
+        match: {
+            pattern: /(scan|lanzar escaneo).*(flota|fleet|agentes)/i,
+            description: 'Ping all active local agents via Rust backend',
+            examples: ['lanzar escaneo de flota', 'scan fleet status'],
+        },
+        handler: async (matches) => {
+            console.log(`[Intent] Scanning Fleet. Matched:`, matches[0]);
+            await kernel.notify('Fleet Scanner', 'Initiating wide-band agent ping...');
+            await kernel.vibrate('light');
+
+            // Execute simulated rust backend call
+            const result = await kernel.execute<{ ok: boolean, count: number }>('scan_fleet');
+            if (result?.ok) {
+                await kernel.notify('Scan Complete', `Detected ${result.count || 3} active agents.`);
+            }
+        }
+    },
+    {
+        id: 'intent-open-3d-visor',
+        name: 'Open 3D Visor',
+        match: {
+            pattern: /(abrir|open).*(visor 3d|3d visor|canvas)/i,
+            description: 'Launches the 3D Node viewer as a Transient Overlay',
+            examples: ['abrir visor 3d', 'open 3d canvas'],
+        },
+        handler: async () => {
+            console.log(`[Intent] Opening 3D Visor`);
+            const { openTransientOverlay } = useShellStore.getState();
+
+            openTransientOverlay({
+                widgetId: 'agent-manager-3d-canvas',
+                position: { x: window.innerWidth / 2 - 400, y: 150, width: 800, height: 600 }
+            });
+
+            await kernel.vibrate('selection');
+        }
+    },
+    {
+        id: 'intent-cyber-mode',
+        name: 'Cybersecurity Mode',
+        match: {
+            pattern: /(activar|enable|start).*(modo ciberseguridad|cybersecurity mode|defensa)/i,
+            description: 'Triggers a specialized layout for threat analysis',
+            examples: ['activar modo ciberseguridad'],
+        },
+        handler: async () => {
+            console.log(`[Intent] Activating Cyber Mode`);
+            const { setLayout } = useShellStore.getState();
+            await kernel.vibrate('heavy');
+            await kernel.notify('DEFCON 2', 'Cybersecurity Mode Enabled');
+
+            // Transmute layout to emergency mode focusing entirely on Telemetry telemetry
+            setLayout({
+                id: 'cyber-layout',
+                type: 'split-vertical',
+                children: [
+                    { id: 'top-threat', type: 'widget', widgetId: 'agent-manager-telemetry', size: 30 },
+                    { id: 'bottom-canvas', type: 'widget', widgetId: 'agent-manager-3d-canvas', size: 70 },
+                ]
+            });
+        }
+    }
+];

package/src/store/usePromptHubStore.ts

@@ -0,0 +1,50 @@
+import { create } from 'zustand';
+import { invoke } from '@tauri-apps/api/core';
+
+export interface RoleConfig {
+    system_prompt: string;
+    model_strategy: string;
+}
+
+export interface PromptHubState {
+    configs: Record<string, RoleConfig>;
+    isLoading: boolean;
+    error: string | null;
+    fetchConfigs: () => Promise<void>;
+    updateConfig: (role: string, systemPrompt: string, modelStrategy: string) => Promise<void>;
+}
+
+export const usePromptHubStore = create<PromptHubState>()((set, get) => ({
+    configs: {},
+    isLoading: false,
+    error: null,
+    fetchConfigs: async () => {
+        set({ isLoading: true, error: null });
+        try {
+            const configs = await invoke<Record<string, RoleConfig>>('get_prompt_config');
+            set({ configs, isLoading: false });
+        } catch (err: any) {
+            set({ error: err.toString(), isLoading: false });
+        }
+    },
+    updateConfig: async (role: string, systemPrompt: string, modelStrategy: string) => {
+        try {
+            await invoke('update_prompt_config', {
+                roleKey: role,
+                systemPrompt,
+                modelStrategy
+            });
+            // Re-fetch logic or optimistic update
+            const currentConfigs = get().configs;
+            set({
+                configs: {
+                    ...currentConfigs,
+                    [role]: { system_prompt: systemPrompt, model_strategy: modelStrategy }
+                },
+                error: null
+            });
+        } catch (err: any) {
+            set({ error: err.toString() });
+        }
+    }
+}));

package/src/widgets/AdvancedCanvasWidget.tsx

@@ -0,0 +1,198 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { applyNodeChanges } from '@xyflow/react';
+import { FlowCanvas } from '@decido/canvas-core';
+import { Node3DWidget } from './Node3DWidget';
+import { kernel } from '@decido/kernel-bridge';
+
+const nodeTypes = {
+    dynamic3D: Node3DWidget
+};
+
+const initialNodes = [
+    { id: '1', type: 'dynamic3D', position: { x: 250, y: 100 }, data: { label: 'Genesis Agent', status: 'active', load: 45 } },
+    { id: '2', type: 'dynamic3D', position: { x: 100, y: 400 }, data: { label: 'Data Scraper', status: 'idle', load: 0 } },
+    { id: '3', type: 'dynamic3D', position: { x: 400, y: 400 }, data: { label: 'Analyzer Core', status: 'error', load: 99 } },
+    { id: 'wa-gateway', type: 'dynamic3D', position: { x: 250, y: -100 }, data: { label: 'WhatsApp Gateway', status: 'active' } }
+];
+
+const initialEdges = [
+    { id: 'ewa-1', source: 'wa-gateway', target: '1', animated: true, style: { stroke: '#10b981' } },
+    { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#c084fc' } },
+    { id: 'e1-3', source: '1', target: '3', animated: true, style: { stroke: '#22d3ee' } },
+];
+
+export const AdvancedCanvasWidget: React.FC = () => {
+    const [nodes, setNodes] = useState<any[]>(initialNodes);
+    const [edges, setEdges] = useState<any[]>(initialEdges);
+
+    const onNodesChange = useCallback((changes: any) => {
+        setNodes((nds) => applyNodeChanges(changes, nds));
+
+        changes.forEach((change: any) => {
+            if (change.type === 'position' && change.position) {
+                kernel.execute('broadcast_message', {
+                    intent: "ui:node_moved",
+                    payload: JSON.stringify({ id: change.id, pos: change.position })
+                }).catch(() => { });
+            }
+        });
+    }, []);
+
+    useEffect(() => {
+        const unsubscribe = kernel.onEvent((payload: any) => {
+            const { event_type, agent_id, data } = payload;
+            if (!event_type || !agent_id || !data) return;
+
+            if (event_type === 'agent_spawned' || event_type === 'agent_status_changed') {
+                setNodes(prev => {
+                    const exists = prev.find(n => n.id === agent_id);
+                    const machine = data.machine_id ? ` [${data.machine_id.slice(0, 4)}]` : '';
+                    const loadVal = data.gas_max ? Math.round(((data.gas_max - (data.gas || data.gas_max)) / data.gas_max) * 100) : 0;
+
+                    const newNode = {
+                        id: agent_id,
+                        type: 'dynamic3D',
+                        // Try to maintain previous pos or random scatter for new elements
+                        position: exists ? exists.position : { x: 100 + Math.random() * 300, y: 100 + Math.random() * 300 },
+                        data: {
+                            label: `${data.name || 'Agent'}${machine}`,
+                            status: data.status ? String(data.status).toLowerCase() : 'active',
+                            load: loadVal,
+                            isVerified: !!data.signature
+                        }
+                    };
+
+                    if (exists) {
+                        return prev.map(n => n.id === agent_id ? newNode : n);
+                    }
+                    return [...prev, newNode];
+                });
+
+                if (data.parent_id) {
+                    setEdges((prev: any[]) => {
+                        const edgeId = `e${data.parent_id}-${agent_id}`;
+                        if (!prev.find(e => e.id === edgeId)) {
+                            return [...prev, { id: edgeId, source: data.parent_id, target: agent_id, animated: true, style: { stroke: '#10b981', strokeWidth: 2 } }];
+                        }
+                        return prev;
+                    });
+                }
+            } else if (event_type === 'agent_terminated') {
+                setNodes(prev => prev.filter(n => n.id !== agent_id));
+                setEdges(prev => prev.filter(e => e.source !== agent_id && e.target !== agent_id));
+            } else if (event_type === 'cognitive_frame') {
+                // Route stream of thought to the specific node
+                setNodes(prev => prev.map(n => {
+                    if (n.id === agent_id) {
+                        return {
+                            ...n,
+                            data: {
+                                ...n.data,
+                                lastThought: data.thought,
+                                lastAction: data.action,
+                                isThinking: true,
+                                thoughtTimestamp: Date.now()
+                            }
+                        };
+                    }
+                    return n;
+                }));
+            } else if (event_type === 'broadcast_event' && data.event_type === 'ui:update_node_visuals') {
+                const { nodeId, activity, isThinking } = data;
+
+                setNodes(prev => prev.map(n => {
+                    if (n.id === nodeId) {
+                        return {
+                            ...n,
+                            data: {
+                                ...n.data,
+                                load: activity,
+                                status: isThinking ? 'active' : 'idle',
+                                lastPulse: Date.now()
+                            }
+                        };
+                    }
+                    return n;
+                }));
+
+                setEdges(prev => prev.map(e => {
+                    if (e.source === nodeId || e.target === nodeId) {
+                        return { ...e, animated: isThinking, style: { ...e.style, stroke: activity > 50 ? '#00f2e0' : '#c084fc' } };
+                    }
+                    return e;
+                }));
+            } else if (event_type === 'broadcast_event' && data.intent === 'ui:node_moved') {
+                try {
+                    const { id, pos } = JSON.parse(data.payload);
+                    setNodes(prev => prev.map(n => n.id === id ? { ...n, position: pos } : n));
+                } catch (e) {
+                    console.error("Failed to parse node_moved payload");
+                }
+            } else if (event_type === 'broadcast_event' && data.topic === 'sim:node_activity') {
+                try {
+                    const { nodeId, type } = JSON.parse(data.payload);
+                    setNodes(prev => prev.map(n => {
+                        if (n.id === nodeId) {
+                            return {
+                                ...n,
+                                data: {
+                                    ...n.data,
+                                    activityStatus: type
+                                }
+                            };
+                        }
+                        return n;
+                    }));
+
+                    // Reset activity after 3 seconds
+                    setTimeout(() => {
+                        setNodes(prev => prev.map(n => {
+                            if (n.id === nodeId) {
+                                return {
+                                    ...n,
+                                    data: {
+                                        ...n.data,
+                                        activityStatus: 'idle'
+                                    }
+                                };
+                            }
+                            return n;
+                        }));
+                    }, 3000);
+                } catch (e) {
+                    console.error("Failed to parse sim:node_activity payload", e);
+                }
+            } else if (event_type === 'message_sent' || event_type === 'broadcast_event') {
+                // Check if it's hitting the gateway or coming from it
+                if (data.signature) {
+                    setNodes(prev => prev.map(n => {
+                        if (n.id === agent_id || n.id === 'wa-gateway') {
+                            return {
+                                ...n,
+                                data: {
+                                    ...n.data,
+                                    isVerified: true
+                                }
+                            };
+                        }
+                        return n;
+                    }));
+                }
+            }
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+
+    return (
+        <div className="h-full w-full">
+            <FlowCanvas
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                nodeTypes={nodeTypes as any}
+            />
+        </div>
+    );
+};

package/src/widgets/MindExplorerWidget.tsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from 'react';
+import { kernel } from '@decido/kernel-bridge';
+
+interface MemoryRecord {
+    id: string;
+    payload: {
+        text?: string;
+        agent_id?: string;
+        thought?: string;
+        action?: string;
+        observation?: string;
+        [key: string]: any;
+    };
+    score: number;
+}
+
+export const MindExplorerWidget: React.FC = () => {
+    const [memories, setMemories] = useState<MemoryRecord[]>([]);
+    const [query, setQuery] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSearch = async (e?: React.FormEvent) => {
+        if (e) e.preventDefault();
+        setLoading(true);
+        setError(null);
+        try {
+            const results = await kernel.fetchMemories('system', query || "experience", 20);
+            setMemories(results);
+        } catch (err: any) {
+            setError(err.toString());
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDelete = async (id: string) => {
+        try {
+            await kernel.deleteMemory('system', id);
+            setMemories(prev => prev.filter(m => m.id !== id));
+            kernel.notify('Trauma Eradicated', 'The selected memory has been purged from Qdrant.');
+        } catch (err: any) {
+            setError(err.toString());
+        }
+    };
+
+    // Load initial memories on mount
+    useEffect(() => {
+        handleSearch();
+    }, []);
+
+    return (
+        <div className="w-full h-full bg-black/40 backdrop-blur-2xl border border-white/10 rounded-2xl flex flex-col overflow-hidden text-slate-300 font-sans p-4 shadow-2xl relative">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none -mr-20 -mt-20"></div>
+
+            {/* Header */}
+            <div className="flex items-center justify-between mb-6 z-10 border-b border-white/5 pb-4">
+                <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-emerald-500/20 border border-emerald-500/40 flex items-center justify-center">
+                        <svg className="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
+                    </div>
+                    <div>
+                        <h2 className="text-emerald-400 font-bold tracking-widest uppercase text-sm">Mind Explorer</h2>
+                        <span className="text-[10px] text-slate-500 mono">Vector Storage (Qdrant)</span>
+                    </div>
+                </div>
+
+                {/* Search Bar */}
+                <form onSubmit={handleSearch} className="flex gap-2 relative">
+                    <input
+                        type="text"
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        placeholder="Search semantic memory..."
+                        className="bg-black/50 border border-white/10 rounded-lg px-4 py-2 text-sm text-white placeholder-white/30 outline-none focus:border-emerald-500/50 transition-colors w-64"
+                    />
+                    <button type="submit" className="bg-emerald-500/20 hover:bg-emerald-500/40 border border-emerald-500/50 text-emerald-300 px-4 py-2 rounded-lg text-sm font-bold transition-all shadow-[0_0_15px_rgba(52,211,153,0.3)] hover:shadow-[0_0_20px_rgba(52,211,153,0.6)] flex items-center gap-2">
+                        {loading ? (
+                            <svg className="animate-spin h-4 w-4 text-emerald-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                        ) : 'Query'}
+                    </button>
+                </form>
+            </div>
+
+            {error && (
+                <div className="bg-red-500/20 border border-red-500/50 text-red-300 px-4 py-3 rounded-lg text-xs mb-4 flex items-center gap-2 z-10">
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
+                    {error}
+                </div>
+            )}
+
+            {/* Memory List */}
+            <div className="flex-1 overflow-y-auto pr-2 space-y-4 z-10 custom-scrollbar">
+                {memories.length === 0 && !loading && !error ? (
+                    <div className="flex flex-col items-center justify-center h-full text-slate-500 space-y-3">
+                        <svg className="w-12 h-12 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
+                        <p className="text-sm">No episodic memories found.</p>
+                    </div>
+                ) : (
+                    memories.map(mem => {
+                        const isTrauma = mem.payload?.thought?.toLowerCase().includes('trauma') || mem.payload?.action?.toLowerCase().includes('fail');
+                        const borderColor = isTrauma ? 'border-red-500/30' : 'border-emerald-500/20';
+                        const bgTint = isTrauma ? 'bg-red-500/5' : 'bg-white/5';
+
+                        return (
+                            <div key={mem.id} className={`p-4 rounded-xl border ${borderColor} ${bgTint} hover:bg-white/10 transition-colors group relative`}>
+                                <div className="absolute top-4 right-4 flex items-center gap-2">
+                                    <span className="text-[10px] text-slate-500 font-mono">Score: {mem.score.toFixed(3)}</span>
+                                    <button
+                                        onClick={() => handleDelete(mem.id)}
+                                        title="Purge Memory"
+                                        className="w-6 h-6 rounded flex items-center justify-center bg-red-500/10 text-red-400 hover:bg-red-500 hover:text-white transition-colors border border-red-500/30 opacity-0 group-hover:opacity-100"
+                                    >
+                                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                                    </button>
+                                </div>
+                                <div className="text-xs text-slate-400 mb-1 flex items-center gap-2">
+                                    <span className="text-white/50">{mem.id.substring(0, 8)}</span>
+                                    {mem.payload?.agent_id && (
+                                        <span className="text-emerald-400 font-mono bg-emerald-500/10 px-1 py-0.5 rounded">
+                                            {mem.payload.agent_id}
+                                        </span>
+                                    )}
+                                </div>
+
+                                {mem.payload?.thought && (
+                                    <div className="mt-2 text-sm text-slate-200">
+                                        <span className="text-white/40 block text-[10px] uppercase font-bold mb-1 tracking-wider">Thought</span>
+                                        {mem.payload.thought}
+                                    </div>
+                                )}
+
+                                <div className="grid grid-cols-2 gap-4 mt-3">
+                                    {mem.payload?.action && (
+                                        <div className="bg-black/30 rounded p-2 border border-white/5">
+                                            <span className="text-purple-400 block text-[10px] uppercase font-bold mb-1 tracking-wider">Action</span>
+                                            <p className="text-xs text-slate-300 font-mono break-all">{mem.payload.action}</p>
+                                        </div>
+                                    )}
+                                    {mem.payload?.observation && (
+                                        <div className="bg-black/30 rounded p-2 border border-white/5">
+                                            <span className="text-cyan-400 block text-[10px] uppercase font-bold mb-1 tracking-wider">Observation</span>
+                                            <p className="text-xs text-slate-300 break-words">{mem.payload.observation}</p>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {(!mem.payload?.thought && !mem.payload?.action) && (
+                                    <div className="mt-2 text-xs text-slate-400 font-mono break-all">
+                                        {mem.payload?.text || JSON.stringify(mem.payload)}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })
+                )}
+            </div>
+
+            <style>{`
+                .custom-scrollbar::-webkit-scrollbar {
+                    width: 6px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-track {
+                    background: rgba(255, 255, 255, 0.02);
+                    border-radius: 4px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-thumb {
+                    background: rgba(52, 211, 153, 0.2);
+                    border-radius: 4px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+                    background: rgba(52, 211, 153, 0.4);
+                }
+            `}</style>
+        </div>
+    );
+};

package/src/widgets/MobileLinkWidget.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import * as Lucide from 'lucide-react';
+import { kernel } from '@decido/kernel-bridge';
+
+export const MobileLinkWidget = () => {
+    const [machineId, setMachineId] = useState("MAC-OS-1");
+    // TODO: Phase 4: Retrieve dynamic local IP from Tauri instead of hardcoding
+    const localIp = "192.168.1.15";
+
+    useEffect(() => {
+        const fetchId = async () => {
+            try {
+                const id = await kernel.execute('get_machine_id');
+                if (id) setMachineId(id as string);
+            } catch (e) { }
+        };
+        fetchId();
+    }, []);
+
+    const connectionString = JSON.stringify({
+        host: localIp,
+        port: 6379,
+        token: "SECURE_AUTH_TOKEN_GEN_BY_RUST",
+        masterId: machineId
+    });
+
+    return (
+        <div className="p-6 bg-zinc-900 border border-white/5 rounded-3xl text-center w-full h-full flex flex-col justify-center items-center">
+            <h3 className="text-lg font-bold text-white mb-4 flex items-center justify-center gap-2">
+                <Lucide.Smartphone className="text-cyan-400" /> Vincular Dispositivo
+            </h3>
+            <div className="bg-white p-4 rounded-2xl inline-block mb-4 shadow-[0_0_30px_rgba(255,255,255,0.1)]">
+                <QRCodeSVG value={connectionString} size={180} />
+            </div>
+            <p className="text-[10px] text-zinc-500 uppercase tracking-widest font-mono">
+                Escanea para activar el modo Thin Client
+            </p>
+        </div>
+    );
+};

package/src/widgets/Node3DWidget.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { ShieldCheck } from 'lucide-react';
+
+interface Node3DProps {
+    data: {
+        label: string;
+        status: 'idle' | 'active' | 'error';
+        load: number;
+        isRemote?: boolean;
+        lastThought?: string;
+        lastAction?: string;
+        isThinking?: boolean;
+        thoughtTimestamp?: number;
+        isVerified?: boolean;
+    };
+}
+
+export const Node3DWidget: React.FC<Node3DProps> = ({ data }) => {
+    const [showThought, setShowThought] = React.useState(false);
+
+    // Calculamos el nivel de "Glow" basado en el load (0-100)
+    const glowIntensity = (data.load / 100) * 20;
+
+    React.useEffect(() => {
+        if (data.lastThought && data.thoughtTimestamp) {
+            setShowThought(true);
+            const timeout = setTimeout(() => {
+                setShowThought(false);
+            }, 5000); // Hide thought after 5 seconds of inactivity
+            return () => clearTimeout(timeout);
+        }
+    }, [data.lastThought, data.thoughtTimestamp]);
+
+    // Advanced visual CSS representations mimicking 3D WebGL structs
+    const statusColors = {
+        idle: 'from-gray-700 to-gray-900 border-gray-500',
+        active: 'from-purple-600 to-cyan-500 border-cyan-400',
+        error: 'from-red-600 to-red-900 border-red-500'
+    };
+
+    const shadowGlow = data.isRemote
+        ? 'shadow-[0_0_30px_rgba(34,211,238,0.6)] border-cyan-400'
+        : (data.status === 'active'
+            ? 'shadow-[0_0_30px_rgba(192,132,252,0.4)]'
+            : 'shadow-2xl');
+
+    const remoteBadge = data.isRemote ? (
+        <div className="absolute -top-3 -right-3 bg-cyan-500 text-black text-[10px] uppercase font-bold px-2 py-0.5 rounded-full shadow-lg border border-cyan-200">
+            REMOTE
+        </div>
+    ) : null;
+
+    return (
+        <div className={`relative px-6 py-4 rounded-xl border border-white/20 bg-gradient-to-br ${statusColors[data.status]} ${shadowGlow} transform transition-all hover:scale-105 backdrop-blur-md`}>
+            {remoteBadge}
+
+            {/* ANILLO DE ACTIVIDAD EXTERNO */}
+            {data.status === 'active' && (
+                <div
+                    className="absolute -inset-2 rounded-xl opacity-50 animate-pulse pointer-events-none"
+                    style={{
+                        border: `2px solid #22d3ee`,
+                        boxShadow: `0 0 ${glowIntensity}px #22d3ee`,
+                        transition: 'all 0.3s ease'
+                    }}
+                />
+            )}
+
+            {/* Cognitive Speech Bubble */}
+            <div className={`absolute -top-16 left-1/2 -translate-x-1/2 min-w-[200px] max-w-[250px] p-2.5 rounded-lg bg-black/80 backdrop-blur-xl border border-white/10 shadow-2xl transition-all duration-300 origin-bottom pointer-events-none z-50 ${showThought ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-95 translate-y-2'}`}>
+                <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[8px] border-transparent border-t-white/10"></div>
+                <div className="absolute -bottom-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-[5px] border-r-[5px] border-t-[7px] border-transparent border-t-black/80"></div>
+                <div className="text-[10px] text-cyan-400 font-bold mb-1 flex items-center gap-1">
+                    <div className="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse"></div>
+                    {data.lastAction || 'THINKING...'}
+                </div>
+                <div className="text-xs text-white/90 leading-tight line-clamp-3">
+                    {data.lastThought || 'Initialising cognitive cycle...'}
+                </div>
+            </div>
+
+            <Handle type="target" position={Position.Top} className="w-3 h-3 bg-white border-none" />
+
+            <div className="flex flex-col items-center">
+                {/* Pseudo-3D Core indicator */}
+                <div className="w-12 h-12 mb-3 rounded-full bg-black/50 border border-white/30 flex items-center justify-center relative overflow-hidden">
+                    <div className="absolute inset-0 bg-white/10 rotate-45 transform origin-center"></div>
+                    <div className={`w-4 h-4 rounded-full ${data.status === 'active' || showThought ? 'bg-cyan-400 animate-pulse shadow-[0_0_15px_#22d3ee]' : 'bg-white/20'}`}></div>
+                </div>
+
+                <div className="font-bold text-white tracking-wide flex items-center gap-2">
+                    {data.label}
+                    {data.isVerified && (
+                        <div title="Verificado Criptográficamente">
+                            <ShieldCheck className="w-3.5 h-3.5 text-green-400" />
+                        </div>
+                    )}
+                </div>
+
+                {/* BARRA DE PROCESAMIENTO INTERNA */}
+                <div className="w-full h-1.5 bg-white/10 rounded-full mt-2 overflow-hidden shadow-inner">
+                    <div
+                        className="h-full bg-cyan-400 transition-all duration-300 shadow-[0_0_10px_#22d3ee]"
+                        style={{ width: `${data.load}%` }}
+                    />
+                </div>
+                <div className="text-[10px] text-white/50 mt-1 uppercase font-bold tracking-widest">{data.load}% LOAD</div>
+            </div>
+
+            <Handle type="source" position={Position.Bottom} className="w-3 h-3 bg-white border-none" />
+        </div>
+    );
+};

package/src/widgets/PromptHubWidget.tsx

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from 'react';
+import { usePromptHubStore } from '../store/usePromptHubStore';
+import { Save, RefreshCw, Cpu, BrainCircuit, TerminalSquare, AlertCircle } from 'lucide-react';
+
+export const PromptHubWidget: React.FC = () => {
+    const { configs, isLoading, error, fetchConfigs, updateConfig } = usePromptHubStore();
+    const [selectedRole, setSelectedRole] = useState<string>('default');
+    const [localPrompt, setLocalPrompt] = useState<string>('');
+    const [localStrategy, setLocalStrategy] = useState<string>('');
+    const [isSaving, setIsSaving] = useState(false);
+
+    useEffect(() => {
+        fetchConfigs();
+    }, [fetchConfigs]);
+
+    useEffect(() => {
+        if (configs[selectedRole]) {
+            setLocalPrompt(configs[selectedRole].system_prompt);
+            setLocalStrategy(configs[selectedRole].model_strategy);
+        } else if (Object.keys(configs).length > 0) {
+            const firstKey = Object.keys(configs)[0];
+            setSelectedRole(firstKey);
+        }
+    }, [selectedRole, configs]);
+
+    const handleSave = async () => {
+        setIsSaving(true);
+        await updateConfig(selectedRole, localPrompt, localStrategy);
+        setIsSaving(false);
+    };
+
+    const modelOptions = [
+        { value: 'gemini:gemini-3-flash-preview', label: 'Gemini 3 Flash (Cloud)' },
+        { value: 'gemini:gemini-3.1-pro-preview', label: 'Gemini 3 Pro (Cloud)' },
+        { value: 'ollama:llama3.1:latest', label: 'LLaMA 3.1 8B (Local)' },
+        { value: 'ollama:qwen2.5:14b', label: 'Qwen 2.5 14B (Local)' }
+    ];
+
+    return (
+        <div className="flex w-full h-full bg-[#0a0f12]/80 backdrop-blur-xl border border-white/5 rounded-2xl overflow-hidden shadow-2xl text-slate-300 font-sans">
+            {/* Sidebar Roles */}
+            <div className="w-64 border-r border-white/5 bg-black/20 flex flex-col">
+                <div className="p-4 border-b border-white/5 flex items-center justify-between">
+                    <h2 className="text-sm font-semibold tracking-wider text-white/90 flex items-center gap-2">
+                        <BrainCircuit className="w-4 h-4 text-emerald-400" />
+                        AGENT ROLES
+                    </h2>
+                    <button
+                        onClick={() => fetchConfigs()}
+                        className="p-1 hover:bg-white/10 rounded-md transition-colors"
+                        title="Refresh Configs"
+                    >
+                        <RefreshCw className={`w-3.5 h-3.5 ${isLoading ? 'animate-spin opacity-50' : 'text-slate-400 hover:text-white'}`} />
+                    </button>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
+                    {Object.keys(configs).map((role) => (
+                        <button
+                            key={role}
+                            onClick={() => setSelectedRole(role)}
+                            className={`w-full text-left px-3 py-2 rounded-lg text-xs transition-all duration-200 flex items-center gap-2
+                ${selectedRole === role
+                                    ? 'bg-emerald-500/10 text-emerald-300 border border-emerald-500/20'
+                                    : 'text-slate-400 hover:bg-white/5 hover:text-slate-200 border border-transparent'
+                                }`}
+                        >
+                            <TerminalSquare className={`w-3.5 h-3.5 ${selectedRole === role ? 'text-emerald-400' : 'opacity-60'}`} />
+                            <span className="capitalize">{role.replace('_', ' ')}</span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* Editor Main Canvas */}
+            <div className="flex-1 flex flex-col bg-gradient-to-br from-[#0f1519] to-[#080b0d]">
+                {error && (
+                    <div className="m-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-3 text-red-400 text-xs">
+                        <AlertCircle className="w-4 h-4" />
+                        {error}
+                    </div>
+                )}
+
+                {configs[selectedRole] ? (
+                    <div className="flex-1 p-6 flex flex-col gap-6 overflow-y-auto">
+
+                        {/* Header / Strategy Select */}
+                        <div className="flex flex-col gap-2">
+                            <label className="text-[10px] font-bold tracking-widest text-slate-500 uppercase">
+                                Model Strategy Engine
+                            </label>
+                            <div className="relative group">
+                                <select
+                                    value={localStrategy}
+                                    onChange={(e) => setLocalStrategy(e.target.value)}
+                                    className="w-full bg-[#131a20] border border-white/10 hover:border-white/20 rounded-xl px-4 py-3 text-sm text-white appearance-none transition-all outline-none focus:border-emerald-500/50 shadow-inner"
+                                >
+                                    {modelOptions.map(opt => (
+                                        <option key={opt.value} value={opt.value}>{opt.label}</option>
+                                    ))}
+                                    {/* Dynamic fallback if config has unknown strategy */}
+                                    {!modelOptions.find(o => o.value === localStrategy) && (
+                                        <option value={localStrategy}>{localStrategy} (Custom)</option>
+                                    )}
+                                </select>
+                                <Cpu className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none group-hover:text-emerald-400 transition-colors" />
+                            </div>
+                        </div>
+
+                        {/* System Prompt Editor */}
+                        <div className="flex-1 flex flex-col gap-2 relative">
+                            <label className="text-[10px] font-bold tracking-widest text-slate-500 uppercase flex items-center justify-between">
+                                <span>Core System Directive</span>
+                                <span className="text-emerald-500/50 normal-case tracking-normal">Markdown Supported</span>
+                            </label>
+
+                            <div className="relative flex-1 group">
+                                {/* Glowing border effect */}
+                                <div className="absolute -inset-[1px] bg-gradient-to-b from-emerald-500/20 to-transparent rounded-xl opacity-0 group-focus-within:opacity-100 transition-opacity pointer-events-none" />
+
+                                <textarea
+                                    value={localPrompt}
+                                    onChange={(e) => setLocalPrompt(e.target.value)}
+                                    className="w-full h-full min-h-[300px] bg-[#0c1013] border border-white/5 hover:border-white/10 rounded-xl p-5 text-sm font-mono text-emerald-50/80 leading-relaxed outline-none focus:ring-0 resize-none transition-all custom-scrollbar shadow-inner"
+                                    spellCheck="false"
+                                    placeholder="Insert the Agent's architectural persona here..."
+                                />
+                            </div>
+                        </div>
+
+                        {/* Action Bar */}
+                        <div className="flex justify-end pt-2 border-t border-white/5">
+                            <button
+                                onClick={handleSave}
+                                disabled={isSaving || (localPrompt === configs[selectedRole].system_prompt && localStrategy === configs[selectedRole].model_strategy)}
+                                className="group relative px-6 py-2.5 bg-emerald-500 hover:bg-emerald-400 disabled:bg-slate-800 disabled:text-slate-500 rounded-lg text-sm font-medium text-black transition-all flex items-center gap-2 disabled:cursor-not-allowed overflow-hidden shadow-[0_0_20px_rgba(16,185,129,0.1)] hover:shadow-[0_0_30px_rgba(16,185,129,0.2)]"
+                            >
+                                {/* Shine effect */}
+                                <div className="absolute inset-0 -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12" />
+
+                                <Save className={`w-4 h-4 ${isSaving ? 'animate-pulse' : ''}`} />
+                                {isSaving ? 'Deploying to Swarm...' : 'Commit Protocol'}
+                            </button>
+                        </div>
+
+                    </div>
+                ) : (
+                    <div className="flex-1 flex flex-col items-center justify-center opacity-30">
+                        <BrainCircuit className="w-16 h-16 text-slate-600 mb-4" />
+                        <p className="text-sm">Initiating connection to Omni-Swarm or No configurations found.</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/widgets/SystemSentinelWidget.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer } from 'recharts';
+import * as Lucide from 'lucide-react';
+
+export const SystemSentinelWidget = ({ data }: any) => {
+    // This widget simulates observing the telemetry data injected via props
+    const [liveData, setLiveData] = useState({ history: [], current: { cpu: 0, gas: 0, mem: 0 } });
+
+    useEffect(() => {
+        if (data && data.current) {
+            setLiveData(data);
+        }
+    }, [data]);
+
+    const history = liveData?.history || [];
+    const current = liveData?.current || { cpu: 0, gas: 0, mem: 0 };
+
+    return (
+        <div className="p-4 bg-black/40 border border-cyan-500/20 rounded-2xl text-white font-sans h-full w-full flex flex-col">
+            <div className="flex justify-between items-center mb-4">
+                <h3 className="text-xs font-black tracking-widest text-cyan-400 uppercase flex items-center gap-2">
+                    <Lucide.Activity size={14} /> System Sentinel Live
+                </h3>
+                <div className="flex gap-4">
+                    <span className="text-[10px] text-white/50">CPU: <b className="text-white">{current.cpu?.toFixed(1)}%</b></span>
+                    <span className="text-[10px] text-white/50">GAS: <b className="text-white">{current.gas?.toFixed(1)}</b></span>
+                </div>
+            </div>
+
+            <div className="flex-1 min-h-[150px]">
+                <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={history}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="#222" />
+                        <XAxis dataKey="time" hide />
+                        <YAxis hide domain={[0, 100]} />
+                        <Tooltip contentStyle={{ backgroundColor: '#111', border: '1px solid #333', fontSize: '10px' }} />
+                        <Line type="monotone" dataKey="cpu" stroke="#06b6d4" strokeWidth={2} dot={false} isAnimationActive={false} />
+                        <Line type="monotone" dataKey="gas" stroke="#f59e0b" strokeWidth={2} dot={false} isAnimationActive={false} />
+                    </LineChart>
+                </ResponsiveContainer>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2 mt-4">
+                <div className="bg-white/5 p-2 rounded-lg border border-white/5">
+                    <div className="text-[9px] text-cyan-400 uppercase font-bold">Inference Load</div>
+                    <div className="text-lg font-mono tracking-tighter">{(current.cpu * 1.2).toFixed(0)} MHz</div>
+                </div>
+                <div className="bg-white/5 p-2 rounded-lg border border-white/5">
+                    <div className="text-[9px] text-amber-500 uppercase font-bold">Economy Balance</div>
+                    <div className="text-lg font-mono tracking-tighter">{Math.max(0, 1000 - current.gas).toFixed(0)} G</div>
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/widgets/TelemetryHUDWidget.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { AreaChart, Area, ResponsiveContainer, YAxis, Tooltip } from 'recharts';
+
+interface TelemetryPoint {
+    time: string;
+    cpu: number;
+    memory: number;
+    intents: number;
+    latency: number;
+}
+
+export const TelemetryHUDWidget: React.FC = () => {
+    const [history, setHistory] = useState<TelemetryPoint[]>([]);
+
+    useEffect(() => {
+        // Pre-fill some empty data to make chart look continuous at start
+        const initial = Array(20).fill(null).map((_, i) => ({
+            time: new Date(Date.now() - (20 - i) * 1000).toLocaleTimeString(),
+            cpu: 0, memory: 0, intents: 0, latency: 0
+        }));
+        setHistory(initial);
+
+        const interval = setInterval(() => {
+            setHistory(prev => {
+                const now = new Date();
+                const newPoint = {
+                    time: now.toLocaleTimeString(),
+                    cpu: Math.floor(Math.random() * 60) + 10, // Simulated 10-70% CPU
+                    memory: Math.floor(Math.random() * 500) + 2000, // Simulated 2-2.5GB
+                    intents: Math.floor(Math.random() * 5),
+                    latency: Math.floor(Math.random() * 50) + 20, // 20-70ms
+                };
+                const next = [...prev, newPoint];
+                if (next.length > 20) next.shift();
+                return next;
+            });
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const current = history[history.length - 1] || { cpu: 0, memory: 0, intents: 0, latency: 0 };
+
+    return (
+        <div className="h-full w-full p-6 text-sm flex flex-col gap-4 font-mono text-cyan-500 overflow-y-auto">
+            <h3 className="text-white/80 font-bold mb-2">Fleet Telemetry HUD</h3>
+
+            <div className="grid grid-cols-2 gap-4 flex-none">
+                <div className="bg-black/40 border border-cyan-500/30 p-4 rounded-xl shadow-[0_0_15px_rgba(34,211,238,0.1)]">
+                    <span className="block text-white/50 mb-1">CPU Core Load</span>
+                    <span className="text-2xl font-bold">{current.cpu}%</span>
+                </div>
+                <div className="bg-black/40 border border-cyan-500/30 p-4 rounded-xl shadow-[0_0_15px_rgba(34,211,238,0.1)]">
+                    <span className="block text-white/50 mb-1">Heap Memory</span>
+                    <span className="text-2xl font-bold">{(current.memory / 1024).toFixed(2)} GB</span>
+                </div>
+                <div className="bg-black/40 border border-purple-500/30 p-4 rounded-xl shadow-[0_0_15px_rgba(192,132,252,0.1)]">
+                    <span className="block text-white/50 mb-1">Active Intents</span>
+                    <span className="text-2xl font-bold text-purple-400">{current.intents}</span>
+                </div>
+                <div className="bg-black/40 border border-cyan-500/30 p-4 rounded-xl shadow-[0_0_15px_rgba(34,211,238,0.1)]">
+                    <span className="block text-white/50 mb-1">Net Latency</span>
+                    <span className="text-2xl font-bold">{current.latency} ms</span>
+                </div>
+            </div>
+
+            {/* Recharts Area */}
+            <div className="flex-1 mt-4 min-h-[200px] bg-black/40 border border-white/5 rounded-xl p-4 relative">
+                <span className="absolute top-4 left-4 text-xs font-bold text-white/30 tracking-widest uppercase z-10">Resource Usage History</span>
+                <ResponsiveContainer width="100%" height="100%">
+                    <AreaChart data={history} margin={{ top: 20, right: 0, left: -20, bottom: 0 }}>
+                        <defs>
+                            <linearGradient id="colorCpu" x1="0" y1="0" x2="0" y2="1">
+                                <stop offset="5%" stopColor="#22d3ee" stopOpacity={0.3} />
+                                <stop offset="95%" stopColor="#22d3ee" stopOpacity={0} />
+                            </linearGradient>
+                            <linearGradient id="colorMem" x1="0" y1="0" x2="0" y2="1">
+                                <stop offset="5%" stopColor="#c084fc" stopOpacity={0.3} />
+                                <stop offset="95%" stopColor="#c084fc" stopOpacity={0} />
+                            </linearGradient>
+                        </defs>
+                        <YAxis stroke="#ffffff22" tick={{ fill: '#ffffff66', fontSize: 10 }} />
+                        <Tooltip
+                            contentStyle={{ backgroundColor: '#000000cc', borderColor: '#ffffff22', borderRadius: '8px', fontSize: '12px' }}
+                            itemStyle={{ color: '#fff' }}
+                            labelStyle={{ color: '#aaa', marginBottom: '4px' }}
+                        />
+                        <Area type="monotone" dataKey="memory" stackId="1" stroke="#c084fc" fillOpacity={1} fill="url(#colorMem)" name="Memory (MB)" />
+                        <Area type="monotone" dataKey="cpu" stackId="2" stroke="#22d3ee" fillOpacity={1} fill="url(#colorCpu)" name="CPU (%)" />
+                    </AreaChart>
+                </ResponsiveContainer>
+            </div>
+
+            <div className="mt-2 pt-4 border-t border-white/10 text-[10px] uppercase tracking-widest text-white/30 flex justify-between">
+                <span>Kernel-Bridge Open</span>
+                <span>Tauri Native FFI</span>
+            </div>
+        </div>
+    );
+};

package/src/widgets/VaultWidget.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react';
+import { kernel } from '@decido/kernel-bridge';
+
+export const VaultWidget = () => {
+    const [constructs, setConstructs] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    const loadConstructs = async () => {
+        try {
+            setLoading(true);
+            const data = await kernel.execute('list_constructs', {});
+            setConstructs(data as any[]);
+        } catch (e) {
+            console.error("Error loading constructs:", e);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadConstructs();
+
+        // Listen to newly materialized constructs
+        const unsub = kernel.onEvent((payload: any) => {
+            if (payload.event_type === 'notification' && payload.data?.title === '💎 Constructo Materializado') {
+                loadConstructs();
+            }
+        });
+
+        return () => unsub();
+    }, []);
+
+    const spawnConstruct = (c: any) => {
+        // Enviar evento global que PlaygroundEngine interceptará
+        kernel.execute('broadcast_message', {
+            intent: "ui:spawn_dynamic_widget",
+            payload: JSON.stringify({
+                code: c.code,
+                name: c.title,
+                missionData: {}
+            })
+        }).catch(e => console.error(e));
+    };
+
+    return (
+        <div className="p-6 h-full text-white bg-black/50 overflow-y-auto">
+            <div className="flex justify-between items-center mb-6 border-b border-white/10 pb-4">
+                <h2 className="text-2xl font-black tracking-tight bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
+                    Construct Vault
+                </h2>
+                <button
+                    onClick={loadConstructs}
+                    className="bg-white/5 border border-white/10 px-4 py-1.5 rounded-full text-xs font-bold hover:bg-white/10 transition-colors"
+                >
+                    REFRESCAR BÓVEDA
+                </button>
+            </div>
+
+            {loading ? (
+                <div className="animate-pulse flex space-x-4">
+                    <div className="flex-1 space-y-4 py-1">
+                        <div className="h-2 bg-slate-700/50 rounded w-1/4"></div>
+                        <div className="h-2 bg-slate-700/50 rounded w-1/2"></div>
+                    </div>
+                </div>
+            ) : constructs.length === 0 ? (
+                <div className="flex flex-col items-center justify-center text-white/40 h-64 border-2 border-dashed border-white/10 rounded-2xl bg-white/5 p-8 text-center">
+                    <span className="text-4xl mb-4">🗄️</span>
+                    <h3 className="text-lg font-bold mb-2">Bóveda Vacía</h3>
+                    <p className="text-sm max-w-sm">No hay constructos materializados todavía. Pídele al agente que diseñe uno y guárdalo usando el botón "MATERIALIZAR CONSTRUCTO".</p>
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                    {constructs.map((c, i) => (
+                        <div
+                            key={i}
+                            className="group bg-gradient-to-br from-white/5 to-transparent border border-white/10 p-5 rounded-2xl flex flex-col justify-between hover:border-emerald-500/50 transition-all hover:scale-[1.02] shadow-xl backdrop-blur-sm"
+                        >
+                            <div>
+                                <div className="flex justify-between items-start mb-3">
+                                    <h3 className="text-lg font-black text-emerald-400 leading-tight">{c.title}</h3>
+                                    <span className="text-[10px] text-white/30 font-mono tracking-widest">{new Date(c.timestamp).toLocaleDateString()}</span>
+                                </div>
+                                <p className="text-xs text-white/60 mb-6 line-clamp-4 leading-relaxed">{c.description}</p>
+                            </div>
+
+                            <button
+                                onClick={() => spawnConstruct(c)}
+                                className="w-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 font-bold py-2.5 rounded-xl hover:bg-emerald-500 hover:text-black transition-all shadow-[0_0_15px_rgba(16,185,129,0.1)] group-hover:shadow-[0_0_20px_rgba(16,185,129,0.3)] text-xs uppercase tracking-wider"
+                            >
+                                Instanciar Constructo
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "~/*": [
+                "./src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ]
+}