การสร้าง Terminal UI ตอนนี้ง่ายขึ้นแล้ว

 (hatchet.run)
22 คะแนน โดย GN⁺ 2026-02-15 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • แนะนำกรณีศึกษาที่ทีม Hatchet พัฒนา เทอร์มินัลเบส UI (TUI) ได้อย่างรวดเร็วด้วย Claude Code
  • ใช้ Charm stack (Bubble Tea, Lip Gloss, Huh) เพื่อทำการพัฒนาแบบคอมโพเนนต์ในระดับเดียวกับ React และจัดสไตล์ได้อย่างสม่ำเสมอ
  • ใช้ API เดียวกับเว็บ UI เดิม แต่เพิ่มประสิทธิภาพให้แก่นักพัฒนาด้วย อินเทอร์เฟซที่เน้นข้อความและมีข้อมูลหนาแน่น
  • Claude Code รันเซสชัน tmux และทำการทดสอบอัตโนมัติ จึงมีบทบาทสำคัญทั้งในด้านการพัฒนาแบบวนซ้ำและการรักษาเสถียรภาพ
  • Hatchet TUI ที่เสร็จสมบูรณ์ภายในเวลาเพียง 2 วัน ถูกประเมินว่าเป็นกรณีศึกษาที่แสดงให้เห็นถึง การยกระดับผลิตภาพจากการพัฒนาด้วย LLM อย่างเป็นรูปธรรม

แรงจูงใจในการพัฒนา TUI

  • ทีม Hatchet ต้องการ TUI ในลักษณะคล้ายกับ k9s และผู้ใช้ประเมินว่าสิ่งนี้ เร็วและเข้าใจได้ตรงไปตรงมามากกว่าเว็บ UI
    • ในบรรดาฟีดแบ็กจากผู้ใช้ มีความเห็นว่า “CLI และ TUI มีประสิทธิภาพดีกว่ามาก”
  • TUI ช่วยให้สามารถมองเห็นและรันเวิร์กโฟลว์ได้ ในสภาพแวดล้อมเดียวกับโค้ด จึงไม่จำเป็นต้องสลับแท็บ
  • เนื่องจากผู้ใช้หลักของ Hatchet คือนักพัฒนาที่ทำงานอยู่ใน IDE เป้าหมายจึงคือการมอบ ประสบการณ์จัดการเวิร์กโฟลว์ภายในเทอร์มินัล

เทคโนโลยีสแตก

  • ใช้ Charm stack ซึ่งสอดคล้องกับฟรอนต์เอนด์สแตกทั่วไปอย่าง React, Tailwind เป็นต้น
    • ไลบรารีหลัก: Bubble Tea, Lip Gloss, Huh
    • ทีม Charm เป็นผู้ดูแลรักษา และมีเอกสารกับตัวอย่างที่ครบถ้วน
  • ใช้ Lip Gloss และ Huh theme เพื่อให้สไตล์ของ TUI ทั้งระบบมีความสม่ำเสมอ
    • นำธีมเดียวกันไปใช้ซ้ำกับคำสั่ง Hatchet CLI ด้วย เพื่อมอบ ประสบการณ์ผู้ใช้ที่เป็นหนึ่งเดียว
  • แม้การปรับแต่งนอกเหนือจาก Bubble Tea จะค่อนข้างยากอยู่บ้าง แต่ก็ ง่ายกว่าการสร้างเอนจินเรนเดอร์แบบ React ขึ้นมาเองมาก

แนวทางการทดสอบ

  • Claude Code รันเครื่องมือแบบเทอร์มินัลโดยตรงเพื่อทำการทดสอบ
    • ใช้ tmux capture-pane เพื่อจับภาพวิวที่เรนเดอร์แล้วและตรวจสอบว่าผลลัพธ์ถูกต้องหรือไม่
  • วิธีนี้มีประสิทธิภาพมากสำหรับ การทำให้เทสต์พาสแรกเป็นอัตโนมัติ และแม้วิวจะเพิ่มจำนวนมากขึ้นก็ยังตรวจสอบการเรนเดอร์ได้อย่างเสถียร
  • จากนั้นจึงทำการทดสอบแบบแมนนวลและยูนิตเทสต์ควบคู่กัน เพื่อสร้าง ลูปการพัฒนาแบบวนซ้ำที่เสถียร
  • Claude Code เหมาะอย่างยิ่งกับงานที่ทำซ้ำในสภาพแวดล้อม ASCII จึงทำให้ลูปฟีดแบ็กจากการทดสอบบรรจบได้อย่างรวดเร็ว

การจัดสภาพแวดล้อมการพัฒนาอย่างมีประสิทธิภาพ

  • Claude Code เพิ่มประสิทธิภาพในการพัฒนาโดยอ้างอิงจาก ฟรอนต์เอนด์อิมพลีเมนเทชันเดิมของ Hatchet
    • ใช้โครงสร้างคอมโพเนนต์ที่เรียบง่ายบนพื้นฐาน React และสเปก OpenAPI เพื่อกำหนดขอบเขตได้อย่างชัดเจน
    • สามารถทำ การพัฒนาตามสเปก ได้ผ่าน REST API client ที่สร้างอัตโนมัติ
  • การสร้างเรนเดอเรอร์บนพื้นฐาน DAG เป็นส่วนที่ยากที่สุด แต่
    • อ้างอิง mermaid-ascii และสร้าง ASCII graph renderer ได้สำเร็จ
    • แม้ยังไม่สมบูรณ์แบบ แต่ก็มี ฟังก์ชันการแสดงภาพ DAG ที่ใช้งานได้จริง

ผลลัพธ์และบทเรียน

  • ระยะเวลาพัฒนาทั้งหมดอยู่ที่ ประมาณ 2 วัน ซึ่งเร็วกว่าและเสถียรกว่าการรีแฟกเตอร์ฟรอนต์เอนด์ครั้งก่อนมาก
  • การพัฒนาด้วย Claude Code ถูกประเมินว่าเป็นกรณีแรกที่แสดงให้เห็นถึง การเพิ่มผลิตภาพอย่างเป็นรูปธรรมและไม่ใช่เรื่องบังเอิญ
  • ทีม Hatchet มีแผนจะค่อย ๆ ขยายการพัฒนาบนฐาน LLM ไปยัง ฟีเจอร์ที่ไม่ใช่เส้นทางหลัก ต่อไป
  • บทเรียนสำคัญคือความสำคัญของ ลูปฟีดแบ็กที่สั้น, ความเป็นโมดูล, การออกแบบตามสเปก, และการทดสอบอย่างต่อเนื่อง
  • Hatchet TUI ที่เสร็จสมบูรณ์เปิดเผยแล้วที่ https://tui.hatchet.run และกำลังรวบรวมฟีดแบ็กจากผู้ใช้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-02-15
ความเห็นจาก Hacker News

  • เป็นเรื่องน่าขันที่หน้าเว็บพูดถึง ประสิทธิภาพของ Terminal UI แต่กลับมีอาการเลื่อนสะดุดแม้บนโน้ตบุ๊ก Dell XPS สเปกสูงของฉันเอง เพราะใช้เอฟเฟ็กต์ซับซ้อนอย่าง CSS mask compositing หรือ cubic gradient
    ตามที่ Gemini บอก นี่คือ “Scrim หรือ Easing Gradient” ซึ่งแทนที่จะสร้างการไล่จางอย่างนุ่มนวลด้วย color stop 16 จุด มันกลับต้องคำนวณสีของพิกเซลนับล้านใหม่ทุกครั้งที่เลื่อน
    บน Firefox หน้าเว็บส่วนใหญ่เลื่อนได้ลื่นดี จึงอยากแนะนำให้ลองทดสอบบน โน้ตบุ๊ก hiDPI ที่ใช้ iGPU ด้วย ไม่ใช่เฉพาะบน Mac
    อนึ่ง มีภาพเวอร์ชันที่ปิด gradient ไว้แล้วด้วย — ลิงก์

    • เห็นด้วย เดี๋ยวจะลองพิจารณาเอาเอฟเฟ็กต์นั้นออกเพื่อปรับปรุงประสิทธิภาพ หรือไม่ก็เอาออกไปเลย ขอบคุณสำหรับฟีดแบ็ก
    • บอกว่า “ระดับ Commodore 64” นี่แรงไปหน่อยนะ จริง ๆ แล้ว C64 เลื่อนภาพได้ลื่นมาก
    • มีคนแชร์วิธีอ่านบน Firefox หรือเบราว์เซอร์อื่นแบบ ไม่ใช้ CSS หรือ JS โดยเสนอเป็นสคริปต์ง่าย ๆ ที่ใช้ busybox ssl_client กับ grep เพื่อดึง HTML แล้วเปิดด้วย Firefox
    • ในโพสต์บล็อกนั้น มีการพูดถึง Claude Code บ่อยจนสังเกตได้ชัด
    • อย่าโทษ Commodore 64 ของฉันเลย พอโปรแกรมโหลดเสร็จแล้วมันทำงานได้ลื่นมากที่ 50~60Hz

  • ฉันคิดว่าความพยายามที่จะทำให้ TUI ดูเหมือน GUI มันค่อนข้างน่าเศร้า ทั้งเข้าถึงได้ยากกว่า และโครงสร้างก็แบนลงจนผู้ใช้ทำอะไรได้น้อยนอกจากวิธีที่กำหนดไว้ ขณะที่ GUI สมัยใหม่เชื่อมกับ OS ในเชิงโครงสร้าง เลยยืดหยุ่นกว่ามาก

    • ไม่เห็นด้วย ในบางปัญหา TUI เหมาะกว่ามาก ตัวอย่างเช่นกล่องโต้ตอบตั้งค่าแพ็กเกจ Debian ใช้งานสะดวกกว่าข้อความล้วนมาก และยังทำงานได้ดีผ่าน SSH หรือ serial console ด้วย แม้แต่ในกรณีที่ต้องแสดงข้อมูลเชิงภาพอย่างเครื่องมือดู กราฟ CPU ก็ยังมีประโยชน์
    • ฉันใช้ TUI เพราะชอบที่ไม่ต้องติดตั้ง แอป Electron เพิ่มอีกตัว มันเบากว่าและไม่ต้องฝังเบราว์เซอร์ไว้ข้างในให้เปลืองทรัพยากร
    • ฉันรู้สึกว่าข้อจำกัดของ TUI กลับช่วยเพิ่ม สมาธิของผู้ออกแบบ UI แอปสมัยนี้ชอบซ่อนเมนูจนใช้งานลำบาก แต่ TUI ชัดเจนกว่า
    • ฉันชอบที่ทุกอย่างรันอยู่ในเทอร์มินัล เวิร์กโฟลว์ของฉันยึด multiplexer อย่าง tmux เป็นหลัก ถ้ามีหน้าต่างแยกเด้งขึ้นมาจะทำให้จังหวะหลุด ข้อจำกัดนี่แหละที่ให้ทั้ง ความเรียบง่ายและความสม่ำเสมอ
    • ดูจากตัวอย่างอย่าง Emacs, Vim, mc, htop, mutt ก็เห็นได้ว่า TUI ทรงพลังพอสมควร ไม่ใช่ว่า UI ทุกอย่างจำเป็นต้องเปิดโล่งหมด

  • ทุกวันนี้ การพัฒนา TUI ง่ายขึ้นมาก เพราะมีเฟรมเวิร์กอย่าง BubbleTea, Textualize, Ratatui
    ด้วย LLM ตอนนี้เราสร้างเครื่องมือพวกนี้ได้เร็วขึ้น และฉันก็กำลังดูแล ไลบรารีกราฟสำหรับ TUI ชื่อ NTCharts อยู่
    อาศัยความเข้าใจเชิงพื้นที่ของ Gemini ในการแก้บั๊ก และตอนนี้ก็กำลังทำ ตัวดูบทสนทนา local LLM ด้วย BubbleTea
    ลิงก์ที่เกี่ยวข้อง: NTCharts issue, โปรเจกต์ thinkt

  • ฉันไม่เข้าใจเลยว่าทำไมถึง หมกมุ่นกับ TUI ในแอป LLM ดู Copilot ใน VS2026 ก็ได้ GUI แสดงข้อมูลได้มากกว่าและเร็วกว่าเยอะ คลิกดู diff แบบเรียลไทม์ได้จึงมีประสิทธิภาพกว่า

    • ฉันใช้ VSCode และพอสามารถแยก AI agent sidebar ออกเป็นอีกหน้าต่างได้ มันก็สะดวกกว่า Claude Code มาก ความหนาแน่นและความแม่นยำของข้อมูลเชิงภาพเหนือกว่า TUI มาก
    • เหตุผลง่ายมาก TUI คือ วิธีที่ง่ายที่สุด ในการครอบ UI ลงบน file system อย่างรวดเร็ว ถ้าจะทำด้วยเทคโนโลยีเว็บก็ต้องมีทั้งเบราว์เซอร์และเซิร์ฟเวอร์
    • ฟังก์ชันของ Claude Code นั้นดี แต่ฉันรู้สึกว่า UI แสดงตัวอย่าง AI diff ของ VSCode ดีกว่ามาก เพียงแต่เวอร์ชันรวมใหม่ยังมีบั๊กเยอะอยู่
    • จริง ๆ แล้วมันคล้าย LARP (การเล่นบทบาทสมมติ) อย่างหนึ่ง เป็นแค่การแสดงเชิงสัญลักษณ์ว่าเหมือน “แฮ็กเกอร์ตัวจริง” ทั้งที่ความจริงก็เป็นเว็บแอปที่ทำด้วย React/CSS

  • ในยุคที่ LLM กินทรัพยากรคอมพิวเตอร์มากขึ้น มันกลับกลายเป็นแรงผลักให้เราสร้าง เครื่องมือบนสแตกที่เบากว่า
    ฉันเขียนด้วย C แล้วเพิ่มประสิทธิภาพ CPU ได้เป็นพันเท่า และลด RAM ลงครึ่งหนึ่ง TUI เป็นตัวอย่างที่ดีของความมีประสิทธิภาพแบบนี้

    • ถึงอย่างนั้น native GUI หรือเฟรมเวิร์กอย่าง Flutter ก็อาจทำงานได้เร็วกว่าหรือมีประสิทธิภาพกว่า TUI ก็ได้
    • ก็ยังสงสัยว่าพลังงานที่ใช้ฝึก LLM จะถูกหักล้างด้วยการ optimize ได้มากแค่ไหน
    • TUI ยังดีในแง่ การลด dependency ด้วย เมื่อก่อนต้องใช้ npm package 100 ตัว แต่ตอนนี้ JS 200 บรรทัดก็พอแล้ว

  • ฉันยังคิดว่า Midnight Commander(mc) เป็นหนึ่งใน TUI ที่ดีที่สุดอยู่ดี มันให้ความสามารถแทบเทียบเท่า GUI เวอร์ชันอย่าง Double Commander แถมยังรันจากระยะไกลได้ด้วย
    ตอนนี้กำลังทำสกินใหม่ และหวังว่าจะได้รวมอยู่ในรีลีสถัดไป

    • ส่วนตัวฉันรู้สึกว่า Far Manager หรือ Dos Navigator เสถียรกว่า
    • ขอบคุณเหล่านักพัฒนา mc

  • Gemini สร้าง TUI ให้โปรเจกต์ DHT scraper ของฉัน — ภาพ
    เวอร์ชันแรกต้องแก้เรื่องอักขระ CJK อยู่บ้าง แต่โดยรวมแล้วน่าประทับใจมาก ทำให้ฉันไปโฟกัสที่อัลกอริทึมได้

    • อยากรู้ว่าใช้ ไลบรารี อะไร
    • สนใจโปรเจกต์ที่เกี่ยวกับ DHT อยากรู้ว่านำไปใช้กับ search engine หรืออย่างอื่นยังไงบ้าง
    • มีคนถามยืนยันว่า “DHT” หมายถึง Distributed Hash Table ใช่ไหม และบอกว่าเป็น TUI ที่เจ๋งดี

  • ฉันไม่ค่อยเห็นว่า TUI ดีกว่าเว็บฟอร์มหรือ GUI ตรงไหน แต่คิดว่า การประกอบ CLI pipeline นั้นทรงพลังมาก

    • บางองค์กร (NSA, CSE, GCHQ ฯลฯ) ห้ามใช้เว็บ UI สำหรับการจัดการระบบด้วยเหตุผลด้านความปลอดภัย ดังนั้นผลิตภัณฑ์ของเราจึงบริหารผ่าน local console หรือ TUI บน SSH และใช้การตั้งค่า SELinux MAC ที่เข้มงวดมาก
    • TUI สะดวกสำหรับแอปที่ต้องรันขนานกับ CLI แบ่งหน้าต่างด้วย tmux/zellij ได้ง่าย และความต่างของ UI ระหว่าง OS ก็น้อยกว่า
    • TUI มีประโยชน์มากโดยเฉพาะใน สภาพแวดล้อม SSH แม้แต่บน SSH client ของสมาร์ตโฟนก็ยังใช้งานได้ดี
    • Gemini เคยสร้าง TUI ให้โปรเจกต์ C# ของฉัน แต่ภายหลังกลับเสนอว่าการ ฝัง Kestrel web server น่าจะดีกว่า ซึ่งก็จริง
    • TUI ให้ keybinding ที่ดี และเข้าถึงได้จากจุดที่รันคำสั่งอยู่ทันที จึงเหมาะกับงานที่ต้องทำเร็ว

  • ฉันชอบ Claude Code แต่รู้สึกว่า โครงสร้าง TUI ที่อิง React นั้นไม่มีประสิทธิภาพเอามาก ๆ

    • โดยเฉพาะเวลาเลื่อนอ่านข้อความยาว ๆ จะเห็น ปัญหาด้านประสิทธิภาพ ชัดมาก ดูเหมือนจะเป็นสถาปัตยกรรมแบบนี้มาตั้งแต่แรก เลยสงสัยว่าทำไมถึงแก้ยาก
    • ถ้า render ด้วย JS อยู่แล้ว การใช้ React เป็น engine สำหรับการนำกลับมาใช้ใหม่ ก็อาจสมเหตุสมผล

  • ฉันทำ prompt frontend ของตัวเองบนฐาน Cursor CLI — ภาพ
    รวม git, diff, ประวัติแชตไว้ด้วยกัน และเข้าถึงจากมือถือได้ง่ายผ่าน Tailscale
    มันรู้จักกฎของฉันและ grep โปรเจกต์ได้ เลยใช้งานได้ดีมาก