Descripción general de la interfaz de usuario
Comprende los componentes de la interfaz y la navegación de Verdent
Verdent for VS Code ofrece una interfaz limpia de tres partes diseñada para minimizar las distracciones. Todas las interacciones ocurren dentro de la barra lateral de Visual Studio Code, manteniéndote cerca de tu código.
Acceder a Verdent
Abre Verdent con cualquiera de estos métodos:
- Icono de la barra lateral - Selecciona el icono de Verdent en la barra de actividad de Visual Studio Code (barra lateral izquierda)
- Atajo de teclado - Presiona
Cmd+L(macOS) oCtrl+L(Windows/Linux) - Paleta de comandos - Presiona
Cmd+Shift+P/Ctrl+Shift+Py luego busca "Verdent"
El panel se abre en la barra lateral de Visual Studio Code y se puede redimensionar, mover o acoplar según sea necesario.
Redimensiona el panel de Verdent arrastrando su borde para ver más historial de conversación o dar más espacio a tu editor.
Componentes de la interfaz
Acceso rápido a funciones clave:
| Botón | Función |
|---|---|
| Nueva sesión | Inicia una conversación nueva con contexto limpio |
| Historial del proyecto | Explora y restaura sesiones anteriores |
| Centro de usuario | Consulta la información de la cuenta y el saldo de créditos |
| Comentarios | Envía comentarios y reporta problemas |
| Configuración | Configura servidores MCP, subagentes, reglas y ajustes preestablecidos de modelos |
El área principal de conversación muestra:
- Respuestas de la IA - Texto con formato y bloques de código con resaltado de sintaxis
- Diferencias de código - Comparaciones interactivas de antes/después para los cambios en archivos
- Planes - Desgloses estructurados de tareas al usar Plan Mode
- Resultados de verificación - Salida de la ejecución de pruebas e información de depuración
- Operaciones con archivos - Confirmación de creación, edición o eliminación de archivos
- Salidas de subagentes - Resultados de tareas delegadas
La vista de chat conserva el historial completo de la conversación, lo que te permite desplazarte por interacciones anteriores.
El área de entrada en la parte inferior con controles para redactar solicitudes:
Área de entrada de texto: Campo de texto principal para escribir prompts en lenguaje natural
Botones de acción:
| Botón | Función |
|---|---|
| Agregar contexto | Referencia archivos con menciones @ o invoca subagentes |
| Agregar imágenes o archivos | Incluye capturas de pantalla, diagramas o documentos para analizar |
| Agregar subagente | Delega tareas a subagentes especializados |
| Cambiar modo | Alterna entre los modos Agent, Plan y Chat |
| Cambiar/personalizar modelo de IA | Selecciona los ajustes preestablecidos Performance, Balance, Efficiency o modelos específicos |
| Think Hard Mode | Activa el presupuesto máximo de razonamiento para razonamientos complejos |
| Cambiar permiso | Cambia el modo de permiso (Manual Accept, Auto-Run, Plan, Skip Permissions) |
| Enviar | Envía tu prompt al modelo de IA |
Indicadores de estado
Verdent comunica el estado del sistema mediante indicadores visuales:
La vista de chat comunica el estado mediante señales visuales en lugar de etiquetas explícitas:
- Indicador de procesamiento - Aparece un indicador visual cuando Verdent está trabajando activamente. Esto se muestra cuando la IA lee archivos, analiza código o se prepara para responder.
- Texto en generación - Verás la respuesta de Verdent apareciendo en tiempo real a medida que la IA compone explicaciones, sugerencias de código o planes. El texto en streaming indica que el modelo está generando salida activamente.
- Sin actividad - Cuando la vista de chat está estática sin actividad, Verdent está esperando. Esto significa que debes aprobar cambios en archivos, responder preguntas aclaratorias o proporcionar tu siguiente solicitud.
El cursor de texto en el cuadro de entrada indica si Verdent está listo para aceptar nuevas solicitudes:
- Cursor parpadeante - El cuadro de entrada está activo y listo para introducir texto. Puedes escribir tu solicitud y presionar Enviar. Esto aparece cuando Verdent ha completado el procesamiento y espera tu siguiente prompt.
- Sin cursor/deshabilitado - El cuadro de entrada se deshabilita mientras Verdent procesa una solicitud. Esto evita interrupciones de la tarea actual y garantiza que cada solicitud se complete antes de iniciar otra.
Patrón de flujo de trabajo: Cuando envías una solicitud, el cursor desaparece (la entrada se deshabilita). Una vez que Verdent completa la tarea, el cursor reaparece, indicando que puedes escribir tu siguiente solicitud.
El cuadro de entrada muestra indicadores con tu configuración actual:
- Botón Cambiar permiso - Muestra tu modo de permiso actual como una etiqueta en el propio botón. Verás "Manual", "Auto", "Plan" o "Skip". Esto te permite confirmar qué modo de ejecución está activo antes de enviar tu solicitud. Selecciona el botón para alternar entre los modos disponibles.
- Botón Cambiar/personalizar modelo de IA - Muestra el modelo o el ajuste preestablecido seleccionado actualmente. Verás "Performance", "Balance" o "Efficiency" para los ajustes preestablecidos, o nombres de modelos específicos como "Claude 4.5 Sonnet" si has seleccionado un modelo individual. Esto confirma qué modelo de IA procesará tu siguiente solicitud.
Estos indicadores ofrecen una confirmación rápida de tu configuración actual, ayudándote a asegurar los ajustes correctos antes de enviar prompts.
Los indicadores de estado se actualizan en tiempo real para mostrar exactamente lo que Verdent está haciendo, ayudándote a comprender la actividad del agente.
Patrones de navegación
Los distintos elementos de navegación usan diferentes métodos para volver a la vista de chat principal:
Desde páginas (Historial del proyecto, Configuración):
- Selecciona el botón X en la esquina superior de la página
- Esto te devuelve a la vista de chat donde la dejaste
Desde ventanas emergentes (Centro de usuario, Comentarios):
- Selecciona el botón X en la esquina de la ventana emergente, o
- Selecciona en cualquier lugar fuera de la superposición de la ventana emergente
- La vista de chat siempre estuvo visible detrás de la ventana emergente, así que al cerrarla el foco vuelve de inmediato
Desde menús desplegables:
- Los menús se cierran automáticamente cuando haces una selección
- Selecciona en cualquier lugar fuera del menú para cerrarlo sin seleccionar
- Nunca sales de la vista de chat, por lo que no hay nada de qué "volver"
Filosofía de navegación: La mayoría de las interacciones ocurren a través de menús desplegables que te mantienen en la vista de chat. Historial del proyecto y las opciones de Configuración navegan a páginas separadas, mientras que Centro de usuario y Comentarios usan ventanas emergentes superpuestas que no ocultan tu conversación.
Usa menciones @ y comandos con barra para guiar la navegación. Esto ayuda a Verdent a comprender tu intención y elegir las herramientas adecuadas.
Personalizar con reglas
Accede a Configuración → Reglas para personalizar el comportamiento de Verdent usando archivos Markdown:
Archivo: VERDENT.md
Alcance: Preferencias globales aplicadas en todos los proyectos
Propósito: Establece tus preferencias personales de uso que Verdent aplicará durante los chats en todos los espacios de trabajo. Son ajustes globales que persisten en todas las sesiones, sin importar en qué proyecto estés trabajando.
Casos de uso comunes:
- Idioma de salida predeterminado (p. ej., "Responde siempre en español")
- Preferencias de comentarios en el código (p. ej., "Incluye comentarios detallados en el código generado")
- Formato de respuesta (p. ej., "Usa TypeScript para todos los ejemplos de JavaScript")
- Preferencias personales de estilo de código
Cómo editar:
Abrir Configuración
Selecciona Configuración en la barra superior
Seleccionar Reglas
Elige Reglas en el menú desplegable
Editar Reglas de usuario
Selecciona Reglas de usuario para crear o editar VERDENT.md en formato Markdown
Archivo: AGENTS.md
Alcance: Reglas específicas del proyecto solo para el espacio de trabajo actual
Propósito: Define estándares de código, patrones arquitectónicos y flujos de trabajo de desarrollo que se aplican específicamente al proyecto actual. Estas reglas anulan las Reglas de usuario al trabajar en este espacio de trabajo y ayudan a Verdent a comprender los requisitos únicos de tu proyecto.
Casos de uso comunes:
- Estándares de código específicos del proyecto (p. ej., "Usa kebab-case para todos los nombres de archivo")
- Patrones arquitectónicos (p. ej., "Sigue el patrón de repositorio para el acceso a datos")
- Requisitos de la pila tecnológica (p. ej., "Usa React Hooks, no componentes de clase")
- Convenciones del equipo (p. ej., "Todas las respuestas de API deben incluir códigos de error")
Cómo editar:
Abrir Configuración
Selecciona Configuración en la barra superior
Seleccionar Reglas
Elige Reglas en el menú desplegable
Editar Reglas del proyecto
Selecciona Reglas del proyecto para crear o editar AGENTS.md en la raíz de tu espacio de trabajo
Este archivo es específico del proyecto y normalmente se incluye en el control de versiones.
Archivo: Plan.md
Alcance: Controla el formato y el contenido de salida de Plan Mode
Propósito: Personaliza qué información aparece en los planes, qué tan detallados son y qué formato siguen al usar Plan Mode. Estas reglas determinan la estructura y el contenido de los planes que Verdent genera antes de ejecutar tareas complejas.
Casos de uso comunes:
- Nivel de detalle del plan (p. ej., "Incluye estimaciones de tiempo para cada paso")
- Estructura del plan (p. ej., "Incluye siempre una sección de 'Riesgos'")
- Requisitos de contenido (p. ej., "Enumera todos los archivos que se modificarán")
- Formato de salida (p. ej., "Usa listas numeradas para los pasos secuenciales")
Cómo editar:
Abrir Configuración
Selecciona Configuración en la barra superior
Seleccionar Reglas
Elige Reglas en el menú desplegable
Editar Reglas de plan
Selecciona Reglas de plan para crear o editar plan_rules.md en formato Markdown