Application Architecture

CutReady's main interface with sidebar, sketch editor, and chat panel

High-Level Architecture

CutReady is a Tauri v2 desktop application with a split architecture:

┌─────────────────────────────────────────────────────────┐
│                    CutReady Desktop App                  │
├─────────────────────────┬───────────────────────────────┤
│      Frontend (WebView) │      Backend (Rust)           │
│                         │                               │
│  React 19 + TypeScript  │  Tauri Commands               │
│  Zustand State Store    │  ├── project.rs               │
│  Tailwind CSS           │  ├── sketch.rs                │
│  CodeMirror             │  ├── storyboard.rs            │
│  @dnd-kit               │  ├── note.rs                  │
│                         │  ├── interaction.rs            │
│                         │  ├── screenshot.rs             │
│                         │  ├── import.rs                  │
│                         │  ├── agent.rs                   │
│                         │  └── versioning.rs              │
│                         │                               │
│                         │  AI Layer                       │
│                         │  └── agentive crate             │
│                         │      (Foundry/Azure/OpenAI/     │
│                         │       Anthropic via reqwest)    │
│                         │                                 │
│                         │  Sidecar                        │
│                         │  └── Playwright (Node.js)       │
├─────────────────────────┴───────────────────────────────┤
│                    Tauri v2 Runtime                      │
│              (WebView + Rust + IPC Bridge)               │
└─────────────────────────────────────────────────────────┘

Frontend

The frontend is a React 19 single-page application bundled with Vite:

Technology	Purpose
React 19	UI component framework
TypeScript	Type-safe frontend code
Zustand	Centralized state management
Tailwind CSS	Utility-first styling
CodeMirror	Markdown editing (notes)
@dnd-kit	Drag-and-drop (storyboard list, table rows)
react-markdown	Markdown preview rendering

State Management

All application state flows through a single Zustand store (appStore.ts):

• Project state (current project, recent list)
• Document state (sketches, storyboards, notes)
• UI state (sidebar, tabs, panels, theme)
• Browser interaction recording state (profiles, active session)
• Version history (snapshots, timeline, dirty flags)

The store dispatches Tauri commands to the Rust backend for all filesystem and system operations.

Backend (Rust)

The Rust backend handles:

Commands Layer (src/commands/)

Module	Responsibility
project.rs	Project CRUD, recent projects, sidebar persistence
sketch.rs	Sketch document CRUD, list summaries
storyboard.rs	Storyboard CRUD, sketch ordering
note.rs	Markdown note CRUD
interaction.rs	Browser profile detection and in-progress browser interaction recording
screenshot.rs	Monitor detection, screen/region capture
import.rs	Document import (docx, pdf, pptx conversion)
agent.rs	AI chat and agent commands
versioning.rs	Snapshot save/restore, timeline, stash

Engine Layer (src/engine/)

Lower-level implementations:

• interaction.rs — CDP browser communication, Playwright sidecar management
• screenshot.rs — Native screen capture via xcap crate
• versioning.rs — Git operations via gix (gitoxide, pure-Rust git) — no external git needed
• recording.rs, automation.rs, export.rs — placeholders for future FFmpeg capture, replay automation, and FCPXML output

AI Layer

CutReady uses the agentive crate to power AI features across 4 providers:

• API communication via reqwest with configurable endpoints and OAuth support
• Function calling for structured sketch manipulation (add rows, update fields)
• Streaming responses delivered to the frontend via Tauri channels
• Silent mode for sparkle buttons — results are applied directly without chat UI
• Responses API auto-routing for codex/pro-series models

Supported providers: Microsoft Foundry, Azure OpenAI, OpenAI, Anthropic.

The AI layer supports four built-in agents (Planner, Writer, Editor, Designer) plus user-defined custom agents.

Models Layer (src/models/)

Shared data types:

• action.rs — Tagged union of browser/native actions
• script.rs — Script rows with metadata
• session.rs — Recording session with captured actions
• sketch.rs — Sketch, Storyboard, VersionEntry, GraphNode

Playwright Sidecar

Browser interaction recording is being built around a Node.js sidecar process managed by Tauri:

1. The Rust backend spawns a Playwright Node.js process
2. Communication happens over stdio (JSON messages)
3. The sidecar connects to Chrome/Edge via CDP (Chrome DevTools Protocol)
4. Actions are streamed back to the Rust backend in real time

This architecture isolates browser observation from the main process, preventing UI freezes during recording. The user-facing production workflow for recording, automated replay, and self-healing automation is still planned.

Cross-Platform Support

Feature	Windows	macOS	Linux
UI & Navigation	Available	Available	Available
Sketch Editor	Available	Available	Available
Screen Capture	Available	Available	Available with PipeWire
Browser Interaction Recording	In development	In development	In development
Version History	Available	Available	Available

Note

Browser interaction recording code exists, but the documented production path remains planning, AI refinement, snapshots, collaboration, and Word export. FFmpeg screen/audio recording, replay automation, and FCPXML export are still future production phases.

Build & Release

CutReady uses GitHub Actions for automated cross-platform builds:

• macOS — ARM (Apple Silicon) + Intel (x86_64) builds
• Windows — MSI + NSIS installers
• Linux — DEB + AppImage packages (Ubuntu 24.04)

Releases are triggered by pushing a v* git tag and create draft GitHub releases with all platform artifacts.