Proposal: UI Theme Presets (Claude and Codex) for Zero TUI

Currently, Zero’s Terminal User Interface (TUI) has a single, fixed layout structure and design style. Introducing user-configurable UI Theme Presets would allow developers to customize the visual alignment, structural arrangement, and overall styling of the TUI depending on their preferences.

This issue proposes planning and designing two initial presets: Claude Theme and Codex Theme.

---

🎨 Theme Concepts

1. 🧡 Claude Theme (Focused, Minimalistic, Card-Based)

• Design Language: Sleek, warm, high-contrast, card-based interface (inspired by Claude.ai's chat UI).
• Color Palette: Cream/soft amber highlights, subtle gray backgrounds, dark mode with deep bronze/charcoal undertones.
• Layout & Arrangement:
  • Centrally aligned chat container with generous padding.
  • Clean separated "cards" for system messages and model responses.
  • Right-aligned sidebar for active tasks, metadata, and token usage, designed as a collapsable drawer.
  • Simplified single-line input bar with a floating appearance.

2. 💚 Codex Theme (Dense, Technical, Matrix-Like)

• Design Language: Technical, high-density, monospace-centric (inspired by a classic terminal IDE / hacker HUD).
• Color Palette: Neon greens, cyan highlights, deep terminal blacks, and vibrant matrix/cyberpunk accents.
• Layout & Arrangement:
  • Side-by-side split screen (Left: chat timeline / Right: real-time terminal command execution output and shell state).
  • Dense layout with tight padding for maximum information visibility per screen.
  • Bottom status bar showing real-time CPU, token usage, lock status, and active daemons.
  • A grid of keyboard shortcut legends always visible at the bottom.

---

🏗️ Technical Architecture & Implementation Steps

To support dynamically swappable layouts, we need to decouple our BubbleTea rendering from hardcoded dimensions and arrangements in internal/tui/:

1. Introduce a Theme Spec & Config:
   • Add a theme field in config.json (values: "default", "claude", "codex").
   • Define a tui/theme package with layout configuration specs (e.g. padding widths, split-ratios, colors, borders).
2. Abstract TUI View Layout:
   • Refactor the main TUI render loop (internal/tui/model.go) to defer view composition (splitting panels, adding borders, headers) to a layout helper that respects the active theme config.
   • Use lipgloss styles dynamically loaded from the selected theme preset.
3. Implement Layout Arrangements:
   • Claude Layout: Single-column padded view with a toggleable side panel.
   • Codex Layout: Horizontal/vertical split views using lipgloss.JoinHorizontal/lipgloss.JoinVertical.

---

💡 Discussion / Open Questions

• How should we handle themes in light vs. dark terminal backgrounds? Should themes define adaptive palettes?
• Should theme configuration allow custom keybindings to match the theme's aesthetic (e.g., Codex using vim-like keys by default)?