gufi-cli 0.1.7 → 0.1.8

package/CLAUDE.md

@@ -612,7 +612,8 @@ Cuando descargas una view con `gufi pull`, obtienes:
 ├── 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,158 @@ 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
+
+**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.

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

@@ -21,7 +21,7 @@ export async function pullCommand(viewIdentifier) {
         const spinner = ora("Obteniendo vista...").start();
         try {
             const view = await getView(viewId);
-            viewName = view.name;
+            viewName = view.name || `vista-${viewId}`;
             packageId = view.package_id;
             spinner.succeed(`Vista: ${viewName}`);
         }
@@ -57,11 +57,12 @@ export async function pullCommand(viewIdentifier) {
             }
             console.log(chalk.gray("  Vistas disponibles:\n"));
             views.forEach((view, i) => {
-                console.log(`  ${chalk.cyan(i + 1)}. ${view.name} ${chalk.gray(`(${view.view_type})`)}`);
+                const name = view.name || `Vista ${view.pk_id}`;
+                console.log(`  ${chalk.cyan(i + 1)}. ${name} ${chalk.gray(`(${view.view_type})`)}`);
             });
             // If viewIdentifier matches a name
             let selectedView = viewIdentifier
-                ? views.find(v => v.name.toLowerCase().includes(viewIdentifier.toLowerCase()))
+                ? views.find(v => v.name && v.name.toLowerCase().includes(viewIdentifier.toLowerCase()))
                 : views[0];
             if (!selectedView) {
                 console.log(chalk.yellow(`\n  No se encontró vista "${viewIdentifier}"\n`));
@@ -69,7 +70,7 @@ export async function pullCommand(viewIdentifier) {
                 process.exit(1);
             }
             viewId = selectedView.pk_id;
-            viewName = selectedView.name;
+            viewName = selectedView.name || `vista-${selectedView.pk_id}`;
             console.log(chalk.gray(`\n  Descargando: ${viewName}\n`));
         }
         catch (error) {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gufi-cli",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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": {