sync

packages/client/tui/internal/components/chat/cache.go

@@ -0,0 +1,62 @@
+package chat
+
+import (
+	"encoding/hex"
+	"fmt"
+	"hash/fnv"
+	"sync"
+)
+
+// PartCache caches rendered messages to avoid re-rendering
+type PartCache struct {
+	mu    sync.RWMutex
+	cache map[string]string
+}
+
+// NewPartCache creates a new message cache
+func NewPartCache() *PartCache {
+	return &PartCache{
+		cache: make(map[string]string),
+	}
+}
+
+// generateKey creates a unique key for a message based on its content and rendering parameters
+func (c *PartCache) GenerateKey(params ...any) string {
+	h := fnv.New64a()
+	for _, param := range params {
+		h.Write(fmt.Appendf(nil, ":%v", param))
+	}
+	return hex.EncodeToString(h.Sum(nil))
+}
+
+// Get retrieves a cached rendered message
+func (c *PartCache) Get(key string) (string, bool) {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+
+	content, exists := c.cache[key]
+	return content, exists
+}
+
+// Set stores a rendered message in the cache
+func (c *PartCache) Set(key string, content string) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+	c.cache[key] = content
+}
+
+// Clear removes all entries from the cache
+func (c *PartCache) Clear() {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+
+	c.cache = make(map[string]string)
+}
+
+// Size returns the number of cached entries
+func (c *PartCache) Size() int {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+
+	return len(c.cache)
+}

packages/client/tui/internal/components/chat/editor.go

@@ -0,0 +1,794 @@
+package chat
+
+import (
+	"encoding/base64"
+	"fmt"
+	"log/slog"
+	"net/url"
+	"os"
+	"path/filepath"
+	"strconv"
+	"strings"
+
+	"github.com/charmbracelet/bubbles/v2/spinner"
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/google/uuid"
+	"github.com/sst/opencode-sdk-go"
+	"github.com/sst/opencode/internal/app"
+	"github.com/sst/opencode/internal/attachment"
+	"github.com/sst/opencode/internal/clipboard"
+	"github.com/sst/opencode/internal/commands"
+	"github.com/sst/opencode/internal/components/dialog"
+	"github.com/sst/opencode/internal/components/textarea"
+	"github.com/sst/opencode/internal/components/toast"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+type EditorComponent interface {
+	tea.Model
+	tea.ViewModel
+	Content() string
+	Lines() int
+	Value() string
+	Length() int
+	Focused() bool
+	Focus() (tea.Model, tea.Cmd)
+	Blur()
+	Submit() (tea.Model, tea.Cmd)
+	Clear() (tea.Model, tea.Cmd)
+	Paste() (tea.Model, tea.Cmd)
+	Newline() (tea.Model, tea.Cmd)
+	SetValue(value string)
+	SetValueWithAttachments(value string)
+	SetInterruptKeyInDebounce(inDebounce bool)
+	SetExitKeyInDebounce(inDebounce bool)
+	RestoreFromHistory(index int)
+}
+
+type editorComponent struct {
+	app                    *app.App
+	width                  int
+	textarea               textarea.Model
+	spinner                spinner.Model
+	interruptKeyInDebounce bool
+	exitKeyInDebounce      bool
+	historyIndex           int    // -1 means current (not in history)
+	currentText            string // Store current text when navigating history
+	pasteCounter           int
+	reverted               bool
+}
+
+func (m *editorComponent) Init() tea.Cmd {
+	return tea.Batch(m.textarea.Focus(), m.spinner.Tick, tea.EnableReportFocus)
+}
+
+func (m *editorComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmds []tea.Cmd
+	var cmd tea.Cmd
+
+	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		m.width = msg.Width - 4
+		return m, nil
+	case spinner.TickMsg:
+		m.spinner, cmd = m.spinner.Update(msg)
+		return m, cmd
+	case tea.KeyPressMsg:
+		// Handle up/down arrows and ctrl+p/ctrl+n for history navigation
+		switch msg.String() {
+		case "up", "ctrl+p":
+			// Only navigate history if cursor is at the first line and column (for arrow keys)
+			// or allow ctrl+p from anywhere
+			if (msg.String() == "ctrl+p" || (m.textarea.Line() == 0 && m.textarea.CursorColumn() == 0)) && len(m.app.State.MessageHistory) > 0 {
+				if m.historyIndex == -1 {
+					// Save current text before entering history
+					m.currentText = m.textarea.Value()
+					m.textarea.MoveToBegin()
+				}
+				// Move up in history (older messages)
+				if m.historyIndex < len(m.app.State.MessageHistory)-1 {
+					m.historyIndex++
+					m.RestoreFromHistory(m.historyIndex)
+					m.textarea.MoveToBegin()
+				}
+				return m, nil
+			}
+		case "down", "ctrl+n":
+			// Only navigate history if cursor is at the last line and we're in history navigation (for arrow keys)
+			// or allow ctrl+n from anywhere if we're in history navigation
+			if (msg.String() == "ctrl+n" || m.textarea.IsCursorAtEnd()) && m.historyIndex > -1 {
+				// Move down in history (newer messages)
+				m.historyIndex--
+				if m.historyIndex == -1 {
+					// Restore current text
+					m.textarea.Reset()
+					m.textarea.SetValue(m.currentText)
+					m.currentText = ""
+				} else {
+					m.RestoreFromHistory(m.historyIndex)
+					m.textarea.MoveToEnd()
+				}
+				return m, nil
+			} else if m.historyIndex > -1 && msg.String() == "down" {
+				m.textarea.MoveToEnd()
+				return m, nil
+			}
+		}
+		// Reset history navigation on any other input
+		if m.historyIndex != -1 {
+			m.historyIndex = -1
+			m.currentText = ""
+		}
+		// Maximize editor responsiveness for printable characters
+		if msg.Text != "" {
+			m.reverted = false
+			m.textarea, cmd = m.textarea.Update(msg)
+			cmds = append(cmds, cmd)
+			return m, tea.Batch(cmds...)
+		}
+	case app.MessageRevertedMsg:
+		if msg.Session.ID == m.app.Session.ID {
+			switch msg.Message.Info.(type) {
+			case opencode.UserMessage:
+				prompt, err := msg.Message.ToPrompt()
+				if err != nil {
+					return m, toast.NewErrorToast("Failed to revert message")
+				}
+				m.RestoreFromPrompt(*prompt)
+				m.textarea.MoveToEnd()
+				m.reverted = true
+				return m, nil
+			}
+		}
+	case app.SessionUnrevertedMsg:
+		if msg.Session.ID == m.app.Session.ID {
+			if m.reverted {
+				updated, cmd := m.Clear()
+				m = updated.(*editorComponent)
+				return m, cmd
+			}
+			return m, nil
+		}
+	case tea.PasteMsg:
+		text := string(msg)
+
+		if filePath := strings.TrimSpace(strings.TrimPrefix(text, "@")); strings.HasPrefix(text, "@") && filePath != "" {
+			statPath := filePath
+			if !filepath.IsAbs(filePath) {
+				statPath = filepath.Join(m.app.Info.Path.Cwd, filePath)
+			}
+			if _, err := os.Stat(statPath); err == nil {
+				attachment := m.createAttachmentFromPath(filePath)
+				if attachment != nil {
+					m.textarea.InsertAttachment(attachment)
+					m.textarea.InsertString(" ")
+					return m, nil
+				}
+			}
+		}
+
+		text = strings.ReplaceAll(text, "\\", "")
+		text, err := strconv.Unquote(`"` + text + `"`)
+		if err != nil {
+			slog.Error("Failed to unquote text", "error", err)
+			text := string(msg)
+			if m.shouldSummarizePastedText(text) {
+				m.handleLongPaste(text)
+			} else {
+				m.textarea.InsertRunesFromUserInput([]rune(msg))
+			}
+			return m, nil
+		}
+		if _, err := os.Stat(text); err != nil {
+			slog.Error("Failed to paste file", "error", err)
+			text := string(msg)
+			if m.shouldSummarizePastedText(text) {
+				m.handleLongPaste(text)
+			} else {
+				m.textarea.InsertRunesFromUserInput([]rune(msg))
+			}
+			return m, nil
+		}
+
+		filePath := text
+
+		attachment := m.createAttachmentFromFile(filePath)
+		if attachment == nil {
+			if m.shouldSummarizePastedText(text) {
+				m.handleLongPaste(text)
+			} else {
+				m.textarea.InsertRunesFromUserInput([]rune(msg))
+			}
+			return m, nil
+		}
+
+		m.textarea.InsertAttachment(attachment)
+		m.textarea.InsertString(" ")
+	case tea.ClipboardMsg:
+		text := string(msg)
+		// Check if the pasted text is long and should be summarized
+		if m.shouldSummarizePastedText(text) {
+			m.handleLongPaste(text)
+		} else {
+			m.textarea.InsertRunesFromUserInput([]rune(text))
+		}
+	case dialog.ThemeSelectedMsg:
+		m.textarea = updateTextareaStyles(m.textarea)
+		m.spinner = createSpinner()
+		return m, tea.Batch(m.textarea.Focus(), m.spinner.Tick)
+	case dialog.CompletionSelectedMsg:
+		switch msg.Item.ProviderID {
+		case "commands":
+			commandName := strings.TrimPrefix(msg.Item.Value, "/")
+			updated, cmd := m.Clear()
+			m = updated.(*editorComponent)
+			cmds = append(cmds, cmd)
+			cmds = append(cmds, util.CmdHandler(commands.ExecuteCommandMsg(m.app.Commands[commands.CommandName(commandName)])))
+			return m, tea.Batch(cmds...)
+		case "files":
+			atIndex := m.textarea.LastRuneIndex('@')
+			if atIndex == -1 {
+				// Should not happen, but as a fallback, just insert.
+				m.textarea.InsertString(msg.Item.Value + " ")
+				return m, nil
+			}
+
+			// The range to replace is from the '@' up to the current cursor position.
+			// Replace the search term (e.g., "@search") with an empty string first.
+			cursorCol := m.textarea.CursorColumn()
+			m.textarea.ReplaceRange(atIndex, cursorCol, "")
+
+			// Now, insert the attachment at the position where the '@' was.
+			// The cursor is now at `atIndex` after the replacement.
+			filePath := msg.Item.Value
+			attachment := m.createAttachmentFromPath(filePath)
+			m.textarea.InsertAttachment(attachment)
+			m.textarea.InsertString(" ")
+			return m, nil
+		case "symbols":
+			atIndex := m.textarea.LastRuneIndex('@')
+			if atIndex == -1 {
+				// Should not happen, but as a fallback, just insert.
+				m.textarea.InsertString(msg.Item.Value + " ")
+				return m, nil
+			}
+
+			cursorCol := m.textarea.CursorColumn()
+			m.textarea.ReplaceRange(atIndex, cursorCol, "")
+
+			symbol := msg.Item.RawData.(opencode.Symbol)
+			parts := strings.Split(symbol.Name, ".")
+			lastPart := parts[len(parts)-1]
+			attachment := &attachment.Attachment{
+				ID:        uuid.NewString(),
+				Type:      "symbol",
+				Display:   "@" + lastPart,
+				URL:       msg.Item.Value,
+				Filename:  lastPart,
+				MediaType: "text/plain",
+				Source: &attachment.SymbolSource{
+					Path: symbol.Location.Uri,
+					Name: symbol.Name,
+					Kind: int(symbol.Kind),
+					Range: attachment.SymbolRange{
+						Start: attachment.Position{
+							Line: int(symbol.Location.Range.Start.Line),
+							Char: int(symbol.Location.Range.Start.Character),
+						},
+						End: attachment.Position{
+							Line: int(symbol.Location.Range.End.Line),
+							Char: int(symbol.Location.Range.End.Character),
+						},
+					},
+				},
+			}
+			m.textarea.InsertAttachment(attachment)
+			m.textarea.InsertString(" ")
+			return m, nil
+		default:
+			slog.Debug("Unknown provider", "provider", msg.Item.ProviderID)
+			return m, nil
+		}
+	}
+
+	m.spinner, cmd = m.spinner.Update(msg)
+	cmds = append(cmds, cmd)
+
+	m.textarea, cmd = m.textarea.Update(msg)
+	cmds = append(cmds, cmd)
+
+	return m, tea.Batch(cmds...)
+}
+
+func (m *editorComponent) Content() string {
+	width := m.width
+	if m.app.Session.ID == "" {
+		width = min(width, 80)
+	}
+
+	t := theme.CurrentTheme()
+	base := styles.NewStyle().Foreground(t.Text()).Background(t.Background()).Render
+	muted := styles.NewStyle().Foreground(t.TextMuted()).Background(t.Background()).Render
+	promptStyle := styles.NewStyle().Foreground(t.Primary()).
+		Padding(0, 0, 0, 1).
+		Bold(true)
+	prompt := promptStyle.Render(">")
+
+	m.textarea.SetWidth(width - 6)
+	textarea := lipgloss.JoinHorizontal(
+		lipgloss.Top,
+		prompt,
+		m.textarea.View(),
+	)
+	borderForeground := t.Border()
+	if m.app.IsLeaderSequence {
+		borderForeground = t.Accent()
+	}
+	textarea = styles.NewStyle().
+		Background(t.BackgroundElement()).
+		Width(width).
+		PaddingTop(1).
+		PaddingBottom(1).
+		BorderStyle(lipgloss.ThickBorder()).
+		BorderForeground(borderForeground).
+		BorderBackground(t.Background()).
+		BorderLeft(true).
+		BorderRight(true).
+		Render(textarea)
+
+	hint := base(m.getSubmitKeyText()) + muted(" send   ")
+	if m.exitKeyInDebounce {
+		keyText := m.getExitKeyText()
+		hint = base(keyText+" again") + muted(" to exit")
+	} else if m.app.IsBusy() {
+		keyText := m.getInterruptKeyText()
+		if m.interruptKeyInDebounce {
+			hint = muted(
+				"working",
+			) + m.spinner.View() + muted(
+				"  ",
+			) + base(
+				keyText+" again",
+			) + muted(
+				" interrupt",
+			)
+		} else {
+			hint = muted("working") + m.spinner.View() + muted("  ") + base(keyText) + muted(" interrupt")
+		}
+	}
+
+	model := ""
+	if m.app.Model != nil {
+		model = muted(m.app.Provider.Name) + base(" "+m.app.Model.Name)
+	}
+
+	space := width - 2 - lipgloss.Width(model) - lipgloss.Width(hint)
+	spacer := styles.NewStyle().Background(t.Background()).Width(space).Render("")
+
+	info := hint + spacer + model
+	info = styles.NewStyle().Background(t.Background()).Padding(0, 1).Render(info)
+
+	content := strings.Join([]string{"", textarea, info}, "\n")
+	return content
+}
+
+func (m *editorComponent) View() string {
+	width := m.width
+	if m.app.Session.ID == "" {
+		width = min(width, 80)
+	}
+
+	if m.Lines() > 1 {
+		return lipgloss.Place(
+			width,
+			5,
+			lipgloss.Center,
+			lipgloss.Center,
+			"",
+			styles.WhitespaceStyle(theme.CurrentTheme().Background()),
+		)
+	}
+	return m.Content()
+}
+
+func (m *editorComponent) Focused() bool {
+	return m.textarea.Focused()
+}
+
+func (m *editorComponent) Focus() (tea.Model, tea.Cmd) {
+	return m, m.textarea.Focus()
+}
+
+func (m *editorComponent) Blur() {
+	m.textarea.Blur()
+}
+
+func (m *editorComponent) Lines() int {
+	return m.textarea.LineCount()
+}
+
+func (m *editorComponent) Value() string {
+	return m.textarea.Value()
+}
+
+func (m *editorComponent) Length() int {
+	return m.textarea.Length()
+}
+
+func (m *editorComponent) Submit() (tea.Model, tea.Cmd) {
+	value := strings.TrimSpace(m.Value())
+	if value == "" {
+		return m, nil
+	}
+
+	switch value {
+	case "exit", "quit", "q", ":q":
+		return m, tea.Quit
+	}
+
+	if len(value) > 0 && value[len(value)-1] == '\\' {
+		// If the last character is a backslash, remove it and add a newline
+		backslashCol := m.textarea.CurrentRowLength() - 1
+		m.textarea.ReplaceRange(backslashCol, backslashCol+1, "")
+		m.textarea.InsertString("\n")
+		return m, nil
+	}
+
+	var cmds []tea.Cmd
+	attachments := m.textarea.GetAttachments()
+
+	prompt := app.Prompt{Text: value, Attachments: attachments}
+	m.app.State.AddPromptToHistory(prompt)
+	cmds = append(cmds, m.app.SaveState())
+
+	updated, cmd := m.Clear()
+	m = updated.(*editorComponent)
+	cmds = append(cmds, cmd)
+
+	cmds = append(cmds, util.CmdHandler(app.SendPrompt(prompt)))
+	return m, tea.Batch(cmds...)
+}
+
+func (m *editorComponent) Clear() (tea.Model, tea.Cmd) {
+	m.textarea.Reset()
+	m.historyIndex = -1
+	m.currentText = ""
+	m.pasteCounter = 0
+	return m, nil
+}
+
+func (m *editorComponent) Paste() (tea.Model, tea.Cmd) {
+	imageBytes := clipboard.Read(clipboard.FmtImage)
+	if imageBytes != nil {
+		attachmentCount := len(m.textarea.GetAttachments())
+		attachmentIndex := attachmentCount + 1
+		base64EncodedFile := base64.StdEncoding.EncodeToString(imageBytes)
+		attachment := &attachment.Attachment{
+			ID:        uuid.NewString(),
+			Type:      "file",
+			MediaType: "image/png",
+			Display:   fmt.Sprintf("[Image #%d]", attachmentIndex),
+			Filename:  fmt.Sprintf("image-%d.png", attachmentIndex),
+			URL:       fmt.Sprintf("data:image/png;base64,%s", base64EncodedFile),
+			Source: &attachment.FileSource{
+				Path: fmt.Sprintf("image-%d.png", attachmentIndex),
+				Mime: "image/png",
+				Data: imageBytes,
+			},
+		}
+		m.textarea.InsertAttachment(attachment)
+		m.textarea.InsertString(" ")
+		return m, nil
+	}
+
+	textBytes := clipboard.Read(clipboard.FmtText)
+	if textBytes != nil {
+		text := string(textBytes)
+		// Check if the pasted text is long and should be summarized
+		if m.shouldSummarizePastedText(text) {
+			m.handleLongPaste(text)
+		} else {
+			m.textarea.InsertRunesFromUserInput([]rune(text))
+		}
+		return m, nil
+	}
+
+	// fallback to reading the clipboard using OSC52
+	return m, tea.ReadClipboard
+}
+
+func (m *editorComponent) Newline() (tea.Model, tea.Cmd) {
+	m.textarea.Newline()
+	return m, nil
+}
+
+func (m *editorComponent) SetInterruptKeyInDebounce(inDebounce bool) {
+	m.interruptKeyInDebounce = inDebounce
+}
+
+func (m *editorComponent) SetValue(value string) {
+	m.textarea.SetValue(value)
+}
+
+func (m *editorComponent) SetValueWithAttachments(value string) {
+	m.textarea.Reset()
+
+	i := 0
+	for i < len(value) {
+		// Check if filepath and add attachment
+		if value[i] == '@' {
+			start := i + 1
+			end := start
+			for end < len(value) && value[end] != ' ' && value[end] != '\t' && value[end] != '\n' && value[end] != '\r' {
+				end++
+			}
+
+			if end > start {
+				filePath := value[start:end]
+				slog.Debug("test", "filePath", filePath)
+				if _, err := os.Stat(filepath.Join(m.app.Info.Path.Cwd, filePath)); err == nil {
+					slog.Debug("test", "found", true)
+					attachment := m.createAttachmentFromFile(filePath)
+					if attachment != nil {
+						m.textarea.InsertAttachment(attachment)
+						i = end
+						continue
+					}
+				}
+			}
+		}
+
+		// Not a valid file path, insert the character normally
+		m.textarea.InsertRune(rune(value[i]))
+		i++
+	}
+}
+
+func (m *editorComponent) SetExitKeyInDebounce(inDebounce bool) {
+	m.exitKeyInDebounce = inDebounce
+}
+
+func (m *editorComponent) getInterruptKeyText() string {
+	return m.app.Commands[commands.SessionInterruptCommand].Keys()[0]
+}
+
+func (m *editorComponent) getSubmitKeyText() string {
+	return m.app.Commands[commands.InputSubmitCommand].Keys()[0]
+}
+
+func (m *editorComponent) getExitKeyText() string {
+	return m.app.Commands[commands.AppExitCommand].Keys()[0]
+}
+
+// shouldSummarizePastedText determines if pasted text should be summarized
+func (m *editorComponent) shouldSummarizePastedText(text string) bool {
+	lines := strings.Split(text, "\n")
+	lineCount := len(lines)
+	charCount := len(text)
+
+	// Consider text long if it has more than 3 lines or more than 150 characters
+	return lineCount > 3 || charCount > 150
+}
+
+// handleLongPaste handles long pasted text by creating a summary attachment
+func (m *editorComponent) handleLongPaste(text string) {
+	lines := strings.Split(text, "\n")
+	lineCount := len(lines)
+
+	// Increment paste counter
+	m.pasteCounter++
+
+	// Create attachment with full text as base64 encoded data
+	fileBytes := []byte(text)
+	base64EncodedText := base64.StdEncoding.EncodeToString(fileBytes)
+	url := fmt.Sprintf("data:text/plain;base64,%s", base64EncodedText)
+
+	fileName := fmt.Sprintf("pasted-text-%d.txt", m.pasteCounter)
+	displayText := fmt.Sprintf("[pasted #%d %d+ lines]", m.pasteCounter, lineCount)
+
+	attachment := &attachment.Attachment{
+		ID:        uuid.NewString(),
+		Type:      "text",
+		MediaType: "text/plain",
+		Display:   displayText,
+		URL:       url,
+		Filename:  fileName,
+		Source: &attachment.TextSource{
+			Value: text,
+		},
+	}
+
+	m.textarea.InsertAttachment(attachment)
+	m.textarea.InsertString(" ")
+}
+
+func updateTextareaStyles(ta textarea.Model) textarea.Model {
+	t := theme.CurrentTheme()
+	bgColor := t.BackgroundElement()
+	textColor := t.Text()
+	textMutedColor := t.TextMuted()
+
+	ta.Styles.Blurred.Base = styles.NewStyle().Foreground(textColor).Background(bgColor).Lipgloss()
+	ta.Styles.Blurred.CursorLine = styles.NewStyle().Background(bgColor).Lipgloss()
+	ta.Styles.Blurred.Placeholder = styles.NewStyle().
+		Foreground(textMutedColor).
+		Background(bgColor).
+		Lipgloss()
+	ta.Styles.Blurred.Text = styles.NewStyle().Foreground(textColor).Background(bgColor).Lipgloss()
+	ta.Styles.Focused.Base = styles.NewStyle().Foreground(textColor).Background(bgColor).Lipgloss()
+	ta.Styles.Focused.CursorLine = styles.NewStyle().Background(bgColor).Lipgloss()
+	ta.Styles.Focused.Placeholder = styles.NewStyle().
+		Foreground(textMutedColor).
+		Background(bgColor).
+		Lipgloss()
+	ta.Styles.Focused.Text = styles.NewStyle().Foreground(textColor).Background(bgColor).Lipgloss()
+	ta.Styles.Attachment = styles.NewStyle().
+		Foreground(t.Secondary()).
+		Background(bgColor).
+		Lipgloss()
+	ta.Styles.SelectedAttachment = styles.NewStyle().
+		Foreground(t.Text()).
+		Background(t.Secondary()).
+		Lipgloss()
+	ta.Styles.Cursor.Color = t.Primary()
+	return ta
+}
+
+func createSpinner() spinner.Model {
+	t := theme.CurrentTheme()
+	return spinner.New(
+		spinner.WithSpinner(spinner.Ellipsis),
+		spinner.WithStyle(
+			styles.NewStyle().
+				Background(t.Background()).
+				Foreground(t.TextMuted()).
+				Width(3).
+				Lipgloss(),
+		),
+	)
+}
+
+func NewEditorComponent(app *app.App) EditorComponent {
+	s := createSpinner()
+
+	ta := textarea.New()
+	ta.Prompt = " "
+	ta.ShowLineNumbers = false
+	ta.CharLimit = -1
+	ta = updateTextareaStyles(ta)
+
+	m := &editorComponent{
+		app:                    app,
+		textarea:               ta,
+		spinner:                s,
+		interruptKeyInDebounce: false,
+		historyIndex:           -1,
+		pasteCounter:           0,
+	}
+
+	return m
+}
+
+func (m *editorComponent) RestoreFromPrompt(prompt app.Prompt) {
+	m.textarea.Reset()
+	m.textarea.SetValue(prompt.Text)
+
+	// Sort attachments by start index in reverse order (process from end to beginning)
+	// This prevents index shifting issues
+	attachmentsCopy := make([]*attachment.Attachment, len(prompt.Attachments))
+	copy(attachmentsCopy, prompt.Attachments)
+
+	for i := 0; i < len(attachmentsCopy)-1; i++ {
+		for j := i + 1; j < len(attachmentsCopy); j++ {
+			if attachmentsCopy[i].StartIndex < attachmentsCopy[j].StartIndex {
+				attachmentsCopy[i], attachmentsCopy[j] = attachmentsCopy[j], attachmentsCopy[i]
+			}
+		}
+	}
+
+	for _, att := range attachmentsCopy {
+		m.textarea.SetCursorColumn(att.StartIndex)
+		m.textarea.ReplaceRange(att.StartIndex, att.EndIndex, "")
+		m.textarea.InsertAttachment(att)
+	}
+}
+
+// RestoreFromHistory restores a message from history at the given index
+func (m *editorComponent) RestoreFromHistory(index int) {
+	if index < 0 || index >= len(m.app.State.MessageHistory) {
+		return
+	}
+	entry := m.app.State.MessageHistory[index]
+	m.RestoreFromPrompt(entry)
+}
+
+func getMediaTypeFromExtension(ext string) string {
+	switch strings.ToLower(ext) {
+	case ".jpg":
+		return "image/jpeg"
+	case ".png", ".jpeg", ".gif", ".webp":
+		return "image/" + ext[1:]
+	case ".pdf":
+		return "application/pdf"
+	default:
+		return "text/plain"
+	}
+}
+
+func (m *editorComponent) createAttachmentFromFile(filePath string) *attachment.Attachment {
+	ext := strings.ToLower(filepath.Ext(filePath))
+	mediaType := getMediaTypeFromExtension(ext)
+	absolutePath := filePath
+	if !filepath.IsAbs(filePath) {
+		absolutePath = filepath.Join(m.app.Info.Path.Cwd, filePath)
+	}
+
+	// For text files, create a simple file reference
+	if mediaType == "text/plain" {
+		return &attachment.Attachment{
+			ID:        uuid.NewString(),
+			Type:      "file",
+			Display:   "@" + filePath,
+			URL:       fmt.Sprintf("file://./%s", filePath),
+			Filename:  filePath,
+			MediaType: mediaType,
+			Source: &attachment.FileSource{
+				Path: absolutePath,
+				Mime: mediaType,
+			},
+		}
+	}
+
+	// For binary files (images, PDFs), read and encode
+	fileBytes, err := os.ReadFile(filePath)
+	if err != nil {
+		slog.Error("Failed to read file", "error", err)
+		return nil
+	}
+
+	base64EncodedFile := base64.StdEncoding.EncodeToString(fileBytes)
+	url := fmt.Sprintf("data:%s;base64,%s", mediaType, base64EncodedFile)
+	attachmentCount := len(m.textarea.GetAttachments())
+	attachmentIndex := attachmentCount + 1
+	label := "File"
+	if strings.HasPrefix(mediaType, "image/") {
+		label = "Image"
+	}
+	return &attachment.Attachment{
+		ID:        uuid.NewString(),
+		Type:      "file",
+		MediaType: mediaType,
+		Display:   fmt.Sprintf("[%s #%d]", label, attachmentIndex),
+		URL:       url,
+		Filename:  filePath,
+		Source: &attachment.FileSource{
+			Path: absolutePath,
+			Mime: mediaType,
+			Data: fileBytes,
+		},
+	}
+}
+
+func (m *editorComponent) createAttachmentFromPath(filePath string) *attachment.Attachment {
+	extension := filepath.Ext(filePath)
+	mediaType := getMediaTypeFromExtension(extension)
+	absolutePath := filePath
+	if !filepath.IsAbs(filePath) {
+		absolutePath = filepath.Join(m.app.Info.Path.Cwd, filePath)
+	}
+	return &attachment.Attachment{
+		ID:        uuid.NewString(),
+		Type:      "file",
+		Display:   "@" + filePath,
+		URL:       fmt.Sprintf("file://./%s", url.PathEscape(filePath)),
+		Filename:  filePath,
+		MediaType: mediaType,
+		Source: &attachment.FileSource{
+			Path: absolutePath,
+			Mime: mediaType,
+		},
+	}
+}

packages/client/tui/internal/components/chat/message.go

@@ -0,0 +1,719 @@
+package chat
+
+import (
+	"encoding/json"
+	"fmt"
+	"slices"
+	"strings"
+	"time"
+
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/charmbracelet/lipgloss/v2/compat"
+	"github.com/charmbracelet/x/ansi"
+	"github.com/muesli/reflow/truncate"
+	"github.com/sst/opencode-sdk-go"
+	"github.com/sst/opencode/internal/app"
+	"github.com/sst/opencode/internal/components/diff"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+	"golang.org/x/text/cases"
+	"golang.org/x/text/language"
+)
+
+type blockRenderer struct {
+	textColor        compat.AdaptiveColor
+	border           bool
+	borderColor      *compat.AdaptiveColor
+	borderColorRight bool
+	paddingTop       int
+	paddingBottom    int
+	paddingLeft      int
+	paddingRight     int
+	marginTop        int
+	marginBottom     int
+}
+
+type renderingOption func(*blockRenderer)
+
+func WithTextColor(color compat.AdaptiveColor) renderingOption {
+	return func(c *blockRenderer) {
+		c.textColor = color
+	}
+}
+
+func WithNoBorder() renderingOption {
+	return func(c *blockRenderer) {
+		c.border = false
+	}
+}
+
+func WithBorderColor(color compat.AdaptiveColor) renderingOption {
+	return func(c *blockRenderer) {
+		c.borderColor = &color
+	}
+}
+
+func WithBorderColorRight(color compat.AdaptiveColor) renderingOption {
+	return func(c *blockRenderer) {
+		c.borderColorRight = true
+		c.borderColor = &color
+	}
+}
+
+func WithMarginTop(padding int) renderingOption {
+	return func(c *blockRenderer) {
+		c.marginTop = padding
+	}
+}
+
+func WithMarginBottom(padding int) renderingOption {
+	return func(c *blockRenderer) {
+		c.marginBottom = padding
+	}
+}
+
+func WithPadding(padding int) renderingOption {
+	return func(c *blockRenderer) {
+		c.paddingTop = padding
+		c.paddingBottom = padding
+		c.paddingLeft = padding
+		c.paddingRight = padding
+	}
+}
+
+func WithPaddingLeft(padding int) renderingOption {
+	return func(c *blockRenderer) {
+		c.paddingLeft = padding
+	}
+}
+
+func WithPaddingRight(padding int) renderingOption {
+	return func(c *blockRenderer) {
+		c.paddingRight = padding
+	}
+}
+
+func WithPaddingTop(padding int) renderingOption {
+	return func(c *blockRenderer) {
+		c.paddingTop = padding
+	}
+}
+
+func WithPaddingBottom(padding int) renderingOption {
+	return func(c *blockRenderer) {
+		c.paddingBottom = padding
+	}
+}
+
+func renderContentBlock(
+	app *app.App,
+	content string,
+	width int,
+	options ...renderingOption,
+) string {
+	t := theme.CurrentTheme()
+	renderer := &blockRenderer{
+		textColor:     t.TextMuted(),
+		border:        true,
+		paddingTop:    1,
+		paddingBottom: 1,
+		paddingLeft:   2,
+		paddingRight:  2,
+	}
+	for _, option := range options {
+		option(renderer)
+	}
+
+	borderColor := t.BackgroundPanel()
+	if renderer.borderColor != nil {
+		borderColor = *renderer.borderColor
+	}
+
+	style := styles.NewStyle().
+		Foreground(renderer.textColor).
+		Background(t.BackgroundPanel()).
+		PaddingTop(renderer.paddingTop).
+		PaddingBottom(renderer.paddingBottom).
+		PaddingLeft(renderer.paddingLeft).
+		PaddingRight(renderer.paddingRight).
+		AlignHorizontal(lipgloss.Left)
+
+	if renderer.border {
+		style = style.
+			BorderStyle(lipgloss.ThickBorder()).
+			BorderLeft(true).
+			BorderRight(true).
+			BorderLeftForeground(borderColor).
+			BorderLeftBackground(t.Background()).
+			BorderRightForeground(t.BackgroundPanel()).
+			BorderRightBackground(t.Background())
+
+		if renderer.borderColorRight {
+			style = style.
+				BorderLeftBackground(t.Background()).
+				BorderLeftForeground(t.BackgroundPanel()).
+				BorderRightForeground(borderColor).
+				BorderRightBackground(t.Background())
+		}
+
+	}
+
+	content = style.Render(content)
+	if renderer.marginTop > 0 {
+		for range renderer.marginTop {
+			content = "\n" + content
+		}
+	}
+	if renderer.marginBottom > 0 {
+		for range renderer.marginBottom {
+			content = content + "\n"
+		}
+	}
+
+	return content
+}
+
+func renderText(
+	app *app.App,
+	message opencode.MessageUnion,
+	text string,
+	author string,
+	showToolDetails bool,
+	width int,
+	extra string,
+	toolCalls ...opencode.ToolPart,
+) string {
+	t := theme.CurrentTheme()
+
+	var ts time.Time
+	backgroundColor := t.BackgroundPanel()
+	var content string
+	switch casted := message.(type) {
+	case opencode.AssistantMessage:
+		ts = time.UnixMilli(int64(casted.Time.Created))
+		content = util.ToMarkdown(text, width, backgroundColor)
+	case opencode.UserMessage:
+		ts = time.UnixMilli(int64(casted.Time.Created))
+		base := styles.NewStyle().Foreground(t.Text()).Background(backgroundColor)
+		text = ansi.WordwrapWc(text, width-6, " -")
+		lines := strings.Split(text, "\n")
+		for i, line := range lines {
+			words := strings.Fields(line)
+			for i, word := range words {
+				if strings.HasPrefix(word, "@") {
+					words[i] = base.Foreground(t.Secondary()).Render(word + " ")
+				} else {
+					words[i] = base.Render(word + " ")
+				}
+			}
+			lines[i] = strings.Join(words, "")
+		}
+		text = strings.Join(lines, "\n")
+		content = base.Width(width - 6).Render(text)
+	}
+
+	timestamp := ts.
+		Local().
+		Format("02 Jan 2006 03:04 PM")
+	if time.Now().Format("02 Jan 2006") == timestamp[:11] {
+		// don't show the date if it's today
+		timestamp = timestamp[12:]
+	}
+	info := fmt.Sprintf("%s (%s)", author, timestamp)
+	info = styles.NewStyle().Foreground(t.TextMuted()).Render(info)
+
+	if !showToolDetails && toolCalls != nil && len(toolCalls) > 0 {
+		content = content + "\n\n"
+		for _, toolCall := range toolCalls {
+			title := renderToolTitle(toolCall, width)
+			style := styles.NewStyle()
+			if toolCall.State.Status == opencode.ToolPartStateStatusError {
+				style = style.Foreground(t.Error())
+			}
+			title = style.Render(title)
+			title = "∟ " + title + "\n"
+			content = content + title
+		}
+	}
+
+	sections := []string{content, info}
+	if extra != "" {
+		sections = append(sections, "\n"+extra)
+	}
+	content = strings.Join(sections, "\n")
+
+	switch message.(type) {
+	case opencode.UserMessage:
+		return renderContentBlock(
+			app,
+			content,
+			width,
+			WithTextColor(t.Text()),
+			WithBorderColorRight(t.Secondary()),
+		)
+	case opencode.AssistantMessage:
+		return renderContentBlock(
+			app,
+			content,
+			width,
+			WithBorderColor(t.Accent()),
+		)
+	}
+	return ""
+}
+
+func renderToolDetails(
+	app *app.App,
+	toolCall opencode.ToolPart,
+	width int,
+) string {
+	measure := util.Measure("chat.renderToolDetails")
+	defer measure("tool", toolCall.Tool)
+	ignoredTools := []string{"todoread"}
+	if slices.Contains(ignoredTools, toolCall.Tool) {
+		return ""
+	}
+
+	if toolCall.State.Status == opencode.ToolPartStateStatusPending {
+		title := renderToolTitle(toolCall, width)
+		return renderContentBlock(app, title, width)
+	}
+
+	var result *string
+	if toolCall.State.Output != "" {
+		result = &toolCall.State.Output
+	}
+
+	toolInputMap := make(map[string]any)
+	if toolCall.State.Input != nil {
+		value := toolCall.State.Input
+		if m, ok := value.(map[string]any); ok {
+			toolInputMap = m
+			keys := make([]string, 0, len(toolInputMap))
+			for key := range toolInputMap {
+				keys = append(keys, key)
+			}
+			slices.Sort(keys)
+		}
+	}
+
+	body := ""
+	t := theme.CurrentTheme()
+	backgroundColor := t.BackgroundPanel()
+	borderColor := t.BackgroundPanel()
+	defaultStyle := styles.NewStyle().Background(backgroundColor).Width(width - 6).Render
+
+	if toolCall.State.Metadata != nil {
+		metadata := toolCall.State.Metadata.(map[string]any)
+		switch toolCall.Tool {
+		case "read":
+			var preview any
+			if metadata != nil {
+				preview = metadata["preview"]
+			}
+			if preview != nil && toolInputMap["filePath"] != nil {
+				filename := toolInputMap["filePath"].(string)
+				body = preview.(string)
+				body = util.RenderFile(filename, body, width, util.WithTruncate(6))
+			}
+		case "edit":
+			if filename, ok := toolInputMap["filePath"].(string); ok {
+				var diffField any
+				if metadata != nil {
+					diffField = metadata["diff"]
+				}
+				if diffField != nil {
+					patch := diffField.(string)
+					var formattedDiff string
+					if width < 120 {
+						formattedDiff, _ = diff.FormatUnifiedDiff(
+							filename,
+							patch,
+							diff.WithWidth(width-2),
+						)
+					} else {
+						formattedDiff, _ = diff.FormatDiff(
+							filename,
+							patch,
+							diff.WithWidth(width-2),
+						)
+					}
+					body = strings.TrimSpace(formattedDiff)
+					style := styles.NewStyle().
+						Background(backgroundColor).
+						Foreground(t.TextMuted()).
+						Padding(1, 2).
+						Width(width - 4)
+
+					if diagnostics := renderDiagnostics(metadata, filename, backgroundColor, width-6); diagnostics != "" {
+						diagnostics = style.Render(diagnostics)
+						body += "\n" + diagnostics
+					}
+
+					title := renderToolTitle(toolCall, width)
+					title = style.Render(title)
+					content := title + "\n" + body
+					content = renderContentBlock(
+						app,
+						content,
+						width,
+						WithPadding(0),
+						WithBorderColor(borderColor),
+					)
+					return content
+				}
+			}
+		case "write":
+			if filename, ok := toolInputMap["filePath"].(string); ok {
+				if content, ok := toolInputMap["content"].(string); ok {
+					body = util.RenderFile(filename, content, width)
+					if diagnostics := renderDiagnostics(metadata, filename, backgroundColor, width-4); diagnostics != "" {
+						body += "\n\n" + diagnostics
+					}
+				}
+			}
+		case "bash":
+			command := toolInputMap["command"].(string)
+			body = fmt.Sprintf("```console\n$ %s\n", command)
+			stdout := metadata["stdout"]
+			if stdout != nil {
+				body += ansi.Strip(fmt.Sprintf("%s", stdout))
+			}
+			body += "```"
+			body = util.ToMarkdown(body, width, backgroundColor)
+		case "webfetch":
+			if format, ok := toolInputMap["format"].(string); ok && result != nil {
+				body = *result
+				body = util.TruncateHeight(body, 10)
+				if format == "html" || format == "markdown" {
+					body = util.ToMarkdown(body, width, backgroundColor)
+				}
+			}
+		case "todowrite":
+			todos := metadata["todos"]
+			if todos != nil {
+				for _, item := range todos.([]any) {
+					todo := item.(map[string]any)
+					content := todo["content"].(string)
+					switch todo["status"] {
+					case "completed":
+						body += fmt.Sprintf("- [x] %s\n", content)
+					case "cancelled":
+						// strike through cancelled todo
+						body += fmt.Sprintf("- [ ] ~~%s~~\n", content)
+					case "in_progress":
+						// highlight in progress todo
+						body += fmt.Sprintf("- [ ] `%s`\n", content)
+					default:
+						body += fmt.Sprintf("- [ ] %s\n", content)
+					}
+				}
+				body = util.ToMarkdown(body, width, backgroundColor)
+			}
+		case "task":
+			summary := metadata["summary"]
+			if summary != nil {
+				toolcalls := summary.([]any)
+				steps := []string{}
+				for _, item := range toolcalls {
+					data, _ := json.Marshal(item)
+					var toolCall opencode.ToolPart
+					_ = json.Unmarshal(data, &toolCall)
+					step := renderToolTitle(toolCall, width)
+					step = "∟ " + step
+					steps = append(steps, step)
+				}
+				body = strings.Join(steps, "\n")
+			}
+			body = defaultStyle(body)
+		default:
+			if result == nil {
+				empty := ""
+				result = &empty
+			}
+			body = *result
+			body = util.TruncateHeight(body, 10)
+			body = defaultStyle(body)
+		}
+	}
+
+	error := ""
+	if toolCall.State.Status == opencode.ToolPartStateStatusError {
+		error = toolCall.State.Error
+	}
+
+	if error != "" {
+		body = styles.NewStyle().
+			Width(width - 6).
+			Foreground(t.Error()).
+			Background(backgroundColor).
+			Render(error)
+	}
+
+	if body == "" && error == "" && result != nil {
+		body = *result
+		body = util.TruncateHeight(body, 10)
+		body = defaultStyle(body)
+	}
+
+	if body == "" {
+		body = defaultStyle("")
+	}
+
+	title := renderToolTitle(toolCall, width)
+	content := title + "\n\n" + body
+	return renderContentBlock(app, content, width, WithBorderColor(borderColor))
+}
+
+func renderToolName(name string) string {
+	switch name {
+	case "webfetch":
+		return "Fetch"
+	default:
+		normalizedName := name
+		if after, ok := strings.CutPrefix(name, "opencode_"); ok {
+			normalizedName = after
+		}
+		return cases.Title(language.Und).String(normalizedName)
+	}
+}
+
+func getTodoPhase(metadata map[string]any) string {
+	todos, ok := metadata["todos"].([]any)
+	if !ok || len(todos) == 0 {
+		return "Plan"
+	}
+
+	counts := map[string]int{"pending": 0, "completed": 0}
+	for _, item := range todos {
+		if todo, ok := item.(map[string]any); ok {
+			if status, ok := todo["status"].(string); ok {
+				counts[status]++
+			}
+		}
+	}
+
+	total := len(todos)
+	switch {
+	case counts["pending"] == total:
+		return "Creating plan"
+	case counts["completed"] == total:
+		return "Completing plan"
+	default:
+		return "Updating plan"
+	}
+}
+
+func getTodoTitle(toolCall opencode.ToolPart) string {
+	if toolCall.State.Status == opencode.ToolPartStateStatusCompleted {
+		if metadata, ok := toolCall.State.Metadata.(map[string]any); ok {
+			return getTodoPhase(metadata)
+		}
+	}
+	return "Plan"
+}
+
+func renderToolTitle(
+	toolCall opencode.ToolPart,
+	width int,
+) string {
+	if toolCall.State.Status == opencode.ToolPartStateStatusPending {
+		title := renderToolAction(toolCall.Tool)
+		return styles.NewStyle().Width(width - 6).Render(title)
+	}
+
+	toolArgs := ""
+	toolArgsMap := make(map[string]any)
+	if toolCall.State.Input != nil {
+		value := toolCall.State.Input
+		if m, ok := value.(map[string]any); ok {
+			toolArgsMap = m
+
+			keys := make([]string, 0, len(toolArgsMap))
+			for key := range toolArgsMap {
+				keys = append(keys, key)
+			}
+			slices.Sort(keys)
+			firstKey := ""
+			if len(keys) > 0 {
+				firstKey = keys[0]
+			}
+
+			toolArgs = renderArgs(&toolArgsMap, firstKey)
+		}
+	}
+
+	title := renderToolName(toolCall.Tool)
+	switch toolCall.Tool {
+	case "read":
+		toolArgs = renderArgs(&toolArgsMap, "filePath")
+		title = fmt.Sprintf("%s %s", title, toolArgs)
+	case "edit", "write":
+		if filename, ok := toolArgsMap["filePath"].(string); ok {
+			title = fmt.Sprintf("%s %s", title, util.Relative(filename))
+		}
+	case "bash", "task":
+		if description, ok := toolArgsMap["description"].(string); ok {
+			title = fmt.Sprintf("%s %s", title, description)
+		}
+	case "webfetch":
+		toolArgs = renderArgs(&toolArgsMap, "url")
+		title = fmt.Sprintf("%s %s", title, toolArgs)
+	case "todowrite":
+		title = getTodoTitle(toolCall)
+	case "todoread":
+		return "Plan"
+	default:
+		toolName := renderToolName(toolCall.Tool)
+		title = fmt.Sprintf("%s %s", toolName, toolArgs)
+	}
+
+	title = truncate.StringWithTail(title, uint(width-6), "...")
+	return title
+}
+
+func renderToolAction(name string) string {
+	switch name {
+	case "task":
+		return "Planning..."
+	case "bash":
+		return "Writing command..."
+	case "edit":
+		return "Preparing edit..."
+	case "webfetch":
+		return "Fetching from the web..."
+	case "glob":
+		return "Finding files..."
+	case "grep":
+		return "Searching content..."
+	case "list":
+		return "Listing directory..."
+	case "read":
+		return "Reading file..."
+	case "write":
+		return "Preparing write..."
+	case "todowrite", "todoread":
+		return "Planning..."
+	case "patch":
+		return "Preparing patch..."
+	}
+	return "Working..."
+}
+
+func renderArgs(args *map[string]any, titleKey string) string {
+	if args == nil || len(*args) == 0 {
+		return ""
+	}
+
+	keys := make([]string, 0, len(*args))
+	for key := range *args {
+		keys = append(keys, key)
+	}
+	slices.Sort(keys)
+
+	title := ""
+	parts := []string{}
+	for _, key := range keys {
+		value := (*args)[key]
+		if value == nil {
+			continue
+		}
+		if key == "filePath" || key == "path" {
+			value = util.Relative(value.(string))
+		}
+		if key == titleKey {
+			title = fmt.Sprintf("%s", value)
+			continue
+		}
+		parts = append(parts, fmt.Sprintf("%s=%v", key, value))
+	}
+	if len(parts) == 0 {
+		return title
+	}
+	return fmt.Sprintf("%s (%s)", title, strings.Join(parts, ", "))
+}
+
+// Diagnostic represents an LSP diagnostic
+type Diagnostic struct {
+	Range struct {
+		Start struct {
+			Line      int `json:"line"`
+			Character int `json:"character"`
+		} `json:"start"`
+	} `json:"range"`
+	Severity int    `json:"severity"`
+	Message  string `json:"message"`
+}
+
+// renderDiagnostics formats LSP diagnostics for display in the TUI
+func renderDiagnostics(
+	metadata map[string]any,
+	filePath string,
+	backgroundColor compat.AdaptiveColor,
+	width int,
+) string {
+	if diagnosticsData, ok := metadata["diagnostics"].(map[string]any); ok {
+		if fileDiagnostics, ok := diagnosticsData[filePath].([]any); ok {
+			var errorDiagnostics []string
+			for _, diagInterface := range fileDiagnostics {
+				diagMap, ok := diagInterface.(map[string]any)
+				if !ok {
+					continue
+				}
+				// Parse the diagnostic
+				var diag Diagnostic
+				diagBytes, err := json.Marshal(diagMap)
+				if err != nil {
+					continue
+				}
+				if err := json.Unmarshal(diagBytes, &diag); err != nil {
+					continue
+				}
+				// Only show error diagnostics (severity === 1)
+				if diag.Severity != 1 {
+					continue
+				}
+				line := diag.Range.Start.Line + 1        // 1-based
+				column := diag.Range.Start.Character + 1 // 1-based
+				errorDiagnostics = append(
+					errorDiagnostics,
+					fmt.Sprintf("Error [%d:%d] %s", line, column, diag.Message),
+				)
+			}
+			if len(errorDiagnostics) == 0 {
+				return ""
+			}
+			t := theme.CurrentTheme()
+			var result strings.Builder
+			for _, diagnostic := range errorDiagnostics {
+				if result.Len() > 0 {
+					result.WriteString("\n\n")
+				}
+				diagnostic = ansi.WordwrapWc(diagnostic, width, " -")
+				result.WriteString(
+					styles.NewStyle().
+						Background(backgroundColor).
+						Foreground(t.Error()).
+						Render(diagnostic),
+				)
+			}
+			return result.String()
+		}
+	}
+	return ""
+
+	// diagnosticsData should be a map[string][]Diagnostic
+	// strDiagnosticsData := diagnosticsData.Raw()
+	// diagnosticsMap := gjson.Parse(strDiagnosticsData).Value().(map[string]any)
+	// fileDiagnostics, ok := diagnosticsMap[filePath]
+	// if !ok {
+	// 	return ""
+	// }
+
+	// diagnosticsList, ok := fileDiagnostics.([]any)
+	// if !ok {
+	// 	return ""
+	// }
+
+}

packages/client/tui/internal/components/commands/commands.go

@@ -0,0 +1,247 @@
+package commands
+
+import (
+	"fmt"
+	"runtime"
+	"strings"
+
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/charmbracelet/lipgloss/v2/compat"
+	"github.com/sst/opencode/internal/app"
+	"github.com/sst/opencode/internal/commands"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+type CommandsComponent interface {
+	tea.ViewModel
+	SetSize(width, height int) tea.Cmd
+	SetBackgroundColor(color compat.AdaptiveColor)
+}
+
+type commandsComponent struct {
+	app           *app.App
+	width, height int
+	showKeybinds  bool
+	showAll       bool
+	showVscode    bool
+	background    *compat.AdaptiveColor
+	limit         *int
+}
+
+func (c *commandsComponent) SetSize(width, height int) tea.Cmd {
+	c.width = width
+	c.height = height
+	return nil
+}
+
+func (c *commandsComponent) SetBackgroundColor(color compat.AdaptiveColor) {
+	c.background = &color
+}
+
+func (c *commandsComponent) View() string {
+	t := theme.CurrentTheme()
+
+	triggerStyle := styles.NewStyle().Foreground(t.Primary()).Bold(true)
+	descriptionStyle := styles.NewStyle().Foreground(t.Text())
+	keybindStyle := styles.NewStyle().Foreground(t.TextMuted())
+
+	if c.background != nil {
+		triggerStyle = triggerStyle.Background(*c.background)
+		descriptionStyle = descriptionStyle.Background(*c.background)
+		keybindStyle = keybindStyle.Background(*c.background)
+	}
+
+	var commandsToShow []commands.Command
+	var triggeredCommands []commands.Command
+	var untriggeredCommands []commands.Command
+
+	for _, cmd := range c.app.Commands.Sorted() {
+		if c.showAll || cmd.HasTrigger() {
+			if cmd.HasTrigger() {
+				triggeredCommands = append(triggeredCommands, cmd)
+			} else if c.showAll {
+				untriggeredCommands = append(untriggeredCommands, cmd)
+			}
+		}
+	}
+
+	// Combine triggered commands first, then untriggered
+	commandsToShow = append(commandsToShow, triggeredCommands...)
+	commandsToShow = append(commandsToShow, untriggeredCommands...)
+
+	if c.limit != nil && len(commandsToShow) > *c.limit {
+		commandsToShow = commandsToShow[:*c.limit]
+	}
+
+	if c.showVscode {
+		ctrlKey := "ctrl"
+		if runtime.GOOS == "darwin" {
+			ctrlKey = "cmd"
+		}
+		commandsToShow = append(commandsToShow,
+			// empty line
+			commands.Command{
+				Name:        "",
+				Description: "",
+			},
+			commands.Command{
+				Name:        commands.CommandName(util.Ide()),
+				Description: "open opencode",
+				Keybindings: []commands.Keybinding{
+					{Key: ctrlKey + "+esc", RequiresLeader: false},
+				},
+			},
+			commands.Command{
+				Name:        commands.CommandName(util.Ide()),
+				Description: "reference file",
+				Keybindings: []commands.Keybinding{
+					{Key: ctrlKey + "+opt+k", RequiresLeader: false},
+				},
+			},
+		)
+	}
+
+	if len(commandsToShow) == 0 {
+		muted := styles.NewStyle().Foreground(theme.CurrentTheme().TextMuted())
+		if c.showAll {
+			return muted.Render("No commands available")
+		}
+		return muted.Render("No commands with triggers available")
+	}
+
+	// Calculate column widths
+	maxTriggerWidth := 0
+	maxDescriptionWidth := 0
+	maxKeybindWidth := 0
+
+	// Prepare command data
+	type commandRow struct {
+		trigger     string
+		description string
+		keybinds    string
+	}
+
+	rows := make([]commandRow, 0, len(commandsToShow))
+
+	for _, cmd := range commandsToShow {
+		trigger := ""
+		if cmd.HasTrigger() {
+			trigger = "/" + cmd.PrimaryTrigger()
+		} else {
+			trigger = string(cmd.Name)
+		}
+		description := cmd.Description
+
+		// Format keybindings
+		var keybindStrs []string
+		if c.showKeybinds {
+			for _, kb := range cmd.Keybindings {
+				if kb.RequiresLeader {
+					keybindStrs = append(keybindStrs, c.app.Config.Keybinds.Leader+" "+kb.Key)
+				} else {
+					keybindStrs = append(keybindStrs, kb.Key)
+				}
+			}
+		}
+		keybinds := strings.Join(keybindStrs, ", ")
+
+		rows = append(rows, commandRow{
+			trigger:     trigger,
+			description: description,
+			keybinds:    keybinds,
+		})
+
+		// Update max widths
+		if len(trigger) > maxTriggerWidth {
+			maxTriggerWidth = len(trigger)
+		}
+		if len(description) > maxDescriptionWidth {
+			maxDescriptionWidth = len(description)
+		}
+		if len(keybinds) > maxKeybindWidth {
+			maxKeybindWidth = len(keybinds)
+		}
+	}
+
+	// Add padding between columns
+	columnPadding := 3
+
+	// Build the output
+	var output strings.Builder
+
+	maxWidth := 0
+	for _, row := range rows {
+		// Pad each column to align properly
+		trigger := fmt.Sprintf("%-*s", maxTriggerWidth, row.trigger)
+		description := fmt.Sprintf("%-*s", maxDescriptionWidth, row.description)
+
+		// Apply styles and combine
+		line := triggerStyle.Render(trigger) +
+			triggerStyle.Render(strings.Repeat(" ", columnPadding)) +
+			descriptionStyle.Render(description)
+
+		if c.showKeybinds && row.keybinds != "" {
+			line += keybindStyle.Render(strings.Repeat(" ", columnPadding)) +
+				keybindStyle.Render(row.keybinds)
+		}
+
+		output.WriteString(line + "\n")
+		maxWidth = max(maxWidth, lipgloss.Width(line))
+	}
+
+	// Remove trailing newline
+	result := strings.TrimSuffix(output.String(), "\n")
+	if c.background != nil {
+		result = styles.NewStyle().Background(*c.background).Width(maxWidth).Render(result)
+	}
+
+	return result
+}
+
+type Option func(*commandsComponent)
+
+func WithKeybinds(show bool) Option {
+	return func(c *commandsComponent) {
+		c.showKeybinds = show
+	}
+}
+
+func WithBackground(background compat.AdaptiveColor) Option {
+	return func(c *commandsComponent) {
+		c.background = &background
+	}
+}
+
+func WithLimit(limit int) Option {
+	return func(c *commandsComponent) {
+		c.limit = &limit
+	}
+}
+
+func WithShowAll(showAll bool) Option {
+	return func(c *commandsComponent) {
+		c.showAll = showAll
+	}
+}
+
+func WithVscode(showVscode bool) Option {
+	return func(c *commandsComponent) {
+		c.showVscode = showVscode
+	}
+}
+
+func New(app *app.App, opts ...Option) CommandsComponent {
+	c := &commandsComponent{
+		app:          app,
+		background:   nil,
+		showKeybinds: true,
+		showAll:      false,
+	}
+	for _, opt := range opts {
+		opt(c)
+	}
+	return c
+}

packages/client/tui/internal/components/dialog/complete.go

@@ -0,0 +1,283 @@
+package dialog
+
+import (
+	"log/slog"
+	"sort"
+	"strings"
+
+	"github.com/charmbracelet/bubbles/v2/key"
+	"github.com/charmbracelet/bubbles/v2/textarea"
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/lithammer/fuzzysearch/fuzzy"
+	"github.com/muesli/reflow/truncate"
+	"github.com/sst/opencode/internal/completions"
+	"github.com/sst/opencode/internal/components/list"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+type CompletionSelectedMsg struct {
+	Item         completions.CompletionSuggestion
+	SearchString string
+}
+
+type CompletionDialogCompleteItemMsg struct {
+	Value string
+}
+
+type CompletionDialogCloseMsg struct{}
+
+type CompletionDialog interface {
+	tea.Model
+	tea.ViewModel
+	SetWidth(width int)
+	IsEmpty() bool
+}
+
+type completionDialogComponent struct {
+	query                string
+	providers            []completions.CompletionProvider
+	width                int
+	height               int
+	pseudoSearchTextArea textarea.Model
+	list                 list.List[completions.CompletionSuggestion]
+	trigger              string
+}
+
+type completionDialogKeyMap struct {
+	Complete key.Binding
+	Cancel   key.Binding
+}
+
+var completionDialogKeys = completionDialogKeyMap{
+	Complete: key.NewBinding(
+		key.WithKeys("tab", "enter", "right"),
+	),
+	Cancel: key.NewBinding(
+		key.WithKeys("space", " ", "esc", "backspace", "ctrl+h", "ctrl+c"),
+	),
+}
+
+func (c *completionDialogComponent) Init() tea.Cmd {
+	return nil
+}
+
+func (c *completionDialogComponent) getAllCompletions(query string) tea.Cmd {
+	return func() tea.Msg {
+		allItems := make([]completions.CompletionSuggestion, 0)
+		providersWithResults := 0
+
+		// Collect results from all providers
+		for _, provider := range c.providers {
+			items, err := provider.GetChildEntries(query)
+			if err != nil {
+				slog.Error(
+					"Failed to get completion items",
+					"provider",
+					provider.GetId(),
+					"error",
+					err,
+				)
+				continue
+			}
+			if len(items) > 0 {
+				providersWithResults++
+				allItems = append(allItems, items...)
+			}
+		}
+
+		// If there's a query, use fuzzy ranking to sort results
+		if query != "" && providersWithResults > 1 {
+			t := theme.CurrentTheme()
+			baseStyle := styles.NewStyle().Background(t.BackgroundElement())
+			// Create a slice of display values for fuzzy matching
+			displayValues := make([]string, len(allItems))
+			for i, item := range allItems {
+				displayValues[i] = item.Display(baseStyle)
+			}
+
+			matches := fuzzy.RankFindFold(query, displayValues)
+			sort.Sort(matches)
+
+			// Reorder items based on fuzzy ranking
+			rankedItems := make([]completions.CompletionSuggestion, 0, len(matches))
+			for _, match := range matches {
+				rankedItems = append(rankedItems, allItems[match.OriginalIndex])
+			}
+
+			return rankedItems
+		}
+
+		return allItems
+	}
+}
+func (c *completionDialogComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmds []tea.Cmd
+	switch msg := msg.(type) {
+	case []completions.CompletionSuggestion:
+		c.list.SetItems(msg)
+	case tea.KeyMsg:
+		if c.pseudoSearchTextArea.Focused() {
+			if !key.Matches(msg, completionDialogKeys.Complete) {
+				var cmd tea.Cmd
+				c.pseudoSearchTextArea, cmd = c.pseudoSearchTextArea.Update(msg)
+				cmds = append(cmds, cmd)
+
+				fullValue := c.pseudoSearchTextArea.Value()
+				query := strings.TrimPrefix(fullValue, c.trigger)
+
+				if query != c.query {
+					c.query = query
+					cmds = append(cmds, c.getAllCompletions(query))
+				}
+
+				u, cmd := c.list.Update(msg)
+				c.list = u.(list.List[completions.CompletionSuggestion])
+				cmds = append(cmds, cmd)
+			}
+
+			switch {
+			case key.Matches(msg, completionDialogKeys.Complete):
+				item, i := c.list.GetSelectedItem()
+				if i == -1 {
+					return c, nil
+				}
+				return c, c.complete(item)
+			case key.Matches(msg, completionDialogKeys.Cancel):
+				value := c.pseudoSearchTextArea.Value()
+				width := lipgloss.Width(value)
+				triggerWidth := lipgloss.Width(c.trigger)
+				// Only close on backspace when there are no characters left, unless we're back to just the trigger
+				if (msg.String() != "backspace" && msg.String() != "ctrl+h") || (width <= triggerWidth && value != c.trigger) {
+					return c, c.close()
+				}
+			}
+
+			return c, tea.Batch(cmds...)
+		} else {
+			cmds = append(cmds, c.getAllCompletions(""))
+			cmds = append(cmds, c.pseudoSearchTextArea.Focus())
+			return c, tea.Batch(cmds...)
+		}
+	}
+
+	return c, tea.Batch(cmds...)
+}
+
+func (c *completionDialogComponent) View() string {
+	t := theme.CurrentTheme()
+	c.list.SetMaxWidth(c.width)
+
+	return styles.NewStyle().
+		Padding(0, 1).
+		Foreground(t.Text()).
+		Background(t.BackgroundElement()).
+		BorderStyle(lipgloss.ThickBorder()).
+		BorderLeft(true).
+		BorderRight(true).
+		BorderForeground(t.Border()).
+		BorderBackground(t.Background()).
+		Width(c.width).
+		Render(c.list.View())
+}
+
+func (c *completionDialogComponent) SetWidth(width int) {
+	c.width = width
+}
+
+func (c *completionDialogComponent) IsEmpty() bool {
+	return c.list.IsEmpty()
+}
+
+func (c *completionDialogComponent) complete(item completions.CompletionSuggestion) tea.Cmd {
+	value := c.pseudoSearchTextArea.Value()
+	return tea.Batch(
+		util.CmdHandler(CompletionSelectedMsg{
+			SearchString: value,
+			Item:         item,
+		}),
+		c.close(),
+	)
+}
+
+func (c *completionDialogComponent) close() tea.Cmd {
+	c.pseudoSearchTextArea.Reset()
+	c.pseudoSearchTextArea.Blur()
+	return util.CmdHandler(CompletionDialogCloseMsg{})
+}
+
+func NewCompletionDialogComponent(
+	trigger string,
+	providers ...completions.CompletionProvider,
+) CompletionDialog {
+	ti := textarea.New()
+	ti.SetValue(trigger)
+
+	// Use a generic empty message if we have multiple providers
+	emptyMessage := "no matching items"
+	if len(providers) == 1 {
+		emptyMessage = providers[0].GetEmptyMessage()
+	}
+
+	// Define render function for completion suggestions
+	renderFunc := func(item completions.CompletionSuggestion, selected bool, width int, baseStyle styles.Style) string {
+		t := theme.CurrentTheme()
+		style := baseStyle
+
+		if selected {
+			style = style.Background(t.BackgroundElement()).Foreground(t.Primary())
+		} else {
+			style = style.Background(t.BackgroundElement()).Foreground(t.Text())
+		}
+
+		// The item.Display string already has any inline colors from the provider
+		truncatedStr := truncate.String(item.Display(style), uint(width-4))
+		return style.Width(width - 4).Render(truncatedStr)
+	}
+
+	// Define selectable function - all completion suggestions are selectable
+	selectableFunc := func(item completions.CompletionSuggestion) bool {
+		return true
+	}
+
+	li := list.NewListComponent(
+		list.WithItems([]completions.CompletionSuggestion{}),
+		list.WithMaxVisibleHeight[completions.CompletionSuggestion](7),
+		list.WithFallbackMessage[completions.CompletionSuggestion](emptyMessage),
+		list.WithAlphaNumericKeys[completions.CompletionSuggestion](false),
+		list.WithRenderFunc(renderFunc),
+		list.WithSelectableFunc(selectableFunc),
+	)
+
+	c := &completionDialogComponent{
+		query:                "",
+		providers:            providers,
+		pseudoSearchTextArea: ti,
+		list:                 li,
+		trigger:              trigger,
+	}
+
+	// Load initial items from all providers
+	go func() {
+		allItems := make([]completions.CompletionSuggestion, 0)
+		for _, provider := range providers {
+			items, err := provider.GetChildEntries("")
+			if err != nil {
+				slog.Error(
+					"Failed to get completion items",
+					"provider",
+					provider.GetId(),
+					"error",
+					err,
+				)
+				continue
+			}
+			allItems = append(allItems, items...)
+		}
+		li.SetItems(allItems)
+	}()
+
+	return c
+}

packages/client/tui/internal/components/dialog/find.go

@@ -0,0 +1,236 @@
+package dialog
+
+import (
+	"log/slog"
+
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/sst/opencode/internal/completions"
+	"github.com/sst/opencode/internal/components/list"
+	"github.com/sst/opencode/internal/components/modal"
+	"github.com/sst/opencode/internal/layout"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+const (
+	findDialogWidth = 76
+)
+
+type FindSelectedMsg struct {
+	FilePath string
+}
+
+type FindDialogCloseMsg struct{}
+
+type findInitialSuggestionsMsg struct {
+	suggestions []completions.CompletionSuggestion
+}
+
+type FindDialog interface {
+	layout.Modal
+	tea.Model
+	tea.ViewModel
+	SetWidth(width int)
+	SetHeight(height int)
+	IsEmpty() bool
+}
+
+// findItem is a custom list item for file suggestions
+type findItem struct {
+	suggestion completions.CompletionSuggestion
+}
+
+func (f findItem) Render(
+	selected bool,
+	width int,
+	baseStyle styles.Style,
+) string {
+	t := theme.CurrentTheme()
+
+	itemStyle := baseStyle.
+		Background(t.BackgroundPanel()).
+		Foreground(t.TextMuted())
+
+	if selected {
+		itemStyle = itemStyle.Foreground(t.Primary())
+	}
+
+	return itemStyle.PaddingLeft(1).Render(f.suggestion.Display(itemStyle))
+}
+
+func (f findItem) Selectable() bool {
+	return true
+}
+
+type findDialogComponent struct {
+	completionProvider completions.CompletionProvider
+	allSuggestions     []completions.CompletionSuggestion
+	width, height      int
+	modal              *modal.Modal
+	searchDialog       *SearchDialog
+	dialogWidth        int
+}
+
+func (f *findDialogComponent) Init() tea.Cmd {
+	return tea.Batch(
+		f.loadInitialSuggestions(),
+		f.searchDialog.Init(),
+	)
+}
+
+func (f *findDialogComponent) loadInitialSuggestions() tea.Cmd {
+	return func() tea.Msg {
+		items, err := f.completionProvider.GetChildEntries("")
+		if err != nil {
+			slog.Error("Failed to get initial completion items", "error", err)
+			return findInitialSuggestionsMsg{suggestions: []completions.CompletionSuggestion{}}
+		}
+		return findInitialSuggestionsMsg{suggestions: items}
+	}
+}
+
+func (f *findDialogComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case findInitialSuggestionsMsg:
+		// Handle initial suggestions setup
+		f.allSuggestions = msg.suggestions
+
+		// Calculate dialog width
+		f.dialogWidth = f.calculateDialogWidth()
+
+		// Initialize search dialog with calculated width
+		f.searchDialog = NewSearchDialog("Search files...", 10)
+		f.searchDialog.SetWidth(f.dialogWidth)
+
+		// Convert to list items
+		items := make([]list.Item, len(f.allSuggestions))
+		for i, suggestion := range f.allSuggestions {
+			items[i] = findItem{suggestion: suggestion}
+		}
+		f.searchDialog.SetItems(items)
+
+		// Update modal with calculated width
+		f.modal = modal.New(
+			modal.WithTitle("Find Files"),
+			modal.WithMaxWidth(f.dialogWidth+4),
+		)
+
+		return f, f.searchDialog.Init()
+
+	case []completions.CompletionSuggestion:
+		// Store suggestions and convert to findItem for the search dialog
+		f.allSuggestions = msg
+		items := make([]list.Item, len(msg))
+		for i, suggestion := range msg {
+			items[i] = findItem{suggestion: suggestion}
+		}
+		f.searchDialog.SetItems(items)
+		return f, nil
+
+	case SearchSelectionMsg:
+		// Handle selection from search dialog - now we can directly access the suggestion
+		if item, ok := msg.Item.(findItem); ok {
+			return f, f.selectFile(item.suggestion)
+		}
+		return f, nil
+
+	case SearchCancelledMsg:
+		return f, f.Close()
+
+	case SearchQueryChangedMsg:
+		// Update completion items based on search query
+		return f, func() tea.Msg {
+			items, err := f.completionProvider.GetChildEntries(msg.Query)
+			if err != nil {
+				slog.Error("Failed to get completion items", "error", err)
+				return []completions.CompletionSuggestion{}
+			}
+			return items
+		}
+
+	case tea.WindowSizeMsg:
+		f.width = msg.Width
+		f.height = msg.Height
+		// Recalculate width based on new viewport size
+		oldWidth := f.dialogWidth
+		f.dialogWidth = f.calculateDialogWidth()
+		if oldWidth != f.dialogWidth {
+			f.searchDialog.SetWidth(f.dialogWidth)
+			// Update modal max width too
+			f.modal = modal.New(
+				modal.WithTitle("Find Files"),
+				modal.WithMaxWidth(f.dialogWidth+4),
+			)
+		}
+		f.searchDialog.SetHeight(msg.Height)
+	}
+
+	// Forward all other messages to the search dialog
+	updatedDialog, cmd := f.searchDialog.Update(msg)
+	f.searchDialog = updatedDialog.(*SearchDialog)
+	return f, cmd
+}
+
+func (f *findDialogComponent) View() string {
+	return f.searchDialog.View()
+}
+
+func (f *findDialogComponent) calculateDialogWidth() int {
+	// Use fixed width unless viewport is smaller
+	if f.width > 0 && f.width < findDialogWidth+10 {
+		return f.width - 10
+	}
+	return findDialogWidth
+}
+
+func (f *findDialogComponent) SetWidth(width int) {
+	f.width = width
+	f.searchDialog.SetWidth(f.dialogWidth)
+}
+
+func (f *findDialogComponent) SetHeight(height int) {
+	f.height = height
+}
+
+func (f *findDialogComponent) IsEmpty() bool {
+	return f.searchDialog.GetQuery() == ""
+}
+
+func (f *findDialogComponent) selectFile(item completions.CompletionSuggestion) tea.Cmd {
+	return tea.Sequence(
+		f.Close(),
+		util.CmdHandler(FindSelectedMsg{
+			FilePath: item.Value,
+		}),
+	)
+}
+
+func (f *findDialogComponent) Render(background string) string {
+	return f.modal.Render(f.View(), background)
+}
+
+func (f *findDialogComponent) Close() tea.Cmd {
+	f.searchDialog.SetQuery("")
+	f.searchDialog.Blur()
+	return util.CmdHandler(modal.CloseModalMsg{})
+}
+
+func NewFindDialog(completionProvider completions.CompletionProvider) FindDialog {
+	component := &findDialogComponent{
+		completionProvider: completionProvider,
+		dialogWidth:        findDialogWidth,
+		allSuggestions:     []completions.CompletionSuggestion{},
+	}
+
+	// Create search dialog and modal with fixed width
+	component.searchDialog = NewSearchDialog("Search files...", 10)
+	component.searchDialog.SetWidth(findDialogWidth)
+
+	component.modal = modal.New(
+		modal.WithTitle("Find Files"),
+		modal.WithMaxWidth(findDialogWidth+4),
+	)
+
+	return component
+}

packages/client/tui/internal/components/dialog/help.go

@@ -0,0 +1,80 @@
+package dialog
+
+import (
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/sst/opencode/internal/app"
+	commandsComponent "github.com/sst/opencode/internal/components/commands"
+	"github.com/sst/opencode/internal/components/modal"
+	"github.com/sst/opencode/internal/layout"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/viewport"
+)
+
+type helpDialog struct {
+	width             int
+	height            int
+	modal             *modal.Modal
+	app               *app.App
+	commandsComponent commandsComponent.CommandsComponent
+	viewport          viewport.Model
+}
+
+func (h *helpDialog) Init() tea.Cmd {
+	return h.viewport.Init()
+}
+
+func (h *helpDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmds []tea.Cmd
+
+	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		h.width = msg.Width
+		h.height = msg.Height
+		// Set viewport size with some padding for the modal, but cap at reasonable width
+		maxWidth := min(80, msg.Width-8)
+		h.viewport = viewport.New(viewport.WithWidth(maxWidth-4), viewport.WithHeight(msg.Height-6))
+		h.commandsComponent.SetSize(maxWidth-4, msg.Height-6)
+	}
+
+	// Update viewport content
+	h.viewport.SetContent(h.commandsComponent.View())
+
+	// Update viewport
+	var vpCmd tea.Cmd
+	h.viewport, vpCmd = h.viewport.Update(msg)
+	cmds = append(cmds, vpCmd)
+
+	return h, tea.Batch(cmds...)
+}
+
+func (h *helpDialog) View() string {
+	t := theme.CurrentTheme()
+	h.commandsComponent.SetBackgroundColor(t.BackgroundPanel())
+	return h.viewport.View()
+}
+
+func (h *helpDialog) Render(background string) string {
+	return h.modal.Render(h.View(), background)
+}
+
+func (h *helpDialog) Close() tea.Cmd {
+	return nil
+}
+
+type HelpDialog interface {
+	layout.Modal
+}
+
+func NewHelpDialog(app *app.App) HelpDialog {
+	vp := viewport.New(viewport.WithHeight(12))
+	return &helpDialog{
+		app: app,
+		commandsComponent: commandsComponent.New(app,
+			commandsComponent.WithBackground(theme.CurrentTheme().BackgroundPanel()),
+			commandsComponent.WithShowAll(true),
+			commandsComponent.WithKeybinds(true),
+		),
+		modal:    modal.New(modal.WithTitle("Help"), modal.WithMaxWidth(80)),
+		viewport: vp,
+	}
+}

packages/client/tui/internal/components/dialog/init.go

@@ -0,0 +1,184 @@
+package dialog
+
+import (
+	"github.com/charmbracelet/bubbles/v2/key"
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+// InitDialogCmp is a component that asks the user if they want to initialize the project.
+type InitDialogCmp struct {
+	width, height int
+	selected      int
+	keys          initDialogKeyMap
+}
+
+// NewInitDialogCmp creates a new InitDialogCmp.
+func NewInitDialogCmp() InitDialogCmp {
+	return InitDialogCmp{
+		selected: 0,
+		keys:     initDialogKeyMap{},
+	}
+}
+
+type initDialogKeyMap struct {
+	Tab    key.Binding
+	Left   key.Binding
+	Right  key.Binding
+	Enter  key.Binding
+	Escape key.Binding
+	Y      key.Binding
+	N      key.Binding
+}
+
+// ShortHelp implements key.Map.
+func (k initDialogKeyMap) ShortHelp() []key.Binding {
+	return []key.Binding{
+		key.NewBinding(
+			key.WithKeys("tab", "left", "right"),
+			key.WithHelp("tab/←/→", "toggle selection"),
+		),
+		key.NewBinding(
+			key.WithKeys("enter"),
+			key.WithHelp("enter", "confirm"),
+		),
+		key.NewBinding(
+			key.WithKeys("esc", "q"),
+			key.WithHelp("esc/q", "cancel"),
+		),
+		key.NewBinding(
+			key.WithKeys("y", "n"),
+			key.WithHelp("y/n", "yes/no"),
+		),
+	}
+}
+
+// FullHelp implements key.Map.
+func (k initDialogKeyMap) FullHelp() [][]key.Binding {
+	return [][]key.Binding{k.ShortHelp()}
+}
+
+// Init implements tea.Model.
+func (m InitDialogCmp) Init() tea.Cmd {
+	return nil
+}
+
+// Update implements tea.Model.
+func (m InitDialogCmp) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case tea.KeyMsg:
+		switch {
+		case key.Matches(msg, key.NewBinding(key.WithKeys("esc"))):
+			return m, util.CmdHandler(CloseInitDialogMsg{Initialize: false})
+		case key.Matches(msg, key.NewBinding(key.WithKeys("tab", "left", "right", "h", "l"))):
+			m.selected = (m.selected + 1) % 2
+			return m, nil
+		case key.Matches(msg, key.NewBinding(key.WithKeys("enter"))):
+			return m, util.CmdHandler(CloseInitDialogMsg{Initialize: m.selected == 0})
+		case key.Matches(msg, key.NewBinding(key.WithKeys("y"))):
+			return m, util.CmdHandler(CloseInitDialogMsg{Initialize: true})
+		case key.Matches(msg, key.NewBinding(key.WithKeys("n"))):
+			return m, util.CmdHandler(CloseInitDialogMsg{Initialize: false})
+		}
+	case tea.WindowSizeMsg:
+		m.width = msg.Width
+		m.height = msg.Height
+	}
+	return m, nil
+}
+
+// View implements tea.Model.
+func (m InitDialogCmp) View() string {
+	t := theme.CurrentTheme()
+	baseStyle := styles.NewStyle().Foreground(t.Text())
+
+	// Calculate width needed for content
+	maxWidth := 60 // Width for explanation text
+
+	title := baseStyle.
+		Foreground(t.Primary()).
+		Bold(true).
+		Width(maxWidth).
+		Padding(0, 1).
+		Render("Initialize Project")
+
+	explanation := baseStyle.
+		Foreground(t.Text()).
+		Width(maxWidth).
+		Padding(0, 1).
+		Render("Initialization generates a new AGENTS.md file that contains information about your codebase, this file serves as memory for each project, you can freely add to it to help the agents be better at their job.")
+
+	question := baseStyle.
+		Foreground(t.Text()).
+		Width(maxWidth).
+		Padding(1, 1).
+		Render("Would you like to initialize this project?")
+
+	maxWidth = min(maxWidth, m.width-10)
+	yesStyle := baseStyle
+	noStyle := baseStyle
+
+	if m.selected == 0 {
+		yesStyle = yesStyle.
+			Background(t.Primary()).
+			Foreground(t.Background()).
+			Bold(true)
+		noStyle = noStyle.
+			Background(t.Background()).
+			Foreground(t.Primary())
+	} else {
+		noStyle = noStyle.
+			Background(t.Primary()).
+			Foreground(t.Background()).
+			Bold(true)
+		yesStyle = yesStyle.
+			Background(t.Background()).
+			Foreground(t.Primary())
+	}
+
+	yes := yesStyle.Padding(0, 3).Render("Yes")
+	no := noStyle.Padding(0, 3).Render("No")
+
+	buttons := lipgloss.JoinHorizontal(lipgloss.Center, yes, baseStyle.Render("  "), no)
+	buttons = baseStyle.
+		Width(maxWidth).
+		Padding(1, 0).
+		Render(buttons)
+
+	content := lipgloss.JoinVertical(
+		lipgloss.Left,
+		title,
+		baseStyle.Width(maxWidth).Render(""),
+		explanation,
+		question,
+		buttons,
+		baseStyle.Width(maxWidth).Render(""),
+	)
+
+	return baseStyle.Padding(1, 2).
+		Border(lipgloss.RoundedBorder()).
+		BorderBackground(t.Background()).
+		BorderForeground(t.TextMuted()).
+		Width(lipgloss.Width(content) + 4).
+		Render(content)
+}
+
+// SetSize sets the size of the component.
+func (m *InitDialogCmp) SetSize(width, height int) {
+	m.width = width
+	m.height = height
+}
+
+// CloseInitDialogMsg is a message that is sent when the init dialog is closed.
+type CloseInitDialogMsg struct {
+	Initialize bool
+}
+
+// ShowInitDialogMsg is a message that is sent to show the init dialog.
+type ShowInitDialogMsg struct {
+	Show bool
+}

packages/client/tui/internal/components/dialog/models.go

@@ -0,0 +1,457 @@
+package dialog
+
+import (
+	"context"
+	"fmt"
+	"sort"
+	"time"
+
+	"github.com/charmbracelet/bubbles/v2/key"
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/lithammer/fuzzysearch/fuzzy"
+	"github.com/sst/opencode-sdk-go"
+	"github.com/sst/opencode/internal/app"
+	"github.com/sst/opencode/internal/components/list"
+	"github.com/sst/opencode/internal/components/modal"
+	"github.com/sst/opencode/internal/layout"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+const (
+	numVisibleModels = 10
+	minDialogWidth   = 40
+	maxDialogWidth   = 80
+	maxRecentModels  = 5
+)
+
+// ModelDialog interface for the model selection dialog
+type ModelDialog interface {
+	layout.Modal
+}
+
+type modelDialog struct {
+	app          *app.App
+	allModels    []ModelWithProvider
+	width        int
+	height       int
+	modal        *modal.Modal
+	searchDialog *SearchDialog
+	dialogWidth  int
+}
+
+type ModelWithProvider struct {
+	Model    opencode.Model
+	Provider opencode.Provider
+}
+
+// modelItem is a custom list item for model selections
+type modelItem struct {
+	model ModelWithProvider
+}
+
+func (m modelItem) Render(
+	selected bool,
+	width int,
+	baseStyle styles.Style,
+) string {
+	t := theme.CurrentTheme()
+
+	itemStyle := baseStyle.
+		Background(t.BackgroundPanel()).
+		Foreground(t.Text())
+
+	if selected {
+		itemStyle = itemStyle.Foreground(t.Primary())
+	}
+
+	providerStyle := baseStyle.
+		Foreground(t.TextMuted()).
+		Background(t.BackgroundPanel())
+
+	modelPart := itemStyle.Render(m.model.Model.Name)
+	providerPart := providerStyle.Render(fmt.Sprintf(" %s", m.model.Provider.Name))
+
+	combinedText := modelPart + providerPart
+	return baseStyle.
+		Background(t.BackgroundPanel()).
+		PaddingLeft(1).
+		Render(combinedText)
+}
+
+func (m modelItem) Selectable() bool {
+	return true
+}
+
+type modelKeyMap struct {
+	Enter  key.Binding
+	Escape key.Binding
+}
+
+var modelKeys = modelKeyMap{
+	Enter: key.NewBinding(
+		key.WithKeys("enter"),
+		key.WithHelp("enter", "select model"),
+	),
+	Escape: key.NewBinding(
+		key.WithKeys("esc"),
+		key.WithHelp("esc", "close"),
+	),
+}
+
+func (m *modelDialog) Init() tea.Cmd {
+	m.setupAllModels()
+	return m.searchDialog.Init()
+}
+
+func (m *modelDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case SearchSelectionMsg:
+		// Handle selection from search dialog
+		if item, ok := msg.Item.(modelItem); ok {
+			return m, tea.Sequence(
+				util.CmdHandler(modal.CloseModalMsg{}),
+				util.CmdHandler(
+					app.ModelSelectedMsg{
+						Provider: item.model.Provider,
+						Model:    item.model.Model,
+					}),
+			)
+		}
+		return m, util.CmdHandler(modal.CloseModalMsg{})
+	case SearchCancelledMsg:
+		return m, util.CmdHandler(modal.CloseModalMsg{})
+
+	case SearchRemoveItemMsg:
+		if item, ok := msg.Item.(modelItem); ok {
+			if m.isModelInRecentSection(item.model, msg.Index) {
+				m.app.State.RemoveModelFromRecentlyUsed(item.model.Provider.ID, item.model.Model.ID)
+				items := m.buildDisplayList(m.searchDialog.GetQuery())
+				m.searchDialog.SetItems(items)
+				return m, m.app.SaveState()
+			}
+		}
+		return m, nil
+
+	case SearchQueryChangedMsg:
+		// Update the list based on search query
+		items := m.buildDisplayList(msg.Query)
+		m.searchDialog.SetItems(items)
+		return m, nil
+
+	case tea.WindowSizeMsg:
+		m.width = msg.Width
+		m.height = msg.Height
+		m.searchDialog.SetWidth(m.dialogWidth)
+		m.searchDialog.SetHeight(msg.Height)
+	}
+
+	updatedDialog, cmd := m.searchDialog.Update(msg)
+	m.searchDialog = updatedDialog.(*SearchDialog)
+	return m, cmd
+}
+
+func (m *modelDialog) View() string {
+	return m.searchDialog.View()
+}
+
+func (m *modelDialog) calculateOptimalWidth(models []ModelWithProvider) int {
+	maxWidth := minDialogWidth
+
+	for _, model := range models {
+		// Calculate the width needed for this item: "ModelName (ProviderName)"
+		// Add 4 for the parentheses, space, and some padding
+		itemWidth := len(model.Model.Name) + len(model.Provider.Name) + 4
+		if itemWidth > maxWidth {
+			maxWidth = itemWidth
+		}
+	}
+
+	if maxWidth > maxDialogWidth {
+		maxWidth = maxDialogWidth
+	}
+
+	return maxWidth
+}
+
+func (m *modelDialog) setupAllModels() {
+	providers, _ := m.app.ListProviders(context.Background())
+
+	m.allModels = make([]ModelWithProvider, 0)
+	for _, provider := range providers {
+		for _, model := range provider.Models {
+			m.allModels = append(m.allModels, ModelWithProvider{
+				Model:    model,
+				Provider: provider,
+			})
+		}
+	}
+
+	m.sortModels()
+
+	// Calculate optimal width based on all models
+	m.dialogWidth = m.calculateOptimalWidth(m.allModels)
+
+	// Initialize search dialog
+	m.searchDialog = NewSearchDialog("Search models...", numVisibleModels)
+	m.searchDialog.SetWidth(m.dialogWidth)
+
+	// Build initial display list (empty query shows grouped view)
+	items := m.buildDisplayList("")
+	m.searchDialog.SetItems(items)
+}
+
+func (m *modelDialog) sortModels() {
+	sort.Slice(m.allModels, func(i, j int) bool {
+		modelA := m.allModels[i]
+		modelB := m.allModels[j]
+
+		usageA := m.getModelUsageTime(modelA.Provider.ID, modelA.Model.ID)
+		usageB := m.getModelUsageTime(modelB.Provider.ID, modelB.Model.ID)
+
+		// If both have usage times, sort by most recent first
+		if !usageA.IsZero() && !usageB.IsZero() {
+			return usageA.After(usageB)
+		}
+
+		// If only one has usage time, it goes first
+		if !usageA.IsZero() && usageB.IsZero() {
+			return true
+		}
+		if usageA.IsZero() && !usageB.IsZero() {
+			return false
+		}
+
+		// If neither has usage time, sort by release date desc if available
+		if modelA.Model.ReleaseDate != "" && modelB.Model.ReleaseDate != "" {
+			dateA := m.parseReleaseDate(modelA.Model.ReleaseDate)
+			dateB := m.parseReleaseDate(modelB.Model.ReleaseDate)
+			if !dateA.IsZero() && !dateB.IsZero() {
+				return dateA.After(dateB)
+			}
+		}
+
+		// If only one has release date, it goes first
+		if modelA.Model.ReleaseDate != "" && modelB.Model.ReleaseDate == "" {
+			return true
+		}
+		if modelA.Model.ReleaseDate == "" && modelB.Model.ReleaseDate != "" {
+			return false
+		}
+
+		// If neither has usage time nor release date, fall back to alphabetical sorting
+		return modelA.Model.Name < modelB.Model.Name
+	})
+}
+
+func (m *modelDialog) parseReleaseDate(dateStr string) time.Time {
+	if parsed, err := time.Parse("2006-01-02", dateStr); err == nil {
+		return parsed
+	}
+
+	return time.Time{}
+}
+
+func (m *modelDialog) getModelUsageTime(providerID, modelID string) time.Time {
+	for _, usage := range m.app.State.RecentlyUsedModels {
+		if usage.ProviderID == providerID && usage.ModelID == modelID {
+			return usage.LastUsed
+		}
+	}
+	return time.Time{}
+}
+
+// buildDisplayList creates the list items based on search query
+func (m *modelDialog) buildDisplayList(query string) []list.Item {
+	if query != "" {
+		// Search mode: use fuzzy matching
+		return m.buildSearchResults(query)
+	} else {
+		// Grouped mode: show Recent section and provider groups
+		return m.buildGroupedResults()
+	}
+}
+
+// buildSearchResults creates a flat list of search results using fuzzy matching
+func (m *modelDialog) buildSearchResults(query string) []list.Item {
+	type modelMatch struct {
+		model ModelWithProvider
+		score int
+	}
+
+	modelNames := []string{}
+	modelMap := make(map[string]ModelWithProvider)
+
+	// Create search strings and perform fuzzy matching
+	for _, model := range m.allModels {
+		searchStr := fmt.Sprintf("%s %s", model.Model.Name, model.Provider.Name)
+		modelNames = append(modelNames, searchStr)
+		modelMap[searchStr] = model
+
+		searchStr = fmt.Sprintf("%s %s", model.Provider.Name, model.Model.Name)
+		modelNames = append(modelNames, searchStr)
+		modelMap[searchStr] = model
+	}
+
+	matches := fuzzy.RankFindFold(query, modelNames)
+	sort.Sort(matches)
+
+	items := []list.Item{}
+	seenModels := make(map[string]bool)
+
+	for _, match := range matches {
+		model := modelMap[match.Target]
+		// Create a unique key to avoid duplicates
+		key := fmt.Sprintf("%s:%s", model.Provider.ID, model.Model.ID)
+		if seenModels[key] {
+			continue
+		}
+		seenModels[key] = true
+		items = append(items, modelItem{model: model})
+	}
+
+	return items
+}
+
+// buildGroupedResults creates a grouped list with Recent section and provider groups
+func (m *modelDialog) buildGroupedResults() []list.Item {
+	var items []list.Item
+
+	// Add Recent section
+	recentModels := m.getRecentModels(maxRecentModels)
+	if len(recentModels) > 0 {
+		items = append(items, list.HeaderItem("Recent"))
+		for _, model := range recentModels {
+			items = append(items, modelItem{model: model})
+		}
+	}
+
+	// Group models by provider
+	providerGroups := make(map[string][]ModelWithProvider)
+	for _, model := range m.allModels {
+		providerName := model.Provider.Name
+		providerGroups[providerName] = append(providerGroups[providerName], model)
+	}
+
+	// Get sorted provider names for consistent order
+	var providerNames []string
+	for name := range providerGroups {
+		providerNames = append(providerNames, name)
+	}
+	sort.Strings(providerNames)
+
+	// Add provider groups
+	for _, providerName := range providerNames {
+		models := providerGroups[providerName]
+
+		// Sort models within provider group
+		sort.Slice(models, func(i, j int) bool {
+			modelA := models[i]
+			modelB := models[j]
+
+			usageA := m.getModelUsageTime(modelA.Provider.ID, modelA.Model.ID)
+			usageB := m.getModelUsageTime(modelB.Provider.ID, modelB.Model.ID)
+
+			// Sort by usage time first, then by release date, then alphabetically
+			if !usageA.IsZero() && !usageB.IsZero() {
+				return usageA.After(usageB)
+			}
+			if !usageA.IsZero() && usageB.IsZero() {
+				return true
+			}
+			if usageA.IsZero() && !usageB.IsZero() {
+				return false
+			}
+
+			// Sort by release date if available
+			if modelA.Model.ReleaseDate != "" && modelB.Model.ReleaseDate != "" {
+				dateA := m.parseReleaseDate(modelA.Model.ReleaseDate)
+				dateB := m.parseReleaseDate(modelB.Model.ReleaseDate)
+				if !dateA.IsZero() && !dateB.IsZero() {
+					return dateA.After(dateB)
+				}
+			}
+
+			return modelA.Model.Name < modelB.Model.Name
+		})
+
+		// Add provider header
+		items = append(items, list.HeaderItem(providerName))
+
+		// Add models in this provider group
+		for _, model := range models {
+			items = append(items, modelItem{model: model})
+		}
+	}
+
+	return items
+}
+
+// getRecentModels returns the most recently used models
+func (m *modelDialog) getRecentModels(limit int) []ModelWithProvider {
+	var recentModels []ModelWithProvider
+
+	// Get recent models from app state
+	for _, usage := range m.app.State.RecentlyUsedModels {
+		if len(recentModels) >= limit {
+			break
+		}
+
+		// Find the corresponding model
+		for _, model := range m.allModels {
+			if model.Provider.ID == usage.ProviderID && model.Model.ID == usage.ModelID {
+				recentModels = append(recentModels, model)
+				break
+			}
+		}
+	}
+
+	return recentModels
+}
+
+func (m *modelDialog) isModelInRecentSection(model ModelWithProvider, index int) bool {
+	// Only check if we're in grouped mode (no search query)
+	if m.searchDialog.GetQuery() != "" {
+		return false
+	}
+
+	recentModels := m.getRecentModels(maxRecentModels)
+	if len(recentModels) == 0 {
+		return false
+	}
+
+	// Index 0 is the "Recent" header, so recent models are at indices 1 to len(recentModels)
+	if index >= 1 && index <= len(recentModels) {
+		if index-1 < len(recentModels) {
+			recentModel := recentModels[index-1]
+			return recentModel.Provider.ID == model.Provider.ID &&
+				recentModel.Model.ID == model.Model.ID
+		}
+	}
+
+	return false
+}
+
+func (m *modelDialog) Render(background string) string {
+	return m.modal.Render(m.View(), background)
+}
+
+func (s *modelDialog) Close() tea.Cmd {
+	return nil
+}
+
+func NewModelDialog(app *app.App) ModelDialog {
+	dialog := &modelDialog{
+		app: app,
+	}
+
+	dialog.setupAllModels()
+
+	dialog.modal = modal.New(
+		modal.WithTitle("Select Model"),
+		modal.WithMaxWidth(dialog.dialogWidth+4),
+	)
+
+	return dialog
+}

packages/client/tui/internal/components/dialog/search.go

@@ -0,0 +1,247 @@
+package dialog
+
+import (
+	"github.com/charmbracelet/bubbles/v2/key"
+	"github.com/charmbracelet/bubbles/v2/textinput"
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/sst/opencode/internal/components/list"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+)
+
+// SearchQueryChangedMsg is emitted when the search query changes
+type SearchQueryChangedMsg struct {
+	Query string
+}
+
+// SearchSelectionMsg is emitted when an item is selected
+type SearchSelectionMsg struct {
+	Item  any
+	Index int
+}
+
+// SearchCancelledMsg is emitted when the search is cancelled
+type SearchCancelledMsg struct{}
+
+// SearchRemoveItemMsg is emitted when Ctrl+X is pressed to remove an item
+type SearchRemoveItemMsg struct {
+	Item  any
+	Index int
+}
+
+// SearchDialog is a reusable component that combines a text input with a list
+type SearchDialog struct {
+	textInput textinput.Model
+	list      list.List[list.Item]
+	width     int
+	height    int
+	focused   bool
+}
+
+type searchKeyMap struct {
+	Up     key.Binding
+	Down   key.Binding
+	Enter  key.Binding
+	Escape key.Binding
+	Remove key.Binding
+}
+
+var searchKeys = searchKeyMap{
+	Up: key.NewBinding(
+		key.WithKeys("up", "ctrl+p"),
+		key.WithHelp("↑", "previous item"),
+	),
+	Down: key.NewBinding(
+		key.WithKeys("down", "ctrl+n"),
+		key.WithHelp("↓", "next item"),
+	),
+	Enter: key.NewBinding(
+		key.WithKeys("enter"),
+		key.WithHelp("enter", "select"),
+	),
+	Escape: key.NewBinding(
+		key.WithKeys("esc"),
+		key.WithHelp("esc", "cancel"),
+	),
+	Remove: key.NewBinding(
+		key.WithKeys("ctrl+x"),
+		key.WithHelp("ctrl+x", "remove from recent"),
+	),
+}
+
+// NewSearchDialog creates a new SearchDialog
+func NewSearchDialog(placeholder string, maxVisibleHeight int) *SearchDialog {
+	t := theme.CurrentTheme()
+	bgColor := t.BackgroundElement()
+	textColor := t.Text()
+	textMutedColor := t.TextMuted()
+
+	ti := textinput.New()
+	ti.Placeholder = placeholder
+	ti.Styles.Blurred.Placeholder = styles.NewStyle().
+		Foreground(textMutedColor).
+		Background(bgColor).
+		Lipgloss()
+	ti.Styles.Blurred.Text = styles.NewStyle().
+		Foreground(textColor).
+		Background(bgColor).
+		Lipgloss()
+	ti.Styles.Focused.Placeholder = styles.NewStyle().
+		Foreground(textMutedColor).
+		Background(bgColor).
+		Lipgloss()
+	ti.Styles.Focused.Text = styles.NewStyle().
+		Foreground(textColor).
+		Background(bgColor).
+		Lipgloss()
+	ti.Styles.Focused.Prompt = styles.NewStyle().
+		Background(bgColor).
+		Lipgloss()
+	ti.Styles.Cursor.Color = t.Primary()
+	ti.VirtualCursor = true
+
+	ti.Prompt = " "
+	ti.CharLimit = -1
+	ti.Focus()
+
+	emptyList := list.NewListComponent(
+		list.WithItems([]list.Item{}),
+		list.WithMaxVisibleHeight[list.Item](maxVisibleHeight),
+		list.WithFallbackMessage[list.Item](" No items"),
+		list.WithAlphaNumericKeys[list.Item](false),
+		list.WithRenderFunc(
+			func(item list.Item, selected bool, width int, baseStyle styles.Style) string {
+				return item.Render(selected, width, baseStyle)
+			},
+		),
+		list.WithSelectableFunc(func(item list.Item) bool {
+			return item.Selectable()
+		}),
+	)
+
+	return &SearchDialog{
+		textInput: ti,
+		list:      emptyList,
+		focused:   true,
+	}
+}
+
+func (s *SearchDialog) Init() tea.Cmd {
+	return textinput.Blink
+}
+
+func (s *SearchDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmds []tea.Cmd
+
+	switch msg := msg.(type) {
+	case tea.KeyMsg:
+		switch msg.String() {
+		case "ctrl+c":
+			value := s.textInput.Value()
+			if value == "" {
+				return s, nil
+			}
+			s.textInput.Reset()
+			cmds = append(cmds, func() tea.Msg {
+				return SearchQueryChangedMsg{Query: ""}
+			})
+		}
+
+		switch {
+		case key.Matches(msg, searchKeys.Escape):
+			return s, func() tea.Msg { return SearchCancelledMsg{} }
+
+		case key.Matches(msg, searchKeys.Enter):
+			if selectedItem, idx := s.list.GetSelectedItem(); idx != -1 {
+				return s, func() tea.Msg {
+					return SearchSelectionMsg{Item: selectedItem, Index: idx}
+				}
+			}
+
+		case key.Matches(msg, searchKeys.Remove):
+			if selectedItem, idx := s.list.GetSelectedItem(); idx != -1 {
+				return s, func() tea.Msg {
+					return SearchRemoveItemMsg{Item: selectedItem, Index: idx}
+				}
+			}
+
+		case key.Matches(msg, searchKeys.Up):
+			var cmd tea.Cmd
+			listModel, cmd := s.list.Update(msg)
+			s.list = listModel.(list.List[list.Item])
+			if cmd != nil {
+				cmds = append(cmds, cmd)
+			}
+
+		case key.Matches(msg, searchKeys.Down):
+			var cmd tea.Cmd
+			listModel, cmd := s.list.Update(msg)
+			s.list = listModel.(list.List[list.Item])
+			if cmd != nil {
+				cmds = append(cmds, cmd)
+			}
+
+		default:
+			oldValue := s.textInput.Value()
+			var cmd tea.Cmd
+			s.textInput, cmd = s.textInput.Update(msg)
+			if cmd != nil {
+				cmds = append(cmds, cmd)
+			}
+			if newValue := s.textInput.Value(); newValue != oldValue {
+				cmds = append(cmds, func() tea.Msg {
+					return SearchQueryChangedMsg{Query: newValue}
+				})
+			}
+		}
+	}
+
+	return s, tea.Batch(cmds...)
+}
+
+func (s *SearchDialog) View() string {
+	s.list.SetMaxWidth(s.width)
+	listView := s.list.View()
+	listView = lipgloss.PlaceVertical(s.list.GetMaxVisibleHeight(), lipgloss.Top, listView)
+	textinput := s.textInput.View()
+	return textinput + "\n\n" + listView
+}
+
+// SetWidth sets the width of the search dialog
+func (s *SearchDialog) SetWidth(width int) {
+	s.width = width
+	s.textInput.SetWidth(width - 2) // Account for padding and borders
+}
+
+// SetHeight sets the height of the search dialog
+func (s *SearchDialog) SetHeight(height int) {
+	s.height = height
+}
+
+// SetItems updates the list items
+func (s *SearchDialog) SetItems(items []list.Item) {
+	s.list.SetItems(items)
+}
+
+// GetQuery returns the current search query
+func (s *SearchDialog) GetQuery() string {
+	return s.textInput.Value()
+}
+
+// SetQuery sets the search query
+func (s *SearchDialog) SetQuery(query string) {
+	s.textInput.SetValue(query)
+}
+
+// Focus focuses the search dialog
+func (s *SearchDialog) Focus() {
+	s.focused = true
+	s.textInput.Focus()
+}
+
+// Blur removes focus from the search dialog
+func (s *SearchDialog) Blur() {
+	s.focused = false
+	s.textInput.Blur()
+}

packages/client/tui/internal/components/dialog/session.go

@@ -0,0 +1,282 @@
+package dialog
+
+import (
+	"context"
+	"strings"
+
+	"slices"
+
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/muesli/reflow/truncate"
+	"github.com/sst/opencode-sdk-go"
+	"github.com/sst/opencode/internal/app"
+	"github.com/sst/opencode/internal/components/list"
+	"github.com/sst/opencode/internal/components/modal"
+	"github.com/sst/opencode/internal/components/toast"
+	"github.com/sst/opencode/internal/layout"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+// SessionDialog interface for the session switching dialog
+type SessionDialog interface {
+	layout.Modal
+}
+
+// sessionItem is a custom list item for sessions that can show delete confirmation
+type sessionItem struct {
+	title              string
+	isDeleteConfirming bool
+	isCurrentSession   bool
+}
+
+func (s sessionItem) Render(
+	selected bool,
+	width int,
+	isFirstInViewport bool,
+	baseStyle styles.Style,
+) string {
+	t := theme.CurrentTheme()
+
+	var text string
+	if s.isDeleteConfirming {
+		text = "Press again to confirm delete"
+	} else {
+		if s.isCurrentSession {
+			text = "● " + s.title
+		} else {
+			text = s.title
+		}
+	}
+
+	truncatedStr := truncate.StringWithTail(text, uint(width-1), "...")
+
+	var itemStyle styles.Style
+	if selected {
+		if s.isDeleteConfirming {
+			// Red background for delete confirmation
+			itemStyle = baseStyle.
+				Background(t.Error()).
+				Foreground(t.BackgroundElement()).
+				Width(width).
+				PaddingLeft(1)
+		} else if s.isCurrentSession {
+			// Different style for current session when selected
+			itemStyle = baseStyle.
+				Background(t.Primary()).
+				Foreground(t.BackgroundElement()).
+				Width(width).
+				PaddingLeft(1).
+				Bold(true)
+		} else {
+			// Normal selection
+			itemStyle = baseStyle.
+				Background(t.Primary()).
+				Foreground(t.BackgroundElement()).
+				Width(width).
+				PaddingLeft(1)
+		}
+	} else {
+		if s.isDeleteConfirming {
+			// Red text for delete confirmation when not selected
+			itemStyle = baseStyle.
+				Foreground(t.Error()).
+				PaddingLeft(1)
+		} else if s.isCurrentSession {
+			// Highlight current session when not selected
+			itemStyle = baseStyle.
+				Foreground(t.Primary()).
+				PaddingLeft(1).
+				Bold(true)
+		} else {
+			itemStyle = baseStyle.
+				PaddingLeft(1)
+		}
+	}
+
+	return itemStyle.Render(truncatedStr)
+}
+
+func (s sessionItem) Selectable() bool {
+	return true
+}
+
+type sessionDialog struct {
+	width              int
+	height             int
+	modal              *modal.Modal
+	sessions           []opencode.Session
+	list               list.List[sessionItem]
+	app                *app.App
+	deleteConfirmation int // -1 means no confirmation, >= 0 means confirming deletion of session at this index
+}
+
+func (s *sessionDialog) Init() tea.Cmd {
+	return nil
+}
+
+func (s *sessionDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		s.width = msg.Width
+		s.height = msg.Height
+		s.list.SetMaxWidth(layout.Current.Container.Width - 12)
+	case tea.KeyPressMsg:
+		switch msg.String() {
+		case "enter":
+			if s.deleteConfirmation >= 0 {
+				s.deleteConfirmation = -1
+				s.updateListItems()
+				return s, nil
+			}
+			if _, idx := s.list.GetSelectedItem(); idx >= 0 && idx < len(s.sessions) {
+				selectedSession := s.sessions[idx]
+				return s, tea.Sequence(
+					util.CmdHandler(modal.CloseModalMsg{}),
+					util.CmdHandler(app.SessionSelectedMsg(&selectedSession)),
+				)
+			}
+		case "n":
+			s.app.Session = &opencode.Session{}
+			s.app.Messages = []app.Message{}
+			return s, tea.Sequence(
+				util.CmdHandler(modal.CloseModalMsg{}),
+				util.CmdHandler(app.SessionClearedMsg{}),
+			)
+		case "x", "delete", "backspace":
+			if _, idx := s.list.GetSelectedItem(); idx >= 0 && idx < len(s.sessions) {
+				if s.deleteConfirmation == idx {
+					// Second press - actually delete the session
+					sessionToDelete := s.sessions[idx]
+					return s, tea.Sequence(
+						func() tea.Msg {
+							s.sessions = slices.Delete(s.sessions, idx, idx+1)
+							s.deleteConfirmation = -1
+							s.updateListItems()
+							return nil
+						},
+						s.deleteSession(sessionToDelete.ID),
+					)
+				} else {
+					// First press - enter delete confirmation mode
+					s.deleteConfirmation = idx
+					s.updateListItems()
+					return s, nil
+				}
+			}
+		case "esc":
+			if s.deleteConfirmation >= 0 {
+				s.deleteConfirmation = -1
+				s.updateListItems()
+				return s, nil
+			}
+		}
+	}
+
+	var cmd tea.Cmd
+	listModel, cmd := s.list.Update(msg)
+	s.list = listModel.(list.List[sessionItem])
+	return s, cmd
+}
+
+func (s *sessionDialog) Render(background string) string {
+	listView := s.list.View()
+
+	t := theme.CurrentTheme()
+	keyStyle := styles.NewStyle().Foreground(t.Text()).Background(t.BackgroundPanel()).Render
+	mutedStyle := styles.NewStyle().Foreground(t.TextMuted()).Background(t.BackgroundPanel()).Render
+
+	leftHelp := keyStyle("n") + mutedStyle(" new session")
+	rightHelp := keyStyle("x/del") + mutedStyle(" delete session")
+
+	bgColor := t.BackgroundPanel()
+	helpText := layout.Render(layout.FlexOptions{
+		Direction:  layout.Row,
+		Justify:    layout.JustifySpaceBetween,
+		Width:      layout.Current.Container.Width - 14,
+		Background: &bgColor,
+	}, layout.FlexItem{View: leftHelp}, layout.FlexItem{View: rightHelp})
+
+	helpText = styles.NewStyle().PaddingLeft(1).PaddingTop(1).Render(helpText)
+
+	content := strings.Join([]string{listView, helpText}, "\n")
+
+	return s.modal.Render(content, background)
+}
+
+func (s *sessionDialog) updateListItems() {
+	_, currentIdx := s.list.GetSelectedItem()
+
+	var items []sessionItem
+	for i, sess := range s.sessions {
+		item := sessionItem{
+			title:              sess.Title,
+			isDeleteConfirming: s.deleteConfirmation == i,
+			isCurrentSession:   s.app.Session != nil && s.app.Session.ID == sess.ID,
+		}
+		items = append(items, item)
+	}
+	s.list.SetItems(items)
+	s.list.SetSelectedIndex(currentIdx)
+}
+
+func (s *sessionDialog) deleteSession(sessionID string) tea.Cmd {
+	return func() tea.Msg {
+		ctx := context.Background()
+		if err := s.app.DeleteSession(ctx, sessionID); err != nil {
+			return toast.NewErrorToast("Failed to delete session: " + err.Error())()
+		}
+		return nil
+	}
+}
+
+func (s *sessionDialog) Close() tea.Cmd {
+	return nil
+}
+
+// NewSessionDialog creates a new session switching dialog
+func NewSessionDialog(app *app.App) SessionDialog {
+	sessions, _ := app.ListSessions(context.Background())
+
+	var filteredSessions []opencode.Session
+	var items []sessionItem
+	for _, sess := range sessions {
+		if sess.ParentID != "" {
+			continue
+		}
+		filteredSessions = append(filteredSessions, sess)
+		items = append(items, sessionItem{
+			title:              sess.Title,
+			isDeleteConfirming: false,
+			isCurrentSession:   app.Session != nil && app.Session.ID == sess.ID,
+		})
+	}
+
+	listComponent := list.NewListComponent(
+		list.WithItems(items),
+		list.WithMaxVisibleHeight[sessionItem](10),
+		list.WithFallbackMessage[sessionItem]("No sessions available"),
+		list.WithAlphaNumericKeys[sessionItem](true),
+		list.WithRenderFunc(
+			func(item sessionItem, selected bool, width int, baseStyle styles.Style) string {
+				return item.Render(selected, width, false, baseStyle)
+			},
+		),
+		list.WithSelectableFunc(func(item sessionItem) bool {
+			return true
+		}),
+	)
+	listComponent.SetMaxWidth(layout.Current.Container.Width - 12)
+
+	return &sessionDialog{
+		sessions:           filteredSessions,
+		list:               listComponent,
+		app:                app,
+		deleteConfirmation: -1,
+		modal: modal.New(
+			modal.WithTitle("Switch Session"),
+			modal.WithMaxWidth(layout.Current.Container.Width-8),
+		),
+	}
+}

packages/client/tui/internal/components/dialog/theme.go

@@ -0,0 +1,132 @@
+package dialog
+
+import (
+	tea "github.com/charmbracelet/bubbletea/v2"
+	list "github.com/sst/opencode/internal/components/list"
+	"github.com/sst/opencode/internal/components/modal"
+	"github.com/sst/opencode/internal/layout"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+// ThemeSelectedMsg is sent when the theme is changed
+type ThemeSelectedMsg struct {
+	ThemeName string
+}
+
+// ThemeDialog interface for the theme switching dialog
+type ThemeDialog interface {
+	layout.Modal
+}
+
+type themeDialog struct {
+	width  int
+	height int
+
+	modal         *modal.Modal
+	list          list.List[list.Item]
+	originalTheme string
+	themeApplied  bool
+}
+
+func (t *themeDialog) Init() tea.Cmd {
+	return nil
+}
+
+func (t *themeDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		t.width = msg.Width
+		t.height = msg.Height
+	case tea.KeyMsg:
+		switch msg.String() {
+		case "enter":
+			if item, idx := t.list.GetSelectedItem(); idx >= 0 {
+				if stringItem, ok := item.(list.StringItem); ok {
+					selectedTheme := string(stringItem)
+					if err := theme.SetTheme(selectedTheme); err != nil {
+						// status.Error(err.Error())
+						return t, nil
+					}
+					t.themeApplied = true
+					return t, tea.Sequence(
+						util.CmdHandler(modal.CloseModalMsg{}),
+						util.CmdHandler(ThemeSelectedMsg{ThemeName: selectedTheme}),
+					)
+				}
+			}
+
+		}
+	}
+
+	_, prevIdx := t.list.GetSelectedItem()
+
+	var cmd tea.Cmd
+	listModel, cmd := t.list.Update(msg)
+	t.list = listModel.(list.List[list.Item])
+
+	if item, newIdx := t.list.GetSelectedItem(); newIdx >= 0 && newIdx != prevIdx {
+		if stringItem, ok := item.(list.StringItem); ok {
+			theme.SetTheme(string(stringItem))
+			return t, util.CmdHandler(ThemeSelectedMsg{ThemeName: string(stringItem)})
+		}
+	}
+	return t, cmd
+}
+
+func (t *themeDialog) Render(background string) string {
+	return t.modal.Render(t.list.View(), background)
+}
+
+func (t *themeDialog) Close() tea.Cmd {
+	if !t.themeApplied {
+		theme.SetTheme(t.originalTheme)
+		return util.CmdHandler(ThemeSelectedMsg{ThemeName: t.originalTheme})
+	}
+	return nil
+}
+
+// NewThemeDialog creates a new theme switching dialog
+func NewThemeDialog() ThemeDialog {
+	themes := theme.AvailableThemes()
+	currentTheme := theme.CurrentThemeName()
+
+	var selectedIdx int
+	for i, name := range themes {
+		if name == currentTheme {
+			selectedIdx = i
+		}
+	}
+
+	// Convert themes to list items
+	items := make([]list.Item, len(themes))
+	for i, theme := range themes {
+		items[i] = list.StringItem(theme)
+	}
+
+	listComponent := list.NewListComponent(
+		list.WithItems(items),
+		list.WithMaxVisibleHeight[list.Item](10),
+		list.WithFallbackMessage[list.Item]("No themes available"),
+		list.WithAlphaNumericKeys[list.Item](true),
+		list.WithRenderFunc(func(item list.Item, selected bool, width int, baseStyle styles.Style) string {
+			return item.Render(selected, width, baseStyle)
+		}),
+		list.WithSelectableFunc(func(item list.Item) bool {
+			return item.Selectable()
+		}),
+	)
+
+	// Set the initial selection to the current theme
+	listComponent.SetSelectedIndex(selectedIdx)
+
+	// Set the max width for the list to match the modal width
+	listComponent.SetMaxWidth(36) // 40 (modal max width) - 4 (modal padding)
+	return &themeDialog{
+		list:          listComponent,
+		modal:         modal.New(modal.WithTitle("Select Theme"), modal.WithMaxWidth(40)),
+		originalTheme: currentTheme,
+		themeApplied:  false,
+	}
+}

packages/client/tui/internal/components/diff/diff.go

@@ -0,0 +1,957 @@
+package diff
+
+import (
+	"bufio"
+	"bytes"
+	"fmt"
+	"image/color"
+	"io"
+	"regexp"
+	"strconv"
+	"strings"
+	"sync"
+	"unicode/utf8"
+
+	"github.com/alecthomas/chroma/v2"
+	"github.com/alecthomas/chroma/v2/formatters"
+	"github.com/alecthomas/chroma/v2/lexers"
+	"github.com/alecthomas/chroma/v2/styles"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/charmbracelet/lipgloss/v2/compat"
+	"github.com/charmbracelet/x/ansi"
+	"github.com/sergi/go-diff/diffmatchpatch"
+	stylesi "github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+)
+
+// -------------------------------------------------------------------------
+// Core Types
+// -------------------------------------------------------------------------
+
+// LineType represents the kind of line in a diff.
+type LineType int
+
+const (
+	LineContext LineType = iota // Line exists in both files
+	LineAdded                   // Line added in the new file
+	LineRemoved                 // Line removed from the old file
+)
+
+var (
+	ansiRegex = regexp.MustCompile(`\x1b(?:[@-Z\\-_]|\[[0-9?]*(?:;[0-9?]*)*[@-~])`)
+)
+
+// Segment represents a portion of a line for intra-line highlighting
+type Segment struct {
+	Start int
+	End   int
+	Type  LineType
+	Text  string
+}
+
+// DiffLine represents a single line in a diff
+type DiffLine struct {
+	OldLineNo int       // Line number in old file (0 for added lines)
+	NewLineNo int       // Line number in new file (0 for removed lines)
+	Kind      LineType  // Type of line (added, removed, context)
+	Content   string    // Content of the line
+	Segments  []Segment // Segments for intraline highlighting
+}
+
+// Hunk represents a section of changes in a diff
+type Hunk struct {
+	Header string
+	Lines  []DiffLine
+}
+
+// DiffResult contains the parsed result of a diff
+type DiffResult struct {
+	OldFile string
+	NewFile string
+	Hunks   []Hunk
+}
+
+// linePair represents a pair of lines for side-by-side display
+type linePair struct {
+	left  *DiffLine
+	right *DiffLine
+}
+
+// UnifiedConfig configures the rendering of unified diffs
+type UnifiedConfig struct {
+	Width int
+}
+
+// UnifiedOption modifies a UnifiedConfig
+type UnifiedOption func(*UnifiedConfig)
+
+// NewUnifiedConfig creates a UnifiedConfig with default values
+func NewUnifiedConfig(opts ...UnifiedOption) UnifiedConfig {
+	config := UnifiedConfig{
+		Width: 80,
+	}
+	for _, opt := range opts {
+		opt(&config)
+	}
+	return config
+}
+
+// NewSideBySideConfig creates a SideBySideConfig with default values
+func NewSideBySideConfig(opts ...UnifiedOption) UnifiedConfig {
+	config := UnifiedConfig{
+		Width: 160,
+	}
+	for _, opt := range opts {
+		opt(&config)
+	}
+	return config
+}
+
+// WithWidth sets the width for unified view
+func WithWidth(width int) UnifiedOption {
+	return func(u *UnifiedConfig) {
+		if width > 0 {
+			u.Width = width
+		}
+	}
+}
+
+// -------------------------------------------------------------------------
+// Diff Parsing
+// -------------------------------------------------------------------------
+
+// ParseUnifiedDiff parses a unified diff format string into structured data
+func ParseUnifiedDiff(diff string) (DiffResult, error) {
+	var result DiffResult
+	var currentHunk *Hunk
+	result.Hunks = make([]Hunk, 0, 10) // Pre-allocate with a reasonable capacity
+
+	scanner := bufio.NewScanner(strings.NewReader(diff))
+	var oldLine, newLine int
+	inFileHeader := true
+
+	for scanner.Scan() {
+		line := scanner.Text()
+
+		if inFileHeader {
+			if strings.HasPrefix(line, "--- a/") {
+				result.OldFile = line[6:]
+				continue
+			}
+			if strings.HasPrefix(line, "+++ b/") {
+				result.NewFile = line[6:]
+				inFileHeader = false
+				continue
+			}
+		}
+
+		if strings.HasPrefix(line, "@@") {
+			if currentHunk != nil {
+				result.Hunks = append(result.Hunks, *currentHunk)
+			}
+			currentHunk = &Hunk{
+				Header: line,
+				Lines:  make([]DiffLine, 0, 10), // Pre-allocate
+			}
+
+			// Manual parsing of hunk header is faster than regex
+			parts := strings.Split(line, " ")
+			if len(parts) > 2 {
+				oldRange := strings.Split(parts[1][1:], ",")
+				newRange := strings.Split(parts[2][1:], ",")
+				oldLine, _ = strconv.Atoi(oldRange[0])
+				newLine, _ = strconv.Atoi(newRange[0])
+			}
+			continue
+		}
+
+		if strings.HasPrefix(line, "\\ No newline at end of file") || currentHunk == nil {
+			continue
+		}
+
+		var dl DiffLine
+		dl.Content = line
+		if len(line) > 0 {
+			switch line[0] {
+			case '+':
+				dl.Kind = LineAdded
+				dl.NewLineNo = newLine
+				dl.Content = line[1:]
+				newLine++
+			case '-':
+				dl.Kind = LineRemoved
+				dl.OldLineNo = oldLine
+				dl.Content = line[1:]
+				oldLine++
+			default: // context line
+				dl.Kind = LineContext
+				dl.OldLineNo = oldLine
+				dl.NewLineNo = newLine
+				oldLine++
+				newLine++
+			}
+		} else { // empty context line
+			dl.Kind = LineContext
+			dl.OldLineNo = oldLine
+			dl.NewLineNo = newLine
+			oldLine++
+			newLine++
+		}
+		currentHunk.Lines = append(currentHunk.Lines, dl)
+	}
+
+	if currentHunk != nil {
+		result.Hunks = append(result.Hunks, *currentHunk)
+	}
+
+	return result, scanner.Err()
+}
+
+// HighlightIntralineChanges updates lines in a hunk to show character-level differences
+func HighlightIntralineChanges(h *Hunk) {
+	var updated []DiffLine
+	dmp := diffmatchpatch.New()
+
+	for i := 0; i < len(h.Lines); i++ {
+		// Look for removed line followed by added line
+		if i+1 < len(h.Lines) &&
+			h.Lines[i].Kind == LineRemoved &&
+			h.Lines[i+1].Kind == LineAdded {
+
+			oldLine := h.Lines[i]
+			newLine := h.Lines[i+1]
+
+			// Find character-level differences
+			patches := dmp.DiffMain(oldLine.Content, newLine.Content, false)
+			patches = dmp.DiffCleanupSemantic(patches)
+			patches = dmp.DiffCleanupMerge(patches)
+			patches = dmp.DiffCleanupEfficiency(patches)
+
+			segments := make([]Segment, 0)
+
+			removeStart := 0
+			addStart := 0
+			for _, patch := range patches {
+				switch patch.Type {
+				case diffmatchpatch.DiffDelete:
+					segments = append(segments, Segment{
+						Start: removeStart,
+						End:   removeStart + len(patch.Text),
+						Type:  LineRemoved,
+						Text:  patch.Text,
+					})
+					removeStart += len(patch.Text)
+				case diffmatchpatch.DiffInsert:
+					segments = append(segments, Segment{
+						Start: addStart,
+						End:   addStart + len(patch.Text),
+						Type:  LineAdded,
+						Text:  patch.Text,
+					})
+					addStart += len(patch.Text)
+				default:
+					// Context text, no highlighting needed
+					removeStart += len(patch.Text)
+					addStart += len(patch.Text)
+				}
+			}
+			oldLine.Segments = segments
+			newLine.Segments = segments
+
+			updated = append(updated, oldLine, newLine)
+			i++ // Skip the next line as we've already processed it
+		} else {
+			updated = append(updated, h.Lines[i])
+		}
+	}
+
+	h.Lines = updated
+}
+
+// pairLines converts a flat list of diff lines to pairs for side-by-side display
+func pairLines(lines []DiffLine) []linePair {
+	var pairs []linePair
+	i := 0
+
+	for i < len(lines) {
+		switch lines[i].Kind {
+		case LineRemoved:
+			// Check if the next line is an addition, if so pair them
+			if i+1 < len(lines) && lines[i+1].Kind == LineAdded {
+				pairs = append(pairs, linePair{left: &lines[i], right: &lines[i+1]})
+				i += 2
+			} else {
+				pairs = append(pairs, linePair{left: &lines[i], right: nil})
+				i++
+			}
+		case LineAdded:
+			pairs = append(pairs, linePair{left: nil, right: &lines[i]})
+			i++
+		case LineContext:
+			pairs = append(pairs, linePair{left: &lines[i], right: &lines[i]})
+			i++
+		}
+	}
+
+	return pairs
+}
+
+// -------------------------------------------------------------------------
+// Syntax Highlighting
+// -------------------------------------------------------------------------
+
+// SyntaxHighlight applies syntax highlighting to text based on file extension
+func SyntaxHighlight(w io.Writer, source, fileName, formatter string, bg color.Color) error {
+	t := theme.CurrentTheme()
+
+	// Determine the language lexer to use
+	l := lexers.Match(fileName)
+	if l == nil {
+		l = lexers.Analyse(source)
+	}
+	if l == nil {
+		l = lexers.Fallback
+	}
+	l = chroma.Coalesce(l)
+
+	// Get the formatter
+	f := formatters.Get(formatter)
+	if f == nil {
+		f = formatters.Fallback
+	}
+
+	// Dynamic theme based on current theme values
+	syntaxThemeXml := fmt.Sprintf(`
+	<style name="opencode-theme">
+	<!-- Base colors -->
+	<entry type="Background" style="bg:%s"/>
+	<entry type="Text" style="%s"/>
+	<entry type="Other" style="%s"/>
+	<entry type="Error" style="%s"/>
+	<!-- Keywords -->
+	<entry type="Keyword" style="%s"/>
+	<entry type="KeywordConstant" style="%s"/>
+	<entry type="KeywordDeclaration" style="%s"/>
+	<entry type="KeywordNamespace" style="%s"/>
+	<entry type="KeywordPseudo" style="%s"/>
+	<entry type="KeywordReserved" style="%s"/>
+	<entry type="KeywordType" style="%s"/>
+	<!-- Names -->
+	<entry type="Name" style="%s"/>
+	<entry type="NameAttribute" style="%s"/>
+	<entry type="NameBuiltin" style="%s"/>
+	<entry type="NameBuiltinPseudo" style="%s"/>
+	<entry type="NameClass" style="%s"/>
+	<entry type="NameConstant" style="%s"/>
+	<entry type="NameDecorator" style="%s"/>
+	<entry type="NameEntity" style="%s"/>
+	<entry type="NameException" style="%s"/>
+	<entry type="NameFunction" style="%s"/>
+	<entry type="NameLabel" style="%s"/>
+	<entry type="NameNamespace" style="%s"/>
+	<entry type="NameOther" style="%s"/>
+	<entry type="NameTag" style="%s"/>
+	<entry type="NameVariable" style="%s"/>
+	<entry type="NameVariableClass" style="%s"/>
+	<entry type="NameVariableGlobal" style="%s"/>
+	<entry type="NameVariableInstance" style="%s"/>
+	<!-- Literals -->
+	<entry type="Literal" style="%s"/>
+	<entry type="LiteralDate" style="%s"/>
+	<entry type="LiteralString" style="%s"/>
+	<entry type="LiteralStringBacktick" style="%s"/>
+	<entry type="LiteralStringChar" style="%s"/>
+	<entry type="LiteralStringDoc" style="%s"/>
+	<entry type="LiteralStringDouble" style="%s"/>
+	<entry type="LiteralStringEscape" style="%s"/>
+	<entry type="LiteralStringHeredoc" style="%s"/>
+	<entry type="LiteralStringInterpol" style="%s"/>
+	<entry type="LiteralStringOther" style="%s"/>
+	<entry type="LiteralStringRegex" style="%s"/>
+	<entry type="LiteralStringSingle" style="%s"/>
+	<entry type="LiteralStringSymbol" style="%s"/>
+	<!-- Numbers -->
+	<entry type="LiteralNumber" style="%s"/>
+	<entry type="LiteralNumberBin" style="%s"/>
+	<entry type="LiteralNumberFloat" style="%s"/>
+	<entry type="LiteralNumberHex" style="%s"/>
+	<entry type="LiteralNumberInteger" style="%s"/>
+	<entry type="LiteralNumberIntegerLong" style="%s"/>
+	<entry type="LiteralNumberOct" style="%s"/>
+	<!-- Operators -->
+	<entry type="Operator" style="%s"/>
+	<entry type="OperatorWord" style="%s"/>
+	<entry type="Punctuation" style="%s"/>
+	<!-- Comments -->
+	<entry type="Comment" style="%s"/>
+	<entry type="CommentHashbang" style="%s"/>
+	<entry type="CommentMultiline" style="%s"/>
+	<entry type="CommentSingle" style="%s"/>
+	<entry type="CommentSpecial" style="%s"/>
+	<entry type="CommentPreproc" style="%s"/>
+	<!-- Generic styles -->
+	<entry type="Generic" style="%s"/>
+	<entry type="GenericDeleted" style="%s"/>
+	<entry type="GenericEmph" style="italic %s"/>
+	<entry type="GenericError" style="%s"/>
+	<entry type="GenericHeading" style="bold %s"/>
+	<entry type="GenericInserted" style="%s"/>
+	<entry type="GenericOutput" style="%s"/>
+	<entry type="GenericPrompt" style="%s"/>
+	<entry type="GenericStrong" style="bold %s"/>
+	<entry type="GenericSubheading" style="bold %s"/>
+	<entry type="GenericTraceback" style="%s"/>
+	<entry type="GenericUnderline" style="underline"/>
+	<entry type="TextWhitespace" style="%s"/>
+</style>
+`,
+		getChromaColor(t.BackgroundPanel()), // Background
+		getChromaColor(t.Text()),            // Text
+		getChromaColor(t.Text()),            // Other
+		getChromaColor(t.Error()),           // Error
+
+		getChromaColor(t.SyntaxKeyword()), // Keyword
+		getChromaColor(t.SyntaxKeyword()), // KeywordConstant
+		getChromaColor(t.SyntaxKeyword()), // KeywordDeclaration
+		getChromaColor(t.SyntaxKeyword()), // KeywordNamespace
+		getChromaColor(t.SyntaxKeyword()), // KeywordPseudo
+		getChromaColor(t.SyntaxKeyword()), // KeywordReserved
+		getChromaColor(t.SyntaxType()),    // KeywordType
+
+		getChromaColor(t.Text()),           // Name
+		getChromaColor(t.SyntaxVariable()), // NameAttribute
+		getChromaColor(t.SyntaxType()),     // NameBuiltin
+		getChromaColor(t.SyntaxVariable()), // NameBuiltinPseudo
+		getChromaColor(t.SyntaxType()),     // NameClass
+		getChromaColor(t.SyntaxVariable()), // NameConstant
+		getChromaColor(t.SyntaxFunction()), // NameDecorator
+		getChromaColor(t.SyntaxVariable()), // NameEntity
+		getChromaColor(t.SyntaxType()),     // NameException
+		getChromaColor(t.SyntaxFunction()), // NameFunction
+		getChromaColor(t.Text()),           // NameLabel
+		getChromaColor(t.SyntaxType()),     // NameNamespace
+		getChromaColor(t.SyntaxVariable()), // NameOther
+		getChromaColor(t.SyntaxKeyword()),  // NameTag
+		getChromaColor(t.SyntaxVariable()), // NameVariable
+		getChromaColor(t.SyntaxVariable()), // NameVariableClass
+		getChromaColor(t.SyntaxVariable()), // NameVariableGlobal
+		getChromaColor(t.SyntaxVariable()), // NameVariableInstance
+
+		getChromaColor(t.SyntaxString()), // Literal
+		getChromaColor(t.SyntaxString()), // LiteralDate
+		getChromaColor(t.SyntaxString()), // LiteralString
+		getChromaColor(t.SyntaxString()), // LiteralStringBacktick
+		getChromaColor(t.SyntaxString()), // LiteralStringChar
+		getChromaColor(t.SyntaxString()), // LiteralStringDoc
+		getChromaColor(t.SyntaxString()), // LiteralStringDouble
+		getChromaColor(t.SyntaxString()), // LiteralStringEscape
+		getChromaColor(t.SyntaxString()), // LiteralStringHeredoc
+		getChromaColor(t.SyntaxString()), // LiteralStringInterpol
+		getChromaColor(t.SyntaxString()), // LiteralStringOther
+		getChromaColor(t.SyntaxString()), // LiteralStringRegex
+		getChromaColor(t.SyntaxString()), // LiteralStringSingle
+		getChromaColor(t.SyntaxString()), // LiteralStringSymbol
+
+		getChromaColor(t.SyntaxNumber()), // LiteralNumber
+		getChromaColor(t.SyntaxNumber()), // LiteralNumberBin
+		getChromaColor(t.SyntaxNumber()), // LiteralNumberFloat
+		getChromaColor(t.SyntaxNumber()), // LiteralNumberHex
+		getChromaColor(t.SyntaxNumber()), // LiteralNumberInteger
+		getChromaColor(t.SyntaxNumber()), // LiteralNumberIntegerLong
+		getChromaColor(t.SyntaxNumber()), // LiteralNumberOct
+
+		getChromaColor(t.SyntaxOperator()),    // Operator
+		getChromaColor(t.SyntaxKeyword()),     // OperatorWord
+		getChromaColor(t.SyntaxPunctuation()), // Punctuation
+
+		getChromaColor(t.SyntaxComment()), // Comment
+		getChromaColor(t.SyntaxComment()), // CommentHashbang
+		getChromaColor(t.SyntaxComment()), // CommentMultiline
+		getChromaColor(t.SyntaxComment()), // CommentSingle
+		getChromaColor(t.SyntaxComment()), // CommentSpecial
+		getChromaColor(t.SyntaxKeyword()), // CommentPreproc
+
+		getChromaColor(t.Text()),      // Generic
+		getChromaColor(t.Error()),     // GenericDeleted
+		getChromaColor(t.Text()),      // GenericEmph
+		getChromaColor(t.Error()),     // GenericError
+		getChromaColor(t.Text()),      // GenericHeading
+		getChromaColor(t.Success()),   // GenericInserted
+		getChromaColor(t.TextMuted()), // GenericOutput
+		getChromaColor(t.Text()),      // GenericPrompt
+		getChromaColor(t.Text()),      // GenericStrong
+		getChromaColor(t.Text()),      // GenericSubheading
+		getChromaColor(t.Error()),     // GenericTraceback
+		getChromaColor(t.Text()),      // TextWhitespace
+	)
+
+	r := strings.NewReader(syntaxThemeXml)
+	style := chroma.MustNewXMLStyle(r)
+
+	// Modify the style to use the provided background
+	s, err := style.Builder().Transform(
+		func(t chroma.StyleEntry) chroma.StyleEntry {
+			if _, ok := bg.(lipgloss.NoColor); ok {
+				return t
+			}
+			r, g, b, _ := bg.RGBA()
+			t.Background = chroma.NewColour(uint8(r>>8), uint8(g>>8), uint8(b>>8))
+			return t
+		},
+	).Build()
+	if err != nil {
+		s = styles.Fallback
+	}
+
+	// Tokenize and format
+	it, err := l.Tokenise(nil, source)
+	if err != nil {
+		return err
+	}
+
+	return f.Format(w, s, it)
+}
+
+// getColor returns the appropriate hex color string based on terminal background
+func getColor(adaptiveColor compat.AdaptiveColor) *string {
+	return stylesi.AdaptiveColorToString(adaptiveColor)
+}
+
+func getChromaColor(adaptiveColor compat.AdaptiveColor) string {
+	color := stylesi.AdaptiveColorToString(adaptiveColor)
+	if color == nil {
+		return ""
+	}
+	return *color
+}
+
+// highlightLine applies syntax highlighting to a single line
+func highlightLine(fileName string, line string, bg color.Color) string {
+	var buf bytes.Buffer
+	err := SyntaxHighlight(&buf, line, fileName, "terminal16m", bg)
+	if err != nil {
+		return line
+	}
+	return buf.String()
+}
+
+// createStyles generates the lipgloss styles needed for rendering diffs
+func createStyles(t theme.Theme) (removedLineStyle, addedLineStyle, contextLineStyle, lineNumberStyle stylesi.Style) {
+	removedLineStyle = stylesi.NewStyle().Background(t.DiffRemovedBg())
+	addedLineStyle = stylesi.NewStyle().Background(t.DiffAddedBg())
+	contextLineStyle = stylesi.NewStyle().Background(t.DiffContextBg())
+	lineNumberStyle = stylesi.NewStyle().Foreground(t.TextMuted()).Background(t.DiffLineNumber())
+	return
+}
+
+// -------------------------------------------------------------------------
+// Rendering Functions
+// -------------------------------------------------------------------------
+
+// applyHighlighting applies intra-line highlighting to a piece of text
+func applyHighlighting(content string, segments []Segment, segmentType LineType, highlightBg compat.AdaptiveColor) string {
+	// Find all ANSI sequences in the content
+	ansiMatches := ansiRegex.FindAllStringIndex(content, -1)
+
+	// Build a mapping of visible character positions to their actual indices
+	visibleIdx := 0
+	ansiSequences := make(map[int]string)
+	lastAnsiSeq := "\x1b[0m" // Default reset sequence
+
+	for i := 0; i < len(content); {
+		isAnsi := false
+		for _, match := range ansiMatches {
+			if match[0] == i {
+				ansiSequences[visibleIdx] = content[match[0]:match[1]]
+				lastAnsiSeq = content[match[0]:match[1]]
+				i = match[1]
+				isAnsi = true
+				break
+			}
+		}
+		if isAnsi {
+			continue
+		}
+
+		// For non-ANSI positions, store the last ANSI sequence
+		if _, exists := ansiSequences[visibleIdx]; !exists {
+			ansiSequences[visibleIdx] = lastAnsiSeq
+		}
+		visibleIdx++
+
+		// Properly advance by UTF-8 rune, not byte
+		_, size := utf8.DecodeRuneInString(content[i:])
+		i += size
+	}
+
+	// Apply highlighting
+	var sb strings.Builder
+	inSelection := false
+	currentPos := 0
+
+	// Get the appropriate color based on terminal background
+	bg := getColor(highlightBg)
+	fg := getColor(theme.CurrentTheme().BackgroundPanel())
+	var bgColor color.Color
+	var fgColor color.Color
+
+	if bg != nil {
+		bgColor = lipgloss.Color(*bg)
+	}
+	if fg != nil {
+		fgColor = lipgloss.Color(*fg)
+	}
+	for i := 0; i < len(content); {
+		// Check if we're at an ANSI sequence
+		isAnsi := false
+		for _, match := range ansiMatches {
+			if match[0] == i {
+				sb.WriteString(content[match[0]:match[1]]) // Preserve ANSI sequence
+				i = match[1]
+				isAnsi = true
+				break
+			}
+		}
+		if isAnsi {
+			continue
+		}
+
+		// Check for segment boundaries
+		for _, seg := range segments {
+			if seg.Type == segmentType {
+				if currentPos == seg.Start {
+					inSelection = true
+				}
+				if currentPos == seg.End {
+					inSelection = false
+				}
+			}
+		}
+
+		// Get current character (properly handle UTF-8)
+		r, size := utf8.DecodeRuneInString(content[i:])
+		char := string(r)
+
+		if inSelection {
+			// Get the current styling
+			currentStyle := ansiSequences[currentPos]
+
+			// Apply foreground and background highlight
+			if fgColor != nil {
+				sb.WriteString("\x1b[38;2;")
+				r, g, b, _ := fgColor.RGBA()
+				sb.WriteString(fmt.Sprintf("%d;%d;%dm", r>>8, g>>8, b>>8))
+			} else {
+				sb.WriteString("\x1b[49m")
+			}
+			if bgColor != nil {
+				sb.WriteString("\x1b[48;2;")
+				r, g, b, _ := bgColor.RGBA()
+				sb.WriteString(fmt.Sprintf("%d;%d;%dm", r>>8, g>>8, b>>8))
+			} else {
+				sb.WriteString("\x1b[39m")
+			}
+			sb.WriteString(char)
+
+			// Full reset of all attributes to ensure clean state
+			sb.WriteString("\x1b[0m")
+
+			// Reapply the original ANSI sequence
+			sb.WriteString(currentStyle)
+		} else {
+			// Not in selection, just copy the character
+			sb.WriteString(char)
+		}
+
+		currentPos++
+		i += size
+	}
+
+	return sb.String()
+}
+
+// renderLinePrefix renders the line number and marker prefix for a diff line
+func renderLinePrefix(dl DiffLine, lineNum string, marker string, lineNumberStyle stylesi.Style, t theme.Theme) string {
+	// Style the marker based on line type
+	var styledMarker string
+	switch dl.Kind {
+	case LineRemoved:
+		styledMarker = stylesi.NewStyle().Foreground(t.DiffRemoved()).Background(t.DiffRemovedBg()).Render(marker)
+	case LineAdded:
+		styledMarker = stylesi.NewStyle().Foreground(t.DiffAdded()).Background(t.DiffAddedBg()).Render(marker)
+	case LineContext:
+		styledMarker = stylesi.NewStyle().Foreground(t.TextMuted()).Background(t.DiffContextBg()).Render(marker)
+	default:
+		styledMarker = marker
+	}
+
+	return lineNumberStyle.Render(lineNum + " " + styledMarker)
+}
+
+// renderLineContent renders the content of a diff line with syntax and intra-line highlighting
+func renderLineContent(fileName string, dl DiffLine, bgStyle stylesi.Style, highlightColor compat.AdaptiveColor, width int) string {
+	// Apply syntax highlighting
+	content := highlightLine(fileName, dl.Content, bgStyle.GetBackground())
+
+	// Apply intra-line highlighting if needed
+	if len(dl.Segments) > 0 && (dl.Kind == LineRemoved || dl.Kind == LineAdded) {
+		content = applyHighlighting(content, dl.Segments, dl.Kind, highlightColor)
+	}
+
+	// Add a padding space for added/removed lines
+	if dl.Kind == LineRemoved || dl.Kind == LineAdded {
+		content = bgStyle.Render(" ") + content
+	}
+
+	// Create the final line and truncate if needed
+	return bgStyle.MaxHeight(1).Width(width).Render(
+		ansi.Truncate(
+			content,
+			width,
+			"...",
+		),
+	)
+}
+
+// renderUnifiedLine renders a single line in unified diff format
+func renderUnifiedLine(fileName string, dl DiffLine, width int, t theme.Theme) string {
+	removedLineStyle, addedLineStyle, contextLineStyle, lineNumberStyle := createStyles(t)
+
+	// Determine line style and marker based on line type
+	var marker string
+	var bgStyle stylesi.Style
+	var lineNum string
+	var highlightColor compat.AdaptiveColor
+
+	switch dl.Kind {
+	case LineRemoved:
+		marker = "-"
+		bgStyle = removedLineStyle
+		lineNumberStyle = lineNumberStyle.Background(t.DiffRemovedLineNumberBg()).Foreground(t.DiffRemoved())
+		highlightColor = t.DiffHighlightRemoved() // TODO: handle "none"
+		if dl.OldLineNo > 0 {
+			lineNum = fmt.Sprintf("%6d       ", dl.OldLineNo)
+		} else {
+			lineNum = "            "
+		}
+	case LineAdded:
+		marker = "+"
+		bgStyle = addedLineStyle
+		lineNumberStyle = lineNumberStyle.Background(t.DiffAddedLineNumberBg()).Foreground(t.DiffAdded())
+		highlightColor = t.DiffHighlightAdded() // TODO: handle "none"
+		if dl.NewLineNo > 0 {
+			lineNum = fmt.Sprintf("      %7d", dl.NewLineNo)
+		} else {
+			lineNum = "            "
+		}
+	case LineContext:
+		marker = " "
+		bgStyle = contextLineStyle
+		if dl.OldLineNo > 0 && dl.NewLineNo > 0 {
+			lineNum = fmt.Sprintf("%6d %6d", dl.OldLineNo, dl.NewLineNo)
+		} else {
+			lineNum = "            "
+		}
+	}
+
+	// Create the line prefix
+	prefix := renderLinePrefix(dl, lineNum, marker, lineNumberStyle, t)
+
+	// Render the content
+	prefixWidth := ansi.StringWidth(prefix)
+	contentWidth := width - prefixWidth
+	content := renderLineContent(fileName, dl, bgStyle, highlightColor, contentWidth)
+
+	return prefix + content
+}
+
+// renderDiffColumnLine is a helper function that handles the common logic for rendering diff columns
+func renderDiffColumnLine(
+	fileName string,
+	dl *DiffLine,
+	colWidth int,
+	isLeftColumn bool,
+	t theme.Theme,
+) string {
+	if dl == nil {
+		contextLineStyle := stylesi.NewStyle().Background(t.DiffContextBg())
+		return contextLineStyle.Width(colWidth).Render("")
+	}
+
+	removedLineStyle, addedLineStyle, contextLineStyle, lineNumberStyle := createStyles(t)
+
+	// Determine line style based on line type and column
+	var marker string
+	var bgStyle stylesi.Style
+	var lineNum string
+	var highlightColor compat.AdaptiveColor
+
+	if isLeftColumn {
+		// Left column logic
+		switch dl.Kind {
+		case LineRemoved:
+			marker = "-"
+			bgStyle = removedLineStyle
+			lineNumberStyle = lineNumberStyle.Background(t.DiffRemovedLineNumberBg()).Foreground(t.DiffRemoved())
+			highlightColor = t.DiffHighlightRemoved() // TODO: handle "none"
+		case LineAdded:
+			marker = "?"
+			bgStyle = contextLineStyle
+		case LineContext:
+			marker = " "
+			bgStyle = contextLineStyle
+		}
+
+		// Format line number for left column
+		if dl.OldLineNo > 0 {
+			lineNum = fmt.Sprintf("%6d", dl.OldLineNo)
+		}
+	} else {
+		// Right column logic
+		switch dl.Kind {
+		case LineAdded:
+			marker = "+"
+			bgStyle = addedLineStyle
+			lineNumberStyle = lineNumberStyle.Background(t.DiffAddedLineNumberBg()).Foreground(t.DiffAdded())
+			highlightColor = t.DiffHighlightAdded()
+		case LineRemoved:
+			marker = "?"
+			bgStyle = contextLineStyle
+		case LineContext:
+			marker = " "
+			bgStyle = contextLineStyle
+		}
+
+		// Format line number for right column
+		if dl.NewLineNo > 0 {
+			lineNum = fmt.Sprintf("%6d", dl.NewLineNo)
+		}
+	}
+
+	// Create the line prefix
+	prefix := renderLinePrefix(*dl, lineNum, marker, lineNumberStyle, t)
+
+	// Determine if we should render content
+	shouldRenderContent := (dl.Kind == LineRemoved && isLeftColumn) ||
+		(dl.Kind == LineAdded && !isLeftColumn) ||
+		dl.Kind == LineContext
+
+	if !shouldRenderContent {
+		return bgStyle.Width(colWidth).Render("")
+	}
+
+	// Render the content
+	prefixWidth := ansi.StringWidth(prefix)
+	contentWidth := colWidth - prefixWidth
+	content := renderLineContent(fileName, *dl, bgStyle, highlightColor, contentWidth)
+
+	return prefix + content
+}
+
+// renderLeftColumn formats the left side of a side-by-side diff
+func renderLeftColumn(fileName string, dl *DiffLine, colWidth int) string {
+	return renderDiffColumnLine(fileName, dl, colWidth, true, theme.CurrentTheme())
+}
+
+// renderRightColumn formats the right side of a side-by-side diff
+func renderRightColumn(fileName string, dl *DiffLine, colWidth int) string {
+	return renderDiffColumnLine(fileName, dl, colWidth, false, theme.CurrentTheme())
+}
+
+// -------------------------------------------------------------------------
+// Public API
+// -------------------------------------------------------------------------
+
+// RenderUnifiedHunk formats a hunk for unified display
+func RenderUnifiedHunk(fileName string, h Hunk, opts ...UnifiedOption) string {
+	// Apply options to create the configuration
+	config := NewUnifiedConfig(opts...)
+
+	// Make a copy of the hunk so we don't modify the original
+	hunkCopy := Hunk{Lines: make([]DiffLine, len(h.Lines))}
+	copy(hunkCopy.Lines, h.Lines)
+
+	// Highlight changes within lines
+	HighlightIntralineChanges(&hunkCopy)
+
+	var sb strings.Builder
+	sb.Grow(len(hunkCopy.Lines) * config.Width)
+
+	util.WriteStringsPar(&sb, hunkCopy.Lines, func(line DiffLine) string {
+		return renderUnifiedLine(fileName, line, config.Width, theme.CurrentTheme()) + "\n"
+	})
+
+	return sb.String()
+}
+
+// RenderSideBySideHunk formats a hunk for side-by-side display
+func RenderSideBySideHunk(fileName string, h Hunk, opts ...UnifiedOption) string {
+	// Apply options to create the configuration
+	config := NewSideBySideConfig(opts...)
+
+	// Make a copy of the hunk so we don't modify the original
+	hunkCopy := Hunk{Lines: make([]DiffLine, len(h.Lines))}
+	copy(hunkCopy.Lines, h.Lines)
+
+	// Highlight changes within lines
+	HighlightIntralineChanges(&hunkCopy)
+
+	// Pair lines for side-by-side display
+	pairs := pairLines(hunkCopy.Lines)
+
+	// Calculate column width
+	colWidth := config.Width / 2
+
+	leftWidth := colWidth
+	rightWidth := config.Width - colWidth
+	var sb strings.Builder
+
+	util.WriteStringsPar(&sb, pairs, func(p linePair) string {
+		wg := &sync.WaitGroup{}
+		var leftStr, rightStr string
+		wg.Add(2)
+		go func() {
+			defer wg.Done()
+			leftStr = renderLeftColumn(fileName, p.left, leftWidth)
+		}()
+		go func() {
+			defer wg.Done()
+			rightStr = renderRightColumn(fileName, p.right, rightWidth)
+		}()
+		wg.Wait()
+		return leftStr + rightStr + "\n"
+	})
+
+	return sb.String()
+}
+
+// FormatUnifiedDiff creates a unified formatted view of a diff
+func FormatUnifiedDiff(filename string, diffText string, opts ...UnifiedOption) (string, error) {
+	diffResult, err := ParseUnifiedDiff(diffText)
+	if err != nil {
+		return "", err
+	}
+
+	var sb strings.Builder
+	util.WriteStringsPar(&sb, diffResult.Hunks, func(h Hunk) string {
+		return RenderUnifiedHunk(filename, h, opts...)
+	})
+
+	return sb.String(), nil
+}
+
+// FormatDiff creates a side-by-side formatted view of a diff
+func FormatDiff(filename string, diffText string, opts ...UnifiedOption) (string, error) {
+	diffResult, err := ParseUnifiedDiff(diffText)
+	if err != nil {
+		return "", err
+	}
+
+	var sb strings.Builder
+	util.WriteStringsPar(&sb, diffResult.Hunks, func(h Hunk) string {
+		return RenderSideBySideHunk(filename, h, opts...)
+	})
+
+	return sb.String(), nil
+}

packages/client/tui/internal/components/fileviewer/fileviewer.go

@@ -0,0 +1,281 @@
+package fileviewer
+
+import (
+	"fmt"
+	"strings"
+
+	tea "github.com/charmbracelet/bubbletea/v2"
+
+	"github.com/sst/opencode/internal/app"
+	"github.com/sst/opencode/internal/commands"
+	"github.com/sst/opencode/internal/components/dialog"
+	"github.com/sst/opencode/internal/components/diff"
+	"github.com/sst/opencode/internal/layout"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"github.com/sst/opencode/internal/util"
+	"github.com/sst/opencode/internal/viewport"
+)
+
+type DiffStyle int
+
+const (
+	DiffStyleSplit DiffStyle = iota
+	DiffStyleUnified
+)
+
+type Model struct {
+	app           *app.App
+	width, height int
+	viewport      viewport.Model
+	filename      *string
+	content       *string
+	isDiff        *bool
+	diffStyle     DiffStyle
+}
+
+type fileRenderedMsg struct {
+	content string
+}
+
+func New(app *app.App) Model {
+	vp := viewport.New()
+	m := Model{
+		app:       app,
+		viewport:  vp,
+		diffStyle: DiffStyleUnified,
+	}
+	if app.State.SplitDiff {
+		m.diffStyle = DiffStyleSplit
+	}
+	return m
+}
+
+func (m Model) Init() tea.Cmd {
+	return m.viewport.Init()
+}
+
+func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
+	var cmds []tea.Cmd
+
+	switch msg := msg.(type) {
+	case fileRenderedMsg:
+		m.viewport.SetContent(msg.content)
+		return m, util.CmdHandler(app.FileRenderedMsg{
+			FilePath: *m.filename,
+		})
+	case dialog.ThemeSelectedMsg:
+		return m, m.render()
+	case tea.KeyMsg:
+		switch msg.String() {
+		// TODO
+		}
+	}
+
+	vp, cmd := m.viewport.Update(msg)
+	m.viewport = vp
+	cmds = append(cmds, cmd)
+
+	return m, tea.Batch(cmds...)
+}
+
+func (m Model) View() string {
+	if !m.HasFile() {
+		return ""
+	}
+
+	header := *m.filename
+	header = styles.NewStyle().
+		Padding(1, 2).
+		Width(m.width).
+		Background(theme.CurrentTheme().BackgroundElement()).
+		Foreground(theme.CurrentTheme().Text()).
+		Render(header)
+
+	t := theme.CurrentTheme()
+
+	close := m.app.Key(commands.FileCloseCommand)
+	diffToggle := m.app.Key(commands.FileDiffToggleCommand)
+	if m.isDiff == nil || *m.isDiff == false {
+		diffToggle = ""
+	}
+	layoutToggle := m.app.Key(commands.MessagesLayoutToggleCommand)
+
+	background := t.Background()
+	footer := layout.Render(
+		layout.FlexOptions{
+			Background: &background,
+			Direction:  layout.Row,
+			Justify:    layout.JustifyCenter,
+			Align:      layout.AlignStretch,
+			Width:      m.width - 2,
+			Gap:        5,
+		},
+		layout.FlexItem{
+			View: close,
+		},
+		layout.FlexItem{
+			View: layoutToggle,
+		},
+		layout.FlexItem{
+			View: diffToggle,
+		},
+	)
+	footer = styles.NewStyle().Background(t.Background()).Padding(0, 1).Render(footer)
+
+	return header + "\n" + m.viewport.View() + "\n" + footer
+}
+
+func (m *Model) Clear() (Model, tea.Cmd) {
+	m.filename = nil
+	m.content = nil
+	m.isDiff = nil
+	return *m, m.render()
+}
+
+func (m *Model) ToggleDiff() (Model, tea.Cmd) {
+	switch m.diffStyle {
+	case DiffStyleSplit:
+		m.diffStyle = DiffStyleUnified
+	default:
+		m.diffStyle = DiffStyleSplit
+	}
+	return *m, m.render()
+}
+
+func (m *Model) DiffStyle() DiffStyle {
+	return m.diffStyle
+}
+
+func (m Model) HasFile() bool {
+	return m.filename != nil && m.content != nil
+}
+
+func (m Model) Filename() string {
+	if m.filename == nil {
+		return ""
+	}
+	return *m.filename
+}
+
+func (m *Model) SetSize(width, height int) (Model, tea.Cmd) {
+	if m.width != width || m.height != height {
+		m.width = width
+		m.height = height
+		m.viewport.SetWidth(width)
+		m.viewport.SetHeight(height - 4)
+		return *m, m.render()
+	}
+	return *m, nil
+}
+
+func (m *Model) SetFile(filename string, content string, isDiff bool) (Model, tea.Cmd) {
+	m.filename = &filename
+	m.content = &content
+	m.isDiff = &isDiff
+	return *m, m.render()
+}
+
+func (m *Model) render() tea.Cmd {
+	if m.filename == nil || m.content == nil {
+		m.viewport.SetContent("")
+		return nil
+	}
+
+	return func() tea.Msg {
+		t := theme.CurrentTheme()
+		var rendered string
+
+		if m.isDiff != nil && *m.isDiff {
+			diffResult := ""
+			var err error
+			if m.diffStyle == DiffStyleSplit {
+				diffResult, err = diff.FormatDiff(
+					*m.filename,
+					*m.content,
+					diff.WithWidth(m.width),
+				)
+			} else if m.diffStyle == DiffStyleUnified {
+				diffResult, err = diff.FormatUnifiedDiff(
+					*m.filename,
+					*m.content,
+					diff.WithWidth(m.width),
+				)
+			}
+			if err != nil {
+				rendered = styles.NewStyle().
+					Foreground(t.Error()).
+					Render(fmt.Sprintf("Error rendering diff: %v", err))
+			} else {
+				rendered = strings.TrimRight(diffResult, "\n")
+			}
+		} else {
+			rendered = util.RenderFile(
+				*m.filename,
+				*m.content,
+				m.width,
+			)
+		}
+
+		rendered = styles.NewStyle().
+			Width(m.width).
+			Background(t.BackgroundPanel()).
+			Render(rendered)
+
+		return fileRenderedMsg{
+			content: rendered,
+		}
+	}
+}
+
+func (m *Model) ScrollTo(line int) {
+	m.viewport.SetYOffset(line)
+}
+
+func (m *Model) ScrollToBottom() {
+	m.viewport.GotoBottom()
+}
+
+func (m *Model) ScrollToTop() {
+	m.viewport.GotoTop()
+}
+
+func (m *Model) PageUp() (Model, tea.Cmd) {
+	m.viewport.ViewUp()
+	return *m, nil
+}
+
+func (m *Model) PageDown() (Model, tea.Cmd) {
+	m.viewport.ViewDown()
+	return *m, nil
+}
+
+func (m *Model) HalfPageUp() (Model, tea.Cmd) {
+	m.viewport.HalfViewUp()
+	return *m, nil
+}
+
+func (m *Model) HalfPageDown() (Model, tea.Cmd) {
+	m.viewport.HalfViewDown()
+	return *m, nil
+}
+
+func (m Model) AtTop() bool {
+	return m.viewport.AtTop()
+}
+
+func (m Model) AtBottom() bool {
+	return m.viewport.AtBottom()
+}
+
+func (m Model) ScrollPercent() float64 {
+	return m.viewport.ScrollPercent()
+}
+
+func (m Model) TotalLineCount() int {
+	return m.viewport.TotalLineCount()
+}
+
+func (m Model) VisibleLineCount() int {
+	return m.viewport.VisibleLineCount()
+}

packages/client/tui/internal/components/list/list.go

@@ -0,0 +1,431 @@
+package list
+
+import (
+	"strings"
+
+	"github.com/charmbracelet/bubbles/v2/key"
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/muesli/reflow/truncate"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+)
+
+// Item interface that all list items must implement
+type Item interface {
+	Render(selected bool, width int, baseStyle styles.Style) string
+	Selectable() bool
+}
+
+// RenderFunc defines how to render an item in the list
+type RenderFunc[T any] func(item T, selected bool, width int, baseStyle styles.Style) string
+
+// SelectableFunc defines whether an item is selectable
+type SelectableFunc[T any] func(item T) bool
+
+// Options holds configuration for the list component
+type Options[T any] struct {
+	items               []T
+	maxVisibleHeight    int
+	fallbackMsg         string
+	useAlphaNumericKeys bool
+	renderItem          RenderFunc[T]
+	isSelectable        SelectableFunc[T]
+	baseStyle           styles.Style
+}
+
+// Option is a function that configures the list component
+type Option[T any] func(*Options[T])
+
+// WithItems sets the initial items for the list
+func WithItems[T any](items []T) Option[T] {
+	return func(o *Options[T]) {
+		o.items = items
+	}
+}
+
+// WithMaxVisibleHeight sets the maximum visible height in lines
+func WithMaxVisibleHeight[T any](height int) Option[T] {
+	return func(o *Options[T]) {
+		o.maxVisibleHeight = height
+	}
+}
+
+// WithFallbackMessage sets the message to show when the list is empty
+func WithFallbackMessage[T any](msg string) Option[T] {
+	return func(o *Options[T]) {
+		o.fallbackMsg = msg
+	}
+}
+
+// WithAlphaNumericKeys enables j/k navigation keys
+func WithAlphaNumericKeys[T any](enabled bool) Option[T] {
+	return func(o *Options[T]) {
+		o.useAlphaNumericKeys = enabled
+	}
+}
+
+// WithRenderFunc sets the function to render items
+func WithRenderFunc[T any](fn RenderFunc[T]) Option[T] {
+	return func(o *Options[T]) {
+		o.renderItem = fn
+	}
+}
+
+// WithSelectableFunc sets the function to determine if items are selectable
+func WithSelectableFunc[T any](fn SelectableFunc[T]) Option[T] {
+	return func(o *Options[T]) {
+		o.isSelectable = fn
+	}
+}
+
+// WithStyle sets the base style that gets passed to render functions
+func WithStyle[T any](style styles.Style) Option[T] {
+	return func(o *Options[T]) {
+		o.baseStyle = style
+	}
+}
+
+type List[T any] interface {
+	tea.Model
+	tea.ViewModel
+	SetMaxWidth(maxWidth int)
+	GetSelectedItem() (item T, idx int)
+	SetItems(items []T)
+	GetItems() []T
+	SetSelectedIndex(idx int)
+	SetEmptyMessage(msg string)
+	IsEmpty() bool
+	GetMaxVisibleHeight() int
+}
+
+type listComponent[T any] struct {
+	fallbackMsg         string
+	items               []T
+	selectedIdx         int
+	maxWidth            int
+	maxVisibleHeight    int
+	useAlphaNumericKeys bool
+	width               int
+	height              int
+	renderItem          RenderFunc[T]
+	isSelectable        SelectableFunc[T]
+	baseStyle           styles.Style
+}
+
+type listKeyMap struct {
+	Up        key.Binding
+	Down      key.Binding
+	UpAlpha   key.Binding
+	DownAlpha key.Binding
+}
+
+var simpleListKeys = listKeyMap{
+	Up: key.NewBinding(
+		key.WithKeys("up", "ctrl+p"),
+		key.WithHelp("↑", "previous list item"),
+	),
+	Down: key.NewBinding(
+		key.WithKeys("down", "ctrl+n"),
+		key.WithHelp("↓", "next list item"),
+	),
+	UpAlpha: key.NewBinding(
+		key.WithKeys("k"),
+		key.WithHelp("k", "previous list item"),
+	),
+	DownAlpha: key.NewBinding(
+		key.WithKeys("j"),
+		key.WithHelp("j", "next list item"),
+	),
+}
+
+func (c *listComponent[T]) Init() tea.Cmd {
+	return nil
+}
+
+func (c *listComponent[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case tea.KeyMsg:
+		switch {
+		case key.Matches(msg, simpleListKeys.Up) || (c.useAlphaNumericKeys && key.Matches(msg, simpleListKeys.UpAlpha)):
+			c.moveUp()
+			return c, nil
+		case key.Matches(msg, simpleListKeys.Down) || (c.useAlphaNumericKeys && key.Matches(msg, simpleListKeys.DownAlpha)):
+			c.moveDown()
+			return c, nil
+		}
+	}
+
+	return c, nil
+}
+
+// moveUp moves the selection up, skipping non-selectable items
+func (c *listComponent[T]) moveUp() {
+	if len(c.items) == 0 {
+		return
+	}
+
+	// Find the previous selectable item
+	for i := c.selectedIdx - 1; i >= 0; i-- {
+		if c.isSelectable(c.items[i]) {
+			c.selectedIdx = i
+			return
+		}
+	}
+
+	// If no selectable item found above, stay at current position
+}
+
+// moveDown moves the selection down, skipping non-selectable items
+func (c *listComponent[T]) moveDown() {
+	if len(c.items) == 0 {
+		return
+	}
+
+	originalIdx := c.selectedIdx
+	for {
+		if c.selectedIdx < len(c.items)-1 {
+			c.selectedIdx++
+		} else {
+			break
+		}
+
+		if c.isSelectable(c.items[c.selectedIdx]) {
+			return
+		}
+
+		// Prevent infinite loop
+		if c.selectedIdx == originalIdx {
+			break
+		}
+	}
+}
+
+func (c *listComponent[T]) GetSelectedItem() (T, int) {
+	if len(c.items) > 0 && c.isSelectable(c.items[c.selectedIdx]) {
+		return c.items[c.selectedIdx], c.selectedIdx
+	}
+
+	var zero T
+	return zero, -1
+}
+
+func (c *listComponent[T]) SetItems(items []T) {
+	c.items = items
+	c.selectedIdx = 0
+
+	// Ensure initial selection is on a selectable item
+	if len(items) > 0 && !c.isSelectable(items[0]) {
+		c.moveDown()
+	}
+}
+
+func (c *listComponent[T]) GetItems() []T {
+	return c.items
+}
+
+func (c *listComponent[T]) SetEmptyMessage(msg string) {
+	c.fallbackMsg = msg
+}
+
+func (c *listComponent[T]) IsEmpty() bool {
+	return len(c.items) == 0
+}
+
+func (c *listComponent[T]) SetMaxWidth(width int) {
+	c.maxWidth = width
+}
+
+func (c *listComponent[T]) SetSelectedIndex(idx int) {
+	if idx >= 0 && idx < len(c.items) {
+		c.selectedIdx = idx
+	}
+}
+
+func (c *listComponent[T]) GetMaxVisibleHeight() int {
+	return c.maxVisibleHeight
+}
+
+func (c *listComponent[T]) View() string {
+	items := c.items
+	maxWidth := c.maxWidth
+	if maxWidth == 0 {
+		maxWidth = 80 // Default width if not set
+	}
+
+	if len(items) <= 0 {
+		return c.fallbackMsg
+	}
+
+	// Calculate viewport based on actual heights
+	startIdx, endIdx := c.calculateViewport()
+
+	listItems := make([]string, 0, endIdx-startIdx)
+
+	for i := startIdx; i < endIdx; i++ {
+		item := items[i]
+
+		// Special handling for HeaderItem to remove top margin on first item
+		if i == startIdx {
+			// Check if this is a HeaderItem
+			if _, ok := any(item).(Item); ok {
+				if headerItem, isHeader := any(item).(HeaderItem); isHeader {
+					// Render header without top margin when it's first
+					t := theme.CurrentTheme()
+					truncatedStr := truncate.StringWithTail(string(headerItem), uint(maxWidth-1), "...")
+					headerStyle := c.baseStyle.
+						Foreground(t.Accent()).
+						Bold(true).
+						MarginBottom(0).
+						PaddingLeft(1)
+					listItems = append(listItems, headerStyle.Render(truncatedStr))
+					continue
+				}
+			}
+		}
+
+		title := c.renderItem(item, i == c.selectedIdx, maxWidth, c.baseStyle)
+		listItems = append(listItems, title)
+	}
+
+	return strings.Join(listItems, "\n")
+}
+
+// calculateViewport determines which items to show based on available space
+func (c *listComponent[T]) calculateViewport() (startIdx, endIdx int) {
+	items := c.items
+	if len(items) == 0 {
+		return 0, 0
+	}
+
+	// Calculate heights of all items
+	itemHeights := make([]int, len(items))
+	for i, item := range items {
+		rendered := c.renderItem(item, false, c.maxWidth, c.baseStyle)
+		itemHeights[i] = lipgloss.Height(rendered)
+	}
+
+	// Find the range of items that fit within maxVisibleHeight
+	// Start by trying to center the selected item
+	start := 0
+	end := len(items)
+
+	// Calculate height from start to selected
+	heightToSelected := 0
+	for i := 0; i <= c.selectedIdx && i < len(items); i++ {
+		heightToSelected += itemHeights[i]
+	}
+
+	// If selected item is beyond visible height, scroll to show it
+	if heightToSelected > c.maxVisibleHeight {
+		// Start from selected and work backwards to find start
+		currentHeight := itemHeights[c.selectedIdx]
+		start = c.selectedIdx
+
+		for i := c.selectedIdx - 1; i >= 0 && currentHeight+itemHeights[i] <= c.maxVisibleHeight; i-- {
+			currentHeight += itemHeights[i]
+			start = i
+		}
+	}
+
+	// Calculate end based on start
+	currentHeight := 0
+	for i := start; i < len(items); i++ {
+		if currentHeight+itemHeights[i] > c.maxVisibleHeight {
+			end = i
+			break
+		}
+		currentHeight += itemHeights[i]
+	}
+
+	return start, end
+}
+
+func abs(x int) int {
+	if x < 0 {
+		return -x
+	}
+	return x
+}
+
+func max(a, b int) int {
+	if a > b {
+		return a
+	}
+	return b
+}
+
+func NewListComponent[T any](opts ...Option[T]) List[T] {
+	options := &Options[T]{
+		baseStyle: styles.NewStyle(), // Default empty style
+	}
+
+	for _, opt := range opts {
+		opt(options)
+	}
+
+	return &listComponent[T]{
+		fallbackMsg:         options.fallbackMsg,
+		items:               options.items,
+		maxVisibleHeight:    options.maxVisibleHeight,
+		useAlphaNumericKeys: options.useAlphaNumericKeys,
+		selectedIdx:         0,
+		renderItem:          options.renderItem,
+		isSelectable:        options.isSelectable,
+		baseStyle:           options.baseStyle,
+	}
+}
+
+// StringItem is a simple implementation of Item for string values
+type StringItem string
+
+func (s StringItem) Render(selected bool, width int, baseStyle styles.Style) string {
+	t := theme.CurrentTheme()
+
+	truncatedStr := truncate.StringWithTail(string(s), uint(width-1), "...")
+
+	var itemStyle styles.Style
+	if selected {
+		itemStyle = baseStyle.
+			Background(t.Primary()).
+			Foreground(t.BackgroundElement()).
+			Width(width).
+			PaddingLeft(1)
+	} else {
+		itemStyle = baseStyle.
+			Foreground(t.TextMuted()).
+			PaddingLeft(1)
+	}
+
+	return itemStyle.Render(truncatedStr)
+}
+
+func (s StringItem) Selectable() bool {
+	return true
+}
+
+// HeaderItem is a non-selectable header item for grouping
+type HeaderItem string
+
+func (h HeaderItem) Render(selected bool, width int, baseStyle styles.Style) string {
+	t := theme.CurrentTheme()
+
+	truncatedStr := truncate.StringWithTail(string(h), uint(width-1), "...")
+
+	headerStyle := baseStyle.
+		Foreground(t.Accent()).
+		Bold(true).
+		MarginTop(1).
+		MarginBottom(0).
+		PaddingLeft(1)
+
+	return headerStyle.Render(truncatedStr)
+}
+
+func (h HeaderItem) Selectable() bool {
+	return false
+}
+
+// Ensure StringItem and HeaderItem implement Item
+var _ Item = StringItem("")
+var _ Item = HeaderItem("")

packages/client/tui/internal/components/list/list_test.go

@@ -0,0 +1,210 @@
+package list
+
+import (
+	"testing"
+
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/sst/opencode/internal/styles"
+)
+
+// testItem is a simple test implementation of ListItem
+type testItem struct {
+	value string
+}
+
+func (t testItem) Render(
+	selected bool,
+	width int,
+	isFirstInViewport bool,
+	baseStyle styles.Style,
+) string {
+	return t.value
+}
+
+func (t testItem) Selectable() bool {
+	return true
+}
+
+// createTestList creates a list with test items for testing
+func createTestList() *listComponent[testItem] {
+	items := []testItem{
+		{value: "item1"},
+		{value: "item2"},
+		{value: "item3"},
+	}
+	list := NewListComponent(
+		WithItems(items),
+		WithMaxVisibleHeight[testItem](5),
+		WithFallbackMessage[testItem]("empty"),
+		WithAlphaNumericKeys[testItem](false),
+		WithRenderFunc(
+			func(item testItem, selected bool, width int, baseStyle styles.Style) string {
+				return item.Render(selected, width, false, baseStyle)
+			},
+		),
+		WithSelectableFunc(func(item testItem) bool {
+			return item.Selectable()
+		}),
+	)
+
+	return list.(*listComponent[testItem])
+}
+
+func TestArrowKeyNavigation(t *testing.T) {
+	list := createTestList()
+
+	// Test down arrow navigation
+	downKey := tea.KeyPressMsg{Code: tea.KeyDown}
+	updatedModel, _ := list.Update(downKey)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx := list.GetSelectedItem()
+	if idx != 1 {
+		t.Errorf("Expected selected index 1 after down arrow, got %d", idx)
+	}
+
+	// Test up arrow navigation
+	upKey := tea.KeyPressMsg{Code: tea.KeyUp}
+	updatedModel, _ = list.Update(upKey)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx = list.GetSelectedItem()
+	if idx != 0 {
+		t.Errorf("Expected selected index 0 after up arrow, got %d", idx)
+	}
+}
+
+func TestJKKeyNavigation(t *testing.T) {
+	items := []testItem{
+		{value: "item1"},
+		{value: "item2"},
+		{value: "item3"},
+	}
+	// Create list with alpha keys enabled
+	list := NewListComponent(
+		WithItems(items),
+		WithMaxVisibleHeight[testItem](5),
+		WithFallbackMessage[testItem]("empty"),
+		WithAlphaNumericKeys[testItem](true),
+		WithRenderFunc(
+			func(item testItem, selected bool, width int, baseStyle styles.Style) string {
+				return item.Render(selected, width, false, baseStyle)
+			},
+		),
+		WithSelectableFunc(func(item testItem) bool {
+			return item.Selectable()
+		}),
+	)
+
+	// Test j key (down)
+	jKey := tea.KeyPressMsg{Code: 'j', Text: "j"}
+	updatedModel, _ := list.Update(jKey)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx := list.GetSelectedItem()
+	if idx != 1 {
+		t.Errorf("Expected selected index 1 after 'j' key, got %d", idx)
+	}
+
+	// Test k key (up)
+	kKey := tea.KeyPressMsg{Code: 'k', Text: "k"}
+	updatedModel, _ = list.Update(kKey)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx = list.GetSelectedItem()
+	if idx != 0 {
+		t.Errorf("Expected selected index 0 after 'k' key, got %d", idx)
+	}
+}
+
+func TestCtrlNavigation(t *testing.T) {
+	list := createTestList()
+
+	// Test Ctrl-N (down)
+	ctrlN := tea.KeyPressMsg{Code: 'n', Mod: tea.ModCtrl}
+	updatedModel, _ := list.Update(ctrlN)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx := list.GetSelectedItem()
+	if idx != 1 {
+		t.Errorf("Expected selected index 1 after Ctrl-N, got %d", idx)
+	}
+
+	// Test Ctrl-P (up)
+	ctrlP := tea.KeyPressMsg{Code: 'p', Mod: tea.ModCtrl}
+	updatedModel, _ = list.Update(ctrlP)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx = list.GetSelectedItem()
+	if idx != 0 {
+		t.Errorf("Expected selected index 0 after Ctrl-P, got %d", idx)
+	}
+}
+
+func TestNavigationBoundaries(t *testing.T) {
+	list := createTestList()
+
+	// Test up arrow at first item (should stay at 0)
+	upKey := tea.KeyPressMsg{Code: tea.KeyUp}
+	updatedModel, _ := list.Update(upKey)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx := list.GetSelectedItem()
+	if idx != 0 {
+		t.Errorf("Expected to stay at index 0 when pressing up at first item, got %d", idx)
+	}
+
+	// Move to last item
+	downKey := tea.KeyPressMsg{Code: tea.KeyDown}
+	updatedModel, _ = list.Update(downKey)
+	list = updatedModel.(*listComponent[testItem])
+	updatedModel, _ = list.Update(downKey)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx = list.GetSelectedItem()
+	if idx != 2 {
+		t.Errorf("Expected to be at index 2, got %d", idx)
+	}
+
+	// Test down arrow at last item (should stay at 2)
+	updatedModel, _ = list.Update(downKey)
+	list = updatedModel.(*listComponent[testItem])
+	_, idx = list.GetSelectedItem()
+	if idx != 2 {
+		t.Errorf("Expected to stay at index 2 when pressing down at last item, got %d", idx)
+	}
+}
+
+func TestEmptyList(t *testing.T) {
+	emptyList := NewListComponent(
+		WithItems([]testItem{}),
+		WithMaxVisibleHeight[testItem](5),
+		WithFallbackMessage[testItem]("empty"),
+		WithAlphaNumericKeys[testItem](false),
+		WithRenderFunc(
+			func(item testItem, selected bool, width int, baseStyle styles.Style) string {
+				return item.Render(selected, width, false, baseStyle)
+			},
+		),
+		WithSelectableFunc(func(item testItem) bool {
+			return item.Selectable()
+		}),
+	)
+
+	// Test navigation on empty list (should not crash)
+	downKey := tea.KeyPressMsg{Code: tea.KeyDown}
+	upKey := tea.KeyPressMsg{Code: tea.KeyUp}
+	ctrlN := tea.KeyPressMsg{Code: 'n', Mod: tea.ModCtrl}
+	ctrlP := tea.KeyPressMsg{Code: 'p', Mod: tea.ModCtrl}
+
+	updatedModel, _ := emptyList.Update(downKey)
+	emptyList = updatedModel.(*listComponent[testItem])
+	updatedModel, _ = emptyList.Update(upKey)
+	emptyList = updatedModel.(*listComponent[testItem])
+	updatedModel, _ = emptyList.Update(ctrlN)
+	emptyList = updatedModel.(*listComponent[testItem])
+	updatedModel, _ = emptyList.Update(ctrlP)
+	emptyList = updatedModel.(*listComponent[testItem])
+
+	// Verify empty list behavior
+	_, idx := emptyList.GetSelectedItem()
+	if idx != -1 {
+		t.Errorf("Expected index -1 for empty list, got %d", idx)
+	}
+
+	if !emptyList.IsEmpty() {
+		t.Error("Expected IsEmpty() to return true for empty list")
+	}
+}

packages/client/tui/internal/components/modal/modal.go

@@ -0,0 +1,145 @@
+package modal
+
+import (
+	"strings"
+
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/sst/opencode/internal/layout"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+)
+
+// CloseModalMsg is a message to signal that the active modal should be closed.
+type CloseModalMsg struct{}
+
+// Modal is a reusable modal component that handles frame rendering and overlay placement
+type Modal struct {
+	width      int
+	height     int
+	title      string
+	maxWidth   int
+	maxHeight  int
+	fitContent bool
+}
+
+// ModalOption is a function that configures a Modal
+type ModalOption func(*Modal)
+
+// WithTitle sets the modal title
+func WithTitle(title string) ModalOption {
+	return func(m *Modal) {
+		m.title = title
+	}
+}
+
+// WithMaxWidth sets the maximum width
+func WithMaxWidth(width int) ModalOption {
+	return func(m *Modal) {
+		m.maxWidth = width
+		m.fitContent = false
+	}
+}
+
+// WithMaxHeight sets the maximum height
+func WithMaxHeight(height int) ModalOption {
+	return func(m *Modal) {
+		m.maxHeight = height
+	}
+}
+
+func WithFitContent(fit bool) ModalOption {
+	return func(m *Modal) {
+		m.fitContent = fit
+	}
+}
+
+// New creates a new Modal with the given options
+func New(opts ...ModalOption) *Modal {
+	m := &Modal{
+		maxWidth:   0,
+		maxHeight:  0,
+		fitContent: true,
+	}
+
+	for _, opt := range opts {
+		opt(m)
+	}
+
+	return m
+}
+
+func (m *Modal) SetTitle(title string) {
+	m.title = title
+}
+
+// Render renders the modal centered on the screen
+func (m *Modal) Render(contentView string, background string) string {
+	t := theme.CurrentTheme()
+
+	outerWidth := layout.Current.Container.Width - 8
+	if m.maxWidth > 0 && outerWidth > m.maxWidth {
+		outerWidth = m.maxWidth
+	}
+
+	if m.fitContent {
+		titleWidth := lipgloss.Width(m.title)
+		contentWidth := lipgloss.Width(contentView)
+		largestWidth := max(titleWidth+2, contentWidth)
+		outerWidth = largestWidth + 6
+	}
+
+	innerWidth := outerWidth - 4
+
+	baseStyle := styles.NewStyle().Foreground(t.TextMuted()).Background(t.BackgroundPanel())
+
+	var finalContent string
+	if m.title != "" {
+		titleStyle := baseStyle.
+			Foreground(t.Text()).
+			Bold(true).
+			Padding(0, 1)
+
+		escStyle := baseStyle.Foreground(t.TextMuted())
+		escText := escStyle.Render("esc")
+
+		// Calculate position for esc text
+		titleWidth := lipgloss.Width(m.title)
+		escWidth := lipgloss.Width(escText)
+		spacesNeeded := max(0, innerWidth-titleWidth-escWidth-2)
+		spacer := strings.Repeat(" ", spacesNeeded)
+		titleLine := m.title + spacer + escText
+		titleLine = titleStyle.Render(titleLine)
+
+		finalContent = strings.Join([]string{titleLine, "", contentView}, "\n")
+	} else {
+		finalContent = contentView
+	}
+
+	modalStyle := baseStyle.
+		PaddingTop(1).
+		PaddingBottom(1).
+		PaddingLeft(2).
+		PaddingRight(2)
+
+	modalView := modalStyle.
+		Width(outerWidth).
+		Render(finalContent)
+
+	// Calculate position for centering
+	bgHeight := lipgloss.Height(background)
+	bgWidth := lipgloss.Width(background)
+	modalHeight := lipgloss.Height(modalView)
+	modalWidth := lipgloss.Width(modalView)
+
+	row := (bgHeight - modalHeight) / 2
+	col := (bgWidth - modalWidth) / 2
+
+	return layout.PlaceOverlay(
+		col-1, // TODO: whyyyyy
+		row,
+		modalView,
+		background,
+		layout.WithOverlayBorder(),
+		layout.WithOverlayBorderColor(t.BorderActive()),
+	)
+}

packages/client/tui/internal/components/qr/qr.go

@@ -0,0 +1,56 @@
+package qr
+
+import (
+	"strings"
+
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+	"rsc.io/qr"
+)
+
+var tops_bottoms = []rune{' ', '▀', '▄', '█'}
+
+// Generate a text string to a QR code, which you can write to a terminal or file.
+func Generate(text string) (string, int, error) {
+	code, err := qr.Encode(text, qr.Level(0))
+	if err != nil {
+		return "", 0, err
+	}
+
+	t := theme.CurrentTheme()
+	if t == nil {
+		return "", 0, err
+	}
+
+	// Create lipgloss style for QR code with theme colors
+	qrStyle := styles.NewStyle().Foreground(t.Text()).Background(t.Background())
+
+	var result strings.Builder
+
+	// content
+	for y := 0; y < code.Size-1; y += 2 {
+		var line strings.Builder
+		for x := 0; x < code.Size; x += 1 {
+			var num int8
+			if code.Black(x, y) {
+				num += 1
+			}
+			if code.Black(x, y+1) {
+				num += 2
+			}
+			line.WriteRune(tops_bottoms[num])
+		}
+		result.WriteString(qrStyle.Render(line.String()) + "\n")
+	}
+
+	// add lower border when required (only required when QR size is odd)
+	if code.Size%2 == 1 {
+		var borderLine strings.Builder
+		for range code.Size {
+			borderLine.WriteRune('▀')
+		}
+		result.WriteString(qrStyle.Render(borderLine.String()) + "\n")
+	}
+
+	return result.String(), code.Size, nil
+}

packages/client/tui/internal/components/status/status.go

@@ -0,0 +1,148 @@
+package status
+
+import (
+	"os"
+	"strings"
+
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/charmbracelet/lipgloss/v2/compat"
+	"github.com/sst/opencode/internal/app"
+	"github.com/sst/opencode/internal/commands"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+)
+
+type StatusComponent interface {
+	tea.Model
+	tea.ViewModel
+}
+
+type statusComponent struct {
+	app   *app.App
+	width int
+	cwd   string
+}
+
+func (m statusComponent) Init() tea.Cmd {
+	return nil
+}
+
+func (m statusComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		m.width = msg.Width
+		return m, nil
+	}
+	return m, nil
+}
+
+func (m statusComponent) logo() string {
+	t := theme.CurrentTheme()
+	base := styles.NewStyle().Foreground(t.TextMuted()).Background(t.BackgroundElement()).Render
+	emphasis := styles.NewStyle().
+		Foreground(t.Text()).
+		Background(t.BackgroundElement()).
+		Bold(true).
+		Render
+
+	open := base("open")
+	code := emphasis("code ")
+	version := base(m.app.Version)
+	return styles.NewStyle().
+		Background(t.BackgroundElement()).
+		Padding(0, 1).
+		Render(open + code + version)
+}
+
+func (m statusComponent) View() string {
+	t := theme.CurrentTheme()
+	logo := m.logo()
+
+	cwd := styles.NewStyle().
+		Foreground(t.TextMuted()).
+		Background(t.BackgroundPanel()).
+		Padding(0, 1).
+		Render(m.cwd)
+
+	var modeBackground compat.AdaptiveColor
+	var modeForeground compat.AdaptiveColor
+	switch m.app.ModeIndex {
+	case 0:
+		modeBackground = t.BackgroundElement()
+		modeForeground = t.TextMuted()
+	case 1:
+		modeBackground = t.Secondary()
+		modeForeground = t.BackgroundPanel()
+	case 2:
+		modeBackground = t.Accent()
+		modeForeground = t.BackgroundPanel()
+	case 3:
+		modeBackground = t.Success()
+		modeForeground = t.BackgroundPanel()
+	case 4:
+		modeBackground = t.Warning()
+		modeForeground = t.BackgroundPanel()
+	case 5:
+		modeBackground = t.Primary()
+		modeForeground = t.BackgroundPanel()
+	case 6:
+		modeBackground = t.Error()
+		modeForeground = t.BackgroundPanel()
+	default:
+		modeBackground = t.Secondary()
+		modeForeground = t.BackgroundPanel()
+	}
+
+	command := m.app.Commands[commands.SwitchModeCommand]
+	kb := command.Keybindings[0]
+	key := kb.Key
+	if kb.RequiresLeader {
+		key = m.app.Config.Keybinds.Leader + " " + kb.Key
+	}
+
+	modeStyle := styles.NewStyle().Background(modeBackground).Foreground(modeForeground)
+	modeNameStyle := modeStyle.Bold(true).Render
+	modeDescStyle := modeStyle.Render
+	mode := modeNameStyle(strings.ToUpper(m.app.Mode.Name)) + modeDescStyle(" MODE")
+	mode = modeStyle.
+		Padding(0, 1).
+		BorderLeft(true).
+		BorderStyle(lipgloss.ThickBorder()).
+		BorderForeground(modeBackground).
+		BorderBackground(t.BackgroundPanel()).
+		Render(mode)
+
+	mode = styles.NewStyle().
+		Faint(true).
+		Background(t.BackgroundPanel()).
+		Foreground(t.TextMuted()).
+		Render(key+" ") +
+		mode
+
+	space := max(
+		0,
+		m.width-lipgloss.Width(logo)-lipgloss.Width(cwd)-lipgloss.Width(mode),
+	)
+	spacer := styles.NewStyle().Background(t.BackgroundPanel()).Width(space).Render("")
+
+	status := logo + cwd + spacer + mode
+
+	blank := styles.NewStyle().Background(t.Background()).Width(m.width).Render("")
+	return blank + "\n" + status
+}
+
+func NewStatusCmp(app *app.App) StatusComponent {
+	statusComponent := &statusComponent{
+		app: app,
+	}
+
+	homePath, err := os.UserHomeDir()
+	cwdPath := app.Info.Path.Cwd
+	if err == nil && homePath != "" && strings.HasPrefix(cwdPath, homePath) {
+		cwdPath = "~" + cwdPath[len(homePath):]
+	}
+	statusComponent.cwd = cwdPath
+
+	return statusComponent
+}

packages/client/tui/internal/components/textarea/memoization.go

@@ -0,0 +1,125 @@
+// Package memoization implement a simple memoization cache. It's designed to
+// improve performance in textarea.
+package textarea
+
+import (
+	"container/list"
+	"crypto/sha256"
+	"fmt"
+	"sync"
+)
+
+// Hasher is an interface that requires a Hash method. The Hash method is
+// expected to return a string representation of the hash of the object.
+type Hasher interface {
+	Hash() string
+}
+
+// entry is a struct that holds a key-value pair. It is used as an element
+// in the evictionList of the MemoCache.
+type entry[T any] struct {
+	key   string
+	value T
+}
+
+// MemoCache is a struct that represents a cache with a set capacity. It
+// uses an LRU (Least Recently Used) eviction policy. It is safe for
+// concurrent use.
+type MemoCache[H Hasher, T any] struct {
+	capacity      int
+	mutex         sync.Mutex
+	cache         map[string]*list.Element // The cache holding the results
+	evictionList  *list.List               // A list to keep track of the order for LRU
+	hashableItems map[string]T             // This map keeps track of the original hashable items (optional)
+}
+
+// NewMemoCache is a function that creates a new MemoCache with a given
+// capacity. It returns a pointer to the created MemoCache.
+func NewMemoCache[H Hasher, T any](capacity int) *MemoCache[H, T] {
+	return &MemoCache[H, T]{
+		capacity:      capacity,
+		cache:         make(map[string]*list.Element),
+		evictionList:  list.New(),
+		hashableItems: make(map[string]T),
+	}
+}
+
+// Capacity is a method that returns the capacity of the MemoCache.
+func (m *MemoCache[H, T]) Capacity() int {
+	return m.capacity
+}
+
+// Size is a method that returns the current size of the MemoCache. It is
+// the number of items currently stored in the cache.
+func (m *MemoCache[H, T]) Size() int {
+	m.mutex.Lock()
+	defer m.mutex.Unlock()
+	return m.evictionList.Len()
+}
+
+// Get is a method that returns the value associated with the given
+// hashable item in the MemoCache. If there is no corresponding value, the
+// method returns nil.
+func (m *MemoCache[H, T]) Get(h H) (T, bool) {
+	m.mutex.Lock()
+	defer m.mutex.Unlock()
+
+	hashedKey := h.Hash()
+	if element, found := m.cache[hashedKey]; found {
+		m.evictionList.MoveToFront(element)
+		return element.Value.(*entry[T]).value, true
+	}
+	var result T
+	return result, false
+}
+
+// Set is a method that sets the value for the given hashable item in the
+// MemoCache. If the cache is at capacity, it evicts the least recently
+// used item before adding the new item.
+func (m *MemoCache[H, T]) Set(h H, value T) {
+	m.mutex.Lock()
+	defer m.mutex.Unlock()
+
+	hashedKey := h.Hash()
+	if element, found := m.cache[hashedKey]; found {
+		m.evictionList.MoveToFront(element)
+		element.Value.(*entry[T]).value = value
+		return
+	}
+
+	// Check if the cache is at capacity
+	if m.evictionList.Len() >= m.capacity {
+		// Evict the least recently used item from the cache
+		toEvict := m.evictionList.Back()
+		if toEvict != nil {
+			evictedEntry := m.evictionList.Remove(toEvict).(*entry[T])
+			delete(m.cache, evictedEntry.key)
+			delete(m.hashableItems, evictedEntry.key) // if you're keeping track of original items
+		}
+	}
+
+	// Add the value to the cache and the evictionList
+	newEntry := &entry[T]{
+		key:   hashedKey,
+		value: value,
+	}
+	element := m.evictionList.PushFront(newEntry)
+	m.cache[hashedKey] = element
+	m.hashableItems[hashedKey] = value // if you're keeping track of original items
+}
+
+// HString is a type that implements the Hasher interface for strings.
+type HString string
+
+// Hash is a method that returns the hash of the string.
+func (h HString) Hash() string {
+	return fmt.Sprintf("%x", sha256.Sum256([]byte(h)))
+}
+
+// HInt is a type that implements the Hasher interface for integers.
+type HInt int
+
+// Hash is a method that returns the hash of the integer.
+func (h HInt) Hash() string {
+	return fmt.Sprintf("%x", sha256.Sum256([]byte(fmt.Sprintf("%d", h))))
+}

packages/client/tui/internal/components/textarea/runeutil.go

@@ -0,0 +1,102 @@
+// Package runeutil provides utility functions for tidying up incoming runes
+// from Key messages.
+package textarea
+
+import (
+	"unicode"
+	"unicode/utf8"
+)
+
+// Sanitizer is a helper for bubble widgets that want to process
+// Runes from input key messages.
+type Sanitizer interface {
+	// Sanitize removes control characters from runes in a KeyRunes
+	// message, and optionally replaces newline/carriage return/tabs by a
+	// specified character.
+	//
+	// The rune array is modified in-place if possible. In that case, the
+	// returned slice is the original slice shortened after the control
+	// characters have been removed/translated.
+	Sanitize(runes []rune) []rune
+}
+
+// NewSanitizer constructs a rune sanitizer.
+func NewSanitizer(opts ...Option) Sanitizer {
+	s := sanitizer{
+		replaceNewLine: []rune("\n"),
+		replaceTab:     []rune("    "),
+	}
+	for _, o := range opts {
+		s = o(s)
+	}
+	return &s
+}
+
+// Option is the type of option that can be passed to Sanitize().
+type Option func(sanitizer) sanitizer
+
+// ReplaceTabs replaces tabs by the specified string.
+func ReplaceTabs(tabRepl string) Option {
+	return func(s sanitizer) sanitizer {
+		s.replaceTab = []rune(tabRepl)
+		return s
+	}
+}
+
+// ReplaceNewlines replaces newline characters by the specified string.
+func ReplaceNewlines(nlRepl string) Option {
+	return func(s sanitizer) sanitizer {
+		s.replaceNewLine = []rune(nlRepl)
+		return s
+	}
+}
+
+func (s *sanitizer) Sanitize(runes []rune) []rune {
+	// dstrunes are where we are storing the result.
+	dstrunes := runes[:0:len(runes)]
+	// copied indicates whether dstrunes is an alias of runes
+	// or a copy. We need a copy when dst moves past src.
+	// We use this as an optimization to avoid allocating
+	// a new rune slice in the common case where the output
+	// is smaller or equal to the input.
+	copied := false
+
+	for src := 0; src < len(runes); src++ {
+		r := runes[src]
+		switch {
+		case r == utf8.RuneError:
+			// skip
+
+		case r == '\r' || r == '\n':
+			if len(dstrunes)+len(s.replaceNewLine) > src && !copied {
+				dst := len(dstrunes)
+				dstrunes = make([]rune, dst, len(runes)+len(s.replaceNewLine))
+				copy(dstrunes, runes[:dst])
+				copied = true
+			}
+			dstrunes = append(dstrunes, s.replaceNewLine...)
+
+		case r == '\t':
+			if len(dstrunes)+len(s.replaceTab) > src && !copied {
+				dst := len(dstrunes)
+				dstrunes = make([]rune, dst, len(runes)+len(s.replaceTab))
+				copy(dstrunes, runes[:dst])
+				copied = true
+			}
+			dstrunes = append(dstrunes, s.replaceTab...)
+
+		case unicode.IsControl(r):
+			// Other control characters: skip.
+
+		default:
+			// Keep the character.
+			dstrunes = append(dstrunes, runes[src])
+		}
+	}
+	return dstrunes
+}
+
+type sanitizer struct {
+	replaceNewLine []rune
+	replaceTab     []rune
+}

packages/client/tui/internal/components/toast/toast.go

@@ -0,0 +1,266 @@
+package toast
+
+import (
+	"fmt"
+	"strings"
+	"time"
+
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/charmbracelet/lipgloss/v2/compat"
+	"github.com/sst/opencode/internal/layout"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
+)
+
+// ShowToastMsg is a message to display a toast notification
+type ShowToastMsg struct {
+	Message  string
+	Title    *string
+	Color    compat.AdaptiveColor
+	Duration time.Duration
+}
+
+// DismissToastMsg is a message to dismiss a specific toast
+type DismissToastMsg struct {
+	ID string
+}
+
+// Toast represents a single toast notification
+type Toast struct {
+	ID        string
+	Message   string
+	Title     *string
+	Color     compat.AdaptiveColor
+	CreatedAt time.Time
+	Duration  time.Duration
+}
+
+// ToastManager manages multiple toast notifications
+type ToastManager struct {
+	toasts []Toast
+}
+
+// NewToastManager creates a new toast manager
+func NewToastManager() *ToastManager {
+	return &ToastManager{
+		toasts: []Toast{},
+	}
+}
+
+// Init initializes the toast manager
+func (tm *ToastManager) Init() tea.Cmd {
+	return nil
+}
+
+// Update handles messages for the toast manager
+func (tm *ToastManager) Update(msg tea.Msg) (*ToastManager, tea.Cmd) {
+	switch msg := msg.(type) {
+	case ShowToastMsg:
+		toast := Toast{
+			ID:        fmt.Sprintf("toast-%d", time.Now().UnixNano()),
+			Title:     msg.Title,
+			Message:   msg.Message,
+			Color:     msg.Color,
+			CreatedAt: time.Now(),
+			Duration:  msg.Duration,
+		}
+
+		tm.toasts = append(tm.toasts, toast)
+
+		// Return command to dismiss after duration
+		return tm, tea.Tick(toast.Duration, func(t time.Time) tea.Msg {
+			return DismissToastMsg{ID: toast.ID}
+		})
+
+	case DismissToastMsg:
+		var newToasts []Toast
+		for _, t := range tm.toasts {
+			if t.ID != msg.ID {
+				newToasts = append(newToasts, t)
+			}
+		}
+		tm.toasts = newToasts
+	}
+
+	return tm, nil
+}
+
+// renderSingleToast renders a single toast notification
+func (tm *ToastManager) renderSingleToast(toast Toast) string {
+	t := theme.CurrentTheme()
+
+	baseStyle := styles.NewStyle().
+		Foreground(t.Text()).
+		Background(t.BackgroundElement()).
+		Padding(1, 2)
+
+	maxWidth := max(40, layout.Current.Viewport.Width/3)
+	contentMaxWidth := max(maxWidth-6, 20)
+
+	// Build content with wrapping
+	var content strings.Builder
+	if toast.Title != nil {
+		titleStyle := styles.NewStyle().Foreground(toast.Color).
+			Bold(true)
+		content.WriteString(titleStyle.Render(*toast.Title))
+		content.WriteString("\n")
+	}
+
+	// Wrap message text
+	messageStyle := styles.NewStyle()
+	contentWidth := lipgloss.Width(toast.Message)
+	if contentWidth > contentMaxWidth {
+		messageStyle = messageStyle.Width(contentMaxWidth)
+	}
+	content.WriteString(messageStyle.Render(toast.Message))
+
+	// Render toast with max width
+	return baseStyle.MaxWidth(maxWidth).Render(content.String())
+}
+
+// View renders all active toasts
+func (tm *ToastManager) View() string {
+	if len(tm.toasts) == 0 {
+		return ""
+	}
+
+	var toastViews []string
+	for _, toast := range tm.toasts {
+		toastView := tm.renderSingleToast(toast)
+		toastViews = append(toastViews, toastView+"\n")
+	}
+
+	return strings.Join(toastViews, "\n")
+}
+
+// RenderOverlay renders the toasts as an overlay on the given background
+func (tm *ToastManager) RenderOverlay(background string) string {
+	if len(tm.toasts) == 0 {
+		return background
+	}
+
+	bgWidth := lipgloss.Width(background)
+	bgHeight := lipgloss.Height(background)
+	result := background
+
+	// Start from top with 2 character padding
+	currentY := 2
+
+	// Render each toast individually
+	for _, toast := range tm.toasts {
+		// Render individual toast
+		toastView := tm.renderSingleToast(toast)
+		toastWidth := lipgloss.Width(toastView)
+		toastHeight := lipgloss.Height(toastView)
+
+		// Position at top-right with 2 character padding from right edge
+		x := max(bgWidth-toastWidth-4, 0)
+
+		// Check if toast fits vertically
+		if currentY+toastHeight > bgHeight-2 {
+			// No more room for toasts
+			break
+		}
+
+		// Place this toast
+		result = layout.PlaceOverlay(
+			x,
+			currentY,
+			toastView,
+			result,
+			layout.WithOverlayBorder(),
+			layout.WithOverlayBorderColor(toast.Color),
+		)
+
+		// Move down for next toast (add 1 for spacing between toasts)
+		currentY += toastHeight + 1
+	}
+
+	return result
+}
+
+type ToastOptions struct {
+	Title    string
+	Duration time.Duration
+}
+
+type toastOptions struct {
+	title    *string
+	duration *time.Duration
+	color    *compat.AdaptiveColor
+}
+
+type ToastOption func(*toastOptions)
+
+func WithTitle(title string) ToastOption {
+	return func(t *toastOptions) {
+		t.title = &title
+	}
+}
+func WithDuration(duration time.Duration) ToastOption {
+	return func(t *toastOptions) {
+		t.duration = &duration
+	}
+}
+
+func WithColor(color compat.AdaptiveColor) ToastOption {
+	return func(t *toastOptions) {
+		t.color = &color
+	}
+}
+
+func NewToast(message string, options ...ToastOption) tea.Cmd {
+	t := theme.CurrentTheme()
+	duration := 5 * time.Second
+	color := t.Primary()
+
+	opts := toastOptions{
+		duration: &duration,
+		color:    &color,
+	}
+	for _, option := range options {
+		option(&opts)
+	}
+
+	return func() tea.Msg {
+		return ShowToastMsg{
+			Message:  message,
+			Title:    opts.title,
+			Duration: *opts.duration,
+			Color:    *opts.color,
+		}
+	}
+}
+
+func NewInfoToast(message string, options ...ToastOption) tea.Cmd {
+	options = append(options, WithColor(theme.CurrentTheme().Info()))
+	return NewToast(
+		message,
+		options...,
+	)
+}
+
+func NewSuccessToast(message string, options ...ToastOption) tea.Cmd {
+	options = append(options, WithColor(theme.CurrentTheme().Success()))
+	return NewToast(
+		message,
+		options...,
+	)
+}
+
+func NewWarningToast(message string, options ...ToastOption) tea.Cmd {
+	options = append(options, WithColor(theme.CurrentTheme().Warning()))
+	return NewToast(
+		message,
+		options...,
+	)
+}
+
+func NewErrorToast(message string, options ...ToastOption) tea.Cmd {
+	options = append(options, WithColor(theme.CurrentTheme().Error()))
+	return NewToast(
+		message,
+		options...,
+	)
+}