gufi-cli 0.1.7 → 0.1.9

package/CLAUDE.md

@@ -604,15 +604,16 @@ SELECT id, name, code FROM marketplace.views WHERE package_id = 14;
 
 ### Estructura de Archivos de una View
 
-Cuando descargas una view con `gufi pull`, obtienes:
+Cuando descargas una view con `gufi view:pull <id>`, obtienes:
 
 ```
-~/gufi-dev/mi-vista/
+~/gufi-dev/view_<id>/
 ├── index.tsx              # Entry point - exporta featureConfig y default
 ├── types.ts               # Interfaces TypeScript
 │
 ├── core/
-│   └── dataProvider.ts    # 💜 dataSources + featureConfig (MUY IMPORTANTE)
+│   ├── dataProvider.ts    # 💜 dataSources + featureConfig (MUY IMPORTANTE)
+│   └── permissions.ts     # 💜 Sistema de permisos dinámico
 │
 ├── metadata/
 │   ├── inputs.ts          # 💜 Inputs configurables por usuario
@@ -620,7 +621,8 @@ Cuando descargas una view con `gufi pull`, obtienes:
 │   └── help.en.ts         # Documentación en inglés
 │
 ├── components/
-│   └── MiComponente.tsx   # Componentes React
+│   ├── MiComponente.tsx   # Componentes React
+│   └── DevPermissionSwitcher.tsx  # 💜 Testing de permisos en dev
 │
 ├── views/
 │   └── page.tsx           # Página principal
@@ -882,6 +884,198 @@ Para crear tarea, pulsa el botón **+**
 
 ---
 
+### 💜 permissions - Sistema de Permisos Explícitos (Sin Wildcards)
+
+Las vistas usan un sistema de **permisos explícitos** - sin wildcards, sin magia. Cada permiso es un string específico que existe o no en el array de permisos del usuario.
+
+> ⚠️ **Importante**: Eliminamos el soporte de wildcards (`*`) porque causaba problemas de integridad entre el estado de la UI y los permisos reales. Siempre usa strings de permisos explícitos.
+
+**1. Declarar permisos en `metadata/permissions.ts`:**
+```typescript
+// metadata/permissions.ts
+export const permissions = [
+  // Permisos estáticos - toggles simples
+  {
+    key: 'send_orders',
+    label: { es: 'Enviar pedidos', en: 'Send orders' },
+    description: { es: 'Puede enviar pedidos a proveedores', en: 'Can send orders' },
+  },
+  {
+    key: 'view_costs',
+    label: { es: 'Ver costos', en: 'View costs' },
+    description: { es: 'Puede ver precios de compra', en: 'Can see purchase prices' },
+  },
+
+  // Permisos dinámicos - se resuelven en runtime
+  {
+    key: 'warehouse:*',  // Placeholder, se resuelve a warehouse:madrid, warehouse:barcelona, etc.
+    label: { es: 'Acceso a almacén', en: 'Warehouse access' },
+    description: { es: 'Almacenes a los que tiene acceso', en: 'Warehouses user can access' },
+    dynamic: true,  // Marca este como dinámico
+  },
+] as const;
+```
+
+**2. Crear `core/permissions.ts` (sin wildcards):**
+```typescript
+// core/permissions.ts
+// SIN WILDCARDS - solo permisos explícitos
+
+export interface PermissionsConfig {
+  userPermissions: string[];  // Permisos del usuario (resueltos desde su rol)
+  isDevMode: boolean;
+  devPermissions: string[];   // Override en modo dev para testing
+}
+
+// Obtener permisos efectivos (dev mode override)
+function getEffectivePermissions(config: PermissionsConfig): string[] {
+  const { userPermissions, isDevMode, devPermissions } = config;
+  return (isDevMode && devPermissions.length > 0) ? devPermissions : userPermissions;
+}
+
+// Check simple - ¿tiene exactamente este permiso?
+export function hasPermission(config: PermissionsConfig, permission: string): boolean {
+  const perms = getEffectivePermissions(config);
+  return perms.includes(permission);
+}
+
+// Helpers específicos de la vista
+export function canSendOrders(config: PermissionsConfig): boolean {
+  return hasPermission(config, 'send_orders');
+}
+
+export function canViewCosts(config: PermissionsConfig): boolean {
+  return hasPermission(config, 'view_costs');
+}
+
+// Obtener warehouses permitidos (null si no hay restricciones)
+export function getAllowedWarehouses(config: PermissionsConfig): string[] | null {
+  const perms = getEffectivePermissions(config);
+
+  const warehouses: string[] = [];
+  for (const perm of perms) {
+    if (perm.startsWith('warehouse:')) {
+      warehouses.push(perm.slice('warehouse:'.length));
+    }
+  }
+
+  return warehouses.length > 0 ? warehouses : null;
+}
+```
+
+**3. Usar en el componente con inicialización correcta:**
+```typescript
+import { useState, useEffect, useRef } from 'react';
+import { DevPermissionSwitcher } from '../components/DevPermissionSwitcher';
+import { canSendOrders, getAllowedWarehouses } from '../core/permissions';
+
+export default function MiVista({ gufi }) {
+  const lang = gufi?.context?.lang || 'es';
+  const isDevMode = gufi?.context?.isPreview || window.location.hostname === 'localhost';
+
+  // 💜 IMPORTANTE: Inicializar vacío, poblar cuando los datos carguen
+  const [devPermissions, setDevPermissions] = useState<string[]>([]);
+  const devPermissionsInitialized = useRef(false);
+
+  // Cargar warehouses de tu data source
+  const [warehouses, setWarehouses] = useState([]);
+
+  // Inicializar permisos cuando warehouses carguen (una sola vez)
+  useEffect(() => {
+    if (isDevMode && !devPermissionsInitialized.current && warehouses.length > 0) {
+      devPermissionsInitialized.current = true;
+
+      // Otorgar todos los permisos explícitos
+      const allPerms = [
+        'send_orders',
+        'view_costs',
+        ...warehouses.map(w => `warehouse:${w.name.toLowerCase()}`),
+      ];
+      setDevPermissions(allPerms);
+    }
+  }, [isDevMode, warehouses]);
+
+  // Construir config de permisos
+  const permissionsConfig = {
+    userPermissions: gufi?.context?.user?.permissions || [],
+    isDevMode,
+    devPermissions,
+  };
+
+  // Usar helpers de permisos
+  const showCosts = canViewCosts(permissionsConfig);
+  const allowedWarehouses = getAllowedWarehouses(permissionsConfig);
+
+  return (
+    <div>
+      {showCosts && <CostsColumn />}
+
+      {/* DevPermissionSwitcher - solo en dev mode */}
+      {isDevMode && (
+        <DevPermissionSwitcher
+          lang={lang}
+          activePermissions={devPermissions}
+          onPermissionsChange={setDevPermissions}
+          dynamicValues={{
+            warehouse: warehouses.map(w => w.name.toLowerCase())
+          }}
+        />
+      )}
+    </div>
+  );
+}
+```
+
+**DevPermissionSwitcher**: Botón flotante **purple** (💜 Gufi style) que permite:
+- Toggle individual de permisos on/off
+- Botón "Todos" en el header para acceso completo
+- Permisos dinámicos expandibles (ej: warehouses individuales)
+- Integridad total: UI siempre refleja el estado real
+
+### 💜 DevPermissionSwitcher AUTOMÁTICO (LivePreviewPage)
+
+**¡Ya no necesitas incluir DevPermissionSwitcher en tu código!** LivePreviewPage detecta automáticamente si tu vista tiene `featureConfig.permissions` y muestra el botón DEV.
+
+**Cómo funciona:**
+1. Declara permisos en `metadata/permissions.ts`
+2. Expórtalos en `featureConfig`:
+   ```typescript
+   // core/dataProvider.ts
+   import { permissions } from '../metadata/permissions';
+
+   export const featureConfig = {
+     dataSources,
+     inputs: featureInputs,
+     permissions,  // 💜 Solo añadir esto
+   };
+   ```
+3. LivePreviewPage lo detecta y muestra el botón DEV automáticamente
+
+**Usar devPermissions del contexto:**
+```typescript
+export default function MiVista({ gufi }) {
+  // 💜 LivePreviewPage provee devPermissions automáticamente
+  const effectiveDevPermissions = gufi?.context?.devPermissions || [];
+
+  const permissionsConfig = {
+    userPermissions: gufi?.context?.userPermissions || [],
+    isDevMode: gufi?.context?.isPreview || gufi?.context?.isDev,
+    devPermissions: effectiveDevPermissions,
+  };
+
+  // Usar helpers de permisos normalmente
+  const canSend = hasPermission(permissionsConfig, 'send_orders');
+}
+```
+
+**Cuándo incluir DevPermissionSwitcher manualmente:**
+- Solo si la vista se ejecuta fuera de LivePreviewPage (ej: vista nativa del frontend)
+- Para vistas del marketplace en Developer Center → **NO necesario**, es automático
+
+**Principio clave**: Inicializar con `[]` vacío, luego usar `useEffect` para otorgar todos los permisos cuando los valores dinámicos (como warehouses) terminen de cargar. Esto garantiza integridad UI.
+
+---
+
 ### 💜 automations en Vistas
 
 Las vistas pueden incluir automations que se ejecutan al hacer click.
@@ -1475,11 +1669,13 @@ gufi rows:create m360_t16192 --file datos.json
 ### Desarrollo de Views
 
 ```bash
-# Ver tus views del Marketplace
+# Ver tus views del Marketplace (muestra ID de cada vista)
 gufi views
+#   📦 Gestión de Tareas (ID: 14)
+#      └─ 13 Tasks Manager (custom)
 
-# Descargar view para editar localmente
-gufi view:pull "Stock Overview"
+# Descargar view por ID (se guarda en ~/gufi-dev/view_<id>/)
+gufi view:pull 13
 
 # Auto-sync al guardar archivos
 gufi view:watch
@@ -1516,7 +1712,7 @@ gufi view:status
 | Ver estructura de una company | `gufi modules <company_id>` |
 | Ver/editar JSON de módulo | `gufi module <id> -c <company>` |
 | Ver/editar código de automation | `gufi automation <nombre> -c <company>` |
-| Desarrollar una vista | `gufi pull`, `gufi watch`, `gufi logs` |
+| Desarrollar una vista | `gufi view:pull <id>`, `gufi view:watch`, `gufi view:logs` |
 
 ### Errores comunes
 

package/dist/commands/companies.js

@@ -370,11 +370,12 @@ export async function companyCreateCommand(name) {
             method: "POST",
             body: JSON.stringify({ name }),
         });
-        const company = result.data || result;
+        // API returns { company: {...}, message: "..." }
+        const company = result.company || result.data || result;
         console.log(chalk.green("  ✓ Company creada!\n"));
         console.log(chalk.white(`  ID: ${company.id}`));
         console.log(chalk.white(`  Nombre: ${company.name}`));
-        console.log(chalk.white(`  Schema: company_${company.id}`));
+        console.log(chalk.white(`  Schema: ${company.schema || 'company_' + company.id}`));
         console.log(chalk.gray("\n  💡 Usa: gufi modules " + company.id + " para ver módulos\n"));
     }
     catch (err) {

package/dist/commands/list.js

@@ -29,11 +29,11 @@ export async function listCommand() {
             else {
                 views.forEach((view, i) => {
                     const prefix = i === views.length - 1 ? "└─" : "├─";
-                    console.log(chalk.white(`     ${prefix} ${view.name}`) + chalk.gray(` (${view.view_type}, ID: ${view.pk_id})`));
+                    console.log(`     ${prefix} ${chalk.cyan(view.pk_id)} ${view.name} ${chalk.gray(`(${view.view_type})`)}`);
                 });
             }
         }
-        console.log(chalk.gray("\n  Usa: gufi pull <view-id> para descargar una vista\n"));
+        console.log(chalk.gray("\n  Usa: ") + chalk.cyan("gufi view:pull <id>") + chalk.gray(" para descargar una vista\n"));
     }
     catch (error) {
         spinner.fail(chalk.red(error.message));

package/dist/commands/login.js

@@ -1,53 +1,11 @@
 /**
  * gufi login - Authenticate with Gufi
  */
-import readline from "readline";
+import prompts from "prompts";
 import chalk from "chalk";
 import ora from "ora";
 import { login, validateToken } from "../lib/api.js";
 import { setToken, isLoggedIn, clearToken, loadConfig, setApiUrl } from "../lib/config.js";
-function prompt(question, hidden = false) {
-    const rl = readline.createInterface({
-        input: process.stdin,
-        output: process.stdout,
-    });
-    return new Promise((resolve) => {
-        if (hidden) {
-            process.stdout.write(question);
-            let input = "";
-            process.stdin.setRawMode?.(true);
-            process.stdin.resume();
-            process.stdin.on("data", (char) => {
-                const c = char.toString();
-                if (c === "\n" || c === "\r") {
-                    process.stdin.setRawMode?.(false);
-                    process.stdout.write("\n");
-                    rl.close();
-                    resolve(input);
-                }
-                else if (c === "\u0003") {
-                    process.exit();
-                }
-                else if (c === "\u007F") {
-                    if (input.length > 0) {
-                        input = input.slice(0, -1);
-                        process.stdout.write("\b \b");
-                    }
-                }
-                else {
-                    input += c;
-                    process.stdout.write("*");
-                }
-            });
-        }
-        else {
-            rl.question(question, (answer) => {
-                rl.close();
-                resolve(answer);
-            });
-        }
-    });
-}
 export async function loginCommand(options) {
     console.log(chalk.magenta("\n  🟣 Gufi Developer CLI\n"));
     // Set custom API URL if provided
@@ -62,8 +20,13 @@ export async function loginCommand(options) {
         const valid = await validateToken();
         if (valid) {
             spinner.succeed(chalk.green(`Ya estás logueado como ${config.email}`));
-            const relogin = await prompt("\n¿Quieres iniciar sesión con otra cuenta? (s/N): ");
-            if (relogin.toLowerCase() !== "s") {
+            const { relogin } = await prompts({
+                type: "confirm",
+                name: "relogin",
+                message: "¿Quieres iniciar sesión con otra cuenta?",
+                initial: false,
+            });
+            if (!relogin) {
                 return;
             }
             clearToken();
@@ -73,19 +36,34 @@ export async function loginCommand(options) {
             clearToken();
         }
     }
-    // Get credentials
-    const email = await prompt("  Email: ");
-    const password = await prompt("  Password: ", true);
-    if (!email || !password) {
+    // Get credentials using prompts (more robust than readline)
+    const response = await prompts([
+        {
+            type: "text",
+            name: "email",
+            message: "Email",
+            validate: (v) => (v ? true : "Email es requerido"),
+        },
+        {
+            type: "password",
+            name: "password",
+            message: "Password",
+            validate: (v) => (v ? true : "Password es requerido"),
+        },
+    ]);
+    if (!response.email || !response.password) {
         console.log(chalk.red("\n  ✗ Email y password son requeridos\n"));
         process.exit(1);
     }
     const spinner = ora("Iniciando sesión...").start();
     try {
-        const { token, refreshToken } = await login(email, password);
-        setToken(token, email, refreshToken);
-        spinner.succeed(chalk.green(`Sesión iniciada como ${email}`));
-        console.log(chalk.gray("\n  Tu sesión se mantendrá activa automáticamente.\n"));
+        const { token, refreshToken } = await login(response.email, response.password);
+        if (!refreshToken) {
+            console.log(chalk.yellow("\n  ⚠️  No se recibió refresh token - sesión durará 1 hora"));
+        }
+        setToken(token, response.email, refreshToken);
+        spinner.succeed(chalk.green(`Sesión iniciada como ${response.email}`));
+        console.log(chalk.gray("\n  Tu sesión se mantendrá activa automáticamente (7 días).\n"));
         console.log(chalk.gray("  Ahora puedes usar: gufi pull <vista>\n"));
     }
     catch (error) {

package/dist/commands/pull.js

@@ -13,17 +13,17 @@ export async function pullCommand(viewIdentifier) {
     }
     console.log(chalk.magenta("\n  🟣 Gufi Pull\n"));
     let viewId;
-    let viewName;
+    let viewKey;
     let packageId;
-    // If view ID provided directly
+    // 💜 Solo acepta ID numérico
     if (viewIdentifier && /^\d+$/.test(viewIdentifier)) {
         viewId = parseInt(viewIdentifier);
         const spinner = ora("Obteniendo vista...").start();
         try {
             const view = await getView(viewId);
-            viewName = view.name;
+            viewKey = `view_${viewId}`;
             packageId = view.package_id;
-            spinner.succeed(`Vista: ${viewName}`);
+            spinner.succeed(`Vista ${chalk.cyan(viewId)}: ${view.name || "sin nombre"}`);
         }
         catch (error) {
             spinner.fail(chalk.red(`No se encontró la vista ${viewId}`));
@@ -56,21 +56,14 @@ export async function pullCommand(viewIdentifier) {
                 process.exit(0);
             }
             console.log(chalk.gray("  Vistas disponibles:\n"));
-            views.forEach((view, i) => {
-                console.log(`  ${chalk.cyan(i + 1)}. ${view.name} ${chalk.gray(`(${view.view_type})`)}`);
+            views.forEach((view) => {
+                console.log(`     ${chalk.cyan(view.pk_id)} ${view.name || "sin nombre"} ${chalk.gray(`(${view.view_type})`)}`);
             });
-            // If viewIdentifier matches a name
-            let selectedView = viewIdentifier
-                ? views.find(v => v.name.toLowerCase().includes(viewIdentifier.toLowerCase()))
-                : views[0];
-            if (!selectedView) {
-                console.log(chalk.yellow(`\n  No se encontró vista "${viewIdentifier}"\n`));
-                console.log(chalk.gray("  Uso: gufi pull <nombre-vista> o gufi pull <view-id>\n"));
-                process.exit(1);
+            if (viewIdentifier) {
+                console.log(chalk.yellow(`\n  "${viewIdentifier}" no es un ID válido.\n`));
             }
-            viewId = selectedView.pk_id;
-            viewName = selectedView.name;
-            console.log(chalk.gray(`\n  Descargando: ${viewName}\n`));
+            console.log(chalk.gray("\n  Uso: ") + chalk.cyan("gufi view:pull <id>") + chalk.gray(" (ej: gufi view:pull 13)\n"));
+            process.exit(0);
         }
         catch (error) {
             spinner.fail(chalk.red(error.message));
@@ -80,7 +73,7 @@ export async function pullCommand(viewIdentifier) {
     // Pull the view
     const pullSpinner = ora("Descargando archivos...").start();
     try {
-        const result = await pullView(viewId, viewName, packageId);
+        const result = await pullView(viewId, viewKey, packageId);
         pullSpinner.succeed(chalk.green(`${result.fileCount} archivos descargados`));
         console.log(chalk.gray(`\n  📁 ${result.dir}\n`));
         console.log(chalk.gray("  Comandos útiles:"));

package/dist/index.js

@@ -44,7 +44,7 @@ const program = new Command();
 program
     .name("gufi")
     .description("🟣 Gufi CLI - Desarrolla módulos, vistas y automations")
-    .version("0.1.7");
+    .version("0.1.8");
 // ════════════════════════════════════════════════════════════════════
 // 🔐 Auth
 // ════════════════════════════════════════════════════════════════════

package/dist/lib/api.js

@@ -14,8 +14,10 @@ class ApiError extends Error {
 // Auto-refresh the token if expired
 async function refreshAccessToken() {
     const refreshToken = getRefreshToken();
-    if (!refreshToken)
+    if (!refreshToken) {
+        console.error("[gufi] No refresh token available");
         return null;
+    }
     try {
         const url = `${getApiUrl()}/api/auth/refresh`;
         const response = await fetch(url, {
@@ -26,14 +28,18 @@ async function refreshAccessToken() {
                 "X-Refresh-Token": refreshToken,
             },
         });
-        if (!response.ok)
+        if (!response.ok) {
+            console.error(`[gufi] Refresh failed: ${response.status}`);
             return null;
+        }
         const data = await response.json();
         const config = loadConfig();
         setToken(data.accessToken, config.email || "", data.refreshToken);
+        console.log("[gufi] Token refreshed successfully");
         return data.accessToken;
     }
-    catch {
+    catch (err) {
+        console.error("[gufi] Refresh error:", err);
         return null;
     }
 }

package/dist/lib/sync.d.ts

@@ -12,12 +12,15 @@ export interface ViewMeta {
         mtime: number;
     }>;
 }
-export declare function getViewDir(viewName: string): string;
+export declare function getViewDir(viewKey: string): string;
 export declare function loadViewMeta(viewDir: string): ViewMeta | null;
 /**
  * Pull view files from Gufi to local directory
+ * @param viewId - The view ID
+ * @param viewKey - The unique identifier in view_<id> format (e.g., view_123)
+ * @param packageId - The package ID
  */
-export declare function pullView(viewId: number, viewName: string, packageId: number): Promise<{
+export declare function pullView(viewId: number, viewKey: string, packageId: number): Promise<{
     dir: string;
     fileCount: number;
 }>;

package/dist/lib/sync.js

@@ -37,8 +37,9 @@ function getLanguage(filePath) {
     };
     return langMap[ext] || "text";
 }
-export function getViewDir(viewName) {
-    return path.join(GUFI_DEV_DIR, viewName.toLowerCase().replace(/\s+/g, "-"));
+// 💜 viewKey is now always in view_<id> format (e.g., view_123)
+export function getViewDir(viewKey) {
+    return path.join(GUFI_DEV_DIR, viewKey.toLowerCase());
 }
 export function loadViewMeta(viewDir) {
     const metaPath = path.join(viewDir, META_FILE);
@@ -57,9 +58,12 @@ function saveViewMeta(viewDir, meta) {
 }
 /**
  * Pull view files from Gufi to local directory
+ * @param viewId - The view ID
+ * @param viewKey - The unique identifier in view_<id> format (e.g., view_123)
+ * @param packageId - The package ID
  */
-export async function pullView(viewId, viewName, packageId) {
-    const viewDir = getViewDir(viewName);
+export async function pullView(viewId, viewKey, packageId) {
+    const viewDir = getViewDir(viewKey);
     ensureDir(viewDir);
     const files = await getViewFiles(viewId);
     const fileMeta = {};
@@ -74,14 +78,14 @@ export async function pullView(viewId, viewName, packageId) {
     }
     const meta = {
         viewId,
-        viewName,
+        viewName: viewKey, // 💜 Store viewKey as viewName for backwards compat
         packageId,
         lastSync: new Date().toISOString(),
         files: fileMeta,
     };
     saveViewMeta(viewDir, meta);
     // Update current view in config
-    setCurrentView({ id: viewId, name: viewName, packageId, localPath: viewDir });
+    setCurrentView({ id: viewId, name: viewKey, packageId, localPath: viewDir });
     return { dir: viewDir, fileCount: files.length };
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gufi-cli",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "CLI for developing Gufi Marketplace views locally with Claude Code",
   "bin": {
     "gufi": "./bin/gufi.js"
@@ -22,12 +22,14 @@
     "start": "node bin/gufi.js"
   },
   "dependencies": {
+    "@types/prompts": "^2.4.9",
     "@types/ws": "^8.18.1",
     "chalk": "^5.3.0",
     "chokidar": "^3.5.3",
     "commander": "^12.0.0",
     "node-fetch": "^3.3.2",
     "ora": "^8.0.1",
+    "prompts": "^2.4.2",
     "ws": "^8.18.3"
   },
   "devDependencies": {