# Übersicht der Benutzeroberfläche (/de/docs/verdent-for-vscode/getting-started/interface)

> Die Oberflächenkomponenten und Navigation von Verdent verstehen



Verdent for VS Code bietet eine klare, dreiteilige Oberfläche, die für minimale Ablenkung konzipiert ist. Alle Interaktionen finden in der Visual Studio Code-Seitenleiste statt, sodass Sie nahe an Ihrem Code bleiben.

***

## Zugriff auf Verdent [#zugriff-auf-verdent]

Öffnen Sie Verdent mit einer dieser Methoden:

* **Seitenleisten-Symbol** – Klicken Sie auf das Verdent-Symbol in der Visual Studio Code-Aktivitätsleiste (linke Seitenleiste)
* **Tastenkombination** – Drücken Sie `Cmd+L` (macOS) oder `Ctrl+L` (Windows/Linux)
* **Befehlspalette** – Drücken Sie `Cmd+Shift+P` / `Ctrl+Shift+P` und suchen Sie dann nach „Verdent“

Das Panel öffnet sich in der Visual Studio Code-Seitenleiste und kann nach Bedarf in der Größe angepasst, verschoben oder angedockt werden.

<Tip>
  Passen Sie die Größe des Verdent-Panels an, indem Sie dessen Rand ziehen, um mehr Konversationsverlauf zu sehen oder Ihrem Editor mehr Platz zu geben.
</Tip>

***

## Oberflächenkomponenten [#oberflächenkomponenten]

<Tabs>
  <Tab title="Obere Leiste">
    Schneller Zugriff auf zentrale Funktionen:

    | Schaltfläche    | Funktion                                                                 |
    | --------------- | ------------------------------------------------------------------------ |
    | Neue Sitzung    | Startet eine neue Konversation mit sauberem Kontext                      |
    | Projektverlauf  | Frühere Sitzungen durchsuchen und wiederherstellen                       |
    | Benutzerbereich | Kontoinformationen und Credit-Guthaben anzeigen                          |
    | Feedback        | Feedback senden und Probleme melden                                      |
    | Einstellungen   | MCP-Server, Subagenten, Regeln und Modell-Voreinstellungen konfigurieren |
  </Tab>

  <Tab title="Chat-Ansicht">
    Der Hauptbereich für Konversationen zeigt:

    * **KI-Antworten** – Formatierter Text mit syntaxhervorgehobenen Codeblöcken
    * **Code-Diffs** – Interaktive Vorher/Nachher-Vergleiche für Dateiänderungen
    * **Pläne** – Strukturierte Aufgabenübersichten bei Verwendung von Plan Mode
    * **Verifizierungsergebnisse** – Testausgaben und Debugging-Informationen
    * **Dateioperationen** – Bestätigung von Dateierstellungen, -bearbeitungen oder -löschungen
    * **Subagenten-Ausgaben** – Ergebnisse aus delegierten Aufgaben

    Die Chat-Ansicht behält den vollständigen Konversationsverlauf bei, sodass Sie durch frühere Interaktionen zurückscrollen können.
  </Tab>

  <Tab title="Eingabefeld">
    Der Eingabebereich unten mit Steuerelementen zum Erstellen von Anfragen:

    **Texteingabebereich:** Haupttextfeld zur Eingabe natürlichsprachlicher Prompts

    **Aktionsschaltflächen:**

    | Schaltfläche                   | Funktion                                                                                      |
    | ------------------------------ | --------------------------------------------------------------------------------------------- |
    | Kontext hinzufügen             | Dateien mit @-Erwähnungen referenzieren oder Subagenten aufrufen                              |
    | Bilder oder Dateien hinzufügen | Screenshots, Diagramme oder Dokumente zur Analyse einbeziehen                                 |
    | Subagent hinzufügen            | Aufgaben an spezialisierte Subagenten delegieren                                              |
    | Modus wechseln                 | Zwischen Agent-, Plan- und Chat-Modus umschalten                                              |
    | KI-Modell wechseln/anpassen    | Voreinstellungen Performance, Balance, Efficiency oder bestimmte Modelle auswählen            |
    | Think Hard Mode                | Maximales Denkbudget für komplexe Überlegungen aktivieren                                     |
    | Berechtigung wechseln          | Berechtigungsmodus ändern (Manuelle Bestätigung, Auto-Run, Plan, Berechtigungen überspringen) |
    | Senden                         | Ihren Prompt an das KI-Modell übermitteln                                                     |
  </Tab>
</Tabs>

***

## Statusanzeigen [#statusanzeigen]

Verdent kommuniziert den Systemstatus über visuelle Anzeigen:

<Tabs>
  <Tab title="Status der Chat-Ansicht">
    Die Chat-Ansicht vermittelt den Status durch visuelle Hinweise anstatt durch explizite Beschriftungen:

    * **Verarbeitungsanzeige** – Eine visuelle Anzeige erscheint, wenn Verdent aktiv arbeitet. Dies zeigt sich, wenn die KI Dateien liest, Code analysiert oder eine Antwort vorbereitet.
    * **Text wird generiert** – Sie sehen die Antwort von Verdent in Echtzeit erscheinen, während die KI Erklärungen, Code-Vorschläge oder Pläne verfasst. Der gestreamte Text zeigt an, dass das Modell aktiv Ausgaben generiert.
    * **Keine Aktivität** – Wenn die Chat-Ansicht statisch ist und keine Aktivität zeigt, wartet Verdent. Das bedeutet, dass Sie Dateiänderungen genehmigen, klärende Fragen beantworten oder Ihre nächste Anfrage stellen müssen.
  </Tab>

  <Tab title="Textcursor">
    Der Textcursor im Eingabefeld zeigt an, ob Verdent bereit ist, neue Anfragen anzunehmen:

    * **Blinkender Cursor** – Das Eingabefeld ist aktiv und bereit für Texteingaben. Sie können Ihre Anfrage eingeben und auf Senden klicken. Dies erscheint, wenn Verdent die Verarbeitung abgeschlossen hat und auf Ihren nächsten Prompt wartet.
    * **Kein Cursor/Deaktiviert** – Das Eingabefeld ist deaktiviert, während Verdent eine Anfrage verarbeitet. Dies verhindert Unterbrechungen der aktuellen Aufgabe und stellt sicher, dass jede Anfrage abgeschlossen wird, bevor eine neue beginnt.

    **Ablaufmuster:** Wenn Sie eine Anfrage senden, verschwindet der Cursor (die Eingabe wird deaktiviert). Sobald Verdent die Aufgabe abgeschlossen hat, erscheint der Cursor wieder und signalisiert, dass Sie Ihre nächste Anfrage eingeben können.
  </Tab>

  <Tab title="Modusanzeigen">
    Das Eingabefeld zeigt Anzeigen für Ihre aktuelle Konfiguration:

    * **Schaltfläche „Berechtigung wechseln“** – Zeigt Ihren aktuellen Berechtigungsmodus als Beschriftung direkt auf der Schaltfläche an. Sie sehen „Manuell“, „Auto“, „Plan“ oder „Überspringen“. So können Sie bestätigen, welcher Ausführungsmodus aktiv ist, bevor Sie Ihre Anfrage senden. Klicken Sie auf die Schaltfläche, um durch die verfügbaren Modi zu wechseln.
    * **Schaltfläche „KI-Modell wechseln/anpassen“** – Zeigt das aktuell ausgewählte Modell oder die Voreinstellung an. Sie sehen „Performance“, „Balance“ oder „Efficiency“ für Voreinstellungen oder bestimmte Modellnamen wie „Claude 4.5 Sonnet“, wenn Sie ein einzelnes Modell ausgewählt haben. Dies bestätigt, welches KI-Modell Ihre nächste Anfrage verarbeiten wird.

    Diese Anzeigen bieten auf einen Blick eine Bestätigung Ihrer aktuellen Einstellungen und helfen Ihnen, die richtige Konfiguration vor dem Senden von Prompts sicherzustellen.
  </Tab>
</Tabs>

<Note>
  Statusanzeigen aktualisieren sich in Echtzeit, um genau zu zeigen, was Verdent gerade tut, damit Sie die Aktivität des Agenten besser verstehen.
</Note>

***

## Navigationsmuster [#navigationsmuster]

<Tabs>
  <Tab title="Navigation in der oberen Leiste">
    Die obere Leiste verwendet je nach Funktion unterschiedliche Navigationsmuster:

    **Schaltflächen:**

    * **Neue Sitzung** – Ein Klick auf diese Schaltfläche löscht sofort Ihre aktuelle Konversation und führt Sie zurück zu einer neuen Chat-Ansicht mit sauberem Kontext. Es gibt keine separate Seite oder ein Popup; dies geschieht unmittelbar in derselben Ansicht.

    **Seiten:**

    * **Projektverlauf** – Öffnet eine eigene Vollbildansicht, in der Sie alle Ihre früheren Sitzungen und Konversationen durchsuchen können. Dies führt Sie von der Chat-Ansicht weg, um Ihren Sitzungsverlauf anzuzeigen. Klicken Sie auf die Schaltfläche **X**, um zur Chat-Ansicht zurückzukehren.

    **Popups (Overlay-Dialoge):**

    * **Benutzerbereich** – Öffnet ein Overlay-Popup mit Ihren Kontoinformationen, Ihrem Credit-Guthaben und Nutzungsdetails. Die Chat-Ansicht bleibt hinter dem Popup sichtbar.
    * **Feedback** – Öffnet ein Overlay-Popup mit einem Formular zum Senden von Feedback und Melden von Problemen. Die Chat-Ansicht bleibt im Hintergrund.

    Um Popups zu schließen, klicken Sie entweder außerhalb des Popup-Bereichs oder verwenden Sie die Schaltfläche **X** in der Ecke des Popups.

    **Dropdown-Menüs:**

    * **Einstellungen** – Öffnet ein Inline-Dropdown-Menü mit Optionen für MCP-Server, Subagenten, Regeln und Modell-Voreinstellungen. Wenn Sie eine Option aus dem Menü auswählen (z. B. „MCP Servers“), öffnet sich eine eigene Vollbildansicht für diese Konfiguration. Klicken Sie auf die Schaltfläche **X**, um zur Chat-Ansicht zurückzukehren.
  </Tab>

  <Tab title="Navigation im Eingabefeld">
    Alle Schaltflächen im Eingabefeld öffnen Dropdown-Menüs für eine schnelle Inline-Konfiguration:

    **Dropdown-Menü-Muster:** Jede Schaltfläche im Eingabefeld (Kontext hinzufügen, Bilder oder Dateien hinzufügen, Subagent hinzufügen, Modus wechseln, KI-Modell wechseln/anpassen, Think Hard Mode, Berechtigung wechseln) öffnet ein Dropdown-Menü direkt unterhalb der Schaltfläche. Diese Menüs ermöglichen es Ihnen, Ihre Anfrage zu konfigurieren, ohne die Chat-Ansicht zu verlassen.

    **Warum Dropdowns:** Dieses Design hält Sie für alle gängigen Vorgänge in der Chat-Ansicht verankert. Sie können Einstellungen anpassen, Modelle auswählen, Modi ändern und Kontext hinzufügen, ohne den Überblick über Ihre Konversation zu verlieren oder Ihren Arbeitsablauf zu unterbrechen.

    **Schließen von Dropdowns:** Dropdown-Menüs schließen sich automatisch, wenn Sie eine Auswahl treffen oder irgendwo außerhalb des Menüs klicken. So können Sie Einstellungen schnell konfigurieren und zur Erstellung Ihrer Anfrage zurückkehren.
  </Tab>

  <Tab title="Zurück zur Chat-Ansicht">
    Verschiedene Navigationselemente verwenden unterschiedliche Methoden, um zur Haupt-Chat-Ansicht zurückzukehren:

    **Von Seiten (Projektverlauf, Einstellungen):**

    * Klicken Sie auf die Schaltfläche **X** in der oberen Ecke der Seite
    * Dies führt Sie zur Chat-Ansicht zurück, an der Stelle, an der Sie sie verlassen haben

    **Von Popups (Benutzerbereich, Feedback):**

    * Klicken Sie auf die Schaltfläche **X** in der Ecke des Popups, oder
    * Klicken Sie irgendwo außerhalb des Popup-Overlays
    * Die Chat-Ansicht war stets hinter dem Popup sichtbar, sodass das Schließen des Popups sofort den Fokus zurückgibt

    **Von Dropdown-Menüs:**

    * Menüs schließen sich automatisch, wenn Sie eine Auswahl treffen
    * Klicken Sie irgendwo außerhalb des Menüs, um es ohne Auswahl zu schließen
    * Sie verlassen die Chat-Ansicht nie, daher gibt es nichts, „wozu zurückzukehren“ wäre

    **Navigationsphilosophie:** Die meisten Interaktionen erfolgen über Dropdown-Menüs, die Sie in der Chat-Ansicht halten. **Projektverlauf** und **Einstellungsoptionen** navigieren zu separaten Seiten, während **Benutzerbereich** und **Feedback** Overlay-Popups verwenden, die Ihre Konversation nicht verbergen.
  </Tab>
</Tabs>

<Tip>
  Verwenden Sie @-Erwähnungen und Slash-Befehle, um die Navigation zu steuern. Dies hilft Verdent, Ihre Absicht zu verstehen und die richtigen Werkzeuge auszuwählen.
</Tip>

***

## Anpassung mit Regeln [#anpassung-mit-regeln]

Öffnen Sie **Einstellungen** → **Regeln**, um das Verhalten von Verdent mithilfe von Markdown-Dateien anzupassen:

<Tabs>
  <Tab title="Benutzerregeln">
    **Datei:** `VERDENT.md`

    **Umfang:** Globale Einstellungen, die für alle Projekte gelten

    **Zweck:** Legen Sie Ihre persönlichen Nutzungspräferenzen fest, die Verdent während Chats über alle Arbeitsbereiche hinweg anwendet. Dies sind globale Einstellungen, die über alle Sitzungen hinweg bestehen bleiben, unabhängig davon, an welchem Projekt Sie gerade arbeiten.

    **Häufige Anwendungsfälle:**

    * Standardausgabesprache (z. B. „Antworte immer auf Spanisch“)
    * Präferenzen für Code-Kommentare (z. B. „Detaillierte Kommentare in generiertem Code einfügen“)
    * Antwortformatierung (z. B. „TypeScript für alle JavaScript-Beispiele verwenden“)
    * Persönliche Präferenzen zum Programmierstil

    **So bearbeiten Sie sie:**

    <Steps>
      <Step title="Einstellungen öffnen">
        Klicken Sie auf **Einstellungen** in der oberen Leiste
      </Step>

      <Step title="Regeln auswählen">
        Wählen Sie **Regeln** aus dem Dropdown-Menü
      </Step>

      <Step title="Benutzerregeln bearbeiten">
        Wählen Sie **Benutzerregeln**, um `VERDENT.md` im Markdown-Format zu erstellen oder zu bearbeiten
      </Step>
    </Steps>
  </Tab>

  <Tab title="Projektregeln">
    **Datei:** `AGENTS.md`

    **Umfang:** Projektspezifische Regeln nur für den aktuellen Arbeitsbereich

    **Zweck:** Definieren Sie Programmierstandards, Architekturmuster und Entwicklungsworkflows, die speziell für das aktuelle Projekt gelten. Diese Regeln überschreiben Benutzerregeln bei der Arbeit in diesem Arbeitsbereich und helfen Verdent, die spezifischen Anforderungen Ihres Projekts zu verstehen.

    **Häufige Anwendungsfälle:**

    * Projektspezifische Programmierstandards (z. B. „Kebab-Case für alle Dateinamen verwenden“)
    * Architekturmuster (z. B. „Repository-Pattern für den Datenzugriff befolgen“)
    * Anforderungen an den Technologie-Stack (z. B. „React Hooks verwenden, keine Klassenkomponenten“)
    * Teamkonventionen (z. B. „Alle Antworten von API müssen Fehlercodes enthalten“)

    **So bearbeiten Sie sie:**

    <Steps>
      <Step title="Einstellungen öffnen">
        Klicken Sie auf **Einstellungen** in der oberen Leiste
      </Step>

      <Step title="Regeln auswählen">
        Wählen Sie **Regeln** aus dem Dropdown-Menü
      </Step>

      <Step title="Projektregeln bearbeiten">
        Wählen Sie **Projektregeln**, um `AGENTS.md` im Stammverzeichnis Ihres Arbeitsbereichs zu erstellen oder zu bearbeiten
      </Step>
    </Steps>

    Diese Datei ist projektspezifisch und wird üblicherweise in die Versionskontrolle übernommen.
  </Tab>

  <Tab title="Planregeln">
    **Datei:** `Plan.md`

    **Umfang:** Steuert das Ausgabeformat und den Inhalt von Plan Mode

    **Zweck:** Passen Sie an, welche Informationen in Plänen erscheinen, wie detailliert sie sind und welchem Format sie folgen, wenn Sie Plan Mode verwenden. Diese Regeln bestimmen die Struktur und den Inhalt der Pläne, die Verdent vor der Ausführung komplexer Aufgaben erstellt.

    **Häufige Anwendungsfälle:**

    * Detailgrad des Plans (z. B. „Zeitschätzungen für jeden Schritt einfügen“)
    * Planstruktur (z. B. „Immer einen Abschnitt ‚Risiken‘ einfügen“)
    * Inhaltliche Anforderungen (z. B. „Alle Dateien aufführen, die geändert werden“)
    * Ausgabeformat (z. B. „Nummerierte Listen für sequenzielle Schritte verwenden“)

    **So bearbeiten Sie sie:**

    <Steps>
      <Step title="Einstellungen öffnen">
        Klicken Sie auf **Einstellungen** in der oberen Leiste
      </Step>

      <Step title="Regeln auswählen">
        Wählen Sie **Regeln** aus dem Dropdown-Menü
      </Step>

      <Step title="Planregeln bearbeiten">
        Wählen Sie **Planregeln**, um `plan_rules.md` im Markdown-Format zu erstellen oder zu bearbeiten
      </Step>
    </Steps>
  </Tab>
</Tabs>

***

## Siehe auch [#siehe-auch]

<CardGroup cols="2">
  <Card title="Schnellstart" icon="rocket" href="/docs/verdent-for-vscode/getting-started/quick-start">
    Nutzen Sie die Oberfläche für Ihre erste Aufgabe
  </Card>

  <Card title="Konfigurationseinstellungen" icon="gear" href="/docs/verdent-for-vscode/configuration/settings">
    Passen Sie das Verhalten und die Präferenzen der Oberfläche an
  </Card>
</CardGroup>
