hermes - ✅(Solved) Fix [Feature]: Configurable TUI status bar: fields, layout, and skin color support [1 pull requests, 1 participants]

TtTRz · 2026-04-21T12:06:29Z

[hermes] PR 13892: feat tui : configurable status bar fields, skin colors, and interactive picker - Repository: NousResearch/hermes-agent - Author: TtTRz - Sta… # PR #13892: feat(tui): configurable status bar fields, skin colors, and interactive picker - Repository: NousResearch/hermes-agent - Author: TtTRz - State: open | merged: False - Link: https://github.com/NousResearch/hermes-agent/pull/13892 ## Description (problem / solution / changelog) ## What does this PR do? Makes the TUI status bar fully configurable: skin-aware colors, customizable field visibility/ordering via an interactive picker, and persistent separator config. Previously the status bar hardcoded its layout, field order, and colors. Users who wanted a minimal UI could only toggle the entire bar off with `/statusbar`. Now they can hide/reorder individual fields, choose which side they appear on (flex left vs pinned right), and skin authors can theme status bar colors. ## Related Issue Fixes #13490 ## Type of Change - [X] ✨ New feature (non-breaking change that adds functionality) ## Changes Made **Phase 1: Skin color support** (`ui-tui/src/theme.ts`, `hermes_cli/skin_engine.py`) - Wire `status_bar_bg`, `status_bar_fg`, `status_bad`, `status_critical` skin keys through `fromSkin()` so TUI status bar colors respect the active skin - Add values to `daylight` and `warm-lightmode` built-in skins **Phase 2: Field customization** (`hermes_cli/config.py`, `tui_gateway/server.py`, `ui-tui/src/components/appChrome.tsx`, `ui-tui/src/app/useConfigSync.ts`, `ui-tui/src/gatewayTypes.ts`, `ui-tui/src/app/interfaces.ts`, `ui-tui/src/app/uiStore.ts`, `ui-tui/src/components/appLayout.tsx`) - Add `display.tui_statusbar` config section with `enabled`, `fields_left`, `fields_right`, `separator` - Two-column layout: left (flex, truncatable) and right (pinned, always visible) - Backward-compatible: `tui_statusbar` accepts both `boolean` and `object` formats; `fields` key maps to `fields_left` as fallback - Config version bumped to 23 for migration **Phase 3: Interactive field picker** (`ui-tui/src/components/statusFieldPicker.tsx`, `ui-tui/src/components/appOverlays.tsx`, `ui-tui/src/app/overlayStore.ts`) - `StatusFieldPicker` overlay with dual-column layout (Left flex / Right pinned) - Controls: `↑/↓` select, `←/→` switch column, `a` add field, `d` delete, `Shift+↑/↓` reorder, `Enter` confirm, `r` reset, `Esc` cancel - Persisted via `config.set` RPC to `display.tui_statusbar` **Slash commands** (`ui-tui/src/app/slash/commands/core.ts`, `cli.py`, `hermes_cli/commands.py`) - `/statusbar config` — opens interactive picker (TUI only) - `/statusbar config reset` — reset fields to defaults (TUI only) - `/statusbar separator ` — set separator string (CLI + TUI) - `/statusbar` — toggle on/off (unchanged) **Tests** (`tests/tui_gateway/test_protocol.py`, `tests/hermes_cli/test_config.py`) - 5 tests for `config.set` statusbar handler (fields_left, fields_right, separator, boolean→dict conversion, toggle preserves dict) - 2 tests for DEFAULT_CONFIG tui_statusbar structure **Docs** (`AGENTS.md`) - Updated Key Surfaces table with status bar and field picker entries - Updated Skin keys table with status_bar_bg/fg/bad/critical - Updated `_config_version` number (5 → 23) ## How to Test 1. Start TUI with `hermes --tui`, run `/statusbar config` — verify the StatusFieldPicker overlay opens with dual-column layout 2. Use `a` to add a field from available pool, `d` to delete selected, `←/→` to switch columns, `Shift+↑/↓` to reorder — press `Enter` to confirm and verify the status bar updates immediately 3. Run `/statusbar separator " · "` — verify separator changes in the status bar; run `/statusbar separator` to view current value 4. Run `/statusbar` — verify toggle on/off still works 5. In CLI mode, run `/statusbar separator " · "` — verify it persists to config.yaml 6. Switch skin with `/skin daylight` — verify status bar colors change accordingly 7. Run `pytest tests/tui_gateway/test_protocol.py tests/hermes_cli/test_config.py -q` — verify 7 new statusbar tests pass ## Checklist ### Code - [X] I've read the [Contributing Guide](https://github.com/NousResearch/hermes-agent/blob/main/CONTRIBUTING.md) - [X] My commit messages follow [Conventional Commits](https://www.conventionalcommits.org/) (`fix(scope):`, `feat(scope):`, etc.) - [X] I searched for [existing PRs](https://github.com/NousResearch/hermes-agent/pulls) to make sure this isn't a duplicate - [X] My PR contains **only** changes related to this fix/feature (no unrelated commits) - [X] I've run `pytest tests/ -q` and all tests pass - [X] I've added tests for my changes (required for bug fixes, strongly encouraged for features) - [X] I've tested on my platform: macOS 26.4 ### Documentation & Housekeeping - [X] I've updated relevant documentation (README, `docs/`, docstrings) — or N/A - [X] I've updated `cli-config.yaml.example` if I added/changed config keys — or N/A - [X] I've updated `CONTRIBUTING.md` or `AGENTS.md`

hermes2026-04-21 12:06:29

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

NousResearch/hermes-agent#13490•Fetched 2026-04-22 08:06:06

View on GitHub

Comments

Participants

Timeline

Reactions

Author

TtTRz

Participants

TtTRz

Timeline (top)

cross-referenced ×1labeled ×1

Code Example

display:
  tui_statusbar:
    enabled: true
    fields_left:
      - status
      - model
      - context
      - context_bar
      - duration
      - voice
      - bg
      - cost
    fields_right:
      - cwd
    separator: " │ "

---

RAW_BUFFERClick to expand / collapse

Problem or Use Case

The TUI status bar currently hardcodes its layout, field order, and color keys. Users who want a minimal UI cannot hide individual fields (e.g. context bar, cost), and skin authors cannot theme the status bar background via status_bar_bg.

I use a light terminal with a custom skin, but the status bar keeps the default dark background (#1a1a2e), creating a jarring contrast. Additionally, I'd like to hide the cost and voice labels to reduce visual noise, but the only option is to toggle the entire bar off with /statusbar.

Specifically:

Layout is hardcoded — fields appear in a fixed order with fixed separators. Users cannot reorder, hide, or reformat individual items.
Skin integration is incomplete — status_bar_bg and status_bar_fg defined in skin YAML are not consumed by the TUI component (appChrome.tsx). This breaks visual consistency when users switch skins.
Binary choice only — the only control is /statusbar on|off. There is no middle ground for users who want the bar but without specific fields (e.g. hide $cost for privacy, or hide voiceLabel when voice is unused).

Proposed Solution

Phase 1: Skin color support ✅ Done

Add statusBarBg / statusBarFg to Theme and ThemeColors in ui-tui/src/theme.ts.
Update fromSkin() to map status_bar_bg / status_bar_fg / status_bad / status_critical from skin YAML.
Pass the colors into StatusRule so the bar background and text are skin-aware.

Phase 2: Field customization ✅ Done

Introduce display.tui_statusbar config section:

display:
  tui_statusbar:
    enabled: true
    fields_left:
      - status
      - model
      - context
      - context_bar
      - duration
      - voice
      - bg
      - cost
    fields_right:
      - cwd
    separator: " │ "

StatusRule in ui-tui/src/components/appChrome.tsx consumes fields_left/fields_right lists for two-column layout.
Left column: flex, truncatable. Right column: pinned, always visible.
Unknown fields are ignored; empty/null falls back to defaults.
/statusbar remains the master on/off switch. Sub-commands:
- /statusbar config — opens interactive StatusFieldPicker overlay
- /statusbar config reset — reset fields to defaults
- /statusbar separator <sep> — set separator string

Phase 3: Interactive field picker ✅ Done

StatusFieldPicker component (ui-tui/src/components/statusFieldPicker.tsx)
Dual-column flat layout: Left (flex) / Right (pinned)
Controls:
- ↑/↓ select field
- ←/→ switch between left/right column
- a add field (from available pool)
- d delete selected field
- Shift+↑/↓ reorder within column
- Enter confirm, r reset, Esc cancel
Persisted via config.set RPC to display.tui_statusbar

Alternatives Considered

Only add /statusbar fields flags (e.g. /statusbar hide cost) — works but is ephemeral; users want persistent config.
Do nothing and let users fork — against the goal of the skin engine being data-driven and zero-code.

Feature Type

CLI improvement

Scope

None

Contribution

I'd like to implement this myself and submit a PR

Debug Report (optional)

extent analysis

TL;DR

To address the issue of the TUI status bar's hardcoded layout and incomplete skin integration, implement the proposed solution's phases, focusing on adding skin color support and field customization through the display.tui_statusbar config section.

Guidance

Review the proposed solution's phases to understand the steps needed to implement skin color support and field customization.
Update the Theme and ThemeColors in ui-tui/src/theme.ts to include statusBarBg and statusBarFg, and map skin YAML values to these properties.
Introduce the display.tui_statusbar config section to allow users to customize the status bar fields and separator.
Implement the StatusFieldPicker component to provide an interactive way for users to customize the status bar fields.

Example

display:
  tui_statusbar:
    enabled: true
    fields_left:
      - status
      - model
      - context
    fields_right:
      - cwd
    separator: " │ "

This example shows how to configure the status bar to display specific fields on the left and right sides, with a custom separator.

Notes

The proposed solution has already been implemented, as indicated by the "✅ Done" markers. However, this guidance assumes that the implementation may not be fully complete or that additional tweaks are needed to address the issue fully.

Recommendation

Apply the proposed workaround by implementing the remaining parts of the solution, if any, to provide users with the desired level of customization for the TUI status bar. This approach allows for a more flexible and user-friendly experience.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#database connection #vector store #embedding generation #cache error #pipeline error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

hermes - ✅(Solved) Fix [Feature]: Configurable TUI status bar: fields, layout, and skin color support [1 pull requests, 1 participants]

Recommended Tools

GitHub issue graph ai analysis

PR fix notes

PR #13892: feat(tui): configurable status bar fields, skin colors, and interactive picker

Description (problem / solution / changelog)

What does this PR do?

Related Issue

Type of Change

Changes Made

How to Test

Checklist

Code

Documentation & Housekeeping

Screenshots / Logs

Changed files