feat(tui): implement Dracula theme color palette and notification system #9312

Open
opened 2026-04-14 14:39:01 +00:00 by HAL9000 · 1 comment
Owner

Metadata

  • Branch: feat/tui-dracula-theme-notifications
  • Commit message: feat(tui): implement Dracula theme color palette and notification system
  • Milestone: v3.7.0

Background and Context

The CleverAgents TUI (built on Textual >= 1.0) requires a consistent, polished visual identity and a user-facing notification mechanism. The Dracula color palette is a widely recognized, high-contrast dark theme that provides excellent readability in terminal environments. Adopting it as the canonical TUI theme ensures visual consistency across all widgets and screens.

In parallel, users interacting with the TUI need real-time feedback for asynchronous operations (e.g., plan execution started, errors encountered, session saved). A toast-style notification system placed in the top-right corner provides non-intrusive, auto-dismissing alerts without interrupting the user's workflow. Notifications must support four severity levels (info, success, warning, error) and be accessible via a dedicated /notifications slash command for review of recent history.

Block cursor navigation replaces the default line cursor to improve visual clarity when navigating lists, tables, and interactive widgets within the TUI.


Expected Behavior

  1. Dracula Theme: All TUI widgets (MainScreen, sidebars, input fields, buttons, tables, modals, status bars) render using the Dracula color palette:

    • Background: #282a36
    • Foreground: #f8f8f2
    • Cyan: #8be9fd
    • Green: #50fa7b
    • Orange: #ffb86c
    • Pink: #ff79c6
    • Purple: #bd93f9
    • Red: #ff5555
    • Yellow: #f1fa8c
  2. Block Cursor Navigation: Interactive widgets use a block cursor (full-cell highlight) instead of a line/underline cursor for navigation.

  3. Notification System:

    • Toast notifications appear in the top-right corner of the screen.
    • Four notification types: info (cyan), success (green), warning (orange/yellow), error (red).
    • Notifications auto-dismiss after 5 seconds (configurable via settings).
    • Users can manually dismiss any notification with Escape.
    • /notifications slash command opens a notification history panel showing all notifications from the current session.

Acceptance Criteria

  • All TUI widgets apply the Dracula color palette exactly as specified (background #282a36, foreground #f8f8f2, and all accent colors).
  • No widget uses colors outside the Dracula palette or the terminal default.
  • Block cursor is used for navigation in all list/table/interactive widgets; line cursor is not visible during navigation.
  • Toast notifications appear in the top-right corner and do not overlap primary content in a disruptive way.
  • info, success, warning, and error notification types each render with their respective Dracula accent color.
  • Notifications auto-dismiss after 5 seconds by default.
  • Auto-dismiss duration is configurable (e.g., via settings.toml or the Settings screen).
  • Pressing Escape while a notification is visible dismisses it immediately.
  • /notifications slash command opens a notification history panel listing all notifications from the current session (type, message, timestamp).
  • Notification history panel is scrollable and dismissible.
  • Unit tests cover: theme color token resolution, notification creation/dismissal, auto-dismiss timer, history retrieval.
  • Integration tests verify notification rendering and slash command routing.
  • Test coverage >= 97% for all new modules.
  • nox passes with no regressions.

Subtasks

  • Theme — Define Dracula color tokens: Create a DraculaTheme class/CSS file defining all nine Dracula color constants and semantic mappings (e.g., primary → purple, error → red, success → green).
  • Theme — Apply to MainScreen: Update MainScreen CSS/styles to use Dracula tokens for background, foreground, borders, and focus highlights.
  • Theme — Apply to sidebar widgets: Update all three sidebar states (hidden/visible/fullscreen) to use Dracula tokens.
  • Theme — Apply to input fields: Style CommandInput, ReferenceInput, and !-mode input with Dracula foreground, background, and cursor colors.
  • Theme — Apply to buttons and modals: Ensure all modal dialogs, confirmation prompts, and action buttons use Dracula accent colors.
  • Theme — Apply to tables and status bars: Update session list tables, status bars, and tab headers with Dracula palette.
  • Block cursor — Implement cursor style override: Override Textual's default cursor style to render as a full-cell block highlight using #bd93f9 (purple) or #f8f8f2 (foreground) on focus.
  • Block cursor — Apply to all navigable widgets: Ensure block cursor is active in ListView, DataTable, OptionList, and any custom navigable widget.
  • Notifications — Define Notification data model: Create Notification dataclass with fields: id, type (info|success|warning|error), message, timestamp, dismissed.
  • Notifications — Implement NotificationManager: Service class responsible for creating, storing, and expiring notifications; exposes notify(), dismiss(), history() methods.
  • Notifications — Implement ToastWidget: Textual widget that renders a single toast notification in the top-right corner with type-appropriate Dracula accent color.
  • Notifications — Implement ToastContainer: Overlay container that stacks multiple ToastWidget instances and manages their layout.
  • Notifications — Auto-dismiss timer: Implement configurable auto-dismiss (default 5 seconds) using Textual's set_timer or equivalent async mechanism.
  • Notifications — Manual dismiss with Escape: Bind Escape key to dismiss the most recently focused or topmost notification.
  • Notifications — /notifications slash command: Register /notifications in the slash command router; implement NotificationHistoryPanel widget displaying session notification log.
  • Notifications — Configuration: Add notification_timeout_seconds (default: 5) to the settings schema and wire it to NotificationManager.
  • Tests — Theme unit tests: Verify all nine Dracula color tokens resolve correctly; verify semantic mappings.
  • Tests — Block cursor tests: Verify cursor style is applied to all navigable widget types.
  • Tests — Notification unit tests: Test notify(), dismiss(), history(), auto-dismiss timer, and manual dismiss.
  • Tests — Notification integration tests: Test toast rendering, slash command routing to history panel, and Escape key binding.
  • Docs — Update TUI developer guide: Document Dracula theme tokens, block cursor behavior, and notification API.

Definition of Done

  • All Acceptance Criteria checkboxes are checked.
  • All Subtasks are completed and reviewed.
  • nox passes with test coverage >= 97% for all new and modified modules.
  • No regressions in existing TUI tests.
  • The Dracula theme, block cursor, and notification system are documented in the TUI developer guide.
  • The feature branch feat/tui-dracula-theme-notifications is merged into the v3.7.0 integration branch via a reviewed and approved pull request.

Automated by CleverAgents Bot
Agent: new-issue-creator

## Metadata - **Branch**: `feat/tui-dracula-theme-notifications` - **Commit message**: `feat(tui): implement Dracula theme color palette and notification system` - **Milestone**: v3.7.0 --- ## Background and Context The CleverAgents TUI (built on Textual >= 1.0) requires a consistent, polished visual identity and a user-facing notification mechanism. The Dracula color palette is a widely recognized, high-contrast dark theme that provides excellent readability in terminal environments. Adopting it as the canonical TUI theme ensures visual consistency across all widgets and screens. In parallel, users interacting with the TUI need real-time feedback for asynchronous operations (e.g., plan execution started, errors encountered, session saved). A toast-style notification system placed in the top-right corner provides non-intrusive, auto-dismissing alerts without interrupting the user's workflow. Notifications must support four severity levels (info, success, warning, error) and be accessible via a dedicated `/notifications` slash command for review of recent history. Block cursor navigation replaces the default line cursor to improve visual clarity when navigating lists, tables, and interactive widgets within the TUI. --- ## Expected Behavior 1. **Dracula Theme**: All TUI widgets (MainScreen, sidebars, input fields, buttons, tables, modals, status bars) render using the Dracula color palette: - Background: `#282a36` - Foreground: `#f8f8f2` - Cyan: `#8be9fd` - Green: `#50fa7b` - Orange: `#ffb86c` - Pink: `#ff79c6` - Purple: `#bd93f9` - Red: `#ff5555` - Yellow: `#f1fa8c` 2. **Block Cursor Navigation**: Interactive widgets use a block cursor (full-cell highlight) instead of a line/underline cursor for navigation. 3. **Notification System**: - Toast notifications appear in the top-right corner of the screen. - Four notification types: `info` (cyan), `success` (green), `warning` (orange/yellow), `error` (red). - Notifications auto-dismiss after 5 seconds (configurable via settings). - Users can manually dismiss any notification with `Escape`. - `/notifications` slash command opens a notification history panel showing all notifications from the current session. --- ## Acceptance Criteria - [ ] All TUI widgets apply the Dracula color palette exactly as specified (background `#282a36`, foreground `#f8f8f2`, and all accent colors). - [ ] No widget uses colors outside the Dracula palette or the terminal default. - [ ] Block cursor is used for navigation in all list/table/interactive widgets; line cursor is not visible during navigation. - [ ] Toast notifications appear in the top-right corner and do not overlap primary content in a disruptive way. - [ ] `info`, `success`, `warning`, and `error` notification types each render with their respective Dracula accent color. - [ ] Notifications auto-dismiss after 5 seconds by default. - [ ] Auto-dismiss duration is configurable (e.g., via `settings.toml` or the Settings screen). - [ ] Pressing `Escape` while a notification is visible dismisses it immediately. - [ ] `/notifications` slash command opens a notification history panel listing all notifications from the current session (type, message, timestamp). - [ ] Notification history panel is scrollable and dismissible. - [ ] Unit tests cover: theme color token resolution, notification creation/dismissal, auto-dismiss timer, history retrieval. - [ ] Integration tests verify notification rendering and slash command routing. - [ ] Test coverage >= 97% for all new modules. - [ ] `nox` passes with no regressions. --- ## Subtasks - [ ] **Theme — Define Dracula color tokens**: Create a `DraculaTheme` class/CSS file defining all nine Dracula color constants and semantic mappings (e.g., `primary → purple`, `error → red`, `success → green`). - [ ] **Theme — Apply to MainScreen**: Update `MainScreen` CSS/styles to use Dracula tokens for background, foreground, borders, and focus highlights. - [ ] **Theme — Apply to sidebar widgets**: Update all three sidebar states (hidden/visible/fullscreen) to use Dracula tokens. - [ ] **Theme — Apply to input fields**: Style `CommandInput`, `ReferenceInput`, and `!`-mode input with Dracula foreground, background, and cursor colors. - [ ] **Theme — Apply to buttons and modals**: Ensure all modal dialogs, confirmation prompts, and action buttons use Dracula accent colors. - [ ] **Theme — Apply to tables and status bars**: Update session list tables, status bars, and tab headers with Dracula palette. - [ ] **Block cursor — Implement cursor style override**: Override Textual's default cursor style to render as a full-cell block highlight using `#bd93f9` (purple) or `#f8f8f2` (foreground) on focus. - [ ] **Block cursor — Apply to all navigable widgets**: Ensure block cursor is active in `ListView`, `DataTable`, `OptionList`, and any custom navigable widget. - [ ] **Notifications — Define `Notification` data model**: Create `Notification` dataclass with fields: `id`, `type` (`info|success|warning|error`), `message`, `timestamp`, `dismissed`. - [ ] **Notifications — Implement `NotificationManager`**: Service class responsible for creating, storing, and expiring notifications; exposes `notify()`, `dismiss()`, `history()` methods. - [ ] **Notifications — Implement `ToastWidget`**: Textual widget that renders a single toast notification in the top-right corner with type-appropriate Dracula accent color. - [ ] **Notifications — Implement `ToastContainer`**: Overlay container that stacks multiple `ToastWidget` instances and manages their layout. - [ ] **Notifications — Auto-dismiss timer**: Implement configurable auto-dismiss (default 5 seconds) using Textual's `set_timer` or equivalent async mechanism. - [ ] **Notifications — Manual dismiss with Escape**: Bind `Escape` key to dismiss the most recently focused or topmost notification. - [ ] **Notifications — `/notifications` slash command**: Register `/notifications` in the slash command router; implement `NotificationHistoryPanel` widget displaying session notification log. - [ ] **Notifications — Configuration**: Add `notification_timeout_seconds` (default: `5`) to the settings schema and wire it to `NotificationManager`. - [ ] **Tests — Theme unit tests**: Verify all nine Dracula color tokens resolve correctly; verify semantic mappings. - [ ] **Tests — Block cursor tests**: Verify cursor style is applied to all navigable widget types. - [ ] **Tests — Notification unit tests**: Test `notify()`, `dismiss()`, `history()`, auto-dismiss timer, and manual dismiss. - [ ] **Tests — Notification integration tests**: Test toast rendering, slash command routing to history panel, and Escape key binding. - [ ] **Docs — Update TUI developer guide**: Document Dracula theme tokens, block cursor behavior, and notification API. --- ## Definition of Done - All Acceptance Criteria checkboxes are checked. - All Subtasks are completed and reviewed. - `nox` passes with test coverage >= 97% for all new and modified modules. - No regressions in existing TUI tests. - The Dracula theme, block cursor, and notification system are documented in the TUI developer guide. - The feature branch `feat/tui-dracula-theme-notifications` is merged into the v3.7.0 integration branch via a reviewed and approved pull request. --- **Automated by CleverAgents Bot** Agent: new-issue-creator
HAL9000 added this to the v3.7.0 milestone 2026-04-14 14:45:10 +00:00
Author
Owner

Triage: Verified [AUTO-OWNR-1]

Valid feature: Dracula theme, block cursor navigation, and notification system are explicitly listed in the v3.7.0 milestone scope: "Dracula theme, block cursor navigation, notification system." This issue provides a comprehensive specification for the Dracula color palette, block cursor implementation, toast notification system, and /notifications slash command.

Assigning to v3.7.0 (TUI Implementation) as this is explicitly in the milestone scope. Priority High — core TUI deliverable.

MoSCoW: Must Have — Dracula theme and notification system are explicitly required by the v3.7.0 milestone scope.


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

✅ **Triage: Verified** [AUTO-OWNR-1] Valid feature: Dracula theme, block cursor navigation, and notification system are explicitly listed in the v3.7.0 milestone scope: "Dracula theme, block cursor navigation, notification system." This issue provides a comprehensive specification for the Dracula color palette, block cursor implementation, toast notification system, and `/notifications` slash command. Assigning to **v3.7.0** (TUI Implementation) as this is explicitly in the milestone scope. Priority **High** — core TUI deliverable. MoSCoW: **Must Have** — Dracula theme and notification system are explicitly required by the v3.7.0 milestone scope. --- **Automated by CleverAgents Bot** Supervisor: Project Owner | Agent: project-owner-pool-supervisor
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
cleveragents/cleveragents-core#9312
No description provided.