config now finally works

.env_template

@@ -4,3 +4,5 @@ RUST_DB_USER=multi_psql_dev
 RUST_DB_PASSWORD=3
 RUST_DB_HOST=localhost
 RUST_DB_PORT=5432
+
+JWT_SECRET=<YOUR-JWT-HERE>

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -1,2 +1,6 @@
 /target
 .env
+/tantivy_indexes
+server/tantivy_indexes
+steel_decimal/tests/property_tests.proptest-regressions
+.direnv/

Cargo.toml

@@ -1,19 +1,54 @@
 [workspace]
-members = ["client", "server", "common"]
+members = ["client", "server", "common", "search", "canvas"]
 resolver = "2"
 
 [workspace.package]
 # TODO: idk how to do the name, fix later
-# name = "Multieko2"
-version = "0.1.0"
+# name = "komp_ac"
+version = "0.4.1"
 edition = "2021"
 license = "GPL-3.0-or-later"
 authors = ["Filip Priečinský <filippriec@gmail.com>"]
 description = "Poriadny uctovnicky software."
 readme = "README.md"
-repository = "https://gitlab.com/filipriec/multieko2"
+repository = "https://gitlab.com/filipriec/komp_ac"
 categories = ["command-line-interface"]
 
 # [workspace.metadata]
 # TODO:
-# documentation = "https://docs.rs/accounting-client"`
+# documentation = "https://docs.rs/accounting-client"
+
+[workspace.dependencies]
+# Async and gRPC
+tokio = { version = "1.44.2", features = ["full"] }
+tonic = "0.13.0"
+prost = "0.13.5"
+async-trait = "0.1.88"
+prost-types = "0.13.0"
+
+# Data Handling & Serialization
+serde = { version = "1.0.219", features = ["derive"] }
+serde_json = "1.0.140"
+time = "0.3.41"
+
+# Utilities & Error Handling
+anyhow = "1.0.98"
+dotenvy = "0.15.7"
+lazy_static = "1.5.0"
+tracing = "0.1.41"
+
+# Search crate
+tantivy = "0.24.1"
+
+# Steel_decimal crate
+rust_decimal = { version = "1.37.2", features = ["maths", "serde"] }
+rust_decimal_macros = "1.37.1"
+thiserror = "2.0.12"
+regex = "1.11.1"
+
+# Canvas crate
+ratatui = { version = "0.29.0", features = ["crossterm"] }
+crossterm = "0.28.1"
+toml = "0.8.20"
+
+common = { path = "./common" }

README.md

@@ -1,5 +1,7 @@
 # Hey
 
+This is only work in progress, until release 1.0.0 this is for development use cases only.
+
 I run development like this:
 
 Server:
@@ -12,3 +14,12 @@ Client:
 cargo watch -x 'run --package client -- client'
 ```
 
+Client with tracing:
+```
+ENABLE_TRACING=1 RUST_LOG=client=debug cargo watch -x 'run --package client -- client'
+```
+
+Client with debug that cant be traced
+```
+cargo run --package client --features ui-debug -- client
+```

canvas/CANVAS_MIGRATION.md

@@ -0,0 +1,160 @@
+# Canvas Crate Migration Documentation
+
+## Files Moved from Client to Canvas
+
+### Core Canvas Files
+
+| **Canvas Location** | **Original Client Location** | **Purpose** |
+|-------------------|---------------------------|-----------|
+| `canvas/src/state.rs` | `client/src/state/pages/canvas_state.rs` | Core CanvasState trait |
+| `canvas/src/actions/edit.rs` | `client/src/functions/modes/edit/form_e.rs` | Generic edit actions |
+| `canvas/src/renderer.rs` | `client/src/components/handlers/canvas.rs` | Canvas rendering logic |
+| `canvas/src/modes/highlight.rs` | `client/src/state/app/highlight.rs` | Highlight state types |
+| `canvas/src/modes/manager.rs` | `client/src/modes/handlers/mode_manager.rs` | Mode management |
+
+## Import Replacements Needed in Client
+
+### 1. CanvasState Trait Usage
+**Replace these imports:**
+```rust
+// OLD
+use crate::state::pages::canvas_state::CanvasState;
+
+// NEW  
+use canvas::CanvasState;
+```
+
+**Files that need updating:**
+- `src/modes/canvas/edit.rs` - Line 9
+- `src/modes/canvas/read_only.rs` - Line 5
+- `src/ui/handlers/render.rs` - Line 17
+- `src/state/pages/auth.rs` - All CanvasState impls
+- `src/state/pages/form.rs` - CanvasState impl
+- `src/state/pages/add_table.rs` - CanvasState impl  
+- `src/state/pages/add_logic.rs` - CanvasState impl
+
+### 2. Edit Actions Usage
+**Replace these imports:**
+```rust
+// OLD
+use crate::functions::modes::edit::form_e::{execute_edit_action, execute_common_action};
+
+// NEW
+use canvas::{execute_edit_action, execute_common_action};
+```
+
+**Files that need updating:**
+- `src/modes/canvas/edit.rs` - Lines 3-5
+- `src/functions/modes/edit/auth_e.rs`
+- `src/functions/modes/edit/add_table_e.rs`
+- `src/functions/modes/edit/add_logic_e.rs`
+
+### 3. Canvas Rendering Usage  
+**Replace these imports:**
+```rust
+// OLD  
+use crate::components::handlers::canvas::render_canvas;
+
+// NEW
+use canvas::render_canvas;
+```
+
+**Files that need updating:**
+- Any component that renders forms (login, register, add_table, add_logic, forms)
+
+### 4. Mode System Usage
+**Replace these imports:**
+```rust
+// OLD
+use crate::modes::handlers::mode_manager::{AppMode, ModeManager};
+use crate::state::app::highlight::HighlightState;
+
+// NEW
+use canvas::{AppMode, ModeManager, HighlightState};
+```
+
+**Files that need updating:**
+- `src/modes/handlers/event.rs` - Line 14
+- `src/ui/handlers/ui.rs` - Mode derivation calls
+- All mode handling files
+
+## Theme Integration Required
+
+The canvas crate expects a `CanvasTheme` trait. You need to implement this for your existing theme:
+
+```rust
+// In client/src/config/colors/themes.rs
+use canvas::CanvasTheme;
+use ratatui::style::Color;
+
+impl CanvasTheme for Theme {
+    fn primary_fg(&self) -> Color { self.fg }
+    fn primary_bg(&self) -> Color { self.bg }
+    fn accent(&self) -> Color { self.accent }
+    fn warning(&self) -> Color { self.warning }
+    fn secondary(&self) -> Color { self.secondary }
+    fn highlight(&self) -> Color { self.highlight }
+    fn highlight_bg(&self) -> Color { self.highlight_bg }
+}
+```
+
+## Systematic Replacement Strategy
+
+### Phase 1: Fix Compilation (Do This First)
+1. Update `client/Cargo.toml` to depend on canvas
+2. Add theme implementation  
+3. Replace imports in core files
+
+### Phase 2: Replace Feature-Specific Usage
+1. Update auth components
+2. Update form components  
+3. Update admin components
+4. Update mode handlers
+
+### Phase 3: Remove Old Files (After Everything Works)
+1. Delete `src/state/pages/canvas_state.rs`
+2. Delete `src/functions/modes/edit/form_e.rs`  
+3. Delete `src/components/handlers/canvas.rs`
+4. Delete `src/state/app/highlight.rs`
+5. Delete `src/modes/handlers/mode_manager.rs`
+
+## Files Safe to Delete After Migration
+
+**These can be removed once imports are updated:**
+- `client/src/state/pages/canvas_state.rs`
+- `client/src/functions/modes/edit/form_e.rs`
+- `client/src/components/handlers/canvas.rs`  
+- `client/src/state/app/highlight.rs`
+- `client/src/modes/handlers/mode_manager.rs`
+
+## Quick Start Commands
+
+```bash
+# 1. Add canvas dependency to client
+cd client
+echo 'canvas = { path = "../canvas" }' >> Cargo.toml
+
+# 2. Test compilation
+cargo check
+
+# 3. Fix imports one file at a time
+# Start with: src/config/colors/themes.rs (add CanvasTheme impl)
+# Then: src/modes/canvas/edit.rs (replace form_e imports)
+# Then: src/modes/canvas/read_only.rs (replace canvas_state import)
+
+# 4. After all imports fixed, delete old files
+rm src/state/pages/canvas_state.rs
+rm src/functions/modes/edit/form_e.rs  
+rm src/components/handlers/canvas.rs
+rm src/state/app/highlight.rs
+rm src/modes/handlers/mode_manager.rs
+```
+
+## Expected Compilation Errors
+
+You'll get errors like:
+- `cannot find type 'CanvasState' in this scope`
+- `cannot find function 'execute_edit_action' in this scope`  
+- `cannot find type 'AppMode' in this scope`
+
+Fix these by replacing the imports as documented above.

canvas/Cargo.toml

@@ -0,0 +1,38 @@
+[package]
+name = "canvas"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+description.workspace = true
+readme.workspace = true
+repository.workspace = true
+categories.workspace = true
+
+[dependencies]
+common = { path = "../common" }
+ratatui = { workspace = true }
+crossterm = { workspace = true }
+anyhow = { workspace = true }
+tokio = { workspace = true }
+toml = { workspace = true }
+serde = { workspace = true }
+
+[dev-dependencies]
+tokio-test = "0.4.4"
+
+[[example]]
+name = "simple_login"
+path = "examples/simple_login.rs"
+
+[[example]]
+name = "config_screen"
+path = "examples/config_screen.rs"
+
+[[example]]
+name = "basic_usage"
+path = "examples/basic_usage.rs"
+
+[[example]]
+name = "integration_patterns"
+path = "examples/integration_patterns.rs"

canvas/README.md

@@ -0,0 +1,366 @@
+# Canvas 🎨
+
+A reusable, type-safe canvas system for building form-based TUI applications with vim-like modal editing.
+
+## ✨ Features
+
+- **Type-Safe Actions**: No more string-based action names - everything is compile-time checked
+- **Generic Design**: Implement `CanvasState` once, get navigation, editing, and suggestions for free
+- **Vim-Like Experience**: Modal editing with familiar keybindings
+- **Suggestion System**: Built-in autocomplete and suggestions support
+- **Framework Agnostic**: Works with any TUI framework or raw terminal handling
+- **Async Ready**: Full async/await support for modern Rust applications
+- **Batch Operations**: Execute multiple actions atomically
+- **Extensible**: Custom actions and feature-specific handling
+
+## 🚀 Quick Start
+
+Add to your `Cargo.toml`:
+
+```toml
+cargo add canvas
+```
+
+Implement the `CanvasState` trait:
+
+```rust
+use canvas::prelude::*;
+
+#[derive(Debug)]
+struct LoginForm {
+    current_field: usize,
+    cursor_pos: usize,
+    username: String,
+    password: String,
+    has_changes: bool,
+}
+
+impl CanvasState for LoginForm {
+    fn current_field(&self) -> usize { self.current_field }
+    fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+    fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+    fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+    fn get_current_input(&self) -> &str {
+        match self.current_field {
+            0 => &self.username,
+            1 => &self.password,
+            _ => "",
+        }
+    }
+
+    fn get_current_input_mut(&mut self) -> &mut String {
+        match self.current_field {
+            0 => &mut self.username,
+            1 => &mut self.password,
+            _ => unreachable!(),
+        }
+    }
+
+    fn inputs(&self) -> Vec<&String> { vec![&self.username, &self.password] }
+    fn fields(&self) -> Vec<&str> { vec!["Username", "Password"] }
+    fn has_unsaved_changes(&self) -> bool { self.has_changes }
+    fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+}
+```
+
+Use the type-safe action dispatcher:
+
+```rust
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let mut form = LoginForm::new();
+    let mut ideal_cursor = 0;
+
+    // Type a character - compile-time safe!
+    ActionDispatcher::dispatch(
+        CanvasAction::InsertChar('h'),
+        &mut form,
+        &mut ideal_cursor,
+    ).await?;
+
+    // Move to next field
+    ActionDispatcher::dispatch(
+        CanvasAction::NextField,
+        &mut form,
+        &mut ideal_cursor,
+    ).await?;
+
+    // Batch operations
+    let actions = vec![
+        CanvasAction::InsertChar('p'),
+        CanvasAction::InsertChar('a'),
+        CanvasAction::InsertChar('s'),
+        CanvasAction::InsertChar('s'),
+    ];
+
+    ActionDispatcher::dispatch_batch(actions, &mut form, &mut ideal_cursor).await?;
+
+    Ok(())
+}
+```
+
+## 📚 Examples
+
+The `examples/` directory contains comprehensive examples showing different usage patterns:
+
+### Run the Examples
+
+```bash
+# Basic login form with TUI
+cargo run --example simple_login
+
+# Advanced configuration screen with suggestions and validation
+cargo run --example config_screen
+
+# API usage patterns and quick start guide
+cargo run --example basic_usage
+
+# Advanced integration patterns (state machines, events, validation)
+cargo run --example integration_patterns
+```
+
+### Example Overview
+
+| Example | Description | Key Features |
+|---------|-------------|--------------|
+| `simple_login` | Interactive login form TUI | Basic form, custom actions, password masking |
+| `config_screen` | Configuration editor | Auto-suggestions, field validation, complex UI |
+| `basic_usage` | API demonstration | All core patterns, non-interactive |
+| `integration_patterns` | Architecture patterns | State machines, events, validation pipelines |
+
+## 🎯 Type-Safe Actions
+
+The Canvas system uses strongly-typed actions instead of error-prone strings:
+
+```rust
+// ✅ Type-safe - impossible to make typos
+ActionDispatcher::dispatch(CanvasAction::MoveLeft, &mut form, &mut cursor).await?;
+
+// ❌ Old way - runtime errors waiting to happen
+execute_edit_action("move_left", key, &mut form, &mut cursor).await?;
+execute_edit_action("move_leftt", key, &mut form, &mut cursor).await?; // Oops!
+```
+
+### Available Actions
+
+```rust
+pub enum CanvasAction {
+    // Character input
+    InsertChar(char),
+    
+    // Deletion
+    DeleteBackward,
+    DeleteForward,
+    
+    // Movement
+    MoveLeft, MoveRight, MoveUp, MoveDown,
+    MoveLineStart, MoveLineEnd,
+    MoveWordNext, MoveWordPrev,
+    
+    // Navigation
+    NextField, PrevField,
+    MoveFirstLine, MoveLastLine,
+    
+    // Suggestions
+    SuggestionUp, SuggestionDown,
+    SelectSuggestion, ExitSuggestions,
+    
+    // Extensibility
+    Custom(String),
+}
+```
+
+## 🔧 Advanced Features
+
+### Suggestions and Autocomplete
+
+```rust
+impl CanvasState for MyForm {
+    fn get_suggestions(&self) -> Option<&[String]> {
+        if self.suggestions.is_active {
+            Some(&self.suggestions.suggestions)
+        } else {
+            None
+        }
+    }
+
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        match action {
+            CanvasAction::InsertChar('@') => {
+                // Trigger email suggestions
+                let suggestions = vec![
+                    format!("{}@gmail.com", self.username),
+                    format!("{}@company.com", self.username),
+                ];
+                self.activate_suggestions(suggestions);
+                None // Let generic handler insert the '@'
+            }
+            CanvasAction::SelectSuggestion => {
+                if let Some(suggestion) = self.suggestions.get_selected() {
+                    *self.get_current_input_mut() = suggestion.clone();
+                    self.deactivate_suggestions();
+                    Some("Applied suggestion".to_string())
+                }
+                None
+            }
+            _ => None,
+        }
+    }
+}
+```
+
+### Custom Actions
+
+```rust
+fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+    match action {
+        CanvasAction::Custom(cmd) => match cmd.as_str() {
+            "uppercase" => {
+                *self.get_current_input_mut() = self.get_current_input().to_uppercase();
+                Some("Converted to uppercase".to_string())
+            }
+            "validate_email" => {
+                if self.get_current_input().contains('@') {
+                    Some("Email is valid".to_string())
+                } else {
+                    Some("Invalid email format".to_string())
+                }
+            }
+            _ => None,
+        },
+        _ => None,
+    }
+}
+```
+
+### Integration with TUI Frameworks
+
+Canvas is framework-agnostic and works with any TUI library:
+
+```rust
+// Works with crossterm (see examples)
+// Works with termion
+// Works with ratatui/tui-rs
+// Works with cursive
+// Works with raw terminal I/O
+```
+
+## 🏗️ Architecture
+
+Canvas follows a clean, layered architecture:
+
+```
+┌─────────────────────────────────────┐
+│           Your Application          │
+├─────────────────────────────────────┤
+│         ActionDispatcher            │  ← High-level API
+├─────────────────────────────────────┤
+│     CanvasAction (Type-Safe)        │  ← Type safety layer
+├─────────────────────────────────────┤
+│        Action Handlers              │  ← Core logic
+├─────────────────────────────────────┤
+│        CanvasState Trait            │  ← Your implementation
+└─────────────────────────────────────┘
+```
+
+## 🤝 Why Canvas?
+
+### Before Canvas
+```rust
+// ❌ Error-prone string actions
+execute_action("move_left", key, state)?;
+execute_action("move_leftt", key, state)?; // Runtime error!
+
+// ❌ Duplicate navigation logic everywhere
+impl MyLoginForm { /* navigation code */ }
+impl MyConfigForm { /* same navigation code */ }
+impl MyDataForm { /* same navigation code again */ }
+
+// ❌ Manual cursor and field management
+if key == Key::Tab {
+    current_field = (current_field + 1) % fields.len();
+    cursor_pos = cursor_pos.min(current_input.len());
+}
+```
+
+### With Canvas
+```rust
+// ✅ Type-safe actions
+ActionDispatcher::dispatch(CanvasAction::MoveLeft, state, cursor)?;
+// Typos are impossible - won't compile!
+
+// ✅ Implement once, use everywhere
+impl CanvasState for MyForm { /* minimal implementation */ }
+// All navigation, editing, suggestions work automatically!
+
+// ✅ High-level operations
+ActionDispatcher::dispatch_batch(actions, state, cursor)?;
+```
+
+## 📖 Documentation
+
+- **API Docs**: `cargo doc --open`
+- **Examples**: See `examples/` directory
+- **Migration Guide**: See `CANVAS_MIGRATION.md`
+
+## 🔄 Migration from String-Based Actions
+
+Canvas provides backwards compatibility during migration:
+
+```rust
+// Legacy support (deprecated)
+execute_edit_action("move_left", key, state, cursor).await?;
+
+// New type-safe way
+ActionDispatcher::dispatch(CanvasAction::MoveLeft, state, cursor).await?;
+```
+
+## 🧪 Testing
+
+```bash
+# Run all tests
+cargo test
+
+# Run specific example
+cargo run --example simple_login
+
+# Check type safety
+cargo check
+```
+
+## 📋 Requirements
+
+- Rust 1.70+
+- Terminal with cursor support
+- Optional: async runtime (tokio) for examples
+
+## 🤔 FAQ
+
+**Q: Does Canvas work with [my TUI framework]?**  
+A: Yes! Canvas is framework-agnostic. Just implement `CanvasState` and handle the key events.
+
+**Q: Can I extend Canvas with custom actions?**  
+A: Absolutely! Use `CanvasAction::Custom("my_action")` or implement `handle_feature_action`.
+
+**Q: Is Canvas suitable for complex forms?**  
+A: Yes! See the `config_screen` example for validation, suggestions, and multi-field forms.
+
+**Q: How do I migrate from string-based actions?**  
+A: Canvas provides backwards compatibility. Migrate incrementally using the type-safe APIs.
+
+## 📄 License
+
+Licensed under either of:
+- Apache License, Version 2.0 ([LICENSE-APACHE](LICENSE-APACHE))
+- MIT License ([LICENSE-MIT](LICENSE-MIT))
+
+at your option.
+
+## 🙏 Contributing
+
+Will write here something later on, too busy rn
+
+---
+
+Built with ❤️ for the Rust TUI community

canvas/canvas_config.toml

@@ -0,0 +1,56 @@
+# canvas_config.toml - Complete Canvas Configuration
+
+[behavior]
+wrap_around_fields = true
+auto_save_on_field_change = false
+word_chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_"
+max_suggestions = 6
+
+[appearance]
+cursor_style = "block"  # "block", "bar", "underline"
+show_field_numbers = false
+highlight_current_field = true
+
+# Read-only mode keybindings (vim-style)
+[keybindings.read_only]
+move_left = ["h"]
+move_right = ["l"] 
+move_up = ["k"]
+move_down = ["p"]
+move_word_next = ["w"]
+move_word_end = ["e"]
+move_word_prev = ["b"]
+move_word_end_prev = ["ge"]
+move_line_start = ["0"]
+move_line_end = ["$"]
+move_first_line = ["gg"]
+move_last_line = ["G"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+
+# Edit mode keybindings
+[keybindings.edit]
+delete_char_backward = ["Backspace"]
+delete_char_forward = ["Delete"]
+move_left = ["Left"]
+move_right = ["Right"]
+move_up = ["Up"]
+move_down = ["Down"]
+move_line_start = ["Home"]
+move_line_end = ["End"]
+move_word_next = ["Ctrl+Right"]
+move_word_prev = ["Ctrl+Left"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+
+# Suggestion/autocomplete keybindings
+[keybindings.suggestions]
+suggestion_up = ["Up", "Ctrl+p"]
+suggestion_down = ["Down", "Ctrl+n"]
+select_suggestion = ["Enter", "Tab"]
+exit_suggestions = ["Esc"]
+
+# Global keybindings (work in both modes)
+[keybindings.global]
+move_up = ["Up"]
+move_down = ["Down"]

canvas/examples/basic_usage.rs

@@ -0,0 +1,378 @@
+// examples/basic_usage.rs
+//! Basic usage patterns and quick start guide
+//!
+//! This example demonstrates the core patterns for using the canvas crate:
+//! 1. Implementing CanvasState
+//! 2. Using the ActionDispatcher
+//! 3. Handling different types of actions
+//! 4. Working with suggestions
+//!
+//! Run with: cargo run --example basic_usage
+
+use canvas::prelude::*;
+
+#[tokio::main]
+async fn main() {
+    println!("🎨 Canvas Crate - Basic Usage Patterns");
+    println!("=====================================\n");
+
+    // Example 1: Minimal form implementation
+    example_1_minimal_form();
+
+    // Example 2: Form with suggestions
+    example_2_with_suggestions();
+
+    // Example 3: Custom actions
+    example_3_custom_actions().await;
+
+    // Example 4: Batch operations
+    example_4_batch_operations().await;
+}
+
+// Example 1: Minimal form - just the required methods
+fn example_1_minimal_form() {
+    println!("📝 Example 1: Minimal Form Implementation");
+
+    #[derive(Debug)]
+    struct SimpleForm {
+        current_field: usize,
+        cursor_pos: usize,
+        name: String,
+        email: String,
+        has_changes: bool,
+    }
+
+    impl SimpleForm {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                name: String::new(),
+                email: String::new(),
+                has_changes: false,
+            }
+        }
+    }
+
+    impl CanvasState for SimpleForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.name,
+                1 => &self.email,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.name,
+                1 => &mut self.email,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.name, &self.email] }
+        fn fields(&self) -> Vec<&str> { vec!["Name", "Email"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+    }
+
+    let form = SimpleForm::new();
+    println!("  Created form with {} fields", form.fields().len());
+    println!("  Current field: {}", form.fields()[form.current_field()]);
+    println!("  ✅ Minimal implementation works!\n");
+}
+
+// Example 2: Form with suggestion support
+fn example_2_with_suggestions() {
+    println!("💡 Example 2: Form with Suggestions");
+
+    #[derive(Debug)]
+    struct FormWithSuggestions {
+        current_field: usize,
+        cursor_pos: usize,
+        country: String,
+        has_changes: bool,
+        suggestions: SuggestionState,
+    }
+
+    impl FormWithSuggestions {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                country: String::new(),
+                has_changes: false,
+                suggestions: SuggestionState::default(),
+            }
+        }
+    }
+
+    impl CanvasState for FormWithSuggestions {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.country }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.country }
+        fn inputs(&self) -> Vec<&String> { vec![&self.country] }
+        fn fields(&self) -> Vec<&str> { vec!["Country"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+
+        // Suggestion support
+        fn get_suggestions(&self) -> Option<&[String]> {
+            if self.suggestions.is_active {
+                Some(&self.suggestions.suggestions)
+            } else {
+                None
+            }
+        }
+
+        fn get_selected_suggestion_index(&self) -> Option<usize> {
+            self.suggestions.selected_index
+        }
+
+        fn set_selected_suggestion_index(&mut self, index: Option<usize>) {
+            self.suggestions.selected_index = index;
+        }
+
+        fn activate_suggestions(&mut self, suggestions: Vec<String>) {
+            self.suggestions.activate_with_suggestions(suggestions);
+        }
+
+        fn deactivate_suggestions(&mut self) {
+            self.suggestions.deactivate();
+        }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::SelectSuggestion => {
+                    // Fix: Clone the suggestion first to avoid borrow checker issues
+                    if let Some(suggestion) = self.suggestions.get_selected().cloned() {
+                        self.country = suggestion.clone();
+                        self.cursor_pos = suggestion.len();
+                        self.deactivate_suggestions();
+                        self.has_changes = true;
+                        return Some(format!("Selected: {}", suggestion));
+                    }
+                    None
+                }
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = FormWithSuggestions::new();
+
+    // Simulate user typing and triggering suggestions
+    form.activate_suggestions(vec![
+        "United States".to_string(),
+        "United Kingdom".to_string(),
+        "Ukraine".to_string(),
+    ]);
+
+    println!("  Activated suggestions: {:?}", form.get_suggestions().unwrap());
+    println!("  Current selection: {:?}", form.get_selected_suggestion_index());
+
+    // Navigate suggestions
+    form.set_selected_suggestion_index(Some(1));
+    println!("  Navigated to: {}", form.suggestions.get_selected().unwrap());
+    println!("  ✅ Suggestions work!\n");
+}
+
+// Example 3: Custom actions
+async fn example_3_custom_actions() {
+    println!("⚡ Example 3: Custom Actions");
+
+    #[derive(Debug)]
+    struct FormWithCustomActions {
+        current_field: usize,
+        cursor_pos: usize,
+        text: String,
+        has_changes: bool,
+    }
+
+    impl FormWithCustomActions {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                text: "hello world".to_string(),
+                has_changes: false,
+            }
+        }
+    }
+
+    impl CanvasState for FormWithCustomActions {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.text }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.text }
+        fn inputs(&self) -> Vec<&String> { vec![&self.text] }
+        fn fields(&self) -> Vec<&str> { vec!["Text"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "uppercase" => {
+                        self.text = self.text.to_uppercase();
+                        self.has_changes = true;
+                        Some("Converted to uppercase".to_string())
+                    }
+                    "reverse" => {
+                        self.text = self.text.chars().rev().collect();
+                        self.has_changes = true;
+                        Some("Reversed text".to_string())
+                    }
+                    "word_count" => {
+                        let count = self.text.split_whitespace().count();
+                        Some(format!("Word count: {}", count))
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = FormWithCustomActions::new();
+    let mut ideal_cursor = 0;
+
+    println!("  Initial text: '{}'", form.text);
+
+    // Execute custom actions
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("uppercase".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+
+    println!("  After uppercase: '{}' - {}", form.text, result.message().unwrap());
+
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("reverse".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+
+    println!("  After reverse: '{}' - {}", form.text, result.message().unwrap());
+
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("word_count".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+
+    println!("  {}", result.message().unwrap());
+    println!("  ✅ Custom actions work!\n");
+}
+
+// Example 4: Batch operations
+async fn example_4_batch_operations() {
+    println!("📦 Example 4: Batch Operations");
+
+    // Reuse the simple form from example 1
+    #[derive(Debug)]
+    struct SimpleForm {
+        current_field: usize,
+        cursor_pos: usize,
+        name: String,
+        email: String,
+        has_changes: bool,
+    }
+
+    impl SimpleForm {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                name: String::new(),
+                email: String::new(),
+                has_changes: false,
+            }
+        }
+    }
+
+    impl CanvasState for SimpleForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.name,
+                1 => &self.email,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.name,
+                1 => &mut self.email,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.name, &self.email] }
+        fn fields(&self) -> Vec<&str> { vec!["Name", "Email"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+    }
+
+    let mut form = SimpleForm::new();
+    let mut ideal_cursor = 0;
+
+    // Execute a sequence of actions to type "John" in the name field
+    let actions = vec![
+        CanvasAction::InsertChar('J'),
+        CanvasAction::InsertChar('o'),
+        CanvasAction::InsertChar('h'),
+        CanvasAction::InsertChar('n'),
+        CanvasAction::NextField, // Move to email field
+        CanvasAction::InsertChar('j'),
+        CanvasAction::InsertChar('o'),
+        CanvasAction::InsertChar('h'),
+        CanvasAction::InsertChar('n'),
+        CanvasAction::InsertChar('@'),
+        CanvasAction::InsertChar('e'),
+        CanvasAction::InsertChar('x'),
+        CanvasAction::InsertChar('a'),
+        CanvasAction::InsertChar('m'),
+        CanvasAction::InsertChar('p'),
+        CanvasAction::InsertChar('l'),
+        CanvasAction::InsertChar('e'),
+        CanvasAction::InsertChar('.'),
+        CanvasAction::InsertChar('c'),
+        CanvasAction::InsertChar('o'),
+        CanvasAction::InsertChar('m'),
+    ];
+
+    println!("  Executing {} actions in batch...", actions.len());
+
+    let results = ActionDispatcher::dispatch_batch(
+        actions,
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+
+    println!("  Completed {} actions", results.len());
+    println!("  Final state:");
+    println!("    Name: '{}'", form.name);
+    println!("    Email: '{}'", form.email);
+    println!("    Current field: {}", form.fields()[form.current_field()]);
+    println!("    Has changes: {}", form.has_changes);
+}

canvas/examples/config_screen.rs

@@ -0,0 +1,590 @@
+// examples/config_screen.rs
+//! Advanced configuration screen with suggestions and validation
+//!
+//! This example demonstrates:
+//! - Multiple field types
+//! - Auto-suggestions
+//! - Field validation
+//! - Custom actions
+//!
+//! Run with: cargo run --example config_screen
+
+use canvas::prelude::*;
+use crossterm::{
+    event::{self, Event, KeyCode, KeyEvent, KeyModifiers},
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    ExecutableCommand,
+};
+use std::io::{self, Write};
+
+#[derive(Debug)]
+struct ConfigForm {
+    current_field: usize,
+    cursor_pos: usize,
+
+    // Configuration fields
+    server_host: String,
+    server_port: String,
+    database_url: String,
+    log_level: String,
+    max_connections: String,
+
+    has_changes: bool,
+    suggestions: SuggestionState,
+}
+
+impl ConfigForm {
+    fn new() -> Self {
+        Self {
+            current_field: 0,
+            cursor_pos: 0,
+            server_host: "localhost".to_string(),
+            server_port: "8080".to_string(),
+            database_url: String::new(),
+            log_level: "info".to_string(),
+            max_connections: "100".to_string(),
+            has_changes: false,
+            suggestions: SuggestionState::default(),
+        }
+    }
+
+    fn field_names() -> Vec<&'static str> {
+        vec![
+            "Server Host",
+            "Server Port",
+            "Database URL",
+            "Log Level",
+            "Max Connections"
+        ]
+    }
+
+    fn get_field_value(&self, index: usize) -> &String {
+        match index {
+            0 => &self.server_host,
+            1 => &self.server_port,
+            2 => &self.database_url,
+            3 => &self.log_level,
+            4 => &self.max_connections,
+            _ => panic!("Invalid field index: {}", index),
+        }
+    }
+
+    fn get_field_value_mut(&mut self, index: usize) -> &mut String {
+        match index {
+            0 => &mut self.server_host,
+            1 => &mut self.server_port,
+            2 => &mut self.database_url,
+            3 => &mut self.log_level,
+            4 => &mut self.max_connections,
+            _ => panic!("Invalid field index: {}", index),
+        }
+    }
+
+    fn validate_field(&self, index: usize) -> Option<String> {
+        let value = self.get_field_value(index);
+        match index {
+            0 => { // Server Host
+                if value.trim().is_empty() {
+                    Some("Server host cannot be empty".to_string())
+                } else {
+                    None
+                }
+            }
+            1 => { // Server Port
+                if let Ok(port) = value.parse::<u16>() {
+                    if port == 0 {
+                        Some("Port must be greater than 0".to_string())
+                    } else {
+                        None
+                    }
+                } else {
+                    Some("Port must be a valid number (1-65535)".to_string())
+                }
+            }
+            2 => { // Database URL
+                if !value.is_empty() && !value.starts_with("postgresql://") && !value.starts_with("mysql://") && !value.starts_with("sqlite://") {
+                    Some("Database URL should start with postgresql://, mysql://, or sqlite://".to_string())
+                } else {
+                    None
+                }
+            }
+            3 => { // Log Level
+                let valid_levels = ["trace", "debug", "info", "warn", "error"];
+                if !valid_levels.contains(&value.to_lowercase().as_str()) {
+                    Some("Log level must be one of: trace, debug, info, warn, error".to_string())
+                } else {
+                    None
+                }
+            }
+            4 => { // Max Connections
+                if let Ok(connections) = value.parse::<u32>() {
+                    if connections == 0 {
+                        Some("Max connections must be greater than 0".to_string())
+                    } else if connections > 10000 {
+                        Some("Max connections seems too high (>10000)".to_string())
+                    } else {
+                        None
+                    }
+                } else {
+                    Some("Max connections must be a valid number".to_string())
+                }
+            }
+            _ => None,
+        }
+    }
+
+    fn get_suggestions_for_field(&self, index: usize, current_value: &str) -> Vec<String> {
+        match index {
+            0 => { // Server Host
+                vec![
+                    "localhost".to_string(),
+                    "127.0.0.1".to_string(),
+                    "0.0.0.0".to_string(),
+                    format!("{}.local", current_value),
+                ]
+            }
+            1 => { // Server Port
+                vec![
+                    "8080".to_string(),
+                    "3000".to_string(),
+                    "8000".to_string(),
+                    "80".to_string(),
+                    "443".to_string(),
+                ]
+            }
+            2 => { // Database URL
+                if current_value.is_empty() {
+                    vec![
+                        "postgresql://localhost:5432/mydb".to_string(),
+                        "mysql://localhost:3306/mydb".to_string(),
+                        "sqlite://./database.db".to_string(),
+                    ]
+                } else {
+                    vec![]
+                }
+            }
+            3 => { // Log Level
+                vec![
+                    "trace".to_string(),
+                    "debug".to_string(),
+                    "info".to_string(),
+                    "warn".to_string(),
+                    "error".to_string(),
+                ]
+                .into_iter()
+                .filter(|level| level.starts_with(&current_value.to_lowercase()))
+                .collect()
+            }
+            4 => { // Max Connections
+                vec![
+                    "10".to_string(),
+                    "50".to_string(),
+                    "100".to_string(),
+                    "200".to_string(),
+                    "500".to_string(),
+                ]
+            }
+            _ => vec![],
+        }
+    }
+}
+
+impl CanvasState for ConfigForm {
+    fn current_field(&self) -> usize {
+        self.current_field
+    }
+
+    fn current_cursor_pos(&self) -> usize {
+        self.cursor_pos
+    }
+
+    fn set_current_field(&mut self, index: usize) {
+        self.current_field = index.min(4); // 5 fields total (0-4)
+        // Deactivate suggestions when changing fields
+        self.deactivate_suggestions();
+    }
+
+    fn set_current_cursor_pos(&mut self, pos: usize) {
+        self.cursor_pos = pos;
+    }
+
+    fn get_current_input(&self) -> &str {
+        self.get_field_value(self.current_field)
+    }
+
+    fn get_current_input_mut(&mut self) -> &mut String {
+        self.get_field_value_mut(self.current_field)
+    }
+
+    fn inputs(&self) -> Vec<&String> {
+        vec![
+            &self.server_host,
+            &self.server_port,
+            &self.database_url,
+            &self.log_level,
+            &self.max_connections,
+        ]
+    }
+
+    fn fields(&self) -> Vec<&str> {
+        Self::field_names()
+    }
+
+    fn has_unsaved_changes(&self) -> bool {
+        self.has_changes
+    }
+
+    fn set_has_unsaved_changes(&mut self, changed: bool) {
+        self.has_changes = changed;
+    }
+
+    // Suggestion support
+    fn get_suggestions(&self) -> Option<&[String]> {
+        if self.suggestions.is_active {
+            Some(&self.suggestions.suggestions)
+        } else {
+            None
+        }
+    }
+
+    fn get_selected_suggestion_index(&self) -> Option<usize> {
+        self.suggestions.selected_index
+    }
+
+    fn set_selected_suggestion_index(&mut self, index: Option<usize>) {
+        self.suggestions.selected_index = index;
+    }
+
+    fn activate_suggestions(&mut self, suggestions: Vec<String>) {
+        self.suggestions.activate_with_suggestions(suggestions);
+    }
+
+    fn deactivate_suggestions(&mut self) {
+        self.suggestions.deactivate();
+    }
+
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        match action {
+            CanvasAction::SelectSuggestion => {
+                // Fix: Clone the suggestion first to avoid borrow checker issues
+                if let Some(suggestion) = self.suggestions.get_selected().cloned() {
+                    *self.get_current_input_mut() = suggestion.clone();
+                    self.set_current_cursor_pos(suggestion.len());
+                    self.deactivate_suggestions();
+                    self.set_has_unsaved_changes(true);
+                    return Some("Applied suggestion".to_string());
+                }
+                None
+            }
+
+            CanvasAction::Custom(cmd) => match cmd.as_str() {
+                "trigger_suggestions" => {
+                    let current_value = self.get_current_input();
+                    let suggestions = self.get_suggestions_for_field(self.current_field, current_value);
+                    if !suggestions.is_empty() {
+                        self.activate_suggestions(suggestions);
+                        Some("Showing suggestions".to_string())
+                    } else {
+                        Some("No suggestions available".to_string())
+                    }
+                }
+                "validate_current" => {
+                    if let Some(error) = self.validate_field(self.current_field) {
+                        Some(format!("Validation Error: {}", error))
+                    } else {
+                        Some("Field is valid".to_string())
+                    }
+                }
+                "validate_all" => {
+                    let mut errors = Vec::new();
+                    for i in 0..5 {
+                        if let Some(error) = self.validate_field(i) {
+                            errors.push(format!("{}: {}", Self::field_names()[i], error));
+                        }
+                    }
+                    if errors.is_empty() {
+                        Some("All fields are valid!".to_string())
+                    } else {
+                        Some(format!("Errors found: {}", errors.join("; ")))
+                    }
+                }
+                "save_config" => {
+                    // Validate all fields first
+                    for i in 0..5 {
+                        if self.validate_field(i).is_some() {
+                            return Some("Cannot save: Please fix validation errors first".to_string());
+                        }
+                    }
+                    self.set_has_unsaved_changes(false);
+                    Some("Configuration saved successfully!".to_string())
+                }
+                _ => None,
+            },
+
+            // Auto-trigger suggestions for certain fields
+            CanvasAction::InsertChar(_) => {
+                // After character insertion, check if we should show suggestions
+                match self.current_field {
+                    3 => { // Log level - always show suggestions for autocomplete
+                        let current_value = self.get_current_input();
+                        let suggestions = self.get_suggestions_for_field(self.current_field, current_value);
+                        if !suggestions.is_empty() {
+                            self.activate_suggestions(suggestions);
+                        }
+                    }
+                    _ => {}
+                }
+                None // Let the generic handler insert the character
+            }
+
+            _ => None,
+        }
+    }
+}
+
+fn draw_ui(form: &ConfigForm, message: &str) -> io::Result<()> {
+    print!("\x1B[2J\x1B[1;1H");
+
+    println!("╔════════════════════════════════════════════════════════════════╗");
+    println!("║                      CONFIGURATION EDITOR                     ║");
+    println!("╠════════════════════════════════════════════════════════════════╣");
+
+    let field_names = ConfigForm::field_names();
+
+    for (i, field_name) in field_names.iter().enumerate() {
+        let is_current = i == form.current_field;
+        let indicator = if is_current { ">" } else { " " };
+        let value = form.get_field_value(i);
+        let display_value = if value.is_empty() {
+            format!("<enter {}>", field_name.to_lowercase())
+        } else {
+            value.clone()
+        };
+
+        // Truncate long values for display
+        let display_value = if display_value.len() > 35 {
+            format!("{}...", &display_value[..32])
+        } else {
+            display_value
+        };
+
+        println!("║ {} {:15}: {:35} ║", indicator, field_name, display_value);
+
+        // Show cursor for current field
+        if is_current {
+            let cursor_pos = form.cursor_pos.min(value.len());
+            let cursor_line = format!("║   {}{}║",
+                " ".repeat(18 + cursor_pos),
+                "▊"
+            );
+            println!("{:66}", cursor_line);
+        }
+
+        // Show validation error if any
+        if let Some(error) = form.validate_field(i) {
+            let error_display = if error.len() > 58 {
+                format!("{}...", &error[..55])
+            } else {
+                error
+            };
+            println!("║   ⚠️  {:58} ║", error_display);
+        } else if is_current {
+            println!("║{:64}║", "");
+        }
+    }
+
+    println!("╠════════════════════════════════════════════════════════════════╣");
+
+    // Show suggestions if active
+    if let Some(suggestions) = form.get_suggestions() {
+        println!("║ SUGGESTIONS:                                                   ║");
+        for (i, suggestion) in suggestions.iter().enumerate() {
+            let selected = form.get_selected_suggestion_index() == Some(i);
+            let marker = if selected { "→" } else { " " };
+            let display_suggestion = if suggestion.len() > 55 {
+                format!("{}...", &suggestion[..52])
+            } else {
+                suggestion.clone()
+            };
+            println!("║ {} {:58} ║", marker, display_suggestion);
+        }
+        println!("╠════════════════════════════════════════════════════════════════╣");
+    }
+
+    println!("║ CONTROLS:                                                      ║");
+    println!("║   Tab/↑↓      - Navigate fields                                ║");
+    println!("║   Ctrl+Space  - Show suggestions                               ║");
+    println!("║   ↑↓          - Navigate suggestions (when shown)             ║");
+    println!("║   Enter       - Select suggestion / Validate field            ║");
+    println!("║   Ctrl+S      - Save configuration                             ║");
+    println!("║   Ctrl+V      - Validate all fields                           ║");
+    println!("║   Ctrl+C      - Exit                                           ║");
+    println!("╠════════════════════════════════════════════════════════════════╣");
+
+    // Status
+    let status = if !message.is_empty() {
+        message.to_string()
+    } else if form.has_changes {
+        "Configuration modified - press Ctrl+S to save".to_string()
+    } else {
+        "Ready".to_string()
+    };
+
+    let status_display = if status.len() > 58 {
+        format!("{}...", &status[..55])
+    } else {
+        status
+    };
+
+    println!("║ Status: {:55} ║", status_display);
+    println!("╚════════════════════════════════════════════════════════════════╝");
+
+    io::stdout().flush()?;
+    Ok(())
+}
+
+#[tokio::main]
+async fn main() -> io::Result<()> {
+    enable_raw_mode()?;
+    io::stdout().execute(EnterAlternateScreen)?;
+
+    let mut form = ConfigForm::new();
+    let mut ideal_cursor = 0;
+    let mut message = String::new();
+
+    draw_ui(&form, &message)?;
+
+    loop {
+        if let Event::Key(key) = event::read()? {
+            if !message.is_empty() {
+                message.clear();
+            }
+
+            match key {
+                // Exit
+                KeyEvent { code: KeyCode::Char('c'), modifiers: KeyModifiers::CONTROL, .. } => {
+                    break;
+                }
+
+                // Show suggestions
+                KeyEvent { code: KeyCode::Char(' '), modifiers: KeyModifiers::CONTROL, .. } => {
+                    let result = ActionDispatcher::dispatch(
+                        CanvasAction::Custom("trigger_suggestions".to_string()),
+                        &mut form,
+                        &mut ideal_cursor,
+                    ).await.unwrap();
+
+                    if let Some(msg) = result.message() {
+                        message = msg.to_string();
+                    }
+                }
+
+                // Validate current field or select suggestion
+                KeyEvent { code: KeyCode::Enter, .. } => {
+                    if form.get_suggestions().is_some() {
+                        // Select suggestion
+                        let result = ActionDispatcher::dispatch(
+                            CanvasAction::SelectSuggestion,
+                            &mut form,
+                            &mut ideal_cursor,
+                        ).await.unwrap();
+
+                        if let Some(msg) = result.message() {
+                            message = msg.to_string();
+                        }
+                    } else {
+                        // Validate current field
+                        let result = ActionDispatcher::dispatch(
+                            CanvasAction::Custom("validate_current".to_string()),
+                            &mut form,
+                            &mut ideal_cursor,
+                        ).await.unwrap();
+
+                        if let Some(msg) = result.message() {
+                            message = msg.to_string();
+                        }
+                    }
+                }
+
+                // Save configuration
+                KeyEvent { code: KeyCode::Char('s'), modifiers: KeyModifiers::CONTROL, .. } => {
+                    let result = ActionDispatcher::dispatch(
+                        CanvasAction::Custom("save_config".to_string()),
+                        &mut form,
+                        &mut ideal_cursor,
+                    ).await.unwrap();
+
+                    if let Some(msg) = result.message() {
+                        message = msg.to_string();
+                    }
+                }
+
+                // Validate all fields
+                KeyEvent { code: KeyCode::Char('v'), modifiers: KeyModifiers::CONTROL, .. } => {
+                    let result = ActionDispatcher::dispatch(
+                        CanvasAction::Custom("validate_all".to_string()),
+                        &mut form,
+                        &mut ideal_cursor,
+                    ).await.unwrap();
+
+                    if let Some(msg) = result.message() {
+                        message = msg.to_string();
+                    }
+                }
+
+                // Handle up/down for suggestions
+                KeyEvent { code: KeyCode::Up, .. } => {
+                    let action = if form.get_suggestions().is_some() {
+                        CanvasAction::SuggestionUp
+                    } else {
+                        CanvasAction::MoveUp
+                    };
+
+                    let _ = ActionDispatcher::dispatch(action, &mut form, &mut ideal_cursor).await;
+                }
+
+                KeyEvent { code: KeyCode::Down, .. } => {
+                    let action = if form.get_suggestions().is_some() {
+                        CanvasAction::SuggestionDown
+                    } else {
+                        CanvasAction::MoveDown
+                    };
+
+                    let _ = ActionDispatcher::dispatch(action, &mut form, &mut ideal_cursor).await;
+                }
+
+                // Handle escape to close suggestions
+                KeyEvent { code: KeyCode::Esc, .. } => {
+                    if form.get_suggestions().is_some() {
+                        let _ = ActionDispatcher::dispatch(
+                            CanvasAction::ExitSuggestions,
+                            &mut form,
+                            &mut ideal_cursor,
+                        ).await;
+                    }
+                }
+
+                // Regular key handling
+                _ => {
+                    if let Some(action) = CanvasAction::from_key(key.code) {
+                        let result = ActionDispatcher::dispatch(action, &mut form, &mut ideal_cursor).await.unwrap();
+
+                        if !result.is_success() {
+                            if let Some(msg) = result.message() {
+                                message = format!("Error: {}", msg);
+                            }
+                        }
+                    }
+                }
+            }
+
+            draw_ui(&form, &message)?;
+        }
+    }
+
+    disable_raw_mode()?;
+    io::stdout().execute(LeaveAlternateScreen)?;
+    println!("Configuration editor closed!");
+
+    Ok(())
+}

canvas/examples/integration_patterns.rs

@@ -0,0 +1,617 @@
+// examples/integration_patterns.rs
+//! Advanced integration patterns showing how Canvas works with:
+//! - State management patterns
+//! - Event-driven architectures  
+//! - Validation systems
+//! - Custom rendering
+//! 
+//! Run with: cargo run --example integration_patterns
+
+use canvas::prelude::*;
+use std::collections::HashMap;
+
+#[tokio::main]
+async fn main() {
+    println!("🔧 Canvas Integration Patterns");
+    println!("==============================\n");
+
+    // Pattern 1: State machine integration
+    state_machine_example().await;
+    
+    // Pattern 2: Event-driven architecture
+    event_driven_example().await;
+    
+    // Pattern 3: Validation pipeline
+    validation_pipeline_example().await;
+    
+    // Pattern 4: Multi-form orchestration
+    multi_form_example().await;
+}
+
+// Pattern 1: Canvas with state machine
+async fn state_machine_example() {
+    println!("🔄 Pattern 1: State Machine Integration");
+    
+    #[derive(Debug, Clone, PartialEq)]
+    enum FormState {
+        Initial,
+        Editing,
+        Validating,
+        Submitting,
+        Success,
+        Error(String),
+    }
+
+    #[derive(Debug)]
+    struct StateMachineForm {
+        // Canvas state
+        current_field: usize,
+        cursor_pos: usize,
+        username: String,
+        password: String,
+        has_changes: bool,
+        
+        // State machine
+        state: FormState,
+    }
+
+    impl StateMachineForm {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                username: String::new(),
+                password: String::new(),
+                has_changes: false,
+                state: FormState::Initial,
+            }
+        }
+
+        fn transition_to(&mut self, new_state: FormState) -> String {
+            let old_state = self.state.clone();
+            self.state = new_state;
+            format!("State transition: {:?} -> {:?}", old_state, self.state)
+        }
+
+        fn can_submit(&self) -> bool {
+            matches!(self.state, FormState::Editing) && 
+            !self.username.trim().is_empty() && 
+            !self.password.trim().is_empty()
+        }
+    }
+
+    impl CanvasState for StateMachineForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.username,
+                1 => &self.password,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.username,
+                1 => &mut self.password,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.username, &self.password] }
+        fn fields(&self) -> Vec<&str> { vec!["Username", "Password"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+
+        fn set_has_unsaved_changes(&mut self, changed: bool) { 
+            self.has_changes = changed;
+            // Transition to editing state when user starts typing
+            if changed && self.state == FormState::Initial {
+                self.state = FormState::Editing;
+            }
+        }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "submit" => {
+                        if self.can_submit() {
+                            let msg = self.transition_to(FormState::Submitting);
+                            // Simulate submission
+                            self.state = FormState::Success;
+                            Some(format!("{} -> Form submitted successfully", msg))
+                        } else {
+                            let msg = self.transition_to(FormState::Error("Invalid form data".to_string()));
+                            Some(msg)
+                        }
+                    }
+                    "reset" => {
+                        self.username.clear();
+                        self.password.clear();
+                        self.has_changes = false;
+                        Some(self.transition_to(FormState::Initial))
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = StateMachineForm::new();
+    let mut ideal_cursor = 0;
+
+    println!("  Initial state: {:?}", form.state);
+
+    // Type some text to trigger state change
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::InsertChar('u'),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  After typing: {:?}", form.state);
+
+    // Try to submit (should fail)
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("submit".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Submit result: {}", result.message().unwrap_or(""));
+    println!("  ✅ State machine integration works!\n");
+}
+
+// Pattern 2: Event-driven architecture
+async fn event_driven_example() {
+    println!("📡 Pattern 2: Event-Driven Architecture");
+
+    #[derive(Debug, Clone)]
+    enum FormEvent {
+        FieldChanged { field: usize, old_value: String, new_value: String },
+        ValidationTriggered { field: usize, is_valid: bool },
+        ActionExecuted { action: String, success: bool },
+    }
+
+    #[derive(Debug)]
+    struct EventDrivenForm {
+        current_field: usize,
+        cursor_pos: usize,
+        email: String,
+        has_changes: bool,
+        events: Vec<FormEvent>,
+    }
+
+    impl EventDrivenForm {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                email: String::new(),
+                has_changes: false,
+                events: Vec::new(),
+            }
+        }
+
+        fn emit_event(&mut self, event: FormEvent) {
+            println!("  📡 Event: {:?}", event);
+            self.events.push(event);
+        }
+
+        fn validate_email(&self) -> bool {
+            self.email.contains('@') && self.email.contains('.')
+        }
+    }
+
+    impl CanvasState for EventDrivenForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.email }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.email }
+        fn inputs(&self) -> Vec<&String> { vec![&self.email] }
+        fn fields(&self) -> Vec<&str> { vec!["Email"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+
+        fn set_has_unsaved_changes(&mut self, changed: bool) { 
+            if changed != self.has_changes {
+                let old_value = if self.has_changes { "modified" } else { "unmodified" };
+                let new_value = if changed { "modified" } else { "unmodified" };
+                
+                self.emit_event(FormEvent::FieldChanged {
+                    field: self.current_field,
+                    old_value: old_value.to_string(),
+                    new_value: new_value.to_string(),
+                });
+            }
+            self.has_changes = changed;
+        }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "validate" => {
+                        let is_valid = self.validate_email();
+                        self.emit_event(FormEvent::ValidationTriggered {
+                            field: self.current_field,
+                            is_valid,
+                        });
+                        
+                        self.emit_event(FormEvent::ActionExecuted {
+                            action: "validate".to_string(),
+                            success: true,
+                        });
+
+                        if is_valid {
+                            Some("Email is valid!".to_string())
+                        } else {
+                            Some("Email is invalid".to_string())
+                        }
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = EventDrivenForm::new();
+    let mut ideal_cursor = 0;
+
+    // Type an email address
+    let email = "user@example.com";
+    for c in email.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    // Validate the email
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+
+    println!("  Final email: {}", form.email);
+    println!("  Validation result: {}", result.message().unwrap_or(""));
+    println!("  Total events captured: {}", form.events.len());
+    println!("  ✅ Event-driven architecture works!\n");
+}
+
+// Pattern 3: Validation pipeline
+async fn validation_pipeline_example() {
+    println!("✅ Pattern 3: Validation Pipeline");
+
+    type ValidationRule = Box<dyn Fn(&str) -> Result<(), String>>;
+
+    #[derive(Debug)]
+    struct ValidatedForm {
+        current_field: usize,
+        cursor_pos: usize,
+        password: String,
+        has_changes: bool,
+        validators: HashMap<usize, Vec<ValidationRule>>,
+    }
+
+    impl ValidatedForm {
+        fn new() -> Self {
+            let mut validators: HashMap<usize, Vec<ValidationRule>> = HashMap::new();
+            
+            // Password validators
+            let mut password_validators: Vec<ValidationRule> = Vec::new();
+            password_validators.push(Box::new(|value| {
+                if value.len() < 8 {
+                    Err("Password must be at least 8 characters".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+            password_validators.push(Box::new(|value| {
+                if !value.chars().any(|c| c.is_uppercase()) {
+                    Err("Password must contain at least one uppercase letter".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+            password_validators.push(Box::new(|value| {
+                if !value.chars().any(|c| c.is_numeric()) {
+                    Err("Password must contain at least one number".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+            
+            validators.insert(0, password_validators);
+
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                password: String::new(),
+                has_changes: false,
+                validators,
+            }
+        }
+
+        fn validate_field(&self, field_index: usize) -> Vec<String> {
+            let mut errors = Vec::new();
+            
+            if let Some(validators) = self.validators.get(&field_index) {
+                let value = match field_index {
+                    0 => &self.password,
+                    _ => return errors,
+                };
+
+                for validator in validators {
+                    if let Err(error) = validator(value) {
+                        errors.push(error);
+                    }
+                }
+            }
+            
+            errors
+        }
+    }
+
+    impl CanvasState for ValidatedForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.password }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.password }
+        fn inputs(&self) -> Vec<&String> { vec![&self.password] }
+        fn fields(&self) -> Vec<&str> { vec!["Password"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "validate" => {
+                        let errors = self.validate_field(self.current_field);
+                        if errors.is_empty() {
+                            Some("Password meets all requirements!".to_string())
+                        } else {
+                            Some(format!("Validation errors: {}", errors.join(", ")))
+                        }
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = ValidatedForm::new();
+    let mut ideal_cursor = 0;
+
+    // Test with weak password
+    let weak_password = "abc";
+    for c in weak_password.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Weak password '{}': {}", form.password, result.message().unwrap_or(""));
+
+    // Clear and test with strong password
+    form.password.clear();
+    form.cursor_pos = 0;
+    
+    let strong_password = "StrongPass123";
+    for c in strong_password.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Strong password '{}': {}", form.password, result.message().unwrap_or(""));
+    println!("  ✅ Validation pipeline works!\n");
+}
+
+// Pattern 4: Multi-form orchestration
+async fn multi_form_example() {
+    println!("🎭 Pattern 4: Multi-Form Orchestration");
+
+    #[derive(Debug)]
+    struct PersonalInfoForm {
+        current_field: usize,
+        cursor_pos: usize,
+        name: String,
+        age: String,
+        has_changes: bool,
+    }
+
+    #[derive(Debug)]
+    struct ContactInfoForm {
+        current_field: usize,
+        cursor_pos: usize,
+        email: String,
+        phone: String,
+        has_changes: bool,
+    }
+
+    // Implement CanvasState for both forms
+    impl CanvasState for PersonalInfoForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.name,
+                1 => &self.age,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.name,
+                1 => &mut self.age,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.name, &self.age] }
+        fn fields(&self) -> Vec<&str> { vec!["Name", "Age"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+    }
+
+    impl CanvasState for ContactInfoForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.email,
+                1 => &self.phone,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.email,
+                1 => &mut self.phone,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.email, &self.phone] }
+        fn fields(&self) -> Vec<&str> { vec!["Email", "Phone"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+    }
+
+    // Form orchestrator
+    #[derive(Debug)]
+    struct FormOrchestrator {
+        personal_form: PersonalInfoForm,
+        contact_form: ContactInfoForm,
+        current_form: usize, // 0 = personal, 1 = contact
+    }
+
+    impl FormOrchestrator {
+        fn new() -> Self {
+            Self {
+                personal_form: PersonalInfoForm {
+                    current_field: 0,
+                    cursor_pos: 0,
+                    name: String::new(),
+                    age: String::new(),
+                    has_changes: false,
+                },
+                contact_form: ContactInfoForm {
+                    current_field: 0,
+                    cursor_pos: 0,
+                    email: String::new(),
+                    phone: String::new(),
+                    has_changes: false,
+                },
+                current_form: 0,
+            }
+        }
+
+        async fn execute_action(&mut self, action: CanvasAction) -> ActionResult {
+            let mut ideal_cursor = 0;
+            
+            match self.current_form {
+                0 => ActionDispatcher::dispatch(action, &mut self.personal_form, &mut ideal_cursor).await.unwrap(),
+                1 => ActionDispatcher::dispatch(action, &mut self.contact_form, &mut ideal_cursor).await.unwrap(),
+                _ => ActionResult::error("Invalid form index"),
+            }
+        }
+
+        fn switch_form(&mut self) -> String {
+            self.current_form = (self.current_form + 1) % 2;
+            match self.current_form {
+                0 => "Switched to Personal Info form".to_string(),
+                1 => "Switched to Contact Info form".to_string(),
+                _ => "Unknown form".to_string(),
+            }
+        }
+
+        fn current_form_name(&self) -> &str {
+            match self.current_form {
+                0 => "Personal Info",
+                1 => "Contact Info",
+                _ => "Unknown",
+            }
+        }
+    }
+
+    let mut orchestrator = FormOrchestrator::new();
+
+    println!("  Current form: {}", orchestrator.current_form_name());
+
+    // Fill personal info
+    let personal_data = vec![
+        ('J', 'o', 'h', 'n'),
+    ];
+    
+    for &c in &['J', 'o', 'h', 'n'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    orchestrator.execute_action(CanvasAction::NextField).await;
+    
+    for &c in &['2', '5'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    println!("  Personal form - Name: '{}', Age: '{}'", 
+             orchestrator.personal_form.name, 
+             orchestrator.personal_form.age);
+
+    // Switch to contact form
+    let switch_msg = orchestrator.switch_form();
+    println!("  {}", switch_msg);
+
+    // Fill contact info
+    for &c in &['j', 'o', 'h', 'n', '@', 'e', 'x', 'a', 'm', 'p', 'l', 'e', '.', 'c', 'o', 'm'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    orchestrator.execute_action(CanvasAction::NextField).await;
+    
+    for &c in &['5', '5', '5', '-', '1', '2', '3', '4'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    println!("  Contact form - Email: '{}', Phone: '{}'", 
+             orchestrator.contact_form.email, 
+             orchestrator.contact_form.phone);
+
+    println!("  ✅ Multi-form orchestration works!\n");
+
+    println!("🎉 All integration patterns completed!");
+    println!("The Canvas crate seamlessly integrates with various architectural patterns!");
+}

canvas/examples/simple_login.rs

@@ -0,0 +1,354 @@
+// examples/simple_login.rs
+//! A simple login form demonstrating basic canvas usage
+//!
+//! Run with: cargo run --example simple_login
+
+use canvas::prelude::*;
+use crossterm::{
+    event::{self, Event, KeyCode, KeyEvent, KeyModifiers},
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    ExecutableCommand,
+};
+use std::io::{self, Write};
+
+#[derive(Debug)]
+struct LoginForm {
+    current_field: usize,
+    cursor_pos: usize,
+    username: String,
+    password: String,
+    has_changes: bool,
+}
+
+impl LoginForm {
+    fn new() -> Self {
+        Self {
+            current_field: 0,
+            cursor_pos: 0,
+            username: String::new(),
+            password: String::new(),
+            has_changes: false,
+        }
+    }
+
+    fn reset(&mut self) {
+        self.username.clear();
+        self.password.clear();
+        self.current_field = 0;
+        self.cursor_pos = 0;
+        self.has_changes = false;
+    }
+
+    fn is_valid(&self) -> bool {
+        !self.username.trim().is_empty() && !self.password.trim().is_empty()
+    }
+}
+
+impl CanvasState for LoginForm {
+    fn current_field(&self) -> usize {
+        self.current_field
+    }
+
+    fn current_cursor_pos(&self) -> usize {
+        self.cursor_pos
+    }
+
+    fn set_current_field(&mut self, index: usize) {
+        self.current_field = index.min(1); // Only 2 fields: username(0), password(1)
+    }
+
+    fn set_current_cursor_pos(&mut self, pos: usize) {
+        self.cursor_pos = pos;
+    }
+
+    fn get_current_input(&self) -> &str {
+        match self.current_field {
+            0 => &self.username,
+            1 => &self.password,
+            _ => "",
+        }
+    }
+
+    fn get_current_input_mut(&mut self) -> &mut String {
+        match self.current_field {
+            0 => &mut self.username,
+            1 => &mut self.password,
+            _ => unreachable!(),
+        }
+    }
+
+    fn inputs(&self) -> Vec<&String> {
+        vec![&self.username, &self.password]
+    }
+
+    fn fields(&self) -> Vec<&str> {
+        vec!["Username", "Password"]
+    }
+
+    fn has_unsaved_changes(&self) -> bool {
+        self.has_changes
+    }
+
+    fn set_has_unsaved_changes(&mut self, changed: bool) {
+        self.has_changes = changed;
+    }
+
+    // Custom action handling
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        match action {
+            CanvasAction::Custom(cmd) => match cmd.as_str() {
+                "submit" => {
+                    if self.is_valid() {
+                        Some(format!("Login successful! Welcome, {}", self.username))
+                    } else {
+                        Some("Error: Username and password are required".to_string())
+                    }
+                }
+                "clear" => {
+                    self.reset();
+                    Some("Form cleared".to_string())
+                }
+                _ => None,
+            },
+            _ => None,
+        }
+    }
+
+    // Override display for password field
+    fn get_display_value_for_field(&self, index: usize) -> &str {
+        match index {
+            0 => &self.username, // Username shows normally
+            1 => &self.password, // We'll handle masking in the UI drawing
+            _ => "",
+        }
+    }
+
+    fn has_display_override(&self, index: usize) -> bool {
+        index == 1 // Password field has display override
+    }
+}
+
+fn draw_ui(form: &LoginForm, message: &str) -> io::Result<()> {
+    // Clear screen and move cursor to top-left
+    print!("\x1B[2J\x1B[1;1H");
+
+    println!("╔═══════════════════════════════════════╗");
+    println!("║              LOGIN FORM               ║");
+    println!("╠═══════════════════════════════════════╣");
+
+    // Username field
+    let username_indicator = if form.current_field == 0 { "→" } else { " " };
+    let username_display = if form.username.is_empty() {
+        "<enter username>".to_string()
+    } else {
+        form.username.clone()
+    };
+    println!("║ {} Username: {:22} ║", username_indicator, 
+             if username_display.len() > 22 { 
+                 format!("{}...", &username_display[..19])
+             } else { 
+                 format!("{:22}", username_display) 
+             });
+
+    // Show cursor for username field
+    if form.current_field == 0 && !form.username.is_empty() {
+        let cursor_pos = form.cursor_pos.min(form.username.len());
+        let spaces_before = 11 + cursor_pos; // "Username: " = 10 chars + 1 space
+        let cursor_line = format!("║   {}█{:width$}║", 
+            " ".repeat(spaces_before), 
+            "",
+            width = 25_usize.saturating_sub(spaces_before)
+        );
+        println!("{}", cursor_line);
+    } else {
+        println!("║{:37}║", "");
+    }
+
+    // Password field
+    let password_indicator = if form.current_field == 1 { "→" } else { " " };
+    let password_display = if form.password.is_empty() {
+        "<enter password>".to_string()
+    } else {
+        "*".repeat(form.password.len())
+    };
+    println!("║ {} Password: {:22} ║", password_indicator, 
+             if password_display.len() > 22 { 
+                 format!("{}...", &password_display[..19])
+             } else { 
+                 format!("{:22}", password_display) 
+             });
+
+    // Show cursor for password field
+    if form.current_field == 1 && !form.password.is_empty() {
+        let cursor_pos = form.cursor_pos.min(form.password.len());
+        let spaces_before = 11 + cursor_pos; // "Password: " = 10 chars + 1 space
+        let cursor_line = format!("║   {}█{:width$}║", 
+            " ".repeat(spaces_before), 
+            "",
+            width = 25_usize.saturating_sub(spaces_before)
+        );
+        println!("{}", cursor_line);
+    } else {
+        println!("║{:37}║", "");
+    }
+
+    println!("╠═══════════════════════════════════════╣");
+    println!("║ CONTROLS:                             ║");
+    println!("║   Tab/↑↓    - Navigate fields         ║");
+    println!("║   Enter     - Submit form             ║");
+    println!("║   Ctrl+R    - Clear form              ║");
+    println!("║   Ctrl+C    - Exit                    ║");
+    println!("╠═══════════════════════════════════════╣");
+
+    // Status message
+    let status = if !message.is_empty() {
+        message.to_string()
+    } else if form.has_changes {
+        "Form modified".to_string()
+    } else {
+        "Ready - enter your credentials".to_string()
+    };
+
+    let status_display = if status.len() > 33 {
+        format!("{}...", &status[..30])
+    } else {
+        format!("{:33}", status)
+    };
+
+    println!("║ Status: {} ║", status_display);
+    println!("╚═══════════════════════════════════════╝");
+
+    // Show current state info
+    println!();
+    println!("Current field: {} ({})", 
+             form.current_field, 
+             form.fields()[form.current_field]);
+    println!("Cursor position: {}", form.cursor_pos);
+    println!("Has changes: {}", form.has_changes);
+
+    io::stdout().flush()?;
+    Ok(())
+}
+
+#[tokio::main]
+async fn main() -> io::Result<()> {
+    println!("Starting Canvas Login Demo...");
+    println!("Setting up terminal...");
+
+    // Setup terminal
+    enable_raw_mode()?;
+    io::stdout().execute(EnterAlternateScreen)?;
+
+    let mut form = LoginForm::new();
+    let mut ideal_cursor = 0;
+    let mut message = String::new();
+
+    // Initial draw
+    if let Err(e) = draw_ui(&form, &message) {
+        // Cleanup on error
+        let _ = disable_raw_mode();
+        let _ = io::stdout().execute(LeaveAlternateScreen);
+        return Err(e);
+    }
+
+    println!("Canvas Login Demo started. Use Ctrl+C to exit.");
+
+    loop {
+        match event::read() {
+            Ok(Event::Key(key)) => {
+                // Clear message after key press
+                if !message.is_empty() {
+                    message.clear();
+                }
+
+                match key {
+                    // Exit
+                    KeyEvent { code: KeyCode::Char('c'), modifiers: KeyModifiers::CONTROL, .. } => {
+                        break;
+                    }
+
+                    // Clear form
+                    KeyEvent { code: KeyCode::Char('r'), modifiers: KeyModifiers::CONTROL, .. } => {
+                        match ActionDispatcher::dispatch(
+                            CanvasAction::Custom("clear".to_string()),
+                            &mut form,
+                            &mut ideal_cursor,
+                        ).await {
+                            Ok(result) => {
+                                if let Some(msg) = result.message() {
+                                    message = msg.to_string();
+                                }
+                            }
+                            Err(e) => {
+                                message = format!("Error: {}", e);
+                            }
+                        }
+                    }
+
+                    // Submit form
+                    KeyEvent { code: KeyCode::Enter, .. } => {
+                        match ActionDispatcher::dispatch(
+                            CanvasAction::Custom("submit".to_string()),
+                            &mut form,
+                            &mut ideal_cursor,
+                        ).await {
+                            Ok(result) => {
+                                if let Some(msg) = result.message() {
+                                    message = msg.to_string();
+                                }
+                            }
+                            Err(e) => {
+                                message = format!("Error: {}", e);
+                            }
+                        }
+                    }
+
+                    // Regular key handling - let canvas handle it!
+                    _ => {
+                        if let Some(action) = CanvasAction::from_key(key.code) {
+                            match ActionDispatcher::dispatch(action, &mut form, &mut ideal_cursor).await {
+                                Ok(result) => {
+                                    if !result.is_success() {
+                                        if let Some(msg) = result.message() {
+                                            message = format!("Error: {}", msg);
+                                        }
+                                    }
+                                }
+                                Err(e) => {
+                                    message = format!("Error: {}", e);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Redraw UI
+                if let Err(e) = draw_ui(&form, &message) {
+                    eprintln!("Error drawing UI: {}", e);
+                    break;
+                }
+            }
+            Ok(_) => {
+                // Ignore other events (mouse, resize, etc.)
+            }
+            Err(e) => {
+                message = format!("Event error: {}", e);
+                if let Err(_) = draw_ui(&form, &message) {
+                    break;
+                }
+            }
+        }
+    }
+
+    // Cleanup
+    disable_raw_mode()?;
+    io::stdout().execute(LeaveAlternateScreen)?;
+
+    println!("Thanks for using Canvas Login Demo!");
+    println!("Final form state:");
+    println!("  Username: '{}'", form.username);
+    println!("  Password: '{}'", "*".repeat(form.password.len()));
+    println!("  Valid: {}", form.is_valid());
+
+    Ok(())
+}

canvas/integration_patterns.rs

@@ -0,0 +1,620 @@
+// examples/integration_patterns.rs
+//! Advanced integration patterns showing how Canvas works with:
+//! - State management patterns
+//! - Event-driven architectures
+//! - Validation systems
+//! - Custom rendering
+//!
+//! Run with: cargo run --example integration_patterns
+
+use canvas::prelude::*;
+use std::collections::HashMap;
+
+#[tokio::main]
+async fn main() {
+    println!("🔧 Canvas Integration Patterns");
+    println!("==============================\n");
+
+    // Pattern 1: State machine integration
+    state_machine_example().await;
+
+    // Pattern 2: Event-driven architecture
+    event_driven_example().await;
+
+    // Pattern 3: Validation pipeline
+    validation_pipeline_example().await;
+
+    // Pattern 4: Multi-form orchestration
+    multi_form_example().await;
+}
+
+// Pattern 1: Canvas with state machine
+async fn state_machine_example() {
+    println!("🔄 Pattern 1: State Machine Integration");
+
+    #[derive(Debug, Clone, PartialEq)]
+    enum FormState {
+        Initial,
+        Editing,
+        Validating,
+        Submitting,
+        Success,
+        Error(String),
+    }
+
+    #[derive(Debug)]
+    struct StateMachineForm {
+        // Canvas state
+        current_field: usize,
+        cursor_pos: usize,
+        username: String,
+        password: String,
+        has_changes: bool,
+
+        // State machine
+        state: FormState,
+    }
+
+    impl StateMachineForm {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                username: String::new(),
+                password: String::new(),
+                has_changes: false,
+                state: FormState::Initial,
+            }
+        }
+
+        fn transition_to(&mut self, new_state: FormState) -> String {
+            let old_state = self.state.clone();
+            self.state = new_state;
+            format!("State transition: {:?} -> {:?}", old_state, self.state)
+        }
+
+        fn can_submit(&self) -> bool {
+            matches!(self.state, FormState::Editing) &&
+            !self.username.trim().is_empty() &&
+            !self.password.trim().is_empty()
+        }
+    }
+
+    impl CanvasState for StateMachineForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.username,
+                1 => &self.password,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.username,
+                1 => &mut self.password,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.username, &self.password] }
+        fn fields(&self) -> Vec<&str> { vec!["Username", "Password"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+
+        fn set_has_unsaved_changes(&mut self, changed: bool) {
+            self.has_changes = changed;
+            // Transition to editing state when user starts typing
+            if changed && self.state == FormState::Initial {
+                self.state = FormState::Editing;
+            }
+        }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "submit" => {
+                        if self.can_submit() {
+                            let msg = self.transition_to(FormState::Submitting);
+                            // Simulate submission
+                            self.state = FormState::Success;
+                            Some(format!("{} -> Form submitted successfully", msg))
+                        } else {
+                            let msg = self.transition_to(FormState::Error("Invalid form data".to_string()));
+                            Some(msg)
+                        }
+                    }
+                    "reset" => {
+                        self.username.clear();
+                        self.password.clear();
+                        self.has_changes = false;
+                        Some(self.transition_to(FormState::Initial))
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = StateMachineForm::new();
+    let mut ideal_cursor = 0;
+
+    println!("  Initial state: {:?}", form.state);
+
+    // Type some text to trigger state change
+    let _result = ActionDispatcher::dispatch(
+        CanvasAction::InsertChar('u'),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  After typing: {:?}", form.state);
+
+    // Try to submit (should fail)
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("submit".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Submit result: {}", result.message().unwrap_or(""));
+    println!("  ✅ State machine integration works!\n");
+}
+
+// Pattern 2: Event-driven architecture
+async fn event_driven_example() {
+    println!("📡 Pattern 2: Event-Driven Architecture");
+
+    #[derive(Debug, Clone)]
+    enum FormEvent {
+        FieldChanged { field: usize, old_value: String, new_value: String },
+        ValidationTriggered { field: usize, is_valid: bool },
+        ActionExecuted { action: String, success: bool },
+    }
+
+    #[derive(Debug)]
+    struct EventDrivenForm {
+        current_field: usize,
+        cursor_pos: usize,
+        email: String,
+        has_changes: bool,
+        events: Vec<FormEvent>,
+    }
+
+    impl EventDrivenForm {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                email: String::new(),
+                has_changes: false,
+                events: Vec::new(),
+            }
+        }
+
+        fn emit_event(&mut self, event: FormEvent) {
+            println!("  📡 Event: {:?}", event);
+            self.events.push(event);
+        }
+
+        fn validate_email(&self) -> bool {
+            self.email.contains('@') && self.email.contains('.')
+        }
+    }
+
+    impl CanvasState for EventDrivenForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.email }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.email }
+        fn inputs(&self) -> Vec<&String> { vec![&self.email] }
+        fn fields(&self) -> Vec<&str> { vec!["Email"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+
+        fn set_has_unsaved_changes(&mut self, changed: bool) {
+            if changed != self.has_changes {
+                let old_value = if self.has_changes { "modified" } else { "unmodified" };
+                let new_value = if changed { "modified" } else { "unmodified" };
+
+                self.emit_event(FormEvent::FieldChanged {
+                    field: self.current_field,
+                    old_value: old_value.to_string(),
+                    new_value: new_value.to_string(),
+                });
+            }
+            self.has_changes = changed;
+        }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "validate" => {
+                        let is_valid = self.validate_email();
+                        self.emit_event(FormEvent::ValidationTriggered {
+                            field: self.current_field,
+                            is_valid,
+                        });
+
+                        self.emit_event(FormEvent::ActionExecuted {
+                            action: "validate".to_string(),
+                            success: true,
+                        });
+
+                        if is_valid {
+                            Some("Email is valid!".to_string())
+                        } else {
+                            Some("Email is invalid".to_string())
+                        }
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = EventDrivenForm::new();
+    let mut ideal_cursor = 0;
+
+    // Type an email address
+    let email = "user@example.com";
+    for c in email.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    // Validate the email
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+
+    println!("  Final email: {}", form.email);
+    println!("  Validation result: {}", result.message().unwrap_or(""));
+    println!("  Total events captured: {}", form.events.len());
+    println!("  ✅ Event-driven architecture works!\n");
+}
+
+// Pattern 3: Validation pipeline
+async fn validation_pipeline_example() {
+    println!("✅ Pattern 3: Validation Pipeline");
+
+    type ValidationRule = Box<dyn Fn(&str) -> Result<(), String>>;
+
+    // Custom Debug implementation since function pointers don't implement Debug
+    struct ValidatedForm {
+        current_field: usize,
+        cursor_pos: usize,
+        password: String,
+        has_changes: bool,
+        validators: HashMap<usize, Vec<ValidationRule>>,
+    }
+
+    impl std::fmt::Debug for ValidatedForm {
+        fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+            f.debug_struct("ValidatedForm")
+                .field("current_field", &self.current_field)
+                .field("cursor_pos", &self.cursor_pos)
+                .field("password", &self.password)
+                .field("has_changes", &self.has_changes)
+                .field("validators", &format!("HashMap with {} entries", self.validators.len()))
+                .finish()
+        }
+    }
+
+    impl ValidatedForm {
+        fn new() -> Self {
+            let mut validators: HashMap<usize, Vec<ValidationRule>> = HashMap::new();
+
+            // Password validators
+            let mut password_validators: Vec<ValidationRule> = Vec::new();
+            password_validators.push(Box::new(|value| {
+                if value.len() < 8 {
+                    Err("Password must be at least 8 characters".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+            password_validators.push(Box::new(|value| {
+                if !value.chars().any(|c| c.is_uppercase()) {
+                    Err("Password must contain at least one uppercase letter".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+            password_validators.push(Box::new(|value| {
+                if !value.chars().any(|c| c.is_numeric()) {
+                    Err("Password must contain at least one number".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+
+            validators.insert(0, password_validators);
+
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                password: String::new(),
+                has_changes: false,
+                validators,
+            }
+        }
+
+        fn validate_field(&self, field_index: usize) -> Vec<String> {
+            let mut errors = Vec::new();
+
+            if let Some(validators) = self.validators.get(&field_index) {
+                let value = match field_index {
+                    0 => &self.password,
+                    _ => return errors,
+                };
+
+                for validator in validators {
+                    if let Err(error) = validator(value) {
+                        errors.push(error);
+                    }
+                }
+            }
+
+            errors
+        }
+    }
+
+    impl CanvasState for ValidatedForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.password }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.password }
+        fn inputs(&self) -> Vec<&String> { vec![&self.password] }
+        fn fields(&self) -> Vec<&str> { vec!["Password"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "validate" => {
+                        let errors = self.validate_field(self.current_field);
+                        if errors.is_empty() {
+                            Some("Password meets all requirements!".to_string())
+                        } else {
+                            Some(format!("Validation errors: {}", errors.join(", ")))
+                        }
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = ValidatedForm::new();
+    let mut ideal_cursor = 0;
+
+    // Test with weak password
+    let weak_password = "abc";
+    for c in weak_password.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Weak password '{}': {}", form.password, result.message().unwrap_or(""));
+
+    // Clear and test with strong password
+    form.password.clear();
+    form.cursor_pos = 0;
+
+    let strong_password = "StrongPass123";
+    for c in strong_password.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Strong password '{}': {}", form.password, result.message().unwrap_or(""));
+    println!("  ✅ Validation pipeline works!\n");
+}
+
+// Pattern 4: Multi-form orchestration
+async fn multi_form_example() {
+    println!("🎭 Pattern 4: Multi-Form Orchestration");
+
+    #[derive(Debug)]
+    struct PersonalInfoForm {
+        current_field: usize,
+        cursor_pos: usize,
+        name: String,
+        age: String,
+        has_changes: bool,
+    }
+
+    #[derive(Debug)]
+    struct ContactInfoForm {
+        current_field: usize,
+        cursor_pos: usize,
+        email: String,
+        phone: String,
+        has_changes: bool,
+    }
+
+    // Implement CanvasState for both forms
+    impl CanvasState for PersonalInfoForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.name,
+                1 => &self.age,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.name,
+                1 => &mut self.age,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.name, &self.age] }
+        fn fields(&self) -> Vec<&str> { vec!["Name", "Age"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+    }
+
+    impl CanvasState for ContactInfoForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.email,
+                1 => &self.phone,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.email,
+                1 => &mut self.phone,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.email, &self.phone] }
+        fn fields(&self) -> Vec<&str> { vec!["Email", "Phone"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+    }
+
+    // Form orchestrator
+    #[derive(Debug)]
+    struct FormOrchestrator {
+        personal_form: PersonalInfoForm,
+        contact_form: ContactInfoForm,
+        current_form: usize, // 0 = personal, 1 = contact
+    }
+
+    impl FormOrchestrator {
+        fn new() -> Self {
+            Self {
+                personal_form: PersonalInfoForm {
+                    current_field: 0,
+                    cursor_pos: 0,
+                    name: String::new(),
+                    age: String::new(),
+                    has_changes: false,
+                },
+                contact_form: ContactInfoForm {
+                    current_field: 0,
+                    cursor_pos: 0,
+                    email: String::new(),
+                    phone: String::new(),
+                    has_changes: false,
+                },
+                current_form: 0,
+            }
+        }
+
+        async fn execute_action(&mut self, action: CanvasAction) -> ActionResult {
+            let mut ideal_cursor = 0;
+
+            match self.current_form {
+                0 => ActionDispatcher::dispatch(action, &mut self.personal_form, &mut ideal_cursor).await.unwrap(),
+                1 => ActionDispatcher::dispatch(action, &mut self.contact_form, &mut ideal_cursor).await.unwrap(),
+                _ => ActionResult::error("Invalid form index"),
+            }
+        }
+
+        fn switch_form(&mut self) -> String {
+            self.current_form = (self.current_form + 1) % 2;
+            match self.current_form {
+                0 => "Switched to Personal Info form".to_string(),
+                1 => "Switched to Contact Info form".to_string(),
+                _ => "Unknown form".to_string(),
+            }
+        }
+
+        fn current_form_name(&self) -> &str {
+            match self.current_form {
+                0 => "Personal Info",
+                1 => "Contact Info",
+                _ => "Unknown",
+            }
+        }
+    }
+
+    let mut orchestrator = FormOrchestrator::new();
+
+    println!("  Current form: {}", orchestrator.current_form_name());
+
+    // Fill personal info
+    for &c in &['J', 'o', 'h', 'n'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    orchestrator.execute_action(CanvasAction::NextField).await;
+
+    for &c in &['2', '5'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    println!("  Personal form - Name: '{}', Age: '{}'",
+             orchestrator.personal_form.name,
+             orchestrator.personal_form.age);
+
+    // Switch to contact form
+    let switch_msg = orchestrator.switch_form();
+    println!("  {}", switch_msg);
+
+    // Fill contact info
+    for &c in &['j', 'o', 'h', 'n', '@', 'e', 'x', 'a', 'm', 'p', 'l', 'e', '.', 'c', 'o', 'm'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    orchestrator.execute_action(CanvasAction::NextField).await;
+
+    for &c in &['5', '5', '5', '-', '1', '2', '3', '4'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    println!("  Contact form - Email: '{}', Phone: '{}'",
+             orchestrator.contact_form.email,
+             orchestrator.contact_form.phone);
+}

canvas/src/actions/edit.rs

@@ -0,0 +1,455 @@
+// canvas/src/actions/edit.rs
+
+use crate::state::{CanvasState, ActionContext};
+use crate::actions::types::{CanvasAction, ActionResult};
+use crossterm::event::{KeyCode, KeyEvent};
+use anyhow::Result;
+
+/// Execute a typed canvas action on any CanvasState implementation
+pub async fn execute_canvas_action<S: CanvasState>(
+    action: CanvasAction,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+) -> Result<ActionResult> {
+    // 1. Try feature-specific handler first
+    let context = ActionContext {
+        key_code: None, // We don't need KeyCode anymore since action is typed
+        ideal_cursor_column: *ideal_cursor_column,
+        current_input: state.get_current_input().to_string(),
+        current_field: state.current_field(),
+    };
+
+    if let Some(result) = state.handle_feature_action(&action, &context) {
+        return Ok(ActionResult::HandledByFeature(result));
+    }
+
+    // 2. Handle suggestion actions
+    if let Some(result) = handle_suggestion_action(&action, state)? {
+        return Ok(result);
+    }
+
+    // 3. Handle generic canvas actions
+    handle_generic_canvas_action(action, state, ideal_cursor_column).await
+}
+
+/// Legacy function for string-based actions (backwards compatibility)
+pub async fn execute_edit_action<S: CanvasState>(
+    action: &str,
+    key: KeyEvent,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+) -> Result<String> {
+    let typed_action = match action {
+        "insert_char" => {
+            if let KeyCode::Char(c) = key.code {
+                CanvasAction::InsertChar(c)
+            } else {
+                return Ok("Error: insert_char called without a char key.".to_string());
+            }
+        }
+        _ => CanvasAction::from_string(action),
+    };
+
+    let result = execute_canvas_action(typed_action, state, ideal_cursor_column).await?;
+    
+    // Convert ActionResult back to string for backwards compatibility
+    Ok(result.message().unwrap_or("").to_string())
+}
+
+/// Handle suggestion-related actions
+fn handle_suggestion_action<S: CanvasState>(
+    action: &CanvasAction,
+    state: &mut S,
+) -> Result<Option<ActionResult>> {
+    match action {
+        CanvasAction::SuggestionDown => {
+            if let Some(suggestions) = state.get_suggestions() {
+                if !suggestions.is_empty() {
+                    let current = state.get_selected_suggestion_index().unwrap_or(0);
+                    let next = (current + 1) % suggestions.len();
+                    state.set_selected_suggestion_index(Some(next));
+                    return Ok(Some(ActionResult::success()));
+                }
+            }
+            Ok(None)
+        }
+        
+        CanvasAction::SuggestionUp => {
+            if let Some(suggestions) = state.get_suggestions() {
+                if !suggestions.is_empty() {
+                    let current = state.get_selected_suggestion_index().unwrap_or(0);
+                    let prev = if current == 0 { suggestions.len() - 1 } else { current - 1 };
+                    state.set_selected_suggestion_index(Some(prev));
+                    return Ok(Some(ActionResult::success()));
+                }
+            }
+            Ok(None)
+        }
+        
+        CanvasAction::SelectSuggestion => {
+            // Let feature handle this via handle_feature_action since it's feature-specific
+            Ok(None)
+        }
+        
+        CanvasAction::ExitSuggestions => {
+            state.deactivate_suggestions();
+            Ok(Some(ActionResult::success()))
+        }
+        
+        _ => Ok(None),
+    }
+}
+
+/// Handle core canvas actions with full type safety
+async fn handle_generic_canvas_action<S: CanvasState>(
+    action: CanvasAction,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+) -> Result<ActionResult> {
+    match action {
+        CanvasAction::InsertChar(c) => {
+            let cursor_pos = state.current_cursor_pos();
+            let field_value = state.get_current_input_mut();
+            let mut chars: Vec<char> = field_value.chars().collect();
+            
+            if cursor_pos <= chars.len() {
+                chars.insert(cursor_pos, c);
+                *field_value = chars.into_iter().collect();
+                state.set_current_cursor_pos(cursor_pos + 1);
+                state.set_has_unsaved_changes(true);
+                *ideal_cursor_column = state.current_cursor_pos();
+                Ok(ActionResult::success())
+            } else {
+                Ok(ActionResult::error("Invalid cursor position for character insertion"))
+            }
+        }
+
+        CanvasAction::DeleteBackward => {
+            if state.current_cursor_pos() > 0 {
+                let cursor_pos = state.current_cursor_pos();
+                let field_value = state.get_current_input_mut();
+                let mut chars: Vec<char> = field_value.chars().collect();
+                
+                if cursor_pos <= chars.len() {
+                    chars.remove(cursor_pos - 1);
+                    *field_value = chars.into_iter().collect();
+                    let new_pos = cursor_pos - 1;
+                    state.set_current_cursor_pos(new_pos);
+                    state.set_has_unsaved_changes(true);
+                    *ideal_cursor_column = new_pos;
+                }
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::DeleteForward => {
+            let cursor_pos = state.current_cursor_pos();
+            let field_value = state.get_current_input_mut();
+            let mut chars: Vec<char> = field_value.chars().collect();
+            
+            if cursor_pos < chars.len() {
+                chars.remove(cursor_pos);
+                *field_value = chars.into_iter().collect();
+                state.set_has_unsaved_changes(true);
+                *ideal_cursor_column = cursor_pos;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::NextField => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = (current_field + 1) % num_fields;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::PrevField => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = if current_field == 0 {
+                    num_fields - 1
+                } else {
+                    current_field - 1
+                };
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveLeft => {
+            let new_pos = state.current_cursor_pos().saturating_sub(1);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveRight => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            if current_pos < current_input.len() {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveUp => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = current_field.saturating_sub(1);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveDown => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let new_field = (state.current_field() + 1).min(num_fields - 1);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveLineStart => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveLineEnd => {
+            let current_input = state.get_current_input();
+            let new_pos = current_input.len();
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveFirstLine => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                state.set_current_field(0);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok(ActionResult::success_with_message("Moved to first field"))
+        }
+
+        CanvasAction::MoveLastLine => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let new_field = num_fields - 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok(ActionResult::success_with_message("Moved to last field"))
+        }
+
+        CanvasAction::MoveWordNext => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_next_word_start(current_input, state.current_cursor_pos());
+                let final_pos = new_pos.min(current_input.len());
+                state.set_current_cursor_pos(final_pos);
+                *ideal_cursor_column = final_pos;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveWordEnd => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let current_pos = state.current_cursor_pos();
+                let new_pos = find_word_end(current_input, current_pos);
+
+                let final_pos = if new_pos == current_pos {
+                    find_word_end(current_input, new_pos + 1)
+                } else {
+                    new_pos
+                };
+
+                let max_valid_index = current_input.len().saturating_sub(1);
+                let clamped_pos = final_pos.min(max_valid_index);
+                state.set_current_cursor_pos(clamped_pos);
+                *ideal_cursor_column = clamped_pos;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveWordPrev => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_start(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveWordEndPrev => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_end(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok(ActionResult::success_with_message("Moved to previous word end"))
+        }
+
+        CanvasAction::Custom(action_str) => {
+            Ok(ActionResult::error(format!("Unknown or unhandled custom action: {}", action_str)))
+        }
+
+        // Suggestion actions should have been handled above
+        CanvasAction::SuggestionUp | CanvasAction::SuggestionDown | 
+        CanvasAction::SelectSuggestion | CanvasAction::ExitSuggestions => {
+            Ok(ActionResult::error("Suggestion action not handled properly"))
+        }
+    }
+}
+
+// Word movement helper functions
+
+#[derive(PartialEq)]
+enum CharType {
+    Whitespace,
+    Alphanumeric,
+    Punctuation,
+}
+
+fn get_char_type(c: char) -> CharType {
+    if c.is_whitespace() {
+        CharType::Whitespace
+    } else if c.is_alphanumeric() {
+        CharType::Alphanumeric
+    } else {
+        CharType::Punctuation
+    }
+}
+
+fn find_next_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos >= len {
+        return len;
+    }
+
+    let mut pos = current_pos;
+    let initial_type = get_char_type(chars[pos]);
+
+    while pos < len && get_char_type(chars[pos]) == initial_type {
+        pos += 1;
+    }
+
+    while pos < len && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos += 1;
+    }
+
+    pos
+}
+
+fn find_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.min(len - 1);
+
+    if get_char_type(chars[pos]) == CharType::Whitespace {
+        pos = find_next_word_start(text, pos);
+    }
+
+    if pos >= len {
+        return len.saturating_sub(1);
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == word_type {
+        pos += 1;
+    }
+
+    pos.saturating_sub(1).min(len.saturating_sub(1))
+}
+
+fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        return 0;
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    pos
+}
+
+fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        return 0;
+    }
+    if pos == 0 && get_char_type(chars[pos]) != CharType::Whitespace {
+        return 0;
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos > 0 {
+        pos - 1
+    } else {
+        0
+    }
+}

canvas/src/actions/mod.rs

@@ -0,0 +1,8 @@
+// canvas/src/actions/mod.rs
+
+pub mod types;
+pub mod edit;
+
+// Re-export the main types for convenience
+pub use types::{CanvasAction, ActionResult};
+pub use edit::{execute_canvas_action, execute_edit_action};

canvas/src/actions/types.rs

@@ -0,0 +1,225 @@
+// canvas/src/actions/types.rs
+
+use crossterm::event::KeyCode;
+
+/// All possible canvas actions, type-safe and exhaustive
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum CanvasAction {
+    // Character input
+    InsertChar(char),
+    
+    // Deletion
+    DeleteBackward,
+    DeleteForward,
+    
+    // Basic cursor movement
+    MoveLeft,
+    MoveRight,
+    MoveUp,
+    MoveDown,
+    
+    // Line movement
+    MoveLineStart,
+    MoveLineEnd,
+    MoveFirstLine,
+    MoveLastLine,
+    
+    // Word movement
+    MoveWordNext,
+    MoveWordEnd,
+    MoveWordPrev,
+    MoveWordEndPrev,
+    
+    // Field navigation
+    NextField,
+    PrevField,
+    
+    // Suggestions
+    SuggestionUp,
+    SuggestionDown,
+    SelectSuggestion,
+    ExitSuggestions,
+    
+    // Custom actions (escape hatch for feature-specific behavior)
+    Custom(String),
+}
+
+impl CanvasAction {
+    /// Convert a string action to typed action (for backwards compatibility during migration)
+    pub fn from_string(action: &str) -> Self {
+        match action {
+            "insert_char" => {
+                // This is a bit tricky - we need the char from context
+                // For now, we'll use Custom until we refactor the call sites
+                Self::Custom(action.to_string())
+            }
+            "delete_char_backward" => Self::DeleteBackward,
+            "delete_char_forward" => Self::DeleteForward,
+            "move_left" => Self::MoveLeft,
+            "move_right" => Self::MoveRight,
+            "move_up" => Self::MoveUp,
+            "move_down" => Self::MoveDown,
+            "move_line_start" => Self::MoveLineStart,
+            "move_line_end" => Self::MoveLineEnd,
+            "move_first_line" => Self::MoveFirstLine,
+            "move_last_line" => Self::MoveLastLine,
+            "move_word_next" => Self::MoveWordNext,
+            "move_word_end" => Self::MoveWordEnd,
+            "move_word_prev" => Self::MoveWordPrev,
+            "move_word_end_prev" => Self::MoveWordEndPrev,
+            "next_field" => Self::NextField,
+            "prev_field" => Self::PrevField,
+            "suggestion_up" => Self::SuggestionUp,
+            "suggestion_down" => Self::SuggestionDown,
+            "select_suggestion" => Self::SelectSuggestion,
+            "exit_suggestions" => Self::ExitSuggestions,
+            _ => Self::Custom(action.to_string()),
+        }
+    }
+    
+    /// Get string representation (for logging, debugging)
+    pub fn as_str(&self) -> &str {
+        match self {
+            Self::InsertChar(_) => "insert_char",
+            Self::DeleteBackward => "delete_char_backward",
+            Self::DeleteForward => "delete_char_forward",
+            Self::MoveLeft => "move_left",
+            Self::MoveRight => "move_right",
+            Self::MoveUp => "move_up",
+            Self::MoveDown => "move_down",
+            Self::MoveLineStart => "move_line_start",
+            Self::MoveLineEnd => "move_line_end",
+            Self::MoveFirstLine => "move_first_line",
+            Self::MoveLastLine => "move_last_line",
+            Self::MoveWordNext => "move_word_next",
+            Self::MoveWordEnd => "move_word_end",
+            Self::MoveWordPrev => "move_word_prev",
+            Self::MoveWordEndPrev => "move_word_end_prev",
+            Self::NextField => "next_field",
+            Self::PrevField => "prev_field",
+            Self::SuggestionUp => "suggestion_up",
+            Self::SuggestionDown => "suggestion_down",
+            Self::SelectSuggestion => "select_suggestion",
+            Self::ExitSuggestions => "exit_suggestions",
+            Self::Custom(s) => s,
+        }
+    }
+    
+    /// Create action from KeyCode for common cases
+    pub fn from_key(key: KeyCode) -> Option<Self> {
+        match key {
+            KeyCode::Char(c) => Some(Self::InsertChar(c)),
+            KeyCode::Backspace => Some(Self::DeleteBackward),
+            KeyCode::Delete => Some(Self::DeleteForward),
+            KeyCode::Left => Some(Self::MoveLeft),
+            KeyCode::Right => Some(Self::MoveRight),
+            KeyCode::Up => Some(Self::MoveUp),
+            KeyCode::Down => Some(Self::MoveDown),
+            KeyCode::Home => Some(Self::MoveLineStart),
+            KeyCode::End => Some(Self::MoveLineEnd),
+            KeyCode::Tab => Some(Self::NextField),
+            KeyCode::BackTab => Some(Self::PrevField),
+            _ => None,
+        }
+    }
+    
+    /// Check if this action modifies content
+    pub fn is_modifying(&self) -> bool {
+        matches!(self, 
+            Self::InsertChar(_) | 
+            Self::DeleteBackward | 
+            Self::DeleteForward |
+            Self::SelectSuggestion
+        )
+    }
+    
+    /// Check if this action moves the cursor
+    pub fn is_movement(&self) -> bool {
+        matches!(self,
+            Self::MoveLeft | Self::MoveRight | Self::MoveUp | Self::MoveDown |
+            Self::MoveLineStart | Self::MoveLineEnd | Self::MoveFirstLine | Self::MoveLastLine |
+            Self::MoveWordNext | Self::MoveWordEnd | Self::MoveWordPrev | Self::MoveWordEndPrev |
+            Self::NextField | Self::PrevField
+        )
+    }
+    
+    /// Check if this is a suggestion-related action
+    pub fn is_suggestion(&self) -> bool {
+        matches!(self,
+            Self::SuggestionUp | Self::SuggestionDown | 
+            Self::SelectSuggestion | Self::ExitSuggestions
+        )
+    }
+}
+
+/// Result of executing a canvas action
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum ActionResult {
+    /// Action completed successfully, optional message for user feedback
+    Success(Option<String>),
+    /// Action was handled by custom feature logic
+    HandledByFeature(String),
+    /// Action requires additional context or cannot be performed
+    RequiresContext(String),
+    /// Action failed with error message
+    Error(String),
+}
+
+impl ActionResult {
+    pub fn success() -> Self {
+        Self::Success(None)
+    }
+    
+    pub fn success_with_message(msg: impl Into<String>) -> Self {
+        Self::Success(Some(msg.into()))
+    }
+    
+    pub fn error(msg: impl Into<String>) -> Self {
+        Self::Error(msg.into())
+    }
+    
+    pub fn is_success(&self) -> bool {
+        matches!(self, Self::Success(_) | Self::HandledByFeature(_))
+    }
+    
+    pub fn message(&self) -> Option<&str> {
+        match self {
+            Self::Success(msg) => msg.as_deref(),
+            Self::HandledByFeature(msg) => Some(msg),
+            Self::RequiresContext(msg) => Some(msg),
+            Self::Error(msg) => Some(msg),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    
+    #[test]
+    fn test_action_from_string() {
+        assert_eq!(CanvasAction::from_string("move_left"), CanvasAction::MoveLeft);
+        assert_eq!(CanvasAction::from_string("delete_char_backward"), CanvasAction::DeleteBackward);
+        assert_eq!(CanvasAction::from_string("unknown"), CanvasAction::Custom("unknown".to_string()));
+    }
+    
+    #[test]
+    fn test_action_from_key() {
+        assert_eq!(CanvasAction::from_key(KeyCode::Char('a')), Some(CanvasAction::InsertChar('a')));
+        assert_eq!(CanvasAction::from_key(KeyCode::Left), Some(CanvasAction::MoveLeft));
+        assert_eq!(CanvasAction::from_key(KeyCode::Backspace), Some(CanvasAction::DeleteBackward));
+        assert_eq!(CanvasAction::from_key(KeyCode::F(1)), None);
+    }
+    
+    #[test]
+    fn test_action_properties() {
+        assert!(CanvasAction::InsertChar('a').is_modifying());
+        assert!(!CanvasAction::MoveLeft.is_modifying());
+        
+        assert!(CanvasAction::MoveLeft.is_movement());
+        assert!(!CanvasAction::InsertChar('a').is_movement());
+        
+        assert!(CanvasAction::SuggestionUp.is_suggestion());
+        assert!(!CanvasAction::MoveLeft.is_suggestion());
+    }
+}

canvas/src/config.rs

@@ -0,0 +1,480 @@
+// canvas/src/config.rs
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use crossterm::event::{KeyCode, KeyModifiers};
+use anyhow::{Context, Result};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CanvasConfig {
+    #[serde(default)]
+    pub keybindings: CanvasKeybindings,
+    #[serde(default)]
+    pub behavior: CanvasBehavior,
+    #[serde(default)]
+    pub appearance: CanvasAppearance,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+pub struct CanvasKeybindings {
+    #[serde(default)]
+    pub read_only: HashMap<String, Vec<String>>,
+    #[serde(default)]
+    pub edit: HashMap<String, Vec<String>>,
+    #[serde(default)]
+    pub suggestions: HashMap<String, Vec<String>>,
+    #[serde(default)]
+    pub global: HashMap<String, Vec<String>>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CanvasBehavior {
+    #[serde(default = "default_wrap_around")]
+    pub wrap_around_fields: bool,
+    #[serde(default = "default_auto_save")]
+    pub auto_save_on_field_change: bool,
+    #[serde(default = "default_word_chars")]
+    pub word_chars: String,
+    #[serde(default = "default_suggestion_limit")]
+    pub max_suggestions: usize,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CanvasAppearance {
+    #[serde(default = "default_cursor_style")]
+    pub cursor_style: String, // "block", "bar", "underline"
+    #[serde(default = "default_show_field_numbers")]
+    pub show_field_numbers: bool,
+    #[serde(default = "default_highlight_current_field")]
+    pub highlight_current_field: bool,
+}
+
+// Default values
+fn default_wrap_around() -> bool { true }
+fn default_auto_save() -> bool { false }
+fn default_word_chars() -> String { "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_".to_string() }
+fn default_suggestion_limit() -> usize { 10 }
+fn default_cursor_style() -> String { "block".to_string() }
+fn default_show_field_numbers() -> bool { false }
+fn default_highlight_current_field() -> bool { true }
+
+impl Default for CanvasBehavior {
+    fn default() -> Self {
+        Self {
+            wrap_around_fields: default_wrap_around(),
+            auto_save_on_field_change: default_auto_save(),
+            word_chars: default_word_chars(),
+            max_suggestions: default_suggestion_limit(),
+        }
+    }
+}
+
+impl Default for CanvasAppearance {
+    fn default() -> Self {
+        Self {
+            cursor_style: default_cursor_style(),
+            show_field_numbers: default_show_field_numbers(),
+            highlight_current_field: default_highlight_current_field(),
+        }
+    }
+}
+
+impl Default for CanvasConfig {
+    fn default() -> Self {
+        Self {
+            keybindings: CanvasKeybindings::with_vim_defaults(),
+            behavior: CanvasBehavior::default(),
+            appearance: CanvasAppearance::default(),
+        }
+    }
+}
+
+impl CanvasKeybindings {
+    pub fn with_vim_defaults() -> Self {
+        let mut keybindings = Self::default();
+
+        // Read-only mode (vim-style navigation)
+        keybindings.read_only.insert("move_left".to_string(), vec!["h".to_string()]);
+        keybindings.read_only.insert("move_right".to_string(), vec!["l".to_string()]);
+        keybindings.read_only.insert("move_up".to_string(), vec!["k".to_string()]);
+        keybindings.read_only.insert("move_down".to_string(), vec!["j".to_string()]);
+        keybindings.read_only.insert("move_word_next".to_string(), vec!["w".to_string()]);
+        keybindings.read_only.insert("move_word_end".to_string(), vec!["e".to_string()]);
+        keybindings.read_only.insert("move_word_prev".to_string(), vec!["b".to_string()]);
+        keybindings.read_only.insert("move_word_end_prev".to_string(), vec!["ge".to_string()]);
+        keybindings.read_only.insert("move_line_start".to_string(), vec!["0".to_string()]);
+        keybindings.read_only.insert("move_line_end".to_string(), vec!["$".to_string()]);
+        keybindings.read_only.insert("move_first_line".to_string(), vec!["gg".to_string()]);
+        keybindings.read_only.insert("move_last_line".to_string(), vec!["G".to_string()]);
+        keybindings.read_only.insert("next_field".to_string(), vec!["Tab".to_string()]);
+        keybindings.read_only.insert("prev_field".to_string(), vec!["Shift+Tab".to_string()]);
+
+        // Edit mode
+        keybindings.edit.insert("delete_char_backward".to_string(), vec!["Backspace".to_string()]);
+        keybindings.edit.insert("delete_char_forward".to_string(), vec!["Delete".to_string()]);
+        keybindings.edit.insert("move_left".to_string(), vec!["Left".to_string()]);
+        keybindings.edit.insert("move_right".to_string(), vec!["Right".to_string()]);
+        keybindings.edit.insert("move_up".to_string(), vec!["Up".to_string()]);
+        keybindings.edit.insert("move_down".to_string(), vec!["Down".to_string()]);
+        keybindings.edit.insert("move_line_start".to_string(), vec!["Home".to_string()]);
+        keybindings.edit.insert("move_line_end".to_string(), vec!["End".to_string()]);
+        keybindings.edit.insert("move_word_next".to_string(), vec!["Ctrl+Right".to_string()]);
+        keybindings.edit.insert("move_word_prev".to_string(), vec!["Ctrl+Left".to_string()]);
+        keybindings.edit.insert("next_field".to_string(), vec!["Tab".to_string()]);
+        keybindings.edit.insert("prev_field".to_string(), vec!["Shift+Tab".to_string()]);
+
+        // Suggestions
+        keybindings.suggestions.insert("suggestion_up".to_string(), vec!["Up".to_string(), "Ctrl+p".to_string()]);
+        keybindings.suggestions.insert("suggestion_down".to_string(), vec!["Down".to_string(), "Ctrl+n".to_string()]);
+        keybindings.suggestions.insert("select_suggestion".to_string(), vec!["Enter".to_string(), "Tab".to_string()]);
+        keybindings.suggestions.insert("exit_suggestions".to_string(), vec!["Esc".to_string()]);
+
+        // Global (works in both modes)
+        keybindings.global.insert("move_up".to_string(), vec!["Up".to_string()]);
+        keybindings.global.insert("move_down".to_string(), vec!["Down".to_string()]);
+
+        keybindings
+    }
+
+    pub fn with_emacs_defaults() -> Self {
+        let mut keybindings = Self::default();
+
+        // Emacs-style bindings
+        keybindings.read_only.insert("move_left".to_string(), vec!["Ctrl+b".to_string()]);
+        keybindings.read_only.insert("move_right".to_string(), vec!["Ctrl+f".to_string()]);
+        keybindings.read_only.insert("move_up".to_string(), vec!["Ctrl+p".to_string()]);
+        keybindings.read_only.insert("move_down".to_string(), vec!["Ctrl+n".to_string()]);
+        keybindings.read_only.insert("move_word_next".to_string(), vec!["Alt+f".to_string()]);
+        keybindings.read_only.insert("move_word_prev".to_string(), vec!["Alt+b".to_string()]);
+        keybindings.read_only.insert("move_line_start".to_string(), vec!["Ctrl+a".to_string()]);
+        keybindings.read_only.insert("move_line_end".to_string(), vec!["Ctrl+e".to_string()]);
+
+        keybindings.edit.insert("delete_char_backward".to_string(), vec!["Ctrl+h".to_string(), "Backspace".to_string()]);
+        keybindings.edit.insert("delete_char_forward".to_string(), vec!["Ctrl+d".to_string(), "Delete".to_string()]);
+
+        keybindings
+    }
+}
+
+impl CanvasConfig {
+    /// Load from canvas_config.toml or fallback to vim defaults
+    pub fn load() -> Self {
+        // Try to load canvas_config.toml from current directory
+        if let Ok(config) = Self::from_file(std::path::Path::new("canvas_config.toml")) {
+            return config;
+        }
+        
+        // Fallback to vim defaults
+        Self::default()
+    }
+
+    /// Load from TOML string
+    pub fn from_toml(toml_str: &str) -> Result<Self> {
+        toml::from_str(toml_str)
+            .with_context(|| "Failed to parse canvas config TOML")
+    }
+
+    /// Load from file
+    pub fn from_file(path: &std::path::Path) -> Result<Self> {
+        let contents = std::fs::read_to_string(path)
+            .with_context(|| format!("Failed to read config file: {:?}", path))?;
+        Self::from_toml(&contents)
+    }
+
+    /// Get action for key in read-only mode
+    pub fn get_read_only_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_in_mode(&self.keybindings.read_only, key, modifiers)
+            .or_else(|| self.get_action_in_mode(&self.keybindings.global, key, modifiers))
+    }
+
+    /// Get action for key in edit mode
+    pub fn get_edit_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_in_mode(&self.keybindings.edit, key, modifiers)
+            .or_else(|| self.get_action_in_mode(&self.keybindings.global, key, modifiers))
+    }
+
+    /// Get action for key in suggestions mode
+    pub fn get_suggestion_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_in_mode(&self.keybindings.suggestions, key, modifiers)
+    }
+
+    /// Get action for key (mode-aware)
+    pub fn get_action_for_key(&self, key: KeyCode, modifiers: KeyModifiers, is_edit_mode: bool, has_suggestions: bool) -> Option<&str> {
+        // Suggestions take priority when active
+        if has_suggestions {
+            if let Some(action) = self.get_suggestion_action(key, modifiers) {
+                return Some(action);
+            }
+        }
+
+        // Then check mode-specific
+        if is_edit_mode {
+            self.get_edit_action(key, modifiers)
+        } else {
+            self.get_read_only_action(key, modifiers)
+        }
+    }
+
+    fn get_action_in_mode<'a>(&self, mode_bindings: &'a HashMap<String, Vec<String>>, key: KeyCode, modifiers: KeyModifiers) -> Option<&'a str> {
+        for (action, bindings) in mode_bindings {
+            for binding in bindings {
+                if self.matches_keybinding(binding, key, modifiers) {
+                    return Some(action);
+                }
+            }
+        }
+        None
+    }
+
+    fn matches_keybinding(&self, binding: &str, key: KeyCode, modifiers: KeyModifiers) -> bool {
+        // Special handling for shift+character combinations
+        if binding.to_lowercase().starts_with("shift+") {
+            let parts: Vec<&str> = binding.split('+').collect();
+            if parts.len() == 2 && parts[1].len() == 1 {
+                let expected_lowercase = parts[1].chars().next().unwrap().to_lowercase().next().unwrap();
+                let expected_uppercase = expected_lowercase.to_uppercase().next().unwrap();
+                if let KeyCode::Char(actual_char) = key {
+                    if actual_char == expected_uppercase && modifiers.contains(KeyModifiers::SHIFT) {
+                        return true;
+                    }
+                }
+            }
+        }
+
+        // Handle Shift+Tab -> BackTab
+        if binding.to_lowercase() == "shift+tab" && key == KeyCode::BackTab && modifiers.is_empty() {
+            return true;
+        }
+
+        // Handle multi-character bindings (all standard keys without modifiers)
+        if binding.len() > 1 && !binding.contains('+') {
+            return match binding.to_lowercase().as_str() {
+                // Navigation keys
+                "left" => key == KeyCode::Left,
+                "right" => key == KeyCode::Right,
+                "up" => key == KeyCode::Up,
+                "down" => key == KeyCode::Down,
+                "home" => key == KeyCode::Home,
+                "end" => key == KeyCode::End,
+                "pageup" | "pgup" => key == KeyCode::PageUp,
+                "pagedown" | "pgdn" => key == KeyCode::PageDown,
+                
+                // Editing keys
+                "insert" | "ins" => key == KeyCode::Insert,
+                "delete" | "del" => key == KeyCode::Delete,
+                "backspace" => key == KeyCode::Backspace,
+                
+                // Tab keys
+                "tab" => key == KeyCode::Tab,
+                "backtab" => key == KeyCode::BackTab,
+                
+                // Special keys
+                "enter" | "return" => key == KeyCode::Enter,
+                "escape" | "esc" => key == KeyCode::Esc,
+                "space" => key == KeyCode::Char(' '),
+                
+                // Function keys F1-F24
+                "f1" => key == KeyCode::F(1),
+                "f2" => key == KeyCode::F(2),
+                "f3" => key == KeyCode::F(3),
+                "f4" => key == KeyCode::F(4),
+                "f5" => key == KeyCode::F(5),
+                "f6" => key == KeyCode::F(6),
+                "f7" => key == KeyCode::F(7),
+                "f8" => key == KeyCode::F(8),
+                "f9" => key == KeyCode::F(9),
+                "f10" => key == KeyCode::F(10),
+                "f11" => key == KeyCode::F(11),
+                "f12" => key == KeyCode::F(12),
+                "f13" => key == KeyCode::F(13),
+                "f14" => key == KeyCode::F(14),
+                "f15" => key == KeyCode::F(15),
+                "f16" => key == KeyCode::F(16),
+                "f17" => key == KeyCode::F(17),
+                "f18" => key == KeyCode::F(18),
+                "f19" => key == KeyCode::F(19),
+                "f20" => key == KeyCode::F(20),
+                "f21" => key == KeyCode::F(21),
+                "f22" => key == KeyCode::F(22),
+                "f23" => key == KeyCode::F(23),
+                "f24" => key == KeyCode::F(24),
+                
+                // Lock keys (may not work reliably in all terminals)
+                "capslock" => key == KeyCode::CapsLock,
+                "scrolllock" => key == KeyCode::ScrollLock,
+                "numlock" => key == KeyCode::NumLock,
+                
+                // System keys
+                "printscreen" => key == KeyCode::PrintScreen,
+                "pause" => key == KeyCode::Pause,
+                "menu" => key == KeyCode::Menu,
+                "keypadbegin" => key == KeyCode::KeypadBegin,
+                
+                // Media keys (rarely supported but included for completeness)
+                "mediaplay" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Play),
+                "mediapause" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Pause),
+                "mediaplaypause" => key == KeyCode::Media(crossterm::event::MediaKeyCode::PlayPause),
+                "mediareverse" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Reverse),
+                "mediastop" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Stop),
+                "mediafastforward" => key == KeyCode::Media(crossterm::event::MediaKeyCode::FastForward),
+                "mediarewind" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Rewind),
+                "mediatracknext" => key == KeyCode::Media(crossterm::event::MediaKeyCode::TrackNext),
+                "mediatrackprevious" => key == KeyCode::Media(crossterm::event::MediaKeyCode::TrackPrevious),
+                "mediarecord" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Record),
+                "medialowervolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::LowerVolume),
+                "mediaraisevolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::RaiseVolume),
+                "mediamutevolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::MuteVolume),
+                
+                // Modifier keys (these work better as part of combinations)
+                "leftshift" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftShift),
+                "leftcontrol" | "leftctrl" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftControl),
+                "leftalt" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftAlt),
+                "leftsuper" | "leftwindows" | "leftcmd" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftSuper),
+                "lefthyper" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftHyper),
+                "leftmeta" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftMeta),
+                "rightshift" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightShift),
+                "rightcontrol" | "rightctrl" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightControl),
+                "rightalt" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightAlt),
+                "rightsuper" | "rightwindows" | "rightcmd" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightSuper),
+                "righthyper" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightHyper),
+                "rightmeta" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightMeta),
+                "isolevel3shift" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::IsoLevel3Shift),
+                "isolevel5shift" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::IsoLevel5Shift),
+                
+                // Multi-key sequences need special handling
+                "gg" => false, // This needs sequence handling
+                _ => {
+                    // Handle single characters and punctuation
+                    if binding.len() == 1 {
+                        if let Some(c) = binding.chars().next() {
+                            key == KeyCode::Char(c)
+                        } else {
+                            false
+                        }
+                    } else {
+                        false
+                    }
+                }
+            };
+        }
+
+        // Handle modifier combinations (like "Ctrl+F5", "Alt+Shift+A")
+        let parts: Vec<&str> = binding.split('+').collect();
+        let mut expected_modifiers = KeyModifiers::empty();
+        let mut expected_key = None;
+
+        for part in parts {
+            match part.to_lowercase().as_str() {
+                // Modifiers
+                "ctrl" | "control" => expected_modifiers |= KeyModifiers::CONTROL,
+                "shift" => expected_modifiers |= KeyModifiers::SHIFT,
+                "alt" => expected_modifiers |= KeyModifiers::ALT,
+                "super" | "windows" | "cmd" => expected_modifiers |= KeyModifiers::SUPER,
+                "hyper" => expected_modifiers |= KeyModifiers::HYPER,
+                "meta" => expected_modifiers |= KeyModifiers::META,
+                
+                // Navigation keys
+                "left" => expected_key = Some(KeyCode::Left),
+                "right" => expected_key = Some(KeyCode::Right),
+                "up" => expected_key = Some(KeyCode::Up),
+                "down" => expected_key = Some(KeyCode::Down),
+                "home" => expected_key = Some(KeyCode::Home),
+                "end" => expected_key = Some(KeyCode::End),
+                "pageup" | "pgup" => expected_key = Some(KeyCode::PageUp),
+                "pagedown" | "pgdn" => expected_key = Some(KeyCode::PageDown),
+                
+                // Editing keys
+                "insert" | "ins" => expected_key = Some(KeyCode::Insert),
+                "delete" | "del" => expected_key = Some(KeyCode::Delete),
+                "backspace" => expected_key = Some(KeyCode::Backspace),
+                
+                // Tab keys
+                "tab" => expected_key = Some(KeyCode::Tab),
+                "backtab" => expected_key = Some(KeyCode::BackTab),
+                
+                // Special keys
+                "enter" | "return" => expected_key = Some(KeyCode::Enter),
+                "escape" | "esc" => expected_key = Some(KeyCode::Esc),
+                "space" => expected_key = Some(KeyCode::Char(' ')),
+                
+                // Function keys
+                "f1" => expected_key = Some(KeyCode::F(1)),
+                "f2" => expected_key = Some(KeyCode::F(2)),
+                "f3" => expected_key = Some(KeyCode::F(3)),
+                "f4" => expected_key = Some(KeyCode::F(4)),
+                "f5" => expected_key = Some(KeyCode::F(5)),
+                "f6" => expected_key = Some(KeyCode::F(6)),
+                "f7" => expected_key = Some(KeyCode::F(7)),
+                "f8" => expected_key = Some(KeyCode::F(8)),
+                "f9" => expected_key = Some(KeyCode::F(9)),
+                "f10" => expected_key = Some(KeyCode::F(10)),
+                "f11" => expected_key = Some(KeyCode::F(11)),
+                "f12" => expected_key = Some(KeyCode::F(12)),
+                "f13" => expected_key = Some(KeyCode::F(13)),
+                "f14" => expected_key = Some(KeyCode::F(14)),
+                "f15" => expected_key = Some(KeyCode::F(15)),
+                "f16" => expected_key = Some(KeyCode::F(16)),
+                "f17" => expected_key = Some(KeyCode::F(17)),
+                "f18" => expected_key = Some(KeyCode::F(18)),
+                "f19" => expected_key = Some(KeyCode::F(19)),
+                "f20" => expected_key = Some(KeyCode::F(20)),
+                "f21" => expected_key = Some(KeyCode::F(21)),
+                "f22" => expected_key = Some(KeyCode::F(22)),
+                "f23" => expected_key = Some(KeyCode::F(23)),
+                "f24" => expected_key = Some(KeyCode::F(24)),
+                
+                // Lock keys
+                "capslock" => expected_key = Some(KeyCode::CapsLock),
+                "scrolllock" => expected_key = Some(KeyCode::ScrollLock),
+                "numlock" => expected_key = Some(KeyCode::NumLock),
+                
+                // System keys
+                "printscreen" => expected_key = Some(KeyCode::PrintScreen),
+                "pause" => expected_key = Some(KeyCode::Pause),
+                "menu" => expected_key = Some(KeyCode::Menu),
+                "keypadbegin" => expected_key = Some(KeyCode::KeypadBegin),
+                
+                // Single character (letters, numbers, punctuation)
+                part => {
+                    if part.len() == 1 {
+                        if let Some(c) = part.chars().next() {
+                            expected_key = Some(KeyCode::Char(c));
+                        }
+                    }
+                }
+            }
+        }
+
+        modifiers == expected_modifiers && Some(key) == expected_key
+    }
+
+    /// Convenience method to create vim preset
+    pub fn vim_preset() -> Self {
+        Self {
+            keybindings: CanvasKeybindings::with_vim_defaults(),
+            behavior: CanvasBehavior::default(),
+            appearance: CanvasAppearance::default(),
+        }
+    }
+    
+    /// Convenience method to create emacs preset
+    pub fn emacs_preset() -> Self {
+        Self {
+            keybindings: CanvasKeybindings::with_emacs_defaults(),
+            behavior: CanvasBehavior::default(),
+            appearance: CanvasAppearance::default(),
+        }
+    }
+
+    /// Debug method to print loaded keybindings
+    pub fn debug_keybindings(&self) {
+        println!("📋 Canvas keybindings loaded:");
+        println!("  Read-only: {} actions", self.keybindings.read_only.len());
+        println!("  Edit: {} actions", self.keybindings.edit.len());
+        println!("  Suggestions: {} actions", self.keybindings.suggestions.len());
+        println!("  Global: {} actions", self.keybindings.global.len());
+    }
+}
+
+// Re-export for convenience
+pub use crate::actions::CanvasAction;
+pub use crate::dispatcher::ActionDispatcher;

canvas/src/dispatcher.rs

@@ -0,0 +1,180 @@
+// canvas/src/dispatcher.rs
+
+use crate::state::CanvasState;
+use crate::actions::{CanvasAction, ActionResult, execute_canvas_action};
+
+/// High-level action dispatcher that coordinates between different action types
+pub struct ActionDispatcher;
+
+impl ActionDispatcher {
+    /// Dispatch any action to the appropriate handler
+    pub async fn dispatch<S: CanvasState>(
+        action: CanvasAction,
+        state: &mut S,
+        ideal_cursor_column: &mut usize,
+    ) -> anyhow::Result<ActionResult> {
+        execute_canvas_action(action, state, ideal_cursor_column).await
+    }
+
+    /// Quick action dispatch from KeyCode
+    pub async fn dispatch_key<S: CanvasState>(
+        key: crossterm::event::KeyCode,
+        state: &mut S,
+        ideal_cursor_column: &mut usize,
+    ) -> anyhow::Result<Option<ActionResult>> {
+        if let Some(action) = CanvasAction::from_key(key) {
+            let result = Self::dispatch(action, state, ideal_cursor_column).await?;
+            Ok(Some(result))
+        } else {
+            Ok(None)
+        }
+    }
+
+    /// Batch dispatch multiple actions
+    pub async fn dispatch_batch<S: CanvasState>(
+        actions: Vec<CanvasAction>,
+        state: &mut S,
+        ideal_cursor_column: &mut usize,
+    ) -> anyhow::Result<Vec<ActionResult>> {
+        let mut results = Vec::new();
+        for action in actions {
+            let result = Self::dispatch(action, state, ideal_cursor_column).await?;
+            let is_success = result.is_success(); // Check success before moving
+            results.push(result);
+
+            // Stop on first error
+            if !is_success {
+                break;
+            }
+        }
+        Ok(results)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::actions::CanvasAction;
+
+    // Simple test implementation
+    struct TestFormState {
+        current_field: usize,
+        cursor_pos: usize,
+        inputs: Vec<String>,
+        field_names: Vec<String>,
+        has_changes: bool,
+    }
+
+    impl TestFormState {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                inputs: vec!["".to_string(), "".to_string()],
+                field_names: vec!["username".to_string(), "password".to_string()],
+                has_changes: false,
+            }
+        }
+    }
+
+    impl CanvasState for TestFormState {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.inputs[self.current_field] }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.inputs[self.current_field] }
+        fn inputs(&self) -> Vec<&String> { self.inputs.iter().collect() }
+        fn fields(&self) -> Vec<&str> { self.field_names.iter().map(|s| s.as_str()).collect() }
+
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+
+        // Custom action handling for testing
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &crate::state::ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(s) if s == "test_custom" => {
+                    Some("Custom action handled".to_string())
+                }
+                _ => None,
+            }
+        }
+    }
+
+    #[tokio::test]
+    async fn test_typed_action_dispatch() {
+        let mut state = TestFormState::new();
+        let mut ideal_cursor = 0;
+
+        // Test character insertion
+        let result = ActionDispatcher::dispatch(
+            CanvasAction::InsertChar('a'),
+            &mut state,
+            &mut ideal_cursor,
+        ).await.unwrap();
+
+        assert!(result.is_success());
+        assert_eq!(state.get_current_input(), "a");
+        assert_eq!(state.cursor_pos, 1);
+        assert!(state.has_changes);
+    }
+
+    #[tokio::test]
+    async fn test_key_dispatch() {
+        let mut state = TestFormState::new();
+        let mut ideal_cursor = 0;
+
+        let result = ActionDispatcher::dispatch_key(
+            crossterm::event::KeyCode::Char('b'),
+            &mut state,
+            &mut ideal_cursor,
+        ).await.unwrap();
+
+        assert!(result.is_some());
+        assert!(result.unwrap().is_success());
+        assert_eq!(state.get_current_input(), "b");
+    }
+
+    #[tokio::test]
+    async fn test_custom_action() {
+        let mut state = TestFormState::new();
+        let mut ideal_cursor = 0;
+
+        let result = ActionDispatcher::dispatch(
+            CanvasAction::Custom("test_custom".to_string()),
+            &mut state,
+            &mut ideal_cursor,
+        ).await.unwrap();
+
+        match result {
+            ActionResult::HandledByFeature(msg) => {
+                assert_eq!(msg, "Custom action handled");
+            }
+            _ => panic!("Expected HandledByFeature result"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_batch_dispatch() {
+        let mut state = TestFormState::new();
+        let mut ideal_cursor = 0;
+
+        let actions = vec![
+            CanvasAction::InsertChar('h'),
+            CanvasAction::InsertChar('i'),
+            CanvasAction::MoveLeft,
+            CanvasAction::InsertChar('e'),
+        ];
+
+        let results = ActionDispatcher::dispatch_batch(
+            actions,
+            &mut state,
+            &mut ideal_cursor,
+        ).await.unwrap();
+
+        assert_eq!(results.len(), 4);
+        assert!(results.iter().all(|r| r.is_success()));
+        assert_eq!(state.get_current_input(), "hei");
+    }
+}

canvas/src/lib.rs

@@ -0,0 +1,36 @@
+// canvas/src/lib.rs
+//! Canvas - A reusable text editing and form canvas system
+//!
+//! This crate provides a generic canvas abstraction for building text-based interfaces
+//! with multiple input fields, cursor management, and mode-based editing.
+
+pub mod state;
+pub mod actions;
+pub mod modes;
+pub mod config;
+pub mod suggestions;
+pub mod dispatcher;
+
+// Re-export the main types for easy use
+pub use state::{CanvasState, ActionContext};
+pub use actions::{CanvasAction, ActionResult, execute_edit_action, execute_canvas_action};
+pub use modes::{AppMode, ModeManager, HighlightState};
+pub use suggestions::SuggestionState;
+pub use dispatcher::ActionDispatcher;
+
+// High-level convenience API
+pub mod prelude {
+    pub use crate::{
+        CanvasState,
+        ActionContext,
+        CanvasAction,
+        ActionResult,
+        execute_edit_action,
+        execute_canvas_action,
+        ActionDispatcher,
+        AppMode,
+        ModeManager,
+        HighlightState,
+        SuggestionState,
+    };
+}

canvas/src/modes/highlight.rs

@@ -0,0 +1,15 @@
+// src/state/app/highlight.rs
+// canvas/src/modes/highlight.rs
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum HighlightState {
+    Off,
+    Characterwise { anchor: (usize, usize) }, // (field_index, char_position)
+    Linewise { anchor_line: usize },          // field_index
+}
+
+impl Default for HighlightState {
+    fn default() -> Self {
+        HighlightState::Off
+    }
+}

canvas/src/modes/manager.rs

@@ -0,0 +1,33 @@
+// src/modes/handlers/mode_manager.rs
+// canvas/src/modes/manager.rs
+
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum AppMode {
+    General,   // For intro and admin screens
+    ReadOnly,  // Canvas read-only mode
+    Edit,      // Canvas edit mode
+    Highlight, // Canvas highlight/visual mode
+    Command,   // Command mode overlay
+}
+
+pub struct ModeManager;
+
+impl ModeManager {
+    // Mode transition rules
+    pub fn can_enter_command_mode(current_mode: AppMode) -> bool {
+        !matches!(current_mode, AppMode::Edit)
+    }
+
+    pub fn can_enter_edit_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::ReadOnly)
+    }
+
+    pub fn can_enter_read_only_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::Edit | AppMode::Command | AppMode::Highlight)
+    }
+
+    pub fn can_enter_highlight_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::ReadOnly)
+    }
+}

canvas/src/modes/mod.rs

@@ -0,0 +1,7 @@
+// canvas/src/modes/mod.rs
+
+pub mod highlight;
+pub mod manager;
+
+pub use highlight::HighlightState;
+pub use manager::{AppMode, ModeManager};

canvas/src/state.rs

@@ -0,0 +1,83 @@
+// canvas/src/state.rs
+
+use crate::actions::CanvasAction;
+
+/// Context passed to feature-specific action handlers
+#[derive(Debug)]
+pub struct ActionContext {
+    pub key_code: Option<crossterm::event::KeyCode>, // Kept for backwards compatibility
+    pub ideal_cursor_column: usize,
+    pub current_input: String,
+    pub current_field: usize,
+}
+
+/// Core trait that any form-like state must implement to work with the canvas system.
+/// This enables the same mode behaviors (edit, read-only, highlight) to work across
+/// any implementation - login forms, data entry forms, configuration screens, etc.
+pub trait CanvasState {
+    // --- Core Navigation ---
+    fn current_field(&self) -> usize;
+    fn current_cursor_pos(&self) -> usize;
+    fn set_current_field(&mut self, index: usize);
+    fn set_current_cursor_pos(&mut self, pos: usize);
+
+    // --- Data Access ---
+    fn get_current_input(&self) -> &str;
+    fn get_current_input_mut(&mut self) -> &mut String;
+    fn inputs(&self) -> Vec<&String>;
+    fn fields(&self) -> Vec<&str>;
+
+    // --- State Management ---
+    fn has_unsaved_changes(&self) -> bool;
+    fn set_has_unsaved_changes(&mut self, changed: bool);
+
+    // --- Autocomplete/Suggestions (Optional) ---
+    fn get_suggestions(&self) -> Option<&[String]> {
+        None
+    }
+    fn get_selected_suggestion_index(&self) -> Option<usize> {
+        None
+    }
+    fn set_selected_suggestion_index(&mut self, _index: Option<usize>) {
+        // Default: no-op (override if you support suggestions)
+    }
+    fn activate_suggestions(&mut self, _suggestions: Vec<String>) {
+        // Default: no-op (override if you support suggestions)
+    }
+    fn deactivate_suggestions(&mut self) {
+        // Default: no-op (override if you support suggestions)
+    }
+
+    // --- Feature-specific action handling (NEW: Type-safe) ---
+    fn handle_feature_action(&mut self, _action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        None // Default: no feature-specific handling
+    }
+
+    // --- Legacy string-based action handling (for backwards compatibility) ---
+    fn handle_feature_action_legacy(&mut self, action: &str, context: &ActionContext) -> Option<String> {
+        // Convert string to typed action and delegate
+        let typed_action = match action {
+            "insert_char" => {
+                // This is tricky - we need the char from the KeyCode in context
+                if let Some(crossterm::event::KeyCode::Char(c)) = context.key_code {
+                    CanvasAction::InsertChar(c)
+                } else {
+                    CanvasAction::Custom(action.to_string())
+                }
+            }
+            _ => CanvasAction::from_string(action),
+        };
+        self.handle_feature_action(&typed_action, context)
+    }
+
+    // --- Display Overrides (for links, computed values, etc.) ---
+    fn get_display_value_for_field(&self, index: usize) -> &str {
+        self.inputs()
+            .get(index)
+            .map(|s| s.as_str())
+            .unwrap_or("")
+    }
+    fn has_display_override(&self, _index: usize) -> bool {
+        false
+    }
+}

canvas/src/suggestions.rs

@@ -0,0 +1,67 @@
+// canvas/src/suggestions.rs
+
+/// Generic suggestion system that can be implemented by any CanvasState
+#[derive(Debug, Clone)]
+pub struct SuggestionState {
+    pub suggestions: Vec<String>,
+    pub selected_index: Option<usize>,
+    pub is_active: bool,
+    pub trigger_chars: Vec<char>, // Characters that trigger suggestions
+}
+
+impl Default for SuggestionState {
+    fn default() -> Self {
+        Self {
+            suggestions: Vec::new(),
+            selected_index: None,
+            is_active: false,
+            trigger_chars: vec![], // No auto-trigger by default
+        }
+    }
+}
+
+impl SuggestionState {
+    pub fn new(trigger_chars: Vec<char>) -> Self {
+        Self {
+            trigger_chars,
+            ..Default::default()
+        }
+    }
+    
+    pub fn activate_with_suggestions(&mut self, suggestions: Vec<String>) {
+        self.suggestions = suggestions;
+        self.is_active = !self.suggestions.is_empty();
+        self.selected_index = if self.is_active { Some(0) } else { None };
+    }
+    
+    pub fn deactivate(&mut self) {
+        self.suggestions.clear();
+        self.selected_index = None;
+        self.is_active = false;
+    }
+    
+    pub fn select_next(&mut self) {
+        if !self.suggestions.is_empty() {
+            let current = self.selected_index.unwrap_or(0);
+            self.selected_index = Some((current + 1) % self.suggestions.len());
+        }
+    }
+    
+    pub fn select_previous(&mut self) {
+        if !self.suggestions.is_empty() {
+            let current = self.selected_index.unwrap_or(0);
+            self.selected_index = Some(
+                if current == 0 { self.suggestions.len() - 1 } else { current - 1 }
+            );
+        }
+    }
+    
+    pub fn get_selected(&self) -> Option<&String> {
+        self.selected_index
+            .and_then(|idx| self.suggestions.get(idx))
+    }
+    
+    pub fn should_trigger(&self, c: char) -> bool {
+        self.trigger_chars.contains(&c)
+    }
+}

client/Cargo.toml

@@ -5,15 +5,36 @@ edition.workspace = true
 license.workspace = true
 
 [dependencies]
+anyhow = { workspace = true }
+async-trait = "0.1.88"
 common = { path = "../common" }
+canvas = { path = "../canvas" }
 
-crossterm = "0.28.1"
+ratatui = { workspace = true }
+crossterm = { workspace = true }
+prost-types = { workspace = true }
 dirs = "6.0.0"
 dotenvy = "0.15.7"
+lazy_static = "1.5.0"
 prost = "0.13.5"
-ratatui = "0.29.0"
-serde = { version = "1.0.218", features = ["derive"] }
-tokio = { version = "1.43.0", features = ["full", "macros"] }
-toml = "0.8.20"
-tonic = "0.12.3"
+serde = { version = "1.0.219", features = ["derive"] }
+serde_json = "1.0.140"
+time = "0.3.41"
+tokio = { version = "1.44.2", features = ["full", "macros"] }
+toml = { workspace = true }
+tonic = "0.13.0"
 tracing = "0.1.41"
+tracing-subscriber = "0.3.19"
+tui-textarea = { version = "0.7.0", features = ["crossterm", "ratatui", "search"] }
+unicode-segmentation = "1.12.0"
+unicode-width = "0.2.0"
+
+[features]
+default = []
+ui-debug = []
+
+[dev-dependencies]
+rstest = "0.25.0"
+tokio-test = "0.4.4"
+uuid = { version = "1.17.0", features = ["v4"] }
+futures = "0.3.31"

client/canvas_config.toml

@@ -0,0 +1,56 @@
+# canvas_config.toml - Complete Canvas Configuration
+
+[behavior]
+wrap_around_fields = true
+auto_save_on_field_change = false
+word_chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_"
+max_suggestions = 6
+
+[appearance]
+cursor_style = "block"  # "block", "bar", "underline"
+show_field_numbers = false
+highlight_current_field = true
+
+# Read-only mode keybindings (vim-style)
+[keybindings.read_only]
+move_left = ["h"]
+move_right = ["l"] 
+move_up = ["k"]
+move_down = ["j"]
+move_word_next = ["w"]
+move_word_end = ["e"]
+move_word_prev = ["b"]
+move_word_end_prev = ["ge"]
+move_line_start = ["0"]
+move_line_end = ["$"]
+move_first_line = ["gg"]
+move_last_line = ["CapsLock"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+
+# Edit mode keybindings
+[keybindings.edit]
+delete_char_backward = ["Backspace"]
+delete_char_forward = ["Delete"]
+move_left = ["Left"]
+move_right = ["Right"]
+move_up = ["Up"]
+move_down = ["Down"]
+move_line_start = ["Home"]
+move_line_end = ["End"]
+move_word_next = ["Ctrl+Right"]
+move_word_prev = ["Ctrl+Left"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+
+# Suggestion/autocomplete keybindings
+[keybindings.suggestions]
+suggestion_up = ["Up", "Ctrl+p"]
+suggestion_down = ["Down", "Ctrl+n"]
+select_suggestion = ["Enter", "Tab"]
+exit_suggestions = ["Esc"]
+
+# Global keybindings (work in both modes)
+[keybindings.global]
+move_up = ["Up"]
+move_down = ["Down"]

client/config.toml

@@ -2,27 +2,33 @@
 [keybindings]
 
 enter_command_mode = [":", "ctrl+;"]
+next_buffer = ["space+b+n"]
+previous_buffer = ["space+b+p"] 
+close_buffer = ["space+b+d"]
 
-[keybindings.intro]
-next_option = ["j", "Right"]
-previous_option = ["k", "Left"]
+[keybindings.general]
+move_up = ["k", "Up"]
+move_down = ["j", "Down"]
+next_option = ["l", "Right"]
+previous_option = ["h", "Left"]
 select = ["Enter"]
-
-[keybindings.admin]
-move_up = ["k"]
-move_down = ["j"]
+toggle_sidebar = ["ctrl+t"]
+toggle_buffer_list = ["ctrl+b"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+exit_table_scroll = ["esc"]
+open_search = ["ctrl+f"]
 
 [keybindings.common]
 save = ["ctrl+s"]
 quit = ["ctrl+q"]
-# !!!change to space b r in the future and from edit mode 
-revert = ["ctrl+r"]
 
 force_quit = ["ctrl+shift+q"]
 save_and_quit = ["ctrl+shift+s"]
 move_up = ["Up"]
 move_down = ["Down"]
 toggle_sidebar = ["ctrl+t"]
+toggle_buffer_list = ["ctrl+b"]
 
 # MODE SPECIFIC
 # READ ONLY MODE
@@ -31,6 +37,7 @@ enter_edit_mode_before = ["i"]
 enter_edit_mode_after = ["a"]
 previous_entry = ["left","q"]
 next_entry = ["right","1"]
+revert = ["space+b+r"]
 
 move_left = ["h"]
 move_right = ["l"]
@@ -44,15 +51,29 @@ move_line_start = ["0"]
 move_line_end = ["$"]
 move_first_line = ["gg"]
 move_last_line = ["x"]
+enter_highlight_mode = ["v"]
+enter_highlight_mode_linewise = ["ctrl+v"]
+
+[keybindings.highlight]
+exit_highlight_mode = ["esc"]
+enter_highlight_mode_linewise = ["ctrl+v"]
 
 [keybindings.edit]
-exit_edit_mode = ["esc","ctrl+e"]
+# BIG CHANGES NOW EXIT HANDLES EITHER IF THOSE
+# exit_edit_mode = ["esc","ctrl+e"]
+# exit_suggestion_mode = ["esc"]
+# select_suggestion = ["enter"]
+# next_field = ["enter"]
+enter_decider = ["enter"]
+prev_field = ["shift+enter"]
+exit = ["esc", "ctrl+e"]
 delete_char_forward = ["delete"]
 delete_char_backward = ["backspace"]
-next_field = ["tab", "enter"]
-prev_field = ["shift+tab", "backtab"]
-move_left = ["left"]
+move_left = [""]
 move_right = ["right"]
+suggestion_down = ["ctrl+n", "tab"]
+suggestion_up = ["ctrl+p", "shift+tab"]
+trigger_autocomplete = ["left"]
 
 [keybindings.command]
 exit_command_mode = ["ctrl+g", "esc"]
@@ -63,6 +84,10 @@ quit = ["q"]
 force_quit = ["q!"]
 save_and_quit = ["wq"]
 revert = ["r"]
+find_file_palette_toggle = ["ff"]
+
+[editor]
+keybinding_mode = "vim"  # Options: "default", "vim", "emacs"
 
 [colors]
 theme = "dark" 

client/src/components/admin.rs

@@ -1,4 +1,10 @@
 // src/components/admin.rs
 pub mod admin_panel;
+pub mod admin_panel_admin;
+pub mod add_table;
+pub mod add_logic;
 
 pub use admin_panel::*;
+pub use admin_panel_admin::*;
+pub use add_table::*;
+pub use add_logic::*;

client/src/components/admin/add_logic.rs

@@ -0,0 +1,313 @@
+// src/components/admin/add_logic.rs
+use crate::config::colors::themes::Theme;
+use crate::state::app::highlight::HighlightState;
+use crate::state::app::state::AppState;
+use crate::state::pages::add_logic::{AddLogicFocus, AddLogicState};
+use crate::state::pages::canvas_state::CanvasState;
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::{Modifier, Style},
+    text::{Line, Span},
+    widgets::{Block, BorderType, Borders, Paragraph},
+    Frame,
+};
+use crate::components::handlers::canvas::render_canvas;
+use crate::components::common::{dialog, autocomplete}; // Added autocomplete
+use crate::config::binds::config::EditorKeybindingMode;
+
+pub fn render_add_logic(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    app_state: &AppState,
+    add_logic_state: &mut AddLogicState,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+) {
+    let main_block = Block::default()
+        .title(" Add New Logic Script ")
+        .title_alignment(Alignment::Center)
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.border))
+        .style(Style::default().bg(theme.bg));
+    let inner_area = main_block.inner(area);
+    f.render_widget(main_block, area);
+
+    // Handle full-screen script editing
+    if add_logic_state.current_focus == AddLogicFocus::InsideScriptContent {
+        let mut editor_ref = add_logic_state.script_content_editor.borrow_mut();
+        let border_style_color = if is_edit_mode { theme.highlight } else { theme.secondary };
+        let border_style = Style::default().fg(border_style_color);
+
+        editor_ref.set_cursor_line_style(Style::default());
+        editor_ref.set_cursor_style(Style::default().add_modifier(Modifier::REVERSED));
+
+        let script_title_hint = match add_logic_state.editor_keybinding_mode {
+            EditorKeybindingMode::Vim => {
+                let vim_mode_status = crate::components::common::text_editor::TextEditor::get_vim_mode_status(&add_logic_state.vim_state);
+                format!("Script {}", vim_mode_status)
+            }
+            EditorKeybindingMode::Emacs | EditorKeybindingMode::Default => {
+                if is_edit_mode {
+                    "Script (Editing)".to_string()
+                } else {
+                    "Script".to_string()
+                }
+            }
+        };
+
+        editor_ref.set_block(
+            Block::default()
+                .title(Span::styled(script_title_hint, Style::default().fg(theme.fg)))
+                .title_alignment(Alignment::Center)
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(border_style),
+        );
+        f.render_widget(&*editor_ref, inner_area);
+
+        // Drop the editor borrow before accessing autocomplete state
+        drop(editor_ref);
+
+        // === SCRIPT EDITOR AUTOCOMPLETE RENDERING ===
+        if add_logic_state.script_editor_autocomplete_active && !add_logic_state.script_editor_suggestions.is_empty() {
+            // Get the current cursor position from textarea
+            let current_cursor = {
+                let editor_borrow = add_logic_state.script_content_editor.borrow();
+                editor_borrow.cursor() // Returns (row, col) as (usize, usize)
+            };
+            
+            let (cursor_line, cursor_col) = current_cursor;
+            
+            // Account for TextArea's block borders (1 for each side)
+            let block_offset_x = 1;
+            let block_offset_y = 1;
+            
+            // Position autocomplete at current cursor position
+            // Add 1 to column to position dropdown right after the cursor
+            let autocomplete_x = cursor_col + 1;
+            let autocomplete_y = cursor_line;
+            
+            let input_rect = Rect {
+                x: (inner_area.x + block_offset_x + autocomplete_x as u16).min(inner_area.right().saturating_sub(20)),
+                y: (inner_area.y + block_offset_y + autocomplete_y as u16).min(inner_area.bottom().saturating_sub(5)),
+                width: 1, // Minimum width for positioning
+                height: 1,
+            };
+
+            // Render autocomplete dropdown
+            autocomplete::render_autocomplete_dropdown(
+                f,
+                input_rect,
+                f.area(), // Full frame area for clamping
+                theme,
+                &add_logic_state.script_editor_suggestions,
+                add_logic_state.script_editor_selected_suggestion_index,
+            );
+        }
+
+        return; // Exit early for fullscreen mode
+    }
+
+    // Regular layout with preview
+    let main_chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(3),  // Top info
+            Constraint::Length(9),  // Canvas for 3 inputs (each 1 line + 1 padding = 2 lines * 3 + 2 border = 8, +1 for good measure)
+            Constraint::Min(5),     // Script preview
+            Constraint::Length(3),  // Buttons
+        ])
+        .split(inner_area);
+
+    let top_info_area = main_chunks[0];
+    let canvas_area = main_chunks[1];
+    let script_content_area = main_chunks[2];
+    let buttons_area = main_chunks[3];
+
+    // Top info
+    let profile_text = Paragraph::new(vec![
+        Line::from(Span::styled(
+            format!("Profile: {}", add_logic_state.profile_name),
+            Style::default().fg(theme.fg),
+        )),
+        Line::from(Span::styled(
+            format!(
+                "Table: {}",
+                add_logic_state
+                    .selected_table_name
+                    .clone()
+                    .unwrap_or_else(|| add_logic_state.selected_table_id
+                        .map(|id| format!("ID {}", id))
+                        .unwrap_or_else(|| "Global (Not Selected)".to_string()))
+            ),
+            Style::default().fg(theme.fg),
+        )),
+    ])
+    .block(
+        Block::default()
+            .borders(Borders::BOTTOM)
+            .border_style(Style::default().fg(theme.secondary)),
+    );
+    f.render_widget(profile_text, top_info_area);
+
+    // Canvas
+    let focus_on_canvas_inputs = matches!(
+        add_logic_state.current_focus,
+        AddLogicFocus::InputLogicName
+            | AddLogicFocus::InputTargetColumn
+            | AddLogicFocus::InputDescription
+    );
+    // Call render_canvas and get the active_field_rect
+    let active_field_rect = render_canvas(
+        f,
+        canvas_area,
+        add_logic_state, // Pass the whole state as it impl CanvasState
+        &add_logic_state.fields(),
+        &add_logic_state.current_field(),
+        &add_logic_state.inputs(),
+        theme,
+        is_edit_mode && focus_on_canvas_inputs, // is_edit_mode for canvas fields
+        highlight_state,
+    );
+
+    // --- Render Autocomplete for Target Column ---
+    // `is_edit_mode` here refers to the general edit mode of the EventHandler
+    if is_edit_mode && add_logic_state.current_field() == 1 { // Target Column field
+        if let Some(suggestions) = add_logic_state.get_suggestions() { // Uses CanvasState impl
+            let selected = add_logic_state.get_selected_suggestion_index();
+            if !suggestions.is_empty() { // Only render if there are suggestions to show
+                if let Some(input_rect) = active_field_rect {
+                    autocomplete::render_autocomplete_dropdown(
+                        f,
+                        input_rect,
+                        f.area(), // Full frame area for clamping
+                        theme,
+                        suggestions,
+                        selected,
+                    );
+                }
+            }
+        }
+    }
+
+    // Script content preview
+    {
+        let mut editor_ref = add_logic_state.script_content_editor.borrow_mut();
+        editor_ref.set_cursor_line_style(Style::default());
+
+        let is_script_preview_focused = add_logic_state.current_focus == AddLogicFocus::ScriptContentPreview;
+
+        if is_script_preview_focused {
+            editor_ref.set_cursor_style(Style::default().add_modifier(Modifier::REVERSED));
+        } else {
+            let underscore_cursor_style = Style::default()
+                .add_modifier(Modifier::UNDERLINED)
+                .fg(theme.secondary);
+            editor_ref.set_cursor_style(underscore_cursor_style);
+        }
+
+        let border_style_color = if is_script_preview_focused {
+            theme.highlight
+        } else {
+            theme.secondary
+        };
+
+        let title_text = "Script Preview"; // Title doesn't need to change based on focus here
+
+        let title_style = if is_script_preview_focused {
+            Style::default().fg(theme.highlight).add_modifier(Modifier::BOLD)
+        } else {
+            Style::default().fg(theme.fg)
+        };
+
+        editor_ref.set_block(
+            Block::default()
+                .title(Span::styled(title_text, title_style))
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(Style::default().fg(border_style_color)),
+        );
+        f.render_widget(&*editor_ref, script_content_area);
+    }
+
+    // Buttons
+    let get_button_style = |button_focus: AddLogicFocus, current_focus_state: AddLogicFocus| {
+        let is_focused = current_focus_state == button_focus;
+        let base_style = Style::default().fg(if is_focused {
+            theme.highlight
+        } else {
+            theme.secondary
+        });
+        if is_focused {
+            base_style.add_modifier(Modifier::BOLD)
+        } else {
+            base_style
+        }
+    };
+
+    let get_button_border_style = |is_focused: bool, current_theme: &Theme| {
+        if is_focused {
+            Style::default().fg(current_theme.highlight)
+        } else {
+            Style::default().fg(current_theme.secondary)
+        }
+    };
+
+    let button_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(50),
+            Constraint::Percentage(50),
+        ])
+        .split(buttons_area);
+
+    let save_button = Paragraph::new(" Save Logic ")
+        .style(get_button_style(
+            AddLogicFocus::SaveButton,
+            add_logic_state.current_focus,
+        ))
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(get_button_border_style(
+                    add_logic_state.current_focus == AddLogicFocus::SaveButton,
+                    theme,
+                )),
+        );
+    f.render_widget(save_button, button_chunks[0]);
+
+    let cancel_button = Paragraph::new(" Cancel ")
+        .style(get_button_style(
+            AddLogicFocus::CancelButton,
+            add_logic_state.current_focus,
+        ))
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(get_button_border_style(
+                    add_logic_state.current_focus == AddLogicFocus::CancelButton,
+                    theme,
+                )),
+        );
+    f.render_widget(cancel_button, button_chunks[1]);
+
+    // Dialog
+    if app_state.ui.dialog.dialog_show {
+        dialog::render_dialog(
+            f,
+            f.area(),
+            theme,
+            &app_state.ui.dialog.dialog_title,
+            &app_state.ui.dialog.dialog_message,
+            &app_state.ui.dialog.dialog_buttons,
+            app_state.ui.dialog.dialog_active_button_index,
+            app_state.ui.dialog.is_loading,
+        );
+    }
+}

client/src/components/admin/add_table.rs

@@ -0,0 +1,572 @@
+// src/components/admin/add_table.rs
+use crate::config::colors::themes::Theme;
+use crate::state::app::highlight::HighlightState;
+use crate::state::app::state::AppState;
+use crate::state::pages::add_table::{AddTableFocus, AddTableState};
+use crate::state::pages::canvas_state::CanvasState;
+// use crate::state::pages::add_table::{ColumnDefinition, LinkDefinition}; // Not directly used here
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::{Modifier, Style},
+    text::{Line, Span},
+    widgets::{Block, BorderType, Borders, Cell, Paragraph, Row, Table},
+    Frame,
+};
+use crate::components::handlers::canvas::render_canvas;
+use crate::components::common::dialog;
+
+/// Renders the Add New Table page layout, structuring the display of table information,
+/// input fields, and action buttons. Adapts layout based on terminal width.
+pub fn render_add_table(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    app_state: &AppState, // Currently unused, might be needed later
+    add_table_state: &mut AddTableState,
+    is_edit_mode: bool, // Determines if canvas inputs are in edit mode
+    highlight_state: &HighlightState, // For text highlighting in canvas
+) {
+    // --- Configuration ---
+    // Threshold width to switch between wide and narrow layouts
+    const NARROW_LAYOUT_THRESHOLD: u16 = 120; // Adjust this value as needed
+
+    // --- State Checks ---
+    let focus_on_canvas_inputs = matches!(
+        add_table_state.current_focus,
+        AddTableFocus::InputTableName
+            | AddTableFocus::InputColumnName
+            | AddTableFocus::InputColumnType
+    );
+
+    // --- Main Page Block ---
+    let main_block = Block::default()
+        .title(" Add New Table ")
+        .title_alignment(Alignment::Center)
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.border))
+        .style(Style::default().bg(theme.bg));
+    let inner_area = main_block.inner(area);
+    f.render_widget(main_block, area);
+
+    // --- Fullscreen Columns Table Check (Narrow Screens Only) ---
+    if area.width < NARROW_LAYOUT_THRESHOLD && add_table_state.current_focus == AddTableFocus::InsideColumnsTable {
+        // Render ONLY the columns table taking the full inner area
+        let columns_border_style = Style::default().fg(theme.highlight); // Always highlighted when fullscreen
+        let column_rows: Vec<Row<'_>> = add_table_state
+            .columns
+            .iter()
+            .map(|col_def| {
+                Row::new(vec![
+                    Cell::from(if col_def.selected { "[*]" } else { "[ ]" }),
+                    Cell::from(col_def.name.clone()),
+                    Cell::from(col_def.data_type.clone()),
+                ])
+                .style(Style::default().fg(theme.fg))
+            })
+            .collect();
+        let header_cells = ["Sel", "Name", "Type"]
+            .iter()
+            .map(|h| Cell::from(*h).style(Style::default().fg(theme.accent)));
+        let header = Row::new(header_cells).height(1).bottom_margin(1);
+        let columns_table = Table::new(column_rows, [Constraint::Length(5), Constraint::Percentage(50), Constraint::Percentage(50)])
+            .header(header)
+            .block(
+                Block::default()
+                    .title(Span::styled(" Columns (Fullscreen) ", theme.fg)) // Indicate fullscreen
+                    .title_alignment(Alignment::Center)
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Rounded)
+                    .border_style(columns_border_style),
+            )
+            .row_highlight_style(
+                Style::default()
+                .add_modifier(Modifier::REVERSED)
+                .fg(theme.highlight),
+            )
+            .highlight_symbol(" > "); // Use the inside symbol
+        f.render_stateful_widget(columns_table, inner_area, &mut add_table_state.column_table_state);
+        return; // IMPORTANT: Stop rendering here for fullscreen mode
+    }
+
+    // --- Fullscreen Indexes Table Check ---
+    if add_table_state.current_focus == AddTableFocus::InsideIndexesTable { // Remove width check
+        // Render ONLY the indexes table taking the full inner area
+        let indexes_border_style = Style::default().fg(theme.highlight); // Always highlighted when fullscreen
+        let index_rows: Vec<Row<'_>> = add_table_state
+            .indexes
+            .iter()
+            .map(|index_def| {
+                Row::new(vec![
+                    Cell::from(if index_def.selected { "[*]" } else { "[ ]" }),
+                    Cell::from(index_def.name.clone()),
+                ])
+                .style(Style::default().fg(theme.fg))
+            })
+            .collect();
+        let index_header_cells = ["Sel", "Column Name"]
+            .iter()
+            .map(|h| Cell::from(*h).style(Style::default().fg(theme.accent)));
+        let index_header = Row::new(index_header_cells).height(1).bottom_margin(1);
+        let indexes_table = Table::new(index_rows, [Constraint::Length(5), Constraint::Percentage(95)])
+            .header(index_header)
+            .block(
+                Block::default()
+                    .title(Span::styled(" Indexes (Fullscreen) ", theme.fg)) // Indicate fullscreen
+                    .title_alignment(Alignment::Center)
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Rounded)
+                    .border_style(indexes_border_style),
+            )
+            .row_highlight_style(Style::default().add_modifier(Modifier::REVERSED).fg(theme.highlight))
+            .highlight_symbol(" > "); // Use the inside symbol
+        f.render_stateful_widget(indexes_table, inner_area, &mut add_table_state.index_table_state);
+        return; // IMPORTANT: Stop rendering here for fullscreen mode
+    }
+
+    // --- Fullscreen Links Table Check ---
+    if add_table_state.current_focus == AddTableFocus::InsideLinksTable {
+        // Render ONLY the links table taking the full inner area
+        let links_border_style = Style::default().fg(theme.highlight); // Always highlighted when fullscreen
+        let link_rows: Vec<Row<'_>> = add_table_state
+            .links
+            .iter()
+            .map(|link_def| {
+                Row::new(vec![
+                    Cell::from(if link_def.selected { "[*]" } else { "[ ]" }), // Selection first
+                    Cell::from(link_def.linked_table_name.clone()), // Table name second
+                ])
+                .style(Style::default().fg(theme.fg))
+            })
+            .collect();
+        let link_header_cells = ["Sel", "Available Table"]
+
+            .iter()
+            .map(|h| Cell::from(*h).style(Style::default().fg(theme.accent)));
+        let link_header = Row::new(link_header_cells).height(1).bottom_margin(1);
+        let links_table = Table::new(link_rows, [Constraint::Length(5), Constraint::Percentage(95)])
+            .header(link_header)
+            .block(
+                Block::default()
+                    .title(Span::styled(" Links (Fullscreen) ", theme.fg)) // Indicate fullscreen
+                    .title_alignment(Alignment::Center)
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Rounded)
+                    .border_style(links_border_style),
+            )
+            .row_highlight_style(Style::default().add_modifier(Modifier::REVERSED).fg(theme.highlight))
+            .highlight_symbol(" > "); // Use the inside symbol
+        f.render_stateful_widget(links_table, inner_area, &mut add_table_state.link_table_state);
+        return; // IMPORTANT: Stop rendering here for fullscreen mode
+    }
+
+    // --- Area Variable Declarations ---
+    let top_info_area: Rect;
+    let columns_area: Rect;
+    let canvas_area: Rect;
+    let add_button_area: Rect;
+    let indexes_area: Rect;
+    let links_area: Rect;
+    let bottom_buttons_area: Rect;
+
+    // --- Layout Decision ---
+    if area.width >= NARROW_LAYOUT_THRESHOLD {
+        // --- WIDE Layout (Based on first screenshot) ---
+        let main_chunks = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints([
+                Constraint::Length(3), // Top Info (Profile/Table Name) - Increased to 3 lines
+                Constraint::Min(10),   // Middle Area (Columns | Right Pane)
+                Constraint::Length(3), // Bottom Buttons
+            ])
+            .split(inner_area);
+
+        top_info_area = main_chunks[0];
+        let middle_area = main_chunks[1];
+        bottom_buttons_area = main_chunks[2];
+
+        // Split Middle Horizontally
+        let middle_chunks = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([
+                Constraint::Percentage(50), // Left: Columns Table
+                Constraint::Percentage(50), // Right: Inputs etc.
+            ])
+            .split(middle_area);
+
+        columns_area = middle_chunks[0];
+        let right_pane_area = middle_chunks[1];
+
+        // Split Right Pane Vertically
+        let right_pane_chunks = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints([
+                Constraint::Length(5), // Input Canvas Area
+                Constraint::Length(3), // Add Button Area
+                Constraint::Min(5),    // Indexes & Links Area
+            ])
+            .split(right_pane_area);
+
+        canvas_area = right_pane_chunks[0];
+        add_button_area = right_pane_chunks[1];
+        let indexes_links_area = right_pane_chunks[2];
+
+        // Split Indexes/Links Horizontally
+        let indexes_links_chunks = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([
+                Constraint::Percentage(50), // Indexes Table
+                Constraint::Percentage(50), // Links Table
+            ])
+            .split(indexes_links_area);
+        indexes_area = indexes_links_chunks[0];
+        links_area = indexes_links_chunks[1];
+
+        // --- Top Info Rendering (Wide - 2 lines) ---
+        let profile_text = Paragraph::new(vec![
+            Line::from(Span::styled(
+                format!("Profile: {}", add_table_state.profile_name),
+                theme.fg,
+            )),
+            Line::from(Span::styled(
+                format!("Table name: {}", add_table_state.table_name),
+                theme.fg,
+            )),
+        ])
+        .block(
+            Block::default()
+                .borders(Borders::BOTTOM)
+                .border_style(Style::default().fg(theme.secondary)),
+        );
+        f.render_widget(profile_text, top_info_area);
+    } else {
+        // --- NARROW Layout (Based on second screenshot) ---
+        let main_chunks = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints([
+                Constraint::Length(1), // Top: Profile & Table Name (Single Row)
+                Constraint::Length(5), // Column Definition Input Canvas Area
+                Constraint::Length(3), // Add Button Area
+                Constraint::Min(5),    // Columns Table Area
+                Constraint::Min(5),    // Indexes & Links Area
+                Constraint::Length(3), // Bottom: Save/Cancel Buttons
+            ])
+            .split(inner_area);
+
+        top_info_area = main_chunks[0];
+        canvas_area = main_chunks[1];
+        add_button_area = main_chunks[2];
+        columns_area = main_chunks[3];
+        let indexes_links_area = main_chunks[4];
+        bottom_buttons_area = main_chunks[5];
+
+        // Split Indexes/Links Horizontally
+        let indexes_links_chunks = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([
+                Constraint::Percentage(50), // Indexes Table
+                Constraint::Percentage(50), // Links Table
+            ])
+            .split(indexes_links_area);
+        indexes_area = indexes_links_chunks[0];
+        links_area = indexes_links_chunks[1];
+
+        // --- Top Info Rendering (Narrow - 1 line) ---
+        let top_info_chunks = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([
+                Constraint::Percentage(50),
+                Constraint::Percentage(50),
+            ])
+            .split(top_info_area);
+
+        let profile_text = Paragraph::new(Span::styled(
+            format!("Profile: {}", add_table_state.profile_name),
+            theme.fg,
+        ))
+        .alignment(Alignment::Left);
+        f.render_widget(profile_text, top_info_chunks[0]);
+
+        let table_name_text = Paragraph::new(Span::styled(
+            format!("Table: {}", add_table_state.table_name),
+            theme.fg,
+        ))
+        .alignment(Alignment::Left);
+        f.render_widget(table_name_text, top_info_chunks[1]);
+    }
+
+    // --- Common Widget Rendering (Uses calculated areas) ---
+
+    // --- Columns Table Rendering ---
+    let columns_focused = matches!(add_table_state.current_focus, AddTableFocus::ColumnsTable | AddTableFocus::InsideColumnsTable);
+    let columns_border_style = if columns_focused {
+        Style::default().fg(theme.highlight)
+    } else {
+        Style::default().fg(theme.secondary)
+    };
+    let column_rows: Vec<Row<'_>> = add_table_state
+        .columns
+        .iter()
+        .map(|col_def| {
+            Row::new(vec![
+                Cell::from(if col_def.selected { "[*]" } else { "[ ]" }),
+                Cell::from(col_def.name.clone()),
+                Cell::from(col_def.data_type.clone()),
+            ])
+            .style(Style::default().fg(theme.fg))
+        })
+        .collect();
+    let header_cells = ["Sel", "Name", "Type"]
+        .iter()
+        .map(|h| Cell::from(*h).style(Style::default().fg(theme.accent)));
+    let header = Row::new(header_cells).height(1).bottom_margin(1);
+    let columns_table = Table::new(
+        column_rows,
+        [ // Define constraints for 3 columns: Sel, Name, Type
+            Constraint::Length(5),
+            Constraint::Percentage(60),
+            Constraint::Percentage(35),
+        ],
+    )
+    .header(header)
+    .block(
+        Block::default()
+            .title(Span::styled(" Columns ", theme.fg))
+            .title_alignment(Alignment::Center)
+            .borders(Borders::ALL)
+            .border_type(BorderType::Rounded)
+            .border_style(columns_border_style),
+    )
+    .row_highlight_style(
+        Style::default()
+            .add_modifier(Modifier::REVERSED)
+            .fg(theme.highlight),
+    )
+    .highlight_symbol(" > ");
+    f.render_stateful_widget(
+        columns_table,
+        columns_area,
+        &mut add_table_state.column_table_state,
+    );
+
+    // --- Canvas Rendering (Column Definition Input) ---
+    let _active_field_rect = render_canvas(
+        f,
+        canvas_area,
+        add_table_state,
+        &add_table_state.fields(),
+        &add_table_state.current_field(),
+        &add_table_state.inputs(),
+        theme,
+        is_edit_mode && focus_on_canvas_inputs,
+        highlight_state,
+    );
+
+    // --- Button Style Helpers ---
+    let get_button_style = |button_focus: AddTableFocus, current_focus| {
+        // Only handles text style (FG + Bold) now, no BG
+        let is_focused = current_focus == button_focus;
+        let base_style = Style::default().fg(if is_focused {
+            theme.highlight // Highlighted text color
+        } else {
+            theme.secondary // Normal text color
+        });
+        if is_focused {
+            base_style.add_modifier(Modifier::BOLD)
+        } else {
+            base_style
+        }
+    };
+    // Updated signature to accept bool and theme
+    let get_button_border_style = |is_focused: bool, theme: &Theme| {
+        if is_focused {
+            Style::default().fg(theme.highlight)
+        } else {
+            Style::default().fg(theme.secondary)
+        }
+    };
+
+    // --- Add Button Rendering ---
+    // Determine if the add button is focused
+    let is_add_button_focused = add_table_state.current_focus == AddTableFocus::AddColumnButton;
+
+    // Create the Add button Paragraph widget
+    let add_button = Paragraph::new(" Add ")
+        .style(get_button_style(AddTableFocus::AddColumnButton, add_table_state.current_focus)) // Use existing closure
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+            .borders(Borders::ALL)
+            .border_type(BorderType::Rounded)
+            .border_style(get_button_border_style(is_add_button_focused, theme)), // Pass bool and theme
+        );
+
+    // Render the button in its designated area
+    f.render_widget(add_button, add_button_area);
+
+    // --- Indexes Table Rendering ---
+    let indexes_focused = matches!(add_table_state.current_focus, AddTableFocus::IndexesTable | AddTableFocus::InsideIndexesTable);
+    let indexes_border_style = if indexes_focused {
+        Style::default().fg(theme.highlight)
+    } else {
+        Style::default().fg(theme.secondary)
+    };
+    let index_rows: Vec<Row<'_>> = add_table_state
+        .indexes
+        .iter()
+        .map(|index_def| { // Use index_def now
+            Row::new(vec![
+                Cell::from(if index_def.selected { "[*]" } else { "[ ]" }), // Display selection
+                Cell::from(index_def.name.clone()),
+            ])
+                .style(Style::default().fg(theme.fg))
+        })
+        .collect();
+    let index_header_cells = ["Sel", "Column Name"]
+        .iter()
+        .map(|h| Cell::from(*h).style(Style::default().fg(theme.accent)));
+    let index_header = Row::new(index_header_cells).height(1).bottom_margin(1);
+    let indexes_table =
+        Table::new(index_rows, [Constraint::Length(5), Constraint::Percentage(95)])
+            .header(index_header)
+            .block(
+                Block::default()
+                    .title(Span::styled(" Indexes ", theme.fg))
+                    .title_alignment(Alignment::Center)
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Rounded)
+                    .border_style(indexes_border_style),
+            )
+            .row_highlight_style(
+                Style::default()
+                    .add_modifier(Modifier::REVERSED)
+                    .fg(theme.highlight),
+            )
+            .highlight_symbol(" > ");
+    f.render_stateful_widget(
+        indexes_table,
+        indexes_area,
+        &mut add_table_state.index_table_state,
+    );
+
+    // --- Links Table Rendering ---
+    let links_focused = matches!(add_table_state.current_focus, AddTableFocus::LinksTable | AddTableFocus::InsideLinksTable);
+    let links_border_style = if links_focused {
+        Style::default().fg(theme.highlight)
+    } else {
+        Style::default().fg(theme.secondary)
+    };
+    let link_rows: Vec<Row<'_>> = add_table_state
+        .links
+        .iter()
+        .map(|link_def| {
+            Row::new(vec![
+                Cell::from(if link_def.selected { "[*]" } else { "[ ]" }),
+                Cell::from(link_def.linked_table_name.clone()),
+            ])
+            .style(Style::default().fg(theme.fg))
+        })
+        .collect();
+    let link_header_cells = ["Sel", "Available Table"]
+        .iter()
+        .map(|h| Cell::from(*h).style(Style::default().fg(theme.accent)));
+    let link_header = Row::new(link_header_cells).height(1).bottom_margin(1);
+    let links_table =
+        Table::new(link_rows, [Constraint::Length(5), Constraint::Percentage(95)])
+            .header(link_header)
+            .block(
+                Block::default()
+                    .title(Span::styled(" Links ", theme.fg))
+                    .title_alignment(Alignment::Center)
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Rounded)
+                    .border_style(links_border_style),
+            )
+            .row_highlight_style(
+                Style::default()
+                    .add_modifier(Modifier::REVERSED)
+                    .fg(theme.highlight),
+            )
+            .highlight_symbol(" > ");
+    f.render_stateful_widget(
+        links_table,
+        links_area,
+        &mut add_table_state.link_table_state,
+    );
+
+    // --- Save/Cancel Buttons Rendering ---
+    let bottom_button_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(33), // Save Button
+            Constraint::Percentage(34), // Delete Button
+            Constraint::Percentage(33), // Cancel Button
+        ])
+        .split(bottom_buttons_area);
+
+    let save_button = Paragraph::new(" Save table ")
+        .style(get_button_style(
+            AddTableFocus::SaveButton,
+            add_table_state.current_focus,
+        ))
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(get_button_border_style(
+                    add_table_state.current_focus == AddTableFocus::SaveButton, // Pass bool
+                    theme,
+                )),
+        );
+    f.render_widget(save_button, bottom_button_chunks[0]);
+
+    let delete_button = Paragraph::new(" Delete Selected ")
+        .style(get_button_style(
+            AddTableFocus::DeleteSelectedButton,
+            add_table_state.current_focus,
+        ))
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(get_button_border_style(
+                    add_table_state.current_focus == AddTableFocus::DeleteSelectedButton, // Pass bool
+                    theme,
+                )),
+        );
+    f.render_widget(delete_button, bottom_button_chunks[1]);
+
+    let cancel_button = Paragraph::new(" Cancel ")
+        .style(get_button_style(
+            AddTableFocus::CancelButton,
+            add_table_state.current_focus,
+        ))
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+                .borders(Borders::ALL)
+                .border_type(BorderType::Rounded)
+                .border_style(get_button_border_style(
+                    add_table_state.current_focus == AddTableFocus::CancelButton, // Pass bool
+                    theme,
+                )),
+        );
+    f.render_widget(cancel_button, bottom_button_chunks[2]);
+
+    // --- DIALOG ---
+    // Render the dialog overlay if it's active
+    if app_state.ui.dialog.dialog_show { // Use the passed-in app_state
+        dialog::render_dialog(
+            f,
+            f.area(), // Render over the whole frame area
+            theme,
+            &app_state.ui.dialog.dialog_title,
+            &app_state.ui.dialog.dialog_message,
+            &app_state.ui.dialog.dialog_buttons,
+            app_state.ui.dialog.dialog_active_button_index,
+            app_state.ui.dialog.is_loading,
+        );
+    }
+}

client/src/components/admin/admin_panel.rs

@@ -1,118 +1,131 @@
 // src/components/admin/admin_panel.rs
 
+use crate::config::colors::themes::Theme;
+use crate::state::pages::auth::AuthState;
+use crate::state::app::state::AppState;
+use crate::state::pages::admin::AdminState;
+use common::proto::komp_ac::table_definition::ProfileTreeResponse;
 use ratatui::{
-    widgets::{Block, BorderType, Borders, List, ListItem, ListState, Paragraph},
+    layout::{Constraint, Direction, Layout, Rect},
     style::Style,
     text::{Line, Span, Text},
-    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    widgets::{Block, BorderType, Borders, List, ListItem, Paragraph, Wrap},
     Frame,
 };
-use common::proto::multieko2::table_definition::ProfileTreeResponse;
-use crate::config::colors::themes::Theme;
+use super::admin_panel_admin::render_admin_panel_admin;
 
-pub struct AdminPanelState {
-    pub list_state: ListState,
-    pub profiles: Vec<String>,
+pub fn render_admin_panel(
+    f: &mut Frame,
+    app_state: &AppState,
+    auth_state: &AuthState,
+    admin_state: &mut AdminState,
+    area: Rect,
+    theme: &Theme,
+    profile_tree: &ProfileTreeResponse,
+    selected_profile: &Option<String>,
+) {
+    let block = Block::default()
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.accent))
+        .style(Style::default().bg(theme.bg));
+
+    let inner_area = block.inner(area);
+    f.render_widget(block, area);
+
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Length(3), Constraint::Min(1)])
+        .split(inner_area);
+
+    // Content
+    let content_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
+        .split(chunks[1]);
+
+    if auth_state.role.as_deref() != Some("admin") {
+        render_admin_panel_non_admin(
+            f,
+            admin_state,
+            &content_chunks,
+            theme,
+            profile_tree,
+            selected_profile,
+        );
+    } else {
+        render_admin_panel_admin(
+            f,
+            chunks[1],
+            app_state,
+            admin_state,
+            theme,
+        );
+    }
 }
 
-impl AdminPanelState {
-    pub fn new(profiles: Vec<String>) -> Self {
-        let mut list_state = ListState::default();
-        if !profiles.is_empty() {
-            list_state.select(Some(0));
-        }
-        Self { list_state, profiles }
-    }
-
-    pub fn next(&mut self) {
-        let i = self.list_state.selected().map_or(0, |i| 
-            if i >= self.profiles.len() - 1 { 0 } else { i + 1 });
-        self.list_state.select(Some(i));
-    }
-
-    pub fn previous(&mut self) {
-        let i = self.list_state.selected().map_or(0, |i| 
-            if i == 0 { self.profiles.len() - 1 } else { i - 1 });
-        self.list_state.select(Some(i));
-    }
-
-    pub fn render(
-        &mut self,
-        f: &mut Frame,
-        area: Rect,
-        theme: &Theme,
-        profile_tree: &ProfileTreeResponse,
-        selected_profile: &Option<String>,
-    ) {
-        let block = Block::default()
-            .borders(Borders::ALL)
-            .border_type(BorderType::Rounded)
-            .border_style(Style::default().fg(theme.accent))
-            .style(Style::default().bg(theme.bg));
-
-        let inner_area = block.inner(area);
-        f.render_widget(block, area);
-
-        let chunks = Layout::default()
-            .direction(Direction::Vertical)
-            .constraints([Constraint::Length(3), Constraint::Min(1)])
-            .split(inner_area);
-
-        // Title
-        let title = Line::from(Span::styled("Admin Panel", Style::default().fg(theme.highlight)));
-        let title_widget = Paragraph::new(title).alignment(Alignment::Center);
-        f.render_widget(title_widget, chunks[0]);
-
-        // Content
-        let content_chunks = Layout::default()
-            .direction(Direction::Horizontal)
-            .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
-            .split(chunks[1]);
-
-        // Profile list
-        let items: Vec<ListItem> = self.profiles.iter()
-            .map(|p| ListItem::new(Line::from(vec![
+/// Renders the view for non-admin users (profile list and details).
+fn render_admin_panel_non_admin(
+    f: &mut Frame,
+    admin_state: &AdminState,
+    content_chunks: &[Rect],
+    theme: &Theme,
+    profile_tree: &ProfileTreeResponse,
+    selected_profile: &Option<String>,
+) {
+    // Profile list - Use data from admin_state
+    let items: Vec<ListItem> = admin_state
+        .profiles
+        .iter()
+        .map(|p| {
+            ListItem::new(Line::from(vec![
                 Span::styled(
                     if Some(p) == selected_profile.as_ref() { "✓ " } else { "  " },
-                    Style::default().fg(theme.accent)
+                    Style::default().fg(theme.accent),
                 ),
                 Span::styled(p, Style::default().fg(theme.fg)),
-            ])))
-            .collect();
+            ]))
+        })
+        .collect();
 
-        let list = List::new(items)
-            .block(Block::default().title("Profiles"))
-            .highlight_style(Style::default().bg(theme.highlight).fg(theme.bg));
-        
-        f.render_stateful_widget(list, content_chunks[0], &mut self.list_state);
+    let list = List::new(items)
+        .block(Block::default().title("Profiles"))
+        .highlight_style(Style::default().bg(theme.highlight).fg(theme.bg));
 
-        // Profile details
-        if let Some(profile) = self.list_state.selected()
-            .and_then(|i| profile_tree.profiles.get(i)) 
-        {
-            let mut text = Text::default();
-            text.lines.push(Line::from(vec![
-                Span::styled("Profile: ", Style::default().fg(theme.accent)),
-                Span::styled(&profile.name, Style::default().fg(theme.highlight)),
-            ]));
+    let mut profile_list_state_clone = admin_state.profile_list_state.clone();
+    f.render_stateful_widget(list, content_chunks[0], &mut profile_list_state_clone);
 
-            text.lines.push(Line::from(""));
-            text.lines.push(Line::from(Span::styled("Tables:", Style::default().fg(theme.accent))));
-            
-            for table in &profile.tables {
-                let mut line = vec![Span::styled(format!("├─ {}", table.name), theme.fg)];
-                if !table.depends_on.is_empty() {
-                    line.push(Span::styled(
-                        format!(" → {}", table.depends_on.join(", ")),
-                        Style::default().fg(theme.secondary)
-                    ));
-                }
-                text.lines.push(Line::from(line));
+    // Profile details - Use selection info from admin_state
+    if let Some(profile) = admin_state
+        .get_selected_index()
+        .and_then(|i| profile_tree.profiles.get(i))
+    {
+        let mut text = Text::default();
+        text.lines.push(Line::from(vec![
+            Span::styled("Profile: ", Style::default().fg(theme.accent)),
+            Span::styled(&profile.name, Style::default().fg(theme.highlight)),
+        ]));
+
+        text.lines.push(Line::from(""));
+        text.lines.push(Line::from(Span::styled(
+            "Tables:",
+            Style::default().fg(theme.accent),
+        )));
+
+        for table in &profile.tables {
+            let mut line = vec![Span::styled(format!("├─ {}", table.name), theme.fg)];
+            if !table.depends_on.is_empty() {
+                line.push(Span::styled(
+                    format!(" → {}", table.depends_on.join(", ")),
+                    Style::default().fg(theme.secondary),
+                ));
             }
-
-            let details_widget = Paragraph::new(text)
-                .block(Block::default().title("Details"));
-            f.render_widget(details_widget, content_chunks[1]);
+            text.lines.push(Line::from(line));
         }
+
+        let details_widget = Paragraph::new(text)
+            .block(Block::default().title("Details"))
+            .wrap(Wrap { trim: true });
+        f.render_widget(details_widget, content_chunks[1]);
     }
 }

client/src/components/admin/admin_panel_admin.rs

@@ -0,0 +1,180 @@
+// src/components/admin/admin_panel_admin.rs
+
+use crate::config::colors::themes::Theme;
+use crate::state::pages::admin::{AdminFocus, AdminState};
+use crate::state::app::state::AppState;
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::Style,
+    text::{Line, Span, Text},
+    widgets::{Block, BorderType, Borders, List, ListItem, Paragraph},
+    Frame,
+};
+
+pub fn render_admin_panel_admin(
+    f: &mut Frame,
+    area: Rect,
+    app_state: &AppState,
+    admin_state: &mut AdminState,
+    theme: &Theme,
+) {
+    let main_chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Min(0), Constraint::Length(1)].as_ref())
+        .split(area);
+    let panes_area = main_chunks[0];
+    let buttons_area = main_chunks[1];
+
+    let pane_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(25), // Profiles
+            Constraint::Percentage(40), // Tables
+            Constraint::Percentage(35), // Dependencies
+        ].as_ref())
+        .split(panes_area);
+
+    let profiles_pane = pane_chunks[0];
+    let tables_pane = pane_chunks[1];
+    let deps_pane = pane_chunks[2];
+
+    // --- Profiles Pane (Left) ---
+    let profile_pane_has_focus = matches!(admin_state.current_focus, AdminFocus::ProfilesPane | AdminFocus::InsideProfilesList);
+    let profile_border_style = if profile_pane_has_focus {
+        Style::default().fg(theme.highlight)
+    } else {
+        Style::default().fg(theme.border)
+    };
+    let profiles_block = Block::default().title(" Profiles ").borders(Borders::ALL).border_type(BorderType::Rounded).border_style(profile_border_style);
+    let profiles_inner_area = profiles_block.inner(profiles_pane);
+    f.render_widget(profiles_block, profiles_pane);
+    let profile_list_items: Vec<ListItem> = app_state.profile_tree.profiles.iter().enumerate().map(|(idx, profile)| {
+        let is_persistently_selected = admin_state.selected_profile_index == Some(idx);
+        let is_nav_highlighted = admin_state.profile_list_state.selected() == Some(idx) && admin_state.current_focus == AdminFocus::InsideProfilesList;
+        let prefix = if is_persistently_selected { "[*] " } else { "[ ] " };
+        let item_style = if is_nav_highlighted { Style::default().fg(theme.highlight).add_modifier(ratatui::style::Modifier::BOLD) }
+                         else if is_persistently_selected { Style::default().fg(theme.accent) }
+                         else { Style::default().fg(theme.fg) };
+        ListItem::new(Line::from(vec![Span::styled(prefix, item_style), Span::styled(&profile.name, item_style)]))
+    }).collect();
+    let profile_list = List::new(profile_list_items)
+        .highlight_style(if admin_state.current_focus == AdminFocus::InsideProfilesList { Style::default().add_modifier(ratatui::style::Modifier::REVERSED) } else { Style::default() })
+        .highlight_symbol(if admin_state.current_focus == AdminFocus::InsideProfilesList { "> " } else { "  " });
+    f.render_stateful_widget(profile_list, profiles_inner_area, &mut admin_state.profile_list_state);
+
+
+    // --- Tables Pane (Middle) ---
+    let table_pane_has_focus = matches!(admin_state.current_focus, AdminFocus::Tables | AdminFocus::InsideTablesList);
+    let table_border_style = if table_pane_has_focus { Style::default().fg(theme.highlight) } else { Style::default().fg(theme.border) };
+    
+    let profile_to_display_tables_for_idx: Option<usize>;
+    if admin_state.current_focus == AdminFocus::InsideProfilesList {
+        profile_to_display_tables_for_idx = admin_state.profile_list_state.selected();
+    } else {
+        profile_to_display_tables_for_idx = admin_state.selected_profile_index
+            .or_else(|| admin_state.profile_list_state.selected());
+    }
+    let tables_pane_title_profile_name = profile_to_display_tables_for_idx
+        .and_then(|idx| app_state.profile_tree.profiles.get(idx))
+        .map_or("None Selected", |p| p.name.as_str());
+    let tables_block = Block::default().title(format!(" Tables (Profile: {}) ", tables_pane_title_profile_name)).borders(Borders::ALL).border_type(BorderType::Rounded).border_style(table_border_style);
+    let tables_inner_area = tables_block.inner(tables_pane);
+    f.render_widget(tables_block, tables_pane);
+
+    let table_list_items_for_display: Vec<ListItem> =
+        if let Some(profile_data_for_tables) = profile_to_display_tables_for_idx
+            .and_then(|idx| app_state.profile_tree.profiles.get(idx)) {
+            profile_data_for_tables.tables.iter().enumerate().map(|(idx, table)| {
+                let is_table_persistently_selected = admin_state.selected_table_index == Some(idx) &&
+                                                     profile_to_display_tables_for_idx == admin_state.selected_profile_index;
+                let is_table_nav_highlighted = admin_state.table_list_state.selected() == Some(idx) &&
+                                               admin_state.current_focus == AdminFocus::InsideTablesList;
+                let prefix = if is_table_persistently_selected { "[*] " } else { "[ ] " };
+                let style = if is_table_nav_highlighted { Style::default().fg(theme.highlight).add_modifier(ratatui::style::Modifier::BOLD) }
+                            else if is_table_persistently_selected { Style::default().fg(theme.accent) }
+                            else { Style::default().fg(theme.fg) };
+                ListItem::new(Line::from(vec![Span::styled(prefix, style), Span::styled(&table.name, style)]))
+            }).collect()
+        } else {
+            vec![ListItem::new("Select a profile to see tables")]
+        };
+    let table_list = List::new(table_list_items_for_display)
+        .highlight_style(if admin_state.current_focus == AdminFocus::InsideTablesList { Style::default().add_modifier(ratatui::style::Modifier::REVERSED) } else { Style::default() })
+        .highlight_symbol(if admin_state.current_focus == AdminFocus::InsideTablesList { "> " } else { "  " });
+    f.render_stateful_widget(table_list, tables_inner_area, &mut admin_state.table_list_state);
+
+
+    // --- Dependencies Pane (Right) ---
+    let mut deps_pane_title_table_name = "N/A".to_string();
+    let dependencies_to_display: Vec<String>;
+
+    if admin_state.current_focus == AdminFocus::InsideTablesList {
+        // If navigating tables, show dependencies for the '>' highlighted table.
+        // The profile context is `profile_to_display_tables_for_idx` (from Tables pane logic).
+        if let Some(p_idx_for_current_tables) = profile_to_display_tables_for_idx {
+            if let Some(current_profile_showing_tables) = app_state.profile_tree.profiles.get(p_idx_for_current_tables) {
+                if let Some(table_nav_idx) = admin_state.table_list_state.selected() { // The '>' highlighted table
+                    if let Some(navigated_table) = current_profile_showing_tables.tables.get(table_nav_idx) {
+                        deps_pane_title_table_name = navigated_table.name.clone();
+                        dependencies_to_display = navigated_table.depends_on.clone();
+                    } else {
+                        dependencies_to_display = Vec::new(); // Navigated table index out of bounds
+                    }
+                } else {
+                    dependencies_to_display = Vec::new(); // No table navigated with '>'
+                }
+            } else {
+                dependencies_to_display = Vec::new(); // Profile for tables out of bounds
+            }
+        } else {
+            dependencies_to_display = Vec::new(); // No profile active for table display
+        }
+    } else {
+        // Otherwise, show dependencies for the '[*]' persistently selected table & profile.
+        if let Some(p_idx) = admin_state.selected_profile_index { // Must be a persistently selected profile
+            if let Some(selected_profile) = app_state.profile_tree.profiles.get(p_idx) {
+                if let Some(t_idx) = admin_state.selected_table_index { // Must be a persistently selected table
+                    if let Some(selected_table) = selected_profile.tables.get(t_idx) {
+                        deps_pane_title_table_name = selected_table.name.clone();
+                        dependencies_to_display = selected_table.depends_on.clone();
+                    } else { dependencies_to_display = Vec::new(); }
+                } else { dependencies_to_display = Vec::new(); }
+            } else { dependencies_to_display = Vec::new(); }
+        } else { dependencies_to_display = Vec::new(); }
+    }
+
+    let deps_block = Block::default()
+        .title(format!(" Dependencies (Table: {}) ", deps_pane_title_table_name))
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.border));
+    let deps_inner_area = deps_block.inner(deps_pane);
+    f.render_widget(deps_block, deps_pane);
+
+    let mut deps_content = Text::default();
+    deps_content.lines.push(Line::from(Span::styled(
+                "Depends On:",
+                Style::default().fg(theme.accent),
+    )));
+
+    if !dependencies_to_display.is_empty() {
+        for dep in dependencies_to_display {
+            deps_content.lines.push(Line::from(Span::styled(format!("- {}", dep), theme.fg)));
+        }
+    } else {
+        deps_content.lines.push(Line::from(Span::styled("  None", theme.secondary)));
+    }
+    let deps_paragraph = Paragraph::new(deps_content);
+    f.render_widget(deps_paragraph, deps_inner_area);
+
+    // --- Buttons Row ---
+    let button_chunks = Layout::default().direction(Direction::Horizontal).constraints([Constraint::Percentage(33), Constraint::Percentage(34), Constraint::Percentage(33)].as_ref()).split(buttons_area);
+    let btn_base_style = Style::default().fg(theme.secondary);
+    let get_btn_style = |button_focus: AdminFocus| { if admin_state.current_focus == button_focus { btn_base_style.add_modifier(ratatui::style::Modifier::REVERSED) } else { btn_base_style } };
+    let btn1 = Paragraph::new("Add Logic").style(get_btn_style(AdminFocus::Button1)).alignment(Alignment::Center);
+    let btn2 = Paragraph::new("Add Table").style(get_btn_style(AdminFocus::Button2)).alignment(Alignment::Center);
+    let btn3 = Paragraph::new("Change Table").style(get_btn_style(AdminFocus::Button3)).alignment(Alignment::Center);
+    f.render_widget(btn1, button_chunks[0]);
+    f.render_widget(btn2, button_chunks[1]);
+    f.render_widget(btn3, button_chunks[2]);
+}

client/src/components/auth.rs

@@ -0,0 +1,6 @@
+// src/components/form.rs
+pub mod login;
+pub mod register;
+
+pub use login::*;
+pub use register::*;

client/src/components/auth/login.rs

@@ -0,0 +1,149 @@
+// src/components/auth/login.rs
+
+use crate::{
+    config::colors::themes::Theme,
+    state::pages::auth::LoginState,
+    components::common::dialog,
+    state::app::state::AppState,
+};
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect, Margin},
+    style::{Style, Modifier, Color},
+    widgets::{Block, BorderType, Borders, Paragraph},
+    Frame,
+};
+use crate::state::app::highlight::HighlightState;
+
+pub fn render_login(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    login_state: &LoginState,
+    app_state: &AppState,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+) {
+    // Main container
+    let block = Block::default()
+        .borders(Borders::ALL)
+        .border_type(BorderType::Plain)
+        .border_style(Style::default().fg(theme.border))
+        .title(" Login ")
+        .style(Style::default().bg(theme.bg));
+
+    f.render_widget(block, area);
+
+    let inner_area = area.inner(Margin {
+        horizontal: 1,
+        vertical: 1,
+    });
+
+    // Layout chunks
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(4),  // Form (2 fields + padding)
+            Constraint::Length(1),  // Error message
+            Constraint::Length(3),  // Buttons
+        ])
+        .split(inner_area);
+
+    // --- FORM RENDERING ---
+    crate::components::handlers::canvas::render_canvas(
+        f,
+        chunks[0],
+        login_state,
+        &["Username/Email", "Password"],
+        &login_state.current_field,
+        &[&login_state.username, &login_state.password],
+        theme,
+        is_edit_mode,
+        highlight_state,
+    );
+
+    // --- ERROR MESSAGE ---
+    if let Some(err) = &login_state.error_message {
+        f.render_widget(
+            Paragraph::new(err.as_str())
+                .style(Style::default().fg(Color::Red))
+                .alignment(Alignment::Center),
+            chunks[1],
+        );
+    }
+
+    // --- BUTTONS ---
+    let button_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
+        .split(chunks[2]);
+
+    // Login Button
+    let login_button_index = 0;
+    let login_active = if app_state.ui.focus_outside_canvas {
+        app_state.focused_button_index== login_button_index
+    } else {
+        false
+    };    
+    let mut login_style = Style::default().fg(theme.fg);
+    let mut login_border = Style::default().fg(theme.border);
+    if login_active {
+        login_style = login_style.fg(theme.highlight).add_modifier(Modifier::BOLD);
+        login_border = login_border.fg(theme.accent);
+    }
+
+    f.render_widget(
+        Paragraph::new("Login")
+            .style(login_style)
+            .alignment(Alignment::Center)
+            .block(
+                Block::default()
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Plain)
+                    .border_style(login_border),
+            ),
+        button_chunks[0],
+    );
+
+    // Return Button
+    let return_button_index = 1; // Assuming Return is the second general element
+    let return_active = if app_state.ui.focus_outside_canvas {
+        app_state.focused_button_index== return_button_index
+    } else {
+        false // Not active if focus is in canvas or other modes
+    };    
+    let mut return_style = Style::default().fg(theme.fg);
+    let mut return_border = Style::default().fg(theme.border);
+    if return_active {
+        return_style = return_style.fg(theme.highlight).add_modifier(Modifier::BOLD);
+        return_border = return_border.fg(theme.accent);
+    }
+
+    f.render_widget(
+        Paragraph::new("Return")
+            .style(return_style)
+            .alignment(Alignment::Center)
+            .block(
+                Block::default()
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Plain)
+                    .border_style(return_border),
+            ),
+        button_chunks[1],
+    );
+
+    // --- DIALOG ---
+    // Check the correct field name for showing the dialog
+    if app_state.ui.dialog.dialog_show {
+        // Pass all 7 arguments correctly
+        dialog::render_dialog(
+            f,
+            f.area(),
+            theme,
+            &app_state.ui.dialog.dialog_title,
+            &app_state.ui.dialog.dialog_message,
+            &app_state.ui.dialog.dialog_buttons, // Pass buttons slice
+            app_state.ui.dialog.dialog_active_button_index, 
+            app_state.ui.dialog.is_loading,
+        );
+    }
+}

client/src/components/auth/register.rs

@@ -0,0 +1,174 @@
+// src/components/auth/register.rs
+
+use crate::{
+    config::colors::themes::Theme,
+    state::pages::auth::RegisterState, // Use RegisterState
+    components::common::{dialog, autocomplete},    
+    state::app::state::AppState,
+    state::pages::canvas_state::CanvasState,
+    modes::handlers::mode_manager::AppMode,
+};
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect, Margin},
+    style::{Style, Modifier, Color},
+    widgets::{Block, BorderType, Borders, Paragraph},
+    Frame,
+};
+use crate::state::app::highlight::HighlightState;
+
+pub fn render_register(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    state: &RegisterState, // Use RegisterState
+    app_state: &AppState,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+) {
+    let block = Block::default()
+        .borders(Borders::ALL)
+        .border_type(BorderType::Plain)
+        .border_style(Style::default().fg(theme.border))
+        .title(" Register ") // Update title
+        .style(Style::default().bg(theme.bg));
+
+    f.render_widget(block, area);
+
+    let inner_area = area.inner(Margin {
+        horizontal: 1,
+        vertical: 1,
+    });
+
+    // Adjust constraints for 4 fields + error + buttons
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(7), // Form (5 fields + padding)
+            Constraint::Length(1), // Help text line
+            Constraint::Length(1), // Error message
+            Constraint::Length(3), // Buttons
+        ])
+        .split(inner_area);
+
+    // --- FORM RENDERING (Using render_canvas) ---
+    let active_field_rect = crate::components::handlers::canvas::render_canvas(
+        f,
+        chunks[0], // Area for the canvas
+        state,     // The state object (RegisterState)
+        &[         // Field labels
+            "Username",
+            "Email*",
+            "Password*",
+            "Confirm Password",
+            "Role* (Tab)",
+        ],
+        &state.current_field(), // Pass current field index
+        &state.inputs().iter().map(|s| *s).collect::<Vec<&String>>(), // Pass inputs directly
+        theme,
+        is_edit_mode,
+        highlight_state,
+    );
+
+    // --- HELP TEXT ---
+    let help_text = Paragraph::new("* are optional fields")
+        .style(Style::default().fg(theme.fg))
+        .alignment(Alignment::Center);
+    f.render_widget(help_text, chunks[1]);
+
+   
+    // --- ERROR MESSAGE ---
+    if let Some(err) = &state.error_message {
+        f.render_widget(
+            Paragraph::new(err.as_str())
+                .style(Style::default().fg(Color::Red))
+                .alignment(Alignment::Center),
+            chunks[2],
+        );
+    }
+
+    // --- BUTTONS ---
+    let button_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
+        .split(chunks[3]);
+
+    // Register Button
+    let register_button_index = 0;
+    let register_active = if app_state.ui.focus_outside_canvas {
+        app_state.focused_button_index== register_button_index
+    } else {
+        false
+    };
+    let mut register_style = Style::default().fg(theme.fg);
+    let mut register_border = Style::default().fg(theme.border);
+    if register_active {
+        register_style = register_style.fg(theme.highlight).add_modifier(Modifier::BOLD);
+        register_border = register_border.fg(theme.accent);
+    }
+
+    f.render_widget(
+        Paragraph::new("Register") // Update button text
+            .style(register_style)
+            .alignment(Alignment::Center)
+            .block(
+                Block::default()
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Plain)
+                    .border_style(register_border),
+            ),
+        button_chunks[0],
+    );
+
+    // Return Button (logic remains similar)
+    let return_button_index = 1;
+    let return_active = if app_state.ui.focus_outside_canvas {
+        app_state.focused_button_index== return_button_index
+    } else {
+        false
+    };
+    let mut return_style = Style::default().fg(theme.fg);
+    let mut return_border = Style::default().fg(theme.border);
+    if return_active {
+        return_style = return_style.fg(theme.highlight).add_modifier(Modifier::BOLD);
+        return_border = return_border.fg(theme.accent);
+    }
+
+    f.render_widget(
+        Paragraph::new("Return")
+            .style(return_style)
+            .alignment(Alignment::Center)
+            .block(
+                Block::default()
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Plain)
+                    .border_style(return_border),
+            ),
+        button_chunks[1],
+    );
+
+    // --- Render Autocomplete Dropdown (Draw AFTER buttons) ---
+    if app_state.current_mode == AppMode::Edit {
+        if let Some(suggestions) = state.get_suggestions() {
+            let selected = state.get_selected_suggestion_index();
+            if !suggestions.is_empty() {
+                if let Some(input_rect) = active_field_rect {
+                    autocomplete::render_autocomplete_dropdown(f, input_rect, f.area(), theme, suggestions, selected);
+                }    
+            }
+        }
+    }
+
+    // --- DIALOG --- (Keep dialog logic)
+    if app_state.ui.dialog.dialog_show {
+        dialog::render_dialog(
+            f,
+            f.area(),
+            theme,
+            &app_state.ui.dialog.dialog_title,
+            &app_state.ui.dialog.dialog_message,
+            &app_state.ui.dialog.dialog_buttons,
+            app_state.ui.dialog.dialog_active_button_index,
+            app_state.ui.dialog.is_loading,
+        );
+    }
+}

client/src/components/common.rs

@@ -1,8 +1,18 @@
 // src/components/common.rs
 pub mod command_line;
 pub mod status_line;
+pub mod text_editor;
 pub mod background;
+pub mod dialog;
+pub mod autocomplete;
+pub mod search_palette;
+pub mod find_file_palette;
 
 pub use command_line::*;
 pub use status_line::*;
+pub use text_editor::*;
 pub use background::*;
+pub use dialog::*;
+pub use autocomplete::*;
+pub use search_palette::*;
+pub use find_file_palette::*;

client/src/components/common/autocomplete.rs

@@ -0,0 +1,153 @@
+// src/components/common/autocomplete.rs
+
+use crate::config::colors::themes::Theme;
+use crate::state::pages::form::FormState;
+use common::proto::komp_ac::search::search_response::Hit;
+use ratatui::{
+    layout::Rect,
+    style::{Color, Modifier, Style},
+    widgets::{Block, List, ListItem, ListState},
+    Frame,
+};
+use unicode_width::UnicodeWidthStr;
+
+/// Renders an opaque dropdown list for simple string-based suggestions.
+/// THIS IS THE RESTORED FUNCTION.
+pub fn render_autocomplete_dropdown(
+    f: &mut Frame,
+    input_rect: Rect,
+    frame_area: Rect,
+    theme: &Theme,
+    suggestions: &[String],
+    selected_index: Option<usize>,
+) {
+    if suggestions.is_empty() {
+        return;
+    }
+    let max_suggestion_width =
+        suggestions.iter().map(|s| s.width()).max().unwrap_or(0) as u16;
+    let horizontal_padding: u16 = 2;
+    let dropdown_width = (max_suggestion_width + horizontal_padding).max(10);
+    let dropdown_height = (suggestions.len() as u16).min(5);
+
+    let mut dropdown_area = Rect {
+        x: input_rect.x,
+        y: input_rect.y + 1,
+        width: dropdown_width,
+        height: dropdown_height,
+    };
+
+    if dropdown_area.bottom() > frame_area.height {
+        dropdown_area.y = input_rect.y.saturating_sub(dropdown_height);
+    }
+    if dropdown_area.right() > frame_area.width {
+        dropdown_area.x = frame_area.width.saturating_sub(dropdown_width);
+    }
+    dropdown_area.x = dropdown_area.x.max(0);
+    dropdown_area.y = dropdown_area.y.max(0);
+
+    let background_block =
+        Block::default().style(Style::default().bg(Color::DarkGray));
+    f.render_widget(background_block, dropdown_area);
+
+    let items: Vec<ListItem> = suggestions
+        .iter()
+        .enumerate()
+        .map(|(i, s)| {
+            let is_selected = selected_index == Some(i);
+            let s_width = s.width() as u16;
+            let padding_needed = dropdown_width.saturating_sub(s_width);
+            let padded_s =
+                format!("{}{}", s, " ".repeat(padding_needed as usize));
+
+            ListItem::new(padded_s).style(if is_selected {
+                Style::default()
+                    .fg(theme.bg)
+                    .bg(theme.highlight)
+                    .add_modifier(Modifier::BOLD)
+            } else {
+                Style::default().fg(theme.fg).bg(Color::DarkGray)
+            })
+        })
+        .collect();
+
+    let list = List::new(items);
+    let mut list_state = ListState::default();
+    list_state.select(selected_index);
+
+    f.render_stateful_widget(list, dropdown_area, &mut list_state);
+}
+
+/// Renders an opaque dropdown list for rich `Hit`-based suggestions.
+/// RENAMED from render_rich_autocomplete_dropdown
+pub fn render_hit_autocomplete_dropdown(
+    f: &mut Frame,
+    input_rect: Rect,
+    frame_area: Rect,
+    theme: &Theme,
+    suggestions: &[Hit],
+    selected_index: Option<usize>,
+    form_state: &FormState,
+) {
+    if suggestions.is_empty() {
+        return;
+    }
+
+    let display_names: Vec<String> = suggestions
+        .iter()
+        .map(|hit| form_state.get_display_name_for_hit(hit))
+        .collect();
+
+    let max_suggestion_width =
+        display_names.iter().map(|s| s.width()).max().unwrap_or(0) as u16;
+    let horizontal_padding: u16 = 2;
+    let dropdown_width = (max_suggestion_width + horizontal_padding).max(10);
+    let dropdown_height = (suggestions.len() as u16).min(5);
+
+    let mut dropdown_area = Rect {
+        x: input_rect.x,
+        y: input_rect.y + 1,
+        width: dropdown_width,
+        height: dropdown_height,
+    };
+
+    if dropdown_area.bottom() > frame_area.height {
+        dropdown_area.y = input_rect.y.saturating_sub(dropdown_height);
+    }
+    if dropdown_area.right() > frame_area.width {
+        dropdown_area.x = frame_area.width.saturating_sub(dropdown_width);
+    }
+    dropdown_area.x = dropdown_area.x.max(0);
+    dropdown_area.y = dropdown_area.y.max(0);
+
+    let background_block =
+        Block::default().style(Style::default().bg(Color::DarkGray));
+    f.render_widget(background_block, dropdown_area);
+
+    let items: Vec<ListItem> = display_names
+        .iter()
+        .enumerate()
+        .map(|(i, s)| {
+            let is_selected = selected_index == Some(i);
+            let s_width = s.width() as u16;
+            let padding_needed = dropdown_width.saturating_sub(s_width);
+            let padded_s =
+                format!("{}{}", s, " ".repeat(padding_needed as usize));
+
+            ListItem::new(padded_s).style(if is_selected {
+                Style::default()
+                    .fg(theme.bg)
+                    .bg(theme.highlight)
+                    .add_modifier(Modifier::BOLD)
+            } else {
+                Style::default().fg(theme.fg).bg(Color::DarkGray)
+            })
+        })
+        .collect();
+
+    let list = List::new(items);
+    let mut list_state = ListState::default();
+    list_state.select(selected_index);
+
+    f.render_stateful_widget(list, dropdown_area, &mut list_state);
+}

client/src/components/common/command_line.rs

@@ -1,4 +1,5 @@
-// src/client/components/command_line.rs
+// src/components/common/command_line.rs
+
 use ratatui::{
     widgets::{Block, Paragraph},
     style::Style,
@@ -6,30 +7,63 @@ use ratatui::{
     Frame,
 };
 use crate::config::colors::themes::Theme;
+use unicode_width::UnicodeWidthStr; // Import for width calculation
 
-pub fn render_command_line(f: &mut Frame, area: Rect, input: &str, active: bool, theme: &Theme, message: &str) {
-    let prompt = if active {
-        ":"
-    } else {
-        ""
+pub fn render_command_line(
+    f: &mut Frame,
+    area: Rect,
+    input: &str,    // This is event_handler.command_input
+    active: bool,   // This is event_handler.command_mode
+    theme: &Theme,
+    message: &str,  // This is event_handler.command_message
+) {
+    // Original logic for determining display_text
+    let display_text = if !active {
+        // If not in normal command mode, but there's a message (e.g. from Find File palette closing)
+        // Or if command mode is off and message is empty (render minimally)
+        if message.is_empty() {
+            "".to_string() // Render an empty string, background will cover
+        } else {
+            message.to_string()
+        }
+    } else { // active is true (normal command mode)
+        let prompt = ":";
+        if message.is_empty() || message == ":" {
+            format!("{}{}", prompt, input)
+        } else {
+            if input.is_empty() { // If command was just executed, input is cleared, show message
+                message.to_string()
+            } else { // Show input and message
+                format!("{}{} | {}", prompt, input, message)
+            }
+        }
     };
 
-    // Combine the prompt, input, and message
-    let display_text = if message.is_empty() {
-        format!("{}{}", prompt, input)
+    let content_width = UnicodeWidthStr::width(display_text.as_str());
+    let available_width = area.width as usize;
+    let padding_needed = available_width.saturating_sub(content_width);
+
+    let display_text_padded = if padding_needed > 0 {
+        format!("{}{}", display_text, " ".repeat(padding_needed))
     } else {
-        format!("{}{} | {}", prompt, input, message)
+        // If text is too long, ratatui's Paragraph will handle truncation.
+        // We could also truncate here if specific behavior is needed:
+        // display_text.chars().take(available_width).collect::<String>()
+        display_text
     };
 
-    let style = if active {
+    // Determine style based on active state, but apply to the whole paragraph
+    let text_style = if active {
         Style::default().fg(theme.accent)
     } else {
+        // If not active, but there's a message, use default foreground.
+        // If message is also empty, this style won't matter much for empty text.
         Style::default().fg(theme.fg)
     };
 
-    let paragraph = Paragraph::new(display_text)
-        .block(Block::default().style(Style::default().bg(theme.bg)))
-        .style(style);
+    let paragraph = Paragraph::new(display_text_padded)
+        .block(Block::default().style(Style::default().bg(theme.bg))) // Block ensures bg for whole area
+        .style(text_style); // Style for the text itself
 
     f.render_widget(paragraph, area);
 }

client/src/components/common/dialog.rs

@@ -0,0 +1,183 @@
+use crate::config::colors::themes::Theme;
+use ratatui::{
+    layout::{Constraint, Direction, Layout, Margin, Rect},
+    prelude::Alignment,
+    style::{Modifier, Style},
+    text::{Line, Span, Text},
+    widgets::{Block, BorderType, Borders, Paragraph, Clear},
+    Frame,
+};
+use unicode_segmentation::UnicodeSegmentation; // For grapheme clusters
+use unicode_width::UnicodeWidthStr; // For accurate width calculation
+
+pub fn render_dialog(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    dialog_title: &str,
+    dialog_message: &str,
+    dialog_buttons: &[String],
+    dialog_active_button_index: usize,
+    is_loading: bool,
+) {
+    // Calculate required height based on the actual number of lines in the message
+    let message_lines: Vec<_> = dialog_message.lines().collect();
+    let message_height = message_lines.len() as u16;
+    let button_row_height = if dialog_buttons.is_empty() { 0 } else { 3 };
+    let vertical_padding = 2; // Block borders (top/bottom)
+    let inner_vertical_margin = 2; // Margin inside block (top/bottom)
+
+    // Calculate required height based on actual message lines
+    let required_inner_height =
+        message_height + button_row_height + inner_vertical_margin;
+    let required_total_height = required_inner_height + vertical_padding;
+
+    // Use a fixed percentage width, clamped to min/max
+    let width_percentage: u16 = 60;
+    let dialog_width = (area.width * width_percentage / 100)
+        .max(20) // Minimum width
+        .min(area.width); // Maximum width
+
+    // Ensure height doesn't exceed available area
+    let dialog_height = required_total_height.min(area.height);
+
+    // Calculate centered area manually
+    let dialog_x = area.x + (area.width.saturating_sub(dialog_width)) / 2;
+    let dialog_y = area.y + (area.height.saturating_sub(dialog_height)) / 2;
+    let dialog_area = Rect::new(dialog_x, dialog_y, dialog_width, dialog_height);
+
+    // Clear the area first before drawing the dialog
+    f.render_widget(Clear, dialog_area);
+
+    let block = Block::default()
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.accent))
+        .title(format!(" {} ", dialog_title)) // Add padding to title
+        .style(Style::default().bg(theme.bg));
+
+    f.render_widget(block, dialog_area);
+
+    // Calculate inner area *after* defining the block
+    let inner_area = dialog_area.inner(Margin {
+        horizontal: 2, // Left/Right padding inside border
+        vertical: 1,   // Top/Bottom padding inside border
+    });
+
+    if is_loading {
+        // --- Loading State ---
+        let loading_text = Paragraph::new(dialog_message) // Use the message passed for loading
+            .style(Style::default().fg(theme.fg).add_modifier(Modifier::ITALIC))
+            .alignment(Alignment::Center);
+        // Render loading message centered in the inner area
+        f.render_widget(loading_text, inner_area);
+    } else {
+        // --- Normal State (Message + Buttons) ---
+
+        // Layout for Message and Buttons based on actual message height
+        let mut constraints = vec![
+            // Allocate space for message, ensuring at least 1 line height
+            Constraint::Length(message_height.max(1)), // Use actual calculated height
+        ];
+        if button_row_height > 0 {
+            constraints.push(Constraint::Length(button_row_height));
+        }
+
+        let chunks = Layout::default()
+            .direction(Direction::Vertical)
+            .constraints(constraints)
+            .split(inner_area);
+
+        // Render Message
+        let available_width = inner_area.width as usize;
+        let ellipsis = "...";
+        let ellipsis_width = UnicodeWidthStr::width(ellipsis);
+
+        let processed_lines: Vec<Line> = message_lines
+            .into_iter()
+            .map(|line| {
+                let line_width = UnicodeWidthStr::width(line);
+                if line_width > available_width {
+                    // Truncate with ellipsis
+                    let mut truncated_len = 0;
+                    let mut current_width = 0;
+                    for (idx, grapheme) in line.grapheme_indices(true) {
+                        let grapheme_width = UnicodeWidthStr::width(grapheme);
+                        if current_width + grapheme_width
+                            > available_width.saturating_sub(ellipsis_width)
+                        {
+                            break;
+                        }
+                        current_width += grapheme_width;
+                        truncated_len = idx + grapheme.len();
+                    }
+                    let truncated_line =
+                        format!("{}{}", &line[..truncated_len], ellipsis);
+                    Line::from(Span::styled(
+                            truncated_line,
+                            Style::default().fg(theme.fg),
+                    ))
+                } else {
+                    Line::from(Span::styled(line, Style::default().fg(theme.fg)))
+                }
+            })
+        .collect();
+
+        let message_paragraph =
+            Paragraph::new(Text::from(processed_lines)).alignment(Alignment::Center);
+        f.render_widget(message_paragraph, chunks[0]); // Render message in the first chunk
+
+        // Render Buttons if they exist and there's a chunk for them
+        if !dialog_buttons.is_empty() && chunks.len() > 1 {
+            let button_area = chunks[1];
+            let button_count = dialog_buttons.len();
+
+            let button_constraints = std::iter::repeat(Constraint::Ratio(
+                    1,
+                    button_count as u32,
+            ))
+                .take(button_count)
+                .collect::<Vec<_>>();
+
+            let button_chunks = Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(button_constraints)
+                .horizontal_margin(1) // Add space between buttons
+                .split(button_area);
+
+            for (i, button_label) in dialog_buttons.iter().enumerate() {
+                if i >= button_chunks.len() {
+                    break;
+                }
+
+                let is_active = i == dialog_active_button_index;
+                let (button_style, border_style) = if is_active {
+                    (
+                        Style::default()
+                        .fg(theme.highlight)
+                        .add_modifier(Modifier::BOLD),
+                        Style::default().fg(theme.accent),
+                    )
+                } else {
+                    (
+                        Style::default().fg(theme.fg),
+                        Style::default().fg(theme.border),
+                    )
+                };
+
+                let button_block = Block::default()
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Plain)
+                    .border_style(border_style);
+
+                f.render_widget(
+                    Paragraph::new(button_label.as_str())
+                    .block(button_block)
+                    .style(button_style)
+                    .alignment(Alignment::Center),
+                    button_chunks[i],
+                );
+            }
+        }
+    }
+}

client/src/components/common/find_file_palette.rs

@@ -0,0 +1,142 @@
+// src/components/common/find_file_palette.rs
+
+use crate::config::colors::themes::Theme;
+use crate::modes::general::command_navigation::NavigationState; // Corrected path
+use ratatui::{
+    layout::{Constraint, Direction, Layout, Rect},
+    style::Style,
+    widgets::{Block, List, ListItem, Paragraph},
+    Frame,
+};
+use unicode_width::UnicodeWidthStr;
+
+const PALETTE_MAX_VISIBLE_OPTIONS: usize = 15;
+const PADDING_CHAR: &str = " ";
+
+pub fn render_find_file_palette(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    navigation_state: &NavigationState,
+) {
+    let palette_display_input = navigation_state.get_display_input(); // Use the new method
+
+    let num_total_filtered = navigation_state.filtered_options.len();
+    let current_selected_list_idx = navigation_state.selected_index;
+
+    let mut display_start_offset = 0;
+    if num_total_filtered > PALETTE_MAX_VISIBLE_OPTIONS {
+        if let Some(sel_idx) = current_selected_list_idx {
+            if sel_idx >= display_start_offset + PALETTE_MAX_VISIBLE_OPTIONS {
+                display_start_offset = sel_idx - PALETTE_MAX_VISIBLE_OPTIONS + 1;
+            } else if sel_idx < display_start_offset {
+                display_start_offset = sel_idx;
+            }
+            display_start_offset = display_start_offset
+                .min(num_total_filtered.saturating_sub(PALETTE_MAX_VISIBLE_OPTIONS));
+        }
+    }
+    display_start_offset = display_start_offset.max(0);
+
+    let display_end_offset = (display_start_offset + PALETTE_MAX_VISIBLE_OPTIONS)
+        .min(num_total_filtered);
+
+    // navigation_state.filtered_options is Vec<(usize, String)>
+    // We only need the String part for display.
+    let visible_options_slice: Vec<&String> = if num_total_filtered > 0 {
+        navigation_state.filtered_options
+            [display_start_offset..display_end_offset]
+            .iter()
+            .map(|(_, opt_str)| opt_str)
+            .collect()
+    } else {
+        Vec::new()
+    };
+
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(1), // For palette input line
+            Constraint::Min(0), // For options list, take remaining space
+        ])
+        .split(area);
+    
+    // Ensure list_area height does not exceed PALETTE_MAX_VISIBLE_OPTIONS
+    let list_area_height = std::cmp::min(chunks[1].height, PALETTE_MAX_VISIBLE_OPTIONS as u16);
+    let final_list_area = Rect::new(chunks[1].x, chunks[1].y, chunks[1].width, list_area_height);
+
+
+    let input_area = chunks[0];
+    // let list_area = chunks[1]; // Use final_list_area
+
+    let prompt_prefix = match navigation_state.navigation_type {
+        crate::modes::general::command_navigation::NavigationType::FindFile => "Find File: ",
+        crate::modes::general::command_navigation::NavigationType::TableTree => "Table Path: ",
+    };
+    let base_prompt_text = format!("{}{}", prompt_prefix, palette_display_input);
+    let prompt_text_width = UnicodeWidthStr::width(base_prompt_text.as_str());
+    let input_area_width = input_area.width as usize;
+    let input_padding_needed =
+        input_area_width.saturating_sub(prompt_text_width);
+
+    let padded_prompt_text = if input_padding_needed > 0 {
+        format!(
+            "{}{}",
+            base_prompt_text,
+            PADDING_CHAR.repeat(input_padding_needed)
+        )
+    } else {
+        base_prompt_text
+    };
+
+    let input_paragraph = Paragraph::new(padded_prompt_text)
+        .style(Style::default().fg(theme.accent).bg(theme.bg));
+    f.render_widget(input_paragraph, input_area);
+
+    let mut display_list_items: Vec<ListItem> =
+        Vec::with_capacity(PALETTE_MAX_VISIBLE_OPTIONS);
+
+    for (idx_in_visible_slice, opt_str) in
+        visible_options_slice.iter().enumerate()
+    {
+        // The selected_index in navigation_state is relative to the full filtered_options list.
+        // We need to check if the current item (from the visible slice) corresponds to the selected_index.
+        let original_filtered_idx = display_start_offset + idx_in_visible_slice;
+        let is_selected =
+            current_selected_list_idx == Some(original_filtered_idx);
+
+        let style = if is_selected {
+            Style::default().fg(theme.bg).bg(theme.accent)
+        } else {
+            Style::default().fg(theme.fg).bg(theme.bg)
+        };
+
+        let opt_width = opt_str.width() as u16;
+        let list_item_width = final_list_area.width;
+        let padding_amount = list_item_width.saturating_sub(opt_width);
+        let padded_opt_str = format!(
+            "{}{}",
+            opt_str,
+            PADDING_CHAR.repeat(padding_amount as usize)
+        );
+        display_list_items.push(ListItem::new(padded_opt_str).style(style));
+    }
+
+    // Fill remaining lines in the list area to maintain fixed height appearance
+    let num_rendered_options = display_list_items.len();
+    if num_rendered_options < PALETTE_MAX_VISIBLE_OPTIONS && (final_list_area.height as usize) > num_rendered_options {
+        for _ in num_rendered_options..(final_list_area.height as usize) {
+            let empty_padded_str =
+                PADDING_CHAR.repeat(final_list_area.width as usize);
+            display_list_items.push(
+                ListItem::new(empty_padded_str)
+                    .style(Style::default().fg(theme.bg).bg(theme.bg)),
+            );
+        }
+    }
+
+
+    let options_list_widget = List::new(display_list_items)
+        .block(Block::default().style(Style::default().bg(theme.bg)));
+    f.render_widget(options_list_widget, final_list_area);
+}

client/src/components/common/search_palette.rs

@@ -0,0 +1,121 @@
+// src/components/common/search_palette.rs
+
+use crate::config::colors::themes::Theme;
+use crate::state::app::search::SearchState;
+use ratatui::{
+    layout::{Constraint, Direction, Layout, Rect},
+    style::{Modifier, Style},
+    text::{Line, Span},
+    widgets::{Block, Borders, Clear, List, ListItem, Paragraph},
+    Frame,
+};
+
+/// Renders the search palette dialog over the main UI.
+pub fn render_search_palette(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    state: &SearchState,
+) {
+    // --- Dialog Area Calculation ---
+    let height = (area.height as f32 * 0.7).min(30.0) as u16;
+    let width = (area.width as f32 * 0.6).min(100.0) as u16;
+    let dialog_area = Rect {
+        x: area.x + (area.width - width) / 2,
+        y: area.y + (area.height - height) / 4,
+        width,
+        height,
+    };
+
+    f.render_widget(Clear, dialog_area); // Clear background
+
+    let block = Block::default()
+        .title(format!(" Search in '{}' ", state.table_name))
+        .borders(Borders::ALL)
+        .border_style(Style::default().fg(theme.accent));
+    f.render_widget(block.clone(), dialog_area);
+
+    // --- Inner Layout (Input + Results) ---
+    let inner_chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .margin(1)
+        .constraints([
+            Constraint::Length(3), // For input box
+            Constraint::Min(0),    // For results list
+        ])
+        .split(dialog_area);
+
+    // --- Render Input Box ---
+    let input_block = Block::default()
+        .title("Query")
+        .borders(Borders::ALL)
+        .border_style(Style::default().fg(theme.border));
+    let input_text = Paragraph::new(state.input.as_str())
+        .block(input_block)
+        .style(Style::default().fg(theme.fg));
+    f.render_widget(input_text, inner_chunks[0]);
+    // Set cursor position
+    f.set_cursor(
+        inner_chunks[0].x + state.cursor_position as u16 + 1,
+        inner_chunks[0].y + 1,
+    );
+
+    // --- Render Results List ---
+    if state.is_loading {
+        let loading_p = Paragraph::new("Searching...")
+            .style(Style::default().fg(theme.fg).add_modifier(Modifier::ITALIC));
+        f.render_widget(loading_p, inner_chunks[1]);
+    } else {
+        let list_items: Vec<ListItem> = state
+            .results
+            .iter()
+            .map(|hit| {
+                // Parse the JSON string to make it readable
+                let content_summary = match serde_json::from_str::<
+                    serde_json::Value,
+                >(&hit.content_json)
+                {
+                    Ok(json) => {
+                        if let Some(obj) = json.as_object() {
+                            // Create a summary from the first few non-null string values
+                            obj.values()
+                                .filter_map(|v| v.as_str())
+                                .filter(|s| !s.is_empty())
+                                .take(3)
+                                .collect::<Vec<_>>()
+                                .join(" | ")
+                        } else {
+                            "Non-object JSON".to_string()
+                        }
+                    }
+                    Err(_) => "Invalid JSON content".to_string(),
+                };
+
+                let line = Line::from(vec![
+                    Span::styled(
+                        format!("{:<4.2} ", hit.score),
+                        Style::default().fg(theme.accent),
+                    ),
+                    Span::raw(content_summary),
+                ]);
+                ListItem::new(line)
+            })
+            .collect();
+
+        let results_list = List::new(list_items)
+            .block(Block::default().title("Results"))
+            .highlight_style(
+                Style::default()
+                    .bg(theme.highlight)
+                    .fg(theme.bg)
+                    .add_modifier(Modifier::BOLD),
+            )
+            .highlight_symbol(">> ");
+
+        // We need a mutable ListState to render the selection
+        let mut list_state =
+            ratatui::widgets::ListState::default().with_selected(Some(state.selected_index));
+
+        f.render_stateful_widget(results_list, inner_chunks[1], &mut list_state);
+    }
+}

client/src/components/common/status_line.rs

@@ -1,13 +1,15 @@
-// src/client/components/handlers/status_line.rs
-use ratatui::{
-    widgets::Paragraph,
-    style::Style,
-    layout::Rect,
-    Frame,
-    text::{Line, Span},
-};
+// client/src/components/common/status_line.rs
 use crate::config::colors::themes::Theme;
+use crate::state::app::state::AppState;
+use ratatui::{
+    layout::Rect,
+    style::Style,
+    text::{Line, Span, Text},
+    widgets::{Paragraph, Wrap}, // Make sure Wrap is imported
+    Frame,
+};
 use std::path::Path;
+use unicode_width::UnicodeWidthStr;
 
 pub fn render_status_line(
     f: &mut Frame,
@@ -15,66 +17,138 @@ pub fn render_status_line(
     current_dir: &str,
     theme: &Theme,
     is_edit_mode: bool,
+    current_fps: f64,
+    app_state: &AppState,
 ) {
-    // Program name and version
-    let program_info = format!("multieko2 v{}", env!("CARGO_PKG_VERSION"));
+    #[cfg(feature = "ui-debug")]
+    {
+        if let Some(debug_state) = &app_state.debug_state {
+            let paragraph = if debug_state.is_error {
+                // --- THIS IS THE CRITICAL LOGIC FOR ERRORS ---
+                // 1. Create a `Text` object, which can contain multiple lines.
+                let error_text = Text::from(debug_state.displayed_message.clone());
 
-    let mode_text = if is_edit_mode {
-        "[EDIT]"
-    } else {
-        "[READ-ONLY]"
-    };
+                // 2. Create a Paragraph from the Text and TELL IT TO WRAP.
+                Paragraph::new(error_text)
+                    .wrap(Wrap { trim: true }) // This line makes the text break into new rows.
+                    .style(Style::default().bg(theme.highlight).fg(theme.bg))
+            } else {
+                // --- This is for normal, single-line info messages ---
+                Paragraph::new(debug_state.displayed_message.as_str())
+                    .style(Style::default().fg(theme.accent).bg(theme.bg))
+            };
+            f.render_widget(paragraph, area);
+        } else {
+            // Fallback for when debug state is None
+            let paragraph = Paragraph::new("").style(Style::default().bg(theme.bg));
+            f.render_widget(paragraph, area);
+        }
+        return; // Stop here and don't render the normal status line.
+    }
 
-    // Shorten the current directory path
-    let home_dir = dirs::home_dir().map(|p| p.to_string_lossy().into_owned()).unwrap_or_default();
+    // --- The normal status line rendering logic (unchanged) ---
+    let program_info = format!("komp_ac v{}", env!("CARGO_PKG_VERSION"));
+    let mode_text = if is_edit_mode { "[EDIT]" } else { "[READ-ONLY]" };
+
+    let home_dir = dirs::home_dir()
+        .map(|p| p.to_string_lossy().into_owned())
+        .unwrap_or_default();
     let display_dir = if current_dir.starts_with(&home_dir) {
         current_dir.replacen(&home_dir, "~", 1)
     } else {
         current_dir.to_string()
     };
 
-    // Create the full status line text
-    let full_text = format!("{} | {} | {}", mode_text, display_dir, program_info);
-
-    // Check if the full text fits in the available width
     let available_width = area.width as usize;
-    let mut display_text = if full_text.len() <= available_width {
-        // If it fits, use the full text
-        full_text
+    let mode_width = UnicodeWidthStr::width(mode_text);
+    let program_info_width = UnicodeWidthStr::width(program_info.as_str());
+    let fps_text = format!("{:.0} FPS", current_fps);
+    let fps_width = UnicodeWidthStr::width(fps_text.as_str());
+    let separator = " | ";
+    let separator_width = UnicodeWidthStr::width(separator);
+
+    let fixed_width_with_fps = mode_width
+        + separator_width
+        + separator_width
+        + program_info_width
+        + separator_width
+        + fps_width;
+
+    let show_fps = fixed_width_with_fps <= available_width;
+
+    let remaining_width_for_dir = available_width.saturating_sub(
+        mode_width
+            + separator_width
+            + separator_width
+            + program_info_width
+            + (if show_fps {
+                separator_width + fps_width
+            } else {
+                0
+            }),
+    );
+
+    let dir_display_text_str = if UnicodeWidthStr::width(display_dir.as_str())
+        <= remaining_width_for_dir
+    {
+        display_dir
     } else {
-        // If it doesn't fit, prioritize mode and program info, and show only the directory name
         let dir_name = Path::new(current_dir)
             .file_name()
             .and_then(|n| n.to_str())
             .unwrap_or(current_dir);
-        format!("{} | {} | {}", mode_text, dir_name, program_info)
+        if UnicodeWidthStr::width(dir_name) <= remaining_width_for_dir {
+            dir_name.to_string()
+        } else {
+            dir_name
+                .chars()
+                .take(remaining_width_for_dir)
+                .collect::<String>()
+        }
     };
 
-    // If even the shortened version overflows, truncate it
-    if display_text.len() > available_width {
-        display_text = display_text.chars().take(available_width).collect();
+    let mut current_content_width = mode_width
+        + separator_width
+        + UnicodeWidthStr::width(dir_display_text_str.as_str())
+        + separator_width
+        + program_info_width;
+    if show_fps {
+        current_content_width += separator_width + fps_width;
     }
 
-    // Create the status line text using Line and Span
-    let status_line = Line::from(vec![
+    let mut line_spans = vec![
         Span::styled(mode_text, Style::default().fg(theme.accent)),
-        Span::styled(" | ", Style::default().fg(theme.border)),
+        Span::styled(separator, Style::default().fg(theme.border)),
         Span::styled(
-            display_text.split(" | ").nth(1).unwrap_or(""), // Directory part
+            dir_display_text_str.as_str(),
             Style::default().fg(theme.fg),
         ),
-        Span::styled(" | ", Style::default().fg(theme.border)),
+        Span::styled(separator, Style::default().fg(theme.border)),
         Span::styled(
-            program_info,
-            Style::default()
-                .fg(theme.secondary)
-                .add_modifier(ratatui::style::Modifier::BOLD),
+            program_info.as_str(),
+            Style::default().fg(theme.secondary),
         ),
-    ]);
+    ];
 
-    // Render the status line
-    let paragraph = Paragraph::new(status_line)
-        .style(Style::default().bg(theme.bg));
+    if show_fps {
+        line_spans
+            .push(Span::styled(separator, Style::default().fg(theme.border)));
+        line_spans.push(Span::styled(
+            fps_text.as_str(),
+            Style::default().fg(theme.secondary),
+        ));
+    }
+
+    let padding_needed = available_width.saturating_sub(current_content_width);
+    if padding_needed > 0 {
+        line_spans.push(Span::styled(
+            " ".repeat(padding_needed),
+            Style::default().bg(theme.bg),
+        ));
+    }
+
+    let paragraph =
+        Paragraph::new(Line::from(line_spans)).style(Style::default().bg(theme.bg));
 
     f.render_widget(paragraph, area);
 }

client/src/components/common/text_editor.rs

@@ -0,0 +1,331 @@
+// src/components/common/text_editor.rs
+use crate::config::binds::config::{EditorConfig, EditorKeybindingMode};
+use crossterm::event::{KeyEvent, KeyCode, KeyModifiers};
+use ratatui::style::{Color, Style, Modifier};
+use tui_textarea::{Input, Key, TextArea, CursorMove};
+use std::fmt;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum VimMode {
+    Normal,
+    Insert,
+    Visual,
+    Operator(char),
+}
+
+impl VimMode {
+    pub fn cursor_style(&self) -> Style {
+        let color = match self {
+            Self::Normal => Color::Reset,
+            Self::Insert => Color::LightBlue,
+            Self::Visual => Color::LightYellow,
+            Self::Operator(_) => Color::LightGreen,
+        };
+        Style::default().fg(color).add_modifier(Modifier::REVERSED)
+    }
+}
+
+impl fmt::Display for VimMode {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> Result<(), fmt::Error> {
+        match self {
+            Self::Normal => write!(f, "NORMAL"),
+            Self::Insert => write!(f, "INSERT"),
+            Self::Visual => write!(f, "VISUAL"),
+            Self::Operator(c) => write!(f, "OPERATOR({})", c),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+enum Transition {
+    Nop,
+    Mode(VimMode),
+    Pending(Input),
+}
+
+#[derive(Debug, Clone)]
+pub struct VimState {
+    pub mode: VimMode,
+    pub pending: Input,
+}
+
+impl Default for VimState {
+    fn default() -> Self {
+        Self {
+            mode: VimMode::Normal,
+            pending: Input::default(),
+        }
+    }
+}
+
+impl VimState {
+    pub fn new(mode: VimMode) -> Self {
+        Self {
+            mode,
+            pending: Input::default(),
+        }
+    }
+
+    fn with_pending(self, pending: Input) -> Self {
+        Self {
+            mode: self.mode,
+            pending,
+        }
+    }
+
+    fn transition(&self, input: Input, textarea: &mut TextArea<'_>) -> Transition {
+        if input.key == Key::Null {
+            return Transition::Nop;
+        }
+
+        match self.mode {
+            VimMode::Normal | VimMode::Visual | VimMode::Operator(_) => {
+                match input {
+                    Input { key: Key::Char('h'), .. } => textarea.move_cursor(CursorMove::Back),
+                    Input { key: Key::Char('j'), .. } => textarea.move_cursor(CursorMove::Down),
+                    Input { key: Key::Char('k'), .. } => textarea.move_cursor(CursorMove::Up),
+                    Input { key: Key::Char('l'), .. } => textarea.move_cursor(CursorMove::Forward),
+                    Input { key: Key::Char('w'), .. } => textarea.move_cursor(CursorMove::WordForward),
+                    Input { key: Key::Char('e'), ctrl: false, .. } => {
+                        textarea.move_cursor(CursorMove::WordEnd);
+                        if matches!(self.mode, VimMode::Operator(_)) {
+                            textarea.move_cursor(CursorMove::Forward);
+                        }
+                    }
+                    Input { key: Key::Char('b'), ctrl: false, .. } => textarea.move_cursor(CursorMove::WordBack),
+                    Input { key: Key::Char('^'), .. } => textarea.move_cursor(CursorMove::Head),
+                    Input { key: Key::Char('$'), .. } => textarea.move_cursor(CursorMove::End),
+                    Input { key: Key::Char('0'), .. } => textarea.move_cursor(CursorMove::Head),
+                    Input { key: Key::Char('D'), .. } => {
+                        textarea.delete_line_by_end();
+                        return Transition::Mode(VimMode::Normal);
+                    }
+                    Input { key: Key::Char('C'), .. } => {
+                        textarea.delete_line_by_end();
+                        textarea.cancel_selection();
+                        return Transition::Mode(VimMode::Insert);
+                    }
+                    Input { key: Key::Char('p'), .. } => {
+                        textarea.paste();
+                        return Transition::Mode(VimMode::Normal);
+                    }
+                    Input { key: Key::Char('u'), ctrl: false, .. } => {
+                        textarea.undo();
+                        return Transition::Mode(VimMode::Normal);
+                    }
+                    Input { key: Key::Char('r'), ctrl: true, .. } => {
+                        textarea.redo();
+                        return Transition::Mode(VimMode::Normal);
+                    }
+                    Input { key: Key::Char('x'), .. } => {
+                        textarea.delete_next_char();
+                        return Transition::Mode(VimMode::Normal);
+                    }
+                    Input { key: Key::Char('i'), .. } => {
+                        textarea.cancel_selection();
+                        return Transition::Mode(VimMode::Insert);
+                    }
+                    Input { key: Key::Char('a'), .. } => {
+                        textarea.cancel_selection();
+                        textarea.move_cursor(CursorMove::Forward);
+                        return Transition::Mode(VimMode::Insert);
+                    }
+                    Input { key: Key::Char('A'), .. } => {
+                        textarea.cancel_selection();
+                        textarea.move_cursor(CursorMove::End);
+                        return Transition::Mode(VimMode::Insert);
+                    }
+                    Input { key: Key::Char('o'), .. } => {
+                        textarea.move_cursor(CursorMove::End);
+                        textarea.insert_newline();
+                        return Transition::Mode(VimMode::Insert);
+                    }
+                    Input { key: Key::Char('O'), .. } => {
+                        textarea.move_cursor(CursorMove::Head);
+                        textarea.insert_newline();
+                        textarea.move_cursor(CursorMove::Up);
+                        return Transition::Mode(VimMode::Insert);
+                    }
+                    Input { key: Key::Char('I'), .. } => {
+                        textarea.cancel_selection();
+                        textarea.move_cursor(CursorMove::Head);
+                        return Transition::Mode(VimMode::Insert);
+                    }
+                    Input { key: Key::Char('v'), ctrl: false, .. } if self.mode == VimMode::Normal => {
+                        textarea.start_selection();
+                        return Transition::Mode(VimMode::Visual);
+                    }
+                    Input { key: Key::Char('V'), ctrl: false, .. } if self.mode == VimMode::Normal => {
+                        textarea.move_cursor(CursorMove::Head);
+                        textarea.start_selection();
+                        textarea.move_cursor(CursorMove::End);
+                        return Transition::Mode(VimMode::Visual);
+                    }
+                    Input { key: Key::Esc, .. } | Input { key: Key::Char('v'), ctrl: false, .. } if self.mode == VimMode::Visual => {
+                        textarea.cancel_selection();
+                        return Transition::Mode(VimMode::Normal);
+                    }
+                    Input { key: Key::Char('g'), ctrl: false, .. } if matches!(
+                        self.pending,
+                        Input { key: Key::Char('g'), ctrl: false, .. }
+                    ) => {
+                        textarea.move_cursor(CursorMove::Top)
+                    }
+                    Input { key: Key::Char('G'), ctrl: false, .. } => textarea.move_cursor(CursorMove::Bottom),
+                    Input { key: Key::Char(c), ctrl: false, .. } if self.mode == VimMode::Operator(c) => {
+                        textarea.move_cursor(CursorMove::Head);
+                        textarea.start_selection();
+                        let cursor = textarea.cursor();
+                        textarea.move_cursor(CursorMove::Down);
+                        if cursor == textarea.cursor() {
+                            textarea.move_cursor(CursorMove::End);
+                        }
+                    }
+                    Input { key: Key::Char(op @ ('y' | 'd' | 'c')), ctrl: false, .. } if self.mode == VimMode::Normal => {
+                        textarea.start_selection();
+                        return Transition::Mode(VimMode::Operator(op));
+                    }
+                    Input { key: Key::Char('y'), ctrl: false, .. } if self.mode == VimMode::Visual => {
+                        textarea.move_cursor(CursorMove::Forward);
+                        textarea.copy();
+                        return Transition::Mode(VimMode::Normal);
+                    }
+                    Input { key: Key::Char('d'), ctrl: false, .. } if self.mode == VimMode::Visual => {
+                        textarea.move_cursor(CursorMove::Forward);
+                        textarea.cut();
+                        return Transition::Mode(VimMode::Normal);
+                    }
+                    Input { key: Key::Char('c'), ctrl: false, .. } if self.mode == VimMode::Visual => {
+                        textarea.move_cursor(CursorMove::Forward);
+                        textarea.cut();
+                        return Transition::Mode(VimMode::Insert);
+                    }
+                    // Arrow keys work in normal mode
+                    Input { key: Key::Up, .. } => textarea.move_cursor(CursorMove::Up),
+                    Input { key: Key::Down, .. } => textarea.move_cursor(CursorMove::Down),
+                    Input { key: Key::Left, .. } => textarea.move_cursor(CursorMove::Back),
+                    Input { key: Key::Right, .. } => textarea.move_cursor(CursorMove::Forward),
+                    input => return Transition::Pending(input),
+                }
+
+                // Handle the pending operator
+                match self.mode {
+                    VimMode::Operator('y') => {
+                        textarea.copy();
+                        Transition::Mode(VimMode::Normal)
+                    }
+                    VimMode::Operator('d') => {
+                        textarea.cut();
+                        Transition::Mode(VimMode::Normal)
+                    }
+                    VimMode::Operator('c') => {
+                        textarea.cut();
+                        Transition::Mode(VimMode::Insert)
+                    }
+                    _ => Transition::Nop,
+                }
+            }
+            VimMode::Insert => match input {
+                Input { key: Key::Esc, .. } | Input { key: Key::Char('c'), ctrl: true, .. } => {
+                    Transition::Mode(VimMode::Normal)
+                }
+                input => {
+                    textarea.input(input);
+                    Transition::Mode(VimMode::Insert)
+                }
+            },
+        }
+    }
+}
+
+pub struct TextEditor;
+
+impl TextEditor {
+    pub fn new_textarea(editor_config: &EditorConfig) -> TextArea<'static> {
+        let mut textarea = TextArea::default();
+
+        if editor_config.show_line_numbers {
+            textarea.set_line_number_style(Style::default().fg(Color::DarkGray));
+        }
+
+        textarea.set_tab_length(editor_config.tab_width);
+
+        textarea
+    }
+
+    pub fn handle_input(
+        textarea: &mut TextArea<'static>,
+        key_event: KeyEvent,
+        keybinding_mode: &EditorKeybindingMode,
+        vim_state: &mut VimState,
+    ) -> bool {
+        match keybinding_mode {
+            EditorKeybindingMode::Vim => {
+                Self::handle_vim_input(textarea, key_event, vim_state)
+            }
+            _ => {
+                let tui_input: Input = key_event.into();
+                textarea.input(tui_input)
+            }
+        }
+    }
+
+    fn handle_vim_input(
+        textarea: &mut TextArea<'static>,
+        key_event: KeyEvent,
+        vim_state: &mut VimState,
+    ) -> bool {
+        let input = Self::convert_key_event_to_input(key_event);
+        
+        *vim_state = match vim_state.transition(input, textarea) {
+            Transition::Mode(mode) if vim_state.mode != mode => {
+                // Update cursor style based on mode
+                textarea.set_cursor_style(mode.cursor_style());
+                VimState::new(mode)
+            }
+            Transition::Nop | Transition::Mode(_) => vim_state.clone(),
+            Transition::Pending(input) => vim_state.clone().with_pending(input),
+        };
+
+        true // Always consider input as handled in vim mode
+    }
+
+    fn convert_key_event_to_input(key_event: KeyEvent) -> Input {
+        let key = match key_event.code {
+            KeyCode::Char(c) => Key::Char(c),
+            KeyCode::Enter => Key::Enter,
+            KeyCode::Left => Key::Left,
+            KeyCode::Right => Key::Right,
+            KeyCode::Up => Key::Up,
+            KeyCode::Down => Key::Down,
+            KeyCode::Backspace => Key::Backspace,
+            KeyCode::Delete => Key::Delete,
+            KeyCode::Home => Key::Home,
+            KeyCode::End => Key::End,
+            KeyCode::PageUp => Key::PageUp,
+            KeyCode::PageDown => Key::PageDown,
+            KeyCode::Tab => Key::Tab,
+            KeyCode::Esc => Key::Esc,
+            _ => Key::Null,
+        };
+
+        Input {
+            key,
+            ctrl: key_event.modifiers.contains(KeyModifiers::CONTROL),
+            alt: key_event.modifiers.contains(KeyModifiers::ALT),
+            shift: key_event.modifiers.contains(KeyModifiers::SHIFT),
+        }
+    }
+
+    pub fn get_vim_mode_status(vim_state: &VimState) -> String {
+        vim_state.mode.to_string()
+    }
+
+    pub fn is_vim_insert_mode(vim_state: &VimState) -> bool {
+        matches!(vim_state.mode, VimMode::Insert)
+    }
+
+    pub fn is_vim_normal_mode(vim_state: &VimState) -> bool {
+        matches!(vim_state.mode, VimMode::Normal)
+    }
+}

client/src/components/form.rs

@@ -0,0 +1,4 @@
+// src/components/form.rs
+pub mod form;
+
+pub use form::*;

client/src/components/form/form.rs

@@ -0,0 +1,115 @@
+// src/components/form/form.rs
+use crate::components::common::autocomplete;
+use crate::components::handlers::canvas::render_canvas;
+use crate::config::colors::themes::Theme;
+use crate::state::app::highlight::HighlightState;
+use canvas::CanvasState;
+use crate::state::pages::form::FormState;
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Margin, Rect},
+    style::Style,
+    widgets::{Block, Borders, Paragraph},
+    Frame,
+};
+
+pub fn render_form(
+    f: &mut Frame,
+    area: Rect,
+    form_state: &FormState, // <--- CHANGE THIS to the concrete type
+    fields: &[&str],
+    current_field_idx: &usize,
+    inputs: &[&String],
+    table_name: &str,
+    theme: &Theme,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+    total_count: u64,
+    current_position: u64,
+) {
+    let card_title = format!(" {} ", table_name);
+
+    let adresar_card = Block::default()
+        .borders(Borders::ALL)
+        .border_style(Style::default().fg(theme.border))
+        .title(card_title)
+        .style(Style::default().bg(theme.bg).fg(theme.fg));
+
+    f.render_widget(adresar_card, area);
+
+    let inner_area = area.inner(Margin {
+        horizontal: 1,
+        vertical: 1,
+    });
+
+    let main_layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Length(1), Constraint::Min(1)])
+        .split(inner_area);
+
+    let count_position_text = if total_count == 0 && current_position == 1 {
+        "Total: 0 | New Entry".to_string()
+    } else if current_position > total_count && total_count > 0 {
+        format!("Total: {} | New Entry ({})", total_count, current_position)
+    } else if total_count == 0 && current_position > 1 {
+        format!("Total: 0 | New Entry ({})", current_position)
+    } else {
+        format!(
+            "Total: {} | Position: {}/{}",
+            total_count, current_position, total_count
+        )
+    };
+    let count_para = Paragraph::new(count_position_text)
+        .style(Style::default().fg(theme.fg))
+        .alignment(Alignment::Left);
+    f.render_widget(count_para, main_layout[0]);
+
+    // Get the active field's rect from render_canvas
+    let active_field_rect = crate::components::handlers::canvas::render_canvas_library(
+        f,
+        main_layout[1],
+        form_state,
+        fields,
+        current_field_idx,
+        inputs,
+        theme,
+        is_edit_mode,
+        highlight_state,
+    );
+
+    // --- NEW: RENDER AUTOCOMPLETE ---
+    if form_state.autocomplete_active {
+        if let Some(active_rect) = active_field_rect {
+            let selected_index = form_state.get_selected_suggestion_index();
+
+            if let Some(rich_suggestions) = form_state.get_rich_suggestions() {
+                if !rich_suggestions.is_empty() {
+                    // CHANGE THIS to call the renamed function
+                    autocomplete::render_hit_autocomplete_dropdown(
+                        f,
+                        active_rect,
+                        f.area(),
+                        theme,
+                        rich_suggestions,
+                        selected_index,
+                        form_state,
+                    );
+                }
+            }
+            // The fallback to simple suggestions is now correctly handled
+            // because the original render_autocomplete_dropdown exists again.
+            else if let Some(simple_suggestions) = form_state.get_suggestions() {
+                if !simple_suggestions.is_empty() {
+                    autocomplete::render_autocomplete_dropdown(
+                        f,
+                        active_rect,
+                        f.area(),
+                        theme,
+                        simple_suggestions,
+                        selected_index,
+                    );
+                }
+            }
+        }
+    }
+}
+

client/src/components/handlers.rs

@@ -1,8 +1,8 @@
 // src/components/handlers.rs
-pub mod form;
 pub mod canvas;
 pub mod sidebar;
+pub mod buffer_list;
 
-pub use form::*;
 pub use canvas::*;
 pub use sidebar::*;
+pub use buffer_list::*;

client/src/components/handlers/buffer_list.rs

@@ -0,0 +1,80 @@
+// src/components/handlers/buffer_list.rs
+
+use crate::config::colors::themes::Theme;
+use crate::state::app::buffer::BufferState;
+use crate::state::app::state::AppState;  // Add this import
+use ratatui::{
+    layout::{Alignment, Rect},
+    style::Style,
+    text::{Line, Span},
+    widgets::Paragraph,
+    Frame,
+};
+use unicode_width::UnicodeWidthStr;
+use crate::functions::common::buffer::get_view_layer;
+
+pub fn render_buffer_list(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    buffer_state: &BufferState,
+    app_state: &AppState,
+) {
+    // --- Style Definitions ---
+    let active_style = Style::default()
+        .fg(theme.bg)
+        .bg(theme.highlight);
+
+    let inactive_style = Style::default()
+        .fg(theme.fg)
+        .bg(theme.bg);
+
+    // --- Determine Active Layer ---
+    let active_layer = match buffer_state.history.get(buffer_state.active_index) {
+        Some(view) => get_view_layer(view),
+        None => 1,
+    };
+
+    // --- Create Spans ---
+    let mut spans = Vec::new();
+    let mut current_width = 0;
+
+    let current_table_name = app_state.current_view_table_name.as_deref();
+
+    for (original_index, view) in buffer_state.history.iter().enumerate() {
+        // Filter: Only process views matching the active layer
+        if get_view_layer(view) != active_layer {
+            continue;
+        }
+
+        let is_active = original_index == buffer_state.active_index;
+        let buffer_name = view.display_name_with_context(current_table_name);
+        let buffer_text = format!(" {} ", buffer_name);
+        let text_width = UnicodeWidthStr::width(buffer_text.as_str());
+
+        // Calculate width needed for this buffer (separator + text)
+        let needed_width = text_width;
+        if current_width + needed_width > area.width as usize {
+            break;
+        }
+
+        // Add the buffer text itself
+        let text_style = if is_active { active_style } else { inactive_style };
+        spans.push(Span::styled(buffer_text, text_style));
+        current_width += text_width;
+    }
+
+    // --- Filler Span ---
+    let remaining_width = area.width.saturating_sub(current_width as u16);
+    if !spans.is_empty() || remaining_width > 0 {
+        spans.push(Span::styled(
+                " ".repeat(remaining_width as usize),
+                inactive_style,
+        ));
+    }
+
+    // --- Render ---
+    let buffer_line = Line::from(spans);
+    let paragraph = Paragraph::new(buffer_line).alignment(Alignment::Left);
+    f.render_widget(paragraph, area);
+}

client/src/components/handlers/canvas.rs

@@ -1,42 +1,110 @@
 // src/components/handlers/canvas.rs
+
 use ratatui::{
-    widgets::{Paragraph, Block, Borders},
-    layout::{Layout, Constraint, Direction, Rect},
-    style::Style,
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::{Modifier, Style},
     text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
     Frame,
-    prelude::Alignment,
 };
 use crate::config::colors::themes::Theme;
-use crate::ui::form::FormState;
+use crate::state::app::highlight::HighlightState;
+use crate::state::pages::canvas_state::CanvasState as LegacyCanvasState;
+use canvas::CanvasState as LibraryCanvasState;
+use std::cmp::{max, min};
 
+/// Render canvas for legacy CanvasState (AddTableState, LoginState, RegisterState, AddLogicState)
 pub fn render_canvas(
     f: &mut Frame,
     area: Rect,
-    form_state: &FormState,
+    form_state: &impl LegacyCanvasState,
     fields: &[&str],
-    current_field: &usize,
+    current_field_idx: &usize,
     inputs: &[&String],
     theme: &Theme,
     is_edit_mode: bool,
-) {
-    // Split area into columns
+    highlight_state: &HighlightState,
+) -> Option<Rect> {
+    render_canvas_impl(
+        f,
+        area,
+        fields,
+        current_field_idx,
+        inputs,
+        theme,
+        is_edit_mode,
+        highlight_state,
+        form_state.current_cursor_pos(),
+        form_state.has_unsaved_changes(),
+        |i| form_state.get_display_value_for_field(i).to_string(),
+        |i| form_state.has_display_override(i),
+    )
+}
+
+/// Render canvas for library CanvasState (FormState)
+pub fn render_canvas_library(
+    f: &mut Frame,
+    area: Rect,
+    form_state: &impl LibraryCanvasState,
+    fields: &[&str],
+    current_field_idx: &usize,
+    inputs: &[&String],
+    theme: &Theme,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+) -> Option<Rect> {
+    render_canvas_impl(
+        f,
+        area,
+        fields,
+        current_field_idx,
+        inputs,
+        theme,
+        is_edit_mode,
+        highlight_state,
+        form_state.current_cursor_pos(),
+        form_state.has_unsaved_changes(),
+        |i| form_state.get_display_value_for_field(i).to_string(),
+        |i| form_state.has_display_override(i),
+    )
+}
+
+/// Internal implementation shared by both render functions
+fn render_canvas_impl<F1, F2>(
+    f: &mut Frame,
+    area: Rect,
+    fields: &[&str],
+    current_field_idx: &usize,
+    inputs: &[&String],
+    theme: &Theme,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+    current_cursor_pos: usize,
+    has_unsaved_changes: bool,
+    get_display_value: F1,
+    has_display_override: F2,
+) -> Option<Rect>
+where
+    F1: Fn(usize) -> String,
+    F2: Fn(usize) -> bool,
+{
     let columns = Layout::default()
         .direction(Direction::Horizontal)
         .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
         .split(area);
 
-    // Input container styling
+    let border_style = if has_unsaved_changes {
+        Style::default().fg(theme.warning)
+    } else if is_edit_mode {
+        Style::default().fg(theme.accent)
+    } else {
+        Style::default().fg(theme.secondary)
+    };
     let input_container = Block::default()
         .borders(Borders::ALL)
-        .border_style(if is_edit_mode {
-            form_state.has_unsaved_changes.then(|| theme.warning).unwrap_or(theme.accent)
-        } else {
-            theme.secondary
-        })
+        .border_style(border_style)
         .style(Style::default().bg(theme.bg));
 
-    // Input block dimensions
     let input_block = Rect {
         x: columns[1].x,
         y: columns[1].y,
@@ -46,44 +114,142 @@ pub fn render_canvas(
 
     f.render_widget(&input_container, input_block);
 
-    // Input rows layout
     let input_area = input_container.inner(input_block);
     let input_rows = Layout::default()
         .direction(Direction::Vertical)
         .constraints(vec![Constraint::Length(1); fields.len()])
         .split(input_area);
 
-    // Render labels
+    let mut active_field_input_rect = None;
+
     for (i, field) in fields.iter().enumerate() {
         let label = Paragraph::new(Line::from(Span::styled(
             format!("{}:", field),
-            Style::default().fg(theme.fg)),
-        ));
-        f.render_widget(label, Rect {
-            x: columns[0].x,
-            y: input_block.y + 1 + i as u16,
-            width: columns[0].width,
-            height: 1,
-        });
+            Style::default().fg(theme.fg),
+        )));
+        f.render_widget(
+            label,
+            Rect {
+                x: columns[0].x,
+                y: input_block.y + 1 + i as u16,
+                width: columns[0].width,
+                height: 1,
+            },
+        );
     }
 
-    // Render inputs and cursor
-    for (i, input) in inputs.iter().enumerate() {
-        let is_active = i == *current_field;
-        let input_display = Paragraph::new(input.as_str())
-            .alignment(Alignment::Left)
-            .style(if is_active {
-                Style::default().fg(theme.highlight)
-            } else {
-                Style::default().fg(theme.fg)
-            });
+    for (i, _input) in inputs.iter().enumerate() {
+        let is_active = i == *current_field_idx;
 
+        // Use the provided closure to get display value
+        let text = get_display_value(i);
+        let text_len = text.chars().count();
+        let line: Line;
+
+        match highlight_state {
+            HighlightState::Off => {
+                line = Line::from(Span::styled(
+                    &text,
+                    if is_active {
+                        Style::default().fg(theme.highlight)
+                    } else {
+                        Style::default().fg(theme.fg)
+                    },
+                ));
+            }
+            HighlightState::Characterwise { anchor } => {
+                let (anchor_field, anchor_char) = *anchor;
+                let start_field = min(anchor_field, *current_field_idx);
+                let end_field = max(anchor_field, *current_field_idx);
+
+                let (start_char, end_char) = if anchor_field == *current_field_idx {
+                    (min(anchor_char, current_cursor_pos), max(anchor_char, current_cursor_pos))
+                } else if anchor_field < *current_field_idx {
+                    (anchor_char, current_cursor_pos)
+                } else {
+                    (current_cursor_pos, anchor_char)
+                };
+
+                let highlight_style = Style::default().fg(theme.highlight).bg(theme.highlight_bg).add_modifier(Modifier::BOLD);
+                let normal_style_in_highlight = Style::default().fg(theme.highlight);
+                let normal_style_outside = Style::default().fg(theme.fg);
+
+                if i >= start_field && i <= end_field {
+                    if start_field == end_field {
+                        let clamped_start = start_char.min(text_len);
+                        let clamped_end = end_char.min(text_len);
+
+                        let before: String = text.chars().take(clamped_start).collect();
+                        let highlighted: String = text.chars().skip(clamped_start).take(clamped_end.saturating_sub(clamped_start) + 1).collect();
+                        let after: String = text.chars().skip(clamped_end + 1).collect();
+
+                        line = Line::from(vec![
+                            Span::styled(before, normal_style_in_highlight),
+                            Span::styled(highlighted, highlight_style),
+                            Span::styled(after, normal_style_in_highlight),
+                        ]);
+                    } else if i == start_field {
+                        let safe_start = start_char.min(text_len);
+                        let before: String = text.chars().take(safe_start).collect();
+                        let highlighted: String = text.chars().skip(safe_start).collect();
+                        line = Line::from(vec![
+                            Span::styled(before, normal_style_in_highlight),
+                            Span::styled(highlighted, highlight_style),
+                        ]);
+                    } else if i == end_field {
+                        let safe_end_inclusive = if text_len > 0 { end_char.min(text_len - 1) } else { 0 };
+                        let highlighted: String = text.chars().take(safe_end_inclusive + 1).collect();
+                        let after: String = text.chars().skip(safe_end_inclusive + 1).collect();
+                        line = Line::from(vec![
+                            Span::styled(highlighted, highlight_style),
+                            Span::styled(after, normal_style_in_highlight),
+                        ]);
+                    } else {
+                        line = Line::from(Span::styled(&text, highlight_style));
+                    }
+                } else {
+                    line = Line::from(Span::styled(
+                        &text,
+                        if is_active { normal_style_in_highlight } else { normal_style_outside }
+                    ));
+                }
+            }
+            HighlightState::Linewise { anchor_line } => {
+                let start_field = min(*anchor_line, *current_field_idx);
+                let end_field = max(*anchor_line, *current_field_idx);
+                let highlight_style = Style::default().fg(theme.highlight).bg(theme.highlight_bg).add_modifier(Modifier::BOLD);
+                let normal_style_in_highlight = Style::default().fg(theme.highlight);
+                let normal_style_outside = Style::default().fg(theme.fg);
+
+                if i >= start_field && i <= end_field {
+                    line = Line::from(Span::styled(&text, highlight_style));
+                } else {
+                    line = Line::from(Span::styled(
+                        &text,
+                        if is_active { normal_style_in_highlight } else { normal_style_outside }
+                    ));
+                }
+            }
+        }
+
+        let input_display = Paragraph::new(line).alignment(Alignment::Left);
         f.render_widget(input_display, input_rows[i]);
 
         if is_active {
-            let cursor_x = input_rows[i].x + form_state.current_cursor_pos as u16;
+            active_field_input_rect = Some(input_rows[i]);
+
+            // Use the provided closure to check for display override
+            let cursor_x = if has_display_override(i) {
+                // If an override exists, place the cursor at the end.
+                input_rows[i].x + text.chars().count() as u16
+            } else {
+                // Otherwise, use the real cursor position.
+                input_rows[i].x + current_cursor_pos as u16
+            };
             let cursor_y = input_rows[i].y;
             f.set_cursor_position((cursor_x, cursor_y));
         }
     }
+
+    active_field_input_rect
 }

client/src/components/handlers/form.rs

@@ -1,66 +0,0 @@
-// src/components/handlers/form.rs
-use ratatui::{
-    widgets::{Paragraph, Block, Borders},
-    layout::{Layout, Constraint, Direction, Rect, Margin, Alignment},
-    style::Style,
-    Frame,
-};
-use crate::config::colors::themes::Theme;
-use crate::ui::form::FormState;
-use super::canvas::render_canvas;  // Changed to canvas
-
-pub fn render_form(
-    f: &mut Frame,
-    area: Rect,
-    form_state: &FormState,
-    fields: &[&str],
-    current_field: &usize,
-    inputs: &[&String],
-    theme: &Theme,
-    is_edit_mode: bool,
-    total_count: u64,
-    current_position: u64,
-) {
-    // Create Adresar card
-    let adresar_card = Block::default()
-        .borders(Borders::ALL)
-        .border_style(Style::default().fg(theme.border))
-        .title(" Adresar ")
-        .style(Style::default().bg(theme.bg).fg(theme.fg));
-
-    f.render_widget(adresar_card, area);
-
-    // Define inner area
-    let inner_area = area.inner(Margin {
-        horizontal: 1,
-        vertical: 1,
-    });
-
-    // Create main layout
-    let main_layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Length(1),
-            Constraint::Min(1),
-        ])
-        .split(inner_area);
-
-    // Render count/position
-    let count_position_text = format!("Total: {} | Position: {}", total_count, current_position);
-    let count_para = Paragraph::new(count_position_text)
-        .style(Style::default().fg(theme.fg))
-        .alignment(Alignment::Left);
-    f.render_widget(count_para, main_layout[0]);
-
-    // Delegate input handling to canvas
-    render_canvas(
-        f,
-        main_layout[1],
-        form_state,
-        fields,
-        current_field,
-        inputs,
-        theme,
-        is_edit_mode,
-    );
-}

client/src/components/handlers/sidebar.rs

@@ -6,11 +6,17 @@ use ratatui::{
     Frame,
 };
 use crate::config::colors::themes::Theme;
-use common::proto::multieko2::table_definition::{ProfileTreeResponse};
+use common::proto::komp_ac::table_definition::{ProfileTreeResponse};
 use ratatui::text::{Span, Line};
+use crate::components::utils::text::truncate_string;
 
-const SIDEBAR_WIDTH: u16 = 16;
+// Reduced sidebar width
+const SIDEBAR_WIDTH: u16 = 20;
 
+// --- Icons ---
+const ICON_PROFILE: &str = "📁";
+const ICON_TABLE: &str = "📄";
+                                 
 pub fn calculate_sidebar_layout(show_sidebar: bool, main_content_area: Rect) -> (Option<Rect>, Rect) {
     if show_sidebar {
         let chunks = Layout::default()
@@ -35,48 +41,110 @@ pub fn render_sidebar(
 ) {
     let sidebar_block = Block::default().style(Style::default().bg(theme.bg));
     let mut items = Vec::new();
+        let profile_name_available_width = (SIDEBAR_WIDTH as usize).saturating_sub(3);
+    let table_name_available_width = (SIDEBAR_WIDTH as usize).saturating_sub(5);
 
     if let Some(profile_name) = selected_profile {
-        if let Some(profile) = profile_tree.profiles.iter()
+        // Find the selected profile in the tree
+        if let Some(profile) = profile_tree
+            .profiles
+            .iter()
             .find(|p| &p.name == profile_name)
         {
-            // Profile header
+            // Add profile name as header
             items.push(ListItem::new(Line::from(vec![
-                Span::styled("📁 ", Style::default().fg(theme.accent)),
-                Span::styled(&profile.name, Style::default().fg(theme.highlight)),
+                Span::styled(format!("{} ", ICON_PROFILE), Style::default().fg(theme.accent)),
+                Span::styled(
+                    truncate_string(&profile.name, profile_name_available_width),
+                    Style::default().fg(theme.highlight)
+                ),
             ])));
 
-            // Tables
-            for (table_idx, table) in profile.tables.iter().enumerate() {
-                let is_last = table_idx == profile.tables.len() - 1;
-                let prefix = if is_last { "└─ " } else { "├─ " };
-
-                let mut line = vec![
-                    Span::styled(format!("  {}", prefix), Style::default().fg(theme.fg)),
-                    Span::styled(&table.name, Style::default().fg(theme.fg)),
-                ];
-
-                if !table.depends_on.is_empty() {
-                    line.push(Span::styled(
-                        format!(" → {}", table.depends_on.join(", ")),
-                        Style::default().fg(theme.secondary)
-                    ));
-                }
-
-                items.push(ListItem::new(Line::from(line)));
+            // List tables for the selected profile
+            for table in &profile.tables {
+                // Get table name without year prefix to save space
+                let display_name = if table.name.starts_with("2025_") {
+                    &table.name[5..] // Skip "2025_" prefix
+                } else {
+                    &table.name
+                };
+                items.push(ListItem::new(Line::from(vec![
+                    Span::raw("  "), // Indentation
+                    Span::styled(format!("{} ", ICON_TABLE), Style::default().fg(theme.secondary)),
+                    Span::styled(
+                        truncate_string(display_name, table_name_available_width),
+                        theme.fg
+                    ),
+                ])));
             }
         }
     } else {
-        items.push(ListItem::new(Span::styled(
-            "No profile selected",
-            Style::default().fg(theme.secondary)
-        )));
+        // Show full profile tree when no profile is selected (compact version)
+        for (profile_idx, profile) in profile_tree.profiles.iter().enumerate() {
+            // Profile header - more compact
+            items.push(ListItem::new(Line::from(vec![
+                Span::styled(format!("{} ", ICON_PROFILE), Style::default().fg(theme.accent)),
+                Span::styled(
+                    &profile.name,
+                    Style::default().fg(theme.highlight)
+                ),
+            ])));
+            // Tables with compact prefixes
+            for (table_idx, table) in profile.tables.iter().enumerate() {
+                let is_last_table = table_idx == profile.tables.len() - 1;
+                let is_last_profile = profile_idx == profile_tree.profiles.len() - 1;
+
+                // Shorter prefix characters
+                let prefix = match (is_last_profile, is_last_table) {
+                    (true, true) => " └",
+                    (true, false) => " ├",
+                    (false, true) => "│└",
+                    (false, false) => "│├",
+                };
+
+                // Get table name without year prefix to save space
+                let display_name = if table.name.starts_with("2025_") {
+                    &table.name[5..] // Skip "2025_" prefix
+                } else {
+                    &table.name
+                };
+
+                // Adjust available width if dependency arrow is shown
+                let current_table_available_width = if !table.depends_on.is_empty() {
+                    table_name_available_width.saturating_sub(1)
+                } else {
+                    table_name_available_width
+                };
+
+                let line = vec![
+                    Span::styled(prefix, Style::default().fg(theme.fg)),
+                    Span::styled(format!("{} ", ICON_TABLE), Style::default().fg(theme.secondary)),
+                    Span::styled(truncate_string(display_name, current_table_available_width), Style::default().fg(theme.fg)),
+                ];
+
+                items.push(ListItem::new(Line::from(line)));
+            }
+
+            // Compact separator between profiles
+            if profile_idx < profile_tree.profiles.len() - 1 {
+                items.push(ListItem::new(Line::from(
+                    Span::styled("│", Style::default().fg(theme.secondary))
+                )));
+            }
+        }
+
+        if profile_tree.profiles.is_empty() {
+            items.push(ListItem::new(Span::styled(
+                "No profiles",
+                Style::default().fg(theme.secondary)
+            )));
+        }
     }
 
     let list = List::new(items)
         .block(sidebar_block)
         .highlight_style(Style::default().fg(theme.highlight))
-        .highlight_symbol(">>");
+        .highlight_symbol(">");
 
     f.render_widget(list, area);
 }

client/src/components/intro/intro.rs

@@ -1,4 +1,4 @@
-// src/components/handlers/intro.rs
+// src/components/intro/intro.rs
 use ratatui::{
     layout::{Alignment, Constraint, Direction, Layout, Rect},
     style::Style,
@@ -8,103 +8,80 @@ use ratatui::{
     Frame,
 };
 use crate::config::colors::themes::Theme;
+use crate::state::pages::intro::IntroState;
 
-pub struct IntroState {
-    pub selected_option: usize,
+pub fn render_intro(f: &mut Frame, intro_state: &IntroState, area: Rect, theme: &Theme) {
+    let block = Block::default()
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.accent))
+        .style(Style::default().bg(theme.bg));
+
+    let inner_area = block.inner(area);
+    f.render_widget(block, area);
+
+    // Center layout
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Percentage(40),
+            Constraint::Length(5),
+            Constraint::Percentage(40),
+        ])
+        .split(inner_area);
+
+    // Title
+    let title = Line::from(vec![
+        Span::styled("komp_ac", Style::default().fg(theme.highlight)),
+        Span::styled(" v", Style::default().fg(theme.fg)),
+        Span::styled(env!("CARGO_PKG_VERSION"), Style::default().fg(theme.secondary)),
+    ]);
+    let title_para = Paragraph::new(title)
+        .alignment(Alignment::Center);
+    f.render_widget(title_para, chunks[1]);
+
+    // Buttons - now with 4 options
+    let button_area = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(25),
+            Constraint::Percentage(25),
+            Constraint::Percentage(25),
+            Constraint::Percentage(25),
+        ])
+        .split(chunks[1].inner(Margin {
+            horizontal: 1,
+            vertical: 1
+        }));
+
+    let buttons = ["Continue", "Admin", "Login", "Register"];
+    for (i, &text) in buttons.iter().enumerate() {
+        render_button(f, button_area[i], text, intro_state.selected_option == i, theme);
+    }
 }
 
-impl IntroState {
-    pub fn new() -> Self {
-        Self { selected_option: 0 }
-    }
-
-    pub fn render(&self, f: &mut Frame, area: Rect, theme: &Theme) {
-        let block = Block::default()
-            .borders(Borders::ALL)
-            .border_type(BorderType::Rounded)
-            .border_style(Style::default().fg(theme.accent))
-            .style(Style::default().bg(theme.bg));
-
-        let inner_area = block.inner(area);
-        f.render_widget(block, area);
-
-        // Center layout
-        let chunks = Layout::default()
-            .direction(Direction::Vertical)
-            .constraints([
-                Constraint::Percentage(35),
-                Constraint::Length(5),
-                Constraint::Percentage(35),
-            ])
-            .split(inner_area);
-
-        // Title
-        let title = Line::from(vec![
-            Span::styled("multieko2", Style::default().fg(theme.highlight)),
-            Span::styled(" v", Style::default().fg(theme.fg)),
-            Span::styled(env!("CARGO_PKG_VERSION"), Style::default().fg(theme.secondary)),
-        ]);
-        let title_para = Paragraph::new(title)
-            .alignment(Alignment::Center);
-        f.render_widget(title_para, chunks[1]);
-
-        // Buttons
-        let button_area = Layout::default()
-            .direction(Direction::Horizontal)
-            .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
-            .split(chunks[1].inner(Margin {
-                horizontal: 1,
-                vertical: 1
-            }));
-
-        self.render_button(
-            f,
-            button_area[0],
-            "Continue",
-            self.selected_option == 0,
-            theme,
-        );
-        self.render_button(
-            f,
-            button_area[1],
-            "Admin",
-            self.selected_option == 1,
-            theme,
-        );
-    }
-
-    fn render_button(&self, f: &mut Frame, area: Rect, text: &str, selected: bool, theme: &Theme) {
-        let button_style = if selected {
-            Style::default()
-                .fg(theme.highlight)
-                .bg(theme.bg)
-                .add_modifier(ratatui::style::Modifier::BOLD)
+fn render_button(f: &mut Frame, area: Rect, text: &str, selected: bool, theme: &Theme) {
+    let button_style = Style::default()
+        .fg(if selected { theme.highlight } else { theme.fg })
+        .bg(theme.bg)
+        .add_modifier(if selected {
+            ratatui::style::Modifier::BOLD
         } else {
-            Style::default().fg(theme.fg).bg(theme.bg)
-        };
+            ratatui::style::Modifier::empty()
+        });
 
-        let button = Paragraph::new(text)
-            .style(button_style)
-            .alignment(Alignment::Center)
-            .block(
-                Block::default()
-                    .borders(Borders::ALL)
-                    .border_type(BorderType::Double)
-                    .border_style(if selected {
-                        Style::default().fg(theme.accent)
-                    } else {
-                        Style::default().fg(theme.border)
-                    }),
-            );
+    let border_style = Style::default()
+        .fg(if selected { theme.accent } else { theme.border });
 
-        f.render_widget(button, area);
-    }
+    let button = Paragraph::new(text)
+        .style(button_style)
+        .alignment(Alignment::Center)
+        .block(
+            Block::default()
+            .borders(Borders::ALL)
+            .border_type(BorderType::Double)
+            .border_style(border_style),
+        );
 
-    pub fn next_option(&mut self) {
-        self.selected_option = (self.selected_option + 1) % 2;
-    }
-
-    pub fn previous_option(&mut self) {
-        self.selected_option = if self.selected_option == 0 { 1 } else { 0 };
-    }
+    f.render_widget(button, area);
 }

client/src/components/mod.rs

@@ -3,8 +3,14 @@ pub mod handlers;
 pub mod intro;
 pub mod admin;
 pub mod common;
+pub mod form;
+pub mod auth;
+pub mod utils;
 
 pub use handlers::*;
 pub use intro::*;
 pub use admin::*;
 pub use common::*;
+pub use form::*;
+pub use auth::*;
+pub use utils::*;

client/src/components/utils.rs

@@ -0,0 +1,4 @@
+// src/components/utils.rs
+pub mod text;
+
+pub use text::*;

client/src/components/utils/text.rs

@@ -0,0 +1,29 @@
+// src/components/utils/text.rs
+
+use unicode_width::UnicodeWidthStr;
+use unicode_segmentation::UnicodeSegmentation;
+
+/// Truncates a string to a maximum width, adding an ellipsis if truncated.
+/// Considers unicode character widths.
+pub fn truncate_string(s: &str, max_width: usize) -> String {
+    if UnicodeWidthStr::width(s) <= max_width {
+        s.to_string()
+    } else {
+        let ellipsis = "…";
+        let ellipsis_width = UnicodeWidthStr::width(ellipsis);
+        let mut truncated_width = 0;
+        let mut end_byte_index = 0;
+
+        // Iterate over graphemes to handle multi-byte characters correctly
+        for (i, g) in s.grapheme_indices(true) {
+            let char_width = UnicodeWidthStr::width(g);
+            if truncated_width + char_width + ellipsis_width > max_width {
+                break;
+            }
+            truncated_width += char_width;
+            end_byte_index = i + g.len();
+        }
+
+        format!("{}{}", &s[..end_byte_index], ellipsis)
+    }
+}

client/src/config/binds/config.rs

@@ -1,10 +1,57 @@
 // src/config/binds/config.rs
 
-use serde::Deserialize;
+use serde::{Deserialize, Serialize}; // Added Serialize for EditorKeybindingMode if needed elsewhere
 use std::collections::HashMap;
 use std::path::Path;
+use anyhow::{Context, Result};
 use crossterm::event::{KeyCode, KeyModifiers};
 
+// NEW: Editor Keybinding Mode Enum
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
+pub enum EditorKeybindingMode {
+    #[serde(rename = "default")]
+    Default,
+    #[serde(rename = "vim")]
+    Vim,
+    #[serde(rename = "emacs")]
+    Emacs,
+}
+
+impl Default for EditorKeybindingMode {
+    fn default() -> Self {
+        EditorKeybindingMode::Default
+    }
+}
+
+// NEW: Editor Configuration Struct
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct EditorConfig {
+    #[serde(default)]
+    pub keybinding_mode: EditorKeybindingMode,
+    #[serde(default = "default_show_line_numbers")]
+    pub show_line_numbers: bool,
+    #[serde(default = "default_tab_width")]
+    pub tab_width: u8,
+}
+
+fn default_show_line_numbers() -> bool {
+    true
+}
+
+fn default_tab_width() -> u8 {
+    4
+}
+
+impl Default for EditorConfig {
+    fn default() -> Self {
+        EditorConfig {
+            keybinding_mode: EditorKeybindingMode::default(),
+            show_line_numbers: default_show_line_numbers(),
+            tab_width: default_tab_width(),
+        }
+    }
+}
+
 #[derive(Debug, Deserialize, Default)]
 pub struct ColorsConfig {
     #[serde(default = "default_theme")]
@@ -21,19 +68,24 @@ pub struct Config {
     pub keybindings: ModeKeybindings,
     #[serde(default)]
     pub colors: ColorsConfig,
+    // NEW: Add editor configuration
+    #[serde(default)]
+    pub editor: EditorConfig,
 }
 
-#[derive(Debug, Deserialize)]
+// ... (rest of your Config struct and impl Config remains the same)
+// Make sure ModeKeybindings is also deserializable if it's not already
+#[derive(Debug, Deserialize, Default)] // Added Default here if not present
 pub struct ModeKeybindings {
     #[serde(default)]
-    pub intro: HashMap<String, Vec<String>>,
-    #[serde(default)]
-    pub admin: HashMap<String, Vec<String>>,
+    pub general: HashMap<String, Vec<String>>,
     #[serde(default)]
     pub read_only: HashMap<String, Vec<String>>,
     #[serde(default)]
     pub edit: HashMap<String, Vec<String>>,
     #[serde(default)]
+    pub highlight: HashMap<String, Vec<String>>,
+    #[serde(default)]
     pub command: HashMap<String, Vec<String>>,
     #[serde(default)]
     pub common: HashMap<String, Vec<String>>,
@@ -43,28 +95,25 @@ pub struct ModeKeybindings {
 
 impl Config {
     /// Loads the configuration from "config.toml" in the client crate directory.
-    pub fn load() -> Result<Self, Box<dyn std::error::Error>> {
+    pub fn load() -> Result<Self> {
         let manifest_dir = env!("CARGO_MANIFEST_DIR");
         let config_path = Path::new(manifest_dir).join("config.toml");
         let config_str = std::fs::read_to_string(&config_path)
-            .map_err(|e| format!("Failed to read config file at {:?}: {}", config_path, e))?;
-        let config: Config = toml::from_str(&config_str)?;
+             .with_context(|| format!("Failed to read config file at {:?}", config_path))?;
+        let config: Config = toml::from_str(&config_str)
+            .with_context(|| format!("Failed to parse config file: {}. Check for syntax errors or missing fields like an empty [editor] section if you added it.", config_str))?; // Enhanced error message
         Ok(config)
     }
 
-    /// Gets an action for a key in Intro mode, only checking intro and global bindings
-    pub fn get_intro_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
-        self.get_action_for_key_in_mode(&self.keybindings.intro, key, modifiers)
+    pub fn get_general_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_for_key_in_mode(&self.keybindings.general, key, modifiers)
             .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.global, key, modifiers))
     }
 
-    /// Gets an action for a key in Admin mode, checking common and global bindings
-    pub fn get_admin_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
-        self.get_action_for_key_in_mode(&self.keybindings.admin, key, modifiers)
-            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.common, key, modifiers))
-            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.intro, key, modifiers))
-            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.global, key, modifiers))
-    }    
+    /// Common actions for Edit/Read-only modes
+    pub fn get_common_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_for_key_in_mode(&self.keybindings.common, key, modifiers)
+    }
 
     /// Gets an action for a key in Read-Only mode, also checking common keybindings.
     pub fn get_read_only_action_for_key(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
@@ -80,6 +129,14 @@ impl Config {
             .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.global, key, modifiers))
     }
 
+    /// Gets an action for a key in Highlight mode, also checking common/global keybindings.
+    pub fn get_highlight_action_for_key(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_for_key_in_mode(&self.keybindings.highlight, key, modifiers)
+            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.common, key, modifiers))
+            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.read_only, key, modifiers))
+            .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.global, key, modifiers))
+    }
+
     /// Gets an action for a key in Command mode, also checking common keybindings.
     pub fn get_command_action_for_key(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
         self.get_action_for_key_in_mode(&self.keybindings.command, key, modifiers)
@@ -92,17 +149,17 @@ impl Config {
         &self,
         is_edit_mode: bool,
         command_mode: bool,
-        show_intro: bool,
-        show_admin: bool,
         key: KeyCode,
         modifiers: KeyModifiers
     ) -> Option<&str> {
-        match (show_intro, show_admin, command_mode, is_edit_mode) {
-            (true, _, _, _) => self.get_intro_action(key, modifiers),
-            (_, true, _, _) => self.get_admin_action(key, modifiers),
-            (_, _, true, _) => self.get_command_action_for_key(key, modifiers),
-            (_, _, _, true) => self.get_edit_action_for_key(key, modifiers),
-            _ => self.get_read_only_action_for_key(key, modifiers),
+        match (command_mode, is_edit_mode) {
+            (true, _) => self.get_command_action_for_key(key, modifiers),
+            (_, true) => self.get_edit_action_for_key(key, modifiers)
+                .or_else(|| self.get_common_action(key, modifiers)),
+            _ => self.get_read_only_action_for_key(key, modifiers)
+                .or_else(|| self.get_common_action(key, modifiers))
+                // Add global bindings check for read-only mode
+                .or_else(|| self.get_action_for_key_in_mode(&self.keybindings.global, key, modifiers)),
         }
     }
 
@@ -194,47 +251,206 @@ impl Config {
         key: KeyCode,
         modifiers: KeyModifiers,
     ) -> bool {
-        // For multi-character bindings without modifiers, handle them in matches_key_sequence.
+        // Special handling for shift+character combinations
+        if binding.to_lowercase().starts_with("shift+") {
+            let parts: Vec<&str> = binding.split('+').collect();
+            if parts.len() == 2 && parts[1].len() == 1 {
+                let expected_lowercase = parts[1].chars().next().unwrap().to_lowercase().next().unwrap();
+                let expected_uppercase = expected_lowercase.to_uppercase().next().unwrap();
+                if let KeyCode::Char(actual_char) = key {
+                    if actual_char == expected_uppercase && modifiers.contains(KeyModifiers::SHIFT) {
+                        return true;
+                    }
+                }
+            }
+        }
+
+        // Handle Shift+Tab -> BackTab
+        if binding.to_lowercase() == "shift+tab" && key == KeyCode::BackTab && modifiers.is_empty() {
+            return true;
+        }
+
+        // Handle multi-character bindings (all standard keys without modifiers)
         if binding.len() > 1 && !binding.contains('+') {
             return match binding.to_lowercase().as_str() {
+                // Navigation keys
                 "left" => key == KeyCode::Left,
                 "right" => key == KeyCode::Right,
                 "up" => key == KeyCode::Up,
                 "down" => key == KeyCode::Down,
-                "esc" => key == KeyCode::Esc,
-                "enter" => key == KeyCode::Enter,
-                "delete" => key == KeyCode::Delete,
+                "home" => key == KeyCode::Home,
+                "end" => key == KeyCode::End,
+                "pageup" | "pgup" => key == KeyCode::PageUp,
+                "pagedown" | "pgdn" => key == KeyCode::PageDown,
+                
+                // Editing keys
+                "insert" | "ins" => key == KeyCode::Insert,
+                "delete" | "del" => key == KeyCode::Delete,
                 "backspace" => key == KeyCode::Backspace,
+                
+                // Tab keys
                 "tab" => key == KeyCode::Tab,
                 "backtab" => key == KeyCode::BackTab,
-                _ => false,
+                
+                // Special keys
+                "enter" | "return" => key == KeyCode::Enter,
+                "escape" | "esc" => key == KeyCode::Esc,
+                "space" => key == KeyCode::Char(' '),
+                
+                // Function keys F1-F24
+                "f1" => key == KeyCode::F(1),
+                "f2" => key == KeyCode::F(2),
+                "f3" => key == KeyCode::F(3),
+                "f4" => key == KeyCode::F(4),
+                "f5" => key == KeyCode::F(5),
+                "f6" => key == KeyCode::F(6),
+                "f7" => key == KeyCode::F(7),
+                "f8" => key == KeyCode::F(8),
+                "f9" => key == KeyCode::F(9),
+                "f10" => key == KeyCode::F(10),
+                "f11" => key == KeyCode::F(11),
+                "f12" => key == KeyCode::F(12),
+                "f13" => key == KeyCode::F(13),
+                "f14" => key == KeyCode::F(14),
+                "f15" => key == KeyCode::F(15),
+                "f16" => key == KeyCode::F(16),
+                "f17" => key == KeyCode::F(17),
+                "f18" => key == KeyCode::F(18),
+                "f19" => key == KeyCode::F(19),
+                "f20" => key == KeyCode::F(20),
+                "f21" => key == KeyCode::F(21),
+                "f22" => key == KeyCode::F(22),
+                "f23" => key == KeyCode::F(23),
+                "f24" => key == KeyCode::F(24),
+                
+                // Lock keys
+                "capslock" => key == KeyCode::CapsLock,
+                "scrolllock" => key == KeyCode::ScrollLock,
+                "numlock" => key == KeyCode::NumLock,
+                
+                // System keys
+                "printscreen" => key == KeyCode::PrintScreen,
+                "pause" => key == KeyCode::Pause,
+                "menu" => key == KeyCode::Menu,
+                "keypadbegin" => key == KeyCode::KeypadBegin,
+                
+                // Media keys
+                "mediaplay" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Play),
+                "mediapause" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Pause),
+                "mediaplaypause" => key == KeyCode::Media(crossterm::event::MediaKeyCode::PlayPause),
+                "mediareverse" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Reverse),
+                "mediastop" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Stop),
+                "mediafastforward" => key == KeyCode::Media(crossterm::event::MediaKeyCode::FastForward),
+                "mediarewind" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Rewind),
+                "mediatracknext" => key == KeyCode::Media(crossterm::event::MediaKeyCode::TrackNext),
+                "mediatrackprevious" => key == KeyCode::Media(crossterm::event::MediaKeyCode::TrackPrevious),
+                "mediarecord" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Record),
+                "medialowervolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::LowerVolume),
+                "mediaraisevolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::RaiseVolume),
+                "mediamutevolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::MuteVolume),
+                
+                // Multi-key sequences need special handling
+                "gg" => false, // This needs sequence handling
+                _ => {
+                    // Handle single characters and punctuation
+                    if binding.len() == 1 {
+                        if let Some(c) = binding.chars().next() {
+                            key == KeyCode::Char(c)
+                        } else {
+                            false
+                        }
+                    } else {
+                        false
+                    }
+                }
             };
         }
 
+        // Handle modifier combinations (like "Ctrl+F5", "Alt+Shift+A")
         let parts: Vec<&str> = binding.split('+').collect();
         let mut expected_modifiers = KeyModifiers::empty();
         let mut expected_key = None;
 
         for part in parts {
             match part.to_lowercase().as_str() {
-                "ctrl" => expected_modifiers |= KeyModifiers::CONTROL,
+                // Modifiers
+                "ctrl" | "control" => expected_modifiers |= KeyModifiers::CONTROL,
                 "shift" => expected_modifiers |= KeyModifiers::SHIFT,
                 "alt" => expected_modifiers |= KeyModifiers::ALT,
+                "super" | "windows" | "cmd" => expected_modifiers |= KeyModifiers::SUPER,
+                "hyper" => expected_modifiers |= KeyModifiers::HYPER,
+                "meta" => expected_modifiers |= KeyModifiers::META,
+                
+                // Navigation keys
                 "left" => expected_key = Some(KeyCode::Left),
                 "right" => expected_key = Some(KeyCode::Right),
                 "up" => expected_key = Some(KeyCode::Up),
                 "down" => expected_key = Some(KeyCode::Down),
-                "esc" => expected_key = Some(KeyCode::Esc),
-                "enter" => expected_key = Some(KeyCode::Enter),
-                "delete" => expected_key = Some(KeyCode::Delete),
+                "home" => expected_key = Some(KeyCode::Home),
+                "end" => expected_key = Some(KeyCode::End),
+                "pageup" | "pgup" => expected_key = Some(KeyCode::PageUp),
+                "pagedown" | "pgdn" => expected_key = Some(KeyCode::PageDown),
+                
+                // Editing keys
+                "insert" | "ins" => expected_key = Some(KeyCode::Insert),
+                "delete" | "del" => expected_key = Some(KeyCode::Delete),
                 "backspace" => expected_key = Some(KeyCode::Backspace),
+                
+                // Tab keys
                 "tab" => expected_key = Some(KeyCode::Tab),
                 "backtab" => expected_key = Some(KeyCode::BackTab),
+                
+                // Special keys
+                "enter" | "return" => expected_key = Some(KeyCode::Enter),
+                "escape" | "esc" => expected_key = Some(KeyCode::Esc),
+                "space" => expected_key = Some(KeyCode::Char(' ')),
+                
+                // Function keys
+                "f1" => expected_key = Some(KeyCode::F(1)),
+                "f2" => expected_key = Some(KeyCode::F(2)),
+                "f3" => expected_key = Some(KeyCode::F(3)),
+                "f4" => expected_key = Some(KeyCode::F(4)),
+                "f5" => expected_key = Some(KeyCode::F(5)),
+                "f6" => expected_key = Some(KeyCode::F(6)),
+                "f7" => expected_key = Some(KeyCode::F(7)),
+                "f8" => expected_key = Some(KeyCode::F(8)),
+                "f9" => expected_key = Some(KeyCode::F(9)),
+                "f10" => expected_key = Some(KeyCode::F(10)),
+                "f11" => expected_key = Some(KeyCode::F(11)),
+                "f12" => expected_key = Some(KeyCode::F(12)),
+                "f13" => expected_key = Some(KeyCode::F(13)),
+                "f14" => expected_key = Some(KeyCode::F(14)),
+                "f15" => expected_key = Some(KeyCode::F(15)),
+                "f16" => expected_key = Some(KeyCode::F(16)),
+                "f17" => expected_key = Some(KeyCode::F(17)),
+                "f18" => expected_key = Some(KeyCode::F(18)),
+                "f19" => expected_key = Some(KeyCode::F(19)),
+                "f20" => expected_key = Some(KeyCode::F(20)),
+                "f21" => expected_key = Some(KeyCode::F(21)),
+                "f22" => expected_key = Some(KeyCode::F(22)),
+                "f23" => expected_key = Some(KeyCode::F(23)),
+                "f24" => expected_key = Some(KeyCode::F(24)),
+                
+                // Lock keys
+                "capslock" => expected_key = Some(KeyCode::CapsLock),
+                "scrolllock" => expected_key = Some(KeyCode::ScrollLock),
+                "numlock" => expected_key = Some(KeyCode::NumLock),
+                
+                // System keys
+                "printscreen" => expected_key = Some(KeyCode::PrintScreen),
+                "pause" => expected_key = Some(KeyCode::Pause),
+                "menu" => expected_key = Some(KeyCode::Menu),
+                "keypadbegin" => expected_key = Some(KeyCode::KeypadBegin),
+                
+                // Special characters and colon (legacy support)
                 ":" => expected_key = Some(KeyCode::Char(':')),
+                
+                // Single character (letters, numbers, punctuation)
                 part => {
                     if part.len() == 1 {
-                        let c = part.chars().next().unwrap();
-                        expected_key = Some(KeyCode::Char(c));
+                        if let Some(c) = part.chars().next() {
+                            expected_key = Some(KeyCode::Char(c));
+                        }
                     }
                 }
             }

client/src/config/binds/key_sequences.rs

@@ -149,14 +149,17 @@ fn parse_key_part(part: &str) -> Option<ParsedKey> {
     let mut code = None;
 
     if part.contains('+') {
-        // This handles modifiers like "ctrl+s"
+        // This handles modifiers like "ctrl+s", "super+shift+f5"
         let components: Vec<&str> = part.split('+').collect();
 
         for component in components {
             match component.to_lowercase().as_str() {
-                "ctrl" => modifiers |= KeyModifiers::CONTROL,
+                "ctrl" | "control" => modifiers |= KeyModifiers::CONTROL,
                 "shift" => modifiers |= KeyModifiers::SHIFT,
                 "alt" => modifiers |= KeyModifiers::ALT,
+                "super" | "windows" | "cmd" => modifiers |= KeyModifiers::SUPER,
+                "hyper" => modifiers |= KeyModifiers::HYPER,
+                "meta" => modifiers |= KeyModifiers::META,
                 _ => {
                     // Last component is the key
                     code = string_to_keycode(component);

client/src/config/colors/themes.rs

@@ -10,6 +10,8 @@ pub struct Theme {
     pub highlight: Color,
     pub warning: Color,
     pub border: Color,
+    pub highlight_bg: Color,
+    pub inactive_highlight_bg: Color,// admin panel no idea what it really is
 }
 
 impl Theme {
@@ -31,6 +33,8 @@ impl Theme {
             highlight: Color::Rgb(152, 251, 152), // Pastel green
             warning: Color::Rgb(255, 182, 193), // Pastel pink
             border: Color::Rgb(220, 220, 220), // Light gray border
+            highlight_bg: Color::Rgb(70, 70, 70), // Darker grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 
@@ -44,6 +48,8 @@ impl Theme {
             highlight: Color::Rgb(50, 205, 50), // Bright green
             warning: Color::Rgb(255, 99, 71), // Bright red
             border: Color::Rgb(100, 100, 100), // Medium gray border
+            highlight_bg: Color::Rgb(180, 180, 180), // Lighter grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 
@@ -57,6 +63,8 @@ impl Theme {
             highlight: Color::Rgb(0, 128, 0), // Green
             warning: Color::Rgb(255, 0, 0), // Red
             border: Color::Rgb(0, 0, 0),   // Black border
+            highlight_bg: Color::Rgb(180, 180, 180), // Lighter grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 }

client/src/config/mod.rs

@@ -2,3 +2,4 @@
 
 pub mod binds;
 pub mod colors;
+pub mod storage;

client/src/config/storage.rs

@@ -0,0 +1,4 @@
+// src/config/storage.rs
+pub mod storage;
+
+pub use storage::*;

client/src/config/storage/storage.rs

@@ -0,0 +1,101 @@
+// src/config/storage/storage.rs
+use serde::{Deserialize, Serialize};
+use std::fs::{self, File};
+use std::io::Write;
+use std::path::PathBuf;
+use anyhow::{Context, Result};
+use tracing::{error, info};
+
+#[cfg(unix)]
+use std::os::unix::fs::PermissionsExt;
+
+pub const APP_NAME: &str = "komp_ac_client";
+pub const TOKEN_FILE_NAME: &str = "auth.token";
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct StoredAuthData {
+    pub access_token: String,
+    pub user_id: String,
+    pub role: String,
+    pub username: String,
+}
+
+pub fn get_token_storage_path() -> Result<PathBuf> {
+    let state_dir = dirs::state_dir()
+        .or_else(|| dirs::home_dir().map(|home| home.join(".local").join("state")))
+        .ok_or_else(|| anyhow::anyhow!("Could not determine state directory"))?;
+
+    let app_state_dir = state_dir.join(APP_NAME);
+    fs::create_dir_all(&app_state_dir)
+        .with_context(|| format!("Failed to create app state directory at {:?}", app_state_dir))?;
+    
+    Ok(app_state_dir.join(TOKEN_FILE_NAME))
+}
+
+pub fn save_auth_data(data: &StoredAuthData) -> Result<()> {
+    let path = get_token_storage_path()?;
+    
+    let json_data = serde_json::to_string(data)
+        .context("Failed to serialize auth data")?;
+    
+    let mut file = File::create(&path)
+        .with_context(|| format!("Failed to create token file at {:?}", path))?;
+    
+    file.write_all(json_data.as_bytes())
+        .context("Failed to write token data to file")?;
+    
+    // Set file permissions to 600 (owner read/write only) on Unix
+    #[cfg(unix)]
+    {
+        file.set_permissions(std::fs::Permissions::from_mode(0o600))
+            .context("Failed to set token file permissions")?;
+    }
+    
+    info!("Auth data saved to {:?}", path);
+    Ok(())
+}
+
+pub fn load_auth_data() -> Result<Option<StoredAuthData>> {
+    let path = get_token_storage_path()?;
+    
+    if !path.exists() {
+        info!("Token file not found at {:?}", path);
+        return Ok(None);
+    }
+    
+    let json_data = fs::read_to_string(&path)
+        .with_context(|| format!("Failed to read token file at {:?}", path))?;
+    
+    if json_data.trim().is_empty() {
+        info!("Token file is empty at {:?}", path);
+        return Ok(None);
+    }
+    
+    match serde_json::from_str::<StoredAuthData>(&json_data) {
+        Ok(data) => {
+            info!("Auth data loaded from {:?}", path);
+            Ok(Some(data))
+        }
+        Err(e) => {
+            error!("Failed to deserialize token data from {:?}: {}. Deleting corrupt file.", path, e);
+            if let Err(del_e) = fs::remove_file(&path) {
+                error!("Failed to delete corrupt token file: {}", del_e);
+            }
+            Ok(None)
+        }
+    }
+}
+
+pub fn delete_auth_data() -> Result<()> {
+    let path = get_token_storage_path()?;
+    
+    if path.exists() {
+        fs::remove_file(&path)
+            .with_context(|| format!("Failed to delete token file at {:?}", path))?;
+        info!("Token file deleted from {:?}", path);
+    } else {
+        info!("Token file not found for deletion at {:?}", path);
+    }
+    
+    Ok(())
+}

client/src/functions/common.rs

@@ -0,0 +1,5 @@
+// src/functions/common.rs
+
+pub mod buffer;
+
+pub use buffer::*;

client/src/functions/common/buffer.rs

@@ -0,0 +1,35 @@
+// src/functions/common/buffer.rs
+
+use crate::state::app::buffer::BufferState;
+use crate::state::app::buffer::AppView;
+
+pub fn get_view_layer(view: &AppView) -> u8 {
+    match view {
+        AppView::Intro => 1,
+        AppView::Login | AppView::Register | AppView::Admin | AppView::AddTable | AppView::AddLogic => 2,
+        AppView::Form | AppView::Scratch => 3,
+    }
+}
+
+/// Switches the active buffer index.
+pub fn switch_buffer(buffer_state: &mut BufferState, next: bool) -> bool {
+    if buffer_state.history.len() <= 1 {
+        return false;
+    }
+
+    let len = buffer_state.history.len();
+    let current_index = buffer_state.active_index;
+    let new_index = if next {
+        (current_index + 1) % len
+    } else {
+        (current_index + len - 1) % len
+    };
+
+    if new_index != current_index {
+        buffer_state.active_index = new_index;
+        true
+    } else {
+        false
+    }
+}
+

client/src/functions/mod.rs

@@ -0,0 +1,6 @@
+// src/functions/mod.rs
+
+pub mod common;
+pub mod modes;
+
+pub use modes::*;

client/src/functions/modes.rs

@@ -0,0 +1,9 @@
+// src/functions/modes.rs
+
+pub mod read_only;
+pub mod edit;
+pub mod navigation;
+
+pub use read_only::*;
+pub use edit::*;
+pub use navigation::*;

client/src/functions/modes/edit.rs

@@ -0,0 +1,6 @@
+// src/functions/modes/edit.rs
+
+pub mod form_e;
+pub mod auth_e;
+pub mod add_table_e;
+pub mod add_logic_e;

client/src/functions/modes/edit/add_logic_e.rs

@@ -0,0 +1,135 @@
+// src/functions/modes/edit/add_logic_e.rs
+use crate::state::pages::add_logic::AddLogicState;
+use crate::state::pages::canvas_state::CanvasState;
+use anyhow::Result;
+use crossterm::event::{KeyCode, KeyEvent};
+
+pub async fn execute_edit_action(
+    action: &str,
+    key: KeyEvent, // Keep key for insert_char
+    state: &mut AddLogicState,
+    ideal_cursor_column: &mut usize,
+) -> Result<String> {
+    let mut message = String::new();
+
+    match action {
+        "next_field" => {
+            let current_field = state.current_field();
+            let next_field = (current_field + 1) % AddLogicState::INPUT_FIELD_COUNT;
+            state.set_current_field(next_field);
+            *ideal_cursor_column = state.current_cursor_pos();
+            message = format!("Focus on field {}", state.fields()[next_field]);
+        }
+        "prev_field" => {
+            let current_field = state.current_field();
+            let prev_field = if current_field == 0 {
+                AddLogicState::INPUT_FIELD_COUNT - 1
+            } else {
+                current_field - 1
+            };
+            state.set_current_field(prev_field);
+            *ideal_cursor_column = state.current_cursor_pos();
+            message = format!("Focus on field {}", state.fields()[prev_field]);
+        }
+        "delete_char_forward" => {
+            let current_pos = state.current_cursor_pos();
+            let current_input_mut = state.get_current_input_mut();
+            if current_pos < current_input_mut.len() {
+                current_input_mut.remove(current_pos);
+                state.set_has_unsaved_changes(true);
+                if state.current_field() == 1 { state.update_target_column_suggestions(); }
+            }
+        }
+        "delete_char_backward" => {
+            let current_pos = state.current_cursor_pos();
+            if current_pos > 0 {
+                let new_pos = current_pos - 1;
+                state.get_current_input_mut().remove(new_pos);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+                state.set_has_unsaved_changes(true);
+                if state.current_field() == 1 { state.update_target_column_suggestions(); }
+            }
+        }
+        "move_left" => {
+            let current_pos = state.current_cursor_pos();
+            if current_pos > 0 {
+                let new_pos = current_pos - 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+        }
+        "move_right" => {
+            let current_pos = state.current_cursor_pos();
+            let input_len = state.get_current_input().len();
+            if current_pos < input_len {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+        }
+        "insert_char" => {
+            if let KeyCode::Char(c) = key.code {
+                let current_pos = state.current_cursor_pos();
+                state.get_current_input_mut().insert(current_pos, c);
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+                state.set_has_unsaved_changes(true);
+                if state.current_field() == 1 {
+                    state.update_target_column_suggestions();
+                }
+            }
+        }
+        "suggestion_down" => {
+            if state.in_target_column_suggestion_mode && !state.target_column_suggestions.is_empty() {
+                let current_selection = state.selected_target_column_suggestion_index.unwrap_or(0);
+                let next_selection = (current_selection + 1) % state.target_column_suggestions.len();
+                state.selected_target_column_suggestion_index = Some(next_selection);
+            }
+        }
+        "suggestion_up" => {
+             if state.in_target_column_suggestion_mode && !state.target_column_suggestions.is_empty() {
+                let current_selection = state.selected_target_column_suggestion_index.unwrap_or(0);
+                let prev_selection = if current_selection == 0 {
+                    state.target_column_suggestions.len() - 1
+                } else {
+                    current_selection - 1
+                };
+                state.selected_target_column_suggestion_index = Some(prev_selection);
+            }
+        }
+        "select_suggestion" => {
+            if state.in_target_column_suggestion_mode {
+                let mut selected_suggestion_text: Option<String> = None;
+
+                if let Some(selected_idx) = state.selected_target_column_suggestion_index {
+                    if let Some(suggestion) = state.target_column_suggestions.get(selected_idx) {
+                        selected_suggestion_text = Some(suggestion.clone());
+                    }
+                }
+
+                if let Some(suggestion_text) = selected_suggestion_text {
+                    state.target_column_input = suggestion_text.clone();
+                    state.target_column_cursor_pos = state.target_column_input.len();
+                    *ideal_cursor_column = state.target_column_cursor_pos;
+                    state.set_has_unsaved_changes(true);
+                    message = format!("Selected column: '{}'", suggestion_text);
+                }
+
+                state.in_target_column_suggestion_mode = false;
+                state.show_target_column_suggestions = false;
+                state.selected_target_column_suggestion_index = None;
+                state.update_target_column_suggestions();
+            } else {
+                let current_field = state.current_field();
+                let next_field = (current_field + 1) % AddLogicState::INPUT_FIELD_COUNT;
+                state.set_current_field(next_field);
+                *ideal_cursor_column = state.current_cursor_pos();
+                message = format!("Focus on field {}", state.fields()[next_field]);
+            }
+        }
+        _ => {}
+    }
+    Ok(message)
+}

client/src/functions/modes/edit/add_table_e.rs

@@ -0,0 +1,341 @@
+// src/functions/modes/edit/add_table_e.rs
+use crate::state::pages::add_table::AddTableState;
+use crate::state::pages::canvas_state::CanvasState; // Use trait
+use crossterm::event::{KeyCode, KeyEvent};
+use anyhow::Result;
+
+#[derive(PartialEq)]
+enum CharType {
+    Whitespace,
+    Alphanumeric,
+    Punctuation,
+}
+
+fn get_char_type(c: char) -> CharType {
+    if c.is_whitespace() {
+        CharType::Whitespace
+    } else if c.is_alphanumeric() {
+        CharType::Alphanumeric
+    } else {
+        CharType::Punctuation
+    }
+}
+
+fn find_next_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos >= len {
+        return len;
+    }
+
+    let mut pos = current_pos;
+    let initial_type = get_char_type(chars[pos]);
+
+    while pos < len && get_char_type(chars[pos]) == initial_type {
+        pos += 1;
+    }
+
+    while pos < len && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos += 1;
+    }
+
+    pos
+}
+
+fn find_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.min(len - 1);
+
+    if get_char_type(chars[pos]) == CharType::Whitespace {
+        pos = find_next_word_start(text, pos);
+    }
+
+    if pos >= len {
+        return len.saturating_sub(1);
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == word_type {
+        pos += 1;
+    }
+
+    pos.saturating_sub(1).min(len.saturating_sub(1))
+}
+
+fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        return 0;
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    pos
+}
+
+fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        return 0;
+    }
+    if pos == 0 && get_char_type(chars[pos]) != CharType::Whitespace {
+        return 0;
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos > 0 {
+        pos - 1
+    } else {
+        0
+    }
+}
+
+/// Executes edit actions for the AddTable view canvas.
+pub async fn execute_edit_action(
+    action: &str,
+    key: KeyEvent, // Needed for insert_char
+    state: &mut AddTableState,
+    ideal_cursor_column: &mut usize,
+    // Add other params like grpc_client if needed for future actions (e.g., validation)
+) -> Result<String> {
+    // Use the CanvasState trait methods implemented for AddTableState
+    match action {
+        "insert_char" => {
+            if let KeyCode::Char(c) = key.code {
+                let cursor_pos = state.current_cursor_pos();
+                let field_value = state.get_current_input_mut();
+                let mut chars: Vec<char> = field_value.chars().collect();
+                if cursor_pos <= chars.len() {
+                    chars.insert(cursor_pos, c);
+                    *field_value = chars.into_iter().collect();
+                    state.set_current_cursor_pos(cursor_pos + 1);
+                    state.set_has_unsaved_changes(true);
+                    *ideal_cursor_column = state.current_cursor_pos();
+                }
+            } else {
+                return Ok("Error: insert_char called without a char key.".to_string());
+            }
+            Ok("".to_string()) // No message needed for char insertion
+        }
+        "delete_char_backward" => {
+            if state.current_cursor_pos() > 0 {
+                let cursor_pos = state.current_cursor_pos();
+                let field_value = state.get_current_input_mut();
+                let mut chars: Vec<char> = field_value.chars().collect();
+                if cursor_pos <= chars.len() {
+                    chars.remove(cursor_pos - 1);
+                    *field_value = chars.into_iter().collect();
+                    let new_pos = cursor_pos - 1;
+                    state.set_current_cursor_pos(new_pos);
+                    state.set_has_unsaved_changes(true);
+                    *ideal_cursor_column = new_pos;
+                }
+            }
+            Ok("".to_string())
+        }
+        "delete_char_forward" => {
+            let cursor_pos = state.current_cursor_pos();
+            let field_value = state.get_current_input_mut();
+            let mut chars: Vec<char> = field_value.chars().collect();
+            if cursor_pos < chars.len() {
+                chars.remove(cursor_pos);
+                *field_value = chars.into_iter().collect();
+                state.set_has_unsaved_changes(true);
+                *ideal_cursor_column = cursor_pos;
+            }
+            Ok("".to_string())
+        }
+        "next_field" => {
+            let num_fields = AddTableState::INPUT_FIELD_COUNT;
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let last_field_index = num_fields - 1;
+                // Prevent cycling forward
+                if current_field < last_field_index {
+                    state.set_current_field(current_field + 1);
+                }
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok("".to_string())
+        }
+        "prev_field" => {
+            let num_fields = AddTableState::INPUT_FIELD_COUNT;
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                if current_field > 0 {
+                    state.set_current_field(current_field - 1);
+                }
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok("".to_string())
+        }
+        "move_left" => {
+            let new_pos = state.current_cursor_pos().saturating_sub(1);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "move_right" => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            if current_pos < current_input.len() {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_up" => {
+            let current_field = state.current_field();
+            // Prevent moving up from the first field
+            if current_field > 0 {
+                let new_field = current_field - 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok("ahoj".to_string())
+        }
+        "move_down" => {
+            let num_fields = AddTableState::INPUT_FIELD_COUNT;
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let last_field_index = num_fields - 1;
+                if current_field < last_field_index {
+                    let new_field = current_field + 1;
+                    state.set_current_field(new_field);
+                    let current_input = state.get_current_input();
+                    let max_pos = current_input.len();
+                    state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+                }
+            }
+            Ok("".to_string())
+        }
+        "move_line_start" => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok("".to_string())
+        }
+        "move_line_end" => {
+            let current_input = state.get_current_input();
+            let new_pos = current_input.len();
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "move_first_line" => {
+            if AddTableState::INPUT_FIELD_COUNT > 0 {
+                state.set_current_field(0);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok("".to_string())
+        }
+        "move_last_line" => {
+            let num_fields = AddTableState::INPUT_FIELD_COUNT;
+            if num_fields > 0 {
+                let new_field = num_fields - 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos((*ideal_cursor_column).min(max_pos));
+            }
+            Ok("".to_string())
+        }
+        "move_word_next" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_next_word_start(current_input, state.current_cursor_pos());
+                let final_pos = new_pos.min(current_input.len());
+                state.set_current_cursor_pos(final_pos);
+                *ideal_cursor_column = final_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let current_pos = state.current_cursor_pos();
+                let new_pos = find_word_end(current_input, current_pos);
+
+                let final_pos = if new_pos == current_pos {
+                    find_word_end(current_input, new_pos + 1)
+                } else {
+                    new_pos
+                };
+
+                let max_valid_index = current_input.len().saturating_sub(1);
+                let clamped_pos = final_pos.min(max_valid_index);
+                state.set_current_cursor_pos(clamped_pos);
+                *ideal_cursor_column = clamped_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_start(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_end_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_end(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        // Actions handled by main event loop (mode changes, save, revert)
+        "exit_edit_mode" | "save" | "revert" => {
+            Ok("Action handled by main loop".to_string())
+        }
+        _ => Ok(format!("Unknown or unhandled edit action: {}", action)),
+    }
+}

client/src/functions/modes/edit/auth_e.rs

@@ -0,0 +1,476 @@
+// src/functions/modes/edit/auth_e.rs
+
+use crate::services::grpc_client::GrpcClient;
+use crate::state::pages::canvas_state::CanvasState;
+use crate::state::pages::form::FormState;
+use crate::state::pages::auth::RegisterState;
+use crate::state::app::state::AppState;
+use crate::tui::functions::common::form::{revert, save};
+use crossterm::event::{KeyCode, KeyEvent};
+use std::any::Any;
+use anyhow::Result;
+
+pub async fn execute_common_action<S: CanvasState + Any>(
+    action: &str,
+    state: &mut S,
+    grpc_client: &mut GrpcClient,
+    app_state: &AppState,
+    current_position: &mut u64,
+    total_count: u64,
+) -> Result<String> {
+    match action {
+        "save" | "revert" => {
+            if !state.has_unsaved_changes() {
+                return Ok("No changes to save or revert.".to_string());
+            }
+            if let Some(form_state) =
+                (state as &mut dyn Any).downcast_mut::<FormState>()
+            {
+                match action {
+                    "save" => {
+                        let outcome = save(
+                            app_state,
+                            form_state,
+                            grpc_client,
+                        )
+                        .await?;
+                        let message = format!("Save successful: {:?}", outcome); // Simple message for now
+                        Ok(message)
+                    }
+                    "revert" => {
+                        revert(
+                            form_state,
+                            grpc_client,
+                        )
+                        .await
+                    }
+                    _ => unreachable!(),
+                }
+            } else {
+                Ok(format!(
+                    "Action '{}' not implemented for this state type.",
+                    action
+                ))
+            }
+        }
+        _ => Ok(format!("Common action '{}' not handled here.", action)),
+    }
+}
+
+pub async fn execute_edit_action<S: CanvasState + Any + Send>(
+    action: &str,
+    key: KeyEvent,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+) -> Result<String> {
+    match action {
+        "insert_char" => {
+            if let KeyCode::Char(c) = key.code {
+                let cursor_pos = state.current_cursor_pos();
+                let field_value = state.get_current_input_mut();
+                let mut chars: Vec<char> = field_value.chars().collect();
+                if cursor_pos <= chars.len() {
+                    chars.insert(cursor_pos, c);
+                    *field_value = chars.into_iter().collect();
+                    state.set_current_cursor_pos(cursor_pos + 1);
+                    state.set_has_unsaved_changes(true);
+                    *ideal_cursor_column = state.current_cursor_pos();
+                }
+            } else {
+                return Ok("Error: insert_char called without a char key."
+                    .to_string());
+            }
+            Ok("working?".to_string())
+        }
+
+        "delete_char_backward" => {
+            if state.current_cursor_pos() > 0 {
+                let cursor_pos = state.current_cursor_pos();
+                let field_value = state.get_current_input_mut();
+                let mut chars: Vec<char> = field_value.chars().collect();
+                if cursor_pos <= chars.len() {
+                    chars.remove(cursor_pos - 1);
+                    *field_value = chars.into_iter().collect();
+                    let new_pos = cursor_pos - 1;
+                    state.set_current_cursor_pos(new_pos);
+                    state.set_has_unsaved_changes(true);
+                    *ideal_cursor_column = new_pos;
+                }
+            }
+            Ok("".to_string())
+        }
+
+        "delete_char_forward" => {
+            let cursor_pos = state.current_cursor_pos();
+            let field_value = state.get_current_input_mut();
+            let mut chars: Vec<char> = field_value.chars().collect();
+            if cursor_pos < chars.len() {
+                chars.remove(cursor_pos);
+                *field_value = chars.into_iter().collect();
+                state.set_has_unsaved_changes(true);
+                *ideal_cursor_column = cursor_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "next_field" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = (current_field + 1).min(num_fields - 1);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("".to_string())
+        }
+
+        "prev_field" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = current_field.saturating_sub(1);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("".to_string())
+        }
+
+        "move_left" => {
+            let new_pos = state.current_cursor_pos().saturating_sub(1);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+
+        "move_right" => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            if current_pos < current_input.len() {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "move_up" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = current_field.saturating_sub(1);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("".to_string())
+        }
+
+        "move_down" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let new_field = (state.current_field() + 1).min(num_fields - 1);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("".to_string())
+        }
+
+        "move_line_start" => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok("".to_string())
+        }
+
+        "move_line_end" => {
+            let current_input = state.get_current_input();
+            let new_pos = current_input.len();
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+
+        "move_first_line" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                state.set_current_field(0);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("Moved to first field".to_string())
+        }
+
+        "move_last_line" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let new_field = num_fields - 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("Moved to last field".to_string())
+        }
+
+        "move_word_next" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_next_word_start(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                let final_pos = new_pos.min(current_input.len());
+                state.set_current_cursor_pos(final_pos);
+                *ideal_cursor_column = final_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "move_word_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let current_pos = state.current_cursor_pos();
+                let new_pos = find_word_end(current_input, current_pos);
+
+                let final_pos = if new_pos == current_pos {
+                    find_word_end(current_input, new_pos + 1)
+                } else {
+                    new_pos
+                };
+
+                let max_valid_index = current_input.len().saturating_sub(1);
+                let clamped_pos = final_pos.min(max_valid_index);
+                state.set_current_cursor_pos(clamped_pos);
+                *ideal_cursor_column = clamped_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "move_word_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_start(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "move_word_end_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_end(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("Moved to previous word end".to_string())
+        }
+
+        // --- Autocomplete Actions ---
+        "suggestion_down" | "suggestion_up" | "select_suggestion" | "exit_suggestion_mode" => {
+            // Attempt to downcast to RegisterState to handle suggestion logic here
+            if let Some(register_state) = (state as &mut dyn Any).downcast_mut::<RegisterState>() {
+                // Only handle if it's the role field (index 4)
+                if register_state.current_field() == 4 {
+                    match action {
+                        "suggestion_down" if register_state.in_suggestion_mode => {
+                            let max_index = register_state.role_suggestions.len().saturating_sub(1);
+                            let current_index = register_state.selected_suggestion_index.unwrap_or(0);
+                            register_state.selected_suggestion_index = Some(if current_index >= max_index { 0 } else { current_index + 1 });
+                            Ok("Suggestion changed down".to_string())
+                        }
+                        "suggestion_up" if register_state.in_suggestion_mode => {
+                            let max_index = register_state.role_suggestions.len().saturating_sub(1);
+                            let current_index = register_state.selected_suggestion_index.unwrap_or(0);
+                            register_state.selected_suggestion_index = Some(if current_index == 0 { max_index } else { current_index.saturating_sub(1) });
+                            Ok("Suggestion changed up".to_string())
+                        }
+                        "select_suggestion" if register_state.in_suggestion_mode => {
+                            if let Some(index) = register_state.selected_suggestion_index {
+                                if let Some(selected_role) = register_state.role_suggestions.get(index).cloned() {
+                                    register_state.role = selected_role.clone(); // Update the role field
+                                    register_state.in_suggestion_mode = false; // Exit suggestion mode
+                                    register_state.show_role_suggestions = false; // Hide suggestions
+                                    register_state.selected_suggestion_index = None; // Clear selection
+                                    Ok(format!("Selected role: {}", selected_role)) // Return success message
+                                } else {
+                                    Ok("Selected suggestion index out of bounds.".to_string()) // Error case
+                                }
+                            } else {
+                                Ok("No suggestion selected".to_string())
+                            }
+                        }
+                        "exit_suggestion_mode" => { // Handle Esc or other conditions
+                            register_state.show_role_suggestions = false;
+                            register_state.selected_suggestion_index = None;
+                            register_state.in_suggestion_mode = false;
+                            Ok("Suggestions hidden".to_string())
+                        }
+                        _ => {
+                            // Action is suggestion-related but state doesn't match (e.g., not in suggestion mode)
+                            Ok("Suggestion action ignored: State mismatch.".to_string())
+                        }
+                    }
+                } else {
+                    // It's RegisterState, but not the role field
+                    Ok("Suggestion action ignored: Not on role field.".to_string())
+                 }
+            } else {
+                // Downcast failed - this action is only for RegisterState
+                Ok(format!("Action '{}' not applicable for this state type.", action))
+            }
+        }
+        // --- End Autocomplete Actions ---
+
+
+        _ => Ok(format!("Unknown or unhandled edit action: {}", action)),
+    }
+}
+
+#[derive(PartialEq)]
+enum CharType {
+    Whitespace,
+    Alphanumeric,
+    Punctuation,
+}
+
+fn get_char_type(c: char) -> CharType {
+    if c.is_whitespace() {
+        CharType::Whitespace
+    } else if c.is_alphanumeric() {
+        CharType::Alphanumeric
+    } else {
+        CharType::Punctuation
+    }
+}
+
+fn find_next_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos >= len {
+        return len;
+    }
+
+    let mut pos = current_pos;
+    let initial_type = get_char_type(chars[pos]);
+
+    while pos < len && get_char_type(chars[pos]) == initial_type {
+        pos += 1;
+    }
+
+    while pos < len && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos += 1;
+    }
+
+    pos
+}
+
+fn find_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.min(len - 1);
+
+    if get_char_type(chars[pos]) == CharType::Whitespace {
+        pos = find_next_word_start(text, pos);
+    }
+
+    if pos >= len {
+        return len.saturating_sub(1);
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == word_type {
+        pos += 1;
+    }
+
+    pos.saturating_sub(1).min(len.saturating_sub(1))
+}
+
+fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        return 0;
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    pos
+}
+
+fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        return 0;
+    }
+    if pos == 0 && get_char_type(chars[pos]) != CharType::Whitespace {
+        return 0;
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos > 0 {
+        pos - 1
+    } else {
+        0
+    }
+}

client/src/functions/modes/edit/form_e.rs

@@ -0,0 +1,435 @@
+// src/functions/modes/edit/form_e.rs
+
+use crate::services::grpc_client::GrpcClient;
+use crate::state::pages::form::FormState;
+use crate::state::app::state::AppState;
+use crate::tui::functions::common::form::{revert, save};
+use crate::tui::functions::common::form::SaveOutcome;
+use crate::modes::handlers::event::EventOutcome;
+use crossterm::event::{KeyCode, KeyEvent};
+use canvas::CanvasState;
+use std::any::Any;
+use anyhow::Result;
+
+pub async fn execute_common_action<S: CanvasState + Any>(
+    action: &str,
+    state: &mut S,
+    grpc_client: &mut GrpcClient,
+    app_state: &AppState,
+) -> Result<EventOutcome> {
+    match action {
+        "save" | "revert" => {
+            if !state.has_unsaved_changes() {
+                return Ok(EventOutcome::Ok("No changes to save or revert.".to_string()));
+            }
+            if let Some(form_state) =
+                (state as &mut dyn Any).downcast_mut::<FormState>()
+            {
+                match action {
+                    "save" => {
+                        let save_result = save(
+                            app_state,
+                            form_state,
+                            grpc_client,
+                        ).await;
+
+                        match save_result {
+                            Ok(save_outcome) => {
+                                let message = match save_outcome {
+                                    SaveOutcome::NoChange => "No changes to save.".to_string(),
+                                    SaveOutcome::UpdatedExisting => "Entry updated.".to_string(),
+                                    SaveOutcome::CreatedNew(_) => "New entry created.".to_string(),
+                                };
+                                Ok(EventOutcome::DataSaved(save_outcome, message))
+                            }
+                            Err(e) => Err(e),
+                        }
+                    }
+                    "revert" => {
+                        let revert_result = revert(
+                            form_state,
+                            grpc_client,
+                        ).await;
+
+                        match revert_result {
+                            Ok(message) => Ok(EventOutcome::Ok(message)),
+                            Err(e) => Err(e),
+                        }
+                    }
+                    _ => unreachable!(),
+                }
+            } else {
+                Ok(EventOutcome::Ok(format!(
+                    "Action '{}' not implemented for this state type.",
+                    action
+                )))
+            }
+        }
+        _ => Ok(EventOutcome::Ok(format!("Common action '{}' not handled here.", action))),
+    }
+}
+
+pub async fn execute_edit_action<S: CanvasState>(
+    action: &str,
+    key: KeyEvent,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+) -> Result<String> {
+    match action {
+        "insert_char" => {
+            if let KeyCode::Char(c) = key.code {
+                let cursor_pos = state.current_cursor_pos();
+                let field_value = state.get_current_input_mut();
+                let mut chars: Vec<char> = field_value.chars().collect();
+                if cursor_pos <= chars.len() {
+                    chars.insert(cursor_pos, c);
+                    *field_value = chars.into_iter().collect();
+                    state.set_current_cursor_pos(cursor_pos + 1);
+                    state.set_has_unsaved_changes(true);
+                    *ideal_cursor_column = state.current_cursor_pos();
+                }
+            } else {
+                return Ok("Error: insert_char called without a char key."
+                    .to_string());
+            }
+            Ok("".to_string())
+        }
+
+        "delete_char_backward" => {
+            if state.current_cursor_pos() > 0 {
+                let cursor_pos = state.current_cursor_pos();
+                let field_value = state.get_current_input_mut();
+                let mut chars: Vec<char> = field_value.chars().collect();
+                if cursor_pos <= chars.len() {
+                    chars.remove(cursor_pos - 1);
+                    *field_value = chars.into_iter().collect();
+                    let new_pos = cursor_pos - 1;
+                    state.set_current_cursor_pos(new_pos);
+                    state.set_has_unsaved_changes(true);
+                    *ideal_cursor_column = new_pos;
+                }
+            }
+            Ok("".to_string())
+        }
+
+        "delete_char_forward" => {
+            let cursor_pos = state.current_cursor_pos();
+            let field_value = state.get_current_input_mut();
+            let mut chars: Vec<char> = field_value.chars().collect();
+            if cursor_pos < chars.len() {
+                chars.remove(cursor_pos);
+                *field_value = chars.into_iter().collect();
+                state.set_has_unsaved_changes(true);
+                *ideal_cursor_column = cursor_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "next_field" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = (current_field + 1) % num_fields;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("".to_string())
+        }
+
+        "prev_field" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = if current_field == 0 {
+                    num_fields - 1
+                } else {
+                    current_field - 1
+                };
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("".to_string())
+        }
+
+        "move_left" => {
+            let new_pos = state.current_cursor_pos().saturating_sub(1);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+
+        "move_right" => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            if current_pos < current_input.len() {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "move_up" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let current_field = state.current_field();
+                let new_field = current_field.saturating_sub(1);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("".to_string())
+        }
+
+        "move_down" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let new_field = (state.current_field() + 1).min(num_fields - 1);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("".to_string())
+        }
+
+        "move_line_start" => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok("".to_string())
+        }
+
+        "move_line_end" => {
+            let current_input = state.get_current_input();
+            let new_pos = current_input.len();
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+
+        "move_first_line" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                state.set_current_field(0);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("Moved to first field".to_string())
+        }
+
+        "move_last_line" => {
+            let num_fields = state.fields().len();
+            if num_fields > 0 {
+                let new_field = num_fields - 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_pos = current_input.len();
+                state.set_current_cursor_pos(
+                    (*ideal_cursor_column).min(max_pos),
+                );
+            }
+            Ok("Moved to last field".to_string())
+        }
+
+        "move_word_next" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_next_word_start(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                let final_pos = new_pos.min(current_input.len());
+                state.set_current_cursor_pos(final_pos);
+                *ideal_cursor_column = final_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "move_word_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let current_pos = state.current_cursor_pos();
+                let new_pos = find_word_end(current_input, current_pos);
+
+                let final_pos = if new_pos == current_pos {
+                    find_word_end(current_input, new_pos + 1)
+                } else {
+                    new_pos
+                };
+
+                let max_valid_index = current_input.len().saturating_sub(1);
+                let clamped_pos = final_pos.min(max_valid_index);
+                state.set_current_cursor_pos(clamped_pos);
+                *ideal_cursor_column = clamped_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "move_word_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_start(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+
+        "move_word_end_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_end(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("Moved to previous word end".to_string())
+        }
+
+        _ => Ok(format!("Unknown or unhandled edit action: {}", action)),
+    }
+}
+
+#[derive(PartialEq)]
+enum CharType {
+    Whitespace,
+    Alphanumeric,
+    Punctuation,
+}
+
+fn get_char_type(c: char) -> CharType {
+    if c.is_whitespace() {
+        CharType::Whitespace
+    } else if c.is_alphanumeric() {
+        CharType::Alphanumeric
+    } else {
+        CharType::Punctuation
+    }
+}
+
+fn find_next_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos >= len {
+        return len;
+    }
+
+    let mut pos = current_pos;
+    let initial_type = get_char_type(chars[pos]);
+
+    while pos < len && get_char_type(chars[pos]) == initial_type {
+        pos += 1;
+    }
+
+    while pos < len && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos += 1;
+    }
+
+    pos
+}
+
+fn find_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.min(len - 1);
+
+    if get_char_type(chars[pos]) == CharType::Whitespace {
+        pos = find_next_word_start(text, pos);
+    }
+
+    if pos >= len {
+        return len.saturating_sub(1);
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == word_type {
+        pos += 1;
+    }
+
+    pos.saturating_sub(1).min(len.saturating_sub(1))
+}
+
+fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        return 0;
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    pos
+}
+
+fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        return 0;
+    }
+    if pos == 0 && get_char_type(chars[pos]) != CharType::Whitespace {
+        return 0;
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos > 0 {
+        pos - 1
+    } else {
+        0
+    }
+}

client/src/functions/modes/navigation.rs

@@ -0,0 +1,5 @@
+// src/functions/modes/navigation.rs
+
+pub mod admin_nav;
+pub mod add_table_nav;
+pub mod add_logic_nav;

client/src/functions/modes/navigation/add_logic_nav.rs

@@ -0,0 +1,440 @@
+// src/functions/modes/navigation/add_logic_nav.rs
+use crate::config::binds::config::{Config, EditorKeybindingMode};
+use crate::state::{
+    app::state::AppState,
+    pages::add_logic::{AddLogicFocus, AddLogicState},
+    app::buffer::AppView,
+    app::buffer::BufferState,
+};
+use crossterm::event::{KeyEvent, KeyCode, KeyModifiers};
+use crate::services::GrpcClient;
+use tokio::sync::mpsc;
+use anyhow::Result;
+use crate::components::common::text_editor::TextEditor;
+use crate::services::ui_service::UiService;
+use tui_textarea::CursorMove; // Ensure this import is present
+
+pub type SaveLogicResultSender = mpsc::Sender<Result<String>>;
+
+pub fn handle_add_logic_navigation(
+    key_event: KeyEvent,
+    config: &Config,
+    app_state: &mut AppState,
+    add_logic_state: &mut AddLogicState,
+    is_edit_mode: &mut bool,
+    buffer_state: &mut BufferState,
+    grpc_client: GrpcClient,
+    _save_logic_sender: SaveLogicResultSender, // Marked as unused
+    command_message: &mut String,
+) -> bool {
+    // === FULLSCREEN SCRIPT EDITING - COMPLETE ISOLATION ===
+    if add_logic_state.current_focus == AddLogicFocus::InsideScriptContent {
+        // === AUTOCOMPLETE HANDLING ===
+        if add_logic_state.script_editor_autocomplete_active {
+            match key_event.code {
+                // ... (Char, Backspace, Tab, Down, Up cases remain the same) ...
+                KeyCode::Char(c) if c.is_alphanumeric() || c == '_' => {
+                    add_logic_state.script_editor_filter_text.push(c);
+                    add_logic_state.update_script_editor_suggestions();
+                    {
+                        let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+                        TextEditor::handle_input(
+                            &mut editor_borrow,
+                            key_event,
+                            &add_logic_state.editor_keybinding_mode,
+                            &mut add_logic_state.vim_state,
+                        );
+                    }
+                    *command_message = format!("Filtering: @{}", add_logic_state.script_editor_filter_text);
+                    return true;
+                }
+                KeyCode::Backspace => {
+                    if !add_logic_state.script_editor_filter_text.is_empty() {
+                        add_logic_state.script_editor_filter_text.pop();
+                        add_logic_state.update_script_editor_suggestions();
+                        {
+                            let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+                            TextEditor::handle_input(
+                                &mut editor_borrow,
+                                key_event,
+                                &add_logic_state.editor_keybinding_mode,
+                                &mut add_logic_state.vim_state,
+                            );
+                        }
+                        *command_message = if add_logic_state.script_editor_filter_text.is_empty() {
+                            "Autocomplete: @".to_string()
+                        } else {
+                            format!("Filtering: @{}", add_logic_state.script_editor_filter_text)
+                        };
+                    } else {
+                        let should_deactivate = if let Some((trigger_line, trigger_col)) = add_logic_state.script_editor_trigger_position {
+                            let current_cursor = {
+                                let editor_borrow = add_logic_state.script_content_editor.borrow();
+                                editor_borrow.cursor()
+                            };
+                            current_cursor.0 == trigger_line && current_cursor.1 == trigger_col + 1
+                        } else {
+                            false
+                        };
+                        if should_deactivate {
+                            add_logic_state.deactivate_script_editor_autocomplete();
+                            *command_message = "Autocomplete cancelled".to_string();
+                        }
+                        {
+                            let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+                            TextEditor::handle_input(
+                                &mut editor_borrow,
+                                key_event,
+                                &add_logic_state.editor_keybinding_mode,
+                                &mut add_logic_state.vim_state,
+                            );
+                        }
+                    }
+                    return true;
+                }
+                KeyCode::Tab | KeyCode::Down => {
+                    if !add_logic_state.script_editor_suggestions.is_empty() {
+                        let current = add_logic_state.script_editor_selected_suggestion_index.unwrap_or(0);
+                        let next = (current + 1) % add_logic_state.script_editor_suggestions.len();
+                        add_logic_state.script_editor_selected_suggestion_index = Some(next);
+                        *command_message = format!("Selected: {}", add_logic_state.script_editor_suggestions[next]);
+                    }
+                    return true;
+                }
+                KeyCode::Up => {
+                    if !add_logic_state.script_editor_suggestions.is_empty() {
+                        let current = add_logic_state.script_editor_selected_suggestion_index.unwrap_or(0);
+                        let prev = if current == 0 {
+                            add_logic_state.script_editor_suggestions.len() - 1
+                        } else {
+                            current - 1
+                        };
+                        add_logic_state.script_editor_selected_suggestion_index = Some(prev);
+                        *command_message = format!("Selected: {}", add_logic_state.script_editor_suggestions[prev]);
+                    }
+                    return true;
+                }
+                KeyCode::Enter => {
+                    if let Some(selected_idx) = add_logic_state.script_editor_selected_suggestion_index {
+                        if let Some(suggestion) = add_logic_state.script_editor_suggestions.get(selected_idx).cloned() {
+                            let trigger_pos = add_logic_state.script_editor_trigger_position;
+                            let filter_len = add_logic_state.script_editor_filter_text.len();
+
+                            add_logic_state.deactivate_script_editor_autocomplete();
+                            add_logic_state.has_unsaved_changes = true;
+
+                            if let Some(pos) = trigger_pos {
+                                let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+
+                                if suggestion == "sql" {
+                                    replace_autocomplete_text(&mut editor_borrow, pos, filter_len, "sql");
+                                    editor_borrow.insert_str("('')");
+                                    // Move cursor back twice to be between the single quotes
+                                    editor_borrow.move_cursor(CursorMove::Back); // Before ')'
+                                    editor_borrow.move_cursor(CursorMove::Back); // Before ''' (inside '')
+                                    *command_message = "Inserted: @sql('')".to_string();
+                                } else {
+                                    let is_table_selection = add_logic_state.is_table_name_suggestion(&suggestion);
+                                    replace_autocomplete_text(&mut editor_borrow, pos, filter_len, &suggestion);
+
+                                    if is_table_selection {
+                                        editor_borrow.insert_str(".");
+                                        let new_cursor = editor_borrow.cursor();
+                                        drop(editor_borrow); // Release borrow before calling add_logic_state methods
+
+                                        add_logic_state.script_editor_trigger_position = Some(new_cursor);
+                                        add_logic_state.script_editor_autocomplete_active = true;
+                                        add_logic_state.script_editor_filter_text.clear();
+                                        add_logic_state.trigger_column_autocomplete_for_table(suggestion.clone());
+
+                                        let profile_name = add_logic_state.profile_name.clone();
+                                        let table_name_for_fetch = suggestion.clone();
+                                        let mut client_clone = grpc_client.clone();
+                                        tokio::spawn(async move {
+                                            match UiService::fetch_columns_for_table(&mut client_clone, &profile_name, &table_name_for_fetch).await {
+                                                Ok(_columns) => {
+                                                    // Result handled by main UI loop
+                                                }
+                                                Err(e) => {
+                                                    tracing::error!("Failed to fetch columns for {}.{}: {}", profile_name, table_name_for_fetch, e);
+                                                }
+                                            }
+                                        });
+                                        *command_message = format!("Selected table '{}', fetching columns...", suggestion);
+                                    } else {
+                                        *command_message = format!("Inserted: {}", suggestion);
+                                    }
+                                }
+                            }
+                            return true;
+                        }
+                    }
+                    add_logic_state.deactivate_script_editor_autocomplete();
+                    {
+                        let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+                        TextEditor::handle_input(
+                            &mut editor_borrow,
+                            key_event,
+                            &add_logic_state.editor_keybinding_mode,
+                            &mut add_logic_state.vim_state,
+                        );
+                    }
+                    return true;
+                }
+                KeyCode::Esc => {
+                    add_logic_state.deactivate_script_editor_autocomplete();
+                    *command_message = "Autocomplete cancelled".to_string();
+                }
+                _ => {
+                    add_logic_state.deactivate_script_editor_autocomplete();
+                    *command_message = "Autocomplete cancelled".to_string();
+                    {
+                        let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+                        TextEditor::handle_input(
+                            &mut editor_borrow,
+                            key_event,
+                            &add_logic_state.editor_keybinding_mode,
+                            &mut add_logic_state.vim_state,
+                        );
+                    }
+                    return true;
+                }
+            }
+        }
+
+        if key_event.code == KeyCode::Char('@') && key_event.modifiers == KeyModifiers::NONE {
+            let should_trigger = match add_logic_state.editor_keybinding_mode {
+                EditorKeybindingMode::Vim => *is_edit_mode,
+                _ => true,
+            };
+            if should_trigger {
+                let cursor_before = {
+                    let editor_borrow = add_logic_state.script_content_editor.borrow();
+                    editor_borrow.cursor()
+                };
+                {
+                    let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+                    TextEditor::handle_input(
+                        &mut editor_borrow,
+                        key_event,
+                        &add_logic_state.editor_keybinding_mode,
+                        &mut add_logic_state.vim_state,
+                    );
+                }
+                add_logic_state.script_editor_trigger_position = Some(cursor_before);
+                add_logic_state.script_editor_autocomplete_active = true;
+                add_logic_state.script_editor_filter_text.clear();
+                add_logic_state.update_script_editor_suggestions();
+                add_logic_state.has_unsaved_changes = true;
+                *command_message = "Autocomplete: @ (Tab/↑↓ to navigate, Enter to select, Esc to cancel)".to_string();
+                return true;
+            }
+        }
+
+        if key_event.code == KeyCode::Esc && key_event.modifiers == KeyModifiers::NONE {
+            match add_logic_state.editor_keybinding_mode {
+                EditorKeybindingMode::Vim => {
+                    if *is_edit_mode {
+                        {
+                            let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+                            TextEditor::handle_input(
+                                &mut editor_borrow,
+                                key_event,
+                                &add_logic_state.editor_keybinding_mode,
+                                &mut add_logic_state.vim_state,
+                            );
+                        }
+                        if TextEditor::is_vim_normal_mode(&add_logic_state.vim_state) {
+                            *is_edit_mode = false;
+                            *command_message = "VIM: Normal Mode. Esc again to exit script.".to_string();
+                        }
+                    } else {
+                        add_logic_state.current_focus = AddLogicFocus::ScriptContentPreview;
+                        app_state.ui.focus_outside_canvas = true;
+                        *is_edit_mode = false;
+                        *command_message = "Exited script editing.".to_string();
+                    }
+                }
+                _ => {
+                    if *is_edit_mode {
+                        *is_edit_mode = false;
+                        *command_message = "Exited script edit. Esc again to exit script.".to_string();
+                    } else {
+                        add_logic_state.current_focus = AddLogicFocus::ScriptContentPreview;
+                        app_state.ui.focus_outside_canvas = true;
+                        *is_edit_mode = false;
+                        *command_message = "Exited script editing.".to_string();
+                    }
+                }
+            }
+            return true;
+        }
+
+        let changed = {
+            let mut editor_borrow = add_logic_state.script_content_editor.borrow_mut();
+            TextEditor::handle_input(
+                &mut editor_borrow,
+                key_event,
+                &add_logic_state.editor_keybinding_mode,
+                &mut add_logic_state.vim_state,
+            )
+        };
+        if changed {
+            add_logic_state.has_unsaved_changes = true;
+        }
+        if add_logic_state.editor_keybinding_mode == EditorKeybindingMode::Vim {
+            *is_edit_mode = !TextEditor::is_vim_normal_mode(&add_logic_state.vim_state);
+        }
+        return true;
+    }
+
+    let action = config.get_general_action(key_event.code, key_event.modifiers);
+    let current_focus = add_logic_state.current_focus;
+    let mut handled = true;
+    let mut new_focus = current_focus;
+
+    match action.as_deref() {
+        Some("exit_table_scroll") => {
+            handled = false;
+        }
+        Some("move_up") => {
+            match current_focus {
+                AddLogicFocus::InputLogicName => {}
+                AddLogicFocus::InputTargetColumn => new_focus = AddLogicFocus::InputLogicName,
+                AddLogicFocus::InputDescription => new_focus = AddLogicFocus::InputTargetColumn,
+                AddLogicFocus::ScriptContentPreview => new_focus = AddLogicFocus::InputDescription,
+                AddLogicFocus::SaveButton => new_focus = AddLogicFocus::ScriptContentPreview,
+                AddLogicFocus::CancelButton => new_focus = AddLogicFocus::SaveButton,
+                _ => handled = false,
+            }
+        }
+        Some("move_down") => {
+            match current_focus {
+                AddLogicFocus::InputLogicName => new_focus = AddLogicFocus::InputTargetColumn,
+                AddLogicFocus::InputTargetColumn => new_focus = AddLogicFocus::InputDescription,
+                AddLogicFocus::InputDescription => {
+                    add_logic_state.last_canvas_field = 2;
+                    new_focus = AddLogicFocus::ScriptContentPreview;
+                },
+                AddLogicFocus::ScriptContentPreview => new_focus = AddLogicFocus::SaveButton,
+                AddLogicFocus::SaveButton => new_focus = AddLogicFocus::CancelButton,
+                AddLogicFocus::CancelButton => {}
+                _ => handled = false,
+            }
+        }
+        Some("next_option") => {
+            match current_focus {
+                AddLogicFocus::InputLogicName | AddLogicFocus::InputTargetColumn | AddLogicFocus::InputDescription =>
+                    { new_focus = AddLogicFocus::ScriptContentPreview; }
+                AddLogicFocus::ScriptContentPreview => new_focus = AddLogicFocus::SaveButton,
+                AddLogicFocus::SaveButton => new_focus = AddLogicFocus::CancelButton,
+                AddLogicFocus::CancelButton => { }
+                _ => handled = false,
+            }
+        }
+        Some("previous_option") => {
+            match current_focus {
+                AddLogicFocus::InputLogicName | AddLogicFocus::InputTargetColumn | AddLogicFocus::InputDescription =>
+                    { }
+                AddLogicFocus::ScriptContentPreview => new_focus = AddLogicFocus::InputDescription,
+                AddLogicFocus::SaveButton => new_focus = AddLogicFocus::ScriptContentPreview,
+                AddLogicFocus::CancelButton => new_focus = AddLogicFocus::SaveButton,
+                _ => handled = false,
+            }
+        }
+        Some("next_field") => {
+            new_focus = match current_focus {
+                AddLogicFocus::InputLogicName => AddLogicFocus::InputTargetColumn,
+                AddLogicFocus::InputTargetColumn => AddLogicFocus::InputDescription,
+                AddLogicFocus::InputDescription => AddLogicFocus::ScriptContentPreview,
+                AddLogicFocus::ScriptContentPreview => AddLogicFocus::SaveButton,
+                AddLogicFocus::SaveButton => AddLogicFocus::CancelButton,
+                AddLogicFocus::CancelButton => AddLogicFocus::InputLogicName,
+                _ => current_focus,
+            };
+        }
+        Some("prev_field") => {
+            new_focus = match current_focus {
+                AddLogicFocus::InputLogicName => AddLogicFocus::CancelButton,
+                AddLogicFocus::InputTargetColumn => AddLogicFocus::InputLogicName,
+                AddLogicFocus::InputDescription => AddLogicFocus::InputTargetColumn,
+                AddLogicFocus::ScriptContentPreview => AddLogicFocus::InputDescription,
+                AddLogicFocus::SaveButton => AddLogicFocus::ScriptContentPreview,
+                AddLogicFocus::CancelButton => AddLogicFocus::SaveButton,
+                _ => current_focus,
+            };
+        }
+        Some("select") => {
+            match current_focus {
+                AddLogicFocus::ScriptContentPreview => {
+                    new_focus = AddLogicFocus::InsideScriptContent;
+                    *is_edit_mode = false;
+                    app_state.ui.focus_outside_canvas = false;
+                    let mode_hint = match add_logic_state.editor_keybinding_mode {
+                        EditorKeybindingMode::Vim => "VIM mode - 'i'/'a'/'o' to edit",
+                        _ => "Enter/Ctrl+E to edit",
+                    };
+                    *command_message = format!("Fullscreen script editing. {} or Esc to exit.", mode_hint);
+                }
+                AddLogicFocus::SaveButton => {
+                    *command_message = "Save logic action".to_string();
+                }
+                AddLogicFocus::CancelButton => {
+                    buffer_state.update_history(AppView::Admin);
+                    app_state.ui.show_add_logic = false;
+                    *command_message = "Cancelled Add Logic".to_string();
+                    *is_edit_mode = false;
+                }
+                AddLogicFocus::InputLogicName | AddLogicFocus::InputTargetColumn | AddLogicFocus::InputDescription => {
+                    *is_edit_mode = !*is_edit_mode;
+                    *command_message = format!("Field edit mode: {}", if *is_edit_mode { "ON" } else { "OFF" });
+                }
+                _ => handled = false,
+            }
+        }
+        Some("toggle_edit_mode") => {
+            match current_focus {
+                AddLogicFocus::InputLogicName | AddLogicFocus::InputTargetColumn | AddLogicFocus::InputDescription => {
+                    *is_edit_mode = !*is_edit_mode;
+                    *command_message = format!("Canvas field edit mode: {}", if *is_edit_mode { "ON" } else { "OFF" });
+                }
+                _ => {
+                    *command_message = "Cannot toggle edit mode here.".to_string();
+                }
+            }
+        }
+        _ => handled = false,
+    }
+
+    if handled && current_focus != new_focus {
+        add_logic_state.current_focus = new_focus;
+        let new_is_canvas_input_focus = matches!(new_focus,
+            AddLogicFocus::InputLogicName | AddLogicFocus::InputTargetColumn | AddLogicFocus::InputDescription
+        );
+        if new_is_canvas_input_focus {
+            *is_edit_mode = false;
+            app_state.ui.focus_outside_canvas = false;
+        } else {
+            app_state.ui.focus_outside_canvas = true;
+            if matches!(new_focus, AddLogicFocus::ScriptContentPreview) {
+                *is_edit_mode = false;
+            }
+        }
+    }
+    handled
+}
+
+fn replace_autocomplete_text(
+    editor: &mut tui_textarea::TextArea,
+    trigger_pos: (usize, usize),
+    filter_len: usize,
+    replacement: &str,
+) {
+    // use tui_textarea::CursorMove; // Already imported at the top of the module
+    let filter_start_pos = (trigger_pos.0, trigger_pos.1 + 1);
+    editor.move_cursor(CursorMove::Jump(filter_start_pos.0 as u16, filter_start_pos.1 as u16));
+    for _ in 0..filter_len {
+        editor.delete_next_char();
+    }
+    editor.insert_str(replacement);
+}

client/src/functions/modes/navigation/add_table_nav.rs

@@ -0,0 +1,205 @@
+// src/functions/modes/navigation/add_table_nav.rs
+use crate::config::binds::config::Config;
+use crate::state::{
+    app::state::AppState,
+    pages::add_table::{AddTableFocus, AddTableState},
+};
+use crossterm::event::{KeyEvent};
+use ratatui::widgets::TableState;
+use crate::tui::functions::common::add_table::{handle_add_column_action, handle_save_table_action};
+use crate::ui::handlers::context::DialogPurpose;
+use crate::services::GrpcClient;
+use tokio::sync::mpsc;
+use anyhow::Result;
+
+pub type SaveTableResultSender = mpsc::Sender<Result<String>>;
+
+fn navigate_table_up(table_state: &mut TableState, item_count: usize) -> bool {
+    if item_count == 0 { return false; }
+    let current_selection = table_state.selected();
+    match current_selection {
+        Some(index) => {
+            if index > 0 { table_state.select(Some(index - 1)); true }
+            else { false }
+        }
+        None => { table_state.select(Some(0)); true }
+    }
+}
+
+fn navigate_table_down(table_state: &mut TableState, item_count: usize) -> bool {
+     if item_count == 0 { return false; }
+    let current_selection = table_state.selected();
+    match current_selection {
+        Some(index) => {
+            if index < item_count - 1 { table_state.select(Some(index + 1)); true }
+            else { false }
+        }
+        None => { table_state.select(Some(0)); true }
+    }
+}
+
+pub fn handle_add_table_navigation(
+    key: KeyEvent,
+    config: &Config,
+    app_state: &mut AppState,
+    add_table_state: &mut AddTableState,
+    grpc_client: GrpcClient,
+    save_result_sender: SaveTableResultSender,
+    command_message: &mut String,
+) -> bool {
+    let action = config.get_general_action(key.code, key.modifiers);
+    let current_focus = add_table_state.current_focus;
+    let mut handled = true;
+    let mut new_focus = current_focus;
+
+    if matches!(current_focus, AddTableFocus::InsideColumnsTable | AddTableFocus::InsideIndexesTable | AddTableFocus::InsideLinksTable) {
+        if matches!(action.as_deref(), Some("next_option") | Some("previous_option")) {
+            *command_message = "Press Esc to exit table item navigation first.".to_string();
+            return true;
+        }
+    }
+
+    match action.as_deref() {
+       Some("exit_table_scroll") => {
+           match current_focus {
+               AddTableFocus::InsideColumnsTable => {
+                   add_table_state.column_table_state.select(None);
+                   new_focus = AddTableFocus::ColumnsTable;
+                   // *command_message = "Exited Columns Table".to_string(); // Minimal change: remove message
+               }
+               AddTableFocus::InsideIndexesTable => {
+                   add_table_state.index_table_state.select(None);
+                   new_focus = AddTableFocus::IndexesTable;
+                   // *command_message = "Exited Indexes Table".to_string();
+               }
+               AddTableFocus::InsideLinksTable => {
+                   add_table_state.link_table_state.select(None);
+                   new_focus = AddTableFocus::LinksTable;
+                   // *command_message = "Exited Links Table".to_string();
+               }
+               _ => handled = false,
+           }
+       }
+        Some("move_up") => {
+            match current_focus {
+                AddTableFocus::InputTableName => {
+                    // MINIMAL CHANGE: Do nothing, new_focus remains current_focus
+                    // *command_message = "At top of form.".to_string(); // Remove message
+                }
+                AddTableFocus::InputColumnName => new_focus = AddTableFocus::InputTableName,
+                AddTableFocus::InputColumnType => new_focus = AddTableFocus::InputColumnName,
+                AddTableFocus::AddColumnButton => new_focus = AddTableFocus::InputColumnType,
+                AddTableFocus::ColumnsTable => new_focus = AddTableFocus::AddColumnButton,
+                AddTableFocus::IndexesTable => new_focus = AddTableFocus::ColumnsTable,
+                AddTableFocus::LinksTable => new_focus = AddTableFocus::IndexesTable,
+                AddTableFocus::InsideColumnsTable => { navigate_table_up(&mut add_table_state.column_table_state, add_table_state.columns.len()); }
+                AddTableFocus::InsideIndexesTable => { navigate_table_up(&mut add_table_state.index_table_state, add_table_state.indexes.len()); }
+                AddTableFocus::InsideLinksTable => { navigate_table_up(&mut add_table_state.link_table_state, add_table_state.links.len()); }
+                AddTableFocus::SaveButton => new_focus = AddTableFocus::LinksTable,
+                AddTableFocus::DeleteSelectedButton => new_focus = AddTableFocus::SaveButton,
+                AddTableFocus::CancelButton => new_focus = AddTableFocus::DeleteSelectedButton,
+            }
+        }
+        Some("move_down") => {
+            match current_focus {
+                AddTableFocus::InputTableName => new_focus = AddTableFocus::InputColumnName,
+                AddTableFocus::InputColumnName => new_focus = AddTableFocus::InputColumnType,
+                AddTableFocus::InputColumnType => {
+                    add_table_state.last_canvas_field = 2;
+                    new_focus = AddTableFocus::AddColumnButton;
+                },
+                AddTableFocus::AddColumnButton => new_focus = AddTableFocus::ColumnsTable,
+                AddTableFocus::ColumnsTable => new_focus = AddTableFocus::IndexesTable,
+                AddTableFocus::IndexesTable => new_focus = AddTableFocus::LinksTable,
+                AddTableFocus::LinksTable => new_focus = AddTableFocus::SaveButton,
+                AddTableFocus::InsideColumnsTable => { navigate_table_down(&mut add_table_state.column_table_state, add_table_state.columns.len()); }
+                AddTableFocus::InsideIndexesTable => { navigate_table_down(&mut add_table_state.index_table_state, add_table_state.indexes.len()); }
+                AddTableFocus::InsideLinksTable => { navigate_table_down(&mut add_table_state.link_table_state, add_table_state.links.len()); }
+                AddTableFocus::SaveButton => new_focus = AddTableFocus::DeleteSelectedButton,
+                AddTableFocus::DeleteSelectedButton => new_focus = AddTableFocus::CancelButton,
+                AddTableFocus::CancelButton => {
+                    // MINIMAL CHANGE: Do nothing, new_focus remains current_focus
+                    // *command_message = "At bottom of form.".to_string(); // Remove message
+                }
+            }
+        }
+        Some("next_option") => { // This logic should already be non-wrapping
+            match current_focus {
+                AddTableFocus::InputTableName | AddTableFocus::InputColumnName | AddTableFocus::InputColumnType =>
+                    { new_focus = AddTableFocus::AddColumnButton; }
+                AddTableFocus::AddColumnButton => new_focus = AddTableFocus::ColumnsTable,
+                AddTableFocus::ColumnsTable => new_focus = AddTableFocus::IndexesTable,
+                AddTableFocus::IndexesTable => new_focus = AddTableFocus::LinksTable,
+                AddTableFocus::LinksTable => new_focus = AddTableFocus::SaveButton,
+                AddTableFocus::SaveButton => new_focus = AddTableFocus::DeleteSelectedButton,
+                AddTableFocus::DeleteSelectedButton => new_focus = AddTableFocus::CancelButton,
+                AddTableFocus::CancelButton => { /* *command_message = "At last focusable area.".to_string(); */ } // No change in focus
+                _ => handled = false,
+            }
+        }
+        Some("previous_option") => { // This logic should already be non-wrapping
+            match current_focus {
+                AddTableFocus::InputTableName | AddTableFocus::InputColumnName | AddTableFocus::InputColumnType =>
+                    { /* *command_message = "At first focusable area.".to_string(); */ } // No change in focus
+                AddTableFocus::AddColumnButton => new_focus = AddTableFocus::InputColumnType,
+                AddTableFocus::ColumnsTable => new_focus = AddTableFocus::AddColumnButton,
+                AddTableFocus::IndexesTable => new_focus = AddTableFocus::ColumnsTable,
+                AddTableFocus::LinksTable => new_focus = AddTableFocus::IndexesTable,
+                AddTableFocus::SaveButton => new_focus = AddTableFocus::LinksTable,
+                AddTableFocus::DeleteSelectedButton => new_focus = AddTableFocus::SaveButton,
+                AddTableFocus::CancelButton => new_focus = AddTableFocus::DeleteSelectedButton,
+                _ => handled = false,
+            }
+        }
+        Some("next_field") => {
+            new_focus = match current_focus {
+                AddTableFocus::InputTableName => AddTableFocus::InputColumnName, AddTableFocus::InputColumnName => AddTableFocus::InputColumnType, AddTableFocus::InputColumnType => AddTableFocus::AddColumnButton, AddTableFocus::AddColumnButton => AddTableFocus::ColumnsTable,
+                AddTableFocus::ColumnsTable | AddTableFocus::InsideColumnsTable => AddTableFocus::IndexesTable, AddTableFocus::IndexesTable | AddTableFocus::InsideIndexesTable => AddTableFocus::LinksTable, AddTableFocus::LinksTable | AddTableFocus::InsideLinksTable => AddTableFocus::SaveButton,
+                AddTableFocus::SaveButton => AddTableFocus::DeleteSelectedButton, AddTableFocus::DeleteSelectedButton => AddTableFocus::CancelButton, AddTableFocus::CancelButton => AddTableFocus::InputTableName,
+            };
+        }
+        Some("prev_field") => {
+            new_focus = match current_focus {
+                AddTableFocus::InputTableName => AddTableFocus::CancelButton, AddTableFocus::InputColumnName => AddTableFocus::InputTableName, AddTableFocus::InputColumnType => AddTableFocus::InputColumnName, AddTableFocus::AddColumnButton => AddTableFocus::InputColumnType,
+                AddTableFocus::ColumnsTable | AddTableFocus::InsideColumnsTable => AddTableFocus::AddColumnButton, AddTableFocus::IndexesTable | AddTableFocus::InsideIndexesTable => AddTableFocus::ColumnsTable, AddTableFocus::LinksTable | AddTableFocus::InsideLinksTable => AddTableFocus::IndexesTable,
+                AddTableFocus::SaveButton => AddTableFocus::LinksTable, AddTableFocus::DeleteSelectedButton => AddTableFocus::SaveButton, AddTableFocus::CancelButton => AddTableFocus::DeleteSelectedButton,
+            };
+        }
+        Some("select") => {
+            match current_focus {
+                AddTableFocus::ColumnsTable => { new_focus = AddTableFocus::InsideColumnsTable; if add_table_state.column_table_state.selected().is_none() && !add_table_state.columns.is_empty() { add_table_state.column_table_state.select(Some(0)); } /* Message removed */ }
+                AddTableFocus::IndexesTable => { new_focus = AddTableFocus::InsideIndexesTable; if add_table_state.index_table_state.selected().is_none() && !add_table_state.indexes.is_empty() { add_table_state.index_table_state.select(Some(0)); } /* Message removed */ }
+                AddTableFocus::LinksTable => { new_focus = AddTableFocus::InsideLinksTable; if add_table_state.link_table_state.selected().is_none() && !add_table_state.links.is_empty() { add_table_state.link_table_state.select(Some(0)); } /* Message removed */ }
+                AddTableFocus::InsideColumnsTable => { if let Some(index) = add_table_state.column_table_state.selected() { if let Some(col) = add_table_state.columns.get_mut(index) { col.selected = !col.selected; add_table_state.has_unsaved_changes = true; /* Message removed */ }} /* else { Message removed } */ }
+                AddTableFocus::InsideIndexesTable => { if let Some(index) = add_table_state.index_table_state.selected() { if let Some(idx_def) = add_table_state.indexes.get_mut(index) { idx_def.selected = !idx_def.selected; add_table_state.has_unsaved_changes = true; /* Message removed */ }} /* else { Message removed } */ }
+                AddTableFocus::InsideLinksTable => { if let Some(index) = add_table_state.link_table_state.selected() { if let Some(link) = add_table_state.links.get_mut(index) { link.selected = !link.selected; add_table_state.has_unsaved_changes = true; /* Message removed */ }} /* else { Message removed } */ }
+                AddTableFocus::AddColumnButton => { if let Some(focus_after_add) = handle_add_column_action(add_table_state, command_message) { new_focus = focus_after_add; } else { /* Message already set by handle_add_column_action */ }}
+                AddTableFocus::SaveButton => { if add_table_state.table_name.is_empty() { *command_message = "Cannot save: Table name is empty.".to_string(); } else if add_table_state.columns.is_empty() { *command_message = "Cannot save: No columns defined.".to_string(); } else { *command_message = "Saving table...".to_string(); app_state.show_loading_dialog("Saving", "Please wait..."); let mut client_clone = grpc_client.clone(); let state_clone = add_table_state.clone(); let sender_clone = save_result_sender.clone(); tokio::spawn(async move { let result = handle_save_table_action(&mut client_clone, &state_clone).await; let _ = sender_clone.send(result).await; }); }}
+                AddTableFocus::DeleteSelectedButton => { let columns_to_delete: Vec<(usize, String, String)> = add_table_state.columns.iter().enumerate().filter(|(_, col)| col.selected).map(|(index, col)| (index, col.name.clone(), col.data_type.clone())).collect(); if columns_to_delete.is_empty() { *command_message = "No columns selected for deletion.".to_string(); } else { let column_details: String = columns_to_delete.iter().map(|(index, name, dtype)| format!("{}. {} ({})", index + 1, name, dtype)).collect::<Vec<String>>().join("\n"); let message = format!("Delete the following columns?\n\n{}", column_details); app_state.show_dialog("Confirm Deletion", &message, vec!["Confirm".to_string(), "Cancel".to_string()], DialogPurpose::ConfirmDeleteColumns); }}
+                AddTableFocus::CancelButton => { *command_message = "Action: Cancel Add Table (Not Implemented)".to_string(); }
+                _ => { handled = false; }
+            }
+        }
+        _ => handled = false,
+    }
+
+    if handled && current_focus != new_focus {
+        add_table_state.current_focus = new_focus;
+        // Minimal change: Command message update logic can be simplified or removed if not desired
+        // For now, let's keep it minimal and only update if it was truly a focus change,
+        // and not a boundary message.
+        if !command_message.starts_with("At ") && current_focus != new_focus { // Avoid overwriting boundary messages
+            // *command_message = format!("Focus: {:?}", add_table_state.current_focus); // Optional: restore if needed
+        }
+
+
+        let new_is_canvas_input_focus = matches!(new_focus,
+            AddTableFocus::InputTableName | AddTableFocus::InputColumnName | AddTableFocus::InputColumnType
+        );
+        app_state.ui.focus_outside_canvas = !new_is_canvas_input_focus;
+    }
+    // If not handled, command_message remains as it was (e.g., from a deeper function call or previous event)
+    // or can be cleared if that's the desired default. For minimal change, we leave it.
+
+    handled
+}

client/src/functions/modes/navigation/admin_nav.rs

@@ -0,0 +1,351 @@
+// src/functions/modes/navigation/admin_nav.rs
+use crate::state::pages::admin::{AdminFocus, AdminState};
+use crate::state::app::state::AppState;
+use crate::config::binds::config::Config;
+use crate::state::app::buffer::{BufferState, AppView};
+use crate::state::pages::add_table::{AddTableState, LinkDefinition};
+use ratatui::widgets::ListState;
+use crate::state::pages::add_logic::{AddLogicState, AddLogicFocus}; // Added AddLogicFocus import
+
+// Helper functions list_select_next and list_select_previous remain the same
+fn list_select_next(list_state: &mut ListState, item_count: usize) {
+    if item_count == 0 {
+        list_state.select(None);
+        return;
+    }
+    let i = match list_state.selected() {
+        Some(i) => if i >= item_count - 1 { 0 } else { i + 1 },
+        None => 0,
+    };
+    list_state.select(Some(i));
+}
+
+fn list_select_previous(list_state: &mut ListState, item_count: usize) {
+    if item_count == 0 {
+        list_state.select(None);
+        return;
+    }
+    let i = match list_state.selected() {
+        Some(i) => if i == 0 { item_count - 1 } else { i - 1 },
+        None => if item_count > 0 { item_count - 1 } else { 0 },
+    };
+    list_state.select(Some(i));
+}
+
+pub fn handle_admin_navigation(
+    key: crossterm::event::KeyEvent,
+    config: &Config,
+    app_state: &mut AppState,
+    admin_state: &mut AdminState,
+    buffer_state: &mut BufferState,
+    command_message: &mut String,
+) -> bool {
+    let action = config.get_general_action(key.code, key.modifiers).map(String::from);
+    let current_focus = admin_state.current_focus;
+    let profile_count = app_state.profile_tree.profiles.len();
+    let mut handled = false;
+
+    match current_focus {
+        AdminFocus::ProfilesPane => {
+            match action.as_deref() {
+                Some("select") => {
+                    admin_state.current_focus = AdminFocus::InsideProfilesList;
+                    if !app_state.profile_tree.profiles.is_empty() {
+                        if admin_state.profile_list_state.selected().is_none() {
+                            admin_state.profile_list_state.select(Some(0));
+                        }
+                    }
+                    *command_message = "Navigating profiles. Use Up/Down. Esc to exit.".to_string();
+                    handled = true;
+                }
+                Some("next_option") | Some("move_down") => {
+                    admin_state.current_focus = AdminFocus::Tables;
+                    *command_message = "Focus: Tables Pane".to_string();
+                    handled = true;
+                }
+                Some("previous_option") | Some("move_up") => {
+                    // No wrap-around: Stay on ProfilesPane if trying to go "before" it
+                    *command_message = "At first focusable pane.".to_string();
+                    handled = true;
+                }
+                _ => handled = false,
+            }
+        }
+
+        AdminFocus::InsideProfilesList => {
+            match action.as_deref() {
+                Some("move_up") => {
+                    if profile_count > 0 {
+                        list_select_previous(&mut admin_state.profile_list_state, profile_count);
+                        *command_message = "".to_string();
+                        handled = true;
+                    }
+                }
+                Some("move_down") => {
+                    if profile_count > 0 {
+                        list_select_next(&mut admin_state.profile_list_state, profile_count);
+                        *command_message = "".to_string();
+                        handled = true;
+                    }
+                }
+                Some("select") => {
+                    admin_state.selected_profile_index = admin_state.profile_list_state.selected();
+                    admin_state.selected_table_index = None; // Deselect table when profile changes
+                    if let Some(profile_idx) = admin_state.selected_profile_index {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(profile_idx) {
+                            if !profile.tables.is_empty() {
+                                admin_state.table_list_state.select(Some(0)); // Auto-select first table for nav
+                            } else {
+                                admin_state.table_list_state.select(None);
+                            }
+                        }
+                    } else {
+                        admin_state.table_list_state.select(None);
+                    }
+                    *command_message = format!(
+                        "Profile '{}' set as active.",
+                        admin_state.get_selected_profile_name().unwrap_or(&"N/A".to_string())
+                    );
+                    handled = true;
+                }
+                Some("exit_table_scroll") => {
+                    admin_state.current_focus = AdminFocus::ProfilesPane;
+                    *command_message = "Focus: Profiles Pane".to_string();
+                    handled = true;
+                }
+                _ => handled = false,
+            }
+        }
+
+        AdminFocus::Tables => {
+            match action.as_deref() {
+                Some("select") => {
+                    admin_state.current_focus = AdminFocus::InsideTablesList;
+                    let current_profile_idx = admin_state.selected_profile_index
+                        .or_else(|| admin_state.profile_list_state.selected());
+                    if let Some(profile_idx) = current_profile_idx {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(profile_idx) {
+                             if !profile.tables.is_empty() {
+                                if admin_state.table_list_state.selected().is_none() {
+                                    admin_state.table_list_state.select(Some(0));
+                                }
+                             } else {
+                                admin_state.table_list_state.select(None);
+                             }
+                        } else {
+                            admin_state.table_list_state.select(None);
+                        }
+                    } else {
+                        admin_state.table_list_state.select(None);
+                         *command_message = "Select a profile first to view its tables.".to_string();
+                    }
+                    if admin_state.current_focus == AdminFocus::InsideTablesList && !admin_state.table_list_state.selected().is_none() {
+                        *command_message = "Navigating tables. Use Up/Down. Esc to exit.".to_string();
+                    } else if admin_state.table_list_state.selected().is_none() {
+                         if current_profile_idx.is_none() {
+                            *command_message = "No profile selected to view tables.".to_string();
+                         } else {
+                            *command_message = "No tables in selected profile.".to_string();
+                         }
+                         admin_state.current_focus = AdminFocus::Tables; // Stay in Tables pane if no tables to enter
+                    }
+                    handled = true;
+                }
+                Some("previous_option") | Some("move_up") => {
+                    admin_state.current_focus = AdminFocus::ProfilesPane;
+                    *command_message = "Focus: Profiles Pane".to_string();
+                    handled = true;
+                }
+                Some("next_option") | Some("move_down") => {
+                    admin_state.current_focus = AdminFocus::Button1;
+                    *command_message = "Focus: Add Logic Button".to_string();
+                    handled = true;
+                }
+                _ => handled = false,
+            }
+        }
+
+        AdminFocus::InsideTablesList => {
+            match action.as_deref() {
+                Some("move_up") => {
+                    let current_profile_idx = admin_state.selected_profile_index
+                        .or_else(|| admin_state.profile_list_state.selected());
+                    if let Some(p_idx) = current_profile_idx {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(p_idx) {
+                            if !profile.tables.is_empty() {
+                                list_select_previous(&mut admin_state.table_list_state, profile.tables.len());
+                                *command_message = "".to_string();
+                                handled = true;
+                            } else {
+                                *command_message = "No tables to navigate.".to_string();
+                                handled = true;
+                            }
+                        }
+                    } else {
+                        *command_message = "No active profile for tables.".to_string();
+                        handled = true;
+                    }
+                }
+                Some("move_down") => {
+                    let current_profile_idx = admin_state.selected_profile_index
+                        .or_else(|| admin_state.profile_list_state.selected());
+                    if let Some(p_idx) = current_profile_idx {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(p_idx) {
+                             if !profile.tables.is_empty() {
+                                list_select_next(&mut admin_state.table_list_state, profile.tables.len());
+                                *command_message = "".to_string();
+                                handled = true;
+                            } else {
+                                *command_message = "No tables to navigate.".to_string();
+                                handled = true;
+                            }
+                        }
+                    } else {
+                        *command_message = "No active profile for tables.".to_string();
+                        handled = true;
+                    }
+                }
+                Some("select") => { // This is for persistently selecting a table with [*]
+                    admin_state.selected_table_index = admin_state.table_list_state.selected();
+                    let table_name = admin_state.selected_profile_index
+                         .and_then(|p_idx| app_state.profile_tree.profiles.get(p_idx))
+                         .and_then(|p| admin_state.selected_table_index.and_then(|t_idx| p.tables.get(t_idx)))
+                         .map_or("N/A", |t| t.name.as_str());
+                    *command_message = format!("Table '{}' set as active.", table_name);
+                    handled = true;
+                }
+                Some("exit_table_scroll") => {
+                    admin_state.current_focus = AdminFocus::Tables;
+                    *command_message = "Focus: Tables Pane".to_string();
+                    handled = true;
+                }
+                _ => handled = false,
+            }
+        }
+
+        AdminFocus::Button1 => { // Add Logic Button
+            match action.as_deref() {
+                Some("select") => { // Typically "Enter" key
+                    if let Some(p_idx) = admin_state.selected_profile_index {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(p_idx) {
+                            if let Some(t_idx) = admin_state.selected_table_index {
+                                if let Some(table) = profile.tables.get(t_idx) {
+                                    // Both profile and table are selected, proceed
+                                    admin_state.add_logic_state = AddLogicState {
+                                        profile_name: profile.name.clone(),
+                                        selected_table_name: Some(table.name.clone()),
+                                        selected_table_id: Some(table.id), // If you have table IDs
+                                        editor_keybinding_mode: config.editor.keybinding_mode.clone(),
+                                        current_focus: AddLogicFocus::default(),
+                                        ..AddLogicState::default()
+                                    };
+                                    
+                                    // Store table info for later fetching
+                                    app_state.pending_table_structure_fetch = Some((
+                                        profile.name.clone(),
+                                        table.name.clone()
+                                    ));
+                                    
+                                    buffer_state.update_history(AppView::AddLogic);
+                                    app_state.ui.focus_outside_canvas = false;
+                                    *command_message = format!(
+                                        "Opening Add Logic for table '{}' in profile '{}'...",
+                                        table.name, profile.name
+                                    );
+                                } else {
+                                    *command_message = "Error: Selected table data not found.".to_string();
+                                }
+                            } else {
+                                *command_message = "Select a table first!".to_string();
+                            }
+                        } else {
+                            *command_message = "Error: Selected profile data not found.".to_string();
+                        }
+                    } else {
+                        *command_message = "Select a profile first!".to_string();
+                    }
+                    handled = true;
+                }
+                Some("previous_option") | Some("move_up") => {
+                    admin_state.current_focus = AdminFocus::Tables;
+                    *command_message = "Focus: Tables Pane".to_string();
+                    handled = true;
+                }
+                Some("next_option") | Some("move_down") => {
+                    admin_state.current_focus = AdminFocus::Button2;
+                    *command_message = "Focus: Add Table Button".to_string();
+                    handled = true;
+                }
+                _ => handled = false,
+            }
+        }
+
+        AdminFocus::Button2 => { // Add Table Button
+            match action.as_deref() {
+                Some("select") => {
+                     if let Some(p_idx) = admin_state.selected_profile_index {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(p_idx) {
+                            let selected_profile_name = profile.name.clone();
+                            // Prepare links from the selected profile's existing tables
+                            let available_links: Vec<LinkDefinition> = profile.tables.iter()
+                                .map(|table| LinkDefinition {
+                                    linked_table_name: table.name.clone(),
+                                    is_required: false, // Default, can be changed in AddTable screen
+                                    selected: false,
+                                }).collect();
+
+                            admin_state.add_table_state = AddTableState {
+                                profile_name: selected_profile_name,
+                                links: available_links,
+                                ..AddTableState::default() // Reset other fields
+                            };
+                            buffer_state.update_history(AppView::AddTable);
+                            app_state.ui.focus_outside_canvas = false;
+                            *command_message = format!("Opening Add Table for profile '{}'...", admin_state.add_table_state.profile_name);
+                            handled = true;
+                        } else {
+                             *command_message = "Error: Selected profile index out of bounds.".to_string();
+                             handled = true;
+                        }
+                    } else {
+                        *command_message = "Please select a profile ([*]) first to add a table.".to_string();
+                        handled = true;
+                    }
+                }
+                Some("previous_option") | Some("move_up") => {
+                    admin_state.current_focus = AdminFocus::Button1;
+                    *command_message = "Focus: Add Logic Button".to_string();
+                    handled = true;
+                }
+                Some("next_option") | Some("move_down") => {
+                    admin_state.current_focus = AdminFocus::Button3;
+                    *command_message = "Focus: Change Table Button".to_string();
+                    handled = true;
+                }
+                _ => handled = false,
+            }
+        }
+
+        AdminFocus::Button3 => { // Change Table Button
+            match action.as_deref() {
+                Some("select") => {
+                    // Future: Logic to load selected table into AddTableState for editing
+                    *command_message = "Action: Change Table (Not Implemented)".to_string();
+                    handled = true;
+                }
+                Some("previous_option") | Some("move_up") => {
+                    admin_state.current_focus = AdminFocus::Button2;
+                    *command_message = "Focus: Add Table Button".to_string();
+                    handled = true;
+                }
+                Some("next_option") | Some("move_down") => {
+                    // No wrap-around: Stay on Button3 if trying to go "after" it
+                    *command_message = "At last focusable button.".to_string();
+                    handled = true;
+                }
+                _ => handled = false,
+            }
+        }
+    }
+    handled
+}

client/src/functions/modes/read_only.rs

@@ -0,0 +1,6 @@
+// src/functions/modes/read_only.rs
+
+pub mod auth_ro;
+pub mod form_ro;
+pub mod add_table_ro;
+pub mod add_logic_ro;

client/src/functions/modes/read_only/add_logic_ro.rs

@@ -0,0 +1,235 @@
+// src/functions/modes/read_only/add_logic_ro.rs
+use crate::config::binds::key_sequences::KeySequenceTracker;
+use crate::state::pages::add_logic::AddLogicState; // Changed
+use crate::state::pages::canvas_state::CanvasState;
+use crate::state::app::state::AppState;
+use anyhow::Result;
+
+// Word navigation helpers (get_char_type, find_next_word_start, etc.)
+// can be kept as they are generic.
+#[derive(PartialEq)]
+enum CharType {
+    Whitespace,
+    Alphanumeric,
+    Punctuation,
+}
+
+fn get_char_type(c: char) -> CharType {
+    if c.is_whitespace() { CharType::Whitespace }
+    else if c.is_alphanumeric() { CharType::Alphanumeric }
+    else { CharType::Punctuation }
+}
+
+fn find_next_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos >= len { return len; }
+    let mut pos = current_pos;
+    let initial_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == initial_type { pos += 1; }
+    while pos < len && get_char_type(chars[pos]) == CharType::Whitespace { pos += 1; }
+    pos
+}
+
+fn find_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 { return 0; }
+    let mut pos = current_pos.min(len - 1);
+    if get_char_type(chars[pos]) == CharType::Whitespace {
+        pos = find_next_word_start(text, pos);
+    }
+    if pos >= len { return len.saturating_sub(1); }
+    let word_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == word_type { pos += 1; }
+    pos.saturating_sub(1).min(len.saturating_sub(1))
+}
+
+fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 { return 0; }
+    let mut pos = current_pos.saturating_sub(1);
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace { pos -= 1; }
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace { return 0; }
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type { pos -= 1; }
+    pos
+}
+
+fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
+    let prev_start = find_prev_word_start(text, current_pos);
+    if prev_start == 0 { return 0; }
+    find_word_end(text, prev_start.saturating_sub(1))
+}
+
+
+/// Executes read-only actions for the AddLogic view canvas.
+pub async fn execute_action(
+    action: &str,
+    app_state: &mut AppState,
+    state: &mut AddLogicState,
+    ideal_cursor_column: &mut usize,
+    key_sequence_tracker: &mut KeySequenceTracker,
+    command_message: &mut String,
+) -> Result<String> {
+    match action {
+        "move_up" => {
+            key_sequence_tracker.reset();
+            let num_fields = AddLogicState::INPUT_FIELD_COUNT;
+            if num_fields == 0 { return Ok("No fields.".to_string()); }
+            let current_field = state.current_field();
+
+            if current_field > 0 {
+                let new_field = current_field - 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = if current_input.is_empty() { 0 } else { current_input.len().saturating_sub(1) };
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+            } else {
+                *command_message = "At top of form.".to_string();
+            }
+            Ok(command_message.clone())
+        }
+        "move_down" => {
+            key_sequence_tracker.reset();
+            let num_fields = AddLogicState::INPUT_FIELD_COUNT;
+            if num_fields == 0 { return Ok("No fields.".to_string()); }
+            let current_field = state.current_field();
+            let last_field_index = num_fields - 1;
+
+            if current_field < last_field_index {
+                let new_field = current_field + 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = if current_input.is_empty() { 0 } else { current_input.len().saturating_sub(1) };
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+            } else {
+                // Move focus outside canvas when moving down from the last field
+                // FIX: Go to ScriptContentPreview instead of SaveButton
+                app_state.ui.focus_outside_canvas = true;
+                state.last_canvas_field = 2;
+                state.current_focus = crate::state::pages::add_logic::AddLogicFocus::ScriptContentPreview; // FIXED!
+                *command_message = "Focus moved to script preview".to_string();
+            }
+            Ok(command_message.clone())
+        }
+        // ... (rest of the actions remain the same) ...
+        "move_first_line" => {
+            key_sequence_tracker.reset();
+            if AddLogicState::INPUT_FIELD_COUNT > 0 {
+                state.set_current_field(0);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = if current_input.is_empty() { 0 } else { current_input.len().saturating_sub(1) };
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_last_line" => {
+            key_sequence_tracker.reset();
+            let num_fields = AddLogicState::INPUT_FIELD_COUNT;
+            if num_fields > 0 {
+                let last_field_index = num_fields - 1;
+                state.set_current_field(last_field_index);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = if current_input.is_empty() { 0 } else { current_input.len().saturating_sub(1) };
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_left" => {
+            let current_pos = state.current_cursor_pos();
+            let new_pos = current_pos.saturating_sub(1);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "move_right" => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len().saturating_sub(1) {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_next" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_next_word_start(current_input, state.current_cursor_pos());
+                let final_pos = new_pos.min(current_input.len().saturating_sub(1));
+                state.set_current_cursor_pos(final_pos);
+                *ideal_cursor_column = final_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let current_pos = state.current_cursor_pos();
+                let new_pos = find_word_end(current_input, current_pos);
+                let final_pos = if new_pos == current_pos && current_pos < current_input.len().saturating_sub(1) {
+                    find_word_end(current_input, current_pos + 1)
+                } else {
+                    new_pos
+                };
+                let max_valid_index = current_input.len().saturating_sub(1);
+                let clamped_pos = final_pos.min(max_valid_index);
+                state.set_current_cursor_pos(clamped_pos);
+                *ideal_cursor_column = clamped_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_start(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_end_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_end(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_line_start" => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok("".to_string())
+        }
+        "move_line_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = current_input.len().saturating_sub(1);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            } else {
+                state.set_current_cursor_pos(0);
+                *ideal_cursor_column = 0;
+            }
+            Ok("".to_string())
+        }
+        "enter_edit_mode_before" | "enter_edit_mode_after" | "enter_command_mode" | "exit_highlight_mode" => {
+             key_sequence_tracker.reset();
+             Ok("Mode change handled by main loop".to_string())
+        }
+        _ => {
+             key_sequence_tracker.reset();
+             command_message.clear();
+             Ok(format!("Unknown read-only action: {}", action))
+        },
+    }
+}
+

client/src/functions/modes/read_only/add_table_ro.rs

@@ -0,0 +1,267 @@
+// src/functions/modes/read_only/add_table_ro.rs
+use crate::config::binds::key_sequences::KeySequenceTracker;
+use crate::state::pages::add_table::AddTableState;
+use crate::state::pages::canvas_state::CanvasState;
+use crate::state::app::state::AppState;
+use anyhow::Result;
+
+// Re-use word navigation helpers if they are public or move them to a common module
+// For now, duplicating them here for simplicity. Consider refactoring later.
+#[derive(PartialEq)]
+enum CharType {
+    Whitespace,
+    Alphanumeric,
+    Punctuation,
+}
+
+fn get_char_type(c: char) -> CharType {
+    if c.is_whitespace() { CharType::Whitespace }
+    else if c.is_alphanumeric() { CharType::Alphanumeric }
+    else { CharType::Punctuation }
+}
+
+fn find_next_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 || current_pos >= len { return len; }
+    let mut pos = current_pos;
+    let initial_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == initial_type { pos += 1; }
+    while pos < len && get_char_type(chars[pos]) == CharType::Whitespace { pos += 1; }
+    pos
+}
+
+fn find_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 { return 0; }
+    let mut pos = current_pos.min(len - 1);
+    if get_char_type(chars[pos]) == CharType::Whitespace {
+        pos = find_next_word_start(text, pos);
+    }
+    if pos >= len { return len.saturating_sub(1); }
+    let word_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == word_type { pos += 1; }
+    pos.saturating_sub(1).min(len.saturating_sub(1))
+}
+
+fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 { return 0; }
+    let mut pos = current_pos.saturating_sub(1);
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace { pos -= 1; }
+    if pos == 0 && get_char_type(chars[pos]) == CharType::Whitespace { return 0; }
+    let word_type = get_char_type(chars[pos]);
+    while pos > 0 && get_char_type(chars[pos - 1]) == word_type { pos -= 1; }
+    pos
+}
+
+// Note: find_prev_word_end might need adjustments based on desired behavior.
+// This version finds the end of the word *before* the previous word start.
+fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
+    let prev_start = find_prev_word_start(text, current_pos);
+    if prev_start == 0 { return 0; }
+    // Find the end of the word that starts at prev_start - 1
+    find_word_end(text, prev_start.saturating_sub(1))
+}
+
+
+/// Executes read-only actions for the AddTable view canvas.
+pub async fn execute_action(
+    action: &str,
+    app_state: &mut AppState, // Needed for focus_outside_canvas
+    state: &mut AddTableState,
+    ideal_cursor_column: &mut usize,
+    key_sequence_tracker: &mut KeySequenceTracker,
+    command_message: &mut String, // Keep for potential messages
+) -> Result<String> {
+    // Use the CanvasState trait methods implemented for AddTableState
+    match action {
+        "move_up" => {
+            key_sequence_tracker.reset();
+            let num_fields = AddTableState::INPUT_FIELD_COUNT;
+            if num_fields == 0 {
+                *command_message = "No fields.".to_string();
+                return Ok(command_message.clone());
+            }
+            let current_field = state.current_field(); // Gets the index (0, 1, or 2)
+
+            if current_field > 0 {
+                // This handles moving from field 2 -> 1, or 1 -> 0
+                let new_field = current_field - 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = current_input.len(); // Allow cursor at end
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos; // Update ideal column as cursor moved
+                *command_message = "".to_string(); // Clear message for successful internal navigation
+            } else {
+                // current_field is 0 (InputTableName), and user pressed Up.
+                // Forbid moving up. Do not change focus or cursor.
+                *command_message = "At top of form.".to_string();
+            }
+            Ok(command_message.clone())
+        }
+        "move_down" => {
+            key_sequence_tracker.reset();
+            let num_fields = AddTableState::INPUT_FIELD_COUNT;
+            if num_fields == 0 {
+                *command_message = "No fields.".to_string();
+                return Ok(command_message.clone());
+            }
+            let current_field = state.current_field();
+            let last_field_index = num_fields - 1;
+
+            if current_field < last_field_index {
+                let new_field = current_field + 1;
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = current_input.len(); // Allow cursor at end
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos; // Update ideal column
+                *command_message = "".to_string();
+            } else {
+                // Move focus outside canvas when moving down from the last field
+                app_state.ui.focus_outside_canvas = true;
+                // Set focus to the first element outside canvas (AddColumnButton)
+                state.current_focus =
+                    crate::state::pages::add_table::AddTableFocus::AddColumnButton;
+                *command_message = "Focus moved below canvas".to_string();
+            }
+            Ok(command_message.clone())
+        }
+        // ... (other actions like "move_first_line", "move_left", etc. remain the same) ...
+        "move_first_line" => {
+            key_sequence_tracker.reset();
+            if AddTableState::INPUT_FIELD_COUNT > 0 {
+                state.set_current_field(0);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = current_input.len();
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos; // Update ideal column
+            }
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_last_line" => {
+            key_sequence_tracker.reset();
+            let num_fields = AddTableState::INPUT_FIELD_COUNT;
+            if num_fields > 0 {
+                let last_field_index = num_fields - 1;
+                state.set_current_field(last_field_index);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = current_input.len();
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos; // Update ideal column
+            }
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_left" => {
+            let current_pos = state.current_cursor_pos();
+            let new_pos = current_pos.saturating_sub(1);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_right" => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            // Allow moving cursor one position past the end
+            if current_pos < current_input.len() {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_word_next" => {
+            let current_input = state.get_current_input();
+            let new_pos = find_next_word_start(
+                current_input,
+                state.current_cursor_pos(),
+            );
+            let final_pos = new_pos.min(current_input.len()); // Allow cursor at end
+            state.set_current_cursor_pos(final_pos);
+            *ideal_cursor_column = final_pos;
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_word_end" => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            let new_pos = find_word_end(current_input, current_pos);
+            // If find_word_end returns current_pos, try starting search from next char
+            let final_pos =
+                if new_pos == current_pos && current_pos < current_input.len() {
+                    find_word_end(current_input, current_pos + 1)
+                } else {
+                    new_pos
+                };
+            let max_valid_index = current_input.len(); // Allow cursor at end
+            let clamped_pos = final_pos.min(max_valid_index);
+            state.set_current_cursor_pos(clamped_pos);
+            *ideal_cursor_column = clamped_pos;
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_word_prev" => {
+            let current_input = state.get_current_input();
+            let new_pos = find_prev_word_start(
+                current_input,
+                state.current_cursor_pos(),
+            );
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_word_end_prev" => {
+            let current_input = state.get_current_input();
+            let new_pos = find_prev_word_end(
+                current_input,
+                state.current_cursor_pos(),
+            );
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_line_start" => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        "move_line_end" => {
+            let current_input = state.get_current_input();
+            let new_pos = current_input.len(); // Allow cursor at end
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            *command_message = "".to_string();
+            Ok(command_message.clone())
+        }
+        // Actions handled by main event loop (mode changes)
+        "enter_edit_mode_before" | "enter_edit_mode_after"
+        | "enter_command_mode" | "exit_highlight_mode" => {
+            key_sequence_tracker.reset();
+            // These actions are primarily mode changes handled by the main event loop.
+            // The message here might be overridden by the main loop's message for mode change.
+            *command_message = "Mode change initiated".to_string();
+            Ok(command_message.clone())
+        }
+        _ => {
+            key_sequence_tracker.reset();
+            *command_message =
+                format!("Unknown read-only action: {}", action);
+            Ok(command_message.clone())
+        }
+    }
+}
+

client/src/functions/modes/read_only/auth_ro.rs

@@ -0,0 +1,343 @@
+// src/functions/modes/read_only/auth_ro.rs
+
+use crate::config::binds::key_sequences::KeySequenceTracker;
+use crate::state::pages::canvas_state::CanvasState;
+use crate::state::app::state::AppState;
+use anyhow::Result;
+
+#[derive(PartialEq)]
+enum CharType {
+    Whitespace,
+    Alphanumeric,
+    Punctuation,
+}
+
+pub async fn execute_action<S: CanvasState>(
+    action: &str,
+    app_state: &mut AppState,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+    key_sequence_tracker: &mut KeySequenceTracker,
+    command_message: &mut String,
+) -> Result<String> {
+    match action {
+        "previous_entry" | "next_entry" => {
+            key_sequence_tracker.reset();
+            Ok(format!(
+                "Action '{}' should be handled by context-specific logic",
+                action
+            ))
+        }
+        "move_up" => {
+            key_sequence_tracker.reset();
+            let num_fields = state.fields().len();
+            if num_fields == 0 {
+                return Ok("No fields to navigate.".to_string());
+            }
+            let current_field = state.current_field();
+            let new_field = current_field.saturating_sub(1);
+            state.set_current_field(new_field);
+            let current_input = state.get_current_input();
+            let max_cursor_pos = if current_input.is_empty() {
+                0
+            } else {
+                current_input.len().saturating_sub(1)
+            };
+            let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+            state.set_current_cursor_pos(new_pos);
+
+            Ok("move up from functions/modes/read_only/auth_ro.rs".to_string())
+        }
+        "move_down" => {
+            key_sequence_tracker.reset();
+            let num_fields = state.fields().len();
+            if num_fields == 0 {
+                return Ok("No fields to navigate.".to_string());
+            }
+            let current_field = state.current_field();
+            let last_field_index = num_fields - 1;
+
+            if current_field == last_field_index {
+                // Already on the last field, move focus outside
+                app_state.ui.focus_outside_canvas = true;
+                app_state.focused_button_index= 0;
+                key_sequence_tracker.reset();
+                Ok("Focus moved below canvas".to_string())
+            } else {
+                // Move to the next field within the canvas
+                let new_field = (current_field + 1).min(last_field_index);
+                state.set_current_field(new_field);
+                let current_input = state.get_current_input();
+                let max_cursor_pos = if current_input.is_empty() {
+                    0
+                } else {
+                    current_input.len().saturating_sub(1)
+                };
+                let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+                state.set_current_cursor_pos(new_pos);
+                Ok("".to_string()) // Clear previous debug message
+            }
+        }
+        "move_first_line" => {
+            key_sequence_tracker.reset();
+            let num_fields = state.fields().len();
+            if num_fields == 0 {
+                return Ok("No fields to navigate to.".to_string());
+            }
+            state.set_current_field(0);
+            let current_input = state.get_current_input();
+            let max_cursor_pos = if current_input.is_empty() {
+                0
+            } else {
+                current_input.len().saturating_sub(1)
+            };
+            let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "move_last_line" => {
+            key_sequence_tracker.reset();
+            let num_fields = state.fields().len();
+            if num_fields == 0 {
+                return Ok("No fields to navigate to.".to_string());
+            }
+            let last_field_index = num_fields - 1;
+            state.set_current_field(last_field_index);
+            let current_input = state.get_current_input();
+            let max_cursor_pos = if current_input.is_empty() {
+                0
+            } else {
+                current_input.len().saturating_sub(1)
+            };
+            let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "exit_edit_mode" => {
+            key_sequence_tracker.reset();
+            command_message.clear();
+            Ok("".to_string())
+        }
+        "move_left" => {
+            let current_pos = state.current_cursor_pos();
+            let new_pos = current_pos.saturating_sub(1);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "move_right" => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            if !current_input.is_empty()
+                && current_pos < current_input.len().saturating_sub(1)
+            {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_next" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos =
+                    find_next_word_start(current_input, state.current_cursor_pos());
+                let final_pos = new_pos.min(current_input.len().saturating_sub(1));
+                state.set_current_cursor_pos(final_pos);
+                *ideal_cursor_column = final_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let current_pos = state.current_cursor_pos();
+                let new_pos = find_word_end(current_input, current_pos);
+
+                let final_pos = if new_pos != current_pos {
+                    new_pos
+                } else {
+                    find_word_end(current_input, new_pos + 1)
+                };
+
+                let max_valid_index = current_input.len().saturating_sub(1);
+                let clamped_pos = final_pos.min(max_valid_index);
+                state.set_current_cursor_pos(clamped_pos);
+                *ideal_cursor_column = clamped_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_start(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_end_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_end(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("Moved to previous word end".to_string())
+        }
+        "move_line_start" => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok("".to_string())
+        }
+        "move_line_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = current_input.len().saturating_sub(1);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            } else {
+                state.set_current_cursor_pos(0);
+                *ideal_cursor_column = 0;
+            }
+            Ok("".to_string())
+        }
+        _ => {
+             key_sequence_tracker.reset();
+             Ok(format!("Unknown read-only action: {}", action))
+        },
+    }
+}
+
+fn get_char_type(c: char) -> CharType {
+    if c.is_whitespace() {
+        CharType::Whitespace
+    } else if c.is_alphanumeric() {
+        CharType::Alphanumeric
+    } else {
+        CharType::Punctuation
+    }
+}
+
+fn find_next_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() {
+        return 0;
+    }
+    let current_pos = current_pos.min(chars.len());
+
+    if current_pos == chars.len() {
+        return current_pos;
+    }
+
+    let mut pos = current_pos;
+    let initial_type = get_char_type(chars[pos]);
+
+    while pos < chars.len() && get_char_type(chars[pos]) == initial_type {
+        pos += 1;
+    }
+
+    while pos < chars.len() && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos += 1;
+    }
+
+    pos
+}
+
+fn find_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.min(len - 1);
+    let current_type = get_char_type(chars[pos]);
+    if current_type != CharType::Whitespace {
+        while pos < len && get_char_type(chars[pos]) == current_type {
+            pos += 1;
+        }
+        return pos.saturating_sub(1);
+    }
+
+    pos = find_next_word_start(text, pos);
+    if pos >= len {
+        return len.saturating_sub(1);
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == word_type {
+        pos += 1;
+    }
+
+    pos.saturating_sub(1).min(len.saturating_sub(1))
+}
+
+fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if get_char_type(chars[pos]) != CharType::Whitespace {
+        let word_type = get_char_type(chars[pos]);
+        while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+            pos -= 1;
+        }
+    }
+
+    if pos == 0 && get_char_type(chars[0]) == CharType::Whitespace {
+         0
+    } else {
+        pos
+    }
+}
+
+fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
+     let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[0]) == CharType::Whitespace {
+        return 0;
+    }
+     if pos == 0 && get_char_type(chars[0]) != CharType::Whitespace {
+         return 0;
+     }
+
+    let word_type = get_char_type(chars[pos]);
+     while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos > 0 {
+        pos - 1
+    } else {
+        0
+    }
+}

client/src/functions/modes/read_only/form_ro.rs

@@ -0,0 +1,329 @@
+// src/functions/modes/read_only/form_ro.rs
+
+use crate::config::binds::key_sequences::KeySequenceTracker;
+use canvas::CanvasState;
+use anyhow::Result;
+
+#[derive(PartialEq)]
+enum CharType {
+    Whitespace,
+    Alphanumeric,
+    Punctuation,
+}
+
+pub async fn execute_action<S: CanvasState>(
+    action: &str,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+    key_sequence_tracker: &mut KeySequenceTracker,
+    command_message: &mut String,
+) -> Result<String> {
+    match action {
+        "previous_entry" | "next_entry" => {
+            key_sequence_tracker.reset();
+            Ok(format!(
+                "Action '{}' should be handled by context-specific logic",
+                action
+            ))
+        }
+        "move_up" => {
+            key_sequence_tracker.reset();
+            let num_fields = state.fields().len();
+            if num_fields == 0 {
+                return Ok("No fields to navigate.".to_string());
+            }
+            let current_field = state.current_field();
+            let new_field = current_field.saturating_sub(1);
+            state.set_current_field(new_field);
+            let current_input = state.get_current_input();
+            let max_cursor_pos = if current_input.is_empty() {
+                0
+            } else {
+                current_input.len().saturating_sub(1)
+            };
+            let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+            state.set_current_cursor_pos(new_pos);
+            Ok("".to_string())
+        }
+        "move_down" => {
+            key_sequence_tracker.reset();
+            let num_fields = state.fields().len();
+            if num_fields == 0 {
+                return Ok("No fields to navigate.".to_string());
+            }
+            let current_field = state.current_field();
+            let new_field = (current_field + 1).min(num_fields - 1);
+            state.set_current_field(new_field);
+            let current_input = state.get_current_input();
+            let max_cursor_pos = if current_input.is_empty() {
+                0
+            } else {
+                current_input.len().saturating_sub(1)
+            };
+            let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+            state.set_current_cursor_pos(new_pos);
+            Ok("".to_string())
+        }
+        "move_first_line" => {
+            key_sequence_tracker.reset();
+            let num_fields = state.fields().len();
+            if num_fields == 0 {
+                return Ok("No fields to navigate to.".to_string());
+            }
+            state.set_current_field(0);
+            let current_input = state.get_current_input();
+            let max_cursor_pos = if current_input.is_empty() {
+                0
+            } else {
+                current_input.len().saturating_sub(1)
+            };
+            let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "move_last_line" => {
+            key_sequence_tracker.reset();
+            let num_fields = state.fields().len();
+            if num_fields == 0 {
+                return Ok("No fields to navigate to.".to_string());
+            }
+            let last_field_index = num_fields - 1;
+            state.set_current_field(last_field_index);
+            let current_input = state.get_current_input();
+            let max_cursor_pos = if current_input.is_empty() {
+                0
+            } else {
+                current_input.len().saturating_sub(1)
+            };
+            let new_pos = (*ideal_cursor_column).min(max_cursor_pos);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "exit_edit_mode" => {
+            key_sequence_tracker.reset();
+            command_message.clear();
+            Ok("".to_string())
+        }
+        "move_left" => {
+            let current_pos = state.current_cursor_pos();
+            let new_pos = current_pos.saturating_sub(1);
+            state.set_current_cursor_pos(new_pos);
+            *ideal_cursor_column = new_pos;
+            Ok("".to_string())
+        }
+        "move_right" => {
+            let current_input = state.get_current_input();
+            let current_pos = state.current_cursor_pos();
+            if !current_input.is_empty()
+                && current_pos < current_input.len().saturating_sub(1)
+            {
+                let new_pos = current_pos + 1;
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_next" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos =
+                    find_next_word_start(current_input, state.current_cursor_pos());
+                let final_pos = new_pos.min(current_input.len().saturating_sub(1));
+                state.set_current_cursor_pos(final_pos);
+                *ideal_cursor_column = final_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let current_pos = state.current_cursor_pos();
+                let new_pos = find_word_end(current_input, current_pos);
+
+                let final_pos = if new_pos != current_pos {
+                    new_pos
+                } else {
+                    find_word_end(current_input, new_pos + 1)
+                };
+
+                let max_valid_index = current_input.len().saturating_sub(1);
+                let clamped_pos = final_pos.min(max_valid_index);
+                state.set_current_cursor_pos(clamped_pos);
+                *ideal_cursor_column = clamped_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_start(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("".to_string())
+        }
+        "move_word_end_prev" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_end(
+                    current_input,
+                    state.current_cursor_pos(),
+                );
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok("Moved to previous word end".to_string())
+        }
+        "move_line_start" => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok("".to_string())
+        }
+        "move_line_end" => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = current_input.len().saturating_sub(1);
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            } else {
+                state.set_current_cursor_pos(0);
+                *ideal_cursor_column = 0;
+            }
+            Ok("".to_string())
+        }
+        _ => {
+             key_sequence_tracker.reset();
+             Ok(format!("Unknown read-only action: {}", action))
+        },
+    }
+}
+
+fn get_char_type(c: char) -> CharType {
+    if c.is_whitespace() {
+        CharType::Whitespace
+    } else if c.is_alphanumeric() {
+        CharType::Alphanumeric
+    } else {
+        CharType::Punctuation
+    }
+}
+
+fn find_next_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() {
+        return 0;
+    }
+    let current_pos = current_pos.min(chars.len());
+
+    if current_pos == chars.len() {
+        return current_pos;
+    }
+
+    let mut pos = current_pos;
+    let initial_type = get_char_type(chars[pos]);
+
+    while pos < chars.len() && get_char_type(chars[pos]) == initial_type {
+        pos += 1;
+    }
+
+    while pos < chars.len() && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos += 1;
+    }
+
+    pos
+}
+
+fn find_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let len = chars.len();
+    if len == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.min(len - 1);
+    let current_type = get_char_type(chars[pos]);
+    if current_type != CharType::Whitespace {
+        while pos < len && get_char_type(chars[pos]) == current_type {
+            pos += 1;
+        }
+        return pos.saturating_sub(1);
+    }
+
+    pos = find_next_word_start(text, pos);
+    if pos >= len {
+        return len.saturating_sub(1);
+    }
+
+    let word_type = get_char_type(chars[pos]);
+    while pos < len && get_char_type(chars[pos]) == word_type {
+        pos += 1;
+    }
+
+    pos.saturating_sub(1).min(len.saturating_sub(1))
+}
+
+fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if get_char_type(chars[pos]) != CharType::Whitespace {
+        let word_type = get_char_type(chars[pos]);
+        while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+            pos -= 1;
+        }
+    }
+
+    if pos == 0 && get_char_type(chars[0]) == CharType::Whitespace {
+         0
+    } else {
+        pos
+    }
+}
+
+fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
+     let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos == 0 && get_char_type(chars[0]) == CharType::Whitespace {
+        return 0;
+    }
+     if pos == 0 && get_char_type(chars[0]) != CharType::Whitespace {
+         return 0;
+     }
+
+    let word_type = get_char_type(chars[pos]);
+     while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+        pos -= 1;
+    }
+
+    while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
+        pos -= 1;
+    }
+
+    if pos > 0 {
+        pos - 1
+    } else {
+        0
+    }
+}

client/src/lib.rs

@@ -5,6 +5,9 @@ pub mod config;
 pub mod state;
 pub mod components;
 pub mod modes;
+pub mod functions;
+pub mod services;
+pub mod utils;
 
 pub use ui::run_ui;
 

client/src/main.rs

@@ -1,10 +1,32 @@
 // client/src/main.rs
 use client::run_ui;
+#[cfg(feature = "ui-debug")]
+use client::utils::debug_logger::UiDebugWriter;
 use dotenvy::dotenv;
-use std::error::Error;
+use anyhow::Result;
+use tracing_subscriber;
+use std::env;
 
 #[tokio::main]
-async fn main() -> Result<(), Box<dyn Error>> {
+async fn main() -> Result<()> {
+    #[cfg(feature = "ui-debug")]
+    {
+        // If ui-debug is on, set up our custom writer.
+        let writer = UiDebugWriter::new();
+        tracing_subscriber::fmt()
+            .with_level(false) // Don't show INFO, ERROR, etc.
+            .with_target(false) // Don't show the module path.
+            .without_time() // This is the correct and simpler method.
+            .with_writer(move || writer.clone())
+            .init();
+    }
+    #[cfg(not(feature = "ui-debug"))]
+    {
+        if env::var("ENABLE_TRACING").is_ok() {
+            tracing_subscriber::fmt::init();
+        }
+    }
+
     dotenv().ok();
     run_ui().await
 }

client/src/modes/canvas.rs

@@ -1,4 +1,4 @@
 // src/client/modes/canvas.rs
 pub mod edit;
-pub mod common;
+pub mod common_mode;
 pub mod read_only;

client/src/modes/canvas/common.rs

@@ -1,165 +0,0 @@
-// src/modes/canvas/common.rs
-
-use crate::tui::terminal::grpc_client::GrpcClient;
-use crate::ui::handlers::form::FormState;
-use common::proto::multieko2::adresar::{PostAdresarRequest, PutAdresarRequest};
-
-/// Shared logic for saving the current form state
-pub async fn save(
-    form_state: &mut FormState,
-    grpc_client: &mut GrpcClient,
-    is_saved: &mut bool,
-    current_position: &mut u64,
-    total_count: u64,
-) -> Result<String, Box<dyn std::error::Error>> {
-    let is_new = *current_position == total_count + 1;
-
-    let message = if is_new {
-        let post_request = PostAdresarRequest {
-            firma: form_state.values[0].clone(),
-            kz: form_state.values[1].clone(),
-            drc: form_state.values[2].clone(),
-            ulica: form_state.values[3].clone(),
-            psc: form_state.values[4].clone(),
-            mesto: form_state.values[5].clone(),
-            stat: form_state.values[6].clone(),
-            banka: form_state.values[7].clone(),
-            ucet: form_state.values[8].clone(),
-            skladm: form_state.values[9].clone(),
-            ico: form_state.values[10].clone(),
-            kontakt: form_state.values[11].clone(),
-            telefon: form_state.values[12].clone(),
-            skladu: form_state.values[13].clone(),
-            fax: form_state.values[14].clone(),
-        };
-        let response = grpc_client.post_adresar(post_request).await?;
-        let new_total = grpc_client.get_adresar_count().await?;
-        *current_position = new_total;
-        form_state.id = response.into_inner().id;
-        "New entry created".to_string()
-    } else {
-        let put_request = PutAdresarRequest {
-            id: form_state.id,
-            firma: form_state.values[0].clone(),
-            kz: form_state.values[1].clone(),
-            drc: form_state.values[2].clone(),
-            ulica: form_state.values[3].clone(),
-            psc: form_state.values[4].clone(),
-            mesto: form_state.values[5].clone(),
-            stat: form_state.values[6].clone(),
-            banka: form_state.values[7].clone(),
-            ucet: form_state.values[8].clone(),
-            skladm: form_state.values[9].clone(),
-            ico: form_state.values[10].clone(),
-            kontakt: form_state.values[11].clone(),
-            telefon: form_state.values[12].clone(),
-            skladu: form_state.values[13].clone(),
-            fax: form_state.values[14].clone(),
-        };
-        let _ = grpc_client.put_adresar(put_request).await?;
-        "Entry updated".to_string()
-    };
-
-    *is_saved = true;
-    form_state.has_unsaved_changes = false;
-    Ok(message)
-}
-
-/// Shared logic for force quitting the application
-pub fn force_quit() -> (bool, String) {
-    (true, "Force quitting application".to_string())
-}
-
-/// Shared logic for saving and quitting
-pub async fn save_and_quit(
-    form_state: &mut FormState,
-    grpc_client: &mut GrpcClient,
-    current_position: &mut u64,
-    total_count: u64,
-) -> Result<(bool, String), Box<dyn std::error::Error>> {
-    let is_new = *current_position == total_count + 1;
-
-    if is_new {
-        let post_request = PostAdresarRequest {
-            firma: form_state.values[0].clone(),
-            kz: form_state.values[1].clone(),
-            drc: form_state.values[2].clone(),
-            ulica: form_state.values[3].clone(),
-            psc: form_state.values[4].clone(),
-            mesto: form_state.values[5].clone(),
-            stat: form_state.values[6].clone(),
-            banka: form_state.values[7].clone(),
-            ucet: form_state.values[8].clone(),
-            skladm: form_state.values[9].clone(),
-            ico: form_state.values[10].clone(),
-            kontakt: form_state.values[11].clone(),
-            telefon: form_state.values[12].clone(),
-            skladu: form_state.values[13].clone(),
-            fax: form_state.values[14].clone(),
-        };
-        let _ = grpc_client.post_adresar(post_request).await?;
-    } else {
-        let put_request = PutAdresarRequest {
-            id: form_state.id,
-            firma: form_state.values[0].clone(),
-            kz: form_state.values[1].clone(),
-            drc: form_state.values[2].clone(),
-            ulica: form_state.values[3].clone(),
-            psc: form_state.values[4].clone(),
-            mesto: form_state.values[5].clone(),
-            stat: form_state.values[6].clone(),
-            banka: form_state.values[7].clone(),
-            ucet: form_state.values[8].clone(),
-            skladm: form_state.values[9].clone(),
-            ico: form_state.values[10].clone(),
-            kontakt: form_state.values[11].clone(),
-            telefon: form_state.values[12].clone(),
-            skladu: form_state.values[13].clone(),
-            fax: form_state.values[14].clone(),
-        };
-        let _ = grpc_client.put_adresar(put_request).await?;
-    }
-
-    Ok((true, "Saved and exiting application".to_string()))
-}
-
-/// Discard changes since last save
-pub async fn revert(
-    form_state: &mut FormState,
-    grpc_client: &mut GrpcClient,
-    current_position: &mut u64,
-    total_count: u64,
-) -> Result<String, Box<dyn std::error::Error>> {
-    let is_new = *current_position == total_count + 1;
-
-    if is_new {
-        // Clear all fields for new entries
-        form_state.values.iter_mut().for_each(|v| *v = String::new());
-        form_state.has_unsaved_changes = false;
-        return Ok("New entry cleared".to_string());
-    }
-
-    let data = grpc_client.get_adresar_by_position(*current_position).await?;
-
-    // Update form fields with saved values
-    form_state.values = vec![
-        data.firma,
-        data.kz,
-        data.drc,
-        data.ulica,
-        data.psc,
-        data.mesto,
-        data.stat,
-        data.banka,
-        data.ucet,
-        data.skladm,
-        data.ico,
-        data.kontakt,
-        data.telefon,
-        data.skladu,
-        data.fax,
-    ];
-
-    form_state.has_unsaved_changes = false;
-    Ok("Changes discarded, reloaded last saved version".to_string())
-}

client/src/modes/canvas/common_mode.rs

@@ -0,0 +1,86 @@
+// src/modes/canvas/common_mode.rs
+
+use crate::tui::terminal::core::TerminalCore;
+use crate::state::pages::{form::FormState, auth::LoginState, auth::RegisterState, auth::AuthState};
+use crate::state::app::state::AppState;
+use crate::services::grpc_client::GrpcClient;
+use crate::services::auth::AuthClient;
+use crate::modes::handlers::event::EventOutcome;
+use crate::tui::functions::common::form::SaveOutcome;
+use anyhow::{Context, Result};
+use crate::tui::functions::common::{
+    form::{save as form_save, revert as form_revert},
+    login::{save as login_save, revert as login_revert},
+    register::{revert as register_revert},
+};
+
+pub async fn handle_core_action(
+    action: &str,
+    form_state: &mut FormState,
+    auth_state: &mut AuthState,
+    login_state: &mut LoginState,
+    register_state: &mut RegisterState,
+    grpc_client: &mut GrpcClient,
+    auth_client: &mut AuthClient,
+    terminal: &mut TerminalCore,
+    app_state: &mut AppState,
+) -> Result<EventOutcome> {
+    match action {
+        "save" => {
+            if app_state.ui.show_login {
+                let message = login_save(auth_state, login_state, auth_client, app_state).await.context("Login save action failed")?;
+                Ok(EventOutcome::Ok(message))
+            } else {
+                let save_outcome = form_save(
+                    app_state,
+                    form_state,
+                    grpc_client,
+                ).await.context("Register save action failed")?;
+                let message = match save_outcome {
+                    SaveOutcome::NoChange => "No changes to save.".to_string(),
+                    SaveOutcome::UpdatedExisting => "Entry updated.".to_string(),
+                    SaveOutcome::CreatedNew(_) => "New entry created.".to_string(),
+                };
+                Ok(EventOutcome::DataSaved(save_outcome, message))
+            }
+        },
+        "force_quit" => {
+            terminal.cleanup()?;
+            Ok(EventOutcome::Exit("Force exiting without saving.".to_string()))
+        },
+        "save_and_quit" => {
+            let message = if app_state.ui.show_login {
+                login_save(auth_state, login_state, auth_client, app_state).await.context("Login save n quit action failed")?
+            } else {
+                let save_outcome = form_save(
+                    app_state,
+                    form_state,
+                    grpc_client,
+                ).await?;
+                match save_outcome {
+                    SaveOutcome::NoChange => "No changes to save.".to_string(),
+                    SaveOutcome::UpdatedExisting => "Entry updated.".to_string(),
+                    SaveOutcome::CreatedNew(_) => "New entry created.".to_string(),
+                }
+            };
+            terminal.cleanup()?;
+            Ok(EventOutcome::Exit(format!("{}. Exiting application.", message)))
+        },
+        "revert" => {
+            if app_state.ui.show_login {
+                let message = login_revert(login_state, app_state).await;
+                Ok(EventOutcome::Ok(message))
+            } else if app_state.ui.show_register {
+                let message = register_revert(register_state, app_state).await;
+                Ok(EventOutcome::Ok(message))
+            } else {
+                let message = form_revert(
+                    form_state,
+                    grpc_client,
+                ).await.context("Form revert x action failed")?;
+                Ok(EventOutcome::Ok(message))
+            }
+        },
+        _ => Ok(EventOutcome::Ok(format!("Core action not handled: {}", action))),
+    }
+}

client/src/modes/canvas/edit.rs

@@ -1,473 +1,388 @@
 // src/modes/canvas/edit.rs
-
-use crossterm::event::{KeyEvent, KeyCode, KeyModifiers};
-use crate::tui::terminal::{
-    grpc_client::GrpcClient,
-};
 use crate::config::binds::config::Config;
-use crate::ui::handlers::form::FormState;
-use crate::modes::canvas::common;
+use crate::functions::modes::edit::{
+    add_logic_e, add_table_e, auth_e, form_e,
+};
+use crate::modes::handlers::event::EventHandler;
+use crate::services::grpc_client::GrpcClient;
+use crate::state::app::state::AppState;
+use crate::state::pages::admin::AdminState;
+use crate::state::pages::{
+    auth::{LoginState, RegisterState},
+    form::FormState,
+};
+use canvas::CanvasState;
+use canvas::{CanvasAction, ActionDispatcher, ActionResult};
+use anyhow::Result;
+use common::proto::komp_ac::search::search_response::Hit;
+use crossterm::event::{KeyCode, KeyEvent};
+use tokio::sync::mpsc;
+use tracing::{debug, info};
 
-pub async fn handle_edit_event_internal(
-    key: KeyEvent,
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum EditEventOutcome {
+    Message(String),
+    ExitEditMode,
+}
+
+/// Helper function to spawn a non-blocking search task for autocomplete.
+async fn trigger_form_autocomplete_search(
+    form_state: &mut FormState,
+    grpc_client: &mut GrpcClient,
+    sender: mpsc::UnboundedSender<Vec<Hit>>,
+) {
+    if let Some(field_def) = form_state.fields.get(form_state.current_field) {
+        if field_def.is_link {
+            if let Some(target_table) = &field_def.link_target_table {
+                // 1. Update state for immediate UI feedback
+                form_state.autocomplete_loading = true;
+                form_state.autocomplete_active = true;
+                form_state.autocomplete_suggestions.clear();
+                form_state.selected_suggestion_index = None;
+
+                // 2. Clone everything needed for the background task
+                let query = form_state.get_current_input().to_string();
+                let table_to_search = target_table.clone();
+                let mut grpc_client_clone = grpc_client.clone();
+
+                info!(
+                    "[Autocomplete] Spawning search in '{}' for query: '{}'",
+                    table_to_search, query
+                );
+
+                // 3. Spawn the non-blocking task
+                tokio::spawn(async move {
+                    match grpc_client_clone
+                        .search_table(table_to_search, query)
+                        .await
+                    {
+                        Ok(response) => {
+                            // Send results back through the channel
+                            let _ = sender.send(response.hits);
+                        }
+                        Err(e) => {
+                            tracing::error!(
+                                "[Autocomplete] Search failed: {:?}",
+                                e
+                            );
+                            // Send an empty vec on error so the UI can stop loading
+                            let _ = sender.send(vec![]);
+                        }
+                    }
+                });
+            }
+        }
+    }
+}
+
+pub async fn handle_form_edit_with_canvas(
+    key_event: KeyEvent,
     config: &Config,
     form_state: &mut FormState,
     ideal_cursor_column: &mut usize,
-    command_message: &mut String,
-    is_saved: &mut bool,
-    current_position: &mut u64,
-    total_count: u64,
-    grpc_client: &mut GrpcClient,
-) -> Result<String, Box<dyn std::error::Error>> {
-    if let Some("enter_command_mode") = config.get_action_for_key_in_mode(&config.keybindings.global, key.code, key.modifiers) {
-        // Ignore in edit mode and process as normal input
-        handle_edit_specific_input(key, form_state, ideal_cursor_column);
-        return Ok(command_message.clone());
+) -> Result<String> {
+    // Try canvas action from key first
+    if let Some(canvas_action) = CanvasAction::from_key(key_event.code) {
+        match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(_) => {
+                // Fall through to try config mapping
+            }
+        }
     }
 
-    // Check common actions first
-    if let Some(action) = config.get_action_for_key_in_mode(&config.keybindings.common, key.code, key.modifiers) {
-        return execute_common_action(
-            action,
-            form_state,
-            grpc_client,
-            is_saved,
-            current_position,
-            total_count,
-        ).await;
+    // Try config-mapped action
+    if let Some(action_str) = config.get_edit_action_for_key(key_event.code, key_event.modifiers) {
+        let canvas_action = CanvasAction::from_string(&action_str);
+        match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(e) => {
+                return Ok(format!("Action failed: {}", e));
+            }
+        }
     }
 
-    if let Some(action) = config.get_edit_action_for_key(key.code, key.modifiers) {
-        return execute_edit_action(
-            action,
-            form_state,
-            ideal_cursor_column,
-            grpc_client,  // Changed from AppTerminal
-            is_saved,
-            current_position,
-            total_count,
-        ).await;
-    }
-
-    handle_edit_specific_input(
-        key,
-        form_state,
-        ideal_cursor_column,
-    );
-
-    Ok(command_message.clone())
+    Ok(String::new())
 }
 
-async fn execute_common_action(
-    action: &str,
-    form_state: &mut FormState,
-    grpc_client: &mut GrpcClient,
-    is_saved: &mut bool,
-    current_position: &mut u64,
-    total_count: u64,
-) -> Result<String, Box<dyn std::error::Error>> {
-    match action {
-        "save" => {
-            common::save(
-                form_state,
-                grpc_client,
-                is_saved,
-                current_position,
-                total_count,
-            ).await
-        },
-        "revert" => {
-            common::revert(
-                form_state,
-                grpc_client,
-                current_position,
-                total_count,
-            ).await
-        },
-        "move_up" | "move_down" => {
-            // Reuse edit mode's existing logic
-            execute_edit_action(
-                action,
-                form_state,
-                &mut 0, // Dummy ideal_cursor_column (not used here)
-                grpc_client,
-                is_saved,
-                current_position,
-                total_count,
-            ).await
-        },
-        _ => Ok(format!("Common action not handled: {}", action)),
-    }
-}
-
-fn handle_edit_specific_input(
+#[allow(clippy::too_many_arguments)]
+pub async fn handle_edit_event(
     key: KeyEvent,
+    config: &Config,
     form_state: &mut FormState,
-    ideal_cursor_column: &mut usize,
-) {
-    match key.code {
-        KeyCode::Char(c) => {
-            let cursor_pos = form_state.current_cursor_pos;
-            let field_value = form_state.get_current_input_mut();
-            let mut chars: Vec<char> = field_value.chars().collect();
-            if cursor_pos <= chars.len() {
-                chars.insert(cursor_pos, c);
-                *field_value = chars.into_iter().collect();
-                form_state.current_cursor_pos = cursor_pos + 1;
-                *ideal_cursor_column = form_state.current_cursor_pos;
-                form_state.has_unsaved_changes = true;
-            }
-        }
-        KeyCode::Backspace => {
-            if form_state.current_cursor_pos > 0 {
-                let cursor_pos = form_state.current_cursor_pos;
-                let field_value = form_state.get_current_input_mut();
-                let mut chars: Vec<char> = field_value.chars().collect();
-                if cursor_pos <= chars.len() && cursor_pos > 0 {
-                    chars.remove(cursor_pos - 1);
-                    *field_value = chars.into_iter().collect();
-                    form_state.current_cursor_pos = cursor_pos - 1;
-                    *ideal_cursor_column = form_state.current_cursor_pos;
-                    form_state.has_unsaved_changes = true;
-                }
-            }
-        }
-        KeyCode::Delete => {
-            let cursor_pos = form_state.current_cursor_pos;
-            let field_value = form_state.get_current_input_mut();
-            let chars: Vec<char> = field_value.chars().collect();
-            if cursor_pos < chars.len() {
-                let mut new_chars = chars.clone();
-                new_chars.remove(cursor_pos);
-                *field_value = new_chars.into_iter().collect();
-                form_state.has_unsaved_changes = true;
-            }
-        }
-        KeyCode::Tab => {
-            if key.modifiers.contains(KeyModifiers::SHIFT) {
-                if form_state.current_field == 0 {
-                    form_state.current_field = form_state.fields.len() - 1;
-                } else {
-                    form_state.current_field = form_state.current_field.saturating_sub(1);
-                }
-            } else {
-                form_state.current_field = (form_state.current_field + 1) % form_state.fields.len();
-            }
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = current_input.len();
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-        }
-        KeyCode::Enter => {
-            form_state.current_field = (form_state.current_field + 1) % form_state.fields.len();
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = current_input.len();
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-        }
-        _ => {}
-    }
-}
-
-async fn execute_edit_action(
-    action: &str,
-    form_state: &mut FormState,
-    ideal_cursor_column: &mut usize,
-    grpc_client: &mut GrpcClient,  // Changed from AppTerminal
-    is_saved: &mut bool,
+    login_state: &mut LoginState,
+    register_state: &mut RegisterState,
+    admin_state: &mut AdminState,
     current_position: &mut u64,
     total_count: u64,
-) -> Result<String, Box<dyn std::error::Error>> {
-    match action {
-        "save" => {
-            common::save(
-                form_state,
-                grpc_client,  // Changed from AppTerminal
-                is_saved,
-                current_position,
-                total_count,
-            ).await
-        },
-        "move_left" => {
-            form_state.current_cursor_pos = form_state.current_cursor_pos.saturating_sub(1);
-            *ideal_cursor_column = form_state.current_cursor_pos;
-            Ok("".to_string())
-        }
-        "move_right" => {
-            let current_input = form_state.get_current_input();
-            if form_state.current_cursor_pos < current_input.len() {
-                form_state.current_cursor_pos += 1;
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_up" => {
-            if form_state.current_field == 0 {
-                form_state.current_field = form_state.fields.len() - 1;
-            } else {
-                form_state.current_field = form_state.current_field.saturating_sub(1);
-            }
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = current_input.len();
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("".to_string())
-        }
-        "move_down" => {
-            form_state.current_field = (form_state.current_field + 1) % form_state.fields.len();
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = current_input.len();
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("".to_string())
-        }
-        "move_line_start" => {
-            form_state.current_cursor_pos = 0;
-            *ideal_cursor_column = form_state.current_cursor_pos;
-            Ok("".to_string())
-        }
-        "move_line_end" => {
-            let current_input = form_state.get_current_input();
-            form_state.current_cursor_pos = current_input.len();
-            *ideal_cursor_column = form_state.current_cursor_pos;
-            Ok("".to_string())
-        }
-        "move_first_line" => {
-            form_state.current_field = 0;
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = current_input.len();
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("Moved to first line".to_string())
-        }
-        "move_last_line" => {
-            form_state.current_field = form_state.fields.len() - 1;
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = current_input.len();
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("Moved to last line".to_string())
-        }
-        // Word movement actions
-        "move_word_next" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                let new_pos = find_next_word_start(current_input, form_state.current_cursor_pos);
-                form_state.current_cursor_pos = new_pos.min(current_input.len());
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_word_end" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                let new_pos = find_word_end(current_input, form_state.current_cursor_pos);
-                form_state.current_cursor_pos = new_pos.min(current_input.len());
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_word_prev" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                let new_pos = find_prev_word_start(current_input, form_state.current_cursor_pos);
-                form_state.current_cursor_pos = new_pos;
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_word_end_prev" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                let new_pos = find_prev_word_end(current_input, form_state.current_cursor_pos);
-                form_state.current_cursor_pos = new_pos;
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        // Edit-specific actions that can be bound to keys
-        "delete_char_forward" => {
-            let cursor_pos = form_state.current_cursor_pos;
-            let field_value = form_state.get_current_input_mut();
-            let chars: Vec<char> = field_value.chars().collect();
-            if cursor_pos < chars.len() {
-                let mut new_chars = chars.clone();
-                new_chars.remove(cursor_pos);
-                *field_value = new_chars.into_iter().collect();
-                form_state.has_unsaved_changes = true;
-            }
-            Ok("".to_string())
-        }
-        "delete_char_backward" => {
-            if form_state.current_cursor_pos > 0 {
-                let cursor_pos = form_state.current_cursor_pos;
-                let field_value = form_state.get_current_input_mut();
-                let mut chars: Vec<char> = field_value.chars().collect();
-                if cursor_pos <= chars.len() && cursor_pos > 0 {
-                    chars.remove(cursor_pos - 1);
-                    *field_value = chars.into_iter().collect();
-                    form_state.current_cursor_pos = cursor_pos - 1;
-                    *ideal_cursor_column = form_state.current_cursor_pos;
-                    form_state.has_unsaved_changes = true;
+    event_handler: &mut EventHandler,
+    app_state: &AppState,
+) -> Result<EditEventOutcome> {
+    // --- AUTOCOMPLETE-SPECIFIC KEY HANDLING ---
+    if app_state.ui.show_form && form_state.autocomplete_active {
+        if let Some(action) =
+            config.get_edit_action_for_key(key.code, key.modifiers)
+        {
+            match action {
+                "suggestion_down" => {
+                    if !form_state.autocomplete_suggestions.is_empty() {
+                        let current =
+                            form_state.selected_suggestion_index.unwrap_or(0);
+                        let next = (current + 1)
+                            % form_state.autocomplete_suggestions.len();
+                        form_state.selected_suggestion_index = Some(next);
+                    }
+                    return Ok(EditEventOutcome::Message(String::new()));
                 }
-            }
-            Ok("".to_string())
-        }
-        "insert_char" => {
-            // This could be expanded to allow configurable character insertion
-            // For now, it's a placeholder that would need additional parameters
-            Ok("Character insertion requires configuration".to_string())
-        }
-        "next_field" => {
-            form_state.current_field = (form_state.current_field + 1) % form_state.fields.len();
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = current_input.len();
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("".to_string())
-        }
-        "prev_field" => {
-            if form_state.current_field == 0 {
-                form_state.current_field = form_state.fields.len() - 1;
-            } else {
-                form_state.current_field = form_state.current_field.saturating_sub(1);
-            }
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = current_input.len();
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("".to_string())
-        }
-        // Fallback for unrecognized actions
-        _ => Ok(format!("Unknown action: {}", action)),
-    }
-}
+                "suggestion_up" => {
+                    if !form_state.autocomplete_suggestions.is_empty() {
+                        let current =
+                            form_state.selected_suggestion_index.unwrap_or(0);
+                        let prev = if current == 0 {
+                            form_state.autocomplete_suggestions.len() - 1
+                        } else {
+                            current - 1
+                        };
+                        form_state.selected_suggestion_index = Some(prev);
+                    }
+                    return Ok(EditEventOutcome::Message(String::new()));
+                }
+                "exit" => {
+                    form_state.deactivate_suggestions();
+                    return Ok(EditEventOutcome::Message(
+                        "Autocomplete cancelled".to_string(),
+                    ));
+                }
+                "enter_decider" => {
+                    if let Some(selected_idx) =
+                        form_state.selected_suggestion_index
+                    {
+                        if let Some(selection) = form_state
+                            .autocomplete_suggestions
+                            .get(selected_idx)
+                            .cloned()
+                        {
+                            // --- THIS IS THE CORE LOGIC CHANGE ---
 
-// Reuse these character and word navigation helper functions
-#[derive(PartialEq)]
-enum CharType {
-    Whitespace,
-    Alphanumeric,
-    Punctuation,
-}
+                            // 1. Get the friendly display name for the UI
+                            let display_name =
+                                form_state.get_display_name_for_hit(&selection);
 
-fn get_char_type(c: char) -> CharType {
-    if c.is_whitespace() {
-        CharType::Whitespace
-    } else if c.is_alphanumeric() {
-        CharType::Alphanumeric
-    } else {
-        CharType::Punctuation
-    }
-}
+                            // 2. Store the REAL ID in the form's values
+                            let current_input =
+                                form_state.get_current_input_mut();
+                            *current_input = selection.id.to_string();
 
-fn find_next_word_start(text: &str, current_pos: usize) -> usize {
-    let chars: Vec<char> = text.chars().collect();
-    if chars.is_empty() || current_pos >= chars.len() {
-        return current_pos;
-    }
+                            // 3. Set the persistent display override in the map
+                            form_state.link_display_map.insert(
+                                form_state.current_field,
+                                display_name,
+                            );
 
-    let mut pos = current_pos;
-    let initial_type = get_char_type(chars[pos]);
-    while pos < chars.len() && get_char_type(chars[pos]) == initial_type {
-        pos += 1;
-    }
-
-    while pos < chars.len() && get_char_type(chars[pos]) == CharType::Whitespace {
-        pos += 1;
-    }
-
-    pos
-}
-
-fn find_word_end(text: &str, current_pos: usize) -> usize {
-    let chars: Vec<char> = text.chars().collect();
-    if chars.is_empty() {
-        return 0;
-    }
-
-    if current_pos >= chars.len() - 1 {
-        return chars.len() - 1;
-    }
-
-    let mut pos = current_pos;
-
-    if get_char_type(chars[pos]) == CharType::Whitespace {
-        while pos < chars.len() && get_char_type(chars[pos]) == CharType::Whitespace {
-            pos += 1;
-        }
-    } else {
-        let current_type = get_char_type(chars[pos]);
-        if pos + 1 < chars.len() && get_char_type(chars[pos + 1]) != current_type {
-            pos += 1;
-            while pos < chars.len() && get_char_type(chars[pos]) == CharType::Whitespace {
-                pos += 1;
+                            // 4. Finalize state
+                            form_state.deactivate_suggestions();
+                            form_state.set_has_unsaved_changes(true);
+                            return Ok(EditEventOutcome::Message(
+                                "Selection made".to_string(),
+                            ));
+                        }
+                    }
+                    form_state.deactivate_suggestions();
+                    // Fall through to default 'enter' behavior
+                }
+                _ => {} // Let other keys fall through to the live search logic
             }
         }
     }
 
-    if pos >= chars.len() {
-        return chars.len() - 1;
-    }
+    // --- LIVE AUTOCOMPLETE TRIGGER LOGIC ---
+    let mut trigger_search = false;
 
-    let word_type = get_char_type(chars[pos]);
-    while pos + 1 < chars.len() && get_char_type(chars[pos + 1]) == word_type {
-        pos += 1;
-    }
-
-    pos
-}
-
-fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
-    let chars: Vec<char> = text.chars().collect();
-    if chars.is_empty() || current_pos == 0 {
-        return 0;
-    }
-
-    let mut pos = current_pos.saturating_sub(1);
-
-    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
-        pos -= 1;
-    }
-
-    if get_char_type(chars[pos]) != CharType::Whitespace {
-        let word_type = get_char_type(chars[pos]);
-        while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
-            pos -= 1;
-        }
-    }
-
-    pos
-}
-
-fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
-    let chars: Vec<char> = text.chars().collect();
-    if chars.is_empty() || current_pos <= 1 {
-        return 0;
-    }
-
-    let mut pos = current_pos.saturating_sub(1);
-
-    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
-        pos -= 1;
-    }
-
-    if pos > 0 && get_char_type(chars[pos]) != CharType::Whitespace {
-        let word_type = get_char_type(chars[pos]);
-
-        while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
-            pos -= 1;
-        }
-
-        while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
-            pos -= 1;
-        }
-
-        if pos > 0 {
-            pos -= 1;
-            let prev_word_type = get_char_type(chars[pos]);
-            while pos > 0 && get_char_type(chars[pos - 1]) == prev_word_type {
-                pos -= 1;
+    if app_state.ui.show_form {
+        // Manual trigger
+        if let Some("trigger_autocomplete") =
+            config.get_edit_action_for_key(key.code, key.modifiers)
+        {
+            if !form_state.autocomplete_active {
+                trigger_search = true;
             }
-
-            while pos < chars.len() - 1 &&
-                  get_char_type(chars[pos + 1]) == prev_word_type {
-                pos += 1;
+        }
+        // Live search trigger while typing
+        else if form_state.autocomplete_active {
+            if let KeyCode::Char(_) | KeyCode::Backspace = key.code {
+                let action = if let KeyCode::Backspace = key.code {
+                    "delete_char_backward"
+                } else {
+                    "insert_char"
+                };
+                // FIX: Pass &mut event_handler.ideal_cursor_column
+                form_e::execute_edit_action(
+                    action,
+                    key,
+                    form_state,
+                    &mut event_handler.ideal_cursor_column,
+                )
+                .await?;
+                trigger_search = true;
             }
         }
     }
 
-    pos
+    if trigger_search {
+        trigger_form_autocomplete_search(
+            form_state,
+            &mut event_handler.grpc_client,
+            event_handler.autocomplete_result_sender.clone(),
+        )
+        .await;
+        return Ok(EditEventOutcome::Message("Searching...".to_string()));
+    }
+
+    // --- GENERAL EDIT MODE EVENT HANDLING (IF NOT AUTOCOMPLETE) ---
+
+    if let Some(action_str) =
+        config.get_edit_action_for_key(key.code, key.modifiers)
+    {
+        // Handle Enter key (next field)
+        if action_str == "enter_decider" {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            let msg = form_e::execute_edit_action(
+                "next_field",
+                key,
+                form_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?;
+            return Ok(EditEventOutcome::Message(msg));
+        }
+
+        // Handle exiting edit mode
+        if action_str == "exit" {
+            return Ok(EditEventOutcome::ExitEditMode);
+        }
+
+        // Handle all other edit actions
+        let msg = if app_state.ui.show_login {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            auth_e::execute_edit_action(
+                action_str,
+                key,
+                login_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        } else if app_state.ui.show_add_table {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            add_table_e::execute_edit_action(
+                action_str,
+                key,
+                &mut admin_state.add_table_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        } else if app_state.ui.show_add_logic {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            add_logic_e::execute_edit_action(
+                action_str,
+                key,
+                &mut admin_state.add_logic_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        } else if app_state.ui.show_register {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            auth_e::execute_edit_action(
+                action_str,
+                key,
+                register_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        } else {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            form_e::execute_edit_action(
+                action_str,
+                key,
+                form_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        };
+        return Ok(EditEventOutcome::Message(msg));
+    }
+
+    // --- FALLBACK FOR CHARACTER INSERTION (IF NO OTHER BINDING MATCHED) ---
+    if let KeyCode::Char(_) = key.code {
+        let msg = if app_state.ui.show_login {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            auth_e::execute_edit_action(
+                "insert_char",
+                key,
+                login_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        } else if app_state.ui.show_add_table {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            add_table_e::execute_edit_action(
+                "insert_char",
+                key,
+                &mut admin_state.add_table_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        } else if app_state.ui.show_add_logic {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            add_logic_e::execute_edit_action(
+                "insert_char",
+                key,
+                &mut admin_state.add_logic_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        } else if app_state.ui.show_register {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            auth_e::execute_edit_action(
+                "insert_char",
+                key,
+                register_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        } else {
+            // FIX: Pass &mut event_handler.ideal_cursor_column
+            form_e::execute_edit_action(
+                "insert_char",
+                key,
+                form_state,
+                &mut event_handler.ideal_cursor_column,
+            )
+            .await?
+        };
+        return Ok(EditEventOutcome::Message(msg));
+    }
+
+    Ok(EditEventOutcome::Message(String::new())) // No action taken
 }

client/src/modes/canvas/read_only.rs

@@ -1,31 +1,86 @@
-// src/modes/handlers/read_only.rs
+// src/modes/canvas/read_only.rs
 
-use crossterm::event::{KeyEvent};
 use crate::config::binds::config::Config;
-use crate::ui::handlers::form::FormState;
 use crate::config::binds::key_sequences::KeySequenceTracker;
-use crate::tui::terminal::grpc_client::GrpcClient;
+use crate::services::grpc_client::GrpcClient;
+use crate::state::pages::{canvas_state::CanvasState, auth::RegisterState};
+use crate::state::pages::auth::LoginState;
+use crate::state::pages::form::FormState;
+use crate::state::pages::add_logic::AddLogicState;
+use crate::state::pages::add_table::AddTableState;
+use crate::state::app::state::AppState;
+use crate::functions::modes::read_only::{add_logic_ro, auth_ro, form_ro, add_table_ro};
+use canvas::{CanvasAction, ActionDispatcher, ActionResult};
+use crossterm::event::KeyEvent;
+use anyhow::Result;
 
-#[derive(PartialEq)]
-enum CharType {
-    Whitespace,
-    Alphanumeric,
-    Punctuation,
+pub async fn handle_form_readonly_with_canvas(
+    key_event: KeyEvent,
+    config: &Config,
+    form_state: &mut FormState,
+    ideal_cursor_column: &mut usize,
+) -> Result<String> {
+    // Try canvas action from key first
+    if let Some(canvas_action) = CanvasAction::from_key(key_event.code) {
+        match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(_) => {
+                // Fall through to try config mapping
+            }
+        }
+    }
+
+    // Try config-mapped action
+    if let Some(action_str) = config.get_read_only_action_for_key(key_event.code, key_event.modifiers) {
+        let canvas_action = CanvasAction::from_string(&action_str);
+        match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(e) => {
+                return Ok(format!("Action failed: {}", e));
+            }
+        }
+    }
+
+    Ok(String::new())
 }
 
 pub async fn handle_read_only_event(
+    app_state: &mut AppState,
     key: KeyEvent,
     config: &Config,
     form_state: &mut FormState,
+    login_state: &mut LoginState,
+    register_state: &mut RegisterState,
+    add_table_state: &mut AddTableState,
+    add_logic_state: &mut AddLogicState,
     key_sequence_tracker: &mut KeySequenceTracker,
-    current_position: &mut u64,
-    total_count: u64,
     grpc_client: &mut GrpcClient,
     command_message: &mut String,
     edit_mode_cooldown: &mut bool,
     ideal_cursor_column: &mut usize,
-) -> Result<(bool, String), Box<dyn std::error::Error>> {
-    // Check for entering Edit mode from Read-Only mode
+) -> Result<(bool, String)> {
     if config.is_enter_edit_mode_before(key.code, key.modifiers) {
         *edit_mode_cooldown = true;
         *command_message = "Entering Edit mode".to_string();
@@ -33,426 +88,273 @@ pub async fn handle_read_only_event(
     }
 
     if config.is_enter_edit_mode_after(key.code, key.modifiers) {
-        let current_input = form_state.get_current_input();
-        if !current_input.is_empty() && form_state.current_cursor_pos < current_input.len() {
-            form_state.current_cursor_pos += 1;
-            *ideal_cursor_column = form_state.current_cursor_pos;
+        // Determine target state to adjust cursor
+
+        if app_state.ui.show_login {
+            let current_input = login_state.get_current_input();
+            let current_pos = login_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                login_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = login_state.current_cursor_pos();
+            }
+        } else if app_state.ui.show_add_logic {
+            let current_input = add_logic_state.get_current_input();
+            let current_pos = add_logic_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                add_logic_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = add_logic_state.current_cursor_pos();
+            }
+        } else if app_state.ui.show_register {
+            let current_input = register_state.get_current_input();
+            let current_pos = register_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                register_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = register_state.current_cursor_pos();
+            }
+        } else if app_state.ui.show_add_table {
+            let current_input = add_table_state.get_current_input();
+            let current_pos = add_table_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                add_table_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = add_table_state.current_cursor_pos();
+            }
+        } else {
+            // Handle FormState (uses library CanvasState)
+            use canvas::CanvasState as LibraryCanvasState;  // Import at the top of the function
+            let current_input = form_state.get_current_input();
+            let current_pos = form_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                form_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = form_state.current_cursor_pos();
+            }
         }
+
         *edit_mode_cooldown = true;
         *command_message = "Entering Edit mode (after cursor)".to_string();
         return Ok((false, command_message.clone()));
     }
 
-    // Handle Read-Only mode keybindings
+    const CONTEXT_ACTIONS_FORM: &[&str] = &[
+        "previous_entry",
+        "next_entry",
+    ];
+    const CONTEXT_ACTIONS_LOGIN: &[&str] = &[
+        "previous_entry",
+        "next_entry",
+    ];
+
     if key.modifiers.is_empty() {
         key_sequence_tracker.add_key(key.code);
         let sequence = key_sequence_tracker.get_sequence();
 
-        // Try to match the current sequence against Read-Only mode bindings
-        if let Some(action) = config.matches_key_sequence_generalized(&sequence) {
-            let result = execute_action(
-                action,
-                form_state,
-                ideal_cursor_column,
-                key_sequence_tracker,
-                command_message,
-                current_position,
-                total_count,
-                grpc_client,
-            ).await?;
-            key_sequence_tracker.reset();
-            return Ok((false, result));
-        }
-
-        // Check if this might be a prefix of a longer sequence
-        if config.is_key_sequence_prefix(&sequence) {
-            return Ok((false, command_message.clone()));
-        }
-
-        // Since it's not part of a multi-key sequence, check for a direct action
-        if sequence.len() == 1 && !config.is_key_sequence_prefix(&sequence) {
-            if let Some(action) = config.get_read_only_action_for_key(key.code, key.modifiers) {
-                let result = execute_action(
+        if let Some(action) = config.matches_key_sequence_generalized(&sequence).as_deref() {
+            let result = if app_state.ui.show_form && CONTEXT_ACTIONS_FORM.contains(&action) {
+                crate::tui::functions::form::handle_action(
+                    action,
+                    form_state,
+                    grpc_client,
+                    ideal_cursor_column,
+                )
+                .await?
+            } else if app_state.ui.show_login && CONTEXT_ACTIONS_LOGIN.contains(&action) {
+                crate::tui::functions::login::handle_action(action).await?
+            } else if app_state.ui.show_add_table {
+                add_table_ro::execute_action(
+                    action,
+                    app_state,
+                    add_table_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                ).await?
+            } else if app_state.ui.show_add_logic {
+                add_logic_ro::execute_action(
+                    action,
+                    app_state,
+                    add_logic_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                ).await?
+            } else if app_state.ui.show_register{
+                auth_ro::execute_action(
+                    action,
+                    app_state,
+                    register_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                ).await?
+            } else if app_state.ui.show_login {
+                auth_ro::execute_action(
+                    action,
+                    app_state,
+                    login_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                )
+                .await?
+            } else {
+                form_ro::execute_action(
                     action,
                     form_state,
                     ideal_cursor_column,
                     key_sequence_tracker,
                     command_message,
-                    current_position,
-                    total_count,
-                    grpc_client,
-                ).await?;
+                )
+                .await?
+            };
+            key_sequence_tracker.reset();
+            return Ok((false, result));
+        }
+
+        if config.is_key_sequence_prefix(&sequence) {
+            return Ok((false, command_message.clone()));
+        }
+
+        if sequence.len() == 1 && !config.is_key_sequence_prefix(&sequence) {
+            if let Some(action) = config.get_read_only_action_for_key(key.code, key.modifiers).as_deref() {
+                let result = if app_state.ui.show_form && CONTEXT_ACTIONS_FORM.contains(&action) {
+                    crate::tui::functions::form::handle_action(
+                        action,
+                        form_state,
+                        grpc_client,
+                        ideal_cursor_column,
+                    )
+                    .await?
+                } else if app_state.ui.show_login && CONTEXT_ACTIONS_LOGIN.contains(&action) {
+                    crate::tui::functions::login::handle_action(action).await?
+                } else if app_state.ui.show_add_table {
+                    add_table_ro::execute_action(
+                        action,
+                        app_state,
+                        add_table_state,
+                        ideal_cursor_column,
+                        key_sequence_tracker,
+                        command_message,
+                    ).await?
+                } else if app_state.ui.show_add_logic {
+                    add_logic_ro::execute_action(
+                        action,
+                        app_state,
+                        add_logic_state,
+                        ideal_cursor_column,
+                        key_sequence_tracker,
+                        command_message,
+                    ).await?
+                } else if app_state.ui.show_register {
+                    auth_ro::execute_action(
+                        action,
+                        app_state,
+                        register_state,
+                        ideal_cursor_column,
+                        key_sequence_tracker,
+                        command_message,
+                    ).await?
+                } else if app_state.ui.show_login {
+                    auth_ro::execute_action(
+                        action,
+                        app_state,
+                        login_state,
+                        ideal_cursor_column,
+                        key_sequence_tracker,
+                        command_message,
+                    )
+                    .await?
+                } else {
+                    form_ro::execute_action(
+                        action,
+                        form_state,
+                        ideal_cursor_column,
+                        key_sequence_tracker,
+                        command_message,
+                    )
+                    .await?
+                };
                 key_sequence_tracker.reset();
                 return Ok((false, result));
             }
         }
+        key_sequence_tracker.reset();
     } else {
-        // If modifiers are pressed, check for direct key bindings
         key_sequence_tracker.reset();
 
-        if let Some(action) = config.get_read_only_action_for_key(key.code, key.modifiers) {
-            let result = execute_action(
-                action,
-                form_state,
-                ideal_cursor_column,
-                key_sequence_tracker,
-                command_message,
-                current_position,
-                total_count,
-                grpc_client,
-            ).await?;
+        if let Some(action) = config.get_read_only_action_for_key(key.code, key.modifiers).as_deref() {
+            let result = if app_state.ui.show_form && CONTEXT_ACTIONS_FORM.contains(&action) {
+                crate::tui::functions::form::handle_action(
+                    action,
+                    form_state,
+                    grpc_client,
+                    ideal_cursor_column,
+                )
+                .await?
+            } else if app_state.ui.show_login && CONTEXT_ACTIONS_LOGIN.contains(&action) {
+                crate::tui::functions::login::handle_action(action).await?
+            } else if app_state.ui.show_add_table {
+                add_table_ro::execute_action(
+                    action,
+                    app_state,
+                    add_table_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                ).await?
+            } else if app_state.ui.show_add_logic {
+                add_logic_ro::execute_action(
+                    action,
+                    app_state,
+                    add_logic_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                ).await?
+            } else if app_state.ui.show_register {
+                auth_ro::execute_action(
+                    action,
+                    app_state,
+                    register_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                ).await?
+            } else if app_state.ui.show_login {
+                auth_ro::execute_action(
+                    action,
+                    app_state,
+                    login_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                )
+                .await?
+            } else {
+                form_ro::execute_action(
+                    action,
+                    form_state,
+                    ideal_cursor_column,
+                    key_sequence_tracker,
+                    command_message,
+                )
+                .await?
+            };
             return Ok((false, result));
         }
     }
 
-    // Show a helpful message when no binding was found
     if !*edit_mode_cooldown {
         let default_key = "i".to_string();
-        let edit_key = config.keybindings.read_only.get("enter_edit_mode_before")
+        let edit_key = config
+            .keybindings
+            .read_only
+            .get("enter_edit_mode_before")
             .and_then(|keys| keys.first())
-            .unwrap_or(&default_key);
+            .map(|k| k.to_string())
+            .unwrap_or(default_key);
         *command_message = format!("Read-only mode - press {} to edit", edit_key);
     }
 
+    *edit_mode_cooldown = false;
+
     Ok((false, command_message.clone()))
 }
-
-async fn execute_action(
-    action: &str,
-    form_state: &mut FormState,
-    ideal_cursor_column: &mut usize,
-    key_sequence_tracker: &mut KeySequenceTracker,
-    command_message: &mut String,
-    current_position: &mut u64,
-    total_count: u64,
-    grpc_client: &mut GrpcClient,
-) -> Result<String, Box<dyn std::error::Error>> {
-    match action {
-        "previous_entry" => {
-            let new_position = current_position.saturating_sub(1);
-            if new_position >= 1 {
-                *current_position = new_position;
-                match grpc_client.get_adresar_by_position(*current_position).await {
-                    Ok(response) => {
-                        form_state.id = response.id;
-                        form_state.values = vec![
-                            response.firma, response.kz, response.drc,
-                            response.ulica, response.psc, response.mesto,
-                            response.stat, response.banka, response.ucet,
-                            response.skladm, response.ico, response.kontakt,
-                            response.telefon, response.skladu, response.fax,
-                        ];
-                        let current_input = form_state.get_current_input();
-                        let max_cursor_pos = if !current_input.is_empty() {
-                            current_input.len() - 1
-                        } else { 0 };
-                        form_state.current_cursor_pos = std::cmp::min(*ideal_cursor_column, max_cursor_pos);
-                        form_state.has_unsaved_changes = false;
-                        *command_message = format!("Loaded entry {}", *current_position);
-                    }
-                    Err(e) => {
-                        *command_message = format!("Error loading entry: {}", e);
-                    }
-                }
-                key_sequence_tracker.reset();
-            }
-            Ok(command_message.clone())
-        }
-        "next_entry" => {
-            if *current_position <= total_count {
-                *current_position += 1;
-                if *current_position <= total_count {
-                    match grpc_client.get_adresar_by_position(*current_position).await {
-                        Ok(response) => {
-                            form_state.id = response.id;
-                            form_state.values = vec![
-                                response.firma, response.kz, response.drc,
-                                response.ulica, response.psc, response.mesto,
-                                response.stat, response.banka, response.ucet,
-                                response.skladm, response.ico, response.kontakt,
-                                response.telefon, response.skladu, response.fax,
-                            ];
-                            let current_input = form_state.get_current_input();
-                            let max_cursor_pos = if !current_input.is_empty() {
-                                current_input.len() - 1
-                            } else { 0 };
-                            form_state.current_cursor_pos = std::cmp::min(*ideal_cursor_column, max_cursor_pos);
-                            form_state.has_unsaved_changes = false;
-                            *command_message = format!("Loaded entry {}", *current_position);
-                        }
-                        Err(e) => {
-                            *command_message = format!("Error loading entry: {}", e);
-                        }
-                    }
-                } else {
-                    form_state.reset_to_empty();
-                    form_state.current_field = 0;
-                    form_state.current_cursor_pos = 0;
-                    *ideal_cursor_column = 0;
-                    *command_message = "New entry mode".to_string();
-                }
-                key_sequence_tracker.reset();
-            }
-            Ok(command_message.clone())
-        }
-        "exit_edit_mode" => {
-            key_sequence_tracker.reset();
-            command_message.clear();
-            Ok("".to_string())
-        }
-        "move_left" => {
-            let current_pos = form_state.current_cursor_pos;
-            form_state.current_cursor_pos = current_pos.saturating_sub(1);
-            *ideal_cursor_column = form_state.current_cursor_pos;
-            Ok("".to_string())
-        }
-        "move_right" => {
-            let current_input = form_state.get_current_input();
-            let current_pos = form_state.current_cursor_pos;
-            if !current_input.is_empty() && current_pos < current_input.len() - 1 {
-                form_state.current_cursor_pos += 1;
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_up" => {
-            // Change field first
-            if form_state.current_field == 0 {
-                form_state.current_field = form_state.fields.len() - 1;
-            } else {
-                form_state.current_field = form_state.current_field.saturating_sub(1);
-            }
-
-            // Get current input AFTER changing field
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = if !current_input.is_empty() {
-                current_input.len() - 1
-            } else {
-                0
-            };
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("".to_string())
-        }
-        "move_down" => {
-            // Change field first
-            form_state.current_field = (form_state.current_field + 1) % form_state.fields.len();
-
-            // Get current input AFTER changing field
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = if !current_input.is_empty() {
-                current_input.len() - 1
-            } else {
-                0
-            };
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("".to_string())
-        }
-        "move_word_next" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                let new_pos = find_next_word_start(current_input, form_state.current_cursor_pos);
-                form_state.current_cursor_pos = new_pos.min(current_input.len().saturating_sub(1));
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_word_end" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                let new_pos = find_word_end(current_input, form_state.current_cursor_pos);
-                form_state.current_cursor_pos = new_pos.min(current_input.len().saturating_sub(1));
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_word_prev" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                let new_pos = find_prev_word_start(current_input, form_state.current_cursor_pos);
-                form_state.current_cursor_pos = new_pos;
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_word_end_prev" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                let new_pos = find_prev_word_end(current_input, form_state.current_cursor_pos);
-                form_state.current_cursor_pos = new_pos;
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("Moved to previous word end".to_string())
-        }
-        "move_line_start" => {
-            form_state.current_cursor_pos = 0;
-            *ideal_cursor_column = form_state.current_cursor_pos;
-            Ok("".to_string())
-        }
-        "move_line_end" => {
-            let current_input = form_state.get_current_input();
-            if !current_input.is_empty() {
-                form_state.current_cursor_pos = current_input.len() - 1;
-                *ideal_cursor_column = form_state.current_cursor_pos;
-            }
-            Ok("".to_string())
-        }
-        "move_first_line" => {
-            // Change field first
-            form_state.current_field = 0;
-
-            // Get current input AFTER changing field
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = if !current_input.is_empty() {
-                current_input.len() - 1
-            } else {
-                current_input.len()
-            };
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("Moved to first line".to_string())
-        }
-        "move_last_line" => {
-            // Change field first
-            form_state.current_field = form_state.fields.len() - 1;
-
-            // Get current input AFTER changing field
-            let current_input = form_state.get_current_input();
-            let max_cursor_pos = if !current_input.is_empty() {
-                current_input.len() - 1
-            } else {
-                current_input.len()
-            };
-            form_state.current_cursor_pos = (*ideal_cursor_column).min(max_cursor_pos);
-            Ok("Moved to last line".to_string())
-        }
-        _ => Ok(format!("Unknown action: {}", action)),
-    }
-}
-
-fn get_char_type(c: char) -> CharType {
-    if c.is_whitespace() {
-        CharType::Whitespace
-    } else if c.is_alphanumeric() {
-        CharType::Alphanumeric
-    } else {
-        CharType::Punctuation
-    }
-}
-
-fn find_next_word_start(text: &str, current_pos: usize) -> usize {
-    let chars: Vec<char> = text.chars().collect();
-    if chars.is_empty() || current_pos >= chars.len() {
-        return current_pos;
-    }
-
-    let mut pos = current_pos;
-    let initial_type = get_char_type(chars[pos]);
-    while pos < chars.len() && get_char_type(chars[pos]) == initial_type {
-        pos += 1;
-    }
-
-    while pos < chars.len() && get_char_type(chars[pos]) == CharType::Whitespace {
-        pos += 1;
-    }
-
-    pos
-}
-
-fn find_word_end(text: &str, current_pos: usize) -> usize {
-    let chars: Vec<char> = text.chars().collect();
-    if chars.is_empty() {
-        return 0;
-    }
-
-    if current_pos >= chars.len() - 1 {
-        return chars.len() - 1;
-    }
-
-    let mut pos = current_pos;
-
-    if get_char_type(chars[pos]) == CharType::Whitespace {
-        while pos < chars.len() && get_char_type(chars[pos]) == CharType::Whitespace {
-            pos += 1;
-        }
-    } else {
-        let current_type = get_char_type(chars[pos]);
-        if pos + 1 < chars.len() && get_char_type(chars[pos + 1]) != current_type {
-            pos += 1;
-            while pos < chars.len() && get_char_type(chars[pos]) == CharType::Whitespace {
-                pos += 1;
-            }
-        }
-    }
-
-    if pos >= chars.len() {
-        return chars.len() - 1;
-    }
-
-    let word_type = get_char_type(chars[pos]);
-    while pos + 1 < chars.len() && get_char_type(chars[pos + 1]) == word_type {
-        pos += 1;
-    }
-
-    pos
-}
-
-fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
-    let chars: Vec<char> = text.chars().collect();
-    if chars.is_empty() || current_pos == 0 {
-        return 0;
-    }
-
-    let mut pos = current_pos.saturating_sub(1);
-
-    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
-        pos -= 1;
-    }
-
-    if get_char_type(chars[pos]) != CharType::Whitespace {
-        let word_type = get_char_type(chars[pos]);
-        while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
-            pos -= 1;
-        }
-    }
-
-    pos
-}
-
-fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
-    let chars: Vec<char> = text.chars().collect();
-    if chars.is_empty() || current_pos <= 1 {
-        return 0;
-    }
-
-    let mut pos = current_pos.saturating_sub(1);
-
-    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
-        pos -= 1;
-    }
-
-    if pos > 0 && get_char_type(chars[pos]) != CharType::Whitespace {
-        let word_type = get_char_type(chars[pos]);
-
-        while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
-            pos -= 1;
-        }
-
-        while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
-            pos -= 1;
-        }
-
-        if pos > 0 {
-            pos -= 1;
-            let prev_word_type = get_char_type(chars[pos]);
-            while pos > 0 && get_char_type(chars[pos - 1]) == prev_word_type {
-                pos -= 1;
-            }
-
-            while pos < chars.len() - 1 &&
-                  get_char_type(chars[pos + 1]) == prev_word_type {
-                pos += 1;
-            }
-        }
-    }
-
-    pos
-}

client/src/modes/common.rs

@@ -0,0 +1,6 @@
+// src/client/modes/common.rs
+pub mod command_mode;
+pub mod highlight;
+pub mod commands;
+
+pub use commands::*;

client/src/modes/common/command_mode.rs

@@ -1,32 +1,37 @@
-// src/modes/handlers/command_mode.rs
+// src/modes/common/command_mode.rs
 
 use crossterm::event::{KeyEvent, KeyCode, KeyModifiers};
-use crate::tui::terminal::grpc_client::GrpcClient;
 use crate::config::binds::config::Config;
-use crate::ui::handlers::form::FormState;
-use crate::modes::{
-    canvas::{common},
-};
+use crate::services::grpc_client::GrpcClient;
+use crate::state::pages::form::FormState;
+use crate::state::{app::state::AppState, pages::auth::LoginState, pages::auth::RegisterState};
+use crate::modes::common::commands::CommandHandler;
+use crate::tui::terminal::core::TerminalCore;
+use crate::tui::functions::common::form::{save, revert};
+use crate::modes::handlers::event::EventOutcome;
+use crate::tui::functions::common::form::SaveOutcome;
+use anyhow::Result;
 
 pub async fn handle_command_event(
     key: KeyEvent,
     config: &Config,
+    app_state: &mut AppState,
+    login_state: &LoginState,
+    register_state: &RegisterState,
     form_state: &mut FormState,
     command_input: &mut String,
     command_message: &mut String,
     grpc_client: &mut GrpcClient,
-    is_saved: &mut bool,
+    command_handler: &mut CommandHandler,
+    terminal: &mut TerminalCore,
     current_position: &mut u64,
     total_count: u64,
-) -> Result<(bool, String, bool), Box<dyn std::error::Error>> {
-
-    // Return value: (should_exit, message, should_exit_command_mode)
-
+) -> Result<EventOutcome> {
     // Exit command mode (via configurable keybinding)
     if config.is_exit_command_mode(key.code, key.modifiers) {
         command_input.clear();
         *command_message = "".to_string();
-        return Ok((false, "".to_string(), true));
+        return Ok(EventOutcome::Ok("Exited command mode".to_string()));
     }
 
     // Execute command (via configurable keybinding, defaults to Enter)
@@ -34,10 +39,14 @@ pub async fn handle_command_event(
         return process_command(
             config,
             form_state,
+            app_state,
+            login_state,
+            register_state,
             command_input,
             command_message,
             grpc_client,
-            is_saved,
+            command_handler,
+            terminal,
             current_position,
             total_count,
         ).await;
@@ -46,7 +55,7 @@ pub async fn handle_command_event(
     // Backspace (via configurable keybinding, defaults to Backspace)
     if config.is_command_backspace(key.code, key.modifiers) {
         command_input.pop();
-        return Ok((false, "".to_string(), false));
+        return Ok(EventOutcome::Ok("".to_string()));
     }
 
     // Regular character input - accept any character in command mode
@@ -54,29 +63,33 @@ pub async fn handle_command_event(
         // Accept regular or shifted characters (e.g., 'a' or 'A')
         if key.modifiers.is_empty() || key.modifiers == KeyModifiers::SHIFT {
             command_input.push(c);
-            return Ok((false, "".to_string(), false));
+            return Ok(EventOutcome::Ok("".to_string()));
         }
     }
 
     // Ignore all other keys
-    Ok((false, "".to_string(), false))
+    Ok(EventOutcome::Ok("".to_string()))
 }
 
 async fn process_command(
     config: &Config,
     form_state: &mut FormState,
+    app_state: &mut AppState,
+    login_state: &LoginState,
+    register_state: &RegisterState,
     command_input: &mut String,
     command_message: &mut String,
     grpc_client: &mut GrpcClient,
-    is_saved: &mut bool,
+    command_handler: &mut CommandHandler,
+    terminal: &mut TerminalCore,
     current_position: &mut u64,
     total_count: u64,
-) -> Result<(bool, String, bool), Box<dyn std::error::Error>> {
+) -> Result<EventOutcome> {
     // Clone the trimmed command to avoid borrow issues
     let command = command_input.trim().to_string();
     if command.is_empty() {
         *command_message = "Empty command".to_string();
-        return Ok((false, command_message.clone(), false));
+        return Ok(EventOutcome::Ok(command_message.clone()));
     }
 
     // Get the action for the command (now checks global and common bindings too)
@@ -84,51 +97,50 @@ async fn process_command(
         .unwrap_or("unknown");
 
     match action {
+        "force_quit" | "save_and_quit" | "quit" => {
+            let (should_exit, message) = command_handler
+                .handle_command(
+                    action,
+                    terminal,
+                    app_state,
+                    form_state,
+                    login_state,
+                    register_state,
+                )
+                .await?;
+            command_input.clear();
+            if should_exit {
+                Ok(EventOutcome::Exit(message))
+            } else {
+                Ok(EventOutcome::Ok(message))
+            }
+        },
         "save" => {
-            let message = common::save(
+            let outcome = save(
+                app_state,
                 form_state,
                 grpc_client,
-                is_saved,
-                current_position,
-                total_count,
             ).await?;
+            let message = match outcome {
+                SaveOutcome::CreatedNew(_) => "New entry created".to_string(),
+                SaveOutcome::UpdatedExisting => "Entry updated".to_string(),
+                SaveOutcome::NoChange => "No changes to save".to_string(),
+            };
             command_input.clear();
-            return Ok((false, message, true));
-        },
-        "force_quit" => {
-            let (should_exit, message) = common::force_quit();
-            command_input.clear();
-            return Ok((should_exit, message, true));
-        },
-        "save_and_quit" => {
-            let (should_exit, message) = common::save_and_quit(
-                form_state,
-                grpc_client,
-                current_position,
-                total_count,
-            ).await?;
-            command_input.clear();
-            return Ok((should_exit, message, true));
+            Ok(EventOutcome::DataSaved(outcome, message))
         },
         "revert" => {
-            let message = common::revert(
+            let message = revert(
                 form_state,
                 grpc_client,
-                current_position,
-                total_count,
             ).await?;
             command_input.clear();
-            return Ok((false, message, true));
-        },
-        "unknown" => {
-            let message = format!("Unknown command: {}", command);
-            command_input.clear();
-            return Ok((false, message, true));
+            Ok(EventOutcome::Ok(message))
         },
         _ => {
             let message = format!("Unhandled action: {}", action);
             command_input.clear();
-            return Ok((false, message, true));
+            Ok(EventOutcome::Ok(message))
         }
     }
 }

client/src/modes/common/commands.rs

@@ -0,0 +1,72 @@
+// src/modes/common/commands.rs
+use crate::tui::terminal::core::TerminalCore;
+use crate::state::app::state::AppState;
+use crate::state::pages::{form::FormState, auth::LoginState, auth::RegisterState};
+use crate::state::pages::canvas_state::CanvasState;
+use anyhow::Result;
+
+pub struct CommandHandler;
+
+impl CommandHandler {
+    pub fn new() -> Self {
+        Self
+    }
+
+    pub async fn handle_command(
+        &mut self,
+        action: &str,
+        terminal: &mut TerminalCore,
+        app_state: &AppState,
+        form_state: &FormState,
+        login_state: &LoginState,
+        register_state: &RegisterState,
+    ) -> Result<(bool, String)> {
+        match action {
+            "quit" => self.handle_quit(terminal, app_state, form_state, login_state, register_state).await,
+            "force_quit" => self.handle_force_quit(terminal).await,
+            "save_and_quit" => self.handle_save_quit(terminal).await,
+            _ => Ok((false, format!("Unknown command: {}", action))),
+        }
+    }
+
+    async fn handle_quit(
+        &self,
+        terminal: &mut TerminalCore,
+        app_state: &AppState,
+        form_state: &FormState,
+        login_state: &LoginState,
+        register_state: &RegisterState,
+    ) -> Result<(bool, String)> {
+        // Use actual unsaved changes state instead of is_saved flag
+        let has_unsaved = if app_state.ui.show_login {
+            login_state.has_unsaved_changes()
+        } else if app_state.ui.show_register {
+            register_state.has_unsaved_changes()
+        } else {
+            form_state.has_unsaved_changes
+        };
+
+        if !has_unsaved {
+            terminal.cleanup()?;
+            Ok((true, "Exiting.".into()))
+        } else {
+            Ok((false, "No changes saved. Use :q! to force quit.".into()))
+        }
+    }
+
+    async fn handle_force_quit(
+        &self,
+        terminal: &mut TerminalCore,
+    ) -> Result<(bool, String)> {
+        terminal.cleanup()?;
+        Ok((true, "Force exiting without saving.".into()))
+    }
+
+    async fn handle_save_quit(
+        &mut self,
+        terminal: &mut TerminalCore,
+    ) -> Result<(bool, String)> {
+        terminal.cleanup()?;
+        Ok((true, "State saved. Exiting.".into()))
+    }
+}

client/src/modes/general.rs

@@ -0,0 +1,4 @@
+// src/client/modes/general.rs
+pub mod navigation;
+pub mod dialog;
+pub mod command_navigation;

client/src/modes/general/command_navigation.rs

@@ -0,0 +1,396 @@
+// src/modes/general/command_navigation.rs
+use crate::config::binds::config::Config;
+use crate::modes::handlers::event::EventOutcome;
+use anyhow::Result;
+use common::proto::komp_ac::table_definition::ProfileTreeResponse;
+use crossterm::event::{KeyCode, KeyEvent};
+use std::collections::{HashMap, HashSet};
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum NavigationType {
+    FindFile,
+    TableTree,
+}
+
+#[derive(Debug, Clone)]
+pub struct TableDependencyGraph {
+    all_tables: HashSet<String>,
+    dependents_map: HashMap<String, Vec<String>>,
+    root_tables: Vec<String>,
+}
+
+impl TableDependencyGraph {
+    pub fn from_profile_tree(profile_tree: &ProfileTreeResponse) -> Self {
+        let mut dependents_map: HashMap<String, Vec<String>> = HashMap::new();
+        let mut all_tables_set: HashSet<String> = HashSet::new();
+        let mut table_dependencies: HashMap<String, Vec<String>> = HashMap::new();
+
+        for profile in &profile_tree.profiles {
+            for table in &profile.tables {
+                all_tables_set.insert(table.name.clone());
+                table_dependencies.insert(table.name.clone(), table.depends_on.clone());
+
+                for dependency_name in &table.depends_on {
+                    dependents_map
+                        .entry(dependency_name.clone())
+                        .or_default()
+                        .push(table.name.clone());
+                }
+            }
+        }
+
+        let root_tables: Vec<String> = all_tables_set
+            .iter()
+            .filter(|name| {
+                table_dependencies
+                    .get(*name)
+                    .map_or(true, |deps| deps.is_empty())
+            })
+            .cloned()
+            .collect();
+
+        let mut sorted_root_tables = root_tables;
+        sorted_root_tables.sort();
+
+        for dependents_list in dependents_map.values_mut() {
+            dependents_list.sort();
+        }
+
+        Self {
+            all_tables: all_tables_set,
+            dependents_map,
+            root_tables: sorted_root_tables,
+        }
+    }
+
+    pub fn get_dependent_children(&self, path: &str) -> Vec<String> {
+        if path.is_empty() {
+            return self.root_tables.clone();
+        }
+
+        let path_segments: Vec<&str> = path.split('/').filter(|s| !s.is_empty()).collect();
+        if let Some(last_segment_name) = path_segments.last() {
+            if self.all_tables.contains(*last_segment_name) {
+                return self
+                    .dependents_map
+                    .get(*last_segment_name)
+                    .cloned()
+                    .unwrap_or_default();
+            }
+        }
+        Vec::new()
+    }
+}
+
+
+// ... (NavigationState struct and its new(), activate_*, deactivate(), add_char(), remove_char(), move_*, autocomplete_selected(), get_display_input() methods are unchanged) ...
+pub struct NavigationState {
+    pub active: bool,
+    pub input: String,
+    pub selected_index: Option<usize>,
+    pub filtered_options: Vec<(usize, String)>,
+    pub navigation_type: NavigationType,
+    pub current_path: String,
+    pub graph: Option<TableDependencyGraph>,
+    pub all_options: Vec<String>,
+}
+
+impl NavigationState {
+    pub fn new() -> Self {
+        Self {
+            active: false,
+            input: String::new(),
+            selected_index: None,
+            filtered_options: Vec::new(),
+            navigation_type: NavigationType::FindFile,
+            current_path: String::new(),
+            graph: None,
+            all_options: Vec::new(),
+        }
+    }
+
+    pub fn activate_find_file(&mut self, options: Vec<String>) {
+        self.active = true;
+        self.navigation_type = NavigationType::FindFile;
+        self.all_options = options;
+        self.input.clear();
+        self.current_path.clear();
+        self.graph = None;
+        self.update_filtered_options();
+    }
+
+    pub fn activate_table_tree(&mut self, graph: TableDependencyGraph) {
+        self.active = true;
+        self.navigation_type = NavigationType::TableTree;
+        self.graph = Some(graph);
+        self.input.clear();
+        self.current_path.clear();
+        self.update_options_for_path();
+    }
+
+    pub fn deactivate(&mut self) {
+        self.active = false;
+        self.input.clear();
+        self.all_options.clear();
+        self.filtered_options.clear();
+        self.selected_index = None;
+        self.current_path.clear();
+        self.graph = None;
+    }
+
+    pub fn add_char(&mut self, c: char) {
+        match self.navigation_type {
+            NavigationType::FindFile => {
+                self.input.push(c);
+                self.update_filtered_options();
+            }
+            NavigationType::TableTree => {
+                if c == '/' {
+                    if !self.input.is_empty() {
+                        if self.current_path.is_empty() {
+                            self.current_path = self.input.clone();
+                        } else {
+                            self.current_path.push('/');
+                            self.current_path.push_str(&self.input);
+                        }
+                        self.input.clear();
+                        self.update_options_for_path();
+                    }
+                } else {
+                    self.input.push(c);
+                    self.update_filtered_options();
+                }
+            }
+        }
+    }
+
+    pub fn remove_char(&mut self) {
+        match self.navigation_type {
+            NavigationType::FindFile => {
+                self.input.pop();
+                self.update_filtered_options();
+            }
+            NavigationType::TableTree => {
+                if self.input.is_empty() {
+                    if !self.current_path.is_empty() {
+                        if let Some(last_slash_idx) = self.current_path.rfind('/') {
+                            self.input = self.current_path[last_slash_idx + 1..].to_string();
+                            self.current_path = self.current_path[..last_slash_idx].to_string();
+                        } else {
+                            self.input = self.current_path.clone();
+                            self.current_path.clear();
+                        }
+                        self.update_options_for_path();
+                        self.update_filtered_options();
+                    }
+                } else {
+                    self.input.pop();
+                    self.update_filtered_options();
+                }
+            }
+        }
+    }
+
+    pub fn move_up(&mut self) {
+        if self.filtered_options.is_empty() {
+            self.selected_index = None;
+            return;
+        }
+        self.selected_index = match self.selected_index {
+            Some(0) => Some(self.filtered_options.len() - 1),
+            Some(current) => Some(current - 1),
+            None => Some(self.filtered_options.len() - 1),
+        };
+    }
+
+    pub fn move_down(&mut self) {
+        if self.filtered_options.is_empty() {
+            self.selected_index = None;
+            return;
+        }
+        self.selected_index = match self.selected_index {
+            Some(current) if current >= self.filtered_options.len() - 1 => Some(0),
+            Some(current) => Some(current + 1),
+            None => Some(0),
+        };
+    }
+
+    pub fn get_selected_option_str(&self) -> Option<&str> {
+        self.selected_index
+            .and_then(|idx| self.filtered_options.get(idx))
+            .map(|(_, option_str)| option_str.as_str())
+    }
+
+    pub fn autocomplete_selected(&mut self) {
+        if let Some(selected_option_str) = self.get_selected_option_str() {
+            self.input = selected_option_str.to_string();
+            self.update_filtered_options();
+        }
+    }
+
+    pub fn get_display_input(&self) -> String {
+        match self.navigation_type {
+            NavigationType::FindFile => self.input.clone(),
+            NavigationType::TableTree => {
+                if self.current_path.is_empty() {
+                    self.input.clone()
+                } else {
+                    format!("{}/{}", self.current_path, self.input)
+                }
+            }
+        }
+    }
+
+    // --- START FIX ---
+    pub fn get_selected_value(&self) -> Option<String> {
+        match self.navigation_type {
+            NavigationType::FindFile => {
+                // Return the highlighted option, not the raw input buffer.
+                self.get_selected_option_str().map(|s| s.to_string())
+            }
+            NavigationType::TableTree => {
+                self.get_selected_option_str().map(|selected_name| {
+                    if self.current_path.is_empty() {
+                        selected_name.to_string()
+                    } else {
+                        format!("{}/{}", self.current_path, selected_name)
+                    }
+                })
+            }
+        }
+    }
+    // --- END FIX ---
+
+    fn update_options_for_path(&mut self) {
+        if let NavigationType::TableTree = self.navigation_type {
+            if let Some(graph) = &self.graph {
+                self.all_options = graph.get_dependent_children(&self.current_path);
+            } else {
+                self.all_options.clear();
+            }
+        }
+        self.update_filtered_options();
+    }
+
+    fn update_filtered_options(&mut self) {
+        let filter_text = match self.navigation_type {
+            NavigationType::FindFile => &self.input,
+            NavigationType::TableTree => &self.input,
+        }
+        .to_lowercase();
+
+        if filter_text.is_empty() {
+            self.filtered_options = self
+                .all_options
+                .iter()
+                .enumerate()
+                .map(|(i, opt)| (i, opt.clone()))
+                .collect();
+        } else {
+            self.filtered_options = self
+                .all_options
+                .iter()
+                .enumerate()
+                .filter(|(_, opt)| opt.to_lowercase().contains(&filter_text))
+                .map(|(i, opt)| (i, opt.clone()))
+                .collect();
+        }
+
+        if self.filtered_options.is_empty() {
+            self.selected_index = None;
+        } else {
+            self.selected_index = Some(0);
+        }
+    }
+}
+
+
+pub async fn handle_command_navigation_event(
+    navigation_state: &mut NavigationState,
+    key: KeyEvent,
+    config: &Config,
+) -> Result<EventOutcome> {
+    if !navigation_state.active {
+        return Ok(EventOutcome::Ok(String::new()));
+    }
+
+    match key.code {
+        KeyCode::Esc => {
+            navigation_state.deactivate();
+            Ok(EventOutcome::Ok("Navigation cancelled".to_string()))
+        }
+        KeyCode::Tab => {
+            if let Some(selected_opt_str) = navigation_state.get_selected_option_str() {
+                if navigation_state.input == selected_opt_str {
+                    if navigation_state.navigation_type == NavigationType::TableTree {
+                        let path_before_nav = navigation_state.current_path.clone();
+                        let input_before_nav = navigation_state.input.clone();
+                        navigation_state.add_char('/');
+                        if !(navigation_state.input.is_empty() &&
+                           (navigation_state.current_path != path_before_nav || !navigation_state.all_options.is_empty())) {
+                            if !navigation_state.input.is_empty() && navigation_state.input != input_before_nav {
+                                navigation_state.input = input_before_nav;
+                                if navigation_state.current_path != path_before_nav {
+                                    navigation_state.current_path = path_before_nav;
+                                }
+                                navigation_state.update_options_for_path();
+                            }
+                        }
+                    }
+                } else {
+                    navigation_state.autocomplete_selected();
+                }
+            }
+            Ok(EventOutcome::Ok(String::new()))
+        }
+        KeyCode::Backspace => {
+            navigation_state.remove_char();
+            Ok(EventOutcome::Ok(String::new()))
+        }
+        KeyCode::Char(c) => {
+            navigation_state.add_char(c);
+            Ok(EventOutcome::Ok(String::new()))
+        }
+        _ => {
+            if let Some(action) = config.get_general_action(key.code, key.modifiers) {
+                match action {
+                    "move_up" => {
+                        navigation_state.move_up();
+                        Ok(EventOutcome::Ok(String::new()))
+                    }
+                    "move_down" => {
+                        navigation_state.move_down();
+                        Ok(EventOutcome::Ok(String::new()))
+                    }
+                    "select" => {
+                        if let Some(selected_value) = navigation_state.get_selected_value() {
+                            let outcome = match navigation_state.navigation_type {
+                                // --- START FIX ---
+                                NavigationType::FindFile => {
+                                    // The purpose of this palette is to select a table.
+                                    // Emit a TableSelected event instead of a generic Ok message.
+                                    EventOutcome::TableSelected {
+                                        path: selected_value,
+                                    }
+                                }
+                                // --- END FIX ---
+                                NavigationType::TableTree => {
+                                    EventOutcome::TableSelected {
+                                        path: selected_value,
+                                    }
+                                }
+                            };
+                            navigation_state.deactivate();
+                            Ok(outcome)
+                        } else {
+                            Ok(EventOutcome::Ok("No selection".to_string()))
+                        }
+                    }
+                    _ => Ok(EventOutcome::Ok(String::new())),
+                }
+            } else {
+                Ok(EventOutcome::Ok(String::new()))
+            }
+        }
+    }
+}

client/src/modes/general/dialog.rs

@@ -0,0 +1,163 @@
+// src/modes/general/dialog.rs
+
+use crossterm::event::{Event, KeyCode};
+use crate::config::binds::config::Config;
+use crate::ui::handlers::context::DialogPurpose;
+use crate::state::app::{state::AppState, buffer::AppView};
+use crate::state::app::buffer::BufferState;
+use crate::state::pages::auth::{LoginState, RegisterState};
+use crate::state::pages::admin::AdminState;
+use crate::modes::handlers::event::EventOutcome;
+use crate::tui::functions::common::{login, register};
+use crate::tui::functions::common::add_table::handle_delete_selected_columns;
+use anyhow::Result;
+
+/// Handles key events specifically when a dialog is active.
+/// Returns Some(Result<EventOutcome, Error>) if the event was handled (consumed),
+/// otherwise returns None.
+pub async fn handle_dialog_event(
+    event: &Event,
+    config: &Config,
+    app_state: &mut AppState,
+    login_state: &mut LoginState,
+    register_state: &mut RegisterState,
+    buffer_state: &mut BufferState,
+    admin_state: &mut AdminState,
+) -> Option<Result<EventOutcome>> {
+    if let Event::Key(key) = event {
+        // Always allow Esc to dismiss
+        if key.code == KeyCode::Esc {
+            app_state.hide_dialog();
+            return Some(Ok(EventOutcome::Ok("Dialog dismissed".to_string())));
+        }
+
+        // Check general bindings for dialog actions
+        if let Some(action) = config.get_general_action(key.code, key.modifiers) {
+            match action {
+                "move_down" | "next_option" => {
+                    let current_index = app_state.ui.dialog.dialog_active_button_index;
+                    let num_buttons = app_state.ui.dialog.dialog_buttons.len();
+                    if num_buttons > 0 && current_index < num_buttons - 1 {
+                        app_state.ui.dialog.dialog_active_button_index += 1;
+                    }
+                    return Some(Ok(EventOutcome::Ok(String::new())));
+                }
+                "move_up" | "previous_option" => {
+                    let current_index = app_state.ui.dialog.dialog_active_button_index;
+                    if current_index > 0 {
+                        app_state.ui.dialog.dialog_active_button_index -= 1;
+                    }
+                    return Some(Ok(EventOutcome::Ok(String::new())));
+                }
+                "select" => {
+                    let selected_index = app_state.ui.dialog.dialog_active_button_index;
+                    let purpose = match app_state.ui.dialog.purpose {
+                        Some(p) => p,
+                        None => {
+                            app_state.hide_dialog();
+                            return Some(Ok(EventOutcome::Ok("Internal Error: Dialog context lost".to_string())));
+                        }
+                    };
+
+                    // Handle Dialog Actions Directly Here
+                    match purpose {
+                        DialogPurpose::LoginSuccess => {
+                            match selected_index {
+                                0 => { // "Menu" button selected
+                                    app_state.hide_dialog();
+                                    let message = login::back_to_main(login_state, app_state, buffer_state).await;
+                                    return Some(Ok(EventOutcome::Ok(message)));
+                                }
+                                1 => {
+                                    app_state.hide_dialog();
+                                    return Some(Ok(EventOutcome::Ok("Exiting dialog".to_string())));
+                                }
+                                _ => {
+                                    app_state.hide_dialog();
+                                    return Some(Ok(EventOutcome::Ok("Unknown dialog button selected".to_string())));
+                                }
+                            }
+                        }
+                        DialogPurpose::LoginFailed => {
+                            match selected_index {
+                                0 => { // "OK" button selected
+                                    app_state.hide_dialog();
+                                    return Some(Ok(EventOutcome::Ok("Login failed dialog dismissed".to_string())));
+                                }
+                                _ => {
+                                    app_state.hide_dialog();
+                                    return Some(Ok(EventOutcome::Ok("Unknown dialog button selected".to_string())));
+                                }
+                            }
+                        }
+                        DialogPurpose::RegisterSuccess => { // Add this arm
+                            match selected_index {
+                                0 => { // "OK" button for RegisterSuccess
+                                    app_state.hide_dialog();
+                                    let message = register::back_to_login(register_state, app_state, buffer_state).await;
+                                    return Some(Ok(EventOutcome::Ok(message)));
+                                }
+                                _ => { // Default for RegisterSuccess
+                                    app_state.hide_dialog();
+                                    return Some(Ok(EventOutcome::Ok("Unknown dialog button selected".to_string())));
+                                }
+                            }
+                        }
+                        DialogPurpose::RegisterFailed => { // Add this arm
+                             match selected_index {
+                                0 => { // "OK" button for RegisterFailed
+                                    app_state.hide_dialog(); // Just dismiss
+                                    return Some(Ok(EventOutcome::Ok("Register failed dialog dismissed".to_string())));
+                                }
+                                _ => { // Default for RegisterFailed
+                                    app_state.hide_dialog();
+                                    return Some(Ok(EventOutcome::Ok("Unknown dialog button selected".to_string())));
+                                }
+                            }
+                        }
+                        DialogPurpose::ConfirmDeleteColumns => {
+                            match selected_index {
+                                0 => { // "Confirm" button selected
+                                    let outcome_message = handle_delete_selected_columns(&mut admin_state.add_table_state);
+                                    app_state.hide_dialog();
+                                    return Some(Ok(EventOutcome::Ok(outcome_message)));
+                                }
+                                1 => { // "Cancel" button selected
+                                    app_state.hide_dialog();
+                                    return Some(Ok(EventOutcome::Ok("Deletion cancelled.".to_string())));
+                                }
+                                _ => { /* Handle unexpected index */ }
+                            }
+                        }
+                        DialogPurpose::SaveTableSuccess => {
+                            match selected_index {
+                                0 => { // "OK" button selected
+                                    app_state.hide_dialog();
+                                    buffer_state.update_history(AppView::Admin); // Navigate back
+                                    return Some(Ok(EventOutcome::Ok("Save success dialog dismissed.".to_string())));
+                                }
+                                _ => { /* Handle unexpected index */ }
+                            }
+                        }
+                        DialogPurpose::SaveLogicSuccess => {
+                            match selected_index {
+                                0 => { // "OK" button selected
+                                    app_state.hide_dialog();
+                                    buffer_state.update_history(AppView::Admin);
+                                    return Some(Ok(EventOutcome::Ok("Save success dialog dismissed.".to_string())));
+                                }
+                                _ => { /* Handle unexpected index */ }
+                            }
+                        }
+                    }
+                }
+                _ => {} // Ignore other general actions when dialog is shown
+            }
+        }
+        // If it was a key event but not handled above, consume it
+        Some(Ok(EventOutcome::Ok(String::new())))
+    } else {
+        // If it wasn't a key event, consume it too while dialog is active
+        Some(Ok(EventOutcome::Ok(String::new())))
+    }
+}

client/src/modes/general/navigation.rs

@@ -0,0 +1,169 @@
+// src/modes/general/navigation.rs
+
+use crossterm::event::KeyEvent;
+use crate::config::binds::config::Config;
+use crate::state::app::state::AppState;
+use crate::state::pages::form::FormState;
+use crate::state::pages::auth::LoginState;
+use crate::state::pages::auth::RegisterState;
+use crate::state::pages::intro::IntroState;
+use crate::state::pages::admin::AdminState;
+use crate::state::pages::canvas_state::CanvasState;
+use crate::ui::handlers::context::UiContext;
+use crate::modes::handlers::event::EventOutcome;
+use crate::modes::general::command_navigation::{handle_command_navigation_event, NavigationState};
+use anyhow::Result;
+
+pub async fn handle_navigation_event(
+    key: KeyEvent,
+    config: &Config,
+    form_state: &mut FormState,
+    app_state: &mut AppState,
+    login_state: &mut LoginState,
+    register_state: &mut RegisterState,
+    intro_state: &mut IntroState,
+    admin_state: &mut AdminState,
+    command_mode: &mut bool,
+    command_input: &mut String,
+    command_message: &mut String,
+    navigation_state: &mut NavigationState,
+) -> Result<EventOutcome> {
+    // Handle command navigation first if active
+    if navigation_state.active {
+        return handle_command_navigation_event(navigation_state, key, config).await;
+    }
+
+    if let Some(action) = config.get_general_action(key.code, key.modifiers) {
+        match action {
+            "move_up" => {
+                move_up(app_state, login_state, register_state, intro_state, admin_state);
+                return Ok(EventOutcome::Ok(String::new()));
+            }
+            "move_down" => {
+                move_down(app_state, intro_state, admin_state);
+                return Ok(EventOutcome::Ok(String::new()));
+            }
+            "next_option" => {
+                next_option(app_state, intro_state);
+                return Ok(EventOutcome::Ok(String::new()));
+            }
+            "previous_option" => {
+                previous_option(app_state, intro_state);
+                return Ok(EventOutcome::Ok(String::new()));
+            }
+            "next_field" => {
+                next_field(form_state);
+                return Ok(EventOutcome::Ok(String::new()));
+            }
+            "prev_field" => {
+                prev_field(form_state);
+                return Ok(EventOutcome::Ok(String::new()));
+            }
+            "enter_command_mode" => {
+                handle_enter_command_mode(command_mode, command_input, command_message);
+                return Ok(EventOutcome::Ok(String::new()));
+            }
+            "select" => {
+                let (context, index) = if app_state.ui.show_intro {
+                    (UiContext::Intro, intro_state.selected_option)
+                } else if app_state.ui.show_login && app_state.ui.focus_outside_canvas {
+                    (UiContext::Login, app_state.focused_button_index)
+                } else if app_state.ui.show_register && app_state.ui.focus_outside_canvas {
+                    (UiContext::Register, app_state.focused_button_index)
+                } else if app_state.ui.show_admin {
+                    (UiContext::Admin, admin_state.get_selected_index().unwrap_or(0))
+                } else if app_state.ui.dialog.dialog_show {
+                     (UiContext::Dialog, app_state.ui.dialog.dialog_active_button_index)
+                } else {
+                    return Ok(EventOutcome::Ok("Select (No Action)".to_string()));
+                };
+                return Ok(EventOutcome::ButtonSelected { context, index });
+            }
+            _ => {}
+        }
+    }
+    Ok(EventOutcome::Ok(String::new()))
+}
+
+pub fn move_up(app_state: &mut AppState, login_state: &mut LoginState, register_state: &mut RegisterState, intro_state: &mut IntroState, admin_state: &mut AdminState) {
+    if app_state.ui.focus_outside_canvas && app_state.ui.show_login || app_state.ui.show_register{
+        if app_state.focused_button_index == 0 {
+            app_state.ui.focus_outside_canvas = false;
+            if app_state.ui.show_login {
+                let last_field_index = login_state.fields().len().saturating_sub(1);
+                login_state.set_current_field(last_field_index);
+            } else {
+                let last_field_index = register_state.fields().len().saturating_sub(1);
+                register_state.set_current_field(last_field_index);
+            }
+        } else {
+            app_state.focused_button_index = app_state.focused_button_index.saturating_sub(1);
+        }
+    } else if app_state.ui.show_intro {
+        intro_state.previous_option();
+    } else if app_state.ui.show_admin {
+        admin_state.previous();
+    }
+}
+
+pub fn move_down(app_state: &mut AppState, intro_state: &mut IntroState, admin_state: &mut AdminState) {
+    if app_state.ui.focus_outside_canvas && app_state.ui.show_login || app_state.ui.show_register {
+        let num_general_elements = 2;
+        if app_state.focused_button_index < num_general_elements - 1 {
+            app_state.focused_button_index += 1;
+        }
+    } else if app_state.ui.show_intro {
+        intro_state.next_option();
+    } else if app_state.ui.show_admin {
+        admin_state.next();
+    }
+}
+
+pub fn next_option(app_state: &mut AppState, intro_state: &mut IntroState) { 
+    if app_state.ui.show_intro {
+        intro_state.next_option();
+    } else {
+        // Get option count from state instead of parameter
+        let option_count = app_state.profile_tree.profiles.len();
+        app_state.focused_button_index = (app_state.focused_button_index + 1) % option_count;
+    }
+}
+
+pub fn previous_option(app_state: &mut AppState, intro_state: &mut IntroState) {
+    if app_state.ui.show_intro {
+        intro_state.previous_option();
+    } else {
+        let option_count = app_state.profile_tree.profiles.len();
+        app_state.focused_button_index = if app_state.focused_button_index == 0 {
+            option_count.saturating_sub(1)
+        } else {
+            app_state.focused_button_index - 1
+        };
+    }
+}
+
+pub fn next_field(form_state: &mut FormState) {
+    if !form_state.fields.is_empty() {
+        form_state.current_field = (form_state.current_field + 1) % form_state.fields.len();
+    }
+}
+
+pub fn prev_field(form_state: &mut FormState) {
+    if !form_state.fields.is_empty() {
+        if form_state.current_field == 0 {
+            form_state.current_field = form_state.fields.len() - 1;
+        } else {
+            form_state.current_field -= 1;
+        }
+    }
+}
+
+pub fn handle_enter_command_mode(
+    command_mode: &mut bool,
+    command_input: &mut String,
+    command_message: &mut String
+) {
+    *command_mode = true;
+    command_input.clear();
+    command_message.clear();
+}

client/src/modes/handlers.rs

@@ -1,3 +1,4 @@
-// src/client/modes/handlers.rs
+// src/modes/handlers.rs
 pub mod event;
-pub mod command_mode;
+pub mod event_helper;
+pub mod mode_manager;

client/src/modes/handlers/event_helper.rs

@@ -0,0 +1,105 @@
+
+// src/modes/handlers/event_helper.rs
+//! Helper functions to handle the differences between legacy and library CanvasState traits
+
+use crate::state::app::state::AppState;
+use crate::state::pages::{
+    form::FormState,
+    auth::{LoginState, RegisterState},
+};
+use crate::state::pages::canvas_state::CanvasState as LegacyCanvasState;
+use canvas::CanvasState as LibraryCanvasState;
+
+/// Get the current field index from the appropriate state based on which UI is active
+pub fn get_current_field_for_state(
+    app_state: &AppState,
+    login_state: &LoginState,
+    register_state: &RegisterState,
+    form_state: &FormState,
+) -> usize {
+    if app_state.ui.show_login {
+        login_state.current_field() // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.current_field() // Uses LegacyCanvasState
+    } else {
+        form_state.current_field() // Uses LibraryCanvasState
+    }
+}
+
+/// Get the current cursor position from the appropriate state based on which UI is active
+pub fn get_current_cursor_pos_for_state(
+    app_state: &AppState,
+    login_state: &LoginState,
+    register_state: &RegisterState,
+    form_state: &FormState,
+) -> usize {
+    if app_state.ui.show_login {
+        login_state.current_cursor_pos() // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.current_cursor_pos() // Uses LegacyCanvasState
+    } else {
+        form_state.current_cursor_pos() // Uses LibraryCanvasState
+    }
+}
+
+/// Check if the appropriate state has unsaved changes based on which UI is active
+pub fn get_has_unsaved_changes_for_state(
+    app_state: &AppState,
+    login_state: &LoginState,
+    register_state: &RegisterState,
+    form_state: &FormState,
+) -> bool {
+    if app_state.ui.show_login {
+        login_state.has_unsaved_changes() // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.has_unsaved_changes() // Uses LegacyCanvasState
+    } else {
+        form_state.has_unsaved_changes() // Uses LibraryCanvasState
+    }
+}
+
+/// Get the current input from the appropriate state based on which UI is active
+pub fn get_current_input_for_state<'a>(
+    app_state: &AppState,
+    login_state: &'a LoginState,
+    register_state: &'a RegisterState,
+    form_state: &'a FormState,
+) -> &'a str {
+    if app_state.ui.show_login {
+        login_state.get_current_input() // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.get_current_input() // Uses LegacyCanvasState
+    } else {
+        form_state.get_current_input() // Uses LibraryCanvasState
+    }
+}
+
+/// Set the cursor position for the appropriate state based on which UI is active
+pub fn set_current_cursor_pos_for_state(
+    app_state: &AppState,
+    login_state: &mut LoginState,
+    register_state: &mut RegisterState,
+    form_state: &mut FormState,
+    pos: usize,
+) {
+    if app_state.ui.show_login {
+        login_state.set_current_cursor_pos(pos); // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.set_current_cursor_pos(pos); // Uses LegacyCanvasState
+    } else {
+        form_state.set_current_cursor_pos(pos); // Uses LibraryCanvasState
+    }
+}
+
+/// Get cursor position for mixed login/register vs form logic
+pub fn get_cursor_pos_for_mixed_state(
+    app_state: &AppState,
+    login_state: &LoginState,
+    form_state: &FormState,
+) -> usize {
+    if app_state.ui.show_login || app_state.ui.show_register {
+        login_state.current_cursor_pos() // Uses LegacyCanvasState
+    } else {
+        form_state.current_cursor_pos() // Uses LibraryCanvasState
+    }
+}

client/src/modes/handlers/mode_manager.rs

@@ -0,0 +1,100 @@
+// src/modes/handlers/mode_manager.rs
+use crate::state::app::state::AppState;
+use crate::modes::handlers::event::EventHandler;
+use crate::state::pages::add_logic::AddLogicFocus;
+use crate::state::app::highlight::HighlightState;
+use crate::state::pages::admin::AdminState;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum AppMode {
+    General,   // For intro and admin screens
+    ReadOnly,  // Canvas read-only mode
+    Edit,      // Canvas edit mode
+    Highlight, // Cnavas highlight/visual mode
+    Command,   // Command mode overlay
+}
+
+pub struct ModeManager;
+
+impl ModeManager {
+    // Determine current mode based on app state
+    pub fn derive_mode(
+        app_state: &AppState,
+        event_handler: &EventHandler,
+        admin_state: &AdminState,
+    ) -> AppMode {
+        if event_handler.navigation_state.active {
+            return AppMode::General;
+        }
+
+        if event_handler.command_mode {
+            return AppMode::Command;
+        }
+
+        if !matches!(event_handler.highlight_state, HighlightState::Off) {
+            return AppMode::Highlight;
+        }
+
+        let is_canvas_view = app_state.ui.show_login
+            || app_state.ui.show_register
+            || app_state.ui.show_form
+            || app_state.ui.show_add_table
+            || app_state.ui.show_add_logic;
+
+        if app_state.ui.show_add_logic {
+            // Specific logic for AddLogic view
+            match admin_state.add_logic_state.current_focus {
+                AddLogicFocus::InputLogicName
+                | AddLogicFocus::InputTargetColumn
+                | AddLogicFocus::InputDescription => {
+                    // These are canvas inputs
+                    if event_handler.is_edit_mode {
+                        AppMode::Edit
+                    } else {
+                        AppMode::ReadOnly
+                    }
+                }
+                _ => AppMode::General,
+            }
+        } else if app_state.ui.show_add_table {
+            if app_state.ui.focus_outside_canvas {
+                AppMode::General
+            } else {
+                if event_handler.is_edit_mode { 
+                    AppMode::Edit 
+                } else { 
+                    AppMode::ReadOnly 
+                }
+            }
+        } else if is_canvas_view {
+            if app_state.ui.focus_outside_canvas {
+                AppMode::General
+            } else {
+                if event_handler.is_edit_mode {
+                    AppMode::Edit
+                } else {
+                    AppMode::ReadOnly
+                }
+            }
+        } else {
+            AppMode::General
+        }
+    }
+
+    // Mode transition rules
+pub fn can_enter_command_mode(current_mode: AppMode) -> bool {
+        !matches!(current_mode, AppMode::Edit)
+    }
+
+    pub fn can_enter_edit_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::ReadOnly)
+    }
+
+    pub fn can_enter_read_only_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::Edit | AppMode::Command | AppMode::Highlight)
+    }
+
+    pub fn can_enter_highlight_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::ReadOnly)
+    }
+}

client/src/modes/highlight.rs

@@ -0,0 +1,2 @@
+// src/client/modes/highlight.rs
+pub mod highlight;