- Der Hatchet-Teams stellt einen Fall vor, in dem es mit Claude Code schnell eine terminalbasierte UI (TUI) entwickelt hat
- Mit dem Charm-Stack (Bubble Tea, Lip Gloss, Huh) wurden komponentenbasierte Entwicklung auf React-Niveau und konsistentes Styling umgesetzt
- Trotz derselben API wie in der bestehenden Web-UI steigert eine textzentrierte, informationsdichte Oberfläche die Effizienz für Entwickler
- Claude Code startet
tmux-Sitzungen und automatisiert Tests, was bei iterativer Entwicklung und der Absicherung der Stabilität eine große Rolle spielt
- Die in nur zwei Tagen fertiggestellte Hatchet-TUI wird als Beispiel dafür bewertet, dass LLM-basierte Entwicklung die Produktivität praktisch steigert
Motivation für die TUI-Entwicklung
- Das Hatchet-Team wollte eine TUI ähnlich k9s; Nutzer bewerteten sie als schneller und intuitiver als eine Web-UI
- In Nutzerfeedback hieß es unter anderem: „CLI und TUI sind deutlich performanter“
- Eine TUI ermöglicht es, Workflows in derselben Umgebung wie der Code zu visualisieren und auszuführen, sodass kein Wechsel zwischen Tabs nötig ist
- Da die wichtigsten Hatchet-Nutzer Entwickler sind, die innerhalb ihrer IDE arbeiten, war das Ziel, ein Workflow-Management-Erlebnis direkt im Terminal bereitzustellen
Technologie-Stack
- Verwendet wurde der Charm-Stack als Gegenstück zu einem typischen Frontend-Stack (React, Tailwind usw.)
- Wichtige Bibliotheken: Bubble Tea, Lip Gloss, Huh
- Sie werden vom Charm-Team gepflegt und bieten umfangreiche Dokumentation und viele Beispiele
- Mit Lip Gloss und Huh-Themes wurde über die gesamte TUI hinweg ein konsistenter Stil angewendet
- Dasselbe Theme wurde auch für Hatchet-CLI-Befehle wiederverwendet, um eine einheitliche User Experience zu bieten
- Eigene Anpassungen außerhalb von Bubble Tea sind etwas schwieriger, aber deutlich einfacher, als selbst eine React-basierte Rendering-Engine zu bauen
Testansatz
- Claude Code führt terminalbasierte Tools direkt aus und übernimmt die Tests
- Mit
tmux capture-pane werden gerenderte Ansichten erfasst und auf korrekte Ausgabe geprüft
- Dieser Ansatz war sehr effektiv für die Automatisierung des ersten Testdurchlaufs; auch bei einer wachsenden Zahl von Views ließ sich das Rendering stabil überprüfen
- Danach wurden manuelle Tests und Unit-Tests kombiniert, um eine stabile iterative Entwicklungsschleife zu schaffen
- Claude Code ist für wiederholte Aufgaben in einer ASCII-Umgebung optimiert, wodurch sich die Test-Feedback-Schleife schnell einpendelt
Aufbau einer effizienten Entwicklungsumgebung
- Claude Code erhöhte die Entwicklungseffizienz, indem es die bestehende Hatchet-Frontend-Implementierung als Referenz nutzte
- Die einfache, React-basierte Komponentenstruktur und die OpenAPI-Spezifikation halfen dabei, klare Grenzen zu definieren
- Über den automatisch generierten REST-API-Client war spezifikationsbasierte Entwicklung möglich
- Die Implementierung eines DAG-basierten Renderers war der schwierigste Teil,
- mit Verweis auf mermaid-ascii wurde jedoch erfolgreich ein ASCII-Graph-Renderer umgesetzt
- Nicht perfekt, aber mit einer funktionsfähigen DAG-Visualisierung
Ergebnisse und Erkenntnisse
- Die gesamte Entwicklungszeit betrug etwa zwei Tage und war damit deutlich schneller und stabiler als ein früheres Frontend-Refactoring
- Die Entwicklung mit Claude Code wird als erster Fall bewertet, der eine nicht zufällige und praktische Produktivitätssteigerung gezeigt hat
- Das Hatchet-Team plant, LLM-basierte Entwicklung künftig schrittweise auch auf nicht zum Kernpfad gehörende Funktionen auszuweiten
- Die wichtigste Lehre ist die Bedeutung von kurzen Feedback-Schleifen, Modularisierung, spezifikationsbasierter Gestaltung und kontinuierlichem Testen
- Die fertige Hatchet-TUI ist unter https://tui.hatchet.run verfügbar; derzeit wird Nutzerfeedback gesammelt
Noch keine Kommentare.