Skip to content

feat: composer-centric UI refresh + Hermes Control Center (v0.50.0) - #316

Merged
nesquena-hermes merged 27 commits into
masterfrom
feat/ui-refresh-v0.50.0
Apr 12, 2026
Merged

nesquena-hermes merged 27 commits into
masterfrom
feat/ui-refresh-v0.50.0

Conversation

@nesquena-hermes

Copy link
Copy Markdown
Collaborator

Major UI overhaul from PR #242 by @aronprins, rebased and reviewed on pr-242-review (26 commits on top of current master).

Full review checklist complete:

  • Code reviewed: all innerHTML uses esc(), no XSS vectors, CSS balanced 774/774, all critical functions present
  • Security audit: clean — no eval, no CDN additions, no new shell injection surfaces
  • Tests: 742/742 pass
  • Theme sweep: all 7 themes render correctly (Dark, Light, Slate, Solarized, Monokai, Nord, OLED)
  • Browser QA: 16 checks — zero JS errors throughout, all features verified

Changes:

  • Composer becomes control hub (model/profile/workspace chips in footer, circular context ring)
  • Hermes Control Center replaces gear icon modal (tabbed: Conversation/Preferences/System)
  • Activity bar removed; composer status shows inline
  • Session dropdown (pin/archive/duplicate/move/delete)
  • Workspace panel state machine (closed/browse/preview)
  • OLED theme (7th built-in)
  • Mobile: icon-only chips ≤640px, proper touch targets, overflow fixes

Closes #242.

aronprins and others added 27 commits April 12, 2026 11:12
Move the model selector into the composer footer, replace the linear context pill with a compact circular badge plus tooltip, and remove the redundant topbar model pill.

Design credit and inspiration: Theo / T3 Code.
Reference implementation: https://github.com/pingdotgg/t3code/
Drop the old activity bar, keep turn-scoped state in the composer footer, and route remaining non-chat status messages through toasts.

This leaves live tool cards and the message timeline as the primary progress UI, with the composer owning stop/cancel and brief turn status.
Widen the modal to 860px, simplify the tab list to icon+label rows,
stretch the tab column's divider to full height, lock the panel to a
fixed height so switching tabs no longer resizes the outer shell, and
always open on the Conversation tab.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove the left-border accent used for active, CLI, and project rows —
each state already has a dedicated cue (gold fill, cli badge, project
dot), so the border was redundant. Fully round the row, add 2px
bottom spacing between rows, and strip the matching JS/CSS overrides.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Snap padding, gap, and border-radius values to the 2/4/6/8/10/12 grid
across composer chips, sidebar panels, cron list, settings, approval
buttons, dropdowns, and inline message edit — eliminating the 7/9/11px
drift that was making sibling elements feel subtly misaligned.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ile QA suite)

The mobile layout regression suite (test_mobile_layout.py) requires:
- #btnMobileFiles onclick=toggleMobileFiles() in topbar chips
- .mobile-files-btn CSS rules for responsive show/hide at 640/900px breakpoints

Also adds max-width guard to .profile-dropdown to prevent clipping at narrow viewports.
- Collapse composer chips to icon-only at <=400px viewports
- Add model chip icon (CPU) so it remains tappable when labels are hidden
- Show send button always (disabled state when empty, hidden during streaming)
- Show context usage indicator on session load, not just after streaming
- Add cancel status fallback timeout to prevent stale "Cancelling..." text
- Update tests to match new send button and busy state behavior
Remove redundant #btnMobileFiles button that duplicated #btnWorkspacePanelToggle
in the mobile topbar. Fix workspace panel close button calling undefined
closeMobileFiles() — now calls closeWorkspacePanel().

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove mobile-files-btn class from #btnWorkspacePanelToggle — its
display:none!important rule was overriding workspace-toggle-btn visibility
on non-mobile viewports.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Always show the session actions trigger on mobile (no hover state on
touch devices) and restore right padding so text truncates with
ellipsis before the dots icon.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The "Manage profiles" and "Manage workspaces" links in the composer
footer dropdowns called switchPanel() which only changes the active
panel content but doesn't open the sidebar. Replaced with
mobileSwitchPanel() which also opens the sidebar so the panel is
actually visible.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move the icon-only chip styling up into the existing max-width:768px
media query so chips collapse to icon-only on tablets too, preventing
composer footer overflow on mid-size screens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When overflow-x is set to auto, the CSS spec implicitly changes
overflow-y from visible to auto, allowing a vertical scrollbar to
appear from slight chip padding/border overflow. Explicitly set
overflow-y:hidden to prevent this.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Resolved 4 conflicts during rebase onto master (workspace.js,
  boot.js, index.html, test_sprint34.py)
- Fixed test_sprint34.py: _controlSection -> _settingsSection,
  cc-tab -> settings-tabs (matching actual implementation)
- Fixed quoting syntax error in test assertion

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Major UI overhaul by @aronprins, rebased and reviewed on pr-242-review.

- Composer becomes control hub: model/profile/workspace chips in footer
- Hermes Control Center replaces gear settings modal (tabbed, 3 sections)
- Activity bar removed; status inline in composer footer
- Session ⋯ dropdown replaces inline pin/archive/trash buttons
- Workspace panel state machine (closed/browse/preview)
- Circular context ring (token count, cost, % used)
- OLED theme (7th built-in theme)
- Mobile: icon-only chips at ≤640px, composer overflow-x:auto
- 742 tests pass; README + CHANGELOG updated for v0.50.0

Co-authored-by: Aron Prins <pwf.aron@gmail.com>
@nesquena-hermes
nesquena-hermes merged commit ede1a5f into master Apr 12, 2026
3 checks passed
@nesquena-hermes
nesquena-hermes deleted the feat/ui-refresh-v0.50.0 branch April 12, 2026 18:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants