Welcome to Scripty

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• index.html
• package.json
• src-tauri/Cargo.toml
• src-tauri/build.rs
• src-tauri/capabilities/default.json
• src-tauri/src/lib.rs
• src-tauri/src/main.rs
• src-tauri/tauri.conf.json
• src/App.css
• src/App.jsx
• src/Hooks/useListStore.js
• src/components/DetailView/DetailView.jsx
• src/components/Form/FilterComp.jsx
• src/components/Form/Form.jsx
• src/components/Form/FormTag.jsx
• src/components/Form/List.jsx
• src/components/TopBar.jsx
• src/main.jsx
• vite.config.js

Scripty is a desktop utility designed for managing and executing PowerShell scripts. Built using the Tauri framework, it combines a React-based frontend with a Rust backend, providing a cross-platform solution for developers and system administrators. The application allows users to import .ps1 scripts, categorize them with tags, and execute them with varying privilege levels (User, Administrator).

The core functionality includes persistent storage of script metadata, a simple interface for adding and viewing scripts, and direct integration with the underlying operating system's shell for script execution. The project leverages modern web technologies like Vite and TailwindCSS for the user interface, while relying on Rust for secure and efficient system-level operations.

Architecture Overview

Scripty follows the standard Tauri architecture, where the frontend is a webview rendering a single-page application (SPA), and the backend is a native Rust process. Communication between the two layers is handled by Tauri's asynchronous message-passing system.

• Frontend: A React application built with Vite. It uses TailwindCSS for styling and Zustand for state management.
• Backend: A Rust application that exposes specific functions (Tauri commands) to the frontend for tasks like file I/O and process execution.
• Data Persistence: Application state, including scripts and tags, is managed by a Zustand store and persisted to a JSON file (scriptStorage.json) in the user's application data directory.

Sources: [package.json](https://github.com/SemtexHR/Scripty/blob/HEAD/package.json), [src-tauri/Cargo.toml](https://github.com/SemtexHR/Scripty/blob/HEAD/src-tauri/Cargo.toml), [src/Hooks/useListStore.js:1-30](https://github.com/SemtexHR/Scripty/blob/HEAD/src/Hooks/useListStore.js#L1-L30), [vite.config.js](https://github.com/SemtexHR/Scripty/blob/HEAD/vite.config.js)

The following diagram illustrates the high-level architecture of the Scripty application.

*Sources: [src/App.jsx](https://github.com/SemtexHR/Scripty/blob/HEAD/src/App.jsx), [src-tauri/src/lib.rs](https://github.com/SemtexHR/Scripty/blob/HEAD/src-tauri/src/lib.rs), [src/Hooks/useListStore.js](https://github.com/SemtexHR/Scripty/blob/HEAD/src/Hooks/useListStore.js)

Frontend Components

The user interface is built with React and composed of several key components that manage the application's views and user interactions.

Component	Description	Source File
App.jsx	The main application component. Manages the visibility of modal views like forms and the detail view.	[src/App.jsx](https://github.com/SemtexHR/Scripty/blob/HEAD/src/App.jsx)
TopBar.jsx	A custom title bar with window controls (minimize, maximize, close) and a theme switcher.	[src/components/TopBar.jsx](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/TopBar.jsx)
List.jsx	Renders the list of available scripts. Handles item selection to open the DetailView.	[src/components/Form/List.jsx](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/Form/List.jsx)
DetailView.jsx	Displays the content of a selected script and provides options to run or delete it.	[src/components/DetailView/DetailView.jsx](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/DetailView/DetailView.jsx)
Form.jsx	A form for adding a new script, including its name, tags, and the associated .ps1 file.	[src/components/Form/Form.jsx](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/Form/Form.jsx)
FormTag.jsx	A simple form for adding new custom tags to the system.	[src/components/Form/FormTag.jsx](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/Form/FormTag.jsx)

The component hierarchy is structured with App.jsx at the root, conditionally rendering other components based on application state.

*Sources: [src/App.jsx:40-79](https://github.com/SemtexHR/Scripty/blob/HEAD/src/App.jsx#L40-L79)

State Management with Zustand

Scripty uses Zustand for client-side state management, combined with its persist middleware to save application data.

State Structure

The useListStore hook provides access to the global state, which includes:

Property	Type	Description
items	Array<Object>	An array of script objects.
tags	Array<string>	An array of available tags for categorizing scripts.
selectedItem	Object | null	The currently selected script object, or null if none is selected.
filterTag	string | null	The tag currently used to filter the script list.

*Sources: [src/Hooks/useListStore.js:32-41](https://github.com/SemtexHR/Scripty/blob/HEAD/src/Hooks/useListStore.js#L32-L41)

Data Persistence

The Zustand store is configured to persist the items and tags arrays to the local file system. A custom storage object leverages the @tauri-apps/plugin-fs to write the state to scriptStorage.json within the application's data directory.

This diagram shows the data persistence flow.

*Sources: [src/Hooks/useListStore.js:13-30](https://github.com/SemtexHR/Scripty/blob/HEAD/src/Hooks/useListStore.js#L13-L30), [src/Hooks/useListStore.js:101-108](https://github.com/SemtexHR/Scripty/blob/HEAD/src/Hooks/useListStore.js#L101-L108)

Backend Core (Rust)

The Rust backend handles operations that require direct system access. These functions are exposed to the frontend as Tauri commands.

Tauri Commands

The following commands can be invoked from the JavaScript frontend.

Command	Parameters	Description
read_ps1	path: String	Reads the content of a .ps1 file at the given path and returns it to the frontend.
open_terminal	content: String	Executes the provided script content in a new PowerShell terminal with standard user privileges.
open_admin_terminal	content: String	Executes the script content in a new PowerShell terminal with elevated (Administrator) privileges.
run_sys_terminal	content: String	Executes the script with SYSTEM privileges by using an embedded syspwsh.exe utility.

*Sources: [src-tauri/src/lib.rs:32-79](https://github.com/SemtexHR/Scripty/blob/HEAD/src-tauri/src/lib.rs#L32-L79)

Script Execution

The DetailView.jsx component allows users to choose an execution context. This selection maps directly to one of the backend commands.

• User: Invokes open_terminal.
• Admin: Invokes open_admin_terminal. This command uses Start-Process with the -Verb RunAs argument to request elevation.

*Sources: [src/components/DetailView/DetailView.jsx:21-34](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/DetailView/DetailView.jsx#L21-L34), [src-tauri/src/lib.rs:37-50](https://github.com/SemtexHR/Scripty/blob/HEAD/src-tauri/src/lib.rs#L37-L50)

Core Workflows

Adding a New Script

This sequence diagram illustrates the process of adding a new script to the application.

*Sources: [src/components/Form/Form.jsx:45-62](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/Form/Form.jsx#L45-L62), [src-tauri/src/lib.rs:72-78](https://github.com/SemtexHR/Scripty/blob/HEAD/src-tauri/src/lib.rs#L72-L78)

Executing a Script

This diagram shows the flow for selecting and running a script.

*Sources: [src/components/Form/List.jsx:10-16](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/Form/List.jsx#L10-L16), [src/components/DetailView/DetailView.jsx:21-34](https://github.com/SemtexHR/Scripty/blob/HEAD/src/components/DetailView/DetailView.jsx#L21-L34), [src-tauri/src/lib.rs:43-50](https://github.com/SemtexHR/Scripty/blob/HEAD/src-tauri/src/lib.rs#L43-L50)

Configuration & Build

The application's behavior, build process, and dependencies are defined in several configuration files.

• tauri.conf.json: Defines the application identifier, version, window properties (size, decorations), and the auto-updater configuration. The updater is configured to check for new releases on GitHub.
  *Sources: [src-tauri/tauri.conf.json:3-37](https://github.com/SemtexHR/Scripty/blob/HEAD/src-tauri/tauri.conf.json#L3-L37)
• package.json: Lists all frontend dependencies, such as react, zustand, and @tauri-apps/api. It also contains the scripts for running the development server (dev) and building the application (build).
  *Sources: [package.json:6-29](https://github.com/SemtexHR/Scripty/blob/HEAD/package.json#L6-L29)
• vite.config.js: Configures the Vite build tool for the React frontend, including settings for the development server and ensuring it integrates correctly with the Tauri CLI.
  *Sources: [vite.config.js](https://github.com/SemtexHR/Scripty/blob/HEAD/vite.config.js)

Auto-Updater

Scripty includes a built-in auto-update mechanism powered by tauri-plugin-updater.

1. On application startup, App.jsx calls check() from the updater plugin.
2. The updater checks the endpoint specified in tauri.conf.json for a new version manifest.
3. If an update is found, the application proceeds to download and install it in the background.
4. Once the download is complete, the relaunch() function from @tauri-apps/plugin-process is called to restart the application with the new version.

*Sources: [src/App.jsx:14-36](https://github.com/SemtexHR/Scripty/blob/HEAD/src/App.jsx#L14-L36), [src-tauri/tauri.conf.json:38-45](https://github.com/SemtexHR/Scripty/blob/HEAD/src-tauri/tauri.conf.json#L38-L45)

Summary

Scripty is a practical desktop tool that demonstrates the power of the Tauri framework for building native applications with web technologies. It provides a clean, focused feature set for managing and executing PowerShell scripts, with a clear separation between the React-based UI and the system-level operations handled by the Rust backend. Its use of Zustand for persistent state management and the inclusion of an auto-updater make it a robust and maintainable utility.