Brian Krabach
f41061f85f
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.
85 lines
5.0 KiB
HTML
85 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<meta name="theme-color" content="#0D1117" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<title>muxplex</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ── Overview view ─────────────────────────────────────────────────────── -->
|
|
<div id="view-overview" class="view view--active">
|
|
<header class="app-header">
|
|
<h1 class="app-wordmark"><img src="/wordmark-on-dark.svg" alt="muxplex" height="24" /></h1>
|
|
<span id="connection-status"></span>
|
|
</header>
|
|
<div id="session-grid" class="session-grid" role="list"></div>
|
|
<div id="empty-state" class="empty-state hidden">No active tmux sessions</div>
|
|
</div>
|
|
|
|
<!-- ── Expanded (terminal) view ──────────────────────────────────────────── -->
|
|
<div id="view-expanded" class="view hidden">
|
|
<header class="expanded-header">
|
|
<button id="back-btn" class="back-btn" aria-label="Back">←</button>
|
|
<button id="sidebar-toggle-btn" class="sidebar-toggle-btn" aria-label="Toggle session list">☰</button>
|
|
<span id="expanded-session-name" class="expanded-session-name"></span>
|
|
<button id="palette-trigger" class="palette-trigger" aria-label="Open command palette">⌘K</button>
|
|
</header>
|
|
<div class="view-body">
|
|
<div id="session-sidebar" class="session-sidebar">
|
|
<div class="sidebar-header">
|
|
<span class="sidebar-title">Sessions</span>
|
|
<button id="sidebar-collapse-btn" class="sidebar-collapse-btn" aria-label="Collapse session list">‹</button>
|
|
</div>
|
|
<div id="sidebar-list" class="sidebar-list"></div>
|
|
</div>
|
|
<div id="terminal-container" class="terminal-container"></div>
|
|
</div>
|
|
<div id="reconnect-overlay" class="reconnect-overlay hidden" aria-live="polite">Reconnecting…</div>
|
|
</div>
|
|
|
|
<!-- ── Command palette ───────────────────────────────────────────────────── -->
|
|
<div id="command-palette" class="command-palette hidden" role="dialog" aria-modal="true" aria-label="Switch session">
|
|
<div class="command-palette__backdrop" id="palette-backdrop"></div>
|
|
<div class="command-palette__dialog">
|
|
<input id="palette-input" class="command-palette__input" type="text"
|
|
placeholder="Jump to session…" autocomplete="off" spellcheck="false">
|
|
<ul id="palette-list" class="command-palette__list" role="listbox" aria-label="Sessions"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Bottom sheet (session switcher) ───────────────────────────────────── -->
|
|
<div id="bottom-sheet" class="bottom-sheet hidden" role="dialog" aria-modal="true" aria-label="Switch session">
|
|
<div class="bottom-sheet__backdrop" id="sheet-backdrop"></div>
|
|
<div class="bottom-sheet__panel">
|
|
<div class="bottom-sheet__handle" aria-hidden="true"></div>
|
|
<ul id="sheet-list" class="bottom-sheet__list" role="listbox" aria-label="Sessions"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Session pill (persistent overlay button) ──────────────────────────── -->
|
|
<button id="session-pill" class="session-pill hidden" aria-label="Switch session">
|
|
<span id="session-pill-label" class="session-pill__label"></span>
|
|
<span id="session-pill-bell" class="session-pill__bell hidden" aria-hidden="true">🔔</span>
|
|
</button>
|
|
|
|
<!-- ── Toast notification ─────────────────────────────────────────────────── -->
|
|
<div id="toast" class="toast hidden" role="status" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
<!-- ── Scripts ─────────────────────────────────────────────────────────────── -->
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
|
|
<script src="/app.js" defer></script>
|
|
<script src="/terminal.js" defer></script>
|
|
</body>
|
|
</html>
|