fix: add proper tree continuation lines in list and TUI views

- Add vertical continuation lines (│) for nested beans in tree display
- Fix ancestry tracking to not draw lines for root-level items
- Manually calculate visual width for Unicode box-drawing characters
  (lipgloss Width() doesn't handle multi-byte chars correctly)
- Align title with root-level bean IDs by adjusting TitleBar padding

Author: hmans

.beans/beans-byk8--fix-missing-outer-connecting-lines-in-tree-display.md

@@ -0,0 +1,10 @@
+---
+title: Fix missing outer connecting lines in tree display
+status: completed
+type: bug
+priority: normal
+created_at: 2025-12-13T10:43:36Z
+updated_at: 2025-12-13T10:48:41Z
+---
+
+In deeply nested bean structures, the tree display is missing vertical continuation lines for outer nesting levels. For example, when displaying a feature under an epic under a milestone, there should be a vertical line showing the connection back to the milestone level, but it's currently missing.

internal/tui/list.go

@@ -130,7 +130,7 @@ func newListModel(resolver *graph.Resolver, cfg *config.Config) listModel {
 	l.SetFilteringEnabled(true)
 	l.SetShowHelp(false)
 	l.Styles.Title = listTitleStyle
-	l.Styles.TitleBar = lipgloss.NewStyle().Padding(0, 0, 1, 2)
+	l.Styles.TitleBar = lipgloss.NewStyle().Padding(0, 0, 1, 1)
 	l.Styles.FilterPrompt = lipgloss.NewStyle().Foreground(ui.ColorPrimary)
 	l.Styles.FilterCursor = lipgloss.NewStyle().Foreground(ui.ColorPrimary)
 
@@ -198,7 +198,7 @@ func (m listModel) loadBeans() tea.Msg {
 		}
 	}
 	maxDepth := ui.MaxTreeDepth(items)
-	// ID column = base ID width + tree indent (2 chars per depth level for depth > 0)
+	// ID column = base ID width + tree indent (3 chars per depth level)
 	idColWidth := maxIDLen + 2 // base padding
 	if maxDepth > 0 {
 		idColWidth += maxDepth * 3 // 3 chars per depth level (├─ + space)

internal/tui/tagpicker.go

@@ -83,7 +83,7 @@ func newTagPickerModel(tags []tagWithCount, width, height int) tagPickerModel {
 	l.SetFilteringEnabled(true)
 	l.SetShowHelp(false)
 	l.Styles.Title = listTitleStyle
-	l.Styles.TitleBar = lipgloss.NewStyle().Padding(0, 0, 1, 2)
+	l.Styles.TitleBar = lipgloss.NewStyle().Padding(0, 0, 1, 1)
 	l.Styles.FilterPrompt = lipgloss.NewStyle().Foreground(ui.ColorPrimary)
 	l.Styles.FilterCursor = lipgloss.NewStyle().Foreground(ui.ColorPrimary)
 

internal/ui/styles.go

@@ -409,7 +409,6 @@ func RenderBeanRow(id, status, typeName, title string, cfg BeanRowConfig) string
 	if cfg.IDColWidth > 0 {
 		idColWidth = cfg.IDColWidth
 	}
-	idStyle := lipgloss.NewStyle().Width(idColWidth)
 	typeStyle := lipgloss.NewStyle().Width(ColWidthType)
 	statusStyle := lipgloss.NewStyle().Width(ColWidthStatus)
 
@@ -427,15 +426,22 @@ func RenderBeanRow(id, status, typeName, title string, cfg BeanRowConfig) string
 	// Highlight style for marked rows
 	highlightStyle := lipgloss.NewStyle().Foreground(ColorWarning)
 
-	// Build columns - apply dimming or highlight as needed
+	// Build ID column with manual padding
+	// (lipgloss Width() doesn't correctly handle Unicode box-drawing characters)
 	var idCol string
+	// Calculate visual width: tree prefix (in runes) + ID length
+	visualWidth := len([]rune(cfg.TreePrefix)) + len(id)
+	padding := ""
+	if idColWidth > visualWidth {
+		padding = strings.Repeat(" ", idColWidth-visualWidth)
+	}
 	if cfg.Dimmed {
-		idCol = idStyle.Render(Muted.Render(cfg.TreePrefix) + Muted.Render(id))
+		idCol = Muted.Render(cfg.TreePrefix) + Muted.Render(id) + padding
 	} else if cfg.IsMarked {
 		// Only highlight the ID when marked
-		idCol = idStyle.Render(highlightStyle.Render(cfg.TreePrefix) + highlightStyle.Render(id))
+		idCol = highlightStyle.Render(cfg.TreePrefix) + highlightStyle.Render(id) + padding
 	} else {
-		idCol = idStyle.Render(TreeLine.Render(cfg.TreePrefix) + ID.Render(id))
+		idCol = TreeLine.Render(cfg.TreePrefix) + ID.Render(id) + padding
 	}
 
 	var typeCol string

internal/ui/tree.go

@@ -151,9 +151,9 @@ func buildNodes(beans []*bean.Bean, children map[string][]*bean.Bean, matchedSet
 const (
 	treeBranch     = "├─ "
 	treeLastBranch = "└─ "
-	treePipe       = ""  // no continuation lines
-	treeSpace      = ""  // no spacing for completed branches
-	treeIndent     = 3   // width of connector (├─  or └─ )
+	treePipe       = "│  " // vertical line for ongoing branches
+	treeSpace      = "   " // empty space for completed branches
+	treeIndent     = 3     // width of connector
 )
 
 // calculateMaxDepth returns the maximum depth of the tree.
@@ -217,26 +217,35 @@ func RenderTree(nodes []*TreeNode, cfg *config.Config, maxIDWidth int, hasTags b
 	sb.WriteString(Muted.Render(strings.Repeat("─", dividerWidth)))
 	sb.WriteString("\n")
 
-	// Render nodes (depth 0 = root level)
-	renderNodes(&sb, nodes, 0, cfg, treeColWidth, hasTags)
+	// Render nodes (depth 0 = root level, no ancestry yet)
+	renderNodes(&sb, nodes, 0, nil, cfg, treeColWidth, hasTags)
 
 	return sb.String()
 }
 
 // renderNodes recursively renders tree nodes with proper indentation.
 // depth 0 = root level (no connector), depth 1+ = nested (has connector)
-func renderNodes(sb *strings.Builder, nodes []*TreeNode, depth int, cfg *config.Config, treeColWidth int, hasTags bool) {
+// ancestry tracks whether each parent level was a last child (true = last, no continuation line needed)
+func renderNodes(sb *strings.Builder, nodes []*TreeNode, depth int, ancestry []bool, cfg *config.Config, treeColWidth int, hasTags bool) {
 	for i, node := range nodes {
 		isLast := i == len(nodes)-1
-		renderNode(sb, node, depth, isLast, cfg, treeColWidth, hasTags)
-		renderNodes(sb, node.Children, depth+1, cfg, treeColWidth, hasTags)
+		renderNode(sb, node, depth, isLast, ancestry, cfg, treeColWidth, hasTags)
+		// Only add to ancestry when depth > 0 (roots have no connectors to continue)
+		if len(node.Children) > 0 {
+			var newAncestry []bool
+			if depth > 0 {
+				newAncestry = append(ancestry, isLast)
+			}
+			renderNodes(sb, node.Children, depth+1, newAncestry, cfg, treeColWidth, hasTags)
+		}
 	}
 }
 
 // renderNode renders a single tree node with tree connectors.
 // treeColWidth is the fixed width of the ID column (includes space for tree connectors).
 // depth 0 = root (no connector), depth 1+ = nested (has connector)
-func renderNode(sb *strings.Builder, node *TreeNode, depth int, isLast bool, cfg *config.Config, treeColWidth int, hasTags bool) {
+// ancestry tracks whether each parent level was a last child (true = last, no continuation line needed)
+func renderNode(sb *strings.Builder, node *TreeNode, depth int, isLast bool, ancestry []bool, cfg *config.Config, treeColWidth int, hasTags bool) {
 	b := node.Bean
 
 	// Get status color from config
@@ -275,9 +284,13 @@ func renderNode(sb *strings.Builder, node *TreeNode, depth int, isLast bool, cfg
 	var indent string
 	var connector string
 	if depth > 0 {
-		// Add indentation for depth > 1 (3 spaces per level beyond first)
-		if depth > 1 {
-			indent = strings.Repeat("   ", depth-1)
+		// Build indent from ancestry - each level adds either │ or space
+		for _, wasLast := range ancestry {
+			if wasLast {
+				indent += treeSpace // parent was last child, no continuation line
+			} else {
+				indent += treePipe // parent has more siblings, show continuation line
+			}
 		}
 		if isLast {
 			connector = treeLastBranch
@@ -399,22 +412,28 @@ type FlatItem struct {
 // Each item includes the pre-computed tree prefix for rendering.
 func FlattenTree(nodes []*TreeNode) []FlatItem {
 	var items []FlatItem
-	flattenNodes(nodes, 0, &items)
+	flattenNodes(nodes, 0, nil, &items)
 	return items
 }
 
-func flattenNodes(nodes []*TreeNode, depth int, items *[]FlatItem) {
+// flattenNodes recursively flattens tree nodes.
+// ancestry tracks whether each parent level was a last child (true = last, no continuation line needed)
+func flattenNodes(nodes []*TreeNode, depth int, ancestry []bool, items *[]FlatItem) {
 	for i, node := range nodes {
 		isLast := i == len(nodes)-1
 
 		// Compute tree prefix
 		var prefix string
 		if depth > 0 {
-			// Add indentation for depth > 1 (3 spaces per level beyond first)
-			if depth > 1 {
-				prefix = strings.Repeat("   ", depth-1)
+			// Build prefix from ancestry - each level adds either │ or space
+			for _, wasLast := range ancestry {
+				if wasLast {
+					prefix += treeSpace // parent was last child, no continuation line
+				} else {
+					prefix += treePipe // parent has more siblings, show continuation line
+				}
 			}
-			// Add connector
+			// Add connector for this node
 			if isLast {
 				prefix += treeLastBranch
 			} else {
@@ -430,8 +449,15 @@ func flattenNodes(nodes []*TreeNode, depth int, items *[]FlatItem) {
 			TreePrefix: prefix,
 		})
 
-		// Recurse into children
-		flattenNodes(node.Children, depth+1, items)
+		// Recurse into children, passing updated ancestry
+		// Only add to ancestry when depth > 0 (roots have no connectors to continue)
+		if len(node.Children) > 0 {
+			var newAncestry []bool
+			if depth > 0 {
+				newAncestry = append(ancestry, isLast)
+			}
+			flattenNodes(node.Children, depth+1, newAncestry, items)
+		}
 	}
 }