CHANGELOG.md

@@ -4,28 +4,10 @@ All notable changes to TRCAA are documented here.
 Commit types shown: feat, fix, perf, docs, refactor.
 CI, chore, and build changes are excluded.
 
-## [1.2.1] - 2026-06-12
+## [Unreleased]
 
-### Fixed
+### Bug Fixes
-- Auto-updater moved out of Proxmox settings into its own Settings > Updater page
+- Proxmox PDM v1.2.0 bugs and feature parity
-- Proxmox settings (port, timeout, retry, SSL, caching, debug) now persist via localStorage
-- Removed hardcoded dummy ACL entries from the Access Control page — data now loads from the connected cluster
-- Fixed Proxmox connection Add/Edit forms: password field added to Edit form, Refresh button now functional
-- Proxmox sidebar section starts collapsed by default (click to expand)
-
-### Added
-- **Phase 8**: HA Groups Manager — full CRUD for HA groups and resources with live backend data
-- **Phase 9**: User Management — Users, Groups, Auth Realms (LDAP/AD/OpenID) tabs in Access Control
-- **Phase 10**: Certificate Manager — TLS certificate viewer with ACME ordering and custom cert upload
-- **Phase 11**: Subscription Registry — per-cluster subscription status and key management
-- **Phase 12**: Notes System — view and edit cluster notes with markdown support
-- **Phase 13**: Resource Search — full-text search across VMs, containers, nodes, storage
-- **Phase 14**: Custom Views — create, list, and delete named resource views
-- **Phase 15**: Connection Health — live connected/disconnected status per cluster
-- Administration Panel — Node Status, APT Updates, Repositories, System Log, Tasks tabs
-- Network Management page — list network interfaces and bridges per node
-- Tasks page connected to live cluster task log
-- All 20 missing Proxmox backend client functions added (HA, ACL, users, realms, notes, search, node status, APT, syslog, network, views, subscriptions, tasks)
 
 ## [1.2.0] — 2026-06-11
 

TICKET-proxmox-v1.2.1-fixes.md

@@ -1,63 +0,0 @@
-# Proxmox PDM v1.2.1 — Bug Fixes & 100% Feature Parity
-
-## Description
-
-This ticket tracks the v1.2.1 release of the Proxmox integration in TRCAA, which delivers 100% feature parity with upstream Proxmox Datacenter Manager (PDM) and resolves four reported UX issues.
-
-The implementation was cross-referenced against the PDM source at https://github.com/proxmox/proxmox-datacenter-manager/tree/master.
-
-## Acceptance Criteria
-
-- [ ] Auto-updater is in Settings > Updater, not under Proxmox settings
-- [ ] Proxmox sidebar section is collapsed by default
-- [ ] No dummy/hardcoded data visible anywhere in the Proxmox section
-- [ ] Adding and saving a Proxmox remote (VE or PBS) works end-to-end
-- [ ] All 17 PDM feature phases implemented or marked out-of-scope with justification
-- [ ] TypeScript: 0 errors
-- [ ] ESLint: 0 warnings
-- [ ] Rust: `cargo check` clean
-
-## Work Implemented
-
-### Bug Fixes
-1. Auto-updater relocated to Settings > Updater page
-2. Proxmox settings persist via localStorage (port, timeout, retry, SSL, caching, debug)
-3. ACL page dummy data removed; loads from live cluster
-4. EditRemoteForm: added missing password field; Refresh button functional
-5. Proxmox nav section collapsed by default (accordion)
-
-### Feature Phases (PDM Parity)
-- **Phase 8**: HA Groups Manager (HAGroupsList, HAResourcesList, real backend)
-- **Phase 9**: User Management (AclList, UserList, RealmList, multi-tab ACL page)
-- **Phase 10**: Certificate Manager (CertificateList with expiry coloring, ACME, upload)
-- **Phase 11**: Subscription Registry (per-cluster status, key management)
-- **Phase 12**: Notes System (view/edit cluster notes)
-- **Phase 13**: Resource Search (cross-cluster full-text search)
-- **Phase 14**: Custom Views (CRUD for named resource views)
-- **Phase 15**: Connection Health (connected/disconnected status per cluster)
-- Administration Panel (Node Status, APT Updates, Repos, Syslog, Tasks)
-- Network Management (interface list with type/status/addressing)
-- Tasks page (live cluster task log, status badges)
-- 20 new TypeScript client functions + 20 Rust command stubs
-
-### Version
-- `package.json`, `tauri.conf.json`, `Cargo.toml`: bumped to 1.2.1
-
-## Testing Needed
-
-- [ ] Settings > Updater loads and shows correct channel
-- [ ] Settings > Proxmox: Save button persists values; Reset restores defaults
-- [ ] Proxmox nav collapsed on app start; click to expand
-- [ ] Remotes: Add a PVE remote — fills form, submits, appears in list
-- [ ] Remotes: Edit a remote — password field visible, save works
-- [ ] Remotes: Refresh button reloads the list
-- [ ] Access Control: No dummy data; ACL/Users/Realms tabs load from backend
-- [ ] HA Groups: Creates and lists HA groups
-- [ ] Certificates: Loads certs, shows expiry colors
-- [ ] Subscription: Shows per-cluster subscription status
-- [ ] Notes: View and edit cluster notes
-- [ ] Search: Returns results across clusters
-- [ ] Admin: Node Status shows CPU/memory; Syslog scrolls entries
-- [ ] Network: Lists network interfaces per node
-- [ ] Tasks: Lists recent cluster tasks
-- [ ] Views: Create and delete a custom view

docs/PROXMOX-FEATURE-PARITY-STATUS.md

@@ -64,61 +64,18 @@ This document tracks the implementation of 100% feature parity with Proxmox Data
   - Sortable columns (rule #, action, protocol, source, destination, port, status)
   - Move up/down, edit, enable/disable, delete actions
 
-#### Phase 8: HA Groups Manager (100% Complete)
+### 🔄 In Progress Phases
-- `HAGroupsList.tsx` - HA group management with full CRUD
-- `HAResourcesList.tsx` - HA resource management tied to groups
-- Live backend data via Tauri commands; no mock/stub data
 
-#### Phase 9: User Management (100% Complete)
+#### Phase 8: HA Groups Manager UI (Pending)
-- `AclList.tsx` - Access control list; loads from connected cluster (no dummy data)
+#### Phase 9: User Management UI (Pending)
-- `UserList.tsx` - User management table with role assignment
+#### Phase 10: Certificate Manager UI (Pending)
-- `RealmList.tsx` - Auth realm configuration (LDAP/AD/OpenID)
+#### Phase 11: Subscription Registry UI (Pending)
-- Multi-tab Access Control page replacing previous stub
+#### Phase 12: Notes System (Pending)
-
+#### Phase 13: Search Functionality (Pending)
-#### Phase 10: Certificate Manager (100% Complete)
+#### Phase 14: Advanced Cluster Operations (Pending)
-- `CertificateList.tsx` - TLS certificate viewer with expiry-based color coding
+#### Phase 15: Connection Caching & Failover (Pending)
-- ACME order workflow (Let's Encrypt)
+#### Phase 16: CLI Tools (Pending)
-- Custom certificate upload form
+#### Phase 17: Testing & Documentation (Pending)
-
-#### Phase 11: Subscription Registry (100% Complete)
-- Per-cluster subscription status display
-- Subscription key management (add, update, check)
-
-#### Phase 12: Notes System (100% Complete)
-- View and edit cluster notes with markdown rendering
-- Saves back to cluster via Tauri command
-
-#### Phase 13: Resource Search (100% Complete)
-- Full-text search across VMs, containers, nodes, and storage
-- Cross-cluster results with remote attribution
-
-#### Phase 14: Custom Views (100% Complete)
-- Create, list, and delete named resource views
-- Views persist per-cluster via backend
-
-#### Phase 15: Connection Health (100% Complete)
-- Live connected/disconnected status per cluster
-- Status indicator in sidebar and cluster list
-
-#### Phase 16: CLI Tools — Out of Scope
-- CLI tools (`proxmox-datacenter-client`) are part of the PDM server package and have no equivalent in a desktop application context. This phase is explicitly excluded.
-
-#### Phase 17: Testing & Documentation (100% Complete)
-- Feature parity status document updated to reflect all completed phases
-- Ticket summary `TICKET-proxmox-v1.2.1-fixes.md` created
-- CHANGELOG updated with full 1.2.1 entry
-- Version bumped to 1.2.1 across `package.json`, `tauri.conf.json`, `Cargo.toml`
-
-### Additional Features Delivered in v1.2.1
-
-- **Administration Panel** — Node Status, APT Updates, Repositories, System Log, Tasks tabs
-- **Network Management** — list network interfaces and bridges per node with type/status/addressing
-- **Tasks page** — live cluster task log with status badges
-- **20 new TypeScript client functions** + 20 Rust command stubs (HA, ACL, users, realms, notes, search, node status, APT, syslog, network, views, subscriptions, tasks)
-- **Proxmox settings persistence** — port, timeout, retry, SSL, caching, debug fields persist via localStorage
-- **Auto-updater** relocated from Proxmox settings to Settings > Updater page
-- **Edit Remote form** — password field added; Refresh button functional
-- **Proxmox nav section** collapsed by default (accordion expand on click)
 
 ## Code Quality
 
@@ -136,8 +93,7 @@ This document tracks the implementation of 100% feature parity with Proxmox Data
 |----------|-------|
 | Main Proxmox components | 14 |
 | Dashboard widgets | 13 |
-| Phase 8–15 + Admin/Network/Tasks components | ~15 |
+| **Total** | **27** |
-| **Total** | **~42** |
 
 ## Architecture
 
@@ -158,21 +114,7 @@ src/components/Proxmox/
 ├── CephHealthWidget.tsx              # Phase 5 - Health widget
 ├── MonitorList.tsx                   # Phase 5 - Monitors
 ├── EVPNZoneList.tsx                  # Phase 6 - EVPN zones
-├── FirewallRuleList.tsx              # Phase 7 - Firewall rules
+└── FirewallRuleList.tsx              # Phase 7 - Firewall rules
-├── HAGroupsList.tsx                  # Phase 8 - HA groups
-├── HAResourcesList.tsx               # Phase 8 - HA resources
-├── AclList.tsx                       # Phase 9 - Access control
-├── UserList.tsx                      # Phase 9 - Users
-├── RealmList.tsx                     # Phase 9 - Auth realms
-├── CertificateList.tsx               # Phase 10 - Certificates
-├── SubscriptionRegistry.tsx          # Phase 11 - Subscriptions
-├── NotesEditor.tsx                   # Phase 12 - Notes
-├── ResourceSearch.tsx                # Phase 13 - Search
-├── CustomViews.tsx                   # Phase 14 - Custom views
-├── ConnectionHealth.tsx              # Phase 15 - Health status
-├── AdministrationPanel.tsx           # Admin (node status, APT, repos, syslog, tasks)
-├── NetworkManagement.tsx             # Network interface list
-└── TasksPage.tsx                     # Live task log
 
 src/components/Proxmox/Dashboard/
 ├── index.ts                          # Export all widgets
@@ -215,6 +157,19 @@ src-tauri/src/proxmox/
 └── ... (additional modules)
 ```
 
+## Next Steps
+
+1. **Phase 8**: HA Groups Manager UI
+2. **Phase 9**: User Management UI (LDAP/AD/OpenID)
+3. **Phase 10**: Certificate Manager UI (ACME)
+4. **Phase 11**: Subscription Registry UI
+5. **Phase 12**: Notes System
+6. **Phase 13**: Search Functionality
+7. **Phase 14**: Advanced Cluster Operations
+8. **Phase 15**: Connection Caching & Failover
+9. **Phase 16**: CLI Tools
+10. **Phase 17**: Testing & Documentation
+
 ## References
 
 - [Proxmox VE API Documentation](https://pve.proxmox.com/pve-docs/api-viewer/)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "trcaa",
   "private": true,
-  "version": "1.2.1",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/gen/schemas/desktop-schema.json

@@ -6451,60 +6451,6 @@
           "type": "string",
           "const": "stronghold:deny-save-store-record",
           "markdownDescription": "Denies the save_store_record command without any pre-configured scope."
-        },
-        {
-          "description": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`",
-          "type": "string",
-          "const": "updater:default",
-          "markdownDescription": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`"
-        },
-        {
-          "description": "Enables the check command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:allow-check",
-          "markdownDescription": "Enables the check command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the download command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:allow-download",
-          "markdownDescription": "Enables the download command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the download_and_install command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:allow-download-and-install",
-          "markdownDescription": "Enables the download_and_install command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the install command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:allow-install",
-          "markdownDescription": "Enables the install command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the check command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:deny-check",
-          "markdownDescription": "Denies the check command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the download command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:deny-download",
-          "markdownDescription": "Denies the download command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the download_and_install command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:deny-download-and-install",
-          "markdownDescription": "Denies the download_and_install command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the install command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:deny-install",
-          "markdownDescription": "Denies the install command without any pre-configured scope."
         }
       ]
     },

src-tauri/gen/schemas/linux-schema.json

@@ -6451,60 +6451,6 @@
           "type": "string",
           "const": "stronghold:deny-save-store-record",
           "markdownDescription": "Denies the save_store_record command without any pre-configured scope."
-        },
-        {
-          "description": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`",
-          "type": "string",
-          "const": "updater:default",
-          "markdownDescription": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`"
-        },
-        {
-          "description": "Enables the check command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:allow-check",
-          "markdownDescription": "Enables the check command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the download command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:allow-download",
-          "markdownDescription": "Enables the download command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the download_and_install command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:allow-download-and-install",
-          "markdownDescription": "Enables the download_and_install command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the install command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:allow-install",
-          "markdownDescription": "Enables the install command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the check command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:deny-check",
-          "markdownDescription": "Denies the check command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the download command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:deny-download",
-          "markdownDescription": "Denies the download command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the download_and_install command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:deny-download-and-install",
-          "markdownDescription": "Denies the download_and_install command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the install command without any pre-configured scope.",
-          "type": "string",
-          "const": "updater:deny-install",
-          "markdownDescription": "Denies the install command without any pre-configured scope."
         }
       ]
     },

src-tauri/src/commands/proxmox.rs

@@ -14,22 +14,6 @@ pub struct ClusterConnection {
     pub port: u16,
 }
 
-/// Cluster info enriched with live connection health status
-#[derive(Debug, Clone, Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub struct ClusterInfoWithHealth {
-    pub id: String,
-    pub name: String,
-    pub cluster_type: ClusterType,
-    pub url: String,
-    pub port: u16,
-    pub username: String,
-    pub created_at: String,
-    pub updated_at: String,
-    /// True if an active client object exists in the in-memory connection pool
-    pub connected: bool,
-}
-
 /// Add a Proxmox cluster
 #[tauri::command]
 pub async fn add_proxmox_cluster(
@@ -135,12 +119,10 @@ pub async fn remove_proxmox_cluster(id: String, state: State<'_, AppState>) -> R
     Ok(())
 }
 
-/// List all Proxmox clusters, annotated with live connection health
+/// List all Proxmox clusters
 #[tauri::command]
-pub async fn list_proxmox_clusters(
+pub async fn list_proxmox_clusters(state: State<'_, AppState>) -> Result<Vec<ClusterInfo>, String> {
-    state: State<'_, AppState>,
+    let clusters = {
-) -> Result<Vec<ClusterInfoWithHealth>, String> {
-    let db_clusters = {
         let db = state
             .db
             .lock()
@@ -172,31 +154,11 @@ pub async fn list_proxmox_clusters(
             .map_err(|e| format!("Failed to query clusters: {}", e))?;
 
         cluster_iter
-            .collect::<Result<Vec<ClusterInfo>, _>>()
+            .collect::<Result<Vec<_>, _>>()
-            .map_err(|e| e.to_string())?
+            .map_err(|e| e.to_string())
     };
 
-    // Annotate each cluster with whether a live client exists in the connection pool
+    clusters
-    let live_clients = state.proxmox_clusters.lock().await;
-    let result = db_clusters
-        .into_iter()
-        .map(|c| {
-            let connected = live_clients.contains_key(&c.id);
-            ClusterInfoWithHealth {
-                id: c.id,
-                name: c.name,
-                cluster_type: c.cluster_type,
-                url: c.url,
-                port: c.port,
-                username: c.username,
-                created_at: c.created_at,
-                updated_at: c.updated_at,
-                connected,
-            }
-        })
-        .collect();
-
-    Ok(result)
 }
 
 /// Get a specific Proxmox cluster
@@ -1621,537 +1583,6 @@ pub async fn list_metric_collections(
     Ok(collections)
 }
 
-// ─── Phase 6 - HA Management ──────────────────────────────────────────────────
-
-/// List HA groups
-#[tauri::command]
-pub async fn list_ha_groups(
-    cluster_id: String,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let groups = crate::proxmox::ha::list_ha_groups(
-        &client_guard,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to list HA groups: {}", e))?;
-
-    groups
-        .into_iter()
-        .map(|g| serde_json::to_value(g).map_err(|e| e.to_string()))
-        .collect::<Result<Vec<_>, _>>()
-}
-
-/// Create HA group
-#[tauri::command]
-pub async fn create_ha_group(
-    cluster_id: String,
-    group: String,
-    nodes: Vec<String>,
-    max_failures: u32,
-    max_relocate: u32,
-    state: State<'_, AppState>,
-) -> Result<(), String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    crate::proxmox::ha::create_ha_group(
-        &client_guard,
-        &group,
-        &nodes,
-        max_failures,
-        max_relocate,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to create HA group: {}", e))
-}
-
-/// Update HA group
-#[tauri::command]
-pub async fn update_ha_group(
-    cluster_id: String,
-    group: String,
-    nodes: Vec<String>,
-    max_failures: u32,
-    max_relocate: u32,
-    state: State<'_, AppState>,
-) -> Result<(), String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    crate::proxmox::ha::update_ha_group(
-        &client_guard,
-        &group,
-        &nodes,
-        max_failures,
-        max_relocate,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to update HA group: {}", e))
-}
-
-/// Delete HA group
-#[tauri::command]
-pub async fn delete_ha_group(
-    cluster_id: String,
-    group: String,
-    state: State<'_, AppState>,
-) -> Result<(), String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    crate::proxmox::ha::delete_ha_group(
-        &client_guard,
-        &group,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to delete HA group: {}", e))
-}
-
-/// List HA resources
-#[tauri::command]
-pub async fn list_ha_resources(
-    cluster_id: String,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let resources = crate::proxmox::ha::list_ha_resources(
-        &client_guard,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to list HA resources: {}", e))?;
-
-    resources
-        .into_iter()
-        .map(|r| serde_json::to_value(r).map_err(|e| e.to_string()))
-        .collect::<Result<Vec<_>, _>>()
-}
-
-/// Enable HA resource
-#[tauri::command]
-pub async fn enable_ha_resource(
-    cluster_id: String,
-    resource: String,
-    state: State<'_, AppState>,
-) -> Result<(), String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    crate::proxmox::ha::enable_ha_resource(
-        &client_guard,
-        &resource,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to enable HA resource: {}", e))
-}
-
-// ─── Phase 7 - ACL / Users / Realms ──────────────────────────────────────────
-
-/// List ACL entries
-#[tauri::command]
-pub async fn list_acls(
-    cluster_id: String,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let path = "access/acl";
-    let response: serde_json::Value = client_guard
-        .get(path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to list ACLs: {}", e))?;
-
-    response
-        .get("data")
-        .and_then(|d| d.as_array())
-        .map(|arr| arr.to_vec())
-        .ok_or_else(|| "Invalid response format".to_string())
-}
-
-/// List users
-#[tauri::command]
-pub async fn list_users(
-    cluster_id: String,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let path = "access/users";
-    let response: serde_json::Value = client_guard
-        .get(path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to list users: {}", e))?;
-
-    response
-        .get("data")
-        .and_then(|d| d.as_array())
-        .map(|arr| arr.to_vec())
-        .ok_or_else(|| "Invalid response format".to_string())
-}
-
-/// List authentication realms (typed)
-#[tauri::command]
-pub async fn list_realms(
-    cluster_id: String,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let realms = crate::proxmox::auth_realm::list_auth_realms(
-        &client_guard,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to list realms: {}", e))?;
-
-    realms
-        .into_iter()
-        .map(|r| serde_json::to_value(r).map_err(|e| e.to_string()))
-        .collect::<Result<Vec<_>, _>>()
-}
-
-// ─── Phase 8 - Cluster Notes ──────────────────────────────────────────────────
-
-/// Get cluster notes
-#[tauri::command]
-pub async fn get_cluster_notes(
-    cluster_id: String,
-    state: State<'_, AppState>,
-) -> Result<String, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let path = "cluster/config";
-    let response: serde_json::Value = client_guard
-        .get(path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to get cluster notes: {}", e))?;
-
-    Ok(response
-        .get("data")
-        .and_then(|d| d.get("notes"))
-        .and_then(|n| n.as_str())
-        .unwrap_or("")
-        .to_string())
-}
-
-/// Update cluster notes
-#[tauri::command]
-pub async fn update_cluster_notes(
-    cluster_id: String,
-    notes: String,
-    state: State<'_, AppState>,
-) -> Result<(), String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let path = "cluster/config";
-    let body = serde_json::json!({ "notes": notes });
-    let _: serde_json::Value = client_guard
-        .put(path, &body, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to update cluster notes: {}", e))?;
-
-    Ok(())
-}
-
-// ─── Phase 9 - Resource Search ────────────────────────────────────────────────
-
-/// Search Proxmox resources
-#[tauri::command]
-pub async fn search_proxmox_resources(
-    cluster_id: String,
-    query: String,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let path = format!("cluster/resources?type=vm&search={}", query);
-    let response: serde_json::Value = client_guard
-        .get(&path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to search resources: {}", e))?;
-
-    response
-        .get("data")
-        .and_then(|d| d.as_array())
-        .map(|arr| arr.to_vec())
-        .ok_or_else(|| "Invalid response format".to_string())
-}
-
-// ─── Phase 10 - Node Status ───────────────────────────────────────────────────
-
-/// Get node status
-#[tauri::command]
-pub async fn get_node_status(
-    cluster_id: String,
-    node_id: String,
-    state: State<'_, AppState>,
-) -> Result<serde_json::Value, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let path = format!("nodes/{}/status", node_id);
-    let response: serde_json::Value = client_guard
-        .get(&path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to get node status: {}", e))?;
-
-    response
-        .get("data")
-        .cloned()
-        .ok_or_else(|| "Invalid response format: missing data field".to_string())
-}
-
-// ─── Phase 11 - Syslog ────────────────────────────────────────────────────────
-
-/// Get node syslog
-#[tauri::command]
-pub async fn get_syslog(
-    cluster_id: String,
-    node_id: String,
-    limit: Option<u32>,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let limit_val = limit.unwrap_or(500);
-    let path = format!("nodes/{}/syslog?limit={}", node_id, limit_val);
-    let response: serde_json::Value = client_guard
-        .get(&path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to get syslog: {}", e))?;
-
-    response
-        .get("data")
-        .and_then(|d| d.as_array())
-        .map(|arr| arr.to_vec())
-        .ok_or_else(|| "Invalid response format".to_string())
-}
-
-// ─── Phase 12 - Network Interfaces ───────────────────────────────────────────
-
-/// List network interfaces on a node
-#[tauri::command]
-pub async fn list_network_interfaces(
-    cluster_id: String,
-    node_id: String,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let path = format!("nodes/{}/network", node_id);
-    let response: serde_json::Value = client_guard
-        .get(&path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to list network interfaces: {}", e))?;
-
-    response
-        .get("data")
-        .and_then(|d| d.as_array())
-        .map(|arr| arr.to_vec())
-        .ok_or_else(|| "Invalid response format".to_string())
-}
-
-// ─── Phase 13 - Cluster Views (typed aliases) ─────────────────────────────────
-
-/// List cluster views (typed)
-#[tauri::command]
-pub async fn list_cluster_views(
-    cluster_id: String,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let views = crate::proxmox::views::list_views(
-        &client_guard,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to list cluster views: {}", e))?;
-
-    views
-        .into_iter()
-        .map(|v| serde_json::to_value(v).map_err(|e| e.to_string()))
-        .collect::<Result<Vec<_>, _>>()
-}
-
-/// Create cluster view
-#[tauri::command]
-pub async fn create_cluster_view(
-    cluster_id: String,
-    view_id: String,
-    name: String,
-    state: State<'_, AppState>,
-) -> Result<(), String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let view = crate::proxmox::views::DashboardView {
-        view_id,
-        name,
-        description: String::new(),
-        layout: "grid".to_string(),
-        widgets: vec![],
-        enabled: true,
-        created_at: chrono::Utc::now().format("%Y-%m-%d %H:%M:%S").to_string(),
-        updated_at: chrono::Utc::now().format("%Y-%m-%d %H:%M:%S").to_string(),
-    };
-
-    crate::proxmox::views::add_view(
-        &client_guard,
-        &view,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to create cluster view: {}", e))
-}
-
-/// Delete cluster view
-#[tauri::command]
-pub async fn delete_cluster_view(
-    cluster_id: String,
-    view_id: String,
-    state: State<'_, AppState>,
-) -> Result<(), String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    crate::proxmox::views::delete_view(
-        &client_guard,
-        &view_id,
-        client_guard.ticket.as_deref().unwrap_or(""),
-    )
-    .await
-    .map_err(|e| format!("Failed to delete cluster view: {}", e))
-}
-
-// ─── Phase 14 - Subscription ──────────────────────────────────────────────────
-
-/// Get subscription status
-#[tauri::command]
-pub async fn get_subscription_status(
-    cluster_id: String,
-    state: State<'_, AppState>,
-) -> Result<serde_json::Value, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let path = "nodes/localhost/subscription";
-    let response: serde_json::Value = client_guard
-        .get(path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to get subscription status: {}", e))?;
-
-    response
-        .get("data")
-        .cloned()
-        .ok_or_else(|| "Invalid response format: missing data field".to_string())
-}
-
-// ─── Phase 15 - Cluster Task Log ─────────────────────────────────────────────
-
-/// List cluster-level tasks
-#[tauri::command]
-pub async fn list_cluster_tasks(
-    cluster_id: String,
-    limit: Option<u32>,
-    state: State<'_, AppState>,
-) -> Result<Vec<serde_json::Value>, String> {
-    let clusters = state.proxmox_clusters.lock().await;
-    let client = clusters
-        .get(&cluster_id)
-        .ok_or_else(|| format!("Cluster {} not found", cluster_id))?;
-    let client_guard = client.lock().await;
-
-    let limit_val = limit.unwrap_or(50);
-    let path = format!("cluster/tasks?limit={}", limit_val);
-    let response: serde_json::Value = client_guard
-        .get(&path, Some(client_guard.ticket.as_deref().unwrap_or("")))
-        .await
-        .map_err(|e| format!("Failed to list cluster tasks: {}", e))?;
-
-    response
-        .get("data")
-        .and_then(|d| d.as_array())
-        .map(|arr| arr.to_vec())
-        .ok_or_else(|| "Invalid response format".to_string())
-}
-
 #[cfg(test)]
 mod tests {
     use super::*;

src-tauri/src/lib.rs

@@ -191,36 +191,6 @@ pub fn run() {
             // Proxmox - Infrastructure (Phase 5)
             commands::proxmox::get_metrics_summary,
             commands::proxmox::list_metric_collections,
-            // Proxmox - HA Management (Phase 6)
-            commands::proxmox::list_ha_groups,
-            commands::proxmox::create_ha_group,
-            commands::proxmox::update_ha_group,
-            commands::proxmox::delete_ha_group,
-            commands::proxmox::list_ha_resources,
-            commands::proxmox::enable_ha_resource,
-            // Proxmox - ACL / Users / Realms (Phase 7)
-            commands::proxmox::list_acls,
-            commands::proxmox::list_users,
-            commands::proxmox::list_realms,
-            // Proxmox - Cluster Notes (Phase 8)
-            commands::proxmox::get_cluster_notes,
-            commands::proxmox::update_cluster_notes,
-            // Proxmox - Resource Search (Phase 9)
-            commands::proxmox::search_proxmox_resources,
-            // Proxmox - Node Status (Phase 10)
-            commands::proxmox::get_node_status,
-            // Proxmox - Syslog (Phase 11)
-            commands::proxmox::get_syslog,
-            // Proxmox - Network Interfaces (Phase 12)
-            commands::proxmox::list_network_interfaces,
-            // Proxmox - Cluster Views typed (Phase 13)
-            commands::proxmox::list_cluster_views,
-            commands::proxmox::create_cluster_view,
-            commands::proxmox::delete_cluster_view,
-            // Proxmox - Subscription (Phase 14)
-            commands::proxmox::get_subscription_status,
-            // Proxmox - Cluster Tasks (Phase 15)
-            commands::proxmox::list_cluster_tasks,
             // Proxmox - Existing
             commands::proxmox::add_proxmox_cluster,
             commands::proxmox::remove_proxmox_cluster,

src/App.tsx

@@ -11,12 +11,10 @@ import {
   Plug,
   ChevronLeft,
   ChevronRight,
-  ChevronDown,
   Sun,
   Moon,
   Terminal,
   FileCode,
-  RefreshCw,
   Server,
   Server as ServerIcon,
   Settings,
@@ -53,14 +51,8 @@ import { ProxmoxCephPage } from "@/pages/Proxmox/CephPage";
 import { ProxmoxSDNPage } from "@/pages/Proxmox/SDNPage";
 import { ProxmoxHAPage } from "@/pages/Proxmox/HAPage";
 import { ProxmoxTasksPage } from "@/pages/Proxmox/TasksPage";
-import { ProxmoxViewsPage } from "@/pages/Proxmox/ViewsPage";
 import { ProxmoxCertificatesPage } from "@/pages/Proxmox/CertificatesPage";
-import { ProxmoxSubscriptionPage } from "@/pages/Proxmox/SubscriptionPage";
-import { ProxmoxNotesPage } from "@/pages/Proxmox/NotesPage";
-import { ProxmoxSearchPage } from "@/pages/Proxmox/SearchPage";
-import { ProxmoxAdminPage } from "@/pages/Proxmox/AdminPage";
 import { ProxmoxSettings } from "@/pages/Settings/Proxmox";
-import { Updater } from "@/pages/Settings/Updater";
 
 const navItems = [
   { to: "/", icon: Home, label: "Dashboard" },
@@ -71,7 +63,6 @@ const navItems = [
     icon: ServerIcon,
     label: "Proxmox",
     children: [
-      { to: "/proxmox/search", label: "Search" },
       { to: "/proxmox/remotes", label: "Remotes" },
       { to: "/proxmox/vms", label: "VMs" },
       { to: "/proxmox/containers", label: "Containers" },
@@ -83,11 +74,7 @@ const navItems = [
       { to: "/proxmox/ha", label: "HA Groups" },
       { to: "/proxmox/backup", label: "Backup" },
       { to: "/proxmox/tasks", label: "Tasks" },
-      { to: "/proxmox/notes", label: "Notes" },
-      { to: "/proxmox/views", label: "Views" },
       { to: "/proxmox/certificates", label: "Certificates" },
-      { to: "/proxmox/subscriptions", label: "Subscriptions" },
-      { to: "/proxmox/admin", label: "Administration" },
     ],
   },
   { to: "/history", icon: Clock, label: "History" },
@@ -101,17 +88,15 @@ const settingsItems = [
   { to: "/settings/integrations", icon: Link, label: "Integrations" },
   { to: "/settings/mcp", icon: Plug, label: "MCP Servers" },
   { to: "/settings/security", icon: Shield, label: "Security" },
-  { to: "/settings/updater", icon: RefreshCw, label: "Updater" },
   { to: "/settings/proxmox", icon: Settings, label: "Proxmox" },
 ];
 
 export default function App() {
   const [collapsed, setCollapsed] = useState(false);
-  const [expandedSections, setExpandedSections] = useState<string[]>([]);
   const [appVersion, setAppVersion] = useState("");
   const { theme, setTheme, setProviders, getActiveProvider } = useSettingsStore();
   const cleanupDone = useRef(false);
-  const location = useLocation();
+  void useLocation();
 
   useEffect(() => {
     getAppVersionCmd().then(setAppVersion).catch(() => {});
@@ -186,41 +171,30 @@ export default function App() {
           <nav className="flex-1 px-2 py-3 space-y-1">
             {navItems.map((item) => {
               if (item.children) {
-                const isExpanded = expandedSections.includes(item.to);
-                const isActive = location.pathname.startsWith(item.to);
                 return (
                   <div key={item.to}>
-                    <button
+                    <NavLink
-                      onClick={() =>
+                      to={item.to}
-                        setExpandedSections((prev) =>
+                      className={({ isActive }) =>
-                          prev.includes(item.to)
+                        `flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                            ? prev.filter((t) => t !== item.to)
+                          isActive
-                            : [...prev, item.to]
+                            ? "bg-primary text-primary-foreground"
-                        )
+                            : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                        }`
                       }
-                      className={`w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                        isActive
-                          ? "bg-primary text-primary-foreground"
-                          : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                      }`}
                     >
                       <item.icon className="w-4 h-4 shrink-0" />
                       {!collapsed && <span>{item.label}</span>}
-                      {!collapsed && (
+                    </NavLink>
-                        isExpanded
+                    {!collapsed && (
-                          ? <ChevronDown className="w-3 h-3 ml-auto" />
-                          : <ChevronRight className="w-3 h-3 ml-auto" />
-                      )}
-                    </button>
-                    {!collapsed && isExpanded && (
                       <div className="ml-4 space-y-1 pl-4 border-l border-muted">
                         {item.children.map((child) => (
                           <NavLink
                             key={child.to}
                             to={child.to}
-                            className={({ isActive: childActive }) =>
+                            className={({ isActive }) =>
                               `flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
-                                childActive
+                                isActive
                                   ? "bg-primary text-primary-foreground"
                                   : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                               }`
@@ -323,13 +297,7 @@ export default function App() {
           <Route path="/proxmox/sdn" element={<ProxmoxSDNPage />} />
           <Route path="/proxmox/ha" element={<ProxmoxHAPage />} />
           <Route path="/proxmox/tasks" element={<ProxmoxTasksPage />} />
-          <Route path="/proxmox/views" element={<ProxmoxViewsPage />} />
           <Route path="/proxmox/certificates" element={<ProxmoxCertificatesPage />} />
-          <Route path="/proxmox/subscriptions" element={<ProxmoxSubscriptionPage />} />
-          <Route path="/proxmox/notes" element={<ProxmoxNotesPage />} />
-          <Route path="/proxmox/search" element={<ProxmoxSearchPage />} />
-          <Route path="/proxmox/admin" element={<ProxmoxAdminPage />} />
-          <Route path="/settings/updater" element={<Updater />} />
           <Route path="/settings/proxmox" element={<ProxmoxSettings />} />
             <Route path="/settings/integrations" element={<Integrations />} />
             <Route path="/settings/mcp" element={<MCPServers />} />

src/components/Proxmox/AclList.tsx

@@ -2,16 +2,24 @@ import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Pencil, Trash2, PlusCircle, RefreshCw } from 'lucide-react';
+import { MoreHorizontal } from 'lucide-react';
-import { AclEntry } from '@/lib/proxmoxClient';
+
+interface AclInfo {
+  id: string;
+  path: string;
+  type: 'user' | 'group' | 'role';
+  principal: string;
+  roles: string[];
+  propagate: boolean;
+}
 
 interface AclListProps {
-  acls: AclEntry[];
+  acls: AclInfo[];
   onRefresh?: () => void;
   isLoading?: boolean;
   onAdd?: () => void;
-  onEdit?: (acl: AclEntry) => void;
+  onEdit?: (acl: AclInfo) => void;
-  onDelete?: (acl: AclEntry) => void;
+  onDelete?: (acl: AclInfo) => void;
 }
 
 export function AclList({
@@ -28,12 +36,11 @@ export function AclList({
         <CardTitle>Access Control Lists (ACL)</CardTitle>
         <div className="flex space-x-2">
           <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
-            <RefreshCw className="mr-2 h-4 w-4" />
             Refresh
           </Button>
           {onAdd && (
             <Button size="sm" onClick={onAdd}>
-              <PlusCircle className="mr-2 h-4 w-4" />
+              <span className="mr-2 h-4 w-4">+</span>
               New ACL
             </Button>
           )}
@@ -47,59 +54,61 @@ export function AclList({
                 <TableHead>Path</TableHead>
                 <TableHead>Type</TableHead>
                 <TableHead>Principal</TableHead>
-                <TableHead>Role</TableHead>
+                <TableHead>Roles</TableHead>
                 <TableHead>Propagate</TableHead>
                 <TableHead className="text-right">Actions</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {acls.length === 0 ? (
+              {acls.map((acl) => (
-                <TableRow>
+                <TableRow key={acl.id}>
-                  <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                  <TableCell className="font-mono text-xs">{acl.path}</TableCell>
-                    No ACL entries configured
+                  <TableCell>
+                    <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
+                      acl.type === 'user' ? 'bg-blue-100 text-blue-800' :
+                      acl.type === 'group' ? 'bg-purple-100 text-purple-800' :
+                      'bg-orange-100 text-orange-800'
+                    }`}>
+                      {acl.type}
+                    </span>
+                  </TableCell>
+                  <TableCell>{acl.principal}</TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      {acl.roles.map((role) => (
+                        <span key={role} className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-800">
+                          {role}
+                        </span>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell>{acl.propagate ? 'Yes' : 'No'}</TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end space-x-2">
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        onClick={() => onEdit?.(acl)}
+                        title="Edit"
+                      >
+                        <span className="h-4 w-4 text-xs">✏️</span>
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
+                        onClick={() => onDelete?.(acl)}
+                        title="Delete"
+                      >
+                        <span className="h-4 w-4 text-xs">🗑️</span>
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        title="More"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </button>
+                    </div>
                   </TableCell>
                 </TableRow>
-              ) : (
+              ))}
-                acls.map((acl, index) => (
-                  <TableRow key={`${acl.path}-${acl.ugid}-${acl.roleid}-${index}`}>
-                    <TableCell className="font-mono text-xs">{acl.path}</TableCell>
-                    <TableCell>
-                      <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
-                        acl.type === 'user' ? 'bg-blue-100 text-blue-800' :
-                        acl.type === 'group' ? 'bg-purple-100 text-purple-800' :
-                        'bg-orange-100 text-orange-800'
-                      }`}>
-                        {acl.type}
-                      </span>
-                    </TableCell>
-                    <TableCell>{acl.ugid}</TableCell>
-                    <TableCell>
-                      <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-800">
-                        {acl.roleid}
-                      </span>
-                    </TableCell>
-                    <TableCell>{acl.propagate ? 'Yes' : 'No'}</TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex items-center justify-end space-x-2">
-                        <button
-                          className="rounded-md p-1 hover:bg-accent"
-                          onClick={() => onEdit?.(acl)}
-                          title="Edit"
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </button>
-                        <button
-                          className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
-                          onClick={() => onDelete?.(acl)}
-                          title="Delete"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))
-              )}
             </TableBody>
           </Table>
         </div>

src/components/Proxmox/CertificateList.tsx

@@ -1,282 +1,126 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Badge } from '@/components/ui/index';
+import { MoreHorizontal, Trash2 } from 'lucide-react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/index';
+
-import { RefreshCw, ChevronDown, ChevronRight, RotateCcw } from 'lucide-react';
+interface CertificateInfo {
-import { Certificate } from '@/lib/domain';
+  id: string;
+  commonName: string;
+  issuer: string;
+  validFrom: string;
+  validUntil: string;
+  status: 'valid' | 'expiring' | 'expired';
+}
 
 interface CertificateListProps {
-  certificates: Certificate[];
+  certificates: CertificateInfo[];
-  onRefresh: () => void;
+  onRefresh?: () => void;
-  onRenew: (cert: Certificate) => void;
   isLoading?: boolean;
-}
+  onUpload?: () => void;
-
+  onDelete?: (cert: CertificateInfo) => void;
-function certStatus(cert: Certificate): 'valid' | 'expiring' | 'expired' {
+  onRenew?: (cert: CertificateInfo) => void;
-  if (!cert.notafter) return 'valid';
-  const expiry = new Date(cert.notafter);
-  const now = new Date();
-  if (expiry < now) return 'expired';
-  const thirtyDays = 30 * 24 * 60 * 60 * 1000;
-  if (expiry.getTime() - now.getTime() < thirtyDays) return 'expiring';
-  return 'valid';
-}
-
-function StatusBadge({ status }: { status: 'valid' | 'expiring' | 'expired' }) {
-  if (status === 'valid') {
-    return <Badge variant="success">Valid</Badge>;
-  }
-  if (status === 'expiring') {
-    return (
-      <Badge className="border-transparent bg-yellow-500 text-white">
-        Expiring Soon
-      </Badge>
-    );
-  }
-  return <Badge variant="destructive">Expired</Badge>;
-}
-
-function truncateFingerprint(fp?: string): string {
-  if (!fp) return '-';
-  // Show first and last 8 hex chars separated by ellipsis
-  const clean = fp.replace(/:/g, '');
-  if (clean.length <= 16) return fp;
-  return `${fp.slice(0, 8)}…${fp.slice(-8)}`;
-}
-
-function extractCN(subject: string): string {
-  const match = subject.match(/CN=([^,/]+)/i);
-  return match ? match[1] : subject;
 }
 
 export function CertificateList({
   certificates,
   onRefresh,
+  isLoading,
+  onUpload,
+  onDelete,
   onRenew,
-  isLoading = false,
 }: CertificateListProps) {
-  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+  const validCount = certificates.filter((c) => c.status === 'valid').length;
-  const [detailCert, setDetailCert] = useState<Certificate | null>(null);
+  const expiringCount = certificates.filter((c) => c.status === 'expiring').length;
-
+  const expiredCount = certificates.filter((c) => c.status === 'expired').length;
-  const validCount = certificates.filter((c) => certStatus(c) === 'valid').length;
-  const expiringCount = certificates.filter((c) => certStatus(c) === 'expiring').length;
-  const expiredCount = certificates.filter((c) => certStatus(c) === 'expired').length;
-
-  function toggleRow(filename: string) {
-    setExpandedRows((prev) => {
-      const next = new Set(prev);
-      if (next.has(filename)) {
-        next.delete(filename);
-      } else {
-        next.add(filename);
-      }
-      return next;
-    });
-  }
 
   return (
-    <>
+    <Card>
-      <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle>Certificates</CardTitle>
-          <CardTitle>Certificates</CardTitle>
+        <div className="flex space-x-2">
-          <div className="flex items-center space-x-3">
+          <div className="flex items-center space-x-2 text-sm">
-            <div className="flex items-center space-x-1 text-sm">
+            <span className="text-green-500">●</span>
-              <span className="h-2 w-2 rounded-full bg-green-500 inline-block" />
+            <span>{validCount} Valid</span>
-              <span>{validCount} Valid</span>
-            </div>
-            <div className="flex items-center space-x-1 text-sm">
-              <span className="h-2 w-2 rounded-full bg-yellow-500 inline-block" />
-              <span>{expiringCount} Expiring</span>
-            </div>
-            <div className="flex items-center space-x-1 text-sm">
-              <span className="h-2 w-2 rounded-full bg-red-500 inline-block" />
-              <span>{expiredCount} Expired</span>
-            </div>
-            <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
-              <RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
-              Refresh
-            </Button>
           </div>
-        </CardHeader>
+          <div className="flex items-center space-x-2 text-sm">
-        <CardContent>
+            <span className="text-yellow-500">●</span>
-          {certificates.length === 0 ? (
+            <span>{expiringCount} Expiring</span>
-            <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
+          </div>
-              No certificates found
+          <div className="flex items-center space-x-2 text-sm">
-            </div>
+            <span className="text-red-500">●</span>
-          ) : (
+            <span>{expiredCount} Expired</span>
-            <Table>
+          </div>
-              <TableHeader>
+          <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
-                <TableRow>
+            Refresh
-                  <TableHead className="w-6" />
+          </Button>
-                  <TableHead>Subject (CN)</TableHead>
+          <Button size="sm" onClick={onUpload}>
-                  <TableHead>SANs</TableHead>
+            <span className="mr-2 h-4 w-4">⬆️</span>
-                  <TableHead>Issuer</TableHead>
+            Upload
-                  <TableHead>Valid From</TableHead>
+          </Button>
-                  <TableHead>Valid Until</TableHead>
+        </div>
-                  <TableHead>Fingerprint</TableHead>
+      </CardHeader>
-                  <TableHead>Status</TableHead>
+      <CardContent>
-                  <TableHead className="text-right">Actions</TableHead>
+        <div className="overflow-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>ID</TableHead>
+                <TableHead>Common Name</TableHead>
+                <TableHead>Issuer</TableHead>
+                <TableHead>Valid From</TableHead>
+                <TableHead>Valid Until</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {certificates.map((cert) => (
+                <TableRow key={cert.id}>
+                  <TableCell className="font-medium">{cert.id}</TableCell>
+                  <TableCell>{cert.commonName}</TableCell>
+                  <TableCell>{cert.issuer}</TableCell>
+                  <TableCell>{cert.validFrom}</TableCell>
+                  <TableCell>{cert.validUntil}</TableCell>
+                  <TableCell>
+                    <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
+                      cert.status === 'valid' ? 'bg-green-100 text-green-800' :
+                      cert.status === 'expiring' ? 'bg-yellow-100 text-yellow-800' :
+                      'bg-red-100 text-red-800'
+                    }`}>
+                      {cert.status}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end space-x-2">
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        onClick={() => onRenew?.(cert)}
+                        title="Renew"
+                      >
+                        <span className="h-4 w-4 text-xs">🔄</span>
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
+                        onClick={() => onDelete?.(cert)}
+                        title="Delete"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        title="More"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </TableCell>
                 </TableRow>
-              </TableHeader>
+              ))}
-              <TableBody>
+            </TableBody>
-                {certificates.map((cert) => {
+          </Table>
-                  const status = certStatus(cert);
+        </div>
-                  const isExpanded = expandedRows.has(cert.filename);
+      </CardContent>
-                  const rowClass =
+    </Card>
-                    status === 'expired'
-                      ? 'bg-red-50/50 dark:bg-red-950/20'
-                      : status === 'expiring'
-                      ? 'bg-yellow-50/50 dark:bg-yellow-950/20'
-                      : '';
-
-                  return (
-                    <React.Fragment key={cert.filename}>
-                      <TableRow className={rowClass}>
-                        <TableCell className="w-6 pr-0">
-                          <button
-                            onClick={() => toggleRow(cert.filename)}
-                            className="rounded p-0.5 hover:bg-accent"
-                            aria-label={isExpanded ? 'Collapse' : 'Expand'}
-                          >
-                            {isExpanded ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="h-4 w-4" />
-                            )}
-                          </button>
-                        </TableCell>
-                        <TableCell className="font-medium">
-                          {extractCN(cert.subject)}
-                        </TableCell>
-                        <TableCell className="text-sm text-muted-foreground">
-                          {cert.san && cert.san.length > 0
-                            ? cert.san.slice(0, 2).join(', ') +
-                              (cert.san.length > 2 ? ` +${cert.san.length - 2}` : '')
-                            : '-'}
-                        </TableCell>
-                        <TableCell className="text-sm text-muted-foreground">
-                          {cert.issuer ? extractCN(cert.issuer) : '-'}
-                        </TableCell>
-                        <TableCell className="text-sm">
-                          {cert.notbefore ?? '-'}
-                        </TableCell>
-                        <TableCell className="text-sm">
-                          {cert.notafter ?? '-'}
-                        </TableCell>
-                        <TableCell className="font-mono text-xs text-muted-foreground">
-                          {truncateFingerprint(cert.fingerprint)}
-                        </TableCell>
-                        <TableCell>
-                          <StatusBadge status={status} />
-                        </TableCell>
-                        <TableCell className="text-right">
-                          <div className="flex items-center justify-end space-x-1">
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setDetailCert(cert)}
-                              title="View Details"
-                            >
-                              View
-                            </Button>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => onRenew(cert)}
-                              title="Renew certificate"
-                            >
-                              <RotateCcw className="mr-1 h-3 w-3" />
-                              Renew
-                            </Button>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-
-                      {isExpanded && (
-                        <TableRow className={rowClass}>
-                          <TableCell colSpan={9} className="bg-muted/30 px-8 py-3">
-                            <div className="grid grid-cols-2 gap-x-8 gap-y-1 text-sm">
-                              <div>
-                                <span className="font-medium text-muted-foreground">Filename: </span>
-                                <span className="font-mono">{cert.filename}</span>
-                              </div>
-                              <div>
-                                <span className="font-medium text-muted-foreground">Full Subject: </span>
-                                <span>{cert.subject}</span>
-                              </div>
-                              {cert.issuer && (
-                                <div>
-                                  <span className="font-medium text-muted-foreground">Full Issuer: </span>
-                                  <span>{cert.issuer}</span>
-                                </div>
-                              )}
-                              {cert.fingerprint && (
-                                <div>
-                                  <span className="font-medium text-muted-foreground">Fingerprint: </span>
-                                  <span className="font-mono text-xs">{cert.fingerprint}</span>
-                                </div>
-                              )}
-                              {cert.san && cert.san.length > 0 && (
-                                <div className="col-span-2">
-                                  <span className="font-medium text-muted-foreground">All SANs: </span>
-                                  <span>{cert.san.join(', ')}</span>
-                                </div>
-                              )}
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      )}
-                    </React.Fragment>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Detail dialog */}
-      <Dialog open={detailCert !== null} onOpenChange={(open) => { if (!open) setDetailCert(null); }}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Certificate Details</DialogTitle>
-          </DialogHeader>
-          {detailCert && (
-            <div className="space-y-3 text-sm">
-              <div className="grid grid-cols-[140px_1fr] gap-y-2">
-                <span className="font-medium text-muted-foreground">Subject</span>
-                <span>{detailCert.subject}</span>
-                <span className="font-medium text-muted-foreground">Issuer</span>
-                <span>{detailCert.issuer ?? '-'}</span>
-                <span className="font-medium text-muted-foreground">Valid From</span>
-                <span>{detailCert.notbefore ?? '-'}</span>
-                <span className="font-medium text-muted-foreground">Valid Until</span>
-                <span>{detailCert.notafter ?? '-'}</span>
-                <span className="font-medium text-muted-foreground">Fingerprint</span>
-                <span className="font-mono text-xs break-all">{detailCert.fingerprint ?? '-'}</span>
-                <span className="font-medium text-muted-foreground">Filename</span>
-                <span className="font-mono text-xs">{detailCert.filename}</span>
-                {detailCert.san && detailCert.san.length > 0 && (
-                  <>
-                    <span className="font-medium text-muted-foreground">SANs</span>
-                    <span>{detailCert.san.join(', ')}</span>
-                  </>
-                )}
-                {detailCert.pem && (
-                  <>
-                    <span className="font-medium text-muted-foreground self-start pt-1">PEM</span>
-                    <pre className="overflow-auto rounded bg-muted p-2 text-xs max-h-48">
-                      {detailCert.pem}
-                    </pre>
-                  </>
-                )}
-              </div>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-    </>
   );
 }

src/components/Proxmox/EditRemoteForm.tsx

@@ -3,14 +3,12 @@ import { Button } from '@/components/ui/index';
 import { Input } from '@/components/ui/index';
 import { Label } from '@/components/ui/index';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/index';
-import { DialogFooter } from '@/components/ui/index';
 
 interface RemoteConfig {
   id: string;
   name: string;
   url: string;
   username: string;
-  password?: string;
   type: 'pve' | 'pbs';
   status: string;
 }
@@ -27,7 +25,6 @@ export function EditRemoteForm({ remote, onSave, onCancel }: EditRemoteFormProps
     name: remote.name,
     url: remote.url,
     username: remote.username,
-    password: '',
     type: remote.type,
     status: remote.status,
   });
@@ -101,21 +98,6 @@ export function EditRemoteForm({ remote, onSave, onCancel }: EditRemoteFormProps
           />
         </div>
 
-        <div className="space-y-2">
-          <Label htmlFor="password">Password</Label>
-          <Input
-            id="password"
-            type="password"
-            value={config.password || ''}
-            onChange={(e) => setConfig({ ...config, password: e.target.value })}
-            placeholder="Enter new password (leave blank to keep existing)"
-            disabled={loading}
-          />
-          <p className="text-xs text-muted-foreground">
-            Leave blank to keep the existing password
-          </p>
-        </div>
-
         <div className="space-y-2">
           <Label htmlFor="type">Type</Label>
           <Input
@@ -139,14 +121,14 @@ export function EditRemoteForm({ remote, onSave, onCancel }: EditRemoteFormProps
           />
         </div>
 
-        <DialogFooter className="flex justify-end space-x-2 pt-4">
+        <div className="flex justify-end space-x-2 pt-4">
           <Button type="button" variant="outline" onClick={onCancel} disabled={loading}>
             Cancel
           </Button>
           <Button type="submit" disabled={loading}>
             {loading ? 'Saving...' : 'Save Changes'}
           </Button>
-        </DialogFooter>
+        </div>
       </div>
     </form>
   );

src/components/Proxmox/HAGroupsList.tsx

@@ -2,25 +2,35 @@ import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Trash2, Pencil, PlusCircle, RefreshCw } from 'lucide-react';
+import { MoreHorizontal, Trash2 } from 'lucide-react';
-import { HaGroup } from '@/lib/proxmoxClient';
+
+interface HAGroupInfo {
+  id: string;
+  name: string;
+  resources: number;
+  managed: number;
+  failed: number;
+  status: string;
+}
 
 interface HAGroupsListProps {
-  groups: HaGroup[];
+  groups: HAGroupInfo[];
   onRefresh?: () => void;
   isLoading?: boolean;
-  onCreate?: () => void;
+  onEdit?: (group: HAGroupInfo) => void;
-  onEdit?: (group: HaGroup) => void;
+  onDelete?: (group: HAGroupInfo) => void;
-  onDelete?: (id: string) => void;
+  onEnable?: (group: HAGroupInfo) => void;
+  onDisable?: (group: HAGroupInfo) => void;
 }
 
 export function HAGroupsList({
   groups,
   onRefresh,
   isLoading,
-  onCreate,
   onEdit,
   onDelete,
+  onEnable,
+  onDisable,
 }: HAGroupsListProps) {
   return (
     <Card>
@@ -28,12 +38,11 @@ export function HAGroupsList({
         <CardTitle>HA Groups</CardTitle>
         <div className="flex space-x-2">
           <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
-            <RefreshCw className="mr-2 h-4 w-4" />
             Refresh
           </Button>
-          <Button size="sm" onClick={onCreate}>
+          <Button size="sm">
-            <PlusCircle className="mr-2 h-4 w-4" />
+            <span className="mr-2 h-4 w-4">+</span>
-            Add Group
+            New Group
           </Button>
         </div>
       </CardHeader>
@@ -43,59 +52,66 @@ export function HAGroupsList({
             <TableHeader>
               <TableRow>
                 <TableHead>Name</TableHead>
-                <TableHead>Nodes</TableHead>
+                <TableHead>Resources</TableHead>
-                <TableHead>Restricted</TableHead>
+                <TableHead>Managed</TableHead>
-                <TableHead>No-Quorum Policy</TableHead>
+                <TableHead>Failed</TableHead>
-                <TableHead>Comment</TableHead>
+                <TableHead>Status</TableHead>
                 <TableHead className="text-right">Actions</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {groups.length === 0 ? (
+              {groups.map((group) => (
-                <TableRow>
+                <TableRow key={group.id}>
-                  <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                  <TableCell className="font-medium">{group.name}</TableCell>
-                    No HA groups configured
+                  <TableCell>{group.resources}</TableCell>
+                  <TableCell>{group.managed}</TableCell>
+                  <TableCell>{group.failed}</TableCell>
+                  <TableCell>
+                    <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
+                      group.status === 'healthy' ? 'bg-green-100 text-green-800' :
+                      group.status === 'error' ? 'bg-red-100 text-red-800' :
+                      'bg-yellow-100 text-yellow-800'
+                    }`}>
+                      {group.status}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end space-x-2">
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        onClick={() => onEdit?.(group)}
+                        title="Edit"
+                      >
+                        <span className="h-4 w-4 text-xs">✏️</span>
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        onClick={() => group.managed > 0 ? onDisable?.(group) : onEnable?.(group)}
+                        title={group.managed > 0 ? 'Disable' : 'Enable'}
+                      >
+                        {group.managed > 0 ? (
+                          <span className="h-4 w-4 text-xs">⏸️</span>
+                        ) : (
+                          <span className="h-4 w-4 text-xs">▶️</span>
+                        )}
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
+                        onClick={() => onDelete?.(group)}
+                        title="Delete"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        title="More"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </button>
+                    </div>
                   </TableCell>
                 </TableRow>
-              ) : (
+              ))}
-                groups.map((group) => (
-                  <TableRow key={group.id}>
-                    <TableCell className="font-medium">{group.id}</TableCell>
-                    <TableCell className="font-mono text-xs">{group.nodes}</TableCell>
-                    <TableCell>
-                      {group.restricted ? (
-                        <span className="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800">
-                          Yes
-                        </span>
-                      ) : (
-                        <span className="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-gray-100 text-gray-600">
-                          No
-                        </span>
-                      )}
-                    </TableCell>
-                    <TableCell>{group.noQuorumPolicy ?? '-'}</TableCell>
-                    <TableCell className="text-muted-foreground text-sm">{group.comment ?? '-'}</TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex items-center justify-end space-x-2">
-                        <button
-                          className="rounded-md p-1 hover:bg-accent"
-                          onClick={() => onEdit?.(group)}
-                          title="Edit"
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </button>
-                        <button
-                          className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
-                          onClick={() => onDelete?.(group.id)}
-                          title="Delete"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))
-              )}
             </TableBody>
           </Table>
         </div>

src/components/Proxmox/HAResourcesList.tsx

@@ -2,31 +2,53 @@ import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Play, Trash2, RefreshCw } from 'lucide-react';
+import { MoreHorizontal } from 'lucide-react';
-import { HaResource } from '@/lib/proxmoxClient';
+
+interface HAResourceInfo {
+  id: string;
+  name: string;
+  type: string;
+  group: string;
+  node: string;
+  managed: boolean;
+  failed: boolean;
+  status: string;
+}
 
 interface HAResourcesListProps {
-  resources: HaResource[];
+  resources: HAResourceInfo[];
   onRefresh?: () => void;
   isLoading?: boolean;
-  onEnable?: (resource: HaResource) => void;
+  onManage?: (resource: HAResourceInfo) => void;
-  onRemove?: (resource: HaResource) => void;
+  onUnmanage?: (resource: HAResourceInfo) => void;
+  onFailover?: (resource: HAResourceInfo) => void;
 }
 
 export function HAResourcesList({
   resources,
   onRefresh,
   isLoading,
-  onEnable,
+  onManage,
-  onRemove,
+  onUnmanage,
+  onFailover,
 }: HAResourcesListProps) {
+  const managedCount = resources.filter((r) => r.managed).length;
+  const failedCount = resources.filter((r) => r.failed).length;
+
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle>HA Resources</CardTitle>
         <div className="flex space-x-2">
+          <div className="flex items-center space-x-2 text-sm">
+            <span className="text-green-500">●</span>
+            <span>{managedCount} Managed</span>
+          </div>
+          <div className="flex items-center space-x-2 text-sm">
+            <span className="text-red-500">●</span>
+            <span>{failedCount} Failed</span>
+          </div>
           <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
-            <RefreshCw className="mr-2 h-4 w-4" />
             Refresh
           </Button>
         </div>
@@ -36,59 +58,66 @@ export function HAResourcesList({
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Resource ID</TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead>Type</TableHead>
                 <TableHead>Group</TableHead>
-                <TableHead>State</TableHead>
+                <TableHead>Node</TableHead>
-                <TableHead>Max Restart</TableHead>
+                <TableHead>Status</TableHead>
-                <TableHead>Max Relocate</TableHead>
                 <TableHead className="text-right">Actions</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {resources.length === 0 ? (
+              {resources.map((resource) => (
-                <TableRow>
+                <TableRow key={resource.id}>
-                  <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
+                  <TableCell className="font-medium">{resource.name}</TableCell>
-                    No HA resources configured
+                  <TableCell>{resource.type}</TableCell>
+                  <TableCell>{resource.group}</TableCell>
+                  <TableCell>{resource.node}</TableCell>
+                  <TableCell>
+                    <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
+                      resource.failed ? 'bg-red-100 text-red-800' :
+                      resource.managed ? 'bg-green-100 text-green-800' :
+                      'bg-gray-100 text-gray-800'
+                    }`}>
+                      {resource.failed ? 'Failed' : resource.managed ? 'Managed' : 'Unmanaged'}
+                    </span>
                   </TableCell>
-                </TableRow>
+                  <TableCell className="text-right">
-              ) : (
+                    <div className="flex items-center justify-end space-x-2">
-                resources.map((resource) => (
+                      {resource.managed ? (
-                  <TableRow key={resource.sid}>
-                    <TableCell className="font-medium font-mono text-xs">{resource.sid}</TableCell>
-                    <TableCell>{resource.group ?? '-'}</TableCell>
-                    <TableCell>
-                      <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
-                        resource.state === 'started' ? 'bg-green-100 text-green-800' :
-                        resource.state === 'stopped' ? 'bg-gray-100 text-gray-600' :
-                        resource.state === 'error' ? 'bg-red-100 text-red-800' :
-                        'bg-yellow-100 text-yellow-800'
-                      }`}>
-                        {resource.state}
-                      </span>
-                    </TableCell>
-                    <TableCell>{resource.maxRestart ?? '-'}</TableCell>
-                    <TableCell>{resource.maxRelocate ?? '-'}</TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex items-center justify-end space-x-2">
-                        <button
-                          className="rounded-md p-1 hover:bg-green-100 hover:text-green-600"
-                          onClick={() => onEnable?.(resource)}
-                          title="Enable"
-                        >
-                          <Play className="h-4 w-4" />
-                        </button>
                         <button
                           className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
-                          onClick={() => onRemove?.(resource)}
+                          onClick={() => onUnmanage?.(resource)}
-                          title="Remove"
+                          title="Unmanage"
                         >
-                          <Trash2 className="h-4 w-4" />
+                          <span className="h-4 w-4 text-xs">⏹️</span>
                         </button>
-                      </div>
+                      ) : (
-                    </TableCell>
+                        <button
-                  </TableRow>
+                          className="rounded-md p-1 hover:bg-green-100 hover:text-green-600"
-                ))
+                          onClick={() => onManage?.(resource)}
-              )}
+                          title="Manage"
+                        >
+                          <span className="h-4 w-4 text-xs">▶️</span>
+                        </button>
+                      )}
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        onClick={() => onFailover?.(resource)}
+                        title="Failover"
+                      >
+                        <span className="h-4 w-4 text-xs">🔄</span>
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        title="More"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
             </TableBody>
           </Table>
         </div>

src/components/Proxmox/RealmList.tsx

@@ -2,25 +2,32 @@ import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Pencil, Trash2, PlusCircle, RefreshCw } from 'lucide-react';
+import { MoreHorizontal, Trash2 } from 'lucide-react';
-import { AuthRealm } from '@/lib/proxmoxClient';
+
+interface RealmInfo {
+  id: string;
+  type: 'pam' | 'ldap' | 'ad' | 'openid';
+  server?: string;
+  baseDn?: string;
+  status: string;
+}
 
 interface RealmListProps {
-  realms: AuthRealm[];
+  realms: RealmInfo[];
   onRefresh?: () => void;
   isLoading?: boolean;
-  onCreate?: () => void;
+  onEdit?: (realm: RealmInfo) => void;
-  onEdit?: (realm: AuthRealm) => void;
+  onDelete?: (realm: RealmInfo) => void;
-  onDelete?: (realm: AuthRealm) => void;
+  onSync?: (realm: RealmInfo) => void;
 }
 
 export function RealmList({
   realms,
   onRefresh,
   isLoading,
-  onCreate,
   onEdit,
   onDelete,
+  onSync,
 }: RealmListProps) {
   return (
     <Card>
@@ -28,11 +35,10 @@ export function RealmList({
         <CardTitle>Authentication Realms</CardTitle>
         <div className="flex space-x-2">
           <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
-            <RefreshCw className="mr-2 h-4 w-4" />
             Refresh
           </Button>
-          <Button size="sm" onClick={onCreate}>
+          <Button size="sm">
-            <PlusCircle className="mr-2 h-4 w-4" />
+            <span className="mr-2 h-4 w-4">+</span>
             New Realm
           </Button>
         </div>
@@ -42,50 +48,63 @@ export function RealmList({
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Realm Name</TableHead>
+                <TableHead>Realm ID</TableHead>
                 <TableHead>Type</TableHead>
-                <TableHead>Comment</TableHead>
+                <TableHead>Server</TableHead>
+                <TableHead>Base DN</TableHead>
+                <TableHead>Status</TableHead>
                 <TableHead className="text-right">Actions</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {realms.length === 0 ? (
+              {realms.map((realm) => (
-                <TableRow>
+                <TableRow key={realm.id}>
-                  <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
+                  <TableCell className="font-medium">{realm.id}</TableCell>
-                    No auth realms configured
+                  <TableCell>
+                    <span className="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800">
+                      {realm.type.toUpperCase()}
+                    </span>
+                  </TableCell>
+                  <TableCell>{realm.server || '-'}</TableCell>
+                  <TableCell>{realm.baseDn || '-'}</TableCell>
+                  <TableCell>
+                    <span className="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-green-100 text-green-800">
+                      Active
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end space-x-2">
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        onClick={() => onEdit?.(realm)}
+                        title="Edit"
+                      >
+                        <span className="h-4 w-4 text-xs">✏️</span>
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        onClick={() => onSync?.(realm)}
+                        title="Sync Users"
+                      >
+                        <span className="h-4 w-4 text-xs">🔄</span>
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
+                        onClick={() => onDelete?.(realm)}
+                        title="Delete"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        title="More"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </button>
+                    </div>
                   </TableCell>
                 </TableRow>
-              ) : (
+              ))}
-                realms.map((realm) => (
-                  <TableRow key={realm.realm}>
-                    <TableCell className="font-medium">{realm.realm}</TableCell>
-                    <TableCell>
-                      <span className="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800">
-                        {realm.type.toUpperCase()}
-                      </span>
-                    </TableCell>
-                    <TableCell className="text-muted-foreground text-sm">{realm.comment ?? '-'}</TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex items-center justify-end space-x-2">
-                        <button
-                          className="rounded-md p-1 hover:bg-accent"
-                          onClick={() => onEdit?.(realm)}
-                          title="Edit"
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </button>
-                        <button
-                          className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
-                          onClick={() => onDelete?.(realm)}
-                          title="Delete"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))
-              )}
             </TableBody>
           </Table>
         </div>

src/components/Proxmox/UserList.tsx

@@ -2,35 +2,29 @@ import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Pencil, Trash2, PlusCircle, RefreshCw, Play, Pause } from 'lucide-react';
+import { MoreHorizontal, Trash2 } from 'lucide-react';
-import { ProxmoxUser } from '@/lib/proxmoxClient';
+
+interface UserInfo {
+  id: string;
+  email?: string;
+  enabled: boolean;
+  lastLogin?: string;
+}
 
 interface UserListProps {
-  users: ProxmoxUser[];
+  users: UserInfo[];
   onRefresh?: () => void;
   isLoading?: boolean;
-  onCreate?: () => void;
+  onEdit?: (user: UserInfo) => void;
-  onEdit?: (user: ProxmoxUser) => void;
+  onDelete?: (user: UserInfo) => void;
-  onDelete?: (user: ProxmoxUser) => void;
+  onEnable?: (user: UserInfo) => void;
-  onEnable?: (user: ProxmoxUser) => void;
+  onDisable?: (user: UserInfo) => void;
-  onDisable?: (user: ProxmoxUser) => void;
-}
-
-function formatExpiry(expire?: number): string {
-  if (!expire || expire === 0) return 'Never';
-  return new Date(expire * 1000).toLocaleDateString();
-}
-
-function deriveRealm(userid: string): string {
-  const parts = userid.split('@');
-  return parts.length > 1 ? parts[1] : '-';
 }
 
 export function UserList({
   users,
   onRefresh,
   isLoading,
-  onCreate,
   onEdit,
   onDelete,
   onEnable,
@@ -43,21 +37,20 @@ export function UserList({
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle>Users</CardTitle>
-        <div className="flex items-center space-x-2">
+        <div className="flex space-x-2">
-          <div className="flex items-center space-x-1 text-sm text-muted-foreground">
+          <div className="flex items-center space-x-2 text-sm">
             <span className="text-green-500">●</span>
             <span>{enabledCount} Enabled</span>
           </div>
-          <div className="flex items-center space-x-1 text-sm text-muted-foreground">
+          <div className="flex items-center space-x-2 text-sm">
-            <span className="text-gray-400">●</span>
+            <span className="text-gray-500">●</span>
             <span>{disabledCount} Disabled</span>
           </div>
           <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
-            <RefreshCw className="mr-2 h-4 w-4" />
             Refresh
           </Button>
-          <Button size="sm" onClick={onCreate}>
+          <Button size="sm">
-            <PlusCircle className="mr-2 h-4 w-4" />
+            <span className="mr-2 h-4 w-4">+</span>
             New User
           </Button>
         </div>
@@ -68,71 +61,64 @@ export function UserList({
             <TableHeader>
               <TableRow>
                 <TableHead>User ID</TableHead>
-                <TableHead>Realm</TableHead>
-                <TableHead>Name</TableHead>
                 <TableHead>Email</TableHead>
-                <TableHead>Enabled</TableHead>
+                <TableHead>Status</TableHead>
-                <TableHead>Expire</TableHead>
+                <TableHead>Last Login</TableHead>
                 <TableHead className="text-right">Actions</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {users.length === 0 ? (
+              {users.map((user) => (
-                <TableRow>
+                <TableRow key={user.id}>
-                  <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
+                  <TableCell className="font-medium">{user.id}</TableCell>
-                    No users found
+                  <TableCell>{user.email || '-'}</TableCell>
+                  <TableCell>
+                    <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
+                      user.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                    }`}>
+                      {user.enabled ? 'Enabled' : 'Disabled'}
+                    </span>
+                  </TableCell>
+                  <TableCell>{user.lastLogin || '-'}</TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end space-x-2">
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        onClick={() => onEdit?.(user)}
+                        title="Edit"
+                      >
+                        <span className="h-4 w-4 text-xs">✏️</span>
+                      </button>
+                      <button
+                        className={`rounded-md p-1 hover:bg-accent ${
+                          user.enabled ? 'text-green-600' : 'text-gray-600'
+                        }`}
+                        onClick={() => user.enabled ? onDisable?.(user) : onEnable?.(user)}
+                        title={user.enabled ? 'Disable' : 'Enable'}
+                      >
+                        {user.enabled ? (
+                          <span className="h-4 w-4 text-xs">⏸️</span>
+                        ) : (
+                          <span className="h-4 w-4 text-xs">▶️</span>
+                        )}
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
+                        onClick={() => onDelete?.(user)}
+                        title="Delete"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                      <button
+                        className="rounded-md p-1 hover:bg-accent"
+                        title="More"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </button>
+                    </div>
                   </TableCell>
                 </TableRow>
-              ) : (
+              ))}
-                users.map((user) => {
-                  const fullName = [user.firstname, user.lastname].filter(Boolean).join(' ') || '-';
-                  return (
-                    <TableRow key={user.userid}>
-                      <TableCell className="font-medium font-mono text-xs">{user.userid}</TableCell>
-                      <TableCell>{deriveRealm(user.userid)}</TableCell>
-                      <TableCell>{fullName}</TableCell>
-                      <TableCell>{user.email ?? '-'}</TableCell>
-                      <TableCell>
-                        <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
-                          user.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'
-                        }`}>
-                          {user.enabled ? 'Enabled' : 'Disabled'}
-                        </span>
-                      </TableCell>
-                      <TableCell>{formatExpiry(user.expire)}</TableCell>
-                      <TableCell className="text-right">
-                        <div className="flex items-center justify-end space-x-2">
-                          <button
-                            className="rounded-md p-1 hover:bg-accent"
-                            onClick={() => onEdit?.(user)}
-                            title="Edit"
-                          >
-                            <Pencil className="h-4 w-4" />
-                          </button>
-                          <button
-                            className="rounded-md p-1 hover:bg-accent"
-                            onClick={() => user.enabled ? onDisable?.(user) : onEnable?.(user)}
-                            title={user.enabled ? 'Disable' : 'Enable'}
-                          >
-                            {user.enabled ? (
-                              <Pause className="h-4 w-4 text-yellow-600" />
-                            ) : (
-                              <Play className="h-4 w-4 text-green-600" />
-                            )}
-                          </button>
-                          <button
-                            className="rounded-md p-1 hover:bg-red-100 hover:text-red-600"
-                            onClick={() => onDelete?.(user)}
-                            title="Delete"
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })
-              )}
             </TableBody>
           </Table>
         </div>

src/lib/domain.ts

@@ -12,8 +12,6 @@ export interface ClusterInfo {
   username: string;
   createdAt: string;
   updatedAt: string;
-  /** True when a live client exists in the backend connection pool */
-  connected?: boolean;
 }
 
 export interface ClusterConnection {
@@ -97,14 +95,3 @@ export interface HaGroup {
   maxRelocate: number;
   state: string;
 }
-
-export interface Certificate {
-  filename: string;
-  subject: string;
-  san?: string[];
-  issuer?: string;
-  notbefore?: string;
-  notafter?: string;
-  fingerprint?: string;
-  pem?: string;
-}

src/lib/proxmoxClient.ts

@@ -618,347 +618,3 @@ export async function listMetricCollections(
 ): Promise<any[]> {
   return await invoke<any[]>("list_metric_collections", { clusterId });
 }
-
-// ─── HA (High Availability) ───────────────────────────────────────────────────
-
-export interface HaGroup {
-  id: string;
-  nodes: string;
-  comment?: string;
-  restricted?: boolean;
-  noQuorumPolicy?: string;
-}
-
-export interface HaResource {
-  sid: string;
-  group?: string;
-  state: string;
-  maxRestart?: number;
-  maxRelocate?: number;
-}
-
-/**
- * List HA groups
- * @param clusterId - Cluster identifier
- */
-export const listHaGroups = async (clusterId: string): Promise<HaGroup[]> =>
-  invoke<HaGroup[]>("list_ha_groups", { clusterId });
-
-/**
- * Create an HA group
- * @param clusterId - Cluster identifier
- * @param config - HA group configuration
- */
-export const createHaGroup = async (
-  clusterId: string,
-  config: Partial<HaGroup>
-): Promise<void> => invoke<void>("create_ha_group", { clusterId, config });
-
-/**
- * Update an HA group
- * @param clusterId - Cluster identifier
- * @param id - HA group identifier
- * @param config - HA group configuration
- */
-export const updateHaGroup = async (
-  clusterId: string,
-  id: string,
-  config: Partial<HaGroup>
-): Promise<void> => invoke<void>("update_ha_group", { clusterId, id, config });
-
-/**
- * Delete an HA group
- * @param clusterId - Cluster identifier
- * @param id - HA group identifier
- */
-export const deleteHaGroup = async (
-  clusterId: string,
-  id: string
-): Promise<void> => invoke<void>("delete_ha_group", { clusterId, id });
-
-/**
- * List HA resources
- * @param clusterId - Cluster identifier
- */
-export const listHaResources = async (
-  clusterId: string
-): Promise<HaResource[]> =>
-  invoke<HaResource[]>("list_ha_resources", { clusterId });
-
-/**
- * Enable an HA resource
- * @param clusterId - Cluster identifier
- * @param id - HA resource identifier
- */
-export const enableHaResource = async (
-  clusterId: string,
-  id: string
-): Promise<void> => invoke<void>("enable_ha_resource", { clusterId, id });
-
-// ─── ACL / User Management ────────────────────────────────────────────────────
-
-export interface AclEntry {
-  path: string;
-  type: "user" | "group" | "token";
-  ugid: string;
-  roleid: string;
-  propagate?: boolean;
-}
-
-export interface ProxmoxUser {
-  userid: string;
-  comment?: string;
-  email?: string;
-  enabled: boolean;
-  expire?: number;
-  firstname?: string;
-  lastname?: string;
-  groups?: string[];
-}
-
-export interface AuthRealm {
-  realm: string;
-  type: string;
-  comment?: string;
-}
-
-/**
- * List ACL entries
- * @param clusterId - Cluster identifier
- */
-export const listAcls = async (clusterId: string): Promise<AclEntry[]> =>
-  invoke<AclEntry[]>("list_acls", { clusterId });
-
-/**
- * List users
- * @param clusterId - Cluster identifier
- */
-export const listUsers = async (clusterId: string): Promise<ProxmoxUser[]> =>
-  invoke<ProxmoxUser[]>("list_users", { clusterId });
-
-/**
- * List authentication realms (typed)
- * @param clusterId - Cluster identifier
- */
-export const listRealms = async (clusterId: string): Promise<AuthRealm[]> =>
-  invoke<AuthRealm[]>("list_realms", { clusterId });
-
-// ─── Cluster Notes ────────────────────────────────────────────────────────────
-
-/**
- * Get cluster notes
- * @param clusterId - Cluster identifier
- */
-export const getClusterNotes = async (clusterId: string): Promise<string> =>
-  invoke<string>("get_cluster_notes", { clusterId });
-
-/**
- * Update cluster notes
- * @param clusterId - Cluster identifier
- * @param notes - Notes content
- */
-export const updateClusterNotes = async (
-  clusterId: string,
-  notes: string
-): Promise<void> => invoke<void>("update_cluster_notes", { clusterId, notes });
-
-// ─── Resource Search ──────────────────────────────────────────────────────────
-
-export interface SearchResult {
-  id: string;
-  type: "vm" | "container" | "node" | "storage" | "pool";
-  name: string;
-  node?: string;
-  description?: string;
-}
-
-/**
- * Search Proxmox resources
- * @param clusterId - Cluster identifier
- * @param query - Search query string
- */
-export const searchResources = async (
-  clusterId: string,
-  query: string
-): Promise<SearchResult[]> =>
-  invoke<SearchResult[]>("search_proxmox_resources", { clusterId, query });
-
-// ─── Node Status ──────────────────────────────────────────────────────────────
-
-export interface NodeStatus {
-  uptime: number;
-  memory: { used: number; total: number };
-  cpu: number;
-  swap: { used: number; total: number };
-  disk: { used: number; total: number };
-  loadAvg: number[];
-  version: string;
-}
-
-/**
- * Get node status
- * @param clusterId - Cluster identifier
- * @param nodeId - Node identifier
- */
-export const getNodeStatus = async (
-  clusterId: string,
-  nodeId: string
-): Promise<NodeStatus> =>
-  invoke<NodeStatus>("get_node_status", { clusterId, nodeId });
-
-// ─── APT (typed) ──────────────────────────────────────────────────────────────
-
-export interface AptPackage {
-  package: string;
-  version: string;
-  newVersion?: string;
-  priority: string;
-  description?: string;
-}
-
-export interface AptRepository {
-  types: string[];
-  uris: string[];
-  suites: string[];
-  components: string[];
-  enabled: boolean;
-  comment?: string;
-}
-
-// ─── Syslog ───────────────────────────────────────────────────────────────────
-
-export interface SyslogEntry {
-  n: number;
-  t: string;
-  msg: string;
-}
-
-/**
- * Get node syslog
- * @param clusterId - Cluster identifier
- * @param nodeId - Node identifier
- * @param limit - Maximum number of entries (default 500)
- */
-export const getSyslog = async (
-  clusterId: string,
-  nodeId: string,
-  limit?: number
-): Promise<SyslogEntry[]> =>
-  invoke<SyslogEntry[]>("get_syslog", {
-    clusterId,
-    nodeId,
-    limit: limit ?? 500,
-  });
-
-// ─── Network Interfaces ───────────────────────────────────────────────────────
-
-export interface NetworkInterface {
-  iface: string;
-  type: string;
-  address?: string;
-  netmask?: string;
-  gateway?: string;
-  active: boolean;
-  autostart: boolean;
-  comments?: string;
-}
-
-/**
- * List network interfaces on a node
- * @param clusterId - Cluster identifier
- * @param nodeId - Node identifier
- */
-export const listNetworkInterfaces = async (
-  clusterId: string,
-  nodeId: string
-): Promise<NetworkInterface[]> =>
-  invoke<NetworkInterface[]>("list_network_interfaces", { clusterId, nodeId });
-
-// ─── Cluster Views (typed) ────────────────────────────────────────────────────
-
-export interface ClusterView {
-  view_id: string;
-  name: string;
-  description?: string;
-  layout?: string;
-  enabled?: boolean;
-}
-
-/**
- * List cluster views
- * @param clusterId - Cluster identifier
- */
-export const listClusterViews = async (
-  clusterId: string
-): Promise<ClusterView[]> =>
-  invoke<ClusterView[]>("list_cluster_views", { clusterId });
-
-/**
- * Create a cluster view
- * @param clusterId - Cluster identifier
- * @param viewId - View identifier
- * @param name - View display name
- */
-export const createClusterView = async (
-  clusterId: string,
-  viewId: string,
-  name: string
-): Promise<void> =>
-  invoke<void>("create_cluster_view", { clusterId, viewId, name });
-
-/**
- * Delete a cluster view
- * @param clusterId - Cluster identifier
- * @param viewId - View identifier
- */
-export const deleteClusterView = async (
-  clusterId: string,
-  viewId: string
-): Promise<void> => invoke<void>("delete_cluster_view", { clusterId, viewId });
-
-// ─── Subscription ─────────────────────────────────────────────────────────────
-
-export interface SubscriptionStatus {
-  status: "active" | "expired" | "none";
-  productname?: string;
-  regdate?: string;
-  nextduedate?: string;
-  key?: string;
-  serverid?: string;
-}
-
-/**
- * Get subscription status
- * @param clusterId - Cluster identifier
- */
-export const getSubscriptionStatus = async (
-  clusterId: string
-): Promise<SubscriptionStatus> =>
-  invoke<SubscriptionStatus>("get_subscription_status", { clusterId });
-
-// ─── Cluster Task Log ─────────────────────────────────────────────────────────
-
-export interface ClusterTask {
-  upid: string;
-  node: string;
-  pid: number;
-  starttime: number;
-  type: string;
-  user: string;
-  status?: string;
-  exitstatus?: string;
-}
-
-/**
- * List cluster-level tasks
- * @param clusterId - Cluster identifier
- * @param limit - Maximum number of tasks to return (default 50)
- */
-export const listClusterTasks = async (
-  clusterId: string,
-  limit?: number
-): Promise<ClusterTask[]> =>
-  invoke<ClusterTask[]>("list_cluster_tasks", {
-    clusterId,
-    limit: limit ?? 50,
-  });

src/pages/Proxmox/ACLPage.tsx

@@ -1,173 +1,34 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React from 'react';
+import { Button } from '@/components/ui/index';
 import { RefreshCw } from 'lucide-react';
-import { Button, Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/index';
+import { AclList } from '@/components/Proxmox';
-import { AclList, UserList, RealmList } from '@/components/Proxmox';
-import {
-  listProxmoxClusters,
-  listAcls,
-  listUsers,
-  listRealms,
-  AclEntry,
-  ProxmoxUser,
-  AuthRealm,
-} from '@/lib/proxmoxClient';
-import { ClusterInfo } from '@/lib/domain';
-import { toast } from 'sonner';
 
 export function ProxmoxACLPage() {
-  const [clusters, setClusters] = useState<ClusterInfo[]>([]);
+  const acls = [
-  const [selectedClusterId, setSelectedClusterId] = useState<string>('');
+    { id: '1', path: '/nodes/pve1', type: 'user' as const, principal: 'admin@pam', roles: ['PVEAdmin'], propagate: true },
-  const [activeTab, setActiveTab] = useState<string>('acl');
+    { id: '2', path: '/storage/local', type: 'group' as const, principal: 'admins', roles: ['PVEDataStoreAdmin'], propagate: false },
-
+    { id: '3', path: '/vms/100', type: 'user' as const, principal: 'developer@pam', roles: ['PVEVMUser'], propagate: false },
-  const [acls, setAcls] = useState<AclEntry[]>([]);
+  ];
-  const [users, setUsers] = useState<ProxmoxUser[]>([]);
-  const [realms, setRealms] = useState<AuthRealm[]>([]);
-
-  const [isLoadingAcls, setIsLoadingAcls] = useState(false);
-  const [isLoadingUsers, setIsLoadingUsers] = useState(false);
-  const [isLoadingRealms, setIsLoadingRealms] = useState(false);
-
-  // Load clusters on mount, auto-select the first
-  useEffect(() => {
-    listProxmoxClusters()
-      .then((cls) => {
-        setClusters(cls);
-        if (cls.length > 0) {
-          setSelectedClusterId(cls[0].id);
-        }
-      })
-      .catch((err) => {
-        console.error('Failed to load clusters:', err);
-        toast.error('Failed to load clusters');
-      });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const loadAcls = useCallback(async (clusterId: string) => {
-    if (!clusterId) return;
-    setIsLoadingAcls(true);
-    try {
-      const data = await listAcls(clusterId);
-      setAcls(data);
-    } catch (err) {
-      console.error('Failed to load ACLs:', err);
-      toast.error('Failed to load ACLs');
-    } finally {
-      setIsLoadingAcls(false);
-    }
-  }, []);
-
-  const loadUsers = useCallback(async (clusterId: string) => {
-    if (!clusterId) return;
-    setIsLoadingUsers(true);
-    try {
-      const data = await listUsers(clusterId);
-      setUsers(data);
-    } catch (err) {
-      console.error('Failed to load users:', err);
-      toast.error('Failed to load users');
-    } finally {
-      setIsLoadingUsers(false);
-    }
-  }, []);
-
-  const loadRealms = useCallback(async (clusterId: string) => {
-    if (!clusterId) return;
-    setIsLoadingRealms(true);
-    try {
-      const data = await listRealms(clusterId);
-      setRealms(data);
-    } catch (err) {
-      console.error('Failed to load realms:', err);
-      toast.error('Failed to load auth realms');
-    } finally {
-      setIsLoadingRealms(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (selectedClusterId) {
-      loadAcls(selectedClusterId);
-      loadUsers(selectedClusterId);
-      loadRealms(selectedClusterId);
-    }
-  }, [selectedClusterId, loadAcls, loadUsers, loadRealms]);
-
-  const handleRefreshAll = () => {
-    loadAcls(selectedClusterId);
-    loadUsers(selectedClusterId);
-    loadRealms(selectedClusterId);
-  };
 
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold">Access Control &amp; Users</h1>
+          <h1 className="text-2xl font-bold">Access Control Lists</h1>
-          <p className="text-muted-foreground">Manage permissions, users, and authentication realms</p>
+          <p className="text-muted-foreground">Manage permissions and access control</p>
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="flex space-x-2">
-          {clusters.length > 1 && (
+          <Button variant="outline" size="sm">
-            <select
-              className="rounded-md border px-3 py-1.5 text-sm bg-background"
-              value={selectedClusterId}
-              onChange={(e) => setSelectedClusterId(e.target.value)}
-            >
-              {clusters.map((c) => (
-                <option key={c.id} value={c.id}>
-                  {c.name}
-                </option>
-              ))}
-            </select>
-          )}
-          <Button variant="outline" size="sm" onClick={handleRefreshAll}>
             <RefreshCw className="mr-2 h-4 w-4" />
             Refresh
           </Button>
         </div>
       </div>
 
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
+      <AclList
-        <TabsList>
+        acls={acls}
-          <TabsTrigger value="acl">ACLs</TabsTrigger>
+        onRefresh={() => {}}
-          <TabsTrigger value="users">Users</TabsTrigger>
+      />
-          <TabsTrigger value="realms">Auth Realms</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="acl">
-          <AclList
-            acls={acls}
-            isLoading={isLoadingAcls}
-            onRefresh={() => loadAcls(selectedClusterId)}
-            onAdd={() => toast.info('Add ACL — not yet implemented')}
-            onEdit={() => toast.info('Edit ACL — not yet implemented')}
-            onDelete={() => toast.info('Delete ACL — not yet implemented')}
-          />
-        </TabsContent>
-
-        <TabsContent value="users">
-          <UserList
-            users={users}
-            isLoading={isLoadingUsers}
-            onRefresh={() => loadUsers(selectedClusterId)}
-            onCreate={() => toast.info('Create user — not yet implemented')}
-            onEdit={() => toast.info('Edit user — not yet implemented')}
-            onDelete={() => toast.info('Delete user — not yet implemented')}
-            onEnable={() => toast.info('Enable user — not yet implemented')}
-            onDisable={() => toast.info('Disable user — not yet implemented')}
-          />
-        </TabsContent>
-
-        <TabsContent value="realms">
-          <RealmList
-            realms={realms}
-            isLoading={isLoadingRealms}
-            onRefresh={() => loadRealms(selectedClusterId)}
-            onCreate={() => toast.info('Create realm — not yet implemented')}
-            onEdit={() => toast.info('Edit realm — not yet implemented')}
-            onDelete={() => toast.info('Delete realm — not yet implemented')}
-          />
-        </TabsContent>
-      </Tabs>
     </div>
   );
 }

src/pages/Proxmox/AdminPage.tsx

@@ -1,355 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/index';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
-import { Button } from '@/components/ui/index';
-import { Input } from '@/components/ui/index';
-import { RefreshCw, Power, RotateCcw } from 'lucide-react';
-import {
-  listProxmoxClusters,
-  getNodeStatus,
-  listAptUpdates,
-  listAptRepositories,
-  getSyslog,
-  listClusterTasks,
-} from '@/lib/proxmoxClient';
-import type {
-  NodeStatus,
-  AptPackage,
-  AptRepository,
-  SyslogEntry,
-  ClusterTask,
-} from '@/lib/proxmoxClient';
-import type { ClusterInfo } from '@/lib/domain';
-
-export function ProxmoxAdminPage() {
-  const [clusters, setClusters] = useState<ClusterInfo[]>([]);
-  const [clusterId, setClusterId] = useState('');
-  const [nodeId, setNodeId] = useState('localhost');
-  const [nodeInputValue, setNodeInputValue] = useState('localhost');
-  const [nodeStatus, setNodeStatus] = useState<NodeStatus | null>(null);
-  const [aptUpdates, setAptUpdates] = useState<AptPackage[]>([]);
-  const [aptRepos, setAptRepos] = useState<AptRepository[]>([]);
-  const [syslog, setSyslog] = useState<SyslogEntry[]>([]);
-  const [tasks, setTasks] = useState<ClusterTask[]>([]);
-  const [activeTab, setActiveTab] = useState('status');
-  const [tabError, setTabError] = useState<string | null>(null);
-
-  useEffect(() => {
-    listProxmoxClusters()
-      .then((cls) => {
-        setClusters(cls);
-        if (cls.length > 0) setClusterId(cls[0].id);
-      })
-      .catch((err: unknown) => console.error('Failed to load clusters:', err));
-  }, []);
-
-  const loadTabData = useCallback(
-    async (tab: string, cId: string, nId: string) => {
-      if (!cId) return;
-      setTabError(null);
-      try {
-        switch (tab) {
-          case 'status':
-            setNodeStatus(await getNodeStatus(cId, nId));
-            break;
-          case 'updates':
-            setAptUpdates(await listAptUpdates(cId, nId));
-            break;
-          case 'repositories':
-            setAptRepos(await listAptRepositories(cId, nId));
-            break;
-          case 'syslog':
-            setSyslog(await getSyslog(cId, nId));
-            break;
-          case 'tasks':
-            setTasks(await listClusterTasks(cId));
-            break;
-        }
-      } catch (e) {
-        setTabError(String(e));
-      }
-    },
-    []
-  );
-
-  useEffect(() => {
-    void loadTabData(activeTab, clusterId, nodeId);
-  }, [activeTab, clusterId, nodeId, loadTabData]);
-
-  const applyNodeId = () => {
-    setNodeId(nodeInputValue.trim() || 'localhost');
-  };
-
-  const formatBytes = (bytes: number) =>
-    bytes >= 1073741824
-      ? `${(bytes / 1073741824).toFixed(1)} GB`
-      : `${Math.round(bytes / 1048576)} MB`;
-
-  const formatUptime = (seconds: number) => {
-    const d = Math.floor(seconds / 86400);
-    const h = Math.floor((seconds % 86400) / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    return d > 0 ? `${d}d ${h}h ${m}m` : `${h}h ${m}m`;
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">Administration</h1>
-          <p className="text-muted-foreground">Node management, updates, and system monitoring</p>
-        </div>
-      </div>
-
-      {/* Cluster / Node selector bar */}
-      <div className="flex items-center gap-3 flex-wrap">
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-muted-foreground">Cluster:</span>
-          <select
-            className="text-sm border rounded px-2 py-1 bg-background"
-            value={clusterId}
-            onChange={(e) => setClusterId(e.target.value)}
-          >
-            {clusters.length === 0 && <option value="">No clusters</option>}
-            {clusters.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-muted-foreground">Node:</span>
-          <Input
-            className="w-36 h-8 text-sm"
-            value={nodeInputValue}
-            onChange={(e) => setNodeInputValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') applyNodeId();
-            }}
-            placeholder="localhost"
-          />
-          <Button variant="outline" size="sm" onClick={applyNodeId}>
-            Apply
-          </Button>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => void loadTabData(activeTab, clusterId, nodeId)}
-        >
-          <RefreshCw className="mr-2 h-4 w-4" />
-          Refresh
-        </Button>
-      </div>
-
-      {tabError && <div className="text-destructive text-sm">{tabError}</div>}
-
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList>
-          <TabsTrigger value="status">Node Status</TabsTrigger>
-          <TabsTrigger value="updates">Updates</TabsTrigger>
-          <TabsTrigger value="repositories">Repositories</TabsTrigger>
-          <TabsTrigger value="syslog">System Log</TabsTrigger>
-          <TabsTrigger value="tasks">Tasks</TabsTrigger>
-        </TabsList>
-
-        {/* ── Node Status ─────────────────────────────────────────────────── */}
-        <TabsContent value="status">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between">
-              <CardTitle>Node Status</CardTitle>
-              <div className="flex space-x-2">
-                <Button variant="outline" size="sm">
-                  <RotateCcw className="mr-2 h-4 w-4" />
-                  Reboot
-                </Button>
-                <Button variant="destructive" size="sm">
-                  <Power className="mr-2 h-4 w-4" />
-                  Shutdown
-                </Button>
-              </div>
-            </CardHeader>
-            <CardContent>
-              {nodeStatus ? (
-                <div className="grid grid-cols-2 gap-4 text-sm">
-                  <div>
-                    <span className="text-muted-foreground">CPU:</span>{' '}
-                    {(nodeStatus.cpu * 100).toFixed(1)}%
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Memory:</span>{' '}
-                    {formatBytes(nodeStatus.memory.used)} / {formatBytes(nodeStatus.memory.total)}
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Swap:</span>{' '}
-                    {formatBytes(nodeStatus.swap.used)} / {formatBytes(nodeStatus.swap.total)}
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Disk:</span>{' '}
-                    {formatBytes(nodeStatus.disk.used)} / {formatBytes(nodeStatus.disk.total)}
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Uptime:</span>{' '}
-                    {formatUptime(nodeStatus.uptime)}
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">Version:</span>{' '}
-                    {nodeStatus.version}
-                  </div>
-                  {nodeStatus.loadAvg.length > 0 && (
-                    <div className="col-span-2">
-                      <span className="text-muted-foreground">Load Avg:</span>{' '}
-                      {nodeStatus.loadAvg.map((v) => v.toFixed(2)).join(' / ')}
-                    </div>
-                  )}
-                </div>
-              ) : (
-                <div className="text-muted-foreground text-sm">Loading node status...</div>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* ── APT Updates ─────────────────────────────────────────────────── */}
-        <TabsContent value="updates">
-          <Card>
-            <CardHeader>
-              <CardTitle>Available Updates ({aptUpdates.length})</CardTitle>
-            </CardHeader>
-            <CardContent>
-              {aptUpdates.length === 0 ? (
-                <div className="text-muted-foreground text-sm">No updates available</div>
-              ) : (
-                <div className="space-y-1">
-                  {aptUpdates.map((pkg, i) => (
-                    <div
-                      key={`${pkg.package}-${i}`}
-                      className="flex items-center justify-between p-2 border rounded text-sm"
-                    >
-                      <span className="font-mono">{pkg.package}</span>
-                      <span className="text-muted-foreground">
-                        {pkg.version}
-                        {pkg.newVersion ? ` → ${pkg.newVersion}` : ''}
-                      </span>
-                      {pkg.description && (
-                        <span className="text-xs text-muted-foreground truncate max-w-xs ml-2">
-                          {pkg.description}
-                        </span>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* ── APT Repositories ────────────────────────────────────────────── */}
-        <TabsContent value="repositories">
-          <Card>
-            <CardHeader>
-              <CardTitle>APT Repositories</CardTitle>
-            </CardHeader>
-            <CardContent>
-              {aptRepos.length === 0 ? (
-                <div className="text-muted-foreground text-sm">No repositories found</div>
-              ) : (
-                <div className="space-y-2">
-                  {aptRepos.map((repo, i) => (
-                    <div key={i} className="p-3 border rounded text-sm">
-                      <div className="font-mono text-xs">
-                        {repo.types.join(' ')} {repo.uris.join(' ')} {repo.suites.join(' ')}{' '}
-                        {repo.components.join(' ')}
-                      </div>
-                      <div className="flex items-center gap-2 mt-1">
-                        <span
-                          className={
-                            repo.enabled
-                              ? 'text-xs text-green-600'
-                              : 'text-xs text-muted-foreground'
-                          }
-                        >
-                          {repo.enabled ? 'Enabled' : 'Disabled'}
-                        </span>
-                        {repo.comment && (
-                          <span className="text-xs text-muted-foreground">{repo.comment}</span>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* ── Syslog ──────────────────────────────────────────────────────── */}
-        <TabsContent value="syslog">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between">
-              <CardTitle>System Log</CardTitle>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => void loadTabData('syslog', clusterId, nodeId)}
-              >
-                <RefreshCw className="mr-2 h-4 w-4" />
-                Refresh
-              </Button>
-            </CardHeader>
-            <CardContent>
-              <div className="font-mono text-xs space-y-0.5 max-h-96 overflow-y-auto">
-                {syslog.length === 0 ? (
-                  <div className="text-muted-foreground">No log entries</div>
-                ) : (
-                  syslog.map((entry) => (
-                    <div key={entry.n} className="text-muted-foreground">
-                      {entry.t} {entry.msg}
-                    </div>
-                  ))
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* ── Tasks ───────────────────────────────────────────────────────── */}
-        <TabsContent value="tasks">
-          <Card>
-            <CardHeader>
-              <CardTitle>Recent Tasks</CardTitle>
-            </CardHeader>
-            <CardContent>
-              {tasks.length === 0 ? (
-                <div className="text-muted-foreground text-sm">No tasks found</div>
-              ) : (
-                <div className="space-y-1">
-                  {tasks.map((t) => (
-                    <div
-                      key={t.upid}
-                      className="flex items-center gap-2 p-2 border rounded text-sm"
-                    >
-                      <span className="font-mono text-xs text-muted-foreground truncate max-w-xs">
-                        {t.upid}
-                      </span>
-                      <span>{t.type}</span>
-                      <span className="text-muted-foreground">{t.node}</span>
-                      <span
-                        className={
-                          t.exitstatus === 'OK' ? 'text-green-600' : 'text-destructive'
-                        }
-                      >
-                        {t.exitstatus ?? 'running'}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

src/pages/Proxmox/CertificatesPage.tsx

@@ -1,251 +1,29 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
-import { Card, CardContent } from '@/components/ui/index';
+// Card imports removed '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Input } from '@/components/ui/index';
+import { RefreshCw } from 'lucide-react';
-import { Label } from '@/components/ui/index';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/index';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/index';
-import { RefreshCw, Upload, ShieldCheck } from 'lucide-react';
 import { CertificateList } from '@/components/Proxmox';
-import { listProxmoxClusters, listCertificates } from '@/lib/proxmoxClient';
-import { ClusterInfo, Certificate } from '@/lib/domain';
 
 export function ProxmoxCertificatesPage() {
-  const [clusters, setClusters] = useState<ClusterInfo[]>([]);
-  const [selectedClusterId, setSelectedClusterId] = useState<string>('');
-  const [nodeId, setNodeId] = useState<string>('pve');
-  const [certificates, setCertificates] = useState<Certificate[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Upload dialog state
-  const [uploadOpen, setUploadOpen] = useState(false);
-  const [uploadCertPem, setUploadCertPem] = useState('');
-  const [uploadKeyPem, setUploadKeyPem] = useState('');
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // ACME dialog state
-  const [acmeOpen, setAcmeOpen] = useState(false);
-  const [acmeDomain, setAcmeDomain] = useState('');
-
-  useEffect(() => {
-    void (async () => {
-      try {
-        const cls = await listProxmoxClusters();
-        setClusters(cls);
-        if (cls.length > 0) {
-          setSelectedClusterId(cls[0].id);
-        }
-      } catch (err) {
-        setError(String(err));
-      }
-    })();
-  }, []);
-
-  useEffect(() => {
-    if (!selectedClusterId) return;
-    void fetchCerts();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedClusterId]);
-
-  async function fetchCerts() {
-    setLoading(true);
-    setError(null);
-    try {
-      const raw = await listCertificates(selectedClusterId, nodeId);
-      const mapped: Certificate[] = (raw as Record<string, unknown>[]).map((c) => ({
-        filename: String(c['filename'] ?? c['subject'] ?? 'unknown'),
-        subject: String(c['subject'] ?? ''),
-        san: Array.isArray(c['san']) ? (c['san'] as string[]) : undefined,
-        issuer: c['issuer'] != null ? String(c['issuer']) : undefined,
-        notbefore: c['notbefore'] != null ? String(c['notbefore']) : undefined,
-        notafter: c['notafter'] != null ? String(c['notafter']) : undefined,
-        fingerprint: c['fingerprint'] != null ? String(c['fingerprint']) : undefined,
-        pem: c['pem'] != null ? String(c['pem']) : undefined,
-      }));
-      setCertificates(mapped);
-    } catch (err) {
-      setError(String(err));
-      setCertificates([]);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  function handleRenew(_cert: Certificate) {
-
-    void fetchCerts();
-  }
-
-  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = (ev) => {
-      setUploadCertPem(String(ev.target?.result ?? ''));
-    };
-    reader.readAsText(file);
-  }
-
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Certificates</h1>
-          <p className="text-muted-foreground">Manage TLS certificates across clusters</p>
+          <p className="text-muted-foreground">Manage TLS certificates</p>
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="flex space-x-2">
-          {clusters.length > 1 && (
+          <Button variant="outline" size="sm">
-            <Select value={selectedClusterId} onValueChange={setSelectedClusterId}>
+            <RefreshCw className="mr-2 h-4 w-4" />
-              <SelectTrigger className="w-48">
-                <SelectValue placeholder="Select cluster" />
-              </SelectTrigger>
-              <SelectContent>
-                {clusters.map((c) => (
-                  <SelectItem key={c.id} value={c.id}>
-                    {c.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-          <Button variant="outline" size="sm" onClick={fetchCerts} disabled={loading || !selectedClusterId}>
-            <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
             Refresh
           </Button>
-          <Button variant="outline" size="sm" onClick={() => setAcmeOpen(true)}>
-            <ShieldCheck className="mr-2 h-4 w-4" />
-            Order via ACME
-          </Button>
-          <Button size="sm" onClick={() => setUploadOpen(true)}>
-            <Upload className="mr-2 h-4 w-4" />
-            Upload Certificate
-          </Button>
         </div>
       </div>
 
-      {error && (
+      <CertificateList
-        <div className="rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+        certificates={[]}
-          {error}
+        onRefresh={() => {}}
-        </div>
+      />
-      )}
-
-      {!selectedClusterId && clusters.length === 0 && !loading && (
-        <Card>
-          <CardContent className="flex items-center justify-center py-12 text-muted-foreground text-sm">
-            No clusters configured. Add a cluster in Remotes first.
-          </CardContent>
-        </Card>
-      )}
-
-      {selectedClusterId && (
-        <CertificateList
-          certificates={certificates}
-          onRefresh={fetchCerts}
-          onRenew={handleRenew}
-          isLoading={loading}
-        />
-      )}
-
-      {/* Upload Certificate Dialog */}
-      <Dialog open={uploadOpen} onOpenChange={setUploadOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Upload Custom Certificate</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label>Certificate File (.pem / .crt)</Label>
-              <Input
-                ref={fileInputRef}
-                type="file"
-                accept=".pem,.crt,.cer"
-                onChange={handleFileChange}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label>Certificate PEM</Label>
-              <textarea
-                className="flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-xs font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-y"
-                placeholder="-----BEGIN CERTIFICATE-----"
-                value={uploadCertPem}
-                onChange={(e) => setUploadCertPem(e.target.value)}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label>Private Key PEM</Label>
-              <textarea
-                className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-xs font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-y"
-                placeholder="-----BEGIN PRIVATE KEY-----"
-                value={uploadKeyPem}
-                onChange={(e) => setUploadKeyPem(e.target.value)}
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setUploadOpen(false)}>
-              Cancel
-            </Button>
-            <Button
-              disabled={!uploadCertPem.trim()}
-              onClick={() => {
-
-                setUploadOpen(false);
-                setUploadCertPem('');
-                setUploadKeyPem('');
-                void fetchCerts();
-              }}
-            >
-              Upload
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* ACME Dialog */}
-      <Dialog open={acmeOpen} onOpenChange={setAcmeOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Order Certificate via ACME</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <p className="text-sm text-muted-foreground">
-              Request a certificate from an ACME provider for the selected cluster node.
-            </p>
-            <div className="space-y-2">
-              <Label>Domain / Node</Label>
-              <Input
-                placeholder="e.g. pve.example.com"
-                value={acmeDomain}
-                onChange={(e) => setAcmeDomain(e.target.value)}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label>Node ID</Label>
-              <Input
-                placeholder="pve"
-                value={nodeId}
-                onChange={(e) => setNodeId(e.target.value)}
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setAcmeOpen(false)}>
-              Cancel
-            </Button>
-            <Button
-              disabled={!acmeDomain.trim()}
-              onClick={() => {
-
-                setAcmeOpen(false);
-                setAcmeDomain('');
-              }}
-            >
-              Order Certificate
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 }

src/pages/Proxmox/HAPage.tsx

@@ -1,119 +1,10 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React from 'react';
-import { RefreshCw } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
+import { RefreshCw } from 'lucide-react';
 import { HAGroupsList, HAResourcesList } from '@/components/Proxmox';
-import {
-  listProxmoxClusters,
-  listHaGroups,
-  listHaResources,
-  deleteHaGroup,
-  enableHaResource,
-  HaGroup,
-  HaResource,
-} from '@/lib/proxmoxClient';
-import { ClusterInfo } from '@/lib/domain';
-import { toast } from 'sonner';
 
 export function ProxmoxHAPage() {
-  const [clusters, setClusters] = useState<ClusterInfo[]>([]);
-  const [selectedClusterId, setSelectedClusterId] = useState<string>('');
-  const [groups, setGroups] = useState<HaGroup[]>([]);
-  const [resources, setResources] = useState<HaResource[]>([]);
-  const [isLoadingGroups, setIsLoadingGroups] = useState(false);
-  const [isLoadingResources, setIsLoadingResources] = useState(false);
-
-  // Load clusters on mount and auto-select the first one
-  useEffect(() => {
-    listProxmoxClusters()
-      .then((cls) => {
-        setClusters(cls);
-        if (cls.length > 0 && !selectedClusterId) {
-          setSelectedClusterId(cls[0].id);
-        }
-      })
-      .catch((err) => {
-        console.error('Failed to load clusters:', err);
-        toast.error('Failed to load clusters');
-      });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const loadGroups = useCallback(async (clusterId: string) => {
-    if (!clusterId) return;
-    setIsLoadingGroups(true);
-    try {
-      const data = await listHaGroups(clusterId);
-      setGroups(data);
-    } catch (err) {
-      console.error('Failed to load HA groups:', err);
-      toast.error('Failed to load HA groups');
-    } finally {
-      setIsLoadingGroups(false);
-    }
-  }, []);
-
-  const loadResources = useCallback(async (clusterId: string) => {
-    if (!clusterId) return;
-    setIsLoadingResources(true);
-    try {
-      const data = await listHaResources(clusterId);
-      setResources(data);
-    } catch (err) {
-      console.error('Failed to load HA resources:', err);
-      toast.error('Failed to load HA resources');
-    } finally {
-      setIsLoadingResources(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (selectedClusterId) {
-      loadGroups(selectedClusterId);
-      loadResources(selectedClusterId);
-    }
-  }, [selectedClusterId, loadGroups, loadResources]);
-
-  const handleRefreshAll = () => {
-    loadGroups(selectedClusterId);
-    loadResources(selectedClusterId);
-  };
-
-  const handleDeleteGroup = async (id: string) => {
-    try {
-      await deleteHaGroup(selectedClusterId, id);
-      toast.success(`HA group "${id}" deleted`);
-      await loadGroups(selectedClusterId);
-    } catch (err) {
-      console.error('Failed to delete HA group:', err);
-      toast.error('Failed to delete HA group');
-    }
-  };
-
-  const handleEditGroup = (group: HaGroup) => {
-    // Placeholder: edit dialog integration to be wired when dialog component is available
-    toast.info(`Edit group: ${group.id}`);
-  };
-
-  const handleCreateGroup = () => {
-    // Placeholder: create dialog integration to be wired when dialog component is available
-    toast.info('Create HA group — not yet implemented');
-  };
-
-  const handleEnableResource = async (resource: HaResource) => {
-    try {
-      await enableHaResource(selectedClusterId, resource.sid);
-      toast.success(`HA resource "${resource.sid}" enabled`);
-      await loadResources(selectedClusterId);
-    } catch (err) {
-      console.error('Failed to enable HA resource:', err);
-      toast.error('Failed to enable HA resource');
-    }
-  };
-
-  const handleRemoveResource = async (resource: HaResource) => {
-    // Placeholder: removal command to be wired when backend command is available
-    toast.info(`Remove resource: ${resource.sid}`);
-  };
-
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -121,44 +12,38 @@ export function ProxmoxHAPage() {
           <h1 className="text-2xl font-bold">High Availability</h1>
           <p className="text-muted-foreground">Manage HA groups and resources</p>
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="flex space-x-2">
-          {clusters.length > 1 && (
+          <Button variant="outline" size="sm">
-            <select
-              className="rounded-md border px-3 py-1.5 text-sm bg-background"
-              value={selectedClusterId}
-              onChange={(e) => setSelectedClusterId(e.target.value)}
-            >
-              {clusters.map((c) => (
-                <option key={c.id} value={c.id}>
-                  {c.name}
-                </option>
-              ))}
-            </select>
-          )}
-          <Button variant="outline" size="sm" onClick={handleRefreshAll}>
             <RefreshCw className="mr-2 h-4 w-4" />
             Refresh
           </Button>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 gap-4">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <HAGroupsList
+        <Card>
-          groups={groups}
+          <CardHeader>
-          isLoading={isLoadingGroups}
+            <CardTitle>HA Groups</CardTitle>
-          onRefresh={() => loadGroups(selectedClusterId)}
+          </CardHeader>
-          onCreate={handleCreateGroup}
+          <CardContent>
-          onEdit={handleEditGroup}
+            <HAGroupsList
-          onDelete={handleDeleteGroup}
+              groups={[]}
-        />
+              onRefresh={() => {}}
+            />
+          </CardContent>
+        </Card>
 
-        <HAResourcesList
+        <Card>
-          resources={resources}
+          <CardHeader>
-          isLoading={isLoadingResources}
+            <CardTitle>HA Resources</CardTitle>
-          onRefresh={() => loadResources(selectedClusterId)}
+          </CardHeader>
-          onEnable={handleEnableResource}
+          <CardContent>
-          onRemove={handleRemoveResource}
+            <HAResourcesList
-        />
+              resources={[]}
+              onRefresh={() => {}}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

src/pages/Proxmox/NetworkPage.tsx

@@ -1,118 +1,43 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Badge } from '@/components/ui/index';
+import { RefreshCw } from 'lucide-react';
-import { RefreshCw, Network } from 'lucide-react';
-import { listNetworkInterfaces, listProxmoxClusters, NetworkInterface } from '@/lib/proxmoxClient';
 
 export function ProxmoxNetworkPage() {
-  const [interfaces, setInterfaces] = useState<NetworkInterface[]>([]);
-  const [clusterId, setClusterId] = useState('');
-  const [nodeId] = useState('localhost');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const loadInterfaces = useCallback(async (cId: string, nId: string) => {
-    if (!cId) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const ifaces = await listNetworkInterfaces(cId, nId);
-      setInterfaces(ifaces);
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    listProxmoxClusters()
-      .then((cls) => {
-        if (cls.length > 0) {
-          setClusterId(cls[0].id);
-          void loadInterfaces(cls[0].id, nodeId);
-        }
-      })
-      .catch(console.error);
-  }, [loadInterfaces, nodeId]);
-
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Network</h1>
-          <p className="text-muted-foreground">Network interfaces and bridges</p>
+          <p className="text-muted-foreground">Configure network interfaces and bridges</p>
+        </div>
+        <div className="flex space-x-2">
+          <Button variant="outline" size="sm">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Refresh
+          </Button>
         </div>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => void loadInterfaces(clusterId, nodeId)}
-          disabled={loading || !clusterId}
-        >
-          <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-          Refresh
-        </Button>
       </div>
 
-      {error && (
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <div className="rounded border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+        <Card>
-          {error}
+          <CardHeader>
-        </div>
+            <CardTitle>Network Interfaces</CardTitle>
-      )}
+          </CardHeader>
+          <CardContent>
+            <div className="text-sm text-muted-foreground">Network interface configuration coming soon</div>
+          </CardContent>
+        </Card>
 
-      <Card>
+        <Card>
-        <CardHeader>
+          <CardHeader>
-          <CardTitle>Network Interfaces</CardTitle>
+            <CardTitle>Bridges</CardTitle>
-        </CardHeader>
+          </CardHeader>
-        <CardContent>
+          <CardContent>
-          {loading ? (
+            <div className="text-sm text-muted-foreground">Bridge configuration coming soon</div>
-            <div className="text-sm text-muted-foreground">Loading...</div>
+          </CardContent>
-          ) : interfaces.length === 0 ? (
+        </Card>
-            <div className="text-sm text-muted-foreground">
+      </div>
-              {clusterId ? 'No network interfaces found.' : 'No cluster configured.'}
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {interfaces.map((iface, i) => (
-                <div key={`${iface.iface}-${i}`} className="flex items-center gap-3 rounded border p-3">
-                  <Network className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  <div className="flex-1 min-w-0">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <span className="font-mono font-medium">{iface.iface}</span>
-                      <Badge variant="outline">{iface.type}</Badge>
-                      <Badge variant={iface.active ? 'default' : 'secondary'}>
-                        {iface.active ? 'Active' : 'Inactive'}
-                      </Badge>
-                      {iface.autostart && (
-                        <Badge variant="outline" className="text-xs">Autostart</Badge>
-                      )}
-                    </div>
-                    {(iface.address || iface.gateway) && (
-                      <div className="mt-1 text-xs text-muted-foreground">
-                        {iface.address && (
-                          <span>
-                            {iface.address}
-                            {iface.netmask ? `/${iface.netmask}` : ''}
-                          </span>
-                        )}
-                        {iface.gateway && (
-                          <span className="ml-2">gw {iface.gateway}</span>
-                        )}
-                      </div>
-                    )}
-                    {iface.comments && (
-                      <div className="mt-1 text-xs italic text-muted-foreground">
-                        {iface.comments}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
     </div>
   );
 }

src/pages/Proxmox/NotesPage.tsx

@@ -1,105 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
-import { Button } from '@/components/ui/index';
-import { Textarea } from '@/components/ui/index';
-import { Edit, Save, X } from 'lucide-react';
-import { getClusterNotes, updateClusterNotes, listProxmoxClusters } from '@/lib/proxmoxClient';
-
-export function ProxmoxNotesPage() {
-  const [notes, setNotes] = useState('');
-  const [editMode, setEditMode] = useState(false);
-  const [draft, setDraft] = useState('');
-  const [clusterId, setClusterId] = useState('');
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const init = async () => {
-      try {
-        const clusters = await listProxmoxClusters();
-        if (clusters.length > 0) {
-          setClusterId(clusters[0].id);
-          const n = await getClusterNotes(clusters[0].id);
-          setNotes(n);
-        }
-      } catch (e) {
-        setError(String(e));
-      }
-    };
-    void init();
-  }, []);
-
-  const handleEdit = () => {
-    setDraft(notes);
-    setEditMode(true);
-  };
-
-  const handleCancel = () => setEditMode(false);
-
-  const handleSave = async () => {
-    setSaving(true);
-    try {
-      await updateClusterNotes(clusterId, draft);
-      setNotes(draft);
-      setEditMode(false);
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">Notes</h1>
-          <p className="text-muted-foreground">Cluster notes and documentation</p>
-        </div>
-        {!editMode ? (
-          <Button variant="outline" onClick={handleEdit}>
-            <Edit className="mr-2 h-4 w-4" />
-            Edit
-          </Button>
-        ) : (
-          <div className="flex space-x-2">
-            <Button variant="outline" onClick={handleCancel}>
-              <X className="mr-2 h-4 w-4" />
-              Cancel
-            </Button>
-            <Button onClick={() => void handleSave()} disabled={saving}>
-              <Save className="mr-2 h-4 w-4" />
-              {saving ? 'Saving...' : 'Save'}
-            </Button>
-          </div>
-        )}
-      </div>
-
-      {error && <div className="text-destructive text-sm">{error}</div>}
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Cluster Notes</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {!editMode ? (
-            <pre className="whitespace-pre-wrap text-sm font-mono min-h-[200px]">
-              {notes || (
-                <span className="text-muted-foreground">
-                  No notes yet. Click Edit to add notes.
-                </span>
-              )}
-            </pre>
-          ) : (
-            <Textarea
-              value={draft}
-              onChange={(e) => setDraft(e.target.value)}
-              className="min-h-[300px] font-mono text-sm"
-              placeholder="Enter cluster notes here..."
-            />
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

src/pages/Proxmox/RemotesPage.tsx

@@ -117,7 +117,7 @@ export function ProxmoxRemotesPage() {
           <p className="text-muted-foreground">Manage Proxmox VE and Backup Server connections</p>
         </div>
         <div className="flex space-x-2">
-          <Button variant="outline" size="sm" onClick={() => { void loadRemotes(); }}>
+          <Button variant="outline" size="sm">
             <RefreshCw className="mr-2 h-4 w-4" />
             Refresh
           </Button>
@@ -130,7 +130,7 @@ export function ProxmoxRemotesPage() {
 
       <RemotesList
         remotes={remotes}
-        onRefresh={() => { void loadRemotes(); }}
+        onRefresh={() => {}}
         onEdit={(remote) => {
           setEditingRemote(remote as RemoteInfo | null);
         }}

src/pages/Proxmox/SearchPage.tsx

@@ -1,127 +0,0 @@
-import React, { useState } from 'react';
-import { Card, CardContent } from '@/components/ui/index';
-import { Button } from '@/components/ui/index';
-import { Input } from '@/components/ui/index';
-import { Badge } from '@/components/ui/index';
-import { Search, Server, HardDrive, Cpu, Database } from 'lucide-react';
-import { searchResources, listProxmoxClusters } from '@/lib/proxmoxClient';
-import type { SearchResult } from '@/lib/proxmoxClient';
-
-const TYPE_ICONS: Record<string, React.ElementType> = {
-  vm: Cpu,
-  container: HardDrive,
-  node: Server,
-  storage: Database,
-  pool: Server,
-};
-
-export function ProxmoxSearchPage() {
-  const [query, setQuery] = useState('');
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [searching, setSearching] = useState(false);
-  const [searched, setSearched] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSearch = async () => {
-    if (!query.trim()) return;
-    setSearching(true);
-    setError(null);
-    setSearched(false);
-    try {
-      const clusters = await listProxmoxClusters();
-      const allResults: SearchResult[] = [];
-      await Promise.all(
-        clusters.map(async (c) => {
-          try {
-            const r = await searchResources(c.id, query);
-            allResults.push(...r);
-          } catch {
-            // skip clusters that fail individually
-          }
-        })
-      );
-      setResults(allResults);
-      setSearched(true);
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setSearching(false);
-    }
-  };
-
-  // Group results by type
-  const grouped = results.reduce<Record<string, SearchResult[]>>((acc, r) => {
-    const bucket = acc[r.type] ?? [];
-    bucket.push(r);
-    acc[r.type] = bucket;
-    return acc;
-  }, {});
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <h1 className="text-2xl font-bold">Search</h1>
-        <p className="text-muted-foreground">Search across all Proxmox resources</p>
-      </div>
-
-      <div className="flex space-x-2">
-        <Input
-          placeholder="Search VMs, containers, nodes, storage..."
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') void handleSearch();
-          }}
-          className="max-w-lg"
-        />
-        <Button onClick={() => void handleSearch()} disabled={searching}>
-          <Search className="mr-2 h-4 w-4" />
-          {searching ? 'Searching...' : 'Search'}
-        </Button>
-      </div>
-
-      {error && <div className="text-destructive text-sm">{error}</div>}
-
-      {Object.entries(grouped).map(([type, items]) => {
-        const Icon = TYPE_ICONS[type] ?? Server;
-        return (
-          <Card key={type}>
-            <CardContent className="pt-4">
-              <div className="flex items-center gap-2 text-sm font-semibold capitalize mb-2">
-                <Icon className="h-4 w-4" />
-                {type}s ({items.length})
-              </div>
-              <div className="space-y-1">
-                {items.map((r) => (
-                  <div
-                    key={`${r.type}-${r.id}`}
-                    className="flex items-center gap-2 p-2 rounded hover:bg-accent"
-                  >
-                    <Badge variant="outline" className="text-xs">
-                      {r.type}
-                    </Badge>
-                    <span className="text-sm font-medium">{r.name}</span>
-                    {r.node && (
-                      <span className="text-xs text-muted-foreground">on {r.node}</span>
-                    )}
-                    {r.description && (
-                      <span className="text-xs text-muted-foreground truncate max-w-xs">
-                        — {r.description}
-                      </span>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        );
-      })}
-
-      {searched && results.length === 0 && (
-        <div className="text-muted-foreground text-sm">
-          No results found for &ldquo;{query}&rdquo;
-        </div>
-      )}
-    </div>
-  );
-}

src/pages/Proxmox/SubscriptionPage.tsx

@@ -1,293 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
-import { Button } from '@/components/ui/index';
-import { Badge } from '@/components/ui/index';
-import { Input } from '@/components/ui/index';
-import { Label } from '@/components/ui/index';
-import { RefreshCw, Key, Check, AlertCircle, Clock } from 'lucide-react';
-import { getSubscriptionStatus, listProxmoxClusters, SubscriptionStatus } from '@/lib/proxmoxClient';
-import { ClusterInfo } from '@/lib/domain';
-
-interface ClusterSubscription {
-  cluster: ClusterInfo;
-  status: SubscriptionStatus;
-}
-
-function StatusBadge({ status }: { status: SubscriptionStatus['status'] }) {
-  if (status === 'active') {
-    return (
-      <Badge variant="success" className="flex items-center gap-1 w-fit">
-        <Check className="h-3 w-3" />
-        Active
-      </Badge>
-    );
-  }
-  if (status === 'expired') {
-    return (
-      <Badge variant="destructive" className="flex items-center gap-1 w-fit">
-        <AlertCircle className="h-3 w-3" />
-        Expired
-      </Badge>
-    );
-  }
-  return (
-    <Badge variant="secondary" className="flex items-center gap-1 w-fit">
-      <Clock className="h-3 w-3" />
-      None
-    </Badge>
-  );
-}
-
-function maskKey(key?: string): string {
-  if (!key) return '';
-  const parts = key.split('-');
-  if (parts.length < 2) return key.slice(0, 4) + '-xxxx-xxxx-xxxx';
-  return `${parts[0]}-xxxx-xxxx-xxxx`;
-}
-
-export function ProxmoxSubscriptionPage() {
-  const [clusters, setClusters] = useState<ClusterInfo[]>([]);
-  const [subscriptions, setSubscriptions] = useState<Record<string, SubscriptionStatus>>({});
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [keyInput, setKeyInput] = useState('');
-  const [selectedClusterId, setSelectedClusterId] = useState<string>('');
-  const [activating, setActivating] = useState(false);
-  const [activationMessage, setActivationMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-
-  async function loadAll() {
-    setLoading(true);
-    setError(null);
-    try {
-      const cls = await listProxmoxClusters();
-      setClusters(cls);
-      if (cls.length > 0 && !selectedClusterId) {
-        setSelectedClusterId(cls[0].id);
-      }
-      const subs: Record<string, SubscriptionStatus> = {};
-      await Promise.all(
-        cls.map(async (c) => {
-          try {
-            subs[c.id] = await getSubscriptionStatus(c.id);
-          } catch {
-            subs[c.id] = { status: 'none' };
-          }
-        })
-      );
-      setSubscriptions(subs);
-    } catch (err) {
-      setError(String(err));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    void loadAll();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  async function handleActivate() {
-    if (!keyInput.trim() || !selectedClusterId) return;
-    setActivating(true);
-    setActivationMessage(null);
-    try {
-      // Backend invocation would go here: await setSubscriptionKey(selectedClusterId, keyInput.trim())
-      // For now we optimistically refresh status
-      await loadAll();
-      setActivationMessage({ type: 'success', text: 'Subscription key submitted. Status refreshed.' });
-      setKeyInput('');
-    } catch (err) {
-      setActivationMessage({ type: 'error', text: String(err) });
-    } finally {
-      setActivating(false);
-    }
-  }
-
-  const clusterSubscriptions: ClusterSubscription[] = clusters.map((c) => ({
-    cluster: c,
-    status: subscriptions[c.id] ?? { status: 'none' },
-  }));
-
-  const activeCount = clusterSubscriptions.filter((cs) => cs.status.status === 'active').length;
-  const expiredCount = clusterSubscriptions.filter((cs) => cs.status.status === 'expired').length;
-  const noneCount = clusterSubscriptions.filter((cs) => cs.status.status === 'none').length;
-
-  const selectedSub = selectedClusterId ? subscriptions[selectedClusterId] : undefined;
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">Subscriptions</h1>
-          <p className="text-muted-foreground">Manage Proxmox subscription keys across clusters</p>
-        </div>
-        <Button variant="outline" size="sm" onClick={loadAll} disabled={loading}>
-          <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-          Refresh
-        </Button>
-      </div>
-
-      {error && (
-        <div className="rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-          {error}
-        </div>
-      )}
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Left panel: Subscription Key input */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Key className="h-5 w-5" />
-              Subscription Key
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {/* Current key display */}
-            {selectedSub?.key && (
-              <div className="rounded-md border bg-muted/30 px-4 py-3 space-y-1">
-                <div className="text-xs text-muted-foreground">Current Key</div>
-                <div className="font-mono text-sm font-medium">{maskKey(selectedSub.key)}</div>
-                {selectedSub.productname && (
-                  <div className="text-xs text-muted-foreground">{selectedSub.productname}</div>
-                )}
-                <StatusBadge status={selectedSub.status} />
-              </div>
-            )}
-
-            {clusters.length > 1 && (
-              <div className="space-y-2">
-                <Label>Target Cluster</Label>
-                <select
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                  value={selectedClusterId}
-                  onChange={(e) => setSelectedClusterId(e.target.value)}
-                >
-                  {clusters.map((c) => (
-                    <option key={c.id} value={c.id}>
-                      {c.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            )}
-
-            <div className="space-y-2">
-              <Label htmlFor="sub-key">Enter Subscription Key</Label>
-              <Input
-                id="sub-key"
-                placeholder="pve4e-xxxx-xxxx-xxxx"
-                value={keyInput}
-                onChange={(e) => setKeyInput(e.target.value)}
-                onKeyDown={(e) => { if (e.key === 'Enter') void handleActivate(); }}
-              />
-              <p className="text-xs text-muted-foreground">
-                Keys can be obtained from the{' '}
-                <a
-                  href="https://www.proxmox.com/en/proxmox-ve/pricing"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline hover:text-foreground"
-                >
-                  Proxmox shop
-                </a>
-                .
-              </p>
-            </div>
-
-            {activationMessage && (
-              <div
-                className={`rounded-md border px-4 py-3 text-sm ${
-                  activationMessage.type === 'success'
-                    ? 'border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400'
-                    : 'border-destructive/50 bg-destructive/10 text-destructive'
-                }`}
-              >
-                {activationMessage.text}
-              </div>
-            )}
-
-            <Button
-              className="w-full"
-              disabled={!keyInput.trim() || !selectedClusterId || activating}
-              onClick={handleActivate}
-            >
-              {activating ? (
-                <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Key className="mr-2 h-4 w-4" />
-              )}
-              Activate Key
-            </Button>
-          </CardContent>
-        </Card>
-
-        {/* Right panel: Per-cluster status */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Cluster Subscription Status</CardTitle>
-            <div className="flex items-center gap-3 text-sm text-muted-foreground pt-1">
-              <span className="flex items-center gap-1">
-                <span className="h-2 w-2 rounded-full bg-green-500 inline-block" />
-                {activeCount} Active
-              </span>
-              <span className="flex items-center gap-1">
-                <span className="h-2 w-2 rounded-full bg-red-500 inline-block" />
-                {expiredCount} Expired
-              </span>
-              <span className="flex items-center gap-1">
-                <span className="h-2 w-2 rounded-full bg-muted-foreground inline-block" />
-                {noneCount} None
-              </span>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {clusterSubscriptions.length === 0 ? (
-              <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
-                {loading ? 'Loading...' : 'No clusters configured.'}
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {clusterSubscriptions.map(({ cluster, status }) => (
-                  <div
-                    key={cluster.id}
-                    className={`rounded-lg border p-4 cursor-pointer transition-colors ${
-                      selectedClusterId === cluster.id
-                        ? 'border-primary bg-primary/5'
-                        : 'hover:bg-muted/50'
-                    }`}
-                    onClick={() => setSelectedClusterId(cluster.id)}
-                  >
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="space-y-1 min-w-0">
-                        <div className="font-medium truncate">{cluster.name}</div>
-                        <div className="text-xs text-muted-foreground font-mono truncate">
-                          {cluster.url}:{cluster.port}
-                        </div>
-                        {status.productname && (
-                          <div className="text-xs text-muted-foreground">{status.productname}</div>
-                        )}
-                        <div className="flex items-center gap-3 text-xs text-muted-foreground flex-wrap">
-                          {status.regdate && (
-                            <span>Registered: {status.regdate}</span>
-                          )}
-                          {status.nextduedate && (
-                            <span>Next due: {status.nextduedate}</span>
-                          )}
-                        </div>
-                      </div>
-                      <div className="flex-shrink-0">
-                        <StatusBadge status={status.status} />
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

src/pages/Proxmox/TasksPage.tsx

@@ -1,142 +1,45 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
-import { Badge } from '@/components/ui/index';
 import { RefreshCw } from 'lucide-react';
-import { listClusterTasks, listProxmoxClusters, ClusterTask } from '@/lib/proxmoxClient';
+import { ClusterOperationsList } from '@/components/Proxmox';
-
-function taskBadgeVariant(exitstatus?: string): 'default' | 'destructive' | 'secondary' {
-  if (!exitstatus) return 'secondary';
-  return exitstatus === 'OK' ? 'default' : 'destructive';
-}
-
-function taskBadgeLabel(exitstatus?: string): string {
-  if (!exitstatus) return 'running';
-  return exitstatus;
-}
-
-function formatTimestamp(epoch: number): string {
-  if (!epoch) return '-';
-  return new Date(epoch * 1000).toLocaleString();
-}
 
 export function ProxmoxTasksPage() {
-  const [tasks, setTasks] = useState<ClusterTask[]>([]);
-  const [clusterId, setClusterId] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const loadTasks = useCallback(async (cId: string) => {
-    if (!cId) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const t = await listClusterTasks(cId, 100);
-      setTasks(t);
-    } catch (e) {
-      setError(String(e));
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    listProxmoxClusters()
-      .then((cls) => {
-        if (cls.length > 0) {
-          setClusterId(cls[0].id);
-          void loadTasks(cls[0].id);
-        }
-      })
-      .catch(console.error);
-  }, [loadTasks]);
-
-  const runningCount = tasks.filter((t) => !t.exitstatus).length;
-  const completedCount = tasks.filter((t) => t.exitstatus === 'OK').length;
-  const failedCount = tasks.filter(
-    (t) => t.exitstatus && t.exitstatus !== 'OK'
-  ).length;
-
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold">Tasks</h1>
+          <h1 className="text-2xl font-bold">Tasks & Operations</h1>
-          <p className="text-muted-foreground">Cluster task log and operations</p>
+          <p className="text-muted-foreground">Monitor cluster operations and tasks</p>
+        </div>
+        <div className="flex space-x-2">
+          <Button variant="outline" size="sm">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Refresh
+          </Button>
         </div>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => void loadTasks(clusterId)}
-          disabled={loading || !clusterId}
-        >
-          <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-          Refresh
-        </Button>
       </div>
 
-      {error && (
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        <div className="rounded border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-          {error}
-        </div>
-      )}
-
-      <div className="grid grid-cols-3 gap-4">
         <Card>
-          <CardContent className="pt-4">
+          <CardHeader>
-            <div className="text-2xl font-bold text-yellow-500">{runningCount}</div>
+            <CardTitle>Task Summary</CardTitle>
-            <div className="text-sm text-muted-foreground">Running</div>
+          </CardHeader>
-          </CardContent>
+          <CardContent>
-        </Card>
+            <div className="text-sm text-muted-foreground">Task summary widget coming soon</div>
-        <Card>
-          <CardContent className="pt-4">
-            <div className="text-2xl font-bold text-green-500">{completedCount}</div>
-            <div className="text-sm text-muted-foreground">Completed</div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-4">
-            <div className="text-2xl font-bold text-red-500">{failedCount}</div>
-            <div className="text-sm text-muted-foreground">Failed</div>
           </CardContent>
         </Card>
       </div>
 
       <Card>
         <CardHeader>
-          <CardTitle>Task Log</CardTitle>
+          <CardTitle>Cluster Operations</CardTitle>
         </CardHeader>
         <CardContent>
-          {loading ? (
+          <ClusterOperationsList
-            <div className="text-sm text-muted-foreground">Loading tasks...</div>
+            operations={[]}
-          ) : tasks.length === 0 ? (
+            onRefresh={() => {}}
-            <div className="text-sm text-muted-foreground">
+          />
-              {clusterId ? 'No tasks found.' : 'No cluster configured.'}
-            </div>
-          ) : (
-            <div className="space-y-0">
-              {tasks.map((t, i) => (
-                <div
-                  key={`${t.upid}-${i}`}
-                  className="flex flex-wrap items-center gap-3 border-b py-2 text-sm last:border-0"
-                >
-                  <Badge variant={taskBadgeVariant(t.exitstatus)}>
-                    {taskBadgeLabel(t.exitstatus)}
-                  </Badge>
-                  <span className="font-medium">{t.type}</span>
-                  <span className="text-muted-foreground">{t.node}</span>
-                  <span className="text-xs text-muted-foreground">{t.user}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {formatTimestamp(t.starttime)}
-                  </span>
-                  <span className="ml-auto max-w-xs truncate font-mono text-xs text-muted-foreground">
-                    {t.upid}
-                  </span>
-                </div>
-              ))}
-            </div>
-          )}
         </CardContent>
       </Card>
     </div>

src/pages/Proxmox/ViewsPage.tsx

@@ -1,158 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
-import { Button } from '@/components/ui/index';
-import { Plus, Trash2, Eye } from 'lucide-react';
-import {
-  listClusterViews,
-  createClusterView,
-  deleteClusterView,
-  listProxmoxClusters,
-  ClusterView,
-} from '@/lib/proxmoxClient';
-
-export function ProxmoxViewsPage() {
-  const [views, setViews] = useState<ClusterView[]>([]);
-  const [clusterId, setClusterId] = useState('');
-  const [showCreate, setShowCreate] = useState(false);
-  const [newViewName, setNewViewName] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [deleting, setDeleting] = useState<string | null>(null);
-
-  const loadViews = useCallback(async (cId: string) => {
-    if (!cId) return;
-    setError(null);
-    try {
-      const v = await listClusterViews(cId);
-      setViews(v);
-    } catch (e) {
-      setError(String(e));
-    }
-  }, []);
-
-  useEffect(() => {
-    listProxmoxClusters()
-      .then((cls) => {
-        if (cls.length > 0) {
-          setClusterId(cls[0].id);
-          void loadViews(cls[0].id);
-        }
-      })
-      .catch(console.error);
-  }, [loadViews]);
-
-  const handleCreate = async () => {
-    const trimmed = newViewName.trim();
-    if (!trimmed || !clusterId) return;
-    setError(null);
-    try {
-      // Generate a simple ID from the name (lowercase, hyphenated)
-      const viewId = trimmed.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
-      await createClusterView(clusterId, viewId, trimmed);
-      setNewViewName('');
-      setShowCreate(false);
-      void loadViews(clusterId);
-    } catch (e) {
-      setError(String(e));
-    }
-  };
-
-  const handleDelete = async (viewId: string) => {
-    if (!clusterId) return;
-    setDeleting(viewId);
-    setError(null);
-    try {
-      await deleteClusterView(clusterId, viewId);
-      void loadViews(clusterId);
-    } catch (e) {
-      setError(String(e));
-    } finally {
-      setDeleting(null);
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">Views</h1>
-          <p className="text-muted-foreground">Custom resource views and dashboards</p>
-        </div>
-        <Button
-          onClick={() => setShowCreate(true)}
-          disabled={!clusterId || showCreate}
-        >
-          <Plus className="mr-2 h-4 w-4" />
-          New View
-        </Button>
-      </div>
-
-      {error && (
-        <div className="rounded border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-          {error}
-        </div>
-      )}
-
-      {showCreate && (
-        <Card>
-          <CardHeader>
-            <CardTitle>Create View</CardTitle>
-          </CardHeader>
-          <CardContent className="flex gap-2">
-            <input
-              className="flex-1 rounded border bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring"
-              placeholder="View name"
-              value={newViewName}
-              onChange={(e) => setNewViewName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') void handleCreate();
-                if (e.key === 'Escape') setShowCreate(false);
-              }}
-              autoFocus
-            />
-            <Button onClick={() => void handleCreate()} disabled={!newViewName.trim()}>
-              Create
-            </Button>
-            <Button variant="outline" onClick={() => { setShowCreate(false); setNewViewName(''); }}>
-              Cancel
-            </Button>
-          </CardContent>
-        </Card>
-      )}
-
-      {views.length === 0 && !showCreate ? (
-        <Card>
-          <CardContent className="pt-4 text-sm text-muted-foreground">
-            {clusterId ? 'No custom views configured.' : 'No cluster configured.'}
-          </CardContent>
-        </Card>
-      ) : (
-        <div className="space-y-2">
-          {views.map((v) => (
-            <Card key={v.view_id}>
-              <CardContent className="flex items-center justify-between pt-4">
-                <div className="flex items-center gap-2">
-                  <Eye className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  <div>
-                    <span className="font-medium">{v.name}</span>
-                    {v.description && (
-                      <p className="text-xs text-muted-foreground">{v.description}</p>
-                    )}
-                  </div>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => void handleDelete(v.view_id)}
-                  disabled={deleting === v.view_id}
-                  title="Delete view"
-                >
-                  <Trash2 className="h-4 w-4 text-destructive" />
-                </Button>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

src/pages/Settings/Proxmox.tsx

@@ -1,35 +1,204 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/index';
 import { Label } from '@/components/ui/index';
 import { Switch } from '@/components/ui/index';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/index';
 import { Button } from '@/components/ui/index';
+import { RefreshCw, Check, AlertCircle, Loader } from 'lucide-react';
+import {
+  checkAppUpdatesCmd,
+  installAppUpdatesCmd,
+  getUpdateChannelCmd,
+  setUpdateChannelCmd,
+} from '@/lib/tauriCommands';
 
 export function ProxmoxSettings() {
-  const [defaultPort, setDefaultPort] = useState<string>('8006');
+  const [autoUpdate, setAutoUpdate] = React.useState(true);
-  const [connectionTimeout, setConnectionTimeout] = useState<string>('30');
+  const [updateChannel, setUpdateChannel] = React.useState<'stable' | 'pre-release'>('stable');
-  const [retryAttempts, setRetryAttempts] = useState<string>('3');
+  const [autoCheck, setAutoCheck] = React.useState(true);
-  const [verifyCertificates, setVerifyCertificates] = useState(true);
+  const [lastCheck, setLastCheck] = React.useState<string>('Never');
-  const [enableCaching, setEnableCaching] = useState(true);
+  const [defaultPort, setDefaultPort] = React.useState<string>('8006');
-  const [enableDebug, setEnableDebug] = useState(false);
+  const [connectionTimeout, setConnectionTimeout] = React.useState<string>('30');
-  const [saved, setSaved] = useState(false);
+  const [retryAttempts, setRetryAttempts] = React.useState<string>('3');
+  const [verifyCertificates, setVerifyCertificates] = React.useState(true);
+  const [enableCaching, setEnableCaching] = React.useState(true);
+  const [enableDebug, setEnableDebug] = React.useState(false);
+  const [checking, setChecking] = React.useState(false);
+  const [updateAvailable, setUpdateAvailable] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
 
-  useEffect(() => {
+  const loadChannel = async () => {
-    setDefaultPort(localStorage.getItem('proxmox_default_port') ?? '8006');
+    try {
-    setConnectionTimeout(localStorage.getItem('proxmox_connection_timeout') ?? '30');
+      const ch = await getUpdateChannelCmd();
-    setRetryAttempts(localStorage.getItem('proxmox_retry_attempts') ?? '3');
+      setUpdateChannel(ch as 'stable' | 'pre-release');
-    setVerifyCertificates((localStorage.getItem('proxmox_verify_certificates') ?? 'true') === 'true');
+    } catch {
-    setEnableCaching((localStorage.getItem('proxmox_enable_caching') ?? 'true') === 'true');
+      console.error('Failed to load channel');
-    setEnableDebug((localStorage.getItem('proxmox_enable_debug') ?? 'false') === 'true');
+    }
+  };
+
+  const handleCheckUpdates = async () => {
+    setChecking(true);
+    setError(null);
+    try {
+      const available = await checkAppUpdatesCmd();
+      setUpdateAvailable(available);
+      setLastCheck(new Date().toLocaleString());
+    } catch {
+      setError('Failed to check for updates');
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  const handleInstallUpdate = async () => {
+    try {
+      await installAppUpdatesCmd();
+      setUpdateAvailable(false);
+    } catch {
+      setError('Failed to install update');
+    }
+  };
+
+  const handleChannelChange = async (value: string) => {
+    setUpdateChannel(value as 'stable' | 'pre-release');
+    try {
+      await setUpdateChannelCmd(value);
+    } catch {
+      setError('Failed to update channel');
+    }
+  };
+
+  React.useEffect(() => {
+    void loadChannel();
+    void handleCheckUpdates();
   }, []);
 
   return (
     <div className="space-y-6">
       <div>
         <h1 className="text-2xl font-bold">Proxmox Settings</h1>
-        <p className="text-muted-foreground">Default settings for Proxmox cluster connections</p>
+        <p className="text-muted-foreground">Configure Proxmox Datacenter Manager integration</p>
       </div>
 
+      <Card>
+        <CardHeader>
+          <CardTitle>Update Management</CardTitle>
+          <CardDescription>Configure how Proxmox updates are managed</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="autoUpdate">Auto-check for updates</Label>
+              <p className="text-sm text-muted-foreground">
+                Automatically check for new Proxmox updates
+              </p>
+            </div>
+            <Switch
+              checked={autoUpdate}
+              onCheckedChange={setAutoUpdate}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="updateChannel">Update Channel</Label>
+            <Select
+              value={updateChannel}
+              onValueChange={handleChannelChange}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="stable">Stable</SelectItem>
+                <SelectItem value="pre-release">Pre-Release</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">
+              {updateChannel === 'stable' 
+                ? 'Receive only stable, production-ready updates' 
+                : 'Receive pre-release updates with new features (may be less stable)'}
+            </p>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="autoCheck">Auto-download updates</Label>
+              <p className="text-sm text-muted-foreground">
+                Automatically download updates when available
+              </p>
+            </div>
+            <Switch
+              checked={autoCheck}
+              onCheckedChange={setAutoCheck}
+            />
+          </div>
+
+          <div className="flex items-center justify-between rounded-lg border p-4">
+            <div className="space-y-0.5">
+              <Label className="text-base">Last check</Label>
+              <p className="text-sm text-muted-foreground">
+                {lastCheck}
+              </p>
+            </div>
+            <Button onClick={handleCheckUpdates} variant="outline">
+              {checking ? (
+                <>
+                  <Loader className="mr-2 h-4 w-4 animate-spin" />
+                  Checking...
+                </>
+              ) : (
+                <>
+                  <RefreshCw className="mr-2 h-4 w-4" />
+                  Check Now
+                </>
+              )}
+            </Button>
+          </div>
+
+          {error && (
+            <div className="flex items-center space-x-2 rounded-lg bg-destructive/15 p-3 text-destructive">
+              <AlertCircle className="h-4 w-4" />
+              <span className="text-sm">{error}</span>
+            </div>
+          )}
+
+          {updateAvailable ? (
+            <div className="flex items-center justify-between rounded-lg bg-green-50 p-4 dark:bg-green-900/20">
+              <div className="flex items-center space-x-3">
+                <div className="rounded-full bg-green-600 p-1 text-white">
+                  <Check className="h-4 w-4" />
+                </div>
+                <div>
+                  <div className="font-semibold text-green-900 dark:text-green-100">
+                    Update Available
+                  </div>
+                  <div className="text-sm text-green-700 dark:text-green-300">
+                    A new version is ready to install
+                  </div>
+                </div>
+              </div>
+              <Button onClick={handleInstallUpdate}>
+                Install Update
+              </Button>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between rounded-lg bg-muted p-4">
+              <div className="flex items-center space-x-3">
+                <div className="rounded-full bg-muted-foreground p-1 text-background">
+                  <Check className="h-4 w-4" />
+                </div>
+                <div>
+                  <div className="font-semibold">Up to Date</div>
+                  <div className="text-sm text-muted-foreground">
+                    You are running the latest version
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader>
           <CardTitle>Cluster Configuration</CardTitle>
@@ -124,40 +293,9 @@ export function ProxmoxSettings() {
         </CardContent>
       </Card>
 
-      <div className="flex items-center justify-end space-x-2 pt-4">
+      <div className="flex justify-end space-x-2 pt-4">
-        <Button
+        <Button variant="outline">Reset to Defaults</Button>
-          variant="outline"
+        <Button>Save Settings</Button>
-          onClick={() => {
-            ['proxmox_default_port', 'proxmox_connection_timeout', 'proxmox_retry_attempts',
-             'proxmox_verify_certificates', 'proxmox_enable_caching', 'proxmox_enable_debug']
-              .forEach((k) => localStorage.removeItem(k));
-            setDefaultPort('8006');
-            setConnectionTimeout('30');
-            setRetryAttempts('3');
-            setVerifyCertificates(true);
-            setEnableCaching(true);
-            setEnableDebug(false);
-          }}
-        >
-          Reset to Defaults
-        </Button>
-        <Button
-          onClick={() => {
-            localStorage.setItem('proxmox_default_port', defaultPort);
-            localStorage.setItem('proxmox_connection_timeout', connectionTimeout);
-            localStorage.setItem('proxmox_retry_attempts', retryAttempts);
-            localStorage.setItem('proxmox_verify_certificates', String(verifyCertificates));
-            localStorage.setItem('proxmox_enable_caching', String(enableCaching));
-            localStorage.setItem('proxmox_enable_debug', String(enableDebug));
-            setSaved(true);
-            setTimeout(() => setSaved(false), 2000);
-          }}
-        >
-          Save Settings
-        </Button>
-        {saved && (
-          <span className="text-sm text-green-600">Settings saved</span>
-        )}
       </div>
     </div>
   );

src/pages/Settings/Updater.tsx

@@ -1,170 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
-import { Button } from '@/components/ui/index';
-import { RefreshCw, Check, AlertCircle, Loader } from 'lucide-react';
-import {
-  checkAppUpdatesCmd,
-  installAppUpdatesCmd,
-  getUpdateChannelCmd,
-  setUpdateChannelCmd,
-} from '@/lib/tauriCommands';
-
-export function Updater() {
-  const [channel, setChannel] = useState('stable');
-  const [checking, setChecking] = useState(false);
-  const [updateAvailable, setUpdateAvailable] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const loadChannel = async () => {
-    try {
-      const ch = await getUpdateChannelCmd();
-      setChannel(ch);
-    } catch {
-      console.error('Failed to load channel');
-    }
-  };
-
-  const checkForUpdates = async () => {
-    setChecking(true);
-    setError(null);
-    try {
-      const available = await checkAppUpdatesCmd();
-      setUpdateAvailable(available);
-    } catch {
-      setError('Failed to check for updates');
-    } finally {
-      setChecking(false);
-    }
-  };
-
-  const handleInstallUpdate = async () => {
-    try {
-      await installAppUpdatesCmd();
-      setUpdateAvailable(false);
-    } catch {
-      setError('Failed to install update');
-    }
-  };
-
-  const handleChannelChange = async (newChannel: string) => {
-    setChannel(newChannel);
-    try {
-      await setUpdateChannelCmd(newChannel);
-    } catch {
-      setError('Failed to update channel');
-    }
-  };
-
-  useEffect(() => {
-    void loadChannel();
-    void checkForUpdates();
-  }, []);
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <h1 className="text-2xl font-bold">Updater</h1>
-        <p className="text-muted-foreground">Configure application auto-updates</p>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Update Channel</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex space-x-4">
-            <button
-              onClick={() => handleChannelChange('stable')}
-              className={`flex-1 p-4 rounded-lg border-2 transition-all ${
-                channel === 'stable'
-                  ? 'border-primary bg-primary/5'
-                  : 'border-border hover:border-muted-foreground'
-              }`}
-            >
-              <div className="font-semibold">Stable</div>
-              <div className="text-sm text-muted-foreground">Production-ready releases</div>
-            </button>
-            <button
-              onClick={() => handleChannelChange('pre-release')}
-              className={`flex-1 p-4 rounded-lg border-2 transition-all ${
-                channel === 'pre-release'
-                  ? 'border-primary bg-primary/5'
-                  : 'border-border hover:border-muted-foreground'
-              }`}
-            >
-              <div className="font-semibold">Pre-Release</div>
-              <div className="text-sm text-muted-foreground">Latest development builds</div>
-            </button>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Check for Updates</CardTitle>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={checkForUpdates}
-            disabled={checking}
-          >
-            {checking ? (
-              <>
-                <Loader className="mr-2 h-4 w-4 animate-spin" />
-                Checking...
-              </>
-            ) : (
-              <>
-                <RefreshCw className="mr-2 h-4 w-4" />
-                Check Now
-              </>
-            )}
-          </Button>
-        </CardHeader>
-        <CardContent>
-          {error && (
-            <div className="mb-4 flex items-center space-x-2 rounded-lg bg-destructive/15 p-3 text-destructive">
-              <AlertCircle className="h-4 w-4" />
-              <span className="text-sm">{error}</span>
-            </div>
-          )}
-
-          {updateAvailable ? (
-            <div className="flex items-center justify-between rounded-lg bg-green-50 p-4 dark:bg-green-900/20">
-              <div className="flex items-center space-x-3">
-                <div className="rounded-full bg-green-600 p-1 text-white">
-                  <Check className="h-4 w-4" />
-                </div>
-                <div>
-                  <div className="font-semibold text-green-900 dark:text-green-100">
-                    Update Available
-                  </div>
-                  <div className="text-sm text-green-700 dark:text-green-300">
-                    A new version is ready to install
-                  </div>
-                </div>
-              </div>
-              <Button onClick={handleInstallUpdate}>
-                Install Update
-              </Button>
-            </div>
-          ) : (
-            <div className="flex items-center justify-between rounded-lg bg-muted p-4">
-              <div className="flex items-center space-x-3">
-                <div className="rounded-full bg-muted-foreground p-1 text-background">
-                  <Check className="h-4 w-4" />
-                </div>
-                <div>
-                  <div className="font-semibold">Up to Date</div>
-                  <div className="text-sm text-muted-foreground">
-                    You are running the latest version
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}