Upload 214 files

.gitattributes

@@ -149,3 +149,7 @@ backend/uploads/demo-room.jpg filter=lfs diff=lfs merge=lfs -text
 backend/uploads/proyecto-White-Houses_edit_d4a831c5_edit_c5a95477.jpg filter=lfs diff=lfs merge=lfs -text
 backend/uploads/demo-room_edit_3755debd_edit_cdb044f5_edit_cc649bbc.jpg filter=lfs diff=lfs merge=lfs -text
 backend/uploads/demo-room_edit_3755debd_edit_cdb044f5.jpg filter=lfs diff=lfs merge=lfs -text
+backend/texturas/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_claro.png filter=lfs diff=lfs merge=lfs -text
+backend/texturas/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_gris.png filter=lfs diff=lfs merge=lfs -text
+backend/texturas/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_oscuro.png filter=lfs diff=lfs merge=lfs -text
+backend/texturas/Texture_WPC_EXTERIOR_INTERIOR/WPC_negro.png filter=lfs diff=lfs merge=lfs -text

backend/.env

@@ -5,3 +5,4 @@ GRADIO_SPACE_URL=https://eduardo4547-hyper-reality-sam2-gpu.hf.space
 GRADIO_CPU_FALLBACK_URL=https://eduardo4547-hyper-reality-sam2-cpu.hf.space
 # Para desarrollo local:
 # GRADIO_SPACE_URL=http://localhost:7860
+# https://eduardo4547-hyper-reality-sam2-gpu.hf.space

backend/main.py

@@ -1,4 +1,5 @@
 import mimetypes
+import os
 import subprocess
 import threading
 import time
@@ -12,7 +13,8 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 
 from core.config import GRADIO_SPACE_URL, logger
-from routers import auth, catalog, media, pages, segmentation, share
+from routers import auth, catalog, media, pages, segmentation, sessions, share
+from routers.catalog import seed_catalog
 from services.sam2_service import lifespan
 
 mimetypes.add_type("application/javascript", ".js", strict=True)
@@ -27,7 +29,7 @@ app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
     allow_credentials=True,
-    allow_methods=["GET", "POST", "OPTIONS"],
+    allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
     allow_headers=["*"],
 )
 
@@ -47,6 +49,7 @@ app.include_router(auth.router)
 app.include_router(share.router)
 app.include_router(media.router)
 app.include_router(catalog.router)
+app.include_router(sessions.router)
 app.include_router(segmentation.router)
 
 # Static files
@@ -105,6 +108,15 @@ def watch_frontend_changes(interval: float = 2.0) -> None:
             last_state = current_state
 
 
+@app.on_event("startup")
+async def startup_seed_catalog():
+    if MONGODB_URI := os.getenv("MONGODB_URI", ""):
+        try:
+            await seed_catalog()
+        except Exception as exc:
+            logger.warning("[STARTUP] seed_catalog falló: %s", exc)
+
+
 @app.on_event("startup")
 async def startup_watch_frontend():
     thread = threading.Thread(target=watch_frontend_changes, daemon=True)

backend/routers/catalog.py

@@ -1,150 +1,221 @@
+import os
+from datetime import datetime
+
 from fastapi import APIRouter
 from fastapi.responses import JSONResponse
+from motor.motor_asyncio import AsyncIOMotorClient
+from pydantic import BaseModel
 
 router = APIRouter(prefix="/api/catalog")
 
-_CATALOG = [
+MONGODB_URI = os.getenv("MONGODB_URI", "")
+_client: AsyncIOMotorClient | None = None
+_db = None
+_col = None
+
+
+def _get_col():
+    global _client, _db, _col
+    if _col is None:
+        if not MONGODB_URI:
+            raise RuntimeError("MONGODB_URI no configurado")
+        _client = AsyncIOMotorClient(MONGODB_URI)
+        _db = _client["hyper_reality"]
+        _col = _db["catalog"]
+    return _col
+
+
+# ── Datos iniciales (se insertan solo si la colección está vacía) ─────────────
+_SEED = [
     {
-        "id": "acm",
+        "_id": "acm",
         "nombre": "ACM (Aluminio Compuesto)",
+        "tipo": "paredes",
         "descripcion": "Paneles de aluminio compuesto para fachadas y exteriores",
         "especificaciones": [
             "Espesor de ACM 4mm.",
             "Medida 1.22m x 2.44m",
-            "Fácil Mantenimiento.",
+            "Facil Mantenimiento.",
             "Espesor de Aluminio 0.40mm.",
             "Se puede doblar o biselar",
         ],
         "url_detalle": "https://heyzine.com/flip-book/447fe3eb8e.html#page/16",
         "productos": [
-            {
-                "id": "acm_white",
-                "nombre": "Glossy White",
-                "textura": "Texture_ACM/ACM_White.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_White.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_amarillo",
-                "nombre": "Amarillo",
-                "textura": "Texture_ACM/ACM_Amarillo.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Amarillo.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_orange",
-                "nombre": "Glossy Orange",
-                "textura": "Texture_ACM/ACM_Orange.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Orange.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_red",
-                "nombre": "Glossy Red",
-                "textura": "Texture_ACM/ACM_Glossy_Red.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Glossy_Red.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_light_blue",
-                "nombre": "Light Blue",
-                "textura": "Texture_ACM/ACM_Light_Blue.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Light_Blue.png",
-                "dimensiones": ["1.22x2.44"],
-            },
-            {
-                "id": "acm_azul",
-                "nombre": "Azul",
-                "textura": "Texture_ACM/ACM_Azul.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Azul.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_verde_hn",
-                "nombre": "Verde HN",
-                "textura": "Texture_ACM/ACM_Verde_HN.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde_HN.png",
-                "dimensiones": ["1.22x2.44"],
-            },
-            {
-                "id": "acm_verde_lima",
-                "nombre": "Verde Lima",
-                "textura": "Texture_ACM/ACM_Verde_Lima.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde_Lima.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_verde",
-                "nombre": "Verde",
-                "textura": "Texture_ACM/ACM_Verde.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_madera_clara",
-                "nombre": "Madera Clara",
-                "textura": "Texture_ACM/ACM_Madera_Clara.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Madera_Clara.png",
-                "dimensiones": ["1.22x2.44"],
-            },
-            {
-                "id": "acm_roble",
-                "nombre": "Roble (Oak)",
-                "textura": "Texture_ACM/ACM_ROBLE(OAK).png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_ROBLE(OAK).png",
-                "dimensiones": ["1.22x2.44"],
-            },
-            {
-                "id": "acm_grafito",
-                "nombre": "Grafito",
-                "textura": "Texture_ACM/ACM_Grafito.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Grafito.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_metalic",
-                "nombre": "Silver Metallic",
-                "textura": "Texture_ACM/ACM_Metalic.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Metalic.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_mouse_grey",
-                "nombre": "Mouse Grey",
-                "textura": "Texture_ACM/ACM_MouseGrey.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_MouseGrey.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_matte_black",
-                "nombre": "Matte Black",
-                "textura": "Texture_ACM/ACM_Matteblack.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Matteblack.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
-            {
-                "id": "acm_glossy_black",
-                "nombre": "Glossy Black",
-                "textura": "Texture_ACM/ACM_Glossy_Black.png",
-                "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Glossy_Black.png",
-                "dimensiones": ["1.22x2.44", "1.50x4.98"],
-            },
+            {"id": "acm_white",       "nombre": "Glossy White",     "textura": "Texture_ACM/ACM_White.png",          "url_preview": "/seg/texture-preview/Texture_ACM/ACM_White.png",          "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_amarillo",    "nombre": "Amarillo",          "textura": "Texture_ACM/ACM_Amarillo.png",       "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Amarillo.png",       "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_orange",      "nombre": "Glossy Orange",     "textura": "Texture_ACM/ACM_Orange.png",         "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Orange.png",         "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_red",         "nombre": "Glossy Red",        "textura": "Texture_ACM/ACM_Glossy_Red.png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Glossy_Red.png",    "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_light_blue",  "nombre": "Light Blue",        "textura": "Texture_ACM/ACM_Light_Blue.png",     "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Light_Blue.png",     "dimensiones": ["1.22x2.44"]},
+            {"id": "acm_azul",        "nombre": "Azul",              "textura": "Texture_ACM/ACM_Azul.png",           "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Azul.png",           "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_verde_hn",    "nombre": "Verde HN",          "textura": "Texture_ACM/ACM_Verde_HN.png",       "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde_HN.png",       "dimensiones": ["1.22x2.44"]},
+            {"id": "acm_verde_lima",  "nombre": "Verde Lima",        "textura": "Texture_ACM/ACM_Verde_Lima.png",     "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde_Lima.png",     "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_verde",       "nombre": "Verde",             "textura": "Texture_ACM/ACM_Verde.png",          "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde.png",          "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_madera_clara","nombre": "Madera Clara",      "textura": "Texture_ACM/ACM_Madera_Clara.png",   "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Madera_Clara.png",   "dimensiones": ["1.22x2.44"]},
+            {"id": "acm_roble",       "nombre": "Roble (Oak)",       "textura": "Texture_ACM/ACM_ROBLE(OAK).png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_ROBLE(OAK).png",    "dimensiones": ["1.22x2.44"]},
+            {"id": "acm_grafito",     "nombre": "Grafito",           "textura": "Texture_ACM/ACM_Grafito.png",        "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Grafito.png",        "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_metalic",     "nombre": "Silver Metallic",   "textura": "Texture_ACM/ACM_Metalic.png",        "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Metalic.png",        "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_mouse_grey",  "nombre": "Mouse Grey",        "textura": "Texture_ACM/ACM_MouseGrey.png",      "url_preview": "/seg/texture-preview/Texture_ACM/ACM_MouseGrey.png",      "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_matte_black", "nombre": "Matte Black",       "textura": "Texture_ACM/ACM_Matteblack.png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Matteblack.png",    "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_glossy_black","nombre": "Glossy Black",      "textura": "Texture_ACM/ACM_Glossy_Black.png",  "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Glossy_Black.png",  "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+        ],
+        "created_at": "2026-04-20T00:00:00Z",
+    },
+    {
+        "_id": "wpc",
+        "nombre": "WPC (Exterior e Interior)",
+        "tipo": "paredes",
+        "descripcion": "Los paneles de WPC se utilizan como revestimiento decorativo para paredes. No se deforma, no requiere mantenimiento constante y tiene mayor durabilidad. Crea mayor estetica e instalacion rapida.",
+        "especificaciones": [
+            "Revestimiento decorativo para paredes.",
+            "No se deforma ni requiere mantenimiento constante.",
+            "Mayor durabilidad y estetica.",
+            "Instalacion rapida.",
+            "Ideal para: sala principal (pared protagonista), comedor, interior de oficina, pasillo o entradas.",
+        ],
+        "url_detalle": "https://heyzine.com/flip-book/447fe3eb8e.html#page/39",
+        "productos": [
+            {"id": "WPC_madera_oscuro", "nombre": "WPC Madera Oscuro", "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_oscuro.png", "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_oscuro.png", "dimensiones": ["2.90x0.25"]},
+            {"id": "WPC_madera_claro",  "nombre": "WPC Madera Claro",  "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_claro.png",  "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_claro.png",  "dimensiones": ["2.90x0.25"]},
+            {"id": "WPC_madera_gris",   "nombre": "WPC Madera Gris",   "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_gris.png",   "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_gris.png",   "dimensiones": ["2.90x0.25"]},
+            {"id": "WPC_negro",         "nombre": "WPC Negro",          "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_negro.png",          "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_negro.png",          "dimensiones": ["2.90x0.25"]},
         ],
+        "created_at": "2026-05-07T00:00:00Z",
     },
 ]
 
 
+async def seed_catalog() -> None:
+    col = _get_col()
+    count = await col.count_documents({})
+    if count == 0:
+        await col.insert_many(_SEED)
+        return
+
+    # Migrar documentos existentes: añadir campos que falten según _SEED
+    for seed_item in _SEED:
+        doc = await col.find_one({"_id": seed_item["_id"]})
+        if not doc:
+            continue
+        patch = {k: v for k, v in seed_item.items() if k not in doc and k != "_id"}
+        if patch:
+            await col.update_one({"_id": seed_item["_id"]}, {"$set": patch})
+
+
+def _serialize(doc: dict) -> dict:
+    out = dict(doc)
+    out["id"] = str(out.pop("_id"))
+    return out
+
+
+def _seed_as_response() -> list[dict]:
+    return [{**{k: v for k, v in item.items() if k != "_id"}, "id": item["_id"]} for item in _SEED]
+
+
+# ── Endpoints de lectura ──────────────────────────────────────────────────────
+
 @router.get("/textures")
 async def get_texture_catalog() -> JSONResponse:
-    return JSONResponse(content={"categories": _CATALOG})
+    try:
+        col = _get_col()
+        docs = await col.find({}).to_list(length=200)
+        if docs:
+            return JSONResponse(content={"categories": [_serialize(d) for d in docs]})
+    except Exception:
+        pass
+    # Fallback a datos estáticos si MongoDB no está disponible o la colección está vacía
+    return JSONResponse(content={"categories": _seed_as_response()})
 
 
 @router.get("/textures/{category_id}")
 async def get_texture_category(category_id: str) -> JSONResponse:
-    category = next((c for c in _CATALOG if c["id"] == category_id), None)
-    if category is None:
-        return JSONResponse(
-            content={"detail": f"Categoría '{category_id}' no encontrada"},
-            status_code=404,
-        )
-    return JSONResponse(content=category)
+    try:
+        col = _get_col()
+        doc = await col.find_one({"_id": category_id})
+        if doc:
+            return JSONResponse(content=_serialize(doc))
+    except Exception:
+        pass
+    fallback = next((item for item in _SEED if item["_id"] == category_id), None)
+    if fallback:
+        return JSONResponse(content=_seed_as_response()[_SEED.index(fallback)])
+    return JSONResponse(content={"detail": f"Categoria '{category_id}' no encontrada"}, status_code=404)
+
+
+# ── Modelos ───────────────────────────────────────────────────────────────────
+
+class ProductoItem(BaseModel):
+    id: str
+    nombre: str
+    textura: str
+    url_preview: str
+    dimensiones: list[str] = []
+
+
+class CategoriaBody(BaseModel):
+    id: str
+    nombre: str
+    tipo: str = "paredes"
+    descripcion: str = ""
+    especificaciones: list[str] = []
+    url_detalle: str = ""
+    productos: list[ProductoItem] = []
+
+
+# ── Endpoints de escritura ──────────────────────────────────────────────���─────
+
+@router.post("/category")
+async def add_category(body: CategoriaBody) -> JSONResponse:
+    col = _get_col()
+    existing = await col.find_one({"_id": body.id})
+    if existing:
+        return JSONResponse(content={"error": f"Categoria '{body.id}' ya existe"}, status_code=409)
+    doc = body.model_dump()
+    doc["_id"] = doc.pop("id")
+    doc["created_at"] = datetime.utcnow().isoformat() + "Z"
+    await col.insert_one(doc)
+    return JSONResponse(content={"ok": True, "id": body.id}, status_code=201)
+
+
+@router.put("/category/{category_id}")
+async def update_category(category_id: str, body: CategoriaBody) -> JSONResponse:
+    col = _get_col()
+    doc = body.model_dump()
+    doc.pop("id", None)
+    doc["updated_at"] = datetime.utcnow().isoformat() + "Z"
+    result = await col.update_one({"_id": category_id}, {"$set": doc})
+    if result.matched_count == 0:
+        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
+    return JSONResponse(content={"ok": True})
+
+
+@router.delete("/category/{category_id}")
+async def delete_category(category_id: str) -> JSONResponse:
+    col = _get_col()
+    result = await col.delete_one({"_id": category_id})
+    if result.deleted_count == 0:
+        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
+    return JSONResponse(content={"ok": True, "deleted": category_id})
+
+
+@router.post("/category/{category_id}/product")
+async def add_product(category_id: str, product: ProductoItem) -> JSONResponse:
+    col = _get_col()
+    result = await col.update_one(
+        {"_id": category_id, "productos.id": {"$ne": product.id}},
+        {"$push": {"productos": product.model_dump()}, "$set": {"updated_at": datetime.utcnow().isoformat() + "Z"}},
+    )
+    if result.matched_count == 0:
+        return JSONResponse(content={"error": "Categoria no encontrada o producto duplicado"}, status_code=409)
+    return JSONResponse(content={"ok": True}, status_code=201)
+
+
+@router.delete("/category/{category_id}/product/{product_id}")
+async def delete_product(category_id: str, product_id: str) -> JSONResponse:
+    col = _get_col()
+    result = await col.update_one(
+        {"_id": category_id},
+        {"$pull": {"productos": {"id": product_id}}, "$set": {"updated_at": datetime.utcnow().isoformat() + "Z"}},
+    )
+    if result.matched_count == 0:
+        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
+    return JSONResponse(content={"ok": True})

backend/routers/sessions.py

@@ -0,0 +1,93 @@
+import os
+from datetime import datetime, timedelta
+
+from fastapi import APIRouter
+from fastapi.responses import JSONResponse
+from motor.motor_asyncio import AsyncIOMotorClient
+from pydantic import BaseModel
+
+router = APIRouter(prefix="/api/sessions")
+
+MONGODB_URI = os.getenv("MONGODB_URI", "")
+_client: AsyncIOMotorClient | None = None
+_db = None
+_col = None
+
+MAX_ITEMS = 10
+ITEM_TTL_DAYS = 30
+
+
+def _get_col():
+    global _client, _db, _col
+    if _col is None:
+        if not MONGODB_URI:
+            raise RuntimeError("MONGODB_URI no configurado")
+        _client = AsyncIOMotorClient(MONGODB_URI)
+        _db = _client["hyper_reality"]
+        _col = _db["sessions"]
+    return _col
+
+
+class SessionItem(BaseModel):
+    filename: str
+    previewUrl: str
+    maskCount: int
+    uploadedAt: int  # ms timestamp
+
+
+@router.get("/{user_id}")
+async def get_sessions(user_id: str):
+    try:
+        col = _get_col()
+        doc = await col.find_one({"_id": user_id})
+        if not doc:
+            return JSONResponse(content={"items": []})
+
+        cutoff_ms = int((datetime.utcnow() - timedelta(days=ITEM_TTL_DAYS)).timestamp() * 1000)
+        items = [i for i in doc.get("items", []) if i.get("uploadedAt", 0) > cutoff_ms]
+
+        return JSONResponse(content={"items": items})
+    except Exception as exc:
+        return JSONResponse(content={"items": [], "error": str(exc)})
+
+
+@router.delete("/{user_id}/{filename:path}")
+async def delete_session_item(user_id: str, filename: str):
+    try:
+        col = _get_col()
+        result = await col.update_one(
+            {"_id": user_id},
+            {"$pull": {"items": {"filename": filename}}},
+        )
+        if result.matched_count == 0:
+            return JSONResponse(content={"ok": False, "error": "Usuario no encontrado"}, status_code=404)
+        return JSONResponse(content={"ok": True})
+    except Exception as exc:
+        return JSONResponse(content={"ok": False, "error": str(exc)}, status_code=500)
+
+
+@router.post("/{user_id}")
+async def save_session(user_id: str, item: SessionItem):
+    try:
+        col = _get_col()
+
+        doc = await col.find_one({"_id": user_id}) or {"_id": user_id, "items": []}
+
+        cutoff_ms = int((datetime.utcnow() - timedelta(days=ITEM_TTL_DAYS)).timestamp() * 1000)
+        items = [
+            i for i in doc.get("items", [])
+            if i.get("filename") != item.filename and i.get("uploadedAt", 0) > cutoff_ms
+        ]
+
+        items = [item.model_dump()] + items
+        items = items[:MAX_ITEMS]
+
+        await col.replace_one(
+            {"_id": user_id},
+            {"_id": user_id, "items": items, "updated_at": datetime.utcnow().isoformat() + "Z"},
+            upsert=True,
+        )
+
+        return JSONResponse(content={"ok": True, "count": len(items)})
+    except Exception as exc:
+        return JSONResponse(content={"ok": False, "error": str(exc)}, status_code=500)

backend/services/texture_service.py

@@ -302,7 +302,7 @@ def _tile_texture_perspective(
 
 def classify_texture_material(texture_name: str) -> str:
     texture_key = texture_name.lower()
-    if "acm" in texture_key:
+    if "acm" in texture_key or "wpc" in texture_key:
         return "acm"
     if any(hint in texture_key for hint in ("deck", "wood", "plank", "laminate", "floor")):
         return "wood"

frontend/src/features/roomSetup/RoomSetup.tsx

@@ -6,16 +6,38 @@ import {
   Camera as CameraIcon,
   UploadCloud,
   Users,
+  ArrowRight,
 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 import { categorias, habitaciones } from "../../data/roomSetupData";
 import { FilterButton, RoomCard } from "./RoomSetupComponents";
 import { useRoomSetup } from "./roomSetupHooks";
 import useAppStore from "../../store/useAppStore";
+import { useHistoryStore, type HistoryItem } from "../../store/useAppStore";
 import { useActiveSessions } from "../../hooks/useActiveSessions";
+import { API_BASE } from "../../api/client";
+import { useLoadSessionHistory, deleteSessionFromBackend } from "../../hooks/useSessionSync";
+import { useCallback } from "react";
 
 export default function RoomSetup() {
+  useLoadSessionHistory();
   const [categoriaActiva, setCategoriaActiva] = useState("todos");
+  const navigate = useNavigate();
   const segmentProgress = useAppStore((s) => s.segmentProgress);
+  const segmentFilename = useAppStore((s) => s.segmentFilename);
+  const storedPreviewImage = useAppStore((s) => s.previewImage);
+  const sessionHistory = useHistoryStore((s) => s.sessionHistory);
+  const removeFromHistory = useHistoryStore((s) => s.removeFromHistory);
+  const userId = useHistoryStore((s) => s.userId);
+
+  const handleDeleteSession = useCallback(
+    (e: React.MouseEvent, filename: string) => {
+      e.stopPropagation();
+      removeFromHistory(filename);
+      deleteSessionFromBackend(userId, filename);
+    },
+    [removeFromHistory, userId],
+  );
   const { count: activeSessions } = useActiveSessions();
   const {
     isDragging,
@@ -62,7 +84,8 @@ export default function RoomSetup() {
               <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
               <Users className="w-4 h-4 text-[#0047AB]" />
               <span className="text-sm font-medium text-[#0047AB]">
-                {activeSessions} usuario{activeSessions !== 1 ? "s" : ""} activo{activeSessions !== 1 ? "s" : ""}
+                {activeSessions} usuario{activeSessions !== 1 ? "s" : ""} activo
+                {activeSessions !== 1 ? "s" : ""}
               </span>
             </div>
           </div>
@@ -87,14 +110,38 @@ export default function RoomSetup() {
               </li>
             </ul>
 
-            <div className="w-full">
+            <div className="w-full flex flex-col gap-3">
               <button
                 onClick={triggerFileInput}
                 className="w-full bg-[#333333] hover:bg-black text-white font-bold text-base sm:text-lg py-3 sm:py-4 px-6 rounded-xl flex items-center justify-center gap-3 transition-colors shadow-sm"
               >
-                <CameraIcon className="w-5 h-5 sm:w-6 sm:h-6" strokeWidth={2.5} />
+                <CameraIcon
+                  className="w-5 h-5 sm:w-6 sm:h-6"
+                  strokeWidth={2.5}
+                />
                 Sube tu foto
               </button>
+
+              {segmentFilename && !isUploading && (
+                <button
+                  onClick={() =>
+                    navigate("/visualizer", {
+                      state: {
+                        previewImage:
+                          storedPreviewImage ??
+                          `${API_BASE}/seg/image/${segmentFilename}`,
+                      },
+                    })
+                  }
+                  className="w-full bg-[#0047AB] hover:bg-[#003a94] text-white font-bold text-base sm:text-lg py-3 sm:py-4 px-6 rounded-xl flex items-center justify-center gap-3 transition-colors shadow-sm"
+                >
+                  Continuar al visualizador
+                  <ArrowRight
+                    className="w-5 h-5 sm:w-6 sm:h-6"
+                    strokeWidth={2.5}
+                  />
+                </button>
+              )}
             </div>
             {uploadMessage && (
               <p className="text-sm text-[#707070] mt-3">{uploadMessage}</p>
@@ -164,6 +211,78 @@ export default function RoomSetup() {
           </div>
         </section>
 
+        {/* SECCIÓN HISTORIAL DE SESIÓN */}
+        {sessionHistory.length > 0 && (
+          <section className="mb-10 sm:mb-14">
+            <h2 className="text-xl sm:text-2xl font-bold text-[#333333] mb-4 sm:mb-6">
+              Tus espacios recientes
+            </h2>
+            <div
+              className="flex gap-4 overflow-x-auto pb-2"
+              style={{ scrollbarWidth: "thin" }}
+            >
+              {sessionHistory.map((item: HistoryItem) => (
+                <button
+                  key={item.filename}
+                  onClick={() =>
+                    navigate("/visualizer", {
+                      state: {
+                        previewImage: item.previewUrl,
+                        filename: item.filename,
+                        maskCount: item.maskCount,
+                      },
+                    })
+                  }
+                  className={`flex-shrink-0 group relative rounded-2xl overflow-hidden border-2 transition-all duration-200 ${
+                    segmentFilename === item.filename
+                      ? "border-[#0047AB] shadow-lg shadow-[#0047AB]/20"
+                      : "border-[#dbe7ff] hover:border-[#0047AB]"
+                  }`}
+                  style={{ width: 160, height: 120 }}
+                >
+                  <img
+                    src={item.previewUrl}
+                    alt="Habitación previa"
+                    className="w-full h-full object-cover"
+                  />
+                  {/* Overlay con hora */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent flex flex-col justify-end p-2">
+                    <p className="text-white/80 text-[10px]">
+                      {new Date(item.uploadedAt).toLocaleDateString([], {
+                        day: "2-digit",
+                        month: "short",
+                      })}{" "}
+                      {new Date(item.uploadedAt).toLocaleTimeString([], {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                    </p>
+                  </div>
+                  {/* Badge "activa" o botón eliminar */}
+                  {segmentFilename === item.filename ? (
+                    <div className="absolute top-2 right-2 bg-[#0047AB] text-white text-[9px] font-bold px-1.5 py-0.5 rounded-full">
+                      Activa
+                    </div>
+                  ) : (
+                    <button
+                      onClick={(e) => handleDeleteSession(e, item.filename)}
+                      className="absolute top-2 right-2 w-5 h-5 rounded-full bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  )}
+                  {/* Hover: continuar */}
+                  <div className="absolute inset-0 bg-[#0047AB]/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                    <span className="text-white text-xs font-bold flex items-center gap-1">
+                      Continuar <ArrowRight className="w-3.5 h-3.5" />
+                    </span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </section>
+        )}
+
         {/* SECCIÓN INFERIOR: Habitaciones de demostración */}
         <section>
           <h2 className="text-xl sm:text-2xl font-bold text-[#0047AB] mb-4 sm:mb-6">

frontend/src/features/roomSetup/roomSetupHooks.ts

@@ -8,8 +8,10 @@ import {
 } from "react";
 import { useNavigate } from "react-router-dom";
 import useAppStore from "../../store/useAppStore";
+import { useHistoryStore } from "../../store/useAppStore";
 import { useSegmentUpload } from "../../hooks/useSegmentUpload";
 import { API_BASE } from "../../api/client";
+import { saveSessionToBackend } from "../../hooks/useSessionSync";
 
 export function useRoomSetup(): {
   isDragging: boolean;
@@ -35,6 +37,8 @@ export function useRoomSetup(): {
   const setUploadMessage = useAppStore((state) => state.setUploadMessage);
   const setSegmentResult = useAppStore((state) => state.setSegmentResult);
   const setSegmentProgress = useAppStore((state) => state.setSegmentProgress);
+  const addToHistory = useHistoryStore((state) => state.addToHistory);
+  const userId = useHistoryStore((state) => state.userId);
 
   const { uploadAndSegment, isUploading } = useSegmentUpload();
 
@@ -67,6 +71,15 @@ export function useRoomSetup(): {
         const serverImageUrl = `${API_BASE}/seg/image/${filename}`;
         setPreviewImage(serverImageUrl);
 
+        const historyItem = {
+          filename,
+          previewUrl: serverImageUrl,
+          maskCount,
+          uploadedAt: Date.now(),
+        };
+        addToHistory(historyItem);
+        saveSessionToBackend(userId, historyItem);
+
         navigate("/visualizer", {
           state: { previewImage: serverImageUrl },
         });
@@ -83,6 +96,8 @@ export function useRoomSetup(): {
       setSegmentResult,
       setSegmentProgress,
       uploadAndSegment,
+      addToHistory,
+      userId,
     ],
   );
 

frontend/src/features/roomVisualizer/RoomPreviewPanel.tsx

@@ -124,12 +124,31 @@ export function RoomPreviewPanel({
           >
             <Download className="h-4 w-4 text-[#0047AB]" /> Descargar
           </button>
-          <button className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2">
+          <a
+            href="https://nauffargermany.com/gt/sucursales-2/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
+          >
             <MapPin className="h-4 w-4 text-[#0047AB]" /> Encuentra tu tienda
-          </button>
-          <button className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2">
-            <ShoppingCart className="h-4 w-4 text-[#0047AB]" /> Ir a la página del producto
-          </button>
+          </a>
+          {selectedProduct?.detailUrl ? (
+            <a
+              href={selectedProduct.detailUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
+            >
+              <ShoppingCart className="h-4 w-4 text-[#0047AB]" /> Ir a la página del producto
+            </a>
+          ) : (
+            <button
+              disabled
+              className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-gray-300 flex items-center gap-2 cursor-default"
+            >
+              <ShoppingCart className="h-4 w-4 text-gray-300" /> Ir a la página del producto
+            </button>
+          )}
         </div>
 
         {/* ── Área de imagen + canvas ──────────────────────────────── */}

frontend/src/features/roomVisualizer/RoomVisualizer.tsx

@@ -5,6 +5,7 @@ import {
   useState,
   type PointerEvent,
 } from "react";
+import { ChevronDown } from "lucide-react";
 import { createRoot } from "react-dom/client";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
@@ -33,6 +34,8 @@ import { API_BASE } from "../../api/client";
 
 type RoomVisualizerState = {
   previewImage?: string;
+  filename?: string;
+  maskCount?: number;
 };
 
 // ── Hook para detectar mobile (< 1024px) ─────────────────────────────────────
@@ -56,6 +59,21 @@ export default function RoomVisualizer() {
   const segmentFilename = useAppStore((store) => store.segmentFilename);
   const accumulatedFilename = useAppStore((store) => store.accumulatedFilename);
   const setAccumulatedFilename = useAppStore((store) => store.setAccumulatedFilename);
+  const setSegmentResult = useAppStore((store) => store.setSegmentResult);
+  const setPreviewImage = useAppStore((store) => store.setPreviewImage);
+
+  // Restaurar segmentFilename y previewImage cuando se abre una sesión del historial
+  useEffect(() => {
+    if (state?.filename && state.filename !== segmentFilename) {
+      setSegmentResult(state.filename, state.maskCount ?? 0);
+      setAccumulatedFilename(null); // limpiar ediciones de sesión anterior
+    }
+    if (state?.previewImage) {
+      setPreviewImage(state.previewImage);
+    }
+  // Solo al montar — state no cambia tras la navegación
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const [currentPreviewImage, setCurrentPreviewImage] = useState<string | null>(() => {
     if (accumulatedFilename) return `${API_BASE}/seg/image/${accumulatedFilename}`;
@@ -68,7 +86,35 @@ export default function RoomVisualizer() {
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const { products, loading, error } = useCatalogProducts();
+  const { products, categories, loading, error } = useCatalogProducts();
+
+  // null = sin interacción (primera categoría abierta por defecto)
+  // Set vacío = usuario cerró todo deliberadamente
+  const [openCategoryIds, setOpenCategoryIds] = useState<Set<string> | null>(null);
+
+  const isCategoryOpen = useCallback(
+    (id: string) => {
+      if (openCategoryIds === null) {
+        return categories.length > 0 && id === categories[0].id;
+      }
+      return openCategoryIds.has(id);
+    },
+    [openCategoryIds, categories],
+  );
+
+  const toggleCategory = useCallback((id: string) => {
+    setOpenCategoryIds((prev) => {
+      const base =
+        prev === null
+          ? categories.length > 0
+            ? new Set([categories[0].id])
+            : new Set<string>()
+          : new Set(prev);
+      if (base.has(id)) base.delete(id);
+      else base.add(id);
+      return base;
+    });
+  }, [categories]);
 
   const {
     viewMode, showGrid, showList,
@@ -298,7 +344,7 @@ export default function RoomVisualizer() {
     hoveredMask,
     segmentMeta,
     isApplying,
-    onBack: () => navigate(-1),
+    onBack: () => navigate("/app"),
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
     onPointerUp: handlePointerUp,
@@ -474,28 +520,73 @@ export default function RoomVisualizer() {
         )}
       </div>
 
-      {/* Lista de productos */}
-      <div className={`w-full max-w-2xl flex-1 ${viewMode === "grid" ? "px-4" : "px-2"} py-2 overflow-y-auto`}>
+      {/* Lista de productos con acordeón por categoría */}
+      <div className="flex-1 overflow-y-auto py-2">
         {loading ? (
           <div className="flex items-center justify-center h-32 text-sm text-gray-400">Cargando productos...</div>
         ) : error ? (
           <div className="flex items-center justify-center h-32 text-sm text-red-400">{error}</div>
-        ) : viewMode === "grid" ? (
-          <div className="flex flex-col gap-6">
-            {chunkArray(filteredProducts, 3).map((group, index) => (
-              <ProductGroupCard key={index} group={group} openProductId={openProductId} onSelectProduct={handleProductSelect} />
-            ))}
+        ) : searchQuery ? (
+          /* Búsqueda activa → lista plana de resultados */
+          <div className={viewMode === "grid" ? "px-4" : "px-2"}>
+            {filteredProducts.length === 0 ? (
+              <div className="flex items-center justify-center h-24 text-sm text-gray-400">Sin resultados</div>
+            ) : viewMode === "grid" ? (
+              <div className="flex flex-col gap-4">
+                {chunkArray(filteredProducts, 3).map((group, i) => (
+                  <ProductGroupCard key={i} group={group} openProductId={openProductId} onSelectProduct={handleProductSelect} />
+                ))}
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 gap-3">
+                {filteredProducts.map((product) => (
+                  <IndividualProductCard key={product.id} product={product} isSelected={openProductId === product.id} onToggle={() => handleProductSelect(product.id)} />
+                ))}
+              </div>
+            )}
           </div>
         ) : (
-          <div className="grid grid-cols-1 gap-4">
-            {filteredProducts.map((product) => (
-              <IndividualProductCard
-                key={product.id}
-                product={product}
-                isSelected={openProductId === product.id}
-                onToggle={() => handleProductSelect(product.id)}
-              />
-            ))}
+          /* Sin búsqueda → acordeón por categoría */
+          <div className="flex flex-col">
+            {categories.map((cat) => {
+              const isOpen = isCategoryOpen(cat.id);
+              return (
+                <div key={cat.id} className="border-b border-gray-100 last:border-0">
+                  <button
+                    onClick={() => toggleCategory(cat.id)}
+                    className="w-full flex items-center justify-between px-4 py-3 hover:bg-[#f4f8ff] transition-colors text-left"
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      <span className="font-semibold text-sm text-[#333] truncate">{cat.nombre}</span>
+                      <span className="text-xs text-[#0047AB] bg-[#eaf1ff] px-1.5 py-0.5 rounded-full flex-shrink-0">
+                        {cat.products.length}
+                      </span>
+                    </div>
+                    <ChevronDown
+                      className={`w-4 h-4 text-[#0047AB] flex-shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
+                    />
+                  </button>
+
+                  {isOpen && (
+                    <div className={viewMode === "grid" ? "px-4 pb-4" : "px-2 pb-2"}>
+                      {viewMode === "grid" ? (
+                        <div className="flex flex-col gap-4">
+                          {chunkArray(cat.products, 3).map((group, i) => (
+                            <ProductGroupCard key={i} group={group} openProductId={openProductId} onSelectProduct={handleProductSelect} />
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="grid grid-cols-1 gap-3">
+                          {cat.products.map((product) => (
+                            <IndividualProductCard key={product.id} product={product} isSelected={openProductId === product.id} onToggle={() => handleProductSelect(product.id)} />
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
           </div>
         )}
       </div>

frontend/src/features/roomVisualizer/useCatalogProducts.ts

@@ -3,14 +3,6 @@ import type { Product } from "../../types";
 
 const API_BASE = import.meta.env.VITE_API_URL ?? "";
 
-const CATEGORY_TYPE: Record<string, "suelos" | "paredes"> = {
-  acm: "paredes",
-  pisos: "suelos",
-  piedra_concreto: "suelos",
-  metales: "paredes",
-  madera: "suelos",
-};
-
 interface CatalogProduct {
   id: string;
   nombre: string;
@@ -22,6 +14,7 @@ interface CatalogProduct {
 interface CatalogCategory {
   id: string;
   nombre: string;
+  tipo?: string;
   descripcion: string;
   especificaciones?: string[];
   url_detalle?: string;
@@ -42,13 +35,23 @@ function mapToProduct(item: CatalogProduct, category: CatalogCategory): Product
     image: `${API_BASE}${item.url_preview}`,
     description: category.especificaciones,
     detailUrl: category.url_detalle,
-    tipo: CATEGORY_TYPE[category.id],
+    tipo: (category.tipo as "suelos" | "paredes") ?? undefined,
     categoria: category.id,
   };
 }
 
+export interface ProductCategory {
+  id: string;
+  nombre: string;
+  tipo?: string;
+  descripcion: string;
+  especificaciones?: string[];
+  products: Product[];
+}
+
 export function useCatalogProducts() {
   const [products, setProducts] = useState<Product[]>([]);
+  const [categories, setCategories] = useState<ProductCategory[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -61,12 +64,19 @@ export function useCatalogProducts() {
         if (!res.ok) throw new Error(`Error ${res.status}`);
         const data: CatalogResponse = await res.json();
 
-        const flat = data.categories
-          .flatMap((category) =>
-            category.productos.map((item) => mapToProduct(item, category))
-          );
+        const cats: ProductCategory[] = data.categories.map((category) => ({
+          id: category.id,
+          nombre: category.nombre,
+          tipo: category.tipo,
+          descripcion: category.descripcion,
+          especificaciones: category.especificaciones,
+          products: category.productos.map((item) => mapToProduct(item, category)),
+        }));
+
+        const flat = cats.flatMap((c) => c.products);
 
         if (!cancelled) {
+          setCategories(cats);
           setProducts(flat);
           setError(null);
         }
@@ -83,5 +93,5 @@ export function useCatalogProducts() {
     return () => { cancelled = true; };
   }, []);
 
-  return { products, loading, error };
+  return { products, categories, loading, error };
 }

frontend/src/hooks/useSessionSync.ts

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { useHistoryStore, type HistoryItem } from "../store/useAppStore";
+import { API_BASE } from "../api/client";
+
+export async function saveSessionToBackend(
+  userId: string,
+  item: HistoryItem,
+): Promise<void> {
+  try {
+    await fetch(`${API_BASE}/api/sessions/${userId}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(item),
+    });
+  } catch {
+    // fallback silencioso — localStorage es la fuente de verdad local
+  }
+}
+
+export async function deleteSessionFromBackend(
+  userId: string,
+  filename: string,
+): Promise<void> {
+  try {
+    await fetch(
+      `${API_BASE}/api/sessions/${userId}/${encodeURIComponent(filename)}`,
+      { method: "DELETE" },
+    );
+  } catch {
+    // fallback silencioso
+  }
+}
+
+export function useLoadSessionHistory(): void {
+  const userId = useHistoryStore((s) => s.userId);
+  const localHistory = useHistoryStore((s) => s.sessionHistory);
+  const setSessionHistory = useHistoryStore((s) => s.setSessionHistory);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch(`${API_BASE}/api/sessions/${userId}`);
+        if (!res.ok) return;
+        const data = await res.json();
+        const remote: HistoryItem[] = data.items ?? [];
+        if (remote.length === 0) return;
+
+        // Merge remoto + local: dedupe por filename, más reciente gana
+        const merged = [...remote, ...localHistory];
+        const seen = new Set<string>();
+        const deduped = merged.filter((item) => {
+          if (seen.has(item.filename)) return false;
+          seen.add(item.filename);
+          return true;
+        });
+        deduped.sort((a, b) => b.uploadedAt - a.uploadedAt);
+        setSessionHistory(deduped.slice(0, 10));
+      } catch {
+        // red no disponible — se mantiene historial local
+      }
+    }
+    load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId]);
+}

frontend/src/store/useAppStore.ts

@@ -3,6 +3,63 @@ import { persist, createJSONStorage } from "zustand/middleware";
 
 type ViewMode = "grid" | "list";
 
+export type HistoryItem = {
+  filename: string;
+  previewUrl: string;
+  maskCount: number;
+  uploadedAt: number;
+};
+
+// ── userId persistente en localStorage ───────────────────────────────────────
+function getOrCreateUserId(): string {
+  const key = "hr-user-id";
+  let id = localStorage.getItem(key);
+  if (!id) {
+    id = typeof crypto !== "undefined" && crypto.randomUUID
+      ? crypto.randomUUID()
+      : `u-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    localStorage.setItem(key, id);
+  }
+  return id;
+}
+
+// ── Store de historial (localStorage — persiste entre sesiones) ───────────────
+type HistoryStore = {
+  userId: string;
+  sessionHistory: HistoryItem[];
+  addToHistory: (item: HistoryItem) => void;
+  setSessionHistory: (items: HistoryItem[]) => void;
+  removeFromHistory: (filename: string) => void;
+};
+
+export const useHistoryStore = create<HistoryStore>()(
+  persist(
+    (set) => ({
+      userId: getOrCreateUserId(),
+      sessionHistory: [],
+      addToHistory: (item) =>
+        set((state) => {
+          const withoutDupe = state.sessionHistory.filter(
+            (h) => h.filename !== item.filename,
+          );
+          const cutoff = Date.now() - 30 * 24 * 60 * 60 * 1000;
+          const fresh = withoutDupe.filter((h) => h.uploadedAt > cutoff);
+          return { sessionHistory: [item, ...fresh].slice(0, 10) };
+        }),
+      setSessionHistory: (items) => set({ sessionHistory: items }),
+      removeFromHistory: (filename) =>
+        set((state) => ({
+          sessionHistory: state.sessionHistory.filter((h) => h.filename !== filename),
+        })),
+    }),
+    {
+      name: "hr-history",
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
+
+// ── Store de sesión activa (sessionStorage — se limpia al cerrar el tab) ──────
 type AppStore = {
   previewImage: string | null;
   uploadMessage: string | null;
@@ -56,7 +113,6 @@ const useAppStore = create<AppStore>()(
     {
       name: "hr-session",
       storage: createJSONStorage(() => sessionStorage),
-      // Only persist the fields needed to restore the editing session
       partialize: (state) => ({
         previewImage: state.previewImage,
         segmentFilename: state.segmentFilename,

frontend/src/version.ts

@@ -1 +1 @@
-export const appVersion = "0.1.0-dev.20260507T033905";
+export const appVersion = "0.1.0-dev.20260507T183851";