4runr-os 2.7.0 → 2.8.0

package/mk3-tui/src/app.rs

@@ -29,6 +29,67 @@ pub enum AppMode {
     Main,
 }
 
+#[derive(Debug, Clone, PartialEq)]
+pub enum OperationMode {
+    Local,      // No Gateway connection
+    Connected,  // Connected to Gateway
+}
+
+impl OperationMode {
+    pub fn as_str(&self) -> &str {
+        match self {
+            OperationMode::Local => "LOCAL",
+            OperationMode::Connected => "CONNECTED",
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum PortalField {
+    GatewayUrl,
+    Username,
+}
+
+#[derive(Debug, Clone)]
+pub struct ConnectionPortalState {
+    pub gateway_url: String,
+    pub username: String,
+    pub focused_field: PortalField,
+    pub connecting: bool,
+    pub error: Option<String>,
+    pub last_successful_url: Option<String>,
+}
+
+impl Default for ConnectionPortalState {
+    fn default() -> Self {
+        Self {
+            gateway_url: "http://localhost:3001".to_string(),
+            username: String::new(),
+            focused_field: PortalField::GatewayUrl,
+            connecting: false,
+            error: None,
+            last_successful_url: None,
+        }
+    }
+}
+
+impl ConnectionPortalState {
+    pub fn reset(&mut self) {
+        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;
+        self.error = None;
+    }
+    
+    pub fn toggle_field(&mut self) {
+        self.focused_field = match self.focused_field {
+            PortalField::GatewayUrl => PortalField::Username,
+            PortalField::Username => PortalField::GatewayUrl,
+        };
+    }
+}
+
 #[derive(Debug, Clone)]
 pub struct AppState {
     // Navigation state (NEW - replaces simple mode)
@@ -97,6 +158,19 @@ pub struct AppState {
     pub run_manager: RunManagerState,
     pub settings: SettingsState,
     pub agent_list: AgentListState,
+    pub connection_portal: ConnectionPortalState,
+    
+    // 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>,
+    
+    // Deletion confirmation (Step 5.5)
+    pub agent_delete_requested: bool,
+    
+    // Mode tracking (Step 7)
+    pub operation_mode: OperationMode,
     
     // Local cache
     pub cache: Option<Cache>,
@@ -128,11 +202,12 @@ impl Default for AppState {
             network_status: "Not Connected".to_string(),
             logs: VecDeque::from([
                 "[SYSTEM] 4Runr AI Agent OS initialized".to_string(),
+                "[MODE] Starting in LOCAL mode (offline)".to_string(),
                 "[SHIELD] Safety layer active (enforce mode)".to_string(),
                 "[SHIELD] Detectors: PII, Injection, Hallucination".to_string(),
                 "[SENTINEL] Real-time monitoring ready".to_string(),
-                "[GATEWAY] Not connected - run with --gateway to connect".to_string(),
-                "[SYSTEM] Type 'help' for available commands".to_string(),
+                "[HELP] Type 'connect portal' to connect to Gateway server".to_string(),
+                "[HELP] Type 'help' for available commands".to_string(),
             ]),
             capabilities: vec![
                 "text-analysis".to_string(),
@@ -155,6 +230,13 @@ impl Default for AppState {
             run_manager: RunManagerState::default(),
             settings: SettingsState::default(),
             agent_list: AgentListState::default(),
+            connection_portal: ConnectionPortalState::default(),
+            pending_agent_create_id: None,
+            pending_agent_list_id: None,
+            pending_agent_delete_id: None,
+            pending_gateway_connect_id: None,
+            agent_delete_requested: false,
+            operation_mode: OperationMode::Local,
             cache: Cache::new().ok(),
             cache_loaded: false,
         }
@@ -370,6 +452,11 @@ impl App {
             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);
+        }
+        
         // === AGENT LIST INPUT HANDLING ===
         if self.state.navigation.current_screen() == &Screen::AgentList {
             return self.handle_agent_list_input(key);
@@ -432,6 +519,9 @@ impl App {
                             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("  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());
@@ -488,6 +578,38 @@ impl App {
                             self.push_overlay(Screen::Settings);
                             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());
+                            // Request agent list from backend
+                            if let Some(ws) = ws_client {
+                                if let Ok(list_id) = ws.send_command("agent.list", None) {
+                                    self.state.pending_agent_list_id = Some(list_id);
+                                }
+                            }
+                        }
+                        "connect portal" | "portal" => {
+                            self.push_overlay(Screen::ConnectionPortal);
+                            self.state.connection_portal.reset();
+                            self.state.logs.push_back("[NAV] Opening Connection Portal...".into());
+                        }
+                        "disconnect" => {
+                            // Disconnect from Gateway
+                            if let Some(ws) = ws_client {
+                                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));
+                                        // Mode will be updated when response is received
+                                    }
+                                    Err(e) => {
+                                        self.state.logs.push_back(format!("[ERROR] Failed to disconnect: {}", e));
+                                    }
+                                }
+                            } else {
+                                self.state.logs.push_back("[ERROR] WebSocket not connected".into());
+                            }
+                        }
                         _ => {
                             // Try to parse as WebSocket command
                             if let Some(ws) = ws_client {
@@ -636,6 +758,10 @@ impl App {
                 use crate::ui::agent_list;
                 agent_list::render(f, &self.state);
             }
+            Screen::ConnectionPortal => {
+                use crate::ui::connection_portal;
+                connection_portal::render(f, &self.state);
+            }
             Screen::Confirmation { message, action } => {
                 // TODO: Implement confirmation popup
                 // For now, just render the base screen
@@ -1024,6 +1150,8 @@ impl App {
                 Ok(id) => {
                     let short_id = &id[id.len().saturating_sub(8)..];
                     self.add_log(format!("[AGENT] Sent agent.create (id: {})", short_id));
+                    // Store command ID for response tracking (Step 5.1)
+                    self.state.pending_agent_create_id = Some(id);
                 }
                 Err(e) => {
                     self.add_log(format!("[ERROR] Failed to create agent: {}", e));
@@ -1275,6 +1403,183 @@ impl App {
                 }
             }
             
+            // 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() {
+                    self.state.agent_delete_requested = true;
+                    self.request_render("agent_delete_requested");
+                }
+            }
+            
+            _ => {}
+        }
+        
+        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();
+        
+        // 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));
+                    // Store command ID for response tracking
+                    self.state.pending_agent_delete_id = Some(id);
+                }
+                Err(e) => {
+                    self.add_log(format!("[ERROR] Failed to delete agent: {}", e));
+                }
+            }
+        } else {
+            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)
+    }
+    
+    /// 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> {
+        use crossterm::event::KeyModifiers;
+        
+        // Ctrl+C/Q to exit
+        if key.modifiers.contains(KeyModifiers::CONTROL) {
+            match key.code {
+                KeyCode::Char('c') | KeyCode::Char('q') => return Ok(true),
+                _ => return Ok(false),
+            }
+        }
+        
+        // Disable input if connecting
+        if self.state.connection_portal.connecting {
+            return Ok(false);
+        }
+        
+        match key.code {
+            // ESC - Cancel and close portal
+            KeyCode::Esc => {
+                self.pop_overlay();
+                self.add_log("[NAV] Connection Portal closed".to_string());
+                self.request_render("portal_close");
+            }
+            
+            // Tab - Switch between fields
+            KeyCode::Tab | KeyCode::BackTab => {
+                self.state.connection_portal.toggle_field();
+                self.request_render("portal_field_toggle");
+            }
+            
+            // Enter - Connect to Gateway
+            KeyCode::Enter => {
+                let url = self.state.connection_portal.gateway_url.clone();
+                let username = if self.state.connection_portal.username.is_empty() {
+                    None
+                } else {
+                    Some(self.state.connection_portal.username.clone())
+                };
+                
+                // Validate URL format
+                if url.is_empty() {
+                    self.state.connection_portal.error = Some("Gateway URL is required".to_string());
+                    self.request_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.request_render("portal_error");
+                    return Ok(false);
+                }
+                
+                // Set connecting state
+                self.state.connection_portal.connecting = true;
+                self.state.connection_portal.error = None;
+                
+                // Send gateway.connect command
+                if let Some(ws) = ws_client {
+                    let connect_data = if let Some(username) = username {
+                        serde_json::json!({
+                            "url": url,
+                            "username": username
+                        })
+                    } else {
+                        serde_json::json!({
+                            "url": url
+                        })
+                    };
+                    
+                    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.state.pending_gateway_connect_id = Some(id);
+                        }
+                        Err(e) => {
+                            self.state.connection_portal.connecting = false;
+                            self.state.connection_portal.error = Some(format!("Failed to send command: {}", e));
+                            self.add_log(format!("[ERROR] Gateway connection failed: {}", e));
+                        }
+                    }
+                } else {
+                    self.state.connection_portal.connecting = false;
+                    self.state.connection_portal.error = Some("WebSocket not connected".to_string());
+                    self.add_log("[ERROR] WebSocket not connected. Cannot connect to Gateway.".to_string());
+                }
+                
+                self.request_render("portal_connect");
+            }
+            
+            // Typing - edit focused field
+            KeyCode::Char(c) => {
+                match self.state.connection_portal.focused_field {
+                    PortalField::GatewayUrl => {
+                        self.state.connection_portal.gateway_url.push(c);
+                    }
+                    PortalField::Username => {
+                        self.state.connection_portal.username.push(c);
+                    }
+                }
+                self.state.connection_portal.error = None;
+                self.request_render("portal_input");
+            }
+            
+            // Backspace - delete character
+            KeyCode::Backspace => {
+                match self.state.connection_portal.focused_field {
+                    PortalField::GatewayUrl => {
+                        self.state.connection_portal.gateway_url.pop();
+                    }
+                    PortalField::Username => {
+                        self.state.connection_portal.username.pop();
+                    }
+                }
+                self.state.connection_portal.error = None;
+                self.request_render("portal_delete");
+            }
+            
             _ => {}
         }
         

package/mk3-tui/src/main.rs

@@ -192,6 +192,11 @@ fn main() -> Result<()> {
                                             app.state.agent_list.selected_index = 0;
                                             app.state.agent_list.detail_view = None;
                                             
+                                            // Clear pending agent.list ID if this response matches (Step 5.2)
+                                            if Some(&resp.id) == app.state.pending_agent_list_id.as_ref() {
+                                                app.state.pending_agent_list_id = None;
+                                            }
+                                            
                                             // Only open AgentList overlay if we're on Main screen (not during boot)
                                             use crate::screens::Screen;
                                             if app.state.navigation.current_screen() == &Screen::Main {
@@ -199,6 +204,78 @@ fn main() -> Result<()> {
                                                 app.request_render("agent_list_opened");
                                             }
                                         }
+                                    }
+                                    // Handle agent.create response (Step 5.1)
+                                    else if let Some(agent) = obj.get("agent") {
+                                        // Check if this is a response to our agent.create command
+                                        if Some(&resp.id) == app.state.pending_agent_create_id.as_ref() {
+                                            app.state.pending_agent_create_id = None;
+                                            
+                                            // Extract agent name for success message
+                                            let agent_name = agent.as_object()
+                                                .and_then(|a| a.get("name"))
+                                                .and_then(|n| n.as_str())
+                                                .unwrap_or("unknown");
+                                            
+                                            app.add_log(format!("✓ [{}] Agent '{}' created successfully", short_id, agent_name));
+                                            
+                                            // Refresh agent list (Step 5.3)
+                                            if let Some(ref ws) = ws_client {
+                                                if let Ok(list_id) = ws.send_command("agent.list", None) {
+                                                    app.state.pending_agent_list_id = Some(list_id);
+                                                }
+                                            }
+                                        } else {
+                                            app.add_log(format!("✓ [{}] Agent response received", short_id));
+                                        }
+                                    }
+                                    // Handle agent.delete response (Step 5.5)
+                                    else if let Some(deleted) = obj.get("deleted") {
+                                        if deleted.as_bool().unwrap_or(false) {
+                                            if Some(&resp.id) == app.state.pending_agent_delete_id.as_ref() {
+                                                app.state.pending_agent_delete_id = None;
+                                                app.add_log(format!("✓ [{}] Agent deleted successfully", short_id));
+                                                
+                                                // Refresh agent list (Step 5.5)
+                                                if let Some(ref ws) = ws_client {
+                                                    if let Ok(list_id) = ws.send_command("agent.list", None) {
+                                                        app.state.pending_agent_list_id = Some(list_id);
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                    // Handle gateway.connect response (Step 7.5)
+                                    else if let Some(connected) = obj.get("connected") {
+                                        if connected.as_bool().unwrap_or(false) {
+                                            if Some(&resp.id) == app.state.pending_gateway_connect_id.as_ref() {
+                                                app.state.pending_gateway_connect_id = None;
+                                                
+                                                use crate::app::OperationMode;
+                                                app.state.operation_mode = OperationMode::Connected;
+                                                
+                                                let url = obj.get("url")
+                                                    .and_then(|v| v.as_str())
+                                                    .unwrap_or("unknown");
+                                                
+                                                app.state.gateway_url = Some(url.to_string());
+                                                app.state.connection_portal.last_successful_url = Some(url.to_string());
+                                                app.state.connection_portal.connecting = false;
+                                                
+                                                app.add_log(format!("✓ [{}] Connected to Gateway: {}", short_id, url));
+                                                app.add_log(format!("[MODE] Switched to CONNECTED mode"));
+                                                
+                                                // Close portal
+                                                app.pop_overlay();
+                                            }
+                                        } else {
+                                            // Handle disconnect response (Step 7.8)
+                                            use crate::app::OperationMode;
+                                            app.state.operation_mode = OperationMode::Local;
+                                            app.state.gateway_url = None;
+                                            app.add_log(format!("✓ [{}] Disconnected from Gateway", short_id));
+                                            app.add_log(format!("[MODE] Switched to LOCAL mode"));
+                                        }
                                     } else {
                                         app.add_log(format!("✓ [{}] Success", short_id));
                                     }
@@ -212,25 +289,45 @@ fn main() -> Result<()> {
                             let short_id = &resp.id[resp.id.len().saturating_sub(8)..];
                             let error_msg = resp.payload.error.unwrap_or_else(|| "Unknown error".to_string());
                             
-                            // Try to extract command name from response for better error messages
-                            let command_hint = if resp.id.contains("agent") {
-                                " (agent command)"
-                            } else if resp.id.contains("system") {
-                                " (system command)"
-                            } else if resp.id.contains("run") {
-                                " (run command)"
-                            } else if resp.id.contains("tool") {
-                                " (tool command)"
-                            } else {
-                                ""
-                            };
-                            
-                            app.add_log(format!(
-                                "✗ [{}]{} Error: {}",
-                                short_id,
-                                command_hint,
-                                error_msg
-                            ));
+                            // Check if this is a response to agent.create command (Step 5.1)
+                            if Some(&resp.id) == app.state.pending_agent_create_id.as_ref() {
+                                app.state.pending_agent_create_id = None;
+                                app.add_log(format!("✗ [{}] Agent creation failed: {}", short_id, error_msg));
+                            }
+                            // Check if this is a response to agent.delete command (Step 5.5)
+                            else if Some(&resp.id) == app.state.pending_agent_delete_id.as_ref() {
+                                app.state.pending_agent_delete_id = None;
+                                app.add_log(format!("✗ [{}] Agent deletion failed: {}", short_id, error_msg));
+                            }
+                            // Check if this is a response to gateway.connect command (Step 7.5)
+                            else if Some(&resp.id) == app.state.pending_gateway_connect_id.as_ref() {
+                                app.state.pending_gateway_connect_id = None;
+                                app.state.connection_portal.connecting = false;
+                                app.state.connection_portal.error = Some(error_msg.clone());
+                                app.add_log(format!("✗ [{}] Gateway connection failed: {}", short_id, error_msg));
+                            }
+                            // Generic error handling
+                            else {
+                                // Try to extract command name from response for better error messages
+                                let command_hint = if resp.id.contains("agent") {
+                                    " (agent command)"
+                                } else if resp.id.contains("system") {
+                                    " (system command)"
+                                } else if resp.id.contains("run") {
+                                    " (run command)"
+                                } else if resp.id.contains("tool") {
+                                    " (tool command)"
+                                } else {
+                                    ""
+                                };
+                                
+                                app.add_log(format!(
+                                    "✗ [{}]{} Error: {}",
+                                    short_id,
+                                    command_hint,
+                                    error_msg
+                                ));
+                            }
                         }
                     }
                     WsClientMessage::Event(event) => {
@@ -279,7 +376,7 @@ fn main() -> Result<()> {
         // └─────────────────────────────────────────────────────────┘
         // poll() with short timeout (16ms) - returns immediately if no input
         // This allows loop to run ~60 times/second for smooth animations
-        if crossterm::event::poll(Duration::from_millis(16))? {
+            if crossterm::event::poll(Duration::from_millis(16))? {
             if let Event::Key(key) = event::read()? {
                 if key.kind == KeyEventKind::Press {
                     if app.handle_input(key, &mut io_handler, ws_client.as_ref())? {
@@ -290,6 +387,12 @@ fn main() -> Result<()> {
         }
         // If no input, loop continues immediately - animations keep running!
         
+        // Check for pending agent deletion (Step 5.5)
+        if app.state.agent_delete_requested {
+            app.state.agent_delete_requested = false;
+            app.delete_selected_agent(&ws_client);
+        }
+        
         // Check for IO updates (non-blocking)
         io_handler.update(&mut app).ok();
     }

package/mk3-tui/src/screens/mod.rs

@@ -20,6 +20,7 @@ pub enum Screen {
     RunManager,
     Settings,
     AgentList,
+    ConnectionPortal,
     
     // Popup screens (small overlays)
     Confirmation { message: String, action: String },
@@ -31,7 +32,7 @@ impl Screen {
     pub fn is_overlay(&self) -> bool {
         matches!(
             self,
-            Screen::AgentBuilder | Screen::RunManager | Screen::Settings | Screen::AgentList
+            Screen::AgentBuilder | Screen::RunManager | Screen::Settings | Screen::AgentList | Screen::ConnectionPortal
         )
     }
     
@@ -58,6 +59,7 @@ impl Screen {
             Screen::RunManager => "Run Manager",
             Screen::Settings => "Settings",
             Screen::AgentList => "Agent List",
+            Screen::ConnectionPortal => "Connection Portal",
             Screen::Confirmation { .. } => "Confirmation",
             Screen::Alert { .. } => "Alert",
         }

package/mk3-tui/src/ui/agent_list.rs

@@ -120,6 +120,8 @@ fn render_list_view(f: &mut Frame, area: Rect, state: &AppState) {
         Span::styled(" Navigate  |  ", Style::default().fg(TEXT_DIM)),
         Span::styled("Enter", Style::default().fg(NEON_GREEN)),
         Span::styled(" View Details  |  ", Style::default().fg(TEXT_DIM)),
+        Span::styled("D/Del", Style::default().fg(Color::Rgb(255, 100, 100))),
+        Span::styled(" Delete  |  ", Style::default().fg(TEXT_DIM)),
         Span::styled("ESC", Style::default().fg(BRAND_PURPLE)),
         Span::styled(" Close", Style::default().fg(TEXT_DIM)),
     ]);

package/mk3-tui/src/ui/connection_portal.rs

@@ -0,0 +1,232 @@
+/// Connection Portal Screen
+/// UI for connecting to Gateway server and switching to Connected mode
+
+use ratatui::prelude::*;
+use ratatui::widgets::{Block, Borders, Paragraph, Wrap, Clear};
+use crate::app::{AppState, PortalField};
+
+// === 4RUNR BRAND COLORS (matching layout.rs) ===
+const BRAND_PURPLE: Color = Color::Rgb(138, 43, 226);
+const CYBER_CYAN: Color = Color::Rgb(0, 255, 255);
+const NEON_GREEN: Color = Color::Rgb(57, 255, 20);
+const AMBER_WARN: Color = Color::Rgb(255, 191, 0);
+const TEXT_PRIMARY: Color = Color::Rgb(230, 230, 240);
+const TEXT_DIM: Color = Color::Rgb(100, 100, 120);
+const TEXT_MUTED: Color = Color::Rgb(60, 60, 80);
+const BG_PANEL: Color = Color::Rgb(18, 18, 25);
+const ERROR_RED: Color = Color::Rgb(255, 69, 69);
+
+/// Render the Connection Portal screen (full-screen overlay)
+pub fn render(f: &mut Frame, state: &AppState) {
+    let area = f.size();
+    
+    // Clear the entire screen for modal effect
+    f.render_widget(Clear, area);
+    
+    // Center the portal dialog
+    let portal_width = area.width.min(70);
+    let portal_height = area.height.min(25);
+    let portal_x = (area.width.saturating_sub(portal_width)) / 2;
+    let portal_y = (area.height.saturating_sub(portal_height)) / 2;
+    
+    let portal_area = Rect {
+        x: portal_x,
+        y: portal_y,
+        width: portal_width,
+        height: portal_height,
+    };
+    
+    // Split portal into sections
+    use ratatui::layout::{Constraint, Direction, Layout};
+    
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(3),   // Header
+            Constraint::Length(4),   // Description
+            Constraint::Length(7),   // Input fields
+            Constraint::Length(3),   // Status
+            Constraint::Min(1),      // Spacer
+            Constraint::Length(3),   // Actions
+        ])
+        .split(portal_area);
+    
+    render_header(f, chunks[0], state);
+    render_description(f, chunks[1]);
+    render_input_fields(f, chunks[2], state);
+    render_status(f, chunks[3], state);
+    render_actions(f, chunks[5], state);
+}
+
+fn render_header(f: &mut Frame, area: Rect, state: &AppState) {
+    let title = if state.connection_portal.connecting {
+        " 🔌 Connection Portal - Connecting... "
+    } else {
+        " 🔌 Connection Portal "
+    };
+    
+    let block = Block::default()
+        .title(title)
+        .borders(Borders::ALL)
+        .border_style(Style::default().fg(if state.connection_portal.connecting {
+            AMBER_WARN
+        } else if state.connection_portal.error.is_some() {
+            ERROR_RED
+        } else {
+            BRAND_PURPLE
+        }))
+        .style(Style::default().bg(BG_PANEL));
+    
+    f.render_widget(block, area);
+}
+
+fn render_description(f: &mut Frame, area: Rect) {
+    let block = Block::default()
+        .borders(Borders::LEFT | Borders::RIGHT)
+        .style(Style::default().bg(BG_PANEL));
+    
+    let inner = block.inner(area);
+    f.render_widget(block, area);
+    
+    let text = vec![
+        Line::from(Span::styled(
+            "Connect to Gateway Server to enable full OS features including",
+            Style::default().fg(TEXT_PRIMARY)
+        )),
+        Line::from(Span::styled(
+            "Shield, Sentinel, and server tools.",
+            Style::default().fg(TEXT_PRIMARY)
+        )),
+    ];
+    
+    let paragraph = Paragraph::new(text)
+        .wrap(Wrap { trim: false })
+        .alignment(Alignment::Center);
+    
+    f.render_widget(paragraph, inner);
+}
+
+fn render_input_fields(f: &mut Frame, area: Rect, state: &AppState) {
+    let block = Block::default()
+        .borders(Borders::LEFT | Borders::RIGHT)
+        .style(Style::default().bg(BG_PANEL));
+    
+    let inner = block.inner(area);
+    f.render_widget(block, area);
+    
+    let portal = &state.connection_portal;
+    let url_focused = portal.focused_field == PortalField::GatewayUrl;
+    let username_focused = portal.focused_field == PortalField::Username;
+    
+    // Disable input if connecting
+    let input_enabled = !portal.connecting;
+    
+    let text = vec![
+        Line::from(""),
+        // Gateway URL field
+        Line::from(vec![
+            Span::styled("  ", Style::default()),
+            Span::styled(
+                if url_focused && input_enabled { "▶ " } else { "  " },
+                Style::default().fg(BRAND_PURPLE).bold()
+            ),
+            Span::styled("Gateway URL:", Style::default().fg(TEXT_DIM)),
+        ]),
+        Line::from(vec![
+            Span::styled("    ", Style::default()),
+            Span::styled(
+                format!("[{}]", portal.gateway_url),
+                Style::default()
+                    .fg(if url_focused && input_enabled { CYBER_CYAN } else { TEXT_PRIMARY })
+                    .bold()
+            ),
+        ]),
+        Line::from(""),
+        // Username field
+        Line::from(vec![
+            Span::styled("  ", Style::default()),
+            Span::styled(
+                if username_focused && input_enabled { "▶ " } else { "  " },
+                Style::default().fg(BRAND_PURPLE).bold()
+            ),
+            Span::styled("Username (optional):", Style::default().fg(TEXT_DIM)),
+        ]),
+        Line::from(vec![
+            Span::styled("    ", Style::default()),
+            Span::styled(
+                format!("[{}]", if portal.username.is_empty() { " ".to_string() } else { portal.username.clone() }),
+                Style::default()
+                    .fg(if username_focused && input_enabled { CYBER_CYAN } else { TEXT_MUTED })
+            ),
+        ]),
+    ];
+    
+    let paragraph = Paragraph::new(text)
+        .wrap(Wrap { trim: false })
+        .alignment(Alignment::Left);
+    
+    f.render_widget(paragraph, inner);
+}
+
+fn render_status(f: &mut Frame, area: Rect, state: &AppState) {
+    let block = Block::default()
+        .borders(Borders::LEFT | Borders::RIGHT)
+        .style(Style::default().bg(BG_PANEL));
+    
+    let inner = block.inner(area);
+    f.render_widget(block, area);
+    
+    let portal = &state.connection_portal;
+    
+    let (status_text, status_color) = if let Some(error) = &portal.error {
+        (format!("Connection failed: {}", error), ERROR_RED)
+    } else if portal.connecting {
+        ("Connecting...".to_string(), AMBER_WARN)
+    } else {
+        ("Ready to connect".to_string(), TEXT_PRIMARY)
+    };
+    
+    let text = Line::from(vec![
+        Span::styled("  Status: ", Style::default().fg(TEXT_DIM)),
+        Span::styled(status_text, Style::default().fg(status_color).bold()),
+    ]);
+    
+    let paragraph = Paragraph::new(text)
+        .alignment(Alignment::Left);
+    
+    f.render_widget(paragraph, inner);
+}
+
+fn render_actions(f: &mut Frame, area: Rect, state: &AppState) {
+    let block = Block::default()
+        .title(" ⌨️  Actions ")
+        .borders(Borders::ALL)
+        .border_style(Style::default().fg(TEXT_DIM))
+        .style(Style::default().bg(BG_PANEL));
+    
+    let inner = block.inner(area);
+    f.render_widget(block, area);
+    
+    let portal = &state.connection_portal;
+    
+    let text = if portal.connecting {
+        Line::from(vec![
+            Span::styled("Connecting to Gateway server...", Style::default().fg(AMBER_WARN)),
+        ])
+    } else {
+        Line::from(vec![
+            Span::styled("Tab", Style::default().fg(CYBER_CYAN).bold()),
+            Span::styled(" Switch Field  │  ", Style::default().fg(TEXT_DIM)),
+            Span::styled("Enter", Style::default().fg(NEON_GREEN).bold()),
+            Span::styled(" Connect  │  ", Style::default().fg(TEXT_DIM)),
+            Span::styled("ESC", Style::default().fg(BRAND_PURPLE).bold()),
+            Span::styled(" Cancel", Style::default().fg(TEXT_DIM)),
+        ])
+    };
+    
+    let paragraph = Paragraph::new(text)
+        .style(Style::default().fg(TEXT_PRIMARY))
+        .alignment(Alignment::Center);
+    
+    f.render_widget(paragraph, inner);
+}

package/mk3-tui/src/ui/layout.rs

@@ -118,13 +118,22 @@ fn render_header(f: &mut Frame, area: Rect, state: &AppState) {
     // Format uptime
     let uptime_str = format_uptime(state.uptime_secs);
     
-    // Line 1: Brand + version + uptime - Bug 3 fix: Use "4Runr." with dot (matches brand logo)
-    // Use npm package version (2.3.5) - matches package.json
-    const PACKAGE_VERSION: &str = "2.6.11";
+    // Operation mode indicator (Step 7)
+    let mode_text = state.operation_mode.as_str();
+    let mode_color = match state.operation_mode {
+        crate::app::OperationMode::Local => AMBER_WARN,
+        crate::app::OperationMode::Connected => NEON_GREEN,
+    };
+    
+    // Line 1: Brand + version + mode + uptime - Bug 3 fix: Use "4Runr." with dot (matches brand logo)
+    // Use npm package version (2.7.0) - matches package.json
+    const PACKAGE_VERSION: &str = "2.8.0";
     let brand_line = Line::from(vec![
         Span::styled("4Runr.", Style::default().fg(BRAND_PURPLE).add_modifier(Modifier::BOLD)),
         Span::styled(" AI AGENT OS", Style::default().fg(BRAND_VIOLET)),
         Span::styled(format!(" v{}", PACKAGE_VERSION), Style::default().fg(TEXT_MUTED)),
+        Span::styled("    Mode: ", Style::default().fg(TEXT_MUTED)),
+        Span::styled(mode_text, Style::default().fg(mode_color).add_modifier(Modifier::BOLD)),
         Span::styled(format!("    {} UPTIME: {}", spinner, uptime_str), 
             Style::default().fg(TEXT_MUTED)),
     ]);

package/mk3-tui/src/ui/mod.rs

@@ -1,6 +1,7 @@
 pub mod agent_builder;
 pub mod agent_list;
 pub mod boot;
+pub mod connection_portal;
 pub mod help;
 pub mod layout;
 pub mod run_manager;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "4runr-os",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "type": "module",
-  "description": "4Runr AI Agent OS - Secure terminal interface for AI agents. v2.7.0: Step 5 Complete - Full agent management integration. Create, view, select, and delete agents through TUI with real-time backend sync. Agent Builder, Agent List, and Agent Details fully functional. Built with Rust + Ratatui. ⚠️ Pre-MVP / Development Phase",
+  "description": "4Runr AI Agent OS - Secure terminal interface for AI agents. v2.8.0: Step 5 & 7 Complete - Full agent management integration + Connection Portal. Create, view, select, and delete agents through TUI. Dynamic mode switching (Local ↔ Connected) with Gateway connection. Agent Builder, Agent List, Connection Portal fully functional. Built with Rust + Ratatui. ⚠️ Pre-MVP / Development Phase",
   "main": "dist/index.js",
   "bin": {
     "4runr": "dist/index.js",