---
title: "Visão geral da interface do usuário"
description: "Entenda os componentes da interface e a navegação do Verdent"
---

Verdent for VS Code apresenta uma interface limpa em três partes, projetada para minimizar distrações. Todas as interações acontecem dentro da barra lateral do Visual Studio Code, mantendo você perto do seu código.

---

## Acessando o Verdent

Abra o Verdent usando qualquer um destes métodos:

- **Ícone da barra lateral** - Clique no ícone do Verdent na barra de atividades do Visual Studio Code (barra lateral esquerda)
- **Atalho de teclado** - Pressione `Cmd+L` (macOS) ou `Ctrl+L` (Windows/Linux)
- **Paleta de comandos** - Pressione `Cmd+Shift+P` / `Ctrl+Shift+P` e busque por "Verdent"

O painel abre na barra lateral do Visual Studio Code e pode ser redimensionado, movido ou encaixado conforme necessário.

<Tip>
  Redimensione o painel do Verdent arrastando sua borda para ver mais histórico de conversas ou dar mais espaço ao seu editor.
</Tip>

---

## Componentes da interface

<Tabs>
  <Tab title="Barra superior">
    Acesso rápido a funcionalidades essenciais:

    | Botão           | Função                                                     |
    | --------------- | ---------------------------------------------------------- |
    | Nova sessão     | Inicie uma nova conversa com contexto limpo                |
    | Histórico do projeto | Navegue e restaure sessões anteriores                 |
    | Central do usuário | Veja informações da conta e saldo de créditos           |
    | Feedback        | Envie feedback e relate problemas                          |
    | Configurações   | Configure servidores MCP, subagentes, regras e predefinições de modelo |
  </Tab>
  <Tab title="Visão de chat">
    A área principal de conversa exibe:

    - **Respostas da IA** - Texto formatado com blocos de código com destaque de sintaxe
    - **Diffs de código** - Comparações interativas de antes/depois para alterações em arquivos
    - **Planos** - Divisões estruturadas de tarefas ao usar o Plan Mode
    - **Resultados de verificação** - Saída de execução de testes e informações de depuração
    - **Operações de arquivo** - Confirmação de criações, edições ou exclusões de arquivos
    - **Saídas de subagentes** - Resultados de tarefas delegadas

    A Visão de chat mantém o histórico completo da conversa, permitindo que você role para revisar interações anteriores.
  </Tab>
  <Tab title="Caixa de entrada">
    A área de entrada na parte inferior com controles para compor solicitações:

    **Área de entrada de texto:** Campo de texto principal para digitar prompts em linguagem natural

    **Botões de ação:**

    | Botão                     | Função                                                                   |
    | ------------------------- | ------------------------------------------------------------------------ |
    | Adicionar contexto        | Referencie arquivos com @-menções ou invoque subagentes                  |
    | Adicionar imagens ou arquivos | Inclua capturas de tela, diagramas ou documentos para análise        |
    | Adicionar subagente       | Delegue tarefas a subagentes especializados                              |
    | Switch Mode               | Alterne entre os modos Agent, Plan e Chat                                |
    | Trocar/Personalizar modelo de IA | Selecione predefinições Performance, Balance, Efficiency ou modelos específicos |
    | Think Hard Mode           | Ative o orçamento máximo de raciocínio para reflexões complexas          |
    | Trocar permissão          | Mude o modo de permissão (Manual Accept, Auto-Run, Plan, Skip Permissions) |
    | Enviar                    | Submeta seu prompt ao modelo de IA                                       |
  </Tab>
</Tabs>

---

## Indicadores de status

Verdent comunica o estado do sistema por meio de indicadores visuais:

<Tabs>
  <Tab title="Status da Visão de chat">
    A Visão de chat comunica o status por meio de pistas visuais em vez de rótulos explícitos:

    - **Indicador de processamento** - Um indicador visual aparece quando o Verdent está trabalhando ativamente. Isso mostra quando a IA está lendo arquivos, analisando código ou se preparando para responder.
    - **Texto sendo gerado** - Você verá a resposta do Verdent aparecendo em tempo real à medida que a IA compõe explicações, sugestões de código ou planos. O texto em streaming indica que o modelo está gerando saída ativamente.
    - **Nada acontecendo** - Quando a Visão de chat está estática, sem atividade, o Verdent está aguardando. Isso significa que você precisa aprovar alterações em arquivos, responder perguntas de esclarecimento ou fazer sua próxima solicitação.
  </Tab>
  <Tab title="Cursor de texto">
    O cursor de texto na Caixa de entrada indica se o Verdent está pronto para aceitar novas solicitações:

    - **Cursor piscando** - A Caixa de entrada está ativa e pronta para entrada de texto. Você pode digitar sua solicitação e pressionar Enviar. Isso aparece quando o Verdent concluiu o processamento e está aguardando seu próximo prompt.
    - **Sem cursor/desabilitado** - A Caixa de entrada fica desabilitada enquanto o Verdent processa uma solicitação. Isso evita interrupções na tarefa atual e garante que cada solicitação seja concluída antes de iniciar outra.

    **Padrão de fluxo de trabalho:** Quando você envia uma solicitação, o cursor desaparece (a entrada fica desabilitada). Assim que o Verdent conclui a tarefa, o cursor reaparece, sinalizando que você pode digitar sua próxima solicitação.
  </Tab>
  <Tab title="Indicadores de modo">
    A Caixa de entrada exibe indicadores mostrando sua configuração atual:

    - **Botão Trocar permissão** - Mostra seu modo de permissão atual como um rótulo no próprio botão. Você verá "Manual", "Auto", "Plan" ou "Skip" exibido. Isso permite confirmar qual modo de execução está ativo antes de enviar sua solicitação. Clique no botão para alternar entre os modos disponíveis.
    - **Botão Trocar/Personalizar modelo de IA** - Exibe o modelo ou predefinição atualmente selecionado. Você verá "Performance", "Balance" ou "Efficiency" para predefinições, ou nomes de modelos específicos como "Claude 4.5 Sonnet" se você tiver selecionado um modelo individual. Isso confirma qual modelo de IA processará sua próxima solicitação.

    Esses indicadores fornecem uma confirmação rápida de suas configurações atuais, ajudando você a garantir a configuração correta antes de enviar prompts.
  </Tab>
</Tabs>

<Note>
  Os indicadores de status são atualizados em tempo real para mostrar exatamente o que o Verdent está fazendo, ajudando você a entender a atividade do agente.
</Note>

---

## Padrões de navegação

<Tabs>
  <Tab title="Navegação da barra superior">
    A Barra superior usa padrões de navegação diferentes dependendo da função:

    **Botões:**

    - **Nova sessão** - Clicar neste botão limpa imediatamente sua conversa atual e retorna você a uma Visão de chat nova com contexto limpo. Não há página ou popup separado; acontece instantaneamente na mesma visão.

    **Páginas:**

    - **Histórico do projeto** - Abre uma visão dedicada em página inteira onde você pode navegar por todas as suas sessões e conversas anteriores. Isso navega para fora da Visão de chat para mostrar seu histórico de sessões. Clique no botão **X** para retornar à Visão de chat.

    **Popups (diálogos sobrepostos):**

    - **Central do usuário** - Abre um popup sobreposto exibindo informações da sua conta, saldo de créditos e detalhes de uso. A Visão de chat permanece visível atrás do popup.
    - **Feedback** - Abre um popup sobreposto com um formulário para enviar feedback e relatar problemas. A Visão de chat permanece ao fundo.

    Para fechar popups, clique fora da área do popup ou use o botão **X** no canto do popup.

    **Menus suspensos:**

    - **Configurações** - Abre um menu suspenso inline com opções para servidores MCP, subagentes, regras e predefinições de modelo. Quando você seleciona uma opção do menu (por exemplo, "Servidores MCP"), ela abre uma visão dedicada em página inteira para essa configuração. Clique no botão **X** para retornar à Visão de chat.
  </Tab>
  <Tab title="Navegação da Caixa de entrada">
    Todos os botões da Caixa de entrada abrem menus suspensos para configuração rápida e inline:

    **Padrão de menu suspenso:** Cada botão na Caixa de entrada (Adicionar contexto, Adicionar imagens ou arquivos, Adicionar subagente, Switch Mode, Trocar/Personalizar modelo de IA, Think Hard Mode, Trocar permissão) abre um menu suspenso diretamente abaixo do botão. Esses menus permitem configurar sua solicitação sem sair da Visão de chat.

    **Por que menus suspensos:** Esse design mantém você ancorado na Visão de chat para todas as operações comuns. Você pode ajustar configurações, selecionar modelos, mudar modos e adicionar contexto sem perder de vista sua conversa ou interromper seu fluxo de trabalho.

    **Fechando menus suspensos:** Os menus suspensos fecham automaticamente quando você faz uma seleção ou clica em qualquer lugar fora do menu. Isso permite configurar rapidamente e voltar a compor sua solicitação.
  </Tab>
  <Tab title="Retornando à Visão de chat">
    Diferentes elementos de navegação usam métodos diferentes para retornar à Visão de chat principal:

    **A partir de páginas (Histórico do projeto, Configurações):**

    - Clique no botão **X** no canto superior da página
    - Isso retorna você à Visão de chat de onde você parou

    **A partir de popups (Central do usuário, Feedback):**

    - Clique no botão **X** no canto do popup, ou
    - Clique em qualquer lugar fora da sobreposição do popup
    - A Visão de chat sempre esteve visível atrás do popup, então fechar o popup imediatamente devolve o foco

    **A partir de menus suspensos:**

    - Os menus fecham automaticamente quando você faz uma seleção
    - Clique em qualquer lugar fora do menu para fechar sem selecionar
    - Você nunca sai da Visão de chat, então não há nada para "retornar"

    **Filosofia de navegação:** A maioria das interações acontece por meio de menus suspensos que mantêm você na Visão de chat. **Histórico do projeto** e **opções de Configurações** navegam para páginas separadas, enquanto **Central do usuário** e **Feedback** usam popups sobrepostos que não escondem sua conversa.
  </Tab>
</Tabs>

<Tip>
  Use @-menções e comandos de barra para guiar a navegação. Isso ajuda o Verdent a entender sua intenção e escolher as ferramentas certas.
</Tip>

---

## Personalizando com regras

Acesse **Configurações** → **Regras** para personalizar o comportamento do Verdent usando arquivos Markdown:

<Tabs>
  <Tab title="Regras de usuário">
    **Arquivo:** `VERDENT.md`

    **Escopo:** Preferências globais aplicadas em todos os projetos

    **Propósito:** Defina suas preferências pessoais de uso que o Verdent aplicará durante os chats em todos os espaços de trabalho. Essas são configurações globais que persistem em todas as sessões, independentemente de em qual projeto você esteja trabalhando.

    **Casos de uso comuns:**

    - Idioma de saída padrão (por exemplo, "Sempre responda em espanhol")
    - Preferências de comentários de código (por exemplo, "Inclua comentários detalhados no código gerado")
    - Formatação de respostas (por exemplo, "Use TypeScript para todos os exemplos de JavaScript")
    - Preferências pessoais de estilo de código

    **Como editar:**

    <Steps>
      <Step title="Abra as configurações">
        Clique em **Configurações** na Barra superior
      </Step>
      <Step title="Selecione Regras">
        Escolha **Regras** no menu suspenso
      </Step>
      <Step title="Edite as Regras de usuário">
        Selecione **Regras de usuário** para criar ou editar o `VERDENT.md` no formato Markdown
      </Step>
    </Steps>
  </Tab>
  <Tab title="Regras de projeto">
    **Arquivo:** `AGENTS.md`

    **Escopo:** Regras específicas do projeto apenas para o espaço de trabalho atual

    **Propósito:** Defina padrões de codificação, padrões arquiteturais e fluxos de trabalho de desenvolvimento que se aplicam especificamente ao projeto atual. Essas regras substituem as Regras de usuário ao trabalhar neste espaço de trabalho e ajudam o Verdent a entender os requisitos únicos do seu projeto.

    **Casos de uso comuns:**

    - Padrões de codificação específicos do projeto (por exemplo, "Use kebab-case para todos os nomes de arquivos")
    - Padrões arquiteturais (por exemplo, "Siga o padrão repository para acesso a dados")
    - Requisitos de stack tecnológica (por exemplo, "Use React Hooks, não componentes de classe")
    - Convenções de equipe (por exemplo, "Todas as respostas API devem incluir códigos de erro")

    **Como editar:**

    <Steps>
      <Step title="Abra as configurações">
        Clique em **Configurações** na Barra superior
      </Step>
      <Step title="Selecione Regras">
        Escolha **Regras** no menu suspenso
      </Step>
      <Step title="Edite as Regras de projeto">
        Selecione **Regras de projeto** para criar ou editar o `AGENTS.md` na raiz do seu espaço de trabalho
      </Step>
    </Steps>
    Este arquivo é específico do projeto e geralmente é versionado no controle de versão.
  </Tab>
  <Tab title="Regras de plano">
    **Arquivo:** `Plan.md`

    **Escopo:** Controla o formato e o conteúdo de saída do Plan Mode

    **Propósito:** Personalize quais informações aparecem nos planos, quão detalhados eles são e qual formato seguem ao usar o Plan Mode. Essas regras determinam a estrutura e o conteúdo dos planos que o Verdent gera antes de executar tarefas complexas.

    **Casos de uso comuns:**

    - Nível de detalhe do plano (por exemplo, "Inclua estimativas de tempo para cada etapa")
    - Estrutura do plano (por exemplo, "Sempre inclua uma seção 'Riscos'")
    - Requisitos de conteúdo (por exemplo, "Liste todos os arquivos que serão modificados")
    - Formato de saída (por exemplo, "Use listas numeradas para etapas sequenciais")

    **Como editar:**

    <Steps>
      <Step title="Abra as configurações">
        Clique em **Configurações** na Barra superior
      </Step>
      <Step title="Selecione Regras">
        Escolha **Regras** no menu suspenso
      </Step>
      <Step title="Edite as Regras de plano">
        Selecione **Regras de plano** para criar ou editar o `plan_rules.md` no formato Markdown
      </Step>
    </Steps>
  </Tab>
</Tabs>

---

## Veja também

<CardGroup cols={2}>
  <Card title="Início rápido" icon="rocket" href="/docs/verdent-for-vscode/getting-started/quick-start">
    Comece a usar a interface com sua primeira tarefa
  </Card>
  <Card title="Definições de configuração" icon="gear" href="/docs/verdent-for-vscode/configuration/settings">
    Personalize o comportamento e as preferências da interface
  </Card>
</CardGroup>
