diff --git a/src/main.rs b/src/main.rs
index 06f018b9..86f1e0b3 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1396,7 +1396,13 @@ async fn run_server(config: Config, database: Db) {
         .route("/reports.html", get(serve_branded_page))
         .route("/admin.html", get(serve_branded_page))
         .route("/tokens.html", get(serve_branded_page))
-        .route("/docs.html", get(serve_branded_page));
+        .route("/docs.html", get(serve_branded_page))
+        // Optional auth only: an anonymous request still gets the page (the
+        // page itself sends the user to log in), but a logged-in one gets
+        // the variant with its navigation already right.
+        .layer(middleware::from_fn(auth::optional_auth))
+        .layer(Extension(ws_ticket_store.clone()))
+        .layer(Extension(database.clone()));
 
     // Build full router (all Router<()> at this point)
     let mut app: Router<()> = Router::new()
@@ -1582,23 +1588,63 @@ fn build_guacd_tls(config: &Config) -> Option<tokio_rustls::TlsConnector> {
     Some(tokio_rustls::TlsConnector::from(Arc::new(tls_config)))
 }
 
-/// One pre-branded HTML page and the ETag its bytes hash to.
+/// One pre-branded HTML page, in one variant per role level, each with the
+/// ETag its bytes hash to.
 ///
 /// The pages are branded once at startup and cannot change until a restart,
-/// so the tag is computed there too -- serving one is a string compare.
+/// so the tags are computed there too -- serving one is a string compare.
+///
+/// The variants differ only in the `data-role-level` attribute written on
+/// `<html>`: the stylesheet gates navigation links and admin-only controls on
+/// it, so the header is right on first paint for whoever the page is served
+/// to, instead of hiding everything gated and showing it after `/api/me`
+/// answers, which flashed and reflowed on every navigation.
 struct BrandedPage {
+    /// Indexed by role level, 0 (anonymous) to 4 (admin).
+    variants: Vec<BrandedVariant>,
+}
+
+struct BrandedVariant {
     html: String,
     etag: String,
 }
 
+/// Highest role level, the index of the last page variant.
+const MAX_ROLE_LEVEL: u8 = 4;
+
 impl BrandedPage {
     fn new(html: String) -> Self {
         use sha2::{Digest, Sha256};
-        // Quoted, because an ETag is a quoted-string on the wire. A bare hash
-        // tends to be ignored rather than rejected, which would look exactly
-        // like the stale-cache bug this exists to fix.
-        let etag = format!("\"{}\"", hex::encode(Sha256::digest(html.as_bytes())));
-        Self { html, etag }
+        let variants = (0..=MAX_ROLE_LEVEL)
+            .map(|level| {
+                let html = role_variant_html(&html, level);
+                // Quoted, because an ETag is a quoted-string on the wire. A
+                // bare hash tends to be ignored rather than rejected, which
+                // would look exactly like the stale-cache bug this exists to
+                // fix.
+                let etag = format!("\"{}\"", hex::encode(Sha256::digest(html.as_bytes())));
+                BrandedVariant { html, etag }
+            })
+            .collect();
+        Self { variants }
+    }
+
+    fn variant(&self, level: u8) -> &BrandedVariant {
+        &self.variants[level.min(MAX_ROLE_LEVEL) as usize]
+    }
+}
+
+/// Write the caller's role level onto the page's `<html>` tag. A page that
+/// has no bare `<html>` start tag is returned unchanged. Extracted for test.
+fn role_variant_html(html: &str, level: u8) -> String {
+    match html.find("<html>") {
+        Some(i) => format!(
+            "{}<html data-role-level=\"{}\">{}",
+            &html[..i],
+            level,
+            &html[i + "<html>".len()..]
+        ),
+        None => html.to_string(),
     }
 }
 
@@ -1624,10 +1670,15 @@ fn etag_matches(if_none_match: &str, etag: &str) -> bool {
 /// costs a 304 and a rebuilt one lands on the next load. Without it these
 /// responses carry no freshness information at all and Chrome caches them
 /// heuristically, serving a stale page long after a restart.
-fn page_response(page: &BrandedPage, headers: &axum::http::HeaderMap) -> axum::response::Response {
+fn page_response(
+    page: &BrandedPage,
+    level: u8,
+    headers: &axum::http::HeaderMap,
+) -> axum::response::Response {
     use axum::http::{header, StatusCode};
     use axum::response::IntoResponse;
 
+    let page = page.variant(level);
     let cache_headers = [
         (header::CACHE_CONTROL, "no-cache"),
         (header::ETAG, page.etag.as_str()),
@@ -1745,7 +1796,12 @@ fn asset_hash(
     if !url.starts_with('/') || url.starts_with("//") || url.contains('?') || url.contains('#') {
         return None;
     }
-    if !(url.ends_with(".js") || url.ends_with(".css")) {
+    if !(url.ends_with(".js")
+        || url.ends_with(".css")
+        || url.ends_with(".svg")
+        || url.ends_with(".png")
+        || url.ends_with(".ico"))
+    {
         return None;
     }
     let rel = url.trim_start_matches('/');
@@ -1774,14 +1830,21 @@ fn asset_hash(
 /// Serve a branded HTML page from the pre-processed in-memory map.
 async fn serve_branded_page(
     Extension(pages): Extension<BrandedPages>,
+    identity: Option<Extension<auth::AuthIdentity>>,
     request: axum::extract::Request,
 ) -> axum::response::Response {
     use axum::http::StatusCode;
     use axum::response::IntoResponse;
     let path = request.uri().path().trim_start_matches('/');
     let key = if path.is_empty() { "index.html" } else { path };
+    // Whoever the page is for decides which navigation it carries. An API-key
+    // user sends no credential on the page GET and gets the anonymous
+    // variant; the page reconciles that from /api/me.
+    let level = identity
+        .map(|Extension(id)| auth::role_level(id.role()))
+        .unwrap_or(0);
     match pages.get(key) {
-        Some(page) => page_response(page, request.headers()),
+        Some(page) => page_response(page, level, request.headers()),
         None => StatusCode::NOT_FOUND.into_response(),
     }
 }
@@ -1794,7 +1857,7 @@ async fn serve_client_page(
 ) -> axum::response::Response {
     use axum::response::IntoResponse;
     match pages.get("client.html") {
-        Some(page) => page_response(page, &headers),
+        Some(page) => page_response(page, 0, &headers),
         // Unreachable: the map always carries the embedded copy.
         None => Html(include_str!("../static/client.html")).into_response(),
     }
@@ -1835,6 +1898,27 @@ mod tests {
 
     use super::*;
 
+    #[test]
+    fn role_variant_writes_level_on_html_tag_only() {
+        let page = "<!DOCTYPE html>\n<html>\n<head><title>x</title></head><body><html>text</html></body></html>";
+        let v = role_variant_html(page, 4);
+        assert!(v.starts_with("<!DOCTYPE html>\n<html data-role-level=\"4\">\n<head>"));
+        // only the first bare start tag is touched; the literal later on is content
+        assert_eq!(v.matches("data-role-level").count(), 1);
+        assert_eq!(
+            role_variant_html("<p>no html tag</p>", 2),
+            "<p>no html tag</p>"
+        );
+        let branded = BrandedPage::new(page.to_string());
+        assert_eq!(branded.variants.len(), 5);
+        assert_ne!(branded.variant(0).etag, branded.variant(4).etag);
+        assert_eq!(
+            branded.variant(9).etag,
+            branded.variant(4).etag,
+            "levels clamp to admin"
+        );
+    }
+
     #[test]
     fn test_csp_allows_data_and_blob_images() {
         // Safari and Firefox draw Guacamole image streams through data: URIs
@@ -1870,6 +1954,21 @@ mod tests {
         assert!(out.ends_with("></script>"));
     }
 
+    #[test]
+    fn test_version_assets_versions_the_logo() {
+        // The logo used to be revalidated on every page load, which blanked
+        // it for a moment on each navigation in some browsers. It is content
+        // addressed like the scripts now.
+        let static_path = std::path::Path::new("static");
+        let mut hashes = std::collections::HashMap::new();
+        let out = version_assets(
+            "<img id=\"site-logo\" src=\"/logo.svg\" alt=\"\">",
+            static_path,
+            &mut hashes,
+        );
+        assert!(out.contains("src=\"/logo.svg?v="), "{out}");
+    }
+
     #[test]
     fn test_version_assets_leaves_everything_else_alone() {
         let static_path = std::path::Path::new("static");
@@ -1880,8 +1979,8 @@ mod tests {
             "<script src=\"//cdn.example/x.js\"></script>",
             // Already says something about this URL.
             "<script src=\"/guac/Client.js?debug=1\"></script>",
-            // Not a kind that goes stale behind a stable name.
-            "<img src=\"/logo.svg\">",
+            // Not a kind we version (a page, a download).
+            "<a href=\"/docs.html\">",
             // No such file: a hash of nothing is worse than none.
             "<script src=\"/guac/NoSuchFile.js\"></script>",
             // Traversal, which these paths have no business doing.
@@ -1931,6 +2030,7 @@ mod tests {
     fn test_branded_page_etag_tracks_content() {
         let a = BrandedPage::new("<html>one</html>".to_string());
         let b = BrandedPage::new("<html>two</html>".to_string());
+        let (a, b) = (a.variant(0), b.variant(0));
         assert_ne!(a.etag, b.etag);
         // Quoted, or caches ignore it.
         assert!(a.etag.starts_with('"') && a.etag.ends_with('"'));
diff --git a/static/admin.html b/static/admin.html
index 5dea3b79..c67657e8 100644
--- a/static/admin.html
+++ b/static/admin.html
@@ -16,12 +16,13 @@ <h1>rustguac</h1>
     </div>
     <nav>
         <a href="/connections.html">Connections</a>
-        <a href="/sessions.html" id="sessions-link">Sessions</a>
+        <a href="/sessions.html" id="sessions-link" data-min-role="poweruser">Sessions</a>
         <a href="/recordings.html">Recordings</a>
-        <a href="/reports.html" id="reports-link" style="display:none">Reports</a>
+        <a href="/reports.html" id="reports-link" data-min-role="poweruser">Reports</a>
         <a href="/docs.html">Docs</a>
-        <a href="/tokens.html">Tokens</a>
-        <a href="/admin.html" class="active">Admin</a>
+        <a href="/tokens.html" id="tokens-link" data-min-role="operator">Tokens</a>
+        <a href="/admin.html" class="active" id="admin-link" data-min-role="admin">Admin</a>
+        <a href="/connections.html#my-credentials" id="my-creds-nav" title="Manage your saved credential variables"><span class="nav-key">&#128273;</span> Credentials</a>
         <span id="user-menu-wrapper"><a href="#" id="logout-item">Logout</a><span id="user-menu-btn" title="Preferences">&#9881; Settings</span><div id="user-menu"><div class="um-section-label">Theme</div><div id="um-theme-list"></div></div></span>
     </nav>
 
@@ -155,6 +156,7 @@ <h2>Connections Audit Log</h2>
                 return res.json();
             })
             .then(function(data) {
+                if (data && data.role) document.documentElement.setAttribute('data-role-level', String({admin:4,poweruser:3,operator:2,viewer:1}[data.role] || 0));
                 if (!data || data.role !== 'admin') {
                     window.location.href = '/connections.html';
                     return;
diff --git a/static/connections.html b/static/connections.html
index 4b0f0b24..7ec87d3c 100644
--- a/static/connections.html
+++ b/static/connections.html
@@ -216,8 +216,6 @@
             display: flex; gap: var(--s-1); align-items: center;
         }
         .session-card-info .card-meta .type-badge { font-size: 10px; min-width: 36px; }
-        /* Proxmox VE brand orange badge */
-        .type-badge.type-proxmox { background: #e57000; color: #000; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
         .session-card.dormant { opacity: 0.75; }
         .session-card.dormant .session-card-thumb { filter: brightness(0.7); }
         .card-actions {
@@ -535,6 +533,78 @@
         .folder-list li.filtered-out { display: none; }
         .folder-row:focus { outline: none; }
         .folder-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+        /* UX (#254) app shell: the header stays put, the sidebar and the
+           entries area are two independent scroll panes that always fit the
+           viewport. The earlier sticky sidebar was sized from the viewport,
+           not from where it starts below the header, so at the top of the
+           page its bottom hung off screen and the page had to be scrolled
+           before the list could be scrolled to its end. */
+        html, body { height: 100%; }
+        /* overflow: clip, not hidden: hidden still lets scripts scroll the
+           body (scrollIntoView on anything inside), which moved the header
+           out of view; clip makes the body unscrollable for good. The border
+           box is the full height so the page padding is inside the viewport. */
+        body { display: flex; flex-direction: column; overflow: clip; min-height: 0; box-sizing: border-box; }
+        #main-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+        #main-content > :not(.layout) { flex: none; }
+        .layout { flex: 1 1 auto; min-height: 0; align-items: stretch; }
+        .sidebar {
+            position: static; top: auto; align-self: auto;
+            max-height: none; height: auto; min-height: 0;
+            display: flex; flex-direction: column;
+            overflow-y: auto; overflow-x: hidden;
+            padding: 0; margin: 0;
+            border: 1px solid var(--border); border-radius: var(--radius);
+            background: rgba(255,255,255,0.015);
+        }
+        .main { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: var(--s-2); }
+        /* The folder header (name, description, search, actions, filters)
+           pins to the top of the entries pane, so it stays under the nav and
+           the active-sessions strip while a long table scrolls beneath it. */
+        #entries-header {
+            position: sticky; top: 0; z-index: 30;
+            background: var(--bg);
+            padding-bottom: var(--s-2);
+            margin-bottom: var(--s-2);
+            box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.6);
+        }
+        #entries-header .folder-actions { margin-bottom: 0; }
+        #entries-header #entries-filters { margin: var(--s-2) 0 0 0; }
+
+        /* Sidebar panel: one pinned header band (label, new-folder button,
+           filter) on a surface tone, then the list with hairline dividers.
+           Every band shares the same 12px horizontal padding so edges line up. */
+        .sidebar-pin {
+            background: var(--surface);
+            border-bottom: 1px solid var(--border);
+            padding: var(--s-2) var(--s-3);
+            gap: var(--s-2);
+        }
+        .sidebar-pin .sidebar-header {
+            margin: 0; padding: 0; border: 0;
+            min-height: 30px;
+            justify-content: space-between;
+        }
+        .sidebar-pin .sidebar-header strong { font-size: var(--fz-xs); letter-spacing: 0.14em; }
+        #btn-new-folder { height: 30px; padding: 0 var(--s-2); font-size: var(--fz-xs); }
+        #sidebar-tools { margin: 0; }
+        #sidebar-tools:not(:empty) { padding-bottom: 0; }
+        #folder-filter {
+            height: 34px; font-size: var(--fz-sm);
+            background: var(--bg); border: 1px solid var(--border);
+        }
+        .folder-list { padding: var(--s-1) 0 var(--s-2); }
+        .folder-list > li { margin: 0; }
+        .folder-list > li + li > .folder-row { border-top: 1px solid rgba(255,255,255,0.045); }
+        .folder-row {
+            padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) - 3px);
+            min-height: 46px;
+        }
+        .folder-list li.selected > .folder-row { border-top-color: transparent; }
+        .folder-row-main { gap: 2px; }
+        .folder-desc { font-size: 12px; }
+        .tree-children { margin-left: var(--s-3) !important; }
     </style>
     <script>(function(){var c=localStorage.getItem('rustguac_theme_colors');if(c){try{var o=JSON.parse(c),r=document.documentElement.style;for(var k in o)r.setProperty('--'+k.replace(/_/g,'-'),o[k]);if(o.bg_pattern&&o.bg_pattern!=='none'){var s=document.createElement('style');s.id='bg-pattern-style';s.textContent='body{background-image:'+o.bg_pattern+';background-attachment:fixed}';document.head.appendChild(s)}}catch(e){}}})();</script>
 </head>
@@ -545,13 +615,13 @@ <h1>rustguac</h1>
     </div>
     <nav>
         <a href="/connections.html" class="active">Connections</a>
-        <a href="/sessions.html" id="sessions-link">Sessions</a>
+        <a href="/sessions.html" id="sessions-link" data-min-role="poweruser">Sessions</a>
         <a href="/recordings.html">Recordings</a>
-        <a href="/reports.html" id="reports-link" style="display:none">Reports</a>
+        <a href="/reports.html" id="reports-link" data-min-role="poweruser">Reports</a>
         <a href="/docs.html">Docs</a>
-        <a href="/tokens.html" id="tokens-link" style="display:none">Tokens</a>
-        <a href="/admin.html" id="admin-link" style="display:none">Admin</a>
-        <a href="#" id="my-creds-nav" title="Manage your saved credential variables">&#128273; Credentials</a>
+        <a href="/tokens.html" id="tokens-link" data-min-role="operator">Tokens</a>
+        <a href="/admin.html" id="admin-link" data-min-role="admin">Admin</a>
+        <a href="#" id="my-creds-nav" title="Manage your saved credential variables"><span class="nav-key">&#128273;</span> Credentials</a>
         <span id="user-menu-wrapper">
             <a href="#" id="logout-item">Logout</a>
             <span id="user-menu-btn" title="Preferences">&#9881; Settings</span>
@@ -621,6 +691,7 @@ <h3>No folders yet</h3>
                         <button class="btn-small admin-only" id="btn-edit-folder" style="display:none" title="Edit folder settings">edit folder</button>
                         <button class="btn-small admin-only" id="btn-delete-folder" style="display:none" title="Delete folder and all entries">delete folder</button>
                     </div>
+                    <div id="entries-filters" class="list-tools"></div>
                 </div>
                 <div id="entries-content">
                     <p class="empty">Select a folder to view entries.</p>
@@ -1274,7 +1345,8 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
         </div>
     </div>
 
-    <script>
+<script src="/filters.js"></script>
+        <script>
         function togglePw(btn){var inp=btn.previousElementSibling;if(inp.type==='password'){inp.type='text';btn.textContent='\u25CB'}else{inp.type='password';btn.textContent='\u25CF'}}
         function applyThemeColors(colors){var r=document.documentElement.style;for(var k in colors)r.setProperty('--'+k.replace(/_/g,'-'),colors[k]);var s=document.getElementById('bg-pattern-style');if(!s){s=document.createElement('style');s.id='bg-pattern-style';document.head.appendChild(s)}s.textContent=colors.bg_pattern&&colors.bg_pattern!=='none'?'body{background-image:'+colors.bg_pattern+';background-attachment:fixed}':'';localStorage.setItem('rustguac_theme_colors',JSON.stringify(colors))}
         var _themePresets={},_adminPreset='aurora';
@@ -1601,7 +1673,7 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
                 method: 'POST',
                 headers: Object.assign({'Content-Type': 'application/json'}, apiHeaders()),
                 credentials: 'same-origin',
-                body: JSON.stringify({ width: window.innerWidth, height: window.innerHeight })
+                body: JSON.stringify({ width: window.innerWidth, height: window.innerHeight, screen_width: screen.width, screen_height: screen.height })
             })
             .then(function(res) { return res.json(); })
             .then(function(data) {
@@ -1673,6 +1745,9 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
                 isAdmin = data.role === 'admin';
                 currentUserRole = data.role || 'viewer';
                 var level = roleLevel[data.role] || 0;
+                // Reconcile the server-written nav gate (see rustguac.css): the page
+                // GET carried no API key, so key users arrive on the anonymous variant.
+                document.documentElement.setAttribute('data-role-level', String((typeof apiKey !== 'undefined' && apiKey) ? 4 : level));
                 if (level < 3) {
                     document.getElementById('sessions-link').style.display = 'none';
                 }
@@ -1688,6 +1763,8 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
                     document.getElementById('tokens-link').style.display = '';
                 }
                 if (apiKey) {
+                    // A key is never on the page GET, so the server served the anonymous variant.
+                    document.documentElement.setAttribute('data-role-level', '4');
                     document.getElementById('admin-link').style.display = '';
                     document.getElementById('tokens-link').style.display = '';
                 }
@@ -1895,7 +1972,7 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
                                     method: 'POST',
                                     headers: Object.assign({'Content-Type': 'application/json'}, apiHeaders()),
                                     credentials: 'same-origin',
-                                    body: JSON.stringify({ width: window.innerWidth, height: window.innerHeight })
+                                    body: JSON.stringify({ width: window.innerWidth, height: window.innerHeight, screen_width: screen.width, screen_height: screen.height })
                                 }).then(function(res) { return res.json(); }).then(function(data) {
                                     if (data.session_id) window.open('/client/' + data.session_id, '_blank');
                                     else showError(data.error || 'Failed to reconnect');
@@ -2335,10 +2412,15 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
             bulkSel.names.clear();
             updateBulkBar();
             var content = document.getElementById('entries-content');
+            entryFilters.show('folder', true);
+            entryFilters.update(matches.map(function(m) { return m.row; }));
+            var allMatches = matches;
+            matches = matches.filter(function(m) { return entryFilters.apply([m.row]).length > 0; });
             if (matches.length === 0) {
                 content.innerHTML = '<div class="empty-state" style="padding:2em;margin:1em 0">' +
-                    '<p style="color:var(--text-dim);margin:0">No matches for ' + escapeHtml(query) + '</p>' +
-                    '</div>';
+                    '<p style="color:var(--text-dim);margin:0">' +
+                    (allMatches.length ? 'No matches for ' + escapeHtml(query) + ' with the current filters' : 'No matches for ' + escapeHtml(query)) +
+                    '</p></div>';
                 return;
             }
             var maxResults = 50;
@@ -2361,7 +2443,7 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
                 if (needsPrompt && userCol) userCol += ' <span style="color:#888;font-size:0.8em" title="Credentials prompted at connect">[prompt]</span>';
                 var scopeIcon = r.scope === 'shared' ? '⊕' : '▣';
                 html += '<tr>';
-                html += '<td>' + highlight(r.label, tokens) + '</td>';
+                html += '<td>' + entryNameHtml(r.label, tokens) + '</td>';
                 html += '<td><span class="type-badge ' + typeCls + '">' + typeLabel + '</span></td>';
                 html += '<td>' + highlight(r.host || '', tokens) + '</td>';
                 html += '<td>' + userCol + '</td>';
@@ -2495,6 +2577,15 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
             });
         }
 
+        // "host (Tenant)" display names, as the NetBox sync writes them, read as
+        // the host over a quieter tenant line. `tokens` highlights search hits.
+        function entryNameHtml(label, tokens) {
+            var esc = tokens ? function(t) { return highlight(t, tokens); } : escapeHtml;
+            var m = /^(.*\S)\s+\(([^()]+)\)$/.exec(label || '');
+            if (!m) return esc(label || '');
+            return '<span class="entry-name">' + esc(m[1]) + '</span><span class="entry-sub">' + esc(m[2]) + '</span>';
+        }
+
         // Credential variables an entry references that the user hasn't set
         // yet. Empty until the cred status has loaded (setCredVars !== null).
         function entryUnsetVars(e) {
@@ -2573,10 +2664,37 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
             }
         }
 
-        function renderEntries(entries, scope, folder) {
-            lastEntriesRender = { entries: entries, scope: scope, folder: folder };
-            bulkSyncSelection(entries, scope, folder);
+        // Shared facet filters (filters.js) above the entries table: Type in a
+        // folder, Type and Folder across search results. Selections persist in
+        // sessionStorage for this tab; the Folder facet only applies while
+        // searching.
+        var entryFilters = rgFilters.create({
+            mount: document.getElementById('entries-filters'),
+            id: 'connections',
+            facets: [
+                { key: 'type', label: 'Type',
+                  value: function(x) { var e = x.entry || x; return e.session_type; },
+                  render: function(v) { return '<span class="type-badge type-' + escapeAttr(v) + '">' + escapeHtml(v) + '</span>'; } },
+                { key: 'folder', label: 'Folder', value: function(x) { return x.folderPath || null; } }
+            ],
+            onChange: function() {
+                if (searchActive) runSearch();
+                else if (lastEntriesRender) renderEntries(lastEntriesRender.entries, lastEntriesRender.scope, lastEntriesRender.folder);
+            }
+        });
+
+        function renderEntries(allEntries, scope, folder) {
+            lastEntriesRender = { entries: allEntries, scope: scope, folder: folder };
+            bulkSyncSelection(allEntries, scope, folder);
             var content = document.getElementById('entries-content');
+            entryFilters.show('folder', false);
+            entryFilters.update(allEntries);
+            var entries = entryFilters.apply(allEntries);
+            if (entries.length === 0 && allEntries.length > 0) {
+                updateBulkBar();
+                content.innerHTML = '<p class="empty">No entries match the current filters.</p>';
+                return;
+            }
             if (entries.length === 0) {
                 updateBulkBar();
                 if (isAdmin) {
@@ -2622,7 +2740,7 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
                 var credPill = unsetVars.length > 0
                     ? ' <span title="Set these first: ' + escapeAttr(unsetVars.join(', ')) + '" style="background:var(--status-pending);color:var(--bg);border-radius:8px;padding:0.05em 0.5em;font-size:0.72em;font-weight:bold;white-space:nowrap;vertical-align:middle">credentials needed</span>'
                     : '';
-                html += '<td>' + escapeHtml(label) + credPill + '</td>';
+                html += '<td>' + entryNameHtml(label) + credPill + '</td>';
                 var typeLabel = e.session_type.toUpperCase();
                 if (e.auth_pkg) typeLabel += ' <span style="font-size:0.75em;color:#888">(' + escapeHtml(e.auth_pkg) + ')</span>';
                 html += '<td><span class="type-badge ' + typeCls + '">' + typeLabel + '</span></td>';
@@ -5106,14 +5224,17 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
         // sidebar, or pushed into the lower half by the strips above it).
         function jumpToEntriesHeader(header) {
             if (!header) return;
-            var r = header.getBoundingClientRect();
-            var vh = window.innerHeight || document.documentElement.clientHeight;
-            var inView = r.top >= 0 && r.top <= vh * 0.5 && r.bottom <= vh;
-            if (inView) return;
-            try {
-                header.scrollIntoView({ block: 'start', behavior: prefersReducedMotion ? 'auto' : 'smooth' });
-            } catch (e) {
-                header.scrollIntoView(true);
+            // Scroll the entries pane only. scrollIntoView() would also scroll
+            // every scrollable ancestor, and a body with overflow hidden can
+            // still be scrolled by script: that pushed the brand row and the
+            // nav off the top of the page.
+            var pane = header.closest('.main');
+            if (pane && pane.scrollHeight > pane.clientHeight) {
+                try {
+                    pane.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
+                } catch (e) {
+                    pane.scrollTop = 0;
+                }
             }
         }
 
@@ -5592,6 +5713,11 @@ <h3 id="cred-modal-title">Enter Credentials</h3>
 
 
         init();
+        // Other pages link here as /connections.html#my-credentials.
+        if (location.hash === '#my-credentials') {
+            history.replaceState(null, '', location.pathname + location.search);
+            setTimeout(function() { openMyCredentials(); }, 250);
+        }
     </script>
 </body>
 </html>
diff --git a/static/docs.html b/static/docs.html
index f3fbadad..551b6710 100644
--- a/static/docs.html
+++ b/static/docs.html
@@ -95,12 +95,13 @@ <h1>rustguac</h1>
     </div>
     <nav>
             <a href="/connections.html">Connections</a>
-            <a href="/sessions.html" id="sessions-link">Sessions</a>
+            <a href="/sessions.html" id="sessions-link" data-min-role="poweruser">Sessions</a>
             <a href="/recordings.html">Recordings</a>
-            <a href="/reports.html" id="reports-link" style="display:none">Reports</a>
+            <a href="/reports.html" id="reports-link" data-min-role="poweruser">Reports</a>
             <a href="/docs.html" class="active">Docs</a>
-            <a href="/tokens.html" id="tokens-link" style="display:none">Tokens</a>
-            <a href="/admin.html" id="admin-link" style="display:none">Admin</a>
+            <a href="/tokens.html" id="tokens-link" data-min-role="operator">Tokens</a>
+            <a href="/admin.html" id="admin-link" data-min-role="admin">Admin</a>
+            <a href="/connections.html#my-credentials" id="my-creds-nav" title="Manage your saved credential variables"><span class="nav-key">&#128273;</span> Credentials</a>
             <span id="user-menu-wrapper"><a href="#" id="logout-item">Logout</a><span id="user-menu-btn" title="Preferences">&#9881; Settings</span><div id="user-menu"><div class="um-section-label">Theme</div><div id="um-theme-list"></div></div></span>
         </nav>
 
@@ -189,6 +190,8 @@ <h1>rustguac</h1>
         var apiKey = sessionStorage.getItem('rustguac_api_key');
         var roleLevel = { admin: 4, poweruser: 3, operator: 2, viewer: 1 };
         if (apiKey) {
+            // A key is never on the page GET, so the server served the anonymous variant.
+            document.documentElement.setAttribute('data-role-level', '4');
             document.getElementById('admin-link').style.display = '';
             document.getElementById('tokens-link').style.display = '';
             document.getElementById('reports-link').style.display = '';
@@ -203,6 +206,9 @@ <h1>rustguac</h1>
                 if (!data) return;
                 if (data.role === 'admin') document.getElementById('admin-link').style.display = '';
                 var level = roleLevel[data.role] || 0;
+                // Reconcile the server-written nav gate (see rustguac.css): the page
+                // GET carried no API key, so key users arrive on the anonymous variant.
+                document.documentElement.setAttribute('data-role-level', String((typeof apiKey !== 'undefined' && apiKey) ? 4 : level));
                 if (level >= 2) document.getElementById('tokens-link').style.display = '';
                 if (level >= 3) {
                     document.getElementById('reports-link').style.display = '';
diff --git a/static/filters.js b/static/filters.js
new file mode 100644
index 00000000..3165f4a9
--- /dev/null
+++ b/static/filters.js
@@ -0,0 +1,265 @@
+/*
+ * rustguac shared facet filters.
+ *
+ * A row of dropdown buttons, one per facet (Type, Folder, User, ...), each a
+ * multi-select of the values present in the current rows with a count beside
+ * each value. Values within a facet are OR'd, facets are AND'd, and counts
+ * narrow as other facets are applied. Selections persist per page in
+ * sessionStorage so a reload or a return to the page keeps them.
+ *
+ *   var f = rgFilters.create({
+ *       mount:  document.getElementById('session-filters'),
+ *       id:     'sessions',                       // storage key suffix
+ *       facets: [
+ *           { key: 'type',   label: 'Type',   value: function(r) { return r.session_type; },
+ *             render: function(v) { return '<span class="type-badge type-' + v + '">' + v + '</span>'; } },
+ *           { key: 'folder', label: 'Folder', value: function(r) { return r.folder; } }
+ *       ],
+ *       onChange: function() { render(); }
+ *   });
+ *   f.update(rows);            // recompute values and counts from the full row set
+ *   var shown = f.apply(rows); // rows matching the current selection
+ *
+ * `value` may return a string, a number, null/undefined (shown as "(none)")
+ * or an array of strings (the row matches if any selected value is in it).
+ * `render` is optional and returns HTML for a value; the default escapes it.
+ * Only one menu is open at a time; Escape and clicks outside close it.
+ */
+(function() {
+    'use strict';
+
+    var NONE = '\u0000none';
+    var openMenu = null;
+
+    function esc(s) {
+        return String(s).replace(/[&<>"']/g, function(c) {
+            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+        });
+    }
+    function el(tag, cls, html) {
+        var e = document.createElement(tag);
+        if (cls) e.className = cls;
+        if (html != null) e.innerHTML = html;
+        return e;
+    }
+    function valuesOf(facet, row) {
+        var v;
+        try { v = facet.value(row); } catch (e) { v = null; }
+        if (v == null || v === '') return [NONE];
+        if (Object.prototype.toString.call(v) === '[object Array]') {
+            var out = [];
+            for (var i = 0; i < v.length; i++) if (v[i] != null && v[i] !== '') out.push(String(v[i]));
+            return out.length ? out : [NONE];
+        }
+        return [String(v)];
+    }
+    function label(facet, v) {
+        if (v === NONE) return facet.none || '(none)';
+        return facet.render ? facet.render(v) : esc(v);
+    }
+    function plain(facet, v) {
+        if (v === NONE) return facet.none || '(none)';
+        return facet.text ? facet.text(v) : String(v);
+    }
+
+    function closeOpen() {
+        if (!openMenu) return;
+        openMenu.wrap.classList.remove('open');
+        openMenu.btn.setAttribute('aria-expanded', 'false');
+        openMenu.menu.hidden = true;
+        openMenu = null;
+    }
+    document.addEventListener('mousedown', function(e) {
+        if (openMenu && !openMenu.wrap.contains(e.target)) closeOpen();
+    });
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && openMenu) { closeOpen(); e.stopPropagation(); }
+    });
+
+    function create(opts) {
+        var facets = opts.facets || [];
+        var storageKey = 'rustguac_filters_' + (opts.id || 'page');
+        var selected = {};   // facet key -> { value: true }
+        var rows = [];
+        var ui = {};         // facet key -> { wrap, btn, menu, list, find }
+
+        try {
+            var saved = JSON.parse(sessionStorage.getItem(storageKey) || '{}');
+            facets.forEach(function(f) {
+                var arr = saved[f.key];
+                if (arr && arr.length) {
+                    selected[f.key] = {};
+                    arr.forEach(function(v) { selected[f.key][v] = true; });
+                }
+            });
+        } catch (e) { selected = {}; }
+
+        function persist() {
+            var out = {};
+            facets.forEach(function(f) {
+                var s = selected[f.key];
+                if (s) { var arr = Object.keys(s); if (arr.length) out[f.key] = arr; }
+            });
+            try {
+                if (Object.keys(out).length) sessionStorage.setItem(storageKey, JSON.stringify(out));
+                else sessionStorage.removeItem(storageKey);
+            } catch (e) {}
+        }
+        function isActive(key) { return !!(selected[key] && Object.keys(selected[key]).length); }
+        function anyActive() { return facets.some(function(f) { return isActive(f.key) && !(ui[f.key] && ui[f.key].wrap.hidden); }); }
+        function matches(row, skipKey) {
+            for (var i = 0; i < facets.length; i++) {
+                var f = facets[i];
+                if (f.key === skipKey || !isActive(f.key) || (ui[f.key] && ui[f.key].wrap.hidden)) continue;
+                var vals = valuesOf(f, row), hit = false;
+                for (var j = 0; j < vals.length; j++) if (selected[f.key][vals[j]]) { hit = true; break; }
+                if (!hit) return false;
+            }
+            return true;
+        }
+        // Values and counts for one facet, narrowed by every other facet.
+        function tally(facet) {
+            var counts = {}, order = [];
+            rows.forEach(function(r) {
+                if (!matches(r, facet.key)) return;
+                valuesOf(facet, r).forEach(function(v) {
+                    if (!(v in counts)) { counts[v] = 0; order.push(v); }
+                    counts[v]++;
+                });
+            });
+            // Selected values no longer present stay listed (at 0) so they can be cleared.
+            Object.keys(selected[facet.key] || {}).forEach(function(v) {
+                if (!(v in counts)) { counts[v] = 0; order.push(v); }
+            });
+            order.sort(function(a, b) {
+                if (a === NONE) return 1; if (b === NONE) return -1;
+                if (facet.sort === 'count' && counts[a] !== counts[b]) return counts[b] - counts[a];
+                return plain(facet, a).localeCompare(plain(facet, b), undefined, { numeric: true, sensitivity: 'base' });
+            });
+            return { counts: counts, order: order };
+        }
+
+        function renderButton(facet) {
+            var u = ui[facet.key], s = selected[facet.key] || {}, keys = Object.keys(s);
+            u.wrap.classList.toggle('active', keys.length > 0);
+            var n = u.btn.querySelector('.rg-facet-n');
+            if (keys.length === 1) { n.textContent = plain(facet, keys[0]); n.className = 'rg-facet-n one'; }
+            else if (keys.length) { n.textContent = String(keys.length); n.className = 'rg-facet-n'; }
+            else { n.textContent = ''; n.className = 'rg-facet-n'; }
+            n.hidden = !keys.length;
+            u.btn.title = keys.length ? facet.label + ': ' + keys.map(function(k) { return plain(facet, k); }).join(', ') : facet.label;
+        }
+        function renderList(facet) {
+            var u = ui[facet.key], t = tally(facet), s = selected[facet.key] || {};
+            var q = (u.find.value || '').toLowerCase();
+            u.list.innerHTML = '';
+            var shown = 0;
+            t.order.forEach(function(v) {
+                if (q && plain(facet, v).toLowerCase().indexOf(q) === -1) return;
+                shown++;
+                var opt = el('label', 'rg-facet-opt' + (t.counts[v] ? '' : ' zero'));
+                var cb = el('input'); cb.type = 'checkbox'; cb.checked = !!s[v]; cb.setAttribute('data-v', v);
+                opt.appendChild(cb);
+                opt.appendChild(el('span', 'rg-facet-val', label(facet, v)));
+                opt.appendChild(el('span', 'rg-facet-count', String(t.counts[v])));
+                u.list.appendChild(opt);
+            });
+            if (!shown) u.list.appendChild(el('div', 'rg-facet-empty', q ? 'No matches' : 'Nothing to filter'));
+            u.find.parentNode.style.display = t.order.length > 7 || q ? '' : 'none';
+        }
+        function refreshAll() {
+            facets.forEach(function(f) { renderButton(f); if (openMenu && openMenu.key === f.key) renderList(f); });
+            ui.clear.hidden = !anyActive();
+        }
+        function change(facet, v, on) {
+            if (!selected[facet.key]) selected[facet.key] = {};
+            if (on) selected[facet.key][v] = true; else delete selected[facet.key][v];
+            persist(); refreshAll();
+            if (opts.onChange) opts.onChange();
+        }
+        function setAll(facet, on) {
+            var t = tally(facet), q = (ui[facet.key].find.value || '').toLowerCase();
+            if (!selected[facet.key]) selected[facet.key] = {};
+            t.order.forEach(function(v) {
+                if (q && plain(facet, v).toLowerCase().indexOf(q) === -1) return;
+                if (on) selected[facet.key][v] = true; else delete selected[facet.key][v];
+            });
+            persist(); refreshAll();
+            if (opts.onChange) opts.onChange();
+        }
+        function open(facet) {
+            var u = ui[facet.key];
+            if (openMenu && openMenu.key === facet.key) { closeOpen(); return; }
+            closeOpen();
+            u.find.value = '';
+            renderList(facet);
+            u.menu.hidden = false;
+            u.wrap.classList.add('open');
+            u.btn.setAttribute('aria-expanded', 'true');
+            openMenu = { key: facet.key, wrap: u.wrap, btn: u.btn, menu: u.menu };
+            // Keep the menu on screen when the button sits near the right edge.
+            u.menu.classList.remove('right');
+            var r = u.menu.getBoundingClientRect();
+            if (r.right > window.innerWidth - 8) u.menu.classList.add('right');
+            if (u.find.parentNode.style.display !== 'none') { try { u.find.focus(); } catch (e) {} }
+        }
+
+        var bar = el('div', 'rg-filters');
+        if (opts.label) bar.appendChild(el('span', 'rg-filters-label', esc(opts.label)));
+        facets.forEach(function(facet) {
+            var wrap = el('div', 'rg-facet');
+            var btn = el('button', 'rg-facet-btn', '<span class="rg-facet-label">' + esc(facet.label) + '</span><span class="rg-facet-n" hidden></span><span class="rg-facet-caret">&#9662;</span>');
+            btn.type = 'button';
+            btn.setAttribute('aria-haspopup', 'listbox');
+            btn.setAttribute('aria-expanded', 'false');
+            var menu = el('div', 'rg-facet-menu');
+            menu.hidden = true;
+            var tools = el('div', 'rg-facet-tools');
+            var find = el('input'); find.type = 'search'; find.placeholder = 'Find…'; find.setAttribute('aria-label', 'Find ' + facet.label.toLowerCase());
+            tools.appendChild(find);
+            var all = el('button', 'rg-facet-tool', 'All'); all.type = 'button';
+            var none = el('button', 'rg-facet-tool', 'None'); none.type = 'button';
+            var toolsRow = el('div', 'rg-facet-tools-row');
+            toolsRow.appendChild(tools); toolsRow.appendChild(all); toolsRow.appendChild(none);
+            var list = el('div', 'rg-facet-list');
+            menu.appendChild(toolsRow); menu.appendChild(list);
+            wrap.appendChild(btn); wrap.appendChild(menu);
+            bar.appendChild(wrap);
+            ui[facet.key] = { wrap: wrap, btn: btn, menu: menu, list: list, find: find };
+
+            btn.addEventListener('click', function() { open(facet); });
+            find.addEventListener('input', function() { renderList(facet); });
+            all.addEventListener('click', function() { setAll(facet, true); });
+            none.addEventListener('click', function() { setAll(facet, false); });
+            list.addEventListener('change', function(e) {
+                var cb = e.target;
+                if (cb && cb.type === 'checkbox') change(facet, cb.getAttribute('data-v'), cb.checked);
+            });
+        });
+        var clear = el('button', 'rg-filters-clear', 'Clear filters');
+        clear.type = 'button';
+        clear.hidden = true;
+        clear.addEventListener('click', function() {
+            selected = {}; persist(); refreshAll();
+            if (opts.onChange) opts.onChange();
+        });
+        bar.appendChild(clear);
+        ui.clear = clear;
+        if (opts.mount) opts.mount.appendChild(bar);
+
+        var api = {
+            element: bar,
+            update: function(newRows) { rows = newRows || []; refreshAll(); return api; },
+            apply: function(list) { return (list || rows).filter(function(r) { return matches(r, null); }); },
+            active: anyActive,
+            selected: function(key) { return Object.keys(selected[key] || {}); },
+            // Hide a facet that has no meaning in the current view (its selection is kept but not applied).
+            show: function(key, on) { if (ui[key]) ui[key].wrap.hidden = !on; return api; },
+            clear: function() { selected = {}; persist(); refreshAll(); }
+        };
+        refreshAll();
+        return api;
+    }
+
+    window.rgFilters = { create: create };
+})();
diff --git a/static/recordings.html b/static/recordings.html
index afa7471b..a47b4479 100644
--- a/static/recordings.html
+++ b/static/recordings.html
@@ -125,6 +125,7 @@
     <script>(function(){var c=localStorage.getItem('rustguac_theme_colors');if(c){try{var o=JSON.parse(c),r=document.documentElement.style;for(var k in o)r.setProperty('--'+k.replace(/_/g,'-'),o[k]);if(o.bg_pattern&&o.bg_pattern!=='none'){var s=document.createElement('style');s.id='bg-pattern-style';s.textContent='body{background-image:'+o.bg_pattern+';background-attachment:fixed}';document.head.appendChild(s)}}catch(e){}}})();</script>
 
     <!-- Guacamole JS modules (same as client.html) -->
+    <script src="/filters.js"></script>
     <script src="/guac/Namespace.js"></script>
     <script src="/guac/Client.js"></script>
     <script src="/guac/Display.js"></script>
@@ -168,17 +169,16 @@ <h1>rustguac</h1>
     </div>
     <nav>
         <a href="/connections.html">Connections</a>
-        <a href="/sessions.html" id="sessions-link">Sessions</a>
+        <a href="/sessions.html" id="sessions-link" data-min-role="poweruser">Sessions</a>
         <a href="/recordings.html" class="active">Recordings</a>
-        <a href="/reports.html" id="reports-link" style="display:none">Reports</a>
+        <a href="/reports.html" id="reports-link" data-min-role="poweruser">Reports</a>
         <a href="/docs.html">Docs</a>
-        <a href="/tokens.html" id="tokens-link" style="display:none">Tokens</a>
-        <a href="/admin.html" id="admin-link" style="display:none">Admin</a>
+        <a href="/tokens.html" id="tokens-link" data-min-role="operator">Tokens</a>
+        <a href="/admin.html" id="admin-link" data-min-role="admin">Admin</a>
+        <a href="/connections.html#my-credentials" id="my-creds-nav" title="Manage your saved credential variables"><span class="nav-key">&#128273;</span> Credentials</a>
         <span id="user-menu-wrapper"><a href="#" id="logout-item">Logout</a><span id="user-menu-btn" title="Preferences">&#9881; Settings</span><div id="user-menu"><div class="um-section-label">Theme</div><div id="um-theme-list"></div></div></span>
     </nav>
 
-    <h2>Recordings</h2>
-
     <div id="player-section">
         <div id="player-header">
             <span id="player-title"></span>
@@ -196,7 +196,10 @@ <h2>Recordings</h2>
     </div>
 
     <div style="max-width:1200px;margin-bottom:1em">
-        <input type="text" id="rec-search" placeholder="Search recordings (user, entry, folder...)" style="width:100%;padding:0.5em;background:var(--input);border:1px solid var(--border);color:var(--text);font-family:monospace;font-size:1em;border-radius:3px;box-sizing:border-box">
+        <div class="list-tools">
+            <input type="text" id="rec-search" placeholder="Search recordings (user, entry, folder&#8230;)" class="list-search">
+            <div id="rec-filters"></div>
+        </div>
     </div>
     <div id="recording-list"></div>
     <div id="rec-pagination" style="max-width:1200px;margin-top:0.8em;font-family:monospace;font-size:0.9em"></div>
@@ -229,6 +232,8 @@ <h2 style="margin-bottom:0.2em">SSH Typescripts</h2>
         // Check auth: either API key or cookie
         var roleLevel = { admin: 4, poweruser: 3, operator: 2, viewer: 1 };
         if (apiKey) {
+            // A key is never on the page GET, so the server served the anonymous variant.
+            document.documentElement.setAttribute('data-role-level', '4');
             document.getElementById('admin-link').style.display = '';
             document.getElementById('tokens-link').style.display = '';
             document.getElementById('reports-link').style.display = '';
@@ -243,6 +248,9 @@ <h2 style="margin-bottom:0.2em">SSH Typescripts</h2>
                 if (!data) return;
                 if (data.role === 'admin') document.getElementById('admin-link').style.display = '';
                 var level = roleLevel[data.role] || 0;
+                // Reconcile the server-written nav gate (see rustguac.css): the page
+                // GET carried no API key, so key users arrive on the anonymous variant.
+                document.documentElement.setAttribute('data-role-level', String((typeof apiKey !== 'undefined' && apiKey) ? 4 : level));
                 if (level >= 2) document.getElementById('tokens-link').style.display = '';
                 if (level >= 3) {
                     document.getElementById('reports-link').style.display = '';
@@ -266,6 +274,13 @@ <h2 style="margin-bottom:0.2em">SSH Typescripts</h2>
             return h;
         }
 
+        // "host (Tenant)" display names, as the NetBox sync writes them, read
+        // as the host over a quieter tenant line.
+        function entryNameHtml(label) {
+            var m = /^(.*\S)\s+\(([^()]+)\)$/.exec(label || '');
+            if (!m) return escapeHtml(label || '');
+            return '<span class="entry-name">' + escapeHtml(m[1]) + '</span><span class="entry-sub">' + escapeHtml(m[2]) + '</span>';
+        }
         function formatBytes(bytes) {
             if (bytes < 1024) return bytes + ' B';
             if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
@@ -360,9 +375,24 @@ <h2 style="margin-bottom:0.2em">SSH Typescripts</h2>
         function recSearchQuery() {
             return (document.getElementById('rec-search').value || '').toLowerCase();
         }
+        // Shared facet filters (filters.js): Type, Folder, User; applied on top
+        // of the text search. Selections persist in sessionStorage for this tab.
+        var recFilters = rgFilters.create({
+            mount: document.getElementById('rec-filters'),
+            id: 'recordings',
+            facets: [
+                { key: 'type', label: 'Type', value: function(r) { return r.session_type; },
+                  render: function(v) { return '<span class="type-badge type-' + escapeAttr(v) + '">' + escapeHtml(v) + '</span>'; } },
+                { key: 'folder', label: 'Folder', value: function(r) { return r.folder; } },
+                { key: 'user', label: 'User', value: function(r) { return r.user; } }
+            ],
+            onChange: function() { recPage = 1; renderRecordings(filterRecordings(recSearchQuery())); }
+        });
         function filterRecordings(q) {
-            if (!q) return allRecordings;
-            return allRecordings.filter(function(r) {
+            recFilters.update(allRecordings);
+            var list = recFilters.apply(allRecordings);
+            if (!q) return list;
+            return list.filter(function(r) {
                 return (r.name || '').toLowerCase().indexOf(q) >= 0 ||
                        (r.user || '').toLowerCase().indexOf(q) >= 0 ||
                        (r.entry_display_name || '').toLowerCase().indexOf(q) >= 0 ||
@@ -440,9 +470,9 @@ <h2 style="margin-bottom:0.2em">SSH Typescripts</h2>
             slice.forEach(function(r) {
                 var date = r.modified ? new Date(r.modified).toLocaleString() : (r.created_at ? new Date(r.created_at).toLocaleString() : '');
                 var entryName = r.entry_display_name || r.address_book_entry || r.name;
-                var typeBadge = r.session_type ? '<span style="color:var(--type-' + r.session_type + '-fg)">' + r.session_type + '</span>' : '';
+                var typeBadge = r.session_type ? '<span class="type-badge type-' + escapeAttr(r.session_type) + '">' + escapeHtml(r.session_type) + '</span>' : '';
                 html += '<tr>' +
-                    '<td title="' + escapeAttr(r.name) + '">' + escapeHtml(entryName) + '</td>' +
+                    '<td title="' + escapeAttr(r.name) + '">' + entryNameHtml(entryName) + '</td>' +
                     '<td>' + escapeHtml(r.user || '') + '</td>' +
                     '<td>' + typeBadge + '</td>' +
                     '<td>' + escapeHtml(r.folder || '') + '</td>' +
diff --git a/static/reports.html b/static/reports.html
index 9a8eabea..75ceb423 100644
--- a/static/reports.html
+++ b/static/reports.html
@@ -5,17 +5,6 @@
     <title>rustguac - Reports</title>
     <link rel="stylesheet" href="/rustguac.css">
     <style>
-        .filter-bar {
-            display: flex;
-            align-items: center;
-            gap: var(--s-3);
-            margin: var(--s-3) 0 var(--s-2) 0;
-            flex-wrap: wrap;
-        }
-        .filter-bar input {
-            width: 360px;
-            max-width: 100%;
-        }
         th.sortable { cursor: pointer; user-select: none; }
         th.sortable:hover { color: var(--text); }
         th .sort-arrow { font-size: 0.7em; margin-left: var(--s-1); }
@@ -70,6 +59,7 @@
             .btn-small { padding: 0 var(--s-1); }
         }
     </style>
+    <script src="/filters.js"></script>
     <script>(function(){var c=localStorage.getItem('rustguac_theme_colors');if(c){try{var o=JSON.parse(c),r=document.documentElement.style;for(var k in o)r.setProperty('--'+k.replace(/_/g,'-'),o[k]);if(o.bg_pattern&&o.bg_pattern!=='none'){var s=document.createElement('style');s.id='bg-pattern-style';s.textContent='body{background-image:'+o.bg_pattern+';background-attachment:fixed}';document.head.appendChild(s)}}catch(e){}}})();</script>
 </head>
 <body>
@@ -79,17 +69,16 @@ <h1>rustguac</h1>
     </div>
     <nav>
         <a href="/connections.html">Connections</a>
-        <a href="/sessions.html" id="sessions-link">Sessions</a>
+        <a href="/sessions.html" id="sessions-link" data-min-role="poweruser">Sessions</a>
         <a href="/recordings.html">Recordings</a>
-        <a href="/reports.html" class="active">Reports</a>
+        <a href="/reports.html" class="active" id="reports-link" data-min-role="poweruser">Reports</a>
         <a href="/docs.html">Docs</a>
-        <a href="/tokens.html" id="tokens-link" style="display:none">Tokens</a>
-        <a href="/admin.html" id="admin-link" style="display:none">Admin</a>
+        <a href="/tokens.html" id="tokens-link" data-min-role="operator">Tokens</a>
+        <a href="/admin.html" id="admin-link" data-min-role="admin">Admin</a>
+        <a href="/connections.html#my-credentials" id="my-creds-nav" title="Manage your saved credential variables"><span class="nav-key">&#128273;</span> Credentials</a>
         <span id="user-menu-wrapper"><a href="#" id="logout-item">Logout</a><span id="user-menu-btn" title="Preferences">&#9881; Settings</span><div id="user-menu"><div class="um-section-label">Theme</div><div id="um-theme-list"></div></div></span>
     </nav>
 
-    <h2>Reports</h2>
-
     <div class="summary-cards" id="summary-cards">
         <div class="summary-card">
             <div class="card-label">Total Sessions</div>
@@ -111,9 +100,10 @@ <h2>Reports</h2>
 
     <div style="margin-top:2em">
         <h2>Session History</h2>
-        <div class="filter-bar">
-            <input type="text" id="filter-input" placeholder="Filter sessions...">
-            <button id="export-csv-btn" class="btn-add">Export CSV</button>
+        <div class="list-tools">
+            <input type="text" id="filter-input" class="list-search" placeholder="Search session history (user, host, folder&#8230;)">
+            <div id="history-filters"></div>
+            <button id="export-csv-btn" class="btn-add list-action">Export CSV</button>
         </div>
         <table id="history-table">
             <thead>
@@ -176,6 +166,8 @@ <h2>Session History</h2>
         // Check auth: either API key or cookie
         var roleLevel = { admin: 4, poweruser: 3, operator: 2, viewer: 1 };
         if (apiKey) {
+            // A key is never on the page GET, so the server served the anonymous variant.
+            document.documentElement.setAttribute('data-role-level', '4');
             document.getElementById('admin-link').style.display = '';
             document.getElementById('tokens-link').style.display = '';
         } else {
@@ -189,6 +181,9 @@ <h2>Session History</h2>
                 if (!data) return;
                 if (data.role === 'admin') document.getElementById('admin-link').style.display = '';
                 var level = roleLevel[data.role] || 0;
+                // Reconcile the server-written nav gate (see rustguac.css): the page
+                // GET carried no API key, so key users arrive on the anonymous variant.
+                document.documentElement.setAttribute('data-role-level', String((typeof apiKey !== 'undefined' && apiKey) ? 4 : level));
                 if (level >= 2) document.getElementById('tokens-link').style.display = '';
                 if (level < 3) {
                     document.getElementById('sessions-link').style.display = 'none';
@@ -209,6 +204,13 @@ <h2>Session History</h2>
             return h;
         }
 
+        // "host (Tenant)" display names, as the NetBox sync writes them, read
+        // as the host over a quieter tenant line (same as Connections).
+        function entryNameHtml(label) {
+            var m = /^(.*\S)\s+\(([^()]+)\)$/.exec(label || '');
+            if (!m) return escapeHtml(label || '');
+            return '<span class="entry-name">' + escapeHtml(m[1]) + '</span><span class="entry-sub">' + escapeHtml(m[2]) + '</span>';
+        }
         function escapeHtml(s) {
             if (!s) return '';
             var d = document.createElement('div');
@@ -313,7 +315,9 @@ <h2>Session History</h2>
                 return 0;
             });
 
-            // Apply text filter
+            // Facet filters (filters.js), then the text filter
+            historyFilters.update(sessionsData);
+            sorted = historyFilters.apply(sorted);
             var filterText = (document.getElementById('filter-input').value || '').toLowerCase();
             if (filterText) {
                 sorted = sorted.filter(function(s) {
@@ -344,7 +348,7 @@ <h2>Session History</h2>
                 }
                 html += '<tr>' +
                     '<td>' + escapeHtml(s.created_by || s.username || '') + '</td>' +
-                    '<td>' + escapeHtml(s.entry_display_name || s.address_book_entry || '') + '</td>' +
+                    '<td>' + entryNameHtml(s.entry_display_name || s.address_book_entry || '') + '</td>' +
                     '<td>' + escapeHtml(s.address_book_folder || '') + '</td>' +
                     '<td>' + typeBadge(s.session_type) + '</td>' +
                     '<td>' + escapeHtml(s.hostname || '') + '</td>' +
@@ -409,6 +413,19 @@ <h2>Session History</h2>
         document.getElementById('filter-input').addEventListener('input', function() {
             applySortAndRender();
         });
+        // Shared facet filters (filters.js): Type, Folder, User, Status.
+        // Selections persist in sessionStorage for this tab.
+        var historyFilters = rgFilters.create({
+            mount: document.getElementById('history-filters'),
+            id: 'reports',
+            facets: [
+                { key: 'type', label: 'Type', value: function(s) { return s.session_type; }, render: typeBadge },
+                { key: 'folder', label: 'Folder', value: function(s) { return s.address_book_folder; } },
+                { key: 'user', label: 'User', value: function(s) { return s.created_by; } },
+                { key: 'status', label: 'Status', value: function(s) { return s.status; } }
+            ],
+            onChange: function() { applySortAndRender(); }
+        });
 
         // ── Export CSV ──
         document.getElementById('export-csv-btn').addEventListener('click', function() {
@@ -440,7 +457,7 @@ <h2>Session History</h2>
                 var html = '';
                 data.forEach(function(c) {
                     html += '<tr>' +
-                        '<td>' + escapeHtml(c.name || c.address_book_entry || '') + '</td>' +
+                        '<td>' + entryNameHtml(c.name || c.address_book_entry || '') + '</td>' +
                         '<td>' + typeBadge(c.session_type) + '</td>' +
                         '<td>' + (c.session_count || 0) + '</td>' +
                         '<td>' + (c.total_hours != null ? c.total_hours.toFixed(1) : '0') + '</td>' +
diff --git a/static/rustguac.css b/static/rustguac.css
index 22b865a4..1bb5727f 100644
--- a/static/rustguac.css
+++ b/static/rustguac.css
@@ -93,6 +93,8 @@ nav a {
     line-height: 1.4;
 }
 nav a:hover { color: var(--text); text-decoration: none; }
+/* The key glyph before Credentials renders as a large colour emoji; keep it to text height. */
+nav .nav-key { font-size: 0.75em; vertical-align: 0.05em; margin-right: 0.1em; }
 nav a.active { color: var(--primary); font-weight: bold; }
 nav a.active::after {
     content: '';
@@ -353,16 +355,20 @@ tbody tr:last-child td { border-bottom: none; }
 .type-vnc { background: var(--type-vnc-bg); color: var(--type-vnc-fg); }
 .type-web { background: var(--type-web-bg); color: var(--type-web-fg); }
 .type-vdi { background: var(--type-vdi-bg); color: var(--type-vdi-fg); }
+.type-proxmox { background: #e57000; color: #000; }
 
 /* ── Section heading strip (used above grids/lists) ──────── */
 .section-head {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: var(--s-2);
+    min-height: var(--ctl-sm);
     margin-bottom: var(--s-3);
     padding-bottom: var(--s-2);
     border-bottom: 1px solid var(--border);
 }
+/* A section's action button sits on the right of its heading band. */
+.section-head .section-action { margin-left: auto; align-self: center; }
 .section-head strong {
     color: var(--accent);
     font-size: var(--fz-sm);
@@ -850,3 +856,157 @@ form.card,
     text-align: center;
     border-top: 1px dashed var(--border);
 }
+
+/* ── Role-gated navigation ──────────────────────
+   The server writes data-role-level (0 anonymous … 4 admin) on <html> for
+   the user it serves a page to, so gated links and admin-only controls are
+   right on the first paint: no fetch-then-show, no reflow, nothing popping
+   in after the header has drawn. A page reconciles the attribute from
+   /api/me for identities the page GET could not carry (API keys). */
+nav a[data-min-role] { display: none; }
+html[data-role-level="2"] nav a[data-min-role="operator"],
+html[data-role-level="3"] nav a[data-min-role="operator"],
+html[data-role-level="3"] nav a[data-min-role="poweruser"],
+html[data-role-level="4"] nav a[data-min-role] { display: inline; }
+html:not([data-role-level="4"]) .admin-only { display: none !important; }
+
+/* ── Entry names ──
+   "host (Tenant)" display names read as the host over a quieter subline. */
+.entry-name { display: block; color: var(--text); }
+.entry-sub { display: block; font-size: var(--fz-xs); color: var(--text-dim); margin-top: 1px; letter-spacing: 0.02em; }
+
+/* ── Facet filters (filters.js) ──────────────────────────── */
+.rg-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--s-2);
+}
+.rg-filters-label {
+    color: var(--text-muted);
+    font-size: var(--fz-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+}
+.rg-facet { position: relative; }
+.rg-facet[hidden] { display: none; }
+.rg-facet-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--s-1);
+    height: var(--ctl-sm);
+    padding: 0 var(--s-2);
+    background: var(--input);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text-muted);
+    font-family: monospace;
+    font-size: var(--fz-sm);
+    cursor: pointer;
+    white-space: nowrap;
+}
+/* The generic button:hover paints the primary colour; these stay on the input tone. */
+.rg-facet-btn:hover, .rg-facet-btn:focus, .rg-facet.open .rg-facet-btn { background: var(--input); border-color: var(--accent); color: var(--text); }
+.rg-facet-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.rg-facet.active .rg-facet-btn { border-color: var(--accent); color: var(--accent); }
+.rg-facet.active .rg-facet-btn:hover, .rg-facet.active .rg-facet-btn:focus { color: var(--accent); }
+.rg-facet-n {
+    background: var(--accent);
+    color: var(--bg);
+    border-radius: 999px;
+    padding: 0 0.55em;
+    font-size: var(--fz-xs);
+    font-weight: bold;
+    line-height: 1.6;
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.rg-facet-n.one { background: transparent; color: var(--accent); padding: 0; font-weight: normal; font-size: var(--fz-sm); }
+.rg-facet-n.one::before { content: "\00b7\00a0"; color: var(--text-dim); }
+.rg-facet-n[hidden] { display: none; }
+.rg-facet-caret { font-size: 0.7em; opacity: 0.6; margin-left: 1px; }
+.rg-facet.open .rg-facet-caret { transform: rotate(180deg); }
+.rg-facet-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 600;
+    min-width: 260px;
+    max-width: min(440px, calc(100vw - 32px));
+    padding: var(--s-2);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
+}
+.rg-facet-menu.right { left: auto; right: 0; }
+.rg-facet-menu[hidden] { display: none; }
+.rg-facet-tools-row { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2); }
+.rg-facet-tools { flex: 1; min-width: 0; display: flex; }
+.rg-facet-tools input[type="search"] { flex: 1; min-width: 0; height: var(--ctl-sm); font-size: var(--fz-sm); }
+.rg-facet-tool {
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    color: var(--text-muted);
+    font-family: monospace;
+    font-size: var(--fz-xs);
+    height: var(--ctl-sm);
+    padding: 0 var(--s-2);
+    cursor: pointer;
+}
+.rg-facet-tool:hover, .rg-facet-tool:focus { background: transparent; color: var(--accent); border-color: var(--border); }
+.rg-facet-list { max-height: 340px; overflow-y: auto; overflow-x: hidden; padding-right: var(--s-2); scrollbar-gutter: stable; }
+.rg-facet-opt {
+    display: flex;
+    align-items: center;
+    gap: var(--s-2);
+    margin: 0;
+    padding: 4px var(--s-1);
+    border-radius: var(--radius);
+    color: var(--text);
+    font-size: var(--fz-sm);
+    font-weight: normal;
+    text-transform: none;
+    letter-spacing: normal;
+    cursor: pointer;
+}
+.rg-facet-opt:hover { background: var(--input); }
+.rg-facet-opt.zero { opacity: 0.55; }
+.rg-facet-opt input[type="checkbox"] { margin: 0; flex: none; accent-color: var(--accent); width: 15px; height: 15px; }
+.rg-facet-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rg-facet-val .type-badge { font-size: var(--fz-xs); min-width: 44px; padding: 1px var(--s-2); }
+.rg-facet-count { color: var(--text-dim); font-size: var(--fz-xs); flex: none; }
+.rg-facet-empty { color: var(--text-dim); font-size: var(--fz-sm); padding: var(--s-2) var(--s-1); }
+.rg-filters-clear {
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    color: var(--text-muted);
+    font-family: monospace;
+    font-size: var(--fz-sm);
+    height: var(--ctl-sm);
+    padding: 0 var(--s-2);
+    cursor: pointer;
+}
+.rg-filters-clear:hover, .rg-filters-clear:focus { background: transparent; color: var(--primary); border-color: var(--border); }
+.rg-filters-clear[hidden] { display: none; }
+
+/* ── List tool rows (search box + facet filters above a table) ── */
+.list-tools {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--s-2);
+    margin-bottom: var(--s-3);
+}
+.list-tools:empty { display: none; }
+.list-tools .list-search { flex: 1 1 260px; min-width: 200px; max-width: 520px; height: var(--ctl-sm); font-size: var(--fz-sm); }
+/* A page-specific action (New ad-hoc session, Export CSV) pinned to the right
+   of the shared search+filters row. */
+.list-tools .list-action { margin-left: auto; }
+
+/* ── Modal extras ─────────────────────────────────────── */
+.modal .modal-hint { color: var(--text-muted); font-size: var(--fz-sm); margin: 0 0 var(--s-3); }
+.modal.adhoc-modal { min-width: 520px; max-width: 640px; }
diff --git a/static/sessions.html b/static/sessions.html
index 2055734d..b587925c 100644
--- a/static/sessions.html
+++ b/static/sessions.html
@@ -46,6 +46,8 @@
             font-weight: normal;
         }
         .btn-add-hop:hover { background: var(--surface); border-color: var(--accent); }
+            .adhoc-modal form { background: transparent; border: 0; padding: 0; margin: 0; max-width: none; width: auto; }
+        .adhoc-modal #new-session-fields { margin-top: 0; }
     </style>
     <script>(function(){var c=localStorage.getItem('rustguac_theme_colors');if(c){try{var o=JSON.parse(c),r=document.documentElement.style;for(var k in o)r.setProperty('--'+k.replace(/_/g,'-'),o[k]);if(o.bg_pattern&&o.bg_pattern!=='none'){var s=document.createElement('style');s.id='bg-pattern-style';s.textContent='body{background-image:'+o.bg_pattern+';background-attachment:fixed}';document.head.appendChild(s)}}catch(e){}}})();</script>
 </head>
@@ -56,12 +58,13 @@ <h1>rustguac</h1>
     </div>
     <nav>
         <a href="/connections.html">Connections</a>
-        <a href="/sessions.html" class="active" id="sessions-link">Sessions</a>
+        <a href="/sessions.html" class="active" id="sessions-link" data-min-role="poweruser">Sessions</a>
         <a href="/recordings.html">Recordings</a>
-        <a href="/reports.html" id="reports-link" style="display:none">Reports</a>
+        <a href="/reports.html" id="reports-link" data-min-role="poweruser">Reports</a>
         <a href="/docs.html">Docs</a>
-        <a href="/tokens.html" id="tokens-link" style="display:none">Tokens</a>
-        <a href="/admin.html" id="admin-link" style="display:none">Admin</a>
+        <a href="/tokens.html" id="tokens-link" data-min-role="operator">Tokens</a>
+        <a href="/admin.html" id="admin-link" data-min-role="admin">Admin</a>
+        <a href="/connections.html#my-credentials" id="my-creds-nav" title="Manage your saved credential variables"><span class="nav-key">&#128273;</span> Credentials</a>
         <span id="user-menu-wrapper"><a href="#" id="logout-item">Logout</a><span id="user-menu-btn" title="Preferences">&#9881; Settings</span><div id="user-menu"><div class="um-section-label">Theme</div><div id="um-theme-list"></div></div></span>
     </nav>
 
@@ -69,12 +72,12 @@ <h1>rustguac</h1>
         Use the <a href="/connections.html">Connections</a> to connect to saved entries.
     </div>
 
-    <form id="session-form" style="display:none">
-        <div style="display:flex;align-items:center;gap:0.5em;cursor:pointer" id="new-session-toggle">
-            <span id="new-session-arrow" style="color:var(--accent)">&#9654;</span>
-            <strong style="color:var(--accent)">New Ad-Hoc Session</strong>
-        </div>
-        <div id="new-session-fields" style="display:none;margin-top:0.8em">
+    <div id="adhoc-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="adhoc-modal-title">
+    <div class="modal adhoc-modal">
+    <h3 id="adhoc-modal-title">New Ad-Hoc Session</h3>
+    <p class="modal-hint">A one-off session to any host. Nothing is saved; use Connections for entries you come back to.</p>
+    <form id="session-form">
+        <div id="new-session-fields">
         <label>Type
             <select id="session-type" style="display:block;width:100%;padding:0.4em;margin-top:0.2em;background:var(--input);border:1px solid var(--border);color:var(--text);font-family:monospace;font-size:1em;border-radius:3px;">
                 <option value="ssh" selected>SSH</option>
@@ -174,16 +177,23 @@ <h1>rustguac</h1>
         <label>Banner message (shown to user before session starts)
             <input type="text" id="banner" placeholder="e.g. Please enter your credentials when prompted">
         </label>
-        <button type="submit" id="connect-btn">Connect</button>
+        <div class="modal-actions">
+            <button type="submit" id="connect-btn">Connect</button>
+            <button type="button" class="btn-cancel" id="adhoc-cancel">Cancel</button>
+        </div>
         <div id="error"></div>
         </div>
     </form>
+    </div>
+    </div>
 
     <div id="sessions">
-        <div class="section-head">
-            <strong>Sessions</strong>
-            <span class="section-count" id="session-counts"></span>
+        <div class="list-tools">
+            <input type="text" id="session-search" class="list-search" placeholder="Search sessions (user, host, owner, ID&#8230;)">
+            <div id="session-filters"></div>
+            <button type="button" class="btn-add list-action" id="new-session-btn" style="display:none" title="Start a one-off session to any host. Nothing is saved.">&#9889; New ad-hoc session</button>
         </div>
+        <span class="section-count" id="session-counts" style="display:none"></span>
         <table>
             <thead><tr>
                 <th>ID</th><th>Type</th><th>Host</th><th>User</th><th>Owner</th><th>Status</th><th>Viewers</th><th></th><th></th>
@@ -193,6 +203,7 @@ <h1>rustguac</h1>
         <p id="session-empty" class="empty" style="display:none"></p>
     </div>
 
+    <script src="/filters.js"></script>
     <script>
         function applyThemeColors(colors){var r=document.documentElement.style;for(var k in colors)r.setProperty('--'+k.replace(/_/g,'-'),colors[k]);var s=document.getElementById('bg-pattern-style');if(!s){s=document.createElement('style');s.id='bg-pattern-style';document.head.appendChild(s)}s.textContent=colors.bg_pattern&&colors.bg_pattern!=='none'?'body{background-image:'+colors.bg_pattern+';background-attachment:fixed}':'';localStorage.setItem('rustguac_theme_colors',JSON.stringify(colors))}
         var _themePresets={},_adminPreset='aurora';
@@ -221,6 +232,9 @@ <h1>rustguac</h1>
                 myName = data.name || null;
                 myRole = data.role || null;
                 var level = roleLevel[data.role] || 0;
+                // Reconcile the server-written nav gate (see rustguac.css): the page
+                // GET carried no API key, so key users arrive on the anonymous variant.
+                document.documentElement.setAttribute('data-role-level', String((typeof apiKey !== 'undefined' && apiKey) ? 4 : level));
                 if (level < 3) {
                     window.location.href = '/connections.html';
                     return;
@@ -233,16 +247,18 @@ <h1>rustguac</h1>
                 }
                 if (level >= 3) {
                     // poweruser+ can create ad-hoc sessions
-                    document.getElementById('session-form').style.display = '';
+                    document.getElementById('new-session-btn').style.display = '';
                     document.getElementById('reports-link').style.display = '';
                 }
             })
             .catch(function() {});
         }
         if (apiKey) {
+            // A key is never on the page GET, so the server served the anonymous variant.
+            document.documentElement.setAttribute('data-role-level', '4');
             // API key users are always admin
             myRole = 'admin';
-            document.getElementById('session-form').style.display = '';
+            document.getElementById('new-session-btn').style.display = '';
             document.getElementById('admin-link').style.display = '';
             document.getElementById('tokens-link').style.display = '';
             document.getElementById('reports-link').style.display = '';
@@ -312,17 +328,21 @@ <h1>rustguac</h1>
             jumpSection.style.display = v === 'vdi' ? 'none' : '';
         });
 
-        // Collapsible "New Ad-Hoc Session" section
-        document.getElementById('new-session-toggle').addEventListener('click', function() {
-            var fields = document.getElementById('new-session-fields');
-            var arrow = document.getElementById('new-session-arrow');
-            if (fields.style.display === 'none') {
-                fields.style.display = '';
-                arrow.innerHTML = '&#9660;';
-            } else {
-                fields.style.display = 'none';
-                arrow.innerHTML = '&#9654;';
-            }
+        // "New ad-hoc session" opens the form in a modal; Cancel, Escape or
+        // a click on the backdrop closes it. The form itself is unchanged.
+        var adhocModal = document.getElementById('adhoc-modal');
+        function openAdhoc() {
+            adhocModal.classList.add('active');
+            document.getElementById('error').textContent = '';
+            var first = document.getElementById('session-type');
+            if (first) { try { first.focus(); } catch (e) {} }
+        }
+        function closeAdhoc() { adhocModal.classList.remove('active'); }
+        document.getElementById('new-session-btn').addEventListener('click', openAdhoc);
+        document.getElementById('adhoc-cancel').addEventListener('click', closeAdhoc);
+        adhocModal.addEventListener('mousedown', function(e) { if (e.target === adhocModal) closeAdhoc(); });
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape' && adhocModal.classList.contains('active')) closeAdhoc();
         });
 
         // Show jump section on initial load (default is SSH)
@@ -598,6 +618,48 @@ <h1>rustguac</h1>
                 return res.json();
             })
             .then(function(sessions) {
+                lastSessionList = sessions;
+                renderSessionList(sessions);
+            });
+        }
+
+        // Shared facet filters (filters.js): Type, Status, Owner. Selections
+        // persist in sessionStorage for this tab. Counts in the header stay
+        // for the full list; the table shows the filtered one.
+        var lastSessionList = null;
+        var sessionFilters = rgFilters.create({
+            mount: document.getElementById('session-filters'),
+            id: 'sessions',
+            facets: [
+                { key: 'type', label: 'Type', value: function(s) { return s.session_type; },
+                  render: function(v) { return '<span class="type-badge type-' + v.replace(/[^a-z0-9-]/gi, '') + '">' + v.replace(/[<>&]/g, '') + '</span>'; } },
+                { key: 'user', label: 'User', value: function(s) { return s.username; } },
+                { key: 'owner', label: 'Owner', value: function(s) { return s.created_by; } },
+                { key: 'status', label: 'Status', value: function(s) { return s.status; } }
+            ],
+            onChange: function() { if (lastSessionList) renderSessionList(lastSessionList); }
+        });
+        function sessionSearchQuery() {
+            return (document.getElementById('session-search').value || '').toLowerCase();
+        }
+        document.getElementById('session-search').addEventListener('input', function() {
+            if (lastSessionList) renderSessionList(lastSessionList);
+        });
+
+        function renderSessionList(allSessions) {
+                sessionFilters.update(allSessions);
+                var sessions = sessionFilters.apply(allSessions);
+                var q = sessionSearchQuery();
+                if (q) {
+                    sessions = sessions.filter(function(s) {
+                        var host = (s.session_type === 'web' ? s.url : s.hostname) || '';
+                        return (s.username || '').toLowerCase().indexOf(q) >= 0
+                            || host.toLowerCase().indexOf(q) >= 0
+                            || (s.created_by || '').toLowerCase().indexOf(q) >= 0
+                            || (s.session_id || '').toLowerCase().indexOf(q) >= 0
+                            || (s.session_type || '').toLowerCase().indexOf(q) >= 0;
+                    });
+                }
                 var tbody = document.getElementById('session-list');
                 var empty = document.getElementById('session-empty');
                 var counts = document.getElementById('session-counts');
@@ -623,7 +685,9 @@ <h1>rustguac</h1>
                     tdId.appendChild(idLink);
                     tr.appendChild(tdId);
 
-                    tr.appendChild(h('td', s.session_type));
+                    var tdType = document.createElement('td');
+                    tdType.appendChild(h('span', s.session_type, { 'class': 'type-badge type-' + s.session_type }));
+                    tr.appendChild(tdType);
                     tr.appendChild(h('td', hostCol));
                     tr.appendChild(h('td', s.username));
                     tr.appendChild(h('td', s.created_by || '', { 'class': isOwn ? 'owner-self' : 'owner-other' }));
@@ -664,21 +728,31 @@ <h1>rustguac</h1>
 
                 // Count indicator: "12 active · 3 yours" for admins seeing others,
                 // "3 active" when caller only sees their own.
-                if (activeCount === 0) {
+                if (sessions.length === 0 && allSessions.length > 0) {
+                    empty.style.display = '';
+                    empty.textContent = 'No sessions match the current filters.';
+                } else if (activeCount === 0) {
                     empty.style.display = '';
                     empty.textContent = myRole === 'admin'
                         ? 'No active sessions.'
                         : 'No active sessions. Use Connections to connect to a saved entry, or the form above to start an ad-hoc session.';
-                    counts.textContent = '';
                 } else {
                     empty.style.display = 'none';
-                    if (myRole === 'admin' && activeCount !== ownActiveCount) {
-                        counts.textContent = activeCount + ' active · ' + ownActiveCount + ' yours';
-                    } else {
-                        counts.textContent = activeCount + ' active';
-                    }
                 }
-            });
+                // Header counts describe the whole list, not the filtered view.
+                var totalActive = 0, ownActive = 0;
+                allSessions.forEach(function(s) {
+                    if (s.status !== 'active') return;
+                    totalActive++;
+                    if (myName && s.created_by === myName) ownActive++;
+                });
+                if (totalActive === 0) {
+                    counts.textContent = '';
+                } else if (myRole === 'admin' && totalActive !== ownActive) {
+                    counts.textContent = totalActive + ' active · ' + ownActive + ' yours' + (sessionFilters.active() ? ' · ' + sessions.length + ' shown' : '');
+                } else {
+                    counts.textContent = totalActive + ' active' + (sessionFilters.active() ? ' · ' + sessions.length + ' shown' : '');
+                }
         }
 
         document.getElementById('session-list').addEventListener('click', function(e) {
diff --git a/static/tokens.html b/static/tokens.html
index 50904609..12c8a1ce 100644
--- a/static/tokens.html
+++ b/static/tokens.html
@@ -24,12 +24,13 @@ <h1>rustguac</h1>
     </div>
     <nav>
         <a href="/connections.html">Connections</a>
-        <a href="/sessions.html" id="sessions-link">Sessions</a>
+        <a href="/sessions.html" id="sessions-link" data-min-role="poweruser">Sessions</a>
         <a href="/recordings.html">Recordings</a>
-        <a href="/reports.html" id="reports-link" style="display:none">Reports</a>
+        <a href="/reports.html" id="reports-link" data-min-role="poweruser">Reports</a>
         <a href="/docs.html">Docs</a>
-        <a href="/tokens.html" class="active">Tokens</a>
-        <a href="/admin.html" id="admin-link" style="display:none">Admin</a>
+        <a href="/tokens.html" class="active" id="tokens-link" data-min-role="operator">Tokens</a>
+        <a href="/admin.html" id="admin-link" data-min-role="admin">Admin</a>
+        <a href="/connections.html#my-credentials" id="my-creds-nav" title="Manage your saved credential variables"><span class="nav-key">&#128273;</span> Credentials</a>
         <span id="user-menu-wrapper"><a href="#" id="logout-item">Logout</a><span id="user-menu-btn" title="Preferences">&#9881; Settings</span><div id="user-menu"><div class="um-section-label">Theme</div><div id="um-theme-list"></div></div></span>
     </nav>
 
@@ -106,6 +107,8 @@ <h2>Your Tokens</h2>
 
         function initPage() {
             if (apiKey) {
+                // A key is never on the page GET, so the server served the anonymous variant.
+                document.documentElement.setAttribute('data-role-level', '4');
                 // API key users are admins — redirect to admin page for token management
                 document.getElementById('loading').style.display = 'none';
                 document.getElementById('admin-link').style.display = '';
@@ -126,6 +129,9 @@ <h2>Your Tokens</h2>
                 document.getElementById('loading').style.display = 'none';
                 currentRole = data.role;
                 var level = roleLevel[data.role] || 0;
+                // Reconcile the server-written nav gate (see rustguac.css): the page
+                // GET carried no API key, so key users arrive on the anonymous variant.
+                document.documentElement.setAttribute('data-role-level', String((typeof apiKey !== 'undefined' && apiKey) ? 4 : level));
 
                 if (data.role === 'admin') {
                     document.getElementById('admin-link').style.display = '';
diff --git a/tests/e2e/README.md b/tests/e2e/README.md
index 0744087b..d0319d20 100644
--- a/tests/e2e/README.md
+++ b/tests/e2e/README.md
@@ -24,6 +24,10 @@ One spec per change, named after the branch that introduced it:
 | spec | pins |
 |---|---|
 | `tables-1710` | #252: no horizontal overflow at 1710px on Connections, Recordings and Reports, with short and with long unbreakable names |
+| `connections-app-shell` | #254: clipped body, two scroll panes, folder change scrolls the pane not the page |
+| `role-nav` | one nav on every page, gated by `data-role-level` |
+| `sessions-adhoc-modal` | ad-hoc form opens as a modal |
+| `facet-filters` | shared facets narrow lists, persist, combine with search |
 
 The fixture suppresses the first-visit onboarding tour (`options.onboarding`
 re-enables it) and defaults to the admin role; pass `role` to test gating.
diff --git a/tests/e2e/specs/connections-app-shell.spec.mjs b/tests/e2e/specs/connections-app-shell.spec.mjs
new file mode 100644
index 00000000..6bc99500
--- /dev/null
+++ b/tests/e2e/specs/connections-app-shell.spec.mjs
@@ -0,0 +1,59 @@
+// #254: the page is an app shell. The header stays, the sidebar and the
+// entries area are two independent scroll panes that always fit the
+// viewport, selecting a folder scrolls the entries pane and never the page,
+// and the body cannot be scrolled by script at all.
+import { test, expect } from '@playwright/test';
+import { installApi, settle, fixtureFolders, entry } from '../lib/api.mjs';
+
+test.use({ viewport: { width: 1400, height: 600 } });
+
+// A folder with enough entries to overflow the entries pane.
+function longFolders() {
+    const folders = fixtureFolders();
+    const big = folders.find(f => f.name === 'beta');
+    for (let i = 1; i <= 60; i++) big.entries.push(entry(`host-${String(i).padStart(2, '0')}`, 'ssh'));
+    return folders;
+}
+
+test('the body is clipped and both panes fit the viewport', async ({ page }) => {
+    await installApi(page, { folders: longFolders() });
+    await page.goto('/connections.html');
+    await settle(page);
+    const m = await page.evaluate(() => {
+        const vh = window.innerHeight;
+        const side = document.querySelector('.sidebar').getBoundingClientRect();
+        const main = document.querySelector('.main').getBoundingClientRect();
+        return {
+            bodyOverflow: getComputedStyle(document.body).overflow,
+            sideBottom: side.bottom, mainBottom: main.bottom, vh,
+            mainOverflowY: getComputedStyle(document.querySelector('.main')).overflowY
+        };
+    });
+    expect(m.bodyOverflow).toBe('clip');
+    expect(m.sideBottom).toBeLessThanOrEqual(m.vh + 1);
+    expect(m.mainBottom).toBeLessThanOrEqual(m.vh + 1);
+    expect(['auto', 'scroll']).toContain(m.mainOverflowY);
+});
+
+test('selecting a folder scrolls the entries pane to its top, never the page', async ({ page }) => {
+    await installApi(page, { folders: longFolders() });
+    await page.goto('/connections.html');
+    await settle(page);
+    await page.locator('.folder-row').filter({ hasText: /beta/ }).first().click();
+    await expect(page.locator('#entries-title')).toHaveText(/beta/);
+    // Scroll the entries pane down, then pick another folder: the pane goes
+    // back to the top and the document never moved.
+    const main = page.locator('.main');
+    await main.evaluate(el => { el.scrollTop = 600; });
+    expect(await main.evaluate(el => el.scrollTop)).toBeGreaterThan(0);
+    await page.locator('.folder-row').filter({ hasText: /tenant-03/ }).first().click();
+    await expect(page.locator('#entries-title')).toHaveText(/tenant-03/);
+    const after = await page.evaluate(() => ({
+        mainTop: document.querySelector('.main').scrollTop,
+        pageTop: document.scrollingElement.scrollTop,
+        brandVisible: document.querySelector('.brand-row, h1').getBoundingClientRect().top >= 0
+    }));
+    expect(after.mainTop).toBe(0);
+    expect(after.pageTop).toBe(0);
+    expect(after.brandVisible, 'the brand row must not be pushed off the top').toBe(true);
+});
diff --git a/tests/e2e/specs/facet-filters.spec.mjs b/tests/e2e/specs/facet-filters.spec.mjs
new file mode 100644
index 00000000..1dcf15e0
--- /dev/null
+++ b/tests/e2e/specs/facet-filters.spec.mjs
@@ -0,0 +1,86 @@
+// Shared facet filters (filters.js) on the list pages: a dropdown per facet,
+// multi-select with counts, combined with the text search; the selection
+// persists per page in sessionStorage. One list toolbar on every page.
+import { test, expect } from '@playwright/test';
+import { installApi, settle } from '../lib/api.mjs';
+
+async function openFacet(page, mount, label) {
+    const btn = page.locator(`${mount} .rg-facet-btn`).filter({ hasText: label }).first();
+    await expect(btn).toBeVisible();
+    await btn.click();
+    const menu = btn.locator('xpath=..').locator('.rg-facet-menu');
+    await expect(menu).toBeVisible();
+    return menu;
+}
+
+test('sessions: the Type facet narrows the list and the count follows', async ({ page }) => {
+    await installApi(page, { role: 'admin' });
+    await page.goto('/sessions.html');
+    await settle(page);
+    const rows = page.locator('#session-list tr');
+    await expect(rows).toHaveCount(2);
+    // Every list page shares the toolbar: search box, facets, action on the right.
+    await expect(page.locator('#sessions .list-tools .list-search')).toBeVisible();
+    await expect(page.locator('#sessions .list-tools #new-session-btn')).toBeVisible();
+
+    const menu = await openFacet(page, '#session-filters', 'Type');
+    const ssh = menu.locator('.rg-facet-opt').filter({ hasText: /ssh/i }).first();
+    await expect(ssh.locator('.rg-facet-count')).toHaveText('1');
+    await ssh.locator('input[type="checkbox"]').check();
+    await expect(rows).toHaveCount(1);
+    await expect(rows.first()).toContainText('web01');
+
+    // The selection survives a reload of the page (sessionStorage).
+    await page.reload();
+    await settle(page);
+    await expect(page.locator('#session-list tr')).toHaveCount(1);
+});
+
+test('sessions: the search box combines with the facets', async ({ page }) => {
+    await installApi(page, { role: 'admin' });
+    await page.goto('/sessions.html');
+    await settle(page);
+    const search = page.locator('#session-search');
+    await expect(search).toHaveAttribute('placeholder', /^Search sessions/);
+    await search.fill('bob@');
+    await expect(page.locator('#session-list tr')).toHaveCount(1);
+    await expect(page.locator('#session-list tr').first()).toContainText('dc01');
+    await search.fill('nobody');
+    await expect(page.locator('#session-list tr')).toHaveCount(0);
+});
+
+test('recordings and reports carry the shared facets and the type badge', async ({ page }) => {
+    await installApi(page);
+    await page.goto('/recordings.html');
+    await settle(page);
+    await expect(page.locator('#rec-filters .rg-facet-btn').first()).toBeVisible();
+    await expect(page.locator('#rec-search')).toHaveAttribute('placeholder', /^Search recordings/);
+    await expect(page.locator('#recording-list .type-badge').first()).toBeVisible();
+    const menu = await openFacet(page, '#rec-filters', 'Type');
+    await menu.locator('.rg-facet-opt').filter({ hasText: /rdp/i }).locator('input').check();
+    await expect(page.locator('#recording-list tbody tr')).toHaveCount(1);
+    await expect(page.locator('#recording-list tbody tr').first()).toContainText('dc01');
+
+    await page.goto('/reports.html');
+    await settle(page);
+    await expect(page.locator('#history-filters .rg-facet-btn').first()).toBeVisible();
+    await expect(page.locator('#export-csv-btn')).toBeVisible();
+    const m2 = await openFacet(page, '#history-filters', 'Type');
+    await m2.locator('.rg-facet-opt').filter({ hasText: /ssh/i }).locator('input').check();
+    await expect(page.locator('#history-body tr')).toHaveCount(1);
+    await expect(page.locator('#history-body tr').first()).toContainText('web01');
+});
+
+test('connections: the Type facet in the folder header filters the entries table', async ({ page }) => {
+    await installApi(page);
+    await page.goto('/connections.html');
+    await settle(page);
+    await page.locator('.folder-row').filter({ hasText: /acme/ }).first().click();
+    await expect(page.locator('.main .entries-table tbody tr')).toHaveCount(4);
+    const menu = await openFacet(page, '#entries-filters', 'Type');
+    await menu.locator('.rg-facet-opt').filter({ hasText: /rdp/i }).locator('input').check();
+    await expect(page.locator('.main .entries-table tbody tr')).toHaveCount(2);
+    // The folder header stays pinned at the top of the entries pane.
+    const pos = await page.locator('#entries-header').evaluate(el => getComputedStyle(el).position);
+    expect(pos).toBe('sticky');
+});
diff --git a/tests/e2e/specs/role-nav.spec.mjs b/tests/e2e/specs/role-nav.spec.mjs
new file mode 100644
index 00000000..950c7fae
--- /dev/null
+++ b/tests/e2e/specs/role-nav.spec.mjs
@@ -0,0 +1,47 @@
+// Every page carries the same navigation, gated by role through the
+// data-role-level attribute on <html> and data-min-role on the links: a
+// viewer never sees Sessions, Reports, Tokens or Admin, an admin sees all
+// of them, and the link order is identical from page to page.
+import { test, expect } from '@playwright/test';
+import { installApi, settle } from '../lib/api.mjs';
+
+const PAGES = ['/connections.html', '/sessions.html', '/recordings.html', '/reports.html'];
+const ALL = ['Connections', 'Sessions', 'Recordings', 'Reports', 'Docs', 'Tokens', 'Admin'];
+
+async function visibleNav(page) {
+    return page.locator('nav a:visible').evaluateAll(as => as.map(a => a.textContent.trim()).filter(t => /^[A-Z][a-z]+$/.test(t)));
+}
+
+for (const path of PAGES) {
+    test(`admin sees the full nav on ${path}`, async ({ page }) => {
+        await installApi(page, { role: 'admin' });
+        await page.goto(path);
+        await settle(page);
+        await expect(page.locator('html')).toHaveAttribute('data-role-level', '4');
+        const links = await visibleNav(page);
+        for (const l of ALL) expect(links, `${l} must be in the nav`).toContain(l);
+        // Same order on every page.
+        expect(links.filter(l => ALL.includes(l))).toEqual(ALL);
+    });
+}
+
+test('a viewer sees no gated links', async ({ page }) => {
+    await installApi(page, { role: 'viewer' });
+    await page.goto('/connections.html');
+    await settle(page);
+    await expect(page.locator('html')).toHaveAttribute('data-role-level', '1');
+    const links = await visibleNav(page);
+    for (const gated of ['Sessions', 'Reports', 'Tokens', 'Admin']) expect(links).not.toContain(gated);
+    expect(links).toContain('Connections');
+    expect(links).toContain('Recordings');
+});
+
+test('an operator sees Tokens but not Sessions, Reports or Admin', async ({ page }) => {
+    await installApi(page, { role: 'operator' });
+    await page.goto('/recordings.html');
+    await settle(page);
+    await expect(page.locator('html')).toHaveAttribute('data-role-level', '2');
+    const links = await visibleNav(page);
+    expect(links).toContain('Tokens');
+    for (const gated of ['Sessions', 'Reports', 'Admin']) expect(links).not.toContain(gated);
+});
diff --git a/tests/e2e/specs/sessions-adhoc-modal.spec.mjs b/tests/e2e/specs/sessions-adhoc-modal.spec.mjs
new file mode 100644
index 00000000..5b34d9b7
--- /dev/null
+++ b/tests/e2e/specs/sessions-adhoc-modal.spec.mjs
@@ -0,0 +1,35 @@
+// The ad-hoc session form lives in a modal opened from the button on the
+// Sessions heading; Cancel and Connect share a height.
+import { test, expect } from '@playwright/test';
+import { installApi, settle } from '../lib/api.mjs';
+
+test('the ad-hoc form opens as a modal and Cancel closes it', async ({ page }) => {
+    await installApi(page, { role: 'poweruser' });
+    await page.goto('/sessions.html');
+    await settle(page);
+    const modal = page.locator('#adhoc-modal');
+    await expect(modal).not.toHaveClass(/active/);
+    const btn = page.locator('#new-session-btn');
+    await expect(btn).toBeVisible();
+    await btn.click();
+    await expect(modal).toHaveClass(/active/);
+    await expect(modal).toHaveAttribute('role', 'dialog');
+    await expect(page.locator('#adhoc-modal-title')).toBeVisible();
+    await expect(page.locator('#session-form')).toBeVisible();
+
+    const [ok, cancel] = await Promise.all([
+        page.locator('#connect-btn').boundingBox(),
+        page.locator('#adhoc-cancel').boundingBox()
+    ]);
+    expect(Math.abs(ok.height - cancel.height), 'Connect and Cancel must be the same height').toBeLessThanOrEqual(1);
+
+    await page.locator('#adhoc-cancel').click();
+    await expect(modal).not.toHaveClass(/active/);
+});
+
+test('a viewer gets no ad-hoc button', async ({ page }) => {
+    await installApi(page, { role: 'viewer' });
+    await page.goto('/sessions.html');
+    await settle(page);
+    await expect(page.locator('#new-session-btn')).toBeHidden();
+});