🖥️ Desktop: Guía Completa y Arquitectura de la Aplicación de Escritorio

Bienvenido a la guía maestra de Context Code Desktop (apps/desktop), la interfaz gráfica nativa ultra-premium desarrollada con Tauri, React y TypeScript. Esta aplicación proporciona un entorno de desarrollo visual interactivo de última generación para orquestar agentes, gestionar bases de datos, programar automatizaciones y controlar tus repositorios locales en tiempo real.

NOTE

Esta interfaz ha sido diseñada para complementar y potenciar la experiencia de la CLI, ofreciendo visualizaciones de flujo de ejecución (timeline), análisis de costos de tokens, terminales embebidas y consolas de bases de datos avanzadas.

🗺️ Mapa de Características Principales

mermaid

graph TD
    A[Context Code Desktop UI] --> B(Espacio de Trabajo / Workspaces)
    A --> C(Timeline Agéntico & Aprobación)
    A --> D(Consola SQL Multi-Motor)
    A --> E(Terminales Embebidas & Git)
    A --> F(Catálogo de Skills & MCP)
    A --> G(Bridges: WhatsApp/Telegram)
    A --> H(Automatización & Cron)

1. 📂 Gestión de Workspaces y Chats Persistentes

La aplicación de escritorio se estructura bajo un esquema jerárquico de Proyectos (Workspaces) y Sesiones de Conversación (Chats), persistidos localmente en una base de datos SQLite administrada por Tauri.

Workspaces: Representan directorios físicos en tu máquina local. Al seleccionar un directorio, la aplicación inicializa un contexto seguro de análisis.
Chats Contextuales: Dentro de cada Workspace puedes mantener múltiples chats separados (por ejemplo: refactor-login, fix-ci-tests, update-database).
Configuración Individual por Chat: A través del panel ChatConfigEditor.tsx, cada chat puede personalizar:
- El proveedor de LLM y el modelo (Anthropic, OpenAI, DeepSeek, etc.).
- La temperatura de muestreo y límites máximos de tokens.
- Los permisos de seguridad detallados para permitir ejecución de comandos o modificaciones de archivos de manera autónoma.

2. ⏳ Timeline Agéntico y Panel de Aprobaciones

El flujo central de la interacción con los agentes se visualiza mediante una Línea de Tiempo (Timeline) interactiva e incremental, construida para brindar máxima transparencia sobre el comportamiento autónomo del sistema.

+-----------------------------------------------------------+
| [Usuario] -> "Crea una API en el puerto 3000..."         |
+-----------------------------------------------------------+
                             |
                             v
+-----------------------------------------------------------+
| [Plan de Agente] -> 1. Crear archivo index.js             |
|                  -> 2. Instalar Express                   |
|                  -> 3. Probar puerto                      |
| [PlanPanel: Esperando Aprobación de Usuario]              |
+-----------------------------------------------------------+
                             |  (Usuario hace clic en "Ejecutar")
                             v
+-----------------------------------------------------------+
| [Ejecución] -> Tool 'write_file' ejecutada con éxito      |
|             -> Tool 'run_command' (npm install)           |
+-----------------------------------------------------------+

TimelineView (TimelineView.tsx): Renderiza en tiempo real las herramientas invocadas por los agentes, mostrando bloques de código formateados, llamadas a APIs, salidas de consola y logs de errores estructurados.
PlanPanel (PlanPanel.tsx): Cuando el agente opera en modo de planificación (planMode), genera un borrador del plan con pasos secuenciales. La UI bloquea la ejecución hasta que el usuario revisa, edita los pasos y da clic en Aprobar/Ejecutar.
Visualización de Playwright (PlaywrightArtifactsPanel.tsx): Si el agente utiliza herramientas de automatización de navegador (como tomar capturas de pantalla de la UI en desarrollo), las imágenes capturadas se renderizan en vivo en un carril inferior interactivo para inspección inmediata.

3. 🛢️ Consola SQL Multi-Motor (Estilo SSMS)

Una de las herramientas más potentes integradas en la versión Desktop es la Consola SQL (SqlConsoleView.tsx). Ofrece un entorno completo de administración de base de datos directamente embebido en el IDE:

Motores Compatibles: PostgreSQL, SQLite, MySQL, Oracle, SQL Server y bases de datos integradas por MCP.
Características Clave:
- Editor Monaco Completo: Con resaltado de sintaxis SQL y autocompletado inteligente de palabras clave.
- Gestión de Pestañas Persistente: Las pestañas de consultas abiertas y la pestaña seleccionada se guardan en el localStorage para evitar pérdidas al reiniciar.
- Menú Contextual Premium en Español: Menú alternativo con clic derecho para realizar acciones rápidas de formato, comentario y ejecución.
- Árbol de Esquemas Dinámico: Visualizador de la base de datos agrupada por esquemas, tablas, vistas y columnas.
- Script de Arranque Inteligente: Si es la primera vez que se abre la consola y no hay pestañas previas, se genera un script comentado explicando la sintaxis de uso, sin inyectar código SQL ejecutable por defecto.

4. 🐚 Terminales Embebidas y Control de Git

La aplicación no requiere que salgas de ella para verificar ejecuciones en la consola de comandos de tu sistema operativo:

Terminal Split Host (TerminalSplitHost.tsx / TerminalPanelV2.tsx):
- Proporciona pestañas de terminales de comandos locales.
- Soporta división de pantalla (split vertical/horizontal).
- Menú de perfiles de terminales de comandos (PowerShell, Bash, CMD).
- Redimensionamiento dinámico fluido mediante arrastre de cursor.
Git Panel (GitPanel.tsx):
- Integra herramientas visuales para revisar el estado del repositorio (git status).
- Muestra diferencias de código interactivas en pantalla dividida (CodeCompareView.tsx).
- Gestión visual de ramas (crear, cambiar y fusionar ramas locales).

5. 🧩 Catálogo de Skills y Servidores MCP

Context Code extiende sus capacidades mediante el ecosistema de Skills (habilidades de desarrollo y TDD) y servidores MCP (Model Context Protocol):

Skills Gallery (SkillsGallery.tsx): Una tienda/galería visual interna donde puedes inspeccionar, habilitar y configurar habilidades preinstaladas en el sistema (por ejemplo, auditorías de accesibilidad web, análisis clínicos/científicos de genómica, visualizadores PyMOL o desarrollo TDD).
Mcp Panel (SkillsMcpPanel.tsx): Administrador de servidores MCP. Permite:
- Conectar nuevos servidores externos mediante configuraciones JSON.
- Ver el estado de salud de cada servidor MCP en vivo.
- Visualizar y probar las herramientas y recursos que cada servidor expone a los agentes de IA.

6. 📱 Bridges de Control Remoto (WhatsApp y Telegram)

El componente BridgesPanel.tsx proporciona una interfaz elegante para configurar y controlar los canales de comunicación externos del agente:

Bridge de WhatsApp: Muestra el código QR generado en caliente por el backend para vincular el agente a tu cuenta de WhatsApp usando Web WhatsApp. Ofrece botones para iniciar/detener el puente y visualizar logs de sincronización.
Bridge de Telegram: Configura el token del bot de Telegram obtenido a través de @BotFather, con controles visuales de estado y logs en vivo de interacciones.

7. ⏰ Automatizaciones y Tareas Programadas (Scheduler)

El planificador visual (AutomationView.tsx) te permite configurar tareas autónomas recurrentes o temporizadores únicos para los agentes de desarrollo:

One-Shot Timers: Programa tareas con retrasos específicos en minutos/segundos.
Cron Jobs Recurrentes: Define disparadores periódicos mediante expresiones cron estándar (por ejemplo: */30 * * * * para correr análisis de tests cada 30 minutos).
Gestión Visual: Permite ver la lista de tareas en ejecución, logs de salida históricos de las automatizaciones y botones para matar procesos colgados de forma segura.

8. 📊 Dashboard de Consumo de Tokens

El sistema realiza un seguimiento exhaustivo y en tiempo real del consumo de tokens y costes del LLM:

TokenUsagePanel (TokenUsagePanel.tsx):
- Tarjetas de consumo para el Proyecto Actual y Global de la App (tokens hoy, semana y mes).
- Gráfico de barras interactivo que muestra la progresión de los últimos 7 días de desarrollo.
- Lista de los Workspaces más activos con su respectiva última fecha de uso y cantidad de chats iniciados.

🎨 Ajustes Estéticos y Temas Premium

Context Code Desktop viene preconfigurado con una variedad de temas oscuros y claros premium que cuidan tu fatiga visual durante largas horas de codificación:

Temas Integrados: Dracula (Acentos rosas/morados), Nord (Azul glaciar), Solarized (Cálido y bajo contraste), Midnight (Oscuro profundo), Forest (Verde bosque relajante), High Contrast (Negros puros para accesibilidad), Dark y Light estándares.
Diseño Altamente Responsivo: La aplicación escala automáticamente todos sus paneles (sidebar, terminal y dock de herramientas) para que la interfaz conviva cómodamente tanto en monitores de alta resolución como en pantallas de portátiles compactas de 14" (resoluciones como 1366px o inferiores), disminuyendo el ancho de los paneles flotantes a 180px y compactando fuentes y paddings de forma dinámica.

🚀 ¡Comienza a explorar! Configura tu primer Workspace en la barra lateral izquierda y permite que el Squad de Agentes de Context Code potencie tu productividad de desarrollo a niveles nunca antes vistos.

🖥️ Desktop: Guía Completa y Arquitectura de la Aplicación de Escritorio ​

🗺️ Mapa de Características Principales ​

1. 📂 Gestión de Workspaces y Chats Persistentes ​

2. ⏳ Timeline Agéntico y Panel de Aprobaciones ​

3. 🛢️ Consola SQL Multi-Motor (Estilo SSMS) ​

4. 🐚 Terminales Embebidas y Control de Git ​

5. 🧩 Catálogo de Skills y Servidores MCP ​

6. 📱 Bridges de Control Remoto (WhatsApp y Telegram) ​

7. ⏰ Automatizaciones y Tareas Programadas (Scheduler) ​

8. 📊 Dashboard de Consumo de Tokens ​

🎨 Ajustes Estéticos y Temas Premium ​