Skip to content

UI redesign: Panel layout with focusable command bar - #1

Merged
jaredpar merged 10 commits into
mainfrom
jaredpar/ui-panel-layout-redesign
Jun 10, 2026
Merged

UI redesign: Panel layout with focusable command bar#1
jaredpar merged 10 commits into
mainfrom
jaredpar/ui-panel-layout-redesign

Conversation

@jaredpar

Copy link
Copy Markdown
Owner

Radical redesign of the interactive dashboard UI to a consistent "command and control" panel layout.

Changes

Core UI Framework

  • PanelRenderer — single class backed by IAnsiConsole for all rendering, input, and layout
  • Consistent panel frame: header breadcrumbs, content area, Tab-focusable command bar
  • [X] bracket hotkey format throughout
  • Partial cursor redraw (only redraws changed lines on navigation)
  • Figlet ASCII tiger branding on main menu

Build Browser

  • Filter edit system renders inside the main panel (not below command bar)
  • Fixed input cursor positioning (was overwriting prompt text)
  • "Failed Helix Work Items" consistent section title with exit code display
  • [T]runcate toggle for detail views

Test Browser

  • Full build URI in "Last Failed Build"
  • Helix exit code + dead letter display
  • [T]runcate toggle matching build browser

Testing

  • 105 tests using Spectre.Console.Testing + SpyConsole
  • Full coverage of cursor positioning, frame rendering, filter workflows

CI

  • Added GitHub Actions PR validation workflow (build + test)

jaredpar and others added 10 commits June 9, 2026 13:28
- Replace all screens with consistent PanelLayout framework (header/content/command bar)
- Add Tab-focusable command bar with [X] bracket-style hotkey display
- Main menu shows Figlet ASCII tiger logo + command bar only (no list)
- Flicker-free list navigation using in-place cursor updates
- Dim gray borders, blue hotkeys for visual hierarchy
- Convert all browsers to CommandBarItem-based command bars
- Remove legacy string-hotkey SelectInPanel overload
- Fix SQLite test isolation (ClearPool in Dispose)
- Update AGENTS.md with full UI conventions documentation

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- BuildBrowser: test list, test detail, test builds, job list, helix work items
- TestBrowser: test detail and test builds now match BuildBrowser's panel style
- Filter menu redesigned with description + current filter in content area
- Filter help uses RenderDetailPanel
- Add BrowserUI.RenderTestDetailInPanel for shared panel-aware test rendering
- Add PanelLayout.BuildCommandBarString for static command bar footers
- Dynamic page size calculation ensures command bar always stays visible

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
RenderDetailPanel now captures content lines and paginates them to fit
the terminal height. When content exceeds available space, a scroll
indicator appears in the footer and Up/Down/PageUp/PageDown keys scroll
the view.

Key changes:
- RenderPanelLine/RenderEmptyLine buffer lines during capture phase
- RenderDetailPanelFrame renders a page of content with padding
- HandleDetailScroll(key) lets callers add scroll support with one line
- All detail views (build, test, helix) now support scrolling

This fixes the Helix section being invisible in test detail views when
error messages and stack traces push it below the terminal height.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Replace all Unicode symbols with ASCII equivalents (they rendered as
  ? in Windows Terminal): arrows, checkmarks, bullets, etc.
- Helix work items in build detail now show: X <work item> <job> <exit code> <deadletter>
- Fix scroll redraw bug: use Console.Clear() + SetCursorPosition(0,0)
  instead of AnsiConsole.Clear() which didn't properly reset
- Truncate long lines in RenderPanelLineDirect to prevent wrapping
  that pushes the frame off-screen

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Delete PanelLayout.cs static facade
- Create PanelRenderer.cs backed by IAnsiConsole for full testability
- Thread PanelRenderer instance through all browser/command classes
- Add PanelRenderer parameter to BrowserUI.RenderTestDetailInPanel
- Add 26 PanelRenderer unit tests using Spectre.Console.Testing
- All rendering, input, cursor, and clear operations go through IAnsiConsole

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Rename section title to 'Failed Helix Work Items' for consistency
- Helix drill-down now uses same format as build summary: X <item> <job> exit <code> <deadletter>
- Add 3 tests verifying helix display format

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…tom border

- Spectre's Cursor.SetPosition passes directly to ANSI CUP (1-based),
  so add +1 to all row calculations for partial redraw
- Remove trailing newline from bottom border to prevent terminal scroll
  when frame fills the screen (which shifts all absolute positions)
- Add SpyConsole test helper that records SetPosition calls
- Add tests verifying correct row targeting (fail without fix, pass with)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Show full AzDO build URL in 'Last Failed Build' field
- Add HelixExitCode to TestDetailInfo, display with color in Helix section
- Add [T]runcate toggle to test detail in both BuildBrowser and TestBrowser
- Add TruncationEnabled property to PanelRenderer for line wrap control

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- PromptInPanel was positioning '> ' cursor at row -4 (prompt line) instead
  of row -3 (empty input line), overwriting text like 'fi' in 'Definition'
- Replaced System.Console with deterministic row counting + IAnsiConsole
  Cursor.SetPosition and Markup for character echo (fully testable now)
- Converted PromptKindFilter to use SelectInPanel (renders in panel)
- Fixed filter menu exit: only Escape returns (not any unhandled key)
- Added 8 tests: PromptInPanel cursor position, text capture, PromptKindFilter

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Simple build + test pipeline for pull requests and pushes to main.
Uses .NET 10 preview SDK on ubuntu-latest.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@jaredpar
jaredpar merged commit 4191672 into main Jun 10, 2026
1 check passed
@jaredpar
jaredpar deleted the jaredpar/ui-panel-layout-redesign branch June 10, 2026 17:17
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.

1 participant