System Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:(S)cripty is a desktop application built using the Tauri framework, which allows for the creation of cross-platform applications with a web-based frontend and a Rust backend. The architecture leverages React for the user interface and Rust for powerful, low-level system interactions, primarily focused on managing and executing PowerShell scripts. This separation allows for a rich, modern UI while retaining the performance and capabilities of a native application.
The system is divided into two main parts: the frontend, built with React and Vite, which handles all user interactions and display logic; and the backend, a Rust binary that exposes specific functions to the frontend for tasks like file system access and running shell commands. Communication between these two layers is handled securely by Tauri's API. State management on the frontend is handled by Zustand, with persistence to the local file system.
High-Level Architecture
The application follows a classic hybrid desktop app model. The core is a Rust application that creates and manages a native webview window, into which the React frontend is loaded.
This diagram shows the main architectural components. React components use the Tauri JS API to invoke Rust commands. The Zustand store persists state using the Tauri FS plugin, which interacts with the file system. Rust commands can spawn system processes like PowerShell.
Sources: src/App.jsx, src-tauri/src/lib.rs, src/Hooks/useListStore.js
Frontend Architecture
The frontend is a single-page application (SPA) built with React and bundled using Vite.
Sources: package.json:20, vite.config.js
Component Structure
The UI is composed of several key React components that manage different parts of the application view. The main App.jsx component orchestrates the display of other components based on application state.
| Component | Description | Source File |
|---|---|---|
App | The root component. Manages the main layout and the visibility of modal/pop-up components like Form, FormTag, and DetailView. | src/App.jsx |
TopBar | A custom window title bar with minimize, maximize, and close controls. | src/components/TopBar.jsx |
List | Displays the list of saved scripts. Allows users to select a script to view its details. | src/components/Form/List.jsx |
Form | A form for adding a new script. It handles file selection for .ps1 files. | src/components/Form/Form.jsx |
FormTag | A form for adding new tags to the system. | src/components/Form/FormTag.jsx |
DetailView | Displays the content of a selected script and provides options to run it with different privilege levels (User, Admin). | src/components/DetailView/DetailView.jsx |
Sources: src/App.jsx:53-61
State Management
Application state, including the list of scripts and tags, is managed globally using Zustand. A custom hook, useListStore, provides access to the state and actions to modify it.
The store is configured with persist middleware to save the items (scripts) and tags to a local JSON file, ensuring data is not lost between application sessions.
// src/Hooks/useListStore.js:31-33
export const useListStore = create(
persist(
(set, get) => ({
items: [],
tags: ["Routine", "SYSTEM", "Check", "User", "Admin", "Archive"],
selectedItem: null,
// ... actions like addItem, removeItem, etc.
}),
{
name: "scriptStorage",
partialize: (state) => ({
items: state.items,
tags: state.tags,
}),
storage: createJSONStorage(() => fileStorage),
},
),
);
Sources: src/Hooks/useListStore.js:31-51
Data Persistence
The Zustand store's persistence is implemented via a custom fileStorage object that uses the @tauri-apps/plugin-fs to interact with the file system. Data is stored in scriptStorage.json within the user's application data directory.
This sequence shows how a state change in Zustand triggers the persistence middleware, which uses the Tauri FS plugin to write the updated state to a JSON file on disk.
Sources: src/Hooks/useListStore.js:8-28
Backend Architecture
The backend is a Rust application compiled to a binary. It uses the tauri crate to manage the application lifecycle and expose functionality to the frontend.
Sources: src-tauri/src/main.rs, src-tauri/Cargo.toml
Tauri Commands
The bridge between the frontend and backend is a set of Rust functions annotated with #[tauri::command]. These functions can be called from the JavaScript frontend using invoke().
The following commands are defined:
| Command | Parameters | Description | Source |
|---|---|---|---|
open_terminal | content: String | Spawns a new PowerShell process with the given script content, running as the current user. | src-tauri/src/lib.rs:27-30 |
open_admin_terminal | content: String | Spawns a new PowerShell process with elevated (Administrator) privileges. | src-tauri/src/lib.rs:32-42 |
run_sys_terminal | content: Option<String> | Executes a command using an embedded syspwsh.exe to run with SYSTEM privileges. | src-tauri/src/lib.rs:44-56 |
read_ps1 | path: String | Reads the content of a .ps1 file from the specified path and returns it to the frontend. | src-tauri/src/lib.rs:58-64 |
These commands are registered in the main application builder.
// src-tauri/src/lib.rs:72-77
.invoke_handler(tauri::generate_handler![
open_terminal,
read_ps1,
run_sys_terminal,
open_admin_terminal
])
Sources: src-tauri/src/lib.rs:72-77
Frontend-Backend Communication Flow
A typical interaction, such as running a script as an administrator, follows this sequence:
This diagram illustrates the flow from a user action in the React UI to the execution of a Rust command that spawns an elevated PowerShell process.
Sources: src/components/DetailView/DetailView.jsx:25-27, src-tauri/src/lib.rs:32-42
Configuration and Build
The application's behavior, appearance, and build process are defined in several configuration files.
Tauri Configuration
src-tauri/tauri.conf.json is the central configuration file for the Tauri application.
| Key | Description | Example Value |
|---|---|---|
productName | The name of the application. | (S)cripty |
version | The application version. | 0.9.1 |
identifier | A unique identifier for the application bundle. | com.scripty.app |
build | Commands to run before development and build, and the location of the frontend assets. | { "frontendDist": "../dist" } |
app.windows | Defines the properties of the main application window, such as size, title, and decorations. | { "decorations": false, "transparent": true } |
plugins.updater | Configures the built-in auto-updater, including the public key and update server endpoint. | { "active": true, "endpoints": [...] } |
Sources: src-tauri/tauri.conf.json
Auto-Updater
The application includes an auto-updater feature. The configuration in tauri.conf.json enables the updater plugin and points to a GitHub releases URL to check for new versions. The update check is initiated on application startup in App.jsx.
// src/App.jsx:15-16
const update = await check();
if (update) {
// ... download and install logic ...
await relaunch();
}