feat: modularize TUI dashboard components into individual view files

assets/demo.tape

@@ -4,18 +4,18 @@
 Output assets/demo.gif
 Output assets/demo.mp4
 
-Set Shell "bash"
+Set Shell "zsh"
 Set FontSize 16
 Set Width 1920
 Set Height 1080
-Set FontFamily "MesloLGS NF"
-Set Theme { "name": "IBM 3270 High Contrast", "black": "#000000", "red": "#ff5454", "green": "#00ff00", "yellow": "#ffff00", "blue": "#00aaff", "magenta": "#ff00ff", "cyan": "#00ffff", "white": "#ffffff", "brightBlack": "#666666", "brightRed": "#ff6666", "brightGreen": "#33ff33", "brightYellow": "#ffff66", "brightBlue": "#33ccff", "brightMagenta": "#ff66ff", "brightCyan": "#66ffff", "brightWhite": "#ffffff", "background": "#000000", "foreground": "#00ff00", "selection": "#222222", "cursor": "#00ff00" }
+Set FontFamily "JetBrainsMono NF"
+# Set Theme { "name": "IBM 3270 High Contrast", "black": "#000000", "red": "#ff5454", "green": "#00ff00", "yellow": "#ffff00", "blue": "#00aaff", "magenta": "#ff00ff", "cyan": "#00ffff", "white": "#ffffff", "brightBlack": "#666666", "brightRed": "#ff6666", "brightGreen": "#33ff33", "brightYellow": "#ffff66", "brightBlue": "#33ccff", "brightMagenta": "#ff66ff", "brightCyan": "#66ffff", "brightWhite": "#ffffff", "background": "#000000", "foreground": "#00ff00", "selection": "#222222", "cursor": "#00ff00" }
 Set Padding 0
 Set WindowBar Colorful
 Set Framerate 60
 
 # --- Launch Surge ---
-Type "surge"
+Type "./Surge"
 Enter
 Sleep 3s
 
@@ -24,20 +24,16 @@ Sleep 3s
 Type "a"
 Sleep 500ms
 
-# Type a sample URL (use a small, fast file for demo)
-Type "https://ash-speed.hetzner.com/100MB.bin"
+Type "https://sin-speed.hetzner.com/1GB.bin"
 Enter
 Sleep 300ms
 
-Type "https://sin-speed.hetzner.com/100MB.bin"
 Enter
 Sleep 300ms
 
-# Press Enter to skip path (use default)
 Enter
 Sleep 300ms
 
-# Press Enter to skip filename (use default)
 Enter
 Sleep 5s
 
@@ -56,6 +52,10 @@ Sleep 800ms
 Screenshot assets/settings.png
 Right
 Sleep 800ms
+Right
+Sleep 800ms
+Right
+Sleep 800ms
 
 # Close settings (Esc)
 Escape

cmd/cmd_test.go

@@ -575,7 +575,7 @@ func TestRootCmd_Version(t *testing.T) {
 
 func TestRootCmd_VersionMatchesPackageVar(t *testing.T) {
 	if rootCmd.Version != Version {
-		t.Errorf("rootCmd.Version %q does not match Version %q — init() must sync them", rootCmd.Version, Version)
+		t.Errorf("rootCmd.Version %q does not match Version %q \u2014 init() must sync them", rootCmd.Version, Version)
 	}
 }
 

internal/config/settings.go

@@ -260,7 +260,7 @@ func LoadSettings() (*Settings, error) {
 
 	settings := DefaultSettings() // Start with defaults to fill any missing fields
 	if err := json.Unmarshal(data, settings); err != nil {
-		utils.Debug("Warning: corrupt settings file %s: %v — using defaults", path, err)
+		utils.Debug("Warning: corrupt settings file %s: %v \u2014 using defaults", path, err)
 		return DefaultSettings(), nil
 	}
 

internal/download/pool_test.go

@@ -1026,7 +1026,7 @@ func TestWorkerPool_GracefulShutdown_WorkerSkipsQueuedAfterShutdown(t *testing.T
 	select {
 	case <-done:
 	case <-time.After(2 * time.Second):
-		t.Fatal("GracefulShutdown timed out — worker may have started a download it should have skipped")
+		t.Fatal("GracefulShutdown timed out \u2014 worker may have started a download it should have skipped")
 	}
 
 	// The queued map must be empty.

internal/tui/colors/colors.go

@@ -42,8 +42,8 @@ var (
 
 // === Progress Bar Colors ===
 var (
-	ProgressStart color.Color = themeColor{light: "#d10074", dark: "#ff79c6"} // Pink
-	ProgressEnd   color.Color = themeColor{light: "#7b1fa2", dark: "#bd93f9"} // Purple
+	ProgressStart color.Color = themeColor{light: "#950053", dark: "#fa70bc"} // Muted Pink
+	ProgressEnd   color.Color = themeColor{light: "#5a1376", dark: "#b472ff"} // Muted Purple
 )
 
 var (

internal/tui/components/add_download_modal.go

@@ -40,7 +40,22 @@ func (m AddDownloadModal) View() string {
 	}
 
 	for i := 0; i < len(m.Inputs) && i < len(m.Labels); i++ {
-		row := lipgloss.JoinHorizontal(lipgloss.Left, labelStyle.Render(m.Labels[i]), m.Inputs[i].View())
+		// Calculate available width for inputs
+		// Accounts for: horizontal padding (4), label (10), and box borders (2)
+		const labelWidth = 10
+		horizontalPadding := lipgloss.NewStyle().Padding(0, 2).GetHorizontalFrameSize()
+		inputW := m.Width - BorderFrameWidth - horizontalPadding - labelWidth
+
+		if m.BrowseHintIndex == i {
+			inputW -= 13 // Margin (1) + "[Tab] Browse" (12)
+		}
+		if inputW < 10 {
+			inputW = 10
+		}
+		ti := m.Inputs[i]
+		ti.SetWidth(inputW)
+
+		row := lipgloss.JoinHorizontal(lipgloss.Left, labelStyle.Render(m.Labels[i]), ti.View())
 		if m.BrowseHintIndex == i {
 			hintStyle := hintBase
 			if m.FocusedInput == i {

internal/tui/components/box.go

@@ -9,6 +9,17 @@ import (
 	"charm.land/lipgloss/v2"
 )
 
+const (
+	// BorderFrameHeight is the combined height of top and bottom borders (2)
+	BorderFrameHeight = 2
+	// BorderFrameWidth is the combined width of left and right borders (2)
+	BorderFrameWidth = 2
+	// BtopBoxOverheadHeight is the header + footer overhead (2)
+	BtopBoxOverheadHeight = 2
+	// SingleLineHeight is a standard single line height (1)
+	SingleLineHeight = 1
+)
+
 // BoxRenderer is the function signature for rendering btop-style boxes
 type BoxRenderer func(leftTitle, rightTitle, content string, width, height int, borderColor color.Color) string
 
@@ -19,14 +30,14 @@ type BoxRenderer func(leftTitle, rightTitle, content string, width, height int,
 func RenderBtopBox(leftTitle, rightTitle string, content string, width, height int, borderColor color.Color) string {
 	// Border characters
 	const (
-		topLeft     = "╭"
-		topRight    = "╮"
-		bottomLeft  = "╰"
-		bottomRight = "╯"
-		horizontal  = "─"
-		vertical    = "│"
+		topLeft     = "\u256d"
+		topRight    = "\u256e"
+		bottomLeft  = "\u2570"
+		bottomRight = "\u256f"
+		horizontal  = "\u2500"
+		vertical    = "\u2502"
 	)
-	innerWidth := width - 2
+	innerWidth := width - BorderFrameWidth
 	if innerWidth < 1 {
 		innerWidth = 1
 	}
@@ -90,7 +101,7 @@ func RenderBtopBox(leftTitle, rightTitle string, content string, width, height i
 
 	// Wrap content lines with vertical borders
 	contentLines := strings.Split(content, "\n")
-	innerHeight := height - 2 // Account for top and bottom borders
+	innerHeight := height - BorderFrameHeight // Account for top and bottom borders
 
 	// Style for truncation
 	truncStyle := lipgloss.NewStyle().MaxWidth(innerWidth)

internal/tui/components/chunkmap.go

@@ -201,7 +201,7 @@ func (m ChunkMapModel) View() string {
 	pausedStyle := lipgloss.NewStyle().Foreground(colors.StatePaused)         // Yellow/Gold for paused Partial
 	completedStyle := lipgloss.NewStyle().Foreground(colors.StateDownloading) // Neon Green / Cyan
 
-	block := "■"
+	block := "\u25a0"
 
 	for i, status := range visualChunks {
 		if i > 0 && i%cols == 0 {

internal/tui/components/chunkmap_test.go

@@ -59,7 +59,7 @@ func TestChunkMap_Basic(t *testing.T) {
 	out := model.View()
 
 	// Just verify connection mostly.
-	if !strings.Contains(out, "■") {
+	if !strings.Contains(out, "\u25a0") {
 		t.Error("Output should contain blocks")
 	}
 }
@@ -131,7 +131,7 @@ func TestChunkMap_LogicVerify(t *testing.T) {
 	out := model.View()
 
 	pinkStyle := lipgloss.NewStyle().Foreground(colors.NeonPink)
-	if strings.Contains(out, pinkStyle.Render("■")) {
+	if strings.Contains(out, pinkStyle.Render("\u25a0")) {
 		t.Error("Mixed state (Completed+Pending) should NOT render as Downloading (Pink)")
 	}
 }
@@ -153,7 +153,7 @@ func TestChunkMap_DownloadingPriority(t *testing.T) {
 
 	// Dynamic check to avoid hardcoded color codes
 	pinkStyle := lipgloss.NewStyle().Foreground(colors.NeonPink)
-	expectedPink := pinkStyle.Render("■")
+	expectedPink := pinkStyle.Render("\u25a0")
 
 	if !strings.Contains(out, expectedPink) {
 		t.Errorf("Block containing a Downloading chunk with bytes SHOULD render as Downloading")
@@ -199,10 +199,10 @@ func TestChunkMap_GranularProgress(t *testing.T) {
 	}
 
 	pinkStyle := lipgloss.NewStyle().Foreground(colors.NeonPink)
-	pinkBlock := pinkStyle.Render("■")
+	pinkBlock := pinkStyle.Render("\u25a0")
 
 	pendingStyle := lipgloss.NewStyle().Foreground(colors.DarkGray)
-	grayBlock := pendingStyle.Render("■")
+	grayBlock := pendingStyle.Render("\u25a0")
 
 	// Row 0 should be Pink
 	if !strings.Contains(rows[0], pinkBlock) {
@@ -235,9 +235,9 @@ func TestChunkMap_BlockTurnsCompletedWhenItsByteRangeIsFullyDownloaded(t *testin
 	}
 
 	completedStyle := lipgloss.NewStyle().Foreground(colors.StateDownloading)
-	completedBlock := completedStyle.Render("■")
+	completedBlock := completedStyle.Render("\u25a0")
 	downloadingStyle := lipgloss.NewStyle().Foreground(colors.NeonPink)
-	downloadingBlock := downloadingStyle.Render("■")
+	downloadingBlock := downloadingStyle.Render("\u25a0")
 
 	if !strings.Contains(rows[0], completedBlock) {
 		t.Errorf("Row 0 should be Completed (green/cyan) when fully covered by downloaded bytes")

internal/tui/components/filepicker_modal.go

@@ -13,7 +13,7 @@ import (
 // FilePickerModal represents a styled file picker modal
 type FilePickerModal struct {
 	Title       string
-	Picker      filepicker.Model
+	Picker      *filepicker.Model
 	Help        help.Model
 	HelpKeys    help.KeyMap
 	BorderColor color.Color
@@ -22,7 +22,7 @@ type FilePickerModal struct {
 }
 
 // NewFilePickerModal creates a file picker modal with default styling
-func NewFilePickerModal(title string, picker filepicker.Model, helpModel help.Model, helpKeys help.KeyMap, borderColor color.Color) FilePickerModal {
+func NewFilePickerModal(title string, picker *filepicker.Model, helpModel help.Model, helpKeys help.KeyMap, borderColor color.Color) FilePickerModal {
 	return FilePickerModal{
 		Title:       title,
 		Picker:      picker,

internal/tui/components/status.go

@@ -27,11 +27,11 @@ type statusInfo struct {
 }
 
 var statusMap = map[DownloadStatus]statusInfo{
-	StatusQueued:      {icon: "⋯", label: "Queued"},
-	StatusDownloading: {icon: "⬇", label: "Downloading"},
-	StatusPaused:      {icon: "⏸", label: "Paused"},
-	StatusComplete:    {icon: "✔", label: "Completed"},
-	StatusError:       {icon: "✖", label: "Error"},
+	StatusQueued:      {icon: "\u22ef", label: "Queued"},
+	StatusDownloading: {icon: "\u2b07", label: "Downloading"},
+	StatusPaused:      {icon: "\u23f8", label: "Paused"},
+	StatusComplete:    {icon: "\u2714", label: "Completed"},
+	StatusError:       {icon: "\u2716", label: "Error"},
 }
 
 var (

internal/tui/components/status_test.go

@@ -23,7 +23,7 @@ func TestStatusRender_ReflectsThemeChanges(t *testing.T) {
 }
 
 func TestStatusRenderWithSpinner(t *testing.T) {
-	spinnerFrame := "⠋"
+	spinnerFrame := "\u280b"
 
 	queuedStr := StatusQueued.RenderWithSpinner(spinnerFrame)
 	if !strings.Contains(queuedStr, spinnerFrame+" Queued") {

internal/tui/constants.go

@@ -28,7 +28,7 @@ const (
 
 	MinRightColumnWidth = 50 // Hide right column if narrow
 	MinGraphStatsWidth  = 70 // Hide inline graph stats if narrow
-	MinLogoWidth        = 60 // Hide ASCII logo if narrow
+	MinLogoWidth        = 40 // Hide ASCII logo if narrow
 
 	MinGraphHeight      = 9
 	MinGraphHeightShort = 5
@@ -44,15 +44,20 @@ const (
 	CardHeight         = 2 // Compact rows for downloads list
 
 	// === Padding and Offsets ===
-	DefaultPaddingX = 1
-	DefaultPaddingY = 0
-	PopupPaddingX   = 2
-	PopupPaddingY   = 1
-	PopupWidth      = 70 // Consistent width for small popup dialogs
-
+	DefaultPaddingX        = 1
+	DefaultPaddingY        = 0
+	PopupPaddingX          = 2
+	PopupPaddingY          = 1
+	PopupWidth             = 70 // Consistent width for small popup dialogs
 	HeaderWidthOffset      = 2
 	ProgressBarWidthOffset = 4
 
+	// === Layout Offsets (Clean Math) ===
+	InternalPaddingHeight = 2 // Standard internal vertical padding
+	InternalPaddingWidth  = 2 // Standard internal horizontal padding
+	FooterHeight          = 1 // Application-wide footer height (keybindings)
+	DividerHeight         = 1 // Horizontal/Vertical divider line
+
 	// === Graph Configuration ===
 	GraphAxisWidth  = 10
 	GraphStatsWidth = 18

internal/tui/graph.go

@@ -46,17 +46,17 @@ func renderMultiLineGraph(data []float64, width, height int, maxVal float64, sta
 		for j := range rows[i] {
 			if i == height-1 {
 				// Bottom row: solid baseline
-				rows[i][j] = gridStyle.Render("─")
+				rows[i][j] = gridStyle.Render("\u2500")
 			} else if i%2 == 0 {
-				rows[i][j] = gridStyle.Render("╌")
+				rows[i][j] = gridStyle.Render("\u254c")
 			} else {
 				rows[i][j] = " "
 			}
 		}
 	}
 
 	// Block characters for partial fills
-	blocks := []string{" ", "▂", "▃", "▄", "▅", "▆", "▇", "█"}
+	blocks := []string{" ", "\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2588"}
 
 	// Pre-calculate styles for every row to avoid re-creating them in the loop
 	// Optimization: Pre-render all possible block characters for each row style
@@ -156,18 +156,18 @@ func overlayStatsBox(graph string, stats *GraphStats, width, height int) string
 	statsLines := []string{
 		headerStyle.Render("download"),
 		fmt.Sprintf("%s %s  %s",
-			valueStyle.Render("▼"),
+			valueStyle.Render("\u25bc"),
 			valueStyle.Render(fmt.Sprintf("%.2f MB/s", stats.DownloadSpeed)),
 			dimStyle.Render(fmt.Sprintf("(%.0f Mbps)", speedMbps)),
 		),
 		fmt.Sprintf("%s %s %s  %s",
-			labelStyle.Render("▼"),
+			labelStyle.Render("\u25bc"),
 			labelStyle.Render("Top:"),
 			valueStyle.Render(fmt.Sprintf("%.2f MB/s", stats.DownloadTop)),
 			dimStyle.Render(fmt.Sprintf("(%.0f Mbps)", topMbps)),
 		),
 		fmt.Sprintf("%s %s %s",
-			labelStyle.Render("▼"),
+			labelStyle.Render("\u25bc"),
 			labelStyle.Render("Total:"),
 			valueStyle.Render(utils.ConvertBytesToHumanReadable(stats.DownloadTotal)),
 		),
@@ -189,7 +189,7 @@ func overlayStatsBox(graph string, stats *GraphStats, width, height int) string
 		graphLineWidth := lipgloss.Width(graphLines[i])
 		statsLineWidth := lipgloss.Width(statsBoxLines[i])
 
-		keepWidth := graphLineWidth - statsLineWidth - 1
+		keepWidth := graphLineWidth - statsLineWidth - DividerHeight
 		if keepWidth < 0 {
 			keepWidth = 0
 		}