@decido/ui 0.0.0

package/src/components/DebugPanel.tsx

@@ -0,0 +1,347 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { ConsoleLog } from '@decido/shell-vscode-core';
+
+// --- Tipos para el grafo de arquitectura ---
+interface GraphNode {
+    id: string;
+    label: string;
+    type: string;
+    description: string;
+    status: 'idle' | 'loaded' | 'active' | 'error';
+    x: number;
+    y: number;
+    fx: number | null; // Posición X fija (para arrastrar)
+    fy: number | null; // Posición Y fija (para arrastrar)
+    metadata?: any;
+}
+
+interface GraphLink {
+    source: string | GraphNode;
+    target: string | GraphNode;
+    label: string;
+}
+
+/**
+ * Un serializador JSON seguro que maneja referencias circulares, funciones y elementos del DOM.
+ * @param value El objeto a serializar.
+ * @returns Una cadena de texto JSON segura.
+ */
+function safeJsonStringify(value: any): string {
+    const cache = new Set();
+    const replacer = (_key: string, value: any) => {
+        if (typeof value === 'object' && value !== null) {
+            if (cache.has(value)) {
+                // Referencia circular detectada
+                return '[Circular Reference]';
+            }
+            cache.add(value);
+        }
+        if (typeof value === 'function') {
+            return `[Function: ${value.name || 'anonymous'}]`;
+        }
+        if (value instanceof HTMLElement) {
+            return `[HTMLElement: ${value.tagName}${value.id ? '#' + value.id : ''}]`;
+        }
+        return value;
+    };
+
+    // Usamos el 'replacer' y una indentación de 2 espacios para que sea legible.
+    return JSON.stringify(value, replacer, 2);
+}
+
+const DebugPanel: React.FC = () => {
+    const debugService = (window as any).decidoAPI?.debug; // Asumo que el debugService está en window.decidoAPI.debug
+    const [nodes, setNodes] = useState<GraphNode[]>([]);
+    const [links, setLinks] = useState<GraphLink[]>([]);
+    const [hoveredNode, setHoveredNode] = useState<GraphNode | null>(null);
+    const [activeTab, setActiveTab] = useState<'graph' | 'console'>('graph');
+    const panelRef = useRef<HTMLDivElement>(null);
+    const [panelPosition, setPanelPosition] = useState({ bottom: 20, right: 20, left: 'auto', top: 'auto' });
+
+    const width = 800;
+    const height = 500;
+
+    // --- Lógica de Arrastre del Panel ---
+    const isPanelDragging = useRef(false);
+    const panelOffset = useRef({ x: 0, y: 0 });
+
+    const onPanelDragStart = useCallback((e: React.MouseEvent) => {
+        if (e.button !== 0) return; // Solo arrastrar con el botón izquierdo del ratón
+        isPanelDragging.current = true;
+        const panelRect = panelRef.current!.getBoundingClientRect();
+        panelOffset.current = {
+            x: e.clientX - panelRect.left,
+            y: e.clientY - panelRect.top,
+        };
+
+        document.addEventListener('mousemove', onPanelDrag);
+        document.addEventListener('mouseup', onPanelDragEnd);
+        document.body.style.userSelect = 'none'; // Evitar selección de texto durante el arrastre
+    }, []);
+
+    const onPanelDrag = useCallback((e: MouseEvent) => {
+        if (!isPanelDragging.current) return;
+        const x = e.clientX - panelOffset.current.x;
+        const y = e.clientY - panelOffset.current.y;
+        setPanelPosition({ bottom: 'auto', right: 'auto', left: x, top: y } as any);
+    }, []);
+
+    const onPanelDragEnd = useCallback(() => {
+        isPanelDragging.current = false;
+        document.removeEventListener('mousemove', onPanelDrag);
+        document.removeEventListener('mouseup', onPanelDragEnd);
+        document.body.style.userSelect = ''; // Restaurar la selección de texto
+    }, []);
+
+    useEffect(() => {
+        if (!debugService) return;
+
+        // Mock subscription for effect - Assuming debugService triggers reloads
+        const graph = debugService.graphState[0]();
+        setNodes(prevNodes => {
+            if (graph.nodes.length > 0 && prevNodes.length === 0) {
+                return initializeNodePositions(graph.nodes);
+            }
+            return graph.nodes;
+        });
+        setLinks(graph.links);
+
+        return () => {
+            // Unsubscribe mock
+        };
+    }, [debugService]);
+
+    const initializeNodePositions = useCallback((newNodes: GraphNode[]): GraphNode[] => {
+        const savedPositions = loadNodePositions();
+        return newNodes.map(node => {
+            if (savedPositions[node.id]) {
+                return { ...node, x: savedPositions[node.id].x, y: savedPositions[node.id].y };
+            }
+            return {
+                ...node,
+                x: node.x === undefined ? Math.random() * (width - 100) + 50 : node.x,
+                y: node.y === undefined ? Math.random() * (height - 100) + 50 : node.y,
+            };
+        });
+    }, [width, height]);
+
+    const saveNodePositions = useCallback((currentNodes: GraphNode[]) => {
+        const positions = currentNodes.reduce((acc, node) => {
+            acc[node.id] = { x: node.x, y: node.y };
+            return acc;
+        }, {} as Record<string, { x: number, y: number }>);
+        localStorage.setItem('decido_debug_panel_node_positions', JSON.stringify(positions));
+    }, []);
+
+    const loadNodePositions = (): Record<string, { x: number, y: number }> => {
+        try {
+            const saved = localStorage.getItem('decido_debug_panel_node_positions');
+            return saved ? JSON.parse(saved) : {};
+        } catch (e) {
+            console.error("Error cargando posiciones de nodos:", e);
+            return {};
+        }
+    };
+
+    // --- Lógica de Arrastre de Nodos ---
+    const draggedNode = useRef<GraphNode | null>(null);
+    const nodeOffset = useRef({ x: 0, y: 0 });
+
+    const onNodeDragStart = useCallback((e: React.MouseEvent, node: GraphNode) => {
+        e.stopPropagation();
+        draggedNode.current = node;
+        nodeOffset.current = {
+            x: e.clientX - node.x,
+            y: e.clientY - node.y,
+        };
+
+        setNodes(prevNodes => prevNodes.map(n => n.id === node.id ? { ...n, fx: node.x, fy: node.y } : n));
+
+        document.addEventListener('mousemove', onNodeDrag);
+        document.addEventListener('mouseup', onNodeDragEnd);
+        document.body.style.userSelect = 'none';
+    }, [nodes]);
+
+    const onNodeDrag = useCallback((e: MouseEvent) => {
+        if (!draggedNode.current) return;
+        const newFx = e.clientX - nodeOffset.current.x;
+        const newFy = e.clientY - nodeOffset.current.y;
+        setNodes(prevNodes => prevNodes.map(n => n.id === draggedNode.current?.id ? { ...n, fx: newFx, fy: newFy } : n));
+    }, []);
+
+    const onNodeDragEnd = useCallback(() => {
+        if (draggedNode.current) {
+            setNodes(prevNodes => {
+                const updatedNodes = prevNodes.map(n => {
+                    if (n.id === draggedNode.current?.id) {
+                        return { ...n, x: n.fx!, y: n.fy!, fx: null, fy: null };
+                    }
+                    return n;
+                });
+                saveNodePositions(updatedNodes);
+                return updatedNodes;
+            });
+        }
+        draggedNode.current = null;
+        document.removeEventListener('mousemove', onNodeDrag);
+        document.removeEventListener('mouseup', onNodeDragEnd);
+        document.body.style.userSelect = '';
+    }, [saveNodePositions]);
+
+    const onMouseOverNode = useCallback((node: GraphNode) => { setHoveredNode(node); }, []);
+    const onMouseOutNode = useCallback(() => { setHoveredNode(null); }, []);
+
+    // --- Renderizado de Logs de Consola ---
+    const renderConsoleLog = (log: ConsoleLog) => {
+        const formattedMessage = log.message.map(m => {
+            if (typeof m === 'object' && m !== null) {
+                return safeJsonStringify(m);
+            }
+            return String(m);
+        }).join(' ');
+
+        return (
+            <div key={log.id} className={`log-entry log-level-${log.type}`}>
+                <span className="log-timestamp">{new Date(log.timestamp).toLocaleTimeString()}</span>
+                <pre className="log-message">{formattedMessage}</pre>
+            </div>
+        );
+    };
+
+    const handleMapChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const path = e.target.value;
+        debugService?.loadArchitectureGraph(path);
+    };
+
+    const log = debugService?.probeLog[0]();
+    const playback = debugService?.playbackState[0]();
+    const consoleLogs = debugService?.consoleLogs[0]();
+
+    const renderGraphContent = (currentNodes: GraphNode[], currentLinks: GraphLink[]) => {
+        const populatedLinks = currentLinks
+            .map(link => ({
+                ...link,
+                source: currentNodes.find(n => n.id === link.source)!,
+                target: currentNodes.find(n => n.id === link.target)!
+            }))
+            .filter(l => l.source && l.target);
+
+        return (
+            <svg id="architecture-svg" width={width} height={height - 40}>
+                <g className="links">
+                    {populatedLinks.map((link, index) => (
+                        <line
+                            key={index}
+                            x1={link.source.x} y1={link.source.y}
+                            x2={link.target.x} y2={link.target.y}
+                            stroke="#475569" strokeWidth="1.5"
+                        />
+                    ))}
+                </g>
+                <g className="nodes">
+                    {currentNodes.map(node => (
+                        <g
+                            key={node.id}
+                            className="node-group"
+                            transform={`translate(${node.fx ?? node.x}, ${node.fy ?? node.y})`}
+                            onMouseDown={(e) => onNodeDragStart(e, node)}
+                            onMouseOver={() => onMouseOverNode(node)}
+                            onMouseOut={onMouseOutNode}
+                        >
+                            <circle r="12" className={`node-circle type-${node.type} status-${node.status}`} />
+                            <text x="16" y="4" className="node-label">{node.label}</text>
+                        </g>
+                    ))}
+                </g>
+                {hoveredNode && renderTooltip(hoveredNode)}
+            </svg>
+        );
+    };
+
+    const renderTooltip = (node: GraphNode) => {
+        return (
+            <foreignObject x={(node.x || 0) + 20} y={(node.y || 0) + 20} width="250" height="150">
+                <div className="tooltip-container">
+                    <div className={`tooltip-header type-${node.type}`}>{node.label}</div>
+                    <div className="tooltip-body">
+                        <p><strong>ID:</strong> {node.id}</p>
+                        <p><strong>Tipo:</strong> {node.type}</p>
+                        <p><strong>Estado:</strong> <span className={`status-${node.status}`}>{node.status}</span></p>
+                        <p className="tooltip-desc">{node.description || 'Sin descripción.'}</p>
+                    </div>
+                </div>
+            </foreignObject>
+        );
+    };
+
+    return (
+        <div
+            ref={panelRef}
+            className="debug-panel"
+            style={{
+                bottom: panelPosition.bottom,
+                right: panelPosition.right,
+                left: panelPosition.left,
+                top: panelPosition.top,
+                width: width,
+                height: height,
+            }}
+        >
+            <div className="debug-header" onMouseDown={onPanelDragStart}>
+                <span><i className="fas fa-microchip mr-2"></i>Escáner de Arquitectura</span>
+                <select onChange={handleMapChange} style={{ background: '#334155', border: 'none', color: 'white', borderRadius: '4px', fontSize: '11px' }}>
+                    <option value="/architecture-map.json">Vista General</option>
+                    <option value="/maps/auth-flow.json">Flujo de Autenticación</option>
+                    <option value="/maps/kanban-flow.json">Flujo de Kanban</option>
+                </select>
+            </div>
+
+            {/* Selector de Pestañas */}
+            <div className="debug-tabs">
+                <button className={`debug-tab ${activeTab === 'graph' ? 'active' : ''}`} onClick={() => setActiveTab('graph')}>
+                    <i className="fas fa-sitemap mr-2"></i>Arquitectura
+                </button>
+                <button className={`debug-tab ${activeTab === 'console' ? 'active' : ''}`} onClick={() => setActiveTab('console')}>
+                    <i className="fas fa-terminal mr-2"></i>Consola
+                </button>
+            </div>
+
+            <div className="debug-content">
+                {/* Contenido del Grafo (condicional) */}
+                {activeTab === 'graph' && (
+                    <div className="tab-content active">
+                        {renderGraphContent(nodes, links)}
+                    </div>
+                )}
+                {/* Contenido de la Consola (condicional) */}
+                {activeTab === 'console' && (
+                    <div className="tab-content active">
+                        <div className="console-log-list">
+                            {consoleLogs?.map((log: any) => renderConsoleLog(log))}
+                        </div>
+                    </div>
+                )}
+            </div>
+            {/* NUEVA BARRA DE CONTROL */}
+            <div className="debug-footer">
+                <div className="playback-controls flex gap-2">
+                    <button onClick={() => debugService?.goToLogIndex(0)} title="Ir al Inicio"><i className="fas fa-fast-backward"></i></button>
+                    <button onClick={() => debugService?.goToLogIndex(playback?.currentIndex - 1)} title="Paso Anterior"><i className="fas fa-step-backward"></i></button>
+                    <button onClick={() => { /* Lógica de Play/Pause */ }} title="Reproducir"><i className="fas fa-play"></i></button>
+                    <button onClick={() => debugService?.goToLogIndex(playback?.currentIndex + 1)} title="Paso Siguiente"><i className="fas fa-step-forward"></i></button>
+                </div>
+                <input
+                    type="range"
+                    className="timeline-slider"
+                    min="0"
+                    max={log?.length > 0 ? log.length - 1 : 0}
+                    value={playback?.currentIndex || 0}
+                    onChange={(e) => debugService?.goToLogIndex(parseInt(e.target.value))}
+                />
+                <span className="text-xs text-muted-foreground w-20 text-center">{playback?.currentIndex + 1} / {log?.length}</span>
+            </div>
+        </div>
+    );
+};
+
+export default DebugPanel;

package/src/components/DebugPanelManager.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import DebugPanel from './DebugPanel'; // Import the React component
+
+// Assuming DebugPanelManager is intended to render DebugPanel based on some service state.
+// We'll mimic the previous logic, assuming `this.api.debug.panels` holds the state.
+// This example assumes `panels` is a signal from `@decido/core` (Zustand-like state).
+
+interface PanelState {
+    id: string;
+    isVisible: boolean;
+    // Add other properties that your panel might have
+}
+
+const DebugPanelManager: React.FC = () => {
+    const [panels, setPanels] = useState<PanelState[]>([]);
+    const panelService = (window as any).decidoAPI?.debug?.panels; // Access the service from window.decidoAPI
+
+    useEffect(() => {
+        if (!panelService) return;
+
+        // Assuming panelService.panels is a signal, we'd subscribe to it
+        const unsubscribe = () => { }; // MOCK: createEffect was from missing import
+        const currentPanels = Object.values(panelService.panels[0]());
+        setPanels(currentPanels as PanelState[]);
+
+        return () => {
+            unsubscribe();
+        };
+    }, [panelService]);
+
+    return (
+        <>
+            {panels.filter(p => p.isVisible).map(p => (
+                <DebugPanel key={p.id} /* pass props as needed based on PanelState */ />
+            ))}
+        </>
+    );
+};
+
+export default DebugPanelManager;

package/src/components/DecidoButton.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface DecidoButtonProps {
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary';
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const DecidoButton: React.FC<DecidoButtonProps> = ({
+  onClick,
+  type = 'button',
+  variant = 'primary',
+  disabled = false,
+  className = '',
+  children,
+}) => {
+  const baseClasses = `btn btn-${variant} ${className}`.trim();
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (type === 'submit') {
+      const form = (event.currentTarget as HTMLButtonElement).closest('form');
+      if (form) {
+        form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+      }
+    }
+    onClick?.(event);
+  };
+
+  return (
+    <button
+      type={type}
+      className={baseClasses}
+      disabled={disabled}
+      onClick={handleClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default DecidoButton;

package/src/components/LoginView.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import '../css/login-view.css';
+
+interface LoginViewProps {
+    // Define props if any, for now, it takes none.
+}
+
+const LoginView: React.FC<LoginViewProps> = () => {
+    const [email, setEmail] = useState('ing_julioramirez@hotmail.com');
+    const [password, setPassword] = useState('y0s0ft..');
+    const [isLoading, setIsLoading] = useState(false);
+    const api = (window as any).decidoAPI;
+
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+        api.debug?.probe('ui:LoginView', 'active');
+
+        try {
+            await api.auth.login(email, password);
+            // On success, the router and auth service should handle the redirect.
+            // No need to manually navigate here.
+        } catch (error: any) {
+            const errorMessage = error instanceof Error ? error.message : "Error desconocido";
+            api.notifications.show('error', 'Error de Login', errorMessage);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleRegisterClick = () => {
+        if (api && api.commands) {
+            api.commands.executeCommand("auth.showRegisterModal");
+        } else {
+            console.warn('Decido API o Command Service no disponible.');
+        }
+    };
+
+    return (
+        <div className="login-container animate-fade-in">
+
+            <div className="login-box">
+                <h1 className="login-title">Iniciar Sesión</h1>
+                <form className="login-form" onSubmit={handleLogin}>
+                    <div className="form-group">
+                        <label htmlFor="email" className="journal-label">Email</label>
+                        <input
+                            type="email"
+                            id="email"
+                            name="email"
+                            className="form-input-premium"
+                            required
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            disabled={isLoading}
+                        />
+                    </div>
+                    <div className="form-group">
+                        <label htmlFor="password" className="journal-label">Contraseña</label>
+                        <input
+                            type="password"
+                            id="password"
+                            name="password"
+                            className="form-input-premium"
+                            required
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            disabled={isLoading}
+                        />
+                    </div>
+                    <div className="form-actions">
+                        <button type="submit" className="btn-premium w-full" disabled={isLoading}>
+                            {isLoading ? <i className="fas fa-spinner fa-spin"></i> : ''} Entrar
+                        </button>
+                    </div>
+                </form>
+                <div className="register-link">
+                    <a href="#" onClick={handleRegisterClick}>¿No tienes cuenta? Regístrate</a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LoginView;

package/src/components/WelcomeView.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import '../css/welcome-view.css';
+
+interface WelcomeViewProps {
+    // Define props if any, for now, it takes none.
+}
+
+const WelcomeView: React.FC<WelcomeViewProps> = () => {
+    // Access the API from the window object
+    const api = (window as any).decidoAPI;
+
+    const handleQuickLinkClick = (commandId: string, commandArgs?: any) => {
+        if (api && api.commands) {
+            api.commands.executeCommand(commandId, commandArgs);
+        } else {
+            console.warn('Decido API o Command Service no disponible.');
+        }
+    };
+
+    return (
+        <div className="welcome-container animate-fade-in">
+
+            <div className="logo">
+                <i className="fas fa-brain"></i>
+            </div>
+            <h1 className="welcome-title">Bienvenido a Decido</h1>
+            <p className="welcome-subtitle">Tu sistema operativo para la vida. ¿Qué quieres lograr hoy?</p>
+
+            <div className="quick-links-grid">
+                <a href="#" className="quick-link" onClick={() => handleQuickLinkClick("workbench.openTab", { id: "dashboard", title: "Dashboard", componentTag: "dashboard-view", icon: "fas fa-home" })}>
+                    <i className="fas fa-home"></i>
+                    <span>Ver mi Dashboard</span>
+                </a>
+                <a href="#" className="quick-link" onClick={() => handleQuickLinkClick("workbench.openTab", { id: "goal-architect", title: "Arquitecto de Metas", componentTag: "goal-architect-view", icon: "fas fa-compass" })}>
+                    <i className="fas fa-compass"></i>
+                    <span>Definir una Meta</span>
+                </a>
+                <a href="#" className="quick-link" onClick={() => handleQuickLinkClick("palette.toggle")}>
+                    <i className="fas fa-terminal"></i>
+                    <span>Abrir Paleta de Comandos</span>
+                </a>
+            </div>
+        </div>
+    );
+};
+
+export default WelcomeView;