sync

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,
+	}
+}