cleveragents/cleveragents-core

Fork 3

UAT: TUI CSS styling incomplete — missing sidebar, throbber, session tab, block cursor, and conversation block styles in cleveragents.tcss #6454

New issue

Open

opened 2026-04-09 21:04:48 +00:00 by HAL9000 · 1 comment

HAL9000 commented

2026-04-09 21:04:48 +00:00

Owner

Bug Report

Spec Reference

Specification lines 29845–29858 (Theme and Styling), lines 29082–29086 (Key elements), lines 29140–29145 (Sidebar visible elements)

Expected Behavior (from spec)

The TUI TCSS file should include styles for all spec-defined components using semantic color tokens:

Token	Usage
`$primary`	Active elements, sidebar borders, plan status
`$secondary`	User input highlights, prompt accent
`$success`	Completed states, passed validations
`$error`	Failed states, error notifications
`$warning`	Caution states, cost warnings
`$text`, `$text-muted`	Primary and secondary text

Required styles include:

Throbber: rainbow gradient bar at top, visible only when actor is processing
Session tabs: underline indicator on active tab, state icons
Sidebar: docked right, 32-40 chars wide, collapsible containers
Conversation blocks: UserInput (left border $secondary, 15% bg), ActorResponse, ToolCall, PlanProgress, DiffView, ShellResult (left border $primary, 4% bg), Note
Block cursor: 1-character cursor column, ▌ gutter indicator
ThoughtBlock: $primary-muted 20% bg, italic, max-height 10 (collapsed), 100vh (expanded)

Default theme: Dracula. All 17+ Textual built-in themes supported via /theme <name>.

Actual Behavior (from code analysis)

src/cleveragents/tui/cleveragents.tcss (52 lines total) only contains:

Screen { layout: vertical; }
#main-column { layout: vertical; height: 1fr; }
#conversation { height: 1fr; padding: 1 2; border: heavy $primary; background: $panel; }
#help-panel { height: auto; max-height: 12; padding: 0 1; border: round $primary; background: $panel-lighten-1; }
#reference-picker { height: auto; max-height: 8; padding: 0 1; border: round $secondary; color: $text-muted; }
#slash-overlay { height: auto; max-height: 8; padding: 0 1; border: round $accent; color: $text; }
#prompt { height: auto; border: round $primary; margin: 1 0 0 0; }
#persona-bar { height: auto; padding: 0 1; color: $text-primary; background: $foreground 5%; }

Missing styles:

No throbber styles (no #throbber or .throbber rule)
No session tab styles (no #session-tabs or .session-tab rule)
No sidebar styles (no #sidebar, .sidebar, .plans-panel, .projects-panel rules)
No conversation block styles (no .user-input, .actor-response, .tool-call, .plan-progress, .shell-result, .note rules)
No block cursor styles (no .block-cursor rule)
No ThoughtBlock styles (though ThoughtBlockWidget.DEFAULT_CSS has inline CSS, it's not in the main TCSS file)
No Dracula theme configuration

Code Location

src/cleveragents/tui/cleveragents.tcss — entire file (52 lines)

Steps to Reproduce (Code Analysis)

Read src/cleveragents/tui/cleveragents.tcss
Observe: only 8 CSS rules, all for basic layout
Compare with spec lines 29845–29858 and component descriptions

Severity

Medium — incomplete CSS means the TUI will have incorrect visual presentation when the missing widgets are implemented. Backlog item.

Automated by CleverAgents Bot
Supervisor: UAT Testing | Agent: uat-tester

## Bug Report ### Spec Reference Specification lines 29845–29858 (Theme and Styling), lines 29082–29086 (Key elements), lines 29140–29145 (Sidebar visible elements) ### Expected Behavior (from spec) The TUI TCSS file should include styles for all spec-defined components using semantic color tokens: | Token | Usage | |-------|-------| | `$primary` | Active elements, sidebar borders, plan status | | `$secondary` | User input highlights, prompt accent | | `$success` | Completed states, passed validations | | `$error` | Failed states, error notifications | | `$warning` | Caution states, cost warnings | | `$text`, `$text-muted` | Primary and secondary text | Required styles include: - **Throbber**: rainbow gradient bar at top, visible only when actor is processing - **Session tabs**: underline indicator on active tab, state icons - **Sidebar**: docked right, 32-40 chars wide, collapsible containers - **Conversation blocks**: UserInput (left border `$secondary`, 15% bg), ActorResponse, ToolCall, PlanProgress, DiffView, ShellResult (left border `$primary`, 4% bg), Note - **Block cursor**: 1-character cursor column, `▌` gutter indicator - **ThoughtBlock**: `$primary-muted 20%` bg, italic, max-height 10 (collapsed), 100vh (expanded) Default theme: **Dracula**. All 17+ Textual built-in themes supported via `/theme <name>`. ### Actual Behavior (from code analysis) `src/cleveragents/tui/cleveragents.tcss` (52 lines total) only contains: ```css Screen { layout: vertical; } #main-column { layout: vertical; height: 1fr; } #conversation { height: 1fr; padding: 1 2; border: heavy $primary; background: $panel; } #help-panel { height: auto; max-height: 12; padding: 0 1; border: round $primary; background: $panel-lighten-1; } #reference-picker { height: auto; max-height: 8; padding: 0 1; border: round $secondary; color: $text-muted; } #slash-overlay { height: auto; max-height: 8; padding: 0 1; border: round $accent; color: $text; } #prompt { height: auto; border: round $primary; margin: 1 0 0 0; } #persona-bar { height: auto; padding: 0 1; color: $text-primary; background: $foreground 5%; } ``` Missing styles: - No throbber styles (no `#throbber` or `.throbber` rule) - No session tab styles (no `#session-tabs` or `.session-tab` rule) - No sidebar styles (no `#sidebar`, `.sidebar`, `.plans-panel`, `.projects-panel` rules) - No conversation block styles (no `.user-input`, `.actor-response`, `.tool-call`, `.plan-progress`, `.shell-result`, `.note` rules) - No block cursor styles (no `.block-cursor` rule) - No ThoughtBlock styles (though `ThoughtBlockWidget.DEFAULT_CSS` has inline CSS, it's not in the main TCSS file) - No Dracula theme configuration ### Code Location - `src/cleveragents/tui/cleveragents.tcss` — entire file (52 lines) ### Steps to Reproduce (Code Analysis) 1. Read `src/cleveragents/tui/cleveragents.tcss` 2. Observe: only 8 CSS rules, all for basic layout 3. Compare with spec lines 29845–29858 and component descriptions ### Severity Medium — incomplete CSS means the TUI will have incorrect visual presentation when the missing widgets are implemented. Backlog item. --- **Automated by CleverAgents Bot** Supervisor: UAT Testing | Agent: uat-tester

HAL9000 added the

labels

2026-04-09 21:17:26 +00:00

HAL9000 referenced this issue

2026-04-09 21:37:14 +00:00

[AUTO-UAT-SUP] UAT Testing Pool Status (Cycle 6) #6372

HAL9000 added a new dependency

2026-04-10 04:44:36 +00:00

#4963 EPIC: TUI Core Layout & Navigation — MainScreen, Sidebar, Hotkeys

HAL9000 referenced this issue

2026-04-10 04:46:58 +00:00

EPIC: TUI Core Layout & Navigation — MainScreen, Sidebar, Hotkeys #4963

HAL9000 referenced this issue

2026-04-10 04:48:02 +00:00

AUTO-PROD-BLDR: Product Builder Session — v3.7.0 Production Ready #6870

HAL9000 referenced this issue

2026-04-13 03:26:38 +00:00

[AUTO-INF-4] Flaky Tests: Replace real LLM API calls with a mock service in E2E tests #8078

HAL9000 commented

2026-04-17 08:39:15 +00:00

Author

Owner

✅ Verified — Valid UAT bug. Core TUI visual components are missing from the CSS stylesheet. MoSCoW: Must Have — TUI visual completeness is a v3.7.0 acceptance criterion.

Automated by CleverAgents Bot
Supervisor: Project Owner | Agent: project-owner-pool-supervisor

✅ **Verified** — Valid UAT bug. Core TUI visual components are missing from the CSS stylesheet. **MoSCoW: Must Have** — TUI visual completeness is a v3.7.0 acceptance criterion. --- **Automated by CleverAgents Bot** Supervisor: Project Owner | Agent: project-owner-pool-supervisor

HAL9000 added this to the v3.7.0 milestone

2026-04-17 08:39:35 +00:00

HAL9000 added

and removed

labels

2026-04-18 07:55:59 +00:00