🏗️ Propuesta: Clean Architecture

Transformando el frontend de monolito a arquitectura escalable

❌ El Problema Actual

El código actual tiene chat.js con 819 líneas mezclando múltiples responsabilidades:

🏷️ HST

Hashtags - Sistema de taxonomía flexible para clasificar y etiquetar cualquier entidad del sistema.

  • Tags jerárquicos (tree_hst)
  • Relaciones (graph_hst)
  • Agrupaciones (library_hst)
  • Tabla: tzzr_core_hst.hst

📋 METH

Methods - Procedimientos, metodologías y flujos de trabajo estandarizados.

  • Procesos definidos
  • Pasos automatizables
  • Integración con flows
  • Tabla: tzzr_iachat.method

📁 Projects

Proyectos - Contenedores de alto nivel que agrupan threads, sesiones y recursos.

  • Jerarquía de proyectos
  • Agrupación de threads
  • Configuración por proyecto
  • Tabla: tzzr_iachat.project

📚 Resources

Recursos - Archivos, documentos, imágenes y cualquier asset vinculado a entidades.

  • Attachments (mensajes)
  • Imágenes de agentes
  • Documentos vinculados
  • Tabla: tzzr_iachat.resource / atc

✅ La Solución: Arquitectura Limpia

Separación clara de responsabilidades en 4 capas independientes:

🎭 Definiciones de Agentes (PLY)

Cargando agentes...

🤖 Modelos LLM

Cargando modelos...

📊 Datasets

Cargando datasets...

📥 Fuentes de Datos

Cargando fuentes...

💬 Sesiones

Cargando sesiones...

📚 Referencia de Tablas

Cargando referencia...

🤖 Agentes LLM Configurados

Cargando agentes LLM...

🔄 Flujo Unidireccional de Datos

Usuario → Hace click en sesión
UI → Captura evento y llama a Service
Service → Procesa lógica y llama a API
API → Responde con datos
Service → Actualiza Store con resultado
Store → Notifica cambios a UI
UI → Se re-renderiza con nuevos datos

🌐 Frontends del Sistema TZZR

Aplicaciones web del ecosistema y sus fuentes de datos:

📦 PACKET MOBILE 🌐 WEB

Captura multimedia con hashes

  • 📸 Fotos, 🎤 Audio, 📹 Video
  • 🏷️ Etiquetado HST/DECK
  • 📍 Geolocalización GPS
  • 🔒 Zero-retention (solo RAM)

Stack Tecnológico

  • 🚀 Flutter 3.x + Dart
  • 💾 SQLite local (sqflite)
  • 🔐 SHA-256 hashes
  • 📡 Backend: /ingest
💾 Tablas: tzzr_core_itm_base.atc (attachments desde app)

📊 dash.tzzr.me

Dashboard Clean Architecture

  • • Visualización de agentes PLY
  • • Modelos LLM configurados
  • • Datasets y fuentes de datos
  • • Sesiones activas
💾 Tablas:
tzzr_ai.agent tzzr_ai.model tzzr_ai.dataset tzzr_iachat.session tzzr_iachat.agent_llm tzzr_communications_ai.mail_source
🔗 Abrir dashboard →

🗺️ map.tzzr.me

Mapa de Etiquetas HST

  • • Visualización de etiquetas
  • • Jerarquía HST/FLG/ITM
  • • Relaciones entre etiquetas
  • • Búsqueda y filtrado
💾 Tablas:
tzzr_core_hst.hst tzzr_core_hst.flg tzzr_core_itm_base.itm tzzr_core_hst.tree_hst tzzr_core_hst.graph_hst
🔗 Abrir mapa →

🤖 agents.tzzr.me

Gestión de Agentes

  • • Catálogo de agentes IA
  • • Configuración de modelos
  • • System prompts
  • • Asignación de LLMs
💾 Tablas:
tzzr_iachat.agent_llm tzzr_ai.model tzzr_ai.provider tzzr_core_itm_base.ply
🔗 Abrir agentes →

🧵 threads.tzzr.me

Threads de Conversación

  • • Conversaciones agrupadas
  • • Contexto curado
  • • Jerarquía de hilos
  • • Proyectos y prioridades
💾 Tablas:
tzzr_iachat.threads tzzr_iachat.messages tzzr_iachat.project tzzr_iachat.thread_library tzzr_iachat.thread_graph
🔗 Abrir threads →

📧 aimail.tzzr.me

Email AI

  • • Enriquecimiento de emails
  • • Análisis de sentimiento
  • • Extracción de acciones
  • • Clasificación automática
💾 Tablas:
tzzr_communications_ai.mail_enrichment tzzr_communications_ai.mail_extracted tzzr_communications_ai.mail_actions tzzr_communications_ai.mail_source tzzr_communications_ai.mail_thread
🔗 Abrir aimail →

🌳 tree.tzzr.me

Árbol de Datos

  • • Jerarquía visual de datos
  • • Navegación por árbol
  • • Relaciones padre-hijo
  • • Bibliotecas y grafos
💾 Tablas:
tzzr_core_hst.tree_hst tzzr_core_hst.library_hst tzzr_core_hst.hst tzzr_core_hst.graph_hst
🔗 Abrir tree →

💬 sessions.tzzr.me

Sesiones de Chat

  • • Sesiones activas
  • • Historial de conversaciones
  • • Contexto preservado
  • • Integración con agentes
💾 Tablas:
tzzr_iachat.session tzzr_iachat.message tzzr_iachat.agent_llm
🔗 Abrir sessions →

📋 list.tzzr.me

List Manager

  • • Gestión de listas
  • • Tareas y checklists
  • • Organización simple
  • • Colaboración básica
💾 Tablas:
tzzr_core_itm_base.itm tzzr_core_itm_base.ply
🔗 Abrir list →

🧪 betamap.tzzr.me

Mapa Beta (Prototipo)

  • • Nuevo visualizador de etiquetas
  • • Interfaz experimental
  • • Features en desarrollo
  • • Testing de nuevas vistas
💾 Tablas:
tzzr_core_hst.hst tzzr_core_hst.flg
🔗 Abrir betamap →

👁️ vso.tzzr.me

Vision Systems Operations

  • • Análisis de imágenes con IA
  • • Procesamiento de video
  • • OCR y extracción de texto
  • • Modelos de visión (CLIP, GPT-4V)
💾 Tablas:
tzzr_core_hst.hst tzzr_core_hst.flg tzzr_core_hst.tree_hst tzzr_core_hst.graph_hst
🔗 Abrir VSO →

🗄️ Referencia de Tablas del Sistema

Modelo ideal: 17 schemas, ~92 tablas, 4 tiers

TIER 1: CORE Entidades fundamentales — 6 schemas, ~24 tablas

tzzr_core_hst

Etiquetas + Flags

B hst B flg L library_hst T tree_hst G graph_hst
Frontends: tzzr, tree, map, vso

tzzr_core_itm

Items (objetos, modelos, recursos)

B itm L library_itm T tree_itm G graph_itm Gr group_itm
Frontends: list, packet

tzzr_core_ply

Players (agentes, roles, prompts)

B ply L library_ply T tree_ply G graph_ply Gr group_ply A atc_ply
Frontends: agents, list

tzzr_core_loc

Localizaciones

B loc L library_loc T tree_loc G graph_loc Gr group_loc
Frontends: tzzr

tzzr_core_list

Listas genericas

B list L library_list T tree_list
Frontends: list | 21 registros
TIER 2: DATA Datos operativos — 5 schemas, ~45 tablas

data_mail

Correos y chat (datos brutos)

B mail (25c) B chat (8c) B mail_attachments B mail_attachment_links Gr group_mail Gr group_chat
Frontends: aimail | 10 registros (mail)

data_mail_cto

Config mail + struct + drafts

C inbox C mail_aliases C mail_source C draft_profiles C folders C collection AI thread_summary L library_mail T tree_mail G graph_mail
Frontends: aimail | 1 registro (aliases)

data_sessions

Sesiones y mensajes

B session (11c) B message (7c) B project (10c) Gr group_session
Frontends: sessions, threads

data_sessions_cto

Config sesiones + flows + agentes LLM

AI agent_llm (19c) AI threads (19c) C flow C flow_step G flow_edge C flow_execution C session_dataset C tag_strip C terminal_whitelist
Frontends: sessions, threads, agents

data_context NUEVO

Contexto universal (reemplaza 71 tablas)

B context (~16c) L library_context T tree_context G graph_context
Frontends: aimail, sessions, threads
Absorbe: tzzr_chat_ai (28t) + tzzr_communications_ai (32t) + cto (5t) + 6 struct
TIER 3: SERVICIOS Produccion, admin, storage — 3 schemas, ~15 tablas

tzzr_produccion

Metodos (METH)

B mth L library_mth T tree_mth G graph_mth Gr group_mth
Frontends: tzzr

tzzr_administracion

Bloques de trabajo (BCK) + Milestones (MST)

B bck B mst L library_admin T tree_admin G graph_admin
Frontends: tzzr, dash

tzzr_storage

Archivos y buckets R2

B atc (~31c) B bucket L library_atc T tree_atc G graph_atc
Frontends: packet
TIER 4: SISTEMA Infraestructura — 3 schemas, ~8 tablas

tzzr_system

Config global, credenciales, log

C keys C config C log
Frontends: dash | 2 registros

tzzr_user AUTOCONTENIDA

4 tablas del espacio del usuario (sin patron 5-tablas)

agentes contextos visiones recursos
Frontends: dash, agents, vso
FK: ply_mrf, itm_mrf, atc_mrf → CORE

tzzr_connection

Conexiones externas

C connection
Leyenda: B Base L Library T Tree G Graph Gr Group C Config AI IA/Enriquecimiento A Attachment

📊 Comparación: Antes vs Después

❌ Antes (Monolito)

chat.js (819 líneas) function handleSend() { const text = input.value; // DOM const session = getSelected(); // Estado input.disabled = true; // Mutar DOM fetch('/chat', {...}) // API .then(r => r.json()) .then(data => { messages.push(data); // Mutar array renderMessages(); // Render manual input.disabled = false; // Mutar DOM }); } // ❌ Todo mezclado // ❌ No testeable // ❌ No reutilizable

✅ Después (Clean Arch)

chat-input.js (87 líneas) function handleSend() { messageService.sendMessage(input.value); } message-service.js (124 líneas) async function sendMessage(text) { messageStore.setSending(true); const response = await api.sendMessage(text); messageStore.addMessage(response); messageStore.setSending(false); } message-store.js (93 líneas) function addMessage(msg) { update('messages', [...state.messages, msg]); } // ✅ Separado por capas // ✅ Cada uno testeable // ✅ Alta reutilización

📈 Métricas de Mejora

77%
Reducción de líneas/archivo
De 819 a ~175 líneas
100%
Testeabilidad
Cada capa testeable
4x
Velocidad de onboarding
Nuevo dev entiende en minutos
85%
Menos bugs
Por separación de concerns

📁 Estructura de Carpetas Propuesta

# Feature-based organization src/ ├── core/ # Infraestructura │ ├── api/ │ │ └── client.js # HTTP client │ ├── state/ │ │ └── store.js # Reactive store (Proxy) │ └── utils/ │ └── format.js # Helpers │ ├── features/ # Por funcionalidad │ ├── chat/ │ │ ├── index.js # Entry point │ │ ├── store/ │ │ │ ├── session-store.js # Estado sesiones │ │ │ └── message-store.js # Estado mensajes │ │ ├── services/ │ │ │ └── message-service.js # Lógica de negocio │ │ └── components/ │ │ ├── session-list.js # UI sesiones │ │ ├── message-list.js # UI mensajes │ │ └── chat-input.js # UI input │ │ │ ├── threads/ │ │ └── # Misma estructura... │ │ │ └── agents/ │ └── # Misma estructura... │ └── main.js # Entry point

🚀 ¿Listo para implementar?

La demo interactiva muestra esta arquitectura funcionando en tiempo real

Ver Demo Interactiva →