Create attachments from long pasted content

Signed-off-by: Christopher Petito <[email protected]>

Author: krissetto

pkg/tui/components/completion/completion.go

@@ -22,6 +22,7 @@ type Item struct {
 	Description string
 	Value       string
 	Execute     func() tea.Cmd
+	Pinned      bool // Pinned items always appear at the top, in original order
 }
 
 type OpenMsg struct {
@@ -83,13 +84,17 @@ type Manager interface {
 
 	GetLayers() []*lipgloss.Layer
 	Open() bool
+	// SetEditorBottom sets the height from the bottom of the screen where the editor ends.
+	// This is used to position the completion popup above the editor.
+	SetEditorBottom(height int)
 }
 
 // manager represents an item completion component that manages completion state and UI
 type manager struct {
 	keyMap        completionKeyMap
 	width         int
 	height        int
+	editorBottom  int // height from screen bottom where editor ends (for popup positioning)
 	items         []Item
 	filteredItems []Item
 	query         string
@@ -182,6 +187,10 @@ func (c *manager) SetSize(width, height int) tea.Cmd {
 	return nil
 }
 
+func (c *manager) SetEditorBottom(height int) {
+	c.editorBottom = height
+}
+
 func (c *manager) View() string {
 	if !c.visible {
 		return ""
@@ -237,11 +246,15 @@ func (c *manager) GetLayers() []*lipgloss.Layer {
 	view := c.View()
 	viewHeight := lipgloss.Height(view)
 
-	editorHeight := 4
+	// Use actual editor height if set, otherwise fall back to reasonable default
+	editorHeight := c.editorBottom
+	if editorHeight == 0 {
+		editorHeight = 4
+	}
 	yPos := max(c.height-viewHeight-editorHeight-1, 0)
 
 	return []*lipgloss.Layer{
-		lipgloss.NewLayer(view).SetContent(view).X(1).Y(yPos),
+		lipgloss.NewLayer(view).SetContent(view).X(styles.AppPaddingLeft).Y(yPos),
 	}
 }
 
@@ -256,6 +269,7 @@ func (c *manager) filterItems(query string) {
 	}
 
 	pattern := []rune(strings.ToLower(query))
+	var pinnedItems []Item
 	var matches []matchResult
 
 	for _, item := range c.items {
@@ -271,18 +285,25 @@ func (c *manager) filterItems(query string) {
 		)
 
 		if result.Start >= 0 {
-			matches = append(matches, matchResult{
-				item:  item,
-				score: result.Score,
-			})
+			if item.Pinned {
+				// Pinned items keep their original order at the top
+				pinnedItems = append(pinnedItems, item)
+			} else {
+				matches = append(matches, matchResult{
+					item:  item,
+					score: result.Score,
+				})
+			}
 		}
 	}
 
 	sort.Slice(matches, func(i, j int) bool {
 		return matches[i].score > matches[j].score
 	})
 
-	c.filteredItems = make([]Item, 0, len(matches))
+	// Build result: pinned items first, then sorted matches
+	c.filteredItems = make([]Item, 0, len(pinnedItems)+len(matches))
+	c.filteredItems = append(c.filteredItems, pinnedItems...)
 	for _, match := range matches {
 		c.filteredItems = append(c.filteredItems, match.item)
 	}

pkg/tui/components/editor/banner.go

@@ -0,0 +1,145 @@
+package editor
+
+import (
+	"strings"
+
+	"charm.land/lipgloss/v2"
+	"github.com/mattn/go-runewidth"
+
+	"github.com/docker/cagent/pkg/tui/styles"
+)
+
+const (
+	bannerSeparatorText = "  •  "
+	// BorderLeft + PaddingLeft from banner style
+	bannerContentOffset = 2
+)
+
+type attachmentBanner struct {
+	items   []bannerItem
+	height  int // cached height after last render
+	regions []bannerRegion
+}
+
+type bannerItem struct {
+	label       string
+	placeholder string
+}
+
+type bannerRegion struct {
+	start int
+	end   int
+	item  bannerItem
+}
+
+func newAttachmentBanner() *attachmentBanner {
+	return &attachmentBanner{}
+}
+
+func (b *attachmentBanner) SetItems(items []bannerItem) {
+	b.items = items
+	b.updateHeight()
+}
+
+// Height returns the number of lines this banner will take when rendered.
+func (b *attachmentBanner) Height() int {
+	return b.height
+}
+
+// updateHeight recalculates the banner height based on current state.
+func (b *attachmentBanner) updateHeight() {
+	if len(b.items) == 0 {
+		b.height = 0
+		return
+	}
+	// Banner takes 1 line when visible
+	b.height = 1
+}
+
+func (b *attachmentBanner) View() string {
+	if len(b.items) == 0 {
+		return ""
+	}
+
+	// Build pill-style badges for each attachment
+	var pills []string
+	for _, item := range b.items {
+		name, size := parseLabel(item.label)
+
+		// Create a nice pill: icon + name + size
+		pill := styles.AttachmentIconStyle.Render("📎 ") +
+			styles.AttachmentBadgeStyle.Render(name)
+		if size != "" {
+			pill += " " + styles.AttachmentSizeStyle.Render(size)
+		}
+		pills = append(pills, pill)
+	}
+
+	separator := styles.MutedStyle.Render(bannerSeparatorText)
+	content := strings.Join(pills, separator)
+
+	b.buildRegions(pills, separator)
+
+	// Wrap in banner style with subtle left border
+	banner := lipgloss.NewStyle().
+		BorderLeft(true).
+		BorderStyle(lipgloss.ThickBorder()).
+		BorderForeground(styles.Info).
+		PaddingLeft(1).
+		PaddingRight(1).
+		Foreground(styles.TextSecondary).
+		Render(content)
+
+	return styles.AttachmentBannerStyle.Render(banner)
+}
+
+func (b *attachmentBanner) buildRegions(pills []string, separator string) {
+	b.regions = b.regions[:0]
+	if len(pills) == 0 {
+		return
+	}
+
+	pos := 0
+	sepWidth := runewidth.StringWidth(stripANSI(separator))
+
+	for i, pill := range pills {
+		if i > 0 {
+			pos += sepWidth
+		}
+		width := runewidth.StringWidth(stripANSI(pill))
+		b.regions = append(b.regions, bannerRegion{
+			start: pos,
+			end:   pos + width,
+			item:  b.items[i],
+		})
+		pos += width
+	}
+}
+
+func (b *attachmentBanner) HitTest(x int) (bannerItem, bool) {
+	if len(b.regions) == 0 {
+		return bannerItem{}, false
+	}
+
+	rel := x - bannerContentOffset
+	if rel < 0 {
+		return bannerItem{}, false
+	}
+
+	for _, region := range b.regions {
+		if rel >= region.start && rel < region.end {
+			return region.item, true
+		}
+	}
+	return bannerItem{}, false
+}
+
+// parseLabel splits a label like "paste-1 (21.1 KB)" into name and size parts.
+func parseLabel(label string) (name, size string) {
+	// Find the last opening parenthesis for size
+	idx := strings.LastIndex(label, " (")
+	if idx > 0 && strings.HasSuffix(label, ")") {
+		return label[:idx], label[idx+1:]
+	}
+	return label, ""
+}