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                   │
│                         │  └── draftline.rs               │
│                         │                               │
│                         │  AI Layer                       │
│                         │  └── agentive crate             │
│                         │      (Foundry/Azure/OpenAI/     │
│                         │       Anthropic via reqwest)    │
│                         │                                 │
│                         │  Sidecars                       │
│                         │  └── Node.js automation         │
├─────────────────────────┴───────────────────────────────┤
│                    Tauri v2 Runtime                      │
│              (WebView + Rust + IPC Bridge)               │
└─────────────────────────────────────────────────────────┘

CutReady also depends on three sibling projects that provide core product capabilities:

Project	Role in CutReady
Draftline	Workspace persistence, snapshots, timelines, branching, merge flows, and GitHub remote sync. CutReady hides git behind Draftline commands and content policy.
Elucim	Semantic visual DSL and renderer for framing graphics in sketch rows. Designer-agent outputs are stored as Elucim JSON under .cutready/visuals/.
Agentive	Shared LLM provider layer, agent loop, tool execution, streaming, OAuth helpers, and Responses API routing.

That means the app shell owns demo-specific UX and file formats, while Draftline, Elucim, and Agentive own persistence, visuals, and AI orchestration respectively.

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
@elucim/dsl	Visual rendering for generated framing graphics

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)
• Workspace state (single-project vs. multi-project, active project, project manifest)
• 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
draftline.rs	Draftline-backed snapshot save/restore, timelines, remotes, and merge/apply flows

Engine Layer (src/engine/)

Lower-level implementations:

• interaction.rs — browser profile detection and sidecar-backed interaction capture
• screenshot.rs — Native screen capture via xcap crate
• project.rs — safe project I/O, single-project and multi-project workspace manifests, asset scanning
• draftline_adapter.rs — CutReady content policy and product-facing facade over Draftline persistence
• visuals — Elucim DSL JSON assets stored under .cutready/visuals/ and referenced by sketch rows
• recording.rs, automation.rs, export.rs — placeholders for future FFmpeg capture, replay automation, and FCPXML output

Workspace Persistence

Draftline owns the workspace repository. In a single-project workspace, the workspace root is also the project root. In a multi-project workspace, .cutready/projects.json lists project subdirectories and each project keeps its own sketches, storyboards, notes, screenshots, and visuals.

CutReady snapshots versioned project content through Draftline and keeps local runtime state under .git/cutready/, so normal chat, agent, tab, and ordering activity does not dirty the content timeline.

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

Browser Automation Sidecar

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

1. The Rust backend spawns a Node.js automation process
2. Communication happens over stdio (JSON messages)
3. The sidecar connects to supported browsers for observation and replay
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.