UAT: TUI MainScreen uses Textual Header widget instead of spec-defined layout (no clock, wrong position) #1334

New issue

Open

opened 2026-04-02 16:53:12 +00:00 by freemo · 0 comments

freemo commented

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

Owner

Bug Report: [tui] — TUI uses Textual's built-in Header widget which is not part of the spec layout

Severity Assessment

Impact: Medium. The spec defines a precise layout with Throbber + Session Tabs at the top, not a Textual Header. The Header widget adds an application title bar that is not in any spec mockup.
Likelihood: 100% reproducible.
Priority: Medium

Location

File: src/cleveragents/tui/app.py — compose() method, line 108

Description

The compose() method yields Textual's built-in _Header(show_clock=True) as the first widget:

def compose(self) -> Any:
    yield _Header(show_clock=True)  # ← Not in spec
    with _Vertical(id="main-column"):
        ...

The spec's MainScreen layout mockups show no application title header. Instead, the top of the screen contains:

Throbber (rainbow gradient bar, zero height when idle)
Session Tabs (tab bar, hidden when only one session)

The Textual Header widget renders a title bar with the app name and optionally a clock. This is not present in any of the 18 spec ASCII mockups. The spec mockup shows the top edge as:

│═══════════════════════════════════════════ ◆ ═══════════════════════════════════════════     │
│ Session 1  ┃ Session 2 ┃  Session 3                                                          │
│              ┗━━━━━━━━━━━━┛                                                                  │

The ═══ ◆ ═══ line is the Throbber (rainbow gradient when active), not a Textual Header.

Actual Behavior

The TUI renders a standard Textual Header bar at the top with the app name and clock, consuming screen real estate that should be used for the throbber and session tabs.

Expected Behavior (from spec)

The compose() should yield:

A custom Throbber widget (not Textual's Header)
A SessionTabs widget (hidden when only one session)
The main content area

Steps to Reproduce

Run the TUI
Observe: a Textual Header bar appears at the top with app name and clock
Compare with spec mockup: the top should show the throbber (rainbow bar) and session tabs

#694 (feat(tui): Textual MainScreen with sidebar states and Dracula theme)
#1331 (UAT: TUI MainScreen missing Throbber widget)
#1332 (UAT: TUI MainScreen missing multi-session tab bar)

References

Spec §MainScreen Layout — Sidebar Hidden (ASCII mockup)
Spec §MainScreen Layout — Sidebar Visible (ASCII mockup)
Spec §Throbber

## Bug Report: [tui] — TUI uses Textual's built-in Header widget which is not part of the spec layout ### Severity Assessment - **Impact**: Medium. The spec defines a precise layout with Throbber + Session Tabs at the top, not a Textual Header. The Header widget adds an application title bar that is not in any spec mockup. - **Likelihood**: 100% reproducible. - **Priority**: Medium ### Location - **File**: `src/cleveragents/tui/app.py` — `compose()` method, line 108 ### Description The `compose()` method yields Textual's built-in `_Header(show_clock=True)` as the first widget: ```python def compose(self) -> Any: yield _Header(show_clock=True) # ← Not in spec with _Vertical(id="main-column"): ... ``` The spec's MainScreen layout mockups show **no application title header**. Instead, the top of the screen contains: 1. **Throbber** (rainbow gradient bar, zero height when idle) 2. **Session Tabs** (tab bar, hidden when only one session) The Textual `Header` widget renders a title bar with the app name and optionally a clock. This is not present in any of the 18 spec ASCII mockups. The spec mockup shows the top edge as: ``` │═══════════════════════════════════════════ ◆ ═══════════════════════════════════════════ │ │ Session 1 ┃ Session 2 ┃ Session 3 │ │ ┗━━━━━━━━━━━━┛ │ ``` The `═══ ◆ ═══` line is the **Throbber** (rainbow gradient when active), not a Textual Header. ### Actual Behavior The TUI renders a standard Textual Header bar at the top with the app name and clock, consuming screen real estate that should be used for the throbber and session tabs. ### Expected Behavior (from spec) The `compose()` should yield: 1. A custom `Throbber` widget (not Textual's `Header`) 2. A `SessionTabs` widget (hidden when only one session) 3. The main content area ### Steps to Reproduce 1. Run the TUI 2. Observe: a Textual Header bar appears at the top with app name and clock 3. Compare with spec mockup: the top should show the throbber (rainbow bar) and session tabs ### Related Issues - #694 (feat(tui): Textual MainScreen with sidebar states and Dracula theme) - #1331 (UAT: TUI MainScreen missing Throbber widget) - #1332 (UAT: TUI MainScreen missing multi-session tab bar) ### References - Spec §MainScreen Layout — Sidebar Hidden (ASCII mockup) - Spec §MainScreen Layout — Sidebar Visible (ASCII mockup) - Spec §Throbber

freemo added the

labels

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

freemo referenced this issue

2026-04-02 16:56:18 +00:00

[Automated] Product Build Session State #1314