Verdent Docs
Primeros pasos

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) o Ctrl+L (Windows/Linux)
  • Paleta de comandos - Presiona Cmd+Shift+P / Ctrl+Shift+P y 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ónFunción
Nueva sesiónInicia una conversación nueva con contexto limpio
Historial del proyectoExplora y restaura sesiones anteriores
Centro de usuarioConsulta la información de la cuenta y el saldo de créditos
ComentariosEnvía comentarios y reporta problemas
ConfiguraciónConfigura 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ónFunción
Agregar contextoReferencia archivos con menciones @ o invoca subagentes
Agregar imágenes o archivosIncluye capturas de pantalla, diagramas o documentos para analizar
Agregar subagenteDelega tareas a subagentes especializados
Cambiar modoAlterna entre los modos Agent, Plan y Chat
Cambiar/personalizar modelo de IASelecciona los ajustes preestablecidos Performance, Balance, Efficiency o modelos específicos
Think Hard ModeActiva el presupuesto máximo de razonamiento para razonamientos complejos
Cambiar permisoCambia el modo de permiso (Manual Accept, Auto-Run, Plan, Skip Permissions)
EnviarEnví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

La barra superior usa diferentes patrones de navegación según la función:

Botones:

  • Nueva sesión - Al seleccionar este botón, se borra de inmediato la conversación actual y vuelves a una vista de chat nueva con contexto limpio. No hay página ni ventana emergente independiente; ocurre al instante en la misma vista.

Páginas:

  • Historial del proyecto - Abre una vista dedicada de página completa donde puedes explorar todas tus sesiones y conversaciones anteriores. Esto te lleva fuera de la vista de chat para mostrar tu historial de sesiones. Selecciona el botón X para volver a la vista de chat.

Ventanas emergentes (diálogos superpuestos):

  • Centro de usuario - Abre una ventana emergente superpuesta con la información de tu cuenta, el saldo de créditos y los detalles de uso. La vista de chat permanece visible detrás de la ventana emergente.
  • Comentarios - Abre una ventana emergente superpuesta con un formulario para enviar comentarios y reportar problemas. La vista de chat permanece en segundo plano.

Para cerrar las ventanas emergentes, selecciona fuera del área de la ventana o usa el botón X en la esquina de la ventana.

Menús desplegables:

  • Configuración - Abre un menú desplegable en línea con opciones para servidores MCP, subagentes, reglas y ajustes preestablecidos de modelos. Cuando seleccionas una opción del menú (p. ej., "Servidores MCP"), se abre una vista dedicada de página completa para esa configuración. Selecciona el botón X para volver a la vista de chat.

Todos los botones del cuadro de entrada abren menús desplegables para una configuración rápida y en línea:

Patrón de menú desplegable: Cada botón del cuadro de entrada (Agregar contexto, Agregar imágenes o archivos, Agregar subagente, Cambiar modo, Cambiar/personalizar modelo de IA, Think Hard Mode, Cambiar permiso) abre un menú desplegable justo debajo del botón. Estos menús te permiten configurar tu solicitud sin salir de la vista de chat.

Por qué menús desplegables: Este diseño te mantiene anclado a la vista de chat para todas las operaciones comunes. Puedes ajustar la configuración, seleccionar modelos, cambiar modos y agregar contexto sin perder de vista tu conversación ni interrumpir tu flujo de trabajo.

Cerrar menús desplegables: Los menús desplegables se cierran automáticamente cuando haces una selección o seleccionas en cualquier lugar fuera del menú. Esto te permite configurar los ajustes rápidamente y volver a redactar tu solicitud.

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ónReglas 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


Consulta también