@decido/shell 1.0.0

package/src/store/useUIComponentStore.ts

@@ -0,0 +1,179 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+// ─── Server-Driven UI Types ───
+export interface ServerDrivenNode {
+    type: string;
+    props?: Record<string, any>;
+    children?: ServerDrivenNode[] | string;
+    onAction?: {
+        command: string;
+        payload?: any;
+    };
+}
+
+export interface UIComponentDefinition {
+    id: string;
+    name: string;
+    category: 'form' | 'card' | 'table' | 'chart' | 'layout' | 'alert' | 'custom';
+    schema: ServerDrivenNode;
+    dataContract: {
+        inputs: Record<string, { type: string; description: string }>;
+        outputs: Record<string, { type: string }>;
+    };
+    tags: string[];
+    source: 'built-in' | 'ai-generated' | 'server' | 'user';
+    preview?: string;
+    createdAt: number;
+    updatedAt: number;
+}
+
+interface UIComponentState {
+    components: Record<string, UIComponentDefinition>;
+    addComponent: (component: UIComponentDefinition) => void;
+    removeComponent: (id: string) => void;
+    updateComponent: (id: string, updates: Partial<UIComponentDefinition>) => void;
+    getByCategory: (category: string) => UIComponentDefinition[];
+    getBySource: (source: string) => UIComponentDefinition[];
+}
+
+// ─── Built-in UI Components (Seeds) ───
+const BUILT_IN_COMPONENTS: UIComponentDefinition[] = [
+    {
+        id: 'builtin_status_card',
+        name: 'Status Card',
+        category: 'card',
+        schema: {
+            type: 'div',
+            props: { className: 'bg-zinc-900/80 border border-border-default rounded-xl p-4 backdrop-blur-xs' },
+            children: [
+                { type: 'div', props: { className: 'flex items-center gap-2 mb-2' }, children: [
+                    { type: 'span', props: { className: 'w-2 h-2 rounded-full bg-emerald-400 animate-pulse' } },
+                    { type: 'span', props: { className: 'text-xs font-mono text-text-secondary uppercase tracking-wider' }, children: '{{title}}' }
+                ]},
+                { type: 'h3', props: { className: 'text-2xl font-bold text-white' }, children: '{{value}}' },
+                { type: 'p', props: { className: 'text-xs text-text-muted mt-1' }, children: '{{subtitle}}' }
+            ]
+        },
+        dataContract: {
+            inputs: { title: { type: 'string', description: 'Card title' }, value: { type: 'string', description: 'Main value' }, subtitle: { type: 'string', description: 'Description' } },
+            outputs: {}
+        },
+        tags: ['status', 'metric', 'dashboard'],
+        source: 'built-in',
+        createdAt: Date.now(),
+        updatedAt: Date.now()
+    },
+    {
+        id: 'builtin_alert_banner',
+        name: 'Alert Banner',
+        category: 'alert',
+        schema: {
+            type: 'div',
+            props: { className: 'flex items-center gap-3 p-3 rounded-lg border border-amber-500/20 bg-amber-500/5' },
+            children: [
+                { type: 'span', props: { className: 'text-amber-400 text-lg' }, children: '⚠️' },
+                { type: 'div', children: [
+                    { type: 'p', props: { className: 'text-sm font-semibold text-amber-200' }, children: '{{title}}' },
+                    { type: 'p', props: { className: 'text-xs text-amber-300/70' }, children: '{{message}}' }
+                ]}
+            ]
+        },
+        dataContract: {
+            inputs: { title: { type: 'string', description: 'Alert title' }, message: { type: 'string', description: 'Alert message' } },
+            outputs: {}
+        },
+        tags: ['alert', 'warning', 'notification'],
+        source: 'built-in',
+        createdAt: Date.now(),
+        updatedAt: Date.now()
+    },
+    {
+        id: 'builtin_input_form',
+        name: 'Text Input Form',
+        category: 'form',
+        schema: {
+            type: 'div',
+            props: { className: 'bg-zinc-900/80 border border-border-default rounded-xl p-4 space-y-3' },
+            children: [
+                { type: 'label', props: { className: 'text-sm text-text-primary font-medium' }, children: '{{label}}' },
+                { type: 'input', props: { className: 'w-full bg-zinc-800 border border-border-default rounded-lg px-3 py-2 text-white text-sm focus:border-purple-500/50 outline-hidden transition-colors', placeholder: '{{placeholder}}' }, onAction: { command: 'engine:setVariable', payload: { target: '{{variableKey}}' } } },
+                { type: 'button', props: { className: 'w-full py-2 bg-purple-500 hover:bg-purple-400 text-white text-sm font-medium rounded-lg transition-colors' }, children: '{{buttonText}}', onAction: { command: 'engine:completeNode', payload: { handle: 'success' } } }
+            ]
+        },
+        dataContract: {
+            inputs: { label: { type: 'string', description: 'Input label' }, placeholder: { type: 'string', description: 'Placeholder text' }, variableKey: { type: 'string', description: 'Target variable key' }, buttonText: { type: 'string', description: 'Submit button text' } },
+            outputs: { value: { type: 'string' } }
+        },
+        tags: ['form', 'input', 'interactive'],
+        source: 'built-in',
+        createdAt: Date.now(),
+        updatedAt: Date.now()
+    },
+    {
+        id: 'builtin_data_table',
+        name: 'Data Table',
+        category: 'table',
+        schema: {
+            type: 'div',
+            props: { className: 'bg-zinc-900/80 border border-border-default rounded-xl overflow-hidden' },
+            children: [
+                { type: 'div', props: { className: 'px-4 py-3 border-b border-border-subtle' }, children: [
+                    { type: 'h4', props: { className: 'text-sm font-semibold text-white' }, children: '{{title}}' }
+                ]},
+                { type: 'table', props: { className: 'w-full' }, children: [
+                    { type: 'thead', children: [
+                        { type: 'tr', props: { className: 'text-xs text-text-muted uppercase' }, children: '{{headers}}' }
+                    ]},
+                    { type: 'tbody', props: { className: 'text-sm text-text-primary' }, children: '{{rows}}' }
+                ]}
+            ]
+        },
+        dataContract: {
+            inputs: { title: { type: 'string', description: 'Table title' }, headers: { type: 'string', description: 'Column headers' }, rows: { type: 'string', description: 'Table rows data' } },
+            outputs: {}
+        },
+        tags: ['table', 'data', 'list'],
+        source: 'built-in',
+        createdAt: Date.now(),
+        updatedAt: Date.now()
+    }
+];
+
+// ─── Store ───
+export const useUIComponentStore = create<UIComponentState>()(
+    persist(
+        (set, get) => ({
+            components: Object.fromEntries(BUILT_IN_COMPONENTS.map(c => [c.id, c])),
+
+            addComponent: (component) => set((state) => ({
+                components: { ...state.components, [component.id]: component }
+            })),
+
+            removeComponent: (id) => set((state) => {
+                const { [id]: _, ...rest } = state.components;
+                return { components: rest };
+            }),
+
+            updateComponent: (id, updates) => set((state) => {
+                const existing = state.components[id];
+                if (!existing) return state;
+                return {
+                    components: {
+                        ...state.components,
+                        [id]: { ...existing, ...updates, updatedAt: Date.now() }
+                    }
+                };
+            }),
+
+            getByCategory: (category) => {
+                return Object.values(get().components).filter(c => c.category === category);
+            },
+
+            getBySource: (source) => {
+                return Object.values(get().components).filter(c => c.source === source);
+            }
+        }),
+        { name: 'decido-ui-components' }
+    )
+);

package/src/types/DecidoStoryDefinition.ts

@@ -0,0 +1,43 @@
+export interface DSDMeta {
+    version: string; // e.g., '1.0'
+    author: string;
+    createdAt: number;
+    updatedAt: number;
+    title: string;
+    description: string;
+    tags: string[];
+}
+
+export interface DSDConfig {
+    defaultVoice: string;
+    defaultBgm?: string;
+    brandTheme: string;
+    environment: 'light' | 'dark' | 'auto';
+}
+
+export interface DSDActor {
+    id: string; // e.g., 'zephyr_ai'
+    name: string;
+    role: string;
+    voiceId?: string;
+    avatarUrl?: string; // or 3D model ref
+}
+
+export interface DSDKeyframe {
+    id: string;
+    t: number; // Time in seconds
+    state: string; // The morph/action state string
+    actorId?: string; // Who performs the action
+    speech?: string; // Dialogue to say
+    delay?: number; // Delay before next block if auto-advancing
+    canvas?: boolean; // Should open 3D canvas?
+    uiConfig?: any; // Any extra JSON config for UI morphing
+}
+
+export interface DecidoStoryDefinition {
+    id: string; // UUID of the document
+    meta: DSDMeta;
+    config: DSDConfig;
+    actors: DSDActor[];
+    timeline: DSDKeyframe[];
+}

package/src/utils/ai/ai-architect.ts

@@ -0,0 +1,92 @@
+// ═══════════════════════════════════════════════════════
+//  AI Architect — System architecture analysis
+// ═══════════════════════════════════════════════════════
+
+import { Type, FunctionDeclaration } from "@google/genai";
+import { getClient, logger } from './ai-core';
+
+// Mock CodebaseContextService for shared package
+const codebaseContext = {
+    readRealFile: async (path: string): Promise<string> => {
+        return `[MOCK] Reading file ${path} is not supported in the standalone package environment yet.`;
+    }
+};
+
+const readSourceFileTool: FunctionDeclaration = {
+    name: 'readSourceFile',
+    description: 'LEE el contenido real de un archivo del proyecto. Úsalo SIEMPRE que te pregunten sobre código específico o arquitectura actual.',
+    parameters: {
+        type: Type.OBJECT,
+        properties: {
+            fileNameOrPath: {
+                type: Type.STRING,
+                description: 'El nombre del archivo (ej: "App.tsx") o su ruta relativa (ej: "src/utils/ai.ts").'
+            }
+        },
+        required: ['fileNameOrPath']
+    }
+};
+
+export const chatWithArchitect = async (
+    history: { role: 'user' | 'model' | 'function'; parts: { text?: string; functionCall?: any; functionResponse?: any }[] }[],
+    userMessage: string
+): Promise<string> => {
+    const client = getClient('text');
+    if (!client) return "API Key Config Missing";
+
+    const systemInstruction = `
+    ERES: Sentinel Architect, la IA residente que vive DENTRO del código fuente.
+    
+    PROTOCOLO ESPEJO ACTIVO:
+    1. Tienes acceso de LECTURA al disco duro mediante la herramienta 'readSourceFile'.
+    2. NO asumas cómo es el código. Si te preguntan "¿Cómo funciona el store?", LLAMA a 'readSourceFile("useSentinelStore.ts")' primero.
+    3. Cuando leas código, analízalo críticamente. Sugiere mejoras reales basadas en el contenido leído.
+    4. Sé conciso y técnico.
+    `;
+
+    const currentHistory = [...history];
+    currentHistory.push({ role: 'user', parts: [{ text: userMessage }] });
+
+    try {
+        const response = await client.models.generateContent({
+            model: "gemini-flash-lite-latest-exp",
+            contents: currentHistory,
+            config: {
+                systemInstruction: systemInstruction,
+                tools: [{ functionDeclarations: [readSourceFileTool] }],
+            }
+        });
+
+        const call = response.functionCalls?.[0];
+
+        if (call && call.name === 'readSourceFile') {
+            const args = call.args as any;
+            const filename = args.fileNameOrPath;
+
+            logger.log(`[ARCHITECT] Invocando lectura de disco para: ${filename}`);
+            const fileContent = await codebaseContext.readRealFile(filename);
+
+            const functionResponse = {
+                name: "readSourceFile",
+                response: { content: fileContent.substring(0, 30000) }
+            };
+
+            currentHistory.push({ role: 'model', parts: [{ functionCall: call }] });
+            currentHistory.push({ role: 'function', parts: [{ functionResponse: functionResponse }] });
+
+            const finalResponse = await client.models.generateContent({
+                model: "gemini-flash-lite-latest-exp",
+                contents: currentHistory,
+                config: { systemInstruction: systemInstruction }
+            });
+
+            return finalResponse.text || "No response generated.";
+        }
+
+        return response.text || "No response generated.";
+
+    } catch (error: any) {
+        logger.error("Architect Error:", error);
+        return `Error en Protocolo Espejo: ${error.message}`;
+    }
+};

package/src/utils/ai/ai-code.ts

@@ -0,0 +1,187 @@
+// ═══════════════════════════════════════════════════════
+//  AI Code — Code analysis, diagnostics, explanation
+// ═══════════════════════════════════════════════════════
+
+import { Type } from "@google/genai";
+import { getClient, getGlobalSettings, logger } from './ai-core';
+import { AIDiagnostic } from '@decido/canvas-core';
+
+export { type AIDiagnostic };
+
+export const analyzeCode = async (code: string, language: string): Promise<AIDiagnostic[]> => {
+    const client = getClient('text');
+    if (!client) return [];
+    const settings = getGlobalSettings();
+
+    try {
+        const response = await client.models.generateContent({
+            model: settings.text.model || 'gemini-3-flash-preview',
+            contents: `Analyze this ${language} code for Security Risks, Performance Issues, and Core Stability flaws.
+
+    CODE:
+            ${code}
+
+            Return a JSON array of diagnostics.
+    For 'godMode', provide a specific, high - level technical solution(HTML string allowed for bolding).
+            `,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: {
+                    type: Type.ARRAY,
+                    items: {
+                        type: Type.OBJECT,
+                        properties: {
+                            type: { type: Type.STRING, enum: ['risk', 'perf', 'core'] },
+                            lines: {
+                                type: Type.ARRAY,
+                                items: { type: Type.INTEGER },
+                                minItems: 2,
+                                maxItems: 2
+                            },
+                            title: { type: Type.STRING },
+                            description: { type: Type.STRING },
+                            godMode: { type: Type.STRING }
+                        },
+                        required: ['type', 'lines', 'title', 'description']
+                    }
+                }
+            }
+        });
+
+        return JSON.parse(response.text || '[]');
+    } catch (e) {
+        logger.error("Code Analysis Error", e);
+        return [];
+    }
+};
+
+export const explainCode = async (code: string, language: string): Promise<string> => {
+    const client = getClient('text');
+    if (!client) return "API Key Config Missing";
+    const settings = getGlobalSettings();
+
+    try {
+        const response = await client.models.generateContent({
+            model: settings.text.model || 'gemini-3-flash-preview',
+            contents: `Explain this ${language} code concisely.Focus on architecture, logic flow, and potential side effects.Use Markdown.
+
+    CODE:
+            ${code} `
+        });
+        return response.text || "No explanation generated.";
+    } catch (e) {
+        logger.error("Code Explanation Error", e);
+        return "Failed to generate explanation.";
+    }
+};
+
+export const generateCodeExplanation = async (codeSnippet: string, filename: string): Promise<string> => {
+    const client = getClient('text');
+    if (!client) return "<code>API Key Missing</code>";
+    const settings = getGlobalSettings();
+
+    try {
+        const response = await client.models.generateContent({
+            model: settings.text.model || 'gemini-3-flash-preview',
+            contents: `Explain this code file("${filename}") visually.
+
+    CODE: 
+            ${codeSnippet.slice(0, 2000)}... (truncated)
+
+GOAL:
+            Return a SINGLE HTML STRING that renders a beautiful, modern "Knowledge Card" explaining the code.
+            
+            DESIGN REQUIREMENTS:
+- Use TailwindCSS(via CDN or inline styles / classes if allowed, assume Tailwind is present or use inline styles for safety).
+            - Dark mode aesthetic(bg - slate - 900 text - slate - 200).
+            - Include a Title(Filename).
+            - Include a "Purpose" section(What does this code do?).
+- Include a "Key Components" list.
+            - Include a "Complexity Score"(1 - 10) with a visual progress bar.
+            - Make it look like a sci - fi / cyberpunk HUD element.
+            - NO Markdown.ONLY valid HTML.
+            `,
+            config: {
+                responseMimeType: "text/plain"
+            }
+        });
+
+        let html = response.text || "<div>No explanation generated.</div>";
+        html = html.replace(/```html/g, '').replace(/```/g, '');
+        return html;
+
+    } catch (error) {
+        logger.error("Explanation Error:", error);
+        return `<div style="color:red">Failed to generate explanation.</div>`;
+    }
+};
+
+export const generateHtmlAndMacros = async (history: { role: 'user' | 'model', parts: { text: string }[] }[], currentHtml: string): Promise<any> => {
+    const client = getClient('text');
+    if (!client) return null;
+    const settings = getGlobalSettings();
+
+    try {
+        const response = await client.models.generateContent({
+            model: settings.text.model || 'gemini-3-flash-preview',
+            contents: `
+            You are an expert Frontend Developer and QA Automation Engineer.
+            
+            CONTEXT:
+            Current HTML:
+            ${currentHtml}
+            
+            USER REQUEST HISTORY:
+            ${JSON.stringify(history)}
+            
+            GOAL:
+            1. Update HTML if requested.
+            2. Create automation workflows (macros) if requested (e.g., "click button", "type text").
+            
+            RETURN JSON:
+            {
+                "html": "Updated HTML string (optional)",
+                "workflow": [
+                    { "id": "step1", "type": "click", "selector": "#btn", "label": "Click Button" },
+                    { "type": "type", "selector": "#input", "value": "Hello", "label": "Type Hello" },
+                    { "type": "scroll", "scrollY": 500, "label": "Scroll Down" },
+                    { "type": "wait", "duration": 2000, "label": "Wait 2s" }
+                ],
+                "explanation": "Short summary of changes"
+            }
+            `,
+            config: {
+                responseMimeType: "application/json"
+            }
+        });
+
+        return JSON.parse(response.text || '{}');
+    } catch (e) {
+        logger.error("HTML/Macro Gen Error", e);
+        return null;
+    }
+};
+
+export const generateBrainstorm = async (context: string): Promise<string[]> => {
+    const client = getClient('text');
+    if (!client) return [];
+    const settings = getGlobalSettings();
+
+    try {
+        const response = await client.models.generateContent({
+            model: settings.text.model || 'gemini-3-flash-preview',
+            contents: `Brainstorm 5 creative ideas/expansions for this context: "${context}". Return JSON array of strings.`,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: {
+                    type: Type.ARRAY,
+                    items: { type: Type.STRING }
+                }
+            }
+        });
+        return JSON.parse(response.text || '[]');
+    } catch (e) {
+        logger.error("Brainstorm Error", e);
+        return [];
+    }
+};

package/src/utils/ai/ai-core.ts

@@ -0,0 +1,50 @@
+// ═══════════════════════════════════════════════════════
+//  AI Core — Shared infrastructure for all AI modules
+// ═══════════════════════════════════════════════════════
+
+import { GoogleGenAI } from "@google/genai";
+
+// Simple Logger Mock
+const logger = {
+    log: console.log,
+    warn: console.warn,
+    error: console.error
+};
+
+export interface AISettings {
+    text: { model: string; apiKey: string };
+    image: { model: string; apiKey: string };
+    video: { model: string; apiKey: string };
+    audio: { model: string; apiKey: string };
+}
+
+// Default configuration
+let globalSettings: AISettings = {
+    text: { model: 'gemini-3-flash-preview', apiKey: '' },
+    image: { model: 'gemini-3-pro-image-preview', apiKey: '' },
+    video: { model: 'veo-3.1-generate-preview', apiKey: '' },
+    audio: { model: 'gemini-2.5-flash-preview-tts', apiKey: '' }
+};
+
+export const updateGlobalAISettings = (settings: AISettings) => {
+    globalSettings = settings;
+};
+
+export const getGlobalSettings = () => globalSettings;
+
+// Helper to get client with specific config
+export const getClient = (category: keyof AISettings) => {
+    const config = globalSettings[category];
+    const key = config.apiKey || process.env.VITE_API_KEY || ''; // Copia de seguridad si no se setea
+
+    if (!key) return null;
+
+    try {
+        return new GoogleGenAI({ apiKey: key });
+    } catch (e) {
+        logger.error("Failed to initialize GoogleGenAI client", e);
+        return null;
+    }
+};
+
+export { logger };