@@ -1,17 +1,59 @@
1# UI Development Instructions
1# UI Development Instructions
3−## General guideline
3+## General Guidelines
4−- Never use commands to send messages when you can directly mutate children or state
4+- Never use commands to send messages when you can directly mutate children or state.
5−- Keep things simple do not overcomplicated
5+- Keep things simple; do not overcomplicate.
6−- Create files if needed to separate logic do not nest models
6+- Create files if needed to separate logic; do not nest models.
8−## Big model
8+## Architecture
9−Keep most of the logic and state in the main model `internal/ui/model/ui.go`.
10+### Main Model (`model/ui.go`)
11+Keep most of the logic and state in the main model. This is where:
12+- Message routing happens
13+- Focus and UI state is managed
14+- Layout calculations are performed
15+- Dialogs are orchestrated
12−## When working on components
17+### Components Should Be Dumb
13−Whenever you work on components make them dumb they should not handle bubble tea messages they should have methods.
18+Components should not handle bubbletea messages directly. Instead:
19+- Expose methods for state changes
20+- Return `tea.Cmd` from methods when side effects are needed
21+- Handle their own rendering via `Render(width int) string`
15−## When adding logic that has to do with the chat
23+### Chat Logic (`model/chat.go`)
16−Most of the logic with the chat should be in the chat component `internal/ui/model/chat.go`, keep individual items dumb and handle logic in this component.
24+Most chat-related logic belongs here. Individual chat items in `chat/` should be simple renderers that cache their output and invalidate when data changes (see `cachedMessageItem` in `chat/messages.go`).
28+### Composition Over Inheritance
29+Use struct embedding for shared behaviors. See `chat/messages.go` for examples of reusable embedded structs for highlighting, caching, and focus.
32+- List item interfaces are in `list/item.go`
33+- Chat message interfaces are in `chat/messages.go`
34+- Dialog interface is in `dialog/dialog.go`
37+- All styles are defined in `styles/styles.go`
38+- Access styles via `*common.Common` passed to components
39+- Use semantic color fields rather than hardcoded colors
42+- Implement the dialog interface in `dialog/dialog.go`
43+- Return message types from `Update()` to signal actions to the main model
44+- Use the overlay system for managing dialog lifecycle
47+- `model/` - Main UI model and major components (chat, sidebar, etc.)
48+- `chat/` - Chat message item types and renderers
49+- `dialog/` - Dialog implementations
50+- `list/` - Generic list component with lazy rendering
51+- `common/` - Shared utilities and the Common struct
52+- `styles/` - All style definitions
53+- `anim/` - Animation system
54+- `logo/` - Logo rendering
57+- Always account for padding/borders in width calculations
58+- Use `tea.Batch()` when returning multiple commands
59+- Pass `*common.Common` to components that need styles or app access