opencode-mask-j0k3r-dev-rgl 2.0.23 → 3.0.0

package/README.md

@@ -0,0 +1,79 @@
+# Arch Mask para OpenCode AI 🚀
+
+Esta es una **máscara TUI (Terminal User Interface)** personalizada para [OpenCode AI](https://opencode.ai), diseñada con una estética inspirada en Arch Linux y optimizada para desarrolladores que buscan un entorno de terminal elegante, funcional y altamente personalizable.
+
+El proyecto ha sido creado como una **base abierta**: siéntete libre de tomar el código, editarlo y adaptarlo a tus propios gustos. Todo el código fuente está **extensamente comentado en español** para resolver dudas sobre el funcionamiento de los temas, el arte ASCII y la integración con la API de OpenCode.
+
+## ✨ Características
+
+- 🎨 **Selector de Temas con Preview**: Cambia el estilo visual en tiempo real con `/mask` o `ctrl+m`.
+- 🖼️ **Arte ASCII Dinámico**: Logo de Arch Linux que se adapta a los colores de cada tema.
+- 📊 **Sidebar de Estadísticas**: Visualización reactiva de tokens, uso de contexto y costes de sesión.
+- ☁️ **Transparencia Real**: Configurado para respetar el fondo y la opacidad de tu terminal.
+- 📂 **Gestión de Plugins**: Configura automáticamente la barra lateral nativa de OpenCode.
+
+## 🛠️ Instalación
+
+Existen dos formas principales de instalar y utilizar esta máscara en tu instancia de OpenCode:
+
+### Opción 1: Instalación vía NPM (Recomendado para usuarios)
+
+Si el paquete está publicado en el registro de NPM, puedes agregarlo directamente a tu configuración global:
+
+1. Instala el plugin globalmente:
+   ```bash
+   opencode plugin nombre-del-paquete -g
+   ```
+2. OpenCode actualizará automáticamente tu archivo `~/.config/opencode/tui.json`.
+
+### Opción 2: Instalación Local (Modo Desarrollador)
+
+Si prefieres tener el código en tu PC para editarlo o probarlo localmente, sigue estos pasos:
+
+1. Clona o descarga este repositorio en una carpeta de tu preferencia.
+2. Entra en la carpeta y asegúrate de instalar las dependencias:
+   ```bash
+   npm install
+   ```
+3. Abre tu archivo de configuración de OpenCode (`~/.config/opencode/tui.json`) y apunta el plugin directamente a la ruta de tu carpeta:
+
+   ```json
+   {
+     "plugin": [
+       [
+         "/home/tu-usuario/ruta/a/opencode-mask",
+         {
+           "enabled": true,
+           "theme": "tokyo-night-dev",
+           "set_theme": true,
+           "show_sidebar": true
+         }
+       ]
+     ]
+   }
+   ```
+
+## ⌨️ Atajos y Comandos
+
+- **/mask**: Abre el selector de temas.
+- **ctrl+m**: Atajo rápido para el selector de temas (puedes cambiarlo en `tui.tsx`).
+- **onMove**: Navega por la lista de temas para ver una previsualización instantánea.
+
+## 🤝 Contribuciones y Personalización
+
+Este repositorio es una base educativa. Si quieres crear tu propio tema:
+1. Añade un nuevo archivo `.json` en la carpeta `themes/` (usa `j0k3r-dev-rgl.json` como plantilla).
+2. Regístralo en el bloque de instalación de `tui.tsx`.
+3. ¡Disfruta de tu nueva interfaz!
+
+## 📜 Créditos y Agradecimientos
+
+Este proyecto fue creado el **4 de abril de 2026** tomando como base e inspiración el excelente trabajo de **IrrealV** en su plugin:
+👉 [IrrealV/plugin-gentleman](https://github.com/IrrealV/plugin-gentleman)
+
+¡Muchas gracias por compartir tu conocimiento con la comunidad!
+
+---
+Desarrollado con ❤️ por **j0k3r**
+
+> **"El código es poesía, y el Open Source es nuestra forma de compartirla con el mundo. ¡VIVA EL OPEN SOURCE!"** 🐧✨

package/components.tsx

@@ -11,33 +11,54 @@ import {
 import type { Cfg } from "./config";
 import { getOSName, getProviders } from "./detection";
 
-// ─── Home screen: Large Arch Linux logo + legend ─────────────────────────────
+// ─── Pantalla Principal: Logo grande de Arch Linux + Leyenda ─────────────────
+/**
+ * Componente que muestra el logo de Arch Linux a gran escala en la pantalla de inicio.
+ * Utiliza un sistema de mapeo por zonas para aplicar diferentes colores del tema actual
+ * a cada parte del arte ASCII, permitiendo que el logo se adapte visualmente a cualquier tema.
+ * 
+ * @param props Contiene el tema actual de la TUI.
+ */
 export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
 	const t = props.theme;
 
+	/**
+	 * Mapea una zona de color definida en el frame ASCII a una propiedad del tema actual.
+	 * @param zone Nombre de la zona (ej. 'hotPink', 'white', 'purple').
+	 */
+	const getZoneColor = (zone: string) => {
+		if (zone === "hotPink") return t.secondary;
+		if (zone === "white") return t.primary;
+		if (zone === "purple") return t.accent;
+		if (zone === "neonBlue") return t.primary;
+		return t.primary;
+	};
+
 	return (
 		<box flexDirection="column" alignItems="center">
+			{/* Mapeo del arte ASCII línea por línea aplicando colores según su zona */}
 			{archLogoHome.map((line, i) => {
 				const zone = homeLogoZones[i];
-				const color = zoneColors[zone] || t.primary;
+				const color = getZoneColor(zone);
 				return <text fg={color}>{line}</text>;
 			})}
 
 			<text> </text>
+			{/* Leyenda personalizada estilo CLI debajor del logo */}
 			<box flexDirection="row" gap={0}>
-				<text fg="#ff2d78" bold={true}>
+				<text fg={t.secondary} bold={true}>
 					j0k3r
 				</text>
-				<text fg="#9d4edd">-</text>
-				<text fg="#00c8ff" bold={true}>
+				<text fg={t.accent}>-</text>
+				<text fg={t.primary} bold={true}>
 					dev
 				</text>
-				<text fg="#9d4edd">-</text>
-				<text fg="#4dd8ff" bold={true}>
+				<text fg={t.accent}>-</text>
+				<text fg={t.info} bold={true}>
 					rgl
 				</text>
-				<text fg="#9d4edd">@</text>
-				<text fg="#ffd166" bold={true}>
+				<text fg={t.accent}>@</text>
+				<text fg={t.warning} bold={true}>
 					latest
 				</text>
 			</box>
@@ -61,53 +82,69 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
 	);
 };
 
-// ─── Progress bar helper ──────────────────────────────────────────────────────
+// ─── Utilidad de Barra de Progreso ───────────────────────────────────────────
+/**
+ * Un componente visual que renderiza una barra de progreso estilo consola.
+ * Utiliza caracteres de bloque (█ y ░) para representar el llenado.
+ */
 const ProgressBar = (props: {
-	value: number; // 0–100
-	width?: number;
-	fillColor: string;
-	emptyColor: string;
+	value: number;        // Porcentaje (0-100)
+	width?: number;       // Ancho total de la barra en caracteres
+	fillColor: string;    // Color de la parte llena
+	emptyColor: string;   // Color de la parte vacía
 	theme: TuiThemeCurrent;
 }) => {
-	const width = props.width ?? 12;
-	const pct = Math.max(0, Math.min(100, props.value));
-	const filled = Math.round((pct / 100) * width);
-	const empty = width - filled;
-	const fill = "█".repeat(filled);
-	const trail = "░".repeat(empty);
+	const width = () => props.width ?? 12;
+	const pct = () => Math.max(0, Math.min(100, props.value));
+	
+	/**
+	 * Calcula cuántos bloques de '█' deben mostrarse.
+	 * Garantiza que si el porcentaje es > 0, al menos se vea 1 bloque.
+	 */
+	const filled = () => {
+		const f = Math.round((pct() / 100) * width());
+		return pct() > 0 && f === 0 ? 1 : f;
+	};
+	const empty = () => width() - filled();
 
 	return (
 		<box flexDirection="row" gap={0}>
 			<text fg={props.theme.textMuted}>[</text>
-			<text fg={props.fillColor}>{fill}</text>
-			<text fg={props.emptyColor}>{trail}</text>
+			<text fg={props.fillColor}>{"█".repeat(filled())}</text>
+			<text fg={props.emptyColor}>{"░".repeat(empty())}</text>
 			<text fg={props.theme.textMuted}>]</text>
 		</box>
 	);
 };
 
-// ─── Sidebar: Arch logo + stats panel ────────────────────────────────────────
+// ─── Sidebar: Logo de Arch + Panel de Estadísticas ───────────────────────────
+/**
+ * Componente principal del panel lateral.
+ * Muestra una versión mini del logo de Arch Linux, la rama de Git actual y 
+ * estadísticas detalladas de uso del contexto (tokens y costo estimado).
+ */
 export const SidebarArch = (props: {
 	theme: TuiThemeCurrent;
+	selectedTheme: string; // ID del tema activo
 	config: Cfg;
-	branch?: string;
-	getMessages?: () => any[];
-	contextLimit: number;
+	branch?: string;       // Rama git actual detectada
+	getMessages?: () => any[]; // Función para obtener el historial de mensajes
+	contextLimit: number;  // Límite de tokens del contexto
 }) => {
 	if (!props.config.show_sidebar) return null;
 
 	const t = props.theme;
 
-	// ── Context — Reactivo y con la misma lógica interna de OpenCode ──────────
+	/**
+	 * Calcula el total de tokens utilizados en el último mensaje del asistente.
+	 */
 	const getContextTokens = () => {
 		const messages = props.getMessages ? props.getMessages() : [];
-		// Buscar el último mensaje de asistente que tuvo output de tokens
 		const last = [...messages]
 			.reverse()
 			.find((m: any) => m.role === "assistant" && m.tokens?.output > 0);
 		if (!last) return 0;
 
-		// Suma total de todos los tokens del contexto de ese mensaje exacto
 		const tk = last.tokens;
 		return (
 			(tk.input ?? 0) +
@@ -118,6 +155,9 @@ export const SidebarArch = (props: {
 		);
 	};
 
+	/**
+	 * Suma el costo acumulado de todos los mensajes en la sesión actual.
+	 */
 	const getTotalCost = () => {
 		const messages = props.getMessages ? props.getMessages() : [];
 		return messages.reduce(
@@ -126,95 +166,101 @@ export const SidebarArch = (props: {
 		);
 	};
 
+	/**
+	 * Calcula el porcentaje de ocupación del contexto actual respecto al límite.
+	 */
 	const getContextPct = () => {
 		const limit = props.contextLimit || 1_000_000;
-		return Math.min(100, Math.round((getContextTokens() / limit) * 100));
+		const pct = Math.round((getContextTokens() / limit) * 100);
+		return Math.min(100, Math.max(0, pct));
 	};
 
+	/**
+	 * Calcula el porcentaje de presupuesto gastado (asume un máximo de $1 para visualización).
+	 */
 	const getCostPct = () => Math.min(100, Math.round(getTotalCost() * 100));
 
 	const fmtTokens = (n: number) =>
 		n >= 1000 ? `${(n / 1000).toFixed(1)}k` : `${n}`;
 	const fmtCost = (n: number) => `$${n.toFixed(2)}`;
 
-	// Color: verde → amarillo → rojo según el %
-	const getCtxColor = () => {
-		const pct = getContextPct();
-		return pct < 50 ? "#00e5a0" : pct < 80 ? "#ffd166" : "#ff2d78";
-	};
-
 	return (
 		<box flexDirection="column" alignItems="center">
-			{/* Mini Arch logo */}
+			{/* Mini logo de Arch adaptado al tema */}
 			{archLogoSidebar.map((line, i) => {
 				const zone = sidebarLogoZones[i];
-				const color = zoneColors[zone] || t.primary;
+				const color = zone === "hotPink" ? t.secondary : t.primary;
 				return <text fg={color}>{line}</text>;
 			})}
 
-			<text fg={t.textMuted}>j0k3r@latest</text>
+			<text fg={t.textMuted} scale={0.9}>j0k3r@latest</text>
 			<text> </text>
 
-			{/* Git branch */}
+			{/* Indicador de rama Git */}
 			{props.branch && (
 				<box flexDirection="row" gap={1}>
-					<text fg="#ffd166">⎇</text>
-					<text fg={t.text}>{props.branch}</text>
+					<text fg={t.accent}>⎇</text>
+					<text fg={t.text} bold={true}>{props.branch}</text>
 				</box>
 			)}
 
-			{/* ── Context (tokens + % used + cost) ── siempre visible */}
+			{/* ── Sección de Contexto (tokens + % usado + costo) ── */}
 			<box flexDirection="column" alignItems="center" marginTop={1}>
-				<text fg={t.textMuted} bold={true}>
-					Context
-				</text>
+				<text fg={t.textMuted} bold={true}>Contexto</text>
 
-				{/* tokens */}
-				<box flexDirection="row" gap={1}>
-					<text fg={t.text}>{fmtTokens(getContextTokens())}</text>
+				{/* Barra de Tokens - Color Primario */}
+				<box flexDirection="row" gap={1} marginTop={0.5}>
+					<text fg={t.primary} bold={true}>{fmtTokens(getContextTokens())}</text>
 					<text fg={t.textMuted}>tokens</text>
 				</box>
 				<ProgressBar
 					value={getContextPct()}
 					width={18}
-					fillColor={getCtxColor()}
-					emptyColor="#3a3a3a"
+					fillColor={t.primary}
+					emptyColor={t.borderSubtle}
 					theme={t}
 				/>
 
-				{/* % used */}
-				<box flexDirection="row" gap={1}>
-					<text fg={getCtxColor()}>{getContextPct()}%</text>
-					<text fg={t.textMuted}>used</text>
+				{/* Barra de Uso - Color Secundario */}
+				<box flexDirection="row" gap={1} marginTop={0.5}>
+					<text fg={t.secondary} bold={true}>{getContextPct()}%</text>
+					<text fg={t.textMuted}>usado</text>
 				</box>
 				<ProgressBar
 					value={getContextPct()}
 					width={18}
-					fillColor={getCtxColor()}
-					emptyColor="#3a3a3a"
+					fillColor={t.secondary}
+					emptyColor={t.borderSubtle}
 					theme={t}
 				/>
 
-				{/* $ spent */}
-				<box flexDirection="row" gap={1}>
-					<text fg="#ffd166">{fmtCost(getTotalCost())}</text>
-					<text fg={t.textMuted}>spent</text>
+				{/* Barra de Costo - Color de Advertencia (Warning) */}
+				<box flexDirection="row" gap={1} marginTop={0.5}>
+					<text fg={t.warning} bold={true}>{fmtCost(getTotalCost())}</text>
+					<text fg={t.textMuted}>gastado</text>
 				</box>
 				<ProgressBar
 					value={getCostPct()}
 					width={18}
-					fillColor="#ffd166"
-					emptyColor="#3a3a3a"
+					fillColor={t.warning}
+					emptyColor={t.borderSubtle}
 					theme={t}
 				/>
 			</box>
 
 			<text> </text>
+			<text fg={t.textMuted} dimColor={true} scale={0.8}>
+				máscara: {props.selectedTheme.toUpperCase()}
+			</text>
 		</box>
 	);
 };
 
-// ─── Environment detection line ──────────────────────────────────────────────
+// ─── Línea de detección de entorno ───────────────────────────────────────────
+/**
+ * Muestra información sobre el sistema operativo y los proveedores de IA 
+ * activos al final de la pantalla de inicio.
+ */
 export const DetectedEnv = (props: {
 	theme: TuiThemeCurrent;
 	providers: ReadonlyArray<{ id: string; name: string }> | undefined;
@@ -231,7 +277,7 @@ export const DetectedEnv = (props: {
 
 	return (
 		<box flexDirection="row" gap={1}>
-			<text fg={props.theme.textMuted}>detected:</text>
+			<text fg={props.theme.textMuted}>detectado:</text>
 			{os && <text fg={props.theme.text}>{os}</text>}
 			{os && providers && <text fg={props.theme.textMuted}>·</text>}
 			{providers && <text fg={props.theme.text}>{providers}</text>}

package/config.ts

@@ -1,30 +1,53 @@
-// ─── Configuration types and parsing helpers ──────────────────────────────────
+// ─── Tipos de configuración y funciones de ayuda para el parseo ───────────────
 
+/**
+ * Define la estructura de configuración para el plugin Arch Mask.
+ * Controla qué elementos visuales se muestran y qué tema se utiliza.
+ */
 export type Cfg = {
-  enabled: boolean
-  theme: string
-  set_theme: boolean
-  show_detected: boolean
-  show_os: boolean
-  show_providers: boolean
-  show_sidebar: boolean
+  enabled: boolean       // Indica si el plugin está activo
+  theme: string         // El ID del tema visual a utilizar
+  color_preset: "current" | "cyber" | "neon" | "overclock" // Ajustes preestablecidos de color
+  set_theme: boolean    // Si debe aplicar el tema automáticamente al iniciar
+  show_detected: boolean // Mostrar/ocultar la línea de entorno detectado
+  show_os: boolean       // Mostrar/ocultar el nombre del sistema operativo
+  show_providers: boolean // Mostrar/ocultar los proveedores de IA detectados
+  show_sidebar: boolean  // Mostrar/ocultar el panel lateral personalizado
 }
 
+/**
+ * Utilidad para validar y seleccionar un valor de cadena con un respaldo (fallback).
+ * @param value El valor a evaluar
+ * @param fallback El valor por defecto si 'value' es inválido
+ */
 const pick = (value: unknown, fallback: string): string => {
   if (typeof value !== "string") return fallback
   if (!value.trim()) return fallback
   return value
 }
 
+/**
+ * Utilidad para validar valores booleanos con un respaldo (fallback).
+ * @param value El valor a evaluar
+ * @param fallback El valor por defecto si 'value' es inválido
+ */
 const bool = (value: unknown, fallback: boolean): boolean => {
   if (typeof value !== "boolean") return fallback
   return value
 }
 
+/**
+ * Procesa las opciones proporcionadas y devuelve un objeto de configuración completo.
+ * Asegura que todas las propiedades tengan valores válidos mediante el uso de fallbacks.
+ * 
+ * @param opts Diccionario de opciones crudas, usualmente provenientes de la configuración del plugin.
+ * @returns Un objeto de tipo Cfg con valores saneados.
+ */
 export const cfg = (opts: Record<string, unknown> | undefined): Cfg => {
   return {
     enabled:       bool(opts?.enabled, true),
     theme:         pick(opts?.theme, "j0k3r-dev-rgl"),
+    color_preset: (opts?.color_preset as any) || "current",
     set_theme:     bool(opts?.set_theme, true),
     show_detected: bool(opts?.show_detected, true),
     show_os:       bool(opts?.show_os, true),

package/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://json.schemastore.org/package.json",
 	"name": "opencode-mask-j0k3r-dev-rgl",
-	"version": "2.0.23",
+	"version": "3.0.0",
 	"description": "Arch Linux TUI mask for OpenCode — hot pink theme with prominent ASCII logo and j0k3r-dev-rgl@latest legend",
 	"type": "module",
 	"exports": {

package/tui.tsx

@@ -6,25 +6,153 @@ import { cfg } from "./config";
 
 const id = "j0k3r-dev-rgl";
 
+/**
+ * Función de utilidad para convertir objetos desconocidos en diccionarios planos.
+ */
 const rec = (value: unknown) => {
 	if (!value || typeof value !== "object" || Array.isArray(value)) return;
 	return Object.fromEntries(Object.entries(value));
 };
 
+/**
+ * Punto de entrada principal para el plugin Arch Mask.
+ * Este plugin personaliza la interfaz de usuario (TUI) de OpenCode con una estética inspirada en Arch Linux.
+ * 
+ * @param api La API de la TUI proporcionada por el sistema de plugins.
+ * @param options Opciones de configuración del usuario.
+ */
 const tui: TuiPlugin = async (api, options) => {
+	// Cargar y validar la configuración
 	const boot = cfg(rec(options));
 	if (!boot.enabled) return;
 
-	// Theme setup
+	/**
+	 * Resuelve la ruta absoluta de un archivo de tema JSON.
+	 */
+	const resolveTheme = (name: string) =>
+		new URL(`./themes/${name}.json`, import.meta.url).pathname;
+
+	// ─── Instalación de Temas ────────────────────────────────────────────────
+	// Registra todos los esquemas de color disponibles en el sistema de la TUI.
 	try {
-		await api.theme.install("./themes/j0k3r-dev-rgl.json");
-		if (boot.set_theme) api.theme.set(boot.theme);
-	} catch (error) {
-		// Silent fail
+		await api.theme.install(resolveTheme("j0k3r-dev-rgl"));
+		await api.theme.install(resolveTheme("arch-cyber"));
+		await api.theme.install(resolveTheme("arch-neon"));
+		await api.theme.install(resolveTheme("arch-overclock"));
+		await api.theme.install(resolveTheme("mask-cyber"));
+		await api.theme.install(resolveTheme("tokyo-night-dev"));
+		await api.theme.install(resolveTheme("arch-electric"));
+		await api.theme.install(resolveTheme("j0k3r-neon"));
+	} catch (e) {
+		console.error("Fallo al instalar temas", e);
 	}
 
-	// Asegurarnos de que los plugins internos estén ACTIVOS
-	// (los reactivamos por si quedaron apagados de la sesión anterior)
+	// ─── Comandos y Atajos ───────────────────────────────────────────────────
+	api.command.register(() => [
+		{
+			title: "Cambiar Máscara",
+			value: "mask",
+			description: "Cambiar el estilo visual de Arch Mask",
+			keybind: "ctrl+m",
+			slash: { name: "mask" },
+			onSelect: () => {
+				// Guardamos el tema actual por si el usuario cancela la selección
+				const originalTheme = api.theme.selected;
+
+				// Abrir un diálogo de selección con previsualización en tiempo real
+				api.ui.dialog.replace(() => (
+					<api.ui.DialogSelect
+						title="Arch Mask: Theme Preview"
+						options={[
+							{ 
+								title: "Default (j0k3r-dev-rgl)", 
+								value: "j0k3r-dev-rgl",
+								description: "Estilo original con acentos púrpuras y azul Arch." 
+							},
+							{ 
+								title: "Tokyo Night Dev", 
+								value: "tokyo-night-dev",
+								description: "Lindo tema dark profesional con fondo transparente (Recomendado)." 
+							},
+							{ 
+								title: "Arch Electric", 
+								value: "arch-electric",
+								description: "Tema neón azul eléctrico que combina con tu fondo de pantalla." 
+							},
+							{ 
+								title: "j0k3r Neon", 
+								value: "j0k3r-neon",
+								description: "Inspirado en tu logo de Arch y nombre en verde neón." 
+							},
+							{ 
+								title: "Cyber Arch", 
+								value: "arch-cyber",
+								description: "Inspirado en los colores clásicos de Arch Linux (Azules y Grises)." 
+							},
+							{ 
+								title: "Semáforo Neón", 
+								value: "arch-neon",
+								description: "Contraste extremo con verdes y azules neón." 
+							},
+							{ 
+								title: "Overclock", 
+								value: "arch-overclock",
+								description: "Estilo agresivo en rosa y blanco puro." 
+							},
+							{ 
+								title: "Cyber Mask", 
+								value: "mask-cyber",
+								description: "Futurismo puro: neón azul y rosa fuerte." 
+							},
+						]}
+						current={api.theme.selected}
+						/**
+						 * Lógica de Previsualización:
+						 * El evento 'onMove' se dispara cada vez que el usuario navega por la lista.
+						 * Cambiamos el tema global instantáneamente para que el usuario vea el resultado.
+						 */
+						onMove={(opt) => {
+							try {
+								api.theme.set(opt.value);
+							} catch (e) {}
+						}}
+						/**
+						 * Lógica de Confirmación:
+						 * Aplica el tema definitivamente y lo guarda en el almacenamiento persistente (KV).
+						 */
+						onSelect={(opt) => {
+							try {
+								api.theme.set(opt.value);
+								api.kv.set("selected_theme", opt.value);
+								api.ui.dialog.clear();
+								api.ui.toast({
+									title: "Máscara Aplicada",
+									message: `Tema ${opt.title} configurado como predeterminado.`,
+									variant: "success",
+								});
+							} catch (e) {}
+						}}
+						/**
+						 * Lógica de Cancelación:
+						 * Si el usuario presiona ESC o cierra el diálogo, restauramos el tema que estaba antes.
+						 */
+						onCancel={() => {
+							try {
+								api.theme.set(originalTheme);
+							} catch (e) {}
+							api.ui.dialog.clear();
+						}}
+					/>
+				));
+			},
+		},
+	]);
+
+	// ─── Gestión de Plugins Internos ──────────────────────────────────────────
+	/**
+	 * Configura qué plugins de la barra lateral deben estar activos o inactivos
+	 * para mantener una interfaz limpia y coherente con el estilo 'Mask'.
+	 */
 	const enableInternal = async () => {
 		try {
 			await api.plugins.deactivate("internal:sidebar-context");
@@ -32,31 +160,21 @@ const tui: TuiPlugin = async (api, options) => {
 			await api.plugins.activate("internal:sidebar-lsp");
 			await api.plugins.activate("internal:sidebar-todo");
 			await api.plugins.activate("internal:sidebar-files");
-		} catch (e) {
-			// Silent fail
-		}
+		} catch (e) {}
 	};
 	enableInternal();
 
-	// Resolver context window real del modelo activo
-	const getContextLimit = (): number => {
-		try {
-			const modelStr = api.state.config?.model ?? "";
-			const [providerID, modelID] = modelStr.split("/");
-			const provider = api.state.provider.find((p) => p.id === providerID);
-			const model = provider?.models?.[modelID];
-			if (model?.limit?.context) return model.limit.context;
-		} catch (_) {}
-		return 1_000_000;
-	};
-
-	// Slot registration
+	// ─── Registro de Slots de la UI ──────────────────────────────────────────
+	/**
+	 * Define dónde y cómo se renderizan los componentes del plugin en la interfaz.
+	 */
 	api.slots.register({
 		slots: {
+			// Logo principal en la pantalla de bienvenida
 			home_logo(ctx) {
 				return <HomeLogo theme={ctx.theme.current} />;
 			},
-
+			// Barra de estado/detección en la parte inferior de la home
 			home_bottom(ctx) {
 				return (
 					<DetectedEnv
@@ -66,26 +184,23 @@ const tui: TuiPlugin = async (api, options) => {
 					/>
 				);
 			},
-
+			// Contenido personalizado para la barra lateral (Sidebar)
 			sidebar_content(ctx, value) {
 				const sessionID = value?.session_id;
-
-				const branch = api.state.vcs?.branch;
-				const contextLimit = getContextLimit();
-
 				return (
 					<SidebarArch
 						theme={ctx.theme.current}
+						selectedTheme={api.theme.selected}
 						config={boot}
-						branch={branch}
+						branch={api.state.vcs?.branch}
 						getMessages={() =>
 							sessionID ? api.state.session.messages(sessionID) : []
 						}
-						contextLimit={contextLimit}
+						contextLimit={1000000}
 					/>
 				);
 			},
-
+			// Personalización del prompt en la sesión de chat
 			session_prompt_right(ctx, value) {
 				const t = ctx.theme.current;
 				return (
@@ -100,9 +215,5 @@ const tui: TuiPlugin = async (api, options) => {
 	});
 };
 
-const plugin: TuiPluginModule & { id: string } = {
-	id,
-	tui,
-};
-
+const plugin: TuiPluginModule & { id: string } = { id, tui };
 export default plugin;