refactor: extract reusable CreateBox component for bordered card styling

replacing duplicated border/selection logic in
  account_orders.go and cart.go. Also fixes a latent SSH rendering bug
  in cart.go where lipgloss.NewStyle() was used instead of theme.Base().

pkg/tui/account_orders.go

@@ -83,24 +83,7 @@ func (m Model) buildOrderCard(order models.Order, boxWidth int, isSelected bool)
 
 	boxContent := line1 + "\n" + line2
 
-	// Styles must use theme.Base() (SSH renderer) — lipgloss.NewStyle()
-	// uses the default renderer which can't output colors over SSH
-	var itemBox lipgloss.Style
-	if isSelected {
-		itemBox = m.theme.Base().
-			Border(lipgloss.NormalBorder()).
-			BorderForeground(m.theme.Highlight()).
-			PaddingLeft(1).
-			Width(boxWidth)
-	} else {
-		itemBox = m.theme.Base().
-			Border(lipgloss.NormalBorder()).
-			BorderForeground(m.theme.Border()).
-			PaddingLeft(1).
-			Width(boxWidth)
-	}
-
-	return itemBox.Render(boxContent)
+	return m.CreateBoxCustom(boxContent, isSelected, boxWidth)
 }
 
 // buildOrderDetailView renders the full detail view for a single order

pkg/tui/cart.go

@@ -86,29 +86,14 @@ func (m Model) generateCartContent() string {
 
 		boxContent := contentLine1 + "\n" + contentLine2
 
-		var itemBox lipgloss.Style
-		if idx == m.cart.cursor {
-			itemBox = lipgloss.NewStyle().
-				Border(lipgloss.NormalBorder(), true).
-				BorderForeground(m.theme.Accent()).
-				Padding(boxPadding, 2).
-				Width(boxWidth).
-				Foreground(m.theme.Accent()).
-				Bold(true)
+		isSelected := idx == m.cart.cursor
+		if isSelected {
+			boxContent = m.theme.TextAccent().Bold(true).Render(boxContent)
 		} else {
-			itemBox = lipgloss.NewStyle().
-				Border(lipgloss.NormalBorder()).
-				BorderForeground(m.theme.Border()).
-				Padding(boxPadding, 2).
-				Width(boxWidth).
-				Foreground(m.theme.Accent())
+			boxContent = m.theme.TextAccent().Render(boxContent)
 		}
-
-		centered := lipgloss.NewStyle().
-			Width(m.widthContent).
-			Align(lipgloss.Center)
-
-		cartItems += centered.Render(itemBox.Render(boxContent))
+		box := m.createBoxInner(boxContent, isSelected, lipgloss.Left, 2, boxPadding, boxWidth)
+		cartItems += m.theme.Base().Width(m.widthContent).Align(lipgloss.Center).Render(box)
 
 		if idx < len(itemSlice)-1 {
 			cartItems += "\n"

pkg/tui/styles.go

@@ -0,0 +1,24 @@
+package tui
+
+import "github.com/charmbracelet/lipgloss"
+
+func (m Model) createBoxInner(content string, selected bool, position lipgloss.Position, paddingH int, paddingV int, totalWidth int) string {
+	padded := lipgloss.PlaceHorizontal(totalWidth, position, content)
+	base := m.theme.Base().Border(lipgloss.NormalBorder()).Width(totalWidth)
+
+	var style lipgloss.Style
+	if selected {
+		style = base.BorderForeground(m.theme.Highlight())
+	} else {
+		style = base.BorderForeground(m.theme.Border())
+	}
+	return style.Padding(paddingV, paddingH).Render(padded)
+}
+
+func (m Model) CreateBox(content string, selected bool) string {
+	return m.createBoxInner(content, selected, lipgloss.Left, 1, 0, m.widthContent-2)
+}
+
+func (m Model) CreateBoxCustom(content string, selected bool, totalWidth int) string {
+	return m.createBoxInner(content, selected, lipgloss.Left, 1, 0, totalWidth)
+}