hypersdk

Modern TUI Features

The interactive TUI has been modernized with the latest Bubbletea ecosystem components for a better user experience.

New Components

1. Bubbles Progress Bar

Modern gradient progress bars during export
Real-time percentage display
Smooth animations
Custom colors matching the theme

Overall Progress: 3 / 10 VMs (30%)
████████████░░░░░░░░░░░░░░░░░░░░░░░░░░

2. Bubbles Help System

Smart help display with short/full modes
Organized key bindings by category
Context-aware help for each phase
Toggleable with ? key

Short help:

💡 ?:toggle help • q:quit

Full help (press ?):

  ↑/k  move up       space  toggle [x]
  ↓/j  move down     enter  confirm

  /  filter          f  features
  s  sort            u  cloud

  esc  back          ?  toggle help
  q    quit

3. Bubbles Key Bindings

Type-safe key definitions
Help text integration
Consistent across all phases
Vim-style alternatives (h/j/k/l)

4. Modern Styling

Lipgloss 0.9+ features
Rounded borders
Color gradients
Responsive layouts
Semantic colors

Visual Improvements

Export Progress View

Before:

📦 Exporting VMs

3 / 10 VMs completed

✅ vm1 - Completed
✅ vm2 - Completed
⏳ vm3 - Exporting...
⏸  vm4 - Pending

After:

┌──────────────────────────────────────────────────────────────────────────┐
│          🚀 Exporting Virtual Machines                                    │
└──────────────────────────────────────────────────────────────────────────┘

Overall Progress: 3 / 10 VMs (30%)
████████████░░░░░░░░░░░░░░░░░░░░░░░░░░

╭──────────────────────────────────────╮
│ ⏳ Currently Exporting: vm3          │
│    /datacenter/vm/vm3                │
╰──────────────────────────────────────╯

╭────────────────────────────────────────────────────────────────────────╮
│ ✅ vm1                                          Completed               │
│ ✅ vm2                                          Completed               │
│ ⏳ vm3                                          Exporting...            │
│ ⏸️  vm4                                          Pending                 │
│ ⏸️  vm5                                          Pending                 │
╰────────────────────────────────────────────────────────────────────────╯

💡 q:quit | Export in progress...

Help Integration

Modern short help (shown by default):

Minimal, non-intrusive
Shows essential keys only
Emoji indicators
Always visible

Modern full help (press ?):

Organized into logical groups
All keybindings with descriptions
Easy to scan
Toggle on/off

Color Scheme

Modern semantic colors:

Primary (#00ffff) - Cyan for headers, actions
Success (#00ff00) - Green for completed items
Warning (#ffaa00) - Orange for in-progress
Muted (#666666) - Gray for secondary text
Error (#ff0000) - Red for failures

Layout Enhancements

Bordered boxes with rounded corners
Proper spacing and padding
Responsive widths
Aligned elements
Visual hierarchy

New Keyboard Shortcuts

Global Keys

? - Toggle help (short ↔ full)
q or Ctrl+C - Quit
Esc - Go back

↑ or k - Move up
↓ or j - Move down
Space - Toggle selection [ ] ↔ [x]
Enter - Confirm/continue

Actions

f - Configure advanced features
u - Configure cloud upload
s - Sort VMs
/ - Filter/search

Technical Details

Dependencies Added

github.com/charmbracelet/bubbles/progress
github.com/charmbracelet/bubbles/help
github.com/charmbracelet/bubbles/key

Component Initialization

// Progress bar with gradient
prog := progress.New(
    progress.WithDefaultGradient(),
    progress.WithWidth(40),
)

// Help with custom styles
h := help.New()
h.Styles.ShortKey = lipgloss.NewStyle().Foreground(primaryColor)
h.Styles.ShortDesc = lipgloss.NewStyle().Foreground(mutedColor)

// Key bindings
keys := tuiKeyMap{
    Up: key.NewBinding(
        key.WithKeys("up", "k"),
        key.WithHelp("↑/k", "move up"),
    ),
    // ...
}

Usage in Views

// Render progress bar
progressBar := m.progressBar.ViewAs(percent)

// Render short help
shortHelp := m.helpModel.ShortHelpView(m.keys.ShortHelp())

// Render full help
fullHelp := m.helpModel.FullHelpView(m.keys.FullHelp())

Performance

All modern components are:

Zero-allocation in the hot path
Efficient rendering
Minimal memory footprint
Fast updates (60 FPS capable)

Accessibility

High contrast mode compatible
Screen reader friendly text
Keyboard-only navigation
Clear visual indicators

Migration Guide

For Users

No changes required! The TUI works the same way, just looks better.

For Developers

If extending the TUI:

Use the help component for new keybindings:

newKey := key.NewBinding(
 key.WithKeys("x"),
 key.WithHelp("x", "do something"),
)

Use progress bars for long operations:

percent := float64(current) / float64(total)
progressBar := m.progressBar.ViewAs(percent)

Follow the color scheme:

title := lipgloss.NewStyle().
 Foreground(primaryColor).
 Bold(true).
 Render("Title")

Future Enhancements

Planned improvements:

Bubbles Table component for VM list
Bubbles Viewport for scrolling large lists
Bubbles Spinner for loading states
Bubbles Textinput for regex/filter
Animation effects (fade in/out)
Custom themes support
Mouse support

Comparison

Feature	Old TUI	Modern TUI
Progress	Text percentage	Gradient progress bar
Help	Static text	Interactive help component
Keys	Hardcoded	Bubbles key bindings
Colors	Basic ANSI	Lipgloss styled
Borders	ASCII	Rounded unicode
Layout	Manual spacing	Lipgloss layout
State	Custom logic	Bubbles managed

Examples

Running the Modern TUI

# Launch interactive mode with modern UI
hyperexport -interactive

# Or use the alias
hyperexport -tui

Key Features Demo

Select VMs - Use ↑/↓ and Space to toggle checkboxes
View help - Press ? to see all keybindings
Export - Modern progress bar shows live progress
Filter - Press / for smart filtering

Browser-like Experience

The modern TUI provides a terminal UI that feels like a modern web app:

Smooth animations
Responsive layout
Intuitive navigation
Professional appearance
Consistent design language

Perfect for both casual users and power users who live in the terminal!

This site is open source. Improve this page.