Membangun UI terminal kini jadi lebih mudah

 (hatchet.run)
22 poin oleh GN⁺ 2026-02-15 | 1 komentar | Bagikan ke WhatsApp
  • Memperkenalkan kasus tim Hatchet yang dengan cepat mengembangkan UI berbasis terminal (TUI) menggunakan Claude Code
  • Dengan memanfaatkan stack Charm (Bubble Tea, Lip Gloss, Huh), mereka mewujudkan pengembangan berbasis komponen setara React dan styling yang konsisten
  • Sambil tetap memakai API yang sama dengan UI web yang ada, mereka meningkatkan efisiensi developer lewat antarmuka berfokus teks dan padat informasi
  • Claude Code menjalankan sesi tmux dan mengotomatisasi pengujian, sehingga berperan besar dalam pengembangan iteratif dan menjaga stabilitas
  • Hatchet TUI yang selesai hanya dalam 2 hari dinilai sebagai contoh yang menunjukkan peningkatan produktivitas nyata dari pengembangan berbasis LLM

Motivasi pengembangan TUI

  • Tim Hatchet menginginkan TUI yang mirip dengan k9s, dan pengguna menilai ini lebih cepat dan lebih intuitif daripada UI web
    • Salah satu umpan balik pengguna menyebut bahwa “CLI dan TUI jauh lebih baik performanya”
  • TUI memungkinkan visualisasi dan eksekusi workflow di lingkungan yang sama dengan kode, sehingga tidak perlu berpindah tab
  • Karena pengguna utama Hatchet adalah developer yang bekerja di dalam IDE, tujuannya adalah menghadirkan pengalaman pengelolaan workflow langsung di terminal

Stack teknologi

  • Menggunakan stack Charm sebagai padanan untuk stack frontend umum (React, Tailwind, dll.)
    • Library utama: Bubble Tea, Lip Gloss, Huh
    • Dipelihara oleh tim Charm, dengan dokumentasi dan contoh yang melimpah
  • Memakai Lip Gloss dan tema Huh untuk menerapkan gaya yang konsisten di seluruh TUI
    • Tema yang sama juga dipakai ulang pada perintah Hatchet CLI untuk menghadirkan pengalaman pengguna yang terpadu
  • Kustomisasi di luar Bubble Tea agak sulit, tetapi jauh lebih sederhana daripada membangun sendiri engine rendering berbasis React

Pendekatan pengujian

  • Claude Code menjalankan langsung alat berbasis terminal untuk melakukan pengujian
    • Menggunakan tmux capture-pane untuk menangkap view yang dirender dan memverifikasi apakah output sudah benar
  • Pendekatan ini sangat efektif untuk otomatisasi first-pass testing, dan tetap dapat memverifikasi rendering dengan stabil meski jumlah view bertambah
  • Setelah itu, pengujian manual dan unit test dijalankan bersamaan untuk membentuk loop pengembangan iteratif yang stabil
  • Claude Code dioptimalkan untuk pekerjaan berulang di lingkungan ASCII, sehingga loop umpan balik pengujian cepat konvergen

Menyusun lingkungan pengembangan yang efisien

  • Claude Code meningkatkan efisiensi pengembangan dengan merujuk pada implementasi frontend Hatchet yang sudah ada
    • Memanfaatkan struktur komponen sederhana berbasis React dan spesifikasi OpenAPI untuk menetapkan batasan yang jelas
    • Dengan klien REST API yang dibuat otomatis, pengembangan berbasis spesifikasi menjadi memungkinkan
  • Implementasi renderer berbasis DAG adalah bagian yang paling sulit, namun
    • Dengan merujuk ke mermaid-ascii, mereka berhasil membangun renderer grafik ASCII
    • Meski belum sempurna, fungsi visualisasi DAG yang dapat digunakan berhasil diwujudkan

Hasil dan pelajaran

  • Total waktu pengembangan sekitar 2 hari, jauh lebih cepat dan lebih stabil dibanding refactoring frontend sebelumnya
  • Pengembangan dengan Claude Code dinilai sebagai contoh pertama yang menunjukkan peningkatan produktivitas yang nyata dan non-acak
  • Ke depannya, tim Hatchet berencana secara bertahap memperluas pengembangan berbasis LLM ke fitur di jalur non-inti
  • Pelajaran utamanya adalah pentingnya loop umpan balik yang singkat, modularitas, desain berbasis spesifikasi, dan pengujian berkelanjutan
  • Hatchet TUI yang telah selesai tersedia di https://tui.hatchet.run, dan saat ini sedang mengumpulkan umpan balik pengguna

Bacaan terkait

1 komentar

 
GN⁺ 2026-02-15
Komentar Hacker News

  • Ada ironi ketika halaman web membahas performa terminal UI, tetapi justru scrolling-nya patah-patah di laptop Dell XPS berperforma tinggi milik saya karena efek rumit seperti CSS mask compositing atau cubic gradient
    Menurut Gemini, ini adalah “Scrim atau Easing Gradient”, yang memakai 16 color stop untuk membuat fade halus, tetapi akibatnya jutaan piksel harus dihitung ulang warnanya setiap kali scroll
    Di Firefox, sebagian besar halaman bisa di-scroll dengan mulus, jadi disarankan untuk mengujinya juga di laptop hiDPI berbasis iGPU non-Mac
    Sebagai referensi, ada juga gambar dengan gradient dinonaktifkan — tautan

    • Benar juga. Saya akan mempertimbangkan untuk menghapus efek itu dulu lalu meningkatkan performa, atau menghilangkannya sepenuhnya. Terima kasih atas masukannya
    • Dibilang “setingkat Commodore 64” itu keterlaluan. C64 sebenarnya bisa scrolling mulus
    • Ada yang membagikan cara membaca di Firefox atau browser lain tanpa CSS atau JS. Ia menunjukkan skrip sederhana yang memakai busybox ssl_client dan grep untuk mengekstrak HTML lalu membukanya di Firefox
    • Terlihat jelas betapa seringnya Claude Code disebut dalam tulisan blog itu
    • Jangan salahkan Commodore 64 saya. Begitu program selesai dimuat, ia berjalan sangat mulus di 50~60Hz

  • Menurut saya, upaya membuat TUI terlihat seperti GUI itu agak menyedihkan. Aksesibilitasnya buruk, strukturnya jadi datar, dan pengguna tidak bisa memakainya di luar cara yang sudah ditentukan. Sebaliknya, GUI modern terhubung secara struktural dengan OS dan jauh lebih fleksibel

    • Saya tidak setuju. Di beberapa ranah masalah, TUI jauh lebih cocok. Misalnya dialog konfigurasi paket Debian jauh lebih nyaman daripada teks polos, dan tetap bekerja baik lewat SSH maupun serial console. Ini juga berguna saat butuh informasi visual seperti alat yang menampilkan grafik CPU
    • Saya memakai TUI karena saya suka tidak perlu memasang aplikasi Electron lagi. Ringan, dan tidak memboroskan sumber daya dengan browser tertanam
    • Saya merasa keterbatasan TUI justru meningkatkan fokus desainer UI. Aplikasi zaman sekarang sering menyembunyikan menu sehingga merepotkan, sedangkan TUI jelas
    • Saya suka semua berjalan di dalam terminal. Workflow saya berpusat pada multiplexer seperti tmux, jadi kalau ada jendela terpisah muncul alurnya jadi terputus. Keterbatasan justru memberi kesederhanaan dan konsistensi
    • Contoh seperti Emacs, Vim, mc, htop, dan mutt menunjukkan bahwa TUI sudah cukup kuat. Tidak semua UI harus penuh jendela

  • Pengembangan TUI sekarang jauh lebih mudah dibanding dulu. Ini berkat framework seperti BubbleTea, Textualize, dan Ratatui.
    Berkat LLM, alat seperti ini kini bisa dibuat dengan cepat, dan saya sedang memelihara library chart TUI bernama NTCharts
    Saya menyelesaikan bug berkat kemampuan pemahaman ruang Gemini, dan sekarang sedang membuat viewer percakapan LLM lokal dengan BubbleTea
    Tautan terkait: issue NTCharts, proyek thinkt

  • Saya tidak mengerti obsesi TUI dalam aplikasi LLM. Melihat Copilot di VS2026, GUI bisa menampilkan jauh lebih banyak informasi dengan cepat. Diff bisa diklik dan diperiksa secara real-time, jadi lebih efisien

    • Saya memakai VSCode, dan sejak sidebar AI agent bisa dibuka sebagai jendela terpisah, rasanya jauh lebih nyaman daripada Claude Code. Kepadatan dan presisi informasi visualnya jauh lebih tinggi daripada TUI
    • Alasannya sederhana. TUI adalah cara paling sederhana untuk cepat menaruh UI di atas file system. Jika memakai teknologi web, Anda butuh browser dan server
    • Fitur Claude Code bagus, tetapi UI pratinjau diff AI di VSCode terasa jauh lebih baik. Hanya saja versi integrasi barunya masih banyak bug
    • Sebenarnya ini semacam LARP(roleplay). Hanya tindakan simbolis agar terlihat seperti “hacker sungguhan”, padahal sebenarnya cuma aplikasi web yang dibuat dengan React/CSS

  • Di era ketika LLM menghabiskan sumber daya komputasi, justru ini menjadi pemicu untuk membuat alat dengan stack ringan.
    Dengan menulisnya dalam C, performa CPU meningkat ribuan kali lipat dan RAM berkurang setengah. TUI adalah contoh bagus dari efisiensi semacam ini

    • Meski begitu, GUI native atau framework seperti Flutter mungkin masih bisa berkinerja lebih baik daripada TUI
    • Sulit membayangkan seberapa besar optimisasi bisa mengimbangi energi yang dipakai untuk melatih LLM
    • TUI juga bagus untuk mengurangi dependensi. Dulu perlu 100 paket npm, sekarang 200 baris JS sudah cukup

  • Saya masih menganggap Midnight Commander(mc) sebagai salah satu TUI terbaik. Fungsinya hampir setara dengan versi GUI-nya, Double Commander, sambil tetap bisa dijalankan secara remote.
    Saat ini saya sedang mengerjakan skin baru, dan berharap itu masuk rilis berikutnya

    • Secara pribadi saya merasa Far Manager atau Dos Navigator lebih stabil
    • Terima kasih kepada para pengembang mc

  • Gemini membuatkan TUI untuk proyek DHT scraper saya — gambar
    Versi pertamanya perlu diperbaiki karena masalah karakter CJK, tetapi secara keseluruhan sangat mengesankan. Berkat itu saya bisa fokus pada algoritma

    • Penasaran library apa yang dipakai
    • Saya tertarik pada proyek terkait DHT. Ingin tahu bagaimana itu dimanfaatkan di mesin pencari dan sebagainya
    • Memastikan bahwa “DHT” berarti Distributed Hash Table. Dinilai sebagai TUI yang keren

  • Saya kurang paham apa yang membuat TUI lebih baik daripada web form atau GUI. Sebaliknya, saya merasa komposisi pipeline CLI sangat kuat

    • Beberapa lembaga (NSA, CSE, GCHQ, dll.) melarang web admin UI demi keamanan. Karena itu produk kami dikelola lewat TUI berbasis konsol lokal atau SSH. Kami memakai pengaturan SELinux MAC yang sangat ketat
    • TUI nyaman untuk aplikasi yang berjalan berdampingan dengan CLI. Mudah membagi jendela dengan tmux/zellij, dan perbedaan UI antar-OS juga lebih sedikit
    • TUI sangat berguna terutama di lingkungan SSH. Bahkan bekerja baik di klien SSH smartphone
    • Gemini membuatkan TUI untuk proyek C# saya, tetapi belakangan malah menyarankan bahwa Kestrel webserver tertanam akan lebih baik. Ternyata itu benar
    • TUI menyediakan keybinding yang baik, dan bisa diakses langsung dari lokasi tempat perintah dijalankan, jadi cocok untuk pekerjaan cepat

  • Saya suka Claude Code, tetapi struktur TUI berbasis React terasa sangat tidak efisien

    • Terutama saat scroll teks panjang, penurunan performa sangat terasa. Rasanya memang dari awal dibangun seperti ini, dan saya penasaran kenapa sulit diperbaiki
    • Jika rendering memang sudah dilakukan dengan JS, mungkin masuk akal memakai React sebagai mesin rekonsiliasi

  • Saya membuat frontend prompt sendiri berbasis Cursor CLI — gambar
    Saya mengintegrasikan git, diff, dan riwayat chat, serta membuatnya mudah diakses dari ponsel melalui Tailscale.
    Ia bisa mengenali aturan saya dan melakukan grep pada proyek, jadi kegunaannya sangat tinggi