UAT: TUI MainScreen missing right-side collapsible sidebar with 3 states (hidden/visible/fullscreen) #1329

New issue

Open

opened 2026-04-02 16:51:59 +00:00 by freemo · 0 comments

freemo commented

2026-04-02 16:51:59 +00:00

Owner

Bug Report: [tui] — Right-side collapsible sidebar with 3 states is not implemented

Severity Assessment

Impact: Critical. The sidebar is a core navigation feature of the TUI. Without it, users cannot view Plans, Projects, or manage Personas from the TUI. The spec defines this as a key architectural principle.
Likelihood: 100% reproducible — the sidebar widget simply does not exist.
Priority: High

Location

File: src/cleveragents/tui/app.py — compose() method (lines 107–120)
File: src/cleveragents/tui/cleveragents.tcss — no sidebar CSS rules exist

Description

The specification (§TUI Architecture Overview) defines a right-side collapsible sidebar as one of the key architectural principles:

"Right-side collapsible sidebar — three states cycled by shift+tab: hidden → visible → fullscreen"

The spec defines three sidebar states with precise layout requirements:

State	Layout	Input Focus	Content
Hidden	Sidebar `display: none`; conversation full width	Prompt retains focus	No sidebar content visible
Visible	Sidebar docked right, 32-40 chars wide	Prompt retains focus; `ctrl+b` focuses sidebar	Plans and Projects panels in collapsible containers
Fullscreen	Covers entire screen	Sidebar takes input focus	Extended details, selection mode, persona management

State transitions:

Hidden ──shift+tab──► Visible ──shift+tab──► Fullscreen
  ▲                                              │
  └──────────────── escape (×1-2) ───────────────┘

Actual Behavior

The compose() method in app.py yields only a single _Vertical(id="main-column") with no sidebar widget:

def compose(self) -> Any:
    yield _Header(show_clock=True)
    with _Vertical(id="main-column"):
        yield _Static("CleverAgents TUI", id="conversation")
        yield HelpPanelOverlay(id="help-panel")
        yield ReferencePickerOverlay(id="reference-picker")
        yield SlashCommandOverlay(id="slash-overlay")
        yield PromptInput(...)
        yield PersonaBar(id="persona-bar")
    yield _Footer()

There is no:

Sidebar widget or class
Horizontal layout container to place sidebar alongside conversation
Sidebar state management (hidden/visible/fullscreen)
Plans panel widget
Projects panel widget
shift+tab binding to cycle sidebar states
ctrl+b binding to focus sidebar
CSS rules for #sidebar, #plans-panel, #projects-panel

Expected Behavior (from spec)

The compose() should yield a Horizontal container with:

Left column: conversation + prompt (full width when sidebar hidden)
Right column: sidebar widget (32-40 chars wide when visible, full screen when fullscreen)

The sidebar should contain:

Plans panel (collapsible): list of plans with phase, profile, actor, cost
Projects panel (collapsible): list of projects with namespace, resource count

Steps to Reproduce

Run the TUI: uv run cleveragents tui (or equivalent)
Observe: no sidebar is visible
Press shift+tab: no sidebar state change occurs (binding not registered)

Parent feature issue: #694 (feat(tui): Textual MainScreen with sidebar states and Dracula theme)
Broader refactoring issue: #1315 (Refactor TUI to Align with ADR-44 and ADR-45)

References

Spec §TUI Architecture Overview
Spec §MainScreen Layout — Sidebar Hidden
Spec §MainScreen Layout — Sidebar Visible
Spec §MainScreen Layout — Sidebar Fullscreen
Spec §Sidebar State Transitions

## Bug Report: [tui] — Right-side collapsible sidebar with 3 states is not implemented ### Severity Assessment - **Impact**: Critical. The sidebar is a core navigation feature of the TUI. Without it, users cannot view Plans, Projects, or manage Personas from the TUI. The spec defines this as a key architectural principle. - **Likelihood**: 100% reproducible — the sidebar widget simply does not exist. - **Priority**: High ### Location - **File**: `src/cleveragents/tui/app.py` — `compose()` method (lines 107–120) - **File**: `src/cleveragents/tui/cleveragents.tcss` — no sidebar CSS rules exist ### Description The specification (§TUI Architecture Overview) defines a **right-side collapsible sidebar** as one of the key architectural principles: > "Right-side collapsible sidebar — three states cycled by `shift+tab`: hidden → visible → fullscreen" The spec defines three sidebar states with precise layout requirements: | State | Layout | Input Focus | Content | |-------|--------|-------------|---------| | **Hidden** | Sidebar `display: none`; conversation full width | Prompt retains focus | No sidebar content visible | | **Visible** | Sidebar docked right, 32-40 chars wide | Prompt retains focus; `ctrl+b` focuses sidebar | Plans and Projects panels in collapsible containers | | **Fullscreen** | Covers entire screen | Sidebar takes input focus | Extended details, selection mode, persona management | State transitions: ``` Hidden ──shift+tab──► Visible ──shift+tab──► Fullscreen ▲ │ └──────────────── escape (×1-2) ───────────────┘ ``` ### Actual Behavior The `compose()` method in `app.py` yields only a single `_Vertical(id="main-column")` with no sidebar widget: ```python def compose(self) -> Any: yield _Header(show_clock=True) with _Vertical(id="main-column"): yield _Static("CleverAgents TUI", id="conversation") yield HelpPanelOverlay(id="help-panel") yield ReferencePickerOverlay(id="reference-picker") yield SlashCommandOverlay(id="slash-overlay") yield PromptInput(...) yield PersonaBar(id="persona-bar") yield _Footer() ``` There is no: - Sidebar widget or class - `Horizontal` layout container to place sidebar alongside conversation - Sidebar state management (hidden/visible/fullscreen) - Plans panel widget - Projects panel widget - `shift+tab` binding to cycle sidebar states - `ctrl+b` binding to focus sidebar - CSS rules for `#sidebar`, `#plans-panel`, `#projects-panel` ### Expected Behavior (from spec) The `compose()` should yield a `Horizontal` container with: 1. Left column: conversation + prompt (full width when sidebar hidden) 2. Right column: sidebar widget (32-40 chars wide when visible, full screen when fullscreen) The sidebar should contain: - **Plans panel** (collapsible): list of plans with phase, profile, actor, cost - **Projects panel** (collapsible): list of projects with namespace, resource count ### Steps to Reproduce 1. Run the TUI: `uv run cleveragents tui` (or equivalent) 2. Observe: no sidebar is visible 3. Press `shift+tab`: no sidebar state change occurs (binding not registered) ### Related Issues - Parent feature issue: #694 (feat(tui): Textual MainScreen with sidebar states and Dracula theme) - Broader refactoring issue: #1315 (Refactor TUI to Align with ADR-44 and ADR-45) ### References - Spec §TUI Architecture Overview - Spec §MainScreen Layout — Sidebar Hidden - Spec §MainScreen Layout — Sidebar Visible - Spec §MainScreen Layout — Sidebar Fullscreen - Spec §Sidebar State Transitions

freemo referenced this issue

2026-04-02 16:53:29 +00:00

UAT: TUI MainScreen missing escape-cascading navigation (escape key not bound) #1335

freemo added the

labels

2026-04-02 16:55:36 +00:00