# Status Widget Edit Mode UI Spec

## Overview

Replace current NAVIGATE mode with a cleaner EDIT mode that shows insertion slots between widgets, allowing precise widget placement and deletion.

## Mode Transitions

```
INPUT MODE (default)
    |
    | Tab
    v
STATUS FOCUS (view only, widgets highlighted)
    |
    | e
    v
EDIT MODE (slots visible, full editing)
    |
    | Esc
    v
STATUS FOCUS
    |
    | Esc
    v
INPUT MODE
```

## Visual Design

### Status Focus Mode (after Tab)
- Hide input box
- Show status area with current widgets
- Mode indicator: `STATUS` (dim)
- No insertion slots visible
- Arrow keys navigate between widgets
- Press 'e' to enter Edit Mode
- Press Esc to return to Input Mode

### Edit Mode (after 'e')
- Mode indicator: `EDIT` (highlighted)
- Show insertion slots as `+` between all widgets
- Show all 6 rows (including empty ones)
- Empty rows show: `+ (row N) +`
- Slots are selectable with arrow keys

### Slot Layout Example

```
EDIT MODE
+ 0 msg | 0 tok + 12:25:35 +
+ ⌁ default + no-skill +
+ cwd ~/dev/kollabor-cli-status-widgets +
+ 0 tmux + 0 bg +
+ (row 5) +
+ (row 6) +
```

Where `+` are insertion points that can be selected.

## Navigation in Edit Mode

### Selectable Items
1. **Widgets** - existing widgets can be selected
2. **Slots** - `+` insertion points can be selected

### Selection Order (left to right, top to bottom)
Row 1: `[slot] [widget1] [slot] [widget2] [slot] ... [slot]`

### Arrow Key Behavior
- Left/Right: Move between slots and widgets on current row
- Up/Down: Move to same position type on adjacent row

### Visual Selection
- Selected widget: underlined
- Selected slot: `+` becomes `[+]` or highlighted

## Keyboard Shortcuts (Edit Mode)

| Key | Action |
|-----|--------|
| Arrow keys | Navigate between slots/widgets |
| Enter | On slot: open widget picker. On widget: (reserved) |
| d | Delete selected widget |
| c | Toggle widget background color |
| Esc | Exit Edit Mode -> Status Focus |

## Widget Picker (on Enter at slot)

Show available widgets:
```
Add Widget
-----------
> cwd - Current working directory
  profile - Active LLM profile
  model - Active model name
  ...
```

- Arrow keys to select
- Enter to add widget at selected slot position
- Esc to cancel

## Implementation Components

### 1. StatusNavigationState Changes
- Add `mode: 'input' | 'status_focus' | 'edit'`
- Add `selected_type: 'widget' | 'slot'`
- Add `slot_index: int` (position within row for slots)
- Track selection as (row, position) where position alternates slot/widget

### 2. Layout Renderer Changes
- New method: `render_edit_mode()`
- Render slots between widgets when in edit mode
- Show all 6 rows in edit mode (even empty ones)
- Hide empty rows when not in edit mode

### 3. Navigation Manager Changes
- Handle 'e' key to enter edit mode
- Handle slot navigation (different from widget navigation)
- Handle 'd' for delete
- Handle 'c' for color toggle
- Handle Enter on slots to open picker

### 4. Widget Color System
- Store widget color preference in layout config
- Default: transparent (use row background)
- Toggle cycles through: default -> primary -> accent -> dark -> default

## Config Changes

```json
{
  "status_layout": {
    "rows": [
      {
        "id": 1,
        "visible": true,
        "widgets": [
          {
            "id": "stats",
            "width": {"type": "auto"},
            "color": "default"  // NEW: color preference
          }
        ]
      }
    ]
  }
}
```

## File Changes Required

1. `core/io/status/navigation_state.py` - Add edit mode state
2. `core/io/status/navigation_manager.py` - Edit mode logic, slot navigation
3. `core/io/status/layout_renderer.py` - Render slots, show all rows in edit
4. `core/io/status/layout_manager.py` - Widget color support
5. `core/io/input/key_press_handler.py` - Handle 'e' key transition

## Migration

- Remove `▸` interactive indicator
- Remove current NAVIGATE mode (replace with STATUS FOCUS + EDIT)
- Preserve all existing widget/row data
