@decido/plugin-dev-console 1.0.0

package/src/widgets/SDKShowcaseWidget.tsx

@@ -0,0 +1,289 @@
+/**
+ * SDK Showcase Widget — Interactive demo for every @decido/sdk hook
+ * 
+ * Renders a card per hook (useKernel, useAgent, useFileSystem, useNotify, 
+ * usePermissions, useDecidoTheme) with live examples.
+ */
+import React, { useState } from 'react';
+import {
+    useKernel,
+    useNotify,
+    useAgent,
+    useFileSystem,
+    usePermissions,
+    useDecidoTheme,
+    useDecidoEvent,
+} from '@decido/sdk';
+
+// ─── Shared Card ───
+const Card: React.FC<{ title: string; icon: string; children: React.ReactNode }> = ({ title, icon, children }) => (
+    <div style={{
+        background: 'rgba(255,255,255,0.04)',
+        border: '1px solid rgba(255,255,255,0.08)',
+        borderRadius: 12,
+        padding: 16,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+    }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span style={{ fontSize: 20 }}>{icon}</span>
+            <strong style={{ fontSize: 14, color: '#e2e8f0' }}>{title}</strong>
+        </div>
+        {children}
+    </div>
+);
+
+const Btn: React.FC<{ onClick: () => void; children: React.ReactNode; disabled?: boolean }> = ({ onClick, children, disabled }) => (
+    <button
+        onClick={onClick}
+        disabled={disabled}
+        style={{
+            padding: '6px 14px',
+            background: disabled ? '#374151' : 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+            border: 'none',
+            borderRadius: 8,
+            color: '#fff',
+            fontSize: 12,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
+            transition: 'all 0.2s',
+        }}
+    >
+        {children}
+    </button>
+);
+
+const Output: React.FC<{ data: any }> = ({ data }) => (
+    <pre style={{
+        background: 'rgba(0,0,0,0.3)',
+        padding: 8,
+        borderRadius: 6,
+        fontSize: 11,
+        color: '#a5b4fc',
+        overflow: 'auto',
+        maxHeight: 120,
+        margin: 0,
+    }}>
+        {typeof data === 'string' ? data : JSON.stringify(data, null, 2)}
+    </pre>
+);
+
+// ═══ Individual Hook Examples ═══
+
+const KernelExample: React.FC = () => {
+    const { execute, isLoading, lastError } = useKernel();
+    const [result, setResult] = useState<any>(null);
+
+    const handleExecute = async () => {
+        const res = await execute('get_settings');
+        setResult(res);
+    };
+
+    return (
+        <Card title="useKernel" icon="⚡">
+            <p style={{ fontSize: 12, color: '#94a3b8', margin: 0 }}>
+                Ejecuta comandos del kernel con latency tracking.
+            </p>
+            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <Btn onClick={handleExecute} disabled={isLoading}>
+                    {isLoading ? '⏳ Ejecutando...' : 'kernel.execute("get_settings")'}
+                </Btn>
+            </div>
+            {lastError && <span style={{ color: '#ef4444', fontSize: 11 }}>❌ {lastError}</span>}
+            {result && <Output data={result} />}
+        </Card>
+    );
+};
+
+const NotifyExample: React.FC = () => {
+    const notify = useNotify();
+    const [sent, setSent] = useState(false);
+
+    return (
+        <Card title="useNotify" icon="🔔">
+            <p style={{ fontSize: 12, color: '#94a3b8', margin: 0 }}>
+                Notificaciones nativas del OS.
+            </p>
+            <Btn onClick={() => { notify('Hello!', 'Notificación de prueba desde el SDK', 'success'); setSent(true); }}>
+                {sent ? '✅ Enviada!' : 'Enviar Notificación'}
+            </Btn>
+        </Card>
+    );
+};
+
+const AgentExample: React.FC = () => {
+    const { dispatch, stream, reset } = useAgent();
+    const [prompt, setPrompt] = useState('Genera un reporte de ventas');
+
+    return (
+        <Card title="useAgent" icon="🤖">
+            <p style={{ fontSize: 12, color: '#94a3b8', margin: 0 }}>
+                Despacha tareas al swarm AI y recibe cognitive frames.
+            </p>
+            <input
+                value={prompt}
+                onChange={e => setPrompt(e.target.value)}
+                placeholder="Escribe una tarea..."
+                style={{
+                    background: 'rgba(0,0,0,0.3)', border: '1px solid rgba(255,255,255,0.1)',
+                    borderRadius: 6, padding: '6px 10px', color: '#e2e8f0', fontSize: 12,
+                }}
+            />
+            <div style={{ display: 'flex', gap: 8 }}>
+                <Btn onClick={() => dispatch({ prompt, priority: 'high' })} disabled={stream.status === 'thinking'}>
+                    {stream.status === 'thinking' ? '🧠 Pensando...' : '▶ Despachar'}
+                </Btn>
+                <Btn onClick={reset}>🔄 Reset</Btn>
+            </div>
+            <div style={{ fontSize: 11, color: '#94a3b8' }}>
+                Status: <strong style={{ color: stream.status === 'complete' ? '#4ade80' : '#fbbf24' }}>
+                    {stream.status}
+                </strong>
+                {stream.frames.length > 0 && ` · ${stream.frames.length} frames`}
+            </div>
+            {stream.frames.length > 0 && (
+                <Output data={stream.frames.slice(-3).map(f => `💭 ${f.thought} → 🎯 ${f.action}`).join('\n')} />
+            )}
+            {stream.response && <Output data={`✅ ${stream.response}`} />}
+        </Card>
+    );
+};
+
+const FileSystemExample: React.FC = () => {
+    const fs = useFileSystem();
+    const [files, setFiles] = useState<any[]>([]);
+    const [content, setContent] = useState<string | null>(null);
+
+    const handleList = async () => {
+        const list = await fs.listDir('/');
+        setFiles(list);
+    };
+
+    const handleRead = async () => {
+        const result = await fs.readFile('config.json');
+        setContent(result.content);
+    };
+
+    const handleWrite = async () => {
+        await fs.writeFile('test.txt', 'Hello from SDK!');
+        setContent('✅ Archivo escrito: test.txt');
+    };
+
+    return (
+        <Card title="useFileSystem" icon="📂">
+            <p style={{ fontSize: 12, color: '#94a3b8', margin: 0 }}>
+                CRUD de archivos sandboxed por plugin.
+            </p>
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                <Btn onClick={handleList}>📑 listDir("/")</Btn>
+                <Btn onClick={handleRead}>📖 readFile</Btn>
+                <Btn onClick={handleWrite}>✏️ writeFile</Btn>
+            </div>
+            {files.length > 0 && <Output data={files} />}
+            {content && <Output data={content} />}
+        </Card>
+    );
+};
+
+const PermissionsExample: React.FC = () => {
+    const { check, request, hasPermission } = usePermissions();
+    const [log, setLog] = useState<string[]>([]);
+
+    const handleCheck = async (scope: string) => {
+        const granted = await check(scope as any);
+        setLog(prev => [...prev, `check(${scope}) → ${granted ? '✅' : '❌'}`]);
+    };
+
+    const handleRequest = async (scope: string) => {
+        const status = await request(scope as any);
+        setLog(prev => [...prev, `request(${scope}) → ${status.granted ? '✅' : '❌'} ${status.reason || ''}`]);
+    };
+
+    return (
+        <Card title="usePermissions" icon="🔐">
+            <p style={{ fontSize: 12, color: '#94a3b8', margin: 0 }}>
+                Zero-trust permission checks en runtime.
+            </p>
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                <Btn onClick={() => handleCheck('fs:write')}>Check fs:write</Btn>
+                <Btn onClick={() => handleRequest('agent:dispatch')}>Request agent:dispatch</Btn>
+            </div>
+            {log.length > 0 && <Output data={log.join('\n')} />}
+        </Card>
+    );
+};
+
+const ThemeExample: React.FC = () => {
+    const { colors } = useDecidoTheme();
+
+    return (
+        <Card title="useDecidoTheme" icon="🎨">
+            <p style={{ fontSize: 12, color: '#94a3b8', margin: 0 }}>
+                Tokens del tema morfológico actual.
+            </p>
+            <div style={{ display: 'flex', gap: 8 }}>
+                {Object.entries(colors).map(([key, val]) => (
+                    <div key={key} style={{
+                        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
+                    }}>
+                        <div style={{
+                            width: 32, height: 32, borderRadius: 8,
+                            background: val, border: '1px solid rgba(255,255,255,0.15)',
+                        }} />
+                        <span style={{ fontSize: 10, color: '#94a3b8' }}>{key}</span>
+                    </div>
+                ))}
+            </div>
+        </Card>
+    );
+};
+
+const EventExample: React.FC = () => {
+    const [events, setEvents] = useState<string[]>([]);
+    const emit = useDecidoEvent('sdk:demo_ping', (data) => {
+        setEvents(prev => [...prev.slice(-4), `📨 ${JSON.stringify(data)}`]);
+    });
+
+    return (
+        <Card title="useDecidoEvent" icon="📡">
+            <p style={{ fontSize: 12, color: '#94a3b8', margin: 0 }}>
+                Pub/Sub cross-plugin via Event Mesh.
+            </p>
+            <Btn onClick={() => emit({ message: 'ping', timestamp: Date.now() })}>
+                Emit "sdk:demo_ping"
+            </Btn>
+            {events.length > 0 && <Output data={events.join('\n')} />}
+        </Card>
+    );
+};
+
+// ═══ Main Showcase ═══
+export const SDKShowcaseWidget: React.FC = () => {
+    return (
+        <div style={{
+            padding: 20,
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+            gap: 16,
+            maxHeight: '100%',
+            overflow: 'auto',
+        }}>
+            <div style={{ gridColumn: '1 / -1', marginBottom: 4 }}>
+                <h2 style={{ margin: 0, fontSize: 18, color: '#e2e8f0' }}>
+                    🧪 SDK Hooks Showcase
+                </h2>
+                <p style={{ margin: '4px 0 0', fontSize: 13, color: '#64748b' }}>
+                    Cada tarjeta es un hook del <code>@decido/sdk</code> con un ejemplo interactivo.
+                </p>
+            </div>
+            <KernelExample />
+            <NotifyExample />
+            <AgentExample />
+            <FileSystemExample />
+            <PermissionsExample />
+            <ThemeExample />
+            <EventExample />
+        </div>
+    );
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "./dist"
+    },
+    "include": [
+        "src/**/*"
+    ]
+}