initial message revamp

Author: kujtimiihoxha

internal/tui/components/chat/chat.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"time"
 
-	"github.com/charmbracelet/bubbles/v2/key"
 	tea "github.com/charmbracelet/bubbletea/v2"
 	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/opencode-ai/opencode/internal/app"
@@ -36,16 +35,19 @@ const (
 type MessageListCmp interface {
 	util.Model
 	layout.Sizeable
+	layout.Focusable
 }
 
 // messageListCmp implements MessageListCmp, providing a virtualized list
 // of chat messages with support for tool calls, real-time updates, and
 // session switching.
 type messageListCmp struct {
-	app           *app.App
-	width, height int
-	session       session.Session
-	listCmp       list.ListModel
+	app              *app.App
+	width, height    int
+	session          session.Session
+	listCmp          list.ListModel
+	focused          bool // Focus state for styling
+	previousSelected int  // Last selected item index for restoring focus
 
 	lastUserMessageTime int64
 }
@@ -54,27 +56,14 @@ type messageListCmp struct {
 // and reverse ordering (newest messages at bottom).
 func NewMessagesListCmp(app *app.App) MessageListCmp {
 	defaultKeymaps := list.DefaultKeyMap()
-	defaultKeymaps.Up.SetEnabled(false)
-	defaultKeymaps.Down.SetEnabled(false)
-	defaultKeymaps.NDown = key.NewBinding(
-		key.WithKeys("ctrl+j"),
-	)
-	defaultKeymaps.NUp = key.NewBinding(
-		key.WithKeys("ctrl+k"),
-	)
-	defaultKeymaps.Home = key.NewBinding(
-		key.WithKeys("ctrl+shift+up"),
-	)
-	defaultKeymaps.End = key.NewBinding(
-		key.WithKeys("ctrl+shift+down"),
-	)
 	return &messageListCmp{
 		app: app,
 		listCmp: list.New(
 			list.WithGapSize(1),
 			list.WithReverse(true),
 			list.WithKeyMap(defaultKeymaps),
 		),
+		previousSelected: list.NoSelection,
 	}
 }
 
@@ -491,3 +480,27 @@ func (m *messageListCmp) SetSize(width int, height int) tea.Cmd {
 	m.height = height - 1
 	return m.listCmp.SetSize(width, height-1)
 }
+
+// Blur implements MessageListCmp.
+func (m *messageListCmp) Blur() tea.Cmd {
+	m.focused = false
+	m.previousSelected = m.listCmp.SelectedIndex()
+	m.listCmp.ClearSelection()
+	return nil
+}
+
+// Focus implements MessageListCmp.
+func (m *messageListCmp) Focus() tea.Cmd {
+	m.focused = true
+	if m.previousSelected != list.NoSelection {
+		m.listCmp.SetSelected(m.previousSelected)
+	} else {
+		m.listCmp.SetSelected(len(m.listCmp.Items()) - 1)
+	}
+	return nil
+}
+
+// IsFocused implements MessageListCmp.
+func (m *messageListCmp) IsFocused() bool {
+	return m.focused
+}

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

@@ -361,7 +361,7 @@ func CreateTextArea(existing *textarea.Model) textarea.Model {
 			return "  > "
 		}
 		if focused {
-			return t.S().Base.Foreground(t.Blue).Render("::: ")
+			return t.S().Base.Foreground(t.GreenDark).Render("::: ")
 		} else {
 			return t.S().Muted.Render("::: ")
 		}

internal/tui/components/chat/messages/messages.go

@@ -2,7 +2,6 @@ package messages
 
 import (
 	"fmt"
-	"image/color"
 	"path/filepath"
 	"strings"
 	"time"
@@ -14,6 +13,7 @@ import (
 
 	"github.com/opencode-ai/opencode/internal/message"
 	"github.com/opencode-ai/opencode/internal/tui/components/anim"
+	"github.com/opencode-ai/opencode/internal/tui/components/core"
 	"github.com/opencode-ai/opencode/internal/tui/layout"
 	"github.com/opencode-ai/opencode/internal/tui/styles"
 	"github.com/opencode-ai/opencode/internal/tui/util"
@@ -117,38 +117,35 @@ func (m *messageCmp) GetMessage() message.Message {
 // textWidth calculates the available width for text content,
 // accounting for borders and padding
 func (m *messageCmp) textWidth() int {
-	return m.width - 1 // take into account the border
+	return m.width - 2 // take into account the border and/or padding
 }
 
 // style returns the lipgloss style for the message component.
 // Applies different border colors and styles based on message role and focus state.
 func (msg *messageCmp) style() lipgloss.Style {
 	t := styles.CurrentTheme()
-	var borderColor color.Color
 	borderStyle := lipgloss.NormalBorder()
 	if msg.focused {
-		borderStyle = lipgloss.DoubleBorder()
+		borderStyle = lipgloss.ThickBorder()
 	}
 
-	switch msg.message.Role {
-	case message.User:
-		borderColor = t.Secondary
-	case message.Assistant:
-		borderColor = t.Primary
-	default:
-		// Tool call
-		borderColor = t.BgSubtle
+	style := t.S().Text
+	if msg.message.Role == message.User {
+		style = style.PaddingLeft(1).BorderLeft(true).BorderStyle(borderStyle).BorderForeground(t.Primary)
+	} else {
+		if msg.focused {
+			style = style.PaddingLeft(1).BorderLeft(true).BorderStyle(borderStyle).BorderForeground(t.GreenDark)
+		} else {
+			style = style.PaddingLeft(2)
+		}
 	}
-
-	return t.S().Muted.
-		BorderLeft(true).
-		BorderForeground(borderColor).
-		BorderStyle(borderStyle)
+	return style
 }
 
 // renderAssistantMessage renders assistant messages with optional footer information.
 // Shows model name, response time, and finish reason when the message is complete.
 func (m *messageCmp) renderAssistantMessage() string {
+	t := styles.CurrentTheme()
 	parts := []string{
 		m.markdownContent(),
 	}
@@ -170,7 +167,8 @@ func (m *messageCmp) renderAssistantMessage() string {
 		case message.FinishReasonPermissionDenied:
 			infoMsg = "permission denied"
 		}
-		parts = append(parts, fmt.Sprintf(" %s (%s)", models.SupportedModels[m.message.Model].Name, infoMsg))
+		assistant := t.S().Muted.Render(fmt.Sprintf("⬡ %s (%s)", models.SupportedModels[m.message.Model].Name, infoMsg))
+		parts = append(parts, core.Section(assistant, m.textWidth()))
 	}
 
 	joined := lipgloss.JoinVertical(lipgloss.Left, parts...)
@@ -202,7 +200,7 @@ func (m *messageCmp) renderUserMessage() string {
 		parts = append(parts, "", strings.Join(attachments, ""))
 	}
 	joined := lipgloss.JoinVertical(lipgloss.Left, parts...)
-	return m.style().Render(joined)
+	return m.style().MarginBottom(1).Render(joined)
 }
 
 // toMarkdown converts text content to rendered markdown using the configured renderer
@@ -280,7 +278,8 @@ func (m *messageCmp) GetSize() (int, int) {
 
 // SetSize updates the width of the message component for text wrapping
 func (m *messageCmp) SetSize(width int, height int) tea.Cmd {
-	m.width = width
+	// For better readability, we limit the width to a maximum of 120 characters
+	m.width = min(width, 120)
 	return nil
 }
 

internal/tui/components/chat/messages/renderer.go

@@ -3,6 +3,7 @@ package messages
 import (
 	"encoding/json"
 	"fmt"
+	"os"
 	"strings"
 	"time"
 
@@ -95,7 +96,7 @@ func (br baseRenderer) renderWithParams(v *toolCallCmp, toolName string, args []
 	if v.isNested {
 		width -= 4 // Adjust for nested tool call indentation
 	}
-	header := makeHeader(toolName, width, args...)
+	header := br.makeHeader(v, toolName, width, args...)
 	if v.isNested {
 		return v.style().Render(header)
 	}
@@ -111,6 +112,32 @@ func (br baseRenderer) unmarshalParams(input string, target any) error {
 	return json.Unmarshal([]byte(input), target)
 }
 
+// makeHeader builds "<Tool>: param (key=value)" and truncates as needed.
+func (br baseRenderer) makeHeader(v *toolCallCmp, tool string, width int, params ...string) string {
+	t := styles.CurrentTheme()
+	icon := t.S().Base.Foreground(t.GreenDark).Render(styles.ToolPending)
+	if v.result.ToolCallID != "" {
+		if v.result.IsError {
+			icon = t.S().Base.Foreground(t.RedDark).Render(styles.ToolError)
+		} else {
+			icon = t.S().Base.Foreground(t.Green).Render(styles.ToolSuccess)
+		}
+	} else if v.cancelled {
+		icon = t.S().Muted.Render(styles.ToolPending)
+	}
+	tool = t.S().Base.Foreground(t.Blue).Render(tool)
+	prefix := fmt.Sprintf("%s %s: ", icon, tool)
+	return prefix + renderParamList(width-lipgloss.Width(prefix), params...)
+}
+
+// renderError provides consistent error rendering
+func (br baseRenderer) renderError(v *toolCallCmp, message string) string {
+	t := styles.CurrentTheme()
+	header := br.makeHeader(v, prettifyToolName(v.call.Name), v.textWidth(), "")
+	message = t.S().Error.Render(v.fit(message, v.textWidth()-2)) // -2 for padding
+	return joinHeaderBody(header, message)
+}
+
 // Register tool renderers
 func init() {
 	registry.register(tools.BashToolName, func() renderer { return bashRenderer{} })
@@ -167,12 +194,6 @@ func (br bashRenderer) Render(v *toolCallCmp) string {
 	})
 }
 
-// renderError provides consistent error rendering
-func (br baseRenderer) renderError(v *toolCallCmp, message string) string {
-	header := makeHeader("Error", v.textWidth(), message)
-	return joinHeaderBody(header, "")
-}
-
 // -----------------------------------------------------------------------------
 //  View renderer
 // -----------------------------------------------------------------------------
@@ -189,7 +210,7 @@ func (vr viewRenderer) Render(v *toolCallCmp) string {
 		return vr.renderError(v, "Invalid view parameters")
 	}
 
-	file := removeWorkingDirPrefix(params.FilePath)
+	file := prettyPath(params.FilePath)
 	args := newParamBuilder().
 		addMain(file).
 		addKeyValue("limit", formatNonZero(params.Limit)).
@@ -229,7 +250,7 @@ func (er editRenderer) Render(v *toolCallCmp) string {
 		return er.renderError(v, "Invalid edit parameters")
 	}
 
-	file := removeWorkingDirPrefix(params.FilePath)
+	file := prettyPath(params.FilePath)
 	args := newParamBuilder().addMain(file).build()
 
 	return er.renderWithParams(v, "Edit", args, func() string {
@@ -239,7 +260,7 @@ func (er editRenderer) Render(v *toolCallCmp) string {
 		}
 
 		trunc := truncateHeight(meta.Diff, responseContextHeight)
-		diffView, _ := diff.FormatDiff(trunc, diff.WithTotalWidth(v.textWidth()))
+		diffView, _ := diff.FormatDiff(trunc, diff.WithTotalWidth(v.textWidth()-2))
 		return diffView
 	})
 }
@@ -260,7 +281,7 @@ func (wr writeRenderer) Render(v *toolCallCmp) string {
 		return wr.renderError(v, "Invalid write parameters")
 	}
 
-	file := removeWorkingDirPrefix(params.FilePath)
+	file := prettyPath(params.FilePath)
 	args := newParamBuilder().addMain(file).build()
 
 	return wr.renderWithParams(v, "Write", args, func() string {
@@ -494,7 +515,7 @@ func (tr agentRenderer) Render(v *toolCallCmp) string {
 	prompt = strings.ReplaceAll(prompt, "\n", " ")
 	args := newParamBuilder().addMain(prompt).build()
 
-	header := makeHeader("Task", v.textWidth(), args...)
+	header := tr.makeHeader(v, "Task", v.textWidth(), args...)
 	t := tree.Root(header)
 
 	for _, call := range v.nestedToolCalls {
@@ -524,12 +545,6 @@ func (tr agentRenderer) Render(v *toolCallCmp) string {
 	return joinHeaderBody(header, body)
 }
 
-// makeHeader builds "<Tool>: param (key=value)" and truncates as needed.
-func makeHeader(tool string, width int, params ...string) string {
-	prefix := tool + ": "
-	return prefix + renderParamList(width-lipgloss.Width(prefix), params...)
-}
-
 // renderParamList renders params, params[0] (params[1]=params[2] ....)
 func renderParamList(paramsWidth int, params ...string) string {
 	if len(params) == 0 {
@@ -575,38 +590,46 @@ func renderParamList(paramsWidth int, params ...string) string {
 
 // earlyState returns immediately‑rendered error/cancelled/ongoing states.
 func earlyState(header string, v *toolCallCmp) (string, bool) {
+	t := styles.CurrentTheme()
+	message := ""
 	switch {
 	case v.result.IsError:
-		return lipgloss.JoinVertical(lipgloss.Left, header, v.renderToolError()), true
+		message = v.renderToolError()
 	case v.cancelled:
-		return lipgloss.JoinVertical(lipgloss.Left, header, "Cancelled"), true
+		message = "Cancelled"
 	case v.result.ToolCallID == "":
-		return lipgloss.JoinVertical(lipgloss.Left, header, "Waiting for tool to finish..."), true
+		message = "Waiting for tool to start..."
 	default:
 		return "", false
 	}
+
+	message = t.S().Base.PaddingLeft(2).Render(message)
+	return lipgloss.JoinVertical(lipgloss.Left, header, message), true
 }
 
 func joinHeaderBody(header, body string) string {
-	return lipgloss.JoinVertical(lipgloss.Left, header, "", body, "")
+	t := styles.CurrentTheme()
+	body = t.S().Base.PaddingLeft(2).Render(body)
+	return lipgloss.JoinVertical(lipgloss.Left, header, body, "")
 }
 
 func renderPlainContent(v *toolCallCmp, content string) string {
 	t := styles.CurrentTheme()
 	content = strings.TrimSpace(content)
 	lines := strings.Split(content, "\n")
 
+	width := v.textWidth() - 2 // -2 for left padding
 	var out []string
 	for i, ln := range lines {
 		if i >= responseContextHeight {
 			break
 		}
 		ln = " " + ln // left padding
-		if len(ln) > v.textWidth() {
-			ln = v.fit(ln, v.textWidth())
+		if len(ln) > width {
+			ln = v.fit(ln, width)
 		}
 		out = append(out, t.S().Muted.
-			Width(v.textWidth()).
+			Width(width).
 			Background(t.BgSubtle).
 			Render(ln))
 	}
@@ -638,7 +661,7 @@ func renderCodeContent(v *toolCallCmp, path, content string, offset int) string
 			PaddingLeft(4).
 			PaddingRight(2).
 			Render(fmt.Sprintf("%d", i+1+offset))
-		w := v.textWidth() - lipgloss.Width(num)
+		w := v.textWidth() - 2 - lipgloss.Width(num) // -2 for left padding
 		lines[i] = lipgloss.JoinHorizontal(lipgloss.Left,
 			num,
 			t.S().Base.
@@ -669,6 +692,15 @@ func truncateHeight(s string, h int) string {
 	return s
 }
 
+func prettyPath(path string) string {
+	// replace home directory with ~
+	homeDir, err := os.UserHomeDir()
+	if err == nil {
+		path = strings.ReplaceAll(path, homeDir, "~")
+	}
+	return path
+}
+
 func prettifyToolName(name string) string {
 	switch name {
 	case agent.AgentToolName: