Diff Review

Coding-Agenten ändern mehrere Dateien auf einmal, und Leute müssen einen Teil behalten und den Rest verwerfen. Diff Review legt jede Änderung in eine scrollende Liste mit einem Dateibaum daneben, sodass du eine einzelne Änderung, eine ganze Datei oder alles per Maus oder Tastatur annehmen oder ablehnen kannst. DiffSummary ist die Card „4 Dateien bearbeitet +120 −34“ für den Chat, mit denselben Aktionen für jede Datei.

Jede Entscheidung betrifft genau eine Änderung. Eine entschiedene Änderung klappt zu einem einzeiligen Stub mit ihrem Ergebnis, Show und Undo zusammen, und eine Datei klappt weg, sobald jede Änderung darin entschieden ist. Sammelaktionen sagen, wie viele Änderungen sie abdecken, und jede Entscheidung, auch Accept all und Reject all, lässt sich mit U oder ⌘Z rückgängig machen. „Next“ meint immer die nächste Änderung, die du noch nicht entschieden hast. Die Zähler und der Fortschrittsbalken stammen aus dem, was noch aussteht, sodass das Review mit einem klaren „All reviewed“ endet.

Fahre über eine Zeile und drücke + in der Rinne, oder fokussiere eine Zeile und drücke Enter oder C, um sie zu kommentieren. Ziehe oder klicke mit Shift auf Zeilennummern, oder nutze Shift+↑↓, um einen Bereich zu kommentieren. Der Composer öffnet sich als kleines Popover unter der Zeile, und ein gesendeter Kommentar bleibt als Thread an der Zeile, den du bearbeiten, mit Undo löschen oder einklappen kannst, mit einer Zahl in der Rinne. Entfernte Zeilen werden auf der alten Seite gemeldet, hinzugefügte oder unveränderte Zeilen auf der neuen, sodass die Zeilennummern immer zur Datei passen.

Übergib einen Unified Diff oder den Inhalt davor und danach und lass den Block den Diff berechnen. Mit dem vollständigen Inhalt kannst du die unveränderten Zeilen zwischen Änderungen anzeigen, je 20 nach oben oder unten, oder alle auf einmal, wenn weniger als 20 verborgen sind. Entfernte Zeilen tragen in der Rinne einen feinen gestreiften Balken, hinzugefügte einen durchgehenden, sodass der Unterschied nie von Farbe abhängt. Zeilen werden wie bei Code Block mit Shiki hervorgehoben, und geänderte Wörter innerhalb einer Zeile werden markiert, wenn sich die beiden Zeilen ähnlich genug sind, dass es hilft. Das Layout wechselt zur Split-Ansicht, wenn Platz ist, standardmäßig ab mindestens 900 px. Dateien, die noch streamen, werden live angezeigt und können noch nicht entschieden werden. Dateien, die sich auf der Platte geändert haben, können abgelehnt, aber nicht angenommen werden. Diffs mit über 400 geänderten Zeilen warten hinter Load diff, und ihre Aktionen auf Dateiebene funktionieren weiter.

1. 1

   Die Pro-Registry zu components.json hinzufügen

   {
     "registries": {
       "@hextaui-pro": {
         "url": "https://hextaui.com/r/pro/{name}.json",
         "headers": {
           "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
         }
       }
     }
   }

2. 2

   Token hinzufügen

   Erstelle auf deiner Kontoseite einen Token und trage ihn in .env.local als HEXTAUI_PRO_TOKEN ein.

3. 3

   Den Block hinzufügen

   pnpmnpmyarnbun

   pnpm dlx shadcn@latest add @hextaui-pro/diff-review

• Das Review ist eine Region namens „Review changes“. Jede Änderung ist eine Gruppe mit vollständigem Namen, etwa „Änderung 2 von 9, app/page.tsx, Zeilen 40–52, 3 Zeilen hinzugefügt, 1 Zeile entfernt, ausstehend“.
• Entscheidungen, Sammelaktionen und Undo werden über eine höfliche Live-Region mit dem Rest angesagt, zum Beispiel „Änderung 2 von 9 in app/page.tsx angenommen. 7 Änderungen übrig.“
• Tastenkürzel funktionieren nur, solange der Fokus im Review liegt. In Textfeldern werden sie ignoriert, und Buchstaben im Dateibaum springen nach Name zu Dateien. Nach einer Entscheidung per Tastatur springt der Fokus zur nächsten ausstehenden Änderung. Nach einem Klick springt er an derselben Stelle zum Undo-Button.
• Hinzugefügte und entfernte Zeilen werden als „Hinzugefügt:“ und „Entfernt:“ vorgelesen, sodass sie sich nicht auf Farbe verlassen. Geänderte Wörter sind im Hochkontrastmodus unterstrichen, und der Fortschritt wird zusätzlich als Progressbar bereitgestellt.
• Gefaltete Änderungen sind inert, werden also von Tab und Screenreadern übersprungen, bis du sie zeigst. Bei reduzierter Bewegung aktualisieren sich Falten, Zähler und Fortschritt ohne Animation.
• Die Zeilen jeder Änderung bilden einen Tab-Stopp mit Roving Focus, wie ein Grid. Die fokussierte Zeile zeigt eine Tönung und ein + in der Rinne, und der Forced-Colors-Modus zeichnet stattdessen eine Kontur.
• Beim Öffnen des Composers springt der Fokus hinein, und die Zeile bleibt hervorgehoben. Esc gibt den Fokus sichtbar an die Zeile zurück. Nach dem Senden oder Wegklicken geht der Fokus ohne Fokusanzeige zur Zeile zurück, sodass die nächste Pfeiltaste von dort weitermacht.
• Entfernte und hinzugefügte Zeilen tragen neben den Zeichen − und + einen gestreiften oder durchgehenden Rinnenbalken, und die Balken bleiben im Forced-Colors-Modus sichtbar.
• Hinzufügen, Bearbeiten, Löschen und Wiederherstellen von Kommentaren werden angesagt, und gelöschte Kommentare lassen sich einige Sekunden lang wiederherstellen.

• Avatar
• Bubble
• Button
• Card
• Dropdown menu
• Empty
• Input group
• Kbd
• Message
• Message scroller
• Number flow
• Popover
• Resizable
• Sheet
• Spinner
• Toggle group
• Tooltip
• Tree