# Status Area Design Specification

## Overview

The status area consists of two bordered boxes at the bottom of the terminal:
1. **Input Box** - User input area
2. **Status Box** - Multi-line status information with embedded navigation

## Visual Layout

```
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
 ⠠⠵ █Type your message here...
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ cwd ~/dev/kollabor-cli  ⌘ glma  glm-4.7 @ api.z.ai  * Ready  0 msg | 0 tok
█ ⌁ using default-agent  no-skill  skill1  skill2  skill3  +6 skills
█ ∷ current task ⤵ ➲ 5 pending  3 tmux sessions active
█   working on blah....  1 bg task running...
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█ ☰ ⇐ Opt+ ⇒ ▉ 1/9 Overview █▀▀▀▀▀▀▀
```

### Key Design Elements

1. **Left Gutter**: Each status content line starts with `█` (green/ai_tag color)
2. **Unified Box**: All content lines are within a single bordered container
3. **Embedded Hint**: Navigation hint is embedded in the bottom border (right-aligned)
4. **No Internal Borders**: Content lines flow without separating borders

---

## 1. Input Box

### Structure
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ TOP BORDER    ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ (dark color)  │
│ CONTENT       ⠠⠵ █{user input with cursor}                                  │
│ BOTTOM BORDER ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ (dark color)  │
└─────────────────────────────────────────────────────────────────────────────┘
```

### Components
- **Top border**: Solid `▄` characters, dark color, full width (76 chars)
- **Content line**:
  - Prompt icon: `⠠⠵` (braille pattern, no tag/diamond)
  - Cursor: `█` block character
  - User text with gradient background
- **Bottom border**: Solid `▀` characters, dark color, full width

### Colors
- Border: `T().dark[0]` (RGB 35,35,35)
- Content background: Gradient from `T().input_bg`
- Text: `T().text` (white/light)

---

## 2. Status Box

### Structure
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ TOP BORDER    ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ (dark color)  │
│ LINE 1        Main status (powerline segments)                              │
│ LINE 2        Agent info (if active)                                        │
│ LINE 3        Task info (if tasks exist)                                    │
│ LINE 4+       Additional context lines                                      │
│ BOTTOM BORDER ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█ hint section █▀▀▀▀▀▀▀▀ (embedded)     │
└─────────────────────────────────────────────────────────────────────────────┘
```

### Content Lines

#### Line 1: Main Status (always shown)
```
 cwd ~/dev/kollabor-cli  ⌘ glma  glm-4.7 @ api.z.ai  * Ready  0 msg | 0 tok
 └─────────────────────┘ └────┘ └────────────────────┘ └──────┘ └──────────┘
       directory        profile     model @ endpoint    status     stats
```

Powerline segments with icons:
- `cwd` - Current working directory (lime)
- `⌘` - Profile name (cyan)
- Model @ endpoint (lime)
- `*` - Status indicator (cyan)
- Stats: messages | tokens (neutral)

#### Line 2: Agent Info (if agent active)
```
  ⌁ using default-agent  no-skill  skill1  skill2  skill3  +6 skills
  └┘ └─────────────────┘ └───────────────────────────────┘ └────────┘
 icon    agent name              active skills              more count
```

- Icon: `⌁` (agent indicator)
- Agent name with "using" prefix
- Active skills listed
- `+N skills` for additional skills

#### Line 3: Task Info (if tasks exist)
```
   ∷ current task ⤵ ➲ 5 pending  3 tmux sessions active
   └┘ └──────────┘   └─────────┘ └────────────────────┘
  icon  task name    pending      tmux sessions
```

- Icon: `∷` (task indicator)
- Current task name with `⤵` indicator
- `➲` pending count
- Active tmux sessions

#### Line 4+: Additional Context
```
      working on blah....  5 pending tasks  3 tmux sessions active
```

- Indented continuation
- Extended task description
- Additional status info

### Bottom Border with Embedded Hint

```
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█ ☰ ⇐ Opt+ ⇒ ▉ 1/9 Overview █▀▀▀▀▀▀▀
└───────────────────────────────────────┘│└────────────────────────────┘│└─────┘
            left border (dark)          marker      hint content       marker  right
```

Components:
- **Left border**: `▀` characters (dark)
- **Left marker**: `█` (green/ai_tag color)
- **Hint content**: ` ☰ ⇐ Opt+ ⇒ ▉ 1/9 Overview ` (dark bg, dim text)
  - `☰` menu icon
  - `⇐ Opt+ ⇒` navigation hint
  - `▉` separator
  - `1/9` view index
  - `Overview` view name
- **Right marker**: `█` (green/ai_tag color)
- **Right border**: `▀` characters (dark)

---

## 3. Color Scheme

### Theme Colors (from T())
| Element | Color | RGB |
|---------|-------|-----|
| Border (dark) | `T().dark[0]` | (35, 35, 35) |
| Marker (green) | `T().ai_tag` | (80, 180, 50) |
| Hint background | `T().dark[1]` | (45, 45, 45) |
| Hint text | `T().text_dim` | (120, 120, 120) |
| Lime segments | `T().success` | (132, 204, 22) |
| Cyan segments | `T().info` | (8, 145, 178) |

### Powerline Segment Colors
- Directory: Lime dark
- Profile: Cyan dark
- Provider: Neutral light
- Model: Lime
- Status: Cyan
- Stats: Neutral mid

---

## 4. Implementation Notes

### Files to Modify
1. `core/io/terminal_renderer.py` - Input box rendering
2. `core/io/status_renderer.py` - Status box rendering
3. `core/io/core_status_views.py` - Content providers

### Key Changes

#### Input Box (`_render_input_modern`)
- Remove tag section (◆)
- Use simple braille prompt `⠠⠵`
- Dark borders (not gradient tag)

#### Status Box (`_render_block_layout`)
- Single bordered box containing all content lines
- No internal borders between lines
- Top border: solid dark
- Bottom border: embedded hint section
- Content lines from providers rendered without individual borders

#### Content Providers
- `_overview_content()` - Line 1: main status
- `_agent_content()` - Line 2: agent/skills (new or modified)
- `_task_content()` - Line 3-4: task info (new)
- All return plain content lines (no borders)

### Rendering Flow
```
1. render_horizontal_layout()
   ├── Add top border (dark)
   ├── Get content from providers
   │   ├── _overview_content() → powerline line
   │   ├── _agent_content() → agent line (if active)
   │   └── _task_content() → task lines (if tasks)
   ├── Extend lines with content
   └── Add bottom border with embedded hint
```

---

## 5. Future Enhancements

- [ ] Collapsible status sections
- [ ] Custom status line plugins
- [ ] Configurable information density
- [ ] Alternative hint styles
- [ ] Animation support for status changes
