Fixed web ui. Added deprecation feature

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "khm"
-version = "0.8.1"
+version = "0.6.1"
 edition = "2021"
 authors = ["AB <ab@hexor.cy>"]
 

src/client.rs

@@ -28,10 +28,10 @@ fn read_known_hosts(file_path: &str) -> io::Result<Vec<SshKey>> {
                 if parts.len() >= 2 {
                     let server = parts[0].to_string();
                     let public_key = parts[1..].join(" ");
-                    keys.push(SshKey { 
+                    keys.push(SshKey {
-                        server, 
+                        server,
                         public_key,
-                        deprecated: false,  // Keys from known_hosts are not deprecated
+                        deprecated: false, // Keys from known_hosts are not deprecated
                     });
                 }
             }
@@ -55,7 +55,10 @@ fn write_known_hosts(file_path: &str, keys: &[SshKey]) -> io::Result<()> {
     for key in active_keys {
         writeln!(file, "{} {}", key.server, key.public_key)?;
     }
-    info!("Wrote {} active keys to known_hosts file (filtered out deprecated keys)", active_count);
+    info!(
+        "Wrote {} active keys to known_hosts file (filtered out deprecated keys)",
+        active_count
+    );
 
     Ok(())
 }
@@ -172,12 +175,15 @@ async fn get_keys_from_server(
 
 pub async fn run_client(args: crate::Args) -> std::io::Result<()> {
     info!("Client mode: Reading known_hosts file");
-    
+
     let keys = match read_known_hosts(&args.known_hosts) {
         Ok(keys) => keys,
         Err(e) => {
             if e.kind() == io::ErrorKind::NotFound {
-                info!("known_hosts file not found: {}. Starting with empty key list.", args.known_hosts);
+                info!(
+                    "known_hosts file not found: {}. Starting with empty key list.",
+                    args.known_hosts
+                );
                 Vec::new()
             } else {
                 error!("Failed to read known_hosts file: {}", e);
@@ -188,10 +194,13 @@ pub async fn run_client(args: crate::Args) -> std::io::Result<()> {
 
     let host = args.host.expect("host is required in client mode");
     info!("Client mode: Sending keys to server at {}", host);
-    
+
     if let Err(e) = send_keys_to_server(&host, keys, &args.basic_auth).await {
         error!("Failed to send keys to server: {}", e);
-        return Err(io::Error::new(io::ErrorKind::Other, format!("Network error: {}", e)));
+        return Err(io::Error::new(
+            io::ErrorKind::Other,
+            format!("Network error: {}", e),
+        ));
     }
 
     if args.in_place {
@@ -200,7 +209,10 @@ pub async fn run_client(args: crate::Args) -> std::io::Result<()> {
             Ok(keys) => keys,
             Err(e) => {
                 error!("Failed to get keys from server: {}", e);
-                return Err(io::Error::new(io::ErrorKind::Other, format!("Network error: {}", e)));
+                return Err(io::Error::new(
+                    io::ErrorKind::Other,
+                    format!("Network error: {}", e),
+                ));
             }
         };
 

src/main.rs

@@ -126,8 +126,14 @@ async fn main() -> std::io::Result<()> {
         eprintln!("Error: You must specify either server mode (--server) or client mode (--host)");
         eprintln!();
         eprintln!("Examples:");
-        eprintln!("  Server mode: {} --server --db-user admin --db-password pass --flows work,home", env!("CARGO_PKG_NAME"));
+        eprintln!(
-        eprintln!("  Client mode: {} --host https://khm.example.com/work", env!("CARGO_PKG_NAME"));
+            "  Server mode: {} --server --db-user admin --db-password pass --flows work,home",
+            env!("CARGO_PKG_NAME")
+        );
+        eprintln!(
+            "  Client mode: {} --host https://khm.example.com/work",
+            env!("CARGO_PKG_NAME")
+        );
         eprintln!();
         eprintln!("Use --help for more information.");
         std::process::exit(1);

src/server.rs

@@ -2,11 +2,9 @@ use actix_web::{web, App, HttpRequest, HttpResponse, HttpServer, Responder};
 use log::{error, info};
 use regex::Regex;
 use serde::{Deserialize, Serialize};
-use std::collections::HashMap;
 use std::sync::{Arc, Mutex};
-use tokio_postgres::{Client, NoTls};
 
-use crate::db;
+use crate::db::ReconnectingDbClient;
 
 #[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct SshKey {
@@ -37,43 +35,6 @@ pub fn is_valid_ssh_key(key: &str) -> bool {
         || ed25519_re.is_match(key)
 }
 
-pub async fn get_keys_from_db(client: &Client) -> Result<Vec<Flow>, tokio_postgres::Error> {
-    let rows = client.query(
-        "SELECT k.host, k.key, k.deprecated, f.name FROM public.keys k INNER JOIN public.flows f ON k.key_id = f.key_id",
-        &[]
-    ).await?;
-
-    let mut flows_map: HashMap<String, Flow> = HashMap::new();
-
-    for row in rows {
-        let host: String = row.get(0);
-        let key: String = row.get(1);
-        let deprecated: bool = row.get(2);
-        let flow: String = row.get(3);
-
-        let ssh_key = SshKey {
-            server: host,
-            public_key: key,
-            deprecated,
-        };
-
-        if let Some(flow_entry) = flows_map.get_mut(&flow) {
-            flow_entry.servers.push(ssh_key);
-        } else {
-            flows_map.insert(
-                flow.clone(),
-                Flow {
-                    name: flow,
-                    servers: vec![ssh_key],
-                },
-            );
-        }
-    }
-
-    info!("Retrieved {} flows from database", flows_map.len());
-    Ok(flows_map.into_values().collect())
-}
-
 // Extract client hostname from request headers
 fn get_client_hostname(req: &HttpRequest) -> String {
     if let Some(hostname) = req.headers().get("X-Client-Hostname") {
@@ -110,10 +71,11 @@ pub async fn get_keys(
     let flows = flows.lock().unwrap();
     if let Some(flow) = flows.iter().find(|flow| flow.name == flow_id_str) {
         // Check if we should include deprecated keys (default: false for CLI clients)
-        let include_deprecated = query.get("include_deprecated")
+        let include_deprecated = query
+            .get("include_deprecated")
             .map(|v| v == "true")
             .unwrap_or(false);
-        
+
         let servers: Vec<&SshKey> = if include_deprecated {
             // Return all keys (for web interface)
             flow.servers.iter().collect()
@@ -121,7 +83,7 @@ pub async fn get_keys(
             // Return only active keys (for CLI clients)
             flow.servers.iter().filter(|key| !key.deprecated).collect()
         };
-        
+
         info!(
             "Returning {} keys ({} total, deprecated filtered: {}) for flow '{}' to client '{}'",
             servers.len(),
@@ -144,7 +106,7 @@ pub async fn add_keys(
     flows: web::Data<Flows>,
     flow_id: web::Path<String>,
     new_keys: web::Json<Vec<SshKey>>,
-    db_client: web::Data<Arc<Client>>,
+    db_client: web::Data<Arc<ReconnectingDbClient>>,
     allowed_flows: web::Data<Vec<String>>,
     req: HttpRequest,
 ) -> impl Responder {
@@ -190,7 +152,10 @@ pub async fn add_keys(
     );
 
     // Batch insert keys with statistics
-    let key_stats = match crate::db::batch_insert_keys(&db_client, &valid_keys).await {
+    let key_stats = match db_client
+        .batch_insert_keys_reconnecting(valid_keys.clone())
+        .await
+    {
         Ok(stats) => stats,
         Err(e) => {
             error!(
@@ -208,7 +173,9 @@ pub async fn add_keys(
         let key_ids: Vec<i32> = key_stats.key_id_map.iter().map(|(_, id)| *id).collect();
 
         // Batch insert key-flow associations
-        if let Err(e) = crate::db::batch_insert_flow_keys(&db_client, &flow_id_str, &key_ids).await
+        if let Err(e) = db_client
+            .batch_insert_flow_keys_reconnecting(flow_id_str.clone(), key_ids.clone())
+            .await
         {
             error!(
                 "Failed to batch insert flow keys from client '{}' into database: {}",
@@ -232,7 +199,7 @@ pub async fn add_keys(
     }
 
     // Get updated data
-    let updated_flows = match get_keys_from_db(&db_client).await {
+    let updated_flows = match db_client.get_keys_from_db_reconnecting().await {
         Ok(flows) => flows,
         Err(e) => {
             error!(
@@ -287,28 +254,22 @@ pub async fn run_server(args: crate::Args) -> std::io::Result<()> {
         args.db_host, db_user, db_password, args.db_name
     );
 
-    info!("Connecting to database at {}", args.db_host);
+    info!("Creating database client for {}", args.db_host);
-    let (db_client, connection) = match tokio_postgres::connect(&db_conn_str, NoTls).await {
+    let mut db_client_temp = ReconnectingDbClient::new(db_conn_str.clone());
-        Ok((client, conn)) => (client, conn),
-        Err(e) => {
-            error!("Failed to connect to the database: {}", e);
-            return Err(std::io::Error::new(
-                std::io::ErrorKind::ConnectionRefused,
-                format!("Database connection error: {}", e),
-            ));
-        }
-    };
-    let db_client = Arc::new(db_client);
 
-    // Spawn a new thread to run the database connection
+    // Initial connection
-    tokio::spawn(async move {
+    if let Err(e) = db_client_temp.connect(&db_conn_str).await {
-        if let Err(e) = connection.await {
+        error!("Failed to connect to the database: {}", e);
-            error!("Connection error: {}", e);
+        return Err(std::io::Error::new(
-        }
+            std::io::ErrorKind::ConnectionRefused,
-    });
+            format!("Database connection error: {}", e),
+        ));
+    }
+
+    let db_client = Arc::new(db_client_temp);
 
     // Initialize database schema if needed
-    if let Err(e) = db::initialize_db_schema(&db_client).await {
+    if let Err(e) = db_client.initialize_schema().await {
         error!("Failed to initialize database schema: {}", e);
         return Err(std::io::Error::new(
             std::io::ErrorKind::Other,
@@ -316,7 +277,7 @@ pub async fn run_server(args: crate::Args) -> std::io::Result<()> {
         ));
     }
 
-    let mut initial_flows = match get_keys_from_db(&db_client).await {
+    let mut initial_flows = match db_client.get_keys_from_db_reconnecting().await {
         Ok(flows) => flows,
         Err(e) => {
             error!("Failed to get initial flows from database: {}", e);
@@ -345,15 +306,27 @@ pub async fn run_server(args: crate::Args) -> std::io::Result<()> {
             .app_data(allowed_flows.clone())
             // API routes
             .route("/api/flows", web::get().to(crate::web::get_flows_api))
-            .route("/{flow_id}/keys/{server}", web::delete().to(crate::web::delete_key_by_server))
+            .route(
-            .route("/{flow_id}/keys/{server}/restore", web::post().to(crate::web::restore_key_by_server))
+                "/{flow_id}/keys/{server}",
-            .route("/{flow_id}/keys/{server}/delete", web::delete().to(crate::web::permanently_delete_key_by_server))
+                web::delete().to(crate::web::delete_key_by_server),
+            )
+            .route(
+                "/{flow_id}/keys/{server}/restore",
+                web::post().to(crate::web::restore_key_by_server),
+            )
+            .route(
+                "/{flow_id}/keys/{server}/delete",
+                web::delete().to(crate::web::permanently_delete_key_by_server),
+            )
             // Original API routes
             .route("/{flow_id}/keys", web::get().to(get_keys))
             .route("/{flow_id}/keys", web::post().to(add_keys))
             // Web interface routes
             .route("/", web::get().to(crate::web::serve_web_interface))
-            .route("/static/{filename:.*}", web::get().to(crate::web::serve_static_file))
+            .route(
+                "/static/{filename:.*}",
+                web::get().to(crate::web::serve_static_file),
+            )
     })
     .bind((args.ip.as_str(), args.port))?
     .run()

src/web.rs

@@ -2,9 +2,10 @@ use actix_web::{web, HttpResponse, Result};
 use log::info;
 use rust_embed::RustEmbed;
 use serde_json::json;
-use tokio_postgres::Client;
+use std::sync::Arc;
 
-use crate::server::{get_keys_from_db, Flows};
+use crate::db::ReconnectingDbClient;
+use crate::server::Flows;
 
 #[derive(RustEmbed)]
 #[folder = "static/"]
@@ -20,12 +21,15 @@ pub async fn get_flows_api(allowed_flows: web::Data<Vec<String>>) -> Result<Http
 pub async fn delete_key_by_server(
     flows: web::Data<Flows>,
     path: web::Path<(String, String)>,
-    db_client: web::Data<std::sync::Arc<Client>>,
+    db_client: web::Data<Arc<ReconnectingDbClient>>,
     allowed_flows: web::Data<Vec<String>>,
 ) -> Result<HttpResponse> {
     let (flow_id_str, server_name) = path.into_inner();
 
-    info!("API request to deprecate key for server '{}' in flow '{}'", server_name, flow_id_str);
+    info!(
+        "API request to deprecate key for server '{}' in flow '{}'",
+        server_name, flow_id_str
+    );
 
     if !allowed_flows.contains(&flow_id_str) {
         return Ok(HttpResponse::Forbidden().json(json!({
@@ -34,13 +38,19 @@ pub async fn delete_key_by_server(
     }
 
     // Deprecate in database
-    match crate::db::deprecate_key_by_server(&db_client, &server_name, &flow_id_str).await {
+    match db_client
+        .deprecate_key_by_server_reconnecting(server_name.clone(), flow_id_str.clone())
+        .await
+    {
         Ok(deprecated_count) => {
             if deprecated_count > 0 {
-                info!("Deprecated {} key(s) for server '{}' in flow '{}'", deprecated_count, server_name, flow_id_str);
+                info!(
-                
+                    "Deprecated {} key(s) for server '{}' in flow '{}'",
+                    deprecated_count, server_name, flow_id_str
+                );
+
                 // Refresh the in-memory flows
-                let updated_flows = match get_keys_from_db(&db_client).await {
+                let updated_flows = match db_client.get_keys_from_db_reconnecting().await {
                     Ok(flows) => flows,
                     Err(e) => {
                         return Ok(HttpResponse::InternalServerError().json(json!({
@@ -62,11 +72,9 @@ pub async fn delete_key_by_server(
                 })))
             }
         }
-        Err(e) => {
+        Err(e) => Ok(HttpResponse::InternalServerError().json(json!({
-            Ok(HttpResponse::InternalServerError().json(json!({
+            "error": format!("Failed to deprecate key: {}", e)
-                "error": format!("Failed to deprecate key: {}", e)
+        }))),
-            })))
-        }
     }
 }
 
@@ -74,12 +82,15 @@ pub async fn delete_key_by_server(
 pub async fn restore_key_by_server(
     flows: web::Data<Flows>,
     path: web::Path<(String, String)>,
-    db_client: web::Data<std::sync::Arc<Client>>,
+    db_client: web::Data<Arc<ReconnectingDbClient>>,
     allowed_flows: web::Data<Vec<String>>,
 ) -> Result<HttpResponse> {
     let (flow_id_str, server_name) = path.into_inner();
 
-    info!("API request to restore key for server '{}' in flow '{}'", server_name, flow_id_str);
+    info!(
+        "API request to restore key for server '{}' in flow '{}'",
+        server_name, flow_id_str
+    );
 
     if !allowed_flows.contains(&flow_id_str) {
         return Ok(HttpResponse::Forbidden().json(json!({
@@ -88,13 +99,19 @@ pub async fn restore_key_by_server(
     }
 
     // Restore in database
-    match crate::db::restore_key_by_server(&db_client, &server_name, &flow_id_str).await {
+    match db_client
+        .restore_key_by_server_reconnecting(server_name.clone(), flow_id_str.clone())
+        .await
+    {
         Ok(restored_count) => {
             if restored_count > 0 {
-                info!("Restored {} key(s) for server '{}' in flow '{}'", restored_count, server_name, flow_id_str);
+                info!(
-                
+                    "Restored {} key(s) for server '{}' in flow '{}'",
+                    restored_count, server_name, flow_id_str
+                );
+
                 // Refresh the in-memory flows
-                let updated_flows = match get_keys_from_db(&db_client).await {
+                let updated_flows = match db_client.get_keys_from_db_reconnecting().await {
                     Ok(flows) => flows,
                     Err(e) => {
                         return Ok(HttpResponse::InternalServerError().json(json!({
@@ -116,11 +133,9 @@ pub async fn restore_key_by_server(
                 })))
             }
         }
-        Err(e) => {
+        Err(e) => Ok(HttpResponse::InternalServerError().json(json!({
-            Ok(HttpResponse::InternalServerError().json(json!({
+            "error": format!("Failed to restore key: {}", e)
-                "error": format!("Failed to restore key: {}", e)
+        }))),
-            })))
-        }
     }
 }
 
@@ -128,12 +143,15 @@ pub async fn restore_key_by_server(
 pub async fn permanently_delete_key_by_server(
     flows: web::Data<Flows>,
     path: web::Path<(String, String)>,
-    db_client: web::Data<std::sync::Arc<Client>>,
+    db_client: web::Data<Arc<ReconnectingDbClient>>,
     allowed_flows: web::Data<Vec<String>>,
 ) -> Result<HttpResponse> {
     let (flow_id_str, server_name) = path.into_inner();
 
-    info!("API request to permanently delete key for server '{}' in flow '{}'", server_name, flow_id_str);
+    info!(
+        "API request to permanently delete key for server '{}' in flow '{}'",
+        server_name, flow_id_str
+    );
 
     if !allowed_flows.contains(&flow_id_str) {
         return Ok(HttpResponse::Forbidden().json(json!({
@@ -142,13 +160,19 @@ pub async fn permanently_delete_key_by_server(
     }
 
     // Permanently delete from database
-    match crate::db::permanently_delete_key_by_server(&db_client, &server_name, &flow_id_str).await {
+    match db_client
+        .permanently_delete_key_by_server_reconnecting(server_name.clone(), flow_id_str.clone())
+        .await
+    {
         Ok(deleted_count) => {
             if deleted_count > 0 {
-                info!("Permanently deleted {} key(s) for server '{}' in flow '{}'", deleted_count, server_name, flow_id_str);
+                info!(
-                
+                    "Permanently deleted {} key(s) for server '{}' in flow '{}'",
+                    deleted_count, server_name, flow_id_str
+                );
+
                 // Refresh the in-memory flows
-                let updated_flows = match get_keys_from_db(&db_client).await {
+                let updated_flows = match db_client.get_keys_from_db_reconnecting().await {
                     Ok(flows) => flows,
                     Err(e) => {
                         return Ok(HttpResponse::InternalServerError().json(json!({
@@ -170,23 +194,21 @@ pub async fn permanently_delete_key_by_server(
                 })))
             }
         }
-        Err(e) => {
+        Err(e) => Ok(HttpResponse::InternalServerError().json(json!({
-            Ok(HttpResponse::InternalServerError().json(json!({
+            "error": format!("Failed to delete key: {}", e)
-                "error": format!("Failed to delete key: {}", e)
+        }))),
-            })))
-        }
     }
 }
 
 // Serve static files from embedded assets
 pub async fn serve_static_file(path: web::Path<String>) -> Result<HttpResponse> {
     let file_path = path.into_inner();
-    
+
     match StaticAssets::get(&file_path) {
         Some(content) => {
             let content_type = match std::path::Path::new(&file_path)
                 .extension()
-                .and_then(|s| s.to_str()) 
+                .and_then(|s| s.to_str())
             {
                 Some("html") => "text/html; charset=utf-8",
                 Some("css") => "text/css; charset=utf-8",
@@ -201,22 +223,16 @@ pub async fn serve_static_file(path: web::Path<String>) -> Result<HttpResponse>
                 .content_type(content_type)
                 .body(content.data.as_ref().to_vec()))
         }
-        None => {
+        None => Ok(HttpResponse::NotFound().body(format!("File not found: {}", file_path))),
-            Ok(HttpResponse::NotFound().body(format!("File not found: {}", file_path)))
-        }
     }
 }
 
 // Serve the main web interface from embedded assets
 pub async fn serve_web_interface() -> Result<HttpResponse> {
     match StaticAssets::get("index.html") {
-        Some(content) => {
+        Some(content) => Ok(HttpResponse::Ok()
-            Ok(HttpResponse::Ok()
+            .content_type("text/html; charset=utf-8")
-                .content_type("text/html; charset=utf-8")
+            .body(content.data.as_ref().to_vec())),
-                .body(content.data.as_ref().to_vec()))
+        None => Ok(HttpResponse::NotFound().body("Web interface not found")),
-        }
-        None => {
-            Ok(HttpResponse::NotFound().body("Web interface not found"))
-        }
     }
 }

static/index.html

@@ -36,6 +36,14 @@
                 <button id="addKeyBtn" class="btn btn-primary">Add SSH Key</button>
                 <button id="bulkDeleteBtn" class="btn btn-danger" disabled>Deprecate Selected</button>
                 <button id="bulkPermanentDeleteBtn" class="btn btn-danger" disabled style="display: none;">Delete Selected</button>
+                
+                <div class="filter-controls">
+                    <label class="filter-label">
+                        <input type="checkbox" id="showDeprecatedOnly"> 
+                        <span>Show only deprecated keys</span>
+                    </label>
+                </div>
+                
                 <div class="search-box">
                     <input type="text" id="searchInput" placeholder="Search servers or keys...">
                 </div>
@@ -48,9 +56,9 @@
                             <th>
                                 <input type="checkbox" id="selectAll">
                             </th>
-                            <th>Server</th>
+                            <th>Server/Type</th>
-                            <th>Key Type</th>
                             <th>Key Preview</th>
+                            <th></th>
                             <th>Actions</th>
                         </tr>
                     </thead>

static/script.js

@@ -3,9 +3,13 @@ class SSHKeyManager {
         this.currentFlow = null;
         this.keys = [];
         this.filteredKeys = [];
+        this.groupedKeys = {};
+        this.expandedGroups = new Set();
         this.currentPage = 1;
         this.keysPerPage = 20;
+        this.serversPerPage = 10;
         this.selectedKeys = new Set();
+        this.showDeprecatedOnly = false;
         
         this.initializeEventListeners();
         this.loadFlows();
@@ -50,6 +54,21 @@ class SSHKeyManager {
             this.filterKeys(e.target.value);
         });
 
+        // Deprecated filter checkbox
+        document.getElementById('showDeprecatedOnly').addEventListener('change', (e) => {
+            this.showDeprecatedOnly = e.target.checked;
+            
+            // Update visual state
+            const filterLabel = e.target.closest('.filter-label');
+            if (e.target.checked) {
+                filterLabel.classList.add('active');
+            } else {
+                filterLabel.classList.remove('active');
+            }
+            
+            this.filterKeys(document.getElementById('searchInput').value);
+        });
+
         // Select all checkbox
         document.getElementById('selectAll').addEventListener('change', (e) => {
             this.toggleSelectAll(e.target.checked);
@@ -146,11 +165,12 @@ class SSHKeyManager {
 
         try {
             this.showLoading();
-            const response = await fetch(`/${this.currentFlow}/keys`);
+            const response = await fetch(`/${this.currentFlow}/keys?include_deprecated=true`);
             if (!response.ok) throw new Error('Failed to load keys');
             
             this.keys = await response.json();
-            this.filteredKeys = [...this.keys];
+            this.groupKeys();
+            this.filterKeys();
             this.updateStats();
             this.renderTable();
             this.selectedKeys.clear();
@@ -163,16 +183,37 @@ class SSHKeyManager {
         }
     }
 
+    groupKeys() {
+        this.groupedKeys = {};
+        this.keys.forEach(key => {
+            if (!this.groupedKeys[key.server]) {
+                this.groupedKeys[key.server] = [];
+            }
+            this.groupedKeys[key.server].push(key);
+        });
+        
+        // Groups are closed by default - no auto-expand
+    }
+
     filterKeys(searchTerm) {
-        if (!searchTerm.trim()) {
+        let keys = [...this.keys];
-            this.filteredKeys = [...this.keys];
+        
+        // Apply deprecated filter first
+        if (this.showDeprecatedOnly) {
+            keys = keys.filter(key => key.deprecated);
+        }
+        
+        // Then apply search filter
+        if (!searchTerm || !searchTerm.trim()) {
+            this.filteredKeys = keys;
         } else {
             const term = searchTerm.toLowerCase();
-            this.filteredKeys = this.keys.filter(key => 
+            this.filteredKeys = keys.filter(key => 
                 key.server.toLowerCase().includes(term) || 
                 key.public_key.toLowerCase().includes(term)
             );
         }
+        
         this.currentPage = 1;
         this.renderTable();
     }
@@ -184,6 +225,17 @@ class SSHKeyManager {
         document.getElementById('uniqueServers').textContent = uniqueServers.size;
     }
 
+    getGroupedFilteredKeys() {
+        const groupedFilteredKeys = {};
+        this.filteredKeys.forEach(key => {
+            if (!groupedFilteredKeys[key.server]) {
+                groupedFilteredKeys[key.server] = [];
+            }
+            groupedFilteredKeys[key.server].push(key);
+        });
+        return groupedFilteredKeys;
+    }
+
     renderTable() {
         const tbody = document.getElementById('keysTableBody');
         const noKeysMessage = document.getElementById('noKeysMessage');
@@ -197,37 +249,78 @@ class SSHKeyManager {
 
         noKeysMessage.style.display = 'none';
         
-        const startIndex = (this.currentPage - 1) * this.keysPerPage;
+        // Group filtered keys by server
-        const endIndex = startIndex + this.keysPerPage;
+        const groupedFilteredKeys = this.getGroupedFilteredKeys();
-        const pageKeys = this.filteredKeys.slice(startIndex, endIndex);
         
-        tbody.innerHTML = pageKeys.map((key, index) => {
+        // Calculate pagination for grouped view
-            const keyType = this.getKeyType(key.public_key);
+        const servers = Object.keys(groupedFilteredKeys).sort();
-            const keyPreview = this.getKeyPreview(key.public_key);
+        
-            const keyId = `${key.server}-${key.public_key}`;
+        // For pagination, we'll show a reasonable number of server groups per page
+        const startServerIndex = (this.currentPage - 1) * this.serversPerPage;
+        const endServerIndex = startServerIndex + this.serversPerPage;
+        const pageServers = servers.slice(startServerIndex, endServerIndex);
+        
+        let html = '';
+        
+        pageServers.forEach(server => {
+            const serverKeys = groupedFilteredKeys[server];
+            const activeCount = serverKeys.filter(k => !k.deprecated).length;
+            const deprecatedCount = serverKeys.filter(k => k.deprecated).length;
+            const isExpanded = this.expandedGroups.has(server);
             
-            return `
+            // Server group header
-                <tr${key.deprecated ? ' class="deprecated"' : ''}>
+            html += `
+                <tr class="host-group-header ${isExpanded ? '' : 'collapsed'}">
                     <td>
-                        <input type="checkbox" data-key-id="${keyId}" ${this.selectedKeys.has(keyId) ? 'checked' : ''}>
+                        <input type="checkbox" 
+                               data-group="${this.escapeHtml(server)}" 
+                               onchange="sshKeyManager.toggleGroupSelection('${this.escapeHtml(server)}', this.checked)"
+                               onclick="event.stopPropagation()">
                     </td>
-                    <td>
+                    <td colspan="4" onclick="sshKeyManager.toggleGroup('${this.escapeHtml(server)}')" style="cursor: pointer;">
-                        ${this.escapeHtml(key.server)}
+                        <span class="expand-icon">${isExpanded ? '▼' : '▶'}</span>
-                        ${key.deprecated ? '<span class="deprecated-badge">DEPRECATED</span>' : ''}
+                        <strong>${this.escapeHtml(server)}</strong>
-                    </td>
+                        <span class="host-summary">
-                    <td><span class="key-type ${keyType.toLowerCase()}">${keyType}</span></td>
+                            <span class="key-count">${serverKeys.length} keys</span>
-                    <td><span class="key-preview">${keyPreview}</span></td>
+                            ${deprecatedCount > 0 ? `<span class="deprecated-count">${deprecatedCount} deprecated</span>` : ''}
-                    <td class="table-actions">
+                        </span>
-                        <button class="btn btn-sm btn-secondary" onclick="sshKeyManager.viewKey('${keyId}')">View</button>
-                        ${key.deprecated ? 
-                            `<button class="btn btn-sm btn-success" onclick="sshKeyManager.restoreKey('${keyId}')">Restore</button>
-                             <button class="btn btn-sm btn-danger" onclick="sshKeyManager.permanentlyDeleteKey('${keyId}')">Delete</button>` : 
-                            `<button class="btn btn-sm btn-danger" onclick="sshKeyManager.deleteKey('${keyId}')">Deprecate</button>`
-                        }
                     </td>
                 </tr>
             `;
-        }).join('');
+            
+            // Server keys (if expanded)
+            if (isExpanded) {
+                serverKeys.forEach(key => {
+                    const keyType = this.getKeyType(key.public_key);
+                    const keyPreview = this.getKeyPreview(key.public_key);
+                    const keyId = `${key.server}-${key.public_key}`;
+                    
+                    html += `
+                        <tr class="key-row${key.deprecated ? ' deprecated' : ''}">
+                            <td>
+                                <input type="checkbox" data-key-id="${keyId}" ${this.selectedKeys.has(keyId) ? 'checked' : ''}>
+                            </td>
+                            <td style="padding-left: 2rem;">
+                                <span class="key-type ${keyType.toLowerCase()}">${keyType}</span>
+                                ${key.deprecated ? '<span class="deprecated-badge">DEPRECATED</span>' : ''}
+                            </td>
+                            <td><span class="key-preview">${keyPreview}</span></td>
+                            <td></td>
+                            <td class="table-actions">
+                                <button class="btn btn-sm btn-secondary" onclick="sshKeyManager.viewKey('${keyId}')">View</button>
+                                ${key.deprecated ? 
+                                    `<button class="btn btn-sm btn-success" onclick="sshKeyManager.restoreKey('${keyId}')">Restore</button>
+                                     <button class="btn btn-sm btn-danger" onclick="sshKeyManager.permanentlyDeleteKey('${keyId}')">Delete</button>` : 
+                                    `<button class="btn btn-sm btn-danger" onclick="sshKeyManager.deleteKey('${keyId}')">Deprecate</button>`
+                                }
+                            </td>
+                        </tr>
+                    `;
+                });
+            }
+        });
+        
+        tbody.innerHTML = html;
 
         // Add event listeners for checkboxes
         tbody.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
@@ -240,14 +333,78 @@ class SSHKeyManager {
                 }
                 this.updateBulkDeleteButton();
                 this.updateSelectAllCheckbox();
+                this.updateGroupCheckboxes(); // Update group checkboxes when individual keys change
             });
         });
 
+        // Update group checkboxes to show correct indeterminate state
+        this.updateGroupCheckboxes();
         this.updatePagination();
     }
 
+    toggleGroup(server) {
+        if (this.expandedGroups.has(server)) {
+            this.expandedGroups.delete(server);
+        } else {
+            this.expandedGroups.add(server);
+        }
+        this.renderTable();
+    }
+
+    toggleGroupSelection(server, isChecked) {
+        const groupedFilteredKeys = this.getGroupedFilteredKeys();
+        const serverKeys = groupedFilteredKeys[server] || [];
+        
+        serverKeys.forEach(key => {
+            const keyId = `${key.server}-${key.public_key}`;
+            if (isChecked) {
+                this.selectedKeys.add(keyId);
+            } else {
+                this.selectedKeys.delete(keyId);
+            }
+        });
+        
+        this.updateBulkDeleteButton();
+        this.updateSelectAllCheckbox();
+        this.updateGroupCheckboxes();
+        
+        // Update individual checkboxes without full re-render
+        const tbody = document.getElementById('keysTableBody');
+        serverKeys.forEach(key => {
+            const keyId = `${key.server}-${key.public_key}`;
+            const checkbox = tbody.querySelector(`input[data-key-id="${keyId}"]`);
+            if (checkbox) {
+                checkbox.checked = this.selectedKeys.has(keyId);
+            }
+        });
+    }
+
+    updateGroupCheckboxes() {
+        const groupedFilteredKeys = this.getGroupedFilteredKeys();
+        const tbody = document.getElementById('keysTableBody');
+        
+        Object.keys(groupedFilteredKeys).forEach(server => {
+            const serverKeys = groupedFilteredKeys[server];
+            const groupCheckbox = tbody.querySelector(`input[data-group="${server}"]`);
+            
+            if (groupCheckbox) {
+                const allSelected = serverKeys.every(key => 
+                    this.selectedKeys.has(`${key.server}-${key.public_key}`)
+                );
+                const someSelected = serverKeys.some(key => 
+                    this.selectedKeys.has(`${key.server}-${key.public_key}`)
+                );
+                
+                groupCheckbox.checked = allSelected;
+                groupCheckbox.indeterminate = someSelected && !allSelected;
+            }
+        });
+    }
+
     updatePagination() {
-        const totalPages = Math.ceil(this.filteredKeys.length / this.keysPerPage);
+        const groupedFilteredKeys = this.getGroupedFilteredKeys();
+        const totalServers = Object.keys(groupedFilteredKeys).length;
+        const totalPages = Math.ceil(totalServers / this.serversPerPage);
         
         document.getElementById('pageInfo').textContent = `Page ${this.currentPage} of ${totalPages}`;
         document.getElementById('prevPage').disabled = this.currentPage <= 1;
@@ -255,7 +412,10 @@ class SSHKeyManager {
     }
 
     changePage(newPage) {
-        const totalPages = Math.ceil(this.filteredKeys.length / this.keysPerPage);
+        const groupedFilteredKeys = this.getGroupedFilteredKeys();
+        const totalServers = Object.keys(groupedFilteredKeys).length;
+        const totalPages = Math.ceil(totalServers / this.serversPerPage);
+        
         if (newPage >= 1 && newPage <= totalPages) {
             this.currentPage = newPage;
             this.renderTable();

static/style.css

@@ -170,6 +170,46 @@ header h1 {
     flex-wrap: wrap;
 }
 
+.filter-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.filter-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    cursor: pointer;
+    user-select: none;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--border-radius);
+    transition: background-color 0.2s ease;
+}
+
+.filter-label:hover {
+    background-color: var(--background);
+}
+
+.filter-label.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.filter-label.active input[type="checkbox"] {
+    accent-color: white;
+}
+
+.filter-label input[type="checkbox"] {
+    margin: 0;
+}
+
+.filter-label span {
+    white-space: nowrap;
+}
+
 .search-box input {
     padding: 0.5rem 1rem;
     border: 1px solid var(--border);
@@ -225,6 +265,79 @@ header h1 {
     color: var(--text-secondary);
 }
 
+.host-group-header {
+    background-color: #f1f5f9;
+    font-weight: 600;
+    transition: background-color 0.2s ease;
+    border-left: 4px solid var(--primary-color);
+}
+
+.host-group-header:hover {
+    background-color: #e2e8f0;
+}
+
+.host-group-header.collapsed {
+    border-left-color: var(--secondary-color);
+}
+
+.host-group-header .expand-icon {
+    transition: transform 0.2s ease;
+    display: inline-block;
+    margin-right: 0.5rem;
+    user-select: none;
+}
+
+.host-group-header.collapsed .expand-icon {
+    transform: rotate(-90deg);
+}
+
+.host-group-header input[type="checkbox"] {
+    margin: 0;
+}
+
+.host-group-header td:first-child {
+    width: 50px;
+    text-align: center;
+}
+
+.host-group-header td:nth-child(2) {
+    cursor: pointer;
+    user-select: none;
+}
+
+.key-row {
+    border-left: 4px solid transparent;
+}
+
+.key-row.hidden {
+    display: none;
+}
+
+.host-summary {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.key-count {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-left: 0.5rem;
+}
+
+.deprecated-count {
+    background-color: var(--danger-color);
+    color: white;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-left: 0.25rem;
+}
+
 .key-preview {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
     font-size: 0.875rem;
@@ -480,6 +593,11 @@ header h1 {
     .actions-panel {
         flex-direction: column;
         align-items: stretch;
+        gap: 1rem;
+    }
+
+    .filter-controls {
+        justify-content: center;
     }
 
     .search-box input {
@@ -515,6 +633,13 @@ input[type="checkbox"] {
     accent-color: var(--primary-color);
 }
 
+/* Indeterminate checkbox styling */
+input[type="checkbox"]:indeterminate {
+    background-color: var(--primary-color);
+    background-image: linear-gradient(90deg, transparent 40%, white 40%, white 60%, transparent 60%);
+    border-color: var(--primary-color);
+}
+
 /* Action buttons in table */
 .table-actions {
     display: flex;