[UX] Visually separate tool calls from agent prose output

[randomm]

Problem

The current output mixes tool calls, task delegations, and agent prose text together without clear visual separation. This makes it hard to:

1. Distinguish what the agent is doing (tools/tasks) vs what it's saying (prose)
2. Scan quickly for status information
3. Understand the flow of execution

Solution: Color-coded output with theme support

Use subtle colors to distinguish different content types:

Content Type	Color	Example
Tool calls	Dim gray/muted	✓ bash git status
Tasks (subagents)	Muted blue/cyan	◆ task @git-agent
Agent prose	Normal/white	Main response text
User messages	Distinct color (e.g., green)	User's input

Theme-ready architecture

Structure colors as a theme object so they can be easily swapped later:

const theme = {
  tool: { icon: fg.green, text: style.dim },
  task: { icon: fg.cyan, text: fg.blue },
  prose: { text: fg.white },
  user: { text: fg.green },
  error: { icon: fg.red, text: fg.red },
}

This mirrors how opencode TUI handles themes (they support multiple theme choices). We don't need theme selection yet, but structuring the code this way makes it easy to add later.

Implementation

1. Create a theme.ts file with the color definitions
2. Update liveblock.ts to use theme colors for tools/tasks
3. Update index.ts to use theme colors for prose output
4. Keep colors subtle — visual hierarchy, not rainbow

Acceptance Criteria

• Tool calls visually distinct (dimmed or muted color)
• Tasks have their own color treatment
• Prose is clearly the "main" content
• Colors defined in a theme object for future extensibility
• Subtle, professional appearance

[randomm]

Implemented in ce74e69: Theme-based color coding - dim gray for completed tools, yellow for running, cyan for tasks