System Architecture

Deep technical dive into CtrlOps architecture — Tauri + Rust + React stack, component relationships, and data flows.

CtrlOps is built on a high-speed foundation that combines lightning-fast performance with a simple, modern interface. This page explains the inner workings that make your server management feel so fluid.

The CtrlOps Ecosystem

At its heart, CtrlOps is divided into four main layers that work together to provide a seamless, secure connection to your infrastructure.

Technology Stack

Technology	Purpose	Version
React	UI Framework	18.x
Vite	Build Tool	5.x
Ant Design	UI Components	5.x
Tailwind CSS	Styling	3.x
XTerm.js	Terminal Emulator	5.x
Framer Motion	Animations	11.x
Zustand	State Management	4.x

Technology	Purpose	Crate
Tauri	Desktop Framework	2.x
Tokio	Async Runtime	1.x
ssh2	SSH/SFTP Client	0.9.x
reqwest	HTTP Client	0.11.x
serde	Serialization	1.x
anyhow	Error Handling	1.x

Tool	Purpose
Cargo	Rust Package Manager
NPM	Node Package Manager
GitHub Actions	CI/CD
Apple Codesign	macOS Signing
osslsigncode	Windows Signing

Project Structure

DevOpsFlow-2.0/
├── apps/
│   ├── desktop/              # Main Application Source
│   │   ├── src/
│   │   │   ├── lib.rs        # Core system functions
│   │   │   └── update_checker.rs
│   │   ├── Cargo.toml
│   │   └── tauri.conf.json
│   └── sidecar/              # Helper Services
│
├── core/                     # Shared Rust library
│   └── src/
│       ├── lib.rs            # Library exports
│       ├── ai/               # AI provider integrations
│       │   ├── mod.rs
│       │   ├── openai.rs
│       │   ├── anthropic.rs
│       │   └── gemini.rs
│       ├── license/          # License validation
│       │   └── mod.rs
│       ├── sessions/         # SSH session management
│       │   └── manager.rs
│       ├── sftp/             # SFTP operations
│       │   └── mod.rs
│       └── ssh/              # SSH utilities
│           └── mod.rs
│
├── ui/                       # React frontend
│   └── src/
│       ├── index.jsx         # Entry point
│       ├── components/       # React components
│       │   ├── Instance/     # Server management
│       │   ├── Home/         # Connection management
│       │   ├── Layout/       # App layout
│       │   └── Common/       # Shared components
│       ├── pages/            # Route pages
│       ├── utils/            # Utilities
│       │   ├── socketService.js
│       │   ├── mixpanel.js
│       │   └── aiPrompts.js
│       └── hooks/            # Custom React hooks
│
├── Cargo.toml               # Rust workspace
├── package.json             # Node dependencies
└── vite.config.js          # Vite configuration

Component Mapping

Backend (Rust) → Frontend (React)

Rust Component	Purpose	React Consumer
`ssh_connect`	Establish SSH connection	`socketService.js`
`ssh_open_shell`	Open interactive shell	`Console.jsx`
`ssh_execute_command`	Run remote commands	`socketService.js`
`sftp_list`	List remote files	`FileManager.jsx`
`sftp_upload`	Upload files	`FileManager.jsx`
`sftp_download`	Download files	`FileManager.jsx`
`ai_chat_request`	AI provider calls	`socketService.js`
`validate_license`	License validation	`LicenseActivation.jsx`
`check_for_update`	Update checking	`useStartupUpdateCheck.js`

Application Visual Flow

Data Flow Examples

Secure Server Connection Flow

AI Assistant Flow

IPC Communication

Commands (Frontend → Backend)

Prop

Type

Example command definition:

#[tauri::command]
async fn ssh_connect(
    session_id: String,
    config: SshConfig,
) -> Result<SshConnectResult, String> {
    // Implementation
}

Invoked from React:

import { invoke } from '@tauri-apps/api/core';

const result = await invoke('ssh_connect', {
  sessionId: 'main-connection',
  config: { host, username, port: 22 }
});

Events (Backend → Frontend)

Prop

Type

Example event flow:

// Rust emits
cmd.app_handle()
    .emit("ssh:terminal-data", json!({
        "sessionId": id,
        "data": output
    }))
    .ok();

// React listens
import { listen } from '@tauri-apps/api/event';

const unlisten = await listen('ssh:terminal-data', (event) => {
  const { sessionId, data } = event.payload;
  // Update terminal
});

Security Foundation

Protecting Your Data

The management interface runs in a securely isolated environment:

No direct access to your local files without permission.
No external network access except through the secure bridge.
Every system request is checked by the secure engine.

The core engine operates with standard workstation permissions:

Secure server connections use verified system tunnels.
File tasks remain strictly within your authorized desktop space.
All binaries are digitally signed and verified by Apple/Microsoft.

All internal messages are rigorously checked:

Automatic verification of every command received.
Strict input checks to prevent accidental server errors.
Self-healing error handling to prevent application crashes.

Performance Characteristics

Metric	Target	Achieved
Binary Size	< 20 MB	~15 MB
Idle Memory	< 50 MB	~30 MB
Startup Time	< 2s	< 1s
SSH Connection	< 5s	< 3s
File Transfer	Saturate 1Gbps	~900 Mbps
AI Response	< 3s	< 2s (typical)

Build Pipeline

Release Process: Each release goes through automated builds on macOS, Windows, and Linux runners. Binaries are signed and notarized before distribution via the update server.

Extension Points

CtrlOps is designed for extensibility:

Adding New AI Providers

Create provider file in core/src/ai/
Implement the AiProvider trait
Add to provider router
Register in frontend AI settings

Adding New SSH Commands

Add command handler in apps/desktop/src/lib.rs
Create TypeScript type definitions
Add UI component
Wire through socket service

Custom Themes

The UI uses CSS variables for theming:

:root {
  --ctrl-primary: #35b729;
  --ctrl-bg: #111114;
  --ctrl-surface: #1a1a1d;
}

Want to contribute? Check out the Contributing Guide and Development Setup.

System Architecture

On this page