System Architecture

IfAI is built with a hybrid architecture combining React/TypeScript frontend with a Rust-powered backend via Tauri 2.0. This design delivers native performance while maintaining web development flexibility.

High-Level Architecture

┌─────────────────────────────────────────────────────────┐
│                      Presentation                       │
│                   (React + TypeScript)                  │
├─────────────────────────────────────────────────────────┤
│  Components  │  Stores  │  Services  │  Hooks  │ Utils │
└─────────────────────────────────────────────────────────┘
                         │ ↑
                         │ Tauri IPC (Commands/Events)
                         │
┌─────────────────────────────────────────────────────────┐
│                       Application                       │
│                    (Rust + Tauri)                       │
├─────────────────────────────────────────────────────────┤
│  Core Modules │ AI Services │ Agent System │ File I/O  │
└─────────────────────────────────────────────────────────┘
                         │ ↑
                         │ FFIs / System Calls
                         │
┌─────────────────────────────────────────────────────────┐
│                        System                           │
│  (OS / File System / Git / Terminal / Network)          │
└─────────────────────────────────────────────────────────┘

Frontend Architecture

Technology Stack

Technology	Version	Purpose
React	19.1.0	UI Framework
TypeScript	5.8	Type Safety
Vite	7.0	Build Tool
Zustand	5.0	State Management
Monaco Editor	0.55	Code Editor
TailwindCSS	3.4	Styling

Directory Structure

src/
├── components/          # React components (26 modules)
│   ├── AIChat/         # AI chat panel
│   ├── Composer/       # Multi-file editor
│   ├── Editor/         # Monaco wrapper
│   ├── FileTree/       # Project file browser
│   ├── Terminal/       # Integrated terminal
│   └── ...
│
├── stores/             # Zustand state stores (23 stores)
│   ├── useChatStore.ts # Main chat logic
│   ├── fileStore.ts    # File management
│   ├── editorStore.ts  # Editor state
│   └── ...
│
├── services/           # Business logic
│   ├── codeAnalysis.ts
│   ├── errorFixService.ts
│   └── ...
│
├── hooks/              # Custom React hooks
├── utils/              # Utility functions
├── i18n/               # Internationalization
├── core/               # Core abstractions
└── types/              # TypeScript definitions

Backend Architecture

Technology Stack

Technology	Version	Purpose
Rust	1.80+	Backend Language
Tauri	2.0	Desktop Framework
Tokio	1.48	Async Runtime
Serde	1.0	Serialization

Directory Structure

src-tauri/src/
├── lib.rs                    # Main entry point
├── ai_utils.rs               # AI utilities
├── local_model.rs            # Local LLM support
├── intelligence_router.rs    # AI routing logic
├── multimodal.rs             # Image processing
│
├── commands/                 # Tauri commands
│   ├── atomic_commands.rs    # File operations
│   ├── core_wrappers.rs      # Core functionality
│   └── symbol_commands.rs    # Symbol indexing
│
├── agent_system/             # Agent framework
│   ├── supervisor.rs
│   └── toolchain.rs
│
├── conversation/             # Chat management
├── openspec/                 # OpenSpec protocol
├── prompt_manager/           # Prompt templates
│
└── llm_inference/            # Local inference (optional)

Communication Layer

Tauri IPC

Frontend and backend communicate via Tauri's IPC:

// Frontend: Invoke backend command
import { invoke } from '@tauri-apps/api/core'

const content = await invoke('read_file', { path: '/path/to/file' })

// Backend: Register command
#[tauri::command]
async fn read_file(path: String) -> Result<String, String> {
    fs::read_to_string(&path).map_err(|e| e.to_string())
}

Performance Architecture

Rendering

• 120 FPS Target: Sub-16ms frame time
• Virtual Scrolling: Large list optimization
• Memoization: React.memo for expensive components

File System

• Incremental Indexing: Only scan changed files
• Lazy Loading: Load files on demand
• Caching: LRU cache for hot files

AI Requests

• Streaming: Server-Sent Events for real-time responses
• Request Batching: Combine multiple requests
• Context Compression: Smart token management

Security Architecture

Sandboxing

• Tauri's security model limits system access
• File system access scoped to project directory
• Shell commands require explicit approval

API Keys

• Stored in system keychain (not plain text)
• Never logged or transmitted
• Per-provider isolation

References

• Tauri Documentation
• React Documentation
• Zustand Documentation
• Rust Book