fix: proper Unicode/Chinese character handling in UI (#234)

## Summary

Fix garbled display and incorrect backspace behavior for Chinese/Unicode
characters in the TUI.

Closes #233

## Problem

Chinese and other multi-byte Unicode characters were displaying as
garbled text (e.g., `是的分身艺术�`) because:

1. **String truncation used byte slicing** (`str[:n]`), which cuts UTF-8
characters in the middle
2. **Backspace deleted only 1 byte** instead of 1 character, corrupting
multi-byte characters
3. **Width calculations used `len()`** which returns byte count, not
display width

## Solution

Use `github.com/mattn/go-runewidth` (already a dependency) for proper
Unicode handling:

- `runewidth.StringWidth()` - calculate actual display width
- `runewidth.Truncate()` - safely truncate strings without breaking
characters
- `[]rune()` conversion - for character-based operations like backspace

## Changes

| File | Change |
|------|--------|
| `ui/list.go` | Use `runewidth` for title/branch truncation and width
calculation |
| `ui/err.go` | Use `runewidth` for error message truncation |
| `app/app.go` | Convert to `[]rune` for backspace, use `runewidth` for
length check |

## Testing

- [x] Tested with Chinese characters in instance names
- [x] Tested backspace deletion of Chinese characters
- [x] All existing tests pass (`go test ./...`)
- [x] Build succeeds (`go build .`)

## Screenshots

**Before (Bug):**

Instance names with Chinese characters show garbled text when truncated
or after backspace.

**After (Fixed):**

Chinese characters display correctly and backspace removes whole
characters.

Author: majiayu000

app/app.go

@@ -15,6 +15,7 @@ import (
 	"github.com/charmbracelet/bubbles/spinner"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
+	"github.com/mattn/go-runewidth"
 )
 
 const GlobalInstanceLimit = 10
@@ -360,17 +361,18 @@ func (m *home) handleKeyPress(msg tea.KeyMsg) (mod tea.Model, cmd tea.Cmd) {
 
 			return m, tea.Batch(tea.WindowSize(), m.instanceChanged())
 		case tea.KeyRunes:
-			if len(instance.Title) >= 32 {
+			if runewidth.StringWidth(instance.Title) >= 32 {
 				return m, m.handleError(fmt.Errorf("title cannot be longer than 32 characters"))
 			}
 			if err := instance.SetTitle(instance.Title + string(msg.Runes)); err != nil {
 				return m, m.handleError(err)
 			}
 		case tea.KeyBackspace:
-			if len(instance.Title) == 0 {
+			runes := []rune(instance.Title)
+			if len(runes) == 0 {
 				return m, nil
 			}
-			if err := instance.SetTitle(instance.Title[:len(instance.Title)-1]); err != nil {
+			if err := instance.SetTitle(string(runes[:len(runes)-1])); err != nil {
 				return m, m.handleError(err)
 			}
 		case tea.KeySpace:

ui/err.go

@@ -1,8 +1,10 @@
 package ui
 
 import (
-	"github.com/charmbracelet/lipgloss"
 	"strings"
+
+	"github.com/charmbracelet/lipgloss"
+	"github.com/mattn/go-runewidth"
 )
 
 type ErrBox struct {
@@ -38,8 +40,8 @@ func (e *ErrBox) String() string {
 		err = e.err.Error()
 		lines := strings.Split(err, "\n")
 		err = strings.Join(lines, "//")
-		if len(err) > e.width-3 && e.width-3 >= 0 {
-			err = err[:e.width-3] + "..."
+		if runewidth.StringWidth(err) > e.width-3 && e.width-3 >= 0 {
+			err = runewidth.Truncate(err, e.width-3, "...")
 		}
 	}
 	return lipgloss.Place(e.width, e.height, lipgloss.Center, lipgloss.Center, errStyle.Render(err))

ui/list.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/charmbracelet/bubbles/spinner"
 	"github.com/charmbracelet/lipgloss"
+	"github.com/mattn/go-runewidth"
 )
 
 const readyIcon = "● "
@@ -139,9 +140,9 @@ func (r *InstanceRenderer) Render(i *session.Instance, idx int, selected bool, h
 
 	// Cut the title if it's too long
 	titleText := i.Title
-	widthAvail := r.width - 3 - len(prefix) - 1
-	if widthAvail > 0 && widthAvail < len(titleText) && len(titleText) >= widthAvail-3 {
-		titleText = titleText[:widthAvail-3] + "..."
+	widthAvail := r.width - 3 - runewidth.StringWidth(prefix) - 1
+	if widthAvail > 0 && runewidth.StringWidth(titleText) > widthAvail {
+		titleText = runewidth.Truncate(titleText, widthAvail-3, "...")
 	}
 	title := titleS.Render(lipgloss.JoinHorizontal(
 		lipgloss.Left,
@@ -171,10 +172,10 @@ func (r *InstanceRenderer) Render(i *session.Instance, idx int, selected bool, h
 	}
 
 	remainingWidth := r.width
-	remainingWidth -= len(prefix)
-	remainingWidth -= len(branchIcon)
+	remainingWidth -= runewidth.StringWidth(prefix)
+	remainingWidth -= runewidth.StringWidth(branchIcon)
 
-	diffWidth := len(addedDiff) + len(removedDiff)
+	diffWidth := runewidth.StringWidth(addedDiff) + runewidth.StringWidth(removedDiff)
 	if diffWidth > 0 {
 		diffWidth += 1
 	}
@@ -192,17 +193,18 @@ func (r *InstanceRenderer) Render(i *session.Instance, idx int, selected bool, h
 		}
 	}
 	// Don't show branch if there's no space for it. Or show ellipsis if it's too long.
+	branchWidth := runewidth.StringWidth(branch)
 	if remainingWidth < 0 {
 		branch = ""
-	} else if remainingWidth < len(branch) {
+	} else if remainingWidth < branchWidth {
 		if remainingWidth < 3 {
 			branch = ""
 		} else {
 			// We know the remainingWidth is at least 4 and branch is longer than that, so this is safe.
-			branch = branch[:remainingWidth-3] + "..."
+			branch = runewidth.Truncate(branch, remainingWidth-3, "...")
 		}
 	}
-	remainingWidth -= len(branch)
+	remainingWidth -= runewidth.StringWidth(branch)
 
 	// Add spaces to fill the remaining width.
 	spaces := ""