​

Architecture Overview

​

Technology Stack

​

Frontend

• React 19.1.0 - Modern UI library with React Compiler enabled
• TypeScript 5.8 - Type-safe development
• Vite - Fast build tool and dev server
• TailwindCSS 4.1 - Utility-first styling
• Zustand 5.0 - Lightweight state management
• React Router 7.10 - Client-side routing
• Axios - HTTP client for API communication
• i18next - Internationalization

​

Backend

• Tauri 2 - Cross-platform desktop framework
• Rust - Systems programming language
• Tokio - Async runtime
• Reqwest - HTTP client
• Serde - Serialization/deserialization

​

UI Components

• Radix UI - Accessible component primitives
• Lucide React - Icon library
• Recharts - Data visualization
• Motion - Animation library
• Sonner - Toast notifications

​

Architectural Pattern

┌─────────────────────────────────────────────────────┐
│               React Frontend (WebView)              │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────┐ │
│  │ Features │  │  Shared  │  │   Services       │ │
│  │  Pages   │  │Components│  │  API / Storage   │ │
│  └────┬─────┘  └────┬─────┘  └────────┬─────────┘ │
│       │             │                 │           │
│       └─────────────┴─────────────────┘           │
└──────────────────────┬──────────────────────────────┘
                       │ Tauri IPC Bridge
                       │ (invoke/events)
┌──────────────────────┴──────────────────────────────┐
│               Rust Backend (Tauri)                  │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────┐ │
│  │ Commands │  │  State   │  │   Plugins        │ │
│  │ Handlers │  │ Management│  │ Shell/FS/Dialog  │ │
│  └──────────┘  └──────────┘  └──────────────────┘ │
│                                                     │
│  System Integration (Process, Tray, Updater)       │
└─────────────────────────────────────────────────────┘

​

Communication Layer: Tauri IPC

​

Frontend → Backend (Commands)

// Frontend invokes Rust commands
import { invoke } from '@tauri-apps/api/core';

const pid = await invoke<number>('start_cli_proxy', { 
  exePath: '/path/to/proxy' 
});

​

Backend Command Handlers

// Rust command handler
#[command]
pub async fn start_cli_proxy(exe_path: String) -> CommandResult<u32> {
    // Implementation
}

​

Backend → Frontend (Events)

// Frontend listens to backend events
window.addEventListener('unauthorized', () => {
  // Handle auth error
});

​

Core Modules

​

Backend Modules (src-tauri/src/)

​

Frontend Modules (src/)

​

Build System

​

Development Workflow

# Frontend only (Vite dev server)
pnpm run dev          # http://localhost:1420

# Full desktop app
pnpm run tauri dev    # Tauri window with hot reload

​

Production Build

# Build frontend bundle
pnpm run build        # → dist/

# Build desktop application
pnpm run tauri build  # → src-tauri/target/release/

​

Build Pipeline

1. TypeScript Compilation - Type checking with tsc
2. Vite Bundle - Frontend assets → dist/
3. Rust Compilation - Backend binary with embedded frontend
4. Platform Bundling - Native installers (.exe, .dmg, .deb, .AppImage)
5. Update Artifacts - Auto-updater manifest generation

​

Configuration Files

​

Tauri Configuration (src-tauri/tauri.conf.json)

{
  "productName": "ZeroLimit",
  "identifier": "com.0xtbug.zero-limit",
  "build": {
    "beforeDevCommand": "pnpm dev",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "pnpm build",
    "frontendDist": "../dist"
  },
  "plugins": {
    "updater": {
      "endpoints": [
        "https://github.com/0xtbug/zero-limit/releases/latest/download/latest.json"
      ]
    }
  }
}

​

Vite Configuration (vite.config.ts)

• Port: 1420 (fixed for Tauri)
• HMR: WebSocket on 1421
• Path alias: @ → src/
• Plugins: React with compiler, TailwindCSS

​

Key Features

​

1. CLI Proxy Management

• Start/stop external CLI proxy processes
• Process lifecycle management
• Cross-platform process handling (Windows taskkill, Unix pkill)

​

2. System Tray Integration

• Always-available system tray icon
• Run in background mode
• Quick access menu

​

3. Auto-Updater

• GitHub releases integration
• Platform-specific update artifacts
• Silent background updates

​

4. Multi-Provider Support

• Anthropic Claude
• GitHub Copilot
• Google Gemini
• Custom API providers

​

5. Usage Tracking

• Real-time quota monitoring
• Historical usage statistics
• Provider-specific metrics

​

Security Model

​

Tauri Security Features

• CSP (Content Security Policy) - Configured in tauri.conf.json
• IPC Allowlist - Only registered commands are accessible
• Process Isolation - Frontend runs in sandboxed WebView
• Native API Access - Controlled through Tauri plugins

​

Data Storage

• Local Storage - Configuration and cache
• Secure Credentials - Management key stored securely
• No Secrets in Source - All sensitive data from user input

​

Platform Support

​

Next Steps

• Frontend Structure - Deep dive into React architecture
• Backend Structure - Rust/Tauri implementation details