[UI] Task State Color Coding

[randomm]

Task State Color Coding

Visual Reference

Based on Claude Code TUI design patterns.

Requirements

Task Status Icons & Colors

State	Icon	Color	Example
Completed	✓	Green	✓ #1 Create project structure
Pending	□	Dim/Gray	□ #2 Implement views
Running	●	Green	● Developer Task "Fix streaming"
In-Progress	◇	Yellow/Orange	◇ Swooping…

Message Attribution Colors

• Agent role icon: Purple square 🟪
• Agent name: Cyan/Blue
• Model name: Dim gray
• Response time: Dim gray

Status Bar Colors

• User badge: Cyan background with dark text
• File counts: Green for additions, red for deletions
• Keyboard hints: Dim gray

Running Task Banner

• Background: Subtle highlight
• Spinner/icon: Animated or colored
• Format: | 🔄 Task name (#issue) | Status |

ANSI Color Codes to Use

const colors = {
 green: "\x1b[32m", // completed, additions
 yellow: "\x1b[33m", // in-progress
 cyan: "\x1b[36m", // agent names, user badge
 dim: "\x1b[2m", // pending, hints
 red: "\x1b[31m", // errors, deletions
 magenta: "\x1b[35m", // role icons
 reset: "\x1b[0m"
}

Acceptance Criteria

• Completed tasks render green checkmark
• Pending tasks render dim empty box
• Running agents show green dot
• Activity indicators show yellow/orange
• Color scheme is consistent across all UI elements
• Colors degrade gracefully in terminals without color support

[randomm]

Implemented in PR #51. Added task state color coding in src/cli/cmd/tui/util/icons.ts with colors for completed (green ✓), pending (dim □), running (green ●), and progress (yellow ◇).

[randomm]

Reopening - icons.ts utility was created but NOT integrated into oclite TUI. The TUI itself is still a demo without backend connection.

[randomm]

Consolidated into new issue. Partially addressed by #96 (theme colors for tools/tasks). Remaining work: todo-specific colors, task panel toggle.