@praveencs/agent 0.9.29 → 0.10.0

package/studio/src/components/MemoryExplorer.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Brain, Search, Plus, Trash2 } from 'lucide-react';
+
+const API = 'http://localhost:3333/api';
+
+const categoryColors: Record<string, string> = {
+    project: 'text-blue-400 bg-blue-500/10',
+    preference: 'text-purple-400 bg-purple-500/10',
+    fact: 'text-emerald-400 bg-emerald-500/10',
+    learned: 'text-amber-400 bg-amber-500/10',
+    general: 'text-neutral-400 bg-neutral-500/10',
+};
+
+export function MemoryExplorer() {
+    const { id } = useParams<{ id: string }>();
+    const [data, setData] = useState<any>(null);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState<any[] | null>(null);
+    const [showAdd, setShowAdd] = useState(false);
+    const [form, setForm] = useState({ content: '', category: 'general', tags: '' });
+
+    const emptyData = { stats: { total: 0, byCategory: {}, bySource: {} }, memories: [] };
+
+    const load = async () => {
+        try {
+            const res = await fetch(`${API}/instances/${id}/memory`);
+            if (!res.ok) { setData(emptyData); return; }
+            const d = await res.json();
+            setData(d ?? emptyData);
+        } catch { setData(emptyData); }
+    };
+
+    useEffect(() => { load(); }, [id]);
+
+    const search = async () => {
+        if (!searchQuery.trim()) { setSearchResults(null); return; }
+        try {
+            const res = await fetch(`${API}/instances/${id}/memory/search?q=${encodeURIComponent(searchQuery)}`);
+            if (!res.ok) { setSearchResults([]); return; }
+            const d = await res.json();
+            setSearchResults(d.results || []);
+        } catch { setSearchResults([]); }
+    };
+
+    const addMemory = async () => {
+        if (!form.content.trim()) return;
+        await fetch(`${API}/instances/${id}/memory`, {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                content: form.content, category: form.category,
+                tags: form.tags ? form.tags.split(',').map(s => s.trim()) : [],
+            }),
+        });
+        setForm({ content: '', category: 'general', tags: '' });
+        setShowAdd(false);
+        load();
+    };
+
+    const deleteMemory = async (memoryId: number) => {
+        await fetch(`${API}/instances/${id}/memory/${memoryId}`, { method: 'DELETE' });
+        load();
+    };
+
+    if (!data) return <div className="p-8 text-neutral-500 animate-pulse">Loading memories...</div>;
+
+    const stats = data.stats ?? { total: 0, byCategory: {}, bySource: {} };
+    const memories = searchResults ?? data.memories ?? [];
+
+    return (
+        <div className="flex flex-col h-full bg-neutral-950 overflow-y-auto p-8">
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h2 className="text-xl font-semibold flex items-center gap-2">
+                        <Brain className="text-violet-400" size={22} /> Memory Explorer
+                    </h2>
+                    <p className="text-neutral-500 text-sm mt-1">{stats.total} memories stored</p>
+                </div>
+                <button onClick={() => setShowAdd(!showAdd)}
+                    className="flex items-center gap-2 px-4 py-2 rounded-lg bg-violet-500/20 border border-violet-500/30 text-violet-300 text-sm font-medium hover:bg-violet-500/30 transition-colors">
+                    <Plus size={16} /> Add Memory
+                </button>
+            </div>
+
+            {/* Stats */}
+            <div className="grid grid-cols-5 gap-3 mb-6">
+                {Object.entries(stats.byCategory || {}).map(([cat, count]) => (
+                    <div key={cat} className="border border-white/10 rounded-lg p-3 bg-white/[0.02] text-center">
+                        <div className={`text-xs font-medium uppercase tracking-wider ${categoryColors[cat]?.split(' ')[0] ?? 'text-neutral-400'}`}>{cat}</div>
+                        <div className="text-lg font-semibold text-neutral-200 mt-1">{count as number}</div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Search */}
+            <div className="flex gap-3 mb-6">
+                <div className="flex-1 relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-600" size={16} />
+                    <input value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
+                        onKeyDown={e => e.key === 'Enter' && search()}
+                        placeholder="Search memories..."
+                        className="w-full bg-neutral-900 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 text-sm placeholder-neutral-600 focus:outline-none focus:border-violet-500/50" />
+                </div>
+                <button onClick={search} className="px-4 py-2.5 rounded-lg bg-violet-500/20 border border-violet-500/30 text-violet-300 text-sm font-medium hover:bg-violet-500/30 transition-colors">Search</button>
+                {searchResults && (
+                    <button onClick={() => { setSearchResults(null); setSearchQuery(''); }} className="px-3 text-sm text-neutral-500 hover:text-neutral-300">Clear</button>
+                )}
+            </div>
+
+            {/* Add Memory Form */}
+            {showAdd && (
+                <div className="border border-white/10 rounded-xl p-5 bg-white/[0.02] mb-6 space-y-4">
+                    <textarea value={form.content} onChange={e => setForm({ ...form, content: e.target.value })} placeholder="Memory content..."
+                        rows={3} className="w-full bg-neutral-900 border border-white/10 rounded-lg px-4 py-2.5 text-sm placeholder-neutral-600 focus:outline-none focus:border-violet-500/50 resize-none" />
+                    <div className="flex gap-4">
+                        <select value={form.category} onChange={e => setForm({ ...form, category: e.target.value })}
+                            className="bg-neutral-900 border border-white/10 rounded-lg px-3 py-2 text-sm">
+                            <option value="general">General</option>
+                            <option value="fact">Fact</option>
+                            <option value="project">Project</option>
+                            <option value="preference">Preference</option>
+                            <option value="learned">Learned</option>
+                        </select>
+                        <input value={form.tags} onChange={e => setForm({ ...form, tags: e.target.value })} placeholder="Tags (comma-separated)..."
+                            className="flex-1 bg-neutral-900 border border-white/10 rounded-lg px-4 py-2 text-sm placeholder-neutral-600 focus:outline-none focus:border-violet-500/50" />
+                        <button onClick={addMemory} className="px-4 py-2 rounded-lg bg-violet-500 text-white text-sm font-medium hover:bg-violet-600 transition-colors">Save</button>
+                    </div>
+                </div>
+            )}
+
+            {/* Memory List */}
+            <div className="space-y-2">
+                {memories.map((m: any) => (
+                    <div key={m.id} className="border border-white/10 rounded-lg bg-white/[0.02] p-4 flex items-start gap-3 hover:border-white/20 transition-all">
+                        <span className={`text-[10px] font-mono px-2 py-0.5 rounded mt-0.5 ${categoryColors[m.category] ?? categoryColors.general}`}>{m.category}</span>
+                        <div className="flex-1 min-w-0">
+                            <div className="text-sm text-neutral-300 leading-relaxed">{m.content}</div>
+                            <div className="flex items-center gap-3 mt-2">
+                                <span className="text-[10px] text-neutral-600">{m.source}</span>
+                                <span className="text-[10px] text-neutral-600">{new Date(m.created_at).toLocaleString()}</span>
+                                {m.tags?.length > 0 && m.tags.map((t: string) => (
+                                    <span key={t} className="text-[10px] text-neutral-500 bg-neutral-800 px-1.5 py-0.5 rounded">{t}</span>
+                                ))}
+                            </div>
+                        </div>
+                        <button onClick={() => deleteMemory(m.id)} className="p-1.5 rounded hover:bg-white/10 text-red-400 shrink-0"><Trash2 size={14} /></button>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

package/studio/src/components/MultimodalPanel.tsx

@@ -0,0 +1,150 @@
+import { useState } from 'react';
+
+export default function MultimodalPanel() {
+    const [activeTab, setActiveTab] = useState<'voice' | 'vision' | 'tts'>('voice');
+    const [result, setResult] = useState<string>('');
+    const [loading, setLoading] = useState(false);
+    const [imagePrompt, setImagePrompt] = useState('Describe this image in detail.');
+
+    const tabs = [
+        { id: 'voice' as const, label: '🎤 Voice', desc: 'Speech-to-Text (Whisper)' },
+        { id: 'vision' as const, label: '👁️ Vision', desc: 'Image Analysis (GPT-4o)' },
+        { id: 'tts' as const, label: '🔊 TTS', desc: 'Text-to-Speech' },
+    ];
+
+    const handleVoiceUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        setLoading(true);
+        setResult('');
+        try {
+            const formData = new FormData();
+            formData.append('audio', file);
+            const res = await fetch('/api/multimodal/transcribe', { method: 'POST', body: formData });
+            const data = await res.json();
+            setResult(data.text || JSON.stringify(data));
+        } catch (err) {
+            setResult(`Error: ${(err as Error).message}`);
+        } finally { setLoading(false); }
+    };
+
+    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        setLoading(true);
+        setResult('');
+        try {
+            const formData = new FormData();
+            formData.append('image', file);
+            formData.append('prompt', imagePrompt);
+            const res = await fetch('/api/multimodal/analyze', { method: 'POST', body: formData });
+            const data = await res.json();
+            setResult(data.description || JSON.stringify(data));
+        } catch (err) {
+            setResult(`Error: ${(err as Error).message}`);
+        } finally { setLoading(false); }
+    };
+
+    const [ttsText, setTtsText] = useState('');
+    const [ttsVoice, setTtsVoice] = useState('alloy');
+
+    const handleSpeak = async () => {
+        if (!ttsText.trim()) return;
+        setLoading(true);
+        setResult('');
+        try {
+            const res = await fetch('/api/multimodal/speak', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text: ttsText, voice: ttsVoice }),
+            });
+            const data = await res.json();
+            setResult(`Audio saved: ${data.audioPath} (${data.format})`);
+        } catch (err) {
+            setResult(`Error: ${(err as Error).message}`);
+        } finally { setLoading(false); }
+    };
+
+    return (
+        <div className="p-6 space-y-6 overflow-y-auto h-full">
+            <div>
+                <h2 className="text-xl font-semibold mb-1">🌈 Multimodal Interfaces</h2>
+                <p className="text-neutral-500 text-sm">Voice input, image analysis, and text-to-speech powered by OpenAI.</p>
+            </div>
+
+            {/* Tab Switcher */}
+            <div className="flex gap-2">
+                {tabs.map(t => (
+                    <button
+                        key={t.id}
+                        onClick={() => { setActiveTab(t.id); setResult(''); }}
+                        className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${activeTab === t.id
+                                ? 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20'
+                                : 'bg-neutral-900/40 text-neutral-400 border-white/10 hover:bg-white/5'
+                            }`}
+                    >
+                        {t.label}
+                    </button>
+                ))}
+            </div>
+
+            {/* Active Panel */}
+            <div className="border border-white/10 rounded-xl bg-neutral-900/40 p-6">
+                {activeTab === 'voice' && (
+                    <div className="space-y-4">
+                        <h3 className="text-sm font-medium">Upload Audio File</h3>
+                        <p className="text-xs text-neutral-500">Supports WAV, MP3, WebM. Uses OpenAI Whisper for transcription.</p>
+                        <input type="file" accept="audio/*" onChange={handleVoiceUpload}
+                            className="text-sm text-neutral-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border file:border-white/10 file:bg-neutral-800 file:text-neutral-300 file:text-sm hover:file:bg-neutral-700 file:cursor-pointer" />
+                    </div>
+                )}
+
+                {activeTab === 'vision' && (
+                    <div className="space-y-4">
+                        <h3 className="text-sm font-medium">Upload Image for Analysis</h3>
+                        <p className="text-xs text-neutral-500">Uses GPT-4o vision to understand image content.</p>
+                        <input value={imagePrompt} onChange={e => setImagePrompt(e.target.value)}
+                            className="w-full bg-neutral-800 border border-white/10 rounded-lg px-3 py-2 text-sm" placeholder="Analysis prompt..." />
+                        <input type="file" accept="image/*" onChange={handleImageUpload}
+                            className="text-sm text-neutral-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border file:border-white/10 file:bg-neutral-800 file:text-neutral-300 file:text-sm hover:file:bg-neutral-700 file:cursor-pointer" />
+                    </div>
+                )}
+
+                {activeTab === 'tts' && (
+                    <div className="space-y-4">
+                        <h3 className="text-sm font-medium">Text to Speech</h3>
+                        <p className="text-xs text-neutral-500">Convert text to natural speech using OpenAI TTS.</p>
+                        <textarea value={ttsText} onChange={e => setTtsText(e.target.value)} rows={3}
+                            className="w-full bg-neutral-800 border border-white/10 rounded-lg px-3 py-2 text-sm resize-none" placeholder="Enter text to speak..." />
+                        <div className="flex items-center gap-3">
+                            <select value={ttsVoice} onChange={e => setTtsVoice(e.target.value)}
+                                className="bg-neutral-800 border border-white/10 rounded-lg px-3 py-2 text-sm">
+                                {['alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer'].map(v =>
+                                    <option key={v} value={v}>{v}</option>
+                                )}
+                            </select>
+                            <button onClick={handleSpeak}
+                                className="px-4 py-2 bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 rounded-lg text-sm hover:bg-indigo-500/20 transition-colors">
+                                Generate Speech
+                            </button>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Result Area */}
+            {(loading || result) && (
+                <div className="border border-white/10 rounded-xl bg-neutral-900/40 p-5">
+                    <h3 className="text-sm font-medium mb-3">Result</h3>
+                    {loading ? (
+                        <div className="text-neutral-500 text-sm">Processing...</div>
+                    ) : (
+                        <div className="bg-black/30 rounded-lg p-4 text-sm text-neutral-300 whitespace-pre-wrap">
+                            {result}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/studio/src/components/NotificationsPanel.tsx

@@ -0,0 +1,175 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { Bell, CheckCircle2, AlertTriangle, XCircle, Info, RefreshCw, Clock } from 'lucide-react';
+
+const API = '';
+
+interface Notification {
+    timestamp: string;
+    level: string;
+    title: string;
+    message: string;
+}
+
+const levelConfig: Record<string, { icon: typeof Bell; color: string; bg: string; border: string; label: string }> = {
+    success: { icon: CheckCircle2, color: '#22c55e', bg: 'rgba(34,197,94,0.08)', border: 'rgba(34,197,94,0.2)', label: 'SUCCESS' },
+    error: { icon: XCircle, color: '#ef4444', bg: 'rgba(239,68,68,0.08)', border: 'rgba(239,68,68,0.2)', label: 'ERROR' },
+    warning: { icon: AlertTriangle, color: '#f59e0b', bg: 'rgba(245,158,11,0.08)', border: 'rgba(245,158,11,0.2)', label: 'WARNING' },
+    info: { icon: Info, color: '#6366f1', bg: 'rgba(99,102,241,0.08)', border: 'rgba(99,102,241,0.2)', label: 'INFO' },
+};
+
+function timeAgo(timestamp: string): string {
+    const diff = Date.now() - new Date(timestamp).getTime();
+    if (diff < 60000) return 'just now';
+    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+    return `${Math.floor(diff / 86400000)}d ago`;
+}
+
+export default function NotificationsPanel() {
+    const { id } = useParams();
+    const [notifications, setNotifications] = useState<Notification[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [filter, setFilter] = useState<string>('all');
+
+    const load = useCallback(() => {
+        setLoading(true);
+        fetch(`${API}/api/instances/${id}/notifications`)
+            .then(r => r.json())
+            .then(d => setNotifications(d.notifications || []))
+            .catch(console.error)
+            .finally(() => setLoading(false));
+    }, [id]);
+
+    useEffect(() => {
+        load();
+        const interval = setInterval(load, 10000);
+        return () => clearInterval(interval);
+    }, [load]);
+
+    const filtered = filter === 'all' ? notifications : notifications.filter(n => n.level === filter);
+
+    const counts = {
+        all: notifications.length,
+        success: notifications.filter(n => n.level === 'success').length,
+        error: notifications.filter(n => n.level === 'error').length,
+        warning: notifications.filter(n => n.level === 'warning').length,
+        info: notifications.filter(n => n.level === 'info').length,
+    };
+
+    return (
+        <div style={{ padding: 32, maxWidth: 900, overflowY: 'auto', height: '100%' }}>
+            {/* Header */}
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                    <Bell size={28} color="#f59e0b" />
+                    <h2 style={{ margin: 0, color: '#fff', fontSize: 22 }}>Notifications</h2>
+                    <span style={{ color: '#555', fontSize: 13 }}>({notifications.length})</span>
+                </div>
+                <button
+                    onClick={load}
+                    style={{
+                        display: 'flex', alignItems: 'center', gap: 6,
+                        padding: '6px 14px', background: '#1a1a2e',
+                        border: '1px solid #2a2a40', borderRadius: 8,
+                        color: '#aaa', fontSize: 12, cursor: 'pointer',
+                    }}
+                >
+                    <RefreshCw size={13} className={loading ? 'animate-spin' : ''} /> Refresh
+                </button>
+            </div>
+
+            {/* Filter Tabs */}
+            <div style={{ display: 'flex', gap: 6, marginBottom: 20, flexWrap: 'wrap' }}>
+                {(['all', 'success', 'error', 'warning', 'info'] as const).map(f => {
+                    const isActive = filter === f;
+                    const cfg = f === 'all' ? null : levelConfig[f];
+                    return (
+                        <button
+                            key={f}
+                            onClick={() => setFilter(f)}
+                            style={{
+                                padding: '5px 14px', borderRadius: 20,
+                                border: `1px solid ${isActive ? (cfg?.color || '#6366f1') : '#2a2a40'}`,
+                                background: isActive ? (cfg?.bg || 'rgba(99,102,241,0.08)') : 'transparent',
+                                color: isActive ? (cfg?.color || '#6366f1') : '#666',
+                                fontSize: 12, fontWeight: 600, cursor: 'pointer',
+                                display: 'flex', alignItems: 'center', gap: 6,
+                                transition: 'all 0.15s',
+                            }}
+                        >
+                            {f.charAt(0).toUpperCase() + f.slice(1)}
+                            {(counts as any)[f] > 0 && (
+                                <span style={{
+                                    background: isActive ? (cfg?.color || '#6366f1') : '#333',
+                                    color: isActive ? '#fff' : '#888',
+                                    padding: '1px 6px', borderRadius: 10, fontSize: 10, fontWeight: 700,
+                                }}>
+                                    {(counts as any)[f]}
+                                </span>
+                            )}
+                        </button>
+                    );
+                })}
+            </div>
+
+            {/* Notification List */}
+            {filtered.length === 0 ? (
+                <div style={{
+                    color: '#555', fontSize: 13, padding: 40,
+                    background: '#1a1a2e', borderRadius: 12, textAlign: 'center',
+                }}>
+                    <Bell size={36} style={{ opacity: 0.2, marginBottom: 12 }} />
+                    <p style={{ margin: 0 }}>No notifications yet</p>
+                    <p style={{ margin: '4px 0 0', fontSize: 11, color: '#444' }}>
+                        Notifications appear when goals complete, fail, or tasks finish.
+                    </p>
+                </div>
+            ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    {filtered.map((n, i) => {
+                        const cfg = levelConfig[n.level] || levelConfig.info;
+                        const Icon = cfg.icon;
+                        return (
+                            <div
+                                key={i}
+                                style={{
+                                    display: 'flex', alignItems: 'flex-start', gap: 12,
+                                    padding: '12px 16px', background: cfg.bg,
+                                    border: `1px solid ${cfg.border}`,
+                                    borderRadius: 10, transition: 'all 0.15s',
+                                }}
+                            >
+                                <Icon size={18} color={cfg.color} style={{ marginTop: 2, flexShrink: 0 }} />
+                                <div style={{ flex: 1, minWidth: 0 }}>
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                                        <span style={{
+                                            fontSize: 10, fontWeight: 700, letterSpacing: 0.5,
+                                            color: cfg.color, background: `${cfg.color}22`,
+                                            padding: '1px 6px', borderRadius: 4,
+                                        }}>
+                                            {cfg.label}
+                                        </span>
+                                        <span style={{ fontWeight: 600, color: '#ddd', fontSize: 13 }}>
+                                            {n.title}
+                                        </span>
+                                    </div>
+                                    <div style={{ color: '#999', fontSize: 12, lineHeight: 1.5, wordBreak: 'break-word' }}>
+                                        {n.message}
+                                    </div>
+                                </div>
+                                <div style={{
+                                    display: 'flex', alignItems: 'center', gap: 4,
+                                    color: '#555', fontSize: 11, whiteSpace: 'nowrap', flexShrink: 0,
+                                }}>
+                                    <Clock size={11} />
+                                    {timeAgo(n.timestamp)}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}

package/studio/src/components/PluginsManager.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Package, Trash2 } from 'lucide-react';
+
+const API = 'http://localhost:3333/api';
+
+export function PluginsManager() {
+    const { id } = useParams<{ id: string }>();
+    const [plugins, setPlugins] = useState<any[]>([]);
+
+    const load = () => {
+        fetch(`${API}/instances/${id}/plugins`).then(r => r.json()).then(d => setPlugins(d.plugins || [])).catch(console.error);
+    };
+
+    useEffect(() => { load(); }, [id]);
+
+    const deletePlugin = async (name: string) => {
+        if (!confirm(`Remove plugin "${name}"?`)) return;
+        await fetch(`${API}/instances/${id}/plugins/${name}`, { method: 'DELETE' });
+        load();
+    };
+
+    return (
+        <div className="flex flex-col h-full bg-neutral-950 overflow-y-auto p-8">
+            <div className="flex items-center justify-between mb-8">
+                <div>
+                    <h2 className="text-xl font-semibold flex items-center gap-2">
+                        <Package className="text-indigo-400" size={22} /> Plugins
+                    </h2>
+                    <p className="text-neutral-500 text-sm mt-1">{plugins.length} plugin{plugins.length !== 1 ? 's' : ''} installed</p>
+                </div>
+            </div>
+
+            {plugins.length === 0 ? (
+                <div className="border border-white/10 border-dashed rounded-xl p-16 text-center">
+                    <Package className="mx-auto mb-4 text-neutral-600" size={32} />
+                    <p className="text-neutral-500">No plugins installed.</p>
+                    <p className="text-neutral-600 text-sm mt-2">Install plugins via CLI: <code className="bg-neutral-800 px-1.5 py-0.5 rounded text-neutral-400">agent plugins install ./my-plugin</code></p>
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {plugins.map((p) => (
+                        <div key={p.name} className="border border-white/10 rounded-xl bg-white/[0.02] p-5 flex flex-col hover:border-white/20 transition-all">
+                            <div className="flex items-start justify-between mb-2">
+                                <div className="font-medium text-neutral-200">{p.name}</div>
+                                <button onClick={() => deletePlugin(p.name)} className="p-1.5 rounded hover:bg-white/10 text-red-400"><Trash2 size={14} /></button>
+                            </div>
+                            <p className="text-sm text-neutral-400 mt-1 flex-1">{p.description}</p>
+                            <div className="flex items-center gap-2 mt-3">
+                                <span className="text-[10px] font-mono text-indigo-400 bg-indigo-500/10 px-2 py-0.5 rounded">v{p.version || '1.0.0'}</span>
+                                {p.skills?.length > 0 && <span className="text-[10px] text-neutral-500">{p.skills.length} skill(s)</span>}
+                                {p.commands?.length > 0 && <span className="text-[10px] text-neutral-500">{p.commands.length} cmd(s)</span>}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/studio/src/components/SandboxPanel.tsx

@@ -0,0 +1,118 @@
+import { useState, useEffect } from 'react';
+
+interface SandboxStatus {
+    enabled: boolean;
+    running: boolean;
+    image: string;
+    containerId?: string;
+    uptime?: number;
+}
+
+export default function SandboxPanel() {
+    const [status, setStatus] = useState<SandboxStatus | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetchStatus();
+        const interval = setInterval(fetchStatus, 5000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const fetchStatus = async () => {
+        try {
+            const res = await fetch('/api/sandbox/status');
+            const data = await res.json();
+            setStatus(data);
+        } catch {
+            setStatus(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleStart = async () => {
+        await fetch('/api/sandbox/start', { method: 'POST' });
+        fetchStatus();
+    };
+
+    const handleStop = async () => {
+        await fetch('/api/sandbox/stop', { method: 'POST' });
+        fetchStatus();
+    };
+
+    const formatUptime = (ms: number) => {
+        const s = Math.floor(ms / 1000);
+        const m = Math.floor(s / 60);
+        const h = Math.floor(m / 60);
+        return h > 0 ? `${h}h ${m % 60}m` : `${m}m ${s % 60}s`;
+    };
+
+    if (loading) {
+        return <div className="p-6 text-neutral-500">Loading sandbox status...</div>;
+    }
+
+    return (
+        <div className="p-6 space-y-6 overflow-y-auto h-full">
+            <div>
+                <h2 className="text-xl font-semibold mb-1 flex items-center gap-2">
+                    🐳 Sandboxed Execution
+                </h2>
+                <p className="text-neutral-500 text-sm">
+                    Run commands inside isolated Docker containers for safe execution.
+                </p>
+            </div>
+
+            {/* Status Card */}
+            <div className="border border-white/10 rounded-xl bg-neutral-900/40 p-6">
+                <div className="grid grid-cols-2 gap-4 mb-6">
+                    <div>
+                        <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Status</div>
+                        <div className={`text-sm font-medium ${status?.running ? 'text-emerald-400' : 'text-neutral-400'}`}>
+                            {status?.running ? '● Running' : '○ Stopped'}
+                        </div>
+                    </div>
+                    <div>
+                        <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Image</div>
+                        <div className="text-sm font-mono text-cyan-400">{status?.image || 'node:20-slim'}</div>
+                    </div>
+                    {status?.containerId && (
+                        <div>
+                            <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Container</div>
+                            <div className="text-sm font-mono text-neutral-300">{status.containerId.slice(0, 12)}</div>
+                        </div>
+                    )}
+                    {status?.uptime && (
+                        <div>
+                            <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Uptime</div>
+                            <div className="text-sm text-neutral-300">{formatUptime(status.uptime)}</div>
+                        </div>
+                    )}
+                </div>
+
+                <div className="flex gap-3">
+                    {!status?.running ? (
+                        <button
+                            onClick={handleStart}
+                            className="px-4 py-2 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded-lg text-sm font-medium hover:bg-emerald-500/20 transition-colors"
+                        >
+                            Start Sandbox
+                        </button>
+                    ) : (
+                        <button
+                            onClick={handleStop}
+                            className="px-4 py-2 bg-red-500/10 text-red-400 border border-red-500/20 rounded-lg text-sm font-medium hover:bg-red-500/20 transition-colors"
+                        >
+                            Stop Sandbox
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {/* Info */}
+            <div className="border border-white/5 rounded-xl bg-neutral-900/20 p-5 text-sm text-neutral-400 space-y-2">
+                <p>When the sandbox is <strong className="text-neutral-200">active</strong>, all <code className="bg-neutral-800 px-1 rounded text-xs">cmd.run</code> commands execute inside the Docker container instead of your host machine.</p>
+                <p>Configure in <code className="bg-neutral-800 px-1 rounded text-xs">agent.yaml</code>: image, network mode, volume mounts, and timeouts.</p>
+            </div>
+        </div>
+    );
+}