@decido/plugin-chameleon 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+
+Debugger listening on ws://127.0.0.1:62232/fe9a20a2-d2b8-4c56-a8f7-2d0433a57e69
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+
+> @decido/plugin-chameleon@1.0.0 build /Users/julioramirez/dev/active/OnBoardingDecido/plugins/official/chameleon
+> tsc
+
+Debugger listening on ws://127.0.0.1:62248/fc0de670-2b38-4d5c-9475-ab31e7f92dd5
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+Waiting for the debugger to disconnect...
+Waiting for the debugger to disconnect...

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@decido/plugin-chameleon",
+  "version": "1.0.0",
+  "description": "Chameleon UI Engine - Plugin for Decido OS",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.35.0",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@google/genai": "latest",
+    "@tanstack/react-virtual": "^3.11.2",
+    "@uiw/react-codemirror": "^4.23.7",
+    "@xyflow/react": "^12.0.0",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.300.0",
+    "react-router-dom": "^6.22.3",
+    "recharts": "^3.8.1",
+    "socket.io-client": "^4.8.3",
+    "sonner": "^1.4.3",
+    "y-websocket": "^3.0.0",
+    "yjs": "^13.6.29",
+    "zustand": "^4.5.2",
+    "@decido/discovery-studio": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@decido/kernel-bridge": "1.0.0",
+    "@decido/shell": "1.0.0",
+    "@decido/sdk": "1.0.0"
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --minify --clean",
+    "dev": "tsup src/index.ts --format esm --watch",
+    "lint": "eslint src/"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Toaster, toast } from 'sonner';
+
+// Vistas Madefront
+import { MadefrontChatView } from './views/MadefrontChatView';
+import { MadefrontKanbanView } from './views/MadefrontKanbanView';
+import { MadefrontExcelView } from './views/MadefrontExcelView';
+import { LoginView } from './views/LoginView';
+import { WorkflowAdminView } from './views/roles/WorkflowAdminView';
+import { KuspideDashboardView } from './views/KuspideDashboardView';
+import { DiscoveryAdminView } from './views/DiscoveryAdminView';
+import { DatabaseAdminView } from './views/DatabaseAdminView';
+import { DatawayStudioView } from './views/DatawayStudioView';
+
+// Vistas Roles
+import { CajaView } from './views/roles/CajaView';
+import { PlantaView } from './views/roles/PlantaView';
+import { VentasView } from './views/roles/VentasView';
+import { DespachoView } from './views/roles/DespachoView';
+
+// Utilidades y Stores
+import { ViewType, AgentCommand } from './types';
+import { playUISound } from './utils/sounds';
+import { useAuthStore } from './stores/authStore';
+import { useUIStore } from './stores/uiStore';
+import { useSocketSync } from './hooks/useSocketSync';
+
+export default function App() {
+  const { currentRole, setRole } = useAuthStore();
+  const { currentView, setCurrentView, setSearchTerm } = useUIStore();
+
+  // Initialize WebSocket Sync
+  useSocketSync();
+
+  // Escuchar eventos globales para cambiar sub-vistas desde el Main Chat
+  useEffect(() => {
+    const handleSetView = (e: any) => {
+      const view = e.detail?.view;
+      if (view) {
+        setRole('NONE' as any, 'Agente Asistente');
+        setCurrentView(view as ViewType);
+      }
+    };
+    window.addEventListener('chameleon:set-view', handleSetView);
+    return () => window.removeEventListener('chameleon:set-view', handleSetView);
+  }, [setRole, setCurrentView]);
+
+  const renderView = () => {
+    switch (currentRole) {
+      case 'CAJA':
+        return <CajaView />;
+      case 'PLANTA':
+        return <PlantaView />;
+      case 'GERENCIA':
+        return <VentasView />;
+      case 'DESPACHO':
+        return <DespachoView />;
+      case 'NONE':
+        switch (currentView) {
+          case 'madefront_chat':
+            return <MadefrontChatView />;
+          case 'madefront_kanban':
+            return <MadefrontKanbanView />;
+          case 'madefront_excel':
+            return <MadefrontExcelView />;
+          case 'workflow_admin':
+            return <WorkflowAdminView />;
+          case 'kuspide_dashboard':
+            return <KuspideDashboardView />;
+          case 'discovery_admin':
+            return <DiscoveryAdminView />;
+          case 'database_admin':
+            return <DatabaseAdminView />;
+          case 'dataway_studio':
+            return <DatawayStudioView />;
+          default:
+            return <LoginView />;
+        }
+      default:
+        return <LoginView />;
+    }
+  };
+
+  return (
+    <div className="w-full h-full flex flex-col overflow-y-auto overflow-x-hidden bg-[#05070a] text-gray-900 font-sans transition-colors duration-500 relative min-w-0">
+      <div className="w-full flex-1 transition-all duration-700 min-h-0 min-w-0 relative overflow-x-hidden">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={`${currentRole}-${currentView}`}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ type: "tween", duration: 0.2 }}
+            className="w-full h-full overflow-x-hidden"
+          >
+            {renderView()}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {/* Botón flotante para regresar al menú principal (opcional) */}
+      {currentRole !== 'NONE' && (
+        <button
+          onClick={() => setRole('NONE' as any, 'usuario')}
+          className="fixed top-4 right-4 z-40 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 text-white px-4 py-2 rounded-full shadow-lg font-bold text-sm transition-all"
+        >
+          Cambiar de Terminal
+        </button>
+      )}
+
+      {/* Chat global siempre presente */}
+      <Toaster richColors position="bottom-right" />
+    </div>
+  );
+}

package/src/components/DatawayDashboard.tsx

@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react';
+import { 
+    ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, 
+    Tooltip, Legend, LineChart, Line, AreaChart, Area
+} from 'recharts';
+import { BarChart3, LineChart as LineIcon, PieChart, Activity } from 'lucide-react';
+
+interface DatawayDashboardProps {
+    data: any[];
+    columns: string[];
+}
+
+export const DatawayDashboard: React.FC<DatawayDashboardProps> = ({ data, columns }) => {
+    const [chartType, setChartType] = React.useState<'bar' | 'line' | 'area'>('bar');
+
+    // Auto-detect dimensions and metrics
+    const { dimension, metrics } = useMemo(() => {
+        if (data.length === 0 || columns.length === 0) return { dimension: '', metrics: [] };
+        
+        // Find first string/categorical column for X axis
+        let xCol = columns.find(col => {
+            const val = data.find(r => r[col] !== null && r[col] !== undefined)?.[col];
+            return val !== undefined && (typeof val === 'string' || isNaN(Number(val)));
+        });
+        
+        // Fallback: Use first column if no categorical column was found
+        xCol = xCol || columns[0];
+
+        // Find all numerical columns for Y axis
+        const yCols = columns.filter(col => {
+            if (col === xCol) return false;
+            const val = data.find(r => r[col] !== null && r[col] !== undefined)?.[col];
+            return val !== undefined && !isNaN(Number(val)) && String(val).trim() !== '';
+        });
+
+        return { dimension: xCol, metrics: yCols };
+    }, [data, columns]);
+
+    if (data.length === 0) {
+        return (
+            <div className="flex-1 flex flex-col items-center justify-center opacity-40">
+                <Activity className="w-16 h-16 mb-4" />
+                <h2 className="text-xl font-bold">Sin Datos para Graficar</h2>
+                <p className="text-sm">La tabla procesada está vacía.</p>
+            </div>
+        );
+    }
+
+    if (metrics.length === 0) {
+        return (
+            <div className="flex-1 flex flex-col items-center justify-center opacity-60">
+                <BarChart3 className="w-16 h-16 mb-4" />
+                <h2 className="text-lg font-bold">Sin Columnas Numéricas</h2>
+                <p className="text-sm text-center max-w-sm mt-2">
+                    El motor de gráficos necesita al menos una métrica numérica para generar la visualización. (Usa M-Script para castear o generar números).
+                </p>
+            </div>
+        );
+    }
+
+    // Colors generator
+    const colors = ['#6366f1', '#ec4899', '#14b8a6', '#f59e0b', '#8b5cf6', '#10b981'];
+
+    return (
+        <div className="flex-1 flex flex-col h-full bg-[var(--bg-primary)] p-6">
+            <div className="flex justify-between items-center mb-6">
+                <div>
+                    <h2 className="text-lg font-bold text-[var(--text-primary)]">Analytics Auto-Dashboard</h2>
+                    <p className="text-[11px] font-medium text-[var(--text-secondary)] uppercase tracking-wider">
+                        Dimensión: <span className="text-[var(--brand-primary)]">{dimension}</span> | 
+                        Métricas: {metrics.join(', ')}
+                    </p>
+                </div>
+                
+                <div className="flex bg-[var(--bg-elevated)] p-1 rounded-lg border border-[var(--border-color)]">
+                    <button 
+                        onClick={() => setChartType('bar')}
+                        className={`p-2 rounded-md transition-all ${chartType === 'bar' ? 'bg-white shadow-sm text-[var(--brand-primary)]' : 'text-[var(--text-secondary)] hover:bg-[var(--bg-surface)]'}`}
+                        title="Gráfico de Barras"
+                    >
+                        <BarChart3 className="w-4 h-4" />
+                    </button>
+                    <button 
+                        onClick={() => setChartType('line')}
+                        className={`p-2 rounded-md transition-all ${chartType === 'line' ? 'bg-white shadow-sm text-[var(--brand-primary)]' : 'text-[var(--text-secondary)] hover:bg-[var(--bg-surface)]'}`}
+                        title="Gráfico de Líneas"
+                    >
+                        <LineIcon className="w-4 h-4" />
+                    </button>
+                    <button 
+                        onClick={() => setChartType('area')}
+                        className={`p-2 rounded-md transition-all ${chartType === 'area' ? 'bg-white shadow-sm text-[var(--brand-primary)]' : 'text-[var(--text-secondary)] hover:bg-[var(--bg-surface)]'}`}
+                        title="Gráfico de Área"
+                    >
+                        <PieChart className="w-4 h-4" />
+                    </button>
+                </div>
+            </div>
+
+            <div className="flex-1 min-h-0 bg-white border border-[var(--border-color)] rounded-xl p-4 shadow-inner">
+                <ResponsiveContainer width="100%" height="100%">
+                    {chartType === 'bar' ? (
+                        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                            <XAxis 
+                                dataKey={dimension} 
+                                tick={{fontSize: 12, fill: '#64748b'}} 
+                                axisLine={{stroke: '#cbd5e1'}} 
+                                tickLine={false} 
+                            />
+                            <YAxis 
+                                tick={{fontSize: 12, fill: '#64748b'}} 
+                                axisLine={false} 
+                                tickLine={false} 
+                            />
+                            <Tooltip 
+                                contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
+                                cursor={{fill: '#f1f5f9'}}
+                            />
+                            <Legend wrapperStyle={{ paddingTop: '20px' }} />
+                            {metrics.map((metric, idx) => (
+                                <Bar key={metric} dataKey={metric} fill={colors[idx % colors.length]} radius={[4, 4, 0, 0]} />
+                            ))}
+                        </BarChart>
+                    ) : chartType === 'line' ? (
+                        <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                            <XAxis dataKey={dimension} tick={{fontSize: 12, fill: '#64748b'}} axisLine={{stroke: '#cbd5e1'}} tickLine={false} />
+                            <YAxis tick={{fontSize: 12, fill: '#64748b'}} axisLine={false} tickLine={false} />
+                            <Tooltip contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} />
+                            <Legend wrapperStyle={{ paddingTop: '20px' }} />
+                            {metrics.map((metric, idx) => (
+                                <Line key={metric} type="monotone" dataKey={metric} stroke={colors[idx % colors.length]} strokeWidth={3} dot={{r: 4}} activeDot={{r: 6}} />
+                            ))}
+                        </LineChart>
+                    ) : (
+                        <AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                            <XAxis dataKey={dimension} tick={{fontSize: 12, fill: '#64748b'}} axisLine={{stroke: '#cbd5e1'}} tickLine={false} />
+                            <YAxis tick={{fontSize: 12, fill: '#64748b'}} axisLine={false} tickLine={false} />
+                            <Tooltip contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} />
+                            <Legend wrapperStyle={{ paddingTop: '20px' }} />
+                            {metrics.map((metric, idx) => (
+                                <Area key={metric} type="monotone" dataKey={metric} fill={colors[idx % colors.length]} stroke={colors[idx % colors.length]} fillOpacity={0.3} strokeWidth={2} />
+                            ))}
+                        </AreaChart>
+                    )}
+                </ResponsiveContainer>
+            </div>
+        </div>
+    );
+};

package/src/components/DatawayFilterModal.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import { X, Filter, Calendar, Type, Hash } from 'lucide-react';
+
+interface FilterModalProps {
+    isOpen: boolean;
+    column: string;
+    colType: 'text' | 'number' | 'date';
+    onClose: () => void;
+    onApply: (col: string, operator: string, value: string) => void;
+}
+
+export const DatawayFilterModal: React.FC<FilterModalProps> = ({ isOpen, column, colType, onClose, onApply }) => {
+    const [operator, setOperator] = useState('=');
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+        if (isOpen) {
+            setOperator('=');
+            setValue('');
+        }
+    }, [isOpen]);
+
+    if (!isOpen) return null;
+
+    const operators = {
+        text: [
+            { val: '=', label: 'Es igual a' },
+            { val: 'contains', label: 'Contiene' },
+            { val: 'starts_with', label: 'Empieza con' }
+        ],
+        number: [
+            { val: '=', label: 'Es igual a' },
+            { val: '>', label: 'Es mayor que' },
+            { val: '<', label: 'Es menor que' },
+            { val: '>=', label: 'Mayor o igual' },
+            { val: '<=', label: 'Menor o igual' }
+        ],
+        date: [
+            { val: '=', label: 'Es exactamente' },
+            { val: '<', label: 'Antes de' },
+            { val: '>', label: 'Después de' }
+        ]
+    };
+
+    const currentOperators = operators[colType];
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!value.trim()) return;
+        onApply(column, operator, value.trim());
+    };
+
+    return (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="flex items-center justify-between p-4 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]">
+                    <h3 className="font-bold flex items-center gap-2 text-[var(--text-primary)]">
+                        <Filter className="w-4 h-4 text-[var(--brand-primary)]" />
+                        Filtro Inteligente
+                    </h3>
+                    <button onClick={onClose} className="p-1 hover:bg-[var(--bg-surface)] rounded-md transition-colors text-[var(--text-secondary)]">
+                        <X className="w-4 h-4" />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="p-5 space-y-4">
+                    <div className="flex flex-col gap-1">
+                        <label className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider flex items-center gap-1.5">
+                            {colType === 'text' && <Type className="w-3.5 h-3.5" />}
+                            {colType === 'number' && <Hash className="w-3.5 h-3.5" />}
+                            {colType === 'date' && <Calendar className="w-3.5 h-3.5" />}
+                            Columna Objetivo
+                        </label>
+                        <div className="px-3 py-2 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg text-sm font-semibold text-[var(--text-primary)]">
+                            {column}
+                            <span className="ml-2 text-[10px] bg-[var(--brand-primary)]/10 text-[var(--brand-primary)] px-2 py-0.5 rounded-full uppercase">
+                                {colType}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-1">
+                        <label className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider">
+                            Condición
+                        </label>
+                        <select 
+                            value={operator}
+                            onChange={(e) => setOperator(e.target.value)}
+                            className="w-full px-3 py-2 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg text-sm outline-none focus:ring-2 focus:ring-[var(--brand-primary)]/50 transition-shadow appearance-none"
+                        >
+                            {currentOperators.map(op => (
+                                <option key={op.val} value={op.val}>{op.label}</option>
+                            ))}
+                        </select>
+                    </div>
+
+                    <div className="flex flex-col gap-1">
+                        <label className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider">
+                            Valor
+                        </label>
+                        <input
+                            type={colType === 'date' ? 'date' : colType === 'number' ? 'number' : 'text'}
+                            step="any"
+                            autoFocus
+                            value={value}
+                            onChange={(e) => setValue(e.target.value)}
+                            placeholder="Escribe el valor..."
+                            className="w-full px-3 py-2 bg-transparent border border-[var(--border-color)] rounded-lg text-sm outline-none focus:ring-2 focus:ring-[var(--brand-primary)]/50 transition-shadow"
+                        />
+                    </div>
+
+                    <div className="pt-2 flex gap-3">
+                        <button 
+                            type="button" 
+                            onClick={onClose}
+                            className="flex-1 px-4 py-2 border border-[var(--border-color)] rounded-xl text-sm font-medium hover:bg-[var(--bg-surface)] transition-colors"
+                        >
+                            Cancelar
+                        </button>
+                        <button 
+                            type="submit"
+                            disabled={!value.trim()}
+                            className="flex-1 px-4 py-2 bg-[var(--brand-primary)] hover:opacity-90 text-white rounded-xl text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            Aplicar Filtro
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};

package/src/components/DatawayMathModal.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react';
+import { X, Calculator, Hash, Edit3 } from 'lucide-react';
+
+interface MathModalProps {
+    isOpen: boolean;
+    columns: string[];
+    onClose: () => void;
+    onApply: (newCol: string, leftCol: string, operator: string, rightOperand: string) => void;
+}
+
+export const DatawayMathModal: React.FC<MathModalProps> = ({ isOpen, columns, onClose, onApply }) => {
+    const [newColName, setNewColName] = useState('');
+    const [leftCol, setLeftCol] = useState(columns[0] || '');
+    const [operator, setOperator] = useState('+');
+    const [rightOperand, setRightOperand] = useState('');
+
+    useEffect(() => {
+        if (isOpen) {
+            setNewColName('');
+            setLeftCol(columns[0] || '');
+            setOperator('+');
+            setRightOperand('');
+        }
+    }, [isOpen, columns]);
+
+    if (!isOpen) return null;
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!newColName.trim() || !rightOperand.trim()) return;
+        onApply(newColName.trim(), leftCol, operator, rightOperand.trim());
+    };
+
+    return (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="flex items-center justify-between p-4 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]">
+                    <h3 className="font-bold flex items-center gap-2 text-[var(--text-primary)]">
+                        <Calculator className="w-4 h-4 text-purple-600" />
+                        Columna Calculada
+                    </h3>
+                    <button onClick={onClose} className="p-1 hover:bg-[var(--bg-surface)] rounded-md transition-colors text-[var(--text-secondary)]">
+                        <X className="w-4 h-4" />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="p-5 space-y-4">
+                    <div className="flex flex-col gap-1">
+                        <label className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider flex items-center gap-1.5">
+                            <Edit3 className="w-3.5 h-3.5" /> Nombre Nueva Columna
+                        </label>
+                        <input
+                            type="text"
+                            autoFocus
+                            value={newColName}
+                            onChange={(e) => setNewColName(e.target.value)}
+                            placeholder="Ej. Ingresos Netos"
+                            className="w-full px-3 py-2 bg-transparent border border-[var(--border-color)] rounded-lg text-sm outline-none focus:ring-2 focus:ring-purple-600/50 transition-shadow"
+                        />
+                    </div>
+
+                    <div className="flex bg-[var(--bg-surface)] p-3 rounded-xl border border-[var(--border-color)] gap-3 items-center">
+                        <div className="flex-1 flex flex-col gap-1">
+                            <label className="text-[10px] font-bold text-[var(--text-secondary)] uppercase">Columna (A)</label>
+                            <select 
+                                value={leftCol}
+                                onChange={(e) => setLeftCol(e.target.value)}
+                                className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-md text-sm outline-none"
+                            >
+                                {columns.map(col => <option key={col} value={col}>{col}</option>)}
+                            </select>
+                        </div>
+                        
+                        <div className="w-12 flex flex-col gap-1">
+                            <label className="text-[10px] font-bold text-[var(--text-secondary)] uppercase text-center">Op</label>
+                            <select 
+                                value={operator}
+                                onChange={(e) => setOperator(e.target.value)}
+                                className="w-full px-1 py-1.5 bg-purple-50 text-purple-700 border border-purple-200 rounded-md text-sm outline-none text-center font-bold font-mono"
+                            >
+                                <option value="+">+</option>
+                                <option value="-">-</option>
+                                <option value="*">*</option>
+                                <option value="/">/</option>
+                            </select>
+                        </div>
+
+                        <div className="flex-1 flex flex-col gap-1">
+                            <label className="text-[10px] font-bold text-[var(--text-secondary)] uppercase" title="Puede ser otra columna o un número fijo">Columna o # (B)</label>
+                            <input
+                                type="text"
+                                value={rightOperand}
+                                onChange={(e) => setRightOperand(e.target.value)}
+                                placeholder="Col o #..."
+                                className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-md text-sm outline-none"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="pt-2 flex gap-3">
+                        <button 
+                            type="button" 
+                            onClick={onClose}
+                            className="flex-1 px-4 py-2 border border-[var(--border-color)] rounded-xl text-sm font-medium hover:bg-[var(--bg-surface)] transition-colors"
+                        >
+                            Cancelar
+                        </button>
+                        <button 
+                            type="submit"
+                            disabled={!newColName.trim() || !rightOperand.trim()}
+                            className="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-xl text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                        >
+                            <Calculator className="w-4 h-4" /> Calcular
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};