4runr-os 2.10.39 → 2.10.41

package/mk3-tui/src/app.rs

@@ -1,4 +1,5 @@
 use crate::io::IoHandler;
+use crate::monitoring::{MetricsDrillPanel, MonitoringSection, MonitoringState};
 use crate::screens::{NavigationState, Screen};
 use crate::storage::Cache;
 use crate::ui::agent_builder::AgentBuilderState;
@@ -8,7 +9,7 @@ use crate::websocket::WebSocketClient;
 use crossterm::event::{KeyCode, KeyEvent, KeyEventKind};
 use ratatui::prelude::*;
 use serde::{Deserialize, Serialize};
-use std::collections::VecDeque;
+use std::collections::{HashMap, VecDeque};
 use std::time::{Duration, Instant};
 
 /// `HH:MM:SS` for Connection Portal activity log (UTC clock; avoids pulling in `chrono`).
@@ -47,8 +48,8 @@ pub enum AppMode {
 
 #[derive(Debug, Clone, PartialEq)]
 pub enum OperationMode {
-    Local,      // No Gateway connection
-    Connected,  // Connected to Gateway
+    Local,     // No Gateway connection
+    Connected, // Connected to Gateway
 }
 
 impl OperationMode {
@@ -60,6 +61,36 @@ impl OperationMode {
     }
 }
 
+#[cfg(test)]
+mod portal_monitoring_tests {
+    use super::*;
+
+    #[test]
+    fn metric_history_totals_contract_keys() {
+        let totals = serde_json::json!({
+            "httpRequests": 10,
+            "httpRequestErrors": 1,
+            "queueJobsWaiting": 2,
+            "queueJobsActive": 3,
+            "queueJobsFailed": 4,
+            "runsActive": 5,
+            "sseActive": 6
+        });
+        let entry = metric_history_entry_from_totals(
+            "2026-01-01T00:00:00.000Z".to_string(),
+            totals.as_object().expect("totals object"),
+        );
+
+        assert_eq!(entry.http_requests, 10);
+        assert_eq!(entry.http_errors, 1);
+        assert_eq!(entry.queue_waiting, 2);
+        assert_eq!(entry.queue_active, 3);
+        assert_eq!(entry.queue_failed, 4);
+        assert_eq!(entry.runs_active, 5);
+        assert_eq!(entry.sse_active, 6);
+    }
+}
+
 #[derive(Debug, Clone, PartialEq)]
 pub enum PortalField {
     GatewayUrl,
@@ -68,9 +99,9 @@ pub enum PortalField {
 
 #[derive(Debug, Clone, PartialEq)]
 pub enum GatewayType {
-    FourRunrServer,  // External 4Runr cloud server
-    LocalBundle,     // Local Gateway bundle (included with Full OS)
-    CustomUrl,       // User's own Gateway server
+    FourRunrServer, // External 4Runr cloud server
+    LocalBundle,    // Local Gateway bundle (included with Full OS)
+    CustomUrl,      // User's own Gateway server
 }
 
 impl GatewayType {
@@ -81,7 +112,7 @@ impl GatewayType {
             GatewayType::CustomUrl => "Custom URL",
         }
     }
-    
+
     pub fn default_url(&self) -> &str {
         match self {
             GatewayType::FourRunrServer => "https://gateway.4runr.com",
@@ -94,7 +125,7 @@ impl GatewayType {
 // Activity Log for Connection Portal
 #[derive(Debug, Clone)]
 pub struct ActivityLogEntry {
-    pub timestamp: String,      // HH:MM:SS format
+    pub timestamp: String, // HH:MM:SS format
     pub level: LogLevel,
     pub message: String,
 }
@@ -121,7 +152,6 @@ pub struct ConnectionPortalState {
     pub activity_log: Vec<ActivityLogEntry>,
 }
 
-
 impl Default for ConnectionPortalState {
     fn default() -> Self {
         Self {
@@ -140,7 +170,10 @@ impl Default for ConnectionPortalState {
 
 impl ConnectionPortalState {
     pub fn reset(&mut self) {
-        self.gateway_url = self.last_successful_url.clone().unwrap_or_else(|| "http://localhost:3001".to_string());
+        self.gateway_url = self
+            .last_successful_url
+            .clone()
+            .unwrap_or_else(|| "http://localhost:3001".to_string());
         self.username = String::new();
         self.focused_field = PortalField::GatewayUrl;
         self.connecting = false;
@@ -159,21 +192,21 @@ impl ConnectionPortalState {
         self.connecting = false;
         self.connecting_started = None;
     }
-    
+
     pub fn toggle_field(&mut self) {
         self.focused_field = match self.focused_field {
             PortalField::GatewayUrl => PortalField::Username,
             PortalField::Username => PortalField::GatewayUrl,
         };
     }
-    
+
     pub fn add_log_entry(&mut self, timestamp: String, level: LogLevel, message: String) {
         self.activity_log.push(ActivityLogEntry {
             timestamp,
             level,
             message,
         });
-        
+
         // Keep last N lines so the portal can show a full connect trace on small terminals
         const MAX_ACTIVITY: usize = 80;
         if self.activity_log.len() > MAX_ACTIVITY {
@@ -183,6 +216,50 @@ impl ConnectionPortalState {
 }
 
 /// Gateway traffic snapshot (Prometheus `/metrics` via CLI WebSocket handler).
+#[derive(Debug, Clone, Serialize)]
+pub struct MetricHistoryEntry {
+    pub timestamp: String,
+    pub http_requests: u64,
+    pub http_errors: u64,
+    pub queue_waiting: u64,
+    pub queue_active: u64,
+    pub queue_failed: u64,
+    pub runs_active: u64,
+    pub sse_active: u64,
+}
+
+/// Phase 5 contract with `packages/os-cli/src/gateway-observability.ts` `totals`.
+/// If CLI keys change, update this mapping and `metric_history_totals_contract_keys`.
+pub fn metric_history_entry_from_totals(
+    timestamp: String,
+    totals: &serde_json::Map<String, serde_json::Value>,
+) -> MetricHistoryEntry {
+    fn read_u64(totals: &serde_json::Map<String, serde_json::Value>, key: &str) -> u64 {
+        totals
+            .get(key)
+            .and_then(|v| v.as_u64().or_else(|| v.as_f64().map(|f| f.max(0.0) as u64)))
+            .unwrap_or(0)
+    }
+
+    MetricHistoryEntry {
+        timestamp,
+        http_requests: read_u64(totals, "httpRequests"),
+        http_errors: read_u64(totals, "httpRequestErrors"),
+        queue_waiting: read_u64(totals, "queueJobsWaiting"),
+        queue_active: read_u64(totals, "queueJobsActive"),
+        queue_failed: read_u64(totals, "queueJobsFailed"),
+        runs_active: read_u64(totals, "runsActive"),
+        sse_active: read_u64(totals, "sseActive"),
+    }
+}
+
+#[derive(Debug, Clone, Serialize)]
+pub struct DependencyAlertEntry {
+    pub timestamp: String,
+    pub previous: String,
+    pub current: String,
+}
+
 #[derive(Debug, Clone)]
 pub struct PortalMonitoringState {
     pub loading: bool,
@@ -190,6 +267,8 @@ pub struct PortalMonitoringState {
     pub last_updated: Option<String>,
     pub content_lines: Vec<String>,
     pub scroll_offset: usize,
+    /// Width-based clip for section summaries; updated each render (Phase 1).
+    pub summary_clip_width: usize,
     /// Body inner height from last render (for scroll bounds).
     pub viewport_lines: usize,
     /// Auto-refresh timer
@@ -200,6 +279,24 @@ pub struct PortalMonitoringState {
     pub last_http_for_delta: Option<u64>,
     /// Wall clock at last successful observability poll (for rate estimate).
     pub last_instant_for_delta: Option<Instant>,
+    /// Phase 2: per-section lines from `monitoring.refresh` / `monitoring.logs` (merged over snapshot).
+    pub section_overrides: HashMap<MonitoringSection, Vec<String>>,
+    /// Which section is waiting on `monitoring.refresh`.
+    pub section_refresh_loading: Option<MonitoringSection>,
+    pub logs_fetch_loading: bool,
+    /// Phase 3: drill-down inside Metrics (`→` / `←`); which prom-client slice is shown.
+    pub metrics_drill: Option<MetricsDrillPanel>,
+    pub metrics_drill_lines: Vec<String>,
+    pub metrics_drill_loading: bool,
+    /// Last N HTTP request totals from full snapshots (for ASCII sparkline).
+    pub http_total_sparkline: VecDeque<u64>,
+    /// Phase 5: bounded sample history (720 samples; wall-clock span depends on refresh cadence).
+    pub metric_history: VecDeque<MetricHistoryEntry>,
+    pub dependency_alerts: VecDeque<DependencyAlertEntry>,
+    pub last_dependency_status: Option<String>,
+    pub trend_view: bool,
+    pub last_export_path: Option<String>,
+    pub help_visible: bool,
 }
 
 impl Default for PortalMonitoringState {
@@ -210,12 +307,54 @@ impl Default for PortalMonitoringState {
             last_updated: None,
             content_lines: Vec::new(),
             scroll_offset: 0,
+            summary_clip_width: 80,
             viewport_lines: 18,
             last_refresh: None,
             auto_refresh_interval: Duration::from_secs(5),
             auto_refresh_enabled: true,
             last_http_for_delta: None,
             last_instant_for_delta: None,
+            section_overrides: HashMap::new(),
+            section_refresh_loading: None,
+            logs_fetch_loading: false,
+            metrics_drill: None,
+            metrics_drill_lines: Vec::new(),
+            metrics_drill_loading: false,
+            http_total_sparkline: VecDeque::new(),
+            metric_history: VecDeque::new(),
+            dependency_alerts: VecDeque::new(),
+            last_dependency_status: None,
+            trend_view: false,
+            last_export_path: None,
+            help_visible: false,
+        }
+    }
+}
+
+/// Section-based monitoring UI state (Phase 1).
+#[derive(Debug, Clone)]
+pub struct AdvancedMonitoringState {
+    pub monitoring_state: MonitoringState,
+    /// Optional mirror of the connected Gateway URL at construction time. **Live URL for UI is always
+    /// `AppState.gateway_url`** (and `MonitoringState::gateway_url` is synced from there in Portal Monitoring render).
+    #[allow(dead_code)]
+    pub gateway_url: Option<String>,
+}
+
+impl Default for AdvancedMonitoringState {
+    fn default() -> Self {
+        Self {
+            monitoring_state: MonitoringState::default(),
+            gateway_url: None,
+        }
+    }
+}
+
+impl AdvancedMonitoringState {
+    pub fn new(gateway_url: Option<String>) -> Self {
+        Self {
+            monitoring_state: MonitoringState::new(gateway_url.clone()),
+            gateway_url,
         }
     }
 }
@@ -224,12 +363,12 @@ impl Default for PortalMonitoringState {
 pub struct AppState {
     // Navigation state (NEW - replaces simple mode)
     pub navigation: NavigationState,
-    
+
     // App mode (DEPRECATED - keeping for backward compatibility during transition)
     pub mode: AppMode,
-    
+
     // Boot state
-    pub boot_progress: u16,        // 0-100
+    pub boot_progress: u16, // 0-100
     pub boot_lines: VecDeque<String>,
     pub boot_done: bool,
     pub boot_started_at: Instant,
@@ -237,7 +376,7 @@ pub struct AppState {
     pub connected: bool,
     #[allow(dead_code)]
     pub gateway_url: Option<String>,
-    
+
     // Real component status
     #[allow(dead_code)]
     pub gateway_healthy: bool,
@@ -248,35 +387,35 @@ pub struct AppState {
     pub shield_detectors: Vec<String>, // ["pii", "injection", "hallucination"]
     pub sentinel_state: String,        // "idle", "watching", "triggered"
     pub sentinel_active_runs: usize,
-    
+
     // Real metrics
     pub total_runs: u64,
     #[allow(dead_code)]
     pub active_sse_connections: u64,
     #[allow(dead_code)]
     pub idempotency_store_size: u64,
-    
+
     // System resources
     pub cpu: f64,
     pub mem: f64,
     pub network_status: String,
-    
+
     // Real logs
     pub logs: VecDeque<String>,
-    
+
     // Capabilities
     pub capabilities: Vec<String>,
-    
+
     // UI state
     pub command_input: String,
     pub command_focused: bool,
     pub log_scroll: usize,
-    
+
     // Animation state
     pub tick: u64,
     pub spinner_frame: usize,
     pub uptime_secs: u64, // Updated from real clock in main loop, not from tick()
-    
+
     // Perf overlay
     pub perf_overlay: bool,
     pub render_count: u64,
@@ -284,7 +423,7 @@ pub struct AppState {
     pub render_durations: VecDeque<u64>, // ms
     pub render_scheduled_count: u64,
     pub log_write_count: u64,
-    
+
     // Screen-specific state
     pub agent_builder: AgentBuilderState,
     pub run_manager: RunManagerState,
@@ -295,28 +434,34 @@ pub struct AppState {
     pub portal_monitoring: PortalMonitoringState,
     /// Last successful observability pull (for auto-refresh interval).
     pub portal_observability_last_poll: Option<Instant>,
-    
+
+    /// Section selection / expand state for Portal Monitoring (Phase 1).
+    pub advanced_monitoring: AdvancedMonitoringState,
+
     // Command tracking for response handling (Step 5.1)
     pub pending_agent_create_id: Option<String>,
     pub pending_agent_list_id: Option<String>,
     pub pending_agent_delete_id: Option<String>,
     pub pending_gateway_connect_id: Option<String>,
-    pub pending_gateway_health_id: Option<String>,  // Phase 2.1: Track health checks
+    pub pending_gateway_health_id: Option<String>, // Phase 2.1: Track health checks
     pub pending_gateway_observability_id: Option<String>,
-    pub pending_setup_detect_id: Option<String>,  // Track setup.detect command
-    
+    pub pending_monitoring_refresh_id: Option<String>,
+    pub pending_monitoring_logs_id: Option<String>,
+    pub pending_monitoring_drill_id: Option<String>,
+    pub pending_setup_detect_id: Option<String>, // Track setup.detect command
+
     // Step 6: Gateway runs
     pub pending_run_list_id: Option<String>,
     pub pending_run_get_id: Option<String>,
     pub pending_run_cancel_id: Option<String>,
     pub pending_run_quick_id: Option<String>,
-    
+
     // Deletion confirmation (Step 5.5)
     pub agent_delete_requested: bool,
-    
+
     // Mode tracking (Step 7)
     pub operation_mode: OperationMode,
-    
+
     // Local cache
     pub cache: Option<Cache>,
     pub cache_loaded: bool,
@@ -380,12 +525,16 @@ impl Default for AppState {
             setup_portal: SetupPortalState::default(),
             portal_monitoring: PortalMonitoringState::default(),
             portal_observability_last_poll: None,
+            advanced_monitoring: AdvancedMonitoringState::default(),
             pending_agent_create_id: None,
             pending_agent_list_id: None,
             pending_agent_delete_id: None,
             pending_gateway_connect_id: None,
-            pending_gateway_health_id: None,  // Phase 2.1: Initialize health check tracking
+            pending_gateway_health_id: None, // Phase 2.1: Initialize health check tracking
             pending_gateway_observability_id: None,
+            pending_monitoring_refresh_id: None,
+            pending_monitoring_logs_id: None,
+            pending_monitoring_drill_id: None,
             pending_setup_detect_id: None,
             pending_run_list_id: None,
             pending_run_get_id: None,
@@ -414,7 +563,7 @@ impl GatewayOption {
             GatewayOption::CustomUrl => "Custom URL",
         }
     }
-    
+
     pub fn default_url(&self) -> &str {
         match self {
             GatewayOption::LocalBundle => "http://localhost:3001",
@@ -479,15 +628,15 @@ impl SetupPortalState {
             // Forward (Down key, Scroll Down)
             (LocalBundle, 1) => CloudServer,
             (CloudServer, 1) => CustomUrl,
-            (CustomUrl, 1) => LocalBundle,  // Wrap to top
+            (CustomUrl, 1) => LocalBundle, // Wrap to top
             // Backward (Up key, Scroll Up)
-            (LocalBundle, -1) => CustomUrl,  // Wrap to bottom
+            (LocalBundle, -1) => CustomUrl, // Wrap to bottom
             (CloudServer, -1) => LocalBundle,
             (CustomUrl, -1) => CloudServer,
             _ => return, // No change for invalid direction
         };
     }
-    
+
     /// Clear detection state and errors (full reset; prefer [`soft_open`](Self::soft_open) when reopening Setup).
     #[allow(dead_code)]
     pub fn reset(&mut self) {
@@ -502,7 +651,7 @@ impl SetupPortalState {
 pub struct AgentListState {
     pub agents: Vec<AgentInfo>,
     pub selected_index: usize,
-    pub detail_view: Option<usize>,  // None = list view, Some(index) = detail popup
+    pub detail_view: Option<usize>, // None = list view, Some(index) = detail popup
 }
 
 impl Default for AgentListState {
@@ -538,16 +687,16 @@ impl App {
     pub fn new() -> Self {
         let render_scheduler = RenderScheduler::new();
         let run_mode = render_scheduler.run_mode();
-        
+
         // Input debounce: browser 10ms, local 5ms (minimal delay for smooth typing)
         let input_debounce_duration = match run_mode {
             RunMode::Browser => Duration::from_millis(10),
             RunMode::Local => Duration::from_millis(5),
         };
-        
+
         let mut state = AppState::default();
         Self::load_cached_data(&mut state);
-        
+
         Self {
             state,
             render_scheduler,
@@ -557,10 +706,21 @@ impl App {
     }
 
     /// Ask CLI to pull Gateway `GET /metrics` and return a condensed snapshot for Portal Monitoring.
+    ///
+    /// **Intentional command split:** the TUI uses this `gateway.observability` path for the
+    /// **Overview** row (full health + Prometheus snapshot in one response). Per-section refresh
+    /// uses `begin_monitoring_refresh_request` → `monitoring.refresh` instead. The CLI also maps
+    /// `monitoring.refresh` with `section: "overview"` to the same handler for non-TUI callers.
     pub fn begin_portal_observability_request(&mut self, ws: &WebSocketClient) {
         if self.state.pending_gateway_observability_id.is_some() {
             return;
         }
+        if self.state.pending_monitoring_refresh_id.is_some()
+            || self.state.pending_monitoring_logs_id.is_some()
+            || self.state.pending_monitoring_drill_id.is_some()
+        {
+            return;
+        }
         self.state.portal_monitoring.loading = true;
         self.state.portal_monitoring.error = None;
         let nonce = std::time::SystemTime::now()
@@ -580,6 +740,188 @@ impl App {
         }
     }
 
+    /// Phase 2: refresh one Portal Monitoring section via CLI (`monitoring.refresh` → Gateway APIs).
+    pub fn begin_monitoring_refresh_request(
+        &mut self,
+        ws: &WebSocketClient,
+        section: MonitoringSection,
+    ) {
+        if self.state.pending_gateway_observability_id.is_some()
+            || self.state.pending_monitoring_refresh_id.is_some()
+            || self.state.pending_monitoring_logs_id.is_some()
+            || self.state.pending_monitoring_drill_id.is_some()
+        {
+            return;
+        }
+        let nonce = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_millis())
+            .unwrap_or(0);
+        let slug = section.cli_slug();
+        let data = serde_json::json!({ "section": slug, "nonce": nonce });
+        match ws.send_command("monitoring.refresh", Some(data)) {
+            Ok(id) => {
+                self.state.pending_monitoring_refresh_id = Some(id);
+                self.state.portal_monitoring.section_refresh_loading = Some(section);
+                self.state.portal_monitoring.error = None;
+            }
+            Err(e) => {
+                self.state.portal_monitoring.section_refresh_loading = None;
+                self.state.portal_monitoring.error = Some(format!("{}", e));
+                self.request_immediate_render("monitoring_refresh_send_err");
+            }
+        }
+    }
+
+    /// Phase 2: fetch Gateway log buffer (`monitoring.logs`).
+    pub fn begin_monitoring_logs_request(&mut self, ws: &WebSocketClient) {
+        if self.state.pending_gateway_observability_id.is_some()
+            || self.state.pending_monitoring_refresh_id.is_some()
+            || self.state.pending_monitoring_logs_id.is_some()
+            || self.state.pending_monitoring_drill_id.is_some()
+        {
+            return;
+        }
+        let nonce = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_millis())
+            .unwrap_or(0);
+        let data = serde_json::json!({ "limit": 100u32, "nonce": nonce });
+        match ws.send_command("monitoring.logs", Some(data)) {
+            Ok(id) => {
+                self.state.pending_monitoring_logs_id = Some(id);
+                self.state.portal_monitoring.logs_fetch_loading = true;
+                self.state.portal_monitoring.error = None;
+            }
+            Err(e) => {
+                self.state.portal_monitoring.logs_fetch_loading = false;
+                self.state.portal_monitoring.error = Some(format!("{}", e));
+                self.request_immediate_render("monitoring_logs_send_err");
+            }
+        }
+    }
+
+    /// Phase 3: Gateway drill-down (`monitoring.drill`) for Metrics sub-panels (HTTP / Runs / Queue / SSE).
+    pub fn begin_monitoring_drill_request(
+        &mut self,
+        ws: &WebSocketClient,
+        panel: MetricsDrillPanel,
+    ) {
+        if self.state.pending_gateway_observability_id.is_some()
+            || self.state.pending_monitoring_refresh_id.is_some()
+            || self.state.pending_monitoring_logs_id.is_some()
+            || self.state.pending_monitoring_drill_id.is_some()
+        {
+            return;
+        }
+        let nonce = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_millis())
+            .unwrap_or(0);
+        let target = panel.cli_target();
+        let data = serde_json::json!({ "target": target, "nonce": nonce });
+        match ws.send_command("monitoring.drill", Some(data)) {
+            Ok(id) => {
+                self.state.pending_monitoring_drill_id = Some(id);
+                self.state.portal_monitoring.metrics_drill = Some(panel);
+                self.state.portal_monitoring.metrics_drill_loading = true;
+                self.state.portal_monitoring.metrics_drill_lines.clear();
+                self.state.portal_monitoring.error = None;
+            }
+            Err(e) => {
+                self.state.portal_monitoring.metrics_drill_loading = false;
+                self.state.portal_monitoring.error = Some(format!("{}", e));
+                self.request_immediate_render("monitoring_drill_send_err");
+            }
+        }
+    }
+
+    /// Phase 3: dependency pools + queue counts (`dependencies/detail`).
+    pub fn begin_dependencies_detail_drill(&mut self, ws: &WebSocketClient) {
+        if self.state.pending_gateway_observability_id.is_some()
+            || self.state.pending_monitoring_refresh_id.is_some()
+            || self.state.pending_monitoring_logs_id.is_some()
+            || self.state.pending_monitoring_drill_id.is_some()
+        {
+            return;
+        }
+        let nonce = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_millis())
+            .unwrap_or(0);
+        let data = serde_json::json!({ "target": "dependencies_detail", "nonce": nonce });
+        match ws.send_command("monitoring.drill", Some(data)) {
+            Ok(id) => {
+                self.state.pending_monitoring_drill_id = Some(id);
+                self.state.portal_monitoring.section_refresh_loading =
+                    Some(MonitoringSection::Dependencies);
+                self.state.portal_monitoring.error = None;
+            }
+            Err(e) => {
+                self.state.portal_monitoring.section_refresh_loading = None;
+                self.state.portal_monitoring.error = Some(format!("{}", e));
+                self.request_immediate_render("deps_drill_send_err");
+            }
+        }
+    }
+
+    /// Phase 4: run local CLI/host diagnostics for the System section.
+    pub fn begin_system_diagnostics_request(&mut self, ws: &WebSocketClient) {
+        if self.state.pending_gateway_observability_id.is_some()
+            || self.state.pending_monitoring_refresh_id.is_some()
+            || self.state.pending_monitoring_logs_id.is_some()
+            || self.state.pending_monitoring_drill_id.is_some()
+        {
+            return;
+        }
+        let nonce = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_millis())
+            .unwrap_or(0);
+        let data = serde_json::json!({ "target": "system_diagnostics", "nonce": nonce });
+        match ws.send_command("monitoring.drill", Some(data)) {
+            Ok(id) => {
+                self.state.pending_monitoring_drill_id = Some(id);
+                self.state.portal_monitoring.section_refresh_loading =
+                    Some(MonitoringSection::System);
+                self.state.portal_monitoring.error = None;
+            }
+            Err(e) => {
+                self.state.portal_monitoring.section_refresh_loading = None;
+                self.state.portal_monitoring.error = Some(format!("{}", e));
+                self.request_immediate_render("system_diagnostics_send_err");
+            }
+        }
+    }
+
+    pub fn export_portal_monitoring_snapshot(&mut self) -> anyhow::Result<String> {
+        let mut overrides = serde_json::Map::new();
+        for (section, lines) in &self.state.portal_monitoring.section_overrides {
+            overrides.insert(section.cli_slug().to_string(), serde_json::json!(lines));
+        }
+        let payload = serde_json::json!({
+            "exportedAt": wall_clock_hms(),
+            "gatewayUrl": self.state.gateway_url.clone(),
+            "lastUpdated": self.state.portal_monitoring.last_updated.clone(),
+            "contentLines": self.state.portal_monitoring.content_lines.clone(),
+            "sectionOverrides": overrides,
+            "metricHistory": self.state.portal_monitoring.metric_history.clone(),
+            "dependencyAlerts": self.state.portal_monitoring.dependency_alerts.clone(),
+            "trendView": self.state.portal_monitoring.trend_view,
+        });
+        let unix = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .map(|d| d.as_secs())
+            .unwrap_or(0);
+        let mut path = std::env::current_dir().unwrap_or_else(|_| std::env::temp_dir());
+        path.push(format!("4runr-monitoring-export-{unix}.json"));
+        let body = serde_json::to_string_pretty(&payload)?;
+        std::fs::write(&path, body)?;
+        let display = path.display().to_string();
+        self.state.portal_monitoring.last_export_path = Some(display.clone());
+        Ok(display)
+    }
+
     /// CLI ↔ TUI WebSocket lost: drop Gateway link UI and leave Portal Monitoring / Connection Portal so the session does not appear still "connected".
     pub fn on_cli_backend_disconnect(&mut self) {
         use crate::screens::Screen;
@@ -591,8 +933,12 @@ impl App {
         self.state.pending_gateway_connect_id = None;
         self.state.pending_gateway_health_id = None;
         self.state.pending_gateway_observability_id = None;
+        self.state.pending_monitoring_refresh_id = None;
+        self.state.pending_monitoring_logs_id = None;
+        self.state.pending_monitoring_drill_id = None;
         self.state.portal_observability_last_poll = None;
         self.state.portal_monitoring = PortalMonitoringState::default();
+        self.state.advanced_monitoring = AdvancedMonitoringState::default();
         self.state.connection_portal.finish_connecting();
         self.state.connection_portal.connection_success = false;
         self.state.connection_portal.connecting = false;
@@ -615,33 +961,35 @@ impl App {
             // Load cached agents
             let agents = cache.get_agents();
             if !agents.is_empty() {
-                state.capabilities = agents.iter()
-                    .map(|a| a.name.clone())
-                    .collect();
+                state.capabilities = agents.iter().map(|a| a.name.clone()).collect();
                 state.cache_loaded = true;
             }
-            
+
             // Load cached system status
             if let Some(status) = cache.get_system_status() {
-                state.network_status = if status.connected { "Connected (cached)".to_string() } else { "Disconnected (cached)".to_string() };
+                state.network_status = if status.connected {
+                    "Connected (cached)".to_string()
+                } else {
+                    "Disconnected (cached)".to_string()
+                };
                 state.posture_status = format!("{} (cached)", status.posture);
             }
         }
     }
-    
+
     pub fn request_render(&mut self, reason: &str) -> bool {
         self.render_scheduler.request_render(reason)
     }
-    
+
     /// Request immediate render (bypass throttling) - for critical input events
     pub fn request_immediate_render(&mut self, reason: &str) -> bool {
         self.render_scheduler.request_immediate_render(reason)
     }
-    
+
     pub fn should_render(&mut self) -> bool {
         self.render_scheduler.should_render()
     }
-    
+
     pub fn record_render(&mut self, duration_ms: u64) {
         self.state.render_count += 1;
         self.state.render_durations.push_back(duration_ms);
@@ -650,30 +998,30 @@ impl App {
         }
         self.state.last_render_time = Instant::now();
     }
-    
+
     pub fn run_mode(&self) -> RunMode {
         self.render_scheduler.run_mode()
     }
-    
+
     pub fn render_scheduler_stats(&self) -> (u64, u64) {
         (
             self.render_scheduler.render_scheduled_count(),
             self.render_scheduler.min_render_interval_ms(),
         )
     }
-    
+
     /// IMPORTANT: Only call tick() when poll() times out (NO keyboard input)!
     /// Otherwise animations will flash weirdly when typing.
-    /// 
+    ///
     /// NOTE: Uptime is now tracked via Instant::now() in main loop,
     /// so we don't increment it here anymore.
     pub fn tick(&mut self) {
         self.state.tick = self.state.tick.wrapping_add(1);
-        
+
         // Update spinner frame (for "Processing..." indicator only)
         // Cycle through 8 braille spinner frames
         self.state.spinner_frame = (self.state.spinner_frame + 1) % 8;
-        
+
         // Boot timeline: update progress every ~150-250ms
         if self.state.mode == AppMode::Boot && !self.state.boot_done {
             let elapsed = self.state.boot_started_at.elapsed();
@@ -684,15 +1032,15 @@ impl App {
                 (Duration::from_millis(1100), "Telemetry connected…"),
                 (Duration::from_millis(1400), "System ready."),
             ];
-            
+
             let mut current_progress = 0;
             let mut step_idx = 0;
-            
+
             for (i, (delay, msg)) in boot_steps.iter().enumerate() {
                 if elapsed >= *delay {
                     step_idx = i + 1;
                     current_progress = ((i + 1) * 100 / boot_steps.len()) as u16;
-                    
+
                     // Add line if not already added
                     if self.state.boot_lines.len() <= i {
                         self.state.boot_lines.push_back(msg.to_string());
@@ -700,23 +1048,28 @@ impl App {
                     }
                 }
             }
-            
+
             self.state.boot_progress = current_progress.min(100);
-            
+
             // Mark boot done after last step
             if step_idx >= boot_steps.len() && self.state.boot_progress >= 100 {
                 self.state.boot_done = true;
                 self.request_render("boot_done");
             }
         }
-        
+
         // NOTE: pulse_frame is NOT updated here - we use static dots for status indicators
         // to prevent flashing when typing. Only use animated pulse for non-status elements.
     }
 
-    pub fn handle_input(&mut self, key: KeyEvent, _io: &mut IoHandler, ws_client: Option<&WebSocketClient>) -> anyhow::Result<bool> {
+    pub fn handle_input(
+        &mut self,
+        key: KeyEvent,
+        _io: &mut IoHandler,
+        ws_client: Option<&WebSocketClient>,
+    ) -> anyhow::Result<bool> {
         use crossterm::event::KeyModifiers;
-        
+
         // === EXIT SHORTCUTS (always checked first) ===
         if key.modifiers.contains(KeyModifiers::CONTROL) {
             match key.code {
@@ -726,45 +1079,45 @@ impl App {
                 _ => return Ok(false), // Ignore other Ctrl combos
             }
         }
-        
+
         if key.code == KeyCode::F(10) {
             return Ok(true); // Exit
         }
-        
+
         // === BOOT MODE: Any key to continue ===
         if self.state.mode == AppMode::Boot && self.state.boot_done {
             // Any key press switches to main dashboard
             self.navigate_to(Screen::Main);
             return Ok(false);
         }
-        
+
         // In boot mode, ignore other input until boot is done
         if self.state.mode == AppMode::Boot {
             return Ok(false);
         }
-        
+
         // F12 - Toggle perf overlay
         if key.code == KeyCode::F(12) {
             self.state.perf_overlay = !self.state.perf_overlay;
             self.request_render("perf_toggle");
             return Ok(false);
         }
-        
+
         // === AGENT BUILDER INPUT HANDLING ===
         if self.state.navigation.current_screen() == &Screen::AgentBuilder {
             return self.handle_agent_builder_input(key, ws_client);
         }
-        
+
         // === RUN MANAGER INPUT HANDLING ===
         if self.state.navigation.current_screen() == &Screen::RunManager {
             return self.handle_run_manager_input(key, ws_client);
         }
-        
+
         // === SETTINGS INPUT HANDLING ===
         if self.state.navigation.current_screen() == &Screen::Settings {
             return self.handle_settings_input(key);
         }
-        
+
         // === CONNECTION PORTAL INPUT HANDLING ===
         if self.state.navigation.current_screen() == &Screen::ConnectionPortal {
             return self.handle_connection_portal_input(key, ws_client);
@@ -774,17 +1127,17 @@ impl App {
         if self.state.navigation.current_screen() == &Screen::PortalMonitoring {
             return self.handle_portal_monitoring_input(key, ws_client);
         }
-        
+
         // === SETUP PORTAL INPUT HANDLING ===
         if self.state.navigation.current_screen() == &Screen::SetupPortal {
             return self.handle_setup_portal_input(key, ws_client);
         }
-        
+
         // === AGENT LIST INPUT HANDLING ===
         if self.state.navigation.current_screen() == &Screen::AgentList {
             return self.handle_agent_list_input(key, ws_client);
         }
-        
+
         // === MAIN INPUT HANDLING ===
         match key.code {
             // F2 - Open Setup Portal (Gateway options) from main screen
@@ -800,7 +1153,8 @@ impl App {
                     } else {
                         self.state.setup_portal.detecting = false;
                         self.state.setup_portal.detecting_since = None;
-                        self.state.setup_portal.error = Some("Failed to start detection".to_string());
+                        self.state.setup_portal.error =
+                            Some("Failed to start detection".to_string());
                     }
                 } else {
                     self.state.setup_portal.error = Some(
@@ -808,7 +1162,9 @@ impl App {
                             .into(),
                     );
                 }
-                self.state.logs.push_back("[NAV] Opening Setup Portal (F2)...".into());
+                self.state
+                    .logs
+                    .push_back("[NAV] Opening Setup Portal (F2)...".into());
                 self.request_immediate_render("open_setup_portal");
             }
             // Typing - ALL characters go to command input (immediate render for responsiveness)
@@ -819,14 +1175,14 @@ impl App {
                 // OPTIMIZATION: Immediate render for instant typing feedback
                 self.request_immediate_render("typing_input");
             }
-            
+
             // Submit command
             KeyCode::Enter => {
                 if !self.state.command_input.is_empty() {
                     let cmd: String = self.state.command_input.drain(..).collect();
                     self.state.command_focused = false;
                     self.input_debounce = None;
-                    
+
                     match cmd.to_lowercase().as_str() {
                         "quit" | "exit" => return Ok(true),
                         "clear" => self.state.logs.clear(),
@@ -834,59 +1190,131 @@ impl App {
                             // Display help in operations log - clean and organized
                             // NOTE: VecDeque displays newest items first, so we push in REVERSE order
                             // (Last item pushed appears at top of log)
-                            
+
                             // Push Keyboard Shortcuts FIRST (will appear at BOTTOM)
-                            self.state.logs.push_back("  Settings:      ↑/↓=Navigate, Space=Toggle, Enter=Save".to_string());
-                            self.state.logs.push_back("  Run Manager:   ↑/↓=Navigate, F=Filter, S=Sort, R=Refresh".to_string());
-                            self.state.logs.push_back("  Agent Builder: Enter=Next, Backspace=Back, ESC=Cancel".to_string());
-                            self.state.logs.push_back("────────────────────────────────────────────────────────────────".to_string());
-                            self.state.logs.push_back("⌨️  KEYBOARD SHORTCUTS".to_string());
+                            self.state.logs.push_back(
+                                "  Settings:      ↑/↓=Navigate, Space=Toggle, Enter=Save"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "  Run Manager:   ↑/↓=Navigate, F=Filter, S=Sort, R=Refresh"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "  Agent Builder: Enter=Next, Backspace=Back, ESC=Cancel"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "────────────────────────────────────────────────────────────────"
+                                    .to_string(),
+                            );
+                            self.state
+                                .logs
+                                .push_back("⌨️  KEYBOARD SHORTCUTS".to_string());
                             self.state.logs.push_back("".to_string());
-                            
+
                             // WebSocket Commands
-                            self.state.logs.push_back("  tool.list          - List available tools".to_string());
-                            self.state.logs.push_back("  run.list           - List runs (requires gateway)".to_string());
-                            self.state.logs.push_back("  system.status      - Get system status".to_string());
-                            self.state.logs.push_back("  agent.delete       - Delete agent (data: {name})".to_string());
-                            self.state.logs.push_back("  agent.create       - Create new agent (use Agent Builder)".to_string());
-                            self.state.logs.push_back("  agent.get          - Get agent details (data: {name})".to_string());
-                            self.state.logs.push_back("  agent.list         - List all agents".to_string());
-                            self.state.logs.push_back("────────────────────────────────────────────────────────────────".to_string());
-                            self.state.logs.push_back("🌐 WEBSOCKET COMMANDS (requires connection)".to_string());
+                            self.state.logs.push_back(
+                                "  tool.list          - List available tools".to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "  run.list           - List runs (requires gateway)".to_string(),
+                            );
+                            self.state
+                                .logs
+                                .push_back("  system.status      - Get system status".to_string());
+                            self.state.logs.push_back(
+                                "  agent.delete       - Delete agent (data: {name})".to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "  agent.create       - Create new agent (use Agent Builder)"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "  agent.get          - Get agent details (data: {name})"
+                                    .to_string(),
+                            );
+                            self.state
+                                .logs
+                                .push_back("  agent.list         - List all agents".to_string());
+                            self.state.logs.push_back(
+                                "────────────────────────────────────────────────────────────────"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "🌐 WEBSOCKET COMMANDS (requires connection)".to_string(),
+                            );
                             self.state.logs.push_back("".to_string());
-                            
+
                             // Local Commands
-                            self.state.logs.push_back("  :perf              - Show performance stats".to_string());
-                            self.state.logs.push_back("  help               - Show this help".to_string());
-                            self.state.logs.push_back("  clear              - Clear operations log".to_string());
-                            self.state.logs.push_back("  quit, exit         - Exit application".to_string());
-                            self.state.logs.push_back("────────────────────────────────────────────────────────────────".to_string());
+                            self.state.logs.push_back(
+                                "  :perf              - Show performance stats".to_string(),
+                            );
+                            self.state
+                                .logs
+                                .push_back("  help               - Show this help".to_string());
+                            self.state.logs.push_back(
+                                "  clear              - Clear operations log".to_string(),
+                            );
+                            self.state
+                                .logs
+                                .push_back("  quit, exit         - Exit application".to_string());
+                            self.state.logs.push_back(
+                                "────────────────────────────────────────────────────────────────"
+                                    .to_string(),
+                            );
                             self.state.logs.push_back("💻 LOCAL COMMANDS".to_string());
                             self.state.logs.push_back("".to_string());
-                            
+
                             // Navigation Commands
                             self.state.logs.push_back("  disconnect         - Disconnect from Gateway (return to LOCAL mode)".to_string());
                             self.state.logs.push_back("  portal monitoring  - Gateway /metrics traffic (R refresh, ↑↓ scroll)".to_string());
                             self.state.logs.push_back("  connect portal     - Open Connection Portal (connect to Gateway)".to_string());
-                            self.state.logs.push_back("  a, agents          - Open Agent List (view, select, delete)".to_string());
-                            self.state.logs.push_back("  config, settings   - Open Settings (mode, AI provider)".to_string());
-                            self.state.logs.push_back("  runs               - Open Run Manager (list, filter, sort)".to_string());
-                            self.state.logs.push_back("  build              - Open Agent Builder (6-step wizard)".to_string());
-                            self.state.logs.push_back("────────────────────────────────────────────────────────────────".to_string());
-                            self.state.logs.push_back("🧭 NAVIGATION COMMANDS".to_string());
+                            self.state.logs.push_back(
+                                "  a, agents          - Open Agent List (view, select, delete)"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "  config, settings   - Open Settings (mode, AI provider)"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "  runs               - Open Run Manager (list, filter, sort)"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "  build              - Open Agent Builder (6-step wizard)"
+                                    .to_string(),
+                            );
+                            self.state.logs.push_back(
+                                "────────────────────────────────────────────────────────────────"
+                                    .to_string(),
+                            );
+                            self.state
+                                .logs
+                                .push_back("🧭 NAVIGATION COMMANDS".to_string());
                             self.state.logs.push_back("".to_string());
-                            
+
                             // Push Header LAST (will appear at TOP)
-                            self.state.logs.push_back("════════════════════════════════════════════════════════════════".to_string());
-                            self.state.logs.push_back("📖 4RUNR AI AGENT OS - COMMAND REFERENCE".to_string());
-                            self.state.logs.push_back("════════════════════════════════════════════════════════════════".to_string());
-                            
+                            self.state.logs.push_back(
+                                "════════════════════════════════════════════════════════════════"
+                                    .to_string(),
+                            );
+                            self.state
+                                .logs
+                                .push_back("📖 4RUNR AI AGENT OS - COMMAND REFERENCE".to_string());
+                            self.state.logs.push_back(
+                                "════════════════════════════════════════════════════════════════"
+                                    .to_string(),
+                            );
+
                             self.request_render("help_command");
                         }
                         ":perf" => {
                             // Perf self-check command
                             let rps = if !self.state.render_durations.is_empty() {
-                                let avg_ms: f64 = self.state.render_durations.iter().sum::<u64>() as f64 
+                                let avg_ms: f64 = self.state.render_durations.iter().sum::<u64>()
+                                    as f64
                                     / self.state.render_durations.len() as f64;
                                 if avg_ms > 0.0 {
                                     (1000.0 / avg_ms) as u64
@@ -896,30 +1324,31 @@ impl App {
                             } else {
                                 0
                             };
-                            
+
                             let mode_str = match self.run_mode() {
                                 RunMode::Browser => "browser",
                                 RunMode::Local => "local",
                             };
-                            
+
                             let (scheduled_count, interval_ms) = self.render_scheduler_stats();
-                            
+
                             self.state.logs.push_back(format!(
                                 "[PERF] Mode: {} | RPS: {} | Render interval: {}ms | Scheduled: {}",
-                                mode_str,
-                                rps,
-                                interval_ms,
-                                scheduled_count
+                                mode_str, rps, interval_ms, scheduled_count
                             ));
                         }
                         // Navigation commands
                         "build" | "build new" | "agent new" => {
                             self.push_overlay(Screen::AgentBuilder);
-                            self.state.logs.push_back("[NAV] Opening Agent Builder...".into());
+                            self.state
+                                .logs
+                                .push_back("[NAV] Opening Agent Builder...".into());
                         }
                         "runs" | "run list" | "run manager" => {
                             self.push_overlay(Screen::RunManager);
-                            self.state.logs.push_back("[NAV] Opening Run Manager...".into());
+                            self.state
+                                .logs
+                                .push_back("[NAV] Opening Run Manager...".into());
                             if self.state.operation_mode == OperationMode::Connected {
                                 if let Some(ws) = ws_client {
                                     let data = serde_json::json!({ "limit": 50 });
@@ -929,16 +1358,23 @@ impl App {
                                     }
                                 }
                             } else {
-                                self.add_log("[RUN] Connect to Gateway (connect portal) to load live runs.".to_string());
+                                self.add_log(
+                                    "[RUN] Connect to Gateway (connect portal) to load live runs."
+                                        .to_string(),
+                                );
                             }
                         }
                         "config" | "settings" => {
                             self.push_overlay(Screen::Settings);
-                            self.state.logs.push_back("[NAV] Opening Settings...".into());
+                            self.state
+                                .logs
+                                .push_back("[NAV] Opening Settings...".into());
                         }
                         "a" | "agents" | "agent list" => {
                             self.push_overlay(Screen::AgentList);
-                            self.state.logs.push_back("[NAV] Opening Agent List...".into());
+                            self.state
+                                .logs
+                                .push_back("[NAV] Opening Agent List...".into());
                             // Request agent list from backend
                             if let Some(ws) = ws_client {
                                 if let Ok(list_id) = ws.send_command("agent.list", None) {
@@ -951,7 +1387,12 @@ impl App {
                                 self.state
                                     .navigation
                                     .navigate_to_base(Screen::PortalMonitoring);
-                                self.state.logs.push_back("[NAV] Opening Portal Monitoring...".into());
+                                self.state.advanced_monitoring =
+                                    AdvancedMonitoringState::new(self.state.gateway_url.clone());
+                                self.state.portal_monitoring.scroll_offset = 0;
+                                self.state
+                                    .logs
+                                    .push_back("[NAV] Opening Portal Monitoring...".into());
                                 if let Some(ws) = ws_client {
                                     self.begin_portal_observability_request(ws);
                                 }
@@ -969,25 +1410,31 @@ impl App {
                             self.state
                                 .navigation
                                 .navigate_to_base(Screen::ConnectionPortal);
-                            self.state.logs.push_back("[NAV] Opening Connection Portal...".into());
+                            self.state
+                                .logs
+                                .push_back("[NAV] Opening Connection Portal...".into());
                             self.request_immediate_render("open_connection_portal");
                         }
                         "setup" | "setup gateway" | "setup portal" => {
                             // Navigate to portal as base screen (standalone, not overlay)
                             self.state.navigation.navigate_to_base(Screen::SetupPortal);
                             self.state.setup_portal.soft_open();
-                            
+
                             // Auto-detect Gateway options when portal opens
                             if let Some(ws) = ws_client {
                                 self.state.setup_portal.detecting = true;
-                                self.state.setup_portal.detecting_since = Some(std::time::Instant::now());
+                                self.state.setup_portal.detecting_since =
+                                    Some(std::time::Instant::now());
                                 if let Ok(id) = ws.send_command("setup.detect", None) {
                                     self.state.pending_setup_detect_id = Some(id);
-                                    self.add_log("[SETUP] Detecting Gateway options...".to_string());
+                                    self.add_log(
+                                        "[SETUP] Detecting Gateway options...".to_string(),
+                                    );
                                 } else {
                                     self.state.setup_portal.detecting = false;
                                     self.state.setup_portal.detecting_since = None;
-                                    self.state.setup_portal.error = Some("Failed to start detection".to_string());
+                                    self.state.setup_portal.error =
+                                        Some("Failed to start detection".to_string());
                                 }
                             } else {
                                 self.state.setup_portal.error = Some(
@@ -995,8 +1442,10 @@ impl App {
                                         .into(),
                                 );
                             }
-                            
-                            self.state.logs.push_back("[NAV] Opening Setup Portal...".into());
+
+                            self.state
+                                .logs
+                                .push_back("[NAV] Opening Setup Portal...".into());
                             self.request_immediate_render("open_setup_portal");
                         }
                         "disconnect" => {
@@ -1005,15 +1454,23 @@ impl App {
                                 match ws.send_command("gateway.disconnect", None) {
                                     Ok(id) => {
                                         let short_id = &id[id.len().saturating_sub(8)..];
-                                        self.state.logs.push_back(format!("[GATEWAY] Disconnecting (id: {})", short_id));
+                                        self.state.logs.push_back(format!(
+                                            "[GATEWAY] Disconnecting (id: {})",
+                                            short_id
+                                        ));
                                         // Mode will be updated when response is received
                                     }
                                     Err(e) => {
-                                        self.state.logs.push_back(format!("[ERROR] Failed to disconnect: {}", e));
+                                        self.state.logs.push_back(format!(
+                                            "[ERROR] Failed to disconnect: {}",
+                                            e
+                                        ));
                                     }
                                 }
                             } else {
-                                self.state.logs.push_back("[ERROR] WebSocket not connected".into());
+                                self.state
+                                    .logs
+                                    .push_back("[ERROR] WebSocket not connected".into());
                             }
                         }
                         _ => {
@@ -1025,29 +1482,40 @@ impl App {
                                     match ws.send_command(&cmd, None) {
                                         Ok(id) => {
                                             let short_id = &id[id.len().saturating_sub(8)..];
-                                            self.state.logs.push_back(format!("> {} [{}]", cmd, short_id));
+                                            self.state
+                                                .logs
+                                                .push_back(format!("> {} [{}]", cmd, short_id));
                                         }
                                         Err(e) => {
-                                            self.state.logs.push_back(format!("[ERROR] Failed to send '{}': {}", cmd, e));
+                                            self.state.logs.push_back(format!(
+                                                "[ERROR] Failed to send '{}': {}",
+                                                cmd, e
+                                            ));
                                         }
                                     }
                                 } else {
                                     // Unknown local command - provide helpful guidance
-                                    self.state.logs.push_back(format!("> {} (unknown command)", cmd));
+                                    self.state
+                                        .logs
+                                        .push_back(format!("> {} (unknown command)", cmd));
                                     self.state.logs.push_back("[HELP] Try: help, build, runs, config, agent.list, system.status".into());
                                 }
                             } else {
                                 // No WebSocket connection - guide to local commands
-                                self.state.logs.push_back(format!("> {} (WebSocket not connected)", cmd));
+                                self.state
+                                    .logs
+                                    .push_back(format!("> {} (WebSocket not connected)", cmd));
                                 self.state.logs.push_back("[WARN] Backend not running. Start backend or use local commands.".into());
-                                self.state.logs.push_back("[HELP] Local: help, build, runs, config, clear".into());
+                                self.state.logs.push_back(
+                                    "[HELP] Local: help, build, runs, config, clear".into(),
+                                );
                             }
                         }
                     }
                     self.request_render("command_submit");
                 }
             }
-            
+
             // Delete character
             KeyCode::Backspace => {
                 self.state.command_input.pop();
@@ -1057,7 +1525,7 @@ impl App {
                 // OPTIMIZATION: Immediate render for instant feedback
                 self.request_immediate_render("backspace_input");
             }
-            
+
             // Clear input or close overlay/popup
             KeyCode::Esc => {
                 // Priority: close popup > close overlay > clear input
@@ -1072,41 +1540,41 @@ impl App {
                     self.request_render("clear_input");
                 }
             }
-            
+
             // === SCROLL: Arrow keys (only when not typing) ===
             // Calculate max valid scroll based on visible height
             KeyCode::Up if self.state.command_input.is_empty() => {
                 let visible_height = 15; // Approximate visible log height (adjust based on actual panel size)
                 let total_logs = self.state.logs.len();
                 let max_scroll = total_logs.saturating_sub(visible_height.max(1));
-                
+
                 // Clamp scroll to valid range [0, max_scroll]
                 self.state.log_scroll = (self.state.log_scroll + 1).min(max_scroll);
                 self.request_render("scroll_up");
             }
-            
+
             KeyCode::Down if self.state.command_input.is_empty() => {
                 self.state.log_scroll = self.state.log_scroll.saturating_sub(1);
                 self.request_render("scroll_down");
             }
-            
+
             KeyCode::PageUp if self.state.command_input.is_empty() => {
                 let visible_height = 15;
                 let total_logs = self.state.logs.len();
                 let max_scroll = total_logs.saturating_sub(visible_height.max(1));
-                
+
                 self.state.log_scroll = (self.state.log_scroll + 10).min(max_scroll);
                 self.request_render("scroll_page_up");
             }
-            
+
             KeyCode::PageDown if self.state.command_input.is_empty() => {
                 self.state.log_scroll = self.state.log_scroll.saturating_sub(10);
                 self.request_render("scroll_page_down");
             }
-            
+
             _ => {}
         }
-        
+
         Ok(false)
     }
 
@@ -1138,15 +1606,21 @@ impl App {
     pub fn render(&mut self, f: &mut Frame) {
         // Use new navigation system - render based on current screen
         let current = self.state.navigation.current_screen();
-        
+
         // DEBUG: Log render decisions
         #[cfg(debug_assertions)]
         {
             eprintln!("[RENDER] Current screen: {:?}", current);
-            eprintln!("[RENDER] Base screen: {:?}", self.state.navigation.base_screen);
-            eprintln!("[RENDER] Overlay stack: {:?}", self.state.navigation.overlay_stack);
+            eprintln!(
+                "[RENDER] Base screen: {:?}",
+                self.state.navigation.base_screen
+            );
+            eprintln!(
+                "[RENDER] Overlay stack: {:?}",
+                self.state.navigation.overlay_stack
+            );
         }
-        
+
         match current {
             Screen::Boot => {
                 use crate::ui::boot;
@@ -1210,7 +1684,7 @@ impl App {
             }
         }
     }
-    
+
     /// Add a log message
     pub fn add_log(&mut self, message: String) {
         self.state.logs.push_back(message);
@@ -1219,27 +1693,27 @@ impl App {
         }
         self.state.log_write_count += 1;
     }
-    
+
     // ============================================================
     // NAVIGATION METHODS (NEW - Step 4.1)
     // ============================================================
-    
+
     /// Navigate to a base screen (Boot or Main)
     pub fn navigate_to(&mut self, screen: Screen) {
         if screen.is_base() {
             self.state.navigation.navigate_to_base(screen.clone());
-            
+
             // Update legacy mode field for backward compatibility
             self.state.mode = match screen {
                 Screen::Boot => AppMode::Boot,
                 Screen::Main => AppMode::Main,
                 _ => self.state.mode.clone(),
             };
-            
+
             self.request_render("navigate_to");
         }
     }
-    
+
     /// Push an overlay screen (Agent Builder, Run Manager, Settings)
     pub fn push_overlay(&mut self, screen: Screen) {
         if screen.is_overlay() {
@@ -1247,7 +1721,7 @@ impl App {
             self.request_render("push_overlay");
         }
     }
-    
+
     /// Pop the current overlay and return to previous screen
     pub fn pop_overlay(&mut self) -> Option<Screen> {
         let result = self.state.navigation.pop_overlay();
@@ -1256,7 +1730,7 @@ impl App {
         }
         result
     }
-    
+
     /// Push a popup screen (Confirmation, Alert, Help)
     pub fn push_popup(&mut self, screen: Screen) {
         if screen.is_popup() {
@@ -1264,7 +1738,7 @@ impl App {
             self.request_render("push_popup");
         }
     }
-    
+
     /// Pop the current popup
     pub fn pop_popup(&mut self) -> Option<Screen> {
         let result = self.state.navigation.pop_popup();
@@ -1273,34 +1747,38 @@ impl App {
         }
         result
     }
-    
+
     /// Close all overlays and popups (return to base screen)
     #[allow(dead_code)]
     pub fn close_all_overlays(&mut self) {
         self.state.navigation.close_all();
         self.request_render("close_all");
     }
-    
+
     /// Get the currently visible screen
     #[allow(dead_code)]
     pub fn current_screen(&self) -> &Screen {
         self.state.navigation.current_screen()
     }
-    
+
     /// Check if we're on the base screen (no overlays/popups)
     #[allow(dead_code)]
     pub fn is_on_base_screen(&self) -> bool {
         self.state.navigation.is_on_base()
     }
-    
+
     // ============================================================
     // AGENT BUILDER INPUT HANDLING (Step 4.5)
     // ============================================================
-    
+
     /// Handle input when Agent Builder screen is active
-    fn handle_agent_builder_input(&mut self, key: KeyEvent, ws_client: Option<&WebSocketClient>) -> anyhow::Result<bool> {
+    fn handle_agent_builder_input(
+        &mut self,
+        key: KeyEvent,
+        ws_client: Option<&WebSocketClient>,
+    ) -> anyhow::Result<bool> {
         use crossterm::event::KeyModifiers;
-        
+
         // Ctrl+C/Q to exit
         if key.modifiers.contains(KeyModifiers::CONTROL) {
             match key.code {
@@ -1308,7 +1786,7 @@ impl App {
                 _ => {}
             }
         }
-        
+
         match key.code {
             // Character input - route to appropriate field
             KeyCode::Char(c) => {
@@ -1385,15 +1863,15 @@ impl App {
             }
             _ => {}
         }
-        
+
         Ok(false)
     }
-    
+
     /// Handle character input for Agent Builder fields
     fn handle_agent_builder_char_input(&mut self, c: char) {
         let step = self.state.agent_builder.current_step;
         let field = self.state.agent_builder.focused_field;
-        
+
         match step {
             1 => {
                 // Step 1: Basic Info
@@ -1451,7 +1929,10 @@ impl App {
                     if field < tools.len() {
                         let tool = tools[field].clone();
                         if self.state.agent_builder.selected_tools.contains(&tool) {
-                            self.state.agent_builder.selected_tools.retain(|t| t != &tool);
+                            self.state
+                                .agent_builder
+                                .selected_tools
+                                .retain(|t| t != &tool);
                         } else {
                             self.state.agent_builder.selected_tools.push(tool);
                         }
@@ -1461,30 +1942,40 @@ impl App {
             _ => {}
         }
     }
-    
+
     /// Handle backspace for Agent Builder fields
     fn handle_agent_builder_backspace(&mut self) {
         let step = self.state.agent_builder.current_step;
         let field = self.state.agent_builder.focused_field;
-        
+
         match step {
-            1 => {
-                match field {
-                    0 => { self.state.agent_builder.name.pop(); }
-                    1 => { self.state.agent_builder.description.pop(); }
-                    _ => {}
+            1 => match field {
+                0 => {
+                    self.state.agent_builder.name.pop();
                 }
-            }
-            2 => {
-                match field {
-                    0 => { self.state.agent_builder.provider.pop(); }
-                    1 => { self.state.agent_builder.model.pop(); }
-                    2 => { self.state.agent_builder.local_provider.pop(); }
-                    3 => { self.state.agent_builder.local_model.pop(); }
-                    4 => { self.state.agent_builder.local_url.pop(); }
-                    _ => {}
+                1 => {
+                    self.state.agent_builder.description.pop();
                 }
-            }
+                _ => {}
+            },
+            2 => match field {
+                0 => {
+                    self.state.agent_builder.provider.pop();
+                }
+                1 => {
+                    self.state.agent_builder.model.pop();
+                }
+                2 => {
+                    self.state.agent_builder.local_provider.pop();
+                }
+                3 => {
+                    self.state.agent_builder.local_model.pop();
+                }
+                4 => {
+                    self.state.agent_builder.local_url.pop();
+                }
+                _ => {}
+            },
             3 => {
                 self.state.agent_builder.system_prompt.pop();
             }
@@ -1515,12 +2006,14 @@ impl App {
             _ => {}
         }
     }
-    
+
     /// Create agent from builder state and send to backend
     fn create_agent_from_builder(&mut self, ws_client: Option<&WebSocketClient>) {
         // Validate one final time
         if !self.state.agent_builder.validate_step() {
-            self.add_log("[ERROR] Agent validation failed. Please fix errors and try again.".to_string());
+            self.add_log(
+                "[ERROR] Agent validation failed. Please fix errors and try again.".to_string(),
+            );
             // Clone errors to avoid borrow checker issues
             let errors = self.state.agent_builder.validation_errors.clone();
             for error in &errors {
@@ -1528,16 +2021,16 @@ impl App {
             }
             return;
         }
-        
+
         // Clone name before borrowing mutably
         let agent_name = self.state.agent_builder.name.clone();
-        
+
         // Validate name is not empty
         if agent_name.trim().is_empty() {
             self.add_log("[ERROR] Agent name cannot be empty".to_string());
             return;
         }
-        
+
         // Build agent data
         let builder = &self.state.agent_builder;
         let agent_data = serde_json::json!({
@@ -1572,10 +2065,10 @@ impl App {
             "presencePenalty": builder.presence_penalty,
             "tools": builder.selected_tools,
         });
-        
+
         // Log the creation attempt
         self.add_log(format!("[AGENT] Creating agent '{}'...", agent_name));
-        
+
         // Send agent.create command via WebSocket
         if let Some(ws) = ws_client {
             match ws.send_command("agent.create", Some(agent_data)) {
@@ -1595,21 +2088,21 @@ impl App {
             self.add_log("[HELP] Start the backend server and reconnect.".to_string());
             return;
         }
-        
+
         // Close the builder
         self.pop_overlay();
-        
+
         // Reset wizard state
         self.state.agent_builder = AgentBuilderState::default();
-        
+
         // Suppress unused variable warning
         let _ = agent_data;
     }
-    
+
     // ============================================================
     // RUN MANAGER INPUT HANDLING (Step 4.7)
     // ============================================================
-    
+
     /// Handle input when Run Manager screen is active
     fn handle_run_manager_input(
         &mut self,
@@ -1617,7 +2110,7 @@ impl App {
         ws_client: Option<&WebSocketClient>,
     ) -> anyhow::Result<bool> {
         use crossterm::event::KeyModifiers;
-        
+
         // Ctrl+C/Q to exit
         if key.modifiers.contains(KeyModifiers::CONTROL) {
             match key.code {
@@ -1625,7 +2118,7 @@ impl App {
                 _ => return Ok(false),
             }
         }
-        
+
         match key.code {
             // Navigation
             KeyCode::Up => {
@@ -1636,19 +2129,19 @@ impl App {
                 self.state.run_manager.select_next();
                 self.request_render("run_manager_down");
             }
-            
+
             // Filter
             KeyCode::Char('f') | KeyCode::Char('F') => {
                 self.state.run_manager.next_filter();
                 self.request_render("run_manager_filter");
             }
-            
+
             // Sort
             KeyCode::Char('s') | KeyCode::Char('S') => {
                 self.state.run_manager.next_sort();
                 self.request_render("run_manager_sort");
             }
-            
+
             // Refresh
             KeyCode::Char('r') | KeyCode::Char('R') => {
                 if self.state.operation_mode == OperationMode::Connected {
@@ -1667,7 +2160,7 @@ impl App {
                 }
                 self.request_render("run_manager_refresh");
             }
-            
+
             // View details / Close detail view
             KeyCode::Enter => {
                 if self.state.run_manager.is_detail_view() {
@@ -1695,11 +2188,15 @@ impl App {
                 }
                 self.request_render("run_manager_view");
             }
-            
+
             // Cancel run
             KeyCode::Char('c') | KeyCode::Char('C') => {
                 if let Some(run) = self.state.run_manager.selected_run() {
-                    if matches!(run.status, crate::ui::run_manager::RunStatus::Running | crate::ui::run_manager::RunStatus::Pending) {
+                    if matches!(
+                        run.status,
+                        crate::ui::run_manager::RunStatus::Running
+                            | crate::ui::run_manager::RunStatus::Pending
+                    ) {
                         if self.state.operation_mode == OperationMode::Connected {
                             if let Some(ws) = ws_client {
                                 let data = serde_json::json!({ "runId": run.id.clone() });
@@ -1719,13 +2216,13 @@ impl App {
                 }
                 self.request_render("run_manager_cancel");
             }
-            
+
             // Delete run
             KeyCode::Char('d') | KeyCode::Char('D') => {
                 self.add_log("[RUN] Delete run is not supported by the Gateway API (use cancel for active runs).".to_string());
                 self.request_render("run_manager_delete");
             }
-            
+
             // Close detail view or Run Manager
             KeyCode::Esc => {
                 if self.state.run_manager.is_detail_view() {
@@ -1738,21 +2235,21 @@ impl App {
                     self.pop_overlay();
                 }
             }
-            
+
             _ => {}
         }
-        
+
         Ok(false)
     }
-    
+
     // ============================================================
     // SETTINGS INPUT HANDLING (Step 4.8)
     // ============================================================
-    
+
     /// Handle input when Settings screen is active
     fn handle_settings_input(&mut self, key: KeyEvent) -> anyhow::Result<bool> {
         use crossterm::event::KeyModifiers;
-        
+
         // Ctrl+C/Q to exit
         if key.modifiers.contains(KeyModifiers::CONTROL) {
             match key.code {
@@ -1760,7 +2257,7 @@ impl App {
                 _ => return Ok(false),
             }
         }
-        
+
         match key.code {
             // Navigation
             KeyCode::Up => {
@@ -1771,27 +2268,36 @@ impl App {
                 self.state.settings.next_section();
                 self.request_render("settings_down");
             }
-            
+
             // Toggle current setting
             KeyCode::Char(' ') => {
                 match self.state.settings.focused_section {
                     crate::ui::settings::SettingsSection::Mode => {
                         self.state.settings.toggle_mode();
-                        self.add_log(format!("[SETTINGS] Mode: {}", self.state.settings.mode.as_str()));
+                        self.add_log(format!(
+                            "[SETTINGS] Mode: {}",
+                            self.state.settings.mode.as_str()
+                        ));
                     }
                     crate::ui::settings::SettingsSection::AIProvider => {
                         self.state.settings.next_provider();
-                        self.add_log(format!("[SETTINGS] Provider: {}", self.state.settings.ai_provider));
+                        self.add_log(format!(
+                            "[SETTINGS] Provider: {}",
+                            self.state.settings.ai_provider
+                        ));
                     }
                     crate::ui::settings::SettingsSection::AutoUpdate => {
                         self.state.settings.toggle_auto_update();
-                        self.add_log(format!("[SETTINGS] Auto-update: {}", self.state.settings.auto_update));
+                        self.add_log(format!(
+                            "[SETTINGS] Auto-update: {}",
+                            self.state.settings.auto_update
+                        ));
                     }
                     _ => {}
                 }
                 self.request_render("settings_toggle");
             }
-            
+
             // Save settings
             KeyCode::Enter => {
                 if self.state.settings.has_changes {
@@ -1801,7 +2307,7 @@ impl App {
                     self.request_render("settings_save");
                 }
             }
-            
+
             // Close (with discard warning if changes)
             KeyCode::Esc => {
                 if self.state.settings.has_changes {
@@ -1810,13 +2316,13 @@ impl App {
                 }
                 self.pop_overlay();
             }
-            
+
             _ => {}
         }
-        
+
         Ok(false)
     }
-    
+
     /// Handle input when Agent List screen is active
     fn handle_agent_list_input(
         &mut self,
@@ -1824,7 +2330,7 @@ impl App {
         ws_client: Option<&WebSocketClient>,
     ) -> anyhow::Result<bool> {
         use crossterm::event::KeyModifiers;
-        
+
         // Ctrl+C/Q to exit
         if key.modifiers.contains(KeyModifiers::CONTROL) {
             match key.code {
@@ -1832,7 +2338,7 @@ impl App {
                 _ => return Ok(false),
             }
         }
-        
+
         match key.code {
             // Navigation
             KeyCode::Up => {
@@ -1848,7 +2354,7 @@ impl App {
                 }
                 self.request_render("agent_list_down");
             }
-            
+
             // View details / Close detail view
             KeyCode::Enter => {
                 if self.state.agent_list.detail_view.is_some() {
@@ -1860,7 +2366,7 @@ impl App {
                 }
                 self.request_render("agent_list_toggle_detail");
             }
-            
+
             // Close
             KeyCode::Esc => {
                 if self.state.agent_list.detail_view.is_some() {
@@ -1873,24 +2379,30 @@ impl App {
                     self.request_render("agent_list_close");
                 }
             }
-            
+
             // Delete agent (Step 5.5)
             KeyCode::Delete | KeyCode::Char('d') | KeyCode::Char('D') => {
                 // Only allow deletion in list view (not in detail view)
-                if self.state.agent_list.detail_view.is_none() && !self.state.agent_list.agents.is_empty() {
+                if self.state.agent_list.detail_view.is_none()
+                    && !self.state.agent_list.agents.is_empty()
+                {
                     self.state.agent_delete_requested = true;
                     self.request_render("agent_delete_requested");
                 }
             }
-            
+
             // Step 6: queue a Gateway run (uses built-in `test` agent executor on the server)
             KeyCode::Char('x') | KeyCode::Char('X') => {
                 if self.state.operation_mode != OperationMode::Connected {
-                    self.add_log("[AGENT] Connect to Gateway first to run on the server (key x).".to_string());
+                    self.add_log(
+                        "[AGENT] Connect to Gateway first to run on the server (key x)."
+                            .to_string(),
+                    );
                 } else if self.state.agent_list.agents.is_empty() {
                     self.add_log("[AGENT] No agents in list.".to_string());
-                } else if let Some((agent_name, agent_model)) =
-                    self.get_selected_agent().map(|a| (a.name.clone(), a.model.clone()))
+                } else if let Some((agent_name, agent_model)) = self
+                    .get_selected_agent()
+                    .map(|a| (a.name.clone(), a.model.clone()))
                 {
                     if let Some(ws) = ws_client {
                         let name = format!("TUI: {}", agent_name);
@@ -1904,7 +2416,10 @@ impl App {
                         match ws.send_command("run.quick", Some(data)) {
                             Ok(id) => {
                                 self.state.pending_run_quick_id = Some(id);
-                                self.add_log(format!("[AGENT] Queued Gateway run for profile '{}' (x)", agent_name));
+                                self.add_log(format!(
+                                    "[AGENT] Queued Gateway run for profile '{}' (x)",
+                                    agent_name
+                                ));
                             }
                             Err(e) => self.add_log(format!("[ERROR] run.quick: {}", e)),
                         }
@@ -1912,31 +2427,36 @@ impl App {
                 }
                 self.request_render("agent_list_quick_run");
             }
-            
+
             _ => {}
         }
-        
+
         Ok(false)
     }
-    
+
     /// Delete selected agent (Step 5.5)
     pub fn delete_selected_agent(&mut self, ws_client: &Option<crate::websocket::WebSocketClient>) {
         if self.state.agent_list.agents.is_empty() {
             return;
         }
-        
-        let agent_name = self.state.agent_list.agents[self.state.agent_list.selected_index].name.clone();
-        
+
+        let agent_name = self.state.agent_list.agents[self.state.agent_list.selected_index]
+            .name
+            .clone();
+
         // Send agent.delete command via WebSocket
         if let Some(ws) = ws_client {
             let delete_data = serde_json::json!({
                 "name": agent_name
             });
-            
+
             match ws.send_command("agent.delete", Some(delete_data)) {
                 Ok(id) => {
                     let short_id = &id[id.len().saturating_sub(8)..];
-                    self.add_log(format!("[AGENT] Sent agent.delete for '{}' (id: {})", agent_name, short_id));
+                    self.add_log(format!(
+                        "[AGENT] Sent agent.delete for '{}' (id: {})",
+                        agent_name, short_id
+                    ));
                     // Store command ID for response tracking
                     self.state.pending_agent_delete_id = Some(id);
                 }
@@ -1948,24 +2468,31 @@ impl App {
             self.add_log("[ERROR] WebSocket not connected. Cannot delete agent.".to_string());
         }
     }
-    
+
     /// Get selected agent (Step 5.6)
     pub fn get_selected_agent(&self) -> Option<&AgentInfo> {
         if self.state.agent_list.agents.is_empty() {
             return None;
         }
-        self.state.agent_list.agents.get(self.state.agent_list.selected_index)
+        self.state
+            .agent_list
+            .agents
+            .get(self.state.agent_list.selected_index)
     }
-    
+
     /// Get selected agent name (Step 5.6)
     pub fn get_selected_agent_name(&self) -> Option<String> {
         self.get_selected_agent().map(|agent| agent.name.clone())
     }
-    
+
     /// Handle input when Connection Portal screen is active (Step 7)
-    fn handle_connection_portal_input(&mut self, key: KeyEvent, ws_client: Option<&WebSocketClient>) -> anyhow::Result<bool> {
+    fn handle_connection_portal_input(
+        &mut self,
+        key: KeyEvent,
+        ws_client: Option<&WebSocketClient>,
+    ) -> anyhow::Result<bool> {
         use crossterm::event::KeyModifiers;
-        
+
         // Ctrl+C/Q to exit
         if key.modifiers.contains(KeyModifiers::CONTROL) {
             match key.code {
@@ -1973,12 +2500,12 @@ impl App {
                 _ => return Ok(false),
             }
         }
-        
+
         // Disable input if connecting
         if self.state.connection_portal.connecting {
             return Ok(false);
         }
-        
+
         match key.code {
             // ESC - Close portal and return to Main
             KeyCode::Esc => {
@@ -1999,13 +2526,16 @@ impl App {
                 self.state
                     .navigation
                     .navigate_to_base(Screen::PortalMonitoring);
+                self.state.advanced_monitoring =
+                    AdvancedMonitoringState::new(self.state.gateway_url.clone());
+                self.state.portal_monitoring.scroll_offset = 0;
                 self.add_log("[NAV] Opening Portal Monitoring".to_string());
                 if let Some(ws) = ws_client {
                     self.begin_portal_observability_request(ws);
                 }
                 self.request_immediate_render("open_portal_monitoring");
             }
-            
+
             // L - Continue in local-only mode (no Gateway connection)
             KeyCode::Char('l') | KeyCode::Char('L') => {
                 use crate::app::OperationMode;
@@ -2020,13 +2550,17 @@ impl App {
                 self.state.pending_gateway_connect_id = None;
                 self.state.pending_gateway_health_id = None;
                 self.state.pending_gateway_observability_id = None;
+                self.state.pending_monitoring_refresh_id = None;
+                self.state.pending_monitoring_logs_id = None;
+                self.state.pending_monitoring_drill_id = None;
                 self.state.portal_monitoring = PortalMonitoringState::default();
+                self.state.advanced_monitoring = AdvancedMonitoringState::default();
                 self.state.portal_observability_last_poll = None;
                 self.state.navigation.navigate_to_base(Screen::Main);
                 self.add_log("[MODE] Continuing in LOCAL mode (no Gateway connection)".to_string());
                 self.request_immediate_render("portal_local_mode");
             }
-            
+
             // Tab - Switch between URL and Username fields
             KeyCode::Tab | KeyCode::BackTab => {
                 if self.state.connection_portal.connection_success {
@@ -2035,7 +2569,7 @@ impl App {
                 self.state.connection_portal.toggle_field();
                 self.request_immediate_render("portal_field_toggle");
             }
-            
+
             // Up/Down - Navigate between fields
             KeyCode::Up | KeyCode::Down => {
                 if self.state.connection_portal.connection_success {
@@ -2044,7 +2578,7 @@ impl App {
                 self.state.connection_portal.toggle_field();
                 self.request_immediate_render("portal_navigate");
             }
-            
+
             // Enter - Connect to Gateway
             KeyCode::Enter => {
                 let raw = self.state.connection_portal.gateway_url.clone();
@@ -2058,49 +2592,56 @@ impl App {
 
                 // Validate URL
                 if url.is_empty() {
-                    self.state.connection_portal.error = Some("Gateway URL is required".to_string());
+                    self.state.connection_portal.error =
+                        Some("Gateway URL is required".to_string());
                     self.request_immediate_render("portal_error");
                     return Ok(false);
                 }
-                
+
                 if !url.starts_with("http://") && !url.starts_with("https://") {
-                    self.state.connection_portal.error = Some("URL must start with http:// or https://".to_string());
+                    self.state.connection_portal.error =
+                        Some("URL must start with http:// or https://".to_string());
                     self.request_immediate_render("portal_error");
                     return Ok(false);
                 }
-                
+
                 // Connect to Gateway
                 self.state.connection_portal.error = None;
                 self.state.connection_portal.begin_connecting();
-                
+
                 if let Some(ws) = ws_client {
                     let connect_data = serde_json::json!({
                         "url": url,
                         "username": self.state.connection_portal.username
                     });
-                    
+
                     match ws.send_command("gateway.connect", Some(connect_data)) {
                         Ok(id) => {
                             let short_id = &id[id.len().saturating_sub(8)..];
-                            self.add_log(format!("[GATEWAY] Connecting to {} (id: {})", url, short_id));
+                            self.add_log(format!(
+                                "[GATEWAY] Connecting to {} (id: {})",
+                                url, short_id
+                            ));
                             self.state.pending_gateway_connect_id = Some(id);
                         }
                         Err(e) => {
                             self.state.connection_portal.finish_connecting();
-                            self.state.connection_portal.error = Some(format!("Failed to connect: {}", e));
+                            self.state.connection_portal.error =
+                                Some(format!("Failed to connect: {}", e));
                             self.add_log(format!("[ERROR] Gateway connection failed: {}", e));
                         }
                     }
                 } else {
                     self.state.connection_portal.finish_connecting();
-                    self.state.connection_portal.error = Some("WebSocket not connected".to_string());
+                    self.state.connection_portal.error =
+                        Some("WebSocket not connected".to_string());
                     self.add_log("[ERROR] WebSocket not connected".to_string());
                 }
-                
+
                 // CRITICAL: Use immediate render for instant status update
                 self.request_immediate_render("portal_connect");
             }
-            
+
             // Typing - edit focused field (immediate render for responsiveness)
             KeyCode::Char(c) => {
                 if self.state.connection_portal.connection_success {
@@ -2122,7 +2663,7 @@ impl App {
                     }
                 }
             }
-            
+
             // Backspace - delete character (immediate render for responsiveness)
             KeyCode::Backspace => {
                 if self.state.connection_portal.connection_success {
@@ -2140,10 +2681,10 @@ impl App {
                 // OPTIMIZATION: Immediate render for instant feedback
                 self.request_immediate_render("portal_delete");
             }
-            
+
             _ => {}
         }
-        
+
         Ok(false)
     }
 
@@ -2152,6 +2693,7 @@ impl App {
         key: KeyEvent,
         ws_client: Option<&WebSocketClient>,
     ) -> anyhow::Result<bool> {
+        use crate::ui::portal_monitoring::portal_monitoring_scroll_max;
         use crossterm::event::KeyModifiers;
         if key.modifiers.contains(KeyModifiers::CONTROL) {
             match key.code {
@@ -2162,19 +2704,67 @@ impl App {
         if key.code == KeyCode::F(10) {
             return Ok(true);
         }
+        if key.kind != KeyEventKind::Press {
+            return Ok(false);
+        }
+        if self.state.portal_monitoring.help_visible {
+            if key.code == KeyCode::Esc || key.code == KeyCode::Char('?') {
+                self.state.portal_monitoring.help_visible = false;
+                self.request_immediate_render("portal_help_close");
+            }
+            return Ok(false);
+        }
         if key.code == KeyCode::Esc {
             self.state.pending_gateway_observability_id = None;
+            self.state.pending_monitoring_refresh_id = None;
+            self.state.pending_monitoring_logs_id = None;
+            self.state.pending_monitoring_drill_id = None;
+            self.state.portal_monitoring.section_refresh_loading = None;
+            self.state.portal_monitoring.logs_fetch_loading = false;
+            self.state.portal_monitoring.metrics_drill = None;
+            self.state.portal_monitoring.metrics_drill_lines.clear();
+            self.state.portal_monitoring.metrics_drill_loading = false;
             self.state.navigation.navigate_to_base(Screen::Main);
             self.add_log("[NAV] Portal Monitoring closed".to_string());
             self.request_immediate_render("portal_monitoring_close");
             return Ok(false);
         }
+        if key.code == KeyCode::Char('?') {
+            self.state.portal_monitoring.help_visible = true;
+            self.request_immediate_render("portal_help_open");
+            return Ok(false);
+        }
+        // R is context-sensitive: Overview → full `gateway.observability` snapshot; any other
+        // section → `monitoring.refresh` for that section only (cheaper; matches expanded detail).
         if key.code == KeyCode::Char('r') || key.code == KeyCode::Char('R') {
             if let Some(ws) = ws_client {
+                let sections = MonitoringSection::all();
+                let idx = self
+                    .state
+                    .advanced_monitoring
+                    .monitoring_state
+                    .selected_index;
+                let current = sections.get(idx).copied();
                 self.state.portal_observability_last_poll = None;
                 self.state.pending_gateway_observability_id = None;
+                self.state.pending_monitoring_refresh_id = None;
+                self.state.pending_monitoring_logs_id = None;
+                self.state.pending_monitoring_drill_id = None;
+                self.state.portal_monitoring.loading = false;
+                self.state.portal_monitoring.section_refresh_loading = None;
+                self.state.portal_monitoring.logs_fetch_loading = false;
+                self.state.portal_monitoring.metrics_drill = None;
+                self.state.portal_monitoring.metrics_drill_lines.clear();
+                self.state.portal_monitoring.metrics_drill_loading = false;
                 self.state.portal_monitoring.last_refresh = Some(std::time::Instant::now());
-                self.begin_portal_observability_request(ws);
+                match current {
+                    Some(MonitoringSection::Overview) | None => {
+                        self.begin_portal_observability_request(ws);
+                    }
+                    Some(sec) => {
+                        self.begin_monitoring_refresh_request(ws, sec);
+                    }
+                }
                 self.request_immediate_render("portal_obs_refresh");
             } else {
                 self.state.portal_monitoring.error =
@@ -2183,10 +2773,165 @@ impl App {
             }
             return Ok(false);
         }
+        if key.code == KeyCode::Char('l') || key.code == KeyCode::Char('L') {
+            if let Some(ws) = ws_client {
+                self.begin_monitoring_logs_request(ws);
+                self.state
+                    .advanced_monitoring
+                    .monitoring_state
+                    .expand_section(MonitoringSection::Logs);
+                self.request_immediate_render("portal_monitoring_logs");
+            } else {
+                self.state.portal_monitoring.error =
+                    Some("WebSocket to CLI is not connected.".to_string());
+                self.request_immediate_render("portal_obs_no_ws");
+            }
+            return Ok(false);
+        }
+
+        if key.code == KeyCode::Char('h') || key.code == KeyCode::Char('H') {
+            self.state.portal_monitoring.trend_view = !self.state.portal_monitoring.trend_view;
+            let status = if self.state.portal_monitoring.trend_view {
+                "enabled"
+            } else {
+                "disabled"
+            };
+            self.add_log(format!("[PORTAL] Trend/history view {}", status));
+            self.request_immediate_render("portal_trend_toggle");
+            return Ok(false);
+        }
+
+        if key.code == KeyCode::Char('e') || key.code == KeyCode::Char('E') {
+            match self.export_portal_monitoring_snapshot() {
+                Ok(path) => {
+                    self.add_log(format!("[PORTAL] Exported monitoring snapshot: {}", path));
+                    self.state.portal_monitoring.error = None;
+                }
+                Err(e) => {
+                    self.state.portal_monitoring.error = Some(format!("Export failed: {}", e));
+                }
+            }
+            self.request_immediate_render("portal_export");
+            return Ok(false);
+        }
+
+        // Phase 3: extended dependency view (GET /api/monitoring/dependencies/detail)
+        if key.code == KeyCode::Char('t') || key.code == KeyCode::Char('T') {
+            let sections = MonitoringSection::all();
+            let idx = self
+                .state
+                .advanced_monitoring
+                .monitoring_state
+                .selected_index;
+            let current = sections.get(idx).copied();
+            let expanded = current
+                .and_then(|sec| {
+                    self.state
+                        .advanced_monitoring
+                        .monitoring_state
+                        .sections
+                        .get(&sec)
+                        .map(|s| s.expanded)
+                })
+                .unwrap_or(false);
+            if current == Some(MonitoringSection::Dependencies) && expanded {
+                if let Some(ws) = ws_client {
+                    self.begin_dependencies_detail_drill(ws);
+                    self.request_immediate_render("portal_deps_drill");
+                } else {
+                    self.state.portal_monitoring.error =
+                        Some("WebSocket to CLI is not connected.".to_string());
+                    self.request_immediate_render("portal_obs_no_ws");
+                }
+                return Ok(false);
+            }
+        }
+
+        // Phase 4: diagnostics for the local CLI/TUI bridge + Gateway reachability.
+        if key.code == KeyCode::Char('s') || key.code == KeyCode::Char('S') {
+            let sections = MonitoringSection::all();
+            let idx = self
+                .state
+                .advanced_monitoring
+                .monitoring_state
+                .selected_index;
+            let current = sections.get(idx).copied();
+            let expanded = current
+                .and_then(|sec| {
+                    self.state
+                        .advanced_monitoring
+                        .monitoring_state
+                        .sections
+                        .get(&sec)
+                        .map(|s| s.expanded)
+                })
+                .unwrap_or(false);
+            if current == Some(MonitoringSection::System) && expanded {
+                if let Some(ws) = ws_client {
+                    self.begin_system_diagnostics_request(ws);
+                    self.request_immediate_render("portal_system_diagnostics");
+                } else {
+                    self.state.portal_monitoring.error =
+                        Some("WebSocket to CLI is not connected.".to_string());
+                    self.request_immediate_render("portal_obs_no_ws");
+                }
+                return Ok(false);
+            }
+        }
+
+        if key.code == KeyCode::Right {
+            let sections = MonitoringSection::all();
+            let idx = self
+                .state
+                .advanced_monitoring
+                .monitoring_state
+                .selected_index;
+            let current = sections.get(idx).copied();
+            let expanded = current
+                .and_then(|sec| {
+                    self.state
+                        .advanced_monitoring
+                        .monitoring_state
+                        .sections
+                        .get(&sec)
+                        .map(|s| s.expanded)
+                })
+                .unwrap_or(false);
+            if current == Some(MonitoringSection::Metrics) && expanded {
+                if let Some(ws) = ws_client {
+                    let panel = self
+                        .state
+                        .portal_monitoring
+                        .metrics_drill
+                        .map(|p| p.next())
+                        .unwrap_or(MetricsDrillPanel::Http);
+                    self.begin_monitoring_drill_request(ws, panel);
+                    self.request_immediate_render("portal_metrics_drill");
+                } else {
+                    self.state.portal_monitoring.error =
+                        Some("WebSocket to CLI is not connected.".to_string());
+                    self.request_immediate_render("portal_obs_no_ws");
+                }
+                return Ok(false);
+            }
+        }
+
+        if key.code == KeyCode::Left {
+            if self.state.portal_monitoring.metrics_drill.is_some() {
+                self.state.portal_monitoring.metrics_drill = None;
+                self.state.portal_monitoring.metrics_drill_lines.clear();
+                self.state.portal_monitoring.metrics_drill_loading = false;
+                self.request_immediate_render("portal_metrics_drill_exit");
+                return Ok(false);
+            }
+        }
+
         // Toggle auto-refresh with 'A' key
         if key.code == KeyCode::Char('a') || key.code == KeyCode::Char('A') {
-            self.state.portal_monitoring.auto_refresh_enabled = 
+            self.state.portal_monitoring.auto_refresh_enabled =
                 !self.state.portal_monitoring.auto_refresh_enabled;
+            self.state.advanced_monitoring.monitoring_state.live_mode =
+                self.state.portal_monitoring.auto_refresh_enabled;
             let status = if self.state.portal_monitoring.auto_refresh_enabled {
                 "enabled"
             } else {
@@ -2196,20 +2941,54 @@ impl App {
             self.request_immediate_render("portal_obs_auto_toggle");
             return Ok(false);
         }
+
+        // Phase 1: Enter / Space — expand or collapse selected section
+        if key.code == KeyCode::Enter || key.code == KeyCode::Char(' ') {
+            let idx = self
+                .state
+                .advanced_monitoring
+                .monitoring_state
+                .selected_index;
+            self.state
+                .advanced_monitoring
+                .monitoring_state
+                .toggle_section_at_index(idx);
+            self.request_immediate_render("portal_monitoring_toggle_section");
+            return Ok(false);
+        }
+
         let inner_h = self.state.portal_monitoring.viewport_lines.max(5);
-        let total = self.state.portal_monitoring.content_lines.len();
-        let max_scroll = total.saturating_sub(inner_h.min(total.max(1)));
+        let sw = self.state.portal_monitoring.summary_clip_width.max(24);
+        let max_scroll = portal_monitoring_scroll_max(&self.state, sw, inner_h);
+
         match key.code {
-            KeyCode::Up | KeyCode::PageUp => {
+            KeyCode::Up => {
+                self.state
+                    .advanced_monitoring
+                    .monitoring_state
+                    .select_previous_wrapped();
+                self.state.portal_monitoring.scroll_offset = 0;
+                self.request_immediate_render("portal_monitoring_select");
+            }
+            KeyCode::Down => {
+                self.state
+                    .advanced_monitoring
+                    .monitoring_state
+                    .select_next_wrapped();
+                self.state.portal_monitoring.scroll_offset = 0;
+                self.request_immediate_render("portal_monitoring_select");
+            }
+            KeyCode::PageUp => {
+                let step = inner_h.saturating_sub(3).max(1);
                 self.state.portal_monitoring.scroll_offset = self
                     .state
                     .portal_monitoring
                     .scroll_offset
-                    .saturating_sub(if key.code == KeyCode::PageUp { inner_h } else { 1 });
+                    .saturating_sub(step);
                 self.request_immediate_render("portal_obs_scroll");
             }
-            KeyCode::Down | KeyCode::PageDown => {
-                let step = if key.code == KeyCode::PageDown { inner_h } else { 1 };
+            KeyCode::PageDown => {
+                let step = inner_h.saturating_sub(3).max(1);
                 self.state.portal_monitoring.scroll_offset =
                     (self.state.portal_monitoring.scroll_offset + step).min(max_scroll);
                 self.request_immediate_render("portal_obs_scroll");
@@ -2259,7 +3038,8 @@ impl App {
                     self.state.connection_portal.add_log_entry(
                         now,
                         LogLevel::Info,
-                        "Type your Gateway URL (https://…), then press Enter to connect.".to_string()
+                        "Type your Gateway URL (https://…), then press Enter to connect."
+                            .to_string(),
                     );
                 }
                 _ => {}
@@ -2269,7 +3049,7 @@ impl App {
             self.state.connection_portal.add_log_entry(
                 now,
                 LogLevel::Info,
-                "Type your Gateway URL, then press Enter to connect.".to_string()
+                "Type your Gateway URL, then press Enter to connect.".to_string(),
             );
         }
 
@@ -2277,12 +3057,16 @@ impl App {
             .navigation
             .navigate_to_base(Screen::ConnectionPortal);
     }
-    
+
     // ============================================================
     // SETUP PORTAL INPUT HANDLING
     // ============================================================
-    
-    fn handle_setup_portal_input(&mut self, key: KeyEvent, _ws_client: Option<&WebSocketClient>) -> anyhow::Result<bool> {
+
+    fn handle_setup_portal_input(
+        &mut self,
+        key: KeyEvent,
+        _ws_client: Option<&WebSocketClient>,
+    ) -> anyhow::Result<bool> {
         // ESC always closes the portal (even when detecting), so user can always get out
         if key.code == KeyCode::Esc {
             self.state.setup_portal.detecting = false;
@@ -2312,18 +3096,18 @@ impl App {
                 self.add_log("[NAV] Opening Connection Portal (F2)...".to_string());
                 self.request_immediate_render("open_connection_portal");
             }
-            
+
             // Up/Down - Navigate options (immediate render so windowed terminals always redraw)
             KeyCode::Up => {
                 self.state.setup_portal.cycle_option(-1);
                 self.request_immediate_render("setup_nav_up");
             }
-            
+
             KeyCode::Down => {
                 self.state.setup_portal.cycle_option(1);
                 self.request_immediate_render("setup_nav_down");
             }
-            
+
             // Enter - Connection Portal with pre-filled URL and fresh portal state
             KeyCode::Enter => {
                 self.state.setup_portal.error = None;
@@ -2335,11 +3119,10 @@ impl App {
                 ));
                 self.request_immediate_render("setup_enter");
             }
-            
+
             _ => {}
         }
-        
+
         Ok(false)
     }
 }
-