Step 8: TUI — Bubble Tea terminal UI with streaming, tool progress, slash commands

[hackertron]

Context

The TUI is the primary user interface for the HN launch. It connects to the gateway WebSocket and provides a rich terminal experience.

Scope

Layout

┌─────────────────────────────────────────────────┐
│  Yantra v0.1.0 │ gemini/gemini-2.5-flash │ ● Connected  │
├─────────────────────────────────────────────────┤
│  You:                                           │
│  Read the main.go file and explain it           │
│                                                 │
│  Yantra:                                        │
│  ◐ Calling read_file...                         │
│  I've read the main.go file. Here's what...     │
├─────────────────────────────────────────────────┤
│  > Type a message... (Ctrl+S send, /help)  │ S1 │
└─────────────────────────────────────────────────┘

Components

• Header bar — version, provider/model, connection status, session indicator
• Message viewport — scrollable chat history with markdown rendering
  • User messages: distinct style
  • Assistant messages: streaming with cursor (▌)
  • Tool calls: collapsible, spinner → result
  • Syntax highlighting for code blocks
• Input area — multi-line textarea (1-5 lines), Ctrl+S/Enter to send
• Status bar — session name, message count, token usage

Streaming UX

• Tokens appear incrementally with typing cursor
• Tool calls show spinner with tool name
• Tool results collapse into summary line

Slash commands

Command	Description
/new [name]	Create new session
/sessions	List all sessions
/switch <id>	Switch to session
/cancel	Cancel current turn
/model <provider/model>	Switch provider/model
/clear	Clear display
/help	Show help
/quit	Exit

WebSocket client

• Connect to gateway /ws
• Handle all server frame types
• Reconnect on disconnect

Files to create

internal/tui/
├── app.go             # Bubble Tea model + Init/Update/View
├── viewport.go        # Message viewport component
├── input.go           # Input textarea component
├── header.go          # Header bar
├── status.go          # Status bar
├── styles.go          # Lip Gloss styles
├── ws_client.go       # WebSocket client
└── commands.go        # Slash command parsing

Dependencies

• github.com/charmbracelet/bubbletea
• github.com/charmbracelet/bubbles
• github.com/charmbracelet/lipgloss
• github.com/charmbracelet/glamour (markdown rendering)

Implements

• yantra tui — launches TUI (auto-starts daemon if needed)