routes updated

public/app.js

@@ -11,5 +11,12 @@ import "./components/quantities-crud.js";
 import "./components/orders-crud.js";
 import "./components/test-panel.js";
 import { connectSSE } from "./lib/sse.js";
+import { initRouter } from "./lib/router.js";
 
 connectSSE();
+
+// Inicializar router después de que los componentes estén registrados
+// Usa setTimeout para asegurar que el DOM esté listo
+setTimeout(() => {
+  initRouter();
+}, 0);

public/components/ops-shell.js

@@ -1,10 +1,12 @@
-import { on } from "../lib/bus.js";
+import { emit, on } from "../lib/bus.js";
+import { navigateToView, navigateToItem } from "../lib/router.js";
 
 class OpsShell extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
     this._currentView = "chat";
+    this._currentParams = {};
 
     this.shadowRoot.innerHTML = `
       <style>
@@ -14,7 +16,7 @@ class OpsShell extends HTMLElement {
         header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
         header h1 { font-size:14px; margin:0; color:var(--muted); font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
         .nav { display:flex; gap:4px; margin-left:24px; flex-wrap:wrap; }
-        .nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; }
+        .nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; text-decoration:none; }
         .nav-btn:hover { border-color:var(--blue); color:var(--text); }
         .nav-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
         .spacer { flex:1; }
@@ -38,15 +40,15 @@ class OpsShell extends HTMLElement {
         <header>
           <h1>Bot Ops Console</h1>
           <nav class="nav">
-            <button class="nav-btn active" data-view="chat">Chat</button>
+            <a class="nav-btn active" href="/chat" data-view="chat">Chat</a>
-            <button class="nav-btn" data-view="conversations">Conversaciones</button>
+            <a class="nav-btn" href="/conversaciones" data-view="conversations">Conversaciones</a>
-            <button class="nav-btn" data-view="users">Usuarios</button>
+            <a class="nav-btn" href="/usuarios" data-view="users">Usuarios</a>
-            <button class="nav-btn" data-view="products">Productos</button>
+            <a class="nav-btn" href="/productos" data-view="products">Productos</a>
-            <button class="nav-btn" data-view="aliases">Equivalencias</button>
+            <a class="nav-btn" href="/equivalencias" data-view="aliases">Equivalencias</a>
-            <button class="nav-btn" data-view="crosssell">Cross-sell</button>
+            <a class="nav-btn" href="/crosssell" data-view="crosssell">Cross-sell</a>
-            <button class="nav-btn" data-view="quantities">Cantidades</button>
+            <a class="nav-btn" href="/cantidades" data-view="quantities">Cantidades</a>
-            <button class="nav-btn" data-view="orders">Pedidos</button>
+            <a class="nav-btn" href="/pedidos" data-view="orders">Pedidos</a>
-            <button class="nav-btn" data-view="test">Test</button>
+            <a class="nav-btn" href="/test" data-view="test">Test</a>
           </nav>
           <div class="spacer"></div>
           <div class="status" id="sseStatus">SSE: connecting…</div>
@@ -119,23 +121,34 @@ class OpsShell extends HTMLElement {
 
     // Listen for view switch requests from other components
     this._unsubSwitch = on("ui:switchView", ({ view }) => {
-      if (view) this.setView(view);
+      if (view) this.setView(view, {}, { updateUrl: true });
     });
 
-    // Navigation
+    // Listen for router changes (popstate, initial load)
+    this._unsubRouter = on("router:change", ({ view, params }) => {
+      this.setView(view, params, { updateUrl: false });
+    });
+
+    // Navigation - intercept clicks on nav links
     const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
     for (const btn of navBtns) {
-      btn.onclick = () => this.setView(btn.dataset.view);
+      btn.onclick = (e) => {
+        e.preventDefault();
+        const view = btn.dataset.view;
+        this.setView(view, {}, { updateUrl: true });
+      };
     }
   }
 
   disconnectedCallback() {
     this._unsub?.();
     this._unsubSwitch?.();
+    this._unsubRouter?.();
   }
 
-  setView(viewName) {
+  setView(viewName, params = {}, { updateUrl = true } = {}) {
     this._currentView = viewName;
+    this._currentParams = params;
 
     // Update nav buttons
     const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
@@ -149,6 +162,18 @@ class OpsShell extends HTMLElement {
       const isActive = view.id === `view${viewName.charAt(0).toUpperCase() + viewName.slice(1)}`;
       view.classList.toggle("active", isActive);
     }
+
+    // Update URL if requested
+    if (updateUrl) {
+      if (params.id) {
+        navigateToItem(viewName, params.id);
+      } else {
+        navigateToView(viewName);
+      }
+    }
+
+    // Emit event for components that need to know about route params
+    emit("router:viewChanged", { view: viewName, params });
   }
 }
 

public/components/orders-crud.js

@@ -1,4 +1,6 @@
 import { api } from "../lib/api.js";
+import { on } from "../lib/bus.js";
+import { navigateToItem } from "../lib/router.js";
 
 function formatDate(dateStr) {
   if (!dateStr) return "—";
@@ -237,9 +239,21 @@ class OrdersCrud extends HTMLElement {
 
   connectedCallback() {
     this.shadowRoot.getElementById("btnRefresh").onclick = () => this.loadOrders();
+    
+    // Escuchar cambios de ruta para deep-linking
+    this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
+      if (view === "orders" && params.id) {
+        this.selectOrderById(params.id);
+      }
+    });
+    
     this.loadOrders();
   }
 
+  disconnectedCallback() {
+    this._unsubRouter?.();
+  }
+
   async loadOrders() {
     const container = this.shadowRoot.getElementById("ordersTable");
     container.innerHTML = `<div class="empty">Cargando pedidos...</div>`;
@@ -248,6 +262,15 @@ class OrdersCrud extends HTMLElement {
       const result = await api.listRecentOrders({ limit: 50 });
       this.orders = result.items || [];
       this.renderTable();
+      
+      // Si hay un pedido pendiente de selección (deep-link), seleccionarlo
+      if (this._pendingOrderId) {
+        const order = this.orders.find(o => o.id === this._pendingOrderId);
+        if (order) {
+          this.selectOrder(order, { updateUrl: false });
+        }
+        this._pendingOrderId = null;
+      }
     } catch (e) {
       console.error("[orders-crud] Error loading orders:", e);
       container.innerHTML = `<div class="empty">Error cargando pedidos: ${e.message}</div>`;
@@ -319,10 +342,29 @@ class OrdersCrud extends HTMLElement {
     });
   }
 
-  selectOrder(order) {
+  selectOrder(order, { updateUrl = true } = {}) {
     this.selectedOrder = order;
     this.renderTable();
     this.renderDetail();
+    
+    // Actualizar URL
+    if (updateUrl && order) {
+      navigateToItem("orders", order.id);
+    }
+  }
+
+  selectOrderById(orderId) {
+    const id = parseInt(orderId);
+    if (!id) return;
+    
+    // Si ya tenemos los pedidos cargados, buscar y seleccionar
+    const order = this.orders.find(o => o.id === id);
+    if (order) {
+      this.selectOrder(order, { updateUrl: false });
+    } else {
+      // Guardar el ID pendiente para seleccionar después de cargar
+      this._pendingOrderId = id;
+    }
   }
 
   renderDetail() {

public/components/products-crud.js

@@ -1,4 +1,6 @@
 import { api } from "../lib/api.js";
+import { on } from "../lib/bus.js";
+import { navigateToItem } from "../lib/router.js";
 
 class ProductsCrud extends HTMLElement {
   constructor() {
@@ -112,9 +114,20 @@ class ProductsCrud extends HTMLElement {
       this.updateStatStyles();
     };
 
+    // Escuchar cambios de ruta para deep-linking
+    this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
+      if (view === "products" && params.id) {
+        this.selectProductById(params.id);
+      }
+    });
+
     this.load();
   }
 
+  disconnectedCallback() {
+    this._unsubRouter?.();
+  }
+
   updateStatStyles() {
     const statTotal = this.shadowRoot.getElementById("statTotal");
     const statStock = this.shadowRoot.getElementById("statStock");
@@ -132,6 +145,17 @@ class ProductsCrud extends HTMLElement {
       this.loading = false;
       this.renderList();
       this.renderStats();
+      
+      // Si hay un producto pendiente de selección (deep-link), seleccionarlo
+      if (this._pendingProductId) {
+        const product = this.items.find(p => p.woo_product_id === this._pendingProductId);
+        if (product) {
+          this.selectedItems = [product];
+          this.renderList();
+          this.renderDetail();
+        }
+        this._pendingProductId = null;
+      }
     } catch (e) {
       console.error("Error loading products:", e);
       this.items = [];
@@ -270,6 +294,8 @@ class ProductsCrud extends HTMLElement {
   handleItemClick(e, item, index) {
     console.log("[products-crud] handleItemClick", { shift: e.shiftKey, ctrl: e.ctrlKey, index, item: item?.name });
     
+    let updateUrl = false;
+    
     if (e.shiftKey && this.lastClickedIndex >= 0) {
       // Shift+Click: seleccionar rango
       const start = Math.min(this.lastClickedIndex, index);
@@ -292,6 +318,7 @@ class ProductsCrud extends HTMLElement {
     } else {
       // Click normal: selección única
       this.selectedItems = [item];
+      updateUrl = true;
     }
     
     console.log("[products-crud] after click, selectedItems:", this.selectedItems.length, this.selectedItems.map(s => s.name));
@@ -309,6 +336,27 @@ class ProductsCrud extends HTMLElement {
     // Scroll detail panel to top
     const detail = this.shadowRoot.getElementById("detail");
     if (detail) detail.scrollTop = 0;
+    
+    // Actualizar URL solo en selección única
+    if (updateUrl && this.selectedItems.length === 1) {
+      navigateToItem("products", item.woo_product_id);
+    }
+  }
+
+  selectProductById(productId) {
+    const id = parseInt(productId);
+    if (!id) return;
+    
+    // Buscar en los items cargados
+    const product = this.items.find(p => p.woo_product_id === id);
+    if (product) {
+      this.selectedItems = [product];
+      this.renderList();
+      this.renderDetail();
+    } else {
+      // Guardar el ID pendiente para seleccionar después de cargar
+      this._pendingProductId = id;
+    }
   }
 
   escapeHtml(str) {

public/components/recommendations-crud.js

@@ -1,4 +1,6 @@
 import { api } from "../lib/api.js";
+import { on } from "../lib/bus.js";
+import { navigateToItem } from "../lib/router.js";
 
 class RecommendationsCrud extends HTMLElement {
   static get observedAttributes() {
@@ -183,10 +185,21 @@ class RecommendationsCrud extends HTMLElement {
 
     this.shadowRoot.getElementById("newBtn").onclick = () => this.showCreateForm();
 
+    // Escuchar cambios de ruta para deep-linking
+    this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
+      if (view === "crosssell" && params.id) {
+        this.selectItemById(params.id);
+      }
+    });
+
     this.load();
     this.loadProducts();
   }
 
+  disconnectedCallback() {
+    this._unsubRouter?.();
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "rule-type" && oldValue !== newValue) {
       this.filterRuleType = newValue;
@@ -223,6 +236,15 @@ class RecommendationsCrud extends HTMLElement {
       this.items = items;
       this.loading = false;
       this.renderList();
+      
+      // Si hay un item pendiente de selección (deep-link), seleccionarlo
+      if (this._pendingItemId) {
+        const item = this.items.find(i => i.id === this._pendingItemId);
+        if (item) {
+          this.selectItem(item, { updateUrl: false });
+        }
+        this._pendingItemId = null;
+      }
     } catch (e) {
       console.error("Error loading recommendations:", e);
       this.items = [];
@@ -302,7 +324,7 @@ class RecommendationsCrud extends HTMLElement {
     }
   }
 
-  async selectItem(item) {
+  async selectItem(item, { updateUrl = true } = {}) {
     // Cargar detalles incluyendo items
     try {
       const detail = await api.getRecommendation(item.id);
@@ -320,6 +342,25 @@ class RecommendationsCrud extends HTMLElement {
     
     this.renderList();
     this.renderForm();
+    
+    // Actualizar URL
+    if (updateUrl && this.selected) {
+      navigateToItem("crosssell", this.selected.id);
+    }
+  }
+
+  selectItemById(ruleId) {
+    const id = parseInt(ruleId);
+    if (!id) return;
+    
+    // Buscar en los items cargados
+    const item = this.items.find(i => i.id === id);
+    if (item) {
+      this.selectItem(item, { updateUrl: false });
+    } else {
+      // Guardar el ID pendiente para seleccionar después de cargar
+      this._pendingItemId = id;
+    }
   }
 
   showCreateForm() {

public/components/users-crud.js

@@ -1,5 +1,6 @@
 import { api } from "../lib/api.js";
-import { emit } from "../lib/bus.js";
+import { emit, on } from "../lib/bus.js";
+import { navigateToItem } from "../lib/router.js";
 
 class UsersCrud extends HTMLElement {
   constructor() {
@@ -108,9 +109,20 @@ class UsersCrud extends HTMLElement {
       this.updateStatStyles();
     };
 
+    // Escuchar cambios de ruta para deep-linking
+    this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
+      if (view === "users" && params.id) {
+        this.selectUserById(params.id);
+      }
+    });
+
     this.load();
   }
 
+  disconnectedCallback() {
+    this._unsubRouter?.();
+  }
+
   updateStatStyles() {
     const statTotal = this.shadowRoot.getElementById("statTotal");
     const statWoo = this.shadowRoot.getElementById("statWoo");
@@ -128,6 +140,15 @@ class UsersCrud extends HTMLElement {
       this.loading = false;
       this.renderList();
       this.renderStats();
+      
+      // Si hay un usuario pendiente de selección (deep-link), seleccionarlo
+      if (this._pendingUserId) {
+        const user = this.items.find(u => u.chat_id === this._pendingUserId);
+        if (user) {
+          this.selectUser(user, { updateUrl: false });
+        }
+        this._pendingUserId = null;
+      }
     } catch (e) {
       console.error("Error loading users:", e);
       this.items = [];
@@ -178,15 +199,40 @@ class UsersCrud extends HTMLElement {
       `;
 
       el.onclick = () => {
-        this.selected = item;
+        this.selectUser(item);
-        this.renderList();
-        this.renderDetail();
       };
 
       list.appendChild(el);
     }
   }
 
+  selectUser(user, { updateUrl = true } = {}) {
+    this.selected = user;
+    this.renderList();
+    this.renderDetail();
+    
+    // Actualizar URL (usar chat_id codificado)
+    if (updateUrl && user) {
+      navigateToItem("users", user.chat_id);
+    }
+  }
+
+  selectUserById(chatId) {
+    if (!chatId) return;
+    
+    // Decodificar el chat_id de la URL
+    const decodedId = decodeURIComponent(chatId);
+    
+    // Buscar en los items cargados
+    const user = this.items.find(u => u.chat_id === decodedId);
+    if (user) {
+      this.selectUser(user, { updateUrl: false });
+    } else {
+      // Guardar el ID pendiente para seleccionar después de cargar
+      this._pendingUserId = decodedId;
+    }
+  }
+
   renderDetail() {
     const detail = this.shadowRoot.getElementById("detail");
     const title = this.shadowRoot.getElementById("detailTitle");

public/lib/router.js

@@ -0,0 +1,120 @@
+import { emit } from "./bus.js";
+
+// Mapeo de rutas a vistas
+const ROUTES = [
+  { pattern: /^\/$/, view: "chat", params: [] },
+  { pattern: /^\/chat$/, view: "chat", params: [] },
+  { pattern: /^\/conversaciones$/, view: "conversations", params: [] },
+  { pattern: /^\/usuarios$/, view: "users", params: [] },
+  { pattern: /^\/usuarios\/([^/]+)$/, view: "users", params: ["id"] },
+  { pattern: /^\/productos$/, view: "products", params: [] },
+  { pattern: /^\/productos\/([^/]+)$/, view: "products", params: ["id"] },
+  { pattern: /^\/equivalencias$/, view: "aliases", params: [] },
+  { pattern: /^\/crosssell$/, view: "crosssell", params: [] },
+  { pattern: /^\/crosssell\/([^/]+)$/, view: "crosssell", params: ["id"] },
+  { pattern: /^\/cantidades$/, view: "quantities", params: [] },
+  { pattern: /^\/pedidos$/, view: "orders", params: [] },
+  { pattern: /^\/pedidos\/([^/]+)$/, view: "orders", params: ["id"] },
+  { pattern: /^\/test$/, view: "test", params: [] },
+];
+
+// Mapeo de vistas a rutas base (para navegación sin parámetros)
+const VIEW_TO_PATH = {
+  chat: "/chat",
+  conversations: "/conversaciones",
+  users: "/usuarios",
+  products: "/productos",
+  aliases: "/equivalencias",
+  crosssell: "/crosssell",
+  quantities: "/cantidades",
+  orders: "/pedidos",
+  test: "/test",
+};
+
+/**
+ * Parsea el pathname y devuelve { view, params }
+ */
+export function parseRoute(pathname) {
+  const path = pathname || "/";
+  
+  for (const route of ROUTES) {
+    const match = path.match(route.pattern);
+    if (match) {
+      const params = {};
+      route.params.forEach((name, i) => {
+        params[name] = match[i + 1];
+      });
+      return { view: route.view, params };
+    }
+  }
+  
+  // Fallback a chat si no matchea ninguna ruta
+  return { view: "chat", params: {} };
+}
+
+/**
+ * Obtiene la ruta actual del browser
+ */
+export function getCurrentRoute() {
+  return parseRoute(window.location.pathname);
+}
+
+/**
+ * Navega a una nueva ruta sin recargar la página
+ */
+export function navigate(path, { replace = false } = {}) {
+  if (replace) {
+    history.replaceState(null, "", path);
+  } else {
+    history.pushState(null, "", path);
+  }
+  
+  const route = parseRoute(path);
+  emit("router:change", route);
+}
+
+/**
+ * Navega a una vista (sin parámetros)
+ */
+export function navigateToView(view) {
+  const path = VIEW_TO_PATH[view] || "/";
+  navigate(path);
+}
+
+/**
+ * Navega a una vista con un ID específico
+ */
+export function navigateToItem(view, id) {
+  const basePath = VIEW_TO_PATH[view];
+  if (!basePath) return;
+  
+  const path = id ? `${basePath}/${encodeURIComponent(id)}` : basePath;
+  navigate(path);
+}
+
+/**
+ * Inicializa el router - debe llamarse después de que los componentes estén listos
+ */
+export function initRouter() {
+  // Escuchar popstate (botón atrás/adelante del browser)
+  window.addEventListener("popstate", () => {
+    const route = getCurrentRoute();
+    emit("router:change", route);
+  });
+  
+  // Emitir la ruta inicial
+  const route = getCurrentRoute();
+  emit("router:change", route);
+  
+  return route;
+}
+
+export const router = {
+  parseRoute,
+  getCurrentRoute,
+  navigate,
+  navigateToView,
+  navigateToItem,
+  initRouter,
+  VIEW_TO_PATH,
+};

src/app.js

@@ -31,6 +31,28 @@ export function createApp({ tenantId }) {
     res.sendFile(path.join(publicDir, "index.html"));
   });
 
+  // SPA catch-all - sirve index.html para todas las rutas del frontend
+  const spaRoutes = [
+    '/chat', '/conversaciones', '/usuarios', '/productos',
+    '/equivalencias', '/crosssell', '/cantidades', '/pedidos', '/test'
+  ];
+  app.get(spaRoutes, (req, res) => {
+    res.sendFile(path.join(publicDir, "index.html"));
+  });
+  // Rutas con parámetros
+  app.get('/usuarios/:id', (req, res) => {
+    res.sendFile(path.join(publicDir, "index.html"));
+  });
+  app.get('/productos/:id', (req, res) => {
+    res.sendFile(path.join(publicDir, "index.html"));
+  });
+  app.get('/crosssell/:id', (req, res) => {
+    res.sendFile(path.join(publicDir, "index.html"));
+  });
+  app.get('/pedidos/:id', (req, res) => {
+    res.sendFile(path.join(publicDir, "index.html"));
+  });
+
   return app;
 }