Add Mobile UI docs

Signed-off-by: Víctor Mayoral Vilches <v.mayoralv@gmail.com>
This commit is contained in:
Víctor Mayoral Vilches 2025-12-02 15:11:09 +01:00
parent 03e8ae8d7e
commit 93b17abdf7
17 changed files with 1431 additions and 3 deletions

View File

@ -18,7 +18,8 @@ The cybersecurity AI landscape is rapidly evolving, and professionals need tools
- **🔓 Zero Restrictions**: Unrestricted AI with no refusals, specifically trained for offensive security tasks
- **🇪🇺 European Hosting**: GDPR and NIS2 compliant infrastructure ensuring maximum privacy and data sovereignty
- **💬 Professional Support**: Dedicated technical support to help you maximize your security testing capabilities
- **⚡ Advanced Features**: Terminal UI, context monitoring, and exclusive tools not available in the Community Edition
- **📱 Mobile UI (iOS)**: Native iOS app for security testing on the go - **[Join TestFlight Beta](https://testflight.apple.com/join/nXZZD4Z5)**
- **⚡ Advanced Features**: Terminal UI (deprecated), context monitoring, and exclusive tools not available in the Community Edition
---
@ -35,7 +36,8 @@ The cybersecurity AI landscape is rapidly evolving, and professionals need tools
| **Command Line Interface** | ✅ Yes | ✅ Yes |
| **European Data Hosting** | ✅ **GDPR + NIS2 Compliant** | ✅ **GDPR + NIS2 Compliant** |
| **`alias1` Model** | ❌ Not Available | ✅ **Unlimited Tokens** |
| **Terminal User Interface (TUI)** | ❌ | ✅ Multi-terminal parallel execution |
| **Mobile UI (iOS App)** | ❌ | ✅ **Native iOS App** - [TestFlight](https://testflight.apple.com/join/nXZZD4Z5) |
| **Terminal User Interface (TUI)** | ❌ | ✅ Multi-terminal (Deprecated) |
| **Context Monitoring (`/context`)** | ❌ | ✅ Real-time token tracking |
| **Advanced Reporting** | ❌ | ✅ Professional formats |
| **Priority Support** | ❌ Community | ✅ **Professional** |

View File

@ -33,7 +33,8 @@ A lightweight, ergonomic framework for building bug bounty-ready Cybersecurity A
**CAI PRO** delivers the power you need for professional security testing:
- ✅ **Unlimited `alias1` tokens** - Our state-of-the-art cybersecurity model that beats GPT-5 in benchmarks
- ✅ **Terminal User Interface (TUI)** - Multi-agent parallel execution with visual monitoring
- ✅ **Mobile User Interface (iOS)** - Native iOS app for security testing on the go - **[Join TestFlight Beta](https://testflight.apple.com/join/nXZZD4Z5)**
- ✅ **Terminal User Interface (TUI)** - Multi-agent parallel execution with visual monitoring *(Deprecated - Use Mobile UI)*
- ✅ **Context Monitoring** - Real-time token tracking and optimization
- ✅ **Zero Refusals** - Unrestricted AI specifically trained for offensive security
- ✅ **European Hosting** - GDPR & NIS2 compliant with guaranteed data privacy

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

339
docs/mui/chat_features.md Normal file
View File

@ -0,0 +1,339 @@
# Chat Features - CAI Mobile UI
> **⚡ CAI-Pro Exclusive**
> Advanced chat capabilities for professional security testing on mobile.
## Message Composition
### Rich Text Input
The CAI Mobile UI supports advanced text formatting:
**Markdown Support**
- **Bold**: Surround with `**text**` or `__text__`
- *Italic*: Use `*text*` or `_text_`
- `Code`: Wrap with backticks
- Lists: Start lines with `-` or `1.`
- Links: `[text](url)` format
**Code Blocks**
````
```python
# Language-specific highlighting
def scan_target(ip):
return results
```
````
### Smart Completions
**Agent Mentions**
- Type `@` to see available agents
- Quick switch context mid-conversation
- Example: `@red_teamer scan this endpoint`
**File References**
- Type `/` for file browser
- Drag & drop from Files app
- Paste images directly
**Command Shortcuts**
- Type `!` for saved commands
- Create custom shortcuts in settings
- Example: `!nmap``Run nmap scan on target`
### Voice Input
**Dictation Features**
- Tap microphone icon
- Automatic punctuation
- Technical term recognition
- Multi-language support
**Voice Commands**
- "Send message"
- "New conversation"
- "Switch to [agent name]"
- "Cancel generation"
## Message Display
### Streaming Responses
![CAI Streaming Response](../media/MUI/cai_app_ios_reasoning.png)
**Real-time Indicators**
- Typing animation
- Progress estimation
- Token counter
- Time elapsed
**Partial Rendering**
- See results as they generate
- Syntax highlighting updates live
- Tables render incrementally
- Images load progressively
### Content Types
**Security Reports**
```
╔══════════════════════════════════════╗
║ VULNERABILITY REPORT ║
╠══════════════════════════════════════╣
║ Target: example.com ║
║ Risk Level: HIGH ║
║ CVSS Score: 8.5 ║
╚══════════════════════════════════════╝
```
**Code Analysis**
- Syntax highlighting for 100+ languages
- Line numbers for reference
- Diff view for changes
- Copy button per code block
**Structured Data**
- Tables with sorting
- Collapsible JSON trees
- Chart rendering
- CSV preview with scrolling
### Interactive Elements
**Expandable Sections**
- Tap to expand/collapse
- Remembers state
- Smooth animations
- Section summaries
**Tool Outputs**
- Real-time tool execution status
- Collapsible verbose output
- Error highlighting
- Retry failed tools
**Links & References**
- In-app browser for links
- CVE database lookups
- Documentation tooltips
- External app handoff
## Advanced Features
### Message Actions
**Quick Actions Bar**
Swipe left on any message:
- 🔄 Retry - Re-run with same prompt
- 📋 Copy - Copy to clipboard
- 📤 Share - Share via iOS share sheet
- 🗑️ Delete - Remove from history
**Long Press Menu**
- Copy Text
- Copy as Markdown
- Copy as JSON
- Share Message
- Save to Files
- Create Template
- Report Issue
### Conversation Management
**Search Within Chat**
- `⌘ + F` or tap search icon
- Real-time highlighting
- Previous/Next navigation
- Case sensitive option
- Regex support
**Message Filtering**
- Show only user messages
- Show only agent responses
- Filter by date range
- Filter by content type
- Export filtered results
### Context Preservation
**Auto-Save**
- Every message saved locally
- Cloud sync (optional)
- Crash recovery
- Version history
**Session Continuity**
- Resume mid-generation
- Restore agent state
- Maintain context across app restarts
- Background task completion
## Collaboration Features
### Sharing & Export
**Export Formats**
- Plain Text (.txt)
- Markdown (.md)
- JSON (.json)
- PDF with formatting
- HTML with styling
**Share Options**
- AirDrop to nearby devices
- Email with formatting preserved
- Slack/Discord webhooks
- GitHub Gist integration
- Custom share extensions
### Templates & Snippets
**Message Templates**
Create reusable prompts:
```
Template: Web App Test
---
Perform security assessment on [URL]:
1. Check for common vulnerabilities
2. Test authentication
3. Scan for exposed endpoints
4. Generate detailed report
```
**Code Snippets**
Save frequently used code:
- Payloads library
- Script templates
- Command shortcuts
- Custom exploits
## Performance Features
### Offline Mode
**Available Offline**
- Read previous conversations
- Search message history
- Export conversations
- View cached responses
**Sync When Connected**
- Queue messages for sending
- Auto-retry failed messages
- Merge offline changes
- Conflict resolution
### Message Optimization
**Smart Loading**
- Lazy load old messages
- Virtualized scrolling
- Image placeholder loading
- Incremental search indexing
**Memory Management**
- Auto-archive old conversations
- Compress stored messages
- Clear cache options
- Storage usage analytics
## Security Features
### Privacy Controls
**Message Security**
- End-to-end encryption option
- Biometric lock for sensitive chats
- Auto-delete timers
- Screenshot prevention mode
**Data Protection**
- Local encryption at rest
- Secure keychain storage
- No cloud sync option
- Export password protection
### Audit Trail
**Activity Logging**
- Message timestamps
- Edit history
- Access logs
- Export audit trail
## Customization
### Display Preferences
**Message Appearance**
- Bubble style (iOS/Android/Minimal)
- Color themes
- Font selection
- Spacing options
**Timestamp Display**
- Always visible
- On tap
- Grouped by time
- Relative/Absolute
### Behavior Settings
**Send Options**
- Enter to send
- Shift+Enter for new line
- Send button confirmation
- Draft auto-save
**Notification Settings**
- Message previews
- Sound selection
- Vibration patterns
- Do Not Disturb respect
## Keyboard Enhancements
### Text Shortcuts
| Shortcut | Expands To |
|----------|------------|
| `@@` | Current date/time |
| `##` | Last command output |
| `$$` | Previous agent response |
| `%%` | System information |
### Quick Commands
| Command | Action |
|---------|--------|
| `/clear` | Clear conversation |
| `/export` | Export chat |
| `/stats` | Show session stats |
| `/help` | Show help |
## Tips & Tricks
### Power User Features
1. **Multi-Message Select**: Two-finger tap and drag
2. **Quick Quote**: Swipe right on message to quote
3. **Batch Operations**: Select multiple messages for bulk actions
4. **Smart Paste**: Automatically formats pasted code
### Hidden Features
1. **Developer Console**: Triple-tap status bar
2. **Message Inspector**: Long press + 3D touch
3. **Network Monitor**: Shake in settings
4. **Debug Logging**: Five taps on version
## Next Steps
- 🎯 [Master Agent Selection](agent_selection.md)
- 🌐 [Configure Network & MCP](network_mcp.md)
- 📊 [Understand Session Management](session_management.md)
---
*Advanced chat features enable professional-grade mobile security testing*

View File

@ -0,0 +1,216 @@
# Gestures & Shortcuts - CAI Mobile UI
> **⚡ CAI-Pro Exclusive**
> Master touch gestures and keyboard shortcuts for efficient mobile security testing.
## Touch Gestures
### Basic Navigation
| Gesture | Action | Context |
|---------|--------|---------|
| **Tap** | Select/Activate | Any interactive element |
| **Swipe Right** | Previous conversation | Chat screen |
| **Swipe Left** | Next conversation | Chat screen |
| **Pull Down** | Refresh/Cancel | During agent response |
| **Pinch Out** | Increase text size | Chat messages |
| **Pinch In** | Decrease text size | Chat messages |
### Message Interactions
| Gesture | Action | Result |
|---------|--------|--------|
| **Long Press Message** | Show actions | Copy/Share/Save menu |
| **Double Tap Code** | Quick copy | Copies code to clipboard |
| **Swipe Left on Message** | Show options | Retry/Delete buttons |
| **3D Touch/Haptic Touch** | Preview | Preview without opening |
### Advanced Gestures
| Gesture | Action | Where |
|---------|--------|-------|
| **Two-Finger Swipe Up** | Jump to top | Chat view |
| **Two-Finger Swipe Down** | Jump to bottom | Chat view |
| **Three-Finger Swipe** | Switch apps | Anywhere |
| **Shake Device** | Undo/Report | After action |
## iPad Keyboard Shortcuts
### Navigation
| Shortcut | Action |
|----------|--------|
| `⌘ + 1-9` | Jump to conversation 1-9 |
| `⌘ + ←` | Previous conversation |
| `⌘ + →` | Next conversation |
| `⌘ + ↑` | Scroll to top |
| `⌘ + ↓` | Scroll to bottom |
### Conversation Management
| Shortcut | Action |
|----------|--------|
| `⌘ + N` | New conversation |
| `⌘ + W` | Close current conversation |
| `⌘ + D` | Duplicate conversation |
| `⌘ + S` | Save/Export conversation |
| `⌘ + P` | Print conversation |
### Text Editing
| Shortcut | Action |
|----------|--------|
| `⌘ + /` | Focus message input |
| `⌘ + Return` | Send message |
| `⌘ + Shift + Return` | New line |
| `⌘ + A` | Select all |
| `⌘ + Z` | Undo |
| `⌘ + Shift + Z` | Redo |
### Agent & Model Control
| Shortcut | Action |
|----------|--------|
| `⌘ + K` | Quick agent switch |
| `⌘ + M` | Quick model switch |
| `⌘ + .` | Cancel current generation |
| `⌘ + R` | Retry last message |
### View Control
| Shortcut | Action |
|----------|--------|
| `⌘ + +` | Increase text size |
| `⌘ + -` | Decrease text size |
| `⌘ + 0` | Reset text size |
| `⌘ + L` | Clear conversation |
| `⌘ + F` | Find in conversation |
## Quick Actions
### From Lock Screen
- **Notification Actions**: Reply directly from notifications
- **Widget Actions**: Quick launch with specific agent
- **Siri Shortcuts**: "Start CAI security scan"
### From Home Screen
**3D Touch Menu**:
- New Conversation
- Continue Last Session
- Quick Scan Network
- View Recent Chats
### Control Center
Add CAI controls:
- Quick Connect/Disconnect
- Agent Status Toggle
- Cost Tracker Widget
## Gesture Customization
### Settings → Gestures
**Swipe Sensitivity**
- Light: 100pt minimum
- Normal: 75pt minimum (default)
- Heavy: 50pt minimum
**Long Press Duration**
- Fast: 0.3 seconds
- Normal: 0.5 seconds (default)
- Slow: 0.7 seconds
**Haptic Feedback**
- Off: No vibration
- Light: Subtle taps
- Medium: Standard feedback (default)
- Heavy: Strong vibration
## Accessibility Shortcuts
### VoiceOver Gestures
| Gesture | Action |
|---------|--------|
| **Two-Finger Tap** | Pause/Resume reading |
| **Three-Finger Tap** | Show item chooser |
| **Two-Finger Rotate** | Access rotor |
| **One-Finger Swipe** | Navigate items |
### Voice Control Commands
| Command | Action |
|---------|--------|
| "Show numbers" | Display tap targets |
| "Show grid" | Show screen grid |
| "Tap [element]" | Activate element |
| "Scroll down/up" | Navigate content |
## Pro Tips
### Speed Techniques
1. **Quick Agent Switch**: Swipe down from agent name
2. **Instant Copy**: Triple-tap any text
3. **Fast Scroll**: Tap status bar to jump to top
4. **Batch Actions**: Select multiple messages with two-finger tap
### Hidden Features
1. **Debug Menu**: Five-tap on version number
2. **FPS Counter**: Settings → Developer → Show FPS
3. **Network Logger**: Shake device while in settings
4. **Export Raw JSON**: Long press export button
### Gesture Combinations
1. **Cancel + Clear**: Pull down + shake
2. **Quick Share**: Long press + swipe up
3. **Multi-Select**: Two-finger tap + drag
4. **Focus Mode**: Triple-tap navigation bar
## Troubleshooting Gestures
### Common Issues
**Gestures not working:**
- Check Settings → Accessibility → Touch
- Disable any conflicting accessibility features
- Reset gesture settings to defaults
**Accidental triggers:**
- Increase swipe sensitivity
- Enable gesture confirmation
- Adjust long press duration
**iPad keyboard issues:**
- Ensure external keyboard connected
- Check Settings → Keyboard → Shortcuts
- Update to latest iOS version
## Platform-Specific Features
### iPhone-Only Gestures
- **Reachability**: Swipe down on bottom edge
- **Back Gesture**: Swipe from left edge
- **App Switcher**: Swipe up and hold
### iPad-Only Features
- **Split View**: Drag from dock
- **Slide Over**: Swipe from right edge
- **Picture in Picture**: Pinch video
## Next Steps
- 💬 [Master Chat Features](chat_features.md)
- 🎯 [Learn Agent Selection](agent_selection.md)
- 🛠️ [Configure Network & MCP](network_mcp.md)
---
*Efficient gestures lead to faster security testing*

231
docs/mui/getting_started.md Normal file
View File

@ -0,0 +1,231 @@
# Getting Started with CAI Mobile UI
> **⚡ CAI-Pro Exclusive**
> **[Join the TestFlight Beta](https://testflight.apple.com/join/nXZZD4Z5)** to get started with CAI Mobile UI.
This guide will walk you through installing, configuring, and using the CAI Mobile UI for the first time.
## Prerequisites
Before you begin, ensure you have:
1. **CAI-Pro License**: Active subscription from [Alias Robotics](https://aliasrobotics.com)
2. **iOS Device**: iPhone or iPad running iOS 15.0+
3. **CAI API Server**: Running CAI API server (v0.7.0+) on your network
4. **API Key**: Valid `ALIAS_API_KEY` for authentication
## Installation
### Step 1: Join TestFlight Beta
1. On your iOS device, visit: [https://testflight.apple.com/join/nXZZD4Z5](https://testflight.apple.com/join/nXZZD4Z5)
2. If prompted, install TestFlight from the App Store
3. Accept the beta testing invitation
4. Tap "Install" to download CAI Mobile UI
### Step 2: Launch the App
1. Find the CAI app icon on your home screen
2. Tap to launch
3. Grant necessary permissions when prompted:
- **Local Network**: Required for discovering CAI servers
- **Notifications**: Optional, for background task alerts
![CAI Mobile UI Login Screen](../media/MUI/cai_app_ios_login.png)
## Initial Setup
### Option A: Automatic Server Discovery
Perfect for local network setups:
1. **Start your CAI API server** on your computer:
```bash
cai --api
```
Note the server address (e.g., `http://192.168.1.100:8000`)
2. **On your iOS device**:
- Ensure Wi-Fi is enabled and connected to the same network
- Tap "Scan Network" on the login screen
- Wait for the discovery process (usually 2-3 seconds)
- Select your server from the list
3. **Enter your API key**:
- Paste or type your `ALIAS_API_KEY`
- Toggle "Remember Me" to save credentials
- Tap "Connect"
### Option B: Manual Server Configuration
For remote servers or specific configurations:
1. **Server URL**:
- Enter the complete URL (e.g., `https://cai.company.com:8443`)
- Include the protocol (`http://` or `https://`)
- Include the port if not standard
2. **API Key**:
- Enter your `ALIAS_API_KEY`
- Toggle "Remember Me" for convenience
3. **Advanced Options** (tap gear icon):
- **Timeout**: Adjust connection timeout (default: 30s)
- **SSL Verification**: Toggle for self-signed certificates
- **Proxy**: Configure if needed
4. Tap "Connect"
## First Session
### 1. Welcome Screen
After successful connection, you'll see:
- Agent selector at the top
- Model selector below
- Empty chat interface
- Navigation tabs at bottom
### 2. Select an Agent
For your first session, we recommend:
1. Tap the agent selector
2. Choose `selection_agent` - it helps recommend the right agent for your task
3. Or select a specific agent like:
- `red_teamer_agent` - For offensive security testing
- `blue_teamer_agent` - For defensive analysis
- `bug_hunter_agent` - For vulnerability discovery
### 3. Choose a Model
1. Tap the model dropdown
2. Recommended models:
- `gpt-4o` - Best overall performance
- `claude-3.5-sonnet` - Excellent for code analysis
- `alias1` - Optimized for security tasks
- `cohere/command-r-plus-08-2024` - Great performance and value
### 4. Start Your First Conversation
![CAI Mobile UI Chat Interface](../media/MUI/cai_app_ios_chat.png)
Try these starter prompts:
**For Security Testing:**
```
Analyze the security of example.com
```
**For Learning:**
```
Explain how SQL injection works and how to prevent it
```
**For Agent Recommendation:**
```
I need to perform a penetration test on a web application. Which agent should I use?
```
### 5. Understanding Responses
As the agent responds, you'll see:
- **Streaming Text**: Responses appear in real-time
- **Formatted Output**: Code blocks, lists, and emphasis
- **Thinking Indicators**: When agents are processing
- **Tool Usage**: When agents use external tools
![CAI Mobile UI Reasoning Display](../media/MUI/cai_app_ios_reasoning.png)
## Essential Features
### Message Interactions
- **Copy Text**: Long press any message → Copy
- **Share Output**: Long press → Share → Choose app
- **Save Code**: Tap code blocks → Copy button
- **Retry Message**: Swipe left on your message → Retry
### Navigation
- **Switch Conversations**: Swipe left/right or use tab bar
- **New Conversation**: Tap + button
- **View History**: Tap clock icon
- **Return Home**: Tap CAI logo
### Quick Actions
- **Cancel Generation**: Pull down while response is streaming
- **Clear Chat**: Shake device → Clear option
- **Change Agent Mid-Chat**: Tap agent name → Select new
- **Export Session**: Menu → Export → Choose format
## Keyboard Shortcuts (iPad with External Keyboard)
| Shortcut | Action |
|----------|--------|
| `⌘ + N` | New conversation |
| `⌘ + W` | Close current chat |
| `⌘ + ←/→` | Switch conversations |
| `⌘ + K` | Quick agent switch |
| `⌘ + /` | Focus message input |
| `⌘ + ↑` | Previous message |
## Best Practices
### 1. Network Connection
- Use Wi-Fi when possible for better performance
- Enable "Low Data Mode" in settings for cellular
- Download conversations for offline viewing
### 2. Security
- Enable Face ID/Touch ID in settings
- Don't share screenshots with API keys visible
- Use secure connections (HTTPS) when possible
### 3. Performance
- Close unused conversations to free memory
- Enable "Reduce Motion" for older devices
- Clear cache periodically in settings
## Troubleshooting
### Common Issues
**Can't connect to server:**
- Verify server is running: `cai --api`
- Check firewall allows port 8000
- Ensure devices are on same network
- Try manual IP instead of discovery
**Authentication failed:**
- Regenerate API key: `cai --keys`
- Check key hasn't expired
- Verify key matches server configuration
**App crashes or freezes:**
- Force quit and restart app
- Check for app updates in TestFlight
- Clear app cache in settings
- Report issue with crash logs
### Getting Help
1. **In-App Help**: Tap menu → Help
2. **Documentation**: [https://docs.aliasrobotics.com](https://docs.aliasrobotics.com)
3. **Discord Community**: [Join Discord](https://discord.gg/aliasrobotics)
4. **Report Issues**: [GitHub Issues](https://github.com/aliasrobotics/cai/issues)
## Next Steps
Now that you're connected and running:
1. 📱 [Explore the User Interface](user_interface.md)
2. 👆 [Master Gestures & Shortcuts](gestures_shortcuts.md)
3. 💬 [Learn Advanced Chat Features](chat_features.md)
4. 🛠️ [Configure Network & MCP Tools](network_mcp.md)
---
*Welcome to CAI Mobile UI - Security testing in your pocket!*

237
docs/mui/mui_index.md Normal file
View File

@ -0,0 +1,237 @@
# CAI Mobile User Interface (Mobile UI)
> **⚡ CAI-Pro Exclusive Feature**
> The Mobile User Interface (Mobile UI) is available exclusively in **CAI-Pro**. Experience the power of CAI on your iOS device.
> **[Join the TestFlight Beta](https://testflight.apple.com/join/nXZZD4Z5)** to get early access to the CAI mobile app.
---
The CAI Mobile UI brings the full power of CAI to iOS devices, providing a native mobile experience for cybersecurity professionals who need to perform security assessments, respond to incidents, and manage agents on the go.
![CAI Mobile UI Login](../media/MUI/cai_app_ios_login.png)
## Overview
The Mobile UI is a native iOS application built with SwiftUI, offering:
- **📱 Native iOS Experience**: Optimized for iPhone and iPad with familiar iOS interactions
- **🔒 Secure Authentication**: Direct pairing with your CAI API server
- **💬 Real-Time Chat**: Stream responses from multiple agents with native performance
- **🌐 Network Discovery**: Automatically discover CAI servers on your local network
- **🛠️ MCP Integration**: Connect to Model Context Protocol tools directly from mobile
- **🎨 Professional UI**: Custom Alias theme with dark mode support
- **⚡ Offline Capability**: Continue reading conversations without connectivity
## When to Use Mobile UI vs TUI vs CLI
| Feature | Mobile UI | TUI | CLI |
|---------|-----------|-----|-----|
| **Mobility** | ✅ Full mobile access | ❌ Desktop only | ❌ Desktop only |
| **Touch Interface** | ✅ Native touch/gesture | ❌ Keyboard only | ❌ Keyboard only |
| **Visual Experience** | ✅ Native iOS UI | ✅ Rich terminal UI | ⚠️ Basic text |
| **Multi-Agent** | ✅ Tab-based switching | ✅ Split-screen | ❌ Sequential |
| **Network Scanning** | ✅ Built-in discovery | ❌ Manual config | ❌ Manual config |
| **Session Portability** | ✅ Sync across devices | ⚠️ Local only | ⚠️ Local only |
| **Resource Usage** | ✅ Optimized for mobile | ⚠️ Higher (UI) | ✅ Minimal |
| **Automation** | ❌ Interactive only | ❌ Interactive only | ✅ Full scripting |
**Use Mobile UI for**: On-the-go security testing, incident response, remote agent management, field assessments
**Use TUI for**: Desktop-based interactive testing, multi-agent workflows, team collaboration
**Use CLI for**: Automation, CI/CD integration, scripting, server deployments
## Quick Start
### 1. Install the App
1. **Join TestFlight Beta**: [https://testflight.apple.com/join/nXZZD4Z5](https://testflight.apple.com/join/nXZZD4Z5)
2. Install TestFlight from the App Store if not already installed
3. Follow the link to install CAI Mobile UI
4. Launch the app
### 2. Connect to Your CAI Server
![CAI Mobile UI Chat](../media/MUI/cai_app_ios_chat.png)
**Option A: Network Discovery**
1. Ensure your iOS device is on the same network as your CAI API server
2. Tap "Scan Network" on the login screen
3. Select your server from the discovered list
4. Enter your API key
**Option B: Manual Connection**
1. Enter your CAI API server URL (e.g., `http://192.168.1.100:8000`)
2. Enter your API key
3. Tap "Connect"
### 3. Start Using CAI
1. Select an agent from the agent selector
2. Choose your preferred model (recommended: `alias1`)
3. Type your security query or command
4. Swipe between conversations using tabs
See the [Getting Started Guide](getting_started.md) for detailed setup instructions.
## System Requirements
### Device Requirements
- **iOS Version**: 15.0 or later
- **Device**: iPhone 12 or newer, iPad (6th generation) or newer
- **Storage**: 100MB free space
- **Network**: Wi-Fi or cellular data connection
### Server Requirements
- **CAI API Server**: v0.7.0 or later
- **API Key**: Valid `ALIAS_API_KEY` from [Alias Robotics](https://aliasrobotics.com)
- **Network**: Server must be accessible from your iOS device
## Key Features
### 📱 Native iOS Interface
Experience CAI with a truly native iOS experience:
![CAI Mobile UI Reasoning](../media/MUI/cai_app_ios_reasoning.png)
- **Intuitive Navigation**: Swipe gestures, pull-to-refresh, and familiar iOS patterns
- **Dark Mode**: Automatic adaptation to system appearance
- **Dynamic Type**: Support for accessibility text sizes
- **Haptic Feedback**: Subtle feedback for important actions
- **Face ID/Touch ID**: Secure your sessions with biometric authentication
### 💬 Advanced Chat Interface
Interact with agents using a sophisticated chat system:
- **Real-time Streaming**: See responses as they're generated
- **Rich Formatting**: Markdown rendering with syntax highlighting
- **Code Blocks**: Copy code snippets with one tap
- **Message Actions**: Long-press for copy, share, or save
- **Conversation History**: Persistent storage with search
### 🌐 Network Discovery & MCP
Connect to your infrastructure seamlessly:
- **Auto-Discovery**: Find CAI servers on your local network
- **MCP Tools**: Access filesystem, git, and custom tools
- **Server Profiles**: Save multiple server configurations
- **Connection Status**: Real-time server health monitoring
### 🎯 Agent Management
Access the full power of CAI agents:
- **Quick Switching**: Swipe or tap to change agents
- **Agent Info**: View capabilities and documentation
- **Favorites**: Star frequently used agents
- **Context Preservation**: Maintain state across sessions
### 📊 Session Management
Keep track of your work:
- **Session History**: Browse past conversations
- **Export Options**: Share as text, JSON, or PDF
- **Cost Tracking**: Monitor token usage and costs
- **Analytics**: View usage patterns and insights
## Documentation Structure
### For New Users
1. [Getting Started](getting_started.md) - Installation and first steps
2. [User Interface](user_interface.md) - Understanding the mobile layout
3. [Gestures & Shortcuts](gestures_shortcuts.md) - Essential interactions
### For Regular Users
4. [Chat Features](chat_features.md) - Advanced messaging capabilities
5. [Agent Selection](agent_selection.md) - Choosing and managing agents
6. [Network & MCP](network_mcp.md) - Connectivity and tools
### For Advanced Users
7. [Session Management](session_management.md) - History and exports
8. [Security Features](security_features.md) - Authentication and privacy
9. [Advanced Settings](advanced_settings.md) - Customization options
### Support Resources
10. [Troubleshooting](troubleshooting.md) - Common issues and solutions
11. [FAQ](faq.md) - Frequently asked questions
## Quick Reference
### Essential Gestures
| Gesture | Action |
|---------|--------|
| Swipe Right | Previous conversation |
| Swipe Left | Next conversation |
| Pull Down | Refresh/Cancel |
| Long Press Message | Show actions |
| Double Tap Code | Copy to clipboard |
| Pinch | Zoom text size |
### Common Actions
| Action | How To |
|--------|--------|
| Change Agent | Tap agent name in header |
| Switch Model | Tap model dropdown |
| New Chat | Tap + button |
| View History | Tap clock icon |
| Export Chat | Long press → Share |
| Cancel Generation | Pull down during response |
## Architecture
```
CAI Mobile UI
├── Core Components
│ ├── CAIAPIClient - Server communication
│ ├── AuthManager - Authentication & pairing
│ └── SessionStore - Local data persistence
├── UI Components
│ ├── ChatView - Main conversation interface
│ ├── AgentSelector - Agent browsing & selection
│ ├── NetworkScanner - Local network discovery
│ └── SettingsView - Configuration management
├── MCP Integration
│ ├── MCPServer - Tool protocol handling
│ ├── MCPNetworkStore - Tool discovery
│ └── MCPToolsView - Tool management UI
└── Services
├── ChatLogStore - Conversation storage
├── KeychainHelper - Secure credential storage
└── LocalNetworkInfo - Network utilities
```
## Video Demo
Watch CAI Mobile UI in action:
[View Demo Video](../media/MUI/cai_app_0.7_apple_hd.mp4)
## Community and Support
- **TestFlight Beta**: [Join Now](https://testflight.apple.com/join/nXZZD4Z5)
- **Documentation**: [https://docs.aliasrobotics.com](https://docs.aliasrobotics.com)
- **GitHub Issues**: [Report iOS App Issues](https://github.com/aliasrobotics/cai/issues)
- **Discord**: [Join our community](https://discord.gg/aliasrobotics)
- **Twitter**: [@aliasrobotics](https://twitter.com/aliasrobotics)
## What's Next?
- 📱 [Getting Started Guide](getting_started.md) - Set up your first mobile session
- 🎯 [User Interface](user_interface.md) - Master the mobile layout
- 👆 [Gestures & Shortcuts](gestures_shortcuts.md) - Navigate like a pro
- 💬 [Chat Features](chat_features.md) - Advanced conversation tools
- 🌐 [Network & MCP](network_mcp.md) - Connect to your infrastructure
---
> **Note**: The Terminal User Interface (TUI) is now deprecated in favor of the Mobile UI for CAI-Pro users. While the TUI remains functional for existing users, all new development and features are being added to the Mobile UI. We encourage all CAI-Pro users to transition to the mobile experience for the best performance and latest capabilities.
---
*CAI Mobile UI v0.7.0+ | Exclusively for CAI-Pro*

387
docs/mui/user_interface.md Normal file
View File

@ -0,0 +1,387 @@
# CAI Mobile UI - User Interface Guide
> **⚡ CAI-Pro Exclusive**
> Master the CAI Mobile UI interface for efficient security testing on the go.
This guide provides a comprehensive overview of the CAI Mobile UI interface elements, layouts, and visual design.
![CAI Mobile UI Main Interface](../media/MUI/cai_app_ios_chat.png)
## Interface Overview
The CAI Mobile UI is organized into five main areas:
```
┌─────────────────────────────┐
│ Navigation Bar │ ← Agent/Model Selection
├─────────────────────────────┤
│ │
│ │
│ Chat Display │ ← Conversation Area
│ │
│ │
├─────────────────────────────┤
│ Message Input Bar │ ← Text Input
├─────────────────────────────┤
│ Tab Bar │ ← Navigation
└─────────────────────────────┘
```
## Navigation Bar
The top navigation bar provides quick access to core functions:
### Left Side
- **Menu Button** (☰): Access sidebar menu
- Settings
- Session History
- Export Options
- Help & Documentation
### Center
- **Agent Selector**: Current agent name with dropdown
- Tap to change agents
- Shows agent status (active/thinking)
- Displays specialized agent icons
### Right Side
- **Model Badge**: Current model indicator
- Tap to change models
- Color-coded by provider
- Shows token limits
- **Action Button** (...): Quick actions
- Clear conversation
- Export chat
- View raw output
## Chat Display Area
The main conversation area with sophisticated rendering:
### Message Types
**User Messages**
- Right-aligned bubbles
- Blue background (customizable)
- Timestamp on long-press
- Swipe actions available
**Assistant Messages**
- Left-aligned bubbles
- White/gray background
- Agent avatar/icon
- Streaming indicator during generation
**System Messages**
- Center-aligned
- Muted appearance
- Status updates and notifications
### Content Rendering
**Text Formatting**
- **Bold text** for emphasis
- *Italic text* for notes
- `Inline code` with syntax highlighting
- > Blockquotes for citations
**Code Blocks**
```python
# Syntax highlighted code
def security_scan(target):
return results
```
- Language detection
- Copy button overlay
- Horizontal scrolling for long lines
**Lists and Tables**
- Bullet points with proper indentation
- Numbered lists with automatic ordering
- Tables with responsive layout
- Horizontal scroll for wide tables
**Special Elements**
- 🔧 Tool usage indicators
- 🤔 Thinking/reasoning displays
- ⚠️ Warning/error messages
- ✅ Success confirmations
## Message Input Bar
Advanced input controls at the bottom:
### Text Field
- Multi-line support (expands up to 5 lines)
- Paste detection for long content
- Mention support (@agent, @file)
- Markdown preview toggle
### Action Buttons
- **Send** (→): Submit message
- **Attach** (📎): Add files/images
- Photo library
- Camera
- Files app
- Paste from clipboard
- **Voice** (🎤): Voice input (when available)
- **Commands** (/): Quick command palette
## Tab Bar Navigation
Bottom navigation for primary app sections:
### Chats Tab
- Active conversations list
- Unread message indicators
- Swipe to delete/archive
- Search conversations
### Agents Tab
- Browse all available agents
- Category filtering
- Agent descriptions
- Quick select/favorite
### Tools Tab
- MCP tool management
- Connected servers
- Tool documentation
- Configuration options
### History Tab
- Past sessions
- Search and filters
- Export options
- Analytics view
### Settings Tab
- Account management
- Appearance options
- Network configuration
- Advanced settings
## Visual Design
### Color Scheme
**Light Mode**
- Background: #FFFFFF
- Primary: #007AFF (iOS Blue)
- Text: #000000
- Secondary: #8E8E93
**Dark Mode**
- Background: #000000
- Primary: #0A84FF
- Text: #FFFFFF
- Secondary: #8E8E93
**Agent Status Colors**
- Active: Green (#34C759)
- Thinking: Orange (#FF9500)
- Error: Red (#FF3B30)
- Idle: Gray (#8E8E93)
### Typography
**Fonts**
- Headers: SF Pro Display (Bold)
- Body: SF Pro Text (Regular)
- Code: SF Mono (Regular)
- Custom: Suisse Intl (CAI branding)
**Sizes**
- Large Title: 34pt
- Title 1: 28pt
- Body: 17pt
- Caption: 12pt
- Code: 14pt
### Spacing and Layout
**Margins**
- Screen edges: 16pt
- Between elements: 8pt
- Message bubbles: 12pt padding
**Adaptive Layouts**
- iPhone SE: Compact width
- iPhone 14: Regular width
- iPad: Multi-column support
## Interactive Elements
### Gestures
**Tap Gestures**
- Single tap: Select/activate
- Double tap: Quick actions
- Long press: Context menu
**Swipe Gestures**
- Horizontal: Navigate conversations
- Vertical: Scroll content
- Pull-to-refresh: Reload/cancel
**Pinch Gestures**
- Zoom: Adjust text size
- Spread: View image full screen
### Animations
**Transitions**
- Push/pop: 0.3s ease-in-out
- Fade: 0.2s linear
- Spring: Damping 0.8, velocity 0.5
**Loading States**
- Skeleton screens for content
- Pulse animation for thinking
- Progress indicators for uploads
### Haptic Feedback
**Light Impact**
- Selection changes
- Toggle switches
- Tab selections
**Medium Impact**
- Send message
- Error alerts
- Successful actions
**Heavy Impact**
- Critical errors
- Destructive actions
- Force touch menus
## Adaptive Features
### Dynamic Type
Support for iOS accessibility sizes:
- Minimum: 14pt
- Maximum: 53pt
- Automatic layout adjustment
- Readable line lengths maintained
### Orientation Support
**Portrait Mode**
- Full interface visible
- Optimized for one-handed use
- Keyboard avoidance
**Landscape Mode**
- Extended message view
- Side-by-side on iPad
- Floating keyboard support
### Display Modes
**Compact Mode**
- Simplified navigation
- Condensed messages
- Essential actions only
**Regular Mode**
- Full feature set
- Rich formatting
- All tools available
**iPad Mode**
- Multi-column layout
- Floating panels
- Keyboard shortcuts
## Status Indicators
### Connection Status
- 🟢 Connected: Solid green
- 🟡 Connecting: Pulsing yellow
- 🔴 Disconnected: Solid red
- 🔄 Syncing: Rotating icon
### Agent Status
- 💭 Thinking: Animated dots
- 🛠️ Using tools: Tool icon
- ✍️ Writing: Typing indicator
- ✅ Complete: Checkmark
### Network Quality
- Full bars: Excellent (<50ms)
- 3 bars: Good (50-150ms)
- 2 bars: Fair (150-300ms)
- 1 bar: Poor (>300ms)
## Accessibility
### VoiceOver Support
- Complete label coverage
- Logical navigation order
- Action hints provided
- Custom rotor actions
### Visual Accommodations
- High contrast mode
- Reduce motion option
- Color blind filters
- Text size preferences
### Motor Accommodations
- Touch target minimums (44x44pt)
- Gesture alternatives
- Voice control support
- Switch control compatible
## Customization Options
### Appearance Settings
- Theme selection (Light/Dark/Auto)
- Accent color choices
- Font size adjustment
- Message bubble styles
### Layout Preferences
- Compact/comfortable/spacious
- Show/hide timestamps
- Avatar display options
- Tab bar configuration
### Behavior Settings
- Swipe sensitivity
- Animation speed
- Haptic intensity
- Sound effects
## Performance Optimization
### Image Handling
- Lazy loading for history
- Thumbnail generation
- Progressive image loading
- Memory-efficient caching
### Message Rendering
- Virtualized scrolling
- Incremental rendering
- Text measurement caching
- Smooth 60fps scrolling
### Network Efficiency
- Message batching
- Compression support
- Delta updates only
- Offline queue management
## Next Steps
- 👆 [Master Gestures & Shortcuts](gestures_shortcuts.md)
- 💬 [Explore Chat Features](chat_features.md)
- 🎯 [Learn Agent Selection](agent_selection.md)
---
*Understanding the interface is key to efficient mobile security testing*

View File

@ -1,5 +1,10 @@
# CAI Terminal User Interface (TUI)
> **⚠️ DEPRECATED - Superseded by Mobile UI**
> The Terminal User Interface (TUI) has been deprecated in favor of the new **[Mobile UI](../mui/mui_index.md)** for CAI-Pro users.
> While the TUI remains functional for existing users, all new features and development efforts are focused on the Mobile UI.
> **[Join the Mobile UI TestFlight Beta](https://testflight.apple.com/join/nXZZD4Z5)** for the latest CAI experience.
> **⚡ CAI-Pro Exclusive Feature**
> The Terminal User Interface (TUI) is available exclusively in **CAI-Pro**. To access this feature and unlock advanced multi-agent workflows, visit [Alias Robotics](https://aliasrobotics.com/cybersecurityai.php) for more information.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

@ -47,6 +47,16 @@ nav:
# USER INTERFACES (NUEVO AGRUPAMIENTO)
# ========================================
- User Interfaces:
# Mobile UI (MUI) - Subsección
- Mobile UI (iOS):
- Overview: mui/mui_index.md
- Getting Started: mui/getting_started.md
- User Interface: mui/user_interface.md
- Gestures & Shortcuts: mui/gestures_shortcuts.md
- Chat Features: mui/chat_features.md
# Terminal UI (TUI) - Subsección
- Terminal UI (TUI):
- Overview: tui/tui_index.md