# Panoramica dell'interfaccia utente (/it/docs/verdent-for-vscode/getting-started/interface)

> Comprendere i componenti dell'interfaccia e la navigazione di Verdent



Verdent for VS Code offre un'interfaccia pulita e in tre parti, progettata per ridurre al minimo le distrazioni. Tutte le interazioni avvengono all'interno della barra laterale di Visual Studio Code, mantenendoti vicino al tuo codice.

***

## Accesso a Verdent [#accesso-a-verdent]

Apri Verdent con uno di questi metodi:

* **Icona nella barra laterale** - Seleziona l'icona Verdent nella barra delle attività di Visual Studio Code (barra laterale sinistra)
* **Scorciatoia da tastiera** - Premi `Cmd+L` (macOS) o `Ctrl+L` (Windows/Linux)
* **Palette dei comandi** - Premi `Cmd+Shift+P` / `Ctrl+Shift+P`, poi cerca "Verdent"

Il pannello si apre nella barra laterale di Visual Studio Code e può essere ridimensionato, spostato o ancorato secondo necessità.

<Tip>
  Ridimensiona il pannello Verdent trascinandone il bordo per vedere più cronologia delle conversazioni o dare più spazio al tuo editor.
</Tip>

***

## Componenti dell'interfaccia [#componenti-dellinterfaccia]

<Tabs>
  <Tab title="Barra superiore">
    Accesso rapido alle funzionalità chiave:

    | Pulsante                | Funzione                                                       |
    | ----------------------- | -------------------------------------------------------------- |
    | Nuova sessione          | Avvia una nuova conversazione con contesto pulito              |
    | Cronologia del progetto | Sfoglia e ripristina le sessioni precedenti                    |
    | Centro utente           | Visualizza le informazioni dell'account e il saldo crediti     |
    | Feedback                | Invia feedback e segnala problemi                              |
    | Impostazioni            | Configura server MCP, sottoagenti, regole e preset dei modelli |
  </Tab>

  <Tab title="Vista chat">
    L'area di conversazione principale mostra:

    * **Risposte dell'AI** - Testo formattato con blocchi di codice con evidenziazione della sintassi
    * **Diff del codice** - Confronti interattivi prima/dopo per le modifiche ai file
    * **Piani** - Suddivisioni strutturate delle attività quando usi Plan Mode
    * **Risultati di verifica** - Output dell'esecuzione dei test e informazioni di debug
    * **Operazioni sui file** - Conferma di creazioni, modifiche o eliminazioni di file
    * **Output dei sottoagenti** - Risultati delle attività delegate

    La vista chat conserva l'intera cronologia della conversazione, permettendoti di scorrere all'indietro tra le interazioni precedenti.
  </Tab>

  <Tab title="Casella di input">
    L'area di input in basso, con i controlli per comporre le richieste:

    **Area di input di testo:** Campo di testo principale per digitare prompt in linguaggio naturale

    **Pulsanti di azione:**

    | Pulsante                       | Funzione                                                                            |
    | ------------------------------ | ----------------------------------------------------------------------------------- |
    | Aggiungi contesto              | Fai riferimento ai file con @-mention o richiama i sottoagenti                      |
    | Aggiungi immagini o file       | Includi screenshot, diagrammi o documenti per l'analisi                             |
    | Aggiungi sottoagente           | Delega attività a sottoagenti specializzati                                         |
    | Cambia modalità                | Passa tra Agent Mode, Plan Mode e Chat Mode                                         |
    | Cambia/personalizza modello AI | Seleziona i preset Performance, Balance, Efficiency o modelli specifici             |
    | Think Hard Mode                | Abilita il budget di ragionamento massimo per il pensiero complesso                 |
    | Cambia permesso                | Modifica la modalità dei permessi (Manual Accept, Auto-Run, Plan, Skip Permissions) |
    | Invia                          | Invia il tuo prompt al modello AI                                                   |
  </Tab>
</Tabs>

***

## Indicatori di stato [#indicatori-di-stato]

Verdent comunica lo stato del sistema tramite indicatori visivi:

<Tabs>
  <Tab title="Stato della vista chat">
    La vista chat comunica lo stato attraverso segnali visivi piuttosto che etichette esplicite:

    * **Indicatore di elaborazione** - Un indicatore visivo appare quando Verdent sta lavorando attivamente. Compare quando l'AI legge i file, analizza il codice o si prepara a rispondere.
    * **Testo in generazione** - Vedrai la risposta di Verdent apparire in tempo reale mentre l'AI compone spiegazioni, suggerimenti di codice o piani. Il testo in streaming indica che il modello sta generando attivamente l'output.
    * **Nessuna attività** - Quando la vista chat è statica senza attività, Verdent è in attesa. Significa che devi approvare modifiche ai file, rispondere a domande di chiarimento o fornire la richiesta successiva.
  </Tab>

  <Tab title="Cursore di testo">
    Il cursore di testo nella casella di input indica se Verdent è pronto ad accettare nuove richieste:

    * **Cursore lampeggiante** - La casella di input è attiva e pronta per l'inserimento del testo. Puoi digitare la tua richiesta e premere Invia. Compare quando Verdent ha completato l'elaborazione ed è in attesa del prossimo prompt.
    * **Nessun cursore/Disabilitato** - La casella di input è disabilitata mentre Verdent sta elaborando una richiesta. Questo previene interruzioni all'attività in corso e garantisce che ogni richiesta si completi prima di avviarne un'altra.

    **Schema del flusso di lavoro:** Quando invii una richiesta, il cursore scompare (l'input viene disabilitato). Una volta che Verdent completa l'attività, il cursore riappare, segnalando che puoi digitare la richiesta successiva.
  </Tab>

  <Tab title="Indicatori di modalità">
    La casella di input mostra indicatori che segnalano la configurazione corrente:

    * **Pulsante Cambia permesso** - Mostra la modalità dei permessi corrente come etichetta sul pulsante stesso. Vedrai "Manual", "Auto", "Plan" o "Skip". Questo ti permette di confermare quale modalità di esecuzione è attiva prima di inviare la richiesta. Seleziona il pulsante per scorrere le modalità disponibili.
    * **Pulsante Cambia/personalizza modello AI** - Mostra il modello o il preset attualmente selezionato. Vedrai "Performance", "Balance" o "Efficiency" per i preset, oppure nomi di modelli specifici come "Claude 4.5 Sonnet" se hai selezionato un singolo modello. Questo conferma quale modello AI elaborerà la richiesta successiva.

    Questi indicatori offrono una conferma immediata delle impostazioni correnti, aiutandoti a verificare la configurazione giusta prima di inviare i prompt.
  </Tab>
</Tabs>

<Note>
  Gli indicatori di stato si aggiornano in tempo reale per mostrare esattamente cosa sta facendo Verdent, aiutandoti a comprendere l'attività dell'agente.
</Note>

***

## Schemi di navigazione [#schemi-di-navigazione]

<Tabs>
  <Tab title="Navigazione della barra superiore">
    La barra superiore utilizza schemi di navigazione diversi a seconda della funzione:

    **Pulsanti:**

    * **Nuova sessione** - Selezionando questo pulsante cancelli immediatamente la conversazione corrente e torni a una vista chat nuova con contesto pulito. Non c'è una pagina o un popup separato; avviene istantaneamente nella stessa vista.

    **Pagine:**

    * **Cronologia del progetto** - Apre una vista dedicata a pagina intera dove puoi sfogliare tutte le sessioni e conversazioni precedenti. Questo ti allontana dalla vista chat per mostrare la cronologia delle sessioni. Seleziona il pulsante **X** per tornare alla vista chat.

    **Popup (finestre di dialogo sovrapposte):**

    * **Centro utente** - Apre un popup sovrapposto che mostra le informazioni dell'account, il saldo crediti e i dettagli sull'utilizzo. La vista chat resta visibile dietro il popup.
    * **Feedback** - Apre un popup sovrapposto con un modulo per inviare feedback e segnalare problemi. La vista chat resta sullo sfondo.

    Per chiudere i popup, seleziona un punto esterno all'area del popup oppure usa il pulsante **X** nell'angolo del popup.

    **Menu a discesa:**

    * **Impostazioni** - Apre un menu a discesa in linea con opzioni per server MCP, sottoagenti, regole e preset dei modelli. Quando selezioni un'opzione dal menu (ad esempio "Server MCP"), si apre una vista dedicata a pagina intera per quella configurazione. Seleziona il pulsante **X** per tornare alla vista chat.
  </Tab>

  <Tab title="Navigazione della casella di input">
    Tutti i pulsanti della casella di input aprono menu a discesa per una configurazione rapida e in linea:

    **Schema del menu a discesa:** Ogni pulsante nella casella di input (Aggiungi contesto, Aggiungi immagini o file, Aggiungi sottoagente, Cambia modalità, Cambia/personalizza modello AI, Think Hard Mode, Cambia permesso) apre un menu a discesa direttamente sotto il pulsante. Questi menu ti permettono di configurare la richiesta senza allontanarti dalla vista chat.

    **Perché i menu a discesa:** Questo design ti mantiene ancorato alla vista chat per tutte le operazioni comuni. Puoi regolare le impostazioni, selezionare i modelli, cambiare modalità e aggiungere contesto senza perdere di vista la conversazione o interrompere il flusso di lavoro.

    **Chiusura dei menu a discesa:** I menu a discesa si chiudono automaticamente quando effettui una selezione o selezioni un punto qualsiasi al di fuori del menu. Questo ti permette di configurare rapidamente le impostazioni e tornare a comporre la richiesta.
  </Tab>

  <Tab title="Ritorno alla vista chat">
    Elementi di navigazione diversi usano metodi diversi per tornare alla vista chat principale:

    **Dalle pagine (Cronologia del progetto, Impostazioni):**

    * Seleziona il pulsante **X** nell'angolo superiore della pagina
    * Questo ti riporta alla vista chat da dove l'avevi lasciata

    **Dai popup (Centro utente, Feedback):**

    * Seleziona il pulsante **X** nell'angolo del popup, oppure
    * Seleziona un punto qualsiasi al di fuori del popup sovrapposto
    * La vista chat era sempre visibile dietro il popup, quindi chiudendolo l'attenzione torna immediatamente

    **Dai menu a discesa:**

    * I menu si chiudono automaticamente quando effettui una selezione
    * Seleziona un punto qualsiasi al di fuori del menu per chiuderlo senza selezionare
    * Non lasci mai la vista chat, quindi non c'è nulla da cui "tornare"

    **Filosofia di navigazione:** La maggior parte delle interazioni avviene tramite menu a discesa che ti mantengono nella vista chat. **Cronologia del progetto** e le **opzioni delle Impostazioni** portano a pagine separate, mentre **Centro utente** e **Feedback** usano popup sovrapposti che non nascondono la conversazione.
  </Tab>
</Tabs>

<Tip>
  Usa le @-mention e i comandi slash per guidare la navigazione. Questo aiuta Verdent a comprendere le tue intenzioni e a scegliere gli strumenti giusti.
</Tip>

***

## Personalizzazione con le regole [#personalizzazione-con-le-regole]

Vai su **Impostazioni** → **Regole** per personalizzare il comportamento di Verdent usando file Markdown:

<Tabs>
  <Tab title="Regole utente">
    **File:** `VERDENT.md`

    **Ambito:** Preferenze globali applicate a tutti i progetti

    **Scopo:** Imposta le tue preferenze d'uso personali che Verdent applicherà durante le chat in tutti i workspace. Sono impostazioni globali che persistono in tutte le sessioni, indipendentemente dal progetto su cui stai lavorando.

    **Casi d'uso comuni:**

    * Lingua di output predefinita (ad esempio "Rispondi sempre in spagnolo")
    * Preferenze per i commenti del codice (ad esempio "Includi commenti dettagliati nel codice generato")
    * Formattazione delle risposte (ad esempio "Usa TypeScript per tutti gli esempi JavaScript")
    * Preferenze personali sullo stile di codifica

    **Come modificare:**

    <Steps>
      <Step title="Apri le impostazioni">
        Seleziona **Impostazioni** nella barra superiore
      </Step>

      <Step title="Seleziona le regole">
        Scegli **Regole** dal menu a discesa
      </Step>

      <Step title="Modifica le regole utente">
        Seleziona **Regole utente** per creare o modificare `VERDENT.md` in formato Markdown
      </Step>
    </Steps>
  </Tab>

  <Tab title="Regole del progetto">
    **File:** `AGENTS.md`

    **Ambito:** Regole specifiche del progetto, solo per il workspace corrente

    **Scopo:** Definisci standard di codifica, pattern architetturali e flussi di lavoro di sviluppo che si applicano specificamente al progetto corrente. Queste regole hanno la precedenza sulle regole utente quando lavori in questo workspace e aiutano Verdent a comprendere i requisiti unici del tuo progetto.

    **Casi d'uso comuni:**

    * Standard di codifica specifici del progetto (ad esempio "Usa il kebab-case per tutti i nomi dei file")
    * Pattern architetturali (ad esempio "Segui il repository pattern per l'accesso ai dati")
    * Requisiti dello stack tecnologico (ad esempio "Usa gli Hook di React, non i componenti a classe")
    * Convenzioni del team (ad esempio "Tutte le risposte di API devono includere i codici di errore")

    **Come modificare:**

    <Steps>
      <Step title="Apri le impostazioni">
        Seleziona **Impostazioni** nella barra superiore
      </Step>

      <Step title="Seleziona le regole">
        Scegli **Regole** dal menu a discesa
      </Step>

      <Step title="Modifica le regole del progetto">
        Seleziona **Regole del progetto** per creare o modificare `AGENTS.md` nella radice del tuo workspace
      </Step>
    </Steps>

    Questo file è specifico del progetto e in genere viene inserito nel controllo di versione.
  </Tab>

  <Tab title="Regole dei piani">
    **File:** `Plan.md`

    **Ambito:** Controlla il formato e il contenuto dell'output di Plan Mode

    **Scopo:** Personalizza quali informazioni appaiono nei piani, il loro livello di dettaglio e il formato che seguono quando usi Plan Mode. Queste regole determinano la struttura e il contenuto dei piani che Verdent genera prima di eseguire attività complesse.

    **Casi d'uso comuni:**

    * Livello di dettaglio del piano (ad esempio "Includi stime di tempo per ogni passaggio")
    * Struttura del piano (ad esempio "Includi sempre una sezione 'Rischi'")
    * Requisiti di contenuto (ad esempio "Elenca tutti i file che verranno modificati")
    * Formato di output (ad esempio "Usa elenchi numerati per i passaggi sequenziali")

    **Come modificare:**

    <Steps>
      <Step title="Apri le impostazioni">
        Seleziona **Impostazioni** nella barra superiore
      </Step>

      <Step title="Seleziona le regole">
        Scegli **Regole** dal menu a discesa
      </Step>

      <Step title="Modifica le regole dei piani">
        Seleziona **Regole dei piani** per creare o modificare `plan_rules.md` in formato Markdown
      </Step>
    </Steps>
  </Tab>
</Tabs>

***

## Vedi anche [#vedi-anche]

<CardGroup cols="2">
  <Card title="Avvio rapido" icon="rocket" href="/docs/verdent-for-vscode/getting-started/quick-start">
    Inizia a usare l'interfaccia con la tua prima attività
  </Card>

  <Card title="Impostazioni di configurazione" icon="gear" href="/docs/verdent-for-vscode/configuration/settings">
    Personalizza il comportamento e le preferenze dell'interfaccia
  </Card>
</CardGroup>
