feat(tui): Two-column layout with detail preview

.beans/beans-3f64--phase-1-compact-list-format.md

@@ -0,0 +1,12 @@
+---
+# beans-3f64
+title: 'Phase 1: Compact list format'
+status: completed
+type: task
+priority: normal
+created_at: 2025-12-28T17:38:41Z
+updated_at: 2025-12-28T18:44:44Z
+parent: beans-t0tv
+---
+
+Add single-character type and status codes to make the list more compact. Prerequisite for two-column layout.

.beans/beans-41ly--phase-3-two-column-layout-composition.md

@@ -0,0 +1,12 @@
+---
+# beans-41ly
+title: 'Phase 3: Two-column layout composition'
+status: completed
+type: task
+priority: normal
+created_at: 2025-12-28T17:38:52Z
+updated_at: 2025-12-28T18:56:24Z
+parent: beans-t0tv
+---
+
+Wire up the two-column layout in the main App with responsive width detection.

.beans/beans-433o--phase-2-detail-preview-component.md

@@ -0,0 +1,12 @@
+---
+# beans-433o
+title: 'Phase 2: Detail preview component'
+status: completed
+type: task
+priority: normal
+created_at: 2025-12-28T17:38:51Z
+updated_at: 2025-12-28T18:49:10Z
+parent: beans-t0tv
+---
+
+Create a lightweight, read-only detail preview that can be rendered in the right pane.

.beans/beans-6x50--phase-5-integration-and-polish.md

@@ -0,0 +1,12 @@
+---
+# beans-6x50
+title: 'Phase 5: Integration and polish'
+status: completed
+type: task
+priority: normal
+created_at: 2025-12-28T17:38:53Z
+updated_at: 2025-12-28T19:04:41Z
+parent: beans-t0tv
+---
+
+Final integration, help overlay updates, edge case handling, and testing.

.beans/beans-ld8p--two-column-layout-right-pane-extends-beyond-screen.md

@@ -0,0 +1,12 @@
+---
+# beans-ld8p
+title: 'Two-column layout: right pane extends beyond screen width'
+status: scrapped
+type: bug
+priority: normal
+created_at: 2025-12-28T19:20:10Z
+updated_at: 2025-12-28T19:22:00Z
+parent: t0tv
+---
+
+Same root cause as beans-m3mq - the footer in list.View() is not width-constrained, causing lipgloss.JoinHorizontal to miscalculate widths. See beans-m3mq for details.

.beans/beans-m3mq--two-column-layout-left-pane-too-narrow-with-whites.md

@@ -0,0 +1,34 @@
+---
+# beans-m3mq
+title: 'Two-column layout: left pane too narrow with whitespace gap'
+status: completed
+type: bug
+priority: normal
+created_at: 2025-12-28T19:20:10Z
+updated_at: 2025-12-28T19:49:19Z
+parent: beans-t0tv
+---
+
+The left pane only takes up ~40 chars instead of the intended 55 chars. There's significant whitespace between the left and right panes.
+
+## Screenshot
+
+```
+╭─────────────────────────────────────────────────────╮                              ╭─────────────────────────────
+│ Beans                                               │                              │ beans-18db
+│                                                     │                              │ beans milestones command
+│ beans-f11p        M  I  Milestone 0.4.0             │                              │
+│ ├─ beans-hz87     F  T  Add blocked-by relatio...   │                              │ Status: todo  Type: task
+```
+
+## Root Cause (investigation notes)
+
+The issue is in `list.View()` (list.go:500-567):
+- The border box is constrained to `m.width - 2`
+- BUT the footer is appended as `content + "\n" + footer` without width constraint
+- The footer line extends to full terminal width
+- `lipgloss.JoinHorizontal` sees the left pane width as the footer width (unbounded), not the box width
+
+## Fix
+
+The footer needs to be constrained to the same width as the border box, or the entire View() output needs width clamping.

.beans/beans-pri5--phase-4-cursor-sync.md

@@ -0,0 +1,12 @@
+---
+# beans-pri5
+title: 'Phase 4: Cursor sync'
+status: completed
+type: task
+priority: normal
+created_at: 2025-12-28T17:38:53Z
+updated_at: 2025-12-28T18:59:15Z
+parent: beans-t0tv
+---
+
+Detect cursor changes in the list and update the preview pane accordingly.

.beans/beans-t0tv--refactor-tui-to-two-column-layout-with-hierarchica.md

@@ -1,10 +1,11 @@
 ---
 # beans-t0tv
 title: Refactor TUI to two-column layout with hierarchical navigation
-status: todo
+status: in-progress
 type: feature
+priority: normal
 created_at: 2025-12-14T15:37:22Z
-updated_at: 2025-12-14T15:37:22Z
+updated_at: 2025-12-28T19:20:20Z
 parent: beans-f11p
 ---
 
@@ -45,18 +46,109 @@ The current single-list view doesn't provide enough context about individual bea
 - Batch selection and editing
 - Opening bean in editor
 
-## Checklist
-
-- [ ] Design the two-column layout structure with Bubbletea
-- [ ] Implement left pane (bean list) component
-- [ ] Implement right pane (bean detail) component
-- [ ] Add responsive width handling between panes
-- [ ] Implement Enter to drill into bean hierarchy
-- [ ] Implement back navigation (Escape/Backspace)
-- [ ] Add breadcrumb/path indicator showing current root
-- [ ] Preserve filtering functionality
-- [ ] Preserve status change shortcuts
-- [ ] Preserve batch selection and editing
-- [ ] Preserve editor integration
-- [ ] Handle edge cases (no children, deep nesting, narrow terminals)
-- [ ] Update help overlay with new keybindings
+## Subtasks
+
+- beans-3f64: Phase 1 - Compact list format (single-char type/status)
+- beans-433o: Phase 2 - Detail preview component
+- beans-41ly: Phase 3 - Two-column layout composition
+- beans-pri5: Phase 4 - Cursor sync
+- beans-6x50: Phase 5 - Integration and polish
+
+## Implementation Plan
+
+See `_spec/plans/2025-12-28-tui-two-column-layout.md` for detailed implementation steps.
+
+## Research
+
+- [[2025-12-28-beans-t0tv-tui-two-column-layout]] - Codebase research documenting the current TUI implementation and architecture considerations for two-column layout
+
+## Design
+
+### Key Decisions
+
+1. **No hierarchy drilling** - list stays flat with tree structure, filtering handles focus
+2. **Cursor updates preview** - moving through list immediately shows bean details
+3. **Read-only right pane** - no focus, no shortcuts, just visual preview
+4. **Enter for full detail** - opens existing full-screen detail view with all features
+5. **Responsive collapse** - below 120 columns, single-column list (current behavior)
+6. **Compact list format** - single-character type/status codes everywhere
+
+### Layout
+
+**Two-column mode (≥120 columns):**
+```
+┌─────────────────────────────────┬──────────────────────────────────────────┐
+│ Beans                           │ beans-t0tv                               │
+│                                 │ Refactor TUI to two-column layout        │
+│ ▌ beans-t0tv  F T Refactor TUI  │──────────────────────────────────────────│
+│   beans-f11p  E T TUI Improve.. │ Status: todo    Type: feature            │
+│   beans-govy  F T Add Y shortc. │ Parent: beans-f11p                       │
+│                                 │──────────────────────────────────────────│
+│                                 │ ## Summary                               │
+│                                 │ Refactor the TUI to a two-column format  │
+│                                 │ ...                                      │
+├─────────────────────────────────┴──────────────────────────────────────────┤
+│ enter view · e edit · space select · ? help                                │
+└────────────────────────────────────────────────────────────────────────────┘
+```
+
+**Single-column mode (<120 columns):** Current list behavior, unchanged.
+
+**Dimensions:**
+- Left pane: fixed 55 characters
+- Right pane: remaining width minus borders
+- Threshold: 120 columns for two-column mode
+
+### Compact List Format
+
+Single-character codes for type and status columns:
+
+**Types:** M(ilestone), E(pic), B(ug), F(eature), T(ask)
+
+**Statuses:** D(raft), T(odo), I(n-progress), C(ompleted), S(crapped)
+
+Applied everywhere (not just two-column mode) for consistency.
+
+### Navigation
+
+**In two-column mode:**
+- `j/k`, arrows - move cursor, preview updates automatically
+- `enter` - open full-screen detail view
+- `space` - toggle multi-select
+- `p/s/t/P/b/e/y/c` - existing shortcuts work on highlighted bean
+- `g t` - tag filter, `/` - text filter, `?` - help overlay
+- `esc` - clear selection, then clear filter
+
+**In full-screen detail (unchanged):**
+- `tab` - switch focus between links and body
+- `j/k` - scroll body
+- `enter` - navigate to linked bean
+- `esc` - back to two-column view
+
+### Implementation
+
+**Cursor sync:** Detect cursor change in list Update(), emit `cursorChangedMsg`. App handles it to update detail preview.
+
+**View rendering:** In `View()`, if width ≥120, compose left (list) + right (preview) with `lipgloss.JoinHorizontal`.
+
+**Files to modify:**
+- `internal/tui/tui.go` - View() composition, cursor change handling
+- `internal/tui/list.go` - ViewCompact(), compact type/status, cursor change detection
+- `internal/tui/detail.go` - extract preview rendering
+- `internal/ui/styles.go` - single-char type/status formatting helpers
+
+### Edge Cases
+
+- **Empty list:** right pane shows "No bean selected"
+- **Terminal resize:** automatic switch between one/two column
+- **Long body:** truncated in preview, scroll in full-screen detail
+- **Bean deleted:** list reloads, cursor adjusts, preview updates
+- **Multi-select:** preview shows cursor's bean (not summary)
+- **Links in preview:** shown but non-interactive
+
+### Out of Scope (YAGNI)
+
+- Hierarchy drilling (Enter to show only children)
+- Configurable pane widths
+- Keyboard focus on right pane
+- Breadcrumb navigation

.beans/beans-tbtr--two-column-layout-polish-footer-pane-widths-previe.md

@@ -0,0 +1,16 @@
+---
+# beans-tbtr
+title: 'Two-column layout polish: footer, pane widths, preview height'
+status: completed
+type: task
+created_at: 2025-12-28T19:44:32Z
+updated_at: 2025-12-28T19:44:32Z
+parent: t0tv
+---
+
+Several polish fixes for the two-column TUI layout:
+
+- Footer is now app-global, spanning full terminal width (not constrained to left pane)
+- Right pane capped at 80 chars max width (text files follow 80-char convention), left pane gets remaining space
+- Preview height properly constrained to prevent overflow when bean body is long
+- Detail view linked beans show full type/status names instead of single-char abbreviations

.beans/beans-vn93--responsive-typestatus-column-expansion-in-tui.md

@@ -0,0 +1,24 @@
+---
+# beans-vn93
+title: Responsive type/status column expansion in TUI
+status: completed
+type: task
+priority: normal
+created_at: 2025-12-29T18:30:52Z
+updated_at: 2025-12-29T18:39:15Z
+parent: beans-t0tv
+---
+
+Show full type/status names (e.g., 'feature', 'in-progress') when terminal is wide enough (≥120 cols), single-letter abbreviations (F, I) when space is tight.
+
+**Scope:** TUI only (not CLI output).
+
+## Plan
+
+1. Add `UseFullTypeStatus bool` to `ResponsiveColumns` struct
+2. Update `CalculateResponsiveColumns()` to set flag when width ≥ 120
+3. Update list delegate to pass `UseFullNames: d.cols.UseFullTypeStatus` to `RenderBeanRow`
+
+## Files
+- `internal/ui/styles.go` - ResponsiveColumns, CalculateResponsiveColumns
+- `internal/tui/list.go` - itemDelegate.Render