Commit Graph

9 Commits

Author SHA1 Message Date
Brian Krabach f1c28a4d06 style: sidebar cards use outlined tile aesthetic with gap, rounded corners, and fade gradient 2026-03-28 01:12:27 -07:00
Brian Krabach f41061f85f fix: correct sidebar element IDs, add missing CSS classes, and align test mocks
Three-part consistency defect identified in code review:

1. HTML: Four sidebar elements missing CSS class attributes so all CSS
   rules targeting .session-sidebar, .sidebar-toggle-btn,
   .sidebar-collapse-btn, and .sidebar-list applied to zero elements.
   Added class= attributes to all four.

2. JS: initSidebar(), toggleSidebar(), and bindSidebarClickAway() called
   $('sidebar') and $('collapse-btn') — neither ID exists in the DOM.
   Corrected to $('session-sidebar') and $('sidebar-collapse-btn').

3. Tests: initSidebar/toggleSidebar mocks matched the wrong IDs, masking
   the defect. Updated all six mock conditions to match corrected IDs.

4. Coverage gap: test_html_element_classes did not verify new sidebar
   elements carry CSS classes. Added four entries for session-sidebar,
   sidebar-toggle-btn, sidebar-collapse-btn, and sidebar-list — these
   entries would have caught Defect 1 on Task 1's test run.

All 136 JS + 167 Python tests pass. Zero regressions.
2026-03-27 18:02:29 -07:00
Brian Krabach 67da2e9aa2 feat: add responsive sidebar overlay at <960px and reduced-motion support 2026-03-27 17:00:07 -07:00
Brian Krabach 4e7e461077 feat: add sidebar session card styles 2026-03-27 16:53:51 -07:00
Brian Krabach 599b9a8997 feat: add sidebar container styles and collapse animation 2026-03-27 16:48:09 -07:00
Brian Krabach 0f95f5aab0 feat: add view-body flex layout and --bg-surface variable 2026-03-27 16:44:20 -07:00
Brian Krabach 1023c14480 fix: type-safe Tag guard in test and aria-label on sidebar-collapse-btn 2026-03-27 16:40:51 -07:00
Brian Krabach a3f1e2efd8 feat: add sidebar markup, toggle button, and view-body wrapper to expanded view
- Add #sidebar-toggle-btn to expanded-header (after #back-btn, before #expanded-session-name)
  with aria-label='Toggle session list' and hamburger icon &#9776;
- Wrap #terminal-container in div.view-body
- Add #session-sidebar before #terminal-container inside .view-body, containing:
  - .sidebar-header with .sidebar-title 'Sessions' and #sidebar-collapse-btn (chevron &#8249;)
  - #sidebar-list div
- Keep #reconnect-overlay outside .view-body as sibling inside #view-expanded

Tests added:
- test_html_sidebar_toggle_button: verifies placement, aria-label, and order in header
- test_html_view_body_wrapper: verifies .view-body contains #session-sidebar and #terminal-container
- test_html_reconnect_overlay_outside_view_body: verifies #reconnect-overlay is outside .view-body
- test_html_session_sidebar_structure: verifies full sidebar DOM structure

Co-authored-by: Amplifier <amplifier@amplified.dev>
2026-03-27 16:35:43 -07:00
Brian Krabach 8234e2ec05 refactor: restructure project into muxplex/ subdir with brand integration
- Move coordinator/, frontend/, Caddyfile, pyproject.toml, requirements.txt,
  docs/ into muxplex/ subdir in prep for packaging/sharing
- Add brand assets to frontend/: favicon.ico, pwa-192/512.png,
  apple-touch-icon.png, wordmark-on-dark.svg
- Update app: title → muxplex, header → wordmark SVG, brand color tokens
  in style.css, manifest.json updated with muxplex name and brand icons
- Add design system: assets/branding/tokens.css (101 CSS custom properties),
  tokens.json (127 tokens), DESIGN-SYSTEM.md (856-line spec)
- Add assets/branding/: SVG sources, rendered PNGs (icons, favicons, PWA, OG)
- Add scripts/render-brand-assets.py for reproducible PNG generation
- Add muxplex/README.md
2026-03-27 15:06:00 -07:00